diff --git a/.circleci/config.yml b/.circleci/config.yml
index 334cf7e9939..0dcca1d322b 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -1,69 +1,319 @@
 version: 2.1
 executors:
-  linux:
+  pw-focal-development:
     docker:
-      - image: cimg/base:stable
-orbs:
-  node: circleci/node@4.5.1
-  browser-tools: circleci/browser-tools@1.1.3
-jobs:
-  test:
+      - image: mcr.microsoft.com/playwright:v1.39.0-focal
+    environment:
+      NODE_ENV: development # Needed to ensure 'dist' folder created and devDependencies installed
+      PERCY_POSTINSTALL_BROWSER: "true" # Needed to store the percy browser in cache deps
+      PERCY_LOGLEVEL: "debug" # Enable DEBUG level logging for Percy (Issue: https://github.com/nasa/openmct/issues/5742)
+  ubuntu:
+    machine:
+      image: ubuntu-2204:current
+      docker_layer_caching: true
+parameters:
+  BUST_CACHE:
+    description: "Set this with the CircleCI UI Trigger Workflow button (boolean = true) to bust the cache!"
+    default: false
+    type: boolean
+commands:
+  build_and_install:
+    description: "All steps used to build and install. Will use cache if found"
     parameters:
       node-version:
         type: string
-      browser:
-        type: string
-      always-pass:
-        type: boolean  
-    executor: linux
     steps:
       - checkout
-      - restore_cache:
-          key: deps-{{ .Branch }}--<< parameters.node-version >>--{{ checksum "package.json" }}
+      - restore_cache_cmd:
+          node-version: << parameters.node-version >>
       - node/install:
           node-version: << parameters.node-version >>
-      - node/install-packages:
-          override-ci-command: npm install
-      - when: # Just to save time until caching saves the browser bin
-          condition:
-            equal: [ "FirefoxESR", <<parameters.browser>> ]
-          steps:
-            - browser-tools/install-firefox:
-                version: "78.11.0esr" #https://archive.mozilla.org/pub/firefox/releases/          
-      - when: # Just to save time until caching saves the browser bin
+      - run: npm install --no-audit --progress=false
+  restore_cache_cmd:
+    description: "Custom command for restoring cache with the ability to bust cache. When BUST_CACHE is set to true, jobs will not restore cache"
+    parameters:
+      node-version:
+        type: string
+    steps:
+      - when:
           condition:
-            equal: [ "ChromeHeadless", <<parameters.browser>> ]
+            equal: [false, << pipeline.parameters.BUST_CACHE >>]
           steps:
-            - browser-tools/install-chrome:
-                replace-existing: false
+            - restore_cache:
+                key: deps--{{ arch }}--{{ .Branch }}--<< parameters.node-version >>--{{ checksum "package.json" }}-{{ checksum ".circleci/config.yml" }}
+  save_cache_cmd:
+    description: "Custom command for saving cache."
+    parameters:
+      node-version:
+        type: string
+    steps:
       - save_cache:
-          key: deps-{{ .Branch }}--<< parameters.node-version >>--{{ checksum "package.json" }}
+          key: deps--{{ arch }}--{{ .Branch }}--<< parameters.node-version >>--{{ checksum "package.json" }}-{{ checksum ".circleci/config.yml" }}
           paths:
             - ~/.npm
-            - ~/.cache
             - node_modules
-      - run: npm run test:coverage -- --browsers=<<parameters.browser>> || <<parameters.always-pass>>
+  generate_and_store_version_and_filesystem_artifacts:
+    description: "Track important packages and files"
+    steps:
+      - run: |
+          [[ $EUID -ne 0 ]] && (sudo mkdir -p /tmp/artifacts && sudo chmod 777 /tmp/artifacts) || (mkdir -p /tmp/artifacts && chmod 777 /tmp/artifacts)
+          printenv NODE_ENV >> /tmp/artifacts/NODE_ENV.txt || true
+          npm -v >> /tmp/artifacts/npm-version.txt
+          node -v >> /tmp/artifacts/node-version.txt
+          ls -latR >> /tmp/artifacts/dir.txt
+      - store_artifacts:
+          path: /tmp/artifacts/
+  generate_e2e_code_cov_report:
+    description: "Generate e2e code coverage artifacts and publish to codecov.io. Needed to that we can ignore the exit code status of the npm run test"
+    parameters:
+      suite:
+        type: string
+    steps:
+      - run: npm run cov:e2e:report || true
+      - run: npm run cov:e2e:<<parameters.suite>>:publish
+orbs:
+  node: circleci/node@5.1.0
+  browser-tools: circleci/browser-tools@1.3.0
+jobs:
+  npm-audit:
+    parameters:
+      node-version:
+        type: string
+    executor: pw-focal-development
+    steps:
+      - build_and_install:
+          node-version: <<parameters.node-version>>
+      - run: npm audit --audit-level=low
+      - generate_and_store_version_and_filesystem_artifacts
+  lint:
+    parameters:
+      node-version:
+        type: string
+    executor: pw-focal-development
+    steps:
+      - build_and_install:
+          node-version: <<parameters.node-version>>
+      - run: npm run lint
+      - generate_and_store_version_and_filesystem_artifacts
+  unit-test:
+    parameters:
+      node-version:
+        type: string
+    executor: pw-focal-development
+    steps:
+      - build_and_install:
+          node-version: <<parameters.node-version>>
+      - browser-tools/install-chrome:
+          replace-existing: false
+      - run:
+          command: |
+            mkdir -p dist/reports/tests/
+            TESTFILES=$(circleci tests glob "src/**/*Spec.js")
+            echo "$TESTFILES" | circleci tests run --command="xargs npm run test" --verbose
+      - run: npm run cov:unit:publish
+      - save_cache_cmd:
+          node-version: <<parameters.node-version>>
       - store_test_results:
           path: dist/reports/tests/
       - store_artifacts:
-          path: dist/reports/
+          path: coverage
+      - when:
+          condition:
+            equal: [42, 42] # Always generate version artifacts regardless of test failure https://discuss.circleci.com/t/make-custom-command-run-always-with-when-always/38957/2
+          steps:
+            - generate_and_store_version_and_filesystem_artifacts
+  e2e-test:
+    parameters:
+      suite: #stable or full
+        type: string
+    executor: pw-focal-development
+    parallelism: 7
+    steps:
+      - build_and_install:
+          node-version: lts/hydrogen
+      - when: #Only install chrome-beta when running the 'full' suite to save $$$
+          condition:
+            equal: ["full", <<parameters.suite>>]
+          steps:
+            - run: npx playwright install chrome-beta
+      - run:
+          command: |
+            mkdir test-results
+            TESTFILES=$(circleci tests glob "e2e/**/*.spec.js")
+            echo "$TESTFILES" | circleci tests run --command="xargs npm run test:e2e:<<parameters.suite>>" --verbose --split-by=timings
+      - when:
+          condition:
+            equal: [42, 42] # Always run codecov reports regardless of test failure https://discuss.circleci.com/t/make-custom-command-run-always-with-when-always/38957/2
+          steps:
+            - generate_e2e_code_cov_report:
+                suite: <<parameters.suite>>
+      - store_test_results:
+          path: test-results/results.xml
+      - store_artifacts:
+          path: test-results
+      - store_artifacts:
+          path: coverage
+      - store_artifacts:
+          path: html-test-results
+      - when:
+          condition:
+            equal: [42, 42] # Always generate version artifacts regardless of test failure https://discuss.circleci.com/t/make-custom-command-run-always-with-when-always/38957/2
+          steps:
+            - generate_and_store_version_and_filesystem_artifacts
+  e2e-mobile:
+    executor: pw-focal-development
+    steps:
+      - build_and_install:
+          node-version: lts/hydrogen
+      - run: npm run test:e2e:mobile
+      - when:
+          condition:
+            equal: [42, 42] # Always run codecov reports regardless of test failure https://discuss.circleci.com/t/make-custom-command-run-always-with-when-always/38957/2
+          steps:
+            - generate_e2e_code_cov_report:
+                suite: full
+      - store_test_results:
+          path: test-results/results.xml
+      - store_artifacts:
+          path: test-results
+      - store_artifacts:
+          path: coverage
+      - store_artifacts:
+          path: html-test-results
+      - when:
+          condition:
+            equal: [42, 42] # Always generate version artifacts regardless of test failure https://discuss.circleci.com/t/make-custom-command-run-always-with-when-always/38957/2
+          steps:
+            - generate_and_store_version_and_filesystem_artifacts
+  e2e-couchdb:
+    executor: ubuntu
+    steps:
+      - build_and_install:
+          node-version: lts/hydrogen
+      - run: npx playwright@1.39.0 install #Necessary for bare ubuntu machine
+      - run: |
+          export $(cat src/plugins/persistence/couch/.env.ci | xargs)
+          docker-compose -f src/plugins/persistence/couch/couchdb-compose.yaml up --detach
+          sleep 3
+          bash src/plugins/persistence/couch/setup-couchdb.sh
+      - run: sh src/plugins/persistence/couch/replace-localstorage-with-couchdb-indexhtml.sh #Replace LocalStorage Plugin with CouchDB
+      - run: npm run test:e2e:couchdb
+      - when:
+          condition:
+            equal: [42, 42] # Always run codecov reports regardless of test failure https://discuss.circleci.com/t/make-custom-command-run-always-with-when-always/38957/2
+          steps:
+            - generate_e2e_code_cov_report:
+                suite: full #add to full suite
+      - store_test_results:
+          path: test-results/results.xml
+      - store_artifacts:
+          path: test-results
+      - store_artifacts:
+          path: coverage
+      - store_artifacts:
+          path: html-test-results
+      - when:
+          condition:
+            equal: [42, 42] # Always generate version artifacts regardless of test failure https://discuss.circleci.com/t/make-custom-command-run-always-with-when-always/38957/2
+          steps:
+            - generate_and_store_version_and_filesystem_artifacts
+  mem-test:
+    executor: pw-focal-development
+    steps:
+      - build_and_install:
+          node-version: lts/hydrogen
+      - run: npm run test:perf:memory
+      - store_test_results:
+          path: test-results/results.xml
+      - store_artifacts:
+          path: test-results
+      - store_artifacts:
+          path: html-test-results
+      - when:
+          condition:
+            equal: [42, 42] # Always run codecov reports regardless of test failure https://discuss.circleci.com/t/make-custom-command-run-always-with-when-always/38957/2
+          steps:
+            - generate_and_store_version_and_filesystem_artifacts
+  perf-test:
+    executor: pw-focal-development
+    steps:
+      - build_and_install:
+          node-version: lts/hydrogen
+      - run: npm run test:perf:localhost
+      - run: npm run test:perf:contract
+      - store_test_results:
+          path: test-results/results.xml
+      - store_artifacts:
+          path: test-results
+      - store_artifacts:
+          path: html-test-results
+      - when:
+          condition:
+            equal: [42, 42] # Always run codecov reports regardless of test failure https://discuss.circleci.com/t/make-custom-command-run-always-with-when-always/38957/2
+          steps:
+            - generate_and_store_version_and_filesystem_artifacts
+  visual-a11y-tests:
+    parameters:
+      suite:
+        type: string # ci or full
+    executor: pw-focal-development
+    steps:
+      - build_and_install:
+          node-version: lts/hydrogen
+      - run: npm run test:e2e:visual:<<parameters.suite>>
+      - store_test_results:
+          path: test-results/results.xml
+      - store_artifacts:
+          path: test-results
+      - store_artifacts:
+          path: html-test-results
+      - when:
+          condition:
+            equal: [42, 42] # Always generate version artifacts regardless of test failure https://discuss.circleci.com/t/make-custom-command-run-always-with-when-always/38957/2
+          steps:
+            - generate_and_store_version_and_filesystem_artifacts
+
 workflows:
-  matrix-tests:
+  overall-circleci-commit-status: #These jobs run on every commit
     jobs:
-      - test:
-          name: node10-chrome
-          node-version: lts/dubnium
-          browser: ChromeHeadless
-          always-pass: false
-      - test:
-          name: node12-firefoxESR
-          node-version: lts/erbium
-          browser: FirefoxESR
-          always-pass: true
-      - test:
-          name: node14-chrome
-          node-version: lts/fermium
-          browser: ChromeHeadless
-          always-pass: true
-
+      - lint:
+          name: node20-lint
+          node-version: lts/iron
+      - unit-test:
+          name: node18-chrome
+          node-version: lts/hydrogen
+      - e2e-test:
+          name: e2e-stable
+          suite: stable
+      - e2e-mobile
+      - visual-a11y-tests:
+          name: visual-a11y-test-ci
+          suite: ci
 
+  the-nightly: #These jobs do not run on PRs, but against master at night
+    jobs:
+      - unit-test:
+          name: node20-chrome-nightly
+          node-version: lts/iron
+      - unit-test:
+          name: node18-chrome
+          node-version: lts/hydrogen
+      - npm-audit:
+          node-version: lts/hydrogen
+      - e2e-test:
+          name: e2e-full-nightly
+          suite: full
+      - e2e-mobile
+      - perf-test
+      - mem-test
+      - visual-a11y-tests:
+          name: visual-a11y-test-nightly
+          suite: full
+      - e2e-couchdb
+    triggers:
+      - schedule:
+          cron: "0 0 * * *"
+          filters:
+            branches:
+              only:
+                - master
diff --git a/.cspell.json b/.cspell.json
new file mode 100644
index 00000000000..9afde5db7cd
--- /dev/null
+++ b/.cspell.json
@@ -0,0 +1,513 @@
+{
+  "version": "0.2",
+  "language": "en,en-us",
+  "words": [
+    "gress",
+    "doctoc",
+    "minmax",
+    "openmct",
+    "datasources",
+    "recieved",
+    "evalute",
+    "Sinewave",
+    "deregistration",
+    "unregisters",
+    "configutation",
+    "configuation",
+    "codecov",
+    "carryforward",
+    "Chacon",
+    "Straub",
+    "OWASP",
+    "Testathon",
+    "exploratorily",
+    "Testathons",
+    "testathon",
+    "npmjs",
+    "publishj",
+    "treeitem",
+    "timespan",
+    "Timespan",
+    "spinbutton",
+    "popout",
+    "textbox",
+    "tablist",
+    "Telem",
+    "codecoverage",
+    "browserless",
+    "networkidle",
+    "nums",
+    "mgmt",
+    "faultname",
+    "gantt",
+    "sharded",
+    "perfromance",
+    "MMOC",
+    "codegen",
+    "Unfortuantely",
+    "viewports",
+    "updatesnapshots",
+    "excercised",
+    "Circel",
+    "browsercontexts",
+    "miminum",
+    "testcase",
+    "testsuite",
+    "domcontentloaded",
+    "Tracefile",
+    "lcov",
+    "linecov",
+    "Browserless",
+    "webserver",
+    "yamcs",
+    "quickstart",
+    "subobject",
+    "autosize",
+    "Horz",
+    "vehicula",
+    "Praesent",
+    "pharetra",
+    "Duis",
+    "eget",
+    "arcu",
+    "elementum",
+    "mauris",
+    "Donec",
+    "nunc",
+    "quis",
+    "Proin",
+    "elit",
+    "Nunc",
+    "Aenean",
+    "mollis",
+    "hendrerit",
+    "Vestibulum",
+    "placerat",
+    "velit",
+    "augue",
+    "Quisque",
+    "mattis",
+    "lectus",
+    "rutrum",
+    "Fusce",
+    "tincidunt",
+    "nibh",
+    "blandit",
+    "urna",
+    "Nullam",
+    "congue",
+    "enim",
+    "Morbi",
+    "bibendum",
+    "Vivamus",
+    "imperdiet",
+    "Pellentesque",
+    "cursus",
+    "Aliquam",
+    "orci",
+    "Suspendisse",
+    "amet",
+    "justo",
+    "Etiam",
+    "vestibulum",
+    "ullamcorper",
+    "Cras",
+    "aliquet",
+    "Mauris",
+    "Nulla",
+    "scelerisque",
+    "viverra",
+    "metus",
+    "condimentum",
+    "varius",
+    "nulla",
+    "sapien",
+    "Curabitur",
+    "tristique",
+    "Nonsectetur",
+    "convallis",
+    "accumsan",
+    "lacus",
+    "posuere",
+    "turpis",
+    "egestas",
+    "feugiat",
+    "tortor",
+    "faucibus",
+    "euismod",
+    "pratices",
+    "pathing",
+    "pases",
+    "testcases",
+    "Noneditable",
+    "listitem",
+    "Gantt",
+    "timelist",
+    "timestrip",
+    "networkevents",
+    "fetchpriority",
+    "persistable",
+    "Persistable",
+    "persistability",
+    "Persistability",
+    "testdata",
+    "Testdata",
+    "metdata",
+    "timeconductor",
+    "contenteditable",
+    "autoscale",
+    "Autoscale",
+    "prepan",
+    "sinewave",
+    "cyanish",
+    "driv",
+    "searchbox",
+    "datetime",
+    "timeframe",
+    "recents",
+    "recentobjects",
+    "gsearch",
+    "Disp",
+    "Cloc",
+    "noselect",
+    "requestfailed",
+    "viewlarge",
+    "Imageurl",
+    "thumbstrip",
+    "checkmark",
+    "Unshelve",
+    "autosized",
+    "chacskaylo",
+    "numberfield",
+    "OPENMCT",
+    "Autoflow",
+    "Timelist",
+    "faultmanagement",
+    "GEOSPATIAL",
+    "geospatial",
+    "plotspatial",
+    "annnotation",
+    "keystrings",
+    "undelete",
+    "sometag",
+    "containee",
+    "composability",
+    "mutables",
+    "Mutables",
+    "composee",
+    "handleoutsideclick",
+    "Datetime",
+    "Perc",
+    "autodismiss",
+    "filetree",
+    "deeptailor",
+    "keystring",
+    "reindex",
+    "unlisten",
+    "symbolsfont",
+    "ellipsize",
+    "dismissable",
+    "TIMESYSTEM",
+    "Metadatas",
+    "stalenes",
+    "receieves",
+    "unsub",
+    "callbacktwo",
+    "unsubscribetwo",
+    "telem",
+    "Telemetery",
+    "unemitted",
+    "granually",
+    "timesystem",
+    "metadatas",
+    "iteratees",
+    "metadatum",
+    "printj",
+    "sprintf",
+    "unlisteners",
+    "amts",
+    "reregistered",
+    "hudsonfoo",
+    "onclone",
+    "autoflow",
+    "xdescribe",
+    "mockmct",
+    "Autoflowed",
+    "plotly",
+    "relayout",
+    "Plotly",
+    "Yaxis",
+    "showlegend",
+    "textposition",
+    "xaxis",
+    "automargin",
+    "fixedrange",
+    "yaxis",
+    "Axistype",
+    "showline",
+    "bglayer",
+    "autorange",
+    "hoverinfo",
+    "dotful",
+    "Dotful",
+    "cartesianlayer",
+    "scatterlayer",
+    "textfont",
+    "ampm",
+    "cdef",
+    "horz",
+    "STYLEABLE",
+    "styleable",
+    "afff",
+    "shdw",
+    "braintree",
+    "vals",
+    "Subobject",
+    "Shdw",
+    "Movebar",
+    "inspectable",
+    "Stringformatter",
+    "sclk",
+    "Objectpath",
+    "Keystring",
+    "duplicatable",
+    "composees",
+    "Composees",
+    "Composee",
+    "callthrough",
+    "objectpath",
+    "createable",
+    "noneditable",
+    "Classname",
+    "classname",
+    "selectedfaults",
+    "accum",
+    "newpersisted",
+    "Metadatum",
+    "MCWS",
+    "YAMCS",
+    "frameid",
+    "containerid",
+    "mmgis",
+    "PERC",
+    "curval",
+    "viewbox",
+    "mutablegauge",
+    "Flatbush",
+    "flatbush",
+    "Indicies",
+    "Marqueed",
+    "NSEW",
+    "nsew",
+    "vrover",
+    "gimbled",
+    "Pannable",
+    "unsynced",
+    "Unsynced",
+    "pannable",
+    "autoscroll",
+    "TIMESTRIP",
+    "TWENTYFOUR",
+    "FULLSIZE",
+    "intialize",
+    "Timestrip",
+    "spyon",
+    "Unlistener",
+    "multipane",
+    "DATESTRING",
+    "akhenry",
+    "Niklas",
+    "Hertzen",
+    "Kash",
+    "Nouroozi",
+    "Bostock",
+    "BOSTOCK",
+    "Arnout",
+    "Kazemier",
+    "Karolis",
+    "Narkevicius",
+    "Ashkenas",
+    "Madhavan",
+    "Iskren",
+    "Ivov",
+    "Chernev",
+    "Borshchov",
+    "painterro",
+    "sheetjs",
+    "Yuxi",
+    "ACITON",
+    "localstorage",
+    "Linkto",
+    "Painterro",
+    "Editability",
+    "filteredsnapshots",
+    "Fromimage",
+    "muliple",
+    "notebookstorage",
+    "Andpage",
+    "pixelize",
+    "Quickstart",
+    "indexhtml",
+    "youradminpassword",
+    "chttpd",
+    "sourcefiles",
+    "USERPASS",
+    "XPUT",
+    "adipiscing",
+    "eiusmod",
+    "tempor",
+    "incididunt",
+    "labore",
+    "dolore",
+    "aliqua",
+    "perspiciatis",
+    "iteree",
+    "submodels",
+    "symlog",
+    "Plottable",
+    "antisymlog",
+    "docstrings",
+    "webglcontextlost",
+    "gridlines",
+    "Xaxis",
+    "Crosshairs",
+    "telemetrylimit",
+    "xscale",
+    "yscale",
+    "untracks",
+    "swatched",
+    "NULLVALUE",
+    "unobserver",
+    "unsubscriber",
+    "drap",
+    "Averager",
+    "averager",
+    "movecolumnfromindex",
+    "callout",
+    "Konqueror",
+    "unmark",
+    "hitarea",
+    "Hitarea",
+    "Unmark",
+    "controlbar",
+    "reactified",
+    "perc",
+    "DHMS",
+    "timespans",
+    "timeframes",
+    "Timesystems",
+    "Hilite",
+    "datetimes",
+    "momentified",
+    "ucontents",
+    "TIMELIST",
+    "Timeframe",
+    "Guirk",
+    "resizeable",
+    "iframing",
+    "Btns",
+    "Ctrls",
+    "Chakra",
+    "Petch",
+    "propor",
+    "phoneandtablet",
+    "desktopandtablet",
+    "Imgs",
+    "UNICODES",
+    "datatable",
+    "csvg",
+    "cpath",
+    "cellipse",
+    "xlink",
+    "cstyle",
+    "bfill",
+    "ctitle",
+    "eicon",
+    "interactability",
+    "AFFORDANCES",
+    "affordance",
+    "scrollcontainer",
+    "Icomoon",
+    "icomoon",
+    "configurability",
+    "btns",
+    "AUTOFLOW",
+    "DATETIME",
+    "infobubble",
+    "thumbsbubble",
+    "codehilite",
+    "vscroll",
+    "bgsize",
+    "togglebutton",
+    "Hacskaylo",
+    "noie",
+    "fullscreen",
+    "horiz",
+    "menubutton",
+    "SNAPSHOTTING",
+    "snapshotting",
+    "PAINTERRO",
+    "ptro",
+    "PLOTLY",
+    "gridlayer",
+    "xtick",
+    "ytick",
+    "subobjects",
+    "Ucontents",
+    "Userand",
+    "Userbefore",
+    "brdr",
+    "pushs",
+    "ALPH",
+    "Recents",
+    "Qbert",
+    "Infobubble",
+    "haslink",
+    "VPID",
+    "vpid",
+    "updatedtest",
+    "KHTML",
+    "Chromezilla",
+    "Safarifox",
+    "deregistering",
+    "hundredtized",
+    "dhms",
+    "unthrottled",
+    "Codecov",
+    "dont",
+    "mediump",
+    "sinonjs",
+    "generatedata",
+    "grandsearch",
+    "websockets",
+    "swgs",
+    "memlab",
+    "devmode",
+    "blockquote",
+    "blockquotes",
+    "Blockquote",
+    "Blockquotes",
+    "oger",
+    "lcovonly",
+    "gcov",
+    "WCAG",
+    "stackedplot",
+    "Andale",
+    "unnormalized",
+    "checksnapshots",
+    "specced",
+    "composables",
+    "countup"
+  ],
+  "dictionaries": ["npm", "softwareTerms", "node", "html", "css", "bash", "en_US", "en-gb", "misc"],
+  "ignorePaths": [
+    "package.json",
+    "dist/**",
+    "package-lock.json",
+    "node_modules",
+    "coverage",
+    "*.log",
+    "html-test-results",
+    "test-results"
+  ]
+}
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
new file mode 100644
index 00000000000..e29c5879252
--- /dev/null
+++ b/.eslintrc.cjs
@@ -0,0 +1,181 @@
+const LEGACY_FILES = ['example/**'];
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+    jasmine: true,
+    amd: true
+  },
+  globals: {
+    _: 'readonly'
+  },
+  plugins: ['prettier', 'unicorn', 'simple-import-sort'],
+  extends: [
+    'eslint:recommended',
+    'plugin:compat/recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:you-dont-need-lodash-underscore/compatible',
+    'plugin:prettier/recommended',
+    'plugin:no-unsanitized/DOM'
+  ],
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@babel/eslint-parser',
+    requireConfigFile: false,
+    allowImportExportEverywhere: true,
+    ecmaVersion: 2015,
+    ecmaFeatures: {
+      impliedStrict: true
+    }
+  },
+  rules: {
+    'simple-import-sort/imports': 'warn',
+    'simple-import-sort/exports': 'warn',
+    'vue/no-deprecated-dollar-listeners-api': 'warn',
+    'vue/no-deprecated-events-api': 'warn',
+    'vue/no-v-for-template-key': 'off',
+    'vue/no-v-for-template-key-on-child': 'error',
+    'prettier/prettier': 'error',
+    'you-dont-need-lodash-underscore/omit': 'off',
+    'you-dont-need-lodash-underscore/throttle': 'off',
+    'you-dont-need-lodash-underscore/flatten': 'off',
+    'you-dont-need-lodash-underscore/get': 'off',
+    'no-bitwise': 'error',
+    curly: 'error',
+    eqeqeq: 'error',
+    'guard-for-in': 'error',
+    'no-extend-native': 'error',
+    'no-inner-declarations': 'off',
+    'no-use-before-define': ['error', 'nofunc'],
+    'no-caller': 'error',
+    'no-irregular-whitespace': 'error',
+    'no-new': 'error',
+    'no-shadow': 'error',
+    'no-undef': 'error',
+    'no-unused-vars': [
+      'error',
+      {
+        vars: 'all',
+        args: 'none'
+      }
+    ],
+    'no-console': 'off',
+    'new-cap': [
+      'error',
+      {
+        capIsNew: false,
+        properties: false
+      }
+    ],
+    'dot-notation': 'error',
+
+    // https://eslint.org/docs/rules/no-case-declarations
+    'no-case-declarations': 'error',
+    // https://eslint.org/docs/rules/max-classes-per-file
+    'max-classes-per-file': ['error', 1],
+    // https://eslint.org/docs/rules/no-eq-null
+    'no-eq-null': 'error',
+    // https://eslint.org/docs/rules/no-eval
+    'no-eval': 'error',
+    // https://eslint.org/docs/rules/no-implicit-globals
+    'no-implicit-globals': 'error',
+    // https://eslint.org/docs/rules/no-implied-eval
+    'no-implied-eval': 'error',
+    // https://eslint.org/docs/rules/no-lone-blocks
+    'no-lone-blocks': 'error',
+    // https://eslint.org/docs/rules/no-loop-func
+    'no-loop-func': 'error',
+    // https://eslint.org/docs/rules/no-new-func
+    'no-new-func': 'error',
+    // https://eslint.org/docs/rules/no-new-wrappers
+    'no-new-wrappers': 'error',
+    // https://eslint.org/docs/rules/no-octal-escape
+    'no-octal-escape': 'error',
+    // https://eslint.org/docs/rules/no-proto
+    'no-proto': 'error',
+    // https://eslint.org/docs/rules/no-return-await
+    'no-return-await': 'error',
+    // https://eslint.org/docs/rules/no-script-url
+    'no-script-url': 'error',
+    // https://eslint.org/docs/rules/no-self-compare
+    'no-self-compare': 'error',
+    // https://eslint.org/docs/rules/no-sequences
+    'no-sequences': 'error',
+    // https://eslint.org/docs/rules/no-unmodified-loop-condition
+    'no-unmodified-loop-condition': 'error',
+    // https://eslint.org/docs/rules/no-useless-call
+    'no-useless-call': 'error',
+    // https://eslint.org/docs/rules/no-nested-ternary
+    'no-nested-ternary': 'error',
+    // https://eslint.org/docs/rules/no-useless-computed-key
+    'no-useless-computed-key': 'error',
+    // https://eslint.org/docs/rules/no-var
+    'no-var': 'error',
+    // https://eslint.org/docs/rules/one-var
+    'one-var': ['error', 'never'],
+    // https://eslint.org/docs/rules/default-case-last
+    'default-case-last': 'error',
+    // https://eslint.org/docs/rules/default-param-last
+    'default-param-last': 'error',
+    // https://eslint.org/docs/rules/grouped-accessor-pairs
+    'grouped-accessor-pairs': 'error',
+    // https://eslint.org/docs/rules/no-constructor-return
+    'no-constructor-return': 'error',
+    // https://eslint.org/docs/rules/array-callback-return
+    'array-callback-return': 'error',
+    // https://eslint.org/docs/rules/no-invalid-this
+    'no-invalid-this': 'error', // Believe this one actually surfaces some bugs
+    // https://eslint.org/docs/rules/func-style
+    'func-style': ['error', 'declaration'],
+    // https://eslint.org/docs/rules/no-unused-expressions
+    'no-unused-expressions': 'error',
+    // https://eslint.org/docs/rules/no-useless-concat
+    'no-useless-concat': 'error',
+    // https://eslint.org/docs/rules/radix
+    radix: 'error',
+    // https://eslint.org/docs/rules/require-await
+    'require-await': 'error',
+    // https://eslint.org/docs/rules/no-alert
+    'no-alert': 'error',
+    // https://eslint.org/docs/rules/no-useless-constructor
+    'no-useless-constructor': 'error',
+    // https://eslint.org/docs/rules/no-duplicate-imports
+    'no-duplicate-imports': 'error',
+
+    // https://eslint.org/docs/rules/no-implicit-coercion
+    'no-implicit-coercion': 'error',
+    //https://eslint.org/docs/rules/no-unneeded-ternary
+    'no-unneeded-ternary': 'error',
+    'unicorn/filename-case': [
+      'error',
+      {
+        cases: {
+          pascalCase: true
+        },
+        ignore: ['^.*\\.js$']
+      }
+    ],
+    'vue/first-attribute-linebreak': 'error',
+    'vue/multiline-html-element-content-newline': 'off',
+    'vue/singleline-html-element-content-newline': 'off',
+    'vue/no-mutating-props': 'off' // TODO: Remove this rule and fix resulting errors
+  },
+  overrides: [
+    {
+      files: LEGACY_FILES,
+      rules: {
+        'no-unused-vars': [
+          'error',
+          {
+            vars: 'all',
+            args: 'none',
+            varsIgnorePattern: 'controller'
+          }
+        ],
+        'no-nested-ternary': 'off',
+        'no-var': 'off',
+        'one-var': 'off'
+      }
+    }
+  ]
+};
diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index 03a5b1fefe0..00000000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,270 +0,0 @@
-const LEGACY_FILES = ["platform/**", "example/**"];
-module.exports = {
-    "env": {
-        "browser": true,
-        "es6": true,
-        "jasmine": true,
-        "amd": true
-    },
-    "globals": {
-        "_": "readonly"
-    },
-    "extends": [
-        "eslint:recommended",
-        "plugin:vue/recommended",
-        "plugin:you-dont-need-lodash-underscore/compatible"
-    ],
-    "parser": "vue-eslint-parser",
-    "parserOptions": {
-        "parser": "babel-eslint",
-        "allowImportExportEverywhere": true,
-        "ecmaVersion": 2015,
-        "ecmaFeatures": {
-            "impliedStrict": true
-        }
-    },
-    "rules": {
-        "you-dont-need-lodash-underscore/omit": "off",
-        "you-dont-need-lodash-underscore/throttle": "off",
-        "you-dont-need-lodash-underscore/flatten": "off",
-        "no-bitwise": "error",
-        "curly": "error",
-        "eqeqeq": "error",
-        "guard-for-in": "error",
-        "no-extend-native": "error",
-        "no-inner-declarations": "off",
-        "no-use-before-define": ["error", "nofunc"],
-        "no-caller": "error",
-        "no-sequences": "error",
-        "no-irregular-whitespace": "error",
-        "no-new": "error",
-        "no-shadow": "error",
-        "no-undef": "error",
-        "no-unused-vars": [
-            "error",
-            {
-                "vars": "all",
-                "args": "none"
-            }
-        ],
-        "no-console": "off",
-        "no-trailing-spaces": "error",
-        "space-before-function-paren": [
-            "error",
-            {
-                "anonymous": "always",
-                "asyncArrow": "always",
-                "named": "never"
-            }
-        ],
-        "array-bracket-spacing": "error",
-        "space-in-parens": "error",
-        "space-before-blocks": "error",
-        "comma-dangle": "error",
-        "eol-last": "error",
-        "new-cap": [
-            "error",
-            {
-                "capIsNew": false,
-                "properties": false
-            }
-        ],
-        "dot-notation": "error",
-        "indent": ["error", 4],
-
-        // https://eslint.org/docs/rules/no-case-declarations
-        "no-case-declarations": "error",
-        // https://eslint.org/docs/rules/max-classes-per-file
-        "max-classes-per-file": ["error", 1],
-        // https://eslint.org/docs/rules/no-eq-null
-        "no-eq-null": "error",
-        // https://eslint.org/docs/rules/no-eval
-        "no-eval": "error",
-        // https://eslint.org/docs/rules/no-floating-decimal
-        "no-floating-decimal": "error",
-        // https://eslint.org/docs/rules/no-implicit-globals
-        "no-implicit-globals": "error",
-        // https://eslint.org/docs/rules/no-implied-eval
-        "no-implied-eval": "error",
-        // https://eslint.org/docs/rules/no-lone-blocks
-        "no-lone-blocks": "error",
-        // https://eslint.org/docs/rules/no-loop-func
-        "no-loop-func": "error",
-        // https://eslint.org/docs/rules/no-new-func
-        "no-new-func": "error",
-        // https://eslint.org/docs/rules/no-new-wrappers
-        "no-new-wrappers": "error",
-        // https://eslint.org/docs/rules/no-octal-escape
-        "no-octal-escape": "error",
-        // https://eslint.org/docs/rules/no-proto
-        "no-proto": "error",
-        // https://eslint.org/docs/rules/no-return-await
-        "no-return-await": "error",
-        // https://eslint.org/docs/rules/no-script-url
-        "no-script-url": "error",
-        // https://eslint.org/docs/rules/no-self-compare
-        "no-self-compare": "error",
-        // https://eslint.org/docs/rules/no-sequences
-        "no-sequences": "error",
-        // https://eslint.org/docs/rules/no-unmodified-loop-condition
-        "no-unmodified-loop-condition": "error",
-        // https://eslint.org/docs/rules/no-useless-call
-        "no-useless-call": "error",
-        // https://eslint.org/docs/rules/wrap-iife
-        "wrap-iife": "error",
-        // https://eslint.org/docs/rules/no-nested-ternary
-        "no-nested-ternary": "error",
-        // https://eslint.org/docs/rules/switch-colon-spacing
-        "switch-colon-spacing": "error",
-        // https://eslint.org/docs/rules/no-useless-computed-key
-        "no-useless-computed-key": "error",
-        // https://eslint.org/docs/rules/rest-spread-spacing
-        "rest-spread-spacing": ["error"],
-        // https://eslint.org/docs/rules/no-var
-        "no-var": "error",
-        // https://eslint.org/docs/rules/one-var
-        "one-var": ["error", "never"],
-        // https://eslint.org/docs/rules/default-case-last
-        "default-case-last": "error",
-        // https://eslint.org/docs/rules/default-param-last
-        "default-param-last": "error",
-        // https://eslint.org/docs/rules/grouped-accessor-pairs
-        "grouped-accessor-pairs": "error",
-        // https://eslint.org/docs/rules/no-constructor-return
-        "no-constructor-return": "error",
-        // https://eslint.org/docs/rules/array-callback-return
-        "array-callback-return": "error",
-        // https://eslint.org/docs/rules/no-invalid-this
-        "no-invalid-this": "error", // Believe this one actually surfaces some bugs
-        // https://eslint.org/docs/rules/func-style
-        "func-style": ["error", "declaration"],
-        // https://eslint.org/docs/rules/no-unused-expressions
-        "no-unused-expressions": "error",
-        // https://eslint.org/docs/rules/no-useless-concat
-        "no-useless-concat": "error",
-        // https://eslint.org/docs/rules/radix
-        "radix": "error",
-        // https://eslint.org/docs/rules/require-await
-        "require-await": "error",
-        // https://eslint.org/docs/rules/no-alert
-        "no-alert": "error",
-        // https://eslint.org/docs/rules/no-useless-constructor
-        "no-useless-constructor": "error",
-        // https://eslint.org/docs/rules/no-duplicate-imports
-        "no-duplicate-imports": "error",
-
-        // https://eslint.org/docs/rules/no-implicit-coercion
-        "no-implicit-coercion": "error",
-        //https://eslint.org/docs/rules/no-unneeded-ternary
-        "no-unneeded-ternary": "error",
-        // https://eslint.org/docs/rules/semi
-        "semi": ["error", "always"],
-        // https://eslint.org/docs/rules/no-multi-spaces
-        "no-multi-spaces": "error",
-        // https://eslint.org/docs/rules/key-spacing
-        "key-spacing": ["error", {
-            "afterColon": true
-        }],
-        // https://eslint.org/docs/rules/keyword-spacing
-        "keyword-spacing": ["error", {
-            "before": true,
-            "after": true
-        }],
-        // https://eslint.org/docs/rules/comma-spacing
-        // Also requires one line code fix
-        "comma-spacing": ["error", {
-            "after": true
-        }],
-        //https://eslint.org/docs/rules/no-whitespace-before-property
-        "no-whitespace-before-property": "error",
-        // https://eslint.org/docs/rules/object-curly-newline
-        "object-curly-newline": ["error", {
-            "consistent": true,
-            "multiline": true
-        }],
-        // https://eslint.org/docs/rules/object-property-newline
-        "object-property-newline": "error",
-        // https://eslint.org/docs/rules/brace-style
-        "brace-style": "error",
-        // https://eslint.org/docs/rules/no-multiple-empty-lines
-        "no-multiple-empty-lines": ["error", {"max": 1}],
-        // https://eslint.org/docs/rules/operator-linebreak
-        "operator-linebreak": ["error", "before", {"overrides": {"=": "after"}}],
-        // https://eslint.org/docs/rules/padding-line-between-statements
-        "padding-line-between-statements": ["error", {
-            "blankLine": "always",
-            "prev": "multiline-block-like",
-            "next": "*"
-        }, {
-            "blankLine": "always",
-            "prev": "*",
-            "next": "return"
-        }],
-        // https://eslint.org/docs/rules/space-infix-ops
-        "space-infix-ops": "error",
-        // https://eslint.org/docs/rules/space-unary-ops
-        "space-unary-ops": ["error", {
-            "words": true,
-            "nonwords": false
-        }],
-        // https://eslint.org/docs/rules/arrow-spacing
-        "arrow-spacing": "error",
-        // https://eslint.org/docs/rules/semi-spacing
-        "semi-spacing": ["error", {
-            "before": false,
-            "after": true
-        }],
-
-        "vue/html-indent": [
-            "error",
-            4,
-            {
-                "attribute": 1,
-                "baseIndent": 0,
-                "closeBracket": 0,
-                "alignAttributesVertically": true,
-                "ignores": []
-            }
-        ],
-        "vue/html-self-closing": ["error",
-            {
-                "html": {
-                    "void": "never",
-                    "normal": "never",
-                    "component": "always"
-                },
-                "svg": "always",
-                "math": "always"
-            }
-        ],
-        "vue/max-attributes-per-line": ["error", {
-            "singleline": 1,
-            "multiline": {
-                "max": 1,
-                "allowFirstLine": true
-            }
-        }],
-        "vue/multiline-html-element-content-newline": "off",
-        "vue/singleline-html-element-content-newline": "off",
-        "vue/no-mutating-props": "off"
-
-    },
-    "overrides": [
-        {
-            "files": LEGACY_FILES,
-            "rules": {
-                "no-unused-vars": [
-                    "warn",
-                    {
-                        "vars": "all",
-                        "args": "none",
-                        "varsIgnorePattern": "controller"
-                    }
-                ],
-                "no-nested-ternary": "off",
-                "no-var": "off",
-                "one-var": "off"
-            }
-        }
-    ]
-};
diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
new file mode 100644
index 00000000000..839df6c0f94
--- /dev/null
+++ b/.git-blame-ignore-revs
@@ -0,0 +1,16 @@
+# git-blame ignored revisions
+# To configure, run:
+#   git config blame.ignoreRevsFile .git-blame-ignore-revs
+# Requires Git > 2.23
+# See https://git-scm.com/docs/git-blame#Documentation/git-blame.txt---ignore-revs-fileltfilegt
+
+# vue-eslint update 2019
+14a0f84c1bcd56886d7c9e4e6afa8f7d292734e5
+# eslint changes 2022
+d80b6923541704ab925abf0047cbbc58735c27e2
+# Copyright year update 2022
+4a9744e916d24122a81092f6b7950054048ba860
+# Copyright year update 2023
+8040b275fcf2ba71b42cd72d4daa64bb25c19c2d
+# Apply `prettier` formatting
+caa7bc6faebc204f67aedae3e35fb0d0d3ce27a7
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index 1bb9855519e..2fd6b809176 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -17,15 +17,6 @@ assignees: ''
 #### Expected vs Current Behavior
 <!--- Tell us what should have happened -->
 
-#### Impact Check List
-<!--- Please select from the following options -->
-
-- [ ] Data loss or misrepresented data?
-- [ ] Regression? Did this used to work or has it always been broken?
-- [ ] Is there a workaround available?
-- [ ] Does this impact a critical component?
-- [ ] Is this just a visual bug?
-
 #### Steps to Reproduce
 <!--- Provide a link to a live example, or an unambiguous set of steps to -->
 <!--- reproduce this bug. Include code to reproduce, if relevant -->
@@ -35,10 +26,22 @@ assignees: ''
 4.
 
 #### Environment
+<!--- If encountered on local machine, execute the following:
+<!--- npx envinfo --system --browsers --npmPackages --binaries --markdown -->
 * Open MCT Version: <!--- date of build, version, or SHA -->
 * Deployment Type: <!--- npm dev? VIPER Dev? openmct-yamcs? -->
 * OS:
 * Browser:
 
+#### Impact Check List
+<!--- Please select from the following options -->
+- [ ] Data loss or misrepresented data?
+- [ ] Regression? Did this used to work or has it always been broken?
+- [ ] Is there a workaround available?
+- [ ] Does this impact a critical component?
+- [ ] Is this just a visual bug with no functional impact?
+- [ ] Does this block the execution of e2e tests?
+- [ ] Does this have an impact on Performance?
+
 #### Additional Information
 <!--- Include any screenshots, gifs, or logs which will expedite triage -->
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
index 8113ed2ebcc..433f68345d3 100644
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -2,4 +2,4 @@ blank_issues_enabled: true
 contact_links:
   - name: Discussions
     url: https://github.com/nasa/openmct/discussions
-    about: Got a question?
+    about: Have a question about the project?
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
deleted file mode 100644
index 4a8ee014b19..00000000000
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ /dev/null
@@ -1,23 +0,0 @@
-<!--- This is for filing enhancements or features. If you have a general -->
-<!--- question, please visit https://github.com/nasa/openmct/discussions -->
-
----
-name: Feature Request
-about: Suggest an idea for this project
-
----
-
-<!--
-Thank you for suggesting an idea to make Open MCT better.
-
-Please fill in as much of the template below as you're able.
--->
-
-**Is your feature request related to a problem? Please describe.**
-<!-- Please describe the problem you are trying to solve. -->
-
-**Describe the solution you'd like**
-<!--- Please describe the desired behavior. -->
-
-**Describe alternatives you've considered**
-<!--- Please describe alternative solutions or features you have considered. -->
diff --git a/.github/ISSUE_TEMPLATE/maintenance-type.md b/.github/ISSUE_TEMPLATE/maintenance-type.md
new file mode 100644
index 00000000000..3f15ca292ea
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/maintenance-type.md
@@ -0,0 +1,11 @@
+---
+name: Maintenance
+about: Add, update or remove documentation, tests, or dependencies.
+title: ''
+labels: type:maintenance
+assignees: ''
+
+---
+
+#### Summary
+<!--- Generally describe the purpose of the change. -->
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 3dc93e2b3f9..34ab10e6a93 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,12 +1,29 @@
+<!--- Note: Please open the PR in draft form until you are ready for active review. -->
+Closes <!--- Insert Issue Number(s) this PR addresses. Start by typing # will open a dropdown of recent issues. Note: this does not work on PRs which target release branches -->
+
+### Describe your changes:
+<!--- Describe your changes and add any comments about your approach either here or inline if code comments aren't added -->
+
 ### All Submissions:
 
 * [ ] Have you followed the guidelines in our [Contributing document](https://github.com/nasa/openmct/blob/master/CONTRIBUTING.md)?
 * [ ] Have you checked to ensure there aren't other open [Pull Requests](https://github.com/nasa/openmct/pulls) for the same update/change?
+* [ ] Is this a [notable change](../docs/src/process/release.md) that will require a special callout in the release notes? For example, will this break compatibility with existing APIs or projects that consume these plugins?
 
 ### Author Checklist
 
 * [ ] Changes address original issue?
-* [ ] Unit tests included and/or updated with changes?
-* [ ] Command line build passes?
+* [ ] Tests included and/or updated with changes?
 * [ ] Has this been smoke tested?
-* [ ] Testing instructions included in associated issue?
+* [ ] Have you associated this PR with a `type:` label? Note: this is not necessarily the same as the original issue.
+* [ ] Have you associated a milestone with this PR? Note: leave blank if unsure.
+* [ ] Is this a breaking change to be called out in the release notes?
+* [ ] Testing instructions included in associated issue OR is this a dependency/testcase change?
+
+### Reviewer Checklist
+
+* [ ] Changes appear to address issue?
+* [ ] Reviewer has tested changes by following the provided instructions?
+* [ ] Changes appear not to be breaking changes?
+* [ ] Appropriate automated tests included?
+* [ ] Code style and in-line documentation are appropriate?
diff --git a/.github/codeql/codeql-config.yml b/.github/codeql/codeql-config.yml
new file mode 100644
index 00000000000..98f45f4da86
--- /dev/null
+++ b/.github/codeql/codeql-config.yml
@@ -0,0 +1 @@
+name: 'Custom CodeQL config'
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
new file mode 100644
index 00000000000..d963da512ce
--- /dev/null
+++ b/.github/dependabot.yml
@@ -0,0 +1,42 @@
+version: 2
+updates:
+  - package-ecosystem: 'npm'
+    directory: '/'
+    schedule:
+      interval: 'weekly'
+    open-pull-requests-limit: 10
+    rebase-strategy: 'disabled'
+    labels:
+      - 'pr:daveit'
+      - 'pr:e2e'
+      - 'type:maintenance'
+      - 'dependencies'
+      - 'pr:platform'
+    ignore:
+      #We have to source the playwright container which is not detected by Dependabot
+      - dependency-name: '@playwright/test'
+      - dependency-name: 'playwright-core'
+      #Lots of noise in these type patch releases.
+      - dependency-name: '@babel/eslint-parser'
+        update-types: ['version-update:semver-patch']
+      - dependency-name: 'eslint-plugin-vue'
+        update-types: ['version-update:semver-patch']
+      - dependency-name: 'babel-loader'
+        update-types: ['version-update:semver-patch']
+      - dependency-name: 'sinon'
+        update-types: ['version-update:semver-patch']
+      - dependency-name: 'moment-timezone'
+        update-types: ['version-update:semver-patch']
+      - dependency-name: '@types/lodash'
+        update-types: ['version-update:semver-patch']
+      - dependency-name: 'marked'
+        update-types: ['version-update:semver-patch']
+  - package-ecosystem: 'github-actions'
+    directory: '/'
+    schedule:
+      interval: 'daily'
+    rebase-strategy: 'disabled'
+    labels:
+      - 'pr:daveit'
+      - 'type:maintenance'
+      - 'dependencies'
diff --git a/.github/release.yml b/.github/release.yml
new file mode 100644
index 00000000000..cbf00175036
--- /dev/null
+++ b/.github/release.yml
@@ -0,0 +1,26 @@
+changelog:
+  categories:
+    - title: 💥 Notable Changes
+      labels:
+        - notable_change
+    - title: 🏕 Features
+      labels:
+        - type:feature
+    - title: 🎉 Enhancements
+      labels:
+        - type:enhancement
+      exclude:
+        labels:
+          - type:feature
+    - title: 🔧 Maintenance
+      labels:
+        - type:maintenance
+    - title: ⚡ Performance
+      labels:
+        - performance
+    - title: 👒 Dependencies
+      labels:
+        - dependencies
+    - title: 🐛 Bug Fixes
+      labels:
+        - "*"
diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
new file mode 100644
index 00000000000..d3ca94594a9
--- /dev/null
+++ b/.github/workflows/codeql-analysis.yml
@@ -0,0 +1,44 @@
+name: 'CodeQL'
+
+on:
+  push:
+    branches: [master, 'release/*']
+  pull_request:
+    branches: [master, 'release/*']
+    paths-ignore:
+      - '**/*Spec.js'
+      - '**/*.md'
+      - '**/*.txt'
+      - '**/*.yml'
+      - '**/*.yaml'
+      - '**/*.spec.js'
+      - '**/*.config.js'
+  schedule:
+    - cron: '28 21 * * 3'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v3
+        with:
+          config-file: ./.github/codeql/codeql-config.yml
+          languages: javascript
+          queries: security-and-quality
+
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v3
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v3
diff --git a/.github/workflows/e2e-couchdb.yml b/.github/workflows/e2e-couchdb.yml
new file mode 100644
index 00000000000..5333ee82f14
--- /dev/null
+++ b/.github/workflows/e2e-couchdb.yml
@@ -0,0 +1,88 @@
+name: 'e2e-couchdb'
+on:
+  push:
+    branches: master
+  workflow_dispatch:
+  pull_request:
+    types:
+      - labeled
+      - opened
+  schedule:
+    - cron: '0 0 * * *'
+jobs:
+  e2e-couchdb:
+    if: contains(github.event.pull_request.labels.*.name, 'pr:e2e:couchdb') || github.event_name == 'schedule' || github.event_name == 'workflow_dispatch' || github.event.action == 'opened'
+    runs-on: ubuntu-latest
+    timeout-minutes: 60
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/hydrogen'
+
+      - name: Cache NPM dependencies
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - run: npm install --cache ~/.npm --no-audit --progress=false
+
+      - name: Login to DockerHub
+        uses: docker/login-action@v3
+        continue-on-error: true
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - run: npx playwright@1.39.0 install
+
+      - name: Start CouchDB Docker Container and Init with Setup Scripts
+        run: |
+          export $(cat src/plugins/persistence/couch/.env.ci | xargs)
+          docker-compose -f src/plugins/persistence/couch/couchdb-compose.yaml up --detach
+          sleep 3
+          bash src/plugins/persistence/couch/setup-couchdb.sh
+          bash src/plugins/persistence/couch/replace-localstorage-with-couchdb-indexhtml.sh
+
+      - name: Run CouchDB Tests
+        env:
+          COMMIT_INFO_SHA: ${{github.event.pull_request.head.sha }}
+        run: npm run test:e2e:couchdb
+
+      - name: Publish Results to Codecov.io
+        env:
+          SUPER_SECRET: ${{ secrets.CODECOV_TOKEN }}
+        run: npm run cov:e2e:full:publish
+
+      - name: Archive test results
+        if: success() || failure()
+        uses: actions/upload-artifact@v3
+        with:
+          path: test-results
+
+      - name: Archive html test results
+        if: success() || failure()
+        uses: actions/upload-artifact@v3
+        with:
+          path: html-test-results
+
+      - name: Remove pr:e2e:couchdb label (if present)
+        if: always()
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const { owner, repo, number } = context.issue;
+            const labelToRemove = 'pr:e2e:couchdb';
+            try {
+              await github.rest.issues.removeLabel({
+                owner,
+                repo,
+                issue_number: number,
+                name: labelToRemove
+              });
+            } catch (error) {
+              core.warning(`Failed to remove ' + labelToRemove + ' label: ${error.message}`);
+            }
diff --git a/.github/workflows/e2e-flakefinder.yml b/.github/workflows/e2e-flakefinder.yml
new file mode 100644
index 00000000000..de9095fb63c
--- /dev/null
+++ b/.github/workflows/e2e-flakefinder.yml
@@ -0,0 +1,61 @@
+name: 'pr:e2e:flakefinder'
+
+on:
+#  push:
+#    branches: master
+  workflow_dispatch:
+#  pull_request:
+#    types:
+#      - labeled
+#      - opened
+#  schedule:
+#    - cron: '0 0 * * *'
+
+jobs:
+  e2e-flakefinder:
+    if: contains(github.event.pull_request.labels.*.name, 'pr:e2e:flakefinder') || github.event_name == 'schedule' || github.event_name == 'workflow_dispatch' || github.event.action == 'opened'
+    runs-on: ubuntu-latest
+    timeout-minutes: 120
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/hydrogen'
+
+      - name: Cache NPM dependencies
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - run: npx playwright@1.39.0 install
+      - run: npm install --cache ~/.npm --no-audit --progress=false
+
+      - name: Run E2E Tests (Repeated 10 Times)
+        run: npm run test:e2e:stable -- --retries=0 --repeat-each=10 --max-failures=50
+
+      - name: Archive test results
+        if: success() || failure()
+        uses: actions/upload-artifact@v3
+        with:
+          path: test-results
+
+      - name: Remove pr:e2e:flakefinder label (if present)
+        if: always()
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const { owner, repo, number } = context.issue;
+            const labelToRemove = 'pr:e2e:flakefinder';
+            try {
+                await github.rest.issues.removeLabel({
+                owner,
+                repo,
+                issue_number: number,
+                name: labelToRemove
+                });
+            } catch (error) {
+                core.warning(`Failed to remove ' + labelToRemove + ' label: ${error.message}`);
+            }
diff --git a/.github/workflows/e2e-perf.yml b/.github/workflows/e2e-perf.yml
new file mode 100644
index 00000000000..2255bde61b4
--- /dev/null
+++ b/.github/workflows/e2e-perf.yml
@@ -0,0 +1,58 @@
+name: 'e2e-perf'
+on:
+  push:
+    branches: master
+  workflow_dispatch:
+  pull_request:
+    types:
+      - labeled
+      - opened
+  schedule:
+    - cron: '0 0 * * *'
+jobs:
+  e2e-full:
+    if: contains(github.event.pull_request.labels.*.name, 'pr:e2e:perf') || github.event_name == 'schedule' || github.event_name == 'workflow_dispatch'
+    runs-on: ubuntu-latest
+    timeout-minutes: 60
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/hydrogen'
+
+      - name: Cache NPM dependencies
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - run: npx playwright@1.39.0 install
+      - run: npm install --cache ~/.npm --no-audit --progress=false
+      - run: npm run test:perf:localhost
+      - run: npm run test:perf:contract
+      - run: npm run test:perf:memory
+      - name: Archive test results
+        if: success() || failure()
+        uses: actions/upload-artifact@v3
+        with:
+          path: test-results
+
+      - name: Remove pr:e2e:perf label (if present)
+        if: always()
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const { owner, repo, number } = context.issue;
+            const labelToRemove = 'pr:e2e:perf';
+            try {
+              await github.rest.issues.removeLabel({
+                owner,
+                repo,
+                issue_number: number,
+                name: labelToRemove
+              });
+            } catch (error) {
+              core.warning(`Failed to remove ' + labelToRemove + ' label: ${error.message}`);
+            }
diff --git a/.github/workflows/e2e-pr.yml b/.github/workflows/e2e-pr.yml
new file mode 100644
index 00000000000..25deadb4f66
--- /dev/null
+++ b/.github/workflows/e2e-pr.yml
@@ -0,0 +1,68 @@
+name: 'e2e-pr'
+on:
+  push:
+    branches: master
+  workflow_dispatch:
+  pull_request:
+    types:
+      - labeled
+      - opened
+  schedule:
+    - cron: '0 0 * * *'
+jobs:
+  e2e-full:
+    if: contains(github.event.pull_request.labels.*.name, 'pr:e2e') || github.event_name == 'schedule' || github.event_name == 'workflow_dispatch'
+    runs-on: ${{ matrix.os }}
+    timeout-minutes: 60
+    strategy:
+      matrix:
+        os:
+          - ubuntu-latest
+          - windows-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/hydrogen'
+
+      - name: Cache NPM dependencies
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - run: npx playwright@1.39.0 install
+      - run: npx playwright install chrome-beta
+      - run: npm install --cache ~/.npm --no-audit --progress=false
+      - run: npm run test:e2e:full -- --max-failures=40
+      - run: npm run cov:e2e:report || true
+      - shell: bash
+        env:
+          SUPER_SECRET: ${{ secrets.CODECOV_TOKEN }}
+        run: |
+          npm run cov:e2e:full:publish
+      - name: Archive test results
+        if: success() || failure()
+        uses: actions/upload-artifact@v3
+        with:
+          path: test-results
+
+      - name: Remove pr:e2e label (if present)
+        if: always()
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const { owner, repo, number } = context.issue;
+            const labelToRemove = 'pr:e2e';
+            try {
+              await github.rest.issues.removeLabel({
+                owner,
+                repo,
+                issue_number: number,
+                name: labelToRemove
+              });
+            } catch (error) {
+              core.warning(`Failed to remove ' + labelToRemove + ' label: ${error.message}`);
+            }
diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml
deleted file mode 100644
index 4a67227c0b5..00000000000
--- a/.github/workflows/lighthouse.yml
+++ /dev/null
@@ -1,20 +0,0 @@
-name: lighthouse
-on:
-  workflow_dispatch:
-    inputs: 
-      version:
-        description: 'Which branch do you want to test?' # Limited to branch for now
-        required: false
-        default: 'master' 
-jobs:
-  lighthouse:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.inputs.version }}
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '14'
-      - run: npm install && npm install -g @lhci/cli #Don't want to include this in our deps
-      - run: lhci autorun
\ No newline at end of file
diff --git a/.github/workflows/npm-prerelease.yml b/.github/workflows/npm-prerelease.yml
new file mode 100644
index 00000000000..df00a0a7a13
--- /dev/null
+++ b/.github/workflows/npm-prerelease.yml
@@ -0,0 +1,37 @@
+# This workflow will run tests using node and then publish a package to npmjs when a prerelease is created
+# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+
+name: npm_prerelease
+
+on:
+  release:
+    types: [prereleased]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/hydrogen
+      - run: npm install
+      - run: |
+          echo "//registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN" >> ~/.npmrc
+          npm whoami
+          npm publish --access=public --tag unstable openmct
+      # - run: npm test
+
+  publish-npm-prerelease:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/hydrogen
+          registry-url: https://registry.npmjs.org/
+      - run: npm install
+      - run: npm publish --access=public --tag unstable
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/pr-platform.yml b/.github/workflows/pr-platform.yml
new file mode 100644
index 00000000000..dfd14859e73
--- /dev/null
+++ b/.github/workflows/pr-platform.yml
@@ -0,0 +1,70 @@
+name: 'pr-platform'
+on:
+  push:
+    branches: master
+  workflow_dispatch:
+  pull_request:
+    types:
+      - labeled
+      - opened
+  schedule:
+    - cron: '0 0 * * *'
+jobs:
+  pr-platform:
+    if: contains(github.event.pull_request.labels.*.name, 'pr:platform') || github.event_name == 'schedule' || github.event_name == 'workflow_dispatch'
+    runs-on: ${{ matrix.os }}
+    timeout-minutes: 60
+    strategy:
+      fail-fast: false
+      matrix:
+        os:
+          - ubuntu-latest
+          - macos-latest
+          - windows-latest
+        node_version:
+          - lts/iron
+          - lts/hydrogen
+        architecture:
+          - x64
+
+    name: Node ${{ matrix.node_version }} - ${{ matrix.architecture }} on ${{ matrix.os }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node_version }}
+          architecture: ${{ matrix.architecture }}
+
+      - name: Cache NPM dependencies
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-${{ matrix.node_version }}-${{ hashFiles('**/package.json') }}
+          restore-keys: |
+            ${{ runner.os }}-${{ matrix.node_version }}-
+
+      - run: npm install --cache ~/.npm --no-audit --progress=false
+
+      - run: npm test
+
+      - run: npm run lint -- --quiet
+
+      - name: Remove pr:platform label (if present)
+        if: always()
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const { owner, repo, number } = context.issue;
+            const labelToRemove = 'pr:platform';
+            try {
+              await github.rest.issues.removeLabel({
+                owner,
+                repo,
+                issue_number: number,
+                name: labelToRemove
+              });
+            } catch (error) {
+              core.warning(`Failed to remove ' + labelToRemove + ' label: ${error.message}`);
+            }
diff --git a/.github/workflows/prcop-config.json b/.github/workflows/prcop-config.json
new file mode 100644
index 00000000000..a85deb7564a
--- /dev/null
+++ b/.github/workflows/prcop-config.json
@@ -0,0 +1,19 @@
+{
+  "linters": [
+    {
+      "name": "descriptionRegexp",
+      "config": {
+        "regexp": "[x|X]] Testing instructions",
+        "errorMessage": ":police_officer: PR Description does not confirm that associated issue(s) contain Testing instructions"
+      }
+    },
+    {
+      "name": "descriptionMinWords",
+      "config": {
+        "minWordsCount": 160,
+        "errorMessage": ":police_officer: Please, be sure to use existing PR template."
+      }
+    }
+  ],
+  "disableWord": "pr:daveit"
+}
diff --git a/.github/workflows/prcop.yml b/.github/workflows/prcop.yml
new file mode 100644
index 00000000000..e933f7319ee
--- /dev/null
+++ b/.github/workflows/prcop.yml
@@ -0,0 +1,38 @@
+name: PRCop
+
+on:
+  pull_request:
+    types:
+      - labeled
+      - unlabeled
+      - opened
+      - reopened
+      - synchronize
+      - edited
+  pull_request_review_comment:
+    types:
+      - created
+env:
+  LABELS: ${{ join( github.event.pull_request.labels.*.name, ' ' ) }}
+jobs:
+  prcop:
+    runs-on: ubuntu-latest
+    name: Template Check
+    steps:
+      - name: Linting Pull Request
+        uses: makaroni4/prcop@v1.0.35
+        with:
+          config-file: '.github/workflows/prcop-config.json'
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+  check-type-label:
+    name: Check type Label
+    runs-on: ubuntu-latest
+    steps:
+      - if: contains( env.LABELS, 'type:' ) == false
+        run: exit 1
+  check-milestone:
+    name: Check Milestone
+    runs-on: ubuntu-latest
+    steps:
+      - if: github.event.pull_request.milestone == null && contains( env.LABELS, 'no milestone' ) == false
+        run: exit 1
diff --git a/.gitignore b/.gitignore
index 76bb23dc5c4..e3185bee0b4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,7 +15,8 @@
 *.idea
 *.iml
 
-# External dependencies
+# VSCode
+.vscode/settings.json
 
 # Build output
 target
@@ -24,23 +25,28 @@ dist
 # Mac OS X Finder
 .DS_Store
 
-# Closed source libraries
-closed-lib
-
 # Node, Bower dependencies
 node_modules
 bower_components
 
-# Protractor logs
-protractor/logs
-
 # npm-debug log
 npm-debug.log
 
 # karma reports
 report.*.json
 
-# Lighthouse reports
-.lighthouseci
+# e2e test artifacts
+test-results
+html-test-results
+
+# couchdb scripting artifacts
+src/plugins/persistence/couch/.env.local
+index.html.bak
+
+# codecov artifacts
+.nyc_output
+coverage
+codecov
 
+# :(
 package-lock.json
diff --git a/.npmignore b/.npmignore
index 99b47432aac..1bdde6a5f59 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,35 +1,30 @@
-*.scssc
-*.zip
-*.gzip
-*.tgz
-*.DS_Store
-
-*.sass-cache
-*COMPILE.css
-
-# Intellij project configuration files
-*.idea
-*.iml
-
-# External dependencies
-
-# Build output
-target
-
-# Mac OS X Finder
-.DS_Store
-
-# Closed source libraries
-closed-lib
-
-# Node, Bower dependencies
-node_modules
-bower_components
-
-Procfile
-
-# Protractor logs
-protractor/logs
-
-# npm-debug log
-npm-debug.log
+# Ignore everything first (will not ignore special files like LICENSE.md,
+# README.md, and package.json)...
+/**/*
+
+# ...but include these folders...
+!/dist/**/*
+!/src/**/*
+
+# We might be able to remove this if it is not imported by any project directly.
+# https://github.com/nasa/openmct/issues/4992
+!/example/**/*
+
+# ...except for these files in the above folders.
+/src/**/*Spec.js
+/src/**/test/
+# TODO move test utils into test/ folders
+/src/utils/testing.js
+
+# Also include these special top-level files.
+!copyright-notice.js
+!copyright-notice.html
+!index.html
+!openmct.js
+!SECURITY.md
+
+# Add e2e tests to npm package
+!/e2e/**/*
+
+# ... except our test-data folder files.
+/e2e/test-data/*.json
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 00000000000..3b9d59d669d
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1,7 @@
+loglevel=warn
+
+#Prevent folks from ignoring an important error when building from source
+engine-strict=true
+
+# Dont include lockfile
+package-lock=false
\ No newline at end of file
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 00000000000..1a2f5bd2045
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+lts/*
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000000..2c26753b090
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,27 @@
+# Docs
+*.md
+
+# Build output
+target
+dist
+
+# Mac OS X Finder
+.DS_Store
+
+# Node dependencies
+node_modules
+
+# npm-debug log
+npm-debug.log
+
+# karma reports
+report.*.json
+
+# e2e test artifacts
+test-results
+html-test-results
+
+# codecov artifacts
+.nyc_output
+coverage
+codecov
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000000..479112ec1d6
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "trailingComma": "none",
+  "singleQuote": true,
+  "printWidth": 100,
+  "endOfLine": "auto"
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 00000000000..24ebdbe6fb2
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,14 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+  // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+  // List of extensions which should be recommended for users of this workspace.
+  "recommendations": [
+    "Vue.volar",
+    "Vue.vscode-typescript-vue-plugin",
+    "dbaeumer.vscode-eslint",
+    "rvest.vs-code-prettier-eslint"
+  ],
+  // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+  "unwantedRecommendations": ["octref.vetur"]
+}
diff --git a/.webpack/webpack.common.js b/.webpack/webpack.common.js
new file mode 100644
index 00000000000..1dc3af7ba6a
--- /dev/null
+++ b/.webpack/webpack.common.js
@@ -0,0 +1,185 @@
+/*
+This is the OpenMCT common webpack file. It is imported by the other three webpack configurations:
+ - webpack.prod.js - the production configuration for OpenMCT (default)
+ - webpack.dev.js - the development configuration for OpenMCT
+ - webpack.coverage.js - imports webpack.dev.js and adds code coverage
+There are separate npm scripts to use these configurations, though simply running `npm install`
+will use the default production configuration.
+*/
+import { execSync } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import { VueLoaderPlugin } from 'vue-loader';
+import webpack from 'webpack';
+let gitRevision = 'error-retrieving-revision';
+let gitBranch = 'error-retrieving-branch';
+
+const packageDefinition = JSON.parse(fs.readFileSync(new URL('../package.json', import.meta.url)));
+
+try {
+  gitRevision = execSync('git rev-parse HEAD').toString().trim();
+  gitBranch = execSync('git rev-parse --abbrev-ref HEAD').toString().trim();
+} catch (err) {
+  console.warn(err);
+}
+
+const projectRootDir = fileURLToPath(new URL('../', import.meta.url));
+
+/** @type {import('webpack').Configuration} */
+const config = {
+  context: projectRootDir,
+  devServer: {
+    client: {
+      progress: true,
+      overlay: {
+        // Disable overlay for runtime errors.
+        // See: https://github.com/webpack/webpack-dev-server/issues/4771
+        runtimeErrors: false
+      }
+    }
+  },
+  entry: {
+    openmct: './openmct.js',
+    generatorWorker: './example/generator/generatorWorker.js',
+    couchDBChangesFeed: './src/plugins/persistence/couch/CouchChangesFeed.js',
+    inMemorySearchWorker: './src/api/objects/InMemorySearchWorker.js',
+    espressoTheme: './src/plugins/themes/espresso-theme.scss',
+    snowTheme: './src/plugins/themes/snow-theme.scss'
+  },
+  output: {
+    globalObject: 'this',
+    filename: '[name].js',
+    path: path.resolve(projectRootDir, 'dist'),
+    library: 'openmct',
+    libraryExport: 'default',
+    libraryTarget: 'umd',
+    publicPath: '',
+    hashFunction: 'xxhash64',
+    clean: true
+  },
+  resolve: {
+    alias: {
+      '@': path.join(projectRootDir, 'src'),
+      legacyRegistry: path.join(projectRootDir, 'src/legacyRegistry'),
+      csv: 'comma-separated-values',
+      EventEmitter: 'eventemitter3',
+      bourbon: 'bourbon.scss',
+      'plotly-basic': 'plotly.js-basic-dist-min',
+      'plotly-gl2d': 'plotly.js-gl2d-dist-min',
+      printj: 'printj/printj.mjs',
+      styles: path.join(projectRootDir, 'src/styles'),
+      MCT: path.join(projectRootDir, 'src/MCT'),
+      testUtils: path.join(projectRootDir, 'src/utils/testUtils.js'),
+      objectUtils: path.join(projectRootDir, 'src/api/objects/object-utils.js'),
+      utils: path.join(projectRootDir, 'src/utils'),
+      vue: 'vue/dist/vue.esm-bundler'
+    }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      __OPENMCT_VERSION__: `'${packageDefinition.version}'`,
+      __OPENMCT_BUILD_DATE__: `'${new Date()}'`,
+      __OPENMCT_REVISION__: `'${gitRevision}'`,
+      __OPENMCT_BUILD_BRANCH__: `'${gitBranch}'`,
+      __VUE_OPTIONS_API__: true, // enable/disable Options API support, default: true
+      __VUE_PROD_DEVTOOLS__: false // enable/disable devtools support in production, default: false
+    }),
+    new VueLoaderPlugin(),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: 'src/images/favicons',
+          to: 'favicons'
+        },
+        {
+          from: './index.html',
+          transform: function (content) {
+            return content.toString().replace(/dist\//g, '');
+          }
+        },
+        {
+          from: 'src/plugins/imagery/layers',
+          to: 'imagery'
+        }
+      ]
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[name].css'
+    }),
+    // Add a UTF-8 BOM to CSS output to avoid random mojibake
+    new webpack.BannerPlugin({
+      test: /.*Theme\.css$/,
+      raw: true,
+      banner: '@charset "UTF-8";'
+    })
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.(sc|sa|c)ss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader'
+          },
+          {
+            loader: 'resolve-url-loader'
+          },
+          {
+            loader: 'sass-loader',
+            options: { sourceMap: true }
+          }
+        ]
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          compilerOptions: {
+            hoistStatic: false,
+            whitespace: 'preserve'
+          }
+        }
+      },
+      {
+        test: /\.html$/,
+        type: 'asset/source'
+      },
+      {
+        test: /\.(jpg|jpeg|png|svg)$/,
+        type: 'asset/resource',
+        generator: {
+          filename: 'images/[name][ext]'
+        }
+      },
+      {
+        test: /\.ico$/,
+        type: 'asset/resource',
+        generator: {
+          filename: 'icons/[name][ext]'
+        }
+      },
+      {
+        test: /\.(woff|woff2?|eot|ttf)$/,
+        type: 'asset/resource',
+        generator: {
+          filename: 'fonts/[name][ext]'
+        }
+      }
+    ]
+  },
+  stats: 'errors-warnings',
+  performance: {
+    // We should eventually consider chunking to decrease
+    // these values
+    maxEntrypointSize: 27000000,
+    maxAssetSize: 27000000
+  }
+};
+
+export default config;
diff --git a/.webpack/webpack.coverage.js b/.webpack/webpack.coverage.js
new file mode 100644
index 00000000000..14d11fe7bc1
--- /dev/null
+++ b/.webpack/webpack.coverage.js
@@ -0,0 +1,35 @@
+/*
+This file extends the webpack.dev.js config to add babel istanbul coverage.
+OpenMCT Continuous Integration servers use this configuration to add code coverage
+information to pull requests.
+*/
+
+import config from './webpack.dev.js';
+// eslint-disable-next-line no-undef
+const CI = process.env.CI === 'true';
+
+config.devtool = CI ? false : undefined;
+
+config.devServer.hot = false;
+
+config.module.rules.push({
+  test: /\.js$/,
+  exclude: /(Spec\.js$)|(node_modules)/,
+  use: {
+    loader: 'babel-loader',
+    options: {
+      retainLines: true,
+      // eslint-disable-next-line no-undef
+      plugins: [
+        [
+          'babel-plugin-istanbul',
+          {
+            extension: ['.js', '.vue']
+          }
+        ]
+      ]
+    }
+  }
+});
+
+export default config;
diff --git a/.webpack/webpack.dev.js b/.webpack/webpack.dev.js
new file mode 100644
index 00000000000..3d18812e97d
--- /dev/null
+++ b/.webpack/webpack.dev.js
@@ -0,0 +1,48 @@
+/*
+This configuration should be used for development purposes. It contains full source map, a
+devServer (which be invoked using by `npm start`), and a non-minified Vue.js distribution.
+If OpenMCT is to be used for a production server, use webpack.prod.js instead.
+*/
+import path from 'path';
+import webpack from 'webpack';
+import { merge } from 'webpack-merge';
+import { fileURLToPath } from 'node:url';
+
+import common from './webpack.common.js';
+
+export default merge(common, {
+  mode: 'development',
+  watchOptions: {
+    // Since we use require.context, webpack is watching the entire directory.
+    // We need to exclude any files we don't want webpack to watch.
+    // See: https://webpack.js.org/configuration/watch/#watchoptions-exclude
+    ignored: [
+      '**/{node_modules,dist,docs,e2e}', // All files in node_modules, dist, docs, e2e,
+      '**/{*.yml,Procfile,webpack*.js,babel*.js,package*.json,tsconfig.json}', // Config files
+      '**/*.{sh,md,png,ttf,woff,svg}', // Non source files
+      '**/.*' // dotfiles and dotfolders
+    ]
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      __OPENMCT_ROOT_RELATIVE__: '"dist/"'
+    })
+  ],
+  devtool: 'eval-source-map',
+  devServer: {
+    devMiddleware: {
+      writeToDisk: (filePathString) => {
+        const filePath = path.parse(filePathString);
+        const shouldWrite = !filePath.base.includes('hot-update');
+
+        return shouldWrite;
+      }
+    },
+    watchFiles: ['**/*.css'],
+    static: {
+      directory: fileURLToPath(new URL('../dist', import.meta.url)),
+      publicPath: '/dist',
+      watch: false
+    }
+  }
+});
diff --git a/.webpack/webpack.prod.js b/.webpack/webpack.prod.js
new file mode 100644
index 00000000000..9224625a128
--- /dev/null
+++ b/.webpack/webpack.prod.js
@@ -0,0 +1,19 @@
+/*
+This configuration should be used for production installs.
+It is the default webpack configuration.
+*/
+
+import webpack from 'webpack';
+import { merge } from 'webpack-merge';
+
+import common from './webpack.common.js';
+
+export default merge(common, {
+  mode: 'production',
+  plugins: [
+    new webpack.DefinePlugin({
+      __OPENMCT_ROOT_RELATIVE__: '""'
+    })
+  ],
+  devtool: 'source-map'
+});
diff --git a/API.md b/API.md
index 229425b94e1..ded6724a6df 100644
--- a/API.md
+++ b/API.md
@@ -1,11 +1,14 @@
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-**Table of Contents** 
+**Table of Contents**
 
-- [Building Applications With Open MCT](#building-applications-with-open-mct)
+- [Developing Applications With Open MCT](#developing-applications-with-open-mct)
   - [Scope and purpose of this document](#scope-and-purpose-of-this-document)
   - [Building From Source](#building-from-source)
   - [Starting an Open MCT application](#starting-an-open-mct-application)
+  - [Types](#types)
+    - [Using Types](#using-types)
+    - [Limitations](#limitations)
   - [Plugins](#plugins)
     - [Defining and Installing a New Plugin](#defining-and-installing-a-new-plugin)
   - [Domain Objects and Identifiers](#domain-objects-and-identifiers)
@@ -23,11 +26,11 @@
           - [Value Hints](#value-hints)
         - [The Time Conductor and Telemetry](#the-time-conductor-and-telemetry)
       - [Telemetry Providers](#telemetry-providers)
-      - [Telemetry Requests and Responses.](#telemetry-requests-and-responses)
+      - [Telemetry Requests and Responses](#telemetry-requests-and-responses)
       - [Request Strategies **draft**](#request-strategies-draft)
         - [`latest` request strategy](#latest-request-strategy)
         - [`minmax` request strategy](#minmax-request-strategy)
-      - [Telemetry Formats **draft**](#telemetry-formats-draft)
+      - [Telemetry Formats](#telemetry-formats)
         - [Registering Formats](#registering-formats)
       - [Telemetry Data](#telemetry-data)
         - [Telemetry Datums](#telemetry-datums)
@@ -41,8 +44,10 @@
     - [Clocks](#clocks)
       - [Defining and registering clocks](#defining-and-registering-clocks)
       - [Getting and setting active clock](#getting-and-setting-active-clock)
-      - [Stopping an active clock](#stopping-an-active-clock)
+      - [⚠️ \[DEPRECATED\] Stopping an active clock](#️-deprecated-stopping-an-active-clock)
       - [Clock Offsets](#clock-offsets)
+    - [Time Modes](#time-modes)
+      - [Time Mode Helper Methods](#time-mode-helper-methods)
     - [Time Events](#time-events)
       - [List of Time Events](#list-of-time-events)
     - [The Time Conductor](#the-time-conductor)
@@ -52,26 +57,27 @@
     - [The URL Status Indicator](#the-url-status-indicator)
     - [Creating a Simple Indicator](#creating-a-simple-indicator)
     - [Custom Indicators](#custom-indicators)
+  - [Priority API](#priority-api)
+    - [Priority Types](#priority-types)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
-# Building Applications With Open MCT
+# Developing Applications With Open MCT
 
 ## Scope and purpose of this document
 
-This document is intended to serve as a reference for developing an application 
-based on Open MCT. It will provide details of the API functions necessary to 
-extend the Open MCT platform meet common use cases such as integrating with a telemetry source. 
+This document is intended to serve as a reference for developing an application
+based on Open MCT. It will provide details of the API functions necessary to
+extend the Open MCT platform meet common use cases such as integrating with a telemetry source.
 
-The best place to start is with the [Open MCT Tutorials](https://github.com/nasa/openmct-tutorial). 
-These will walk you through the process of getting up and running with Open 
+The best place to start is with the [Open MCT Tutorials](https://github.com/nasa/openmct-tutorial).
+These will walk you through the process of getting up and running with Open
 MCT, as well as addressing some common developer use cases.
 
-## Building From Source 
+## Building From Source
 
-The latest version of Open MCT is available from [our GitHub repository](https://github.com/nasa/openmct). 
-If you have `git`, and `node` installed, you can build Open MCT with the
-commands 
+The latest version of Open MCT is available from [our GitHub repository](https://github.com/nasa/openmct).
+If you have `git`, and `node` installed, you can build Open MCT with the commands
 
 ```bash
 git clone https://github.com/nasa/openmct.git
@@ -79,28 +85,31 @@ cd openmct
 npm install
 ```
 
-These commands will fetch the Open MCT source from our GitHub repository, and 
-build a minified version that can be included in your application. The output 
-of the build process is placed in a `dist` folder under the openmct source 
-directory, which can be copied out to another location as needed. The contents 
-of this folder will include a minified javascript file named `openmct.js` as 
-well as assets such as html, css, and images necessary for the UI. 
+These commands will fetch the Open MCT source from our GitHub repository, and
+build a minified version that can be included in your application. The output
+of the build process is placed in a `dist` folder under the openmct source
+directory, which can be copied out to another location as needed. The contents
+of this folder will include a minified javascript file named `openmct.js` as
+well as assets such as html, css, and images necessary for the UI.
 
 ## Starting an Open MCT application
 
-To start a minimally functional Open MCT application, it is necessary to 
-include the Open MCT distributable, enable some basic plugins, and bootstrap 
-the application. The tutorials walk through the process of getting Open MCT up 
-and running from scratch, but provided below is a minimal HTML template that 
-includes Open MCT, installs some basic plugins, and bootstraps the application. 
-It assumes that Open MCT is installed under an `openmct` subdirectory, as 
-described in [Building From Source](#building-from-source). 
+> [!WARNING]
+> Open MCT provides a development server via `webpack-dev-server` (`npm start`). **This should be used for development purposes only and should never be deployed to a production environment**.
 
-This approach includes openmct using a simple script tag, resulting in a global 
-variable named `openmct`. This `openmct` object is used subsequently to make 
-API calls. 
+To start a minimally functional Open MCT application, it is necessary to
+include the Open MCT distributable, enable some basic plugins, and bootstrap
+the application. The tutorials walk through the process of getting Open MCT up
+and running from scratch, but provided below is a minimal HTML template that
+includes Open MCT, installs some basic plugins, and bootstraps the application.
+It assumes that Open MCT is installed under an `openmct` subdirectory, as
+described in [Building From Source](#building-from-source).
 
-Open MCT is packaged as a UMD (Universal Module Definition) module, so common 
+This approach includes openmct using a simple script tag, resulting in a global
+variable named `openmct`. This `openmct` object is used subsequently to make
+API calls.
+
+Open MCT is packaged as a UMD (Universal Module Definition) module, so common
 script loaders are also supported.
 
 ```html
@@ -121,17 +130,59 @@ script loaders are also supported.
 </html>
 ```
 
-The Open MCT library included above requires certain assets such as html 
-templates, images, and css. If you installed Open MCT from GitHub as described 
+The Open MCT library included above requires certain assets such as html
+templates, images, and css. If you installed Open MCT from GitHub as described
 in the section on [Building from Source](#building-from-source) then these
-assets will have been downloaded along with the Open MCT javascript library. 
+assets will have been downloaded along with the Open MCT javascript library.
 
-There are some plugins bundled with the application that provide UI, 
-persistence, and other default configuration which are necessary to be able to 
-do anything with the application initially. Any of these plugins can, in 
-principle, be replaced with a custom plugin. The included plugins are 
+There are some plugins bundled with the application that provide UI,
+persistence, and other default configuration which are necessary to be able to
+do anything with the application initially. Any of these plugins can, in
+principle, be replaced with a custom plugin. The included plugins are
 documented in the [Included Plugins](#included-plugins) section.  
 
+## Types
+
+The Open MCT library includes its own TypeScript declaration files which can be
+used to provide code hints and typechecking in your own Open MCT application.
+
+Open MCT's type declarations are generated via `tsc` from JSDoc-style comment
+blocks. For more information on this, [check out TypeScript's documentation](https://www.typescriptlang.org/docs/handbook/declaration-files/dts-from-js.html).
+
+### Using Types
+
+In order to use Open MCT's provided types in your own application, create a
+`jsconfig.js` at the root of your project with this minimal configuration:
+
+```json
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+      "target": "es6",
+      "checkJs": true,
+      "moduleResolution": "node",
+      "paths": {
+        "openmct": ["node_modules/openmct/dist/openmct.d.ts"]
+      }
+  }
+}
+```
+
+Then, simply import and use `openmct` in your application:
+
+```js
+import openmct from "openmct";
+```
+
+### Limitations
+
+The effort to add types for Open MCT's public API is ongoing, and the provided
+type declarations may be incomplete.
+
+If you would like to contribute types to Open MCT, please check out
+[TypeScript's documentation](https://www.typescriptlang.org/docs/handbook/declaration-files/dts-from-js.html) on generating type declarations from JSDoc-style comment blocks.
+Then read through our [contributing guide](https://github.com/nasa/openmct/blob/f7cf3f72c2efd46da7ce5719c5e52c8806d166f0/CONTRIBUTING.md) and open a PR!
+
 ## Plugins
 
 ### Defining and Installing a New Plugin
@@ -144,10 +195,10 @@ openmct.install(function install(openmctAPI) {
 ```
 
 New plugins are installed in Open MCT by calling `openmct.install`, and
-providing a plugin installation function. This function will be invoked on 
-application startup with one parameter - the openmct API object. A common 
-approach used in the Open MCT codebase is to define a plugin as a function that 
-returns this installation function. This allows configuration to be specified 
+providing a plugin installation function. This function will be invoked on
+application startup with one parameter - the openmct API object. A common
+approach used in the Open MCT codebase is to define a plugin as a function that
+returns this installation function. This allows configuration to be specified
 when the plugin is included.
 
 eg.
@@ -160,16 +211,16 @@ This approach can be seen in all of the [plugins provided with Open MCT](https:/
 
 ## Domain Objects and Identifiers
 
-_Domain Objects_ are the basic entities that represent domain knowledge in Open 
-MCT.  The temperature sensor on a solar panel, an overlay plot comparing the 
-results of all temperature sensors, the command dictionary for a spacecraft, 
-the individual commands in that dictionary, the "My Items" folder: All of these 
+_Domain Objects_ are the basic entities that represent domain knowledge in Open
+MCT.  The temperature sensor on a solar panel, an overlay plot comparing the
+results of all temperature sensors, the command dictionary for a spacecraft,
+the individual commands in that dictionary, the "My Items" folder: All of these
 things are domain objects.
 
 A _Domain Object_ is simply a javascript object with some standard attributes.  
-An example of a _Domain Object_ is the "My Items" object which is a folder in 
-which a user can persist any objects that they create. The My Items object 
-looks like this: 
+An example of a _Domain Object_ is the "My Items" object which is a folder in
+which a user can persist any objects that they create. The My Items object
+looks like this:
 
 ```javascript
 {
@@ -188,23 +239,24 @@ looks like this:
 
 The main attributes to note are the `identifier`, and `type` attributes.
 
-* `identifier`: A composite key that provides a universally unique identifier 
+- `identifier`: A composite key that provides a universally unique identifier
   for this object. The `namespace` and `key` are used to identify the object.
-  The `key` must be unique within the namespace. 
-* `type`: All objects in Open MCT have a type. Types allow you to form an 
-  ontology of knowledge and provide an abstraction for grouping, visualizing, 
-  and interpreting data. Details on how to define a new object type are 
-  provided below. 
+  The `key` must be unique within the namespace.
+- `type`: All objects in Open MCT have a type. Types allow you to form an
+  ontology of knowledge and provide an abstraction for grouping, visualizing,
+  and interpreting data. Details on how to define a new object type are
+  provided below.
 
-Open MCT uses a number of builtin types. Typically you are going to want to 
+Open MCT uses a number of builtin types. Typically you are going to want to
 define your own when extending Open MCT.
 
 ### Domain Object Types
 
-Custom types may be registered via the `addType` function on the Open MCT Type 
+Custom types may be registered via the `addType` function on the Open MCT Type
 registry.
 
 eg.
+
 ```javascript
 openmct.types.addType('example.my-type', {
     name: "My Type",
@@ -214,57 +266,68 @@ openmct.types.addType('example.my-type', {
 ```
 
 The `addType` function accepts two arguments:
-* A `string` key identifying the type. This key is used when specifying a type
+
+- A `string` key identifying the type. This key is used when specifying a type
 for an object.  We recommend prefixing your types with a namespace to avoid
 conflicts with other plugins.
-* An object type specification. An object type definition supports the following 
-attributes      
-    * `name`: a `string` naming this object type
-    * `description`: a `string` specifying a longer-form description of this type
-    * `initialize`: a `function` which initializes the model for new domain objects 
-    of this type. This can be used for setting default values on an object when 
+- An object type specification. An object type definition supports the following
+attributes
+  - `name`: a `string` naming this object type
+  - `description`: a `string` specifying a longer-form description of this type
+  - `initialize`: a `function` which initializes the model for new domain objects
+    of this type. This can be used for setting default values on an object when
     it is instantiated.
-    * `creatable`: A `boolean` indicating whether users should be allowed to create 
-    this type (default: `false`). This will determine whether the type appears 
+  - `creatable`: A `boolean` indicating whether users should be allowed to create
+    this type (default: `false`). This will determine whether the type appears
     in the `Create` menu.
-    * `cssClass`: A `string` specifying a CSS class to apply to each representation 
-    of this object. This is used for specifying an icon to appear next to each 
+  - `cssClass`: A `string` specifying a CSS class to apply to each representation
+    of this object. This is used for specifying an icon to appear next to each
     object of this type.
 
-The [Open MCT Tutorials](https://github.com/nasa/openmct-tutorial) provide a 
-step-by-step examples of writing code for Open MCT that includes a [section on 
+The [Open MCT Tutorials](https://github.com/nasa/openmct-tutorial) provide a
+step-by-step examples of writing code for Open MCT that includes a [section on
 defining a new object type](https://github.com/nasa/openmct-tutorial#step-3---providing-objects).
 
 ## Root Objects
 
-In many cases, you'd like a certain object (or a certain hierarchy of objects) 
-to be accessible from the top level of the application (the tree on the left-hand 
-side of Open MCT.) For example, it is typical to expose a telemetry dictionary 
+In many cases, you'd like a certain object (or a certain hierarchy of objects)
+to be accessible from the top level of the application (the tree on the left-hand
+side of Open MCT.) For example, it is typical to expose a telemetry dictionary
 as a hierarchy of telemetry-providing domain objects in this fashion.
 
 To do so, use the `addRoot` method of the object API.
 
 eg.
+
 ```javascript
 openmct.objects.addRoot({
-        namespace: "example.namespace",
-        key: "my-key"
-    });
+    namespace: "example.namespace",
+    key: "my-key"
+},
+openmct.priority.HIGH);
 ```
 
-The `addRoot` function takes a single [object identifier](#domain-objects-and-identifiers) 
-as an argument. 
+The `addRoot` function takes a two arguments, the first can be an [object identifier](#domain-objects-and-identifiers) for a root level object, or an array of identifiers for root
+level objects, or a function that returns a promise for an identifier or an array of root level objects, the second is a [priority](#priority-api) or numeric value.
+
+When using the `getAll` method of the object API, they will be returned in order of priority.
+
+eg.
+
+```javascript
+openmct.objects.addRoot(identifier, openmct.priority.LOW); // low = -1000, will appear last in composition or tree
+openmct.objects.addRoot(otherIdentifier, openmct.priority.HIGH); // high = 1000, will appear first in composition or tree
+```
 
-Root objects are loaded just like any other objects, i.e. via an object
-provider.
+Root objects are loaded just like any other objects, i.e. via an object provider.
 
 ## Object Providers
 
-An Object Provider is used to build _Domain Objects_, typically retrieved from 
-some source such as a persistence store or telemetry dictionary. In order to 
-integrate telemetry from a new source an object provider will need to be created 
-that can build objects representing telemetry points exposed by the telemetry 
-source. The API call to define a new object provider is fairly straightforward. 
+An Object Provider is used to build _Domain Objects_, typically retrieved from
+some source such as a persistence store or telemetry dictionary. In order to
+integrate telemetry from a new source an object provider will need to be created
+that can build objects representing telemetry points exposed by the telemetry
+source. The API call to define a new object provider is fairly straightforward.
 Here's a very simple example:
 
 ```javascript
@@ -278,14 +341,15 @@ openmct.objects.addProvider('example.namespace', {
     }
 });
 ```
+
 The `addProvider` function takes two arguments:
 
-* `namespace`: A `string` representing the namespace that this object provider 
+- `namespace`: A `string` representing the namespace that this object provider
 will provide objects for.
-* `provider`: An `object` with a single function, `get`. This function accepts an 
-[Identifier](#domain-objects-and-identifiers) for the object to be provided. 
-It is expected that the `get` function will return a 
-[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) 
+- `provider`: An `object` with a single function, `get`. This function accepts an
+[Identifier](#domain-objects-and-identifiers) for the object to be provided.
+It is expected that the `get` function will return a
+[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
 that resolves with the object being requested.
 
 In future, object providers will support other methods to enable other operations with persistence stores, such as creating, updating, and deleting objects.
@@ -300,8 +364,8 @@ may be cases where you want to provide the composition of a certain object
 
 ### Adding Composition Providers
 
-You may want to populate a hierarchy under a custom root-level object based on 
-the contents of a telemetry dictionary. To do this, you can add a new 
+You may want to populate a hierarchy under a custom root-level object based on
+the contents of a telemetry dictionary. To do this, you can add a new
 Composition Provider:
 
 ```javascript
@@ -314,19 +378,20 @@ openmct.composition.addProvider({
     }
 });
 ```
-The `addProvider` function accepts a Composition Provider object as its sole 
+
+The `addProvider` function accepts a Composition Provider object as its sole
 argument. A Composition Provider is a javascript object exposing two functions:
-* `appliesTo`: A `function` that accepts a `domainObject` argument, and returns 
-a `boolean` value indicating whether this composition provider applies to the 
+- `appliesTo`: A `function` that accepts a `domainObject` argument, and returns
+a `boolean` value indicating whether this composition provider applies to the
 given object.
-* `load`: A `function` that accepts a `domainObject` as an argument, and returns
+- `load`: A `function` that accepts a `domainObject` as an argument, and returns
 a `Promise` that resolves with an array of [Identifier](#domain-objects-and-identifiers).
 These identifiers will be used to fetch Domain Objects from an [Object Provider](#object-provider)
 
 ### Default Composition Provider
 
-The default composition provider applies to any domain object with a 
-`composition` property. The value of `composition` should be an array of 
+The default composition provider applies to any domain object with a
+`composition` property. The value of `composition` should be an array of
 identifiers, e.g.:
 
 ```javascript
@@ -360,7 +425,7 @@ Open MCT are stable and documentation is included below.
 
 There are two main tasks for integrating telemetry sources-- describing telemetry objects with relevant metadata, and then providing telemetry data for those objects.  You'll use an [Object Provider](#object-providers) to provide objects with the necessary [Telemetry Metadata](#telemetry-metadata), and then register a [Telemetry Provider](#telemetry-providers) to retrieve telemetry data for those objects.  Alternatively, you can register a telemetry metadata provider to provide the necessary telemetry metadata.
 
-For a step-by-step guide to building a telemetry adapter, please see the 
+For a step-by-step guide to building a telemetry adapter, please see the
 [Open MCT Tutorials](https://github.com/nasa/openmct-tutorial).
 
 #### Telemetry Metadata
@@ -380,7 +445,7 @@ A telemetry object is a domain object with a telemetry property.  To take an exa
             {
                 "key": "value",
                 "name": "Value",
-                "units": "kilograms",
+                "unit": "kilograms",
                 "format": "float",
                 "min": 0,
                 "max": 100,
@@ -415,29 +480,27 @@ attribute      | type   | flags    | notes
 `name`         | string | optional | a human readable label for this field.  If omitted, defaults to `key`.
 `source`       | string | optional | identifies the property of a datum where this value is stored.  If omitted, defaults to `key`.
 `format`       | string | optional | a specific format identifier, mapping to a formatter.  If omitted, uses a default formatter.  For enumerations, use `enum`.  For timestamps, use `utc` if you are using utc dates, otherwise use a key mapping to your custom date format.  
-`units`        | string | optional | the units of this value, e.g. `km`, `seconds`, `parsecs`
+`unit`        | string | optional | the unit of this value, e.g. `km`, `seconds`, `parsecs`
 `min`          | number | optional | the minimum possible value of this measurement.  Will be used by plots, gauges, etc to automatically set a min value.
 `max`          | number | optional | the maximum possible value of this measurement.  Will be used by plots, gauges, etc to automatically set a max value.
 `enumerations` | array  | optional | for objects where `format` is `"enum"`, this array tracks all possible enumerations of the value.  Each entry in this array is an object, with a `value` property that is the numerical value of the enumeration, and a `string` property that is the text value of the enumeration.  ex: `{"value": 0, "string": "OFF"}`.  If you use an enumerations array, `min` and `max` will be set automatically for you.
 
-
 ###### Value Hints
 
 Each telemetry value description has an object defining hints.  Keys in this object represent the hint itself, and the value represents the weight of that hint.  A lower weight means the hint has a higher priority.  For example, multiple values could be hinted for use as the y-axis of a plot (raw, engineering), but the highest priority would be the default choice.  Likewise, a table will use hints to determine the default order of columns.
 
 Known hints:
 
-* `domain`: Values with a `domain` hint will be used for the x-axis of a plot, and tables will render columns for these values first.
-* `range`: Values with a `range` hint will be used as the y-axis on a plot, and tables will render columns for these values after the `domain` values.
-* `image`: Indicates that the value may be interpreted as the URL to an image file, in which case appropriate views will be made available.
-* `imageDownloadName`: Indicates that the value may be interpreted as the name of the image file.
+- `domain`: Values with a `domain` hint will be used for the x-axis of a plot, and tables will render columns for these values first.
+- `range`: Values with a `range` hint will be used as the y-axis on a plot, and tables will render columns for these values after the `domain` values.
+- `image`: Indicates that the value may be interpreted as the URL to an image file, in which case appropriate views will be made available.
+- `imageDownloadName`: Indicates that the value may be interpreted as the name of the image file.
 
-##### The Time Conductor and Telemetry 
+##### The Time Conductor and Telemetry
 
 Open MCT provides a number of ways to pivot through data and link data via time.  The Time Conductor helps synchronize multiple views around the same time.
 
-In order for the time conductor to work, there will always be an active "time system".  All telemetry metadata *must* have a telemetry value with a `key` that matches the `key` of the active time system.  You can use the `source` attribute on the value metadata to remap this to a different field in the telemetry datum-- especially useful if you are working with disparate datasources that have different field mappings.
-
+In order for the time conductor to work, there will always be an active "time system".  All telemetry metadata _must_ have a telemetry value with a `key` that matches the `key` of the active time system.  You can use the `source` attribute on the value metadata to remap this to a different field in the telemetry datum-- especially useful if you are working with disparate datasources that have different field mappings.
 
 #### Telemetry Providers
 
@@ -445,14 +508,14 @@ Telemetry providers are responsible for providing historical and real-time telem
 
 A telemetry provider is a javascript object with up to four methods:
 
-* `supportsSubscribe(domainObject, callback, options)` optional.  Must be implemented to provide realtime telemetry.  Should return `true` if the provider supports subscriptions for the given domain object (and request options).
-* `subscribe(domainObject, callback, options)` required if `supportsSubscribe` is implemented.  Establish a subscription for realtime data for the given domain object.  Should invoke `callback` with a single telemetry datum every time data is received.  Must return an unsubscribe function.  Multiple views can subscribe to the same telemetry object, so it should always return a new unsubscribe function.
-* `supportsRequest(domainObject, options)` optional.  Must be implemented to provide historical telemetry.  Should return `true` if the provider supports historical requests for the given domain object.
-* `request(domainObject, options)` required if `supportsRequest` is implemented.  Must return a promise for an array of telemetry datums that fulfills the request.  The `options` argument will include a `start`, `end`, and `domain` attribute representing the query bounds.  See [Telemetry Requests and Responses](#telemetry-requests-and-responses) for more info on how to respond to requests.
-* `supportsMetadata(domainObject)` optional.  Implement and return `true` for objects that you want to provide dynamic metadata for.
-* `getMetadata(domainObject)` required if `supportsMetadata` is implemented.  Must return a valid telemetry metadata definition that includes at least one valueMetadata definition.
-* `supportsLimits(domainObject)` optional.  Implement and return `true` for domain objects that you want to provide a limit evaluator for.
-* `getLimitEvaluator(domainObject)` required if `supportsLimits` is implemented.  Must return a valid LimitEvaluator for a given domain object.
+- `supportsSubscribe(domainObject, callback, options)` optional.  Must be implemented to provide realtime telemetry.  Should return `true` if the provider supports subscriptions for the given domain object (and request options).
+- `subscribe(domainObject, callback, options)` required if `supportsSubscribe` is implemented.  Establish a subscription for realtime data for the given domain object.  Should invoke `callback` with a single telemetry datum every time data is received.  Must return an unsubscribe function.  Multiple views can subscribe to the same telemetry object, so it should always return a new unsubscribe function.
+- `supportsRequest(domainObject, options)` optional.  Must be implemented to provide historical telemetry.  Should return `true` if the provider supports historical requests for the given domain object.
+- `request(domainObject, options)` required if `supportsRequest` is implemented.  Must return a promise for an array of telemetry datums that fulfills the request.  The `options` argument will include a `start`, `end`, and `domain` attribute representing the query bounds.  See [Telemetry Requests and Responses](#telemetry-requests-and-responses) for more info on how to respond to requests.
+- `supportsMetadata(domainObject)` optional.  Implement and return `true` for objects that you want to provide dynamic metadata for.
+- `getMetadata(domainObject)` required if `supportsMetadata` is implemented.  Must return a valid telemetry metadata definition that includes at least one valueMetadata definition.
+- `supportsLimits(domainObject)` optional.  Implement and return `true` for domain objects that you want to provide a limit evaluator for.
+- `getLimitEvaluator(domainObject)` required if `supportsLimits` is implemented.  Must return a valid LimitEvaluator for a given domain object.
 
 Telemetry providers are registered by calling `openmct.telemetry.addProvider(provider)`, e.g.
 
@@ -465,7 +528,7 @@ openmct.telemetry.addProvider({
 
 Note: it is not required to implement all of the methods on every provider.  Depending on the complexity of your implementation, it may be helpful to instantiate and register your realtime, historical, and metadata providers separately.
 
-#### Telemetry Requests and Responses.
+#### Telemetry Requests and Responses
 
 Telemetry requests support time bounded queries. A call to a _Telemetry Provider_'s `request` function will include an `options` argument. These are simply javascript objects with attributes for the request parameters. An example of a telemetry request object with a start and end time is included below:
 
@@ -481,6 +544,8 @@ In this case, the `domain` is the currently selected time-system, and the start
 
 A telemetry provider's `request` method should return a promise for an array of telemetry datums.  These datums must be sorted by `domain` in ascending order.
 
+The telemetry provider's `request` method will also return an object `signal` with an `aborted` property with a value `true` if the request has been aborted by user navigation. This can be used to trigger actions when a request has been aborted.
+
 #### Request Strategies **draft**
 
 To improve performance views may request a certain strategy for data reduction.  These are intended to improve visualization performance by reducing the amount of data needed to be sent to the client.  These strategies will be indicated by additional parameters in the request options.  You may choose to handle them or ignore them.  
@@ -496,6 +561,7 @@ the number of results it desires.  The `size` parameter is a hint; views
 must not assume the response will have the exact number of results requested.
 
 example:
+
 ```javascript
 {
     start: 1487981997240,
@@ -511,6 +577,7 @@ This strategy says "I want the latest data point in this time range".  A provide
 ##### `minmax` request strategy
 
 example:
+
 ```javascript
 {
     start: 1487981997240,
@@ -523,38 +590,111 @@ example:
 
 MinMax queries are issued by plots, and may be issued by other types as well.  The aim is to reduce the amount of data returned but still faithfully represent the full extent of the data.  In order to do this, the view calculates the maximum data resolution it can display (i.e. the number of horizontal pixels in a plot) and sends that as the `size`.  The response should include at least one minimum and one maximum value per point of resolution.
 
-#### Telemetry Formats **draft**
-
-Telemetry format objects define how to interpret and display telemetry data. 
-They have a simple structure:
-
-* `key`: A `string` that uniquely identifies this formatter.
-* `format`: A `function` that takes a raw telemetry value, and returns a 
-  human-readable `string` representation of that value. It has one required 
-  argument, and three optional arguments that provide context and can be used 
-  for returning scaled representations of a value. An example of this is 
-  representing time values in a scale such as the time conductor scale. There 
-  are multiple ways of representing a point in time, and by providing a minimum
-  scale value, maximum scale value, and a count, it's possible to provide more
-  useful representations of time given the provided limitations.  
-    * `value`: The raw telemetry value in its native type.
-    * `minValue`: An __optional__ argument specifying the minimum displayed 
-      value.
-    * `maxValue`: An __optional__ argument specifying the maximum displayed 
-      value.
-    * `count`: An __optional__ argument specifying the number of displayed 
-      values.
-* `parse`: A `function` that takes a `string` representation of a telemetry 
-  value, and returns the value in its native type. **Note** parse might receive an already-parsed value.  This function should be idempotent.
-* `validate`: A `function` that takes a `string` representation of a telemetry 
-  value, and returns a `boolean` value indicating whether the provided string
-  can be parsed.
+#### Telemetry Formats
+
+Telemetry format objects define how to interpret and display telemetry data.
+They have a simple structure, provided here as a TypeScript interface:
+
+```ts
+interface Formatter {
+    key: string; // A string that uniquely identifies this formatter.
+
+    format: (
+        value: any, // The raw telemetry value in its native type.
+        minValue?: number, // An optional argument specifying the minimum displayed value.
+        maxValue?: number, // An optional argument specifying the maximum displayed value.
+        count?: number // An optional argument specifying the number of displayed values.
+    ) => string; // Returns a human-readable string representation of the provided value.
+
+    parse: (
+        value: string | any // A string representation of a telemetry value or an already-parsed value.
+    ) => any; // Returns the value in its native type. This function should be idempotent.
+
+    validate: (value: string) => boolean; // Takes a string representation of a telemetry value and returns a boolean indicating whether the provided string can be parsed.
+}
+```
+
+##### Built-in Formats
+
+Open MCT on its own defines a handful of built-in formats:
+
+###### **Number Format (default):** 
+
+Applied to data with `format: 'number'`
+```js
+valueMetadata = {
+    format: 'number'
+    // ...
+};
+```
+
+```ts
+interface NumberFormatter extends Formatter {
+    parse: (x: any) => number;
+    format: (x: number) => string;
+    validate: (value: any) => boolean;
+}
+```
+###### **String Format**:
+
+Applied to data with `format: 'string'`
+```js
+valueMetadata = {
+    format: 'string'
+    // ...
+};
+```
+```ts
+interface StringFormatter extends Formatter {
+    parse: (value: any) => string;
+    format: (value: string) => string;
+    validate: (value: any) => boolean;
+}
+```
+
+###### **Enum Format**:
+Applied to data with `format: 'enum'`
+```js
+valueMetadata = {
+    format: 'enum',
+    enumerations: [
+    {
+        value: 1,
+        string: 'APPLE'
+    }, 
+    {
+        value: 2,
+        string: 'PEAR',
+    },
+    {
+        value: 3,
+        string: 'ORANGE'
+    }]
+    // ...
+};
+```
+
+Creates a two-way mapping between enum string and value to be used in the `parse` and `format` methods.
+Ex:
+- `formatter.parse('APPLE') === 1;`
+- `formatter.format(1) === 'APPLE';`
+
+```ts
+interface EnumFormatter extends Formatter {
+    parse: (value: string) => string;
+    format: (value: number) => string;
+    validate: (value: any) => boolean;
+}
+```
 
 ##### Registering Formats
 
+Formats implement the following interface (provided here as TypeScript for simplicity):
+
+
 Formats are registered with the Telemetry API using the `addFormat` function. eg.
 
-``` javascript
+```javascript
 openmct.telemetry.addFormat({
     key: 'number-to-string',
     format: function (number) {
@@ -572,9 +712,9 @@ openmct.telemetry.addFormat({
 #### Telemetry Data
 
 A single telemetry point is considered a Datum, and is represented by a standard
-javascript object.  Realtime subscriptions (obtained via __subscribe__) will 
+javascript object.  Realtime subscriptions (obtained via **subscribe**) will
 invoke the supplied callback once for each telemetry datum recieved.  Telemetry
-requests (obtained via __request__) will return a promise for an array of 
+requests (obtained via **request**) will return a promise for an array of
 telemetry datums.
 
 ##### Telemetry Datums
@@ -595,14 +735,14 @@ section.
 
 #### Limit Evaluators **draft**
 
-Limit evaluators allow a telemetry integrator to define which limits exist for a 
+Limit evaluators allow a telemetry integrator to define which limits exist for a
 telemetry endpoint and how limits should be applied to telemetry from a given domain object.
 
 A limit evaluator can implement the `evalute` method which is used to define how limits
-should be applied to telemetry and the `getLimits` method which is used to specify 
+should be applied to telemetry and the `getLimits` method which is used to specify
 what the limit values are for different limit levels.
 
-Limit levels can be mapped to one of 5 colors for visualization: 
+Limit levels can be mapped to one of 5 colors for visualization:
 `purple`, `red`, `orange`, `yellow` and `cyan`.
 
 For an example of a limit evaluator, take a look at `examples/generator/SinewaveLimitProvider.js`.
@@ -611,30 +751,30 @@ For an example of a limit evaluator, take a look at `examples/generator/Sinewave
 
 The APIs for requesting telemetry from Open MCT -- e.g. for use in custom views -- are currently in draft state and are being revised.  If you'd like to experiment with them before they are finalized, please contact the team via the contact-us link on our website.
 
-
 ## Time API
 
 Open MCT provides API for managing the temporal state of the application.
-Central to this is the concept of "time bounds". Views in Open MCT will 
-typically show telemetry data for some prescribed date range, and the Time API 
+Central to this is the concept of "time bounds". Views in Open MCT will
+typically show telemetry data for some prescribed date range, and the Time API
 provides a way to centrally manage these bounds.
 
-The Time API exposes a number of methods for querying and setting the temporal 
+The Time API exposes a number of methods for querying and setting the temporal
 state of the application, and emits events to inform listeners when the state changes.
 
-Because the data displayed tends to be time domain data, Open MCT must always 
+Because the data displayed tends to be time domain data, Open MCT must always
 have at least one time system installed and activated. When you download Open
-MCT, it will be pre-configured to use the UTC time system, which is installed and activated, along with other default plugins, in `index.html`. Installing and activating a time system is simple, and is covered 
-[in the next section](#defining-and-registering-time-systems). 
+MCT, it will be pre-configured to use the UTC time system, which is installed and activated, 
+along with other default plugins, in `index.html`. Installing and activating a time system 
+is simple, and is covered [in the next section](#defining-and-registering-time-systems).
 
 ### Time Systems and Bounds
 
 #### Defining and Registering Time Systems
 
-The time bounds of an Open MCT application are defined as numbers, and a Time 
-System gives meaning and context to these numbers so that they can be correctly 
-interpreted. Time Systems are JavaScript objects that provide some information 
-about the current time reference frame. An example of defining and registering 
+The time bounds of an Open MCT application are defined as numbers, and a Time
+System gives meaning and context to these numbers so that they can be correctly
+interpreted. Time Systems are JavaScript objects that provide some information
+about the current time reference frame. An example of defining and registering
 a new time system is given below:
 
 ``` javascript
@@ -648,91 +788,109 @@ openmct.time.addTimeSystem({
 });
 ```
 
-The example above defines a new utc based time system. In fact, this time system 
-is configured and activated by default from `index.html` in the default 
-installation of Open MCT if you download the source from GitHub. Some details of 
+The example above defines a new utc based time system. In fact, this time system
+is configured and activated by default from `index.html` in the default
+installation of Open MCT if you download the source from GitHub. Some details of
 each of the required properties is provided below.
 
-* `key`: A `string` that uniquely identifies this time system.
-* `name`: A `string` providing a brief human readable label. If the [Time Conductor](#the-time-conductor) 
+- `key`: A `string` that uniquely identifies this time system.
+- `name`: A `string` providing a brief human readable label. If the [Time Conductor](#the-time-conductor)
 plugin is enabled, this name will identify the time system in a dropdown menu.
-* `cssClass`: A class name `string` that will be applied to the time system when 
-it appears in the UI. This will be used to represent the time system with an icon. 
-There are a number of built-in icon classes [available in Open MCT](https://github.com/nasa/openmct/blob/master/platform/commonUI/general/res/sass/_glyphs.scss), 
-or a custom class can be used here. 
-* `timeFormat`: A `string` corresponding to the key of a registered 
-[telemetry time format](#telemetry-formats). The format will be used for 
-displaying discrete timestamps from telemetry streams when this time system is 
-activated. If the [UTCTimeSystem](#included-plugins) is enabled, then the `utc` 
+- `cssClass`: A class name `string` that will be applied to the time system when
+it appears in the UI. This will be used to represent the time system with an icon.
+There are a number of built-in icon classes [available in Open MCT](https://github.com/nasa/openmct/blob/master/platform/commonUI/general/res/sass/_glyphs.scss),
+or a custom class can be used here.
+- `timeFormat`: A `string` corresponding to the key of a registered
+[telemetry time format](#telemetry-formats). The format will be used for
+displaying discrete timestamps from telemetry streams when this time system is
+activated. If the [UTCTimeSystem](#included-plugins) is enabled, then the `utc`
 format can be used if this is a utc-based time system
-* `durationFormat`: A `string` corresponding to the key of a registered 
-[telemetry time format](#telemetry-formats). The format will be used for 
-displaying time ranges, for example `00:15:00` might be used to represent a time 
+- `durationFormat`: A `string` corresponding to the key of a registered
+[telemetry time format](#telemetry-formats). The format will be used for
+displaying time ranges, for example `00:15:00` might be used to represent a time
 period of fifteen minutes. These are used by the Time Conductor plugin to specify
-relative time offsets. If the [UTCTimeSystem](#included-plugins) is enabled, 
+relative time offsets. If the [UTCTimeSystem](#included-plugins) is enabled,
 then the `duration` format can be used if this is a utc-based time system
-* `isUTCBased`: A `boolean` that defines whether this time system represents 
-numbers in UTC terrestrial time. 
+- `isUTCBased`: A `boolean` that defines whether this time system represents
+numbers in UTC terrestrial time.
 
 #### Getting and Setting the Active Time System
 
-Once registered, a time system can be activated by calling `timeSystem` with
-the timeSystem `key` or an instance of the time system.  If you are not using a
-[clock](#clocks), you must also specify valid [bounds](#time-bounds) for the
-timeSystem.
+Once registered, a time system can be activated by calling `setTimeSystem` with
+the timeSystem `key` or an instance of the time system.  You can also specify 
+valid [bounds](#time-bounds) for the timeSystem.
 
 ```javascript
-openmct.time.timeSystem('utc', bounds);
+openmct.time.setTimeSystem('utc', bounds);
 ```
 
-A time system can be immediately activated after registration: 
+The current time system can be retrieved as well by calling `getTimeSystem`.
+
+```javascript
+openmct.time.getTimeSystem();
+```
+
+A time system can be immediately activated after registration:
 
 ```javascript
 openmct.time.addTimeSystem(utcTimeSystem);
-openmct.time.timeSystem(utcTimeSystem, bounds);
+openmct.time.setTimeSystem(utcTimeSystem, bounds);
 ```
 
-Setting the active time system will trigger a [`'timeSystem'`](#time-events) 
-event.  If you supplied bounds, a [`'bounds'`](#time-events) event will be triggered afterwards with your newly supplied bounds.
+Setting the active time system will trigger a [`'timeSystemChanged'`](#time-events)
+event.  If you supplied bounds, a [`'boundsChanged'`](#time-events) event will be triggered afterwards with your newly supplied bounds.
+
+> ⚠️ **Deprecated**
+> - The method `timeSystem()` is deprecated. Please use `getTimeSystem()` and `setTimeSystem()` as a replacement.
+
+
 
 #### Time Bounds
 
-The TimeAPI provides a getter/setter for querying and setting time bounds. Time 
+The TimeAPI provides a getter and setter for querying and setting time bounds. Time
 bounds are simply an object with a `start` and an end `end` attribute.
 
-* `start`: A `number` representing a moment in time in the active [Time System](#defining-and-registering-time-systems). 
+- `start`: A `number` representing a moment in time in the active [Time System](#defining-and-registering-time-systems).
 This will be used as the beginning of the time period displayed by time-responsive
 telemetry views.
-* `end`: A `number` representing a moment in time in the active [Time System](#defining-and-registering-time-systems).
+- `end`: A `number` representing a moment in time in the active [Time System](#defining-and-registering-time-systems).
 This will be used as the end of the time period displayed by time-responsive
 telemetry views.
 
-If invoked with bounds, it will set the new time bounds system-wide. If invoked 
-without any parameters, it will return the current application-wide time bounds. 
+New bounds can be set system wide by calling `setBounds` with [bounds](#time-bounds).
 
 ``` javascript
 const ONE_HOUR = 60 * 60 * 1000;
 let now = Date.now();
-openmct.time.bounds({start: now - ONE_HOUR, now);
+openmct.time.setBounds({start: now - ONE_HOUR, now);
+```
+
+Calling `getBounds` will return the current application-wide time bounds.
+
+``` javascript
+openmct.time.getBounds();
 ```
 
-To respond to bounds change events, listen for the [`'bounds'`](#time-events)
+To respond to bounds change events, listen for the [`'boundsChanged'`](#time-events)
 event.
 
+> ⚠️ **Deprecated**
+> - The method `bounds()` is deprecated and will be removed in a future release. Please use `getBounds()` and `setBounds()` as a replacement.
+
 ### Clocks
 
-The Time API can be set to follow a clock source which will cause the bounds
-to be updated automatically whenever the clock source "ticks". A clock is simply
-an object that supports registration of listeners and periodically invokes its 
-listeners with a number. Open MCT supports registration of new clock sources that 
-tick on almost anything. A tick occurs when the clock invokes callback functions 
-registered by its listeners with a new time value.
-
-An example of a clock source is the [LocalClock](https://github.com/nasa/openmct/blob/master/src/plugins/utcTimeSystem/LocalClock.js) 
-which emits the current time in UTC every 100ms. Clocks can tick on anything. For 
-example, a clock could be defined to provide the timestamp of any new data 
-received via a telemetry subscription. This would have the effect of advancing 
-the bounds of views automatically whenever data is received. A clock could also 
+The Time API requires a clock source which will cause the bounds to be updated 
+automatically whenever the clock source "ticks". A clock is simply an object that 
+supports registration of listeners and periodically invokes its listeners with a 
+number. Open MCT supports registration of new clock sources that tick on almost 
+anything. A tick occurs when the clock invokes callback functions registered by its 
+listeners with a new time value.
+
+An example of a clock source is the [LocalClock](https://github.com/nasa/openmct/blob/master/src/plugins/utcTimeSystem/LocalClock.js)
+which emits the current time in UTC every 100ms. Clocks can tick on anything. For
+example, a clock could be defined to provide the timestamp of any new data
+received via a telemetry subscription. This would have the effect of advancing
+the bounds of views automatically whenever data is received. A clock could also
 be defined to tick on some remote timing source.
 
 The values provided by clocks are simple `number`s, which are interpreted in the
@@ -742,32 +900,32 @@ context of the active [Time System](#defining-and-registering-time-systems).
 
 A clock is an object that defines certain required metadata and functions:
 
-* `key`: A `string` uniquely identifying this clock. This can be used later to 
+- `key`: A `string` uniquely identifying this clock. This can be used later to
 reference the clock in places such as the [Time Conductor configuration](#time-conductor-configuration)
-* `cssClass`: A `string` identifying a CSS class to apply to this clock when it's 
-displayed in the UI. This will be used to represent the time system with an icon. 
-There are a number of built-in icon classes [available in Open MCT](https://github.com/nasa/openmct/blob/master/platform/commonUI/general/res/sass/_glyphs.scss), 
-or a custom class can be used here. 
-* `name`: A `string` providing a human-readable identifier for the clock source. 
-This will be displayed in the clock selector menu in the Time Conductor UI 
-component, if active. 
-* `description`: An __optional__ `string` providing a longer description of the 
-clock. The description will be visible in the clock selection menu in the Time 
+- `cssClass`: A `string` identifying a CSS class to apply to this clock when it's
+displayed in the UI. This will be used to represent the time system with an icon.
+There are a number of built-in icon classes [available in Open MCT](https://github.com/nasa/openmct/blob/master/platform/commonUI/general/res/sass/_glyphs.scss),
+or a custom class can be used here.
+- `name`: A `string` providing a human-readable identifier for the clock source.
+This will be displayed in the clock selector menu in the Time Conductor UI
+component, if active.
+- `description`: An **optional** `string` providing a longer description of the
+clock. The description will be visible in the clock selection menu in the Time
 Conductor plugin.
-* `on`: A `function` supporting registration of a new callback that will be 
+- `on`: A `function` supporting registration of a new callback that will be
 invoked when the clock next ticks. It will be invoked with two arguments:
-    * `eventName`: A `string` specifying the event to listen on. For now, clocks 
+  - `eventName`: A `string` specifying the event to listen on. For now, clocks
     support one event - `tick`.
-    * `callback`: A `function` that will be invoked when this clock ticks. The 
+  - `callback`: A `function` that will be invoked when this clock ticks. The
     function must be invoked with one parameter - a `number` representing a valid
     time in the current time system.
-* `off`: A `function` that allows deregistration of a tick listener. It accepts 
+- `off`: A `function` that allows deregistration of a tick listener. It accepts
 the same arguments as `on`.
-* `currentValue`: A `function` that returns a `number` representing a point in 
-time in the active time system. It should be the last value provided by a tick, 
+- `currentValue`: A `function` that returns a `number` representing a point in
+time in the active time system. It should be the last value provided by a tick,
 or some default value if no ticking has yet occurred.
 
-A new clock can be registered using the `addClock` function exposed by the Time 
+A new clock can be registered using the `addClock` function exposed by the Time
 API:
 
 ```javascript
@@ -794,63 +952,128 @@ An example clock implementation is provided in the form of the [LocalClock](http
 
 #### Getting and setting active clock
 
-Once registered a clock can be activated by calling the `clock` function on the 
-Time API passing in the key or instance of a registered clock. Only one clock 
-may be active at once, so activating a clock will deactivate any currently 
-active clock. [`clockOffsets`](#clock-offsets) must be specified when changing a clock.
-
-Setting the clock triggers a [`'clock'`](#time-events) event, followed by a [`'clockOffsets'`](#time-events) event, and then a [`'bounds'`](#time-events) event as the offsets are applied to the clock's currentValue().
+Once registered a clock can be activated by calling the `setClock` function on the
+Time API passing in the key or instance of a registered clock. Only one clock
+may be active at once, so activating a clock will deactivate any currently
+active clock and start the new clock. [`clockOffsets`](#clock-offsets) must be specified when changing a clock.
 
+Setting the clock triggers a [`'clockChanged'`](#time-events) event, followed by a [`'clockOffsetsChanged'`](#time-events) event, and then a [`'boundsChanged'`](#time-events) event as the offsets are applied to the clock's currentValue().
 
 ```
-openmct.time.clock(someClock, clockOffsets);
+openmct.time.setClock(someClock, clockOffsets);
 ```
 
 Upon being activated, the time API will listen for tick events on the clock by calling `clock.on`.
 
-The currently active clock (if any) can be retrieved by calling the same 
-function without any arguments.
+The currently active clock can be retrieved by calling `getClock`.
+
+```
+openmct.time.getClock();
+```
 
-#### Stopping an active clock
+> ⚠️ **Deprecated**
+> - The method `clock()` is deprecated and will be removed in a future release. Please use `getClock()` and `setClock()` as a replacement.
 
-The `stopClock` method can be used to stop an active clock, and to clear it. It 
+#### ⚠️ [DEPRECATED] Stopping an active clock
+
+_As of July 2023, this method will be deprecated. Open MCT will always have a ticking clock._
+
+The `stopClock` method can be used to stop an active clock, and to clear it. It
 will stop the clock from ticking, and set the active clock to `undefined`.
 
 ``` javascript
 openmct.time.stopClock();
 ```
 
+> ⚠️ **Deprecated**
+> - The method `stopClock()` is deprecated and will be removed in a future release.
+
 #### Clock Offsets
 
-When a clock is active, the time bounds of the application will be updated 
-automatically each time the clock "ticks". The bounds are calculated based on 
-the current value provided by the active clock (via its `tick` event, or its 
-`currentValue()` method). 
+When in Real-time [mode](#time-modes), the time bounds of the application will be updated automatically each time the 
+clock "ticks". The bounds are calculated based on the current value provided by 
+the active clock (via its `tick` event, or its `currentValue()` method).
 
 Unlike bounds, which represent absolute time values, clock offsets represent
 relative time spans. Offsets are defined as an object with two properties:
 
-* `start`: A `number` that must be < 0 and which is used to calculate the start 
-bounds on each clock tick. The start offset will be calculated relative to the 
+- `start`: A `number` that must be < 0 and which is used to calculate the start
+bounds on each clock tick. The start offset will be calculated relative to the
 value provided by a clock's tick callback, or its `currentValue()` function.
-* `end`: A `number` that must be >= 0 and which is used to calculate the end 
+- `end`: A `number` that must be >= 0 and which is used to calculate the end
 bounds on each clock tick.
 
-The `clockOffsets` function can be used to get or set clock offsets. For example, 
-to show the last fifteen minutes in a ms-based time system: 
+The `setClockOffsets` function can be used to get or set clock offsets. For example,
+to show the last fifteen minutes in a ms-based time system:
 
 ```javascript
 var FIFTEEN_MINUTES = 15 * 60 * 1000;
 
-openmct.time.clockOffsets({
+openmct.time.setClockOffsets({
     start: -FIFTEEN_MINUTES,
     end: 0
 })
 ```
 
-__Note:__ Setting the clock offsets will trigger an immediate bounds change, as 
-new bounds will be calculated based on the `currentValue()` of the active clock. 
-Clock offsets are only relevant when a clock source is active.
+The `getClockOffsets` method will return the currently set clock offsets.
+
+```javascript
+openmct.time.getClockOffsets()
+```
+
+**Note:** Setting the clock offsets will trigger an immediate bounds change, as
+new bounds will be calculated based on the `currentValue()` of the active clock.
+Clock offsets are only relevant when in Real-time [mode](#time-modes).
+
+> ⚠️ **Deprecated**
+> - The method `clockOffsets()` is deprecated and will be removed in a future release. Please use `getClockOffsets()` and `setClockOffsets()` as a replacement.
+
+### Time Modes
+
+There are two time modes in Open MCT, "Fixed" and "Real-time". In Real-time mode the 
+time bounds of the application will be updated automatically each time the clock "ticks".
+The bounds are calculated based on the current value provided by the active clock. In 
+Fixed mode, the time bounds are set for a specified time range. When Open MCT is first
+initialized, it will be in Real-time mode.
+
+The `setMode` method can be used to set the current time mode. It accepts a mode argument,
+`'realtime'` or `'fixed'` and it also accepts an optional [offsets](#clock-offsets)/[bounds](#time-bounds) argument dependent
+on the current mode.
+
+``` javascript
+openmct.time.setMode('fixed');
+openmct.time.setMode('fixed', bounds); // with optional bounds
+```
+
+or
+
+``` javascript
+openmct.time.setMode('realtime');
+openmct.time.setMode('realtime', offsets); // with optional offsets
+```
+
+The `getMode` method will return the current time mode, either `'realtime'` or `'fixed'`.
+
+``` javascript
+openmct.time.getMode();
+```
+
+#### Time Mode Helper Methods
+
+There are two methods available to determine the current time mode in Open MCT programmatically,
+`isRealTime` and `isFixed`. Each one will return a boolean value based on the current mode.
+
+``` javascript
+if (openmct.time.isRealTime()) {
+  // do real-time stuff
+}
+```
+
+``` javascript
+if (openmct.time.isFixed()) {
+  // do fixed-time stuff
+}
+```
 
 ### Time Events
 
@@ -859,7 +1082,7 @@ The Time API is a standard event emitter; you can register callbacks for events
 For example:
 
 ``` javascript
-openmct.time.on('bounds', function callback (newBounds, tick) {
+openmct.time.on('boundsChanged', function callback (newBounds, tick) {
     // Do something with new bounds
 });
 ```
@@ -868,89 +1091,97 @@ openmct.time.on('bounds', function callback (newBounds, tick) {
 
 The events emitted by the Time API are:
 
-* `bounds`: emitted whenever the bounds change.  The callback will be invoked 
+- `boundsChanged`: emitted whenever the bounds change.  The callback will be invoked
   with two arguments:
-  * `bounds`: A [bounds](#getting-and-setting-bounds) bounds object
+  - `bounds`: A [bounds](#getting-and-setting-bounds) bounds object
     representing a new time period bound by the specified start and send times.
-  * `tick`: A `boolean` indicating whether or not this bounds change is due to
-    a "tick" from a [clock source](#clocks). This information can be useful 
-    when determining a strategy for fetching telemetry data in response to a 
-    bounds change event. For example, if the bounds change was automatic, and 
-    is due to a tick then it's unlikely that you would need to perform a 
-    historical data query. It should be sufficient to just show any new 
-    telemetry received via subscription since the last tick, and optionally to 
-    discard any older data that now falls outside of the currently set bounds. 
-    If `tick` is false,then the bounds change was not due to an automatic tick, 
-    and a query for historical data may be necessary, depending on your data 
+  - `tick`: A `boolean` indicating whether or not this bounds change is due to
+    a "tick" from a [clock source](#clocks). This information can be useful
+    when determining a strategy for fetching telemetry data in response to a
+    bounds change event. For example, if the bounds change was automatic, and
+    is due to a tick then it's unlikely that you would need to perform a
+    historical data query. It should be sufficient to just show any new
+    telemetry received via subscription since the last tick, and optionally to
+    discard any older data that now falls outside of the currently set bounds.
+    If `tick` is false,then the bounds change was not due to an automatic tick,
+    and a query for historical data may be necessary, depending on your data
     caching strategy, and how significantly the start bound has changed.
-* `timeSystem`: emitted whenever the active time system changes.  The callback will be invoked with a single argument:
-  * `timeSystem`: The newly active [time system](#defining-and-registering-time-systems).
-* `clock`: emitted whenever the clock changes.  The callback will be invoked 
+- `timeSystemChanged`: emitted whenever the active time system changes.  The callback will be invoked with a single argument:
+  - `timeSystem`: The newly active [time system](#defining-and-registering-time-systems).
+- `clockChanged`: emitted whenever the clock changes.  The callback will be invoked
   with a single argument:
-  * `clock`: The newly active [clock](#clocks), or `undefined` if an active 
+  - `clock`: The newly active [clock](#clocks), or `undefined` if an active
     clock has been deactivated.
-* `clockOffsets`: emitted whenever the active clock offsets change.  The 
+- `clockOffsetsChanged`: emitted whenever the active clock offsets change.  The
   callback will be invoked with a single argument:
-  * `clockOffsets`: The new [clock offsets](#clock-offsets).
+  - `clockOffsets`: The new [clock offsets](#clock-offsets).
+- `modeChanged`: emitted whenever the time [mode](#time-modes) changed. The callback will
+  be invoked with one argument:
+  - `mode`: A string representation of the current time mode, either `'realtime'` or `'fixed'`.
 
+> ⚠️ **Deprecated Events** (These will be removed in a future release):
+> - `bounds` → `boundsChanged`
+> - `timeSystem` → `timeSystemChanged`
+> - `clock` → `clockChanged`
+> - `clockOffsets` → `clockOffsetsChanged`
 
 ### The Time Conductor
 
-The Time Conductor provides a user interface for managing time bounds in Open 
+The Time Conductor provides a user interface for managing time bounds in Open
 MCT. It allows a user to select from configured time systems and clocks, and to set bounds and clock offsets.
 
-If activated, the time conductor must be provided with configuration options, 
+If activated, the time conductor must be provided with configuration options,
 detailed below.
 
 #### Time Conductor Configuration
 
-The time conductor is configured by specifying the options that will be 
-available to the user from the menus in the time conductor. These will determine 
-the clocks available from the conductor, the time systems available for each 
-clock, and some default bounds and clock offsets for each combination of clock 
-and time system. By default, the conductor always supports a `fixed` mode where 
+The time conductor is configured by specifying the options that will be
+available to the user from the menus in the time conductor. These will determine
+the clocks available from the conductor, the time systems available for each
+clock, and some default bounds and clock offsets for each combination of clock
+and time system. By default, the conductor always supports a `fixed` mode where
 no clock is active. To specify configuration for fixed mode, simply leave out a
 `clock` attribute in the configuration entry object.
 
-Configuration is provided as an `array` of menu options. Each entry of the 
+Configuration is provided as an `array` of menu options. Each entry of the
 array is an object with some properties specifying configuration. The configuration
-options specified are slightly different depending on whether or not it is for 
+options specified are slightly different depending on whether or not it is for
 an active clock mode.
 
-__Configuration for Fixed Time Mode (no active clock)__
+**Configuration for Fixed Time Mode (no active clock)**
 
-* `timeSystem`: A `string`, the key for the time system that this configuration 
+- `timeSystem`: A `string`, the key for the time system that this configuration
 relates to.
-* `bounds`: A [`Time Bounds`](#time-bounds) object. These bounds will be applied 
-when the user selects the time system specified in the previous `timeSystem` 
+- `bounds`: A [`Time Bounds`](#time-bounds) object. These bounds will be applied
+when the user selects the time system specified in the previous `timeSystem`
 property.
-* `zoomOutLimit`: An __optional__ `number` specifying the longest period of time 
-that can be represented by the conductor when zooming. If a `zoomOutLimit` is 
-provided, then a `zoomInLimit` must also be provided. If provided, the zoom 
+- `zoomOutLimit`: An **optional** `number` specifying the longest period of time
+that can be represented by the conductor when zooming. If a `zoomOutLimit` is
+provided, then a `zoomInLimit` must also be provided. If provided, the zoom
 slider will automatically become available in the Time Conductor UI.
-* `zoomInLimit`: An __optional__ `number` specifying the shortest period of time 
-that can be represented by the conductor when zooming. If a `zoomInLimit` is 
-provided, then a `zoomOutLimit` must also be provided. If provided, the zoom 
+- `zoomInLimit`: An **optional** `number` specifying the shortest period of time
+that can be represented by the conductor when zooming. If a `zoomInLimit` is
+provided, then a `zoomOutLimit` must also be provided. If provided, the zoom
 slider will automatically become available in the Time Conductor UI.
 
-__Configuration for Active Clock__
+**Configuration for Active Clock**
 
-* `clock`: A `string`, the `key` of the clock that this configuration applies to. 
-* `timeSystem`: A `string`, the key for the time system that this configuration 
-relates to. Separate configuration must be provided for each time system that you 
+- `clock`: A `string`, the `key` of the clock that this configuration applies to.
+- `timeSystem`: A `string`, the key for the time system that this configuration
+relates to. Separate configuration must be provided for each time system that you
 wish to be available to users when they select the specified clock.
-* `clockOffsets`: A [`clockOffsets`](#clock-offsets) object that will be 
-automatically applied when the combination of clock and time system specified in 
+- `clockOffsets`: A [`clockOffsets`](#clock-offsets) object that will be
+automatically applied when the combination of clock and time system specified in
 this configuration is selected from the UI.
 
 #### Example conductor configuration
 
-An example time conductor configuration is provided below. It sets up some 
-default options for the [UTCTimeSystem](https://github.com/nasa/openmct/blob/master/src/plugins/utcTimeSystem/UTCTimeSystem.js) 
-and [LocalTimeSystem](https://github.com/nasa/openmct/blob/master/src/plugins/localTimeSystem/LocalTimeSystem.js), 
-in both fixed mode, and for the [LocalClock](https://github.com/nasa/openmct/blob/master/src/plugins/utcTimeSystem/LocalClock.js) 
-source. In this configutation, the local clock supports both the UTCTimeSystem 
-and LocalTimeSystem. Configuration for fixed bounds mode is specified by omitting 
+An example time conductor configuration is provided below. It sets up some
+default options for the [UTCTimeSystem](https://github.com/nasa/openmct/blob/master/src/plugins/utcTimeSystem/UTCTimeSystem.js)
+and [LocalTimeSystem](https://github.com/nasa/openmct/blob/master/src/plugins/localTimeSystem/LocalTimeSystem.js),
+in both fixed mode, and for the [LocalClock](https://github.com/nasa/openmct/blob/master/src/plugins/utcTimeSystem/LocalClock.js)
+source. In this configutation, the local clock supports both the UTCTimeSystem
+and LocalTimeSystem. Configuration for fixed bounds mode is specified by omitting
 a clock key.
 
 ``` javascript
@@ -986,26 +1217,27 @@ openmct.install(openmct.plugins.Conductor({
 
 ## Indicators
 
-Indicators are small widgets that reside at the bottom of the screen and are visible from 
+Indicators are small widgets that reside at the bottom of the screen and are visible from
 every screen in Open MCT. They can be used to convey system state using an icon and text.
-Typically an indicator will display an icon (customizable with a CSS class) that will 
+Typically an indicator will display an icon (customizable with a CSS class) that will
 reveal additional information when the mouse cursor is hovered over it.
 
 ### The URL Status Indicator
 
-A common use case for indicators is to convey the state of some external system such as a 
-persistence backend or HTTP server. So long as this system is accessible via HTTP request, 
-Open MCT provides a general purpose indicator to show whether the server is available and 
-returing a 2xx status code. The URL Status Indicator is made available as a default plugin. See
-the [documentation](./src/plugins/URLIndicatorPlugin) for details on how to install and configure the 
+A common use case for indicators is to convey the state of some external system such as a
+persistence backend or HTTP server. So long as this system is accessible via HTTP request,
+Open MCT provides a general purpose indicator to show whether the server is available and
+returning a 2xx status code. The URL Status Indicator is made available as a default plugin. See
+the [documentation](./src/plugins/URLIndicatorPlugin) for details on how to install and configure the
 URL Status Indicator.
 
 ### Creating a Simple Indicator
 
-A simple indicator with an icon and some text can be created and added with minimal code. An indicator 
+A simple indicator with an icon and some text can be created and added with minimal code. An indicator
 of this type exposes functions for customizing the text, icon, and style of the indicator.
 
 eg.
+
 ``` javascript
 var myIndicator = openmct.indicators.simpleIndicator();
 myIndicator.text("Hello World!");
@@ -1014,24 +1246,24 @@ openmct.indicators.add(myIndicator);
 
 This will create a new indicator and add it to the bottom of the screen in Open MCT.
 By default, the indicator will appear as an information icon. Hovering over the icon will
-reveal the text set via the call to `.text()`. The Indicator object returned by the API 
+reveal the text set via the call to `.text()`. The Indicator object returned by the API
 call exposes a number of functions for customizing the content and appearance of the indicator:
 
-* `.text([text])`: Gets or sets the text shown when the user hovers over the indicator.
-Accepts an __optional__ `string` argument that, if provided, will be used to set the text. 
-Hovering over the indicator will expand it to its full size, revealing this text alongside 
+- `.text([text])`: Gets or sets the text shown when the user hovers over the indicator.
+Accepts an **optional** `string` argument that, if provided, will be used to set the text.
+Hovering over the indicator will expand it to its full size, revealing this text alongside
 the icon. Returns the currently set text as a `string`.
-* `.description([description])`: Gets or sets the indicator's description. Accepts an 
-__optional__ `string` argument that, if provided, will be used to set the text. The description 
-allows for more detail to be provided in a tooltip when the user hovers over the indicator. 
+- `.description([description])`: Gets or sets the indicator's description. Accepts an
+**optional** `string` argument that, if provided, will be used to set the text. The description
+allows for more detail to be provided in a tooltip when the user hovers over the indicator.
 Returns the currently set text as a `string`.
-* `.iconClass([className])`: Gets or sets the CSS class used to define the icon. Accepts an __optional__ 
-`string` parameter to be used to set the class applied to the indicator. Any of 
-[the built-in glyphs](https://nasa.github.io/openmct/style-guide/#/browse/styleguide:home/glyphs?view=styleguide.glyphs) 
-may be used here, or a custom CSS class can be provided. Returns the currently defined CSS 
+- `.iconClass([className])`: Gets or sets the CSS class used to define the icon. Accepts an **optional**
+`string` parameter to be used to set the class applied to the indicator. Any of
+[the built-in glyphs](https://nasa.github.io/openmct/style-guide/#/browse/styleguide:home/glyphs?view=styleguide.glyphs)
+may be used here, or a custom CSS class can be provided. Returns the currently defined CSS
 class as a `string`.
-* `.statusClass([className])`: Gets or sets the CSS class used to determine status. Accepts an __optional __
-`string` parameter to be used to set a status class applied to the indicator. May be used to apply 
+- `.statusClass([className])`: Gets or sets the CSS class used to determine status. Accepts an __optional__
+`string` parameter to be used to set a status class applied to the indicator. May be used to apply
 different colors to indicate status.
 
 ### Custom Indicators
@@ -1049,3 +1281,84 @@ A completely custom indicator can be added by simply providing a DOM element to
         element: domNode
     });
 ```
+
+## Priority API
+
+Open MCT provides some built-in priority values that can be used in the application for view providers, indicators, root object order, and more.
+
+### Priority Types
+
+Currently, the Open MCT Priority API provides (type: numeric value):
+
+- HIGH: 1000
+- Default: 0
+- LOW: -1000
+
+View provider Example:
+
+``` javascript
+  class ViewProvider {
+    ...
+    priority() {
+        return openmct.priority.HIGH;
+    }
+}
+```
+
+## Visibility-Based Rendering in View Providers
+
+To enhance performance and resource efficiency in OpenMCT, a visibility-based rendering feature has been added. This feature is designed to defer the execution of rendering logic for views that are not currently visible. It ensures that views are only updated when they are in the viewport, similar to how modern browsers handle rendering of inactive tabs but optimized for the OpenMCT tabbed display. It also works when views are scrolled outside the viewport (e.g., in a Display Layout).
+
+### Overview
+
+The show function is responsible for the rendering of a view. An [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) is used internally to determine whether the view is visible. This observer drives the visibility-based rendering feature, accessed via the `renderWhenVisible` function provided in the `viewOptions` parameter.
+
+### Implementing Visibility-Based Rendering
+
+The `renderWhenVisible` function is passed to the show function as part of the `viewOptions` object. This function can be used for all rendering logic that would otherwise be executed within a `requestAnimationFrame` call. When called, `renderWhenVisible` will either execute the provided function immediately (via `requestAnimationFrame`) if the view is currently visible, or defer its execution until the view becomes visible.
+
+Additionally, `renderWhenVisible` returns a boolean value indicating whether the provided function was executed immediately (`true`) or deferred (`false`).
+
+Monitoring of visibility begins after the first call to `renderWhenVisible` is made.
+
+Here’s the signature for the show function:
+
+`show(element, isEditing, viewOptions)`
+
+  * `element` (HTMLElement) - The DOM element where the view should be rendered.
+  * `isEditing` (boolean) - Indicates whether the view is in editing mode.
+  * `viewOptions` (Object) - An object with configuration options for the view, including:
+    * `renderWhenVisible` (Function) - This function wraps the `requestAnimationFrame` and only triggers the provided render logic when the view is visible in the viewport.
+
+### Example
+
+An OpenMCT view provider might implement the show function as follows:
+
+```js
+// Define your view provider
+const myViewProvider = {
+  // ... other properties and methods ...
+  show: function (element, isEditing, viewOptions) {
+    // Callback for rendering view content
+    const renderCallback = () => {
+      // Your view rendering logic goes here
+    };
+    
+    // Use the renderWhenVisible function to ensure rendering only happens when view is visible
+    const wasRenderedImmediately = viewOptions.renderWhenVisible(renderCallback);
+
+    // Optionally handle the immediate rendering return value
+    if (wasRenderedImmediately) {
+      console.debug('🪞 Rendering triggered immediately as the view is visible.');
+    } else {
+      console.debug('🛑 Rendering has been deferred until the view becomes visible.');
+    }
+  }
+};
+```
+
+
+Note that `renderWhenVisible` defers rendering while the view is not visible and caters to the latest execution call. This provides responsiveness for dynamic content while ensuring performance optimizations.
+
+Ensure your view logic is prepared to handle potentially multiple deferrals if using this API, as only the last call to renderWhenVisible will be queued for execution upon the view becoming visible.
+
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index c3ad0ec1d3a..674059c34de 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -10,7 +10,7 @@ accept changes from external contributors.
 
 The short version:
 
-1. Write your contribution or describe your idea in the form of an [GitHub issue](https://github.com/nasa/openmct/issues/new/choose) or [Starting a GitHub Discussion](https://github.com/nasa/openmct/discussions)
+1. Write your contribution or describe your idea in the form of a [GitHub issue](https://github.com/nasa/openmct/issues/new/choose) or [start a GitHub discussion](https://github.com/nasa/openmct/discussions).
 2. Make sure your contribution meets code, test, and commit message
    standards as described below.
 3. Submit a pull request from a topic branch back to `master`. Include a check
@@ -18,13 +18,13 @@ The short version:
    for review.)
 4. Respond to any discussion. When the reviewer decides it's ready, they
    will merge back `master` and fill out their own check list.
-5. If you are a first-time contributor, please see [this discussion](https://github.com/nasa/openmct/discussions/3821) for further information.   
+5. If you are a first-time contributor, please see [this discussion](https://github.com/nasa/openmct/discussions/3821) for further information.
 
 ## Contribution Process
 
 Open MCT uses git for software version control, and for branching and
 merging. The central repository is at
-https://github.com/nasa/openmct.git.
+<https://github.com/nasa/openmct.git>.
 
 ### Roles
 
@@ -116,6 +116,7 @@ the pull request containing the reviewer checklist (from below) and complete
 the merge back to the master branch.
 
 Additionally:
+
 * Every pull request must link to the issue that it addresses. Eg. “Addresses #1234” or “Closes #1234”. This is the responsibility of the pull request’s __author__. If no issue exists, [create one](https://github.com/nasa/openmct/issues/new/choose).
 * Every __author__ must include testing instructions. These instructions should identify the areas of code affected, and some minimal test steps. If addressing a bug, reproduction steps should be included, if they were not included in the original issue. If reproduction steps were included on the original issue, and are sufficient, refer to them.
 * A pull request that closes an issue should say so in the description. Including the text “Closes #1234” will cause the linked issue to be automatically closed when the pull request is merged. This is the responsibility of the pull request’s __author__.
@@ -132,25 +133,26 @@ changes.
 
 ### Code Standards
 
-JavaScript sources in Open MCT must satisfy the ESLint rules defined in 
-this repository. This is verified by the command line build.
+JavaScript sources in Open MCT must satisfy the [ESLint](https://eslint.org/) rules defined in
+this repository. [Prettier](https://prettier.io/) is used in conjunction with ESLint to enforce code style
+via automated formatting. These are verified by the command line build.
 
 #### Code Guidelines
 
 The following guidelines are provided for anyone contributing source code to the Open MCT project:
 
-1. Write clean code. Here’s a good summary - https://github.com/ryanmcdermott/clean-code-javascript.
+1. Write clean code. Here’s a good summary - <https://github.com/ryanmcdermott/clean-code-javascript>.
 1. Include JSDoc for any exposed API (e.g. public methods, classes).
 1. Include non-JSDoc comments as-needed for explaining private variables,
-   methods, or algorithms when they are non-obvious. Otherwise code 
+   methods, or algorithms when they are non-obvious. Otherwise code
    should be self-documenting.
 1. Classes and Vue components should use camel case, first letter capitalized
    (e.g. SomeClassName).
 1. Methods, variables, fields, events, and function names should use camelCase,
    first letter lower-case (e.g. someVariableName).
 1. Source files that export functions should use camelCase, first letter lower-case (eg. testTools.js)
-1. Constants (variables or fields which are meant to be declared and 
-   initialized statically, and never changed) should use only capital 
+1. Constants (variables or fields which are meant to be declared and
+   initialized statically, and never changed) should use only capital
    letters, with underscores between words (e.g. SOME_CONSTANT). They should always be declared as `const`s
 1. File names should be the name of the exported class, plus a .js extension
    (e.g. SomeClassName.js).
@@ -159,21 +161,25 @@ The following guidelines are provided for anyone contributing source code to the
    (e.g. as arguments to a forEach call). Anonymous functions should always be arrow functions.
 1. Named functions are preferred over functions assigned to variables.
    eg.
+
    ```JavaScript
    function renameObject(object, newName) {
        Object.name = newName;
    }
    ```
+
    is preferable to
+
    ```JavaScript
    const rename = (object, newName) => {
        Object.name = newName;
    }
    ```
+
 1. Avoid deep nesting (especially of functions), except where necessary
    (e.g. due to closure scope).
 1. End with a single new-line character.
-1. Always use ES6 `Class`es and inheritence rather than the pre-ES6 prototypal 
+1. Always use ES6 `Class`es and inheritance rather than the pre-ES6 prototypal
    pattern.
 1. Within a given function's scope, do not mix declarations and imperative
    code, and  present these in the following order:
@@ -182,19 +188,24 @@ The following guidelines are provided for anyone contributing source code to the
    * Finally, the returned value. A single return statement at the end of the function should be used, except where an early return would improve code clarity.
 1. Avoid the use of "magic" values.
    eg.
+
    ```JavaScript
    const UNAUTHORIZED = 401;
    if (responseCode === UNAUTHORIZED)
    ```
+
    is preferable to
+
    ```JavaScript
    if (responseCode === 401)
    ```
+
 1. Use the ternary operator only for simple cases such as variable assignment. Nested ternaries should be avoided in all cases.
-1. Test specs should reside alongside the source code they test, not in a separate directory.
+1. Unit Test specs should reside alongside the source code they test, not in a separate directory.
 1. Organize code by feature, not by type.
    eg.
-   ```
+
+   ```txt
    - telemetryTable
        - row
            TableRow.js
@@ -206,8 +217,10 @@ The following guidelines are provided for anyone contributing source code to the
        plugin.js
        pluginSpec.js
    ```
+
    is preferable to
-   ```
+
+   ```txt
    - telemetryTable
        - components
            TableRow.vue
@@ -219,47 +232,10 @@ The following guidelines are provided for anyone contributing source code to the
        plugin.js
        pluginSpec.js
    ```
+
 Deviations from Open MCT code style guidelines require two-party agreement,
 typically from the author of the change and its reviewer.
 
-### Test Standards
-
-Automated testing shall occur whenever changes are merged into the main
-development branch and must be confirmed alongside any pull request.
-
-Automated tests are tests which exercise plugins, API, and utility classes. 
-Tests are subject to code review along with the actual implementation, to 
-ensure that tests are applicable and useful.
-
-Examples of useful tests:
-* Tests which replicate bugs (or their root causes) to verify their
-  resolution.
-* Tests which reflect details from software specifications.
-* Tests which exercise edge or corner cases among inputs.
-* Tests which verify expected interactions with other components in the
-  system.
-
-#### Guidelines
-* 100% statement coverage is achievable and desirable.
-* Do blackbox testing. Test external behaviors, not internal details. Write tests that describe what your plugin is supposed to do. How it does this doesn't matter, so don't test it.
-* Unit test specs for plugins should be defined at the plugin level. Start with one test spec per plugin named pluginSpec.js, and as this test spec grows too big, break it up into multiple test specs that logically group related tests.
-* Unit tests for API or for utility functions and classes may be defined at a per-source file level.
-* Wherever possible only use and mock public API, builtin functions, and UI in your test specs. Do not directly invoke any private functions. ie. only call or mock functions and objects exposed by openmct.* (eg. openmct.telemetry, openmct.objectView, etc.), and builtin browser functions (fetch, requestAnimationFrame, setTimeout, etc.).
-* Where builtin functions have been mocked, be sure to clear them between tests.
-* Test at an appropriate level of isolation. Eg. 
-    * If you’re testing a view, you do not need to test the whole application UI, you can just fetch the view provider using the public API and render the view into an element that you have created. 
-    * You do not need to test that the view switcher works, there should be separate tests for that. 
-    * You do not need to test that telemetry providers work, you can mock openmct.telemetry.request() to feed test data to the view.
-    * Use your best judgement when deciding on appropriate scope.
-* Automated tests for plugins should start by actually installing the plugin being tested, and then test that installing the plugin adds the desired features and behavior to Open MCT, observing the above rules.
-* All variables used in a test spec, including any instances of the Open MCT API should be declared inside of an appropriate block scope (not at the root level of the source file), and should be initialized in the relevant beforeEach block. `beforeEach` is preferable to `beforeAll` to avoid leaking of state between tests.
-* A `afterEach` or `afterAll` should be used to do any clean up necessary to prevent leakage of state between test specs. This can happen when functions on `window` are wrapped, or when the URL is changed. [A convenience function](https://github.com/nasa/openmct/blob/master/src/utils/testing.js#L59) is provided for resetting the URL and clearing builtin spies between tests.
-* If writing unit tests for legacy Angular code be sure to follow [best practices in order to avoid memory leaks](https://www.thecodecampus.de/blog/avoid-memory-leaks-angularjs-unit-tests/).
-
-#### Examples
-* [Example of an automated test spec for an object view plugin](https://github.com/nasa/openmct/blob/master/src/plugins/telemetryTable/pluginSpec.js)
-* [Example of an automated test spec for API](https://github.com/nasa/openmct/blob/master/src/api/time/TimeAPISpec.js)
-
 ### Commit Message Standards
 
 Commit messages should:
@@ -295,13 +271,13 @@ these standards.
 
 ## Issue Reporting
 
-Issues are tracked at https://github.com/nasa/openmct/issues.
+Issues are tracked at <https://github.com/nasa/openmct/issues>.
 
 Issue severity is categorized as follows (in ascending order):
 
 * _Trivial_: Minimal impact on the usefulness and functionality of the software; a "nice-to-have." Visual impact without functional impact,
 * _Medium_: Some impairment of use, but simple workarounds exist
-* _Critical_: Significant loss of functionality or impairment of use. Display of telemetry data is not affected though.
+* _Critical_: Significant loss of functionality or impairment of use. Display of telemetry data is not affected though. Complex workarounds exist.
 * _Blocker_: Major functionality is impaired or lost, threatening mission success. Display of telemetry data is impaired or blocked by the bug, which could lead to loss of situational awareness.
 
 ## Check Lists
@@ -310,21 +286,4 @@ The following check lists should be completed and attached to pull requests
 when they are filed (author checklist) and when they are merged (reviewer
 checklist).
 
-### Author Checklist
-
 [Within PR Template](.github/PULL_REQUEST_TEMPLATE.md)
-
-### Reviewer Checklist
-
-* [ ] Changes appear to address issue?
-* [ ] Appropriate unit tests included?
-* [ ] Code style and in-line documentation are appropriate?
-* [ ] Commit messages meet standards?
-* [ ] Has associated issue been labelled `unverified`? (only applicable if this PR closes the issue)
-* [ ] Has associated issue been labelled `bug`? (only applicable if this PR is for a bug fix)
-* [ ] List of Acceptance Tests Performed.
-
-Write out a small list of tests performed with just enough detail for another developer on the team 
-to execute. 
-
-i.e. ```When Clicking on Add button, new `object` appears in dropdown.```
\ No newline at end of file
diff --git a/LICENSE.md b/LICENSE.md
index 04d36576a28..6f5fecba6c3 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -1,6 +1,6 @@
 # Open MCT License
 
-Open MCT, Copyright (c) 2014-2021, United States Government as represented by the Administrator of the National Aeronautics and Space Administration. All rights reserved.
+Open MCT, Copyright (c) 2014-2024, United States Government as represented by the Administrator of the National Aeronautics and Space Administration. All rights reserved.
 
 Open MCT is licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.  You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
 
diff --git a/Procfile b/Procfile
deleted file mode 100644
index 1e13b4ae057..00000000000
--- a/Procfile
+++ /dev/null
@@ -1 +0,0 @@
-web: node app.js --port $PORT
diff --git a/README.md b/README.md
index 77a573cede8..78335fbb99c 100644
--- a/README.md
+++ b/README.md
@@ -1,39 +1,49 @@
-# Open MCT [![license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](http://www.apache.org/licenses/LICENSE-2.0) [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/nasa/openmct.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/nasa/openmct/context:javascript)
+# Open MCT [![license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](http://www.apache.org/licenses/LICENSE-2.0) [![codecov](https://codecov.io/gh/nasa/openmct/branch/master/graph/badge.svg?token=7DQIipp3ej)](https://codecov.io/gh/nasa/openmct) [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/b2e34b17/openmct) [![npm version](https://img.shields.io/npm/v/openmct.svg)](https://www.npmjs.com/package/openmct) ![CodeQL](https://github.com/nasa/openmct/workflows/CodeQL/badge.svg)
 
 Open MCT (Open Mission Control Technologies) is a next-generation mission control framework for visualization of data on desktop and mobile devices. It is developed at NASA's Ames Research Center, and is being used by NASA for data analysis of spacecraft missions, as well as planning and operation of experimental rover systems. As a generalizable and open source framework, Open MCT could be used as the basis for building applications for planning, operation, and analysis of any systems producing telemetry data.
 
-Please visit our [Official Site](https://nasa.github.io/openmct/) and [Getting Started Guide](https://nasa.github.io/openmct/getting-started/)
+> [!NOTE]
+> Please visit our [Official Site](https://nasa.github.io/openmct/) and [Getting Started Guide](https://nasa.github.io/openmct/getting-started/)
+
 
 Once you've created something amazing with Open MCT, showcase your work in our GitHub Discussions [Show and Tell](https://github.com/nasa/openmct/discussions/categories/show-and-tell) section. We love seeing unique and wonderful implementations of Open MCT!
 
-## See Open MCT in Action
+![Screen Shot 2022-11-23 at 9 51 36 AM](https://user-images.githubusercontent.com/4215777/203617422-4d912bfc-766f-4074-8324-409d9bbe7c05.png)
 
-Try Open MCT now with our [live demo](https://openmct-demo.herokuapp.com/).
-![Demo](https://nasa.github.io/openmct/static/res/images/Open-MCT.Browse.Layout.Mars-Weather-1.jpg)
 
 ## Building and Running Open MCT Locally
 
 Building and running Open MCT in your local dev environment is very easy. Be sure you have [Git](https://git-scm.com/downloads) and [Node.js](https://nodejs.org/) installed, then follow the directions below. Need additional information? Check out the [Getting Started](https://nasa.github.io/openmct/getting-started/) page on our website.
 (These instructions assume you are installing as a non-root user; developers have [reported issues](https://github.com/nasa/openmct/issues/1151) running these steps with root privileges.)
 
-1. Clone the source code
+1. Clone the source code:
+
+```
+git clone https://github.com/nasa/openmct.git
+```
 
- `git clone https://github.com/nasa/openmct.git`
+2. (Optional) Install the correct node version using [nvm](https://github.com/nvm-sh/nvm):
 
-2. Install development dependencies
+```
+nvm install
+```
 
- `npm install`
+3. Install development dependencies (Note: Check the `package.json` engine for our tested and supported node versions): 
 
-3. Run a local development server
+```
+npm install
+```
 
- `npm start`
+4. Run a local development server:
 
-Open MCT is now running, and can be accessed by pointing a web browser at [http://localhost:8080/](http://localhost:8080/)
+```
+npm start
+```
 
-## Open MCT v1.0.0
-This represents a major overhaul of Open MCT with significant changes under the hood. We aim to maintain backward compatibility but if you do find compatibility issues, please let us know by filing an issue in this repository. If you are having major issues with v1.0.0 please check-out the v0.14.0 tag until we can resolve them for you.
+> [!IMPORTANT]
+> Open MCT is now running, and can be accessed by pointing a web browser at [http://localhost:8080/](http://localhost:8080/)
 
-If you are migrating an application built with Open MCT as a dependency to v1.0.0 from an earlier version, please refer to [our migration guide](https://nasa.github.io/openmct/documentation/migration-guide).
+Open MCT is built using [`npm`](http://npmjs.com/) and [`webpack`](https://webpack.js.org/).
 
 ## Documentation
 
@@ -45,14 +55,24 @@ The clearest examples for developing Open MCT plugins are in the
 [tutorials](https://github.com/nasa/openmct-tutorial) provided in
 our documentation.
 
-We want Open MCT to be as easy to use, install, run, and develop for as
-possible, and your feedback will help us get there! Feedback can be provided via [GitHub issues](https://github.com/nasa/openmct/issues/new/choose), [Starting a GitHub Discussion](https://github.com/nasa/openmct/discussions), or by emailing us at [arc-dl-openmct@mail.nasa.gov](mailto:arc-dl-openmct@mail.nasa.gov).
+> [!NOTE]
+> We want Open MCT to be as easy to use, install, run, and develop for as
+> possible, and your feedback will help us get there! 
+> Feedback can be provided via [GitHub issues](https://github.com/nasa/openmct/issues/new/choose), 
+> [Starting a GitHub Discussion](https://github.com/nasa/openmct/discussions), 
+> or by emailing us at [arc-dl-openmct@mail.nasa.gov](mailto:arc-dl-openmct@mail.nasa.gov).
 
-## Building Applications With Open MCT
+## Developing Applications With Open MCT
 
-Open MCT is built using [`npm`](http://npmjs.com/) and [`webpack`](https://webpack.js.org/).
+For more on developing with Open MCT, see our documentation for a guide on [Developing Applications with Open MCT](./API.md#starting-an-open-mct-application).
 
-See our documentation for a guide on [building Applications with Open MCT](https://github.com/nasa/openmct/blob/master/API.md#starting-an-open-mct-application).
+## Compatibility
+
+This is a fast moving project and we do our best to test and support the widest possible range of browsers, operating systems, and nodejs APIs. We have a published list of support available in our package.json's `browserslist` key.
+
+The project uses `nvm` to ensure the node and npm version used, is coherent in all projects. Install nvm (non-windows), [here](https://github.com/nvm-sh/nvm) or the windows equivalent [here](https://github.com/coreybutler/nvm-windows)
+
+If you encounter an issue with a particular browser, OS, or nodejs API, please file a [GitHub issue](https://github.com/nasa/openmct/issues/new/choose)
 
 ## Plugins
 
@@ -63,11 +83,14 @@ that is intended to be added or removed as a single unit.
 As well as providing an extension mechanism, most of the core Open MCT codebase is also 
 written as plugins.
 
-For information on writing plugins, please see [our API documentation](https://github.com/nasa/openmct/blob/master/API.md#plugins).
+For information on writing plugins, please see [our API documentation](./API.md#plugins).
 
 ## Tests
 
-Tests are written for [Jasmine 3](https://jasmine.github.io/api/3.1/global)
+Our automated test coverage comes in the form of unit, e2e, visual, performance, and security tests. 
+
+### Unit Tests
+Unit Tests are written for [Jasmine](https://jasmine.github.io/api/edge/global)
 and run by [Karma](http://karma-runner.github.io). To run:
 
 `npm test`
@@ -76,14 +99,35 @@ The test suite is configured to load any scripts ending with `Spec.js` found
 in the `src` hierarchy. Full configuration details are found in
 `karma.conf.js`. By convention, unit test scripts should be located
 alongside the units that they test; for example, `src/foo/Bar.js` would be
-tested by `src/foo/BarSpec.js`. (For legacy reasons, some existing tests may
-be located in separate `test` folders near the units they test, but the
-naming convention is otherwise the same.)
+tested by `src/foo/BarSpec.js`.
+
+### e2e, Visual, and Performance tests
+The e2e, Visual, and Performance tests are written for playwright and run by playwright's new test runner [@playwright/test](https://playwright.dev/). 
+
+To run the e2e tests which are part of every commit:
+
+`npm run test:e2e:stable`
+
+To run the visual test suite:
+
+`npm run test:e2e:visual`
+
+To run the performance tests:
+
+`npm run test:perf`
 
-### Test Reporting
+The test suite is configured to all tests located in `e2e/tests/` ending in `*.e2e.spec.js`. For more about the e2e test suite, please see the [README](./e2e/README.md)
 
-When `npm test` is run, test results will be written as HTML to
-`dist/reports/tests/`. Code coverage information is written to `dist/reports/coverage`.
+### Security Tests
+Each commit is analyzed for known security vulnerabilities using [CodeQL](https://codeql.github.com/docs/codeql-language-guides/codeql-library-for-javascript/). The list of CWE coverage items is available in the [CodeQL docs](https://codeql.github.com/codeql-query-help/javascript-cwe/). The CodeQL workflow is specified in the [CodeQL analysis file](./.github/workflows/codeql-analysis.yml) and the custom [CodeQL config](./.github/codeql/codeql-config.yml).
+
+### Test Reporting and Code Coverage
+
+Each test suite generates a report in CircleCI. For a complete overview of testing functionality, please see our [Circle CI Test Insights Dashboard](https://app.circleci.com/insights/github/nasa/openmct/workflows/the-nightly/overview?branch=master&reporting-window=last-30-days)
+
+Our code coverage is generated during the runtime of our unit, e2e, and visual tests. The combination of those reports is published to [codecov.io](https://app.codecov.io/gh/nasa/openmct/)
+
+For more on the specifics of our code coverage setup, [see](TESTING.md#code-coverage)
 
 # Glossary
 
@@ -124,3 +168,33 @@ documentation, may presume an understanding of these terms.
   user makes another such choice.)
 * _namespace_: A name used to identify a persistence store. A running open MCT 
 application could potentially use multiple persistence stores, with the 
+
+## Open MCT v2.0.0
+Support for our legacy bundle-based API, and the libraries that it was built on (like Angular 1.x), have now been removed entirely from this repository.
+
+For now if you have an Open MCT application that makes use of the legacy API, [a plugin](https://github.com/nasa/openmct-legacy-plugin) is provided that bootstraps the legacy bundling mechanism and API. This plugin will not be maintained over the long term however, and the legacy support plugin will not be tested for compatibility with future versions of Open MCT. It is provided for convenience only.
+
+### How do I know if I am using legacy API?
+You might still be using legacy API if your source code
+
+* Contains files named bundle.js, or bundle.json,
+* Makes calls to `openmct.$injector()`, or `openmct.$angular`,
+* Makes calls to `openmct.legacyRegistry`, `openmct.legacyExtension`, or `openmct.legacyBundle`.
+
+
+### What should I do if I am using legacy API?
+Please refer to [the modern Open MCT API](https://nasa.github.io/openmct/documentation/). Post any questions to the [Discussions section](https://github.com/nasa/openmct/discussions) of the Open MCT GitHub repository.
+
+## Related Repos
+
+> [!NOTE]
+> Although Open MCT functions as a standalone project, it is primarily an extensible framework intended to be used as a dependency with users' own plugins and packaging. Furthermore, Open MCT is intended to be used with an HTTP server such as Apache or Nginx. A great example of hosting Open MCT with Apache is `openmct-quickstart` and can be found in the table below.
+
+| Repository | Description |
+| --- | --- |
+| [openmct-tutorial](https://github.com/nasa/openmct-tutorial) | A great place for beginners to learn how to use and extend Open MCT. |
+| [openmct-quickstart](https://github.com/scottbell/openmct-quickstart) | A working example of Open MCT integrated with Apache HTTP server, YAMCS telemetry, and Couch DB for persistence.
+| [Open MCT YAMCS Plugin](https://github.com/akhenry/openmct-yamcs) | Plugin for integrating YAMCS telemetry and command server with Open MCT. |
+| [openmct-performance](https://github.com/unlikelyzero/openmct-performance) | Resources for performance testing Open MCT. |
+| [openmct-as-a-dependency](https://github.com/unlikelyzero/openmct-as-a-dependency) | An advanced guide for users on how to build, develop, and test Open MCT when it's used as a dependency. |
+
diff --git a/SECURITY.md b/SECURITY.md
new file mode 100644
index 00000000000..aba8fb1b4e1
--- /dev/null
+++ b/SECURITY.md
@@ -0,0 +1,31 @@
+# Security Policy
+
+The Open MCT team secures our code base using a combination of code review, dependency review, and periodic security reviews. Static analysis performed during automated verification additionally safeguards against common coding errors which may result in vulnerabilities.
+
+### Reporting a Vulnerability
+
+For general defects, please for a [Bug Report](https://github.com/nasa/openmct/issues/new/choose)
+
+To report a vulnerability for Open MCT please send a detailed report to [arc-dl-openmct](mailto:arc-dl-openmct@mail.nasa.gov). 
+
+See our [top-level security policy](https://github.com/nasa/openmct/security/policy) for additional information.
+
+### CodeQL and LGTM
+
+The [CodeQL GitHub Actions workflow](https://github.com/nasa/openmct/blob/master/.github/workflows/codeql-analysis.yml) is available to the public. To review the results, fork the repository and run the CodeQL workflow. 
+
+CodeQL is run for every pull-request in GitHub Actions.
+
+The project is also monitored by [LGTM](https://lgtm.com/projects/g/nasa/openmct/) and is available to public.
+
+### ESLint
+
+Static analysis is run for every push on the master branch and every pull request on all branches in Github Actions. 
+
+For more information about ESLint, visit https://eslint.org/.
+
+### General Support
+
+For additional support, please open a [Github Discussion](https://github.com/nasa/openmct/discussions). 
+
+If you wish to report a cybersecurity incident or concern, please contact the NASA Security Operations Center either by phone at 1-877-627-2732 or via email address soc@nasa.gov.
diff --git a/TESTING.md b/TESTING.md
new file mode 100644
index 00000000000..68e4e3ad1fa
--- /dev/null
+++ b/TESTING.md
@@ -0,0 +1,120 @@
+# Testing
+Open MCT Testing is iterating and improving at a rapid pace. This document serves to capture and index existing testing documentation and house documentation which no other obvious location as our testing evolves.
+
+## General Testing Process
+Documentation located [here](./docs/src/process/testing/plan.md)
+
+## Unit Testing
+Unit testing is essential part of our test strategy and complements our e2e testing strategy.
+
+#### Unit Test Guidelines
+* Unit Test specs should reside alongside the source code they test, not in a separate directory.
+* Unit test specs for plugins should be defined at the plugin level. Start with one test spec per plugin named pluginSpec.js, and as this test spec grows too big, break it up into multiple test specs that logically group related tests.
+* Unit tests for API or for utility functions and classes may be defined at a per-source file level.
+* Wherever possible only use and mock public API, builtin functions, and UI in your test specs. Do not directly invoke any private functions. ie. only call or mock functions and objects exposed by openmct.* (eg. openmct.telemetry, openmct.objectView, etc.), and builtin browser functions (fetch, requestAnimationFrame, setTimeout, etc.).
+* Where builtin functions have been mocked, be sure to clear them between tests.
+* Test at an appropriate level of isolation. Eg. 
+    * If you’re testing a view, you do not need to test the whole application UI, you can just fetch the view provider using the public API and render the view into an element that you have created. 
+    * You do not need to test that the view switcher works, there should be separate tests for that. 
+    * You do not need to test that telemetry providers work, you can mock openmct.telemetry.request() to feed test data to the view.
+    * Use your best judgement when deciding on appropriate scope.
+* Automated tests for plugins should start by actually installing the plugin being tested, and then test that installing the plugin adds the desired features and behavior to Open MCT, observing the above rules.
+* All variables used in a test spec, including any instances of the Open MCT API should be declared inside of an appropriate block scope (not at the root level of the source file), and should be initialized in the relevant beforeEach block. `beforeEach` is preferable to `beforeAll` to avoid leaking of state between tests.
+* A `afterEach` or `afterAll` should be used to do any clean up necessary to prevent leakage of state between test specs. This can happen when functions on `window` are wrapped, or when the URL is changed. [A convenience function](https://github.com/nasa/openmct/blob/master/src/utils/testing.js#L59) is provided for resetting the URL and clearing builtin spies between tests.
+
+#### Unit Test Examples
+* [Example of an automated test spec for an object view plugin](https://github.com/nasa/openmct/blob/master/src/plugins/telemetryTable/pluginSpec.js)
+* [Example of an automated test spec for API](https://github.com/nasa/openmct/blob/master/src/api/time/TimeAPISpec.js)
+
+#### Unit Testing Execution
+
+The unit tests can be executed in one of two ways:
+`npm run test` which runs the entire suite against headless chrome
+`npm run test:debug` for debugging the tests in realtime in an active chrome session.
+
+## e2e, performance, and visual testing
+Documentation located [here](./e2e/README.md)
+
+## Code Coverage
+
+It's up to the individual developer as to whether they want to add line coverage in the form of a unit test or e2e test.
+
+Line Code Coverage is generated by our unit tests and e2e tests, then combined by ([Codecov.io Flags](https://docs.codecov.com/docs/flags)), and finally reported in GitHub PRs by Codecov.io's PR Bot. This workflow gives a comprehensive (if flawed) view of line coverage.
+
+### Karma-istanbul
+
+Line coverage is generated by our `karma-coverage-istanbul-reporter` package as defined in our `karma.conf.js` file:
+
+```js
+    coverageIstanbulReporter: {
+      fixWebpackSourcePaths: true,
+      skipFilesWithNoCoverage: true,
+      dir: 'coverage/unit', //Sets coverage file to be consumed by codecov.io
+      reports: ['lcovonly']
+    },
+```
+
+Once the file is generated, it can be published to codecov with
+
+```json
+    "cov:unit:publish": "codecov --disable=gcov -f ./coverage/unit/lcov.info -F unit",
+```
+
+### e2e
+The e2e line coverage is a bit more complex than the karma implementation. This is the general sequence of events:
+
+1. Each e2e suite will start webpack with the ```npm run start:coverage``` command with config `webpack.coverage.js` and the `babel-plugin-istanbul` plugin to generate code coverage during e2e test execution using our custom [baseFixture](./baseFixtures.js). 
+1. During testcase execution, each e2e shard will generate its piece of the larger coverage suite. **This coverage file is not merged**. The raw coverage file is stored in a `.nyc_report` directory.
+1. [nyc](https://github.com/istanbuljs/nyc) converts this directory into a `lcov` file with the following command `npm run cov:e2e:report`
+1. Most of the tests are run in the '@stable' configuration and focus on chrome/ubuntu at a single resolution. This coverage is published to codecov with `npm run cov:e2e:stable:publish`.
+1. The rest of our coverage only appears when run against `@unstable` tests, persistent datastore (couchdb), non-ubuntu machines, and non-chrome browsers with the `npm run cov:e2e:full:publish` flag. Since this happens about once a day, we have leveraged codecov.io's carryforward flag to report on lines covered outside of each commit on an individual PR.
+
+
+### Limitations in our code coverage reporting
+Our code coverage implementation has some known limitations:
+- [Variability](https://github.com/nasa/openmct/issues/5811)
+- [Accuracy](https://github.com/nasa/openmct/issues/7015)
+- [Vue instrumentation gaps](https://github.com/nasa/openmct/issues/4973)
+
+## Troubleshooting CI
+The following is an evolving guide to troubleshoot CI and PR issues.
+
+### Github Checks failing
+There are a few reasons that your GitHub PR could be failing beyond simple failed tests.
+* Required Checks. We're leveraging required checks in GitHub so that we can quickly and precisely control what becomes and informational failure vs a hard requirement. The only way to determine the difference between a required vs information check is check for the `(Required)` emblem next to the step details in GitHub Checks.
+* Not all required checks are run per commit. You may need to manually trigger addition GitHub checks with a `pr:<label>` label added to your PR.
+
+### Flaky tests
+
+(CircleCI's test insights feature)[https://circleci.com/blog/introducing-test-insights-with-flaky-test-detection/] collects historical data about the individual test results for both unit and e2e tests. Note: only a 14 day window of flake is available.
+
+### Local=Pass and CI=Fail
+Although rare, it is possible that your test can pass locally but fail in CI.
+
+#### Busting Cache
+In certain circumstances, the CircleCI cache can become stale. In order to bust the cache, we've implemented a runtime boolean parameter in Circle CI creatively name BUST_CACHE. To execute:
+1. Navigate to the branch in Circle CI believed to have stale cache.
+1. Click on the 'Trigger Pipeline' button.
+1. Add Parameter -> Parameter Type = boolean , Name = BUST_CACHE ,Value = true
+1. Click 'Trigger Pipeline'
+
+#### Run tests in the same container as CI
+
+In extreme cases, tests can fail due to the constraints of running within a container. To execute tests in exactly the same way as run in CircleCI. 
+
+```sh
+// Replace {X.X.X} with the current Playwright version 
+// from our package.json or circleCI configuration file
+docker run --rm --network host --cpus="2" -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v{X.X.X}-focal /bin/bash
+npm install
+```
+
+At this point, you're running inside the same container and with 2 cpu cores. You can specify the unit tests:
+```sh
+npm run test
+```
+or e2e tests:
+
+```sh
+npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep <the testcase name>
+```
\ No newline at end of file
diff --git a/app.js b/app.js
deleted file mode 100644
index 5d98b5b964b..00000000000
--- a/app.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/*global require,process,console*/
-
-/**
- * Usage:
- *
- * npm install minimist express
- * node app.js [options]
- */
-
-
-const options = require('minimist')(process.argv.slice(2));
-const express = require('express');
-const app = express();
-const fs = require('fs');
-const request = require('request');
-
-// Defaults
-options.port = options.port || options.p || 8080;
-options.host = options.host || 'localhost';
-options.directory = options.directory || options.D || '.';
-
-// Show command line options
-if (options.help || options.h) {
-    console.log("\nUsage: node app.js [options]\n");
-    console.log("Options:");
-    console.log("  --help, -h               Show this message.");
-    console.log("  --port, -p <number>      Specify port.");
-    console.log("  --directory, -D <bundle>   Serve files from specified directory.");
-    console.log("");
-    process.exit(0);
-}
-
-app.disable('x-powered-by');
-
-app.use('/proxyUrl', function proxyRequest(req, res, next) {
-    console.log('Proxying request to: ', req.query.url);
-    req.pipe(request({
-        url: req.query.url,
-        strictSSL: false
-    }).on('error', next)).pipe(res);
-});
-
-const webpack = require('webpack');
-const webpackConfig = require('./webpack.config.js');
-webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
-webpackConfig.plugins.push(function() { this.plugin('watch-run', function(watching, callback) { console.log('Begin compile at ' + new Date()); callback(); }) });
-
-webpackConfig.entry.openmct = [
-    'webpack-hot-middleware/client?reload=true',
-    webpackConfig.entry.openmct
-];
-
-const compiler = webpack(webpackConfig);
-
-app.use(require('webpack-dev-middleware')(
-    compiler,
-    {
-        publicPath: '/dist',
-        logLevel: 'warn'
-    }
-));
-
-app.use(require('webpack-hot-middleware')(
-    compiler,
-    {
-
-    }
-));
-
-// Expose index.html for development users.
-app.get('/', function (req, res) {
-    fs.createReadStream('index.html').pipe(res);
-});
-
-// Finally, open the HTTP server and log the instance to the console
-app.listen(options.port, options.host, function() {
-    console.log('Open MCT application running at %s:%s', options.host, options.port)
-});
diff --git a/build-docs.sh b/build-docs.sh
index 6627f3d1768..27f7d278a44 100755
--- a/build-docs.sh
+++ b/build-docs.sh
@@ -1,7 +1,7 @@
 #!/bin/bash
 
 #*****************************************************************************
-#* Open MCT, Copyright (c) 2014-2021, United States Government
+#* Open MCT, Copyright (c) 2014-2024, United States Government
 #* as represented by the Administrator of the National Aeronautics and Space
 #* Administration. All rights reserved.
 #*
diff --git a/codecov.yml b/codecov.yml
new file mode 100644
index 00000000000..07da9fa4c35
--- /dev/null
+++ b/codecov.yml
@@ -0,0 +1,28 @@
+codecov:
+  require_ci_to_pass: false #This setting will update the bot regardless of whether or not tests pass
+
+coverage:
+  status:
+    project:
+      default:
+        informational: true
+    patch:
+      default:
+        informational: true
+  precision: 2
+  round: down
+  range: '66...100'
+
+flags:
+  unit:
+    carryforward: false
+  e2e-stable:
+    carryforward: false
+  e2e-full:
+    carryforward: true
+
+comment:
+  layout: 'diff,flags,files,footer'
+  behavior: default
+  require_changes: false
+  show_carryforward_flags: true
diff --git a/copyright-notice.html b/copyright-notice.html
index 4a5b0519edf..8271c9f9fab 100644
--- a/copyright-notice.html
+++ b/copyright-notice.html
@@ -1,5 +1,5 @@
 <!--
- Open MCT, Copyright (c) 2014-2021, United States Government
+ Open MCT, Copyright (c) 2014-2024, United States Government
  as represented by the Administrator of the National Aeronautics and Space
  Administration. All rights reserved.
 
diff --git a/copyright-notice.js b/copyright-notice.js
index ab665bbbf98..714183d315a 100644
--- a/copyright-notice.js
+++ b/copyright-notice.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
diff --git a/docs/footer.html b/docs/footer.html
deleted file mode 100644
index a6878b0cac6..00000000000
--- a/docs/footer.html
+++ /dev/null
@@ -1,3 +0,0 @@
-        <hr>
-    </body>
-</html>
diff --git a/docs/gendocs.js b/docs/gendocs.js
deleted file mode 100644
index 207a3e497f7..00000000000
--- a/docs/gendocs.js
+++ /dev/null
@@ -1,209 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/*global require,process,__dirname,GLOBAL*/
-/*jslint nomen: false */
-
-
-// Usage:
-//   node gendocs.js --in <source directory> --out <dest directory>
-
-var CONSTANTS = {
-        DIAGRAM_WIDTH: 800,
-        DIAGRAM_HEIGHT: 500
-    },
-    TOC_HEAD = "# Table of Contents";
-
-GLOBAL.window = GLOBAL.window ||  GLOBAL; // nomnoml expects window to be defined
-(function () {
-    "use strict";
-
-    var fs = require("fs"),
-        mkdirp = require("mkdirp"),
-        path = require("path"),
-        glob = require("glob"),
-        marked = require("marked"),
-        split = require("split"),
-        stream = require("stream"),
-        nomnoml = require('nomnoml'),
-        toc = require("markdown-toc"),
-        Canvas = require('canvas'),
-        header = fs.readFileSync(path.resolve(__dirname, 'header.html')),
-        footer = fs.readFileSync(path.resolve(__dirname, 'footer.html')),
-        options = require("minimist")(process.argv.slice(2));
-
-    // Convert from nomnoml source to a target PNG file.
-    function renderNomnoml(source, target) {
-        var canvas =
-            new Canvas(CONSTANTS.DIAGRAM_WIDTH, CONSTANTS.DIAGRAM_HEIGHT);
-        nomnoml.draw(canvas, source, 1.0);
-        canvas.pngStream().pipe(fs.createWriteStream(target));
-    }
-
-    // Stream transform.
-    // Pulls out nomnoml diagrams from fenced code blocks and renders them
-    // as PNG files in the output directory, prefixed with a provided name.
-    // The fenced code blocks will be replaced with Markdown in the
-    // output of this stream.
-    function nomnomlifier(outputDirectory, prefix) {
-        var transform = new stream.Transform({ objectMode: true }),
-            isBuilding = false,
-            counter = 1,
-            outputPath,
-            source = "";
-
-        transform._transform = function (chunk, encoding, done) {
-            if (!isBuilding) {
-                if (chunk.trim().indexOf("```nomnoml") === 0) {
-                    var outputFilename = prefix + '-' + counter + '.png';
-                    outputPath = path.join(outputDirectory, outputFilename);
-                    this.push([
-                        "\n![Diagram ",
-                        counter,
-                        "](",
-                        outputFilename,
-                        ")\n\n"
-                    ].join(""));
-                    isBuilding = true;
-                    source = "";
-                    counter += 1;
-                } else {
-                    // Otherwise, pass through
-                    this.push(chunk + '\n');
-                }
-            } else {
-                if (chunk.trim() === "```") {
-                    // End nomnoml
-                    renderNomnoml(source, outputPath);
-                    isBuilding = false;
-                } else {
-                    source += chunk + '\n';
-                }
-            }
-            done();
-        };
-
-        return transform;
-    }
-
-    // Convert from Github-flavored Markdown to HTML
-    function gfmifier(renderTOC) {
-        var transform = new stream.Transform({ objectMode: true }),
-            markdown = "";
-        transform._transform = function (chunk, encoding, done) {
-            markdown += chunk;
-            done();
-        };
-        transform._flush = function (done) {
-            if (renderTOC){
-                // Prepend table of contents
-                markdown =
-                    [ TOC_HEAD, toc(markdown).content, "", markdown ].join("\n");
-            }
-            this.push(header);
-            this.push(marked(markdown));
-            this.push(footer);
-            done();
-        };
-        return transform;
-    }
-
-    // Custom renderer for marked; converts relative links from md to html,
-    // and makes headings linkable.
-    function CustomRenderer() {
-        var renderer = new marked.Renderer(),
-            customRenderer = Object.create(renderer);
-        customRenderer.heading = function (text, level) {
-            var escapedText = (text || "").trim().toLowerCase().replace(/\W/g, "-"),
-                aOpen = "<a name=\"" + escapedText + "\" href=\"#" + escapedText + "\">",
-                aClose = "</a>";
-            return aOpen + renderer.heading.apply(renderer, arguments) + aClose;
-        };
-        // Change links to .md files to .html
-        customRenderer.link = function (href, title, text) {
-            // ...but only if they look like relative paths
-            return (href || "").indexOf(":") === -1 && href[0] !== "/" ?
-                    renderer.link(href.replace(/\.md/, ".html"), title, text) :
-                    renderer.link.apply(renderer, arguments);
-        };
-        return customRenderer;
-    }
-
-    options['in'] = options['in'] || options.i;
-    options.out = options.out || options.o;
-
-    marked.setOptions({
-        renderer: new CustomRenderer(),
-        gfm: true,
-        tables: true,
-        breaks: false,
-        pedantic: false,
-        sanitize: true,
-        smartLists: true,
-        smartypants: false
-    });
-
-    // Convert all markdown files.
-    // First, pull out nomnoml diagrams.
-    // Then, convert remaining Markdown to HTML.
-    glob(options['in'] + "/**/*.md", {}, function (err, files) {
-        files.forEach(function (file) {
-            var destination = file.replace(options['in'], options.out)
-                .replace(/md$/, "html"),
-                destPath = path.dirname(destination),
-                prefix = path.basename(destination).replace(/\.html$/, ""),
-                //Determine whether TOC should be rendered for this file based
-                //on regex provided as command line option
-                renderTOC = file.match(options['suppress-toc'] || "") === null;
-
-            mkdirp(destPath, function (err) {
-                fs.createReadStream(file, { encoding: 'utf8' })
-                    .pipe(split())
-                    .pipe(nomnomlifier(destPath, prefix))
-                    .pipe(gfmifier(renderTOC))
-                    .pipe(fs.createWriteStream(destination, {
-                        encoding: 'utf8'
-                    }));
-            });
-        });
-    });
-
-    // Also copy over all HTML, CSS, or PNG files
-    glob(options['in'] + "/**/*.@(html|css|png)", {}, function (err, files) {
-        files.forEach(function (file) {
-            var destination = file.replace(options['in'], options.out),
-                destPath = path.dirname(destination),
-                streamOptions = {};
-            if (file.match(/png$/)) {
-                streamOptions.encoding = null;
-            } else {
-                streamOptions.encoding = 'utf8';
-            }
-
-            mkdirp(destPath, function (err) {
-                fs.createReadStream(file, streamOptions)
-                    .pipe(fs.createWriteStream(destination, streamOptions));
-            });
-        });
-    });
-
-}());
diff --git a/docs/header.html b/docs/header.html
deleted file mode 100644
index c945996f4ac..00000000000
--- a/docs/header.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<html>
-    <head>
-        <link rel="stylesheet"
-              href="//nasa.github.io/openmct/static/res/css/styles.css">
-        <link rel="stylesheet"
-              href="//nasa.github.io/openmct/static/res/css/documentation.css">
-    </head>
-    <body>
-
diff --git a/docs/src/architecture/framework.md b/docs/src/architecture/framework.md
deleted file mode 100644
index 78adb981587..00000000000
--- a/docs/src/architecture/framework.md
+++ /dev/null
@@ -1,232 +0,0 @@
-# Overview
-
-The framework layer's most basic responsibility is allowing individual
-software components to communicate. The software components it recognizes
-are:
-
-* _Extensions_: Individual units of functionality that can be added to
-  or removed from Open MCT. _Extension categories_ distinguish what
-  type of functionality is being added/removed.
-* _Bundles_: A grouping of related extensions
-  (named after an analogous concept from [OSGi](http://www.osgi.org/))
-  that may be added or removed as a group.
-
-The framework layer operates by taking a set of active bundles, and
-exposing extensions to one another as-needed, using
-[dependency injection](https://en.wikipedia.org/wiki/Dependency_injection).
-Extensions are responsible for declaring their dependencies in a
-manner which the framework layer can understand.
-
-```nomnoml
-#direction: down
-[Open MCT|
-  [Dependency injection framework]-->[Platform bundle #1]
-  [Dependency injection framework]-->[Platform bundle #2]
-  [Dependency injection framework]-->[Plugin bundle #1]
-  [Dependency injection framework]-->[Plugin bundle #2]
-  [Platform bundle #1|[Extensions]]
-  [Platform bundle #2|[Extensions]]
-  [Plugin bundle #1|[Extensions]]
-  [Plugin bundle #2|[Extensions]]
-  [Platform bundle #1]<->[Platform bundle #2]
-  [Plugin bundle #1]<->[Platform bundle #2]
-  [Plugin bundle #1]<->[Plugin bundle #2]
-]
-```
-
-The "dependency injection framework" in this case is
-[AngularJS](https://angularjs.org/). Open MCT's framework layer
-is really just a thin wrapper over Angular that recognizes the
-concepts of bundles and extensions (as declared in JSON files) and
-registering extensions with Angular. It additionally acts as a
-mediator between Angular and [RequireJS](http://requirejs.org/),
-which is used to load JavaScript sources which implement
-extensions.
-
-```nomnoml
-[Framework layer|
-  [AngularJS]<-[Framework Component]
-  [RequireJS]<-[Framework Component]
-  [Framework Component]1o-*[Bundles]
-]
-```
-
-It is worth noting that _no other components_ are "aware" of the
-framework component directly; Angular and Require are _used by_ the
-framework components, and extensions in various bundles will have
-their dependencies satisfied by Angular as a consequence of registration
-activities which were performed by the framework component.
-
-
-## Application Initialization
-
-The framework component initializes an Open MCT application following
-a simple sequence of steps.
-
-```nomnoml
-[<start> Start]->[<state> Load bundles.json]
-[Load bundles.json]->[<state> Load bundle.json files]
-[Load bundle.json files]->[<state> Resolve implementations]
-[Resolve implementations]->[<state> Register with Angular]
-[Register with Angular]->[<state> Bootstrap application]
-[Bootstrap application]->[<end> End]
-```
-
-1. __Loading bundles.json.__ A file named `bundles.json` is loaded to determine
-   which bundles to load. Bundles are given in this file as relative paths
-   which point to bundle directories.
-2. __Load bundle.json files.__ Individual bundle definitions are loaded; a
-   `bundle.json` file is expected in each bundle directory.
-2. __Resolving implementations.__ Any scripts which provide implementations for
-   extensions exposed by bundles are loaded, using RequireJS.
-3. __Register with Angular.__ Resolved extensions are registered with Angular,
-   such that they can be used by the application at run-time. This stage
-   includes both registration of Angular built-ins (directives, controllers,
-   routes, constants, and services) as well as registration of non-Angular
-   extensions.
-4. __Bootstrap application.__ Once all extensions have been registered,
-   the Angular application
-   [is bootstrapped](https://docs.angularjs.org/guide/bootstrap).
-
-## Architectural Paradigm
-
-```nomnoml
-[Extension]
-[Extension]o->[Dependency #1]
-[Extension]o->[Dependency #2]
-[Extension]o->[Dependency #3]
-```
-
-Open MCT's architecture relies on a simple premise: Individual units
-(extensions) only have access to the dependencies they declare that they
-need, and they acquire references to these dependencies via dependency
-injection. This has several desirable traits:
-
-* Programming to an interface is enforced. Any given dependency can be
-  swapped out for something which exposes an equivalent interface. This
-  improves flexibility against refactoring, simplifies testing, and
-  provides a common mechanism for extension and reconfiguration.
-* The dependencies of a unit must be explicitly defined. This means that
-  it can be easily determined what a given unit's role is within the
-  larger system, in terms of what other components it will interact with.
-  It also helps to enforce good separation of concerns: When a set of
-  declared dependencies becomes long it is obvious, and this is usually
-  a sign that a given unit is involved in too many concerns and should
-  be refactored into smaller pieces.
-* Individual units do not need to be aware of the framework; they need
-  only be aware of the interfaces to the components they specifically
-  use. This avoids introducing a ubiquitous dependency upon the framework
-  layer itself; it is plausible to modify or replace the framework
-  without making changes to individual software components which run upon
-  the framework.
-
-A drawback to this approach is that it makes it difficult to define
-"the architecture" of Open MCT, in terms of describing the specific
-units that interact at run-time. The run-time architecture is determined
-by the framework as the consequence of wiring together dependencies.
-As such, the specific architecture of any given application built on
-Open MCT can look very different.
-
-Keeping that in mind, there are a few useful patterns supported by the
-framework that are useful to keep in mind.
-
-The specific service infrastructure provided by the platform is described
-in the [Platform Architecture](platform.md).
-
-## Extension Categories
-
-One of the capabilities that the framework component layers on top of
-AngularJS is support for many-to-one dependencies. That is, a specific
-extension may declare a dependency to _all extensions of a specific
-category_, instead of being limited to declaring specific dependencies.
-
-```nomnoml
-#direction: right
-[Specific Extension] 1 o-> * [Extension of Some Category]
-```
-
-This is useful for introducing specific extension points to an application.
-Some unit of software will depend upon all extensions of a given category
-and integrate their behavior into the system in some fashion; plugin authors
-can then add new extensions of that category to augment existing behaviors.
-
-Some developers may be familiar with the use of registries to achieve
-similar characteristics. This approach is similar, except that the registry
-is effectively implicit whenever a new extension category is used or
-depended-upon. This has some advantages over a more straightforward
-registry-based approach:
-
-* These many-to-one relationships are expressed as dependencies; an
-  extension category is registered as having dependencies on all individual
-  extensions of this category. This avoids ordering issues that may occur
-  with more conventional registries, which may be observed before all
-  dependencies are resolved.
-* The need for service registries of specific types is removed, reducing
-  the number of interfaces to manage within the system. Groups of
-  extensions are provided as arrays.
-
-## Composite Services
-
-Composite services (registered via extension category `components`) are
-a pattern supported by the framework. These allow service instances to
-be built from multiple components at run-time; support for this pattern
-allows additional bundles to introduce or modify behavior associated
-with these services without modifying or replacing original service
-instances.
-
-```nomnoml
-#direction: down
-[<abstract> FooService]
-[FooDecorator #1]--:>[FooService]
-[FooDecorator #n]--:>[FooService]
-[FooAggregator]--:>[FooService]
-[FooProvider #1]--:>[FooService]
-[FooProvider #n]--:>[FooService]
-
-[FooDecorator #1]o->[<state> ...decorators...]
-[...decorators...]o->[FooDecorator #n]
-[FooDecorator #n]o->[FooAggregator]
-[FooAggregator]o->[FooProvider #1]
-[FooAggregator]o->[<state> ...providers...]
-[FooAggregator]o->[FooProvider #n]
-
-[FooDecorator #1]--[<note> Exposed as fooService]
-```
-
-In this pattern, components all implement an interface which is
-standardized for that service. Components additionally declare
-that they belong to one of three types:
-
-* __Providers.__ A provider actually implements the behavior
-  (satisfies the contract) for that kind of service. For instance,
-  if a service is responsible for looking up documents by an identifier,
-  one provider may do so by querying a database, while another may
-  do so by reading a static JSON document. From the outside, either
-  provider would look the same (they expose the same interface) and
-  they could be swapped out easily.
-* __Aggregator.__ An aggregator takes many providers and makes them
-  behave as one. Again, this implements the same interface as an
-  individual provider, so users of the service do not need to be
-  concerned about the difference between consulting many providers
-  and consulting one. Continuing with the example of a service that
-  looks up documents by identifiers, an aggregator here might consult
-  all providers, and return any document is found (perhaps picking one
-  over the other or merging documents if there are multiple matches.)
-* __Decorators.__ A decorator exposes the same interface as other
-  components, but instead of fully implementing the behavior associated
-  with that kind of service, it only acts as an intermediary, delegating
-  the actual behavior to a different component. Decorators may transform
-  inputs or outputs, or initiate some side effects associated with a
-  service. This is useful if certain common behavior associated with a
-  service (caching, for instance) may be useful across many different
-  implementations of that same service.
-
-The framework will register extensions in this category such that an
-aggregator will depend on all of its providers, and decorators will
-depend upon on one another in a chain. The result of this compositing step
-(the last decorator, if any; otherwise the aggregator, if any;
-otherwise a single provider) will be exposed as a single service that
-other extensions can acquire through dependency injection. Because all
-components of the same type of service expose the same interface, users
-of that service do not need to be aware that they are talking to an
-aggregator or a provider, for instance.
diff --git a/docs/src/architecture/index.md b/docs/src/architecture/index.md
deleted file mode 100644
index 6f2fbcfcef4..00000000000
--- a/docs/src/architecture/index.md
+++ /dev/null
@@ -1,76 +0,0 @@
-# Introduction
-
-The purpose of this document is to familiarize developers with the
-overall architecture of Open MCT.
-
-The target audience includes:
-
-* _Platform maintainers_: Individuals involved in developing,
-  extending, and maintaining capabilities of the platform.
-* _Integration developers_: Individuals tasked with integrated
-  Open MCT into a larger system, who need to understand
-  its inner workings sufficiently to complete this integration.
-
-As the focus of this document is on architecture, whenever possible
-implementation details (such as relevant API or JSON syntax) have been
-omitted. These details may be found in the developer guide.
-
-# Overview
-
-Open MCT is client software: It runs in a web browser and
-provides a user interface, while communicating with various
-server-side resources through browser APIs.
-
-```nomnoml
-#direction: right
-[Client|[Browser|[Open MCT]->[Browser APIs]]]
-[Server|[Web services]]
-[Client]<->[Server]
-```
-
-While Open MCT can be configured to run as a standalone client,
-this is rarely very useful. Instead, it is intended to be used as a
-display and interaction layer for information obtained from a
-variety of back-end services. Doing so requires authoring or utilizing
-adapter plugins which allow Open MCT to interact with these services.
-
-Typically, the pattern here is to provide a known interface that
-Open MCT can utilize, and implement it such that it interacts with
-whatever back-end provides the relevant information.
-Examples of back-ends that can be utilized in this fashion include
-databases for the persistence of user-created objects, or sources of
-telemetry data.
-
-## Software Architecture
-
-The simplest overview of Open MCT is to look at it as a "layered"
-architecture, where each layer more clearly specifies the behavior
-of the software.
-
-```nomnoml
-#direction: down
-[Open MCT|
-  [Platform]<->[Application]
-  [Framework]->[Application]
-  [Framework]->[Platform]
-]
-```
-
-These layers are:
-
-* [_Framework_](framework.md): The framework layer is responsible for
-  managing the interactions between application components. It has no
-  application-specific knowledge; at this layer, we have only
-  established an abstraction by which different software components
-  may communicate and/or interact.
-* [_Platform_](platform.md): The platform layer defines the general look,
-  feel, and behavior of Open MCT. This includes user-facing components like
-  Browse mode and Edit mode, as well as underlying elements of the
-  information model and the general service infrastructure.
-* _Application_: The application layer defines specific features of
-  an application built on Open MCT. This includes adapters to
-  specific back-ends, new types of things for users to create, and
-  new ways of visualizing objects within the system. This layer
-  typically consists of a mix of custom plug-ins to Open MCT,
-  as well as optional features (such as Plot view) included alongside
-  the platform.
diff --git a/docs/src/architecture/platform.md b/docs/src/architecture/platform.md
deleted file mode 100644
index 48ceebb9efa..00000000000
--- a/docs/src/architecture/platform.md
+++ /dev/null
@@ -1,726 +0,0 @@
-# Overview
-
-The Open MCT platform utilizes the [framework layer](framework.md)
-to provide an extensible baseline for applications which includes:
-
-* A common user interface (and user interface paradigm) for dealing with
-  domain objects of various sorts.
-* A variety of extension points for introducing new functionality
-  of various kinds within the context of the common user interface.
-* A service infrastructure to support building additional components.
-
-## Platform Architecture
-
-While the framework provides a more general architectural paradigm for
-building application, the platform adds more specificity by defining
-additional extension types and allowing for integration with back end
-components.
-
-The run-time architecture of an Open MCT application can be categorized
-into certain high-level tiers:
-
-```nomnoml
-[DOM]->[<state> AngularJS]
-[AngularJS]->[Presentation Layer]
-[Presentation Layer]->[Information Model]
-[Presentation Layer]->[Service Infrastructure]
-[Information Model]->[Service Infrastructure]
-[Service Infrastructure]->[<state> Browser APIs]
-[Browser APIs]->[Back-end]
-```
-
-Applications built using Open MCT may add or configure functionality
-in __any of these tiers__.
-
-* _DOM_: The rendered HTML document, composed from HTML templates which
-  have been processed by AngularJS and will be updated by AngularJS
-  to reflect changes from the presentation layer. User interactions
-  are initiated from here and invoke behavior in the presentation layer. HTML 
-  templates are written in Angular’s template syntax; see the [Angular documentation on templates](https://docs.angularjs.org/guide/templates)​. 
-  These describe the page as actually seen by the user. Conceptually, 
-  stylesheets (controlling the look-and-feel of the rendered templates) belong 
-  in this grouping as well. 
-* [_Presentation layer_](#presentation-layer): The presentation layer
-  is responsible for updating (and providing information to update)
-  the displayed state of the application. The presentation layer consists
-  primarily of _controllers_ and _directives_. The presentation layer is
-  concerned with inspecting the information model and preparing it for
-  display.
-* [_Information model_](#information-model): ​Provides a common (within Open MCT 
-  Web) set of interfaces for dealing with “things” ­ domain objects ­ within the 
-  system. User-facing concerns in a Open MCT Web application are expressed as 
-  domain objects; examples include folders (used to organize other domain 
-  objects), layouts (used to build displays), or telemetry points (used as 
-  handles for streams of remote measurements.) These domain objects expose a 
-  common set of interfaces to allow reusable user interfaces to be built in the 
-  presentation and template tiers; the specifics of these behaviors are then 
-  mapped to interactions with underlying services. 
-* [_Service infrastructure_](#service-infrastructure): The service
-  infrastructure is responsible for providing the underlying general
-  functionality needed to support the information model. This includes
-  exposing underlying sets of extensions and mediating with the
-  back-end.
-* _Back-end_: The back-end is out of the scope of Open MCT, except
-  for the interfaces which are utilized by adapters participating in the
-  service infrastructure. Includes the underlying persistence stores, telemetry 
-  streams, and so forth which the Open MCT Web client is being used to interact 
-  with.
-
-## Application Start-up
-
-Once the
-[application has been initialized](Framework.md#application-initialization)
-Open MCT primarily operates in an event-driven paradigm; various
-events (mouse clicks, timers firing, receiving responses to XHRs) trigger
-the invocation of functions, typically in the presentation layer for
-user actions or in the service infrastructure for server responses.
-
-The "main point of entry" into an initialized Open MCT application
-is effectively the
-[route](https://docs.angularjs.org/api/ngRoute/service/$route#example)
-which is associated with the URL used to access Open MCT (or a
-default route.) This route will be associated with a template which
-will be displayed; this template will include references to directives
-and controllers which will be interpreted by Angular and used to
-initialize the state of the display in a manner which is backed by
-both the information model and the service infrastructure.
-
-```nomnoml
-[<start> Start]->[<state> page load]
-[page load]->[<state> route selection]
-[route selection]->[<state> compile, display template]
-[compile, display template]->[Template]
-[Template]->[<state> use Controllers]
-[Template]->[<state> use Directives]
-[use Controllers]->[Controllers]
-[use Directives]->[Directives]
-[Controllers]->[<state> consult information model]
-[consult information model]->[<state> expose data]
-[expose data]->[Angular]
-[Angular]->[<state> update display]
-[Directives]->[<state> add event listeners]
-[Directives]->[<state> update display]
-[add event listeners]->[<end> End]
-[update display]->[<end> End]
-```
-
-
-# Presentation Layer
-
-The presentation layer of Open MCT is responsible for providing
-information to display within templates, and for handling interactions
-which are initiated from templated DOM elements. AngularJS acts as
-an intermediary between the web page as the user sees it, and the
-presentation layer implemented as Open MCT extensions.
-
-```nomnoml
-[Presentation Layer|
-  [Angular built-ins|
-    [routes]
-    [controllers]
-    [directives]
-    [templates]
-  ]
-  [Domain object representation|
-    [views]
-    [representations]
-    [representers]
-    [gestures]
-  ]
-]
-```
-
-## Angular built-ins
-
-Several extension categories in the presentation layer map directly
-to primitives from AngularJS:
-
-* [_Controllers_](https://docs.angularjs.org/guide/controller) provide
-  data to templates, and expose functionality that can be called from
-  templates.
-* [_Directives_](https://docs.angularjs.org/guide/directive) effectively
-  extend HTML to provide custom behavior associated with specific
-  attributes and tags.
-* [_Routes_](https://docs.angularjs.org/api/ngRoute/service/$route#example)
-  are used to associate specific URLs (including the fragment identifier)
-  with specific application states. (In Open MCT, these are used to
-  describe the mode of usage - e.g. browse or edit - as well as to
-  identify the object being used.)
-* [_Templates_](https://docs.angularjs.org/guide/templates) are partial
-  HTML documents that will be rendered and kept up-to-date by AngularJS.
-  Open MCT introduces a custom `mct-include` directive which acts
-  as a wrapper around `ng-include` to allow templates to be referred
-  to by symbolic names.
-
-## Domain object representation
-
-The remaining extension categories in the presentation layer are specific
-to displaying domain objects.
-
-* _Representations_ are templates that will be used to display
-  domain objects in specific ways (e.g. "as a tree node.")
-* _Views_ are representations which are exposed to the user as options
-  for displaying domain objects.
-* _Representers_ are extensions which modify or augment the process
-  of representing domain objects generally (e.g. by attaching
-  gestures to them.)
-* _Gestures_ provide associations between specific user actions
-  (expressed as DOM events) and resulting behavior upon domain objects
-  (typically expressed as members of the `actions` extension category)
-  that can be reused across domain objects. For instance, `drag` and
-  `drop` are both gestures associated with using drag-and-drop to
-  modify the composition of domain objects by interacting with their
-  representations.
-
-# Information Model
-
-```nomnoml
-#direction: right
-[Information Model|
-  [DomainObject|
-    getId() : string
-    getModel() : object
-    getCapability(key : string) : Capability
-    hasCapability(key : string) : boolean
-    useCapability(key : string, args...) : *
-  ]
-  [DomainObject] 1 +- 1 [Model]
-  [DomainObject] 1 o- * [Capability]
-]
-```
-
-Domain objects are the most fundamental component of Open MCT's
-information model. A domain object is some distinct thing relevant to a
-user's work flow, such as a telemetry channel, display, or similar.
-Open MCT is a tool for viewing, browsing, manipulating, and otherwise
-interacting with a graph of domain objects.
-
-A domain object should be conceived of as the union of the following:
-
-* _Identifier_: A machine-readable string that uniquely identifies the
-  domain object within this application instance.
-* _Model_: The persistent state of the domain object. A domain object's
-  model is a JavaScript object that can be losslessly converted to JSON.
-* _Capabilities_: Dynamic behavior associated with the domain object.
-  Capabilities are JavaScript objects which provide additional methods
-  for interacting with the domain objects which expose those capabilities.
-  Not all domain objects expose all capabilities. The interface exposed
-  by any given capability will depend on its type (as identified
-  by the `key` argument.) For instance, a `persistence` capability
-  has a different interface from a `telemetry` capability. Using
-  capabilities requires some prior knowledge of their interface.
-
-## Capabilities and Services
-
-```nomnoml
-#direction: right
-[DomainObject]o-[FooCapability]
-[FooCapability]o-[FooService]
-[FooService]o-[foos]
-```
-
-At run-time, the user is primarily concerned with interacting with
-domain objects. These interactions are ultimately supported via back-end
-services, but to allow customization per-object, these are often mediated
-by capabilities.
-
-A common pattern that emerges in the Open MCT Platform is as follows:
-
-* A `DomainObject` has some particular behavior that will be supported
-  by a service.
-* A `Capability` of that domain object will define that behavior,
-  _for that domain object_, supported by a service.
-* A `Service` utilized by that capability will perform the actual behavior.
-* An extension category will be utilized by that capability to determine
-  the set of possible behaviors.
-
-Concrete examples of capabilities which follow this pattern
-(or a subset of this pattern) include:
-
-```nomnoml
-#direction: right
-[DomainObject]1 o- *[Capability]
-[Capability]<:--[TypeCapability]
-[Capability]<:--[ActionCapability]
-[Capability]<:--[PersistenceCapability]
-[Capability]<:--[TelemetryCapability]
-[TypeCapability]o-[TypeService]
-[TypeService]o-[types]
-[ActionCapability]o-[ActionService]
-[ActionService]o-[actions]
-[PersistenceCapability]o-[PersistenceService]
-[TelemetryCapability]o-[TelemetryService]
-```
-
-# Service Infrastructure
-
-Most services exposed by the Open MCT platform follow the
-[composite services](Framework.md#composite-services) to permit
-a higher degree of flexibility in how a service can be modified
-or customized for specific applications.
-
-To simplify usage for plugin developers, the platform also usually
-includes a provider implementation for these service type that consumes
-some extension category. For instance, an `ActionService` provider is
-included which depends upon extension category `actions`, and exposes
-all actions declared as such to the system. As such, plugin developers
-can simply implement the new actions they wish to be made available without
-worrying about the details of composite services or implementing a new
-`ActionService` provider; however, the ability to implement a new provider
-remains useful when the expressive power of individual extensions is
-insufficient.
-
-```nomnoml
-[ Service Infrastructure |
-  [ObjectService]->[ModelService]
-  [ModelService]->[PersistenceService]
-  [ObjectService]->[CapabilityService]
-  [CapabilityService]->[capabilities]
-  [capabilities]->[TelemetryService]
-  [capabilities]->[PersistenceService]
-  [capabilities]->[TypeService]
-  [capabilities]->[ActionService]
-  [capabilities]->[ViewService]
-  [PersistenceService]->[<database> Document store]
-  [TelemetryService]->[<database> Telemetry source]
-  [ActionService]->[actions]
-  [ActionService]->[PolicyService]
-  [ViewService]->[PolicyService]
-  [ViewService]->[views]
-  [PolicyService]->[policies]
-  [TypeService]->[types]
-]
-```
-
-A short summary of the roles of these services:
-
-* _[ObjectService](#object-service)_: Allows retrieval of domain objects by
-  their identifiers; in practice, often the main point of entry into the
-  [information model](#information-model).
-* _[ModelService](#model-service)_: Provides domain object models, retrieved
-  by their identifier.
-* _[CapabilityService](#capability-service)_: Provides capabilities, as they
-  apply to specific domain objects (as judged from their model.)
-* _[TelemetryService](#telemetry-service)_: Provides access to historical
-  and real-time telemetry data.
-* _[PersistenceService](#persistence-service)_: Provides the ability to
-  store and retrieve documents (such as domain object models.)
-* _[ActionService](#action-service)_: Provides distinct user actions that
-  can take place within the system (typically, upon or using domain objects.)
-* _[ViewService](#view-service)_: Provides views for domain objects. A view
-  is a user-selectable representation of a domain object (in practice, an
-  HTML template.)
-* _[PolicyService](#policy-service)_: Handles decisions about which
-  behavior are allowed within certain specific contexts.
-* _[TypeService](#type-service)_: Provides information to distinguish
-  different types of domain objects from one another within the system.
-
-## Object Service
-
-```nomnoml
-#direction: right
-[<abstract> ObjectService|
-  getObjects(ids : Array.<string>) : Promise.<object.<string, DomainObject>>
-]
-[DomainObjectProvider]--:>[ObjectService]
-[DomainObjectProvider]o-[ModelService]
-[DomainObjectProvider]o-[CapabilityService]
-```
-
-As domain objects are central to Open MCT's information model,
-acquiring domain objects is equally important.
-
-```nomnoml
-#direction: right
-[<start> Start]->[<state> Look up models]
-[<state> Look up models]->[<state> Look up capabilities]
-[<state> Look up capabilities]->[<state> Instantiate DomainObject]
-[<state> Instantiate DomainObject]->[<end> End]
-```
-
-Open MCT includes an implementation of an `ObjectService` which
-satisfies this capability by:
-
-* Consulting the [Model Service](#model-service) to acquire domain object
-  models by identifier.
-* Passing these models to a [Capability Service](#capability-service) to
-  determine which capabilities are applicable.
-* Combining these results together as [DomainObject](#information-model)
-  instances.
-
-## Model Service
-
-```nomnoml
-#direction: down
-[<abstract> ModelService|
-  getModels(ids : Array.<string>) : Promise.<object.<string, object>>
-]
-[StaticModelProvider]--:>[ModelService]
-[RootModelProvider]--:>[ModelService]
-[PersistedModelProvider]--:>[ModelService]
-[ModelAggregator]--:>[ModelService]
-[CachingModelDecorator]--:>[ModelService]
-[MissingModelDecorator]--:>[ModelService]
-
-[MissingModelDecorator]o-[CachingModelDecorator]
-[CachingModelDecorator]o-[ModelAggregator]
-[ModelAggregator]o-[StaticModelProvider]
-[ModelAggregator]o-[RootModelProvider]
-[ModelAggregator]o-[PersistedModelProvider]
-
-[PersistedModelProvider]o-[PersistenceService]
-[RootModelProvider]o-[roots]
-[StaticModelProvider]o-[models]
-```
-
-The platform's model service is responsible for providing domain object
-models (effectively, JSON documents describing the persistent state
-associated with domain objects.) These are retrieved by identifier.
-
-The platform includes multiple components of this variety:
-
-* `PersistedModelProvider` looks up domain object models from
-  a persistence store (the [`PersistenceService`](#persistence-service));
-  this is how user-created and user-modified
-  domain object models are retrieved.
-* `RootModelProvider` provides domain object models that have been
-  declared via the `roots` extension category. These will appear at the
-  top level of the tree hierarchy in the user interface.
-* `StaticModelProvider` provides domain object models that have been
-  declared via the `models` extension category. This is useful for
-  allowing plugins to expose new domain objects declaratively.
-* `ModelAggregator` merges together the results from multiple providers.
-  If multiple providers return models for the same domain object,
-  the most recently modified version (as determined by the `modified`
-  property of the model) is chosen.
-* `CachingModelDecorator` caches model instances in memory. This
-  ensures that only a single instance of a domain object model is
-  present at any given time within the application, and prevent
-  redundant retrievals.
-* `MissingModelDecorator` adds in placeholders when no providers
-  have returned domain object models for a specific identifier. This
-  allows the user to easily see that something was expected to be
-  present, but wasn't.
-
-## Capability Service
-
-```nomnoml
-#direction: down
-[<abstract> CapabilityService|
-  getCapabilities(model : object) : object.<string, Function>
-]
-[CoreCapabilityProvider]--:>[CapabilityService]
-[QueuingPersistenceCapabilityDecorator]--:>[CapabilityService]
-
-[CoreCapabilityProvider]o-[capabilities]
-[QueuingPersistenceCapabilityDecorator]o-[CoreCapabilityProvider]
-```
-
-The capability service is responsible for determining which capabilities
-are applicable for a given domain object, based on its model. Primarily,
-this is handled by the `CoreCapabilityProvider`, which examines
-capabilities exposed via the `capabilities` extension category.
-
-Additionally, `platform/persistence/queue` decorates the persistence
-capability specifically to batch persistence attempts among multiple
-objects (this allows failures to be recognized and handled in groups.)
-
-## Telemetry Service
-
-```nomnoml
-[<abstract> TelemetryService|
-  requestData(requests : Array.<TelemetryRequest>) : Promise.<object>
-  subscribe(requests : Array.<TelemetryRequest>) : Function
-]<--:[TelemetryAggregator]
-```
-
-The telemetry service is responsible for acquiring telemetry data.
-
-Notably, the platform does not include any providers for
-`TelemetryService`; applications built on Open MCT will need to
-implement a provider for this service if they wish to expose telemetry
-data. This is usually the most important step for integrating Open MCT
-into an existing telemetry system.
-
-Requests for telemetry data are usually initiated in the
-[presentation layer](#presentation-layer) by some `Controller` referenced
-from a view. The `telemetryHandler` service is most commonly used (although
-one could also use an object's `telemetry` capability directly) as this
-handles capability delegation, by which a domain object such as a Telemetry
-Panel can declare that its `telemetry` capability should be handled by the
-objects it contains. Ultimately, the request for historical data and the
-new subscriptions will reach the `TelemetryService`, and, by way of the
-provider(s) which are present for that `TelemetryService`, will pass the
-same requests to the back-end.
-
-```nomnoml
-[<start> Start]->[Controller]
-[Controller]->[<state> declares object of interest]
-[declares object of interest]->[TelemetryHandler]
-[TelemetryHandler]->[<state> requests telemetry from capabilities]
-[TelemetryHandler]->[<state> subscribes to telemetry using capabilities]
-[requests telemetry from capabilities]->[TelemetryCapability]
-[subscribes to telemetry using capabilities]->[TelemetryCapability]
-[TelemetryCapability]->[<state> requests telemetry]
-[TelemetryCapability]->[<state> subscribes to telemetry]
-[requests telemetry]->[TelemetryService]
-[subscribes to telemetry]->[TelemetryService]
-[TelemetryService]->[<state> issues request]
-[TelemetryService]->[<state> updates subscriptions]
-[TelemetryService]->[<state> listens for real-time data]
-[issues request]->[<database> Telemetry Back-end]
-[updates subscriptions]->[Telemetry Back-end]
-[listens for real-time data]->[Telemetry Back-end]
-[Telemetry Back-end]->[<end> End]
-```
-
-The back-end, in turn, is expected to provide whatever historical
-telemetry is available to satisfy the request that has been issue.
-
-```nomnoml
-[<start> Start]->[<database> Telemetry Back-end]
-[Telemetry Back-end]->[<state> transmits historical telemetry]
-[transmits historical telemetry]->[TelemetryService]
-[TelemetryService]->[<state> packages telemetry, fulfills requests]
-[packages telemetry, fulfills requests]->[TelemetryCapability]
-[TelemetryCapability]->[<state> unpacks telemetry per-object, fulfills request]
-[unpacks telemetry per-object, fulfills request]->[TelemetryHandler]
-[TelemetryHandler]->[<state> exposes data]
-[TelemetryHandler]->[<state> notifies controller]
-[exposes data]->[Controller]
-[notifies controller]->[Controller]
-[Controller]->[<state> prepares data for template]
-[prepares data for template]->[Template]
-[Template]->[<state> displays data]
-[displays data]->[<end> End]
-```
-
-One peculiarity of this approach is that we package many responses
-together at once in the `TelemetryService`, then unpack these in the
-`TelemetryCapability`, then repackage these in the `TelemetryHandler`.
-The rationale for this is as follows:
-
-* In the `TelemetryService`, we want to have the ability to combine
-  multiple requests into one call to the back-end, as many back-ends
-  will support this. It follows that we give the response as a single
-  object, packages in a manner that allows responses to individual
-  requests to be easily identified.
-* In the `TelemetryCapability`, we want to provide telemetry for a
-  _single object_, so the telemetry data gets unpacked. This allows
-  for the unpacking of data to be handled in a single place, and
-  also permits a flexible substitution method; domain objects may have
-  implementations of the `telemetry` capability that do not use the
-  `TelemetryService` at all, while still maintaining compatibility
-  with any presentation layer code written to utilize this capability.
-  (This is true of capabilities generally.)
-* In the `TelemetryHandler`, we want to group multiple responses back
-  together again to make it easy for the presentation layer to consume.
-  In this case, the grouping is different from what may have occurred
-  in the `TelemetryService`; this grouping is based on what is expected
-  to be useful _in a specific view_. The `TelemetryService`
-  may be receiving requests from multiple views.
-
-```nomnoml
-[<start> Start]->[<database> Telemetry Back-end]
-[Telemetry Back-end]->[<state> notifies client of new data]
-[notifies client of new data]->[TelemetryService]
-[TelemetryService]->[<choice> relevant subscribers?]
-[relevant subscribers?] yes ->[<state> notify subscribers]
-[relevant subscribers?] no ->[<state> ignore]
-[ignore]->[<end> Ignored]
-[notify subscribers]->[TelemetryCapability]
-[TelemetryCapability]->[<state> notify listener]
-[notify listener]->[TelemetryHandler]
-[TelemetryHandler]->[<state> exposes data]
-[TelemetryHandler]->[<state> notifies controller]
-[exposes data]->[Controller]
-[notifies controller]->[Controller]
-[Controller]->[<state> prepares data for template]
-[prepares data for template]->[Template]
-[Template]->[<state> displays data]
-[displays data]->[<end> End]
-```
-
-The flow of real-time data is similar, and is handled by a sequence
-of callbacks between the presentation layer component which is
-interested in data and the telemetry service. Providers in the
-telemetry service listen to the back-end for new data (via whatever
-mechanism their specific back-end supports), package this data in
-the same manner as historical data, and pass that to the callbacks
-which are associated with relevant requests.
-
-## Persistence Service
-
-```nomnoml
-#direction: right
-[<abstract> PersistenceService|
-  listSpaces() : Promise.<Array.<string>>
-  listObjects() : Promise.<Array.<string>>
-  createObject(space : string, key : string, document : object) : Promise.<boolean>
-  readObject(space : string, key : string, document : object) : Promise.<object>
-  updateObject(space : string, key : string, document : object) : Promise.<boolean>
-  deleteObject(space : string, key : string, document : object) : Promise.<boolean>
-]
-
-[ElasticPersistenceProvider]--:>[PersistenceService]
-[ElasticPersistenceProvider]->[<database> ElasticSearch]
-
-[CouchPersistenceProvider]--:>[PersistenceService]
-[CouchPersistenceProvider]->[<database> CouchDB]
-```
-
-Closely related to the notion of domain objects models is their
-persistence. The `PersistenceService` allows these to be saved
-and loaded. (Currently, this capability is only used for domain
-object models, but the interface has been designed without this idea
-in mind; other kinds of documents could be saved and loaded in the
-same manner.)
-
-There is no single definitive implementation of a `PersistenceService` in
-the platform. Optional adapters are provided to store and load documents
-from CouchDB and ElasticSearch, respectively; plugin authors may also
-write additional adapters to utilize different back end technologies.
-
-## Action Service
-
-```nomnoml
-[ActionService|
-  getActions(context : ActionContext) : Array.<Action>
-]
-[ActionProvider]--:>[ActionService]
-[CreateActionProvider]--:>[ActionService]
-[ActionAggregator]--:>[ActionService]
-[LoggingActionDecorator]--:>[ActionService]
-[PolicyActionDecorator]--:>[ActionService]
-
-[LoggingActionDecorator]o-[PolicyActionDecorator]
-[PolicyActionDecorator]o-[ActionAggregator]
-[ActionAggregator]o-[ActionProvider]
-[ActionAggregator]o-[CreateActionProvider]
-
-[ActionProvider]o-[actions]
-[CreateActionProvider]o-[TypeService]
-[PolicyActionDecorator]o-[PolicyService]
-```
-
-Actions are discrete tasks or behaviors that can be initiated by a user
-upon or using a domain object. Actions may appear as menu items or
-buttons in the user interface, or may be triggered by certain gestures.
-
-Responsibilities of platform components of the action service are as
-follows:
-
-* `ActionProvider` exposes actions registered via extension category
-  `actions`, supporting simple addition of new actions. Actions are
-  filtered down to match action contexts based on criteria defined as
-  part of an action's extension definition.
-* `CreateActionProvider` provides the various Create actions which
-  populate the Create menu. These are driven by the available types,
-  so do not map easily to extension category `actions`; instead, these
-  are generated after looking up which actions are available from the
-  [`TypeService`](#type-service).
-* `ActionAggregator` merges together actions from multiple providers.
-* `PolicyActionDecorator` enforces the `action` policy category by
-  filtering out actions which violate this policy, as determined by
-  consulting the [`PolicyService`](#policy-service).
-* `LoggingActionDecorator` wraps exposed actions and writes to the
-  console when they are performed.
-
-## View Service
-
-```nomnoml
-[ViewService|
-  getViews(domainObject : DomainObject) : Array.<View>
-]
-[ViewProvider]--:>[ViewService]
-[PolicyViewDecorator]--:>[ViewService]
-
-[ViewProvider]o-[views]
-[PolicyViewDecorator]o-[ViewProvider]
-```
-
-The view service provides views that are relevant to a specified domain
-object. A "view" is a user-selectable visualization of a domain object.
-
-The responsibilities of components of the view service are as follows:
-
-* `ViewProvider` exposes views registered via extension category
-  `views`, supporting simple addition of new views. Views are
-  filtered down to match domain objects based on criteria defined as
-  part of a view's extension definition.
-* `PolicyViewDecorator` enforces the `view` policy category by
-  filtering out views which violate this policy, as determined by
-  consulting the [`PolicyService`](#policy-service).
-
-## Policy Service
-
-```nomnoml
-[PolicyService|
-  allow(category : string, candidate : object, context : object, callback? : Function) : boolean
-]
-[PolicyProvider]--:>[PolicyService]
-[PolicyProvider]o-[policies]
-```
-
-The policy service provides a general-purpose extensible decision-making
-mechanism; plugins can add new extensions of category `policies` to
-modify decisions of a known category.
-
-Often, the policy service is referenced from a decorator for another
-service, to filter down the results of using that service based on some
-appropriate policy category.
-
-The policy provider works by looking up all registered policy extensions
-which are relevant to a particular _category_, then consulting each in
-order to see if they allow a particular _candidate_ in a particular
-_context_; the types for the `candidate` and `context` arguments will
-vary depending on the `category`. Any one policy may disallow the
-decision as a whole.
-
-
-```nomnoml
-[<start> Start]->[<state> is something allowed?]
-[is something allowed?]->[PolicyService]
-[PolicyService]->[<state> look up relevant policies by category]
-[look up relevant policies by category]->[<state> consult policy #1]
-[consult policy #1]->[Policy #1]
-[Policy #1]->[<choice> policy #1 allows?]
-[policy #1 allows?] no ->[<state> decision disallowed]
-[policy #1 allows?] yes ->[<state> consult policy #2]
-[consult policy #2]->[Policy #2]
-[Policy #2]->[<choice> policy #2 allows?]
-[policy #2 allows?] no ->[<state> decision disallowed]
-[policy #2 allows?] yes ->[<state> consult policy #3]
-[consult policy #3]->[<state> ...]
-[...]->[<state> consult policy #n]
-[consult policy #n]->[Policy #n]
-[Policy #n]->[<choice> policy #n allows?]
-[policy #n allows?] no ->[<state> decision disallowed]
-[policy #n allows?] yes ->[<state> decision allowed]
-[decision disallowed]->[<end> Disallowed]
-[decision allowed]->[<end> Allowed]
-```
-
-The policy decision is effectively an "and" operation over the individual
-policy decisions: That is, all policies must agree to allow a particular
-policy decision, and the first policy to disallow a decision will cause
-the entire decision to be disallowed. As a consequence of this, policies
-should generally be written with a default behavior of "allow", and
-should only disallow the specific circumstances they are intended to
-disallow.
-
-## Type Service
-
-```nomnoml
-[TypeService|
-  listTypes() : Array.<Type>
-  getType(key : string) : Type
-]
-[TypeProvider]--:>[TypeService]
-[TypeProvider]o-[types]
-```
-
-The type service provides metadata about the different types of domain
-objects that exist within an Open MCT application. The platform
-implementation reads these types in from extension category `types`
-and wraps them in a JavaScript interface.
diff --git a/docs/src/design/index.md b/docs/src/design/index.md
deleted file mode 100644
index 7b4c3e4ebfb..00000000000
--- a/docs/src/design/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
-Design proposals:
-
-* [API Redesign](proposals/APIRedesign.md)
\ No newline at end of file
diff --git a/docs/src/design/planning/APIRefactor.md b/docs/src/design/planning/APIRefactor.md
deleted file mode 100644
index ec98a115f44..00000000000
--- a/docs/src/design/planning/APIRefactor.md
+++ /dev/null
@@ -1,338 +0,0 @@
-# API Refactoring
-
-This document summarizes a path toward implementing API changes
-from the [API Redesign](../proposals/APIRedesign.md) for Open MCT
-v1.0.0.
-
-# Goals
-
-These plans are intended to minimize:
-
-* Waste; avoid allocating effort to temporary changes.
-* Downtime; avoid making changes in large increments that blocks
-  delivery of new features for substantial periods of time.
-* Risk; ensure that changes can be validated quickly, avoid putting
-  large effort into changes that have not been validated.
-
-# Plan
-
-```nomnoml
-#comment: This diagram is in nomnoml syntax and should be rendered.
-#comment: See https://github.com/nasa/openmctweb/issues/264#issuecomment-167166471
-
-
-[<start> Start]->[<state> Imperative bundle registration]
-
-[<state> Imperative bundle registration]->[<state> Build and packaging]
-[<state> Imperative bundle registration]->[<state> Refactor API]
-
-[<state> Build and packaging |
-    [<start> Start]->[<state> Incorporate a build step]
-    [<state> Incorporate a build step |
-        [<start> Start]->[<state> Choose package manager]
-        [<start> Start]->[<state> Choose build system]
-        [<state> Choose build system]<->[<state> Choose package manager]
-        [<state> Choose package manager]->[<state> Implement]
-        [<state> Choose build system]->[<state> Implement]
-        [<state> Implement]->[<end> End]
-    ]->[<state> Separate repositories]
-    [<state> Separate repositories]->[<end> End]
-]->[<state> Release candidacy]
-
-
-[<start> Start]->[<state> Design registration API]
-
-[<state> Design registration API |
-     [<start> Start]->[<state> Decide on role of Angular]
-     [<state> Decide on role of Angular]->[<state> Design API]
-     [<state> Design API]->[<choice> Passes review?]
-     [<choice> Passes review?] no ->[<state> Design API]
-     [<choice> Passes review?]-> yes [<end> End]
-]->[<state> Refactor API]
-
-[<state> Refactor API |
-    [<start> Start]->[<state> Imperative extension registration]
-    [<state> Imperative extension registration]->[<state> Refactor individual extensions]
-
-    [<state> Refactor individual extensions |
-        [<start> Start]->[<state> Prioritize]
-        [<state> Prioritize]->[<choice> Sufficient value added?]
-        [<choice> Sufficient value added?] no ->[<end> End]
-        [<choice> Sufficient value added?] yes ->[<state> Design]
-        [<state> Design]->[<choice> Passes review?]
-        [<choice> Passes review?] no ->[<state> Design]
-        [<choice> Passes review?]-> yes [<state> Implement]
-        [<state> Implement]->[<end> End]
-    ]->[<state> Remove legacy bundle support]
-
-    [<state> Remove legacy bundle support]->[<end> End]
-]->[<state> Release candidacy]
-
-[<state> Release candidacy |
-    [<start> Start]->[<state> Verify |
-        [<start> Start]->[<choice> API well-documented?]
-        [<start> Start]->[<choice> API well-tested?]
-        [<choice> API well-documented?]-> no [<state> Write documentation]
-        [<choice> API well-documented?] yes ->[<end> End]
-        [<state> Write documentation]->[<choice> API well-documented?]
-        [<choice> API well-tested?]-> no [<state> Write test cases]
-        [<choice> API well-tested?]-> yes [<end> End]
-        [<state> Write test cases]->[<choice> API well-tested?]
-    ]
-    [<start> Start]->[<state> Validate |
-        [<start> Start]->[<choice> Passes review?]
-        [<start> Start]->[<state> Use internally]
-        [<state> Use internally]->[<choice> Proves useful?]
-        [<choice> Passes review?]-> no [<state> Address feedback]
-        [<state> Address feedback]->[<choice> Passes review?]
-        [<choice> Passes review?] yes -> [<end> End]
-        [<choice> Proves useful?] yes -> [<end> End]
-        [<choice> Proves useful?] no -> [<state> Fix problems]
-        [<state> Fix problems]->[<state> Use internally]
-    ]
-    [<state> Validate]->[<end> End]
-    [<state> Verify]->[<end> End]
-]->[<state> Release]
-
-[<state> Release]->[<end> End]
-```
-
-## Step 1. Imperative bundle registration
-
-Register whole bundles imperatively, using their current format.
-
-For example, in each bundle add a `bundle.js` file:
-
-```js
-define([
-    'mctRegistry',
-    'json!bundle.json'
-], function (mctRegistry, bundle) {
-    mctRegistry.install(bundle, "path/to/bundle");
-});
-```
-
-Where `mctRegistry.install` is placeholder API that wires into the
-existing bundle registration mechanisms. The main point of entry
-would need to be adapted to clearly depend on these bundles
-(in the require sense of a dependency), and the framework layer
-would need to implement and integrate with this transitional
-API.
-
-Benefits:
-
-* Achieves an API Redesign goal with minimal immediate effort.
-* Conversion to an imperative syntax may be trivially automated.
-* Minimal change; reuse existing bundle definitions, primarily.
-* Allows early validation of switch to imperative; unforeseen
-  consequences of the change may be detected at this point.
-* Allows implementation effort to progress in parallel with decisions
-  about API changes, including fundamental ones such as the role of
-  Angular. May act in some sense as a prototype to inform those
-  decisions.
-* Creates a location (framework layer) where subsequent changes to
-  the manner in which extensions are registered may be centralized.
-  When there is a one-to-one correspondence between the existing
-  form of an extension and its post-refactor form, adapters can be
-  written here to defer the task of making changes ubiquitously
-  throughout bundles, allowing for earlier validation and
-  verification of those changes, and avoiding ubiquitous changes
-  which might require us to go dark. (Mitigates
-  ["greenfield paradox"](http://stepaheadsoftware.blogspot.com/2012/09/greenfield-or-refactor-legacy-code-base.html);
-  want to add value with new API but don't want to discard value
-  of tested/proven legacy codebase.)
-
-Detriments:
-
-* Requires transitional API to be implemented/supported; this is
-  waste. May mitigate this by time-bounding the effort put into
-  this step to ensure that waste is minimal.
-
-Note that API changes at this point do not meaningfully reflect
-the desired 1.0.0 API, so no API reviews are necessary.
-
-## Step 2. Incorporate a build step
-
-After the previous step is completed, there should be a
-straightforward dependency graph among AMD modules, and an
-imperative (albeit transitional) API allowing for other plugins
-to register themselves. This should allow for a build step to
-be included in a straightforward fashion.
-
-Some goals for this build step:
-
-* Compile (and, preferably, optimize/minify) Open MCT
-  sources into a single `.js` file.
-  * It is desirable to do the same for HTML sources, but
-    may wish to defer this until a subsequent refactoring
-    step if appropriate.
-* Provide non-code assets in a format that can be reused by
-  derivative projects in a straightforward fashion.
-
-Should also consider which dependency/packaging manager should
-be used by dependent projects to obtain Open MCT. Approaches
-include:
-
-1. Plain `npm`. Dependents then declare their dependency with
-   `npm` and utilize built sources and assets in a documented
-   fashion. (Note that there are
-   [documented challenges](http://blog.npmjs.org/post/101775448305/npm-and-front-end-packaging)
-   in using `npm` in this fashion.)
-2. Build with `npm`, but recommend dependents install using
-   `bower`, as this is intended for front-end development. This may
-   require checking in built products, however, which
-   we wish to avoid (this could be solved by maintaining
-   a separate repository for built products.)
-
-In all cases, there is a related question of which build system
-to use for asset generation/management and compilation/minification/etc.
-
-1. [`webpack`](https://webpack.github.io/)
-   is well-suited in principle, as it is specifically
-   designed for modules with non-JS dependencies. However,
-   there may be limitations and/or undesired behavior here
-   (for instance, CSS dependencies get in-lined as style tags,
-   removing our ability to control ordering) so it may
-2. `gulp` or `grunt`. Commonplace, but both still require
-   non-trivial coding and/or configuration in order to produce
-   appropriate build artifacts.
-3. [Just `npm`](http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/).
-   Reduces the amount of tooling being used, but may introduce
-   some complexity (e.g. custom scripts) to the build process,
-   and may reduce portability.
-
-## Step 3. Separate repositories
-
-Refactor existing applications built on Open MCT such that they
-are no longer forks, but instead separate projects with a dependency
-on the built artifacts from Step 2.
-
-Note that this is achievable already using `bower` (see `warp-bower`
-branch at http://developer.nasa.gov/mct/warp for an example.)
-However, changes involved in switching to an imperative API and
-introducing a build process may change (and should simplify) the
-approach used to utilize Open MCT as a dependency, so these
-changes should be introduced first.
-
-## Step 4. Design registration API
-
-Design the registration API that will replace declarative extension
-categories and extensions (including Angular built-ins and composite
-services.)
-
-This may occur in parallel with implementation steps.
-
-It will be necessary
-to have a decision about the role of Angular at this point; are extensions
-registered via provider configuration (Angular), or directly in some
-exposed registry?
-
-Success criteria here should be based on peer review. Scope of peer
-review should be based on perceived risk/uncertainty surrounding
-proposed changes, to avoid waste; may wish to limit this review to
-the internal team. (The extent to which external
-feedback is available is limited, but there is an inherent timeliness
-to external review; need to balance this.)
-
-Benefits:
-
-* Solves the "general case" early, allowing for early validation.
-
-Note that in specific cases, it may be desirable to refactor some
-current "extension category" in a manner that will not appear as
-registries, _or_ to locate these in different
-namespaces, _or_ to remove/replace certain categories entirely.
-This work is deferred intentionally to allow for a solution of the
-general case.
-
-## Step 5. Imperative extension registration
-
-Register individual extensions imperatively, implementing API changes
-from the previous step. At this stage, _usage_ of the API may be confined
-to a transitional adapter in the framework layer; bundles may continue
-to utilize the transitional API for registering extensions in the
-legacy format.
-
-An important, ongoing sub-task here will be to discover and define dependencies
-among bundles. Composite services and extension categories are presently
-"implicit"; after the API redesign, these will become "explicit", insofar
-as some specific component will be responsible for creating any registries.
-As such, "bundles" which _use_ specific registries will need to have an
-enforceable dependency (e.g. require) upon those "bundles" which
-_declare_ those registries.
-
-## Step 6. Refactor individual extensions
-
-Refactor individual extension categories and/or services that have
-been identified as needing changes. This includes, but is not
-necessarily limited to:
-
-* Views/Representations/Templates (refactored into "components.")
-* Capabilities (refactored into "roles", potentially.)
-* Telemetry (from `TelemetrySeries` to `TelemetryService`.)
-
-Changes should be made one category at a time (either serially
-or separately in parallel) and should involve a tight cycle of:
-
-1. Prioritization/reprioritization; highest-value API improvements
-   should be done first.
-2. Design.
-3. Review. Refactoring individual extensions will require significant
-   effort (likely the most significant effort in the process) so changes
-   should be validated early to minimize risk/waste.
-4. Implementation. These changes will not have a one-to-one relationship
-   with existing extensions, so changes cannot be centralized; usages
-   will need to be updated across all "bundles" instead of centralized
-   in a legacy adapter. If changes are of sufficient complexity, some
-   planning should be done to spread out the changes incrementally.
-
-By necessity, these changes may break functionality in applications
-built using Open MCT. On a case-by-case basis, should consider
-providing temporary "legacy support" to allow downstream updates
-to occur as a separate task; the relevant trade here is between
-waste/effort required to maintain legacy support, versus the
-downtime which may be introduced by making these changes simultaneously
-across several repositories.
-
-
-## Step 7. Remove legacy bundle support
-
-Update bundles to remove any usages of legacy support for bundles
-(including that used by dependent projects.) Then, remove legacy
-support from Open MCT.
-
-## Step 8. Release candidacy
-
-Once API changes are complete, Open MCT should enter a release
-candidacy cycle. Important things to look at here:
-
-* Are changes really complete?
-  * Are they sufficiently documented?
-  * Are they sufficiently tested?
-* Are changes really sufficient?
-  * Do reviewers think they are usable?
-  * Does the development team find them useful in practice? This
-    will require calendar time to ascertain; should allocate time
-    for this, particularly in alignment with the sprint/release
-    cycle.
-  * Has learning curve been measurably decreased? Comparing a to-do
-    list tutorial to [other examples(http://todomvc.com/) could
-    provide an empirical basis to this. How much code is required?
-    How much explanation is required? How many dependencies must
-    be installed before initial setup?
-  * Does the API offer sufficient power to implement the extensions we
-    anticipate?
-  * Any open API-related issues which should block a 1.0.0 release?
-
-Any problems identified during release candidacy will require
-subsequent design changes and planning.
-
-## Step 9. Release
-
-Once API changes have been verified and validated, proceed
-with release, including:
-
-* Tagging as version 1.0.0 (at an appropriate time in the
-  sprint/release cycle.)
-* Close any open issues which have been resolved (or made obsolete)
-  by API changes.
\ No newline at end of file
diff --git a/docs/src/design/proposals/APIRedesign.md b/docs/src/design/proposals/APIRedesign.md
deleted file mode 100644
index 03ce2f212fe..00000000000
--- a/docs/src/design/proposals/APIRedesign.md
+++ /dev/null
@@ -1,1282 +0,0 @@
-# Overview
-
-The purpose of this document is to review feedback on Open MCT's
-current API and propose improvements to the API, particularly for a
-1.0.0 release.
-
-Strategically, this is handled by:
-
-* Identifying broader goals.
-* Documenting feedback and related background information.
-* Reviewing feedback to identify trends and useful features.
-  * In particular, pull out "pain points" to attempt to address,
-    as well as positive attributes to attempt to preserve.
-* Proposing a set of API changes to address these "pain points."
-  * This also takes into account scheduling concerns.
-* Once agreed-upon, formalize this set of changes (e.g. as UML
-  diagrams) and plan to implement them.
-
-# Goals
-
-## Characteristics of a good API
-
-A good API:
-
-* Is easy to understand.
-* Rewards doing things "the right way."
-* Saves development effort.
-* Is powerful enough to support a broad range of applications.
-* Lends itself to good documentation.
-
-These characteristics can sometimes be at odds with each other, or
-with other concerns. These should typically be viewed as participants
-in trades.
-
-## Evaluating APIs
-
-APIs may be evaluated based on:
-
-* Number of interfaces.
-  * How many application-specific interfaces do I need to know to
-    solve a certain class of problems?
-* Size of interfaces.
-  * How many methods does each interface have?
-* Depth of interfaces.
-  * Specifically, how many methods do I need to call before the return
-    value is of a form that is not specific to the API?
-* Clarity of interfaces.
-  * How much documentation or learning is required before an interface is
-    useful?
-* Consistency of interfaces.
-  * How similar is one interface to an analogous interface?
-* Utility of interfaces.
-  * How much development effort is reduced by utilizing these interfaces,
-    versus accomplishing the same goals with other tools?
-* Power of interfaces.
-  * How much application functionality can I influence with the interfaces
-    that are available to me?
-
-In general, prefer to have a small number of simple, shallow, clear,
-useful, powerful interfaces.
-
-# Developer Feedback
-
-## Developer Intern Feedback
-
-This feedback comes from interns who worked closely with
-Open MCT as their primary task over the Summer of 2015.
-
-### Developer Intern 1
-
-Worked on bug fixes in the platform and a plugin for search.
-
-* Initially, it was confusing that many things in files that are in
-  very different locations in the code base refer to each other.
-  * Perhaps explain more the organization strategy behind the
-    different main sections, like "commonUI" vs "core".
-* This may be just me, but there are often long chains of related
-  functions calling each other, and when I had to modify the behavior,
-  I had a hard time remembering to look for the highest level function
-  in the call chain to change. I also sometimes had a hard time finding
-  the connections between the functions. But, that is important because
-  the implementation of the functions along the chain may change later.
-* One very helpful thing that you could add might just be documentation
-  that is not in paragraph format like in the current developer guide.
-  I would just like a list of all the functions and members of each kind
-  of object there is, and descriptions of what they are and how they're
-  used.
-  * Also, the current developer guide pdf's words that are in 'code font',
-   rather than the normal text, are not searchable.
-   (Depending on the pdf viewer.)
-* I do appreciate that there is some example code.
-* I am still slightly confused about what "domainObject" refers to in
-  different situations.
-* The tutorials are helpful, but only really for designing new views.
-  It doesn't help much with gaining understanding of how the other parts
-  of the application work.
-* The general idea of 'telemetry' in this context is kind of confusing.
-  It is hard to figure out what the difference between the various ways of
-  dealing with telemetry are. e.g., what is the difference between just
-  "Telemetry" and the "Telemetry Service"? There are many
-  "Telemetry Things" which seem related, but in an unclear way.
-
-### Developer Intern 2
-
-Worked on platform bug fixes and mobile support.
-
-* No guide for the UI and front end for the HTML/CSS part of Open MCT.
-  Not sure if this is applicable or needed for developers, however would
-  be helpful to any front end development
-* Found it difficult to follow the plot controller & subplot
-  functions/features, such as zooming.
-* If the developer guide could have for references to which files or
-  functions are key for gestures, browse navigation, etc it would be
-  helpful for future developers as a place to start looking. I found
-  it occasionally difficult to find which files or functions I wanted
-  at first.
-
-## Plugin Developer Feedback
-
-This feedback comes from developers who have worked on plugins for
-Open MCT, but have not worked on the platform.
-
-### Plugin Developer 1
-
-Used Open MCT over the course of several months (on a
-less-than-half-time basis) to develop a
-spectrum visualization plugin.
-
-* Not a lot of time to work on this, made it hard to get up the learning
-  curve.
-  * Note that this is the norm, particularly for GDS development.
-* JavaScript carries its own learning curve.
-* The fact that it pulls in other tools whose APIs need to be learned
-  also makes the learning curve harder to get up.
-* Tracking down interconnected parts was a bit difficult.
-* Could really use examples.
-* Easy to get lost when not immersed in the style.
-
-### Plugin Developer 2
-
-Used Open MCT over the course of several weeks (on a half-time basis)
-to develop a tabular visualization plugin.
-
-* Pain points
-   * Unable to copy and paste from tutorial pdfs into code
-      * Wanted to verify my environment was setup properly so that I
-        could get the final product working in the end without having
-        to type everything out.  Perhaps there could be something in
-        github that has the final completed tutorial for new users to
-        checkout?  Or a step by step one kind of like the tutorials on
-        the angular js webpage?
-   * Typing too long without seeing results of what I was doing
-      * At some points in the tutorial I ended up typing for the sake
-        of typing without knowing what I was really typing for.
-      * If there were break points where we could run the incomplete
-        code and just see a variable dump or something even that would
-        be helpful to know that I am on the right track.
-   * Documentation on features are a bit hard to find.
-      * I'm not sure what I can do until I search through examples of
-        existing code and work my way backwards.
-      * Maybe you can link the features we are using in the tutorial to
-        their respective parts in the developer guide?  Not sure if that
-        can be done on PDFs, so maybe a webpage instead?
-* Positive Attributes
-   * Unable to copy and paste from tutorial pdfs into code
-      * I know I also listed this as a pain, but it was kind of helpful
-        being forced to read and type everything out.
-   * "Widgets" are self contained in their own directories.  I don't have
-      to be afraid of exploding things.
-   * All files/config that I care about for a "widget" can be found in
-     the bundles.json
-* Misc
-   * Coming from a not so strong webdev background and on top of that a
-     zero strong angular background I think starting off with a simple
-     "Hello World" webpage tutorial would have been nice.
-      * Start off with a bare bones bundle json with an empty controller
-        and static "Hello World" in the view
-      * Add the variable "Hello World" into the controller for the view
-        to display
-      * Add a model property to the bundle.json to take in "Hello World"
-        as a parameter and pass through to the controller/view
-
-### Open Source Contributor
-
- * [Failures are non-graceful when services are missing.](
-   https://github.com/nasa/openmctweb/issues/79)
-
-## Misc. Feedback (mostly verbal)
-
-* Easy to add things.
-* Separation of concerns is unclear (particularly: "where's the MVC?")
-* Telemetry API is confusing. In particular, `TelemetrySeries` should
-  just be an array.
-  * Came out of design discussions for Limits.
-* Capabilities are confusing.
-
-## Long-term Developer Notes
-
-The following notes are from original platform developer, with long
-term experience using Open MCT.
-
-* Bundle mechanism allows for grouping related components across concerns,
-  and adding and removing these easily. (e.g. model and view components of
-  Edit mode are all grouped together in the Edit bundle.)
-
-## AngularJS
-
-Angular 2.0.0 is coming (maybe by end of 2015.)
-
-It will not be backwards-compatible with Angular 1.x.
-The differences are significant enough that switching to
-Angular 2 will require only slightly less effort than switching
-to an entirely different framework.
-
-We can expect AngularJS 1.x to reach end-of-life reasonably soon thereafter.
-
-Our API is currently a superset of Angular's API, so this directly affects
-our API. Specifically, API changes should be oriented towards removing
-or reducing the Angular dependency.
-
-### Angular's Role
-
-Angular is Open MCT's:
-
-* Dependency injection framework.
-* Template rendering.
-* DOM interactions.
-* Services library.
-* Form validator.
-* Routing.
-
-This is the problem with frameworks: They become a single point of
-failure for unrelated concerns.
-
-### Rationale for Adopting Angular
-
-The rationale for adopting AngularJS as a framework is
-documented in https://trunk.arc.nasa.gov/jira/browse/WTD-208.
-Summary of the expected benefits:
-
-* Establishes design patterns that are well-documented and
-  understood in industry. This can be beneficial in training
-  new staff, and lowers the documentation burden on the local
-  development team. If MCT-Web were to stay with its current
-  architecture, significant developer-oriented documentation
-  and training materials would need to be produced.
-* The maintainability of MCT-Web would be enhanced by using a
-  framework like Angular. The local team would enjoy the benefits of
-  maintenance performed by the sponsor, but would not incur any cost
-  for this. This would include future upgrades, testing, and bug fixes.
-* Replaces DOM-manipulation with a declarative data-binding syntax
-  which automatically updates views when the model data changes. This
-  pattern has the potential to save the development team from
-  time-consuming and difficult-to-debug DOM manipulation.
-* Provides data binding to backend models.
-* Provides patterns for form validation.
-* Establishes documented patterns for add-on modules and services.
-* Supports unit tests and system tests (tests which simulate user
-  interactions in the browser)
-* Angular software releases can be expected to be tested, which would
-  allow MCT-Web developers to focus on MCT-specific features, instead
-  of the maintenance of custom infrastructure.
-
-### Actual Experience with Angular
-
-Most of the expected benefits of Angular have been invalidated
-by experience:
-
-* Feedback from new developers is that Angular was a hindrance to
-  training, not a benefit. ("One more thing to learn.") Significant
-  documentation remains necessary for Open MCT.
-* Expected enhancements to maintainability will be effectively
-  invalidated by an expected Angular end-of-life.
-* Data binding and automatic view updates do save development effort,
-  but also carry a performance penalty. This can be solved, but requires
-  resorting to exactly the sort of DOM manipulations we want to avoid.
-  In some cases this can require more total development (writing a
-  poorly-performing Angular version, then "optimizing" by rewriting a
-  non-Angular version.)
-* Expected reduction of test scope will also be invalidated by an
-  expected end-of-life.
-
-Other problems:
-
-* Hinders integrating non-Angular components. (Need to wrap with
-  Angular API, e.g. as directives, which may be non-trivial.)
-* Interferes with debugging by swallowing or obscuring exceptions.
-
-# Feedback Review
-
-## Problem Summary
-
-The following attributes of the current API are undesirable:
-
-- [ ] It is difficult to tell "where things are" in the code base.
-- [ ] It is difficult to see how objects are passed around at run-time.
-- [ ] It is difficult to trace flow of control generally.
-- [ ] Multiple interfaces for related concepts (e.g. telemetry) is confusing.
-- [ ] API documentation is missing or not well-formatted for use.
-- [ ] High-level separation of concerns is not made clear.
-- [ ] Interface depth of telemetry API is excessive (esp. `TelemetrySeries`)
-- [ ] Capabilities as a concept lack clarity.
-- [ ] Too many interfaces and concepts to learn.
-- [ ] Exposing third-party APIs (e.g. Angular's) increases the learning curve.
-- [ ] Want more examples, easier-to-use documentation.
-- [ ] UI-relevant features (HTML, CSS) under-documented
-- [ ] Good MVC for views of domain objects not enforced (e.g. plots)
-
-## Positive Features
-
-It is desirable to retain the following features in an API redesign:
-
-- [ ] Creating new features and implementing them additively is well-supported.
-- [ ] Easy to add/remove features which involve multiple concerns.
-- [ ] Features can be self-contained.
-- [ ] Declarative syntax makes it easy to tell what's in use.
-
-## Requirements
-
-The following are considered "must-haves" of any complete API
-redesign:
-
-- [ ] Don't require usage of Angular API.
-- [ ] Don't require support for Angular API.
-
-# Proposals
-
-## RequireJS as dependency injector
-
-Use Require.JS for dependency injection.
-
-Dependencies will then be responsible for being sufficiently
-mutable/extensible/customizable. This can be facilitated by
-adding platform classes which can facilitate the addition
-of reusable components.
-
-Things that we usefully acquire via dependency injection currently:
-
-* Services.
-* Extensions (by category).
-* Configuration constants.
-
-Services would be defined (by whatever component is responsible
-for declaring it) using `define` and the explicit name of the
-service. To allow for the power of composite services, the
-platform would provide a `CompositeService` class that supports
-this process by providing `register`, `decorate`, and `composite`
-methods to register providers, decorators, and aggregators
-respectively. (Note that nomenclature changes are also implied
-here, to map more clearly to the Composite Pattern and to
-avoid the use of the word "provider", which has ambiguity with
-Angular.)
-
-```js
-define(
-  "typeService",
-  ["CompositeService"],
-  function (CompositeService) {
-    var typeService = new CompositeService([
-      "listTypes",
-      "getType"
-    ]);
-
-    // typeService has `listTypes` and `getType` as methods;
-    // at this point they are stubbed (will return undefined
-    // or throw or similar) but this will change as
-    // decorators/compositors/providers are added.
-
-    // You could build in a compositor here, or
-    // someone could also define one later
-    typeService.composite(function (typeServices) {
-      // ... return a TypeService
-    });
-
-    // Similarly, you could register a default implementation
-    // here, or from some other script.
-    typeService.register(function (typeService) {
-      // ... return a TypeService
-    }, { priority: 'default' });
-
-    return typeService;
-  }
-);
-```
-
-Other code could then register additional `TypeService`
-implementations (or decorators, or even compositors) by
-requiring `typeService` and calling those methods; or, it
-could use `typeService` directly. Priority ordering could
-be utilized by adding a second "options" argument.
-
-For extension categories, you could simply use registries:
-
-```js
-define(
-  "typeRegistry",
-  ["ExtensionRegistry"],
-  function (ExtensionRegistry) {
-    return new ExtensionRegistry();
-  }
-);
-```
-
-Where `ExtensionRegistry` extends `Array`, and adds a
-`register` method which inserts into the array at some
-appropriate point (e.g. with an options parameter that
-respects priority order.)
-
-This makes unit testing somewhat more difficult when you
-want to mock injected dependencies; there are tools out
-there (e.g. [Squire](https://github.com/iammerrick/Squire.js/))
-which can help with this, however.
-
-### Benefits
-
-* Clarifies "how objects are passed around at run-time";
-  answer is always "via RequireJS."
-* Preserves flexibility/power provided by composite services.
-* Lends itself fairly naturally to API documentation via JSDoc
-  (as compared to declaring things in bundles, which does not.)
-* Reduces interface complexity for acquiring dependencies;
-  one interface for both explicit and "implicit" dependencies,
-  instead of separate approaches for static and substitutable
-  dependencies.
-* Removes need to understand Angular's DI mechanism.
-* Improves useability of documentation (`typeService` is an
-  instance of `CompositeService` and implements `TypeService`
-  so you can easily traverse links in the JSDoc.)
-* Can be used more easily from Web Workers, allowing services
-  to be used on background threads trivially.
-
-### Detriments
-
-* Having services which both implement the service, and
-  have methods for registering the service, is a little
-  weird; would be cleaner if these were separate.
-  (Mixes concerns.)
-* Syntax becomes non-declarative, which may make it harder to
-  understand "what uses what."
-* Allows for ordering problems (e.g. you start using a
-  service before everything has been registered.)
-
-## Arbitrary HTML Views
-
-Currently, writing new views requires writing Angular templates.
-This must change if we want to reduce our dependence on Angular.
-
-Instead, propose that:
-
-* What are currently called "views" we call something different.
-  (Want the term view to be more like "view" in the MVC sense.)
-  * For example, call them "applications."
-* Consolidate what are currently called "representations" and
-  "templates", and instead have them be "views".
-
-For parity with actions, a `View` would be a constructor which
-takes an `ActionContext` as a parameter (with similarly-defined
-properties) and exposes a method to retrieve the HTML elements
-associated with it.
-
-The platform would then additionally expose an `AngularView`
-implementation to improve compatibility with existing
-representations, whose usage would something like:
-
-```js
-define(
-  ["AngularView"],
-  function (AngularView) {
-    var template = "<span ng-click='...'>Hello world</span>";
-    return new AngularView(template);
-  }
-);
-```
-
-The interface exposed by a view is TBD, but should provide at
-least the following:
-
-* A way to get the HTML elements that are exposed by & managed
-  by the view.
-* A `destroy` method to detach any listeners at the model level.
-
-Individual views are responsible for managing their resources,
-e.g. listening to domain objects for mutation. To keep DRY, the
-platform should include one or more view implementations that
-can be used/subclassed which handle common behavior(s).
-
-### Benefits
-
-* Using Angular API for views is no longer required.
-* Views become less-coupled to domain objects. Domain objects
-  may be present in the `ViewContext`, but this also might
-  just be a "view" of some totally different thing.
-* Helps clarify high-level concerns in the API (a View is now
-  really more like a View in the MVC sense; although, not
-  completely, so this gets double-booked as a detriment.)
-* Having a `ViewContext` that gets passed in allows views to
-  be more "contextually aware," which is something that has
-  been flagged previously as a UX desire.
-
-### Detriments
-
-* Becomes less clear how views relate to domain objects.
-* Adds another interface.
-* Leaves an open problem of how to distinguish views that
-  a user can choose (Plot, Scrolling List) from views that
-  are used more internally by the application (tree view.)
-* Views are still not Views in the MVC sense (in practice,
-  the will likely be view-controller pairs.) We could call
-  them widgets to disambiguate this.
-* Related to the above, even if we called these "widgets"
-  it would still fail to enforce good MVC.
-
-## Wrap Angular Services
-
-Wrap Angular's services in a custom interfaces; e.g.
-replace `$http` with an `httpService` which exposes a useful
-subset of `$http`'s functionality.
-
-### Benefits
-
-* Removes a ubiquitous dependency on Angular.
-* Allows documentation for these features to be co-located
-  and consistent with other documentation.
-* Facilitates replacing these with non-Angular versions
-  in the future.
-
-### Detriments
-
-* Increases the number of interfaces in Open MCT. (Arguably,
-  not really, since the same interfaces would exist if exposed
-  by Angular.)
-
-## Bundle Declarations in JavaScript
-
-Replace `bundle.json` files (and bundle syntax generally) with
-an imperative form. There would instead be a `Bundle` interface
-which scripts can implement (perhaps assisted by a platform
-class.)
-
-The `bundles.json` file would then be replaced with a `bundles.js`
-or `Bundles.js` that would look something like:
-
-```js
-define(
-  [
-    'platform/core/PlatformBundle',
-    // ... etc ...
-    'platform/features/plot/PlotBundle'
-  ],
-  function () {
-    return arguments;
-  }
-);
-```
-
-Which could in turn be used by an initializer:
-
-```js
-define(
-  ['./bundles', 'mct'],
-  function (bundles, mct) {
-    mct.initialize(bundles);
-  }
-);
-```
-
-A `Bundle` would have a constructor that took some JSON object
-(a `BundleContext`, lets say) and would provide methods for
-application life-cycle events. Depending on other choices,
-a dependency injector could be passed in at some appropriate
-life-cycle call (e.g. initialize.)
-
-This would also allow for "composite bundles" which serve as
-proxies for multiple bundles. The `BundleContext` could contain
-(or later be amended to contain) filtering rules to ignore
-other bundles and so forth (this has been useful for administering
-Open MCT in subtly different configurations in the past.)
-
-### Benefits
-
-* Imperative; more explicit, less magic, more clear what is going on.
-* Having a hierarchy of "bundles" could make it easier to navigate
-  (relevant groupings can be nested in a manner which is not
-  currently well-supported.)
-* Lends itself naturally to a compilation step.
-* Nudges plugin authors to "do your initialization and registration
-  in a specific place" instead of mixing in registration of features
-  with their implementations.
-
-### Detriments
-
-* Introduces another interface.
-* Loses some of the convenience of having a declarative
-  summary of components and their dependencies.
-
-## Pass around a dependency injector
-
-:warning: Note that this is incompatible with the
-[RequireJS as dependency injector](#requirejs-as-dependency-injector)
-proposal.
-
-Via some means (such as in a registration lifecycle event as
-described above) pass a dependency injector to plugins to allow
-for dependencies to be registered.
-
-For example:
-
-```js
-MyBundle.prototype.registration = function (architecture) {
-  architecture.service('typeService').register(MyTypeService);
-  architecture.extension('actions').register(
-    [ 'foo' ],
-    function (foo) { return new MyAction(foo); }
-  );
-};
-```
-
-### Benefits
-
-* Ensures that registration occurs at an appropriate stage of
-  application execution, avoiding start-up problems.
-* Makes registration explicit (generally easier to understand)
-  rather than implicit.
-* Encapsulates dependency injection nicely.
-
-### Detriments
-
-* Increases number of interfaces to learn.
-* Syntax likely to be awkward, since in many cases we really
-  want to be registering constructors.
-
-## Remove partial constructors
-
-Remove partial constructors; these are confusing. It is hard to
-recognize which constructor arguments are from dependencies, and
-which will be provided at run-time. Instead, it is the responsibility
-of whoever is introducing a component to manage these things
-separately.
-
-### Benefits
-
-* More clarity.
-
-### Detriments
-
-* Possibly results in redundant effort to manage this difference
-  (other APIs may need to be adjusted accordingly.)
-
-## Rename Views to Applications
-
-Rename (internally to the application, not necessarily in UI or
-in user guide) what are currently called `views` to `applications`.
-
-### Benefits
-
-* Easier to understand. What is currently called a "view" is,
-  in the MVC sense, a view-controller pair, usually with its own
-  internal model for view state. Calling these "applications"
-  would avoid this ambiguity/inconsistency.
-* Also provides an appropriate mindset for building these;
-  particularly, sets the expectation that you'll want to decompose
-  this "application" into smaller pieces. This nudges developers
-  in appropriate directions (in contrast to `views`, which
-  typically get implemented as templates with over-complicated
-  "controllers".)
-
-### Detriments
-
-* Developer terminology falls out of sync with what is used in
-  the user guide.
-
-## Provide Classes for Extensions
-
-As a general pattern, when introducing extension categories, provide
-classes with a standard implementation of these interfaces that
-plugin developers can `new` and register.
-
-For example, instead of declaring a type as:
-
-```json
-{
-  "types": [{
-    "key": "sometype",
-    "glyph": "X",
-    "etc": "..."
-  }]
-}
-```
-
-You would register one as:
-
-```js
-// Assume we have gotten a reference to a type registry somehow
-typeRegistry.register(new Type({
-    "key": "sometype",
-    "glyph": "X",
-    "etc": "..."
-}));
-```
-
-### Benefits
-
-* Easier to understand (less "magic").
-* Lends itself naturally to substitution of different implementations
-  of the same interface.
-* Allows for run-time decisions about exactly what gets registered.
-
-### Detriments
-
-* Adds some modest boilerplate.
-* Provides more opportunity to "do it wrong."
-
-## Normalize naming conventions
-
-Adopt and obey the following naming conventions for AMD modules
-(and for injectable dependencies, which may end up being modules):
-
-* Use `UpperCamelCase` for classes.
-* Use `lowerCase` names for instances.
-    * Use `someNoun` for object instances which implement some
-      interface. The noun should match the implemented interface,
-      when applicable.
-    * `useSomeVerb` for functions.
-* Use `ALL_CAPS_WITH_UNDERSCORES` for other values, including
-  "struct-like" objects (that is, where the object conceptually
-  contains properties rather than methods.)
-
-### Benefits
-
-* Once familiar with the conventions, easier to understand what
-  individual modules are.
-
-### Detriments
-
-* A little bit inflexible.
-
-## Expose no third-party APIs
-
-As a general practice, expose no third-party APIs as part of the
-platform.
-
-For cases where you do want to access third-party APIs directly
-from other scripts, this behavior should be "opt-in" instead of
-mandatory. For instance, to allow addition of Angular templates,
-an Angular-support bundle could be included which provides an
-`AngularView` class, a `controllerRegistry`, et cetera. Importantly,
-such a bundle would need to be kept separate from the platform API,
-or appropriately marked as non-platform in the API docs (an
-`@experimental` tag would be nice here if we feel like extending
-JSDoc.)
-
-### Benefits
-
-* Simplifies learning curve (only one API to learn.)
-* Reduces Angular dependency.
-* Avoids the problems of ubiquitous dependencies generally.
-
-### Detriments
-
-* Increases documentation burden.
-
-## Register Extensions as Instances instead of Constructors
-
-Register extensions as object instances instead of constructors.
-This allows for API flexibility w.r.t. constructor signatures
-(and avoids the need for partial constructors) and additionally
-makes it easier to provide platform implementations of extensions
-that can be used, subclassed, etc.
-
-For instance, instead of taking an `ActionContext` in its
-constructor, an `Action` would be instantiated once and would
-accept appropriate arguments to its methods:
-
-```js
-function SomeAction {
-}
-SomeAction.prototype.canHandle = function (actionContext) {
-    // Check if we can handle this context
-};
-SomeAction.prototype.perform = function (actionContext) {
-    // Perform this action, in this context
-};
-```
-
-### Benefits
-
-* Reduces scope of interfaces to understand (don't need to know
-  what constructor signature to provide for compatibility.)
-
-### Detriments
-
-* Requires refactoring of various types; may result in some
-  awkward APIs or extra factory interfaces.
-
-## Remove capability delegation
-
-The `delegation` capability has only been useful for the
-`telemetry` capability, but using both together creates
-some complexity to manage. In practice, these means that
-telemetry views need to go through `telemetryHandler` to
-get their telemetry, which in turn has an awkward API.
-
-This could be resolved by:
-
-* Removing `delegation` as a capability altogether.
-* Reworking `telemetry` capability API to account for
-  the possibility of multiple telemetry-providing
-  domain objects. (Perhaps just stick `domainObject`
-  in as a field in each property of `TelemetryMetadata`?)
-* Move the behavior currently found in `telemetryHandler`
-  into the `telemetry` capability itself (either the
-  generic version, or a version specific to telemetry
-  panels - probably want some distinct functionality
-  for each.)
-
-### Benefits
-
-* Reduces number of interfaces.
-* Accounting for the possibility of multiple telemetry objects
-  in the `telemetry` capability API means that views using
-  this will be more immediately aware of this as a possibility.
-
-### Detriments
-
-* Increases complexity of `telemetry` capability's interface
-  (although this could probably be minimized.)
-
-## Nomenclature Change
-
-Instead of presenting Open MCT as a "framework" or
-"platform", present it as an "extensible application."
-
-This is mostly a change for the developer guide. A
-"framework" and a "platform" layer would still be useful
-architecturally, but the plugin developer's mental model
-for this would then be inclined toward looking at defined
-extension points. The underlying extension mechanism could
-still be exposed to retain the overall expressive power of
-the application.
-
-This may subtly influence other design decisions in order
-to match the "extensible application" identity. On a certain
-level, this contradicts the proposal to
-[rename views to applications](#rename-views-to-applications).
-
-### Benefits
-
-* May avoid incurring some of the "framework aversion" that
-  is common among JavaScript developers.
-* More accurately describes the application.
-
-### Detriments
-
-* May also be a deterrent to developers who prefer the more
-  "green field" feel of developing applications on a useful
-  platform.
-
-## Capabilities as Mixins
-
-Change the behavior of capabilities such that they act as
-mixins, adding additional methods to domain objects.
-Checking if a domain object has a `persistence` capability
-would instead be reduced to checking if it has a `persist`
-method.
-
-Mixins would be applied in priority order and filtered for
-applicability by policy.
-
-### Benefits
-
-* Replaces "capabilities" (which, as a concept, can be hard
-  to grasp) with a more familiar "mixins" concept, which has
-  been used more generally across many languages.
-* Reduces interface depth.
-
-### Detriments
-
-* Requires checking for the interface exposed by a domain
-  object. Alternately, could use `instanceof`, but would
-  need to take care to ensure that the prototype chain of
-  the domain object is sufficient to do this (which may
-  enforce awkward or non-obvious constraints on the way these
-  mixins are implemented.)
-* May complicate documentation; understanding the interface
-  of a given domain object requires visiting documentation
-  for various mixins.
-
-## Remove Applies-To Methods
-
-Remove all `appliesTo` static methods and replace them with
-appropriate policy categories.
-
-### Benefits
-
-* Reduces sizes of interfaces. Handles filtering down sets
-  of extensions in a single consistent way.
-
-### Detriments
-
-* Mixes formal applicability with policy; presently, `appliesTo`
-  is useful for cases where a given extension cannot, even in
-  principle, be applied in a given context (e.g. a domain object
-  model is missing the properties which describe the behavior),
-  whereas policy is useful for cases where applicability is
-  being refined for business or usability reasons. Colocating
-  the former with the extension itself has some benefits
-  (exhibits better cohesion.)
-  * This could be mitigated in the proposed approach by locating
-    `appliesTo`-like policies in the same bundle as the relevant
-    extension.
-
-## Revise Telemetry API
-
-Revise telemetry API such that:
-
-* `TelemetrySeries` is replaced with arrays of JavaScript objects
-  with properties.
-* It is no longer necessary to use `telemetryHandler` (plays well
-  with proposal to
-  [remove capability delegation](#remove-capability delegation))
-* Change `request` call to take a callback, instead of returning
-  a promise. This allows that callback to be invoked several
-  times (e.g. for progressive loading, or to reflect changes from
-  the time conductor.)
-
-Should also consider:
-
-* Merge `subscribe` functionality into `request`; that is, handle
-  real-time data as just another thing that triggers the `request`
-  callback.
-* Add a useful API to telemetry metadata, allowing things like
-  formats to be retrieved directly from there.
-
-As a consequence of this, `request` would need to return an object
-representing the active request. This would need to be able to
-answer the following questions and provide the following behavior:
-
-* Has the request been fully filled? (For cases like progressive
-  loading?)
-* What data has changed since the previous callback? (To support
-  performance optimizations in plotting; e.g. append real-time
-  data.)
-* Stop receiving updates for this request.
-* Potentially, provide utility methods for dealing with incoming
-  data from the request.
-
-Corollary to this, some revision of `TelemetryMetadata` properties
-may be necessary to fully and usably describe the contents of
-a telemetry series.
-
-### Benefits
-
-* Reduces interface depth.
-* Reduces interface size (number of methods.)
-* Supports a broader range of behaviors (e.g. progressive loading)
-  within the same interface.
-
-### Detriments
-
-* Merging with `subscribe` may lose the clarity/simplicity of the
-  current API.
-
-## Allow Composite Services to Fail Gracefully
-
-Currently, when no providers are available for a composite service
-that is depended-upon, dependencies cannot be resolved and the
-application fails to initialize, with errors appearing in the
-developer console.
-
-This is acceptable behavior for truly unrecoverable missing
-dependencies, but in many cases it would be preferable to allow a
-given type of composite service to define some failure behavior
-when no service of an appropriate type is available.
-
-To address this:
-
-* Provide an interface (preferably
-  [imperative](#bundle-Declarations-in-javascript))
-  for declaring composite services, independent of any implementation
-  of an aggregator/decorator/provider. This allows the framework
-  layer to distinguish between unimplemented dependencies (which
-  could have defined failover strategies) from undefined dependencies
-  (which cannot.)
-* Provide a default strategy for service composition that picks
-  the highest-priority provider, and logs an error (and fails to
-  satisfy) if no providers have been defined.
-* Allow this aggregation strategy to be overridden, much as one
-  can declare aggregators currently. However, these aggregators should
-  get empty arrays when no providers have been registered (instead of
-  being ignored), at which point they can decide how to handle this
-  situation (graceful failure when it's possible, noisy errors when
-  it is not.)
-
-### Benefits
-
-* Allows for improved robustness and fault tolerance.
-* Makes service declarations explicit, reducing "magic."
-
-### Detriments
-
-* Requires the inclusion of software units which define services,
-  instead of inferring their existence (slight increase in amount
-  of code that needs to be written.)
-* May result in harder-to-understand errors when overridden
-  composition strategies do not failover well (that is, when they
-  do need at least implementation, but fail to check for this.)
-
-## Plugins as Angular Modules
-
-Do away with the notion of bundles entirely; use Angular modules
-instead. Registering extensions or components of composite services
-would then be handled by configuring a provider; reusable classes
-could be exposed by the platform for these.
-
-Example (details are flexible, included for illustrative purposes):
-
-```javascript
-var mctEdit = angular.module('mct-edit', ['ng', 'mct']);
-
-// Expose a new extension category
-mctEdit.provider('actionRegistry', ExtensionCategoryProvider);
-
-// Expose a new extension
-mctEdit.config(['actionRegistryProvider', function (arp) {
-    arp.register(EditPropertiesAction);
-}])
-
-return mctEdit;
-```
-
-Incompatible with proposal to
-(expose no third-party APIs)[#expose-no-third-party-apis]; Angular
-API would be ubiquitously exposed.
-
-This is a more specific variant of
-(Bundle Declarations in JavaScript)[#bundle-declarations-in-javascript].
-
-### Benefits
-
-* Removes a whole category of API (bundle definitions), reducing
-  learning curve associated with the software.
-* Closer to Angular style, reducing disconnect between learning
-  Angular and learning Open MCT (reducing burden of having
-  to learn multiple paradigms.)
-* Clarifies "what can be found where" (albeit not perfectly)
-  since you can look to module dependencies and follow back from there.
-
-### Detriments
-
-* Hardens dependency on Angular.
-* Increases depth of understanding required of Angular.
-* Increases amount of boilerplate (since a lot of this has
-  been short-handed by existing framework layer.)
-
-## Contextual Injection
-
-For extensions that depend on certain instance-level run-time
-properties (e.g. actions or views which use objects and/or specific
-capabilities of those objects), declare these features as dependencies
-and expose them via dependency injection. (AngularJS does this for
-`$scope` in the context of controllers, for example.)
-
-A sketch of an implementation for this might look like:
-
-```js
-function ExtensionRegistry($injector, extensions, getLocals) {
-    this.$injector = $injector;
-    this.extensions = extensions;
-    this.getLocals = getLocals;
-}
-ExtensionRegistry.prototype.get = function () {
-    var $injector = this.$injector,
-        locals = this.getLocals.apply(null, arguments);
-    return this.extensions.filter(function (extension) {
-        return depsSatisfiable(extension, $injector, locals);
-    }).map(function (extension) {
-        return $injector.instantiate(extension, locals);
-    });
-};
-
-
-function ExtensionRegistryProvider(getLocals) {
-    this.getLocals = getLocals || function () { return {}; };
-    this.extensions = [];
-}
-ExtensionRegistryProvider.prototype.register = function (extension) {
-    this.extensions.push(extension);
-};
-ExtensionRegistryProvider.prototype.$get = ['$injector', function ($injector) {
-    return new ExtensionRegistry($injector, this.extensions, this.getLocals);
-}];
-```
-
-Extension registries which need to behave context-sensitively could
-subclass this to describe how these contextual dependencies are satisfied
-(for instance, by returning various capability properties in `getLocals`).
-
-Specific extensions could then declare dependencies as appropriate to the
-registry they are using:
-
-```js
-app.config(['actionRegistryProvider', function (arp) {
-    arp.register(['contextCapability', 'domainObject', RemoveAction]);
-}]);
-```
-
-### Benefits
-
-* Allows contextual dependencies to be fulfilled in the same (or similar)
-  manner as global dependencies, increasing overall consistency of API.
-* Clarifies dependencies of individual extensions (currently, extensions
-  themselves or policies generally need to imperatively describe what
-  dependencies will be used in order to filter down to applicable
-  extensions.)
-* Factors out some redundant code from relevant extensions; actions,
-  for instance, no longer need to interpret an `ActionContext` object.
-  Instead, their constructors take inputs that are more relevant to
-  their behavior.
-* Removes need for partial construction, as any arguments which would
-  normally be appended after partialization can instead be declared as
-  dependencies. Constructors in general become much less bound to the
-  specifics of the platform.
-
-### Detriments
-
-* Slightly increases dependency on Angular; other dependency injectors
-  may not offer comparable ways to specificy dependencies non-globally.
-* Not clear (or will take effort to make clear) which dependencies are
-  available for which extensions. Could be mitigated by standardizing
-  descriptions of context across actions and views, but that may offer
-  its own difficulties.
-* May seem counter-intuitive coming from "vanilla" AngularJS, where
-  `$scope` is the only commonly-used context-sensitive dependency.
-
-## Add new abstractions for actions
-
-Originally suggested in
-[this comment](https://github.com/nasa/openmctweb/pull/69#issuecomment-156199991):
-
-> I think there are some grey areas with actions: are they all directly
-tied to user input?  If so, why do they have any meaning in the back end?
-Maybe we should look at different abstractions for actions:
-
-> * `actions` - the basic implementation of an action, essentially a
-    function declaration. for example, `copy` requires arguments of
-    `object` and a `target` to place the object in.  at this level,
-    it is reusable in a CLI.
-> * `context menu actions` - has criteria for what it applies to.
-    when it is visible, and defines how to get extra > input from a
-    user to complete that action. UI concern only.
-> * `gesture-handler` - allows for mapping a `gesture` to an action,
-    e.g. drag and drop for link.  UI Concern only.
-
-> We could add context menu actions for domain objects which navigate
-to that object, without having to implement an action that has no real
-usage on a command line / backend.
-
-### Benefits
-
-* Clearly delineates concerns (UI versus model)
-
-### Detriments
-
-* Increases number of interfaces.
-
-## Add gesture handlers
-
-See [Add new abstractions for actions](#add-new-abstractions-for-actions);
-adding an intermediary between gestures and the actions that they
-trigger could be useful in separating concerns, and for more easily
-changing mappings in a mobile context.
-
-### Benefits
-
-* Clearly decouples UI concerns from the underlying model changes
-  they initiate.
-* Simplifies and clarifies mobile support.
-
-### Detriments
-
-* Increases number of interfaces.
-
-# Decisions
-
-After review on Dec. 8, 2015, team consensus on these proposals is
-as follows:
-
-Proposal | @VWoeltjen | @larkin | @akhenry | Consensus
-----|:---:|:---:|:---:|:---:
-RequireJS as dependency injector | :-1: | :neutral_face: :question:  | [:-1:](https://github.com/nasa/openmctweb/pull/69#discussion_r44349731) | [:question:](https://github.com/nasa/openmctweb/issues/461)
-Arbitrary HTML Views | :+1: | :+1: | | [:+1: <sup>1</sup>](https://github.com/nasa/openmctweb/issues/463)
-Wrap Angular Services | :-1: | [:-1:](https://github.com/nasa/openmctweb/pull/69#discussion_r43801221) | [:-1:](https://github.com/nasa/openmctweb/pull/69#discussion_r44355057) | :no_entry_sign:
-Bundle Declarations in JavaScript | :+1: | :neutral_face: :question:  | | [:+1:](https://github.com/nasa/openmctweb/issues/450)
-Pass around a dependency injector | :-1: | :-1:  | | :-1:
-Remove partial constructors | :+1: | :+1:  | | [:+1:](https://github.com/nasa/openmctweb/issues/462)
-Rename Views to ~~Applications~~ | :+1: | :neutral_face: :question: | | [:+1: <sup>2</sup>](https://github.com/nasa/openmctweb/issues/463)
-Provide Classes for Extensions | :+1: | :+1: | | [:+1:](https://github.com/nasa/openmctweb/issues/462)
-Normalize naming conventions | :+1: | :+1: | | :+1:
-Expose no third-party APIs | :+1: &ast; | [:-1:](https://github.com/nasa/openmctweb/pull/69#discussion_r43801221) | [:+1:](https://github.com/nasa/openmctweb/pull/69#discussion_r43801221) &dagger; | :+1: <sup>3</sup>
-Register Extensions as Instances instead of Constructors | :+1: | :-1: | | [:+1:](https://github.com/nasa/openmctweb/issues/462)
-Remove capability delegation | :+1: | :+1: | | [:+1:](https://github.com/nasa/openmctweb/issues/463)
-Nomenclature Change | :+1: | [:+1:](https://github.com/nasa/openmctweb/issues/229#issuecomment-153453035) | | :white_check_mark: &Dagger;
-Capabilities as Mixins | | :+1: | [:+1:](https://github.com/nasa/openmctweb/pull/69#discussion_r44355473) | [:question: <sup>4</sup>](https://github.com/nasa/openmctweb/issues/463)
-Remove Applies-To Methods | | :-1: | | :-1:
-Revise Telemetry API | :+1: | :+1: | | [:+1: <sup>5</sup>](https://github.com/nasa/openmctweb/issues/463)
-Allow Composite Services to Fail Gracefully | :+1: | :-1: | | [:+1: <sup>6</sup>](https://github.com/nasa/openmctweb/issues/463)
-Plugins as Angular Modules | :+1: | :neutral_face: :question:  | | [:question:](https://github.com/nasa/openmctweb/issues/461)
-Contextual Injection | | :-1: | | [:question:](https://github.com/nasa/openmctweb/issues/461)
-Add new abstractions for actions | [:-1:](https://github.com/nasa/openmctweb/pull/69#issuecomment-158172485) :question:  | :+1: | | :-1:
-Add gesture handlers | :+1: | :+1: :question:  | | [:+1:](https://github.com/nasa/openmctweb/issues/463)
-
-&ast; Excepting Angular APIs. Internally, continue to use code style
-where classes are declared separately from their registration, such
-that ubiquity of Angular dependency is minimized.
-
-&dagger; "I think we should limit the third party APIs we expose to
-one or two, but I worry it might be counterproductive to
-completely hide them."
-
-&Dagger; Some ambiguity about what to call ourselves if not a platform,
-but general agreement that "platform" is not a good term.
-More Detail on Pete's Opinions Here:
-https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign_PeteRichards.md#notes-on-current-api-proposals
-
-<sup>1</sup> Needs to be designed carefully; don't want to do this with
-a complicated interface, needs to be significantly simpler than wrapping
-with an Angular directive would be.
-
-<sup>2</sup> Agree that we need a new name, but it should not be "application"
-
-<sup>3</sup> Don't want to expose (or require usage of) third-party
-APIs generally. Angular may be an exception in the sense that it is an
-API we presume to be present. Can use third-party APIs internally, but
-don't want to support them or be tied to them.
-
-<sup>4</sup> Want to have a separate spin-off discussion about
-capabilities. Want to consider several alternatives here.
-At minimum, though, mixins would be an improvement relative
-to how these are currently handled.
-
-<sup>5</sup> Agree we want to revise APIs, but this should
-be a larger spin-off.
-
-<sup>6</sup> Not necessarily as described, but expected to be a
-property of composite services in whatever formulation they
-take. Should not be default behavior.
-
-
-[Additional proposals](APIRedesign_PeteRichards.md) considered:
-
-Proposal | Consensus
-------|------
-Imperitive component registries | [:+1:](https://github.com/nasa/openmctweb/issues/462)
-Get rid of "extension category" concept. | [:+1:](https://github.com/nasa/openmctweb/issues/462)
-Reduce number and depth of extension points | :+1:
-Composite services should not be the default | [:question:](https://github.com/nasa/openmctweb/issues/463)
-Get rid of views, representations, and templates. | [:+1: <sup>1</sup>](https://github.com/nasa/openmctweb/issues/463)
-More angular: for all services | [:question:](https://github.com/nasa/openmctweb/issues/461)
-Less angular: only for views | [:question:](https://github.com/nasa/openmctweb/issues/461)
-Use systemjs for module loading | [:+1: <sup>2</sup>](https://github.com/nasa/openmctweb/issues/459)
-Use gulp or grunt for standard tooling | [:+1:](https://github.com/nasa/openmctweb/issues/459)
-Package openmctweb as single versioned file. | [:+1:](https://github.com/nasa/openmctweb/issues/458)
-Refresh on navigation | [:+1: <sup>3</sup>](https://github.com/nasa/openmctweb/issues/463)
-Move persistence adapter to promise rejection. | [:+1:](https://github.com/nasa/openmctweb/issues/463)
-Remove bulk requests from providers | [:+1: <sup>4</sup>](https://github.com/nasa/openmctweb/issues/463)
-
-<sup>1</sup> Need to agree upon details at design-time, but
-basic premise is agreed-upon - want to replace
-views/representations/templates with a common abstraction
-(and hoist out the non-commonalities to other places as appropriate)
-
-<sup>2</sup> Beneficial but not strictly necessary (may be
-lower-effort alternatives); should prioritize accordingly during planning
-
-<sup>3</sup> Some effort will be required to make all of the state
-that needs to persist among route changes actually be persistent.
-Will want to address this at design-time (will want to look at
-libraries to simplify this, for instance)
-
-<sup>4</sup> Maybe not all providers, but anywhere there is not a
-strong case for building batching into the API we should prefer
-simplicity. (Want to pay specific attention to telemetry here.)
diff --git a/docs/src/design/proposals/APIRedesign_PeteRichards.md b/docs/src/design/proposals/APIRedesign_PeteRichards.md
deleted file mode 100644
index 517d61cc505..00000000000
--- a/docs/src/design/proposals/APIRedesign_PeteRichards.md
+++ /dev/null
@@ -1,251 +0,0 @@
-<!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
-
-- [Reducing interface depth (the bundle.json version)](#reducing-interface-depth-the-bundlejson-version)
-  - [Imperitive component registries](#imperative-component-registries)
-  - [Get rid of "extension category" concept.](#get-rid-of-extension-category-concept)
-  - [Reduce number and depth of extension points](#reduce-number-and-depth-of-extension-points)
-  - [Composite services should not be the default](#composite-services-should-not-be-the-default)
-  - [Get rid of views, representations, and templates.](#get-rid-of-views-representations-and-templates)
-- [Reducing interface depth (The angular discussion)](#reducing-interface-depth-the-angular-discussion)
-  - [More angular: for all services](#more-angular-for-all-services)
-  - [Less angular: only for views](#less-angular-only-for-views)
-- [Standard packaging and build system](#standard-packaging-and-build-system)
-  - [Use systemjs for module loading](#use-systemjs-for-module-loading)
-  - [Use gulp or grunt for standard tooling](#use-gulp-or-grunt-for-standard-tooling)
-  - [Package openmctweb as single versioned file.](#package-openmctweb-as-single-versioned-file)
-- [Misc Improvements](#misc-improvements)
-  - [Refresh on navigation](#refresh-on-navigation)
-  - [Move persistence adapter to promise rejection.](#move-persistence-adapter-to-promise-rejection)
-  - [Remove bulk requests from providers](#remove-bulk-requests-from-providers)
-- [Notes on current API proposals:](#notes-on-current-api-proposals)
-- [[1] Footnote: The angular debacle](#1-footnote-the-angular-debacle)
-  - ["Do or do not, there is no try"](#do-or-do-not-there-is-no-try)
-  - [A lack of commitment](#a-lack-of-commitment)
-  - [Commitment is good!](#commitment-is-good)
-
-<!-- END doctoc generated TOC please keep comment here to allow auto update -->
-
-
-# Reducing interface depth (the bundle.json version)
-
-## Imperative component registries 
-
-Transition component registries to javascript, get rid of bundle.json and bundles.json.  Prescribe a method for application configuration, but allow flexibility in how application configuration is defined.
-
-Register components in an imperative fashion, see angularApp.factory, angularApp.controller, etc.  Alternatively, implement our own application object with new registries and it's own form of registering objects.
-
-## Get rid of "extension category" concept.
-
-The concept of an "extension category" is itself an extraneous concept-- an extra layer of interface depth, an extra thing to learn before you can say "hello world".  Extension points should be clearly supported and documented with whatever interfaces make sense.  Developers who wish to add something that is conceptually equivalent to an extension category can do so directly, in the manner that suites their needs, without us forcing a common method on them.
-
-## Reduce number and depth of extension points
-
-Clearly specify supported extension points (e.g. persistence, model providers, telemetry providers, routes, time systems), but don't claim that the system has a clear and perfect repeatable solution for unknown extension types.  New extension categories can be implemented in whatever way makes sense, without prescribing "the one and only system for managing extensions".
-
-The underlying problem here is we are predicting needs for extension points where none exist-- if we try and design the extension system before we know how it is used, we design the wrong thing and have to rewrite it later.
-
-## Composite services should not be the default
-
-Understanding composite services, and describing services as composite services can confuse developers.  Aggregators are implemented once and forgotten, while decorators tend to be hacky, brittle solutions that are generally needed to avoid circular imports.  While composite services are a useful construct, it reduces interface depth to implement them as registries + typed providers.
-
-You can write a provider (provides "thing x" for "inputs y") with a simple interface.  A provider has two or more methods:
-* a method which takes "inputs y" and returns True if it knows how to provide "thing x", false otherwise.
-* one or more methods which provide "thing x" for objects of "inputs y".  
-
-Actually checking whether a provider can respond to a request before asking it to do work allows for faster failure and clearer errors when no providers match the request.
-
-## Get rid of views, representations, and templates.
-
-Templates are an implementation detail that should be handled by module loaders.  Views and representations become "components," and a new concept, "routes", is used to exposing specific views to end users.
-
-`components` - building blocks for views, have clear inputs and outputs, and can be coupled to other components when it makes sense.  (e.g. parent-child components such as menu and menu item), but should have ZERO knowledge of our data models or telemetry apis.  They should define data models that enable them to do their job well while still being easy to test.
-
-`routes` - a view type for a given domain object, e.g. a plot, table, display layout, etc.  Can be described as "whatever shows in the main screen when you are viewing an object."  Handle loading of data from a domain object and passing that data to the view components.  Routes should support editing as it makes sense in their own context.
-
-To facilitate testing:
-
-* routes should be testable without having to test the actual view.
-* components should be independently testable with zero knowledge of our data models or telemetry APIs.
-
-Component code should be organized side by side, such as:
-
-```
-app
-|- components
-  |- productDetail
-  | |- productDetail.js
-  | |- productDetail.css
-  | |- productDetail.html
-  | |- productDetailSpec.js
-  |- productList
-  |- checkout
-  |- wishlist
-```
-
-Components are not always reusable, and we shouldn't be overly concerned with making them so.  If components are heavily reused, they should either be moved to a platform feature (e.g. notifications, indicators), or broken off as an external dependency (e.g. publish mct-plot as mct-plot.js).
-
-
-# Reducing interface depth (The angular discussion)
-
-Two options here: use more angular, use less angular.  Wrapping angular methods does not reduce interface depth and must be avoided.
-
-The primary issue with angular is duplications of concerns-- both angular and the openmctweb platform implement the same tools side by side and it can be hard to comprehend-- it increases interface depth.  For other concerns, see footnotes[1].
-
-Wrapping angular methods for non-view related code is confusing to developers because of the random constraints angular places on these items-- developers ultimately have to understand both angular DI and our framework.  For example, it's not possible to name the topic service "topicService" because angular expects Services to be implemented by Providers, which is different than our expectation.
-
-To reduce interface depth, we can replace our own provider and registry patterns with angular patterns, or we can only utilize angular view logic, and only use our own DI patterns.
-
-## More angular: for all services
-
-Increasing our commitment to angular would mean using more of the angular factories, services, etc, and less of our home grown tools.  We'd implement our services and extension points as angular providers, and make them configurable via app.config.
-
-As an example, registering a specific type of model provider in angular would look like:
-
-```javascript
-mct.provider('model', modelProvider() { /* implementation */});
-
-mct.config(['modelProvider', function (modelProvider) {
-    modelProvider.providers.push(RootModelProvider);
-}]);
-```
-
-## Less angular: only for views
-
-If we wish to use less angular, I would recommend discontinuing use of all angular components that are not view related-- services, factories, $http, etc, and implementing them in our own paradigm.  Otherwise, we end up with layered interfaces-- one of the goals we would like to avoid.
-
-
-# Standard packaging and build system
-
-Standardize the packaging and build system, and completely separate the core platform from deployments.  Prescribe a starting point for deployments, but allow flexibility.
-
-## Use systemjs for module loading
-
-Allow developers to use whatever module loading system they'd like to use, while still supporting all standard cases.  We should also use this system for loading assets (css, scss, html templates), which makes it easier to implement a single file deployment using standard build tooling.
-
-## Use gulp or grunt for standard tooling
-
-Using gulp or grunt as a task runner would bring us in line with standard web developer workflows and help standardize rendering, deployment, and packaging.  Additional tools can be added to the workflow at low cost, simplifying the setup of developer environments.
-
-Gulp and grunt provide useful developer tooling such as live reload, automatic scss/less/etc compilation, and ease of extensibility for standard production build processes.  They're key in decoupling code.
-
-## Package openmctweb as single versioned file.
-
-Deployments should depend on a specific version of openmctweb, but otherwise be allowed to have their own deployment and development toolsets.
-
-Customizations and deployments of openmctweb should not use the same build tooling as the core platform; instead they should be free to use their own build tools as they wish.  (We would provide a template for an application, based on our experience with warp-for-rp and vista)
-
-Installation and utilization of openmctweb should be as simple as downloading the js file, including it in your own html page, and then initializing an app and running it.  If a developer would prefer, they could use bower or npm to handle installation. 
-
-Then, if we're using imperative methods for extending the application we can use the following for basic customization:
-
-```html
-<script src="//localhost/openmctweb.js"></script>
-<script>
-// can configure from object
-var myApp = new OpenMCTWeb({
-  persitence: {
-    providers: [
-      {
-        type: 'elastic',
-        uri: 'http://someElasticHost/'
-      } // ...
-    ]
-  }
-});
-
-// alternative configurations
-myApp.persistence.addProvider(MyPersistenceAdapter); 
-myApp.model.addProvider(someProviderObject);
-
-// Removing via method
-myApp.persistence.removeProvider('some method for removing functionality');
-// directly mutating providers
-myApp.persistence.providers = [ThisProviderStandsAlone];
-//
-myApp.run();
-</script>
-```
-
-This packaging reduces the complexity of managing multiple deployed versions, and also allows us to provide users with incredibly simple tutorials-- they can use whatever tooling they like.  For instance, a hello world tutorial may take the option of "exposing a new object in the tree".
-
-```javascript
-var myApp = new OpenMCTWeb();
-myApp.roots.addRoot({
-    id: 'myRoot',
-    name: 'Hello World!',
-});
-myApp.routes.setDefault('myRoot');
-myApp.run();
-```
-
-# Misc Improvements
- 
-## Refresh on navigation
-In cases where navigation events change the entire screen, we should be using routes and location changes to navigate between objects.  We should be using href for all navigation events.
-
-At the same time, navigating should refresh state of every visible object.  A properly configured persistence store will handle caching with standard cache headers and 304 not modified responses, which will provide good performance of object reloads, while helping us ensure that objects are always in sync between clients.
-
-View state (say, the expanded tree nodes) should not be tied to caching of data-- it should be something we intentionally persist and restore with each navigation.  Data (such as object definitions) should be reloaded from server as necessary to restore state.
-
-## Move persistence adapter to promise rejection.
-Simple: reject on fail, resolve on success.
-
-## Remove bulk requests from providers
-
-Aggregators can request multiple things at once, but individual providers should only have to implement handling at the level of a single request.  Each provider can implement it's own internal batching, but it should support making requests at a finer level of detail.  
-
-Excessive wrapping of code with $q.all causes additional digest cycles and decreased performance.
-
-For example, instead of every telemetry provider responding to a given telemetry request, aggregators should route each request to the first provider that can fulfill that request.
-
-
-# Notes on current API proposals:
-
-* [RequireJS for Dependency Injection](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#requirejs-as-dependency-injector): requires other topics to be discussed first.
-* [Arbitrary HTML Views](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#arbitrary-html-views): think there is a place for it, requires other topics to be discussed first.
-* [Wrap Angular Services](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#wrap-angular-services): No, this is bad.
-* [Bundle definitions in Javascript](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#bundle-declarations-in-javascript): Points to a solution, but ultimately requires more discussion.
-* [pass around a dependency injector](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#pass-around-a-dependency-injector): No.
-* [remove partial constructors](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#remove-partial-constructors): Yes, this should be superseded by another proposal though.  The entire concept was a messy solution to dependency injection issues caused by declarative syntax.
-* [Rename views to applications](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#rename-views-to-applications): Points to a problem that needs to be solved but I think the name is bad.
-* [Provide classes for extensions](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#provide-classes-for-extensions): Yes, in specific places
-* [Normalize naming conventions](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#normalize-naming-conventions): Yes.
-* [Expose no third-party APIs](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#expose-no-third-party-apis): Completely disagree, points to a real problem with poor angular integration.
-* [Register Extensions as Instances instead of Constructors](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#register-extensions-as-instances-instead-of-constructors): Superseded by the fact that we should not hope to implement a generic construct.
-* [Remove capability delegation](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#remove-capability-delegation): Yes.
-* [Nomenclature Change](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#nomenclature-change): Yes, hope to discuss the implications of this more clearly in other proposals.
-* [Capabilities as mixins](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#capabilities-as-mixins): Yes.
-* [Remove appliesTo methods](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#remove-applies-to-methods): No-- I think some level of this is necessary.  I think a more holistic approach to policy is needed.  it's a rather complicated system.
-* [Revise telemetry API](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#revise-telemetry-api): If we can rough out and agree to the specifics, then Yes.  Needs discussion.
-* [Allow composite services to fail gracefully](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#allow-composite-services-to-fail-gracefully): No.  As mentioned above, I think composite services themselves should be eliminated for a more purpose bound tool.
-* [Plugins as angular modules](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#plugins-as-angular-modules): Should we decide to embrace Angular completely, I would support this.  Otherwise, no.
-* [Contextual Injection](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#contextual-injection): No, don't see a need.
-* [Add New Abstractions for Actions](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#add-new-abstractions-for-actions): Worth a discussion.
-* [Add gesture handlers](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#add-gesture-handlers): Yes if we can agree on details.  We need a platform implementation that is easy to use, but we should not reinvent the wheel.
-
-
-
-# [1] Footnote: The angular debacle
-
-## "Do or do not, there is no try"
-
-A commonly voiced concern of embracing angular is the possibility of becoming dependent on a third party framework.  This concern is itself detrimental-- if we're afraid of becoming dependent on a third party framework, then we will do a bad job of using the framework, and inevitably will want to stop using it.  
-
-If we're using a framework, we need to use it fully, or not use it at all.
-
-## A lack of commitment
-
-A number of the concerns we heard from developers and interns can be attributed to the tenuous relationship between the OpenMCTWeb platform and angular.  We claimed to be angular, but we weren't really angular.  Instead, we are caught between our incomplete framework paradigm and the angular paradigm.  In many cases we reinvented the wheel or worked around functionality that angular provides, and ended up in a more confusing state.
-
-## Commitment is good!
-
-We could just be an application that is built with angular.  
-
-An application that is modular and extensible not because it reinvents tools for providing modularity and extensibility, but because it reuses existing tools for modularity and extensibility.
-
-There are benefits to buying into the angular paradigm: shift documentation burden to external project, engage a larger talent pool available both as voluntary open source contributors and as experienced developers for hire, and gain access to an ecosystem of tools that we can use to increase the speed of development.
-
-There are negatives too: Angular is a monolith, it has performance concerns, and an unclear future.  If we can't live with it, we should look at alternatives.
-
diff --git a/docs/src/design/proposals/ImperativePlugins.md b/docs/src/design/proposals/ImperativePlugins.md
deleted file mode 100644
index 1fbb83b1bc8..00000000000
--- a/docs/src/design/proposals/ImperativePlugins.md
+++ /dev/null
@@ -1,164 +0,0 @@
-# Imperative Plugins
-
-This is a design proposal for handling
-[bundle declarations in JavaScript](
-APIRedesign.md#bundle-declarations-in-javascript).
-
-## Developer Use Cases
-
-Developers will want to use bundles/plugins to (in rough order
-of occurrence):
-
-1. Add new extension instances.
-2. Use existing services
-3. Add new service implementations.
-4. Decorate service implementations.
-5. Decorate extension instances.
-6. Add new types of services.
-7. Add new extension categories.
-
-Notably, bullets 4 and 5 above are currently handled implicitly,
-which has been cited as a source of confusion.
-
-## Interfaces
-
-Two base classes may be used to satisfy these use cases:
-
- * The `CompositeServiceFactory` provides composite service instances.
-   Decorators may be added; the approach used for compositing may be
-   modified; and individual services may be registered to support compositing.
- * The `ExtensionRegistry` allows for the simpler case where what is desired
-   is an array of all instances of some kind of thing within the system.
-
-Note that additional developer use cases may be supported by using the
-more general-purpose `Registry`
-
-```nomnoml
-[Factory.<T, V>
-  |
-  - factoryFn : function (V) : T
-  |
-  + decorate(decoratorFn : function (T, V) : T, options? : RegistrationOptions)
-]-:>[function (V) : T]
-
-[RegistrationOptions |
-  + priority : number or string
-]
-
-[Registry.<T, V>
-  |
-  - compositorFn : function (Array.<T>) : V
-  |
-  + register(item : T, options? : RegistrationOptions)
-  + composite(compositorFn : function (Array.<T>) : V, options? : RegistrationOptions)
-]-:>[Factory.<V, Void>]
-[Factory.<V, Void>]-:>[Factory.<T, V>]
-
-[ExtensionRegistry.<T>]-:>[Registry.<T, Array.<T>>]
-[Registry.<T, Array.<T>>]-:>[Registry.<T, V>]
-
-[CompositeServiceFactory.<T>]-:>[Registry.<T, T>]
-[Registry.<T, T>]-:>[Registry.<T, V>]
-```
-
-## Examples
-
-### 1. Add new extension instances.
-
-```js
-// Instance-style registration
-mct.types.register(new mct.Type({
-    key: "timeline",
-    name: "Timeline",
-    description: "A container for activities ordered in time."
-});
-
-// Factory-style registration
-mct.actions.register(function (domainObject) {
-    return new RemoveAction(domainObject);
-}, { priority: 200 });
-```
-
-### 2. Use existing services
-
-```js
-mct.actions.register(function (domainObject) {
-    var dialogService = mct.ui.dialogServiceFactory();
-    return new PropertiesAction(dialogService, domainObject);
-});
-```
-
-### 3. Add new service implementations
-
-```js
-// Instance-style registration
-mct.persistenceServiceFactory.register(new LocalPersistenceService());
-
-// Factory-style registration
-mct.persistenceServiceFactory.register(function () {
-    var $http = angular.injector(['ng']).get('$http');
-    return new LocalPersistenceService($http);
-});
-```
-
-### 4. Decorate service implementations
-
-```js
-mct.modelServiceFactory.decorate(function (modelService) {
-    return new CachingModelDecorator(modelService);
-}, { priority: 100 });
-```
-
-### 5. Decorate extension instances
-
-```js
-mct.capabilities.decorate(function (capabilities) {
-    return capabilities.map(decorateIfApplicable);
-});
-```
-
-This use case is not well-supported by these API changes. The most
-common case for decoration is capabilities, which are under reconsideration;
-should consider handling decoration of capabilities in a different way.
-
-### 6. Add new types of services
-
-```js
-myModule.myServiceFactory = new mct.CompositeServiceFactory();
-
-// In cases where a custom composition strategy is desired
-myModule.myServiceFactory.composite(function (services) {
-    return new MyServiceCompositor(services);
-});
-```
-
-### 7. Add new extension categories.
-
-```js
-myModule.hamburgers = new mct.ExtensionRegistry();
-```
-
-## Evaluation
-
-### Benefits
-
-* Encourages separation of registration from declaration (individual
-  components are decoupled from the manner in which they are added
-  to the architecture.)
-* Minimizes "magic." Dependencies are acquired, managed, and exposed
-  using plain-old-JavaScript without any dependency injector present
-  to obfuscate what is happening.
-* Offers comparable expressive power to existing APIs; can still
-  extend the behavior of platform components in a variety of ways.
-* Does not force or limit formalisms to use;
-
-### Detriments
-
-* Does not encourage separation of dependency acquisition from
-  declaration; that is, it would be quite natural using this API
-  to acquire references to services during the constructor call
-  to an extension or service. But, passing these in as constructor
-  arguments is preferred (to separate implementation from architecture.)
-* Adds (negligible?) boilerplate relative to declarative syntax.
-* Relies on factories, increasing number of interfaces to be concerned
-  with.
\ No newline at end of file
diff --git a/docs/src/design/proposals/Roles.md b/docs/src/design/proposals/Roles.md
deleted file mode 100644
index 6148d47566d..00000000000
--- a/docs/src/design/proposals/Roles.md
+++ /dev/null
@@ -1,138 +0,0 @@
-# Roles
-
-Roles are presented as an alternative formulation to capabilities
-(dynamic behavior associated with individual domain objects.)
-
-Specific goals here:
-
-* Dependencies of individual scripts should be clear.
-* Domain objects should be able to selectively exhibit a wide
-  variety of behaviors.
-
-## Developer Use Cases
-
-1. Checking for the existence of behavior.
-2. Using behavior.
-3. Augmenting existing behaviors.
-4. Overriding existing behaviors.
-5. Adding new behaviors.
-
-## Overview of Proposed Solution
-
-Remove `getCapability` from domain objects; add roles as external
-services which can be applied to domain objects.
-
-## Interfaces
-
-```nomnoml
-[Factory.<T, V>
-  |
-  - factoryFn : function (V) : T
-  |
-  + decorate(decoratorFn : function (T, V) : T, options? : RegistrationOptions)
-]-:>[function (V) : T]
-
-[RegistrationOptions |
-  + priority : number or string
-]<:-[RoleOptions |
-  + validate : function (DomainObject) : boolean
-]
-
-[Role.<T> |
-  + validate(domainObject : DomainObject) : boolean
-  + decorate(decoratorFn : function (T, V) : T, options? : RoleOptions)
-]-:>[Factory.<T, DomainObject>]
-[Factory.<T, DomainObject>]-:>[Factory.<T, V>]
-```
-
-## Examples
-
-### 1. Checking for the existence of behavior
-
-```js
-function PlotViewPolicy(telemetryRole) {
-    this.telemetryRole = telemetryRole;
-}
-PlotViewPolicy.prototype.allow = function (view, domainObject) {
-    return this.telemetryRole.validate(domainObject);
-};
-```
-
-### 2. Using behavior
-
-```js
-PropertiesAction.prototype.perform = function () {
-    var mutation = this.mutationRole(this.domainObject);
-    return this.showDialog.then(function (newModel) {
-        return mutation.mutate(function () {
-            return newModel;
-        });
-    });
-};
-```
-
-### 3. Augmenting existing behaviors
-
-```js
-// Non-Angular style
-mct.roles.persistenceRole.decorate(function (persistence) {
-    return new DecoratedPersistence(persistence);
-});
-
-// Angular style
-myModule.decorate('persistenceRole', ['$delegate', function ($delegate) {
-    return new DecoratedPersistence(persistence);
-}]);
-```
-
-### 4. Overriding existing behaviors
-
-```js
-// Non-Angular style
-mct.roles.persistenceRole.decorate(function (persistence, domainObject) {
-    return domainObject.getModel().type === 'someType' ?
-            new DifferentPersistence(domainObject) :
-            persistence;
-}, {
-    validate: function (domainObject, next) {
-        return domainObject.getModel().type === 'someType' || next();
-    }
-});
-```
-
-### 5. Adding new behaviors
-
-```js
-function FooRole() {
-    mct.Role.apply(this, [function (domainObject) {
-        return new Foo(domainObject);
-    }]);
-}
-
-FooRole.prototype = Object.create(mct.Role.prototype);
-
-FooRole.prototype.validate = function (domainObject) {
-    return domainObject.getModel().type === 'some-type';
-};
-
-//
-myModule.roles.fooRole = new FooRole();
-```
-
-
-## Evaluation
-
-### Benefits
-
-* Simplifies/standardizes augmentation or replacement of behavior associated
-  with specific domain objects.
-* Minimizes number of abstractions; roles are just factories.
-* Clarifies dependencies; roles used must be declared/acquired in the
-  same manner as services.
-
-### Detriments
-
-* Externalizes functionality which is conceptually associated with a
-  domain object.
-* Relies on factories, increasing number of interfaces to be concerned
-  with.
\ No newline at end of file
diff --git a/docs/src/guide/index.md b/docs/src/guide/index.md
deleted file mode 100644
index 00fcae35b78..00000000000
--- a/docs/src/guide/index.md
+++ /dev/null
@@ -1,2456 +0,0 @@
-# Open MCT Developer Guide
-Victor Woeltjen
-
-[victor.woeltjen@nasa.gov](mailto:victor.woeltjen@nasa.gov)
-
-September 23, 2015  
-Document Version 1.1  
-
-Date                | Version   | Summary of Changes        | Author
-------------------- | --------- | ------------------------- | ---------------
-April 29, 2015      | 0         | Initial Draft             | Victor Woeltjen
-May 12, 2015        | 0.1       |                           | Victor Woeltjen
-June 4, 2015        | 1.0       | Name Changes              | Victor Woeltjen
-October 4, 2015     | 1.1       | Conversion to MarkDown    | Andrew Henry
-April 5, 2016       | 1.2       | Added Mct-table directive | Andrew Henry
-
-# Introduction
-The purpose of this guide is to familiarize software developers with the Open
-MCT Web platform.
-
-## What is Open MCT
-Open MCT is a platform for building user interface and display tools,
-developed at the NASA Ames Research Center in collaboration with teams at the
-Jet Propulsion Laboratory. It is written in HTML5, CSS3, and JavaScript, using 
-[AngularJS](http://www.angularjs.org) as a framework. Its intended use is to 
-create single-page web applications which integrate data and behavior from a 
-variety of sources and domains.
-
-Open MCT has been developed to support the remote operation of space
-vehicles, so some of its features are specific to that task; however, it is
-flexible enough to be adapted to a variety of other application domains where a
-display tool oriented toward browsing, composing, and visualizing would be
-useful.
-
-Open MCT provides:
-
-*  A common user interface paradigm which can be applied to a variety of domains
-and tasks. Open MCT is more than a widget toolkit - it provides a standard
-tree-on-the-left, view-on-the-right browsing environment which you customize by
-adding new browsable object types, visualizations, and back-end adapters.  
-*  A plugin framework and an extensible API for introducing new application
-features of a variety of types.  
-*  A set of general-purpose object types and visualizations, as well as some
-visualizations and infrastructure specific to telemetry display.
-
-## Client-Server Relationship
-Open MCT is client software - it runs entirely in the user's web browser. As
-such, it is largely 'server agnostic'; any web server capable of serving files
-from paths is capable of providing Open MCT.
-
-While Open MCT can be configured to run as a standalone client, this is
-rarely very useful. Instead, it is intended to be used as a display and
-interaction layer for information obtained from a variety of back-end services.
-Doing so requires authoring or utilizing adapter plugins which allow Open MCT
-Web to interact with these services.
-
-Typically, the pattern here is to provide a known interface that Open MCT
-can utilize, and implement it such that it interacts with whatever back-end
-provides the relevant information. Examples of back-ends that can be utilized in
-this fashion include databases for the persistence of user-created objects, or
-sources of telemetry data.
-
-See the [Architecture Guide](../architecture/index.md#Overview) for information
-on the client-server relationship.
-
-## Developing with Open MCT
-Building applications with Open MCT typically means authoring and utilizing
-a set of plugins which provide application-specific details about how Open MCT
-Web should behave.
-
-### Technologies
-
-Open MCT sources are written in JavaScript, with a number of configuration
-files written in JSON. Displayable components are written in HTML5 and CSS3.  
-Open MCT is built using [AngularJS](http://www.angularjs.org)  from Google. A
-good understanding of Angular is recommended for developers working with Open
-MCT Web.
-
-### Forking
-Open MCT does not currently have a single stand-alone artifact that can be
-used as a library. Instead, the recommended approach for creating a new
-application is to start by forking/branching Open MCT, and then adding new
-features from there. Put another way, Open MCT's source structure is built
-to serve as a template for specific applications.
-
-Forking in this manner should not require that you edit Open MCT's sources.
-The preferred approach is to create a new directory (peer to `index.html`) for
-the new application, then add new bundles (as described in the Framework
-chapter) within that directory.
-
-To initially clone the Open MCT repository:
-`git clone <repository URL> <local repo directory> -b open-master`
-
-To create a fork to begin working on a new application using Open MCT:  
-
-    cd <local repo directory>  
-    git checkout open-master
-    git checkout -b <new branch name>
-
-As a convention used internally, applications built using Open MCT have
-master branch names with an identifying prefix. For instance, if building an
-application called 'Foo', the last statement above would look like:
-
-    git checkout -b foo-master
-
-This convention is not enforced or understood by Open MCT in any way; it is
-mentioned here as a more general recommendation.
-
-# Overview
-
-Open MCT is implemented as a framework component which manages a set of
-other components. These components, called _bundles_, act as containers to group
-sets of related functionality; individual units of functionality are expressed
-within these bundles as _extensions_.
-
-Extensions declare dependencies on other extensions (either individually or
-categorically), and the framework provides actual extension instances at
-run-time to satisfy these declared dependency. This dependency injection
-approach allows software components which have been authored separately (e.g. as
-plugins) but to collaborate at run-time.
-
-Open MCT's framework layer is implemented on top of AngularJS's [dependency
-injection mechanism](https://docs.angularjs.org/guide/di)  and is modelled after
-[OSGi](hhttp://www.osgi.org/)  and its [Declarative Services component model](http://wiki.osgi.org/wiki/Declarative_Services). 
-In particular, this is where the term _bundle_ comes from.
-
-## Framework Overview
-
-The framework's role in the application is to manage connections between
-bundles. All application-specific behavior is provided by individual bundles, or
-as the result of their collaboration.
-
-The framework is described in more detail in the [Framework Overview](../architecture/framework.md#overview) of the 
-architecture guide.
-
-### Tiers
-While all bundles in a running Open MCT instance are effectively peers, it
-is useful to think of them as a tiered architecture, where each tier adds more
-specificity to the application.
-```nomnoml
-#direction: down
-[Plugins (Features external to OpenMCTWeb) *Bundle]->[<frame>OpenMCTWeb |
-[Application (Plots, layouts, ElasticSearch wrapper) *Bundle]->[Platform (Core API, common UI, infrastructure) *Bundle]
-[Platform (Core API, common UI, infrastructure) *Bundle]->[Framework (RequireJS, AngularJS, bundle loader)]]
-```
-
-* __Framework__ : This tier is responsible for wiring together the set of
-configured components (called _bundles_) together to instantiate the running
-application. It is responsible for mediating between AngularJS (in particular,
-its dependency injection mechanism) and RequireJS (to load scripts at run-time.)
-It additionally interprets bundle definitions (see explanation below, as well as
-further detail in the Framework chapter.) At this tier, we are at our most
-general: We know only that we are a plugin-based application.
-* __Platform__: Components in the Platform tier describe both the general user
-interface and corresponding developer-facing interfaces of Open MCT. This
-tier provides the general infrastructure for applications. It is less general
-than the framework tier, insofar as this tier introduces a specific user
-interface paradigm, but it is still non-specific as to what useful features
-will be provided. Although they can be removed or replaced easily, bundles
-provided by the Platform tier generally should not be thought of as optional.
-* __Application__: The application tier consists of components which utilize the
-infrastructure provided by the Platform to provide functionality which will (or
-could) be useful to specific applications built using Open MCT. These
-include adapters to specific persistence back-ends (such as ElasticSearch or
-CouchDB) as well as bundles which describe more user-facing features (such as
-_Plot_ views for visualizing time series data, or _Layout_ objects for
-display-building.) Bundles from this tier can be added or removed without
-compromising basic application functionality, with the caveat that at least one
-persistence adapter needs to be present.
-* __Plugins__: Conceptually, this tier is not so different from the application
-tier; it consists of bundles describing new features, back-end adapters, that
-are specific to the application being built on Open MCT. It is described as
-a separate tier here because it has one important distinction from the
-application tier: It consists of bundles that are not included with the platform
-(either authored anew for the specific application, or obtained from elsewhere.)
-
-Note that bundles in any tier can go off and consult back-end services. In
-practice, this responsibility is handled at the Application and/or Plugin tiers;
-Open MCT is built to be server-agnostic, so any back-end is considered an
-application-specific detail.
-
-## Platform Overview
-
-The "tiered" architecture described in the preceding text describes a way of
-thinking of and categorizing software components of a Open MCT application,
-as well as the framework layer's role in mediating between these components.
-Once the framework layer has wired these software components together, however,
-the application's logical architecture emerges.
-
-An overview of the logical architecture of the platform is given in the 
-[Platform Architecture](../architecture/platform.md#platform-architecture) 
-section of the Platform guide
-
-### Web Services
-
-As mentioned in the Introduction, Open MCT is a platform single-page 
-applications which runs entirely in the browser. Most applications will want to 
-additionally interact with server-side resources, to (for example) read 
-telemetry data or store user-created objects. This interaction is handled by 
-individual bundles using APIs which are supported in browser (such as 
-`XMLHttpRequest`, typically wrapped by Angular's `$http`.)
-
-```nomnoml
-#direction: right
-[Web Service #1] <- [Web Browser]
-[Web Service #2] <- [Web Browser]
-[Web Service #3] <- [Web Browser]
-[<package> Web Browser |
-  [<package> Open MCT |
-    [Plugin Bundle #1]-->[Core API]
-    [Core API]<--[Plugin Bundle #2]
-    [Platform Bundle #1]-->[Core API]
-    [Platform Bundle #2]-->[Core API]
-    [Platform Bundle #3]-->[Core API]
-    [Core API]<--[Platform Bundle #4]
-    [Core API]<--[Platform Bundle #5]
-    [Core API]<--[Plugin Bundle #3]
-  ]
-  [Open MCT] ->[Browser APIs]
-]
-```
-
-This architectural approach ensures a loose coupling between applications built 
-using Open MCT and the backends which support them. 
- 
-### Glossary 
- 
-Certain terms are used throughout Open MCT with consistent meanings or 
-conventions. Other developer documentation, particularly in-line documentation, 
-may presume an understanding of these terms.
-
-* __bundle__: A bundle is a removable, reusable grouping of software elements. 
-The application is composed of bundles. Plug-ins are bundles.
-* __capability__: A JavaScript object which exposes dynamic behavior or 
-non-persistent state associated with a domain object.
-* __category__: A machine-readable identifier for a group that something may 
-belong to.
-* __composition__: In the context of a domain object, this refers to the set of 
-other domain objects that compose or are contained by that object. A domain 
-object's composition is the set of domain objects that should appear immediately
- beneath it in a tree hierarchy. A domain object's composition is described in 
-its model as an array of identifiers; its composition capability provides a 
-means to retrieve the actual domain object instances associated with these 
-identifiers asynchronously. 
-* __description__: When used as an object property, this refers to the human-
-readable description of a thing; usually a single sentence or short paragraph. 
-(Most often used in the context of extensions, domain object models, or other 
-similar application-specific objects.) 
-* __domain object__: A meaningful object to the user; a distinct thing in the 
-work support by Open MCT. Anything that appears in the left-hand tree is a 
-domain object. 
-* __extension__: An extension is a unit of functionality exposed to the platform 
-in a declarative fashion by a bundle. The term 'extension category' is used to 
-distinguish types of extensions from specific extension instances. 
-* __id__: A string which uniquely identifies a domain object. 
-* __key__: When used as an object property, this refers to the machine-readable 
-identifier for a specific thing in a set of things. (Most often used in the 
-context of extensions or other similar application-specific object sets.) This 
-term is chosen to avoid attaching ambiguous meanings to 'id'. 
-* __model__: The persistent state associated with a domain object. A domain 
-object's model is a JavaScript object which can be converted to JSON without 
-losing information (that is, it contains no methods.) 
-* __name__: When used as an object property, this refers to the human-readable 
-name for a thing. (Most often used in the context of extensions, domain object 
-models, or other similar application-specific objects.) 
-* __navigation__: Refers to the current state of the application with respect to 
-the user's expressed interest in a specific domain object; e.g. when a user 
-clicks on a domain object in the tree, they are navigating to it, and it is 
-thereafter considered the navigated object (until the user makes another such 
-choice.) This term is used to distinguish navigation from selection, which 
-occurs in an editing context. 
-* __space__: A machine-readable name used to identify a persistence store. 
-Interactions with persistence with generally involve a space parameter in some 
-form, to distinguish multiple persistence stores from one another (for cases 
-where there are multiple valid persistence locations available.) 
-* __source__: A machine-readable name used to identify a source of telemetry 
-data. Similar to "space", this allows multiple telemetry sources to operate 
-side-by-side without conflicting. 
-
-# Framework
-  
-Open MCT is built on the [AngularJS framework]( http://www.angularjs.org ). A 
-good understanding of that framework is recommended. 
-
-Open MCT adds an extra layer on top of AngularJS to (a) generalize its 
-dependency injection mechanism slightly, particularly to handle many-to-one 
-relationships; and (b) handle script loading. Combined, these features become a 
-plugin mechanism. 
-  
-This framework layer operates on two key concepts: 
-
-* __Bundle:__  A bundle is a collection of related functionality that can be 
-added to the application as a group. More concretely, a bundle is a directory 
-containing a JSON file declaring its contents, as well as JavaScript sources, 
-HTML templates, and other resources used to support that functionality. (The 
-term bundle is borrowed from [OSGi](http://www.osgi.org/)  - which has also 
-inspired many of the concepts used in the framework layer. A familiarity with 
-OSGi, particularly Declarative Services, may be useful when working with Open 
-MCT Web.)
-* __Extension:__  An extension is an individual unit of functionality. Extensions 
-are collected together in bundles, and may interact with other extensions. 
-
-The framework layer, loaded and initiated from `index.html`, is the main point 
-of entry for an application built on Open MCT. It is responsible for wiring 
-together the application at run time (much of this responsibility is actually 
-delegated to Angular); at a high-level, the framework does this by proceeding 
-through four stages:
-
-1. __Loading definitions:__ JSON declarations are loaded for all bundles which 
-will constitute the application, and wrapped in a useful API for subsequent 
-stages. 
-2. __Resolving extensions:__ Any scripts which provide implementations for 
-extensions exposed by bundles are loaded, using Require. 
-3. __Registering extensions__ Resolved extensions are registered with Angular, 
-such that they can be used by the application at run-time. This stage includes 
-both registration of Angular built-ins (directives, controllers, routes, 
-constants, and services) as well as registration of non-Angular extensions. 
-4. __Bootstrapping__ The Angular application is bootstrapped; at that point, 
-Angular takes over and populates the body of the page using the extensions that 
-have been registered. 
-
-## Bundles 
-
-The basic configurable unit of Open MCT is the _bundle_. This term has been 
-used a bit already; now we'll get to a more formal definition. 
-
-A bundle is a directory which contains:
-
-* A bundle definition; a file named `bundle.json`.
-* Subdirectories for sources, resources, and tests. 
-* Optionally, a `README.md` Markdown file describing its contents (this is not 
-used by Open MCT in any way, but it's a helpful convention to follow.)
-
-The bundle definition is the main point of entry for the bundle. The framework 
-looks at this to determine which components need to be loaded and how they 
-interact.
-
-A plugin in Open MCT is a bundle. The platform itself is also decomposed 
-into bundles, each of which provides some category of functionality. The 
-difference between a _bundle_ and a _plugin_ is purely a matter of the intended 
-use; a plugin is just a bundle that is meant to be easily added or removed. When 
-developing, it is typically more useful to think in terms of bundles. 
-  
-### Configuring Active Bundles 
- 
-To decide which bundles should be loaded, the framework loads a file named 
-`bundles.json` (peer to the `index.html` file which serves the application) to 
-determine which bundles should be loaded. This file should contain a single JSON 
-array of strings, where each is the path to a bundle. These paths should not 
-include bundle.json  (this is implicit) or a trailing slash. 
-
-For instance, if `bundles.json` contained: 
-
-    [ 
-        "example/builtins", 
-        "example/extensions" 
-    ] 
-   
-...then the Open MCT framework would look for bundle definitions at 
-`example/builtins/bundle.json` and `example/extensions/bundle.json`, relative 
-to the path of `index.html`. No other bundles would be loaded.  
-
-### Bundle Definition 
- 
-A bundle definition (the `bundle.json` file located within a bundle) contains a 
-description of the bundle itself, as well as the information exposed by the 
-bundle. 
- 
-This definition is expressed as a single JSON object with the following 
-properties (all of which are optional, falling back to reasonable defaults):
-
-* `key`: A machine-readable name for the bundle. (Currently used only in 
-logging.) 
-* `name`: A human-readable name for the bundle. (Also only used in logging.) 
-* `sources`: Names a directory in which source scripts (which will implement 
-extensions) are located. Defaults to 'src' 
-* `resources`: Names a directory in which resource files (such as HTML templates, 
-images, CS files, and other non-JavaScript files needed by this bundle) are 
-located. Defaults to 'res'  
-* `libraries`: Names a directory in which third-party libraries are located. 
-Defaults to 'lib' 
-* `configuration`: A bundle's configuration object, which should be formatted as 
-would be passed to require.config (see [RequireJS documentation](http://requirejs.org/docs/api.html ) ); 
-note that only paths and shim have been tested. 
-* `extensions`: An object containing key-value pairs, where keys are extension 
-categories, and values are extension definitions. See the section on Extensions 
-for more information.  
-
-For example, the bundle definition for example/policy looks like:  
-
-    {
-        "name": "Example Policy", 
-        "description": "Provides an example of using policies.", 
-        "sources": "src", 
-        "extensions": { 
-            "policies": [ 
-                { 
-                    "implementation": "ExamplePolicy.js", 
-                    "category": "action" 
-                }
-            ] 
-        } 
-    }
-
-### Bundle Directory Structure 
- 
-In addition to the directories defined in the bundle definition, a bundle will 
-typically contain other directories not used at run-time. Additionally, some 
-useful development scripts (such as the command line build and the test suite) 
-expect this directory structure to be in use, and may ignore options chosen by 
-`bundle.json`. It is recommended that the directory structure described below be
-used for new bundles.
-
-* `src`: Contains JavaScript sources for this bundle. May contain additional 
-subdirectories to organize these sources; typically, these subdirectories are 
-named to correspond to the extension categories they contain and/or support, but 
-this is only a convention. 
-* `res`: Contains other files needed by this bundle, such as HTML templates. May 
-contain additional subdirectories to organize these sources. 
-* `lib`: Contains JavaScript sources from third-party libraries. These are 
-separated from bundle sources in order to ignore them during code style checking 
-from the command line build.
-* `test`: Contains JavaScript sources implementing [Jasmine](http://jasmine.github.io/) 
-tests, as well as a file named `suite.json` describing which files to test. 
-Should have the same folder structure as the `src` directory; see the section on 
-automated testing for more information. 
- 
-For example, the directory structure for bundle `platform/commonUI/about`  looks 
-like: 
-
-    Platform
-      |
-      |-commonUI
-      |
-      +-about
-        |
-        |-res
-        |
-        |-src
-        |
-        |-test
-        |
-        |-bundle.json
-        |
-        +-README.md
-
-## Extensions 
-
-While bundles provide groupings of related behaviors, the individual units of 
-behavior are called extensions. 
-
-Extensions belong to categories; an extension category is the machine-readable 
-identifier used to identify groups of extensions. In the `extensions` property 
-of a bundle definition, the keys are extension categories and the values are 
-arrays of extension definitions. 
- 
-### General Extensions 
-
-Extensions are intended as a general-purpose mechanism for adding new types of 
-functionality to Open MCT. 
-
-An extension category is registered with Angular under the name of the 
-extension, plus a suffix of two square brackets; so, an Angular service (or, 
-generally, any other extension) can access the full set of registered 
-extensions, from all bundles, by including this string (e.g. `types[]` to get 
-all type definitions) in a dependency declaration. 
-
-As a convention, extension categories are given single-word, plural nouns for 
-names within Open MCT (e.g. `types`.) This convention is not enforced by the 
-platform in any way. For extension categories introduced by external plugins, it 
-is recommended to prefix the extension category with a vendor identifier (or 
-similar) followed by a dot, to avoid collisions. 
- 
-### Extension Definitions 
-
-The properties used in extension definitions are typically unique to each 
-category of extension; a few properties have standard interpretations by the 
-platform. 
-
-* `implementation`: Identifies a JavaScript source file (in the sources 
-folder) which implements this extension. This JavaScript file is expected to 
-contain an AMD module (see http://requirejs.org/docs/whyamd.html#amd ) which 
-gives as its result a single constructor function. 
-* `depends`: An array of dependencies needed by this extension; these will be 
-passed on to Angular's [dependency injector](https://docs.angularjs.org/guide/di ) . 
-By default, this is treated as an empty array. Note that depends does not make 
-sense without `implementation` (since these dependencies will be passed to the 
-implementation when it is instantiated.) 
-* `priority`: A number or string indicating the priority order (see below) of 
-this extension instance. Before an extension category is registered with 
-AngularJS, the extensions of this category from all bundles will be concatenated 
-into a single array, and then sorted by priority. 
-
-Extensions do not need to have an implementation. If no implementation is 
-provided, consumers of the extension category will receive the extension 
-definition as a plain JavaScript object. Otherwise, they will receive the 
-partialized (see below) constructor for that implementation, which will 
-additionally have all properties from the extension definition attached. 
-
-#### Partial Construction 
-
-In general, extensions are intended to be implemented as constructor functions, 
-which will be used elsewhere to instantiate new objects of that type. However, 
-the Angular-supported method for dependency injection is (effectively) 
-constructor-style injection; so, both declared dependencies and run-time 
-arguments are competing for space in a constructor's arguments. 
-
-To resolve this, the Open MCT framework registers extension instances in a 
-partially constructed form. That is, the constructor exposed by the extension's 
-implementation is effectively decomposed into two calls; the first takes the 
-dependencies, and returns the constructor in its second form, which takes the 
-remaining arguments. 
-
-This means that, when writing implementations, the constructor function should 
-be written to include all declared dependencies, followed by all run-time 
-arguments. When using extensions, only the run-time arguments need to be 
-provided. 
- 
-#### Priority 
-
-Within each extension category, registration occurs in priority order. An 
-extension's priority may be specified as a `priority` property in its extension 
-definition; this may be a number, or a symbolic string. Extensions are 
-registered in reverse order (highest-priority first), and symbolic strings are 
-mapped to the numeric values as follows: 
-
-* `fallback`: Negative infinity. Used for extensions that are not intended for 
-use (that is, they are meant to be overridden) but are present as an option of 
-last resort. 
-* `default`: `-100`. Used for extensions that are expected to be overridden, but 
-need a useful default. 
-* `none`: `0`. Also used if no priority is specified, or if an unknown or 
-malformed priority is specified. 
-* `optional`: `100`. Used for extensions that are meant to be used, but may be 
-overridden. 
-* `preferred`: `1000`. Used for extensions that are specifically intended to be 
-used, but still may be overridden in principle. 
-* `mandatory`: Positive infinity. Used when an extension should definitely not 
-be overridden. 
-
-These symbolic names are chosen to support usage where many extensions may 
-satisfy a given need, but only one may be used; in this case, as a convention it 
-should be the lowest-ordered (highest-priority) extensions available. In other 
-cases, a full set (or multi-element subset) of extensions may be desired, with a 
-specific ordering; in these cases, it is preferable to specify priority 
-numerically when declaring extensions, and to understand that extensions will be 
-sorted according to these conventions when using them. 
-   
-### Angular Built-ins 
-
-Several entities supported Angular are expressed and managed as extensions in 
-Open MCT. Specifically, these extension categories are _directives_, 
-_controllers_, _services_, _constants_, _runs_, and _routes_. 
- 
-#### Angular Directives
-
-New [directives]( https://docs.angularjs.org/guide/directive ) may be 
-registered as extensions of the directives category. Implementations of 
-directives in this category should take only dependencies as arguments, and 
-should return a directive definition object. 
-
-The directive's name should be provided as a key property of its extension 
-definition, in camel-case format. 
- 
-#### Angular Controllers
-
-New [controllers]( https://docs.angularjs.org/guide/controller ) may be registered 
-as extensions of the controllers category. The implementation is registered 
-directly as the controller; its only constructor arguments are its declared 
-dependencies. 
-
-The directive's identifier should be provided as a key property of its extension 
-definition. 
-   
- 
-#### Angular Services
-
-New [services](https://docs.angularjs.org/guide/services ) may be registered as 
-extensions of the services category. The implementation is registered via a 
-[service call]( https://docs.angularjs.org/api/auto/service/$provide#service ), so 
-it will be instantiated with the new operator. 
-
-#### Angular Constants 
-
-Constant values may be registered as extensions of the [ constants category](https://docs.angularjs.org/api/ng/type/angular.Module#constant ). 
-These extensions have no implementation; instead, they should contain a property 
- key , which is the name under which the constant will be registered, and a 
-property value , which is the constant value that will be registered.
-
-#### Angular Runs 
-
-In some cases, you want to register code to run as soon as the application 
-starts; these can be registered as extensions of the [ runs category](https://docs.angularjs.org/api/ng/type/angular.Module#run ). 
-Implementations registered in this category will be invoked (with their declared 
-dependencies) when the Open MCT application first starts. (Note that, in 
-this case, the implementation is better thought of as just a function, as 
-opposed to a constructor function.)
-
-#### Angular Routes
-
-Extensions of category `routes` will be registered with Angular's [route provider](https://docs.angularjs.org/api/ngRoute/provider/$routeProvider ). 
-Extensions of this category have no implementations, and need only two 
-properties in their definition: 
-
-* `when`: The value that will be passed as the path argument to `$routeProvider.when`; 
-specifically, the string that will appear in the trailing 
-part of the URL corresponding to this route. This property may be omitted, in 
-which case this extension instance will be treated as the default route. 
-* `templateUrl`: A path to the template to render for this route. Specified as a 
-path relative to the bundle's resource directory (`res` by default.) 
-
-### Composite Services
-
-Composite services are described in the [Composite Services](../architecture/framework.md#composite-services) 
-section of the framework guide.
-
-A component should include the following properties in its extension definition:
-
-* `provides`: The symbolic identifier for the service that will be composed. The 
-  fully-composed service will be registered with Angular under this name.
-* `type`: One of `provider`, `aggregator` or `decorator` (as above) 
-
-In addition to any declared dependencies, _aggregators_ and _decorators_ both 
-receive one more argument (immediately following declared dependencies) that is 
-provided by the framework. For an aggregator, this will be an array of all 
-providers of the same service (that is, with matching `provides` properties); 
-for a decorator, this will be whichever provider, decorator, or aggregator is 
-next in the sequence of decorators. 
-
-Services exposed by the Open MCT platform are often declared as composite 
-services, as this form is open for a variety of common modifications. 
-
-# Core API 
-
-Most of Open MCT's relevant API is provided and/or mediated by the 
-framework; that is, much of developing for Open MCT is a matter of adding 
-extensions which access other parts of the platform by means of dependency 
-injection. 
-
-The core bundle (`platform/core`) introduces a few additional object types meant 
-to be passed along by other services. 
-
-## Domain Objects 
-
-Domain objects are the most fundamental component of Open MCT's information 
-model. A domain object is some distinct thing relevant to a user's workflow, 
-such as a telemetry channel, display, or similar. Open MCT is a tool for 
-viewing, browsing, manipulating, and otherwise interacting with a graph of 
-domain objects. 
-
-A domain object should be conceived of as the union of the following:
-
-* __Identifier__: A machine-readable string that uniquely identifies the domain 
-object within this application instance. 
-* __Model__: The persistent state of the domain object. A domain object's model 
-is a JavaScript object that can be losslessly converted to JSON. 
-* __Capabilities__: Dynamic behavior associated with the domain object. 
-Capabilities are JavaScript objects which provide additional methods for 
-interacting with the domain objects which expose those capabilities. Not all 
-domain objects expose all capabilities. 
-
-At run-time, a domain object has the following interface:
-
-* `getId()`: Get the identifier for this domain object. 
-* `getModel()`: Get the plain state associated with this domain object. This 
-will return a JavaScript object that can be losslessly converted to JSON. Note 
-that the model returned here can be modified directly but should not be; 
-instead, use the mutation capability. 
-* `getCapability(key)`: Get the specified capability associated with this domain 
-object. This will return a JavaScript object whose interface is specific to the 
-type of capability being requested. If the requested capability is not exposed 
-by this domain object, this will return undefined .
-* `hasCapability(key)`: Shorthand for checking if a domain object exposes the 
-requested capability.
-* `useCapability(key, arguments  )`: Shorthand for 
-`getCapability(key).invoke(arguments)`, with additional checking between calls. 
-If the provided capability has no invoke method, the return value here functions 
-as `getCapability` including returning `undefined` if the capability is not 
-exposed.
-
-### Identifier Syntax
-
-For most purposes, a domain object identifier can be treated as a purely
-symbolic string; these are typically generated by Open MCT and plug-ins
-should rarely be concerned with its internal structure.
-
-A domain object identifier has one or two parts, separated by a colon.
-
-* If two parts are present, the part before the colon refers to the space
-  in which the domain object resides. This may be a persistence space or
-  a purely symbolic space recognized by a specific model provider. The
-  part after the colon is the key to use when looking up the domain object
-  model within that space.
-* If only one part is present, the domain object has no space specified,
-  and may presume to reside in the application-configured default space
-  defined by the `PERSISTENCE_SPACE` constant.
-* Both the key and the space identifier may consist of any combination
-  of alphanumeric characters, underscores, dashes, and periods.
-
-Some examples:
-
-* A domain object with the identifier `foo:xyz` would have its model
-  loaded using key `xyz` from persistence space `foo`.
-* A domain object with the identifier `bar` would have its model loaded
-  using key `bar` from the space identified by the `PERSISTENCE_SPACE`
-  constant.
-
-```bnf
-<identifier> ::= <space> ":" <key> | <key>
-<space> ::= <id char>+
-<key> ::= <id char>+
-<id char> ::= <letter> | <digit> | "-" | "." | "_"
-```
-
-## Domain Object Actions
-
-An `Action` is behavior that can be performed upon/using a `DomainObject`. An 
-Action has the following interface:
-
-* `perform()`: Do this action. For example, if one had an instance of a 
-`RemoveAction` invoking its perform method would cause the domain object which 
-exposed it to be removed from its container.
-* `getMetadata()`: Get metadata associated with this action. Returns an object 
-containing: 
-    * `name`: Human-readable name.
-    * `description`: Human-readable summary of this action. 
-    * `glyph`: Single character to be displayed in Open MCT's icon font set. 
-    * `context`: The context in which this action is being performed (see below)
-
-Action instances are typically obtained via a domain object's `action` 
-capability. 
- 
-### Action Contexts 
-
-An action context is a JavaScript object with the following properties: 
-
-* `domainObject`: The domain object being acted upon. 
-* `selectedObject`: Optional; the selection at the time of action (e.g. the 
-dragged object in a drag-and-drop operation.)
-
-## Telemetry 
-
-Telemetry series data in Open MCT is represented by a common interface, and 
-packaged in a consistent manner to facilitate passing telemetry updates around 
-multiple visualizations. 
- 
-### Telemetry Requests 
-
-A telemetry request is a JavaScript object containing the following properties: 
-
-* `source`: A machine-readable identifier for the source of this telemetry. This 
-is useful when multiple distinct data sources are in use side-by-side. 
-* `key`: A machine-readable identifier for a unique series of telemetry within 
-that source. 
-* _Note: This API is still under development; additional properties, such as 
-start and end time, should be present in future versions of Open MCT._ 
-
-Additional properties may be included in telemetry requests which have specific 
-interpretations for specific sources.
-
-### Telemetry Responses
-
-When returned from the `telemetryService` (see [Telemetry Services](#telemetry-service) 
-section), telemetry series data will be packaged in a `source -> key -> TelemetrySeries` 
-fashion. That is, telemetry is passed in an object containing key-value pairs. 
-Keys identify telemetry sources; values are objects containing additional 
-key-value pairs. In this object, keys identify individual telemetry series (and 
-match they `key` property from corresponding requests) and values are 
-`TelemetrySeries` objects (see below.) 
-
-### Telemetry Series
-
-A telemetry series is a specific sequence of data, typically associated with a 
-specific instrument. Telemetry is modeled as an ordered sequence of domain and 
-range values, where domain values must be non-decreasing but range values do 
-not. (Typically, domain values are interpreted as UTC timestamps in milliseconds 
-relative to the UNIX epoch.) A series must have at least one domain and one 
-range, and may have more than one.
-
-Telemetry series data in Open MCT is expressed via the following 
-`TelemetrySeries` interface: 
-
-* `getPointCount()`: Returns the number of unique points/samples in this series. 
-* `getDomainValue(index, [domain])`:  Get the domain value at the specified index . 
-If a second domain argument is provided, this is taken as a string identifier 
-indicating which domain option (of, presumably, multiple) should be returned. 
-* `getRangeValue(index, [range])`:  Get the domain value at the specified index . 
-If a second range argument is provided, this is taken as a string identifier 
-indicating which range option (of, presumably, multiple) should be returned. 
- 
-### Telemetry Metadata 
-
-Domain objects which have associated telemetry also expose metadata about that 
-telemetry; this is retrievable via the `getMetadata()` of the telemetry 
-capability. This will return a single JavaScript object containing the following 
-properties: 
-
-* `source`: The machine-readable identifier for the source of telemetry data for 
-this object. 
-* `key`: The machine-readable identifier for the individual telemetry series. 
-* `domains`: An array of supported domains (see TelemetrySeries above.) Each 
-domain should be expressed as an object which includes: 
-    * `key`: Machine-readable identifier for this domain, as will be passed into 
-    a getDomainValue(index, domain)  call. 
-    * `name`: Human-readable name for this domain. 
-* `ranges`: An array of supported ranges; same format as domains . 
-
-Note that this metadata is also used as the prototype for telemetry requests 
-made using this capability. 
-
-## Types 
-A domain object's type is represented as a Type object, which has the following 
-interface:
-
-* `getKey()`: Get the machine-readable identifier for this type. 
-* `getName()`: Get the human-readable name for this type. 
-* `getDescription()`: Get a human-readable summary of this type. 
-* `getGlyph()`: Get the single character to be rendered as an icon for this type 
-in Open MCT's custom font set. 
-* `getInitialModel()`: Get a domain object model that represents the initial 
-state (before user specification of properties) for domain objects of this type. 
-* `getDefinition()`: Get the extension definition for this type, as a JavaScript 
-object. 
-* `instanceOf(type)`: Check if this type is (or inherits from) a specified type . 
-This type can be either a string, in which case it is taken to be that type's 
- key , or it may be a  `Type` instance. 
-* `hasFeature(feature)`: Returns a boolean value indicating whether or not this 
-type supports the specified feature, which is a symbolic string. 
-* `getProperties()`: Get all properties associated with this type, expressed as 
-an array of `TypeProperty` instances. 
- 
-### Type Features 
-
-Features of a domain object type are expressed as symbolic string identifiers. 
-They are defined in practice by usage; currently, the Open MCT platform only 
-uses the creation feature to determine which domain object types should appear 
-in the Create menu. 
- 
-### Type Properties 
-
-Types declare the user-editable properties of their domain object instances in 
-order to allow the forms which appear in the __Create__ and __Edit Properties__ 
-dialogs to be generated by the platform. A `TypeProperty` has the following interface:
-
-* `getValue(model)`: Get the current value for this property, as it appears in 
-the provided domain object model. 
-* `setValue(model, value)`: Set a new value for this property in the provided 
-domain object model . 
-* `getDefinition()`: Get the raw definition for this property as a JavaScript 
-object (as it was declared in this type's extension definition.) 
-
-# Extension Categories 
-
-The information in this section is focused on registering new extensions of 
-specific types; it does not contain a catalog of the extension instances of 
-these categories provided by the platform. Relevant summaries there are provided 
-in subsequent sections.
- 
-## Actions Category
-
-An action is a thing that can be done to or using a domain object, typically as 
-initiated by the user. 
-
-An action's implementation:
-
-* Should take a single `context` argument in its constructor. (See Action 
-Contexts, under Core API.)
-* Should provide a method `perform` which causes the behavior associated with 
-the action to occur.
-* May provide a method `getMetadata` which provides metadata associated with 
-the action. If omitted, one will be provided by the platform which includes 
-metadata from the action's extension definition.
-* May provide a static method `appliesTo(context)` (that is, a function 
-available as a property of the implementation's constructor itself), which will 
-be used by the platform to filter out actions from contexts in which they are 
-inherently inapplicable.
-
-An action's bundle definition (and/or `getMetadata()` return value) may include:
-
-* `category`: A string or array of strings identifying which category or 
-categories an action falls into; used to determine when an action is displayed. 
-Categories supported by the platform include: 
-    * `contextual`: Actions in a context menu. 
-    * `view-control`: Actions triggered by buttons in the top-right of Browse 
-    view. 
-* `key`: A machine-readable identifier for this action. 
-* `name`: A human-readable name for this action (e.g. to show in a menu) 
-* `description`: A human-readable summary of the behavior of this action. 
-* `glyph`: A single character which will be rendered in Open MCT's custom 
-font set as an icon for this action.
-
-## Capabilities Category
-
-Capabilities are exposed by domain objects (e.g. via the `getCapability` method) 
-but most commonly originate as extensions of this category.
-
-Extension definitions for capabilities should include both an implementation, 
-and a property named key whose value should be a string used as a 
-machine-readable identifier for that capability, e.g. when passed as the 
-argument to a domain object's `getCapability(key)` call.
- 
-A capability's implementation should have methods specific to that capability; 
-that is, there is no common format for capability implementations, aside from 
-support for invocation via the `useCapability` shorthand.
-
-A capability's implementation will take a single argument (in addition to any 
-declared dependencies), which is the domain object that will expose that 
-capability.
-
-A capability's implementation may also expose a static method `appliesTo(model)` 
-which should return a boolean value, and will be used by the platform to filter 
-down capabilities to those which should be exposed by specific domain objects, 
-based on their domain object models. 
-
-## Containers Category
-
-Containers provide options for the `mct-container` directive.
-
-The definition for an extension in the `containers` category should include:
-
-* `key`: An identifier for the container.
-* `template`: An Angular template for the container, including an
-  `ng-transclude` where contained content should go.
-* `attributes`: An array of attribute names. The values associated with
-   these attributes will be exposed in the template's scope under the
-   name provided by the `alias` property.
-* `alias`: The property name in scope under which attributes will be
-  exposed. Optional; defaults to "container".
-
-Note that `templateUrl` is not supported for `containers`.
-
-## Controls Category
-
-Controls provide options for the `mct-control` directive. 
- 
-These standard control types are included in the forms bundle:
-
-* `textfield`: A text input to enter plain text.
-* `numberfield`: A text input to enter numbers.
-* `select`: A drop-down list of options.
-* `checkbox`: A box which may be checked/unchecked.
-* `color`: A color picker.
-* `button`: A button.
-* `datetime`: An input for UTC date/time entry; gives result as a UNIX 
-timestamp, in milliseconds since start of 1970, UTC.
-* `composite`: A control parenting an array of other controls.
-* `menu-button`: A drop-down list of items supporting custom behavior
-on click.
-* `dialog-button`: A button which opens a dialog allowing a single property
-to be edited.
-* `radio`: A radio button.
-
-New controls may be added as extensions of the controls category. Extensions of 
-this category have two properties: 
-
-* `key`: The symbolic name for this control (matched against the control field 
-in rows of the form structure).
-* `templateUrl`: The URL to the control's Angular template, relative to the 
-resources directory of the bundle which exposes the extension. 
-
-Within the template for a control, the following variables will be included in 
-scope:
-
-* `ngModel`: The model where form input will be stored. Notably we also need to 
-look at field  (see below) to determine which field in the model should be 
-modified. 
-* `ngRequired`: True if input is required.
-* `ngPattern`: The pattern to match against (for text entry)
-* `ngBlur`: A function that may be invoked to evaluate the expression
-  associated with the `ng-blur` attribute associated with the control.
-  * This should be called when the control has lost focus; for controls
-    which simply wrap or augment `input` elements, this should be fired
-    on `blur` events associated with those elements, while more complex
-    custom controls may fire this at the end of more specific interactions.
-* `options`: The options for this control, as passed from the `options` property 
-of an individual row definition. 
-* `field`: Name of the field in `ngModel` which will hold the value for this 
-control. 
-
-## Gestures Category
-
-A _gesture_ is a user action which can be taken upon a representation of a 
-domain object. 
-
-Examples of gestures included in the platform are:
-
-* `drag`: For representations that can be used to initiate drag-and-drop 
-composition.
-* `drop`: For representations that can be drop targets for drag-and-drop 
-composition. 
-* `menu`: For representations that can be used to popup a context menu. 
- 
-Gesture definitions have a property `key` which is used as a machine-readable 
-identifier for the gesture (e.g. `drag`, `drop`, `menu` above.) 
- 
-A gesture's implementation is instantiated once per representation that uses the 
-gesture. This class will receive the jqLite-wrapped `mct-representation` element 
-and the domain object being represented as arguments, and should do any 
-necessary "wiring" (e.g. listening for events) during its constructor call. The 
-gesture's implementation may also expose an optional `destroy()`  method which 
-will be called when the gesture should be removed, to avoid memory leaks by way 
-of unremoved listeners.
-
-## Indicators Category
-
-An indicator is an element that should appear in the status area at the bottom 
-of a running Open MCT client instance. 
-
-### Standard Indicators 
- 
-Indicators which wish to appear in the common form of an icon-text pair should 
-provide implementations with the following methods:
-
-* `getText()`: Provides the human-readable text that will be displayed for this 
-indicator. 
-* `getGlyph()`: Provides a single-character string that will be displayed as an 
-icon in Open MCT's custom font set. 
-* `getDescription()`: Provides a human-readable summary of the current state of 
-this indicator; will be displayed in a tooltip on hover. 
-* `getClass()`: Get a CSS class that will be applied to this indicator. 
-* `getTextClass()`: Get a CSS class that will be applied to this indicator's 
-text portion. 
-* `getGlyphClass()`: Get a CSS class that will be applied to this indicator's 
-icon portion. 
-* `configure()`: If present, a configuration icon will appear to the right of 
-this indicator, and clicking it will invoke this method. 
- 
-Note that all methods are optional, and are called directly from an Angular 
-template, so they should be appropriate to run during digest cycles. 
-
-### Custom Indicators 
-
-Indicators which wish to have an arbitrary appearance (instead of following the 
-icon-text convention commonly used) may specify a `template` property in their 
-extension definition. The value of this property will be used as the `key` for 
-an `mct-include` directive (so should refer to an extension of category 
- templates .) This template will be rendered to the status area. Indicators of 
-this variety do not need to provide an implementation. 
-
-## Licenses Category
-
-The extension category `licenses` can be used to add entries into the 'Licensing 
-information' page, reachable from Open MCT's About dialog. 
-
-Licenses may have the following properties, all of which are strings:
-
-* `name`: Human-readable name of the licensed component. (e.g. 'AngularJS'.)
-* `version`: Human-readable version of the licensed component. (e.g. '1.2.26'.)
-* `description`: Human-readable summary of the component.
-* `author`: Name or names of entities to which authorship should be attributed.
-* `copyright`: Copyright text to display for this component.
-* `link`: URL to full license text. 
-
-## Policies Category
-
-Policies are used to handle decisions made using Open MCT's `policyService`; 
-examples of these decisions are determining the applicability of certain 
-actions, or checking whether or not a domain object of one type can contain a 
-domain object of a different type. See the section on the Policies for an 
-overview of Open MCT's policy model.
-
-A policy's extension definition should include:
-
-* `category`: The machine-readable identifier for the type of policy decision 
-being supported here. For a list of categories supported by the platform, see 
-the section on Policies. Plugins may introduce and utilize additional policy 
-categories not in that list. 
-* `message`: Optional; a human-readable message describing the policy, intended 
-for display in situations where this specific policy has disallowed something. 
- 
-A policy's implementation should include a single method, `allow(candidate,
-context)`. The specific types used for `candidate` and `context` vary by policy 
-category; in general, what is being asked is 'is this candidate allowed in this 
-context?' This method should return a boolean value. 
-
-Open MCT's policy model requires consensus; a policy decision is allowed 
-when and only when all policies choose to allow it. As such, policies should 
-generally be written to reject a certain case, and allow (by returning `true`) 
-anything else. 
- 
-## Representations Category
-
-A representation is an Angular template used to display a domain object. The 
-`representations` extension category is used to add options for the 
-`mct-representation` directive. 
- 
-A representation definition should include the following properties:
-
-* `key`: The machine-readable name which identifies the representation. 
-* `templateUrl`: The path to the representation's Angular template. This path is 
-relative to the bundle's resources directory. 
-* `uses`: Optional; an array of capability names. Indicates that this 
-representation intends to use those capabilities of a domain object (via a 
-`useCapability` call), and expects to find the latest results of that 
-`useCapability` call in the scope of the presented template (under the same name 
-as the capability itself.) Note that, if `useCapability` returns a promise, this 
-will be resolved before being placed in the representation's scope. 
-* `gestures`: An array of keys identifying gestures (see the `gestures` 
-extension category) which should be available upon this representation. Examples 
-of gestures include `drag` (for representations that should act as draggable 
-sources for drag-drop operations) and `menu` (for representations which should 
-show a domain-object-specific context menu on right-click.) 
-
-### Representation Scope
-
-While  _representations_ do not have implementations, per se, they do refer to 
-Angular templates which need to interact with information (e.g. the domain 
-object being represented) provided by the platform. This information is passed 
-in through the template's scope, such that simple representations may be created 
-by providing only templates. (More complex representations will need controllers 
-which are referenced from templates. See https://docs.angularjs.org/guide/controller
-for more information on controllers in Angular.) 
- 
-A representation's scope will contain:
-
-* `domainObject`: The represented domain object.
-* `model`: The domain object's model.
-* `configuration`: An object containing configuration information for this 
-representation (an empty object if there is no saved configuration.) The 
-contents of this object are managed entirely by the view/representation which 
-receives it. 
-* `representation`: An empty object, useful as a 'scratch pad' for 
-representation state. 
-* `ngModel`: An object passed through the ng-model attribute of the 
-`mct-representation` , if any. 
-* `parameters`: An object passed through the parameters attribute of the 
-`mct-representation`, if any. 
-* Any capabilities requested by the uses property of the representation 
-definition.
- 
-## Representers Category
-
-The `representers` extension category is used to add additional behavior to the 
-`mct-representation` directive. This extension category is intended primarily 
-for use internal to the platform. 
-
-Unlike _representations_, which describe specific ways to represent domain 
-objects, _representers_ are used to modify or augment the process of 
-representing domain objects in general. For example, support for the  _gestures_ 
-extension category is added by a _representer_.
-
-A representer needs only provide an implementation. When an `mct-representation` 
-is linked (see https://docs.angularjs.org/guide/directive ) or when the 
-domain object being represented changes, a new _representer_ of each declared 
-type is instantiated. The constructor arguments for a _representer_ are the same 
-as the arguments to the link function in an Angular directive: `scope` the 
-Angular scope for this representation; `element` the jqLite-wrapped 
-`mct-representation` element, and `attrs` a set of key-value pairs of that 
-element's attributes. _Representers_ may wish to populate the scope, attach 
-event listeners to the element, etc.
-
-This implementation must provide a single method, `destroy()`, which will be 
-invoked when the representer is no longer needed. 
-
-## Roots Category
-
-The extension category `roots` is used to provide root-level domain object 
-models. Root-level domain objects appear at the top-level of the tree hierarchy. 
-For example, the _My Items_ folder is added as an extension of this category. 
-
-Extensions of this category should have the following properties:
-
-* `id`: The machine-readable identifier for the domain object being exposed.
-* `model`: The model, as a JSON object, for the domain object being exposed. 
-
-## Stylesheets Category
-
-The stylesheets extension category is used to add CSS files to style the 
-application. Extension definitions for this category should include one 
-property:
-
-* `stylesheetUrl`: Path and filename, including extension, for the stylesheet to 
-include. This path is relative to the bundle's resources folder (by default,  
-`res`) 
-* `theme`: Optional; if present, this stylesheet will only be included if this
-value matches the `THEME` constant.
- 
-To control the order of CSS files, use priority  (see the section on Extension 
-Definitions above.) 
-
-## Templates Category
-
-The `templates` extension category is used to expose Angular templates under 
-symbolic identifiers. These can then be utilized using the `mct-include` 
-directive, which behaves similarly to `ng-include` except that it uses these 
-symbolic identifiers instead of paths.
-
-A template's extension definition should include the following properties:
-
-* `key`: The machine-readable name which identifies this template, matched 
-against the value given to the key attribute of the `mct-include` directive.
-* `templateUrl`: The path to the relevant Angular template. This path is 
-relative to the bundle's resources directory. 
-
-Note that, when multiple templates are present with the same key , the one with 
-the highest priority will be used from `mct-include`. This behavior can be used 
-to override templates exposed by the platform (to change the logo which appears 
-in the bottom right, for instance.)
-
-Templates do not have implementations. 
-
-## Types Category
-
-The types extension category describes types of domain objects which may 
-appear within Open MCT.
-
-A type's extension definition should have the following properties:
-
-* `key`: The machine-readable identifier for this domain object type. Will be 
-stored to and matched against the type property of domain object models.
-* `name`: The human-readable name for this domain object type.
-* `description`: A human-readable summary of this domain object type.
-* `glyph`: A single character to be rendered as an icon in Open MCT's custom 
-font set. 
-* `model`: A domain object model, used as the initial state for created domain 
-objects of this type (before any properties are specified.)
-* `features`: Optional; an array of strings describing features of this domain 
-object type. Currently, only creation is recognized by the platform; this is 
-used to determine that this type should appear in the Create menu. More 
-generally, this is used to support the `hasFeature(...)`  method of the type  
-capability. 
-* `properties`: An array describing individual properties of this domain object
-(as should appear in the _Create_ or the _Edit Properties_ dialog.) Each 
-property is described by an object containing the following properties:
-    * `control`: The key of the control (see `mct-control` and the `controls` 
-    [extension category](#controls-category)) to use for editing this property. 
-    * `property`: A string which will be used as the name of the property in the 
-    domain object's model that the value for this property should be stored 
-    under. If this value should be stored in an object nested within the domain 
-    object model, then property should be specified as an array of strings 
-    identifying these nested objects and, finally, the property itself. 
-    * other properties as appropriate for a control of this type (each 
-    property's definition will also be passed in as the structure for its 
-    control.) See documentation of mct-form for more detail on these 
-    properties.
-    
-Types do not have implementations. 
- 
-## Versions Category
-The versions extension category is used to introduce line items in Open MCT 
-Web's About dialog. These should have the following properties: 
-
-* `name`: The name of this line item, as should appear in the left-hand side of 
-the list of version information in the About dialog.
-* `value`: The value which should appear to the right of the name in the About 
-dialog.
-
-To control the ordering of line items within the About dialog, use `priority`. 
-(See section on [Extensions](#extensions) above.) 
-
-This extension category does not have implementations. 
- 
-## Views Category
-
-The views extension category is used to determine which options appear to the 
-user as available views of domain objects of specific types. A view's extension 
-definition has the same properties as a representation (and views can be 
-utilized via `mct-representation`); additionally:
-
-* `name`: The human-readable name for this view type.
-* description : A human-readable summary of this view type.
-* `glyph`: A single character to be rendered as an icon in Open MCT's custom 
-font set.
-* `type`: Optional; if present, this representation is only applicable for 
-domain object's of this type.
-* `needs`: Optional array of strings; if present, this representation is only 
-applicable for domain objects which have the capabilities identified by these 
-strings. 
-* `delegation`: Optional boolean, intended to be used in conjunction with  
-`needs`;  if present, allow required capabilities to be satisfied by means of 
-capability delegation. (See [Delegation](#delegation-capability))
-* `toolbar`: Optional; a definition for the toolbar which may appear in a 
-toolbar when using this view in Edit mode. This should be specified as a 
-structure for mct-toolbar , with additional properties available for each item in 
-that toolbar: 
-    * `property`: A property name. This will refer to a property in the view's 
-    current selection; that property on the selected object will be modifiable 
-    as the `ng-model` of the displayed control in the toolbar. If the value of 
-    the property is a function, it will be used as a getter-setter (called with 
-    no arguments to use as a getter, called with a value to use as a setter.) 
-    * `method`: A method to invoke (again, on the selected object) from the 
-    toolbar control. Useful particularly for buttons (which don't edit a single 
-    property, necessarily.)
-
-### View Scope 
-
-Views do not have implementations, but do get the same properties in scope that 
-are provided for `representations`. 
-
-When a view is in Edit mode, this scope will additionally contain:
-
-* `commit()`: A function which can be invoked to mark any changes to the view's 
-  configuration as ready to persist.
-* `selection`: An object representing the current selection state. 
-
-#### Selection State 
-
-A view's selection state is, conceptually, a set of JavaScript objects. The 
-presence of methods/properties on these objects determine which toolbar controls 
-are visible, and what state they manage and/or behavior they invoke. 
-
-This set may contain up to two different objects: The  _view proxy_, which is 
-used to make changes to the view as a whole, and the _selected object_, which is 
-used to represent some state within the view. (Future versions of Open MCT 
-may support multiple selected objects.) 
-
-The `selection` object made available during Edit mode has the following 
-methods: 
-
-* `proxy([object])`: Get (or set, if called with an argument) the current view 
-proxy.  
-* `select(object)`: Make this object the selected object. 
-* `deselect()`: Clear the currently selected object. 
-* `get()`: Get the currently selected object. Returns undefined if there is no 
-currently selected object.
-* `selected(object)`: Check if the JavaScript object is currently in the 
-selection set. Returns true if the object is either the currently selected 
-object, or the current view proxy. 
-* `all()`: Get an array of all objects in the selection state. Will include 
-either or both of the view proxy and selected object. 
-
-## Workers Category
-
-The `workers` extension category allows scripts to be run as web workers
-using the `workerService`.
-
-An extension of this category has no implementation. The following properties
-are supported:
-
-* `key`: A symbolic string used to identify this worker.
-* `workerUrl`: The path, relative to this bundle's `src` folder, where
-  this worker's source code resides.
-* `shared`: Optional; a boolean flag which, if true, indicates that this
-  worker should be instantiated as a
-  [`SharedWorker`](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker/SharedWorker).
-  Default value is `false`.
-
-# Directives
-
-Open MCT defines several Angular directives that are intended for use both 
-internally within the platform, and by plugins. 
- 
-## Container 
-
-The `mct-container` is similar to the `mct-include` directive insofar as it allows 
-templates to be referenced by symbolic keys instead of by URL. Unlike 
-`mct-include` it supports transclusion.
-
-Unlike `mct-include` `mct-container` accepts a key as a plain string attribute, 
-instead of as an Angular expression.
-
-## Control
-
-The `mct-control` directive is used to display user input elements. Several 
-controls are included with the platform to wrap default input types. This 
-directive is primarily intended for internal use by the `mct-form` and 
-`mct-toolbar` directives. 
-
-When using `mct-control` the attributes `ng-model` `ng-disabled` 
-`ng-required` and `ng-pattern` may also be used. These have the usual meaning 
-(as they would for an input element) except for `ng-model`; when used, it will 
-actually be `ngModel[field]` (see below) that is two-way bound by this control. 
-This allows `mct-control` elements to more easily delegate to other 
-`mct-control` instances, and also facilitates usage for generated forms. 
-
-This directive supports the following additional attributes, all specified as 
-Angular expressions:
-
-* `key`: A machine-readable identifier for the specific type of control to 
-display.
-* `options`: A set of options to display in this control.
-* `structure`: In practice, contains the definition object which describes this 
-form row or toolbar item. Used to pass additional control-specific parameters. 
-* `field`: The field in the `ngModel` under which to read/store the property 
-associated with this control. 
-
-## Drag
-
-The `mct-drag` directive is used to support drag-based gestures on HTML 
-elements. Note that this is not 'drag' in the 'drag-and-drop' sense, but 'drag' 
-in the more general 'mouse down, mouse move, mouse up' sense. 
-
-This takes the form of three attributes: 
-
-* `mct-drag`: An Angular expression to evaluate during drag movement.
-* `mct-drag-down`: An Angular expression to evaluate when the drag starts.
-* `mct-drag-up`: An Angular expression to evaluate when the drag ends.
-
-In each case, a variable `delta` will be provided to the expression; this is a 
-two-element array or the horizontal and vertical pixel offset of the current 
-mouse position relative to the mouse position where dragging began. 
-
-## Form 
-
-The `mct-form` directive is used to generate forms using a declarative structure, 
-and to gather back user input. It is applicable at the element level and 
-supports the following attributes: 
-
-* `ng-model`: The object which should contain the full form input. Individual 
-fields in this model are bound to individual controls; the names used for these 
-fields are provided in the form structure (see below).
-* `structure`: The structure of the form; e.g. sections, rows, their names, and 
-so forth. The value of this attribute should be an Angular expression. 
-* `name`: The name in the containing scope under which to publish form 
-"meta-state", e.g. `$valid` `$dirty` etc. This is as the behavior of `ng-form`. 
-Passed as plain text in the attribute. 
-
-### Form Structure 
-
-Forms in Open MCT have a common structure to permit consistent display. A 
-form is broken down into sections, which will be displayed in groups; each 
-section is broken down into rows, each of which provides a control for a single 
-property. Input from this form is two-way bound to the object passed via 
-`ng-model`. 
-
-A form's structure is represented by a JavaScript object in the following form:
- 
-    { 
-        "name": ... title to display for the form, as a string ..., 
-        "sections": [
-        { 
-            "name": ... title to display for the section ..., 
-            "rows": [ 
-                { 
-                    "name": ... title to display for this row ...,
-                    "control": ... symbolic key for the control ..., 
-                    "key": ... field name in ng-model ... 
-                    "pattern": ... optional, reg exp to match against ... 
-                    "required": ... optional boolean ... 
-                    "options": [ 
-                        "name": ... name to display (e.g. in a select) ..., 
-                        "value": ... value to store in the model ... 
-                    ] 
-                    }, 
-                ... and other rows ... 
-            ] 
-        }, 
-        ... and other sections ... 
-        ] 
-    } 
-
-Note that `pattern` may be specified as a string, to simplify storing for 
-structures as JSON when necessary. The string should be given in a form 
-appropriate to pass to a `RegExp` constructor. 
-
-### Form Controls 
-
-A few standard control types are included in the platform/forms bundle: 
-
-* `textfield`: An area to enter plain text. 
-* `select`: A drop-down list of options. 
-* `checkbox`: A box which may be checked/unchecked. 
-* `color`: A color picker. 
-* `button`: A button. 
-* `datetime`: An input for UTC date/time entry; gives result as a UNIX 
-timestamp, in milliseconds since start of 1970, UTC. 
-
-## Include 
-
-The `mct-include` directive is similar to ng-include , except that it takes a 
-symbolic identifier for a template instead of a URL. Additionally, templates 
-included via mct-include will have an isolated scope. 
-
-The directive should be used at the element level and supports the following 
-attributes, all of which are specified as Angular expressions: 
-
-* `key`: Machine-readable identifier for the template (of extension category  
-templates ) to be displayed. 
-* `ng-model`: _Optional_; will be passed into the template's scope as `ngModel`. 
-Intended usage is for two-way bound user input.
-* `parameters`: _Optional_; will be passed into the template's scope as 
-parameters. Intended usage is for template-specific display parameters. 
-
-## Representation 
-
-The `mct-representation` directive is used to include templates which 
-specifically represent domain objects. Usage is similar to `mct-include`. 
-
-The directive should be used at the element level and supports the following 
-attributes, all of which are specified as Angular expressions:
-
-* `key`: Machine-readable identifier for the representation (of extension 
-category _representations_ or _views_ ) to be displayed. 
-* `mct-object`: The domain object being represented. 
-* `ng-model`: Optional; will be passed into the template's scope as `ngModel`. 
-Intended usage is for two-way bound user input. 
-* `parameters`: Optional; will be passed into the template's scope as  
-parameters . Intended usage is for template-specific display parameters. 
-
-## Resize 
-
-The `mct-resize` directive is used to monitor the size of an HTML element. It is 
-specified as an attribute whose value is an Angular expression that will be 
-evaluated when the size of the HTML element changes. This expression will be 
-provided a single variable, `bounds` which is an object containing two 
-properties, `width` and `height` describing the size in pixels of the element.
-
-When using this directive, an attribute `mct-resize-interval` may optionally be 
-provided. Its value is an Angular expression describing the number of 
-milliseconds to wait before next checking the size of the HTML element; this 
-expression is evaluated when the directive is linked and reevaluated whenever 
-the size is checked.
-
-## Scroll 
-
-The `mct-scroll-x` and `mct-scroll-y` directives are used to both monitor and 
-control the horizontal and vertical scroll bar state of an element, 
-respectively. They are intended to be used as attributes whose values are 
-assignable Angular expressions which two-way bind to the scroll bar state.
-
-## Toolbar
-
-The `mct-toolbar` directive is used to generate toolbars using a declarative 
-structure, and to gather back user input. It is applicable at the element level 
-and supports the following attributes: 
-
-* `ng-model`: The object which should contain the full toolbar input. Individual 
-fields in this model are bound to individual controls; the names used for these 
-fields are provided in the form structure (see below). 
-* `structure`: The structure of the toolbar; e.g. sections, rows, their names, and 
-so forth. The value of this attribute should be an Angular expression.
-* `name`: The name in the containing scope under which to publish form 
-"meta-state", e.g. `$valid`, `$dirty` etc. This is as the behavior of 
-`ng-form`. Passed as plain text in the attribute. 
-
-Toolbars support the same control options as forms.  
-
-### Toolbar Structure 
-
-A toolbar's structure is defined similarly to forms, except instead of rows  
-there are items . 
-
-    { 
-        "name": ... title to display for the form, as a string ..., 
-        "sections": [ 
-            { 
-                "name": ... title to display for the section ..., 
-                "items": [ 
-                    { 
-                        "name": ... title to display for this row ..., 
-                        "control": ... symbolic key for the control ..., 
-                        "key": ... field name in ng-model ... 
-                        "pattern": ... optional, reg exp to match against ... 
-                        "required": ... optional boolean ... 
-                        "options": [ 
-                            "name": ... name to display (e.g. in a select) ..., 
-                            "value": ... value to store in the model ... 
-                        ], 
-                        "disabled": ... true if control should be disabled ... 
-                        "size": ... size of the control (for textfields) ... 
-                        "click": ... function to invoke (for buttons) ... 
-                        "glyph": ... glyph to display (for buttons) ... 
-                        "text": ... text within control (for buttons) ... 
-                    }, 
-                    ... and other rows ... 
-                ] 
-            }, 
-            ... and other sections ... 
-        ] 
-    }
-
-## Table
-
-The `mct-table` directive provides a generic table component, with optional 
-sorting and filtering capabilities. The table can be pre-populated with data 
-by setting the `rows` parameter, and it can be updated in real-time using the
-`add:row` and `remove:row` broadcast events. The table will expand to occupy 
-100% of the size of its containing element. The table is highly optimized for 
-very large data sets.
-
-### Events
-
-The table supports two events for notifying that the rows have changed. For 
-performance reasons, the table does not monitor the content of `rows` 
-constantly. 
-
-* `add:row`: A `$broadcast` event that will notify the table that a new row 
-has been added to the table.
-
-eg. The code below adds a new row, and alerts the table using the `add:row` 
-event. Sorting and filtering will be applied automatically by the table component.
-
-```
-$scope.rows.push(newRow);
-$scope.$broadcast('add:row', $scope.rows.length-1);
-```
-
-* `remove:row`: A `$broadcast` event that will notify the table that a row 
-should be removed from the table.
-
-eg. The code below removes a row from the rows array, and then alerts the table 
-to its removal.
-    
-```
-$scope.rows.slice(5, 1);
-$scope.$broadcast('remove:row', 5);
-```
-
-### Parameters
-
-* `headers`: An array of string values which will constitute the column titles
- that appear at the top of the table. Corresponding values are specified in 
- the rows using the header title provided here.
-* `rows`: An array of objects containing row values. Each element in the 
-array must be an associative array, where the key corresponds to a column header. 
-* `enableFilter`: A boolean that if true, will enable searching and result 
-filtering. When enabled, each column will have a text input field that can be
-used to filter the table rows in real time.
-* `enableSort`: A boolean determining whether rows can be sorted. If true, 
-sorting will be enabled allowing sorting by clicking on column headers. Only 
-one column may be sorted at a time.
-* `autoScroll`: A boolean value that if true, will cause the table to automatically 
-scroll to the bottom as new data arrives. Auto-scroll can be disengaged manually 
-by scrolling away from the bottom of the table, and can also be enabled manually 
-by scrolling to the bottom of the table rows.
-
-# Services 
-
-The Open MCT platform provides a variety of services which can be retrieved 
-and utilized via dependency injection. These services fall into two categories: 
-
-* _Composite Services_ are defined by a set of components extensions; plugins may 
-introduce additional components with matching interfaces to extend or augment 
-the functionality of the composed service. (See the Framework section on 
-Composite Services.) 
-* _Other services_ which are defined as standalone service objects; these can be 
-utilized by plugins but are not intended to be modified or augmented. 
-
-## Composite Type Services
-
-This section describes the composite services exposed by Open MCT, 
-specifically focusing on their interface and contract. 
-    
-In many cases, the platform will include a provider for a service which consumes 
-a specific extension category; for instance, the `actionService` depends on 
-`actions[]` and will expose available actions based on the rules defined for 
-that extension category.  
-
-In these cases, it will usually be simpler to add a new extension of a given 
-category (e.g. of category `actions`) even when the same behavior could be 
-introduced by a service component (e.g. an extension of category `components` 
-where `provides` is `actionService` and `type` is `provider`.)  
-
-Occasionally, the extension category does not provide enough expressive power to 
-achieve a desired result. For instance, the Create menu is populated with 
-`create` actions, where one such action exists for each creatable type. Since 
-the framework does not provide a declarative means to introduce a new action per 
-type declaratively, the platform implements this explicitly in an `actionService` 
-component of type `provider`. Plugins may use a similar approach when the normal 
-extension mechanism is insufficient to achieve a desired result. 
- 
-### Action Service
-
-The [Action Service](../architecture/platform.md#action-service) 
-(`actionService`) 
-provides `Action` instances which are applicable in specific contexts. See Core 
-API for additional notes on the interface for actions. The `actionService` has 
-the following interface: 
-
-* `getActions(context)`: Returns an array of Action objects which are applicable 
-in the specified action context.   
-
-### Capability Service 
-
-The [Capability Service](../architecture/platform.md#capability-service) 
-(`capabilityService`) 
-provides constructors for capabilities which will be exposed for a given domain 
-object. 
-
-The capabilityService has the following interface: 
-
-* `getCapabilities(model)`: Returns a an object containing key-value pairs, 
-representing capabilities which should be exposed by the domain object with this 
-model. Keys in this object are the capability keys (as used in a 
-`getCapability(...)` call) and values are either: 
-    * Functions, in which case they will be used as constructors, which will 
-    receive the domain object instance to which the capability applies as their 
-    sole argument.The resulting object will be provided as the result of a 
-    domain object's `getCapability(...)`  call. Note that these instances are cached 
-    by each object, but may be recreated when an object is mutated. 
-    * Other objects, which will be used directly as the result of a domain 
-    object's `getCapability(...)` call. 
-
-### Dialog Service 
-
-The `dialogService` provides a means for requesting user input via a modal 
-dialog. It has the following interface: 
-
-* `getUserInput(formStructure, formState)`: Prompt the user to fill out a form. 
-The first argument describes the form's structure (as will be passed to 
- mct-form ) while the second argument contains the initial state of that form. 
-This returns a Promise for the state of the form after the user has filled it 
-in; this promise will be rejected if the user cancels input. 
-* `getUserChoice(dialogStructure)`: Prompt the user to make a single choice from 
-a set of options, which (in the platform implementation) will be expressed as 
-buttons in the displayed dialog. Returns a Promise for the user's choice, which 
-will be rejected if the user cancels input. 
-
-### Dialog Structure 
-
-The object passed as the `dialogStructure` to `getUserChoice` should have the 
-following properties:
-
-* `title`: The title to display at the top of the dialog. 
-* `hint`: Short message to display below the title. 
-* `template`: Identifying key  (as will be passed to mct-include ) for the 
-template which will be used to populate the inner area of the dialog. 
-* `model`: Model to pass in the ng-model attribute of mct-include . 
-* `parameters`: Parameters to pass in the parameters attribute of mct-include . 
-* `options`: An array of options describing each button at the bottom. Each 
-option may have the following properties:
-    * `name`: Human-readable name to display in the button. 
-    * `key`: Machine-readable key, to pass as the result of the resolved promise 
-    when clicked. 
-    * `description`: Description to show in tooltip on hover.
-
-### Domain Object Service 
-
-The [Object Service](../architecture/platform.md#object-service) (`objectService`)
-provides domain object instances. It has the following interface:
-
-* `getObjects(ids)`: For the provided array of domain object identifiers, 
-returns a Promise for an object containing key-value pairs, where keys are 
-domain object identifiers and values are corresponding DomainObject instances. 
-Note that the result may contain a superset or subset of the objects requested. 
-
-### Gesture Service 
-
-The `gestureService` is used to attach gestures (see extension category gestures) 
-to representations. It has the following interface:
-
-* `attachGestures(element, domainObject, keys)`: Attach gestures specified by 
-the provided gesture keys  (an array of strings) to this jqLite-wrapped HTML 
-element , which represents the specified domainObject . Returns an object with a 
-single method `destroy()`, to be invoked when it is time to detach these 
-gestures. 
-
-### Model Service 
-
-The [Model Service](../architecture/platform.md#model-service) (`modelService`) 
-provides domain object models. It has the following interface: 
-
-* `getModels(ids)`: For the provided array of domain object identifiers, returns 
-a Promise for an object containing key-value pairs, where keys are domain object 
-identifiers and values are corresponding domain object models. Note that the 
-result may contain a superset or subset of the models requested. 
-
-### Persistence Service 
-
-The [Persistence Service](../architecture/platform.md#persistence-service) (`persistenceService`)
-provides the ability to load/store JavaScript objects 
-(presumably serializing/deserializing to JSON in the process.) This is used 
-primarily to store domain object models. It has the following interface: 
-
-* `listSpaces()`: Returns a Promise for an array of strings identifying the 
-different persistence spaces this service supports. Spaces are intended to be 
-used to distinguish between different underlying persistence stores, to allow 
-these to live side by side. 
-* `listObjects()`: Returns a Promise for an array of strings identifying all 
-documents stored in this persistence service. 
-* `createObject(space, key, value)`: Create a new document in the specified 
-persistence space , identified by the specified key , the contents of which shall 
-match the specified value . Returns a promise that will be rejected if creation 
-fails. 
-* `readObject(space, key)`: Read an existing document in the specified 
-persistence space , identified by the specified key . Returns a promise for the 
-specified document; this promise will resolve to undefined if the document does 
-not exist. 
-* `updateObject(space, key, value)`: Update an existing document in the 
-specified persistence space , identified by the specified key , such that its 
-contents match the specified value . Returns a promise that will be rejected if 
-the update fails. 
-* `deleteObject(space, key)`: Delete an existing document from the specified 
-persistence space , identified by the specified key . Returns a promise which will 
-be rejected if deletion fails. 
-
-### Policy Service 
-
-The [Policy Service](../architecture/platform.md#policy-service) (`policyService`) 
-may be used to determine whether or not certain behaviors are 
-allowed within the application. It has the following interface: 
- 
-* `allow(category, candidate, context, [callback])`: Check if this decision 
-should be allowed. Returns a boolean. Its arguments are interpreted as: 
-    * `category`: A string identifying which kind of decision is being made. See 
-    the [section on Categories](#policy-categories) for categories supported by 
-    the platform; plugins may define and utilize policies of additional 
-    categories, as well. 
-    * `candidate`: An object representing the thing which shall or shall not be 
-    allowed. Usually, this will be an instance of an extension of the category 
-    defined above. This does need to be the case; additional policies which are 
-    not specific to any extension may also be defined and consulted using unique 
-    category identifiers. In this case, the type of the object delivered for the 
-    candidate may be unique to the policy type. 
-    * `context`: An object representing the context in which the decision is 
-    occurring. Its contents are specific to each policy category. 
-    * `callback`: Optional; a function to call if the policy decision is rejected. 
-    This function will be called with the message string (which may be 
-    undefined) of whichever individual policy caused the operation to fail. 
-
-### Telemetry Service 
-
-The [Telemetry Service](../architecture/platform.md#telemetry-service) (`telemetryService`)
-is used to acquire telemetry data. See the section on 
-Telemetry in Core API for more information on how both the arguments and 
-responses of this service are structured. 
-
-When acquiring telemetry for display, it is recommended that the 
-`telemetryHandler` service be used instead of this service. The 
-`telemetryHandler` has additional support for subscribing to and requesting 
-telemetry data associated with domain objects or groups of domain objects. See 
-the [Other Services](#other-services) section for more information. 
-
-The `telemetryService` has the following interface:
-
-* `requestTelemetry(requests)`: Issue a request for telemetry, matching the 
-specified telemetry requests . Returns a _ Promise _ for a telemetry response 
-object.
-* `subscribe(callback, requests)`: Subscribe to real-time updates for telemetry, 
-matching the specified `requests`. The specified `callback` will be invoked with 
-telemetry response objects as they become available. This method returns a 
-function which can be invoked to terminate the subscription. 
-
-### Type Service 
-
-The [Type Service](../architecture/platform.md#type-service) (`typeService`) exposes 
-domain object types. It has the following interface:
-
-* `listTypes()`: Returns all domain object types supported in the application, 
-as an array of `Type` instances.
-* `getType(key)`: Returns the `Type` instance identified by the provided key, or 
-undefined if no such type exists. 
-
-### View Service 
-
-The [View Service](../architecture/platform.md#view-service) (`viewService`) exposes 
-definitions for views of domain objects. It has the following interface:
- 
-* `getViews(domainObject)`:  Get an array of extension definitions of category 
-`views` which are valid and applicable to the specified `domainObject`. 
- 
-## Other Services
-
-### Drag and Drop 
-
-The `dndService` provides information about the content of an active 
-drag-and-drop gesture within the application. It is intended to complement the 
-`DataTransfer` API of HTML5 drag-and-drop, by providing access to non-serialized 
-JavaScript objects being dragged, as well as by permitting inspection during 
-drag (which is normally prohibited by browsers for security reasons.) 
-
-The `dndService` has the following methods: 
-
-* `setData(key, value)`: Set drag data associated with a given type, specified 
-by the `key` argument. 
-* `getData(key)`: Get drag data associated with a given type, specified by the  
-`key` argument. 
-* `removeData(key)`: Clear drag data associated with a given type, specified by 
-the `key` argument. 
-
-### Navigation 
- 
-The _Navigation_ service provides information about the current navigation state 
-of the application; that is, which object is the user currently viewing? This 
-service merely tracks this state and notifies listeners; it does not take 
-immediate action when navigation changes, although its listeners might. 
-
-The `navigationService` has the following methods:
-
-* `getNavigation()`: Get the current navigation state. Returns a `DomainObject`. 
-* `setNavigation(domainObject)`: Set the current navigation state. Returns a 
-`DomainObject`. 
-* `addListener(callback)`: Listen for changes in navigation state. The provided 
-`callback` should be a `Function` which takes a single `DomainObject` as an 
-argument. 
-* `removeListener(callback)`: Stop listening for changes in navigation state. 
-The provided `callback` should be a `Function` which has previously been passed 
-to addListener .
-
-### Now 
-
-The service now is a function which acts as a simple wrapper for `Date.now()`. 
-It is present mainly so that this functionality may be more easily mocked in 
-tests for scripts which use the current time. 
-
-### Telemetry Formatter 
-
-The _Telemetry Formatter_ is a utility for formatting domain and range values 
-read from a telemetry series. 
-
-`telemetryFormatter` has the following methods: 
-
-* `formatDomainValue(value)`: Format the provided domain value (which will be 
-assumed to be a timestamp) for display; returns a string. 
-* `formatRangeValue(value)`: Format the provided range value (a number) for 
-display; returns a string.
-
-### Telemetry Handler 
-
-The _Telemetry Handler_ is a utility for retrieving telemetry data associated 
-with domain objects; it is particularly useful for dealing with cases where the 
-telemetry capability is delegated to contained objects (as occurs 
-in _Telemetry Panels_.) 
-
-The `telemetryHandler` has the following methods: 
-
-* `handle(domainObject, callback, [lossless])`: Subscribe to and issue future 
-requests for telemetry associated with the provided `domainObject`, invoking the 
-provided callback function when streaming data becomes available. Returns a 
-`TelemetryHandle` (see below.) 
-
-#### Telemetry Handle 
-
-A TelemetryHandle has the following methods: 
-
-* `getTelemetryObjects()`: Get the domain objects (as a `DomainObject[]`) that 
-have a telemetry capability and are being handled here. Note that these are 
-looked up asynchronously, so this method may return an empty array if the 
-initial lookup is not yet completed. 
-* `promiseTelemetryObjects()`: As `getTelemetryObjects()`, but returns a Promise  
-that will be fulfilled when the lookup is complete. 
-* `unsubscribe()`: Unsubscribe to streaming telemetry updates associated with 
-this handle. 
-* `getDomainValue(domainObject)`: Get the most recent domain value received via 
-a streaming update for the specified `domainObject`. 
-* `getRangeValue(domainObject)`: Get the most recent range value received via a 
-streaming update for the specified `domainObject`. 
-* `getMetadata()`: Get metadata (as reported by the `getMetadata()` method of a 
-telemetry capability) associated with telemetry-providing domain objects. 
-Returns an array, which is in the same order as getTelemetryObjects() . 
-* `request(request, callback)`: Issue a new request for historical telemetry 
-data. The provided callback will be invoked when new data becomes available, 
-which may occur multiple times (e.g. if there are multiple domain objects.) It 
-will be invoked with the DomainObject for which a new series is available, and 
-the TelemetrySeries itself, in that order. 
-* `getSeries(domainObject)`: Get the latest `TelemetrySeries` (as resulted from 
-a previous `request(...)` call) available for this domain object.
-
-### Worker Service
-
-The `workerService` may be used to run web workers defined via the
-`workers` extension category. It has the following method:
-
-* `run(key)`: Run the worker identified by the provided `key`. Returns
-  a `Worker` (or `SharedWorker`, if the specified worker is defined
-  as a shared worker); if the `key` is unknown, returns `undefined`.
-
-# Models
-Domain object models in Open MCT are JavaScript objects describing the 
-persistent state of the domain objects they describe. Their contents include a 
-mix of commonly understood metadata attributes; attributes which are recognized 
-by and/or determine the applicability of specific extensions; and properties 
-specific to given types. 
-
-## General Metadata 
-
-Some properties of domain object models have a ubiquitous meaning through Open 
-MCT Web and can be utilized directly: 
-
-* `name`: The human-readable name of the domain object.
-
-## Extension-specific Properties 
-
-Other properties of domain object models have specific meaning imposed by other 
-extensions within the Open MCT platform. 
-
-### Capability-specific Properties 
-
-Some properties either trigger the presence/absence of certain capabilities, or 
-are managed by specific capabilities:
-
-* `composition`: An array of domain object identifiers that represents the 
-contents of this domain object (e.g. as will appear in the tree hierarchy.) 
-Understood by the composition capability; the presence or absence of this 
-property determines the presence or absence of that capability. 
-* `modified`: The timestamp (in milliseconds since the UNIX epoch) of the last 
-modification made to this domain object. Managed by the mutation capability. 
-* `persisted`: The timestamp (in milliseconds since the UNIX epoch) of the last 
-time when changes to this domain object were persisted. Managed by the 
- persistence capability. 
-* `relationships`: An object containing key-value pairs, where keys are symbolic 
-identifiers for relationship types, and values are arrays of domain object 
-identifiers. Used by the relationship capability; the presence or absence of 
-this property determines the presence or absence of that capability. 
-* `telemetry`: An object which serves as a template for telemetry requests 
-associated with this domain object (e.g. specifying `source` and `key`; see 
-Telemetry Requests under Core API.) Used by the telemetry capability; the 
-presence or absence of this property determines the presence or absence of that 
-capability.
-* `type`: A string identifying the type of this domain object. Used by the `type` 
-capability. 
- 
-### View Configurations 
-
-Persistent configurations for specific views of domain objects are stored in the 
-domain object model under the property configurations . This is an object 
-containing key-value pairs, where keys identify the view, and values are objects 
-containing view-specific (and view-managed) configuration properties. 
- 
-## Modifying Models 
-When interacting with a domain object's model, it is possible to make 
-modifications to it directly. __Don't!__  These changes may not be properly detected 
-by the platform, meaning that other representations of the domain object may not 
-be updated, changes may not be saved at the expected times, and generally, that 
-unexpected behavior may occur. Instead, use the `mutation` capability. 
-
-# Capabilities 
-
-Dynamic behavior associated with a domain object is expressed as capabilities. A 
-capability is a JavaScript object with an interface that is specific to the type 
-of capability in use. 
-
-Often, there is a relationship between capabilities and services. For instance, 
-there is an action capability and an actionService , and there is a telemetry  
-capability as well as a `telemetryService`. Typically, the pattern here is that 
-the capability will utilize the service for the specific domain object.  
-
-When interacting with domain objects, it is generally preferable to use a 
-capability instead of a service when the option is available. Capability 
-interfaces are typically easier to use and/or more powerful in these situations. 
-Additionally, this usage provides a more robust substitutability mechanism; for 
-instance, one could configure a plugin such that it provided a totally new 
-implementation of a given capability which might not invoke the underlying 
-service, while user code which interacts with capabilities remains indifferent 
-to this detail. 
- 
-## Action Capability
-
-The `action` capability is present for all domain objects. It allows applicable 
-`Action` instances to be retrieved and performed for specific domain objects. 
-
-For example: 
-    `domainObject.getCapability("action").perform("navigate"); `
-    ...will initiate a navigate action upon the domain object, if an action with 
-    key "navigate" is defined. 
-   
-This capability has the following interface: 
-* `getActions(context)`: Get the actions that are applicable in the specified 
-action `context`; the capability will fill in the `domainObject` field of this 
-context if necessary. If context is specified as a string, they will instead be 
-used as the `key` of the action context. Returns an array of `Action` instances.
-* `perform(context)`: Perform an action. This will find and perform the first 
-matching action available for the specified action context , filling in the 
-`domainObject` field as necessary. If `context` is specified as a string, they 
-will instead be used as the `key` of the action context. Returns a `Promise` for 
-the result of the action that was performed, or `undefined` if no matching action 
-was found. 
-
-## Composition Capability
-
-The `composition` capability provides access to domain objects that are 
-contained by this domain object. While the `composition` property of a domain 
-object's model describes these contents (by their identifiers), the  
-`composition` capability provides a means to load the corresponding 
-`DomainObject` instances in the same order. The absence of this property in the 
-model will result in the absence of this capability in the domain object. 
-
-This capability has the following interface: 
-
-* `invoke()`: Returns a `Promise` for an array of `DomainObject` instances.
-
-## Delegation Capability
-
-The delegation capability is used to communicate the intent of a domain object 
-to delegate responsibilities, which would normally handled by other 
-capabilities, to the domain objects in its composition. 
-
-This capability has the following interface: 
-
-* `getDelegates(key)`: Returns a Promise for an array of DomainObject instances, 
-to which this domain object wishes to delegate the capability with the specified  
-key . 
-* `invoke(key)`: Alias of getDelegates(key) . 
-* `doesDelegate(key)`: Returns true if the domain object does delegate the 
-capability with the specified key .  
-
-The platform implementation of the delegation capability inspects the domain 
-object's type definition for a property delegates , whose value is an array of 
-strings describing which capabilities domain objects of that type wish to 
-delegate. If this property is not present, the delegation capability will not be 
-present in domain objects of that type.  
-
-## Editor Capability
-
-The editor capability is meant primarily for internal use by Edit mode, and 
-helps to manage the behavior associated with exiting _Edit_ mode via _Save_ or 
-_Cancel_. Its interface is not intended for general use. However, 
-`domainObject.hasCapability(editor)` is a useful way of determining whether or 
-not we are looking at an object in _Edit_ mode.
- 
-## Mutation Capability
-
-The `mutation` capability provides a means by which the contents of a domain 
-object's model can be modified. This capability is provided by the platform for 
-all domain objects, and has the following interface:
-
-* `mutate(mutator, [timestamp])`: Modify the domain object's model using the 
-specified `mutator` function. After changes are made, the `modified` property of 
-the model will be updated with the specified `timestamp` if one was provided, 
-or with the current system time. 
-* `invoke(...)`: Alias of `mutate`.
-
-Changes to domain object models should only be made via the `mutation` 
-capability; other platform behavior is likely to break (either by exhibiting 
-undesired behavior, or failing to exhibit desired behavior) if models are 
-modified by other means.
- 
-### Mutator Function
-
-The mutator argument above is a function which will receive a cloned copy of the 
-domain object's model as a single argument. It may return: 
-
-* A `Promise` in which case the resolved value of the promise will be used to 
-determine which of the following forms is used. 
-* Boolean `false` in which case the mutation is cancelled. 
-* A JavaScript object, in which case this object will be used as the new model 
-for this domain object.
-* No value (or, equivalently, `undefined`), in which case the cloned copy 
-(including any changes made in place by the mutator function) will be used as 
-the new domain object model. 
-
-## Persistence Capability
-
-The persistence capability provides a mean for interacting with the underlying 
-persistence service which stores this domain object's model. It has the 
-following interface:
-
-* `persist()`: Store the local version of this domain object, including any 
-changes, to the persistence store. Returns a Promise for a boolean value, which 
-will be true when the object was successfully persisted.
-* `refresh()`: Replace this domain object's model with the most recent version 
-from persistence. Returns a Promise which will resolve when the change has 
-completed.
-* `getSpace()`: Return the string which identifies the persistence space which 
-stores this domain object.
-
-## Relationship Capability
-
-The relationship capability provides a means for accessing other domain objects 
-with which this domain object has some typed relationship. It has the following 
-interface:
-
-* `listRelationships()`: List all types of relationships exposed by this object. 
-Returns an array of strings identifying the types of relationships.
-* `getRelatedObjects(relationship)`: Get all domain objects to which this domain 
-object has the specified type of relationship, which is a string identifier 
-(as above.) Returns a `Promise` for an array of `DomainObject` instances.
-
-The platform implementation of the `relationship` capability is present for domain 
-objects which has a `relationships` property in their model, whose value is an 
-object containing key-value pairs, where keys are strings identifying 
-relationship types, and values are arrays of domain object identifiers.
-
-## Status Capability
-
-The `status` capability provides a way to flag domain objects as possessing
-certain states, represented as simple strings. These states, in turn, are
-reflected on `mct-representation` elements as classes (prefixed with
-`s-status-`.) The `status` capability has the following interface:
-
-* `get()`: Returns an array of all status strings that currently apply
-  to this object.
-* `set(status, state)`: Adds or removes a status flag to this domain object.
-  The `status` argument is the string to set; `state` is a boolean
-  indicating whether this status should be included (true) or removed (false).
-* `listen(callback)`: Listen for changes in status. The provided `callback`
-  will be invoked with an array of all current status strings whenever status
-  changes.
-
-Plug-ins may add and/or recognize arbitrary status flags. Flags defined
-and/or supported by the platform are:
-
- Status    | CSS Class          | Meaning
------------|--------------------|-----------------------------------
-`editing`  | `s-status-editing` | Domain object is being edited.
-`pending`  | `s-status-pending` | Domain object is partially loaded.
-
-
-## Telemetry Capability
-
-The telemetry capability provides a means for accessing telemetry data 
-associated with a domain object. It has the following interface:
-
-* `requestData([request])`: Request telemetry data for this specific domain 
-object, using telemetry request parameters from the specified request if 
-provided. This capability will fill in telemetry request properties as-needed 
-for this domain object. Returns a `Promise` for a `TelemetrySeries`.
-* `subscribe(callback, [request])`:  Subscribe to telemetry data updates for 
-this specific domain object, using telemetry request parameters from the 
-specified request if provided. This capability will fill in telemetry request 
-properties as-needed for this domain object. The specified callback will be 
-invoked with TelemetrySeries instances as they arrive. Returns a function which 
-can be invoked to terminate the subscription, or undefined if no subscription 
-could be obtained.
-* `getMetadata()`: Get metadata associated with this domain object's telemetry.
-
-The platform implementation of the `telemetry` capability is present for domain 
-objects which has a `telemetry` property in their model and/or type definition; 
-this object will serve as a template for telemetry requests made using this 
-object, and will also be returned by `getMetadata()` above.
-
-## Type Capability
-The `type` capability exposes information about the domain object's type. It has 
-the same interface as `Type`; see Core API.
-
-## View Capability
-
-The `view` capability exposes views which are applicable to a given domain 
-object. It has the following interface:
-
-* `invoke()`: Returns an array of extension definitions for views which are 
-applicable for this domain object.
-
-# Actions
-
-Actions are reusable processes/behaviors performed by users within the system, 
-typically upon domain objects.
-
-## Action Categories
-
-The platform understands the following action categories (specifiable as the 
-`category` parameter of an action's extension definition.)
-
-* `contextual`: Appears in context menus.
-* `view-control`: Appears in top-right area of view (as buttons) in Browse mode
-
-## Platform Actions
-The platform defines certain actions which can be utilized by way of a domain 
-object's `action` capability. Unless otherwise specified, these act upon (and 
-modify) the object described by the `domainObject` property of the action's 
-context.
-
-* `cancel`: Cancel the current editing action (invoked from Edit mode.)
-* `compose`: Place an object in another object's composition. The object to be 
-added should be provided as the `selectedObject` of the action context.
-* `edit`: Start editing an object (enter Edit mode.)
-* `fullscreen`: Enter full screen mode.
-* `navigate`: Make this object the focus of navigation (e.g. highlight it within 
-the tree, display a view of it to the right.)
-* `properties`: Show the 'Edit Properties' dialog.
-* `remove`: Remove this domain object from its parent's composition. (The 
-parent, in this case, is whichever other domain object exposed this object by 
-way of its `composition` capability.)
-* `save`: Save changes (invoked from Edit mode.)
-* `window`: Open this object in a new window.
-
-# Policies
-
-Policies are consulted to determine when certain behavior in Open MCT is 
-allowed. Policy questions are assigned to certain categories, which broadly 
-describe the type of decision being made; within each category, policies have a 
-candidate (the thing which may or may not be allowed) and, optionally, a context 
-(describing, generally, the context in which the decision is occurring.)
-
-The types of objects passed for 'candidate' and 'context' vary by category; 
-these types are documented below.
-
-## Policy Categories
-
-The platform understands the following policy categories (specifiable as the 
-`category` parameter of an policy's extension definition.)
-
-* `action`: Determines whether or not a given action is allowable. The candidate 
-argument here is an Action; the context is its action context object.
-* `composition`: Determines whether or not a given domain object(first argument, `parent`) can contain a candidate child object (second argument, `child`).
-* `view`: Determines whether or not a view is applicable for a domain object. 
-The candidate argument is the view's extension definition; the context argument 
-is the `DomainObject` to be viewed.
-
-# Build-Test-Deploy
-Open MCT is designed to support a broad variety of build and deployment 
-options. The sources can be deployed in the same directory structure used during 
-development. A few utilities are included to support development processes.
-
-## Command-line Build
-
-Open MCT is built using [`npm`](http://npmjs.com/)
-and [`gulp`](http://gulpjs.com/).
-
-To install build dependencies (only needs to be run once):
-
-`npm install`
-
-To build:
-
-`npm run prepare`
-
-This will compile and minify JavaScript sources, as well as copy over assets.
-The contents of the `dist` folder will contain a runnable Open MCT
-instance (e.g. by starting an HTTP server in that directory), including:
-
-* A `main.js` file containing Open MCT source code.
-* Various assets in the `example` and `platform` directories.
-* An `index.html` that runs Open MCT in its default configuration.
-
-Additional `gulp` tasks are defined in [the gulpfile](gulpfile.js).
-
-Note that an internet connection is required to run this build, in order to 
-download build dependencies.
-
-## Test Suite
-
-Open MCT uses [Jasmine 1.3](http://jasmine.github.io/) and
-[Karma](http://karma-runner.github.io) for automated testing.
-
-The test suite is configured to load any scripts ending with `Spec.js` found
-in the `src` hierarchy. Full configuration details are found in
-`karma.conf.js`. By convention, unit test scripts should be located
-alongside the units that they test; for example, `src/foo/Bar.js` would be
-tested by `src/foo/BarSpec.js`. (For legacy reasons, some existing tests may
-be located in separate `test` folders near the units they test, but the
-naming convention is otherwise the same.)
-
-Tests are written as AMD modules which depend (at minimum) upon the
-unit under test. For example, `src/foo/BarSpec.js` could look like:
-
-    /*global define,Promise,describe,it,expect,beforeEach*/
-
-    define(
-        ["./Bar"],
-        function (Bar) {
-            "use strict";
-
-            describe("Bar", function () {
-                it("does something", function () {
-                    var bar = new Bar();
-                    expect(controller.baz()).toEqual("foo");
-                });
-            });
-        }
-    );
-
-
-## Code Coverage
-
-In addition to running tests, the test runner will also capture code coverage 
-information using [Blanket.JS](http://blanketjs.org/) and display this at the 
-bottom of the screen. Currently, only statement coverage is displayed.
-
-## Deployment
-Open MCT is built to be flexible in terms of the deployment strategies it 
-supports. In order to run in the browser, Open MCT needs:
-
-1. HTTP access to sources/resources for the framework, platform, and all active 
-bundles.
-2. Access to any external services utilized by active bundles. (This means that 
-external services need to support HTTP or some other web-accessible interface, 
-like WebSockets.)
-
-Any HTTP server capable of serving flat files is sufficient for the first point. 
-The command-line build also packages Open MCT into a `.war` file for easier 
-deployment on containers such as Apache Tomcat.
-
-The second point may be less flexible, as it depends upon the specific services 
-to be utilized by Open MCT. Because of this, it is often the set of external 
-services (and the manner in which they are exposed) that determine how to deploy 
-Open MCT.
-
-One important constraint to consider in this context is the browser's same 
-origin policy. If external services are not on the same apparent host and port 
-as the client (from the perspective of the browser) then access may be 
-disallowed. There are two workarounds if this occurs:
-
-* Make the external service appear to be on the same host/port, either by 
-actually deploying it there, or by proxying requests to it.
-* Enable CORS (cross-origin resource sharing) on the external service. This is 
-only possible if the external service can be configured to support CORS. Care 
-should be exercised if choosing this option to ensure that the chosen 
-configuration does not create a security vulnerability.
-
-Examples of deployment strategies (and the conditions under which they make the 
-most sense) include:
-
-* If the external services that Open MCT will utilize are all running on 
-[Apache Tomcat](https://tomcat.apache.org/), then it makes sense to run Open 
-MCT Web from the same Tomcat instance as a separate web application. The 
-`.war` artifact produced by the command line build facilitates this deployment 
-option. (See https://tomcat.apache.org/tomcat-8.0-doc/deployer-howto.html for 
-general information on deploying in Tomcat.)
-* If a variety of external services will be running from a variety of 
-hosts/ports, then it may make sense to use a web server that supports proxying, 
-such as the [Apache HTTP Server](http://httpd.apache.org/). In this 
-configuration, the HTTP server would be configured to proxy (or reverse proxy) 
-requests at specific paths to the various external services, while providing 
-Open MCT as flat files from a different path.
-* If a single server component is being developed to handle all server-side 
-needs of an Open MCT instance, it can make sense to serve Open MCT (as 
-flat files) from the same component using an embedded HTTP server such as 
-[Nancy](http://nancyfx.org/).
-* If no external services are needed (or if the 'external services' will just 
-be generating flat files to read) it makes sense to utilize a lightweight flat 
-file HTTP server such as [Lighttpd](http://www.lighttpd.net/). In this 
-configuration, Open MCT sources/resources would be placed at one path, while 
-the files generated by the external service are placed at another path.
-* If all external services support CORS, it may make sense to have an HTTP 
-server that is solely responsible for making Open MCT sources/resources 
-available, and to have Open MCT contact these external services directly. 
-Again, lightweight HTTP servers such as [Lighttpd](http://www.lighttpd.net/) 
-are useful in this circumstance. The downside of this option is that additional 
-configuration effort is required, both to enable CORS on the external services, 
-and to ensure that Open MCT can correctly locate these services.
-
-Another important consideration is authentication. By design, Open MCT does 
-not handle user authentication. Instead, this should typically be treated as a 
-deployment-time concern, where authentication is handled by the HTTP server 
-which provides Open MCT, or an external access management system.
-
-### Configuration
-In most of the deployment options above, some level of configuration is likely 
-to be needed or desirable to make sure that bundles can reach the external 
-services they need to reach. Most commonly this means providing the path or URL 
-to an external service.
-
-Configurable parameters within Open MCT are specified via constants 
-(literally, as extensions of the `constants` category) and accessed via 
-dependency injection by the scripts which need them. Reasonable defaults for 
-these constants are provided in the bundle where they are used. Plugins are 
-encouraged to follow the same pattern.
-
-Constants may be specified in any bundle; if multiple constants are specified 
-with the same `key` the highest-priority one will be used. This allows default 
-values to be overridden by specifying constants with higher priority.
-
-This permits at least three configuration approaches:
-
-* Modify the constants defined in their original bundles when deploying. This is 
-generally undesirable due to the amount of manual work required and potential 
-for error, but is viable if there are a small number of constants to change.
-* Add a separate configuration bundle which overrides the values of these 
-constants. This is particularly appropriate when multiple configurations (e.g. 
-development, test, production) need to be managed easily; these can be swapped 
-quickly by changing the set of active bundles in bundles.json.
-* Deploy Open MCT and its external services in such a fashion that the 
-default paths to reach external services are all correct.
-
-### Configuration Constants
-
-The following constants have global significance:
-* `PERSISTENCE_SPACE`: The space in which domain objects should be persisted
-  (or read from) when not otherwise specified. Typically this will not need
-  to be overridden by other bundles, but persistence adapters may wish to
-  consume this constant in order to provide persistence for that space.
-
-The following configuration constants are recognized by Open MCT bundles:
-* Common UI elements - `platform/commonUI/general`
-    * `THEME`: A string identifying the current theme symbolically. Individual
-    stylesheets (the `stylesheets` extension category) may specify an optional
-    `theme` property which will be matched against this before inclusion.
-* CouchDB adapter - `platform/persistence/couch`
-    * `COUCHDB_PATH`: URL or path to the CouchDB database to be used for domain 
-    object persistence. Should not include a trailing slash.
-* ElasticSearch adapter - `platform/persistence/elastic`
-    * `ELASTIC_ROOT`: URL or path to the ElasticSearch instance to be used for 
-    domain object persistence. Should not include a trailing slash.
-    * `ELASTIC_PATH`: Path relative to the ElasticSearch instance where domain 
-    object models should be persisted. Should take the form `<index>/<type>`.
diff --git a/docs/src/index.md b/docs/src/index.md
index 316fb6e9444..52781a37394 100644
--- a/docs/src/index.md
+++ b/docs/src/index.md
@@ -15,23 +15,12 @@
 
 ## Sections
  
- * The [API](api/) document is generated from inline documentation 
- using [JSDoc](http://usejsdoc.org/), and describes the JavaScript objects and
+ * The [API](api/) uses inline documentation 
+ using [TypeScript](https://www.typescriptlang.org) and some legacy [JSDoc](https://jsdoc.app/). It describes the JavaScript objects and
  functions that make up the software platform.
 
  * The [Development Process](process/) document describes the
  Open MCT software development cycle.
 
-## Legacy Documentation
-
-As we transition to a new API, the following documentation for the old API
-(which is supported during the transtion) may be useful as well:
-
- * The [Architecture Overview](architecture/) describes the concepts used
- throughout Open MCT, and gives a high level overview of the platform's design.
-
- * The [Developer's Guide](guide/) goes into more detail about how to use the
- platform and the functionality that it provides.
-
  * The [Tutorials](https://github.com/nasa/openmct-tutorial) give examples of extending the platform to add
  functionality, and integrate with data sources.
diff --git a/docs/src/process/index.md b/docs/src/process/index.md
index fc8f7e6e914..ae781b0de8f 100644
--- a/docs/src/process/index.md
+++ b/docs/src/process/index.md
@@ -7,9 +7,5 @@ documents:
   process points are repeated during development.
 * The [Version Guide](version.md) describes version numbering for
   Open MCT (both semantics and process.)
-* Testing is described in two documents:
-  * The [Test Plan](testing/plan.md) summarizes the approaches used
-    to test Open MCT.
-  * The [Test Procedures](testing/procedures.md) document what
-    specific tests are performed to verify correctness, and how
-    they should be carried out.
+* The [Test Plan](testing/plan.md) summarizes the approaches used
+  to test Open MCT.
diff --git a/docs/src/process/release.md b/docs/src/process/release.md
new file mode 100644
index 00000000000..77ea89e5cb4
--- /dev/null
+++ b/docs/src/process/release.md
@@ -0,0 +1,30 @@
+
+# Release of NASA Open MCT NPM Package
+
+This document outlines the process and key considerations for releasing a new version of the NASA Open MCT project as an NPM (Node Package Manager) package.
+
+## 1. Pre-requisites
+
+Before releasing a new version of the NASA Open MCT NPM package, ensure all dependencies are updated, and comprehensive tests are performed. This ensures compatibility and performance of the Open MCT within the Node.js ecosystem.
+
+## 2. Versioning
+
+Versioning is a critical step for package release. The Open MCT team follows [Semantic Versioning (SemVer)](https://semver.org) that consists of three major components: MAJOR.MINOR.PATCH. These ensure a structured process for updating, bug fixes, backward compatibility, and software progress.
+
+## 3. Changelog Maintenance
+
+A comprehensive changelog file, `CHANGELOG.md`, documents any changes, adding a high level of transparencies for anyone desiring to look into the status of new and past progress. It includes the summation of any major new enhancements, changes, bug fixes, and the credits to the users responsible for each unique progress.
+
+## 4. Notable Changes Labels on GitHub PRs
+
+For the Open MCT package, we leverage GitHub's Pull Request (PR) mechanisms extensively, with three important PR labels dedicated to signifying 'notable_changes':
+
+- **Breaking Change** Highlights the integration of changes that are suspected to break, or without a doubt will break, backward compatibility. These should signal to users the upgrade might be seamless only if dependency and integration factors are properly managed, if not, one should expect to manage atypical technical snags.
+- **API change** Signifies when a contribution makes any complete or under layer changes to the communication or its supporting access processes. This label flags required see-through insight on how the web-based control panel sees and manipulates any value and or network logs.
+- **Default Behavior Change:** In the incident an update either adjusts a form to or integrates a not previously kept setting or plugin. i.e. autoscale is enabled by default when working with plots.
+
+## 6. Community & Contributions
+
+A flat community and the rounded center are kept in continuous celebration, with the given station open for two open-specifying dialogues, research, and all-for development probing. State the ownership for a handed looped, a welcome for even structure-core and architectural draft and impend.
+
+Thank you for your collaboration and commitment to moving the project onto a text big club. 
diff --git a/docs/src/process/testing/procedures.md b/docs/src/process/testing/procedures.md
deleted file mode 100644
index 5ccf0def5bf..00000000000
--- a/docs/src/process/testing/procedures.md
+++ /dev/null
@@ -1,169 +0,0 @@
-# Test Procedures
-
-## Introduction
-
-This document is intended to be used:
-
-* By testers, to verify that Open MCT behaves as specified.
-* By the development team, to document new test cases and to provide
-  guidance on how to author these.
-
-## Writing Procedures
-
-### Template
-
-Procedures for individual tests should use the following template,
-adapted from [https://swehb.nasa.gov/display/7150/SWE-114]().
-
-Property       | Value
----------------|---------------------------------------------------------------
-Test ID        |
-Relevant reqs. |
-Prerequisites  |
-Test input     |
-Instructions   |
-Expectation    |
-Eval. criteria |
-
-For multi-line descriptions, use an asterisk or similar indicator to refer
-to a longer-form description below.
-
-#### Example Procedure - Edit a Layout
-
-Property       | Value
----------------|---------------------------------------------------------------
-Test ID        | MCT-TEST-000X - Edit a layout
-Relevant reqs. | MCT-EDIT-000Y
-Prerequisites  | Create a layout, as in MCT-TEST-000Z
-Test input     | Domain object database XYZ
-Instructions   | See below &ast;
-Expectation    | Change to editing context &dagger;
-Eval. criteria | Visual inspection
-
-&ast; Follow the following steps:
-
-1. Verify that the created layout is currently navigated-to,
-   as in MCT-TEST-00ZZ.
-2. Click the Edit button, identified by a pencil icon and the text "Edit"
-   displayed on hover.
-
-&dagger; Right-hand viewing area should be surrounded by a dashed
-blue border when a domain object is being edited.
-
-### Guidelines
-
-Test procedures should be written assuming minimal prior knowledge of the
-application: Non-standard terms should only be used when they are documented
-in [the glossary](#glossary), and shorthands used for user actions should
-be accompanied by useful references to test procedures describing those
-actions (when available) or descriptions in user documentation.
-
-Test cases should be narrow in scope; if a list of steps is excessively
-long (or must be written vaguely to be kept short) it should be broken
-down into multiple tests which reference one another.
-
-All requirements satisfied by Open MCT should be verifiable using
-one or more test procedures.
-
-## Glossary
-
-This section will contain terms used in test procedures. This may link to
-a common glossary, to avoid replication of content.
-
-## Procedures
-
-This section will contain specific test procedures. Presently, procedures
-are placeholders describing general patterns for setting up and conducting
-testing.
-
-### User Testing Setup
-
-These procedures describes a general pattern for setting up for user
-testing. Specific deployments should customize this pattern with
-relevant data and any additional steps necessary.
-
-Property       | Value
----------------|---------------------------------------------------------------
-Test ID        | MCT-TEST-SETUP0 - User Testing Setup
-Relevant reqs. | TBD
-Prerequisites  | Build of relevant components
-Test input     | Exemplary database; exemplary telemetry data set
-Instructions   | See below
-Expectation    | Able to load application in a web browser (Google Chrome)
-Eval. criteria | Visual inspection
-
-Instructions:
-
-1. Start telemetry server.
-2. Start ElasticSearch.
-3. Restore database snapshot to ElasticSearch.
-4. Start telemetry playback.
-5. Start HTTP server for client sources.
-
-### User Test Procedures
-
-Specific user test cases have not yet been authored. In their absence,
-user testing is conducted by:
-
-* Reviewing the text of issues from the issue tracker to understand the
-  desired behavior, and exercising this behavior in the running application.
-  (For instance, by following steps to reproduce from the original issue.)
-  * Issues which appear to be resolved should be marked as such with comments
-    on the original issue (e.g. "verified during user testing MM/DD/YYYY".)
-  * Issues which appear not to have been resolved should be reopened with an
-    explanation of what unexpected behavior has been observed.
-  * In cases where an issue appears resolved as-worded but other related
-    undesirable behavior is observed during testing, a new issue should be
-    opened, and linked to from a comment in the original issues.
-* General usage of new features and/or existing features which have undergone
-  recent changes. Defects or problems with usability should be documented
-  by filing issues in the issue tracker.
-* Open-ended testing to discover defects, identify usability issues, and
-  generate feature requests.
-
-### Long-Duration Testing
-
-The purpose of long-duration testing is to identify performance issues
-and/or other defects which are sensitive to the amount of time the
-application is kept running. (Memory leaks, for instance.)
-
-Property       | Value
----------------|---------------------------------------------------------------
-Test ID        | MCT-TEST-LDT0 - Long-duration Testing
-Relevant reqs. | TBD
-Prerequisites  | MCT-TEST-SETUP0
-Test input     | (As for test setup.)
-Instructions   | See "Instructions" below &ast;
-Expectation    | See "Expectations" below &dagger;
-Eval. criteria | Visual inspection
-
-&ast; Instructions:
-
-1. Start `top` or a similar tool to measure CPU usage and memory utilization.
-2. Open several user-created displays (as many as would be realistically
-   opened during actual usage in a stressing case) in some combination of
-   separate tabs and windows (approximately as many tabs-per-window as
-   total windows.)
-3. Ensure that playback data is set to run continuously for at least 24 hours
-   (e.g. on a loop.)
-4. Record CPU usage and memory utilization.
-5. In at least one tab, try some general user interface gestures and make
-   notes about the subjective experience of using the application. (Particularly,
-   the degree of responsiveness.)
-6. Leave client displays open for 24 hours.
-7. Record CPU usage and memory utilization again.
-8. Make additional notes about the subjective experience of using the
-   application (again, particularly responsiveness.)
-9. Check logs for any unexpected warnings or errors.
-
-&dagger; Expectations:
-
-* At the end of the test, CPU usage and memory usage should both be similar
-  to their levels at the start of the test.
-* At the end of the test, subjective usage of the application should not
-  be observably different from the way it was at the start of the test.
-  (In particular, responsiveness should not decrease.)
-* Logs should not contain any unexpected warnings or errors ("expected"
-  warnings or errors are those that have been documented and prioritized
-  as known issues, or those that are explained by transient conditions
-  external to the software, such as network outages.)
diff --git a/docs/src/process/version.md b/docs/src/process/version.md
index cf37e7b6169..91d57e16388 100644
--- a/docs/src/process/version.md
+++ b/docs/src/process/version.md
@@ -53,7 +53,7 @@ requirements.
 
 Additionally, the following project-specific standards will be used:
 
-* During development, a "-SNAPSHOT" suffix shall be appended to the
+* During development, a "-next" suffix shall be appended to the
   version number. The version number before the suffix shall reflect
   the next expected version number for release.
 * Prior to a 1.0.0 release, the _minor_ version will be incremented
@@ -93,7 +93,7 @@ numbers by the following process:
 
 1. Update version number in `package.json`
   1. Checkout branch created for the last sprint that has been successfully tested.
-  2. Remove a `-SNAPSHOT` suffix from the version in `package.json`.
+  2. Remove a `-next` suffix from the version in `package.json`.
   3. Verify that resulting version number meets semantic versioning
      requirements relative to previous stable version. Increment the 
      version number if necessary.
@@ -138,7 +138,7 @@ numbers by the following process:
   1. Create a new branch off the `master` branch.
   2. Remove any suffix from the version number, 
      or increment the _patch_ version if there is no suffix.
-  3. Append a `-SNAPSHOT` suffix.
+  3. Append a `-next` suffix.
   4. Commit changes to `package.json` on the `master` branch.
      The commit message should reference the sprint being opened,
      preferably by a URL reference to the associated Milestone in
@@ -150,6 +150,6 @@ numbers by the following process:
 Projects dependent on Open MCT being co-developed by the Open MCT
 team should follow a similar process, except that they should
 additionally update their dependency on Open MCT to point to the
-latest archive when removing their `-SNAPSHOT` status, and
+latest archive when removing their `-next` status, and
 that they should be pointed back to the `master` branch after
 this has completed.
diff --git a/e2e/.eslintrc.cjs b/e2e/.eslintrc.cjs
new file mode 100644
index 00000000000..9d378f77c0d
--- /dev/null
+++ b/e2e/.eslintrc.cjs
@@ -0,0 +1,15 @@
+/* eslint-disable no-undef */
+module.exports = {
+  extends: ['plugin:playwright/playwright-test'],
+  rules: {
+    'playwright/max-nested-describe': ['error', { max: 1 }]
+  },
+  overrides: [
+    {
+      files: ['tests/visual/*.spec.js'],
+      rules: {
+        'playwright/no-wait-for-timeout': 'off'
+      }
+    }
+  ]
+};
diff --git a/e2e/.percy.ci.yml b/e2e/.percy.ci.yml
new file mode 100644
index 00000000000..bccb093fc90
--- /dev/null
+++ b/e2e/.percy.ci.yml
@@ -0,0 +1,33 @@
+version: 2
+snapshot:
+  widths: [1024]
+  min-height: 1440 # px
+  percyCSS: |
+    /* Clock indicator... your days are numbered  */
+    .t-indicator-clock > .label {
+      opacity: 0 !important;
+    }
+    .c-input--datetime {
+      opacity: 0 !important;
+    }
+    /* Timer object text */
+    .c-ne__time-and-creator {
+      opacity: 0 !important;
+    }
+    /* Time Conductor ticks */
+    div.c-conductor-axis.c-conductor__ticks > svg {
+      opacity: 0 !important;
+    }
+    /* Embedded timestamp in notebooks */
+    .c-ne__embed__time{
+      opacity: 0 !important;
+    }
+    /* Time Conductor Start Time */
+    .c-compact-tc__setting-value{
+      opacity: 0 !important;
+    }
+    /* Chart Area for Plots */
+    .gl-plot-chart-area{
+      opacity: 0 !important;
+    }
+   
\ No newline at end of file
diff --git a/e2e/.percy.nightly.yml b/e2e/.percy.nightly.yml
new file mode 100644
index 00000000000..b5b3d7ecfa2
--- /dev/null
+++ b/e2e/.percy.nightly.yml
@@ -0,0 +1,32 @@
+version: 2
+snapshot:
+  widths: [1024, 2000]
+  min-height: 1440 # px
+  percyCSS: |
+    /* Clock indicator... your days are numbered  */
+    .t-indicator-clock > .label {
+      opacity: 0 !important;
+    }
+    .c-input--datetime {
+      opacity: 0 !important;
+    }
+    /* Timer object text */
+    .c-ne__time-and-creator {
+      opacity: 0 !important;
+    }
+    /* Time Conductor ticks */
+    div.c-conductor-axis.c-conductor__ticks > svg {
+      opacity: 0 !important;
+    }
+    /* Embedded timestamp in notebooks */
+    .c-ne__embed__time{
+      opacity: 0 !important;
+    }
+    /* Time Conductor Start Time */
+    .c-compact-tc__setting-value{
+      opacity: 0 !important;
+    }
+    /* Chart Area for Plots */
+    .gl-plot-chart-area{
+      opacity: 0 !important;
+    }
\ No newline at end of file
diff --git a/e2e/README.md b/e2e/README.md
new file mode 100644
index 00000000000..ee0debe9dd6
--- /dev/null
+++ b/e2e/README.md
@@ -0,0 +1,624 @@
+# e2e testing
+
+This document captures information specific to the e2e testing of Open MCT. For general information about testing, please see [the Open MCT README](https://github.com/nasa/openmct/blob/master/README.md#tests).
+
+## Table of Contents
+
+This document is designed to capture on the What, Why, and How's of writing and running e2e tests in Open MCT. Please use the built-in Github Table of Contents functionality at the top left of this page or the markup.
+
+1. [Getting Started](#getting-started)
+2. [Types of Testing](#types-of-e2e-testing)
+3. [Architecture](#test-architecture-and-ci)
+
+## Getting Started
+
+While our team does our best to lower the barrier to entry to working with our e2e framework and Open MCT, there is a bit of work required to get from 0 to 1 test contributed.
+
+### Getting started with Playwright
+
+If this is your first time ever using the Playwright framework, we recommend going through the [Getting Started Guide](https://playwright.dev/docs/next/intro) which can be completed in about 15 minutes. This will give you a concise tour of Playwright's functionality and an understanding of the official Playwright documentation which we leverage in Open MCT.
+
+### Getting started with Open MCT's implementation of Playwright
+
+Once you've got an understanding of Playwright, you'll need a baseline understanding of Open MCT:
+
+1. Follow the steps [Building and Running Open MCT Locally](../README.md#building-and-running-open-mct-locally)
+2. Once you're serving Open MCT locally, create a 'Display Layout' object. Save it.
+3. Create a 'Plot' Object (e.g.: 'Stacked Plot')
+4. Create an Example Telemetry Object (e.g.: 'Sine Wave Generator')
+5. Expand the Tree and note the hierarchy of objects which were created.
+6. Navigate to the Demo Display Layout Object to edit and modify the embedded plot.
+7. Modify the embedded plot with Telemetry Data.
+
+What you've created is a display which mimics the display that a mission control operator might use to understand and model telemetry data.
+
+Recreate the steps above with Playwright's codegen tool:
+
+1. `npm run start` in a terminal window to serve Open MCT locally
+2. `npx @playwright/test install` to install playwright and dependencies
+3. Open another terminal window and start the Playwright codegen application `npx playwright codegen`
+4. Navigate the browser to `http://localhost:8080`
+5. Click the Create button and notice how your actions in the browser are being recorded in the Playwright Inspector
+6. Continue through the steps 2-6 above
+
+What you've created is an automated test which mimics the creation of a mission control display.
+
+Next, you should walk through our implementation of Playwright in Open MCT:
+
+1. Close any terminals which are serving up a local instance of Open MCT
+2. Run our 'Getting Started' test in debug mode with `npm run test:e2e:local -- exampleTemplate --debug`
+3. Step through each test step in the Playwright Inspector to see how we leverage Playwright's capabilities to test Open MCT
+
+## Types of e2e Testing
+
+e2e testing describes the layer at which a test is performed without prescribing the assertions which are made. Generally, when writing an e2e test, we have five choices to make on an assertion strategy:
+
+1. Functional - Verifies the functional correctness of the application. Sometimes interchanged with e2e or regression testing.
+2. Visual - Verifies the "look and feel" of the application and can only detect _undesirable changes when compared to a previous baseline_.
+3. Snapshot - Similar to Visual in that it captures the "look" of the application and can only detect _undesirable changes when compared to a previous baseline_. **Generally not preferred due to advanced setup necessary.**
+4. Accessibility - Verifies that the application meets the accessibility standards defined by the [WCAG organization](https://www.w3.org/WAI/standards-guidelines/wcag/).
+5. Performance - Verifies that application provides a performant experience. Like Snapshot testing, these tests are generally not recommended due to their difficulty in providing a consistent result.
+
+When choosing between the different testing strategies, think only about the assertion that is made at the end of the series of test steps. "I want to verify that the Timer plugin functions correctly" vs "I want to verify that the Timer plugin does not look different than originally designed".
+
+We do not want to interleave visual and functional testing inside the same suite because visual test verification of correctness must happen with a 3rd party service. This service is not available when executing these tests in other contexts (i.e. VIPER).
+
+### Functional Testing
+
+The bulk of our e2e coverage lies in "functional" test coverage which verifies that Open MCT is functionally correct as well as defining _how we expect it to behave_. This enables us to test the application exactly as a user would, while prescribing exactly how a user can interact with the application via a web browser.
+
+### Visual Testing
+
+Visual Testing is an essential part of our e2e strategy as it ensures that the application _appears_ correctly to a user while it compliments the functional e2e suite. It would be impractical to make thousands of assertions functional assertions on the look and feel of the application. Visual testing is interested in getting the DOM into a specified state and then comparing that it has not changed against a baseline.
+
+For a better understanding of the visual issues which affect Open MCT, please see our bug tracker with the `label:visual` filter applied [here](https://github.com/nasa/openmct/issues?q=label%3Abug%3Avisual+)
+To read about how to write a good visual test, please see [How to write a great Visual Test](#how-to-write-a-great-visual-test).
+
+`npm run test:e2e:visual` commands will run all of the visual tests against a local instance of Open MCT. If no `PERCY_TOKEN` API key is found in the terminal or command line environment variables, no visual comparisons will be made.
+
+ - `npm run test:e2e:visual:ci` will run against every commit and PR.
+ - `npm run test:e2e:visual:full` will run every night with additional comparisons made for Larger Displays and with the `snow` theme.
+#### Percy.io
+
+To make this possible, we're leveraging a 3rd party service, [Percy](https://percy.io/). This service maintains a copy of all changes, users, scm-metadata, and baselines to verify that the application looks and feels the same _unless approved by a Open MCT developer_. To request a Percy API token, please reach out to the Open MCT Dev team on GitHub. For more information, please see the official [Percy documentation](https://docs.percy.io/docs/visual-testing-basics).
+
+At present, we are using percy with two configuration files: `./e2e/.percy.nightly.yml` and `./e2e/.percy.ci.yml`. This is mainly to reduce the number of snapshots. 
+
+### Advanced: Snapshot Testing (Not Recommended)
+
+While snapshot testing offers a precise way to detect changes in your application without relying on third-party services like Percy.io, we've found that it doesn't offer any advantages over visual testing in our use-cases. Therefore, snapshot testing is **not recommended** for further implementation.
+
+#### CI vs Manual Checks
+Snapshot tests can be reliably executed in Continuous Integration (CI) environments but lack the manual oversight provided by visual testing platforms like Percy.io. This means they may miss issues that a human reviewer could catch during manual checks.
+
+#### Example
+A single visual test assertion in Percy.io can be executed across 10 different browser and resolution combinations without additional setup, providing comprehensive testing with minimal configuration. In contrast, a snapshot test is restricted to a single OS and browser resolution, requiring more effort to achieve the same level of coverage.
+
+
+#### Further Reading
+For those interested in the mechanics of snapshot testing with Playwright, you can refer to the [Playwright Snapshots Documentation](https://playwright.dev/docs/test-snapshots). However, keep in mind that we do not recommend using this approach.
+
+
+#### Open MCT's implementation
+
+- Our Snapshot tests receive a `@snapshot` tag.
+- Snapshots need to be executed within the official Playwright container to ensure we're using the exact rendering platform in CI and locally. To do a valid comparison locally:
+
+```sh
+// Replace {X.X.X} with the current Playwright version 
+// from our package.json or circleCI configuration file
+docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v{X.X.X}-focal /bin/bash
+npm install
+npm run test:e2e:checksnapshots
+```
+
+### Updating Snapshots
+
+When the `@snapshot` tests fail, they will need to be evaluated to determine if the failure is an acceptable and desireable or an unintended regression.
+
+To compare a snapshot, run a test and open the html report with the 'Expected' vs 'Actual' screenshot. If the actual screenshot is preferred, then the source-controlled 'Expected' snapshots will need to be updated with the following scripts.
+
+MacOS
+
+```
+npm run test:e2e:updatesnapshots
+```
+
+Linux/CI
+
+```sh
+// Replace {X.X.X} with the current Playwright version 
+// from our package.json or circleCI configuration file
+docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v{X.X.X}-focal /bin/bash
+npm install
+npm run test:e2e:updatesnapshots
+```
+
+Once that's done, you'll need to run the following to verify that the changes do not cause more problems:
+
+```sh
+npm run test:e2e:checksnapshots
+```
+
+## Automated Accessibility (a11y) Testing
+
+Open MCT incorporates accessibility testing through two primary methods to ensure its compliance with accessibility standards:
+
+1. **Usage of Playwright's Locator Strategy**: Open MCT utilizes Playwright's locator strategy, specifically the [page.getByRole('') function](https://playwright.dev/docs/api/class-framelocator#frame-locator-get-by-role), to ensure that web elements are accessible via assistive technologies. This approach focuses on the accessibility of elements rather than full adherence to a11y guidelines, which is covered in the second method.
+
+2. **Enforcing a11y Guidelines with Playwright Axe Plugin**: To rigorously enforce a11y guideline compliance, Open MCT employs the [playwright axe plugin](https://playwright.dev/docs/accessibility-testing). This is achieved through the `scanForA11yViolations` function within the visual testing suite. This method not only benefits from the existing coverage of the visual tests but also targets specific a11y issues, such as `color-contrast` violations, which are particularly pertinent in the context of visual testing.
+
+### a11y Standards (WCAG and Section 508)
+
+Playwright axe supports a wide range of [WCAG Standards](https://playwright.dev/docs/accessibility-testing#scanning-for-wcag-violations) to test against. Open MCT is testing against the [Section 508](https://www.section508.gov/test/testing-overview/) accessibility guidelines with the intent to support higher standards over time. As of 2024, Section508 requirements now map completely to WCAG 2.0 AA. In the future, Section 508 requirements may map to WCAG 2.1 AA.
+
+### Reading an a11y test failure
+
+When an a11y test fails, the result must be interpreted in the html test report or the a11y report json artifact stored in the `/test-results/` folder. The json structure should be parsed for `"violations"` by `"id"` and identified `"target"`. Example provided for the 'color-contrast-enhanced' violation.
+
+```json
+  "violations": 
+    {
+      "id": "color-contrast-enhanced",
+      "impact": "serious",
+      "html": "<span class=\"label c-indicator__label\">0 Snapshots <button aria-label=\"Show Snapshots\">Show</button></span>",
+        "target": [
+          ".s-status-off > .label.c-indicator__label"
+        ],
+        "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 6.51 (foreground color: #aaaaaa, background color: #262626, font size: 8.1pt (10.8px), font weight: normal). Expected contrast ratio of 7:1"
+      }
+```
+
+## Performance Testing
+
+The open source performance tests function in three ways which match their naming and folder structure:
+
+`./e2e/tests/performance` - The tests at the root of this folder path detect functional changes which are mostly apparent with large performance regressions like [this](https://github.com/nasa/openmct/issues/6879). These tests run against openmct webpack in `production-mode` with the `npm run test:perf:localhost` script.
+`./e2e/tests/performance/contract/` -  These tests serve as [contracts](https://martinfowler.com/bliki/ContractTest.html) for the locator logic, functionality, and assumptions will work in our downstream, closed source test suites. These tests run against openmct webpack in `dev-mode` with the `npm run test:perf:contract` script.
+`./e2e/tests/performance/memory/` -  These tests execute memory leak detection checks in various ways. This is expected to evolve as we move to the `memlab` project. These tests run against openmct webpack in `production-mode` with the `npm run test:perf:memory` script.
+
+These tests are expected to become blocking and gating with assertions as we extend the capabilities of Playwright.
+
+In addition to the explicit definition of performance tests, we also ensure that our test timeout timing is "tight" to catch performance regressions detectable by action timeouts. i.e. [Notebooks load much slower than they used to #6459](https://github.com/nasa/openmct/issues/6459)
+
+## Test Architecture and CI
+
+### Architecture
+
+### File Structure
+
+Our file structure follows the type of type of testing being excercised at the e2e layer and files containing test suites which matcher application behavior or our `src` and `example` layout. This area is not well refined as we figure out what works best for closed source and downstream projects. This may change altogether if we move `e2e` to it's own npm package.
+
+|File Path|Description|
+|:-:|-|
+|`./helper`                    | Contains helper functions or scripts which are leveraged directly within the test suites (e.g.: non-default plugin scripts injected into the DOM)|
+|`./test-data`                 | Contains test data which is leveraged or generated in the functional, performance, or visual test suites (e.g.: localStorage data).|
+|`./tests/functional`          | The bulk of the tests are contained within this folder to verify the functionality of Open MCT.|
+|`./tests/functional/example/` | Tests which specifically verify the example plugins (e.g.: Sine Wave Generator).|
+|`./tests/functional/plugins/` | Tests which loosely test each plugin. This folder is the most likely to change. Note: some `@snapshot` tests are still contained within this structure.|
+|`./tests/framework/`          | Tests which verify that our testing framework's functionality and assumptions will continue to work based on further refactoring or Playwright version changes (e.g.: verifying custom fixtures and appActions).|
+|`./tests/performance/`        | Performance tests which should be run on every commit.|
+|`./tests/performance/contract/` | A subset of performance tests which are designed to provide a contract between the open source tests which are run on every commit and the downstream tests which are run post merge and with other frameworks.|
+|`./tests/performance/memory`  | A subset of performance tests which are designed to test for memory leaks.|
+|`./tests/visual-a11y/`             | Visual tests and accessibility tests.|
+|`./tests/visual-a11y/component/`             | Visual and accessibility tests which are only run against a single component.|
+|`./appActions.js`             | Contains common methods which can be leveraged by test case authors to quickly move through the application when writing new tests.|
+|`./baseFixture.js`            | Contains base fixtures which only extend default `@playwright/test` functionality. The expectation is that these fixtures will be removed as the native Playwright API improves|
+
+Our functional tests end in `*.e2e.spec.js`, visual tests in `*.visual.spec.js` and performance tests in `*.perf.spec.js`.
+
+### Configuration
+
+Where possible, we try to run Open MCT without modification or configuration change so that the Open MCT doesn't fail exclusively in "test mode" or in "production mode".
+
+Open MCT is leveraging the [config file](https://playwright.dev/docs/test-configuration) pattern to describe the capabilities of Open MCT e2e _where_ it's run
+
+|Config File|Description|
+|:-:|-|
+|`./playwright-ci.config.js` | Used when running in CI or to debug CI issues locally|
+|`./playwright-local.config.js` | Used when running locally|
+|`./playwright-performance.config.js` | Used when running performance tests in CI or locally|
+|`./playwright-performance-devmode.config.js` | Used when running performance tests in CI or locally|
+|`./playwright-visual-a11y.config.js` | Used to run the visual and a11y tests in CI or locally|
+
+#### Test Tags
+
+Test tags are a great way of organizing tests outside of a file structure. To learn more see the official documentation [here](https://playwright.dev/docs/test-annotations#tag-tests).
+
+Current list of test tags:
+
+|Test Tag|Description|
+|:-:|-|
+|`@mobile` | Test case or test suite is compatible with Playwright's iPad support and Open MCT's read-only mobile view (i.e. no create button).|
+|`@a11y` | Test case or test suite to execute playwright-axe accessibility checks and generate a11y reports.|
+|`@gds` | Denotes a GDS Test Case used in the VIPER Mission.|
+|`@addInit` | Initializes the browser with an injected and artificial state. Useful for loading non-default plugins. Likely will not work outside of `npm start`.|
+|`@localStorage` | Captures or generates session storage to manipulate browser state. Useful for excluding in tests which require a persistent backend (i.e. CouchDB). See [note](#utilizing-localstorage)|
+|`@snapshot` | Uses Playwright's snapshot functionality to record a copy of the DOM for direct comparison. Must be run inside of the playwright container.|
+|`@unstable` | A new test or test which is known to be flaky.|
+|`@2p` | Indicates that multiple users are involved, or multiple tabs/pages are used. Useful for testing multi-user interactivity.|
+|`@generatedata` | Indicates that a test is used to generate testdata or test the generated test data. Usually to be associated with localstorage, but this may grow over time.|
+
+### Continuous Integration
+
+The cheapest time to catch a bug is pre-merge. Unfortuantely, this is the most expensive time to run all of the tests since each merge event can consist of hundreds of commits. For this reason, we're selective in _what we run_ as much as _when we run it_.
+
+We leverage CircleCI to run tests against each commit and inject the Test Reports which are generated by Playwright so that they team can keep track of flaky and [historical test trends](https://app.circleci.com/insights/github/nasa/openmct/workflows/overall-circleci-commit-status/tests?branch=master&reporting-window=last-30-days)
+
+We leverage Github Actions / Workflows to execute tests as it gives us the ability to run against multiple operating systems with greater control over git event triggers (i.e. Run on a PR Comment event).
+
+Our CI environment consists of 3 main modes of operation:
+
+#### 1. Per-Commit Testing
+
+CircleCI
+
+- Stable e2e tests against ubuntu and chrome
+- Performance tests against ubuntu and chrome
+- e2e tests are linted
+- Visual and a11y tests are run in a single resolution on the default `espresso` theme
+
+#### 2. Per-Merge Testing
+
+Github Actions / Workflow
+
+- Full suite against all browsers/projects. Triggered with Github Label Event 'pr:e2e'
+- CouchDB Tests. Triggered on PR Create and again with Github Label Event 'pr:e2e:couchdb'
+
+#### 3. Scheduled / Batch Testing
+
+Nightly Testing in Circle CI
+
+- Full e2e suite against ubuntu and chrome, firefox, and an MMOC resolution profile
+- Performance tests against ubuntu and chrome
+- CouchDB suite
+- Visual and a11y Tests are run in the full profile
+
+Github Actions / Workflow
+
+- None at the moment
+
+#### Parallelism and Fast Feedback
+
+In order to provide fast feedback in the Per-Commit context, we try to keep total test feedback at 5 minutes or less. That is to say, A developer should have a pass/fail result in under 5 minutes.
+
+Playwright has native support for semi-intelligent sharding. Read about it [here](https://playwright.dev/docs/test-parallel#shard-tests-between-multiple-machines).
+
+We will be adjusting the parallelization of the Per-Commit tests to keep below the 5 minute total runtime threshold.
+
+In addition to the Parallelization of Test Runners (Sharding), we're also running two concurrent threads on every Shard. This is the functional limit of what CircelCI Agents can support from a memory and CPU resource constraint.
+
+So for every commit, Playwright is effectively running 4 x 2 concurrent browsercontexts to keep the overall runtime to a miminum.
+
+At the same time, we don't want to waste CI resources on parallel runs, so we've configured each shard to fail after 5 test failures. Test failure logs are recorded and stored to allow fast triage.
+
+#### Test Promotion
+
+In order to maintain fast and reliable feedback, tests go through a promotion process. All new test cases or test suites must be labeled with the `@unstable` annotation. The Open MCT dev team runs these unstable tests in our private repos to ensure they work downstream and are reliable.
+
+- To run the stable tests, use the `npm run test:e2e:stable` command.
+- To run the new and flaky tests, use the `npm run test:e2e:unstable` command.
+
+A testcase and testsuite are to be unmarked as @unstable when:
+
+1. They run as part of "full" run 5 times without failure.
+2. They've been by a Open MCT Developer 5 times in the closed source repo without failure.
+
+### Cross-browser and Cross-operating system
+
+#### **What's supported:**
+
+We are leveraging the `browserslist` project to declare our supported list of browsers. We support macOS, Windows, and ubuntu 20+.
+
+#### **Where it's tested:**
+
+We lint on `browserslist` to ensure that we're not implementing deprecated browser APIs and are aware of browser API improvements over time.
+
+We also have the need to execute our e2e tests across this published list of browsers. Our browsers and browser version matrix is found inside of our `./playwright-*.config.js`, but mostly follows in order of bleeding edge to stable:
+
+- `playwright-chromium channel:beta`
+  - A beta version of Chromium from official chromium channels. As close to the bleeding edge as we can get.
+- `playwright-chromium`
+  - A stable version of Chromium from the official chromium channels. This is always at least 1 version ahead of desktop chrome.
+- `playwright-chrome`
+  - The stable channel of Chrome from the official chrome channels. This is always 2 versions behind chromium.
+- `playwright-firefox`
+  - Firefox Latest Stable. Modified slightly by the playwright team to support a CDP Shim.
+
+In terms of operating system testing, we're only limited by what the CI providers are able to support. The bulk of our testing is performed on the official playwright container which is based on ubuntu. Github Actions allows us to use `windows-latest` and `mac-latest` and is run as needed.
+
+#### **Mobile**
+
+We have a Mission-need to support iPad and mobile devices. To run our test suites with mobile devices, please see our `playwright-mobile.config.js` projects.
+
+In general, our test suite is not designed to run against mobile devices as the mobile experience is a focused version of the application. Core functionality is missing (chiefly the 'Create' button). To bypass the object creation, we leverage the `storageState` properties for starting the mobile tests with localstorage.
+
+For now, the mobile tests will exist in the /tests/mobile/ suites and be executed with the
+```sh
+npm run test:e2e:mobile
+```
+command.
+
+#### **Skipping or executing tests based on browser, os, and/os browser version:**
+
+Conditionally skipping tests based on browser (**RECOMMENDED**):
+
+```js
+test('Can adjust image brightness/contrast by dragging the sliders', async ({ page, browserName }) => {
+  // eslint-disable-next-line playwright/no-skipped-test
+  test.skip(browserName === 'firefox', 'This test needs to be updated to work with firefox');
+
+  // ...
+```
+
+Conditionally skipping tests based on OS:
+
+```js
+test('Can adjust image brightness/contrast by dragging the sliders', async ({ page }) => {
+  // eslint-disable-next-line playwright/no-skipped-test
+  test.skip(process.platform === 'darwin', 'This test needs to be updated to work with MacOS');
+
+  // ...
+```
+
+Skipping based on browser version (Rarely used): <https://github.com/microsoft/playwright/discussions/17318>
+
+## Test Design, Best Practices, and Tips & Tricks
+
+### Test Design
+
+#### Test as the User
+
+In general, strive to test only through the UI as a user would. As stated in the [Playwright Best Practices](https://playwright.dev/docs/best-practices#test-user-visible-behavior):
+
+> "Automated tests should verify that the application code works for the end users, and avoid relying on implementation details such as things which users will not typically use, see, or even know about such as the name of a function, whether something is an array, or the CSS class of some element. The end user will see or interact with what is rendered on the page, so your test should typically only see/interact with the same rendered output."
+
+By adhering to this principle, we can create tests that are both robust and reflective of actual user experiences.
+
+#### How to make tests robust to function in other contexts (VISTA, COUCHDB, YAMCS, VIPER, etc.)
+  1. Leverage the use of `appActions.js` methods such as `createDomainObjectWithDefaults()`. This ensures that your tests will create unique instances of objects for your test to interact with.
+  1. Do not assert on the order or structure of objects available unless you created them yourself. These tests may be used against a persistent datastore like couchdb with many objects in the tree.
+  1. Do not search for your created objects. Open MCT does not performance uniqueness checks so it's possible that your tests will break when run twice.
+  1. Avoid creating locator aliases. This likely means that you're compensating for a bad locator. Improve the application instead.
+  1. Leverage `await page.goto('./', { waitUntil: 'domcontentloaded' });` instead of `{ waitUntil: 'networkidle' }`. Tests run against deployments with websockets often have issues with the networkidle detection.
+  
+#### How to make tests faster and more resilient
+  1. Avoid app interaction when possible. The best way of doing this is to navigate directly by URL:
+
+  ```js
+    // You can capture the CreatedObjectInfo returned from this appAction:
+    const clock = await createDomainObjectWithDefaults(page, { type: 'Clock' });
+
+    // ...and use its `url` property to navigate directly to it later in the test:
+    await page.goto(clock.url);
+  ```
+
+  1. Leverage `await page.goto('./', { waitUntil: 'domcontentloaded' });`
+    - Initial navigation should _almost_ always use the `{ waitUntil: 'domcontentloaded' }` option.
+  1.  Avoid repeated setup to test a single assertion. Write longer tests with multiple soft assertions.
+  This ensures that your changes will be picked up with large refactors.
+
+##### Utilizing LocalStorage
+  1. In order to save test runtime in the case of tests that require a decent amount of initial setup (such as in the case of testing complex displays), you may use [Playwright's `storageState` feature](https://playwright.dev/docs/api/class-browsercontext#browser-context-storage-state) to generate and load localStorage states.
+  1. To generate a localStorage state to be used in a test:
+    - Add an e2e test to our generateLocalStorageData suite which sets the initial state (creating/configuring objects, etc.), saving it in the `test-data` folder:
+    ```js
+    // Save localStorage for future test execution
+    await context.storageState({
+      path: path.join(__dirname, '../../../e2e/test-data/display_layout_with_child_layouts.json')
+    });
+    ```
+    - Load the state from file at the beginning of the desired test suite (within the `test.describe()`). (NOTE: the storage state will be used for each test in the suite, so you may need to create a new suite):
+    ```js
+      const LOCALSTORAGE_PATH = path.resolve(
+        __dirname,
+        '../../../../test-data/display_layout_with_child_layouts.json'
+      );
+      test.use({
+        storageState: path.resolve(__dirname, LOCALSTORAGE_PATH)
+      }); 
+    ```
+
+
+### How to write a great test
+
+- Avoid using css locators to find elements to the page. Use modern web accessible locators like `getByRole`
+- Use our [App Actions](./appActions.js) for performing common actions whenever applicable.
+  - Use `waitForPlotsToRender()` before asserting against anything that is dependent upon plot series data being loaded and drawn.
+- If you create an object outside of using the `createDomainObjectWithDefaults` App Action, make sure to fill in the 'Notes' section of your object with `page.testNotes`:
+
+  ```js
+  // Fill the "Notes" section with information about the
+  // currently running test and its project.
+  const { testNotes } = page;
+  const notesInput = page.locator('form[name="mctForm"] #notes-textarea');
+  await notesInput.fill(testNotes);
+  ```
+
+ #### How to Write a Great Visual Test
+
+1. **Look for the Unknown Unknowns**: Avoid asserting on specific differences in the visual diff. Visual tests are most effective for identifying unknown unknowns.
+
+2. **Get the App into Interesting States**: Prioritize getting Open MCT into unusual layouts or behaviors before capturing a visual snapshot. For instance, you could open a dropdown menu.
+
+3. **Expect the Unexpected**: Use functional expect statements only to verify assumptions about the state between steps. A great visual test doesn't fail during the test itself, but rather when changes are reviewed in Percy.io.
+
+4. **Control Variability**: Account for variations inherent in working with time-based telemetry and clocks.
+  - Utilize `percyCSS` to ignore time-based elements. For more details, consult our [percyCSS file](./.percy.ci.yml).
+  - Use Open MCT's fixed-time mode unless explicitly testing realtime clock
+  - Employ the `createExampleTelemetryObject` appAction to source telemetry and specify a `name` to avoid autogenerated names.
+
+5. **Hide the Tree and Inspector**: Generally, your test will not require comparisons involving the tree and inspector. These aspects are covered in component-specific tests (explained below). To exclude them from the comparison by default, navigate to the root of the main view with the tree and inspector hidden:
+    - `await page.goto('./#/browse/mine?hideTree=true&hideInspector=true')`
+
+6. **Component-Specific Tests**: If you wish to focus on a particular component, use the `/visual-a11y/component/` folder and limit the scope of the comparison to that component. For instance:
+    ```js
+    await percySnapshot(page, `Tree Pane w/ single level expanded (theme: ${theme})`, {
+        scope: treePane
+    });
+    ```
+    - Note: The `scope` variable can be any valid CSS selector.
+
+7. **Write many `percySnapshot` commands in a single test**: In line with our approach to longer functional tests, we recommend that many test percySnapshots are taken in a single test. For instance:
+    ```js
+    //<Some interesting state>
+    await percySnapshot(page, `Before object expanded (theme: ${theme})`);
+    //<Click on object>
+    await percySnapshot(page, `object expanded (theme: ${theme})`);
+    //Select from object
+    await percySnapshot(page, `object selected (theme: ${theme})`)
+    ```
+
+#### How to write a great network test
+
+- Where possible, it is best to mock out third-party network activity to ensure we are testing application behavior of Open MCT.
+- It is best to be as specific as possible about the expected network request/response structures in creating your mocks.
+- Make sure to only mock requests which are relevant to the specific behavior being tested.
+- Where possible, network requests and responses should be treated in an order-agnostic manner, as the order in which certain requests/responses happen is dynamic and subject to change.
+
+Some examples of mocking network responses in regards to CouchDB can be found in our [couchdb.e2e.spec.js](./tests/functional/couchdb.e2e.spec.js) test file.
+
+### Best Practices
+
+For now, our best practices exist as self-tested, living documentation in our [exampleTemplate.e2e.spec.js](./tests/framework/exampleTemplate.e2e.spec.js) file.
+
+For best practices with regards to mocking network responses, see our [couchdb.e2e.spec.js](./tests/functional/couchdb.e2e.spec.js) file.
+
+### Tips & Tricks
+
+The following contains a list of tips and tricks which don't exactly fit into a FAQ or Best Practices doc.
+
+- (Advanced) Overriding the Browser's Clock
+It is possible to override the browser's clock in order to control time-based elements. Since this can cause unwanted behavior (i.e. Tree not rendering), only use this sparingly. To do this, use the `overrideClock` fixture as such:
+
+```js
+import { test, expect } from '../../pluginFixtures.js';
+
+test.describe('foo test suite', () => {
+  
+  // All subsequent tests in this suite will override the clock
+  test.use({
+    clockOptions: {
+      now: 1732413600000, // A timestamp given as milliseconds since the epoch
+      shouldAdvanceTime: true // Should the clock tick?
+    }
+  });
+
+  test('bar test', async ({ page }) => {
+    // ...
+  });
+});
+  ```
+  More info and options for `overrideClock` can be found in [baseFixtures.js](baseFixtures.js)
+
+- Working with multiple pages
+There are instances where multiple browser pages will needed to verify multi-page or multi-tab application behavior. Make sure to use the `@2p` annotation as well as name each page appropriately: i.e. `page1` and `page2` or `tab1` and `tab2` depending on the intended use case. Generally pages should be used unless testing `sharedWorker` code, specifically.
+
+### Reporting
+
+Test Reporting is done through official Playwright reporters and the CI Systems which execute them.
+
+We leverage the following official Playwright reporters:
+
+- HTML
+- junit
+- github annotations
+- Tracefile
+- Screenshots
+
+When running the tests locally with the `npm run test:e2e:local` command, the html report will open automatically on failure. Inside this HTML report will be a complete summary of the finished tests. If the tests failed, you'll see embedded links to screenshot failure, execution logs, and the Tracefile.
+
+When looking at the reports run in CI, you'll leverage this same HTML Report which is hosted either in CircleCI or Github Actions as a build artifact.
+
+### e2e Code Coverage
+
+Our e2e code coverage is captured and combined with our unit test coverage. For more information, please see our [code coverage documentation](../TESTING.md)
+
+#### Generating e2e code coverage
+
+Please read more about our code coverage [here](../TESTING.md#code-coverage)
+
+## Other
+
+### About e2e testing
+
+e2e testing is an industry-standard approach to automating the testing of web-based UIs such as Open MCT. Broadly speaking, e2e tests differentiate themselves from unit tests by preferring replication of real user interactions over execution of raw JavaScript functions.
+
+Historically, the abstraction necessary to replicate real user behavior meant that:
+
+- e2e tests were "expensive" due to how much code each test executed. The closer a test replicates the user, the more code is needed run during test execution. Unit tests could run smaller units of code more efficiently.
+- e2e tests were flaky due to network conditions or the underlying protocols associated with testing a browser.
+- e2e frameworks relied on a browser communication standard which lacked the observability and controls necessary needed to reach the code paths possible with unit and integration tests.
+- e2e frameworks provided insufficient debug information on test failure
+
+However, as the web ecosystem has matured to the point where mission-critical UIs can be written for the web (Open MCT), the e2e testing tools have matured as well. There are now fewer "trade-offs" when choosing to write an e2e test over any other type of test.
+
+Modern e2e frameworks:
+
+- Bypass the surface layer of the web-application-under-test and use a raw debugging protocol to observe and control application and browser state.
+- These new browser-internal protocols enable near-instant, bi-directional communication between test code and the browser, speeding up test execution and making the tests as reliable as the application itself.
+- Provide test debug tooling which enables developers to pinpoint failure
+
+Furthermore, the abstraction necessary to run e2e tests as a user enables them to be extended to run within a variety of contexts. This matches the extensible design of Open MCT.
+
+A single e2e test in Open MCT is extended to run:
+
+- Against a matrix of browser versions.
+- Against a matrix of OS platforms.
+- Against a local development version of Open MCT.
+- A version of Open MCT loaded as a dependency (VIPER, VISTA, etc)
+- Against a variety of data sources or telemetry endpoints.
+
+### Why Playwright?
+
+[Playwright](https://playwright.dev/) was chosen as our e2e framework because it solves a few VIPER Mission needs:
+
+1. First-class support for Automated Performance Testing
+2. Official Chrome, Chrome Canary, and iPad Capabilities
+3. Support for Browserless.io to run tests in a "hermetically sealed" environment
+4. Ability to generate code coverage reports
+
+### FAQ
+
+- How does this help NASA missions?
+- When should I write an e2e test instead of a unit test?
+- When should I write a functional vs visual test?
+- How is Open MCT extending default Playwright functionality?
+- What about Component Testing?
+
+### Writing Tests
+
+Playwright provides 3 supported methods of debugging and authoring tests:
+- A 'watch mode' for running tests locally and debugging on the fly
+- A 'debug mode' for debugging tests and writing assertions against tests
+- A 'VSCode plugin' for debugging tests within the VSCode IDE.
+
+Generally, we encourage folks to use the watch mode and provide a script `npm run test:e2e:watch` which launches the launch mode ui and enables hot reloading on the dev server.
+
+### e2e Troubleshooting
+
+Please follow the general guide troubleshooting in [the general troubleshooting doc](../TESTING.md#troubleshooting-ci)
+
+- Tests won't start because 'Error: <http://localhost:8080/># is already used...'
+This error will appear when running the tests locally. Sometimes, the webserver is left in an orphaned state and needs to be cleaned up. To clear up the orphaned webserver, execute the following from your Terminal:
+```lsof -n -i4TCP:8080 | awk '{print$2}' | tail -1 | xargs kill -9```
+
+### Upgrading Playwright
+
+In order to upgrade from one version of Playwright to another, the version should be updated in several places in both `openmct` and `openmct-yamcs` repos. An easy way to identify these locations is to search for the current version in all files and find/replace.
+
+For reference, all of the locations where the version should be updated are listed below:
+
+#### **In `openmct`:**
+
+- `package.json`
+  - Both packages `@playwright/test` and `playwright-core` should be updated to the same target version.
+- `.circleci/config.yml`
+- `.github/workflows/e2e-couchdb.yml`
+- `.github/workflows/e2e-pr.yml`
+
+#### **In `openmct-yamcs`:**
+
+- `package.json`
+  - `@playwright/test` should be updated to the target version.
+- `.github/workflows/yamcs-quickstart-e2e.yml`
diff --git a/e2e/appActions.js b/e2e/appActions.js
new file mode 100644
index 00000000000..92b71fd2811
--- /dev/null
+++ b/e2e/appActions.js
@@ -0,0 +1,667 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/**
+ * The fixtures in this file are to be used to consolidate common actions performed by the
+ * various test suites. The goal is only to avoid duplication of code across test suites and not to abstract
+ * away the underlying functionality of the application. For more about the App Action pattern, see /e2e/README.md)
+ *
+ * For example, if two functions are nearly identical in
+ * timer.e2e.spec.js and notebook.e2e.spec.js, that function should be generalized and moved into this file.
+ */
+
+/**
+ * Defines parameters to be used in the creation of a domain object.
+ * @typedef {Object} CreateObjectOptions
+ * @property {string} type the type of domain object to create (e.g.: "Sine Wave Generator").
+ * @property {string} [name] the desired name of the created domain object.
+ * @property {string | import('../src/api/objects/ObjectAPI').Identifier} [parent] the Identifier or uuid of the parent object.
+ * @property {Object<string, string>} [customParameters] any additional parameters to be passed to the domain object's form. E.g. '[aria-label="Data Rate (hz)"]': {'0.1'}
+ */
+
+/**
+ * Contains information about the newly created domain object.
+ * @typedef {Object} CreatedObjectInfo
+ * @property {string} name the name of the created object
+ * @property {string} uuid the uuid of the created object
+ * @property {string} url the relative url to the object (for use with `page.goto()`)
+ */
+
+/**
+ * Defines parameters to be used in the creation of a notification.
+ * @typedef {Object} CreateNotificationOptions
+ * @property {string} message the message
+ * @property {'info' | 'alert' | 'error'} severity the severity
+ * @property {import('../src/api/notifications/NotificationAPI').NotificationOptions} [notificationOptions] additional options
+ */
+
+import { expect } from '@playwright/test';
+import { Buffer } from 'buffer';
+import { v4 as genUuid } from 'uuid';
+
+/**
+ * This common function creates a domain object with the default options. It is the preferred way of creating objects
+ * in the e2e suite when uninterested in properties of the objects themselves.
+ *
+ * @param {import('@playwright/test').Page} page
+ * @param {CreateObjectOptions} options
+ * @returns {Promise<CreatedObjectInfo>} An object containing information about the newly created domain object.
+ */
+async function createDomainObjectWithDefaults(
+  page,
+  { type, name, parent = 'mine', customParameters = {} }
+) {
+  if (!name) {
+    name = `${type}:${genUuid()}`;
+  }
+
+  const parentUrl = await getHashUrlToDomainObject(page, parent);
+
+  // Navigate to the parent object. This is necessary to create the object
+  // in the correct location, such as a folder, layout, or plot.
+  await page.goto(`${parentUrl}`);
+
+  //Click the Create button
+  await page.getByRole('button', { name: 'Create' }).click();
+
+  // Click the object specified by 'type'
+  await page.click(`li[role='menuitem']:text("${type}")`);
+
+  // Modify the name input field of the domain object to accept 'name'
+  const nameInput = page.locator('form[name="mctForm"] .first input[type="text"]');
+  await nameInput.fill('');
+  await nameInput.fill(name);
+
+  if (page.testNotes) {
+    // Fill the "Notes" section with information about the
+    // currently running test and its project.
+    const notesInput = page.locator('form[name="mctForm"] #notes-textarea');
+    await notesInput.fill(page.testNotes);
+  }
+
+  // If there are any further parameters, fill them in
+  for (const [key, value] of Object.entries(customParameters)) {
+    const input = page.locator(`form[name="mctForm"] ${key}`);
+    await input.fill('');
+    await input.fill(value);
+  }
+
+  // Click OK button and wait for Navigate event
+  await Promise.all([
+    page.waitForLoadState(),
+    await page.getByRole('button', { name: 'Save' }).click(),
+    // Wait for Save Banner to appear
+    page.waitForSelector('.c-message-banner__message')
+  ]);
+
+  // Wait until the URL is updated
+  await page.waitForURL(`**/${parent}/*`);
+  const uuid = await getFocusedObjectUuid(page);
+  const objectUrl = await getHashUrlToDomainObject(page, uuid);
+
+  if (await _isInEditMode(page, uuid)) {
+    // Save (exit edit mode)
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+  }
+
+  return {
+    name,
+    uuid,
+    url: objectUrl
+  };
+}
+
+/**
+ * Generate a notification with the given options.
+ * @param {import('@playwright/test').Page} page
+ * @param {CreateNotificationOptions} createNotificationOptions
+ */
+async function createNotification(page, createNotificationOptions) {
+  await page.evaluate((_createNotificationOptions) => {
+    const { message, severity, options } = _createNotificationOptions;
+    const notificationApi = window.openmct.notifications;
+    if (severity === 'info') {
+      notificationApi.info(message, options);
+    } else if (severity === 'alert') {
+      notificationApi.alert(message, options);
+    } else {
+      notificationApi.error(message, options);
+    }
+  }, createNotificationOptions);
+}
+
+/**
+ * Expand an item in the tree by a given object name.
+ * @param {import('@playwright/test').Page} page
+ * @param {string} name
+ */
+async function expandTreePaneItemByName(page, name) {
+  const treePane = page.getByRole('tree', {
+    name: 'Main Tree'
+  });
+  const treeItem = treePane.locator(`role=treeitem[expanded=false][name=/${name}/]`);
+  const expandTriangle = treeItem.locator('.c-disclosure-triangle');
+  await expandTriangle.click();
+}
+
+/**
+ * Create a Plan object from JSON with the provided options.
+ * @param {import('@playwright/test').Page} page
+ * @param {*} options
+ * @returns {Promise<CreatedObjectInfo>} An object containing information about the newly created domain object.
+ */
+async function createPlanFromJSON(page, { name, json, parent = 'mine' }) {
+  if (!name) {
+    name = `Plan:${genUuid()}`;
+  }
+
+  const parentUrl = await getHashUrlToDomainObject(page, parent);
+
+  // Navigate to the parent object. This is necessary to create the object
+  // in the correct location, such as a folder, layout, or plot.
+  await page.goto(`${parentUrl}`);
+
+  // Click the Create button
+  await page.getByRole('button', { name: 'Create' }).click();
+
+  // Click 'Plan' menu option
+  await page.click(`li:text("Plan")`);
+
+  // Modify the name input field of the domain object to accept 'name'
+  const nameInput = page.getByLabel('Title', { exact: true });
+  await nameInput.fill('');
+  await nameInput.fill(name);
+
+  // Upload buffer from memory
+  await page.locator('input#fileElem').setInputFiles({
+    name: 'plan.txt',
+    mimeType: 'text/plain',
+    buffer: Buffer.from(JSON.stringify(json))
+  });
+
+  // Click OK button and wait for Navigate event
+  await Promise.all([
+    page.waitForLoadState(),
+    page.click('[aria-label="Save"]'),
+    // Wait for Save Banner to appear
+    page.waitForSelector('.c-message-banner__message')
+  ]);
+
+  // Wait until the URL is updated
+  await page.waitForURL(`**/${parent}/*`);
+  const uuid = await getFocusedObjectUuid(page);
+  const objectUrl = await getHashUrlToDomainObject(page, uuid);
+
+  return {
+    uuid,
+    name,
+    url: objectUrl
+  };
+}
+
+/**
+ * Create a standardized Telemetry Object (Sine Wave Generator) for use in visual tests
+ * and tests against plotting telemetry (e.g. logPlot tests).
+ * @param {import('@playwright/test').Page} page
+ * @param {string | import('../src/api/objects/ObjectAPI').Identifier} [parent] the uuid or identifier of the parent object. Defaults to 'mine'
+ * @returns {Promise<CreatedObjectInfo>} An object containing information about the telemetry object.
+ */
+async function createExampleTelemetryObject(page, parent = 'mine') {
+  const parentUrl = await getHashUrlToDomainObject(page, parent);
+
+  await page.goto(`${parentUrl}`);
+
+  await page.getByRole('button', { name: 'Create' }).click();
+
+  await page.locator('li:has-text("Sine Wave Generator")').click();
+
+  const name = 'VIPER Rover Heading';
+  await page.getByRole('dialog').locator('input[type="text"]').fill(name);
+
+  // Fill out the fields with default values
+  await page.getByRole('spinbutton', { name: 'Period' }).fill('10');
+  await page.getByRole('spinbutton', { name: 'Amplitude' }).fill('1');
+  await page.getByRole('spinbutton', { name: 'Offset' }).fill('0');
+  await page.getByRole('spinbutton', { name: 'Data Rate (hz)' }).fill('1');
+  await page.getByRole('spinbutton', { name: 'Phase (radians)' }).fill('0');
+  await page.getByRole('spinbutton', { name: 'Randomness' }).fill('0');
+  await page.getByRole('spinbutton', { name: 'Loading Delay (ms)' }).fill('0');
+
+  await page.getByRole('button', { name: 'Save' }).click();
+
+  // Wait until the URL is updated
+  await page.waitForURL(`**/${parent}/*`);
+
+  const uuid = await getFocusedObjectUuid(page);
+  const url = await getHashUrlToDomainObject(page, uuid);
+
+  return {
+    name,
+    uuid,
+    url
+  };
+}
+
+/**
+ * Navigates directly to a given object url, in fixed time mode, with the given start and end bounds.
+ * @param {import('@playwright/test').Page} page
+ * @param {string} url The url to the domainObject
+ * @param {string | number} start The starting time bound in milliseconds since epoch
+ * @param {string | number} end The ending time bound in milliseconds since epoch
+ */
+async function navigateToObjectWithFixedTimeBounds(page, url, start, end) {
+  await page.goto(
+    `${url}?tc.mode=fixed&tc.timeSystem=utc&tc.startBound=${start}&tc.endBound=${end}`
+  );
+}
+
+/**
+ * Open the given `domainObject`'s context menu from the object tree.
+ * Expands the path to the object and scrolls to it if necessary.
+ *
+ * @param {import('@playwright/test').Page} page
+ * @param {string} url the url to the object
+ */
+async function openObjectTreeContextMenu(page, url) {
+  await page.goto(url);
+  await page.getByLabel('Show selected item in tree').click();
+  await page.locator('.is-navigated-object').click({
+    button: 'right'
+  });
+}
+
+/**
+ * Expands the entire object tree (every expandable tree item).
+ * @param {import('@playwright/test').Page} page
+ * @param {"Main Tree" | "Create Modal Tree"} [treeName="Main Tree"]
+ */
+async function expandEntireTree(page, treeName = 'Main Tree') {
+  const treeLocator = page.getByRole('tree', {
+    name: treeName
+  });
+  const collapsedTreeItems = treeLocator
+    .getByRole('treeitem', {
+      expanded: false
+    })
+    .locator('span.c-disclosure-triangle.is-enabled');
+
+  while ((await collapsedTreeItems.count()) > 0) {
+    await collapsedTreeItems.nth(0).click();
+
+    // FIXME: Replace hard wait with something event-driven.
+    // Without the wait, this fails periodically due to a race condition
+    // with Vue rendering (loop exits prematurely).
+    // eslint-disable-next-line playwright/no-wait-for-timeout
+    await page.waitForTimeout(200);
+  }
+}
+
+/**
+ * Gets the UUID of the currently focused object by parsing the current URL
+ * and returning the last UUID in the path.
+ * @param {import('@playwright/test').Page} page
+ * @returns {Promise<string>} the uuid of the focused object
+ */
+async function getFocusedObjectUuid(page) {
+  const UUIDv4Regexp = /[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/gi;
+  const focusedObjectUuid = await page.evaluate((regexp) => {
+    return window.location.href.split('?')[0].match(regexp).at(-1);
+  }, UUIDv4Regexp);
+
+  return focusedObjectUuid;
+}
+
+/**
+ * Returns the hashUrl to the domainObject given its uuid.
+ * Useful for directly navigating to the given domainObject.
+ *
+ * URLs returned will be of the form `'./browse/#/mine/<uuid0>/<uuid1>/...'`
+ *
+ * @param {import('@playwright/test').Page} page
+ * @param {string | import('../src/api/objects/ObjectAPI').Identifier} identifier the uuid or identifier of the object to get the url for
+ * @returns {Promise<string>} the url of the object
+ */
+async function getHashUrlToDomainObject(page, identifier) {
+  await page.waitForLoadState('load');
+  const hashUrl = await page.evaluate(async (objectIdentifier) => {
+    const path = await window.openmct.objects.getOriginalPath(objectIdentifier);
+    let url =
+      './#/browse/' +
+      [...path]
+        .reverse()
+        .map((object) => window.openmct.objects.makeKeyString(object.identifier))
+        .join('/');
+
+    // Drop the vestigial '/ROOT' if it exists
+    if (url.includes('/ROOT')) {
+      url = url.split('/ROOT').join('');
+    }
+
+    return url;
+  }, identifier);
+
+  return hashUrl;
+}
+
+/**
+ * Utilizes the OpenMCT API to detect if the UI is in Edit mode.
+ * @private
+ * @param {import('@playwright/test').Page} page
+ * @param {string | import('../src/api/objects/ObjectAPI').Identifier} identifier
+ * @return {Promise<boolean>} true if the Open MCT is in Edit Mode
+ */
+async function _isInEditMode(page, identifier) {
+  // eslint-disable-next-line no-return-await
+  return await page.evaluate(() => window.openmct.editor.isEditing());
+}
+
+/**
+ * Set the time conductor mode to either fixed timespan or realtime mode.
+ * @param {import('@playwright/test').Page} page
+ * @param {boolean} [isFixedTimespan=true] true for fixed timespan mode, false for realtime mode; default is true
+ */
+async function setTimeConductorMode(page, isFixedTimespan = true) {
+  // Click 'mode' button
+  await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
+  await page.getByRole('button', { name: 'Time Conductor Mode Menu' }).click();
+  // Switch time conductor mode. Note, need to wait here for URL to update as the router is debounced.
+  if (isFixedTimespan) {
+    await page.getByRole('menuitem', { name: /Fixed Timespan/ }).click();
+    await page.waitForURL(/tc\.mode=fixed/);
+  } else {
+    await page.getByRole('menuitem', { name: /Real-Time/ }).click();
+    await page.waitForURL(/tc\.mode=local/);
+  }
+}
+
+/**
+ * Set the time conductor to fixed timespan mode
+ * @param {import('@playwright/test').Page} page
+ */
+async function setFixedTimeMode(page) {
+  await setTimeConductorMode(page, true);
+}
+
+/**
+ * Set the time conductor to realtime mode
+ * @param {import('@playwright/test').Page} page
+ */
+async function setRealTimeMode(page) {
+  await setTimeConductorMode(page, false);
+}
+
+/**
+ * @typedef {Object} OffsetValues
+ * @property {string | undefined} startHours
+ * @property {string | undefined} startMins
+ * @property {string | undefined} startSecs
+ * @property {string | undefined} endHours
+ * @property {string | undefined} endMins
+ * @property {string | undefined} endSecs
+ */
+
+/**
+ * Set the values (hours, mins, secs) for the TimeConductor offsets when in realtime mode
+ * @param {import('@playwright/test').Page} page
+ * @param {OffsetValues} offset
+ * @param {import('@playwright/test').Locator} offsetButton
+ */
+async function setTimeConductorOffset(
+  page,
+  { startHours, startMins, startSecs, endHours, endMins, endSecs }
+) {
+  if (startHours) {
+    await page.getByRole('spinbutton', { name: 'Start offset hours' }).fill(startHours);
+  }
+
+  if (startMins) {
+    await page.getByRole('spinbutton', { name: 'Start offset minutes' }).fill(startMins);
+  }
+
+  if (startSecs) {
+    await page.getByRole('spinbutton', { name: 'Start offset seconds' }).fill(startSecs);
+  }
+
+  if (endHours) {
+    await page.getByRole('spinbutton', { name: 'End offset hours' }).fill(endHours);
+  }
+
+  if (endMins) {
+    await page.getByRole('spinbutton', { name: 'End offset minutes' }).fill(endMins);
+  }
+
+  if (endSecs) {
+    await page.getByRole('spinbutton', { name: 'End offset seconds' }).fill(endSecs);
+  }
+
+  // Click the check button
+  await page.locator('.pr-time-input--buttons .icon-check').click();
+}
+
+/**
+ * Set the values (hours, mins, secs) for the start time offset when in realtime mode
+ * @param {import('@playwright/test').Page} page
+ * @param {OffsetValues} offset
+ */
+async function setStartOffset(page, offset) {
+  // Click 'mode' button
+  await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
+  await setTimeConductorOffset(page, offset);
+}
+
+/**
+ * Set the values (hours, mins, secs) for the end time offset when in realtime mode
+ * @param {import('@playwright/test').Page} page
+ * @param {OffsetValues} offset
+ */
+async function setEndOffset(page, offset) {
+  // Click 'mode' button
+  await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
+  await setTimeConductorOffset(page, offset);
+}
+
+/**
+ * Set the time conductor bounds in fixed time mode
+ *
+ * NOTE: Unless explicitly testing the Time Conductor itself, it is advised to instead
+ * navigate directly to the object with the desired time bounds using `navigateToObjectWithFixedTimeBounds()`.
+ * @param {import('@playwright/test').Page} page
+ * @param {string} startDate
+ * @param {string} endDate
+ */
+async function setTimeConductorBounds(page, startDate, endDate) {
+  // Bring up the time conductor popup
+  expect(await page.locator('.l-shell__time-conductor.c-compact-tc').count()).toBe(1);
+  await page.click('.l-shell__time-conductor.c-compact-tc');
+
+  await setTimeBounds(page, startDate, endDate);
+
+  await page.keyboard.press('Enter');
+}
+
+/**
+ * Set the independent time conductor bounds in fixed time mode
+ * @param {import('@playwright/test').Page} page
+ * @param {string} startDate
+ * @param {string} endDate
+ */
+async function setIndependentTimeConductorBounds(page, startDate, endDate) {
+  // Activate Independent Time Conductor in Fixed Time Mode
+  await page.getByRole('switch').click();
+
+  // Bring up the time conductor popup
+  await page.click('.c-conductor-holder--compact .c-compact-tc');
+  await expect(page.locator('.itc-popout')).toBeInViewport();
+
+  await setTimeBounds(page, startDate, endDate);
+
+  await page.keyboard.press('Enter');
+}
+
+/**
+ * Set the bounds of the visible conductor in fixed time mode
+ * @private
+ * @param {import('@playwright/test').Page} page
+ * @param {string} startDate
+ * @param {string} endDate
+ */
+async function setTimeBounds(page, startDate, endDate) {
+  if (startDate) {
+    // Fill start time
+    await page
+      .getByRole('textbox', { name: 'Start date' })
+      .fill(startDate.toString().substring(0, 10));
+    await page
+      .getByRole('textbox', { name: 'Start time' })
+      .fill(startDate.toString().substring(11, 19));
+  }
+
+  if (endDate) {
+    // Fill end time
+    await page.getByRole('textbox', { name: 'End date' }).fill(endDate.toString().substring(0, 10));
+    await page
+      .getByRole('textbox', { name: 'End time' })
+      .fill(endDate.toString().substring(11, 19));
+  }
+}
+
+/**
+ * Waits and asserts that all plot series data on the page
+ * is loaded and drawn.
+ *
+ * In lieu of a better way to detect when a plot is done rendering,
+ * we [attach a class to the '.gl-plot' element](https://github.com/nasa/openmct/blob/5924d7ea95a0c2d4141c602a3c7d0665cb91095f/src/plugins/plot/MctPlot.vue#L27)
+ * once all pending series data has been loaded. The following appAction retrieves
+ * all plots on the page and waits up to the default timeout for the class to be
+ * attached to each plot.
+ * @param {import('@playwright/test').Page} page
+ */
+async function waitForPlotsToRender(page) {
+  const plotLocator = page.locator('.gl-plot');
+  for (const plot of await plotLocator.all()) {
+    await expect(plot).toHaveClass(/js-series-data-loaded/);
+  }
+}
+
+/**
+ * @typedef {Object} PlotPixel
+ * @property {number} r The value of the red channel (0-255)
+ * @property {number} g The value of the green channel (0-255)
+ * @property {number} b The value of the blue channel (0-255)
+ * @property {number} a The value of the alpha channel (0-255)
+ * @property {string} strValue The rgba string value of the pixel
+ */
+
+/**
+ * Wait for all plots to render and then retrieve and return an array
+ * of canvas plot pixel data (RGBA values).
+ * @param {import('@playwright/test').Page} page
+ * @param {string} canvasSelector The selector for the canvas element
+ * @return {Promise<PlotPixel[]>}
+ */
+async function getCanvasPixels(page, canvasSelector) {
+  const getTelemValuePromise = new Promise((resolve) =>
+    page.exposeFunction('getCanvasValue', resolve)
+  );
+  const canvasHandle = await page.evaluateHandle(
+    (canvas) => document.querySelector(canvas),
+    canvasSelector
+  );
+  const canvasContextHandle = await page.evaluateHandle(
+    (canvas) => canvas.getContext('2d'),
+    canvasHandle
+  );
+
+  await waitForPlotsToRender(page);
+  await page.evaluate(
+    ([canvas, ctx]) => {
+      // The document canvas is where the plot points and lines are drawn.
+      // The only way to access the canvas is using document (using page.evaluate)
+      /** @type {ImageData} */
+      const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+      /** @type {number[]} */
+      const imageDataValues = Object.values(data);
+      /** @type {PlotPixel[]} */
+      const plotPixels = [];
+      // Each pixel consists of four values within the ImageData.data array. The for loop iterates by multiples of four.
+      // The values associated with each pixel are R (red), G (green), B (blue), and A (alpha), in that order.
+      for (let i = 0; i < imageDataValues.length; ) {
+        if (imageDataValues[i] > 0) {
+          plotPixels.push({
+            r: imageDataValues[i],
+            g: imageDataValues[i + 1],
+            b: imageDataValues[i + 2],
+            a: imageDataValues[i + 3],
+            strValue: `rgb(${imageDataValues[i]}, ${imageDataValues[i + 1]}, ${
+              imageDataValues[i + 2]
+            }, ${imageDataValues[i + 3]})`
+          });
+        }
+
+        i = i + 4;
+      }
+
+      window.getCanvasValue(plotPixels);
+    },
+    [canvasHandle, canvasContextHandle]
+  );
+
+  return getTelemValuePromise;
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ * @param {string} myItemsFolderName
+ * @param {string} url
+ * @param {string} newName
+ */
+async function renameObjectFromContextMenu(page, url, newName) {
+  await openObjectTreeContextMenu(page, url);
+  await page.click('li:text("Edit Properties")');
+  const nameInput = page.getByLabel('Title', { exact: true });
+  await nameInput.fill('');
+  await nameInput.fill(newName);
+  await page.click('[aria-label="Save"]');
+}
+
+export {
+  createDomainObjectWithDefaults,
+  createExampleTelemetryObject,
+  createNotification,
+  createPlanFromJSON,
+  expandEntireTree,
+  expandTreePaneItemByName,
+  getCanvasPixels,
+  getFocusedObjectUuid,
+  getHashUrlToDomainObject,
+  navigateToObjectWithFixedTimeBounds,
+  openObjectTreeContextMenu,
+  renameObjectFromContextMenu,
+  setEndOffset,
+  setFixedTimeMode,
+  setIndependentTimeConductorBounds,
+  setRealTimeMode,
+  setStartOffset,
+  setTimeConductorBounds,
+  waitForPlotsToRender
+};
diff --git a/e2e/avpFixtures.js b/e2e/avpFixtures.js
new file mode 100644
index 00000000000..b6ffa13b812
--- /dev/null
+++ b/e2e/avpFixtures.js
@@ -0,0 +1,96 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/**
+ * avpFixtures.js
+ *
+ * @file This module provides custom fixtures specifically tailored for Accessibility, Visual, and Performance (AVP) tests.
+ * These fixtures extend the base functionality of the Playwright fixtures and appActions, and are designed to be
+ * generalized across all plugins. They offer functionalities like scanning for accessibility violations, integrating
+ * with axe-core, and more.
+ *
+ * IMPORTANT NOTE: This fixture file is not intended to be extended further by other fixtures. If you find yourself
+ * needing to do so, please consult the documentation and consider creating a specialized fixture or modifying the
+ * existing ones.
+ */
+
+import AxeBuilder from '@axe-core/playwright';
+import fs from 'fs';
+import path from 'path';
+
+import { expect, test } from './pluginFixtures.js';
+
+// Constants for repeated values
+const TEST_RESULTS_DIR = './test-results';
+
+/**
+ * Scans for accessibility violations on a page and writes a report to disk if violations are found.
+ * Automatically asserts that no violations should be present.
+ *
+ * @typedef {object} GenerateReportOptions
+ * @property {string} [reportName] - The name for the report file.
+ *
+ * @param {import('playwright').Page} page - The page object from Playwright.
+ * @param {string} testCaseName - The name of the test case.
+ * @param {GenerateReportOptions} [options={}] - The options for the report generation.
+ *
+ * @returns {Promise<object|null>} Returns the accessibility scan results if violations are found,
+ *                                  otherwise returns null.
+ */
+/* eslint-disable no-undef */
+export async function scanForA11yViolations(page, testCaseName, options = {}) {
+  const builder = new AxeBuilder({ page });
+  builder.withTags(['wcag2aa']);
+  // https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md
+  const accessibilityScanResults = await builder.analyze();
+
+  // Assert that no violations should be present
+  expect(
+    accessibilityScanResults.violations,
+    `Accessibility violations found in test case: ${testCaseName}`
+  ).toEqual([]);
+
+  // Check if there are any violations
+  if (accessibilityScanResults.violations.length > 0) {
+    let reportName = options.reportName || testCaseName;
+    let sanitizedReportName = reportName.replace(/\//g, '_');
+    const reportPath = path.join(TEST_RESULTS_DIR, `${sanitizedReportName}.json`);
+
+    try {
+      if (!fs.existsSync(TEST_RESULTS_DIR)) {
+        fs.mkdirSync(TEST_RESULTS_DIR);
+      }
+
+      fs.writeFileSync(reportPath, JSON.stringify(accessibilityScanResults, null, 2));
+      console.log(`Accessibility report with violations saved successfully as ${reportPath}`);
+      return accessibilityScanResults;
+    } catch (err) {
+      console.error(`Error writing the accessibility report to file ${reportPath}:`, err);
+      throw err;
+    }
+  } else {
+    console.log('No accessibility violations found, no report generated.');
+    return null;
+  }
+}
+
+export { expect, test };
diff --git a/e2e/baseFixtures.js b/e2e/baseFixtures.js
new file mode 100644
index 00000000000..0a807f24be1
--- /dev/null
+++ b/e2e/baseFixtures.js
@@ -0,0 +1,204 @@
+/* eslint-disable no-undef */
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/**
+ * This file is dedicated to extending the base functionality of the `@playwright/test` framework.
+ * The functions in this file should be viewed as temporary or a shim to be removed as the RFEs in
+ * the Playwright GitHub repo are implemented. Functions which serve those RFEs are marked with corresponding
+ * GitHub issues.
+ */
+
+import { expect, request, test } from '@playwright/test';
+import fs from 'fs';
+import path from 'path';
+import sinon from 'sinon';
+import { fileURLToPath } from 'url';
+import { v4 as uuid } from 'uuid';
+
+/**
+ * Takes a `ConsoleMessage` and returns a formatted string. Used to enable console log error detection.
+ * @see {@link https://github.com/microsoft/playwright/discussions/11690 Github Discussion}
+ * @private
+ * @param {import('@playwright/test').ConsoleMessage} msg
+ * @returns {String} formatted string with message type, text, url, and line and column numbers
+ */
+function _consoleMessageToString(msg) {
+  const { url, lineNumber, columnNumber } = msg.location();
+
+  return `[${msg.type()}] ${msg.text()} at (${url} ${lineNumber}:${columnNumber})`;
+}
+
+/**
+ * Wait for all animations within the given element and subtrees to finish. Useful when
+ * verifying that css transitions have completed.
+ * @see {@link https://github.com/microsoft/playwright/issues/15660 Github RFE}
+ * @param {import('@playwright/test').Locator} locator
+ * @return {Promise<Animation[]>}
+ */
+function waitForAnimations(locator) {
+  return locator.evaluate((element) =>
+    Promise.all(element.getAnimations({ subtree: true }).map((animation) => animation.finished))
+  );
+}
+
+/**
+ * This is part of our codecoverage shim.
+ * @see {@link https://github.com/mxschmitt/playwright-test-coverage Github Example Project}
+ * @constant {string}
+ */
+const istanbulCLIOutput = path.join(process.cwd(), '.nyc_output');
+
+const extendedTest = test.extend({
+  /**
+   * This allows the test to manipulate the browser clock. This is useful for Visual and Snapshot tests which need
+   * the Time Indicator Clock to be in a specific state.
+   *
+   * Warning: Has many limitations and secondary side effects in Open MCT.
+   * 1. The tree component does not render.
+   * 2. page.WaitForNavigation does not trigger.
+   *
+   * Usage:
+   * ```js
+   * test.use({
+   *   clockOptions: {
+   *       now: MISSION_TIME,
+   *       shouldAdvanceTime: true
+   * ```
+   * If clockOptions are provided, will override the default clock with fake timers provided by SinonJS.
+   *
+   * Default: `undefined`
+   *
+   * @see {@link https://github.com/microsoft/playwright/issues/6347 Github RFE}
+   * @see {@link https://github.com/sinonjs/fake-timers/#var-clock--faketimersinstallconfig SinonJS FakeTimers Config}
+   * @type {import('@types/sinonjs__fake-timers').FakeTimerInstallOpts}
+   */
+  clockOptions: [undefined, { option: true }],
+  overrideClock: [
+    async ({ context, clockOptions }, use) => {
+      if (clockOptions !== undefined) {
+        await context.addInitScript({
+          path: fileURLToPath(new URL('../node_modules/sinon/pkg/sinon.js', import.meta.url))
+        });
+        await context.addInitScript((options) => {
+          window.__clock = sinon.useFakeTimers(options);
+        }, clockOptions);
+      }
+
+      await use(context);
+    },
+    {
+      auto: true,
+      scope: 'test'
+    }
+  ],
+  /**
+   * Extends the base context class to add codecoverage shim.
+   * @see {@link https://github.com/mxschmitt/playwright-test-coverage Github Project}
+   */
+  context: async ({ context }, use) => {
+    await context.addInitScript(() =>
+      window.addEventListener('beforeunload', () =>
+        window.collectIstanbulCoverage(JSON.stringify(window.__coverage__))
+      )
+    );
+    await fs.promises.mkdir(istanbulCLIOutput, { recursive: true });
+    await context.exposeFunction('collectIstanbulCoverage', (coverageJSON) => {
+      if (coverageJSON) {
+        fs.writeFileSync(
+          path.join(istanbulCLIOutput, `playwright_coverage_${uuid()}.json`),
+          coverageJSON
+        );
+      }
+    });
+
+    await use(context);
+    for (const page of context.pages()) {
+      await page.evaluate(() =>
+        window.collectIstanbulCoverage(JSON.stringify(window.__coverage__))
+      );
+    }
+  },
+  /**
+   * If true, will assert against any console.error calls that occur during the test. Assertions occur
+   * during test teardown (after the test has completed).
+   *
+   * Default: `true`
+   */
+  failOnConsoleError: [true, { option: true }],
+  /**
+   * Extends the base page class to enable console log error detection.
+   * @see {@link https://github.com/microsoft/playwright/discussions/11690 Github Discussion}
+   */
+  page: async ({ page, failOnConsoleError, clockOptions }, use) => {
+    // If overriding the clock, we must also override the Date.now()
+    // function in the generatorWorker context. This is necessary
+    // to ensure that example telemetry data is generated for the new clock time.
+    if (clockOptions?.now !== undefined) {
+      page.on(
+        'worker',
+        (worker) => {
+          if (worker.url().includes('generatorWorker')) {
+            worker.evaluate((time) => {
+              self.Date.now = () => time;
+            });
+          }
+        },
+        clockOptions.now
+      );
+    }
+
+    // Capture any console errors during test execution
+    const messages = [];
+    page.on('console', (msg) => messages.push(msg));
+
+    await use(page);
+
+    // Assert against console errors during teardown
+    if (failOnConsoleError) {
+      messages.forEach((msg) =>
+        expect
+          .soft(msg.type(), `Console error detected: ${_consoleMessageToString(msg)}`)
+          .not.toEqual('error')
+      );
+    }
+  },
+  /**
+   * Extends the base browser class to enable CDP connection definition in playwright.config.js. Once
+   * that RFE is implemented, this function can be removed.
+   * @see {@link https://github.com/microsoft/playwright/issues/8379 Github RFE}
+   */
+  browser: async ({ playwright, browser }, use, workerInfo) => {
+    // Use browserless if configured
+    if (workerInfo.project.name.match(/browserless/)) {
+      const vBrowser = await playwright.chromium.connectOverCDP({
+        endpointURL: 'ws://localhost:3003'
+      });
+      await use(vBrowser);
+    } else {
+      // Use Local Browser for testing.
+      await use(browser);
+    }
+  }
+});
+
+export { expect, request, extendedTest as test, waitForAnimations };
diff --git a/e2e/constants.js b/e2e/constants.js
new file mode 100644
index 00000000000..cd513b12175
--- /dev/null
+++ b/e2e/constants.js
@@ -0,0 +1,19 @@
+/* eslint-disable prettier/prettier */
+/**
+ * Constants which may be used across all e2e tests.
+ */
+
+/**
+ * Time Constants
+ * - Used for overriding the browser clock in tests.
+ */
+export const MISSION_TIME = 1732413600000; // Saturday, November 23, 2024 6:00:00 PM GMT-08:00 (Thanksgiving Dinner Time)
+
+/**
+ * URL Constants
+ * - This is the URL that the browser will be directed to when running visual tests. This URL
+ *    - hides the tree and inspector to prevent visual noise
+ *    - sets the time bounds to a fixed range
+ */
+export const VISUAL_URL =
+  './#/browse/mine?tc.mode=fixed&tc.startBound=1693592063607&tc.endBound=1693593893607&tc.timeSystem=utc&view=grid&hideInspector=true&hideTree=true';
diff --git a/e2e/helper/addInitDataVisualization.js b/e2e/helper/addInitDataVisualization.js
new file mode 100644
index 00000000000..cf8fdde526f
--- /dev/null
+++ b/e2e/helper/addInitDataVisualization.js
@@ -0,0 +1,30 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+// This should be used to install the Example User
+document.addEventListener('DOMContentLoaded', () => {
+  const openmct = window.openmct;
+  openmct.install(openmct.plugins.example.ExampleDataVisualizationSourcePlugin());
+  openmct.install(
+    openmct.plugins.InspectorDataVisualization({ type: 'exampleDataVisualizationSource' })
+  );
+});
diff --git a/e2e/helper/addInitExampleFaultProvider.js b/e2e/helper/addInitExampleFaultProvider.js
new file mode 100644
index 00000000000..4caf4797a53
--- /dev/null
+++ b/e2e/helper/addInitExampleFaultProvider.js
@@ -0,0 +1,28 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+// This should be used to install the Example Fault Provider, this will also install the FaultManagementPlugin (neither of which are installed by default).
+
+document.addEventListener('DOMContentLoaded', () => {
+  const openmct = window.openmct;
+  openmct.install(openmct.plugins.example.ExampleFaultSource());
+});
diff --git a/e2e/helper/addInitExampleFaultProviderStatic.js b/e2e/helper/addInitExampleFaultProviderStatic.js
new file mode 100644
index 00000000000..58b835c0bf5
--- /dev/null
+++ b/e2e/helper/addInitExampleFaultProviderStatic.js
@@ -0,0 +1,30 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+// This should be used to install the Example Fault Provider, this will also install the FaultManagementPlugin (neither of which are installed by default).
+
+document.addEventListener('DOMContentLoaded', () => {
+  const openmct = window.openmct;
+  const staticFaults = true;
+
+  openmct.install(openmct.plugins.example.ExampleFaultSource(staticFaults));
+});
diff --git a/e2e/helper/addInitExampleUser.js b/e2e/helper/addInitExampleUser.js
new file mode 100644
index 00000000000..20d1cc9ecb2
--- /dev/null
+++ b/e2e/helper/addInitExampleUser.js
@@ -0,0 +1,27 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+// This should be used to install the Example User
+document.addEventListener('DOMContentLoaded', () => {
+  const openmct = window.openmct;
+  openmct.install(openmct.plugins.example.ExampleUser());
+});
diff --git a/e2e/helper/addInitFaultManagementPlugin.js b/e2e/helper/addInitFaultManagementPlugin.js
new file mode 100644
index 00000000000..961d0c5285d
--- /dev/null
+++ b/e2e/helper/addInitFaultManagementPlugin.js
@@ -0,0 +1,28 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+// This should be used to install the Example Fault Provider, this will also install the FaultManagementPlugin (neither of which are installed by default).
+
+document.addEventListener('DOMContentLoaded', () => {
+  const openmct = window.openmct;
+  openmct.install(openmct.plugins.FaultManagement());
+});
diff --git a/e2e/helper/addInitFileInputObject.js b/e2e/helper/addInitFileInputObject.js
new file mode 100644
index 00000000000..fc923b5cf89
--- /dev/null
+++ b/e2e/helper/addInitFileInputObject.js
@@ -0,0 +1,71 @@
+class DomainObjectViewProvider {
+  constructor(openmct) {
+    this.key = 'doViewProvider';
+    this.name = 'Domain Object View Provider';
+    this.openmct = openmct;
+  }
+
+  canView(domainObject) {
+    return domainObject.type === 'imageFileInput' || domainObject.type === 'jsonFileInput';
+  }
+
+  view(domainObject, objectPath) {
+    let content;
+
+    return {
+      show: function (element) {
+        const body = domainObject.selectFile.body;
+        const type = typeof body;
+
+        content = document.createElement('div');
+        content.id = 'file-input-type';
+        content.textContent = JSON.stringify(type);
+        element.appendChild(content);
+      },
+      destroy: function (element) {
+        element.removeChild(content);
+        content = undefined;
+      }
+    };
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const openmct = window.openmct;
+
+  openmct.types.addType('jsonFileInput', {
+    key: 'jsonFileInput',
+    name: 'JSON File Input Object',
+    creatable: true,
+    form: [
+      {
+        name: 'Upload File',
+        key: 'selectFile',
+        control: 'file-input',
+        required: true,
+        text: 'Select File...',
+        type: 'application/json',
+        property: ['selectFile']
+      }
+    ]
+  });
+
+  openmct.types.addType('imageFileInput', {
+    key: 'imageFileInput',
+    name: 'Image File Input Object',
+    creatable: true,
+    form: [
+      {
+        name: 'Upload File',
+        key: 'selectFile',
+        control: 'file-input',
+        required: true,
+        text: 'Select File...',
+        type: 'image/*',
+        property: ['selectFile']
+      }
+    ]
+  });
+
+  openmct.objectViews.addProvider(new DomainObjectViewProvider(openmct));
+});
diff --git a/e2e/helper/addInitNotebookWithUrls.js b/e2e/helper/addInitNotebookWithUrls.js
new file mode 100644
index 00000000000..5b9c31218ad
--- /dev/null
+++ b/e2e/helper/addInitNotebookWithUrls.js
@@ -0,0 +1,32 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+// This should be used to install the re-instal default Notebook plugin with a simple url whitelist.
+// e.g.
+// await page.addInitScript({ path: path.join(__dirname, 'addInitNotebookWithUrls.js') });
+const NOTEBOOK_NAME = 'Notebook';
+const URL_WHITELIST = ['google.com'];
+
+document.addEventListener('DOMContentLoaded', () => {
+  const openmct = window.openmct;
+  openmct.install(openmct.plugins.Notebook(NOTEBOOK_NAME, URL_WHITELIST));
+});
diff --git a/e2e/helper/addInitOperatorStatus.js b/e2e/helper/addInitOperatorStatus.js
new file mode 100644
index 00000000000..6c771531635
--- /dev/null
+++ b/e2e/helper/addInitOperatorStatus.js
@@ -0,0 +1,27 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+// This should be used to install the Operator Status
+document.addEventListener('DOMContentLoaded', () => {
+  const openmct = window.openmct;
+  openmct.install(openmct.plugins.OperatorStatus());
+});
diff --git a/e2e/helper/addInitRestrictedNotebook.js b/e2e/helper/addInitRestrictedNotebook.js
new file mode 100644
index 00000000000..200acf9e3ab
--- /dev/null
+++ b/e2e/helper/addInitRestrictedNotebook.js
@@ -0,0 +1,30 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+// This should be used to install the non-default Restricted Notebook plugin since it is not installed by default.
+// e.g.
+// await page.addInitScript({ path: path.join(__dirname, 'addInitRestrictedNotebook.js') });
+
+document.addEventListener('DOMContentLoaded', () => {
+  const openmct = window.openmct;
+  openmct.install(openmct.plugins.RestrictedNotebook('CUSTOM_NAME'));
+});
diff --git a/e2e/helper/addNoneditableObject.js b/e2e/helper/addNoneditableObject.js
new file mode 100644
index 00000000000..5098c47caff
--- /dev/null
+++ b/e2e/helper/addNoneditableObject.js
@@ -0,0 +1,27 @@
+(function () {
+  document.addEventListener('DOMContentLoaded', () => {
+    const PERSISTENCE_KEY = 'persistence-tests';
+    const openmct = window.openmct;
+
+    openmct.objects.addRoot({
+      namespace: PERSISTENCE_KEY,
+      key: PERSISTENCE_KEY
+    });
+
+    openmct.objects.addProvider(PERSISTENCE_KEY, {
+      get(identifier) {
+        if (identifier.key !== PERSISTENCE_KEY) {
+          return undefined;
+        } else {
+          return Promise.resolve({
+            identifier,
+            type: 'folder',
+            name: 'Persistence Testing',
+            location: 'ROOT',
+            composition: []
+          });
+        }
+      }
+    });
+  });
+})();
diff --git a/e2e/helper/faultUtils.js b/e2e/helper/faultUtils.js
new file mode 100644
index 00000000000..aecbee2ba9c
--- /dev/null
+++ b/e2e/helper/faultUtils.js
@@ -0,0 +1,295 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import { fileURLToPath } from 'url';
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function navigateToFaultManagementWithExample(page) {
+  await page.addInitScript({
+    path: fileURLToPath(new URL('./addInitExampleFaultProvider.js', import.meta.url))
+  });
+
+  await navigateToFaultItemInTree(page);
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function navigateToFaultManagementWithStaticExample(page) {
+  await page.addInitScript({
+    path: fileURLToPath(new URL('./addInitExampleFaultProviderStatic.js', import.meta.url))
+  });
+
+  await navigateToFaultItemInTree(page);
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function navigateToFaultManagementWithoutExample(page) {
+  await page.addInitScript({
+    path: fileURLToPath(new URL('./addInitFaultManagementPlugin.js', import.meta.url))
+  });
+
+  await navigateToFaultItemInTree(page);
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function navigateToFaultItemInTree(page) {
+  await page.goto('./', { waitUntil: 'networkidle' });
+
+  const faultManagementTreeItem = page
+    .getByRole('tree', {
+      name: 'Main Tree'
+    })
+    .getByRole('treeitem', {
+      name: 'Fault Management'
+    });
+
+  // Navigate to "Fault Management" from the tree
+  await faultManagementTreeItem.click();
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function acknowledgeFault(page, rowNumber) {
+  await openFaultRowMenu(page, rowNumber);
+  await page.locator('.c-menu >> text="Acknowledge"').click();
+  // Click [aria-label="Save"]
+  await page.locator('[aria-label="Save"]').click();
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function shelveMultipleFaults(page, ...nums) {
+  const selectRows = nums.map((num) => {
+    return selectFaultItem(page, num);
+  });
+  await Promise.all(selectRows);
+
+  await page.locator('button:has-text("Shelve")').click();
+  await page.locator('[aria-label="Save"]').click();
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function acknowledgeMultipleFaults(page, ...nums) {
+  const selectRows = nums.map((num) => {
+    return selectFaultItem(page, num);
+  });
+  await Promise.all(selectRows);
+
+  await page.locator('button:has-text("Acknowledge")').click();
+  await page.locator('[aria-label="Save"]').click();
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function shelveFault(page, rowNumber) {
+  await openFaultRowMenu(page, rowNumber);
+  await page.locator('.c-menu >> text="Shelve"').click();
+  // Click [aria-label="Save"]
+  await page.locator('[aria-label="Save"]').click();
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function changeViewTo(page, view) {
+  await page.locator('.c-fault-mgmt__search-row select').first().selectOption(view);
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function sortFaultsBy(page, sort) {
+  await page.locator('.c-fault-mgmt__list-header-sortButton select').selectOption(sort);
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function enterSearchTerm(page, term) {
+  await page.locator('.c-fault-mgmt-search [aria-label="Search Input"]').fill(term);
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function clearSearch(page) {
+  await enterSearchTerm(page, '');
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function selectFaultItem(page, rowNumber) {
+  await page.locator(`.c-fault-mgmt-item > input >> nth=${rowNumber - 1}`).check();
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function getHighestSeverity(page) {
+  const criticalCount = await page.locator('[title=CRITICAL]').count();
+  const warningCount = await page.locator('[title=WARNING]').count();
+
+  if (criticalCount > 0) {
+    return 'CRITICAL';
+  } else if (warningCount > 0) {
+    return 'WARNING';
+  }
+
+  return 'WATCH';
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function getLowestSeverity(page) {
+  const warningCount = await page.locator('[title=WARNING]').count();
+  const watchCount = await page.locator('[title=WATCH]').count();
+
+  if (watchCount > 0) {
+    return 'WATCH';
+  } else if (warningCount > 0) {
+    return 'WARNING';
+  }
+
+  return 'CRITICAL';
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function getFaultResultCount(page) {
+  const count = await page.locator('.c-faults-list-view-item-body > .c-fault-mgmt__list').count();
+
+  return count;
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+function getFault(page, rowNumber) {
+  const fault = page.locator(
+    `.c-faults-list-view-item-body > .c-fault-mgmt__list >> nth=${rowNumber - 1}`
+  );
+
+  return fault;
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+function getFaultByName(page, name) {
+  const fault = page.locator(`.c-fault-mgmt__list-faultname:has-text("${name}")`);
+
+  return fault;
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function getFaultName(page, rowNumber) {
+  const faultName = await page
+    .locator(`.c-fault-mgmt__list-faultname >> nth=${rowNumber - 1}`)
+    .textContent();
+
+  return faultName;
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function getFaultSeverity(page, rowNumber) {
+  const faultSeverity = await page
+    .locator(`.c-faults-list-view-item-body .c-fault-mgmt__list-severity >> nth=${rowNumber - 1}`)
+    .getAttribute('title');
+
+  return faultSeverity;
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function getFaultNamespace(page, rowNumber) {
+  const faultNamespace = await page
+    .locator(`.c-fault-mgmt__list-path >> nth=${rowNumber - 1}`)
+    .textContent();
+
+  return faultNamespace;
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function getFaultTriggerTime(page, rowNumber) {
+  const faultTriggerTime = await page
+    .locator(`.c-fault-mgmt__list-trigTime >> nth=${rowNumber - 1} >> .c-fault-mgmt-item__value`)
+    .textContent();
+
+  return faultTriggerTime.toString().trim();
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function openFaultRowMenu(page, rowNumber) {
+  // select
+  await page
+    .locator(`.c-fault-mgmt-item > .c-fault-mgmt__list-action-button >> nth=${rowNumber - 1}`)
+    .click();
+}
+
+export {
+  acknowledgeFault,
+  acknowledgeMultipleFaults,
+  changeViewTo,
+  clearSearch,
+  enterSearchTerm,
+  getFault,
+  getFaultByName,
+  getFaultName,
+  getFaultNamespace,
+  getFaultResultCount,
+  getFaultSeverity,
+  getFaultTriggerTime,
+  getHighestSeverity,
+  getLowestSeverity,
+  navigateToFaultItemInTree,
+  navigateToFaultManagementWithExample,
+  navigateToFaultManagementWithoutExample,
+  navigateToFaultManagementWithStaticExample,
+  openFaultRowMenu,
+  selectFaultItem,
+  shelveFault,
+  shelveMultipleFaults,
+  sortFaultsBy
+};
diff --git a/e2e/helper/notebookUtils.js b/e2e/helper/notebookUtils.js
new file mode 100644
index 00000000000..de7177af221
--- /dev/null
+++ b/e2e/helper/notebookUtils.js
@@ -0,0 +1,150 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createDomainObjectWithDefaults } from '../appActions.js';
+
+const NOTEBOOK_DROP_AREA = '.c-notebook__drag-area';
+const CUSTOM_NAME = 'CUSTOM_NAME';
+import { fileURLToPath } from 'url';
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function enterTextEntry(page, text) {
+  // Click the 'Add Notebook Entry' area
+  await page.locator(NOTEBOOK_DROP_AREA).click();
+
+  // enter text
+  await page.getByLabel('Notebook Entry Input').last().fill(text);
+  await commitEntry(page);
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function dragAndDropEmbed(page, notebookObject) {
+  // Create example telemetry object
+  const swg = await createDomainObjectWithDefaults(page, {
+    type: 'Sine Wave Generator'
+  });
+  // Navigate to notebook
+  await page.goto(notebookObject.url);
+  // Expand the tree to reveal the notebook
+  await page.getByLabel('Show selected item in tree').click();
+  // Drag and drop the SWG into the notebook
+  await page.dragAndDrop(`text=${swg.name}`, NOTEBOOK_DROP_AREA);
+  await commitEntry(page);
+}
+
+/**
+ * @private
+ * @param {import('@playwright/test').Page} page
+ */
+async function commitEntry(page) {
+  //Click the Commit Entry button
+  await page.locator('.c-ne__save-button > button').click();
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function startAndAddRestrictedNotebookObject(page) {
+  // eslint-disable-next-line no-undef
+  await page.addInitScript({
+    path: fileURLToPath(new URL('./addInitRestrictedNotebook.js', import.meta.url))
+  });
+  await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+  return createDomainObjectWithDefaults(page, {
+    type: CUSTOM_NAME,
+    name: 'Restricted Test Notebook'
+  });
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function lockPage(page) {
+  const commitButton = page.locator('button:has-text("Commit Entries")');
+  await commitButton.click();
+
+  //Wait until Lock Banner is visible
+  await page.locator('text=Lock Page').click();
+}
+
+/**
+ * Creates a notebook object and adds an entry.
+ * @param {import('@playwright/test').Page} - page to load
+ * @param {number} [iterations = 1] - the number of entries to create
+ */
+async function createNotebookAndEntry(page, iterations = 1) {
+  const notebook = createDomainObjectWithDefaults(page, { type: 'Notebook' });
+
+  for (let iteration = 0; iteration < iterations; iteration++) {
+    await enterTextEntry(page, `Entry ${iteration}`);
+  }
+
+  return notebook;
+}
+
+/**
+ * Creates a notebook object, adds an entry, and adds a tag.
+ * @param {import('@playwright/test').Page} page
+ * @param {number} [iterations = 1] - the number of entries (and tags) to create
+ */
+async function createNotebookEntryAndTags(page, iterations = 1) {
+  const notebook = await createNotebookAndEntry(page, iterations);
+  await page.getByRole('tab', { name: 'Annotations' }).click();
+
+  for (let iteration = 0; iteration < iterations; iteration++) {
+    // Hover and click "Add Tag" button
+    // Hover is needed here to "slow down" the actions while running in headless mode
+    await page.locator(`[aria-label="Notebook Entry"] >> nth = ${iteration}`).click();
+    await page.hover(`button:has-text("Add Tag")`);
+    await page.locator(`button:has-text("Add Tag")`).click();
+
+    // Click inside the tag search input
+    await page.locator('[placeholder="Type to select tag"]').click();
+    // Select the "Driving" tag
+    await page.locator('[aria-label="Autocomplete Options"] >> text=Driving').click();
+
+    // Hover and click "Add Tag" button
+    // Hover is needed here to "slow down" the actions while running in headless mode
+    await page.hover(`button:has-text("Add Tag")`);
+    await page.locator(`button:has-text("Add Tag")`).click();
+    // Click inside the tag search input
+    await page.locator('[placeholder="Type to select tag"]').click();
+    // Select the "Science" tag
+    await page.locator('[aria-label="Autocomplete Options"] >> text=Science').click();
+  }
+
+  return notebook;
+}
+
+export {
+  createNotebookAndEntry,
+  createNotebookEntryAndTags,
+  dragAndDropEmbed,
+  enterTextEntry,
+  lockPage,
+  startAndAddRestrictedNotebookObject
+};
diff --git a/e2e/helper/planningUtils.js b/e2e/helper/planningUtils.js
new file mode 100644
index 00000000000..3b68f0efad9
--- /dev/null
+++ b/e2e/helper/planningUtils.js
@@ -0,0 +1,174 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { expect } from '../pluginFixtures.js';
+
+/**
+ * Asserts that the number of activities in the plan view matches the number of
+ * activities in the plan data within the specified time bounds. Performs an assertion
+ * for each activity in the plan data per group, using the earliest activity's
+ * start time as the start bound and the current activity's end time as the end bound.
+ * @param {import('@playwright/test').Page} page the page
+ * @param {object} plan The raw plan json to assert against
+ * @param {string} objectUrl The URL of the object to assert against (plan or gantt chart)
+ */
+export async function assertPlanActivities(page, plan, objectUrl) {
+  const groups = Object.keys(plan);
+  for (const group of groups) {
+    for (let i = 0; i < plan[group].length; i++) {
+      // Set the startBound to the start time of the first activity in the group
+      const startBound = plan[group][0].start;
+      // Set the endBound to the end time of the current activity
+      let endBound = plan[group][i].end;
+      if (endBound === startBound) {
+        // Prevent oddities with setting start and end bound equal
+        // via URL params
+        endBound += 1;
+      }
+
+      // Switch to fixed time mode with all plan events within the bounds
+      await page.goto(
+        `${objectUrl}?tc.mode=fixed&tc.startBound=${startBound}&tc.endBound=${endBound}&tc.timeSystem=utc&view=plan.view`
+      );
+
+      // Assert that the number of activities in the plan view matches the number of
+      // activities in the plan data within the specified time bounds
+      const eventCount = await page.locator('.activity-bounds').count();
+      expect(eventCount).toEqual(
+        Object.values(plan)
+          .flat()
+          .filter((event) =>
+            activitiesWithinTimeBounds(event.start, event.end, startBound, endBound)
+          ).length
+      );
+    }
+  }
+}
+
+/**
+ * Returns true if the activities time bounds overlap, false otherwise.
+ * @param {number} start1 the start time of the first activity
+ * @param {number} end1 the end time of the first activity
+ * @param {number} start2 the start time of the second activity
+ * @param {number} end2 the end time of the second activity
+ * @returns {boolean} true if the activities overlap, false otherwise
+ */
+function activitiesWithinTimeBounds(start1, end1, start2, end2) {
+  return (
+    (start1 >= start2 && start1 <= end2) ||
+    (end1 >= start2 && end1 <= end2) ||
+    (start2 >= start1 && start2 <= end1) ||
+    (end2 >= start1 && end2 <= end1)
+  );
+}
+
+/**
+ * Asserts that the swim lanes / groups in the plan view matches the order of
+ * groups in the plan data.
+ * @param {import('@playwright/test').Page} page the page
+ * @param {object} plan The raw plan json to assert against
+ * @param {string} objectUrl The URL of the object to assert against (plan or gantt chart)
+ */
+export async function assertPlanOrderedSwimLanes(page, plan, objectUrl) {
+  // Switch to the plan view
+  await page.goto(`${objectUrl}?view=plan.view`);
+  const planGroups = await page
+    .locator('.c-plan__contents > div > .c-swimlane__lane-label .c-object-label__name')
+    .all();
+
+  const groups = plan.Groups;
+
+  for (let i = 0; i < groups.length; i++) {
+    // Assert that the order of groups in the plan view matches the order of
+    // groups in the plan data
+    const groupName = await planGroups[i].innerText();
+    expect(groupName).toEqual(groups[i].name);
+  }
+}
+
+/**
+ * Navigate to the plan view, switch to fixed time mode,
+ * and set the bounds to span all activities.
+ * @param {import('@playwright/test').Page} page
+ * @param {object} planJson
+ * @param {string} planObjectUrl
+ */
+export async function setBoundsToSpanAllActivities(page, planJson, planObjectUrl) {
+  // Get the earliest start value
+  const start = getEarliestStartTime(planJson);
+  // Get the latest end value
+  const end = getLatestEndTime(planJson);
+  // Set the start and end bounds to the earliest start and latest end
+  await page.goto(
+    `${planObjectUrl}?tc.mode=fixed&tc.startBound=${start}&tc.endBound=${end}&tc.timeSystem=utc&view=plan.view`
+  );
+}
+
+/**
+ * @param {object} planJson
+ * @returns {number}
+ */
+export function getEarliestStartTime(planJson) {
+  const activities = Object.values(planJson).flat();
+  return Math.min(...activities.map((activity) => activity.start));
+}
+
+/**
+ *
+ * @param {object} planJson
+ * @returns {number}
+ */
+export function getLatestEndTime(planJson) {
+  const activities = Object.values(planJson).flat();
+  return Math.max(...activities.map((activity) => activity.end));
+}
+
+/**
+ * Uses the Open MCT API to set the status of a plan to 'draft'.
+ * @param {import('@playwright/test').Page} page
+ * @param {import('../../appActions').CreatedObjectInfo} plan
+ */
+export async function setDraftStatusForPlan(page, plan) {
+  await page.evaluate(async (planObject) => {
+    await window.openmct.status.set(planObject.uuid, 'draft');
+  }, plan);
+}
+
+export async function addPlanGetInterceptor(page) {
+  await page.waitForLoadState('load');
+  await page.evaluate(async () => {
+    await window.openmct.objects.addGetInterceptor({
+      appliesTo: (identifier, domainObject) => {
+        return domainObject && domainObject.type === 'plan';
+      },
+      invoke: (identifier, object) => {
+        if (object) {
+          object.sourceMap = {
+            orderedGroups: 'Groups'
+          };
+        }
+
+        return object;
+      }
+    });
+  });
+}
diff --git a/e2e/helper/plotTagsUtils.js b/e2e/helper/plotTagsUtils.js
new file mode 100644
index 00000000000..0633ef31115
--- /dev/null
+++ b/e2e/helper/plotTagsUtils.js
@@ -0,0 +1,189 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { waitForPlotsToRender } from '../appActions.js';
+import { expect } from '../pluginFixtures.js';
+
+/**
+ * Given a canvas and a set of points, tags the points on the canvas.
+ * @param {import('@playwright/test').Page} page
+ * @param {HTMLCanvasElement} canvas a telemetry item with a plot
+ * @param {Number} xEnd a telemetry item with a plot
+ * @param {Number} yEnd a telemetry item with a plot
+ * @returns {Promise}
+ */
+export async function createTags({ page, canvas, xEnd = 700, yEnd = 520 }) {
+  await canvas.hover({ trial: true });
+
+  //Alt+Shift Drag Start to select some points to tag
+  await page.keyboard.down('Alt');
+  await page.keyboard.down('Shift');
+
+  await canvas.dragTo(canvas, {
+    sourcePosition: {
+      x: 1,
+      y: 1
+    },
+    targetPosition: {
+      x: xEnd,
+      y: yEnd
+    }
+  });
+
+  //Alt Drag End
+  await page.keyboard.up('Alt');
+  await page.keyboard.up('Shift');
+
+  //Wait for canvas to stabilize.
+  await canvas.hover({ trial: true });
+
+  // add some tags
+  await page.getByText('Annotations').click();
+  await page.getByRole('button', { name: /Add Tag/ }).click();
+  await page.getByPlaceholder('Type to select tag').click();
+  await page.getByText('Driving').click();
+
+  await page.getByRole('button', { name: /Add Tag/ }).click();
+  await page.getByPlaceholder('Type to select tag').click();
+  await page.getByText('Science').click();
+}
+
+/**
+ * Given a telemetry item (e.g., a Sine Wave Generator) with a plot, tests that the plot can be tagged.
+ * @param {import('@playwright/test').Page} page
+ * @param {import('../../../../appActions').CreatedObjectInfo} telemetryItem a telemetry item with a plot
+ * @returns {Promise}
+ */
+export async function testTelemetryItem(page, telemetryItem) {
+  // Check that telemetry item also received the tag
+  await page.goto(telemetryItem.url);
+
+  await expect(page.getByText('No tags to display for this item')).toBeVisible();
+
+  const canvas = page.locator('canvas').nth(1);
+  //Wait for canvas to stabilize.
+  await waitForPlotsToRender(page);
+
+  await expect(canvas).toBeInViewport();
+  await canvas.hover({ trial: true });
+
+  // click on the tagged plot point
+  await canvas.click({
+    position: {
+      x: 100,
+      y: 100
+    }
+  });
+
+  await expect(page.getByText('Science')).toBeVisible();
+  await expect(page.getByText('Driving')).toBeHidden();
+}
+
+/**
+ * Given a page, tests that tags are searchable, deletable, and persist across reloads.
+ * @param {import('@playwright/test').Page} page
+ * @returns {Promise}
+ */
+export async function basicTagsTests(page) {
+  // Search for Driving
+  await page.getByRole('searchbox', { name: 'Search Input' }).click();
+
+  // Clicking elsewhere should cause annotation selection to be cleared
+  await expect(page.getByText('No tags to display for this item')).toBeVisible();
+  //
+  await page.getByRole('searchbox', { name: 'Search Input' }).fill('driv');
+
+  // Always click on the first Sine Wave result
+  await page
+    .getByLabel('Search Result')
+    .getByText(/Sine Wave/)
+    .first()
+    .click();
+
+  // Delete Driving Tag
+  await page.hover('[aria-label="Tag"]:has-text("Driving")');
+  await page.locator('[aria-label="Remove tag Driving"]').click();
+
+  // Search for Science Tag
+  await page.getByRole('searchbox', { name: 'Search Input' }).click();
+  await page.getByRole('searchbox', { name: 'Search Input' }).fill('sc');
+
+  //Expect Science Tag to be present and and Driving Tags to be deleted
+  await expect(page.getByLabel('Search Result').first()).toContainText('Science');
+  await expect(page.getByLabel('Search Result').first()).not.toContainText('Driving');
+
+  // Search for Driving Tag and expect nothing found
+  await page.getByRole('searchbox', { name: 'Search Input' }).click();
+  await page.getByRole('searchbox', { name: 'Search Input' }).fill('driv');
+  await expect(page.getByText('No results found')).toBeVisible();
+
+  await page.reload({ waitUntil: 'domcontentloaded' });
+
+  await waitForPlotsToRender(page);
+
+  //Navigate to the Inspector and check that all tags have been removed
+  await expect(page.getByRole('tab', { name: 'Annotations' })).not.toHaveClass(/is-current/);
+  await page.getByRole('tab', { name: 'Annotations' }).click();
+  await expect(page.getByRole('tab', { name: 'Annotations' })).toHaveClass(/is-current/);
+  await expect(page.getByText('No tags to display for this item')).toBeVisible();
+
+  const canvas = page.locator('canvas').nth(1);
+  // click on the tagged plot point
+  await canvas.click({
+    position: {
+      x: 100,
+      y: 100
+    }
+  });
+
+  //Expect Science to be visible but Driving to be hidden
+  await expect(page.getByText('Science')).toBeVisible();
+  await expect(page.getByText('Driving')).toBeHidden();
+
+  //Click elsewhere
+  await page.locator('body').click();
+  //Click on tagged plot point again
+  await canvas.click({
+    position: {
+      x: 100,
+      y: 100
+    }
+  });
+
+  // Add Driving Tag again
+  await page.getByText('Annotations').click();
+  await page.getByRole('button', { name: /Add Tag/ }).click();
+  await page.getByPlaceholder('Type to select tag').click();
+  await page.getByText('Driving').click();
+
+  //Science and Driving Tags should be visible
+  await expect(page.getByText('Science')).toBeVisible();
+  await expect(page.getByText('Driving')).toBeVisible();
+
+  // Delete Driving Tag again
+  await page.hover('[aria-label="Tag"]:has-text("Driving")');
+  await page.locator('[aria-label="Remove tag Driving"]').click();
+
+  //Science Tag should be visible and Driving Tag should be hidden
+  await expect(page.getByText('Science')).toBeVisible();
+  await expect(page.getByText('Driving')).toBeHidden();
+}
diff --git a/e2e/helper/stylingUtils.js b/e2e/helper/stylingUtils.js
new file mode 100644
index 00000000000..1f5d1176dde
--- /dev/null
+++ b/e2e/helper/stylingUtils.js
@@ -0,0 +1,104 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { expect } from '../pluginFixtures.js';
+
+/**
+ * Converts a hex color value to its RGB equivalent.
+ *
+ * @param {string} hex - The hex color value. i.e. '#5b0f00'
+ * @returns {string} The RGB equivalent of the hex color.
+ */
+function hexToRGB(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? `rgb(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)})`
+    : null;
+}
+
+/**
+ * Sets the background and text color of a given element.
+ *
+ * @param {import('@playwright/test').Page} page - The Playwright page object.
+ * @param {string} borderColorHex - The hex value of the border color to set, or 'No Style'.
+ * @param {string} backgroundColorHex - The hex value of the background color to set, or 'No Style'.
+ * @param {string} textColorHex - The hex value of the text color to set, or 'No Style'.
+ * @param {import('@playwright/test').Locator} locator - The Playwright locator for the element whose style is to be set.
+ */
+async function setStyles(page, borderColorHex, backgroundColorHex, textColorHex, locator) {
+  await locator.click(); // Assuming the locator is clickable and opens the style setting UI
+  await page.getByLabel('Set border color').click();
+  await page.getByLabel(borderColorHex).click();
+  await page.getByLabel('Set background color').click();
+  await page.getByLabel(backgroundColorHex).click();
+  await page.getByLabel('Set text color').click();
+  await page.getByLabel(textColorHex).click();
+}
+
+/**
+ * Checks if the styles of an element match the expected values.
+ *
+ * @param {string} expectedBorderColor - The expected border color in RGB format. Default is '#e6b8af' or 'rgb(230, 184, 175)'
+ * @param {string} expectedBackgroundColor - The expected background color in RGB format.
+ * @param {string} expectedTextColor - The expected text color in RGB format. Default is #aaaaaa or 'rgb(170, 170, 170)'
+ * @param {import('@playwright/test').Locator} locator - The Playwright locator for the element whose style is to be checked.
+ */
+async function checkStyles(
+  expectedBorderColor,
+  expectedBackgroundColor,
+  expectedTextColor,
+  locator
+) {
+  const layoutStyles = await locator.evaluate((el) => {
+    return {
+      border: window.getComputedStyle(el).getPropertyValue('border-top-color'), //infer the left, right, and bottom
+      background: window.getComputedStyle(el).getPropertyValue('background-color'),
+      fontColor: window.getComputedStyle(el).getPropertyValue('color')
+    };
+  });
+  expect(layoutStyles.border).toContain(expectedBorderColor);
+  expect(layoutStyles.background).toContain(expectedBackgroundColor);
+  expect(layoutStyles.fontColor).toContain(expectedTextColor);
+}
+
+/**
+ * Checks if the font Styles of an element match the expected values.
+ *
+ * @param {string} expectedFontSize - The expected font size in '72px' format. Default is 'Default'
+ * @param {string} expectedFontWeight - The expected font Type. Format as '700' for bold. Default is 'Default'
+ * @param {string} expectedFontFamily - The expected font Type. Format as "\"Andale Mono\", sans-serif". Default is 'Default'
+ * @param {import('@playwright/test').Locator} locator - The Playwright locator for the element whose style is to be checked.
+ */
+async function checkFontStyles(expectedFontSize, expectedFontWeight, expectedFontFamily, locator) {
+  const layoutStyles = await locator.evaluate((el) => {
+    return {
+      fontSize: window.getComputedStyle(el).getPropertyValue('font-size'),
+      fontWeight: window.getComputedStyle(el).getPropertyValue('font-weight'),
+      fontFamily: window.getComputedStyle(el).getPropertyValue('font-family')
+    };
+  });
+  expect(layoutStyles.fontSize).toContain(expectedFontSize);
+  expect(layoutStyles.fontWeight).toContain(expectedFontWeight);
+  expect(layoutStyles.fontFamily).toContain(expectedFontFamily);
+}
+
+export { checkFontStyles, checkStyles, hexToRGB, setStyles };
diff --git a/e2e/helper/useSnowTheme.js b/e2e/helper/useSnowTheme.js
new file mode 100644
index 00000000000..3f1d1d5f10d
--- /dev/null
+++ b/e2e/helper/useSnowTheme.js
@@ -0,0 +1,30 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+// This should be used to install the Snow theme for Open MCT. Espresso is the default
+// e.g.
+// await page.addInitScript({ path: path.join(__dirname, 'useSnowTheme.js') });
+
+document.addEventListener('DOMContentLoaded', () => {
+  const openmct = window.openmct;
+  openmct.install(openmct.plugins.Snow());
+});
diff --git a/e2e/playwright-ci.config.js b/e2e/playwright-ci.config.js
new file mode 100644
index 00000000000..d86fd2507e0
--- /dev/null
+++ b/e2e/playwright-ci.config.js
@@ -0,0 +1,83 @@
+// playwright.config.js
+// @ts-check
+
+// eslint-disable-next-line no-unused-vars
+import { devices } from '@playwright/test';
+const MAX_FAILURES = 5;
+const NUM_WORKERS = 2;
+
+/** @type {import('@playwright/test').PlaywrightTestConfig} */
+const config = {
+  retries: 2, //Retries 2 times for a total of 3 runs. When running sharded and with max-failures=5, this should ensure that flake is managed without failing the full suite
+  testDir: 'tests',
+  grepInvert: /@mobile/, //Ignore mobile tests
+  testIgnore: '**/*.perf.spec.js', //Ignore performance tests and define in playwright-perfromance.config.js
+  timeout: 60 * 1000,
+  webServer: {
+    command: 'npm run start:coverage',
+    url: 'http://localhost:8080/#',
+    timeout: 200 * 1000,
+    reuseExistingServer: true //This was originally disabled to prevent differences in local debugging vs. CI. However, it significantly speeds up local debugging.
+  },
+  maxFailures: MAX_FAILURES, //Limits failures to 5 to reduce CI Waste
+  workers: NUM_WORKERS, //Limit to 2 for CircleCI Agent
+  use: {
+    baseURL: 'http://localhost:8080/',
+    headless: true,
+    ignoreHTTPSErrors: true,
+    screenshot: 'only-on-failure',
+    trace: 'on-first-retry',
+    video: 'off'
+  },
+  projects: [
+    {
+      name: 'chrome',
+      testMatch: '**/*.e2e.spec.js', // only run e2e tests
+      use: {
+        browserName: 'chromium'
+      }
+    },
+    {
+      name: 'MMOC',
+      testMatch: '**/*.e2e.spec.js', // only run e2e tests
+      grepInvert: /@snapshot/,
+      use: {
+        browserName: 'chromium',
+        viewport: {
+          width: 2560,
+          height: 1440
+        }
+      }
+    },
+    {
+      name: 'firefox',
+      testMatch: '**/*.e2e.spec.js', // only run e2e tests
+      grepInvert: /@snapshot/,
+      use: {
+        browserName: 'firefox'
+      }
+    },
+    {
+      name: 'chrome-beta', //Only Chrome Beta is available on ubuntu -- not chrome canary
+      testMatch: '**/*.e2e.spec.js', // only run e2e tests
+      grepInvert: /@snapshot/,
+      use: {
+        browserName: 'chromium',
+        channel: 'chrome-beta'
+      }
+    }
+  ],
+  reporter: [
+    ['list'],
+    [
+      'html',
+      {
+        open: 'never',
+        outputFolder: '../html-test-results' //Must be in different location due to https://github.com/microsoft/playwright/issues/12840
+      }
+    ],
+    ['junit', { outputFile: '../test-results/results.xml' }]
+  ]
+};
+
+export default config;
diff --git a/e2e/playwright-local.config.js b/e2e/playwright-local.config.js
new file mode 100644
index 00000000000..37afca21529
--- /dev/null
+++ b/e2e/playwright-local.config.js
@@ -0,0 +1,88 @@
+// playwright.config.js
+// @ts-check
+
+/** @type {import('@playwright/test').PlaywrightTestConfig} */
+const config = {
+  retries: 0,
+  testDir: 'tests',
+  testMatch: '**/*.e2e.spec.js', // only run e2e tests
+  testIgnore: '**/*.perf.spec.js',
+  timeout: 30 * 1000,
+  webServer: {
+    command: 'npm run start:coverage',
+    url: 'http://localhost:8080/#',
+    timeout: 120 * 1000,
+    reuseExistingServer: true
+  },
+  workers: 1,
+  use: {
+    browserName: 'chromium',
+    baseURL: 'http://localhost:8080/',
+    headless: false,
+    ignoreHTTPSErrors: true,
+    screenshot: 'only-on-failure',
+    trace: 'retain-on-failure',
+    video: 'off'
+  },
+  projects: [
+    {
+      name: 'chrome',
+      use: {
+        browserName: 'chromium'
+      }
+    },
+    {
+      name: 'MMOC',
+      grepInvert: /@snapshot/,
+      use: {
+        browserName: 'chromium',
+        viewport: {
+          width: 2560,
+          height: 1440
+        }
+      }
+    },
+    {
+      name: 'safari',
+      grepInvert: /@snapshot/,
+      use: {
+        browserName: 'webkit'
+      }
+    },
+    {
+      name: 'firefox',
+      grepInvert: /@snapshot/,
+      use: {
+        browserName: 'firefox'
+      }
+    },
+    {
+      name: 'canary',
+      grepInvert: /@snapshot/,
+      use: {
+        browserName: 'chromium',
+        channel: 'chrome-canary' //Note this is not available in ubuntu/CircleCI
+      }
+    },
+    {
+      name: 'chrome-beta',
+      grepInvert: /@snapshot/,
+      use: {
+        browserName: 'chromium',
+        channel: 'chrome-beta'
+      }
+    }
+  ],
+  reporter: [
+    ['list'],
+    [
+      'html',
+      {
+        open: 'on-failure',
+        outputFolder: '../html-test-results' //Must be in different location due to https://github.com/microsoft/playwright/issues/12840
+      }
+    ]
+  ]
+};
+
+export default config;
diff --git a/e2e/playwright-mobile.config.js b/e2e/playwright-mobile.config.js
new file mode 100644
index 00000000000..a7cbf2b685e
--- /dev/null
+++ b/e2e/playwright-mobile.config.js
@@ -0,0 +1,69 @@
+// playwright.config.js
+// @ts-check
+
+import { devices } from '@playwright/test';
+const MAX_FAILURES = 5;
+
+import { fileURLToPath } from 'url';
+
+/** @type {import('@playwright/test').PlaywrightTestConfig} */
+const config = {
+  retries: 1, //Retries 2 times for a total of 3 runs. When running sharded and with max-failures=5, this should ensure that flake is managed without failing the full suite
+  testDir: 'tests',
+  testIgnore: '**/*.perf.spec.js', //Ignore performance tests and define in playwright-perfromance.config.js
+  timeout: 30 * 1000,
+  webServer: {
+    command: 'npm run start:coverage',
+    url: 'http://localhost:8080/#',
+    timeout: 200 * 1000,
+    reuseExistingServer: true //This was originally disabled to prevent differences in local debugging vs. CI. However, it significantly speeds up local debugging.
+  },
+  maxFailures: MAX_FAILURES, //Limits failures to 5 to reduce CI Waste
+  workers: 1, //Limit to 1 due to resource constraints similar to https://github.com/percy/cli/discussions/1067
+
+  use: {
+    baseURL: 'http://localhost:8080/',
+    headless: true,
+    ignoreHTTPSErrors: true,
+    screenshot: 'only-on-failure',
+    trace: 'on-first-retry',
+    video: 'off'
+  },
+  projects: [
+    {
+      name: 'ipad',
+      grep: /@mobile/,
+      use: {
+        storageState: fileURLToPath(
+          new URL('./test-data/display_layout_with_child_layouts.json', import.meta.url)
+        ),
+        browserName: 'webkit',
+        ...devices['iPad (gen 7) landscape'] // Complete List https://github.com/microsoft/playwright/blob/main/packages/playwright-core/src/server/deviceDescriptorsSource.json
+      }
+    },
+    {
+      name: 'iphone',
+      grep: /@mobile/,
+      use: {
+        storageState: fileURLToPath(
+          new URL('./test-data/display_layout_with_child_layouts.json', import.meta.url)
+        ),
+        browserName: 'webkit',
+        ...devices['iPhone 14 Pro'] // Complete List https://github.com/microsoft/playwright/blob/main/packages/playwright-core/src/server/deviceDescriptorsSource.json
+      }
+    }
+  ],
+  reporter: [
+    ['list'],
+    [
+      'html',
+      {
+        open: 'never',
+        outputFolder: '../html-test-results' //Must be in different location due to https://github.com/microsoft/playwright/issues/12840
+      }
+    ],
+    ['junit', { outputFile: '../test-results/results.xml' }]
+  ]
+};
+
+export default config;
diff --git a/e2e/playwright-performance-dev.config.js b/e2e/playwright-performance-dev.config.js
new file mode 100644
index 00000000000..a10c350e809
--- /dev/null
+++ b/e2e/playwright-performance-dev.config.js
@@ -0,0 +1,42 @@
+// playwright.config.js
+// @ts-check
+
+/** @type {import('@playwright/test').PlaywrightTestConfig} */
+const config = {
+  retries: 1, //Only for debugging purposes for trace: 'on-first-retry'
+  testDir: 'tests/performance/',
+  testMatch: '*.contract.perf.spec.js', //Run everything except contract tests which require marks in dev mode
+  timeout: 60 * 1000,
+  workers: 1, //Only run in serial with 1 worker
+  webServer: {
+    command: 'npm run start', //need development mode for performance.marks and others
+    url: 'http://localhost:8080/#',
+    timeout: 200 * 1000,
+    reuseExistingServer: false
+  },
+  use: {
+    browserName: 'chromium',
+    baseURL: 'http://localhost:8080/',
+    headless: true,
+    ignoreHTTPSErrors: false, //HTTP performance varies!
+    screenshot: 'off',
+    trace: 'on-first-retry',
+    video: 'off'
+  },
+  projects: [
+    {
+      name: 'chrome',
+      testIgnore: '*.memory.perf.spec.js', //Do not run memory tests without proper flags. Shouldn't get here
+      use: {
+        browserName: 'chromium'
+      }
+    }
+  ],
+  reporter: [
+    ['list'],
+    ['junit', { outputFile: '../test-results/results.xml' }],
+    ['json', { outputFile: '../test-results/results.json' }]
+  ]
+};
+
+export default config;
diff --git a/e2e/playwright-performance-prod.config.js b/e2e/playwright-performance-prod.config.js
new file mode 100644
index 00000000000..92976fb48e7
--- /dev/null
+++ b/e2e/playwright-performance-prod.config.js
@@ -0,0 +1,59 @@
+// playwright.config.js
+// @ts-check
+
+/** @type {import('@playwright/test').PlaywrightTestConfig} */
+const config = {
+  retries: 0, //Only for debugging purposes for trace: 'on-first-retry'
+  testDir: 'tests/performance/',
+  testIgnore: '*.contract.perf.spec.js', //Run everything except contract tests which require marks in dev mode
+  timeout: 60 * 1000,
+  workers: 1, //Only run in serial with 1 worker
+  webServer: {
+    command: 'npm run start:prod', //Production mode
+    url: 'http://localhost:8080/#',
+    timeout: 200 * 1000,
+    reuseExistingServer: false //Must be run with this option to prevent dev mode
+  },
+  use: {
+    baseURL: 'http://localhost:8080/',
+    headless: true,
+    ignoreHTTPSErrors: false, //HTTP performance varies!
+    screenshot: 'off',
+    trace: 'on-first-retry',
+    video: 'off'
+  },
+  projects: [
+    {
+      name: 'chrome-memory',
+      testMatch: '*.memory.perf.spec.js', //Only run memory tests
+      use: {
+        browserName: 'chromium',
+        launchOptions: {
+          args: [
+            '--no-sandbox',
+            '--disable-notifications',
+            '--use-fake-ui-for-media-stream',
+            '--use-fake-device-for-media-stream',
+            '--js-flags=--no-move-object-start --expose-gc',
+            '--enable-precise-memory-info',
+            '--display=:100'
+          ]
+        }
+      }
+    },
+    {
+      name: 'chrome',
+      testIgnore: '*.memory.perf.spec.js', //Do not run memory tests without proper flags
+      use: {
+        browserName: 'chromium'
+      }
+    }
+  ],
+  reporter: [
+    ['list'],
+    ['junit', { outputFile: '../test-results/results.xml' }],
+    ['json', { outputFile: '../test-results/results.json' }]
+  ]
+};
+
+export default config;
diff --git a/e2e/playwright-visual-a11y.config.js b/e2e/playwright-visual-a11y.config.js
new file mode 100644
index 00000000000..e0f6810f984
--- /dev/null
+++ b/e2e/playwright-visual-a11y.config.js
@@ -0,0 +1,54 @@
+/* eslint-disable no-undef */
+// playwright.config.js
+// @ts-check
+
+/** @type {import('@playwright/test').PlaywrightTestConfig<{ theme: string }>} */
+const config = {
+  retries: 0, // Visual tests should never retry due to snapshot comparison errors. Leaving as a shim
+  testDir: 'tests/visual-a11y',
+  testMatch: '**/*.visual.spec.js', // only run visual tests
+  timeout: 60 * 1000,
+  workers: 1, //Lower stress on Circle CI Agent for Visual tests https://github.com/percy/cli/discussions/1067
+  webServer: {
+    command: 'npm run start:coverage',
+    url: 'http://localhost:8080/#',
+    timeout: 200 * 1000,
+    reuseExistingServer: !process.env.CI
+  },
+  use: {
+    baseURL: 'http://localhost:8080/',
+    headless: true, // this needs to remain headless to avoid visual changes due to GPU rendering in headed browsers
+    ignoreHTTPSErrors: true,
+    screenshot: 'only-on-failure',
+    trace: 'on-first-retry',
+    video: 'off'
+  },
+  projects: [
+    {
+      name: 'chrome',
+      use: {
+        browserName: 'chromium'
+      }
+    },
+    {
+      name: 'chrome-snow-theme', //Runs the same visual tests but with snow-theme enabled
+      use: {
+        browserName: 'chromium',
+        theme: 'snow'
+      }
+    }
+  ],
+  reporter: [
+    ['list'],
+    ['junit', { outputFile: '../test-results/results.xml' }],
+    [
+      'html',
+      {
+        open: 'on-failure',
+        outputFolder: '../html-test-results' //Must be in different location due to https://github.com/microsoft/playwright/issues/12840
+      }
+    ]
+  ]
+};
+
+export default config;
diff --git a/e2e/playwright-watch.config.js b/e2e/playwright-watch.config.js
new file mode 100644
index 00000000000..bd40be46388
--- /dev/null
+++ b/e2e/playwright-watch.config.js
@@ -0,0 +1,71 @@
+// playwright.config.js
+// @ts-check
+
+import { devices } from '@playwright/test';
+import { fileURLToPath } from 'url';
+
+/** @type {import('@playwright/test').PlaywrightTestConfig} */
+const config = {
+  retries: 0, //Retries are not needed with watch mode
+  testDir: 'tests',
+  timeout: 60 * 1000,
+  webServer: {
+    command: 'npm run start', //Start in dev mode for hot reloading
+    url: 'http://localhost:8080/#',
+    timeout: 200 * 1000,
+    reuseExistingServer: true //This was originally disabled to prevent differences in local debugging vs. CI. However, it significantly speeds up local debugging.
+  },
+  workers: '75%', //Limit to 75% of the CPU to support running with dev server
+  use: {
+    baseURL: 'http://localhost:8080/',
+    headless: true,
+    ignoreHTTPSErrors: true,
+    screenshot: 'only-on-failure',
+    trace: 'on-first-retry',
+    video: 'off'
+  },
+  projects: [
+    {
+      name: 'chrome',
+      testMatch: '**/*.spec.js', // run all tests
+      use: {
+        browserName: 'chromium'
+      }
+    },
+    {
+      name: 'ipad',
+      grep: /@mobile/,
+      use: {
+        storageState: fileURLToPath(
+          new URL('./test-data/display_layout_with_child_layouts.json', import.meta.url)
+        ),
+        browserName: 'webkit',
+        ...devices['iPad (gen 7) landscape'] // Complete List https://github.com/microsoft/playwright/blob/main/packages/playwright-core/src/server/deviceDescriptorsSource.json
+      }
+    },
+    {
+      name: 'iphone',
+      grep: /@mobile/,
+      use: {
+        storageState: fileURLToPath(
+          new URL('./test-data/display_layout_with_child_layouts.json', import.meta.url)
+        ),
+        browserName: 'webkit',
+        ...devices['iPhone 14 Pro'] // Complete List https://github.com/microsoft/playwright/blob/main/packages/playwright-core/src/server/deviceDescriptorsSource.json
+      }
+    }
+  ],
+  reporter: [
+    ['list'],
+    [
+      'html',
+      {
+        open: 'never',
+        outputFolder: '../html-test-results' //Must be in different location due to https://github.com/microsoft/playwright/issues/12840
+      }
+    ],
+    ['junit', { outputFile: '../test-results/results.xml' }]
+  ]
+};
+
+export default config;
diff --git a/e2e/pluginFixtures.js b/e2e/pluginFixtures.js
new file mode 100644
index 00000000000..83ceeb05fc9
--- /dev/null
+++ b/e2e/pluginFixtures.js
@@ -0,0 +1,162 @@
+/* eslint-disable no-undef */
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/**
+ * The file contains custom fixtures which extend the base functionality of the Playwright fixtures
+ * and appActions. These fixtures should be generalized across all plugins.
+ */
+
+// import { createDomainObjectWithDefaults } from './appActions.js';
+import { fileURLToPath } from 'url';
+
+import { expect, request, test } from './baseFixtures.js';
+
+/**
+ * @typedef {Object} ObjectCreateOptions
+ * @property {string} type
+ * @property {string} name
+ */
+
+/**
+ * **NOTE: This feature is a work-in-progress and should not currently be used.**
+ *
+ * Used to create a new domain object as a part of getOrCreateDomainObject.
+ * @type {Map<string, string>}
+ */
+// const createdObjects = new Map();
+
+/**
+ * This action will create a domain object for the test to reference and return the uuid. If an object
+ * of a given name already exists, it will return the uuid of that object to the test instead of creating
+ * a new file. The intent is to move object creation out of test suites which are not explicitly worried
+ * about object creation, while providing a consistent interface to retrieving objects in a persistentContext.
+ * @param {import('@playwright/test').Page} page
+ * @param {ObjectCreateOptions} options
+ * @returns {Promise<string>} uuid of the domain object
+ */
+// async function getOrCreateDomainObject(page, options) {
+//     const { type, name } = options;
+//     const objectName = name ? `${type}:${name}` : type;
+
+//     if (createdObjects.has(objectName)) {
+//         return createdObjects.get(objectName);
+//     }
+
+//     await createDomainObjectWithDefaults(page, type, name);
+
+//     const uuid = getHashUrlToDomainObject(page);
+
+//     createdObjects.set(objectName, uuid);
+
+//     return uuid;
+// }
+
+/**
+ * **NOTE: This feature is a work-in-progress and should not currently be used.**
+ *
+ * If provided, these options will be used to get or create the desired domain object before
+ * any tests or test hooks have run.
+ * The `uuid` of the `domainObject` will then be available to use within the scoped tests.
+ *
+ * ### Example:
+ * ```js
+ * test.describe("My test suite", () => {
+ *    test.use({ objectCreateOptions: { type: "Telemetry Table", name: "My Telemetry Table" }});
+ *    test("'My Telemetry Table' is created and provides a uuid", async ({ page, domainObject }) => {
+ *         const { uuid } = domainObject;
+ *         expect(uuid).toBeDefined();
+ *     }))
+ * });
+ * ```
+ * @type {ObjectCreateOptions}
+ */
+// const objectCreateOptions = null;
+
+/**
+ * The default theme for VIPER and Open MCT is the 'espresso' theme. Overriding this value with 'snow' in our playwright config.js
+ * will override the default theme by injecting the 'snow' theme on launch.
+ *
+ * ### Example:
+ * ```js
+ * projects: [
+ * {
+ *     name: 'chrome-snow-theme',
+ *     use: {
+ *         browserName: 'chromium',
+ *         theme: 'snow'
+ * ```
+ * @type {'snow' | 'espresso'}
+ */
+const theme = 'espresso';
+
+/**
+ * The name of the "My Items" folder in the domain object tree.
+ *
+ * Default: `"My Items"`
+ *
+ * @type {string}
+ */
+const myItemsFolderName = 'My Items';
+
+const extendedTest = test.extend({
+  // This should follow in the Project's configuration. Can be set to 'snow' in playwright config.js
+  theme: [theme, { option: true }],
+  // eslint-disable-next-line no-shadow
+  page: async ({ page, theme }, use, testInfo) => {
+    // eslint-disable-next-line playwright/no-conditional-in-test
+    if (theme === 'snow') {
+      //inject snow theme
+      await page.addInitScript({
+        path: fileURLToPath(new URL('./helper/useSnowTheme.js', import.meta.url))
+      });
+    }
+
+    // Attach info about the currently running test and its project.
+    // This will be used by appActions to fill in the created
+    // domain object's notes.
+    page.testNotes = [`${testInfo.titlePath.join('\n')}`, `${testInfo.project.name}`].join('\n');
+
+    await use(page);
+  },
+  myItemsFolderName: [myItemsFolderName, { option: true }],
+  // eslint-disable-next-line no-shadow
+  openmctConfig: async ({ myItemsFolderName }, use) => {
+    await use({ myItemsFolderName });
+  }
+});
+
+export { expect, request, extendedTest as test };
+
+/**
+ * Takes a readable stream and returns a string.
+ * @param {ReadableStream} readable - the readable stream
+ * @return {Promise<String>} the stringified stream
+ */
+export async function streamToString(readable) {
+  let result = '';
+  for await (const chunk of readable) {
+    result += chunk;
+  }
+
+  return result;
+}
diff --git a/e2e/test-data/ExampleLayouts.json b/e2e/test-data/ExampleLayouts.json
new file mode 100644
index 00000000000..d914c913b47
--- /dev/null
+++ b/e2e/test-data/ExampleLayouts.json
@@ -0,0 +1,2180 @@
+{
+  "openmct": {
+    "45b24009-dfed-4023-a30b-d31f5e3a2d87": {
+      "identifier": {
+        "key": "45b24009-dfed-4023-a30b-d31f5e3a2d87",
+        "namespace": ""
+      },
+      "name": "Open MCT Examples 10-05-22",
+      "type": "folder",
+      "composition": [
+        {
+          "key": "832cd297-38ab-478a-a5ff-f3bfd278e41b",
+          "namespace": ""
+        },
+        {
+          "key": "5f6760b7-85c5-4f90-a8b1-c6ba8382a684",
+          "namespace": ""
+        }
+      ],
+      "modified": 1664993018467,
+      "location": "mine",
+      "persisted": 1664993018469
+    },
+    "832cd297-38ab-478a-a5ff-f3bfd278e41b": {
+      "identifier": {
+        "key": "832cd297-38ab-478a-a5ff-f3bfd278e41b",
+        "namespace": ""
+      },
+      "name": "Display Layout Example 1",
+      "type": "layout",
+      "composition": [
+        {
+          "key": "d78ec1fd-2cea-4b73-8bb6-ba44b09dc3b2",
+          "namespace": ""
+        },
+        {
+          "key": "da187902-64f6-460e-bfbe-c84bd628e126",
+          "namespace": ""
+        },
+        {
+          "key": "03d9a461-8bcd-4821-b405-46b03d6da9b0",
+          "namespace": ""
+        },
+        {
+          "key": "c68ff290-5891-41bd-bfc1-84734fb86a19",
+          "namespace": ""
+        },
+        {
+          "key": "8f72d5f7-7074-4745-9a0b-c5854d31790b",
+          "namespace": ""
+        },
+        {
+          "key": "caf64735-99c2-4906-a2fa-bb47912b2a79",
+          "namespace": ""
+        },
+        {
+          "key": "4b6f1b0d-8a70-4dee-bb6c-36af255bc139",
+          "namespace": ""
+        },
+        {
+          "key": "ee70fbec-2890-4eb5-9e15-15e5890b3138",
+          "namespace": ""
+        },
+        {
+          "key": "152d2a9f-f0f3-408e-bf55-af007840cdef",
+          "namespace": ""
+        },
+        {
+          "key": "6fed1053-3e10-44e3-8e60-4655d19266e0",
+          "namespace": ""
+        },
+        {
+          "key": "e940f59d-e6ef-4a2b-bf82-d81d94627da2",
+          "namespace": ""
+        }
+      ],
+      "configuration": {
+        "items": [
+          {
+            "width": 29,
+            "height": 54,
+            "x": 0,
+            "y": 5,
+            "identifier": {
+              "key": "e230c105-b961-4e01-a056-8f2e8630e185",
+              "namespace": ""
+            },
+            "hasFrame": false,
+            "fontSize": "default",
+            "font": "default",
+            "type": "subobject-view",
+            "id": "e04ae658-c538-464b-a042-363da827717e"
+          },
+          {
+            "stroke": "transparent",
+            "x": 30,
+            "y": 5,
+            "width": 27,
+            "height": 15,
+            "url": "https://s.abcnews.com/images/Technology/mars-rover-2020-illustration-nasa-ht-jc-200305_hpMain_16x9_992.jpg",
+            "type": "image-view",
+            "id": "ed63cc29-80e2-4e2b-a472-3d6d4adbf310"
+          },
+          {
+            "identifier": {
+              "key": "e3131777-c0ef-44f3-9202-4c9c7b864dcc",
+              "namespace": ""
+            },
+            "x": 30,
+            "y": 21,
+            "width": 27,
+            "height": 3,
+            "displayMode": "all",
+            "value": "sin",
+            "stroke": "",
+            "fill": "",
+            "color": "",
+            "fontSize": "default",
+            "font": "default",
+            "type": "telemetry-view",
+            "id": "a212530c-2c8c-4c46-b8e3-62452832d749"
+          },
+          {
+            "identifier": {
+              "key": "6f0c1a8f-cefa-4783-a79e-9f123e8718ba",
+              "namespace": ""
+            },
+            "x": 30,
+            "y": 25,
+            "width": 27,
+            "height": 3,
+            "displayMode": "all",
+            "value": "sin",
+            "stroke": "",
+            "fill": "",
+            "color": "",
+            "fontSize": "default",
+            "font": "default",
+            "type": "telemetry-view",
+            "id": "06c90c9c-6982-4aba-a89d-588530592fa4"
+          },
+          {
+            "width": 27,
+            "height": 30,
+            "x": 30,
+            "y": 29,
+            "identifier": {
+              "key": "8ae9193d-2f79-43bc-a39f-4f89a52da5a3",
+              "namespace": ""
+            },
+            "hasFrame": true,
+            "fontSize": "default",
+            "font": "default",
+            "type": "subobject-view",
+            "id": "b50b1748-ec6f-4ed8-a3d0-065b9f421aed"
+          },
+          {
+            "width": 33,
+            "height": 23,
+            "x": 58,
+            "y": 5,
+            "identifier": {
+              "key": "8f72d5f7-7074-4745-9a0b-c5854d31790b",
+              "namespace": ""
+            },
+            "hasFrame": true,
+            "fontSize": "default",
+            "font": "default",
+            "type": "subobject-view",
+            "id": "bbb714a8-545e-460e-85e8-43a70fa2fd80"
+          },
+          {
+            "width": 39,
+            "height": 10,
+            "x": 92,
+            "y": 49,
+            "identifier": {
+              "key": "cdbbaf4f-ddaf-42c3-8e5e-51aef81d665d",
+              "namespace": ""
+            },
+            "hasFrame": true,
+            "fontSize": "default",
+            "font": "default",
+            "type": "subobject-view",
+            "id": "1a52971a-60c3-4bfa-900d-3344f2703e2c"
+          },
+          {
+            "width": 15,
+            "height": 4,
+            "x": 52,
+            "y": 0,
+            "identifier": {
+              "key": "d776581d-443c-47e4-9d5a-f04950842981",
+              "namespace": ""
+            },
+            "hasFrame": false,
+            "fontSize": "default",
+            "font": "default",
+            "type": "subobject-view",
+            "id": "d627e236-b63a-48d0-b12d-942ab9594b98"
+          },
+          {
+            "width": 39,
+            "height": 43,
+            "x": 92,
+            "y": 5,
+            "identifier": {
+              "key": "136523e4-ae71-4ebd-bd75-5394855d7708",
+              "namespace": ""
+            },
+            "hasFrame": true,
+            "fontSize": "default",
+            "font": "default",
+            "type": "subobject-view",
+            "id": "da2dfd37-84d3-4b4d-98f4-133a565b6a2c"
+          },
+          {
+            "width": 33,
+            "height": 30,
+            "x": 58,
+            "y": 29,
+            "identifier": {
+              "key": "152d2a9f-f0f3-408e-bf55-af007840cdef",
+              "namespace": ""
+            },
+            "hasFrame": true,
+            "fontSize": "default",
+            "font": "default",
+            "type": "subobject-view",
+            "id": "35d4375c-8e2b-4feb-896c-c76b1a9b5c9e"
+          },
+          {
+            "width": 19,
+            "height": 4,
+            "x": 16,
+            "y": 0,
+            "identifier": {
+              "key": "6fed1053-3e10-44e3-8e60-4655d19266e0",
+              "namespace": ""
+            },
+            "hasFrame": false,
+            "fontSize": "default",
+            "font": "default",
+            "type": "subobject-view",
+            "id": "09683b4b-474a-479b-bc47-6105c78e14e7"
+          },
+          {
+            "fill": "",
+            "stroke": "",
+            "color": "",
+            "x": 0,
+            "y": 0,
+            "width": 15,
+            "height": 4,
+            "text": "MISSION TIME",
+            "fontSize": "20",
+            "font": "default",
+            "type": "text-view",
+            "id": "b9321c44-0c82-4687-b115-948678276e62"
+          },
+          {
+            "width": 15,
+            "height": 4,
+            "x": 36,
+            "y": 0,
+            "identifier": {
+              "key": "a07a2210-5c85-4fa7-8f83-14979fbf0beb",
+              "namespace": ""
+            },
+            "hasFrame": false,
+            "fontSize": "default",
+            "font": "default",
+            "type": "subobject-view",
+            "id": "ac0d7eb1-b485-458f-bd2a-a63aa87a3a8a"
+          }
+        ],
+        "layoutGrid": [10, 10],
+        "objectStyles": {
+          "ed63cc29-80e2-4e2b-a472-3d6d4adbf310": {
+            "staticStyle": {
+              "style": {
+                "imageUrl": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxAQEBUPEBIVFRUVFQ8PFRUVFhUVFRUVFRUWFhUVFRUYHSggGBolHRUVITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0OFQ8QFysdHR0rMC0rLS0tLTArLSsrLS4rKzEtLS0tLS0rKy0tKy0tLSsuKy4rLS0tKy0tLS0rKysrOP/AABEIAKgBLAMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAAAQIDBAUGB//EADsQAAIBAgQCCAQFAwIHAAAAAAABAgMRBBIhMQVRBhNBYXGBkaEiMrHBFCNC0fBScoIH4RUWU2KDkvH/xAAYAQEBAQEBAAAAAAAAAAAAAAAAAQIDBP/EACERAQEBAQABBAMBAQAAAAAAAAABEQISAxMhMUFRYSJC/9oADAMBAAIRAxEAPwD4eA0hFAAAAwEADAAAAAAAAAAEMAEAwAQDEADEMAAAAAACgABpAIdhgUIYWHYIVgGACAYgpWAYECAAsBEYgIAYhgIBiAYJAIBgIAGAXEAwEMAAQAMDbQ4ZOdNVE0k5Tgr3XyqLbv8A5GjBcIq16KdNJuMqsrN2zK0VZd94smjkjBoCgABpFAFh2AoLAOw7ARsMdh2KhAOw7ARAkFhgiA7BYCNgJWFYCIxgRVQDAyAAABAMAEAAAxAAAAxAAAAASi7O7V+4iX4LDSq1IUo7zlGC82B0MQ6ippRbVKr+YorRafDKy5pqcb9uvM+g9HuHRhBZYtaJK+u3aX4r/TPF4JxjVrKrh4xk4zinLqk3eTUbXvd5rXs9b23Wno/wqtRlJVK9OpBSnFLSNRNOy+GW0fN7m+eLms2vC9PeBdTUWIi1lquzVrNTtdu3J2v43PKZT3PSLC8TxK6urSuoXrZYJSaS+HM2uz4tF3nk54SUXZpp8mrP0ZrwprHlHY1LDPkP8Ox4U1lsGU1dQHUjxNZso8po6oXVjxFGUdi7ILIMFWULFuUWUYK7BYsyisMELCsTsFiKrsFidhWAhYCVgJgoAAMKBAADEAAAAADEMQAAAAAAAa8LgnOLqbJXS72rXS8FJM70eiM5YSGJpz/MlqqTtdxausjv8zXYc2ipdRGjGPxSzT79db+GWMX5HseIYqvhqipU5OEYwopR00+CKb5a2uakS16b/TPprJ4dYTEScoxWWObW1tou/Yd7F4XDzjKplckmlZSaer3VvqfIKmJVDE1Gr3k41GmmrZ4xm7J83K67mj23BeJylRqNvROmrd9/2Z6+edmxx6+EeJpZbxdSNRKtCLUvgy1I5G5R/VJRvZ7a7HoOE8A4Zj8NH8p0q1OMKTbleU8sUnOT/U2+3c4deopC4diXSneLsdLxs+GZ0q4t0OVJvLqjz2I4Pl7D6NLHqpHU5GNoJkn9NeBq4C3YZp4U9bicKjm1sMW8xqdPPSoFbpHZqUDPOiYvLWuY6RFwN8qRVKmYvLTG4EcprdMg4GbBmyicS9xIuJnFUOJFxL3Ei4kFNhWLconEgqsKxY0KxBjEMDm0QDABAOwgAAAAAYWAAN0cJBdrk/KK+7fsaqas1GKUL22Vna19Xv6s6T0r+fhNc2OFn2q392ntu/I24HhSnrKTavZ5V3X0b3ItnR4Z8v8AnL2jH9zXXpTmamuhgqapZ3CpJOdOVF3g2owmrTirKyurK/cdGeJzyjKq6U7JbycJSfY5X3ty+phhU+n8+5dGp7O30JEX4rARr1JVqtPO5ZdYyf6YqK1jLlGK8jThXKlhauZWcq0IpbNpXd7eSME+r0vGPojo8IwSl8U03BNtJvS72S7tjv6dxiunT4dNwU09HFSV1a91ey1MUKx1ni9d7PwTyrlZ6MFll81Oi/8ABxfrGSO86/bGM+HxJoda4PDU2nanldnZxqSettPhktr95zYVi/aY01tTDWpmh1CqbBHPq0jLUpHSqIzVIma3HOnTKZ0zfOBROJzrUYZQK5QNkolUomK0yOJBxNMokHE52qzOJFxNDiQcTOihxItFziRaJopcRWLXEjYmq5gElTb7PdFiw0vD3+lzCqQL1Rj2yflH92voN0qfY5ewGcRa6S7JeuhCVNrsAQER3AZOgryXj9NSu5owS+LwT/Y1xN6hW4jN3JMgz3YwidXh0fy13yqP2gvscyx18Ivy6fhN9n9cl9jPqz/KNMGWwWnuyqD+/wBS+zu+768vc88ElH6XOvhdFCV3puru3ocuS1Vu9e7NuHnol5nXlmtUtHoy2M9ClvYcHr4fY7ystlKraUW+xwb9UcjNlbi+xuPo7HSh89v5pocbHztWn3yc/KfxL6mp0mNcag85hhVLVUJejF0mVSDOQcjnempEJoomi+TKpHO9NSKJIplE6FPBVJ7Rfi9F7mmnwXtqVFHuisz+yRzvTThNFckenXC8PF65n/c7fQ2YaVCD+Cmrrtsl6vdnO9NPIUsBVn8tOT78rt67GilwDES1cVFbfE19rnp6mO1t28rFX4iW19PV+S7DPkOJS6NSfzVErcot+7aNlHotSau5zl3Ky9dDo0qsX3+Ip1G9NSaMv/L+FhrJX5XlJl64Xh1tRhbvWvuEZc5eisNVF2t+5NV84dn2DghSTEqnNAOVMqdP/wCl8ZpjlTAyuK5/YFCS2LZR7iENAFlv8y+z9RSw3J+TL4vmWxsUc2dNrdGrh63fgjWgcUtkueh09Kf6iUmxA2NHtjASOzRj8FNf9jfrUm/uchHSdRQjG938ENlz15mfX+OYNNMvpPV+FvdfsYsNXjN5VdXtuv2O5xDhVTDWdVpJ2s0ptWdn2RPNCqIfz7/Quw99E91p/PJIpwyVTN1LUlHLf5lbNtvFcpehdCjUTzNLW3abjNbf5sizDvK1K12ndcr9mnbrZ+RmlUyRzTVrXbemi0sV0+LUP+rBf5JO3ba7OnkmOnQaS8FL1VmvdI4HHllr/wB0KcvSORr1gzs4CtGu+royjOVnJRjKLdllWyZzOmeFnRqUushKEnTkrSVnlUm0/PM/Ql6WRz4VC6NQ59Ft6JN+Bvo4aW8mo+O5jzXFimXUaM57LTm9F6joqnHsv3v9tidTHrYxe1xpp4CK+aV/DReu/wBC5OlD5Ur9y19XqcmWKb1IOs2YvTWOtUx0dtblDxHfbw/c56mv92JVIJ6sxqt0aut2wlVXYm/OyMTxsVsrmSpOUv1NLlHT3IOnOuk9WOGJOVDKv99S38Ql2gdB4iX7IOulzOV+Jv8AYX4h9rIOnGtYnGuzkxrD65cwPOykRlLQWZizdxcVFOxfTkVacg0LgulETiytSJqYwSUe4FT5Dzk4+JZymiOZFsP7U7+w435/QvjJLex055qWrqfC5OCd7Sla3wx0vtujvdFuFRjVyV1KrJ/HClGKp5nFawlPk156GPjWLSjTjTX9K0bfJdp1a2GhQrRxFOUFUpzVSL6p9j2bvs9U+5nS5P6y2Yrozh6eInWxE3Cn1XWKlGUIycpznkUVOom4RSs2tbpXPBYqgpVJdW5Zb7N89tdT3nSXjC4oljKdNU6co9VGFSphoyvByzS/MadrtrTkeY6IYDrMRVp1Jxp5XbNKDqxvmatHK7Nabp2OP219HwbCSvbLd2Tu3F2Tbtqmet4fRnN06VSMZwjUhNwaeVxi3mjo1ozpYjhWFwE6VatW62M6dWOWjh+pk5Zqbirzl8S+Z37Ld5bg+lOFdVSjhZreNusW7lzyvQ68Rjpk43Cgqk/w+HhRjFUYvLdZ23N7NvZL3Zzet1NPTjjkFBTp4ecVKUYueZSi5JStHZc2/I8PPpLNX+Ffx+xfKc/CZr21HqpxnCtBzg4TvFSyvROV0+atp376XPL8X6I1KKbptzg7TTas2rN/EuxpN9252+gFeWOqygoNuOXMoq7s738rJrzPecYWHg44ac4xqu9WNN2VRpxnmlkeuXKp93wk66lmrJY+JYKrWwlSNalNwnG+WSyytdNPR3T0b3Rq4t0gxOMnGpiqrrShHJFyjCNo3va0Ipb8zrcfoxcG76q36bbtbcjytSNjHfNlal1uXEZpWTSXJKxJY+XccvOSjUMK6n4mT3Y1WfP2Oaqv8sPrSK6Drd7F1rMSrskq75kGvMxMzdfLmyLqvvA1OYs/eZesH1ncTFaHMi5FHWdwOp3BFzmRlMpcwzsotu+fsTsv4mZ88hqUuZMHMykkSyBlZ0xNK40NRZJXLgSiTjTfIFJklUfM1MRZDCye0WaaXDKr2j6uK+rMirvmJ15f1M3LzE+XWhwPEPZU/OrSX1kU4jg9aPzSor/z0ftI5cqr5lTkS9z9Eldb8VkcHNxeS3yTjO7W2z7l2kcZxlzTSurpq77O/c5NwOfkuO/wXj0qVBYfM45ak6kXe11UUFKL07HBNf3SN8OOwlJN1mraX/Mu/RPTz7WeSRdSoylsi89WFj0PEuPzqVVaTqRhpHM5Nduquk1uwocXlF5sq3vv33MeE4NXlqo+6NNXgtaKu8v/ALI78+X3jnc+mTjXE5V5ZnFLRRtZPZt3zNX7djjz1N2IwzTs2vUrhgHLaS9Uce5bW5kPhONdCebVpqzSbT02ejX8Z3qXSSnGTrZZda4SoxdrqMJfM23K7k1eK7EpS56cyj0erT+VxfmaY9Dsa9VTb8BOOs+jyijFcRnV0Sdr3em77O1keqm18r9GXvovj4a9TPyTLqT4hR3jUXirm5L/ANSs7+nLqUJL9L9ClwfI9NT45itpe8S6GNz/ADxg/GKL7fN+qeVeSuxqR7OHC6VTsgvYtXQ1z+WUfUX0anuR4lSHmPZVOgGJ3iovwZgr9DcVDek/KzM+3WvKPO5kGh0q3A60PmpyXkzLPBSW6fozN5v6XWe4XJuiyLgTFIQxXQwIWpLMGYmBahdhmDMMGbMwzMQE1UrsakQuNMaJ3AgJsaYmRZDODkTQ2hWFcaIGo9yLYUBQiaaRqFXYbCJnWw+FS7Dn0p2NdPEtHbnI53XQTcdk/Uy4rFvZkXimZ69e5u9MyMGKqXMirWZqrNMxzijh1XSN2Hx7Xadzh/H5w+WbXgzyNicZtF59SwvMr6pwzp3WhZOamt7TSf2PS4TpzQqK1ShBX3cVf2Z8Op4l8zTTxrXa15m/cl+4x419mxVXAV9bKPcowXuo3Zw8dwGg23Tn6pHgaPFZL9RthxyXM6T1OWbzXZr8Icfll6GVyr09psyf8ab7SufErlvfP4JL+XQjx/Ew2qSXg2XQ6Y4hbzk/FnCniUzPOaMXutTl6ldL5v5nfxRCpx2nPeMeWyPJTZTJk92w8I9RVxNCX6ImOtCk9oo4HWMOvlzM31NXxdOrQgZp0I9hm/EyE8QzOxcqcqXeVuAdcJ1CNFYQ8wrkGYVwAyouK4AQK4rgAAIAIGicQAotiWwlYAKLo1GTVWXMANspdfLmVzqAA0Z5yKJMAM1YrYXADKhMkmAANSZJTYAUWRqssVVgBdE1VYdaMC6hdYJzAAIZhZgAgVwEAAxDAKiAAB//2Q=="
+              }
+            }
+          }
+        }
+      },
+      "modified": 1664992567772,
+      "location": "45b24009-dfed-4023-a30b-d31f5e3a2d87",
+      "persisted": 1664992594970
+    },
+    "5f6760b7-85c5-4f90-a8b1-c6ba8382a684": {
+      "identifier": {
+        "key": "5f6760b7-85c5-4f90-a8b1-c6ba8382a684",
+        "namespace": ""
+      },
+      "name": "Flexible Layout Example 1",
+      "type": "flexible-layout",
+      "configuration": {
+        "containers": [
+          {
+            "id": "3c8aedca-7413-494a-b389-a4d657c7103c",
+            "frames": [
+              {
+                "id": "19cd7f7d-3cc6-4c97-b832-e178b2c75602",
+                "domainObjectIdentifier": {
+                  "key": "cdbbaf4f-ddaf-42c3-8e5e-51aef81d665d",
+                  "namespace": ""
+                },
+                "size": 10,
+                "noFrame": false
+              },
+              {
+                "id": "8dd99a22-99a9-4e0c-8384-4e5072f11c74",
+                "domainObjectIdentifier": {
+                  "key": "1c96da17-bce6-4ddf-bde0-70a5031f9399",
+                  "namespace": ""
+                },
+                "size": 30,
+                "noFrame": false
+              },
+              {
+                "id": "27918937-a5f7-48f3-8c97-ad904da6f885",
+                "domainObjectIdentifier": {
+                  "key": "8ae9193d-2f79-43bc-a39f-4f89a52da5a3",
+                  "namespace": ""
+                },
+                "size": 30,
+                "noFrame": false
+              },
+              {
+                "id": "872e1cc1-a955-40f9-a67a-d65aca32d420",
+                "domainObjectIdentifier": {
+                  "key": "c03cbe46-c5f0-40a8-a703-813ad663e900",
+                  "namespace": ""
+                },
+                "size": 30,
+                "noFrame": false
+              }
+            ],
+            "size": 18
+          },
+          {
+            "id": "3c3f9f05-112e-433b-a6f2-c01bbc6a8f4d",
+            "frames": [
+              {
+                "id": "fd1aea5b-6fe8-40fe-b315-e8313a37d56e",
+                "domainObjectIdentifier": {
+                  "key": "e230c105-b961-4e01-a056-8f2e8630e185",
+                  "namespace": ""
+                },
+                "size": 59,
+                "noFrame": false
+              },
+              {
+                "id": "b9bdc867-492e-4c6f-b963-813908e3a259",
+                "domainObjectIdentifier": {
+                  "key": "136523e4-ae71-4ebd-bd75-5394855d7708",
+                  "namespace": ""
+                },
+                "size": 37,
+                "noFrame": false
+              }
+            ],
+            "size": 66
+          },
+          {
+            "id": "2f145353-b742-4172-b07d-7e2bb8ce17fc",
+            "frames": [
+              {
+                "id": "7d6a2b96-ff11-47ec-a690-0495c7525ff9",
+                "domainObjectIdentifier": {
+                  "key": "d776581d-443c-47e4-9d5a-f04950842981",
+                  "namespace": ""
+                },
+                "size": 5,
+                "noFrame": true
+              },
+              {
+                "id": "5f9b34f9-db81-48fc-84e2-2a1709ecc065",
+                "domainObjectIdentifier": {
+                  "key": "a07a2210-5c85-4fa7-8f83-14979fbf0beb",
+                  "namespace": ""
+                },
+                "size": 5,
+                "noFrame": true
+              },
+              {
+                "id": "c22e76f8-fc29-4685-a5a8-ff088c2ee3ee",
+                "domainObjectIdentifier": {
+                  "key": "4ae303e9-8edb-490b-93c3-cfaadfcdb64a",
+                  "namespace": ""
+                },
+                "size": 45,
+                "noFrame": false
+              },
+              {
+                "id": "c6426188-aec7-466c-a800-10653a3fade6",
+                "domainObjectIdentifier": {
+                  "key": "2a84d91e-8612-43ed-9477-61b9cfbf5c2c",
+                  "namespace": ""
+                },
+                "size": 45,
+                "noFrame": false
+              }
+            ],
+            "size": 16
+          }
+        ],
+        "rowsLayout": false,
+        "objectStyles": {}
+      },
+      "composition": [
+        {
+          "key": "cdbbaf4f-ddaf-42c3-8e5e-51aef81d665d",
+          "namespace": ""
+        },
+        {
+          "key": "1c96da17-bce6-4ddf-bde0-70a5031f9399",
+          "namespace": ""
+        },
+        {
+          "key": "8ae9193d-2f79-43bc-a39f-4f89a52da5a3",
+          "namespace": ""
+        },
+        {
+          "key": "4ae303e9-8edb-490b-93c3-cfaadfcdb64a",
+          "namespace": ""
+        },
+        {
+          "key": "2a84d91e-8612-43ed-9477-61b9cfbf5c2c",
+          "namespace": ""
+        },
+        {
+          "key": "c03cbe46-c5f0-40a8-a703-813ad663e900",
+          "namespace": ""
+        },
+        {
+          "key": "e230c105-b961-4e01-a056-8f2e8630e185",
+          "namespace": ""
+        },
+        {
+          "key": "136523e4-ae71-4ebd-bd75-5394855d7708",
+          "namespace": ""
+        },
+        {
+          "key": "d776581d-443c-47e4-9d5a-f04950842981",
+          "namespace": ""
+        },
+        {
+          "key": "a07a2210-5c85-4fa7-8f83-14979fbf0beb",
+          "namespace": ""
+        }
+      ],
+      "modified": 1664992971253,
+      "location": "45b24009-dfed-4023-a30b-d31f5e3a2d87",
+      "persisted": 1664992976071
+    },
+    "d78ec1fd-2cea-4b73-8bb6-ba44b09dc3b2": {
+      "identifier": {
+        "key": "d78ec1fd-2cea-4b73-8bb6-ba44b09dc3b2",
+        "namespace": ""
+      },
+      "type": "telemetry.plot.stacked",
+      "composition": [
+        {
+          "key": "017ddbe2-1bec-46d2-acc9-5c2ad8fad79d",
+          "namespace": ""
+        },
+        {
+          "key": "b5c72c1c-03fc-42d5-97c4-a34c7dacf872",
+          "namespace": ""
+        },
+        {
+          "key": "b95ad884-7c92-4789-b6e0-e8e90155482e",
+          "namespace": ""
+        },
+        {
+          "key": "10532581-1b49-438f-a2fe-843d412bf201",
+          "namespace": ""
+        }
+      ],
+      "configuration": {
+        "series": [
+          {
+            "identifier": {
+              "key": "6f0c1a8f-cefa-4783-a79e-9f123e8718ba",
+              "namespace": ""
+            },
+            "series": {
+              "markers": true
+            }
+          }
+        ],
+        "yAxis": {},
+        "xAxis": {}
+      },
+      "name": "Merged Telemetry Views",
+      "location": "832cd297-38ab-478a-a5ff-f3bfd278e41b",
+      "persisted": 1658875540107,
+      "modified": 1658875512306
+    },
+    "da187902-64f6-460e-bfbe-c84bd628e126": {
+      "identifier": {
+        "key": "da187902-64f6-460e-bfbe-c84bd628e126",
+        "namespace": ""
+      },
+      "name": "SWG Large",
+      "type": "generator",
+      "telemetry": {
+        "period": 10,
+        "amplitude": "1000000",
+        "offset": 0,
+        "dataRateInHz": "5",
+        "phase": 0,
+        "randomness": 0
+      },
+      "location": "832cd297-38ab-478a-a5ff-f3bfd278e41b",
+      "modified": 1657232414748,
+      "persisted": 1657232414748
+    },
+    "03d9a461-8bcd-4821-b405-46b03d6da9b0": {
+      "identifier": {
+        "key": "03d9a461-8bcd-4821-b405-46b03d6da9b0",
+        "namespace": ""
+      },
+      "name": "SWG Small",
+      "type": "generator",
+      "telemetry": {
+        "period": "5",
+        "amplitude": "5",
+        "offset": 0,
+        "dataRateInHz": "5",
+        "phase": 0,
+        "randomness": 0
+      },
+      "modified": 1657232414746,
+      "location": "832cd297-38ab-478a-a5ff-f3bfd278e41b",
+      "persisted": 1657232414746
+    },
+    "c68ff290-5891-41bd-bfc1-84734fb86a19": {
+      "identifier": {
+        "key": "c68ff290-5891-41bd-bfc1-84734fb86a19",
+        "namespace": ""
+      },
+      "name": "Gauge Needle Dial SWG Large",
+      "type": "gauge",
+      "composition": [
+        {
+          "key": "135df6d8-080a-40b8-89b0-301c96174e18",
+          "namespace": ""
+        }
+      ],
+      "configuration": {
+        "gaugeController": {
+          "gaugeType": "dial-needle",
+          "isDisplayMinMax": true,
+          "isDisplayCurVal": true,
+          "isDisplayUnits": true,
+          "isUseTelemetryLimits": false,
+          "limitLow": -1000000,
+          "limitHigh": 1000000,
+          "max": 2000000,
+          "min": -2000000,
+          "precision": 2
+        },
+        "objectStyles": {
+          "staticStyle": {
+            "style": {
+              "backgroundColor": "__no_value",
+              "border": "",
+              "color": ""
+            }
+          },
+          "styles": [],
+          "selectedConditionId": ""
+        }
+      },
+      "location": "832cd297-38ab-478a-a5ff-f3bfd278e41b",
+      "modified": 1658421115305,
+      "persisted": 1658421118049
+    },
+    "8f72d5f7-7074-4745-9a0b-c5854d31790b": {
+      "identifier": {
+        "key": "8f72d5f7-7074-4745-9a0b-c5854d31790b",
+        "namespace": ""
+      },
+      "type": "table",
+      "composition": [
+        {
+          "key": "f4da3027-8296-4faf-b8c1-30b8919c53f4",
+          "namespace": ""
+        }
+      ],
+      "configuration": {
+        "columnWidths": {},
+        "hiddenColumns": {
+          "yesterday": true,
+          "wavelengths": true,
+          "wavelengths-unit": true,
+          "cos": true,
+          "cos-unit": true,
+          "intensities": true
+        },
+        "columnOrder": [],
+        "cellFormat": {},
+        "autosize": true
+      },
+      "name": "SWG Small",
+      "location": "832cd297-38ab-478a-a5ff-f3bfd278e41b",
+      "persisted": 1657660214977,
+      "modified": 1657660199738
+    },
+    "caf64735-99c2-4906-a2fa-bb47912b2a79": {
+      "identifier": {
+        "key": "caf64735-99c2-4906-a2fa-bb47912b2a79",
+        "namespace": ""
+      },
+      "name": "Gauge Meter Horz SWG Small",
+      "type": "gauge",
+      "composition": [
+        {
+          "key": "7ef88d73-8a2d-4b8f-92de-6abb76dd02e9",
+          "namespace": ""
+        }
+      ],
+      "configuration": {
+        "gaugeController": {
+          "gaugeType": "meter-horizontal",
+          "isDisplayMinMax": true,
+          "isDisplayCurVal": true,
+          "isDisplayUnits": true,
+          "isUseTelemetryLimits": false,
+          "limitLow": -4.8,
+          "limitHigh": 4,
+          "max": 4.3,
+          "min": -5,
+          "precision": 2
+        }
+      },
+      "location": "832cd297-38ab-478a-a5ff-f3bfd278e41b",
+      "modified": 1657232414736,
+      "persisted": 1657232414736
+    },
+    "4b6f1b0d-8a70-4dee-bb6c-36af255bc139": {
+      "identifier": {
+        "key": "4b6f1b0d-8a70-4dee-bb6c-36af255bc139",
+        "namespace": ""
+      },
+      "name": "CW 210",
+      "type": "conditionWidget",
+      "configuration": {
+        "objectStyles": {
+          "styles": [
+            {
+              "conditionId": "6248211a-5164-4657-8c86-3484601d5e3c",
+              "style": {
+                "isStyleInvisible": "",
+                "backgroundColor": "#a61c00",
+                "border": "",
+                "color": "#ffffff",
+                "output": ""
+              }
+            },
+            {
+              "conditionId": "80708a88-b282-4524-8160-4e73546bff6a",
+              "style": {
+                "isStyleInvisible": "",
+                "backgroundColor": "#38761d",
+                "border": "",
+                "color": "#00ff00",
+                "output": ""
+              }
+            },
+            {
+              "conditionId": "14d676d6-5a38-4276-9d15-134f0afa6231",
+              "style": {
+                "isStyleInvisible": "",
+                "backgroundColor": "#cc4125",
+                "border": "",
+                "color": "#f3f3f3",
+                "output": ""
+              }
+            },
+            {
+              "conditionId": "7af9f52f-e402-4782-ab28-01d450d506f0",
+              "style": {
+                "isStyleInvisible": "",
+                "backgroundColor": "",
+                "border": "",
+                "color": "",
+                "output": ""
+              }
+            }
+          ],
+          "staticStyle": {
+            "style": {
+              "backgroundColor": "",
+              "border": "",
+              "color": ""
+            }
+          },
+          "selectedConditionId": "7af9f52f-e402-4782-ab28-01d450d506f0",
+          "defaultConditionId": "7af9f52f-e402-4782-ab28-01d450d506f0",
+          "conditionSetIdentifier": {
+            "key": "056bbcb6-1a45-4429-97e6-a8ae74cf55e3",
+            "namespace": ""
+          }
+        },
+        "useConditionSetOutputAsLabel": false
+      },
+      "label": "CW_210 BUS B",
+      "conditionalLabel": "",
+      "modified": 1664992949199,
+      "location": "832cd297-38ab-478a-a5ff-f3bfd278e41b",
+      "persisted": 1664992949199
+    },
+    "ee70fbec-2890-4eb5-9e15-15e5890b3138": {
+      "identifier": {
+        "key": "ee70fbec-2890-4eb5-9e15-15e5890b3138",
+        "namespace": ""
+      },
+      "name": "Example Imagery",
+      "type": "example.imagery",
+      "configuration": {
+        "imageLocation": "",
+        "imageLoadDelayInMilliSeconds": "50000",
+        "imageSamples": [],
+        "layers": [
+          {
+            "source": "dist/imagery/example-imagery-layer-16x9.png",
+            "name": "16:9",
+            "visible": true
+          },
+          {
+            "source": "dist/imagery/example-imagery-layer-safe.png",
+            "name": "Safe",
+            "visible": true
+          },
+          {
+            "source": "dist/imagery/example-imagery-layer-scale.png",
+            "name": "Scale",
+            "visible": true
+          }
+        ]
+      },
+      "telemetry": {
+        "values": [
+          {
+            "name": "Name",
+            "key": "name",
+            "source": "name",
+            "hints": {
+              "priority": 0
+            }
+          },
+          {
+            "name": "Time",
+            "key": "utc",
+            "format": "utc",
+            "hints": {
+              "domain": 2,
+              "priority": 1
+            },
+            "source": "utc"
+          },
+          {
+            "name": "Local Time",
+            "key": "local",
+            "format": "local-format",
+            "hints": {
+              "domain": 1,
+              "priority": 2
+            },
+            "source": "local"
+          },
+          {
+            "name": "Image",
+            "key": "url",
+            "format": "image",
+            "hints": {
+              "image": 1,
+              "priority": 3
+            },
+            "layers": [
+              {
+                "source": "dist/imagery/example-imagery-layer-16x9.png",
+                "name": "16:9",
+                "visible": true
+              },
+              {
+                "source": "dist/imagery/example-imagery-layer-safe.png",
+                "name": "Safe",
+                "visible": true
+              },
+              {
+                "source": "dist/imagery/example-imagery-layer-scale.png",
+                "name": "Scale",
+                "visible": true
+              }
+            ],
+            "source": "url"
+          },
+          {
+            "name": "Image Download Name",
+            "key": "imageDownloadName",
+            "format": "imageDownloadName",
+            "hints": {
+              "imageDownloadName": 1,
+              "priority": 4
+            },
+            "source": "imageDownloadName"
+          }
+        ]
+      },
+      "modified": 1664993420994,
+      "location": "832cd297-38ab-478a-a5ff-f3bfd278e41b",
+      "persisted": 1664993420997
+    },
+    "152d2a9f-f0f3-408e-bf55-af007840cdef": {
+      "identifier": {
+        "key": "152d2a9f-f0f3-408e-bf55-af007840cdef",
+        "namespace": ""
+      },
+      "name": "Gauge Auto Range",
+      "type": "gauge",
+      "composition": [
+        {
+          "key": "4625b5f5-415b-42c6-9d97-4f86d5d7a4ef",
+          "namespace": ""
+        }
+      ],
+      "configuration": {
+        "gaugeController": {
+          "gaugeType": "dial-filled",
+          "isDisplayMinMax": true,
+          "isDisplayCurVal": true,
+          "isDisplayUnits": true,
+          "isUseTelemetryLimits": false,
+          "limitLow": -12,
+          "limitHigh": 12,
+          "max": 15,
+          "min": -15,
+          "precision": 2
+        }
+      },
+      "modified": 1664991952387,
+      "location": "832cd297-38ab-478a-a5ff-f3bfd278e41b",
+      "persisted": 1664991968607
+    },
+    "6fed1053-3e10-44e3-8e60-4655d19266e0": {
+      "identifier": {
+        "key": "6fed1053-3e10-44e3-8e60-4655d19266e0",
+        "namespace": ""
+      },
+      "name": "Mission Time",
+      "type": "timer",
+      "configuration": {
+        "timerFormat": "long",
+        "timestamp": 1664755200000,
+        "timezone": "UTC",
+        "timerState": "started",
+        "fontStyle": {
+          "fontSize": "20",
+          "font": "default"
+        },
+        "objectStyles": {
+          "styles": [],
+          "staticStyle": {
+            "style": {
+              "backgroundColor": "",
+              "border": "",
+              "color": "#ffffff"
+            }
+          },
+          "selectedConditionId": ""
+        }
+      },
+      "modified": 1664992594980,
+      "location": "832cd297-38ab-478a-a5ff-f3bfd278e41b",
+      "persisted": 1664992594980
+    },
+    "e940f59d-e6ef-4a2b-bf82-d81d94627da2": {
+      "identifier": {
+        "key": "e940f59d-e6ef-4a2b-bf82-d81d94627da2",
+        "namespace": ""
+      },
+      "name": "CW 210 2",
+      "type": "conditionWidget",
+      "configuration": {
+        "objectStyles": {
+          "styles": [
+            {
+              "conditionId": "6248211a-5164-4657-8c86-3484601d5e3c",
+              "style": {
+                "isStyleInvisible": "",
+                "backgroundColor": "#cc4125",
+                "border": "",
+                "color": "#f3f3f3",
+                "output": ""
+              }
+            },
+            {
+              "conditionId": "80708a88-b282-4524-8160-4e73546bff6a",
+              "style": {
+                "isStyleInvisible": "",
+                "backgroundColor": "#38761d",
+                "border": "",
+                "color": "#00ff00",
+                "output": ""
+              }
+            },
+            {
+              "conditionId": "7af9f52f-e402-4782-ab28-01d450d506f0",
+              "style": {
+                "isStyleInvisible": "",
+                "backgroundColor": "",
+                "border": "",
+                "color": "",
+                "output": ""
+              }
+            }
+          ],
+          "staticStyle": {
+            "style": {
+              "backgroundColor": "",
+              "border": "",
+              "color": ""
+            }
+          },
+          "selectedConditionId": "7af9f52f-e402-4782-ab28-01d450d506f0",
+          "defaultConditionId": "7af9f52f-e402-4782-ab28-01d450d506f0",
+          "conditionSetIdentifier": {
+            "key": "a62b89ea-0fa0-46c5-beac-53d1009ac48c",
+            "namespace": ""
+          }
+        },
+        "useConditionSetOutputAsLabel": false,
+        "fontStyle": {
+          "fontSize": "default",
+          "font": "default"
+        }
+      },
+      "label": "CW_210 BUS A",
+      "conditionalLabel": "",
+      "location": "832cd297-38ab-478a-a5ff-f3bfd278e41b",
+      "persisted": 1664992949203,
+      "modified": 1664992949203
+    },
+    "cdbbaf4f-ddaf-42c3-8e5e-51aef81d665d": {
+      "identifier": {
+        "key": "cdbbaf4f-ddaf-42c3-8e5e-51aef81d665d",
+        "namespace": ""
+      },
+      "name": "Gauge Meter Horz SWG Small",
+      "type": "gauge",
+      "composition": [
+        {
+          "key": "ec3b4a3b-97f0-405e-be5a-d0ac15313df9",
+          "namespace": ""
+        }
+      ],
+      "configuration": {
+        "gaugeController": {
+          "gaugeType": "meter-horizontal",
+          "isDisplayMinMax": true,
+          "isDisplayCurVal": true,
+          "isDisplayUnits": true,
+          "isUseTelemetryLimits": false,
+          "limitLow": -4.8,
+          "limitHigh": 4,
+          "max": 4.3,
+          "min": -5,
+          "precision": 2
+        }
+      },
+      "location": "5f6760b7-85c5-4f90-a8b1-c6ba8382a684",
+      "modified": 1657232414736,
+      "persisted": 1657232414736
+    },
+    "1c96da17-bce6-4ddf-bde0-70a5031f9399": {
+      "identifier": {
+        "key": "1c96da17-bce6-4ddf-bde0-70a5031f9399",
+        "namespace": ""
+      },
+      "name": "Gauge Filled Dial SWG Small",
+      "type": "gauge",
+      "composition": [
+        {
+          "key": "7a87b0a0-8a37-4c59-ac29-4d2861a55110",
+          "namespace": ""
+        }
+      ],
+      "configuration": {
+        "gaugeController": {
+          "gaugeType": "dial-filled",
+          "isDisplayMinMax": true,
+          "isDisplayCurVal": true,
+          "isDisplayUnits": true,
+          "isUseTelemetryLimits": false,
+          "limitLow": -4.8,
+          "limitHigh": 4,
+          "max": 4.3,
+          "min": -5,
+          "precision": 2
+        }
+      },
+      "modified": 1657232414736,
+      "location": "5f6760b7-85c5-4f90-a8b1-c6ba8382a684",
+      "persisted": 1657232414736
+    },
+    "8ae9193d-2f79-43bc-a39f-4f89a52da5a3": {
+      "identifier": {
+        "key": "8ae9193d-2f79-43bc-a39f-4f89a52da5a3",
+        "namespace": ""
+      },
+      "name": "Gauge Needle Dial SWG Large",
+      "type": "gauge",
+      "composition": [
+        {
+          "key": "3984ca34-8512-4857-8a4e-56e9be074e00",
+          "namespace": ""
+        }
+      ],
+      "configuration": {
+        "gaugeController": {
+          "gaugeType": "dial-needle",
+          "isDisplayMinMax": true,
+          "isDisplayCurVal": true,
+          "isDisplayUnits": true,
+          "isUseTelemetryLimits": false,
+          "limitLow": -1000000,
+          "limitHigh": 1000000,
+          "max": 2000000,
+          "min": -2000000,
+          "precision": 2
+        },
+        "objectStyles": {
+          "staticStyle": {
+            "style": {
+              "backgroundColor": "__no_value",
+              "border": "",
+              "color": ""
+            }
+          },
+          "styles": [],
+          "selectedConditionId": ""
+        }
+      },
+      "location": "5f6760b7-85c5-4f90-a8b1-c6ba8382a684",
+      "modified": 1658421115305,
+      "persisted": 1658421118049
+    },
+    "4ae303e9-8edb-490b-93c3-cfaadfcdb64a": {
+      "identifier": {
+        "key": "4ae303e9-8edb-490b-93c3-cfaadfcdb64a",
+        "namespace": ""
+      },
+      "name": "Gauge Meter Vert SWG Large",
+      "type": "gauge",
+      "composition": [
+        {
+          "key": "6c530559-b285-40b3-8e76-52f08c112f34",
+          "namespace": ""
+        }
+      ],
+      "configuration": {
+        "gaugeController": {
+          "gaugeType": "meter-vertical",
+          "isDisplayMinMax": true,
+          "isDisplayCurVal": true,
+          "isDisplayUnits": true,
+          "isUseTelemetryLimits": false,
+          "limitLow": -1000000,
+          "limitHigh": 1000000,
+          "max": 2000000,
+          "min": -2000000,
+          "precision": 2
+        }
+      },
+      "location": "5f6760b7-85c5-4f90-a8b1-c6ba8382a684",
+      "modified": 1657232414737,
+      "persisted": 1657232414737
+    },
+    "2a84d91e-8612-43ed-9477-61b9cfbf5c2c": {
+      "identifier": {
+        "key": "2a84d91e-8612-43ed-9477-61b9cfbf5c2c",
+        "namespace": ""
+      },
+      "name": "Gauge Vertical Meter Inverted",
+      "type": "gauge",
+      "composition": [
+        {
+          "key": "691c802f-c53b-4938-8881-f421d02b2770",
+          "namespace": ""
+        }
+      ],
+      "configuration": {
+        "gaugeController": {
+          "gaugeType": "meter-vertical-inverted",
+          "isDisplayMinMax": true,
+          "isDisplayCurVal": true,
+          "isDisplayUnits": true,
+          "isUseTelemetryLimits": false,
+          "limitLow": -9,
+          "limitHigh": 9,
+          "max": 10,
+          "min": -10,
+          "precision": 2
+        }
+      },
+      "modified": 1664993313837,
+      "location": "5f6760b7-85c5-4f90-a8b1-c6ba8382a684",
+      "persisted": 1664993321002
+    },
+    "c03cbe46-c5f0-40a8-a703-813ad663e900": {
+      "identifier": {
+        "key": "c03cbe46-c5f0-40a8-a703-813ad663e900",
+        "namespace": ""
+      },
+      "name": "SWG 100 Gauge",
+      "type": "gauge",
+      "composition": [
+        {
+          "key": "c1b9f83b-a7db-4047-8dc3-37a2186b9c43",
+          "namespace": ""
+        }
+      ],
+      "configuration": {
+        "gaugeController": {
+          "gaugeType": "dial-needle",
+          "isDisplayMinMax": true,
+          "isDisplayCurVal": true,
+          "isDisplayUnits": true,
+          "isUseTelemetryLimits": false,
+          "limitLow": -20,
+          "limitHigh": 120,
+          "max": 200,
+          "min": -100,
+          "precision": 2
+        },
+        "objectStyles": {}
+      },
+      "modified": 1660006343021,
+      "location": "5f6760b7-85c5-4f90-a8b1-c6ba8382a684",
+      "persisted": 1660006343021
+    },
+    "e230c105-b961-4e01-a056-8f2e8630e185": {
+      "identifier": {
+        "key": "e230c105-b961-4e01-a056-8f2e8630e185",
+        "namespace": ""
+      },
+      "type": "telemetry.plot.stacked",
+      "composition": [
+        {
+          "key": "6f0c1a8f-cefa-4783-a79e-9f123e8718ba",
+          "namespace": ""
+        },
+        {
+          "key": "e3131777-c0ef-44f3-9202-4c9c7b864dcc",
+          "namespace": ""
+        },
+        {
+          "key": "fe903b87-0d52-475b-a858-624fa67c378f",
+          "namespace": ""
+        },
+        {
+          "key": "00326dab-02c5-4522-9f68-e9e73758a272",
+          "namespace": ""
+        }
+      ],
+      "configuration": {
+        "series": [
+          {
+            "identifier": {
+              "key": "6f0c1a8f-cefa-4783-a79e-9f123e8718ba",
+              "namespace": ""
+            },
+            "series": {
+              "markers": true
+            }
+          }
+        ],
+        "yAxis": {},
+        "xAxis": {}
+      },
+      "name": "Merged Telemetry Views",
+      "location": "5f6760b7-85c5-4f90-a8b1-c6ba8382a684",
+      "persisted": 1658875540107,
+      "modified": 1658875512306
+    },
+    "136523e4-ae71-4ebd-bd75-5394855d7708": {
+      "identifier": {
+        "key": "136523e4-ae71-4ebd-bd75-5394855d7708",
+        "namespace": ""
+      },
+      "name": "Example Imagery",
+      "type": "example.imagery",
+      "configuration": {
+        "imageLocation": "",
+        "imageLoadDelayInMilliSeconds": "50000",
+        "imageSamples": [],
+        "layers": [
+          {
+            "source": "dist/imagery/example-imagery-layer-16x9.png",
+            "name": "16:9",
+            "visible": true
+          },
+          {
+            "source": "dist/imagery/example-imagery-layer-safe.png",
+            "name": "Safe",
+            "visible": true
+          },
+          {
+            "source": "dist/imagery/example-imagery-layer-scale.png",
+            "name": "Scale",
+            "visible": true
+          }
+        ]
+      },
+      "telemetry": {
+        "values": [
+          {
+            "name": "Name",
+            "key": "name",
+            "source": "name",
+            "hints": {
+              "priority": 0
+            }
+          },
+          {
+            "name": "Time",
+            "key": "utc",
+            "format": "utc",
+            "hints": {
+              "domain": 2,
+              "priority": 1
+            },
+            "source": "utc"
+          },
+          {
+            "name": "Local Time",
+            "key": "local",
+            "format": "local-format",
+            "hints": {
+              "domain": 1,
+              "priority": 2
+            },
+            "source": "local"
+          },
+          {
+            "name": "Image",
+            "key": "url",
+            "format": "image",
+            "hints": {
+              "image": 1,
+              "priority": 3
+            },
+            "layers": [
+              {
+                "source": "dist/imagery/example-imagery-layer-16x9.png",
+                "name": "16:9",
+                "visible": true
+              },
+              {
+                "source": "dist/imagery/example-imagery-layer-safe.png",
+                "name": "Safe",
+                "visible": true
+              },
+              {
+                "source": "dist/imagery/example-imagery-layer-scale.png",
+                "name": "Scale",
+                "visible": true
+              }
+            ],
+            "source": "url"
+          },
+          {
+            "name": "Image Download Name",
+            "key": "imageDownloadName",
+            "format": "imageDownloadName",
+            "hints": {
+              "imageDownloadName": 1,
+              "priority": 4
+            },
+            "source": "imageDownloadName"
+          }
+        ]
+      },
+      "modified": 1664993420994,
+      "location": "5f6760b7-85c5-4f90-a8b1-c6ba8382a684",
+      "persisted": 1664993420997
+    },
+    "d776581d-443c-47e4-9d5a-f04950842981": {
+      "identifier": {
+        "key": "d776581d-443c-47e4-9d5a-f04950842981",
+        "namespace": ""
+      },
+      "name": "CW 210",
+      "type": "conditionWidget",
+      "configuration": {
+        "objectStyles": {
+          "styles": [
+            {
+              "conditionId": "6248211a-5164-4657-8c86-3484601d5e3c",
+              "style": {
+                "isStyleInvisible": "",
+                "backgroundColor": "#a61c00",
+                "border": "",
+                "color": "#ffffff",
+                "output": ""
+              }
+            },
+            {
+              "conditionId": "80708a88-b282-4524-8160-4e73546bff6a",
+              "style": {
+                "isStyleInvisible": "",
+                "backgroundColor": "#38761d",
+                "border": "",
+                "color": "#00ff00",
+                "output": ""
+              }
+            },
+            {
+              "conditionId": "14d676d6-5a38-4276-9d15-134f0afa6231",
+              "style": {
+                "isStyleInvisible": "",
+                "backgroundColor": "#cc4125",
+                "border": "",
+                "color": "#f3f3f3",
+                "output": ""
+              }
+            },
+            {
+              "conditionId": "7af9f52f-e402-4782-ab28-01d450d506f0",
+              "style": {
+                "isStyleInvisible": "",
+                "backgroundColor": "",
+                "border": "",
+                "color": "",
+                "output": ""
+              }
+            }
+          ],
+          "staticStyle": {
+            "style": {
+              "backgroundColor": "",
+              "border": "",
+              "color": ""
+            }
+          },
+          "selectedConditionId": "7af9f52f-e402-4782-ab28-01d450d506f0",
+          "defaultConditionId": "7af9f52f-e402-4782-ab28-01d450d506f0",
+          "conditionSetIdentifier": {
+            "key": "0e4342e3-06db-4e13-ba48-b391879b37b6",
+            "namespace": ""
+          }
+        },
+        "useConditionSetOutputAsLabel": false
+      },
+      "label": "CW_210 BUS B",
+      "conditionalLabel": "",
+      "modified": 1664992949199,
+      "location": "5f6760b7-85c5-4f90-a8b1-c6ba8382a684",
+      "persisted": 1664992949199
+    },
+    "a07a2210-5c85-4fa7-8f83-14979fbf0beb": {
+      "identifier": {
+        "key": "a07a2210-5c85-4fa7-8f83-14979fbf0beb",
+        "namespace": ""
+      },
+      "name": "CW 210 2",
+      "type": "conditionWidget",
+      "configuration": {
+        "objectStyles": {
+          "styles": [
+            {
+              "conditionId": "6248211a-5164-4657-8c86-3484601d5e3c",
+              "style": {
+                "isStyleInvisible": "",
+                "backgroundColor": "#cc4125",
+                "border": "",
+                "color": "#f3f3f3",
+                "output": ""
+              }
+            },
+            {
+              "conditionId": "80708a88-b282-4524-8160-4e73546bff6a",
+              "style": {
+                "isStyleInvisible": "",
+                "backgroundColor": "#38761d",
+                "border": "",
+                "color": "#00ff00",
+                "output": ""
+              }
+            },
+            {
+              "conditionId": "7af9f52f-e402-4782-ab28-01d450d506f0",
+              "style": {
+                "isStyleInvisible": "",
+                "backgroundColor": "",
+                "border": "",
+                "color": "",
+                "output": ""
+              }
+            }
+          ],
+          "staticStyle": {
+            "style": {
+              "backgroundColor": "",
+              "border": "",
+              "color": ""
+            }
+          },
+          "selectedConditionId": "7af9f52f-e402-4782-ab28-01d450d506f0",
+          "defaultConditionId": "7af9f52f-e402-4782-ab28-01d450d506f0",
+          "conditionSetIdentifier": {
+            "key": "ee7ca7b3-04e2-4c91-b73f-01280a92d1cc",
+            "namespace": ""
+          }
+        },
+        "useConditionSetOutputAsLabel": false,
+        "fontStyle": {
+          "fontSize": "default",
+          "font": "default"
+        }
+      },
+      "label": "CW_210 BUS A",
+      "conditionalLabel": "",
+      "location": "5f6760b7-85c5-4f90-a8b1-c6ba8382a684",
+      "persisted": 1664992949203,
+      "modified": 1664992949203
+    },
+    "056bbcb6-1a45-4429-97e6-a8ae74cf55e3": {
+      "identifier": {
+        "key": "056bbcb6-1a45-4429-97e6-a8ae74cf55e3",
+        "namespace": ""
+      },
+      "name": "210 Condition Set",
+      "type": "conditionSet",
+      "configuration": {
+        "conditionTestData": [],
+        "conditionCollection": [
+          {
+            "id": "6248211a-5164-4657-8c86-3484601d5e3c",
+            "configuration": {
+              "name": "High",
+              "output": "HIGH",
+              "trigger": "any",
+              "criteria": [
+                {
+                  "id": "64e49fe7-5b36-43db-8347-4550b910de4c",
+                  "telemetry": "any",
+                  "operation": "greaterThan",
+                  "input": ["120"],
+                  "metadata": "sin"
+                }
+              ]
+            },
+            "summary": "Match if any criteria are met:  any telemetry Sine  > 120 "
+          },
+          {
+            "id": "80708a88-b282-4524-8160-4e73546bff6a",
+            "configuration": {
+              "name": "Nom",
+              "output": "NOMINAL",
+              "trigger": "any",
+              "criteria": [
+                {
+                  "id": "59f1c4bf-5d36-450c-9668-6546955fc066",
+                  "telemetry": "any",
+                  "operation": "between",
+                  "input": ["120", "-20"],
+                  "metadata": "sin"
+                }
+              ]
+            },
+            "summary": "Match if any criteria are met:  any telemetry Sine  is between 120 and -20 "
+          },
+          {
+            "id": "14d676d6-5a38-4276-9d15-134f0afa6231",
+            "configuration": {
+              "name": "Low",
+              "output": "LOW",
+              "trigger": "any",
+              "criteria": [
+                {
+                  "id": "6707be12-6a6e-4535-bb97-ab5c86f99934",
+                  "telemetry": "any",
+                  "operation": "lessThan",
+                  "input": ["-20"],
+                  "metadata": "sin"
+                }
+              ]
+            },
+            "summary": "Match if any criteria are met:  any telemetry Sine  < -20 "
+          },
+          {
+            "isDefault": true,
+            "id": "7af9f52f-e402-4782-ab28-01d450d506f0",
+            "configuration": {
+              "name": "Default",
+              "output": "Default",
+              "trigger": "all",
+              "criteria": []
+            },
+            "summary": ""
+          }
+        ]
+      },
+      "composition": [
+        {
+          "key": "10987a9e-74ed-4e31-b820-806deadc9425",
+          "namespace": ""
+        }
+      ],
+      "telemetry": {},
+      "modified": 1660006307115,
+      "location": null,
+      "persisted": 1660006307759
+    },
+    "0e4342e3-06db-4e13-ba48-b391879b37b6": {
+      "identifier": {
+        "key": "0e4342e3-06db-4e13-ba48-b391879b37b6",
+        "namespace": ""
+      },
+      "name": "210 Condition Set",
+      "type": "conditionSet",
+      "configuration": {
+        "conditionTestData": [],
+        "conditionCollection": [
+          {
+            "id": "6248211a-5164-4657-8c86-3484601d5e3c",
+            "configuration": {
+              "name": "High",
+              "output": "HIGH",
+              "trigger": "any",
+              "criteria": [
+                {
+                  "id": "64e49fe7-5b36-43db-8347-4550b910de4c",
+                  "telemetry": "any",
+                  "operation": "greaterThan",
+                  "input": ["120"],
+                  "metadata": "sin"
+                }
+              ]
+            },
+            "summary": "Match if any criteria are met:  any telemetry Sine  > 120 "
+          },
+          {
+            "id": "80708a88-b282-4524-8160-4e73546bff6a",
+            "configuration": {
+              "name": "Nom",
+              "output": "NOMINAL",
+              "trigger": "any",
+              "criteria": [
+                {
+                  "id": "59f1c4bf-5d36-450c-9668-6546955fc066",
+                  "telemetry": "any",
+                  "operation": "between",
+                  "input": ["120", "-20"],
+                  "metadata": "sin"
+                }
+              ]
+            },
+            "summary": "Match if any criteria are met:  any telemetry Sine  is between 120 and -20 "
+          },
+          {
+            "id": "14d676d6-5a38-4276-9d15-134f0afa6231",
+            "configuration": {
+              "name": "Low",
+              "output": "LOW",
+              "trigger": "any",
+              "criteria": [
+                {
+                  "id": "6707be12-6a6e-4535-bb97-ab5c86f99934",
+                  "telemetry": "any",
+                  "operation": "lessThan",
+                  "input": ["-20"],
+                  "metadata": "sin"
+                }
+              ]
+            },
+            "summary": "Match if any criteria are met:  any telemetry Sine  < -20 "
+          },
+          {
+            "isDefault": true,
+            "id": "7af9f52f-e402-4782-ab28-01d450d506f0",
+            "configuration": {
+              "name": "Default",
+              "output": "Default",
+              "trigger": "all",
+              "criteria": []
+            },
+            "summary": ""
+          }
+        ]
+      },
+      "composition": [
+        {
+          "key": "1a15f3e4-99a9-4afd-a6fa-dcc822b39cbc",
+          "namespace": ""
+        }
+      ],
+      "telemetry": {},
+      "modified": 1660006307115,
+      "location": null,
+      "persisted": 1660006307759
+    },
+    "a62b89ea-0fa0-46c5-beac-53d1009ac48c": {
+      "identifier": {
+        "key": "a62b89ea-0fa0-46c5-beac-53d1009ac48c",
+        "namespace": ""
+      },
+      "name": "210 Condition Set 2",
+      "type": "conditionSet",
+      "configuration": {
+        "conditionTestData": [],
+        "conditionCollection": [
+          {
+            "id": "6248211a-5164-4657-8c86-3484601d5e3c",
+            "configuration": {
+              "name": "High",
+              "output": "HIGH",
+              "trigger": "any",
+              "criteria": [
+                {
+                  "id": "64e49fe7-5b36-43db-8347-4550b910de4c",
+                  "telemetry": "any",
+                  "operation": "greaterThan",
+                  "input": ["150"],
+                  "metadata": "sin"
+                }
+              ]
+            },
+            "summary": "Match if any criteria are met:  any telemetry Sine  > 150 "
+          },
+          {
+            "id": "80708a88-b282-4524-8160-4e73546bff6a",
+            "configuration": {
+              "name": "Nom",
+              "output": "NOMINAL",
+              "trigger": "any",
+              "criteria": [
+                {
+                  "id": "59f1c4bf-5d36-450c-9668-6546955fc066",
+                  "telemetry": "any",
+                  "operation": "between",
+                  "input": ["50", "-50"],
+                  "metadata": "sin"
+                }
+              ]
+            },
+            "summary": "Match if any criteria are met:  any telemetry Sine  is between 50 and -50 "
+          },
+          {
+            "isDefault": true,
+            "id": "7af9f52f-e402-4782-ab28-01d450d506f0",
+            "configuration": {
+              "name": "Default",
+              "output": "Default",
+              "trigger": "all",
+              "criteria": []
+            },
+            "summary": ""
+          }
+        ]
+      },
+      "composition": [
+        {
+          "key": "b8b2d336-cdc2-42de-bb6b-c2033e691b35",
+          "namespace": ""
+        }
+      ],
+      "telemetry": {},
+      "location": null,
+      "persisted": 1664992259247,
+      "modified": 1664992250791
+    },
+    "ee7ca7b3-04e2-4c91-b73f-01280a92d1cc": {
+      "identifier": {
+        "key": "ee7ca7b3-04e2-4c91-b73f-01280a92d1cc",
+        "namespace": ""
+      },
+      "name": "210 Condition Set 2",
+      "type": "conditionSet",
+      "configuration": {
+        "conditionTestData": [],
+        "conditionCollection": [
+          {
+            "id": "6248211a-5164-4657-8c86-3484601d5e3c",
+            "configuration": {
+              "name": "High",
+              "output": "HIGH",
+              "trigger": "any",
+              "criteria": [
+                {
+                  "id": "64e49fe7-5b36-43db-8347-4550b910de4c",
+                  "telemetry": "any",
+                  "operation": "greaterThan",
+                  "input": ["150"],
+                  "metadata": "sin"
+                }
+              ]
+            },
+            "summary": "Match if any criteria are met:  any telemetry Sine  > 150 "
+          },
+          {
+            "id": "80708a88-b282-4524-8160-4e73546bff6a",
+            "configuration": {
+              "name": "Nom",
+              "output": "NOMINAL",
+              "trigger": "any",
+              "criteria": [
+                {
+                  "id": "59f1c4bf-5d36-450c-9668-6546955fc066",
+                  "telemetry": "any",
+                  "operation": "between",
+                  "input": ["50", "-50"],
+                  "metadata": "sin"
+                }
+              ]
+            },
+            "summary": "Match if any criteria are met:  any telemetry Sine  is between 50 and -50 "
+          },
+          {
+            "isDefault": true,
+            "id": "7af9f52f-e402-4782-ab28-01d450d506f0",
+            "configuration": {
+              "name": "Default",
+              "output": "Default",
+              "trigger": "all",
+              "criteria": []
+            },
+            "summary": ""
+          }
+        ]
+      },
+      "composition": [
+        {
+          "key": "17e8e842-c4f0-4c11-b4c6-e729f4018120",
+          "namespace": ""
+        }
+      ],
+      "telemetry": {},
+      "location": null,
+      "persisted": 1664992259247,
+      "modified": 1664992250791
+    },
+    "7a87b0a0-8a37-4c59-ac29-4d2861a55110": {
+      "identifier": {
+        "key": "7a87b0a0-8a37-4c59-ac29-4d2861a55110",
+        "namespace": ""
+      },
+      "name": "SWG Small",
+      "type": "generator",
+      "telemetry": {
+        "period": "5",
+        "amplitude": "5",
+        "offset": 0,
+        "dataRateInHz": "5",
+        "phase": 0,
+        "randomness": 0
+      },
+      "modified": 1657232414746,
+      "location": "1c96da17-bce6-4ddf-bde0-70a5031f9399",
+      "persisted": 1657232414746
+    },
+    "6c530559-b285-40b3-8e76-52f08c112f34": {
+      "identifier": {
+        "key": "6c530559-b285-40b3-8e76-52f08c112f34",
+        "namespace": ""
+      },
+      "name": "SWG Large",
+      "type": "generator",
+      "telemetry": {
+        "period": 10,
+        "amplitude": "1000000",
+        "offset": 0,
+        "dataRateInHz": "5",
+        "phase": 0,
+        "randomness": 0
+      },
+      "location": "4ae303e9-8edb-490b-93c3-cfaadfcdb64a",
+      "modified": 1657232414748,
+      "persisted": 1657232414748
+    },
+    "4625b5f5-415b-42c6-9d97-4f86d5d7a4ef": {
+      "identifier": {
+        "key": "4625b5f5-415b-42c6-9d97-4f86d5d7a4ef",
+        "namespace": ""
+      },
+      "name": "SWG 10",
+      "type": "generator",
+      "telemetry": {
+        "period": 10,
+        "amplitude": "10",
+        "offset": 0,
+        "dataRateInHz": "5",
+        "phase": 0,
+        "randomness": 0,
+        "loadDelay": 0
+      },
+      "modified": 1657236492163,
+      "location": "152d2a9f-f0f3-408e-bf55-af007840cdef",
+      "persisted": 1657236492163
+    },
+    "017ddbe2-1bec-46d2-acc9-5c2ad8fad79d": {
+      "identifier": {
+        "key": "017ddbe2-1bec-46d2-acc9-5c2ad8fad79d",
+        "namespace": ""
+      },
+      "name": "SWG Small",
+      "type": "generator",
+      "telemetry": {
+        "period": "5",
+        "amplitude": "5",
+        "offset": 0,
+        "dataRateInHz": "5",
+        "phase": 0,
+        "randomness": 0
+      },
+      "modified": 1657232414746,
+      "location": "d78ec1fd-2cea-4b73-8bb6-ba44b09dc3b2",
+      "persisted": 1657232414746
+    },
+    "b5c72c1c-03fc-42d5-97c4-a34c7dacf872": {
+      "identifier": {
+        "key": "b5c72c1c-03fc-42d5-97c4-a34c7dacf872",
+        "namespace": ""
+      },
+      "name": "SWG Large",
+      "type": "generator",
+      "telemetry": {
+        "period": 10,
+        "amplitude": "1000000",
+        "offset": 0,
+        "dataRateInHz": "5",
+        "phase": 0,
+        "randomness": 0
+      },
+      "location": "d78ec1fd-2cea-4b73-8bb6-ba44b09dc3b2",
+      "modified": 1657232414748,
+      "persisted": 1657232414748
+    },
+    "b95ad884-7c92-4789-b6e0-e8e90155482e": {
+      "identifier": {
+        "key": "b95ad884-7c92-4789-b6e0-e8e90155482e",
+        "namespace": ""
+      },
+      "name": "SWG 10",
+      "type": "generator",
+      "telemetry": {
+        "period": 10,
+        "amplitude": "10",
+        "offset": 0,
+        "dataRateInHz": "5",
+        "phase": 0,
+        "randomness": 0,
+        "loadDelay": 0
+      },
+      "modified": 1657236492163,
+      "location": "d78ec1fd-2cea-4b73-8bb6-ba44b09dc3b2",
+      "persisted": 1657236492163
+    },
+    "10532581-1b49-438f-a2fe-843d412bf201": {
+      "identifier": {
+        "key": "10532581-1b49-438f-a2fe-843d412bf201",
+        "namespace": ""
+      },
+      "name": "SWG 100",
+      "type": "generator",
+      "telemetry": {
+        "period": 10,
+        "amplitude": "100",
+        "offset": 0,
+        "dataRateInHz": 1,
+        "phase": 0,
+        "randomness": "1",
+        "loadDelay": 0
+      },
+      "modified": 1657149026977,
+      "location": "d78ec1fd-2cea-4b73-8bb6-ba44b09dc3b2",
+      "persisted": 1657149026977
+    },
+    "c1b9f83b-a7db-4047-8dc3-37a2186b9c43": {
+      "identifier": {
+        "key": "c1b9f83b-a7db-4047-8dc3-37a2186b9c43",
+        "namespace": ""
+      },
+      "name": "SWG 100",
+      "type": "generator",
+      "telemetry": {
+        "period": 10,
+        "amplitude": "100",
+        "offset": 0,
+        "dataRateInHz": 1,
+        "phase": 0,
+        "randomness": "1",
+        "loadDelay": 0
+      },
+      "modified": 1657149026977,
+      "location": "c03cbe46-c5f0-40a8-a703-813ad663e900",
+      "persisted": 1657149026977
+    },
+    "6f0c1a8f-cefa-4783-a79e-9f123e8718ba": {
+      "identifier": {
+        "key": "6f0c1a8f-cefa-4783-a79e-9f123e8718ba",
+        "namespace": ""
+      },
+      "name": "SWG Small",
+      "type": "generator",
+      "telemetry": {
+        "period": "5",
+        "amplitude": "5",
+        "offset": 0,
+        "dataRateInHz": "5",
+        "phase": 0,
+        "randomness": 0
+      },
+      "modified": 1657232414746,
+      "location": "e230c105-b961-4e01-a056-8f2e8630e185",
+      "persisted": 1657232414746
+    },
+    "e3131777-c0ef-44f3-9202-4c9c7b864dcc": {
+      "identifier": {
+        "key": "e3131777-c0ef-44f3-9202-4c9c7b864dcc",
+        "namespace": ""
+      },
+      "name": "SWG Large",
+      "type": "generator",
+      "telemetry": {
+        "period": 10,
+        "amplitude": "1000000",
+        "offset": 0,
+        "dataRateInHz": "5",
+        "phase": 0,
+        "randomness": 0
+      },
+      "location": "e230c105-b961-4e01-a056-8f2e8630e185",
+      "modified": 1657232414748,
+      "persisted": 1657232414748
+    },
+    "fe903b87-0d52-475b-a858-624fa67c378f": {
+      "identifier": {
+        "key": "fe903b87-0d52-475b-a858-624fa67c378f",
+        "namespace": ""
+      },
+      "name": "SWG 10",
+      "type": "generator",
+      "telemetry": {
+        "period": 10,
+        "amplitude": "10",
+        "offset": 0,
+        "dataRateInHz": "5",
+        "phase": 0,
+        "randomness": 0,
+        "loadDelay": 0
+      },
+      "modified": 1657236492163,
+      "location": "e230c105-b961-4e01-a056-8f2e8630e185",
+      "persisted": 1657236492163
+    },
+    "00326dab-02c5-4522-9f68-e9e73758a272": {
+      "identifier": {
+        "key": "00326dab-02c5-4522-9f68-e9e73758a272",
+        "namespace": ""
+      },
+      "name": "SWG 100",
+      "type": "generator",
+      "telemetry": {
+        "period": 10,
+        "amplitude": "100",
+        "offset": 0,
+        "dataRateInHz": 1,
+        "phase": 0,
+        "randomness": "1",
+        "loadDelay": 0
+      },
+      "modified": 1657149026977,
+      "location": "e230c105-b961-4e01-a056-8f2e8630e185",
+      "persisted": 1657149026977
+    },
+    "135df6d8-080a-40b8-89b0-301c96174e18": {
+      "identifier": {
+        "key": "135df6d8-080a-40b8-89b0-301c96174e18",
+        "namespace": ""
+      },
+      "name": "SWG Large",
+      "type": "generator",
+      "telemetry": {
+        "period": 10,
+        "amplitude": "1000000",
+        "offset": 0,
+        "dataRateInHz": "5",
+        "phase": 0,
+        "randomness": 0
+      },
+      "modified": 1657232414747,
+      "location": "c68ff290-5891-41bd-bfc1-84734fb86a19",
+      "persisted": 1657232414747
+    },
+    "3984ca34-8512-4857-8a4e-56e9be074e00": {
+      "identifier": {
+        "key": "3984ca34-8512-4857-8a4e-56e9be074e00",
+        "namespace": ""
+      },
+      "name": "SWG Large",
+      "type": "generator",
+      "telemetry": {
+        "period": 10,
+        "amplitude": "1000000",
+        "offset": 0,
+        "dataRateInHz": "5",
+        "phase": 0,
+        "randomness": 0
+      },
+      "modified": 1657232414747,
+      "location": "8ae9193d-2f79-43bc-a39f-4f89a52da5a3",
+      "persisted": 1657232414747
+    },
+    "f4da3027-8296-4faf-b8c1-30b8919c53f4": {
+      "identifier": {
+        "key": "f4da3027-8296-4faf-b8c1-30b8919c53f4",
+        "namespace": ""
+      },
+      "name": "SWG Small",
+      "type": "generator",
+      "telemetry": {
+        "period": "5",
+        "amplitude": "5",
+        "offset": 0,
+        "dataRateInHz": "5",
+        "phase": 0,
+        "randomness": 0
+      },
+      "modified": 1657232414746,
+      "location": "8f72d5f7-7074-4745-9a0b-c5854d31790b",
+      "persisted": 1657232414746
+    },
+    "7ef88d73-8a2d-4b8f-92de-6abb76dd02e9": {
+      "identifier": {
+        "key": "7ef88d73-8a2d-4b8f-92de-6abb76dd02e9",
+        "namespace": ""
+      },
+      "name": "SWG Small",
+      "type": "generator",
+      "telemetry": {
+        "period": "5",
+        "amplitude": "5",
+        "offset": 0,
+        "dataRateInHz": "5",
+        "phase": 0,
+        "randomness": 0
+      },
+      "modified": 1657232414746,
+      "location": "caf64735-99c2-4906-a2fa-bb47912b2a79",
+      "persisted": 1657232414746
+    },
+    "ec3b4a3b-97f0-405e-be5a-d0ac15313df9": {
+      "identifier": {
+        "key": "ec3b4a3b-97f0-405e-be5a-d0ac15313df9",
+        "namespace": ""
+      },
+      "name": "SWG Small",
+      "type": "generator",
+      "telemetry": {
+        "period": "5",
+        "amplitude": "5",
+        "offset": 0,
+        "dataRateInHz": "5",
+        "phase": 0,
+        "randomness": 0
+      },
+      "modified": 1657232414746,
+      "location": "cdbbaf4f-ddaf-42c3-8e5e-51aef81d665d",
+      "persisted": 1657232414746
+    },
+    "691c802f-c53b-4938-8881-f421d02b2770": {
+      "identifier": {
+        "key": "691c802f-c53b-4938-8881-f421d02b2770",
+        "namespace": ""
+      },
+      "name": "SWG Small",
+      "type": "generator",
+      "telemetry": {
+        "period": "5",
+        "amplitude": "5",
+        "offset": 0,
+        "dataRateInHz": "5",
+        "phase": 0,
+        "randomness": 0
+      },
+      "modified": 1657232414746,
+      "location": "2a84d91e-8612-43ed-9477-61b9cfbf5c2c",
+      "persisted": 1657232414746
+    },
+    "10987a9e-74ed-4e31-b820-806deadc9425": {
+      "identifier": {
+        "key": "10987a9e-74ed-4e31-b820-806deadc9425",
+        "namespace": ""
+      },
+      "name": "SWG 100",
+      "type": "generator",
+      "telemetry": {
+        "period": 10,
+        "amplitude": "100",
+        "offset": 0,
+        "dataRateInHz": 1,
+        "phase": 0,
+        "randomness": "1",
+        "loadDelay": 0
+      },
+      "modified": 1657149026977,
+      "location": "056bbcb6-1a45-4429-97e6-a8ae74cf55e3",
+      "persisted": 1657149026977
+    },
+    "1a15f3e4-99a9-4afd-a6fa-dcc822b39cbc": {
+      "identifier": {
+        "key": "1a15f3e4-99a9-4afd-a6fa-dcc822b39cbc",
+        "namespace": ""
+      },
+      "name": "SWG 100",
+      "type": "generator",
+      "telemetry": {
+        "period": 10,
+        "amplitude": "100",
+        "offset": 0,
+        "dataRateInHz": 1,
+        "phase": 0,
+        "randomness": "1",
+        "loadDelay": 0
+      },
+      "modified": 1657149026977,
+      "location": "0e4342e3-06db-4e13-ba48-b391879b37b6",
+      "persisted": 1657149026977
+    },
+    "b8b2d336-cdc2-42de-bb6b-c2033e691b35": {
+      "identifier": {
+        "key": "b8b2d336-cdc2-42de-bb6b-c2033e691b35",
+        "namespace": ""
+      },
+      "name": "SWG 100",
+      "type": "generator",
+      "telemetry": {
+        "period": 10,
+        "amplitude": "100",
+        "offset": 0,
+        "dataRateInHz": 1,
+        "phase": 0,
+        "randomness": "1",
+        "loadDelay": 0
+      },
+      "location": "a62b89ea-0fa0-46c5-beac-53d1009ac48c",
+      "persisted": 1664992205660,
+      "modified": 1664992205660
+    },
+    "17e8e842-c4f0-4c11-b4c6-e729f4018120": {
+      "identifier": {
+        "key": "17e8e842-c4f0-4c11-b4c6-e729f4018120",
+        "namespace": ""
+      },
+      "name": "SWG 100",
+      "type": "generator",
+      "telemetry": {
+        "period": 10,
+        "amplitude": "100",
+        "offset": 0,
+        "dataRateInHz": 1,
+        "phase": 0,
+        "randomness": "1",
+        "loadDelay": 0
+      },
+      "location": "ee7ca7b3-04e2-4c91-b73f-01280a92d1cc",
+      "persisted": 1664992205660,
+      "modified": 1664992205660
+    }
+  },
+  "rootId": "45b24009-dfed-4023-a30b-d31f5e3a2d87"
+}
diff --git a/e2e/test-data/PerformanceDisplayLayout.json b/e2e/test-data/PerformanceDisplayLayout.json
new file mode 100644
index 00000000000..bf339ae5b40
--- /dev/null
+++ b/e2e/test-data/PerformanceDisplayLayout.json
@@ -0,0 +1,90 @@
+{
+  "openmct": {
+    "b3cee102-86dd-4c0a-8eec-4d5d276f8691": {
+      "identifier": { "key": "b3cee102-86dd-4c0a-8eec-4d5d276f8691", "namespace": "" },
+      "name": "Performance Display Layout",
+      "type": "layout",
+      "composition": [{ "key": "9666e7b4-be0c-47a5-94b8-99accad7155e", "namespace": "" }],
+      "configuration": {
+        "items": [
+          {
+            "width": 32,
+            "height": 18,
+            "x": 12,
+            "y": 9,
+            "identifier": { "key": "9666e7b4-be0c-47a5-94b8-99accad7155e", "namespace": "" },
+            "hasFrame": true,
+            "fontSize": "default",
+            "font": "default",
+            "type": "subobject-view",
+            "id": "23ca351d-a67d-46aa-a762-290eb742d2f1"
+          }
+        ],
+        "layoutGrid": [10, 10]
+      },
+      "modified": 1654299875432,
+      "location": "mine",
+      "persisted": 1654299878751
+    },
+    "9666e7b4-be0c-47a5-94b8-99accad7155e": {
+      "identifier": { "key": "9666e7b4-be0c-47a5-94b8-99accad7155e", "namespace": "" },
+      "name": "Performance Example Imagery",
+      "type": "example.imagery",
+      "configuration": {
+        "imageLocation": "",
+        "imageLoadDelayInMilliSeconds": 20000,
+        "imageSamples": [],
+        "layers": [
+          {
+            "source": "dist/imagery/example-imagery-layer-16x9.png",
+            "name": "16:9",
+            "visible": false
+          },
+          {
+            "source": "dist/imagery/example-imagery-layer-safe.png",
+            "name": "Safe",
+            "visible": false
+          },
+          {
+            "source": "dist/imagery/example-imagery-layer-scale.png",
+            "name": "Scale",
+            "visible": false
+          }
+        ]
+      },
+      "telemetry": {
+        "values": [
+          { "name": "Name", "key": "name" },
+          { "name": "Time", "key": "utc", "format": "utc", "hints": { "domain": 2 } },
+          {
+            "name": "Local Time",
+            "key": "local",
+            "format": "local-format",
+            "hints": { "domain": 1 }
+          },
+          {
+            "name": "Image",
+            "key": "url",
+            "format": "image",
+            "hints": { "image": 1 },
+            "layers": [
+              { "source": "dist/imagery/example-imagery-layer-16x9.png", "name": "16:9" },
+              { "source": "dist/imagery/example-imagery-layer-safe.png", "name": "Safe" },
+              { "source": "dist/imagery/example-imagery-layer-scale.png", "name": "Scale" }
+            ]
+          },
+          {
+            "name": "Image Download Name",
+            "key": "imageDownloadName",
+            "format": "imageDownloadName",
+            "hints": { "imageDownloadName": 1 }
+          }
+        ]
+      },
+      "modified": 1654299840077,
+      "location": "b3cee102-86dd-4c0a-8eec-4d5d276f8691",
+      "persisted": 1654299840078
+    }
+  },
+  "rootId": "b3cee102-86dd-4c0a-8eec-4d5d276f8691"
+}
diff --git a/e2e/test-data/PerformanceNotebook.json b/e2e/test-data/PerformanceNotebook.json
new file mode 100644
index 00000000000..e4a3565d673
--- /dev/null
+++ b/e2e/test-data/PerformanceNotebook.json
@@ -0,0 +1,96 @@
+{
+  "openmct": {
+    "6d2fa9fd-f2aa-461a-a1e1-164ac44bec9d": {
+      "identifier": { "key": "6d2fa9fd-f2aa-461a-a1e1-164ac44bec9d", "namespace": "" },
+      "name": "Performance Notebook",
+      "type": "notebook",
+      "configuration": {
+        "defaultSort": "oldest",
+        "entries": {
+          "3e31c412-33ba-4757-8ade-e9821f6ba321": {
+            "8c8f6035-631c-45af-8c24-786c60295335": [
+              {
+                "id": "entry-1652815305457",
+                "createdOn": 1652815305457,
+                "createdBy": "",
+                "text": "Existing Entry 1",
+                "embeds": []
+              },
+              {
+                "id": "entry-1652815313465",
+                "createdOn": 1652815313465,
+                "createdBy": "",
+                "text": "Existing Entry 2",
+                "embeds": []
+              },
+              {
+                "id": "entry-1652815399955",
+                "createdOn": 1652815399955,
+                "createdBy": "",
+                "text": "Existing Entry 3",
+                "embeds": []
+              }
+            ]
+          }
+        },
+        "imageMigrationVer": "v1",
+        "pageTitle": "Page",
+        "sections": [
+          {
+            "id": "3e31c412-33ba-4757-8ade-e9821f6ba321",
+            "isDefault": false,
+            "isSelected": false,
+            "name": "Section1",
+            "pages": [
+              {
+                "id": "8c8f6035-631c-45af-8c24-786c60295335",
+                "isDefault": false,
+                "isSelected": false,
+                "name": "Page1",
+                "pageTitle": "Page"
+              },
+              {
+                "id": "36555942-c9aa-439c-bbdb-0aaf50db50f5",
+                "isDefault": false,
+                "isSelected": false,
+                "name": "Page2",
+                "pageTitle": "Page"
+              }
+            ],
+            "sectionTitle": "Section"
+          },
+          {
+            "id": "dab0bd1d-2c5a-405c-987f-107123d6189a",
+            "isDefault": false,
+            "isSelected": true,
+            "name": "Section2",
+            "pages": [
+              {
+                "id": "f625a86a-cb99-4898-8082-80543c8de534",
+                "isDefault": false,
+                "isSelected": false,
+                "name": "Page1",
+                "pageTitle": "Page"
+              },
+              {
+                "id": "e77ef810-f785-42a7-942e-07e999b79c59",
+                "isDefault": false,
+                "isSelected": true,
+                "name": "Page2",
+                "pageTitle": "Page"
+              }
+            ],
+            "sectionTitle": "Section"
+          }
+        ],
+        "sectionTitle": "Section",
+        "type": "General",
+        "showTime": "0"
+      },
+      "modified": 1652815915219,
+      "location": "mine",
+      "persisted": 1652815915222
+    }
+  },
+  "rootId": "6d2fa9fd-f2aa-461a-a1e1-164ac44bec9d"
+}
diff --git a/e2e/test-data/display_layout_with_child_layouts.json b/e2e/test-data/display_layout_with_child_layouts.json
new file mode 100644
index 00000000000..899a0e31b31
--- /dev/null
+++ b/e2e/test-data/display_layout_with_child_layouts.json
@@ -0,0 +1,22 @@
+{
+  "cookies": [],
+  "origins": [
+    {
+      "origin": "http://localhost:8080",
+      "localStorage": [
+        {
+          "name": "mct",
+          "value": "{\"mine\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"80d08d10-2f2b-4ebb-847c-2385016718e7\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413601880,\"created\":1732413600900,\"persisted\":1732413601880},\"80d08d10-2f2b-4ebb-847c-2385016718e7\":{\"identifier\":{\"key\":\"80d08d10-2f2b-4ebb-847c-2385016718e7\",\"namespace\":\"\"},\"name\":\"Parent Display Layout\",\"type\":\"layout\",\"composition\":[{\"key\":\"cdff8398-81e5-4a37-8c2d-8ec0a0ed7d16\",\"namespace\":\"\"},{\"key\":\"62ac54e8-e424-41b3-889c-83f36c13676d\",\"namespace\":\"\"}],\"configuration\":{\"items\":[{\"width\":32,\"height\":18,\"x\":1,\"y\":30,\"identifier\":{\"key\":\"cdff8398-81e5-4a37-8c2d-8ec0a0ed7d16\",\"namespace\":\"\"},\"hasFrame\":true,\"fontSize\":\"default\",\"font\":\"default\",\"type\":\"subobject-view\",\"id\":\"a71236dd-9178-4b96-88d9-b93ceee12f32\"},{\"width\":32,\"height\":18,\"x\":30,\"y\":1,\"identifier\":{\"key\":\"62ac54e8-e424-41b3-889c-83f36c13676d\",\"namespace\":\"\"},\"hasFrame\":true,\"fontSize\":\"default\",\"font\":\"default\",\"type\":\"subobject-view\",\"id\":\"b512cc87-9291-4b55-b9a5-4e5641bc8b83\"}],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 2 child display layouts\\nchrome\",\"modified\":1732413605020,\"location\":\"mine\",\"created\":1732413601880,\"persisted\":1732413605020},\"cdff8398-81e5-4a37-8c2d-8ec0a0ed7d16\":{\"name\":\"Child Layout 1\",\"type\":\"layout\",\"identifier\":{\"key\":\"cdff8398-81e5-4a37-8c2d-8ec0a0ed7d16\",\"namespace\":\"\"},\"composition\":[],\"configuration\":{\"items\":[],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 2 child display layouts\\nchrome\",\"modified\":1732413602980,\"location\":\"80d08d10-2f2b-4ebb-847c-2385016718e7\",\"created\":1732413602980,\"persisted\":1732413602980},\"62ac54e8-e424-41b3-889c-83f36c13676d\":{\"name\":\"Child Layout 2\",\"type\":\"layout\",\"identifier\":{\"key\":\"62ac54e8-e424-41b3-889c-83f36c13676d\",\"namespace\":\"\"},\"composition\":[],\"configuration\":{\"items\":[],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 2 child display layouts\\nchrome\",\"modified\":1732413604120,\"location\":\"80d08d10-2f2b-4ebb-847c-2385016718e7\",\"created\":1732413604120,\"persisted\":1732413604120}}"
+        },
+        {
+          "name": "mct-recent-objects",
+          "value": "[{\"objectPath\":[{\"identifier\":{\"key\":\"80d08d10-2f2b-4ebb-847c-2385016718e7\",\"namespace\":\"\"},\"name\":\"Parent Display Layout\",\"type\":\"layout\",\"composition\":[{\"key\":\"cdff8398-81e5-4a37-8c2d-8ec0a0ed7d16\",\"namespace\":\"\"},{\"key\":\"62ac54e8-e424-41b3-889c-83f36c13676d\",\"namespace\":\"\"}],\"configuration\":{\"items\":[{\"width\":32,\"height\":18,\"x\":1,\"y\":1,\"identifier\":{\"key\":\"cdff8398-81e5-4a37-8c2d-8ec0a0ed7d16\",\"namespace\":\"\"},\"hasFrame\":true,\"fontSize\":\"default\",\"font\":\"default\",\"type\":\"subobject-view\",\"id\":\"a71236dd-9178-4b96-88d9-b93ceee12f32\"}],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 2 child display layouts\\nchrome\",\"modified\":1732413604120,\"location\":\"mine\",\"created\":1732413601880,\"persisted\":1732413604120},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"80d08d10-2f2b-4ebb-847c-2385016718e7\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413601880,\"created\":1732413600900,\"persisted\":1732413601880},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/80d08d10-2f2b-4ebb-847c-2385016718e7\",\"domainObject\":{\"identifier\":{\"key\":\"80d08d10-2f2b-4ebb-847c-2385016718e7\",\"namespace\":\"\"},\"name\":\"Parent Display Layout\",\"type\":\"layout\",\"composition\":[{\"key\":\"cdff8398-81e5-4a37-8c2d-8ec0a0ed7d16\",\"namespace\":\"\"},{\"key\":\"62ac54e8-e424-41b3-889c-83f36c13676d\",\"namespace\":\"\"}],\"configuration\":{\"items\":[{\"width\":32,\"height\":18,\"x\":1,\"y\":1,\"identifier\":{\"key\":\"cdff8398-81e5-4a37-8c2d-8ec0a0ed7d16\",\"namespace\":\"\"},\"hasFrame\":true,\"fontSize\":\"default\",\"font\":\"default\",\"type\":\"subobject-view\",\"id\":\"a71236dd-9178-4b96-88d9-b93ceee12f32\"}],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 2 child display layouts\\nchrome\",\"modified\":1732413604120,\"location\":\"mine\",\"created\":1732413601880,\"persisted\":1732413604120}},{\"objectPath\":[{\"identifier\":{\"key\":\"62ac54e8-e424-41b3-889c-83f36c13676d\",\"namespace\":\"\"},\"name\":\"Child Layout 2\",\"type\":\"layout\",\"composition\":[],\"configuration\":{\"items\":[],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 2 child display layouts\\nchrome\",\"modified\":1732413604120,\"location\":\"80d08d10-2f2b-4ebb-847c-2385016718e7\",\"created\":1732413604120,\"persisted\":1732413604120},{\"identifier\":{\"key\":\"80d08d10-2f2b-4ebb-847c-2385016718e7\",\"namespace\":\"\"},\"name\":\"Parent Display Layout\",\"type\":\"layout\",\"composition\":[{\"key\":\"cdff8398-81e5-4a37-8c2d-8ec0a0ed7d16\",\"namespace\":\"\"},{\"key\":\"62ac54e8-e424-41b3-889c-83f36c13676d\",\"namespace\":\"\"}],\"configuration\":{\"items\":[{\"width\":32,\"height\":18,\"x\":1,\"y\":1,\"identifier\":{\"key\":\"cdff8398-81e5-4a37-8c2d-8ec0a0ed7d16\",\"namespace\":\"\"},\"hasFrame\":true,\"fontSize\":\"default\",\"font\":\"default\",\"type\":\"subobject-view\",\"id\":\"a71236dd-9178-4b96-88d9-b93ceee12f32\"}],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 2 child display layouts\\nchrome\",\"modified\":1732413604120,\"location\":\"mine\",\"created\":1732413601880,\"persisted\":1732413604120},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"80d08d10-2f2b-4ebb-847c-2385016718e7\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413601880,\"created\":1732413600900,\"persisted\":1732413601880},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/80d08d10-2f2b-4ebb-847c-2385016718e7/62ac54e8-e424-41b3-889c-83f36c13676d\",\"domainObject\":{\"identifier\":{\"key\":\"62ac54e8-e424-41b3-889c-83f36c13676d\",\"namespace\":\"\"},\"name\":\"Child Layout 2\",\"type\":\"layout\",\"composition\":[],\"configuration\":{\"items\":[],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 2 child display layouts\\nchrome\",\"modified\":1732413604120,\"location\":\"80d08d10-2f2b-4ebb-847c-2385016718e7\",\"created\":1732413604120,\"persisted\":1732413604120}},{\"objectPath\":[{\"identifier\":{\"key\":\"cdff8398-81e5-4a37-8c2d-8ec0a0ed7d16\",\"namespace\":\"\"},\"name\":\"Child Layout 1\",\"type\":\"layout\",\"composition\":[],\"configuration\":{\"items\":[],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 2 child display layouts\\nchrome\",\"modified\":1732413602980,\"location\":\"80d08d10-2f2b-4ebb-847c-2385016718e7\",\"created\":1732413602980,\"persisted\":1732413602980},{\"identifier\":{\"key\":\"80d08d10-2f2b-4ebb-847c-2385016718e7\",\"namespace\":\"\"},\"name\":\"Parent Display Layout\",\"type\":\"layout\",\"composition\":[{\"key\":\"cdff8398-81e5-4a37-8c2d-8ec0a0ed7d16\",\"namespace\":\"\"},{\"key\":\"62ac54e8-e424-41b3-889c-83f36c13676d\",\"namespace\":\"\"}],\"configuration\":{\"items\":[{\"width\":32,\"height\":18,\"x\":1,\"y\":1,\"identifier\":{\"key\":\"cdff8398-81e5-4a37-8c2d-8ec0a0ed7d16\",\"namespace\":\"\"},\"hasFrame\":true,\"fontSize\":\"default\",\"font\":\"default\",\"type\":\"subobject-view\",\"id\":\"a71236dd-9178-4b96-88d9-b93ceee12f32\"}],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 2 child display layouts\\nchrome\",\"modified\":1732413604120,\"location\":\"mine\",\"created\":1732413601880,\"persisted\":1732413604120},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"80d08d10-2f2b-4ebb-847c-2385016718e7\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413601880,\"created\":1732413600900,\"persisted\":1732413601880},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/80d08d10-2f2b-4ebb-847c-2385016718e7/cdff8398-81e5-4a37-8c2d-8ec0a0ed7d16\",\"domainObject\":{\"identifier\":{\"key\":\"cdff8398-81e5-4a37-8c2d-8ec0a0ed7d16\",\"namespace\":\"\"},\"name\":\"Child Layout 1\",\"type\":\"layout\",\"composition\":[],\"configuration\":{\"items\":[],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate display layout with 2 child display layouts\\nchrome\",\"modified\":1732413602980,\"location\":\"80d08d10-2f2b-4ebb-847c-2385016718e7\",\"created\":1732413602980,\"persisted\":1732413602980}},{\"objectPath\":[{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"80d08d10-2f2b-4ebb-847c-2385016718e7\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413601880,\"created\":1732413600900,\"persisted\":1732413601880},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine\",\"domainObject\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"80d08d10-2f2b-4ebb-847c-2385016718e7\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413601880,\"created\":1732413600900,\"persisted\":1732413601880}}]"
+        },
+        {
+          "name": "mct-tree-expanded",
+          "value": "[]"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/e2e/test-data/examplePlans/ExamplePlanWithOrderedLanes.json b/e2e/test-data/examplePlans/ExamplePlanWithOrderedLanes.json
new file mode 100644
index 00000000000..e3f665395dc
--- /dev/null
+++ b/e2e/test-data/examplePlans/ExamplePlanWithOrderedLanes.json
@@ -0,0 +1,54 @@
+{
+  "Groups": [
+    {
+      "name": "Group 1"
+    },
+    {
+      "name": "Group 2"
+    }
+  ],
+  "Group 2": [
+    {
+      "name": "Past event 3",
+      "start": 1660493208000,
+      "end": 1660503981000,
+      "type": "Group 2",
+      "color": "orange",
+      "textColor": "white"
+    },
+    {
+      "name": "Past event 4",
+      "start": 1660579608000,
+      "end": 1660624108000,
+      "type": "Group 2",
+      "color": "orange",
+      "textColor": "white"
+    },
+    {
+      "name": "Past event 5",
+      "start": 1660666008000,
+      "end": 1660681529000,
+      "type": "Group 2",
+      "color": "orange",
+      "textColor": "white"
+    }
+  ],
+  "Group 1": [
+    {
+      "name": "Past event 1",
+      "start": 1660320408000,
+      "end": 1660343797000,
+      "type": "Group 1",
+      "color": "orange",
+      "textColor": "white"
+    },
+    {
+      "name": "Past event 2",
+      "start": 1660406808000,
+      "end": 1660429160000,
+      "type": "Group 1",
+      "color": "orange",
+      "textColor": "white"
+    }
+  ]
+}
diff --git a/e2e/test-data/examplePlans/ExamplePlan_Large.json b/e2e/test-data/examplePlans/ExamplePlan_Large.json
new file mode 100644
index 00000000000..f01d465a075
--- /dev/null
+++ b/e2e/test-data/examplePlans/ExamplePlan_Large.json
@@ -0,0 +1,1080 @@
+{
+  "Lorem": [
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829001",
+      "name": "Lorem ipsum dolor 2023-03-15 21:00",
+      "start": 1678914000000,
+      "end": 1678920203000,
+      "color": "#28172",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829002",
+      "name": "Nam vehicula magna 2023-03-15 23:08",
+      "start": 1678921680000,
+      "end": 1678927886000,
+      "color": "#6700CD",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829003",
+      "name": "Praesent pharetra risus 2023-03-15 23:28",
+      "start": 1678922880000,
+      "end": 1678927341000,
+      "color": "#1A6398",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829004",
+      "name": "Duis eget arcu 2023-03-16 01:30",
+      "start": 1678930200000,
+      "end": 1678933775000,
+      "color": "#CD6300",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829005",
+      "name": "Maecenas elementum purus 2023-03-16 02:00",
+      "start": 1678932000000,
+      "end": 1678936537000,
+      "color": "#cc9900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829006",
+      "name": "Praesent in mauris 2023-03-16 03:27",
+      "start": 1678937220000,
+      "end": 1678943380000,
+      "color": "#009900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829007",
+      "name": "Donec id nunc 2023-03-16 04:08",
+      "start": 1678939680000,
+      "end": 1678942180000,
+      "color": "#398129A",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829008",
+      "name": "Donec quis nunc 2023-03-16 04:45",
+      "start": 1678941900000,
+      "end": 1678942146000,
+      "color": "#6700CD",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829009",
+      "name": "Maecenas in purus 2023-03-16 06:45",
+      "start": 1678949100000,
+      "end": 1678954538000,
+      "color": "#28172",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829010",
+      "name": "Proin vehicula elit 2023-03-16 07:01",
+      "start": 1678950060000,
+      "end": 1678955494000,
+      "color": "#6700CD",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829011",
+      "name": "Nunc ac lorem 2023-03-16 07:04",
+      "start": 1678950240000,
+      "end": 1678957383000,
+      "color": "#28172",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829012",
+      "name": "Aenean mollis lorem 2023-03-16 07:55",
+      "start": 1678953300000,
+      "end": 1678954984000,
+      "color": "#cc9900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829013",
+      "name": "Nunc hendrerit ipsum 2023-03-16 08:53",
+      "start": 1678956780000,
+      "end": 1678962831000,
+      "color": "#009900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829014",
+      "name": "Vestibulum placerat velit 2023-03-16 10:35",
+      "start": 1678962900000,
+      "end": 1678968570000,
+      "color": "#CD6300",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829015",
+      "name": "Praesent eu augue 2023-03-16 11:02",
+      "start": 1678964520000,
+      "end": 1678966583000,
+      "color": "#CD6300",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829016",
+      "name": "Quisque mattis ligula 2023-03-16 11:53",
+      "start": 1678967580000,
+      "end": 1678974730000,
+      "color": "#CD6300",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829017",
+      "name": "Quisque a lectus 2023-03-16 13:33",
+      "start": 1678973580000,
+      "end": 1678977996000,
+      "color": "#cc9900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829018",
+      "name": "Nam mattis risus 2023-03-16 15:02",
+      "start": 1678978920000,
+      "end": 1678982935000,
+      "color": "#62640B",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829019",
+      "name": "Aenean rutrum libero 2023-03-16 16:26",
+      "start": 1678983960000,
+      "end": 1678990712000,
+      "color": "#CD6300",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829020",
+      "name": "Fusce tincidunt lorem 2023-03-16 17:45",
+      "start": 1678988700000,
+      "end": 1678995915000,
+      "color": "#28172",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829021",
+      "name": "Donec et nibh 2023-03-16 19:09",
+      "start": 1678993740000,
+      "end": 1678995474000,
+      "color": "#009900",
+      "textColor": "#ffffff"
+    }
+  ],
+  "Ipsum": [
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829022",
+      "name": "Praesent blandit urna 2023-03-16 20:10",
+      "start": 1678997400000,
+      "end": 1679003749000,
+      "color": "#1A6398",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829023",
+      "name": "Nullam congue est 2023-03-16 21:57",
+      "start": 1679003820000,
+      "end": 1679008250000,
+      "color": "#009900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829024",
+      "name": "Sed sed enim 2023-03-16 22:34",
+      "start": 1679006040000,
+      "end": 1679012412000,
+      "color": "#009900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829025",
+      "name": "Donec tincidunt ante 2023-03-16 23:09",
+      "start": 1679008140000,
+      "end": 1679011218000,
+      "color": "#1A6398",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829026",
+      "name": "Morbi bibendum tellus 2023-03-17 00:17",
+      "start": 1679012220000,
+      "end": 1679014528000,
+      "color": "#CD6300",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829027",
+      "name": "Quisque id est 2023-03-17 01:59",
+      "start": 1679018340000,
+      "end": 1679025535000,
+      "color": "#398129A",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829028",
+      "name": "Vivamus imperdiet tellus 2023-03-17 04:01",
+      "start": 1679025660000,
+      "end": 1679031500000,
+      "color": "#1A6398",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829029",
+      "name": "Pellentesque tempus augue 2023-03-17 04:10",
+      "start": 1679026200000,
+      "end": 1679029090000,
+      "color": "#807C19",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829030",
+      "name": "Donec vel mauris 2023-03-17 05:21",
+      "start": 1679030460000,
+      "end": 1679033163000,
+      "color": "#28172",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829031",
+      "name": "Morbi ac ipsum 2023-03-17 06:54",
+      "start": 1679036040000,
+      "end": 1679043127000,
+      "color": "#1A6398",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829032",
+      "name": "Sed elementum nisi 2023-03-17 07:26",
+      "start": 1679037960000,
+      "end": 1679042424000,
+      "color": "#009900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829033",
+      "name": "Proin at ipsum 2023-03-17 09:07",
+      "start": 1679044020000,
+      "end": 1679044445000,
+      "color": "#807C19",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829034",
+      "name": "Sed cursus ipsum 2023-03-17 11:12",
+      "start": 1679051520000,
+      "end": 1679056773000,
+      "color": "#1A6398",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829035",
+      "name": "Nullam mollis purus 2023-03-17 11:42",
+      "start": 1679053320000,
+      "end": 1679057845000,
+      "color": "#6700CD",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829036",
+      "name": "Aliquam vitae erat 2023-03-17 13:02",
+      "start": 1679058120000,
+      "end": 1679059116000,
+      "color": "#807C19",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829037",
+      "name": "Aenean congue orci 2023-03-17 13:48",
+      "start": 1679060880000,
+      "end": 1679066284000,
+      "color": "#28172",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829038",
+      "name": "Praesent vel orci 2023-03-17 15:58",
+      "start": 1679068680000,
+      "end": 1679070694000,
+      "color": "#398129A",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829039",
+      "name": "In non diam 2023-03-17 16:19",
+      "start": 1679069940000,
+      "end": 1679072641000,
+      "color": "#28172",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829040",
+      "name": "Suspendisse sit amet 2023-03-17 17:51",
+      "start": 1679075460000,
+      "end": 1679078232000,
+      "color": "#62640B",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829041",
+      "name": "Sed sit amet 2023-03-17 18:33",
+      "start": 1679077980000,
+      "end": 1679083509000,
+      "color": "#807C19",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829042",
+      "name": "Donec dictum justo 2023-03-17 19:17",
+      "start": 1679080620000,
+      "end": 1679086107000,
+      "color": "#398129A",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829043",
+      "name": "Etiam vestibulum justo 2023-03-17 19:39",
+      "start": 1679081940000,
+      "end": 1679086413000,
+      "color": "#cc9900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829044",
+      "name": "Sed ullamcorper diam 2023-03-17 20:18",
+      "start": 1679084280000,
+      "end": 1679088693000,
+      "color": "#807C19",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829045",
+      "name": "Cras aliquet dolor 2023-03-17 20:27",
+      "start": 1679084820000,
+      "end": 1679086883000,
+      "color": "#CD6300",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829046",
+      "name": "Duis et orci 2023-03-17 22:29",
+      "start": 1679092140000,
+      "end": 1679092436000,
+      "color": "#398129A",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829047",
+      "name": "Pellentesque quis augue 2023-03-17 23:01",
+      "start": 1679094060000,
+      "end": 1679099511000,
+      "color": "#28172",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829048",
+      "name": "Mauris sed ligula 2023-03-17 23:46",
+      "start": 1679096760000,
+      "end": 1679100276000,
+      "color": "#6700CD",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829049",
+      "name": "Vestibulum non quam 2023-03-17 23:52",
+      "start": 1679097120000,
+      "end": 1679099465000,
+      "color": "#6700CD",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829050",
+      "name": "Nulla ut ante 2023-03-18 01:00",
+      "start": 1679101200000,
+      "end": 1679105368000,
+      "color": "#807C19",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829051",
+      "name": "Vivamus scelerisque est 2023-03-18 02:26",
+      "start": 1679106360000,
+      "end": 1679107303000,
+      "color": "#28172",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829052",
+      "name": "Pellentesque viverra lectus 2023-03-18 04:28",
+      "start": 1679113680000,
+      "end": 1679120663000,
+      "color": "#62640B",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829053",
+      "name": "Vivamus placerat metus 2023-03-18 05:54",
+      "start": 1679118840000,
+      "end": 1679120052000,
+      "color": "#cc9900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829054",
+      "name": "Pellentesque nec quam 2023-03-18 06:20",
+      "start": 1679120400000,
+      "end": 1679124820000,
+      "color": "#62640B",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829055",
+      "name": "Ut semper dui 2023-03-18 08:11",
+      "start": 1679127060000,
+      "end": 1679131793000,
+      "color": "#62640B",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829056",
+      "name": "Praesent condimentum purus 2023-03-18 09:42",
+      "start": 1679132520000,
+      "end": 1679136293000,
+      "color": "#cc9900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829057",
+      "name": "Morbi varius leo 2023-03-18 10:18",
+      "start": 1679134680000,
+      "end": 1679135462000,
+      "color": "#CD6300",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829058",
+      "name": "Etiam non nulla 2023-03-18 11:14",
+      "start": 1679138040000,
+      "end": 1679144793000,
+      "color": "#CD6300",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829059",
+      "name": "Integer vitae quam 2023-03-18 11:27",
+      "start": 1679138820000,
+      "end": 1679145512000,
+      "color": "#28172",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829060",
+      "name": "Ut bibendum sapien 2023-03-18 13:26",
+      "start": 1679145960000,
+      "end": 1679151196000,
+      "color": "#CD6300",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829061",
+      "name": "Praesent in nibh 2023-03-18 14:09",
+      "start": 1679148540000,
+      "end": 1679152592000,
+      "color": "#009900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829062",
+      "name": "Mauris tempus risus 2023-03-18 15:53",
+      "start": 1679154780000,
+      "end": 1679157952000,
+      "color": "#398129A",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829063",
+      "name": "Vivamus eu massa 2023-03-18 16:10",
+      "start": 1679155800000,
+      "end": 1679157039000,
+      "color": "#009900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829064",
+      "name": "Aenean pharetra nulla 2023-03-18 17:08",
+      "start": 1679159280000,
+      "end": 1679163693000,
+      "color": "#CD6300",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829065",
+      "name": "Vivamus elementum mauris 2023-03-18 18:54",
+      "start": 1679165640000,
+      "end": 1679171765000,
+      "color": "#62640B",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829066",
+      "name": "Curabitur vel nunc 2023-03-18 20:27",
+      "start": 1679171220000,
+      "end": 1679176508000,
+      "color": "#009900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829067",
+      "name": "Donec condimentum quam 2023-03-18 22:06",
+      "start": 1679177160000,
+      "end": 1679179341000,
+      "color": "#009900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829068",
+      "name": "Etiam tristique velit 2023-03-18 23:45",
+      "start": 1679183100000,
+      "end": 1679183457000,
+      "color": "#cc9900",
+      "textColor": "#ffffff"
+    }
+  ],
+  "Nonsectetur": [
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829069",
+      "name": "Praesent at purus 2023-03-19 00:32",
+      "start": 1679185920000,
+      "end": 1679188046000,
+      "color": "#CD6300",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829070",
+      "name": "Morbi convallis nunc 2023-03-19 01:34",
+      "start": 1679189640000,
+      "end": 1679194168000,
+      "color": "#807C19",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829071",
+      "name": "Vestibulum at augue 2023-03-19 03:04",
+      "start": 1679195040000,
+      "end": 1679201691000,
+      "color": "#009900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829072",
+      "name": "Morbi eget ante 2023-03-19 04:29",
+      "start": 1679200140000,
+      "end": 1679200843000,
+      "color": "#28172",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829073",
+      "name": "Aenean mattis ante 2023-03-19 04:40",
+      "start": 1679200800000,
+      "end": 1679203030000,
+      "color": "#62640B",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829074",
+      "name": "Nam vitae ante 2023-03-19 04:43",
+      "start": 1679200980000,
+      "end": 1679201798000,
+      "color": "#CD6300",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829075",
+      "name": "Suspendisse accumsan lacus 2023-03-19 06:24",
+      "start": 1679207040000,
+      "end": 1679207797000,
+      "color": "#6700CD",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829076",
+      "name": "In rutrum mauris 2023-03-19 08:27",
+      "start": 1679214420000,
+      "end": 1679216767000,
+      "color": "#CD6300",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829077",
+      "name": "Vivamus posuere tellus 2023-03-19 10:20",
+      "start": 1679221200000,
+      "end": 1679226475000,
+      "color": "#807C19",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829078",
+      "name": "Ut non turpis 2023-03-19 12:10",
+      "start": 1679227800000,
+      "end": 1679229012000,
+      "color": "#6700CD",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829079",
+      "name": "Nunc tincidunt leo 2023-03-19 12:12",
+      "start": 1679227920000,
+      "end": 1679229913000,
+      "color": "#398129A",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829080",
+      "name": "Nunc egestas eros 2023-03-19 13:51",
+      "start": 1679233860000,
+      "end": 1679235101000,
+      "color": "#009900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829081",
+      "name": "Sed feugiat tortor 2023-03-19 14:25",
+      "start": 1679235900000,
+      "end": 1679239630000,
+      "color": "#009900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829082",
+      "name": "Pellentesque non dolor 2023-03-19 15:38",
+      "start": 1679240280000,
+      "end": 1679245396000,
+      "color": "#62640B",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829083",
+      "name": "Nullam ut lorem 2023-03-19 15:50",
+      "start": 1679241000000,
+      "end": 1679244205000,
+      "color": "#1A6398",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829084",
+      "name": "Nam faucibus risus 2023-03-19 16:51",
+      "start": 1679244660000,
+      "end": 1679245213000,
+      "color": "#6700CD",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829085",
+      "name": "Proin euismod ligula 2023-03-19 17:14",
+      "start": 1679246040000,
+      "end": 1679249781000,
+      "color": "#009900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829086",
+      "name": "Aenean congue orci 2023-03-19 17:23",
+      "start": 1679246580000,
+      "end": 1679248687000,
+      "color": "#CD6300",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829087",
+      "name": "Praesent vel orci 2023-03-19 18:55",
+      "start": 1679252100000,
+      "end": 1679256957000,
+      "color": "#807C19",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829088",
+      "name": "In non diam 2023-03-19 19:06",
+      "start": 1679252760000,
+      "end": 1679252878000,
+      "color": "#009900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829089",
+      "name": "Suspendisse sit amet 2023-03-19 20:42",
+      "start": 1679258520000,
+      "end": 1679259158000,
+      "color": "#009900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829090",
+      "name": "Sed sit amet 2023-03-19 22:37",
+      "start": 1679265420000,
+      "end": 1679268745000,
+      "color": "#28172",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829091",
+      "name": "Donec dictum justo 2023-03-19 23:19",
+      "start": 1679267940000,
+      "end": 1679272128000,
+      "color": "#28172",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829092",
+      "name": "Etiam vestibulum justo 2023-03-19 23:53",
+      "start": 1679269980000,
+      "end": 1679273096000,
+      "color": "#cc9900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829093",
+      "name": "Sed ullamcorper diam 2023-03-20 00:15",
+      "start": 1679271300000,
+      "end": 1679275297000,
+      "color": "#CD6300",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829094",
+      "name": "Cras aliquet dolor 2023-03-20 00:30",
+      "start": 1679272200000,
+      "end": 1679278448000,
+      "color": "#62640B",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829095",
+      "name": "Duis et orci 2023-03-20 02:00",
+      "start": 1679277600000,
+      "end": 1679278981000,
+      "color": "#6700CD",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829096",
+      "name": "Pellentesque quis augue 2023-03-20 03:58",
+      "start": 1679284680000,
+      "end": 1679291126000,
+      "color": "#62640B",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829097",
+      "name": "Mauris sed ligula 2023-03-20 04:35",
+      "start": 1679286900000,
+      "end": 1679294138000,
+      "color": "#398129A",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829098",
+      "name": "Vestibulum non quam 2023-03-20 04:52",
+      "start": 1679287920000,
+      "end": 1679291835000,
+      "color": "#cc9900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829099",
+      "name": "Nulla ut ante 2023-03-20 06:10",
+      "start": 1679292600000,
+      "end": 1679295800000,
+      "color": "#6700CD",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829100",
+      "name": "Vivamus scelerisque est 2023-03-20 07:38",
+      "start": 1679297880000,
+      "end": 1679304545000,
+      "color": "#6700CD",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829101",
+      "name": "Pellentesque viverra lectus 2023-03-20 08:14",
+      "start": 1679300040000,
+      "end": 1679305543000,
+      "color": "#CD6300",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829102",
+      "name": "Vivamus placerat metus 2023-03-20 09:58",
+      "start": 1679306280000,
+      "end": 1679313528000,
+      "color": "#CD6300",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829103",
+      "name": "Pellentesque nec quam 2023-03-20 11:08",
+      "start": 1679310480000,
+      "end": 1679311567000,
+      "color": "#CD6300",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829104",
+      "name": "Ut semper dui 2023-03-20 12:45",
+      "start": 1679316300000,
+      "end": 1679321703000,
+      "color": "#cc9900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829105",
+      "name": "Praesent condimentum purus 2023-03-20 14:32",
+      "start": 1679322720000,
+      "end": 1679326451000,
+      "color": "#807C19",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829106",
+      "name": "Morbi varius leo 2023-03-20 14:42",
+      "start": 1679323320000,
+      "end": 1679329739000,
+      "color": "#CD6300",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829107",
+      "name": "Etiam non nulla 2023-03-20 16:10",
+      "start": 1679328600000,
+      "end": 1679330910000,
+      "color": "#1A6398",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829108",
+      "name": "Integer vitae quam 2023-03-20 17:22",
+      "start": 1679332920000,
+      "end": 1679333055000,
+      "color": "#807C19",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829109",
+      "name": "Ut bibendum sapien 2023-03-20 17:28",
+      "start": 1679333280000,
+      "end": 1679334377000,
+      "color": "#398129A",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829110",
+      "name": "Praesent in nibh 2023-03-20 18:09",
+      "start": 1679335740000,
+      "end": 1679339834000,
+      "color": "#009900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829111",
+      "name": "Mauris tempus risus 2023-03-20 18:45",
+      "start": 1679337900000,
+      "end": 1679338054000,
+      "color": "#28172",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829112",
+      "name": "Vivamus eu massa 2023-03-20 19:07",
+      "start": 1679339220000,
+      "end": 1679344356000,
+      "color": "#62640B",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829113",
+      "name": "Aenean pharetra nulla 2023-03-20 21:00",
+      "start": 1679346000000,
+      "end": 1679349652000,
+      "color": "#009900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829114",
+      "name": "Vivamus elementum mauris 2023-03-20 22:48",
+      "start": 1679352480000,
+      "end": 1679358089000,
+      "color": "#CD6300",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829115",
+      "name": "Curabitur vel nunc 2023-03-21 00:54",
+      "start": 1679360040000,
+      "end": 1679361673000,
+      "color": "#28172",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829116",
+      "name": "Donec condimentum quam 2023-03-21 02:14",
+      "start": 1679364840000,
+      "end": 1679370470000,
+      "color": "#62640B",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829117",
+      "name": "Etiam tristique velit 2023-03-21 03:12",
+      "start": 1679368320000,
+      "end": 1679373263000,
+      "color": "#009900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829118",
+      "name": "Praesent at purus 2023-03-21 05:19",
+      "start": 1679375940000,
+      "end": 1679376500000,
+      "color": "#1A6398",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829119",
+      "name": "Morbi convallis nunc 2023-03-21 06:39",
+      "start": 1679380740000,
+      "end": 1679383240000,
+      "color": "#009900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829120",
+      "name": "Vestibulum at augue 2023-03-21 07:12",
+      "start": 1679382720000,
+      "end": 1679383807000,
+      "color": "#009900",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829121",
+      "name": "Morbi eget ante 2023-03-21 08:52",
+      "start": 1679388720000,
+      "end": 1679394965000,
+      "color": "#1A6398",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829122",
+      "name": "Aenean mattis ante 2023-03-21 10:52",
+      "start": 1679395920000,
+      "end": 1679396480000,
+      "color": "#807C19",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829123",
+      "name": "Nam vitae ante 2023-03-21 11:40",
+      "start": 1679398800000,
+      "end": 1679401571000,
+      "color": "#28172",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829124",
+      "name": "Suspendisse accumsan lacus 2023-03-21 12:08",
+      "start": 1679400480000,
+      "end": 1679402991000,
+      "color": "#28172",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829125",
+      "name": "In rutrum mauris 2023-03-21 12:44",
+      "start": 1679402640000,
+      "end": 1679405235000,
+      "color": "#CD6300",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829126",
+      "name": "Vivamus posuere tellus 2023-03-21 13:27",
+      "start": 1679405220000,
+      "end": 1679407622000,
+      "color": "#28172",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829127",
+      "name": "Ut non turpis 2023-03-21 14:16",
+      "start": 1679408160000,
+      "end": 1679415007000,
+      "color": "#807C19",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829128",
+      "name": "Nunc tincidunt leo 2023-03-21 15:44",
+      "start": 1679413440000,
+      "end": 1679418071000,
+      "color": "#CD6300",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829129",
+      "name": "Nunc egestas eros 2023-03-21 16:42",
+      "start": 1679416920000,
+      "end": 1679421025000,
+      "color": "#62640B",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829130",
+      "name": "Sed feugiat tortor 2023-03-21 17:04",
+      "start": 1679418240000,
+      "end": 1679422217000,
+      "color": "#62640B",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829131",
+      "name": "Pellentesque non dolor 2023-03-21 19:03",
+      "start": 1679425380000,
+      "end": 1679428591000,
+      "color": "#6700CD",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829132",
+      "name": "Nullam ut lorem 2023-03-21 20:25",
+      "start": 1679430300000,
+      "end": 1679434622000,
+      "color": "#CD6300",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829133",
+      "name": "Nam faucibus risus 2023-03-21 21:16",
+      "start": 1679433360000,
+      "end": 1679434647000,
+      "color": "#62640B",
+      "textColor": "#ffffff"
+    },
+    {
+      "uuid": "ef59547d-50ed-45c6-a5eb-a49629829134",
+      "name": "Proin euismod ligula 2023-03-21 23:00",
+      "start": 1679439600000,
+      "end": 1679443378000,
+      "color": "#398129A",
+      "textColor": "#ffffff"
+    }
+  ]
+}
diff --git a/e2e/test-data/examplePlans/ExamplePlan_Small1.json b/e2e/test-data/examplePlans/ExamplePlan_Small1.json
new file mode 100644
index 00000000000..cb748179381
--- /dev/null
+++ b/e2e/test-data/examplePlans/ExamplePlan_Small1.json
@@ -0,0 +1,49 @@
+{
+  "Group 1": [
+    {
+      "name": "Past event 1",
+      "start": 1660320408000,
+      "end": 1660343797000,
+      "type": "Group 1",
+      "color": "orange",
+      "textColor": "white",
+      "id": 1
+    },
+    {
+      "name": "Past event 2",
+      "start": 1660406808000,
+      "end": 1660429160000,
+      "type": "Group 1",
+      "color": "orange",
+      "textColor": "white",
+      "id": 2
+    },
+    {
+      "name": "Past event 3",
+      "start": 1660493208000,
+      "end": 1660503981000,
+      "type": "Group 1",
+      "color": "orange",
+      "textColor": "white",
+      "id": 3
+    },
+    {
+      "name": "Past event 4",
+      "start": 1660579608000,
+      "end": 1660624108000,
+      "type": "Group 1",
+      "color": "orange",
+      "textColor": "white",
+      "id": 4
+    },
+    {
+      "name": "Past event 5",
+      "start": 1660666008000,
+      "end": 1660681529000,
+      "type": "Group 1",
+      "color": "orange",
+      "textColor": "white",
+      "id": 5
+    }
+  ]
+}
diff --git a/e2e/test-data/examplePlans/ExamplePlan_Small2.json b/e2e/test-data/examplePlans/ExamplePlan_Small2.json
new file mode 100644
index 00000000000..24ddb08a5f5
--- /dev/null
+++ b/e2e/test-data/examplePlans/ExamplePlan_Small2.json
@@ -0,0 +1,38 @@
+{
+  "Group 1": [
+    {
+      "name": "Group 1 event 1",
+      "start": 1650320408000,
+      "end": 1660343797000,
+      "type": "Group 1",
+      "color": "orange",
+      "textColor": "white"
+    },
+    {
+      "name": "Group 1 event 2",
+      "start": 1660005808000,
+      "end": 1660429160000,
+      "type": "Group 1",
+      "color": "yellow",
+      "textColor": "white"
+    }
+  ],
+  "Group 2": [
+    {
+      "name": "Group 2 event 1",
+      "start": 1660320408000,
+      "end": 1660420408000,
+      "type": "Group 2",
+      "color": "green",
+      "textColor": "white"
+    },
+    {
+      "name": "Group 2 event 2",
+      "start": 1660406808000,
+      "end": 1690429160000,
+      "type": "Group 2",
+      "color": "blue",
+      "textColor": "white"
+    }
+  ]
+}
diff --git a/e2e/test-data/examplePlans/ExamplePlan_Small3.json b/e2e/test-data/examplePlans/ExamplePlan_Small3.json
new file mode 100644
index 00000000000..e6ea0e17f94
--- /dev/null
+++ b/e2e/test-data/examplePlans/ExamplePlan_Small3.json
@@ -0,0 +1,42 @@
+{
+  "Group 1": [
+    {
+      "name": "Time until birthday",
+      "start": 1650320402000,
+      "end": 1660343797000,
+      "type": "Group 1",
+      "color": "orange",
+      "textColor": "white",
+      "id": 1
+    },
+    {
+      "name": "Time until supper",
+      "start": 1650320402000,
+      "end": 1650420410000,
+      "type": "Group 2",
+      "color": "blue",
+      "textColor": "white",
+      "id": 2
+    }
+  ],
+  "Group 2": [
+    {
+      "name": "Time since the last time I ate",
+      "start": 1650320102001,
+      "end": 1650320102001,
+      "type": "Group 2",
+      "color": "green",
+      "textColor": "white",
+      "id": 3
+    },
+    {
+      "name": "Time since last accident",
+      "start": 1650320102002,
+      "end": 1650320102002,
+      "type": "Group 1",
+      "color": "yellow",
+      "textColor": "white",
+      "id": 4
+    }
+  ]
+}
diff --git a/e2e/test-data/flexible_layout_with_child_layouts.json b/e2e/test-data/flexible_layout_with_child_layouts.json
new file mode 100644
index 00000000000..696f2f7f377
--- /dev/null
+++ b/e2e/test-data/flexible_layout_with_child_layouts.json
@@ -0,0 +1,22 @@
+{
+  "cookies": [],
+  "origins": [
+    {
+      "origin": "http://localhost:8080",
+      "localStorage": [
+        {
+          "name": "mct",
+          "value": "{\"mine\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"a9ea2ec4-c456-4b73-8ed5-c4da07d40732\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413601660,\"created\":1732413600900,\"persisted\":1732413601660},\"a9ea2ec4-c456-4b73-8ed5-c4da07d40732\":{\"identifier\":{\"key\":\"a9ea2ec4-c456-4b73-8ed5-c4da07d40732\",\"namespace\":\"\"},\"name\":\"Parent Flexible Layout\",\"type\":\"flexible-layout\",\"configuration\":{\"containers\":[{\"id\":\"f7154ceb-c37b-40ee-af98-6b9cb8a3ec62\",\"frames\":[{\"id\":\"885b1828-fbf1-4f59-8c57-c5db7ad625b1\",\"domainObjectIdentifier\":{\"key\":\"bd6c95a1-31b2-4eaf-b962-f1b3da3de21a\",\"namespace\":\"\"},\"size\":100,\"noFrame\":false}],\"size\":50},{\"id\":\"f73ad0b3-c719-45e8-8056-a93eb7fea00f\",\"frames\":[],\"size\":50}],\"rowsLayout\":false},\"composition\":[{\"key\":\"bd6c95a1-31b2-4eaf-b962-f1b3da3de21a\",\"namespace\":\"\"},{\"key\":\"a0294124-ac2f-442b-9e6e-2086c6b0c2bd\",\"namespace\":\"\"}],\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate flexible layout with 2 child display layouts\\nchrome\",\"modified\":1732413603920,\"location\":\"mine\",\"created\":1732413601660,\"persisted\":1732413603920},\"bd6c95a1-31b2-4eaf-b962-f1b3da3de21a\":{\"name\":\"Child Layout 1\",\"type\":\"layout\",\"identifier\":{\"key\":\"bd6c95a1-31b2-4eaf-b962-f1b3da3de21a\",\"namespace\":\"\"},\"composition\":[],\"configuration\":{\"items\":[],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate flexible layout with 2 child display layouts\\nchrome\",\"modified\":1732413602800,\"location\":\"a9ea2ec4-c456-4b73-8ed5-c4da07d40732\",\"created\":1732413602800,\"persisted\":1732413602800},\"a0294124-ac2f-442b-9e6e-2086c6b0c2bd\":{\"name\":\"Child Layout 2\",\"type\":\"layout\",\"identifier\":{\"key\":\"a0294124-ac2f-442b-9e6e-2086c6b0c2bd\",\"namespace\":\"\"},\"composition\":[],\"configuration\":{\"items\":[],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate flexible layout with 2 child display layouts\\nchrome\",\"modified\":1732413603920,\"location\":\"a9ea2ec4-c456-4b73-8ed5-c4da07d40732\",\"created\":1732413603920,\"persisted\":1732413603920}}"
+        },
+        {
+          "name": "mct-recent-objects",
+          "value": "[{\"objectPath\":[{\"identifier\":{\"key\":\"a9ea2ec4-c456-4b73-8ed5-c4da07d40732\",\"namespace\":\"\"},\"name\":\"Parent Flexible Layout\",\"type\":\"flexible-layout\",\"configuration\":{\"containers\":[{\"id\":\"f7154ceb-c37b-40ee-af98-6b9cb8a3ec62\",\"frames\":[{\"id\":\"885b1828-fbf1-4f59-8c57-c5db7ad625b1\",\"domainObjectIdentifier\":{\"key\":\"bd6c95a1-31b2-4eaf-b962-f1b3da3de21a\",\"namespace\":\"\"},\"size\":100,\"noFrame\":false}],\"size\":50},{\"id\":\"f73ad0b3-c719-45e8-8056-a93eb7fea00f\",\"frames\":[],\"size\":50}],\"rowsLayout\":false},\"composition\":[{\"key\":\"bd6c95a1-31b2-4eaf-b962-f1b3da3de21a\",\"namespace\":\"\"},{\"key\":\"a0294124-ac2f-442b-9e6e-2086c6b0c2bd\",\"namespace\":\"\"}],\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate flexible layout with 2 child display layouts\\nchrome\",\"modified\":1732413603920,\"location\":\"mine\",\"created\":1732413601660,\"persisted\":1732413603920},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"a9ea2ec4-c456-4b73-8ed5-c4da07d40732\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413601660,\"created\":1732413600900,\"persisted\":1732413601660},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/a9ea2ec4-c456-4b73-8ed5-c4da07d40732\",\"domainObject\":{\"identifier\":{\"key\":\"a9ea2ec4-c456-4b73-8ed5-c4da07d40732\",\"namespace\":\"\"},\"name\":\"Parent Flexible Layout\",\"type\":\"flexible-layout\",\"configuration\":{\"containers\":[{\"id\":\"f7154ceb-c37b-40ee-af98-6b9cb8a3ec62\",\"frames\":[{\"id\":\"885b1828-fbf1-4f59-8c57-c5db7ad625b1\",\"domainObjectIdentifier\":{\"key\":\"bd6c95a1-31b2-4eaf-b962-f1b3da3de21a\",\"namespace\":\"\"},\"size\":100,\"noFrame\":false}],\"size\":50},{\"id\":\"f73ad0b3-c719-45e8-8056-a93eb7fea00f\",\"frames\":[],\"size\":50}],\"rowsLayout\":false},\"composition\":[{\"key\":\"bd6c95a1-31b2-4eaf-b962-f1b3da3de21a\",\"namespace\":\"\"},{\"key\":\"a0294124-ac2f-442b-9e6e-2086c6b0c2bd\",\"namespace\":\"\"}],\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate flexible layout with 2 child display layouts\\nchrome\",\"modified\":1732413603920,\"location\":\"mine\",\"created\":1732413601660,\"persisted\":1732413603920}},{\"objectPath\":[{\"identifier\":{\"key\":\"a0294124-ac2f-442b-9e6e-2086c6b0c2bd\",\"namespace\":\"\"},\"name\":\"Child Layout 2\",\"type\":\"layout\",\"composition\":[],\"configuration\":{\"items\":[],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate flexible layout with 2 child display layouts\\nchrome\",\"modified\":1732413603920,\"location\":\"a9ea2ec4-c456-4b73-8ed5-c4da07d40732\",\"created\":1732413603920,\"persisted\":1732413603920},{\"identifier\":{\"key\":\"a9ea2ec4-c456-4b73-8ed5-c4da07d40732\",\"namespace\":\"\"},\"name\":\"Parent Flexible Layout\",\"type\":\"flexible-layout\",\"configuration\":{\"containers\":[{\"id\":\"f7154ceb-c37b-40ee-af98-6b9cb8a3ec62\",\"frames\":[{\"id\":\"885b1828-fbf1-4f59-8c57-c5db7ad625b1\",\"domainObjectIdentifier\":{\"key\":\"bd6c95a1-31b2-4eaf-b962-f1b3da3de21a\",\"namespace\":\"\"},\"size\":100,\"noFrame\":false}],\"size\":50},{\"id\":\"f73ad0b3-c719-45e8-8056-a93eb7fea00f\",\"frames\":[],\"size\":50}],\"rowsLayout\":false},\"composition\":[{\"key\":\"bd6c95a1-31b2-4eaf-b962-f1b3da3de21a\",\"namespace\":\"\"},{\"key\":\"a0294124-ac2f-442b-9e6e-2086c6b0c2bd\",\"namespace\":\"\"}],\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate flexible layout with 2 child display layouts\\nchrome\",\"modified\":1732413603920,\"location\":\"mine\",\"created\":1732413601660,\"persisted\":1732413603920},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"a9ea2ec4-c456-4b73-8ed5-c4da07d40732\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413601660,\"created\":1732413600900,\"persisted\":1732413601660},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/a9ea2ec4-c456-4b73-8ed5-c4da07d40732/a0294124-ac2f-442b-9e6e-2086c6b0c2bd\",\"domainObject\":{\"identifier\":{\"key\":\"a0294124-ac2f-442b-9e6e-2086c6b0c2bd\",\"namespace\":\"\"},\"name\":\"Child Layout 2\",\"type\":\"layout\",\"composition\":[],\"configuration\":{\"items\":[],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate flexible layout with 2 child display layouts\\nchrome\",\"modified\":1732413603920,\"location\":\"a9ea2ec4-c456-4b73-8ed5-c4da07d40732\",\"created\":1732413603920,\"persisted\":1732413603920}},{\"objectPath\":[{\"identifier\":{\"key\":\"bd6c95a1-31b2-4eaf-b962-f1b3da3de21a\",\"namespace\":\"\"},\"name\":\"Child Layout 1\",\"type\":\"layout\",\"composition\":[],\"configuration\":{\"items\":[],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate flexible layout with 2 child display layouts\\nchrome\",\"modified\":1732413602800,\"location\":\"a9ea2ec4-c456-4b73-8ed5-c4da07d40732\",\"created\":1732413602800,\"persisted\":1732413602800},{\"identifier\":{\"key\":\"a9ea2ec4-c456-4b73-8ed5-c4da07d40732\",\"namespace\":\"\"},\"name\":\"Parent Flexible Layout\",\"type\":\"flexible-layout\",\"configuration\":{\"containers\":[{\"id\":\"f7154ceb-c37b-40ee-af98-6b9cb8a3ec62\",\"frames\":[{\"id\":\"885b1828-fbf1-4f59-8c57-c5db7ad625b1\",\"domainObjectIdentifier\":{\"key\":\"bd6c95a1-31b2-4eaf-b962-f1b3da3de21a\",\"namespace\":\"\"},\"size\":100,\"noFrame\":false}],\"size\":50},{\"id\":\"f73ad0b3-c719-45e8-8056-a93eb7fea00f\",\"frames\":[],\"size\":50}],\"rowsLayout\":false},\"composition\":[{\"key\":\"bd6c95a1-31b2-4eaf-b962-f1b3da3de21a\",\"namespace\":\"\"},{\"key\":\"a0294124-ac2f-442b-9e6e-2086c6b0c2bd\",\"namespace\":\"\"}],\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate flexible layout with 2 child display layouts\\nchrome\",\"modified\":1732413603920,\"location\":\"mine\",\"created\":1732413601660,\"persisted\":1732413603920},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"a9ea2ec4-c456-4b73-8ed5-c4da07d40732\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413601660,\"created\":1732413600900,\"persisted\":1732413601660},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/a9ea2ec4-c456-4b73-8ed5-c4da07d40732/bd6c95a1-31b2-4eaf-b962-f1b3da3de21a\",\"domainObject\":{\"identifier\":{\"key\":\"bd6c95a1-31b2-4eaf-b962-f1b3da3de21a\",\"namespace\":\"\"},\"name\":\"Child Layout 1\",\"type\":\"layout\",\"composition\":[],\"configuration\":{\"items\":[],\"layoutGrid\":[10,10]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate flexible layout with 2 child display layouts\\nchrome\",\"modified\":1732413602800,\"location\":\"a9ea2ec4-c456-4b73-8ed5-c4da07d40732\",\"created\":1732413602800,\"persisted\":1732413602800}},{\"objectPath\":[{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"a9ea2ec4-c456-4b73-8ed5-c4da07d40732\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413601660,\"created\":1732413600900,\"persisted\":1732413601660},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine\",\"domainObject\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"a9ea2ec4-c456-4b73-8ed5-c4da07d40732\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413601660,\"created\":1732413600900,\"persisted\":1732413601660}}]"
+        },
+        {
+          "name": "mct-tree-expanded",
+          "value": "[]"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/e2e/test-data/memory-leak-detection.json b/e2e/test-data/memory-leak-detection.json
new file mode 100644
index 00000000000..89284745ef3
--- /dev/null
+++ b/e2e/test-data/memory-leak-detection.json
@@ -0,0 +1 @@
+{"openmct":{"9224ac93-50af-4bb9-ac72-89a42b33f031":{"identifier":{"key":"9224ac93-50af-4bb9-ac72-89a42b33f031","namespace":""},"name":"Memory Leak detection","type":"folder","composition":[{"key":"4d65d346-898a-49fc-af04-7327eb58fa9b","namespace":""},{"key":"fd7a7943-bca2-4866-9d49-51ff0b59cdc0","namespace":""},{"key":"f0a154f6-c660-4f38-a386-044d09ccde1f","namespace":""},{"key":"7902af9e-2e7f-4f7f-96a6-33e01235dab6","namespace":""},{"key":"75769431-b069-44c6-b053-3d8488a6d259","namespace":""},{"key":"7de93d31-63b7-48d1-8cbc-052c6df393c0","namespace":""},{"key":"acb3f054-93f1-4464-958d-fb4ab1192bba","namespace":""},{"key":"91849735-bd56-4219-8ee3-e860ba5e1f52","namespace":""},{"key":"256c0f7c-fe8d-4bf3-a854-11f1ba7a8812","namespace":""},{"key":"84e63225-8fad-4e7b-94b9-30ab27d4e5b9","namespace":""},{"key":"7e1f5274-c7a6-45ac-bac4-48750206ab7f","namespace":""},{"key":"450bca86-457b-43b7-8940-8fb671a9a66b","namespace":""},{"key":"4c38e733-c3d8-4b9d-80e0-c1389ddf04f0","namespace":""},{"key":"a91e78a2-4c23-40e1-a68e-ccf0ae3afd03","namespace":""},{"key":"c7287d57-2ee2-42e3-825d-972979419865","namespace":""},{"key":"0eff8b35-2f80-4b33-a663-5e2728d5b164","namespace":""},{"key":"c2993869-bfdd-41e3-9715-05a5f197606d","namespace":""},{"key":"76e675bb-8bbf-4ad3-aa44-5863a631f21f","namespace":""},{"key":"4cd610a5-5afd-4c0d-a2b1-e5a18a1702ac","namespace":""},{"key":"c32e44b1-f6fc-46c8-a542-707c426515ca","namespace":""},{"key":"6de01ba3-b11f-4cc0-995c-f2d5c4b0cd4e","namespace":""}],"modified":1702544029983,"location":"mine","created":1702542980577,"persisted":1702544029984},"4d65d346-898a-49fc-af04-7327eb58fa9b":{"identifier":{"key":"4d65d346-898a-49fc-af04-7327eb58fa9b","namespace":""},"name":"1hz-swg","type":"generator","telemetry":{"period":10,"amplitude":1,"offset":0,"dataRateInHz":1,"phase":0,"randomness":0,"loadDelay":0,"infinityValues":false,"staleness":false},"modified":1702542980781,"location":"9224ac93-50af-4bb9-ac72-89a42b33f031","created":1702542980578,"persisted":1702542980781},"fd7a7943-bca2-4866-9d49-51ff0b59cdc0":{"identifier":{"key":"fd7a7943-bca2-4866-9d49-51ff0b59cdc0","namespace":""},"name":"overlay-plot-single-1hz-swg","type":"telemetry.plot.overlay","composition":[{"key":"4d65d346-898a-49fc-af04-7327eb58fa9b","namespace":""}],"configuration":{"series":[{"identifier":{"key":"4d65d346-898a-49fc-af04-7327eb58fa9b","namespace":""}}]},"modified":1702542980578,"location":"9224ac93-50af-4bb9-ac72-89a42b33f031","created":1702542980578,"persisted":1702542980578},"f0a154f6-c660-4f38-a386-044d09ccde1f":{"identifier":{"key":"f0a154f6-c660-4f38-a386-044d09ccde1f","namespace":""},"name":"stacked-plot-single-1hz-swg","type":"telemetry.plot.stacked","composition":[{"key":"4d65d346-898a-49fc-af04-7327eb58fa9b","namespace":""}],"configuration":{"series":[],"yAxis":{},"xAxis":{}},"modified":1702542980579,"location":"9224ac93-50af-4bb9-ac72-89a42b33f031","created":1702542980579,"persisted":1702542980579},"7902af9e-2e7f-4f7f-96a6-33e01235dab6":{"identifier":{"key":"7902af9e-2e7f-4f7f-96a6-33e01235dab6","namespace":""},"name":"lad-table-single-1hz-swg","type":"LadTable","composition":[{"key":"4d65d346-898a-49fc-af04-7327eb58fa9b","namespace":""}],"modified":1702542980581,"location":"9224ac93-50af-4bb9-ac72-89a42b33f031","created":1702542980580,"persisted":1702542980581},"75769431-b069-44c6-b053-3d8488a6d259":{"identifier":{"key":"75769431-b069-44c6-b053-3d8488a6d259","namespace":""},"name":"telemetry-table-single-1hz-swg","type":"table","composition":[{"key":"4d65d346-898a-49fc-af04-7327eb58fa9b","namespace":""}],"configuration":{"columnWidths":{},"hiddenColumns":{},"columnOrder":[],"cellFormat":{},"autosize":true},"modified":1702542980582,"location":"9224ac93-50af-4bb9-ac72-89a42b33f031","created":1702542980582,"persisted":1702542980582},"7de93d31-63b7-48d1-8cbc-052c6df393c0":{"identifier":{"key":"7de93d31-63b7-48d1-8cbc-052c6df393c0","namespace":""},"name":"lad-table-set-single-1hz-swg","type":"LadTableSet","composition":[{"key":"7902af9e-2e7f-4f7f-96a6-33e01235dab6","namespace":""}],"modified":1702542980583,"location":"9224ac93-50af-4bb9-ac72-89a42b33f031","created":1702542980583,"persisted":1702542980583},"acb3f054-93f1-4464-958d-fb4ab1192bba":{"identifier":{"key":"acb3f054-93f1-4464-958d-fb4ab1192bba","namespace":""},"name":"notebook-memory-leak-detection-test","type":"notebook","configuration":{"defaultSort":"oldest","entries":{"551e1ce9-0263-416d-90b0-41beebc9d50d":{"f536da89-c2e8-4b7f-b25d-5ee7c8ac8df3":[{"id":"entry-5e9bda4c-93cd-4fe7-9c0a-5ce419187fa9","createdOn":1686176929016,"createdBy":null,"text":"First entry","embeds":[],"modifiedBy":"Unknown","modified":1686176934867},{"id":"entry-dc466597-2584-4ecd-9a78-038a60c6a2dd","createdOn":1686176935883,"createdBy":null,"text":"Second entry","embeds":[],"modifiedBy":"Unknown","modified":1686176942618}]},"f298ac79-ed27-467e-ba9d-042094c8f8fa":{"156aabf8-db82-4b5a-b362-883d46b738cb":[{"id":"entry-70b81129-f42a-4747-955e-0c803f360deb","createdOn":1686176971570,"createdBy":null,"text":"First entry of First Page of Second Section","embeds":[],"modifiedBy":"Unknown","modified":1686176983771},{"id":"entry-b0dc1556-c5ab-4b04-85c1-ef0d4a744306","createdOn":1686176992402,"createdBy":null,"text":"Second entry of first page of second section with embedded object","embeds":[{"bounds":{"start":1670516888271,"end":1670518688271},"createdOn":1686176992389,"createdBy":null,"cssClass":"icon-plot-stacked","domainObject":{"identifier":{"key":"f0a154f6-c660-4f38-a386-044d09ccde1f","namespace":""},"name":"stacked-plot-single-1hz-swg","type":"telemetry.plot.stacked","composition":[{"key":"4d65d346-898a-49fc-af04-7327eb58fa9b","namespace":""}],"configuration":{"series":[],"yAxis":{},"xAxis":{}},"modified":1686175150618,"location":"9224ac93-50af-4bb9-ac72-89a42b33f031","created":1686175142052,"persisted":1686175150618},"historicLink":"#/browse/mine/9224ac93-50af-4bb9-ac72-89a42b33f031/f0a154f6-c660-4f38-a386-044d09ccde1f?tc.mode=fixed&tc.startBound=1670516888271&tc.endBound=1670518688271&tc.timeSystem=utc&view=plot-stacked","id":"embed-1686176992389","name":"stacked-plot-single-1hz-swg","snapshot":{"fullSizeImageObjectIdentifier":{"key":"ea82c76b-c720-4935-a26d-474be113538f","namespace":""},"thumbnailImage":{"src":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAi1JREFUSEvt171vUlEYx/HvLS0UpIBBLViNotG46KaTJo0Dswt/QNOZMPMPMGNnwuhA0j+AODgZ20VNjE3aBBJfImCQl1reWugxj08hRkthKQx4xhvO+Zznd57LvdcyxhimMKz/8KRSt7rdrrHZbJPyBo5VKBRMIBCYPDx7zZXP500oFBpELbe1ZVnnHr2VyWRMJBI5d+hvYHp/IIlEwsTj8RmqePZup6lVnEwmTSwWm3xzTQ2eWtSpVMqsr69PPupwOGyy2ezk4eebr8zT1dXf8NEx5GrwvQ07FcjXQd4E5fqfY84CeYz4F+GWB6664Y4Pgi6QV0d5xrS6Ou9bA94U4UcbKi1oyVrym42NDRONRv+pWCYWGvChAtUObOag04PwdXDY4NGyoped44UlsM2CF3tQaMLQh8Rp8LIL7vkUvuaGx0GFe0YXPWsI/GkftkpDYIlW1hBY4v7a0Irfl+HgCJ4EFbrogIdXdAPjwHs1ODhU+F35lIr7sCC7VYVrHdip6jkJXGrqmQrsnAefY3TFffhtGbZLQ+B2V6sQWHboXlB45QJ47Qq7FuBZSOElO9jnzo5aYNn4x8oJvLa2ZtLp9GDWsdEmEnirCLs1heVauwd3fZA76XZpsNue8WE5rv3DIRX3YdnJ64LCUqVspH6o8HYR/E7tbO8ChLyjK5bkPv9UuHl0StQCSzO55hV++QXu+xW+uQStnsIPLsGKW+EbHlgc8U3Qh6Vp6x34BWH+QY6XeEwMAAAAAElFTkSuQmCC"}},"type":"f0a154f6-c660-4f38-a386-044d09ccde1f"}],"modifiedBy":"Unknown","modified":1686177011706}]}},"imageMigrationVer":"v1","pageTitle":"Page","sections":[{"id":"551e1ce9-0263-416d-90b0-41beebc9d50d","isDefault":false,"isSelected":false,"name":"First Section","pages":[{"id":"f536da89-c2e8-4b7f-b25d-5ee7c8ac8df3","isDefault":false,"isSelected":false,"name":"First Page","pageTitle":"Page"},{"id":"96a12ca2-7903-4417-a7cd-1e6bd3140af2","isDefault":false,"isSelected":true,"name":"Second Page","pageTitle":"Page"}],"sectionTitle":"Section"},{"id":"f298ac79-ed27-467e-ba9d-042094c8f8fa","isDefault":false,"isSelected":true,"name":"Second Section","pages":[{"id":"156aabf8-db82-4b5a-b362-883d46b738cb","isDefault":false,"isSelected":true,"name":"First Page Page","pageTitle":"Page"}],"sectionTitle":"Section"}],"sectionTitle":"Section","type":"General"},"modified":1702542980584,"location":"9224ac93-50af-4bb9-ac72-89a42b33f031","created":1702542980584,"persisted":1702542980584},"91849735-bd56-4219-8ee3-e860ba5e1f52":{"identifier":{"key":"91849735-bd56-4219-8ee3-e860ba5e1f52","namespace":""},"name":"tabbed-display-memory-leak-test","type":"folder","composition":["304e4b7e-9c2e-4b07-b6ea-a5f589046169","03c1700a-2845-4476-903e-b6d637216c97"],"location":"9224ac93-50af-4bb9-ac72-89a42b33f031","modified":1702542980585,"created":1702542980585,"persisted":1702542980585},"256c0f7c-fe8d-4bf3-a854-11f1ba7a8812":{"identifier":{"key":"256c0f7c-fe8d-4bf3-a854-11f1ba7a8812","namespace":""},"name":"display-layout-single-1hz-swg","type":"layout","composition":[{"key":"4d65d346-898a-49fc-af04-7327eb58fa9b","namespace":""}],"configuration":{"items":[{"identifier":{"key":"4d65d346-898a-49fc-af04-7327eb58fa9b","namespace":""},"x":19,"y":6,"width":20,"height":5,"displayMode":"all","value":"sin","stroke":"","fill":"","color":"","fontSize":"default","font":"default","type":"telemetry-view","id":"a20b9455-504a-4e66-bcb0-9b3ec95cfe2f"}],"layoutGrid":[10,10]},"modified":1702542980777,"location":"9224ac93-50af-4bb9-ac72-89a42b33f031","created":1702542980777,"persisted":1702542980777},"84e63225-8fad-4e7b-94b9-30ab27d4e5b9":{"identifier":{"key":"84e63225-8fad-4e7b-94b9-30ab27d4e5b9","namespace":""},"name":"display-layout-single-overlay-plot","type":"layout","composition":[{"key":"fd7a7943-bca2-4866-9d49-51ff0b59cdc0","namespace":""}],"configuration":{"items":[{"width":56,"height":29,"x":23,"y":13,"identifier":{"key":"fd7a7943-bca2-4866-9d49-51ff0b59cdc0","namespace":""},"hasFrame":true,"fontSize":"default","font":"default","type":"subobject-view","id":"b36dd532-166f-418a-9bb5-0f5962a8db51"}],"layoutGrid":[10,10]},"modified":1702542980785,"location":"9224ac93-50af-4bb9-ac72-89a42b33f031","created":1702542980785,"persisted":1702542980785},"7e1f5274-c7a6-45ac-bac4-48750206ab7f":{"identifier":{"key":"7e1f5274-c7a6-45ac-bac4-48750206ab7f","namespace":""},"name":"gauge-single-1hz-swg","type":"gauge","composition":[{"key":"4d65d346-898a-49fc-af04-7327eb58fa9b","namespace":""}],"configuration":{"gaugeController":{"gaugeType":"dial-filled","isDisplayMinMax":true,"isDisplayCurVal":true,"isDisplayUnits":true,"isUseTelemetryLimits":true,"limitLow":10,"limitHigh":90,"max":100,"min":0,"precision":2}},"modified":1702543146976,"location":"9224ac93-50af-4bb9-ac72-89a42b33f031","created":1702543141431,"persisted":1702543146977},"450bca86-457b-43b7-8940-8fb671a9a66b":{"identifier":{"key":"450bca86-457b-43b7-8940-8fb671a9a66b","namespace":""},"name":"timer-far-future","type":"timer","configuration":{"timerFormat":"long","timestamp":"2050-05-28T08:09:02.000Z","timezone":"UTC","timerState":"started"},"modified":1702543246644,"location":"9224ac93-50af-4bb9-ac72-89a42b33f031","created":1702543246575,"persisted":1702543246644},"4c38e733-c3d8-4b9d-80e0-c1389ddf04f0":{"identifier":{"key":"4c38e733-c3d8-4b9d-80e0-c1389ddf04f0","namespace":""},"name":"clock","type":"clock","configuration":{"baseFormat":"YYYY/MM/DD hh:mm:ss","use24":"clock12","timezone":"UTC"},"modified":1702543265409,"location":"9224ac93-50af-4bb9-ac72-89a42b33f031","created":1702543265409,"persisted":1702543265409},"a91e78a2-4c23-40e1-a68e-ccf0ae3afd03":{"identifier":{"key":"a91e78a2-4c23-40e1-a68e-ccf0ae3afd03","namespace":""},"name":"plan-generated","type":"plan","configuration":{"clipActivityNames":false,"swimlaneVisibility":{"send":true,"fort shells":true,"knowledge wear these":true,"popular dead":true,"master":true,"zulu through":true,"she":true,"smallest vessels":true}},"selectFile":{"name":"plan.json","body":"{\n    \"send\": [\n        {\n            \"name\": \"anywhere copy friend pack\",\n            \"type\": \"send\",\n            \"start\": 1702543908537,\n            \"end\": 1702547448537,\n            \"color\": \"#E6B333\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"angle to chance largest effort\",\n            \"type\": \"send\",\n            \"start\": 1702547448537,\n            \"end\": 1702547475537,\n            \"color\": \"#6666FF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"map mad carefully\",\n            \"type\": \"send\",\n            \"start\": 1702547475537,\n            \"end\": 1702547547537,\n            \"color\": \"#E6B333\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"over forget cell flight cave origin mind liquid\",\n            \"type\": \"send\",\n            \"start\": 1702547547537,\n            \"end\": 1702549287537,\n            \"color\": \"#809900\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"level sand leave rather wrote notice teeth piece\",\n            \"type\": \"send\",\n            \"start\": 1702549287537,\n            \"end\": 1702549351537,\n            \"color\": \"#9900B3\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"change unit away atom spell characteristic rock\",\n            \"type\": \"send\",\n            \"start\": 1702549351537,\n            \"end\": 1702554811537,\n            \"color\": \"#999933\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"ordinary series right fought discovery information\",\n            \"type\": \"send\",\n            \"start\": 1702554811537,\n            \"end\": 1702554861537,\n            \"color\": \"#CC80CC\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"put sharp proud when thus food help\",\n            \"type\": \"send\",\n            \"start\": 1702554861537,\n            \"end\": 1702556661537,\n            \"color\": \"#E6331A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"loss burst\",\n            \"type\": \"send\",\n            \"start\": 1702556661537,\n            \"end\": 1702556781537,\n            \"color\": \"#6666FF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"went finally president little smell sunlight sheet race\",\n            \"type\": \"send\",\n            \"start\": 1702556781537,\n            \"end\": 1702558041537,\n            \"color\": \"#B34D4D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"charge\",\n            \"type\": \"send\",\n            \"start\": 1702558041537,\n            \"end\": 1702558048537,\n            \"color\": \"#E6B3B3\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"year this itself\",\n            \"type\": \"send\",\n            \"start\": 1702558048537,\n            \"end\": 1702558127537,\n            \"color\": \"#6666FF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"circus several\",\n            \"type\": \"send\",\n            \"start\": 1702558127537,\n            \"end\": 1702558187537,\n            \"color\": \"#00E680\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"peace remain fill\",\n            \"type\": \"send\",\n            \"start\": 1702558187537,\n            \"end\": 1702558221537,\n            \"color\": \"#99E6E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"government dropped night court sign wrote dirty\",\n            \"type\": \"send\",\n            \"start\": 1702558221537,\n            \"end\": 1702558761537,\n            \"color\": \"#809900\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"coach push program touch\",\n            \"type\": \"send\",\n            \"start\": 1702558761537,\n            \"end\": 1702558830537,\n            \"color\": \"#CC9999\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"laugh solve western southern\",\n            \"type\": \"send\",\n            \"start\": 1702558830537,\n            \"end\": 1702558856537,\n            \"color\": \"#FF4D4D\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"pound\",\n            \"type\": \"send\",\n            \"start\": 1702558856537,\n            \"end\": 1702564436537,\n            \"color\": \"#FF4D4D\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"fuel judge shall hard arrow stared\",\n            \"type\": \"send\",\n            \"start\": 1702564436537,\n            \"end\": 1702568756537,\n            \"color\": \"#66664D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"receive require hello highway reason appearance\",\n            \"type\": \"send\",\n            \"start\": 1702568756537,\n            \"end\": 1702568824537,\n            \"color\": \"#999933\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"broke his poor which habit describe darkness\",\n            \"type\": \"send\",\n            \"start\": 1702568824537,\n            \"end\": 1702573324537,\n            \"color\": \"#FF1A66\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"answer over lift have ice cast\",\n            \"type\": \"send\",\n            \"start\": 1702573324537,\n            \"end\": 1702573360537,\n            \"color\": \"#809980\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"cattle news along graph dull\",\n            \"type\": \"send\",\n            \"start\": 1702573360537,\n            \"end\": 1702577920537,\n            \"color\": \"#FFFF99\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"plane\",\n            \"type\": \"send\",\n            \"start\": 1702577920537,\n            \"end\": 1702583620537,\n            \"color\": \"#00B3E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"duty captured storm frame list of strip\",\n            \"type\": \"send\",\n            \"start\": 1702583620537,\n            \"end\": 1702583708537,\n            \"color\": \"#4DB380\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"little oil learn president everyone uncle question\",\n            \"type\": \"send\",\n            \"start\": 1702583708537,\n            \"end\": 1702586768537,\n            \"color\": \"#6680B3\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"putting\",\n            \"type\": \"send\",\n            \"start\": 1702586768537,\n            \"end\": 1702591148537,\n            \"color\": \"#B366CC\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"noun also\",\n            \"type\": \"send\",\n            \"start\": 1702591148537,\n            \"end\": 1702594748537,\n            \"color\": \"#FF3380\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"map correct flew lesson organization note earth alive\",\n            \"type\": \"send\",\n            \"start\": 1702594748537,\n            \"end\": 1702599608537,\n            \"color\": \"#CC80CC\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"story\",\n            \"type\": \"send\",\n            \"start\": 1702599608537,\n            \"end\": 1702599659537,\n            \"color\": \"#FF1A66\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"branch court this asleep sight strange\",\n            \"type\": \"send\",\n            \"start\": 1702599659537,\n            \"end\": 1702599731537,\n            \"color\": \"#E6FF80\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"own letter pride plate arrange use hair active\",\n            \"type\": \"send\",\n            \"start\": 1702599731537,\n            \"end\": 1702599733537,\n            \"color\": \"#1AFF33\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"religious discover among consider radio sweet\",\n            \"type\": \"send\",\n            \"start\": 1702599733537,\n            \"end\": 1702599788537,\n            \"color\": \"#FF33FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"tape copy imagine breath\",\n            \"type\": \"send\",\n            \"start\": 1702599788537,\n            \"end\": 1702599798537,\n            \"color\": \"#E666B3\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"wind\",\n            \"type\": \"send\",\n            \"start\": 1702599798537,\n            \"end\": 1702603218537,\n            \"color\": \"#FF6633\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"deer colony pleasure city loose sing magnet fifteen\",\n            \"type\": \"send\",\n            \"start\": 1702603218537,\n            \"end\": 1702604358537,\n            \"color\": \"#B34D4D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"whatever\",\n            \"type\": \"send\",\n            \"start\": 1702604358537,\n            \"end\": 1702604658537,\n            \"color\": \"#E64D66\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"page dirt call upon\",\n            \"type\": \"send\",\n            \"start\": 1702604658537,\n            \"end\": 1702604675537,\n            \"color\": \"#E6B333\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"stems only tall growth\",\n            \"type\": \"send\",\n            \"start\": 1702604675537,\n            \"end\": 1702604751537,\n            \"color\": \"#3366E6\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"right basis fox\",\n            \"type\": \"send\",\n            \"start\": 1702604751537,\n            \"end\": 1702604771537,\n            \"color\": \"#33FFCC\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"shall\",\n            \"type\": \"send\",\n            \"start\": 1702604771537,\n            \"end\": 1702609451537,\n            \"color\": \"#3366E6\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"damage will alive follow traffic beauty sold thou\",\n            \"type\": \"send\",\n            \"start\": 1702609451537,\n            \"end\": 1702609479537,\n            \"color\": \"#1AB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"area forgotten birth key stairs\",\n            \"type\": \"send\",\n            \"start\": 1702609479537,\n            \"end\": 1702609899537,\n            \"color\": \"#E64D66\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"nearer add area giant been gulf vegetable\",\n            \"type\": \"send\",\n            \"start\": 1702609899537,\n            \"end\": 1702613199537,\n            \"color\": \"#809900\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"pass meat after sight\",\n            \"type\": \"send\",\n            \"start\": 1702613199537,\n            \"end\": 1702618479537,\n            \"color\": \"#FF6633\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"heat grain pig coach understanding lie\",\n            \"type\": \"send\",\n            \"start\": 1702618479537,\n            \"end\": 1702621539537,\n            \"color\": \"#80B300\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"southern promised glass\",\n            \"type\": \"send\",\n            \"start\": 1702621539537,\n            \"end\": 1702623879537,\n            \"color\": \"#4DB3FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"dance leave manner mission pilot\",\n            \"type\": \"send\",\n            \"start\": 1702623879537,\n            \"end\": 1702623999537,\n            \"color\": \"#4DB380\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"sitting ride example\",\n            \"type\": \"send\",\n            \"start\": 1702623999537,\n            \"end\": 1702624095537,\n            \"color\": \"#991AFF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"rain rate rope give moving mysterious again\",\n            \"type\": \"send\",\n            \"start\": 1702624095537,\n            \"end\": 1702629375537,\n            \"color\": \"#4DB3FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"act program jump bank bread satellites snow\",\n            \"type\": \"send\",\n            \"start\": 1702629375537,\n            \"end\": 1702629472537,\n            \"color\": \"#FF1A66\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"people rest flew bad bright green importance force\",\n            \"type\": \"send\",\n            \"start\": 1702629472537,\n            \"end\": 1702630492537,\n            \"color\": \"#FF4D4D\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"complete worth pour\",\n            \"type\": \"send\",\n            \"start\": 1702630492537,\n            \"end\": 1702630530537,\n            \"color\": \"#809900\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"smoke skill positive skin\",\n            \"type\": \"send\",\n            \"start\": 1702630530537,\n            \"end\": 1702630625537,\n            \"color\": \"#FFB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"search\",\n            \"type\": \"send\",\n            \"start\": 1702630625537,\n            \"end\": 1702630659537,\n            \"color\": \"#B34D4D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"pay plate newspaper arrow arrive diameter\",\n            \"type\": \"send\",\n            \"start\": 1702630659537,\n            \"end\": 1702630685537,\n            \"color\": \"#E6331A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"fly act difficult oldest swimming serve\",\n            \"type\": \"send\",\n            \"start\": 1702630685537,\n            \"end\": 1702632785537,\n            \"color\": \"#1AFF33\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"lift share\",\n            \"type\": \"send\",\n            \"start\": 1702632785537,\n            \"end\": 1702638785537,\n            \"color\": \"#E666B3\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"mighty whole region massage\",\n            \"type\": \"send\",\n            \"start\": 1702638785537,\n            \"end\": 1702638813537,\n            \"color\": \"#9900B3\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"touch solution captured\",\n            \"type\": \"send\",\n            \"start\": 1702638813537,\n            \"end\": 1702638824537,\n            \"color\": \"#FF99E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"shelter mountain hole bite\",\n            \"type\": \"send\",\n            \"start\": 1702638824537,\n            \"end\": 1702642604537,\n            \"color\": \"#66664D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"stock\",\n            \"type\": \"send\",\n            \"start\": 1702642604537,\n            \"end\": 1702643684537,\n            \"color\": \"#991AFF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"trail family studying impossible dead\",\n            \"type\": \"send\",\n            \"start\": 1702643684537,\n            \"end\": 1702649504537,\n            \"color\": \"#33991A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"if control thread helpful dawn driven island wonder\",\n            \"type\": \"send\",\n            \"start\": 1702649504537,\n            \"end\": 1702649590537,\n            \"color\": \"#FFB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"older all leave using close ability jack\",\n            \"type\": \"send\",\n            \"start\": 1702649590537,\n            \"end\": 1702651810537,\n            \"color\": \"#1AFF33\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"poem them liquid\",\n            \"type\": \"send\",\n            \"start\": 1702651810537,\n            \"end\": 1702651879537,\n            \"color\": \"#FF3380\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"final sweet raw hold likely\",\n            \"type\": \"send\",\n            \"start\": 1702651879537,\n            \"end\": 1702652899537,\n            \"color\": \"#CC80CC\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"hardly setting came\",\n            \"type\": \"send\",\n            \"start\": 1702652899537,\n            \"end\": 1702652912537,\n            \"color\": \"#4D8000\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"picture store helpful\",\n            \"type\": \"send\",\n            \"start\": 1702652912537,\n            \"end\": 1702657052537,\n            \"color\": \"#4D80CC\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"plenty system break atmosphere\",\n            \"type\": \"send\",\n            \"start\": 1702657052537,\n            \"end\": 1702657115537,\n            \"color\": \"#CCCC00\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"excitement apartment understanding gas stiff\",\n            \"type\": \"send\",\n            \"start\": 1702657115537,\n            \"end\": 1702657196537,\n            \"color\": \"#4D80CC\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"long\",\n            \"type\": \"send\",\n            \"start\": 1702657196537,\n            \"end\": 1702659596537,\n            \"color\": \"#B3B31A\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"girl bowl provide newspaper between month within\",\n            \"type\": \"send\",\n            \"start\": 1702659596537,\n            \"end\": 1702663256537,\n            \"color\": \"#E64D66\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"disappear against distant suppose onto\",\n            \"type\": \"send\",\n            \"start\": 1702663256537,\n            \"end\": 1702666976537,\n            \"color\": \"#E666B3\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"entire possible worth explore bicycle gray\",\n            \"type\": \"send\",\n            \"start\": 1702666976537,\n            \"end\": 1702666980537,\n            \"color\": \"#999933\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"rising stand\",\n            \"type\": \"send\",\n            \"start\": 1702666980537,\n            \"end\": 1702667063537,\n            \"color\": \"#00E680\",\n            \"textColor\": \"#000000\"\n        }\n    ],\n    \"fort shells\": [\n        {\n            \"name\": \"chain me\",\n            \"type\": \"fort shells\",\n            \"start\": 1702543308543,\n            \"end\": 1702543342543,\n            \"color\": \"#CCFF1A\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"wool\",\n            \"type\": \"fort shells\",\n            \"start\": 1702543342543,\n            \"end\": 1702547482543,\n            \"color\": \"#4D8066\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"source took\",\n            \"type\": \"fort shells\",\n            \"start\": 1702547482543,\n            \"end\": 1702547526543,\n            \"color\": \"#66991A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"storm large we tired cook rocky\",\n            \"type\": \"fort shells\",\n            \"start\": 1702547526543,\n            \"end\": 1702550166543,\n            \"color\": \"#66994D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"piece hunter boy camp close\",\n            \"type\": \"fort shells\",\n            \"start\": 1702550166543,\n            \"end\": 1702550247543,\n            \"color\": \"#33FFCC\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"tired constantly experiment structure ordinary pretty stock\",\n            \"type\": \"fort shells\",\n            \"start\": 1702550247543,\n            \"end\": 1702550347543,\n            \"color\": \"#CC9999\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"bet\",\n            \"type\": \"fort shells\",\n            \"start\": 1702550347543,\n            \"end\": 1702550415543,\n            \"color\": \"#80B300\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"recent\",\n            \"type\": \"fort shells\",\n            \"start\": 1702550415543,\n            \"end\": 1702550443543,\n            \"color\": \"#B33300\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"addition frog pleasure pot satisfied several\",\n            \"type\": \"fort shells\",\n            \"start\": 1702550443543,\n            \"end\": 1702550457543,\n            \"color\": \"#4DB380\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"mill office silent direction branch\",\n            \"type\": \"fort shells\",\n            \"start\": 1702550457543,\n            \"end\": 1702550474543,\n            \"color\": \"#B34D4D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"social solar pine\",\n            \"type\": \"fort shells\",\n            \"start\": 1702550474543,\n            \"end\": 1702550502543,\n            \"color\": \"#66991A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"dollar smell negative program seat society observe hard\",\n            \"type\": \"fort shells\",\n            \"start\": 1702550502543,\n            \"end\": 1702552422543,\n            \"color\": \"#E6FF80\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"facing\",\n            \"type\": \"fort shells\",\n            \"start\": 1702552422543,\n            \"end\": 1702556922543,\n            \"color\": \"#FF6633\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"vowel would especially love both\",\n            \"type\": \"fort shells\",\n            \"start\": 1702556922543,\n            \"end\": 1702556977543,\n            \"color\": \"#33991A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"make stove nearly way order\",\n            \"type\": \"fort shells\",\n            \"start\": 1702556977543,\n            \"end\": 1702559017543,\n            \"color\": \"#1AB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"pen stranger mine individual\",\n            \"type\": \"fort shells\",\n            \"start\": 1702559017543,\n            \"end\": 1702560157543,\n            \"color\": \"#B366CC\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"clothes instance hat\",\n            \"type\": \"fort shells\",\n            \"start\": 1702560157543,\n            \"end\": 1702563757543,\n            \"color\": \"#B34D4D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"seeing tank expect camp never partly those symbol\",\n            \"type\": \"fort shells\",\n            \"start\": 1702563757543,\n            \"end\": 1702563806543,\n            \"color\": \"#B3B31A\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"soft\",\n            \"type\": \"fort shells\",\n            \"start\": 1702563806543,\n            \"end\": 1702568066543,\n            \"color\": \"#3366E6\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"sale\",\n            \"type\": \"fort shells\",\n            \"start\": 1702568066543,\n            \"end\": 1702568068543,\n            \"color\": \"#FFFF99\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"studying actually limited minerals rise\",\n            \"type\": \"fort shells\",\n            \"start\": 1702568068543,\n            \"end\": 1702568105543,\n            \"color\": \"#6680B3\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"forest behavior either dig\",\n            \"type\": \"fort shells\",\n            \"start\": 1702568105543,\n            \"end\": 1702573085543,\n            \"color\": \"#FF3380\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"ahead steam science jar signal farther shout grade\",\n            \"type\": \"fort shells\",\n            \"start\": 1702573085543,\n            \"end\": 1702574225543,\n            \"color\": \"#66991A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"topic throat\",\n            \"type\": \"fort shells\",\n            \"start\": 1702574225543,\n            \"end\": 1702575305543,\n            \"color\": \"#CCCC00\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"flower village guess property\",\n            \"type\": \"fort shells\",\n            \"start\": 1702575305543,\n            \"end\": 1702579685543,\n            \"color\": \"#999966\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"fairly might union\",\n            \"type\": \"fort shells\",\n            \"start\": 1702579685543,\n            \"end\": 1702580825543,\n            \"color\": \"#991AFF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"cowboy that\",\n            \"type\": \"fort shells\",\n            \"start\": 1702580825543,\n            \"end\": 1702580849543,\n            \"color\": \"#FF33FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"rich apple effect hot army follow as\",\n            \"type\": \"fort shells\",\n            \"start\": 1702580849543,\n            \"end\": 1702580925543,\n            \"color\": \"#809980\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"hunt\",\n            \"type\": \"fort shells\",\n            \"start\": 1702580925543,\n            \"end\": 1702580943543,\n            \"color\": \"#E64D66\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"current did till congress shelf meat\",\n            \"type\": \"fort shells\",\n            \"start\": 1702580943543,\n            \"end\": 1702585743543,\n            \"color\": \"#B34D4D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"city ate neighbor\",\n            \"type\": \"fort shells\",\n            \"start\": 1702585743543,\n            \"end\": 1702585747543,\n            \"color\": \"#CCFF1A\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"cross lost\",\n            \"type\": \"fort shells\",\n            \"start\": 1702585747543,\n            \"end\": 1702585779543,\n            \"color\": \"#FFB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"fox finish they\",\n            \"type\": \"fort shells\",\n            \"start\": 1702585779543,\n            \"end\": 1702586679543,\n            \"color\": \"#66664D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"bad sort whether lot function steady\",\n            \"type\": \"fort shells\",\n            \"start\": 1702586679543,\n            \"end\": 1702586753543,\n            \"color\": \"#E666FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"possibly dig\",\n            \"type\": \"fort shells\",\n            \"start\": 1702586753543,\n            \"end\": 1702586784543,\n            \"color\": \"#FF3380\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"ill blank riding year article entirely shape\",\n            \"type\": \"fort shells\",\n            \"start\": 1702586784543,\n            \"end\": 1702586807543,\n            \"color\": \"#33991A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"map silly perhaps pie oxygen\",\n            \"type\": \"fort shells\",\n            \"start\": 1702586807543,\n            \"end\": 1702588967543,\n            \"color\": \"#6666FF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"general ago\",\n            \"type\": \"fort shells\",\n            \"start\": 1702588967543,\n            \"end\": 1702588969543,\n            \"color\": \"#CCCC00\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"at putting actually speed\",\n            \"type\": \"fort shells\",\n            \"start\": 1702588969543,\n            \"end\": 1702589029543,\n            \"color\": \"#991AFF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"given attention whole importance paper produce ready fence\",\n            \"type\": \"fort shells\",\n            \"start\": 1702589029543,\n            \"end\": 1702589068543,\n            \"color\": \"#80B300\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"kill elephant fire boat class river include\",\n            \"type\": \"fort shells\",\n            \"start\": 1702589068543,\n            \"end\": 1702589105543,\n            \"color\": \"#E6B333\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"per tip explain shade captured lost\",\n            \"type\": \"fort shells\",\n            \"start\": 1702589105543,\n            \"end\": 1702593665543,\n            \"color\": \"#E6331A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"gone\",\n            \"type\": \"fort shells\",\n            \"start\": 1702593665543,\n            \"end\": 1702593719543,\n            \"color\": \"#FFB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"say\",\n            \"type\": \"fort shells\",\n            \"start\": 1702593719543,\n            \"end\": 1702593761543,\n            \"color\": \"#CC9999\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"horn planning surprise central stepped\",\n            \"type\": \"fort shells\",\n            \"start\": 1702593761543,\n            \"end\": 1702596101543,\n            \"color\": \"#00E680\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"chain heart second line\",\n            \"type\": \"fort shells\",\n            \"start\": 1702596101543,\n            \"end\": 1702601261543,\n            \"color\": \"#4D80CC\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"feathers hunt plan\",\n            \"type\": \"fort shells\",\n            \"start\": 1702601261543,\n            \"end\": 1702601296543,\n            \"color\": \"#4DB380\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"expression but valuable entire extra\",\n            \"type\": \"fort shells\",\n            \"start\": 1702601296543,\n            \"end\": 1702604476543,\n            \"color\": \"#FF99E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"please power greatly root\",\n            \"type\": \"fort shells\",\n            \"start\": 1702604476543,\n            \"end\": 1702609816543,\n            \"color\": \"#E6331A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"thick\",\n            \"type\": \"fort shells\",\n            \"start\": 1702609816543,\n            \"end\": 1702609819543,\n            \"color\": \"#4D80CC\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"herself\",\n            \"type\": \"fort shells\",\n            \"start\": 1702609819543,\n            \"end\": 1702609846543,\n            \"color\": \"#99E6E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"seldom car\",\n            \"type\": \"fort shells\",\n            \"start\": 1702609846543,\n            \"end\": 1702612486543,\n            \"color\": \"#FF4D4D\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"putting unit\",\n            \"type\": \"fort shells\",\n            \"start\": 1702612486543,\n            \"end\": 1702612578543,\n            \"color\": \"#4DB380\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"along strength review rough fence tired\",\n            \"type\": \"fort shells\",\n            \"start\": 1702612578543,\n            \"end\": 1702616418543,\n            \"color\": \"#CCFF1A\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"spring while pass express color us leaf year\",\n            \"type\": \"fort shells\",\n            \"start\": 1702616418543,\n            \"end\": 1702616506543,\n            \"color\": \"#E666FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"rice southern spell slipped double held then pure\",\n            \"type\": \"fort shells\",\n            \"start\": 1702616506543,\n            \"end\": 1702616603543,\n            \"color\": \"#E6FF80\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"leaving stronger teacher\",\n            \"type\": \"fort shells\",\n            \"start\": 1702616603543,\n            \"end\": 1702619063543,\n            \"color\": \"#66E64D\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"least comfortable pick care\",\n            \"type\": \"fort shells\",\n            \"start\": 1702619063543,\n            \"end\": 1702619136543,\n            \"color\": \"#3366E6\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"fence sat\",\n            \"type\": \"fort shells\",\n            \"start\": 1702619136543,\n            \"end\": 1702619165543,\n            \"color\": \"#66E64D\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"push joy\",\n            \"type\": \"fort shells\",\n            \"start\": 1702619165543,\n            \"end\": 1702619194543,\n            \"color\": \"#E64D66\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"inside fill death decide\",\n            \"type\": \"fort shells\",\n            \"start\": 1702619194543,\n            \"end\": 1702619254543,\n            \"color\": \"#99E6E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"with cold foot you log whose ball tape\",\n            \"type\": \"fort shells\",\n            \"start\": 1702619254543,\n            \"end\": 1702624774543,\n            \"color\": \"#999966\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"one bag\",\n            \"type\": \"fort shells\",\n            \"start\": 1702624774543,\n            \"end\": 1702625674543,\n            \"color\": \"#FF1A66\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"classroom\",\n            \"type\": \"fort shells\",\n            \"start\": 1702625674543,\n            \"end\": 1702630714543,\n            \"color\": \"#E64D66\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"copper stopped information shorter lower fought thick cutting\",\n            \"type\": \"fort shells\",\n            \"start\": 1702630714543,\n            \"end\": 1702630797543,\n            \"color\": \"#809980\",\n            \"textColor\": \"#000000\"\n        }\n    ],\n    \"knowledge wear these\": [\n        {\n            \"name\": \"sunlight large\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702543428544,\n            \"end\": 1702543513544,\n            \"color\": \"#991AFF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"atomic solve wagon stomach twenty\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702543513544,\n            \"end\": 1702549453544,\n            \"color\": \"#FF33FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"cheese changing courage lying step deep\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702549453544,\n            \"end\": 1702549483544,\n            \"color\": \"#66991A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"jet height immediately most post\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702549483544,\n            \"end\": 1702549489544,\n            \"color\": \"#1AB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"for lamp everybody\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702549489544,\n            \"end\": 1702552969544,\n            \"color\": \"#809900\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"per express\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702552969544,\n            \"end\": 1702557709544,\n            \"color\": \"#1AFF33\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"pay shine return yesterday\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702557709544,\n            \"end\": 1702557805544,\n            \"color\": \"#B3B31A\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"goose level brass\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702557805544,\n            \"end\": 1702557897544,\n            \"color\": \"#4D8066\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"motor piano\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702557897544,\n            \"end\": 1702560957544,\n            \"color\": \"#E6331A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"notice alive give mother other deer\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702560957544,\n            \"end\": 1702560990544,\n            \"color\": \"#B33300\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"pony vowel gain furniture\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702560990544,\n            \"end\": 1702565010544,\n            \"color\": \"#FF3380\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"noun meat fully be remember look\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702565010544,\n            \"end\": 1702565101544,\n            \"color\": \"#CC9999\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"rush yard pink acres hall daughter middle shine\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702565101544,\n            \"end\": 1702569121544,\n            \"color\": \"#FF3380\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"jack human average current seeing\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702569121544,\n            \"end\": 1702572001544,\n            \"color\": \"#3366E6\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"mistake hurried value either\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702572001544,\n            \"end\": 1702576441544,\n            \"color\": \"#E6B3B3\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"interest can piano instrument produce\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702576441544,\n            \"end\": 1702579321544,\n            \"color\": \"#CCCC00\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"fifteen same nine\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702579321544,\n            \"end\": 1702579334544,\n            \"color\": \"#99E6E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"blind lay top unless coach rocket shallow dirt\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702579334544,\n            \"end\": 1702579419544,\n            \"color\": \"#E666B3\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"hay chair own solution ahead percent success\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702579419544,\n            \"end\": 1702580499544,\n            \"color\": \"#66994D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"method court push fallen political anywhere guide\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702580499544,\n            \"end\": 1702585539544,\n            \"color\": \"#99FF99\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"clock impossible few catch those leg wolf\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702585539544,\n            \"end\": 1702585571544,\n            \"color\": \"#CC9999\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"feet fellow so since ball prepare\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702585571544,\n            \"end\": 1702587131544,\n            \"color\": \"#B366CC\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"wire\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702587131544,\n            \"end\": 1702587189544,\n            \"color\": \"#E6B3B3\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"fire fall ship earth\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702587189544,\n            \"end\": 1702590429544,\n            \"color\": \"#FFFF99\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"fell\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702590429544,\n            \"end\": 1702594689544,\n            \"color\": \"#99E6E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"wood quite graph week do official\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702594689544,\n            \"end\": 1702597509544,\n            \"color\": \"#809900\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"wheat sleep under front when force dawn series\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702597509544,\n            \"end\": 1702597521544,\n            \"color\": \"#B3B31A\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"him officer milk chamber pressure loss\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702597521544,\n            \"end\": 1702597597544,\n            \"color\": \"#9900B3\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"principle home bar experiment\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702597597544,\n            \"end\": 1702597638544,\n            \"color\": \"#809900\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"different\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702597638544,\n            \"end\": 1702598058544,\n            \"color\": \"#99E6E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"castle valuable everyone mail\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702598058544,\n            \"end\": 1702599498544,\n            \"color\": \"#4DB3FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"pen\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702599498544,\n            \"end\": 1702603098544,\n            \"color\": \"#FF99E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"slight term\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702603098544,\n            \"end\": 1702603154544,\n            \"color\": \"#E6B3B3\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"thin younger join sheet bone camp television\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702603154544,\n            \"end\": 1702605134544,\n            \"color\": \"#4D8000\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"tribe\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702605134544,\n            \"end\": 1702605206544,\n            \"color\": \"#4DB380\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"industry vast traffic\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702605206544,\n            \"end\": 1702605227544,\n            \"color\": \"#999933\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"graph sheep large spread fastened species\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702605227544,\n            \"end\": 1702609307544,\n            \"color\": \"#1AB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"wash\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702609307544,\n            \"end\": 1702609329544,\n            \"color\": \"#66991A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"protection recently slight drawn join short\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702609329544,\n            \"end\": 1702609356544,\n            \"color\": \"#FF99E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"to went atomic depend shout salmon underline sit\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702609356544,\n            \"end\": 1702609405544,\n            \"color\": \"#4D8066\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"collect\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702609405544,\n            \"end\": 1702609467544,\n            \"color\": \"#809980\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"college\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702609467544,\n            \"end\": 1702610007544,\n            \"color\": \"#FFFF99\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"rod fairly\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702610007544,\n            \"end\": 1702615167544,\n            \"color\": \"#4D80CC\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"invented provide disease bound seldom running industry gain\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702615167544,\n            \"end\": 1702618587544,\n            \"color\": \"#99E6E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"frog silver\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702618587544,\n            \"end\": 1702618664544,\n            \"color\": \"#999933\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"opportunity jet war ball coffee\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702618664544,\n            \"end\": 1702621664544,\n            \"color\": \"#E6B3B3\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"wealth sea tree brick\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702621664544,\n            \"end\": 1702621716544,\n            \"color\": \"#B34D4D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"ourselves back visitor ordinary pull\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702621716544,\n            \"end\": 1702621792544,\n            \"color\": \"#E6B333\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"cause\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702621792544,\n            \"end\": 1702621796544,\n            \"color\": \"#B33300\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"clothes fierce definition my neighborhood zebra writer studied\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702621796544,\n            \"end\": 1702621796544,\n            \"color\": \"#66991A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"elephant mass paper dead\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702621796544,\n            \"end\": 1702621852544,\n            \"color\": \"#809980\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"struck dropped situation cabin\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702621852544,\n            \"end\": 1702621852544,\n            \"color\": \"#FFFF99\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"led chapter school vapor bound different\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702621852544,\n            \"end\": 1702621942544,\n            \"color\": \"#3366E6\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"birth city till construction\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702621942544,\n            \"end\": 1702624582544,\n            \"color\": \"#9900B3\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"burst vote\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702624582544,\n            \"end\": 1702624601544,\n            \"color\": \"#4D80CC\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"touch\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702624601544,\n            \"end\": 1702624632544,\n            \"color\": \"#80B300\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"son quickly evidence this shine mass activity\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702624632544,\n            \"end\": 1702624689544,\n            \"color\": \"#33991A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"trade cover\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702624689544,\n            \"end\": 1702624710544,\n            \"color\": \"#1AB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"rhythm\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702624710544,\n            \"end\": 1702624748544,\n            \"color\": \"#00E680\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"foreign comfortable provide canal atom made standard\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702624748544,\n            \"end\": 1702624827544,\n            \"color\": \"#3366E6\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"young\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702624827544,\n            \"end\": 1702627347544,\n            \"color\": \"#1AB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"tank pull rapidly raise consider four\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702627347544,\n            \"end\": 1702632387544,\n            \"color\": \"#66991A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"constantly clean former planning talk mixture\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702632387544,\n            \"end\": 1702632447544,\n            \"color\": \"#4DB3FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"trunk mouth lovely observe friendly each city camera\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702632447544,\n            \"end\": 1702635147544,\n            \"color\": \"#E6FF80\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"them far exclaimed made research circle\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702635147544,\n            \"end\": 1702635228544,\n            \"color\": \"#991AFF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"faster calm chest\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702635228544,\n            \"end\": 1702635408544,\n            \"color\": \"#3366E6\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"train law sun press mine salt dig breakfast\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702635408544,\n            \"end\": 1702638528544,\n            \"color\": \"#33FFCC\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"shinning\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702638528544,\n            \"end\": 1702638621544,\n            \"color\": \"#FF3380\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"after\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702638621544,\n            \"end\": 1702643541544,\n            \"color\": \"#FF99E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"wore hold sat ice bus detail\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702643541544,\n            \"end\": 1702648041544,\n            \"color\": \"#FFB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"growth heading flat here globe suggest lonely tired\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702648041544,\n            \"end\": 1702651881544,\n            \"color\": \"#1AFF33\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"city circle book jet block divide wide indicate\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702651881544,\n            \"end\": 1702652001544,\n            \"color\": \"#B366CC\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"thin left according also her regular clock salmon\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702652001544,\n            \"end\": 1702655121544,\n            \"color\": \"#1AFF33\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"complete still mark sheet\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702655121544,\n            \"end\": 1702655177544,\n            \"color\": \"#9900B3\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"plus spell thumb\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702655177544,\n            \"end\": 1702655181544,\n            \"color\": \"#FF4D4D\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"rest adjective rate girl time watch situation silent\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702655181544,\n            \"end\": 1702655233544,\n            \"color\": \"#99FF99\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"everywhere row beauty recent union\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702655233544,\n            \"end\": 1702655319544,\n            \"color\": \"#E6B3B3\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"having pack\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702655319544,\n            \"end\": 1702657239544,\n            \"color\": \"#66994D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"mother remain official effect fed bush specific\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702657239544,\n            \"end\": 1702657310544,\n            \"color\": \"#66994D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"protection careful\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702657310544,\n            \"end\": 1702657383544,\n            \"color\": \"#E64D66\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"next die\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702657383544,\n            \"end\": 1702657442544,\n            \"color\": \"#809900\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"please please either month gray\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702657442544,\n            \"end\": 1702660082544,\n            \"color\": \"#809900\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"importance now car wall breeze hour evening\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702660082544,\n            \"end\": 1702660202544,\n            \"color\": \"#B3B31A\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"accident spend round against\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702660202544,\n            \"end\": 1702664222544,\n            \"color\": \"#999933\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"husband soil these rays\",\n            \"type\": \"knowledge wear these\",\n            \"start\": 1702664222544,\n            \"end\": 1702664281544,\n            \"color\": \"#FF1A66\",\n            \"textColor\": \"#ffffff\"\n        }\n    ],\n    \"popular dead\": [\n        {\n            \"name\": \"triangle\",\n            \"type\": \"popular dead\",\n            \"start\": 1702543313545,\n            \"end\": 1702543413545,\n            \"color\": \"#99E6E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"firm pure impossible office baby toy sit\",\n            \"type\": \"popular dead\",\n            \"start\": 1702543413545,\n            \"end\": 1702546473545,\n            \"color\": \"#FFB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"were else bat\",\n            \"type\": \"popular dead\",\n            \"start\": 1702546473545,\n            \"end\": 1702546507545,\n            \"color\": \"#FF3380\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"pick cookies card brother fair\",\n            \"type\": \"popular dead\",\n            \"start\": 1702546507545,\n            \"end\": 1702546555545,\n            \"color\": \"#999933\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"turn sets depend flame cap for\",\n            \"type\": \"popular dead\",\n            \"start\": 1702546555545,\n            \"end\": 1702546651545,\n            \"color\": \"#FF3380\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"like noted laid market available experience huge physical\",\n            \"type\": \"popular dead\",\n            \"start\": 1702546651545,\n            \"end\": 1702550551545,\n            \"color\": \"#B366CC\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"heavy kitchen date sun trap\",\n            \"type\": \"popular dead\",\n            \"start\": 1702550551545,\n            \"end\": 1702550586545,\n            \"color\": \"#E6B333\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"easily ranch ice almost\",\n            \"type\": \"popular dead\",\n            \"start\": 1702550586545,\n            \"end\": 1702550826545,\n            \"color\": \"#FF99E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"egg paid reach from however thick bat\",\n            \"type\": \"popular dead\",\n            \"start\": 1702550826545,\n            \"end\": 1702552386545,\n            \"color\": \"#809900\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"maybe elephant evidence familiar adjective sleep six nervous\",\n            \"type\": \"popular dead\",\n            \"start\": 1702552386545,\n            \"end\": 1702555566545,\n            \"color\": \"#E6331A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"won highest putting\",\n            \"type\": \"popular dead\",\n            \"start\": 1702555566545,\n            \"end\": 1702556226545,\n            \"color\": \"#1AFF33\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"history saved know flag\",\n            \"type\": \"popular dead\",\n            \"start\": 1702556226545,\n            \"end\": 1702560486545,\n            \"color\": \"#6666FF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"slope bicycle\",\n            \"type\": \"popular dead\",\n            \"start\": 1702560486545,\n            \"end\": 1702560556545,\n            \"color\": \"#B366CC\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"obtain troops realize pressure contain\",\n            \"type\": \"popular dead\",\n            \"start\": 1702560556545,\n            \"end\": 1702563796545,\n            \"color\": \"#CCFF1A\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"foreign personal follow\",\n            \"type\": \"popular dead\",\n            \"start\": 1702563796545,\n            \"end\": 1702563868545,\n            \"color\": \"#E6B3B3\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"bare\",\n            \"type\": \"popular dead\",\n            \"start\": 1702563868545,\n            \"end\": 1702563960545,\n            \"color\": \"#CC80CC\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"soft welcome foot want village\",\n            \"type\": \"popular dead\",\n            \"start\": 1702563960545,\n            \"end\": 1702567860545,\n            \"color\": \"#E666B3\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"became pitch breakfast\",\n            \"type\": \"popular dead\",\n            \"start\": 1702567860545,\n            \"end\": 1702567911545,\n            \"color\": \"#991AFF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"title chart position log slope ordinary pilot\",\n            \"type\": \"popular dead\",\n            \"start\": 1702567911545,\n            \"end\": 1702567983545,\n            \"color\": \"#00B3E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"wind had detail check\",\n            \"type\": \"popular dead\",\n            \"start\": 1702567983545,\n            \"end\": 1702568054545,\n            \"color\": \"#E6FF80\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"both as simple gate tea mine golden sell\",\n            \"type\": \"popular dead\",\n            \"start\": 1702568054545,\n            \"end\": 1702569914545,\n            \"color\": \"#E6B3B3\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"telephone bet\",\n            \"type\": \"popular dead\",\n            \"start\": 1702569914545,\n            \"end\": 1702569945545,\n            \"color\": \"#4D8066\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"voyage effect prize soldier importance surprise\",\n            \"type\": \"popular dead\",\n            \"start\": 1702569945545,\n            \"end\": 1702575645545,\n            \"color\": \"#991AFF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"would offer map meet\",\n            \"type\": \"popular dead\",\n            \"start\": 1702575645545,\n            \"end\": 1702575687545,\n            \"color\": \"#B33300\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"bus drew seed forest\",\n            \"type\": \"popular dead\",\n            \"start\": 1702575687545,\n            \"end\": 1702575687545,\n            \"color\": \"#FF3380\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"pet consider spider fifth careful\",\n            \"type\": \"popular dead\",\n            \"start\": 1702575687545,\n            \"end\": 1702575709545,\n            \"color\": \"#3366E6\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"win protection brave\",\n            \"type\": \"popular dead\",\n            \"start\": 1702575709545,\n            \"end\": 1702575785545,\n            \"color\": \"#1AB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"pipe improve silk piano satisfied\",\n            \"type\": \"popular dead\",\n            \"start\": 1702575785545,\n            \"end\": 1702575803545,\n            \"color\": \"#6666FF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"wire necessary quite\",\n            \"type\": \"popular dead\",\n            \"start\": 1702575803545,\n            \"end\": 1702580183545,\n            \"color\": \"#FF33FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"drawn kitchen\",\n            \"type\": \"popular dead\",\n            \"start\": 1702580183545,\n            \"end\": 1702582943545,\n            \"color\": \"#66991A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"fact wealth slabs weak highway maybe whole border\",\n            \"type\": \"popular dead\",\n            \"start\": 1702582943545,\n            \"end\": 1702582997545,\n            \"color\": \"#CC80CC\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"hard scared die complex seed careful rhythm\",\n            \"type\": \"popular dead\",\n            \"start\": 1702582997545,\n            \"end\": 1702583050545,\n            \"color\": \"#66994D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"opportunity there write recently rubbed\",\n            \"type\": \"popular dead\",\n            \"start\": 1702583050545,\n            \"end\": 1702585090545,\n            \"color\": \"#CCFF1A\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"afraid enter stronger needle try range waste he\",\n            \"type\": \"popular dead\",\n            \"start\": 1702585090545,\n            \"end\": 1702585182545,\n            \"color\": \"#FF4D4D\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"pony day load dig\",\n            \"type\": \"popular dead\",\n            \"start\": 1702585182545,\n            \"end\": 1702587102545,\n            \"color\": \"#991AFF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"trade made provide meant earth certain\",\n            \"type\": \"popular dead\",\n            \"start\": 1702587102545,\n            \"end\": 1702587121545,\n            \"color\": \"#6666FF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"former fence spoken art disappear man glad\",\n            \"type\": \"popular dead\",\n            \"start\": 1702587121545,\n            \"end\": 1702590541545,\n            \"color\": \"#FF3380\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"duty growth rising waste threw its slowly\",\n            \"type\": \"popular dead\",\n            \"start\": 1702590541545,\n            \"end\": 1702590568545,\n            \"color\": \"#4DB3FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"trap vapor primitive handsome entire continued beat\",\n            \"type\": \"popular dead\",\n            \"start\": 1702590568545,\n            \"end\": 1702590592545,\n            \"color\": \"#FF1A66\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"she till waste thin valley her wire\",\n            \"type\": \"popular dead\",\n            \"start\": 1702590592545,\n            \"end\": 1702594492545,\n            \"color\": \"#FF3380\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"source west strike basic over tribe\",\n            \"type\": \"popular dead\",\n            \"start\": 1702594492545,\n            \"end\": 1702594529545,\n            \"color\": \"#999933\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"task television oldest\",\n            \"type\": \"popular dead\",\n            \"start\": 1702594529545,\n            \"end\": 1702597109545,\n            \"color\": \"#E666FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"similar\",\n            \"type\": \"popular dead\",\n            \"start\": 1702597109545,\n            \"end\": 1702597185545,\n            \"color\": \"#4DB380\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"shout slip grass similar wave fighting older mind\",\n            \"type\": \"popular dead\",\n            \"start\": 1702597185545,\n            \"end\": 1702600065545,\n            \"color\": \"#4D80CC\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"sink all noted any\",\n            \"type\": \"popular dead\",\n            \"start\": 1702600065545,\n            \"end\": 1702600134545,\n            \"color\": \"#B34D4D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"successful very opportunity pilot\",\n            \"type\": \"popular dead\",\n            \"start\": 1702600134545,\n            \"end\": 1702604154545,\n            \"color\": \"#FF33FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"wonderful appropriate daily\",\n            \"type\": \"popular dead\",\n            \"start\": 1702604154545,\n            \"end\": 1702604192545,\n            \"color\": \"#999933\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"tell environment measure kill foreign money cent meal\",\n            \"type\": \"popular dead\",\n            \"start\": 1702604192545,\n            \"end\": 1702604312545,\n            \"color\": \"#E64D66\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"asleep pound exactly\",\n            \"type\": \"popular dead\",\n            \"start\": 1702604312545,\n            \"end\": 1702608632545,\n            \"color\": \"#6680B3\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"up loose pool composed twice master composition yourself\",\n            \"type\": \"popular dead\",\n            \"start\": 1702608632545,\n            \"end\": 1702613672545,\n            \"color\": \"#CCFF1A\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"dangerous final\",\n            \"type\": \"popular dead\",\n            \"start\": 1702613672545,\n            \"end\": 1702617272545,\n            \"color\": \"#6680B3\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"truth frighten increase moon fast share either stretch\",\n            \"type\": \"popular dead\",\n            \"start\": 1702617272545,\n            \"end\": 1702617325545,\n            \"color\": \"#E64D66\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"main carry\",\n            \"type\": \"popular dead\",\n            \"start\": 1702617325545,\n            \"end\": 1702623145545,\n            \"color\": \"#999933\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"nearest few town eventually distant this\",\n            \"type\": \"popular dead\",\n            \"start\": 1702623145545,\n            \"end\": 1702623242545,\n            \"color\": \"#00E680\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"sometime\",\n            \"type\": \"popular dead\",\n            \"start\": 1702623242545,\n            \"end\": 1702623271545,\n            \"color\": \"#B34D4D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"buried hit step hearing till\",\n            \"type\": \"popular dead\",\n            \"start\": 1702623271545,\n            \"end\": 1702628251545,\n            \"color\": \"#FF33FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"dozen good shot between\",\n            \"type\": \"popular dead\",\n            \"start\": 1702628251545,\n            \"end\": 1702628337545,\n            \"color\": \"#6666FF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"bright tie although lying expect variety brick\",\n            \"type\": \"popular dead\",\n            \"start\": 1702628337545,\n            \"end\": 1702628403545,\n            \"color\": \"#4DB3FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"vote came note talk wood\",\n            \"type\": \"popular dead\",\n            \"start\": 1702628403545,\n            \"end\": 1702628463545,\n            \"color\": \"#6680B3\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"while private are property ancient rather greatly\",\n            \"type\": \"popular dead\",\n            \"start\": 1702628463545,\n            \"end\": 1702629303545,\n            \"color\": \"#FF99E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"green by writing glass sets tube sold warn\",\n            \"type\": \"popular dead\",\n            \"start\": 1702629303545,\n            \"end\": 1702634463545,\n            \"color\": \"#CCFF1A\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"physical herd gave voice eventually lose\",\n            \"type\": \"popular dead\",\n            \"start\": 1702634463545,\n            \"end\": 1702638303545,\n            \"color\": \"#4D80CC\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"basis flight\",\n            \"type\": \"popular dead\",\n            \"start\": 1702638303545,\n            \"end\": 1702644123545,\n            \"color\": \"#66E64D\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"mass can electricity from size can\",\n            \"type\": \"popular dead\",\n            \"start\": 1702644123545,\n            \"end\": 1702644173545,\n            \"color\": \"#33991A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"arrangement failed\",\n            \"type\": \"popular dead\",\n            \"start\": 1702644173545,\n            \"end\": 1702649333545,\n            \"color\": \"#00E680\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"combination various lead honor comfortable\",\n            \"type\": \"popular dead\",\n            \"start\": 1702649333545,\n            \"end\": 1702649385545,\n            \"color\": \"#FFB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"silly determine direction three common strong\",\n            \"type\": \"popular dead\",\n            \"start\": 1702649385545,\n            \"end\": 1702655025545,\n            \"color\": \"#E6331A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"transportation skin\",\n            \"type\": \"popular dead\",\n            \"start\": 1702655025545,\n            \"end\": 1702655038545,\n            \"color\": \"#E6B3B3\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"shallow fact willing\",\n            \"type\": \"popular dead\",\n            \"start\": 1702655038545,\n            \"end\": 1702655105545,\n            \"color\": \"#B3B31A\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"wherever happily frozen\",\n            \"type\": \"popular dead\",\n            \"start\": 1702655105545,\n            \"end\": 1702655132545,\n            \"color\": \"#66991A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"saved rope\",\n            \"type\": \"popular dead\",\n            \"start\": 1702655132545,\n            \"end\": 1702655208545,\n            \"color\": \"#6666FF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"skin pool degree boy police image article darkness\",\n            \"type\": \"popular dead\",\n            \"start\": 1702655208545,\n            \"end\": 1702655293545,\n            \"color\": \"#FFFF99\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"citizen applied salt soft bank\",\n            \"type\": \"popular dead\",\n            \"start\": 1702655293545,\n            \"end\": 1702655294545,\n            \"color\": \"#CC80CC\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"mail\",\n            \"type\": \"popular dead\",\n            \"start\": 1702655294545,\n            \"end\": 1702655375545,\n            \"color\": \"#E666FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"swam minute interest\",\n            \"type\": \"popular dead\",\n            \"start\": 1702655375545,\n            \"end\": 1702655396545,\n            \"color\": \"#E6FF80\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"refer suppose attention fed steam\",\n            \"type\": \"popular dead\",\n            \"start\": 1702655396545,\n            \"end\": 1702657016545,\n            \"color\": \"#33FFCC\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"society matter promised\",\n            \"type\": \"popular dead\",\n            \"start\": 1702657016545,\n            \"end\": 1702662296545,\n            \"color\": \"#B34D4D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"trade slave careful band guide poor stock cent\",\n            \"type\": \"popular dead\",\n            \"start\": 1702662296545,\n            \"end\": 1702662319545,\n            \"color\": \"#33991A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"willing fat south observe\",\n            \"type\": \"popular dead\",\n            \"start\": 1702662319545,\n            \"end\": 1702662376545,\n            \"color\": \"#6680B3\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"had elephant length further rubber chosen partly every\",\n            \"type\": \"popular dead\",\n            \"start\": 1702662376545,\n            \"end\": 1702662461545,\n            \"color\": \"#CC80CC\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"cost it\",\n            \"type\": \"popular dead\",\n            \"start\": 1702662461545,\n            \"end\": 1702662495545,\n            \"color\": \"#1AFF33\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"beneath walk taken rubber pocket location\",\n            \"type\": \"popular dead\",\n            \"start\": 1702662495545,\n            \"end\": 1702668495545,\n            \"color\": \"#999966\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"careful seems combine cabin serve tales memory\",\n            \"type\": \"popular dead\",\n            \"start\": 1702668495545,\n            \"end\": 1702668511545,\n            \"color\": \"#CCCC00\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"song\",\n            \"type\": \"popular dead\",\n            \"start\": 1702668511545,\n            \"end\": 1702672711545,\n            \"color\": \"#66994D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"trip is food log stems price\",\n            \"type\": \"popular dead\",\n            \"start\": 1702672711545,\n            \"end\": 1702672771545,\n            \"color\": \"#999933\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"made\",\n            \"type\": \"popular dead\",\n            \"start\": 1702672771545,\n            \"end\": 1702676911545,\n            \"color\": \"#4DB380\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"clothes park die\",\n            \"type\": \"popular dead\",\n            \"start\": 1702676911545,\n            \"end\": 1702676973545,\n            \"color\": \"#9900B3\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"clay known regular rock gray\",\n            \"type\": \"popular dead\",\n            \"start\": 1702676973545,\n            \"end\": 1702676989545,\n            \"color\": \"#4D8000\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"hurried\",\n            \"type\": \"popular dead\",\n            \"start\": 1702676989545,\n            \"end\": 1702678309545,\n            \"color\": \"#1AB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"fierce laid yet born me palace school\",\n            \"type\": \"popular dead\",\n            \"start\": 1702678309545,\n            \"end\": 1702678325545,\n            \"color\": \"#66E64D\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"experience example horn race development\",\n            \"type\": \"popular dead\",\n            \"start\": 1702678325545,\n            \"end\": 1702682105545,\n            \"color\": \"#33FFCC\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"kids\",\n            \"type\": \"popular dead\",\n            \"start\": 1702682105545,\n            \"end\": 1702687145545,\n            \"color\": \"#FF4D4D\",\n            \"textColor\": \"#000000\"\n        }\n    ],\n    \"master\": [\n        {\n            \"name\": \"swept birth\",\n            \"type\": \"master\",\n            \"start\": 1702543428548,\n            \"end\": 1702543428548,\n            \"color\": \"#E666FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"told dropped silent surface herd throw\",\n            \"type\": \"master\",\n            \"start\": 1702543428548,\n            \"end\": 1702543511548,\n            \"color\": \"#CC9999\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"six electric feature own\",\n            \"type\": \"master\",\n            \"start\": 1702543511548,\n            \"end\": 1702543563548,\n            \"color\": \"#E64D66\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"television gray\",\n            \"type\": \"master\",\n            \"start\": 1702543563548,\n            \"end\": 1702548963548,\n            \"color\": \"#CC9999\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"gun consist he thick being several comfortable mirror\",\n            \"type\": \"master\",\n            \"start\": 1702548963548,\n            \"end\": 1702548996548,\n            \"color\": \"#E6331A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"finally help straw zoo road\",\n            \"type\": \"master\",\n            \"start\": 1702548996548,\n            \"end\": 1702549023548,\n            \"color\": \"#991AFF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"joy light independent\",\n            \"type\": \"master\",\n            \"start\": 1702549023548,\n            \"end\": 1702551183548,\n            \"color\": \"#00E680\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"break west about farther measure south\",\n            \"type\": \"master\",\n            \"start\": 1702551183548,\n            \"end\": 1702551274548,\n            \"color\": \"#E6B333\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"last per taken equal\",\n            \"type\": \"master\",\n            \"start\": 1702551274548,\n            \"end\": 1702551340548,\n            \"color\": \"#1AFF33\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"unless love rubbed fell\",\n            \"type\": \"master\",\n            \"start\": 1702551340548,\n            \"end\": 1702556380548,\n            \"color\": \"#66E64D\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"common\",\n            \"type\": \"master\",\n            \"start\": 1702556380548,\n            \"end\": 1702556392548,\n            \"color\": \"#99E6E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"door facing eat test crowd\",\n            \"type\": \"master\",\n            \"start\": 1702556392548,\n            \"end\": 1702556425548,\n            \"color\": \"#FF1A66\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"upward balloon burn public couple\",\n            \"type\": \"master\",\n            \"start\": 1702556425548,\n            \"end\": 1702559245548,\n            \"color\": \"#FFFF99\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"excited troops government dream began plus\",\n            \"type\": \"master\",\n            \"start\": 1702559245548,\n            \"end\": 1702563325548,\n            \"color\": \"#1AFF33\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"nails done dawn suppose river replace island\",\n            \"type\": \"master\",\n            \"start\": 1702563325548,\n            \"end\": 1702563362548,\n            \"color\": \"#4D8066\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"shake speak examine\",\n            \"type\": \"master\",\n            \"start\": 1702563362548,\n            \"end\": 1702563415548,\n            \"color\": \"#B33300\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"split ought area\",\n            \"type\": \"master\",\n            \"start\": 1702563415548,\n            \"end\": 1702568095548,\n            \"color\": \"#66991A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"dull theory choose six five facing fact\",\n            \"type\": \"master\",\n            \"start\": 1702568095548,\n            \"end\": 1702571635548,\n            \"color\": \"#FF99E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"lying\",\n            \"type\": \"master\",\n            \"start\": 1702571635548,\n            \"end\": 1702571645548,\n            \"color\": \"#9900B3\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"was\",\n            \"type\": \"master\",\n            \"start\": 1702571645548,\n            \"end\": 1702571727548,\n            \"color\": \"#6680B3\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"proud explain fill time obtain represent kept truth\",\n            \"type\": \"master\",\n            \"start\": 1702571727548,\n            \"end\": 1702574427548,\n            \"color\": \"#4D8000\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"condition ago\",\n            \"type\": \"master\",\n            \"start\": 1702574427548,\n            \"end\": 1702580067548,\n            \"color\": \"#FF1A66\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"iron pain spite setting everyone\",\n            \"type\": \"master\",\n            \"start\": 1702580067548,\n            \"end\": 1702580116548,\n            \"color\": \"#66664D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"death city deeply hello practice important rich build\",\n            \"type\": \"master\",\n            \"start\": 1702580116548,\n            \"end\": 1702580179548,\n            \"color\": \"#4DB3FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"rise question for term although symbol tight\",\n            \"type\": \"master\",\n            \"start\": 1702580179548,\n            \"end\": 1702580232548,\n            \"color\": \"#33FFCC\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"behind drink out deer dollar bend\",\n            \"type\": \"master\",\n            \"start\": 1702580232548,\n            \"end\": 1702581072548,\n            \"color\": \"#66E64D\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"history\",\n            \"type\": \"master\",\n            \"start\": 1702581072548,\n            \"end\": 1702581162548,\n            \"color\": \"#66664D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"slowly wide task habit electricity\",\n            \"type\": \"master\",\n            \"start\": 1702581162548,\n            \"end\": 1702581202548,\n            \"color\": \"#6680B3\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"answer\",\n            \"type\": \"master\",\n            \"start\": 1702581202548,\n            \"end\": 1702581248548,\n            \"color\": \"#999933\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"castle fact deeply\",\n            \"type\": \"master\",\n            \"start\": 1702581248548,\n            \"end\": 1702581251548,\n            \"color\": \"#33991A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"chief iron space forgot\",\n            \"type\": \"master\",\n            \"start\": 1702581251548,\n            \"end\": 1702581289548,\n            \"color\": \"#4DB3FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"vessels\",\n            \"type\": \"master\",\n            \"start\": 1702581289548,\n            \"end\": 1702581358548,\n            \"color\": \"#4DB3FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"by poet eager managed social answer sum\",\n            \"type\": \"master\",\n            \"start\": 1702581358548,\n            \"end\": 1702581417548,\n            \"color\": \"#66991A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"aboard substance\",\n            \"type\": \"master\",\n            \"start\": 1702581417548,\n            \"end\": 1702581499548,\n            \"color\": \"#E6FF80\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"sentence job\",\n            \"type\": \"master\",\n            \"start\": 1702581499548,\n            \"end\": 1702583959548,\n            \"color\": \"#3366E6\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"fast enjoy vast sheep command entirely choose shoot\",\n            \"type\": \"master\",\n            \"start\": 1702583959548,\n            \"end\": 1702585519548,\n            \"color\": \"#E64D66\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"pony\",\n            \"type\": \"master\",\n            \"start\": 1702585519548,\n            \"end\": 1702585617548,\n            \"color\": \"#4D8000\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"smell partly trouble parallel service rays\",\n            \"type\": \"master\",\n            \"start\": 1702585617548,\n            \"end\": 1702587537548,\n            \"color\": \"#4DB380\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"character old usual slept\",\n            \"type\": \"master\",\n            \"start\": 1702587537548,\n            \"end\": 1702587546548,\n            \"color\": \"#66994D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"lie dropped hand orange built raw cent\",\n            \"type\": \"master\",\n            \"start\": 1702587546548,\n            \"end\": 1702587577548,\n            \"color\": \"#E6FF80\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"closely human fog row partly massage\",\n            \"type\": \"master\",\n            \"start\": 1702587577548,\n            \"end\": 1702587630548,\n            \"color\": \"#00B3E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"time needle pupil outside across individual remember\",\n            \"type\": \"master\",\n            \"start\": 1702587630548,\n            \"end\": 1702587679548,\n            \"color\": \"#E666FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"love any\",\n            \"type\": \"master\",\n            \"start\": 1702587679548,\n            \"end\": 1702587741548,\n            \"color\": \"#FFFF99\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"willing\",\n            \"type\": \"master\",\n            \"start\": 1702587741548,\n            \"end\": 1702587759548,\n            \"color\": \"#999966\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"home said heart trade beautiful happily\",\n            \"type\": \"master\",\n            \"start\": 1702587759548,\n            \"end\": 1702591239548,\n            \"color\": \"#4D80CC\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"evening\",\n            \"type\": \"master\",\n            \"start\": 1702591239548,\n            \"end\": 1702591250548,\n            \"color\": \"#1AB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"liquid bottle stems loss wish\",\n            \"type\": \"master\",\n            \"start\": 1702591250548,\n            \"end\": 1702591344548,\n            \"color\": \"#4DB3FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"myself state tide\",\n            \"type\": \"master\",\n            \"start\": 1702591344548,\n            \"end\": 1702596504548,\n            \"color\": \"#809980\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"local answer smile\",\n            \"type\": \"master\",\n            \"start\": 1702596504548,\n            \"end\": 1702599384548,\n            \"color\": \"#FF33FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"flow bread trunk\",\n            \"type\": \"master\",\n            \"start\": 1702599384548,\n            \"end\": 1702599419548,\n            \"color\": \"#991AFF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"element watch\",\n            \"type\": \"master\",\n            \"start\": 1702599419548,\n            \"end\": 1702599446548,\n            \"color\": \"#3366E6\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"your earlier dig pair\",\n            \"type\": \"master\",\n            \"start\": 1702599446548,\n            \"end\": 1702604126548,\n            \"color\": \"#33991A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"date\",\n            \"type\": \"master\",\n            \"start\": 1702604126548,\n            \"end\": 1702604666548,\n            \"color\": \"#9900B3\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"captain escape\",\n            \"type\": \"master\",\n            \"start\": 1702604666548,\n            \"end\": 1702604733548,\n            \"color\": \"#E6FF80\",\n            \"textColor\": \"#000000\"\n        }\n    ],\n    \"zulu through\": [\n        {\n            \"name\": \"money replace single clean never\",\n            \"type\": \"zulu through\",\n            \"start\": 1702543668548,\n            \"end\": 1702543740548,\n            \"color\": \"#66991A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"this safety early previous line interior depth eager\",\n            \"type\": \"zulu through\",\n            \"start\": 1702543740548,\n            \"end\": 1702546380548,\n            \"color\": \"#809980\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"duty just perhaps\",\n            \"type\": \"zulu through\",\n            \"start\": 1702546380548,\n            \"end\": 1702546419548,\n            \"color\": \"#66994D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"written lose combination swung birds spite\",\n            \"type\": \"zulu through\",\n            \"start\": 1702546419548,\n            \"end\": 1702548099548,\n            \"color\": \"#CC9999\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"sick supply merely fill whale friendly\",\n            \"type\": \"zulu through\",\n            \"start\": 1702548099548,\n            \"end\": 1702552539548,\n            \"color\": \"#FF3380\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"gulf related add spend tried this felt\",\n            \"type\": \"zulu through\",\n            \"start\": 1702552539548,\n            \"end\": 1702552572548,\n            \"color\": \"#4D8066\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"judge\",\n            \"type\": \"zulu through\",\n            \"start\": 1702552572548,\n            \"end\": 1702554792548,\n            \"color\": \"#FF99E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"remove storm choose his\",\n            \"type\": \"zulu through\",\n            \"start\": 1702554792548,\n            \"end\": 1702555992548,\n            \"color\": \"#B34D4D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"smallest\",\n            \"type\": \"zulu through\",\n            \"start\": 1702555992548,\n            \"end\": 1702556017548,\n            \"color\": \"#B3B31A\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"symbol\",\n            \"type\": \"zulu through\",\n            \"start\": 1702556017548,\n            \"end\": 1702557577548,\n            \"color\": \"#9900B3\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"hair offer\",\n            \"type\": \"zulu through\",\n            \"start\": 1702557577548,\n            \"end\": 1702562737548,\n            \"color\": \"#4DB3FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"this ball rhyme shut everywhere flow danger\",\n            \"type\": \"zulu through\",\n            \"start\": 1702562737548,\n            \"end\": 1702563037548,\n            \"color\": \"#66991A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"written ants sitting\",\n            \"type\": \"zulu through\",\n            \"start\": 1702563037548,\n            \"end\": 1702566937548,\n            \"color\": \"#00B3E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"compound proud closer sink ran settle\",\n            \"type\": \"zulu through\",\n            \"start\": 1702566937548,\n            \"end\": 1702567037548,\n            \"color\": \"#CC80CC\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"fighting gravity parent wonderful engine\",\n            \"type\": \"zulu through\",\n            \"start\": 1702567037548,\n            \"end\": 1702567068548,\n            \"color\": \"#6666FF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"deer please only threw mile clock\",\n            \"type\": \"zulu through\",\n            \"start\": 1702567068548,\n            \"end\": 1702567094548,\n            \"color\": \"#FF99E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"completely classroom\",\n            \"type\": \"zulu through\",\n            \"start\": 1702567094548,\n            \"end\": 1702570394548,\n            \"color\": \"#FF99E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"bus grandfather able\",\n            \"type\": \"zulu through\",\n            \"start\": 1702570394548,\n            \"end\": 1702575194548,\n            \"color\": \"#B366CC\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"liquid thousand object young physical before fifth somewhere\",\n            \"type\": \"zulu through\",\n            \"start\": 1702575194548,\n            \"end\": 1702575217548,\n            \"color\": \"#1AB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"bow more war\",\n            \"type\": \"zulu through\",\n            \"start\": 1702575217548,\n            \"end\": 1702580977548,\n            \"color\": \"#B34D4D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"conversation stared country tight yard\",\n            \"type\": \"zulu through\",\n            \"start\": 1702580977548,\n            \"end\": 1702586257548,\n            \"color\": \"#E666B3\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"law adventure crowd\",\n            \"type\": \"zulu through\",\n            \"start\": 1702586257548,\n            \"end\": 1702587577548,\n            \"color\": \"#4D8000\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"chart root seen plastic mixture\",\n            \"type\": \"zulu through\",\n            \"start\": 1702587577548,\n            \"end\": 1702587608548,\n            \"color\": \"#FFB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"against strength pole simply\",\n            \"type\": \"zulu through\",\n            \"start\": 1702587608548,\n            \"end\": 1702587663548,\n            \"color\": \"#4DB380\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"trace powerful\",\n            \"type\": \"zulu through\",\n            \"start\": 1702587663548,\n            \"end\": 1702587752548,\n            \"color\": \"#FFFF99\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"zulu nose finest quickly maybe important greater\",\n            \"type\": \"zulu through\",\n            \"start\": 1702587752548,\n            \"end\": 1702587812548,\n            \"color\": \"#CCCC00\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"growth ten farther situation\",\n            \"type\": \"zulu through\",\n            \"start\": 1702587812548,\n            \"end\": 1702587908548,\n            \"color\": \"#809980\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"many\",\n            \"type\": \"zulu through\",\n            \"start\": 1702587908548,\n            \"end\": 1702587995548,\n            \"color\": \"#00E680\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"came exchange burn dropped scared\",\n            \"type\": \"zulu through\",\n            \"start\": 1702587995548,\n            \"end\": 1702589195548,\n            \"color\": \"#FF1A66\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"teach\",\n            \"type\": \"zulu through\",\n            \"start\": 1702589195548,\n            \"end\": 1702589243548,\n            \"color\": \"#4D8000\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"industrial got prepare film ill fly prove\",\n            \"type\": \"zulu through\",\n            \"start\": 1702589243548,\n            \"end\": 1702589303548,\n            \"color\": \"#999966\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"month driving friendly cup\",\n            \"type\": \"zulu through\",\n            \"start\": 1702589303548,\n            \"end\": 1702589336548,\n            \"color\": \"#FF33FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"report gradually scale wild saw getting across\",\n            \"type\": \"zulu through\",\n            \"start\": 1702589336548,\n            \"end\": 1702592936548,\n            \"color\": \"#809980\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"shall piano everyone tip\",\n            \"type\": \"zulu through\",\n            \"start\": 1702592936548,\n            \"end\": 1702592945548,\n            \"color\": \"#CCFF1A\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"driving slave\",\n            \"type\": \"zulu through\",\n            \"start\": 1702592945548,\n            \"end\": 1702596845548,\n            \"color\": \"#4D8066\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"carefully home cool\",\n            \"type\": \"zulu through\",\n            \"start\": 1702596845548,\n            \"end\": 1702600685548,\n            \"color\": \"#CC9999\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"provide hurt\",\n            \"type\": \"zulu through\",\n            \"start\": 1702600685548,\n            \"end\": 1702600719548,\n            \"color\": \"#9900B3\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"factor hidden crack gone\",\n            \"type\": \"zulu through\",\n            \"start\": 1702600719548,\n            \"end\": 1702601079548,\n            \"color\": \"#4D8066\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"adventure square poem settle lead against\",\n            \"type\": \"zulu through\",\n            \"start\": 1702601079548,\n            \"end\": 1702601118548,\n            \"color\": \"#999966\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"together eight corner threw card\",\n            \"type\": \"zulu through\",\n            \"start\": 1702601118548,\n            \"end\": 1702605318548,\n            \"color\": \"#99E6E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"rope private daily born\",\n            \"type\": \"zulu through\",\n            \"start\": 1702605318548,\n            \"end\": 1702607598548,\n            \"color\": \"#00B3E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"draw nothing block were tried\",\n            \"type\": \"zulu through\",\n            \"start\": 1702607598548,\n            \"end\": 1702611198548,\n            \"color\": \"#66994D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"planning lion scientist bush butter corn gift wrapped\",\n            \"type\": \"zulu through\",\n            \"start\": 1702611198548,\n            \"end\": 1702611226548,\n            \"color\": \"#809980\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"steel phrase plural older habit here tune search\",\n            \"type\": \"zulu through\",\n            \"start\": 1702611226548,\n            \"end\": 1702611318548,\n            \"color\": \"#E666FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"learn broke atom frog grandfather\",\n            \"type\": \"zulu through\",\n            \"start\": 1702611318548,\n            \"end\": 1702613898548,\n            \"color\": \"#B3B31A\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"corner\",\n            \"type\": \"zulu through\",\n            \"start\": 1702613898548,\n            \"end\": 1702617018548,\n            \"color\": \"#B34D4D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"leg silly loose sleep daily\",\n            \"type\": \"zulu through\",\n            \"start\": 1702617018548,\n            \"end\": 1702617098548,\n            \"color\": \"#E666B3\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"cook highway spell cave studying function\",\n            \"type\": \"zulu through\",\n            \"start\": 1702617098548,\n            \"end\": 1702617131548,\n            \"color\": \"#809980\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"put\",\n            \"type\": \"zulu through\",\n            \"start\": 1702617131548,\n            \"end\": 1702617133548,\n            \"color\": \"#4D8000\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"hello avoid angry\",\n            \"type\": \"zulu through\",\n            \"start\": 1702617133548,\n            \"end\": 1702620193548,\n            \"color\": \"#CC9999\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"driven rock voice never\",\n            \"type\": \"zulu through\",\n            \"start\": 1702620193548,\n            \"end\": 1702620216548,\n            \"color\": \"#9900B3\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"pain throat labor\",\n            \"type\": \"zulu through\",\n            \"start\": 1702620216548,\n            \"end\": 1702620273548,\n            \"color\": \"#991AFF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"liquid solar blood attached vote\",\n            \"type\": \"zulu through\",\n            \"start\": 1702620273548,\n            \"end\": 1702622673548,\n            \"color\": \"#33991A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"regular ill stay depth taught furniture trip\",\n            \"type\": \"zulu through\",\n            \"start\": 1702622673548,\n            \"end\": 1702622696548,\n            \"color\": \"#E666FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"teach lady spoken giant greatest diameter spend\",\n            \"type\": \"zulu through\",\n            \"start\": 1702622696548,\n            \"end\": 1702627796548,\n            \"color\": \"#CC9999\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"cow talk\",\n            \"type\": \"zulu through\",\n            \"start\": 1702627796548,\n            \"end\": 1702627857548,\n            \"color\": \"#FF1A66\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"origin nation anyone division capital round pupil radio\",\n            \"type\": \"zulu through\",\n            \"start\": 1702627857548,\n            \"end\": 1702632177548,\n            \"color\": \"#B34D4D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"tales\",\n            \"type\": \"zulu through\",\n            \"start\": 1702632177548,\n            \"end\": 1702632220548,\n            \"color\": \"#4D8000\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"fun chart hospital thank structure additional\",\n            \"type\": \"zulu through\",\n            \"start\": 1702632220548,\n            \"end\": 1702634260548,\n            \"color\": \"#E666B3\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"market upon mile during over\",\n            \"type\": \"zulu through\",\n            \"start\": 1702634260548,\n            \"end\": 1702634270548,\n            \"color\": \"#FFB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"beneath team does upward dish mighty place as\",\n            \"type\": \"zulu through\",\n            \"start\": 1702634270548,\n            \"end\": 1702634289548,\n            \"color\": \"#809900\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"airplane information kind planned shape\",\n            \"type\": \"zulu through\",\n            \"start\": 1702634289548,\n            \"end\": 1702634589548,\n            \"color\": \"#CCFF1A\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"pilot fort vowel these discussion lot strong\",\n            \"type\": \"zulu through\",\n            \"start\": 1702634589548,\n            \"end\": 1702634656548,\n            \"color\": \"#B3B31A\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"wild\",\n            \"type\": \"zulu through\",\n            \"start\": 1702634656548,\n            \"end\": 1702636156548,\n            \"color\": \"#FF33FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"settle needs play grabbed compound\",\n            \"type\": \"zulu through\",\n            \"start\": 1702636156548,\n            \"end\": 1702641676548,\n            \"color\": \"#4D80CC\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"mighty\",\n            \"type\": \"zulu through\",\n            \"start\": 1702641676548,\n            \"end\": 1702641685548,\n            \"color\": \"#4DB3FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"lunch wonderful eat pipe huge\",\n            \"type\": \"zulu through\",\n            \"start\": 1702641685548,\n            \"end\": 1702641716548,\n            \"color\": \"#E6B3B3\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"wonder drove numeral throughout dead property\",\n            \"type\": \"zulu through\",\n            \"start\": 1702641716548,\n            \"end\": 1702646396548,\n            \"color\": \"#CCCC00\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"if seldom task\",\n            \"type\": \"zulu through\",\n            \"start\": 1702646396548,\n            \"end\": 1702646459548,\n            \"color\": \"#9900B3\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"split especially hall sentence principal soldier\",\n            \"type\": \"zulu through\",\n            \"start\": 1702646459548,\n            \"end\": 1702647119548,\n            \"color\": \"#99FF99\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"congress secret tide tin different believed\",\n            \"type\": \"zulu through\",\n            \"start\": 1702647119548,\n            \"end\": 1702647196548,\n            \"color\": \"#1AB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"did how\",\n            \"type\": \"zulu through\",\n            \"start\": 1702647196548,\n            \"end\": 1702647201548,\n            \"color\": \"#9900B3\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"letter news wide highway shoot at\",\n            \"type\": \"zulu through\",\n            \"start\": 1702647201548,\n            \"end\": 1702651581548,\n            \"color\": \"#B3B31A\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"event\",\n            \"type\": \"zulu through\",\n            \"start\": 1702651581548,\n            \"end\": 1702655181548,\n            \"color\": \"#1AFF33\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"direct burst division nine drink than neck\",\n            \"type\": \"zulu through\",\n            \"start\": 1702655181548,\n            \"end\": 1702655183548,\n            \"color\": \"#4D8000\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"careful sweet deep mile\",\n            \"type\": \"zulu through\",\n            \"start\": 1702655183548,\n            \"end\": 1702655199548,\n            \"color\": \"#1AB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"union why soil truck famous amount species engineer\",\n            \"type\": \"zulu through\",\n            \"start\": 1702655199548,\n            \"end\": 1702655281548,\n            \"color\": \"#80B300\",\n            \"textColor\": \"#000000\"\n        }\n    ],\n    \"she\": [\n        {\n            \"name\": \"tell last pale easily canal line principle fox\",\n            \"type\": \"she\",\n            \"start\": 1702543308550,\n            \"end\": 1702547868550,\n            \"color\": \"#E64D66\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"widely camp lot plan\",\n            \"type\": \"she\",\n            \"start\": 1702547868550,\n            \"end\": 1702553148550,\n            \"color\": \"#1AB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"hay distant ground reader slightly environment\",\n            \"type\": \"she\",\n            \"start\": 1702553148550,\n            \"end\": 1702553202550,\n            \"color\": \"#CC80CC\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"married supply\",\n            \"type\": \"she\",\n            \"start\": 1702553202550,\n            \"end\": 1702553225550,\n            \"color\": \"#CCCC00\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"example winter needs blow compound rice\",\n            \"type\": \"she\",\n            \"start\": 1702553225550,\n            \"end\": 1702559045550,\n            \"color\": \"#B366CC\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"wrong poet\",\n            \"type\": \"she\",\n            \"start\": 1702559045550,\n            \"end\": 1702562525550,\n            \"color\": \"#4DB380\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"old am fallen happened duty fighting\",\n            \"type\": \"she\",\n            \"start\": 1702562525550,\n            \"end\": 1702562567550,\n            \"color\": \"#6666FF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"am instead whale taste wise\",\n            \"type\": \"she\",\n            \"start\": 1702562567550,\n            \"end\": 1702568207550,\n            \"color\": \"#4DB3FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"disappear mission rich\",\n            \"type\": \"she\",\n            \"start\": 1702568207550,\n            \"end\": 1702568227550,\n            \"color\": \"#4D8066\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"although anyone\",\n            \"type\": \"she\",\n            \"start\": 1702568227550,\n            \"end\": 1702570447550,\n            \"color\": \"#FFB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"dig citizen lack week regular key\",\n            \"type\": \"she\",\n            \"start\": 1702570447550,\n            \"end\": 1702570477550,\n            \"color\": \"#00B3E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"limited lift nearby past\",\n            \"type\": \"she\",\n            \"start\": 1702570477550,\n            \"end\": 1702571017550,\n            \"color\": \"#00B3E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"bottle native complete\",\n            \"type\": \"she\",\n            \"start\": 1702571017550,\n            \"end\": 1702573897550,\n            \"color\": \"#991AFF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"chose spite easy slipped\",\n            \"type\": \"she\",\n            \"start\": 1702573897550,\n            \"end\": 1702577677550,\n            \"color\": \"#991AFF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"mouse vowel gradually\",\n            \"type\": \"she\",\n            \"start\": 1702577677550,\n            \"end\": 1702577754550,\n            \"color\": \"#6680B3\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"aboard higher answer dot garden wrote fire\",\n            \"type\": \"she\",\n            \"start\": 1702577754550,\n            \"end\": 1702577769550,\n            \"color\": \"#FF33FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"machinery attention explanation mud aboard herd feathers\",\n            \"type\": \"she\",\n            \"start\": 1702577769550,\n            \"end\": 1702581129550,\n            \"color\": \"#991AFF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"close dear term customs leather plenty spider\",\n            \"type\": \"she\",\n            \"start\": 1702581129550,\n            \"end\": 1702584969550,\n            \"color\": \"#CCFF1A\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"picture loud past highway group exciting\",\n            \"type\": \"she\",\n            \"start\": 1702584969550,\n            \"end\": 1702585329550,\n            \"color\": \"#66664D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"steady fort remain troops wall\",\n            \"type\": \"she\",\n            \"start\": 1702585329550,\n            \"end\": 1702590129550,\n            \"color\": \"#999966\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"tales fun rhythm identity development sugar\",\n            \"type\": \"she\",\n            \"start\": 1702590129550,\n            \"end\": 1702590221550,\n            \"color\": \"#FF33FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"becoming\",\n            \"type\": \"she\",\n            \"start\": 1702590221550,\n            \"end\": 1702590234550,\n            \"color\": \"#FF4D4D\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"please energy exist apart follow mouth each most\",\n            \"type\": \"she\",\n            \"start\": 1702590234550,\n            \"end\": 1702593354550,\n            \"color\": \"#FF33FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"rain southern enemy\",\n            \"type\": \"she\",\n            \"start\": 1702593354550,\n            \"end\": 1702593434550,\n            \"color\": \"#6666FF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"broad rocket number understanding common swing honor children\",\n            \"type\": \"she\",\n            \"start\": 1702593434550,\n            \"end\": 1702595894550,\n            \"color\": \"#FFB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"best thousand mostly bigger\",\n            \"type\": \"she\",\n            \"start\": 1702595894550,\n            \"end\": 1702598354550,\n            \"color\": \"#66994D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"bowl\",\n            \"type\": \"she\",\n            \"start\": 1702598354550,\n            \"end\": 1702598386550,\n            \"color\": \"#809980\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"copy gasoline modern noun drive family\",\n            \"type\": \"she\",\n            \"start\": 1702598386550,\n            \"end\": 1702602346550,\n            \"color\": \"#3366E6\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"bicycle young cast unhappy\",\n            \"type\": \"she\",\n            \"start\": 1702602346550,\n            \"end\": 1702602426550,\n            \"color\": \"#9900B3\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"mouth coat\",\n            \"type\": \"she\",\n            \"start\": 1702602426550,\n            \"end\": 1702603746550,\n            \"color\": \"#FFFF99\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"strip lead back if respect material rose\",\n            \"type\": \"she\",\n            \"start\": 1702603746550,\n            \"end\": 1702606446550,\n            \"color\": \"#CC9999\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"mix theory\",\n            \"type\": \"she\",\n            \"start\": 1702606446550,\n            \"end\": 1702612266550,\n            \"color\": \"#E6B3B3\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"without\",\n            \"type\": \"she\",\n            \"start\": 1702612266550,\n            \"end\": 1702616526550,\n            \"color\": \"#9900B3\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"vast deep usually\",\n            \"type\": \"she\",\n            \"start\": 1702616526550,\n            \"end\": 1702616544550,\n            \"color\": \"#FFB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"to beauty\",\n            \"type\": \"she\",\n            \"start\": 1702616544550,\n            \"end\": 1702616544550,\n            \"color\": \"#FFB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"this steam\",\n            \"type\": \"she\",\n            \"start\": 1702616544550,\n            \"end\": 1702617984550,\n            \"color\": \"#80B300\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"band outer sky lonely smell\",\n            \"type\": \"she\",\n            \"start\": 1702617984550,\n            \"end\": 1702622064550,\n            \"color\": \"#4DB380\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"stock jet\",\n            \"type\": \"she\",\n            \"start\": 1702622064550,\n            \"end\": 1702622096550,\n            \"color\": \"#CCCC00\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"flag\",\n            \"type\": \"she\",\n            \"start\": 1702622096550,\n            \"end\": 1702626116550,\n            \"color\": \"#FF99E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"lonely sentence chamber tropical arrange contain damage monkey\",\n            \"type\": \"she\",\n            \"start\": 1702626116550,\n            \"end\": 1702626169550,\n            \"color\": \"#CCCC00\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"diagram park baby cage does elephant\",\n            \"type\": \"she\",\n            \"start\": 1702626169550,\n            \"end\": 1702626234550,\n            \"color\": \"#80B300\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"can\",\n            \"type\": \"she\",\n            \"start\": 1702626234550,\n            \"end\": 1702626265550,\n            \"color\": \"#E6B333\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"inside occur condition animal danger\",\n            \"type\": \"she\",\n            \"start\": 1702626265550,\n            \"end\": 1702626278550,\n            \"color\": \"#33FFCC\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"breeze entire some cup direction series\",\n            \"type\": \"she\",\n            \"start\": 1702626278550,\n            \"end\": 1702626311550,\n            \"color\": \"#4D80CC\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"rise why stream pool wash ring\",\n            \"type\": \"she\",\n            \"start\": 1702626311550,\n            \"end\": 1702627751550,\n            \"color\": \"#991AFF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"east slipped aware nor gasoline beautiful circus\",\n            \"type\": \"she\",\n            \"start\": 1702627751550,\n            \"end\": 1702629731550,\n            \"color\": \"#66991A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"national strike willing least compound exchange whenever\",\n            \"type\": \"she\",\n            \"start\": 1702629731550,\n            \"end\": 1702630931550,\n            \"color\": \"#00B3E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"police television fresh\",\n            \"type\": \"she\",\n            \"start\": 1702630931550,\n            \"end\": 1702631591550,\n            \"color\": \"#66E64D\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"store organized\",\n            \"type\": \"she\",\n            \"start\": 1702631591550,\n            \"end\": 1702635431550,\n            \"color\": \"#CCFF1A\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"industry remarkable page\",\n            \"type\": \"she\",\n            \"start\": 1702635431550,\n            \"end\": 1702635440550,\n            \"color\": \"#3366E6\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"everywhere butter serve sheet chest metal machinery cannot\",\n            \"type\": \"she\",\n            \"start\": 1702635440550,\n            \"end\": 1702636820550,\n            \"color\": \"#00B3E6\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"melted\",\n            \"type\": \"she\",\n            \"start\": 1702636820550,\n            \"end\": 1702637060550,\n            \"color\": \"#FF3380\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"week visitor copy shelter now\",\n            \"type\": \"she\",\n            \"start\": 1702637060550,\n            \"end\": 1702637103550,\n            \"color\": \"#66994D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"cowboy raw cheese idea yourself block image lungs\",\n            \"type\": \"she\",\n            \"start\": 1702637103550,\n            \"end\": 1702639623550,\n            \"color\": \"#00E680\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"flat not nearly certain adjective fog front has\",\n            \"type\": \"she\",\n            \"start\": 1702639623550,\n            \"end\": 1702641603550,\n            \"color\": \"#66664D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"piece instance slipped track be see center against\",\n            \"type\": \"she\",\n            \"start\": 1702641603550,\n            \"end\": 1702644603550,\n            \"color\": \"#FFFF99\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"end worth visitor be atmosphere\",\n            \"type\": \"she\",\n            \"start\": 1702644603550,\n            \"end\": 1702644608550,\n            \"color\": \"#1AB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"firm\",\n            \"type\": \"she\",\n            \"start\": 1702644608550,\n            \"end\": 1702645688550,\n            \"color\": \"#809900\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"straight warm thus religious throw separate sense church\",\n            \"type\": \"she\",\n            \"start\": 1702645688550,\n            \"end\": 1702645731550,\n            \"color\": \"#66E64D\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"freedom across cut\",\n            \"type\": \"she\",\n            \"start\": 1702645731550,\n            \"end\": 1702645731550,\n            \"color\": \"#B3B31A\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"consonant habit rocky locate\",\n            \"type\": \"she\",\n            \"start\": 1702645731550,\n            \"end\": 1702645787550,\n            \"color\": \"#E6B333\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"rose summer inch\",\n            \"type\": \"she\",\n            \"start\": 1702645787550,\n            \"end\": 1702649267550,\n            \"color\": \"#809900\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"mission meant glass anybody cell situation peace indicate\",\n            \"type\": \"she\",\n            \"start\": 1702649267550,\n            \"end\": 1702651787550,\n            \"color\": \"#E6FF80\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"satisfied music excellent better\",\n            \"type\": \"she\",\n            \"start\": 1702651787550,\n            \"end\": 1702651837550,\n            \"color\": \"#66664D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"nine lovely disappear sunlight pay\",\n            \"type\": \"she\",\n            \"start\": 1702651837550,\n            \"end\": 1702652977550,\n            \"color\": \"#99FF99\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"flow dry\",\n            \"type\": \"she\",\n            \"start\": 1702652977550,\n            \"end\": 1702655977550,\n            \"color\": \"#66991A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"ground\",\n            \"type\": \"she\",\n            \"start\": 1702655977550,\n            \"end\": 1702659997550,\n            \"color\": \"#E6B3B3\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"effort changing provide hollow met recall apart\",\n            \"type\": \"she\",\n            \"start\": 1702659997550,\n            \"end\": 1702660007550,\n            \"color\": \"#CC80CC\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"been cabin transportation pan period rather lift\",\n            \"type\": \"she\",\n            \"start\": 1702660007550,\n            \"end\": 1702660025550,\n            \"color\": \"#999933\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"weak if best face\",\n            \"type\": \"she\",\n            \"start\": 1702660025550,\n            \"end\": 1702660094550,\n            \"color\": \"#99FF99\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"liquid dress club muscle enter\",\n            \"type\": \"she\",\n            \"start\": 1702660094550,\n            \"end\": 1702660168550,\n            \"color\": \"#991AFF\",\n            \"textColor\": \"#ffffff\"\n        }\n    ],\n    \"smallest vessels\": [\n        {\n            \"name\": \"importance copper magic led largest soldier\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702543316551,\n            \"end\": 1702543359551,\n            \"color\": \"#1AB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"park seed let religious wet hurried line shinning\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702543359551,\n            \"end\": 1702543659551,\n            \"color\": \"#E64D66\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"interest firm wonderful led bowl rear\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702543659551,\n            \"end\": 1702543678551,\n            \"color\": \"#CCCC00\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"while dish continent column lose green volume\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702543678551,\n            \"end\": 1702547758551,\n            \"color\": \"#B34D4D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"fix feel cake\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702547758551,\n            \"end\": 1702553758551,\n            \"color\": \"#66994D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"happily follow white hollow\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702553758551,\n            \"end\": 1702557058551,\n            \"color\": \"#E666B3\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"bowl anybody spent wealth master tax stairs\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702557058551,\n            \"end\": 1702557064551,\n            \"color\": \"#4D8066\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"within pictured layers old\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702557064551,\n            \"end\": 1702557097551,\n            \"color\": \"#FF1A66\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"magnet dozen\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702557097551,\n            \"end\": 1702557142551,\n            \"color\": \"#B3B31A\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"surface pride without duty outer\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702557142551,\n            \"end\": 1702557143551,\n            \"color\": \"#00E680\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"able still vowel\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702557143551,\n            \"end\": 1702560263551,\n            \"color\": \"#B34D4D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"onto local where\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702560263551,\n            \"end\": 1702560328551,\n            \"color\": \"#991AFF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"bat national ship little horse tears\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702560328551,\n            \"end\": 1702560368551,\n            \"color\": \"#999966\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"throat hope trouble face duck hearing temperature\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702560368551,\n            \"end\": 1702560437551,\n            \"color\": \"#FF6633\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"increase jump\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702560437551,\n            \"end\": 1702564517551,\n            \"color\": \"#809980\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"struggle dish massage pressure\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702564517551,\n            \"end\": 1702565237551,\n            \"color\": \"#4D8066\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"floor massage yet stage correctly social bite\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702565237551,\n            \"end\": 1702568237551,\n            \"color\": \"#4DB380\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"tell express\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702568237551,\n            \"end\": 1702568254551,\n            \"color\": \"#66994D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"actually relationship definition rod get win also\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702568254551,\n            \"end\": 1702573894551,\n            \"color\": \"#1AFF33\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"egg tonight exactly addition title express bigger\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702573894551,\n            \"end\": 1702573914551,\n            \"color\": \"#4D8066\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"burst real belong percent fierce hope throughout cause\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702573914551,\n            \"end\": 1702577214551,\n            \"color\": \"#CC9999\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"made inside different tight prize\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702577214551,\n            \"end\": 1702578414551,\n            \"color\": \"#CCCC00\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"hungry\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702578414551,\n            \"end\": 1702580574551,\n            \"color\": \"#CCCC00\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"daily there inch clock\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702580574551,\n            \"end\": 1702580673551,\n            \"color\": \"#4D80CC\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"was iron near divide north clothing provide telephone\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702580673551,\n            \"end\": 1702582473551,\n            \"color\": \"#80B300\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"pleasant before way case twenty body appearance\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702582473551,\n            \"end\": 1702585053551,\n            \"color\": \"#E666FF\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"key dropped explore luck say roll southern\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702585053551,\n            \"end\": 1702590573551,\n            \"color\": \"#991AFF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"well creature fallen\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702590573551,\n            \"end\": 1702590622551,\n            \"color\": \"#FF1A66\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"tax nice determine paragraph usual act song party\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702590622551,\n            \"end\": 1702591762551,\n            \"color\": \"#4DB380\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"term castle\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702591762551,\n            \"end\": 1702591830551,\n            \"color\": \"#1AB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"result obtain have does mother\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702591830551,\n            \"end\": 1702591847551,\n            \"color\": \"#CC80CC\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"no human owner burst oil neck\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702591847551,\n            \"end\": 1702591921551,\n            \"color\": \"#66991A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"village wing couple are been spend out settle\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702591921551,\n            \"end\": 1702592019551,\n            \"color\": \"#E6B3B3\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"point bar zero busy\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702592019551,\n            \"end\": 1702592056551,\n            \"color\": \"#66E64D\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"advice leaving speak partly dear draw\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702592056551,\n            \"end\": 1702592236551,\n            \"color\": \"#E6331A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"teacher hope soil factor\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702592236551,\n            \"end\": 1702596376551,\n            \"color\": \"#809900\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"managed related leaving\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702596376551,\n            \"end\": 1702599676551,\n            \"color\": \"#9900B3\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"eye pink refused\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702599676551,\n            \"end\": 1702599726551,\n            \"color\": \"#E6331A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"poor kids\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702599726551,\n            \"end\": 1702599792551,\n            \"color\": \"#CC9999\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"main official also perfect party claws hung\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702599792551,\n            \"end\": 1702599859551,\n            \"color\": \"#FF1A66\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"threw design simply design kitchen\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702599859551,\n            \"end\": 1702605859551,\n            \"color\": \"#CC9999\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"burn cross\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702605859551,\n            \"end\": 1702605870551,\n            \"color\": \"#E6B3B3\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"basket school however native look\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702605870551,\n            \"end\": 1702605898551,\n            \"color\": \"#4D80CC\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"slope dark my wood health all\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702605898551,\n            \"end\": 1702605927551,\n            \"color\": \"#E64D66\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"vowel division possible will giving join felt without\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702605927551,\n            \"end\": 1702611627551,\n            \"color\": \"#4D8066\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"identity\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702611627551,\n            \"end\": 1702611685551,\n            \"color\": \"#809900\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"congress ring porch thee\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702611685551,\n            \"end\": 1702617565551,\n            \"color\": \"#1AFF33\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"floor purple chain\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702617565551,\n            \"end\": 1702617621551,\n            \"color\": \"#809980\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"deeply people wagon be\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702617621551,\n            \"end\": 1702617683551,\n            \"color\": \"#999966\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"seen adventure purple page age\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702617683551,\n            \"end\": 1702621583551,\n            \"color\": \"#66994D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"impossible\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702621583551,\n            \"end\": 1702621659551,\n            \"color\": \"#FFB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"nearly himself waste store duck prepare golden tent\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702621659551,\n            \"end\": 1702622139551,\n            \"color\": \"#E6331A\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"locate alive sun serve might ability again\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702622139551,\n            \"end\": 1702622231551,\n            \"color\": \"#6666FF\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"develop dried wheel actual exercise market both whose\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702622231551,\n            \"end\": 1702622831551,\n            \"color\": \"#66E64D\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"discover fire\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702622831551,\n            \"end\": 1702622893551,\n            \"color\": \"#66994D\",\n            \"textColor\": \"#ffffff\"\n        },\n        {\n            \"name\": \"pack\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702622893551,\n            \"end\": 1702626193551,\n            \"color\": \"#FFB399\",\n            \"textColor\": \"#000000\"\n        },\n        {\n            \"name\": \"white\",\n            \"type\": \"smallest vessels\",\n            \"start\": 1702626193551,\n            \"end\": 1702626231551,\n            \"color\": \"#99FF99\",\n            \"textColor\": \"#000000\"\n        }\n    ]\n}\n"},"modified":1702543347229,"location":"9224ac93-50af-4bb9-ac72-89a42b33f031","created":1702543347106,"persisted":1702543347237},"c7287d57-2ee2-42e3-825d-972979419865":{"identifier":{"key":"c7287d57-2ee2-42e3-825d-972979419865","namespace":""},"name":"gantt-chart","type":"gantt-chart","configuration":{"clipActivityNames":true,"swimlaneVisibility":{"send":true,"fort shells":true,"knowledge wear these":true,"popular dead":true,"master":true,"zulu through":true,"she":true,"smallest vessels":true}},"composition":[{"key":"a91e78a2-4c23-40e1-a68e-ccf0ae3afd03","namespace":""}],"modified":1702543398882,"location":"9224ac93-50af-4bb9-ac72-89a42b33f031","created":1702543388951,"persisted":1702543398883},"0eff8b35-2f80-4b33-a663-5e2728d5b164":{"identifier":{"key":"0eff8b35-2f80-4b33-a663-5e2728d5b164","namespace":""},"name":"time-list","type":"timelist","configuration":{"sortOrderIndex":0,"futureEventsIndex":1,"futureEventsDurationIndex":0,"futureEventsDuration":20,"currentEventsIndex":1,"currentEventsDurationIndex":0,"currentEventsDuration":20,"pastEventsIndex":1,"pastEventsDurationIndex":0,"pastEventsDuration":20,"filter":""},"composition":[{"key":"a91e78a2-4c23-40e1-a68e-ccf0ae3afd03","namespace":""}],"modified":1702543429667,"location":"9224ac93-50af-4bb9-ac72-89a42b33f031","created":1702543423050,"persisted":1702543429667},"c2993869-bfdd-41e3-9715-05a5f197606d":{"identifier":{"key":"c2993869-bfdd-41e3-9715-05a5f197606d","namespace":""},"name":"graph-single-1hz-swg","type":"telemetry.plot.bar-graph","composition":[{"key":"4d65d346-898a-49fc-af04-7327eb58fa9b","namespace":""}],"configuration":{"barStyles":{"series":{"4d65d346-898a-49fc-af04-7327eb58fa9b":{"name":"1hz-swg","type":"generator","isAlias":true,"color":"#43b0ff"}}},"axes":{"xKey":"cos","yKey":"wavelengths"},"useInterpolation":"linear","useBar":true},"modified":1702543763413,"location":"9224ac93-50af-4bb9-ac72-89a42b33f031","created":1702543457649,"persisted":1702543763414},"76e675bb-8bbf-4ad3-aa44-5863a631f21f":{"identifier":{"key":"76e675bb-8bbf-4ad3-aa44-5863a631f21f","namespace":""},"name":"scatter-plot-single-1hz-swg","type":"telemetry.plot.scatter-plot","composition":[{"key":"4d65d346-898a-49fc-af04-7327eb58fa9b","namespace":""}],"configuration":{"styles":{"color":"#43b0ff"},"axes":{"xKey":"sin","yKey":"cos"},"ranges":{}},"modified":1702543833753,"location":"9224ac93-50af-4bb9-ac72-89a42b33f031","created":1702543823658,"persisted":1702543833753},"4cd610a5-5afd-4c0d-a2b1-e5a18a1702ac":{"identifier":{"key":"4cd610a5-5afd-4c0d-a2b1-e5a18a1702ac","namespace":""},"name":"web-page","type":"webPage","url":"http://www.nasa.gov","modified":1702543869323,"location":"9224ac93-50af-4bb9-ac72-89a42b33f031","created":1702543869323,"persisted":1702543869323},"c32e44b1-f6fc-46c8-a542-707c426515ca":{"identifier":{"key":"c32e44b1-f6fc-46c8-a542-707c426515ca","namespace":""},"name":"complex-display-layout","type":"layout","composition":[{"key":"4c38e733-c3d8-4b9d-80e0-c1389ddf04f0","namespace":""},{"key":"c7287d57-2ee2-42e3-825d-972979419865","namespace":""},{"key":"c2993869-bfdd-41e3-9715-05a5f197606d","namespace":""},{"key":"7e1f5274-c7a6-45ac-bac4-48750206ab7f","namespace":""},{"key":"6de01ba3-b11f-4cc0-995c-f2d5c4b0cd4e","namespace":""}],"configuration":{"items":[{"width":18,"height":11,"x":1,"y":2,"identifier":{"key":"4c38e733-c3d8-4b9d-80e0-c1389ddf04f0","namespace":""},"hasFrame":true,"fontSize":"default","font":"default","type":"subobject-view","id":"e9eccd6d-2cc4-4e8b-8456-69a05fdbe731"},{"width":43,"height":15,"x":1,"y":14,"identifier":{"key":"c7287d57-2ee2-42e3-825d-972979419865","namespace":""},"hasFrame":true,"fontSize":"default","font":"default","type":"subobject-view","id":"c6320790-6521-4ad8-867c-bde447578e38"},{"width":32,"height":18,"x":1,"y":30,"identifier":{"key":"c2993869-bfdd-41e3-9715-05a5f197606d","namespace":""},"hasFrame":true,"fontSize":"default","font":"default","type":"subobject-view","id":"6364cea5-31ac-4710-b00b-0b13861ebaa6"},{"width":28,"height":18,"x":46,"y":3,"identifier":{"key":"7e1f5274-c7a6-45ac-bac4-48750206ab7f","namespace":""},"hasFrame":true,"fontSize":"default","font":"default","type":"subobject-view","id":"7ea3620c-934f-49ec-804e-ea78c0b16c64"},{"fill":"#666666","stroke":"","x":22,"y":2,"width":10,"height":5,"type":"box-view","id":"6f5f7cad-3028-460a-a43b-ff5be110229e"},{"fill":"","stroke":"","color":"","x":22,"y":8,"width":10,"height":5,"text":"Hello","fontSize":"default","font":"default","type":"text-view","id":"e5df6fc8-31ff-4f79-9c13-9b5e76598042"},{"width":41,"height":26,"x":34,"y":30,"identifier":{"key":"6de01ba3-b11f-4cc0-995c-f2d5c4b0cd4e","namespace":""},"hasFrame":true,"fontSize":"default","font":"default","type":"subobject-view","id":"a97eac92-c2df-47c4-9c3e-c8b432a51688"}],"layoutGrid":[10,10]},"modified":1702544098395,"location":"9224ac93-50af-4bb9-ac72-89a42b33f031","created":1702543946070,"persisted":1702544098396},"6de01ba3-b11f-4cc0-995c-f2d5c4b0cd4e":{"identifier":{"key":"6de01ba3-b11f-4cc0-995c-f2d5c4b0cd4e","namespace":""},"name":"child-display-layout","type":"layout","composition":[{"key":"acb3f054-93f1-4464-958d-fb4ab1192bba","namespace":""},{"key":"0eff8b35-2f80-4b33-a663-5e2728d5b164","namespace":""},{"key":"450bca86-457b-43b7-8940-8fb671a9a66b","namespace":""},{"key":"4cd610a5-5afd-4c0d-a2b1-e5a18a1702ac","namespace":""},{"key":"fd7a7943-bca2-4866-9d49-51ff0b59cdc0","namespace":""},{"key":"4d65d346-898a-49fc-af04-7327eb58fa9b","namespace":""}],"configuration":{"items":[{"width":28,"height":36,"x":2,"y":3,"identifier":{"key":"acb3f054-93f1-4464-958d-fb4ab1192bba","namespace":""},"hasFrame":true,"fontSize":"default","font":"default","type":"subobject-view","id":"aa4ffe19-21d0-45fc-97b6-5fd7a00f5366"},{"width":32,"height":18,"x":32,"y":3,"identifier":{"key":"0eff8b35-2f80-4b33-a663-5e2728d5b164","namespace":""},"hasFrame":true,"fontSize":"default","font":"default","type":"subobject-view","id":"ed9f862f-9b53-4f64-a8a7-a927c4c1e20f"},{"width":15,"height":8,"x":32,"y":23,"identifier":{"key":"450bca86-457b-43b7-8940-8fb671a9a66b","namespace":""},"hasFrame":true,"fontSize":"default","font":"default","type":"subobject-view","id":"b7b0ea51-905d-429c-82d7-6e9d3310ff33"},{"width":32,"height":18,"x":32,"y":33,"identifier":{"key":"4cd610a5-5afd-4c0d-a2b1-e5a18a1702ac","namespace":""},"hasFrame":true,"fontSize":"default","font":"default","type":"subobject-view","id":"1f411695-0170-439d-b44e-6f5790e48191"},{"width":26,"height":15,"x":3,"y":42,"identifier":{"key":"fd7a7943-bca2-4866-9d49-51ff0b59cdc0","namespace":""},"hasFrame":true,"fontSize":"default","font":"default","type":"subobject-view","id":"f03d8fdb-adfb-4517-a488-cb948a0a441f"},{"identifier":{"key":"4d65d346-898a-49fc-af04-7327eb58fa9b","namespace":""},"x":51,"y":24,"width":10,"height":5,"displayMode":"all","value":"sin","stroke":"","fill":"","color":"","fontSize":"default","font":"default","type":"telemetry-view","id":"c090c218-bd9e-4882-b5a9-316c851cc717"}],"layoutGrid":[10,10]},"modified":1702544083000,"location":"9224ac93-50af-4bb9-ac72-89a42b33f031","created":1702544029968,"persisted":1702544083001},"304e4b7e-9c2e-4b07-b6ea-a5f589046169":{"identifier":{"namespace":"","key":"304e4b7e-9c2e-4b07-b6ea-a5f589046169"},"composition":["397ea03e-bc97-4558-9350-bb08e971b0f5","004440ea-2706-457f-964c-786ed7825e02","57a02a0e-d95a-4a57-9452-2e38e7e26548","3f066b75-f807-407f-8e48-3bc30d99d883","00e2856c-eacc-435f-881f-afb371712e26","5918aeb8-a4bb-461d-beff-755b4493bd90","b0156377-4747-40d5-9b81-0571bfeff9a0","7db16413-1c08-42ff-bc74-eac9a22e6a83"],"name":"Mock Spacecraft Telemetry","type":"folder","location":"91849735-bd56-4219-8ee3-e860ba5e1f52","modified":1702542980586,"created":1702542980586,"persisted":1702542980586},"03c1700a-2845-4476-903e-b6d637216c97":{"identifier":{"namespace":"","key":"03c1700a-2845-4476-903e-b6d637216c97"},"type":"folder","location":"91849735-bd56-4219-8ee3-e860ba5e1f52","composition":["bcc3df01-4f62-4ecc-b1c2-075622029199","c3215dc9-0cb1-4989-b57c-37450885fcc6","255bf177-3dc8-49d9-a0ad-3e51592c5a17",{"key":"f522fd95-8f83-47de-9f48-7e18f6b36c7e","namespace":""},{"key":"ba405614-b7d1-4e06-9f41-a38524087583","namespace":""},{"key":"e2f83356-8688-4166-8335-90c0a1cd9676","namespace":""},{"key":"a3eadc8d-fe33-4a1d-b39a-d53a00f7031b","namespace":""},{"key":"e1f998ce-8e4d-4aef-abcb-e77ae69cc7c1","namespace":""},{"key":"57ca2a85-5488-426d-b994-060531e05cd9","namespace":""}],"name":"Components","modified":1702542980595,"conditionalLabel":"","created":1702542980595,"persisted":1702542980595},"397ea03e-bc97-4558-9350-bb08e971b0f5":{"identifier":{"namespace":"","key":"397ea03e-bc97-4558-9350-bb08e971b0f5"},"telemetry":{"period":10000000,"amplitude":"10","offset":0,"dataRateInHz":1,"phase":0,"randomness":0.001},"name":"Navcam Pan","type":"generator","location":"304e4b7e-9c2e-4b07-b6ea-a5f589046169","modified":1702542980618,"id":"397ea03e-bc97-4558-9350-bb08e971b0f5","created":1702542980586,"persisted":1702542980618},"004440ea-2706-457f-964c-786ed7825e02":{"identifier":{"namespace":"","key":"004440ea-2706-457f-964c-786ed7825e02"},"telemetry":{"period":10000000,"amplitude":"10","offset":"0","dataRateInHz":1,"phase":3.14,"randomness":"0.1"},"name":"Joint Velocity","type":"generator","id":"004440ea-2706-457f-964c-786ed7825e02","location":"304e4b7e-9c2e-4b07-b6ea-a5f589046169","modified":1702542980649,"created":1702542980587,"persisted":1702542980649},"57a02a0e-d95a-4a57-9452-2e38e7e26548":{"identifier":{"namespace":"","key":"57a02a0e-d95a-4a57-9452-2e38e7e26548"},"telemetry":{"period":10000000,"amplitude":10,"offset":20,"dataRateInHz":1,"phase":1,"randomness":0.001},"name":"Navcam Tilt","type":"generator","id":"57a02a0e-d95a-4a57-9452-2e38e7e26548","location":"304e4b7e-9c2e-4b07-b6ea-a5f589046169","modified":1702542980621,"created":1702542980588,"persisted":1702542980621},"3f066b75-f807-407f-8e48-3bc30d99d883":{"identifier":{"namespace":"","key":"3f066b75-f807-407f-8e48-3bc30d99d883"},"telemetry":{"period":10000000,"amplitude":20,"offset":0,"dataRateInHz":1,"phase":3.14,"randomness":0.001},"name":"Joint Position","type":"generator","id":"3f066b75-f807-407f-8e48-3bc30d99d883","location":"304e4b7e-9c2e-4b07-b6ea-a5f589046169","modified":1702542980629,"created":1702542980589,"persisted":1702542980629},"00e2856c-eacc-435f-881f-afb371712e26":{"identifier":{"namespace":"","key":"00e2856c-eacc-435f-881f-afb371712e26"},"telemetry":{"period":10000000,"amplitude":100,"offset":100,"dataRateInHz":1,"phase":0,"randomness":0.001},"name":"Battery SOC","type":"generator","id":"00e2856c-eacc-435f-881f-afb371712e26","location":"304e4b7e-9c2e-4b07-b6ea-a5f589046169","modified":1702542980634,"created":1702542980590,"persisted":1702542980634},"5918aeb8-a4bb-461d-beff-755b4493bd90":{"identifier":{"namespace":"","key":"5918aeb8-a4bb-461d-beff-755b4493bd90"},"telemetry":{"period":"1000","amplitude":"25","offset":0,"dataRateInHz":1,"phase":0.5,"randomness":0},"name":"Rover Roll","type":"generator","id":"5918aeb8-a4bb-461d-beff-755b4493bd90","location":"304e4b7e-9c2e-4b07-b6ea-a5f589046169","modified":1702542980642,"created":1702542980591,"persisted":1702542980642},"b0156377-4747-40d5-9b81-0571bfeff9a0":{"identifier":{"namespace":"","key":"b0156377-4747-40d5-9b81-0571bfeff9a0"},"telemetry":{"period":10000000,"amplitude":45,"offset":0,"dataRateInHz":1,"phase":1,"randomness":0.001},"name":"Rover Pitch","type":"generator","id":"b0156377-4747-40d5-9b81-0571bfeff9a0","location":"304e4b7e-9c2e-4b07-b6ea-a5f589046169","modified":1702542980614,"created":1702542980592,"persisted":1702542980614},"7db16413-1c08-42ff-bc74-eac9a22e6a83":{"identifier":{"namespace":"","key":"7db16413-1c08-42ff-bc74-eac9a22e6a83"},"telemetry":{"period":10000000,"amplitude":45,"offset":0,"dataRateInHz":1,"phase":0,"randomness":0.001},"name":"Rover Yaw","type":"generator","id":"7db16413-1c08-42ff-bc74-eac9a22e6a83","location":"304e4b7e-9c2e-4b07-b6ea-a5f589046169","modified":1702542980607,"created":1702542980593,"persisted":1702542980607},"bcc3df01-4f62-4ecc-b1c2-075622029199":{"identifier":{"namespace":"","key":"bcc3df01-4f62-4ecc-b1c2-075622029199"},"composition":["c3215dc9-0cb1-4989-b57c-37450885fcc6",{"key":"e2f83356-8688-4166-8335-90c0a1cd9676","namespace":""},{"key":"a3eadc8d-fe33-4a1d-b39a-d53a00f7031b","namespace":""}],"keep_alive":true,"name":"tab-view-simple-memory-leak-test","type":"tabs","location":"03c1700a-2845-4476-903e-b6d637216c97","modified":1702542980597,"configuration":{"objectStyles":{}},"conditionalLabel":"","created":1702542980597,"currentTabIndex":0,"persisted":1702542980597},"c3215dc9-0cb1-4989-b57c-37450885fcc6":{"identifier":{"namespace":"","key":"c3215dc9-0cb1-4989-b57c-37450885fcc6"},"composition":["397ea03e-bc97-4558-9350-bb08e971b0f5","004440ea-2706-457f-964c-786ed7825e02","57a02a0e-d95a-4a57-9452-2e38e7e26548","3f066b75-f807-407f-8e48-3bc30d99d883","2cfa3b6f-2807-4a29-8185-d81e399ca177","b5bdbdfd-e42a-461f-8a21-3719641b7919","e589e5dc-df04-4dc9-afc1-8e632dee6293","5403b1d6-3d34-4982-a9d2-32dc678d2597","2e17648f-3657-489d-b377-86477c57aa1b","fb26ebc1-9d64-4902-a47c-f33f57d4500f","02027f64-40cc-4966-bbf4-5a7a868dcafb",{"key":"dfc3dea9-a220-4cd2-a363-00401b357ce0","namespace":""},{"key":"01a348fc-e0dd-41c3-a487-e6d4af0ccda2","namespace":""},{"key":"e5bb3185-952b-4b73-9891-fee2050256f3","namespace":""},{"key":"48816cba-16c9-48ad-9717-ec4edf1df8cd","namespace":""}],"configuration":{"items":[{"stroke":"transparent","x":44,"y":10,"width":28,"height":21,"url":"https://i.imgur.com/i1zz1we.png","type":"image-view","id":"3c59df18-90d2-4fe3-b617-1626af59b7ca"},{"x":54,"y":29,"x2":54,"y2":24,"stroke":"#666666","type":"line-view","id":"6a23785c-11da-4d8b-bea5-314d48c21ce8"},{"identifier":{"namespace":"","key":"397ea03e-bc97-4558-9350-bb08e971b0f5"},"x":74,"y":13,"width":19,"height":3,"displayMode":"all","value":"sin","stroke":"","fill":"","color":"","fontSize":"default","font":"default","type":"telemetry-view","id":"fc4ce448-e1be-4d92-9f59-df23405793b4"},{"identifier":{"namespace":"","key":"004440ea-2706-457f-964c-786ed7825e02"},"x":74,"y":19,"width":19,"height":3,"displayMode":"all","value":"sin","stroke":"","fill":"","color":"","fontSize":"default","font":"default","type":"telemetry-view","id":"ac48013e-033f-4a8c-b671-5b2e4aaadd81"},{"identifier":{"namespace":"","key":"57a02a0e-d95a-4a57-9452-2e38e7e26548"},"x":74,"y":9,"width":19,"height":3,"displayMode":"all","value":"sin","stroke":"","fill":"","color":"","fontSize":"default","font":"default","type":"telemetry-view","id":"31789462-91b1-407a-9a76-1a83116b4f36","showUnits":false},{"identifier":{"namespace":"","key":"3f066b75-f807-407f-8e48-3bc30d99d883"},"x":74,"y":23,"width":19,"height":3,"displayMode":"all","value":"sin","stroke":"","fill":"","color":"","fontSize":"default","font":"default","type":"telemetry-view","id":"155b2358-cb82-4baf-ba0d-d7c92f8f44ce"},{"x":70,"y":29,"x2":54,"y2":29,"stroke":"#666666","type":"line-view","id":"a4146b13-056c-4849-9986-c69f24fb81d8"},{"x":74,"y":10,"x2":71,"y2":10,"stroke":"#666666","type":"line-view","id":"63d6b2e5-653c-4a69-b72f-2e0524dcf428"},{"x":67,"y":17,"x2":73,"y2":17,"stroke":"#666666","type":"line-view","id":"828ae816-54a7-4c7f-9ffe-2491f1a80347"},{"width":47,"height":24,"x":0,"y":6,"identifier":{"key":"2cfa3b6f-2807-4a29-8185-d81e399ca177","namespace":""},"hasFrame":false,"fontSize":"default","font":"default","type":"subobject-view","id":"5e6da1c6-639d-4118-99a4-48d8bfa7a15a"},{"width":47,"height":23,"x":0,"y":53,"identifier":{"key":"b5bdbdfd-e42a-461f-8a21-3719641b7919","namespace":""},"hasFrame":true,"fontSize":"default","font":"default","type":"subobject-view","id":"e538408d-2e87-40df-8c0f-ea852781e67a"},{"width":47,"height":23,"x":0,"y":30,"identifier":{"key":"e589e5dc-df04-4dc9-afc1-8e632dee6293","namespace":""},"hasFrame":true,"fontSize":"default","font":"default","type":"subobject-view","id":"56699891-0144-44e6-a5fd-a0bf225109e8"},{"x":74,"y":21,"x2":68,"y2":21,"stroke":"#666666","type":"line-view","id":"e05a1873-3c5d-4e68-8b62-1810230879bc"},{"x":68,"y":27,"x2":68,"y2":21,"stroke":"#666666","type":"line-view","id":"c0e15084-350f-429b-8459-645d0fa337e9"},{"x":71,"y":10,"x2":71,"y2":15,"stroke":"#666666","type":"line-view","id":"af41777d-3027-4626-baa6-2a09cd3983e0"},{"x":67,"y":15,"x2":71,"y2":15,"stroke":"#666666","type":"line-view","id":"5a26d7a7-2905-43b0-bce2-b0b2b942c7bc"},{"x":68,"y":27,"x2":56,"y2":27,"stroke":"#666666","type":"line-view","id":"a0c9206d-be9d-4c73-aeeb-fb48f530b0fe"},{"x":56,"y":27,"x2":56,"y2":24,"stroke":"#666666","type":"line-view","id":"5e264631-1753-4960-9a94-1ee39774f04c"},{"x":73,"y":14,"x2":73,"y2":17,"stroke":"#666666","type":"line-view","id":"c2b0b637-f29c-475d-8ec0-d82637e52a15"},{"x":74,"y":14,"x2":73,"y2":14,"stroke":"#666666","type":"line-view","id":"5eba5795-58b1-4bb5-9dc3-a8dd9427fe98"},{"x":70,"y":29,"x2":70,"y2":24,"stroke":"#666666","type":"line-view","id":"44e1d2dc-3bd4-4cfd-a78b-0df7557742ef"},{"x":74,"y":24,"x2":70,"y2":24,"stroke":"#666666","type":"line-view","id":"3696d4f1-1534-4494-848a-976fc85f478d"},{"width":46,"height":23,"x":47,"y":53,"identifier":{"key":"5403b1d6-3d34-4982-a9d2-32dc678d2597","namespace":""},"hasFrame":true,"fontSize":"default","font":"default","type":"subobject-view","id":"9a744b51-41cc-4fd6-bd14-94846a0a9ca3"},{"width":47,"height":26,"x":0,"y":76,"identifier":{"key":"2e17648f-3657-489d-b377-86477c57aa1b","namespace":""},"hasFrame":true,"fontSize":"default","font":"default","type":"subobject-view","id":"3cc086b3-c035-4fba-b71a-8f5e0af4f732"},{"width":46,"height":23,"x":47,"y":30,"identifier":{"key":"fb26ebc1-9d64-4902-a47c-f33f57d4500f","namespace":""},"hasFrame":true,"fontSize":"default","font":"default","type":"subobject-view","id":"2b9dba11-5314-49b0-81fd-3758e467b1b0"},{"width":46,"height":26,"x":47,"y":76,"identifier":{"key":"02027f64-40cc-4966-bbf4-5a7a868dcafb","namespace":""},"hasFrame":true,"fontSize":"default","font":"default","type":"subobject-view","id":"172f6909-3efc-42a2-8568-933974d013a6"},{"width":23,"height":5,"x":0,"y":0,"identifier":{"key":"dfc3dea9-a220-4cd2-a363-00401b357ce0","namespace":""},"hasFrame":false,"fontSize":"default","font":"default","type":"subobject-view","id":"9f725dd0-44b8-43db-818e-1dce4cb1a376"},{"width":23,"height":5,"x":24,"y":0,"identifier":{"key":"01a348fc-e0dd-41c3-a487-e6d4af0ccda2","namespace":""},"hasFrame":false,"fontSize":"default","font":"default","type":"subobject-view","id":"1dbfd63a-aa8b-4aae-9daa-1de1de8c1bcc"},{"width":23,"height":5,"x":48,"y":0,"identifier":{"key":"e5bb3185-952b-4b73-9891-fee2050256f3","namespace":""},"hasFrame":false,"fontSize":"default","font":"default","type":"subobject-view","id":"74cb215d-851d-440a-8d94-2464e5f86547"},{"width":22,"height":5,"x":72,"y":0,"identifier":{"key":"48816cba-16c9-48ad-9717-ec4edf1df8cd","namespace":""},"hasFrame":false,"fontSize":"default","font":"default","type":"subobject-view","id":"1a894143-a891-4430-9b78-5ece24886eab"}],"layoutGrid":[10,10],"layoutDimensions":{},"objectStyles":{"a4146b13-056c-4849-9986-c69f24fb81d8":{"staticStyle":{"style":{"border":"1px solid #45818e"}}},"6a23785c-11da-4d8b-bea5-314d48c21ce8":{"staticStyle":{"style":{"border":"1px solid #45818e"}}},"63d6b2e5-653c-4a69-b72f-2e0524dcf428":{"staticStyle":{"style":{"border":"1px solid #45818e"}}},"828ae816-54a7-4c7f-9ffe-2491f1a80347":{"staticStyle":{"style":{"border":"1px solid #45818e"}}},"e05a1873-3c5d-4e68-8b62-1810230879bc":{"staticStyle":{"style":{"border":"1px solid #45818e"}}},"c0e15084-350f-429b-8459-645d0fa337e9":{"staticStyle":{"style":{"border":"1px solid #45818e"}}},"af41777d-3027-4626-baa6-2a09cd3983e0":{"staticStyle":{"style":{"border":"1px solid #45818e"}}},"5a26d7a7-2905-43b0-bce2-b0b2b942c7bc":{"staticStyle":{"style":{"border":"1px solid #45818e"}}},"a0c9206d-be9d-4c73-aeeb-fb48f530b0fe":{"staticStyle":{"style":{"border":"1px solid #45818e"}}},"5e264631-1753-4960-9a94-1ee39774f04c":{"staticStyle":{"style":{"border":"1px solid #45818e"}}},"c2b0b637-f29c-475d-8ec0-d82637e52a15":{"staticStyle":{"style":{"border":"1px solid #45818e"}}},"5eba5795-58b1-4bb5-9dc3-a8dd9427fe98":{"staticStyle":{"style":{"border":"1px solid #45818e"}}},"44e1d2dc-3bd4-4cfd-a78b-0df7557742ef":{"staticStyle":{"style":{"border":"1px solid #45818e"}}},"3696d4f1-1534-4494-848a-976fc85f478d":{"staticStyle":{"style":{"border":"1px solid #45818e"}}}}},"name":"display-layout-simple-telemetry","type":"layout","location":"03c1700a-2845-4476-903e-b6d637216c97","modified":1702542980598,"id":"c3215dc9-0cb1-4989-b57c-37450885fcc6","conditionalLabel":"","created":1702542980598,"persisted":1702542980599},"255bf177-3dc8-49d9-a0ad-3e51592c5a17":{"identifier":{"namespace":"","key":"255bf177-3dc8-49d9-a0ad-3e51592c5a17"},"type":"folder","location":"03c1700a-2845-4476-903e-b6d637216c97","composition":["80964387-1304-48d5-8b7f-3063e219fef6","84b92e94-d5f2-4545-9bf9-775eeae700e1","9cb58ae6-1c63-4576-aade-dd5ed3ac1637","5f5a9e82-8e04-4cb4-8c46-37de6173ad5f","a7f011ab-f324-4718-bbc7-9442d9fa8f06","90a1ae05-f10d-48b2-b07c-74cdcca92cfc"],"name":"Imagery","modified":1702542980691,"created":1702542980691,"persisted":1702542980691},"f522fd95-8f83-47de-9f48-7e18f6b36c7e":{"identifier":{"key":"f522fd95-8f83-47de-9f48-7e18f6b36c7e","namespace":""},"name":"Imagery 2","type":"folder","composition":[{"key":"32c7acde-e3fa-4683-a1e4-a5881b39a184","namespace":""},{"key":"2240e46e-7313-4ea4-8747-332e43e0e425","namespace":""},{"key":"45a13587-e235-420c-93fb-e1d158b00548","namespace":""},{"key":"bcdf2b96-0017-4ce2-bd7b-c0b460ade21b","namespace":""},{"key":"447e47a6-95a4-422a-95db-73f02094883b","namespace":""},{"key":"53c49c57-05ea-46d4-9b75-727525a0e33f","namespace":""}],"modified":1702542980717,"location":"03c1700a-2845-4476-903e-b6d637216c97","created":1702542980717,"persisted":1702542980717},"ba405614-b7d1-4e06-9f41-a38524087583":{"identifier":{"key":"ba405614-b7d1-4e06-9f41-a38524087583","namespace":""},"name":"flexible-layout-images-memory-leak-test","type":"flexible-layout","configuration":{"containers":[{"id":"ca9e43d8-a5f4-4af8-bfb1-61d0382621e7","frames":[{"id":"61f5dde1-b550-4b15-9191-41ebdfe11697","domainObjectIdentifier":{"key":"32c7acde-e3fa-4683-a1e4-a5881b39a184","namespace":""},"size":33,"noFrame":false},{"id":"23961564-8a92-4d5c-aecd-833d8d77884e","domainObjectIdentifier":{"key":"45a13587-e235-420c-93fb-e1d158b00548","namespace":""},"size":34,"noFrame":false},{"id":"674929bd-5217-43f1-b4a0-7c28ecca59ab","domainObjectIdentifier":{"key":"bcdf2b96-0017-4ce2-bd7b-c0b460ade21b","namespace":""},"size":33,"noFrame":false}],"size":50},{"id":"8d6ecc4e-7f08-4252-8c53-5c6c00c90ff5","frames":[{"id":"ba897a57-ddaa-428a-98dc-2139e8553896","domainObjectIdentifier":{"key":"2240e46e-7313-4ea4-8747-332e43e0e425","namespace":""},"size":33,"noFrame":false},{"id":"bcbc2248-2853-4183-98a6-2e7e78f3da5d","domainObjectIdentifier":{"key":"447e47a6-95a4-422a-95db-73f02094883b","namespace":""},"size":34,"noFrame":false},{"id":"7cb521c7-d167-48fc-814a-857d37a15dd5","domainObjectIdentifier":{"key":"53c49c57-05ea-46d4-9b75-727525a0e33f","namespace":""},"size":33,"noFrame":false}],"size":50}],"rowsLayout":false},"composition":[{"key":"45a13587-e235-420c-93fb-e1d158b00548","namespace":""},{"key":"bcdf2b96-0017-4ce2-bd7b-c0b460ade21b","namespace":""},{"key":"447e47a6-95a4-422a-95db-73f02094883b","namespace":""},{"key":"53c49c57-05ea-46d4-9b75-727525a0e33f","namespace":""},{"key":"32c7acde-e3fa-4683-a1e4-a5881b39a184","namespace":""},{"key":"2240e46e-7313-4ea4-8747-332e43e0e425","namespace":""}],"modified":1702542980742,"location":"03c1700a-2845-4476-903e-b6d637216c97","created":1702542980742,"persisted":1702542980742},"e2f83356-8688-4166-8335-90c0a1cd9676":{"identifier":{"key":"e2f83356-8688-4166-8335-90c0a1cd9676","namespace":""},"name":"display-layout-images-memory-leak-test","type":"layout","composition":[{"key":"45a13587-e235-420c-93fb-e1d158b00548","namespace":""},{"key":"bcdf2b96-0017-4ce2-bd7b-c0b460ade21b","namespace":""},{"key":"447e47a6-95a4-422a-95db-73f02094883b","namespace":""},{"key":"53c49c57-05ea-46d4-9b75-727525a0e33f","namespace":""},{"key":"32c7acde-e3fa-4683-a1e4-a5881b39a184","namespace":""},{"key":"2240e46e-7313-4ea4-8747-332e43e0e425","namespace":""}],"configuration":{"items":[{"width":42,"height":28,"x":0,"y":0,"identifier":{"key":"45a13587-e235-420c-93fb-e1d158b00548","namespace":""},"hasFrame":true,"fontSize":"default","font":"default","type":"subobject-view","id":"36ec392c-241f-4b12-9d52-3a6cad878140"},{"width":43,"height":28,"x":43,"y":0,"identifier":{"key":"bcdf2b96-0017-4ce2-bd7b-c0b460ade21b","namespace":""},"hasFrame":true,"fontSize":"default","font":"default","type":"subobject-view","id":"63d36f95-8d41-46b7-8621-c34a4799d156"},{"width":42,"height":31,"x":0,"y":29,"identifier":{"key":"447e47a6-95a4-422a-95db-73f02094883b","namespace":""},"hasFrame":true,"fontSize":"default","font":"default","type":"subobject-view","id":"d768d5d3-898d-4528-bbe0-1696b94016b5"},{"width":42,"height":31,"x":43,"y":29,"identifier":{"key":"53c49c57-05ea-46d4-9b75-727525a0e33f","namespace":""},"hasFrame":true,"fontSize":"default","font":"default","type":"subobject-view","id":"1d5acab7-f393-40a9-a27d-963de65f3742"},{"width":42,"height":30,"x":0,"y":61,"identifier":{"key":"32c7acde-e3fa-4683-a1e4-a5881b39a184","namespace":""},"hasFrame":true,"fontSize":"default","font":"default","type":"subobject-view","id":"c030a252-75e7-42ca-b341-7a29f44eda3c"},{"width":42,"height":30,"x":43,"y":61,"identifier":{"key":"2240e46e-7313-4ea4-8747-332e43e0e425","namespace":""},"hasFrame":true,"fontSize":"default","font":"default","type":"subobject-view","id":"b552f249-713a-46b4-8576-116a3b83c35a"}],"layoutGrid":[10,10]},"modified":1702542980659,"location":"03c1700a-2845-4476-903e-b6d637216c97","created":1702542980659,"persisted":1702542980659},"a3eadc8d-fe33-4a1d-b39a-d53a00f7031b":{"identifier":{"key":"a3eadc8d-fe33-4a1d-b39a-d53a00f7031b","namespace":""},"name":"time-strip-telemetry-memory-leak-test","type":"time-strip","composition":[{"key":"32c7acde-e3fa-4683-a1e4-a5881b39a184","namespace":""},{"key":"2240e46e-7313-4ea4-8747-332e43e0e425","namespace":""},{"namespace":"","key":"5403b1d6-3d34-4982-a9d2-32dc678d2597"},{"namespace":"","key":"2e17648f-3657-489d-b377-86477c57aa1b"},{"namespace":"","key":"e589e5dc-df04-4dc9-afc1-8e632dee6293"},{"namespace":"","key":"2cfa3b6f-2807-4a29-8185-d81e399ca177"}],"configuration":{"useIndependentTime":false,"timeOptions":{"clockOffsets":{"start":-900000,"end":30000},"fixedOffsets":{"start":1645902914886,"end":1645903844886},"mode":{"key":"local"}}},"modified":1702542980682,"location":"03c1700a-2845-4476-903e-b6d637216c97","created":1702542980682,"persisted":1702542980682},"e1f998ce-8e4d-4aef-abcb-e77ae69cc7c1":{"identifier":{"key":"e1f998ce-8e4d-4aef-abcb-e77ae69cc7c1","namespace":""},"name":"flexible-layout-plots-memory-leak-test","type":"flexible-layout","configuration":{"containers":[{"id":"4ff28bc6-a480-4efa-82f5-4496e3a68455","frames":[{"id":"a75001d9-9bd1-4508-aefc-296ca84fc028","domainObjectIdentifier":{"namespace":"","key":"5403b1d6-3d34-4982-a9d2-32dc678d2597"},"size":26,"noFrame":false},{"id":"3b146612-3c23-45c3-ad18-813b6641443a","domainObjectIdentifier":{"namespace":"","key":"e589e5dc-df04-4dc9-afc1-8e632dee6293"},"size":25,"noFrame":false},{"id":"9844318c-da0d-4839-83e2-ff42fd3f5581","domainObjectIdentifier":{"namespace":"","key":"2cfa3b6f-2807-4a29-8185-d81e399ca177"},"size":24,"noFrame":false}],"size":50},{"id":"6548300d-0ae2-44da-a5aa-d7c05685fd46","frames":[{"id":"8757a01b-1fcd-465b-bbe0-9864cbdcabe0","domainObjectIdentifier":{"namespace":"","key":"2e17648f-3657-489d-b377-86477c57aa1b"},"size":34,"noFrame":false},{"id":"9e60f0d2-a783-469b-a757-a822eabb2db8","domainObjectIdentifier":{"namespace":"","key":"b5bdbdfd-e42a-461f-8a21-3719641b7919"},"size":33,"noFrame":false},{"id":"1cf2e92c-b991-410a-9ff9-92c5f5a63851","domainObjectIdentifier":{"namespace":"","key":"02027f64-40cc-4966-bbf4-5a7a868dcafb"},"size":33,"noFrame":false}],"size":50}],"rowsLayout":false},"composition":[{"namespace":"","key":"5403b1d6-3d34-4982-a9d2-32dc678d2597"},{"namespace":"","key":"2e17648f-3657-489d-b377-86477c57aa1b"},{"namespace":"","key":"e589e5dc-df04-4dc9-afc1-8e632dee6293"},{"namespace":"","key":"b5bdbdfd-e42a-461f-8a21-3719641b7919"},{"namespace":"","key":"2cfa3b6f-2807-4a29-8185-d81e399ca177"},{"namespace":"","key":"02027f64-40cc-4966-bbf4-5a7a868dcafb"}],"modified":1702542980769,"location":"03c1700a-2845-4476-903e-b6d637216c97","created":1702542980769,"persisted":1702542980769},"57ca2a85-5488-426d-b994-060531e05cd9":{"identifier":{"key":"57ca2a85-5488-426d-b994-060531e05cd9","namespace":""},"name":"Demo Conditions","type":"folder","composition":[{"key":"fa8b9a91-57ed-47a8-971a-7b604a822801","namespace":""},{"key":"098a3834-5fd3-4ed2-b9e2-f3191fea5d56","namespace":""},{"key":"3d8e6617-4479-467d-8a90-7ab24e2e5514","namespace":""},{"key":"e5bb3185-952b-4b73-9891-fee2050256f3","namespace":""},{"key":"01a348fc-e0dd-41c3-a487-e6d4af0ccda2","namespace":""},{"key":"dfc3dea9-a220-4cd2-a363-00401b357ce0","namespace":""},{"key":"48816cba-16c9-48ad-9717-ec4edf1df8cd","namespace":""},{"key":"99040f3d-3a35-4e35-b2d6-ba76c1302fd4","namespace":""}],"modified":1702542980773,"location":"03c1700a-2845-4476-903e-b6d637216c97","created":1702542980773,"persisted":1702542980773},"5403b1d6-3d34-4982-a9d2-32dc678d2597":{"identifier":{"namespace":"","key":"5403b1d6-3d34-4982-a9d2-32dc678d2597"},"type":"telemetry.plot.overlay","composition":["397ea03e-bc97-4558-9350-bb08e971b0f5"],"configuration":{"series":[{"identifier":{"namespace":"","key":"397ea03e-bc97-4558-9350-bb08e971b0f5"},"alarmMarkers":false,"color":"#43b0ff"}],"yAxis":{},"xAxis":{}},"name":"Navcam Pan","location":"c3215dc9-0cb1-4989-b57c-37450885fcc6","modified":1702542980616,"created":1702542980616,"persisted":1702542980616},"2e17648f-3657-489d-b377-86477c57aa1b":{"identifier":{"namespace":"","key":"2e17648f-3657-489d-b377-86477c57aa1b"},"type":"telemetry.plot.overlay","composition":["57a02a0e-d95a-4a57-9452-2e38e7e26548"],"configuration":{"series":[{"identifier":{"namespace":"","key":"57a02a0e-d95a-4a57-9452-2e38e7e26548"},"alarmMarkers":false}],"yAxis":{},"xAxis":{}},"name":"Navcam Tilt","location":"c3215dc9-0cb1-4989-b57c-37450885fcc6","modified":1702542980620,"created":1702542980620,"persisted":1702542980620},"e589e5dc-df04-4dc9-afc1-8e632dee6293":{"identifier":{"namespace":"","key":"e589e5dc-df04-4dc9-afc1-8e632dee6293"},"type":"telemetry.plot.overlay","composition":["b0156377-4747-40d5-9b81-0571bfeff9a0"],"configuration":{"series":[{"identifier":{"namespace":"","key":"b0156377-4747-40d5-9b81-0571bfeff9a0"},"color":"#43b0ff","alarmMarkers":false}],"yAxis":{},"xAxis":{}},"name":"Rover Pitch","location":"c3215dc9-0cb1-4989-b57c-37450885fcc6","modified":1702542980613,"created":1702542980613,"persisted":1702542980613},"b5bdbdfd-e42a-461f-8a21-3719641b7919":{"identifier":{"namespace":"","key":"b5bdbdfd-e42a-461f-8a21-3719641b7919"},"type":"telemetry.plot.overlay","composition":["5918aeb8-a4bb-461d-beff-755b4493bd90"],"configuration":{"series":[{"identifier":{"namespace":"","key":"5918aeb8-a4bb-461d-beff-755b4493bd90"},"color":"#8cc9fd","alarmMarkers":false}],"yAxis":{},"xAxis":{}},"name":"Rover Roll","location":"c3215dc9-0cb1-4989-b57c-37450885fcc6","modified":1702542980609,"created":1702542980609,"persisted":1702542980609},"2cfa3b6f-2807-4a29-8185-d81e399ca177":{"identifier":{"namespace":"","key":"2cfa3b6f-2807-4a29-8185-d81e399ca177"},"type":"telemetry.plot.overlay","composition":["7db16413-1c08-42ff-bc74-eac9a22e6a83"],"configuration":{"series":[{"identifier":{"namespace":"","key":"7db16413-1c08-42ff-bc74-eac9a22e6a83"},"color":"#43b0ff","alarmMarkers":false,"limitLines":true}],"yAxis":{},"xAxis":{},"useIndependentTime":false},"name":"Rover Yaw","location":"c3215dc9-0cb1-4989-b57c-37450885fcc6","modified":1702542980606,"created":1702542980606,"persisted":1702542980606},"02027f64-40cc-4966-bbf4-5a7a868dcafb":{"identifier":{"namespace":"","key":"02027f64-40cc-4966-bbf4-5a7a868dcafb"},"type":"telemetry.plot.overlay","composition":["3f066b75-f807-407f-8e48-3bc30d99d883"],"configuration":{"series":[{"identifier":{"namespace":"","key":"3f066b75-f807-407f-8e48-3bc30d99d883"},"alarmMarkers":false}],"yAxis":{},"xAxis":{}},"name":"Joint Position","location":"c3215dc9-0cb1-4989-b57c-37450885fcc6","modified":1702542980627,"created":1702542980627,"persisted":1702542980627},"fb26ebc1-9d64-4902-a47c-f33f57d4500f":{"identifier":{"namespace":"","key":"fb26ebc1-9d64-4902-a47c-f33f57d4500f"},"type":"telemetry.plot.overlay","composition":["004440ea-2706-457f-964c-786ed7825e02"],"configuration":{"series":[{"identifier":{"namespace":"","key":"004440ea-2706-457f-964c-786ed7825e02"},"color":"#43b0ff","alarmMarkers":false,"limitLines":true}],"yAxis":{"autoscale":false,"range":{"min":5,"max":13}},"xAxis":{}},"name":"Joint Velocity","location":"c3215dc9-0cb1-4989-b57c-37450885fcc6","modified":1702542980623,"created":1702542980623,"persisted":1702542980623},"dfc3dea9-a220-4cd2-a363-00401b357ce0":{"identifier":{"key":"dfc3dea9-a220-4cd2-a363-00401b357ce0","namespace":""},"name":"Battery Widget","type":"conditionWidget","configuration":{"objectStyles":{"styles":[{"conditionId":"735765b4-bf8f-4a54-b31d-3fdf6282503e","style":{"isStyleInvisible":"","backgroundColor":"#274e13","border":"1px solid #00ff00","color":"#00ff00","output":"BATT. GOOD"}},{"conditionId":"d849fc0b-a42d-4551-b456-cd0d6a35f216","style":{"isStyleInvisible":"","backgroundColor":"#b45f06","border":"1px solid #ffff00","color":"#ffff00","output":"BATT. MODERATE"}},{"conditionId":"0d5c4526-37bf-449c-bf21-4aaec93b088c","style":{"isStyleInvisible":"","backgroundColor":"#660000","border":"1px solid #ff0000","color":"#ff0000","output":"BATT. MARGINAL"}},{"conditionId":"7331d95a-aa7b-44c3-bf46-c9f78c64c344","style":{"isStyleInvisible":"","backgroundColor":"","border":"","color":"","output":"BATT. ERROR"}}],"staticStyle":{"style":{"backgroundColor":"","border":"","color":""}},"selectedConditionId":"7331d95a-aa7b-44c3-bf46-c9f78c64c344","defaultConditionId":"7331d95a-aa7b-44c3-bf46-c9f78c64c344","conditionSetIdentifier":{"key":"098a3834-5fd3-4ed2-b9e2-f3191fea5d56","namespace":""}},"useConditionSetOutputAsLabel":true},"label":"Battery Widget","conditionalLabel":"BATT. MODERATE","modified":1702542980631,"location":"57ca2a85-5488-426d-b994-060531e05cd9","created":1702542980631,"persisted":1702542980631},"01a348fc-e0dd-41c3-a487-e6d4af0ccda2":{"identifier":{"key":"01a348fc-e0dd-41c3-a487-e6d4af0ccda2","namespace":""},"name":"Roll Widget","type":"conditionWidget","configuration":{"objectStyles":{"styles":[{"conditionId":"56c960e7-a5a5-43c1-b396-3e21889015ee","style":{"isStyleInvisible":"","backgroundColor":"#660000","border":"1px solid #ff0000","color":"#ff0000","output":"ROLL DANGER"}},{"conditionId":"04ee9247-e704-4c1a-a377-c572f93e9b44","style":{"isStyleInvisible":"","backgroundColor":"#660000","border":"1px solid #ff0000","color":"#ff0000","output":"ROLL DANGER"}},{"conditionId":"6ca762eb-343d-4757-b219-dbbac8a387e6","style":{"isStyleInvisible":"","backgroundColor":"#bf9000","border":"1px solid #ffff00","color":"#ffff00","output":"ROLL WARN."}},{"conditionId":"497ec5d7-75fb-429c-b16c-70dc8200f540","style":{"isStyleInvisible":"","backgroundColor":"#bf9000","border":"1px solid #ffff00","color":"#ffff00","output":"ROLL WARN."}},{"conditionId":"1184d0cc-555d-46ae-a48b-72ee8264934e","style":{"isStyleInvisible":"","backgroundColor":"#38761d","border":"1px solid #00ff00","color":"#00ff00","output":"ROLL OK"}},{"conditionId":"5f345f62-eed3-42d0-8c88-0e654b5c378e","style":{"isStyleInvisible":"","backgroundColor":"","border":"","color":"","output":"ROLL ERR."}}],"staticStyle":{"style":{"backgroundColor":"","border":"","color":""}},"selectedConditionId":"5f345f62-eed3-42d0-8c88-0e654b5c378e","defaultConditionId":"5f345f62-eed3-42d0-8c88-0e654b5c378e","conditionSetIdentifier":{"key":"3d8e6617-4479-467d-8a90-7ab24e2e5514","namespace":""}},"useConditionSetOutputAsLabel":true},"label":"Condition Widget","conditionalLabel":"ROLL DANGER","modified":1702542980637,"location":"57ca2a85-5488-426d-b994-060531e05cd9","created":1702542980637,"persisted":1702542980637},"e5bb3185-952b-4b73-9891-fee2050256f3":{"identifier":{"key":"e5bb3185-952b-4b73-9891-fee2050256f3","namespace":""},"name":"Mobility System","type":"conditionWidget","configuration":{"objectStyles":{"styles":[{"conditionId":"be20ffef-b80e-491d-8f4e-fbd14a104926","style":{"isStyleInvisible":"","backgroundColor":"#38761d","border":"1px solid #00ff00","color":"#00ff00","output":"MOBILE"}},{"conditionId":"7cf90ae1-4742-476a-a81b-f6d5bc2feb58","style":{"isStyleInvisible":"","backgroundColor":"#666666","border":"","color":"","output":"STATIONARY"}}],"staticStyle":{"style":{"backgroundColor":"","border":"","color":""}},"selectedConditionId":"7cf90ae1-4742-476a-a81b-f6d5bc2feb58","defaultConditionId":"7cf90ae1-4742-476a-a81b-f6d5bc2feb58","conditionSetIdentifier":{"key":"fa8b9a91-57ed-47a8-971a-7b604a822801","namespace":""}},"useConditionSetOutputAsLabel":true},"label":"Condition Widget","conditionalLabel":"MOBILE","modified":1702542980644,"location":"57ca2a85-5488-426d-b994-060531e05cd9","created":1702542980644,"persisted":1702542980644},"48816cba-16c9-48ad-9717-ec4edf1df8cd":{"identifier":{"key":"48816cba-16c9-48ad-9717-ec4edf1df8cd","namespace":""},"name":"Thermal Widget","type":"conditionWidget","configuration":{"objectStyles":{"staticStyle":{"style":{"backgroundColor":"","border":"","color":""}},"styles":[{"conditionId":"735765b4-bf8f-4a54-b31d-3fdf6282503e","style":{"isStyleInvisible":"","backgroundColor":"#274e13","border":"1px solid #00ff00","color":"#00ff00","output":"THERMAL GOOD"}},{"conditionId":"d849fc0b-a42d-4551-b456-cd0d6a35f216","style":{"isStyleInvisible":"","backgroundColor":"#b45f06","border":"1px solid #ffff00","color":"#ffff00","output":"THERMAL WARN."}},{"conditionId":"0d5c4526-37bf-449c-bf21-4aaec93b088c","style":{"isStyleInvisible":"","backgroundColor":"#660000","border":"1px solid #ff0000","color":"#ff0000","output":"THERMAL DANGER"}},{"conditionId":"7331d95a-aa7b-44c3-bf46-c9f78c64c344","style":{"isStyleInvisible":"","backgroundColor":"","border":"","color":"","output":"BATT. ERROR"}}],"selectedConditionId":"7331d95a-aa7b-44c3-bf46-c9f78c64c344","defaultConditionId":"7331d95a-aa7b-44c3-bf46-c9f78c64c344","conditionSetIdentifier":{"key":"99040f3d-3a35-4e35-b2d6-ba76c1302fd4","namespace":""}},"useConditionSetOutputAsLabel":true},"label":"Battery Widget","conditionalLabel":"THERMAL WARN.","location":"57ca2a85-5488-426d-b994-060531e05cd9","modified":1702542980651,"created":1702542980651,"persisted":1702542980651},"80964387-1304-48d5-8b7f-3063e219fef6":{"identifier":{"namespace":"","key":"80964387-1304-48d5-8b7f-3063e219fef6"},"telemetry":{"values":[{"name":"Name","key":"name","source":"name","hints":{"priority":0}},{"name":"Time","key":"utc","format":"utc","hints":{"domain":2,"priority":1},"source":"utc"},{"name":"Local Time","key":"local","format":"local-format","hints":{"domain":1,"priority":2},"source":"local"},{"name":"Image","key":"url","format":"image","hints":{"image":1,"priority":3},"source":"url"},{"name":"Image Download Name","key":"imageDownloadName","format":"imageDownloadName","hints":{"imageDownloadName":1,"priority":4},"source":"imageDownloadName"}]},"name":"Navcam Left","type":"example.imagery","location":"255bf177-3dc8-49d9-a0ad-3e51592c5a17","modified":1702542980695,"id":"80964387-1304-48d5-8b7f-3063e219fef6","created":1702542980694,"persisted":1702542980695},"84b92e94-d5f2-4545-9bf9-775eeae700e1":{"identifier":{"namespace":"","key":"84b92e94-d5f2-4545-9bf9-775eeae700e1"},"telemetry":{"values":[{"name":"Name","key":"name","source":"name","hints":{"priority":0}},{"name":"Time","key":"utc","format":"utc","hints":{"domain":2,"priority":1},"source":"utc"},{"name":"Local Time","key":"local","format":"local-format","hints":{"domain":1,"priority":2},"source":"local"},{"name":"Image","key":"url","format":"image","hints":{"image":1,"priority":3},"source":"url"},{"name":"Image Download Name","key":"imageDownloadName","format":"imageDownloadName","hints":{"imageDownloadName":1,"priority":4},"source":"imageDownloadName"}]},"name":"Navcam Right","type":"example.imagery","location":"255bf177-3dc8-49d9-a0ad-3e51592c5a17","modified":1702542980698,"created":1702542980698,"persisted":1702542980698},"9cb58ae6-1c63-4576-aade-dd5ed3ac1637":{"identifier":{"namespace":"","key":"9cb58ae6-1c63-4576-aade-dd5ed3ac1637"},"telemetry":{"values":[{"name":"Name","key":"name","source":"name","hints":{"priority":0}},{"name":"Time","key":"utc","format":"utc","hints":{"domain":2,"priority":1},"source":"utc"},{"name":"Local Time","key":"local","format":"local-format","hints":{"domain":1,"priority":2},"source":"local"},{"name":"Image","key":"url","format":"image","hints":{"image":1,"priority":3},"source":"url"},{"name":"Image Download Name","key":"imageDownloadName","format":"imageDownloadName","hints":{"imageDownloadName":1,"priority":4},"source":"imageDownloadName"}]},"name":"Hazcam RR","type":"example.imagery","location":"255bf177-3dc8-49d9-a0ad-3e51592c5a17","modified":1702542980702,"created":1702542980702,"persisted":1702542980702},"5f5a9e82-8e04-4cb4-8c46-37de6173ad5f":{"identifier":{"namespace":"","key":"5f5a9e82-8e04-4cb4-8c46-37de6173ad5f"},"telemetry":{"values":[{"name":"Name","key":"name","source":"name","hints":{"priority":0}},{"name":"Time","key":"utc","format":"utc","hints":{"domain":2,"priority":1},"source":"utc"},{"name":"Local Time","key":"local","format":"local-format","hints":{"domain":1,"priority":2},"source":"local"},{"name":"Image","key":"url","format":"image","hints":{"image":1,"priority":3},"source":"url"},{"name":"Image Download Name","key":"imageDownloadName","format":"imageDownloadName","hints":{"imageDownloadName":1,"priority":4},"source":"imageDownloadName"}]},"name":"Hazcam RL","type":"example.imagery","location":"255bf177-3dc8-49d9-a0ad-3e51592c5a17","modified":1702542980706,"created":1702542980706,"persisted":1702542980706},"a7f011ab-f324-4718-bbc7-9442d9fa8f06":{"identifier":{"namespace":"","key":"a7f011ab-f324-4718-bbc7-9442d9fa8f06"},"telemetry":{"values":[{"name":"Name","key":"name","source":"name","hints":{"priority":0}},{"name":"Time","key":"utc","format":"utc","hints":{"domain":2,"priority":1},"source":"utc"},{"name":"Local Time","key":"local","format":"local-format","hints":{"domain":1,"priority":2},"source":"local"},{"name":"Image","key":"url","format":"image","hints":{"image":1,"priority":3},"source":"url"},{"name":"Image Download Name","key":"imageDownloadName","format":"imageDownloadName","hints":{"imageDownloadName":1,"priority":4},"source":"imageDownloadName"}]},"name":"Hazcam FL","type":"example.imagery","location":"255bf177-3dc8-49d9-a0ad-3e51592c5a17","modified":1702542980709,"created":1702542980709,"persisted":1702542980709},"90a1ae05-f10d-48b2-b07c-74cdcca92cfc":{"identifier":{"namespace":"","key":"90a1ae05-f10d-48b2-b07c-74cdcca92cfc"},"telemetry":{"values":[{"name":"Name","key":"name","source":"name","hints":{"priority":0}},{"name":"Time","key":"utc","format":"utc","hints":{"domain":2,"priority":1},"source":"utc"},{"name":"Local Time","key":"local","format":"local-format","hints":{"domain":1,"priority":2},"source":"local"},{"name":"Image","key":"url","format":"image","hints":{"image":1,"priority":3},"source":"url"},{"name":"Image Download Name","key":"imageDownloadName","format":"imageDownloadName","hints":{"imageDownloadName":1,"priority":4},"source":"imageDownloadName"}]},"name":"Hazcam FR","type":"example.imagery","location":"255bf177-3dc8-49d9-a0ad-3e51592c5a17","modified":1702542980713,"created":1702542980713,"persisted":1702542980713},"32c7acde-e3fa-4683-a1e4-a5881b39a184":{"identifier":{"key":"32c7acde-e3fa-4683-a1e4-a5881b39a184","namespace":""},"name":"Navcam Left","type":"example.imagery","configuration":{"imageLocation":"https://www.hq.nasa.gov/alsj/a16/AS16-117-18731.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18732.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18733.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18734.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18735.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18736.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18737.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18738.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18739.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18740.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18741.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18742.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18743.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18744.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18745.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18746.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18747.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18748.jpg","imageLoadDelayInMilliSeconds":20000,"imageSamples":[],"layers":[]},"telemetry":{"values":[{"name":"Name","key":"name","source":"name","hints":{"priority":0}},{"name":"Time","key":"utc","format":"utc","hints":{"domain":2,"priority":1},"source":"utc"},{"name":"Local Time","key":"local","format":"local-format","hints":{"domain":1,"priority":2},"source":"local"},{"name":"Image","key":"url","format":"image","hints":{"image":1,"priority":3},"source":"url"},{"name":"Image Download Name","key":"imageDownloadName","format":"imageDownloadName","hints":{"imageDownloadName":1,"priority":4},"source":"imageDownloadName"}]},"modified":1702542980761,"location":"f522fd95-8f83-47de-9f48-7e18f6b36c7e","created":1702542980675,"persisted":1702542980761},"2240e46e-7313-4ea4-8747-332e43e0e425":{"identifier":{"key":"2240e46e-7313-4ea4-8747-332e43e0e425","namespace":""},"name":"Navcam Right","type":"example.imagery","configuration":{"imageLocation":"https://www.hq.nasa.gov/alsj/a16/AS16-117-18731.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18732.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18733.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18734.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18735.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18736.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18737.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18738.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18739.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18740.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18741.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18742.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18743.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18744.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18745.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18746.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18747.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18748.jpg","imageLoadDelayInMilliSeconds":20000,"imageSamples":[],"layers":[]},"telemetry":{"values":[{"name":"Name","key":"name","source":"name","hints":{"priority":0}},{"name":"Time","key":"utc","format":"utc","hints":{"domain":2,"priority":1},"source":"utc"},{"name":"Local Time","key":"local","format":"local-format","hints":{"domain":1,"priority":2},"source":"local"},{"name":"Image","key":"url","format":"image","hints":{"image":1,"priority":3},"source":"url"},{"name":"Image Download Name","key":"imageDownloadName","format":"imageDownloadName","hints":{"imageDownloadName":1,"priority":4},"source":"imageDownloadName"}]},"location":"f522fd95-8f83-47de-9f48-7e18f6b36c7e","modified":1702542980765,"created":1702542980678,"persisted":1702542980765},"45a13587-e235-420c-93fb-e1d158b00548":{"identifier":{"key":"45a13587-e235-420c-93fb-e1d158b00548","namespace":""},"name":"example-imagery-memory-leak-test","type":"example.imagery","configuration":{"imageLocation":"https://www.hq.nasa.gov/alsj/a16/AS16-117-18738.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18739.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18740.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18741.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18742.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18743.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18744.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18731.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18732.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18733.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18734.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18735.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18736.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18737.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18745.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18746.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18747.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18748.jpg","imageLoadDelayInMilliSeconds":"10000","imageSamples":[],"layers":[]},"telemetry":{"values":[{"name":"Name","key":"name","source":"name","hints":{"priority":0}},{"name":"Time","key":"utc","format":"utc","hints":{"domain":2,"priority":1},"source":"utc"},{"name":"Local Time","key":"local","format":"local-format","hints":{"domain":1,"priority":2},"source":"local"},{"name":"Image","key":"url","format":"image","hints":{"image":1,"priority":3},"source":"url"},{"name":"Image Download Name","key":"imageDownloadName","format":"imageDownloadName","hints":{"imageDownloadName":1,"priority":4},"source":"imageDownloadName"}]},"location":"f522fd95-8f83-47de-9f48-7e18f6b36c7e","modified":1702542980746,"created":1702542980662,"persisted":1702542980746},"bcdf2b96-0017-4ce2-bd7b-c0b460ade21b":{"identifier":{"key":"bcdf2b96-0017-4ce2-bd7b-c0b460ade21b","namespace":""},"name":"Hazcam FR","type":"example.imagery","configuration":{"imageLocation":"https://www.hq.nasa.gov/alsj/a16/AS16-117-18739.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18740.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18741.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18742.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18743.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18744.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18745.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18746.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18731.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18732.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18733.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18734.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18735.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18736.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18737.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18738.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18747.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18748.jpg","imageLoadDelayInMilliSeconds":"15000","imageSamples":[],"layers":[]},"telemetry":{"values":[{"name":"Name","key":"name","source":"name","hints":{"priority":0}},{"name":"Time","key":"utc","format":"utc","hints":{"domain":2,"priority":1},"source":"utc"},{"name":"Local Time","key":"local","format":"local-format","hints":{"domain":1,"priority":2},"source":"local"},{"name":"Image","key":"url","format":"image","hints":{"image":1,"priority":3},"source":"url"},{"name":"Image Download Name","key":"imageDownloadName","format":"imageDownloadName","hints":{"imageDownloadName":1,"priority":4},"source":"imageDownloadName"}]},"location":"f522fd95-8f83-47de-9f48-7e18f6b36c7e","modified":1702542980750,"created":1702542980665,"persisted":1702542980750},"447e47a6-95a4-422a-95db-73f02094883b":{"identifier":{"key":"447e47a6-95a4-422a-95db-73f02094883b","namespace":""},"name":"Hazcam RL","type":"example.imagery","configuration":{"imageLocation":"https://www.hq.nasa.gov/alsj/a16/AS16-117-18731.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18732.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18733.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18734.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18735.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18736.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18737.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18738.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18739.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18740.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18741.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18742.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18743.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18744.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18745.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18746.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18747.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18748.jpg","imageLoadDelayInMilliSeconds":20000,"imageSamples":[],"layers":[]},"telemetry":{"values":[{"name":"Name","key":"name","source":"name","hints":{"priority":0}},{"name":"Time","key":"utc","format":"utc","hints":{"domain":2,"priority":1},"source":"utc"},{"name":"Local Time","key":"local","format":"local-format","hints":{"domain":1,"priority":2},"source":"local"},{"name":"Image","key":"url","format":"image","hints":{"image":1,"priority":3},"source":"url"},{"name":"Image Download Name","key":"imageDownloadName","format":"imageDownloadName","hints":{"imageDownloadName":1,"priority":4},"source":"imageDownloadName"}]},"location":"f522fd95-8f83-47de-9f48-7e18f6b36c7e","modified":1702542980753,"created":1702542980668,"persisted":1702542980753},"53c49c57-05ea-46d4-9b75-727525a0e33f":{"identifier":{"key":"53c49c57-05ea-46d4-9b75-727525a0e33f","namespace":""},"name":"Hazcam RR","type":"example.imagery","configuration":{"imageLocation":"https://www.hq.nasa.gov/alsj/a16/AS16-117-18737.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18738.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18739.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18740.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18741.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18742.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18743.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18744.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18745.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18746.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18731.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18732.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18733.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18734.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18735.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18736.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18747.jpg,\nhttps://www.hq.nasa.gov/alsj/a16/AS16-117-18748.jpg","imageLoadDelayInMilliSeconds":"17000","imageSamples":[],"layers":[]},"telemetry":{"values":[{"name":"Name","key":"name","source":"name","hints":{"priority":0}},{"name":"Time","key":"utc","format":"utc","hints":{"domain":2,"priority":1},"source":"utc"},{"name":"Local Time","key":"local","format":"local-format","hints":{"domain":1,"priority":2},"source":"local"},{"name":"Image","key":"url","format":"image","hints":{"image":1,"priority":3},"source":"url"},{"name":"Image Download Name","key":"imageDownloadName","format":"imageDownloadName","hints":{"imageDownloadName":1,"priority":4},"source":"imageDownloadName"}]},"location":"f522fd95-8f83-47de-9f48-7e18f6b36c7e","modified":1702542980757,"created":1702542980672,"persisted":1702542980758},"fa8b9a91-57ed-47a8-971a-7b604a822801":{"identifier":{"key":"fa8b9a91-57ed-47a8-971a-7b604a822801","namespace":""},"name":"Mobility System","type":"conditionSet","configuration":{"conditionTestData":[],"conditionCollection":[{"id":"be20ffef-b80e-491d-8f4e-fbd14a104926","configuration":{"name":"MOBILE","output":"MOBILE","trigger":"all","criteria":[{"id":"9e751e8c-9ed0-4676-b19d-796f3b55febb","telemetry":{"namespace":"","key":"004440ea-2706-457f-964c-786ed7825e02"},"operation":"greaterThan","input":["0"],"metadata":"sin"}]},"summary":"Match if all criteria are met:  Joint Velocity Sine  > 0 "},{"isDefault":true,"id":"7cf90ae1-4742-476a-a81b-f6d5bc2feb58","configuration":{"name":"STATIONARY","output":"STATIONARY","trigger":"all","criteria":[]},"summary":""}]},"composition":[{"namespace":"","key":"004440ea-2706-457f-964c-786ed7825e02"}],"telemetry":{},"modified":1702542980647,"location":"57ca2a85-5488-426d-b994-060531e05cd9","created":1702542980647,"persisted":1702542980647},"098a3834-5fd3-4ed2-b9e2-f3191fea5d56":{"identifier":{"key":"098a3834-5fd3-4ed2-b9e2-f3191fea5d56","namespace":""},"name":"Battery System","type":"conditionSet","configuration":{"conditionTestData":[],"conditionCollection":[{"id":"735765b4-bf8f-4a54-b31d-3fdf6282503e","configuration":{"name":"Good Charge","output":"BATT. GOOD","trigger":"all","criteria":[{"id":"cef3f1fa-77f4-4284-a299-19c82803fb50","telemetry":{"namespace":"","key":"00e2856c-eacc-435f-881f-afb371712e26"},"operation":"greaterThan","input":["50"],"metadata":"sin"}]},"summary":"Match if all criteria are met:  Battery SOC Sine  > 50 "},{"id":"d849fc0b-a42d-4551-b456-cd0d6a35f216","configuration":{"name":"Moderate Charge","output":"BATT. MODERATE","trigger":"all","criteria":[{"id":"905362dd-0b55-4955-a768-c8597651cfdb","telemetry":{"namespace":"","key":"00e2856c-eacc-435f-881f-afb371712e26"},"operation":"greaterThan","input":["20"],"metadata":"sin"},{"id":"c3e3a90d-3cfc-4e47-bfff-377dc142a367","telemetry":{"namespace":"","key":"00e2856c-eacc-435f-881f-afb371712e26"},"operation":"lessThan","input":["50"],"metadata":"sin"}]},"summary":"Match if all criteria are met:  Battery SOC Sine  > 20 and Battery SOC Sine  < 50 "},{"id":"0d5c4526-37bf-449c-bf21-4aaec93b088c","configuration":{"name":"Marginal Charge","output":"BATT. MARGINAL","trigger":"all","criteria":[{"id":"3247c741-26cb-49b0-97ed-dc8cc9c4df33","telemetry":{"namespace":"","key":"00e2856c-eacc-435f-881f-afb371712e26"},"operation":"greaterThan","input":["0"],"metadata":"sin"},{"id":"8124207a-c2a9-4fc4-bec9-77af2b713b50","telemetry":{"namespace":"","key":"00e2856c-eacc-435f-881f-afb371712e26"},"operation":"greaterThanOrEq","input":["20"],"metadata":"sin"}]},"summary":"Match if all criteria are met:  Battery SOC Sine  > 0 and Battery SOC Sine  >= 20 "},{"isDefault":true,"id":"7331d95a-aa7b-44c3-bf46-c9f78c64c344","configuration":{"name":"Default","output":"BATT. ERROR","trigger":"all","criteria":[]},"summary":""}]},"composition":[{"namespace":"","key":"00e2856c-eacc-435f-881f-afb371712e26"}],"telemetry":{},"modified":1702542980633,"location":"57ca2a85-5488-426d-b994-060531e05cd9","created":1702542980632,"persisted":1702542980633},"3d8e6617-4479-467d-8a90-7ab24e2e5514":{"identifier":{"key":"3d8e6617-4479-467d-8a90-7ab24e2e5514","namespace":""},"name":"Rover Roll","type":"conditionSet","configuration":{"conditionTestData":[],"conditionCollection":[{"id":"56c960e7-a5a5-43c1-b396-3e21889015ee","configuration":{"name":"DANGER","output":"ROLL DANGER","trigger":"all","criteria":[{"id":"7399459d-c932-4868-b1e8-77eaf9173c3a","telemetry":{"namespace":"","key":"5918aeb8-a4bb-461d-beff-755b4493bd90"},"operation":"greaterThan","input":["15"],"metadata":"sin"}]},"summary":"Match if all criteria are met:  Rover Roll Sine  > 15 "},{"id":"04ee9247-e704-4c1a-a377-c572f93e9b44","configuration":{"name":"DANGER LOW","output":"ROLL DANGER","trigger":"all","criteria":[{"id":"f33ac547-868d-49b6-aa1d-1ad3228e6a21","telemetry":{"namespace":"","key":"5918aeb8-a4bb-461d-beff-755b4493bd90"},"operation":"lessThan","input":["-15"],"metadata":"sin"}]},"summary":"Match if all criteria are met:  Rover Roll Sine  < -15 "},{"id":"6ca762eb-343d-4757-b219-dbbac8a387e6","configuration":{"name":"WARNING","output":"ROLL WARN.","trigger":"all","criteria":[{"id":"6cb35ae7-4a6f-49c5-a30a-d05a22ee4f4e","telemetry":{"namespace":"","key":"5918aeb8-a4bb-461d-beff-755b4493bd90"},"operation":"between","input":["10","15"],"metadata":"sin"}]},"summary":"Match if all criteria are met:  Rover Roll Sine  is between 10 and 15 "},{"id":"497ec5d7-75fb-429c-b16c-70dc8200f540","configuration":{"name":"WARNING LOW","output":"ROLL WARN.","trigger":"all","criteria":[{"id":"e01fcd54-994d-47da-821e-ab2ec6bb9c1c","telemetry":{"namespace":"","key":"5918aeb8-a4bb-461d-beff-755b4493bd90"},"operation":"between","input":["-10","-15"],"metadata":"sin"}]},"summary":"Match if all criteria are met:  Rover Roll Sine  is between -10 and -15 "},{"id":"1184d0cc-555d-46ae-a48b-72ee8264934e","configuration":{"name":"OK","output":"ROLL OK","trigger":"all","criteria":[{"id":"695fca7b-800e-40ad-b85a-3881739744d1","telemetry":{"namespace":"","key":"5918aeb8-a4bb-461d-beff-755b4493bd90"},"operation":"between","input":["-10","10"],"metadata":"sin"}]},"summary":"Match if all criteria are met:  Rover Roll Sine  is between -10 and 10 "},{"isDefault":true,"id":"5f345f62-eed3-42d0-8c88-0e654b5c378e","configuration":{"name":"Default","output":"ROLL ERR.","trigger":"all","criteria":[]},"summary":""}]},"composition":[{"namespace":"","key":"5918aeb8-a4bb-461d-beff-755b4493bd90"}],"telemetry":{},"modified":1702542980639,"location":"57ca2a85-5488-426d-b994-060531e05cd9","created":1702542980639,"persisted":1702542980639},"99040f3d-3a35-4e35-b2d6-ba76c1302fd4":{"identifier":{"key":"99040f3d-3a35-4e35-b2d6-ba76c1302fd4","namespace":""},"name":"Thermal System","type":"conditionSet","configuration":{"conditionTestData":[],"conditionCollection":[{"id":"735765b4-bf8f-4a54-b31d-3fdf6282503e","configuration":{"name":"Good","output":"THERMAL GOOD","trigger":"all","criteria":[{"id":"cef3f1fa-77f4-4284-a299-19c82803fb50","telemetry":{"namespace":"","key":"0b42a2a1-6ab5-47be-aaa0-91d901c3bd37"},"operation":"greaterThan","input":["50"],"metadata":"sin"}]},"summary":"Match if all criteria are met:  Battery SOC Sine  > 50 "},{"id":"d849fc0b-a42d-4551-b456-cd0d6a35f216","configuration":{"name":"Moderate Charge","output":"THERMAL WARN.","trigger":"all","criteria":[{"id":"905362dd-0b55-4955-a768-c8597651cfdb","telemetry":{"namespace":"","key":"0b42a2a1-6ab5-47be-aaa0-91d901c3bd37"},"operation":"greaterThan","input":["20"],"metadata":"sin"},{"id":"c3e3a90d-3cfc-4e47-bfff-377dc142a367","telemetry":{"namespace":"","key":"0b42a2a1-6ab5-47be-aaa0-91d901c3bd37"},"operation":"lessThan","input":["50"],"metadata":"sin"}]},"summary":"Match if all criteria are met:  Battery SOC Sine  > 20 and Battery SOC Sine  < 50 "},{"id":"0d5c4526-37bf-449c-bf21-4aaec93b088c","configuration":{"name":"Marginal Charge","output":"THERMAL DANGER","trigger":"all","criteria":[{"id":"3247c741-26cb-49b0-97ed-dc8cc9c4df33","telemetry":{"namespace":"","key":"0b42a2a1-6ab5-47be-aaa0-91d901c3bd37"},"operation":"greaterThan","input":["0"],"metadata":"sin"},{"id":"8124207a-c2a9-4fc4-bec9-77af2b713b50","telemetry":{"namespace":"","key":"0b42a2a1-6ab5-47be-aaa0-91d901c3bd37"},"operation":"greaterThanOrEq","input":["20"],"metadata":"sin"}]},"summary":"Match if all criteria are met:  Battery SOC Sine  > 0 and Battery SOC Sine  >= 20 "},{"isDefault":true,"id":"7331d95a-aa7b-44c3-bf46-c9f78c64c344","configuration":{"name":"Default","output":"BATT. ERROR","trigger":"all","criteria":[]},"summary":""}]},"composition":[{"key":"0b42a2a1-6ab5-47be-aaa0-91d901c3bd37","namespace":""}],"telemetry":{},"location":"57ca2a85-5488-426d-b994-060531e05cd9","modified":1702542980654,"created":1702542980654,"persisted":1702542980654},"0b42a2a1-6ab5-47be-aaa0-91d901c3bd37":{"identifier":{"key":"0b42a2a1-6ab5-47be-aaa0-91d901c3bd37","namespace":""},"telemetry":{"period":10000000,"amplitude":100,"offset":100,"dataRateInHz":1,"phase":0,"randomness":0.001},"name":"Battery SOC","type":"generator","id":"00e2856c-eacc-435f-881f-afb371712e26","location":"99040f3d-3a35-4e35-b2d6-ba76c1302fd4","modified":1702542980657,"created":1702542980656,"persisted":1702542980657}},"rootId":"9224ac93-50af-4bb9-ac72-89a42b33f031"}
\ No newline at end of file
diff --git a/e2e/test-data/overlay_plot_storage.json b/e2e/test-data/overlay_plot_storage.json
new file mode 100644
index 00000000000..310795dbc0f
--- /dev/null
+++ b/e2e/test-data/overlay_plot_storage.json
@@ -0,0 +1,22 @@
+{
+  "cookies": [],
+  "origins": [
+    {
+      "origin": "http://localhost:8080",
+      "localStorage": [
+        {
+          "name": "mct",
+          "value": "{\"mine\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"e78ca721-fb5e-409b-bf6d-597c87cb716f\",\"namespace\":\"\"},{\"key\":\"c6100044-56be-44b3-acca-6b9fddfb3849\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413602460,\"created\":1732413600960,\"persisted\":1732413602460},\"e78ca721-fb5e-409b-bf6d-597c87cb716f\":{\"identifier\":{\"key\":\"e78ca721-fb5e-409b-bf6d-597c87cb716f\",\"namespace\":\"\"},\"name\":\"Overlay Plot with Telemetry Object\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"c6100044-56be-44b3-acca-6b9fddfb3849\",\"namespace\":\"\"}],\"configuration\":{\"series\":[{\"identifier\":{\"key\":\"c6100044-56be-44b3-acca-6b9fddfb3849\",\"namespace\":\"\"}}]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate Overlay Plot with Telemetry Object\\nchrome\",\"modified\":1732413603880,\"location\":\"mine\",\"created\":1732413601740,\"persisted\":1732413603880},\"c6100044-56be-44b3-acca-6b9fddfb3849\":{\"name\":\"VIPER Rover Heading\",\"type\":\"generator\",\"identifier\":{\"key\":\"c6100044-56be-44b3-acca-6b9fddfb3849\",\"namespace\":\"\"},\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":0,\"infinityValues\":false,\"exceedFloat32\":false,\"staleness\":false},\"modified\":1732413602460,\"location\":\"mine\",\"created\":1732413602460,\"persisted\":1732413602460}}"
+        },
+        {
+          "name": "mct-recent-objects",
+          "value": "[{\"objectPath\":[{\"identifier\":{\"key\":\"c6100044-56be-44b3-acca-6b9fddfb3849\",\"namespace\":\"\"},\"name\":\"VIPER Rover Heading\",\"type\":\"generator\",\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":0,\"infinityValues\":false,\"exceedFloat32\":false,\"staleness\":false},\"modified\":1732413602460,\"location\":\"mine\",\"created\":1732413602460,\"persisted\":1732413602460},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"e78ca721-fb5e-409b-bf6d-597c87cb716f\",\"namespace\":\"\"},{\"key\":\"c6100044-56be-44b3-acca-6b9fddfb3849\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413602460,\"created\":1732413600960,\"persisted\":1732413602460},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/c6100044-56be-44b3-acca-6b9fddfb3849\",\"domainObject\":{\"identifier\":{\"key\":\"c6100044-56be-44b3-acca-6b9fddfb3849\",\"namespace\":\"\"},\"name\":\"VIPER Rover Heading\",\"type\":\"generator\",\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":0,\"infinityValues\":false,\"exceedFloat32\":false,\"staleness\":false},\"modified\":1732413602460,\"location\":\"mine\",\"created\":1732413602460,\"persisted\":1732413602460}},{\"objectPath\":[{\"identifier\":{\"key\":\"e78ca721-fb5e-409b-bf6d-597c87cb716f\",\"namespace\":\"\"},\"name\":\"Overlay Plot with Telemetry Object\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"c6100044-56be-44b3-acca-6b9fddfb3849\",\"namespace\":\"\"}],\"configuration\":{\"series\":[{\"identifier\":{\"key\":\"c6100044-56be-44b3-acca-6b9fddfb3849\",\"namespace\":\"\"}}]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate Overlay Plot with Telemetry Object\\nchrome\",\"modified\":1732413603880,\"location\":\"mine\",\"created\":1732413601740,\"persisted\":1732413603880},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"e78ca721-fb5e-409b-bf6d-597c87cb716f\",\"namespace\":\"\"},{\"key\":\"c6100044-56be-44b3-acca-6b9fddfb3849\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413602460,\"created\":1732413600960,\"persisted\":1732413602460},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/e78ca721-fb5e-409b-bf6d-597c87cb716f\",\"domainObject\":{\"identifier\":{\"key\":\"e78ca721-fb5e-409b-bf6d-597c87cb716f\",\"namespace\":\"\"},\"name\":\"Overlay Plot with Telemetry Object\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"c6100044-56be-44b3-acca-6b9fddfb3849\",\"namespace\":\"\"}],\"configuration\":{\"series\":[{\"identifier\":{\"key\":\"c6100044-56be-44b3-acca-6b9fddfb3849\",\"namespace\":\"\"}}]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate Overlay Plot with Telemetry Object\\nchrome\",\"modified\":1732413603880,\"location\":\"mine\",\"created\":1732413601740,\"persisted\":1732413603880}},{\"objectPath\":[{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"e78ca721-fb5e-409b-bf6d-597c87cb716f\",\"namespace\":\"\"},{\"key\":\"c6100044-56be-44b3-acca-6b9fddfb3849\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413602460,\"created\":1732413600960,\"persisted\":1732413602460},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine\",\"domainObject\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"e78ca721-fb5e-409b-bf6d-597c87cb716f\",\"namespace\":\"\"},{\"key\":\"c6100044-56be-44b3-acca-6b9fddfb3849\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413602460,\"created\":1732413600960,\"persisted\":1732413602460}}]"
+        },
+        {
+          "name": "mct-tree-expanded",
+          "value": "[]"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/e2e/test-data/overlay_plot_with_delay_storage.json b/e2e/test-data/overlay_plot_with_delay_storage.json
new file mode 100644
index 00000000000..ac3aeb65f0d
--- /dev/null
+++ b/e2e/test-data/overlay_plot_with_delay_storage.json
@@ -0,0 +1,18 @@
+{
+  "cookies": [],
+  "origins": [
+    {
+      "origin": "http://localhost:8080",
+      "localStorage": [
+        {
+          "name": "mct",
+          "value": "{\"mine\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"67ca2e0a-b37e-4eda-86a4-ccdbb228bbc0\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413601720,\"created\":1732413600920,\"persisted\":1732413601720},\"67ca2e0a-b37e-4eda-86a4-ccdbb228bbc0\":{\"identifier\":{\"key\":\"67ca2e0a-b37e-4eda-86a4-ccdbb228bbc0\",\"namespace\":\"\"},\"name\":\"Overlay Plot with 5s Delay\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"8f524b49-ad06-47f9-98e0-087b31a2f3e0\",\"namespace\":\"\"}],\"configuration\":{\"series\":[{\"identifier\":{\"key\":\"8f524b49-ad06-47f9-98e0-087b31a2f3e0\",\"namespace\":\"\"}}]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate Overlay Plot with 5s Delay\\nchrome\",\"modified\":1732413603020,\"location\":\"mine\",\"created\":1732413601720,\"persisted\":1732413603020},\"8f524b49-ad06-47f9-98e0-087b31a2f3e0\":{\"identifier\":{\"key\":\"8f524b49-ad06-47f9-98e0-087b31a2f3e0\",\"namespace\":\"\"},\"name\":\"VIPER Rover Heading\",\"type\":\"generator\",\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":5000,\"infinityValues\":false,\"exceedFloat32\":false,\"staleness\":false},\"modified\":1732413602920,\"location\":\"67ca2e0a-b37e-4eda-86a4-ccdbb228bbc0\",\"created\":1732413602420,\"persisted\":1732413602920}}"
+        },
+        {
+          "name": "mct-tree-expanded",
+          "value": "[]"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/e2e/test-data/recycled_local_storage.json b/e2e/test-data/recycled_local_storage.json
new file mode 100644
index 00000000000..7da5a89a39e
--- /dev/null
+++ b/e2e/test-data/recycled_local_storage.json
@@ -0,0 +1,26 @@
+{
+  "cookies": [],
+  "origins": [
+    {
+      "origin": "http://localhost:8080",
+      "localStorage": [
+        {
+          "name": "mct",
+          "value": "{\"mine\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\",\"namespace\":\"\"},{\"key\":\"2d02a680-eb7e-4645-bba2-dd298f76efb8\",\"namespace\":\"\"},{\"key\":\"72a5f66b-39a7-4f62-8c40-4a99a33d6a8e\",\"namespace\":\"\"},{\"key\":\"8e4d20f1-9a04-4de5-8db5-c7e08d27f70d\",\"namespace\":\"\"},{\"key\":\"3e294eae-6124-409b-a870-554d1bdcdd6f\",\"namespace\":\"\"},{\"key\":\"ec24d05d-5df5-4c96-9241-b73636cd19a9\",\"namespace\":\"\"},{\"key\":\"0ec517e8-6c11-4d98-89b5-c300fe61b304\",\"namespace\":\"\"},{\"key\":\"ffb49de1-af27-4318-a22f-59899988f4e9\",\"namespace\":\"\"},{\"key\":\"c6c65ad5-5c09-43c2-8a12-fdeb64d3e1a4\",\"namespace\":\"\"},{\"key\":\"62c4ade7-85ce-45bd-8cdb-25f0c58c8a28\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"persisted\":1704955298732,\"modified\":1704955298732},\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"73f2d9ae-d1f3-4561-b7fc-ecd5df557249\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1652303755999,\"location\":\"mine\",\"persisted\":1652303756002},\"2d02a680-eb7e-4645-bba2-dd298f76efb8\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"2d02a680-eb7e-4645-bba2-dd298f76efb8\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"4291d80c-303c-4d8d-85e1-10f012b864fb\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1654538965702,\"location\":\"mine\",\"persisted\":1654538965702},\"72a5f66b-39a7-4f62-8c40-4a99a33d6a8e\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"72a5f66b-39a7-4f62-8c40-4a99a33d6a8e\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"2b6bf89f-877b-42b8-acc1-a9a575efdbe1\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1658610682787,\"location\":\"mine\",\"persisted\":1658610682787},\"8e4d20f1-9a04-4de5-8db5-c7e08d27f70d\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"8e4d20f1-9a04-4de5-8db5-c7e08d27f70d\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"b9a9c413-4b94-401d-b0c7-5e404f182616\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1658618261112,\"location\":\"mine\",\"persisted\":1658618261112},\"3e294eae-6124-409b-a870-554d1bdcdd6f\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"3e294eae-6124-409b-a870-554d1bdcdd6f\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"108043b1-9c88-4e1d-8deb-fbf2cdb528f9\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1658618890910,\"location\":\"mine\",\"persisted\":1658618890910},\"ec24d05d-5df5-4c96-9241-b73636cd19a9\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"ec24d05d-5df5-4c96-9241-b73636cd19a9\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"4062bd9b-b788-43dd-ab0a-8fa10a78d4b3\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1658619295363,\"location\":\"mine\",\"persisted\":1658619295363},\"0ec517e8-6c11-4d98-89b5-c300fe61b304\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"0ec517e8-6c11-4d98-89b5-c300fe61b304\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"2f1585da-6f7e-4ccd-8a20-590fdf177b5d\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1689710689550,\"location\":\"mine\",\"created\":1689710689550,\"persisted\":1689710689550},\"ffb49de1-af27-4318-a22f-59899988f4e9\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"ffb49de1-af27-4318-a22f-59899988f4e9\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"0a04f110-e5c4-4503-9276-6e8f783d5bd5\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1694110416938,\"location\":\"mine\",\"created\":1694110416938,\"persisted\":1694110416938},\"c6c65ad5-5c09-43c2-8a12-fdeb64d3e1a4\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"c6c65ad5-5c09-43c2-8a12-fdeb64d3e1a4\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"6c8bdbec-41f5-4138-a88f-ae6ebdbc9a90\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1694112912985,\"location\":\"mine\",\"created\":1694112912985,\"persisted\":1694112912985},\"62c4ade7-85ce-45bd-8cdb-25f0c58c8a28\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"62c4ade7-85ce-45bd-8cdb-25f0c58c8a28\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"6776a2ec-fa49-4b06-80ed-a6eaf4f86f56\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1704955298729,\"location\":\"mine\",\"created\":1704955298729,\"persisted\":1704955298729}}"
+        },
+        {
+          "name": "mct-tree-expanded",
+          "value": "[]"
+        },
+        {
+          "name": "tcHistory",
+          "value": "{\"utc\":[{\"start\":1658617494563,\"end\":1658619294563},{\"start\":1658617090044,\"end\":1658618890044},{\"start\":1658616460484,\"end\":1658618260484},{\"start\":1658608882159,\"end\":1658610682159},{\"start\":1654537164464,\"end\":1654538964464},{\"start\":1652301954635,\"end\":1652303754635}]}"
+        },
+        {
+          "name": "mct-recent-objects",
+          "value": "[{\"objectPath\":[{\"identifier\":{\"key\":\"62c4ade7-85ce-45bd-8cdb-25f0c58c8a28\",\"namespace\":\"\"},\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"6776a2ec-fa49-4b06-80ed-a6eaf4f86f56\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1704955298729,\"location\":\"mine\",\"created\":1704955298729,\"persisted\":1704955298729},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\",\"namespace\":\"\"},{\"key\":\"2d02a680-eb7e-4645-bba2-dd298f76efb8\",\"namespace\":\"\"},{\"key\":\"72a5f66b-39a7-4f62-8c40-4a99a33d6a8e\",\"namespace\":\"\"},{\"key\":\"8e4d20f1-9a04-4de5-8db5-c7e08d27f70d\",\"namespace\":\"\"},{\"key\":\"3e294eae-6124-409b-a870-554d1bdcdd6f\",\"namespace\":\"\"},{\"key\":\"ec24d05d-5df5-4c96-9241-b73636cd19a9\",\"namespace\":\"\"},{\"key\":\"0ec517e8-6c11-4d98-89b5-c300fe61b304\",\"namespace\":\"\"},{\"key\":\"ffb49de1-af27-4318-a22f-59899988f4e9\",\"namespace\":\"\"},{\"key\":\"c6c65ad5-5c09-43c2-8a12-fdeb64d3e1a4\",\"namespace\":\"\"},{\"key\":\"62c4ade7-85ce-45bd-8cdb-25f0c58c8a28\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"persisted\":1704955298732,\"modified\":1704955298732},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/62c4ade7-85ce-45bd-8cdb-25f0c58c8a28\",\"domainObject\":{\"identifier\":{\"key\":\"62c4ade7-85ce-45bd-8cdb-25f0c58c8a28\",\"namespace\":\"\"},\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"6776a2ec-fa49-4b06-80ed-a6eaf4f86f56\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1704955298729,\"location\":\"mine\",\"created\":1704955298729,\"persisted\":1704955298729}},{\"objectPath\":[{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\",\"namespace\":\"\"},{\"key\":\"2d02a680-eb7e-4645-bba2-dd298f76efb8\",\"namespace\":\"\"},{\"key\":\"72a5f66b-39a7-4f62-8c40-4a99a33d6a8e\",\"namespace\":\"\"},{\"key\":\"8e4d20f1-9a04-4de5-8db5-c7e08d27f70d\",\"namespace\":\"\"},{\"key\":\"3e294eae-6124-409b-a870-554d1bdcdd6f\",\"namespace\":\"\"},{\"key\":\"ec24d05d-5df5-4c96-9241-b73636cd19a9\",\"namespace\":\"\"},{\"key\":\"0ec517e8-6c11-4d98-89b5-c300fe61b304\",\"namespace\":\"\"},{\"key\":\"ffb49de1-af27-4318-a22f-59899988f4e9\",\"namespace\":\"\"},{\"key\":\"c6c65ad5-5c09-43c2-8a12-fdeb64d3e1a4\",\"namespace\":\"\"},{\"key\":\"62c4ade7-85ce-45bd-8cdb-25f0c58c8a28\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"persisted\":1704955298732,\"modified\":1704955298732},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine\",\"domainObject\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\",\"namespace\":\"\"},{\"key\":\"2d02a680-eb7e-4645-bba2-dd298f76efb8\",\"namespace\":\"\"},{\"key\":\"72a5f66b-39a7-4f62-8c40-4a99a33d6a8e\",\"namespace\":\"\"},{\"key\":\"8e4d20f1-9a04-4de5-8db5-c7e08d27f70d\",\"namespace\":\"\"},{\"key\":\"3e294eae-6124-409b-a870-554d1bdcdd6f\",\"namespace\":\"\"},{\"key\":\"ec24d05d-5df5-4c96-9241-b73636cd19a9\",\"namespace\":\"\"},{\"key\":\"0ec517e8-6c11-4d98-89b5-c300fe61b304\",\"namespace\":\"\"},{\"key\":\"ffb49de1-af27-4318-a22f-59899988f4e9\",\"namespace\":\"\"},{\"key\":\"c6c65ad5-5c09-43c2-8a12-fdeb64d3e1a4\",\"namespace\":\"\"},{\"key\":\"62c4ade7-85ce-45bd-8cdb-25f0c58c8a28\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"persisted\":1704955298732,\"modified\":1704955298732}},{\"objectPath\":[{\"identifier\":{\"key\":\"c6c65ad5-5c09-43c2-8a12-fdeb64d3e1a4\",\"namespace\":\"\"},\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"6c8bdbec-41f5-4138-a88f-ae6ebdbc9a90\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1694112912985,\"location\":\"mine\",\"created\":1694112912985,\"persisted\":1694112912985},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\",\"namespace\":\"\"},{\"key\":\"2d02a680-eb7e-4645-bba2-dd298f76efb8\",\"namespace\":\"\"},{\"key\":\"72a5f66b-39a7-4f62-8c40-4a99a33d6a8e\",\"namespace\":\"\"},{\"key\":\"8e4d20f1-9a04-4de5-8db5-c7e08d27f70d\",\"namespace\":\"\"},{\"key\":\"3e294eae-6124-409b-a870-554d1bdcdd6f\",\"namespace\":\"\"},{\"key\":\"ec24d05d-5df5-4c96-9241-b73636cd19a9\",\"namespace\":\"\"},{\"key\":\"0ec517e8-6c11-4d98-89b5-c300fe61b304\",\"namespace\":\"\"},{\"key\":\"ffb49de1-af27-4318-a22f-59899988f4e9\",\"namespace\":\"\"},{\"key\":\"c6c65ad5-5c09-43c2-8a12-fdeb64d3e1a4\",\"namespace\":\"\"},{\"key\":\"62c4ade7-85ce-45bd-8cdb-25f0c58c8a28\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"persisted\":1704955298732,\"modified\":1704955298732},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/c6c65ad5-5c09-43c2-8a12-fdeb64d3e1a4\",\"domainObject\":{\"identifier\":{\"key\":\"c6c65ad5-5c09-43c2-8a12-fdeb64d3e1a4\",\"namespace\":\"\"},\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"6c8bdbec-41f5-4138-a88f-ae6ebdbc9a90\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1694112912985,\"location\":\"mine\",\"created\":1694112912985,\"persisted\":1694112912985}},{\"objectPath\":[{\"identifier\":{\"key\":\"ffb49de1-af27-4318-a22f-59899988f4e9\",\"namespace\":\"\"},\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"0a04f110-e5c4-4503-9276-6e8f783d5bd5\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1694110416938,\"location\":\"mine\",\"created\":1694110416938,\"persisted\":1694110416938},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\",\"namespace\":\"\"},{\"key\":\"2d02a680-eb7e-4645-bba2-dd298f76efb8\",\"namespace\":\"\"},{\"key\":\"72a5f66b-39a7-4f62-8c40-4a99a33d6a8e\",\"namespace\":\"\"},{\"key\":\"8e4d20f1-9a04-4de5-8db5-c7e08d27f70d\",\"namespace\":\"\"},{\"key\":\"3e294eae-6124-409b-a870-554d1bdcdd6f\",\"namespace\":\"\"},{\"key\":\"ec24d05d-5df5-4c96-9241-b73636cd19a9\",\"namespace\":\"\"},{\"key\":\"0ec517e8-6c11-4d98-89b5-c300fe61b304\",\"namespace\":\"\"},{\"key\":\"ffb49de1-af27-4318-a22f-59899988f4e9\",\"namespace\":\"\"},{\"key\":\"c6c65ad5-5c09-43c2-8a12-fdeb64d3e1a4\",\"namespace\":\"\"},{\"key\":\"62c4ade7-85ce-45bd-8cdb-25f0c58c8a28\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"persisted\":1704955298732,\"modified\":1704955298732},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/ffb49de1-af27-4318-a22f-59899988f4e9\",\"domainObject\":{\"identifier\":{\"key\":\"ffb49de1-af27-4318-a22f-59899988f4e9\",\"namespace\":\"\"},\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"0a04f110-e5c4-4503-9276-6e8f783d5bd5\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1694110416938,\"location\":\"mine\",\"created\":1694110416938,\"persisted\":1694110416938}},{\"objectPath\":[{\"identifier\":{\"key\":\"0ec517e8-6c11-4d98-89b5-c300fe61b304\",\"namespace\":\"\"},\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"2f1585da-6f7e-4ccd-8a20-590fdf177b5d\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1689710689550,\"location\":\"mine\",\"created\":1689710689550,\"persisted\":1689710689550},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"f64bea3b-58a7-4586-8c05-8b651e5f0bfd\",\"namespace\":\"\"},{\"key\":\"2d02a680-eb7e-4645-bba2-dd298f76efb8\",\"namespace\":\"\"},{\"key\":\"72a5f66b-39a7-4f62-8c40-4a99a33d6a8e\",\"namespace\":\"\"},{\"key\":\"8e4d20f1-9a04-4de5-8db5-c7e08d27f70d\",\"namespace\":\"\"},{\"key\":\"3e294eae-6124-409b-a870-554d1bdcdd6f\",\"namespace\":\"\"},{\"key\":\"ec24d05d-5df5-4c96-9241-b73636cd19a9\",\"namespace\":\"\"},{\"key\":\"0ec517e8-6c11-4d98-89b5-c300fe61b304\",\"namespace\":\"\"},{\"key\":\"ffb49de1-af27-4318-a22f-59899988f4e9\",\"namespace\":\"\"},{\"key\":\"c6c65ad5-5c09-43c2-8a12-fdeb64d3e1a4\",\"namespace\":\"\"},{\"key\":\"62c4ade7-85ce-45bd-8cdb-25f0c58c8a28\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"persisted\":1704955298732,\"modified\":1704955298732},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/0ec517e8-6c11-4d98-89b5-c300fe61b304\",\"domainObject\":{\"identifier\":{\"key\":\"0ec517e8-6c11-4d98-89b5-c300fe61b304\",\"namespace\":\"\"},\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"2f1585da-6f7e-4ccd-8a20-590fdf177b5d\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1689710689550,\"location\":\"mine\",\"created\":1689710689550,\"persisted\":1689710689550}}]"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/e2e/test-data/rick.jpg b/e2e/test-data/rick.jpg
new file mode 100644
index 00000000000..98340f6304b
Binary files /dev/null and b/e2e/test-data/rick.jpg differ
diff --git a/e2e/tests/framework/appActions.e2e.spec.js b/e2e/tests/framework/appActions.e2e.spec.js
new file mode 100644
index 00000000000..4aba0e196ec
--- /dev/null
+++ b/e2e/tests/framework/appActions.e2e.spec.js
@@ -0,0 +1,179 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import {
+  createDomainObjectWithDefaults,
+  createNotification,
+  expandEntireTree,
+  openObjectTreeContextMenu
+} from '../../appActions.js';
+import { expect, test } from '../../pluginFixtures.js';
+
+test.describe('AppActions', () => {
+  test('createDomainObjectsWithDefaults', async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    const e2eFolder = await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      name: 'e2e folder'
+    });
+
+    await test.step('Create multiple flat objects in a row', async () => {
+      const timer1 = await createDomainObjectWithDefaults(page, {
+        type: 'Timer',
+        name: 'Timer Foo',
+        parent: e2eFolder.uuid
+      });
+      const timer2 = await createDomainObjectWithDefaults(page, {
+        type: 'Timer',
+        name: 'Timer Bar',
+        parent: e2eFolder.uuid
+      });
+      const timer3 = await createDomainObjectWithDefaults(page, {
+        type: 'Timer',
+        name: 'Timer Baz',
+        parent: e2eFolder.uuid
+      });
+
+      await page.goto(timer1.url);
+      await expect(page.locator('.l-browse-bar__object-name')).toHaveText(timer1.name);
+      await page.goto(timer2.url);
+      await expect(page.locator('.l-browse-bar__object-name')).toHaveText(timer2.name);
+      await page.goto(timer3.url);
+      await expect(page.locator('.l-browse-bar__object-name')).toHaveText(timer3.name);
+    });
+
+    await test.step('Create multiple nested objects in a row', async () => {
+      const folder1 = await createDomainObjectWithDefaults(page, {
+        type: 'Folder',
+        name: 'Folder Foo',
+        parent: e2eFolder.uuid
+      });
+      const folder2 = await createDomainObjectWithDefaults(page, {
+        type: 'Folder',
+        name: 'Folder Bar',
+        parent: folder1.uuid
+      });
+      const folder3 = await createDomainObjectWithDefaults(page, {
+        type: 'Folder',
+        name: 'Folder Baz',
+        parent: folder2.uuid
+      });
+      await page.goto(folder1.url);
+      await expect(page.locator('.l-browse-bar__object-name')).toHaveText(folder1.name);
+      await page.goto(folder2.url);
+      await expect(page.locator('.l-browse-bar__object-name')).toHaveText(folder2.name);
+      await page.goto(folder3.url);
+      await expect(page.locator('.l-browse-bar__object-name')).toHaveText(folder3.name);
+
+      expect(folder1.url).toBe(`${e2eFolder.url}/${folder1.uuid}`);
+      expect(folder2.url).toBe(`${e2eFolder.url}/${folder1.uuid}/${folder2.uuid}`);
+      expect(folder3.url).toBe(`${e2eFolder.url}/${folder1.uuid}/${folder2.uuid}/${folder3.uuid}`);
+    });
+  });
+  test('createNotification', async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    await createNotification(page, {
+      message: 'Test info notification',
+      severity: 'info'
+    });
+    await expect(page.locator('.c-message-banner__message')).toHaveText('Test info notification');
+    await expect(page.locator('.c-message-banner')).toHaveClass(/info/);
+    await page.locator('[aria-label="Dismiss"]').click();
+    await createNotification(page, {
+      message: 'Test alert notification',
+      severity: 'alert'
+    });
+    await expect(page.locator('.c-message-banner__message')).toHaveText('Test alert notification');
+    await expect(page.locator('.c-message-banner')).toHaveClass(/alert/);
+    await page.locator('[aria-label="Dismiss"]').click();
+    await createNotification(page, {
+      message: 'Test error notification',
+      severity: 'error'
+    });
+    await expect(page.locator('.c-message-banner__message')).toHaveText('Test error notification');
+    await expect(page.locator('.c-message-banner')).toHaveClass(/error/);
+    await page.locator('[aria-label="Dismiss"]').click();
+  });
+  test('expandEntireTree', async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    const rootFolder = await createDomainObjectWithDefaults(page, {
+      type: 'Folder'
+    });
+    const folder1 = await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      parent: rootFolder.uuid
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Clock',
+      parent: folder1.uuid
+    });
+    const folder2 = await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      parent: folder1.uuid
+    });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      parent: folder1.uuid
+    });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      parent: folder2.uuid
+    });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      parent: folder2.uuid
+    });
+
+    await page.goto('./#/browse/mine');
+    await expandEntireTree(page);
+    const treePane = page.getByRole('tree', {
+      name: 'Main Tree'
+    });
+    const treePaneCollapsedItems = treePane.getByRole('treeitem', { expanded: false });
+    expect(await treePaneCollapsedItems.count()).toBe(0);
+
+    await page.goto('./#/browse/mine');
+    //Click the Create button
+    await page.getByRole('button', { name: 'Create' }).click();
+
+    // Click the object specified by 'type'
+    await page.click(`li[role='menuitem']:text("Clock")`);
+    await expandEntireTree(page, 'Create Modal Tree');
+    const locatorTree = page.getByRole('tree', {
+      name: 'Create Modal Tree'
+    });
+    const locatorTreeCollapsedItems = locatorTree.locator('role=treeitem[expanded=false]');
+    expect(await locatorTreeCollapsedItems.count()).toBe(0);
+  });
+  test('openObjectTreeContextMenu', async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    const folder = await createDomainObjectWithDefaults(page, {
+      type: 'Folder'
+    });
+    await openObjectTreeContextMenu(page, folder.url);
+    await expect(page.getByLabel('Menu')).toBeVisible();
+  });
+});
diff --git a/e2e/tests/framework/baseFixtures.e2e.spec.js b/e2e/tests/framework/baseFixtures.e2e.spec.js
new file mode 100644
index 00000000000..9edf08f42b0
--- /dev/null
+++ b/e2e/tests/framework/baseFixtures.e2e.spec.js
@@ -0,0 +1,54 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to testing our use of the playwright framework as it
+relates to how we've extended it (i.e. ./e2e/baseFixtures.js) and assumptions made in our dev environment
+(`npm start` and ./e2e/webpack-dev-middleware.js)
+*/
+
+import { test } from '../../baseFixtures.js';
+
+test.describe('baseFixtures tests', () => {
+  //Skip this test for now https://github.com/nasa/openmct/issues/6785
+  test.fixme('Verify that tests fail if console.error is thrown', async ({ page }) => {
+    test.fail();
+    //Go to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    //Verify that ../fixtures.js detects console log errors
+    await Promise.all([
+      page.evaluate(() => console.error('This should result in a failure')),
+      page.waitForEvent('console') // always wait for the event to happen while triggering it!
+    ]);
+  });
+  test('Verify that tests pass if console.warn is thrown', async ({ page }) => {
+    //Go to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    //Verify that ../fixtures.js detects console log errors
+    await Promise.all([
+      page.evaluate(() => console.warn('This should result in a pass')),
+      page.waitForEvent('console') // always wait for the event to happen while triggering it!
+    ]);
+  });
+});
diff --git a/e2e/tests/framework/exampleTemplate.e2e.spec.js b/e2e/tests/framework/exampleTemplate.e2e.spec.js
new file mode 100644
index 00000000000..3b245fa3c4d
--- /dev/null
+++ b/e2e/tests/framework/exampleTemplate.e2e.spec.js
@@ -0,0 +1,177 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+ * This test suite template is to be used when creating new test suites. It will be kept up to date with the latest improvements
+ * made by the Open MCT team. It will also follow our best pratices as those evolve. Please use this structure as a _reference_ and clear
+ * or update any references when creating a new test suite!
+ *
+ * To illustrate current best practices, we've included a mocked up test suite for Renaming a Timer domain object.
+ *
+ * Demonstrated:
+ * - Using appActions to leverage existing functions
+ * - Structure
+ * - @unstable annotation
+ * - await, expect, test, describe syntax
+ * - Writing a custom function for a test suite
+ * - Test stub for unfinished test coverage (test.fixme)
+ *
+ * The structure should follow
+ * 1. imports
+ * 2. test.describe()
+ * 3. -> test1
+ *    -> test2
+ *    -> test3(stub)
+ * 4. Any custom functions
+ */
+
+// Structure: Some standard Imports. Please update the required pathing.
+import { createDomainObjectWithDefaults } from '../../appActions.js';
+import { expect, test } from '../../pluginFixtures.js';
+
+/**
+ * Structure:
+ *  Try to keep a single describe block per logical groups of tests.
+ *  If your test runtime exceeds 5 minutes or 500 lines, it's likely that it will need to be split.
+ *
+ * Annotations:
+ *  Please use the @unstable tag at the end of the test title so that our automation can pick it up
+ *  as a part of our test promotion pipeline.
+ */
+test.describe('Renaming Timer Object', () => {
+  // Top-level declaration of the Timer object created in beforeEach().
+  // We can then use this throughout the entire test suite.
+  let timer;
+  test.beforeEach(async ({ page }) => {
+    // Open a browser, navigate to the main page, and wait until all network events to resolve
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // We provide some helper functions in appActions like `createDomainObjectWithDefaults()`.
+    // This example will create a Timer object with default properties, under the root folder:
+    timer = await createDomainObjectWithDefaults(page, { type: 'Timer' });
+
+    // Assert the object to be created and check its name in the title
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText(timer.name);
+  });
+
+  /**
+   * Make sure to use testcase names which are descriptive and easy to understand.
+   * A good testcase name concisely describes the test's goal(s) and should give
+   * some hint as to what went wrong if the test fails.
+   */
+  test('An existing Timer object can be renamed via the 3dot actions menu', async ({ page }) => {
+    const newObjectName = 'Renamed Timer';
+
+    // We've created an example of a shared function which pases the page and newObjectName values
+    await renameTimerFrom3DotMenu(page, timer.url, newObjectName);
+
+    // Assert that the name has changed in the browser bar to the value we assigned above
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText(newObjectName);
+  });
+
+  test('An existing Timer object can be renamed twice', async ({ page }) => {
+    const newObjectName = 'Renamed Timer';
+    const newObjectName2 = 'Re-Renamed Timer';
+
+    await renameTimerFrom3DotMenu(page, timer.url, newObjectName);
+
+    // Assert that the name has changed in the browser bar to the value we assigned above
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText(newObjectName);
+
+    // Rename the Timer object again
+    await renameTimerFrom3DotMenu(page, timer.url, newObjectName2);
+
+    // Assert that the name has changed in the browser bar to the second value
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText(newObjectName2);
+  });
+
+  /**
+   * If you run out of time to write new tests, please stub in the missing tests
+   * in-place with a test.fixme and BDD-style test steps.
+   * Someone will carry the baton!
+   */
+  test.fixme('Can Rename Timer Object from Tree', async ({ page }) => {
+    //Create a new object
+    //Copy this object
+    //Delete first object
+    //Expect copied object to persist
+  });
+});
+
+/**
+ * The next most important concept in our testing is working with telemetry objects. Telemetry is at the core of Open MCT
+ * and we have developed a great pattern for working with it.
+ */
+test.describe('Advanced: Working with telemetry objects', () => {
+  let displayLayout;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create a Display Layout with a meaningful name
+    displayLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Display Layout with Embedded SWG'
+    });
+    // Create Telemetry object within the parent object created above
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Telemetry',
+      parent: displayLayout.uuid //reference the display layout in the creation process
+    });
+  });
+  test('Can directly navigate to a Display Layout with embedded telemetry', async ({ page }) => {
+    //Now you can directly navigate to the displayLayout created in the beforeEach with the embedded telemetry
+    await page.goto(displayLayout.url);
+    //Expect the created Telemetry Object to be visible when directly navigating to the displayLayout
+    await expect(page.getByTitle('Sine')).toBeVisible();
+  });
+});
+
+/**
+ * Structure:
+ * Custom functions should be declared last.
+ * We are leaning on JSDoc pretty heavily to describe functionality. It is not required, but highly recommended.
+ */
+
+/**
+ * This is an example of a function which is shared between testcases in this test suite. When refactoring, we'll be looking
+ * for common functionality which makes sense to generalize for the entire test framework.
+ * @param {import('@playwright/test').Page} page
+ * @param {string} timerUrl The URL of the timer object to be renamed
+ * @param {string} newNameForTimer New name for object
+ */
+async function renameTimerFrom3DotMenu(page, timerUrl, newNameForTimer) {
+  // Navigate to the timer object
+  await page.goto(timerUrl);
+
+  // Click on 3 Dot Menu
+  await page.locator('button[title="More actions"]').click();
+
+  // Click text=Edit Properties...
+  await page.locator('text=Edit Properties...').click();
+
+  // Rename the timer object
+  await page.locator('text=Properties Title Notes >> input[type="text"]').fill(newNameForTimer);
+
+  // Click Ok button to Save
+  await page.locator('button:has-text("OK")').click();
+}
diff --git a/e2e/tests/framework/generateLocalStorageData.e2e.spec.js b/e2e/tests/framework/generateLocalStorageData.e2e.spec.js
new file mode 100644
index 00000000000..4b28e6009a8
--- /dev/null
+++ b/e2e/tests/framework/generateLocalStorageData.e2e.spec.js
@@ -0,0 +1,325 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/**
+ * This test suite is dedicated to generating LocalStorage via Session Storage to be used
+ * in some visual test suites like controlledClock.visual.spec.js. This suite should run to completion
+ * and generate an artifact in ./e2e/test-data/<name>_storage.json . This will run
+ * on every commit to ensure that this object still loads into tests correctly and will retain the
+ * *.e2e.spec.js suffix.
+ *
+ * TODO: Provide additional validation of object properties as it grows.
+ * Verification of object properties happens in this file before the test-data is generated,
+ * and is additionally verified in the validation test suites below.
+ */
+
+import { fileURLToPath } from 'url';
+
+import { createDomainObjectWithDefaults, createExampleTelemetryObject } from '../../appActions.js';
+import { MISSION_TIME } from '../../constants.js';
+import { expect, test } from '../../pluginFixtures.js';
+
+const overlayPlotName = 'Overlay Plot with Telemetry Object';
+
+test.describe('Generate Visual Test Data @localStorage @generatedata', () => {
+  test.use({
+    clockOptions: {
+      now: MISSION_TIME,
+      shouldAdvanceTime: true
+    }
+  });
+
+  test.beforeEach(async ({ page }) => {
+    // Go to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+  });
+
+  test('Generate display layout with 2 child display layouts', async ({ page, context }) => {
+    const parent = await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Parent Display Layout'
+    });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Child Layout 1',
+      parent: parent.uuid
+    });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Child Layout 2',
+      parent: parent.uuid
+    });
+
+    await page.goto(parent.url, { waitUntil: 'domcontentloaded' });
+    await page.getByLabel('Edit Object').click();
+    await page.getByLabel('Child Layout 2 Layout', { exact: true }).hover();
+    await page.getByLabel('Move Sub-object Frame').nth(1).click();
+    await page.getByLabel('X:').fill('30');
+
+    await page.getByLabel('Child Layout 1 Layout', { exact: true }).hover();
+    await page.getByLabel('Move Sub-object Frame').first().click();
+    await page.getByLabel('Y:').fill('30');
+
+    await page.getByLabel('Save').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    //Save localStorage for future test execution
+    await context.storageState({
+      path: fileURLToPath(
+        new URL('../../../e2e/test-data/display_layout_with_child_layouts.json', import.meta.url)
+      )
+    });
+  });
+
+  test('Generate flexible layout with 2 child display layouts', async ({ page, context }) => {
+    // Create Display Layout
+    const parent = await createDomainObjectWithDefaults(page, {
+      type: 'Flexible Layout',
+      name: 'Parent Flexible Layout'
+    });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Child Layout 1',
+      parent: parent.uuid
+    });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Child Layout 2',
+      parent: parent.uuid
+    });
+
+    await page.goto(parent.url, { waitUntil: 'domcontentloaded' });
+
+    //Save localStorage for future test execution
+    await context.storageState({
+      path: fileURLToPath(
+        new URL('../../../e2e/test-data/flexible_layout_with_child_layouts.json', import.meta.url)
+      )
+    });
+  });
+
+  // TODO: Visual test for the generated object here
+  // - Move to using appActions to create the overlay plot
+  //   and embedded standard telemetry object
+  test('Generate Overlay Plot with Telemetry Object', async ({ page, context }) => {
+    // Create Overlay Plot
+    const overlayPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot',
+      name: overlayPlotName
+    });
+
+    // Create Telemetry Object
+    const exampleTelemetry = await createExampleTelemetryObject(page);
+
+    // Make Link from Telemetry Object to Overlay Plot
+    await page.locator('button[title="More actions"]').click();
+
+    // Select 'Create Link' from dropdown
+    await page.getByRole('menuitem', { name: 'Create Link' }).click();
+
+    // Search and Select for overlay Plot within Create Modal
+    await page.getByRole('dialog').getByRole('searchbox', { name: 'Search Input' }).click();
+    await page
+      .getByRole('dialog')
+      .getByRole('searchbox', { name: 'Search Input' })
+      .fill(overlayPlot.name);
+    await page
+      .getByRole('treeitem', { name: new RegExp(overlayPlot.name) })
+      .locator('a')
+      .click();
+    await page.getByRole('button', { name: 'Save' }).click();
+
+    await page.goto(overlayPlot.url);
+
+    // TODO: Flesh Out Assertions against created Objects
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText(overlayPlotName);
+    await page.getByRole('tab', { name: 'Config' }).click();
+    await page
+      .getByRole('list', { name: 'Plot Series Properties' })
+      .locator('span')
+      .first()
+      .click();
+
+    // TODO: Modify the Overlay Plot to use fixed Scaling
+    // TODO: Verify Autoscaling.
+
+    // TODO: Fix accessibility of Plot Series Properties tables
+    // Assert that the Plot Series properties have the correct values
+    await expect(
+      page.locator('[role=cell]:has-text("Value")~[role=cell]:has-text("sin")')
+    ).toBeVisible();
+    await expect(
+      page.locator(
+        '[role=cell]:has-text("Line Method")~[role=cell]:has-text("Linear interpolation")'
+      )
+    ).toBeVisible();
+    await expect(
+      page.locator('[role=cell]:has-text("Markers")~[role=cell]:has-text("Point: 2px")')
+    ).toBeVisible();
+    await expect(
+      page.locator('[role=cell]:has-text("Alarm Markers")~[role=cell]:has-text("Enabled")')
+    ).toBeVisible();
+    await expect(
+      page.locator('[role=cell]:has-text("Limit Lines")~[role=cell]:has-text("Disabled")')
+    ).toBeVisible();
+
+    await page.goto(exampleTelemetry.url);
+    await page.getByRole('tab', { name: 'Properties' }).click();
+
+    // TODO: assert Example Telemetry property values
+    // await page.goto(exampleTelemetry.url);
+
+    // Save localStorage for future test execution
+    await context.storageState({
+      path: fileURLToPath(
+        new URL('../../../e2e/test-data/overlay_plot_storage.json', import.meta.url)
+      )
+    });
+  });
+  // TODO: Merge this with previous test. Edit object created in previous test.
+  test('Generate Overlay Plot with 5s Delay', async ({ page, context }) => {
+    // add overlay plot with defaults
+    const overlayPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot',
+      name: 'Overlay Plot with 5s Delay'
+    });
+
+    const swgWith5sDelay = await createExampleTelemetryObject(page, overlayPlot.uuid);
+
+    await page.goto(swgWith5sDelay.url);
+    await page.getByLabel('More actions').click();
+    await page.getByLabel('Edit Properties...').click();
+
+    //Edit Example Telemetry Object to include 5s loading Delay
+    await page.locator('[aria-label="Loading Delay \\(ms\\)"]').fill('5000');
+
+    await Promise.all([
+      page.waitForNavigation(),
+      page.locator('text=OK').click(),
+      //Wait for Save Banner to appear
+      page.waitForSelector('.c-message-banner__message')
+    ]);
+
+    // focus the overlay plot
+    await page.goto(overlayPlot.url);
+
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText(overlayPlot.name);
+
+    // Clear Recently Viewed
+    await page.getByRole('button', { name: 'Clear Recently Viewed' }).click();
+    await page.getByRole('button', { name: 'OK', exact: true }).click();
+    //Save localStorage for future test execution
+    await context.storageState({
+      path: fileURLToPath(
+        new URL('../../../e2e/test-data/overlay_plot_with_delay_storage.json', import.meta.url)
+      )
+    });
+  });
+});
+
+test.describe('Validate Overlay Plot with Telemetry Object @localStorage @generatedata', () => {
+  test.use({
+    storageState: fileURLToPath(
+      new URL('../../../e2e/test-data/overlay_plot_storage.json', import.meta.url)
+    )
+  });
+  test('Validate Overlay Plot with Telemetry Object', async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    await page.locator('a').filter({ hasText: overlayPlotName }).click();
+    // TODO: Flesh Out Assertions against created Objects
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText(overlayPlotName);
+    await page.getByRole('tab', { name: 'Config' }).click();
+    await page
+      .getByRole('list', { name: 'Plot Series Properties' })
+      .locator('span')
+      .first()
+      .click();
+
+    // TODO: Modify the Overlay Plot to use fixed Scaling
+    // TODO: Verify Autoscaling.
+
+    // TODO: Fix accessibility of Plot Series Properties tables
+    // Assert that the Plot Series properties have the correct values
+    await expect(
+      page.locator('[role=cell]:has-text("Value")~[role=cell]:has-text("sin")')
+    ).toBeVisible();
+    await expect(
+      page.locator(
+        '[role=cell]:has-text("Line Method")~[role=cell]:has-text("Linear interpolation")'
+      )
+    ).toBeVisible();
+    await expect(
+      page.locator('[role=cell]:has-text("Markers")~[role=cell]:has-text("Point: 2px")')
+    ).toBeVisible();
+    await expect(
+      page.locator('[role=cell]:has-text("Alarm Markers")~[role=cell]:has-text("Enabled")')
+    ).toBeVisible();
+    await expect(
+      page.locator('[role=cell]:has-text("Limit Lines")~[role=cell]:has-text("Disabled")')
+    ).toBeVisible();
+  });
+});
+
+test.describe('Validate Overlay Plot with 5s Delay Telemetry Object @localStorage @generatedata', () => {
+  test.use({
+    storageState: fileURLToPath(
+      new URL('../../../e2e/test-data/overlay_plot_with_delay_storage.json', import.meta.url)
+    )
+  });
+  test('Validate Overlay Plot with Telemetry Object', async ({ page }) => {
+    const plotName = 'Overlay Plot with 5s Delay';
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    await page.locator('a').filter({ hasText: plotName }).click();
+    // TODO: Flesh Out Assertions against created Objects
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText(plotName);
+    await page.getByRole('tab', { name: 'Config' }).click();
+    await page
+      .getByRole('list', { name: 'Plot Series Properties' })
+      .locator('span')
+      .first()
+      .click();
+
+    // TODO: Modify the Overlay Plot to use fixed Scaling
+    // TODO: Verify Autoscaling.
+
+    // TODO: Fix accessibility of Plot Series Properties tables
+    // Assert that the Plot Series properties have the correct values
+    await expect(
+      page.locator('[role=cell]:has-text("Value")~[role=cell]:has-text("sin")')
+    ).toBeVisible();
+    await expect(
+      page.locator(
+        '[role=cell]:has-text("Line Method")~[role=cell]:has-text("Linear interpolation")'
+      )
+    ).toBeVisible();
+    await expect(
+      page.locator('[role=cell]:has-text("Markers")~[role=cell]:has-text("Point: 2px")')
+    ).toBeVisible();
+    await expect(
+      page.locator('[role=cell]:has-text("Alarm Markers")~[role=cell]:has-text("Enabled")')
+    ).toBeVisible();
+    await expect(
+      page.locator('[role=cell]:has-text("Limit Lines")~[role=cell]:has-text("Disabled")')
+    ).toBeVisible();
+  });
+});
diff --git a/e2e/tests/framework/pluginFixtures.e2e.spec.js b/e2e/tests/framework/pluginFixtures.e2e.spec.js
new file mode 100644
index 00000000000..f9b0cb5a7b7
--- /dev/null
+++ b/e2e/tests/framework/pluginFixtures.e2e.spec.js
@@ -0,0 +1,44 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to testing our use of our custom fixtures to verify
+that they are working as expected.
+*/
+
+import { test } from '../../pluginFixtures.js';
+
+// eslint-disable-next-line playwright/no-skipped-test
+test.describe.skip('pluginFixtures tests', () => {
+  // test.use({ domainObjectName: 'Timer' });
+  // let timerUUID;
+  // test('Creates a timer object @framework @unstable', ({ domainObject }) => {
+  //     const { uuid } = domainObject;
+  //     const uuidRegexp = /[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/;
+  //     expect(uuid).toMatch(uuidRegexp);
+  //     timerUUID = uuid;
+  // });
+  // test('Provides same uuid for subsequent uses of the same object @framework', ({ domainObject }) => {
+  //     const { uuid } = domainObject;
+  //     expect(uuid).toEqual(timerUUID);
+  // });
+});
diff --git a/e2e/tests/functional/branding.e2e.spec.js b/e2e/tests/functional/branding.e2e.spec.js
new file mode 100644
index 00000000000..9cffd36c407
--- /dev/null
+++ b/e2e/tests/functional/branding.e2e.spec.js
@@ -0,0 +1,59 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which verify branding related components.
+*/
+
+import { expect, test } from '../../baseFixtures.js';
+
+test.describe('Branding tests', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+  });
+  test('About Modal launches with basic branding properties', async ({ page }) => {
+    await page.getByLabel('About Modal').click();
+
+    // Verify that the NASA Logo Appears
+    await expect(page.getByAltText('Open MCT Splash Logo')).toBeVisible();
+
+    // Modify the Build information in 'about' Modal
+    await expect.soft(page.getByLabel('Version Number')).toContainText(/Version: \d/);
+    await expect
+      .soft(page.getByLabel('Build Date'))
+      .toContainText(/Build Date: ((?:Mon|Tue|Wed|Thu|Fri|Sat|Sun))/);
+    await expect.soft(page.getByLabel('Revision')).toContainText(/Revision: \b[0-9a-f]{5,40}\b/);
+    await expect.soft(page.getByLabel('Branch')).toContainText(/Branch: ./);
+  });
+  test('Verify Links in About Modal @2p', async ({ page }) => {
+    // Click About button
+    await page.getByLabel('About Modal').click();
+
+    // Verify that clicking on the third party licenses information opens up another tab on licenses url
+    const [page2] = await Promise.all([
+      page.waitForEvent('popup'),
+      page.getByText('click here for third party licensing information').click()
+    ]);
+    await page2.waitForLoadState('domcontentloaded'); //Avoids timing issues with juggler/firefox
+    expect(page2.waitForURL('**/licenses**')).toBeTruthy();
+  });
+});
diff --git a/e2e/tests/functional/clearDataAction.e2e.spec.js b/e2e/tests/functional/clearDataAction.e2e.spec.js
new file mode 100644
index 00000000000..56e6b2f274a
--- /dev/null
+++ b/e2e/tests/functional/clearDataAction.e2e.spec.js
@@ -0,0 +1,64 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+Verify that the "Clear Data" menu action performs as expected for various object types.
+*/
+
+import { createDomainObjectWithDefaults } from '../../appActions.js';
+import { expect, test } from '../../pluginFixtures.js';
+
+const backgroundImageSelector = '.c-imagery__main-image__background-image';
+
+test.describe('Clear Data Action', () => {
+  test.beforeEach(async ({ page }) => {
+    // Go to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create a default 'Example Imagery' object
+    const exampleImagery = await createDomainObjectWithDefaults(page, { type: 'Example Imagery' });
+
+    // Verify that the created object is focused
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText(exampleImagery.name);
+    await page.locator('.c-imagery__main-image__bg').hover({ trial: true });
+    await expect(page.locator(backgroundImageSelector)).toBeVisible();
+  });
+  test('works as expected with Example Imagery', async ({ page }) => {
+    expect(await page.locator('.c-thumb__image').count()).toBeGreaterThan(0);
+    // Click the "Clear Data" menu action
+    await page.getByTitle('More actions').click();
+    await expect(
+      page.getByRole('menuitem', {
+        name: 'Clear Data for Object'
+      })
+    ).toBeEnabled();
+    await page
+      .getByRole('menuitem', {
+        name: 'Clear Data for Object'
+      })
+      .click();
+
+    // Verify that the background image is no longer visible
+    await expect(page.locator(backgroundImageSelector)).toBeHidden();
+    expect(await page.locator('.c-thumb__image').count()).toBe(0);
+  });
+});
diff --git a/e2e/tests/functional/couchdb.e2e.spec.js b/e2e/tests/functional/couchdb.e2e.spec.js
new file mode 100644
index 00000000000..b4042e8eaf7
--- /dev/null
+++ b/e2e/tests/functional/couchdb.e2e.spec.js
@@ -0,0 +1,118 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+ * This test suite is meant to be executed against a couchdb container. More doc to come
+ *
+ */
+
+import { expect, test } from '../../pluginFixtures.js';
+
+test.describe('CouchDB Status Indicator with mocked responses @couchdb', () => {
+  test.use({ failOnConsoleError: false });
+  //TODO BeforeAll Verify CouchDB Connectivity with APIContext
+  test('Shows green if connected', async ({ page }) => {
+    await page.route('**/openmct/mine', (route) => {
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({})
+      });
+    });
+
+    //Go to baseURL
+    await page.goto('./#/browse/mine?hideTree=true&hideInspector=true', {
+      waitUntil: 'networkidle'
+    });
+    await expect(page.locator('div:has-text("CouchDB is connected")').nth(3)).toBeVisible();
+  });
+  test('Shows red if not connected', async ({ page }) => {
+    await page.route('**/openmct/**', (route) => {
+      route.fulfill({
+        status: 503,
+        contentType: 'application/json',
+        body: JSON.stringify({})
+      });
+    });
+
+    //Go to baseURL
+    await page.goto('./#/browse/mine?hideTree=true&hideInspector=true', {
+      waitUntil: 'networkidle'
+    });
+    await expect(page.locator('div:has-text("CouchDB is offline")').nth(3)).toBeVisible();
+  });
+  test('Shows unknown if it receives an unexpected response code', async ({ page }) => {
+    await page.route('**/openmct/mine', (route) => {
+      route.fulfill({
+        status: 418,
+        contentType: 'application/json',
+        body: JSON.stringify({})
+      });
+    });
+
+    //Go to baseURL
+    await page.goto('./#/browse/mine?hideTree=true&hideInspector=true', {
+      waitUntil: 'networkidle'
+    });
+    await expect(page.locator('div:has-text("CouchDB connectivity unknown")').nth(3)).toBeVisible();
+  });
+});
+
+test.describe('CouchDB initialization with mocked responses @couchdb', () => {
+  test.use({ failOnConsoleError: false });
+  test("'My Items' folder is created if it doesn't exist", async ({ page }) => {
+    const mockedMissingObjectResponseFromCouchDB = {
+      status: 404,
+      contentType: 'application/json',
+      body: JSON.stringify({})
+    };
+
+    // Override the first request to GET openmct/mine to return a 404.
+    // This simulates the case of starting Open MCT with a fresh database
+    // and no "My Items" folder created yet.
+    await page.route(
+      '**/mine',
+      (route) => {
+        route.fulfill(mockedMissingObjectResponseFromCouchDB);
+      },
+      { times: 1 }
+    );
+
+    // Set up promise to verify that a PUT request to create "My Items"
+    // folder was made.
+    const putMineFolderRequest = page.waitForRequest(
+      (req) => req.url().endsWith('/mine') && req.method() === 'PUT'
+    );
+
+    // Set up promise to verify that a GET request to retrieve "My Items"
+    // folder was made.
+    const getMineFolderRequest = page.waitForRequest(
+      (req) => req.url().endsWith('/mine') && req.method() === 'GET'
+    );
+
+    // Go to baseURL.
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Wait for both requests to resolve.
+    await Promise.all([putMineFolderRequest, getMineFolderRequest]);
+  });
+});
diff --git a/e2e/tests/functional/example/eventGenerator.e2e.spec.js b/e2e/tests/functional/example/eventGenerator.e2e.spec.js
new file mode 100644
index 00000000000..86265656e49
--- /dev/null
+++ b/e2e/tests/functional/example/eventGenerator.e2e.spec.js
@@ -0,0 +1,58 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which verify the basic operations surrounding the example event generator.
+*/
+
+import { createDomainObjectWithDefaults } from '../../../appActions.js';
+import { expect, test } from '../../../pluginFixtures.js';
+
+test.describe('Example Event Generator CRUD Operations', () => {
+  test('Can create a Test Event Generator and it results in the table View', async ({ page }) => {
+    //Go to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    //Create a name for the object
+    const newObjectName = 'Test Event Generator';
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Event Message Generator',
+      name: newObjectName
+    });
+
+    //Assertions against newly created object which define standard behavior
+    await expect(page.waitForURL(/.*&view=table/)).toBeTruthy();
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText(newObjectName);
+  });
+});
+
+test.describe('Example Event Generator Telemetry Event Verification', () => {
+  test.fixme('telemetry is coming in for test event', async ({ page }) => {
+    // Go to object created in step one
+    // Verify the telemetry table is filled with > 1 row
+  });
+  test.fixme('telemetry is sorted by time ascending', async ({ page }) => {
+    // Go to object created in step one
+    // Verify the telemetry table has a class with "is-sorting asc"
+  });
+});
diff --git a/e2e/tests/functional/example/generator/sineWaveLimitProvider.e2e.spec.js b/e2e/tests/functional/example/generator/sineWaveLimitProvider.e2e.spec.js
new file mode 100644
index 00000000000..a0c50055b4d
--- /dev/null
+++ b/e2e/tests/functional/example/generator/sineWaveLimitProvider.e2e.spec.js
@@ -0,0 +1,139 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which verify the basic operations surrounding conditionSets.
+*/
+
+import { expect, test } from '../../../../baseFixtures.js';
+
+test.describe('Sine Wave Generator', () => {
+  test('Create new Sine Wave Generator Object and validate create Form Logic', async ({
+    page,
+    browserName
+  }) => {
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(browserName === 'firefox', 'This test needs to be updated to work with firefox');
+
+    //Go to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    //Click the Create button
+    await page.getByRole('button', { name: 'Create' }).click();
+
+    // Click Sine Wave Generator
+    await page.click('text=Sine Wave Generator');
+
+    // Verify that the each required field has required indicator
+    // Title
+    await expect(page.locator('.c-form-row__state-indicator').first()).toHaveClass(/req/);
+
+    // Verify that the Notes row does not have a required indicator
+    await expect(
+      page.locator('.c-form__section div:nth-child(3) .form-row .c-form-row__state-indicator')
+    ).not.toContain('.req');
+    await page.locator('textarea[type="text"]').fill('Optional Note Text');
+
+    // Period
+    await expect(page.locator('div:nth-child(4) .c-form-row__state-indicator')).toHaveClass(/req/);
+
+    // Amplitude
+    await expect(page.locator('div:nth-child(5) .c-form-row__state-indicator')).toHaveClass(/req/);
+
+    // Offset
+    await expect(page.locator('div:nth-child(6) .c-form-row__state-indicator')).toHaveClass(/req/);
+
+    // Data Rate
+    await expect(page.locator('div:nth-child(7) .c-form-row__state-indicator')).toHaveClass(/req/);
+
+    // Phase
+    await expect(page.locator('div:nth-child(8) .c-form-row__state-indicator')).toHaveClass(/req/);
+
+    // Randomness
+    await expect(page.locator('div:nth-child(9) .c-form-row__state-indicator')).toHaveClass(/req/);
+
+    // Verify that by removing value from required text field shows invalid indicator
+    await page
+      .locator(
+        'text=Properties Title Notes Period Amplitude Offset Data Rate (hz) Phase (radians) Ra >> input[type="text"]'
+      )
+      .fill('');
+    await expect(page.locator('.c-form-row__state-indicator').first()).toHaveClass(/invalid/);
+
+    // Verify that by adding value to empty required text field changes invalid to valid indicator
+    await page
+      .locator(
+        'text=Properties Title Notes Period Amplitude Offset Data Rate (hz) Phase (radians) Ra >> input[type="text"]'
+      )
+      .fill('New Sine Wave Generator');
+    await expect(page.locator('.c-form-row__state-indicator').first()).toHaveClass(/valid/);
+
+    // Verify that by removing value from required number field shows invalid indicator
+    await page.locator('.field.control.l-input-sm input').first().fill('');
+    await expect(page.locator('div:nth-child(4) .c-form-row__state-indicator')).toHaveClass(
+      /invalid/
+    );
+
+    // Verify that by adding value to empty required number field changes invalid to valid indicator
+    await page.locator('.field.control.l-input-sm input').first().fill('3');
+    await expect(page.locator('div:nth-child(4) .c-form-row__state-indicator')).toHaveClass(
+      /valid/
+    );
+
+    // Verify that can change value of number field by up/down arrows keys
+    // Click .field.control.l-input-sm input >> nth=0
+    await page.locator('.field.control.l-input-sm input').first().click();
+    // Press ArrowUp 3 times to change value from 3 to 6
+    await page.locator('.field.control.l-input-sm input').first().press('ArrowUp');
+    await page.locator('.field.control.l-input-sm input').first().press('ArrowUp');
+    await page.locator('.field.control.l-input-sm input').first().press('ArrowUp');
+
+    const value = await page.locator('.field.control.l-input-sm input').first().inputValue();
+    await expect(value).toBe('6');
+
+    //Click text=OK
+    await Promise.all([page.waitForNavigation(), page.click('button:has-text("OK")')]);
+
+    // Verify that the Sine Wave Generator is displayed and correct
+    // Verify object properties
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText(
+      'New Sine Wave Generator'
+    );
+
+    // Verify canvas rendered and can be interacted with
+    await page
+      .locator('canvas')
+      .nth(1)
+      .click({
+        position: {
+          x: 341,
+          y: 28
+        }
+      });
+
+    // Verify that where we click on canvas shows the number we clicked on
+    // Note that any number will do, we just care that a number exists
+    await expect(page.locator('.value-to-display-nearestValue')).toContainText(
+      /[+-]?([0-9]*[.])?[0-9]+/
+    );
+  });
+});
diff --git a/e2e/tests/functional/forms.e2e.spec.js b/e2e/tests/functional/forms.e2e.spec.js
new file mode 100644
index 00000000000..7ec750c037a
--- /dev/null
+++ b/e2e/tests/functional/forms.e2e.spec.js
@@ -0,0 +1,303 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which verify form functionality in isolation
+*/
+
+import { fileURLToPath } from 'url';
+import { v4 as genUuid } from 'uuid';
+
+import { createDomainObjectWithDefaults } from '../../appActions.js';
+import { expect, test } from '../../pluginFixtures.js';
+
+const TEST_FOLDER = 'test folder';
+const jsonFilePath = 'e2e/test-data/ExampleLayouts.json';
+const imageFilePath = 'e2e/test-data/rick.jpg';
+
+test.describe('Form Validation Behavior', () => {
+  test('Required Field indicators appear if title is empty and can be corrected', async ({
+    page
+  }) => {
+    //Go to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    await page.getByRole('button', { name: 'Create' }).click();
+    await page.getByRole('menuitem', { name: 'Folder' }).click();
+
+    // Fill in empty string into title and trigger validation with 'Tab'
+    await page.click('text=Properties Title Notes >> input[type="text"]');
+    await page.fill('text=Properties Title Notes >> input[type="text"]', '');
+    await page.press('text=Properties Title Notes >> input[type="text"]', 'Tab');
+
+    //Required Field Form Validation
+    await expect(page.locator('button:has-text("OK")')).toBeDisabled();
+    await expect(page.locator('.c-form-row__state-indicator').first()).toHaveClass(/invalid/);
+
+    //Correct Form Validation for missing title and trigger validation with 'Tab'
+    await page.click('text=Properties Title Notes >> input[type="text"]');
+    await page.fill('text=Properties Title Notes >> input[type="text"]', TEST_FOLDER);
+    await page.press('text=Properties Title Notes >> input[type="text"]', 'Tab');
+
+    //Required Field Form Validation is corrected
+    await expect(page.locator('button:has-text("OK")')).toBeEnabled();
+    await expect(page.locator('.c-form-row__state-indicator').first()).not.toHaveClass(/invalid/);
+
+    //Finish Creating Domain Object
+    await Promise.all([page.waitForNavigation(), page.click('button:has-text("OK")')]);
+
+    //Verify that the Domain Object has been created with the corrected title property
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText(TEST_FOLDER);
+  });
+});
+
+test.describe('Form File Input Behavior', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.addInitScript({
+      path: fileURLToPath(new URL('../../helper/addInitFileInputObject.js', import.meta.url))
+    });
+  });
+
+  test('Can select a JSON file type', async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    await page.getByRole('button', { name: 'Create' }).click();
+    await page.getByRole('menuitem', { name: 'JSON File Input Object' }).click();
+
+    await page.setInputFiles('#fileElem', jsonFilePath);
+
+    await page.getByRole('button', { name: 'Save' }).click();
+
+    const type = await page.locator('#file-input-type').textContent();
+    await expect(type).toBe(`"string"`);
+  });
+
+  test('Can select an image file type', async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    await page.getByRole('button', { name: 'Create' }).click();
+    await page.getByRole('menuitem', { name: 'Image File Input Object' }).click();
+
+    await page.setInputFiles('#fileElem', imageFilePath);
+
+    await page.getByRole('button', { name: 'Save' }).click();
+
+    const type = await page.locator('#file-input-type').textContent();
+    await expect(type).toBe(`"object"`);
+  });
+});
+
+test.describe('Persistence operations @addInit', () => {
+  // add non persistable root item
+  test.beforeEach(async ({ page }) => {
+    await page.addInitScript({
+      path: fileURLToPath(new URL('../../helper/addNoneditableObject.js', import.meta.url))
+    });
+  });
+
+  test('Persistability should be respected in the create form location field', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/4323'
+    });
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    await page.getByRole('button', { name: 'Create' }).click();
+
+    await page.click('text=Condition Set');
+
+    await page.locator('form[name="mctForm"] >> text=Persistence Testing').click();
+
+    const okButton = page.locator('button:has-text("OK")');
+    await expect(okButton).toBeDisabled();
+  });
+});
+
+test.describe('Persistence operations @couchdb', () => {
+  test.use({ failOnConsoleError: false });
+  test('Editing object properties should generate a single persistence operation', async ({
+    page
+  }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/5616'
+    });
+
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create a new 'Clock' object with default settings
+    const clock = await createDomainObjectWithDefaults(page, {
+      type: 'Clock'
+    });
+
+    // Count all persistence operations (PUT requests) for this specific object
+    let putRequestCount = 0;
+    page.on('request', (req) => {
+      if (req.method() === 'PUT' && req.url().endsWith(clock.uuid)) {
+        putRequestCount += 1;
+      }
+    });
+
+    // Open the edit form for the clock object
+    await page.click('button[title="More actions"]');
+    await page.click('li[title="Edit properties of this object."]');
+
+    // Modify the display format from default 12hr -> 24hr and click 'Save'
+    await page
+      .locator('select[aria-label="12 or 24 hour clock"]')
+      .selectOption({ value: 'clock24' });
+    await page.click('button[aria-label="Save"]');
+
+    await expect
+      .poll(() => putRequestCount, {
+        message: 'Verify a single PUT request was made to persist the object',
+        timeout: 1000
+      })
+      .toEqual(1);
+  });
+  test('Can create an object after a conflict error @couchdb @2p', async ({
+    page,
+    openmctConfig
+  }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/5982'
+    });
+    const { myItemsFolderName } = openmctConfig;
+    // Instantiate a second page/tab
+    const page2 = await page.context().newPage();
+
+    // Both pages: Go to baseURL
+    await Promise.all([
+      page.goto('./', { waitUntil: 'networkidle' }),
+      page2.goto('./', { waitUntil: 'networkidle' })
+    ]);
+
+    //Slow down the test a bit
+    await expect(
+      page.getByRole('button', { name: `Expand ${myItemsFolderName} folder` })
+    ).toBeVisible();
+    await expect(
+      page2.getByRole('button', { name: `Expand ${myItemsFolderName} folder` })
+    ).toBeVisible();
+
+    // Both pages: Click the Create button
+    await Promise.all([
+      page.click('button:has-text("Create")'),
+      page2.click('button:has-text("Create")')
+    ]);
+
+    // Both pages: Click "Clock" in the Create menu
+    await Promise.all([
+      page.click(`li[role='menuitem']:text("Clock")`),
+      page2.click(`li[role='menuitem']:text("Clock")`)
+    ]);
+
+    // Generate unique names for both objects
+    const nameInput = page.locator('form[name="mctForm"] .first input[type="text"]');
+    const nameInput2 = page2.locator('form[name="mctForm"] .first input[type="text"]');
+
+    // Both pages: Fill in the 'Name' form field.
+    await Promise.all([
+      nameInput.fill(''),
+      nameInput.fill(`Clock:${genUuid()}`),
+      nameInput2.fill(''),
+      nameInput2.fill(`Clock:${genUuid()}`)
+    ]);
+
+    // Both pages: Fill the "Notes" section with information about the
+    // currently running test and its project.
+    const testNotes = page.testNotes;
+    const notesInput = page.locator('form[name="mctForm"] #notes-textarea');
+    const notesInput2 = page2.locator('form[name="mctForm"] #notes-textarea');
+    await Promise.all([notesInput.fill(testNotes), notesInput2.fill(testNotes)]);
+
+    // Page 2: Click "OK" to create the domain object and wait for navigation.
+    // This will update the composition of the parent folder, setting the
+    // conditions for a conflict error from the first page.
+    await Promise.all([
+      page2.waitForLoadState(),
+      page2.click('[aria-label="Save"]'),
+      // Wait for Save Banner to appear
+      page2.waitForSelector('.c-message-banner__message')
+    ]);
+
+    // Close Page 2, we're done with it.
+    await page2.close();
+
+    // Page 1: Click "OK" to create the domain object and wait for navigation.
+    // This will trigger a conflict error upon attempting to update
+    // the composition of the parent folder.
+    await Promise.all([
+      page.waitForLoadState(),
+      page.click('[aria-label="Save"]'),
+      // Wait for Save Banner to appear
+      page.waitForSelector('.c-message-banner__message')
+    ]);
+
+    // Page 1: Verify that the conflict has occurred and an error notification is displayed.
+    await expect(
+      page.locator('.c-message-banner__message', {
+        hasText: 'Conflict detected while saving mine'
+      })
+    ).toBeVisible();
+
+    // Page 1: Start logging console errors from this point on
+    let errors = [];
+    page.on('console', (msg) => {
+      if (msg.type() === 'error') {
+        errors.push(msg.text());
+      }
+    });
+
+    // Page 1: Try to create a clock with the page that received the conflict.
+    const clockAfterConflict = await createDomainObjectWithDefaults(page, {
+      type: 'Clock'
+    });
+
+    // Page 1: Wait for save progress dialog to appear/disappear
+    await page
+      .locator('.c-message-banner__message', {
+        hasText:
+          'Do not navigate away from this page or close this browser tab while this message is displayed.',
+        state: 'visible'
+      })
+      .waitFor({ state: 'hidden' });
+
+    // Page 1: Navigate to 'My Items' and verify that the second clock was created
+    await page.goto('./#/browse/mine');
+    await expect(
+      page.locator(`.c-grid-item__name[title="${clockAfterConflict.name}"]`)
+    ).toBeVisible();
+
+    // Verify no console errors occurred
+    expect(errors).toHaveLength(0);
+  });
+});
+
+test.describe('Form Correctness by Object Type', () => {
+  test.fixme('Verify correct behavior of number object (SWG)', async ({ page }) => {});
+  test.fixme('Verify correct behavior of number object Timer', async ({ page }) => {});
+  test.fixme('Verify correct behavior of number object Plan View', async ({ page }) => {});
+  test.fixme('Verify correct behavior of number object Clock', async ({ page }) => {});
+  test.fixme('Verify correct behavior of number object Hyperlink', async ({ page }) => {});
+});
diff --git a/e2e/tests/functional/menu.e2e.spec.js b/e2e/tests/functional/menu.e2e.spec.js
new file mode 100644
index 00000000000..fe203c8627a
--- /dev/null
+++ b/e2e/tests/functional/menu.e2e.spec.js
@@ -0,0 +1,59 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which verify persistability checks
+*/
+
+import { fileURLToPath } from 'url';
+
+import { expect, test } from '../../baseFixtures.js';
+
+test.describe('Persistence operations @addInit', () => {
+  // add non persistable root item
+  test.beforeEach(async ({ page }) => {
+    await page.addInitScript({
+      path: fileURLToPath(new URL('../../helper/addNoneditableObject.js', import.meta.url))
+    });
+  });
+
+  test('Non-persistable objects should not show persistence related actions', async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    await page.locator('text=Persistence Testing').first().click({
+      button: 'right'
+    });
+
+    const menuOptions = page.locator('.c-menu li');
+
+    await expect.soft(menuOptions).toContainText(['Open In New Tab', 'View', 'Create Link']);
+    await expect(menuOptions).not.toContainText([
+      'Move',
+      'Duplicate',
+      'Remove',
+      'Add New Folder',
+      'Edit Properties...',
+      'Export as JSON',
+      'Import from JSON'
+    ]);
+  });
+});
diff --git a/e2e/tests/functional/missionStatus.e2e.spec.js b/e2e/tests/functional/missionStatus.e2e.spec.js
new file mode 100644
index 00000000000..7ae1f61cc82
--- /dev/null
+++ b/e2e/tests/functional/missionStatus.e2e.spec.js
@@ -0,0 +1,127 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which verify persistability checks
+*/
+
+import { fileURLToPath } from 'url';
+
+import { expect, test } from '../../baseFixtures.js';
+
+test.describe('Mission Status @addInit', () => {
+  const NO_GO = '0';
+  const GO = '1';
+  test.beforeEach(async ({ page }) => {
+    // FIXME: determine if plugins will be added to index.html or need to be injected
+    await page.addInitScript({
+      path: fileURLToPath(new URL('../../helper/addInitExampleUser.js', import.meta.url))
+    });
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    await expect(page.getByText('Select Role')).toBeVisible();
+    // Description should be empty https://github.com/nasa/openmct/issues/6978
+    await expect(page.getByLabel('Dialog message')).toBeHidden();
+    // set role
+    await page.getByRole('button', { name: 'Select', exact: true }).click();
+    // dismiss role confirmation popup
+    await page.getByRole('button', { name: 'Dismiss' }).click();
+  });
+
+  test('Basic functionality', async ({ page }) => {
+    const imageryStatusSelect = page.getByRole('combobox', { name: 'Imagery' });
+    const commandingStatusSelect = page.getByRole('combobox', { name: 'Commanding' });
+    const drivingStatusSelect = page.getByRole('combobox', { name: 'Driving' });
+    const missionStatusPanel = page.getByRole('dialog', { name: 'User Control Panel' });
+
+    await test.step('Mission status panel shows/hides when toggled', async () => {
+      // Ensure that clicking the button toggles the dialog
+      await page.getByLabel('Toggle Mission Status Panel').click();
+      await expect(missionStatusPanel).toBeVisible();
+      await page.getByLabel('Toggle Mission Status Panel').click();
+      await expect(missionStatusPanel).toBeHidden();
+      await page.getByLabel('Toggle Mission Status Panel').click();
+      await expect(missionStatusPanel).toBeVisible();
+
+      // Ensure that clicking the close button closes the dialog
+      await page.getByLabel('Close Mission Status Panel').click();
+      await expect(missionStatusPanel).toBeHidden();
+      await page.getByLabel('Toggle Mission Status Panel').click();
+      await expect(missionStatusPanel).toBeVisible();
+
+      // Ensure clicking off the dialog also closes it
+      await page.getByLabel('My Items Grid View').click();
+      await expect(missionStatusPanel).toBeHidden();
+      await page.getByLabel('Toggle Mission Status Panel').click();
+      await expect(missionStatusPanel).toBeVisible();
+    });
+
+    await test.step('Mission action statuses have correct defaults and can be set', async () => {
+      await expect(imageryStatusSelect).toHaveValue(NO_GO);
+      await expect(commandingStatusSelect).toHaveValue(NO_GO);
+      await expect(drivingStatusSelect).toHaveValue(NO_GO);
+
+      await setMissionStatus(page, 'Imagery', GO);
+      await expect(imageryStatusSelect).toHaveValue(GO);
+      await expect(commandingStatusSelect).toHaveValue(NO_GO);
+      await expect(drivingStatusSelect).toHaveValue(NO_GO);
+
+      await setMissionStatus(page, 'Commanding', GO);
+      await expect(imageryStatusSelect).toHaveValue(GO);
+      await expect(commandingStatusSelect).toHaveValue(GO);
+      await expect(drivingStatusSelect).toHaveValue(NO_GO);
+
+      await setMissionStatus(page, 'Driving', GO);
+      await expect(imageryStatusSelect).toHaveValue(GO);
+      await expect(commandingStatusSelect).toHaveValue(GO);
+      await expect(drivingStatusSelect).toHaveValue(GO);
+
+      await setMissionStatus(page, 'Imagery', NO_GO);
+      await expect(imageryStatusSelect).toHaveValue(NO_GO);
+      await expect(commandingStatusSelect).toHaveValue(GO);
+      await expect(drivingStatusSelect).toHaveValue(GO);
+
+      await setMissionStatus(page, 'Commanding', NO_GO);
+      await expect(imageryStatusSelect).toHaveValue(NO_GO);
+      await expect(commandingStatusSelect).toHaveValue(NO_GO);
+      await expect(drivingStatusSelect).toHaveValue(GO);
+
+      await setMissionStatus(page, 'Driving', NO_GO);
+      await expect(imageryStatusSelect).toHaveValue(NO_GO);
+      await expect(commandingStatusSelect).toHaveValue(NO_GO);
+      await expect(drivingStatusSelect).toHaveValue(NO_GO);
+    });
+  });
+});
+
+/**
+ *
+ * @param {import('@playwright/test').Page} page
+ * @param {'Commanding'|'Imagery'|'Driving'} action
+ * @param {'0'|'1'} status
+ */
+async function setMissionStatus(page, action, status) {
+  await page.getByRole('combobox', { name: action }).selectOption(status);
+  await expect(
+    page.getByRole('alert').filter({ hasText: 'Successfully set mission status' })
+  ).toBeVisible();
+  await page.getByLabel('Dismiss').click();
+}
diff --git a/e2e/tests/functional/moveAndLinkObjects.e2e.spec.js b/e2e/tests/functional/moveAndLinkObjects.e2e.spec.js
new file mode 100644
index 00000000000..71a6d4f0e6f
--- /dev/null
+++ b/e2e/tests/functional/moveAndLinkObjects.e2e.spec.js
@@ -0,0 +1,303 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which verify the basic operations surrounding moving & linking objects.
+*/
+
+import { createDomainObjectWithDefaults } from '../../appActions.js';
+import { expect, test } from '../../pluginFixtures.js';
+
+test.describe('Move & link item tests', () => {
+  test('Create a basic object and verify that it can be moved to another folder', async ({
+    page,
+    openmctConfig
+  }) => {
+    const { myItemsFolderName } = openmctConfig;
+
+    // Go to Open MCT
+    await page.goto('./');
+
+    const parentFolder = await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      name: 'Parent Folder'
+    });
+    const childFolder = await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      name: 'Child Folder',
+      parent: parentFolder.uuid
+    });
+    const grandchildFolder = await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      name: 'Grandchild Folder',
+      parent: childFolder.uuid
+    });
+
+    // Attempt to move parent to its own grandparent
+    await page.locator('button[title="Show selected item in tree"]').click();
+
+    const treePane = page.getByRole('tree', {
+      name: 'Main Tree'
+    });
+    await treePane
+      .getByRole('treeitem', {
+        name: 'Parent Folder'
+      })
+      .click({
+        button: 'right'
+      });
+
+    await page
+      .getByRole('menuitem', {
+        name: /Move/
+      })
+      .click();
+
+    const createModalTree = page.getByRole('tree', {
+      name: 'Create Modal Tree'
+    });
+    const myItemsLocatorTreeItem = createModalTree.getByRole('treeitem', {
+      name: myItemsFolderName
+    });
+    await myItemsLocatorTreeItem.locator('.c-disclosure-triangle').click();
+    await myItemsLocatorTreeItem.click();
+
+    const parentFolderLocatorTreeItem = createModalTree.getByRole('treeitem', {
+      name: parentFolder.name
+    });
+    await parentFolderLocatorTreeItem.locator('.c-disclosure-triangle').click();
+    await parentFolderLocatorTreeItem.click();
+    await expect(page.locator('[aria-label="Save"]')).toBeDisabled();
+
+    const childFolderLocatorTreeItem = createModalTree.getByRole('treeitem', {
+      name: new RegExp(childFolder.name)
+    });
+    await childFolderLocatorTreeItem.locator('.c-disclosure-triangle').click();
+    await childFolderLocatorTreeItem.click();
+    await expect(page.locator('[aria-label="Save"]')).toBeDisabled();
+
+    const grandchildFolderLocatorTreeItem = createModalTree.getByRole('treeitem', {
+      name: grandchildFolder.name
+    });
+    await grandchildFolderLocatorTreeItem.locator('.c-disclosure-triangle').click();
+    await grandchildFolderLocatorTreeItem.click();
+    await expect(page.locator('[aria-label="Save"]')).toBeDisabled();
+
+    await parentFolderLocatorTreeItem.click();
+    await expect(page.locator('[aria-label="Save"]')).toBeDisabled();
+    await page.locator('[aria-label="Cancel"]').click();
+
+    // Move Child Folder from Parent Folder to My Items
+    await treePane
+      .getByRole('treeitem', {
+        name: new RegExp(childFolder.name)
+      })
+      .click({
+        button: 'right'
+      });
+    await page
+      .getByRole('menuitem', {
+        name: /Move/
+      })
+      .click();
+    await myItemsLocatorTreeItem.click();
+
+    await page.locator('[aria-label="Save"]').click();
+    const myItemsPaneTreeItem = treePane.getByRole('treeitem', {
+      name: myItemsFolderName
+    });
+
+    // Expect that Child Folder is in My Items, the root folder
+    expect(myItemsPaneTreeItem.locator('nth=0:has(text=Child Folder)')).toBeTruthy();
+  });
+  test('Create a basic object and verify that it cannot be moved to telemetry object without Composition Provider', async ({
+    page,
+    openmctConfig
+  }) => {
+    const { myItemsFolderName } = openmctConfig;
+
+    // Go to Open MCT
+    await page.goto('./');
+
+    // Create Telemetry Table
+    let telemetryTable = 'Test Telemetry Table';
+    await page.locator('button:has-text("Create")').click();
+    await page.locator('li[role="menuitem"]:has-text("Telemetry Table")').click();
+    await page.locator('text=Properties Title Notes >> input[type="text"]').click();
+    await page.locator('text=Properties Title Notes >> input[type="text"]').fill(telemetryTable);
+
+    await page.locator('button:has-text("OK")').click();
+
+    // Finish editing and save Telemetry Table
+    await page.locator('.c-button--menu.c-button--major.icon-save').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Create New Folder Basic Domain Object
+    let folder = 'Test Folder';
+    await page.locator('button:has-text("Create")').click();
+    await page.locator('li[role="menuitem"]:has-text("Folder")').click();
+    await page.locator('text=Properties Title Notes >> input[type="text"]').click();
+    await page.locator('text=Properties Title Notes >> input[type="text"]').fill(folder);
+
+    // See if it's possible to put the folder in the Telemetry object during creation (Soft Assert)
+    await page.locator(`form[name="mctForm"] >> text=${telemetryTable}`).click();
+    let okButton = page.locator('button.c-button.c-button--major:has-text("OK")');
+    let okButtonStateDisabled = await okButton.isDisabled();
+    expect.soft(okButtonStateDisabled).toBeTruthy();
+
+    // Continue test regardless of assertion and create it in My Items
+    await page.locator(`form[name="mctForm"] >> text=${myItemsFolderName}`).click();
+    await page.locator('button:has-text("OK")').click();
+
+    // Open My Items
+    await page.locator(`text=Open MCT ${myItemsFolderName} >> span`).nth(3).click();
+
+    // Select Folder Object and select Move from context menu
+    await Promise.all([page.waitForNavigation(), page.locator(`a:has-text("${folder}")`).click()]);
+    await page
+      .locator('.c-tree__item.is-navigated-object .c-tree__item__label .c-tree__item__type-icon')
+      .click({
+        button: 'right'
+      });
+    await page.locator('li.icon-move').click();
+
+    // See if it's possible to put the folder in the Telemetry object after creation
+    await page.locator(`text=Location Open MCT ${myItemsFolderName} >> span`).nth(3).click();
+    await page.locator(`form[name="mctForm"] >> text=${telemetryTable}`).click();
+    let okButton2 = page.locator('button.c-button.c-button--major:has-text("OK")');
+    let okButtonStateDisabled2 = await okButton2.isDisabled();
+    expect(okButtonStateDisabled2).toBeTruthy();
+  });
+
+  test('Create a basic object and verify that it can be linked to another folder', async ({
+    page,
+    openmctConfig
+  }) => {
+    const { myItemsFolderName } = openmctConfig;
+
+    // Go to Open MCT
+    await page.goto('./');
+
+    const parentFolder = await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      name: 'Parent Folder'
+    });
+    const childFolder = await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      name: 'Child Folder',
+      parent: parentFolder.uuid
+    });
+    const grandchildFolder = await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      name: 'Grandchild Folder',
+      parent: childFolder.uuid
+    });
+
+    // Attempt to move parent to its own grandparent
+    await page.locator('button[title="Show selected item in tree"]').click();
+
+    const treePane = page.getByRole('tree', {
+      name: 'Main Tree'
+    });
+    await treePane
+      .getByRole('treeitem', {
+        name: 'Parent Folder'
+      })
+      .click({
+        button: 'right'
+      });
+
+    await page
+      .getByRole('menuitem', {
+        name: /Move/
+      })
+      .click();
+
+    const createModalTree = page.getByRole('tree', {
+      name: 'Create Modal Tree'
+    });
+    const myItemsLocatorTreeItem = createModalTree.getByRole('treeitem', {
+      name: myItemsFolderName
+    });
+    await myItemsLocatorTreeItem.locator('.c-disclosure-triangle').click();
+    await myItemsLocatorTreeItem.click();
+
+    const parentFolderLocatorTreeItem = createModalTree.getByRole('treeitem', {
+      name: parentFolder.name
+    });
+    await parentFolderLocatorTreeItem.locator('.c-disclosure-triangle').click();
+    await parentFolderLocatorTreeItem.click();
+    await expect(page.locator('[aria-label="Save"]')).toBeDisabled();
+
+    const childFolderLocatorTreeItem = createModalTree.getByRole('treeitem', {
+      name: new RegExp(childFolder.name)
+    });
+    await childFolderLocatorTreeItem.locator('.c-disclosure-triangle').click();
+    await childFolderLocatorTreeItem.click();
+    await expect(page.locator('[aria-label="Save"]')).toBeDisabled();
+
+    const grandchildFolderLocatorTreeItem = createModalTree.getByRole('treeitem', {
+      name: grandchildFolder.name
+    });
+    await grandchildFolderLocatorTreeItem.locator('.c-disclosure-triangle').click();
+    await grandchildFolderLocatorTreeItem.click();
+    await expect(page.locator('[aria-label="Save"]')).toBeDisabled();
+
+    await parentFolderLocatorTreeItem.click();
+    await expect(page.locator('[aria-label="Save"]')).toBeDisabled();
+    await page.locator('[aria-label="Cancel"]').click();
+
+    // Move Child Folder from Parent Folder to My Items
+    await treePane
+      .getByRole('treeitem', {
+        name: new RegExp(childFolder.name)
+      })
+      .click({
+        button: 'right'
+      });
+    await page
+      .getByRole('menuitem', {
+        name: /Link/
+      })
+      .click();
+    await myItemsLocatorTreeItem.click();
+
+    await page.locator('[aria-label="Save"]').click();
+    const myItemsPaneTreeItem = treePane.getByRole('treeitem', {
+      name: myItemsFolderName
+    });
+
+    // Expect that Child Folder is in My Items, the root folder
+    expect(myItemsPaneTreeItem.locator('nth=0:has(text=Child Folder)')).toBeTruthy();
+  });
+});
+
+test.fixme(
+  'Cannot move a previously created domain object to non-persistable object in Move Modal',
+  async ({ page }) => {
+    //Create a domain object
+    //Save Domain object
+    //Move Object and verify that cannot select non-persistable object
+    //Move Object to My Items
+    //Verify successful move
+  }
+);
diff --git a/e2e/tests/functional/notification.e2e.spec.js b/e2e/tests/functional/notification.e2e.spec.js
new file mode 100644
index 00000000000..02984225dc4
--- /dev/null
+++ b/e2e/tests/functional/notification.e2e.spec.js
@@ -0,0 +1,120 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which verify Open MCT's Notification functionality
+*/
+
+import { createDomainObjectWithDefaults, createNotification } from '../../appActions.js';
+import { expect, test } from '../../pluginFixtures.js';
+
+test.describe('Notifications List', () => {
+  test.fixme('Notifications can be dismissed individually', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/6820'
+    });
+
+    // Go to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create an error notification with the message "Error message"
+    await createNotification(page, {
+      severity: 'error',
+      message: 'Error message'
+    });
+
+    // Create an alert notification with the message "Alert message"
+    await createNotification(page, {
+      severity: 'alert',
+      message: 'Alert message'
+    });
+
+    // Verify that there is a button with aria-label "Review 2 Notifications"
+    expect(await page.locator('button[aria-label="Review 2 Notifications"]').count()).toBe(1);
+
+    // Click on button with aria-label "Review 2 Notifications"
+    await page.click('button[aria-label="Review 2 Notifications"]');
+
+    // Click on button with aria-label="Dismiss notification of Error message"
+    await page.click('button[aria-label="Dismiss notification of Error message"]');
+
+    // Verify there is no a notification (listitem) with the text "Error message" since it was dismissed
+    expect(await page.locator('div[role="dialog"] div[role="listitem"]').innerText()).not.toContain(
+      'Error message'
+    );
+
+    // Verify there is still a notification (listitem) with the text "Alert message"
+    expect(await page.locator('div[role="dialog"] div[role="listitem"]').innerText()).toContain(
+      'Alert message'
+    );
+
+    // Click on button with aria-label="Dismiss notification of Alert message"
+    await page.click('button[aria-label="Dismiss notification of Alert message"]');
+
+    // Verify that there is no dialog since the notification overlay was closed automatically after all notifications were dismissed
+    expect(await page.locator('div[role="dialog"]').count()).toBe(0);
+  });
+});
+
+test.describe('Notification Overlay', () => {
+  test('Closing notification list after notification banner disappeared does not cause it to open automatically', async ({
+    page
+  }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/6130'
+    });
+
+    // Go to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create a new Display Layout object
+    await createDomainObjectWithDefaults(page, { type: 'Display Layout' });
+
+    // Dismiss notification banner
+    await page.getByRole('button', { name: 'Dismiss' }).click();
+
+    // Click on the button "Review 1 Notification"
+    await page.getByRole('button', { name: 'Review 1 Notification' }).click();
+
+    // Verify that Notification List is open
+    await expect(page.getByRole('dialog', { name: 'Overlay' })).toBeVisible();
+
+    // Wait until there is no Notification Banner
+    await expect(page.getByRole('alert')).not.toBeAttached();
+
+    // Click on the "Close" button of the Notification List
+    await page.getByRole('button', { name: 'Close' }).click();
+
+    // On the Display Layout object, click on the "Edit" button
+    await page.getByRole('button', { name: 'Edit Object' }).click();
+
+    // Click on the "Save" button
+    await page.getByRole('button', { name: 'Save' }).click();
+
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Verify that Notification List is NOT open
+    await expect(page.getByRole('dialog', { name: 'Overlay' })).toBeHidden();
+  });
+});
diff --git a/e2e/tests/functional/planning/ganttChart.e2e.spec.js b/e2e/tests/functional/planning/ganttChart.e2e.spec.js
new file mode 100644
index 00000000000..ff72955e269
--- /dev/null
+++ b/e2e/tests/functional/planning/ganttChart.e2e.spec.js
@@ -0,0 +1,134 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import fs from 'fs';
+
+import { getPreciseDuration } from '../../../../src/utils/duration.js';
+import { createDomainObjectWithDefaults, createPlanFromJSON } from '../../../appActions.js';
+import {
+  assertPlanActivities,
+  setBoundsToSpanAllActivities
+} from '../../../helper/planningUtils.js';
+import { expect, test } from '../../../pluginFixtures.js';
+
+const testPlan1 = JSON.parse(
+  fs.readFileSync(
+    new URL('../../../test-data/examplePlans/ExamplePlan_Small1.json', import.meta.url)
+  )
+);
+const testPlan2 = JSON.parse(
+  fs.readFileSync(
+    new URL('../../../test-data/examplePlans/ExamplePlan_Small2.json', import.meta.url)
+  )
+);
+
+test.describe('Gantt Chart', () => {
+  let ganttChart;
+  let plan;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    ganttChart = await createDomainObjectWithDefaults(page, {
+      type: 'Gantt Chart'
+    });
+    plan = await createPlanFromJSON(page, {
+      json: testPlan1,
+      parent: ganttChart.uuid
+    });
+  });
+
+  test('Displays all plan events', async ({ page }) => {
+    await page.goto(ganttChart.url);
+
+    await assertPlanActivities(page, testPlan1, ganttChart.url);
+  });
+  test('Replaces a plan with a new plan', async ({ page }) => {
+    await assertPlanActivities(page, testPlan1, ganttChart.url);
+    await createPlanFromJSON(page, {
+      json: testPlan2,
+      parent: ganttChart.uuid
+    });
+    const replaceModal = page
+      .getByRole('dialog')
+      .filter({ hasText: 'This action will replace the current Plan. Do you want to continue?' });
+    await expect(replaceModal).toBeVisible();
+    await page.getByRole('button', { name: 'Ok', exact: true }).click();
+
+    await assertPlanActivities(page, testPlan2, ganttChart.url);
+  });
+  test('Can select a single activity and display its details in the inspector', async ({
+    page
+  }) => {
+    test.slow();
+    await page.goto(ganttChart.url);
+
+    await setBoundsToSpanAllActivities(page, testPlan1, ganttChart.url);
+
+    const activities = Object.values(testPlan1).flat();
+    const activity = activities[0];
+    await page
+      .locator('g')
+      .filter({ hasText: new RegExp(activity.name) })
+      .click();
+    await page.getByRole('tab', { name: 'Activity' }).click();
+
+    const startDateTime = await page
+      .locator(
+        '.c-inspect-properties__label:has-text("Start DateTime")+.c-inspect-properties__value'
+      )
+      .innerText();
+    const endDateTime = await page
+      .locator('.c-inspect-properties__label:has-text("End DateTime")+.c-inspect-properties__value')
+      .innerText();
+    const duration = await page
+      .locator('.c-inspect-properties__label:has-text("duration")+.c-inspect-properties__value')
+      .innerText();
+
+    const expectedStartDate = new Date(activity.start).toISOString();
+    const actualStartDate = new Date(startDateTime).toISOString();
+    const expectedEndDate = new Date(activity.end).toISOString();
+    const actualEndDate = new Date(endDateTime).toISOString();
+    const expectedDuration = getPreciseDuration(activity.end - activity.start);
+    const actualDuration = duration;
+
+    expect(expectedStartDate).toEqual(actualStartDate);
+    expect(expectedEndDate).toEqual(actualEndDate);
+    expect(expectedDuration).toEqual(actualDuration);
+  });
+  test("Displays a Plan's draft status", async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/6641'
+    });
+
+    // Mark the Plan's status as draft in the OpenMCT API
+    await page.evaluate(async (planObject) => {
+      await window.openmct.status.set(planObject.uuid, 'draft');
+    }, plan);
+
+    // Navigate to the Gantt Chart
+    await page.goto(ganttChart.url);
+
+    // Assert that the Plan's status is displayed as draft
+    expect(await page.locator('.u-contents.c-swimlane.is-status--draft').count()).toBe(
+      Object.keys(testPlan1).length
+    );
+  });
+});
diff --git a/e2e/tests/functional/planning/plan.e2e.spec.js b/e2e/tests/functional/planning/plan.e2e.spec.js
new file mode 100644
index 00000000000..61784bfa9a8
--- /dev/null
+++ b/e2e/tests/functional/planning/plan.e2e.spec.js
@@ -0,0 +1,109 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import fs from 'fs';
+
+import { createPlanFromJSON } from '../../../appActions.js';
+import {
+  addPlanGetInterceptor,
+  assertPlanActivities,
+  assertPlanOrderedSwimLanes
+} from '../../../helper/planningUtils.js';
+import { expect, test } from '../../../pluginFixtures.js';
+
+const testPlan1 = JSON.parse(
+  fs.readFileSync(
+    new URL('../../../test-data/examplePlans/ExamplePlan_Small1.json', import.meta.url)
+  )
+);
+
+const testPlanWithOrderedLanes = JSON.parse(
+  fs.readFileSync(
+    new URL('../../../test-data/examplePlans/ExamplePlanWithOrderedLanes.json', import.meta.url)
+  )
+);
+
+test.describe('Plan', () => {
+  let plan;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    plan = await createPlanFromJSON(page, {
+      json: testPlan1
+    });
+  });
+
+  test('Displays all plan events', async ({ page }) => {
+    await assertPlanActivities(page, testPlan1, plan.url);
+  });
+
+  test('Displays plans with ordered swim lanes configuration', async ({ page }) => {
+    // Add configuration for swim lanes
+    await addPlanGetInterceptor(page);
+    // Create the plan
+    const planWithSwimLanes = await createPlanFromJSON(page, {
+      json: testPlanWithOrderedLanes
+    });
+    await assertPlanOrderedSwimLanes(page, testPlanWithOrderedLanes, planWithSwimLanes.url);
+  });
+
+  test('Allows setting the state of an activity when selected.', async ({ page }) => {
+    const groups = Object.keys(testPlan1);
+    const firstGroupKey = groups[0];
+    const firstGroupItems = testPlan1[firstGroupKey];
+    const firstActivity = firstGroupItems[0];
+    const lastActivity = firstGroupItems[firstGroupItems.length - 1];
+    const startBound = firstActivity.start;
+    // Set the endBound to the end time of the current activity
+    let endBound = lastActivity.end;
+    // eslint-disable-next-line playwright/no-conditional-in-test
+    if (endBound === startBound) {
+      // Prevent oddities with setting start and end bound equal
+      // via URL params
+      endBound += 1;
+    }
+
+    // Switch to fixed time mode with all plan events within the bounds
+    await page.goto(
+      `${plan.url}?tc.mode=fixed&tc.startBound=${startBound}&tc.endBound=${endBound}&tc.timeSystem=utc&view=plan.view`
+    );
+
+    // select the first activity in the list
+    await page.getByText('Past event 1').click();
+
+    // Find the activity state section in the inspector
+    await page.getByRole('tab', { name: 'Activity' }).click();
+
+    // Check that activity state dropdown selection shows the `set status` option by default
+    await expect(page.getByLabel('Activity Status').locator("[aria-selected='true']")).toHaveText(
+      'Not started'
+    );
+
+    // Change the selection of the activity status
+    await page.getByRole('combobox').selectOption({ label: 'Aborted' });
+    // select a different activity and back to the previous one
+    await page.getByText('Past event 2').click();
+    await page.getByText('Past event 1').click();
+    // Check that activity state dropdown selection shows the previously selected option by default
+    await expect(page.getByLabel('Activity Status').locator("[aria-selected='true']")).toHaveText(
+      'Aborted'
+    );
+  });
+});
diff --git a/e2e/tests/functional/planning/timelist.e2e.spec.js b/e2e/tests/functional/planning/timelist.e2e.spec.js
new file mode 100644
index 00000000000..4cd5cc12b1f
--- /dev/null
+++ b/e2e/tests/functional/planning/timelist.e2e.spec.js
@@ -0,0 +1,337 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import fs from 'fs';
+
+import { createDomainObjectWithDefaults, createPlanFromJSON } from '../../../appActions.js';
+import { getEarliestStartTime } from '../../../helper/planningUtils';
+import { expect, test } from '../../../pluginFixtures.js';
+
+const examplePlanSmall3 = JSON.parse(
+  fs.readFileSync(
+    new URL('../../../test-data/examplePlans/ExamplePlan_Small3.json', import.meta.url)
+  )
+);
+const examplePlanSmall1 = JSON.parse(
+  fs.readFileSync(
+    new URL('../../../test-data/examplePlans/ExamplePlan_Small1.json', import.meta.url)
+  )
+);
+// eslint-disable-next-line no-unused-vars
+const START_TIME_COLUMN = 0;
+// eslint-disable-next-line no-unused-vars
+const END_TIME_COLUMN = 1;
+const TIME_TO_FROM_COLUMN = 2;
+// eslint-disable-next-line no-unused-vars
+const ACTIVITY_COLUMN = 3;
+const HEADER_ROW = 0;
+const NUM_COLUMNS = 5;
+
+test.describe('Time List', () => {
+  test("Create a Time List, add a single Plan to it, verify all the activities are displayed with no milliseconds and selecting an activity shows it's properties", async ({
+    page
+  }) => {
+    // Goto baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    const timelist = await test.step('Create a Time List', async () => {
+      const createdTimeList = await createDomainObjectWithDefaults(page, { type: 'Time List' });
+      const objectName = await page.locator('.l-browse-bar__object-name').innerText();
+      expect(objectName).toBe(createdTimeList.name);
+
+      return createdTimeList;
+    });
+
+    await test.step('Create a Plan and add it to the timelist', async () => {
+      await createPlanFromJSON(page, {
+        name: 'Test Plan',
+        json: examplePlanSmall1,
+        parent: timelist.uuid
+      });
+      const groups = Object.keys(examplePlanSmall1);
+      const firstGroupKey = groups[0];
+      const firstGroupItems = examplePlanSmall1[firstGroupKey];
+      const firstActivity = firstGroupItems[0];
+      const lastActivity = firstGroupItems[firstGroupItems.length - 1];
+      const startBound = firstActivity.start;
+      const endBound = lastActivity.end;
+
+      // Switch to fixed time mode with all plan events within the bounds
+      await page.goto(
+        `${timelist.url}?tc.mode=fixed&tc.startBound=${startBound}&tc.endBound=${endBound}&tc.timeSystem=utc&view=timelist.view`
+      );
+
+      // Verify all events are displayed
+      const eventCount = await page.getByRole('row').count();
+      // subtracting one for the header
+      await expect(eventCount - 1).toEqual(firstGroupItems.length);
+    });
+
+    await test.step('Does not show milliseconds in times', async () => {
+      // Get an activity
+      const row = page.getByRole('row').nth(2);
+      // Verify that none fo the times have milliseconds displayed.
+      // Example: 2024-11-17T16:00:00Z is correct and 2024-11-17T16:00:00.000Z is wrong
+
+      await expect(row.locator('.--start')).not.toContainText('.');
+      await expect(row.locator('.--end')).not.toContainText('.');
+      await expect(row.locator('.--duration')).not.toContainText('.');
+    });
+
+    await test.step('Shows activity properties when a row is selected', async () => {
+      await page.getByRole('row').nth(2).click();
+
+      // Find the activity state section in the inspector
+      await page.getByRole('tab', { name: 'Activity' }).click();
+      // Check that activity state label is displayed in the inspector.
+      await expect(page.getByLabel('Activity Status').locator("[aria-selected='true']")).toHaveText(
+        'Not started'
+      );
+    });
+  });
+});
+
+test("View a timelist in expanded view, verify all the activities are displayed and selecting an activity shows it's properties", async ({
+  page
+}) => {
+  // Goto baseURL
+  await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+  const timelist = await test.step('Create a Time List', async () => {
+    const createdTimeList = await createDomainObjectWithDefaults(page, { type: 'Time List' });
+    const objectName = await page.locator('.l-browse-bar__object-name').innerText();
+    expect(objectName).toBe(createdTimeList.name);
+
+    return createdTimeList;
+  });
+
+  await test.step('Create a Plan and add it to the timelist', async () => {
+    await createPlanFromJSON(page, {
+      name: 'Test Plan',
+      json: examplePlanSmall1,
+      parent: timelist.uuid
+    });
+
+    // Ensure that all activities are shown in the expanded view
+    const groups = Object.keys(examplePlanSmall1);
+    const firstGroupKey = groups[0];
+    const firstGroupItems = examplePlanSmall1[firstGroupKey];
+    const firstActivity = firstGroupItems[0];
+    const lastActivity = firstGroupItems[firstGroupItems.length - 1];
+    const startBound = firstActivity.start;
+    const endBound = lastActivity.end;
+
+    // Switch to fixed time mode with all plan events within the bounds
+    await page.goto(
+      `${timelist.url}?tc.mode=fixed&tc.startBound=${startBound}&tc.endBound=${endBound}&tc.timeSystem=utc&view=timelist.view`
+    );
+
+    // Change the object to edit mode
+    await page.getByRole('button', { name: 'Edit Object' }).click();
+
+    // Find the display properties section in the inspector
+    await page.getByRole('tab', { name: 'View Properties' }).click();
+    // Switch to expanded view and save the setting
+    await page.getByLabel('Display Style').selectOption({ label: 'Expanded' });
+
+    // Click on the "Save" button
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Verify all events are displayed
+    const eventCount = await page.getByRole('row').count();
+    await expect(eventCount).toEqual(firstGroupItems.length);
+  });
+
+  await test.step('Shows activity properties when a row is selected', async () => {
+    await page.getByRole('row').nth(2).click();
+
+    // Find the activity state section in the inspector
+    await page.getByRole('tab', { name: 'Activity' }).click();
+    // Check that activity state label is displayed in the inspector.
+    await expect(page.getByLabel('Activity Status').locator("[aria-selected='true']")).toHaveText(
+      'Not started'
+    );
+  });
+});
+
+/**
+ * The regular expression used to parse the countdown string.
+ * Some examples of valid Countdown strings:
+ * ```
+ * '35D 02:03:04'
+ * '-1D 01:02:03'
+ * '01:02:03'
+ * '-05:06:07'
+ * ```
+ */
+const COUNTDOWN_REGEXP = /(-)?(\d+D\s)?(\d{2}):(\d{2}):(\d{2})/;
+
+/**
+ * @typedef {Object} CountdownOrUpObject
+ * @property {string} sign - The sign of the countdown ('-' if the countdown is negative, '+' otherwise).
+ * @property {string} days - The number of days in the countdown (undefined if there are no days).
+ * @property {string} hours - The number of hours in the countdown.
+ * @property {string} minutes - The number of minutes in the countdown.
+ * @property {string} seconds - The number of seconds in the countdown.
+ * @property {string} toString - The countdown string.
+ */
+
+/**
+ * Object representing the indices of the capture groups in a countdown regex match.
+ *
+ * @typedef {{ SIGN: number, DAYS: number, HOURS: number, MINUTES: number, SECONDS: number, REGEXP: RegExp }}
+ * @property {number} SIGN - The index for the sign capture group (1 if a '-' sign is present, otherwise undefined).
+ * @property {number} DAYS - The index for the days capture group (2 for the number of days, otherwise undefined).
+ * @property {number} HOURS - The index for the hours capture group (3 for the hour part of the time).
+ * @property {number} MINUTES - The index for the minutes capture group (4 for the minute part of the time).
+ * @property {number} SECONDS - The index for the seconds capture group (5 for the second part of the time).
+ */
+const COUNTDOWN = Object.freeze({
+  SIGN: 1,
+  DAYS: 2,
+  HOURS: 3,
+  MINUTES: 4,
+  SECONDS: 5
+});
+
+test.describe('Time List with controlled clock', () => {
+  test.use({
+    clockOptions: {
+      now: getEarliestStartTime(examplePlanSmall3),
+      shouldAdvanceTime: true
+    }
+  });
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+  });
+  test('Time List shows current events and counts down correctly in real-time mode', async ({
+    page
+  }) => {
+    await test.step('Create a Time List, add a Plan to it, and switch to real-time mode', async () => {
+      // Create Time List
+      const timelist = await createDomainObjectWithDefaults(page, {
+        type: 'Time List'
+      });
+
+      // Create a Plan with events that count down and up.
+      // Add it as a child to the Time List.
+      await createPlanFromJSON(page, {
+        json: examplePlanSmall3,
+        parent: timelist.uuid
+      });
+
+      // Navigate to the Time List in real-time mode
+      await page.goto(
+        `${timelist.url}?tc.mode=local&tc.startDelta=900000&tc.endDelta=1800000&tc.timeSystem=utc&view=grid`
+      );
+    });
+
+    const countUpCells = [
+      getCellByIndex(page, 1, TIME_TO_FROM_COLUMN),
+      getCellByIndex(page, 2, TIME_TO_FROM_COLUMN)
+    ];
+    const countdownCells = [
+      getCellByIndex(page, 3, TIME_TO_FROM_COLUMN),
+      getCellByIndex(page, 4, TIME_TO_FROM_COLUMN)
+    ];
+
+    // Verify that the countdown cells are counting down
+    for (let i = 0; i < countdownCells.length; i++) {
+      await test.step(`Countdown cell ${i + 1} counts down`, async () => {
+        const countdownCell = countdownCells[i];
+        // Get the initial countdown timestamp object
+        const beforeCountdown = await getAndAssertCountdownOrUpObject(page, i + 3);
+        // should not have a '-' sign
+        await expect(countdownCell).not.toHaveText('-');
+        // Wait until it changes
+        await expect(countdownCell).not.toHaveText(beforeCountdown.toString());
+        // Get the new countdown timestamp object
+        const afterCountdown = await getAndAssertCountdownOrUpObject(page, i + 3);
+        // Verify that the new countdown timestamp object is less than the old one
+        expect(Number(afterCountdown.seconds)).toBeLessThan(Number(beforeCountdown.seconds));
+      });
+    }
+
+    // Verify that the count-up cells are counting up
+    for (let i = 0; i < countUpCells.length; i++) {
+      await test.step(`Count-up cell ${i + 1} counts up`, async () => {
+        const countUpCell = countUpCells[i];
+        // Get the initial count-up timestamp object
+        const beforeCountUp = await getAndAssertCountdownOrUpObject(page, i + 1);
+        // should not have a '+' sign
+        await expect(countUpCell).not.toHaveText('+');
+        // Wait until it changes
+        await expect(countUpCell).not.toHaveText(beforeCountUp.toString());
+        // Get the new count-up timestamp object
+        const afterCountUp = await getAndAssertCountdownOrUpObject(page, i + 1);
+        // Verify that the new count-up timestamp object is greater than the old one
+        expect(Number(afterCountUp.seconds)).toBeGreaterThan(Number(beforeCountUp.seconds));
+      });
+    }
+  });
+});
+
+/**
+ * Get the cell at the given row and column indices.
+ * @param {import('@playwright/test').Page} page
+ * @param {number} rowIndex
+ * @param {number} columnIndex
+ * @returns {import('@playwright/test').Locator} cell
+ */
+function getCellByIndex(page, rowIndex, columnIndex) {
+  return page.getByRole('cell').nth(rowIndex * NUM_COLUMNS + columnIndex);
+}
+
+/**
+ * Return the innerText of the cell at the given row and column indices.
+ * @param {import('@playwright/test').Page} page
+ * @param {number} rowIndex
+ * @param {number} columnIndex
+ * @returns {Promise<string>} text
+ */
+async function getCellTextByIndex(page, rowIndex, columnIndex) {
+  const text = await getCellByIndex(page, rowIndex, columnIndex).innerText();
+  return text;
+}
+
+/**
+ * Get the text from the countdown (or countup) cell in the given row, assert that it matches the countdown/countup
+ * regex, and return an object representing the countdown.
+ * @param {import('@playwright/test').Page} page
+ * @param {number} rowIndex the row index
+ * @returns {Promise<CountdownOrUpObject>} The countdown (or countup) object
+ */
+async function getAndAssertCountdownOrUpObject(page, rowIndex) {
+  const timeToFrom = await getCellTextByIndex(page, HEADER_ROW + rowIndex, TIME_TO_FROM_COLUMN);
+
+  expect(timeToFrom).toMatch(COUNTDOWN_REGEXP);
+  const match = timeToFrom.match(COUNTDOWN_REGEXP);
+
+  return {
+    sign: match[COUNTDOWN.SIGN],
+    days: match[COUNTDOWN.DAYS],
+    hours: match[COUNTDOWN.HOURS],
+    minutes: match[COUNTDOWN.MINUTES],
+    seconds: match[COUNTDOWN.SECONDS],
+    toString: () => timeToFrom
+  };
+}
diff --git a/e2e/tests/functional/planning/timestrip.e2e.spec.js b/e2e/tests/functional/planning/timestrip.e2e.spec.js
new file mode 100644
index 00000000000..46abb087f9b
--- /dev/null
+++ b/e2e/tests/functional/planning/timestrip.e2e.spec.js
@@ -0,0 +1,173 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import {
+  createDomainObjectWithDefaults,
+  createPlanFromJSON,
+  setIndependentTimeConductorBounds
+} from '../../../appActions.js';
+import { expect, test } from '../../../pluginFixtures.js';
+
+const testPlan = {
+  TEST_GROUP: [
+    {
+      name: 'Past event 1',
+      start: 1660320408000,
+      end: 1660343797000,
+      type: 'TEST-GROUP',
+      color: 'orange',
+      textColor: 'white'
+    },
+    {
+      name: 'Past event 2',
+      start: 1660406808000,
+      end: 1660429160000,
+      type: 'TEST-GROUP',
+      color: 'orange',
+      textColor: 'white'
+    },
+    {
+      name: 'Past event 3',
+      start: 1660493208000,
+      end: 1660503981000,
+      type: 'TEST-GROUP',
+      color: 'orange',
+      textColor: 'white'
+    },
+    {
+      name: 'Past event 4',
+      start: 1660579608000,
+      end: 1660624108000,
+      type: 'TEST-GROUP',
+      color: 'orange',
+      textColor: 'white'
+    },
+    {
+      name: 'Past event 5',
+      start: 1660666008000,
+      end: 1660681529000,
+      type: 'TEST-GROUP',
+      color: 'orange',
+      textColor: 'white'
+    }
+  ]
+};
+
+test.describe('Time Strip', () => {
+  test('Create two Time Strips, add a single Plan to both, and verify they can have separate Independent Time Contexts @unstable', async ({
+    page
+  }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/5627'
+    });
+
+    // Constant locators
+    const activityBounds = page.locator('.activity-bounds');
+
+    // Goto baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    const timestrip = await test.step('Create a Time Strip', async () => {
+      const createdTimeStrip = await createDomainObjectWithDefaults(page, { type: 'Time Strip' });
+      const objectName = await page.locator('.l-browse-bar__object-name').innerText();
+      expect(objectName).toBe(createdTimeStrip.name);
+
+      return createdTimeStrip;
+    });
+
+    const plan = await test.step('Create a Plan and add it to the timestrip', async () => {
+      const createdPlan = await createPlanFromJSON(page, {
+        name: 'Test Plan',
+        json: testPlan
+      });
+
+      await page.goto(timestrip.url);
+      // Expand the tree to show the plan
+      await page.click("button[title='Show selected item in tree']");
+      await page.dragAndDrop(`role=treeitem[name=/${createdPlan.name}/]`, '.c-object-view');
+      await page.click("button[title='Save']");
+      await page.click("li[title='Save and Finish Editing']");
+      const startBound = testPlan.TEST_GROUP[0].start;
+      const endBound = testPlan.TEST_GROUP[testPlan.TEST_GROUP.length - 1].end;
+
+      // Switch to fixed time mode with all plan events within the bounds
+      await page.goto(
+        `${timestrip.url}?tc.mode=fixed&tc.startBound=${startBound}&tc.endBound=${endBound}&tc.timeSystem=utc&view=time-strip.view`
+      );
+
+      // Verify all events are displayed
+      const eventCount = await page.locator('.activity-bounds').count();
+      expect(eventCount).toEqual(testPlan.TEST_GROUP.length);
+
+      return createdPlan;
+    });
+
+    await test.step('TimeStrip can use the Independent Time Conductor', async () => {
+      expect(await activityBounds.count()).toEqual(5);
+
+      // Set the independent time bounds so that only one event is shown
+      const startBound = testPlan.TEST_GROUP[0].start;
+      const endBound = testPlan.TEST_GROUP[0].end;
+      const startBoundString = new Date(startBound).toISOString().replace('T', ' ');
+      const endBoundString = new Date(endBound).toISOString().replace('T', ' ');
+
+      await setIndependentTimeConductorBounds(page, startBoundString, endBoundString);
+      expect(await activityBounds.count()).toEqual(1);
+    });
+
+    await test.step('Can have multiple TimeStrips with the same plan linked and different Independent Time Contexts', async () => {
+      // Create another Time Strip and verify that it has been created
+      const createdTimeStrip = await createDomainObjectWithDefaults(page, {
+        type: 'Time Strip',
+        name: 'Another Time Strip'
+      });
+
+      const objectName = await page.locator('.l-browse-bar__object-name').innerText();
+      expect(objectName).toBe(createdTimeStrip.name);
+
+      // Drag the existing Plan onto the newly created Time Strip, and save.
+      await page.dragAndDrop(`role=treeitem[name=/${plan.name}/]`, '.c-object-view');
+      await page.click("button[title='Save']");
+      await page.click("li[title='Save and Finish Editing']");
+
+      // All events should be displayed at this point because the
+      // initial independent context bounds will match the global bounds
+      expect(await activityBounds.count()).toEqual(5);
+
+      // Set the independent time bounds so that two events are shown
+      const startBound = testPlan.TEST_GROUP[0].start;
+      const endBound = testPlan.TEST_GROUP[1].end;
+      const startBoundString = new Date(startBound).toISOString().replace('T', ' ');
+      const endBoundString = new Date(endBound).toISOString().replace('T', ' ');
+
+      await setIndependentTimeConductorBounds(page, startBoundString, endBoundString);
+
+      // Verify that two events are displayed
+      expect(await activityBounds.count()).toEqual(2);
+
+      // Switch to the previous Time Strip and verify that only one event is displayed
+      await page.goto(timestrip.url);
+      expect(await activityBounds.count()).toEqual(1);
+    });
+  });
+});
diff --git a/e2e/tests/functional/plugins/clocks/clock.e2e.spec.js b/e2e/tests/functional/plugins/clocks/clock.e2e.spec.js
new file mode 100644
index 00000000000..7d43246e825
--- /dev/null
+++ b/e2e/tests/functional/plugins/clocks/clock.e2e.spec.js
@@ -0,0 +1,66 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which verify the basic operations surrounding Clock.
+*/
+
+import { expect, test } from '../../../../baseFixtures.js';
+
+test.describe('Clock Generator CRUD Operations', () => {
+  test('Timezone dropdown will collapse when clicked outside or on dropdown icon again', async ({
+    page
+  }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/4878'
+    });
+    //Go to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    //Click the Create button
+    await page.getByRole('button', { name: 'Create' }).click();
+
+    // Click Clock
+    await page.getByRole('menuitem').first().click();
+
+    // Click .icon-arrow-down
+    await page.locator('.icon-arrow-down').click();
+    //verify if the autocomplete dropdown is visible
+    await expect(page.locator('.c-input--autocomplete__options')).toBeVisible();
+    // Click .icon-arrow-down
+    await page.locator('.icon-arrow-down').click();
+
+    // Verify clicking on the autocomplete arrow collapses the dropdown
+    await expect(page.locator('.c-input--autocomplete__options')).toBeHidden();
+
+    // Click timezone input to open dropdown
+    await page.locator('.c-input--autocomplete__input').click();
+    //verify if the autocomplete dropdown is visible
+    await expect(page.locator('.c-input--autocomplete__options')).toBeVisible();
+
+    // Verify clicking outside the autocomplete dropdown collapses it
+    await page.locator('text=Timezone').click();
+    // Verify clicking on the autocomplete arrow collapses the dropdown
+    await expect(page.locator('.c-input--autocomplete__options')).toBeHidden();
+  });
+});
diff --git a/e2e/tests/functional/plugins/clocks/remoteClock.e2e.spec.js b/e2e/tests/functional/plugins/clocks/remoteClock.e2e.spec.js
new file mode 100644
index 00000000000..7801f6ac0f4
--- /dev/null
+++ b/e2e/tests/functional/plugins/clocks/remoteClock.e2e.spec.js
@@ -0,0 +1,41 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+// FIXME: Remove this eslint exception once tests are implemented
+// eslint-disable-next-line no-unused-vars
+import { expect, test } from '../../../../baseFixtures.js';
+
+test.describe('Remote Clock', () => {
+  // eslint-disable-next-line require-await
+  test.fixme('blocks historical requests until first tick is received', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/5221'
+    });
+    // addInitScript to with remote clock
+    // Switch time conductor mode to 'remote clock'
+    // Navigate to telemetry
+    // Verify that the plot renders historical data within the correct bounds
+    // Refresh the page
+    // Verify again that the plot renders historical data within the correct bounds
+  });
+});
diff --git a/e2e/tests/functional/plugins/conditionSet/conditionSet.e2e.spec.js b/e2e/tests/functional/plugins/conditionSet/conditionSet.e2e.spec.js
new file mode 100644
index 00000000000..a9684daabb3
--- /dev/null
+++ b/e2e/tests/functional/plugins/conditionSet/conditionSet.e2e.spec.js
@@ -0,0 +1,460 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*
+This test suite is dedicated to tests which verify the basic operations surrounding conditionSets. Note: this
+suite is sharing state between tests which is considered an anti-pattern. Implementing in this way to
+demonstrate some playwright for test developers. This pattern should not be re-used in other CRUD suites.
+*/
+
+import { fileURLToPath } from 'url';
+
+import {
+  createDomainObjectWithDefaults,
+  createExampleTelemetryObject
+} from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+let conditionSetUrl;
+
+test.describe.serial('Condition Set CRUD Operations on @localStorage @2p', () => {
+  test.beforeAll(async ({ browser }) => {
+    //TODO: This needs to be refactored
+    const context = await browser.newContext();
+    const page = await context.newPage();
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    await page.getByRole('button', { name: 'Create' }).click();
+
+    await page.locator('li[role="menuitem"]:has-text("Condition Set")').click();
+
+    await Promise.all([page.waitForNavigation(), page.click('button:has-text("OK")')]);
+
+    //Save localStorage for future test execution
+    await context.storageState({
+      path: fileURLToPath(
+        new URL('../../../../test-data/recycled_local_storage.json', import.meta.url)
+      )
+    });
+
+    //Set object identifier from url
+    conditionSetUrl = page.url();
+
+    await page.close();
+  });
+
+  //Load localStorage for subsequent tests
+  test.use({
+    storageState: fileURLToPath(
+      new URL('../../../../test-data/recycled_local_storage.json', import.meta.url)
+    )
+  });
+
+  //Begin suite of tests again localStorage
+  test.fixme(
+    'Condition set object properties persist in main view and inspector @localStorage',
+    async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/nasa/openmct/issues/7421'
+      });
+      //Navigate to baseURL with injected localStorage
+      await page.goto(conditionSetUrl, { waitUntil: 'networkidle' });
+
+      //Assertions on loaded Condition Set in main view. This is a stateful transition step after page.goto()
+      await expect
+        .soft(page.locator('.l-browse-bar__object-name'))
+        .toContainText('Unnamed Condition Set');
+
+      //Assertions on loaded Condition Set in Inspector
+      expect.soft(page.locator('_vue=item.name=Unnamed Condition Set')).toBeTruthy();
+
+      //Reload Page
+      await Promise.all([page.reload(), page.waitForLoadState('networkidle')]);
+
+      //Re-verify after reload
+      await expect
+        .soft(page.locator('.l-browse-bar__object-name'))
+        .toContainText('Unnamed Condition Set');
+      //Assertions on loaded Condition Set in Inspector
+      expect.soft(page.locator('_vue=item.name=Unnamed Condition Set')).toBeTruthy();
+    }
+  );
+  test('condition set object can be modified on @localStorage', async ({ page, openmctConfig }) => {
+    const { myItemsFolderName } = openmctConfig;
+
+    await page.goto(conditionSetUrl, { waitUntil: 'networkidle' });
+
+    //Assertions on loaded Condition Set in main view. This is a stateful transition step after page.goto()
+    await expect
+      .soft(page.locator('.l-browse-bar__object-name'))
+      .toContainText('Unnamed Condition Set');
+
+    //Update the Condition Set properties
+    // Click Edit Button
+    await page.locator('text=Conditions View Snapshot >> button').nth(3).click();
+
+    //Edit Condition Set Name from main view
+    await page
+      .locator('.l-browse-bar__object-name')
+      .filter({ hasText: 'Unnamed Condition Set' })
+      .first()
+      .fill('Renamed Condition Set');
+    await page
+      .locator('.l-browse-bar__object-name')
+      .filter({ hasText: 'Renamed Condition Set' })
+      .first()
+      .press('Enter');
+    // Click Save Button
+    await page
+      .locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button')
+      .nth(1)
+      .click();
+    // Click Save and Finish Editing Option
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    //Verify Main section reflects updated Name Property
+    await expect
+      .soft(page.locator('.l-browse-bar__object-name'))
+      .toContainText('Renamed Condition Set');
+
+    // Verify Inspector properties
+    // Verify Inspector has updated Name property
+    expect.soft(page.locator('text=Renamed Condition Set').nth(1)).toBeTruthy();
+    // Verify Inspector Details has updated Name property
+    expect.soft(page.locator('text=Renamed Condition Set').nth(2)).toBeTruthy();
+
+    // Verify Tree reflects updated Name property
+    // Expand Tree
+    await page.locator(`text=Open MCT ${myItemsFolderName} >> span >> nth=3`).click();
+    // Verify Condition Set Object is renamed in Tree
+    expect(page.locator('a:has-text("Renamed Condition Set")')).toBeTruthy();
+    // Verify Search Tree reflects renamed Name property
+    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Renamed');
+    expect(page.locator('a:has-text("Renamed Condition Set")')).toBeTruthy();
+
+    //Reload Page
+    await Promise.all([page.reload(), page.waitForLoadState('networkidle')]);
+
+    //Verify Main section reflects updated Name Property
+    await expect
+      .soft(page.locator('.l-browse-bar__object-name'))
+      .toContainText('Renamed Condition Set');
+
+    // Verify Inspector properties
+    // Verify Inspector has updated Name property
+    expect.soft(page.locator('text=Renamed Condition Set').nth(1)).toBeTruthy();
+    // Verify Inspector Details has updated Name property
+    expect.soft(page.locator('text=Renamed Condition Set').nth(2)).toBeTruthy();
+
+    // Verify Tree reflects updated Name property
+    // Expand Tree
+    await page.locator(`text=Open MCT ${myItemsFolderName} >> span >> nth=3`).click();
+    // Verify Condition Set Object is renamed in Tree
+    expect(page.locator('a:has-text("Renamed Condition Set")')).toBeTruthy();
+    // Verify Search Tree reflects renamed Name property
+    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Renamed');
+    expect(page.locator('a:has-text("Renamed Condition Set")')).toBeTruthy();
+  });
+  test('condition set object can be deleted by Search Tree Actions menu on @localStorage', async ({
+    page
+  }) => {
+    //Navigate to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    //Assertions on loaded Condition Set in main view. This is a stateful transition step after page.goto()
+    await expect(
+      page.locator('a:has-text("Unnamed Condition Set Condition Set") >> nth=0')
+    ).toBeVisible();
+
+    const numberOfConditionSetsToStart = await page
+      .locator('a:has-text("Unnamed Condition Set Condition Set")')
+      .count();
+
+    // Search for Unnamed Condition Set
+    await page
+      .locator('[aria-label="OpenMCT Search"] input[type="search"]')
+      .fill('Unnamed Condition Set');
+    // Click Search Result
+    await page
+      .locator('[aria-label="OpenMCT Search"] >> text=Unnamed Condition Set')
+      .first()
+      .click();
+    // Click hamburger button
+    await page.locator('[title="More actions"]').click();
+
+    // Click 'Remove' and press OK
+    await page.locator('li[role="menuitem"]:has-text("Remove")').click();
+    await page.locator('button:has-text("OK")').click();
+
+    //Expect Unnamed Condition Set to be removed in Main View
+    const numberOfConditionSetsAtEnd = await page
+      .locator('a:has-text("Unnamed Condition Set Condition Set")')
+      .count();
+
+    expect(numberOfConditionSetsAtEnd).toEqual(numberOfConditionSetsToStart - 1);
+
+    //Feature?
+    //Domain Object is still available by direct URL after delete
+    await page.goto(conditionSetUrl, { waitUntil: 'networkidle' });
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Condition Set');
+  });
+});
+
+test.describe('Basic Condition Set Use', () => {
+  let conditionSet;
+
+  test.beforeEach(async ({ page }) => {
+    // Open a browser, navigate to the main page, and wait until all network events to resolve
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    // Create a new condition set
+    conditionSet = await createDomainObjectWithDefaults(page, {
+      type: 'Condition Set',
+      name: 'Test Condition Set'
+    });
+  });
+  test('Creating a condition defaults the condition name to "Unnamed Condition"', async ({
+    page
+  }) => {
+    await page.goto(conditionSet.url);
+
+    // Change the object to edit mode
+    await page.getByLabel('Edit Object').click();
+
+    // Click Add Condition button
+    await page.locator('#addCondition').click();
+    // Check that the new Unnamed Condition section appears
+    const numOfUnnamedConditions = await page
+      .locator('.c-condition__name', { hasText: 'Unnamed Condition' })
+      .count();
+    expect(numOfUnnamedConditions).toEqual(1);
+  });
+  test('ConditionSet should display appropriate view options', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/5924'
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Alpha Sine Wave Generator'
+    });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Beta Sine Wave Generator'
+    });
+
+    await page.goto(conditionSet.url);
+
+    // Change the object to edit mode
+    await page.getByLabel('Edit Object').click();
+
+    // Expand the 'My Items' folder in the left tree
+    page.click('button[title="Show selected item in tree"]');
+    // Add the Alpha & Beta Sine Wave Generator to the Condition Set and save changes
+    const treePane = page.getByRole('tree', {
+      name: 'Main Tree'
+    });
+    const alphaGeneratorTreeItem = treePane.getByRole('treeitem', {
+      name: 'Alpha Sine Wave Generator'
+    });
+    const betaGeneratorTreeItem = treePane.getByRole('treeitem', {
+      name: 'Beta Sine Wave Generator'
+    });
+    const conditionCollection = page.locator('#conditionCollection');
+
+    await alphaGeneratorTreeItem.dragTo(conditionCollection);
+    await betaGeneratorTreeItem.dragTo(conditionCollection);
+
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    await page.click('button[title="Change the current view"]');
+
+    await expect(page.getByRole('menuitem', { name: /Lad Table/ })).toBeHidden();
+    await expect(page.getByRole('menuitem', { name: /Conditions View/ })).toBeVisible();
+    await expect(page.getByRole('menuitem', { name: /Plot/ })).toBeVisible();
+    await expect(page.getByRole('menuitem', { name: /Telemetry Table/ })).toBeVisible();
+  });
+  test('ConditionSet has correct outputs when telemetry is and is not available', async ({
+    page
+  }) => {
+    const exampleTelemetry = await createExampleTelemetryObject(page);
+
+    await page.getByLabel('Show selected item in tree').click();
+    await page.goto(conditionSet.url);
+    // Change the object to edit mode
+    await page.getByLabel('Edit Object').click();
+
+    // Create two conditions
+    await page.locator('#addCondition').click();
+    await page.locator('#addCondition').click();
+    await page.locator('#conditionCollection').getByRole('textbox').nth(0).fill('First Condition');
+    await page.locator('#conditionCollection').getByRole('textbox').nth(1).fill('Second Condition');
+
+    // Add Telemetry to ConditionSet
+    const sineWaveGeneratorTreeItem = page
+      .getByRole('tree', {
+        name: 'Main Tree'
+      })
+      .getByRole('treeitem', {
+        name: exampleTelemetry.name
+      });
+    const conditionCollection = page.locator('#conditionCollection');
+    await sineWaveGeneratorTreeItem.dragTo(conditionCollection);
+
+    // Modify First Criterion
+    const firstCriterionTelemetry = page.locator(
+      '[aria-label="Criterion Telemetry Selection"] >> nth=0'
+    );
+    firstCriterionTelemetry.selectOption({ label: exampleTelemetry.name });
+    const firstCriterionMetadata = page.locator(
+      '[aria-label="Criterion Metadata Selection"] >> nth=0'
+    );
+    firstCriterionMetadata.selectOption({ label: 'Sine' });
+    const firstCriterionComparison = page.locator(
+      '[aria-label="Criterion Comparison Selection"] >> nth=0'
+    );
+    firstCriterionComparison.selectOption({ label: 'is greater than or equal to' });
+    const firstCriterionInput = page.locator('[aria-label="Criterion Input"] >> nth=0');
+    await firstCriterionInput.fill('0');
+
+    // Modify First Criterion
+    const secondCriterionTelemetry = page.locator(
+      '[aria-label="Criterion Telemetry Selection"] >> nth=1'
+    );
+    secondCriterionTelemetry.selectOption({ label: exampleTelemetry.name });
+
+    const secondCriterionMetadata = page.locator(
+      '[aria-label="Criterion Metadata Selection"] >> nth=1'
+    );
+    secondCriterionMetadata.selectOption({ label: 'Sine' });
+
+    const secondCriterionComparison = page.locator(
+      '[aria-label="Criterion Comparison Selection"] >> nth=1'
+    );
+    secondCriterionComparison.selectOption({ label: 'is less than' });
+
+    const secondCriterionInput = page.locator('[aria-label="Criterion Input"] >> nth=1');
+    await secondCriterionInput.fill('0');
+
+    // Save ConditionSet
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Validate that the condition set is evaluating and outputting
+    // the correct value when the underlying telemetry subscription is active.
+    let outputValue = page.locator('[aria-label="Current Output Value"]');
+    await expect(outputValue).toHaveText('false');
+
+    await page.goto(exampleTelemetry.url);
+
+    // Edit SWG to add 8 second loading delay to simulate the case
+    // where telemetry is not available.
+    await page.getByTitle('More actions').click();
+    await page.getByRole('menuitem', { name: 'Edit Properties...' }).click();
+    await page.getByRole('spinbutton', { name: 'Loading Delay (ms)' }).fill('8000');
+    await page.getByLabel('Save').click();
+
+    // Expect that the output value is blank or '---' if the
+    // underlying telemetry subscription is not active.
+    await page.goto(conditionSet.url);
+    await expect(outputValue).toHaveText('---');
+  });
+
+  test('ConditionSet has correct outputs when test data is enabled', async ({ page }) => {
+    const exampleTelemetry = await createExampleTelemetryObject(page);
+
+    await page.getByLabel('Show selected item in tree').click();
+    await page.goto(conditionSet.url);
+    // Change the object to edit mode
+    await page.getByLabel('Edit Object').click();
+
+    // Create two conditions
+    await page.locator('#addCondition').click();
+    await page.locator('#addCondition').click();
+    await page.locator('#conditionCollection').getByRole('textbox').nth(0).fill('First Condition');
+    await page.locator('#conditionCollection').getByRole('textbox').nth(1).fill('Second Condition');
+
+    // Add Telemetry to ConditionSet
+    const sineWaveGeneratorTreeItem = page
+      .getByRole('tree', {
+        name: 'Main Tree'
+      })
+      .getByRole('treeitem', {
+        name: exampleTelemetry.name
+      });
+    const conditionCollection = page.locator('#conditionCollection');
+    await sineWaveGeneratorTreeItem.dragTo(conditionCollection);
+
+    // Modify First Criterion
+    const firstCriterionTelemetry = page.locator(
+      '[aria-label="Criterion Telemetry Selection"] >> nth=0'
+    );
+    firstCriterionTelemetry.selectOption({ label: exampleTelemetry.name });
+    const firstCriterionMetadata = page.locator(
+      '[aria-label="Criterion Metadata Selection"] >> nth=0'
+    );
+    firstCriterionMetadata.selectOption({ label: 'Sine' });
+    const firstCriterionComparison = page.locator(
+      '[aria-label="Criterion Comparison Selection"] >> nth=0'
+    );
+    firstCriterionComparison.selectOption({ label: 'is greater than or equal to' });
+    const firstCriterionInput = page.locator('[aria-label="Criterion Input"] >> nth=0');
+    await firstCriterionInput.fill('0');
+
+    // Modify Second Criterion
+    const secondCriterionTelemetry = page.locator(
+      '[aria-label="Criterion Telemetry Selection"] >> nth=1'
+    );
+    await secondCriterionTelemetry.selectOption({ label: exampleTelemetry.name });
+
+    const secondCriterionMetadata = page.locator(
+      '[aria-label="Criterion Metadata Selection"] >> nth=1'
+    );
+    await secondCriterionMetadata.selectOption({ label: 'Sine' });
+
+    const secondCriterionComparison = page.locator(
+      '[aria-label="Criterion Comparison Selection"] >> nth=1'
+    );
+    await secondCriterionComparison.selectOption({ label: 'is less than' });
+
+    const secondCriterionInput = page.locator('[aria-label="Criterion Input"] >> nth=1');
+    await secondCriterionInput.fill('0');
+
+    // Enable test data
+    await page.getByLabel('Apply Test Data').nth(1).click();
+    const testDataTelemetry = page.locator('[aria-label="Test Data Telemetry Selection"] >> nth=0');
+    await testDataTelemetry.selectOption({ label: exampleTelemetry.name });
+
+    const testDataMetadata = page.locator('[aria-label="Test Data Metadata Selection"] >> nth=0');
+    await testDataMetadata.selectOption({ label: 'Sine' });
+
+    const testInput = page.locator('[aria-label="Test Data Input"] >> nth=0');
+    await testInput.fill('0');
+
+    // Validate that the condition set is evaluating and outputting
+    // the correct value when the underlying telemetry subscription is active.
+    let outputValue = page.locator('[aria-label="Current Output Value"]');
+    await expect(outputValue).toHaveText('false');
+
+    await page.goto(exampleTelemetry.url);
+  });
+});
diff --git a/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js b/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js
new file mode 100644
index 00000000000..f06b29b509b
--- /dev/null
+++ b/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js
@@ -0,0 +1,511 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import { fileURLToPath } from 'url';
+
+import {
+  createDomainObjectWithDefaults,
+  setFixedTimeMode,
+  setIndependentTimeConductorBounds,
+  setRealTimeMode,
+  setStartOffset
+} from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+const LOCALSTORAGE_PATH = fileURLToPath(
+  new URL('../../../../test-data/display_layout_with_child_layouts.json', import.meta.url)
+);
+const TINY_IMAGE_BASE64 =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII';
+
+test.describe('Display Layout Toolbar Actions @localStorage', () => {
+  const PARENT_DISPLAY_LAYOUT_NAME = 'Parent Display Layout';
+  const CHILD_DISPLAY_LAYOUT_NAME1 = 'Child Layout 1';
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    await setRealTimeMode(page);
+    await page
+      .locator('a')
+      .filter({ hasText: 'Parent Display Layout Display Layout' })
+      .first()
+      .click();
+    await page.getByLabel('Edit Object').click();
+  });
+  test.use({
+    storageState: LOCALSTORAGE_PATH
+  });
+
+  test('can add/remove Text element to a single layout', async ({ page }) => {
+    const layoutObject = 'Text';
+    await test.step(`Add and remove ${layoutObject} from the parent's layout`, async () => {
+      await addAndRemoveDrawingObjectAndAssert(page, layoutObject, PARENT_DISPLAY_LAYOUT_NAME);
+    });
+    await test.step(`Add and remove ${layoutObject} from the child's layout`, async () => {
+      await addAndRemoveDrawingObjectAndAssert(page, layoutObject, CHILD_DISPLAY_LAYOUT_NAME1);
+    });
+  });
+  test('can add/remove Image to a single layout', async ({ page }) => {
+    const layoutObject = 'Image';
+    await test.step("Add and remove image element from the parent's layout", async () => {
+      expect(await page.getByLabel(`Move ${layoutObject} Frame`).count()).toBe(0);
+      await addLayoutObject(page, PARENT_DISPLAY_LAYOUT_NAME, layoutObject);
+      expect(await page.getByLabel(`Move ${layoutObject} Frame`).count()).toBe(1);
+      await removeLayoutObject(page, layoutObject);
+      expect(await page.getByLabel(`Move ${layoutObject} Frame`).count()).toBe(0);
+    });
+    await test.step("Add and remove image from the child's layout", async () => {
+      await addLayoutObject(page, CHILD_DISPLAY_LAYOUT_NAME1, layoutObject);
+      expect(await page.getByLabel(`Move ${layoutObject} Frame`).count()).toBe(1);
+      await removeLayoutObject(page, layoutObject);
+      expect(await page.getByLabel(`Move ${layoutObject} Frame`).count()).toBe(0);
+    });
+  });
+  test(`can add/remove Box to a single layout`, async ({ page }) => {
+    const layoutObject = 'Box';
+    await test.step(`Add and remove ${layoutObject} from the parent's layout`, async () => {
+      await addAndRemoveDrawingObjectAndAssert(page, layoutObject, PARENT_DISPLAY_LAYOUT_NAME);
+    });
+    await test.step(`Add and remove ${layoutObject} from the child's layout`, async () => {
+      await addAndRemoveDrawingObjectAndAssert(page, layoutObject, CHILD_DISPLAY_LAYOUT_NAME1);
+    });
+  });
+  test(`can add/remove Line to a single layout`, async ({ page }) => {
+    const layoutObject = 'Line';
+    await test.step(`Add and remove ${layoutObject} from the parent's layout`, async () => {
+      await addAndRemoveDrawingObjectAndAssert(page, layoutObject, PARENT_DISPLAY_LAYOUT_NAME);
+    });
+    await test.step(`Add and remove ${layoutObject} from the child's layout`, async () => {
+      await addAndRemoveDrawingObjectAndAssert(page, layoutObject, CHILD_DISPLAY_LAYOUT_NAME1);
+    });
+  });
+  test(`can add/remove Ellipse to a single layout`, async ({ page }) => {
+    const layoutObject = 'Ellipse';
+    await test.step(`Add and remove ${layoutObject} from the parent's layout`, async () => {
+      await addAndRemoveDrawingObjectAndAssert(page, layoutObject, PARENT_DISPLAY_LAYOUT_NAME);
+    });
+    await test.step(`Add and remove ${layoutObject} from the child's layout`, async () => {
+      await addAndRemoveDrawingObjectAndAssert(page, layoutObject, CHILD_DISPLAY_LAYOUT_NAME1);
+    });
+  });
+  test.fixme('Can switch view types of a single SWG in a layout', async ({ page }) => {});
+  test.fixme('Can merge multiple plots in a layout', async ({ page }) => {});
+  test.fixme('Can adjust stack order of a single object in a layout', async ({ page }) => {});
+  test.fixme('Can duplicate a single object in a layout', async ({ page }) => {});
+});
+
+test.describe('Display Layout', () => {
+  /** @type {import('../../../../appActions').CreatedObjectInfo} */
+  let sineWaveObject;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    await setRealTimeMode(page);
+
+    // Create Sine Wave Generator
+    sineWaveObject = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator'
+    });
+  });
+
+  test('alpha-numeric widget telemetry value exactly matches latest telemetry value received in real time', async ({
+    page
+  }) => {
+    // Create a Display Layout
+    await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Test Display Layout'
+    });
+    // Edit Display Layout
+    await page.getByLabel('Edit Object').click();
+
+    // Expand the 'My Items' folder in the left tree
+    await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
+    // Add the Sine Wave Generator to the Display Layout and save changes
+    const treePane = page.getByRole('tree', {
+      name: 'Main Tree'
+    });
+    const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
+      name: new RegExp(sineWaveObject.name)
+    });
+    const layoutGridHolder = page.locator('.l-layout__grid-holder');
+    await sineWaveGeneratorTreeItem.dragTo(layoutGridHolder);
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Subscribe to the Sine Wave Generator data
+    // On getting data, check if the value found in the  Display Layout is the most recent value
+    // from the Sine Wave Generator
+    const getTelemValuePromise = await subscribeToTelemetry(page, sineWaveObject.uuid);
+    const formattedTelemetryValue = getTelemValuePromise;
+    const displayLayoutValuePromise = await page.waitForSelector(
+      `text="${formattedTelemetryValue}"`
+    );
+    const displayLayoutValue = await displayLayoutValuePromise.textContent();
+    const trimmedDisplayValue = displayLayoutValue.trim();
+
+    expect(trimmedDisplayValue).toBe(formattedTelemetryValue);
+
+    // ensure we can right click on the alpha-numeric widget and view historical data
+    await page.getByLabel('Sine', { exact: true }).click({
+      button: 'right'
+    });
+    await page.getByLabel('View Historical Data').click();
+    await expect(page.getByLabel('Plot Container Style Target')).toBeVisible();
+  });
+  test('alpha-numeric widget telemetry value exactly matches latest telemetry value received in fixed time', async ({
+    page
+  }) => {
+    // Create a Display Layout
+    await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Test Display Layout'
+    });
+    // Edit Display Layout
+    await page.getByLabel('Edit Object').click();
+
+    // Expand the 'My Items' folder in the left tree
+    await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
+    // Add the Sine Wave Generator to the Display Layout and save changes
+    const treePane = page.getByRole('tree', {
+      name: 'Main Tree'
+    });
+    const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
+      name: new RegExp(sineWaveObject.name)
+    });
+    const layoutGridHolder = page.locator('.l-layout__grid-holder');
+    await sineWaveGeneratorTreeItem.dragTo(layoutGridHolder);
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Subscribe to the Sine Wave Generator data
+    const getTelemValuePromise = await subscribeToTelemetry(page, sineWaveObject.uuid);
+    // Set an offset of 1 minute and then change the time mode to fixed to set a 1 minute historical window
+    await setStartOffset(page, { mins: '1' });
+    await setFixedTimeMode(page);
+
+    // On getting data, check if the value found in the Display Layout is the most recent value
+    // from the Sine Wave Generator
+    const formattedTelemetryValue = getTelemValuePromise;
+    const displayLayoutValuePromise = await page.waitForSelector(
+      `text="${formattedTelemetryValue}"`
+    );
+    const displayLayoutValue = await displayLayoutValuePromise.textContent();
+    const trimmedDisplayValue = displayLayoutValue.trim();
+
+    expect(trimmedDisplayValue).toBe(formattedTelemetryValue);
+  });
+  test('items in a display layout can be removed with object tree context menu when viewing the display layout', async ({
+    page
+  }) => {
+    // Create a Display Layout
+    await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Test Display Layout'
+    });
+    // Edit Display Layout
+    await page.getByLabel('Edit Object').click();
+
+    // Expand the 'My Items' folder in the left tree
+    await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
+    // Add the Sine Wave Generator to the Display Layout and save changes
+    const treePane = page.getByRole('tree', {
+      name: 'Main Tree'
+    });
+    const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
+      name: new RegExp(sineWaveObject.name)
+    });
+    const layoutGridHolder = page.locator('.l-layout__grid-holder');
+    await sineWaveGeneratorTreeItem.dragTo(layoutGridHolder);
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    expect.soft(await page.locator('.l-layout .l-layout__frame').count()).toEqual(1);
+
+    // Expand the Display Layout so we can remove the sine wave generator
+    await page.locator('.c-tree__item.is-navigated-object .c-disclosure-triangle').click();
+
+    // Bring up context menu and remove
+    await sineWaveGeneratorTreeItem.nth(1).click({ button: 'right' });
+    await page.locator('li[role="menuitem"]:has-text("Remove")').click();
+    await page.locator('button:has-text("OK")').click();
+
+    // delete
+
+    expect(await page.locator('.l-layout .l-layout__frame').count()).toEqual(0);
+  });
+  test('items in a display layout can be removed with object tree context menu when viewing another item', async ({
+    page
+  }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/3117'
+    });
+    // Create a Display Layout
+    const displayLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout'
+    });
+    // Edit Display Layout
+    await page.getByLabel('Edit Object').click();
+
+    // Expand the 'My Items' folder in the left tree
+    await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
+    // Add the Sine Wave Generator to the Display Layout and save changes
+    const treePane = page.getByRole('tree', {
+      name: 'Main Tree'
+    });
+    const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
+      name: new RegExp(sineWaveObject.name)
+    });
+    const layoutGridHolder = page.locator('.l-layout__grid-holder');
+    await sineWaveGeneratorTreeItem.dragTo(layoutGridHolder);
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    expect.soft(await page.locator('.l-layout .l-layout__frame').count()).toEqual(1);
+
+    // Expand the Display Layout so we can remove the sine wave generator
+    await page.locator('.c-tree__item.is-navigated-object .c-disclosure-triangle').click();
+
+    // Go to the original Sine Wave Generator to navigate away from the Display Layout
+    await page.goto(sineWaveObject.url);
+
+    // Bring up context menu and remove
+    await sineWaveGeneratorTreeItem.first().click({ button: 'right' });
+    await page.locator('li[role="menuitem"]:has-text("Remove")').click();
+    await page.locator('button:has-text("OK")').click();
+
+    // navigate back to the display layout to confirm it has been removed
+    await page.goto(displayLayout.url);
+
+    expect(await page.locator('.l-layout .l-layout__frame').count()).toEqual(0);
+  });
+
+  test('independent time works with display layouts and its children', async ({ page }) => {
+    await setFixedTimeMode(page);
+    // Create Example Imagery
+    const exampleImageryObject = await createDomainObjectWithDefaults(page, {
+      type: 'Example Imagery'
+    });
+    // Create a Display Layout
+    await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout'
+    });
+    // Edit Display Layout
+    await page.getByLabel('Edit Object').click();
+
+    // Expand the 'My Items' folder in the left tree
+    await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
+    // Add the Sine Wave Generator to the Display Layout and save changes
+    const treePane = page.getByRole('tree', {
+      name: 'Main Tree'
+    });
+    const exampleImageryTreeItem = treePane.getByRole('treeitem', {
+      name: new RegExp(exampleImageryObject.name)
+    });
+    let layoutGridHolder = page.locator('.l-layout__grid-holder');
+    await exampleImageryTreeItem.dragTo(layoutGridHolder);
+
+    //adjust so that we can see the independent time conductor toggle
+    // Adjust object height
+    await page.locator('div[title="Resize object height"] > input').click();
+    await page.locator('div[title="Resize object height"] > input').fill('70');
+
+    // Adjust object width
+    await page.locator('div[title="Resize object width"] > input').click();
+    await page.locator('div[title="Resize object width"] > input').fill('70');
+
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    const startDate = '2021-12-30 01:01:00.000Z';
+    const endDate = '2021-12-30 01:11:00.000Z';
+    await setIndependentTimeConductorBounds(page, startDate, endDate);
+
+    // check image date
+    await expect(page.getByText('2021-12-30 01:11:00.000Z').first()).toBeVisible();
+
+    // flip it off
+    await page.getByRole('switch').click();
+    // timestamp shouldn't be in the past anymore
+    await expect(page.getByText('2021-12-30 01:11:00.000Z')).toBeHidden();
+  });
+
+  test('When multiple plots are contained in a layout, we only ask for annotations once @couchdb', async ({
+    page
+  }) => {
+    await setFixedTimeMode(page);
+    // Create another Sine Wave Generator
+    const anotherSineWaveObject = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      customParameters: {
+        '[aria-label="Data Rate (hz)"]': '0.01'
+      }
+    });
+    // Create a Display Layout
+    await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Test Display Layout'
+    });
+    // Edit Display Layout
+    await page.getByLabel('Edit Object').click();
+
+    // Expand the 'My Items' folder in the left tree
+    await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
+    // Add the Sine Wave Generator to the Display Layout and save changes
+    const treePane = page.getByRole('tree', {
+      name: 'Main Tree'
+    });
+    const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
+      name: new RegExp(sineWaveObject.name)
+    });
+
+    let layoutGridHolder = page.locator('.l-layout__grid-holder');
+    // eslint-disable-next-line playwright/no-force-option
+    await sineWaveGeneratorTreeItem.dragTo(layoutGridHolder, { force: true });
+
+    await page.getByText('View type').click();
+    await page.getByText('Overlay Plot').click();
+
+    const anotherSineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
+      name: new RegExp(anotherSineWaveObject.name)
+    });
+    layoutGridHolder = page.locator('.l-layout__grid-holder');
+    // eslint-disable-next-line playwright/no-force-option
+    await anotherSineWaveGeneratorTreeItem.dragTo(layoutGridHolder, { force: true });
+
+    await page.getByText('View type').click();
+    await page.getByText('Overlay Plot').click();
+
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Time to inspect some network traffic
+    let networkRequests = [];
+    page.on('request', (request) => {
+      const searchRequest =
+        request.url().endsWith('_find') || request.url().includes('by_keystring');
+      const fetchRequest = request.resourceType() === 'fetch';
+      if (searchRequest && fetchRequest) {
+        networkRequests.push(request);
+      }
+    });
+
+    await page.reload();
+
+    // wait for annotations requests to be batched and requested
+    await page.waitForLoadState('networkidle');
+    // Network requests for the composite telemetry with multiple items should be:
+    // 1.  a single batched request for annotations
+    expect(networkRequests.length).toBe(1);
+
+    await setRealTimeMode(page);
+
+    networkRequests = [];
+
+    await page.reload();
+
+    // wait for annotations to not load (if we have any, we've got a problem)
+    await page.waitForLoadState('networkidle');
+
+    // In real time mode, we don't fetch annotations at all
+    expect(networkRequests.length).toBe(0);
+  });
+});
+
+async function addAndRemoveDrawingObjectAndAssert(page, layoutObject, DISPLAY_LAYOUT_NAME) {
+  expect(await page.getByLabel(layoutObject, { exact: true }).count()).toBe(0);
+  await addLayoutObject(page, DISPLAY_LAYOUT_NAME, layoutObject);
+  expect(
+    await page
+      .getByLabel(layoutObject, {
+        exact: true
+      })
+      .count()
+  ).toBe(1);
+  await removeLayoutObject(page, layoutObject);
+  expect(await page.getByLabel(layoutObject, { exact: true }).count()).toBe(0);
+}
+
+/**
+ * Remove the first matching layout object from the layout
+ * @param {import('@playwright/test').Page} page
+ * @param {'Box' | 'Ellipse' | 'Line' | 'Text' | 'Image'} layoutObject
+ */
+async function removeLayoutObject(page, layoutObject) {
+  await page
+    .getByLabel(`Move ${layoutObject} Frame`, { exact: true })
+    .or(page.getByLabel(layoutObject, { exact: true }))
+    .first()
+    // eslint-disable-next-line playwright/no-force-option
+    .click({ force: true });
+  await page.getByTitle('Delete the selected object').click();
+  await page.getByRole('button', { name: 'OK', exact: true }).click();
+}
+
+/**
+ * Add a layout object to the specified layout
+ * @param {import('@playwright/test').Page} page
+ * @param {string} layoutName
+ * @param {'Box' | 'Ellipse' | 'Line' | 'Text' | 'Image'} layoutObject
+ */
+async function addLayoutObject(page, layoutName, layoutObject) {
+  await page.getByLabel(`${layoutName} Layout`, { exact: true }).click();
+  await page.getByText('Add Drawing Object').click();
+  await page
+    .getByRole('menuitem', {
+      name: layoutObject
+    })
+    .click();
+  if (layoutObject === 'Text') {
+    await page.getByRole('textbox', { name: 'Text' }).fill('Hello, Universe!');
+    await page.getByText('OK').click();
+  } else if (layoutObject === 'Image') {
+    await page.getByLabel('Image URL').fill(TINY_IMAGE_BASE64);
+    await page.getByText('OK').click();
+  }
+}
+
+/**
+ * Util for subscribing to a telemetry object by object identifier
+ * Limitations: Currently only works to return telemetry once to the node scope
+ * To Do: See if there's a way to await this multiple times to allow for multiple
+ * values to be returned over time
+ * @param {import('@playwright/test').Page} page
+ * @param {string} objectIdentifier identifier for object
+ * @returns {Promise<string>} the formatted sin telemetry value
+ */
+async function subscribeToTelemetry(page, objectIdentifier) {
+  const getTelemValuePromise = new Promise((resolve) =>
+    page.exposeFunction('getTelemValue', resolve)
+  );
+
+  await page.evaluate(async (telemetryIdentifier) => {
+    const telemetryObject = await window.openmct.objects.get(telemetryIdentifier);
+    const metadata = window.openmct.telemetry.getMetadata(telemetryObject);
+    const formats = await window.openmct.telemetry.getFormatMap(metadata);
+    window.openmct.telemetry.subscribe(telemetryObject, (obj) => {
+      const sinVal = obj.sin;
+      const formattedSinVal = formats.sin.format(sinVal);
+      window.getTelemValue(formattedSinVal);
+    });
+  }, objectIdentifier);
+
+  return getTelemValuePromise;
+}
diff --git a/e2e/tests/functional/plugins/faultManagement/faultManagement.e2e.spec.js b/e2e/tests/functional/plugins/faultManagement/faultManagement.e2e.spec.js
new file mode 100644
index 00000000000..08090c0ff37
--- /dev/null
+++ b/e2e/tests/functional/plugins/faultManagement/faultManagement.e2e.spec.js
@@ -0,0 +1,254 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import * as utils from '../../../../helper/faultUtils.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('The Fault Management Plugin using example faults', () => {
+  test.beforeEach(async ({ page }) => {
+    await utils.navigateToFaultManagementWithExample(page);
+  });
+
+  test('Shows a criticality icon for every fault @unstable', async ({ page }) => {
+    const faultCount = await page.locator('c-fault-mgmt__list').count();
+    const criticalityIconCount = await page.locator('c-fault-mgmt__list-severity').count();
+
+    expect.soft(faultCount).toEqual(criticalityIconCount);
+  });
+
+  test('When selecting a fault, it has an "is-selected" class and it\'s information shows in the inspector @unstable', async ({
+    page
+  }) => {
+    await utils.selectFaultItem(page, 1);
+
+    await page.getByRole('tab', { name: 'Config' }).click();
+    const selectedFaultName = await page
+      .locator('.c-fault-mgmt__list.is-selected .c-fault-mgmt__list-faultname')
+      .textContent();
+    const inspectorFaultNameCount = await page
+      .locator(`.c-inspector__properties >> :text("${selectedFaultName}")`)
+      .count();
+
+    await expect
+      .soft(page.locator('.c-faults-list-view-item-body > .c-fault-mgmt__list').first())
+      .toHaveClass(/is-selected/);
+    expect.soft(inspectorFaultNameCount).toEqual(1);
+  });
+
+  test('When selecting multiple faults, no specific fault information is shown in the inspector @unstable', async ({
+    page
+  }) => {
+    await utils.selectFaultItem(page, 1);
+    await utils.selectFaultItem(page, 2);
+
+    const selectedRows = page.locator(
+      '.c-fault-mgmt__list.is-selected .c-fault-mgmt__list-faultname'
+    );
+    expect.soft(await selectedRows.count()).toEqual(2);
+
+    await page.getByRole('tab', { name: 'Config' }).click();
+    const firstSelectedFaultName = await selectedRows.nth(0).textContent();
+    const secondSelectedFaultName = await selectedRows.nth(1).textContent();
+    const firstNameInInspectorCount = await page
+      .locator(`.c-inspector__properties >> :text("${firstSelectedFaultName}")`)
+      .count();
+    const secondNameInInspectorCount = await page
+      .locator(`.c-inspector__properties >> :text("${secondSelectedFaultName}")`)
+      .count();
+
+    expect.soft(firstNameInInspectorCount).toEqual(0);
+    expect.soft(secondNameInInspectorCount).toEqual(0);
+  });
+
+  test('Allows you to shelve a fault @unstable', async ({ page }) => {
+    const shelvedFaultName = await utils.getFaultName(page, 2);
+    const beforeShelvedFault = utils.getFaultByName(page, shelvedFaultName);
+
+    expect.soft(await beforeShelvedFault.count()).toBe(1);
+
+    await utils.shelveFault(page, 2);
+
+    // check it is removed from standard view
+    const afterShelvedFault = utils.getFaultByName(page, shelvedFaultName);
+    expect.soft(await afterShelvedFault.count()).toBe(0);
+
+    await utils.changeViewTo(page, 'shelved');
+
+    const shelvedViewFault = utils.getFaultByName(page, shelvedFaultName);
+
+    expect.soft(await shelvedViewFault.count()).toBe(1);
+  });
+
+  test('Allows you to acknowledge a fault @unstable', async ({ page }) => {
+    const acknowledgedFaultName = await utils.getFaultName(page, 3);
+
+    await utils.acknowledgeFault(page, 3);
+
+    const fault = utils.getFault(page, 3);
+    await expect.soft(fault).toHaveClass(/is-acknowledged/);
+
+    await utils.changeViewTo(page, 'acknowledged');
+
+    const acknowledgedViewFaultName = await utils.getFaultName(page, 1);
+    expect.soft(acknowledgedFaultName).toEqual(acknowledgedViewFaultName);
+  });
+
+  test('Allows you to shelve multiple faults @unstable', async ({ page }) => {
+    const shelvedFaultNameOne = await utils.getFaultName(page, 1);
+    const shelvedFaultNameFour = await utils.getFaultName(page, 4);
+
+    const beforeShelvedFaultOne = utils.getFaultByName(page, shelvedFaultNameOne);
+    const beforeShelvedFaultFour = utils.getFaultByName(page, shelvedFaultNameFour);
+
+    expect.soft(await beforeShelvedFaultOne.count()).toBe(1);
+    expect.soft(await beforeShelvedFaultFour.count()).toBe(1);
+
+    await utils.shelveMultipleFaults(page, 1, 4);
+
+    // check it is removed from standard view
+    const afterShelvedFaultOne = utils.getFaultByName(page, shelvedFaultNameOne);
+    const afterShelvedFaultFour = utils.getFaultByName(page, shelvedFaultNameFour);
+    expect.soft(await afterShelvedFaultOne.count()).toBe(0);
+    expect.soft(await afterShelvedFaultFour.count()).toBe(0);
+
+    await utils.changeViewTo(page, 'shelved');
+
+    const shelvedViewFaultOne = utils.getFaultByName(page, shelvedFaultNameOne);
+    const shelvedViewFaultFour = utils.getFaultByName(page, shelvedFaultNameFour);
+
+    expect.soft(await shelvedViewFaultOne.count()).toBe(1);
+    expect.soft(await shelvedViewFaultFour.count()).toBe(1);
+  });
+
+  test('Allows you to acknowledge multiple faults @unstable', async ({ page }) => {
+    const acknowledgedFaultNameTwo = await utils.getFaultName(page, 2);
+    const acknowledgedFaultNameFive = await utils.getFaultName(page, 5);
+
+    await utils.acknowledgeMultipleFaults(page, 2, 5);
+
+    const faultTwo = utils.getFault(page, 2);
+    const faultFive = utils.getFault(page, 5);
+
+    // check they have been acknowledged
+    await expect.soft(faultTwo).toHaveClass(/is-acknowledged/);
+    await expect.soft(faultFive).toHaveClass(/is-acknowledged/);
+
+    await utils.changeViewTo(page, 'acknowledged');
+
+    const acknowledgedViewFaultTwo = utils.getFaultByName(page, acknowledgedFaultNameTwo);
+    const acknowledgedViewFaultFive = utils.getFaultByName(page, acknowledgedFaultNameFive);
+
+    expect.soft(await acknowledgedViewFaultTwo.count()).toBe(1);
+    expect.soft(await acknowledgedViewFaultFive.count()).toBe(1);
+  });
+
+  test('Allows you to search faults @unstable', async ({ page }) => {
+    const faultThreeNamespace = await utils.getFaultNamespace(page, 3);
+    const faultTwoName = await utils.getFaultName(page, 2);
+    const faultFiveTriggerTime = await utils.getFaultTriggerTime(page, 5);
+
+    // should be all faults (5)
+    let faultResultCount = await utils.getFaultResultCount(page);
+    expect.soft(faultResultCount).toEqual(5);
+
+    // search namespace
+    await utils.enterSearchTerm(page, faultThreeNamespace);
+
+    faultResultCount = await utils.getFaultResultCount(page);
+    expect.soft(faultResultCount).toEqual(1);
+    expect.soft(await utils.getFaultNamespace(page, 1)).toEqual(faultThreeNamespace);
+
+    // all faults
+    await utils.clearSearch(page);
+    faultResultCount = await utils.getFaultResultCount(page);
+    expect.soft(faultResultCount).toEqual(5);
+
+    // search name
+    await utils.enterSearchTerm(page, faultTwoName);
+
+    faultResultCount = await utils.getFaultResultCount(page);
+    expect.soft(faultResultCount).toEqual(1);
+    expect.soft(await utils.getFaultName(page, 1)).toEqual(faultTwoName);
+
+    // all faults
+    await utils.clearSearch(page);
+    faultResultCount = await utils.getFaultResultCount(page);
+    expect.soft(faultResultCount).toEqual(5);
+
+    // search triggerTime
+    await utils.enterSearchTerm(page, faultFiveTriggerTime);
+
+    faultResultCount = await utils.getFaultResultCount(page);
+    expect.soft(faultResultCount).toEqual(1);
+    expect.soft(await utils.getFaultTriggerTime(page, 1)).toEqual(faultFiveTriggerTime);
+  });
+
+  test('Allows you to sort faults @unstable', async ({ page }) => {
+    const highestSeverity = await utils.getHighestSeverity(page);
+    const lowestSeverity = await utils.getLowestSeverity(page);
+    const faultOneName = 'Example Fault 1';
+    const faultFiveName = 'Example Fault 5';
+    let firstFaultName = await utils.getFaultName(page, 1);
+
+    expect.soft(firstFaultName).toEqual(faultOneName);
+
+    await utils.sortFaultsBy(page, 'oldest-first');
+
+    firstFaultName = await utils.getFaultName(page, 1);
+    expect.soft(firstFaultName).toEqual(faultFiveName);
+
+    await utils.sortFaultsBy(page, 'severity');
+
+    const sortedHighestSeverity = await utils.getFaultSeverity(page, 1);
+    const sortedLowestSeverity = await utils.getFaultSeverity(page, 5);
+    expect.soft(sortedHighestSeverity).toEqual(highestSeverity);
+    expect.soft(sortedLowestSeverity).toEqual(lowestSeverity);
+  });
+});
+
+test.describe('The Fault Management Plugin without using example faults', () => {
+  test.beforeEach(async ({ page }) => {
+    await utils.navigateToFaultManagementWithoutExample(page);
+  });
+
+  test('Shows no faults when no faults are provided @unstable', async ({ page }) => {
+    const faultCount = await page.locator('c-fault-mgmt__list').count();
+
+    expect.soft(faultCount).toEqual(0);
+
+    await utils.changeViewTo(page, 'acknowledged');
+    const acknowledgedCount = await page.locator('c-fault-mgmt__list').count();
+    expect.soft(acknowledgedCount).toEqual(0);
+
+    await utils.changeViewTo(page, 'shelved');
+    const shelvedCount = await page.locator('c-fault-mgmt__list').count();
+    expect.soft(shelvedCount).toEqual(0);
+  });
+
+  test('Will return no faults when searching @unstable', async ({ page }) => {
+    await utils.enterSearchTerm(page, 'fault');
+
+    const faultCount = await page.locator('c-fault-mgmt__list').count();
+
+    expect.soft(faultCount).toEqual(0);
+  });
+});
diff --git a/e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js b/e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js
new file mode 100644
index 00000000000..e25283d8d6a
--- /dev/null
+++ b/e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js
@@ -0,0 +1,318 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { fileURLToPath } from 'url';
+
+import {
+  createDomainObjectWithDefaults,
+  setIndependentTimeConductorBounds
+} from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+const LOCALSTORAGE_PATH = fileURLToPath(
+  new URL('../../../../test-data/flexible_layout_with_child_layouts.json', import.meta.url)
+);
+
+test.describe('Flexible Layout', () => {
+  let sineWaveObject;
+  let clockObject;
+  let treePane;
+  let sineWaveGeneratorTreeItem;
+  let clockTreeItem;
+  let flexibleLayout;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create Sine Wave Generator
+    sineWaveObject = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator'
+    });
+
+    // Create Clock Object
+    clockObject = await createDomainObjectWithDefaults(page, {
+      type: 'Clock'
+    });
+
+    // Create a Flexible Layout
+    flexibleLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Flexible Layout'
+    });
+
+    // Define the Sine Wave Generator and Clock tree items
+    treePane = page.getByRole('tree', {
+      name: 'Main Tree'
+    });
+    sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
+      name: new RegExp(sineWaveObject.name)
+    });
+    clockTreeItem = treePane.getByRole('treeitem', {
+      name: new RegExp(clockObject.name)
+    });
+  });
+  test('panes have the appropriate draggable attribute while in Edit and Browse modes', async ({
+    page
+  }) => {
+    await page.goto(flexibleLayout.url);
+    // Edit Flexible Layout
+    await page.getByLabel('Edit Object').click();
+
+    // Expand the 'My Items' folder in the left tree
+    await page.locator('.c-tree__item__view-control.c-disclosure-triangle').first().click();
+    // Add the Sine Wave Generator and Clock to the Flexible Layout
+    await sineWaveGeneratorTreeItem.dragTo(page.locator('.c-fl__container.is-empty').first());
+    await clockTreeItem.dragTo(page.locator('.c-fl__container.is-empty'));
+    // Check that panes can be dragged while Flexible Layout is in Edit mode
+    let dragWrapper = page
+      .locator('.c-fl-container__frames-holder .c-fl-frame__drag-wrapper')
+      .first();
+    await expect(dragWrapper).toHaveAttribute('draggable', 'true');
+    // Save Flexible Layout
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+    // Check that panes are not draggable while Flexible Layout is in Browse mode
+    dragWrapper = page.locator('.c-fl-container__frames-holder .c-fl-frame__drag-wrapper').first();
+    await expect(dragWrapper).toHaveAttribute('draggable', 'false');
+  });
+  test('changing toolbar settings in edit mode is immediately reflected and persists upon save', async ({
+    page
+  }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/6942'
+    });
+
+    await page.goto(flexibleLayout.url);
+
+    // Expand the 'My Items' folder in the left tree
+    await page.locator('.c-tree__item__view-control.c-disclosure-triangle').first().click();
+    // Add the Sine Wave Generator and Clock to the Flexible Layout
+    await sineWaveGeneratorTreeItem.dragTo(page.locator('.c-fl__container.is-empty').first());
+    await clockTreeItem.dragTo(page.locator('.c-fl__container.is-empty'));
+
+    // Click on the first frame to select it
+    await page.locator('.c-fl-container__frame').first().click();
+    await expect(page.locator('.c-fl-container__frame > .c-frame').first()).toHaveAttribute(
+      's-selected',
+      ''
+    );
+
+    // Assert the toolbar is visible
+    await expect(page.locator('.c-toolbar')).toBeInViewport();
+
+    // Assert the layout is in columns orientation
+    expect(await page.locator('.c-fl--rows').count()).toEqual(0);
+
+    // Change the layout to rows orientation
+    await page.getByTitle('Columns layout').click();
+
+    // Assert the layout is in rows orientation
+    expect(await page.locator('.c-fl--rows').count()).toBeGreaterThan(0);
+
+    // Assert the frame of the first item is visible
+    await expect(page.locator('.c-so-view').first()).not.toHaveClass(/c-so-view--no-frame/);
+
+    // Hide the frame of the first item
+    await page.getByTitle('Frame visible').click();
+
+    // Assert the frame is hidden
+    await expect(page.locator('.c-so-view').first()).toHaveClass(/c-so-view--no-frame/);
+
+    // Assert there are 2 containers
+    expect(await page.locator('.c-fl-container').count()).toEqual(2);
+
+    // Add a container
+    await page.getByTitle('Add Container').click();
+
+    // Assert there are 3 containers
+    expect(await page.locator('.c-fl-container').count()).toEqual(3);
+
+    // Save Flexible Layout
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Nav away and back
+    await page.goto(sineWaveObject.url);
+    await page.goto(flexibleLayout.url);
+
+    // Wait for the first frame to be visible so we know the layout has loaded
+    await expect(page.locator('.c-fl-container').nth(0)).toBeInViewport();
+
+    // Assert the settings have persisted
+    expect(await page.locator('.c-fl-container').count()).toEqual(3);
+    expect(await page.locator('.c-fl--rows').count()).toBeGreaterThan(0);
+    await expect(page.locator('.c-so-view').first()).toHaveClass(/c-so-view--no-frame/);
+  });
+  test('items in a flexible layout can be removed with object tree context menu when viewing the flexible layout', async ({
+    page
+  }) => {
+    await page.goto(flexibleLayout.url);
+    // Edit Flexible Layout
+    await page.getByLabel('Edit Object').click();
+
+    // Expand the 'My Items' folder in the left tree
+    await page.locator('.c-tree__item__view-control.c-disclosure-triangle').first().click();
+    // Add the Sine Wave Generator to the Flexible Layout and save changes
+    await sineWaveGeneratorTreeItem.dragTo(page.locator('.c-fl__container.is-empty').first());
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    expect.soft(await page.locator('.c-fl-container__frame').count()).toEqual(1);
+
+    // Expand the Flexible Layout so we can remove the sine wave generator
+    await page.locator('.c-tree__item.is-navigated-object .c-disclosure-triangle').click();
+
+    // Bring up context menu and remove
+    await sineWaveGeneratorTreeItem.first().click({ button: 'right' });
+    await page.locator('li[role="menuitem"]:has-text("Remove")').click();
+    await page.locator('button:has-text("OK")').click();
+
+    // Verify that the item has been removed from the layout
+    expect(await page.locator('.c-fl-container__frame').count()).toEqual(0);
+  });
+  test('items in a flexible layout can be removed with object tree context menu when viewing another item', async ({
+    page
+  }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/3117'
+    });
+    await page.goto(flexibleLayout.url);
+    // Edit Flexible Layout
+    await page.getByLabel('Edit Object').click();
+
+    // Expand the 'My Items' folder in the left tree
+    await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
+    // Add the Sine Wave Generator to the Flexible Layout and save changes
+    await sineWaveGeneratorTreeItem.dragTo(page.locator('.c-fl__container.is-empty').first());
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    expect.soft(await page.locator('.c-fl-container__frame').count()).toEqual(1);
+
+    // Expand the Flexible Layout so we can remove the sine wave generator
+    await page.locator('.c-tree__item.is-navigated-object .c-disclosure-triangle').click();
+
+    // Go to the original Sine Wave Generator to navigate away from the Flexible Layout
+    await page.goto(sineWaveObject.url);
+
+    // Bring up context menu and remove
+    await sineWaveGeneratorTreeItem.first().click({ button: 'right' });
+    await page.locator('li[role="menuitem"]:has-text("Remove")').click();
+    await page.locator('button:has-text("OK")').click();
+
+    // navigate back to the display layout to confirm it has been removed
+    await page.goto(flexibleLayout.url);
+
+    // Verify that the item has been removed from the layout
+    expect(await page.locator('.c-fl-container__frame').count()).toEqual(0);
+  });
+
+  test('independent time works with flexible layouts and its children', async ({ page }) => {
+    // Create Example Imagery
+    const exampleImageryObject = await createDomainObjectWithDefaults(page, {
+      type: 'Example Imagery'
+    });
+
+    await page.goto(flexibleLayout.url);
+    // Edit Flexible Layout
+    await page.getByLabel('Edit Object').click();
+
+    // Expand the 'My Items' folder in the left tree
+    await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
+    const exampleImageryTreeItem = treePane.getByRole('treeitem', {
+      name: new RegExp(exampleImageryObject.name)
+    });
+    // Add the Sine Wave Generator to the Flexible Layout and save changes
+    await exampleImageryTreeItem.dragTo(page.locator('.c-fl__container.is-empty').first());
+
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // flip on independent time conductor
+    await setIndependentTimeConductorBounds(
+      page,
+      '2021-12-30 01:01:00.000Z',
+      '2021-12-30 01:11:00.000Z'
+    );
+
+    // check image date
+    await expect(page.getByText('2021-12-30 01:11:00.000Z').first()).toBeVisible();
+
+    // flip it off
+    await page.getByRole('switch').click();
+    // timestamp shouldn't be in the past anymore
+    await expect(page.getByText('2021-12-30 01:11:00.000Z')).toBeHidden();
+  });
+});
+
+test.describe('Flexible Layout Toolbar Actions @localStorage', () => {
+  test.use({
+    storageState: LOCALSTORAGE_PATH
+  });
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    await page
+      .locator('a')
+      .filter({ hasText: 'Parent Flexible Layout Flexible Layout' })
+      .first()
+      .click();
+    await page.getByLabel('Edit Object').click();
+  });
+  test('Add/Remove Container', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7234'
+    });
+
+    const containerHandles = page.getByRole('columnheader', { name: 'Handle' });
+    expect(await containerHandles.count()).toEqual(2);
+    await page.getByRole('columnheader', { name: 'Container Handle 1' }).click();
+    await page.getByTitle('Add Container').click();
+    expect(await containerHandles.count()).toEqual(3);
+    await page.getByTitle('Remove Container').click();
+    await expect(page.getByRole('dialog', { name: 'Overlay' })).toHaveText(
+      'This action will permanently delete this container from this Flexible Layout. Do you want to continue?'
+    );
+    await page.getByRole('button', { name: 'OK', exact: true }).click();
+    expect(await containerHandles.count()).toEqual(2);
+  });
+  test('Remove Frame', async ({ page }) => {
+    expect(await page.getByRole('group', { name: 'Frame' }).count()).toEqual(2);
+    await page.getByRole('group', { name: 'Child Layout 1' }).click();
+    await page.getByTitle('Remove Frame').click();
+    await expect(page.getByRole('dialog', { name: 'Overlay' })).toHaveText(
+      'This action will remove this frame from this Flexible Layout. Do you want to continue?'
+    );
+    await page.getByRole('button', { name: 'OK', exact: true }).click();
+    expect(await page.getByRole('group', { name: 'Frame' }).count()).toEqual(1);
+  });
+  test('Columns/Rows Layout Toggle', async ({ page }) => {
+    await page.getByRole('columnheader', { name: 'Container Handle 1' }).click();
+    const flexRows = page.getByLabel('Flexible Layout Row');
+    expect(await flexRows.count()).toEqual(0);
+    await page.getByTitle('Columns layout').click();
+    expect(await flexRows.count()).toEqual(1);
+    await page.getByTitle('Rows layout').click();
+    expect(await flexRows.count()).toEqual(0);
+  });
+});
diff --git a/e2e/tests/functional/plugins/gauge/gauge.e2e.spec.js b/e2e/tests/functional/plugins/gauge/gauge.e2e.spec.js
new file mode 100644
index 00000000000..46a65ce5792
--- /dev/null
+++ b/e2e/tests/functional/plugins/gauge/gauge.e2e.spec.js
@@ -0,0 +1,188 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+ * This test suite is dedicated to testing the Gauge component.
+ */
+
+import { v4 as uuid } from 'uuid';
+
+import {
+  createDomainObjectWithDefaults,
+  createExampleTelemetryObject
+} from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Gauge', () => {
+  test.beforeEach(async ({ page }) => {
+    // Open a browser, navigate to the main page, and wait until all networkevents to resolve
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+  });
+
+  test('Can add and remove telemetry sources @unstable', async ({ page }) => {
+    // Create the gauge with defaults
+    const gauge = await createDomainObjectWithDefaults(page, { type: 'Gauge' });
+
+    // Create a sine wave generator within the gauge
+    const swg1 = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: `swg-${uuid()}`,
+      parent: gauge.uuid
+    });
+
+    // Navigate to the gauge and verify that
+    // the SWG appears in the elements pool
+    await page.goto(gauge.url);
+    await page.getByLabel('Edit Object').click();
+    await expect.soft(page.locator(`#inspector-elements-tree >> text=${swg1.name}`)).toBeVisible();
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Create another sine wave generator within the gauge
+    const swg2 = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: `swg-${uuid()}`,
+      parent: gauge.uuid
+    });
+
+    // Verify that the 'Replace telemetry source' modal appears and accept it
+    await expect
+      .soft(
+        page.locator(
+          'text=This action will replace the current telemetry source. Do you want to continue?'
+        )
+      )
+      .toBeVisible();
+    await page.click('text=Ok');
+
+    // Navigate to the gauge and verify that the new SWG
+    // appears in the elements pool and the old one is gone
+    await page.goto(gauge.url);
+    await page.getByLabel('Edit Object').click();
+    await expect.soft(page.locator(`#inspector-elements-tree >> text=${swg1.name}`)).toBeHidden();
+    await expect.soft(page.locator(`#inspector-elements-tree >> text=${swg2.name}`)).toBeVisible();
+    await page.getByRole('button', { name: 'Save' }).click();
+
+    // Right click on the new SWG in the elements pool and delete it
+    await page.locator(`#inspector-elements-tree >> text=${swg2.name}`).click({
+      button: 'right'
+    });
+    await page.locator('li[title="Remove this object from its containing object."]').click();
+
+    // Verify that the 'Remove object' confirmation modal appears and accept it
+    await expect
+      .soft(
+        page.locator(
+          'text=Warning! This action will remove this object. Are you sure you want to continue?'
+        )
+      )
+      .toBeVisible();
+    await page.click('text=Ok');
+
+    // Verify that the elements pool shows no elements
+    await expect(page.locator('text="No contained elements"')).toBeVisible();
+  });
+  test('Can create a non-default Gauge', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/5356'
+    });
+    //Click the Create button
+    await page.getByRole('button', { name: 'Create' }).click();
+
+    // Click the object specified by 'type'
+    await page.click(`li[role='menuitem']:text("Gauge")`);
+    // FIXME: We need better selectors for these custom form controls
+    const displayCurrentValueSwitch = page.locator('.c-toggle-switch__slider >> nth=0');
+    await displayCurrentValueSwitch.setChecked(false);
+    await page.click('button[aria-label="Save"]');
+
+    // TODO: Verify changes in the UI
+  });
+  test('Can edit a single Gauge-specific property', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/5985'
+    });
+
+    // Create the gauge with defaults
+    await createDomainObjectWithDefaults(page, { type: 'Gauge' });
+    await page.click('button[title="More actions"]');
+    await page.click('li[role="menuitem"]:has-text("Edit Properties")');
+    // FIXME: We need better selectors for these custom form controls
+    const displayCurrentValueSwitch = page.locator('.c-toggle-switch__slider >> nth=0');
+    await displayCurrentValueSwitch.setChecked(false);
+    await page.click('button[aria-label="Save"]');
+
+    // TODO: Verify changes in the UI
+  });
+
+  test.fixme('Gauge does not display NaN when data not available', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7421'
+    });
+    // Create a Gauge
+    const gauge = await createDomainObjectWithDefaults(page, {
+      type: 'Gauge'
+    });
+
+    // Create a Sine Wave Generator in the Gauge with a loading delay
+    const swgWith5sDelay = await createExampleTelemetryObject(page, gauge.uuid);
+
+    await page.goto(swgWith5sDelay.url);
+    await page.getByTitle('More actions').click();
+    await page.getByRole('menuitem', { name: /Edit Properties.../ }).click();
+
+    //Edit Example Telemetry Object to include 5s loading Delay
+    await page.locator('[aria-label="Loading Delay \\(ms\\)"]').fill('5000');
+
+    await page.getByRole('button', { name: 'Save' }).click();
+
+    // Wait until the URL is updated
+    await page.waitForURL(`**/${gauge.uuid}/*`);
+
+    // Nav to the Gauge
+    await page.goto(gauge.url);
+    const gaugeNoDataText = await page.locator('.js-dial-current-value tspan').textContent();
+    expect(gaugeNoDataText).toBe('--');
+  });
+
+  test('Gauge enforces composition policy', async ({ page }) => {
+    // Create a Gauge
+    await createDomainObjectWithDefaults(page, {
+      type: 'Gauge',
+      name: 'Unnamed Gauge'
+    });
+
+    // Try to create a Folder into the Gauge. Should be disallowed.
+    await page.getByRole('button', { name: /Create/ }).click();
+    await page.getByRole('menuitem', { name: /Folder/ }).click();
+    await expect(page.locator('[aria-label="Save"]')).toBeDisabled();
+    await page.getByLabel('Cancel').click();
+
+    // Try to create a Display Layout into the Gauge. Should be disallowed.
+    await page.getByRole('button', { name: /Create/ }).click();
+    await page.getByRole('menuitem', { name: /Display Layout/ }).click();
+    await expect(page.locator('[aria-label="Save"]')).toBeDisabled();
+  });
+});
diff --git a/e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js b/e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js
new file mode 100644
index 00000000000..19b3ff526bf
--- /dev/null
+++ b/e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js
@@ -0,0 +1,1031 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which verify the basic operations surrounding imagery,
+but only assume that example imagery is present.
+*/
+/* globals process */
+import { createDomainObjectWithDefaults, setRealTimeMode } from '../../../../appActions.js';
+import { waitForAnimations } from '../../../../baseFixtures.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+const backgroundImageSelector = '.c-imagery__main-image__background-image';
+const panHotkey = process.platform === 'linux' ? ['Shift', 'Alt'] : ['Alt'];
+const tagHotkey = ['Shift', 'Alt'];
+const expectedAltText = process.platform === 'linux' ? 'Shift+Alt drag to pan' : 'Alt drag to pan';
+const thumbnailUrlParamsRegexp = /\?w=100&h=100/;
+
+//The following block of tests verifies the basic functionality of example imagery and serves as a template for Imagery objects embedded in other objects.
+test.describe('Example Imagery Object', () => {
+  test.beforeEach(async ({ page }) => {
+    //Go to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create a default 'Example Imagery' object
+    const exampleImagery = await createDomainObjectWithDefaults(page, { type: 'Example Imagery' });
+
+    // Verify that the created object is focused
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText(exampleImagery.name);
+    await page.locator('.c-imagery__main-image__bg').hover({ trial: true });
+    await page.locator(backgroundImageSelector).waitFor();
+  });
+
+  test('Can use Mouse Wheel to zoom in and out of latest image', async ({ page }) => {
+    // Zoom in x2 and assert
+    await mouseZoomOnImageAndAssert(page, 2);
+
+    // Zoom out x2 and assert
+    await mouseZoomOnImageAndAssert(page, -2);
+  });
+
+  test('Compass HUD should be hidden by default', async ({ page }) => {
+    await expect(page.locator('.c-hud')).toBeHidden();
+  });
+
+  test('Can right click on image and open it in a new tab @2p', async ({ page, context }) => {
+    // try to right click on image
+    const backgroundImage = await page.locator(backgroundImageSelector);
+    await backgroundImage.click({
+      button: 'right',
+      // eslint-disable-next-line playwright/no-force-option
+      force: true
+    });
+    // expect context menu to appear
+    await expect(page.getByText('Save Image As')).toBeVisible();
+    await expect(page.getByText('Open Image in New Tab')).toBeVisible();
+
+    // click on open image in new tab
+    const pagePromise = context.waitForEvent('page');
+    await page.getByText('Open Image in New Tab').click();
+    // expect new tab to be in browser
+    const newPage = await pagePromise;
+    await newPage.waitForLoadState();
+    // expect new tab url to have jpg in it
+    await expect(newPage.url()).toContain('.jpg');
+  });
+
+  // this requires CORS to be enabled in some fashion
+  test.fixme('Can right click on image and save it as a file', async ({ page }) => {});
+
+  test('Can adjust image brightness/contrast by dragging the sliders', async ({
+    page,
+    browserName
+  }) => {
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(browserName === 'firefox', 'This test needs to be updated to work with firefox');
+    // Open the image filter menu
+    await page.locator('[role=toolbar] button[title="Brightness and contrast"]').click();
+
+    // Drag the brightness and contrast sliders around and assert filter values
+    await dragBrightnessSliderAndAssertFilterValues(page);
+    await dragContrastSliderAndAssertFilterValues(page);
+  });
+
+  test('Can use independent time conductor to change time', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/6821'
+    });
+    // Test independent fixed time with global fixed time
+    // flip on independent time conductor
+    await page.getByRole('switch', { name: 'Enable Independent Time Conductor' }).click();
+
+    // Adding in delay to address flakiness of ITC test-- button event handlers not registering in time
+    await expect(page.locator('#independentTCToggle')).toBeChecked();
+    await expect(page.locator('.c-compact-tc').first()).toBeVisible();
+
+    await page.getByRole('button', { name: 'Independent Time Conductor Settings' }).click();
+
+    await page.getByRole('textbox', { name: 'Start date' }).fill('2021-12-30');
+    await page.keyboard.press('Tab');
+    await page.getByRole('textbox', { name: 'Start time' }).fill('01:01:00');
+    await page.keyboard.press('Tab');
+    await page.getByRole('textbox', { name: 'End date' }).fill('2021-12-30');
+    await page.keyboard.press('Tab');
+    await page.getByRole('textbox', { name: 'End time' }).fill('01:11:00');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Enter');
+
+    // check image date
+    await expect(page.getByText('2021-12-30 01:01:00.000Z').first()).toBeVisible();
+
+    // flip it off
+    await page.getByRole('switch', { name: 'Disable Independent Time Conductor' }).click();
+    // timestamp shouldn't be in the past anymore
+    await expect(page.getByText('2021-12-30 01:11:00.000Z')).toBeHidden();
+
+    // Test independent fixed time with global realtime
+    await setRealTimeMode(page);
+    await expect(
+      page.getByRole('switch', { name: 'Enable Independent Time Conductor' })
+    ).toBeEnabled();
+    await page.getByRole('switch', { name: 'Enable Independent Time Conductor' }).click();
+    // check image date to be in the past
+    await expect(page.getByText('2021-12-30 01:01:00.000Z').first()).toBeVisible();
+    // flip it off
+    await page.getByRole('switch', { name: 'Disable Independent Time Conductor' }).click();
+    // timestamp shouldn't be in the past anymore
+    await expect(page.getByText('2021-12-30 01:11:00.000Z')).toBeHidden();
+
+    // Test independent realtime with global realtime
+    await page.getByRole('switch', { name: 'Enable Independent Time Conductor' }).click();
+    // check image date
+    await expect(page.getByText('2021-12-30 01:11:00.000Z').first()).toBeVisible();
+    // change independent time to realtime
+    await page.getByRole('button', { name: 'Independent Time Conductor Settings' }).click();
+    await page.getByRole('button', { name: 'Independent Time Conductor Mode Menu' }).click();
+    await page.getByRole('menuitem', { name: /Real-Time/ }).click();
+    // timestamp shouldn't be in the past anymore
+    await expect(page.getByText('2021-12-30 01:11:00.000Z')).toBeHidden();
+    // back to the past
+    await page.getByRole('button', { name: 'Independent Time Conductor Mode Menu' }).click();
+    await page.getByRole('menuitem', { name: /Real-Time/ }).click();
+    await page.getByRole('button', { name: 'Independent Time Conductor Mode Menu' }).click();
+    await page.getByRole('menuitem', { name: /Fixed Timespan/ }).click();
+    // check image date to be in the past
+    await expect(page.getByText('2021-12-30 01:11:00.000Z').first()).toBeVisible();
+  });
+
+  test('Can use alt+drag to move around image once zoomed in', async ({ page }) => {
+    const deltaYStep = 100; //equivalent to 1x zoom
+
+    await page.locator('.c-imagery__main-image__bg').hover({ trial: true });
+
+    // zoom in
+    await page.mouse.wheel(0, deltaYStep * 2);
+    await page.locator('.c-imagery__main-image__bg').hover({ trial: true });
+    const zoomedBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
+    const imageCenterX = zoomedBoundingBox.x + zoomedBoundingBox.width / 2;
+    const imageCenterY = zoomedBoundingBox.y + zoomedBoundingBox.height / 2;
+    // move to the right
+
+    // center the mouse pointer
+    await page.mouse.move(imageCenterX, imageCenterY);
+
+    //Get Diagnostic info about process environment
+    console.log('process.platform is ' + process.platform);
+    const getUA = await page.evaluate(() => navigator.userAgent);
+    console.log('navigator.userAgent ' + getUA);
+    // Pan Imagery Hints
+    const imageryHintsText = await page.locator('.c-imagery__hints').innerText();
+    expect(expectedAltText).toEqual(imageryHintsText);
+
+    // pan right
+    await Promise.all(panHotkey.map((x) => page.keyboard.down(x)));
+    await page.mouse.down();
+    await page.mouse.move(imageCenterX - 200, imageCenterY, 10);
+    await page.mouse.up();
+    await Promise.all(panHotkey.map((x) => page.keyboard.up(x)));
+    const afterRightPanBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
+    expect(zoomedBoundingBox.x).toBeGreaterThan(afterRightPanBoundingBox.x);
+
+    // pan left
+    await Promise.all(panHotkey.map((x) => page.keyboard.down(x)));
+    await page.mouse.down();
+    await page.mouse.move(imageCenterX, imageCenterY, 10);
+    await page.mouse.up();
+    await Promise.all(panHotkey.map((x) => page.keyboard.up(x)));
+    const afterLeftPanBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
+    expect(afterRightPanBoundingBox.x).toBeLessThan(afterLeftPanBoundingBox.x);
+
+    // pan up
+    await page.mouse.move(imageCenterX, imageCenterY);
+    await Promise.all(panHotkey.map((x) => page.keyboard.down(x)));
+    await page.mouse.down();
+    await page.mouse.move(imageCenterX, imageCenterY + 200, 10);
+    await page.mouse.up();
+    await Promise.all(panHotkey.map((x) => page.keyboard.up(x)));
+    const afterUpPanBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
+    expect(afterUpPanBoundingBox.y).toBeGreaterThan(afterLeftPanBoundingBox.y);
+
+    // pan down
+    await Promise.all(panHotkey.map((x) => page.keyboard.down(x)));
+    await page.mouse.down();
+    await page.mouse.move(imageCenterX, imageCenterY - 200, 10);
+    await page.mouse.up();
+    await Promise.all(panHotkey.map((x) => page.keyboard.up(x)));
+    const afterDownPanBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
+    expect(afterDownPanBoundingBox.y).toBeLessThan(afterUpPanBoundingBox.y);
+  });
+
+  test('Can use alt+shift+drag to create a tag and ensure toolbars disappear', async ({ page }) => {
+    const canvas = page.locator('canvas');
+    await canvas.hover({ trial: true });
+
+    const canvasBoundingBox = await canvas.boundingBox();
+    const canvasCenterX = canvasBoundingBox.x + canvasBoundingBox.width / 2;
+    const canvasCenterY = canvasBoundingBox.y + canvasBoundingBox.height / 2;
+    await Promise.all(tagHotkey.map((x) => page.keyboard.down(x)));
+    await page.mouse.down();
+    // steps not working for me here
+    await page.mouse.move(canvasCenterX - 20, canvasCenterY - 20);
+    await page.mouse.move(canvasCenterX - 100, canvasCenterY - 100);
+    // toolbar should hide when we're creating annotations with a drag
+    await expect(page.locator('[role="toolbar"][aria-label="Image controls"]')).toBeHidden();
+    await page.mouse.up();
+    // toolbar should reappear when we're done creating annotations
+    await expect(page.locator('[role="toolbar"][aria-label="Image controls"]')).toBeVisible();
+    await Promise.all(tagHotkey.map((x) => page.keyboard.up(x)));
+
+    // Wait for canvas to stabilize.
+    await canvas.hover({ trial: true });
+
+    // add some tags
+    await page.getByText('Annotations').click();
+    await page.getByRole('button', { name: /Add Tag/ }).click();
+    await page.getByPlaceholder('Type to select tag').click();
+    await page.getByText('Driving').click();
+
+    await page.getByRole('button', { name: /Add Tag/ }).click();
+    await page.getByPlaceholder('Type to select tag').click();
+    await page.getByText('Science').click();
+
+    // click on a separate part of the canvas to ensure no tags appear
+    await page.mouse.click(canvasCenterX + 10, canvasCenterY + 10);
+    await expect(page.getByText('Driving')).toBeHidden();
+    await expect(page.getByText('Science')).toBeHidden();
+
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7083'
+    });
+    // click on annotation again and expect tags to appear
+    await page.mouse.click(canvasCenterX - 50, canvasCenterY - 50);
+    await expect(page.getByText('Driving')).toBeVisible();
+    await expect(page.getByText('Science')).toBeVisible();
+
+    // add another tag and expect it to appear without changing selection
+    await page.getByRole('button', { name: /Add Tag/ }).click();
+    await page.getByPlaceholder('Type to select tag').click();
+    await page.getByText('Drilling').click();
+    await expect(page.getByText('Driving')).toBeVisible();
+    await expect(page.getByText('Science')).toBeVisible();
+    await expect(page.getByText('Drilling')).toBeVisible();
+  });
+
+  test('Can use + - buttons to zoom on the image @unstable', async ({ page }) => {
+    await buttonZoomOnImageAndAssert(page);
+  });
+
+  test('Can use the reset button to reset the image @unstable', async ({ page }, testInfo) => {
+    // Get initial image dimensions
+    const initialBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
+
+    // Zoom in twice via button
+    await zoomIntoImageryByButton(page);
+    await zoomIntoImageryByButton(page);
+
+    // Get and assert zoomed in image dimensions
+    const zoomedInBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
+    expect.soft(zoomedInBoundingBox.height).toBeGreaterThan(initialBoundingBox.height);
+    expect.soft(zoomedInBoundingBox.width).toBeGreaterThan(initialBoundingBox.width);
+
+    // Reset pan and zoom and assert against initial image dimensions
+    await resetImageryPanAndZoom(page);
+    const finalBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
+    expect(finalBoundingBox).toEqual(initialBoundingBox);
+  });
+
+  test('Using the zoom features does not pause telemetry', async ({ page }) => {
+    const pausePlayButton = page.locator('.c-button.pause-play');
+
+    // switch to realtime
+    await setRealTimeMode(page);
+
+    await expect.soft(pausePlayButton).not.toHaveClass(/is-paused/);
+
+    // Zoom in via button
+    await zoomIntoImageryByButton(page);
+    await expect(pausePlayButton).not.toHaveClass(/is-paused/);
+  });
+
+  test('Uses low fetch priority', async ({ page }) => {
+    const priority = await page.locator('.js-imageryView-image').getAttribute('fetchpriority');
+    expect(priority).toBe('low');
+  });
+});
+
+test.describe('Example Imagery in Display Layout', () => {
+  let displayLayout;
+  test.beforeEach(async ({ page }) => {
+    // Go to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    displayLayout = await createDomainObjectWithDefaults(page, { type: 'Display Layout' });
+    await page.goto(displayLayout.url);
+
+    await createImageryView(page);
+
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText(
+      'Unnamed Example Imagery'
+    );
+
+    await page.goto(displayLayout.url);
+  });
+
+  test('View Large action pauses imagery when in realtime and returns to realtime', async ({
+    page
+  }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/3647'
+    });
+
+    // set realtime mode
+    await setRealTimeMode(page);
+
+    // pause/play button
+    const pausePlayButton = page.locator('.c-button.pause-play');
+
+    await expect.soft(pausePlayButton).not.toHaveClass(/is-paused/);
+
+    // Open context menu and click view large menu item
+    await page.locator('button[title="View menu items"]').click();
+    await page.locator('li[title="View Large"]').click();
+    await expect(pausePlayButton).toHaveClass(/is-paused/);
+
+    await page.getByRole('button', { name: 'Close' }).click();
+    await expect.soft(pausePlayButton).not.toHaveClass(/is-paused/);
+  });
+
+  test('View Large action leaves keeps realtime mode paused', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/3647'
+    });
+
+    // set realtime mode
+    await setRealTimeMode(page);
+
+    // pause/play button
+    const pausePlayButton = page.locator('.c-button.pause-play');
+    await pausePlayButton.click();
+    await expect.soft(pausePlayButton).toHaveClass(/is-paused/);
+
+    // Open context menu and click view large menu item
+    await page.locator('button[title="View menu items"]').click();
+    await page.locator('li[title="View Large"]').click();
+    await expect(pausePlayButton).toHaveClass(/is-paused/);
+
+    await page.getByRole('button', { name: 'Close' }).click();
+    await expect.soft(pausePlayButton).toHaveClass(/is-paused/);
+  });
+
+  test('Imagery View operations @unstable', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/5265'
+    });
+
+    // Edit mode
+    await page.getByLabel('Edit Object').click();
+
+    // Click on example imagery to expose toolbar
+    await page.locator('.c-so-view__header').click();
+
+    // Adjust object height
+    await page.locator('div[title="Resize object height"] > input').click();
+    await page.locator('div[title="Resize object height"] > input').fill('50');
+
+    // Adjust object width
+    await page.locator('div[title="Resize object width"] > input').click();
+    await page.locator('div[title="Resize object width"] > input').fill('50');
+
+    await performImageryViewOperationsAndAssert(page);
+  });
+
+  test('Resizing the layout changes thumbnail visibility and size', async ({ page }) => {
+    const thumbsWrapperLocator = page.locator('.c-imagery__thumbs-wrapper');
+    // Edit mode
+    await page.getByLabel('Edit Object').click();
+
+    // Click on example imagery to expose toolbar
+    await page.locator('.c-so-view__header').click();
+
+    // expect thumbnails not be visible when first added
+    expect.soft(thumbsWrapperLocator.isHidden()).toBeTruthy();
+
+    // Resize the example imagery vertically to change the thumbnail visibility
+    /*
+        The following arbitrary values are added to observe the separate visual
+        conditions of the thumbnails (hidden, small thumbnails, regular thumbnails).
+        Specifically, height is set to 50px for small thumbs and 100px for regular
+        */
+    await page.locator('div[title="Resize object height"] > input').click();
+    await page.locator('div[title="Resize object height"] > input').fill('50');
+
+    expect(thumbsWrapperLocator.isVisible()).toBeTruthy();
+    await expect(thumbsWrapperLocator).toHaveClass(/is-small-thumbs/);
+
+    // Resize the example imagery vertically to change the thumbnail visibility
+    await page.locator('div[title="Resize object height"] > input').click();
+    await page.locator('div[title="Resize object height"] > input').fill('100');
+
+    await expect(thumbsWrapperLocator).toBeVisible();
+    await expect(thumbsWrapperLocator).not.toHaveClass(/is-small-thumbs/);
+  });
+
+  /**
+   * Toggle layer visibility checkbox by clicking on checkbox label
+   * - should toggle checkbox and layer visibility for that image view
+   * - should NOT toggle checkbox and layer visibility for the first image view in display
+   */
+  test('Toggle layer visibility by clicking on label', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/6709'
+    });
+    await createImageryView(page);
+    await page.goto(displayLayout.url);
+
+    const imageElements = page.locator('.c-imagery__main-image-wrapper');
+
+    await expect(imageElements).toHaveCount(2);
+
+    const imageOne = page.locator('.c-imagery__main-image-wrapper').nth(0);
+    const imageTwo = page.locator('.c-imagery__main-image-wrapper').nth(1);
+    const imageOneWrapper = imageOne.locator('.image-wrapper');
+    const imageTwoWrapper = imageTwo.locator('.image-wrapper');
+
+    await imageTwo.hover();
+
+    await imageTwo.locator('button[title="Layers"]').click();
+
+    const imageTwoLayersMenuContent = imageTwo.locator('button[title="Layers"] + div');
+    const imageTwoLayersToggleLabel = imageTwoLayersMenuContent.locator('label').last();
+
+    await imageTwoLayersToggleLabel.click();
+
+    const imageOneLayers = imageOneWrapper.locator('.layer-image');
+    const imageTwoLayers = imageTwoWrapper.locator('.layer-image');
+
+    await expect(imageOneLayers).toHaveCount(0);
+    await expect(imageTwoLayers).toHaveCount(1);
+  });
+});
+
+test.describe('Example Imagery in Flexible layout', () => {
+  let flexibleLayout;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    flexibleLayout = await createDomainObjectWithDefaults(page, { type: 'Flexible Layout' });
+
+    // Create Example Imagery inside the Flexible Layout
+    await createDomainObjectWithDefaults(page, {
+      type: 'Example Imagery',
+      parent: flexibleLayout.uuid
+    });
+
+    // Navigate back to Flexible Layout
+    await page.goto(flexibleLayout.url);
+  });
+
+  test('Can double-click on the image to view large image', async ({ page }) => {
+    // Double-click on the image to open large view
+    const imageElement = await page.getByRole('button', { name: 'Image Wrapper' });
+    await imageElement.dblclick();
+
+    // Check if the large view is visible
+    await page.getByRole('button', { name: 'Background Image', state: 'visible' });
+
+    // Close the large view
+    await page.getByRole('button', { name: 'Close' }).click();
+  });
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    flexibleLayout = await createDomainObjectWithDefaults(page, { type: 'Flexible Layout' });
+    await page.goto(flexibleLayout.url);
+
+    /* Create Sine Wave Generator with minimum Image Load Delay */
+    // Click the Create button
+    await page.getByRole('button', { name: 'Create' }).click();
+
+    // Click text=Example Imagery
+    await page.click('li[role="menuitem"]:has-text("Example Imagery")');
+
+    // Clear and set Image load delay to minimum value
+    await page.locator('input[type="number"]').fill('');
+    await page.locator('input[type="number"]').fill('5000');
+
+    // Click text=OK
+    await Promise.all([
+      page.waitForNavigation({ waitUntil: 'networkidle' }),
+      page.click('button:has-text("OK")'),
+      //Wait for Save Banner to appear
+      page.waitForSelector('.c-message-banner__message')
+    ]);
+
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText(
+      'Unnamed Example Imagery'
+    );
+
+    await page.goto(flexibleLayout.url);
+  });
+  test('Imagery View operations @unstable', async ({ page, browserName }) => {
+    test.fixme(browserName === 'firefox', 'This test needs to be updated to work with firefox');
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/5326'
+    });
+
+    await performImageryViewOperationsAndAssert(page);
+  });
+});
+
+test.describe('Example Imagery in Tabs View', () => {
+  let tabsView;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    tabsView = await createDomainObjectWithDefaults(page, { type: 'Tabs View' });
+    await page.goto(tabsView.url);
+
+    /* Create Sine Wave Generator with minimum Image Load Delay */
+    // Click the Create button
+    await page.getByRole('button', { name: 'Create' }).click();
+
+    // Click text=Example Imagery
+    await page.click('li[role="menuitem"]:has-text("Example Imagery")');
+
+    // Clear and set Image load delay to minimum value
+    await page.locator('input[type="number"]').fill('');
+    await page.locator('input[type="number"]').fill('5000');
+
+    // Click text=OK
+    await Promise.all([
+      page.waitForNavigation({ waitUntil: 'networkidle' }),
+      page.click('button:has-text("OK")'),
+      //Wait for Save Banner to appear
+      page.waitForSelector('.c-message-banner__message')
+    ]);
+
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText(
+      'Unnamed Example Imagery'
+    );
+
+    await page.goto(tabsView.url);
+  });
+  test('Imagery View operations @unstable', async ({ page }) => {
+    await performImageryViewOperationsAndAssert(page);
+  });
+});
+
+test.describe('Example Imagery in Time Strip', () => {
+  let timeStripObject;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    timeStripObject = await createDomainObjectWithDefaults(page, {
+      type: 'Time Strip'
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Example Imagery',
+      parent: timeStripObject.uuid
+    });
+    // Navigate to timestrip
+    await page.goto(timeStripObject.url);
+  });
+
+  test('Clicking a thumbnail loads the image in large view', async ({ page, browserName }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/5632'
+    });
+
+    // Hover over the timestrip to reveal a thumbnail image
+    await page.locator('.c-imagery-tsv-container').hover();
+
+    // Get the img src of the hovered image thumbnail
+    const hoveredThumbnailImg = page.locator(
+      '.c-imagery-tsv div.c-imagery-tsv__image-wrapper:hover img'
+    );
+    const hoveredThumbnailImgSrc = await hoveredThumbnailImg.getAttribute('src');
+
+    // Verify that imagery timestrip view uses the thumbnailUrl as img src for thumbnails
+    expect(hoveredThumbnailImgSrc).toBeTruthy();
+    expect(hoveredThumbnailImgSrc).toMatch(thumbnailUrlParamsRegexp);
+
+    // Click on the hovered thumbnail to open "View Large" view
+    await page.locator('.c-imagery-tsv-container').click();
+
+    // Get the img src of the large view image
+    const viewLargeImg = page.locator('img.c-imagery__main-image__image');
+    const viewLargeImgSrc = await viewLargeImg.getAttribute('src');
+    expect(viewLargeImgSrc).toBeTruthy();
+
+    // Verify that the image in the large view is the same as the hovered thumbnail
+    expect(viewLargeImgSrc).toEqual(hoveredThumbnailImgSrc.split('?')[0]);
+  });
+});
+
+/**
+ * Perform the common actions and assertions for the Imagery View.
+ * This function verifies the following in order:
+ * 1. Can zoom in/out using the zoom buttons
+ * 2. Can zoom in/out using the mouse wheel
+ * 3. Can pan the image using the pan hotkey + mouse drag
+ * 4. Clicking on the left arrow button pauses imagery and moves to the previous image
+ * 5. Imagery is updated as new images stream in, regardless of pause status
+ * 6. Old images are discarded when new images stream in
+ * 7. Image brightness/contrast can be adjusted by dragging the sliders
+ * @param {import('@playwright/test').Page} page
+ */
+async function performImageryViewOperationsAndAssert(page) {
+  // Verify that imagery thumbnails use a thumbnail url
+  const thumbnailImages = page.locator('.c-thumb__image');
+  const mainImage = page.locator('.c-imagery__main-image__image');
+  await expect(thumbnailImages.first()).toHaveAttribute('src', thumbnailUrlParamsRegexp);
+  await expect(mainImage).not.toHaveAttribute('src', thumbnailUrlParamsRegexp);
+
+  // Click previous image button
+  const previousImageButton = page.locator('.c-nav--prev');
+  await previousImageButton.click();
+
+  // Verify previous image
+  const selectedImage = page.locator('.selected');
+  await expect(selectedImage).toBeVisible();
+
+  // Use the zoom buttons to zoom in and out
+  await buttonZoomOnImageAndAssert(page);
+
+  // Use Mouse Wheel to zoom in to previous image
+  await mouseZoomOnImageAndAssert(page, 2);
+
+  // Use alt+drag to move around image once zoomed in
+  await panZoomAndAssertImageProperties(page);
+
+  // Use Mouse Wheel to zoom out of previous image
+  await mouseZoomOnImageAndAssert(page, -2);
+
+  // Click next image button
+  const nextImageButton = page.locator('.c-nav--next');
+  await nextImageButton.click();
+
+  // set realtime mode
+  await setRealTimeMode(page);
+
+  // Zoom in on next image
+  await mouseZoomOnImageAndAssert(page, 2);
+
+  // Clicking on the left arrow should pause the imagery and go to previous image
+  await previousImageButton.click();
+  await expect(page.locator('.c-button.pause-play')).toHaveClass(/is-paused/);
+  await expect(selectedImage).toBeVisible();
+
+  // The imagery view should be updated when new images come in
+  const imageCount = await page.locator('.c-imagery__thumb').count();
+  await expect
+    .poll(
+      async () => {
+        const newImageCount = await page.locator('.c-imagery__thumb').count();
+
+        return newImageCount;
+      },
+      {
+        message: 'verify that old images are discarded',
+        timeout: 7 * 1000
+      }
+    )
+    .toBe(imageCount);
+
+  // Verify selected image is still displayed
+  await expect(selectedImage).toBeVisible();
+
+  // Unpause imagery
+  await page.locator('.pause-play').click();
+
+  //Get background-image url from background-image css prop
+  await assertBackgroundImageUrlFromBackgroundCss(page);
+
+  // Open the image filter menu
+  await page.locator('[role=toolbar] button[title="Brightness and contrast"]').click();
+
+  // Drag the brightness and contrast sliders around and assert filter values
+  await dragBrightnessSliderAndAssertFilterValues(page);
+  await dragContrastSliderAndAssertFilterValues(page);
+}
+
+/**
+ * Drag the brightness slider to max, min, and midpoint and assert the filter values
+ * @param {import('@playwright/test').Page} page
+ */
+async function dragBrightnessSliderAndAssertFilterValues(page) {
+  const brightnessSlider = 'div.c-image-controls__slider-wrapper.icon-brightness > input';
+  const brightnessBoundingBox = await page.locator(brightnessSlider).boundingBox();
+  const brightnessMidX = brightnessBoundingBox.x + brightnessBoundingBox.width / 2;
+  const brightnessMidY = brightnessBoundingBox.y + brightnessBoundingBox.height / 2;
+
+  await page.locator(brightnessSlider).hover({ trial: true });
+  await page.mouse.down();
+  await page.mouse.move(brightnessBoundingBox.x + brightnessBoundingBox.width, brightnessMidY);
+  await assertBackgroundImageBrightness(page, '500');
+  await page.mouse.move(brightnessBoundingBox.x, brightnessMidY);
+  await assertBackgroundImageBrightness(page, '0');
+  await page.mouse.move(brightnessMidX, brightnessMidY);
+  await assertBackgroundImageBrightness(page, '250');
+  await page.mouse.up();
+}
+
+/**
+ * Drag the contrast slider to max, min, and midpoint and assert the filter values
+ * @param {import('@playwright/test').Page} page
+ */
+async function dragContrastSliderAndAssertFilterValues(page) {
+  const contrastSlider = 'div.c-image-controls__slider-wrapper.icon-contrast > input';
+  const contrastBoundingBox = await page.locator(contrastSlider).boundingBox();
+  const contrastMidX = contrastBoundingBox.x + contrastBoundingBox.width / 2;
+  const contrastMidY = contrastBoundingBox.y + contrastBoundingBox.height / 2;
+
+  await page.locator(contrastSlider).hover({ trial: true });
+  await page.mouse.down();
+  await page.mouse.move(contrastBoundingBox.x + contrastBoundingBox.width, contrastMidY);
+  await assertBackgroundImageContrast(page, '500');
+  await page.mouse.move(contrastBoundingBox.x, contrastMidY);
+  await assertBackgroundImageContrast(page, '0');
+  await page.mouse.move(contrastMidX, contrastMidY);
+  await assertBackgroundImageContrast(page, '250');
+  await page.mouse.up();
+}
+
+/**
+ * Gets the filter:brightness value of the current background-image and
+ * asserts against an expected value
+ * @param {import('@playwright/test').Page} page
+ * @param {String} expected The expected brightness value
+ */
+async function assertBackgroundImageBrightness(page, expected) {
+  const backgroundImage = page.locator('.c-imagery__main-image__background-image');
+
+  // Get the brightness filter value (i.e: filter: brightness(500%) => "500")
+  const actual = await backgroundImage.evaluate((el) => {
+    return el.style.filter.match(/brightness\((\d{1,3})%\)/)[1];
+  });
+  expect(actual).toBe(expected);
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function assertBackgroundImageUrlFromBackgroundCss(page) {
+  const backgroundImage = page.locator('.c-imagery__main-image__background-image');
+  let backgroundImageUrl = await backgroundImage.evaluate((el) => {
+    return window
+      .getComputedStyle(el)
+      .getPropertyValue('background-image')
+      .match(/url\(([^)]+)\)/)[1];
+  });
+  let backgroundImageUrl1 = backgroundImageUrl.slice(1, -1); //forgive me, padre
+  console.log('backgroundImageUrl1 ' + backgroundImageUrl1);
+
+  let backgroundImageUrl2;
+  await expect
+    .poll(
+      async () => {
+        // Verify next image has updated
+        let backgroundImageUrlNext = await backgroundImage.evaluate((el) => {
+          return window
+            .getComputedStyle(el)
+            .getPropertyValue('background-image')
+            .match(/url\(([^)]+)\)/)[1];
+        });
+        backgroundImageUrl2 = backgroundImageUrlNext.slice(1, -1); //forgive me, padre
+
+        return backgroundImageUrl2;
+      },
+      {
+        message: 'verify next image has updated',
+        timeout: 7 * 1000
+      }
+    )
+    .not.toBe(backgroundImageUrl1);
+  console.log('backgroundImageUrl2 ' + backgroundImageUrl2);
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function panZoomAndAssertImageProperties(page) {
+  const imageryHintsText = await page.locator('.c-imagery__hints').innerText();
+  expect(expectedAltText).toEqual(imageryHintsText);
+  const zoomedBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
+  const imageCenterX = zoomedBoundingBox.x + zoomedBoundingBox.width / 2;
+  const imageCenterY = zoomedBoundingBox.y + zoomedBoundingBox.height / 2;
+
+  // Pan right
+  await Promise.all(panHotkey.map((x) => page.keyboard.down(x)));
+  await page.mouse.down();
+  await page.mouse.move(imageCenterX - 200, imageCenterY, 10);
+  await page.mouse.up();
+  await Promise.all(panHotkey.map((x) => page.keyboard.up(x)));
+  const afterRightPanBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
+  expect(zoomedBoundingBox.x).toBeGreaterThan(afterRightPanBoundingBox.x);
+
+  // Pan left
+  await Promise.all(panHotkey.map((x) => page.keyboard.down(x)));
+  await page.mouse.down();
+  await page.mouse.move(imageCenterX, imageCenterY, 10);
+  await page.mouse.up();
+  await Promise.all(panHotkey.map((x) => page.keyboard.up(x)));
+  const afterLeftPanBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
+  expect(afterRightPanBoundingBox.x).toBeLessThan(afterLeftPanBoundingBox.x);
+
+  // Pan up
+  await page.mouse.move(imageCenterX, imageCenterY);
+  await Promise.all(panHotkey.map((x) => page.keyboard.down(x)));
+  await page.mouse.down();
+  await page.mouse.move(imageCenterX, imageCenterY + 200, 10);
+  await page.mouse.up();
+  await Promise.all(panHotkey.map((x) => page.keyboard.up(x)));
+  const afterUpPanBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
+  expect(afterUpPanBoundingBox.y).toBeGreaterThanOrEqual(afterLeftPanBoundingBox.y);
+
+  // Pan down
+  await Promise.all(panHotkey.map((x) => page.keyboard.down(x)));
+  await page.mouse.down();
+  await page.mouse.move(imageCenterX, imageCenterY - 200, 10);
+  await page.mouse.up();
+  await Promise.all(panHotkey.map((x) => page.keyboard.up(x)));
+  const afterDownPanBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
+  expect(afterDownPanBoundingBox.y).toBeLessThanOrEqual(afterUpPanBoundingBox.y);
+}
+
+/**
+ * Use the mouse wheel to zoom in or out of an image and assert that the image
+ * has successfully zoomed in or out.
+ * @param {import('@playwright/test').Page} page
+ * @param {number} [factor = 2] The zoom factor. Positive for zoom in, negative for zoom out.
+ */
+async function mouseZoomOnImageAndAssert(page, factor = 2) {
+  // Zoom in
+  const originalImageDimensions = await page.locator(backgroundImageSelector).boundingBox();
+  const deltaYStep = 100; // equivalent to 1x zoom
+  await page.mouse.wheel(0, deltaYStep * factor);
+  const zoomedBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
+  const imageCenterX = zoomedBoundingBox.x + zoomedBoundingBox.width / 2;
+  const imageCenterY = zoomedBoundingBox.y + zoomedBoundingBox.height / 2;
+
+  // center the mouse pointer
+  await page.mouse.move(imageCenterX, imageCenterY);
+
+  // Wait for zoom animation to finish
+  await page.locator('.c-imagery__main-image__bg').hover({ trial: true });
+  const imageMouseZoomed = await page.locator(backgroundImageSelector).boundingBox();
+
+  if (factor > 0) {
+    expect(imageMouseZoomed.height).toBeGreaterThan(originalImageDimensions.height);
+    expect(imageMouseZoomed.width).toBeGreaterThan(originalImageDimensions.width);
+  } else {
+    expect(imageMouseZoomed.height).toBeLessThan(originalImageDimensions.height);
+    expect(imageMouseZoomed.width).toBeLessThan(originalImageDimensions.width);
+  }
+}
+
+/**
+ * Zoom in and out of the image using the buttons, and assert that the image has
+ * been successfully zoomed in or out.
+ * @param {import('@playwright/test').Page} page
+ */
+async function buttonZoomOnImageAndAssert(page) {
+  // Get initial image dimensions
+  const initialBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
+
+  // Zoom in twice via button
+  await zoomIntoImageryByButton(page);
+  await zoomIntoImageryByButton(page);
+
+  // Get and assert zoomed in image dimensions
+  const zoomedInBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
+  expect(zoomedInBoundingBox.height).toBeGreaterThan(initialBoundingBox.height);
+  expect(zoomedInBoundingBox.width).toBeGreaterThan(initialBoundingBox.width);
+
+  // Zoom out once via button
+  await zoomOutOfImageryByButton(page);
+
+  // Get and assert zoomed out image dimensions
+  const zoomedOutBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
+  expect(zoomedOutBoundingBox.height).toBeLessThan(zoomedInBoundingBox.height);
+  expect(zoomedOutBoundingBox.width).toBeLessThan(zoomedInBoundingBox.width);
+
+  // Zoom out again via button, assert against the initial image dimensions
+  await zoomOutOfImageryByButton(page);
+  const finalBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
+  expect(finalBoundingBox).toEqual(initialBoundingBox);
+}
+
+/**
+ * Gets the filter:contrast value of the current background-image and
+ * asserts against an expected value
+ * @param {import('@playwright/test').Page} page
+ * @param {String} expected The expected contrast value
+ */
+async function assertBackgroundImageContrast(page, expected) {
+  const backgroundImage = page.locator('.c-imagery__main-image__background-image');
+
+  // Get the contrast filter value (i.e: filter: contrast(500%) => "500")
+  const actual = await backgroundImage.evaluate((el) => {
+    return el.style.filter.match(/contrast\((\d{1,3})%\)/)[1];
+  });
+  expect(actual).toBe(expected);
+}
+
+/**
+ * Use the '+' button to zoom in. Hovers first if the toolbar is not visible
+ * and waits for the zoom animation to finish afterwards.
+ * @param {import('@playwright/test').Page} page
+ */
+async function zoomIntoImageryByButton(page) {
+  // FIXME: There should only be one set of imagery buttons, but there are two?
+  const zoomInBtn = page
+    .locator("[role='toolbar'][aria-label='Image controls'] .t-btn-zoom-in")
+    .nth(0);
+  const backgroundImage = page.locator(backgroundImageSelector);
+  if (!(await zoomInBtn.isVisible())) {
+    await backgroundImage.hover({ trial: true });
+  }
+
+  await zoomInBtn.click();
+  await waitForAnimations(backgroundImage);
+}
+
+/**
+ * Use the '-' button to zoom out. Hovers first if the toolbar is not visible
+ * and waits for the zoom animation to finish afterwards.
+ * @param {import('@playwright/test').Page} page
+ */
+async function zoomOutOfImageryByButton(page) {
+  // FIXME: There should only be one set of imagery buttons, but there are two?
+  const zoomOutBtn = page
+    .locator("[role='toolbar'][aria-label='Image controls'] .t-btn-zoom-out")
+    .nth(0);
+  const backgroundImage = page.locator(backgroundImageSelector);
+  if (!(await zoomOutBtn.isVisible())) {
+    await backgroundImage.hover({ trial: true });
+  }
+
+  await zoomOutBtn.click();
+  await waitForAnimations(backgroundImage);
+}
+
+/**
+ * Use the reset button to reset image pan and zoom. Hovers first if the toolbar is not visible
+ * and waits for the zoom animation to finish afterwards.
+ * @param {import('@playwright/test').Page} page
+ */
+async function resetImageryPanAndZoom(page) {
+  // FIXME: There should only be one set of imagery buttons, but there are two?
+  const panZoomResetBtn = page
+    .locator("[role='toolbar'][aria-label='Image controls'] .t-btn-zoom-reset")
+    .nth(0);
+  const backgroundImage = page.locator(backgroundImageSelector);
+  if (!(await panZoomResetBtn.isVisible())) {
+    await backgroundImage.hover({ trial: true });
+  }
+
+  await panZoomResetBtn.click();
+  await waitForAnimations(backgroundImage);
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function createImageryView(page) {
+  // Click the Create button
+  await page.getByRole('button', { name: 'Create' }).click();
+
+  // Click text=Example Imagery
+  await page.click('li[role="menuitem"]:has-text("Example Imagery")');
+
+  // Clear and set Image load delay to minimum value
+  await page.locator('input[type="number"]').fill('');
+  await page.locator('input[type="number"]').fill('5000');
+
+  // Click text=OK
+  await Promise.all([
+    page.waitForNavigation({ waitUntil: 'networkidle' }),
+    page.click('button:has-text("OK")'),
+    //Wait for Save Banner to appear
+    page.waitForSelector('.c-message-banner__message')
+  ]);
+}
diff --git a/e2e/tests/functional/plugins/importAndExportAsJSON/exportAsJson.e2e.spec.js b/e2e/tests/functional/plugins/importAndExportAsJSON/exportAsJson.e2e.spec.js
new file mode 100644
index 00000000000..e8cc3c63442
--- /dev/null
+++ b/e2e/tests/functional/plugins/importAndExportAsJSON/exportAsJson.e2e.spec.js
@@ -0,0 +1,205 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which verify the basic operations surrounding exportAsJSON.
+*/
+
+import fs from 'fs/promises';
+
+import {
+  createDomainObjectWithDefaults,
+  openObjectTreeContextMenu
+} from '../../../../appActions.js';
+import { expect, test } from '../../../../baseFixtures.js';
+import { navigateToFaultManagementWithExample } from '../../../../helper/faultUtils.js';
+
+test.describe('ExportAsJSON', () => {
+  let folder;
+  test.beforeEach(async ({ page }) => {
+    // Go to baseURL
+    await page.goto('./');
+    // Perform actions to create the domain object
+    folder = await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      name: 'e2e folder'
+    });
+  });
+  test('Create a basic object and verify that it can be exported as JSON from Tree', async ({
+    page
+  }) => {
+    // Navigate to the page
+    await page.goto(folder.url);
+
+    // Open context menu and initiate download
+    await openObjectTreeContextMenu(page, folder.url);
+    const [download] = await Promise.all([
+      page.waitForEvent('download'), // Waits for the download event
+      page.getByLabel('Export as JSON').click() // Triggers the download
+    ]);
+
+    // Wait for the download process to complete
+    const path = await download.path();
+
+    // Read the contents of the downloaded file using readFile from fs/promises
+    const fileContents = await fs.readFile(path, 'utf8');
+    const jsonData = JSON.parse(fileContents);
+
+    // Use the function to retrieve the key
+    const key = getFirstKeyFromOpenMctJson(jsonData);
+
+    // Verify the contents of the JSON file
+    expect(jsonData.openmct[key]).toHaveProperty('name', 'e2e folder');
+    expect(jsonData.openmct[key]).toHaveProperty('type', 'folder');
+  });
+  test('Create a basic object and verify that it can be exported as JSON from 3 dot menu', async ({
+    page
+  }) => {
+    // Navigate to the page
+    await page.goto(folder.url);
+    //3 dot menu
+    await page.getByLabel('More actions').click();
+    // Open context menu and initiate download
+    const [download] = await Promise.all([
+      page.waitForEvent('download'), // Waits for the download event
+      page.getByLabel('Export as JSON').click() // Triggers the download
+    ]);
+
+    // Read the contents of the downloaded file using readFile from fs/promises
+    const fileContents = await fs.readFile(await download.path(), 'utf8');
+    const jsonData = JSON.parse(fileContents);
+
+    // Use the function to retrieve the key
+    const key = getFirstKeyFromOpenMctJson(jsonData);
+
+    // Verify the contents of the JSON file
+    expect(jsonData.openmct[key]).toHaveProperty('name', 'e2e folder');
+    expect(jsonData.openmct[key]).toHaveProperty('type', 'folder');
+  });
+  test('Verify that a nested Object can be exported as JSON', async ({ page }) => {
+    const timer = await createDomainObjectWithDefaults(page, {
+      type: 'Timer',
+      name: 'timer',
+      parent: folder.uuid
+    });
+    // Navigate to the page
+    await page.goto(timer.url);
+
+    //do this against parent folder.url, NOT timer.url child
+    await openObjectTreeContextMenu(page, folder.url);
+    // Open context menu and initiate download
+    const [download] = await Promise.all([
+      page.waitForEvent('download'), // Waits for the download event
+      page.getByLabel('Export as JSON').click() // Triggers the download
+    ]);
+
+    // Read the contents of the downloaded file
+    const fileContents = await fs.readFile(await download.path(), 'utf8');
+    const jsonData = JSON.parse(fileContents);
+
+    // Retrieve the keys for folder and timer
+    const folderKey = getFirstKeyFromOpenMctJson(jsonData);
+    const timerKey = jsonData.openmct[folderKey].composition[0].key;
+
+    // Verify the folder properties
+    expect(jsonData.openmct[folderKey]).toHaveProperty('name', 'e2e folder');
+    expect(jsonData.openmct[folderKey]).toHaveProperty('type', 'folder');
+
+    // Verify the timer properties
+    expect(jsonData.openmct[timerKey]).toHaveProperty('name', 'timer');
+    expect(jsonData.openmct[timerKey]).toHaveProperty('type', 'timer');
+
+    // Verify the composition of the folder includes the timer
+    expect(jsonData.openmct[folderKey].composition).toEqual(
+      expect.arrayContaining([expect.objectContaining({ key: timerKey })])
+    );
+  });
+});
+test.describe('ExportAsJSON Disabled Actions', () => {
+  test.beforeEach(async ({ page }) => {
+    //Use a Fault Management Object which is not composable
+    await navigateToFaultManagementWithExample(page);
+  });
+  test('Verify that the ExportAsJSON dropdown does not appear for the item X', async ({ page }) => {
+    await page.getByLabel('More actions').click();
+    await expect(await page.getByLabel('Export as JSON')).toHaveCount(0);
+
+    await page.getByRole('treeitem', { name: 'Fault Management' }).click({
+      button: 'right'
+    });
+    await expect(await page.getByLabel('Export as JSON')).toHaveCount(0);
+  });
+});
+test.describe('ExportAsJSON ProgressBar @couchdb', () => {
+  let folder;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'networkidle' });
+    // Perform actions to create the domain object
+    folder = await createDomainObjectWithDefaults(page, {
+      type: 'Folder'
+    });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Timer',
+      parent: folder.uuid
+    });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Timer',
+      parent: folder.uuid
+    });
+  });
+  test('Verify that the ExportAsJSON action creates a progressbar', async ({ page }) => {
+    // Navigate to the page
+    await page.goto(folder.url);
+
+    //Export My Items to create a large export
+    await page.getByRole('treeitem', { name: 'My Items' }).click({ button: 'right' });
+    // Open context menu and initiate download
+    await Promise.all([
+      page.getByRole('progressbar'), // This is just a check for the progress bar
+      page.getByText(
+        'Do not navigate away from this page or close this browser tab while this message'
+      ), // This is the text associated with the download
+      page.waitForEvent('download'), // Waits for the download event
+      page.getByLabel('Export as JSON').click() // Triggers the download
+    ]);
+  });
+});
+
+/**
+ * Retrieves the first key from the 'openmct' property of the provided JSON object.
+ *
+ * @param {Object} jsonData - The JSON object containing the 'openmct' property.
+ * @returns {string} The first key found in the 'openmct' object.
+ * @throws {Error} If no keys are found in the 'openmct' object.
+ */
+function getFirstKeyFromOpenMctJson(jsonData) {
+  if (!jsonData.openmct) {
+    throw new Error("The provided JSON object does not have an 'openmct' property.");
+  }
+
+  const keys = Object.keys(jsonData.openmct);
+  if (keys.length === 0) {
+    throw new Error('No keys found in the openmct object');
+  }
+
+  return keys[0];
+}
diff --git a/e2e/tests/functional/plugins/importAndExportAsJSON/importAsJson.e2e.spec.js b/e2e/tests/functional/plugins/importAndExportAsJSON/importAsJson.e2e.spec.js
new file mode 100644
index 00000000000..8f1b8c42f92
--- /dev/null
+++ b/e2e/tests/functional/plugins/importAndExportAsJSON/importAsJson.e2e.spec.js
@@ -0,0 +1,54 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which verify the basic operations surrounding importAsJSON.
+*/
+
+// FIXME: Remove this eslint exception once tests are implemented
+// eslint-disable-next-line no-unused-vars
+import { expect, test } from '../../../../baseFixtures.js';
+
+test.describe('ExportAsJSON', () => {
+  test.fixme('Verify that domain object can be importAsJSON from Tree', async ({ page }) => {
+    //Verify that an testdata JSON file can be imported from Tree
+    //Verify correctness of imported domain object
+  });
+  test.fixme(
+    'Verify that domain object can be importAsJSON from 3 dot menu on folder',
+    async ({ page }) => {
+      //Verify that an testdata JSON file can be imported from 3 dot menu on folder domain object
+      //Verify correctness of imported domain object
+    }
+  );
+  test.fixme('Verify that a nested Objects can be importAsJSON', async ({ page }) => {
+    // Testdata with hierarchy
+    // ImportAsJSON on Tree
+    // Verify Hierarchy
+  });
+  test.fixme(
+    'Verify that the ImportAsJSON dropdown does not appear for the item X',
+    async ({ page }) => {
+      // Other than non-persistable objects
+    }
+  );
+});
diff --git a/e2e/tests/functional/plugins/inspectorDataVisualization/numericData.e2e.spec.js b/e2e/tests/functional/plugins/inspectorDataVisualization/numericData.e2e.spec.js
new file mode 100644
index 00000000000..8bfb1a666a4
--- /dev/null
+++ b/e2e/tests/functional/plugins/inspectorDataVisualization/numericData.e2e.spec.js
@@ -0,0 +1,82 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { fileURLToPath } from 'url';
+
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Testing numeric data with inspector data visualization (i.e., data pivoting)', () => {
+  test.beforeEach(async ({ page }) => {
+    // eslint-disable-next-line no-undef
+    await page.addInitScript({
+      path: fileURLToPath(
+        new URL('../../../../helper/addInitDataVisualization.js', import.meta.url)
+      )
+    });
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+  });
+
+  test('Can click on telemetry and see data in inspector @2p', async ({ page, context }) => {
+    const exampleDataVisualizationSource = await createDomainObjectWithDefaults(page, {
+      type: 'Example Data Visualization Source'
+    });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'First Sine Wave Generator',
+      parent: exampleDataVisualizationSource.uuid
+    });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Second Sine Wave Generator',
+      parent: exampleDataVisualizationSource.uuid
+    });
+
+    await page.goto(exampleDataVisualizationSource.url);
+
+    await page.getByRole('tab', { name: 'Data Visualization' }).click();
+    await page.getByRole('cell', { name: /First Sine Wave Generator/ }).click();
+    await expect(page.getByText('Numeric Data')).toBeVisible();
+    await expect(
+      page.locator('span.plot-series-name', { hasText: 'First Sine Wave Generator Hz' })
+    ).toBeVisible();
+    await expect(page.locator('.js-series-data-loaded')).toBeVisible();
+
+    await page.getByRole('cell', { name: /Second Sine Wave Generator/ }).click();
+    await expect(page.getByText('Numeric Data')).toBeVisible();
+    await expect(
+      page.locator('span.plot-series-name', { hasText: 'Second Sine Wave Generator Hz' })
+    ).toBeVisible();
+    await expect(page.locator('.js-series-data-loaded')).toBeVisible();
+
+    // test new tab
+    await page.getByLabel('Inspector Views').getByLabel('More actions').click();
+    const pagePromise = context.waitForEvent('page');
+    await page.getByRole('menuitem', { name: /Open In New Tab/ }).click();
+
+    // ensure our new tab's title is correct
+    const newPage = await pagePromise;
+    await newPage.waitForLoadState();
+    // expect new tab title to contain 'Second Sine Wave Generator'
+    await expect(newPage).toHaveTitle('Second Sine Wave Generator');
+  });
+});
diff --git a/e2e/tests/functional/plugins/lad/lad.e2e.spec.js b/e2e/tests/functional/plugins/lad/lad.e2e.spec.js
new file mode 100644
index 00000000000..289b1690e83
--- /dev/null
+++ b/e2e/tests/functional/plugins/lad/lad.e2e.spec.js
@@ -0,0 +1,340 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import {
+  createDomainObjectWithDefaults,
+  openObjectTreeContextMenu,
+  setFixedTimeMode,
+  setRealTimeMode,
+  setStartOffset
+} from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Testing LAD table configuration', () => {
+  let ladTable;
+  let sineWaveObject;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create LAD table
+    ladTable = await createDomainObjectWithDefaults(page, {
+      type: 'LAD Table',
+      name: 'Test LAD Table'
+    });
+
+    // Create Sine Wave Generator
+    sineWaveObject = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Test Sine Wave Generator',
+      parent: ladTable.uuid
+    });
+
+    await page.goto(ladTable.url);
+  });
+  test('in edit mode, LAD Tables provide ability to hide columns', async ({ page }) => {
+    // Edit LAD table
+    await page.getByLabel('Edit Object').click();
+    await page.getByRole('tab', { name: 'LAD Table Configuration' }).click();
+
+    // make sure headers are visible initially
+    await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Units' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'WATCH' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'CRITICAL' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'SEVERE' })).toBeVisible();
+
+    // hide timestamp column
+    await page.getByLabel('Timestamp', { exact: true }).uncheck();
+    await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'Units' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'WATCH' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'CRITICAL' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'SEVERE' })).toBeVisible();
+
+    // hide units & type column
+    await page.getByLabel('Units').uncheck();
+    await page.getByLabel('Type', { exact: true }).uncheck();
+    await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'Units' })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'WATCH' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'CRITICAL' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'SEVERE' })).toBeVisible();
+
+    // hide WATCH column
+    await page.getByLabel('WATCH').uncheck();
+    await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'Units' })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'WATCH' })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'CRITICAL' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'SEVERE' })).toBeVisible();
+
+    // save and reload and verify they columns are still hidden
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+    await page.reload();
+    await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'Units' })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'WATCH' })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'CRITICAL' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'SEVERE' })).toBeVisible();
+
+    // Edit LAD table
+    await page.getByLabel('Edit Object').click();
+    await page.getByRole('tab', { name: 'LAD Table Configuration' }).click();
+
+    // show timestamp column
+    await page.getByLabel('Timestamp', { exact: true }).check();
+    await expect(page.getByRole('cell', { name: 'Units' })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'WATCH' })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'CRITICAL' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'SEVERE' })).toBeVisible();
+
+    // save and reload and make sure timestamp is still visible
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+    await page.reload();
+    await expect(page.getByRole('cell', { name: 'Units' })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'WATCH' })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'CRITICAL' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'SEVERE' })).toBeVisible();
+
+    // Edit LAD table
+    await page.getByLabel('Edit Object').click();
+    await page.getByRole('tab', { name: 'LAD Table Configuration' }).click();
+
+    // show units, type, and WATCH columns
+    await page.getByLabel('Units').check();
+    await page.getByLabel('Type', { exact: true }).check();
+    await page.getByLabel('WATCH').check();
+    await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Units' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'WATCH' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'CRITICAL' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'SEVERE' })).toBeVisible();
+
+    // save and reload and make sure all columns are still visible
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+    await page.reload();
+    await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Units' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'WATCH' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'CRITICAL' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'SEVERE' })).toBeVisible();
+  });
+
+  test('When adding something without Units, do not show Units column', async ({ page }) => {
+    // Create Sine Wave Generator
+    await createDomainObjectWithDefaults(page, {
+      type: 'Event Message Generator',
+      parent: ladTable.uuid
+    });
+
+    await page.goto(ladTable.url);
+
+    // Edit LAD table
+    await page.getByLabel('Edit Object').click();
+    await page.getByRole('tab', { name: 'LAD Table Configuration' }).click();
+
+    // make sure Sine Wave headers are visible initially too
+    await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Units' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'WATCH' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'CRITICAL' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'SEVERE' })).toBeVisible();
+
+    // save and reload and verify they columns are still hidden
+    await page.getByLabel('Save').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Remove Sine Wave Generator
+    openObjectTreeContextMenu(page, sineWaveObject.url);
+    await page.getByRole('menuitem', { name: /Remove/ }).click();
+    await page.getByRole('button', { name: 'OK', exact: true }).click();
+
+    // Ensure Units & Limit columns are gone
+    // as Event Generator don't have them
+    await page.goto(ladTable.url);
+    await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Units' })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'WATCH' })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'WARNING' })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'CRITICAL' })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'SEVERE' })).toBeHidden();
+  });
+
+  test("LAD Tables don't allow selection of rows but does show context click menus", async ({
+    page
+  }) => {
+    const cell = await page.locator('.js-first-data');
+    const userSelectable = await cell.evaluate((el) => {
+      return window.getComputedStyle(el).getPropertyValue('user-select');
+    });
+
+    expect(userSelectable).toBe('none');
+    // Right-click on the LAD table row
+    await cell.click({
+      button: 'right'
+    });
+    const menuOptions = page.locator('.c-menu ul');
+    await expect.soft(menuOptions).toContainText('View Full Datum');
+    await expect.soft(menuOptions).toContainText('View Historical Data');
+    await expect.soft(menuOptions).toContainText('Remove');
+    // await page.locator('li[title="Remove this object from its containing object."]').click();
+  });
+});
+
+test.describe('Testing LAD table @unstable', () => {
+  let sineWaveObject;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    await setRealTimeMode(page);
+
+    // Create Sine Wave Generator
+    sineWaveObject = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Test Sine Wave Generator'
+    });
+  });
+  test('telemetry value exactly matches latest telemetry value received in real time', async ({
+    page
+  }) => {
+    // Create LAD table
+    await createDomainObjectWithDefaults(page, {
+      type: 'LAD Table',
+      name: 'Test LAD Table'
+    });
+    // Edit LAD table
+    await page.getByLabel('Edit Object').click();
+
+    // Expand the 'My Items' folder in the left tree
+    await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
+    // Add the Sine Wave Generator to the LAD table and save changes
+    await page.dragAndDrop('text=Test Sine Wave Generator', '.c-lad-table-wrapper');
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Subscribe to the Sine Wave Generator data
+    // On getting data, check if the value found in the LAD table is the most recent value
+    // from the Sine Wave Generator
+    const getTelemValuePromise = await subscribeToTelemetry(page, sineWaveObject.uuid);
+    const subscribeTelemValue = await getTelemValuePromise;
+    const ladTableValuePromise = await page.waitForSelector(`text="${subscribeTelemValue}"`);
+    const ladTableValue = await ladTableValuePromise.textContent();
+
+    expect(ladTableValue).toBe(subscribeTelemValue);
+  });
+  test('telemetry value exactly matches latest telemetry value received in fixed time', async ({
+    page
+  }) => {
+    // Create LAD table
+    await createDomainObjectWithDefaults(page, {
+      type: 'LAD Table',
+      name: 'Test LAD Table'
+    });
+    // Edit LAD table
+    await page.getByLabel('Edit Object').click();
+
+    // Expand the 'My Items' folder in the left tree
+    await page.locator('.c-tree__item__view-control.c-disclosure-triangle').click();
+    // Add the Sine Wave Generator to the LAD table and save changes
+    await page.dragAndDrop('text=Test Sine Wave Generator', '.c-lad-table-wrapper');
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Subscribe to the Sine Wave Generator data
+    const getTelemValuePromise = await subscribeToTelemetry(page, sineWaveObject.uuid);
+    // Set an offset of 1 minute and then change the time mode to fixed to set a 1 minute historical window
+    await setStartOffset(page, { mins: '1' });
+    await setFixedTimeMode(page);
+
+    // On getting data, check if the value found in the LAD table is the most recent value
+    // from the Sine Wave Generator
+    const subscribeTelemValue = await getTelemValuePromise;
+    const ladTableValuePromise = await page.waitForSelector(`text="${subscribeTelemValue}"`);
+    const ladTableValue = await ladTableValuePromise.textContent();
+
+    expect(ladTableValue).toBe(subscribeTelemValue);
+  });
+});
+
+/**
+ * Util for subscribing to a telemetry object by object identifier
+ * Limitations: Currently only works to return telemetry once to the node scope
+ * To Do: See if there's a way to await this multiple times to allow for multiple
+ * values to be returned over time
+ * @param {import('@playwright/test').Page} page
+ * @param {string} objectIdentifier identifier for object
+ * @returns {Promise<string>} the formatted sin telemetry value
+ */
+async function subscribeToTelemetry(page, objectIdentifier) {
+  const getTelemValuePromise = new Promise((resolve) =>
+    page.exposeFunction('getTelemValue', resolve)
+  );
+
+  await page.evaluate(async (telemetryIdentifier) => {
+    const telemetryObject = await window.openmct.objects.get(telemetryIdentifier);
+    const metadata = window.openmct.telemetry.getMetadata(telemetryObject);
+    const formats = await window.openmct.telemetry.getFormatMap(metadata);
+    window.openmct.telemetry.subscribe(telemetryObject, (obj) => {
+      const sinVal = obj.sin;
+      const formattedSinVal = formats.sin.format(sinVal);
+      window.getTelemValue(formattedSinVal);
+    });
+  }, objectIdentifier);
+
+  return getTelemValuePromise;
+}
diff --git a/e2e/tests/functional/plugins/lad/ladSet.e2e.spec.js b/e2e/tests/functional/plugins/lad/ladSet.e2e.spec.js
new file mode 100644
index 00000000000..f2b8a46aed4
--- /dev/null
+++ b/e2e/tests/functional/plugins/lad/ladSet.e2e.spec.js
@@ -0,0 +1,69 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('LAD Table Sets', () => {
+  test('Ensure we have numbers in cells', async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    const ladTableSet = await createDomainObjectWithDefaults(page, {
+      type: 'LAD Table Set'
+    });
+
+    const firstLadTable = await createDomainObjectWithDefaults(page, {
+      type: 'LAD Table',
+      parent: ladTableSet.uuid
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: firstLadTable.uuid
+    });
+
+    const secondLadTable = await createDomainObjectWithDefaults(page, {
+      type: 'LAD Table',
+      parent: ladTableSet.uuid
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: secondLadTable.uuid
+    });
+
+    await page.goto(ladTableSet.url);
+
+    // Wait for the initial value to show after mount
+    await expect(page.getByLabel('lad value').first()).not.toContainText('---');
+
+    const valueFromFirstSineWave = await page.getByLabel('lad value').first().innerText();
+    const firstSineWaveNumber = parseFloat(valueFromFirstSineWave);
+    // ensure we have a float value in the cell and it's finite
+    expect(Number.isFinite(firstSineWaveNumber)).toBeTruthy();
+
+    const valueFromSecondSineWave = await page.getByLabel('lad value').last().innerText();
+    const secondSineWaveNumber = parseFloat(valueFromSecondSineWave);
+    // ensure we have a float value in the cell and it's finite
+    expect(Number.isFinite(secondSineWaveNumber)).toBeTruthy();
+  });
+});
diff --git a/e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js b/e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js
new file mode 100644
index 00000000000..e412392b6d6
--- /dev/null
+++ b/e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js
@@ -0,0 +1,550 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which verify the basic operations surrounding Notebooks.
+*/
+
+import { fileURLToPath } from 'url';
+
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
+import * as nbUtils from '../../../../helper/notebookUtils.js';
+import { expect, streamToString, test } from '../../../../pluginFixtures.js';
+
+const NOTEBOOK_NAME = 'Notebook';
+
+test.describe('Notebook CRUD Operations', () => {
+  test.beforeEach(async ({ page }) => {
+    //Navigate to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+  });
+  test('Can create a Notebook Object', async ({ page }) => {
+    //Create domain object
+    await createDomainObjectWithDefaults(page, {
+      type: NOTEBOOK_NAME
+    });
+    //Newly created notebook should have one Section and one page, 'Unnamed Section'/'Unnamed Page'
+    const notebookSectionNames = page.locator('.c-notebook__sections .c-list__item__name');
+    const notebookPageNames = page.locator('.c-notebook__pages .c-list__item__name');
+    await expect(notebookSectionNames).toBeHidden();
+    await expect(notebookPageNames).toBeHidden();
+    await expect(notebookSectionNames).toHaveText('Unnamed Section');
+    await expect(notebookPageNames).toHaveText('Unnamed Page');
+  });
+  test.fixme('Can update a Notebook Object', async ({ page }) => {});
+  test.fixme('Can view a previously created Notebook Object', async ({ page }) => {});
+  test.fixme('Can Delete a Notebook Object', async ({ page }) => {
+    // Other than non-persistable objects
+  });
+});
+
+test.describe('Default Notebook', () => {
+  // General Default Notebook statements
+  // ## Useful commands:
+  // 1.  - To check default notebook:
+  //     `JSON.parse(localStorage.getItem('notebook-storage'));`
+  // 1.  - Clear default notebook:
+  //     `localStorage.setItem('notebook-storage', null);`
+  test.fixme(
+    'A newly created Notebook is automatically set as the default notebook if no other notebooks exist',
+    async ({ page }) => {
+      //Create new notebook
+      //Verify Default Notebook Characteristics
+    }
+  );
+  test.fixme(
+    'A newly created Notebook is automatically set as the default notebook if at least one other notebook exists',
+    async ({ page }) => {
+      //Create new notebook A
+      //Create second notebook B
+      //Verify Non-Default Notebook A Characteristics
+      //Verify Default Notebook B Characteristics
+    }
+  );
+  test.fixme(
+    'If a default notebook is deleted, the second most recent notebook becomes the default',
+    async ({ page }) => {
+      //Create new notebook A
+      //Create second notebook B
+      //Delete Notebook B
+      //Verify Default Notebook A Characteristics
+    }
+  );
+});
+
+test.describe('Notebook section tests', () => {
+  //The following test cases are associated with Notebook Sections
+  test.beforeEach(async ({ page }) => {
+    //Navigate to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create Notebook
+    await createDomainObjectWithDefaults(page, {
+      type: NOTEBOOK_NAME
+    });
+  });
+  test('Default and new sections are automatically named Unnamed Section with Unnamed Page', async ({
+    page
+  }) => {
+    const notebookSectionNames = page.locator('.c-notebook__sections .c-list__item__name');
+    const notebookPageNames = page.locator('.c-notebook__pages .c-list__item__name');
+    await expect(notebookSectionNames).toBeHidden();
+    await expect(notebookPageNames).toBeHidden();
+    // Expand sidebar
+    await page.locator('.c-notebook__toggle-nav-button').click();
+    // Check that the default section and page are created and the name matches the defaults
+    const defaultSectionName = await notebookSectionNames.innerText();
+    await expect(notebookSectionNames).toBeVisible();
+    expect(defaultSectionName).toBe('Unnamed Section');
+    const defaultPageName = await notebookPageNames.innerText();
+    await expect(notebookPageNames).toBeVisible();
+    expect(defaultPageName).toBe('Unnamed Page');
+
+    // Add a section
+    await page.locator('.js-sidebar-sections .c-icon-button.icon-plus').click();
+
+    // Check that new section and page within the new section match the defaults
+    const newSectionName = await notebookSectionNames.nth(1).innerText();
+    await expect(notebookSectionNames.nth(1)).toBeVisible();
+    expect(newSectionName).toBe('Unnamed Section');
+    const newPageName = await notebookPageNames.innerText();
+    await expect(notebookPageNames).toBeVisible();
+    expect(newPageName).toBe('Unnamed Page');
+  });
+  test.fixme('Section selection operations and associated behavior', async ({ page }) => {
+    //Create new notebook A
+    //Add Sections until 6 total with no default section/page
+    //Select 3rd section
+    //Delete 4th section
+    //3rd section is still selected
+    //Delete 3rd section
+    //1st section is selected
+    //Set 3rd section as default
+    //Delete 2nd section
+    //3rd section is still default
+    //Delete 3rd section
+    //1st is selected and there is no default notebook
+  });
+  test.fixme('Section rename operations', async ({ page }) => {
+    // Create a new notebook
+    // Add a section
+    // Rename the section but do not confirm
+    // Keyboard press 'Escape'
+    // Verify that the section name reverts to the default name
+    // Rename the section but do not confirm
+    // Keyboard press 'Enter'
+    // Verify that the section name is updated
+    // Rename the section to "" (empty string)
+    // Keyboard press 'Enter' to confirm
+    // Verify that the section name reverts to the default name
+    // Rename the section to something long that overflows the text box
+    // Verify that the section name is not truncated while input is active
+    // Confirm the section name edit
+    // Verify that the section name is truncated now that input is not active
+  });
+});
+
+test.describe('Notebook page tests', () => {
+  //The following test cases are associated with Notebook Pages
+  test.beforeEach(async ({ page }) => {
+    //Navigate to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create Notebook
+    await createDomainObjectWithDefaults(page, {
+      type: NOTEBOOK_NAME
+    });
+  });
+  //Test will need to be implemented after a refactor in #5713
+  // eslint-disable-next-line playwright/no-skipped-test
+  test.skip('Delete page popup is removed properly on clicking dropdown again', async ({
+    page
+  }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/5713'
+    });
+    // Expand sidebar and add a second page
+    await page.locator('.c-notebook__toggle-nav-button').click();
+    await page.locator('text=Page Add >> button').click();
+
+    // Click on the 2nd page dropdown button and expect the Delete Page option to appear
+    await page.locator('button[title="Open context menu"]').nth(2).click();
+    await expect(page.locator('text=Delete Page')).toBeEnabled();
+    // Clicking on the same page a second time causes the same Delete Page option to recreate
+    await page.locator('button[title="Open context menu"]').nth(2).click();
+    await expect(page.locator('text=Delete Page')).toBeEnabled();
+    // Clicking on the first page causes the first delete button to detach and recreate on the first page
+    await page.locator('button[title="Open context menu"]').nth(1).click();
+    const numOfDeletePagePopups = await page.locator('li[title="Delete Page"]').count();
+    expect(numOfDeletePagePopups).toBe(1);
+  });
+  test.fixme('Page selection operations and associated behavior', async ({ page }) => {
+    //Create new notebook A
+    //Delete existing Page
+    //New 'Unnamed Page' automatically created
+    //Create 6 total Pages without a default page
+    //Select 3rd
+    //Delete 3rd
+    //First is now selected
+    //Set 3rd as default
+    //Select 2nd page
+    //Delete 2nd page
+    //3rd (default) is now selected
+    //Set 3rd as default page
+    //Select 3rd (default) page
+    //Delete 3rd page
+    //First is now selected and there is no default notebook
+  });
+  test.fixme('Page rename operations', async ({ page }) => {
+    // Create a new notebook
+    // Add a page
+    // Rename the page but do not confirm
+    // Keyboard press 'Escape'
+    // Verify that the page name reverts to the default name
+    // Rename the page but do not confirm
+    // Keyboard press 'Enter'
+    // Verify that the page name is updated
+    // Rename the page to "" (empty string)
+    // Keyboard press 'Enter' to confirm
+    // Verify that the page name reverts to the default name
+    // Rename the page to something long that overflows the text box
+    // Verify that the page name is not truncated while input is active
+    // Confirm the page name edit
+    // Verify that the page name is truncated now that input is not active
+  });
+});
+
+test.describe('Notebook export tests', () => {
+  test.beforeEach(async ({ page }) => {
+    //Navigate to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create Notebook
+    await createDomainObjectWithDefaults(page, {
+      type: NOTEBOOK_NAME
+    });
+  });
+  test('can export notebook as text', async ({ page }) => {
+    await nbUtils.enterTextEntry(page, `Foo bar entry`);
+    // Click on 3 Dot Menu
+    await page.locator('button[title="More actions"]').click();
+    const downloadPromise = page.waitForEvent('download');
+
+    await page.getByRole('menuitem', { name: /Export Notebook as Text/ }).click();
+
+    await page.getByRole('button', { name: 'Save' }).click();
+    const download = await downloadPromise;
+    const readStream = await download.createReadStream();
+    const exportedText = await streamToString(readStream);
+    expect(exportedText).toContain('Foo bar entry');
+  });
+  test.fixme('can export multiple notebook entries as text ', async ({ page }) => {});
+  test.fixme('can export all notebook entry metdata', async ({ page }) => {});
+  test.fixme('can export all notebook tags', async ({ page }) => {});
+  test.fixme('can export all notebook snapshots', async ({ page }) => {});
+});
+
+test.describe('Notebook search tests', () => {
+  test.fixme('Can search for a single result', async ({ page }) => {});
+  test.fixme('Can search for many results', async ({ page }) => {});
+  test.fixme('Can search for new and recently modified entries', async ({ page }) => {});
+  test.fixme('Can search for section text', async ({ page }) => {});
+  test.fixme('Can search for page text', async ({ page }) => {});
+  test.fixme('Can search for entry text', async ({ page }) => {});
+});
+
+test.describe('Notebook entry tests', () => {
+  // Create Notebook with URL Whitelist
+  let notebookObject;
+  test.beforeEach(async ({ page }) => {
+    // eslint-disable-next-line no-undef
+    await page.addInitScript({
+      path: fileURLToPath(new URL('../../../../helper/addInitNotebookWithUrls.js', import.meta.url))
+    });
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    notebookObject = await createDomainObjectWithDefaults(page, {
+      type: NOTEBOOK_NAME
+    });
+  });
+  test('When a new entry is created, it should be focused and selected', async ({ page }) => {
+    // Navigate to the notebook object
+    await page.goto(notebookObject.url);
+
+    // Click .c-notebook__drag-area
+    await page.locator('.c-notebook__drag-area').click();
+    await expect(page.getByLabel('Notebook Entry Input')).toBeVisible();
+    await expect(page.getByLabel('Notebook Entry', { exact: true })).toHaveClass(/is-selected/);
+  });
+  test('When an object is dropped into a notebook, a new entry is created and it should be focused @unstable', async ({
+    page
+  }) => {
+    // Create Overlay Plot
+    const overlayPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot'
+    });
+
+    // Navigate to the notebook object
+    await page.goto(notebookObject.url);
+
+    // Reveal the notebook in the tree
+    await page.getByLabel('Show selected item in tree').click();
+
+    await page
+      .getByRole('treeitem', { name: overlayPlot.name })
+      .dragTo(page.locator('.c-notebook__drag-area'));
+
+    const embed = page.locator('.c-ne__embed__link');
+    const embedName = await embed.innerText();
+
+    await expect(embed).toHaveClass(/icon-plot-overlay/);
+    expect(embedName).toBe(overlayPlot.name);
+  });
+  test('When an object is dropped into a notebooks existing entry, it should be focused @unstable', async ({
+    page
+  }) => {
+    // Create Overlay Plot
+    const overlayPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot'
+    });
+
+    // Navigate to the notebook object
+    await page.goto(notebookObject.url);
+
+    // Reveal the notebook in the tree
+    await page.getByLabel('Show selected item in tree').click();
+
+    await nbUtils.enterTextEntry(page, 'Entry to drop into');
+    await page
+      .getByRole('treeitem', { name: overlayPlot.name })
+      .dragTo(page.locator('text=Entry to drop into'));
+
+    const existingEntry = page.locator('.c-ne__content', {
+      has: page.locator('text="Entry to drop into"')
+    });
+    const embed = existingEntry.locator('.c-ne__embed__link');
+    const embedName = await embed.innerText();
+
+    await expect(embed).toHaveClass(/icon-plot-overlay/);
+    expect(embedName).toBe(overlayPlot.name);
+  });
+  test.fixme('new entries persist through navigation events without save', async ({ page }) => {});
+  test('previous and new entries can be deleted', async ({ page }) => {
+    // Navigate to the notebook object
+    await page.goto(notebookObject.url);
+
+    await nbUtils.enterTextEntry(page, 'First Entry');
+    await page.hover('text="First Entry"');
+    await page.click('button[title="Delete this entry"]');
+    await page.getByRole('button', { name: 'Ok' }).filter({ hasText: 'Ok' }).click();
+    await expect(page.locator('text="First Entry"')).toBeHidden();
+    await nbUtils.enterTextEntry(page, 'Another First Entry');
+    await nbUtils.enterTextEntry(page, 'Second Entry');
+    await nbUtils.enterTextEntry(page, 'Third Entry');
+    await page.hover('[aria-label="Notebook Entry"] >> nth=2');
+    await page.click('button[title="Delete this entry"] >> nth=2');
+    await page.getByRole('button', { name: 'Ok' }).filter({ hasText: 'Ok' }).click();
+    await expect(page.locator('text="Third Entry"')).toBeHidden();
+    await expect(page.locator('text="Another First Entry"')).toBeVisible();
+    await expect(page.locator('text="Second Entry"')).toBeVisible();
+  });
+  test('when a valid link is entered into a notebook entry, it becomes clickable when viewing', async ({
+    page
+  }) => {
+    const TEST_LINK = 'http://www.google.com';
+
+    // Navigate to the notebook object
+    await page.goto(notebookObject.url);
+
+    // Reveal the notebook in the tree
+    await page.getByLabel('Show selected item in tree').click();
+
+    await nbUtils.enterTextEntry(page, `This should be a link: ${TEST_LINK} is it?`);
+
+    const validLink = page.locator(`a[href="${TEST_LINK}"]`);
+
+    expect(await validLink.count()).toBe(1);
+
+    // Start waiting for popup before clicking. Note no await.
+    const popupPromise = page.waitForEvent('popup');
+
+    await validLink.click();
+    const popup = await popupPromise;
+
+    // Wait for the popup to load.
+    await popup.waitForLoadState();
+    expect.soft(popup.url()).toContain('www.google.com');
+  });
+  test('when an invalid link is entered into a notebook entry, it does not become clickable when viewing', async ({
+    page
+  }) => {
+    const TEST_LINK = 'www.google.com';
+
+    // Navigate to the notebook object
+    await page.goto(notebookObject.url);
+
+    // Reveal the notebook in the tree
+    await page.getByLabel('Show selected item in tree').click();
+
+    await nbUtils.enterTextEntry(page, `This should NOT be a link: ${TEST_LINK} is it?`);
+
+    const invalidLink = page.locator(`a[href="${TEST_LINK}"]`);
+
+    expect(await invalidLink.count()).toBe(0);
+  });
+  test('when a link is entered, but it is not in the whitelisted urls, it does not become clickable when viewing', async ({
+    page
+  }) => {
+    const TEST_LINK = 'http://www.bing.com';
+
+    // Navigate to the notebook object
+    await page.goto(notebookObject.url);
+
+    // Reveal the notebook in the tree
+    await page.getByLabel('Show selected item in tree').click();
+
+    await nbUtils.enterTextEntry(page, `This should NOT be a link: ${TEST_LINK} is it?`);
+
+    const invalidLink = page.locator(`a[href="${TEST_LINK}"]`);
+
+    expect(await invalidLink.count()).toBe(0);
+  });
+  test('when a valid link with a subdomain and a valid domain in the whitelisted urls is entered into a notebook entry, it becomes clickable when viewing', async ({
+    page
+  }) => {
+    const INVALID_TEST_LINK = 'http://bing.google.com';
+
+    // Navigate to the notebook object
+    await page.goto(notebookObject.url);
+
+    // Reveal the notebook in the tree
+    await page.getByLabel('Show selected item in tree').click();
+
+    await nbUtils.enterTextEntry(page, `This should be a link: ${INVALID_TEST_LINK} is it?`);
+
+    const validLink = page.locator(`a[href="${INVALID_TEST_LINK}"]`);
+
+    expect(await validLink.count()).toBe(1);
+  });
+  test('when a valid secure link is entered into a notebook entry, it becomes clickable when viewing', async ({
+    page
+  }) => {
+    const TEST_LINK = 'https://www.google.com';
+
+    // Navigate to the notebook object
+    await page.goto(notebookObject.url);
+
+    // Reveal the notebook in the tree
+    await page.getByLabel('Show selected item in tree').click();
+
+    await nbUtils.enterTextEntry(page, `This should be a link: ${TEST_LINK} is it?`);
+
+    const validLink = page.locator(`a[href="${TEST_LINK}"]`);
+
+    expect(await validLink.count()).toBe(1);
+
+    // Start waiting for popup before clicking. Note no await.
+    const popupPromise = page.waitForEvent('popup');
+
+    await validLink.click();
+    const popup = await popupPromise;
+
+    // Wait for the popup to load.
+    await popup.waitForLoadState();
+    expect.soft(popup.url()).toContain('www.google.com');
+  });
+  test('when a nefarious link is entered into a notebook entry, it is sanitized when viewing', async ({
+    page
+  }) => {
+    const TEST_LINK = 'http://www.google.com?bad=';
+    const TEST_LINK_BAD = `http://www.google.com?bad=<script>alert('gimme your cookies')</script>`;
+
+    // Navigate to the notebook object
+    await page.goto(notebookObject.url);
+
+    // Reveal the notebook in the tree
+    await page.getByLabel('Show selected item in tree').click();
+
+    await nbUtils.enterTextEntry(
+      page,
+      `This should be a link, BUT not a bad link: ${TEST_LINK_BAD} is it?`
+    );
+
+    const sanitizedLink = page.locator(`a[href="${TEST_LINK}"]`);
+    const unsanitizedLink = page.locator(`a[href="${TEST_LINK_BAD}"]`);
+
+    expect.soft(await sanitizedLink.count()).toBe(1);
+    expect(await unsanitizedLink.count()).toBe(0);
+  });
+  test('Can add markdown to a notebook entry', async ({ page }) => {
+    await page.goto(notebookObject.url);
+
+    // Headers
+    const headerMarkdown = `# Big Header\n## Large Header\n### Medium Header\n#### Small Header`;
+    await nbUtils.enterTextEntry(page, headerMarkdown);
+    await expect(page.getByRole('heading', { name: 'Big Header' })).toBeVisible();
+
+    // Text markup
+    const markupText =
+      '**This is bold.** _This is italic_. `This is code`. ~This is strikethrough~';
+    await nbUtils.enterTextEntry(page, markupText);
+    await expect(page.locator('strong:has-text("This is bold.")')).toBeVisible();
+
+    // Tables
+    const tablesText = '|Col 1|Col 2|Col3|\n|-|-|-|\n |Value 1|Value 2|Value 3|\n';
+    await nbUtils.enterTextEntry(page, tablesText);
+    await expect(page.getByRole('cell', { name: 'Value 2' })).toBeVisible();
+
+    // Links
+    const linksText =
+      'Raw links https://www.google.com and Markdown links like [Google](https://www.google.com) work';
+    await nbUtils.enterTextEntry(page, linksText);
+    await expect(page.getByRole('link', { name: 'https://www.google.com' })).toBeVisible();
+    await expect(page.getByRole('link', { name: 'Google', exact: true })).toBeVisible();
+
+    // Lists
+    const listsText = '- List item 1\n   - Item 1A \n- List Item 2\n  1. Order 1\n  1. Order 2\n';
+    await nbUtils.enterTextEntry(page, listsText);
+    const childItem = page.locator('li:has-text("List Item 2") ol li:has-text("Order 2")');
+    await expect(childItem).toBeVisible();
+
+    // Code Blocks
+    const codeblockTest = '```javascript\nconst foo = "bar";\nconst bar = "foo";\n```';
+    await nbUtils.enterTextEntry(page, codeblockTest);
+    const codeBlock = page.locator('code.language-javascript:has-text("const foo = \\"bar\\";")');
+    await expect(codeBlock).toBeVisible();
+
+    // Blockquotes
+    const blockquoteTest =
+      'This is a quote by Mark Twain:\n> "The man with a new idea is a crank\n>until the idea succeeds."';
+    await nbUtils.enterTextEntry(page, blockquoteTest);
+    const firstLineOfBlockquoteText = page.locator(
+      'blockquote:has-text("The man with a new idea is a crank")'
+    );
+    await expect(firstLineOfBlockquoteText).toBeVisible();
+    const secondLineOfBlockquoteText = page.locator(
+      'blockquote:has-text("until the idea succeeds")'
+    );
+    await expect(secondLineOfBlockquoteText).toBeVisible();
+  });
+});
diff --git a/e2e/tests/functional/plugins/notebook/notebookSnapshotImage.e2e.spec.js b/e2e/tests/functional/plugins/notebook/notebookSnapshotImage.e2e.spec.js
new file mode 100644
index 00000000000..15fd97b214d
--- /dev/null
+++ b/e2e/tests/functional/plugins/notebook/notebookSnapshotImage.e2e.spec.js
@@ -0,0 +1,147 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which verify the basic operations surrounding Notebooks.
+*/
+
+import fs from 'fs/promises';
+import { fileURLToPath } from 'url';
+
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+const NOTEBOOK_NAME = 'Notebook';
+
+test.describe('Snapshot image tests', () => {
+  test.beforeEach(async ({ page }) => {
+    //Navigate to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create Notebook
+    await createDomainObjectWithDefaults(page, {
+      type: NOTEBOOK_NAME
+    });
+  });
+
+  test('Can drop an image onto a notebook and create a new entry', async ({ page }) => {
+    const imageData = await fs.readFile(
+      fileURLToPath(
+        new URL('../../../../../src/images/favicons/favicon-96x96.png', import.meta.url)
+      )
+    );
+    const imageArray = new Uint8Array(imageData);
+    const fileData = Array.from(imageArray);
+
+    const dropTransfer = await page.evaluateHandle((data) => {
+      const dataTransfer = new DataTransfer();
+      const file = new File([new Uint8Array(data)], 'favicon-96x96.png', { type: 'image/png' });
+      dataTransfer.items.add(file);
+      return dataTransfer;
+    }, fileData);
+
+    await page.dispatchEvent('.c-notebook__drag-area', 'drop', { dataTransfer: dropTransfer });
+    await page.locator('.c-ne__save-button > button').click();
+    // be sure that entry was created
+    await expect(page.getByText('favicon-96x96.png')).toBeVisible();
+
+    await page.getByRole('img', { name: 'favicon-96x96.png thumbnail' }).click();
+    // expect large image to be displayed
+    await expect(page.getByRole('dialog').getByText('favicon-96x96.png')).toBeVisible();
+
+    await page.getByRole('button', { name: 'Close' }).click();
+
+    // drop another image onto the entry
+    await page.dispatchEvent('.c-snapshots', 'drop', { dataTransfer: dropTransfer });
+
+    const secondThumbnail = page.getByRole('img', { name: 'favicon-96x96.png thumbnail' }).nth(1);
+    await secondThumbnail.waitFor({ state: 'attached' });
+    // expect two embedded images now
+    expect(await page.getByRole('img', { name: 'favicon-96x96.png thumbnail' }).count()).toBe(2);
+
+    await page.locator('.c-snapshot.c-ne__embed').first().getByTitle('More actions').click();
+
+    await page.getByRole('menuitem', { name: /Remove This Embed/ }).click();
+    await page.getByRole('button', { name: 'Ok', exact: true }).click();
+    // Ensure that the thumbnail is removed before we assert
+    await secondThumbnail.waitFor({ state: 'detached' });
+
+    // expect one embedded image now as we deleted the other
+    expect(await page.getByRole('img', { name: 'favicon-96x96.png thumbnail' }).count()).toBe(1);
+  });
+});
+
+test.describe('Snapshot image failure tests', () => {
+  test.use({ failOnConsoleError: false });
+  test.beforeEach(async ({ page }) => {
+    //Navigate to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create Notebook
+    await createDomainObjectWithDefaults(page, {
+      type: NOTEBOOK_NAME
+    });
+  });
+
+  test('Get an error notification when dropping unknown file onto notebook entry', async ({
+    page
+  }) => {
+    // fill Uint8Array array with some garbage data
+    const garbageData = new Uint8Array(100);
+    const fileData = Array.from(garbageData);
+
+    const dropTransfer = await page.evaluateHandle((data) => {
+      const dataTransfer = new DataTransfer();
+      const file = new File([new Uint8Array(data)], 'someGarbage.foo', { type: 'unknown/garbage' });
+      dataTransfer.items.add(file);
+      return dataTransfer;
+    }, fileData);
+
+    await page.dispatchEvent('.c-notebook__drag-area', 'drop', { dataTransfer: dropTransfer });
+
+    // should have gotten a notification from OpenMCT that we couldn't add it
+    await expect(page.getByText('Unknown object(s) dropped and cannot embed')).toBeVisible();
+  });
+
+  test('Get an error notification when dropping big files onto notebook entry', async ({
+    page
+  }) => {
+    const garbageSize = 15 * 1024 * 1024; // 15 megabytes
+
+    await page.addScriptTag({
+      // make the garbage client side
+      content: `window.bigGarbageData = new Uint8Array(${garbageSize})`
+    });
+
+    const bigDropTransfer = await page.evaluateHandle(() => {
+      const dataTransfer = new DataTransfer();
+      const file = new File([window.bigGarbageData], 'bigBoy.png', { type: 'image/png' });
+      dataTransfer.items.add(file);
+      return dataTransfer;
+    });
+
+    await page.dispatchEvent('.c-notebook__drag-area', 'drop', { dataTransfer: bigDropTransfer });
+
+    // should have gotten a notification from OpenMCT that we couldn't add it as it's too big
+    await expect(page.getByText('unable to embed')).toBeVisible();
+  });
+});
diff --git a/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js b/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js
new file mode 100644
index 00000000000..b6064e86650
--- /dev/null
+++ b/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js
@@ -0,0 +1,161 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which verify the basic operations surrounding Notebooks.
+*/
+
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Snapshot Menu tests', () => {
+  test.fixme(
+    'When no default notebook is selected, Snapshot Menu dropdown should only have a single option',
+    async ({ page }) => {
+      // There should be no default notebook
+      // Clear default notebook if exists using `localStorage.setItem('notebook-storage', null);`
+      // refresh page
+      // Click on 'Notebook Snapshot Menu'
+      // 'save to Notebook Snapshots' should be only option there
+    }
+  );
+  test.fixme(
+    'When default notebook is updated selected, Snapshot Menu dropdown should list it as the newest option',
+    async ({ page }) => {
+      // Create 2a notebooks
+      // Set Notebook A as Default
+      // Open Snapshot Menu and note that Notebook A is listed
+      // Close Snapshot Menu
+      // Set Default Notebook to Notebook B
+      // Open Snapshot Notebook and note that Notebook B is listed
+      // Select Default Notebook Option and verify that Snapshot is added to Notebook B
+    }
+  );
+  test.fixme('Can add Snapshots via Snapshot Menu and details are correct', async ({ page }) => {
+    //Note this should be a visual test, too
+    // Create Telemetry object
+    // Create A notebook with many pages and sections.
+    // Set page and section defaults to be between first and last of many. i.e. 3 of 5
+    // Navigate to Telemetry object
+    // Select Default Notebook Option and verify that Snapshot is added to Notebook A
+    // Verify Snapshot Details appear correctly
+  });
+  test.fixme('Snapshots adjust time conductor', async ({ page }) => {
+    // Create Telemetry object
+    // Set Telemetry object's timeconductor to Fixed time with Start and End times are recorded
+    // Embed Telemetry object into notebook
+    // Set Time Conductor to Local clock
+    // Click into embedded telemetry object and verify object appears with same fixed time from record
+  });
+});
+
+test.describe('Snapshot Container tests', () => {
+  test.beforeEach(async ({ page }) => {
+    //Navigate to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create Notebook
+    // const notebook = await createDomainObjectWithDefaults(page, {
+    //     type: 'Notebook',
+    //     name: "Test Notebook"
+    // });
+    // // Create Overlay Plot
+    // const snapShotObject = await createDomainObjectWithDefaults(page, {
+    //     type: 'Overlay Plot',
+    //     name: "Dropped Overlay Plot"
+    // });
+
+    await page.getByLabel('Take a Notebook Snapshot').click();
+    await page.getByRole('menuitem', { name: 'Save to Notebook Snapshots' }).click();
+    await page.getByLabel('Show Snapshots').click();
+  });
+  test('A snapshot can be Quick Viewed from Container with 3 dot action menu', async ({ page }) => {
+    await page.locator('.c-snapshot.c-ne__embed').first().getByTitle('More actions').click();
+    await page.getByRole('menuitem', { name: 'Quick View' }).click();
+    await expect(page.locator('.c-overlay__outer')).toBeVisible();
+  });
+  test.fixme(
+    'A snapshot can be Viewed, Annotated, display deleted, and saved from Container with 3 dot action menu',
+    async ({ page }) => {
+      await page.locator('.c-snapshot.c-ne__embed').first().getByTitle('More actions').click();
+      await page.getByRole('menuitem', { name: ' View Snapshot' }).click();
+      await expect(page.locator('.c-overlay__outer')).toBeVisible();
+      await page.getByTitle('Annotate').click();
+      await expect(page.locator('#snap-annotation-canvas')).toBeVisible();
+      await page.getByRole('button', { name: '' }).click();
+      // await expect(page.locator('#snap-annotation-canvas')).not.toBeVisible();
+      await page.getByRole('button', { name: 'Save' }).click();
+      await page.getByRole('button', { name: 'Done' }).click();
+      //await expect(await page.locator)
+    }
+  );
+  test.fixme('5 Snapshots can be added to a container', async ({ page }) => {});
+  test.fixme(
+    '5 Snapshots can be added to a container and Deleted with Delete All action',
+    async ({ page }) => {}
+  );
+  test.fixme(
+    'A snapshot can be Deleted from Container with 3 dot action menu',
+    async ({ page }) => {}
+  );
+  test.fixme(
+    'A snapshot can be Navigated To from Container with 3 dot action menu',
+    async ({ page }) => {}
+  );
+  test.fixme(
+    'A snapshot can be Navigated To Item in Time from Container with 3 dot action menu',
+    async ({ page }) => {}
+  );
+  test.fixme('A snapshot Container can be open and closed', async ({ page }) => {});
+  test.fixme(
+    'Can add object to Snapshot container and pull into notebook and create a new entry',
+    async ({ page }) => {
+      //Create Notebook
+      //Create Telemetry Object
+      //From Telemetry Object, use 'save to Notebook Snapshots'
+      //Snapshots indicator should blink, click on it to view snapshots
+      //Navigate to Notebook
+      //Drag and Drop onto droppable area for new entry
+      //New Entry created with given snapshot added
+      //Snapshot removed from container?
+    }
+  );
+  test.fixme(
+    'Can add object to Snapshot container and pull into notebook and existing entry',
+    async ({ page }) => {
+      //Create Notebook
+      //Create Telemetry Object
+      //From Telemetry Object, use 'save to Notebook Snapshots'
+      //Snapshots indicator should blink, click on it to view snapshots
+      //Navigate to Notebook
+      //Drag and Drop into exiting entry
+      //Existing Entry updated with given snapshot
+      //Snapshot removed from container?
+    }
+  );
+  test.fixme(
+    'Verify Embedded options for PNG, JPG, and Annotate work correctly',
+    async ({ page }) => {
+      //Add snapshot to container
+      //Verify PNG, JPG, and Annotate buttons work correctly
+    }
+  );
+});
diff --git a/e2e/tests/functional/plugins/notebook/notebookTags.e2e.spec.js b/e2e/tests/functional/plugins/notebook/notebookTags.e2e.spec.js
new file mode 100644
index 00000000000..4c86a2a97f3
--- /dev/null
+++ b/e2e/tests/functional/plugins/notebook/notebookTags.e2e.spec.js
@@ -0,0 +1,257 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which verify notebook tag functionality.
+*/
+
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
+import {
+  createNotebookAndEntry,
+  createNotebookEntryAndTags,
+  enterTextEntry
+} from '../../../../helper/notebookUtils.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Tagging in Notebooks @addInit', () => {
+  test.beforeEach(async ({ page }) => {
+    //Go to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+  });
+  test('Can load tags', async ({ page }) => {
+    await createNotebookAndEntry(page);
+
+    await page.getByRole('tab', { name: 'Annotations' }).click();
+
+    await page.locator('button:has-text("Add Tag")').click();
+
+    await page.locator('[placeholder="Type to select tag"]').click();
+
+    await expect(page.locator('[aria-label="Autocomplete Options"]')).toContainText('Science');
+    await expect(page.locator('[aria-label="Autocomplete Options"]')).toContainText('Drilling');
+    await expect(page.locator('[aria-label="Autocomplete Options"]')).toContainText('Driving');
+  });
+  test('Can add tags', async ({ page }) => {
+    await createNotebookEntryAndTags(page);
+
+    await expect(page.locator('[aria-label="Notebook Entry"]')).toContainText('Science');
+    await expect(page.locator('[aria-label="Notebook Entry"]')).toContainText('Driving');
+
+    await page.locator('button:has-text("Add Tag")').click();
+    await page.locator('[placeholder="Type to select tag"]').click();
+
+    await expect(page.locator('[aria-label="Autocomplete Options"]')).not.toContainText('Science');
+    await expect(page.locator('[aria-label="Autocomplete Options"]')).not.toContainText('Driving');
+    await expect(page.locator('[aria-label="Autocomplete Options"]')).toContainText('Drilling');
+  });
+  test('Can add tags with blank entry', async ({ page }) => {
+    await createDomainObjectWithDefaults(page, { type: 'Notebook' });
+    await page.getByRole('tab', { name: 'Annotations' }).click();
+
+    await enterTextEntry(page, '');
+    await page.hover(`button:has-text("Add Tag")`);
+    await page.locator(`button:has-text("Add Tag")`).click();
+
+    // Click inside the tag search input
+    await page.locator('[placeholder="Type to select tag"]').click();
+    // Select the "Driving" tag
+    await page.locator('[aria-label="Autocomplete Options"] >> text=Driving').click();
+
+    await expect(page.locator('[aria-label="Notebook Entry"]')).toContainText('Driving');
+  });
+  test('Can cancel adding tags', async ({ page }) => {
+    await createNotebookAndEntry(page);
+
+    await page.getByRole('tab', { name: 'Annotations' }).click();
+
+    // Test canceling adding a tag after we click "Type to select tag"
+    await page.locator('button:has-text("Add Tag")').click();
+
+    await page.locator('[placeholder="Type to select tag"]').click();
+
+    await page.getByRole('search').getByLabel('Search Input').click();
+
+    await expect(page.locator('button:has-text("Add Tag")')).toBeVisible();
+
+    // Test canceling adding a tag after we just click "Add Tag"
+    await page.locator('button:has-text("Add Tag")').click();
+
+    await page.getByRole('search').getByLabel('Search Input').click();
+
+    await expect(page.locator('button:has-text("Add Tag")')).toBeVisible();
+  });
+  test('Can search for tags and preview works properly', async ({ page }) => {
+    await createNotebookEntryAndTags(page);
+    await page.getByRole('search').getByLabel('Search Input').click();
+    await page.getByRole('search').getByLabel('Search Input').fill('sc');
+    await expect(page.getByRole('listitem', { name: 'Annotation Search Result' })).toContainText(
+      'Science'
+    );
+    await expect(
+      page.getByRole('listitem', { name: 'Annotation Search Result' })
+    ).not.toContainText('Driving');
+
+    await page.getByRole('search').getByLabel('Search Input').click();
+    await page.getByRole('search').getByLabel('Search Input').fill('Sc');
+    await expect(page.getByRole('listitem', { name: 'Annotation Search Result' })).toContainText(
+      'Science'
+    );
+    await expect(
+      page.getByRole('listitem', { name: 'Annotation Search Result' })
+    ).not.toContainText('Driving');
+
+    await page.getByRole('search').getByLabel('Search Input').click();
+    await page.getByRole('search').getByLabel('Search Input').fill('Xq');
+    await expect(page.getByText('No results found')).toBeVisible();
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout'
+    });
+
+    // Go back into edit mode for the display layout
+    await page.getByRole('button', { name: 'Edit Object' }).click();
+
+    await page.getByRole('search').getByLabel('Search Input').click();
+    await page.getByRole('search').getByLabel('Search Input').fill('Sc');
+    await expect(page.getByRole('listitem', { name: 'Annotation Search Result' })).toContainText(
+      'Science'
+    );
+    await page.getByText('Entry 0').click();
+    await expect(page.locator('.js-preview-window')).toBeVisible();
+  });
+
+  test('Can delete tags', async ({ page }) => {
+    await createNotebookEntryAndTags(page);
+    // Delete Driving
+    await page.hover('[aria-label="Tag"]:has-text("Driving")');
+    await page.locator('[aria-label="Remove tag Driving"]').click();
+
+    await expect(page.locator('[aria-label="Tags Inspector"]')).toContainText('Science');
+    await expect(page.locator('[aria-label="Tags Inspector"]')).not.toContainText('Driving');
+
+    await page.getByRole('search').getByLabel('Search Input').fill('sc');
+    await expect(
+      page.getByRole('listitem', { name: 'Annotation Search Result' })
+    ).not.toContainText('Driving');
+  });
+
+  test('Can delete entries without tags', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/5823'
+    });
+    await createNotebookEntryAndTags(page);
+
+    await page.locator('text=To start a new entry, click here or drag and drop any object').click();
+    await page.getByLabel('Notebook Entry Input').fill(`An entry without tags`);
+    await page.locator('.c-ne__save-button > button').click();
+
+    await page.hover('[aria-label="Notebook Entry Display"] >> nth=1');
+    await page.locator('button[title="Delete this entry"]').last().click();
+    await expect(
+      page.locator('text=This action will permanently delete this entry. Do you wish to continue?')
+    ).toBeVisible();
+    await page.locator('button:has-text("Ok")').click();
+    await expect(
+      page.locator('text=This action will permanently delete this entry. Do you wish to continue?')
+    ).toBeHidden();
+  });
+
+  test('Can delete objects with tags and neither return in search', async ({ page }) => {
+    await createNotebookEntryAndTags(page);
+    // Delete Notebook
+    await page.locator('button[title="More actions"]').click();
+    await page.locator('li[title="Remove this object from its containing object."]').click();
+    await page.locator('button:has-text("OK")').click();
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    await page.getByRole('search').getByLabel('Search Input').fill('Unnamed');
+    await expect(page.getByText('No results found')).toBeVisible();
+    await page.getByRole('search').getByLabel('Search Input').fill('sci');
+    await expect(page.getByText('No results found')).toBeVisible();
+    await page.getByRole('search').getByLabel('Search Input').fill('dri');
+    await expect(page.getByText('No results found')).toBeVisible();
+  });
+  test('Tags persist across reload', async ({ page }) => {
+    //Go to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    const ITERATIONS = 4;
+    const notebook = await createNotebookEntryAndTags(page, ITERATIONS);
+    await page.goto(notebook.url);
+
+    // Verify tags are present
+    for (let iteration = 0; iteration < ITERATIONS; iteration++) {
+      const entryLocator = `[aria-label="Notebook Entry"] >> nth = ${iteration}`;
+      await expect(page.locator(entryLocator)).toContainText('Science');
+      await expect(page.locator(entryLocator)).toContainText('Driving');
+    }
+
+    //Reload Page
+    await page.reload({ waitUntil: 'domcontentloaded' });
+
+    // Verify tags persist across reload
+    for (let iteration = 0; iteration < ITERATIONS; iteration++) {
+      const entryLocator = `[aria-label="Notebook Entry"] >> nth = ${iteration}`;
+      await expect(page.locator(entryLocator)).toContainText('Science');
+      await expect(page.locator(entryLocator)).toContainText('Driving');
+    }
+  });
+  test('Can cancel adding a tag', async ({ page }) => {
+    await createNotebookAndEntry(page);
+
+    await page.getByRole('tab', { name: 'Annotations' }).click();
+
+    // Click on the "Add Tag" button
+    await page.locator('button:has-text("Add Tag")').click();
+
+    // Click inside the AutoComplete field
+    await page.locator('[placeholder="Type to select tag"]').click();
+
+    // Click on the "Tags" header (simulating a click outside the autocomplete)
+    await page.locator('div.c-inspect-properties__header:has-text("Tags")').click();
+
+    // Verify there is a button with text "Add Tag"
+    await expect(page.locator('button:has-text("Add Tag")')).toBeVisible();
+
+    // Verify the AutoComplete field is hidden
+    await expect(page.locator('[placeholder="Type to select tag"]')).toBeHidden();
+  });
+  test('Can start to add a tag, click away, and add a tag', async ({ page }) => {
+    await createNotebookEntryAndTags(page);
+
+    await page.getByRole('tab', { name: 'Annotations' }).click();
+
+    // Click on the body simulating a click outside the autocomplete)
+    await page.locator('body').click();
+    await page.locator(`[aria-label="Notebook Entry"]`).click();
+
+    await page.hover(`button:has-text("Add Tag")`);
+    await page.locator(`button:has-text("Add Tag")`).click();
+
+    // Click inside the tag search input
+    await page.locator('[placeholder="Type to select tag"]').click();
+    // Select the "Driving" tag
+    await page.locator('[aria-label="Autocomplete Options"] >> text=Drilling').click();
+    await expect(page.getByLabel('Notebook Entries').getByText('Drilling')).toBeVisible();
+  });
+});
diff --git a/e2e/tests/functional/plugins/notebook/notebookWithCouchDB.e2e.spec.js b/e2e/tests/functional/plugins/notebook/notebookWithCouchDB.e2e.spec.js
new file mode 100644
index 00000000000..985af38447d
--- /dev/null
+++ b/e2e/tests/functional/plugins/notebook/notebookWithCouchDB.e2e.spec.js
@@ -0,0 +1,250 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which verify the basic operations surrounding Notebooks with CouchDB.
+*/
+
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
+import * as nbUtils from '../../../../helper/notebookUtils.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Notebook Tests with CouchDB @couchdb', () => {
+  let testNotebook;
+
+  test.beforeEach(async ({ page }) => {
+    //Navigate to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create Notebook
+    testNotebook = await createDomainObjectWithDefaults(page, { type: 'Notebook' });
+    await page.goto(testNotebook.url, { waitUntil: 'networkidle' });
+  });
+
+  test('Inspect Notebook Entry Network Requests', async ({ page }) => {
+    //Ensure we're on the annotations Tab in the inspector
+    await page.getByText('Annotations').click();
+    // Expand sidebar
+    await page.locator('.c-notebook__toggle-nav-button').click();
+
+    // Collect all request events to count and assert after notebook action
+    let notebookElementsRequests = [];
+    page.on('request', (request) => notebookElementsRequests.push(request));
+
+    //Clicking Add Page generates
+    let [notebookUrlRequest] = await Promise.all([
+      // Waits for the next request with the specified url
+      page.waitForRequest(`**/openmct/${testNotebook.uuid}`),
+      // Triggers the request
+      page.click('[aria-label="Add Page"]')
+    ]);
+    // Ensures that there are no other network requests
+    await page.waitForLoadState('networkidle');
+
+    // Assert that only two requests are made
+    // Network Requests are:
+    // 1) The actual POST to create the page
+    expect(notebookElementsRequests.length).toBe(1);
+
+    // Assert on request object
+    expect(notebookUrlRequest.postDataJSON().metadata.name).toBe(testNotebook.name);
+    expect(notebookUrlRequest.postDataJSON().model.persisted).toBeGreaterThanOrEqual(
+      notebookUrlRequest.postDataJSON().model.modified
+    );
+
+    // Add an entry
+    // Network Requests are:
+    // 1) The actual POST to create the entry
+    // 2) The shared worker event from 👆 POST request
+    notebookElementsRequests = [];
+    await nbUtils.enterTextEntry(page, 'First Entry');
+    await page.waitForLoadState('networkidle');
+    expect(notebookElementsRequests.length).toBeLessThanOrEqual(2);
+
+    // Add some tags
+    // Network Requests are for each tag creation are:
+    // 1) Getting the original path of the parent object
+    // 2) Getting the original path of the grandparent object (recursive call)
+    // 3) Creating the annotation/tag object
+    // 4) The shared worker event from 👆 POST request
+    // 5) Mutate notebook domain object's annotationModified property
+    // 6) The shared worker event from 👆 POST request
+    // 7) Notebooks fetching new annotations due to annotationModified changed
+    // 8) The update of the notebook domain's object's modified property
+    // 9) The shared worker event from 👆 POST request
+    // 10) Entry is timestamped
+    // 11) The shared worker event from 👆 POST request
+
+    notebookElementsRequests = [];
+    await addTagAndAwaitNetwork(page, 'Driving');
+    expect(filterNonFetchRequests(notebookElementsRequests).length).toBeLessThanOrEqual(11);
+
+    notebookElementsRequests = [];
+    await addTagAndAwaitNetwork(page, 'Drilling');
+    expect(filterNonFetchRequests(notebookElementsRequests).length).toBeLessThanOrEqual(11);
+
+    notebookElementsRequests = [];
+    await addTagAndAwaitNetwork(page, 'Science');
+    expect(filterNonFetchRequests(notebookElementsRequests).length).toBeLessThanOrEqual(11);
+
+    // Delete all the tags
+    // Network requests are:
+    // 1) Send POST to mutate _delete property to true on annotation with tag
+    // 2) The shared worker event from 👆 POST request
+    // 3) Timestamp update on entry
+    // 4) The shared worker event from 👆 POST request
+    // This happens for 3 tags so 12 requests
+    notebookElementsRequests = [];
+    await removeTagAndAwaitNetwork(page, 'Driving');
+    await removeTagAndAwaitNetwork(page, 'Drilling');
+    await removeTagAndAwaitNetwork(page, 'Science');
+    expect(filterNonFetchRequests(notebookElementsRequests).length).toBeLessThanOrEqual(12);
+
+    // Add two more pages
+    await page.click('[aria-label="Add Page"]');
+    await page.click('[aria-label="Add Page"]');
+
+    // Add three entries
+    await nbUtils.enterTextEntry(page, 'First Entry');
+    await nbUtils.enterTextEntry(page, 'Second Entry');
+    await nbUtils.enterTextEntry(page, 'Third Entry');
+
+    // Add three tags
+    await addTagAndAwaitNetwork(page, 'Science');
+    await addTagAndAwaitNetwork(page, 'Drilling');
+    await addTagAndAwaitNetwork(page, 'Driving');
+
+    // Add a fourth entry
+    // Network requests are:
+    // 1) Send POST to add new entry
+    // 2) The shared worker event from 👆 POST request
+    // 3) Timestamp update on entry
+    // 4) The shared worker event from 👆 POST request
+    notebookElementsRequests = [];
+    await nbUtils.enterTextEntry(page, 'Fourth Entry');
+    page.waitForLoadState('networkidle');
+
+    expect(filterNonFetchRequests(notebookElementsRequests).length).toBeLessThanOrEqual(4);
+
+    // Add a fifth entry
+    // Network requests are:
+    // 1) Send POST to add new entry
+    // 2) The shared worker event from 👆 POST request
+    // 3) Timestamp update on entry
+    // 4) The shared worker event from 👆 POST request
+    notebookElementsRequests = [];
+    await nbUtils.enterTextEntry(page, 'Fifth Entry');
+    page.waitForLoadState('networkidle');
+
+    expect(filterNonFetchRequests(notebookElementsRequests).length).toBeLessThanOrEqual(4);
+
+    // Add a sixth entry
+    // 1) Send POST to add new entry
+    // 2) The shared worker event from 👆 POST request
+    // 3) Timestamp update on entry
+    // 4) The shared worker event from 👆 POST request
+    notebookElementsRequests = [];
+    await nbUtils.enterTextEntry(page, 'Sixth Entry');
+    page.waitForLoadState('networkidle');
+
+    expect(filterNonFetchRequests(notebookElementsRequests).length).toBeLessThanOrEqual(4);
+  });
+
+  test('Search tests', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/akhenry/openmct-yamcs/issues/69'
+    });
+    await page.getByText('Annotations').click();
+    await nbUtils.enterTextEntry(page, 'First Entry');
+
+    // Add three tags
+    await addTagAndAwaitNetwork(page, 'Science');
+    await addTagAndAwaitNetwork(page, 'Drilling');
+    await addTagAndAwaitNetwork(page, 'Driving');
+
+    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
+    //Partial match for "Science" should only return Science
+    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Sc');
+    await expect(page.locator('[aria-label="Annotation Search Result"]').first()).toContainText(
+      'Science'
+    );
+    await expect(page.locator('[aria-label="Annotation Search Result"]').first()).not.toContainText(
+      'Driving'
+    );
+    await expect(page.locator('[aria-label="Annotation Search Result"]').first()).not.toContainText(
+      'Drilling'
+    );
+
+    //Searching for a tag which does not exist should return an empty result
+    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
+    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Xq');
+    await expect(page.getByText('No results found')).toBeVisible();
+  });
+});
+
+// Try to reduce indeterminism of browser requests by only returning fetch requests.
+// Filter out preflight CORS, fetching stylesheets, page icons, etc. that can occur during tests
+function filterNonFetchRequests(requests) {
+  return requests.filter((request) => {
+    return request.resourceType() === 'fetch';
+  });
+}
+
+/**
+ * Add a tag to a notebook entry by providing a tagName.
+ * Reduces indeterminism by waiting until all necessary requests are completed.
+ * @param {import('@playwright/test').Page} page
+ * @param {string} tagName
+ */
+async function addTagAndAwaitNetwork(page, tagName) {
+  await page.hover(`button:has-text("Add Tag")`);
+  await page.locator(`button:has-text("Add Tag")`).click();
+  await page.locator('[placeholder="Type to select tag"]').click();
+  await Promise.all([
+    // Waits for the next request with the specified url
+    page.waitForRequest('**/openmct/_all_docs?include_docs=true'),
+    // Triggers the request
+    page.locator(`[aria-label="Autocomplete Options"] >> text=${tagName}`).click(),
+    expect(page.locator(`[aria-label="Tag"]:has-text("${tagName}")`)).toBeVisible()
+  ]);
+  await page.waitForLoadState('networkidle');
+}
+
+/**
+ * Remove a tag to a notebook entry by providing a tagName.
+ * Reduces indeterminism by waiting until all necessary requests are completed.
+ * @param {import('@playwright/test').Page} page
+ * @param {string} tagName
+ */
+async function removeTagAndAwaitNetwork(page, tagName) {
+  await page.hover(`[aria-label="Tag"]:has-text("${tagName}")`);
+  await Promise.all([
+    page.locator(`[aria-label="Remove tag ${tagName}"]`).click(),
+    //With this pattern, we're awaiting the response but asserting on the request payload.
+    page.waitForResponse(
+      (resp) => resp.request().postData().includes(`"_deleted":true`) && resp.status() === 201
+    )
+  ]);
+  await expect(page.locator(`[aria-label="Tag"]:has-text("${tagName}")`)).toBeHidden();
+  await page.waitForLoadState('networkidle');
+}
diff --git a/e2e/tests/functional/plugins/notebook/restrictedNotebook.e2e.spec.js b/e2e/tests/functional/plugins/notebook/restrictedNotebook.e2e.spec.js
new file mode 100644
index 00000000000..9b66e044f27
--- /dev/null
+++ b/e2e/tests/functional/plugins/notebook/restrictedNotebook.e2e.spec.js
@@ -0,0 +1,197 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { openObjectTreeContextMenu } from '../../../../appActions.js';
+import {
+  dragAndDropEmbed,
+  enterTextEntry,
+  lockPage,
+  startAndAddRestrictedNotebookObject
+} from '../../../../helper/notebookUtils.js';
+import { expect, streamToString, test } from '../../../../pluginFixtures.js';
+
+const TEST_TEXT = 'Testing text for entries.';
+const TEST_TEXT_NAME = 'Test Page';
+
+test.describe('Restricted Notebook', () => {
+  let notebook;
+  test.beforeEach(async ({ page }) => {
+    notebook = await startAndAddRestrictedNotebookObject(page);
+  });
+
+  test('Can be renamed @addInit', async ({ page }) => {
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText(`${notebook.name}`);
+  });
+
+  test('Can be deleted if there are no locked pages @addInit', async ({ page }) => {
+    await openObjectTreeContextMenu(page, notebook.url);
+
+    const menuOptions = page.locator('.c-menu ul');
+    await expect.soft(menuOptions).toContainText('Remove');
+
+    const restrictedNotebookTreeObject = page.locator(`a:has-text("${notebook.name}")`);
+
+    // notebook tree object exists
+    expect.soft(await restrictedNotebookTreeObject.count()).toEqual(1);
+
+    // Click Remove Text
+    await page.locator('li[role="menuitem"]:has-text("Remove")').click();
+
+    // Click 'OK' on confirmation window and wait for save banner to appear
+    await Promise.all([
+      page.waitForNavigation(),
+      page.locator('button:has-text("OK")').click(),
+      page.waitForSelector('.c-message-banner__message')
+    ]);
+
+    // has been deleted
+    expect(await restrictedNotebookTreeObject.count()).toEqual(0);
+  });
+
+  test('Can be locked if at least one page has one entry @addInit', async ({ page }) => {
+    await enterTextEntry(page, TEST_TEXT);
+
+    const commitButton = page.locator('button:has-text("Commit Entries")');
+    expect(await commitButton.count()).toEqual(1);
+  });
+});
+
+test.describe('Restricted Notebook with at least one entry and with the page locked @addInit', () => {
+  let notebook;
+  test.beforeEach(async ({ page }) => {
+    notebook = await startAndAddRestrictedNotebookObject(page);
+    await enterTextEntry(page, TEST_TEXT);
+    await lockPage(page);
+
+    // open sidebar
+    await page.locator('button.c-notebook__toggle-nav-button').click();
+  });
+
+  test('Locked page should now be in a locked state @addInit @unstable', async ({
+    page
+  }, testInfo) => {
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(testInfo.project === 'chrome-beta', 'Test is unreliable on chrome-beta');
+    // main lock message on page
+    const lockMessage = page.locator(
+      'text=This page has been committed and cannot be modified or removed'
+    );
+    expect.soft(await lockMessage.count()).toEqual(1);
+
+    // lock icon on page in sidebar
+    const pageLockIcon = page.locator('ul.c-notebook__pages li div.icon-lock');
+    expect.soft(await pageLockIcon.count()).toEqual(1);
+
+    // no way to remove a restricted notebook with a locked page
+    await openObjectTreeContextMenu(page, notebook.url);
+    const menuOptions = page.locator('.c-menu ul');
+
+    await expect(menuOptions).not.toContainText('Remove');
+  });
+
+  test('Can still: add page, rename, add entry, delete unlocked pages @addInit', async ({
+    page
+  }) => {
+    // Add a new page to the section
+    await page.getByRole('button', { name: 'Add Page' }).click();
+    // Focus the new page by clicking it
+    await page.getByText('Unnamed Page').nth(1).click();
+    // Rename the new page
+    await page.getByText('Unnamed Page').nth(1).fill(TEST_TEXT_NAME);
+
+    // expect to be able to rename unlocked pages
+    const newPageElement = page.getByText(TEST_TEXT_NAME);
+    const newPageCount = await newPageElement.count();
+    await newPageElement.press('Enter'); // exit contenteditable state
+    expect.soft(newPageCount).toEqual(1);
+
+    // enter test text
+    await enterTextEntry(page, TEST_TEXT);
+
+    // expect new page to be lockable
+    const commitButton = page.getByRole('button', { name: ' Commit Entries' });
+    expect.soft(await commitButton.count()).toEqual(1);
+
+    // Click the context menu button for the new page
+    await page.getByTitle('Open context menu').click();
+    // Delete the page
+    await page.getByRole('menuitem', { name: 'Delete Page' }).click();
+    // Click OK button
+    await page.getByRole('button', { name: 'Ok', exact: true }).click();
+
+    // deleted page, should no longer exist
+    const deletedPageElement = page.getByText(TEST_TEXT_NAME);
+    expect(await deletedPageElement.count()).toEqual(0);
+  });
+});
+
+test.describe('Restricted Notebook with a page locked and with an embed @addInit', () => {
+  test.beforeEach(async ({ page }) => {
+    const notebook = await startAndAddRestrictedNotebookObject(page);
+    await dragAndDropEmbed(page, notebook);
+  });
+
+  test('Allows embeds to be deleted if page unlocked @addInit', async ({ page }) => {
+    // Click embed popup menu
+    await page.getByLabel('Notebook Entry').getByLabel('More actions').click();
+
+    const embedMenu = page.getByLabel('Super Menu');
+    await expect(embedMenu).toContainText('Remove This Embed');
+  });
+
+  test('Disallows embeds to be deleted if page locked @addInit', async ({ page }) => {
+    await lockPage(page);
+    // Click embed popup menu
+    await page.getByLabel('Notebook Entry').getByLabel('More actions').click();
+
+    const embedMenu = page.getByLabel('Super Menu');
+    await expect(embedMenu).not.toContainText('Remove This Embed');
+  });
+});
+
+test.describe('can export restricted notebook as text', () => {
+  test.beforeEach(async ({ page }) => {
+    await startAndAddRestrictedNotebookObject(page);
+  });
+
+  test('basic functionality ', async ({ page }) => {
+    await enterTextEntry(page, `Foo bar entry`);
+    // Click on 3 Dot Menu
+    await page.locator('button[title="More actions"]').click();
+    const downloadPromise = page.waitForEvent('download');
+
+    await page.getByRole('menuitem', { name: /Export Notebook as Text/ }).click();
+
+    await page.getByRole('button', { name: 'Save' }).click();
+
+    //Verify exported text as a stream of text instead of a file read from the filesystem
+    const download = await downloadPromise;
+    const readStream = await download.createReadStream();
+    const exportedText = await streamToString(readStream);
+    expect(exportedText).toContain('Foo bar entry');
+  });
+
+  test.fixme('can export multiple notebook entries as text ', async ({ page }) => {});
+  test.fixme('can export all notebook entry metdata', async ({ page }) => {});
+  test.fixme('can export all notebook tags', async ({ page }) => {});
+  test.fixme('can export all notebook snapshots', async ({ page }) => {});
+});
diff --git a/e2e/tests/functional/plugins/operatorStatus/operatorStatus.e2e.spec.js b/e2e/tests/functional/plugins/operatorStatus/operatorStatus.e2e.spec.js
new file mode 100644
index 00000000000..d2b75e8f560
--- /dev/null
+++ b/e2e/tests/functional/plugins/operatorStatus/operatorStatus.e2e.spec.js
@@ -0,0 +1,164 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*
+ * This test suite is dedicated to testing the operator status plugin.
+ */
+
+import { fileURLToPath } from 'url';
+
+import { expect, test } from '../../../../pluginFixtures.js';
+
+/*
+
+Precondition: Inject Example User, Operator Status Plugins
+Verify that user 1 sees updates from user/role 2 (Not possible without openmct-yamcs implementation)
+
+Clear Role Status of single user test
+STUB (test.fixme) Rolling through each
+
+*/
+
+test.describe('Operator Status', () => {
+  test.beforeEach(async ({ page }) => {
+    // FIXME: determine if plugins will be added to index.html or need to be injected
+    await page.addInitScript({
+      path: fileURLToPath(new URL('../../../../helper/addInitExampleUser.js', import.meta.url))
+    });
+    await page.addInitScript({
+      path: fileURLToPath(new URL('../../../../helper/addInitOperatorStatus.js', import.meta.url))
+    });
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    await expect(page.getByText('Select Role')).toBeVisible();
+    // Description should be empty https://github.com/nasa/openmct/issues/6978
+    await expect(page.locator('.c-message__action-text')).toBeHidden();
+    // set role
+    await page.getByRole('button', { name: 'Select', exact: true }).click();
+    // dismiss role confirmation popup
+    await page.getByRole('button', { name: 'Dismiss' }).click();
+  });
+
+  // verify that operator status is visible
+  test('operator status is visible and expands when clicked', async ({ page }) => {
+    await expect(page.locator('div[title="Set my operator status"]')).toBeVisible();
+    await page.locator('div[title="Set my operator status"]').click();
+
+    // expect default status to be 'GO'
+    await expect(page.locator('.c-status-poll-panel')).toBeVisible();
+  });
+
+  test('poll question indicator remains when blank poll set', async ({ page }) => {
+    await expect(page.locator('div[title="Set the current poll question"]')).toBeVisible();
+    await page.locator('div[title="Set the current poll question"]').click();
+    // set to blank
+    await page.getByRole('button', { name: 'Update' }).click();
+
+    // should still be visible
+    await expect(page.locator('div[title="Set the current poll question"]')).toBeVisible();
+  });
+
+  // Verify that user 1 sees updates from user/role 2 (Not possible without openmct-yamcs implementation)
+  test('operator status table reflects answered values', async ({ page }) => {
+    // user navigates to operator status poll
+    const statusPollIndicator = page.locator('div[title="Set my operator status"]');
+    await statusPollIndicator.click();
+
+    // get user role value
+    const userRole = page.locator('.c-status-poll-panel__user-role');
+    const userRoleText = await userRole.innerText();
+
+    // get selected status value
+    const selectStatus = page.locator('select[name="setStatus"]');
+    await selectStatus.selectOption({ index: 1 });
+    const initialStatusValue = await selectStatus.inputValue();
+
+    // open manage status poll
+    const manageStatusPollIndicator = page.locator('div[title="Set the current poll question"]');
+    await manageStatusPollIndicator.click();
+    // parse the table row values
+    const row = page.locator(`tr:has-text("${userRoleText}")`);
+    const rowValues = await row.innerText();
+    const rowValuesArr = rowValues.split('\t');
+    const COLUMN_STATUS_INDEX = 1;
+    // check initial set value matches status table
+    expect(rowValuesArr[COLUMN_STATUS_INDEX].toLowerCase()).toEqual(
+      initialStatusValue.toLowerCase()
+    );
+
+    // change user status
+    await statusPollIndicator.click();
+    // FIXME: might want to grab a dynamic option instead of arbitrary
+    await page.locator('select[name="setStatus"]').selectOption({ index: 2 });
+    const updatedStatusValue = await selectStatus.inputValue();
+    // verify user status is reflected in table
+    await manageStatusPollIndicator.click();
+
+    const updatedRow = page.locator(`tr:has-text("${userRoleText}")`);
+    const updatedRowValues = await updatedRow.innerText();
+    const updatedRowValuesArr = updatedRowValues.split('\t');
+
+    expect(updatedRowValuesArr[COLUMN_STATUS_INDEX].toLowerCase()).toEqual(
+      updatedStatusValue.toLowerCase()
+    );
+  });
+
+  test('clear poll button removes poll responses', async ({ page }) => {
+    // user navigates to operator status poll
+    const statusPollIndicator = page.locator('div[title="Set my operator status"]');
+    await statusPollIndicator.click();
+
+    // get user role value
+    const userRole = page.locator('.c-status-poll-panel__user-role');
+    const userRoleText = await userRole.innerText();
+
+    // get selected status value
+    const selectStatus = page.locator('select[name="setStatus"]');
+    // FIXME: might want to grab a dynamic option instead of arbitrary
+    await selectStatus.selectOption({ index: 1 });
+    const initialStatusValue = await selectStatus.inputValue();
+
+    // open manage status poll
+    const manageStatusPollIndicator = page.locator('div[title="Set the current poll question"]');
+    await manageStatusPollIndicator.click();
+    // parse the table row values
+    const row = page.locator(`tr:has-text("${userRoleText}")`);
+    const rowValues = await row.innerText();
+    const rowValuesArr = rowValues.split('\t');
+    const COLUMN_STATUS_INDEX = 1;
+    // check initial set value matches status table
+    expect(rowValuesArr[COLUMN_STATUS_INDEX].toLowerCase()).toEqual(
+      initialStatusValue.toLowerCase()
+    );
+
+    // clear the poll
+    await page.locator('button[title="Clear the previous poll question"]').click();
+
+    const updatedRow = page.locator(`tr:has-text("${userRoleText}")`);
+    const updatedRowValues = await updatedRow.innerText();
+    const updatedRowValuesArr = updatedRowValues.split('\t');
+    const UNSET_VALUE_LABEL = 'Not set';
+    expect(updatedRowValuesArr[COLUMN_STATUS_INDEX]).toEqual(UNSET_VALUE_LABEL);
+  });
+
+  test.fixme('iterate through all possible response values', async ({ page }) => {
+    // test all possible response values for the poll
+  });
+});
diff --git a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js
new file mode 100644
index 00000000000..55b97fc3fc4
--- /dev/null
+++ b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js
@@ -0,0 +1,163 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+Testsuite for plot autoscale.
+*/
+
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+test.use({
+  viewport: {
+    width: 1280,
+    height: 720
+  }
+});
+
+test.describe('Autoscale', () => {
+  test('User can set autoscale with a valid range @snapshot', async ({ page }) => {
+    //This is necessary due to the size of the test suite.
+    test.slow();
+
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    const overlayPlot = await createDomainObjectWithDefaults(page, {
+      name: 'Test Overlay Plot',
+      type: 'Overlay Plot'
+    });
+    await createDomainObjectWithDefaults(page, {
+      name: 'Test Sine Wave Generator',
+      type: 'Sine Wave Generator',
+      parent: overlayPlot.uuid
+    });
+
+    // Switch to fixed time, start: 2022-03-28 22:00:00.000 UTC, end: 2022-03-28 22:00:30.000 UTC
+    await page.goto(
+      `${overlayPlot.url}?tc.mode=fixed&tc.startBound=1648591200000&tc.endBound=1648591230000&tc.timeSystem=utc&view=plot-overlay`
+    );
+
+    await testYTicks(page, ['-1.00', '-0.50', '0.00', '0.50', '1.00']);
+
+    // enter edit mode
+    await page.getByLabel('Edit Object').click();
+
+    await page.getByRole('tab', { name: 'Config' }).click();
+    await turnOffAutoscale(page);
+
+    await setUserDefinedMinAndMax(page, '-2', '2');
+
+    // save
+    await page.click('button[title="Save"]');
+    await Promise.all([
+      page.getByRole('listitem', { name: 'Save and Finish Editing' }).click(),
+      //Wait for Save Banner to appear
+      page.waitForSelector('.c-message-banner__message')
+    ]);
+    //Wait until Save Banner is gone
+    await page.locator('.c-message-banner__close-button').click();
+    await page.waitForSelector('.c-message-banner__message', { state: 'detached' });
+
+    // Make sure that after turning off autoscale, the user entered range values are reflected in the ticks.
+    await testYTicks(page, [
+      '-2.00',
+      '-1.50',
+      '-1.00',
+      '-0.50',
+      '0.00',
+      '0.50',
+      '1.00',
+      '1.50',
+      '2.00'
+    ]);
+
+    const canvas = page.locator('canvas').nth(1);
+
+    await canvas.hover({ trial: true });
+    await expect(page.locator('.js-series-data-loaded')).toBeVisible();
+
+    expect
+      .soft(await canvas.screenshot())
+      .toMatchSnapshot('autoscale-canvas-prepan.png', { animations: 'disabled' });
+
+    //Alt Drag Start
+    await page.keyboard.down('Alt');
+
+    await canvas.dragTo(canvas, {
+      sourcePosition: {
+        x: 200,
+        y: 200
+      },
+      targetPosition: {
+        x: 400,
+        y: 400
+      }
+    });
+
+    //Alt Drag End
+    await page.keyboard.up('Alt');
+
+    // Ensure the drag worked.
+    await testYTicks(page, ['-0.50', '0.00', '0.50', '1.00', '1.50', '2.00', '2.50', '3.00']);
+
+    //Wait for canvas to stabilize.
+    await canvas.hover({ trial: true });
+
+    expect
+      .soft(await canvas.screenshot())
+      .toMatchSnapshot('autoscale-canvas-panned.png', { animations: 'disabled' });
+  });
+});
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function turnOffAutoscale(page) {
+  // uncheck autoscale
+  await page.getByRole('checkbox', { name: 'Auto scale' }).uncheck();
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ * @param {string} min
+ * @param {string} max
+ */
+async function setUserDefinedMinAndMax(page, min, max) {
+  // set minimum value
+  await page.getByRole('spinbutton').first().fill(min);
+  // set maximum value
+  await page.getByRole('spinbutton').nth(1).fill(max);
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function testYTicks(page, values) {
+  const yTicks = page.locator('.gl-plot-y-tick-label');
+  await page.locator('canvas >> nth=1').hover();
+  let promises = [yTicks.count().then((c) => expect(c).toBe(values.length))];
+
+  for (let i = 0, l = values.length; i < l; i += 1) {
+    promises.push(expect.soft(yTicks.nth(i)).toHaveText(values[i])); // eslint-disable-line
+  }
+
+  await Promise.all(promises);
+}
diff --git a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-panned-chrome-darwin b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-panned-chrome-darwin
new file mode 100644
index 00000000000..072218f3f39
Binary files /dev/null and b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-panned-chrome-darwin differ
diff --git a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-panned-chrome-darwin.png b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-panned-chrome-darwin.png
new file mode 100644
index 00000000000..abdb37b8dcd
Binary files /dev/null and b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-panned-chrome-darwin.png differ
diff --git a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-panned-chrome-linux.png b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-panned-chrome-linux.png
new file mode 100644
index 00000000000..7dda5c58437
Binary files /dev/null and b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-panned-chrome-linux.png differ
diff --git a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-darwin b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-darwin
new file mode 100644
index 00000000000..b6c7ba2fcf5
Binary files /dev/null and b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-darwin differ
diff --git a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-darwin.png b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-darwin.png
new file mode 100644
index 00000000000..148089b4bd1
Binary files /dev/null and b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-darwin.png differ
diff --git a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-linux.png b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-linux.png
new file mode 100644
index 00000000000..5fdfbe92e0b
Binary files /dev/null and b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-linux.png differ
diff --git a/e2e/tests/functional/plugins/plot/logPlot.e2e.spec.js b/e2e/tests/functional/plugins/plot/logPlot.e2e.spec.js
new file mode 100644
index 00000000000..20e44430349
--- /dev/null
+++ b/e2e/tests/functional/plugins/plot/logPlot.e2e.spec.js
@@ -0,0 +1,278 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+Tests to verify log plot functionality. Note this test suite if very much under active development and should not
+necessarily be used for reference when writing new tests in this area.
+*/
+
+import { setTimeConductorBounds } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Log plot tests', () => {
+  test('Log Plot ticks are functionally correct in regular and log mode and after refresh', async ({
+    page,
+    openmctConfig
+  }) => {
+    const { myItemsFolderName } = openmctConfig;
+    //Test is slow and should be split in the future
+    test.slow();
+
+    await makeOverlayPlot(page, myItemsFolderName);
+    await testRegularTicks(page);
+    await enableEditMode(page);
+    await page.getByRole('tab', { name: 'Config' }).click();
+    await enableLogMode(page);
+    await testLogTicks(page);
+    await disableLogMode(page);
+    await testRegularTicks(page);
+    await enableLogMode(page);
+    await testLogTicks(page);
+    await saveOverlayPlot(page);
+    await testLogTicks(page);
+  });
+
+  // Leaving test as 'TODO' for now.
+  // NOTE: Not eligible for community contributions.
+  test.fixme(
+    'Verify that log mode option is reflected in import/export JSON',
+    async ({ page, openmctConfig }) => {
+      const { myItemsFolderName } = openmctConfig;
+
+      await makeOverlayPlot(page, myItemsFolderName);
+      await enableEditMode(page);
+      await enableLogMode(page);
+      await saveOverlayPlot(page);
+
+      // TODO ...export, delete the overlay, then import it...
+
+      //await testLogTicks(page);
+
+      // TODO, the plot is slightly at different position that in the other test, so this fails.
+      // ...We can fix it by copying all steps from the first test...
+      // await testLogPlotPixels(page);
+    }
+  );
+});
+
+/**
+ * Makes an overlay plot with a sine wave generator and clicks on the overlay plot in the sidebar so it is the active thing displayed.
+ * @param {import('@playwright/test').Page} page
+ * @param {string} myItemsFolderName
+ */
+async function makeOverlayPlot(page, myItemsFolderName) {
+  // fresh page with time range from 2022-03-29 22:00:00.000Z to 2022-03-29 22:00:30.000Z
+  await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+  // Set a specific time range for consistency, otherwise it will change
+  // on every test to a range based on the current time.
+
+  const start = '2022-03-29 22:00:00.000Z';
+  const end = '2022-03-29 22:00:30.000Z';
+
+  await setTimeConductorBounds(page, start, end);
+
+  // create overlay plot
+
+  await page.locator('button.c-create-button').click();
+  await page.locator('li[role="menuitem"]:has-text("Overlay Plot")').click();
+  // Click OK button and wait for Navigate event
+  await Promise.all([
+    page.waitForLoadState(),
+    await page.getByRole('button', { name: 'Save' }).click(),
+    // Wait for Save Banner to appear
+    page.waitForSelector('.c-message-banner__message')
+  ]);
+
+  // save the overlay plot
+  await saveOverlayPlot(page);
+
+  // create a sinewave generator
+
+  await page.locator('button.c-create-button').click();
+  await page.locator('li[role="menuitem"]:has-text("Sine Wave Generator")').click();
+
+  // set amplitude to 6, offset 4, data rate 2 hz
+
+  await page.getByLabel('Amplitude').fill('6');
+  await page.getByLabel('Offset').fill('4');
+  await page.getByLabel('Data Rate (hz)').fill('2');
+
+  // Click OK button and wait for Navigate event
+  await Promise.all([
+    page.waitForLoadState(),
+    await page.getByRole('button', { name: 'Save' }).click(),
+    // Wait for Save Banner to appear
+    page.waitForSelector('.c-message-banner__message')
+  ]);
+
+  // click on overlay plot
+  await page.locator(`text=Open MCT ${myItemsFolderName} >> span`).nth(3).click();
+  await Promise.all([
+    page.waitForLoadState(),
+    page.locator('text=Unnamed Overlay Plot').first().click()
+  ]);
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function testRegularTicks(page) {
+  const yTicks = page.locator('.gl-plot-y-tick-label');
+  expect(await yTicks.count()).toBe(7);
+  await expect(yTicks.nth(0)).toHaveText('-2');
+  await expect(yTicks.nth(1)).toHaveText('0');
+  await expect(yTicks.nth(2)).toHaveText('2');
+  await expect(yTicks.nth(3)).toHaveText('4');
+  await expect(yTicks.nth(4)).toHaveText('6');
+  await expect(yTicks.nth(5)).toHaveText('8');
+  await expect(yTicks.nth(6)).toHaveText('10');
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function testLogTicks(page) {
+  const yTicks = page.locator('.gl-plot-y-tick-label');
+  expect(await yTicks.count()).toBe(9);
+  await expect(yTicks.nth(0)).toHaveText('-2.98');
+  await expect(yTicks.nth(1)).toHaveText('-1.51');
+  await expect(yTicks.nth(2)).toHaveText('-0.58');
+  await expect(yTicks.nth(3)).toHaveText('-0.00');
+  await expect(yTicks.nth(4)).toHaveText('0.58');
+  await expect(yTicks.nth(5)).toHaveText('1.51');
+  await expect(yTicks.nth(6)).toHaveText('2.98');
+  await expect(yTicks.nth(7)).toHaveText('5.31');
+  await expect(yTicks.nth(8)).toHaveText('9.00');
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function enableEditMode(page) {
+  // turn on edit mode
+  await page.getByRole('button', { name: 'Edit Object' }).click();
+  await expect(page.getByRole('button', { name: 'Save' })).toBeVisible();
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function enableLogMode(page) {
+  await expect(page.getByRole('checkbox', { name: 'Log mode' })).not.toBeChecked();
+  await page.getByRole('checkbox', { name: 'Log mode' }).check();
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function disableLogMode(page) {
+  await expect(page.getByRole('checkbox', { name: 'Log mode' })).toBeChecked();
+  await page.getByRole('checkbox', { name: 'Log mode' }).uncheck();
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function saveOverlayPlot(page) {
+  // save overlay plot
+  await page
+    .locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button')
+    .nth(1)
+    .click();
+
+  await Promise.all([
+    page.getByRole('listitem', { name: 'Save and Finish Editing' }).click(),
+    //Wait for Save Banner to appear
+    page.waitForSelector('.c-message-banner__message')
+  ]);
+  //Wait until Save Banner is gone
+  await page.locator('.c-message-banner__close-button').click();
+  await page.waitForSelector('.c-message-banner__message', { state: 'detached' });
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+// FIXME: Remove this eslint exception once implemented
+// eslint-disable-next-line no-unused-vars
+async function testLogPlotPixels(page) {
+  const pixelsMatch = await page.evaluate(async () => {
+    // TODO get canvas pixels at a few locations to make sure they're the correct color, to test that the plot comes out as expected.
+
+    await new Promise((r) => setTimeout(r, 5 * 1000));
+
+    // These are some pixels that should be blue points in the log plot.
+    // If the plot changes shape to an unexpected shape, this will
+    // likely fail, which is what we want.
+    //
+    // I found these pixels by pausing playwright in debug mode at this
+    // point, and using similar code as below to output the pixel data, then
+    // I logged those pixels here.
+    const expectedBluePixels = [
+      // TODO these pixel sets only work with the first test, but not the second test.
+
+      // [60, 35],
+      // [121, 125],
+      // [156, 377],
+      // [264, 73],
+      // [372, 186],
+      // [576, 73],
+      // [659, 439],
+      // [675, 423]
+
+      [60, 35],
+      [120, 125],
+      [156, 375],
+      [264, 73],
+      [372, 185],
+      [575, 72],
+      [659, 437],
+      [675, 421]
+    ];
+
+    // The first canvas in the DOM is the one that has the plot point
+    // icons (canvas 2d), which is the one we are testing. The second
+    // one in the DOM is the WebGL canvas with the line. (Why aren't
+    // they both WebGL?)
+    const canvas = document.querySelector('canvas');
+
+    const ctx = canvas.getContext('2d');
+
+    for (const pixel of expectedBluePixels) {
+      // XXX Possible optimization: call getImageData only once with
+      // area including all pixels to be tested.
+      const data = ctx.getImageData(pixel[0], pixel[1], 1, 1).data;
+
+      // #43b0ffff <-- openmct cyanish-blue with 100% opacity
+      // if (data[0] !== 0x43 || data[1] !== 0xb0 || data[2] !== 0xff || data[3] !== 0xff) {
+      if (data[0] === 0 && data[1] === 0 && data[2] === 0 && data[3] === 0) {
+        // If any pixel is empty, it means we didn't hit a plot point.
+        return false;
+      }
+    }
+
+    return true;
+  });
+
+  expect(pixelsMatch).toBe(true);
+}
diff --git a/e2e/tests/functional/plugins/plot/missingPlotObj.e2e.spec.js b/e2e/tests/functional/plugins/plot/missingPlotObj.e2e.spec.js
new file mode 100644
index 00000000000..bee8c83a2da
--- /dev/null
+++ b/e2e/tests/functional/plugins/plot/missingPlotObj.e2e.spec.js
@@ -0,0 +1,161 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+Tests to verify log plot functionality when objects are missing
+*/
+
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Handle missing object for plots', () => {
+  test('Displays empty div for missing stacked plot item @unstable', async ({
+    page,
+    browserName,
+    openmctConfig
+  }) => {
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(browserName === 'firefox', 'Firefox failing due to console events being missed');
+
+    const { myItemsFolderName } = openmctConfig;
+    const errorLogs = [];
+
+    page.on('console', (message) => {
+      if (message.type() === 'warning' && message.text().includes('Missing domain object')) {
+        errorLogs.push(message.text());
+      }
+    });
+
+    //Make stacked plot
+    await makeStackedPlot(page, myItemsFolderName);
+
+    //Gets local storage and deletes the last sine wave generator in the stacked plot
+    const localStorage = await page.evaluate(() => window.localStorage);
+    const parsedData = JSON.parse(localStorage.mct);
+    const keys = Object.keys(parsedData);
+    const lastKey = keys[keys.length - 1];
+
+    delete parsedData[lastKey];
+
+    //Sets local storage with missing object
+    await page.evaluate(`window.localStorage.setItem('mct', '${JSON.stringify(parsedData)}')`);
+
+    //Reloads page and clicks on stacked plot
+    await Promise.all([page.reload(), page.waitForLoadState('networkidle')]);
+
+    //Verify Main section is there on load
+    await expect
+      .soft(page.locator('.l-browse-bar__object-name'))
+      .toContainText('Unnamed Stacked Plot');
+
+    await page.locator(`text=Open MCT ${myItemsFolderName} >> span`).nth(3).click();
+    await Promise.all([
+      page.waitForNavigation(),
+      page.locator('text=Unnamed Stacked Plot').first().click()
+    ]);
+
+    //Check that there is only one stacked item plot with a plot, the missing one will be empty
+    await expect(page.locator('.c-plot--stacked-container:has(.gl-plot)')).toHaveCount(1);
+    //Verify that console.warn is thrown
+    expect(errorLogs).toHaveLength(1);
+  });
+});
+
+/**
+ * This is used the create a stacked plot object
+ * @private
+ */
+async function makeStackedPlot(page, myItemsFolderName) {
+  // fresh page with time range from 2022-03-29 22:00:00.000Z to 2022-03-29 22:00:30.000Z
+  await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+  // create stacked plot
+  await page.locator('button.c-create-button').click();
+  await page.locator('li[role="menuitem"]:has-text("Stacked Plot")').click();
+
+  await Promise.all([
+    page.waitForNavigation({ waitUntil: 'networkidle' }),
+    page.locator('button:has-text("OK")').click(),
+    //Wait for Save Banner to appear
+    page.waitForSelector('.c-message-banner__message')
+  ]);
+
+  // save the stacked plot
+  await saveStackedPlot(page);
+
+  // create a sinewave generator
+  await createSineWaveGenerator(page);
+
+  // click on stacked plot
+  await page.locator(`text=Open MCT ${myItemsFolderName} >> span`).nth(3).click();
+  await Promise.all([
+    page.waitForNavigation(),
+    page.locator('text=Unnamed Stacked Plot').first().click()
+  ]);
+
+  // create a second sinewave generator
+  await createSineWaveGenerator(page);
+
+  // click on stacked plot
+  await page.locator(`text=Open MCT ${myItemsFolderName} >> span`).nth(3).click();
+  await Promise.all([
+    page.waitForNavigation(),
+    page.locator('text=Unnamed Stacked Plot').first().click()
+  ]);
+}
+
+/**
+ * This is used to save a stacked plot object
+ * @private
+ */
+async function saveStackedPlot(page) {
+  // save stacked plot
+  await page
+    .locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button')
+    .nth(1)
+    .click();
+
+  await Promise.all([
+    page.locator('text=Save and Finish Editing').click(),
+    //Wait for Save Banner to appear
+    page.waitForSelector('.c-message-banner__message')
+  ]);
+  //Wait until Save Banner is gone
+  await page.locator('.c-message-banner__close-button').click();
+  await page.waitForSelector('.c-message-banner__message', { state: 'detached' });
+}
+
+/**
+ * This is used to create a sine wave generator object
+ * @private
+ */
+async function createSineWaveGenerator(page) {
+  //Create sine wave generator
+  await page.locator('button.c-create-button').click();
+  await page.locator('li[role="menuitem"]:has-text("Sine Wave Generator")').click();
+
+  await Promise.all([
+    page.waitForNavigation({ waitUntil: 'networkidle' }),
+    page.locator('button:has-text("OK")').click(),
+    //Wait for Save Banner to appear
+    page.waitForSelector('.c-message-banner__message')
+  ]);
+}
diff --git a/e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js b/e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js
new file mode 100644
index 00000000000..114d8beb792
--- /dev/null
+++ b/e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js
@@ -0,0 +1,415 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+Tests to verify log plot functionality. Note this test suite if very much under active development and should not
+necessarily be used for reference when writing new tests in this area.
+*/
+
+import {
+  createDomainObjectWithDefaults,
+  getCanvasPixels,
+  waitForPlotsToRender
+} from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Overlay Plot', () => {
+  let overlayPlot;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    overlayPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot'
+    });
+  });
+
+  test('Plot legend color is in sync with plot series color', async ({ page }) => {
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: overlayPlot.uuid
+    });
+
+    await page.goto(overlayPlot.url);
+
+    await page.getByRole('tab', { name: 'Config' }).click();
+
+    // navigate to plot series color palette
+    await page.click('.l-browse-bar__actions__edit');
+    await page.locator('li.c-tree__item.menus-to-left .c-disclosure-triangle').click();
+    await page.locator('.c-click-swatch--menu').click();
+    await page.locator('.c-palette__item[style="background: rgb(255, 166, 61);"]').click();
+    // gets color for swatch located in legend
+    const seriesColorSwatch = page.locator(
+      '.gl-plot-y-label-swatch-container > .plot-series-color-swatch'
+    );
+    await expect(seriesColorSwatch).toHaveCSS('background-color', 'rgb(255, 166, 61)');
+  });
+
+  test('Plot legend expands by default', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7403'
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: overlayPlot.uuid
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: overlayPlot.uuid
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: overlayPlot.uuid
+    });
+
+    await page.goto(overlayPlot.url);
+
+    await page.getByRole('tab', { name: 'Config' }).click();
+
+    // Assert that the legend is collapsed by default
+    await expect(page.getByLabel('Plot Legend Collapsed')).toBeVisible();
+    await expect(page.getByLabel('Plot Legend Expanded')).toBeHidden();
+    await expect(page.getByLabel('Expand by Default')).toHaveText('No');
+
+    expect(await page.getByLabel('Plot Legend Item').count()).toBe(3);
+
+    // Change the legend to expand by default
+    await page.getByLabel('Edit Object').click();
+    await page.getByLabel('Expand By Default').check();
+    await page.getByLabel('Save').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+    // Assert that the legend is now open
+    await expect(page.getByLabel('Plot Legend Collapsed')).toBeHidden();
+    await expect(page.getByLabel('Plot Legend Expanded')).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Name' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Value' })).toBeVisible();
+    await expect(page.getByLabel('Expand by Default')).toHaveText('Yes');
+    await expect(page.getByLabel('Plot Legend Item')).toHaveCount(3);
+
+    // Assert that the legend is expanded on page load
+    await page.reload();
+    await expect(page.getByLabel('Plot Legend Collapsed')).toBeHidden();
+    await expect(page.getByLabel('Plot Legend Expanded')).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Name' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Value' })).toBeVisible();
+    await expect(page.getByLabel('Expand by Default')).toHaveText('Yes');
+    await expect(page.getByLabel('Plot Legend Item')).toHaveCount(3);
+  });
+
+  test('Limit lines persist when series is moved to another Y Axis and on refresh', async ({
+    page
+  }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/6338'
+    });
+
+    const swgA = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: overlayPlot.uuid
+    });
+
+    await page.goto(overlayPlot.url);
+
+    // Assert that no limit lines are shown by default
+    await page.waitForSelector('.js-limit-area', { state: 'attached' });
+    expect(await page.locator('.c-plot-limit-line').count()).toBe(0);
+
+    // Enter edit mode
+    await page.getByLabel('Edit Object').click();
+
+    // Expand the "Sine Wave Generator" plot series options and enable limit lines
+    await page.getByRole('tab', { name: 'Config' }).click();
+    await page
+      .getByRole('list', { name: 'Plot Series Properties' })
+      .locator('span')
+      .first()
+      .click();
+    await page
+      .getByRole('list', { name: 'Plot Series Properties' })
+      .locator('[title="Display limit lines"]~div input')
+      .check();
+
+    await assertLimitLinesExistAndAreVisible(page);
+
+    // Save (exit edit mode)
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    await assertLimitLinesExistAndAreVisible(page);
+
+    await page.reload();
+
+    await assertLimitLinesExistAndAreVisible(page);
+
+    // Enter edit mode
+    await page.getByLabel('Edit Object').click();
+
+    await page.getByRole('tab', { name: 'Elements' }).click();
+
+    // Drag Sine Wave Generator series from Y Axis 1 into Y Axis 2
+    await page
+      .locator(`#inspector-elements-tree >> text=${swgA.name}`)
+      .dragTo(page.locator('[aria-label="Element Item Group Y Axis 2"]'));
+
+    await assertLimitLinesExistAndAreVisible(page);
+
+    // Save (exit edit mode)
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    await assertLimitLinesExistAndAreVisible(page);
+
+    await page.reload();
+
+    await assertLimitLinesExistAndAreVisible(page);
+  });
+
+  test('Limit lines adjust when series is resized', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/6987'
+    });
+    // Create an Overlay Plot with a default SWG
+    overlayPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot'
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: overlayPlot.uuid
+    });
+
+    await page.goto(overlayPlot.url);
+
+    // Assert that no limit lines are shown by default
+    await page.waitForSelector('.js-limit-area', { state: 'attached' });
+    expect(await page.locator('.c-plot-limit-line').count()).toBe(0);
+
+    // Enter edit mode
+    await page.getByLabel('Edit Object').click();
+
+    // Expand the "Sine Wave Generator" plot series options and enable limit lines
+    await page.getByRole('tab', { name: 'Config' }).click();
+    await page
+      .getByRole('list', { name: 'Plot Series Properties' })
+      .locator('span')
+      .first()
+      .click();
+    await page
+      .getByRole('list', { name: 'Plot Series Properties' })
+      .getByRole('checkbox', { name: 'Limit lines' })
+      .check();
+
+    await assertLimitLinesExistAndAreVisible(page);
+
+    // Save (exit edit mode)
+    await page.locator('button[title="Save"]').click();
+    await page.locator('li[title="Save and Finish Editing"]').click();
+
+    const initialCoords = await assertLimitLinesExistAndAreVisible(page);
+    // Resize the chart container by showing the snapshot pane.
+    await page.getByLabel('Show Snapshots').click();
+
+    const newCoords = await assertLimitLinesExistAndAreVisible(page);
+    // We just need to know that the first limit line redrew somewhere lower than the initial y position.
+    expect(newCoords.y).toBeGreaterThan(initialCoords.y);
+  });
+
+  test('The elements pool supports dragging series into multiple y-axis buckets', async ({
+    page
+  }) => {
+    const swgA = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: overlayPlot.uuid
+    });
+    const swgB = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: overlayPlot.uuid
+    });
+    const swgC = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: overlayPlot.uuid
+    });
+    const swgD = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: overlayPlot.uuid
+    });
+    const swgE = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: overlayPlot.uuid
+    });
+
+    await page.goto(overlayPlot.url);
+    await page.getByLabel('Edit Object').click();
+
+    await page.getByRole('tab', { name: 'Elements' }).click();
+
+    // Drag swg a, c, e into Y Axis 2
+    await page
+      .locator(`#inspector-elements-tree >> text=${swgA.name}`)
+      .dragTo(page.locator('[aria-label="Element Item Group Y Axis 2"]'));
+    await page
+      .locator(`#inspector-elements-tree >> text=${swgC.name}`)
+      .dragTo(page.locator('[aria-label="Element Item Group Y Axis 2"]'));
+    await page
+      .locator(`#inspector-elements-tree >> text=${swgE.name}`)
+      .dragTo(page.locator('[aria-label="Element Item Group Y Axis 2"]'));
+
+    // Assert that Y Axis 1 and Y Axis 2 property groups are visible only
+    await page.getByRole('tab', { name: 'Config' }).click();
+
+    const yAxis1PropertyGroup = page.locator('[aria-label="Y Axis Properties"]');
+    const yAxis2PropertyGroup = page.locator('[aria-label="Y Axis 2 Properties"]');
+    const yAxis3PropertyGroup = page.locator('[aria-label="Y Axis 3 Properties"]');
+
+    await expect(yAxis1PropertyGroup).toBeVisible();
+    await expect(yAxis2PropertyGroup).toBeVisible();
+    await expect(yAxis3PropertyGroup).toBeHidden();
+
+    const yAxis1Group = page.getByLabel('Y Axis 1');
+    const yAxis2Group = page.getByLabel('Y Axis 2');
+    const yAxis3Group = page.getByLabel('Y Axis 3');
+
+    await page.getByRole('tab', { name: 'Elements' }).click();
+
+    // Drag swg b into Y Axis 3
+    await page
+      .locator(`#inspector-elements-tree >> text=${swgB.name}`)
+      .dragTo(page.locator('[aria-label="Element Item Group Y Axis 3"]'));
+
+    // Assert that all Y Axis property groups are visible
+    await page.getByRole('tab', { name: 'Config' }).click();
+
+    await expect(yAxis1PropertyGroup).toBeVisible();
+    await expect(yAxis2PropertyGroup).toBeVisible();
+    await expect(yAxis3PropertyGroup).toBeVisible();
+
+    // Verify that the elements are in the correct buckets and in the correct order
+    await page.getByRole('tab', { name: 'Elements' }).click();
+
+    expect(yAxis1Group.getByRole('listitem', { name: swgD.name })).toBeTruthy();
+    expect(yAxis1Group.getByRole('listitem').nth(0).getByText(swgD.name)).toBeTruthy();
+    expect(yAxis2Group.getByRole('listitem', { name: swgE.name })).toBeTruthy();
+    expect(yAxis2Group.getByRole('listitem').nth(0).getByText(swgE.name)).toBeTruthy();
+    expect(yAxis2Group.getByRole('listitem', { name: swgC.name })).toBeTruthy();
+    expect(yAxis2Group.getByRole('listitem').nth(1).getByText(swgC.name)).toBeTruthy();
+    expect(yAxis2Group.getByRole('listitem', { name: swgA.name })).toBeTruthy();
+    expect(yAxis2Group.getByRole('listitem').nth(2).getByText(swgA.name)).toBeTruthy();
+    expect(yAxis3Group.getByRole('listitem', { name: swgB.name })).toBeTruthy();
+    expect(yAxis3Group.getByRole('listitem').nth(0).getByText(swgB.name)).toBeTruthy();
+  });
+
+  test.fixme(
+    'Clicking on an item in the elements pool brings up the plot preview with data points',
+    async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/nasa/openmct/issues/7421'
+      });
+
+      const swgA = await createDomainObjectWithDefaults(page, {
+        type: 'Sine Wave Generator',
+        parent: overlayPlot.uuid
+      });
+
+      await page.goto(overlayPlot.url);
+      // Wait for plot series data to load and be drawn
+      await waitForPlotsToRender(page);
+      await page.getByLabel('Edit Object').click();
+
+      await page.getByRole('tab', { name: 'Elements' }).click();
+
+      await page.locator(`#inspector-elements-tree >> text=${swgA.name}`).click();
+      const plotPixels = await getCanvasPixels(page, '.js-overlay canvas');
+      const plotPixelSize = plotPixels.length;
+      expect(plotPixelSize).toBeGreaterThan(0);
+    }
+  );
+
+  test('Can remove an item via the elements pool action menu', async ({ page }) => {
+    const swgA = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: overlayPlot.uuid
+    });
+    const swgB = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: overlayPlot.uuid
+    });
+
+    await page.goto(overlayPlot.url);
+    // Wait for plot series data to load and be drawn
+    await waitForPlotsToRender(page);
+    await page.getByLabel('Edit Object').click();
+
+    await page.getByRole('tab', { name: 'Elements' }).click();
+
+    const swgAElementsPoolItem = page.getByLabel(`Preview ${swgA.name}`);
+    await expect(swgAElementsPoolItem).toBeVisible();
+    await swgAElementsPoolItem.click({ button: 'right' });
+    await page.getByRole('menuitem', { name: 'Remove' }).click();
+    await page.getByRole('button', { name: 'OK', exact: true }).click();
+    await expect(swgAElementsPoolItem).toBeHidden();
+
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7530'
+    });
+    await test.step('Verify that the legend is correct after removing a series', async () => {
+      await page.getByLabel('Plot Canvas').hover();
+      await page.mouse.move(50, 0, {
+        steps: 10
+      });
+      await expect(page.getByLabel('Plot Legend Item')).toHaveCount(1);
+      await expect(page.getByLabel(`Plot Legend Item for ${swgA.name}`)).toBeHidden();
+      await expect(page.getByLabel(`Plot Legend Item for ${swgB.name}`)).toBeVisible();
+    });
+  });
+});
+
+/**
+ * Asserts that limit lines exist and are visible
+ * @param {import('@playwright/test').Page} page
+ */
+async function assertLimitLinesExistAndAreVisible(page) {
+  // Wait for plot series data to load
+  await waitForPlotsToRender(page);
+  // Wait for limit lines to be created
+  await page.waitForSelector('.js-limit-area', { state: 'attached' });
+  // There should be 10 limit lines created by default
+  await expect(page.locator('.c-plot-limit-line')).toHaveCount(10);
+  const limitLineCount = await page.locator('.c-plot-limit-line').count();
+  for (let i = 0; i < limitLineCount; i++) {
+    await expect(page.locator('.c-plot-limit-line').nth(i)).toBeVisible();
+  }
+
+  const firstLimitLineCoords = await page.locator('.c-plot-limit-line').first().boundingBox();
+  return firstLimitLineCoords;
+}
diff --git a/e2e/tests/functional/plugins/plot/plotRendering.e2e.spec.js b/e2e/tests/functional/plugins/plot/plotRendering.e2e.spec.js
new file mode 100644
index 00000000000..31b1b030789
--- /dev/null
+++ b/e2e/tests/functional/plugins/plot/plotRendering.e2e.spec.js
@@ -0,0 +1,98 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+ * This test suite is dedicated to testing the rendering and interaction of plots.
+ *
+ */
+
+import { createDomainObjectWithDefaults, getCanvasPixels } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Plot Rendering', () => {
+  let sineWaveGeneratorObject;
+
+  test.beforeEach(async ({ page }) => {
+    // Open a browser, navigate to the main page, and wait until all networkevents to resolve
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    sineWaveGeneratorObject = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator'
+    });
+  });
+
+  test('Plots do not re-request data when a plot is clicked', async ({ page }) => {
+    // Navigate to Sine Wave Generator
+    await page.goto(sineWaveGeneratorObject.url);
+    // Click on the plot canvas
+    await page.locator('canvas').nth(1).click();
+    // No request was made to get historical data
+    const createMineFolderRequests = [];
+    page.on('request', (req) => {
+      createMineFolderRequests.push(req);
+    });
+    expect(createMineFolderRequests.length).toEqual(0);
+  });
+
+  test.fixme('Plot is rendered when infinity values exist', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7421'
+    });
+    // Edit Plot
+    await editSineWaveToUseInfinityOption(page, sineWaveGeneratorObject);
+
+    //Get pixel data from Canvas
+    const plotPixels = await getCanvasPixels(page, 'canvas');
+    const plotPixelSize = plotPixels.length;
+    expect(plotPixelSize).toBeGreaterThan(0);
+  });
+});
+
+/**
+ * This function edits a sine wave generator with the default options and enables the infinity values option.
+ *
+ * @param {import('@playwright/test').Page} page
+ * @param {import('../../../../appActions').CreateObjectInfo} sineWaveGeneratorObject
+ * @returns {Promise<CreatedObjectInfo>} An object containing information about the edited domain object.
+ */
+async function editSineWaveToUseInfinityOption(page, sineWaveGeneratorObject) {
+  await page.goto(sineWaveGeneratorObject.url);
+  // Edit SWG properties to include infinity values
+  await page.locator('[title="More actions"]').click();
+  await page.locator('[title="Edit properties of this object."]').click();
+  await page
+    .getByRole('switch', {
+      name: 'Include Infinity Values'
+    })
+    .check();
+
+  await page
+    .getByRole('button', {
+      name: 'Save'
+    })
+    .click();
+
+  // FIXME: Changes to SWG properties should be reflected on save, but they're not?
+  // Thus, navigate away and back to the object.
+  await page.goto('./#/browse/mine');
+  await page.goto(sineWaveGeneratorObject.url);
+}
diff --git a/e2e/tests/functional/plugins/plot/previews.e2e.spec.js b/e2e/tests/functional/plugins/plot/previews.e2e.spec.js
new file mode 100644
index 00000000000..5d6211c3df7
--- /dev/null
+++ b/e2e/tests/functional/plugins/plot/previews.e2e.spec.js
@@ -0,0 +1,88 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Plots work in Previews', () => {
+  test('We can preview plot in display layouts', async ({ page, openmctConfig }) => {
+    const { myItemsFolderName } = openmctConfig;
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    // Create a Sinewave Generator
+    const sineWaveObject = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator'
+    });
+    // Create a Display Layout
+    await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Test Display Layout'
+    });
+    // Edit Display Layout
+    await page.getByLabel('Edit Object').click();
+
+    // Expand the 'My Items' folder in the left tree
+    await page.getByLabel(`Expand ${myItemsFolderName} folder`).click();
+    // Add the Sine Wave Generator to the Display Layout and save changes
+    const treePane = page.getByRole('tree', {
+      name: 'Main Tree'
+    });
+    const sineWaveGeneratorTreeItem = treePane.getByRole('treeitem', {
+      name: new RegExp(sineWaveObject.name)
+    });
+    const layoutGridHolder = page.getByLabel('Test Display Layout Layout Grid');
+    await sineWaveGeneratorTreeItem.dragTo(layoutGridHolder);
+    await page.getByLabel('Save').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // right click on the plot and select view large
+    await page.getByLabel('Sine', { exact: true }).click({ button: 'right' });
+    await page.getByLabel('View Historical Data').click();
+    await expect(page.getByLabel('Preview Container').getByLabel('Plot Canvas')).toBeVisible();
+    await page.getByRole('button', { name: 'Close' }).click();
+    await page.getByLabel('Expand Test Display Layout layout').click();
+
+    // change to a plot and ensure embiggen works
+    await page.getByLabel('Edit Object').click();
+    await page.getByLabel('Move Sub-object Frame').click();
+    await page.getByText('View type').click();
+    await page.getByText('Overlay Plot').click();
+    await page.getByLabel('Save').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+    await expect(
+      page.getByLabel('Test Display Layout Layout', { exact: true }).getByLabel('Plot Canvas')
+    ).toBeVisible();
+    await expect(page.getByLabel('Preview Container')).toBeHidden();
+    await page.getByLabel('Large View').click();
+    await expect(page.getByLabel('Preview Container').getByLabel('Plot Canvas')).toBeVisible();
+    await page.getByRole('button', { name: 'Close' }).click();
+
+    // get last sinewave tree item (in the display layout)
+    await page
+      .getByRole('treeitem', { name: /Sine Wave Generator/ })
+      .locator('a')
+      .last()
+      .click({ button: 'right' });
+    await page.getByLabel('View', { exact: true }).click();
+    await expect(page.getByLabel('Preview Container').getByLabel('Plot Canvas')).toBeVisible();
+    await page.getByRole('button', { name: 'Close' }).click();
+  });
+});
diff --git a/e2e/tests/functional/plugins/plot/scatterPlot.e2e.spec.js b/e2e/tests/functional/plugins/plot/scatterPlot.e2e.spec.js
new file mode 100644
index 00000000000..c392c26095f
--- /dev/null
+++ b/e2e/tests/functional/plugins/plot/scatterPlot.e2e.spec.js
@@ -0,0 +1,107 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+ * This test suite is dedicated to testing the Scatter Plot component.
+ */
+
+import { v4 as uuid } from 'uuid';
+
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Scatter Plot', () => {
+  let scatterPlot;
+
+  test.beforeEach(async ({ page }) => {
+    // Open a browser, navigate to the main page, and wait until all networkevents to resolve
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create the Scatter Plot
+    scatterPlot = await createDomainObjectWithDefaults(page, { type: 'Scatter Plot' });
+  });
+
+  test('Can add and remove telemetry sources', async ({ page }) => {
+    // Create a sine wave generator within the scatter plot
+    const swg1 = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: `swg-${uuid()}`,
+      parent: scatterPlot.uuid
+    });
+
+    // Navigate to the scatter plot and verify that
+    // the SWG appears in the elements pool
+    await page.goto(scatterPlot.url);
+    await page.getByLabel('Edit Object').click();
+    await page.getByRole('tab', { name: 'Elements' }).click();
+    await expect.soft(page.locator(`#inspector-elements-tree >> text=${swg1.name}`)).toBeVisible();
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Create another sine wave generator within the scatter plot
+    const swg2 = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: `swg-${uuid()}`,
+      parent: scatterPlot.uuid
+    });
+
+    // Verify that the 'Replace telemetry source' modal appears and accept it
+    await expect
+      .soft(
+        page.locator(
+          'text=This action will replace the current telemetry source. Do you want to continue?'
+        )
+      )
+      .toBeVisible();
+    await page.click('text=Ok');
+
+    // Navigate to the scatter plot and verify that the new SWG
+    // appears in the elements pool and the old one is gone
+    await page.goto(scatterPlot.url);
+    await page.getByLabel('Edit Object').click();
+
+    // Click the "Elements" tab
+    await page.getByRole('tab', { name: 'Elements' }).click();
+    await expect.soft(page.locator(`#inspector-elements-tree >> text=${swg1.name}`)).toBeHidden();
+    await expect.soft(page.locator(`#inspector-elements-tree >> text=${swg2.name}`)).toBeVisible();
+    await page.getByRole('button', { name: 'Save' }).click();
+
+    // Right click on the new SWG in the elements pool and delete it
+    await page.locator(`#inspector-elements-tree >> text=${swg2.name}`).click({
+      button: 'right'
+    });
+    await page.locator('li[title="Remove this object from its containing object."]').click();
+
+    // Verify that the 'Remove object' confirmation modal appears and accept it
+    await expect
+      .soft(
+        page.locator(
+          'text=Warning! This action will remove this object. Are you sure you want to continue?'
+        )
+      )
+      .toBeVisible();
+    await page.click('text=Ok');
+
+    // Verify that the elements pool shows no elements
+    await expect(page.locator('text="No contained elements"')).toBeVisible();
+  });
+});
diff --git a/e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js b/e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js
new file mode 100644
index 00000000000..3cffb3b28c4
--- /dev/null
+++ b/e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js
@@ -0,0 +1,327 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+Tests to verify log plot functionality. Note this test suite if very much under active development and should not
+necessarily be used for reference when writing new tests in this area.
+*/
+
+import { createDomainObjectWithDefaults, waitForPlotsToRender } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Stacked Plot', () => {
+  let stackedPlot;
+  let swgA;
+  let swgB;
+  let swgC;
+
+  test.beforeEach(async ({ page }) => {
+    // Open a browser, navigate to the main page, and wait until all networkevents to resolve
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    stackedPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Stacked Plot'
+    });
+
+    swgA = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: stackedPlot.uuid
+    });
+    swgB = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: stackedPlot.uuid
+    });
+    swgC = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: stackedPlot.uuid
+    });
+  });
+
+  test('Using the remove action removes the correct plot', async ({ page }) => {
+    const swgAElementsPoolItem = page
+      .locator('#inspector-elements-tree')
+      .locator('.c-object-label', { hasText: swgA.name });
+    const swgBElementsPoolItem = page
+      .locator('#inspector-elements-tree')
+      .locator('.c-object-label', { hasText: swgB.name });
+    const swgCElementsPoolItem = page
+      .locator('#inspector-elements-tree')
+      .locator('.c-object-label', { hasText: swgC.name });
+
+    await page.goto(stackedPlot.url);
+
+    await page.getByLabel('Edit Object').click();
+
+    await page.getByRole('tab', { name: 'Elements' }).click();
+
+    await swgBElementsPoolItem.click({ button: 'right' });
+    await page
+      .getByRole('menuitem')
+      .filter({ hasText: /Remove/ })
+      .click();
+    await page.getByRole('button').filter({ hasText: 'OK' }).click();
+
+    await expect(page.locator('#inspector-elements-tree .js-elements-pool__item')).toHaveCount(2);
+
+    // Confirm that the elements pool contains the items we expect
+    await expect(swgAElementsPoolItem).toHaveCount(1);
+    await expect(swgBElementsPoolItem).toHaveCount(0);
+    await expect(swgCElementsPoolItem).toHaveCount(1);
+  });
+
+  test('Can reorder Stacked Plot items', async ({ page }) => {
+    const swgAElementsPoolItem = page
+      .locator('#inspector-elements-tree')
+      .locator('.c-object-label', { hasText: swgA.name });
+    const swgBElementsPoolItem = page
+      .locator('#inspector-elements-tree')
+      .locator('.c-object-label', { hasText: swgB.name });
+    const swgCElementsPoolItem = page
+      .locator('#inspector-elements-tree')
+      .locator('.c-object-label', { hasText: swgC.name });
+
+    await page.goto(stackedPlot.url);
+
+    await page.getByLabel('Edit Object').click();
+
+    await page.getByRole('tab', { name: 'Elements' }).click();
+
+    const stackedPlotItem1 = page.locator('.c-plot--stacked-container').nth(0);
+    const stackedPlotItem2 = page.locator('.c-plot--stacked-container').nth(1);
+    const stackedPlotItem3 = page.locator('.c-plot--stacked-container').nth(2);
+
+    // assert initial plot order - [swgA, swgB, swgC]
+    await expect(stackedPlotItem1).toHaveAttribute('aria-label', `Stacked Plot Item ${swgA.name}`);
+    await expect(stackedPlotItem2).toHaveAttribute('aria-label', `Stacked Plot Item ${swgB.name}`);
+    await expect(stackedPlotItem3).toHaveAttribute('aria-label', `Stacked Plot Item ${swgC.name}`);
+
+    // Drag and drop to reorder - [swgB, swgA, swgC]
+    await swgBElementsPoolItem.dragTo(swgAElementsPoolItem);
+
+    // assert plot order after reorder - [swgB, swgA, swgC]
+    await expect(stackedPlotItem1).toHaveAttribute('aria-label', `Stacked Plot Item ${swgB.name}`);
+    await expect(stackedPlotItem2).toHaveAttribute('aria-label', `Stacked Plot Item ${swgA.name}`);
+    await expect(stackedPlotItem3).toHaveAttribute('aria-label', `Stacked Plot Item ${swgC.name}`);
+
+    // Drag and drop to reorder - [swgB, swgC, swgA]
+    await swgCElementsPoolItem.dragTo(swgAElementsPoolItem);
+
+    // assert plot order after second reorder - [swgB, swgC, swgA]
+    await expect(stackedPlotItem1).toHaveAttribute('aria-label', `Stacked Plot Item ${swgB.name}`);
+    await expect(stackedPlotItem2).toHaveAttribute('aria-label', `Stacked Plot Item ${swgC.name}`);
+    await expect(stackedPlotItem3).toHaveAttribute('aria-label', `Stacked Plot Item ${swgA.name}`);
+
+    // collapse inspector
+    await page.locator('.l-shell__pane-inspector .l-pane__collapse-button').click();
+
+    // Save (exit edit mode)
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // assert plot order persists after save - [swgB, swgC, swgA]
+    await expect(stackedPlotItem1).toHaveAttribute('aria-label', `Stacked Plot Item ${swgB.name}`);
+    await expect(stackedPlotItem2).toHaveAttribute('aria-label', `Stacked Plot Item ${swgC.name}`);
+    await expect(stackedPlotItem3).toHaveAttribute('aria-label', `Stacked Plot Item ${swgA.name}`);
+  });
+
+  test('Selecting a child plot while in browse and edit modes shows its properties in the inspector', async ({
+    page
+  }) => {
+    await page.goto(stackedPlot.url);
+
+    await page.getByRole('tab', { name: 'Config' }).click();
+
+    // Click on the 1st plot
+    await page.locator(`[aria-label="Stacked Plot Item ${swgA.name}"] canvas`).nth(1).click();
+
+    // Assert that the inspector shows the Y Axis properties for swgA
+    await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
+      'Plot Series'
+    );
+    await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
+    await expect(
+      page.locator('[aria-label="Plot Series Properties"] .c-object-label')
+    ).toContainText(swgA.name);
+
+    // Click on the 2nd plot
+    await page.locator(`[aria-label="Stacked Plot Item ${swgB.name}"] canvas`).nth(1).click();
+
+    // Assert that the inspector shows the Y Axis properties for swgB
+    await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
+      'Plot Series'
+    );
+    await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
+    await expect(
+      page.locator('[aria-label="Plot Series Properties"] .c-object-label')
+    ).toContainText(swgB.name);
+
+    // Click on the 3rd plot
+    await page.locator(`[aria-label="Stacked Plot Item ${swgC.name}"] canvas`).nth(1).click();
+
+    // Assert that the inspector shows the Y Axis properties for swgC
+    await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
+      'Plot Series'
+    );
+    await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
+    await expect(
+      page.locator('[aria-label="Plot Series Properties"] .c-object-label')
+    ).toContainText(swgC.name);
+
+    // Go into edit mode
+    await page.getByLabel('Edit Object').click();
+
+    await page.getByRole('tab', { name: 'Config' }).click();
+
+    // Click on canvas for the 1st plot
+    await page.locator(`[aria-label="Stacked Plot Item ${swgA.name}"]`).click();
+
+    // Assert that the inspector shows the Y Axis properties for swgA
+    await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
+      'Plot Series'
+    );
+    await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
+    await expect(
+      page.locator('[aria-label="Plot Series Properties"] .c-object-label')
+    ).toContainText(swgA.name);
+
+    //Click on canvas for the 2nd plot
+    await page.locator(`[aria-label="Stacked Plot Item ${swgB.name}"]`).click();
+
+    // Assert that the inspector shows the Y Axis properties for swgB
+    await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
+      'Plot Series'
+    );
+    await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
+    await expect(
+      page.locator('[aria-label="Plot Series Properties"] .c-object-label')
+    ).toContainText(swgB.name);
+
+    //Click on canvas for the 3rd plot
+    await page.locator(`[aria-label="Stacked Plot Item ${swgC.name}"]`).click();
+
+    // Assert that the inspector shows the Y Axis properties for swgC
+    await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
+      'Plot Series'
+    );
+    await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
+    await expect(
+      page.locator('[aria-label="Plot Series Properties"] .c-object-label')
+    ).toContainText(swgC.name);
+  });
+
+  test('the legend toggles between aggregate and per child', async ({ page }) => {
+    await page.goto(stackedPlot.url);
+
+    await waitForPlotsToRender(page);
+
+    // Go into edit mode
+    await page.getByLabel('Edit Object').click();
+
+    await page.getByRole('tab', { name: 'Config' }).click();
+
+    let legendProperties = await page.locator('[aria-label="Legend Properties"]');
+    await legendProperties.locator('[title="Display legends per sub plot."]~div input').uncheck();
+
+    await assertAggregateLegendIsVisible(page);
+
+    // Save (exit edit mode)
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    await waitForPlotsToRender(page);
+
+    await assertAggregateLegendIsVisible(page);
+
+    await page.reload();
+
+    await waitForPlotsToRender(page);
+
+    await assertAggregateLegendIsVisible(page);
+  });
+
+  test('can toggle between aggregate and per child legends', async ({ page }) => {
+    // make some an overlay plot
+    const overlayPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot',
+      parent: stackedPlot.uuid
+    });
+
+    // make some SWGs for the overlay plot
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: overlayPlot.uuid
+    });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: overlayPlot.uuid
+    });
+
+    await page.goto(stackedPlot.url);
+    await page.getByLabel('Edit Object').click();
+    await page.getByRole('tab', { name: 'Config' }).click();
+    await page.getByLabel('Inspector Views').getByRole('checkbox').uncheck();
+    await page.getByLabel('Expand By Default').check();
+    await page.getByLabel('Save').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+    await expect(page.getByLabel('Plot Legend Expanded')).toHaveCount(1);
+    await expect(page.getByLabel('Plot Legend Item')).toHaveCount(5);
+
+    // reload and ensure the legend is still expanded
+    await page.reload();
+    await expect(page.getByLabel('Plot Legend Expanded')).toHaveCount(1);
+    await expect(page.getByLabel('Plot Legend Item')).toHaveCount(5);
+
+    // change to collapsed by default
+    await page.getByLabel('Edit Object').click();
+    await page.getByLabel('Expand By Default').uncheck();
+    await page.getByLabel('Save').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+    await expect(page.getByLabel('Plot Legend Collapsed')).toHaveCount(1);
+    await expect(page.getByLabel('Plot Legend Item')).toHaveCount(5);
+
+    // change it to individual legends
+    await page.getByLabel('Edit Object').click();
+    await page.getByRole('tab', { name: 'Config' }).click();
+    await page.getByLabel('Show Legends For Children').check();
+    await page.getByLabel('Save').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+    await expect(page.getByLabel('Plot Legend Collapsed')).toHaveCount(4);
+    await expect(page.getByLabel('Plot Legend Item')).toHaveCount(5);
+  });
+});
+
+/**
+ * Asserts that aggregate stacked plot legend is visible
+ * @param {import('@playwright/test').Page} page
+ */
+async function assertAggregateLegendIsVisible(page) {
+  // Wait for plot series data to load
+  await waitForPlotsToRender(page);
+  // Wait for plot legend to be shown
+  await page.waitForSelector('.js-stacked-plot-legend', { state: 'attached' });
+  // There should be 3 legend items
+  expect(
+    await page
+      .locator('.js-stacked-plot-legend .c-plot-legend__wrapper div.plot-legend-item')
+      .count()
+  ).toBe(3);
+}
diff --git a/e2e/tests/functional/plugins/plot/tagging.e2e.spec.js b/e2e/tests/functional/plugins/plot/tagging.e2e.spec.js
new file mode 100644
index 00000000000..51c2bbbd1fa
--- /dev/null
+++ b/e2e/tests/functional/plugins/plot/tagging.e2e.spec.js
@@ -0,0 +1,157 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+Tests to verify plot tagging functionality.
+*/
+
+import {
+  createDomainObjectWithDefaults,
+  setFixedTimeMode,
+  setRealTimeMode,
+  waitForPlotsToRender
+} from '../../../../appActions.js';
+import { basicTagsTests, createTags, testTelemetryItem } from '../../../../helper/plotTagsUtils.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Plot Tagging', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+  });
+
+  test('Tags work with Overlay Plots', async ({ page }) => {
+    test.slow();
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/6822'
+    });
+
+    const overlayPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot'
+    });
+
+    const alphaSineWave = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Alpha Sine Wave',
+      parent: overlayPlot.uuid,
+      customParameters: {
+        '[aria-label="Data Rate (hz)"]': '0.01'
+      }
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Beta Sine Wave',
+      parent: overlayPlot.uuid,
+      customParameters: {
+        '[aria-label="Data Rate (hz)"]': '0.02'
+      }
+    });
+
+    await page.goto(overlayPlot.url);
+
+    let canvas = page.locator('canvas').nth(1);
+
+    // Switch to real-time mode
+    // Adding tags should pause the plot
+    await setRealTimeMode(page);
+
+    await createTags({
+      page,
+      canvas
+    });
+
+    await setFixedTimeMode(page);
+
+    await basicTagsTests(page);
+    await testTelemetryItem(page, alphaSineWave);
+
+    // set to real time mode
+    await setRealTimeMode(page);
+
+    // Search for Science Tag
+    await page.getByRole('searchbox', { name: 'Search Input' });
+    await page.getByRole('searchbox', { name: 'Search Input' }).fill('sc');
+
+    // Click on the search object result
+    await page.getByLabel('OpenMCT Search').getByText('Alpha Sine Wave').first().click();
+
+    await waitForPlotsToRender(page);
+
+    // expect plot to be paused
+    await expect(page.getByTitle('Resume displaying real-time data')).toBeVisible();
+
+    await setFixedTimeMode(page);
+  });
+
+  test('Tags work with Plot View of telemetry items', async ({ page }) => {
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      customParameters: {
+        '[aria-label="Data Rate (hz)"]': '0.01'
+      }
+    });
+    const canvas = page.locator('canvas').nth(1);
+    await createTags({
+      page,
+      canvas
+    });
+    await basicTagsTests(page);
+  });
+
+  test('Tags work with Stacked Plots', async ({ page }) => {
+    const stackedPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Stacked Plot'
+    });
+
+    const alphaSineWave = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Alpha Sine Wave',
+      parent: stackedPlot.uuid,
+      customParameters: {
+        '[aria-label="Data Rate (hz)"]': '0.01'
+      }
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Beta Sine Wave',
+      parent: stackedPlot.uuid,
+      customParameters: {
+        '[aria-label="Data Rate (hz)"]': '0.02'
+      }
+    });
+
+    await page.goto(stackedPlot.url);
+
+    const canvas = page.locator('canvas').nth(1);
+
+    await createTags({
+      page,
+      canvas,
+      xEnd: 700,
+      yEnd: 240
+    });
+    await basicTagsTests(page);
+    await testTelemetryItem(page, alphaSineWave);
+  });
+});
diff --git a/e2e/tests/functional/plugins/reloadAction/reloadAction.e2e.spec.js b/e2e/tests/functional/plugins/reloadAction/reloadAction.e2e.spec.js
new file mode 100644
index 00000000000..c64e19a007c
--- /dev/null
+++ b/e2e/tests/functional/plugins/reloadAction/reloadAction.e2e.spec.js
@@ -0,0 +1,125 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import { createDomainObjectWithDefaults, expandEntireTree } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Reload action', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    const displayLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout'
+    });
+
+    const alphaTable = await createDomainObjectWithDefaults(page, {
+      type: 'Telemetry Table',
+      name: 'Alpha Table'
+    });
+
+    const betaTable = await createDomainObjectWithDefaults(page, {
+      type: 'Telemetry Table',
+      name: 'Beta Table'
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: alphaTable.uuid,
+      customParameters: {
+        '[aria-label="Data Rate (hz)"]': '0.001'
+      }
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: betaTable.uuid,
+      customParameters: {
+        '[aria-label="Data Rate (hz)"]': '0.001'
+      }
+    });
+
+    await page.goto(displayLayout.url);
+
+    // Expand all folders
+    await expandEntireTree(page);
+
+    await page.getByLabel('Edit Object', { exact: true }).click();
+
+    await page.dragAndDrop(`text='Alpha Table'`, '.l-layout__grid-holder', {
+      targetPosition: { x: 0, y: 0 }
+    });
+
+    await page.dragAndDrop(`text='Beta Table'`, '.l-layout__grid-holder', {
+      targetPosition: { x: 0, y: 250 }
+    });
+
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+  });
+
+  test('can reload display layout and its children', async ({ page }) => {
+    const beforeReloadAlphaTelemetryValue = await page
+      .getByLabel('Alpha Table table content')
+      .getByLabel('wavelengths table cell')
+      .first()
+      .getAttribute('title');
+    const beforeReloadBetaTelemetryValue = await page
+      .getByLabel('Beta Table table content')
+      .getByLabel('wavelengths table cell')
+      .first()
+      .getAttribute('title');
+    // reload alpha
+    await page.getByTitle('View menu items').first().click();
+    await page.getByRole('menuitem', { name: /Reload/ }).click();
+
+    const afterReloadAlphaTelemetryValue = await page
+      .getByLabel('Alpha Table table content')
+      .getByLabel('wavelengths table cell')
+      .first()
+      .getAttribute('title');
+    const afterReloadBetaTelemetryValue = await page
+      .getByLabel('Beta Table table content')
+      .getByLabel('wavelengths table cell')
+      .first()
+      .getAttribute('title');
+
+    expect(beforeReloadAlphaTelemetryValue).not.toEqual(afterReloadAlphaTelemetryValue);
+    expect(beforeReloadBetaTelemetryValue).toEqual(afterReloadBetaTelemetryValue);
+
+    // now reload parent
+    await page.getByTitle('More actions').click();
+    await page.getByRole('menuitem', { name: /Reload/ }).click();
+
+    const fullReloadAlphaTelemetryValue = await page
+      .getByLabel('Alpha Table table content')
+      .getByLabel('wavelengths table cell')
+      .first()
+      .getAttribute('title');
+    const fullReloadBetaTelemetryValue = await page
+      .getByLabel('Beta Table table content')
+      .getByLabel('wavelengths table cell')
+      .first()
+      .getAttribute('title');
+
+    expect(fullReloadAlphaTelemetryValue).not.toEqual(afterReloadAlphaTelemetryValue);
+    expect(fullReloadBetaTelemetryValue).not.toEqual(afterReloadBetaTelemetryValue);
+  });
+});
diff --git a/e2e/tests/functional/plugins/styling/conditionalStyling.e2e.spec.js b/e2e/tests/functional/plugins/styling/conditionalStyling.e2e.spec.js
new file mode 100644
index 00000000000..1a1717b3346
--- /dev/null
+++ b/e2e/tests/functional/plugins/styling/conditionalStyling.e2e.spec.js
@@ -0,0 +1,48 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/**
+ * This test is dedicated to test conditional styling
+ */
+
+import { test } from '../../../../pluginFixtures.js';
+
+test.describe('Conditional Styling', () => {
+  test.fixme(
+    'Conditional Styling can be applied to Flex Layout and its children',
+    async ({ page }) => {
+      //test
+    }
+  );
+  test.fixme(
+    'Conditional Styling can be applied to Overlay Plot and its children',
+    async ({ page }) => {
+      //test
+    }
+  );
+  test.fixme(
+    'Conditional Styling changes the styling of the object the condition changes state',
+    async ({ page }) => {
+      //test
+    }
+  );
+});
diff --git a/e2e/tests/functional/plugins/styling/flexLayoutStyling.e2e.spec.js b/e2e/tests/functional/plugins/styling/flexLayoutStyling.e2e.spec.js
new file mode 100644
index 00000000000..6431066effa
--- /dev/null
+++ b/e2e/tests/functional/plugins/styling/flexLayoutStyling.e2e.spec.js
@@ -0,0 +1,449 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/**
+ * This test is dedicated to test styling of flex layouts
+ */
+
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
+import { checkStyles, hexToRGB, setStyles } from '../../../../helper/stylingUtils.js';
+import { test } from '../../../../pluginFixtures.js';
+
+const setBorderColor = '#ff00ff';
+const setBackgroundColor = '#5b0f00';
+const setTextColor = '#e6b8af';
+const defaultFrameBorderColor = '#e6b8af'; //default border color
+const defaultBorderTargetColor = '#acacac';
+const defaultTextColor = '#acacac'; // default text color
+const inheritedColor = '#acacac'; // inherited from the body style
+const pukeGreen = '#6aa84f'; //Ugliest green known to man 🤮
+const NO_STYLE_RGBA = 'rgba(0, 0, 0, 0)'; //default background color value
+
+test.describe('Flexible Layout styling', () => {
+  let stackedPlot;
+  let flexibleLayout;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create a Flexible Layout and attach to the Stacked Plot
+    flexibleLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Flexible Layout',
+      name: 'Flexible Layout'
+    });
+
+    // Create a Stacked Plot and attach to the Flexible Layout
+    stackedPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Stacked Plot',
+      name: 'StackedPlot1',
+      parent: flexibleLayout.uuid
+    });
+
+    // Create a Stacked Plot and attach to the Flexible Layout
+    await createDomainObjectWithDefaults(page, {
+      type: 'Stacked Plot',
+      name: 'StackedPlot2',
+      parent: flexibleLayout.uuid
+    });
+  });
+
+  test('styling the flexible layout properly applies the styles to flex layout', async ({
+    page
+  }) => {
+    // Directly navigate to the flexible layout
+    await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
+
+    // Edit Flexible Layout
+    await page.getByLabel('Edit Object').click();
+
+    // Select styles tab
+    await page.getByRole('tab', { name: 'Styles' }).click();
+
+    // Set styles using setStyles function
+    await setStyles(
+      page,
+      setBorderColor,
+      setBackgroundColor,
+      setTextColor,
+      page.getByLabel('Flexible Layout Column')
+    );
+
+    // Flex Layout Column matches set styles
+    await checkStyles(
+      hexToRGB(setBorderColor),
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('Flexible Layout Column')
+    );
+
+    // Save Flexible Layout
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Reload page
+    await page.reload({ waitUntil: 'domcontentloaded' });
+
+    // Check styles of overall Flex Layout
+    await checkStyles(
+      hexToRGB(setBorderColor),
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('Flexible Layout Column')
+    );
+
+    // Check styles on StackedPlot1. Note: https://github.com/nasa/openmct/issues/7337
+    await checkStyles(
+      hexToRGB(defaultFrameBorderColor),
+      NO_STYLE_RGBA,
+      hexToRGB(setTextColor),
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Check styles on StackedPlot2. Note: https://github.com/nasa/openmct/issues/7337
+    await checkStyles(
+      hexToRGB(defaultFrameBorderColor),
+      NO_STYLE_RGBA,
+      hexToRGB(setTextColor),
+      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+    );
+  });
+
+  test('styling a child object of the flexible layout properly applies that style to only that child', async ({
+    page
+  }) => {
+    // Directly navigate to the flexible layout
+    await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
+
+    // Edit Flexible Layout
+    await page.getByLabel('Edit Object').click();
+
+    // Select styles tab
+    await page.getByRole('tab', { name: 'Styles' }).click();
+
+    // Check styles on StackedPlot1
+    await checkStyles(
+      hexToRGB(defaultBorderTargetColor),
+      NO_STYLE_RGBA,
+      hexToRGB(defaultTextColor),
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Check styles on StackedPlot2
+    await checkStyles(
+      hexToRGB(defaultBorderTargetColor),
+      NO_STYLE_RGBA,
+      hexToRGB(defaultTextColor),
+      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Set styles using setStyles function on StackedPlot1 but not StackedPlot2
+    await setStyles(
+      page,
+      setBorderColor,
+      setBackgroundColor,
+      setTextColor,
+      page.getByLabel('StackedPlot1 Frame')
+    );
+
+    // Check styles on StackedPlot1
+    await checkStyles(
+      hexToRGB(setBorderColor),
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Check styles on StackedPlot2
+    await checkStyles(
+      hexToRGB(defaultBorderTargetColor),
+      NO_STYLE_RGBA,
+      hexToRGB(defaultTextColor),
+      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Save Flexible Layout
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Reload page and verify that styles persist
+    await page.reload({ waitUntil: 'domcontentloaded' });
+
+    // Check styles on StackedPlot1
+    await checkStyles(
+      hexToRGB(setBorderColor),
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Check styles on StackedPlot2
+    await checkStyles(
+      hexToRGB(defaultBorderTargetColor),
+      NO_STYLE_RGBA,
+      hexToRGB(defaultTextColor),
+      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+    );
+  });
+
+  test('if an overall style has been applied to the parent layout or plot, the individual styling should be able to coexist with that', async ({
+    page
+  }) => {
+    //Navigate to stackedPlot
+    await page.goto(stackedPlot.url, { waitUntil: 'domcontentloaded' });
+
+    // Edit stackedPlot
+    await page.getByLabel('Edit Object').click();
+
+    await page.getByRole('tab', { name: 'Styles' }).click();
+
+    // Set styles using setStyles function on StackedPlot1 but not StackedPlot2
+    await setStyles(
+      page,
+      setBorderColor,
+      setBackgroundColor,
+      setTextColor,
+      page.getByLabel('Stacked Plot Style Target').locator('div')
+    );
+
+    // Save Flexible Layout
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Directly navigate to the flexible layout
+    await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
+
+    // Edit Flexible Layout
+    await page.getByLabel('Edit Object').click();
+
+    // Select styles tab
+    await page.getByRole('tab', { name: 'Styles' }).click();
+
+    // Check styles on StackedPlot1 to match the set colors
+    await checkStyles(
+      hexToRGB(setBorderColor),
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Check styles on StackedPlot2 to verify they are the default
+    await checkStyles(
+      hexToRGB(defaultBorderTargetColor),
+      NO_STYLE_RGBA,
+      hexToRGB(defaultTextColor),
+      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Set styles using setStyles function on StackedPlot2
+    await setStyles(
+      page,
+      setBorderColor,
+      setBackgroundColor,
+      setTextColor,
+      page.getByLabel('StackedPlot2 Frame')
+    );
+
+    // Check styles on StackedPlot2
+    await checkStyles(
+      hexToRGB(setBorderColor),
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Save Flexible Layout
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Reload page and verify that styles persist
+    await page.reload({ waitUntil: 'domcontentloaded' });
+
+    // Check styles on StackedPlot1
+    await checkStyles(
+      hexToRGB(setBorderColor),
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Check styles on StackedPlot2
+    await checkStyles(
+      hexToRGB(setBorderColor),
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Directly navigate to the flexible layout
+    await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
+
+    // Edit Flexible Layout
+    await page.getByLabel('Edit Object').click();
+
+    // Select styles tab
+    await page.getByRole('tab', { name: 'Styles' }).click();
+
+    // Set Flex Layout Column to puke green
+    await setStyles(
+      page,
+      pukeGreen,
+      pukeGreen,
+      pukeGreen,
+      page.getByLabel('Flexible Layout Column')
+    );
+    // Save Flexible Layout
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Flex Layout Column matches set styles
+    await checkStyles(
+      hexToRGB(pukeGreen),
+      hexToRGB(pukeGreen),
+      hexToRGB(pukeGreen),
+      page.getByLabel('Flexible Layout Column')
+    );
+
+    // Check styles on StackedPlot1 matches previously set colors
+    await checkStyles(
+      hexToRGB(setBorderColor),
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Check styles on StackedPlot2 matches previous set colors
+    await checkStyles(
+      hexToRGB(setBorderColor),
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('StackedPlot2 Frame').getByLabel('Stacked Plot Style Target')
+    );
+  });
+
+  test('when the "no style" option is selected, background and text should be reset to inherited styles', async ({
+    page
+  }) => {
+    // Directly navigate to the flexible layout
+    await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
+
+    // Edit Flexible Layout
+    await page.getByLabel('Edit Object').click();
+
+    // Select styles tab
+    await page.getByRole('tab', { name: 'Styles' }).click();
+
+    // Set styles using setStyles function
+    await setStyles(
+      page,
+      setBorderColor,
+      setBackgroundColor,
+      setTextColor,
+      page.getByLabel('StackedPlot1 Frame')
+    );
+
+    // Check styles using checkStyles function
+    await checkStyles(
+      hexToRGB(setBorderColor),
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+    );
+
+    // Save Flexible Layout
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Reload page and set Styles to 'None'
+    await page.reload({ waitUntil: 'domcontentloaded' });
+
+    // Edit Flexible Layout
+    await page.getByLabel('Edit Object').click();
+
+    // Select styles tab
+    await page.getByRole('tab', { name: 'Styles' }).click();
+
+    //Select the 'No Style' option
+    await setStyles(
+      page,
+      'No Style',
+      'No Style',
+      'No Style',
+      page.getByLabel('StackedPlot1 Frame')
+    );
+
+    // Check styles using checkStyles function
+    await checkStyles(
+      hexToRGB(defaultBorderTargetColor),
+      NO_STYLE_RGBA,
+      hexToRGB(inheritedColor),
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+    );
+    // Save Flexible Layout
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Reload page and verify that styles persist
+    await page.reload({ waitUntil: 'domcontentloaded' });
+
+    // Check styles using checkStyles function
+    await checkStyles(
+      hexToRGB(defaultBorderTargetColor),
+      NO_STYLE_RGBA,
+      hexToRGB(inheritedColor),
+      page.getByLabel('StackedPlot1 Frame').getByLabel('Stacked Plot Style Target')
+    );
+  });
+
+  test('Styling, and then canceling reverts to previous style', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7233'
+    });
+
+    await page.goto(flexibleLayout.url);
+
+    await page.getByLabel('Edit Object').click();
+    await page.getByRole('tab', { name: 'Styles' }).click();
+    await setStyles(
+      page,
+      setBorderColor,
+      setBackgroundColor,
+      setTextColor,
+      page.getByLabel('Flexible Layout Column')
+    );
+    await page.getByLabel('Cancel Editing').click();
+    await page.getByRole('button', { name: 'OK', exact: true }).click();
+    await checkStyles(
+      hexToRGB(defaultBorderTargetColor),
+      NO_STYLE_RGBA,
+      hexToRGB(inheritedColor),
+      page.getByLabel('Flexible Layout Column')
+    );
+
+    await page.reload();
+    await checkStyles(
+      hexToRGB(defaultBorderTargetColor),
+      NO_STYLE_RGBA,
+      hexToRGB(inheritedColor),
+      page.getByLabel('Flexible Layout Column')
+    );
+  });
+});
diff --git a/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js b/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
new file mode 100644
index 00000000000..3c5310d56fa
--- /dev/null
+++ b/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
@@ -0,0 +1,245 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/**
+ * This test is dedicated to test styling of stacked plots
+ */
+
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
+import {
+  checkFontStyles,
+  checkStyles,
+  hexToRGB,
+  setStyles
+} from '../../../../helper/stylingUtils.js';
+import { test } from '../../../../pluginFixtures.js';
+
+const setBorderColor = '#ff00ff';
+const setBackgroundColor = '#5b0f00';
+const setTextColor = '#e6b8af';
+const defaultTextColor = '#acacac'; // default text color
+const NO_STYLE_RGBA = 'rgba(0, 0, 0, 0)'; //default background color value
+const DEFAULT_PLOT_VIEW_BORDER_COLOR = '#acacac';
+const setFontSize = '72px';
+const setFontWeight = '700'; //bold for monospace bold
+const setFontFamily = '"Andale Mono", sans-serif';
+
+test.describe('Stacked Plot styling', () => {
+  let stackedPlot;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create a Stacked Plot
+    stackedPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Stacked Plot',
+      name: 'StackedPlot1'
+    });
+
+    // Create two SWGs and attach them to the Stacked Plot
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Sine Wave Generator 1',
+      parent: stackedPlot.uuid
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Sine Wave Generator 2',
+      parent: stackedPlot.uuid
+    });
+  });
+
+  test('styling the overlay plot properly applies the styles to all containers', async ({
+    page
+  }) => {
+    // Directly navigate to the stacked plot
+    await page.goto(stackedPlot.url, { waitUntil: 'domcontentloaded' });
+
+    await page.getByLabel('Edit Object').click();
+
+    await page.getByRole('tab', { name: 'Styles' }).click();
+
+    //Set styles on overall stacked plot
+    await setStyles(
+      page,
+      setBorderColor,
+      setBackgroundColor,
+      setTextColor,
+      page.getByRole('tab', { name: 'Styles' }) //Workaround for https://github.com/nasa/openmct/issues/7229
+    );
+
+    //Set Font Size to 72
+    await page.getByLabel('Set Font Size').click();
+    await page.getByRole('menuitem', { name: '72px' }).click();
+
+    //Set Font Type to Monospace Bold. See setFontWeight and setFontFamily variables
+    await page.getByLabel('Set Font Type').click();
+    await page.getByRole('menuitem', { name: 'Monospace Bold' }).click();
+
+    //Check styles of stacked plot
+    await checkStyles(
+      hexToRGB(setBorderColor),
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('Stacked Plot Style Target')
+    );
+
+    //Check font styles of stacked plot
+    await checkFontStyles(
+      setFontSize,
+      setFontWeight,
+      setFontFamily,
+      page.getByLabel('Stacked Plot Style Target')
+    );
+
+    //Save
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Reload page
+    await page.reload({ waitUntil: 'domcontentloaded' });
+
+    //Verify styles are correct after reload
+    await checkStyles(
+      hexToRGB(setBorderColor),
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('Stacked Plot Style Target')
+    );
+
+    await checkFontStyles(
+      setFontSize,
+      setFontWeight,
+      setFontFamily,
+      page.getByLabel('Stacked Plot Style Target')
+    );
+
+    //Verify that stacked Plot Items inherit only text properties
+    await checkStyles(
+      NO_STYLE_RGBA,
+      NO_STYLE_RGBA,
+      hexToRGB(setTextColor),
+      page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
+    );
+
+    await checkStyles(
+      NO_STYLE_RGBA,
+      NO_STYLE_RGBA,
+      hexToRGB(setTextColor),
+      page.getByLabel('Stacked Plot Item Sine Wave Generator 2')
+    );
+
+    await checkFontStyles(
+      setFontSize,
+      setFontWeight,
+      setFontFamily,
+      page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
+    );
+  });
+
+  test('styling a child object of the flexible layout properly applies that style to only that child', async ({
+    page
+  }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7338'
+    });
+    await page.goto(stackedPlot.url, { waitUntil: 'domcontentloaded' });
+
+    await page.getByLabel('Edit Object').click();
+
+    await page.getByRole('tab', { name: 'Styles' }).click();
+
+    //Check default styles for SWG1 and SWG2
+    await checkStyles(
+      NO_STYLE_RGBA,
+      NO_STYLE_RGBA,
+      hexToRGB(defaultTextColor),
+      page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
+    );
+
+    await checkStyles(
+      NO_STYLE_RGBA,
+      NO_STYLE_RGBA,
+      hexToRGB(defaultTextColor),
+      page.getByLabel('Stacked Plot Item Sine Wave Generator 2')
+    );
+
+    // Set styles using setStyles function on StackedPlot1 but not StackedPlot2
+    await setStyles(
+      page,
+      setBorderColor,
+      setBackgroundColor,
+      setTextColor,
+      page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
+    );
+
+    //Set Font Styles on SWG1 but not SWG2
+    await page.getByLabel('Stacked Plot Item Sine Wave Generator 1').click();
+    //Set Font Size to 72
+    await page.getByLabel('Set Font Size').click();
+    await page.getByRole('menuitem', { name: '72px' }).click();
+
+    //Set Font Type to Monospace Bold. See setFontWeight and setFontFamily variables
+    await page.getByLabel('Set Font Type').click();
+    await page.getByRole('menuitem', { name: 'Monospace Bold' }).click();
+
+    // Save Flexible Layout
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Check styles on StackedPlot1
+    await checkStyles(
+      hexToRGB(setBorderColor),
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('Plot Container Style Target').first()
+    );
+
+    // Check styles on StackedPlot2
+    await checkStyles(
+      hexToRGB(DEFAULT_PLOT_VIEW_BORDER_COLOR),
+      NO_STYLE_RGBA,
+      hexToRGB(defaultTextColor),
+      page.getByLabel('Plot Container Style Target').nth(1)
+    );
+
+    // Reload page and verify that styles persist
+    await page.reload({ waitUntil: 'domcontentloaded' });
+
+    // Check styles on StackedPlot1
+    await checkStyles(
+      hexToRGB(setBorderColor),
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('Plot Container Style Target').first()
+    );
+
+    // Check styles on StackedPlot2
+    await checkStyles(
+      hexToRGB(DEFAULT_PLOT_VIEW_BORDER_COLOR),
+      NO_STYLE_RGBA,
+      hexToRGB(defaultTextColor),
+      page.getByLabel('Plot Container Style Target').nth(1)
+    );
+  });
+});
diff --git a/e2e/tests/functional/plugins/styling/styleInspectorOptions.e2e.spec.js b/e2e/tests/functional/plugins/styling/styleInspectorOptions.e2e.spec.js
new file mode 100644
index 00000000000..1898d8bad85
--- /dev/null
+++ b/e2e/tests/functional/plugins/styling/styleInspectorOptions.e2e.spec.js
@@ -0,0 +1,90 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/**
+ * This test is dedicated to test styling changes in the inspector tool
+ */
+
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Style Inspector Options', () => {
+  let flexibleLayout;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create a Flexible Layout and attach to the Stacked Plot
+    flexibleLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Flexible Layout',
+      name: 'Flexible Layout'
+    });
+    // Create a Stacked Plot and attach to the Flexible Layout
+    await createDomainObjectWithDefaults(page, {
+      type: 'Stacked Plot',
+      name: 'Stacked Plot',
+      parent: flexibleLayout.uuid
+    });
+  });
+
+  test('styles button only appears when appropriate component selected', async ({ page }) => {
+    await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
+
+    // Edit Flexible Layout
+    await page.getByLabel('Edit Object').click();
+
+    // The overall Flex Layout or Stacked Plot itself MUST be style-able.
+    await expect(page.getByRole('tab', { name: 'Styles' })).toBeVisible();
+
+    // Select flexible layout column
+    await page.getByLabel('Container Handle 1').click();
+
+    // Flex Layout containers should NOT be style-able.
+    await expect(page.getByRole('tab', { name: 'Styles' })).toBeHidden();
+
+    // Select Flex Layout Column
+    await page.getByLabel('Flexible Layout Column').click();
+
+    // The overall Flex Layout or Stacked Plot itself MUST be style-able.
+    await expect(page.getByRole('tab', { name: 'Styles' })).toBeVisible();
+
+    // Select Stacked Layout Column
+    await page.getByLabel('Stacked Plot Frame').click();
+
+    // The overall Flex Layout or Stacked Plot itself MUST be style-able.
+    await expect(page.getByRole('tab', { name: 'Styles' })).toBeVisible();
+  });
+});
+
+test.describe('Saved Styles', () => {
+  test.fixme('historical styles appear as an option once used', async ({ page }) => {
+    //test
+  });
+  test.fixme('at least 5 saved styles appear in the saved styles list', async ({ page }) => {
+    //test
+  });
+  test.fixme('Saved Styles can be deleted once used', async ({ page }) => {
+    //test
+  });
+  test.fixme('can apply a saved style to the currently selected target', async ({ page }) => {
+    //test
+  });
+});
diff --git a/e2e/tests/functional/plugins/tabs/tabs.e2e.spec.js b/e2e/tests/functional/plugins/tabs/tabs.e2e.spec.js
new file mode 100644
index 00000000000..508a08a75b1
--- /dev/null
+++ b/e2e/tests/functional/plugins/tabs/tabs.e2e.spec.js
@@ -0,0 +1,121 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createDomainObjectWithDefaults } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Tabs View', () => {
+  let tabsView;
+  let table;
+  let notebook;
+  let sineWaveGenerator;
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    tabsView = await createDomainObjectWithDefaults(page, {
+      type: 'Tabs View'
+    });
+    table = await createDomainObjectWithDefaults(page, {
+      type: 'Telemetry Table',
+      parent: tabsView.uuid
+    });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Event Message Generator',
+      parent: table.uuid
+    });
+    notebook = await createDomainObjectWithDefaults(page, {
+      type: 'Notebook',
+      parent: tabsView.uuid
+    });
+    sineWaveGenerator = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: tabsView.uuid
+    });
+  });
+
+  test('Renders tabbed elements', async ({ page }) => {
+    await page.goto(tabsView.url);
+
+    // select first tab
+    await page.getByLabel(`${table.name} tab`, { exact: true }).click();
+    // ensure table header visible
+    await expect(page.getByRole('searchbox', { name: 'message filter input' })).toBeVisible();
+
+    // no canvas (i.e., sine wave generator) in the document should be visible
+    await expect(page.locator('canvas[id=webglContext]')).toBeHidden();
+
+    // select second tab
+    await page.getByLabel(`${notebook.name} tab`, { exact: true }).click();
+
+    // ensure notebook visible
+    await expect(page.locator('.c-notebook__drag-area')).toBeVisible();
+
+    // no canvas (i.e., sine wave generator) in the document should be visible
+    await expect(page.locator('canvas[id=webglContext]')).toBeHidden();
+
+    // select third tab
+    await page.getByLabel(`${sineWaveGenerator.name} tab`, { exact: true }).click();
+
+    // expect sine wave generator visible
+    await expect(page.locator('.c-plot')).toBeVisible();
+
+    // expect two canvases (i.e., overlay & main canvas for sine wave generator) to be visible
+    await expect(page.locator('canvas')).toHaveCount(2);
+    await expect(page.locator('canvas').nth(0)).toBeVisible();
+    await expect(page.locator('canvas').nth(1)).toBeVisible();
+
+    // now try to select the first tab again
+    await page.getByLabel(`${table.name} tab`, { exact: true }).click();
+    // ensure table header visible
+    await expect(page.getByRole('searchbox', { name: 'message filter input' })).toBeVisible();
+
+    // no canvas (i.e., sine wave generator) in the document should be visible
+    await expect(page.locator('canvas[id=webglContext]')).toBeHidden();
+  });
+});
+
+test.describe('Tabs View CRUD', () => {
+  let tabsView;
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    tabsView = await createDomainObjectWithDefaults(page, {
+      type: 'Tabs View'
+    });
+  });
+
+  test('Eager Load Tabs is the default and then can be toggled off', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7198'
+    });
+    await page.goto(tabsView.url);
+
+    await page.getByLabel('Edit Object').click();
+    await page.getByLabel('More actions').click();
+    await page.getByLabel('Edit Properties...').click();
+    await expect(await page.getByLabel('Eager Load Tabs')).not.toBeChecked();
+    await page.getByLabel('Eager Load Tabs').setChecked(true);
+    await expect(await page.getByLabel('Eager Load Tabs')).toBeChecked();
+  });
+});
diff --git a/e2e/tests/functional/plugins/telemetryTable/preview.e2e.spec.js b/e2e/tests/functional/plugins/telemetryTable/preview.e2e.spec.js
new file mode 100644
index 00000000000..fe7a823f8f3
--- /dev/null
+++ b/e2e/tests/functional/plugins/telemetryTable/preview.e2e.spec.js
@@ -0,0 +1,73 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*
+ * This test suite is dedicated to testing the preview plugin.
+ */
+
+import { createDomainObjectWithDefaults, expandEntireTree } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Preview mode', () => {
+  test('all context menu items are available for a telemetry table', async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    // Create a Display Layout
+    const displayLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout'
+    });
+    // Create a Telemetry Table
+    const telemetryTable = await createDomainObjectWithDefaults(page, {
+      type: 'Telemetry Table',
+      parent: displayLayout.uuid
+    });
+    // Create a Sinewave Generator
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: telemetryTable.uuid
+    });
+
+    await page.goto(displayLayout.url);
+    await page.getByLabel('View menu items').click();
+    await expect(page.getByLabel('Export Marked Rows')).toBeVisible();
+
+    await page.getByRole('menuitem', { name: 'Large View' }).click();
+    await page.getByLabel('Overlay').getByLabel('More actions').click();
+    await expect(page.getByLabel('Export Table Data')).toBeVisible();
+    await expect(page.getByLabel('Export Marked Rows')).toBeVisible();
+    await page.getByRole('menuitem', { name: 'Pause' }).click();
+    await page.getByRole('button', { name: 'Close' }).click();
+
+    await expandEntireTree(page);
+
+    await page.getByLabel('Edit Object').click();
+
+    const treePane = page.getByRole('tree', {
+      name: 'Main Tree'
+    });
+    const telemetryTableTreeItem = treePane.getByRole('treeitem', {
+      name: new RegExp(telemetryTable.name)
+    });
+    await telemetryTableTreeItem.locator('a').click();
+    await page.getByLabel('Overlay').getByLabel('More actions').click();
+    await expect(page.getByLabel('Export Table Data')).toBeVisible();
+    await expect(page.getByLabel('Export Marked Rows')).toBeVisible();
+  });
+});
diff --git a/e2e/tests/functional/plugins/telemetryTable/telemetryTable.e2e.spec.js b/e2e/tests/functional/plugins/telemetryTable/telemetryTable.e2e.spec.js
new file mode 100644
index 00000000000..4ce30f034e2
--- /dev/null
+++ b/e2e/tests/functional/plugins/telemetryTable/telemetryTable.e2e.spec.js
@@ -0,0 +1,167 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createDomainObjectWithDefaults, setTimeConductorBounds } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Telemetry Table', () => {
+  test('unpauses and filters data when paused by button and user changes bounds', async ({
+    page
+  }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/5113'
+    });
+
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    const table = await createDomainObjectWithDefaults(page, { type: 'Telemetry Table' });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: table.uuid
+    });
+
+    // focus the Telemetry Table
+    page.goto(table.url);
+
+    // Click pause button
+    const pauseButton = page.locator('button.c-button.icon-pause');
+    await pauseButton.click();
+
+    const tableWrapper = page.locator('div.c-table-wrapper');
+    await expect(tableWrapper).toHaveClass(/is-paused/);
+
+    // Subtract 5 minutes from the current end bound datetime and set it
+    // Bring up the time conductor popup
+    let endDate = await page.locator('[aria-label="End bounds"]').textContent();
+    endDate = new Date(endDate);
+
+    endDate.setUTCMinutes(endDate.getUTCMinutes() - 5);
+    endDate = endDate.toISOString().replace(/T/, ' ');
+
+    await setTimeConductorBounds(page, undefined, endDate);
+
+    await expect(tableWrapper).not.toHaveClass(/is-paused/);
+
+    // Get the most recent telemetry date
+    const latestTelemetryDate = await page
+      .getByLabel('table content')
+      .getByLabel('utc table cell')
+      .last()
+      .getAttribute('title');
+
+    // Verify that it is <= our new end bound
+    const latestMilliseconds = Date.parse(latestTelemetryDate);
+    const endBoundMilliseconds = Date.parse(endDate);
+    expect(latestMilliseconds).toBeLessThanOrEqual(endBoundMilliseconds);
+  });
+
+  test('Supports filtering telemetry by regular text search', async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    const table = await createDomainObjectWithDefaults(page, { type: 'Telemetry Table' });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Event Message Generator',
+      parent: table.uuid
+    });
+
+    // focus the Telemetry Table
+    await page.goto(table.url);
+
+    await page.getByRole('searchbox', { name: 'message filter input' }).click();
+    await page.getByRole('searchbox', { name: 'message filter input' }).fill('Roger');
+
+    let cells = await page.getByRole('cell').getByText(/Roger/).all();
+    // ensure we've got more than one cell
+    expect(cells.length).toBeGreaterThan(1);
+    // ensure the text content of each cell contains the search term
+    for (const cell of cells) {
+      const text = await cell.textContent();
+      expect(text).toContain('Roger');
+    }
+
+    await page.getByRole('searchbox', { name: 'message filter input' }).click();
+    await page.getByRole('searchbox', { name: 'message filter input' }).fill('Dodger');
+
+    cells = await page
+      .getByRole('cell')
+      .getByText(/Dodger/)
+      .all();
+    // ensure we've got more than one cell
+    expect(cells.length).toBe(0);
+    // ensure the text content of each cell contains the search term
+    for (const cell of cells) {
+      const text = await cell.textContent();
+      expect(text).not.toContain('Dodger');
+    }
+
+    // Click pause button
+    await page.click('button[title="Pause"]');
+  });
+
+  test('Supports filtering using Regex', async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    const table = await createDomainObjectWithDefaults(page, { type: 'Telemetry Table' });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Event Message Generator',
+      parent: table.uuid
+    });
+
+    // focus the Telemetry Table
+    page.goto(table.url);
+    await page.getByRole('searchbox', { name: 'message filter input' }).hover();
+    await page
+      .getByLabel('Message filter header')
+      .getByLabel('Click to enable regex: enter a string with slashes, like this: /regex_exp/')
+      .click();
+    await page.getByRole('searchbox', { name: 'message filter input' }).click();
+    await page.getByRole('searchbox', { name: 'message filter input' }).fill('/[Rr]oger/');
+
+    let cells = await page.getByRole('cell').getByText(/Roger/).all();
+    // ensure we've got more than one cell
+    expect(cells.length).toBeGreaterThan(1);
+    // ensure the text content of each cell contains the search term
+    for (const cell of cells) {
+      const text = await cell.textContent();
+      expect(text).toContain('Roger');
+    }
+
+    await page.getByRole('searchbox', { name: 'message filter input' }).click();
+    await page.getByRole('searchbox', { name: 'message filter input' }).fill('/[Dd]oger/');
+
+    cells = await page
+      .getByRole('cell')
+      .getByText(/Dodger/)
+      .all();
+    // ensure we've got more than one cell
+    expect(cells.length).toBe(0);
+    // ensure the text content of each cell contains the search term
+    for (const cell of cells) {
+      const text = await cell.textContent();
+      expect(text).not.toContain('Dodger');
+    }
+
+    // Click pause button
+    await page.click('button[title="Pause"]');
+  });
+});
diff --git a/e2e/tests/functional/plugins/timeConductor/timeConductor.e2e.spec.js b/e2e/tests/functional/plugins/timeConductor/timeConductor.e2e.spec.js
new file mode 100644
index 00000000000..37dd7d19865
--- /dev/null
+++ b/e2e/tests/functional/plugins/timeConductor/timeConductor.e2e.spec.js
@@ -0,0 +1,214 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import {
+  setEndOffset,
+  setFixedTimeMode,
+  setRealTimeMode,
+  setStartOffset,
+  setTimeConductorBounds
+} from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Time conductor operations', () => {
+  test('validate start time does not exceeds end time', async ({ page }) => {
+    // Go to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    const year = new Date().getFullYear();
+
+    let startDate = 'xxxx-01-01 01:00:00.000Z';
+    startDate = year + startDate.substring(4);
+
+    let endDate = 'xxxx-01-01 02:00:00.000Z';
+    endDate = year + endDate.substring(4);
+
+    await setTimeConductorBounds(page, startDate, endDate);
+
+    // invalid start date
+    startDate = year + 1 + startDate.substring(4);
+    await setTimeConductorBounds(page, startDate);
+
+    // Bring up the time conductor popup
+    const timeConductorMode = await page.locator('.c-compact-tc');
+    await timeConductorMode.click();
+    const startDateLocator = page.locator('input[type="text"]').first();
+    const endDateLocator = page.locator('input[type="text"]').nth(2);
+
+    await endDateLocator.click();
+
+    const startDateValidityStatus = await startDateLocator.evaluate((element) =>
+      element.checkValidity()
+    );
+    expect(startDateValidityStatus).not.toBeTruthy();
+
+    // fix to valid start date
+    startDate = year - 1 + startDate.substring(4);
+    await setTimeConductorBounds(page, startDate);
+
+    // invalid end date
+    endDate = year - 2 + endDate.substring(4);
+    await setTimeConductorBounds(page, undefined, endDate);
+
+    await startDateLocator.click();
+
+    const endDateValidityStatus = await endDateLocator.evaluate((element) =>
+      element.checkValidity()
+    );
+    expect(endDateValidityStatus).not.toBeTruthy();
+  });
+});
+
+// Testing instructions:
+// Try to change the realtime offsets when in realtime (local clock) mode.
+test.describe('Time conductor input fields real-time mode', () => {
+  test('validate input fields in real-time mode', async ({ page }) => {
+    const startOffset = {
+      startSecs: '23'
+    };
+
+    const endOffset = {
+      endSecs: '31'
+    };
+
+    // Go to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Switch to real-time mode
+    await setRealTimeMode(page);
+
+    // Set start time offset
+    await setStartOffset(page, startOffset);
+
+    // Verify time was updated on time offset button
+    await expect(page.locator('.c-compact-tc__setting-value.icon-minus')).toContainText('00:30:23');
+
+    // Set end time offset
+    await setEndOffset(page, endOffset);
+
+    // Verify time was updated on preceding time offset button
+    await expect(page.locator('.c-compact-tc__setting-value.icon-plus')).toContainText('00:00:31');
+  });
+
+  /**
+   * Verify that offsets and url params are preserved when switching
+   * between fixed timespan and real-time mode.
+   */
+  test('preserve offsets and url params when switching between fixed and real-time mode', async ({
+    page
+  }) => {
+    const startOffset = {
+      startMins: '30',
+      startSecs: '23'
+    };
+
+    const endOffset = {
+      endSecs: '01'
+    };
+
+    // Convert offsets to milliseconds
+    const startDelta = 30 * 60 * 1000 + 23 * 1000;
+    const endDelta = 1 * 1000;
+
+    // Go to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Switch to real-time mode
+    await setRealTimeMode(page);
+
+    // Set start time offset
+    await setStartOffset(page, startOffset);
+
+    // Set end time offset
+    await setEndOffset(page, endOffset);
+
+    // Switch to fixed timespan mode
+    await setFixedTimeMode(page);
+
+    // Switch back to real-time mode
+    await setRealTimeMode(page);
+
+    // Verify updated start time offset persists after mode switch
+    await expect(page.locator('.c-compact-tc__setting-value.icon-minus')).toContainText('00:30:23');
+
+    // Verify updated end time offset persists after mode switch
+    await expect(page.locator('.c-compact-tc__setting-value.icon-plus')).toContainText('00:00:01');
+
+    // Verify url parameters persist after mode switch
+    expect(page.url()).toContain(`startDelta=${startDelta}`);
+    expect(page.url()).toContain(`endDelta=${endDelta}`);
+  });
+
+  test.fixme(
+    'time conductor history in fixed time mode will track changing start and end times',
+    async ({ page }) => {
+      // change start time, verify it's tracked in history
+      // change end time, verify it's tracked in history
+    }
+  );
+
+  test.fixme(
+    'time conductor history in realtime mode will track changing start and end times',
+    async ({ page }) => {
+      // change start offset, verify it's tracked in history
+      // change end offset, verify it's tracked in history
+    }
+  );
+
+  test.fixme(
+    'time conductor history allows you to set a historical timeframe',
+    async ({ page }) => {
+      // make sure there are historical history options
+      // select an option and make sure the time conductor start and end bounds are updated correctly
+    }
+  );
+
+  test.fixme('time conductor history allows you to set a realtime offsets', async ({ page }) => {
+    // make sure there are realtime history options
+    // select an option and verify the offsets are updated correctly
+  });
+});
+
+test.describe('Time Conductor History', () => {
+  test('shows milliseconds on hover @unstable', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/4386'
+    });
+    // Navigate to Open MCT in Fixed Time Mode, UTC Time System
+    // with startBound at 2022-01-01 00:00:00.000Z
+    // and endBound at 2022-01-01 00:00:00.200Z
+    await page.goto(
+      './#/browse/mine?view=grid&tc.mode=fixed&tc.startBound=1640995200000&tc.endBound=1640995200200&tc.timeSystem=utc&hideInspector=true'
+    );
+    await page.getByRole('button', { name: 'Time Conductor Settings' }).click();
+    await page.getByRole('button', { name: 'Time Conductor History' }).hover({ trial: true });
+    await page.getByRole('button', { name: 'Time Conductor History' }).click();
+
+    // Validate history item format
+    const historyItem = page.locator('text="2022-01-01 00:00:00 + 200ms"');
+    await expect(historyItem).toBeEnabled();
+    await expect(historyItem).toHaveAttribute(
+      'title',
+      '2022-01-01 00:00:00.000 - 2022-01-01 00:00:00.200'
+    );
+  });
+});
diff --git a/e2e/tests/functional/plugins/timer/timer.e2e.spec.js b/e2e/tests/functional/plugins/timer/timer.e2e.spec.js
new file mode 100644
index 00000000000..1502909c8c9
--- /dev/null
+++ b/e2e/tests/functional/plugins/timer/timer.e2e.spec.js
@@ -0,0 +1,251 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import {
+  createDomainObjectWithDefaults,
+  openObjectTreeContextMenu
+} from '../../../../appActions.js';
+import { MISSION_TIME } from '../../../../constants.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Timer', () => {
+  let timer;
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    timer = await createDomainObjectWithDefaults(page, { type: 'timer' });
+    await assertTimerElements(page, timer);
+  });
+
+  test('Can perform actions on the Timer', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/4313'
+    });
+
+    const timerUrl = timer.url;
+
+    await test.step('From the tree context menu', async () => {
+      await triggerTimerContextMenuAction(page, timerUrl, 'Start');
+      await triggerTimerContextMenuAction(page, timerUrl, 'Pause');
+      await triggerTimerContextMenuAction(page, timerUrl, 'Restart at 0');
+      await triggerTimerContextMenuAction(page, timerUrl, 'Stop');
+    });
+
+    await test.step('From the 3dot menu', async () => {
+      await triggerTimer3dotMenuAction(page, 'Start');
+      await triggerTimer3dotMenuAction(page, 'Pause');
+      await triggerTimer3dotMenuAction(page, 'Restart at 0');
+      await triggerTimer3dotMenuAction(page, 'Stop');
+    });
+
+    await test.step('From the object view', async () => {
+      await triggerTimerViewAction(page, 'Start');
+      await triggerTimerViewAction(page, 'Pause');
+      await triggerTimerViewAction(page, 'Restart at 0');
+    });
+  });
+});
+
+test.describe('Timer with target date', () => {
+  let timer;
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    timer = await createDomainObjectWithDefaults(page, { type: 'timer' });
+    await assertTimerElements(page, timer);
+  });
+
+  // Override clock
+  test.use({
+    clockOptions: {
+      now: MISSION_TIME,
+      shouldAdvanceTime: true
+    }
+  });
+
+  test('Can count down to a target date', async ({ page }) => {
+    // Set the target date to 2024-11-24 03:30:00
+    await page.getByTitle('More actions').click();
+    await page.getByRole('menuitem', { name: /Edit Properties.../ }).click();
+    await page.getByPlaceholder('YYYY-MM-DD').fill('2024-11-24');
+    await page.locator('input[name="hour"]').fill('3');
+    await page.locator('input[name="min"]').fill('30');
+    await page.locator('input[name="sec"]').fill('00');
+    await page.getByLabel('Save').click();
+
+    // Get the current timer seconds value
+    const timerSecValue = (await page.locator('.c-timer__value').innerText()).split(':').at(-1);
+    await expect(page.locator('.c-timer__direction')).toHaveClass(/icon-minus/);
+
+    // Wait for the timer to count down and assert
+    await expect
+      .poll(async () => {
+        const newTimerValue = (await page.locator('.c-timer__value').innerText()).split(':').at(-1);
+        return Number(newTimerValue);
+      })
+      .toBeLessThan(Number(timerSecValue));
+  });
+
+  test('Can count up from a target date', async ({ page }) => {
+    // Set the target date to 2020-11-23 03:30:00
+    await page.getByTitle('More actions').click();
+    await page.getByRole('menuitem', { name: /Edit Properties.../ }).click();
+    await page.getByPlaceholder('YYYY-MM-DD').fill('2020-11-23');
+    await page.locator('input[name="hour"]').fill('3');
+    await page.locator('input[name="min"]').fill('30');
+    await page.locator('input[name="sec"]').fill('00');
+    await page.getByLabel('Save').click();
+
+    // Get the current timer seconds value
+    const timerSecValue = (await page.locator('.c-timer__value').innerText()).split(':').at(-1);
+    await expect(page.locator('.c-timer__direction')).toHaveClass(/icon-plus/);
+
+    // Wait for the timer to count up and assert
+    await expect
+      .poll(async () => {
+        const newTimerValue = (await page.locator('.c-timer__value').innerText()).split(':').at(-1);
+        return Number(newTimerValue);
+      })
+      .toBeGreaterThan(Number(timerSecValue));
+  });
+});
+
+/**
+ * Actions that can be performed on a timer from context menus.
+ * @typedef {'Start' | 'Stop' | 'Pause' | 'Restart at 0'} TimerAction
+ */
+
+/**
+ * Actions that can be performed on a timer from the object view.
+ * @typedef {'Start' | 'Pause' | 'Restart at 0'} TimerViewAction
+ */
+
+/**
+ * Trigger a timer action from the tree context menu
+ * @param {import('@playwright/test').Page} page
+ * @param {TimerAction} action
+ */
+async function triggerTimerContextMenuAction(page, timerUrl, action) {
+  const menuAction = `.c-menu ul li >> text="${action}"`;
+  await openObjectTreeContextMenu(page, timerUrl);
+  await page.locator(menuAction).click();
+  assertTimerStateAfterAction(page, action);
+}
+
+/**
+ * Trigger a timer action from the 3dot menu
+ * @param {import('@playwright/test').Page} page
+ * @param {TimerAction} action
+ */
+async function triggerTimer3dotMenuAction(page, action) {
+  const menuAction = `.c-menu ul li >> text="${action}"`;
+  const threeDotMenuButton = 'button[title="More actions"]';
+  let isActionAvailable = false;
+  let iterations = 0;
+  // Dismiss/open the 3dot menu until the action is available
+  // or a maximum number of iterations is reached
+  while (!isActionAvailable && iterations <= 20) {
+    await page.click('.c-object-view');
+    await page.click(threeDotMenuButton);
+    isActionAvailable = await page.locator(menuAction).isVisible();
+    iterations++;
+  }
+
+  await page.locator(menuAction).click();
+  assertTimerStateAfterAction(page, action);
+}
+
+/**
+ * Trigger a timer action from the object view
+ * @param {import('@playwright/test').Page} page
+ * @param {TimerViewAction} action
+ */
+async function triggerTimerViewAction(page, action) {
+  await page.locator('.c-timer').hover({ trial: true });
+  const buttonTitle = buttonTitleFromAction(action);
+  await page.click(`button[title="${buttonTitle}"]`);
+  assertTimerStateAfterAction(page, action);
+}
+
+/**
+ * Takes in a TimerViewAction and returns the button title
+ * @param {TimerViewAction} action
+ */
+function buttonTitleFromAction(action) {
+  switch (action) {
+    case 'Start':
+      return 'Start';
+    case 'Pause':
+      return 'Pause';
+    case 'Restart at 0':
+      return 'Reset';
+  }
+}
+
+/**
+ * Verify the timer state after a timer action has been performed.
+ * @param {import('@playwright/test').Page} page
+ * @param {TimerAction} action
+ */
+async function assertTimerStateAfterAction(page, action) {
+  const timerValue = page.locator('.c-timer__value');
+  let timerStateClass;
+  switch (action) {
+    case 'Start':
+    case 'Restart at 0':
+      timerStateClass = 'is-started';
+      expect(await timerValue.innerText()).toBe('0D 00:00:00');
+      break;
+    case 'Stop':
+      timerStateClass = 'is-stopped';
+      expect(await timerValue.innerText()).toBe('--:--:--');
+      break;
+    case 'Pause':
+      timerStateClass = 'is-paused';
+      break;
+  }
+
+  await expect.soft(page.locator('.c-timer')).toHaveClass(new RegExp(timerStateClass));
+}
+
+/**
+ * Assert that all the major components of a timer are present in the DOM.
+ * @param {import('@playwright/test').Page} page
+ * @param {import('../../../../appActions').CreatedObjectInfo} timer
+ */
+async function assertTimerElements(page, timer) {
+  const timerElement = page.locator('.c-timer');
+  const resetButton = page.getByRole('button', { name: 'Reset' });
+  const pausePlayButton = page
+    .getByRole('button', { name: 'Pause' })
+    .or(page.getByRole('button', { name: 'Start' }));
+  const timerDirectionIcon = page.locator('.c-timer__direction');
+  const timerValue = page.locator('.c-timer__value');
+
+  expect(await page.locator('.l-browse-bar__object-name').innerText()).toBe(timer.name);
+  expect(timerElement).toBeAttached();
+  expect(resetButton).toBeAttached();
+  expect(pausePlayButton).toBeAttached();
+  expect(timerDirectionIcon).toBeAttached();
+  expect(timerValue).toBeAttached();
+}
diff --git a/e2e/tests/functional/recentObjects.e2e.spec.js b/e2e/tests/functional/recentObjects.e2e.spec.js
new file mode 100644
index 00000000000..6b18d6eb025
--- /dev/null
+++ b/e2e/tests/functional/recentObjects.e2e.spec.js
@@ -0,0 +1,374 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createDomainObjectWithDefaults } from '../../appActions.js';
+import { waitForAnimations } from '../../baseFixtures.js';
+import { expect, test } from '../../pluginFixtures.js';
+
+test.describe('Recent Objects', () => {
+  /** @type {import('@playwright/test').Locator} */
+  let recentObjectsList;
+  /** @type {import('@playwright/test').Locator} */
+  let clock;
+  /** @type {import('@playwright/test').Locator} */
+  let folderA;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Set Recent Objects List locator for subsequent tests
+    recentObjectsList = page.getByRole('list', {
+      name: 'Recent Objects'
+    });
+
+    // Create a folder and nest a Clock within it
+    folderA = await createDomainObjectWithDefaults(page, {
+      type: 'Folder'
+    });
+    clock = await createDomainObjectWithDefaults(page, {
+      type: 'Clock',
+      parent: folderA.uuid
+    });
+
+    // Drag the Recent Objects panel up a bit
+    await page
+      .locator('.l-pane.l-pane--vertical-handle-before', {
+        hasText: 'Recently Viewed'
+      })
+      .locator('.l-pane__handle')
+      .hover();
+    await page.mouse.down();
+    await page.mouse.move(0, 100);
+    await page.mouse.up();
+  });
+  test('Navigated objects show up in recents, object renames and deletions are reflected', async ({
+    page
+  }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/6818'
+    });
+
+    // Verify that both created objects appear in the list and are in the correct order
+    await assertInitialRecentObjectsListState();
+
+    // Navigate to the folder by clicking on the main object name in the recent objects list item
+    await page.getByRole('listitem', { name: folderA.name }).getByText(folderA.name).click();
+    await page.waitForURL(`**/${folderA.uuid}?*`);
+    expect(recentObjectsList.getByRole('listitem').nth(0).getByText(folderA.name)).toBeTruthy();
+
+    // Rename
+    folderA.name = `${folderA.name}-NEW!`;
+    await page.locator('.l-browse-bar__object-name').fill('');
+    await page.locator('.l-browse-bar__object-name').fill(folderA.name);
+    await page.keyboard.press('Enter');
+
+    // Verify rename has been applied in recent objects list item and objects paths
+    expect(
+      await page
+        .getByRole('navigation', {
+          name: clock.name
+        })
+        .locator('a')
+        .filter({
+          hasText: folderA.name
+        })
+        .count()
+    ).toBeGreaterThan(0);
+    expect(recentObjectsList.getByRole('listitem', { name: folderA.name })).toBeTruthy();
+
+    await page.click('button[title="Show selected item in tree"]');
+    // Delete the folder via the left tree pane treeitem context menu
+    await page
+      .getByRole('treeitem', { name: new RegExp(folderA.name) })
+      .locator('a')
+      .click({
+        button: 'right'
+      });
+    await page.getByRole('menuitem', { name: /Remove/ }).click();
+    await page.getByRole('button', { name: 'OK', exact: true }).click();
+
+    // Verify that the folder and clock are no longer in the recent objects list
+    await expect(recentObjectsList.getByRole('listitem', { name: folderA.name })).toBeHidden();
+    await expect(recentObjectsList.getByRole('listitem', { name: clock.name })).toBeHidden();
+  });
+
+  test('Clicking on an object in the path of a recent object navigates to the object', async ({
+    page,
+    openmctConfig
+  }) => {
+    const { myItemsFolderName } = openmctConfig;
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/6151'
+    });
+    await page.goto('./#/browse/mine');
+
+    // Navigate to the folder by clicking on its entry in the Clock's breadcrumb
+    const waitForFolderNavigation = page.waitForURL(`**/${folderA.uuid}?*`);
+    await page
+      .getByRole('navigation', {
+        name: clock.name
+      })
+      .locator('a')
+      .filter({
+        hasText: folderA.name
+      })
+      .click();
+
+    // Verify that the hash URL updates correctly
+    await waitForFolderNavigation;
+    expect(page.url()).toMatch(new RegExp(`.*${folderA.uuid}?.*`));
+
+    // Navigate to My Items by clicking on its entry in the Clock's breadcrumb
+    const waitForMyItemsNavigation = page.waitForURL(`**/mine?*`);
+    await page
+      .getByRole('navigation', {
+        name: clock.name
+      })
+      .locator('a')
+      .filter({
+        hasText: myItemsFolderName
+      })
+      .click();
+
+    // Verify that the hash URL updates correctly
+    await waitForMyItemsNavigation;
+    expect(page.url()).toMatch(new RegExp(`.*mine?.*`));
+  });
+  test("Clicking on the 'target button' scrolls the object into view in the tree and highlights it", async ({
+    page
+  }) => {
+    const clockTreeItem = page
+      .getByRole('tree', { name: 'Main Tree' })
+      .getByRole('treeitem', { name: clock.name });
+    const folderTreeItem = page.getByRole('tree', { name: 'Main Tree' }).getByRole('treeitem', {
+      name: folderA.name,
+      expanded: true
+    });
+
+    // Click the "Target" button for the Clock which is nested in a folder
+    await page.getByRole('button', { name: `Open and scroll to ${clock.name}` }).click();
+
+    // Assert that the Clock parent folder has expanded and the Clock is visible)
+    await expect(folderTreeItem.locator('.c-disclosure-triangle')).toHaveClass(/--expanded/);
+    await expect(clockTreeItem).toBeVisible();
+
+    // Assert that the Clock treeitem is highlighted
+    await expect(clockTreeItem.locator('.c-tree__item')).toHaveClass(/is-targeted-item/);
+
+    // Wait for highlight animation to end
+    await waitForAnimations(clockTreeItem.locator('.c-tree__item'));
+
+    // Assert that the Clock treeitem is no longer highlighted
+    await expect(clockTreeItem.locator('.c-tree__item')).not.toHaveClass(/is-targeted-item/);
+  });
+  test('Persists on refresh', async ({ page }) => {
+    await assertInitialRecentObjectsListState();
+    await page.reload();
+    await assertInitialRecentObjectsListState();
+  });
+  test('Displays objects and aliases uniquely', async ({ page }) => {
+    const mainTree = page.getByRole('tree', { name: 'Main Tree' });
+
+    // Navigate to the clock and reveal it in the tree
+    await page.goto(clock.url);
+    await page.getByLabel('Show selected item in tree').click();
+
+    // Right click the clock and create an alias using the "link" context menu action
+    const clockTreeItem = page
+      .getByRole('tree', {
+        name: 'Main Tree'
+      })
+      .getByRole('treeitem', {
+        name: clock.name
+      });
+    await clockTreeItem.click({
+      button: 'right'
+    });
+    await page
+      .getByRole('menuitem', {
+        name: /Create Link/
+      })
+      .click();
+    await page
+      .getByRole('tree', { name: 'Create Modal Tree' })
+      .getByRole('treeitem')
+      .first()
+      .click();
+    await page.getByRole('button', { name: 'Save' }).click();
+
+    // Click the newly created object alias in the tree
+    await mainTree
+      .getByRole('treeitem', {
+        name: new RegExp(clock.name)
+      })
+      .filter({
+        has: page.locator('.is-alias')
+      })
+      .click();
+
+    // Assert that two recent objects are displayed and one of them is an alias
+    expect(await recentObjectsList.getByRole('listitem', { name: clock.name }).count()).toBe(2);
+    expect(await recentObjectsList.locator('.is-alias').count()).toBe(1);
+
+    // Assert that the alias and the original's breadcrumbs are different
+    const clockBreadcrumbs = recentObjectsList
+      .getByRole('listitem', { name: clock.name })
+      .getByRole('navigation');
+    expect(await clockBreadcrumbs.count()).toBe(2);
+    expect(await clockBreadcrumbs.nth(0).innerText()).not.toEqual(
+      await clockBreadcrumbs.nth(1).innerText()
+    );
+  });
+  test('Enforces a limit of 20 recent objects and clears the recent objects', async ({ page }) => {
+    // Creating 21 objects takes a while, so increase the timeout
+    test.slow();
+
+    // Assert that the list initially contains 3 objects (clock, folder, my items)
+    expect(await recentObjectsList.locator('.c-recentobjects-listitem').count()).toBe(3);
+
+    let lastFolder;
+    let lastClock;
+    // Create 19 more objects (3 in beforeEach() + 18 new = 21 total)
+    for (let i = 0; i < 9; i++) {
+      lastFolder = await createDomainObjectWithDefaults(page, {
+        type: 'Folder',
+        parent: lastFolder?.uuid
+      });
+      lastClock = await createDomainObjectWithDefaults(page, {
+        type: 'Clock',
+        parent: lastFolder?.uuid
+      });
+    }
+
+    // Assert that the list contains 20 objects
+    expect(await recentObjectsList.locator('.c-recentobjects-listitem').count()).toBe(20);
+
+    // Collapse the tree
+    await page.getByTitle('Collapse all tree items').click();
+    const lastFolderTreeItem = page.getByRole('tree', { name: 'Main Tree' }).getByRole('treeitem', {
+      name: lastFolder.name,
+      expanded: true
+    });
+    const lastClockTreeItem = page.getByRole('tree', { name: 'Main Tree' }).getByRole('treeitem', {
+      name: lastClock.name
+    });
+
+    // Test "Open and Scroll To" in a deeply nested tree, while we're here
+    await page.getByRole('button', { name: `Open and scroll to ${lastClock.name}` }).click();
+
+    // Assert that the Clock parent folder has expanded and the Clock is visible)
+    await expect(lastFolderTreeItem.locator('.c-disclosure-triangle')).toHaveClass(/--expanded/);
+    await expect(lastClockTreeItem).toBeVisible();
+
+    // Assert that the Clock treeitem is highlighted
+    await expect(lastClockTreeItem.locator('.c-tree__item')).toHaveClass(/is-targeted-item/);
+
+    // Wait for highlight animation to end
+    await waitForAnimations(lastClockTreeItem.locator('.c-tree__item'));
+
+    // Assert that the Clock treeitem is no longer highlighted
+    await expect(lastClockTreeItem.locator('.c-tree__item')).not.toHaveClass(/is-targeted-item/);
+
+    // Click the aria-label="Clear Recently Viewed" button
+    await page.getByRole('button', { name: 'Clear Recently Viewed' }).click();
+
+    // Click on the "OK" button in the confirmation dialog
+    await page.getByRole('button', { name: 'OK', exact: true }).click();
+
+    // Assert that the list is empty
+    expect(await recentObjectsList.locator('.c-recentobjects-listitem').count()).toBe(0);
+  });
+  test('Verify functionality of "clear" and "collapse pane" buttons', async ({ page }) => {
+    // Assert that the list initially contains 3 objects (clock, folder, my items)
+    expect(await recentObjectsList.locator('.c-recentobjects-listitem').count()).toBe(3);
+
+    // Assert that the button is enabled
+    expect(await page.getByRole('button', { name: 'Clear Recently Viewed' }).isEnabled()).toBe(
+      true
+    );
+
+    // Click the aria-label="Clear Recently Viewed" button
+    await page.getByRole('button', { name: 'Clear Recently Viewed' }).click();
+
+    // Click on the "OK" button in the confirmation dialog
+    await page.getByRole('button', { name: 'OK', exact: true }).click();
+
+    // Assert that the list is empty
+    expect(await recentObjectsList.locator('.c-recentobjects-listitem').count()).toBe(0);
+
+    // Assert that the button is disabled
+    expect(await page.getByRole('button', { name: 'Clear Recently Viewed' }).isEnabled()).toBe(
+      false
+    );
+
+    // Navigate to folder object
+    await page.goto(folderA.url);
+
+    // Assert that the list contains 1 object
+    expect(await recentObjectsList.locator('.c-recentobjects-listitem').count()).toBe(1);
+
+    // Assert that the button is enabled
+    expect(await page.getByRole('button', { name: 'Clear Recently Viewed' }).isEnabled()).toBe(
+      true
+    );
+
+    // Assert initial state of pane and collapse the Recent Objects panel
+    await expect(page.getByLabel('Expand Recently Viewed Pane')).toBeHidden();
+    await expect(page.getByLabel('Collapse Recently Viewed Pane')).toBeVisible();
+    await page.getByLabel('Collapse Recently Viewed Pane').click();
+
+    // Assert that the "Expand Recently Viewed Pane" button is visible
+    // and that the "Collapse Recently Viewed Pane" button is hidden
+    await expect(page.getByLabel('Expand Recently Viewed Pane')).toBeVisible();
+    await expect(page.getByLabel('Collapse Recently Viewed Pane')).toBeHidden();
+
+    // Expand the Recent Objects panel by clicking on the "Expand Recently Viewed Pane" button
+    await page.getByLabel('Expand Recently Viewed Pane').click();
+
+    // Assert that the "Expand Recently Viewed Pane" button is hidden
+    // and that the "Collapse Recently Viewed Pane" button is visible
+    await expect(page.getByLabel('Expand Recently Viewed Pane')).toBeHidden();
+    await expect(page.getByLabel('Collapse Recently Viewed Pane')).toBeVisible();
+  });
+
+  function assertInitialRecentObjectsListState() {
+    return Promise.all([
+      expect(recentObjectsList.getByRole('listitem', { name: clock.name })).toBeVisible(),
+      expect(recentObjectsList.getByRole('listitem', { name: folderA.name })).toBeVisible(),
+      expect(
+        recentObjectsList
+          .getByRole('listitem', { name: clock.name })
+          .locator('a')
+          .getByText(folderA.name)
+      ).toBeVisible(),
+      expect(recentObjectsList.getByRole('listitem').nth(0).getByText(clock.name)).toBeVisible(),
+      expect(
+        recentObjectsList
+          .getByRole('listitem', { name: clock.name })
+          .locator('a')
+          .getByText(folderA.name)
+      ).toBeVisible(),
+      expect(recentObjectsList.getByRole('listitem').nth(3).getByText(folderA.name)).toBeVisible()
+    ]);
+  }
+});
diff --git a/e2e/tests/functional/renaming.e2e.spec.js b/e2e/tests/functional/renaming.e2e.spec.js
new file mode 100644
index 00000000000..f201c07028c
--- /dev/null
+++ b/e2e/tests/functional/renaming.e2e.spec.js
@@ -0,0 +1,75 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests for renaming objects, and their global application effects.
+*/
+
+import { createDomainObjectWithDefaults, renameObjectFromContextMenu } from '../../appActions.js';
+import { expect, test } from '../../baseFixtures.js';
+
+test.describe('Renaming objects', () => {
+  test.beforeEach(async ({ page }) => {
+    // Go to baseURL
+    await page.goto('./', { waitUntil: 'networkidle' });
+  });
+
+  test('When renaming objects, the browse bar and various components all update', async ({
+    page
+  }) => {
+    const folder = await createDomainObjectWithDefaults(page, {
+      type: 'Folder'
+    });
+    // Create a new 'Clock' object with default settings
+    const clock = await createDomainObjectWithDefaults(page, {
+      type: 'Clock',
+      parent: folder.uuid
+    });
+
+    // Rename
+    clock.name = `${clock.name}-NEW!`;
+    await renameObjectFromContextMenu(page, clock.url, clock.name);
+    // check inspector for new name
+    const titleValue = await page
+      .getByLabel('Title inspector properties')
+      .getByLabel('inspector property value')
+      .textContent();
+    expect(titleValue).toBe(clock.name);
+    // check browse bar for new name
+    await expect(page.locator(`.l-browse-bar >> text=${clock.name}`)).toBeVisible();
+    // check tree item for new name
+    await expect(
+      page.getByRole('listitem', {
+        name: clock.name
+      })
+    ).toBeVisible();
+    // check recent objects for new name
+    await expect(
+      page.getByRole('navigation', {
+        name: clock.name
+      })
+    ).toBeVisible();
+    // check title for new name
+    const title = await page.title();
+    expect(title).toBe(clock.name);
+  });
+});
diff --git a/e2e/tests/functional/search.e2e.spec.js b/e2e/tests/functional/search.e2e.spec.js
new file mode 100644
index 00000000000..ccc0163b182
--- /dev/null
+++ b/e2e/tests/functional/search.e2e.spec.js
@@ -0,0 +1,369 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/**
+ * This test suite is dedicated to tests which verify search functionalities.
+ */
+
+import { v4 as uuid } from 'uuid';
+
+import { createDomainObjectWithDefaults } from '../../appActions.js';
+import { expect, test } from '../../pluginFixtures.js';
+
+test.describe('Grand Search', () => {
+  let grandSearchInput;
+
+  test.beforeEach(async ({ page }) => {
+    grandSearchInput = page
+      .getByLabel('OpenMCT Search')
+      .getByRole('searchbox', { name: 'Search Input' });
+
+    // Go to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+  });
+
+  test('Can search for objects, and subsequent search dropdown behaves properly', async ({
+    page,
+    openmctConfig
+  }) => {
+    const { myItemsFolderName } = openmctConfig;
+
+    const createdObjects = await createObjectsForSearch(page);
+
+    // Go back into edit mode for the display layout
+    await page.getByRole('button', { name: 'Edit Object' }).click();
+
+    await grandSearchInput.click();
+    await grandSearchInput.fill('Cl');
+
+    await expect(page.getByLabel('Object Search Result').first()).toContainText(
+      `Clock A ${myItemsFolderName} Red Folder Blue Folder`
+    );
+    await expect(page.getByLabel('Object Search Result').nth(1)).toContainText(
+      `Clock B ${myItemsFolderName} Red Folder Blue Folder`
+    );
+    await expect(page.getByLabel('Object Search Result').nth(2)).toContainText(
+      `Clock C ${myItemsFolderName} Red Folder Blue Folder`
+    );
+    await expect(page.getByLabel('Object Search Result').nth(3)).toContainText(
+      `Clock D ${myItemsFolderName} Red Folder Blue Folder`
+    );
+    // Click the Elements pool to dismiss the search menu
+    await page.getByRole('tab', { name: 'Elements' }).click();
+    await expect(page.getByLabel('Object Search Result').first()).toBeHidden();
+
+    await grandSearchInput.click();
+    await page.getByLabel('OpenMCT Search').getByText('Clock A').click();
+    await expect(page.getByRole('dialog', { name: 'Preview Container' })).toBeVisible();
+
+    // Close the Preview window
+    await page.getByRole('button', { name: 'Close' }).click();
+    await expect(page.getByLabel('Object Search Result').first()).toBeVisible();
+    await expect(page.getByLabel('Object Search Result').first()).toContainText(
+      `Clock A ${myItemsFolderName} Red Folder Blue Folder`
+    );
+
+    await page.getByLabel('Object Search Result').first().click();
+    await expect(page.getByLabel('Object Search Result').first()).toBeHidden();
+
+    await grandSearchInput.fill('foo');
+    await expect(page.getByLabel('Object Search Result').first()).toBeHidden();
+
+    // Click text=Snapshot Save and Finish Editing Save and Continue Editing >> button >> nth=1
+    await page.getByRole('button', { name: 'Save' }).click();
+
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+    // Click [aria-label="OpenMCT Search"] [aria-label="Search Input"]
+    await grandSearchInput.click();
+    // Fill [aria-label="OpenMCT Search"] [aria-label="Search Input"]
+    await grandSearchInput.fill('Cl');
+    await Promise.all([
+      page.waitForNavigation(),
+      page.getByLabel('OpenMCT Search').getByText('Clock A').click()
+    ]);
+    await expect(page.getByRole('status', { name: 'Clock', exact: true })).toBeVisible();
+
+    await grandSearchInput.fill('Disp');
+    await expect(page.getByLabel('Object Search Result').first()).toContainText(
+      createdObjects.displayLayout.name
+    );
+    await expect(page.getByLabel('Object Search Result').first()).not.toContainText('Folder');
+
+    await grandSearchInput.fill('Clock C');
+    await expect(page.getByLabel('Object Search Result').first()).toContainText(
+      `Clock C ${myItemsFolderName} Red Folder Blue Folder`
+    );
+
+    await grandSearchInput.fill('Cloc');
+    await expect(page.getByLabel('Object Search Result').first()).toContainText(
+      `Clock A ${myItemsFolderName} Red Folder Blue Folder`
+    );
+    await expect(page.getByLabel('Object Search Result').nth(1)).toContainText(
+      `Clock B ${myItemsFolderName} Red Folder Blue Folder`
+    );
+    await expect(page.getByLabel('Object Search Result').nth(2)).toContainText(
+      `Clock C ${myItemsFolderName} Red Folder Blue Folder`
+    );
+    await expect(page.getByLabel('Object Search Result').nth(3)).toContainText(
+      `Clock D ${myItemsFolderName} Red Folder Blue Folder`
+    );
+
+    await grandSearchInput.click();
+    await grandSearchInput.fill('Sine');
+  });
+
+  test('Clicking on a search result changes the URL even if the same type is already selected', async ({
+    page
+  }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7303'
+    });
+
+    const { sineWaveGeneratorAlpha, sineWaveGeneratorBeta } = await createObjectsForSearch(page);
+    await grandSearchInput.click();
+    await grandSearchInput.fill('Sine');
+    await waitForSearchCompletion(page);
+    await page.getByLabel('OpenMCT Search').getByText('Sine Wave Generator Alpha').click();
+    const alphaPattern = new RegExp(sineWaveGeneratorAlpha.url.substring(1));
+    await expect(page).toHaveURL(alphaPattern);
+    await grandSearchInput.click();
+    await page.getByLabel('OpenMCT Search').getByText('Sine Wave Generator Beta').click();
+    const betaPattern = new RegExp(sineWaveGeneratorBeta.url.substring(1));
+    await expect(page).toHaveURL(betaPattern);
+  });
+
+  test('Validate empty search result', async ({ page }) => {
+    // Invalid search for objects
+    await grandSearchInput.fill('not found');
+
+    // Wait for search to complete
+    await waitForSearchCompletion(page);
+
+    // Get the search results
+    const searchResults = page.getByRole('listitem', { name: 'Object Search Result' });
+
+    // Verify that no results are found
+    expect(await searchResults.count()).toBe(0);
+
+    // Verify proper message appears
+    await expect(page.getByText('No results found')).toBeVisible();
+  });
+
+  test('Validate single object in search result @couchdb', async ({ page }) => {
+    // Create a folder object
+    const folderName = uuid();
+    await createDomainObjectWithDefaults(page, {
+      type: 'folder',
+      name: folderName
+    });
+
+    // Full search for object
+    await grandSearchInput.fill(folderName);
+
+    // Wait for search to complete
+    await waitForSearchCompletion(page);
+
+    // Get the search results
+    const searchResults = page.getByLabel('Object Search Result');
+
+    // Verify that one result is found
+    await expect(searchResults).toBeVisible();
+    expect(await searchResults.count()).toBe(1);
+    await expect(searchResults).toContainText(folderName);
+  });
+
+  test('Search results are debounced @couchdb', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/6179'
+    });
+    await createObjectsForSearch(page);
+
+    let networkRequests = [];
+    page.on('request', (request) => {
+      const searchRequest =
+        request.url().endsWith('_find') || request.url().includes('by_keystring');
+      const fetchRequest = request.resourceType() === 'fetch';
+      if (searchRequest && fetchRequest) {
+        networkRequests.push(request);
+      }
+    });
+
+    // Full search for object
+    await grandSearchInput.pressSequentially('Clock', { delay: 100 });
+
+    // Wait for search to finish
+    await waitForSearchCompletion(page);
+
+    // Network requests for the composite telemetry with multiple items should be:
+    // 1.  batched request for latest telemetry using the bulk API
+    expect(networkRequests.length).toBe(1);
+
+    await expect(page.getByRole('list', { name: 'Object Results' })).toContainText('Clock A');
+  });
+
+  test('Slowly typing after search debounce will abort requests @couchdb', async ({ page }) => {
+    let requestWasAborted = false;
+    await createObjectsForSearch(page);
+    page.on('requestfailed', (request) => {
+      // check if the request was aborted
+      if (request.failure().errorText === 'net::ERR_ABORTED') {
+        requestWasAborted = true;
+      }
+    });
+
+    // Intercept and delay request
+    const delayInMs = 100;
+
+    await page.route('**', async (route, request) => {
+      await new Promise((resolve) => setTimeout(resolve, delayInMs));
+      route.continue();
+    });
+
+    // Slowly type after search delay
+    const searchInput = page.getByRole('searchbox', { name: 'Search Input' });
+    await searchInput.pressSequentially('Clock', { delay: 200 });
+    await expect(page.getByText('Clock B').first()).toBeVisible();
+
+    expect(requestWasAborted).toBe(true);
+  });
+
+  test('Validate multiple objects in search results return partial matches', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/4667'
+    });
+
+    // Create folder objects
+    const folderName1 = 'e928a26e-e924-4ea0';
+    const folderName2 = 'e928a26e-e924-4001';
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      name: folderName1
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      name: folderName2
+    });
+
+    // Partial search for objects
+    await grandSearchInput.fill('e928a26e');
+
+    // Wait for search to finish
+    await waitForSearchCompletion(page);
+
+    const searchResultDropDown = page.getByRole('dialog', { name: 'Search Results' });
+
+    // Verify that the search result/s correctly match the search query
+    await expect(searchResultDropDown).toContainText(folderName1);
+    await expect(searchResultDropDown).toContainText(folderName2);
+
+    // Get the search results
+    const objectSearchResults = page.getByLabel('Object Search Result');
+    // Verify that two results are found
+    expect(await objectSearchResults.count()).toBe(2);
+  });
+});
+
+/**
+ * Wait for search to complete
+ *
+ * @param {import('@playwright/test').Page} page
+ */
+async function waitForSearchCompletion(page) {
+  // Wait loading spinner to disappear
+  await expect(
+    page
+      .getByRole('list', { name: 'Object Results' })
+      .or(
+        page
+          .getByRole('list', { name: 'Annotation Results' })
+          .or(page.getByText('No results found'))
+      )
+  ).toBeVisible();
+}
+
+/**
+ * Creates some domain objects for searching
+ * @param {import('@playwright/test').Page} page
+ */
+async function createObjectsForSearch(page) {
+  const redFolder = await createDomainObjectWithDefaults(page, {
+    type: 'Folder',
+    name: 'Red Folder'
+  });
+
+  const blueFolder = await createDomainObjectWithDefaults(page, {
+    type: 'Folder',
+    name: 'Blue Folder',
+    parent: redFolder.uuid
+  });
+
+  const clockA = await createDomainObjectWithDefaults(page, {
+    type: 'Clock',
+    name: 'Clock A',
+    parent: blueFolder.uuid
+  });
+  const clockB = await createDomainObjectWithDefaults(page, {
+    type: 'Clock',
+    name: 'Clock B',
+    parent: blueFolder.uuid
+  });
+  const clockC = await createDomainObjectWithDefaults(page, {
+    type: 'Clock',
+    name: 'Clock C',
+    parent: blueFolder.uuid
+  });
+  const clockD = await createDomainObjectWithDefaults(page, {
+    type: 'Clock',
+    name: 'Clock D',
+    parent: blueFolder.uuid
+  });
+
+  const sineWaveGeneratorAlpha = await createDomainObjectWithDefaults(page, {
+    type: 'Sine Wave Generator',
+    name: 'Sine Wave Generator Alpha'
+  });
+
+  const sineWaveGeneratorBeta = await createDomainObjectWithDefaults(page, {
+    type: 'Sine Wave Generator',
+    name: 'Sine Wave Generator Beta'
+  });
+
+  const displayLayout = await createDomainObjectWithDefaults(page, {
+    type: 'Display Layout'
+  });
+
+  return {
+    redFolder,
+    blueFolder,
+    clockA,
+    clockB,
+    clockC,
+    clockD,
+    displayLayout,
+    sineWaveGeneratorAlpha,
+    sineWaveGeneratorBeta
+  };
+}
diff --git a/e2e/tests/functional/smoke.e2e.spec.js b/e2e/tests/functional/smoke.e2e.spec.js
new file mode 100644
index 00000000000..316edba50ee
--- /dev/null
+++ b/e2e/tests/functional/smoke.e2e.spec.js
@@ -0,0 +1,58 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which can quickly verify that any openmct installation is
+operable and that any type of testing can proceed.
+
+Ideally, smoke tests should make zero assumptions about how and where they are run. This makes them
+more resilient to change and therefor a better indicator of failure. Smoke tests will also run quickly
+as they cover a very "thin surface" of functionality.
+
+When deciding between authoring new smoke tests or functional tests, ask yourself "would I feel
+comfortable running this test during a live mission?" Avoid creating or deleting Domain Objects.
+Make no assumptions about the order that elements appear in the DOM.
+*/
+
+import { expect, test } from '../../pluginFixtures.js';
+
+test('Verify that the create button appears and that the Folder Domain Object is available for selection', async ({
+  page
+}) => {
+  //Go to baseURL
+  await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+  //Click the Create button
+  await page.getByRole('button', { name: 'Create' }).click();
+
+  // Verify that Create Folder appears in the dropdown
+  await expect(page.locator(':nth-match(:text("Folder"), 2)')).toBeEnabled();
+});
+
+test('Verify that My Items Tree appears', async ({ page, openmctConfig }) => {
+  const { myItemsFolderName } = openmctConfig;
+  //Go to baseURL
+  await page.goto('./');
+
+  //My Items to be visible
+  await expect(page.locator(`a:has-text("${myItemsFolderName}")`)).toBeEnabled();
+});
diff --git a/e2e/tests/functional/tooltips.e2e.spec.js b/e2e/tests/functional/tooltips.e2e.spec.js
new file mode 100644
index 00000000000..527593f2172
--- /dev/null
+++ b/e2e/tests/functional/tooltips.e2e.spec.js
@@ -0,0 +1,467 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which can quickly verify that any openmct installation is
+operable and that any type of testing can proceed.
+
+Ideally, smoke tests should make zero assumptions about how and where they are run. This makes them
+more resilient to change and therefor a better indicator of failure. Smoke tests will also run quickly
+as they cover a very "thin surface" of functionality.
+
+When deciding between authoring new smoke tests or functional tests, ask yourself "would I feel
+comfortable running this test during a live mission?" Avoid creating or deleting Domain Objects.
+Make no assumptions about the order that elements appear in the DOM.
+*/
+
+import { createDomainObjectWithDefaults, expandEntireTree } from '../../appActions.js';
+import { expect, test } from '../../pluginFixtures.js';
+
+test.describe('Verify tooltips', () => {
+  let folder1;
+  let folder2;
+  let folder3;
+  let sineWaveObject1;
+  let sineWaveObject2;
+  let sineWaveObject3;
+
+  const swg1Path = 'My Items / Folder Foo / SWG 1';
+  const swg2Path = 'My Items / Folder Foo / Folder Bar / SWG 2';
+  const swg3Path = 'My Items / Folder Foo / Folder Bar / Folder Baz / SWG 3';
+
+  test.beforeEach(async ({ page, openmctConfig }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    folder1 = await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      name: 'Folder Foo'
+    });
+    folder2 = await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      name: 'Folder Bar',
+      parent: folder1.uuid
+    });
+    folder3 = await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      name: 'Folder Baz',
+      parent: folder2.uuid
+    });
+    // Create Sine Wave Generator
+    sineWaveObject1 = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'SWG 1',
+      parent: folder1.uuid
+    });
+    sineWaveObject1.path = swg1Path;
+    sineWaveObject2 = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'SWG 2',
+      parent: folder2.uuid
+    });
+    sineWaveObject2.path = swg2Path;
+    sineWaveObject3 = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'SWG 3',
+      parent: folder3.uuid
+    });
+    sineWaveObject3.path = swg3Path;
+
+    // Expand all folders
+    await expandEntireTree(page);
+  });
+
+  test('display correct paths for LAD tables', async ({ page, openmctConfig }) => {
+    // Create LAD table
+    await createDomainObjectWithDefaults(page, {
+      type: 'LAD Table',
+      name: 'Test LAD Table'
+    });
+    // Edit LAD table
+    await page.getByLabel('Edit Object').click();
+
+    // Add the Sine Wave Generator to the LAD table and save changes
+    await page.dragAndDrop(`text=${sineWaveObject1.name}`, '.c-lad-table-wrapper');
+    await page.dragAndDrop(`text=${sineWaveObject2.name}`, '.c-lad-table-wrapper');
+    await page.dragAndDrop(`text=${sineWaveObject3.name}`, '.c-lad-table-wrapper');
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    await page.keyboard.down('Control');
+
+    async function getToolTip(object) {
+      await page.locator('.c-create-button').hover();
+      await page.getByRole('cell', { name: object.name }).hover();
+      let tooltipText = await page.locator('.c-tooltip').textContent();
+      return tooltipText.replace('\n', '').trim();
+    }
+
+    expect(await getToolTip(sineWaveObject1)).toBe(sineWaveObject1.path);
+    expect(await getToolTip(sineWaveObject2)).toBe(sineWaveObject2.path);
+    expect(await getToolTip(sineWaveObject3)).toBe(sineWaveObject3.path);
+  });
+
+  test('display correct paths for expanded and collapsed plot legend items', async ({ page }) => {
+    // Create Overlay Plot
+    await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot',
+      name: 'Test Overlay Plots'
+    });
+    // Edit Overlay Plot
+    await page.getByLabel('Edit Object').click();
+
+    // Add the Sine Wave Generator to the LAD table and save changes
+    await page.dragAndDrop(`text=${sineWaveObject1.name}`, '.gl-plot');
+    await page.dragAndDrop(`text=${sineWaveObject2.name}`, '.gl-plot');
+    await page.dragAndDrop(`text=${sineWaveObject3.name}`, '.gl-plot');
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    await page.keyboard.down('Control');
+
+    async function getCollapsedLegendToolTip(object) {
+      await page.locator('.c-create-button').hover();
+      await page
+        .locator('.plot-series-name', { has: page.locator(`text="${object.name} Hz"`) })
+        .hover();
+      let tooltipText = await page.locator('.c-tooltip').textContent();
+      return tooltipText.replace('\n', '').trim();
+    }
+
+    async function getExpandedLegendToolTip(object) {
+      await page.locator('.c-create-button').hover();
+      await page
+        .locator('.plot-series-name', { has: page.locator(`text="${object.name}"`) })
+        .hover();
+      let tooltipText = await page.locator('.c-tooltip').textContent();
+      return tooltipText.replace('\n', '').trim();
+    }
+
+    expect(await getCollapsedLegendToolTip(sineWaveObject1)).toBe(sineWaveObject1.path);
+    expect(await getCollapsedLegendToolTip(sineWaveObject2)).toBe(sineWaveObject2.path);
+    expect(await getCollapsedLegendToolTip(sineWaveObject3)).toBe(sineWaveObject3.path);
+
+    await page.keyboard.up('Control');
+    await page.locator('.gl-plot-legend__view-control.c-disclosure-triangle').click();
+    await page.keyboard.down('Control');
+
+    expect(await getExpandedLegendToolTip(sineWaveObject1)).toBe(sineWaveObject1.path);
+    expect(await getExpandedLegendToolTip(sineWaveObject2)).toBe(sineWaveObject2.path);
+    expect(await getExpandedLegendToolTip(sineWaveObject3)).toBe(sineWaveObject3.path);
+  });
+
+  test('display correct paths when hovering over object labels', async ({ page }) => {
+    async function getObjectLabelTooltip(object) {
+      await page
+        .locator('.c-tree__item__name.c-object-label__name', {
+          has: page.locator(`text="${object.name}"`)
+        })
+        .click();
+      await page.keyboard.down('Control');
+      await page
+        .locator('.l-browse-bar__object-name.c-object-label__name', {
+          has: page.locator(`text="${object.name}"`)
+        })
+        .hover();
+      const tooltipText = await page.locator('.c-tooltip').textContent();
+      await page.keyboard.up('Control');
+      return tooltipText.replace('\n', '').trim();
+    }
+
+    expect(await getObjectLabelTooltip(sineWaveObject1)).toBe(sineWaveObject1.path);
+    expect(await getObjectLabelTooltip(sineWaveObject3)).toBe(sineWaveObject3.path);
+  });
+
+  test('display correct paths when hovering over display layout pane headers', async ({ page }) => {
+    // Create Overlay Plot
+    await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot',
+      name: 'Test Overlay Plot'
+    });
+    // Edit Overlay Plot
+    await page.getByLabel('Edit Object').click();
+    await page.dragAndDrop(`text=${sineWaveObject1.name}`, '.gl-plot');
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Create Stacked Plot
+    await createDomainObjectWithDefaults(page, {
+      type: 'Stacked Plot',
+      name: 'Test Stacked Plot'
+    });
+    // Edit Stacked Plot
+    await page.getByLabel('Edit Object').click();
+    await page.dragAndDrop(`text=${sineWaveObject2.name}`, '.c-plot--stacked.holder');
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Create Display Layout
+    await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Test Display Layout'
+    });
+    // Edit Display Layout
+    await page.getByLabel('Edit Object').click();
+
+    await page.dragAndDrop("text='Test Overlay Plot'", '.l-layout__grid-holder', {
+      targetPosition: { x: 0, y: 0 }
+    });
+    await page.dragAndDrop("text='Test Stacked Plot'", '.l-layout__grid-holder', {
+      targetPosition: { x: 0, y: 250 }
+    });
+    await page.dragAndDrop(`text=${sineWaveObject3.name}`, '.l-layout__grid-holder', {
+      targetPosition: { x: 500, y: 200 }
+    });
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    await page.keyboard.down('Control');
+
+    await page.getByText('Test Overlay Plot').nth(2).hover();
+    let tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe('My Items / Test Overlay Plot');
+
+    await page.keyboard.up('Control');
+    await page.locator('.c-plot-legend__view-control >> nth=0').click();
+    await page.keyboard.down('Control');
+    await page.locator('.plot-wrapper-expanded-legend .plot-series-name').first().hover();
+    tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe(sineWaveObject1.path);
+
+    await page.getByText('Test Stacked Plot').nth(2).hover();
+    tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe('My Items / Test Stacked Plot');
+
+    await page.getByText('SWG 3').nth(2).hover();
+    tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(sineWaveObject3.path).toBe(tooltipText);
+  });
+
+  test('display correct paths when hovering over flexible object labels', async ({ page }) => {
+    await createDomainObjectWithDefaults(page, {
+      type: 'Flexible Layout',
+      name: 'Test Flexible Layout'
+    });
+
+    await page.dragAndDrop(`text=${sineWaveObject1.name}`, '.c-fl__container >> nth=0');
+    await page.dragAndDrop(`text=${sineWaveObject3.name}`, '.c-fl__container >> nth=1');
+
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    await page.keyboard.down('Control');
+    await page.getByText('SWG 1').nth(2).hover();
+    let tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe(sineWaveObject1.path);
+
+    await page.getByText('SWG 3').nth(2).hover();
+    tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe(sineWaveObject3.path);
+  });
+
+  test('display correct paths when hovering over tab view labels', async ({ page }) => {
+    await createDomainObjectWithDefaults(page, {
+      type: 'Tabs View',
+      name: 'Test Tabs View'
+    });
+
+    await page.dragAndDrop(`text=${sineWaveObject1.name}`, '.c-tabs-view__tabs-holder');
+    await page.dragAndDrop(`text=${sineWaveObject3.name}`, '.c-tabs-view__tabs-holder');
+
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    await page.keyboard.down('Control');
+    await page.getByText('SWG 1').nth(2).hover();
+    let tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe(sineWaveObject1.path);
+
+    await page.getByText('SWG 3').nth(2).hover();
+    tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe(sineWaveObject3.path);
+  });
+
+  test('display correct paths when hovering tree items', async ({ page }) => {
+    await page.keyboard.down('Control');
+    await page.getByText('SWG 1').nth(0).hover();
+    let tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe(sineWaveObject1.path);
+
+    await page.getByText('SWG 3').nth(0).hover();
+    tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe(sineWaveObject3.path);
+  });
+
+  test('display correct paths when hovering search items', async ({ page }) => {
+    await page.getByRole('searchbox', { name: 'Search Input' }).click();
+    await page.fill('.c-search__input', 'SWG 3');
+
+    await page.keyboard.down('Control');
+    await page.locator('.c-gsearch-result__title').hover();
+    let tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe(sineWaveObject3.path);
+  });
+
+  test('display path for source telemetry when hovering over gauge', async ({ page }) => {
+    await createDomainObjectWithDefaults(page, {
+      type: 'Gauge',
+      name: 'Test Gauge'
+    });
+    await page.dragAndDrop(`text=${sineWaveObject3.name}`, '.c-gauge__wrapper');
+    await page.keyboard.down('Control');
+    // eslint-disable-next-line playwright/no-force-option
+    await page.locator('.c-gauge.c-dial').hover({ position: { x: 0, y: 0 }, force: true });
+    let tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe(sineWaveObject3.path);
+  });
+
+  test('display tooltip path for notebook embeds', async ({ page }) => {
+    await createDomainObjectWithDefaults(page, {
+      type: 'Notebook',
+      name: 'Test Notebook'
+    });
+
+    await page.dragAndDrop(`text=${sineWaveObject3.name}`, '.c-notebook__drag-area');
+    await page.keyboard.down('Control');
+    await page.locator('.c-ne__embed').hover();
+    let tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe(sineWaveObject3.path);
+  });
+
+  test.fixme('display tooltip path for telemetry table names', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7421'
+    });
+    // set endBound to 10 seconds after start bound
+    const url = await page.url();
+    const parsedUrl = new URL(url.replace('#', '!'));
+    const startBound = Number(parsedUrl.searchParams.get('tc.startBound'));
+    const tenSecondsInMilliseconds = 10 * 1000;
+    const endBound = startBound + tenSecondsInMilliseconds;
+    parsedUrl.searchParams.set('tc.endBound', endBound);
+    await page.goto(parsedUrl.href.replace('!', '#'));
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Telemetry Table',
+      name: 'Test Telemetry Table'
+    });
+
+    await page.dragAndDrop(`text=${sineWaveObject1.name}`, '.c-telemetry-table');
+    await page.dragAndDrop(`text=${sineWaveObject3.name}`, '.c-telemetry-table');
+
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+    await page.keyboard.down('Control');
+
+    await page.locator('.noselect > [title="SWG 3"]').first().hover();
+    let tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe(sineWaveObject3.path);
+
+    await page.locator('.noselect > [title="SWG 1"]').first().hover();
+    tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe(sineWaveObject1.path);
+  });
+
+  test('display tooltip path for recently viewed items', async ({ page }) => {
+    // drag up Recently Viewed pane
+    await page
+      .locator('.l-pane.l-pane--vertical-handle-before', {
+        hasText: 'Recently Viewed'
+      })
+      .locator('.l-pane__handle')
+      .hover();
+    await page.mouse.down();
+    await page.mouse.move(0, 300);
+    await page.mouse.up();
+
+    await page.keyboard.down('Control');
+    await page.getByLabel('Recent Objects').getByText(sineWaveObject3.name).hover();
+    let tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe(sineWaveObject3.path);
+
+    await page.getByLabel('Recent Objects').getByText(sineWaveObject2.name).hover();
+    tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe(sineWaveObject2.path);
+
+    await page.getByLabel('Recent Objects').getByText(sineWaveObject1.name).hover();
+    tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe(sineWaveObject1.path);
+  });
+
+  test('display tooltip path for time strips', async ({ page }) => {
+    // Create Time Strip
+    await createDomainObjectWithDefaults(page, {
+      type: 'Time Strip',
+      name: 'Test Time Strip'
+    });
+    // Edit Overlay Plot
+    await page.getByLabel('Edit Object').click();
+    await page.dragAndDrop(
+      `text=${sineWaveObject1.name}`,
+      '.c-object-view.is-object-type-time-strip'
+    );
+    await page.dragAndDrop(
+      `text=${sineWaveObject2.name}`,
+      '.c-object-view.is-object-type-time-strip'
+    );
+    await page.dragAndDrop(
+      `text=${sineWaveObject3.name}`,
+      '.c-object-view.is-object-type-time-strip'
+    );
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    await page.keyboard.down('Control');
+    await page.getByText(sineWaveObject1.name).nth(2).hover();
+    let tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe(sineWaveObject1.path);
+
+    await page.getByText(sineWaveObject2.name).nth(2).hover();
+    tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe(sineWaveObject2.path);
+
+    await page.getByText(sineWaveObject3.name).nth(2).hover();
+    tooltipText = await page.locator('.c-tooltip').textContent();
+    tooltipText = tooltipText.replace('\n', '').trim();
+    expect(tooltipText).toBe(sineWaveObject3.path);
+  });
+});
diff --git a/e2e/tests/functional/tree.e2e.spec.js b/e2e/tests/functional/tree.e2e.spec.js
new file mode 100644
index 00000000000..0db239205f7
--- /dev/null
+++ b/e2e/tests/functional/tree.e2e.spec.js
@@ -0,0 +1,248 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createDomainObjectWithDefaults, renameObjectFromContextMenu } from '../../appActions.js';
+import { expect, test } from '../../pluginFixtures.js';
+
+test.describe('Main Tree', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+  });
+
+  test('Creating a child object within a folder and immediately opening it shows the created object in the tree @couchdb', async ({
+    page
+  }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/5975'
+    });
+
+    const folder = await createDomainObjectWithDefaults(page, {
+      type: 'Folder'
+    });
+
+    await page.getByLabel('Show selected item in tree').click();
+
+    const clock = await createDomainObjectWithDefaults(page, {
+      type: 'Clock',
+      parent: folder.uuid
+    });
+
+    await expandTreePaneItemByName(page, folder.name);
+    await assertTreeItemIsVisible(page, clock.name);
+  });
+
+  test('Creating a child object on one tab and expanding its parent on the other shows the correct composition @2p', async ({
+    page,
+    openmctConfig
+  }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/6391'
+    });
+
+    const { myItemsFolderName } = openmctConfig;
+    const page2 = await page.context().newPage();
+
+    // Both pages: Go to baseURL
+    await Promise.all([
+      page.goto('./', { waitUntil: 'networkidle' }),
+      page2.goto('./', { waitUntil: 'networkidle' })
+    ]);
+
+    const page1Folder = await createDomainObjectWithDefaults(page, {
+      type: 'Folder'
+    });
+
+    await expandTreePaneItemByName(page2, myItemsFolderName);
+    await assertTreeItemIsVisible(page2, page1Folder.name);
+  });
+
+  test('Creating a child object on one tab and expanding its parent on the other shows the correct composition @couchdb @2p', async ({
+    page,
+    openmctConfig
+  }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/6391'
+    });
+
+    const { myItemsFolderName } = openmctConfig;
+    const page2 = await page.context().newPage();
+
+    // Both pages: Go to baseURL
+    await Promise.all([
+      page.goto('./', { waitUntil: 'networkidle' }),
+      page2.goto('./', { waitUntil: 'networkidle' })
+    ]);
+
+    const page1Folder = await createDomainObjectWithDefaults(page, {
+      type: 'Folder'
+    });
+
+    await expandTreePaneItemByName(page2, myItemsFolderName);
+    await assertTreeItemIsVisible(page2, page1Folder.name);
+  });
+
+  test('Renaming an object reorders the tree @unstable', async ({ page, openmctConfig }) => {
+    const { myItemsFolderName } = openmctConfig;
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      name: 'Foo'
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      name: 'Bar'
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      name: 'Baz'
+    });
+
+    const clock1 = await createDomainObjectWithDefaults(page, {
+      type: 'Clock',
+      name: 'aaa'
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Clock',
+      name: 'www'
+    });
+
+    // Expand the root folder
+    await expandTreePaneItemByName(page, myItemsFolderName);
+
+    await test.step('Reorders objects with the same tree depth', async () => {
+      await getAndAssertTreeItems(page, ['aaa', 'Bar', 'Baz', 'Foo', 'www']);
+      await renameObjectFromContextMenu(page, clock1.url, 'zzz');
+      await getAndAssertTreeItems(page, ['Bar', 'Baz', 'Foo', 'www', 'zzz']);
+    });
+
+    await test.step('Reorders links to objects as well as original objects', async () => {
+      await page.click('role=treeitem[name=/Bar/]');
+      await page.dragAndDrop('role=treeitem[name=/www/]', '.c-object-view');
+      await page.dragAndDrop('role=treeitem[name=/zzz/]', '.c-object-view');
+      await page.click('role=treeitem[name=/Baz/]');
+      await page.dragAndDrop('role=treeitem[name=/www/]', '.c-object-view');
+      await page.dragAndDrop('role=treeitem[name=/zzz/]', '.c-object-view');
+      await page.click('role=treeitem[name=/Foo/]');
+      await page.dragAndDrop('role=treeitem[name=/www/]', '.c-object-view');
+      await page.dragAndDrop('role=treeitem[name=/zzz/]', '.c-object-view');
+      // Expand the unopened folders
+      await expandTreePaneItemByName(page, 'Bar');
+      await expandTreePaneItemByName(page, 'Baz');
+      await expandTreePaneItemByName(page, 'Foo');
+
+      await renameObjectFromContextMenu(page, clock1.url, '___');
+      await getAndAssertTreeItems(page, [
+        '___',
+        'Bar',
+        '___',
+        'www',
+        'Baz',
+        '___',
+        'www',
+        'Foo',
+        '___',
+        'www',
+        'www'
+      ]);
+    });
+  });
+  test('Opening and closing an item before the request has been fulfilled will abort the request @couchdb', async ({
+    page,
+    openmctConfig
+  }) => {
+    const { myItemsFolderName } = openmctConfig;
+    let requestWasAborted = false;
+
+    page.on('requestfailed', (request) => {
+      // check if the request was aborted
+      if (request.failure().errorText === 'net::ERR_ABORTED') {
+        requestWasAborted = true;
+      }
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      name: 'Foo'
+    });
+
+    // Intercept and delay request
+    const delayInMs = 500;
+
+    await page.route('**', async (route, request) => {
+      await new Promise((resolve) => setTimeout(resolve, delayInMs));
+      route.continue();
+    });
+
+    // Quickly Expand/close the root folder
+    await page
+      .getByRole('button', {
+        name: `Expand ${myItemsFolderName} folder`
+      })
+      .dblclick({ delay: 400 });
+
+    expect(requestWasAborted).toBe(true);
+  });
+});
+
+/**
+ * @param {import('@playwright/test').Page} page
+ * @param {Array<string>} expected
+ */
+async function getAndAssertTreeItems(page, expected) {
+  const treeItems = page.locator('[role="treeitem"]');
+  const allTexts = await treeItems.allInnerTexts();
+  // Get rid of root folder ('My Items') as its position will not change
+  allTexts.shift();
+  expect(allTexts).toEqual(expected);
+}
+
+async function assertTreeItemIsVisible(page, name) {
+  const mainTree = page.getByRole('tree', {
+    name: 'Main Tree'
+  });
+  const treeItem = mainTree.getByRole('treeitem', {
+    name
+  });
+
+  await expect(treeItem).toBeVisible();
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ * @param {string} name
+ */
+async function expandTreePaneItemByName(page, name) {
+  const mainTree = page.getByRole('tree', {
+    name: 'Main Tree'
+  });
+  const treeItem = mainTree.getByRole('treeitem', {
+    name,
+    expanded: false
+  });
+  await treeItem.locator('.c-disclosure-triangle').click();
+}
diff --git a/e2e/tests/functional/userRoles.e2e.spec.js b/e2e/tests/functional/userRoles.e2e.spec.js
new file mode 100644
index 00000000000..455b096aab5
--- /dev/null
+++ b/e2e/tests/functional/userRoles.e2e.spec.js
@@ -0,0 +1,69 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { fileURLToPath } from 'url';
+
+import { expect, test } from '../../pluginFixtures.js';
+
+test.describe('User Roles', () => {
+  test('Role prompting', async ({ page }) => {
+    await page.addInitScript({
+      path: fileURLToPath(new URL('../../helper/addInitExampleUser.js', import.meta.url))
+    });
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // we have multiple available roles, so it should prompt the user
+    await expect(page.getByText('Select Role')).toBeVisible();
+    await page.getByRole('combobox').selectOption('driver');
+    await page.getByRole('button', { name: 'Select', exact: true }).click();
+    await expect(page.getByLabel('User Role')).toContainText('driver');
+
+    // attempt changing the role to another valid available role
+    await page.getByRole('button', { name: 'Change Role' }).click();
+    await page.getByRole('combobox').selectOption('flight');
+    await page.getByRole('button', { name: 'Select', exact: true }).click();
+    await expect(page.getByLabel('User Role')).toContainText('flight');
+
+    // reload page
+    await page.reload({ waitUntil: 'domcontentloaded' });
+    // should still be logged in as flight, and tell the user as much
+    await expect(page.getByLabel('User Role')).toContainText('flight');
+    await expect(page.getByText("You're logged in as role flight")).toBeVisible();
+
+    // change active role in local storage to "apple_role", a bogus role not in the list of available roles
+    await page.evaluate(() => {
+      const openmct = window.openmct;
+      openmct.user.setActiveRole('apple_role');
+    });
+
+    // reload page
+    await page.reload({ waitUntil: 'domcontentloaded' });
+
+    // verify that role is prompted
+    await expect(page.getByText('Select Role')).toBeVisible();
+
+    // select real role of "driver"
+    await page.getByRole('combobox').selectOption('driver');
+    await page.getByRole('button', { name: 'Select', exact: true }).click();
+    await expect(page.getByLabel('User Role')).toContainText('driver');
+  });
+});
diff --git a/e2e/tests/mobile/smoke.e2e.spec.js b/e2e/tests/mobile/smoke.e2e.spec.js
new file mode 100644
index 00000000000..d787b5c987b
--- /dev/null
+++ b/e2e/tests/mobile/smoke.e2e.spec.js
@@ -0,0 +1,75 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which can quickly verify that any openmct installation is
+operable and that any type of testing can proceed.
+
+Ideally, smoke tests should make zero assumptions about how and where they are run. This makes them
+more resilient to change and therefor a better indicator of failure. Smoke tests will also run quickly
+as they cover a very "thin surface" of functionality.
+
+When deciding between authoring new smoke tests or functional tests, ask yourself "would I feel
+comfortable running this test during a live mission?" Avoid creating or deleting Domain Objects.
+Make no assumptions about the order that elements appear in the DOM.
+*/
+
+import { expect, test } from '../../pluginFixtures.js';
+test('Verify that My Items Tree appears @mobile', async ({ page, openmctConfig }) => {
+  const { myItemsFolderName } = openmctConfig;
+  //Go to baseURL
+  await page.goto('./');
+  //My Items to be visible
+  await expect(page.getByRole('treeitem', { name: `${myItemsFolderName}` })).toBeVisible();
+});
+test('Verify that user can search @mobile', async ({ page }) => {
+  //For now, this test is going to be hardcoded against './test-data/display_layout_with_child_layouts.json'
+  await page.goto('./');
+  await page.getByRole('searchbox', { name: 'Search Input' }).click();
+  await page.getByRole('searchbox', { name: 'Search Input' }).fill('Parent Display Layout');
+  //Search Results appear in search modal
+  await expect(page.getByLabel('Object Results').getByText('Parent Display Layout')).toBeVisible();
+  //Clicking on the search result takes you to the object
+  await page.getByLabel('Object Results').getByText('Parent Display Layout').click();
+  await page.getByTitle('Collapse Browse Pane').click();
+  await expect(page.getByRole('main').getByText('Parent Display Layout')).toBeVisible();
+});
+test('Remove Object and confirmation dialog @mobile', async ({ page }) => {
+  await page.goto('./');
+  await page.getByRole('searchbox', { name: 'Search Input' }).click();
+  await page.getByRole('searchbox', { name: 'Search Input' }).fill('Parent Display Layout');
+  //Search Results appear in search modal
+  //Clicking on the search result takes you to the object
+  await page.getByLabel('Object Results').getByText('Parent Display Layout').click();
+  await page.getByTitle('Collapse Browse Pane').click();
+  await expect(page.getByRole('main').getByText('Parent Display Layout')).toBeVisible();
+  //Verify both objects are in view
+  await expect(await page.getByLabel('Child Layout 1 Layout')).toBeVisible();
+  await expect(await page.getByLabel('Child Layout 2 Layout')).toBeVisible();
+  //Remove First Object to bring up confirmation dialog
+  await page.getByLabel('View menu items').nth(1).click();
+  await page.getByLabel('Remove').click();
+  await page.getByRole('button', { name: 'OK' }).click();
+  //Verify that the object is removed
+  await expect(await page.getByLabel('Child Layout 1 Layout')).toBeVisible();
+  expect(await page.getByLabel('Child Layout 2 Layout').count()).toBe(0);
+});
diff --git a/e2e/tests/performance/contract/imagery.contract.perf.spec.js b/e2e/tests/performance/contract/imagery.contract.perf.spec.js
new file mode 100644
index 00000000000..c87e6df5eab
--- /dev/null
+++ b/e2e/tests/performance/contract/imagery.contract.perf.spec.js
@@ -0,0 +1,190 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to performance tests to ensure that testability of performance
+is not broken upstream on Open MCT. Any assumptions made downstream will be tested here
+
+TODO:
+ - Update resolution of performance config
+ - Add Performance Observer on init to push all performance marks
+ - Move client CDP connection to before or to a fixture
+ -
+
+*/
+
+import { expect, test } from '@playwright/test';
+
+const filePath = 'e2e/test-data/PerformanceDisplayLayout.json';
+
+test.describe('Performance tests', () => {
+  test.beforeEach(async ({ page, browser }, testInfo) => {
+    // Go to baseURL
+    await page.goto('./', { waitUntil: 'networkidle' });
+
+    // Click a:has-text("My Items")
+    await page.locator('a:has-text("My Items")').click({
+      button: 'right'
+    });
+
+    // Click text=Import from JSON
+    await page.locator('text=Import from JSON').click();
+
+    // Upload Performance Display Layout.json
+    await page.setInputFiles('#fileElem', filePath);
+
+    // Click text=OK
+    await page.locator('button:has-text("OK")').click();
+
+    await expect(
+      page.locator('a:has-text("Performance Display Layout Display Layout")')
+    ).toBeVisible();
+
+    //Create a Chrome Performance Timeline trace to store as a test artifact
+    console.log('\n==== Devtools: startTracing ====\n');
+    await browser.startTracing(page, {
+      path: `${testInfo.outputPath()}-trace.json`,
+      screenshots: true
+    });
+  });
+  test.afterEach(async ({ page, browser }) => {
+    console.log('\n==== Devtools: stopTracing ====\n');
+    await browser.stopTracing();
+
+    /* Measurement Section
+        / The following section includes a block of performance measurements.
+        */
+    //Get time difference between viewlarge actionability and evaluate time
+    await page.evaluate(() =>
+      window.performance.measure(
+        'machine-time-difference',
+        'viewlarge.start',
+        'viewLarge.start.test'
+      )
+    );
+
+    //Get StartTime
+    const startTime = await page.evaluate(() => window.performance.timing.navigationStart);
+    console.log('window.performance.timing.navigationStart', startTime);
+
+    //Get All Performance Marks
+    const getAllMarksJson = await page.evaluate(() =>
+      JSON.stringify(window.performance.getEntriesByType('mark'))
+    );
+    const getAllMarks = JSON.parse(getAllMarksJson);
+    console.log('window.performance.getEntriesByType("mark")', getAllMarks);
+
+    //Get All Performance Measures
+    const getAllMeasuresJson = await page.evaluate(() =>
+      JSON.stringify(window.performance.getEntriesByType('measure'))
+    );
+    const getAllMeasures = JSON.parse(getAllMeasuresJson);
+    console.log('window.performance.getEntriesByType("measure")', getAllMeasures);
+  });
+  /* The following test will navigate to a previously created Performance Display Layout and measure the
+    /  following metrics:
+    /  - ElementResourceTiming
+    /  - Interaction Timing
+    */
+  test('Embedded View Large for Imagery is performant in Fixed Time', async ({ page, browser }) => {
+    const client = await page.context().newCDPSession(page);
+    // Tell the DevTools session to record performance metrics
+    // https://chromedevtools.github.io/devtools-protocol/tot/Performance/#method-getMetrics
+    await client.send('Performance.enable');
+    // Go to baseURL
+    await page.goto('./');
+
+    // Search Available after Launch
+    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
+    await page.evaluate(() => window.performance.mark('search-available'));
+    // Fill Search input
+    await page
+      .locator('[aria-label="OpenMCT Search"] input[type="search"]')
+      .fill('Performance Display Layout');
+    await page.evaluate(() => window.performance.mark('search-entered'));
+    //Search Result Appears and is clicked
+    await Promise.all([
+      page.waitForNavigation(),
+      page.locator('a:has-text("Performance Display Layout")').first().click(),
+      page.evaluate(() => window.performance.mark('click-search-result'))
+    ]);
+
+    //Time to Example Imagery Frame loads within Display Layout
+    await page.waitForSelector('.c-imagery__main-image__bg', { state: 'visible' });
+    //Time to Example Imagery object loads
+    await page.waitForSelector('.c-imagery__main-image__background-image', { state: 'visible' });
+
+    //Get background-image url from background-image css prop
+    const backgroundImage = await page.locator('.c-imagery__main-image__background-image');
+    let backgroundImageUrl = await backgroundImage.evaluate((el) => {
+      return window
+        .getComputedStyle(el)
+        .getPropertyValue('background-image')
+        .match(/url\(([^)]+)\)/)[1];
+    });
+    backgroundImageUrl = backgroundImageUrl.slice(1, -1); //forgive me, padre
+    console.log('backgroundImageurl ' + backgroundImageUrl);
+
+    //Get ResourceTiming of background-image jpg
+    const resourceTimingJson = await page.evaluate(
+      (bgImageUrl) => JSON.stringify(window.performance.getEntriesByName(bgImageUrl).pop()),
+      backgroundImageUrl
+    );
+    console.log('resourceTimingJson ' + resourceTimingJson);
+
+    //Open Large view
+    await page.locator('button:has-text("Large View")').click(); //This action includes the performance.mark named 'viewLarge.start'
+    await page.evaluate(() => window.performance.mark('viewLarge.start.test')); //This is a mark only to compare evaluate timing
+
+    //Time to Imagery Rendered in Large Frame
+    await page.waitForSelector('.c-imagery__main-image__bg', { state: 'visible' });
+    await page.evaluate(() => window.performance.mark('background-image-frame'));
+
+    //Time to Example Imagery object loads
+    await page.waitForSelector('.c-imagery__main-image__background-image', { state: 'visible' });
+    await page.evaluate(() => window.performance.mark('background-image-visible'));
+
+    // Get Current number of images in thumbstrip
+    await page.waitForSelector('.c-imagery__thumb');
+    const thumbCount = await page.locator('.c-imagery__thumb').count();
+    console.log('number of thumbs rendered ' + thumbCount);
+    await page.locator('.c-imagery__thumb').last().click();
+
+    //Get ResourceTiming of all jpg resources
+    const resourceTimingJson2 = await page.evaluate(() =>
+      JSON.stringify(window.performance.getEntriesByType('resource'))
+    );
+    const resourceTiming = JSON.parse(resourceTimingJson2);
+    const jpgResourceTiming = resourceTiming.find((element) => element.name.includes('.jpg'));
+    console.log('jpgResourceTiming ' + JSON.stringify(jpgResourceTiming));
+
+    // Click Close Icon
+    await page.locator('[aria-label="Close"]').click();
+    await page.evaluate(() => window.performance.mark('view-large-close-button'));
+
+    //await client.send('HeapProfiler.enable');
+    await client.send('HeapProfiler.collectGarbage');
+
+    let performanceMetrics = await client.send('Performance.getMetrics');
+    console.log(performanceMetrics.metrics);
+  });
+});
diff --git a/e2e/tests/performance/contract/notebook.contract.perf.spec.js b/e2e/tests/performance/contract/notebook.contract.perf.spec.js
new file mode 100644
index 00000000000..a1a96e3a284
--- /dev/null
+++ b/e2e/tests/performance/contract/notebook.contract.perf.spec.js
@@ -0,0 +1,166 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to performance tests to ensure that testability of performance
+is not broken upstream on Open MCT. Any assumptions made downstream will be tested here.
+
+TODO:
+ - Update resolution of performance config
+ - Add Performance Observer on init to push all performance marks
+ - Move client CDP connection to before or to a fixture
+
+*/
+
+import { expect, test } from '@playwright/test';
+
+const notebookFilePath = 'e2e/test-data/PerformanceNotebook.json';
+
+test.describe('Performance tests', () => {
+  test.beforeEach(async ({ page, browser }, testInfo) => {
+    // Go to baseURL
+    await page.goto('./', { waitUntil: 'networkidle' });
+
+    // Click a:has-text("My Items")
+    await page.locator('a:has-text("My Items")').click({
+      button: 'right'
+    });
+
+    // Click text=Import from JSON
+    await page.locator('text=Import from JSON').click();
+
+    // Upload Performance Display Layout.json
+    await page.setInputFiles('#fileElem', notebookFilePath);
+
+    // TODO Fix this
+    await page.locator('text=OK >> nth=1').click();
+
+    await expect(page.locator('a:has-text("Performance Notebook")')).toBeVisible();
+
+    //Create a Chrome Performance Timeline trace to store as a test artifact
+    console.log('\n==== Devtools: startTracing ====\n');
+    await browser.startTracing(page, {
+      path: `${testInfo.outputPath()}-trace.json`,
+      screenshots: true
+    });
+  });
+  test.afterEach(async ({ page, browser }) => {
+    console.log('\n==== Devtools: stopTracing ====\n');
+    await browser.stopTracing();
+
+    /* Measurement Section
+        / The following section includes a block of performance measurements.
+        */
+    const startTime = await page.evaluate(() => window.performance.timing.navigationStart);
+    console.log('window.performance.timing.navigationStart', startTime);
+
+    //Get All Performance Marks
+    const getAllMarksJson = await page.evaluate(() =>
+      JSON.stringify(window.performance.getEntriesByType('mark'))
+    );
+    const getAllMarks = JSON.parse(getAllMarksJson);
+    console.log('window.performance.getEntriesByType("mark")', getAllMarks);
+
+    //Get All Performance Measures
+    const getAllMeasuresJson = await page.evaluate(() =>
+      JSON.stringify(window.performance.getEntriesByType('measure'))
+    );
+    const getAllMeasures = JSON.parse(getAllMeasuresJson);
+    console.log('window.performance.getEntriesByType("measure")', getAllMeasures);
+  });
+  /* The following test will navigate to a previously created Performance Display Layout and measure the
+    /  following metrics:
+    /  - ElementResourceTiming
+    /  - Interaction Timing
+    */
+  test('Notebook Search, Add Entry, Update Entry are performant', async ({ page, browser }) => {
+    const client = await page.context().newCDPSession(page);
+    // Tell the DevTools session to record performance metrics
+    // https://chromedevtools.github.io/devtools-protocol/tot/Performance/#method-getMetrics
+    await client.send('Performance.enable');
+    // Go to baseURL
+    await page.goto('./');
+
+    // To to Search Available after Launch
+    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
+    await page.evaluate(() => window.performance.mark('search-available'));
+    // Fill Search input
+    await page
+      .locator('[aria-label="OpenMCT Search"] input[type="search"]')
+      .fill('Performance Notebook');
+    await page.evaluate(() => window.performance.mark('search-entered'));
+    //Search Result Appears and is clicked
+    await Promise.all([
+      page.waitForNavigation(),
+      page.locator('a:has-text("Performance Notebook")').first().click(),
+      page.evaluate(() => window.performance.mark('click-search-result'))
+    ]);
+
+    await page.waitForSelector('.c-tree__item c-tree-and-search__loading loading', {
+      state: 'hidden'
+    });
+    await page.evaluate(() => window.performance.mark('search-spinner-gone'));
+
+    await page.waitForSelector('.l-browse-bar__object-name', { state: 'visible' });
+    await page.evaluate(() => window.performance.mark('object-title-appears'));
+
+    await page.waitForSelector('.c-notebook__entry >> nth=0', { state: 'visible' });
+    await page.evaluate(() => window.performance.mark('notebook-entry-appears'));
+
+    // Click Add new Notebook Entry
+    await page.locator('.c-notebook__drag-area').click();
+    await page.evaluate(() => window.performance.mark('new-notebook-entry-created'));
+
+    // Enter Notebook Entry text
+    await page.getByLabel('Notebook Entry Input').last().fill('New Entry');
+    await page.locator('.c-ne__save-button').click();
+    await page.evaluate(() => window.performance.mark('new-notebook-entry-filled'));
+
+    //Individual Notebook Entry Search
+    await page.evaluate(() => window.performance.mark('notebook-search-start'));
+    await page.locator('.c-notebook__search >> input').fill('Existing Entry');
+    await page.evaluate(() => window.performance.mark('notebook-search-filled'));
+    await page.waitForSelector('text=Search Results (3)', { state: 'visible' });
+    await page.evaluate(() => window.performance.mark('notebook-search-processed'));
+    await page.waitForSelector('.c-notebook__entry >> nth=2', { state: 'visible' });
+    await page.evaluate(() => window.performance.mark('notebook-search-processed'));
+
+    //Clear Search
+    await page.locator('.c-search.c-notebook__search .c-search__input').hover();
+    await page.locator('.c-search.c-notebook__search .c-search__clear-input').click();
+    await page.evaluate(() => window.performance.mark('notebook-search-processed'));
+
+    // Hover on Last
+    await page.evaluate(() => window.performance.mark('new-notebook-entry-delete'));
+    await page.locator('div.c-ne__time-and-content').last().hover();
+    await page.locator('button[title="Delete this entry"]').last().click();
+    await page.locator('button:has-text("Ok")').click();
+    await page.waitForSelector('.c-notebook__entry >> nth=3', { state: 'detached' });
+    await page.evaluate(() => window.performance.mark('new-notebook-entry-deleted'));
+
+    //await client.send('HeapProfiler.enable');
+    await client.send('HeapProfiler.collectGarbage');
+
+    let performanceMetrics = await client.send('Performance.getMetrics');
+    console.log(performanceMetrics.metrics);
+  });
+});
diff --git a/e2e/tests/performance/memory/navigation.memory.perf.spec.js b/e2e/tests/performance/memory/navigation.memory.perf.spec.js
new file mode 100644
index 00000000000..17074fd8e0a
--- /dev/null
+++ b/e2e/tests/performance/memory/navigation.memory.perf.spec.js
@@ -0,0 +1,335 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { expect, test } from '@playwright/test';
+import { fileURLToPath } from 'url';
+
+const memoryLeakFilePath = fileURLToPath(
+  new URL('../../../../e2e/test-data/memory-leak-detection.json', import.meta.url)
+);
+/**
+ * Executes tests to verify that views are not leaking memory on navigation away. This sort of
+ * memory leak is generally caused by a failure to clean up registered listeners.
+ *
+ * These tests are executed on a set of pre-built displays loaded from ../test-data/memory-leak-detection.json.
+ *
+ * In order to modify the test data set:
+ * 1. Run Open MCT locally (npm start)
+ * 2. Right click on a folder in the tree, and select "Import From JSON"
+ * 3. In the subsequent dialog, select the file ../test-data/memory-leak-detection.json
+ * 4. Click "OK"
+ * 5. Modify test objects as desired
+ * 6. Right click on the "Memory Leak Detection" folder, and select "Export to JSON"
+ * 7. Copy the exported file to ../test-data/memory-leak-detection.json
+ *
+ */
+
+test.describe('Navigation memory leak is not detected in', () => {
+  test.beforeEach(async ({ page }) => {
+    // Go to baseURL
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    await page
+      .getByRole('treeitem', {
+        name: /My Items/
+      })
+      .click({
+        button: 'right'
+      });
+
+    await page
+      .getByRole('menuitem', {
+        name: /Import from JSON/
+      })
+      .click();
+
+    // Upload memory-leak-detection.json
+    await page.setInputFiles('#fileElem', memoryLeakFilePath);
+
+    await page
+      .getByRole('button', {
+        name: 'Save'
+      })
+      .click();
+
+    await expect(page.locator('a:has-text("Memory Leak Detection")')).toBeVisible();
+  });
+
+  test('gauge', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(page, 'gauge-single-1hz-swg');
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('plan', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(page, 'plan-generated');
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('time list', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(page, 'time-list');
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('scatter', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(page, 'scatter-plot-single-1hz-swg');
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('graph', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(page, 'graph-single-1hz-swg');
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('gantt chart', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(page, 'gantt-chart');
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('clock', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(page, 'clock');
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('timer', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(page, 'timer-far-future');
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('web page (nasa.gov)', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(page, 'web-page');
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('Complex Display Layout', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(page, 'complex-display-layout');
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('plot view', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(page, 'overlay-plot-single-1hz-swg');
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('stacked plot view', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(page, 'stacked-plot-single-1hz-swg');
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('LAD table view', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(page, 'lad-table-single-1hz-swg');
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('LAD table set', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(page, 'lad-table-set-single-1hz-swg');
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  //TODO: Figure out why using the `table-row` component inside the `table` component leaks TelemetryTableRow objects
+  test('telemetry table view', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(
+      page,
+      'telemetry-table-single-1hz-swg'
+    );
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  //TODO: Figure out why using the `SideBar` component inside the leaks Notebook objects
+  test('notebook view', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(
+      page,
+      'notebook-memory-leak-detection-test'
+    );
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('display layout of a single SWG alphanumeric', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(page, 'display-layout-single-1hz-swg');
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('display layout of a single SWG plot', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(
+      page,
+      'display-layout-single-overlay-plot'
+    );
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  //TODO: Figure out why `svg` in the CompassRose component leaks imagery
+  test('example imagery view', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(
+      page,
+      'example-imagery-memory-leak-test'
+    );
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('display layout of example imagery views', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(
+      page,
+      'display-layout-images-memory-leak-test'
+    );
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('display layout with plots of swgs, alphanumerics, and condition sets, ', async ({
+    page
+  }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(
+      page,
+      'display-layout-simple-telemetry'
+    );
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('flexible layout with plots of swgs', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(
+      page,
+      'flexible-layout-plots-memory-leak-test'
+    );
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('flexible layout of example imagery views', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(
+      page,
+      'flexible-layout-images-memory-leak-test'
+    );
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('tabbed view of display layouts and time strips', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(
+      page,
+      'tab-view-simple-memory-leak-test'
+    );
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('time strip view of telemetry', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(
+      page,
+      'time-strip-telemetry-memory-leak-test'
+    );
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  /**
+   *
+   * @param {import('@playwright/test').Page} page
+   * @param {*} objectName
+   * @returns
+   */
+  async function navigateToObjectAndDetectMemoryLeak(page, objectName) {
+    await page.getByRole('searchbox', { name: 'Search Input' }).click();
+    // Fill Search input
+    await page.getByRole('searchbox', { name: 'Search Input' }).fill(objectName);
+
+    //Search Result Appears and is clicked
+    await page.getByText(objectName, { exact: true }).click();
+
+    // Register a finalization listener on the root node for the view. This tends to be the last thing to be
+    // garbage collected since it has either direct or indirect references to all resources used by the view. Therefore it's a pretty good proxy
+    // for detecting memory leaks.
+    await page.evaluate(() => {
+      window.gcPromise = new Promise((resolve) => {
+        // eslint-disable-next-line no-undef
+        window.fr = new FinalizationRegistry(resolve);
+        window.fr.register(
+          window.openmct.layout.$refs.browseObject.$refs.objectViewWrapper.firstChild,
+          'navigatedObject',
+          window.openmct.layout.$refs.browseObject.$refs.objectViewWrapper.firstChild
+        );
+      });
+    });
+
+    // Nav back to folder
+    await page.goto('./#/browse/mine');
+
+    // This next code block blocks until the finalization listener is called and the gcPromise resolved. This means that the root node for the view has been garbage collected.
+    // In the event that the root node is not garbage collected, the gcPromise will never resolve and the test will time out.
+    await page.evaluate(() => {
+      const gcPromise = window.gcPromise;
+      window.gcPromise = null;
+
+      // Manually invoke the garbage collector once all references are removed.
+      window.gc();
+
+      return gcPromise;
+    });
+
+    // Clean up the finalization registry since we don't need it any more.
+    await page.evaluate(() => {
+      window.fr = null;
+    });
+
+    // If we get here without timing out, it means the garbage collection promise resolved and the test passed.
+    return true;
+  }
+});
diff --git a/e2e/tests/performance/tabs.perf.spec.js b/e2e/tests/performance/tabs.perf.spec.js
new file mode 100644
index 00000000000..3db219f1dad
--- /dev/null
+++ b/e2e/tests/performance/tabs.perf.spec.js
@@ -0,0 +1,100 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createDomainObjectWithDefaults, waitForPlotsToRender } from '../../appActions.js';
+import { expect, test } from '../../pluginFixtures.js';
+
+test.describe('Tabs View', () => {
+  test('Renders tabbed elements only when visible', async ({ page }) => {
+    // Code to hook into the requestAnimationFrame function and log each call
+    let animationCalls = [];
+    await page.exposeFunction('logCall', (callCount) => {
+      animationCalls.push(callCount);
+    });
+    await page.addInitScript(() => {
+      const oldRequestAnimationFrame = window.requestAnimationFrame;
+      let callCount = 0;
+      window.requestAnimationFrame = function (callback) {
+        // eslint-disable-next-line no-undef
+        logCall(callCount++);
+        return oldRequestAnimationFrame(callback);
+      };
+    });
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    const tabsView = await createDomainObjectWithDefaults(page, {
+      type: 'Tabs View'
+    });
+    const table = await createDomainObjectWithDefaults(page, {
+      type: 'Telemetry Table',
+      parent: tabsView.uuid
+    });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Event Message Generator',
+      parent: table.uuid
+    });
+    const notebook = await createDomainObjectWithDefaults(page, {
+      type: 'Notebook',
+      parent: tabsView.uuid
+    });
+    const sineWaveGenerator = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: tabsView.uuid
+    });
+
+    page.goto(tabsView.url);
+
+    // select first tab
+    await page.getByLabel(`${table.name} tab`, { exact: true }).click();
+    // ensure table header visible
+    await expect(page.getByRole('searchbox', { name: 'message filter input' })).toBeVisible();
+
+    // select second tab
+    await page.getByLabel(`${notebook.name} tab`, { exact: true }).click();
+
+    // expect notebook visible
+    await expect(page.locator('.c-notebook__drag-area')).toBeVisible();
+
+    // select third tab
+    await page.getByLabel(`${sineWaveGenerator.name} tab`, { exact: true }).click();
+
+    // ensure sine wave generator visible
+    expect(await page.locator('.c-plot').isVisible()).toBe(true);
+
+    // now select notebook and clear animation calls
+    await page.getByLabel(`${notebook.name} tab`, { exact: true }).click();
+    animationCalls = [];
+    // expect notebook visible
+    await expect(page.locator('.c-notebook__drag-area')).toBeVisible();
+    const notebookAnimationCalls = animationCalls.length;
+
+    // select sine wave generator and clear animation calls
+    animationCalls = [];
+    await page.getByLabel(`${sineWaveGenerator.name} tab`, { exact: true }).click();
+
+    // ensure sine wave generator visible
+    await waitForPlotsToRender(page);
+    // we should be calling animation frames
+    const sineWaveAnimationCalls = animationCalls.length;
+    expect(sineWaveAnimationCalls).toBeGreaterThanOrEqual(notebookAnimationCalls);
+  });
+});
diff --git a/e2e/tests/performance/tagging.perf.spec.js b/e2e/tests/performance/tagging.perf.spec.js
new file mode 100644
index 00000000000..495026f7a88
--- /dev/null
+++ b/e2e/tests/performance/tagging.perf.spec.js
@@ -0,0 +1,142 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+Tests to verify plot tagging performance.
+*/
+
+import {
+  createDomainObjectWithDefaults,
+  setFixedTimeMode,
+  setRealTimeMode,
+  waitForPlotsToRender
+} from '../../appActions.js';
+import { basicTagsTests, createTags, testTelemetryItem } from '../../helper/plotTagsUtils.js';
+import { expect, test } from '../../pluginFixtures.js';
+
+test.describe('Plot Tagging Performance', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+  });
+
+  test('Tags work with Overlay Plots', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/6822'
+    });
+    //Test.slow decorator is currently broken. Needs to be fixed in https://github.com/nasa/openmct/issues/5374
+    test.slow();
+
+    const overlayPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot'
+    });
+
+    const alphaSineWave = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Alpha Sine Wave',
+      parent: overlayPlot.uuid
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Beta Sine Wave',
+      parent: overlayPlot.uuid
+    });
+
+    await page.goto(overlayPlot.url);
+
+    let canvas = page.locator('canvas').nth(1);
+
+    // Switch to real-time mode
+    // Adding tags should pause the plot
+    await setRealTimeMode(page);
+
+    await createTags({
+      page,
+      canvas
+    });
+
+    await setFixedTimeMode(page);
+
+    await basicTagsTests(page);
+    await testTelemetryItem(page, alphaSineWave);
+
+    // set to real time mode
+    await setRealTimeMode(page);
+
+    // Search for Science
+    await page.getByRole('searchbox', { name: 'Search Input' });
+    await page.getByRole('searchbox', { name: 'Search Input' }).fill('sc');
+
+    // click on the search result
+    await page.getByLabel('Search Result').getByText('Alpha Sine Wave').first().click();
+
+    await waitForPlotsToRender(page);
+    // expect plot to be paused
+    await expect(page.getByTitle('Resume displaying real-time data')).toBeVisible();
+
+    await setFixedTimeMode(page);
+  });
+
+  test('Tags work with Plot View of telemetry items', async ({ page }) => {
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator'
+    });
+    const canvas = page.locator('canvas').nth(1);
+    await createTags({
+      page,
+      canvas
+    });
+    await basicTagsTests(page);
+  });
+
+  test('Tags work with Stacked Plots', async ({ page }) => {
+    const stackedPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Stacked Plot'
+    });
+
+    const alphaSineWave = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Alpha Sine Wave',
+      parent: stackedPlot.uuid
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Beta Sine Wave',
+      parent: stackedPlot.uuid
+    });
+
+    await page.goto(stackedPlot.url);
+
+    const canvas = page.locator('canvas').nth(1);
+
+    await createTags({
+      page,
+      canvas,
+      xEnd: 700,
+      yEnd: 240
+    });
+    await basicTagsTests(page);
+    await testTelemetryItem(page, alphaSineWave);
+  });
+});
diff --git a/e2e/tests/visual-a11y/a11y.visual.spec.js b/e2e/tests/visual-a11y/a11y.visual.spec.js
new file mode 100644
index 00000000000..51969ff9588
--- /dev/null
+++ b/e2e/tests/visual-a11y/a11y.visual.spec.js
@@ -0,0 +1,35 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { test } from '../../avpFixtures.js';
+import { VISUAL_URL } from '../../constants.js';
+
+test.describe('a11y - Default', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+  });
+  test('main view', async ({ page }, testInfo) => {
+    await page.goto('./');
+    //Skipping for https://github.com/nasa/openmct/issues/7421
+    //await scanForA11yViolations(page, testInfo.title);
+  });
+});
diff --git a/e2e/tests/visual-a11y/components/about.visual.spec.js b/e2e/tests/visual-a11y/components/about.visual.spec.js
new file mode 100644
index 00000000000..70ed07b86f6
--- /dev/null
+++ b/e2e/tests/visual-a11y/components/about.visual.spec.js
@@ -0,0 +1,58 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+Tests the branding associated with the default deployment. At least the about modal for now
+*/
+
+import percySnapshot from '@percy/playwright';
+
+import { expect, scanForA11yViolations, test } from '../../../avpFixtures.js';
+import { VISUAL_URL } from '../../../constants.js';
+
+test.describe('Visual - Branding @a11y', () => {
+  test.beforeEach(async ({ page }) => {
+    //Go to baseURL and Hide Tree
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+  });
+
+  test('Visual - About Modal', async ({ page, theme }) => {
+    // Click About button
+    await page.getByLabel('About Modal').click();
+
+    // Modify the Build information in 'about' to be consistent run-over-run
+    await expect(page.locator('id=versionInformation')).toBeEnabled();
+    await page
+      .locator('id=versionInformation')
+      .evaluate(
+        (node) =>
+          (node.innerHTML =
+            '<li>Version: visual-snapshot</li> <li>Build Date: Mon Nov 15 2021 08:07:51 GMT-0800 (Pacific Standard Time)</li> <li>Revision: 93049cdbc6c047697ca204893db9603b864b8c9f</li> <li>Branch: master</li>')
+      );
+
+    // Take a snapshot of the About modal
+    await percySnapshot(page, `About (theme: '${theme}')`);
+  });
+});
+test.afterEach(async ({ page }, testInfo) => {
+  await scanForA11yViolations(page, testInfo.title);
+});
diff --git a/e2e/tests/visual-a11y/components/header.visual.spec.js b/e2e/tests/visual-a11y/components/header.visual.spec.js
new file mode 100644
index 00000000000..ba9320a83bb
--- /dev/null
+++ b/e2e/tests/visual-a11y/components/header.visual.spec.js
@@ -0,0 +1,84 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+Tests the branding associated with the default deployment. At least the about modal for now
+*/
+
+import percySnapshot from '@percy/playwright';
+
+import { expect, test } from '../../../avpFixtures.js';
+import { VISUAL_URL } from '../../../constants.js';
+
+//Declare the scope of the visual test
+const header = '.l-shell__head';
+
+test.describe('Visual - Header @a11y', () => {
+  test.beforeEach(async ({ page }) => {
+    //Go to baseURL and Hide Tree
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+    // Wait for status bar to load
+    await expect(
+      page.getByRole('status', {
+        name: 'Clock Indicator'
+      })
+    ).toBeInViewport();
+    await expect(
+      page.getByRole('status', {
+        name: 'Global Clear Indicator'
+      })
+    ).toBeInViewport();
+    await expect(
+      page.getByRole('status', {
+        name: 'Snapshot Indicator'
+      })
+    ).toBeInViewport();
+  });
+
+  test('header sizing', async ({ page, theme }) => {
+    // Click About button
+    await percySnapshot(page, `Header default (theme: '${theme}')`, {
+      scope: header
+    });
+
+    await page.getByLabel('Click to collapse items').click();
+
+    await percySnapshot(page, `Header Collapsed (theme: '${theme}')`, {
+      scope: header
+    });
+  });
+
+  test('show snapshot button', async ({ page, theme }) => {
+    await page.getByLabel('Take a Notebook Snapshot').click();
+
+    await page.getByRole('menuitem', { name: 'Save to Notebook Snapshots' }).click();
+
+    await percySnapshot(page, `Notebook Snapshot Show button (theme: '${theme}')`, {
+      scope: header
+    });
+    await expect(await page.getByLabel('Show Snapshots')).toBeVisible();
+  });
+});
+// Skipping for https://github.com/nasa/openmct/issues/7421
+// test.afterEach(async ({ page }, testInfo) => {
+//   await scanForA11yViolations(page, testInfo.title);
+// });
diff --git a/e2e/tests/visual-a11y/components/inspector.visual.spec.js b/e2e/tests/visual-a11y/components/inspector.visual.spec.js
new file mode 100644
index 00000000000..799978ea478
--- /dev/null
+++ b/e2e/tests/visual-a11y/components/inspector.visual.spec.js
@@ -0,0 +1,61 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import percySnapshot from '@percy/playwright';
+
+import { test } from '../../../avpFixtures.js';
+import { MISSION_TIME, VISUAL_URL } from '../../../constants.js';
+
+//Declare the scope of the visual test
+const inspectorPane = '.l-shell__pane-inspector';
+
+test.describe('Visual - Inspector @ally', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+  });
+  test.use({
+    storageState: './e2e/test-data/overlay_plot_with_delay_storage.json',
+    clockOptions: {
+      now: MISSION_TIME,
+      shouldAdvanceTime: true
+    }
+  });
+
+  test('Inspector from overlay_plot_with_delay_storage @localStorage', async ({ page, theme }) => {
+    //Expand the Inspector Pane
+    await page.getByRole('button', { name: 'Inspect' }).click();
+
+    await percySnapshot(page, `Inspector view of overlayPlot (theme: ${theme})`, {
+      scope: inspectorPane
+    });
+    //Open Annotations Tab
+    await page.getByRole('tab', { name: 'Annotations' }).click();
+
+    await percySnapshot(page, `Inspector view of Annotations Tab (theme: ${theme})`, {
+      scope: inspectorPane
+    });
+  });
+});
+// Skipping for https://github.com/nasa/openmct/issues/7421
+// test.afterEach(async ({ page }, testInfo) => {
+//   await scanForA11yViolations(page, testInfo.title);
+// });
diff --git a/e2e/tests/visual-a11y/components/tree.visual.spec.js b/e2e/tests/visual-a11y/components/tree.visual.spec.js
new file mode 100644
index 00000000000..e0671336ea7
--- /dev/null
+++ b/e2e/tests/visual-a11y/components/tree.visual.spec.js
@@ -0,0 +1,99 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import percySnapshot from '@percy/playwright';
+
+import { createDomainObjectWithDefaults, expandTreePaneItemByName } from '../../../appActions.js';
+import { VISUAL_URL } from '../../../constants.js';
+import { test } from '../../../pluginFixtures.js';
+
+//Declare the scope of the visual test
+const treePane = "[role=tree][aria-label='Main Tree']";
+
+test.describe('Visual - Tree Pane', () => {
+  test('Tree pane in various states', async ({ page, theme, openmctConfig }) => {
+    const { myItemsFolderName } = openmctConfig;
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+
+    //Open Tree
+    await page.getByRole('button', { name: 'Browse' }).click();
+
+    //Create a Folder Structure
+    const foo = await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      name: 'Foo Folder'
+    });
+
+    const bar = await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      name: 'Bar Folder',
+      parent: foo.uuid
+    });
+
+    const baz = await createDomainObjectWithDefaults(page, {
+      type: 'Folder',
+      name: 'Baz Folder',
+      parent: bar.uuid
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Clock',
+      name: 'A Clock'
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Clock',
+      name: 'Z Clock'
+    });
+
+    await percySnapshot(page, `Tree Pane w/ collapsed tree (theme: ${theme})`, {
+      scope: treePane
+    });
+
+    await expandTreePaneItemByName(page, myItemsFolderName);
+
+    await page.goto(foo.url);
+    await page.dragAndDrop('role=treeitem[name=/A Clock/]', '.c-object-view');
+    await page.dragAndDrop('role=treeitem[name=/Z Clock/]', '.c-object-view');
+    await page.goto(bar.url);
+    await page.dragAndDrop('role=treeitem[name=/A Clock/]', '.c-object-view');
+    await page.dragAndDrop('role=treeitem[name=/Z Clock/]', '.c-object-view');
+    await page.goto(baz.url);
+    await page.dragAndDrop('role=treeitem[name=/A Clock/]', '.c-object-view');
+    await page.dragAndDrop('role=treeitem[name=/Z Clock/]', '.c-object-view');
+
+    await percySnapshot(page, `Tree Pane w/ single level expanded (theme: ${theme})`, {
+      scope: treePane
+    });
+
+    await expandTreePaneItemByName(page, foo.name);
+    await expandTreePaneItemByName(page, bar.name);
+    await expandTreePaneItemByName(page, baz.name);
+
+    // eslint-disable-next-line playwright/no-wait-for-timeout
+    await page.waitForTimeout(1 * 1000); //https://github.com/nasa/openmct/issues/7059
+
+    await percySnapshot(page, `Tree Pane w/ multiple levels expanded (theme: ${theme})`, {
+      scope: treePane
+    });
+  });
+});
diff --git a/e2e/tests/visual-a11y/controlledClock.visual.spec.js b/e2e/tests/visual-a11y/controlledClock.visual.spec.js
new file mode 100644
index 00000000000..72e4979f960
--- /dev/null
+++ b/e2e/tests/visual-a11y/controlledClock.visual.spec.js
@@ -0,0 +1,60 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+Collection of Visual Tests set to run with browser clock manipulate made possible with the
+clockOptions plugin fixture.
+*/
+
+import percySnapshot from '@percy/playwright';
+
+import { MISSION_TIME, VISUAL_URL } from '../../constants.js';
+import { expect, test } from '../../pluginFixtures.js';
+
+test.describe('Visual - Controlled Clock', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+  });
+  test.use({
+    storageState: './e2e/test-data/overlay_plot_with_delay_storage.json',
+    clockOptions: {
+      now: MISSION_TIME,
+      shouldAdvanceTime: false //Don't advance the clock
+    }
+  });
+
+  test('Overlay Plot Loading Indicator @localStorage', async ({ page, theme }) => {
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+    await page
+      .getByRole('gridcell', { hasText: 'Overlay Plot with 5s Delay Overlay Plot' })
+      .click();
+    //Ensure that we're on the Unnamed Overlay Plot object
+    await expect(page.getByRole('main')).toContainText('Overlay Plot with 5s Delay');
+
+    //Wait for canvas to be rendered and stop animating, but plot should not be loaded.
+    //Cannot use waitForPlotsToRender due to clockOptions.
+    await page.locator('#webglContext').hover({ trial: true });
+
+    //Take snapshot of Sine Wave Generator within Overlay Plot
+    await percySnapshot(page, `SineWaveInOverlayPlot (theme: '${theme}')`);
+  });
+});
diff --git a/e2e/tests/visual-a11y/defaultPlugins.visual.spec.js b/e2e/tests/visual-a11y/defaultPlugins.visual.spec.js
new file mode 100644
index 00000000000..cd54fcf0a89
--- /dev/null
+++ b/e2e/tests/visual-a11y/defaultPlugins.visual.spec.js
@@ -0,0 +1,101 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+Collection of Visual Tests set to run in a default context with default Plugins. The tests within this suite
+are only meant to run against openmct's app.js started by `npm run start` within the
+`./e2e/playwright-visual.config.js` file.
+*/
+
+import percySnapshot from '@percy/playwright';
+
+import { createDomainObjectWithDefaults } from '../../appActions.js';
+import { expect, scanForA11yViolations, test } from '../../avpFixtures.js';
+import { VISUAL_URL } from '../../constants.js';
+
+test.describe('Visual - Default @a11y', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+  });
+
+  test('Visual - Default Dashboard', async ({ page, theme }) => {
+    // Verify that Create button is actionable
+    await expect(page.getByRole('button', { name: 'Create' })).toBeEnabled();
+
+    // Take a snapshot of the Dashboard
+    await percySnapshot(page, `Default Dashboard (theme: '${theme}')`);
+  });
+
+  test('Visual - Default Condition Set', async ({ page, theme }) => {
+    await createDomainObjectWithDefaults(page, {
+      type: 'Condition Set',
+      name: 'Default Condition Set'
+    });
+
+    // Take a snapshot of the newly created Condition Set object
+    await percySnapshot(page, `Default Condition Set (theme: '${theme}')`);
+  });
+
+  test('Visual - Default Condition Widget', async ({ page, theme }) => {
+    await createDomainObjectWithDefaults(page, {
+      type: 'Condition Widget',
+      name: 'Default Condition Widget'
+    });
+
+    // Take a snapshot of the newly created Condition Widget object
+    await percySnapshot(page, `Default Condition Widget (theme: '${theme}')`);
+  });
+
+  test('Visual - Sine Wave Generator Form', async ({ page, theme }) => {
+    await page.getByRole('button', { name: 'Create' }).click();
+
+    await page.getByRole('menuItem', { name: 'Sine Wave Generator' }).click();
+
+    await percySnapshot(page, `Default Sine Wave Generator Form (theme: '${theme}')`);
+
+    await page.getByLabel('Period').click();
+    await page.getByLabel('Period').fill('');
+
+    await percySnapshot(page, `removed amplitude property value (theme: '${theme}')`);
+  });
+
+  test('Visual - Display Layout Icon is correct in Create Menu', async ({ page, theme }) => {
+    await page.getByRole('button', { name: 'Create' }).click();
+
+    await page.getByRole('menuItem', { name: 'Display Layout' }).hover({ trial: true });
+    await percySnapshot(page, `Display Layout Create Menu (theme: '${theme}')`);
+  });
+
+  test('Visual - Default Gauge', async ({ page, theme }) => {
+    await createDomainObjectWithDefaults(page, {
+      type: 'Gauge',
+      name: 'Default Gauge'
+    });
+
+    // Take a snapshot of the newly created Gauge object
+    await percySnapshot(page, `Default Gauge (theme: '${theme}')`);
+  });
+
+  test.afterEach(async ({ page }, testInfo) => {
+    await scanForA11yViolations(page, testInfo.title);
+  });
+});
diff --git a/e2e/tests/visual-a11y/displayLayout.visual.spec.js b/e2e/tests/visual-a11y/displayLayout.visual.spec.js
new file mode 100644
index 00000000000..91d875c6551
--- /dev/null
+++ b/e2e/tests/visual-a11y/displayLayout.visual.spec.js
@@ -0,0 +1,106 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import percySnapshot from '@percy/playwright';
+
+import { createDomainObjectWithDefaults } from '../../appActions.js';
+import { VISUAL_URL } from '../../constants.js';
+import { test } from '../../pluginFixtures.js';
+
+test.describe('Visual - Display Layout', () => {
+  test.beforeEach(async ({ page, theme }) => {
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+
+    const parentLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Parent Layout'
+    });
+    const child2Layout = await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Child Left Layout',
+      parent: parentLayout.uuid
+    });
+    //Create this layout second so that it is on top for the position change
+    const child1Layout = await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Child Right Layout',
+      parent: parentLayout.uuid
+    });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'SWG 1',
+      parent: child1Layout.uuid
+    });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'SWG 2',
+      parent: child2Layout.uuid
+    });
+
+    await page.goto(parentLayout.url, { waitUntil: 'domcontentloaded' });
+    await page.getByRole('button', { name: 'Edit Object' }).click();
+
+    //Move the Child Right Layout to the Right. It should be on top of the Left Layout at this point.
+    await page
+      .getByLabel('Child Right Layout Layout', { exact: true })
+      .getByLabel('Move Sub-object Frame')
+      .click();
+    await page.getByLabel('Move Sub-object Frame').nth(3).click(); //I'm not sure why this step is necessary
+    await page.getByLabel('X:').click();
+    await page.getByLabel('X:').fill('35');
+  });
+
+  test('Resize Marquee surrounds selection', async ({ page, theme }) => {
+    //This is where the beforeEach leaves off.
+    await percySnapshot(page, `Last modified object selected (theme: '${theme}')`);
+
+    await page.getByLabel('Child Left Layout Layout', { exact: true }).click();
+    await percySnapshot(page, `Only Left Child Layout has Marque selection (theme: '${theme}')`);
+
+    await page.getByLabel('Child Right Layout Layout', { exact: true }).click();
+    await percySnapshot(page, `Only Right Child Layout has Marque selection (theme: '${theme}')`);
+
+    //Only the sub-object in the Right Layout should be highlighted with a marquee
+    await page
+      .getByLabel('Child Right Layout Layout', { exact: true })
+      .getByLabel('Move Sub-object Frame')
+      .click();
+
+    await percySnapshot(
+      page,
+      `Selecting a sub-object from Right Layout selected (theme: '${theme}')`
+    );
+
+    await page.getByLabel('Parent Layout Layout', { exact: true }).click();
+    await percySnapshot(page, `Parent outer layout selected (theme: '${theme}')`);
+  });
+
+  test('Toolbar does not overflow into inspector', async ({ page, theme }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7036'
+    });
+    await page.getByLabel('Expand Inspect Pane').click();
+    await page.getByLabel('Resize Inspect Pane').dragTo(page.getByLabel('X:'));
+    await percySnapshot(page, `Toolbar does not overflow into inspector (theme: '${theme}')`);
+  });
+});
diff --git a/e2e/tests/visual-a11y/faultManagement.visual.spec.js b/e2e/tests/visual-a11y/faultManagement.visual.spec.js
new file mode 100644
index 00000000000..f038e6d37d2
--- /dev/null
+++ b/e2e/tests/visual-a11y/faultManagement.visual.spec.js
@@ -0,0 +1,106 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import percySnapshot from '@percy/playwright';
+import { fileURLToPath } from 'url';
+
+import * as utils from '../../helper/faultUtils.js';
+import { expect, test } from '../../pluginFixtures.js';
+
+test.describe('Fault Management Visual Tests', () => {
+  test('icon test', async ({ page, theme }) => {
+    await page.addInitScript({
+      path: fileURLToPath(new URL('../../helper/addInitFaultManagementPlugin.js', import.meta.url))
+    });
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Wait for status bar to load
+    await expect(
+      page.getByRole('status', {
+        name: 'Clock Indicator'
+      })
+    ).toBeInViewport();
+    await expect(
+      page.getByRole('status', {
+        name: 'Global Clear Indicator'
+      })
+    ).toBeInViewport();
+    await expect(
+      page.getByRole('status', {
+        name: 'Snapshot Indicator'
+      })
+    ).toBeInViewport();
+
+    await percySnapshot(page, `Fault Management icon appears in tree (theme: '${theme}')`);
+  });
+
+  test('fault list and acknowledged faults', async ({ page, theme }) => {
+    await utils.navigateToFaultManagementWithStaticExample(page);
+
+    await percySnapshot(page, `Shows a list of faults in the standard view (theme: '${theme}')`);
+
+    await utils.acknowledgeFault(page, 1);
+    await utils.changeViewTo(page, 'acknowledged');
+
+    await percySnapshot(
+      page,
+      `Acknowledged faults, have a checkmark on the fault icon and appear in the acknowledged view (theme: '${theme}')`
+    );
+  });
+
+  test('shelved faults', async ({ page, theme }) => {
+    await utils.navigateToFaultManagementWithStaticExample(page);
+
+    await utils.shelveFault(page, 1);
+    await utils.changeViewTo(page, 'shelved');
+
+    await percySnapshot(page, `Shelved faults appear in the shelved view (theme: '${theme}')`);
+
+    await utils.openFaultRowMenu(page, 1);
+
+    await percySnapshot(
+      page,
+      `Shelved faults have a 3-dot menu with Unshelve option enabled (theme: '${theme}')`
+    );
+  });
+
+  test('3-dot menu for fault', async ({ page, theme }) => {
+    await utils.navigateToFaultManagementWithStaticExample(page);
+
+    await utils.openFaultRowMenu(page, 1);
+
+    await percySnapshot(
+      page,
+      `Faults have a 3-dot menu with Acknowledge, Shelve and Unshelve (Unshelve is disabled) options (theme: '${theme}')`
+    );
+  });
+
+  test('ability to acknowledge or shelve', async ({ page, theme }) => {
+    await utils.navigateToFaultManagementWithStaticExample(page);
+
+    await utils.selectFaultItem(page, 1);
+
+    await percySnapshot(
+      page,
+      `Selected faults highlight the ability to Acknowledge or Shelve above the fault list (theme: '${theme}')`
+    );
+  });
+});
diff --git a/e2e/tests/visual-a11y/imagery.visual.spec.js b/e2e/tests/visual-a11y/imagery.visual.spec.js
new file mode 100644
index 00000000000..78de781dd59
--- /dev/null
+++ b/e2e/tests/visual-a11y/imagery.visual.spec.js
@@ -0,0 +1,93 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import percySnapshot from '@percy/playwright';
+
+import { createDomainObjectWithDefaults, setRealTimeMode } from '../../appActions.js';
+import { VISUAL_URL } from '../../constants.js';
+import { expect, test } from '../../pluginFixtures.js';
+
+test.describe('Visual - Example Imagery', () => {
+  let exampleImagery;
+  let parentLayout;
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+
+    parentLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Parent Layout'
+    });
+
+    exampleImagery = await createDomainObjectWithDefaults(page, {
+      type: 'Example Imagery',
+      name: 'Example Imagery Test',
+      parent: parentLayout.uuid
+    });
+
+    // Modify Example Imagery to create a really stable Example Imagery
+    await page.goto(exampleImagery.url, { waitUntil: 'domcontentloaded' });
+    await page.getByRole('button', { name: 'More actions' }).click();
+    await page.getByRole('menuitem', { name: 'Edit Properties...' }).click();
+    await page
+      .locator('#imageLocation-textarea')
+      .fill(
+        'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg'
+      );
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.reload({ waitUntil: 'domcontentloaded' });
+    await page.getByTitle('Collapse Browse Pane').click();
+    await page.getByTitle('Collapse Inspect Pane').click();
+  });
+
+  test('Example Imagery in Fixed Time', async ({ page, theme }) => {
+    await page.goto(exampleImagery.url, { waitUntil: 'domcontentloaded' });
+
+    await expect(page.getByLabel('Image Wrapper')).toBeVisible();
+
+    await percySnapshot(page, `Example Imagery in Fixed Time (theme: ${theme})`);
+
+    await page.getByLabel('Image Wrapper').hover();
+
+    await percySnapshot(page, `Example Imagery Hover in Fixed Time (theme: ${theme})`);
+  });
+
+  test('Example Imagery in Real Time', async ({ page, theme }) => {
+    await page.goto(exampleImagery.url, { waitUntil: 'domcontentloaded' });
+
+    await setRealTimeMode(page, true);
+    //Temporary to close the dialog
+    await page.getByLabel('Submit time offsets').click();
+
+    await expect(page.getByLabel('Image Wrapper')).toBeVisible();
+
+    await percySnapshot(page, `Example Imagery in Real Time (theme: ${theme})`);
+  });
+
+  test('Example Imagery in Display Layout', async ({ page, theme }) => {
+    await page.goto(parentLayout.url, { waitUntil: 'domcontentloaded' });
+
+    await expect(page.getByLabel('Image Wrapper')).toBeVisible();
+
+    await percySnapshot(page, `Example Imagery in Display Layout (theme: ${theme})`);
+  });
+});
diff --git a/e2e/tests/visual-a11y/ladTable.visual.spec.js b/e2e/tests/visual-a11y/ladTable.visual.spec.js
new file mode 100644
index 00000000000..9d3769500b8
--- /dev/null
+++ b/e2e/tests/visual-a11y/ladTable.visual.spec.js
@@ -0,0 +1,77 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import percySnapshot from '@percy/playwright';
+
+import { createDomainObjectWithDefaults } from '../../appActions.js';
+import { VISUAL_URL } from '../../constants.js';
+import { expect, test } from '../../pluginFixtures.js';
+
+test.describe('Visual - LAD Table', () => {
+  let ladTable;
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+
+    // Create LAD Table
+    ladTable = await createDomainObjectWithDefaults(page, {
+      type: 'LAD Table',
+      name: 'LAD Table Test'
+    });
+    // Create SWG inside of LAD Table
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'SWG4LAD Table Test',
+      parent: ladTable.uuid
+    });
+
+    //Modify SWG to create a really stable SWG
+    await page.getByRole('button', { name: 'More actions' }).click();
+
+    await page.getByRole('menuitem', { name: 'Edit Properties...' }).click();
+
+    //Forgive me, padre
+    await page.getByRole('spinbutton', { name: 'Data Rate (hz)' }).fill('0');
+    await page.getByRole('spinbutton', { name: 'Period' }).fill('0');
+
+    await page.getByRole('button', { name: 'Save' }).click();
+  });
+  test('Toggled column widths behave accordingly', async ({ page, theme }) => {
+    await page.goto(ladTable.url, { waitUntil: 'domcontentloaded' });
+
+    await expect(page.getByLabel('Expand Columns')).toBeVisible();
+
+    await percySnapshot(
+      page,
+      `LAD Table w/ Sine Wave Generator columns autosized (theme: ${theme})`
+    );
+
+    await page.getByLabel('Expand Columns').click();
+
+    await expect(page.getByRole('button', { name: 'Autosize Columns' })).toBeVisible();
+
+    await percySnapshot(
+      page,
+      `LAD Table w/ Sine Wave Generator columns expanded (theme: ${theme})`
+    );
+  });
+});
diff --git a/e2e/tests/visual-a11y/missionStatus.visual.spec.js b/e2e/tests/visual-a11y/missionStatus.visual.spec.js
new file mode 100644
index 00000000000..774b8fdef9e
--- /dev/null
+++ b/e2e/tests/visual-a11y/missionStatus.visual.spec.js
@@ -0,0 +1,57 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import percySnapshot from '@percy/playwright';
+import { fileURLToPath } from 'url';
+
+import { expect, scanForA11yViolations, test } from '../../avpFixtures.js';
+
+test.describe('Mission Status Visual Tests @a11y', () => {
+  const GO = '1';
+  test.beforeEach(async ({ page }) => {
+    await page.addInitScript({
+      path: fileURLToPath(new URL('../../helper/addInitExampleUser.js', import.meta.url))
+    });
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    await expect(page.getByText('Select Role')).toBeVisible();
+    // Description should be empty https://github.com/nasa/openmct/issues/6978
+    await expect(page.locator('c-message__action-text')).toBeHidden();
+    // set role
+    await page.getByRole('button', { name: 'Select', exact: true }).click();
+    // dismiss role confirmation popup
+    await page.getByRole('button', { name: 'Dismiss' }).click();
+  });
+  test('Mission status panel', async ({ page, theme }) => {
+    await page.getByLabel('Toggle Mission Status Panel').click();
+    await expect(page.getByRole('dialog', { name: 'User Control Panel' })).toBeVisible();
+    await percySnapshot(page, `Mission status panel w/ default statuses (theme: '${theme}')`);
+    await page.getByRole('combobox', { name: 'Commanding' }).selectOption(GO);
+    await expect(
+      page.getByRole('alert').filter({ hasText: 'Successfully set mission status' })
+    ).toBeVisible();
+    await page.getByLabel('Dismiss').click();
+    await percySnapshot(page, `Mission status panel w/ non-default status (theme: '${theme}')`);
+  });
+
+  test.afterEach(async ({ page }, testInfo) => {
+    await scanForA11yViolations(page, testInfo.title);
+  });
+});
diff --git a/e2e/tests/visual-a11y/notebook.visual.spec.js b/e2e/tests/visual-a11y/notebook.visual.spec.js
new file mode 100644
index 00000000000..c8508149d12
--- /dev/null
+++ b/e2e/tests/visual-a11y/notebook.visual.spec.js
@@ -0,0 +1,132 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import percySnapshot from '@percy/playwright';
+
+import { createDomainObjectWithDefaults, expandTreePaneItemByName } from '../../appActions.js';
+import { test } from '../../avpFixtures.js';
+import { VISUAL_URL } from '../../constants.js';
+import { enterTextEntry, startAndAddRestrictedNotebookObject } from '../../helper/notebookUtils.js';
+
+test.describe('Visual - Restricted Notebook @a11y', () => {
+  test.beforeEach(async ({ page }) => {
+    const restrictedNotebook = await startAndAddRestrictedNotebookObject(page);
+    await page.goto(restrictedNotebook.url + '?hideTree=true&hideInspector=true');
+  });
+
+  test('Restricted Notebook is visually correct @addInit', async ({ page, theme }) => {
+    // Take a snapshot of the newly created CUSTOM_NAME notebook
+    await percySnapshot(page, `Restricted Notebook with CUSTOM_NAME (theme: '${theme}')`);
+  });
+});
+
+test.describe('Visual - Notebook @a11y', () => {
+  let notebook;
+  test.beforeEach(async ({ page }) => {
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+    notebook = await createDomainObjectWithDefaults(page, {
+      type: 'Notebook',
+      name: 'Test Notebook'
+    });
+  });
+  test('Accepts dropped objects as embeds', async ({ page, theme, openmctConfig }) => {
+    const { myItemsFolderName } = openmctConfig;
+
+    // Create Overlay Plot
+    await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot',
+      name: 'Dropped Overlay Plot'
+    });
+
+    //Open Tree to perform drag
+    await page.getByRole('button', { name: 'Browse' }).click();
+
+    await expandTreePaneItemByName(page, myItemsFolderName);
+
+    await page.goto(notebook.url);
+
+    await page.dragAndDrop('role=treeitem[name=/Dropped Overlay Plot/]', '.c-notebook__drag-area');
+
+    await percySnapshot(page, `Notebook w/ dropped embed (theme: ${theme})`);
+  });
+  test("Blur 'Add tag' on Notebook", async ({ page, theme }) => {
+    await enterTextEntry(page, 'Entry 0');
+
+    await percySnapshot(page, `Notebook Entry (theme: '${theme}')`);
+
+    // Open the Inspector
+    await page.getByRole('button', { name: 'Inspect' }).click();
+    // Open the Annotations tab
+    await page.getByRole('tab', { name: 'Annotations' }).click();
+
+    // Take snapshot of the notebook with the Annotations tab opened
+    await percySnapshot(page, `Notebook Annotation (theme: '${theme}')`);
+
+    // Add annotation
+    await page.locator('button:has-text("Add Tag")').click();
+
+    // Take snapshot of the notebook with the AutoComplete field visible
+    await percySnapshot(page, `Notebook Add Tag (theme: '${theme}')`);
+
+    // Click inside the AutoComplete field
+    await page.locator('[placeholder="Type to select tag"]').click();
+
+    // Click on the "Tags" header (simulating a click outside the autocomplete field)
+    await page.locator('div.c-inspect-properties__header:has-text("Tags")').click();
+
+    // Take snapshot of the notebook with the AutoComplete field hidden and with the "Add Tag" button visible
+    await percySnapshot(page, `Notebook Annotation de-select blur (theme: '${theme}')`);
+  });
+  test('Visual check of entry hover and selection', async ({ page, theme }) => {
+    // Make two entries so we can test an unselected entry
+    await enterTextEntry(page, 'Entry 0');
+    await enterTextEntry(page, 'Entry 1');
+
+    // Hover the first entry
+    await page.getByText('Entry 0').hover();
+
+    // Take a snapshot
+    await percySnapshot(page, `Notebook Non-selected Entry Hover (theme: '${theme}')`);
+
+    // Click the first entry
+    await page.getByText('Entry 0').click();
+
+    // Take a snapshot
+    await percySnapshot(page, `Notebook Selected Entry Hover (theme: '${theme}')`);
+
+    // Hover the text entry area
+    await page.getByText('Entry 0').hover();
+
+    // Take a snapshot
+    await percySnapshot(page, `Notebook Selected Entry Text Area Hover (theme: '${theme}')`);
+
+    // Click the text entry area
+    await page.getByText('Entry 0').click();
+
+    // Take a snapshot
+    await percySnapshot(page, `Notebook Selected Entry Text Area Active (theme: '${theme}')`);
+  });
+  // Skipping for https://github.com/nasa/openmct/issues/7421
+  // test.afterEach(async ({ page }, testInfo) => {
+  //   await scanForA11yViolations(page, testInfo.title);
+  // });
+});
diff --git a/e2e/tests/visual-a11y/notification.visual.spec.js b/e2e/tests/visual-a11y/notification.visual.spec.js
new file mode 100644
index 00000000000..cea1ec27096
--- /dev/null
+++ b/e2e/tests/visual-a11y/notification.visual.spec.js
@@ -0,0 +1,79 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/**
+ * This test is dedicated to test notification banner functionality and its accessibility attributes.
+ */
+
+import percySnapshot from '@percy/playwright';
+
+import { createNotification } from '../../appActions.js';
+import { expect, scanForA11yViolations, test } from '../../avpFixtures.js';
+import { VISUAL_URL } from '../../constants.js';
+
+test.describe('Visual - Notifications @a11y', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+  });
+
+  test('Alert Levels and Notification List Modal', async ({ page, theme }) => {
+    await createNotification(page, {
+      message: 'Test info notification',
+      severity: 'info'
+    });
+    await expect(page.getByText('Test info notification')).toBeVisible();
+    await percySnapshot(page, `Info Notification banner shown (theme: '${theme}')`);
+    await page.getByLabel('Dismiss').click();
+    await page.getByRole('alert').waitFor({ state: 'detached' });
+    await createNotification(page, {
+      message: 'Test alert notification',
+      severity: 'alert'
+    });
+    await expect(page.getByText('Test alert notification')).toBeVisible();
+    await percySnapshot(page, `Alert Notification banner shown (theme: '${theme}')`);
+    await page.getByLabel('Dismiss').click();
+    await page.getByRole('alert').waitFor({ state: 'detached' });
+    await createNotification(page, {
+      message: 'Test error notification',
+      severity: 'error'
+    });
+    await expect(page.getByText('Test error notification')).toBeVisible();
+    await percySnapshot(page, `Error Notification banner shown (theme: '${theme}')`);
+    await page.getByLabel('Dismiss').click();
+    await page.getByRole('alert').waitFor({ state: 'detached' });
+
+    await page.getByLabel('Review 2 Notifications').click();
+    await page.getByText('Test alert notification').waitFor();
+    await percySnapshot(page, `Notification List Modal with alert and error (theme: '${theme}')`);
+
+    // Skipping due to https://github.com/nasa/openmct/issues/6820
+    // await page.getByLabel('Dismiss notification of Test alert notification').click();
+    // await page.getByText('Test alert notification').waitFor({ state: 'detached' });
+    // await percySnapshot(page, `Notification Modal with error only (theme: '${theme}')`);
+
+    await page.getByRole('button', { name: 'Clear All Notifications', exact: true }).click();
+    await percySnapshot(page, `Notification Modal after Clear All (theme: '${theme}')`);
+  });
+});
+test.afterEach(async ({ page }, testInfo) => {
+  await scanForA11yViolations(page, testInfo.title);
+});
diff --git a/e2e/tests/visual-a11y/planning.visual.spec.js b/e2e/tests/visual-a11y/planning.visual.spec.js
new file mode 100644
index 00000000000..51783b7cf11
--- /dev/null
+++ b/e2e/tests/visual-a11y/planning.visual.spec.js
@@ -0,0 +1,146 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import percySnapshot from '@percy/playwright';
+import fs from 'fs';
+
+import { createDomainObjectWithDefaults, createPlanFromJSON } from '../../appActions.js';
+import { test } from '../../avpFixtures.js';
+import { VISUAL_URL } from '../../constants.js';
+import { setBoundsToSpanAllActivities, setDraftStatusForPlan } from '../../helper/planningUtils.js';
+
+const examplePlanSmall = JSON.parse(
+  fs.readFileSync(new URL('../../test-data/examplePlans/ExamplePlan_Small2.json', import.meta.url))
+);
+
+const snapshotScope = '.l-shell__pane-main .l-pane__contents';
+
+test.describe('Visual - Planning', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+  });
+
+  test('Plan View', async ({ page, theme }) => {
+    const plan = await createPlanFromJSON(page, {
+      name: 'Plan Visual Test',
+      json: examplePlanSmall
+    });
+
+    await setBoundsToSpanAllActivities(page, examplePlanSmall, plan.url);
+    await percySnapshot(page, `Plan View (theme: ${theme})`, {
+      scope: snapshotScope
+    });
+  });
+
+  test('Plan View w/ draft status', async ({ page, theme }) => {
+    const plan = await createPlanFromJSON(page, {
+      name: 'Plan Visual Test (Draft)',
+      json: examplePlanSmall
+    });
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+    await setDraftStatusForPlan(page, plan);
+
+    await setBoundsToSpanAllActivities(page, examplePlanSmall, plan.url);
+    await percySnapshot(page, `Plan View w/ draft status (theme: ${theme})`, {
+      scope: snapshotScope
+    });
+  });
+
+  test('Gantt Chart View', async ({ page, theme }) => {
+    const ganttChart = await createDomainObjectWithDefaults(page, {
+      type: 'Gantt Chart',
+      name: 'Gantt Chart Visual Test'
+    });
+    await createPlanFromJSON(page, {
+      json: examplePlanSmall,
+      parent: ganttChart.uuid
+    });
+    await setBoundsToSpanAllActivities(page, examplePlanSmall, ganttChart.url);
+    await percySnapshot(page, `Gantt Chart View (theme: ${theme}) - Clipped Activity Names`, {
+      scope: snapshotScope
+    });
+
+    // Expand the inspect pane and uncheck the 'Clip Activity Names' option
+    await page.getByRole('button', { name: 'Expand Inspect Pane' }).click();
+    await page.getByRole('tab', { name: 'Config' }).click();
+    await page.getByLabel('Edit Object').click();
+    await page.getByLabel('Clip Activity Names').click();
+
+    // Close the inspect pane and save the changes
+    await page.getByRole('button', { name: 'Collapse Inspect Pane' }).click();
+    await page.getByLabel('Save').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Dismiss the notification
+    await page.getByLabel('Dismiss').click();
+
+    await percySnapshot(page, `Gantt Chart View (theme: ${theme}) - Unclipped Activity Names`, {
+      scope: snapshotScope
+    });
+  });
+
+  test('Gantt Chart View w/ draft status', async ({ page, theme }) => {
+    const ganttChart = await createDomainObjectWithDefaults(page, {
+      type: 'Gantt Chart',
+      name: 'Gantt Chart Visual Test (Draft)'
+    });
+    const plan = await createPlanFromJSON(page, {
+      json: examplePlanSmall,
+      parent: ganttChart.uuid
+    });
+
+    await setDraftStatusForPlan(page, plan);
+
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+
+    await setBoundsToSpanAllActivities(page, examplePlanSmall, ganttChart.url);
+    await percySnapshot(page, `Gantt Chart View w/ draft status (theme: ${theme})`, {
+      scope: snapshotScope
+    });
+
+    // Expand the inspect pane and uncheck the 'Clip Activity Names' option
+    await page.getByRole('button', { name: 'Expand Inspect Pane' }).click();
+    await page.getByRole('tab', { name: 'Config' }).click();
+    await page.getByLabel('Edit Object').click();
+    await page.getByLabel('Clip Activity Names').click();
+
+    // Close the inspect pane and save the changes
+    await page.getByRole('button', { name: 'Collapse Inspect Pane' }).click();
+    await page.getByLabel('Save').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Dismiss the notification
+    await page.getByLabel('Dismiss').click();
+
+    await percySnapshot(
+      page,
+      `Gantt Chart View w/ draft status (theme: ${theme}) - Unclipped Activity Names`,
+      {
+        scope: snapshotScope
+      }
+    );
+  });
+  // Skipping for https://github.com/nasa/openmct/issues/7421
+  // test.afterEach(async ({ page }, testInfo) => {
+  //   await scanForA11yViolations(page, testInfo.title);
+  // });
+});
diff --git a/e2e/tests/visual-a11y/search.visual.spec.js b/e2e/tests/visual-a11y/search.visual.spec.js
new file mode 100644
index 00000000000..c3c3e6e70b7
--- /dev/null
+++ b/e2e/tests/visual-a11y/search.visual.spec.js
@@ -0,0 +1,105 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which verify search functionality.
+*/
+
+import percySnapshot from '@percy/playwright';
+
+import { createDomainObjectWithDefaults } from '../../appActions.js';
+import { expect, scanForA11yViolations, test } from '../../avpFixtures.js';
+import { VISUAL_URL } from '../../constants.js';
+
+test.describe('Grand Search @a11y', () => {
+  let conditionWidget;
+  let displayLayout;
+  test.beforeEach(async ({ page }) => {
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+
+    displayLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Visual Test Display Layout'
+    });
+
+    conditionWidget = await createDomainObjectWithDefaults(page, {
+      type: 'Condition Widget',
+      name: 'Visual Condition Widget',
+      parent: displayLayout.uuid
+    });
+  });
+
+  test('Can search for folder object, and subsequent search dropdown behaves properly', async ({
+    page,
+    theme
+  }) => {
+    // Navigate to display layout
+    await page.goto(displayLayout.url);
+
+    // Search for the object
+    await page.getByRole('searchbox', { name: 'Search Input' }).click();
+    await page.getByRole('searchbox', { name: 'Search Input' }).fill(conditionWidget.name);
+    await expect(page.getByLabel('Search Result').getByText(conditionWidget.name)).toBeVisible();
+
+    //Searching for an object returns that object in the grandsearch
+    await percySnapshot(page, `Searching for Object (theme: '${theme}')`);
+
+    // Enter Edit mode on the Display Layout
+    await page.getByRole('button', { name: 'Edit Object' }).click();
+
+    // Navigate to the object while in edit mode on the display layout
+    await page.getByRole('searchbox', { name: 'Search Input' }).click();
+    await page.getByLabel('Search Result').getByText(conditionWidget.name).click();
+
+    await percySnapshot(
+      page,
+      `Preview should display when editing enabled and search item clicked (theme: '${theme}')`
+    );
+
+    // Close the preview
+    await page.getByRole('button', { name: 'Close' }).click();
+    await percySnapshot(
+      page,
+      `Search should still be showing after preview closed (theme: '${theme}')`
+    );
+
+    // Save and finish editing the Display Layout
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Search for the object
+    await page.getByRole('searchbox', { name: 'Search Input' }).click();
+    await page.getByRole('searchbox', { name: 'Search Input' }).fill(conditionWidget.name);
+    await expect(page.getByLabel('Search Result').getByText(conditionWidget.name)).toBeVisible();
+
+    // Navigate to the object while not in edit mode on the display layout
+    await page.getByLabel('Search Result').getByText(conditionWidget.name).click();
+
+    await percySnapshot(
+      page,
+      `Clicking on search results should navigate to them if not editing (theme: '${theme}')`
+    );
+  });
+  test.afterEach(async ({ page }, testInfo) => {
+    await scanForA11yViolations(page, testInfo.title);
+  });
+});
diff --git a/e2e/tests/visual-a11y/styling.visual.spec.js b/e2e/tests/visual-a11y/styling.visual.spec.js
new file mode 100644
index 00000000000..eccaef12e4d
--- /dev/null
+++ b/e2e/tests/visual-a11y/styling.visual.spec.js
@@ -0,0 +1,194 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/**
+ * This test is dedicated to test notification banner functionality and its accessibility attributes.
+ */
+
+import percySnapshot from '@percy/playwright';
+
+import { createDomainObjectWithDefaults } from '../../appActions.js';
+import { scanForA11yViolations, test } from '../../avpFixtures.js';
+import { setStyles } from '../../helper/stylingUtils.js';
+
+const setBorderColor = '#ff00ff';
+const setBackgroundColor = '#5b0f00';
+const setTextColor = '#e6b8af';
+
+test.describe('Flexible Layout styling @a11y', () => {
+  let flexibleLayout;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create a Flexible Layout and attach to the Stacked Plot
+    flexibleLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Flexible Layout',
+      name: 'Flexible Layout'
+    });
+
+    // Create a Stacked Plot and attach to the Flexible Layout
+    await createDomainObjectWithDefaults(page, {
+      type: 'Stacked Plot',
+      name: 'StackedPlot1',
+      parent: flexibleLayout.uuid
+    });
+
+    // Create a Stacked Plot and attach to the Flexible Layout
+    await createDomainObjectWithDefaults(page, {
+      type: 'Stacked Plot',
+      name: 'StackedPlot2',
+      parent: flexibleLayout.uuid
+    });
+  });
+
+  test('styling the flexible layout properly applies the styles to flex layout', async ({
+    page,
+    theme
+  }) => {
+    // Directly navigate to the flexible layout
+    await page.goto(flexibleLayout.url, { waitUntil: 'domcontentloaded' });
+
+    // Edit Flexible Layout
+    await page.getByLabel('Edit Object').click();
+
+    // Select styles tab
+    await page.getByRole('tab', { name: 'Styles' }).click();
+
+    await percySnapshot(page, `Flex Layout with 2 children (theme: '${theme}')`);
+
+    // Set styles using setStyles function
+    await setStyles(
+      page,
+      setBorderColor,
+      setBackgroundColor,
+      setTextColor,
+      page.getByLabel('Flexible Layout Column')
+    );
+
+    await percySnapshot(page, `Edit Mode Styled Flex Layout Column (theme: '${theme}')`);
+
+    await setStyles(
+      page,
+      setBorderColor,
+      setBackgroundColor,
+      setTextColor,
+      page.getByLabel('StackedPlot1 Frame')
+    );
+
+    await percySnapshot(
+      page,
+      `Edit Mode Styled Flex Layout with Styled StackedPlot (theme: '${theme}')`
+    );
+
+    // Save Flexible Layout
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    await percySnapshot(
+      page,
+      `Saved Styled Flex Layout with Styled StackedPlot (theme: '${theme}')`
+    );
+  });
+  test.afterEach(async ({ page }, testInfo) => {
+    await scanForA11yViolations(page, testInfo.title);
+  });
+});
+
+test.describe('Stacked Plot styling @a11y', () => {
+  let stackedPlot;
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    // Create a Stacked Plot
+    stackedPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Stacked Plot',
+      name: 'StackedPlot1'
+    });
+
+    // Create two SWGs and attach them to the Stacked Plot
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Sine Wave Generator 1',
+      parent: stackedPlot.uuid
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Sine Wave Generator 2',
+      parent: stackedPlot.uuid
+    });
+  });
+
+  test('styling the flexible layout properly applies the styles to flex layout', async ({
+    page,
+    theme
+  }) => {
+    // Directly navigate to the flexible layout
+    await page.goto(stackedPlot.url, { waitUntil: 'domcontentloaded' });
+
+    // Edit Flexible Layout
+    await page.getByLabel('Edit Object').click();
+
+    // Select styles tab
+    await page.getByRole('tab', { name: 'Styles' }).click();
+
+    await percySnapshot(page, `StackedPlot with 2 SWG (theme: '${theme}')`);
+
+    // Set styles using setStyles function
+    await setStyles(
+      page,
+      setBorderColor,
+      setBackgroundColor,
+      setTextColor,
+      page.getByRole('tab', { name: 'Styles' }) //Workaround for https://github.com/nasa/openmct/issues/7229
+    );
+
+    //Set Font Size to 72
+    await page.getByLabel('Set Font Size').click();
+    await page.getByRole('menuitem', { name: '72px' }).click();
+
+    //Set Font Type to Monospace Bold
+    await page.getByLabel('Set Font Type').click();
+    await page.getByRole('menuitem', { name: 'Monospace Bold' }).click();
+
+    await percySnapshot(page, `Edit Mode StackedPlot Styled (theme: '${theme}')`);
+
+    await setStyles(
+      page,
+      setBorderColor,
+      setBackgroundColor,
+      setTextColor,
+      page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
+    );
+
+    await percySnapshot(page, `Edit Mode StackedPlot with Styled SWG (theme: '${theme}')`);
+
+    // Save Flexible Layout
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    await percySnapshot(page, `Saved Styled StackedPlot (theme: '${theme}')`);
+  });
+  test.afterEach(async ({ page }, testInfo) => {
+    await scanForA11yViolations(page, testInfo.title);
+  });
+});
diff --git a/e2e/tests/visual-a11y/telemetryViews.visual.spec.js b/e2e/tests/visual-a11y/telemetryViews.visual.spec.js
new file mode 100644
index 00000000000..3e382c0b0bc
--- /dev/null
+++ b/e2e/tests/visual-a11y/telemetryViews.visual.spec.js
@@ -0,0 +1,78 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import percySnapshot from '@percy/playwright';
+
+import { createDomainObjectWithDefaults } from '../../appActions.js';
+import { VISUAL_URL } from '../../constants.js';
+import { expect, test } from '../../pluginFixtures.js';
+
+test.describe('Visual - Telemetry Views', () => {
+  let telemetry;
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+
+    // Create SWG inside of LAD Table
+    telemetry = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'SWG4'
+    });
+
+    //Modify SWG to create a really stable SWG
+    await page.getByRole('button', { name: 'More actions' }).click();
+
+    await page.getByRole('menuitem', { name: 'Edit Properties...' }).click();
+
+    //Forgive me, padre
+    await page.getByRole('spinbutton', { name: 'Data Rate (hz)' }).fill('0');
+    await page.getByRole('spinbutton', { name: 'Period' }).fill('0');
+
+    await page.getByRole('button', { name: 'Save' }).click();
+  });
+  test('Telemetry Table toggled column widths behave accordingly', async ({ page, theme }) => {
+    await page.goto(telemetry.url, { waitUntil: 'domcontentloaded' });
+
+    //Click this button to see telemetry display options
+    await page.getByRole('button', { name: 'Plot' }).click();
+    await page.getByLabel('Telemetry Table').click();
+
+    //Get Table View in place
+    expect(await page.getByLabel('Expand Columns')).toBeInViewport();
+
+    await percySnapshot(page, `Default Telemetry Table View (theme: ${theme})`);
+
+    await page.getByLabel('Expand Columns').click();
+
+    await expect(page.getByRole('button', { name: 'Autosize Columns' })).toBeVisible();
+
+    await percySnapshot(page, `Default Telemetry Table columns expanded (theme: ${theme})`);
+
+    await page.getByLabel('More actions').click();
+
+    await percySnapshot(page, `Telemetry View Actions Menu expanded (theme: ${theme})`);
+
+    await page.getByRole('menuitem', { name: 'Pause' }).click();
+
+    await percySnapshot(page, `Telemetry View Paused (theme: ${theme})`);
+  });
+});
diff --git a/example/dataVisualization/ExampleDataVisualizationSourceViewProvider.js b/example/dataVisualization/ExampleDataVisualizationSourceViewProvider.js
new file mode 100644
index 00000000000..0206fa48398
--- /dev/null
+++ b/example/dataVisualization/ExampleDataVisualizationSourceViewProvider.js
@@ -0,0 +1,75 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
+
+import ExampleDataVisualizationSource from './components/ExampleDataVisualizationSource.vue';
+
+export default function ExampleDataVisualizationSourceViewProvider(openmct) {
+  return {
+    key: 'exampleDataVisualizationSource',
+    name: 'Example Data Visualization Source',
+    cssClass: 'icon-telemetry',
+    canView: function (domainObject) {
+      return domainObject.type === 'exampleDataVisualizationSource';
+    },
+    canEdit: function (domainObject) {
+      if (domainObject.type === 'exampleDataVisualizationSource') {
+        return true;
+      }
+    },
+    view: function (domainObject) {
+      let _destroy = null;
+
+      return {
+        show: function (element, isEditing) {
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                ExampleDataVisualizationSource
+              },
+              provide: {
+                openmct,
+                domainObject
+              },
+              template: '<example-data-visualization-source></example-data-visualization-source>'
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+        },
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
+        }
+      };
+    },
+    priority: function () {
+      return 1;
+    }
+  };
+}
diff --git a/example/dataVisualization/components/ExampleDataVisualizationSource.vue b/example/dataVisualization/components/ExampleDataVisualizationSource.vue
new file mode 100644
index 00000000000..b4856b60feb
--- /dev/null
+++ b/example/dataVisualization/components/ExampleDataVisualizationSource.vue
@@ -0,0 +1,128 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-table c-list-view c-list-view--selectable">
+    <table class="c-table__body">
+      <thead class="c-table__header">
+        <tr>
+          <th>Name</th>
+          <th>Type</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="item in items"
+          :key="item.keyString"
+          class="c-list-item js-folder-child"
+          @click="selectItem(item, $event)"
+        >
+          <td class="c-list-item__name">
+            <a ref="objectLink" class="c-object-label">
+              <div
+                class="c-object-label__type-icon c-list-item__name__type-icon"
+                :class="item.type.cssClass"
+              ></div>
+              <div class="c-object-label__name c-list-item__name__name">{{ item.model.name }}</div>
+            </a>
+          </td>
+          <td class="c-list-item__type">
+            {{ item.type.name }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  inject: ['openmct', 'domainObject'],
+  data() {
+    return {
+      items: []
+    };
+  },
+  mounted() {
+    this.composition = this.openmct.composition.get(this.domainObject);
+    this.keystring = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+    this.composition.on('add', this.addedTelemetry);
+    this.composition.on('remove', this.removedTelemetry);
+    this.composition.load();
+  },
+  unmounted() {
+    this.composition.off('add', this.addedTelemetry);
+    this.composition.off('remove', this.removedTelemetry);
+  },
+  methods: {
+    selectItem(item, event) {
+      event.stopPropagation();
+      const bounds = this.openmct.time.getBounds();
+      const selection = [
+        {
+          element: this.$el,
+          context: {
+            dataVisualization: {
+              telemetryKeys: [item.objectKeyString],
+              description: {
+                text: item.model.name,
+                icon: item.type.cssClass
+              },
+              dataRanges: [
+                {
+                  bounds
+                }
+              ],
+              loading: false
+            },
+            item: this.domainObject
+          }
+        }
+      ];
+      this.openmct.selection.select(selection, false);
+    },
+    addedTelemetry(child) {
+      const type = this.openmct.types.get(child.type) || {
+        definition: {
+          cssClass: 'icon-object-unknown',
+          name: 'Unknown Type'
+        }
+      };
+      this.items.push({
+        model: child,
+        type: type.definition,
+        isAlias: this.keystring !== child.location,
+        objectPath: [child].concat(this.openmct.router.path),
+        objectKeyString: this.openmct.objects.makeKeyString(child.identifier)
+      });
+    },
+    removedTelemetry(identifier) {
+      this.items = this.items.filter((i) => {
+        return (
+          i.model.identifier.key !== identifier.key ||
+          i.model.identifier.namespace !== identifier.namespace
+        );
+      });
+    }
+  }
+};
+</script>
diff --git a/example/dataVisualization/plugin.js b/example/dataVisualization/plugin.js
new file mode 100644
index 00000000000..c10a11d1765
--- /dev/null
+++ b/example/dataVisualization/plugin.js
@@ -0,0 +1,46 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import ExampleDataVisualizationSourceViewProvider from './ExampleDataVisualizationSourceViewProvider.js';
+
+export default function () {
+  return function install(openmct) {
+    openmct.objectViews.addProvider(new ExampleDataVisualizationSourceViewProvider(openmct));
+
+    openmct.types.addType('exampleDataVisualizationSource', {
+      name: 'Example Data Visualization Source',
+      creatable: true,
+      description: 'An example data visualization source to be used with an inspector.',
+      cssClass: 'icon-telemetry',
+      initialize(domainObject) {
+        domainObject.composition = [];
+      }
+    });
+
+    openmct.composition.addPolicy((parent, child) => {
+      if (parent.type === 'exampleDataVisualizationSource') {
+        return Object.prototype.hasOwnProperty.call(child, 'telemetry');
+      } else {
+        return true;
+      }
+    });
+  };
+}
diff --git a/example/eventGenerator/EventMetadataProvider.js b/example/eventGenerator/EventMetadataProvider.js
new file mode 100644
index 00000000000..c50f1fc9b34
--- /dev/null
+++ b/example/eventGenerator/EventMetadataProvider.js
@@ -0,0 +1,60 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+class EventMetadataProvider {
+  constructor() {
+    this.METADATA_BY_TYPE = {
+      eventGenerator: {
+        values: [
+          {
+            key: 'name',
+            name: 'Name',
+            format: 'string'
+          },
+          {
+            key: 'utc',
+            name: 'Time',
+            format: 'utc',
+            hints: {
+              domain: 1
+            }
+          },
+          {
+            key: 'message',
+            name: 'Message',
+            format: 'string'
+          }
+        ]
+      }
+    };
+  }
+
+  supportsMetadata(domainObject) {
+    return Object.prototype.hasOwnProperty.call(this.METADATA_BY_TYPE, domainObject.type);
+  }
+
+  getMetadata(domainObject) {
+    return Object.assign({}, domainObject.telemetry, this.METADATA_BY_TYPE[domainObject.type]);
+  }
+}
+
+export default EventMetadataProvider;
diff --git a/example/eventGenerator/EventTelemetryProvider.js b/example/eventGenerator/EventTelemetryProvider.js
new file mode 100644
index 00000000000..2822a6a4354
--- /dev/null
+++ b/example/eventGenerator/EventTelemetryProvider.js
@@ -0,0 +1,104 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/**
+ * Module defining EventTelemetryProvider. Created by chacskaylo on 06/18/2015.
+ */
+
+import messages from './transcript.json';
+
+class EventTelemetryProvider {
+  constructor() {
+    this.defaultSize = 25;
+  }
+
+  generateData(firstObservedTime, count, startTime, duration, name) {
+    const millisecondsSinceStart = startTime - firstObservedTime;
+    const utc = startTime + count * duration;
+    const ind = count % messages.length;
+    const message = messages[ind] + ' - [' + millisecondsSinceStart + ']';
+
+    return {
+      name,
+      utc,
+      message
+    };
+  }
+
+  supportsRequest(domainObject) {
+    return domainObject.type === 'eventGenerator';
+  }
+
+  supportsSubscribe(domainObject) {
+    return domainObject.type === 'eventGenerator';
+  }
+
+  subscribe(domainObject, callback) {
+    const duration = domainObject.telemetry.duration * 1000;
+    const firstObservedTime = Date.now();
+    let count = 0;
+
+    const interval = setInterval(() => {
+      const startTime = Date.now();
+      const datum = this.generateData(
+        firstObservedTime,
+        count,
+        startTime,
+        duration,
+        domainObject.name
+      );
+      count += 1;
+      callback(datum);
+    }, duration);
+
+    return function () {
+      clearInterval(interval);
+    };
+  }
+
+  request(domainObject, options) {
+    let start = options.start;
+    const end = Math.min(Date.now(), options.end); // no future values
+    const duration = domainObject.telemetry.duration * 1000;
+    const size = options.size ? options.size : this.defaultSize;
+    const data = [];
+    const firstObservedTime = options.start;
+    let count = 0;
+
+    if (options.strategy === 'latest' || options.size === 1) {
+      start = end;
+    }
+
+    while (start <= end && data.length < size) {
+      const startTime = options.start + count;
+      data.push(
+        this.generateData(firstObservedTime, count, startTime, duration, domainObject.name)
+      );
+      start += duration;
+      count += 1;
+    }
+
+    return Promise.resolve(data);
+  }
+}
+
+export default EventTelemetryProvider;
diff --git a/example/eventGenerator/bundle.js b/example/eventGenerator/bundle.js
deleted file mode 100644
index 8c37d75623f..00000000000
--- a/example/eventGenerator/bundle.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/EventTelemetryProvider"
-], function (
-    EventTelemetryProvider
-) {
-    "use strict";
-
-    return {
-        name: "example/eventGenerator",
-        definition: {
-            "name": "Event Message Generator",
-            "description": "For development use. Creates sample event message data that mimics a live data stream.",
-            "extensions": {
-                "components": [
-                    {
-                        "implementation": EventTelemetryProvider,
-                        "type": "provider",
-                        "provides": "telemetryService",
-                        "depends": [
-                            "$q",
-                            "$timeout"
-                        ]
-                    }
-                ],
-                "types": [
-                    {
-                        "key": "eventGenerator",
-                        "name": "Event Message Generator",
-                        "cssClass": "icon-generator-events",
-                        "description": "For development use. Creates sample event message data that mimics a live data stream.",
-                        "priority": 10,
-                        "features": "creation",
-                        "model": {
-                            "telemetry": {}
-                        },
-                        "telemetry": {
-                            "source": "eventGenerator",
-                            "domains": [
-                                {
-                                    "key": "utc",
-                                    "name": "Timestamp",
-                                    "format": "utc"
-                                }
-                            ],
-                            "ranges": [
-                                {
-                                    "key": "message",
-                                    "name": "Message",
-                                    "format": "string"
-                                }
-                            ]
-                        }
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/example/eventGenerator/data/transcript.json b/example/eventGenerator/data/transcript.json
deleted file mode 100644
index ce787353303..00000000000
--- a/example/eventGenerator/data/transcript.json
+++ /dev/null
@@ -1,58 +0,0 @@
-[
-    "CC: Eagle, Houston. You're GO for landing. Over.",
-    "LMP: Roger. Understand. GO for landing. 3000 feet. PROGRAM ALARM.",
-    "CC: Copy.",
-    "LMP: 1201",
-    "CDR: 1201.",
-    "CC: Roger. 1201 alarm. We're GO. Same type. We're GO.",
-    "LMP: 2000 feet. 2000 feet, Into the AGS, 47 degrees.",
-    "CC: Roger.",
-    "LMP: 47 degrees.",
-    "CC: Eagle, looking great. You're GO.",
-    "CC: Roger. 1202. We copy it.",
-    "O1: LMP 35 degrees. 35 degrees. 750. Coming down to 23.fl",
-    "LMP: 700 feet, 21 down, 33 degrees.",
-    "LMP: 600 feet, down at 19.",
-    "LMP: 540 feet, down at - 30. Down at 15.",
-    "LMP: At 400 feet, down at 9.",
-    "LMP: ...forward.",
-    "LMP: 350 feet, down at 4.",
-    "LMP: 30, ... one-half down.",
-    "LMP: We're pegged on horizontal velocity.",
-    "LMP: 300 feet, down 3 1/2, 47 forward.",
-    "LMP: ... up.",
-    "LMP: On 1 a minute, 1 1/2 down.",
-    "CDR: 70.",
-    "LMP: Watch your shadow out there.",
-    "LMP: 50, down at 2 1/2, 19 forward.",
-    "LMP: Altitude-velocity light.",
-    "LMP: 3 1/2 down s 220 feet, 13 forward.",
-    "LMP: 1t forward. Coming down nicely.",
-    "LMP: 200 feet, 4 1/2 down.",
-    "LMP: 5 1/2 down.",
-    "LMP: 160, 6 - 6 1/2 down.",
-    "LMP: 5 1/2 down, 9 forward. That's good.",
-    "LMP: 120 feet.",
-    "LMP: 100 feet, 3 1/2 down, 9 forward. Five percent.",
-    "LMP: ...",
-    "LMP: Okay. 75 feet. There's looking good. Down a half, 6 forward.",
-    "CC:  60 seconds.",
-    "LMP: Lights on. ...",
-    "LMP: Down 2 1/2. Forward. Forward. Good.",
-    "LMP: 40 feet, down 2 1/2. Kicking up some dust.",
-    "LMP: 30 feet, 2 1/2 down. Faint shadow.",
-    "LMP: 4 forward. 4 forward. Drifting to the right a little. Okay. Down a half.",
-    "CC:  30 seconds.",
-    "CDR: Forward drift?",
-    "LMP: Yes.",
-    "LMP: Okay.",
-    "LMP: CONTACT LIGHT.",
-    "LMP: Okay. ENGINE STOP.",
-    "LMP: ACA - out of DETENT.",
-    "CDR: Out of DETENT.",
-    "LMP: MODE CONTROL - both AUTO. DESCENT ENGINE COMMAND OVERRIDE - OFF. ENGINE ARM - OFF.",
-    "LMP: 413 is in.",
-    "CC:  We copy you down, Eagle.",
-    "CDR: Houston, Tranquility Base here.",
-    "CDR: THE EAGLE HAS LANDED."
-]
\ No newline at end of file
diff --git a/example/eventGenerator/plugin.js b/example/eventGenerator/plugin.js
new file mode 100644
index 00000000000..a8c051f6d0a
--- /dev/null
+++ b/example/eventGenerator/plugin.js
@@ -0,0 +1,42 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import EventMetadataProvider from './EventMetadataProvider.js';
+import EventTelemetryProvider from './EventTelemetryProvider.js';
+
+export default function EventGeneratorPlugin(options) {
+  return function install(openmct) {
+    openmct.types.addType('eventGenerator', {
+      name: 'Event Message Generator',
+      description:
+        'For development use. Creates sample event message data that mimics a live data stream.',
+      cssClass: 'icon-generator-events',
+      creatable: true,
+      initialize: function (object) {
+        object.telemetry = {
+          duration: 5
+        };
+      }
+    });
+    openmct.telemetry.addProvider(new EventTelemetryProvider());
+    openmct.telemetry.addProvider(new EventMetadataProvider());
+  };
+}
diff --git a/example/eventGenerator/pluginSpec.js b/example/eventGenerator/pluginSpec.js
new file mode 100644
index 00000000000..03ab6373661
--- /dev/null
+++ b/example/eventGenerator/pluginSpec.js
@@ -0,0 +1,73 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import { createOpenMct, resetApplicationState } from '../../src/utils/testing.js';
+import EventMessageGeneratorPlugin from './plugin.js';
+
+describe('the plugin', () => {
+  let openmct;
+  const mockDomainObject = {
+    identifier: {
+      namespace: '',
+      key: 'some-value'
+    },
+    telemetry: {
+      duration: 0
+    },
+    options: {},
+    type: 'eventGenerator'
+  };
+
+  beforeEach((done) => {
+    const options = {};
+    openmct = createOpenMct();
+    openmct.install(new EventMessageGeneratorPlugin(options));
+    openmct.on('start', done);
+    openmct.startHeadless();
+  });
+
+  afterEach(async () => {
+    await resetApplicationState(openmct);
+  });
+
+  describe('the plugin', () => {
+    it('supports subscription', (done) => {
+      const unsubscribe = openmct.telemetry.subscribe(mockDomainObject, (telemetry) => {
+        expect(telemetry).not.toEqual(null);
+        expect(telemetry.message).toContain('CC: Eagle, Houston');
+        expect(unsubscribe).not.toEqual(null);
+        unsubscribe();
+        done();
+      });
+    });
+
+    it('supports requests without start/end defined', async () => {
+      const telemetry = await openmct.telemetry.request(mockDomainObject);
+      expect(telemetry[0].message).toContain('CC: Eagle, Houston');
+    });
+
+    it('supports requests with arbitrary start time in the past', async () => {
+      mockDomainObject.options.start = 100000000000; // Mar 03 1973
+      const telemetry = await openmct.telemetry.request(mockDomainObject);
+      expect(telemetry[0].message).toContain('CC: Eagle, Houston');
+    });
+  });
+});
diff --git a/example/eventGenerator/src/EventTelemetry.js b/example/eventGenerator/src/EventTelemetry.js
deleted file mode 100644
index 33117617595..00000000000
--- a/example/eventGenerator/src/EventTelemetry.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining EventTelemetry.
- * Created by chacskaylo on 06/18/2015.
- * Modified by shale on 06/23/2015.
- */
-define(
-    ['../data/transcript.json'],
-    function (messages) {
-        "use strict";
-
-        var firstObservedTime = Date.now();
-
-        function EventTelemetry(request, interval) {
-
-            var latestObservedTime = Date.now(),
-                count = Math.floor((latestObservedTime - firstObservedTime) / interval),
-                generatorData = {};
-
-            generatorData.getPointCount = function () {
-                return count;
-            };
-
-            generatorData.getDomainValue = function (i, domain) {
-                return i * interval
-                        + (domain !== 'delta' ? firstObservedTime : 0);
-            };
-
-            generatorData.getRangeValue = function (i, range) {
-                var domainDelta = this.getDomainValue(i) - firstObservedTime,
-                    ind = i % messages.length;
-
-                return messages[ind] + " - [" + domainDelta.toString() + "]";
-            };
-
-            return generatorData;
-        }
-
-        return EventTelemetry;
-    }
-);
diff --git a/example/eventGenerator/src/EventTelemetryProvider.js b/example/eventGenerator/src/EventTelemetryProvider.js
deleted file mode 100644
index c6ed7ac90b6..00000000000
--- a/example/eventGenerator/src/EventTelemetryProvider.js
+++ /dev/null
@@ -1,118 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining EventTelemetryProvider. Created by chacskaylo on 06/18/2015.
- */
-define(
-    ["./EventTelemetry"],
-    function (EventTelemetry) {
-        "use strict";
-
-        /**
-         *
-         * @constructor
-         */
-        function EventTelemetryProvider($q, $timeout) {
-            var subscriptions = [],
-                genInterval = 1000,
-                generating = false;
-
-            //
-            function matchesSource(request) {
-                return request.source === "eventGenerator";
-            }
-
-            // Used internally; this will be repacked by doPackage
-            function generateData(request) {
-                return {
-                    key: request.key,
-                    telemetry: new EventTelemetry(request, genInterval)
-                };
-            }
-
-            //
-            function doPackage(results) {
-                var packaged = {};
-                results.forEach(function (result) {
-                    packaged[result.key] = result.telemetry;
-                });
-
-                // Format as expected (sources -> keys -> telemetry)
-                return { eventGenerator: packaged };
-            }
-
-            function requestTelemetry(requests) {
-                return $timeout(function () {
-                    return doPackage(requests.filter(matchesSource).map(generateData));
-                }, 0);
-            }
-
-            function handleSubscriptions(timeout) {
-                subscriptions.forEach(function (subscription) {
-                    var requests = subscription.requests;
-                    subscription.callback(doPackage(
-                        requests.filter(matchesSource).map(generateData)
-                    ));
-                });
-            }
-
-            function startGenerating() {
-                generating = true;
-                $timeout(function () {
-                    handleSubscriptions();
-                    if (generating && subscriptions.length > 0) {
-                        startGenerating();
-                    } else {
-                        generating = false;
-                    }
-                }, genInterval);
-            }
-
-            function subscribe(callback, requests) {
-                var subscription = {
-                    callback: callback,
-                    requests: requests
-                };
-                function unsubscribe() {
-                    subscriptions = subscriptions.filter(function (s) {
-                        return s !== subscription;
-                    });
-                }
-
-                subscriptions.push(subscription);
-                if (!generating) {
-                    startGenerating();
-                }
-
-                return unsubscribe;
-            }
-
-            return {
-                requestTelemetry: requestTelemetry,
-                subscribe: subscribe
-            };
-        }
-
-        return EventTelemetryProvider;
-    }
-);
diff --git a/example/eventGenerator/transcript.json b/example/eventGenerator/transcript.json
new file mode 100644
index 00000000000..bb52ff94eea
--- /dev/null
+++ b/example/eventGenerator/transcript.json
@@ -0,0 +1,58 @@
+[
+  "CC: Eagle, Houston. You're GO for landing. Over.",
+  "LMP: Roger. Understand. GO for landing. 3000 feet. PROGRAM ALARM.",
+  "CC: Copy.",
+  "LMP: 1201",
+  "CDR: 1201.",
+  "CC: Roger. 1201 alarm. We're GO. Same type. We're GO.",
+  "LMP: 2000 feet. 2000 feet, Into the AGS, 47 degrees.",
+  "CC: Roger.",
+  "LMP: 47 degrees.",
+  "CC: Eagle, looking great. You're GO.",
+  "CC: Roger. 1202. We copy it.",
+  "O1: LMP 35 degrees. 35 degrees. 750. Coming down to 23.fl",
+  "LMP: 700 feet, 21 down, 33 degrees.",
+  "LMP: 600 feet, down at 19.",
+  "LMP: 540 feet, down at - 30. Down at 15.",
+  "LMP: At 400 feet, down at 9.",
+  "LMP: ...forward.",
+  "LMP: 350 feet, down at 4.",
+  "LMP: 30, ... one-half down.",
+  "LMP: We're pegged on horizontal velocity.",
+  "LMP: 300 feet, down 3 1/2, 47 forward.",
+  "LMP: ... up.",
+  "LMP: On 1 a minute, 1 1/2 down.",
+  "CDR: 70.",
+  "LMP: Watch your shadow out there.",
+  "LMP: 50, down at 2 1/2, 19 forward.",
+  "LMP: Altitude-velocity light.",
+  "LMP: 3 1/2 down s 220 feet, 13 forward.",
+  "LMP: 1t forward. Coming down nicely.",
+  "LMP: 200 feet, 4 1/2 down.",
+  "LMP: 5 1/2 down.",
+  "LMP: 160, 6 - 6 1/2 down.",
+  "LMP: 5 1/2 down, 9 forward. That's good.",
+  "LMP: 120 feet.",
+  "LMP: 100 feet, 3 1/2 down, 9 forward. Five percent.",
+  "LMP: ...",
+  "LMP: Okay. 75 feet. There's looking good. Down a half, 6 forward.",
+  "CC:  60 seconds.",
+  "LMP: Lights on. ...",
+  "LMP: Down 2 1/2. Forward. Forward. Good.",
+  "LMP: 40 feet, down 2 1/2. Kicking up some dust.",
+  "LMP: 30 feet, 2 1/2 down. Faint shadow.",
+  "LMP: 4 forward. 4 forward. Drifting to the right a little. Okay. Down a half.",
+  "CC:  30 seconds.",
+  "CDR: Forward drift?",
+  "LMP: Yes.",
+  "LMP: Okay.",
+  "LMP: CONTACT LIGHT.",
+  "LMP: Okay. ENGINE STOP.",
+  "LMP: ACA - out of DETENT.",
+  "CDR: Out of DETENT.",
+  "LMP: MODE CONTROL - both AUTO. DESCENT ENGINE COMMAND OVERRIDE - OFF. ENGINE ARM - OFF.",
+  "LMP: 413 is in.",
+  "CC:  We copy you down, Eagle.",
+  "CDR: Houston, Tranquility Base here.",
+  "CDR: THE EAGLE HAS LANDED."
+]
diff --git a/example/exampleTags/plugin.js b/example/exampleTags/plugin.js
new file mode 100644
index 00000000000..2e2cd480603
--- /dev/null
+++ b/example/exampleTags/plugin.js
@@ -0,0 +1,45 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import availableTags from './tags.json';
+
+/**
+@typedef {{
+    namespaceToSaveAnnotations: string
+}} TagsPluginOptions
+*/
+
+/**
+ * @typedef {TagsPluginOptions} options
+ * @returns {function} The plugin install function
+ */
+export default function exampleTagsPlugin(options) {
+  return function install(openmct) {
+    if (options?.namespaceToSaveAnnotations) {
+      openmct.annotation.setNamespaceToSaveAnnotations(options?.namespaceToSaveAnnotations);
+    }
+
+    Object.keys(availableTags.tags).forEach((tagKey) => {
+      const tagDefinition = availableTags.tags[tagKey];
+      openmct.annotation.defineTag(tagKey, tagDefinition);
+    });
+  };
+}
diff --git a/example/exampleTags/tags.json b/example/exampleTags/tags.json
new file mode 100644
index 00000000000..093ffa80d37
--- /dev/null
+++ b/example/exampleTags/tags.json
@@ -0,0 +1,19 @@
+{
+  "tags": {
+    "46a62ad1-bb86-4f88-9a17-2a029e12669d": {
+      "label": "Science",
+      "backgroundColor": "#cc0000",
+      "foregroundColor": "#ffffff"
+    },
+    "65f150ef-73b7-409a-b2e8-258cbd8b7323": {
+      "label": "Driving",
+      "backgroundColor": "#ffad32",
+      "foregroundColor": "#333333"
+    },
+    "f156b038-c605-46db-88a6-67cf2489a371": {
+      "label": "Drilling",
+      "backgroundColor": "#b0ac4e",
+      "foregroundColor": "#FFFFFF"
+    }
+  }
+}
diff --git a/example/exampleUser/ExampleUserProvider.js b/example/exampleUser/ExampleUserProvider.js
new file mode 100644
index 00000000000..d80735abd0a
--- /dev/null
+++ b/example/exampleUser/ExampleUserProvider.js
@@ -0,0 +1,278 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import EventEmitter from 'EventEmitter';
+import { v4 as uuid } from 'uuid';
+
+import createExampleUser from './exampleUserCreator.js';
+
+const STATUSES = [
+  {
+    key: 'NO_STATUS',
+    label: 'Not set',
+    iconClass: 'icon-question-mark',
+    iconClassPoll: 'icon-status-poll-question-mark'
+  },
+  {
+    key: 'GO',
+    label: 'Go',
+    iconClass: 'icon-check',
+    iconClassPoll: 'icon-status-poll-question-mark',
+    statusClass: 's-status-ok',
+    statusBgColor: '#33cc33',
+    statusFgColor: '#000'
+  },
+  {
+    key: 'MAYBE',
+    label: 'Maybe',
+    iconClass: 'icon-alert-triangle',
+    iconClassPoll: 'icon-status-poll-question-mark',
+    statusClass: 's-status-warning',
+    statusBgColor: '#ffb66c',
+    statusFgColor: '#000'
+  },
+  {
+    key: 'NO_GO',
+    label: 'No go',
+    iconClass: 'icon-circle-slash',
+    iconClassPoll: 'icon-status-poll-question-mark',
+    statusClass: 's-status-error',
+    statusBgColor: '#9900cc',
+    statusFgColor: '#fff'
+  }
+];
+
+const MISSION_STATUSES = [
+  {
+    key: 0,
+    label: 'NO GO'
+  },
+  {
+    key: 1,
+    label: 'GO'
+  }
+];
+/**
+ * @implements {StatusUserProvider}
+ */
+export default class ExampleUserProvider extends EventEmitter {
+  #actionToStatusMap;
+  constructor(
+    openmct,
+    { statusRoles } = {
+      statusRoles: []
+    }
+  ) {
+    super();
+
+    this.openmct = openmct;
+    this.#actionToStatusMap = {
+      Imagery: MISSION_STATUSES[0],
+      Commanding: MISSION_STATUSES[0],
+      Driving: MISSION_STATUSES[0]
+    };
+    this.user = undefined;
+    this.loggedIn = false;
+    this.autoLoginUser = undefined;
+    this.statusRoleValues = statusRoles.map((role) => ({
+      role: role,
+      status: STATUSES[0]
+    }));
+    this.pollQuestion = undefined;
+    this.statusRoles = statusRoles;
+
+    this.ExampleUser = createExampleUser(this.openmct.user.User);
+    this.loginPromise = undefined;
+  }
+
+  isLoggedIn() {
+    return this.loggedIn;
+  }
+
+  autoLogin(username) {
+    this.autoLoginUser = username;
+  }
+
+  getCurrentUser() {
+    if (!this.loginPromise) {
+      this.loginPromise = this._login().then(() => this.user);
+    }
+
+    return this.loginPromise;
+  }
+
+  canProvideStatusForRole(role) {
+    return this.statusRoles.includes(role);
+  }
+
+  canSetPollQuestion() {
+    return Promise.resolve(true);
+  }
+
+  canSetMissionStatus() {
+    return Promise.resolve(true);
+  }
+
+  hasRole(roleId) {
+    if (!this.loggedIn) {
+      Promise.resolve(undefined);
+    }
+
+    return Promise.resolve(this.user.getRoles().includes(roleId));
+  }
+
+  getPossibleRoles() {
+    return this.user.getRoles();
+  }
+
+  getPossibleMissionActions() {
+    return Promise.resolve(Object.keys(this.#actionToStatusMap));
+  }
+
+  getPossibleMissionActionStatuses() {
+    return Promise.resolve(MISSION_STATUSES);
+  }
+
+  getStatusForMissionAction(action) {
+    return Promise.resolve(this.#actionToStatusMap[action]);
+  }
+
+  setStatusForMissionAction(action, status) {
+    this.#actionToStatusMap[action] = status;
+    this.emit('missionStatusChange', {
+      action,
+      status
+    });
+
+    return true;
+  }
+
+  getAllStatusRoles() {
+    return Promise.resolve(this.statusRoles);
+  }
+
+  getStatusForRole(role) {
+    const statusForRole = this.statusRoleValues.find((statusRole) => statusRole.role === role);
+
+    return Promise.resolve(statusForRole?.status);
+  }
+
+  async getDefaultStatusForRole(role) {
+    const allRoles = await this.getPossibleStatuses();
+
+    return allRoles?.[0];
+  }
+
+  setStatusForRole(role, status) {
+    status.timestamp = Date.now();
+    const matchingIndex = this.statusRoleValues.findIndex((statusRole) => statusRole.role === role);
+    this.statusRoleValues[matchingIndex].status = status;
+    this.emit('statusChange', {
+      role,
+      status
+    });
+
+    return true;
+  }
+
+  // eslint-disable-next-line require-await
+  async getPollQuestion() {
+    if (this.pollQuestion) {
+      return this.pollQuestion;
+    } else {
+      return undefined;
+    }
+  }
+
+  setPollQuestion(pollQuestion) {
+    if (!pollQuestion) {
+      // If the poll question is undefined, set it to a blank string.
+      // This behavior better reflects how other telemetry systems
+      // deal with undefined poll questions.
+      pollQuestion = '';
+    }
+
+    this.pollQuestion = {
+      question: pollQuestion,
+      timestamp: Date.now()
+    };
+    this.emit('pollQuestionChange', this.pollQuestion);
+
+    return true;
+  }
+
+  getPossibleStatuses() {
+    return Promise.resolve(STATUSES);
+  }
+
+  _login() {
+    const id = uuid();
+
+    // for testing purposes, this will skip the form, this wouldn't be used in
+    // a normal authentication process
+    if (this.autoLoginUser) {
+      this.user = new this.ExampleUser(id, this.autoLoginUser, ['flight', 'driver', 'observer']);
+      this.loggedIn = true;
+
+      return Promise.resolve();
+    }
+
+    const formStructure = {
+      title: 'Login',
+      sections: [
+        {
+          rows: [
+            {
+              key: 'username',
+              control: 'textfield',
+              name: 'Username',
+              pattern: '\\S+',
+              required: true,
+              cssClass: 'l-input-lg',
+              value: ''
+            }
+          ]
+        }
+      ],
+      buttons: {
+        submit: {
+          label: 'Login'
+        }
+      }
+    };
+
+    return this.openmct.forms.showForm(formStructure).then(
+      (info) => {
+        this.user = new this.ExampleUser(id, info.username, ['example-role']);
+        this.loggedIn = true;
+      },
+      () => {
+        // user canceled, setting a default username
+        this.user = new this.ExampleUser(id, 'Pat', ['example-role']);
+        this.loggedIn = true;
+      }
+    );
+  }
+}
+/**
+ * @typedef {import('@/api/user/StatusUserProvider').default} StatusUserProvider
+ */
diff --git a/example/exampleUser/exampleUserCreator.js b/example/exampleUser/exampleUserCreator.js
new file mode 100644
index 00000000000..67d52d524c0
--- /dev/null
+++ b/example/exampleUser/exampleUserCreator.js
@@ -0,0 +1,36 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+export default function createExampleUser(UserClass) {
+  return class ExampleUser extends UserClass {
+    constructor(id, name, roles) {
+      super(id, name);
+
+      this.roles = roles;
+      this.getRoles = this.getRoles.bind(this);
+    }
+
+    getRoles() {
+      return this.roles;
+    }
+  };
+}
diff --git a/example/exampleUser/plugin.js b/example/exampleUser/plugin.js
new file mode 100644
index 00000000000..cd0469e2ed4
--- /dev/null
+++ b/example/exampleUser/plugin.js
@@ -0,0 +1,44 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import ExampleUserProvider from './ExampleUserProvider.js';
+const AUTO_LOGIN_USER = 'mct-user';
+const STATUS_ROLES = ['flight', 'driver'];
+
+export default function ExampleUserPlugin(
+  { autoLoginUser, statusRoles } = {
+    autoLoginUser: AUTO_LOGIN_USER,
+    statusRoles: STATUS_ROLES
+  }
+) {
+  return function install(openmct) {
+    const userProvider = new ExampleUserProvider(openmct, {
+      statusRoles
+    });
+
+    if (autoLoginUser !== undefined) {
+      userProvider.autoLogin(autoLoginUser);
+    }
+
+    openmct.user.setProvider(userProvider);
+  };
+}
diff --git a/example/exampleUser/pluginSpec.js b/example/exampleUser/pluginSpec.js
new file mode 100644
index 00000000000..199f7d00e83
--- /dev/null
+++ b/example/exampleUser/pluginSpec.js
@@ -0,0 +1,47 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createOpenMct, resetApplicationState } from '../../src/utils/testing.js';
+import ExampleUserProvider from './ExampleUserProvider.js';
+
+describe('The Example User Plugin', () => {
+  let openmct;
+
+  beforeEach(() => {
+    openmct = createOpenMct();
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  it('is not installed by default', () => {
+    expect(openmct.user.hasProvider()).toBeFalse();
+  });
+
+  it('can be installed', () => {
+    openmct.user.on('providerAdded', (provider) => {
+      expect(provider).toBeInstanceOf(ExampleUserProvider);
+    });
+    openmct.install(openmct.plugins.example.ExampleUser());
+  });
+});
diff --git a/example/export/ExportTelemetryAsCSVAction.js b/example/export/ExportTelemetryAsCSVAction.js
deleted file mode 100644
index fdc162dd956..00000000000
--- a/example/export/ExportTelemetryAsCSVAction.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([], function () {
-    'use strict';
-
-    /**
-     * An example of using the `exportService`; queries for telemetry
-     * and provides the results as a CSV file.
-     * @param {platform/exporters.ExportService} exportService the
-     *        service which will handle the CSV export
-     * @param {ActionContext} context the action's context
-     * @constructor
-     * @memberof example/export
-     * @implements {Action}
-     */
-    function ExportTelemetryAsCSVAction(exportService, context) {
-        this.exportService = exportService;
-        this.context = context;
-    }
-
-    ExportTelemetryAsCSVAction.prototype.perform = function () {
-        var context = this.context,
-            domainObject = context.domainObject,
-            telemetry = domainObject.getCapability("telemetry"),
-            metadata = telemetry.getMetadata(),
-            domains = metadata.domains,
-            ranges = metadata.ranges,
-            exportService = this.exportService;
-
-        function getName(domainOrRange) {
-            return domainOrRange.name;
-        }
-
-        telemetry.requestData({}).then(function (series) {
-            var headers = domains.map(getName).concat(ranges.map(getName)),
-                rows = [],
-                row,
-                i;
-
-            function copyDomainsToRow(telemetryRow, index) {
-                domains.forEach(function (domain) {
-                    telemetryRow[domain.name] = series.getDomainValue(index, domain.key);
-                });
-            }
-
-            function copyRangesToRow(telemetryRow, index) {
-                ranges.forEach(function (range) {
-                    telemetryRow[range.name] = series.getRangeValue(index, range.key);
-                });
-            }
-
-            for (i = 0; i < series.getPointCount(); i += 1) {
-                row = {};
-                copyDomainsToRow(row, i);
-                copyRangesToRow(row, i);
-                rows.push(row);
-            }
-
-            exportService.exportCSV(rows, { headers: headers });
-        });
-    };
-
-    ExportTelemetryAsCSVAction.appliesTo = function (context) {
-        return context.domainObject
-            && context.domainObject.hasCapability("telemetry");
-    };
-
-    return ExportTelemetryAsCSVAction;
-});
diff --git a/example/export/bundle.js b/example/export/bundle.js
deleted file mode 100644
index 55a7007592b..00000000000
--- a/example/export/bundle.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    './ExportTelemetryAsCSVAction'
-], function (ExportTelemetryAsCSVAction) {
-    "use strict";
-
-    return {
-        name: "example/export",
-        definition: {
-            "name": "Example of using CSV Export",
-            "extensions": {
-                "actions": [
-                    {
-                        "key": "example.export",
-                        "name": "Export Telemetry as CSV",
-                        "implementation": ExportTelemetryAsCSVAction,
-                        "category": "contextual",
-                        "cssClass": "icon-download",
-                        "depends": ["exportService"]
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/example/faultManagement/exampleFaultSource.js b/example/faultManagement/exampleFaultSource.js
new file mode 100644
index 00000000000..1215549eb9b
--- /dev/null
+++ b/example/faultManagement/exampleFaultSource.js
@@ -0,0 +1,62 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import utils from './utils.js';
+
+export default function (staticFaults = false) {
+  return function install(openmct) {
+    openmct.install(openmct.plugins.FaultManagement());
+
+    const faultsData = utils.randomFaults(staticFaults);
+
+    openmct.faults.addProvider({
+      request(domainObject, options) {
+        return Promise.resolve(faultsData);
+      },
+      subscribe(domainObject, callback) {
+        callback({ type: 'global-alarm-status' });
+
+        return () => {};
+      },
+      supportsRequest(domainObject) {
+        return domainObject.type === 'faultManagement';
+      },
+      supportsSubscribe(domainObject) {
+        return domainObject.type === 'faultManagement';
+      },
+      acknowledgeFault(fault, { comment = '' }) {
+        utils.acknowledgeFault(fault);
+
+        return Promise.resolve({
+          success: true
+        });
+      },
+      shelveFault(fault, duration) {
+        utils.shelveFault(fault, duration);
+
+        return Promise.resolve({
+          success: true
+        });
+      }
+    });
+  };
+}
diff --git a/example/faultManagement/pluginSpec.js b/example/faultManagement/pluginSpec.js
new file mode 100644
index 00000000000..e7751fee11a
--- /dev/null
+++ b/example/faultManagement/pluginSpec.js
@@ -0,0 +1,44 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createOpenMct, resetApplicationState } from '../../src/utils/testing.js';
+
+describe('The Example Fault Source Plugin', () => {
+  let openmct;
+
+  beforeEach(() => {
+    openmct = createOpenMct();
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  it('is not installed by default', () => {
+    expect(openmct.faults.provider).toBeUndefined();
+  });
+
+  it('can be installed', () => {
+    openmct.install(openmct.plugins.example.ExampleFaultSource());
+    expect(openmct.faults.provider).not.toBeUndefined();
+  });
+});
diff --git a/example/faultManagement/utils.js b/example/faultManagement/utils.js
new file mode 100644
index 00000000000..4a38cd9e71c
--- /dev/null
+++ b/example/faultManagement/utils.js
@@ -0,0 +1,79 @@
+const SEVERITIES = ['WATCH', 'WARNING', 'CRITICAL'];
+const NAMESPACE = '/Example/fault-';
+const getRandom = {
+  severity: () => SEVERITIES[Math.floor(Math.random() * 3)],
+  value: () => Math.random() + Math.floor(Math.random() * 21) - 10,
+  fault: (num, staticFaults) => {
+    let val = getRandom.value();
+    let severity = getRandom.severity();
+    let time = Date.now() - num;
+
+    if (staticFaults) {
+      let severityIndex = num > 3 ? num % 3 : num;
+
+      val = num;
+      severity = SEVERITIES[severityIndex - 1];
+      time = num;
+    }
+
+    return {
+      type: num,
+      fault: {
+        acknowledged: false,
+        currentValueInfo: {
+          value: val,
+          rangeCondition: severity,
+          monitoringResult: severity
+        },
+        id: `id-${num}`,
+        name: `Example Fault ${num}`,
+        namespace: NAMESPACE + num,
+        seqNum: 0,
+        severity: severity,
+        shelved: false,
+        shortDescription: '',
+        triggerTime: time,
+        triggerValueInfo: {
+          value: val,
+          rangeCondition: severity,
+          monitoringResult: severity
+        }
+      }
+    };
+  }
+};
+
+function shelveFault(
+  fault,
+  opts = {
+    shelved: true,
+    comment: '',
+    shelveDuration: 90000
+  }
+) {
+  fault.shelved = true;
+
+  setTimeout(() => {
+    fault.shelved = false;
+  }, opts.shelveDuration);
+}
+
+function acknowledgeFault(fault) {
+  fault.acknowledged = true;
+}
+
+function randomFaults(staticFaults, count = 5) {
+  let faults = [];
+
+  for (let x = 1, y = count + 1; x < y; x++) {
+    faults.push(getRandom.fault(x, staticFaults));
+  }
+
+  return faults;
+}
+
+export default {
+  randomFaults,
+  shelveFault,
+  acknowledgeFault
+};
diff --git a/example/forms/bundle.js b/example/forms/bundle.js
deleted file mode 100644
index 638b4d45c6e..00000000000
--- a/example/forms/bundle.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/ExampleFormController"
-], function (
-    ExampleFormController
-) {
-    "use strict";
-
-    return {
-        name: "example/forms",
-        definition: {
-            "name": "Declarative Forms example",
-            "sources": "src",
-            "extensions": {
-                "controllers": [
-                    {
-                        "key": "ExampleFormController",
-                        "implementation": ExampleFormController,
-                        "depends": [
-                            "$scope"
-                        ]
-                    }
-                ],
-                "routes": [
-                    {
-                        "templateUrl": "templates/exampleForm.html"
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/example/forms/res/templates/exampleForm.html b/example/forms/res/templates/exampleForm.html
deleted file mode 100644
index ec582b9e540..00000000000
--- a/example/forms/res/templates/exampleForm.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div ng-controller="ExampleFormController">
-    <mct-toolbar structure="toolbar"
-                 ng-model="state"
-                 name="aToolbar"></mct-toolbar>
-
-    <mct-form structure="form"
-              ng-model="state"
-              class="validates"
-              name="aForm"></mct-form>
-
-    <ul>
-        <li>Dirty: {{aForm.$dirty}}</li>
-        <li>Valid: {{aForm.$valid}}</li>
-    </ul>
-
-    <pre>
-        <textarea>
-            {{state | json}}
-        </textarea>
-    </pre>
-</div>
diff --git a/example/forms/src/ExampleFormController.js b/example/forms/src/ExampleFormController.js
deleted file mode 100644
index cea41b861d1..00000000000
--- a/example/forms/src/ExampleFormController.js
+++ /dev/null
@@ -1,205 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-        "use strict";
-
-        function ExampleFormController($scope) {
-            $scope.state = {
-
-            };
-
-            $scope.toolbar = {
-                name: "An example toolbar.",
-                sections: [
-                    {
-                        description: "First section",
-                        items: [
-                            {
-                                name: "X",
-                                description: "X coordinate",
-                                control: "textfield",
-                                pattern: "^\\d+$",
-                                disabled: true,
-                                size: 2,
-                                key: "x"
-                            },
-                            {
-                                name: "Y",
-                                description: "Y coordinate",
-                                control: "textfield",
-                                pattern: "^\\d+$",
-                                size: 2,
-                                key: "y"
-                            },
-                            {
-                                name: "W",
-                                description: "Cell width",
-                                control: "textfield",
-                                pattern: "^\\d+$",
-                                size: 2,
-                                key: "w"
-                            },
-                            {
-                                name: "H",
-                                description: "Cell height",
-                                control: "textfield",
-                                pattern: "^\\d+$",
-                                size: 2,
-                                key: "h"
-                            }
-
-                        ]
-                    },
-                    {
-                        description: "Second section",
-                        items: [
-                            {
-                                control: "button",
-                                csslass: "icon-save",
-                                click: function () {
-                                    console.log("Save");
-                                }
-                            },
-                            {
-                                control: "button",
-                                csslass: "icon-x",
-                                description: "Button B",
-                                click: function () {
-                                    console.log("Cancel");
-                                }
-                            },
-                            {
-                                control: "button",
-                                csslass: "icon-trash",
-                                description: "Button C",
-                                disabled: true,
-                                click: function () {
-                                    console.log("Delete");
-                                }
-                            }
-                        ]
-                    },
-                    {
-                        items: [
-                            {
-                                control: "color",
-                                key: "color"
-                            }
-                        ]
-                    }
-                ]
-            };
-
-            $scope.form = {
-                name: "An example form.",
-                sections: [
-                    {
-                        name: "First section",
-                        rows: [
-                            {
-                                name: "Check me",
-                                control: "checkbox",
-                                key: "checkMe"
-                            },
-                            {
-                                name: "Enter your name",
-                                required: true,
-                                control: "textfield",
-                                key: "yourName"
-                            },
-                            {
-                                name: "Enter a number",
-                                control: "textfield",
-                                pattern: "^\\d+$",
-                                key: "aNumber"
-                            }
-                        ]
-                    },
-                    {
-                        name: "Second section",
-                        rows: [
-                            {
-                                name: "Pick a date",
-                                required: true,
-                                description: "Enter date in form YYYY-DDD",
-                                control: "datetime",
-                                key: "aDate"
-                            },
-                            {
-                                name: "Choose something",
-                                control: "select",
-                                options: [
-                                    {
-                                        name: "Hats",
-                                        value: "hats"
-                                    },
-                                    {
-                                        name: "Bats",
-                                        value: "bats"
-                                    },
-                                    {
-                                        name: "Cats",
-                                        value: "cats"
-                                    },
-                                    {
-                                        name: "Mats",
-                                        value: "mats"
-                                    }
-                                ],
-                                key: "aChoice"
-                            },
-                            {
-                                name: "Choose something",
-                                control: "select",
-                                required: true,
-                                options: [
-                                    {
-                                        name: "Hats",
-                                        value: "hats"
-                                    },
-                                    {
-                                        name: "Bats",
-                                        value: "bats"
-                                    },
-                                    {
-                                        name: "Cats",
-                                        value: "cats"
-                                    },
-                                    {
-                                        name: "Mats",
-                                        value: "mats"
-                                    }
-                                ],
-                                key: "aRequiredChoice"
-                            }
-                        ]
-                    }
-                ]
-            };
-        }
-
-        return ExampleFormController;
-    }
-);
diff --git a/example/generator/GeneratorMetadataProvider.js b/example/generator/GeneratorMetadataProvider.js
index 179019b0d91..51ec3cc88c8 100644
--- a/example/generator/GeneratorMetadataProvider.js
+++ b/example/generator/GeneratorMetadataProvider.js
@@ -1,133 +1,134 @@
-define([
-    'lodash'
-], function (
-    _
-) {
-
-    var METADATA_BY_TYPE = {
-        'generator': {
-            values: [
-                {
-                    key: "name",
-                    name: "Name",
-                    format: "string"
-                },
-                {
-                    key: "utc",
-                    name: "Time",
-                    format: "utc",
-                    hints: {
-                        domain: 1
-                    }
-                },
-                {
-                    key: "yesterday",
-                    name: "Yesterday",
-                    format: "utc",
-                    hints: {
-                        domain: 2
-                    }
-                },
-                // Need to enable "LocalTimeSystem" plugin to make use of this
-                // {
-                //     key: "local",
-                //     name: "Time",
-                //     format: "local-format",
-                //     source: "utc",
-                //     hints: {
-                //         domain: 3
-                //     }
-                // },
-                {
-                    key: "sin",
-                    name: "Sine",
-                    unit: "Hz",
-                    formatString: '%0.2f',
-                    hints: {
-                        range: 1
-                    }
-                },
-                {
-                    key: "cos",
-                    name: "Cosine",
-                    unit: "deg",
-                    formatString: '%0.2f',
-                    hints: {
-                        range: 2
-                    }
-                }
-            ]
-        },
-        'example.state-generator': {
-            values: [
-                {
-                    key: "name",
-                    name: "Name",
-                    format: "string"
-                },
-                {
-                    key: "utc",
-                    name: "Time",
-                    format: "utc",
-                    hints: {
-                        domain: 1
-                    }
-                },
-                {
-                    key: "local",
-                    name: "Time",
-                    format: "utc",
-                    source: "utc",
-                    hints: {
-                        domain: 2
-                    }
-                },
-                {
-                    key: "state",
-                    source: "value",
-                    name: "State",
-                    format: "enum",
-                    enumerations: [
-                        {
-                            value: 0,
-                            string: "OFF"
-                        },
-                        {
-                            value: 1,
-                            string: "ON"
-                        }
-                    ],
-                    hints: {
-                        range: 1
-                    }
-                },
-                {
-                    key: "value",
-                    name: "Value",
-                    hints: {
-                        range: 2
-                    }
-                }
-            ]
+const METADATA_BY_TYPE = {
+  generator: {
+    values: [
+      {
+        key: 'name',
+        name: 'Name',
+        format: 'string'
+      },
+      {
+        key: 'utc',
+        name: 'Time',
+        format: 'utc',
+        hints: {
+          domain: 1
         }
-    };
-
-    function GeneratorMetadataProvider() {
-
-    }
-
-    GeneratorMetadataProvider.prototype.supportsMetadata = function (domainObject) {
-        return Object.prototype.hasOwnProperty.call(METADATA_BY_TYPE, domainObject.type);
-    };
+      },
+      {
+        key: 'yesterday',
+        name: 'Yesterday',
+        format: 'utc',
+        hints: {
+          domain: 2
+        }
+      },
+      {
+        key: 'wavelengths',
+        name: 'Wavelength',
+        unit: 'nm',
+        format: 'string[]',
+        hints: {
+          range: 4
+        }
+      },
+      // Need to enable "LocalTimeSystem" plugin to make use of this
+      // {
+      //     key: "local",
+      //     name: "Time",
+      //     format: "local-format",
+      //     source: "utc",
+      //     hints: {
+      //         domain: 3
+      //     }
+      // },
+      {
+        key: 'sin',
+        name: 'Sine',
+        unit: 'Hz',
+        formatString: '%0.2f',
+        hints: {
+          range: 1
+        }
+      },
+      {
+        key: 'cos',
+        name: 'Cosine',
+        unit: 'deg',
+        formatString: '%0.2f',
+        hints: {
+          range: 2
+        }
+      },
+      {
+        key: 'intensities',
+        name: 'Intensities',
+        format: 'number[]',
+        hints: {
+          range: 3
+        }
+      }
+    ]
+  },
+  'example.state-generator': {
+    values: [
+      {
+        key: 'name',
+        name: 'Name',
+        format: 'string'
+      },
+      {
+        key: 'utc',
+        name: 'Time',
+        format: 'utc',
+        hints: {
+          domain: 1
+        }
+      },
+      {
+        key: 'local',
+        name: 'Time',
+        format: 'utc',
+        source: 'utc',
+        hints: {
+          domain: 2
+        }
+      },
+      {
+        key: 'state',
+        source: 'value',
+        name: 'State',
+        format: 'enum',
+        enumerations: [
+          {
+            value: 0,
+            string: 'OFF'
+          },
+          {
+            value: 1,
+            string: 'ON'
+          }
+        ],
+        hints: {
+          range: 1
+        }
+      },
+      {
+        key: 'value',
+        name: 'Value',
+        hints: {
+          range: 2
+        }
+      }
+    ]
+  }
+};
 
-    GeneratorMetadataProvider.prototype.getMetadata = function (domainObject) {
-        return Object.assign(
-            {},
-            domainObject.telemetry,
-            METADATA_BY_TYPE[domainObject.type]
-        );
-    };
+export default function GeneratorMetadataProvider() {}
 
-    return GeneratorMetadataProvider;
+GeneratorMetadataProvider.prototype.supportsMetadata = function (domainObject) {
+  return Object.prototype.hasOwnProperty.call(METADATA_BY_TYPE, domainObject.type);
+};
 
-});
+GeneratorMetadataProvider.prototype.getMetadata = function (domainObject) {
+  return Object.assign({}, domainObject.telemetry, METADATA_BY_TYPE[domainObject.type]);
+};
diff --git a/example/generator/GeneratorProvider.js b/example/generator/GeneratorProvider.js
index 14bd9031aa1..42289e8cc96 100644
--- a/example/generator/GeneratorProvider.js
+++ b/example/generator/GeneratorProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,81 +20,86 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    './WorkerInterface'
-], function (
-    WorkerInterface
-) {
-
-    var REQUEST_DEFAULTS = {
-        amplitude: 1,
-        period: 10,
-        offset: 0,
-        dataRateInHz: 1,
-        randomness: 0,
-        phase: 0
-    };
-
-    function GeneratorProvider() {
-        this.workerInterface = new WorkerInterface();
+import WorkerInterface from './WorkerInterface.js';
+
+const REQUEST_DEFAULTS = {
+  amplitude: 1,
+  period: 10,
+  offset: 0,
+  dataRateInHz: 1,
+  randomness: 0,
+  phase: 0,
+  loadDelay: 0,
+  infinityValues: false,
+  exceedFloat32: false
+};
+
+export default function GeneratorProvider(openmct, StalenessProvider) {
+  this.openmct = openmct;
+  this.workerInterface = new WorkerInterface(openmct, StalenessProvider);
+}
+
+GeneratorProvider.prototype.canProvideTelemetry = function (domainObject) {
+  return domainObject.type === 'generator';
+};
+
+GeneratorProvider.prototype.supportsRequest = GeneratorProvider.prototype.supportsSubscribe =
+  GeneratorProvider.prototype.canProvideTelemetry;
+
+GeneratorProvider.prototype.makeWorkerRequest = function (domainObject, request) {
+  var props = [
+    'amplitude',
+    'period',
+    'offset',
+    'dataRateInHz',
+    'randomness',
+    'phase',
+    'loadDelay',
+    'infinityValues',
+    'exceedFloat32'
+  ];
+
+  request = request || {};
+
+  var workerRequest = {};
+
+  props.forEach(function (prop) {
+    if (
+      domainObject.telemetry &&
+      Object.prototype.hasOwnProperty.call(domainObject.telemetry, prop)
+    ) {
+      workerRequest[prop] = domainObject.telemetry[prop];
     }
 
-    GeneratorProvider.prototype.canProvideTelemetry = function (domainObject) {
-        return domainObject.type === 'generator';
-    };
-
-    GeneratorProvider.prototype.supportsRequest =
-        GeneratorProvider.prototype.supportsSubscribe =
-            GeneratorProvider.prototype.canProvideTelemetry;
-
-    GeneratorProvider.prototype.makeWorkerRequest = function (domainObject, request) {
-        var props = [
-            'amplitude',
-            'period',
-            'offset',
-            'dataRateInHz',
-            'phase',
-            'randomness'
-        ];
-
-        request = request || {};
-
-        var workerRequest = {};
-
-        props.forEach(function (prop) {
-            if (domainObject.telemetry && Object.prototype.hasOwnProperty.call(domainObject.telemetry, prop)) {
-                workerRequest[prop] = domainObject.telemetry[prop];
-            }
-
-            if (request && Object.prototype.hasOwnProperty.call(request, prop)) {
-                workerRequest[prop] = request[prop];
-            }
-
-            if (!Object.prototype.hasOwnProperty.call(workerRequest, prop)) {
-                workerRequest[prop] = REQUEST_DEFAULTS[prop];
-            }
+    if (request && Object.prototype.hasOwnProperty.call(request, prop)) {
+      workerRequest[prop] = request[prop];
+    }
 
-            workerRequest[prop] = Number(workerRequest[prop]);
-        });
+    if (!Object.prototype.hasOwnProperty.call(workerRequest, prop)) {
+      workerRequest[prop] = REQUEST_DEFAULTS[prop];
+    }
 
-        workerRequest.name = domainObject.name;
+    workerRequest[prop] = Number(workerRequest[prop]);
+  });
 
-        return workerRequest;
-    };
+  workerRequest.id = this.openmct.objects.makeKeyString(domainObject.identifier);
+  workerRequest.name = domainObject.name;
 
-    GeneratorProvider.prototype.request = function (domainObject, request) {
-        var workerRequest = this.makeWorkerRequest(domainObject, request);
-        workerRequest.start = request.start;
-        workerRequest.end = request.end;
+  return workerRequest;
+};
 
-        return this.workerInterface.request(workerRequest);
-    };
+GeneratorProvider.prototype.request = function (domainObject, request) {
+  var workerRequest = this.makeWorkerRequest(domainObject, request);
+  workerRequest.start = request.start;
+  workerRequest.end = request.end;
+  workerRequest.size = request.size;
+  workerRequest.strategy = request.strategy;
 
-    GeneratorProvider.prototype.subscribe = function (domainObject, callback) {
-        var workerRequest = this.makeWorkerRequest(domainObject, {});
+  return this.workerInterface.request(workerRequest);
+};
 
-        return this.workerInterface.subscribe(workerRequest, callback);
-    };
+GeneratorProvider.prototype.subscribe = function (domainObject, callback) {
+  var workerRequest = this.makeWorkerRequest(domainObject, {});
 
-    return GeneratorProvider;
-});
+  return this.workerInterface.subscribe(workerRequest, callback);
+};
diff --git a/example/generator/SinewaveLimitProvider.js b/example/generator/SinewaveLimitProvider.js
index e714f3f0d47..961955ee2db 100644
--- a/example/generator/SinewaveLimitProvider.js
+++ b/example/generator/SinewaveLimitProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,155 +20,143 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-
-], function (
-
-) {
-
-    var PURPLE = {
-            sin: 2.2,
-            cos: 2.2
-        },
-        RED = {
-            sin: 0.9,
-            cos: 0.9
-        },
-        ORANGE = {
-            sin: 0.7,
-            cos: 0.7
-        },
-        YELLOW = {
-            sin: 0.5,
-            cos: 0.5
-        },
-        CYAN = {
-            sin: 0.45,
-            cos: 0.45
-        },
-        LIMITS = {
-            rh: {
-                cssClass: "is-limit--upr is-limit--red",
-                low: RED,
-                high: Number.POSITIVE_INFINITY,
-                name: "Red High"
-            },
-            rl: {
-                cssClass: "is-limit--lwr is-limit--red",
-                high: -RED,
-                low: Number.NEGATIVE_INFINITY,
-                name: "Red Low"
-            },
-            yh: {
-                cssClass: "is-limit--upr is-limit--yellow",
-                low: YELLOW,
-                high: RED,
-                name: "Yellow High"
-            },
-            yl: {
-                cssClass: "is-limit--lwr is-limit--yellow",
-                low: -RED,
-                high: -YELLOW,
-                name: "Yellow Low"
-            }
-        };
-
-    function SinewaveLimitProvider() {
-
+var PURPLE = {
+    sin: 2.2,
+    cos: 2.2
+  },
+  RED = {
+    sin: 0.9,
+    cos: 0.9
+  },
+  ORANGE = {
+    sin: 0.7,
+    cos: 0.7
+  },
+  YELLOW = {
+    sin: 0.5,
+    cos: 0.5
+  },
+  CYAN = {
+    sin: 0.45,
+    cos: 0.45
+  },
+  LIMITS = {
+    rh: {
+      cssClass: 'is-limit--upr is-limit--red',
+      low: RED,
+      high: Number.POSITIVE_INFINITY,
+      name: 'Red High'
+    },
+    rl: {
+      cssClass: 'is-limit--lwr is-limit--red',
+      high: -RED,
+      low: Number.NEGATIVE_INFINITY,
+      name: 'Red Low'
+    },
+    yh: {
+      cssClass: 'is-limit--upr is-limit--yellow',
+      low: YELLOW,
+      high: RED,
+      name: 'Yellow High'
+    },
+    yl: {
+      cssClass: 'is-limit--lwr is-limit--yellow',
+      low: -RED,
+      high: -YELLOW,
+      name: 'Yellow Low'
     }
+  };
 
-    SinewaveLimitProvider.prototype.supportsLimits = function (domainObject) {
-        return domainObject.type === 'generator';
-    };
-
-    SinewaveLimitProvider.prototype.getLimitEvaluator = function (domainObject) {
-        return {
-            evaluate: function (datum, valueMetadata) {
-                var range = valueMetadata && valueMetadata.key;
+export default function SinewaveLimitProvider() {}
 
-                if (datum[range] > RED[range]) {
-                    return LIMITS.rh;
-                }
+SinewaveLimitProvider.prototype.supportsLimits = function (domainObject) {
+  return domainObject.type === 'generator';
+};
 
-                if (datum[range] < -RED[range]) {
-                    return LIMITS.rl;
-                }
+SinewaveLimitProvider.prototype.getLimitEvaluator = function (domainObject) {
+  return {
+    evaluate: function (datum, valueMetadata) {
+      var range = valueMetadata && valueMetadata.key;
 
-                if (datum[range] > YELLOW[range]) {
-                    return LIMITS.yh;
-                }
+      if (datum[range] > RED[range]) {
+        return LIMITS.rh;
+      }
 
-                if (datum[range] < -YELLOW[range]) {
-                    return LIMITS.yl;
-                }
-            }
-        };
-    };
+      if (datum[range] < -RED[range]) {
+        return LIMITS.rl;
+      }
 
-    SinewaveLimitProvider.prototype.getLimits = function (domainObject) {
+      if (datum[range] > YELLOW[range]) {
+        return LIMITS.yh;
+      }
 
-        return {
-            limits: function () {
-                return Promise.resolve({
-                    WATCH: {
-                        low: {
-                            color: "cyan",
-                            sin: -CYAN.sin,
-                            cos: -CYAN.cos
-                        },
-                        high: {
-                            color: "cyan",
-                            ...CYAN
-                        }
-                    },
-                    WARNING: {
-                        low: {
-                            color: "yellow",
-                            sin: -YELLOW.sin,
-                            cos: -YELLOW.cos
-                        },
-                        high: {
-                            color: "yellow",
-                            ...YELLOW
-                        }
-                    },
-                    DISTRESS: {
-                        low: {
-                            color: "orange",
-                            sin: -ORANGE.sin,
-                            cos: -ORANGE.cos
-                        },
-                        high: {
-                            color: "orange",
-                            ...ORANGE
-                        }
-                    },
-                    CRITICAL: {
-                        low: {
-                            color: "red",
-                            sin: -RED.sin,
-                            cos: -RED.cos
-                        },
-                        high: {
-                            color: "red",
-                            ...RED
-                        }
-                    },
-                    SEVERE: {
-                        low: {
-                            color: "purple",
-                            sin: -PURPLE.sin,
-                            cos: -PURPLE.cos
-                        },
-                        high: {
-                            color: "purple",
-                            ...PURPLE
-                        }
-                    }
-                });
-            }
-        };
-    };
+      if (datum[range] < -YELLOW[range]) {
+        return LIMITS.yl;
+      }
+    }
+  };
+};
 
-    return SinewaveLimitProvider;
-});
+SinewaveLimitProvider.prototype.getLimits = function (domainObject) {
+  return {
+    limits: function () {
+      return Promise.resolve({
+        WATCH: {
+          low: {
+            color: 'cyan',
+            sin: -CYAN.sin,
+            cos: -CYAN.cos
+          },
+          high: {
+            color: 'cyan',
+            ...CYAN
+          }
+        },
+        WARNING: {
+          low: {
+            color: 'yellow',
+            sin: -YELLOW.sin,
+            cos: -YELLOW.cos
+          },
+          high: {
+            color: 'yellow',
+            ...YELLOW
+          }
+        },
+        DISTRESS: {
+          low: {
+            color: 'orange',
+            sin: -ORANGE.sin,
+            cos: -ORANGE.cos
+          },
+          high: {
+            color: 'orange',
+            ...ORANGE
+          }
+        },
+        CRITICAL: {
+          low: {
+            color: 'red',
+            sin: -RED.sin,
+            cos: -RED.cos
+          },
+          high: {
+            color: 'red',
+            ...RED
+          }
+        },
+        SEVERE: {
+          low: {
+            color: 'purple',
+            sin: -PURPLE.sin,
+            cos: -PURPLE.cos
+          },
+          high: {
+            color: 'purple',
+            ...PURPLE
+          }
+        }
+      });
+    }
+  };
+};
diff --git a/example/generator/SinewaveStalenessProvider.js b/example/generator/SinewaveStalenessProvider.js
new file mode 100644
index 00000000000..27f6ce96d4b
--- /dev/null
+++ b/example/generator/SinewaveStalenessProvider.js
@@ -0,0 +1,157 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import EventEmitter from 'EventEmitter';
+
+export default class SinewaveLimitProvider extends EventEmitter {
+  #openmct;
+  #observingStaleness;
+  #watchingTheClock;
+  #isRealTime;
+
+  constructor(openmct) {
+    super();
+
+    this.#openmct = openmct;
+    this.#observingStaleness = {};
+    this.#watchingTheClock = false;
+    this.#isRealTime = undefined;
+  }
+
+  supportsStaleness(domainObject) {
+    return domainObject.type === 'generator';
+  }
+
+  isStale(domainObject, options) {
+    if (!this.#providingStaleness(domainObject)) {
+      return;
+    }
+
+    const id = this.#getObjectKeyString(domainObject);
+
+    if (!this.#observerExists(id)) {
+      this.#createObserver(id);
+    }
+
+    return Promise.resolve({
+      isStale: this.#observingStaleness[id].isStale,
+      utc: Date.now()
+    });
+  }
+
+  subscribeToStaleness(domainObject, callback) {
+    const id = this.#getObjectKeyString(domainObject);
+
+    if (this.#isRealTime === undefined) {
+      this.#updateRealTime(this.#openmct.time.getMode());
+    }
+
+    this.#handleClockUpdate();
+
+    if (this.#observerExists(id)) {
+      this.#addCallbackToObserver(id, callback);
+    } else {
+      this.#createObserver(id, callback);
+    }
+
+    const intervalId = setInterval(() => {
+      if (this.#providingStaleness(domainObject)) {
+        this.#updateStaleness(id, !this.#observingStaleness[id].isStale);
+      }
+    }, 10000);
+
+    return () => {
+      clearInterval(intervalId);
+      this.#updateStaleness(id, false);
+      this.#handleClockUpdate();
+      this.#destroyObserver(id);
+    };
+  }
+
+  #handleClockUpdate() {
+    let observers = Object.values(this.#observingStaleness).length > 0;
+
+    if (observers && !this.#watchingTheClock) {
+      this.#watchingTheClock = true;
+      this.#openmct.time.on('modeChanged', this.#updateRealTime, this);
+    } else if (!observers && this.#watchingTheClock) {
+      this.#watchingTheClock = false;
+      this.#openmct.time.off('modeChanged', this.#updateRealTime, this);
+    }
+  }
+
+  #updateRealTime(mode) {
+    this.#isRealTime = mode !== 'fixed';
+
+    if (!this.#isRealTime) {
+      Object.keys(this.#observingStaleness).forEach((id) => {
+        this.#updateStaleness(id, false);
+      });
+    }
+  }
+
+  #updateStaleness(id, isStale) {
+    this.#observingStaleness[id].isStale = isStale;
+    this.#observingStaleness[id].utc = Date.now();
+    this.#observingStaleness[id].callback({
+      isStale: this.#observingStaleness[id].isStale,
+      utc: this.#observingStaleness[id].utc
+    });
+    this.emit('stalenessEvent', {
+      id,
+      isStale: this.#observingStaleness[id].isStale
+    });
+  }
+
+  #createObserver(id, callback) {
+    this.#observingStaleness[id] = {
+      isStale: false,
+      utc: Date.now()
+    };
+
+    if (typeof callback === 'function') {
+      this.#addCallbackToObserver(id, callback);
+    }
+  }
+
+  #destroyObserver(id) {
+    if (this.#observingStaleness[id]) {
+      delete this.#observingStaleness[id];
+    }
+  }
+
+  #providingStaleness(domainObject) {
+    return domainObject.telemetry?.staleness === true && this.#isRealTime;
+  }
+
+  #getObjectKeyString(object) {
+    return this.#openmct.objects.makeKeyString(object.identifier);
+  }
+
+  #addCallbackToObserver(id, callback) {
+    this.#observingStaleness[id].callback = callback;
+  }
+
+  #observerExists(id) {
+    return this.#observingStaleness?.[id];
+  }
+}
diff --git a/example/generator/StateGeneratorProvider.js b/example/generator/StateGeneratorProvider.js
index 09b30dcb69b..5da3b650c58 100644
--- a/example/generator/StateGeneratorProvider.js
+++ b/example/generator/StateGeneratorProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,64 +20,52 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-
-], function (
-
-) {
-
-    function StateGeneratorProvider() {
-
-    }
-
-    function pointForTimestamp(timestamp, duration, name) {
-        return {
-            name: name,
-            utc: Math.floor(timestamp / duration) * duration,
-            value: Math.floor(timestamp / duration) % 2
-        };
-    }
-
-    StateGeneratorProvider.prototype.supportsSubscribe = function (domainObject) {
-        return domainObject.type === 'example.state-generator';
-    };
-
-    StateGeneratorProvider.prototype.subscribe = function (domainObject, callback) {
-        var duration = domainObject.telemetry.duration * 1000;
-
-        var interval = setInterval(function () {
-            var now = Date.now();
-            var datum = pointForTimestamp(now, duration, domainObject.name);
-            datum.value = String(datum.value);
-            callback(datum);
-        }, duration);
-
-        return function () {
-            clearInterval(interval);
-        };
-    };
-
-    StateGeneratorProvider.prototype.supportsRequest = function (domainObject, options) {
-        return domainObject.type === 'example.state-generator';
-    };
-
-    StateGeneratorProvider.prototype.request = function (domainObject, options) {
-        var start = options.start;
-        var end = options.end;
-        var duration = domainObject.telemetry.duration * 1000;
-        if (options.strategy === 'latest' || options.size === 1) {
-            start = end;
-        }
-
-        var data = [];
-        while (start <= end && data.length < 5000) {
-            data.push(pointForTimestamp(start, duration, domainObject.name));
-            start += duration;
-        }
-
-        return Promise.resolve(data);
-    };
-
-    return StateGeneratorProvider;
-
-});
+export default function StateGeneratorProvider() {}
+
+function pointForTimestamp(timestamp, duration, name) {
+  return {
+    name: name,
+    utc: Math.floor(timestamp / duration) * duration,
+    value: Math.floor(timestamp / duration) % 2
+  };
+}
+
+StateGeneratorProvider.prototype.supportsSubscribe = function (domainObject) {
+  return domainObject.type === 'example.state-generator';
+};
+
+StateGeneratorProvider.prototype.subscribe = function (domainObject, callback) {
+  var duration = domainObject.telemetry.duration * 1000;
+
+  var interval = setInterval(function () {
+    var now = Date.now();
+    var datum = pointForTimestamp(now, duration, domainObject.name);
+    datum.value = String(datum.value);
+    callback(datum);
+  }, duration);
+
+  return function () {
+    clearInterval(interval);
+  };
+};
+
+StateGeneratorProvider.prototype.supportsRequest = function (domainObject, options) {
+  return domainObject.type === 'example.state-generator';
+};
+
+StateGeneratorProvider.prototype.request = function (domainObject, options) {
+  var start = options.start;
+  var end = Math.min(Date.now(), options.end); // no future values
+  var duration = domainObject.telemetry.duration * 1000;
+  if (options.strategy === 'latest' || options.size === 1) {
+    start = end;
+  }
+
+  var data = [];
+  while (start <= end && data.length < 5000) {
+    data.push(pointForTimestamp(start, duration, domainObject.name));
+    start += duration;
+  }
+
+  return Promise.resolve(data);
+};
diff --git a/example/generator/WorkerInterface.js b/example/generator/WorkerInterface.js
index 372bd3bbc70..c5b8e85d616 100644
--- a/example/generator/WorkerInterface.js
+++ b/example/generator/WorkerInterface.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,89 +20,86 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    'raw-loader!./generatorWorker.js',
-    'uuid'
-], function (
-    workerText,
-    uuid
-) {
-
-    var workerBlob = new Blob(
-        [workerText],
-        {type: 'application/javascript'}
-    );
-    var workerUrl = URL.createObjectURL(workerBlob);
-
-    function WorkerInterface() {
-        this.worker = new Worker(workerUrl);
-        this.worker.onmessage = this.onMessage.bind(this);
-        this.callbacks = {};
+import { v4 as uuid } from 'uuid';
+
+export default function WorkerInterface(openmct, StalenessProvider) {
+  // eslint-disable-next-line no-undef
+  const workerUrl = `${openmct.getAssetPath()}${__OPENMCT_ROOT_RELATIVE__}generatorWorker.js`;
+  this.StalenessProvider = StalenessProvider;
+  this.worker = new Worker(workerUrl);
+  this.worker.onmessage = this.onMessage.bind(this);
+  this.callbacks = {};
+  this.staleTelemetryIds = {};
+
+  this.watchStaleness();
+}
+
+WorkerInterface.prototype.watchStaleness = function () {
+  this.StalenessProvider.on('stalenessEvent', ({ id, isStale }) => {
+    this.staleTelemetryIds[id] = isStale;
+  });
+};
+
+WorkerInterface.prototype.onMessage = function (message) {
+  message = message.data;
+  var callback = this.callbacks[message.id];
+  if (callback) {
+    callback(message);
+  }
+};
+
+WorkerInterface.prototype.dispatch = function (request, data, callback) {
+  var message = {
+    request: request,
+    data: data,
+    id: uuid()
+  };
+
+  if (callback) {
+    this.callbacks[message.id] = callback;
+  }
+
+  this.worker.postMessage(message);
+
+  return message.id;
+};
+
+WorkerInterface.prototype.request = function (request) {
+  var deferred = {};
+  var promise = new Promise(function (resolve, reject) {
+    deferred.resolve = resolve;
+    deferred.reject = reject;
+  });
+  var messageId;
+
+  let self = this;
+  function callback(message) {
+    if (message.error) {
+      deferred.reject(message.error);
+    } else {
+      deferred.resolve(message.data);
     }
 
-    WorkerInterface.prototype.onMessage = function (message) {
-        message = message.data;
-        var callback = this.callbacks[message.id];
-        if (callback) {
-            callback(message);
-        }
-    };
-
-    WorkerInterface.prototype.dispatch = function (request, data, callback) {
-        var message = {
-            request: request,
-            data: data,
-            id: uuid()
-        };
-
-        if (callback) {
-            this.callbacks[message.id] = callback;
-        }
-
-        this.worker.postMessage(message);
-
-        return message.id;
-    };
-
-    WorkerInterface.prototype.request = function (request) {
-        var deferred = {};
-        var promise = new Promise(function (resolve, reject) {
-            deferred.resolve = resolve;
-            deferred.reject = reject;
-        });
-        var messageId;
-
-        let self = this;
-        function callback(message) {
-            if (message.error) {
-                deferred.reject(message.error);
-            } else {
-                deferred.resolve(message.data);
-            }
-
-            delete self.callbacks[messageId];
-
-        }
-
-        messageId = this.dispatch('request', request, callback.bind(this));
-
-        return promise;
-    };
-
-    WorkerInterface.prototype.subscribe = function (request, cb) {
-        function callback(message) {
-            cb(message.data);
-        }
-
-        var messageId = this.dispatch('subscribe', request, callback);
-
-        return function () {
-            this.dispatch('unsubscribe', {
-                id: messageId
-            });
-            delete this.callbacks[messageId];
-        }.bind(this);
-    };
-
-    return WorkerInterface;
-});
+    delete self.callbacks[messageId];
+  }
+
+  messageId = this.dispatch('request', request, callback.bind(this));
+
+  return promise;
+};
+
+WorkerInterface.prototype.subscribe = function (request, cb) {
+  const { id, loadDelay } = request;
+  const messageId = this.dispatch('subscribe', request, (message) => {
+    if (!this.staleTelemetryIds[id]) {
+      setTimeout(() => cb(message.data), Math.max(loadDelay, 0));
+    }
+  });
+
+  return function () {
+    this.dispatch('unsubscribe', {
+      id: messageId
+    });
+    delete this.callbacks[messageId];
+  }.bind(this);
+};
diff --git a/example/generator/generatorWorker.js b/example/generator/generatorWorker.js
index d0200650cc6..d103a25895c 100644
--- a/example/generator/generatorWorker.js
+++ b/example/generator/generatorWorker.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,137 +21,309 @@
  *****************************************************************************/
 
 (function () {
+  var FIFTEEN_MINUTES = 15 * 60 * 1000;
 
-    var FIFTEEN_MINUTES = 15 * 60 * 1000;
+  var handlers = {
+    subscribe: onSubscribe,
+    unsubscribe: onUnsubscribe,
+    request: onRequest
+  };
 
-    var handlers = {
-        subscribe: onSubscribe,
-        unsubscribe: onUnsubscribe,
-        request: onRequest
-    };
+  var subscriptions = {};
+
+  function workSubscriptions(timestamp) {
+    var now = Date.now();
+    var nextWork = Math.min.apply(
+      Math,
+      Object.values(subscriptions).map(function (subscription) {
+        return subscription(now);
+      })
+    );
+    var wait = nextWork - now;
+    if (wait < 0) {
+      wait = 0;
+    }
+
+    if (Number.isFinite(wait)) {
+      setTimeout(workSubscriptions, wait);
+    }
+  }
 
-    var subscriptions = {};
+  function onSubscribe(message) {
+    var data = message.data;
 
-    function workSubscriptions(timestamp) {
-        var now = Date.now();
-        var nextWork = Math.min.apply(Math, Object.values(subscriptions).map(function (subscription) {
-            return subscription(now);
-        }));
-        var wait = nextWork - now;
-        if (wait < 0) {
-            wait = 0;
+    // Keep
+    var start = Date.now();
+    var step = 1000 / data.dataRateInHz;
+    var nextStep = start - (start % step) + step;
+    let work;
+    if (data.spectra) {
+      work = function (now) {
+        while (nextStep < now) {
+          const messageCopy = Object.create(message);
+          message.data.start = nextStep - 60 * 1000;
+          message.data.end = nextStep;
+          onRequest(messageCopy);
+          nextStep += step;
         }
 
-        if (Number.isFinite(wait)) {
-            setTimeout(workSubscriptions, wait);
+        return nextStep;
+      };
+    } else {
+      work = function (now) {
+        while (nextStep < now) {
+          self.postMessage({
+            id: message.id,
+            data: {
+              name: data.name,
+              utc: nextStep,
+              yesterday: nextStep - 60 * 60 * 24 * 1000,
+              sin: sin(
+                nextStep,
+                data.period,
+                data.amplitude,
+                data.offset,
+                data.phase,
+                data.randomness,
+                data.infinityValues,
+                data.exceedFloat32
+              ),
+              wavelengths: wavelengths(),
+              intensities: intensities(),
+              cos: cos(
+                nextStep,
+                data.period,
+                data.amplitude,
+                data.offset,
+                data.phase,
+                data.randomness,
+                data.infinityValues,
+                data.exceedFloat32
+              )
+            }
+          });
+          nextStep += step;
         }
+
+        return nextStep;
+      };
     }
 
-    function onSubscribe(message) {
-        var data = message.data;
-
-        // Keep
-        var start = Date.now();
-        var step = 1000 / data.dataRateInHz;
-        var nextStep = start - (start % step) + step;
-
-        function work(now) {
-            while (nextStep < now) {
-                self.postMessage({
-                    id: message.id,
-                    data: {
-                        name: data.name,
-                        utc: nextStep,
-                        yesterday: nextStep - 60 * 60 * 24 * 1000,
-                        sin: sin(nextStep, data.period, data.amplitude, data.offset, data.phase, data.randomness),
-                        cos: cos(nextStep, data.period, data.amplitude, data.offset, data.phase, data.randomness)
-                    }
-                });
-                nextStep += step;
-            }
+    subscriptions[message.id] = work;
+    workSubscriptions();
+  }
 
-            return nextStep;
-        }
+  function onUnsubscribe(message) {
+    delete subscriptions[message.data.id];
+  }
 
-        subscriptions[message.id] = work;
-        workSubscriptions();
+  function onRequest(message) {
+    var request = message.data;
+    if (request.end === undefined) {
+      request.end = Date.now();
     }
 
-    function onUnsubscribe(message) {
-        delete subscriptions[message.data.id];
+    if (request.start === undefined) {
+      request.start = request.end - FIFTEEN_MINUTES;
     }
 
-    function onRequest(message) {
-        var request = message.data;
-        if (request.end === undefined) {
-            request.end = Date.now();
-        }
+    var now = Date.now();
+    var start = request.start;
+    var end = request.end > now ? now : request.end;
+    var period = request.period;
+    var dataRateInHz = request.dataRateInHz;
+    var loadDelay = Math.max(request.loadDelay, 0);
+    var size = request.size;
+    var duration = end - start;
+    var step = 1000 / dataRateInHz;
+    var maxPoints = Math.floor(duration / step);
+    var nextStep = start - (start % step) + step;
 
-        if (request.start === undefined) {
-            request.start = request.end - FIFTEEN_MINUTES;
-        }
+    var data = [];
 
-        var now = Date.now();
-        var start = request.start;
-        var end = request.end > now ? now : request.end;
-        var amplitude = request.amplitude;
-        var period = request.period;
-        var offset = request.offset;
-        var dataRateInHz = request.dataRateInHz;
-        var phase = request.phase;
-        var randomness = request.randomness;
-
-        var step = 1000 / dataRateInHz;
-        var nextStep = start - (start % step) + step;
-
-        var data = [];
-
-        for (; nextStep < end && data.length < 5000; nextStep += step) {
-            data.push({
-                utc: nextStep,
-                yesterday: nextStep - 60 * 60 * 24 * 1000,
-                sin: sin(nextStep, period, amplitude, offset, phase, randomness),
-                cos: cos(nextStep, period, amplitude, offset, phase, randomness)
-            });
-        }
+    if (request.strategy === 'minmax' && size) {
+      // Calculate the number of cycles to include based on size (2 points per cycle)
+      var totalCycles = Math.min(Math.floor(size / 2), Math.floor(duration / period));
 
-        self.postMessage({
-            id: message.id,
-            data: data
-        });
-    }
+      for (let cycle = 0; cycle < totalCycles; cycle++) {
+        // Distribute cycles evenly across the time range
+        let cycleStart = start + (duration / totalCycles) * cycle;
+        let minPointTime = cycleStart; // Assuming min at the start of the cycle
+        let maxPointTime = cycleStart + period / 2; // Assuming max at the halfway of the cycle
 
-    function cos(timestamp, period, amplitude, offset, phase, randomness) {
-        return amplitude
-            * Math.cos(phase + (timestamp / period / 1000 * Math.PI * 2)) + (amplitude * Math.random() * randomness) + offset;
+        data.push(createDataPoint(minPointTime, request), createDataPoint(maxPointTime, request));
+      }
+    } else {
+      for (let i = 0; i < maxPoints && nextStep < end; i++, nextStep += step) {
+        data.push(createDataPoint(nextStep, request));
+      }
     }
 
-    function sin(timestamp, period, amplitude, offset, phase, randomness) {
-        return amplitude
-            * Math.sin(phase + (timestamp / period / 1000 * Math.PI * 2)) + (amplitude * Math.random() * randomness) + offset;
+    if (request.strategy !== 'minmax' && size) {
+      data = data.slice(-size);
     }
 
-    function sendError(error, message) {
-        self.postMessage({
-            error: error.name + ': ' + error.message,
-            message: message,
-            id: message.id
-        });
+    if (loadDelay === 0) {
+      postOnRequest(message, request, data);
+    } else {
+      setTimeout(() => postOnRequest(message, request, data), loadDelay);
     }
+  }
 
-    self.onmessage = function handleMessage(event) {
-        var message = event.data;
-        var handler = handlers[message.request];
-
-        if (!handler) {
-            sendError(new Error('unknown message type'), message);
-        } else {
-            try {
-                handler(message);
-            } catch (e) {
-                sendError(e, message);
-            }
-        }
+  function createDataPoint(time, request) {
+    return {
+      utc: time,
+      yesterday: time - 60 * 60 * 24 * 1000,
+      sin: sin(
+        time,
+        request.period,
+        request.amplitude,
+        request.offset,
+        request.phase,
+        request.randomness,
+        request.infinityValues,
+        request.exceedFloat32
+      ),
+      wavelengths: wavelengths(),
+      intensities: intensities(),
+      cos: cos(
+        time,
+        request.period,
+        request.amplitude,
+        request.offset,
+        request.phase,
+        request.randomness,
+        request.infinityValues,
+        request.exceedFloat32
+      )
     };
+  }
+
+  function postOnRequest(message, request, data) {
+    self.postMessage({
+      id: message.id,
+      data: request.spectra
+        ? {
+            wavelength: data.map((item) => {
+              return item.wavelength;
+            }),
+            cos: data.map((item) => {
+              return item.cos;
+            })
+          }
+        : data
+    });
+  }
 
-}());
+  function cos(
+    timestamp,
+    period,
+    amplitude,
+    offset,
+    phase,
+    randomness,
+    infinityValues,
+    exceedFloat32
+  ) {
+    if (infinityValues && exceedFloat32) {
+      if (Math.random() > 0.5) {
+        return Number.POSITIVE_INFINITY;
+      } else if (Math.random() < 0.01) {
+        return getRandomFloat32OverflowValue();
+      }
+    } else if (infinityValues && Math.random() > 0.5) {
+      return Number.POSITIVE_INFINITY;
+    } else if (exceedFloat32 && Math.random() < 0.01) {
+      return getRandomFloat32OverflowValue();
+    }
+
+    return (
+      amplitude * Math.cos(phase + (timestamp / period / 1000) * Math.PI * 2) +
+      amplitude * Math.random() * randomness +
+      offset
+    );
+  }
+
+  function sin(
+    timestamp,
+    period,
+    amplitude,
+    offset,
+    phase,
+    randomness,
+    infinityValues,
+    exceedFloat32
+  ) {
+    if (infinityValues && exceedFloat32) {
+      if (Math.random() > 0.5) {
+        return Number.POSITIVE_INFINITY;
+      } else if (Math.random() < 0.01) {
+        return getRandomFloat32OverflowValue();
+      }
+    } else if (infinityValues && Math.random() > 0.5) {
+      return Number.POSITIVE_INFINITY;
+    } else if (exceedFloat32 && Math.random() < 0.01) {
+      return getRandomFloat32OverflowValue();
+    }
+
+    return (
+      amplitude * Math.sin(phase + (timestamp / period / 1000) * Math.PI * 2) +
+      amplitude * Math.random() * randomness +
+      offset
+    );
+  }
+
+  // Values exceeding float32 range (Positive: 3.4+38, Negative: -3.4+38)
+  function getRandomFloat32OverflowValue() {
+    const sign = Math.random() > 0.5 ? 1 : -1;
+
+    return sign * 3.4e39;
+  }
+
+  function wavelengths() {
+    let values = [];
+    while (values.length < 5) {
+      const randomValue = Math.random() * 100;
+      if (!values.includes(randomValue)) {
+        values.push(String(randomValue));
+      }
+    }
+
+    return values;
+  }
+
+  function intensities() {
+    let values = [];
+    while (values.length < 5) {
+      const randomValue = Math.random() * 10;
+      if (!values.includes(randomValue)) {
+        values.push(String(randomValue));
+      }
+    }
+
+    return values;
+  }
+
+  function sendError(error, message) {
+    self.postMessage({
+      error: error.name + ': ' + error.message,
+      message: message,
+      id: message.id
+    });
+  }
+
+  self.onmessage = function handleMessage(event) {
+    var message = event.data;
+    var handler = handlers[message.request];
+
+    if (!handler) {
+      sendError(new Error('unknown message type'), message);
+    } else {
+      try {
+        handler(message);
+      } catch (e) {
+        sendError(e, message);
+      }
+    }
+  };
+})();
diff --git a/example/generator/plugin.js b/example/generator/plugin.js
index a7a027e32e0..175bda41500 100644
--- a/example/generator/plugin.js
+++ b/example/generator/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,135 +20,142 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    "./GeneratorProvider",
-    "./SinewaveLimitProvider",
-    "./StateGeneratorProvider",
-    "./GeneratorMetadataProvider"
-], function (
-    GeneratorProvider,
-    SinewaveLimitProvider,
-    StateGeneratorProvider,
-    GeneratorMetadataProvider
-) {
+import GeneratorMetadataProvider from './GeneratorMetadataProvider.js';
+import GeneratorProvider from './GeneratorProvider.js';
+import SinewaveLimitProvider from './SinewaveLimitProvider.js';
+import SinewaveStalenessProvider from './SinewaveStalenessProvider.js';
+import StateGeneratorProvider from './StateGeneratorProvider.js';
 
-    return function (openmct) {
+export default function (openmct) {
+  openmct.types.addType('example.state-generator', {
+    name: 'State Generator',
+    description:
+      'For development use. Generates example enumerated telemetry by cycling through a given set of states.',
+    cssClass: 'icon-generator-telemetry',
+    creatable: true,
+    form: [
+      {
+        name: 'State Duration (seconds)',
+        control: 'numberfield',
+        cssClass: 'l-input-sm l-numeric',
+        key: 'duration',
+        required: true,
+        property: ['telemetry', 'duration']
+      }
+    ],
+    initialize: function (object) {
+      object.telemetry = {
+        duration: 5
+      };
+    }
+  });
 
-        openmct.types.addType("example.state-generator", {
-            name: "State Generator",
-            description: "For development use.  Generates test enumerated telemetry by cycling through a given set of states",
-            cssClass: "icon-generator-telemetry",
-            creatable: true,
-            form: [
-                {
-                    name: "State Duration (seconds)",
-                    control: "numberfield",
-                    cssClass: "l-input-sm l-numeric",
-                    key: "duration",
-                    required: true,
-                    property: [
-                        "telemetry",
-                        "duration"
-                    ]
-                }
-            ],
-            initialize: function (object) {
-                object.telemetry = {
-                    duration: 5
-                };
-            }
-        });
+  openmct.telemetry.addProvider(new StateGeneratorProvider());
 
-        openmct.telemetry.addProvider(new StateGeneratorProvider());
+  openmct.types.addType('generator', {
+    name: 'Sine Wave Generator',
+    description:
+      'For development use. Generates example streaming telemetry data using a simple sine wave algorithm.',
+    cssClass: 'icon-generator-telemetry',
+    creatable: true,
+    form: [
+      {
+        name: 'Period',
+        control: 'numberfield',
+        cssClass: 'l-input-sm l-numeric',
+        key: 'period',
+        required: true,
+        property: ['telemetry', 'period']
+      },
+      {
+        name: 'Amplitude',
+        control: 'numberfield',
+        cssClass: 'l-numeric',
+        key: 'amplitude',
+        required: true,
+        property: ['telemetry', 'amplitude']
+      },
+      {
+        name: 'Offset',
+        control: 'numberfield',
+        cssClass: 'l-numeric',
+        key: 'offset',
+        required: true,
+        property: ['telemetry', 'offset']
+      },
+      {
+        name: 'Data Rate (hz)',
+        control: 'numberfield',
+        cssClass: 'l-input-sm l-numeric',
+        key: 'dataRateInHz',
+        required: true,
+        property: ['telemetry', 'dataRateInHz']
+      },
+      {
+        name: 'Phase (radians)',
+        control: 'numberfield',
+        cssClass: 'l-input-sm l-numeric',
+        key: 'phase',
+        required: true,
+        property: ['telemetry', 'phase']
+      },
+      {
+        name: 'Randomness',
+        control: 'numberfield',
+        cssClass: 'l-input-sm l-numeric',
+        key: 'randomness',
+        required: true,
+        property: ['telemetry', 'randomness']
+      },
+      {
+        name: 'Loading Delay (ms)',
+        control: 'numberfield',
+        cssClass: 'l-input-sm l-numeric',
+        key: 'loadDelay',
+        required: true,
+        property: ['telemetry', 'loadDelay']
+      },
+      {
+        name: 'Include Infinity Values',
+        control: 'toggleSwitch',
+        cssClass: 'l-input',
+        key: 'infinityValues',
+        property: ['telemetry', 'infinityValues']
+      },
+      {
+        name: 'Exceed Float32 Limits',
+        control: 'toggleSwitch',
+        cssClass: 'l-input',
+        key: 'exceedFloat32',
+        property: ['telemetry', 'exceedFloat32']
+      },
+      {
+        name: 'Provide Staleness Updates',
+        control: 'toggleSwitch',
+        cssClass: 'l-input',
+        key: 'staleness',
+        property: ['telemetry', 'staleness']
+      }
+    ],
+    initialize: function (object) {
+      object.telemetry = {
+        period: 10,
+        amplitude: 1,
+        offset: 0,
+        dataRateInHz: 1,
+        phase: 0,
+        randomness: 0,
+        loadDelay: 0,
+        infinityValues: false,
+        exceedFloat32: false,
+        staleness: false
+      };
+    }
+  });
+  const stalenessProvider = new SinewaveStalenessProvider(openmct);
 
-        openmct.types.addType("generator", {
-            name: "Sine Wave Generator",
-            description: "For development use. Generates example streaming telemetry data using a simple sine wave algorithm.",
-            cssClass: "icon-generator-telemetry",
-            creatable: true,
-            form: [
-                {
-                    name: "Period",
-                    control: "numberfield",
-                    cssClass: "l-input-sm l-numeric",
-                    key: "period",
-                    required: true,
-                    property: [
-                        "telemetry",
-                        "period"
-                    ]
-                },
-                {
-                    name: "Amplitude",
-                    control: "numberfield",
-                    cssClass: "l-input-sm l-numeric",
-                    key: "amplitude",
-                    required: true,
-                    property: [
-                        "telemetry",
-                        "amplitude"
-                    ]
-                },
-                {
-                    name: "Offset",
-                    control: "numberfield",
-                    cssClass: "l-input-sm l-numeric",
-                    key: "offset",
-                    required: true,
-                    property: [
-                        "telemetry",
-                        "offset"
-                    ]
-                },
-                {
-                    name: "Data Rate (hz)",
-                    control: "numberfield",
-                    cssClass: "l-input-sm l-numeric",
-                    key: "dataRateInHz",
-                    required: true,
-                    property: [
-                        "telemetry",
-                        "dataRateInHz"
-                    ]
-                },
-                {
-                    name: "Phase (radians)",
-                    control: "numberfield",
-                    cssClass: "l-input-sm l-numeric",
-                    key: "phase",
-                    required: true,
-                    property: [
-                        "telemetry",
-                        "phase"
-                    ]
-                },
-                {
-                    name: "Randomness",
-                    control: "numberfield",
-                    cssClass: "l-input-sm l-numeric",
-                    key: "randomness",
-                    required: true,
-                    property: [
-                        "telemetry",
-                        "randomness"
-                    ]
-                }
-            ],
-            initialize: function (object) {
-                object.telemetry = {
-                    period: 10,
-                    amplitude: 1,
-                    offset: 0,
-                    dataRateInHz: 1,
-                    phase: 0,
-                    randomness: 0
-                };
-            }
-        });
-
-        openmct.telemetry.addProvider(new GeneratorProvider());
-        openmct.telemetry.addProvider(new GeneratorMetadataProvider());
-        openmct.telemetry.addProvider(new SinewaveLimitProvider());
-    };
-
-});
+  openmct.telemetry.addProvider(new GeneratorProvider(openmct, stalenessProvider));
+  openmct.telemetry.addProvider(new GeneratorMetadataProvider());
+  openmct.telemetry.addProvider(new SinewaveLimitProvider());
+  openmct.telemetry.addProvider(stalenessProvider);
+}
diff --git a/example/identity/bundle.js b/example/identity/bundle.js
deleted file mode 100644
index 45c7b433807..00000000000
--- a/example/identity/bundle.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/ExampleIdentityService"
-], function (
-    ExampleIdentityService
-) {
-    "use strict";
-
-    return {
-        name: "example/identity",
-        definition: {
-            "extensions": {
-                "components": [
-                    {
-                        "implementation": ExampleIdentityService,
-                        "provides": "identityService",
-                        "type": "provider",
-                        "depends": [
-                            "dialogService",
-                            "$q"
-                        ]
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/example/identity/src/ExampleIdentityService.js b/example/identity/src/ExampleIdentityService.js
deleted file mode 100644
index 3efaa8be1f1..00000000000
--- a/example/identity/src/ExampleIdentityService.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    function () {
-        "use strict";
-
-        var DEFAULT_IDENTITY = {
-                key: "user",
-                name: "Example User"
-            },
-            DIALOG_STRUCTURE = {
-                name: "Identify Yourself",
-                sections: [{
-                    rows: [
-                        {
-                            name: "User ID",
-                            control: "textfield",
-                            key: "key",
-                            required: true
-                        },
-                        {
-                            name: "Human name",
-                            control: "textfield",
-                            key: "name",
-                            required: true
-                        }
-                    ]
-                }]
-            };
-
-        /**
-         * Example implementation of an identity service. This prompts the
-         * user to enter a name and user ID; in a more realistic
-         * implementation, this would be read from a server, possibly
-         * prompting for a user name and password (or similar) as
-         * appropriate.
-         *
-         * @implements {IdentityService}
-         * @memberof platform/identity
-         */
-        function ExampleIdentityProvider(dialogService, $q) {
-            this.dialogService = dialogService;
-            this.$q = $q;
-
-            this.returnUser = this.returnUser.bind(this);
-            this.returnUndefined = this.returnUndefined.bind(this);
-        }
-
-        ExampleIdentityProvider.prototype.getUser = function () {
-            if (this.user) {
-                return this.$q.when(this.user);
-            } else {
-                return this.dialogService.getUserInput(DIALOG_STRUCTURE, DEFAULT_IDENTITY)
-                    .then(this.returnUser, this.returnUndefined);
-            }
-        };
-
-        /**
-         * @private
-         */
-        ExampleIdentityProvider.prototype.returnUser = function (user) {
-            return this.user = user;
-        };
-
-        /**
-         * @private
-         */
-        ExampleIdentityProvider.prototype.returnUndefined = function () {
-            return undefined;
-        };
-
-        return ExampleIdentityProvider;
-    }
-);
diff --git a/example/imagery/plugin.js b/example/imagery/plugin.js
index 2a0c64fea30..9d37bbc925a 100644
--- a/example/imagery/plugin.js
+++ b/example/imagery/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,156 +20,273 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-
-], function (
-
-) {
-    function ImageryPlugin() {
-
-        const IMAGE_SAMPLES = [
-            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18731.jpg",
-            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18732.jpg",
-            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18733.jpg",
-            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18734.jpg",
-            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18735.jpg",
-            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18736.jpg",
-            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18737.jpg",
-            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18738.jpg",
-            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18739.jpg",
-            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18740.jpg",
-            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18741.jpg",
-            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18742.jpg",
-            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18743.jpg",
-            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18744.jpg",
-            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18745.jpg",
-            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18746.jpg",
-            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18747.jpg",
-            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18748.jpg"
-        ];
-        const IMAGE_DELAY = 20000;
-
-        function getCompassValues(min, max) {
-            return min + Math.random() * (max - min);
-        }
+const DEFAULT_IMAGE_SAMPLES = [
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18732.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18733.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18734.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18735.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18736.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18737.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18738.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18739.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18740.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18741.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18742.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18743.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18744.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18745.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18746.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18747.jpg',
+  'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18748.jpg'
+];
+const DEFAULT_IMAGE_LOAD_DELAY_IN_MILLISECONDS = 20000;
+const MIN_IMAGE_LOAD_DELAY_IN_MILLISECONDS = 5000;
 
-        function pointForTimestamp(timestamp, name) {
-            const url = IMAGE_SAMPLES[Math.floor(timestamp / IMAGE_DELAY) % IMAGE_SAMPLES.length];
-            const urlItems = url.split('/');
-            const imageDownloadName = `example.imagery.${urlItems[urlItems.length - 1]}`;
-
-            return {
-                name,
-                utc: Math.floor(timestamp / IMAGE_DELAY) * IMAGE_DELAY,
-                local: Math.floor(timestamp / IMAGE_DELAY) * IMAGE_DELAY,
-                url,
-                sunOrientation: getCompassValues(0, 360),
-                cameraPan: getCompassValues(0, 360),
-                heading: getCompassValues(0, 360),
-                imageDownloadName
-            };
-        }
+let openmctInstance;
 
-        var realtimeProvider = {
-            supportsSubscribe: function (domainObject) {
-                return domainObject.type === 'example.imagery';
-            },
-            subscribe: function (domainObject, callback) {
-                var interval = setInterval(function () {
-                    callback(pointForTimestamp(Date.now(), domainObject.name));
-                }, IMAGE_DELAY);
-
-                return function () {
-                    clearInterval(interval);
-                };
-            }
+export default function () {
+  return function install(openmct) {
+    openmctInstance = openmct;
+    openmct.types.addType('example.imagery', {
+      key: 'example.imagery',
+      name: 'Example Imagery',
+      cssClass: 'icon-image',
+      description:
+        'For development use. Creates example imagery data that mimics a live imagery stream.',
+      creatable: true,
+      initialize: (object) => {
+        object.configuration = {
+          imageLocation: '',
+          imageLoadDelayInMilliSeconds: DEFAULT_IMAGE_LOAD_DELAY_IN_MILLISECONDS,
+          imageSamples: [],
+          layers: []
         };
 
-        var historicalProvider = {
-            supportsRequest: function (domainObject, options) {
-                return domainObject.type === 'example.imagery'
-                    && options.strategy !== 'latest';
+        object.telemetry = {
+          values: [
+            {
+              name: 'Name',
+              key: 'name'
+            },
+            {
+              name: 'Time',
+              key: 'utc',
+              format: 'utc',
+              hints: {
+                domain: 2
+              }
             },
-            request: function (domainObject, options) {
-                var start = options.start;
-                var end = Math.min(options.end, Date.now());
-                var data = [];
-                while (start <= end && data.length < IMAGE_DELAY) {
-                    data.push(pointForTimestamp(start, domainObject.name));
-                    start += IMAGE_DELAY;
+            {
+              name: 'Local Time',
+              key: 'local',
+              format: 'local-format',
+              hints: {
+                domain: 1
+              }
+            },
+            {
+              name: 'Image',
+              key: 'url',
+              format: 'image',
+              hints: {
+                image: 1
+              },
+              layers: [
+                {
+                  source: 'dist/imagery/example-imagery-layer-16x9.png',
+                  name: '16:9'
+                },
+                {
+                  source: 'dist/imagery/example-imagery-layer-safe.png',
+                  name: 'Safe'
+                },
+                {
+                  source: 'dist/imagery/example-imagery-layer-scale.png',
+                  name: 'Scale'
                 }
-
-                return Promise.resolve(data);
-            }
-        };
-
-        var ladProvider = {
-            supportsRequest: function (domainObject, options) {
-                return domainObject.type === 'example.imagery'
-                    && options.strategy === 'latest';
+              ]
+            },
+            {
+              name: 'Image Thumbnail',
+              key: 'thumbnail-url',
+              format: 'thumbnail',
+              hints: {
+                thumbnail: 1
+              },
+              source: 'url'
             },
-            request: function (domainObject, options) {
-                return Promise.resolve([pointForTimestamp(Date.now(), domainObject.name)]);
+            {
+              name: 'Image Download Name',
+              key: 'imageDownloadName',
+              format: 'imageDownloadName',
+              hints: {
+                imageDownloadName: 1
+              }
             }
+          ]
         };
+      },
+      form: [
+        {
+          key: 'imageLocation',
+          name: 'Images url list (comma separated)',
+          control: 'textarea',
+          cssClass: 'l-inline',
+          property: ['configuration', 'imageLocation']
+        },
+        {
+          key: 'imageLoadDelayInMilliSeconds',
+          name: 'Image load delay (milliseconds)',
+          control: 'numberfield',
+          required: true,
+          cssClass: 'l-inline',
+          property: ['configuration', 'imageLoadDelayInMilliSeconds']
+        }
+      ]
+    });
 
-        return function install(openmct) {
-            openmct.types.addType('example.imagery', {
-                key: 'example.imagery',
-                name: 'Example Imagery',
-                cssClass: 'icon-image',
-                description: 'For development use. Creates example imagery '
-                    + 'data that mimics a live imagery stream.',
-                creatable: true,
-                initialize: function (object) {
-                    object.telemetry = {
-                        values: [
-                            {
-                                name: 'Name',
-                                key: 'name'
-                            },
-                            {
-                                name: 'Time',
-                                key: 'utc',
-                                format: 'utc',
-                                hints: {
-                                    domain: 2
-                                }
-                            },
-                            {
-                                name: 'Local Time',
-                                key: 'local',
-                                format: 'local-format',
-                                hints: {
-                                    domain: 1
-                                }
-                            },
-                            {
-                                name: 'Image',
-                                key: 'url',
-                                format: 'image',
-                                hints: {
-                                    image: 1
-                                }
-                            },
-                            {
-                                name: 'Image Download Name',
-                                key: 'imageDownloadName',
-                                format: 'imageDownloadName',
-                                hints: {
-                                    imageDownloadName: 1
-                                }
-                            }
-                        ]
-                    };
-                }
-            });
+    const formatThumbnail = {
+      format: function (url) {
+        return `${url}?w=100&h=100`;
+      }
+    };
 
-            openmct.telemetry.addProvider(realtimeProvider);
-            openmct.telemetry.addProvider(historicalProvider);
-            openmct.telemetry.addProvider(ladProvider);
-        };
+    openmct.telemetry.addFormat({
+      key: 'thumbnail',
+      ...formatThumbnail
+    });
+    openmct.telemetry.addProvider(getRealtimeProvider(openmct));
+    openmct.telemetry.addProvider(getHistoricalProvider(openmct));
+    openmct.telemetry.addProvider(getLadProvider(openmct));
+  };
+}
+
+function getCompassValues(min, max) {
+  return min + Math.random() * (max - min);
+}
+
+function getImageSamples(configuration) {
+  let imageSamples = DEFAULT_IMAGE_SAMPLES;
+
+  if (configuration.imageLocation && configuration.imageLocation.length) {
+    imageSamples = getImageUrlListFromConfig(configuration);
+  }
+
+  return imageSamples;
+}
+
+function getImageUrlListFromConfig(configuration) {
+  return configuration.imageLocation.split(',');
+}
+
+function getImageLoadDelay(domainObject) {
+  const imageLoadDelay = Math.trunc(
+    Number(domainObject.configuration.imageLoadDelayInMilliSeconds)
+  );
+  if (!imageLoadDelay) {
+    openmctInstance.objects.mutate(
+      domainObject,
+      'configuration.imageLoadDelayInMilliSeconds',
+      DEFAULT_IMAGE_LOAD_DELAY_IN_MILLISECONDS
+    );
+
+    return DEFAULT_IMAGE_LOAD_DELAY_IN_MILLISECONDS;
+  }
+
+  if (imageLoadDelay < MIN_IMAGE_LOAD_DELAY_IN_MILLISECONDS) {
+    openmctInstance.objects.mutate(
+      domainObject,
+      'configuration.imageLoadDelayInMilliSeconds',
+      MIN_IMAGE_LOAD_DELAY_IN_MILLISECONDS
+    );
+
+    return MIN_IMAGE_LOAD_DELAY_IN_MILLISECONDS;
+  }
+
+  return imageLoadDelay;
+}
+
+function getRealtimeProvider(openmct) {
+  return {
+    supportsSubscribe: (domainObject) => domainObject.type === 'example.imagery',
+    subscribe: (domainObject, callback) => {
+      const delay = getImageLoadDelay(domainObject);
+      const interval = setInterval(() => {
+        const imageSamples = getImageSamples(domainObject.configuration);
+        const datum = pointForTimestamp(openmct.time.now(), domainObject.name, imageSamples, delay);
+        callback(datum);
+      }, delay);
+
+      return () => {
+        clearInterval(interval);
+      };
+    }
+  };
+}
+
+function getHistoricalProvider(openmct) {
+  return {
+    supportsRequest: (domainObject, options) => {
+      return domainObject.type === 'example.imagery' && options.strategy !== 'latest';
+    },
+    request: (domainObject, options) => {
+      const delay = getImageLoadDelay(domainObject);
+      let start = options.start;
+      const end = Math.min(options.end, openmct.time.now());
+      const data = [];
+      while (start <= end && data.length < delay) {
+        const imageSamples = getImageSamples(domainObject.configuration);
+        const generatedDataPoint = pointForTimestamp(start, domainObject.name, imageSamples, delay);
+        data.push(generatedDataPoint);
+        start += delay;
+      }
+
+      return Promise.resolve(data);
     }
+  };
+}
+
+function getLadProvider(openmct) {
+  return {
+    supportsRequest: (domainObject, options) => {
+      return domainObject.type === 'example.imagery' && options.strategy === 'latest';
+    },
+    request: (domainObject, options) => {
+      const delay = getImageLoadDelay(domainObject);
+      const datum = pointForTimestamp(
+        openmct.time.now(),
+        domainObject.name,
+        getImageSamples(domainObject.configuration),
+        delay
+      );
+
+      return Promise.resolve([datum]);
+    }
+  };
+}
+
+function pointForTimestamp(timestamp, name, imageSamples, delay) {
+  const url = imageSamples[Math.floor(timestamp / delay) % imageSamples.length];
+  const urlItems = url.split('/');
+  const imageDownloadName = `example.imagery.${urlItems[urlItems.length - 1]}`;
+  const navCamTransformations = {
+    translateX: 0,
+    translateY: 18,
+    rotation: 0,
+    scale: 0.3,
+    cameraAngleOfView: 70
+  };
 
-    return ImageryPlugin;
-});
+  return {
+    name,
+    utc: Math.floor(timestamp / delay) * delay,
+    local: Math.floor(timestamp / delay) * delay,
+    url,
+    sunOrientation: getCompassValues(0, 360),
+    cameraAzimuth: getCompassValues(0, 360),
+    heading: getCompassValues(0, 360),
+    transformations: navCamTransformations,
+    imageDownloadName
+  };
+}
diff --git a/example/mobile/bundle.js b/example/mobile/bundle.js
deleted file mode 100644
index 1230bba5bc3..00000000000
--- a/example/mobile/bundle.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([], function () {
-    "use strict";
-
-    return {
-        name: "example/mobile",
-        definition: {
-            "name": "Mobile",
-            "description": "Allows elements with pertinence to mobile usage and development",
-            "extensions": {
-                "stylesheets": [
-                    {
-                        "stylesheetUrl": "css/mobile-example.css",
-                        "priority": "mandatory"
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/example/mobile/res/sass/mobile-example.scss b/example/mobile/res/sass/mobile-example.scss
deleted file mode 100644
index 5c10aca8138..00000000000
--- a/example/mobile/res/sass/mobile-example.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-@import "../../../../platform/commonUI/general/res/sass/constants";
-@import "../../../../platform/commonUI/general/res/sass/mobile/constants";
-@import "../../../../platform/commonUI/general/res/sass/mobile/mixins";
-
-@include phoneandtablet {
-    // Show the Create button
-    .create-button-holder {
-        display: block !important;
-    }
-}
diff --git a/example/msl/README.md b/example/msl/README.md
deleted file mode 100644
index 0df2e1666b2..00000000000
--- a/example/msl/README.md
+++ /dev/null
@@ -1,20 +0,0 @@
-To use this bundle, add the following paths to /main.js -
-'./platform/features/conductor/bundle',
-'./example/msl/bundle',
-
-An example plugin that integrates with public data from the Curiosity rover. 
-The data shown used by this plugin is published by the Centro de 
-Astrobiología (CSIC-INTA) at http://cab.inta-csic.es/rems/
-
-Fetching data from this source requires a cross-origin request which will 
-fail on most modern browsers due to restrictions on such requests. As such, 
-it is proxied through a local proxy defined in app.js. In order to use this 
-example you will need to run app.js locally.
-
-This example shows integration with an historical telemetry source, as 
-opposed to a real-time data source that is streaming back current information 
-about the state of a system. This example is atypical of a historical data 
-source in that it fetches all data in one request. The server infrastructure 
-of an historical telemetry source should ideally allow queries bounded by 
-time and other data attributes.
-
diff --git a/example/msl/bundle.js b/example/msl/bundle.js
deleted file mode 100644
index 80755d8d959..00000000000
--- a/example/msl/bundle.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/RemsTelemetryServerAdapter",
-    "./src/RemsTelemetryModelProvider",
-    "./src/RemsTelemetryProvider"
-], function (
-    RemsTelemetryServerAdapter,
-    RemsTelemetryModelProvider,
-    RemsTelemetryProvider
-) {
-    "use strict";
-
-    return {
-        name: "example/msl",
-        definition: {
-            "name": "Mars Science Laboratory Data Adapter",
-            "extensions": {
-                "types": [
-                    {
-                        "name": "Mars Science Laboratory",
-                        "key": "msl.curiosity",
-                        "cssClass": "icon-object"
-                    },
-                    {
-                        "name": "Instrument",
-                        "key": "msl.instrument",
-                        "cssClass": "icon-object",
-                        "model": {"composition": []}
-                    },
-                    {
-                        "name": "Measurement",
-                        "key": "msl.measurement",
-                        "cssClass": "icon-telemetry",
-                        "model": {"telemetry": {}},
-                        "telemetry": {
-                            "source": "rems.source",
-                            "domains": [
-                                {
-                                    "name": "Time",
-                                    "key": "utc",
-                                    "format": "utc"
-                                }
-                            ]
-                        }
-                    }
-                ],
-                "constants": [
-                    {
-                        "key": "REMS_WS_URL",
-                        "value": "/proxyUrl?url=http://cab.inta-csic.es/rems/wp-content/plugins/marsweather-widget/api.php"
-                    }
-                ],
-                "roots": [
-                    {
-                        "id": "msl:curiosity"
-                    }
-                ],
-                "models": [
-                    {
-                        "id": "msl:curiosity",
-                        "priority": "preferred",
-                        "model": {
-                            "type": "msl.curiosity",
-                            "name": "Mars Science Laboratory",
-                            "composition": ["msl_tlm:rems"]
-                        }
-                    }
-                ],
-                "services": [
-                    {
-                        "key": "rems.adapter",
-                        "implementation": RemsTelemetryServerAdapter,
-                        "depends": ["$http", "$log", "REMS_WS_URL"]
-                    }
-                ],
-                "components": [
-                    {
-                        "provides": "modelService",
-                        "type": "provider",
-                        "implementation": RemsTelemetryModelProvider,
-                        "depends": ["rems.adapter"]
-                    },
-                    {
-                        "provides": "telemetryService",
-                        "type": "provider",
-                        "implementation": RemsTelemetryProvider,
-                        "depends": ["rems.adapter", "$q"]
-                    }
-                ]
-            }
-        }
-    };
-});
-
diff --git a/example/msl/data/rems.json b/example/msl/data/rems.json
deleted file mode 100644
index 085e01a022c..00000000000
--- a/example/msl/data/rems.json
+++ /dev/null
@@ -1 +0,0 @@
-{"descriptions":{"disclaimer_en":"\t    \n\t\t\tThe information contained into this file is provided by Centro de Astrobiologia\n\t\t\t(CAB) and is intended for outreach purposes only. Any other use is discouraged.\n\t\t\tCAB will take no responsibility for any result or publication made base on the \n\t\t\tcontent of this file. To access REMS scientific data, visit PDS at http:\/\/pds.nasa.gov.\n\n\t\t\tThe environmental magnitudes given into this file are obtained from the values\n\t\t\tread by the Rover Environmental Monitoring Station (REMS) on board the Mars Science\n\t\t\tLaboratory (MSL) rover on Mars. This file provides the environmental magnitudes at REMS\n\t\t\tlocation, so MSL rover influences those magnitudes (rover position,\n\t\t\trover temperature, rover orientation, rover shade, dust depositions on the rover, etc.)\n\n\t\t\tREMS does not take measurements continuously and it takes measurements at different\n\t\t\ttimes from one day to another. This fact has influence on the variation of the values\n\t\t\tgiven in this file from one day to another .\n\n\t\t\tFor different reasons (instrument maintenance, instrument calibration, instrument degradation, etc.), \n\t\t\tsome or all of the magnitudes in this file may not be available.\n\t\t","disclaimer_es":"\t\t\n\t\t\tLa informaci\u00f3n contenida en este fichero es facilitada por el Centro de Astrobiolog\u00eda\n\t\t\t(CAB) \u00fanicamente para fines divulgativos. Cualquier otro uso queda desaconsejado.\n\t\t\tCAB no se har\u00e1 responsable de ning\u00fan resultado o publicaci\u00f3n basados en el contenido \n\t\t\tde este fichero. Para acceder a los datos cient\u00edficos de REMS, visite el PDS en\n\t\t\thttp:\/\/pds.nasa.gov.\n\n\t\t\tLas magnitudes ambientales dadas es este fichero se obtienen de los valores le\u00eddos\n\t\t\tpor la Estaci\u00f3n de Monitoreo Ambiental del Rover (REMS, por sus siglas en ingl\u00e9s)\n\t\t\tabordo del Laboratorio Cient\u00edfico de Marte (MSL, por sus siglas en ingl\u00e9s). Este\n\t\t\tfichero da las magnitudes ambientales medidas por REMS, por lo que estas magnitudes \n\t\t\test\u00e1n influenciadas por el rover MSL (posici\u00f3n del rover, temperatura del\n\t\t\trover, orientaci\u00f3n del rover, sombras arrojadas por el rover, deposici\u00f3n de polvo sobre\n\t\t\tel rover, etc.)\n\n\t\t\tREMS no est\u00e1 tomando medidas continuamente y, adem\u00e1s, toma medidas a diferentes horas \n\t\t\tde un d\u00eda para otro. Estos hechos tienen influencia en la variaci\u00f3n de los valores\n\t\t\tdados en este fichero para d\u00edas sucesivos.\n\n\t\t\tPor diferentes razones (mantenimiento del instrumento, calibraci\u00f3n del instrumento, degradaci\u00f3n\n\t\t\tdel instrumento, etc.) puede que alguna o todas las magnitudes de este fichero no est\u00e9n disponibles.\n\t\t","sol_desc_en":"\n\t\t\tThe term sol is used to refer to the duration of a day on Mars. A sol is about 24 hours and 40 minutes. For Curiosity,\n\t\t\tsol 0 corresponds with its landing day on Mars.\n\t\t","sol_desc_es":"\n\t\t\tEl t\u00e9rmino sol hace referencia a la duraci\u00f3n de un d\u00eda en Marte. Un sol dura aproximadamente 24 horas y 40 minutos.\n\t\t\tPara Curiosity, el sol 0 corresponde al d\u00eda de su aterrizaje en Marte.\n\t\t","terrestrial_date_desc_en":"\n\t\t\tOne day on Earth is about 24 hours, while a sol (Martian day) is about 24 hours and 40 minutes.\n\t\t\tSo one single sol starts during one Earth day and finishes during the next Earth day. This \n\t\t\tis the Earth day on current sol at midday.\n\t\t","terrestrial_date_desc_es":"\n\t\t\tUn d\u00eda en la Tierra dura aproximadamente 24 horas, mientras que un sol (d\u00eda marciano) dura aproximadamente\n\t\t\t24 horas y 40 minutos. As\u00ed que un sol empieza durante un d\u00eda terrestre, pero termina durante el siguiente.\n\t\t\tEl d\u00eda terrestre dado es el que se corresponde con el mediod\u00eda del sol actual.\n\t\t","temp_desc_en":"\n\t\t\t\tMars is farther from the Sun than Earth, it makes that Mars is colder than our planet.\n\t\t\t\tMoreover, Martian\u2019s atmosphere, which is extremely tenuous, does not retain the heat; \n\t\t\t\thence the difference between day and night's temperatures is more pronounced than in our planet.\n\t\t\t","temp_desc_es":"\n\t\t\t\tMarte est\u00e1 m\u00e1s lejos del Sol que la Tierra, por lo que Marte es m\u00e1s frio que nuestro planeta.\n\t\t\t\tAdem\u00e1s, lo atm\u00f3sfera marciana, que es muy tenue, no retiene bien el calor, \n\t\t\t\tpor lo que las diferencias de temperatura entre el d\u00eda y la noche son m\u00e1s pronunciadas que\n\t\t\t\ten nuestro planeta.\n\t\t\t","pressure_desc_en":"\n\t\t\t\tPressure is a measure of the total mass in a column of air above us. Because\n\t\t\t\tMartian\u2019s atmosphere is extremely tenuous, pressure on Mars' surface is about\n\t\t\t\t160 times smaller than pressure on Earth. Average pressure on Martian surface \n\t\t\t\tis about 700 Pascals (100000 Pascals on Earth) Curiosity is into Gale crater,\n\t\t\t\twhich is about 5 kilometers (3 miles) depth. For this reason, pressure measured\n\t\t\t\tby REMS is usually higher than average pressure on the entire planet.\n\t\t\t","pressure_desc_es":"\n\t\t\t\tLa presi\u00f3n mide la masa total en una columna de aire sobre nosotros. Debido a que\n\t\t\t\tla atm\u00f3sfera marciana es muy tenue, la presi\u00f3n en la superficie de Marte es unas\n\t\t\t\t160 veces m\u00e1s baja que en la Tierra. La presi\u00f3n media en la superficie de Marte \n\t\t\t\tes de unos 700 Pascales (en la Tierra es de 100000) El rover Curiosity est\u00e1 en el \n\t\t\t\tinterior de un cr\u00e1ter, de unos 5 kil\u00f3metros (3 millas) de profundidad. Por esta\n\t\t\t\traz\u00f3n, la presi\u00f3n medida por REMS normalmente ser\u00e1 mayor que la media en el planeta.\n\t\t\t","abs_humidity_desc_en":"\n\t\t\t\tMartian's atmosphere contains water vapor, and humidity measures the amount \n\t\t\t\tof water vapor present in the air. REMS records the relative humidity, \n\t\t\t\twhich is a measure of the amount of water vapor in the air compared \n\t\t\t\twith the amount of water vapor the air can hold at the temperature it happens\n\t\t\t\tto be when you measure it. Water on Mars is also present as water ice, \n\t\t\t\tfor instance, at Mars poles. Until today, however, proof of liquid water \n\t\t\t\tin present-day Mars remains elusive.\n\t\t\t","abs_humidity_desc_es":"\n\t\t\t\tLa atm\u00f3sfera marciana contiene vapor de agua y la humedad mide \n\t\t\t\tla cantidad de vapor de agua presente en el aire. REMS registra la humedad\n\t\t\t\trelativa, que es una medida de la cantidad de vapor de agua que \n\t\t\t\thay en el aire en comparaci\u00f3n con la m\u00e1xima cantidad de vapor de agua\n\t\t\t\tque puede contener a la misma temperatura. El agua en Marte est\u00e1 presente \n\t\t\t\ttambi\u00e9n en forma de hielo, por ejemplo en los polos. Hasta la fecha, sin embargo, \n\t\t\t\tno se han encontrado pruebas de la existencia de agua l\u00edquida en el presente marciano.\n\t\t\t","wind_desc_en":"\n\t\t\t\tNASA Viking landers and NASA Pathfinder rover showed that the average wind speed\n\t\t\t\ton their location was pretty weak: 1 to 4 meters\/second (4 to 15 kilometers\/hour - \n\t\t\t\t2.5 to 9 miles\/hour). However, during a dust storm, winds can reach 30 meters\/second \n\t\t\t\t(110 kilometers\/hour - 68 miles\/hour) or more.\n\t\t\t","wind_desc_es":"\n\t\t\t\tLas Vikings landers y el rover Pathfinder de la NASA mostraron que la velocidad media\n\t\t\t\tdel viento en su localizaci\u00f3n era bastante baja: de 1 a 4 metros\/segundo (de 4 a \n\t\t\t\t15 kil\u00f3metros por hora - de 2.5 a 9 millas\/hora) Sin embargo, durante una tormenta\n\t\t\t\tde polvo, la velocidad del viento en Marte puede alcanzar los 30 metros\/segundo\n\t\t\t\t(110 kil\u00f3metros por hora - 68 millas\/hora) o m\u00e1s.\n\t\t\t","gts_temp_desc_en":"\n\t\t\t\tMartian's atmosphere is extremely tenuous, about 160 times thinner than Earth's,\n\t\t\t\tso heat from the Sun can easily escape. It makes that there are big differences\n\t\t\t\tbetween ground temperature and air temperature. Imagine you were on the Martian equator \n\t\t\t\tat noon, you would feel like summer at your feet, but winter in your head.\n\t\t\t","gts_temp_desc_es":"\n\t\t\t\tLa atm\u00f3sfera marciana es muy tenue, unas 160 veces m\u00e1s delgada que la de la Tierra,\n\t\t\t\tlo que hace que el calor proveniente del Sol pueda escapar con facilidad. Esto hace\n\t\t\t\tque haya grandes diferencias entre la temperatura del suelo y la del aire. Imagina\n\t\t\t\tpor un momento que est\u00e1s en el ecuador marciano al mediod\u00eda, sentir\u00edas\n\t\t\t\ten tus pies una temperatura veraniega, sin embargo ser\u00eda invierno para tu cabeza.\n\t\t\t","local_uv_irradiance_index_desc_en":"\n\t\t\t\tLocal ultraviolet (UV) irradiance index is an indicator of the intensity of the ultraviolet\n\t\t\t\tradiation from the Sun at Curiosity location. UV radiation is a damaging agent for life. \n\t\t\t\tOn Earth, ozone layer prevents damaging ultraviolet light from reaching the surface, to \n\t\t\t\tthe benefit of both plants and animals. However, on Mars, due to the absence of ozone in the \n\t\t\t\tatmosphere, ultraviolet radiation reaches the Martian surface.\n\t\t\t","local_uv_irradiance_index_desc_es":"\n\t\t\t\tEl \u00edndice de irradiaci\u00f3n ultravioleta local es un indicador de la intensidad de la radiaci\u00f3n\n\t\t\t\tultravioleta (UV) proveniente del Sol en la ubicaci\u00f3n del rover Curiosity. La radiaci\u00f3n UV es \n\t\t\t\tun agente da\u00f1ino para la vida. En la Tierra, la capa de ozono nos protege de ella. Sin embargo\n\t\t\t\ten Marte, debido a la ausencia de ozono en la atm\u00f3sfera, la radiaci\u00f3n ultravioleta alcanza\n\t\t\t\tla superficie.\n\t\t\t","atmo_opacity_desc_en":"\n\t\t\t\tWeather on Mars is more extreme than Earth's. Mars is cooler and with\n\t\t\t\tbigger differences between day and night temperatures. Moreover, \n\t\t\t\tdust storms lash its surface. However, Mars' and Earth's climates have\n\t\t\t\timportant similarities, such as the polar ice caps or seasonal changes.\n\t\t\t\tAs on Earth, on Mars we can have sunny, cloudy or windy days, for example.\n\t\t\t","atmo_opacity_desc_es":"\n\t\t\t\tEl clima en Marte es m\u00e1s extremo que en la Tierra. Marte es m\u00e1s frio y\n\t\t\t\tcon mayores diferencias entre las temperaturas del d\u00eda y de la noche.\n\t\t\t\tAdem\u00e1s, fuertes tormentas de polvo azotan su superficie. Sin embargo,\n\t\t\t\texisten importantes similitudes entre el clima marciano y el terrestre,\n\t\t\t\tcomo la existencia de casquetes polares o los cambios de estaciones.\n\t\t\t\tComo ocurre en la Tierra, en Marte podemos tener d\u00edas soleados, nublados\n\t\t\t\to ventosos, por ejemplo.\n\t\t\t","ls_desc_en":"\n\t\t\t\tA Martian year lasts about two Earth's year, which is the time\n\t\t\t\tMars takes to orbit the Sun. Solar longitude is an angle that\n\t\t\t\tgives the position of Mars on its orbit.\t\t\t\t  \n\t\t\t","ls_desc_es":"\n\t\t\t\tUn a\u00f1o marciano dura aproximadamente dos a\u00f1os terrestres, el tiempo\n\t\t\t\tque Marte necesita para dar una vuelta completa alrededor del Sol.\n\t\t\t\tLa longitud solar es un \u00e1ngulo que nos da la posici\u00f3n de Marte en su \n\t\t\t\t\u00f3rbita.\n\t\t\t","season_desc_en":"\n\t\t\t\tA Martian year is divided in 12 months, as Earth's. However, Martian months are\n\t\t\t\tfrom 46 to 67 sols (Martian days) long. The longest one is the month 3 (67 sols),\n\t\t\t\tand the shortest one is the month 9 (46 sols) Martian months mark seasonal changes. \n\t\t\t\tIn the southern hemisphere (Curiosity rover location) the autumn starts in month 1; \n\t\t\t\tthe winter in month 4; the spring in month 7; and the summer in month 10.\n\t\t\t","season_desc_es":"\n\t\t\t\tEl a\u00f1o marciano se divide en 12 meses, como en la Tierra. Sin embargo, los meses\n\t\t\t\ten Marte duran entre 46 y 67 soles (d\u00edas marcianos). El m\u00e1s largo es el mes 3\n\t\t\t\t(67 soles) y el m\u00e1s corto es el mes 9 (46 soles). Los meses marcan los\n\t\t\t\tcambios de estaci\u00f3n. En el hemisferio sur (localizaci\u00f3n del rover Curiosity) el\n\t\t\t\toto\u00f1o comienza en el mes 1; el invierno, en el mes 4; la primavera, en el mes 7; y\n\t\t\t\tel verano, en el mes 10. \n\t\t\t\t\t\t\t\n\t\t\t","sunrise_sunset_desc_en":"\n\t\t\t\tThe duration of a Martian day (sol) is about 24 hours and 40 minutes. The duration\n\t\t\t\tof daylight varies along the Martian year, as on Earth.\n\t\t\t","sunrise_sunset_desc_es":"\n\t\t\t\tUn d\u00eda marciano (sol) dura aproximadamente 24 horas y 40 minutos. La duraci\u00f3n\n\t\t\t\tdel d\u00eda y de la noche var\u00eda a lo largo del a\u00f1o, como ocurre en la Tierra.\n\t\t\t"},"soles":[{"id":"1159","terrestrial_date":"2016-01-19","sol":"1228","ls":"97","season":"Month 4","min_temp":"-88","max_temp":"-28","pressure":"832","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:51","sunset":"17:34","local_uv_irradiance_index":"Moderate","min_gts_temp":"-93","max_gts_temp":"1"},{"id":"1158","terrestrial_date":"2016-01-18","sol":"1227","ls":"96","season":"Month 4","min_temp":"-88","max_temp":"-26","pressure":"833","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:51","sunset":"17:34","local_uv_irradiance_index":"Moderate","min_gts_temp":"-97","max_gts_temp":"2"},{"id":"1157","terrestrial_date":"2016-01-17","sol":"1226","ls":"96","season":"Month 4","min_temp":"-87","max_temp":"-24","pressure":"835","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:51","sunset":"17:34","local_uv_irradiance_index":"Moderate","min_gts_temp":"-97","max_gts_temp":"1"},{"id":"1156","terrestrial_date":"2016-01-16","sol":"1225","ls":"95","season":"Month 4","min_temp":"-87","max_temp":"-28","pressure":"836","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:51","sunset":"17:34","local_uv_irradiance_index":"Moderate","min_gts_temp":"-98","max_gts_temp":"-1"},{"id":"1154","terrestrial_date":"2016-01-15","sol":"1224","ls":"95","season":"Month 4","min_temp":"-88","max_temp":"-29","pressure":"837","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:52","sunset":"17:34","local_uv_irradiance_index":"Moderate","min_gts_temp":"-98","max_gts_temp":"1"},{"id":"1155","terrestrial_date":"2016-01-14","sol":"1223","ls":"94","season":"Month 4","min_temp":"-88","max_temp":"-26","pressure":"839","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:52","sunset":"17:34","local_uv_irradiance_index":"Moderate","min_gts_temp":"-98","max_gts_temp":"0"},{"id":"1153","terrestrial_date":"2016-01-13","sol":"1222","ls":"94","season":"Month 4","min_temp":"-87","max_temp":"-28","pressure":"840","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:52","sunset":"17:34","local_uv_irradiance_index":"Moderate","min_gts_temp":"-94","max_gts_temp":"0"},{"id":"1152","terrestrial_date":"2016-01-12","sol":"1221","ls":"93","season":"Month 4","min_temp":"-87","max_temp":"-28","pressure":"841","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:52","sunset":"17:34","local_uv_irradiance_index":"Moderate","min_gts_temp":"-94","max_gts_temp":"-1"},{"id":"1151","terrestrial_date":"2016-01-11","sol":"1220","ls":"93","season":"Month 4","min_temp":"-87","max_temp":"-28","pressure":"842","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:52","sunset":"17:35","local_uv_irradiance_index":"Moderate","min_gts_temp":"-94","max_gts_temp":"-3"},{"id":"1150","terrestrial_date":"2016-01-10","sol":"1219","ls":"93","season":"Month 4","min_temp":"-87","max_temp":"-27","pressure":"844","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:52","sunset":"17:35","local_uv_irradiance_index":"Moderate","min_gts_temp":"-92","max_gts_temp":"-4"},{"id":"1149","terrestrial_date":"2016-01-09","sol":"1218","ls":"92","season":"Month 4","min_temp":"-86","max_temp":"-32","pressure":"845","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:52","sunset":"17:35","local_uv_irradiance_index":"Moderate","min_gts_temp":"-96","max_gts_temp":"-6"},{"id":"1148","terrestrial_date":"2016-01-08","sol":"1217","ls":"92","season":"Month 4","min_temp":"-88","max_temp":"-27","pressure":"846","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:53","sunset":"17:35","local_uv_irradiance_index":"Moderate","min_gts_temp":"-91","max_gts_temp":"-3"},{"id":"1147","terrestrial_date":"2016-01-07","sol":"1216","ls":"91","season":"Month 4","min_temp":"-86","max_temp":"-28","pressure":"847","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:53","sunset":"17:35","local_uv_irradiance_index":"Moderate","min_gts_temp":"-85","max_gts_temp":"-6"},{"id":"1146","terrestrial_date":"2016-01-06","sol":"1215","ls":"91","season":"Month 4","min_temp":"-85","max_temp":"-27","pressure":"848","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:53","sunset":"17:35","local_uv_irradiance_index":"High","min_gts_temp":"-84","max_gts_temp":"-3"},{"id":"1144","terrestrial_date":"2016-01-05","sol":"1214","ls":"90","season":"Month 4","min_temp":"-85","max_temp":"-24","pressure":"849","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:53","sunset":"17:35","local_uv_irradiance_index":"Moderate","min_gts_temp":"-86","max_gts_temp":"-12"},{"id":"1145","terrestrial_date":"2016-01-04","sol":"1213","ls":"90","season":"Month 4","min_temp":"-84","max_temp":"-27","pressure":"851","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:53","sunset":"17:36","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"-12"},{"id":"1143","terrestrial_date":"2016-01-03","sol":"1212","ls":"89","season":"Month 3","min_temp":"-86","max_temp":"-28","pressure":"851","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:53","sunset":"17:36","local_uv_irradiance_index":"Moderate","min_gts_temp":"-86","max_gts_temp":"-13"},{"id":"1142","terrestrial_date":"2016-01-02","sol":"1211","ls":"89","season":"Month 3","min_temp":"-83","max_temp":"-22","pressure":"853","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:53","sunset":"17:36","local_uv_irradiance_index":"Moderate","min_gts_temp":"-86","max_gts_temp":"-12"},{"id":"1140","terrestrial_date":"2016-01-01","sol":"1210","ls":"88","season":"Month 3","min_temp":"-85","max_temp":"-23","pressure":"854","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:54","sunset":"17:36","local_uv_irradiance_index":"Moderate","min_gts_temp":"-84","max_gts_temp":"-12"},{"id":"1141","terrestrial_date":"2015-12-31","sol":"1209","ls":"88","season":"Month 3","min_temp":"-85","max_temp":"-24","pressure":"855","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:54","sunset":"17:36","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-12"},{"id":"1139","terrestrial_date":"2015-12-30","sol":"1208","ls":"88","season":"Month 3","min_temp":"-85","max_temp":"-24","pressure":"857","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:54","sunset":"17:36","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"-12"},{"id":"1138","terrestrial_date":"2015-12-29","sol":"1207","ls":"87","season":"Month 3","min_temp":"-85","max_temp":"-25","pressure":"858","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:54","sunset":"17:36","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-13"},{"id":"1137","terrestrial_date":"2015-12-28","sol":"1206","ls":"87","season":"Month 3","min_temp":"-85","max_temp":"-24","pressure":"859","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:54","sunset":"17:37","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"-13"},{"id":"1134","terrestrial_date":"2015-12-27","sol":"1205","ls":"86","season":"Month 3","min_temp":"-86","max_temp":"-26","pressure":"861","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:54","sunset":"17:37","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-13"},{"id":"1135","terrestrial_date":"2015-12-26","sol":"1204","ls":"86","season":"Month 3","min_temp":"-84","max_temp":"-25","pressure":"862","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:55","sunset":"17:37","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"-12"},{"id":"1136","terrestrial_date":"2015-12-25","sol":"1203","ls":"85","season":"Month 3","min_temp":"-85","max_temp":"-23","pressure":"863","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:55","sunset":"17:37","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"-13"},{"id":"1133","terrestrial_date":"2015-12-24","sol":"1202","ls":"85","season":"Month 3","min_temp":"-85","max_temp":"-22","pressure":"864","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:55","sunset":"17:37","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"-12"},{"id":"1132","terrestrial_date":"2015-12-23","sol":"1201","ls":"84","season":"Month 3","min_temp":"-85","max_temp":"-29","pressure":"866","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:55","sunset":"17:37","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-13"},{"id":"1131","terrestrial_date":"2015-12-22","sol":"1200","ls":"84","season":"Month 3","min_temp":"-84","max_temp":"-27","pressure":"866","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:55","sunset":"17:38","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-12"},{"id":"1130","terrestrial_date":"2015-12-21","sol":"1199","ls":"84","season":"Month 3","min_temp":"-86","max_temp":"-29","pressure":"868","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:55","sunset":"17:38","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-14"},{"id":"1128","terrestrial_date":"2015-12-20","sol":"1198","ls":"83","season":"Month 3","min_temp":"-86","max_temp":"-23","pressure":"868","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:55","sunset":"17:38","local_uv_irradiance_index":"Moderate","min_gts_temp":"-89","max_gts_temp":"-13"},{"id":"1127","terrestrial_date":"2015-12-18","sol":"1197","ls":"83","season":"Month 3","min_temp":"-85","max_temp":"-26","pressure":"869","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:56","sunset":"17:38","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-13"},{"id":"1129","terrestrial_date":"2015-12-17","sol":"1196","ls":"82","season":"Month 3","min_temp":"-86","max_temp":"-27","pressure":"871","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:56","sunset":"17:38","local_uv_irradiance_index":"Moderate","min_gts_temp":"-86","max_gts_temp":"-7"},{"id":"1126","terrestrial_date":"2015-12-16","sol":"1195","ls":"82","season":"Month 3","min_temp":"-86","max_temp":"-32","pressure":"872","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:56","sunset":"17:39","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"-6"},{"id":"1125","terrestrial_date":"2015-12-15","sol":"1194","ls":"81","season":"Month 3","min_temp":"-84","max_temp":"-29","pressure":"873","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:56","sunset":"17:39","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"-5"},{"id":"1124","terrestrial_date":"2015-12-14","sol":"1193","ls":"81","season":"Month 3","min_temp":"-84","max_temp":"-28","pressure":"875","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:56","sunset":"17:39","local_uv_irradiance_index":"Moderate","min_gts_temp":"-86","max_gts_temp":"-10"},{"id":"1123","terrestrial_date":"2015-12-13","sol":"1192","ls":"80","season":"Month 3","min_temp":"-86","max_temp":"-24","pressure":"876","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:56","sunset":"17:39","local_uv_irradiance_index":"High","min_gts_temp":"-87","max_gts_temp":"-10"},{"id":"1122","terrestrial_date":"2015-12-12","sol":"1191","ls":"80","season":"Month 3","min_temp":"-87","max_temp":"-28","pressure":"876","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:57","sunset":"17:39","local_uv_irradiance_index":"High","min_gts_temp":"-83","max_gts_temp":"-11"},{"id":"1121","terrestrial_date":"2015-12-11","sol":"1190","ls":"79","season":"Month 3","min_temp":"-87","max_temp":"-29","pressure":"877","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:57","sunset":"17:39","local_uv_irradiance_index":"High","min_gts_temp":"-84","max_gts_temp":"-12"},{"id":"1120","terrestrial_date":"2015-12-10","sol":"1189","ls":"79","season":"Month 3","min_temp":"-87","max_temp":"-24","pressure":"879","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:57","sunset":"17:40","local_uv_irradiance_index":"Moderate","min_gts_temp":"-85","max_gts_temp":"-10"},{"id":"1119","terrestrial_date":"2015-12-09","sol":"1188","ls":"79","season":"Month 3","min_temp":"-90","max_temp":"-31","pressure":"881","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:57","sunset":"17:40","local_uv_irradiance_index":"Moderate","min_gts_temp":"-86","max_gts_temp":"-11"},{"id":"1118","terrestrial_date":"2015-12-08","sol":"1187","ls":"78","season":"Month 3","min_temp":"-84","max_temp":"-29","pressure":"881","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:57","sunset":"17:40","local_uv_irradiance_index":"Moderate","min_gts_temp":"-91","max_gts_temp":"-8"},{"id":"1117","terrestrial_date":"2015-12-07","sol":"1186","ls":"78","season":"Month 3","min_temp":"-86","max_temp":"-28","pressure":"881","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:57","sunset":"17:40","local_uv_irradiance_index":"High","min_gts_temp":"-87","max_gts_temp":"-8"},{"id":"1116","terrestrial_date":"2015-12-06","sol":"1185","ls":"77","season":"Month 3","min_temp":"-84","max_temp":"-24","pressure":"881","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:58","sunset":"17:40","local_uv_irradiance_index":"High","min_gts_temp":"-94","max_gts_temp":"-3"},{"id":"1115","terrestrial_date":"2015-12-05","sol":"1184","ls":"77","season":"Month 3","min_temp":"-85","max_temp":"-28","pressure":"882","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:58","sunset":"17:41","local_uv_irradiance_index":"Moderate","min_gts_temp":"-94","max_gts_temp":"-4"},{"id":"1113","terrestrial_date":"2015-12-04","sol":"1183","ls":"76","season":"Month 3","min_temp":"-86","max_temp":"-26","pressure":"883","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:58","sunset":"17:41","local_uv_irradiance_index":"Moderate","min_gts_temp":"-91","max_gts_temp":"-5"},{"id":"1114","terrestrial_date":"2015-12-03","sol":"1182","ls":"76","season":"Month 3","min_temp":"-85","max_temp":"-29","pressure":"884","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:58","sunset":"17:41","local_uv_irradiance_index":"Moderate","min_gts_temp":"-91","max_gts_temp":"-6"},{"id":"1112","terrestrial_date":"2015-12-02","sol":"1181","ls":"75","season":"Month 3","min_temp":"-86","max_temp":"-24","pressure":"885","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:58","sunset":"17:41","local_uv_irradiance_index":"Moderate","min_gts_temp":"-86","max_gts_temp":"-7"},{"id":"1111","terrestrial_date":"2015-12-01","sol":"1180","ls":"75","season":"Month 3","min_temp":"-86","max_temp":"-27","pressure":"886","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:58","sunset":"17:41","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"-11"},{"id":"1110","terrestrial_date":"2015-11-30","sol":"1179","ls":"75","season":"Month 3","min_temp":"-85","max_temp":"-25","pressure":"887","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:59","sunset":"17:42","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-12"},{"id":"1109","terrestrial_date":"2015-11-29","sol":"1178","ls":"74","season":"Month 3","min_temp":"-86","max_temp":"-26","pressure":"888","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:59","sunset":"17:42","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-13"},{"id":"1108","terrestrial_date":"2015-11-28","sol":"1177","ls":"74","season":"Month 3","min_temp":"-84","max_temp":"-27","pressure":"888","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:59","sunset":"17:42","local_uv_irradiance_index":"Moderate","min_gts_temp":"-89","max_gts_temp":"-12"},{"id":"1107","terrestrial_date":"2015-11-27","sol":"1176","ls":"73","season":"Month 3","min_temp":"-84","max_temp":"-31","pressure":"890","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:59","sunset":"17:42","local_uv_irradiance_index":"Moderate","min_gts_temp":"-89","max_gts_temp":"-12"},{"id":"1106","terrestrial_date":"2015-11-26","sol":"1175","ls":"73","season":"Month 3","min_temp":"-85","max_temp":"-23","pressure":"890","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:59","sunset":"17:43","local_uv_irradiance_index":"Moderate","min_gts_temp":"-86","max_gts_temp":"-11"},{"id":"1105","terrestrial_date":"2015-11-25","sol":"1174","ls":"72","season":"Month 3","min_temp":"-85","max_temp":"-25","pressure":"891","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:00","sunset":"17:43","local_uv_irradiance_index":"Moderate","min_gts_temp":"-86","max_gts_temp":"-8"},{"id":"1103","terrestrial_date":"2015-11-24","sol":"1173","ls":"72","season":"Month 3","min_temp":"-87","max_temp":"-31","pressure":"892","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:00","sunset":"17:43","local_uv_irradiance_index":"Moderate","min_gts_temp":"-83","max_gts_temp":"-14"},{"id":"1104","terrestrial_date":"2015-11-23","sol":"1172","ls":"71","season":"Month 3","min_temp":"-87","max_temp":"-26","pressure":"892","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:00","sunset":"17:43","local_uv_irradiance_index":"High","min_gts_temp":"-91","max_gts_temp":"-13"},{"id":"1099","terrestrial_date":"2015-11-22","sol":"1171","ls":"71","season":"Month 3","min_temp":"-87","max_temp":"-29","pressure":"892","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:00","sunset":"17:44","local_uv_irradiance_index":"High","min_gts_temp":"-90","max_gts_temp":"-15"},{"id":"1101","terrestrial_date":"2015-11-21","sol":"1170","ls":"71","season":"Month 3","min_temp":"-85","max_temp":"-31","pressure":"893","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:00","sunset":"17:44","local_uv_irradiance_index":"High","min_gts_temp":"-89","max_gts_temp":"-15"},{"id":"1100","terrestrial_date":"2015-11-20","sol":"1169","ls":"70","season":"Month 3","min_temp":"-89","max_temp":"-32","pressure":"894","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:00","sunset":"17:44","local_uv_irradiance_index":"High","min_gts_temp":"-89","max_gts_temp":"-16"},{"id":"1102","terrestrial_date":"2015-11-19","sol":"1168","ls":"70","season":"Month 3","min_temp":"-84","max_temp":"-29","pressure":"894","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:01","sunset":"17:44","local_uv_irradiance_index":"Moderate","min_gts_temp":"-86","max_gts_temp":"-10"},{"id":"1098","terrestrial_date":"2015-11-18","sol":"1167","ls":"69","season":"Month 3","min_temp":"-84","max_temp":"-25","pressure":"894","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:01","sunset":"17:45","local_uv_irradiance_index":"Moderate","min_gts_temp":"-85","max_gts_temp":"-13"},{"id":"1097","terrestrial_date":"2015-11-17","sol":"1166","ls":"69","season":"Month 3","min_temp":"-84","max_temp":"-31","pressure":"895","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:01","sunset":"17:45","local_uv_irradiance_index":"Moderate","min_gts_temp":"-78","max_gts_temp":"-12"},{"id":"1096","terrestrial_date":"2015-11-16","sol":"1165","ls":"68","season":"Month 3","min_temp":"-84","max_temp":"-35","pressure":"897","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:01","sunset":"17:45","local_uv_irradiance_index":"Moderate","min_gts_temp":"-89","max_gts_temp":"-61"},{"id":"1095","terrestrial_date":"2015-11-15","sol":"1164","ls":"68","season":"Month 3","min_temp":"-86","max_temp":"-35","pressure":"896","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:01","sunset":"17:45","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-14"},{"id":"1094","terrestrial_date":"2015-11-14","sol":"1163","ls":"67","season":"Month 3","min_temp":"-86","max_temp":"-29","pressure":"896","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:02","sunset":"17:46","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"-12"},{"id":"1093","terrestrial_date":"2015-11-13","sol":"1162","ls":"67","season":"Month 3","min_temp":"-84","max_temp":"-27","pressure":"897","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:02","sunset":"17:46","local_uv_irradiance_index":"Moderate","min_gts_temp":"-84","max_gts_temp":"-12"},{"id":"1092","terrestrial_date":"2015-11-12","sol":"1161","ls":"66","season":"Month 3","min_temp":"-83","max_temp":"-26","pressure":"898","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:02","sunset":"17:46","local_uv_irradiance_index":"Moderate","min_gts_temp":"-84","max_gts_temp":"-13"},{"id":"1091","terrestrial_date":"2015-11-10","sol":"1160","ls":"66","season":"Month 3","min_temp":"-80","max_temp":"-28","pressure":"899","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:02","sunset":"17:46","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-15"},{"id":"1090","terrestrial_date":"2015-11-09","sol":"1159","ls":"66","season":"Month 3","min_temp":"-82","max_temp":"-28","pressure":"898","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:02","sunset":"17:47","local_uv_irradiance_index":"Moderate","min_gts_temp":"-84","max_gts_temp":"-14"},{"id":"1089","terrestrial_date":"2015-11-08","sol":"1158","ls":"65","season":"Month 3","min_temp":"-82","max_temp":"-28","pressure":"898","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:03","sunset":"17:47","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"-12"},{"id":"1087","terrestrial_date":"2015-11-07","sol":"1157","ls":"65","season":"Month 3","min_temp":"-82","max_temp":"-32","pressure":"900","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:03","sunset":"17:47","local_uv_irradiance_index":"Moderate","min_gts_temp":"-84","max_gts_temp":"-14"},{"id":"1085","terrestrial_date":"2015-11-06","sol":"1156","ls":"64","season":"Month 3","min_temp":"-84","max_temp":"-30","pressure":"900","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:03","sunset":"17:47","local_uv_irradiance_index":"Moderate","min_gts_temp":"-85","max_gts_temp":"-13"},{"id":"1084","terrestrial_date":"2015-11-05","sol":"1155","ls":"64","season":"Month 3","min_temp":"-84","max_temp":"-26","pressure":"900","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:03","sunset":"17:48","local_uv_irradiance_index":"Moderate","min_gts_temp":"-83","max_gts_temp":"-13"},{"id":"1088","terrestrial_date":"2015-11-04","sol":"1154","ls":"63","season":"Month 3","min_temp":"-84","max_temp":"-29","pressure":"900","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:04","sunset":"17:48","local_uv_irradiance_index":"Moderate","min_gts_temp":"-83","max_gts_temp":"-13"},{"id":"1083","terrestrial_date":"2015-11-03","sol":"1153","ls":"63","season":"Month 3","min_temp":"-82","max_temp":"-31","pressure":"900","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:04","sunset":"17:48","local_uv_irradiance_index":"Moderate","min_gts_temp":"-83","max_gts_temp":"-16"},{"id":"1086","terrestrial_date":"2015-11-02","sol":"1152","ls":"62","season":"Month 3","min_temp":"-80","max_temp":"-30","pressure":"901","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:04","sunset":"17:49","local_uv_irradiance_index":"Moderate","min_gts_temp":"-85","max_gts_temp":"-17"},{"id":"1082","terrestrial_date":"2015-11-01","sol":"1151","ls":"62","season":"Month 3","min_temp":"-82","max_temp":"-31","pressure":"901","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:04","sunset":"17:49","local_uv_irradiance_index":"Moderate","min_gts_temp":"-78","max_gts_temp":"-17"},{"id":"1081","terrestrial_date":"2015-10-31","sol":"1150","ls":"62","season":"Month 3","min_temp":"-82","max_temp":"-29","pressure":"902","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:04","sunset":"17:49","local_uv_irradiance_index":"Moderate","min_gts_temp":"-86","max_gts_temp":"-17"},{"id":"1079","terrestrial_date":"2015-10-30","sol":"1149","ls":"61","season":"Month 3","min_temp":"-81","max_temp":"-23","pressure":"902","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:05","sunset":"17:49","local_uv_irradiance_index":"Moderate","min_gts_temp":"-83","max_gts_temp":"-17"},{"id":"1080","terrestrial_date":"2015-10-29","sol":"1148","ls":"61","season":"Month 3","min_temp":"-80","max_temp":"-28","pressure":"901","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:05","sunset":"17:50","local_uv_irradiance_index":"Moderate","min_gts_temp":"-83","max_gts_temp":"-15"},{"id":"1078","terrestrial_date":"2015-10-28","sol":"1147","ls":"60","season":"Month 3","min_temp":"-80","max_temp":"-29","pressure":"901","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:05","sunset":"17:50","local_uv_irradiance_index":"Moderate","min_gts_temp":"-85","max_gts_temp":"-17"},{"id":"1077","terrestrial_date":"2015-10-27","sol":"1146","ls":"60","season":"Month 3","min_temp":"-82","max_temp":"-28","pressure":"902","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:05","sunset":"17:50","local_uv_irradiance_index":"Moderate","min_gts_temp":"-83","max_gts_temp":"-16"},{"id":"1076","terrestrial_date":"2015-10-26","sol":"1145","ls":"59","season":"Month 2","min_temp":"-82","max_temp":"-29","pressure":"903","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:06","sunset":"17:51","local_uv_irradiance_index":"Moderate","min_gts_temp":"-84","max_gts_temp":"-12"},{"id":"1075","terrestrial_date":"2015-10-25","sol":"1144","ls":"59","season":"Month 2","min_temp":"-82","max_temp":"-28","pressure":"902","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:06","sunset":"17:51","local_uv_irradiance_index":"Moderate","min_gts_temp":"-78","max_gts_temp":"-10"},{"id":"1074","terrestrial_date":"2015-10-24","sol":"1143","ls":"58","season":"Month 2","min_temp":"-82","max_temp":"-29","pressure":"901","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:06","sunset":"17:51","local_uv_irradiance_index":"Moderate","min_gts_temp":"-78","max_gts_temp":"-17"},{"id":"1073","terrestrial_date":"2015-10-23","sol":"1142","ls":"58","season":"Month 2","min_temp":"-82","max_temp":"-23","pressure":"902","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:06","sunset":"17:52","local_uv_irradiance_index":"Moderate","min_gts_temp":"-79","max_gts_temp":"-14"},{"id":"1072","terrestrial_date":"2015-10-22","sol":"1141","ls":"57","season":"Month 2","min_temp":"-82","max_temp":"-28","pressure":"902","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:06","sunset":"17:52","local_uv_irradiance_index":"Moderate","min_gts_temp":"-80","max_gts_temp":"-12"},{"id":"1071","terrestrial_date":"2015-10-21","sol":"1140","ls":"57","season":"Month 2","min_temp":"-81","max_temp":"-26","pressure":"901","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:07","sunset":"17:52","local_uv_irradiance_index":"Moderate","min_gts_temp":"-80","max_gts_temp":"-16"},{"id":"1070","terrestrial_date":"2015-10-20","sol":"1139","ls":"57","season":"Month 2","min_temp":"-80","max_temp":"-25","pressure":"901","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:07","sunset":"17:53","local_uv_irradiance_index":"Moderate","min_gts_temp":"-80","max_gts_temp":"-14"},{"id":"1067","terrestrial_date":"2015-10-19","sol":"1138","ls":"56","season":"Month 2","min_temp":"-82","max_temp":"-29","pressure":"901","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:07","sunset":"17:53","local_uv_irradiance_index":"Moderate","min_gts_temp":"-78","max_gts_temp":"-15"},{"id":"1068","terrestrial_date":"2015-10-18","sol":"1137","ls":"56","season":"Month 2","min_temp":"-81","max_temp":"-26","pressure":"901","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:07","sunset":"17:53","local_uv_irradiance_index":"Moderate","min_gts_temp":"-79","max_gts_temp":"-14"},{"id":"1066","terrestrial_date":"2015-10-17","sol":"1136","ls":"55","season":"Month 2","min_temp":"-82","max_temp":"-23","pressure":"901","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:08","sunset":"17:53","local_uv_irradiance_index":"Moderate","min_gts_temp":"-74","max_gts_temp":"-14"},{"id":"1069","terrestrial_date":"2015-10-16","sol":"1135","ls":"55","season":"Month 2","min_temp":"-81","max_temp":"-27","pressure":"901","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:08","sunset":"17:54","local_uv_irradiance_index":"Moderate","min_gts_temp":"-81","max_gts_temp":"-15"},{"id":"1065","terrestrial_date":"2015-10-15","sol":"1134","ls":"54","season":"Month 2","min_temp":"-80","max_temp":"-27","pressure":"902","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:08","sunset":"17:54","local_uv_irradiance_index":"Moderate","min_gts_temp":"-81","max_gts_temp":"-14"},{"id":"1064","terrestrial_date":"2015-10-14","sol":"1133","ls":"54","season":"Month 2","min_temp":"-82","max_temp":"-26","pressure":"902","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:08","sunset":"17:54","local_uv_irradiance_index":"Moderate","min_gts_temp":"-78","max_gts_temp":"-14"},{"id":"1063","terrestrial_date":"2015-10-13","sol":"1132","ls":"53","season":"Month 2","min_temp":"-82","max_temp":"-27","pressure":"902","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:09","sunset":"17:55","local_uv_irradiance_index":"Moderate","min_gts_temp":"-77","max_gts_temp":"-14"},{"id":"1062","terrestrial_date":"2015-10-12","sol":"1131","ls":"53","season":"Month 2","min_temp":"-81","max_temp":"-28","pressure":"902","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:09","sunset":"17:55","local_uv_irradiance_index":"Moderate","min_gts_temp":"-77","max_gts_temp":"-14"},{"id":"1061","terrestrial_date":"2015-10-11","sol":"1130","ls":"53","season":"Month 2","min_temp":"-81","max_temp":"-25","pressure":"902","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:09","sunset":"17:56","local_uv_irradiance_index":"Moderate","min_gts_temp":"-78","max_gts_temp":"-13"},{"id":"1060","terrestrial_date":"2015-10-10","sol":"1129","ls":"52","season":"Month 2","min_temp":"-80","max_temp":"-23","pressure":"902","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:09","sunset":"17:56","local_uv_irradiance_index":"Moderate","min_gts_temp":"-78","max_gts_temp":"-14"},{"id":"1059","terrestrial_date":"2015-10-09","sol":"1128","ls":"52","season":"Month 2","min_temp":"-79","max_temp":"-27","pressure":"902","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:10","sunset":"17:56","local_uv_irradiance_index":"Moderate","min_gts_temp":"-78","max_gts_temp":"-13"},{"id":"1058","terrestrial_date":"2015-10-08","sol":"1127","ls":"51","season":"Month 2","min_temp":"-80","max_temp":"-27","pressure":"901","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:10","sunset":"17:57","local_uv_irradiance_index":"Moderate","min_gts_temp":"-77","max_gts_temp":"-13"},{"id":"1057","terrestrial_date":"2015-10-07","sol":"1126","ls":"51","season":"Month 2","min_temp":"-79","max_temp":"-21","pressure":"901","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:10","sunset":"17:57","local_uv_irradiance_index":"Moderate","min_gts_temp":"-78","max_gts_temp":"-12"},{"id":"1056","terrestrial_date":"2015-10-06","sol":"1125","ls":"50","season":"Month 2","min_temp":"-79","max_temp":"-22","pressure":"900","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:10","sunset":"17:57","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"-13"},{"id":"1055","terrestrial_date":"2015-10-04","sol":"1124","ls":"50","season":"Month 2","min_temp":"-80","max_temp":"-26","pressure":"900","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:11","sunset":"17:58","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"-12"},{"id":"1054","terrestrial_date":"2015-10-03","sol":"1123","ls":"49","season":"Month 2","min_temp":"-79","max_temp":"-27","pressure":"900","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:11","sunset":"17:58","local_uv_irradiance_index":"Moderate","min_gts_temp":"-78","max_gts_temp":"-12"},{"id":"1053","terrestrial_date":"2015-10-02","sol":"1122","ls":"49","season":"Month 2","min_temp":"-79","max_temp":"-26","pressure":"901","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:11","sunset":"17:58","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"-13"},{"id":"1052","terrestrial_date":"2015-10-01","sol":"1121","ls":"48","season":"Month 2","min_temp":"-81","max_temp":"-25","pressure":"901","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:12","sunset":"17:59","local_uv_irradiance_index":"Moderate","min_gts_temp":"-77","max_gts_temp":"-13"},{"id":"1051","terrestrial_date":"2015-09-30","sol":"1120","ls":"48","season":"Month 2","min_temp":"-80","max_temp":"-24","pressure":"900","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:12","sunset":"17:59","local_uv_irradiance_index":"Moderate","min_gts_temp":"-75","max_gts_temp":"-11"},{"id":"1050","terrestrial_date":"2015-09-29","sol":"1119","ls":"48","season":"Month 2","min_temp":"-81","max_temp":"-22","pressure":"899","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:12","sunset":"17:59","local_uv_irradiance_index":"Moderate","min_gts_temp":"-76","max_gts_temp":"-12"},{"id":"1049","terrestrial_date":"2015-09-28","sol":"1118","ls":"47","season":"Month 2","min_temp":"-80","max_temp":"-25","pressure":"898","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:12","sunset":"18:00","local_uv_irradiance_index":"Moderate","min_gts_temp":"-76","max_gts_temp":"-13"},{"id":"1048","terrestrial_date":"2015-09-27","sol":"1117","ls":"47","season":"Month 2","min_temp":"-79","max_temp":"-25","pressure":"898","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:13","sunset":"18:00","local_uv_irradiance_index":"Moderate","min_gts_temp":"-78","max_gts_temp":"-12"},{"id":"1046","terrestrial_date":"2015-09-26","sol":"1116","ls":"46","season":"Month 2","min_temp":"-79","max_temp":"-26","pressure":"898","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:13","sunset":"18:01","local_uv_irradiance_index":"Moderate","min_gts_temp":"-77","max_gts_temp":"-13"},{"id":"1047","terrestrial_date":"2015-09-25","sol":"1115","ls":"46","season":"Month 2","min_temp":"-80","max_temp":"-21","pressure":"897","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:13","sunset":"18:01","local_uv_irradiance_index":"Moderate","min_gts_temp":"-76","max_gts_temp":"-11"},{"id":"1045","terrestrial_date":"2015-09-24","sol":"1114","ls":"45","season":"Month 2","min_temp":"-79","max_temp":"-25","pressure":"896","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:13","sunset":"18:01","local_uv_irradiance_index":"Moderate","min_gts_temp":"-75","max_gts_temp":"-12"},{"id":"1044","terrestrial_date":"2015-09-23","sol":"1113","ls":"45","season":"Month 2","min_temp":"-79","max_temp":"-24","pressure":"895","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:14","sunset":"18:02","local_uv_irradiance_index":"Moderate","min_gts_temp":"-74","max_gts_temp":"-12"},{"id":"1043","terrestrial_date":"2015-09-22","sol":"1112","ls":"44","season":"Month 2","min_temp":"-80","max_temp":"-24","pressure":"895","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:14","sunset":"18:02","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"-10"},{"id":"1042","terrestrial_date":"2015-09-21","sol":"1111","ls":"44","season":"Month 2","min_temp":"-79","max_temp":"-26","pressure":"896","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:14","sunset":"18:02","local_uv_irradiance_index":"High","min_gts_temp":"-79","max_gts_temp":"-13"},{"id":"1041","terrestrial_date":"2015-09-20","sol":"1110","ls":"43","season":"Month 2","min_temp":"-81","max_temp":"-25","pressure":"895","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:15","sunset":"18:03","local_uv_irradiance_index":"Moderate","min_gts_temp":"-82","max_gts_temp":"-8"},{"id":"1039","terrestrial_date":"2015-09-19","sol":"1109","ls":"43","season":"Month 2","min_temp":"-82","max_temp":"-26","pressure":"895","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:15","sunset":"18:03","local_uv_irradiance_index":"Moderate","min_gts_temp":"-79","max_gts_temp":"-7"},{"id":"1038","terrestrial_date":"2015-09-18","sol":"1108","ls":"42","season":"Month 2","min_temp":"-78","max_temp":"-25","pressure":"895","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:15","sunset":"18:04","local_uv_irradiance_index":"Moderate","min_gts_temp":"-81","max_gts_temp":"-6"},{"id":"1040","terrestrial_date":"2015-09-17","sol":"1107","ls":"42","season":"Month 2","min_temp":"-79","max_temp":"-24","pressure":"893","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:15","sunset":"18:04","local_uv_irradiance_index":"Moderate","min_gts_temp":"-80","max_gts_temp":"-7"},{"id":"1037","terrestrial_date":"2015-09-16","sol":"1106","ls":"42","season":"Month 2","min_temp":"-82","max_temp":"-22","pressure":"893","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:16","sunset":"18:04","local_uv_irradiance_index":"Moderate","min_gts_temp":"-82","max_gts_temp":"-8"},{"id":"1036","terrestrial_date":"2015-09-15","sol":"1105","ls":"41","season":"Month 2","min_temp":"-78","max_temp":"-25","pressure":"892","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:16","sunset":"18:05","local_uv_irradiance_index":"Moderate","min_gts_temp":"-83","max_gts_temp":"-9"},{"id":"1035","terrestrial_date":"2015-09-14","sol":"1104","ls":"41","season":"Month 2","min_temp":"-79","max_temp":"-25","pressure":"893","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:16","sunset":"18:05","local_uv_irradiance_index":"Moderate","min_gts_temp":"-84","max_gts_temp":"-6"},{"id":"1033","terrestrial_date":"2015-09-13","sol":"1103","ls":"40","season":"Month 2","min_temp":"-81","max_temp":"-26","pressure":"893","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:17","sunset":"18:06","local_uv_irradiance_index":"Moderate","min_gts_temp":"-81","max_gts_temp":"-5"},{"id":"1032","terrestrial_date":"2015-09-12","sol":"1102","ls":"40","season":"Month 2","min_temp":"-84","max_temp":"-25","pressure":"892","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:17","sunset":"18:06","local_uv_irradiance_index":"Moderate","min_gts_temp":"-83","max_gts_temp":"-6"},{"id":"1034","terrestrial_date":"2015-09-11","sol":"1101","ls":"39","season":"Month 2","min_temp":"-80","max_temp":"-23","pressure":"891","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:17","sunset":"18:06","local_uv_irradiance_index":"Moderate","min_gts_temp":"-81","max_gts_temp":"-4"},{"id":"1031","terrestrial_date":"2015-09-10","sol":"1100","ls":"39","season":"Month 2","min_temp":"-79","max_temp":"-22","pressure":"890","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:17","sunset":"18:07","local_uv_irradiance_index":"Moderate","min_gts_temp":"-85","max_gts_temp":"-8"},{"id":"1030","terrestrial_date":"2015-09-09","sol":"1099","ls":"38","season":"Month 2","min_temp":"-78","max_temp":"-24","pressure":"891","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:18","sunset":"18:07","local_uv_irradiance_index":"Moderate","min_gts_temp":"-80","max_gts_temp":"-7"},{"id":"1029","terrestrial_date":"2015-09-08","sol":"1098","ls":"38","season":"Month 2","min_temp":"-77","max_temp":"-26","pressure":"890","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:18","sunset":"18:08","local_uv_irradiance_index":"Moderate","min_gts_temp":"-79","max_gts_temp":"-10"},{"id":"1028","terrestrial_date":"2015-09-07","sol":"1097","ls":"37","season":"Month 2","min_temp":"-78","max_temp":"-27","pressure":"889","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:18","sunset":"18:08","local_uv_irradiance_index":"Moderate","min_gts_temp":"-79","max_gts_temp":"-8"},{"id":"1025","terrestrial_date":"2015-09-06","sol":"1096","ls":"37","season":"Month 2","min_temp":"-79","max_temp":"-24","pressure":"888","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:19","sunset":"18:08","local_uv_irradiance_index":"Moderate","min_gts_temp":"-78","max_gts_temp":"-7"},{"id":"1027","terrestrial_date":"2015-09-05","sol":"1095","ls":"36","season":"Month 2","min_temp":"-79","max_temp":"-24","pressure":"888","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:19","sunset":"18:09","local_uv_irradiance_index":"Moderate","min_gts_temp":"-77","max_gts_temp":"-8"},{"id":"1026","terrestrial_date":"2015-09-04","sol":"1094","ls":"36","season":"Month 2","min_temp":"-80","max_temp":"-20","pressure":"888","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:19","sunset":"18:09","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"-7"},{"id":"1024","terrestrial_date":"2015-09-03","sol":"1093","ls":"36","season":"Month 2","min_temp":"-77","max_temp":"-21","pressure":"887","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:20","sunset":"18:10","local_uv_irradiance_index":"High","min_gts_temp":"-79","max_gts_temp":"-4"},{"id":"1023","terrestrial_date":"2015-09-02","sol":"1092","ls":"35","season":"Month 2","min_temp":"-79","max_temp":"-23","pressure":"886","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:20","sunset":"18:10","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"-8"},{"id":"1022","terrestrial_date":"2015-09-01","sol":"1091","ls":"35","season":"Month 2","min_temp":"-77","max_temp":"-21","pressure":"886","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:20","sunset":"18:10","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"-7"},{"id":"1021","terrestrial_date":"2015-08-31","sol":"1090","ls":"34","season":"Month 2","min_temp":"-78","max_temp":"-20","pressure":"886","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:20","sunset":"18:11","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"-6"},{"id":"1018","terrestrial_date":"2015-08-30","sol":"1089","ls":"34","season":"Month 2","min_temp":"-76","max_temp":"-19","pressure":"885","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:21","sunset":"18:11","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"-7"},{"id":"1020","terrestrial_date":"2015-08-29","sol":"1088","ls":"33","season":"Month 2","min_temp":"-77","max_temp":"-19","pressure":"885","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:21","sunset":"18:12","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"-7"},{"id":"1019","terrestrial_date":"2015-08-27","sol":"1087","ls":"33","season":"Month 2","min_temp":"-78","max_temp":"-19","pressure":"885","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:21","sunset":"18:12","local_uv_irradiance_index":"High","min_gts_temp":"-83","max_gts_temp":"-3"},{"id":"1016","terrestrial_date":"2015-08-26","sol":"1086","ls":"32","season":"Month 2","min_temp":"-77","max_temp":"-25","pressure":"885","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:22","sunset":"18:13","local_uv_irradiance_index":"High","min_gts_temp":"-82","max_gts_temp":"-2"},{"id":"1017","terrestrial_date":"2015-08-25","sol":"1085","ls":"32","season":"Month 2","min_temp":"-79","max_temp":"-23","pressure":"886","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:22","sunset":"18:13","local_uv_irradiance_index":"Moderate","min_gts_temp":"-78","max_gts_temp":"-10"},{"id":"1015","terrestrial_date":"2015-08-24","sol":"1084","ls":"31","season":"Month 2","min_temp":"-78","max_temp":"-22","pressure":"885","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:22","sunset":"18:13","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"-9"},{"id":"1014","terrestrial_date":"2015-08-23","sol":"1083","ls":"31","season":"Month 2","min_temp":"-80","max_temp":"-20","pressure":"883","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:23","sunset":"18:14","local_uv_irradiance_index":"Moderate","min_gts_temp":"-80","max_gts_temp":"-7"},{"id":"1012","terrestrial_date":"2015-08-22","sol":"1082","ls":"30","season":"Month 2","min_temp":"-79","max_temp":"-17","pressure":"882","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:23","sunset":"18:14","local_uv_irradiance_index":"Moderate","min_gts_temp":"-81","max_gts_temp":"-7"},{"id":"1011","terrestrial_date":"2015-08-21","sol":"1081","ls":"30","season":"Month 2","min_temp":"-77","max_temp":"-18","pressure":"882","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:23","sunset":"18:15","local_uv_irradiance_index":"Moderate","min_gts_temp":"-82","max_gts_temp":"-7"},{"id":"1013","terrestrial_date":"2015-08-20","sol":"1080","ls":"29","season":"Month 1","min_temp":"-77","max_temp":"-17","pressure":"882","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:23","sunset":"18:15","local_uv_irradiance_index":"Moderate","min_gts_temp":"-84","max_gts_temp":"-3"},{"id":"1010","terrestrial_date":"2015-08-19","sol":"1079","ls":"29","season":"Month 1","min_temp":"-80","max_temp":"-21","pressure":"882","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:24","sunset":"18:16","local_uv_irradiance_index":"Moderate","min_gts_temp":"-83","max_gts_temp":"-3"},{"id":"1009","terrestrial_date":"2015-08-18","sol":"1078","ls":"29","season":"Month 1","min_temp":"-80","max_temp":"-18","pressure":"881","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:24","sunset":"18:16","local_uv_irradiance_index":"Moderate","min_gts_temp":"-82","max_gts_temp":"1"},{"id":"1008","terrestrial_date":"2015-08-17","sol":"1077","ls":"28","season":"Month 1","min_temp":"-79","max_temp":"-16","pressure":"880","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:24","sunset":"18:16","local_uv_irradiance_index":"Moderate","min_gts_temp":"-81","max_gts_temp":"-2"},{"id":"1007","terrestrial_date":"2015-08-16","sol":"1076","ls":"28","season":"Month 1","min_temp":"-81","max_temp":"-14","pressure":"880","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:25","sunset":"18:17","local_uv_irradiance_index":"Moderate","min_gts_temp":"-81","max_gts_temp":"-1"},{"id":"1006","terrestrial_date":"2015-08-15","sol":"1075","ls":"27","season":"Month 1","min_temp":"-77","max_temp":"-13","pressure":"879","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:25","sunset":"18:17","local_uv_irradiance_index":"Moderate","min_gts_temp":"-82","max_gts_temp":"-3"},{"id":"1005","terrestrial_date":"2015-08-14","sol":"1074","ls":"27","season":"Month 1","min_temp":"-77","max_temp":"-14","pressure":"878","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:25","sunset":"18:18","local_uv_irradiance_index":"High","min_gts_temp":"-87","max_gts_temp":"-2"},{"id":"1004","terrestrial_date":"2015-08-13","sol":"1073","ls":"26","season":"Month 1","min_temp":"-82","max_temp":"-15","pressure":"879","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:26","sunset":"18:18","local_uv_irradiance_index":"Moderate","min_gts_temp":"-77","max_gts_temp":"1"},{"id":"1003","terrestrial_date":"2015-08-12","sol":"1072","ls":"26","season":"Month 1","min_temp":"-78","max_temp":"-15","pressure":"879","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:26","sunset":"18:19","local_uv_irradiance_index":"High","min_gts_temp":"-79","max_gts_temp":"2"},{"id":"1002","terrestrial_date":"2015-08-11","sol":"1071","ls":"25","season":"Month 1","min_temp":"-78","max_temp":"-16","pressure":"878","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:26","sunset":"18:19","local_uv_irradiance_index":"High","min_gts_temp":"-68","max_gts_temp":"-4"},{"id":"1001","terrestrial_date":"2015-08-10","sol":"1070","ls":"25","season":"Month 1","min_temp":"-80","max_temp":"-14","pressure":"877","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:27","sunset":"18:19","local_uv_irradiance_index":"High","min_gts_temp":"-26","max_gts_temp":"-5"},{"id":"999","terrestrial_date":"2015-08-09","sol":"1069","ls":"24","season":"Month 1","min_temp":"-77","max_temp":"-22","pressure":"876","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:27","sunset":"18:20","local_uv_irradiance_index":"High","min_gts_temp":"-79","max_gts_temp":"-4"},{"id":"1000","terrestrial_date":"2015-08-08","sol":"1068","ls":"24","season":"Month 1","min_temp":"-76","max_temp":"-23","pressure":"874","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:27","sunset":"18:20","local_uv_irradiance_index":"High","min_gts_temp":"-82","max_gts_temp":"-3"},{"id":"998","terrestrial_date":"2015-08-07","sol":"1067","ls":"23","season":"Month 1","min_temp":"-79","max_temp":"-24","pressure":"875","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:27","sunset":"18:21","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"1"},{"id":"997","terrestrial_date":"2015-08-06","sol":"1066","ls":"23","season":"Month 1","min_temp":"-78","max_temp":"-14","pressure":"875","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:28","sunset":"18:21","local_uv_irradiance_index":"High","min_gts_temp":"-79","max_gts_temp":"0"},{"id":"995","terrestrial_date":"2015-08-05","sol":"1065","ls":"22","season":"Month 1","min_temp":"-78","max_temp":"-19","pressure":"873","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:28","sunset":"18:22","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"2"},{"id":"996","terrestrial_date":"2015-08-04","sol":"1064","ls":"22","season":"Month 1","min_temp":"-77","max_temp":"-22","pressure":"871","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:28","sunset":"18:22","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"2"},{"id":"994","terrestrial_date":"2015-08-03","sol":"1063","ls":"21","season":"Month 1","min_temp":"-79","max_temp":"-19","pressure":"871","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:29","sunset":"18:22","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"1"},{"id":"991","terrestrial_date":"2015-08-02","sol":"1062","ls":"21","season":"Month 1","min_temp":"-77","max_temp":"-24","pressure":"871","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:29","sunset":"18:23","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"2"},{"id":"993","terrestrial_date":"2015-08-01","sol":"1061","ls":"20","season":"Month 1","min_temp":"-77","max_temp":"-23","pressure":"871","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:29","sunset":"18:23","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"3"},{"id":"992","terrestrial_date":"2015-07-31","sol":"1060","ls":"20","season":"Month 1","min_temp":"-78","max_temp":"-16","pressure":"870","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:30","sunset":"18:24","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"2"},{"id":"990","terrestrial_date":"2015-07-30","sol":"1059","ls":"19","season":"Month 1","min_temp":"-78","max_temp":"-20","pressure":"870","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:30","sunset":"18:24","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"2"},{"id":"989","terrestrial_date":"2015-07-29","sol":"1058","ls":"19","season":"Month 1","min_temp":"-78","max_temp":"-22","pressure":"868","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:30","sunset":"18:25","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"1"},{"id":"988","terrestrial_date":"2015-07-28","sol":"1057","ls":"18","season":"Month 1","min_temp":"-78","max_temp":"-22","pressure":"867","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:30","sunset":"18:25","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"2"},{"id":"986","terrestrial_date":"2015-07-27","sol":"1056","ls":"18","season":"Month 1","min_temp":"-76","max_temp":"-21","pressure":"868","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:31","sunset":"18:25","local_uv_irradiance_index":"High","min_gts_temp":"-91","max_gts_temp":"4"},{"id":"987","terrestrial_date":"2015-07-26","sol":"1055","ls":"17","season":"Month 1","min_temp":"-77","max_temp":"-20","pressure":"868","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:31","sunset":"18:26","local_uv_irradiance_index":"High","min_gts_temp":"-90","max_gts_temp":"6"},{"id":"985","terrestrial_date":"2015-07-25","sol":"1054","ls":"17","season":"Month 1","min_temp":"-77","max_temp":"-11","pressure":"867","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:31","sunset":"18:26","local_uv_irradiance_index":"High","min_gts_temp":"-89","max_gts_temp":"6"},{"id":"984","terrestrial_date":"2015-07-24","sol":"1053","ls":"17","season":"Month 1","min_temp":"-79","max_temp":"-11","pressure":"865","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:32","sunset":"18:27","local_uv_irradiance_index":"High","min_gts_temp":"-84","max_gts_temp":"8"},{"id":"982","terrestrial_date":"2015-07-23","sol":"1052","ls":"16","season":"Month 1","min_temp":"-78","max_temp":"-12","pressure":"865","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:32","sunset":"18:27","local_uv_irradiance_index":"High","min_gts_temp":"-84","max_gts_temp":"1"},{"id":"983","terrestrial_date":"2015-07-21","sol":"1051","ls":"16","season":"Month 1","min_temp":"-76","max_temp":"-20","pressure":"864","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:32","sunset":"18:28","local_uv_irradiance_index":"High","min_gts_temp":"-91","max_gts_temp":"4"},{"id":"981","terrestrial_date":"2015-07-20","sol":"1050","ls":"15","season":"Month 1","min_temp":"-76","max_temp":"-22","pressure":"863","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:33","sunset":"18:28","local_uv_irradiance_index":"High","min_gts_temp":"-92","max_gts_temp":"6"},{"id":"980","terrestrial_date":"2015-07-19","sol":"1049","ls":"15","season":"Month 1","min_temp":"-75","max_temp":"-21","pressure":"864","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:33","sunset":"18:28","local_uv_irradiance_index":"High","min_gts_temp":"-83","max_gts_temp":"5"},{"id":"976","terrestrial_date":"2015-07-18","sol":"1048","ls":"14","season":"Month 1","min_temp":"-78","max_temp":"-15","pressure":"864","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:33","sunset":"18:29","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"2"},{"id":"977","terrestrial_date":"2015-07-17","sol":"1047","ls":"14","season":"Month 1","min_temp":"-77","max_temp":"-14","pressure":"863","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:33","sunset":"18:29","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"2"},{"id":"979","terrestrial_date":"2015-07-16","sol":"1046","ls":"13","season":"Month 1","min_temp":"-77","max_temp":"-12","pressure":"862","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:34","sunset":"18:30","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"2"},{"id":"978","terrestrial_date":"2015-07-15","sol":"1045","ls":"13","season":"Month 1","min_temp":"-80","max_temp":"-13","pressure":"861","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:34","sunset":"18:30","local_uv_irradiance_index":"High","min_gts_temp":"-82","max_gts_temp":"1"},{"id":"975","terrestrial_date":"2015-07-14","sol":"1044","ls":"12","season":"Month 1","min_temp":"-79","max_temp":"-20","pressure":"860","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:34","sunset":"18:31","local_uv_irradiance_index":"Moderate","min_gts_temp":"-76","max_gts_temp":"-3"},{"id":"974","terrestrial_date":"2015-07-13","sol":"1043","ls":"12","season":"Month 1","min_temp":"-77","max_temp":"-20","pressure":"860","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:35","sunset":"18:31","local_uv_irradiance_index":"Moderate","min_gts_temp":"-76","max_gts_temp":"-3"},{"id":"973","terrestrial_date":"2015-07-12","sol":"1042","ls":"11","season":"Month 1","min_temp":"-76","max_temp":"-20","pressure":"859","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:35","sunset":"18:31","local_uv_irradiance_index":"Moderate","min_gts_temp":"-83","max_gts_temp":"-4"},{"id":"971","terrestrial_date":"2015-07-11","sol":"1041","ls":"11","season":"Month 1","min_temp":"-77","max_temp":"-22","pressure":"859","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:35","sunset":"18:32","local_uv_irradiance_index":"High","min_gts_temp":"-83","max_gts_temp":"0"},{"id":"972","terrestrial_date":"2015-07-10","sol":"1040","ls":"10","season":"Month 1","min_temp":"-77","max_temp":"-21","pressure":"858","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:35","sunset":"18:32","local_uv_irradiance_index":"High","min_gts_temp":"-82","max_gts_temp":"0"},{"id":"970","terrestrial_date":"2015-07-09","sol":"1039","ls":"10","season":"Month 1","min_temp":"-77","max_temp":"-21","pressure":"857","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:36","sunset":"18:33","local_uv_irradiance_index":"High","min_gts_temp":"-84","max_gts_temp":"-1"},{"id":"969","terrestrial_date":"2015-07-08","sol":"1038","ls":"9","season":"Month 1","min_temp":"-76","max_temp":"-21","pressure":"858","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:36","sunset":"18:33","local_uv_irradiance_index":"High","min_gts_temp":"-84","max_gts_temp":"-1"},{"id":"968","terrestrial_date":"2015-07-07","sol":"1037","ls":"9","season":"Month 1","min_temp":"-80","max_temp":"-21","pressure":"856","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:36","sunset":"18:33","local_uv_irradiance_index":"High","min_gts_temp":"-84","max_gts_temp":"-1"},{"id":"967","terrestrial_date":"2015-07-06","sol":"1036","ls":"8","season":"Month 1","min_temp":"-76","max_temp":"-17","pressure":"856","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:36","sunset":"18:34","local_uv_irradiance_index":"High","min_gts_temp":"-82","max_gts_temp":"4"},{"id":"966","terrestrial_date":"2015-07-05","sol":"1035","ls":"8","season":"Month 1","min_temp":"-77","max_temp":"-12","pressure":"857","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:37","sunset":"18:34","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"6"},{"id":"964","terrestrial_date":"2015-07-04","sol":"1034","ls":"7","season":"Month 1","min_temp":"-76","max_temp":"-14","pressure":"859","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:37","sunset":"18:35","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"-1"},{"id":"965","terrestrial_date":"2015-07-03","sol":"1033","ls":"7","season":"Month 1","min_temp":"-77","max_temp":"-14","pressure":"856","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:37","sunset":"18:35","local_uv_irradiance_index":"High","min_gts_temp":"-79","max_gts_temp":"-2"},{"id":"962","terrestrial_date":"2015-07-02","sol":"1032","ls":"6","season":"Month 1","min_temp":"-74","max_temp":"-16","pressure":"854","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:38","sunset":"18:35","local_uv_irradiance_index":"High","min_gts_temp":"-79","max_gts_temp":"0"},{"id":"963","terrestrial_date":"2015-07-01","sol":"1031","ls":"6","season":"Month 1","min_temp":"-76","max_temp":"-15","pressure":"854","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:38","sunset":"18:36","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"0"},{"id":"961","terrestrial_date":"2015-06-30","sol":"1030","ls":"5","season":"Month 1","min_temp":"-77","max_temp":"-15","pressure":"855","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:38","sunset":"18:36","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"-1"},{"id":"959","terrestrial_date":"2015-06-29","sol":"1029","ls":"5","season":"Month 1","min_temp":"-75","max_temp":"-14","pressure":"856","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:38","sunset":"18:37","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"-2"},{"id":"960","terrestrial_date":"2015-06-28","sol":"1028","ls":"4","season":"Month 1","min_temp":"-75","max_temp":"-15","pressure":"853","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:39","sunset":"18:37","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"-2"},{"id":"957","terrestrial_date":"2015-06-26","sol":"1026","ls":"3","season":"Month 1","min_temp":"-78","max_temp":"-16","pressure":"851","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:39","sunset":"18:38","local_uv_irradiance_index":"Low","min_gts_temp":"-78","max_gts_temp":"-1"},{"id":"958","terrestrial_date":"2015-06-25","sol":"1025","ls":"3","season":"Month 1","min_temp":"-74","max_temp":"-14","pressure":"851","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:39","sunset":"18:38","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"-1"},{"id":"945","terrestrial_date":"2015-06-24","sol":"1024","ls":"2","season":"Month 1","min_temp":"-76","max_temp":"-15","pressure":"851","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:40","sunset":"18:39","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"-1"},{"id":"943","terrestrial_date":"2015-06-23","sol":"1023","ls":"2","season":"Month 1","min_temp":"-76","max_temp":"-15","pressure":"851","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:40","sunset":"18:39","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"-1"},{"id":"944","terrestrial_date":"2015-06-22","sol":"1022","ls":"1","season":"Month 1","min_temp":"-75","max_temp":"-12","pressure":"852","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:40","sunset":"18:39","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"-2"},{"id":"942","terrestrial_date":"2015-06-21","sol":"1021","ls":"1","season":"Month 1","min_temp":"-76","max_temp":"-14","pressure":"850","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:40","sunset":"18:40","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"-1"},{"id":"938","terrestrial_date":"2015-06-20","sol":"1020","ls":"0","season":"Month 1","min_temp":"-63","max_temp":"-12","pressure":"832","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:41","sunset":"18:40","local_uv_irradiance_index":"High","min_gts_temp":"-65","max_gts_temp":"1"},{"id":"954","terrestrial_date":"2015-06-19","sol":"1019","ls":"0","season":"Month 1","min_temp":"-81","max_temp":"-14","pressure":"849","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:41","sunset":"18:41","local_uv_irradiance_index":"Moderate","min_gts_temp":"-78","max_gts_temp":"-2"},{"id":"956","terrestrial_date":"2015-06-18","sol":"1018","ls":"359","season":"Month 12","min_temp":"-79","max_temp":"-15","pressure":"850","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:41","sunset":"18:41","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"-1"},{"id":"955","terrestrial_date":"2015-06-17","sol":"1017","ls":"359","season":"Month 12","min_temp":"-78","max_temp":"-12","pressure":"850","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:41","sunset":"18:41","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"-1"},{"id":"952","terrestrial_date":"2015-06-16","sol":"1016","ls":"358","season":"Month 12","min_temp":"-76","max_temp":"-11","pressure":"847","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:41","sunset":"18:42","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"0"},{"id":"951","terrestrial_date":"2015-06-14","sol":"1015","ls":"357","season":"Month 12","min_temp":"-75","max_temp":"-13","pressure":"847","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:42","sunset":"18:42","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"1"},{"id":"950","terrestrial_date":"2015-06-13","sol":"1014","ls":"357","season":"Month 12","min_temp":"-77","max_temp":"-14","pressure":"846","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:42","sunset":"18:42","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"0"},{"id":"953","terrestrial_date":"2015-06-12","sol":"1013","ls":"356","season":"Month 12","min_temp":"-80","max_temp":"-12","pressure":"846","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:42","sunset":"18:43","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"0"},{"id":"949","terrestrial_date":"2015-06-11","sol":"1012","ls":"356","season":"Month 12","min_temp":"-81","max_temp":"-16","pressure":"846","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:42","sunset":"18:43","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"-1"},{"id":"948","terrestrial_date":"2015-06-10","sol":"1011","ls":"355","season":"Month 12","min_temp":"-78","max_temp":"-12","pressure":"845","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:42","sunset":"18:43","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"0"},{"id":"947","terrestrial_date":"2015-06-09","sol":"1010","ls":"355","season":"Month 12","min_temp":"-74","max_temp":"-11","pressure":"846","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:43","sunset":"18:44","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"-1"},{"id":"946","terrestrial_date":"2015-06-08","sol":"1009","ls":"354","season":"Month 12","min_temp":"-75","max_temp":"-12","pressure":"845","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:43","sunset":"18:44","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"1"},{"id":"940","terrestrial_date":"2015-06-07","sol":"1008","ls":"354","season":"Month 12","min_temp":"-79","max_temp":"-12","pressure":"844","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:43","sunset":"18:44","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"2"},{"id":"937","terrestrial_date":"2015-06-06","sol":"1007","ls":"353","season":"Month 12","min_temp":"-79","max_temp":"-12","pressure":"845","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:43","sunset":"18:45","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"1"},{"id":"941","terrestrial_date":"2015-06-05","sol":"1006","ls":"353","season":"Month 12","min_temp":"-78","max_temp":"-13","pressure":"844","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:43","sunset":"18:45","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"0"},{"id":"939","terrestrial_date":"2015-06-04","sol":"1005","ls":"352","season":"Month 12","min_temp":"-75","max_temp":"-12","pressure":"843","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:44","sunset":"18:45","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"1"},{"id":"935","terrestrial_date":"2015-06-03","sol":"1004","ls":"352","season":"Month 12","min_temp":"-74","max_temp":"-9","pressure":"842","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:44","sunset":"18:46","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"1"},{"id":"934","terrestrial_date":"2015-06-02","sol":"1003","ls":"351","season":"Month 12","min_temp":"-74","max_temp":"-10","pressure":"843","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:44","sunset":"18:46","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"1"},{"id":"936","terrestrial_date":"2015-06-01","sol":"1002","ls":"351","season":"Month 12","min_temp":"-77","max_temp":"-12","pressure":"844","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:44","sunset":"18:46","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"1"},{"id":"933","terrestrial_date":"2015-05-31","sol":"1001","ls":"350","season":"Month 12","min_temp":"-79","max_temp":"-12","pressure":"843","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:44","sunset":"18:47","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"2"},{"id":"932","terrestrial_date":"2015-05-30","sol":"1000","ls":"350","season":"Month 12","min_temp":"-74","max_temp":"-12","pressure":"841","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:44","sunset":"18:47","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"1"},{"id":"931","terrestrial_date":"2015-05-28","sol":"998","ls":"349","season":"Month 12","min_temp":"-73","max_temp":"-8","pressure":"842","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:48","local_uv_irradiance_index":"High","min_gts_temp":"-74","max_gts_temp":"1"},{"id":"930","terrestrial_date":"2015-05-27","sol":"997","ls":"348","season":"Month 12","min_temp":"-74","max_temp":"-13","pressure":"843","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:48","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"1"},{"id":"928","terrestrial_date":"2015-05-26","sol":"996","ls":"348","season":"Month 12","min_temp":"-72","max_temp":"-4","pressure":"842","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:48","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"2"},{"id":"929","terrestrial_date":"2015-05-25","sol":"995","ls":"347","season":"Month 12","min_temp":"-74","max_temp":"-4","pressure":"842","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:48","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"5"},{"id":"925","terrestrial_date":"2015-05-24","sol":"994","ls":"346","season":"Month 12","min_temp":"-79","max_temp":"-5","pressure":"842","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:49","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"3"},{"id":"927","terrestrial_date":"2015-05-23","sol":"993","ls":"346","season":"Month 12","min_temp":"-73","max_temp":"-8","pressure":"840","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:49","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"3"},{"id":"924","terrestrial_date":"2015-05-22","sol":"992","ls":"345","season":"Month 12","min_temp":"-73","max_temp":"-6","pressure":"842","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:49","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"4"},{"id":"926","terrestrial_date":"2015-05-21","sol":"991","ls":"345","season":"Month 12","min_temp":"-73","max_temp":"-3","pressure":"840","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:49","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"4"},{"id":"923","terrestrial_date":"2015-05-20","sol":"990","ls":"344","season":"Month 12","min_temp":"-76","max_temp":"-1","pressure":"839","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:50","local_uv_irradiance_index":"High","min_gts_temp":"-79","max_gts_temp":"9"},{"id":"921","terrestrial_date":"2015-05-19","sol":"989","ls":"344","season":"Month 12","min_temp":"-74","max_temp":"-10","pressure":"841","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:50","local_uv_irradiance_index":"Moderate","min_gts_temp":"-79","max_gts_temp":"9"},{"id":"922","terrestrial_date":"2015-05-18","sol":"988","ls":"343","season":"Month 12","min_temp":"-75","max_temp":"-10","pressure":"840","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:50","local_uv_irradiance_index":"Moderate","min_gts_temp":"-77","max_gts_temp":"8"},{"id":"920","terrestrial_date":"2015-05-17","sol":"987","ls":"343","season":"Month 12","min_temp":"-74","max_temp":"-7","pressure":"839","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:50","local_uv_irradiance_index":"Moderate","min_gts_temp":"-77","max_gts_temp":"9"},{"id":"919","terrestrial_date":"2015-05-16","sol":"986","ls":"342","season":"Month 12","min_temp":"-74","max_temp":"-1","pressure":"840","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:51","local_uv_irradiance_index":"Moderate","min_gts_temp":"-79","max_gts_temp":"9"},{"id":"918","terrestrial_date":"2015-05-15","sol":"985","ls":"342","season":"Month 12","min_temp":"-78","max_temp":"-5","pressure":"840","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:51","local_uv_irradiance_index":"Moderate","min_gts_temp":"-81","max_gts_temp":"9"},{"id":"915","terrestrial_date":"2015-05-14","sol":"984","ls":"341","season":"Month 12","min_temp":"-74","max_temp":"-6","pressure":"840","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:51","local_uv_irradiance_index":"Moderate","min_gts_temp":"-83","max_gts_temp":"11"},{"id":"916","terrestrial_date":"2015-05-13","sol":"983","ls":"340","season":"Month 12","min_temp":"-76","max_temp":"-6","pressure":"840","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:51","local_uv_irradiance_index":"Moderate","min_gts_temp":"-77","max_gts_temp":"12"},{"id":"917","terrestrial_date":"2015-05-12","sol":"982","ls":"340","season":"Month 12","min_temp":"-74","max_temp":"-4","pressure":"840","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:52","local_uv_irradiance_index":"Moderate","min_gts_temp":"-76","max_gts_temp":"7"},{"id":"914","terrestrial_date":"2015-05-11","sol":"981","ls":"339","season":"Month 12","min_temp":"-73","max_temp":"-3","pressure":"841","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:52","local_uv_irradiance_index":"Moderate","min_gts_temp":"-78","max_gts_temp":"8"},{"id":"911","terrestrial_date":"2015-05-10","sol":"980","ls":"339","season":"Month 12","min_temp":"-73","max_temp":"1","pressure":"840","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:52","local_uv_irradiance_index":"Moderate","min_gts_temp":"-78","max_gts_temp":"11"},{"id":"912","terrestrial_date":"2015-05-09","sol":"979","ls":"338","season":"Month 12","min_temp":"-79","max_temp":"-4","pressure":"841","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:52","local_uv_irradiance_index":"Moderate","min_gts_temp":"-80","max_gts_temp":"11"},{"id":"913","terrestrial_date":"2015-05-07","sol":"978","ls":"338","season":"Month 12","min_temp":"-73","max_temp":"-2","pressure":"842","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:52","local_uv_irradiance_index":"Moderate","min_gts_temp":"-78","max_gts_temp":"10"},{"id":"910","terrestrial_date":"2015-05-06","sol":"977","ls":"337","season":"Month 12","min_temp":"-75","max_temp":"-4","pressure":"841","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:53","local_uv_irradiance_index":"Moderate","min_gts_temp":"-77","max_gts_temp":"10"},{"id":"909","terrestrial_date":"2015-05-05","sol":"976","ls":"337","season":"Month 12","min_temp":"-75","max_temp":"-6","pressure":"842","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:53","local_uv_irradiance_index":"Moderate","min_gts_temp":"-77","max_gts_temp":"10"},{"id":"908","terrestrial_date":"2015-05-04","sol":"975","ls":"336","season":"Month 12","min_temp":"-73","max_temp":"-3","pressure":"843","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:53","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"14"},{"id":"907","terrestrial_date":"2015-05-03","sol":"974","ls":"336","season":"Month 12","min_temp":"-73","max_temp":"-3","pressure":"842","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:53","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"14"},{"id":"905","terrestrial_date":"2015-05-02","sol":"973","ls":"335","season":"Month 12","min_temp":"-72","max_temp":"-4","pressure":"844","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:53","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"16"},{"id":"904","terrestrial_date":"2015-05-01","sol":"972","ls":"334","season":"Month 12","min_temp":"-73","max_temp":"-3","pressure":"847","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:53","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"14"},{"id":"906","terrestrial_date":"2015-04-30","sol":"971","ls":"334","season":"Month 12","min_temp":"-71","max_temp":"-3","pressure":"848","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:54","local_uv_irradiance_index":"Moderate","min_gts_temp":"-76","max_gts_temp":"14"},{"id":"903","terrestrial_date":"2015-04-29","sol":"970","ls":"333","season":"Month 12","min_temp":"-71","max_temp":"-4","pressure":"849","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:54","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"11"},{"id":"902","terrestrial_date":"2015-04-28","sol":"969","ls":"333","season":"Month 12","min_temp":"-72","max_temp":"-2","pressure":"844","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:54","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"11"},{"id":"901","terrestrial_date":"2015-04-27","sol":"968","ls":"332","season":"Month 12","min_temp":"-71","max_temp":"-3","pressure":"848","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:54","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"11"},{"id":"899","terrestrial_date":"2015-04-26","sol":"967","ls":"332","season":"Month 12","min_temp":"-74","max_temp":"-2","pressure":"844","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:54","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"12"},{"id":"900","terrestrial_date":"2015-04-25","sol":"966","ls":"331","season":"Month 12","min_temp":"-73","max_temp":"-12","pressure":"850","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:54","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"9"},{"id":"898","terrestrial_date":"2015-04-24","sol":"965","ls":"331","season":"Month 12","min_temp":"-75","max_temp":"-10","pressure":"847","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:54","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"8"},{"id":"897","terrestrial_date":"2015-04-23","sol":"964","ls":"330","season":"Month 12","min_temp":"-72","max_temp":"-13","pressure":"847","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:54","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"9"},{"id":"896","terrestrial_date":"2015-04-22","sol":"963","ls":"329","season":"Month 11","min_temp":"-71","max_temp":"-5","pressure":"850","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"10"},{"id":"894","terrestrial_date":"2015-04-21","sol":"962","ls":"329","season":"Month 11","min_temp":"-73","max_temp":"-2","pressure":"845","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"11"},{"id":"895","terrestrial_date":"2015-04-20","sol":"961","ls":"328","season":"Month 11","min_temp":"-71","max_temp":"-3","pressure":"849","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"11"},{"id":"893","terrestrial_date":"2015-04-19","sol":"960","ls":"328","season":"Month 11","min_temp":"-76","max_temp":"-8","pressure":"846","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-86","max_gts_temp":"15"},{"id":"891","terrestrial_date":"2015-04-18","sol":"959","ls":"327","season":"Month 11","min_temp":"-78","max_temp":"-4","pressure":"846","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-84","max_gts_temp":"14"},{"id":"892","terrestrial_date":"2015-04-17","sol":"958","ls":"327","season":"Month 11","min_temp":"-74","max_temp":"-9","pressure":"848","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-83","max_gts_temp":"17"},{"id":"890","terrestrial_date":"2015-04-16","sol":"957","ls":"326","season":"Month 11","min_temp":"--","max_temp":"--","pressure":"--","pressure_string":"--","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"--","sunrise":"06:46","sunset":"18:55","local_uv_irradiance_index":"--","min_gts_temp":"--","max_gts_temp":"--"},{"id":"889","terrestrial_date":"2015-04-13","sol":"954","ls":"324","season":"Month 11","min_temp":"-73","max_temp":"-3","pressure":"847","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"11"},{"id":"887","terrestrial_date":"2015-04-12","sol":"953","ls":"324","season":"Month 11","min_temp":"-71","max_temp":"-5","pressure":"847","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"12"},{"id":"886","terrestrial_date":"2015-04-11","sol":"952","ls":"323","season":"Month 11","min_temp":"-69","max_temp":"-6","pressure":"847","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"14"},{"id":"888","terrestrial_date":"2015-04-10","sol":"951","ls":"323","season":"Month 11","min_temp":"-75","max_temp":"-4","pressure":"849","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"14"},{"id":"885","terrestrial_date":"2015-04-09","sol":"950","ls":"322","season":"Month 11","min_temp":"-73","max_temp":"0","pressure":"850","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-71","max_gts_temp":"13"},{"id":"884","terrestrial_date":"2015-04-08","sol":"949","ls":"321","season":"Month 11","min_temp":"-72","max_temp":"-4","pressure":"851","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"9"},{"id":"883","terrestrial_date":"2015-04-07","sol":"948","ls":"321","season":"Month 11","min_temp":"-73","max_temp":"-8","pressure":"854","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"6"},{"id":"882","terrestrial_date":"2015-04-06","sol":"947","ls":"320","season":"Month 11","min_temp":"-70","max_temp":"-3","pressure":"853","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-73","max_gts_temp":"6"},{"id":"879","terrestrial_date":"2015-04-05","sol":"946","ls":"320","season":"Month 11","min_temp":"-77","max_temp":"-2","pressure":"850","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:44","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-74","max_gts_temp":"6"},{"id":"881","terrestrial_date":"2015-04-04","sol":"945","ls":"319","season":"Month 11","min_temp":"-72","max_temp":"-1","pressure":"851","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:44","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-74","max_gts_temp":"5"},{"id":"878","terrestrial_date":"2015-04-03","sol":"944","ls":"318","season":"Month 11","min_temp":"-70","max_temp":"0","pressure":"852","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:44","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"8"},{"id":"877","terrestrial_date":"2015-04-02","sol":"943","ls":"318","season":"Month 11","min_temp":"-73","max_temp":"-1","pressure":"854","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:44","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-69","max_gts_temp":"5"},{"id":"880","terrestrial_date":"2015-03-31","sol":"942","ls":"317","season":"Month 11","min_temp":"-74","max_temp":"-1","pressure":"857","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:44","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"6"},{"id":"875","terrestrial_date":"2015-03-30","sol":"941","ls":"317","season":"Month 11","min_temp":"-74","max_temp":"0","pressure":"857","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:43","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-71","max_gts_temp":"6"},{"id":"876","terrestrial_date":"2015-03-29","sol":"940","ls":"316","season":"Month 11","min_temp":"-73","max_temp":"-2","pressure":"861","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:43","sunset":"18:54","local_uv_irradiance_index":"Very_High","min_gts_temp":"-76","max_gts_temp":"8"},{"id":"873","terrestrial_date":"2015-03-28","sol":"939","ls":"316","season":"Month 11","min_temp":"--","max_temp":"--","pressure":"--","pressure_string":"--","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"--","sunrise":"06:43","sunset":"18:54","local_uv_irradiance_index":"--","min_gts_temp":"--","max_gts_temp":"--"},{"id":"874","terrestrial_date":"2015-03-26","sol":"937","ls":"314","season":"Month 11","min_temp":"-73","max_temp":"0","pressure":"863","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:42","sunset":"18:54","local_uv_irradiance_index":"Very_High","min_gts_temp":"-77","max_gts_temp":"10"},{"id":"871","terrestrial_date":"2015-03-25","sol":"936","ls":"314","season":"Month 11","min_temp":"-72","max_temp":"-3","pressure":"865","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:42","sunset":"18:54","local_uv_irradiance_index":"Very_High","min_gts_temp":"-75","max_gts_temp":"9"},{"id":"872","terrestrial_date":"2015-03-24","sol":"935","ls":"313","season":"Month 11","min_temp":"-75","max_temp":"-2","pressure":"862","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:42","sunset":"18:54","local_uv_irradiance_index":"Very_High","min_gts_temp":"-74","max_gts_temp":"10"},{"id":"870","terrestrial_date":"2015-03-23","sol":"934","ls":"313","season":"Month 11","min_temp":"-73","max_temp":"1","pressure":"858","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:41","sunset":"18:54","local_uv_irradiance_index":"Very_High","min_gts_temp":"-75","max_gts_temp":"9"},{"id":"869","terrestrial_date":"2015-03-22","sol":"933","ls":"312","season":"Month 11","min_temp":"-71","max_temp":"-4","pressure":"863","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:41","sunset":"18:54","local_uv_irradiance_index":"Very_High","min_gts_temp":"-75","max_gts_temp":"11"},{"id":"866","terrestrial_date":"2015-03-21","sol":"932","ls":"311","season":"Month 11","min_temp":"-71","max_temp":"1","pressure":"859","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:41","sunset":"18:53","local_uv_irradiance_index":"Very_High","min_gts_temp":"-75","max_gts_temp":"10"},{"id":"867","terrestrial_date":"2015-03-20","sol":"931","ls":"311","season":"Month 11","min_temp":"-69","max_temp":"-1","pressure":"864","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:41","sunset":"18:53","local_uv_irradiance_index":"Very_High","min_gts_temp":"-76","max_gts_temp":"10"},{"id":"868","terrestrial_date":"2015-03-19","sol":"930","ls":"310","season":"Month 11","min_temp":"-75","max_temp":"-1","pressure":"865","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:40","sunset":"18:53","local_uv_irradiance_index":"Very_High","min_gts_temp":"-78","max_gts_temp":"10"},{"id":"865","terrestrial_date":"2015-03-18","sol":"929","ls":"310","season":"Month 11","min_temp":"-75","max_temp":"0","pressure":"866","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:40","sunset":"18:53","local_uv_irradiance_index":"Very_High","min_gts_temp":"-76","max_gts_temp":"11"},{"id":"864","terrestrial_date":"2015-03-17","sol":"928","ls":"309","season":"Month 11","min_temp":"-72","max_temp":"0","pressure":"862","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:40","sunset":"18:53","local_uv_irradiance_index":"Very_High","min_gts_temp":"-74","max_gts_temp":"9"},{"id":"863","terrestrial_date":"2015-03-16","sol":"927","ls":"308","season":"Month 11","min_temp":"-76","max_temp":"-2","pressure":"862","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:39","sunset":"18:52","local_uv_irradiance_index":"Very_High","min_gts_temp":"-75","max_gts_temp":"11"},{"id":"862","terrestrial_date":"2015-03-15","sol":"926","ls":"308","season":"Month 11","min_temp":"-76","max_temp":"1","pressure":"864","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:39","sunset":"18:52","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"10"},{"id":"860","terrestrial_date":"2015-03-14","sol":"925","ls":"307","season":"Month 11","min_temp":"-71","max_temp":"-2","pressure":"862","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:38","sunset":"18:52","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"9"},{"id":"861","terrestrial_date":"2015-03-13","sol":"924","ls":"307","season":"Month 11","min_temp":"-74","max_temp":"-1","pressure":"867","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:38","sunset":"18:52","local_uv_irradiance_index":"Very_High","min_gts_temp":"-79","max_gts_temp":"10"},{"id":"859","terrestrial_date":"2015-03-12","sol":"923","ls":"306","season":"Month 11","min_temp":"-72","max_temp":"-5","pressure":"867","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:38","sunset":"18:51","local_uv_irradiance_index":"Very_High","min_gts_temp":"-74","max_gts_temp":"14"},{"id":"858","terrestrial_date":"2015-03-11","sol":"922","ls":"305","season":"Month 11","min_temp":"-73","max_temp":"-2","pressure":"870","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:37","sunset":"18:51","local_uv_irradiance_index":"Very_High","min_gts_temp":"-75","max_gts_temp":"9"},{"id":"857","terrestrial_date":"2015-03-10","sol":"921","ls":"305","season":"Month 11","min_temp":"-70","max_temp":"2","pressure":"867","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:37","sunset":"18:51","local_uv_irradiance_index":"High","min_gts_temp":"-74","max_gts_temp":"9"},{"id":"856","terrestrial_date":"2015-03-09","sol":"920","ls":"304","season":"Month 11","min_temp":"-72","max_temp":"-2","pressure":"868","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:37","sunset":"18:51","local_uv_irradiance_index":"High","min_gts_temp":"-74","max_gts_temp":"9"},{"id":"855","terrestrial_date":"2015-03-08","sol":"919","ls":"304","season":"Month 11","min_temp":"-74","max_temp":"-3","pressure":"870","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:36","sunset":"18:50","local_uv_irradiance_index":"High","min_gts_temp":"-74","max_gts_temp":"9"},{"id":"853","terrestrial_date":"2015-03-07","sol":"918","ls":"303","season":"Month 11","min_temp":"-71","max_temp":"0","pressure":"867","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:36","sunset":"18:50","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"9"},{"id":"854","terrestrial_date":"2015-03-06","sol":"917","ls":"302","season":"Month 11","min_temp":"-76","max_temp":"-1","pressure":"871","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:35","sunset":"18:50","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"9"},{"id":"852","terrestrial_date":"2015-03-05","sol":"916","ls":"302","season":"Month 11","min_temp":"-71","max_temp":"-5","pressure":"872","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:35","sunset":"18:49","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"9"},{"id":"851","terrestrial_date":"2015-03-04","sol":"915","ls":"301","season":"Month 11","min_temp":"-71","max_temp":"-4","pressure":"878","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:34","sunset":"18:49","local_uv_irradiance_index":"High","min_gts_temp":"-74","max_gts_temp":"9"},{"id":"850","terrestrial_date":"2015-03-03","sol":"914","ls":"300","season":"Month 11","min_temp":"-71","max_temp":"0","pressure":"874","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:34","sunset":"18:49","local_uv_irradiance_index":"High","min_gts_temp":"-60","max_gts_temp":"8"},{"id":"848","terrestrial_date":"2015-03-02","sol":"913","ls":"300","season":"Month 11","min_temp":"-71","max_temp":"-4","pressure":"871","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:33","sunset":"18:48","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"10"},{"id":"849","terrestrial_date":"2015-03-01","sol":"912","ls":"299","season":"Month 10","min_temp":"-75","max_temp":"-4","pressure":"875","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:33","sunset":"18:48","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"8"},{"id":"846","terrestrial_date":"2015-02-28","sol":"911","ls":"299","season":"Month 10","min_temp":"-70","max_temp":"0","pressure":"874","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:33","sunset":"18:48","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"8"},{"id":"847","terrestrial_date":"2015-02-27","sol":"910","ls":"298","season":"Month 10","min_temp":"-73","max_temp":"0","pressure":"878","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:32","sunset":"18:47","local_uv_irradiance_index":"High","min_gts_temp":"-74","max_gts_temp":"9"},{"id":"845","terrestrial_date":"2015-02-26","sol":"909","ls":"297","season":"Month 10","min_temp":"-70","max_temp":"-2","pressure":"878","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:32","sunset":"18:47","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"8"},{"id":"844","terrestrial_date":"2015-02-25","sol":"908","ls":"297","season":"Month 10","min_temp":"-71","max_temp":"-3","pressure":"883","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:31","sunset":"18:46","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"8"},{"id":"842","terrestrial_date":"2015-02-24","sol":"907","ls":"296","season":"Month 10","min_temp":"-75","max_temp":"-1","pressure":"879","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:31","sunset":"18:46","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"8"},{"id":"843","terrestrial_date":"2015-02-22","sol":"906","ls":"296","season":"Month 10","min_temp":"-76","max_temp":"-3","pressure":"878","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:30","sunset":"18:46","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"9"},{"id":"840","terrestrial_date":"2015-02-21","sol":"905","ls":"295","season":"Month 10","min_temp":"-71","max_temp":"-2","pressure":"880","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:29","sunset":"18:45","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"8"},{"id":"841","terrestrial_date":"2015-02-20","sol":"904","ls":"294","season":"Month 10","min_temp":"-71","max_temp":"0","pressure":"878","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:29","sunset":"18:45","local_uv_irradiance_index":"High","min_gts_temp":"-74","max_gts_temp":"8"},{"id":"839","terrestrial_date":"2015-02-19","sol":"903","ls":"294","season":"Month 10","min_temp":"-71","max_temp":"-2","pressure":"882","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:28","sunset":"18:44","local_uv_irradiance_index":"High","min_gts_temp":"-73","max_gts_temp":"6"},{"id":"838","terrestrial_date":"2015-02-18","sol":"902","ls":"293","season":"Month 10","min_temp":"-68","max_temp":"0","pressure":"883","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:28","sunset":"18:44","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"5"},{"id":"837","terrestrial_date":"2015-02-17","sol":"901","ls":"292","season":"Month 10","min_temp":"-71","max_temp":"-2","pressure":"885","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:27","sunset":"18:43","local_uv_irradiance_index":"High","min_gts_temp":"-74","max_gts_temp":"11"},{"id":"836","terrestrial_date":"2015-02-16","sol":"900","ls":"292","season":"Month 10","min_temp":"-70","max_temp":"1","pressure":"883","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:27","sunset":"18:43","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"7"},{"id":"835","terrestrial_date":"2015-02-15","sol":"899","ls":"291","season":"Month 10","min_temp":"-75","max_temp":"-1","pressure":"881","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:26","sunset":"18:42","local_uv_irradiance_index":"High","min_gts_temp":"-73","max_gts_temp":"7"},{"id":"834","terrestrial_date":"2015-02-14","sol":"898","ls":"291","season":"Month 10","min_temp":"-72","max_temp":"2","pressure":"883","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:26","sunset":"18:42","local_uv_irradiance_index":"Very_High","min_gts_temp":"-75","max_gts_temp":"7"},{"id":"832","terrestrial_date":"2015-02-13","sol":"897","ls":"290","season":"Month 10","min_temp":"-72","max_temp":"5","pressure":"884","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:25","sunset":"18:41","local_uv_irradiance_index":"High","min_gts_temp":"-74","max_gts_temp":"7"},{"id":"833","terrestrial_date":"2015-02-12","sol":"896","ls":"289","season":"Month 10","min_temp":"-70","max_temp":"1","pressure":"888","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:24","sunset":"18:41","local_uv_irradiance_index":"High","min_gts_temp":"-73","max_gts_temp":"8"},{"id":"831","terrestrial_date":"2015-02-11","sol":"895","ls":"289","season":"Month 10","min_temp":"-72","max_temp":"-4","pressure":"889","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:24","sunset":"18:40","local_uv_irradiance_index":"High","min_gts_temp":"-74","max_gts_temp":"5"},{"id":"830","terrestrial_date":"2015-02-10","sol":"894","ls":"288","season":"Month 10","min_temp":"-75","max_temp":"-4","pressure":"891","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:23","sunset":"18:40","local_uv_irradiance_index":"Moderate","min_gts_temp":"-74","max_gts_temp":"4"},{"id":"829","terrestrial_date":"2015-02-09","sol":"893","ls":"287","season":"Month 10","min_temp":"-72","max_temp":"2","pressure":"890","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:23","sunset":"18:39","local_uv_irradiance_index":"High","min_gts_temp":"-73","max_gts_temp":"4"},{"id":"828","terrestrial_date":"2015-02-08","sol":"892","ls":"287","season":"Month 10","min_temp":"-71","max_temp":"-3","pressure":"892","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:22","sunset":"18:39","local_uv_irradiance_index":"High","min_gts_temp":"-74","max_gts_temp":"5"},{"id":"827","terrestrial_date":"2015-02-07","sol":"891","ls":"286","season":"Month 10","min_temp":"-72","max_temp":"-3","pressure":"892","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:21","sunset":"18:38","local_uv_irradiance_index":"High","min_gts_temp":"-74","max_gts_temp":"5"},{"id":"826","terrestrial_date":"2015-02-06","sol":"890","ls":"286","season":"Month 10","min_temp":"-72","max_temp":"-4","pressure":"892","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:21","sunset":"18:38","local_uv_irradiance_index":"High","min_gts_temp":"-73","max_gts_temp":"5"},{"id":"825","terrestrial_date":"2015-02-05","sol":"889","ls":"285","season":"Month 10","min_temp":"-70","max_temp":"2","pressure":"895","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:20","sunset":"18:37","local_uv_irradiance_index":"High","min_gts_temp":"-74","max_gts_temp":"4"},{"id":"824","terrestrial_date":"2015-02-04","sol":"888","ls":"284","season":"Month 10","min_temp":"-70","max_temp":"-5","pressure":"896","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:20","sunset":"18:37","local_uv_irradiance_index":"High","min_gts_temp":"-74","max_gts_temp":"3"},{"id":"822","terrestrial_date":"2015-02-03","sol":"887","ls":"284","season":"Month 10","min_temp":"-73","max_temp":"-4","pressure":"897","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:19","sunset":"18:36","local_uv_irradiance_index":"Moderate","min_gts_temp":"-73","max_gts_temp":"5"},{"id":"823","terrestrial_date":"2015-02-02","sol":"886","ls":"283","season":"Month 10","min_temp":"-73","max_temp":"-6","pressure":"894","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:18","sunset":"18:35","local_uv_irradiance_index":"Moderate","min_gts_temp":"-73","max_gts_temp":"4"},{"id":"819","terrestrial_date":"2015-02-01","sol":"885","ls":"282","season":"Month 10","min_temp":"-71","max_temp":"-4","pressure":"895","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:18","sunset":"18:35","local_uv_irradiance_index":"Moderate","min_gts_temp":"-73","max_gts_temp":"4"},{"id":"821","terrestrial_date":"2015-01-31","sol":"884","ls":"282","season":"Month 10","min_temp":"-71","max_temp":"-5","pressure":"897","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:17","sunset":"18:34","local_uv_irradiance_index":"Moderate","min_gts_temp":"-74","max_gts_temp":"5"},{"id":"820","terrestrial_date":"2015-01-30","sol":"883","ls":"281","season":"Month 10","min_temp":"-74","max_temp":"-4","pressure":"897","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:16","sunset":"18:34","local_uv_irradiance_index":"Moderate","min_gts_temp":"-74","max_gts_temp":"3"},{"id":"818","terrestrial_date":"2015-01-29","sol":"882","ls":"280","season":"Month 10","min_temp":"-76","max_temp":"-6","pressure":"901","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:16","sunset":"18:33","local_uv_irradiance_index":"Moderate","min_gts_temp":"-73","max_gts_temp":"3"},{"id":"817","terrestrial_date":"2015-01-28","sol":"881","ls":"280","season":"Month 10","min_temp":"-73","max_temp":"-4","pressure":"899","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:15","sunset":"18:32","local_uv_irradiance_index":"Moderate","min_gts_temp":"-74","max_gts_temp":"4"},{"id":"816","terrestrial_date":"2015-01-27","sol":"880","ls":"279","season":"Month 10","min_temp":"--","max_temp":"--","pressure":"--","pressure_string":"--","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"--","sunrise":"06:14","sunset":"18:32","local_uv_irradiance_index":"--","min_gts_temp":"--","max_gts_temp":"--"},{"id":"815","terrestrial_date":"2015-01-19","sol":"872","ls":"274","season":"Month 10","min_temp":"-72","max_temp":"1","pressure":"902","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:09","sunset":"18:27","local_uv_irradiance_index":"Moderate","min_gts_temp":"-72","max_gts_temp":"5"},{"id":"814","terrestrial_date":"2015-01-18","sol":"871","ls":"273","season":"Month 10","min_temp":"-70","max_temp":"-7","pressure":"903","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:08","sunset":"18:26","local_uv_irradiance_index":"Moderate","min_gts_temp":"-60","max_gts_temp":"3"},{"id":"813","terrestrial_date":"2015-01-17","sol":"870","ls":"273","season":"Month 10","min_temp":"-74","max_temp":"-6","pressure":"909","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:07","sunset":"18:25","local_uv_irradiance_index":"Moderate","min_gts_temp":"-75","max_gts_temp":"4"},{"id":"812","terrestrial_date":"2015-01-15","sol":"869","ls":"272","season":"Month 10","min_temp":"-72","max_temp":"-4","pressure":"906","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:07","sunset":"18:25","local_uv_irradiance_index":"Moderate","min_gts_temp":"-72","max_gts_temp":"5"},{"id":"811","terrestrial_date":"2015-01-14","sol":"868","ls":"271","season":"Month 10","min_temp":"-71","max_temp":"-4","pressure":"908","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:06","sunset":"18:24","local_uv_irradiance_index":"Moderate","min_gts_temp":"-71","max_gts_temp":"3"},{"id":"810","terrestrial_date":"2015-01-13","sol":"867","ls":"271","season":"Month 10","min_temp":"-71","max_temp":"-2","pressure":"910","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:05","sunset":"18:23","local_uv_irradiance_index":"Moderate","min_gts_temp":"-72","max_gts_temp":"4"},{"id":"809","terrestrial_date":"2015-01-12","sol":"866","ls":"270","season":"Month 10","min_temp":"-71","max_temp":"-4","pressure":"911","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:05","sunset":"18:22","local_uv_irradiance_index":"Moderate","min_gts_temp":"-73","max_gts_temp":"4"},{"id":"808","terrestrial_date":"2015-01-11","sol":"865","ls":"270","season":"Month 10","min_temp":"-70","max_temp":"-5","pressure":"913","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:04","sunset":"18:22","local_uv_irradiance_index":"Moderate","min_gts_temp":"-75","max_gts_temp":"4"},{"id":"806","terrestrial_date":"2015-01-10","sol":"864","ls":"269","season":"Month 9","min_temp":"-70","max_temp":"-1","pressure":"914","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:03","sunset":"18:21","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"3"},{"id":"805","terrestrial_date":"2015-01-09","sol":"863","ls":"268","season":"Month 9","min_temp":"-72","max_temp":"-13","pressure":"916","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:02","sunset":"18:20","local_uv_irradiance_index":"High","min_gts_temp":"-72","max_gts_temp":"3"},{"id":"807","terrestrial_date":"2015-01-08","sol":"862","ls":"268","season":"Month 9","min_temp":"-70","max_temp":"-2","pressure":"917","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:02","sunset":"18:20","local_uv_irradiance_index":"Moderate","min_gts_temp":"-73","max_gts_temp":"11"},{"id":"804","terrestrial_date":"2015-01-07","sol":"861","ls":"267","season":"Month 9","min_temp":"-70","max_temp":"-7","pressure":"917","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:01","sunset":"18:19","local_uv_irradiance_index":"Moderate","min_gts_temp":"-71","max_gts_temp":"3"},{"id":"803","terrestrial_date":"2015-01-06","sol":"860","ls":"266","season":"Month 9","min_temp":"-69","max_temp":"-8","pressure":"916","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:00","sunset":"18:18","local_uv_irradiance_index":"Moderate","min_gts_temp":"-71","max_gts_temp":"3"},{"id":"802","terrestrial_date":"2015-01-05","sol":"859","ls":"266","season":"Month 9","min_temp":"-72","max_temp":"-8","pressure":"915","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:00","sunset":"18:18","local_uv_irradiance_index":"Moderate","min_gts_temp":"-73","max_gts_temp":"3"},{"id":"800","terrestrial_date":"2015-01-04","sol":"858","ls":"265","season":"Month 9","min_temp":"-73","max_temp":"-6","pressure":"913","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:59","sunset":"18:17","local_uv_irradiance_index":"Moderate","min_gts_temp":"-72","max_gts_temp":"4"},{"id":"801","terrestrial_date":"2015-01-03","sol":"857","ls":"264","season":"Month 9","min_temp":"-76","max_temp":"0","pressure":"911","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:58","sunset":"18:16","local_uv_irradiance_index":"Moderate","min_gts_temp":"-72","max_gts_temp":"3"},{"id":"795","terrestrial_date":"2015-01-02","sol":"856","ls":"264","season":"Month 9","min_temp":"-68","max_temp":"-3","pressure":"912","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:58","sunset":"18:15","local_uv_irradiance_index":"Moderate","min_gts_temp":"-70","max_gts_temp":"3"},{"id":"799","terrestrial_date":"2015-01-01","sol":"855","ls":"263","season":"Month 9","min_temp":"-69","max_temp":"0","pressure":"912","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:57","sunset":"18:15","local_uv_irradiance_index":"Low","min_gts_temp":"-70","max_gts_temp":"3"},{"id":"798","terrestrial_date":"2014-12-31","sol":"854","ls":"262","season":"Month 9","min_temp":"-66","max_temp":"3","pressure":"910","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:56","sunset":"18:14","local_uv_irradiance_index":"Low","min_gts_temp":"-70","max_gts_temp":"2"},{"id":"796","terrestrial_date":"2014-12-30","sol":"853","ls":"262","season":"Month 9","min_temp":"-67","max_temp":"0","pressure":"913","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:55","sunset":"18:13","local_uv_irradiance_index":"Low","min_gts_temp":"-69","max_gts_temp":"2"},{"id":"797","terrestrial_date":"2014-12-29","sol":"852","ls":"261","season":"Month 9","min_temp":"-73","max_temp":"-3","pressure":"916","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:55","sunset":"18:12","local_uv_irradiance_index":"Moderate","min_gts_temp":"-72","max_gts_temp":"4"},{"id":"794","terrestrial_date":"2014-12-28","sol":"851","ls":"260","season":"Month 9","min_temp":"-68","max_temp":"-6","pressure":"919","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:54","sunset":"18:12","local_uv_irradiance_index":"Low","min_gts_temp":"-71","max_gts_temp":"2"},{"id":"789","terrestrial_date":"2014-12-27","sol":"850","ls":"260","season":"Month 9","min_temp":"-68","max_temp":"-1","pressure":"918","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:53","sunset":"18:11","local_uv_irradiance_index":"Low","min_gts_temp":"-70","max_gts_temp":"2"},{"id":"787","terrestrial_date":"2014-12-26","sol":"849","ls":"259","season":"Month 9","min_temp":"-69","max_temp":"-1","pressure":"918","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:53","sunset":"18:10","local_uv_irradiance_index":"Moderate","min_gts_temp":"-72","max_gts_temp":"2"},{"id":"792","terrestrial_date":"2014-12-25","sol":"848","ls":"258","season":"Month 9","min_temp":"-69","max_temp":"-4","pressure":"918","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:52","sunset":"18:10","local_uv_irradiance_index":"Moderate","min_gts_temp":"-73","max_gts_temp":"3"},{"id":"791","terrestrial_date":"2014-12-24","sol":"847","ls":"258","season":"Month 9","min_temp":"-69","max_temp":"-8","pressure":"918","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:51","sunset":"18:09","local_uv_irradiance_index":"Moderate","min_gts_temp":"-73","max_gts_temp":"4"},{"id":"785","terrestrial_date":"2014-12-23","sol":"846","ls":"257","season":"Month 9","min_temp":"-74","max_temp":"-7","pressure":"925","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:51","sunset":"18:08","local_uv_irradiance_index":"Moderate","min_gts_temp":"-73","max_gts_temp":"3"},{"id":"786","terrestrial_date":"2014-12-22","sol":"845","ls":"257","season":"Month 9","min_temp":"-73","max_temp":"0","pressure":"920","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:50","sunset":"18:07","local_uv_irradiance_index":"Moderate","min_gts_temp":"-71","max_gts_temp":"3"},{"id":"788","terrestrial_date":"2014-12-21","sol":"844","ls":"256","season":"Month 9","min_temp":"-68","max_temp":"5","pressure":"917","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:49","sunset":"18:07","local_uv_irradiance_index":"Low","min_gts_temp":"-70","max_gts_temp":"3"},{"id":"793","terrestrial_date":"2014-12-20","sol":"843","ls":"255","season":"Month 9","min_temp":"-69","max_temp":"1","pressure":"916","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:49","sunset":"18:06","local_uv_irradiance_index":"Low","min_gts_temp":"-72","max_gts_temp":"4"},{"id":"790","terrestrial_date":"2014-12-19","sol":"842","ls":"255","season":"Month 9","min_temp":"-69","max_temp":"-6","pressure":"914","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:48","sunset":"18:05","local_uv_irradiance_index":"Moderate","min_gts_temp":"-70","max_gts_temp":"5"},{"id":"784","terrestrial_date":"2014-12-18","sol":"841","ls":"254","season":"Month 9","min_temp":"-75","max_temp":"-7","pressure":"914","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:47","sunset":"18:04","local_uv_irradiance_index":"Low","min_gts_temp":"-71","max_gts_temp":"5"},{"id":"783","terrestrial_date":"2014-12-17","sol":"840","ls":"253","season":"Month 9","min_temp":"-74","max_temp":"-4","pressure":"913","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:47","sunset":"18:04","local_uv_irradiance_index":"Low","min_gts_temp":"-71","max_gts_temp":"3"},{"id":"781","terrestrial_date":"2014-12-16","sol":"839","ls":"253","season":"Month 9","min_temp":"-70","max_temp":"-1","pressure":"917","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:46","sunset":"18:03","local_uv_irradiance_index":"Low","min_gts_temp":"-70","max_gts_temp":"2"},{"id":"782","terrestrial_date":"2014-12-15","sol":"838","ls":"252","season":"Month 9","min_temp":"-69","max_temp":"-1","pressure":"917","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:45","sunset":"18:02","local_uv_irradiance_index":"Low","min_gts_temp":"-70","max_gts_temp":"4"},{"id":"779","terrestrial_date":"2014-12-14","sol":"837","ls":"251","season":"Month 9","min_temp":"-69","max_temp":"4","pressure":"916","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:45","sunset":"18:02","local_uv_irradiance_index":"Moderate","min_gts_temp":"-71","max_gts_temp":"6"},{"id":"778","terrestrial_date":"2014-12-13","sol":"836","ls":"251","season":"Month 9","min_temp":"-69","max_temp":"-1","pressure":"916","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:44","sunset":"18:01","local_uv_irradiance_index":"Moderate","min_gts_temp":"-72","max_gts_temp":"5"},{"id":"780","terrestrial_date":"2014-12-12","sol":"835","ls":"250","season":"Month 9","min_temp":"-69","max_temp":"-1","pressure":"917","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:44","sunset":"18:00","local_uv_irradiance_index":"High","min_gts_temp":"-72","max_gts_temp":"4"},{"id":"777","terrestrial_date":"2014-12-11","sol":"834","ls":"249","season":"Month 9","min_temp":"-68","max_temp":"-3","pressure":"918","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:43","sunset":"18:00","local_uv_irradiance_index":"High","min_gts_temp":"-72","max_gts_temp":"4"},{"id":"776","terrestrial_date":"2014-12-09","sol":"833","ls":"249","season":"Month 9","min_temp":"-69","max_temp":"-1","pressure":"923","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:42","sunset":"17:59","local_uv_irradiance_index":"Moderate","min_gts_temp":"-72","max_gts_temp":"4"},{"id":"775","terrestrial_date":"2014-12-08","sol":"832","ls":"248","season":"Month 9","min_temp":"-68","max_temp":"-2","pressure":"924","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:42","sunset":"17:58","local_uv_irradiance_index":"Moderate","min_gts_temp":"-70","max_gts_temp":"4"},{"id":"774","terrestrial_date":"2014-12-07","sol":"831","ls":"247","season":"Month 9","min_temp":"-68","max_temp":"-6","pressure":"920","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:41","sunset":"17:57","local_uv_irradiance_index":"Moderate","min_gts_temp":"-70","max_gts_temp":"3"},{"id":"772","terrestrial_date":"2014-12-06","sol":"830","ls":"247","season":"Month 9","min_temp":"-68","max_temp":"-1","pressure":"918","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:41","sunset":"17:57","local_uv_irradiance_index":"Moderate","min_gts_temp":"-70","max_gts_temp":"3"},{"id":"773","terrestrial_date":"2014-12-05","sol":"829","ls":"246","season":"Month 9","min_temp":"-71","max_temp":"-2","pressure":"914","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:40","sunset":"17:56","local_uv_irradiance_index":"Moderate","min_gts_temp":"-70","max_gts_temp":"3"},{"id":"771","terrestrial_date":"2014-12-04","sol":"828","ls":"245","season":"Month 9","min_temp":"-71","max_temp":"-1","pressure":"914","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:39","sunset":"17:55","local_uv_irradiance_index":"Moderate","min_gts_temp":"-69","max_gts_temp":"3"},{"id":"769","terrestrial_date":"2014-12-03","sol":"827","ls":"245","season":"Month 9","min_temp":"-68","max_temp":"0","pressure":"911","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:39","sunset":"17:55","local_uv_irradiance_index":"Moderate","min_gts_temp":"-68","max_gts_temp":"2"},{"id":"770","terrestrial_date":"2014-12-02","sol":"826","ls":"244","season":"Month 9","min_temp":"-68","max_temp":"0","pressure":"914","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:38","sunset":"17:54","local_uv_irradiance_index":"Moderate","min_gts_temp":"-70","max_gts_temp":"3"},{"id":"767","terrestrial_date":"2014-12-01","sol":"825","ls":"243","season":"Month 9","min_temp":"-67","max_temp":"1","pressure":"914","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:38","sunset":"17:53","local_uv_irradiance_index":"Moderate","min_gts_temp":"-69","max_gts_temp":"3"},{"id":"768","terrestrial_date":"2014-11-30","sol":"824","ls":"243","season":"Month 9","min_temp":"-67","max_temp":"2","pressure":"914","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:37","sunset":"17:53","local_uv_irradiance_index":"Moderate","min_gts_temp":"-69","max_gts_temp":"2"},{"id":"766","terrestrial_date":"2014-11-29","sol":"823","ls":"242","season":"Month 9","min_temp":"-69","max_temp":"0","pressure":"912","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:37","sunset":"17:52","local_uv_irradiance_index":"Moderate","min_gts_temp":"-71","max_gts_temp":"2"},{"id":"764","terrestrial_date":"2014-11-28","sol":"822","ls":"242","season":"Month 9","min_temp":"-71","max_temp":"1","pressure":"911","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:36","sunset":"17:51","local_uv_irradiance_index":"Moderate","min_gts_temp":"-71","max_gts_temp":"3"},{"id":"762","terrestrial_date":"2014-11-27","sol":"821","ls":"241","season":"Month 9","min_temp":"-68","max_temp":"2","pressure":"910","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:35","sunset":"17:51","local_uv_irradiance_index":"Moderate","min_gts_temp":"-69","max_gts_temp":"1"},{"id":"765","terrestrial_date":"2014-11-26","sol":"820","ls":"240","season":"Month 9","min_temp":"-68","max_temp":"-1","pressure":"910","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:35","sunset":"17:50","local_uv_irradiance_index":"Moderate","min_gts_temp":"-69","max_gts_temp":"2"},{"id":"763","terrestrial_date":"2014-11-25","sol":"819","ls":"240","season":"Month 9","min_temp":"-71","max_temp":"0","pressure":"913","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:34","sunset":"17:50","local_uv_irradiance_index":"Moderate","min_gts_temp":"-70","max_gts_temp":"4"},{"id":"760","terrestrial_date":"2014-11-24","sol":"818","ls":"239","season":"Month 8","min_temp":"-68","max_temp":"0","pressure":"914","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:34","sunset":"17:49","local_uv_irradiance_index":"Moderate","min_gts_temp":"-72","max_gts_temp":"4"},{"id":"761","terrestrial_date":"2014-11-23","sol":"817","ls":"238","season":"Month 8","min_temp":"-69","max_temp":"0","pressure":"913","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:33","sunset":"17:48","local_uv_irradiance_index":"Moderate","min_gts_temp":"-70","max_gts_temp":"2"},{"id":"758","terrestrial_date":"2014-11-22","sol":"816","ls":"238","season":"Month 8","min_temp":"-74","max_temp":"-7","pressure":"909","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:33","sunset":"17:48","local_uv_irradiance_index":"Moderate","min_gts_temp":"-69","max_gts_temp":"3"},{"id":"759","terrestrial_date":"2014-11-21","sol":"815","ls":"237","season":"Month 8","min_temp":"-69","max_temp":"-8","pressure":"905","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:32","sunset":"17:47","local_uv_irradiance_index":"Moderate","min_gts_temp":"-69","max_gts_temp":"3"},{"id":"757","terrestrial_date":"2014-11-20","sol":"814","ls":"236","season":"Month 8","min_temp":"-68","max_temp":"-3","pressure":"902","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:32","sunset":"17:46","local_uv_irradiance_index":"Moderate","min_gts_temp":"-70","max_gts_temp":"3"},{"id":"756","terrestrial_date":"2014-11-19","sol":"813","ls":"236","season":"Month 8","min_temp":"-67","max_temp":"2","pressure":"904","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:31","sunset":"17:46","local_uv_irradiance_index":"Moderate","min_gts_temp":"-69","max_gts_temp":"2"},{"id":"755","terrestrial_date":"2014-11-18","sol":"812","ls":"235","season":"Month 8","min_temp":"-75","max_temp":"3","pressure":"902","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:31","sunset":"17:45","local_uv_irradiance_index":"Moderate","min_gts_temp":"-72","max_gts_temp":"4"},{"id":"754","terrestrial_date":"2014-11-17","sol":"811","ls":"234","season":"Month 8","min_temp":"-71","max_temp":"-6","pressure":"900","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:30","sunset":"17:45","local_uv_irradiance_index":"Moderate","min_gts_temp":"-71","max_gts_temp":"4"},{"id":"751","terrestrial_date":"2014-11-16","sol":"810","ls":"234","season":"Month 8","min_temp":"-69","max_temp":"3","pressure":"897","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:30","sunset":"17:44","local_uv_irradiance_index":"Moderate","min_gts_temp":"-71","max_gts_temp":"3"},{"id":"753","terrestrial_date":"2014-11-15","sol":"809","ls":"233","season":"Month 8","min_temp":"-70","max_temp":"-2","pressure":"895","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:30","sunset":"17:43","local_uv_irradiance_index":"Moderate","min_gts_temp":"-70","max_gts_temp":"4"},{"id":"752","terrestrial_date":"2014-11-14","sol":"808","ls":"232","season":"Month 8","min_temp":"-67","max_temp":"7","pressure":"893","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:29","sunset":"17:43","local_uv_irradiance_index":"Moderate","min_gts_temp":"-71","max_gts_temp":"3"},{"id":"749","terrestrial_date":"2014-11-13","sol":"807","ls":"232","season":"Month 8","min_temp":"-71","max_temp":"1","pressure":"892","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:29","sunset":"17:42","local_uv_irradiance_index":"Moderate","min_gts_temp":"-73","max_gts_temp":"11"},{"id":"750","terrestrial_date":"2014-11-12","sol":"806","ls":"231","season":"Month 8","min_temp":"-69","max_temp":"2","pressure":"893","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:28","sunset":"17:42","local_uv_irradiance_index":"Moderate","min_gts_temp":"-75","max_gts_temp":"12"},{"id":"748","terrestrial_date":"2014-11-11","sol":"805","ls":"231","season":"Month 8","min_temp":"-70","max_temp":"1","pressure":"893","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:28","sunset":"17:41","local_uv_irradiance_index":"Moderate","min_gts_temp":"-75","max_gts_temp":"12"},{"id":"747","terrestrial_date":"2014-11-10","sol":"804","ls":"230","season":"Month 8","min_temp":"-73","max_temp":"0","pressure":"891","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:28","sunset":"17:41","local_uv_irradiance_index":"Moderate","min_gts_temp":"-73","max_gts_temp":"12"},{"id":"744","terrestrial_date":"2014-11-09","sol":"803","ls":"229","season":"Month 8","min_temp":"-69","max_temp":"0","pressure":"888","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:27","sunset":"17:40","local_uv_irradiance_index":"Moderate","min_gts_temp":"-73","max_gts_temp":"13"},{"id":"745","terrestrial_date":"2014-11-08","sol":"802","ls":"229","season":"Month 8","min_temp":"-69","max_temp":"7","pressure":"887","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:27","sunset":"17:40","local_uv_irradiance_index":"Moderate","min_gts_temp":"-73","max_gts_temp":"13"},{"id":"746","terrestrial_date":"2014-11-07","sol":"801","ls":"228","season":"Month 8","min_temp":"-70","max_temp":"3","pressure":"884","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:26","sunset":"17:39","local_uv_irradiance_index":"Moderate","min_gts_temp":"-73","max_gts_temp":"13"},{"id":"742","terrestrial_date":"2014-11-06","sol":"800","ls":"227","season":"Month 8","min_temp":"-67","max_temp":"-2","pressure":"884","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:26","sunset":"17:39","local_uv_irradiance_index":"Moderate","min_gts_temp":"-73","max_gts_temp":"13"},{"id":"743","terrestrial_date":"2014-11-05","sol":"799","ls":"227","season":"Month 8","min_temp":"-70","max_temp":"-4","pressure":"884","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:26","sunset":"17:38","local_uv_irradiance_index":"Moderate","min_gts_temp":"-74","max_gts_temp":"14"},{"id":"741","terrestrial_date":"2014-11-04","sol":"798","ls":"226","season":"Month 8","min_temp":"-67","max_temp":"0","pressure":"883","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:25","sunset":"17:38","local_uv_irradiance_index":"Moderate","min_gts_temp":"-72","max_gts_temp":"10"},{"id":"740","terrestrial_date":"2014-11-03","sol":"797","ls":"225","season":"Month 8","min_temp":"-65","max_temp":"-1","pressure":"879","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:25","sunset":"17:37","local_uv_irradiance_index":"Moderate","min_gts_temp":"-67","max_gts_temp":"11"},{"id":"737","terrestrial_date":"2014-11-01","sol":"796","ls":"225","season":"Month 8","min_temp":"-65","max_temp":"1","pressure":"877","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:25","sunset":"17:37","local_uv_irradiance_index":"Moderate","min_gts_temp":"-67","max_gts_temp":"5"},{"id":"738","terrestrial_date":"2014-10-31","sol":"795","ls":"224","season":"Month 8","min_temp":"-68","max_temp":"1","pressure":"875","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:24","sunset":"17:36","local_uv_irradiance_index":"Moderate","min_gts_temp":"-68","max_gts_temp":"6"},{"id":"739","terrestrial_date":"2014-10-30","sol":"794","ls":"223","season":"Month 8","min_temp":"-68","max_temp":"-5","pressure":"874","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:24","sunset":"17:36","local_uv_irradiance_index":"Moderate","min_gts_temp":"-68","max_gts_temp":"6"},{"id":"736","terrestrial_date":"2014-10-29","sol":"793","ls":"223","season":"Month 8","min_temp":"-71","max_temp":"0","pressure":"877","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:24","sunset":"17:35","local_uv_irradiance_index":"Moderate","min_gts_temp":"-69","max_gts_temp":"4"},{"id":"735","terrestrial_date":"2014-10-28","sol":"792","ls":"222","season":"Month 8","min_temp":"-71","max_temp":"0","pressure":"873","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:23","sunset":"17:35","local_uv_irradiance_index":"Moderate","min_gts_temp":"-69","max_gts_temp":"3"},{"id":"734","terrestrial_date":"2014-10-27","sol":"791","ls":"222","season":"Month 8","min_temp":"-70","max_temp":"0","pressure":"867","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:23","sunset":"17:34","local_uv_irradiance_index":"Moderate","min_gts_temp":"-70","max_gts_temp":"4"},{"id":"733","terrestrial_date":"2014-10-26","sol":"790","ls":"221","season":"Month 8","min_temp":"-68","max_temp":"2","pressure":"864","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:23","sunset":"17:34","local_uv_irradiance_index":"Moderate","min_gts_temp":"-69","max_gts_temp":"7"},{"id":"730","terrestrial_date":"2014-10-25","sol":"789","ls":"220","season":"Month 8","min_temp":"-68","max_temp":"-4","pressure":"862","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:22","sunset":"17:33","local_uv_irradiance_index":"Moderate","min_gts_temp":"-69","max_gts_temp":"5"},{"id":"731","terrestrial_date":"2014-10-24","sol":"788","ls":"220","season":"Month 8","min_temp":"-68","max_temp":"-5","pressure":"862","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:22","sunset":"17:33","local_uv_irradiance_index":"Moderate","min_gts_temp":"-70","max_gts_temp":"5"},{"id":"732","terrestrial_date":"2014-10-23","sol":"787","ls":"219","season":"Month 8","min_temp":"-73","max_temp":"-7","pressure":"860","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:22","sunset":"17:33","local_uv_irradiance_index":"Moderate","min_gts_temp":"-70","max_gts_temp":"5"},{"id":"729","terrestrial_date":"2014-10-22","sol":"786","ls":"218","season":"Month 8","min_temp":"-74","max_temp":"-4","pressure":"861","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:22","sunset":"17:32","local_uv_irradiance_index":"Moderate","min_gts_temp":"-69","max_gts_temp":"5"},{"id":"728","terrestrial_date":"2014-10-21","sol":"785","ls":"218","season":"Month 8","min_temp":"-74","max_temp":"-1","pressure":"858","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:21","sunset":"17:32","local_uv_irradiance_index":"Moderate","min_gts_temp":"-70","max_gts_temp":"6"},{"id":"726","terrestrial_date":"2014-10-20","sol":"784","ls":"217","season":"Month 8","min_temp":"-69","max_temp":"-4","pressure":"857","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:21","sunset":"17:31","local_uv_irradiance_index":"Moderate","min_gts_temp":"-70","max_gts_temp":"9"},{"id":"727","terrestrial_date":"2014-10-19","sol":"783","ls":"216","season":"Month 8","min_temp":"-69","max_temp":"6","pressure":"853","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:21","sunset":"17:31","local_uv_irradiance_index":"Moderate","min_gts_temp":"-70","max_gts_temp":"8"},{"id":"724","terrestrial_date":"2014-10-18","sol":"782","ls":"216","season":"Month 8","min_temp":"-71","max_temp":"9","pressure":"854","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:21","sunset":"17:31","local_uv_irradiance_index":"Moderate","min_gts_temp":"-70","max_gts_temp":"8"},{"id":"725","terrestrial_date":"2014-10-17","sol":"781","ls":"215","season":"Month 8","min_temp":"-74","max_temp":"-5","pressure":"849","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:21","sunset":"17:30","local_uv_irradiance_index":"Moderate","min_gts_temp":"-73","max_gts_temp":"9"},{"id":"723","terrestrial_date":"2014-10-16","sol":"780","ls":"215","season":"Month 8","min_temp":"-72","max_temp":"0","pressure":"852","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:20","sunset":"17:30","local_uv_irradiance_index":"High","min_gts_temp":"-72","max_gts_temp":"14"},{"id":"722","terrestrial_date":"2014-10-15","sol":"779","ls":"214","season":"Month 8","min_temp":"-71","max_temp":"6","pressure":"845","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:20","sunset":"17:30","local_uv_irradiance_index":"High","min_gts_temp":"-73","max_gts_temp":"14"},{"id":"721","terrestrial_date":"2014-10-14","sol":"778","ls":"213","season":"Month 8","min_temp":"-70","max_temp":"6","pressure":"846","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:20","sunset":"17:29","local_uv_irradiance_index":"High","min_gts_temp":"-72","max_gts_temp":"13"},{"id":"720","terrestrial_date":"2014-10-13","sol":"777","ls":"213","season":"Month 8","min_temp":"-72","max_temp":"8","pressure":"841","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:20","sunset":"17:29","local_uv_irradiance_index":"High","min_gts_temp":"-73","max_gts_temp":"14"},{"id":"718","terrestrial_date":"2014-10-12","sol":"776","ls":"212","season":"Month 8","min_temp":"-72","max_temp":"5","pressure":"841","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:20","sunset":"17:29","local_uv_irradiance_index":"High","min_gts_temp":"-72","max_gts_temp":"13"},{"id":"717","terrestrial_date":"2014-10-11","sol":"775","ls":"211","season":"Month 8","min_temp":"-71","max_temp":"3","pressure":"838","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:28","local_uv_irradiance_index":"High","min_gts_temp":"-74","max_gts_temp":"14"},{"id":"719","terrestrial_date":"2014-10-10","sol":"774","ls":"211","season":"Month 8","min_temp":"-73","max_temp":"1","pressure":"838","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:28","local_uv_irradiance_index":"High","min_gts_temp":"-72","max_gts_temp":"14"},{"id":"716","terrestrial_date":"2014-10-09","sol":"773","ls":"210","season":"Month 8","min_temp":"-70","max_temp":"8","pressure":"838","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:28","local_uv_irradiance_index":"High","min_gts_temp":"-72","max_gts_temp":"14"},{"id":"715","terrestrial_date":"2014-10-08","sol":"772","ls":"210","season":"Month 8","min_temp":"-71","max_temp":"8","pressure":"835","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:27","local_uv_irradiance_index":"High","min_gts_temp":"-72","max_gts_temp":"13"},{"id":"714","terrestrial_date":"2014-10-07","sol":"771","ls":"209","season":"Month 7","min_temp":"-71","max_temp":"9","pressure":"836","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:27","local_uv_irradiance_index":"High","min_gts_temp":"-73","max_gts_temp":"14"},{"id":"713","terrestrial_date":"2014-10-06","sol":"770","ls":"208","season":"Month 7","min_temp":"-70","max_temp":"2","pressure":"829","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:27","local_uv_irradiance_index":"High","min_gts_temp":"-73","max_gts_temp":"14"},{"id":"711","terrestrial_date":"2014-10-05","sol":"769","ls":"208","season":"Month 7","min_temp":"-73","max_temp":"4","pressure":"829","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:26","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"15"},{"id":"712","terrestrial_date":"2014-10-04","sol":"768","ls":"207","season":"Month 7","min_temp":"-73","max_temp":"2","pressure":"826","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:26","local_uv_irradiance_index":"High","min_gts_temp":"-72","max_gts_temp":"14"},{"id":"710","terrestrial_date":"2014-10-03","sol":"767","ls":"206","season":"Month 7","min_temp":"-71","max_temp":"9","pressure":"824","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:26","local_uv_irradiance_index":"High","min_gts_temp":"-73","max_gts_temp":"14"},{"id":"709","terrestrial_date":"2014-10-02","sol":"766","ls":"206","season":"Month 7","min_temp":"-70","max_temp":"8","pressure":"824","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:26","local_uv_irradiance_index":"High","min_gts_temp":"-72","max_gts_temp":"14"},{"id":"708","terrestrial_date":"2014-10-01","sol":"765","ls":"205","season":"Month 7","min_temp":"-73","max_temp":"5","pressure":"820","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:25","local_uv_irradiance_index":"High","min_gts_temp":"-74","max_gts_temp":"14"},{"id":"707","terrestrial_date":"2014-09-30","sol":"764","ls":"205","season":"Month 7","min_temp":"-73","max_temp":"4","pressure":"821","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:25","local_uv_irradiance_index":"High","min_gts_temp":"-74","max_gts_temp":"14"},{"id":"706","terrestrial_date":"2014-09-29","sol":"763","ls":"204","season":"Month 7","min_temp":"-78","max_temp":"6","pressure":"817","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:25","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"15"},{"id":"703","terrestrial_date":"2014-09-28","sol":"762","ls":"203","season":"Month 7","min_temp":"-75","max_temp":"7","pressure":"814","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:25","local_uv_irradiance_index":"High","min_gts_temp":"-73","max_gts_temp":"14"},{"id":"705","terrestrial_date":"2014-09-27","sol":"761","ls":"203","season":"Month 7","min_temp":"-72","max_temp":"7","pressure":"814","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:24","local_uv_irradiance_index":"High","min_gts_temp":"-73","max_gts_temp":"14"},{"id":"704","terrestrial_date":"2014-09-25","sol":"760","ls":"202","season":"Month 7","min_temp":"-70","max_temp":"11","pressure":"810","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:24","local_uv_irradiance_index":"High","min_gts_temp":"-73","max_gts_temp":"14"},{"id":"702","terrestrial_date":"2014-09-24","sol":"759","ls":"201","season":"Month 7","min_temp":"-77","max_temp":"8","pressure":"809","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:24","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"13"},{"id":"701","terrestrial_date":"2014-09-23","sol":"758","ls":"201","season":"Month 7","min_temp":"-71","max_temp":"3","pressure":"810","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:24","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"14"},{"id":"700","terrestrial_date":"2014-09-22","sol":"757","ls":"200","season":"Month 7","min_temp":"-73","max_temp":"5","pressure":"807","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:24","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"14"},{"id":"699","terrestrial_date":"2014-09-21","sol":"756","ls":"200","season":"Month 7","min_temp":"-73","max_temp":"3","pressure":"806","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:23","local_uv_irradiance_index":"Moderate","min_gts_temp":"-77","max_gts_temp":"15"},{"id":"697","terrestrial_date":"2014-09-20","sol":"755","ls":"199","season":"Month 7","min_temp":"-74","max_temp":"2","pressure":"806","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:23","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"14"},{"id":"696","terrestrial_date":"2014-09-19","sol":"754","ls":"198","season":"Month 7","min_temp":"-73","max_temp":"6","pressure":"802","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:23","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"14"},{"id":"698","terrestrial_date":"2014-09-18","sol":"753","ls":"198","season":"Month 7","min_temp":"-73","max_temp":"8","pressure":"800","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:23","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"12"},{"id":"694","terrestrial_date":"2014-09-17","sol":"752","ls":"197","season":"Month 7","min_temp":"-71","max_temp":"-3","pressure":"798","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:23","local_uv_irradiance_index":"High","min_gts_temp":"-71","max_gts_temp":"8"},{"id":"695","terrestrial_date":"2014-09-16","sol":"751","ls":"197","season":"Month 7","min_temp":"-72","max_temp":"-6","pressure":"797","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:22","local_uv_irradiance_index":"High","min_gts_temp":"-73","max_gts_temp":"13"},{"id":"693","terrestrial_date":"2014-09-15","sol":"750","ls":"196","season":"Month 7","min_temp":"-72","max_temp":"4","pressure":"796","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:22","local_uv_irradiance_index":"High","min_gts_temp":"-71","max_gts_temp":"8"},{"id":"692","terrestrial_date":"2014-09-14","sol":"749","ls":"195","season":"Month 7","min_temp":"-73","max_temp":"3","pressure":"794","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:22","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"7"},{"id":"690","terrestrial_date":"2014-09-13","sol":"748","ls":"195","season":"Month 7","min_temp":"-71","max_temp":"5","pressure":"791","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:22","local_uv_irradiance_index":"High","min_gts_temp":"-69","max_gts_temp":"10"},{"id":"691","terrestrial_date":"2014-09-12","sol":"747","ls":"194","season":"Month 7","min_temp":"-73","max_temp":"6","pressure":"789","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:22","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"15"},{"id":"688","terrestrial_date":"2014-09-11","sol":"746","ls":"194","season":"Month 7","min_temp":"-76","max_temp":"2","pressure":"788","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:22","local_uv_irradiance_index":"High","min_gts_temp":"-79","max_gts_temp":"14"},{"id":"689","terrestrial_date":"2014-09-10","sol":"745","ls":"193","season":"Month 7","min_temp":"-74","max_temp":"1","pressure":"787","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:22","local_uv_irradiance_index":"High","min_gts_temp":"-79","max_gts_temp":"13"},{"id":"687","terrestrial_date":"2014-09-09","sol":"744","ls":"192","season":"Month 7","min_temp":"-75","max_temp":"-2","pressure":"786","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:21","local_uv_irradiance_index":"High","min_gts_temp":"-74","max_gts_temp":"10"},{"id":"686","terrestrial_date":"2014-09-08","sol":"743","ls":"192","season":"Month 7","min_temp":"-72","max_temp":"0","pressure":"786","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:21","local_uv_irradiance_index":"High","min_gts_temp":"-67","max_gts_temp":"14"},{"id":"684","terrestrial_date":"2014-09-07","sol":"742","ls":"191","season":"Month 7","min_temp":"-72","max_temp":"0","pressure":"784","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:21","local_uv_irradiance_index":"High","min_gts_temp":"-68","max_gts_temp":"4"},{"id":"683","terrestrial_date":"2014-09-06","sol":"741","ls":"191","season":"Month 7","min_temp":"-70","max_temp":"-1","pressure":"784","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:21","local_uv_irradiance_index":"High","min_gts_temp":"-68","max_gts_temp":"4"},{"id":"685","terrestrial_date":"2014-09-05","sol":"740","ls":"190","season":"Month 7","min_temp":"-76","max_temp":"-2","pressure":"782","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:21","local_uv_irradiance_index":"High","min_gts_temp":"-65","max_gts_temp":"2"},{"id":"682","terrestrial_date":"2014-09-04","sol":"739","ls":"189","season":"Month 7","min_temp":"-77","max_temp":"-1","pressure":"779","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:21","local_uv_irradiance_index":"High","min_gts_temp":"-72","max_gts_temp":"4"},{"id":"681","terrestrial_date":"2014-09-03","sol":"738","ls":"189","season":"Month 7","min_temp":"-75","max_temp":"0","pressure":"778","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:21","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"7"},{"id":"680","terrestrial_date":"2014-09-02","sol":"737","ls":"188","season":"Month 7","min_temp":"-74","max_temp":"3","pressure":"777","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:21","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"9"},{"id":"679","terrestrial_date":"2014-09-01","sol":"736","ls":"188","season":"Month 7","min_temp":"-76","max_temp":"0","pressure":"776","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:21","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"9"},{"id":"678","terrestrial_date":"2014-08-31","sol":"735","ls":"187","season":"Month 7","min_temp":"-73","max_temp":"1","pressure":"776","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:21","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"14"},{"id":"675","terrestrial_date":"2014-08-30","sol":"734","ls":"186","season":"Month 7","min_temp":"-73","max_temp":"-3","pressure":"776","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"10"},{"id":"674","terrestrial_date":"2014-08-29","sol":"733","ls":"186","season":"Month 7","min_temp":"-74","max_temp":"-2","pressure":"773","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-79","max_gts_temp":"15"},{"id":"677","terrestrial_date":"2014-08-28","sol":"732","ls":"185","season":"Month 7","min_temp":"-75","max_temp":"-8","pressure":"773","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"13"},{"id":"673","terrestrial_date":"2014-08-27","sol":"731","ls":"185","season":"Month 7","min_temp":"-75","max_temp":"-4","pressure":"771","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"12"},{"id":"676","terrestrial_date":"2014-08-26","sol":"730","ls":"184","season":"Month 7","min_temp":"-76","max_temp":"3","pressure":"770","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"12"},{"id":"672","terrestrial_date":"2014-08-25","sol":"729","ls":"183","season":"Month 7","min_temp":"-75","max_temp":"3","pressure":"768","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"13"},{"id":"670","terrestrial_date":"2014-08-24","sol":"728","ls":"183","season":"Month 7","min_temp":"-74","max_temp":"1","pressure":"766","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"14"},{"id":"671","terrestrial_date":"2014-08-23","sol":"727","ls":"182","season":"Month 7","min_temp":"-76","max_temp":"1","pressure":"766","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-84","max_gts_temp":"14"},{"id":"668","terrestrial_date":"2014-08-22","sol":"726","ls":"182","season":"Month 7","min_temp":"-75","max_temp":"1","pressure":"766","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"14"},{"id":"669","terrestrial_date":"2014-08-21","sol":"725","ls":"181","season":"Month 7","min_temp":"-73","max_temp":"-5","pressure":"764","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"13"},{"id":"667","terrestrial_date":"2014-08-19","sol":"724","ls":"181","season":"Month 7","min_temp":"-74","max_temp":"1","pressure":"763","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:20","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"14"},{"id":"666","terrestrial_date":"2014-08-18","sol":"723","ls":"180","season":"Month 7","min_temp":"-73","max_temp":"2","pressure":"761","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:20","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"14"},{"id":"665","terrestrial_date":"2014-08-17","sol":"722","ls":"179","season":"Month 6","min_temp":"-74","max_temp":"1","pressure":"760","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:20","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"14"},{"id":"664","terrestrial_date":"2014-08-16","sol":"721","ls":"179","season":"Month 6","min_temp":"-73","max_temp":"-5","pressure":"761","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:20","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"12"},{"id":"663","terrestrial_date":"2014-08-15","sol":"720","ls":"178","season":"Month 6","min_temp":"-74","max_temp":"-1","pressure":"760","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:20","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"13"},{"id":"662","terrestrial_date":"2014-08-14","sol":"719","ls":"178","season":"Month 6","min_temp":"-77","max_temp":"-1","pressure":"758","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:20","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-82","max_gts_temp":"12"},{"id":"660","terrestrial_date":"2014-08-13","sol":"718","ls":"177","season":"Month 6","min_temp":"-77","max_temp":"3","pressure":"757","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:20","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"12"},{"id":"661","terrestrial_date":"2014-08-12","sol":"717","ls":"176","season":"Month 6","min_temp":"-76","max_temp":"5","pressure":"756","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:21","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-74","max_gts_temp":"11"},{"id":"659","terrestrial_date":"2014-08-11","sol":"716","ls":"176","season":"Month 6","min_temp":"-75","max_temp":"2","pressure":"755","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:21","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"6"},{"id":"657","terrestrial_date":"2014-08-10","sol":"715","ls":"175","season":"Month 6","min_temp":"-73","max_temp":"2","pressure":"755","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:21","sunset":"17:20","local_uv_irradiance_index":"Moderate","min_gts_temp":"-75","max_gts_temp":"3"},{"id":"655","terrestrial_date":"2014-08-09","sol":"714","ls":"175","season":"Month 6","min_temp":"-76","max_temp":"2","pressure":"754","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:21","sunset":"17:20","local_uv_irradiance_index":"Moderate","min_gts_temp":"-79","max_gts_temp":"8"},{"id":"656","terrestrial_date":"2014-08-08","sol":"713","ls":"174","season":"Month 6","min_temp":"-76","max_temp":"-12","pressure":"754","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:21","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-87","max_gts_temp":"19"},{"id":"658","terrestrial_date":"2014-08-07","sol":"712","ls":"174","season":"Month 6","min_temp":"-77","max_temp":"-10","pressure":"752","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:21","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-87","max_gts_temp":"18"},{"id":"654","terrestrial_date":"2014-08-06","sol":"711","ls":"173","season":"Month 6","min_temp":"-75","max_temp":"-11","pressure":"751","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:22","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-86","max_gts_temp":"18"},{"id":"653","terrestrial_date":"2014-08-05","sol":"710","ls":"172","season":"Month 6","min_temp":"-77","max_temp":"-12","pressure":"751","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:22","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-88","max_gts_temp":"15"},{"id":"652","terrestrial_date":"2014-08-04","sol":"709","ls":"172","season":"Month 6","min_temp":"-73","max_temp":"-11","pressure":"750","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:22","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"16"},{"id":"649","terrestrial_date":"2014-08-03","sol":"708","ls":"171","season":"Month 6","min_temp":"-76","max_temp":"1","pressure":"749","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:22","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"5"},{"id":"651","terrestrial_date":"2014-08-02","sol":"707","ls":"171","season":"Month 6","min_temp":"-76","max_temp":"1","pressure":"749","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:22","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"5"},{"id":"650","terrestrial_date":"2014-08-01","sol":"706","ls":"170","season":"Month 6","min_temp":"-76","max_temp":"0","pressure":"748","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:22","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-82","max_gts_temp":"8"},{"id":"648","terrestrial_date":"2014-07-31","sol":"705","ls":"170","season":"Month 6","min_temp":"-76","max_temp":"-9","pressure":"746","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:23","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-84","max_gts_temp":"14"},{"id":"647","terrestrial_date":"2014-07-30","sol":"704","ls":"169","season":"Month 6","min_temp":"-75","max_temp":"-5","pressure":"747","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:23","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-85","max_gts_temp":"12"},{"id":"646","terrestrial_date":"2014-07-29","sol":"703","ls":"169","season":"Month 6","min_temp":"-75","max_temp":"-6","pressure":"747","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:23","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"9"},{"id":"645","terrestrial_date":"2014-07-28","sol":"702","ls":"168","season":"Month 6","min_temp":"-76","max_temp":"-2","pressure":"745","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:23","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"8"},{"id":"644","terrestrial_date":"2014-07-27","sol":"701","ls":"167","season":"Month 6","min_temp":"-77","max_temp":"-1","pressure":"745","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:23","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-82","max_gts_temp":"8"},{"id":"643","terrestrial_date":"2014-07-26","sol":"700","ls":"167","season":"Month 6","min_temp":"-75","max_temp":"-2","pressure":"745","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:24","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-83","max_gts_temp":"8"},{"id":"642","terrestrial_date":"2014-07-25","sol":"699","ls":"166","season":"Month 6","min_temp":"-76","max_temp":"-2","pressure":"744","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:24","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"9"},{"id":"641","terrestrial_date":"2014-07-24","sol":"698","ls":"166","season":"Month 6","min_temp":"-77","max_temp":"-3","pressure":"743","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:24","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-83","max_gts_temp":"9"},{"id":"640","terrestrial_date":"2014-07-23","sol":"697","ls":"165","season":"Month 6","min_temp":"-74","max_temp":"-4","pressure":"743","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:24","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-84","max_gts_temp":"8"},{"id":"639","terrestrial_date":"2014-07-22","sol":"696","ls":"165","season":"Month 6","min_temp":"-75","max_temp":"-2","pressure":"743","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:24","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-86","max_gts_temp":"9"},{"id":"638","terrestrial_date":"2014-07-21","sol":"695","ls":"164","season":"Month 6","min_temp":"-76","max_temp":"-1","pressure":"741","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:25","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"11"},{"id":"635","terrestrial_date":"2014-07-20","sol":"694","ls":"164","season":"Month 6","min_temp":"-75","max_temp":"-1","pressure":"740","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:25","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"2"},{"id":"636","terrestrial_date":"2014-07-19","sol":"693","ls":"163","season":"Month 6","min_temp":"-76","max_temp":"-2","pressure":"741","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:25","sunset":"17:20","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"2"},{"id":"637","terrestrial_date":"2014-07-18","sol":"692","ls":"162","season":"Month 6","min_temp":"-76","max_temp":"-4","pressure":"742","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:25","sunset":"17:21","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"6"},{"id":"634","terrestrial_date":"2014-07-17","sol":"691","ls":"162","season":"Month 6","min_temp":"-76","max_temp":"-8","pressure":"741","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:25","sunset":"17:21","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"4"},{"id":"633","terrestrial_date":"2014-07-16","sol":"690","ls":"161","season":"Month 6","min_temp":"-77","max_temp":"-7","pressure":"741","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:26","sunset":"17:21","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"5"},{"id":"632","terrestrial_date":"2014-07-15","sol":"689","ls":"161","season":"Month 6","min_temp":"-76","max_temp":"-6","pressure":"742","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:26","sunset":"17:21","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"6"},{"id":"631","terrestrial_date":"2014-07-14","sol":"688","ls":"160","season":"Month 6","min_temp":"-77","max_temp":"-5","pressure":"741","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:26","sunset":"17:21","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"8"},{"id":"630","terrestrial_date":"2014-07-12","sol":"687","ls":"160","season":"Month 6","min_temp":"-77","max_temp":"-2","pressure":"739","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:26","sunset":"17:21","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"3"},{"id":"629","terrestrial_date":"2014-07-11","sol":"686","ls":"159","season":"Month 6","min_temp":"-76","max_temp":"-4","pressure":"738","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:26","sunset":"17:21","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"2"},{"id":"628","terrestrial_date":"2014-07-10","sol":"685","ls":"159","season":"Month 6","min_temp":"-77","max_temp":"-2","pressure":"740","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:27","sunset":"17:21","local_uv_irradiance_index":"High","min_gts_temp":"-85","max_gts_temp":"8"},{"id":"627","terrestrial_date":"2014-07-09","sol":"684","ls":"158","season":"Month 6","min_temp":"-75","max_temp":"-9","pressure":"741","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:27","sunset":"17:21","local_uv_irradiance_index":"Moderate","min_gts_temp":"-82","max_gts_temp":"6"},{"id":"626","terrestrial_date":"2014-07-08","sol":"683","ls":"158","season":"Month 6","min_temp":"-79","max_temp":"-7","pressure":"741","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:27","sunset":"17:21","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"8"},{"id":"625","terrestrial_date":"2014-07-07","sol":"682","ls":"157","season":"Month 6","min_temp":"-77","max_temp":"-16","pressure":"739","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:27","sunset":"17:21","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"2"},{"id":"623","terrestrial_date":"2014-07-06","sol":"681","ls":"156","season":"Month 6","min_temp":"-79","max_temp":"-17","pressure":"738","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:28","sunset":"17:21","local_uv_irradiance_index":"Moderate","min_gts_temp":"-80","max_gts_temp":"2"},{"id":"620","terrestrial_date":"2014-07-05","sol":"680","ls":"156","season":"Month 6","min_temp":"-76","max_temp":"-15","pressure":"740","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:28","sunset":"17:21","local_uv_irradiance_index":"Moderate","min_gts_temp":"-80","max_gts_temp":"1"},{"id":"624","terrestrial_date":"2014-07-04","sol":"679","ls":"155","season":"Month 6","min_temp":"-77","max_temp":"-13","pressure":"738","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:28","sunset":"17:21","local_uv_irradiance_index":"Moderate","min_gts_temp":"-80","max_gts_temp":"1"},{"id":"621","terrestrial_date":"2014-07-03","sol":"678","ls":"155","season":"Month 6","min_temp":"-77","max_temp":"-17","pressure":"739","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:28","sunset":"17:22","local_uv_irradiance_index":"Moderate","min_gts_temp":"-79","max_gts_temp":"-1"},{"id":"622","terrestrial_date":"2014-07-02","sol":"677","ls":"154","season":"Month 6","min_temp":"-78","max_temp":"-12","pressure":"737","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:28","sunset":"17:22","local_uv_irradiance_index":"Moderate","min_gts_temp":"-79","max_gts_temp":"0"},{"id":"619","terrestrial_date":"2014-07-01","sol":"676","ls":"154","season":"Month 6","min_temp":"-80","max_temp":"-17","pressure":"738","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:29","sunset":"17:22","local_uv_irradiance_index":"High","min_gts_temp":"-90","max_gts_temp":"9"},{"id":"618","terrestrial_date":"2014-06-30","sol":"675","ls":"153","season":"Month 6","min_temp":"-80","max_temp":"-12","pressure":"740","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:29","sunset":"17:22","local_uv_irradiance_index":"High","min_gts_temp":"-91","max_gts_temp":"10"},{"id":"617","terrestrial_date":"2014-06-29","sol":"674","ls":"153","season":"Month 6","min_temp":"-80","max_temp":"-17","pressure":"739","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:29","sunset":"17:22","local_uv_irradiance_index":"High","min_gts_temp":"-94","max_gts_temp":"7"},{"id":"616","terrestrial_date":"2014-06-28","sol":"673","ls":"152","season":"Month 6","min_temp":"-78","max_temp":"-16","pressure":"738","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:29","sunset":"17:22","local_uv_irradiance_index":"High","min_gts_temp":"-96","max_gts_temp":"8"},{"id":"615","terrestrial_date":"2014-06-27","sol":"672","ls":"152","season":"Month 6","min_temp":"-78","max_temp":"-16","pressure":"739","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:30","sunset":"17:22","local_uv_irradiance_index":"High","min_gts_temp":"-83","max_gts_temp":"7"},{"id":"614","terrestrial_date":"2014-06-26","sol":"671","ls":"151","season":"Month 6","min_temp":"-79","max_temp":"-15","pressure":"740","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:30","sunset":"17:22","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"6"},{"id":"612","terrestrial_date":"2014-06-25","sol":"670","ls":"151","season":"Month 6","min_temp":"-79","max_temp":"-7","pressure":"737","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:30","sunset":"17:22","local_uv_irradiance_index":"High","min_gts_temp":"-85","max_gts_temp":"4"},{"id":"613","terrestrial_date":"2014-06-24","sol":"669","ls":"150","season":"Month 6","min_temp":"-84","max_temp":"-4","pressure":"735","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:30","sunset":"17:22","local_uv_irradiance_index":"High","min_gts_temp":"-91","max_gts_temp":"8"},{"id":"611","terrestrial_date":"2014-06-23","sol":"668","ls":"150","season":"Month 6","min_temp":"-75","max_temp":"-4","pressure":"734","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:30","sunset":"17:22","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"6"},{"id":"606","terrestrial_date":"2014-06-22","sol":"667","ls":"149","season":"Month 5","min_temp":"-76","max_temp":"-7","pressure":"736","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:31","sunset":"17:22","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"0"},{"id":"608","terrestrial_date":"2014-06-21","sol":"666","ls":"148","season":"Month 5","min_temp":"-77","max_temp":"-7","pressure":"736","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:31","sunset":"17:23","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"0"},{"id":"610","terrestrial_date":"2014-06-20","sol":"665","ls":"148","season":"Month 5","min_temp":"-78","max_temp":"-4","pressure":"735","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:31","sunset":"17:23","local_uv_irradiance_index":"High","min_gts_temp":"-82","max_gts_temp":"7"},{"id":"607","terrestrial_date":"2014-06-19","sol":"664","ls":"147","season":"Month 5","min_temp":"-78","max_temp":"-8","pressure":"732","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:31","sunset":"17:23","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"0"},{"id":"609","terrestrial_date":"2014-06-18","sol":"663","ls":"147","season":"Month 5","min_temp":"-77","max_temp":"-10","pressure":"734","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:32","sunset":"17:23","local_uv_irradiance_index":"High","min_gts_temp":"-83","max_gts_temp":"4"},{"id":"605","terrestrial_date":"2014-06-17","sol":"662","ls":"146","season":"Month 5","min_temp":"-77","max_temp":"-11","pressure":"735","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:32","sunset":"17:23","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"4"},{"id":"604","terrestrial_date":"2014-06-16","sol":"661","ls":"146","season":"Month 5","min_temp":"-76","max_temp":"-10","pressure":"735","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:32","sunset":"17:23","local_uv_irradiance_index":"High","min_gts_temp":"-85","max_gts_temp":"1"},{"id":"601","terrestrial_date":"2014-06-15","sol":"660","ls":"145","season":"Month 5","min_temp":"-78","max_temp":"-12","pressure":"735","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:32","sunset":"17:23","local_uv_irradiance_index":"Moderate","min_gts_temp":"-84","max_gts_temp":"1"},{"id":"603","terrestrial_date":"2014-06-14","sol":"659","ls":"145","season":"Month 5","min_temp":"-77","max_temp":"-14","pressure":"738","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:33","sunset":"17:23","local_uv_irradiance_index":"Moderate","min_gts_temp":"-83","max_gts_temp":"1"},{"id":"602","terrestrial_date":"2014-06-13","sol":"658","ls":"144","season":"Month 5","min_temp":"-79","max_temp":"-10","pressure":"739","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:33","sunset":"17:23","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"1"},{"id":"600","terrestrial_date":"2014-06-12","sol":"657","ls":"144","season":"Month 5","min_temp":"-79","max_temp":"-6","pressure":"739","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:33","sunset":"17:23","local_uv_irradiance_index":"High","min_gts_temp":"-79","max_gts_temp":"1"},{"id":"599","terrestrial_date":"2014-06-11","sol":"656","ls":"143","season":"Month 5","min_temp":"-80","max_temp":"-13","pressure":"740","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:33","sunset":"17:23","local_uv_irradiance_index":"Moderate","min_gts_temp":"-83","max_gts_temp":"-3"},{"id":"598","terrestrial_date":"2014-06-10","sol":"655","ls":"143","season":"Month 5","min_temp":"-77","max_temp":"-14","pressure":"741","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:33","sunset":"17:24","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"0"},{"id":"597","terrestrial_date":"2014-06-09","sol":"654","ls":"142","season":"Month 5","min_temp":"-79","max_temp":"-8","pressure":"742","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:34","sunset":"17:24","local_uv_irradiance_index":"High","min_gts_temp":"-79","max_gts_temp":"-4"},{"id":"596","terrestrial_date":"2014-06-08","sol":"653","ls":"142","season":"Month 5","min_temp":"-80","max_temp":"-13","pressure":"744","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:34","sunset":"17:24","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"-4"},{"id":"594","terrestrial_date":"2014-06-07","sol":"652","ls":"141","season":"Month 5","min_temp":"-79","max_temp":"-12","pressure":"745","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:34","sunset":"17:24","local_uv_irradiance_index":"High","min_gts_temp":"-79","max_gts_temp":"-3"},{"id":"595","terrestrial_date":"2014-06-05","sol":"651","ls":"141","season":"Month 5","min_temp":"-80","max_temp":"-8","pressure":"743","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:34","sunset":"17:24","local_uv_irradiance_index":"High","min_gts_temp":"-84","max_gts_temp":"2"},{"id":"593","terrestrial_date":"2014-06-04","sol":"650","ls":"140","season":"Month 5","min_temp":"-80","max_temp":"-11","pressure":"743","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:35","sunset":"17:24","local_uv_irradiance_index":"High","min_gts_temp":"-85","max_gts_temp":"0"},{"id":"592","terrestrial_date":"2014-06-03","sol":"649","ls":"140","season":"Month 5","min_temp":"-79","max_temp":"-14","pressure":"745","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:35","sunset":"17:24","local_uv_irradiance_index":"High","min_gts_temp":"-85","max_gts_temp":"-3"},{"id":"591","terrestrial_date":"2014-06-02","sol":"648","ls":"139","season":"Month 5","min_temp":"-80","max_temp":"-20","pressure":"746","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:35","sunset":"17:24","local_uv_irradiance_index":"High","min_gts_temp":"-85","max_gts_temp":"-2"},{"id":"590","terrestrial_date":"2014-06-01","sol":"647","ls":"139","season":"Month 5","min_temp":"-79","max_temp":"-19","pressure":"746","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:35","sunset":"17:24","local_uv_irradiance_index":"High","min_gts_temp":"-85","max_gts_temp":"-2"},{"id":"587","terrestrial_date":"2014-05-31","sol":"646","ls":"138","season":"Month 5","min_temp":"-81","max_temp":"-16","pressure":"746","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:35","sunset":"17:24","local_uv_irradiance_index":"High","min_gts_temp":"-87","max_gts_temp":"0"},{"id":"589","terrestrial_date":"2014-05-30","sol":"645","ls":"138","season":"Month 5","min_temp":"-81","max_temp":"-8","pressure":"746","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:36","sunset":"17:25","local_uv_irradiance_index":"High","min_gts_temp":"-86","max_gts_temp":"0"},{"id":"588","terrestrial_date":"2014-05-29","sol":"644","ls":"137","season":"Month 5","min_temp":"-80","max_temp":"-10","pressure":"748","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:36","sunset":"17:25","local_uv_irradiance_index":"High","min_gts_temp":"-84","max_gts_temp":"0"},{"id":"586","terrestrial_date":"2014-05-28","sol":"643","ls":"137","season":"Month 5","min_temp":"-80","max_temp":"-14","pressure":"748","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:36","sunset":"17:25","local_uv_irradiance_index":"High","min_gts_temp":"-88","max_gts_temp":"-2"},{"id":"585","terrestrial_date":"2014-05-27","sol":"642","ls":"136","season":"Month 5","min_temp":"-80","max_temp":"-19","pressure":"749","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:36","sunset":"17:25","local_uv_irradiance_index":"High","min_gts_temp":"-85","max_gts_temp":"-2"},{"id":"584","terrestrial_date":"2014-05-26","sol":"641","ls":"136","season":"Month 5","min_temp":"-81","max_temp":"-19","pressure":"749","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:37","sunset":"17:25","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"-2"},{"id":"583","terrestrial_date":"2014-05-25","sol":"640","ls":"135","season":"Month 5","min_temp":"-81","max_temp":"-11","pressure":"750","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:37","sunset":"17:25","local_uv_irradiance_index":"Moderate","min_gts_temp":"-81","max_gts_temp":"-7"},{"id":"581","terrestrial_date":"2014-05-24","sol":"639","ls":"135","season":"Month 5","min_temp":"-80","max_temp":"-16","pressure":"750","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:37","sunset":"17:25","local_uv_irradiance_index":"Moderate","min_gts_temp":"-80","max_gts_temp":"-9"},{"id":"579","terrestrial_date":"2014-05-23","sol":"638","ls":"134","season":"Month 5","min_temp":"-80","max_temp":"-12","pressure":"751","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:37","sunset":"17:25","local_uv_irradiance_index":"Moderate","min_gts_temp":"-82","max_gts_temp":"-9"},{"id":"580","terrestrial_date":"2014-05-22","sol":"637","ls":"134","season":"Month 5","min_temp":"-80","max_temp":"-18","pressure":"752","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:37","sunset":"17:25","local_uv_irradiance_index":"Moderate","min_gts_temp":"-85","max_gts_temp":"-5"},{"id":"582","terrestrial_date":"2014-05-21","sol":"636","ls":"133","season":"Month 5","min_temp":"-81","max_temp":"-19","pressure":"752","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:38","sunset":"17:25","local_uv_irradiance_index":"High","min_gts_temp":"-89","max_gts_temp":"0"},{"id":"578","terrestrial_date":"2014-05-20","sol":"635","ls":"133","season":"Month 5","min_temp":"-82","max_temp":"-10","pressure":"754","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:38","sunset":"17:26","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"-3"},{"id":"577","terrestrial_date":"2014-05-19","sol":"634","ls":"132","season":"Month 5","min_temp":"-82","max_temp":"-20","pressure":"753","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:38","sunset":"17:26","local_uv_irradiance_index":"High","min_gts_temp":"-85","max_gts_temp":"4"},{"id":"574","terrestrial_date":"2014-05-18","sol":"633","ls":"132","season":"Month 5","min_temp":"-81","max_temp":"-15","pressure":"754","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:38","sunset":"17:26","local_uv_irradiance_index":"High","min_gts_temp":"-85","max_gts_temp":"-3"},{"id":"575","terrestrial_date":"2014-05-17","sol":"632","ls":"131","season":"Month 5","min_temp":"-79","max_temp":"-18","pressure":"755","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:38","sunset":"17:26","local_uv_irradiance_index":"High","min_gts_temp":"-86","max_gts_temp":"-4"},{"id":"576","terrestrial_date":"2014-05-16","sol":"631","ls":"131","season":"Month 5","min_temp":"-81","max_temp":"-18","pressure":"756","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:39","sunset":"17:26","local_uv_irradiance_index":"High","min_gts_temp":"-88","max_gts_temp":"-1"},{"id":"573","terrestrial_date":"2014-05-15","sol":"630","ls":"130","season":"Month 5","min_temp":"-82","max_temp":"-20","pressure":"757","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:39","sunset":"17:26","local_uv_irradiance_index":"High","min_gts_temp":"-93","max_gts_temp":"-2"},{"id":"572","terrestrial_date":"2014-05-14","sol":"629","ls":"130","season":"Month 5","min_temp":"-84","max_temp":"-24","pressure":"759","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:39","sunset":"17:26","local_uv_irradiance_index":"Moderate","min_gts_temp":"-94","max_gts_temp":"-3"},{"id":"571","terrestrial_date":"2014-05-13","sol":"628","ls":"129","season":"Month 5","min_temp":"-81","max_temp":"-23","pressure":"759","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:39","sunset":"17:26","local_uv_irradiance_index":"Moderate","min_gts_temp":"-90","max_gts_temp":"-2"},{"id":"570","terrestrial_date":"2014-05-12","sol":"627","ls":"129","season":"Month 5","min_temp":"-82","max_temp":"-19","pressure":"759","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:39","sunset":"17:26","local_uv_irradiance_index":"Moderate","min_gts_temp":"-93","max_gts_temp":"-3"},{"id":"567","terrestrial_date":"2014-05-11","sol":"626","ls":"128","season":"Month 5","min_temp":"-82","max_temp":"-21","pressure":"760","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:40","sunset":"17:26","local_uv_irradiance_index":"Moderate","min_gts_temp":"-94","max_gts_temp":"-3"},{"id":"569","terrestrial_date":"2014-05-10","sol":"625","ls":"128","season":"Month 5","min_temp":"-81","max_temp":"-24","pressure":"761","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:40","sunset":"17:27","local_uv_irradiance_index":"Moderate","min_gts_temp":"-95","max_gts_temp":"-4"},{"id":"568","terrestrial_date":"2014-05-09","sol":"624","ls":"127","season":"Month 5","min_temp":"-82","max_temp":"-19","pressure":"762","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:40","sunset":"17:27","local_uv_irradiance_index":"Moderate","min_gts_temp":"-92","max_gts_temp":"-2"},{"id":"566","terrestrial_date":"2014-05-08","sol":"623","ls":"127","season":"Month 5","min_temp":"-83","max_temp":"-21","pressure":"763","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:40","sunset":"17:27","local_uv_irradiance_index":"Moderate","min_gts_temp":"-92","max_gts_temp":"-2"},{"id":"565","terrestrial_date":"2014-05-07","sol":"622","ls":"126","season":"Month 5","min_temp":"-84","max_temp":"-19","pressure":"763","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:40","sunset":"17:27","local_uv_irradiance_index":"Moderate","min_gts_temp":"-92","max_gts_temp":"-3"},{"id":"564","terrestrial_date":"2014-05-06","sol":"621","ls":"126","season":"Month 5","min_temp":"-82","max_temp":"-21","pressure":"765","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:41","sunset":"17:27","local_uv_irradiance_index":"Moderate","min_gts_temp":"-93","max_gts_temp":"-3"},{"id":"563","terrestrial_date":"2014-05-05","sol":"620","ls":"125","season":"Month 5","min_temp":"-83","max_temp":"-19","pressure":"765","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:41","sunset":"17:27","local_uv_irradiance_index":"Moderate","min_gts_temp":"-96","max_gts_temp":"-4"},{"id":"560","terrestrial_date":"2014-05-04","sol":"619","ls":"125","season":"Month 5","min_temp":"-82","max_temp":"-22","pressure":"766","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:41","sunset":"17:27","local_uv_irradiance_index":"Low","min_gts_temp":"-96","max_gts_temp":"-3"},{"id":"562","terrestrial_date":"2014-05-03","sol":"618","ls":"124","season":"Month 5","min_temp":"-83","max_temp":"-23","pressure":"769","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:41","sunset":"17:27","local_uv_irradiance_index":"Moderate","min_gts_temp":"-94","max_gts_temp":"-3"},{"id":"561","terrestrial_date":"2014-05-02","sol":"617","ls":"124","season":"Month 5","min_temp":"-84","max_temp":"-19","pressure":"769","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:41","sunset":"17:27","local_uv_irradiance_index":"Moderate","min_gts_temp":"-94","max_gts_temp":"-4"},{"id":"559","terrestrial_date":"2014-05-01","sol":"616","ls":"123","season":"Month 5","min_temp":"-82","max_temp":"-19","pressure":"769","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:42","sunset":"17:27","local_uv_irradiance_index":"Moderate","min_gts_temp":"-93","max_gts_temp":"-4"},{"id":"558","terrestrial_date":"2014-04-29","sol":"615","ls":"123","season":"Month 5","min_temp":"-83","max_temp":"-23","pressure":"771","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:42","sunset":"17:28","local_uv_irradiance_index":"Moderate","min_gts_temp":"-93","max_gts_temp":"-4"},{"id":"557","terrestrial_date":"2014-04-28","sol":"614","ls":"122","season":"Month 5","min_temp":"-82","max_temp":"-19","pressure":"772","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:42","sunset":"17:28","local_uv_irradiance_index":"Moderate","min_gts_temp":"-95","max_gts_temp":"-5"},{"id":"556","terrestrial_date":"2014-04-27","sol":"613","ls":"122","season":"Month 5","min_temp":"-84","max_temp":"-21","pressure":"773","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:42","sunset":"17:28","local_uv_irradiance_index":"Moderate","min_gts_temp":"-98","max_gts_temp":"-4"},{"id":"553","terrestrial_date":"2014-04-26","sol":"612","ls":"121","season":"Month 5","min_temp":"-85","max_temp":"-27","pressure":"774","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:42","sunset":"17:28","local_uv_irradiance_index":"Moderate","min_gts_temp":"-95","max_gts_temp":"-4"},{"id":"555","terrestrial_date":"2014-04-25","sol":"611","ls":"121","season":"Month 5","min_temp":"-84","max_temp":"-23","pressure":"775","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:43","sunset":"17:28","local_uv_irradiance_index":"Moderate","min_gts_temp":"-93","max_gts_temp":"-5"},{"id":"554","terrestrial_date":"2014-04-24","sol":"610","ls":"120","season":"Month 5","min_temp":"-85","max_temp":"-20","pressure":"776","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:43","sunset":"17:28","local_uv_irradiance_index":"Moderate","min_gts_temp":"-94","max_gts_temp":"-5"},{"id":"552","terrestrial_date":"2014-04-23","sol":"609","ls":"120","season":"Month 5","min_temp":"-84","max_temp":"-20","pressure":"777","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:43","sunset":"17:28","local_uv_irradiance_index":"Moderate","min_gts_temp":"-93","max_gts_temp":"-5"},{"id":"551","terrestrial_date":"2014-04-22","sol":"608","ls":"119","season":"Month 4","min_temp":"-85","max_temp":"-21","pressure":"777","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:43","sunset":"17:28","local_uv_irradiance_index":"Moderate","min_gts_temp":"-97","max_gts_temp":"-4"},{"id":"550","terrestrial_date":"2014-04-21","sol":"607","ls":"119","season":"Month 4","min_temp":"-83","max_temp":"-28","pressure":"779","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:43","sunset":"17:28","local_uv_irradiance_index":"Low","min_gts_temp":"-96","max_gts_temp":"-5"},{"id":"549","terrestrial_date":"2014-04-20","sol":"606","ls":"118","season":"Month 4","min_temp":"-84","max_temp":"-27","pressure":"780","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:43","sunset":"17:28","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-8"},{"id":"547","terrestrial_date":"2014-04-19","sol":"605","ls":"118","season":"Month 4","min_temp":"-83","max_temp":"-22","pressure":"781","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:44","sunset":"17:29","local_uv_irradiance_index":"Moderate","min_gts_temp":"-86","max_gts_temp":"-9"},{"id":"546","terrestrial_date":"2014-04-18","sol":"604","ls":"118","season":"Month 4","min_temp":"-84","max_temp":"-17","pressure":"782","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:44","sunset":"17:29","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"-9"},{"id":"548","terrestrial_date":"2014-04-17","sol":"603","ls":"117","season":"Month 4","min_temp":"-83","max_temp":"-15","pressure":"783","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:44","sunset":"17:29","local_uv_irradiance_index":"High","min_gts_temp":"-82","max_gts_temp":"-9"},{"id":"545","terrestrial_date":"2014-04-16","sol":"602","ls":"117","season":"Month 4","min_temp":"-82","max_temp":"-22","pressure":"784","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:44","sunset":"17:29","local_uv_irradiance_index":"Moderate","min_gts_temp":"-82","max_gts_temp":"-11"},{"id":"544","terrestrial_date":"2014-04-15","sol":"601","ls":"116","season":"Month 4","min_temp":"-82","max_temp":"-25","pressure":"785","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:44","sunset":"17:29","local_uv_irradiance_index":"Moderate","min_gts_temp":"-74","max_gts_temp":"-8"},{"id":"541","terrestrial_date":"2014-04-14","sol":"600","ls":"116","season":"Month 4","min_temp":"-81","max_temp":"-25","pressure":"787","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:45","sunset":"17:29","local_uv_irradiance_index":"Moderate","min_gts_temp":"-81","max_gts_temp":"-14"},{"id":"543","terrestrial_date":"2014-04-13","sol":"599","ls":"115","season":"Month 4","min_temp":"-84","max_temp":"-20","pressure":"788","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:45","sunset":"17:29","local_uv_irradiance_index":"Moderate","min_gts_temp":"-82","max_gts_temp":"-9"},{"id":"542","terrestrial_date":"2014-04-12","sol":"598","ls":"115","season":"Month 4","min_temp":"-84","max_temp":"-25","pressure":"787","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:45","sunset":"17:29","local_uv_irradiance_index":"Moderate","min_gts_temp":"-82","max_gts_temp":"-10"},{"id":"540","terrestrial_date":"2014-04-11","sol":"597","ls":"114","season":"Month 4","min_temp":"-84","max_temp":"-26","pressure":"790","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:45","sunset":"17:29","local_uv_irradiance_index":"Moderate","min_gts_temp":"-83","max_gts_temp":"-11"},{"id":"539","terrestrial_date":"2014-04-10","sol":"596","ls":"114","season":"Month 4","min_temp":"-82","max_temp":"-24","pressure":"791","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:45","sunset":"17:29","local_uv_irradiance_index":"Moderate","min_gts_temp":"-84","max_gts_temp":"-10"},{"id":"538","terrestrial_date":"2014-04-09","sol":"595","ls":"113","season":"Month 4","min_temp":"-83","max_temp":"-25","pressure":"792","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:45","sunset":"17:30","local_uv_irradiance_index":"Moderate","min_gts_temp":"-86","max_gts_temp":"-12"},{"id":"537","terrestrial_date":"2014-04-08","sol":"594","ls":"113","season":"Month 4","min_temp":"-83","max_temp":"-22","pressure":"793","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:46","sunset":"17:30","local_uv_irradiance_index":"Moderate","min_gts_temp":"-86","max_gts_temp":"-15"},{"id":"536","terrestrial_date":"2014-04-07","sol":"593","ls":"112","season":"Month 4","min_temp":"-83","max_temp":"-23","pressure":"795","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:46","sunset":"17:30","local_uv_irradiance_index":"High","min_gts_temp":"-87","max_gts_temp":"-11"},{"id":"534","terrestrial_date":"2014-04-06","sol":"592","ls":"112","season":"Month 4","min_temp":"-83","max_temp":"-26","pressure":"795","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:46","sunset":"17:30","local_uv_irradiance_index":"Moderate","min_gts_temp":"-85","max_gts_temp":"-11"},{"id":"533","terrestrial_date":"2014-04-05","sol":"591","ls":"111","season":"Month 4","min_temp":"-82","max_temp":"-26","pressure":"795","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:46","sunset":"17:30","local_uv_irradiance_index":"Moderate","min_gts_temp":"-84","max_gts_temp":"-11"},{"id":"535","terrestrial_date":"2014-04-04","sol":"590","ls":"111","season":"Month 4","min_temp":"-82","max_temp":"-26","pressure":"797","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:46","sunset":"17:30","local_uv_irradiance_index":"Moderate","min_gts_temp":"-85","max_gts_temp":"-11"},{"id":"531","terrestrial_date":"2014-04-03","sol":"589","ls":"110","season":"Month 4","min_temp":"-85","max_temp":"-27","pressure":"798","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:46","sunset":"17:30","local_uv_irradiance_index":"Moderate","min_gts_temp":"-94","max_gts_temp":"-10"},{"id":"532","terrestrial_date":"2014-04-02","sol":"588","ls":"110","season":"Month 4","min_temp":"-84","max_temp":"-24","pressure":"799","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:47","sunset":"17:30","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-8"},{"id":"530","terrestrial_date":"2014-04-01","sol":"587","ls":"109","season":"Month 4","min_temp":"-85","max_temp":"-28","pressure":"801","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:47","sunset":"17:30","local_uv_irradiance_index":"Moderate","min_gts_temp":"-86","max_gts_temp":"-9"},{"id":"529","terrestrial_date":"2014-03-31","sol":"586","ls":"109","season":"Month 4","min_temp":"-82","max_temp":"-24","pressure":"802","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:47","sunset":"17:30","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-8"},{"id":"527","terrestrial_date":"2014-03-30","sol":"585","ls":"109","season":"Month 4","min_temp":"-83","max_temp":"-26","pressure":"802","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:47","sunset":"17:31","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-9"},{"id":"528","terrestrial_date":"2014-03-29","sol":"584","ls":"108","season":"Month 4","min_temp":"-82","max_temp":"-25","pressure":"804","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:47","sunset":"17:31","local_uv_irradiance_index":"Moderate","min_gts_temp":"-89","max_gts_temp":"-8"},{"id":"526","terrestrial_date":"2014-03-28","sol":"583","ls":"108","season":"Month 4","min_temp":"-82","max_temp":"-27","pressure":"806","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:47","sunset":"17:31","local_uv_irradiance_index":"Moderate","min_gts_temp":"-91","max_gts_temp":"-10"},{"id":"525","terrestrial_date":"2014-03-27","sol":"582","ls":"107","season":"Month 4","min_temp":"-84","max_temp":"-27","pressure":"807","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:47","sunset":"17:31","local_uv_irradiance_index":"Moderate","min_gts_temp":"-91","max_gts_temp":"-9"},{"id":"524","terrestrial_date":"2014-03-26","sol":"581","ls":"107","season":"Month 4","min_temp":"-84","max_temp":"-28","pressure":"808","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:48","sunset":"17:31","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-9"},{"id":"523","terrestrial_date":"2014-03-25","sol":"580","ls":"106","season":"Month 4","min_temp":"-83","max_temp":"-24","pressure":"810","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:48","sunset":"17:31","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"-10"},{"id":"522","terrestrial_date":"2014-03-24","sol":"579","ls":"106","season":"Month 4","min_temp":"-82","max_temp":"-22","pressure":"811","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:48","sunset":"17:31","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-8"},{"id":"521","terrestrial_date":"2014-03-22","sol":"578","ls":"105","season":"Month 4","min_temp":"-83","max_temp":"-23","pressure":"812","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:48","sunset":"17:31","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"-9"},{"id":"519","terrestrial_date":"2014-03-21","sol":"577","ls":"105","season":"Month 4","min_temp":"-84","max_temp":"-27","pressure":"813","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:48","sunset":"17:31","local_uv_irradiance_index":"Moderate","min_gts_temp":"-90","max_gts_temp":"-11"},{"id":"520","terrestrial_date":"2014-03-20","sol":"576","ls":"104","season":"Month 4","min_temp":"-84","max_temp":"-26","pressure":"815","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:48","sunset":"17:32","local_uv_irradiance_index":"Moderate","min_gts_temp":"-90","max_gts_temp":"-8"},{"id":"518","terrestrial_date":"2014-03-19","sol":"575","ls":"104","season":"Month 4","min_temp":"-82","max_temp":"-26","pressure":"816","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:49","sunset":"17:32","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-10"},{"id":"517","terrestrial_date":"2014-03-18","sol":"574","ls":"103","season":"Month 4","min_temp":"-85","max_temp":"-23","pressure":"817","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:49","sunset":"17:32","local_uv_irradiance_index":"High","min_gts_temp":"-87","max_gts_temp":"-9"},{"id":"516","terrestrial_date":"2014-03-17","sol":"573","ls":"103","season":"Month 4","min_temp":"-84","max_temp":"-27","pressure":"819","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:49","sunset":"17:32","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"-10"},{"id":"514","terrestrial_date":"2014-03-16","sol":"572","ls":"102","season":"Month 4","min_temp":"-85","max_temp":"-27","pressure":"820","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:49","sunset":"17:32","local_uv_irradiance_index":"Moderate","min_gts_temp":"-89","max_gts_temp":"-8"},{"id":"515","terrestrial_date":"2014-03-15","sol":"571","ls":"102","season":"Month 4","min_temp":"-84","max_temp":"-26","pressure":"821","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:49","sunset":"17:32","local_uv_irradiance_index":"Moderate","min_gts_temp":"-92","max_gts_temp":"-8"},{"id":"513","terrestrial_date":"2014-03-14","sol":"570","ls":"102","season":"Month 4","min_temp":"-84","max_temp":"-26","pressure":"823","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:49","sunset":"17:32","local_uv_irradiance_index":"Moderate","min_gts_temp":"-91","max_gts_temp":"-7"},{"id":"512","terrestrial_date":"2014-03-13","sol":"569","ls":"101","season":"Month 4","min_temp":"-85","max_temp":"-27","pressure":"825","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:49","sunset":"17:32","local_uv_irradiance_index":"Moderate","min_gts_temp":"-90","max_gts_temp":"-7"},{"id":"511","terrestrial_date":"2014-03-12","sol":"568","ls":"101","season":"Month 4","min_temp":"-86","max_temp":"-28","pressure":"825","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:50","sunset":"17:32","local_uv_irradiance_index":"High","min_gts_temp":"-86","max_gts_temp":"-9"},{"id":"510","terrestrial_date":"2014-03-11","sol":"567","ls":"100","season":"Month 4","min_temp":"-86","max_temp":"-28","pressure":"827","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:50","sunset":"17:33","local_uv_irradiance_index":"High","min_gts_temp":"-87","max_gts_temp":"-13"},{"id":"507","terrestrial_date":"2014-03-10","sol":"566","ls":"100","season":"Month 4","min_temp":"-86","max_temp":"-27","pressure":"829","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:50","sunset":"17:33","local_uv_irradiance_index":"High","min_gts_temp":"-86","max_gts_temp":"-13"},{"id":"508","terrestrial_date":"2014-03-09","sol":"565","ls":"99","season":"Month 4","min_temp":"-85","max_temp":"-27","pressure":"830","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:50","sunset":"17:33","local_uv_irradiance_index":"High","min_gts_temp":"-91","max_gts_temp":"-8"},{"id":"509","terrestrial_date":"2014-03-08","sol":"564","ls":"99","season":"Month 4","min_temp":"-86","max_temp":"-27","pressure":"831","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:50","sunset":"17:33","local_uv_irradiance_index":"Moderate","min_gts_temp":"-92","max_gts_temp":"-11"},{"id":"505","terrestrial_date":"2014-03-07","sol":"563","ls":"98","season":"Month 4","min_temp":"-87","max_temp":"-31","pressure":"833","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:50","sunset":"17:33","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-9"},{"id":"506","terrestrial_date":"2014-03-06","sol":"562","ls":"98","season":"Month 4","min_temp":"-85","max_temp":"-23","pressure":"834","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:51","sunset":"17:33","local_uv_irradiance_index":"Moderate","min_gts_temp":"-92","max_gts_temp":"-11"},{"id":"504","terrestrial_date":"2014-03-05","sol":"561","ls":"97","season":"Month 4","min_temp":"-85","max_temp":"-23","pressure":"835","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:51","sunset":"17:33","local_uv_irradiance_index":"Moderate","min_gts_temp":"-89","max_gts_temp":"-5"},{"id":"503","terrestrial_date":"2014-03-04","sol":"560","ls":"97","season":"Month 4","min_temp":"-86","max_temp":"-23","pressure":"836","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:51","sunset":"17:33","local_uv_irradiance_index":"Moderate","min_gts_temp":"-97","max_gts_temp":"-6"},{"id":"502","terrestrial_date":"2014-03-03","sol":"559","ls":"96","season":"Month 4","min_temp":"-85","max_temp":"-27","pressure":"838","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:51","sunset":"17:34","local_uv_irradiance_index":"High","min_gts_temp":"-93","max_gts_temp":"-3"},{"id":"500","terrestrial_date":"2014-03-02","sol":"558","ls":"96","season":"Month 4","min_temp":"-85","max_temp":"-26","pressure":"839","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:51","sunset":"17:34","local_uv_irradiance_index":"Moderate","min_gts_temp":"-93","max_gts_temp":"-6"},{"id":"498","terrestrial_date":"2014-03-01","sol":"557","ls":"96","season":"Month 4","min_temp":"-85","max_temp":"-29","pressure":"840","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:51","sunset":"17:34","local_uv_irradiance_index":"Moderate","min_gts_temp":"-92","max_gts_temp":"-6"},{"id":"501","terrestrial_date":"2014-02-28","sol":"556","ls":"95","season":"Month 4","min_temp":"-85","max_temp":"-29","pressure":"842","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:51","sunset":"17:34","local_uv_irradiance_index":"Moderate","min_gts_temp":"-93","max_gts_temp":"-7"},{"id":"499","terrestrial_date":"2014-02-27","sol":"555","ls":"95","season":"Month 4","min_temp":"-85","max_temp":"-31","pressure":"843","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:52","sunset":"17:34","local_uv_irradiance_index":"Moderate","min_gts_temp":"-95","max_gts_temp":"-9"},{"id":"497","terrestrial_date":"2014-02-26","sol":"554","ls":"94","season":"Month 4","min_temp":"-84","max_temp":"-22","pressure":"843","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:52","sunset":"17:34","local_uv_irradiance_index":"Moderate","min_gts_temp":"-96","max_gts_temp":"-7"},{"id":"496","terrestrial_date":"2014-02-25","sol":"553","ls":"94","season":"Month 4","min_temp":"-84","max_temp":"-26","pressure":"845","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:52","sunset":"17:34","local_uv_irradiance_index":"Moderate","min_gts_temp":"-90","max_gts_temp":"-10"},{"id":"493","terrestrial_date":"2014-02-24","sol":"552","ls":"93","season":"Month 4","min_temp":"-86","max_temp":"-29","pressure":"847","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:52","sunset":"17:34","local_uv_irradiance_index":"High","min_gts_temp":"-91","max_gts_temp":"-11"},{"id":"495","terrestrial_date":"2014-02-23","sol":"551","ls":"93","season":"Month 4","min_temp":"-85","max_temp":"-28","pressure":"848","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:52","sunset":"17:35","local_uv_irradiance_index":"Moderate","min_gts_temp":"-92","max_gts_temp":"-11"},{"id":"494","terrestrial_date":"2014-02-22","sol":"550","ls":"92","season":"Month 4","min_temp":"-85","max_temp":"-27","pressure":"850","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:52","sunset":"17:35","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-9"},{"id":"492","terrestrial_date":"2014-02-21","sol":"549","ls":"92","season":"Month 4","min_temp":"-87","max_temp":"-23","pressure":"851","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:52","sunset":"17:35","local_uv_irradiance_index":"Moderate","min_gts_temp":"-89","max_gts_temp":"-12"},{"id":"491","terrestrial_date":"2014-02-20","sol":"548","ls":"91","season":"Month 4","min_temp":"-86","max_temp":"-28","pressure":"852","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:53","sunset":"17:35","local_uv_irradiance_index":"High","min_gts_temp":"-87","max_gts_temp":"-10"},{"id":"488","terrestrial_date":"2014-02-19","sol":"547","ls":"91","season":"Month 4","min_temp":"-85","max_temp":"-29","pressure":"853","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:53","sunset":"17:35","local_uv_irradiance_index":"High","min_gts_temp":"-89","max_gts_temp":"-10"},{"id":"489","terrestrial_date":"2014-02-18","sol":"546","ls":"91","season":"Month 4","min_temp":"-85","max_temp":"-34","pressure":"855","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:53","sunset":"17:35","local_uv_irradiance_index":"Moderate","min_gts_temp":"-91","max_gts_temp":"-13"},{"id":"490","terrestrial_date":"2014-02-17","sol":"545","ls":"90","season":"Month 4","min_temp":"-85","max_temp":"-29","pressure":"856","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:53","sunset":"17:35","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"-14"},{"id":"487","terrestrial_date":"2014-02-16","sol":"544","ls":"90","season":"Month 4","min_temp":"-86","max_temp":"-27","pressure":"857","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:53","sunset":"17:36","local_uv_irradiance_index":"Moderate","min_gts_temp":"-84","max_gts_temp":"-16"},{"id":"486","terrestrial_date":"2014-02-15","sol":"543","ls":"89","season":"Month 3","min_temp":"-84","max_temp":"-26","pressure":"858","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:53","sunset":"17:36","local_uv_irradiance_index":"Moderate","min_gts_temp":"-86","max_gts_temp":"-16"},{"id":"477","terrestrial_date":"2014-02-13","sol":"542","ls":"89","season":"Month 3","min_temp":"-85","max_temp":"-28","pressure":"859","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:53","sunset":"17:36","local_uv_irradiance_index":"Moderate","min_gts_temp":"-91","max_gts_temp":"-11"},{"id":"482","terrestrial_date":"2014-02-12","sol":"541","ls":"88","season":"Month 3","min_temp":"-84","max_temp":"-27","pressure":"861","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:54","sunset":"17:36","local_uv_irradiance_index":"Moderate","min_gts_temp":"-93","max_gts_temp":"-11"},{"id":"481","terrestrial_date":"2014-02-11","sol":"540","ls":"88","season":"Month 3","min_temp":"-84","max_temp":"-29","pressure":"862","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:54","sunset":"17:36","local_uv_irradiance_index":"Moderate","min_gts_temp":"-85","max_gts_temp":"-18"},{"id":"476","terrestrial_date":"2014-02-10","sol":"539","ls":"87","season":"Month 3","min_temp":"-85","max_temp":"-23","pressure":"864","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:54","sunset":"17:36","local_uv_irradiance_index":"Moderate","min_gts_temp":"-82","max_gts_temp":"-17"},{"id":"472","terrestrial_date":"2014-02-09","sol":"538","ls":"87","season":"Month 3","min_temp":"-85","max_temp":"-25","pressure":"865","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:54","sunset":"17:37","local_uv_irradiance_index":"Moderate","min_gts_temp":"-91","max_gts_temp":"-8"},{"id":"469","terrestrial_date":"2014-02-08","sol":"537","ls":"86","season":"Month 3","min_temp":"-83","max_temp":"-28","pressure":"865","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:54","sunset":"17:37","local_uv_irradiance_index":"Moderate","min_gts_temp":"-92","max_gts_temp":"-11"},{"id":"470","terrestrial_date":"2014-02-07","sol":"536","ls":"86","season":"Month 3","min_temp":"-83","max_temp":"-29","pressure":"867","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:54","sunset":"17:37","local_uv_irradiance_index":"Moderate","min_gts_temp":"-94","max_gts_temp":"-12"},{"id":"468","terrestrial_date":"2014-02-06","sol":"535","ls":"86","season":"Month 3","min_temp":"-88","max_temp":"-29","pressure":"868","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:55","sunset":"17:37","local_uv_irradiance_index":"Moderate","min_gts_temp":"-99","max_gts_temp":"-7"},{"id":"467","terrestrial_date":"2014-02-05","sol":"534","ls":"85","season":"Month 3","min_temp":"-86","max_temp":"-29","pressure":"869","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:55","sunset":"17:37","local_uv_irradiance_index":"Moderate","min_gts_temp":"-101","max_gts_temp":"-6"},{"id":"466","terrestrial_date":"2014-02-04","sol":"533","ls":"85","season":"Month 3","min_temp":"-87","max_temp":"-30","pressure":"871","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:55","sunset":"17:37","local_uv_irradiance_index":"Moderate","min_gts_temp":"-98","max_gts_temp":"-7"},{"id":"464","terrestrial_date":"2014-02-03","sol":"532","ls":"84","season":"Month 3","min_temp":"-88","max_temp":"-23","pressure":"872","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:55","sunset":"17:37","local_uv_irradiance_index":"Moderate","min_gts_temp":"-97","max_gts_temp":"-10"},{"id":"465","terrestrial_date":"2014-02-02","sol":"531","ls":"84","season":"Month 3","min_temp":"-87","max_temp":"-22","pressure":"872","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:55","sunset":"17:38","local_uv_irradiance_index":"Moderate","min_gts_temp":"-99","max_gts_temp":"-12"},{"id":"463","terrestrial_date":"2014-02-01","sol":"530","ls":"83","season":"Month 3","min_temp":"-87","max_temp":"-28","pressure":"873","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:55","sunset":"17:38","local_uv_irradiance_index":"Moderate","min_gts_temp":"-99","max_gts_temp":"-11"},{"id":"462","terrestrial_date":"2014-01-31","sol":"529","ls":"83","season":"Month 3","min_temp":"-87","max_temp":"-23","pressure":"875","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:55","sunset":"17:38","local_uv_irradiance_index":"Moderate","min_gts_temp":"-100","max_gts_temp":"-11"},{"id":"461","terrestrial_date":"2014-01-30","sol":"528","ls":"82","season":"Month 3","min_temp":"-86","max_temp":"-26","pressure":"876","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:56","sunset":"17:38","local_uv_irradiance_index":"Moderate","min_gts_temp":"-93","max_gts_temp":"-9"},{"id":"460","terrestrial_date":"2014-01-29","sol":"527","ls":"82","season":"Month 3","min_temp":"-86","max_temp":"-23","pressure":"877","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:56","sunset":"17:38","local_uv_irradiance_index":"High","min_gts_temp":"-94","max_gts_temp":"-7"},{"id":"459","terrestrial_date":"2014-01-28","sol":"526","ls":"82","season":"Month 3","min_temp":"-87","max_temp":"-24","pressure":"878","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:56","sunset":"17:39","local_uv_irradiance_index":"Moderate","min_gts_temp":"-90","max_gts_temp":"-10"},{"id":"456","terrestrial_date":"2014-01-27","sol":"525","ls":"81","season":"Month 3","min_temp":"-87","max_temp":"-29","pressure":"878","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:56","sunset":"17:39","local_uv_irradiance_index":"Moderate","min_gts_temp":"-91","max_gts_temp":"-11"},{"id":"457","terrestrial_date":"2014-01-26","sol":"524","ls":"81","season":"Month 3","min_temp":"-85","max_temp":"-27","pressure":"880","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:56","sunset":"17:39","local_uv_irradiance_index":"Moderate","min_gts_temp":"-96","max_gts_temp":"-7"},{"id":"458","terrestrial_date":"2014-01-25","sol":"523","ls":"80","season":"Month 3","min_temp":"-85","max_temp":"-25","pressure":"881","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:56","sunset":"17:39","local_uv_irradiance_index":"Moderate","min_gts_temp":"-98","max_gts_temp":"-7"},{"id":"455","terrestrial_date":"2014-01-24","sol":"522","ls":"80","season":"Month 3","min_temp":"-85","max_temp":"-26","pressure":"881","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:57","sunset":"17:39","local_uv_irradiance_index":"Moderate","min_gts_temp":"-98","max_gts_temp":"-7"},{"id":"454","terrestrial_date":"2014-01-23","sol":"521","ls":"79","season":"Month 3","min_temp":"-87","max_temp":"-26","pressure":"882","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:57","sunset":"17:39","local_uv_irradiance_index":"Moderate","min_gts_temp":"-95","max_gts_temp":"-7"},{"id":"453","terrestrial_date":"2014-01-22","sol":"520","ls":"79","season":"Month 3","min_temp":"-86","max_temp":"-24","pressure":"884","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:57","sunset":"17:40","local_uv_irradiance_index":"Moderate","min_gts_temp":"-91","max_gts_temp":"-9"},{"id":"452","terrestrial_date":"2014-01-21","sol":"519","ls":"78","season":"Month 3","min_temp":"-86","max_temp":"-25","pressure":"884","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:57","sunset":"17:40","local_uv_irradiance_index":"Moderate","min_gts_temp":"-86","max_gts_temp":"-11"},{"id":"451","terrestrial_date":"2014-01-20","sol":"518","ls":"78","season":"Month 3","min_temp":"-85","max_temp":"-29","pressure":"885","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:57","sunset":"17:40","local_uv_irradiance_index":"Moderate","min_gts_temp":"-100","max_gts_temp":"-9"},{"id":"448","terrestrial_date":"2014-01-19","sol":"517","ls":"77","season":"Month 3","min_temp":"-86","max_temp":"-27","pressure":"885","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:57","sunset":"17:40","local_uv_irradiance_index":"Moderate","min_gts_temp":"-98","max_gts_temp":"-6"},{"id":"449","terrestrial_date":"2014-01-18","sol":"516","ls":"77","season":"Month 3","min_temp":"-86","max_temp":"-25","pressure":"888","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:58","sunset":"17:40","local_uv_irradiance_index":"Moderate","min_gts_temp":"-99","max_gts_temp":"-6"},{"id":"450","terrestrial_date":"2014-01-17","sol":"515","ls":"77","season":"Month 3","min_temp":"-86","max_temp":"-23","pressure":"888","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:58","sunset":"17:41","local_uv_irradiance_index":"Moderate","min_gts_temp":"-89","max_gts_temp":"-6"},{"id":"447","terrestrial_date":"2014-01-16","sol":"514","ls":"76","season":"Month 3","min_temp":"-86","max_temp":"-29","pressure":"888","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:58","sunset":"17:41","local_uv_irradiance_index":"Moderate","min_gts_temp":"-91","max_gts_temp":"-10"},{"id":"445","terrestrial_date":"2014-01-15","sol":"513","ls":"76","season":"Month 3","min_temp":"-86","max_temp":"-29","pressure":"889","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:58","sunset":"17:41","local_uv_irradiance_index":"Moderate","min_gts_temp":"-91","max_gts_temp":"-10"},{"id":"444","terrestrial_date":"2014-01-14","sol":"512","ls":"75","season":"Month 3","min_temp":"-86","max_temp":"-24","pressure":"890","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:58","sunset":"17:41","local_uv_irradiance_index":"Moderate","min_gts_temp":"-94","max_gts_temp":"-9"},{"id":"446","terrestrial_date":"2014-01-13","sol":"511","ls":"75","season":"Month 3","min_temp":"-85","max_temp":"-31","pressure":"892","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:58","sunset":"17:42","local_uv_irradiance_index":"Moderate","min_gts_temp":"-93","max_gts_temp":"-10"},{"id":"441","terrestrial_date":"2014-01-12","sol":"510","ls":"74","season":"Month 3","min_temp":"-85","max_temp":"-31","pressure":"892","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:59","sunset":"17:42","local_uv_irradiance_index":"Moderate","min_gts_temp":"-92","max_gts_temp":"-13"},{"id":"443","terrestrial_date":"2014-01-11","sol":"509","ls":"74","season":"Month 3","min_temp":"-86","max_temp":"-30","pressure":"895","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:59","sunset":"17:42","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-13"},{"id":"442","terrestrial_date":"2014-01-10","sol":"508","ls":"73","season":"Month 3","min_temp":"-83","max_temp":"-29","pressure":"893","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:59","sunset":"17:42","local_uv_irradiance_index":"Moderate","min_gts_temp":"-91","max_gts_temp":"-11"},{"id":"440","terrestrial_date":"2014-01-09","sol":"507","ls":"73","season":"Month 3","min_temp":"-85","max_temp":"-25","pressure":"894","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:59","sunset":"17:42","local_uv_irradiance_index":"Moderate","min_gts_temp":"-90","max_gts_temp":"-10"},{"id":"439","terrestrial_date":"2014-01-08","sol":"506","ls":"73","season":"Month 3","min_temp":"-86","max_temp":"-27","pressure":"894","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:59","sunset":"17:43","local_uv_irradiance_index":"Moderate","min_gts_temp":"-90","max_gts_temp":"-9"},{"id":"438","terrestrial_date":"2014-01-06","sol":"505","ls":"72","season":"Month 3","min_temp":"-85","max_temp":"-29","pressure":"895","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:00","sunset":"17:43","local_uv_irradiance_index":"Moderate","min_gts_temp":"-91","max_gts_temp":"-8"},{"id":"436","terrestrial_date":"2014-01-05","sol":"504","ls":"72","season":"Month 3","min_temp":"-85","max_temp":"-29","pressure":"895","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:00","sunset":"17:43","local_uv_irradiance_index":"Moderate","min_gts_temp":"-90","max_gts_temp":"-9"},{"id":"483","terrestrial_date":"2014-01-04","sol":"503","ls":"71","season":"Month 3","min_temp":"-86","max_temp":"-28","pressure":"897","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:00","sunset":"17:43","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"-10"},{"id":"437","terrestrial_date":"2014-01-03","sol":"502","ls":"71","season":"Month 3","min_temp":"-87","max_temp":"-30","pressure":"898","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:00","sunset":"17:44","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-8"},{"id":"435","terrestrial_date":"2014-01-02","sol":"501","ls":"70","season":"Month 3","min_temp":"-86","max_temp":"-28","pressure":"898","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:00","sunset":"17:44","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-10"},{"id":"430","terrestrial_date":"2014-01-01","sol":"500","ls":"70","season":"Month 3","min_temp":"-85","max_temp":"-23","pressure":"897","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:01","sunset":"17:44","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-11"},{"id":"432","terrestrial_date":"2013-12-31","sol":"499","ls":"69","season":"Month 3","min_temp":"-84","max_temp":"-30","pressure":"899","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:01","sunset":"17:44","local_uv_irradiance_index":"Moderate","min_gts_temp":"-90","max_gts_temp":"-9"},{"id":"424","terrestrial_date":"2013-12-30","sol":"498","ls":"69","season":"Month 3","min_temp":"-86","max_temp":"-28","pressure":"901","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:01","sunset":"17:45","local_uv_irradiance_index":"Moderate","min_gts_temp":"-90","max_gts_temp":"-10"},{"id":"425","terrestrial_date":"2013-12-29","sol":"497","ls":"69","season":"Month 3","min_temp":"-86","max_temp":"-30","pressure":"901","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:01","sunset":"17:45","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"-9"},{"id":"428","terrestrial_date":"2013-12-28","sol":"496","ls":"68","season":"Month 3","min_temp":"-85","max_temp":"-26","pressure":"901","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:01","sunset":"17:45","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-10"},{"id":"431","terrestrial_date":"2013-12-27","sol":"495","ls":"68","season":"Month 3","min_temp":"-86","max_temp":"-26","pressure":"900","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:02","sunset":"17:45","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-10"},{"id":"429","terrestrial_date":"2013-12-26","sol":"494","ls":"67","season":"Month 3","min_temp":"-85","max_temp":"-24","pressure":"902","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:02","sunset":"17:46","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"-9"},{"id":"426","terrestrial_date":"2013-12-25","sol":"493","ls":"67","season":"Month 3","min_temp":"-84","max_temp":"-32","pressure":"902","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:02","sunset":"17:46","local_uv_irradiance_index":"Moderate","min_gts_temp":"-89","max_gts_temp":"-14"},{"id":"427","terrestrial_date":"2013-12-24","sol":"492","ls":"66","season":"Month 3","min_temp":"-86","max_temp":"-30","pressure":"903","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:02","sunset":"17:46","local_uv_irradiance_index":"Moderate","min_gts_temp":"-92","max_gts_temp":"-13"},{"id":"433","terrestrial_date":"2013-12-23","sol":"491","ls":"66","season":"Month 3","min_temp":"-86","max_temp":"-30","pressure":"903","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:02","sunset":"17:46","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"-13"},{"id":"434","terrestrial_date":"2013-12-22","sol":"490","ls":"65","season":"Month 3","min_temp":"-87","max_temp":"-31","pressure":"903","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:03","sunset":"17:47","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-10"},{"id":"423","terrestrial_date":"2013-12-21","sol":"489","ls":"65","season":"Month 3","min_temp":"-85","max_temp":"-29","pressure":"904","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:03","sunset":"17:47","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-11"},{"id":"480","terrestrial_date":"2013-12-20","sol":"488","ls":"64","season":"Month 3","min_temp":"-87","max_temp":"-23","pressure":"903","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:03","sunset":"17:47","local_uv_irradiance_index":"Moderate","min_gts_temp":"-89","max_gts_temp":"-11"},{"id":"473","terrestrial_date":"2013-12-19","sol":"487","ls":"64","season":"Month 3","min_temp":"-85","max_temp":"-30","pressure":"904","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:03","sunset":"17:47","local_uv_irradiance_index":"Moderate","min_gts_temp":"-91","max_gts_temp":"-8"},{"id":"422","terrestrial_date":"2013-12-18","sol":"486","ls":"64","season":"Month 3","min_temp":"-84","max_temp":"-31","pressure":"904","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:03","sunset":"17:48","local_uv_irradiance_index":"Moderate","min_gts_temp":"-91","max_gts_temp":"-12"},{"id":"484","terrestrial_date":"2013-12-17","sol":"485","ls":"63","season":"Month 3","min_temp":"--","max_temp":"--","pressure":"--","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:04","sunset":"17:48","local_uv_irradiance_index":"--","min_gts_temp":"--","max_gts_temp":"--"},{"id":"485","terrestrial_date":"2013-12-10","sol":"478","ls":"60","season":"Month 3","min_temp":"--","max_temp":"--","pressure":"--","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:05","sunset":"17:50","local_uv_irradiance_index":"--","min_gts_temp":"--","max_gts_temp":"--"},{"id":"421","terrestrial_date":"2013-12-09","sol":"477","ls":"60","season":"Month 3","min_temp":"-85","max_temp":"-26","pressure":"907","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:05","sunset":"17:50","local_uv_irradiance_index":"Moderate","min_gts_temp":"-93","max_gts_temp":"-9"},{"id":"418","terrestrial_date":"2013-12-08","sol":"476","ls":"59","season":"Month 2","min_temp":"-85","max_temp":"-25","pressure":"906","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:06","sunset":"17:51","local_uv_irradiance_index":"Moderate","min_gts_temp":"-90","max_gts_temp":"-7"},{"id":"419","terrestrial_date":"2013-12-07","sol":"475","ls":"59","season":"Month 2","min_temp":"-85","max_temp":"-28","pressure":"906","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:06","sunset":"17:51","local_uv_irradiance_index":"Moderate","min_gts_temp":"-93","max_gts_temp":"-9"},{"id":"420","terrestrial_date":"2013-12-06","sol":"474","ls":"58","season":"Month 2","min_temp":"-84","max_temp":"-26","pressure":"906","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:06","sunset":"17:51","local_uv_irradiance_index":"Moderate","min_gts_temp":"-95","max_gts_temp":"-9"},{"id":"417","terrestrial_date":"2013-12-05","sol":"473","ls":"58","season":"Month 2","min_temp":"-86","max_temp":"-29","pressure":"907","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:06","sunset":"17:52","local_uv_irradiance_index":"Moderate","min_gts_temp":"-90","max_gts_temp":"-8"},{"id":"416","terrestrial_date":"2013-12-04","sol":"472","ls":"57","season":"Month 2","min_temp":"-84","max_temp":"-31","pressure":"907","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:07","sunset":"17:52","local_uv_irradiance_index":"Moderate","min_gts_temp":"-86","max_gts_temp":"-10"},{"id":"479","terrestrial_date":"2013-12-03","sol":"471","ls":"57","season":"Month 2","min_temp":"-84","max_temp":"-26","pressure":"906","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:07","sunset":"17:52","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"-12"},{"id":"475","terrestrial_date":"2013-12-02","sol":"470","ls":"56","season":"Month 2","min_temp":"-85","max_temp":"-26","pressure":"907","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:07","sunset":"17:53","local_uv_irradiance_index":"Moderate","min_gts_temp":"-86","max_gts_temp":"-9"},{"id":"413","terrestrial_date":"2013-11-30","sol":"469","ls":"56","season":"Month 2","min_temp":"-85","max_temp":"-29","pressure":"908","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:07","sunset":"17:53","local_uv_irradiance_index":"Moderate","min_gts_temp":"-86","max_gts_temp":"-12"},{"id":"414","terrestrial_date":"2013-11-29","sol":"468","ls":"55","season":"Month 2","min_temp":"-85","max_temp":"-29","pressure":"907","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:07","sunset":"17:53","local_uv_irradiance_index":"Moderate","min_gts_temp":"-86","max_gts_temp":"-14"},{"id":"411","terrestrial_date":"2013-11-28","sol":"467","ls":"55","season":"Month 2","min_temp":"-84","max_temp":"-28","pressure":"907","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:08","sunset":"17:54","local_uv_irradiance_index":"Moderate","min_gts_temp":"-85","max_gts_temp":"-11"},{"id":"415","terrestrial_date":"2013-11-27","sol":"466","ls":"55","season":"Month 2","min_temp":"-85","max_temp":"-26","pressure":"907","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:08","sunset":"17:54","local_uv_irradiance_index":"Moderate","min_gts_temp":"-84","max_gts_temp":"-12"},{"id":"412","terrestrial_date":"2013-11-26","sol":"465","ls":"54","season":"Month 2","min_temp":"-85","max_temp":"-23","pressure":"906","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:08","sunset":"17:54","local_uv_irradiance_index":"High","min_gts_temp":"-85","max_gts_temp":"-13"},{"id":"410","terrestrial_date":"2013-11-25","sol":"464","ls":"54","season":"Month 2","min_temp":"-84","max_temp":"-26","pressure":"906","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:08","sunset":"17:55","local_uv_irradiance_index":"High","min_gts_temp":"-87","max_gts_temp":"-13"},{"id":"409","terrestrial_date":"2013-11-24","sol":"463","ls":"53","season":"Month 2","min_temp":"-86","max_temp":"-26","pressure":"906","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:09","sunset":"17:55","local_uv_irradiance_index":"High","min_gts_temp":"-88","max_gts_temp":"-13"},{"id":"408","terrestrial_date":"2013-11-23","sol":"462","ls":"53","season":"Month 2","min_temp":"--","max_temp":"--","pressure":"--","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:09","sunset":"17:55","local_uv_irradiance_index":"--","min_gts_temp":"--","max_gts_temp":"--"},{"id":"474","terrestrial_date":"2013-11-18","sol":"457","ls":"51","season":"Month 2","min_temp":"--","max_temp":"--","pressure":"--","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:10","sunset":"17:57","local_uv_irradiance_index":"--","min_gts_temp":"--","max_gts_temp":"--"},{"id":"406","terrestrial_date":"2013-11-17","sol":"456","ls":"50","season":"Month 2","min_temp":"-83","max_temp":"-26","pressure":"905","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:11","sunset":"17:57","local_uv_irradiance_index":"High","min_gts_temp":"-89","max_gts_temp":"-12"},{"id":"407","terrestrial_date":"2013-11-16","sol":"455","ls":"50","season":"Month 2","min_temp":"-84","max_temp":"-28","pressure":"905","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:11","sunset":"17:58","local_uv_irradiance_index":"Moderate","min_gts_temp":"-82","max_gts_temp":"-12"},{"id":"478","terrestrial_date":"2013-11-15","sol":"454","ls":"49","season":"Month 2","min_temp":"--","max_temp":"--","pressure":"--","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:11","sunset":"17:58","local_uv_irradiance_index":"--","min_gts_temp":"--","max_gts_temp":"--"},{"id":"471","terrestrial_date":"2013-11-05","sol":"444","ls":"45","season":"Month 2","min_temp":"--","max_temp":"--","pressure":"--","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:14","sunset":"18:02","local_uv_irradiance_index":"--","min_gts_temp":"--","max_gts_temp":"--"},{"id":"403","terrestrial_date":"2013-11-04","sol":"443","ls":"44","season":"Month 2","min_temp":"-81","max_temp":"-24","pressure":"901","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:14","sunset":"18:02","local_uv_irradiance_index":"Moderate","min_gts_temp":"-79","max_gts_temp":"-11"},{"id":"405","terrestrial_date":"2013-11-03","sol":"442","ls":"44","season":"Month 2","min_temp":"-80","max_temp":"-22","pressure":"900","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:14","sunset":"18:03","local_uv_irradiance_index":"Moderate","min_gts_temp":"-79","max_gts_temp":"-9"},{"id":"402","terrestrial_date":"2013-11-02","sol":"441","ls":"43","season":"Month 2","min_temp":"-81","max_temp":"-23","pressure":"900","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:15","sunset":"18:03","local_uv_irradiance_index":"Moderate","min_gts_temp":"-79","max_gts_temp":"-10"},{"id":"404","terrestrial_date":"2013-11-01","sol":"440","ls":"43","season":"Month 2","min_temp":"-80","max_temp":"-25","pressure":"899","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:15","sunset":"18:03","local_uv_irradiance_index":"Moderate","min_gts_temp":"-79","max_gts_temp":"-11"},{"id":"401","terrestrial_date":"2013-10-31","sol":"439","ls":"42","season":"Month 2","min_temp":"-80","max_temp":"-21","pressure":"899","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:15","sunset":"18:04","local_uv_irradiance_index":"Moderate","min_gts_temp":"-79","max_gts_temp":"-15"},{"id":"400","terrestrial_date":"2013-10-30","sol":"438","ls":"42","season":"Month 2","min_temp":"-79","max_temp":"-26","pressure":"899","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:15","sunset":"18:04","local_uv_irradiance_index":"Moderate","min_gts_temp":"-84","max_gts_temp":"-14"},{"id":"399","terrestrial_date":"2013-10-29","sol":"437","ls":"41","season":"Month 2","min_temp":"-82","max_temp":"-27","pressure":"898","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:16","sunset":"18:05","local_uv_irradiance_index":"Moderate","min_gts_temp":"-89","max_gts_temp":"-10"},{"id":"398","terrestrial_date":"2013-10-28","sol":"436","ls":"41","season":"Month 2","min_temp":"-81","max_temp":"-24","pressure":"897","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:16","sunset":"18:05","local_uv_irradiance_index":"Moderate","min_gts_temp":"-81","max_gts_temp":"-7"},{"id":"396","terrestrial_date":"2013-10-27","sol":"435","ls":"40","season":"Month 2","min_temp":"-81","max_temp":"-24","pressure":"896","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:16","sunset":"18:05","local_uv_irradiance_index":"Moderate","min_gts_temp":"-82","max_gts_temp":"-9"},{"id":"397","terrestrial_date":"2013-10-26","sol":"434","ls":"40","season":"Month 2","min_temp":"-80","max_temp":"-25","pressure":"896","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:17","sunset":"18:06","local_uv_irradiance_index":"Moderate","min_gts_temp":"-82","max_gts_temp":"-11"},{"id":"394","terrestrial_date":"2013-10-24","sol":"433","ls":"40","season":"Month 2","min_temp":"-81","max_temp":"-26","pressure":"895","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:17","sunset":"18:06","local_uv_irradiance_index":"Moderate","min_gts_temp":"-86","max_gts_temp":"-9"},{"id":"395","terrestrial_date":"2013-10-23","sol":"432","ls":"39","season":"Month 2","min_temp":"-80","max_temp":"-26","pressure":"896","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:17","sunset":"18:06","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-9"},{"id":"389","terrestrial_date":"2013-10-22","sol":"431","ls":"39","season":"Month 2","min_temp":"-83","max_temp":"-24","pressure":"895","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:18","sunset":"18:07","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"-9"},{"id":"390","terrestrial_date":"2013-10-21","sol":"430","ls":"38","season":"Month 2","min_temp":"-82","max_temp":"-24","pressure":"896","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:18","sunset":"18:07","local_uv_irradiance_index":"Moderate","min_gts_temp":"-88","max_gts_temp":"-5"},{"id":"387","terrestrial_date":"2013-10-20","sol":"429","ls":"38","season":"Month 2","min_temp":"-82","max_temp":"-21","pressure":"895","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:18","sunset":"18:08","local_uv_irradiance_index":"Moderate","min_gts_temp":"-86","max_gts_temp":"-5"},{"id":"391","terrestrial_date":"2013-10-19","sol":"428","ls":"37","season":"Month 2","min_temp":"-81","max_temp":"-23","pressure":"894","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:18","sunset":"18:08","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"-6"},{"id":"392","terrestrial_date":"2013-10-18","sol":"427","ls":"37","season":"Month 2","min_temp":"-81","max_temp":"-21","pressure":"893","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:19","sunset":"18:09","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"-4"},{"id":"388","terrestrial_date":"2013-10-17","sol":"426","ls":"36","season":"Month 2","min_temp":"-79","max_temp":"-22","pressure":"893","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:19","sunset":"18:09","local_uv_irradiance_index":"Moderate","min_gts_temp":"-89","max_gts_temp":"-5"},{"id":"393","terrestrial_date":"2013-10-16","sol":"425","ls":"36","season":"Month 2","min_temp":"-81","max_temp":"-21","pressure":"893","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:19","sunset":"18:09","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"-5"},{"id":"386","terrestrial_date":"2013-10-15","sol":"424","ls":"35","season":"Month 2","min_temp":"-81","max_temp":"-22","pressure":"893","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:20","sunset":"18:10","local_uv_irradiance_index":"Moderate","min_gts_temp":"-82","max_gts_temp":"-4"},{"id":"383","terrestrial_date":"2013-10-14","sol":"423","ls":"35","season":"Month 2","min_temp":"-81","max_temp":"-24","pressure":"892","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:20","sunset":"18:10","local_uv_irradiance_index":"Moderate","min_gts_temp":"-81","max_gts_temp":"-11"},{"id":"384","terrestrial_date":"2013-10-13","sol":"422","ls":"34","season":"Month 2","min_temp":"-82","max_temp":"-20","pressure":"891","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:20","sunset":"18:11","local_uv_irradiance_index":"Moderate","min_gts_temp":"-85","max_gts_temp":"-7"},{"id":"382","terrestrial_date":"2013-10-12","sol":"421","ls":"34","season":"Month 2","min_temp":"-81","max_temp":"-24","pressure":"890","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:20","sunset":"18:11","local_uv_irradiance_index":"High","min_gts_temp":"-85","max_gts_temp":"-7"},{"id":"385","terrestrial_date":"2013-10-11","sol":"420","ls":"33","season":"Month 2","min_temp":"-80","max_temp":"-19","pressure":"892","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:21","sunset":"18:11","local_uv_irradiance_index":"High","min_gts_temp":"-86","max_gts_temp":"-7"},{"id":"381","terrestrial_date":"2013-10-10","sol":"419","ls":"33","season":"Month 2","min_temp":"-82","max_temp":"-24","pressure":"891","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:21","sunset":"18:12","local_uv_irradiance_index":"High","min_gts_temp":"-87","max_gts_temp":"-5"},{"id":"380","terrestrial_date":"2013-10-09","sol":"418","ls":"33","season":"Month 2","min_temp":"-79","max_temp":"-21","pressure":"891","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:21","sunset":"18:12","local_uv_irradiance_index":"High","min_gts_temp":"-87","max_gts_temp":"-3"},{"id":"379","terrestrial_date":"2013-10-08","sol":"417","ls":"32","season":"Month 2","min_temp":"-82","max_temp":"-21","pressure":"890","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:22","sunset":"18:13","local_uv_irradiance_index":"High","min_gts_temp":"-87","max_gts_temp":"-2"},{"id":"378","terrestrial_date":"2013-10-07","sol":"416","ls":"32","season":"Month 2","min_temp":"-79","max_temp":"-18","pressure":"889","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:22","sunset":"18:13","local_uv_irradiance_index":"High","min_gts_temp":"-84","max_gts_temp":"-6"},{"id":"377","terrestrial_date":"2013-10-06","sol":"415","ls":"31","season":"Month 2","min_temp":"-82","max_temp":"-19","pressure":"890","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:22","sunset":"18:14","local_uv_irradiance_index":"High","min_gts_temp":"-86","max_gts_temp":"-4"},{"id":"375","terrestrial_date":"2013-10-05","sol":"414","ls":"31","season":"Month 2","min_temp":"-79","max_temp":"-18","pressure":"889","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:23","sunset":"18:14","local_uv_irradiance_index":"High","min_gts_temp":"-87","max_gts_temp":"-4"},{"id":"376","terrestrial_date":"2013-10-04","sol":"413","ls":"30","season":"Month 2","min_temp":"-82","max_temp":"-22","pressure":"888","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:23","sunset":"18:14","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"-2"},{"id":"371","terrestrial_date":"2013-10-03","sol":"412","ls":"30","season":"Month 2","min_temp":"-80","max_temp":"-22","pressure":"888","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:23","sunset":"18:15","local_uv_irradiance_index":"Moderate","min_gts_temp":"-79","max_gts_temp":"-2"},{"id":"372","terrestrial_date":"2013-10-02","sol":"411","ls":"29","season":"Month 1","min_temp":"-82","max_temp":"-17","pressure":"887","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:24","sunset":"18:15","local_uv_irradiance_index":"Moderate","min_gts_temp":"-81","max_gts_temp":"-8"},{"id":"373","terrestrial_date":"2013-10-01","sol":"410","ls":"29","season":"Month 1","min_temp":"-81","max_temp":"-14","pressure":"888","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:24","sunset":"18:16","local_uv_irradiance_index":"High","min_gts_temp":"-84","max_gts_temp":"-7"},{"id":"368","terrestrial_date":"2013-09-30","sol":"409","ls":"28","season":"Month 1","min_temp":"-81","max_temp":"-17","pressure":"887","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:24","sunset":"18:16","local_uv_irradiance_index":"Moderate","min_gts_temp":"-95","max_gts_temp":"-2"},{"id":"369","terrestrial_date":"2013-09-29","sol":"408","ls":"28","season":"Month 1","min_temp":"-80","max_temp":"-16","pressure":"887","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:24","sunset":"18:17","local_uv_irradiance_index":"Moderate","min_gts_temp":"-95","max_gts_temp":"0"},{"id":"370","terrestrial_date":"2013-09-28","sol":"407","ls":"27","season":"Month 1","min_temp":"-81","max_temp":"-17","pressure":"887","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:25","sunset":"18:17","local_uv_irradiance_index":"Moderate","min_gts_temp":"-94","max_gts_temp":"0"},{"id":"374","terrestrial_date":"2013-09-27","sol":"406","ls":"27","season":"Month 1","min_temp":"-81","max_temp":"-15","pressure":"886","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:25","sunset":"18:17","local_uv_irradiance_index":"High","min_gts_temp":"-86","max_gts_temp":"1"},{"id":"366","terrestrial_date":"2013-09-26","sol":"405","ls":"26","season":"Month 1","min_temp":"-82","max_temp":"-25","pressure":"885","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:25","sunset":"18:18","local_uv_irradiance_index":"Moderate","min_gts_temp":"-87","max_gts_temp":"-6"},{"id":"367","terrestrial_date":"2013-09-25","sol":"404","ls":"26","season":"Month 1","min_temp":"-78","max_temp":"-20","pressure":"884","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:26","sunset":"18:18","local_uv_irradiance_index":"Moderate","min_gts_temp":"-85","max_gts_temp":"-6"},{"id":"364","terrestrial_date":"2013-09-24","sol":"403","ls":"25","season":"Month 1","min_temp":"-80","max_temp":"-18","pressure":"883","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:26","sunset":"18:19","local_uv_irradiance_index":"High","min_gts_temp":"-89","max_gts_temp":"-5"},{"id":"365","terrestrial_date":"2013-09-23","sol":"402","ls":"25","season":"Month 1","min_temp":"-78","max_temp":"-18","pressure":"883","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:26","sunset":"18:19","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"-3"},{"id":"362","terrestrial_date":"2013-09-22","sol":"401","ls":"25","season":"Month 1","min_temp":"-79","max_temp":"-15","pressure":"882","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:27","sunset":"18:20","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"-5"},{"id":"363","terrestrial_date":"2013-09-21","sol":"400","ls":"24","season":"Month 1","min_temp":"-79","max_temp":"-16","pressure":"881","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:27","sunset":"18:20","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"-6"},{"id":"361","terrestrial_date":"2013-09-20","sol":"399","ls":"24","season":"Month 1","min_temp":"-79","max_temp":"-16","pressure":"881","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:27","sunset":"18:20","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"-4"},{"id":"360","terrestrial_date":"2013-09-19","sol":"398","ls":"23","season":"Month 1","min_temp":"-79","max_temp":"-14","pressure":"880","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:28","sunset":"18:21","local_uv_irradiance_index":"High","min_gts_temp":"-79","max_gts_temp":"-6"},{"id":"359","terrestrial_date":"2013-09-18","sol":"397","ls":"23","season":"Month 1","min_temp":"-75","max_temp":"-15","pressure":"880","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:28","sunset":"18:21","local_uv_irradiance_index":"High","min_gts_temp":"-79","max_gts_temp":"-7"},{"id":"358","terrestrial_date":"2013-09-16","sol":"396","ls":"22","season":"Month 1","min_temp":"-78","max_temp":"-15","pressure":"879","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:28","sunset":"18:22","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"-5"},{"id":"357","terrestrial_date":"2013-09-15","sol":"395","ls":"22","season":"Month 1","min_temp":"-77","max_temp":"-20","pressure":"878","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:28","sunset":"18:22","local_uv_irradiance_index":"High","min_gts_temp":"-79","max_gts_temp":"-5"},{"id":"356","terrestrial_date":"2013-09-14","sol":"394","ls":"21","season":"Month 1","min_temp":"-79","max_temp":"-18","pressure":"878","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:29","sunset":"18:23","local_uv_irradiance_index":"High","min_gts_temp":"-79","max_gts_temp":"-4"},{"id":"355","terrestrial_date":"2013-09-13","sol":"393","ls":"21","season":"Month 1","min_temp":"-76","max_temp":"-18","pressure":"877","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:29","sunset":"18:23","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"-5"},{"id":"354","terrestrial_date":"2013-09-12","sol":"392","ls":"20","season":"Month 1","min_temp":"-77","max_temp":"-17","pressure":"876","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:29","sunset":"18:23","local_uv_irradiance_index":"High","min_gts_temp":"-74","max_gts_temp":"-4"},{"id":"353","terrestrial_date":"2013-09-11","sol":"391","ls":"20","season":"Month 1","min_temp":"-78","max_temp":"-17","pressure":"875","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:30","sunset":"18:24","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"-9"},{"id":"352","terrestrial_date":"2013-09-10","sol":"390","ls":"19","season":"Month 1","min_temp":"-78","max_temp":"-16","pressure":"875","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:30","sunset":"18:24","local_uv_irradiance_index":"High","min_gts_temp":"-79","max_gts_temp":"-1"},{"id":"348","terrestrial_date":"2013-09-09","sol":"389","ls":"19","season":"Month 1","min_temp":"-79","max_temp":"-14","pressure":"875","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:30","sunset":"18:25","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"-7"},{"id":"350","terrestrial_date":"2013-09-08","sol":"388","ls":"18","season":"Month 1","min_temp":"-79","max_temp":"-13","pressure":"875","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:31","sunset":"18:25","local_uv_irradiance_index":"High","min_gts_temp":"-79","max_gts_temp":"-6"},{"id":"349","terrestrial_date":"2013-09-07","sol":"387","ls":"18","season":"Month 1","min_temp":"-78","max_temp":"-13","pressure":"874","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:31","sunset":"18:26","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"-7"},{"id":"347","terrestrial_date":"2013-09-06","sol":"386","ls":"17","season":"Month 1","min_temp":"-77","max_temp":"-12","pressure":"873","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:31","sunset":"18:26","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"-7"},{"id":"351","terrestrial_date":"2013-09-05","sol":"385","ls":"17","season":"Month 1","min_temp":"-78","max_temp":"-12","pressure":"874","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:31","sunset":"18:26","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"-3"},{"id":"346","terrestrial_date":"2013-09-04","sol":"384","ls":"16","season":"Month 1","min_temp":"-77","max_temp":"-12","pressure":"875","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:32","sunset":"18:27","local_uv_irradiance_index":"High","min_gts_temp":"-84","max_gts_temp":"-4"},{"id":"342","terrestrial_date":"2013-09-03","sol":"383","ls":"16","season":"Month 1","min_temp":"-77","max_temp":"-12","pressure":"874","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:32","sunset":"18:27","local_uv_irradiance_index":"Moderate","min_gts_temp":"-81","max_gts_temp":"-6"},{"id":"344","terrestrial_date":"2013-09-02","sol":"382","ls":"15","season":"Month 1","min_temp":"-76","max_temp":"-14","pressure":"872","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:32","sunset":"18:28","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"-4"},{"id":"345","terrestrial_date":"2013-09-01","sol":"381","ls":"15","season":"Month 1","min_temp":"-79","max_temp":"-13","pressure":"871","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:33","sunset":"18:28","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"-4"},{"id":"343","terrestrial_date":"2013-08-31","sol":"380","ls":"14","season":"Month 1","min_temp":"-79","max_temp":"-13","pressure":"870","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:33","sunset":"18:29","local_uv_irradiance_index":"High","min_gts_temp":"-82","max_gts_temp":"-4"},{"id":"341","terrestrial_date":"2013-08-30","sol":"379","ls":"14","season":"Month 1","min_temp":"-79","max_temp":"-12","pressure":"870","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:33","sunset":"18:29","local_uv_irradiance_index":"High","min_gts_temp":"-84","max_gts_temp":"-2"},{"id":"339","terrestrial_date":"2013-08-29","sol":"378","ls":"13","season":"Month 1","min_temp":"-78","max_temp":"-18","pressure":"869","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:33","sunset":"18:29","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"-4"},{"id":"338","terrestrial_date":"2013-08-28","sol":"377","ls":"13","season":"Month 1","min_temp":"-78","max_temp":"-12","pressure":"870","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:34","sunset":"18:30","local_uv_irradiance_index":"High","min_gts_temp":"-86","max_gts_temp":"2"},{"id":"340","terrestrial_date":"2013-08-27","sol":"376","ls":"12","season":"Month 1","min_temp":"-78","max_temp":"-11","pressure":"870","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:34","sunset":"18:30","local_uv_irradiance_index":"High","min_gts_temp":"-82","max_gts_temp":"-2"},{"id":"336","terrestrial_date":"2013-08-26","sol":"375","ls":"12","season":"Month 1","min_temp":"-77","max_temp":"-9","pressure":"867","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:34","sunset":"18:31","local_uv_irradiance_index":"High","min_gts_temp":"-83","max_gts_temp":"-1"},{"id":"337","terrestrial_date":"2013-08-25","sol":"374","ls":"11","season":"Month 1","min_temp":"-79","max_temp":"-9","pressure":"866","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:35","sunset":"18:31","local_uv_irradiance_index":"High","min_gts_temp":"-84","max_gts_temp":"0"},{"id":"335","terrestrial_date":"2013-08-24","sol":"373","ls":"11","season":"Month 1","min_temp":"-79","max_temp":"-8","pressure":"866","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:35","sunset":"18:32","local_uv_irradiance_index":"High","min_gts_temp":"-85","max_gts_temp":"0"},{"id":"334","terrestrial_date":"2013-08-23","sol":"372","ls":"10","season":"Month 1","min_temp":"-76","max_temp":"-9","pressure":"866","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:35","sunset":"18:32","local_uv_irradiance_index":"High","min_gts_temp":"-82","max_gts_temp":"2"},{"id":"333","terrestrial_date":"2013-08-22","sol":"371","ls":"10","season":"Month 1","min_temp":"-77","max_temp":"-11","pressure":"865","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:35","sunset":"18:32","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"-3"},{"id":"332","terrestrial_date":"2013-08-21","sol":"370","ls":"9","season":"Month 1","min_temp":"-79","max_temp":"-9","pressure":"865","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:36","sunset":"18:33","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"-1"},{"id":"331","terrestrial_date":"2013-08-20","sol":"369","ls":"9","season":"Month 1","min_temp":"-75","max_temp":"-9","pressure":"865","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:36","sunset":"18:33","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"3"},{"id":"330","terrestrial_date":"2013-08-19","sol":"368","ls":"8","season":"Month 1","min_temp":"-77","max_temp":"-9","pressure":"863","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:36","sunset":"18:34","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"-3"},{"id":"328","terrestrial_date":"2013-08-18","sol":"367","ls":"8","season":"Month 1","min_temp":"-76","max_temp":"-9","pressure":"862","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:37","sunset":"18:34","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"-2"},{"id":"326","terrestrial_date":"2013-08-17","sol":"366","ls":"7","season":"Month 1","min_temp":"-76","max_temp":"-12","pressure":"861","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:37","sunset":"18:34","local_uv_irradiance_index":"High","min_gts_temp":"-82","max_gts_temp":"-3"},{"id":"329","terrestrial_date":"2013-08-16","sol":"365","ls":"7","season":"Month 1","min_temp":"--","max_temp":"--","pressure":"--","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:37","sunset":"18:35","local_uv_irradiance_index":"--","min_gts_temp":"--","max_gts_temp":"--"},{"id":"327","terrestrial_date":"2013-08-08","sol":"358","ls":"3","season":"Month 1","min_temp":"--","max_temp":"--","pressure":"--","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:39","sunset":"18:38","local_uv_irradiance_index":"--","min_gts_temp":"--","max_gts_temp":"--"},{"id":"325","terrestrial_date":"2013-08-07","sol":"357","ls":"3","season":"Month 1","min_temp":"-76","max_temp":"-7","pressure":"857","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:39","sunset":"18:38","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"-1"},{"id":"324","terrestrial_date":"2013-08-06","sol":"356","ls":"2","season":"Month 1","min_temp":"-77","max_temp":"-7","pressure":"856","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:39","sunset":"18:38","local_uv_irradiance_index":"High","min_gts_temp":"-79","max_gts_temp":"-1"},{"id":"321","terrestrial_date":"2013-08-05","sol":"355","ls":"2","season":"Month 1","min_temp":"-75","max_temp":"-7","pressure":"857","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:40","sunset":"18:39","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"0"},{"id":"322","terrestrial_date":"2013-08-04","sol":"354","ls":"1","season":"Month 1","min_temp":"-75","max_temp":"-13","pressure":"857","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:40","sunset":"18:39","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"-1"},{"id":"323","terrestrial_date":"2013-08-03","sol":"353","ls":"1","season":"Month 1","min_temp":"-75","max_temp":"-8","pressure":"855","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:40","sunset":"18:39","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"-4"},{"id":"319","terrestrial_date":"2013-08-02","sol":"352","ls":"0","season":"Month 1","min_temp":"-77","max_temp":"-9","pressure":"854","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:40","sunset":"18:40","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"-3"},{"id":"320","terrestrial_date":"2013-08-01","sol":"351","ls":"0","season":"Month 1","min_temp":"-75","max_temp":"-12","pressure":"853","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:41","sunset":"18:40","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"-4"},{"id":"318","terrestrial_date":"2013-07-31","sol":"350","ls":"359","season":"Month 12","min_temp":"-76","max_temp":"-6","pressure":"853","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:41","sunset":"18:41","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"0"},{"id":"316","terrestrial_date":"2013-07-30","sol":"349","ls":"359","season":"Month 12","min_temp":"-75","max_temp":"-12","pressure":"852","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:41","sunset":"18:41","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"-1"},{"id":"315","terrestrial_date":"2013-07-29","sol":"348","ls":"358","season":"Month 12","min_temp":"-74","max_temp":"-8","pressure":"850","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:41","sunset":"18:41","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"1"},{"id":"313","terrestrial_date":"2013-07-28","sol":"347","ls":"358","season":"Month 12","min_temp":"-77","max_temp":"-9","pressure":"851","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:41","sunset":"18:42","local_uv_irradiance_index":"High","min_gts_temp":"-82","max_gts_temp":"2"},{"id":"314","terrestrial_date":"2013-07-27","sol":"346","ls":"357","season":"Month 12","min_temp":"-76","max_temp":"-7","pressure":"853","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:42","sunset":"18:42","local_uv_irradiance_index":"High","min_gts_temp":"-82","max_gts_temp":"1"},{"id":"312","terrestrial_date":"2013-07-26","sol":"345","ls":"357","season":"Month 12","min_temp":"-77","max_temp":"-7","pressure":"853","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:42","sunset":"18:42","local_uv_irradiance_index":"High","min_gts_temp":"-82","max_gts_temp":"3"},{"id":"317","terrestrial_date":"2013-07-25","sol":"344","ls":"356","season":"Month 12","min_temp":"-77","max_temp":"-6","pressure":"851","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:42","sunset":"18:43","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"2"},{"id":"311","terrestrial_date":"2013-07-24","sol":"343","ls":"356","season":"Month 12","min_temp":"-77","max_temp":"-11","pressure":"850","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:42","sunset":"18:43","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"2"},{"id":"309","terrestrial_date":"2013-07-23","sol":"342","ls":"355","season":"Month 12","min_temp":"-76","max_temp":"-7","pressure":"851","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:42","sunset":"18:43","local_uv_irradiance_index":"High","min_gts_temp":"-84","max_gts_temp":"2"},{"id":"310","terrestrial_date":"2013-07-22","sol":"341","ls":"355","season":"Month 12","min_temp":"-77","max_temp":"-6","pressure":"852","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:43","sunset":"18:44","local_uv_irradiance_index":"High","min_gts_temp":"-83","max_gts_temp":"4"},{"id":"307","terrestrial_date":"2013-07-21","sol":"340","ls":"354","season":"Month 12","min_temp":"-76","max_temp":"-6","pressure":"851","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:43","sunset":"18:44","local_uv_irradiance_index":"High","min_gts_temp":"-79","max_gts_temp":"5"},{"id":"308","terrestrial_date":"2013-07-20","sol":"339","ls":"354","season":"Month 12","min_temp":"-76","max_temp":"-8","pressure":"849","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:43","sunset":"18:44","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"3"},{"id":"306","terrestrial_date":"2013-07-19","sol":"338","ls":"353","season":"Month 12","min_temp":"-78","max_temp":"-7","pressure":"848","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:43","sunset":"18:45","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"3"},{"id":"304","terrestrial_date":"2013-07-18","sol":"337","ls":"353","season":"Month 12","min_temp":"-75","max_temp":"-7","pressure":"853","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:43","sunset":"18:45","local_uv_irradiance_index":"High","min_gts_temp":"-83","max_gts_temp":"3"},{"id":"305","terrestrial_date":"2013-07-17","sol":"336","ls":"352","season":"Month 12","min_temp":"-76","max_temp":"-8","pressure":"852","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:44","sunset":"18:45","local_uv_irradiance_index":"High","min_gts_temp":"-83","max_gts_temp":"4"},{"id":"302","terrestrial_date":"2013-07-16","sol":"335","ls":"352","season":"Month 12","min_temp":"-76","max_temp":"-7","pressure":"852","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:44","sunset":"18:46","local_uv_irradiance_index":"High","min_gts_temp":"-81","max_gts_temp":"5"},{"id":"301","terrestrial_date":"2013-07-15","sol":"334","ls":"351","season":"Month 12","min_temp":"-74","max_temp":"-6","pressure":"852","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:44","sunset":"18:46","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"1"},{"id":"299","terrestrial_date":"2013-07-14","sol":"333","ls":"350","season":"Month 12","min_temp":"-75","max_temp":"-5","pressure":"849","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:44","sunset":"18:46","local_uv_irradiance_index":"High","min_gts_temp":"-83","max_gts_temp":"2"},{"id":"300","terrestrial_date":"2013-07-13","sol":"332","ls":"350","season":"Month 12","min_temp":"-76","max_temp":"-5","pressure":"849","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:44","sunset":"18:47","local_uv_irradiance_index":"High","min_gts_temp":"-83","max_gts_temp":"4"},{"id":"303","terrestrial_date":"2013-07-12","sol":"331","ls":"349","season":"Month 12","min_temp":"-74","max_temp":"-3","pressure":"848","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:44","sunset":"18:47","local_uv_irradiance_index":"High","min_gts_temp":"-85","max_gts_temp":"6"},{"id":"297","terrestrial_date":"2013-07-11","sol":"330","ls":"349","season":"Month 12","min_temp":"-75","max_temp":"-5","pressure":"848","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:47","local_uv_irradiance_index":"High","min_gts_temp":"-85","max_gts_temp":"8"},{"id":"298","terrestrial_date":"2013-07-10","sol":"329","ls":"348","season":"Month 12","min_temp":"-74","max_temp":"-7","pressure":"847","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:48","local_uv_irradiance_index":"High","min_gts_temp":"-87","max_gts_temp":"7"},{"id":"293","terrestrial_date":"2013-07-09","sol":"328","ls":"348","season":"Month 12","min_temp":"-75","max_temp":"-5","pressure":"847","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:48","local_uv_irradiance_index":"High","min_gts_temp":"-86","max_gts_temp":"8"},{"id":"296","terrestrial_date":"2013-07-08","sol":"327","ls":"347","season":"Month 12","min_temp":"-74","max_temp":"-8","pressure":"848","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:48","local_uv_irradiance_index":"Very_High","min_gts_temp":"-79","max_gts_temp":"7"},{"id":"295","terrestrial_date":"2013-07-07","sol":"326","ls":"347","season":"Month 12","min_temp":"-72","max_temp":"-5","pressure":"848","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:48","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"5"},{"id":"294","terrestrial_date":"2013-07-06","sol":"325","ls":"346","season":"Month 12","min_temp":"-74","max_temp":"-8","pressure":"847","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:49","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"8"},{"id":"292","terrestrial_date":"2013-07-04","sol":"324","ls":"346","season":"Month 12","min_temp":"-75","max_temp":"-8","pressure":"850","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:49","local_uv_irradiance_index":"High","min_gts_temp":"-79","max_gts_temp":"8"},{"id":"290","terrestrial_date":"2013-07-03","sol":"323","ls":"345","season":"Month 12","min_temp":"-74","max_temp":"-6","pressure":"847","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:49","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"4"},{"id":"291","terrestrial_date":"2013-07-02","sol":"322","ls":"345","season":"Month 12","min_temp":"-74","max_temp":"-5","pressure":"849","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:50","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"3"},{"id":"289","terrestrial_date":"2013-07-01","sol":"321","ls":"344","season":"Month 12","min_temp":"-75","max_temp":"-5","pressure":"847","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:50","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"3"},{"id":"269","terrestrial_date":"2013-06-30","sol":"320","ls":"344","season":"Month 12","min_temp":"-74","max_temp":"-4","pressure":"846","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:50","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"3"},{"id":"271","terrestrial_date":"2013-06-29","sol":"319","ls":"343","season":"Month 12","min_temp":"-73","max_temp":"-3","pressure":"847","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:50","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"4"},{"id":"270","terrestrial_date":"2013-06-28","sol":"318","ls":"342","season":"Month 12","min_temp":"-74","max_temp":"-4","pressure":"849","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:51","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"3"},{"id":"268","terrestrial_date":"2013-06-27","sol":"317","ls":"342","season":"Month 12","min_temp":"-72","max_temp":"-4","pressure":"849","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:51","local_uv_irradiance_index":"High","min_gts_temp":"-73","max_gts_temp":"2"},{"id":"288","terrestrial_date":"2013-06-26","sol":"316","ls":"341","season":"Month 12","min_temp":"-74","max_temp":"-16","pressure":"851","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:51","local_uv_irradiance_index":"High","min_gts_temp":"-72","max_gts_temp":"2"},{"id":"273","terrestrial_date":"2013-06-25","sol":"315","ls":"341","season":"Month 12","min_temp":"-74","max_temp":"-10","pressure":"850","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:51","local_uv_irradiance_index":"High","min_gts_temp":"-72","max_gts_temp":"3"},{"id":"272","terrestrial_date":"2013-06-24","sol":"314","ls":"340","season":"Month 12","min_temp":"-73","max_temp":"-11","pressure":"848","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:51","local_uv_irradiance_index":"High","min_gts_temp":"-73","max_gts_temp":"2"},{"id":"274","terrestrial_date":"2013-06-23","sol":"313","ls":"340","season":"Month 12","min_temp":"-77","max_temp":"-14","pressure":"849","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:52","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"2"},{"id":"285","terrestrial_date":"2013-06-22","sol":"312","ls":"339","season":"Month 12","min_temp":"-71","max_temp":"-11","pressure":"845","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:52","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"-1"},{"id":"277","terrestrial_date":"2013-06-21","sol":"311","ls":"339","season":"Month 12","min_temp":"-74","max_temp":"-8","pressure":"846","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:52","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"-2"},{"id":"278","terrestrial_date":"2013-06-20","sol":"310","ls":"338","season":"Month 12","min_temp":"-71","max_temp":"-9","pressure":"849","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:52","local_uv_irradiance_index":"High","min_gts_temp":"-69","max_gts_temp":"-2"},{"id":"284","terrestrial_date":"2013-06-19","sol":"309","ls":"338","season":"Month 12","min_temp":"-72","max_temp":"-7","pressure":"848","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:52","local_uv_irradiance_index":"High","min_gts_temp":"-71","max_gts_temp":"-2"},{"id":"282","terrestrial_date":"2013-06-18","sol":"308","ls":"337","season":"Month 12","min_temp":"-73","max_temp":"-5","pressure":"850","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:53","local_uv_irradiance_index":"High","min_gts_temp":"-69","max_gts_temp":"-1"},{"id":"279","terrestrial_date":"2013-06-17","sol":"307","ls":"336","season":"Month 12","min_temp":"-72","max_temp":"-8","pressure":"851","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:53","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"-3"},{"id":"280","terrestrial_date":"2013-06-16","sol":"306","ls":"336","season":"Month 12","min_temp":"-71","max_temp":"-8","pressure":"848","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:53","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"2"},{"id":"275","terrestrial_date":"2013-06-15","sol":"305","ls":"335","season":"Month 12","min_temp":"-71","max_temp":"-5","pressure":"847","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:53","local_uv_irradiance_index":"High","min_gts_temp":"-74","max_gts_temp":"1"},{"id":"281","terrestrial_date":"2013-06-14","sol":"304","ls":"335","season":"Month 12","min_temp":"-70","max_temp":"-6","pressure":"848","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:53","local_uv_irradiance_index":"High","min_gts_temp":"-72","max_gts_temp":"1"},{"id":"283","terrestrial_date":"2013-06-13","sol":"303","ls":"334","season":"Month 12","min_temp":"-71","max_temp":"-8","pressure":"849","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:53","local_uv_irradiance_index":"High","min_gts_temp":"-74","max_gts_temp":"1"},{"id":"287","terrestrial_date":"2013-06-12","sol":"302","ls":"334","season":"Month 12","min_temp":"-71","max_temp":"-3","pressure":"850","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:54","local_uv_irradiance_index":"High","min_gts_temp":"-69","max_gts_temp":"1"},{"id":"276","terrestrial_date":"2013-06-11","sol":"301","ls":"333","season":"Month 12","min_temp":"-73","max_temp":"-6","pressure":"852","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:54","local_uv_irradiance_index":"High","min_gts_temp":"-72","max_gts_temp":"-4"},{"id":"286","terrestrial_date":"2013-06-10","sol":"300","ls":"333","season":"Month 12","min_temp":"-72","max_temp":"-8","pressure":"852","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:54","local_uv_irradiance_index":"High","min_gts_temp":"-73","max_gts_temp":"-2"},{"id":"267","terrestrial_date":"2013-06-09","sol":"299","ls":"332","season":"Month 12","min_temp":"-71","max_temp":"-8","pressure":"849","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:54","local_uv_irradiance_index":"High","min_gts_temp":"-75","max_gts_temp":"-1"},{"id":"266","terrestrial_date":"2013-06-08","sol":"298","ls":"331","season":"Month 12","min_temp":"-72","max_temp":"-3","pressure":"850","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:54","local_uv_irradiance_index":"High","min_gts_temp":"-76","max_gts_temp":"3"},{"id":"265","terrestrial_date":"2013-06-07","sol":"297","ls":"331","season":"Month 12","min_temp":"-72","max_temp":"-7","pressure":"849","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:47","sunset":"18:54","local_uv_irradiance_index":"High","min_gts_temp":"-73","max_gts_temp":"2"},{"id":"264","terrestrial_date":"2013-06-06","sol":"296","ls":"330","season":"Month 12","min_temp":"-71","max_temp":"-9","pressure":"850","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:54","local_uv_irradiance_index":"High","min_gts_temp":"-73","max_gts_temp":"1"},{"id":"263","terrestrial_date":"2013-06-05","sol":"295","ls":"330","season":"Month 12","min_temp":"-71","max_temp":"-15","pressure":"853","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:54","local_uv_irradiance_index":"High","min_gts_temp":"-71","max_gts_temp":"-1"},{"id":"262","terrestrial_date":"2013-06-04","sol":"294","ls":"329","season":"Month 11","min_temp":"-72","max_temp":"-4","pressure":"852","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:54","local_uv_irradiance_index":"High","min_gts_temp":"-71","max_gts_temp":"-1"},{"id":"261","terrestrial_date":"2013-06-03","sol":"293","ls":"329","season":"Month 11","min_temp":"-72","max_temp":"-4","pressure":"850","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-72","max_gts_temp":"0"},{"id":"260","terrestrial_date":"2013-06-02","sol":"292","ls":"328","season":"Month 11","min_temp":"-71","max_temp":"-1","pressure":"853","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-71","max_gts_temp":"-1"},{"id":"259","terrestrial_date":"2013-06-01","sol":"291","ls":"327","season":"Month 11","min_temp":"-70","max_temp":"-4","pressure":"853","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"0"},{"id":"258","terrestrial_date":"2013-05-31","sol":"290","ls":"327","season":"Month 11","min_temp":"-71","max_temp":"-3","pressure":"853","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-71","max_gts_temp":"0"},{"id":"257","terrestrial_date":"2013-05-30","sol":"289","ls":"326","season":"Month 11","min_temp":"-71","max_temp":"-3","pressure":"854","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"0"},{"id":"256","terrestrial_date":"2013-05-29","sol":"288","ls":"326","season":"Month 11","min_temp":"-69","max_temp":"-4","pressure":"854","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"0"},{"id":"255","terrestrial_date":"2013-05-27","sol":"287","ls":"325","season":"Month 11","min_temp":"-72","max_temp":"-3","pressure":"856","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-69","max_gts_temp":"-1"},{"id":"254","terrestrial_date":"2013-05-26","sol":"286","ls":"325","season":"Month 11","min_temp":"-71","max_temp":"-2","pressure":"854","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:46","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"-1"},{"id":"253","terrestrial_date":"2013-05-25","sol":"285","ls":"324","season":"Month 11","min_temp":"-70","max_temp":"-5","pressure":"852","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-71","max_gts_temp":"0"},{"id":"252","terrestrial_date":"2013-05-24","sol":"284","ls":"323","season":"Month 11","min_temp":"-71","max_temp":"-3","pressure":"854","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"-1"},{"id":"251","terrestrial_date":"2013-05-23","sol":"283","ls":"323","season":"Month 11","min_temp":"-68","max_temp":"-4","pressure":"854","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"1"},{"id":"250","terrestrial_date":"2013-05-22","sol":"282","ls":"322","season":"Month 11","min_temp":"-72","max_temp":"-2","pressure":"856","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"-1"},{"id":"249","terrestrial_date":"2013-05-21","sol":"281","ls":"322","season":"Month 11","min_temp":"-68","max_temp":"-2","pressure":"855","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"0"},{"id":"248","terrestrial_date":"2013-05-20","sol":"280","ls":"321","season":"Month 11","min_temp":"-69","max_temp":"-4","pressure":"856","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"0"},{"id":"247","terrestrial_date":"2013-05-19","sol":"279","ls":"321","season":"Month 11","min_temp":"-68","max_temp":"-5","pressure":"856","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:45","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-68","max_gts_temp":"-1"},{"id":"246","terrestrial_date":"2013-05-18","sol":"278","ls":"320","season":"Month 11","min_temp":"-67","max_temp":"-3","pressure":"855","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:44","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-67","max_gts_temp":"-1"},{"id":"245","terrestrial_date":"2013-05-17","sol":"277","ls":"319","season":"Month 11","min_temp":"-69","max_temp":"-4","pressure":"857","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:44","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-69","max_gts_temp":"-1"},{"id":"244","terrestrial_date":"2013-05-16","sol":"276","ls":"319","season":"Month 11","min_temp":"-69","max_temp":"-4","pressure":"858","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:44","sunset":"18:55","local_uv_irradiance_index":"Moderate","min_gts_temp":"-71","max_gts_temp":"0"},{"id":"169","terrestrial_date":"2013-05-15","sol":"275","ls":"318","season":"Month 11","min_temp":"-67","max_temp":"-6","pressure":"860","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:44","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-68","max_gts_temp":"-1"},{"id":"168","terrestrial_date":"2013-05-14","sol":"274","ls":"318","season":"Month 11","min_temp":"-70","max_temp":"-2","pressure":"861","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:44","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-68","max_gts_temp":"-1"},{"id":"167","terrestrial_date":"2013-05-13","sol":"273","ls":"317","season":"Month 11","min_temp":"-70","max_temp":"-4","pressure":"861","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:43","sunset":"18:55","local_uv_irradiance_index":"High","min_gts_temp":"-67","max_gts_temp":"-1"},{"id":"166","terrestrial_date":"2013-05-12","sol":"272","ls":"316","season":"Month 11","min_temp":"-71","max_temp":"-5","pressure":"864","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:43","sunset":"18:54","local_uv_irradiance_index":"High","min_gts_temp":"-72","max_gts_temp":"-1"},{"id":"165","terrestrial_date":"2013-05-11","sol":"271","ls":"316","season":"Month 11","min_temp":"-69","max_temp":"-6","pressure":"864","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:43","sunset":"18:54","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"2"},{"id":"164","terrestrial_date":"2013-05-10","sol":"270","ls":"315","season":"Month 11","min_temp":"-67","max_temp":"-6","pressure":"863","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:43","sunset":"18:54","local_uv_irradiance_index":"High","min_gts_temp":"-71","max_gts_temp":"2"},{"id":"162","terrestrial_date":"2013-05-09","sol":"269","ls":"315","season":"Month 11","min_temp":"-72","max_temp":"-3","pressure":"866","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:42","sunset":"18:54","local_uv_irradiance_index":"High","min_gts_temp":"-71","max_gts_temp":"2"},{"id":"161","terrestrial_date":"2013-05-08","sol":"268","ls":"314","season":"Month 11","min_temp":"-70","max_temp":"-5","pressure":"864","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:42","sunset":"18:54","local_uv_irradiance_index":"High","min_gts_temp":"-71","max_gts_temp":"2"},{"id":"160","terrestrial_date":"2013-05-07","sol":"267","ls":"313","season":"Month 11","min_temp":"--","max_temp":"--","pressure":"--","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:42","sunset":"18:54","local_uv_irradiance_index":"--","min_gts_temp":"--","max_gts_temp":"--"},{"id":"159","terrestrial_date":"2013-05-02","sol":"262","ls":"311","season":"Month 11","min_temp":"--","max_temp":"--","pressure":"--","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:40","sunset":"18:53","local_uv_irradiance_index":"--","min_gts_temp":"--","max_gts_temp":"--"},{"id":"158","terrestrial_date":"2013-05-01","sol":"261","ls":"310","season":"Month 11","min_temp":"-70","max_temp":"-4","pressure":"868","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:40","sunset":"18:53","local_uv_irradiance_index":"High","min_gts_temp":"-73","max_gts_temp":"4"},{"id":"157","terrestrial_date":"2013-04-30","sol":"260","ls":"309","season":"Month 11","min_temp":"-70","max_temp":"-11","pressure":"875","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:40","sunset":"18:53","local_uv_irradiance_index":"High","min_gts_temp":"-72","max_gts_temp":"2"},{"id":"155","terrestrial_date":"2013-04-29","sol":"259","ls":"309","season":"Month 11","min_temp":"-72","max_temp":"-3","pressure":"871","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:39","sunset":"18:52","local_uv_irradiance_index":"High","min_gts_temp":"-73","max_gts_temp":"6"},{"id":"154","terrestrial_date":"2013-04-28","sol":"258","ls":"308","season":"Month 11","min_temp":"-71","max_temp":"-9","pressure":"869","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:39","sunset":"18:52","local_uv_irradiance_index":"Very_High","min_gts_temp":"-73","max_gts_temp":"6"},{"id":"153","terrestrial_date":"2013-04-27","sol":"257","ls":"308","season":"Month 11","min_temp":"-70","max_temp":"-1","pressure":"871","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:39","sunset":"18:52","local_uv_irradiance_index":"Very_High","min_gts_temp":"-73","max_gts_temp":"5"},{"id":"152","terrestrial_date":"2013-04-26","sol":"256","ls":"307","season":"Month 11","min_temp":"-70","max_temp":"-2","pressure":"871","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:38","sunset":"18:52","local_uv_irradiance_index":"Very_High","min_gts_temp":"-73","max_gts_temp":"5"},{"id":"151","terrestrial_date":"2013-04-25","sol":"255","ls":"306","season":"Month 11","min_temp":"-69","max_temp":"-5","pressure":"877","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:38","sunset":"18:51","local_uv_irradiance_index":"Very_High","min_gts_temp":"-72","max_gts_temp":"6"},{"id":"150","terrestrial_date":"2013-04-24","sol":"254","ls":"306","season":"Month 11","min_temp":"-70","max_temp":"-3","pressure":"871","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:37","sunset":"18:51","local_uv_irradiance_index":"Very_High","min_gts_temp":"-73","max_gts_temp":"4"},{"id":"149","terrestrial_date":"2013-04-23","sol":"253","ls":"305","season":"Month 11","min_temp":"-71","max_temp":"-6","pressure":"877","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:37","sunset":"18:51","local_uv_irradiance_index":"Very_High","min_gts_temp":"-73","max_gts_temp":"5"},{"id":"148","terrestrial_date":"2013-04-22","sol":"252","ls":"304","season":"Month 11","min_temp":"-71","max_temp":"-8","pressure":"874","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:37","sunset":"18:51","local_uv_irradiance_index":"Very_High","min_gts_temp":"-72","max_gts_temp":"5"},{"id":"147","terrestrial_date":"2013-04-20","sol":"251","ls":"304","season":"Month 11","min_temp":"-71","max_temp":"-2","pressure":"876","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:36","sunset":"18:50","local_uv_irradiance_index":"Very_High","min_gts_temp":"-73","max_gts_temp":"7"},{"id":"146","terrestrial_date":"2013-04-19","sol":"250","ls":"303","season":"Month 11","min_temp":"-70","max_temp":"-2","pressure":"877","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:36","sunset":"18:50","local_uv_irradiance_index":"Very_High","min_gts_temp":"-72","max_gts_temp":"5"},{"id":"144","terrestrial_date":"2013-04-18","sol":"249","ls":"303","season":"Month 11","min_temp":"-69","max_temp":"-3","pressure":"873","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:35","sunset":"18:50","local_uv_irradiance_index":"High","min_gts_temp":"-72","max_gts_temp":"5"},{"id":"143","terrestrial_date":"2013-04-17","sol":"248","ls":"302","season":"Month 11","min_temp":"-70","max_temp":"-4","pressure":"877","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:35","sunset":"18:49","local_uv_irradiance_index":"High","min_gts_temp":"-71","max_gts_temp":"3"},{"id":"142","terrestrial_date":"2013-04-16","sol":"247","ls":"301","season":"Month 11","min_temp":"-71","max_temp":"-4","pressure":"873","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:35","sunset":"18:49","local_uv_irradiance_index":"Very_High","min_gts_temp":"-73","max_gts_temp":"6"},{"id":"141","terrestrial_date":"2013-04-15","sol":"246","ls":"301","season":"Month 11","min_temp":"-73","max_temp":"-1","pressure":"878","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:34","sunset":"18:49","local_uv_irradiance_index":"Very_High","min_gts_temp":"-73","max_gts_temp":"6"},{"id":"140","terrestrial_date":"2013-04-14","sol":"245","ls":"300","season":"Month 11","min_temp":"-70","max_temp":"-6","pressure":"879","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:34","sunset":"18:48","local_uv_irradiance_index":"Very_High","min_gts_temp":"-72","max_gts_temp":"6"},{"id":"139","terrestrial_date":"2013-04-13","sol":"244","ls":"300","season":"Month 11","min_temp":"-69","max_temp":"-6","pressure":"878","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:33","sunset":"18:48","local_uv_irradiance_index":"Very_High","min_gts_temp":"-72","max_gts_temp":"7"},{"id":"138","terrestrial_date":"2013-04-12","sol":"243","ls":"299","season":"Month 10","min_temp":"-71","max_temp":"-7","pressure":"884","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:33","sunset":"18:48","local_uv_irradiance_index":"Very_High","min_gts_temp":"-73","max_gts_temp":"6"},{"id":"137","terrestrial_date":"2013-04-11","sol":"242","ls":"298","season":"Month 10","min_temp":"-70","max_temp":"-7","pressure":"881","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:32","sunset":"18:47","local_uv_irradiance_index":"Very_High","min_gts_temp":"-72","max_gts_temp":"6"},{"id":"136","terrestrial_date":"2013-04-10","sol":"241","ls":"298","season":"Month 10","min_temp":"-72","max_temp":"0","pressure":"884","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:32","sunset":"18:47","local_uv_irradiance_index":"Very_High","min_gts_temp":"-73","max_gts_temp":"5"},{"id":"135","terrestrial_date":"2013-04-09","sol":"240","ls":"297","season":"Month 10","min_temp":"-70","max_temp":"-6","pressure":"884","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:31","sunset":"18:47","local_uv_irradiance_index":"Very_High","min_gts_temp":"-72","max_gts_temp":"5"},{"id":"133","terrestrial_date":"2013-04-08","sol":"239","ls":"297","season":"Month 10","min_temp":"-73","max_temp":"-1","pressure":"885","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:31","sunset":"18:46","local_uv_irradiance_index":"Very_High","min_gts_temp":"-73","max_gts_temp":"5"},{"id":"132","terrestrial_date":"2013-04-07","sol":"238","ls":"296","season":"Month 10","min_temp":"-70","max_temp":"-2","pressure":"885","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:30","sunset":"18:46","local_uv_irradiance_index":"Very_High","min_gts_temp":"-72","max_gts_temp":"7"},{"id":"131","terrestrial_date":"2013-04-06","sol":"237","ls":"295","season":"Month 10","min_temp":"-71","max_temp":"-5","pressure":"883","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:30","sunset":"18:45","local_uv_irradiance_index":"Very_High","min_gts_temp":"-73","max_gts_temp":"6"},{"id":"130","terrestrial_date":"2013-04-05","sol":"236","ls":"295","season":"Month 10","min_temp":"-72","max_temp":"-3","pressure":"886","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:29","sunset":"18:45","local_uv_irradiance_index":"Very_High","min_gts_temp":"-72","max_gts_temp":"6"},{"id":"129","terrestrial_date":"2013-04-04","sol":"235","ls":"294","season":"Month 10","min_temp":"-70","max_temp":"0","pressure":"886","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:29","sunset":"18:44","local_uv_irradiance_index":"Very_High","min_gts_temp":"-73","max_gts_temp":"7"},{"id":"128","terrestrial_date":"2013-04-03","sol":"234","ls":"293","season":"Month 10","min_temp":"-69","max_temp":"-4","pressure":"890","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:28","sunset":"18:44","local_uv_irradiance_index":"Very_High","min_gts_temp":"-73","max_gts_temp":"5"},{"id":"127","terrestrial_date":"2013-04-02","sol":"233","ls":"293","season":"Month 10","min_temp":"-69","max_temp":"-3","pressure":"889","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:28","sunset":"18:44","local_uv_irradiance_index":"Very_High","min_gts_temp":"-73","max_gts_temp":"6"},{"id":"126","terrestrial_date":"2013-04-01","sol":"232","ls":"292","season":"Month 10","min_temp":"-69","max_temp":"-5","pressure":"888","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:27","sunset":"18:43","local_uv_irradiance_index":"Very_High","min_gts_temp":"-72","max_gts_temp":"6"},{"id":"125","terrestrial_date":"2013-03-31","sol":"231","ls":"292","season":"Month 10","min_temp":"-71","max_temp":"-6","pressure":"890","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:26","sunset":"18:43","local_uv_irradiance_index":"Very_High","min_gts_temp":"-73","max_gts_temp":"7"},{"id":"124","terrestrial_date":"2013-03-30","sol":"230","ls":"291","season":"Month 10","min_temp":"-69","max_temp":"0","pressure":"888","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:26","sunset":"18:42","local_uv_irradiance_index":"Very_High","min_gts_temp":"-72","max_gts_temp":"7"},{"id":"122","terrestrial_date":"2013-03-29","sol":"229","ls":"290","season":"Month 10","min_temp":"-69","max_temp":"-4","pressure":"894","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:25","sunset":"18:42","local_uv_irradiance_index":"Very_High","min_gts_temp":"-70","max_gts_temp":"7"},{"id":"121","terrestrial_date":"2013-03-28","sol":"228","ls":"290","season":"Month 10","min_temp":"-71","max_temp":"-3","pressure":"894","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:25","sunset":"18:41","local_uv_irradiance_index":"Very_High","min_gts_temp":"-71","max_gts_temp":"7"},{"id":"120","terrestrial_date":"2013-03-27","sol":"227","ls":"289","season":"Month 10","min_temp":"-70","max_temp":"4","pressure":"892","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:24","sunset":"18:41","local_uv_irradiance_index":"Very_High","min_gts_temp":"-72","max_gts_temp":"7"},{"id":"119","terrestrial_date":"2013-03-26","sol":"226","ls":"288","season":"Month 10","min_temp":"-70","max_temp":"1","pressure":"894","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:24","sunset":"18:40","local_uv_irradiance_index":"Very_High","min_gts_temp":"-71","max_gts_temp":"6"},{"id":"118","terrestrial_date":"2013-03-25","sol":"225","ls":"288","season":"Month 10","min_temp":"-71","max_temp":"-8","pressure":"894","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:23","sunset":"18:40","local_uv_irradiance_index":"Very_High","min_gts_temp":"-72","max_gts_temp":"7"},{"id":"117","terrestrial_date":"2013-03-24","sol":"224","ls":"287","season":"Month 10","min_temp":"-69","max_temp":"-1","pressure":"894","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:22","sunset":"18:39","local_uv_irradiance_index":"Very_High","min_gts_temp":"-71","max_gts_temp":"6"},{"id":"116","terrestrial_date":"2013-03-23","sol":"223","ls":"287","season":"Month 10","min_temp":"-71","max_temp":"-5","pressure":"895","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:22","sunset":"18:39","local_uv_irradiance_index":"Very_High","min_gts_temp":"-72","max_gts_temp":"6"},{"id":"115","terrestrial_date":"2013-03-22","sol":"222","ls":"286","season":"Month 10","min_temp":"--","max_temp":"--","pressure":"--","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:21","sunset":"18:38","local_uv_irradiance_index":"--","min_gts_temp":"--","max_gts_temp":"--"},{"id":"113","terrestrial_date":"2013-03-15","sol":"215","ls":"281","season":"Month 10","min_temp":"--","max_temp":"--","pressure":"--","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:17","sunset":"18:34","local_uv_irradiance_index":"--","min_gts_temp":"--","max_gts_temp":"--"},{"id":"111","terrestrial_date":"2013-02-27","sol":"200","ls":"272","season":"Month 10","min_temp":"--","max_temp":"--","pressure":"--","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:06","sunset":"18:24","local_uv_irradiance_index":"--","min_gts_temp":"--","max_gts_temp":"--"},{"id":"109","terrestrial_date":"2013-02-26","sol":"199","ls":"271","season":"Month 10","min_temp":"-66","max_temp":"0","pressure":"917","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:06","sunset":"18:24","local_uv_irradiance_index":"High","min_gts_temp":"-71","max_gts_temp":"4"},{"id":"108","terrestrial_date":"2013-02-25","sol":"198","ls":"271","season":"Month 10","min_temp":"-67","max_temp":"-2","pressure":"914","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:05","sunset":"18:23","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"6"},{"id":"107","terrestrial_date":"2013-02-24","sol":"197","ls":"270","season":"Month 10","min_temp":"-68","max_temp":"-3","pressure":"915","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:04","sunset":"18:22","local_uv_irradiance_index":"High","min_gts_temp":"-72","max_gts_temp":"5"},{"id":"106","terrestrial_date":"2013-02-23","sol":"196","ls":"269","season":"Month 9","min_temp":"-66","max_temp":"-3","pressure":"916","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:04","sunset":"18:21","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"7"},{"id":"105","terrestrial_date":"2013-02-22","sol":"195","ls":"269","season":"Month 9","min_temp":"--","max_temp":"--","pressure":"--","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:03","sunset":"18:21","local_uv_irradiance_index":"--","min_gts_temp":"--","max_gts_temp":"--"},{"id":"104","terrestrial_date":"2013-02-19","sol":"192","ls":"267","season":"Month 9","min_temp":"--","max_temp":"--","pressure":"--","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:01","sunset":"18:19","local_uv_irradiance_index":"--","min_gts_temp":"--","max_gts_temp":"--"},{"id":"103","terrestrial_date":"2013-02-18","sol":"191","ls":"266","season":"Month 9","min_temp":"-67","max_temp":"-3","pressure":"921","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"06:00","sunset":"18:18","local_uv_irradiance_index":"Very_High","min_gts_temp":"-71","max_gts_temp":"7"},{"id":"102","terrestrial_date":"2013-02-17","sol":"190","ls":"265","season":"Month 9","min_temp":"-66","max_temp":"-3","pressure":"917","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:59","sunset":"18:17","local_uv_irradiance_index":"High","min_gts_temp":"-72","max_gts_temp":"7"},{"id":"100","terrestrial_date":"2013-02-16","sol":"189","ls":"265","season":"Month 9","min_temp":"-68","max_temp":"-2","pressure":"920","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:59","sunset":"18:16","local_uv_irradiance_index":"High","min_gts_temp":"-71","max_gts_temp":"6"},{"id":"99","terrestrial_date":"2013-02-15","sol":"188","ls":"264","season":"Month 9","min_temp":"-68","max_temp":"-3","pressure":"920","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:58","sunset":"18:16","local_uv_irradiance_index":"Very_High","min_gts_temp":"-72","max_gts_temp":"7"},{"id":"98","terrestrial_date":"2013-02-14","sol":"187","ls":"263","season":"Month 9","min_temp":"-67","max_temp":"-1","pressure":"921","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:57","sunset":"18:15","local_uv_irradiance_index":"High","min_gts_temp":"-73","max_gts_temp":"7"},{"id":"97","terrestrial_date":"2013-02-13","sol":"186","ls":"263","season":"Month 9","min_temp":"-66","max_temp":"-2","pressure":"922","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:57","sunset":"18:14","local_uv_irradiance_index":"High","min_gts_temp":"-71","max_gts_temp":"5"},{"id":"96","terrestrial_date":"2013-02-12","sol":"185","ls":"262","season":"Month 9","min_temp":"-67","max_temp":"-5","pressure":"923","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:56","sunset":"18:14","local_uv_irradiance_index":"High","min_gts_temp":"-72","max_gts_temp":"7"},{"id":"95","terrestrial_date":"2013-02-11","sol":"184","ls":"261","season":"Month 9","min_temp":"-67","max_temp":"0","pressure":"923","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:55","sunset":"18:13","local_uv_irradiance_index":"High","min_gts_temp":"-71","max_gts_temp":"6"},{"id":"94","terrestrial_date":"2013-02-10","sol":"183","ls":"261","season":"Month 9","min_temp":"-67","max_temp":"-1","pressure":"921","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:55","sunset":"18:12","local_uv_irradiance_index":"High","min_gts_temp":"-72","max_gts_temp":"6"},{"id":"93","terrestrial_date":"2013-02-09","sol":"182","ls":"260","season":"Month 9","min_temp":"-67","max_temp":"0","pressure":"921","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:54","sunset":"18:11","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"7"},{"id":"92","terrestrial_date":"2013-02-08","sol":"181","ls":"260","season":"Month 9","min_temp":"-67","max_temp":"1","pressure":"918","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:53","sunset":"18:11","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"6"},{"id":"91","terrestrial_date":"2013-02-07","sol":"180","ls":"259","season":"Month 9","min_temp":"-67","max_temp":"-1","pressure":"919","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:52","sunset":"18:10","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"6"},{"id":"89","terrestrial_date":"2013-02-06","sol":"179","ls":"258","season":"Month 9","min_temp":"-66","max_temp":"-7","pressure":"920","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:52","sunset":"18:09","local_uv_irradiance_index":"High","min_gts_temp":"-72","max_gts_temp":"5"},{"id":"88","terrestrial_date":"2013-02-04","sol":"178","ls":"258","season":"Month 9","min_temp":"-66","max_temp":"-2","pressure":"920","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:51","sunset":"18:09","local_uv_irradiance_index":"High","min_gts_temp":"-71","max_gts_temp":"6"},{"id":"87","terrestrial_date":"2013-02-03","sol":"177","ls":"257","season":"Month 9","min_temp":"-66","max_temp":"-1","pressure":"921","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:50","sunset":"18:08","local_uv_irradiance_index":"High","min_gts_temp":"-69","max_gts_temp":"5"},{"id":"86","terrestrial_date":"2013-02-02","sol":"176","ls":"256","season":"Month 9","min_temp":"-67","max_temp":"0","pressure":"920","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:50","sunset":"18:07","local_uv_irradiance_index":"High","min_gts_temp":"-69","max_gts_temp":"6"},{"id":"85","terrestrial_date":"2013-02-01","sol":"175","ls":"256","season":"Month 9","min_temp":"-68","max_temp":"-4","pressure":"921","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:49","sunset":"18:06","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"6"},{"id":"84","terrestrial_date":"2013-01-31","sol":"174","ls":"255","season":"Month 9","min_temp":"-67","max_temp":"0","pressure":"921","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:48","sunset":"18:06","local_uv_irradiance_index":"High","min_gts_temp":"-71","max_gts_temp":"7"},{"id":"83","terrestrial_date":"2013-01-30","sol":"173","ls":"254","season":"Month 9","min_temp":"-67","max_temp":"0","pressure":"920","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:48","sunset":"18:05","local_uv_irradiance_index":"High","min_gts_temp":"-71","max_gts_temp":"6"},{"id":"82","terrestrial_date":"2013-01-29","sol":"172","ls":"254","season":"Month 9","min_temp":"-67","max_temp":"0","pressure":"923","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:47","sunset":"18:04","local_uv_irradiance_index":"High","min_gts_temp":"-71","max_gts_temp":"6"},{"id":"81","terrestrial_date":"2013-01-28","sol":"171","ls":"253","season":"Month 9","min_temp":"-67","max_temp":"1","pressure":"925","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:46","sunset":"18:03","local_uv_irradiance_index":"High","min_gts_temp":"-71","max_gts_temp":"6"},{"id":"80","terrestrial_date":"2013-01-27","sol":"170","ls":"252","season":"Month 9","min_temp":"-66","max_temp":"0","pressure":"925","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:46","sunset":"18:03","local_uv_irradiance_index":"High","min_gts_temp":"-69","max_gts_temp":"5"},{"id":"78","terrestrial_date":"2013-01-26","sol":"169","ls":"252","season":"Month 9","min_temp":"-66","max_temp":"0","pressure":"922","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:45","sunset":"18:02","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"6"},{"id":"77","terrestrial_date":"2013-01-25","sol":"168","ls":"251","season":"Month 9","min_temp":"-66","max_temp":"1","pressure":"923","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:45","sunset":"18:01","local_uv_irradiance_index":"High","min_gts_temp":"-69","max_gts_temp":"7"},{"id":"76","terrestrial_date":"2013-01-24","sol":"167","ls":"250","season":"Month 9","min_temp":"-65","max_temp":"-3","pressure":"920","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:44","sunset":"18:01","local_uv_irradiance_index":"High","min_gts_temp":"-69","max_gts_temp":"6"},{"id":"75","terrestrial_date":"2013-01-23","sol":"166","ls":"250","season":"Month 9","min_temp":"-65","max_temp":"-5","pressure":"922","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:43","sunset":"18:00","local_uv_irradiance_index":"High","min_gts_temp":"-67","max_gts_temp":"4"},{"id":"74","terrestrial_date":"2013-01-22","sol":"165","ls":"249","season":"Month 9","min_temp":"-65","max_temp":"-3","pressure":"922","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:43","sunset":"17:59","local_uv_irradiance_index":"High","min_gts_temp":"-69","max_gts_temp":"4"},{"id":"73","terrestrial_date":"2013-01-21","sol":"164","ls":"248","season":"Month 9","min_temp":"-64","max_temp":"-1","pressure":"919","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:42","sunset":"17:59","local_uv_irradiance_index":"High","min_gts_temp":"-68","max_gts_temp":"7"},{"id":"72","terrestrial_date":"2013-01-20","sol":"163","ls":"248","season":"Month 9","min_temp":"-65","max_temp":"-1","pressure":"919","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:41","sunset":"17:58","local_uv_irradiance_index":"Very_High","min_gts_temp":"-71","max_gts_temp":"6"},{"id":"71","terrestrial_date":"2013-01-19","sol":"162","ls":"247","season":"Month 9","min_temp":"-65","max_temp":"-1","pressure":"919","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:41","sunset":"17:57","local_uv_irradiance_index":"Very_High","min_gts_temp":"-72","max_gts_temp":"7"},{"id":"70","terrestrial_date":"2013-01-18","sol":"161","ls":"246","season":"Month 9","min_temp":"-65","max_temp":"-2","pressure":"919","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:40","sunset":"17:56","local_uv_irradiance_index":"Very_High","min_gts_temp":"-71","max_gts_temp":"5"},{"id":"69","terrestrial_date":"2013-01-17","sol":"160","ls":"246","season":"Month 9","min_temp":"-67","max_temp":"-3","pressure":"919","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:40","sunset":"17:56","local_uv_irradiance_index":"Very_High","min_gts_temp":"-72","max_gts_temp":"6"},{"id":"67","terrestrial_date":"2013-01-16","sol":"159","ls":"245","season":"Month 9","min_temp":"-65","max_temp":"-4","pressure":"918","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:39","sunset":"17:55","local_uv_irradiance_index":"Very_High","min_gts_temp":"-72","max_gts_temp":"5"},{"id":"66","terrestrial_date":"2013-01-15","sol":"158","ls":"245","season":"Month 9","min_temp":"-66","max_temp":"-3","pressure":"922","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:39","sunset":"17:54","local_uv_irradiance_index":"Very_High","min_gts_temp":"-70","max_gts_temp":"4"},{"id":"65","terrestrial_date":"2013-01-14","sol":"157","ls":"244","season":"Month 9","min_temp":"-64","max_temp":"-2","pressure":"920","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:38","sunset":"17:54","local_uv_irradiance_index":"Very_High","min_gts_temp":"-71","max_gts_temp":"5"},{"id":"64","terrestrial_date":"2013-01-13","sol":"156","ls":"243","season":"Month 9","min_temp":"-65","max_temp":"0","pressure":"922","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:37","sunset":"17:53","local_uv_irradiance_index":"Very_High","min_gts_temp":"-73","max_gts_temp":"5"},{"id":"63","terrestrial_date":"2013-01-12","sol":"155","ls":"243","season":"Month 9","min_temp":"-64","max_temp":"0","pressure":"917","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:37","sunset":"17:52","local_uv_irradiance_index":"Very_High","min_gts_temp":"-70","max_gts_temp":"4"},{"id":"62","terrestrial_date":"2013-01-11","sol":"154","ls":"242","season":"Month 9","min_temp":"-65","max_temp":"-2","pressure":"917","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:36","sunset":"17:52","local_uv_irradiance_index":"Very_High","min_gts_temp":"-72","max_gts_temp":"4"},{"id":"61","terrestrial_date":"2013-01-10","sol":"153","ls":"241","season":"Month 9","min_temp":"-65","max_temp":"1","pressure":"915","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:36","sunset":"17:51","local_uv_irradiance_index":"Very_High","min_gts_temp":"-70","max_gts_temp":"4"},{"id":"60","terrestrial_date":"2013-01-09","sol":"152","ls":"241","season":"Month 9","min_temp":"-63","max_temp":"1","pressure":"914","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:35","sunset":"17:51","local_uv_irradiance_index":"Very_High","min_gts_temp":"-69","max_gts_temp":"6"},{"id":"59","terrestrial_date":"2013-01-08","sol":"151","ls":"240","season":"Month 9","min_temp":"-65","max_temp":"-3","pressure":"915","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:35","sunset":"17:50","local_uv_irradiance_index":"Very_High","min_gts_temp":"-69","max_gts_temp":"5"},{"id":"58","terrestrial_date":"2013-01-07","sol":"150","ls":"239","season":"Month 8","min_temp":"-64","max_temp":"-3","pressure":"913","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:34","sunset":"17:49","local_uv_irradiance_index":"Very_High","min_gts_temp":"-73","max_gts_temp":"6"},{"id":"56","terrestrial_date":"2013-01-06","sol":"149","ls":"239","season":"Month 8","min_temp":"-65","max_temp":"0","pressure":"914","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:34","sunset":"17:49","local_uv_irradiance_index":"Very_High","min_gts_temp":"-71","max_gts_temp":"4"},{"id":"55","terrestrial_date":"2013-01-05","sol":"148","ls":"238","season":"Month 8","min_temp":"-65","max_temp":"-3","pressure":"912","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:33","sunset":"17:48","local_uv_irradiance_index":"Very_High","min_gts_temp":"-70","max_gts_temp":"5"},{"id":"54","terrestrial_date":"2013-01-04","sol":"147","ls":"237","season":"Month 8","min_temp":"-65","max_temp":"0","pressure":"914","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:33","sunset":"17:47","local_uv_irradiance_index":"Very_High","min_gts_temp":"-72","max_gts_temp":"6"},{"id":"53","terrestrial_date":"2013-01-03","sol":"146","ls":"237","season":"Month 8","min_temp":"-65","max_temp":"-1","pressure":"908","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:32","sunset":"17:47","local_uv_irradiance_index":"Very_High","min_gts_temp":"-72","max_gts_temp":"8"},{"id":"52","terrestrial_date":"2013-01-02","sol":"145","ls":"236","season":"Month 8","min_temp":"-64","max_temp":"-1","pressure":"909","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:32","sunset":"17:46","local_uv_irradiance_index":"Very_High","min_gts_temp":"-70","max_gts_temp":"7"},{"id":"51","terrestrial_date":"2013-01-01","sol":"144","ls":"235","season":"Month 8","min_temp":"-64","max_temp":"2","pressure":"907","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:31","sunset":"17:46","local_uv_irradiance_index":"Very_High","min_gts_temp":"-71","max_gts_temp":"7"},{"id":"50","terrestrial_date":"2012-12-31","sol":"143","ls":"235","season":"Month 8","min_temp":"-63","max_temp":"-2","pressure":"908","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:31","sunset":"17:45","local_uv_irradiance_index":"Very_High","min_gts_temp":"-72","max_gts_temp":"8"},{"id":"49","terrestrial_date":"2012-12-29","sol":"142","ls":"234","season":"Month 8","min_temp":"-65","max_temp":"0","pressure":"906","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:30","sunset":"17:44","local_uv_irradiance_index":"Very_High","min_gts_temp":"-73","max_gts_temp":"8"},{"id":"48","terrestrial_date":"2012-12-28","sol":"141","ls":"233","season":"Month 8","min_temp":"-64","max_temp":"-2","pressure":"904","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:30","sunset":"17:44","local_uv_irradiance_index":"Very_High","min_gts_temp":"-72","max_gts_temp":"8"},{"id":"47","terrestrial_date":"2012-12-27","sol":"140","ls":"233","season":"Month 8","min_temp":"-66","max_temp":"-2","pressure":"903","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:29","sunset":"17:43","local_uv_irradiance_index":"Very_High","min_gts_temp":"-71","max_gts_temp":"8"},{"id":"45","terrestrial_date":"2012-12-26","sol":"139","ls":"232","season":"Month 8","min_temp":"-66","max_temp":"0","pressure":"899","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:29","sunset":"17:43","local_uv_irradiance_index":"Very_High","min_gts_temp":"-71","max_gts_temp":"9"},{"id":"44","terrestrial_date":"2012-12-25","sol":"138","ls":"232","season":"Month 8","min_temp":"-65","max_temp":"-1","pressure":"899","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:29","sunset":"17:42","local_uv_irradiance_index":"Very_High","min_gts_temp":"-71","max_gts_temp":"8"},{"id":"43","terrestrial_date":"2012-12-24","sol":"137","ls":"231","season":"Month 8","min_temp":"-64","max_temp":"-1","pressure":"896","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:28","sunset":"17:42","local_uv_irradiance_index":"Very_High","min_gts_temp":"-71","max_gts_temp":"8"},{"id":"42","terrestrial_date":"2012-12-23","sol":"136","ls":"230","season":"Month 8","min_temp":"-65","max_temp":"-1","pressure":"897","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:28","sunset":"17:41","local_uv_irradiance_index":"Very_High","min_gts_temp":"-74","max_gts_temp":"7"},{"id":"41","terrestrial_date":"2012-12-22","sol":"135","ls":"230","season":"Month 8","min_temp":"-65","max_temp":"-5","pressure":"894","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:27","sunset":"17:41","local_uv_irradiance_index":"Very_High","min_gts_temp":"-72","max_gts_temp":"8"},{"id":"40","terrestrial_date":"2012-12-21","sol":"134","ls":"229","season":"Month 8","min_temp":"-67","max_temp":"-1","pressure":"893","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:27","sunset":"17:40","local_uv_irradiance_index":"Very_High","min_gts_temp":"-74","max_gts_temp":"7"},{"id":"39","terrestrial_date":"2012-12-20","sol":"133","ls":"228","season":"Month 8","min_temp":"-65","max_temp":"1","pressure":"891","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:27","sunset":"17:39","local_uv_irradiance_index":"Very_High","min_gts_temp":"-69","max_gts_temp":"6"},{"id":"38","terrestrial_date":"2012-12-19","sol":"132","ls":"228","season":"Month 8","min_temp":"-65","max_temp":"-6","pressure":"890","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:26","sunset":"17:39","local_uv_irradiance_index":"Very_High","min_gts_temp":"-69","max_gts_temp":"5"},{"id":"37","terrestrial_date":"2012-12-18","sol":"131","ls":"227","season":"Month 8","min_temp":"-65","max_temp":"-8","pressure":"889","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:26","sunset":"17:38","local_uv_irradiance_index":"Very_High","min_gts_temp":"-70","max_gts_temp":"6"},{"id":"36","terrestrial_date":"2012-12-17","sol":"130","ls":"226","season":"Month 8","min_temp":"-65","max_temp":"-9","pressure":"888","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:26","sunset":"17:38","local_uv_irradiance_index":"High","min_gts_temp":"-70","max_gts_temp":"5"},{"id":"34","terrestrial_date":"2012-12-16","sol":"129","ls":"226","season":"Month 8","min_temp":"-65","max_temp":"-2","pressure":"886","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:25","sunset":"17:37","local_uv_irradiance_index":"High","min_gts_temp":"-69","max_gts_temp":"6"},{"id":"33","terrestrial_date":"2012-12-15","sol":"128","ls":"225","season":"Month 8","min_temp":"-67","max_temp":"-3","pressure":"883","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:25","sunset":"17:37","local_uv_irradiance_index":"High","min_gts_temp":"-69","max_gts_temp":"6"},{"id":"32","terrestrial_date":"2012-12-14","sol":"127","ls":"224","season":"Month 8","min_temp":"-67","max_temp":"-1","pressure":"884","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:25","sunset":"17:37","local_uv_irradiance_index":"Very_High","min_gts_temp":"-71","max_gts_temp":"7"},{"id":"31","terrestrial_date":"2012-12-13","sol":"126","ls":"224","season":"Month 8","min_temp":"-66","max_temp":"-4","pressure":"880","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:24","sunset":"17:36","local_uv_irradiance_index":"Very_High","min_gts_temp":"-71","max_gts_temp":"7"},{"id":"30","terrestrial_date":"2012-12-12","sol":"125","ls":"223","season":"Month 8","min_temp":"-68","max_temp":"-5","pressure":"880","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:24","sunset":"17:36","local_uv_irradiance_index":"Very_High","min_gts_temp":"-66","max_gts_temp":"7"},{"id":"29","terrestrial_date":"2012-12-11","sol":"124","ls":"223","season":"Month 8","min_temp":"-66","max_temp":"-5","pressure":"876","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:24","sunset":"17:35","local_uv_irradiance_index":"Very_High","min_gts_temp":"-63","max_gts_temp":"6"},{"id":"28","terrestrial_date":"2012-12-10","sol":"123","ls":"222","season":"Month 8","min_temp":"-66","max_temp":"-10","pressure":"875","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:23","sunset":"17:35","local_uv_irradiance_index":"High","min_gts_temp":"-62","max_gts_temp":"2"},{"id":"27","terrestrial_date":"2012-12-09","sol":"122","ls":"221","season":"Month 8","min_temp":"-65","max_temp":"-3","pressure":"869","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:23","sunset":"17:34","local_uv_irradiance_index":"Very_High","min_gts_temp":"-66","max_gts_temp":"3"},{"id":"26","terrestrial_date":"2012-12-08","sol":"121","ls":"221","season":"Month 8","min_temp":"-66","max_temp":"0","pressure":"869","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:23","sunset":"17:34","local_uv_irradiance_index":"High","min_gts_temp":"-68","max_gts_temp":"9"},{"id":"25","terrestrial_date":"2012-12-07","sol":"120","ls":"220","season":"Month 8","min_temp":"-67","max_temp":"-3","pressure":"867","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:22","sunset":"17:33","local_uv_irradiance_index":"Very_High","min_gts_temp":"-79","max_gts_temp":"16"},{"id":"23","terrestrial_date":"2012-12-06","sol":"119","ls":"219","season":"Month 8","min_temp":"-66","max_temp":"-6","pressure":"866","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:22","sunset":"17:33","local_uv_irradiance_index":"Very_High","min_gts_temp":"-78","max_gts_temp":"19"},{"id":"22","terrestrial_date":"2012-12-05","sol":"118","ls":"219","season":"Month 8","min_temp":"-65","max_temp":"-6","pressure":"864","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:22","sunset":"17:33","local_uv_irradiance_index":"Very_High","min_gts_temp":"-77","max_gts_temp":"18"},{"id":"21","terrestrial_date":"2012-12-04","sol":"117","ls":"218","season":"Month 8","min_temp":"-66","max_temp":"-5","pressure":"861","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:22","sunset":"17:32","local_uv_irradiance_index":"Very_High","min_gts_temp":"-76","max_gts_temp":"18"},{"id":"20","terrestrial_date":"2012-12-03","sol":"116","ls":"217","season":"Month 8","min_temp":"-67","max_temp":"-6","pressure":"859","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:21","sunset":"17:32","local_uv_irradiance_index":"Very_High","min_gts_temp":"-78","max_gts_temp":"18"},{"id":"19","terrestrial_date":"2012-12-02","sol":"115","ls":"217","season":"Month 8","min_temp":"-66","max_temp":"-8","pressure":"857","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:21","sunset":"17:31","local_uv_irradiance_index":"Very_High","min_gts_temp":"-78","max_gts_temp":"17"},{"id":"18","terrestrial_date":"2012-12-01","sol":"114","ls":"216","season":"Month 8","min_temp":"-69","max_temp":"-6","pressure":"857","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:21","sunset":"17:31","local_uv_irradiance_index":"Very_High","min_gts_temp":"-78","max_gts_temp":"18"},{"id":"17","terrestrial_date":"2012-11-30","sol":"113","ls":"216","season":"Month 8","min_temp":"-66","max_temp":"-6","pressure":"857","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:21","sunset":"17:31","local_uv_irradiance_index":"Very_High","min_gts_temp":"-77","max_gts_temp":"16"},{"id":"16","terrestrial_date":"2012-11-29","sol":"112","ls":"215","season":"Month 8","min_temp":"-65","max_temp":"-8","pressure":"852","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:21","sunset":"17:30","local_uv_irradiance_index":"Very_High","min_gts_temp":"-79","max_gts_temp":"18"},{"id":"15","terrestrial_date":"2012-11-28","sol":"111","ls":"214","season":"Month 8","min_temp":"-66","max_temp":"-4","pressure":"849","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:20","sunset":"17:30","local_uv_irradiance_index":"Very_High","min_gts_temp":"-77","max_gts_temp":"18"},{"id":"14","terrestrial_date":"2012-11-27","sol":"110","ls":"214","season":"Month 8","min_temp":"-65","max_temp":"-5","pressure":"848","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:20","sunset":"17:30","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"17"},{"id":"12","terrestrial_date":"2012-11-26","sol":"109","ls":"213","season":"Month 8","min_temp":"-64","max_temp":"-3","pressure":"844","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:20","sunset":"17:29","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"16"},{"id":"11","terrestrial_date":"2012-11-25","sol":"108","ls":"212","season":"Month 8","min_temp":"-65","max_temp":"-4","pressure":"845","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:20","sunset":"17:29","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"17"},{"id":"10","terrestrial_date":"2012-11-24","sol":"107","ls":"212","season":"Month 8","min_temp":"-66","max_temp":"-5","pressure":"844","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:20","sunset":"17:29","local_uv_irradiance_index":"High","min_gts_temp":"-80","max_gts_temp":"17"},{"id":"9","terrestrial_date":"2012-11-23","sol":"106","ls":"211","season":"Month 8","min_temp":"-66","max_temp":"-8","pressure":"841","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:28","local_uv_irradiance_index":"High","min_gts_temp":"-78","max_gts_temp":"17"},{"id":"8","terrestrial_date":"2012-11-21","sol":"105","ls":"211","season":"Month 8","min_temp":"-66","max_temp":"-6","pressure":"839","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:28","local_uv_irradiance_index":"High","min_gts_temp":"-77","max_gts_temp":"17"},{"id":"7","terrestrial_date":"2012-11-20","sol":"104","ls":"210","season":"Month 8","min_temp":"-67","max_temp":"-5","pressure":"838","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:28","local_uv_irradiance_index":"Very_High","min_gts_temp":"-78","max_gts_temp":"18"},{"id":"6","terrestrial_date":"2012-11-19","sol":"103","ls":"209","season":"Month 7","min_temp":"-66","max_temp":"-3","pressure":"836","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:27","local_uv_irradiance_index":"Very_High","min_gts_temp":"-80","max_gts_temp":"19"},{"id":"5","terrestrial_date":"2012-11-18","sol":"102","ls":"209","season":"Month 7","min_temp":"-67","max_temp":"-3","pressure":"833","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:27","local_uv_irradiance_index":"Very_High","min_gts_temp":"-75","max_gts_temp":"17"},{"id":"4","terrestrial_date":"2012-11-17","sol":"101","ls":"208","season":"Month 7","min_temp":"-65","max_temp":"-2","pressure":"830","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:27","local_uv_irradiance_index":"Very_High","min_gts_temp":"-77","max_gts_temp":"16"},{"id":"3","terrestrial_date":"2012-11-16","sol":"100","ls":"207","season":"Month 7","min_temp":"-66","max_temp":"-1","pressure":"829","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:26","local_uv_irradiance_index":"Very_High","min_gts_temp":"-77","max_gts_temp":"13"},{"id":"242","terrestrial_date":"2012-11-15","sol":"99","ls":"207","season":"Month 7","min_temp":"-68","max_temp":"-1","pressure":"829","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:26","local_uv_irradiance_index":"Very_High","min_gts_temp":"-76","max_gts_temp":"14"},{"id":"241","terrestrial_date":"2012-11-14","sol":"98","ls":"206","season":"Month 7","min_temp":"-68","max_temp":"-1","pressure":"828","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:26","local_uv_irradiance_index":"Very_High","min_gts_temp":"-79","max_gts_temp":"15"},{"id":"240","terrestrial_date":"2012-11-13","sol":"97","ls":"206","season":"Month 7","min_temp":"-68","max_temp":"-3","pressure":"828","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:26","local_uv_irradiance_index":"Very_High","min_gts_temp":"-79","max_gts_temp":"15"},{"id":"239","terrestrial_date":"2012-11-12","sol":"96","ls":"205","season":"Month 7","min_temp":"-71","max_temp":"2","pressure":"826","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:25","local_uv_irradiance_index":"Very_High","min_gts_temp":"-79","max_gts_temp":"15"},{"id":"238","terrestrial_date":"2012-11-11","sol":"95","ls":"204","season":"Month 7","min_temp":"-68","max_temp":"0","pressure":"822","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:25","local_uv_irradiance_index":"Very_High","min_gts_temp":"-79","max_gts_temp":"15"},{"id":"237","terrestrial_date":"2012-11-10","sol":"94","ls":"204","season":"Month 7","min_temp":"-70","max_temp":"0","pressure":"822","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:25","local_uv_irradiance_index":"Very_High","min_gts_temp":"-81","max_gts_temp":"16"},{"id":"236","terrestrial_date":"2012-11-09","sol":"93","ls":"203","season":"Month 7","min_temp":"-72","max_temp":"-1","pressure":"819","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:25","local_uv_irradiance_index":"Very_High","min_gts_temp":"-81","max_gts_temp":"16"},{"id":"235","terrestrial_date":"2012-11-08","sol":"92","ls":"202","season":"Month 7","min_temp":"-74","max_temp":"-1","pressure":"820","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:24","local_uv_irradiance_index":"Very_High","min_gts_temp":"-82","max_gts_temp":"15"},{"id":"234","terrestrial_date":"2012-11-07","sol":"91","ls":"202","season":"Month 7","min_temp":"-74","max_temp":"-1","pressure":"817","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:24","local_uv_irradiance_index":"Very_High","min_gts_temp":"-81","max_gts_temp":"16"},{"id":"233","terrestrial_date":"2012-11-06","sol":"90","ls":"201","season":"Month 7","min_temp":"-71","max_temp":"0","pressure":"813","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:24","local_uv_irradiance_index":"Very_High","min_gts_temp":"-80","max_gts_temp":"16"},{"id":"231","terrestrial_date":"2012-11-05","sol":"89","ls":"201","season":"Month 7","min_temp":"-73","max_temp":"-1","pressure":"813","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:24","local_uv_irradiance_index":"Very_High","min_gts_temp":"-82","max_gts_temp":"16"},{"id":"230","terrestrial_date":"2012-11-04","sol":"88","ls":"200","season":"Month 7","min_temp":"-70","max_temp":"-2","pressure":"811","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:24","local_uv_irradiance_index":"Very_High","min_gts_temp":"-82","max_gts_temp":"15"},{"id":"229","terrestrial_date":"2012-11-03","sol":"87","ls":"199","season":"Month 7","min_temp":"-70","max_temp":"-2","pressure":"808","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:23","local_uv_irradiance_index":"Very_High","min_gts_temp":"-81","max_gts_temp":"15"},{"id":"228","terrestrial_date":"2012-11-02","sol":"86","ls":"199","season":"Month 7","min_temp":"-71","max_temp":"-4","pressure":"808","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:23","local_uv_irradiance_index":"Very_High","min_gts_temp":"-81","max_gts_temp":"15"},{"id":"227","terrestrial_date":"2012-11-01","sol":"85","ls":"198","season":"Month 7","min_temp":"-71","max_temp":"-1","pressure":"805","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:23","local_uv_irradiance_index":"Very_High","min_gts_temp":"-81","max_gts_temp":"15"},{"id":"226","terrestrial_date":"2012-10-31","sol":"84","ls":"198","season":"Month 7","min_temp":"-70","max_temp":"0","pressure":"801","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:23","local_uv_irradiance_index":"Very_High","min_gts_temp":"-82","max_gts_temp":"15"},{"id":"225","terrestrial_date":"2012-10-30","sol":"83","ls":"197","season":"Month 7","min_temp":"-72","max_temp":"0","pressure":"801","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:23","local_uv_irradiance_index":"Very_High","min_gts_temp":"-83","max_gts_temp":"15"},{"id":"224","terrestrial_date":"2012-10-29","sol":"82","ls":"196","season":"Month 7","min_temp":"-72","max_temp":"0","pressure":"799","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:22","local_uv_irradiance_index":"Very_High","min_gts_temp":"-83","max_gts_temp":"14"},{"id":"223","terrestrial_date":"2012-10-28","sol":"81","ls":"196","season":"Month 7","min_temp":"-72","max_temp":"-2","pressure":"798","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:22","local_uv_irradiance_index":"Very_High","min_gts_temp":"-82","max_gts_temp":"13"},{"id":"222","terrestrial_date":"2012-10-27","sol":"80","ls":"195","season":"Month 7","min_temp":"-70","max_temp":"-3","pressure":"796","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:22","local_uv_irradiance_index":"Very_High","min_gts_temp":"-82","max_gts_temp":"14"},{"id":"221","terrestrial_date":"2012-10-26","sol":"79","ls":"195","season":"Month 7","min_temp":"-73","max_temp":"-1","pressure":"795","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:22","local_uv_irradiance_index":"Very_High","min_gts_temp":"-84","max_gts_temp":"14"},{"id":"220","terrestrial_date":"2012-10-25","sol":"78","ls":"194","season":"Month 7","min_temp":"-71","max_temp":"0","pressure":"793","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:22","local_uv_irradiance_index":"Very_High","min_gts_temp":"-82","max_gts_temp":"14"},{"id":"219","terrestrial_date":"2012-10-24","sol":"77","ls":"193","season":"Month 7","min_temp":"-71","max_temp":"0","pressure":"792","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:22","local_uv_irradiance_index":"Very_High","min_gts_temp":"-83","max_gts_temp":"15"},{"id":"218","terrestrial_date":"2012-10-23","sol":"76","ls":"193","season":"Month 7","min_temp":"-73","max_temp":"-1","pressure":"792","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:22","local_uv_irradiance_index":"Very_High","min_gts_temp":"-83","max_gts_temp":"15"},{"id":"217","terrestrial_date":"2012-10-22","sol":"75","ls":"192","season":"Month 7","min_temp":"-73","max_temp":"-1","pressure":"791","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:21","local_uv_irradiance_index":"Very_High","min_gts_temp":"-84","max_gts_temp":"13"},{"id":"216","terrestrial_date":"2012-10-21","sol":"74","ls":"192","season":"Month 7","min_temp":"-72","max_temp":"-5","pressure":"790","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:21","local_uv_irradiance_index":"Very_High","min_gts_temp":"-83","max_gts_temp":"13"},{"id":"215","terrestrial_date":"2012-10-20","sol":"73","ls":"191","season":"Month 7","min_temp":"-70","max_temp":"0","pressure":"788","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:21","local_uv_irradiance_index":"Very_High","min_gts_temp":"-83","max_gts_temp":"13"},{"id":"214","terrestrial_date":"2012-10-19","sol":"72","ls":"190","season":"Month 7","min_temp":"-73","max_temp":"-2","pressure":"785","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:21","local_uv_irradiance_index":"Very_High","min_gts_temp":"-82","max_gts_temp":"12"},{"id":"213","terrestrial_date":"2012-10-18","sol":"71","ls":"190","season":"Month 7","min_temp":"-71","max_temp":"-2","pressure":"784","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:21","local_uv_irradiance_index":"Very_High","min_gts_temp":"-81","max_gts_temp":"12"},{"id":"212","terrestrial_date":"2012-10-17","sol":"70","ls":"189","season":"Month 7","min_temp":"-72","max_temp":"-1","pressure":"783","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:21","local_uv_irradiance_index":"Very_High","min_gts_temp":"-82","max_gts_temp":"13"},{"id":"211","terrestrial_date":"2012-10-15","sol":"69","ls":"189","season":"Month 7","min_temp":"-73","max_temp":"0","pressure":"778","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:21","local_uv_irradiance_index":"High","min_gts_temp":"-82","max_gts_temp":"12"},{"id":"210","terrestrial_date":"2012-10-14","sol":"68","ls":"188","season":"Month 7","min_temp":"-71","max_temp":"-2","pressure":"781","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:21","local_uv_irradiance_index":"Very_High","min_gts_temp":"-80","max_gts_temp":"12"},{"id":"209","terrestrial_date":"2012-10-13","sol":"67","ls":"187","season":"Month 7","min_temp":"-73","max_temp":"-6","pressure":"780","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:21","local_uv_irradiance_index":"Very_High","min_gts_temp":"-81","max_gts_temp":"13"},{"id":"208","terrestrial_date":"2012-10-12","sol":"66","ls":"187","season":"Month 7","min_temp":"-73","max_temp":"-2","pressure":"778","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:18","sunset":"17:21","local_uv_irradiance_index":"Very_High","min_gts_temp":"-83","max_gts_temp":"12"},{"id":"207","terrestrial_date":"2012-10-11","sol":"65","ls":"186","season":"Month 7","min_temp":"-72","max_temp":"-2","pressure":"777","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-82","max_gts_temp":"12"},{"id":"206","terrestrial_date":"2012-10-10","sol":"64","ls":"186","season":"Month 7","min_temp":"-74","max_temp":"0","pressure":"776","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-83","max_gts_temp":"12"},{"id":"205","terrestrial_date":"2012-10-09","sol":"63","ls":"185","season":"Month 7","min_temp":"-73","max_temp":"0","pressure":"775","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-81","max_gts_temp":"12"},{"id":"204","terrestrial_date":"2012-10-08","sol":"62","ls":"184","season":"Month 7","min_temp":"-72","max_temp":"-1","pressure":"774","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-82","max_gts_temp":"11"},{"id":"203","terrestrial_date":"2012-10-07","sol":"61","ls":"184","season":"Month 7","min_temp":"-72","max_temp":"-2","pressure":"772","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-83","max_gts_temp":"13"},{"id":"202","terrestrial_date":"2012-10-06","sol":"60","ls":"183","season":"Month 7","min_temp":"-75","max_temp":"-2","pressure":"772","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-84","max_gts_temp":"12"},{"id":"201","terrestrial_date":"2012-10-05","sol":"59","ls":"183","season":"Month 7","min_temp":"-76","max_temp":"-1","pressure":"771","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-82","max_gts_temp":"11"},{"id":"200","terrestrial_date":"2012-10-04","sol":"58","ls":"182","season":"Month 7","min_temp":"-74","max_temp":"-3","pressure":"769","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-82","max_gts_temp":"11"},{"id":"199","terrestrial_date":"2012-10-03","sol":"57","ls":"181","season":"Month 7","min_temp":"-73","max_temp":"-3","pressure":"769","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:19","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-82","max_gts_temp":"12"},{"id":"198","terrestrial_date":"2012-10-02","sol":"56","ls":"181","season":"Month 7","min_temp":"-73","max_temp":"-4","pressure":"768","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:20","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-80","max_gts_temp":"10"},{"id":"197","terrestrial_date":"2012-10-01","sol":"55","ls":"180","season":"Month 7","min_temp":"-74","max_temp":"-2","pressure":"766","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:20","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-78","max_gts_temp":"11"},{"id":"196","terrestrial_date":"2012-09-30","sol":"54","ls":"180","season":"Month 7","min_temp":"-72","max_temp":"-9","pressure":"766","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:20","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-77","max_gts_temp":"10"},{"id":"195","terrestrial_date":"2012-09-29","sol":"53","ls":"179","season":"Month 6","min_temp":"-71","max_temp":"-5","pressure":"764","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:20","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-81","max_gts_temp":"11"},{"id":"194","terrestrial_date":"2012-09-28","sol":"52","ls":"179","season":"Month 6","min_temp":"-74","max_temp":"-7","pressure":"762","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:20","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-84","max_gts_temp":"12"},{"id":"193","terrestrial_date":"2012-09-27","sol":"51","ls":"178","season":"Month 6","min_temp":"-76","max_temp":"-7","pressure":"762","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:20","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-83","max_gts_temp":"13"},{"id":"192","terrestrial_date":"2012-09-26","sol":"50","ls":"177","season":"Month 6","min_temp":"-72","max_temp":"-10","pressure":"761","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:20","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-76","max_gts_temp":"11"},{"id":"191","terrestrial_date":"2012-09-25","sol":"49","ls":"177","season":"Month 6","min_temp":"-74","max_temp":"-10","pressure":"761","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:21","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-81","max_gts_temp":"10"},{"id":"190","terrestrial_date":"2012-09-24","sol":"48","ls":"176","season":"Month 6","min_temp":"-75","max_temp":"0","pressure":"759","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:21","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-84","max_gts_temp":"12"},{"id":"189","terrestrial_date":"2012-09-23","sol":"47","ls":"176","season":"Month 6","min_temp":"-75","max_temp":"-9","pressure":"758","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:21","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-83","max_gts_temp":"14"},{"id":"188","terrestrial_date":"2012-09-22","sol":"46","ls":"175","season":"Month 6","min_temp":"-74","max_temp":"-12","pressure":"758","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:21","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-83","max_gts_temp":"13"},{"id":"187","terrestrial_date":"2012-09-21","sol":"45","ls":"175","season":"Month 6","min_temp":"-74","max_temp":"-9","pressure":"758","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:21","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-87","max_gts_temp":"11"},{"id":"186","terrestrial_date":"2012-09-20","sol":"44","ls":"174","season":"Month 6","min_temp":"-75","max_temp":"-10","pressure":"757","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:21","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-86","max_gts_temp":"13"},{"id":"185","terrestrial_date":"2012-09-19","sol":"43","ls":"173","season":"Month 6","min_temp":"-74","max_temp":"-12","pressure":"756","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:22","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-80","max_gts_temp":"9"},{"id":"184","terrestrial_date":"2012-09-18","sol":"42","ls":"173","season":"Month 6","min_temp":"-75","max_temp":"-7","pressure":"754","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:22","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-80","max_gts_temp":"7"},{"id":"183","terrestrial_date":"2012-09-17","sol":"41","ls":"172","season":"Month 6","min_temp":"-75","max_temp":"-12","pressure":"753","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:22","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-79","max_gts_temp":"8"},{"id":"182","terrestrial_date":"2012-09-16","sol":"40","ls":"172","season":"Month 6","min_temp":"-75","max_temp":"-12","pressure":"753","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:22","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-79","max_gts_temp":"8"},{"id":"181","terrestrial_date":"2012-09-15","sol":"39","ls":"171","season":"Month 6","min_temp":"-75","max_temp":"-8","pressure":"751","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:22","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-79","max_gts_temp":"7"},{"id":"180","terrestrial_date":"2012-09-14","sol":"38","ls":"171","season":"Month 6","min_temp":"-73","max_temp":"-13","pressure":"750","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:22","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-78","max_gts_temp":"8"},{"id":"179","terrestrial_date":"2012-09-13","sol":"37","ls":"170","season":"Month 6","min_temp":"-73","max_temp":"0","pressure":"750","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:23","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-78","max_gts_temp":"7"},{"id":"178","terrestrial_date":"2012-09-12","sol":"36","ls":"169","season":"Month 6","min_temp":"-73","max_temp":"-1","pressure":"750","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:23","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-78","max_gts_temp":"7"},{"id":"177","terrestrial_date":"2012-09-11","sol":"35","ls":"169","season":"Month 6","min_temp":"-73","max_temp":"-1","pressure":"749","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:23","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-78","max_gts_temp":"6"},{"id":"176","terrestrial_date":"2012-09-10","sol":"34","ls":"168","season":"Month 6","min_temp":"-73","max_temp":"1","pressure":"748","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:23","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-78","max_gts_temp":"6"},{"id":"175","terrestrial_date":"2012-09-08","sol":"33","ls":"168","season":"Month 6","min_temp":"-73","max_temp":"-2","pressure":"748","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:23","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-80","max_gts_temp":"5"},{"id":"174","terrestrial_date":"2012-09-07","sol":"32","ls":"167","season":"Month 6","min_temp":"--","max_temp":"--","pressure":"--","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:24","sunset":"17:20","local_uv_irradiance_index":"--","min_gts_temp":"--","max_gts_temp":"--"},{"id":"173","terrestrial_date":"2012-09-06","sol":"31","ls":"167","season":"Month 6","min_temp":"-74","max_temp":"-23","pressure":"745","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:24","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-80","max_gts_temp":"2"},{"id":"172","terrestrial_date":"2012-09-05","sol":"30","ls":"166","season":"Month 6","min_temp":"-74","max_temp":"-3","pressure":"747","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:24","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-80","max_gts_temp":"6"},{"id":"171","terrestrial_date":"2012-09-04","sol":"29","ls":"166","season":"Month 6","min_temp":"-75","max_temp":"-2","pressure":"747","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:24","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-78","max_gts_temp":"7"},{"id":"170","terrestrial_date":"2012-09-03","sol":"28","ls":"165","season":"Month 6","min_temp":"-75","max_temp":"-15","pressure":"745","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:24","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-79","max_gts_temp":"5"},{"id":"163","terrestrial_date":"2012-09-02","sol":"27","ls":"164","season":"Month 6","min_temp":"-75","max_temp":"-15","pressure":"743","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:25","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-79","max_gts_temp":"5"},{"id":"156","terrestrial_date":"2012-09-01","sol":"26","ls":"164","season":"Month 6","min_temp":"-76","max_temp":"-14","pressure":"745","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:25","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-83","max_gts_temp":"6"},{"id":"145","terrestrial_date":"2012-08-31","sol":"25","ls":"163","season":"Month 6","min_temp":"-75","max_temp":"-11","pressure":"743","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:25","sunset":"17:20","local_uv_irradiance_index":"Very_High","min_gts_temp":"-79","max_gts_temp":"6"},{"id":"134","terrestrial_date":"2012-08-30","sol":"24","ls":"163","season":"Month 6","min_temp":"-75","max_temp":"-7","pressure":"742","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:25","sunset":"17:21","local_uv_irradiance_index":"Very_High","min_gts_temp":"-83","max_gts_temp":"6"},{"id":"123","terrestrial_date":"2012-08-29","sol":"23","ls":"162","season":"Month 6","min_temp":"-75","max_temp":"-16","pressure":"741","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:25","sunset":"17:21","local_uv_irradiance_index":"Very_High","min_gts_temp":"-82","max_gts_temp":"9"},{"id":"114","terrestrial_date":"2012-08-28","sol":"22","ls":"162","season":"Month 6","min_temp":"-74","max_temp":"-6","pressure":"742","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:26","sunset":"17:21","local_uv_irradiance_index":"Very_High","min_gts_temp":"-81","max_gts_temp":"8"},{"id":"112","terrestrial_date":"2012-08-27","sol":"21","ls":"161","season":"Month 6","min_temp":"-74","max_temp":"-3","pressure":"741","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:26","sunset":"17:21","local_uv_irradiance_index":"Very_High","min_gts_temp":"-81","max_gts_temp":"7"},{"id":"110","terrestrial_date":"2012-08-26","sol":"20","ls":"161","season":"Month 6","min_temp":"--","max_temp":"--","pressure":"--","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:26","sunset":"17:21","local_uv_irradiance_index":"--","min_gts_temp":"--","max_gts_temp":"--"},{"id":"101","terrestrial_date":"2012-08-25","sol":"19","ls":"160","season":"Month 6","min_temp":"--","max_temp":"--","pressure":"--","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:26","sunset":"17:21","local_uv_irradiance_index":"--","min_gts_temp":"--","max_gts_temp":"--"},{"id":"90","terrestrial_date":"2012-08-24","sol":"18","ls":"160","season":"Month 6","min_temp":"--","max_temp":"--","pressure":"--","pressure_string":"Higher","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:26","sunset":"17:21","local_uv_irradiance_index":"--","min_gts_temp":"--","max_gts_temp":"--"},{"id":"79","terrestrial_date":"2012-08-23","sol":"17","ls":"159","season":"Month 6","min_temp":"-76","max_temp":"-4","pressure":"742","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:27","sunset":"17:21","local_uv_irradiance_index":"Very_High","min_gts_temp":"-81","max_gts_temp":"7"},{"id":"68","terrestrial_date":"2012-08-22","sol":"16","ls":"158","season":"Month 6","min_temp":"-77","max_temp":"0","pressure":"740","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:27","sunset":"17:21","local_uv_irradiance_index":"Very_High","min_gts_temp":"-81","max_gts_temp":"9"},{"id":"57","terrestrial_date":"2012-08-21","sol":"15","ls":"158","season":"Month 6","min_temp":"-78","max_temp":"-15","pressure":"740","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:27","sunset":"17:21","local_uv_irradiance_index":"Very_High","min_gts_temp":"-82","max_gts_temp":"8"},{"id":"46","terrestrial_date":"2012-08-20","sol":"14","ls":"157","season":"Month 6","min_temp":"-74","max_temp":"-16","pressure":"740","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:27","sunset":"17:21","local_uv_irradiance_index":"Very_High","min_gts_temp":"-82","max_gts_temp":"9"},{"id":"35","terrestrial_date":"2012-08-19","sol":"13","ls":"157","season":"Month 6","min_temp":"-74","max_temp":"-15","pressure":"732","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:28","sunset":"17:21","local_uv_irradiance_index":"Very_High","min_gts_temp":"-80","max_gts_temp":"8"},{"id":"24","terrestrial_date":"2012-08-18","sol":"12","ls":"156","season":"Month 6","min_temp":"-76","max_temp":"-18","pressure":"741","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:28","sunset":"17:21","local_uv_irradiance_index":"Very_High","min_gts_temp":"-82","max_gts_temp":"8"},{"id":"13","terrestrial_date":"2012-08-17","sol":"11","ls":"156","season":"Month 6","min_temp":"-76","max_temp":"-11","pressure":"740","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:28","sunset":"17:21","local_uv_irradiance_index":"Very_High","min_gts_temp":"-83","max_gts_temp":"9"},{"id":"2","terrestrial_date":"2012-08-16","sol":"10","ls":"155","season":"Month 6","min_temp":"-75","max_temp":"-16","pressure":"739","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:28","sunset":"17:22","local_uv_irradiance_index":"Very_High","min_gts_temp":"-83","max_gts_temp":"8"},{"id":"232","terrestrial_date":"2012-08-15","sol":"9","ls":"155","season":"Month 6","min_temp":"--","max_temp":"--","pressure":"--","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:28","sunset":"17:22","local_uv_irradiance_index":"--","min_gts_temp":"--","max_gts_temp":"--"},{"id":"1","terrestrial_date":"2012-08-07","sol":"1","ls":"150","season":"Month 6","min_temp":"--","max_temp":"--","pressure":"--","pressure_string":"Lower","abs_humidity":"--","wind_speed":"--","wind_direction":"--","atmo_opacity":"Sunny","sunrise":"05:30","sunset":"17:22","local_uv_irradiance_index":"--","min_gts_temp":"--","max_gts_temp":"--"}]}
\ No newline at end of file
diff --git a/example/msl/src/MSLDataDictionary.js b/example/msl/src/MSLDataDictionary.js
deleted file mode 100644
index d5df9e657a4..00000000000
--- a/example/msl/src/MSLDataDictionary.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    /**
-     * A data dictionary describes the telemetry available from a data
-     * source and its data types. The data dictionary will be parsed by a custom
-     * server provider for this data source (in this case
-     * {@link RemsTelemetryServerAdapter}).
-     *
-     * Typically a data dictionary would be made available alongside the
-     * telemetry data source itself.
-     */
-    function () {
-        return {
-            "name": "Mars Science Laboratory",
-            "identifier": "msl",
-            "instruments": [
-                {
-                    "name": "rems",
-                    "identifier": "rems",
-                    "measurements": [
-                        {
-                            "name": "Min. Air Temperature",
-                            "identifier": "min_temp",
-                            "units": "Degrees (C)",
-                            "type": "float"
-                        },
-                        {
-                            "name": "Max. Air Temperature",
-                            "identifier": "max_temp",
-                            "units": "Degrees (C)",
-                            "type": "float"
-                        },
-                        {
-                            "name": "Atmospheric Pressure",
-                            "identifier": "pressure",
-                            "units": "Millibars",
-                            "type": "float"
-                        },
-                        {
-                            "name": "Min. Ground Temperature",
-                            "identifier": "min_gts_temp",
-                            "units": "Degrees (C)",
-                            "type": "float"
-                        },
-                        {
-                            "name": "Max. Ground Temperature",
-                            "identifier": "max_gts_temp",
-                            "units": "Degrees (C)",
-                            "type": "float"
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-);
diff --git a/example/msl/src/RemsTelemetryModelProvider.js b/example/msl/src/RemsTelemetryModelProvider.js
deleted file mode 100644
index 1542d5c84b1..00000000000
--- a/example/msl/src/RemsTelemetryModelProvider.js
+++ /dev/null
@@ -1,96 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    function () {
-        "use strict";
-
-        var PREFIX = "msl_tlm:",
-            FORMAT_MAPPINGS = {
-                float: "number",
-                integer: "number",
-                string: "string"
-            };
-
-        function RemsTelemetryModelProvider(adapter) {
-
-            function isRelevant(id) {
-                return id.indexOf(PREFIX) === 0;
-            }
-
-            function makeId(element) {
-                return PREFIX + element.identifier;
-            }
-
-            function buildTaxonomy(dictionary) {
-                var models = {};
-
-                function addMeasurement(measurement, parent) {
-                    var format = FORMAT_MAPPINGS[measurement.type];
-                    models[makeId(measurement)] = {
-                        type: "msl.measurement",
-                        name: measurement.name,
-                        location: parent,
-                        telemetry: {
-                            key: measurement.identifier,
-                            ranges: [{
-                                key: "value",
-                                name: measurement.units,
-                                units: measurement.units,
-                                format: format
-                            }]
-                        }
-                    };
-                }
-
-                function addInstrument(subsystem, spacecraftId) {
-                    var measurements = (subsystem.measurements || []),
-                        instrumentId = makeId(subsystem);
-
-                    models[instrumentId] = {
-                        type: "msl.instrument",
-                        name: subsystem.name,
-                        location: spacecraftId,
-                        composition: measurements.map(makeId)
-                    };
-                    measurements.forEach(function (measurement) {
-                        addMeasurement(measurement, instrumentId);
-                    });
-                }
-
-                (dictionary.instruments || []).forEach(function (instrument) {
-                    addInstrument(instrument, "msl:curiosity");
-                });
-
-                return models;
-            }
-
-            return {
-                getModels: function (ids) {
-                    return ids.some(isRelevant) ? buildTaxonomy(adapter.dictionary) : {};
-                }
-            };
-        }
-
-        return RemsTelemetryModelProvider;
-    }
-);
diff --git a/example/msl/src/RemsTelemetryProvider.js b/example/msl/src/RemsTelemetryProvider.js
deleted file mode 100644
index b4a64111a49..00000000000
--- a/example/msl/src/RemsTelemetryProvider.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-define (
-    ['./RemsTelemetrySeries'],
-    function (RemsTelemetrySeries) {
-        "use strict";
-
-        var SOURCE = "rems.source";
-
-        function RemsTelemetryProvider(adapter, $q) {
-            this.adapter = adapter;
-            this.$q = $q;
-        }
-
-        /**
-         * Retrieve telemetry from this telemetry source.
-         * @memberOf example/msl
-         * @param {Array<TelemetryRequest>} requests An array of all request
-         * objects (which needs to be filtered to only those relevant to this
-         * source)
-         * @returns {Promise} A {@link Promise} resolved with a {@link RemsTelemetrySeries}
-         * object that wraps the telemetry returned from the telemetry source.
-         */
-        RemsTelemetryProvider.prototype.requestTelemetry = function (requests) {
-            var packaged = {},
-                relevantReqs,
-                adapter = this.adapter;
-
-            function matchesSource(request) {
-                return (request.source === SOURCE);
-            }
-
-            function addToPackage(history) {
-                packaged[SOURCE][history.id] =
-                    new RemsTelemetrySeries(history.values);
-            }
-
-            function handleRequest(request) {
-                return adapter.history(request).then(addToPackage);
-            }
-
-            relevantReqs = requests.filter(matchesSource);
-            packaged[SOURCE] = {};
-
-            return this.$q.all(relevantReqs.map(handleRequest))
-                .then(function () {
-                    return packaged;
-                });
-        };
-
-        /**
-         * This data source does not support real-time subscriptions
-         */
-        RemsTelemetryProvider.prototype.subscribe = function (callback, requests) {
-            return function () {};
-        };
-
-        RemsTelemetryProvider.prototype.unsubscribe = function (callback, requests) {
-            return function () {};
-        };
-
-        return RemsTelemetryProvider;
-    }
-);
diff --git a/example/msl/src/RemsTelemetrySeries.js b/example/msl/src/RemsTelemetrySeries.js
deleted file mode 100644
index 6c01e56d13e..00000000000
--- a/example/msl/src/RemsTelemetrySeries.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-define(
-    function () {
-        "use strict";
-
-        /**
-         * @typedef {Object} RemsTelemetryValue
-         * @memberOf example/msl
-         * @property {number} date The date/time of the telemetry value. Constitutes the domain value of this value pair
-         * @property {number} value The value of this telemetry datum.
-         * A floating point value representing some observable quantity (eg.
-         * temperature, air pressure, etc.)
-         */
-
-        /**
-         * A representation of a collection of telemetry data. The REMS
-         * telemetry data is time ordered, with the 'domain' value
-         * constituting the time stamp of each data value and the
-         * 'range' being the value itself.
-         *
-         * TelemetrySeries will typically wrap an array of telemetry data,
-         * and provide an interface for retrieving individual an telemetry
-         * value.
-         * @memberOf example/msl
-         * @param {Array<RemsTelemetryValue>} data An array of telemetry values
-         * @constructor
-         */
-        function RemsTelemetrySeries(data) {
-            this.data = data;
-        }
-
-        /**
-         * @returns {number} A count of the number of data values available in
-         * this series
-         */
-        RemsTelemetrySeries.prototype.getPointCount = function () {
-            return this.data.length;
-        };
-
-        /**
-         * The domain value at the given index. The Rems telemetry data is
-         * time ordered, so the domain value is the time stamp of each data
-         * value.
-         * @param index
-         * @returns {number} the time value in ms since 1 January 1970
-         */
-        RemsTelemetrySeries.prototype.getDomainValue = function (index) {
-            return this.data[index].date;
-        };
-
-        /**
-         * The range value of the REMS data set is the value of the thing
-         * being measured, be it temperature, air pressure, etc.
-         * @param index The datum in the data series to return the range
-         * value of.
-         * @returns {number} A floating point number
-         */
-        RemsTelemetrySeries.prototype.getRangeValue = function (index) {
-            return this.data[index].value;
-        };
-
-        return RemsTelemetrySeries;
-    }
-);
diff --git a/example/msl/src/RemsTelemetryServerAdapter.js b/example/msl/src/RemsTelemetryServerAdapter.js
deleted file mode 100644
index 509661c9d95..00000000000
--- a/example/msl/src/RemsTelemetryServerAdapter.js
+++ /dev/null
@@ -1,145 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*jslint es5: true */
-
-define(
-    [
-        "./MSLDataDictionary",
-        "module"
-    ],
-    function (MSLDataDictionary, module) {
-        "use strict";
-
-        var TERRESTRIAL_DATE = "terrestrial_date",
-            LOCAL_DATA = "../data/rems.json";
-
-        /**
-         * Fetches historical data from the REMS instrument on the Curiosity
-         * Rover.
-         * @memberOf example/msl
-         * @param $q
-         * @param $http
-         * @param REMS_WS_URL The location of the REMS telemetry data.
-         * @constructor
-         */
-        function RemsTelemetryServerAdapter($http, $log, REMS_WS_URL) {
-            this.localDataURI = module.uri.substring(0, module.uri.lastIndexOf('/') + 1) + LOCAL_DATA;
-            this.REMS_WS_URL = REMS_WS_URL;
-            this.$http = $http;
-            this.$log = $log;
-            this.promise = undefined;
-
-            this.dataTransforms = {
-                //Convert from pascals to millibars
-                'pressure': function pascalsToMillibars(pascals) {
-                    return pascals / 100;
-                }
-            };
-        }
-
-        /**
-         * The data dictionary for this data source.
-         * @type {MSLDataDictionary}
-         */
-        RemsTelemetryServerAdapter.prototype.dictionary = MSLDataDictionary;
-
-        /**
-         * Fetches historical data from source, and associates it with the
-         * given request ID.
-         * @private
-         */
-        RemsTelemetryServerAdapter.prototype.requestHistory = function (request) {
-            var self = this,
-                id = request.key;
-
-            var dataTransforms = this.dataTransforms;
-
-            function processResponse(response) {
-                var data = [];
-                /*
-                 * History data is organised by Sol. Iterate over sols...
-                 */
-                response.data.soles.forEach(function (solData) {
-                    /*
-                     * Check that valid data exists
-                     */
-                    if (!isNaN(solData[id])) {
-                        var dataTransform = dataTransforms[id];
-                        /*
-                         * Append each data point to the array of values
-                         * for this data point property (min. temp, etc).
-                         */
-                        data.unshift({
-                            date: Date.parse(solData[TERRESTRIAL_DATE]),
-                            value: dataTransform ? dataTransform(solData[id]) : solData[id]
-                        });
-                    }
-                });
-
-                return data;
-            }
-
-            function fallbackToLocal() {
-                self.$log.warn("Loading REMS data failed, probably due to"
-                    + " cross origin policy. Falling back to local data");
-
-                return self.$http.get(self.localDataURI);
-            }
-
-            //Filter results to match request parameters
-            function filterResults(results) {
-                return results.filter(function (result) {
-                    return result.date >= (request.start || Number.MIN_VALUE)
-                        && result.date <= (request.end || Number.MAX_VALUE);
-                });
-            }
-
-            function packageAndResolve(results) {
-                return {
-                    id: id,
-                    values: results
-                };
-            }
-
-            return (this.promise = this.promise || this.$http.get(this.REMS_WS_URL))
-                .catch(fallbackToLocal)
-                .then(processResponse)
-                .then(filterResults)
-                .then(packageAndResolve);
-        };
-
-        /**
-         * Requests historical telemetry for the named data attribute. In
-         * the case of REMS, this data source exposes multiple different
-         * data variables from the REMS instrument, including temperature
-         * and others
-         * @param id The telemetry data point key to be queried.
-         * @returns {Promise | Array<RemsTelemetryValue>} that resolves with an Array of {@link RemsTelemetryValue} objects for the request data key.
-         */
-        RemsTelemetryServerAdapter.prototype.history = function (request) {
-            return this.requestHistory(request);
-        };
-
-        return RemsTelemetryServerAdapter;
-    }
-);
-
diff --git a/example/notifications/bundle.js b/example/notifications/bundle.js
deleted file mode 100644
index 941c20fc13d..00000000000
--- a/example/notifications/bundle.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/DialogLaunchController",
-    "./src/NotificationLaunchController",
-    "./src/DialogLaunchIndicator",
-    "./src/NotificationLaunchIndicator",
-    "./res/dialog-launch.html",
-    "./res/notification-launch.html"
-], function (
-    DialogLaunchController,
-    NotificationLaunchController,
-    DialogLaunchIndicator,
-    NotificationLaunchIndicator,
-    DialogLaunch,
-    NotificationLaunch
-) {
-    "use strict";
-
-    return {
-        name: "example/notifications",
-        definition: {
-            "extensions": {
-                "templates": [
-                    {
-                        "key": "dialogLaunchTemplate",
-                        "template": DialogLaunch
-                    },
-                    {
-                        "key": "notificationLaunchTemplate",
-                        "template": NotificationLaunch
-                    }
-                ],
-                "controllers": [
-                    {
-                        "key": "DialogLaunchController",
-                        "implementation": DialogLaunchController,
-                        "depends": [
-                            "$scope",
-                            "$timeout",
-                            "$log",
-                            "dialogService",
-                            "notificationService"
-                        ]
-                    },
-                    {
-                        "key": "NotificationLaunchController",
-                        "implementation": NotificationLaunchController,
-                        "depends": [
-                            "$scope",
-                            "$timeout",
-                            "$log",
-                            "notificationService"
-                        ]
-                    }
-                ],
-                "indicators": [
-                    {
-                        "implementation": DialogLaunchIndicator,
-                        "priority": "fallback"
-                    },
-                    {
-                        "implementation": NotificationLaunchIndicator,
-                        "priority": "fallback"
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/example/notifications/res/dialog-launch.html b/example/notifications/res/dialog-launch.html
deleted file mode 100644
index f6b33d7b7c8..00000000000
--- a/example/notifications/res/dialog-launch.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<span class="h-indicator" ng-controller="DialogLaunchController">
-    <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-    <div class="c-indicator c-indicator--clickable icon-box-with-arrow s-status-available"><span class="label c-indicator__label">
-        <button ng-click="launchProgress(true)">Known</button>
-        <button ng-click="launchProgress(false)">Unknown</button>
-        <button ng-click="launchError()">Error</button>
-        <button ng-click="launchInfo()">Info</button>
-    </span></div>
-</span>
diff --git a/example/notifications/res/notification-launch.html b/example/notifications/res/notification-launch.html
deleted file mode 100644
index 11c66566e81..00000000000
--- a/example/notifications/res/notification-launch.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<span class="h-indicator" ng-controller="NotificationLaunchController">
-    <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-    <div class="c-indicator c-indicator--clickable icon-bell s-status-available"><span class="label c-indicator__label">
-        <button ng-click="newInfo()">Success</button>
-        <button ng-click="newError()">Error</button>
-        <button ng-click="newAlert()">Alert</button>
-        <button ng-click="newProgress()">Progress</button>
-    </span></div>
-</span>
diff --git a/example/notifications/src/DialogLaunchController.js b/example/notifications/src/DialogLaunchController.js
deleted file mode 100644
index 4880f79aa23..00000000000
--- a/example/notifications/src/DialogLaunchController.js
+++ /dev/null
@@ -1,157 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-        "use strict";
-
-        /**
-         * A controller for the dialog launch view. This view allows manual
-         * launching of dialogs for demonstration and testing purposes. It
-         * also demonstrates the use of the DialogService.
-         * @param $scope
-         * @param $timeout
-         * @param $log
-         * @param dialogService
-         * @param notificationService
-         * @constructor
-         */
-        function DialogLaunchController($scope, $timeout, $log, dialogService, notificationService) {
-
-            /*
-            Demonstrates launching a progress dialog and updating it
-             periodically with the progress of an ongoing process.
-             */
-            $scope.launchProgress = function (knownProgress) {
-                var dialog,
-                    model = {
-                        title: "Progress Dialog Example",
-                        progress: 0,
-                        hint: "Do not navigate away from this page or close this browser tab while this operation is in progress.",
-                        actionText: "Calculating...",
-                        unknownProgress: !knownProgress,
-                        unknownDuration: false,
-                        severity: "info",
-                        options: [
-                            {
-                                label: "Cancel Operation",
-                                callback: function () {
-                                    $log.debug("Operation cancelled");
-                                    dialog.dismiss();
-                                }
-                            },
-                            {
-                                label: "Do something else...",
-                                callback: function () {
-                                    $log.debug("Something else pressed");
-                                }
-                            }
-                        ]
-                    };
-
-                function incrementProgress() {
-                    model.progress = Math.min(100, Math.floor(model.progress + Math.random() * 30));
-                    model.progressText = ["Estimated time remaining: about ", 60 - Math.floor((model.progress / 100) * 60), " seconds"].join(" ");
-                    if (model.progress < 100) {
-                        $timeout(incrementProgress, 1000);
-                    }
-                }
-
-                dialog = dialogService.showBlockingMessage(model);
-
-                if (dialog) {
-                    //Do processing here
-                    model.actionText = "Processing 100 objects...";
-                    if (knownProgress) {
-                        $timeout(incrementProgress, 1000);
-                    }
-                } else {
-                    $log.error("Could not display modal dialog");
-                }
-            };
-
-            /*
-             Demonstrates launching an error dialog
-             */
-            $scope.launchError = function () {
-                var dialog,
-                    model = {
-                        title: "Error Dialog Example",
-                        actionText: "Something happened, and it was not good.",
-                        severity: "error",
-                        options: [
-                            {
-                                label: "Try Again",
-                                callback: function () {
-                                    $log.debug("Try Again Pressed");
-                                    dialog.dismiss();
-                                }
-                            },
-                            {
-                                label: "Cancel",
-                                callback: function () {
-                                    $log.debug("Cancel Pressed");
-                                    dialog.dismiss();
-                                }
-                            }
-                        ]
-                    };
-                dialog = dialogService.showBlockingMessage(model);
-
-                if (!dialog) {
-                    $log.error("Could not display modal dialog");
-                }
-            };
-
-            /*
-             Demonstrates launching an error dialog
-             */
-            $scope.launchInfo = function () {
-                var dialog,
-                    model = {
-                        title: "Info Dialog Example",
-                        actionText: "This is an example of a blocking info"
-                        + " dialog. This dialog can be used to draw the user's"
-                        + " attention to an event.",
-                        severity: "info",
-                        primaryOption: {
-                            label: "OK",
-                            callback: function () {
-                                $log.debug("OK Pressed");
-                                dialog.dismiss();
-                            }
-                        }
-                    };
-
-                dialog = dialogService.showBlockingMessage(model);
-
-                if (!dialog) {
-                    $log.error("Could not display modal dialog");
-                }
-            };
-
-        }
-
-        return DialogLaunchController;
-    }
-);
diff --git a/example/notifications/src/DialogLaunchIndicator.js b/example/notifications/src/DialogLaunchIndicator.js
deleted file mode 100644
index a2b0ec2f13e..00000000000
--- a/example/notifications/src/DialogLaunchIndicator.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-        "use strict";
-
-        /**
-         * A tool for manually invoking dialogs. When included this
-         * indicator will allow for dialogs of different types to be
-         * launched for demonstration and testing purposes.
-         * @constructor
-         */
-
-        function DialogLaunchIndicator() {
-
-        }
-
-        DialogLaunchIndicator.template = 'dialogLaunchTemplate';
-
-        DialogLaunchIndicator.prototype.getGlyphClass = function () {
-            return 'ok';
-        };
-
-        DialogLaunchIndicator.prototype.getText = function () {
-            return "Launch test dialog";
-        };
-
-        DialogLaunchIndicator.prototype.getDescription = function () {
-            return "Launch test dialog";
-        };
-
-        return DialogLaunchIndicator;
-    }
-);
diff --git a/example/notifications/src/NotificationLaunchController.js b/example/notifications/src/NotificationLaunchController.js
deleted file mode 100644
index 7cf41f40297..00000000000
--- a/example/notifications/src/NotificationLaunchController.js
+++ /dev/null
@@ -1,126 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-        "use strict";
-
-        /**
-         * Allows launching of notification messages for the purposes of
-         * demonstration and testing. Also demonstrates use of
-         * the NotificationService. Notifications are non-blocking messages that
-         * appear at the bottom of the screen to inform the user of events
-         * in a non-intrusive way. For more information see the
-         * {@link NotificationService}
-         * @param $scope
-         * @param $timeout
-         * @param $log
-         * @param notificationService
-         * @constructor
-         */
-        function NotificationLaunchController($scope, $timeout, $log, notificationService) {
-            var messageCounter = 1;
-
-            function getExampleActionText() {
-                var actionTexts = [
-                    "Adipiscing turpis mauris in enim elementu hac, enim aliquam etiam.",
-                    "Eros turpis, pulvinar turpis eros eu",
-                    "Lundium nascetur a, lectus montes ac, parturient in natoque, duis risus risus pulvinar pid rhoncus, habitasse auctor natoque!"
-                ];
-
-                return actionTexts[Math.floor(Math.random() * 3)];
-            }
-
-            /**
-             * Launch a new notification with a severity level of 'Error'.
-             */
-            $scope.newError = function () {
-                notificationService.notify({
-                    title: "Example error notification " + messageCounter++,
-                    hint: "An error has occurred",
-                    severity: "error"
-                });
-            };
-
-            /**
-             * Launch a new notification with a severity of 'Alert'.
-             */
-            $scope.newAlert = function () {
-                notificationService.notify({
-                    title: "Alert notification " + (messageCounter++),
-                    hint: "This is an alert message",
-                    severity: "alert",
-                    autoDismiss: true
-                });
-            };
-
-            /**
-             * Launch a new notification with a progress bar that is updated
-             * periodically, tracking an ongoing process.
-             */
-            $scope.newProgress = function () {
-                let progress = 0;
-                var notificationModel = {
-                    title: "Progress notification example",
-                    severity: "info",
-                    progress: progress,
-                    actionText: getExampleActionText()
-                };
-                let notification;
-
-                /**
-                 * Simulate an ongoing process and update the progress bar.
-                 * @param notification
-                 */
-                function incrementProgress() {
-                    progress = Math.min(100, Math.floor(progress + Math.random() * 30));
-                    let progressText = ["Estimated time"
-                    + " remaining:"
-                    + " about ", 60 - Math.floor((progress / 100) * 60), " seconds"].join(" ");
-                    notification.progress(progress, progressText);
-
-                    if (progress < 100) {
-                        $timeout(function () {
-                            incrementProgress(notificationModel);
-                        }, 1000);
-                    }
-                }
-
-                notification = notificationService.notify(notificationModel);
-                incrementProgress();
-            };
-
-            /**
-             * Launch a new notification with severity level of INFO.
-             */
-            $scope.newInfo = function () {
-                notificationService.info({
-                    title: "Example Info notification " + messageCounter++
-                });
-            };
-
-        }
-
-        return NotificationLaunchController;
-    }
-);
diff --git a/example/notifications/src/NotificationLaunchIndicator.js b/example/notifications/src/NotificationLaunchIndicator.js
deleted file mode 100644
index 3132edf4274..00000000000
--- a/example/notifications/src/NotificationLaunchIndicator.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-        "use strict";
-
-        /**
-         * A tool for manually invoking notifications. When included this
-         * indicator will allow for notifications of different types to be
-         * launched for demonstration and testing purposes.
-         * @constructor
-         */
-
-        function NotificationLaunchIndicator() {
-
-        }
-
-        NotificationLaunchIndicator.template = 'notificationLaunchTemplate';
-
-        NotificationLaunchIndicator.prototype.getGlyphClass = function () {
-            return 'ok';
-        };
-
-        NotificationLaunchIndicator.prototype.getText = function () {
-            return "Launch notification";
-        };
-
-        NotificationLaunchIndicator.prototype.getDescription = function () {
-            return "Launch notification";
-        };
-
-        return NotificationLaunchIndicator;
-    }
-);
diff --git a/example/persistence/bundle.js b/example/persistence/bundle.js
deleted file mode 100644
index 7dac4ab22ad..00000000000
--- a/example/persistence/bundle.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/BrowserPersistenceProvider"
-], function (
-    BrowserPersistenceProvider
-) {
-    "use strict";
-
-    return {
-        name: "example/persistence",
-        definition: {
-            "extensions": {
-                "components": [
-                    {
-                        "provides": "persistenceService",
-                        "type": "provider",
-                        "implementation": BrowserPersistenceProvider,
-                        "depends": [
-                            "$q",
-                            "PERSISTENCE_SPACE"
-                        ]
-                    }
-                ],
-                "constants": [
-                    {
-                        "key": "PERSISTENCE_SPACE",
-                        "value": "mct"
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/example/persistence/src/BrowserPersistenceProvider.js b/example/persistence/src/BrowserPersistenceProvider.js
deleted file mode 100644
index 12e88adc502..00000000000
--- a/example/persistence/src/BrowserPersistenceProvider.js
+++ /dev/null
@@ -1,102 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Stubbed implementation of a persistence provider,
- * to permit objects to be created, saved, etc.
- */
-define(
-    [],
-    function () {
-        'use strict';
-
-        function BrowserPersistenceProvider($q, SPACE) {
-            var spaces = SPACE ? [SPACE] : [],
-                caches = {},
-                promises = {
-                    as: function (value) {
-                        return $q.when(value);
-                    }
-                };
-
-            spaces.forEach(function (space) {
-                caches[space] = {};
-            });
-
-            return {
-                listSpaces: function () {
-                    return promises.as(spaces);
-                },
-                listObjects: function (space) {
-                    var cache = caches[space];
-
-                    return promises.as(
-                        cache ? Object.keys(cache) : null
-                    );
-                },
-                createObject: function (space, key, value) {
-                    var cache = caches[space];
-
-                    if (!cache || cache[key]) {
-                        return promises.as(null);
-                    }
-
-                    cache[key] = value;
-
-                    return promises.as(true);
-                },
-                readObject: function (space, key) {
-                    var cache = caches[space];
-
-                    return promises.as(
-                        cache ? cache[key] : null
-                    );
-                },
-                updateObject: function (space, key, value) {
-                    var cache = caches[space];
-
-                    if (!cache || !cache[key]) {
-                        return promises.as(null);
-                    }
-
-                    cache[key] = value;
-
-                    return promises.as(true);
-                },
-                deleteObject: function (space, key, value) {
-                    var cache = caches[space];
-
-                    if (!cache || !cache[key]) {
-                        return promises.as(null);
-                    }
-
-                    delete cache[key];
-
-                    return promises.as(true);
-                }
-            };
-
-        }
-
-        return BrowserPersistenceProvider;
-    }
-);
diff --git a/example/policy/bundle.js b/example/policy/bundle.js
deleted file mode 100644
index acceddf89a8..00000000000
--- a/example/policy/bundle.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/ExamplePolicy"
-], function (
-    ExamplePolicy
-) {
-    "use strict";
-
-    return {
-        name: "example/policy",
-        definition: {
-            "name": "Example Policy",
-            "description": "Provides an example of using policies to prohibit actions.",
-            "extensions": {
-                "policies": [
-                    {
-                        "implementation": ExamplePolicy,
-                        "category": "action"
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/example/policy/src/ExamplePolicy.js b/example/policy/src/ExamplePolicy.js
deleted file mode 100644
index c17cb21acc5..00000000000
--- a/example/policy/src/ExamplePolicy.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-        "use strict";
-
-        function ExamplePolicy() {
-            return {
-                /**
-                 * Disallow the Remove action on objects whose name contains
-                 * "foo."
-                 */
-                allow: function (action, context) {
-                    var domainObject = (context || {}).domainObject,
-                        model = (domainObject && domainObject.getModel()) || {},
-                        name = model.name || "",
-                        metadata = action.getMetadata() || {};
-
-                    return metadata.key !== 'remove' || name.indexOf('foo') < 0;
-                }
-            };
-        }
-
-        return ExamplePolicy;
-    }
-);
diff --git a/example/profiling/bundle.js b/example/profiling/bundle.js
deleted file mode 100644
index df48fcc0a99..00000000000
--- a/example/profiling/bundle.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/WatchIndicator",
-    "./src/DigestIndicator"
-], function (
-    WatchIndicator,
-    DigestIndicator
-) {
-    "use strict";
-
-    return {
-        name: "example/profiling",
-        definition: {
-            "extensions": {
-                "indicators": [
-                    {
-                        "implementation": WatchIndicator,
-                        "depends": [
-                            "$interval",
-                            "$rootScope"
-                        ]
-                    },
-                    {
-                        "implementation": DigestIndicator,
-                        "depends": [
-                            "$interval",
-                            "$rootScope"
-                        ]
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/example/profiling/src/DigestIndicator.js b/example/profiling/src/DigestIndicator.js
deleted file mode 100644
index 80c6c9f9c23..00000000000
--- a/example/profiling/src/DigestIndicator.js
+++ /dev/null
@@ -1,82 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-        "use strict";
-
-        /**
-         * Displays the number of digests that have occurred since the
-         * indicator was first instantiated.
-         * @constructor
-         * @param $interval Angular's $interval
-         * @implements {Indicator}
-         */
-        function DigestIndicator($interval, $rootScope) {
-            var digests = 0,
-                displayed = 0,
-                start = Date.now();
-
-            function update() {
-                var now = Date.now(),
-                    secs = (now - start) / 1000;
-                displayed = Math.round(digests / secs);
-                start = now;
-                digests = 0;
-            }
-
-            function increment() {
-                digests += 1;
-            }
-
-            $rootScope.$watch(increment);
-
-            // Update state every second
-            $interval(update, 1000);
-
-            // Provide initial state, too
-            update();
-
-            return {
-                /**
-                 * Get the CSS class that defines the icon
-                 * to display in this indicator. This will appear
-                 * as a dataflow icon.
-                 * @returns {string} the cssClass of the dataflow icon
-                 */
-                getCssClass: function () {
-                    return "icon-connectivity";
-                },
-                getText: function () {
-                    return displayed + " digests/sec";
-                },
-                getDescription: function () {
-                    return "";
-                }
-            };
-        }
-
-        return DigestIndicator;
-
-    }
-);
diff --git a/example/profiling/src/WatchIndicator.js b/example/profiling/src/WatchIndicator.js
deleted file mode 100644
index 21579b5b749..00000000000
--- a/example/profiling/src/WatchIndicator.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-        "use strict";
-
-        /**
-         * Updates a count of currently-active Angular watches.
-         * @constructor
-         * @param $interval Angular's $interval
-         */
-        function WatchIndicator($interval, $rootScope) {
-            var watches = 0;
-
-            function count(scope) {
-                if (scope) {
-                    watches += (scope.$$watchers || []).length;
-                    count(scope.$$childHead);
-                    count(scope.$$nextSibling);
-                }
-            }
-
-            function update() {
-                watches = 0;
-                count($rootScope);
-            }
-
-            // Update state every second
-            $interval(update, 1000);
-
-            // Provide initial state, too
-            update();
-
-            return {
-                /**
-                 * Get the CSS class (single character used as an icon)
-                 * to display in this indicator. This will return ".",
-                 * which should appear as a database icon.
-                 * @returns {string} the character of the database icon
-                 */
-                getCssClass: function () {
-                    return "icon-database";
-                },
-                /**
-                 * Get the text that should appear in the indicator.
-                 * @returns {string} brief summary of connection status
-                 */
-                getText: function () {
-                    return watches + " watches";
-                },
-                /**
-                 * Get a longer-form description of the current connection
-                 * space, suitable for display in a tooltip
-                 * @returns {string} longer summary of connection status
-                 */
-                getDescription: function () {
-                    return "";
-                }
-            };
-        }
-
-        return WatchIndicator;
-
-    }
-);
diff --git a/example/scratchpad/README.md b/example/scratchpad/README.md
deleted file mode 100644
index 624a4786b4b..00000000000
--- a/example/scratchpad/README.md
+++ /dev/null
@@ -1,2 +0,0 @@
-Example of using multiple persistence stores by exposing a root
-object with a different space prefix.
diff --git a/example/scratchpad/bundle.js b/example/scratchpad/bundle.js
deleted file mode 100644
index 1735b3d45e1..00000000000
--- a/example/scratchpad/bundle.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/ScratchPersistenceProvider"
-], function (
-    ScratchPersistenceProvider
-) {
-    "use strict";
-
-    return {
-        name: "example/scratchpad",
-        definition: {
-            "extensions": {
-                "roots": [
-                    {
-                        "id": "scratch:root"
-                    }
-                ],
-                "models": [
-                    {
-                        "id": "scratch:root",
-                        "model": {
-                            "type": "folder",
-                            "composition": [],
-                            "name": "Scratchpad"
-                        },
-                        "priority": "preferred"
-                    }
-                ],
-                "components": [
-                    {
-                        "provides": "persistenceService",
-                        "type": "provider",
-                        "implementation": ScratchPersistenceProvider,
-                        "depends": [
-                            "$q"
-                        ]
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/example/scratchpad/src/ScratchPersistenceProvider.js b/example/scratchpad/src/ScratchPersistenceProvider.js
deleted file mode 100644
index 241fb310de6..00000000000
--- a/example/scratchpad/src/ScratchPersistenceProvider.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-        'use strict';
-
-        /**
-         * The ScratchPersistenceProvider keeps JSON documents in memory
-         * and provides a persistence interface, but changes are lost on reload.
-         * @memberof example/scratchpad
-         * @constructor
-         * @implements {PersistenceService}
-         * @param q Angular's $q, for promises
-         */
-        function ScratchPersistenceProvider($q) {
-            this.$q = $q;
-            this.table = {};
-        }
-
-        ScratchPersistenceProvider.prototype.listSpaces = function () {
-            return this.$q.when(['scratch']);
-        };
-
-        ScratchPersistenceProvider.prototype.listObjects = function (space) {
-            return this.$q.when(
-                space === 'scratch' ? Object.keys(this.table) : []
-            );
-        };
-
-        ScratchPersistenceProvider.prototype.createObject = function (space, key, value) {
-            if (space === 'scratch') {
-                this.table[key] = JSON.stringify(value);
-            }
-
-            return this.$q.when(space === 'scratch');
-        };
-
-        ScratchPersistenceProvider.prototype.readObject = function (space, key) {
-            return this.$q.when(
-                (space === 'scratch' && this.table[key])
-                    ? JSON.parse(this.table[key]) : undefined
-            );
-        };
-
-        ScratchPersistenceProvider.prototype.deleteObject = function (space, key, value) {
-            if (space === 'scratch') {
-                delete this.table[key];
-            }
-
-            return this.$q.when(space === 'scratch');
-        };
-
-        ScratchPersistenceProvider.prototype.updateObject =
-            ScratchPersistenceProvider.prototype.createObject;
-
-        return ScratchPersistenceProvider;
-    }
-);
diff --git a/example/simpleVuePlugin/HelloWorld.vue b/example/simpleVuePlugin/HelloWorld.vue
deleted file mode 100644
index 305d31183dd..00000000000
--- a/example/simpleVuePlugin/HelloWorld.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-<div class="example">{{ msg }}</div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            msg: 'Hello world!'
-        };
-    }
-};
-</script>
-
-<style>
-.example {
-  color: red;
-}
-</style>
diff --git a/example/simpleVuePlugin/plugin.js b/example/simpleVuePlugin/plugin.js
deleted file mode 100644
index a1f29288daf..00000000000
--- a/example/simpleVuePlugin/plugin.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import Vue from 'vue';
-import HelloWorld from './HelloWorld.vue';
-
-function SimpleVuePlugin() {
-    return function install(openmct) {
-        openmct.types.addType('hello-world', {
-            name: 'Hello World',
-            description: 'An introduction object',
-            creatable: true
-        });
-        openmct.objectViews.addProvider({
-            name: "demo-provider",
-            key: "hello-world",
-            cssClass: "icon-packet",
-            canView: function (d) {
-                return d.type === 'hello-world';
-            },
-            view: function (domainObject) {
-                var vm;
-
-                return {
-                    show: function (container) {
-                        vm = new Vue(HelloWorld);
-                        container.appendChild(vm.$mount().$el);
-                    },
-                    destroy: function (container) {
-                        vm.$destroy();
-                    }
-                };
-            }
-        });
-
-    };
-}
-
-export default SimpleVuePlugin;
diff --git a/example/styleguide/bundle.js b/example/styleguide/bundle.js
deleted file mode 100644
index e1af53082a6..00000000000
--- a/example/styleguide/bundle.js
+++ /dev/null
@@ -1,188 +0,0 @@
-define([
-    "./src/ExampleStyleGuideModelProvider",
-    "./src/MCTExample",
-    "./res/templates/intro.html",
-    "./res/templates/standards.html",
-    "./res/templates/colors.html",
-    "./res/templates/status.html",
-    "./res/templates/glyphs.html",
-    "./res/templates/controls.html",
-    "./res/templates/input.html",
-    "./res/templates/menus.html"
-], function (
-    ExampleStyleGuideModelProvider,
-    MCTExample,
-    introTemplate,
-    standardsTemplate,
-    colorsTemplate,
-    statusTemplate,
-    glyphsTemplate,
-    controlsTemplate,
-    inputTemplate,
-    menusTemplate
-) {
-    return {
-        name: "example/styleguide",
-        definition: {
-            "name": "Open MCT Style Guide",
-            "description": "Examples and documentation illustrating UI styles in use in Open MCT.",
-            "extensions":
-        {
-            "types": [
-                {
-                    "key": "styleguide.intro",
-                    "name": "Introduction",
-                    "cssClass": "icon-page",
-                    "description": "Introduction and overview to the style guide"
-                },
-                {
-                    "key": "styleguide.standards",
-                    "name": "Standards",
-                    "cssClass": "icon-page",
-                    "description": ""
-                },
-                {
-                    "key": "styleguide.colors",
-                    "name": "Colors",
-                    "cssClass": "icon-page",
-                    "description": ""
-                },
-                {
-                    "key": "styleguide.status",
-                    "name": "status",
-                    "cssClass": "icon-page",
-                    "description": "Limits, telemetry paused, etc."
-                },
-                {
-                    "key": "styleguide.glyphs",
-                    "name": "Glyphs",
-                    "cssClass": "icon-page",
-                    "description": "Glyphs overview"
-                },
-                {
-                    "key": "styleguide.controls",
-                    "name": "Controls",
-                    "cssClass": "icon-page",
-                    "description": "Buttons, selects, HTML controls"
-                },
-                {
-                    "key": "styleguide.input",
-                    "name": "Text Inputs",
-                    "cssClass": "icon-page",
-                    "description": "Various text inputs"
-                },
-                {
-                    "key": "styleguide.menus",
-                    "name": "Menus",
-                    "cssClass": "icon-page",
-                    "description": "Context menus, dropdowns"
-                }
-            ],
-            "views": [
-                {
-                    "key": "styleguide.intro",
-                    "type": "styleguide.intro",
-                    "template": introTemplate,
-                    "editable": false
-                },
-                {
-                    "key": "styleguide.standards",
-                    "type": "styleguide.standards",
-                    "template": standardsTemplate,
-                    "editable": false
-                },
-                {
-                    "key": "styleguide.colors",
-                    "type": "styleguide.colors",
-                    "template": colorsTemplate,
-                    "editable": false
-                },
-                {
-                    "key": "styleguide.status",
-                    "type": "styleguide.status",
-                    "template": statusTemplate,
-                    "editable": false
-                },
-                {
-                    "key": "styleguide.glyphs",
-                    "type": "styleguide.glyphs",
-                    "template": glyphsTemplate,
-                    "editable": false
-                },
-                {
-                    "key": "styleguide.controls",
-                    "type": "styleguide.controls",
-                    "template": controlsTemplate,
-                    "editable": false
-                },
-                {
-                    "key": "styleguide.input",
-                    "type": "styleguide.input",
-                    "template": inputTemplate,
-                    "editable": false
-                },
-                {
-                    "key": "styleguide.menus",
-                    "type": "styleguide.menus",
-                    "template": menusTemplate,
-                    "editable": false
-                }
-            ],
-            "roots": [
-                {
-                    "id": "styleguide:home"
-                }
-            ],
-            "models": [
-                {
-                    "id": "styleguide:home",
-                    "priority": "preferred",
-                    "model": {
-                        "type": "noneditable.folder",
-                        "name": "Style Guide Home",
-                        "location": "ROOT",
-                        "composition": [
-                            "intro",
-                            "standards",
-                            "colors",
-                            "status",
-                            "glyphs",
-                            "styleguide:ui-elements"
-                        ]
-                    }
-                },
-                {
-                    "id": "styleguide:ui-elements",
-                    "priority": "preferred",
-                    "model": {
-                        "type": "noneditable.folder",
-                        "name": "UI Elements",
-                        "location": "styleguide:home",
-                        "composition": [
-                            "controls",
-                            "input",
-                            "menus"
-                        ]
-                    }
-                }
-            ],
-            "directives": [
-                {
-                    "key": "mctExample",
-                    "implementation": MCTExample
-                }
-            ],
-            "components": [
-                {
-                    "provides": "modelService",
-                    "type": "provider",
-                    "implementation": ExampleStyleGuideModelProvider,
-                    "depends": [
-                        "$q"
-                    ]
-                }
-            ]
-        }
-        }
-    };
-});
diff --git a/example/styleguide/res/images/diagram-containment.svg b/example/styleguide/res/images/diagram-containment.svg
deleted file mode 100644
index a718ae33ac2..00000000000
--- a/example/styleguide/res/images/diagram-containment.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 574"><defs><style>.a{fill:#231f20;opacity:0.1;}.b{fill:#80d8f0;}.Line\.singleton,.c,.line\.contain-own{fill:none;stroke-miterlimit:10;}.c{stroke:#fff;}.d{fill:#f8b6c2;}.e,.f,.l{fill:#00b1e2;}.f,.h{font-size:21px;}.f,.h,.m{font-family:Helvetica Neue;}.g,.h,.i{fill:#f16e86;}.g,.l{fill-opacity:0.7;}.g,.i{opacity:0.99;}.Line\.singleton{stroke:#f16e86;}.Line\.singleton,.line\.contain-own{stroke-opacity:0.7;stroke-width:2px;stroke-dasharray:5;}.j{letter-spacing:-2px;}.k{letter-spacing:-1px;}.line\.contain-own{stroke:#00b1e2;}.m{font-size:20px;fill:#737373;}</style></defs><title>d</title><ellipse class="a" cx="510.28" cy="396.61" rx="505.71" ry="146.79"/><ellipse class="b" cx="511.28" cy="386.61" rx="505.71" ry="146.79"/><ellipse class="c" cx="511.28" cy="386.61" rx="505.71" ry="146.79"/><ellipse class="a" cx="430.53" cy="289.9" rx="425.96" ry="123.64"/><ellipse class="b" cx="431.53" cy="279.9" rx="425.96" ry="123.64"/><ellipse class="c" cx="431.53" cy="279.9" rx="425.96" ry="123.64"/><ellipse class="a" cx="420.25" cy="295.43" rx="134.04" ry="38.91"/><ellipse class="d" cx="421.25" cy="285.43" rx="134.04" ry="38.91"/><ellipse class="c" cx="421.25" cy="285.43" rx="134.04" ry="38.91"/><ellipse class="a" cx="138.61" cy="228.16" rx="134.04" ry="38.91"/><ellipse class="b" cx="139.61" cy="218.16" rx="134.04" ry="38.91"/><ellipse class="c" cx="139.61" cy="218.16" rx="134.04" ry="38.91"/><ellipse class="a" cx="420.25" cy="228.16" rx="134.04" ry="38.91"/><ellipse class="d" cx="421.25" cy="218.16" rx="134.04" ry="38.91"/><ellipse class="c" cx="421.25" cy="218.16" rx="134.04" ry="38.91"/><ellipse class="a" cx="419.61" cy="160.88" rx="134.04" ry="38.91"/><ellipse class="d" cx="420.61" cy="150.88" rx="134.04" ry="38.91"/><ellipse class="c" cx="420.61" cy="150.88" rx="134.04" ry="38.91"/><ellipse class="a" cx="390.89" cy="99.79" rx="105.32" ry="30.57"/><ellipse class="d" cx="391.89" cy="89.79" rx="105.32" ry="30.57"/><ellipse class="c" cx="391.89" cy="89.79" rx="105.32" ry="30.57"/><ellipse class="a" cx="109.88" cy="168.88" rx="105.32" ry="30.57"/><ellipse class="b" cx="110.88" cy="158.88" rx="105.32" ry="30.57"/><ellipse class="c" cx="110.88" cy="158.88" rx="105.32" ry="30.57"/><path class="e" d="M924.48,406.86H913.71v-1.8a3.6,3.6,0,0,0-3.59-3.59h-7.18a3.6,3.6,0,0,0-3.59,3.59v9a3.6,3.6,0,0,1,3.59-3.59h21.54a3.6,3.6,0,0,1,3.59,3.59v-3.59A3.6,3.6,0,0,0,924.48,406.86Z"/><rect class="e" x="899.35" y="414.04" width="28.72" height="16.16" rx="3.59" ry="3.59"/><text class="f" transform="translate(933.82 423.41)">Folder</text><ellipse class="g" cx="50.61" cy="412.43" rx="16.88" ry="5.94"/><ellipse class="g" cx="50.61" cy="161.02" rx="16.88" ry="5.94"/><line class="Line.singleton" x1="50.61" y1="37.92" x2="50.61" y2="411.88"/><text class="h" transform="translate(73.71 23.46)">Activity Mode</text><path class="i" d="M50.85,5.48A14.91,14.91,0,0,0,37,14.79h2.64a5.57,5.57,0,0,1,4.17,1.86h7l-5.59-5.59h7.45L62,20.38,52.71,29.7H45.26l5.59-5.59h-7A5.57,5.57,0,0,1,39.67,26H37A14.9,14.9,0,1,0,50.85,5.48Z"/><ellipse class="g" cx="320.17" cy="492.43" rx="16.88" ry="5.94"/><ellipse class="g" cx="320.17" cy="288.63" rx="16.88" ry="5.94"/><ellipse class="g" cx="320.17" cy="368.62" rx="16.88" ry="5.94"/><ellipse class="g" cx="320.17" cy="220.08" rx="16.88" ry="5.94"/><ellipse class="g" cx="320.17" cy="151.53" rx="16.88" ry="5.94"/><ellipse class="g" cx="320.17" cy="89.41" rx="16.88" ry="5.94"/><line class="Line.singleton" x1="320.39" y1="36.23" x2="320.39" y2="492.69"/><text class="h" transform="translate(343.27 22.68)"><tspan class="j">T</tspan><tspan x="9.72" y="0">elemetry Element</tspan></text><path class="i" d="M316,12.44a5.25,5.25,0,0,1,4.09,2.43,17.94,17.94,0,0,1,2.28,4.24c1.08,2.76,2.21,3.94,2.61,4.1,0.4-.16,1.53-1.33,2.61-4.1s2.78-5.81,5.3-6.52a14.36,14.36,0,0,0-26.48,10.09,2,2,0,0,0,.62.52c0.4-.16,1.53-1.33,2.61-4.1C310.8,16.06,312.87,12.44,316,12.44Z"/><path class="i" d="M334.54,17a2,2,0,0,0-.62-0.52c-0.4.16-1.53,1.33-2.61,4.1-1.19,3-3.26,6.67-6.37,6.67a5.25,5.25,0,0,1-4.09-2.43,18,18,0,0,1-2.28-4.24c-1.08-2.76-2.21-3.94-2.61-4.1-0.4.16-1.53,1.33-2.61,4.1s-2.78,5.81-5.3,6.52A14.36,14.36,0,0,0,334.54,17Z"/><ellipse class="g" cx="594.57" cy="501.41" rx="16.88" ry="5.94"/><ellipse class="g" cx="594.57" cy="362.9" rx="16.88" ry="5.94"/><line class="Line.singleton" x1="594.57" y1="85.54" x2="594.57" y2="501.41"/><line class="Line.singleton" x1="594.57" y1="36.09" x2="594.57" y2="48.55"/><text class="h" transform="translate(617.68 22.64)">Clock</text><path class="i" d="M594.51,5.48a14.36,14.36,0,1,0,14.36,14.36A14.36,14.36,0,0,0,594.51,5.48Zm7.57,19.35a2,2,0,0,1-2.76.74L593.11,22h0l-0.07,0,0,0-0.05,0,0,0,0,0,0,0,0,0-0.06-.05h0a2,2,0,0,1-.37-0.44l0,0,0,0a2,2,0,0,1-.2-0.54h0l0-.08V20.25h0V10a2,2,0,0,1,4,0v9l5.21,3A2,2,0,0,1,602.09,24.83Z"/><text class="h" transform="translate(617.68 70.51)">Timer</text><path class="i" d="M598.67,55.54V52.9a2.05,2.05,0,0,0-2.05-2.05h-4.1a2.05,2.05,0,0,0-2.05,2.05v2.65A14.36,14.36,0,1,0,598.67,55.54ZM595.2,69.95l-8.46,6.76a10.77,10.77,0,0,1,7.81-18.18l0.64,0V69.95Z"/><ellipse class="g" cx="712.33" cy="491.37" rx="16.88" ry="5.94"/><ellipse class="g" cx="712.33" cy="342.33" rx="16.88" ry="5.94"/><line class="Line.singleton" x1="712.33" y1="35.63" x2="712.33" y2="491.37"/><text class="h" transform="translate(732.44 25.18)"><tspan class="k">W</tspan><tspan x="18.25" y="0">eb Page</tspan></text><path class="i" d="M717.92,19.84a5.4,5.4,0,0,1-5.39-5.39v-9h-9a5.4,5.4,0,0,0-5.39,5.39v18a5.4,5.4,0,0,0,5.39,5.39h18a5.4,5.4,0,0,0,5.39-5.39v-9h-9Z"/><path class="i" d="M719.72,16.25h7.18L716.13,5.48v7.18A3.6,3.6,0,0,0,719.72,16.25Z"/><text class="f" transform="translate(789.85 322.46)">Display Layout</text><ellipse class="l" cx="770.72" cy="484.1" rx="16.88" ry="5.94"/><line class="line.contain-own" x1="770.72" y1="331.49" x2="770.72" y2="484.1"/><path class="e" d="M769,300.92h-7.18a5.4,5.4,0,0,0-5.39,5.39v18a5.4,5.4,0,0,0,5.39,5.39H769V300.92Z"/><path class="e" d="M779.73,300.92h-7.18v16.2h12.57V306.3A5.4,5.4,0,0,0,779.73,300.92Z"/><path class="e" d="M772.55,329.64h7.18a5.4,5.4,0,0,0,5.39-5.39v-3.64H772.55v9Z"/><ellipse class="l" cx="138.48" cy="455.07" rx="16.88" ry="5.94"/><ellipse class="l" cx="138.48" cy="340.75" rx="16.88" ry="5.94"/><line class="line.contain-own" x1="138.48" y1="245.87" x2="138.48" y2="455.07"/><text class="f" transform="translate(156.49 237.91)">Timeline</text><rect class="e" x="131.31" y="224.18" width="10.77" height="3.59"/><rect class="e" x="134.9" y="229.57" width="10.77" height="3.59"/><rect class="e" x="133.11" y="234.95" width="10.77" height="3.59"/><path class="e" d="M147.47,217h-3.59v5.39h3.59v17.93h-3.59v5.39h3.59a5.4,5.4,0,0,0,5.39-5.39v-18A5.4,5.4,0,0,0,147.47,217Z"/><path class="e" d="M129.52,240.32V222.4h3.59V217h-3.59a5.4,5.4,0,0,0-5.39,5.39v18a5.4,5.4,0,0,0,5.39,5.39h3.59v-5.39h-3.59Z"/><ellipse class="g" cx="421.87" cy="502.71" rx="16.88" ry="5.94"/><ellipse class="g" cx="421.87" cy="374.73" rx="16.88" ry="5.94"/><line class="Line.singleton" x1="421.87" y1="180.01" x2="421.87" y2="215.19"/><line class="Line.singleton" x1="421.87" y1="246.55" x2="421.87" y2="285.56"/><line class="Line.singleton" x1="421.87" y1="313.57" x2="421.87" y2="502.71"/><text class="h" transform="translate(441.26 170.44)">Fixed</text><rect class="i" x="407.51" y="159.86" width="3.59" height="7.18"/><path class="i" d="M411.1,152.69h5.39v-3.59H411.1a3.6,3.6,0,0,0-3.59,3.59v5.39h3.59v-5.38Z"/><path class="i" d="M411.1,174.22v-5.38h-3.59v5.39a3.6,3.6,0,0,0,3.59,3.59h5.39v-3.59H411.1Z"/><rect class="i" x="418.28" y="149.09" width="7.18" height="3.59"/><path class="i" d="M432.65,174.22h-5.39v3.59h5.39a3.6,3.6,0,0,0,3.59-3.59v-5.39h-3.59v5.38Z"/><path class="i" d="M432.65,149.09h-5.39v3.59h5.39v5.38h3.59v-5.39A3.6,3.6,0,0,0,432.65,149.09Z"/><rect class="i" x="432.65" y="159.86" width="3.59" height="7.18"/><rect class="i" x="418.28" y="174.23" width="7.18" height="3.59"/><rect class="i" x="414.69" y="156.27" width="14.36" height="14.36"/><ellipse class="g" cx="368.89" cy="498.33" rx="16.88" ry="5.94"/><line class="Line.singleton" x1="368.89" y1="101.13" x2="368.89" y2="498.33"/><path class="i" d="M369.26,77.09l-14.36,9v14.36a5.4,5.4,0,0,0,5.39,5.39h18a5.4,5.4,0,0,0,5.39-5.39V86.07Zm0,5.39,10.05,6.28L369.26,95l-10.05-6.28Z"/><text class="h" transform="translate(388.19 101.09)">Packet</text><ellipse class="l" cx="92.91" cy="438.7" rx="16.88" ry="5.94"/><ellipse class="l" cx="92.91" cy="322.78" rx="16.88" ry="5.94"/><ellipse class="l" cx="92.91" cy="230.39" rx="16.88" ry="5.94"/><line class="line.contain-own" x1="92.91" y1="181.86" x2="92.91" y2="438.7"/><text class="f" transform="translate(107.32 173.2)">Activity</text><path class="e" d="M94.19,153.3H87l9,9H87.84a7.18,7.18,0,0,0-6.22-3.59H78V173h3.59a7.18,7.18,0,0,0,6.22-3.59H96l-9,9h7.18l12.57-12.57Z"/><text class="h" transform="translate(441.26 303.84)"><tspan class="j">T</tspan><tspan x="9.72" y="0">able</tspan></text><path class="i" d="M433.17,283.37H411.62A3.6,3.6,0,0,0,408,287V308.5a3.6,3.6,0,0,0,3.59,3.59h21.54a3.6,3.6,0,0,0,3.59-3.59V287A3.6,3.6,0,0,0,433.17,283.37ZM417,310.3h-5.39a1.8,1.8,0,0,1-1.8-1.8v-3.59H417v5.39Zm0-7.18h-7.18v-5.39H417v5.39Zm0-7.18h-7.18v-5.39H417v5.39Zm9,14.36H418.8v-5.39H426v5.39Zm0-7.18H418.8v-5.39H426v5.39Zm0-7.18H418.8v-5.39H426v5.39Zm9,12.57a1.8,1.8,0,0,1-1.8,1.8h-5.39v-5.39H435v3.59Zm0-5.39h-7.18v-5.39H435v5.39Zm0-7.18h-7.18v-5.39H435v5.39Z"/><text class="h" transform="translate(441.26 238.09)">Plot</text><path class="i" d="M431.19,217.07H413.36a5.46,5.46,0,0,0-5.44,5.44v11.41a2.78,2.78,0,0,0,.9.87c0.4-.16,1.53-1.33,2.61-4.1,1.19-3,3.26-6.67,6.37-6.67a5.25,5.25,0,0,1,4.09,2.43,17.94,17.94,0,0,1,2.28,4.24c1.08,2.76,2.21,3.94,2.61,4.1,0.4-.16,1.53-1.33,2.61-4.1,1.19-3,3.26-6.67,6.37-6.67a3.9,3.9,0,0,1,.9.1v-1.62A5.46,5.46,0,0,0,431.19,217.07Z"/><path class="i" d="M435.74,228.08c-0.4.16-1.53,1.33-2.61,4.1-1.19,3-3.26,6.67-6.37,6.67a5.25,5.25,0,0,1-4.09-2.43,17.94,17.94,0,0,1-2.28-4.24c-1.08-2.76-2.21-3.94-2.61-4.1-0.4.16-1.53,1.33-2.61,4.1-1.19,3-3.26,6.67-6.37,6.67a3.9,3.9,0,0,1-.9-0.1v1.62a5.46,5.46,0,0,0,5.44,5.44h17.84a5.46,5.46,0,0,0,5.44-5.44V228.94A2.78,2.78,0,0,0,435.74,228.08Z"/><rect class="e" x="742.49" y="532.43" width="22.98" height="22.98" rx="2" ry="2"/><text class="m" transform="translate(769.86 551.1)">Can contain their own type</text></svg>
\ No newline at end of file
diff --git a/example/styleguide/res/images/diagram-objects.svg b/example/styleguide/res/images/diagram-objects.svg
deleted file mode 100644
index c457666dcf7..00000000000
--- a/example/styleguide/res/images/diagram-objects.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 719 622.47"><defs><style>.a{fill:#fff;}.b,.h{fill:none;stroke-miterlimit:10;}.b{stroke:#737373;}.c,.d{opacity:0.99;}.d,.e,.j,.k,.n{fill:#00b1e2;}.e{font-size:14px;}.e,.j,.n{font-family:HelveticaNeue, Helvetica Neue;}.f{letter-spacing:-0.11em;}.g{fill:#d6d6d6;}.h{stroke:#ababab;stroke-dasharray:5;}.i{opacity:0.5;fill:url(#a);}.j{font-size:14.33px;}.l{fill:#f0f0f0;}.m{opacity:0.8;}.n{font-size:15.44px;}.o{letter-spacing:-0.11em;}</style><linearGradient id="a" x1="547.24" y1="-217.84" x2="537.62" y2="-254.83" gradientTransform="translate(127.72 377.65) rotate(45)" gradientUnits="userSpaceOnUse"><stop offset="0"/><stop offset="1" stop-opacity="0"/></linearGradient><symbol id="b" viewBox="0 0 331 81"><rect class="a" x="0.5" y="0.5" width="330" height="80" rx="5" ry="5"/><rect class="b" x="0.5" y="0.5" width="330" height="80" rx="5" ry="5"/><g class="c"><path class="d" d="M12.91,10.08a3.66,3.66,0,0,1,2.85,1.69,12.49,12.49,0,0,1,1.59,3c.75,1.92,1.54,2.74,1.82,2.85.28-.11,1.06-.93,1.82-2.85s1.94-4,3.69-4.54a10,10,0,0,0-18.44,7,1.38,1.38,0,0,0,.43.36c.28-.11,1.06-.93,1.82-2.85C9.3,12.6,10.74,10.08,12.91,10.08Z"/><path class="d" d="M25.84,13.26a1.38,1.38,0,0,0-.43-.36c-.28.11-1.06.93-1.82,2.85-.83,2.12-2.27,4.64-4.43,4.64a3.66,3.66,0,0,1-2.85-1.69,12.5,12.5,0,0,1-1.59-3C14,13.83,13.18,13,12.91,12.9c-.28.11-1.06.93-1.82,2.85s-1.94,4-3.69,4.54a10,10,0,0,0,18.44-7Z"/></g><text class="e" transform="translate(30.83 20.56)"><tspan class="f">T</tspan><tspan x="6.48" y="0">elemetry Element</tspan></text><rect class="g" x="31.05" y="30.75" width="289.31" height="38.35"/></symbol></defs><title>diagram-objects</title><line class="h" x1="6.31" y1="161.24" x2="77.48" y2="120.15"/><polygon class="i" points="666.72 614.57 666.72 562.32 712.05 588.44 666.72 614.57"/><path class="a" d="M669.11,167.18a6.89,6.89,0,0,0-4.83-6.29L76.15,3.29A3.65,3.65,0,0,0,71.32,7V450.34a6.89,6.89,0,0,0,4.83,6.29L664.28,614.23a3.65,3.65,0,0,0,4.83-3.71Z"/><path class="b" d="M669.11,167.18a6.89,6.89,0,0,0-4.83-6.29L76.15,3.29A3.65,3.65,0,0,0,71.32,7V450.34a6.89,6.89,0,0,0,4.83,6.29L664.28,614.23a3.65,3.65,0,0,0,4.83-3.71Z"/><text class="j" transform="matrix(1, 0.27, 0, 1, 103.5, 35.75)">Display Layout</text><path class="k" d="M87.84,15.66,82.72,14.3a2.86,2.86,0,0,0-3.84,2.82V29.91a5.37,5.37,0,0,0,3.84,4.86l5.12,1.36Z"/><path class="k" d="M95.52,17.71,90.4,16.34V27.89l9,2.38V22.57A5.37,5.37,0,0,0,95.52,17.71Z"/><path class="k" d="M90.4,36.81l5.12,1.36a2.86,2.86,0,0,0,3.84-2.82V32.77l-9-2.38Z"/><path class="l" d="M277,169a3.66,3.66,0,0,1-4.83,3.71L83.32,122.46a6.88,6.88,0,0,1-4.83-6.29V49a3.66,3.66,0,0,1,4.83-3.71l188.9,50.29a6.88,6.88,0,0,1,4.83,6.29Z"/><path class="l" d="M277,462.27a3.66,3.66,0,0,1-4.83,3.71L83.32,415.7a6.88,6.88,0,0,1-4.83-6.29V134.92a3.66,3.66,0,0,1,4.83-3.71l188.9,50.29a6.88,6.88,0,0,1,4.83,6.29Z"/><path class="l" d="M658.73,565a3.66,3.66,0,0,1-4.83,3.71L288.5,471.4a6.88,6.88,0,0,1-4.83-6.29V103.58a3.66,3.66,0,0,1,4.83-3.71l365.4,97.27a6.88,6.88,0,0,1,4.83,6.29Z"/><g class="m"><path class="a" d="M585,605.89a3.66,3.66,0,0,1-4.83,3.71l-365.4-97.27A6.88,6.88,0,0,1,210,506V144.51a3.66,3.66,0,0,1,4.83-3.71l365.4,97.27a6.88,6.88,0,0,1,4.83,6.29Z"/><path class="b" d="M585,605.89a3.66,3.66,0,0,1-4.83,3.71l-365.4-97.27A6.88,6.88,0,0,1,210,506V144.51a3.66,3.66,0,0,1,4.83-3.71l365.4,97.27a6.88,6.88,0,0,1,4.83,6.29Z"/><text class="n" transform="matrix(1, 0.27, 0, 1, 243.44, 171.65)">Plot</text><g class="c"><path class="d" d="M234.06,152.09l-13.7-3.65a3.11,3.11,0,0,0-4.18,3.07v8.77a3.17,3.17,0,0,0,.69.85c.31,0,1.17-.71,2-2.61.91-2.09,2.51-4.45,4.89-3.82a5.74,5.74,0,0,1,3.14,2.7,18.93,18.93,0,0,1,1.75,3.72,9,9,0,0,0,2,3.68c.31,0,1.17-.71,2-2.61.91-2.09,2.51-4.46,4.89-3.82a3.6,3.6,0,0,1,.69.26v-1.24A5.85,5.85,0,0,0,234.06,152.09Z"/><path class="d" d="M237.55,161.47c-.31,0-1.17.71-2,2.61-.91,2.09-2.51,4.45-4.89,3.82a5.74,5.74,0,0,1-3.14-2.7,18.93,18.93,0,0,1-1.75-3.72,9,9,0,0,0-2-3.68c-.31,0-1.17.71-2,2.61-.91,2.09-2.51,4.46-4.89,3.82a3.6,3.6,0,0,1-.69-.26v1.24a5.85,5.85,0,0,0,4.18,5.29l13.7,3.65a3.11,3.11,0,0,0,4.18-3.07v-8.77A3.17,3.17,0,0,0,237.55,161.47Z"/></g></g><path class="l" d="M580.08,356a3.66,3.66,0,0,1-4.83,3.71L220.89,265.41a6.88,6.88,0,0,1-4.83-6.29V180.88a3.66,3.66,0,0,1,4.83-3.71L575.25,271.5a6.88,6.88,0,0,1,4.83,6.29Z"/><path class="l" d="M580.08,451a3.66,3.66,0,0,1-4.83,3.71L220.89,360.39a6.88,6.88,0,0,1-4.83-6.29V275.86a3.66,3.66,0,0,1,4.83-3.71l354.37,94.34a6.88,6.88,0,0,1,4.83,6.29Z"/><path class="l" d="M580.08,545.88a3.66,3.66,0,0,1-4.83,3.71L220.89,455.26a6.88,6.88,0,0,1-4.83-6.29V370.73a3.66,3.66,0,0,1,4.83-3.71l354.37,94.34a6.88,6.88,0,0,1,4.83,6.29Z"/><line class="h" x1="6.33" y1="86.4" x2="77.26" y2="45.45"/><line class="h" x1="6.11" y1="172.56" x2="78.79" y2="130.6"/><line class="h" x1="6.19" y1="454.54" x2="77.48" y2="413.39"/><line class="h" x1="209.99" y1="511.05" x2="282.66" y2="469.09"/><line class="h" x1="203.37" y1="508.2" x2="276.04" y2="466.25"/><line class="h" x1="584.06" y1="609.92" x2="656.73" y2="567.96"/><line class="h" x1="483" y1="604.78" x2="578.08" y2="549.88"/><line class="h" x1="485" y1="327.43" x2="580.08" y2="272.53"/><line class="h" x1="482.47" y1="415.64" x2="577.55" y2="360.75"/><line class="h" x1="485" y1="422.66" x2="580.08" y2="367.77"/><line class="h" x1="483" y1="509.91" x2="578.08" y2="455.02"/><line class="h" x1="485" y1="517.53" x2="580.08" y2="462.63"/><g class="m"><path class="a" d="M203.37,210a3.66,3.66,0,0,1-4.83,3.71L9.64,163.4a6.88,6.88,0,0,1-4.83-6.29V89.89a3.66,3.66,0,0,1,4.83-3.71l188.9,50.29a6.88,6.88,0,0,1,4.83,6.29Z"/><path class="b" d="M203.37,210a3.66,3.66,0,0,1-4.83,3.71L9.64,163.4a6.88,6.88,0,0,1-4.83-6.29V89.89a3.66,3.66,0,0,1,4.83-3.71l188.9,50.29a6.88,6.88,0,0,1,4.83,6.29Z"/><polygon class="g" points="184.11 196.32 44.52 159.16 44.52 136.18 184.11 173.34 184.11 196.32"/><text class="n" transform="matrix(1, 0.27, 0, 1, 38.26, 115.93)">Clock</text><path class="d" d="M21.94,94.68c-6.09-1.62-11,2-11,8.09s4.94,12.35,11,14,11-2,11-8.09S28,96.3,21.94,94.68Zm5.82,16.41a1.19,1.19,0,0,1-1.34.42,2,2,0,0,1-.78-.41l-4.78-4h0l-.05,0,0,0,0,0,0,0,0,0,0,0v0l0-.05h0a2.25,2.25,0,0,1-.28-.42l0,0,0,0a2,2,0,0,1-.15-.45h0v-.33h0V97.67a1.15,1.15,0,0,1,1.55-1.14,2.17,2.17,0,0,1,1.55,2v6.95l4,3.38A1.81,1.81,0,0,1,27.76,111.09Z"/></g><g class="m"><path class="a" d="M203.37,503.2a3.66,3.66,0,0,1-4.83,3.71L9.64,456.63a6.88,6.88,0,0,1-4.83-6.29V175.85a3.66,3.66,0,0,1,4.83-3.71l188.9,50.29a6.88,6.88,0,0,1,4.83,6.29Z"/><path class="b" d="M203.37,503.2a3.66,3.66,0,0,1-4.83,3.71L9.64,456.63a6.88,6.88,0,0,1-4.83-6.29V175.85a3.66,3.66,0,0,1,4.83-3.71l188.9,50.29a6.88,6.88,0,0,1,4.83,6.29Z"/><polygon class="g" points="184.11 282.28 44.52 245.12 44.52 222.14 184.11 259.3 184.11 282.28"/><polygon class="g" points="184.11 319.14 44.52 281.98 44.52 259 184.11 296.16 184.11 319.14"/><polygon class="g" points="184.11 356 44.52 318.84 44.52 295.86 184.11 333.02 184.11 356"/><polygon class="g" points="184.11 392.86 44.52 355.7 44.52 332.72 184.11 369.88 184.11 392.86"/><polygon class="g" points="184.11 429.72 44.52 392.56 44.52 369.58 184.11 406.74 184.11 429.72"/><polygon class="g" points="184.11 466.57 44.52 429.42 44.52 406.44 184.11 443.6 184.11 466.57"/><text class="n" transform="matrix(1, 0.27, 0, 1, 38.26, 201.89)"><tspan class="o">T</tspan><tspan x="7.15" y="0">able</tspan></text><path class="d" d="M29.65,183.42l-15.35-3.9a1.93,1.93,0,0,0-2.56,1.91v15.35A3.53,3.53,0,0,0,14.3,200l15.35,3.9A1.93,1.93,0,0,0,32.21,202V186.63A3.53,3.53,0,0,0,29.65,183.42ZM18.14,199.68l-3.84-1a1.72,1.72,0,0,1-.9-.61,1.62,1.62,0,0,1-.38-1v-2.56l5.12,1.3Zm0-5.12L13,193.27v-3.84l5.12,1.3Zm0-5.12L13,188.15v-3.84l5.12,1.3Zm6.4,11.86L19.42,200v-3.84l5.12,1.3Zm0-5.12-5.12-1.3v-3.84l5.12,1.3Zm0-5.12-5.12-1.3v-3.84l5.12,1.3Zm6.4,10.58a1,1,0,0,1-.38.81,1,1,0,0,1-.9.15l-3.84-1V197.8l5.12,1.3Zm0-3.84-5.12-1.3v-3.84l5.12,1.3Zm0-5.12-5.12-1.3v-3.84l5.12,1.3Z"/></g><line class="h" x1="122.45" y1="233.48" x2="217.53" y2="178.59"/><line class="h" x1="585.05" y1="239.36" x2="656.42" y2="199.71"/><line class="h" x1="211.99" y1="141.51" x2="285.67" y2="100.58"/><line class="h" x1="203.37" y1="137.75" x2="275.23" y2="97.83"/><line class="h" x1="122.45" y1="328.46" x2="217.53" y2="273.57"/><line class="h" x1="122.45" y1="423.33" x2="217.53" y2="368.44"/><line class="h" x1="122.26" y1="508.29" x2="215.53" y2="454.45"/><line class="h" x1="121.66" y1="319.03" x2="215.53" y2="264.84"/><line class="h" x1="122.01" y1="413.81" x2="215.53" y2="359.82"/><use width="331" height="81" transform="matrix(1.1, 0.29, 0, 1.1, 119.89, 230.79)" xlink:href="#b"/><use width="331" height="81" transform="matrix(1.1, 0.29, 0, 1.1, 119.89, 325.77)" xlink:href="#b"/><use width="331" height="81" transform="matrix(1.1, 0.29, 0, 1.1, 119.89, 420.63)" xlink:href="#b"/></svg>
\ No newline at end of file
diff --git a/example/styleguide/res/images/diagram-views.svg b/example/styleguide/res/images/diagram-views.svg
deleted file mode 100644
index c62a2fc3a7e..00000000000
--- a/example/styleguide/res/images/diagram-views.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 622.47"><defs><style>.a,.d{fill:#fff;}.b,.c,.k,.m,.n,.o{fill:none;}.b{stroke:#000;stroke-linecap:square;}.b,.c,.d,.f,.k,.m,.n,.o{stroke-miterlimit:10;}.b,.k{stroke-width:2px;}.c{stroke:#ababab;stroke-dasharray:5;}.d,.k,.o{stroke:#737373;}.e{opacity:0.5;fill:url(#a);}.f{fill:#d6d6d6;fill-opacity:0.8;stroke:#fff;}.g{mask:url(#b);}.h{fill:#a8a8a8;}.i{fill:#00b1e2;}.j{fill:#f16e86;}.k{stroke-linecap:round;}.l{mask:url(#c);}.m{stroke:#00b1e2;}.m,.n{stroke-width:10px;}.n{stroke:#f16e86;}</style><linearGradient id="a" x1="523.15" y1="-401.02" x2="513.75" y2="-437.16" gradientTransform="translate(90.62 338.26) rotate(45)" gradientUnits="userSpaceOnUse"><stop offset="0"/><stop offset="1" stop-opacity="0"/></linearGradient><mask id="b" x="-1187.45" y="-269.68" width="1813.84" height="554.26" maskUnits="userSpaceOnUse"><polygon class="a" points="625.33 284.58 452.55 238.2 452.55 170.5 625.33 216.88 625.33 284.58"/><line class="b" x1="486.25" y1="179.55" x2="486.25" y2="247.32"/><line class="b" x1="573.58" y1="202.99" x2="573.58" y2="270.76"/><line class="b" x1="452.46" y1="192.89" x2="625.16" y2="239.25"/><line class="b" x1="452.46" y1="215.48" x2="625.16" y2="261.83"/></mask><mask id="c" x="-1468.9" y="-163.59" width="1866.4" height="673.87" maskUnits="userSpaceOnUse"><polygon class="a" points="344.11 510.28 171.1 462.49 171.1 289.49 344.11 337.28 344.11 510.28"/></mask></defs><title>objects-diagram</title><polyline class="c" points="460.63 153.71 480.14 142.45 513.15 123.39"/><polyline class="c" points="312.69 239.13 336.82 225.2 365.42 208.68"/><polygon class="d" points="742.15 65.53 519.88 5.97 519.88 368.97 742.15 428.53 742.15 65.53"/><polygon class="e" points="742.15 428.53 742.15 377.47 786.44 403 742.15 428.53"/><polyline class="c" points="619.05 308.21 626.95 303.65 636.44 298.17"/><polygon class="f" points="637.26 156.11 443.71 104.25 443.71 402.92 637.26 454.78 637.26 156.11"/><g class="g"><polygon class="h" points="625.33 239.44 452.55 193.07 452.55 170.5 625.33 216.88 625.33 239.44"/><polygon class="i" points="625.33 262.01 452.55 215.64 452.55 193.07 625.33 239.44 625.33 262.01"/><polygon class="j" points="625.33 284.58 452.55 238.2 452.55 215.64 625.33 262.01 625.33 284.58"/></g><polyline class="c" points="467.58 395.66 481.45 387.65 490.54 382.4"/><polygon class="f" points="490.33 240.94 296.78 189.08 296.78 487.75 490.33 539.62 490.33 240.94"/><polygon class="h" points="386.94 387.36 314 367.78 314 238.33 386.94 257.91 386.94 387.36"/><line class="k" x1="402.02" y1="280.97" x2="355.33" y2="284.32"/><line class="k" x1="401.71" y1="316.74" x2="355.33" y2="291.74"/><polygon class="i" points="473.63 301.9 400.69 282.32 400.69 261.6 473.63 281.18 473.63 301.9"/><polygon class="j" points="473.63 337.63 400.69 318.05 400.69 297.32 473.63 316.9 473.63 337.63"/><polyline class="c" points="331.67 474.13 343.85 467.1 356.86 459.58"/><polyline class="c" points="183.35 313.8 207.44 299.89 231.58 285.96"/><polygon class="c" points="710.61 148.05 546.55 104.09 546.55 144.26 710.61 188.22 710.61 148.05"/><polygon class="c" points="710.61 215.05 546.55 171.09 546.55 211.26 710.61 255.22 710.61 215.05"/><line class="c" x1="162.68" y1="266.5" x2="533" y2="52.7"/><line class="c" x1="356.23" y1="617.04" x2="726.54" y2="403.24"/><polygon class="f" points="356.23 318.36 162.68 266.5 162.68 565.18 356.23 617.04 356.23 318.36"/><g class="l"><path class="m" d="M165.1,350.83c12-19.68,24-57.37,47,7s29,42,46,35.71,27,34.46,50,51.81,75,16.72,89,15.59"/><path class="n" d="M349.1,427.78c-9.13-13.05-13.7-31.26-31.2-9.54s-22.07,9.47-35,.86-20.55,6.69-38.05,6.89-67.08-25.38-77.73-30.61"/></g><polygon class="i" points="211.4 436.27 47.34 392.31 47.34 432.48 211.4 476.44 211.4 436.27"/><polygon class="o" points="211.4 436.27 47.34 392.31 47.34 432.48 211.4 476.44 211.4 436.27"/><polygon class="j" points="211.4 503.27 47.34 459.31 47.34 499.48 211.4 543.44 211.4 503.27"/><polygon class="o" points="211.4 503.27 47.34 459.31 47.34 499.48 211.4 543.44 211.4 503.27"/><line class="c" x1="513.15" y1="123.39" x2="544.97" y2="105.02"/><line class="c" x1="365.42" y1="208.68" x2="460.63" y2="153.71"/><line class="c" x1="231.58" y1="285.96" x2="312.69" y2="239.13"/><line class="c" x1="48.79" y1="391.49" x2="183.35" y2="313.8"/><line class="c" x1="636.44" y1="298.17" x2="709.92" y2="255.75"/><line class="c" x1="490.54" y1="382.4" x2="619.05" y2="308.21"/><line class="c" x1="356.86" y1="459.58" x2="467.58" y2="395.66"/><line class="c" x1="212.34" y1="543.03" x2="331.67" y2="474.13"/></svg>
\ No newline at end of file
diff --git a/example/styleguide/res/templates/colors.html b/example/styleguide/res/templates/colors.html
deleted file mode 100644
index 47631b0cff2..00000000000
--- a/example/styleguide/res/templates/colors.html
+++ /dev/null
@@ -1,84 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2016, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div ng-init="colors = [
-{ 'category': 'Interface', 'description': 'Colors used in the application envelope, buttons and controls.', 'items': [{ 'name': 'Body Background', 'constant': '$colorBodyBg', 'valEspresso': '#333', 'valSnow': '#fcfcfc' },
-{ 'name': 'Body Foreground', 'constant': '$colorBodyFg', 'valEspresso': '#999', 'valSnow': '#666' },
-{ 'name': 'Key Color Background', 'constant': '$colorKey', 'valEspresso': '#0099cc', 'valSnow': '#0099cc' },
-{ 'name': 'Key Color Foreground', 'constant': '$colorKeyFg', 'valEspresso': '#fff', 'valSnow': '#fff' },
-{ 'name': 'Paused Color Background', 'constant': '$colorPausedBg', 'valEspresso': '#c56f01', 'valSnow': '#ff9900' },
-{ 'name': 'Paused Color Foreground', 'constant': '$colorPausedFg', 'valEspresso': '#fff', 'valSnow': '#fff' }]},
-{ 'category': 'Forms', 'description': 'Colors in forms, mainly to articulate validation status.', 'items': [{ 'name': 'Valid Entry', 'constant': '$colorFormValid', 'valEspresso': '#33cc33', 'valSnow': '#33cc33' },
-{ 'name': 'Errorenous Entry', 'constant': '$colorFormError', 'valEspresso': '#990000', 'valSnow': '#990000' },
-{ 'name': 'Invalid Entry', 'constant': '$colorFormInvalid', 'valEspresso': '#ff3300', 'valSnow': '#ff2200' }]},
-{ 'category': 'Application Status', 'description': 'Colors related to the status of application objects, such as a successful connection to a service.', 'items': [{ 'name': 'Alert Color', 'constant': '$colorAlert', 'valEspresso': '#ff3c00', 'valSnow': '#ff3c00' },
-{ 'name': 'Status Color Foreground', 'constant': '$colorStatusFg', 'valEspresso': '#ccc', 'valSnow': '#fff' },
-{ 'name': 'Default Status Color', 'constant': '$colorStatusDefault', 'valEspresso': '#ccc', 'valSnow': '#ccc' },
-{ 'name': 'Status: Informational Color', 'constant': '$colorStatusInfo', 'valEspresso': '#62ba72', 'valSnow': '#60ba7b' },
-{ 'name': 'Status: Alert Color', 'constant': '$colorStatusAlert', 'valEspresso': '#ffa66d', 'valSnow': '#ffb66c' },
-{ 'name': 'Status: Error Color', 'constant': '$colorStatusError', 'valEspresso': '#d4585c', 'valSnow': '#c96b68' }]},
-{ 'category': 'Telemetry Status', 'description': 'Telemetry status colors used to indicate limit violations and alarm states. Note that these colors should be reserved exclusively for this usage.', 'items': [{ 'name': 'Yellow Limit Color Background', 'constant': '$colorLimitYellowBg', 'valEspresso': 'rgba(255,170,0,0.3)', 'valSnow': 'rgba(255,170,0,0.3)' },
-{ 'name': 'Yellow Limit Color Icon', 'constant': '$colorLimitYellowIc', 'valEspresso': '#ffaa00', 'valSnow': '#ffaa00' },
-{ 'name': 'Red Limit Color Background', 'constant': '$colorLimitRedBg', 'valEspresso': 'rgba(255,0,0,0.3)', 'valSnow': 'rgba(255,0,0,0.3)' },
-{ 'name': 'Red Limit Color Icon', 'constant': '$colorLimitRedIc', 'valEspresso': 'red', 'valSnow': 'red' }]}
-]"></div>
-
-
-
-<div class="l-style-guide s-text">
-    <p class="doc-title">Open MCT Style Guide</p>
-    <h1>Colors</h1>
-
-    <div class="l-section">
-        <h2>Overview</h2>
-        <p>In mission operations, color is used to convey meaning. Alerts, warnings and status conditions are by convention communicated with colors in the green, yellow and red families. Colors must also be reserved for use in plots. As a result, Open MCT uses color selectively and sparingly. Follow these guidelines:</p>
-        <ul>
-            <li>Don't use red, orange, yellow or green colors in any element that isn't conveying some kind of status information.</li>
-            <li>Each theme has a key color (typically blue-ish) that should be used to emphasize interactive elements and important UI controls.</li>
-            <li>Within each theme values are used to push elements back or bring them forward, lowering or raising them in visual importance.
-                <span class="themed espresso">In this theme, Espresso, lighter colors are placed on a dark background. The lighter a color is, the more it comes toward the observer and is raised in importance.</span>
-                <span class="themed snow">In this theme, Snow, darker colors are placed on a light background. The darker a color is, the more it comes toward the observer and is raised in importance.</span>
-            </li>
-            <li>For consistency, use a theme's pre-defined status colors.</li>
-        </ul>
-    </div>
-
-    <div class="l-section" ng-repeat="colorSet in colors">
-        <h2>{{ colorSet.category }}</h2>
-        <p>{{ colorSet.description }}</p>
-        <div class="items-holder grid">
-            <div class="item swatch-item" ng-repeat="color in colorSet.items">
-                <div class="h-swatch">
-                    <div class="swatch themed espresso" style="background-color: {{ color.valEspresso }}"></div>
-                    <div class="swatch themed snow" style="background-color: {{ color.valSnow }}"></div>
-                </div>
-                <table class="details">
-                    <tr><td class="label">Name</td><td class="value">{{color.name}}</td></tr>
-                    <tr><td class="label">SASS</td><td class="value">{{color.constant}}</td></tr>
-                    <tr><td class="label">Value</td><td class="value">
-                        <span class="themed espresso">{{color.valEspresso}}</span>
-                        <span class="themed snow">{{color.valSnow}}</span>
-                    </td></tr>
-                </table>
-            </div>
-        </div>
-    </div>
-</div>
\ No newline at end of file
diff --git a/example/styleguide/res/templates/controls.html b/example/styleguide/res/templates/controls.html
deleted file mode 100644
index a29f82586dc..00000000000
--- a/example/styleguide/res/templates/controls.html
+++ /dev/null
@@ -1,172 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2016, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div class="l-style-guide s-text">
-    <p class="doc-title">Open MCT Style Guide</p>
-    <h1>Controls</h1>
-
-    <div class="l-section">
-        <h2>Standard Buttons</h2>
-        <div class="cols cols1-1">
-            <div class="col">
-                <p>Use a standard button in locations where there's sufficient room and you must make it clear that the element is an interactive button element. Buttons can be displayed with only an icon, only text, or with icon and text combined.</p>
-                <p>Use an icon whenever possible to aid the user's recognition and recall. If both and icon and text are to be used, the text must be within a <code>span</code> with class <code>.title-label</code>.</p>
-            </div>
-<mct-example><a class="s-button icon-pencil" title="Edit"></a>
-<a class="s-button" title="Edit">Edit</a>
-<a class="s-button icon-pencil" title="Edit">
-    <span class="title-label">Edit</span>
-</a>
-</mct-example>
-        </div>
-    </div>
-
-    <div class="l-section">
-        <h2>&quot;Major&quot; Buttons</h2>
-        <div class="cols cols1-1">
-            <div class="col">
-                <p>Major buttons allow emphasis to be placed on a button. Use this on a single button when the user has a small number of choices, and one choice is a normal default. Just add <code>.major</code> to any element that uses <code>.s-button</code>.</p>
-            </div>
-<mct-example><a class="s-button major">Ok</a>
-<a class="s-button">Cancel</a>
-</mct-example>
-        </div>
-    </div>
-
-    <div class="l-section">
-        <h2>Button Sets</h2>
-        <div class="cols cols1-1">
-            <div class="col">
-                <p>Use button sets to connect buttons that have related purpose or functionality. Buttons in a set round the outer corners of only the first and last buttons, any other buttons in the middle simply get division spacers.</p>
-                <p>To use, simply wrap two or more <code>.s-button</code> elements within <code>.l-btn-set</code>.</p>
-            </div>
-<mct-example><span class="l-btn-set">
-    <a class="s-button icon-magnify"></a>
-    <a class="s-button icon-magnify-in"></a>
-    <a class="s-button icon-magnify-out"></a>
-</span>
-</mct-example>
-            </div>
-    </div>
-
-    <div class="l-section">
-        <h2>Icon-only Buttons</h2>
-        <div class="cols cols1-1">
-            <div class="col">
-                <p>When a button is presented within another control it may be advantageous to avoid visual clutter by using an icon-only button. These type of controls present an icon without the &quot;base&quot; of standard buttons. Icon-only buttons should only be used in a context where they are clearly an interactive element and not an object-type identifier, and should not be used with text.</p>
-            </div>
-<mct-example><a class="s-icon-button icon-pencil" title="Edit"></a>
-            </mct-example>
-        </div>
-    </div>
-
-    <div class="l-section">
-        <h2>Checkboxes</h2>
-        <div class="cols cols1-1">
-            <div class="col">
-                <p>Checkboxes use a combination of minimal additional markup with CSS to present a custom and common look-and-feel across platforms.</p>
-                <p>The basic structure is a <code>label</code> with a checkbox-type input and an <code>em</code> element inside. The <code>em</code> is needed as the holder of the custom element; the input itself is hidden. Putting everything inside the <code>label</code> allows the label itself to act as a clickable element.</p>
-            </div>
-<mct-example><label class="checkbox custom no-text">
-    <input type="checkbox" />
-    <em></em>
-</label>
-<br />
-<label class="checkbox custom no-text">
-    <input type="checkbox" checked />
-    <em></em>
-</label>
-<br />
-<label class="checkbox custom">Labeled checkbox
-    <input type="checkbox" />
-    <em></em>
-</label></mct-example>
-        </div>
-    </div>
-
-    <div class="l-section">
-        <h2>Radio Buttons</h2>
-        <div class="cols cols1-1">
-            <div class="col">
-                <p>Radio buttons use the same technique as checkboxes above.</p>
-            </div>
-<mct-example><label class="radio custom">Red
-    <input name="Alarm Status" type="radio" />
-    <em></em>
-</label>
-<br />
-<label class="radio custom">Orange
-    <input name="Alarm Status" type="radio" checked />
-    <em></em>
-</label>
-<br />
-<label class="radio custom">Yellow
-    <input name="Alarm Status" type="radio" />
-    <em></em>
-</label>
-</mct-example>
-        </div>
-    </div>
-
-    <div class="l-section">
-        <h2>Selects</h2>
-        <div class="cols cols1-1">
-            <div class="col">
-                <p>Similar to checkboxes and radio buttons, selects use a combination of minimal additional markup with CSS to present a custom and common look-and-feel across platforms. The <code>select</code> element is wrapped by another element, such as a <code>div</code>, which acts as the main display element for the styling. The <code>select</code> provides the click and select functionality, while having all of its native look-and-feel suppressed.</p>
-            </div>
-<mct-example><div class="select">
-    <select>
-        <option value="" selected="selected">- Select One -</option>
-        <option value="Colussus">Colussus</option>
-        <option value="HAL 9000">HAL 9000</option>
-        <option value="Mother">Mother</option>
-        <option value="Skynet">Skynet</option>
-    </select>
-</div>
-</mct-example>
-        </div>
-    </div>
-
-    <div class="l-section">
-        <h2>Local Controls</h2>
-        <div class="cols cols1-1">
-            <div class="col">
-                <p>Local controls are typically buttons and selects that provide actions in close proximity to a component.</p>
-                <p>These controls can optionally be hidden to reduce clutter until the user hovers their cursor over an enclosing element. To use this approach, apply the class <code>.has-local-controls</code> to the element that should be aware of the hover and ensure that element encloses <code>.h-local-controls</code>.</p>
-            </div>
-            <mct-example><div class="plot-display-area" style="padding: 10px; position: relative;">
-                Some content in here
-    <div class="h-local-controls h-local-controls-overlay-content l-btn-set">
-        <a class="s-button icon-arrow-left" title="Restore previous pan/zoom"></a>
-        <a class="s-button icon-reset" title="Reset pan/zoom"></a>
-    </div>
-</div>
-<div class="plot-display-area has-local-controls" style="padding: 10px; position: relative;">
-    Hover here
-    <div class="h-local-controls h-local-controls-overlay-content local-controls-hidden l-btn-set">
-        <a class="s-button icon-arrow-left" title="Restore previous pan/zoom"></a>
-        <a class="s-button icon-reset" title="Reset pan/zoom"></a>
-    </div>
-</div></mct-example>
-        </div>
-    </div>
-
-</div>
diff --git a/example/styleguide/res/templates/glyphs.html b/example/styleguide/res/templates/glyphs.html
deleted file mode 100644
index a851d8f183c..00000000000
--- a/example/styleguide/res/templates/glyphs.html
+++ /dev/null
@@ -1,216 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2016, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div ng-init="general= [{ 'meaning': 'Pay attention', 'cssClass': 'icon-alert-rect', 'cssContent': 'e900', 'htmlEntity': '&amp;#xe900' },
-{ 'meaning': 'Warning', 'cssClass': 'icon-alert-triangle', 'cssContent': 'e901', 'htmlEntity': '&amp;#xe901' },
-{ 'meaning': 'Invoke menu', 'cssClass': 'icon-arrow-down', 'cssContent': 'e902', 'htmlEntity': '&amp;#xe902' },
-{ 'meaning': 'General usage arrow pointing left', 'cssClass': 'icon-arrow-left', 'cssContent': 'e903', 'htmlEntity': '&amp;#xe903' },
-{ 'meaning': 'General usage arrow pointing right', 'cssClass': 'icon-arrow-right', 'cssContent': 'e904', 'htmlEntity': '&amp;#xe904' },
-{ 'meaning': 'Upper limit, red', 'cssClass': 'icon-arrow-double-up', 'cssContent': 'e905', 'htmlEntity': '&amp;#xe905' },
-{ 'meaning': 'Upper limit, yellow', 'cssClass': 'icon-arrow-tall-up', 'cssContent': 'e906', 'htmlEntity': '&amp;#xe906' },
-{ 'meaning': 'Lower limit, yellow', 'cssClass': 'icon-arrow-tall-down', 'cssContent': 'e907', 'htmlEntity': '&amp;#xe907' },
-{ 'meaning': 'Lower limit, red', 'cssClass': 'icon-arrow-double-down', 'cssContent': 'e908', 'htmlEntity': '&amp;#xe908' },
-{ 'meaning': 'General usage arrow pointing up', 'cssClass': 'icon-arrow-up', 'cssContent': 'e909', 'htmlEntity': '&amp;#xe909' },
-{ 'meaning': 'Required form element', 'cssClass': 'icon-asterisk', 'cssContent': 'e910', 'htmlEntity': '&amp;#xe910' },
-{ 'meaning': 'Alert', 'cssClass': 'icon-bell', 'cssContent': 'e911', 'htmlEntity': '&amp;#xe911' },
-{ 'meaning': 'General usage box symbol', 'cssClass': 'icon-box', 'cssContent': 'e912', 'htmlEntity': '&amp;#xe912' },
-{ 'meaning': 'Click on or into', 'cssClass': 'icon-box-with-arrow', 'cssContent': 'e913', 'htmlEntity': '&amp;#xe913' },
-{ 'meaning': 'General usage checkmark, used in checkboxes; complete', 'cssClass': 'icon-check', 'cssContent': 'e914', 'htmlEntity': '&amp;#xe914' },
-{ 'meaning': 'Connected', 'cssClass': 'icon-connectivity', 'cssContent': 'e915', 'htmlEntity': '&amp;#xe915' },
-{ 'meaning': 'Status: DB connected', 'cssClass': 'icon-database-in-brackets', 'cssContent': 'e916', 'htmlEntity': '&amp;#xe916' },
-{ 'meaning': 'View or make visible', 'cssClass': 'icon-eye-open', 'cssContent': 'e917', 'htmlEntity': '&amp;#xe917' },
-{ 'meaning': 'Settings, properties', 'cssClass': 'icon-gear', 'cssContent': 'e918', 'htmlEntity': '&amp;#xe918' },
-{ 'meaning': 'Process, progress, time', 'cssClass': 'icon-hourglass', 'cssContent': 'e919', 'htmlEntity': '&amp;#xe919' },
-{ 'meaning': 'Info', 'cssClass': 'icon-info', 'cssContent': 'e920', 'htmlEntity': '&amp;#xe920' },
-{ 'meaning': 'Link (alias)', 'cssClass': 'icon-link', 'cssContent': 'e921', 'htmlEntity': '&amp;#xe921' },
-{ 'meaning': 'Locked', 'cssClass': 'icon-lock', 'cssContent': 'e922', 'htmlEntity': '&amp;#xe922' },
-{ 'meaning': 'General usage minus symbol; used in timer object', 'cssClass': 'icon-minus', 'cssContent': 'e923', 'htmlEntity': '&amp;#xe923' },
-{ 'meaning': 'An item that is shared', 'cssClass': 'icon-people', 'cssContent': 'e924', 'htmlEntity': '&amp;#xe924' },
-{ 'meaning': 'User profile or belonging to an individual', 'cssClass': 'icon-person', 'cssContent': 'e925', 'htmlEntity': '&amp;#xe925' },
-{ 'meaning': 'General usage plus symbol; used in timer object', 'cssClass': 'icon-plus', 'cssContent': 'e926', 'htmlEntity': '&amp;#xe926' },
-{ 'meaning': 'Delete', 'cssClass': 'icon-trash', 'cssContent': 'e927', 'htmlEntity': '&amp;#xe927' },
-{ 'meaning': 'Close, remove', 'cssClass': 'icon-x', 'cssContent': 'e928', 'htmlEntity': '&amp;#xe928' },
-{ 'meaning': 'Enclosing, inclusive; used in Time Conductor', 'cssClass': 'icon-brackets', 'cssContent': 'e929', 'htmlEntity': '&amp;#xe929' },
-{ 'meaning': 'Something is targeted', 'cssClass': 'icon-crosshair', 'cssContent': 'e930', 'htmlEntity': '&amp;#xe930' },
-{ 'meaning': 'Draggable', 'cssClass': 'icon-grippy', 'cssContent': 'e931', 'htmlEntity': '&amp;#xe931' }
-]; controls= [{ 'meaning': 'Reset zoom/pam', 'cssClass': 'icon-arrows-out', 'cssContent': 'e1000', 'htmlEntity': '&amp;#xe1000' },
-{ 'meaning': 'Expand vertically', 'cssClass': 'icon-arrows-right-left', 'cssContent': 'e1001', 'htmlEntity': '&amp;#xe1001' },
-{ 'meaning': 'View scrolling', 'cssClass': 'icon-arrows-up-down', 'cssContent': 'e1002', 'htmlEntity': '&amp;#xe1002' },
-{ 'meaning': 'Bullet; used in radio buttons', 'cssClass': 'icon-bullet', 'cssContent': 'e1004', 'htmlEntity': '&amp;#xe1004' },
-{ 'meaning': 'Invoke datetime picker', 'cssClass': 'icon-calendar', 'cssContent': 'e1005', 'htmlEntity': '&amp;#xe1005' },
-{ 'meaning': 'Web link', 'cssClass': 'icon-chain-links', 'cssContent': 'e1006', 'htmlEntity': '&amp;#xe1006' },
-{ 'meaning': 'Collapse left', 'cssClass': 'icon-collapse-pane-left', 'cssContent': 'e1007', 'htmlEntity': '&amp;#xe1007' },
-{ 'meaning': 'Collapse right', 'cssClass': 'icon-collapse-pane-right', 'cssContent': 'e1008', 'htmlEntity': '&amp;#xe1008' },
-{ 'meaning': 'Download', 'cssClass': 'icon-download', 'cssContent': 'e1009', 'htmlEntity': '&amp;#xe1009' },
-{ 'meaning': 'Copy/Duplicate', 'cssClass': 'icon-duplicate', 'cssContent': 'e1010', 'htmlEntity': '&amp;#xe1010' },
-{ 'meaning': 'New folder', 'cssClass': 'icon-folder-new', 'cssContent': 'e1011', 'htmlEntity': '&amp;#xe1011' },
-{ 'meaning': 'Exit fullscreen mode', 'cssClass': 'icon-fullscreen-collapse', 'cssContent': 'e1012', 'htmlEntity': '&amp;#xe1012' },
-{ 'meaning': 'Display fullscreen', 'cssClass': 'icon-fullscreen-expand', 'cssContent': 'e1013', 'htmlEntity': '&amp;#xe1013' },
-{ 'meaning': 'Layer order', 'cssClass': 'icon-layers', 'cssContent': 'e1014', 'htmlEntity': '&amp;#xe1014' },
-{ 'meaning': 'Line color', 'cssClass': 'icon-line-horz', 'cssContent': 'e1015', 'htmlEntity': '&amp;#xe1015' },
-{ 'meaning': 'Search', 'cssClass': 'icon-magnify', 'cssContent': 'e1016', 'htmlEntity': '&amp;#xe1016' },
-{ 'meaning': 'Zoom in', 'cssClass': 'icon-magnify-in', 'cssContent': 'e1017', 'htmlEntity': '&amp;#xe1017' },
-{ 'meaning': 'Zoom out', 'cssClass': 'icon-magnify-out', 'cssContent': 'e1018', 'htmlEntity': '&amp;#xe1018' },
-{ 'meaning': 'Menu', 'cssClass': 'icon-menu-hamburger', 'cssContent': 'e1019', 'htmlEntity': '&amp;#xe1019' },
-{ 'meaning': 'Move', 'cssClass': 'icon-move', 'cssContent': 'e1020', 'htmlEntity': '&amp;#xe1020' },
-{ 'meaning': 'Open in new window', 'cssClass': 'icon-new-window', 'cssContent': 'e1021', 'htmlEntity': '&amp;#xe1021' },
-{ 'meaning': 'Fill', 'cssClass': 'icon-paint-bucket', 'cssContent': 'e1022', 'htmlEntity': '&amp;#xe1022' },
-{ 'meaning': 'Pause real-time streaming', 'cssClass': 'icon-pause', 'cssContent': 'e1023', 'htmlEntity': '&amp;#xe1023' },
-{ 'meaning': 'Edit', 'cssClass': 'icon-pencil', 'cssContent': 'e1024', 'htmlEntity': '&amp;#xe1024' },
-{ 'meaning': 'Stop pause, resume real-time streaming', 'cssClass': 'icon-play', 'cssContent': 'e1025', 'htmlEntity': '&amp;#xe1025' },
-{ 'meaning': 'Plot resources', 'cssClass': 'icon-plot-resource', 'cssContent': 'e1026', 'htmlEntity': '&amp;#xe1026' },
-{ 'meaning': 'Previous', 'cssClass': 'icon-pointer-left', 'cssContent': 'e1027', 'htmlEntity': '&amp;#xe1027' },
-{ 'meaning': 'Next, navigate to', 'cssClass': 'icon-pointer-right', 'cssContent': 'e1028', 'htmlEntity': '&amp;#xe1028' },
-{ 'meaning': 'Refresh', 'cssClass': 'icon-refresh', 'cssContent': 'e1029', 'htmlEntity': '&amp;#xe1029' },
-{ 'meaning': 'Save', 'cssClass': 'icon-save', 'cssContent': 'e1030', 'htmlEntity': '&amp;#xe1030' },
-{ 'meaning': 'View plot', 'cssClass': 'icon-sine', 'cssContent': 'e1031', 'htmlEntity': '&amp;#xe1031' },
-{ 'meaning': 'Text color', 'cssClass': 'icon-T', 'cssContent': 'e1032', 'htmlEntity': '&amp;#xe1032' },
-{ 'meaning': 'Image thumbs strip; view items grid', 'cssClass': 'icon-thumbs-strip', 'cssContent': 'e1033', 'htmlEntity': '&amp;#xe1033' },
-{ 'meaning': 'Two part item, both parts', 'cssClass': 'icon-two-parts-both', 'cssContent': 'e1034', 'htmlEntity': '&amp;#xe1034' },
-{ 'meaning': 'Two part item, one only', 'cssClass': 'icon-two-parts-one-only', 'cssContent': 'e1035', 'htmlEntity': '&amp;#xe1035' },
-{ 'meaning': 'Resync', 'cssClass': 'icon-resync', 'cssContent': 'e1036', 'htmlEntity': '&amp;#xe1036' },
-{ 'meaning': 'Reset', 'cssClass': 'icon-reset', 'cssContent': 'e1037', 'htmlEntity': '&amp;#xe1037' },
-{ 'meaning': 'Clear', 'cssClass': 'icon-x-in-circle', 'cssContent': 'e1038', 'htmlEntity': '&amp;#xe1038' },
-{ 'meaning': 'Brightness', 'cssClass': 'icon-brightness', 'cssContent': 'e1039', 'htmlEntity': '&amp;#xe1039' },
-{ 'meaning': 'Contrast', 'cssClass': 'icon-contrast', 'cssContent': 'e1040', 'htmlEntity': '&amp;#xe1040' },
-{ 'meaning': 'Expand', 'cssClass': 'icon-expand', 'cssContent': 'e1041', 'htmlEntity': '&amp;#xe1041' },
-{ 'meaning': 'View items in a tabular list', 'cssClass': 'icon-list-view', 'cssContent': 'e1042', 'htmlEntity': '&amp;#xe1042' },
-{ 'meaning': 'Snap an object corner to a grid', 'cssClass': 'icon-grid-snap-to', 'cssContent': 'e1043', 'htmlEntity': '&amp;#xe1043' },
-{ 'meaning': 'Do not snap an object corner to a grid', 'cssClass': 'icon-grid-snap-no', 'cssContent': 'e1044', 'htmlEntity': '&amp;#xe1044' },
-{ 'meaning': 'Show an object frame in a Display Layout', 'cssClass': 'icon-frame-show', 'cssContent': 'e1045', 'htmlEntity': '&amp;#xe1045' },
-{ 'meaning': 'Do not show an object frame in a Display Layout', 'cssClass': 'icon-frame-hide', 'cssContent': 'e1046', 'htmlEntity': '&amp;#xe1046' }
-]; objects= [{ 'meaning': 'Activity', 'cssClass': 'icon-activity', 'cssContent': 'e1100', 'htmlEntity': '&amp;#xe1100' },
-{ 'meaning': 'Activity Mode', 'cssClass': 'icon-activity-mode', 'cssContent': 'e1101', 'htmlEntity': '&amp;#xe1101' },
-{ 'meaning': 'Auto-flow Tabular view', 'cssClass': 'icon-autoflow-tabular', 'cssContent': 'e1102', 'htmlEntity': '&amp;#xe1102' },
-{ 'meaning': 'Clock object type', 'cssClass': 'icon-clock', 'cssContent': 'e1103', 'htmlEntity': '&amp;#xe1103' },
-{ 'meaning': 'Database', 'cssClass': 'icon-database', 'cssContent': 'e1104', 'htmlEntity': '&amp;#xe1104' },
-{ 'meaning': 'Data query', 'cssClass': 'icon-database-query', 'cssContent': 'e1105', 'htmlEntity': '&amp;#xe1105' },
-{ 'meaning': 'Data Set domain object', 'cssClass': 'icon-dataset', 'cssContent': 'e1106', 'htmlEntity': '&amp;#xe1106' },
-{ 'meaning': 'Datatable, channel table', 'cssClass': 'icon-datatable', 'cssContent': 'e1107', 'htmlEntity': '&amp;#xe1107' },
-{ 'meaning': 'Dictionary', 'cssClass': 'icon-dictionary', 'cssContent': 'e1108', 'htmlEntity': '&amp;#xe1108' },
-{ 'meaning': 'Folder', 'cssClass': 'icon-folder', 'cssContent': 'e1109', 'htmlEntity': '&amp;#xe1109' },
-{ 'meaning': 'Imagery', 'cssClass': 'icon-image', 'cssContent': 'e1110', 'htmlEntity': '&amp;#xe1110' },
-{ 'meaning': 'Display Layout', 'cssClass': 'icon-layout', 'cssContent': 'e1111', 'htmlEntity': '&amp;#xe1111' },
-{ 'meaning': 'Generic Object', 'cssClass': 'icon-object', 'cssContent': 'e1112', 'htmlEntity': '&amp;#xe1112' },
-{ 'meaning': 'Unknown object type', 'cssClass': 'icon-object-unknown', 'cssContent': 'e1113', 'htmlEntity': '&amp;#xe1113' },
-{ 'meaning': 'Packet domain object', 'cssClass': 'icon-packet', 'cssContent': 'e1114', 'htmlEntity': '&amp;#xe1114' },
-{ 'meaning': 'Page', 'cssClass': 'icon-page', 'cssContent': 'e1115', 'htmlEntity': '&amp;#xe1115' },
-{ 'meaning': 'Overlay plot', 'cssClass': 'icon-plot-overlay', 'cssContent': 'e1116', 'htmlEntity': '&amp;#xe1116' },
-{ 'meaning': 'Stacked plot', 'cssClass': 'icon-plot-stacked', 'cssContent': 'e1117', 'htmlEntity': '&amp;#xe1117' },
-{ 'meaning': 'Session object', 'cssClass': 'icon-session', 'cssContent': 'e1118', 'htmlEntity': '&amp;#xe1118' },
-{ 'meaning': 'Table', 'cssClass': 'icon-tabular', 'cssContent': 'e1119', 'htmlEntity': '&amp;#xe1119' },
-{ 'meaning': 'Latest available data object', 'cssClass': 'icon-tabular-lad', 'cssContent': 'e1120', 'htmlEntity': '&amp;#xe1120' },
-{ 'meaning': 'Latest available data set', 'cssClass': 'icon-tabular-lad-set', 'cssContent': 'e1121', 'htmlEntity': '&amp;#xe1121' },
-{ 'meaning': 'Real-time table view', 'cssClass': 'icon-tabular-realtime', 'cssContent': 'e1122', 'htmlEntity': '&amp;#xe1122' },
-{ 'meaning': 'Real-time scrolling table', 'cssClass': 'icon-tabular-scrolling', 'cssContent': 'e1123', 'htmlEntity': '&amp;#xe1123' },
-{ 'meaning': 'Telemetry element', 'cssClass': 'icon-telemetry', 'cssContent': 'e1124', 'htmlEntity': '&amp;#xe1124' },
-{ 'meaning': 'Telemetry Panel object', 'cssClass': 'icon-telemetry-panel', 'cssContent': 'e1125', 'htmlEntity': '&amp;#xe1125' },
-{ 'meaning': 'Timeline object', 'cssClass': 'icon-timeline', 'cssContent': 'e1126', 'htmlEntity': '&amp;#xe1126' },
-{ 'meaning': 'Timer object', 'cssClass': 'icon-timer', 'cssContent': 'e1127', 'htmlEntity': '&amp;#xe1127' },
-{ 'meaning': 'Data Topic', 'cssClass': 'icon-topic', 'cssContent': 'e1128', 'htmlEntity': '&amp;#xe1128' },
-{ 'meaning': 'Fixed Position object', 'cssClass': 'icon-box-with-dashed-lines', 'cssContent': 'e1129', 'htmlEntity': '&amp;#xe1129' },
-{ 'meaning': 'Summary Widget', 'cssClass': 'icon-summary-widget', 'cssContent': 'e1130', 'htmlEntity': '&amp;#xe1130' },
-{ 'meaning': 'Notebook object', 'cssClass': 'icon-notebook', 'cssContent': 'e1131', 'htmlEntity': '&amp;#xe1131' }
-];
-"></div>
-
-<div class="l-style-guide s-text">
-    <p class="doc-title">Open MCT Style Guide</p>
-    <h1>Glyphs</h1>
-    <div class="l-section">
-        <p>Symbolic glyphs are used extensively in Open MCT to call attention to interactive elements, identify objects, and aid in visual recall. Glyphs are made available in a custom symbols font, and have associated CSS classes for their usage. Using a font in this way (versus using images or sprites) has advantages in that each symbol is in effect a scalable vector that can be sized up or down as needed. Color can also quite easily be applied via CSS.</p>
-        <p>New glyphs can be added if needed. Take care to observe the following guidelines:
-        <ul>
-        <li>Symbols should be created at 512 pixels high, and no more than 512 pixels wide. This size is based on a &quot;crisp&quot; 16px approach. Find out more about <a class="link" target="_blank" href="http://asimpleframe.com/writing/custom-icon-font-tutorial-icomoon">crisp symbol fonts</a>.</li>
-            <li>In general, the symbol should occupy most of a square area as possible; avoid symbol aspect ratios that are squat or tall.</li>
-            <li>For consistency and legibility, symbols are designed as mostly solid shapes. Avoid using thin lines or fine detail that will be lost when the icon is sized down. In general, no stroke should be less than 32 pixels.</li>
-            <li>Symbols should be legible down to a minimum of 12 x 12 pixels.</li>
-
-        </ul>
-        </p>
-    </div>
-
-    <div class="l-section">
-        <h2>How to Use Glyphs</h2>
-        <div class="cols cols1-1">
-            <div class="col">
-                <p>The easiest way to use a glyph is to include its CSS class in an element. The CSS adds a psuedo <code>:before</code> HTML element to whatever element it's attached to that makes proper use of the symbols font.</p>
-                <p>Alternately, you can use the <code>.ui-symbol</code> class in an object that contains encoded HTML entities. This method is only recommended if you cannot use the aforementioned CSS class approach.</p>
-            </div>
-            <mct-example><a class="s-button icon-gear" title="Settings"></a>
-<br /><br />
-<a class="s-icon-button icon-gear" title="Settings"></a>
-<br /><br />
-<div class="ui-symbol">&#xe901 &#xe914 &#xe922</div>
-</mct-example>
-        </div>
-    </div>
-
-    <div class="l-section">
-        <h2>General User Interface Glyphs</h2>
-        <p>Glyphs suitable for denoting general user interface verbs and nouns.</p>
-        <div class="items-holder grid">
-            <div class="item glyph-item" ng-repeat="glyph in general">
-                <div class="glyph" ng-class="glyph.cssClass"></div>
-                <table class="details">
-                    <tr><td class="label">Class</td><td class="value">.{{glyph.cssClass}}</td></tr>
-                    <tr><td class="label">Meaning</td><td class="value">{{glyph.meaning}}</td></tr>
-                    <tr><td class="label">CSS Content</td><td class="value">\{{glyph.cssContent}}</td></tr>
-                    <tr><td class="label">HTML Entity</td><td class="value">{{glyph.htmlEntity}}</td></tr>
-                </table>
-            </div>
-        </div>
-    </div>
-
-    <div class="l-section">
-        <h2>Control Glyphs</h2>
-        <p>Glyphs created for use in various controls.</p>
-        <div class="items-holder grid">
-            <div class="item glyph-item" ng-repeat="glyph in controls">
-                <div class="glyph" ng-class="glyph.cssClass"></div>
-                <table class="details">
-                    <tr><td class="label">Class</td><td class="value">.{{glyph.cssClass}}</td></tr>
-                    <tr><td class="label">Meaning</td><td class="value">{{glyph.meaning}}</td></tr>
-                    <tr><td class="label">CSS Content</td><td class="value">\{{glyph.cssContent}}</td></tr>
-                    <tr><td class="label">HTML Entity</td><td class="value">{{glyph.htmlEntity}}</td></tr>
-                </table>
-            </div>
-        </div>
-    </div>
-
-    <div class="l-section">
-        <h2>Object Type Glyphs</h2>
-        <p>These glyphs are reserved exclusively to denote types of objects in the application. Only use them if you are referring to a pre-existing object type.</p>
-        <div class="items-holder grid">
-            <div class="item glyph-item" ng-repeat="glyph in objects">
-                <div class="glyph" ng-class="glyph.cssClass"></div>
-                <table class="details">
-                    <tr><td class="label">Class</td><td class="value">.{{glyph.cssClass}}</td></tr>
-                    <tr><td class="label">Meaning</td><td class="value">{{glyph.meaning}}</td></tr>
-                    <tr><td class="label">CSS Content</td><td class="value">\{{glyph.cssContent}}</td></tr>
-                    <tr><td class="label">HTML Entity</td><td class="value">{{glyph.htmlEntity}}</td></tr>
-                </table>
-            </div>
-        </div>
-    </div>
-
-</div>
-
diff --git a/example/styleguide/res/templates/input.html b/example/styleguide/res/templates/input.html
deleted file mode 100644
index eae33098bbd..00000000000
--- a/example/styleguide/res/templates/input.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2016, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div class="l-style-guide s-text">
-    <p class="doc-title">Open MCT Style Guide</p>
-    <h1>Text Input</h1>
-    <div class="l-section">
-        <p>Text inputs and textareas have a consistent look-and-feel across the application. The input's <code>placeholder</code> attribute is styled to appear visually different from an entered value.</p>
-    </div>
-
-    <div class="l-section">
-        <h2>Text Inputs</h2>
-        <div class="cols cols1-1">
-            <div class="col">
-                <p>Use a text input where the user should enter relatively short text entries.</p>
-                <p>A variety of size styles are available: <code>.lg</code>, <code>.med</code> and <code>.sm</code>. <code>.lg</code> text inputs dynamically scale their width to 100% of their container's width. Numeric inputs that benefit from right-alignment can be styled by adding <code>.numeric</code>.</p>
-            </div>
-<mct-example><input type="text" placeholder="Enter a value" />
-<br /><br />
-<input type="text" placeholder="Enter a value" value="An entered value" />
-<br /><br />
-<input type="text" placeholder="Enter a value" class="sm" value="Small" />
-<br /><br />
-<input type="text" placeholder="Enter a value" class="med" value="A medium input" />
-<br /><br />
-<input type="text" placeholder="Enter a value" class="lg" value="A large input" />
-<br /><br />
-<input type="text" placeholder="Enter a value" class="sm numeric" value="10.9" />
-</mct-example>
-        </div>
-    </div>
-
-    <div class="l-section">
-        <h2>Textareas</h2>
-        <div class="cols cols1-1">
-            <div class="col">
-                <p>Use a textarea where the user should enter relatively longer or multi-line text entries.</p>
-                <p>By default, textareas are styled to expand to 100% of the width and height of their container; additionally there are three size styles available that control the height of the element: <code>.lg</code>, <code>.med</code> and <code>.sm</code>.</p>
-            </div>
-<mct-example><div style="position: relative; height: 100px">
-    <textarea placeholder="Enter a value"></textarea>
-</div>
-<br />
-<div style="position: relative; height: 100px">
-    <textarea placeholder="Enter a value">An entered value</textarea>
-</div>
-<br /><br />
-<textarea placeholder="Enter a value" class="sm">A small textarea</textarea>
-<br /><br />
-<textarea placeholder="Enter a value" class="med">A medium textarea</textarea>
-<br /><br />
-<textarea placeholder="Enter a value" class="lg">A large textarea</textarea>
-</mct-example>
-        </div>
-    </div>
-</div>
-
diff --git a/example/styleguide/res/templates/intro.html b/example/styleguide/res/templates/intro.html
deleted file mode 100644
index 72fbe4bb4ea..00000000000
--- a/example/styleguide/res/templates/intro.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2016, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div class="l-style-guide s-text">
-    <p class="doc-title">Open MCT Style Guide</p>
-    <h1>Introduction</h1>
-    <div class="l-section">
-    <p>Open MCT is a robust, extensible telemetry monitoring and situational awareness system that provides a framework supporting fast and efficient multi-mission deployment. This guide will explore the major concepts and design elements of Open MCT. Its overall goal is to guide you in creating new features and plugins that seamlessly integrate with the base application.</p>
-    </div>
-
-    <div class="l-section">
-        <h2>Everything Is An Object</h2>
-        <div class="cols cols1-1">
-            <div class="col">
-            <p>First and foremost, Open MCT uses a “object-oriented” approach: everything in the system is an object. Objects come in different types, and some objects can contain other objects of given types. This is similar to how the file management system of all modern computers works: a folder object can contain any other type of object, a presentation file can contain an image. This is conceptually the same in Open MCT.</p>
-            <p>As you develop plugins for Open MCT, consider how a generalized component might be combined with others when designing to create a rich and powerful larger object, rather than adding a single monolithic, non-modular plugin. To solve a particular problem or allow a new feature in Open MCT, you may need to introduce more than just one new object type.</p>
-            </div>
-            <div class="col">
-                <img src="../images/diagram-objects.svg" />
-            </div>
-        </div>
-    </div>
-
-    <div class="l-section">
-        <h2>Object Types</h2>
-        <div class="cols cols1-1">
-            <div class="col">
-            <p>In the same way that different types of files might be opened and edited by different applications, objects in Open MCT also have different types. For example, a Display Layout provides a way that other objects that display information can be combined and laid out in a canvas area to create a recallable display that suits the needs of the user that created it. A Telemetry Panel allows a user to collect together Telemetry Points and visualize them as a plot or a table.</p>
-            <p>Object types provide a containment model that guides the user in their choices while creating a new object, and allows view normalization when flipping between different views. When a given object may only contain other objects of certain types, advantages emerge: the result of adding new objects is more predictable, more alternate views can be provided because the similarities between the contained objects is close, and we can provide more helpful and pointed guidance to the user because we know what types of objects they might be working with at a given time.</p>
-            <p>The types of objects that a container can hold should be based on the purpose of the container and the views that it affords. For example, a Folder’s purpose is to allow a user to conceptually organize objects of all other types; a Folder must therefore be able to contain an object of any type.</p>
-            </div>
-            <div class="col">
-                <img src="../images/diagram-containment.svg" />
-            </div>
-        </div>
-    </div>
-
-    <div class="l-section">
-        <h2>Object Views</h2>
-        <div class="cols cols1-1">
-            <div class="col">
-                <p>Views are simply different ways to view the content of a given object. For example, telemetry data could be viewed as a plot or a table. A clock can display its time in analog fashion or with digital numbers. In each view, all of the content is present; it’s just represented differently. When providing views for an object, all the content of the object should be present in each view.</p>
-            </div>
-            <div class="col">
-                <img src="../images/diagram-views.svg" />
-            </div>
-        </div>
-    </div>
-
-
-
-    <p></p>
-    <p></p>
-    <p></p>
-</div>
diff --git a/example/styleguide/res/templates/mct-example.html b/example/styleguide/res/templates/mct-example.html
deleted file mode 100644
index a7fb0b5d0bd..00000000000
--- a/example/styleguide/res/templates/mct-example.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="col">
-    <h3>Markup</h3>
-    <span class="w-markup">
-        <pre></pre>
-    </span>
-    <h3>Example</h3>
-    <div class="w-mct-example"></div>
-</div>
diff --git a/example/styleguide/res/templates/menus.html b/example/styleguide/res/templates/menus.html
deleted file mode 100644
index a18a10d216e..00000000000
--- a/example/styleguide/res/templates/menus.html
+++ /dev/null
@@ -1,168 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2016, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div class="l-style-guide s-text">
-    <p class="doc-title">Open MCT Style Guide</p>
-    <h1>Menus</h1>
-
-    <div class="l-section">
-        <h2>Context Menus</h2>
-        <div class="cols cols1-1">
-            <div class="col">
-                <p>Context menus are used extensively in Open MCT. They are created dynamically upon a contextual click and positioned at the user's cursor position coincident with the element that invoked them. Context menus must use absolute position and utilize a z-index that places them above other in-page elements.</p>
-                <p>See <a class="link" href="http://localhost:8080/#/browse/styleguide:home/controls?view=styleguide.standards">User Interface Standards</a> for more details on z-indexing in Open MCT. Context menus should be destroyed if the user clicks outside the menu element.</p>
-            </div>
-            <mct-example><div style="height: 120px">
-    <div class="menu-element context-menu-wrapper mobile-disable-select">
-        <div class="menu context-menu">
-            <ul>
-                <li onclick="alert('Perform an action')" title="Open in a new browser tab" class="icon-new-window">Open In New Tab</li>
-                <li onclick="alert('Perform an action')" title="Remove this object from its containing object." class="icon-trash">Remove</li>
-                <li onclick="alert('Perform an action')" title="Create Link to object in another location." class="icon-link">Create Link</li>
-            </ul>
-        </div>
-    </div>
-</div></mct-example>
-        </div>
-    </div>
-
-    <div class="l-section">
-        <h2>Dropdown Menus</h2>
-        <div class="cols cols1-1">
-            <div class="col">
-                <p>Dropdown menus are a dedicated, more discoverable context menu for a given object. Like context menus, dropdown menus are used extensively in Open MCT, and are most often associated with object header elements. They visually manifest as a downward pointing arrow <span class="context-available"></span> associated with an element, and when clicked displays a context menu at that location. See guidelines above about context menus in regards to z-indexing and element lifecycle.</p>
-                <p>Use a dropdown menu to encapsulate important the actions of an object in the object's header, or in a place that you'd use a context menu, but want to make the availability of the menu more apparent.</p>
-            </div>
-<mct-example><div style="height: 220px" title="Ignore me, I'm just here to provide space for this example.">
-
-<div class="l-flex-row flex-elem grows object-header">
-    <span class="type-icon flex-elem icon-layout"></span>
-    <span class="l-elem-wrapper l-flex-row flex-elem grows">
-        <span class="title-label flex-elem holder flex-can-shrink ng-binding">Object Header</span>
-        <span class="flex-elem context-available-w">
-            <span ng-controller="MenuArrowController as menuArrow" class="ng-scope">
-                <a class="context-available" ng-click="menuArrow.showMenu($event)"></a>
-            </span>
-        </span>
-    </span>
-</div>
-
-</div></mct-example>
-        </div>
-    </div>
-
-    <div class="l-section">
-        <h2>Checkbox Menus</h2>
-        <div class="cols cols1-1">
-            <div class="col">
-                <p>Checkbox menus add checkbox options to each item of a dropdown menu. Use this to </p>
-                <p>Use a dropdown menu to encapsulate important the actions of an object in the object's header, or in a place that you'd use a context menu, but want to make the availability of the menu more apparent.</p>
-            </div>
-<mct-example><div style="height: 220px" title="Ignore me, I'm just here to provide space for this example.">
-<div ng-controller="SearchMenuController as controller" class="ng-scope">
-    <div class="menu checkbox-menu" mct-click-elsewhere="parameters.menuVisible(false)">
-        <ul>
-            <!-- First element is special - it's a reset option -->
-            <li class="search-menu-item special icon-asterisk" title="Select all filters" ng-click="ngModel.checkAll = !ngModel.checkAll; controller.checkAll()">
-                <label class="checkbox custom no-text">
-                    <input type="checkbox" class="checkbox ng-untouched ng-valid ng-dirty" ng-model="ngModel.checkAll" ng-change="controller.checkAll()">
-                    <em></em>
-                </label>
-                All
-            </li>
-            <li class="search-menu-item icon-folder">
-                <label class="checkbox custom no-text">
-                    <input type="checkbox" class="checkbox">
-                    <em></em>
-                </label>
-                Folder
-            </li>
-            <li class="search-menu-item icon-layout">
-                <label class="checkbox custom no-text">
-                    <input type="checkbox" class="checkbox">
-                    <em></em>
-                </label>
-                Display Layout
-            </li>
-            <li class="search-menu-item icon-box-with-dashed-lines">
-                <label class="checkbox custom no-text">
-                    <input type="checkbox" class="checkbox">
-                    <em></em>
-                </label>
-                Fixed Position Display
-            </li>
-        </ul>
-    </div>
-</div>
-</div>
-</mct-example>
-    </div>
-</div>
-
-    <div class="l-section">
-        <h2>Palettes</h2>
-        <div class="cols cols1-1">
-            <div class="col">
-                <p>Use a palette to provide color choices. Similar to context menus and dropdowns, palettes should be dismissed when a choice is made within them, or if the user clicks outside one. Selected palette choices should utilize the <code>selected</code> CSS class to visualize indicate that state.</p>
-                <p>Note that while this example uses static markup for illustrative purposes, don't do this - use a front-end framework with repeaters to build the color choices.</p>
-            </div>
-            <mct-example><div style="height: 220px" title="Ignore me, I'm just here to provide space for this example.">
-
-<div class="s-button s-menu-button menu-element t-color-palette icon-paint-bucket" ng-controller="ClickAwayController as toggle">
-    <span class="l-click-area" ng-click="toggle.toggle()"></span>
-    <span class="color-swatch" style="background: rgb(255, 0, 0);"></span>
-    <div class="menu l-palette l-color-palette" ng-show="toggle.isActive()">
-        <div class="l-palette-row l-option-row">
-            <div class="l-palette-item s-palette-item no-selection"></div>
-            <span class="l-palette-item-label">None</span>
-        </div>
-        <div class="l-palette-row">
-            <div class="l-palette-item s-palette-item" style="background: rgb(0, 0, 0);"></div>
-            <div class="l-palette-item s-palette-item" style="background: rgb(28, 28, 28);"></div>
-            <div class="l-palette-item s-palette-item" style="background: rgb(57, 57, 57);"></div>
-            <div class="l-palette-item s-palette-item" style="background: rgb(85, 85, 85);"></div>
-            <div class="l-palette-item s-palette-item" style="background: rgb(113, 113, 113);"></div>
-            <div class="l-palette-item s-palette-item" style="background: rgb(142, 142, 142);"></div>
-            <div class="l-palette-item s-palette-item" style="background: rgb(170, 170, 170);"></div>
-            <div class="l-palette-item s-palette-item" style="background: rgb(198, 198, 198);"></div>
-            <div class="l-palette-item s-palette-item" style="background: rgb(227, 227, 227);"></div>
-            <div class="l-palette-item s-palette-item" style="background: rgb(255, 255, 255);"></div>
-        </div>
-        <div class="l-palette-row">
-            <div class="l-palette-item s-palette-item selected" style="background: rgb(255, 0, 0);"></div>
-            <div class="l-palette-item s-palette-item" style="background: rgb(224, 64, 64);"></div>
-            <div class="l-palette-item s-palette-item" style="background: rgb(240, 160, 72);"></div>
-            <div class="l-palette-item s-palette-item" style="background: rgb(255, 248, 96);"></div>
-            <div class="l-palette-item s-palette-item" style="background: rgb(128, 240, 72);"></div>
-            <div class="l-palette-item s-palette-item" style="background: rgb(128, 248, 248);"></div>
-            <div class="l-palette-item s-palette-item" style="background: rgb(88, 144, 224);"></div>
-            <div class="l-palette-item s-palette-item" style="background: rgb(0, 72, 240);"></div>
-            <div class="l-palette-item s-palette-item" style="background: rgb(136, 80, 240);"></div>
-            <div class="l-palette-item s-palette-item" style="background: rgb(224, 96, 248);"></div>
-        </div>
-    </div>
-</div>
-
-</div></mct-example>
-        </div>
-    </div>
-
-</div>
diff --git a/example/styleguide/res/templates/standards.html b/example/styleguide/res/templates/standards.html
deleted file mode 100644
index 675e69c7396..00000000000
--- a/example/styleguide/res/templates/standards.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2016, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div class="l-style-guide s-text">
-    <p class="doc-title">Open MCT Style Guide</p>
-    <h1>Standards</h1>
-
-    <div class="l-section">
-        <h2>Absolute Positioning and Z-Indexing</h2>
-        <p>Absolute positioning is used in Open MCT in the main envelope interface to handle layout and draggable pane splitters, for elements that must be dynamically created and positioned (like context menus) and for buttons that are placed over other elements, such as a plot's zoom/pan history and reset buttons. When using absolute positioning, follow these guidelines:</p>
-        <ul>
-            <li>Don't specify a z-index if you don't have to.</li>
-            <li>If you must specify a z-index, use the lowest number you that prevents your element from being covered and puts it at the correct level per the table below.</li>
-        </ul>
-        <!-- This content maintained at https://docs.google.com/spreadsheets/d/1AzhUY0P3hLCfT8yPa2Cb1dwOOsQXBuSgCrOkhIoVm0A/edit#gid=0 -->
-        <table>
-            <tr class='header'><td>Type</td><td>Description</td><td>Z-index Range</td></tr>
-            <tr><td>Base interface items</td><td>Base level elements</td><td>0 - 1</td></tr>
-            <tr><td>Primary pane</td><td>Elements in the primary "view area" pane</td><td>2</td></tr>
-            <tr><td>Inspector pane, splitters</td><td>Elements in the Inspector, and splitters themselves</td><td>3</td></tr>
-            <tr><td>More base interface stuff</td><td>Base level elements</td><td>4 - 9</td></tr>
-            <tr><td>Treeview</td><td>Lefthand treeview elements</td><td>30 - 39</td></tr>
-            <tr><td>Help bubbles, rollover hints</td><td>Infobubbles, and similar</td><td>50 - 59</td></tr>
-            <tr><td>Context, button and dropdown menus</td><td>Context menus, button menus, etc. that must overlay other elements</td><td>70 - 79</td></tr>
-            <tr><td>Overlays</td><td>Modal overlay displays</td><td>100 - 109</td></tr>
-            <tr><td>Event messages</td><td>Alerts, event dialogs</td><td>1000</td></tr>
-        </table>
-    </div>
-
-</div>
\ No newline at end of file
diff --git a/example/styleguide/res/templates/status.html b/example/styleguide/res/templates/status.html
deleted file mode 100644
index 3680c3e6525..00000000000
--- a/example/styleguide/res/templates/status.html
+++ /dev/null
@@ -1,227 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2016, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<style>
-    .w-mct-example div[class*="s-status"],
-    .w-mct-example span[class*="s-status"],
-    .w-mct-example div[class*="s-limit"],
-    .w-mct-example span[class*="s-limit"] {
-        border-radius: 3px;
-        padding: 2px 5px;
-    }
-    .w-mct-example table {
-        width: 100%;
-    }
-</style>
-<div class="l-style-guide s-text">
-    <p class="doc-title">Open MCT Style Guide</p>
-    <h1>Status Indication</h1>
-
-    <div class="l-section">
-        <h2>Status Classes</h2>
-        <div class="cols cols1-1">
-            <div class="col">
-                <p>Status classes allow any block or inline-block element to be decorated in order to articulate a
-                    status. Provided classes include color-only and color plus icon; custom icons can easily be
-                    employed by using a color-only status class in combination with an <a class="link" href="#/browse/styleguide:home/glyphs?tc.mode=local&tc.timeSystem=utc&tc.startDelta=1800000&tc.endDelta=0&view=styleguide.glyphs">glyph</a>.</p>
-                <ul>
-                    <li>Color only</li>
-                    <ul>
-                        <li><code>s-status-warning-hi</code></li>
-                        <li><code>s-status-warning-lo</code></li>
-                        <li><code>s-status-diagnostic</code></li>
-                        <li><code>s-status-info</code></li>
-                        <li><code>s-status-ok</code></li>
-                    </ul>
-                    <li>Color and icon</li>
-                    <ul>
-                        <li><code>s-status-icon-warning-hi</code></li>
-                        <li><code>s-status-icon-warning-lo</code></li>
-                        <li><code>s-status-icon-diagnostic</code></li>
-                        <li><code>s-status-icon-info</code></li>
-                        <li><code>s-status-icon-ok</code></li>
-                    </ul>
-                </ul>
-            </div>
-<mct-example><!-- Color alone examples -->
-<div class="s-status-warning-hi">WARNING HI</div>
-<div class="s-status-warning-lo">WARNING LOW</div>
-<div class="s-status-diagnostic">DIAGNOSTIC</div>
-<div class="s-status-info">INFO</div>
-<div class="s-status-ok">OK</div>
-
-<!-- Color and icon examples -->
-<div class="s-status-icon-warning-hi">WARNING HI with icon</div>
-<div class="s-status-icon-warning-lo">WARNING LOW with icon</div>
-<div class="s-status-icon-diagnostic">DIAGNOSTIC with icon</div>
-<div class="s-status-icon-info">INFO with icon</div>
-<div class="s-status-icon-ok">OK with icon</div>
-<div class="s-status-warning-hi icon-alert-triangle">WARNING HI with custom icon</div>
-<div>Some text with an <span class="s-status-icon-diagnostic">inline element</span> showing a Diagnostic status.</div>
-</mct-example>
-        </div>
-    </div>
-
-    <div class="l-section">
-        <h2>Limit Classes</h2>
-        <div class="cols cols1-1">
-            <div class="col">
-                <p>Limit classes are a specialized form of status, specifically meant to be applied to telemetry
-                    displays to indicate that a limit threshold has been violated. Open MCT provides both severity
-                    and direction classes; severity (yellow and red) can be used alone or in combination
-                    with direction (upper or lower). Direction classes cannot be used on their own.</p>
-                <p>Like Status classes, Limits can be used as color-only, or color plus icon. Custom icons can
-                be applied in the same fashion as described above.</p>
-                <ul>
-                    <li>Severity color alone</li>
-                    <ul>
-                        <li><code>s-limit-yellow</code>: A yellow limit.</li>
-                        <li><code>s-limit-red</code>: A red limit.</li>
-                    </ul>
-                    <li>Severity color and icon</li>
-                    <ul>
-                        <li><code>s-limit-icon-yellow</code>: A yellow limit with icon.</li>
-                        <li><code>s-limit-icon-red</code>: A red limit with icon.</li>
-                    </ul>
-                    <li>Direction indicators. MUST be used with a &quot;color alone&quot; limit class. See
-                    examples for more.</li>
-                    <ul>
-                        <li><code>s-limit-upr</code>: Upper limit.</li>
-                        <li><code>s-limit-lwr</code>: Lower limit.</li>
-                    </ul>
-                </ul>
-            </div>
-<mct-example><!-- Color alone examples -->
-<div class="s-limit-yellow">Yellow limit</div>
-<div class="s-limit-red">Red limit</div>
-
-<!-- Color and icon examples -->
-<div class="s-limit-icon-yellow">Yellow limit with icon</div>
-<div class="s-limit-icon-red">Red limit with icon</div>
-<div class="s-limit-red icon-alert-rect">Red Limit with a custom icon</div>
-<div>Some text with an <span class="s-limit-icon-yellow">inline element</span> showing a yellow limit.</div>
-
-<!-- Severity and direction examples -->
-<div class="s-limit-yellow s-limit-lwr">Lower yellow limit</div>
-<div class="s-limit-red s-limit-upr">Upper red limit</div>
-
-<!-- Limits applied in a table -->
-<table>
-    <tr class='header'><td>Name</td><td>Value 1</td><td>Value 2</td></tr>
-    <tr><td>ENG_PWR 4991</td><td>7.023</td><td class="s-limit-yellow s-limit-upr">70.23</td></tr>
-    <tr><td>ENG_PWR 4992</td><td>49.784</td><td class="s-limit-red s-limit-lwr">-121.22</td></tr>
-    <tr><td>ENG_PWR 4993</td><td class="s-limit-yellow icon-alert-triangle">0.451</td><td>1.007</td></tr>
-</table>
-</mct-example>
-        </div>
-    </div>
-
-    <div class="l-section">
-        <h2>Status Bar Indicators</h2>
-        <div class="cols cols1-1">
-            <div class="col">
-                <p>Indicators are small iconic notification elements that appear in the Status Bar area of
-                    the application at the window's bottom. Indicators should be used to articulate the state of a
-                    system and optionally provide gestures related to that system. They use a combination of icon and
-                    color to identify themselves and articulate a state respectively.</p>
-                <h3>Recommendations</h3>
-                <ul>
-                    <li><strong>Keep the icon consistent</strong>. The icon is the principal identifier of the system and is a valuable
-                        recall aid for the user. Don't change the icon as a system's state changes, use color and
-                        text for that purpose.</li>
-                    <li><strong>Don't use the same icon more than once</strong>. Select meaningful and distinct icons so the user
-                        will be able to quickly identify what they're looking for.</li>
-                </ul>
-
-                <h3>States</h3>
-                <ul>
-                    <li><strong>Disabled</strong>: The system is not available to the user.</li>
-                    <li><strong>Off / Available</strong>: The system is accessible to the user but is not currently
-                        &quot;On&quot; or has not been configured. If the Indicator directly provides gestures
-                        related to the system, such as opening a configuration dialog box, then use
-                        &quot;Available&quot;; if the user must act elsewhere or the system isn't user-controllable,
-                        use &quot;Off&quot;.</li>
-                    <li><strong>On</strong>: The system is enabled or configured; it is having an effect on the larger application.</li>
-                    <li><strong>Alert / Error</strong>: There has been a problem with the system. Generally, &quot;Alert&quot;
-                        should be used to call attention to an issue that isn't critical, while  &quot;Error&quot;
-                        should be used to call attention to a problem that the user should really be aware of or do
-                        something about.</li>
-                </ul>
-
-                <h3>Structure</h3>
-                <p>Indicators consist of a <code>.ls-indicator</code>
-                    wrapper element with <code>.icon-*</code> classes for the type of thing they represent and
-                    <code>.s-status-*</code> classes to articulate the current state. Title attributes should be used
-                    to provide more verbose information about the thing and/or its status.</p>
-                <p>The wrapper encloses a <code>.label</code> element that is displayed on hover. This element should
-                    include a brief statement of the current status, and can also include clickable elements
-                    as <code>&lt;a&gt;</code> tags. An optional <code>.count</code> element can be included to display
-                    information such as a number of messages.</p>
-                <p>Icon classes are as defined on the
-                    <a class="link" href="#/browse/styleguide:home/glyphs?tc.mode=local&tc.timeSystem=utc&tc.startDelta=1800000&tc.endDelta=0&view=styleguide.glyphs">
-                        Glyphs page</a>. Status classes applicable to Indicators are as follows:</p>
-                <ul>
-                    <li><code>s-status-disabled</code></li>
-                    <li><code>s-status-off</code></li>
-                    <li><code>s-status-available</code></li>
-                    <li><code>s-status-on</code></li>
-                    <li><code>s-status-alert</code></li>
-                    <li><code>s-status-error</code></li>
-                </ul>
-            </div>
-<mct-example><div class="s-ue-bottom-bar status-holder s-status-bar">
-    <span class="ls-indicator icon-database s-status-disabled" title="The system is currently disabled.">
-        <span class="label">System not enabled.</span>
-    </span>
-</div>
-
-<div class="s-ue-bottom-bar status-holder s-status-bar">
-    <span class="ls-indicator icon-database s-status-available" title="Configure data connection.">
-        <span class="label">Data connection available
-            <a class="icon-gear">Configure</a>
-        </span>
-    </span>
-</div>
-
-<div class="s-ue-bottom-bar status-holder s-status-bar">
-    <span class="ls-indicator icon-database s-status-on" title="Data connected.">
-        <span class="label">Connected to Skynet
-            <a class="icon-gear">Change</a>
-            <a>Disconnect</a>
-        </span>
-    </span>
-</div>
-
-<div class="s-ue-bottom-bar status-holder s-status-bar">
-    <span class="ls-indicator icon-database s-status-alert" title="System is self-aware.">
-        <span class="label">Skynet at Turing Level 5</span>
-    </span>
-    <span class="ls-indicator icon-bell s-status-error" title="You have alerts.">
-        <span class="label">
-            <a class="icon-alert-triangle">View Alerts</a>
-        </span>
-        <span class="count">495</span>
-    </span>
-</div>
-</mct-example>
-        </div>
-    </div>
-</div>
diff --git a/example/styleguide/src/ExampleStyleGuideModelProvider.js b/example/styleguide/src/ExampleStyleGuideModelProvider.js
deleted file mode 100644
index 80f170a9e95..00000000000
--- a/example/styleguide/src/ExampleStyleGuideModelProvider.js
+++ /dev/null
@@ -1,82 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-        "use strict";
-
-        function ExampleStyleGuideModelProvider($q) {
-            var pages = {};
-
-            // Add pages
-            pages.intro = {
-                name: "Introduction",
-                type: "styleguide.intro",
-                location: "styleguide:home"
-            };
-            pages.standards = {
-                name: "Standards",
-                type: "styleguide.standards",
-                location: "styleguide:home"
-            };
-            pages.colors = {
-                name: "Colors",
-                type: "styleguide.colors",
-                location: "styleguide:home"
-            };
-            pages.glyphs = {
-                name: "Glyphs",
-                type: "styleguide.glyphs",
-                location: "styleguide:home"
-            };
-            pages.status = {
-                name: "Status Indication",
-                type: "styleguide.status",
-                location: "styleguide:home"
-            };
-            pages.controls = {
-                name: "Controls",
-                type: "styleguide.controls",
-                location: "styleguide:ui-elements"
-            };
-            pages.input = {
-                name: "Text Inputs",
-                type: "styleguide.input",
-                location: "styleguide:ui-elements"
-            };
-            pages.menus = {
-                name: "Menus",
-                type: "styleguide.menus",
-                location: "styleguide:ui-elements"
-            };
-
-            return {
-                getModels: function () {
-                    return $q.when(pages);
-                }
-            };
-        }
-
-        return ExampleStyleGuideModelProvider;
-    }
-);
diff --git a/example/styleguide/src/MCTExample.js b/example/styleguide/src/MCTExample.js
deleted file mode 100644
index 43b82a2c445..00000000000
--- a/example/styleguide/src/MCTExample.js
+++ /dev/null
@@ -1,30 +0,0 @@
-define([
-    '../res/templates/mct-example.html'
-], function (
-    MCTExampleTemplate
-) {
-
-    function MCTExample() {
-        function link($scope, $element, $attrs, controller, $transclude) {
-            var codeEl = $element.find('pre');
-            var exampleEl = $element.find('div');
-
-            $transclude(function (clone) {
-                exampleEl.append(clone);
-                codeEl.text(exampleEl.html()
-                    .replace(/ class="ng-scope"/g, "")
-                    .replace(/ ng-scope"/g, '"'));
-            });
-        }
-
-        return {
-            restrict: "E",
-            template: MCTExampleTemplate,
-            transclude: true,
-            link: link,
-            replace: true
-        };
-    }
-
-    return MCTExample;
-});
diff --git a/index-test.cjs b/index-test.cjs
new file mode 100644
index 00000000000..8ae5eea82c5
--- /dev/null
+++ b/index-test.cjs
@@ -0,0 +1,2 @@
+const testsContext = require.context('.', true, /^\.\/(src|example)\/.*Spec.js$/);
+testsContext.keys().forEach(testsContext);
diff --git a/index.html b/index.html
index 7996c72a5ce..e3dfda52285 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!--
- Open MCT, Copyright (c) 2014-2021, United States Government
+ Open MCT, Copyright (c) 2014-2024, United States Government
  as represented by the Administrator of the National Aeronautics and Space
  Administration. All rights reserved.
 
@@ -19,182 +19,227 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no">
-        <meta name="apple-mobile-web-app-capable" content="yes">
-        <title></title>
-        <script src="dist/openmct.js"></script>
-        <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); } }
+  <head>
+    <meta charset="utf-8" />
+    <!-- Modified viewport meta tag to improve accessibility -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <title>Open MCT</title>
+    <script src="dist/openmct.js"></script>
+    <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>
+      @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 {
+        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>
-    <script>
-        const THIRTY_SECONDS = 30 * 1000;
-        const ONE_MINUTE = THIRTY_SECONDS * 2;
-        const FIVE_MINUTES = ONE_MINUTE * 5;
-        const FIFTEEN_MINUTES = FIVE_MINUTES * 3;
-        const THIRTY_MINUTES = FIFTEEN_MINUTES * 2;
-        const ONE_HOUR = THIRTY_MINUTES * 2;
-        const TWO_HOURS = ONE_HOUR * 2;
-        const ONE_DAY = ONE_HOUR * 24;
+      #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>
+    <script defer>
+      const THIRTY_SECONDS = 30 * 1000;
+      const ONE_MINUTE = THIRTY_SECONDS * 2;
+      const FIVE_MINUTES = ONE_MINUTE * 5;
+      const FIFTEEN_MINUTES = FIVE_MINUTES * 3;
+      const THIRTY_MINUTES = FIFTEEN_MINUTES * 2;
+      const ONE_HOUR = THIRTY_MINUTES * 2;
+      const TWO_HOURS = ONE_HOUR * 2;
+      const ONE_DAY = ONE_HOUR * 24;
 
-        [
-            'example/eventGenerator'
-        ].forEach(
-            openmct.legacyRegistry.enable.bind(openmct.legacyRegistry)
-        );
+      openmct.install(openmct.plugins.LocalStorage());
 
-        openmct.install(openmct.plugins.LocalStorage());
-        openmct.install(openmct.plugins.Espresso());
-        openmct.install(openmct.plugins.MyItems());
-        openmct.install(openmct.plugins.Generator());
-        openmct.install(openmct.plugins.ExampleImagery());
-        openmct.install(openmct.plugins.PlanLayout());
-        openmct.install(openmct.plugins.Timeline());
-        openmct.install(openmct.plugins.Hyperlink());
-        openmct.install(openmct.plugins.UTCTimeSystem());
-        openmct.install(openmct.plugins.AutoflowView({
-            type: "telemetry.panel"
-        }));
-        openmct.install(openmct.plugins.DisplayLayout({
-            showAsView: ['summary-widget', 'example.imagery']
-        }));
-        openmct.install(openmct.plugins.Conductor({
-            menuOptions: [
+      openmct.install(openmct.plugins.example.Generator());
+      openmct.install(openmct.plugins.example.EventGeneratorPlugin());
+      openmct.install(openmct.plugins.example.ExampleImagery());
+      openmct.install(openmct.plugins.example.ExampleTags());
+
+      openmct.install(openmct.plugins.Espresso());
+      openmct.install(openmct.plugins.MyItems());
+      openmct.install(
+        openmct.plugins.PlanLayout({
+          creatable: true
+        })
+      );
+      openmct.install(openmct.plugins.Timeline());
+      openmct.install(openmct.plugins.Hyperlink());
+      openmct.install(openmct.plugins.UTCTimeSystem());
+      openmct.install(
+        openmct.plugins.AutoflowView({
+          type: 'telemetry.panel'
+        })
+      );
+      openmct.install(
+        openmct.plugins.DisplayLayout({
+          showAsView: ['summary-widget', 'example.imagery']
+        })
+      );
+      openmct.install(
+        openmct.plugins.Conductor({
+          menuOptions: [
+            {
+              name: 'Fixed',
+              timeSystem: 'utc',
+              bounds: {
+                start: Date.now() - THIRTY_MINUTES,
+                end: Date.now()
+              },
+              // commonly used bounds can be stored in history
+              // bounds (start and end) can accept either a milliseconds number
+              // or a callback function returning a milliseconds number
+              // a function is useful for invoking Date.now() at exact moment of preset selection
+              presets: [
+                {
+                  label: 'Last Day',
+                  bounds: {
+                    start: () => Date.now() - ONE_DAY,
+                    end: () => Date.now()
+                  }
+                },
+                {
+                  label: 'Last 2 hours',
+                  bounds: {
+                    start: () => Date.now() - TWO_HOURS,
+                    end: () => Date.now()
+                  }
+                },
+                {
+                  label: 'Last hour',
+                  bounds: {
+                    start: () => Date.now() - ONE_HOUR,
+                    end: () => Date.now()
+                  }
+                }
+              ],
+              // maximum recent bounds to retain in conductor history
+              records: 10
+              // maximum duration between start and end bounds
+              // for utc-based time systems this is in milliseconds
+              // limit: ONE_DAY
+            },
+            {
+              name: 'Realtime',
+              timeSystem: 'utc',
+              clock: 'local',
+              clockOffsets: {
+                start: -THIRTY_MINUTES,
+                end: THIRTY_SECONDS
+              },
+              presets: [
+                {
+                  label: '1 Hour',
+                  bounds: {
+                    start: -ONE_HOUR,
+                    end: THIRTY_SECONDS
+                  }
+                },
+                {
+                  label: '30 Minutes',
+                  bounds: {
+                    start: -THIRTY_MINUTES,
+                    end: THIRTY_SECONDS
+                  }
+                },
+                {
+                  label: '15 Minutes',
+                  bounds: {
+                    start: -FIFTEEN_MINUTES,
+                    end: THIRTY_SECONDS
+                  }
+                },
                 {
-                    name: "Fixed",
-                    timeSystem: 'utc',
-                    bounds: {
-                        start: Date.now() - THIRTY_MINUTES,
-                        end: Date.now()
-                    },
-                    // commonly used bounds can be stored in history
-                    // bounds (start and end) can accept either a milliseconds number
-                    // or a callback function returning a milliseconds number
-                    // a function is useful for invoking Date.now() at exact moment of preset selection
-                    presets: [
-                        {
-                            label: 'Last Day',
-                            bounds: {
-                                start: () => Date.now() - ONE_DAY,
-                                end: () => Date.now()
-                            }
-                        },
-                        {
-                            label: 'Last 2 hours',
-                            bounds: {
-                                start: () => Date.now() - TWO_HOURS,
-                                end: () => Date.now()
-                            }
-                        },
-                        {
-                            label: 'Last hour',
-                            bounds: {
-                                start: () => Date.now() - ONE_HOUR,
-                                end: () => Date.now()
-                            }
-                        }
-                    ],
-                    // maximum recent bounds to retain in conductor history
-                    records: 10
-                    // maximum duration between start and end bounds
-                    // for utc-based time systems this is in milliseconds
-                    // limit: ONE_DAY
+                  label: '5 Minutes',
+                  bounds: {
+                    start: -FIVE_MINUTES,
+                    end: THIRTY_SECONDS
+                  }
                 },
                 {
-                    name: "Realtime",
-                    timeSystem: 'utc',
-                    clock: 'local',
-                    clockOffsets: {
-                        start: - THIRTY_MINUTES,
-                        end: THIRTY_SECONDS
-                    },
-                    presets: [
-                        {
-                            label: '1 Hour',
-                            bounds: {
-                                start: - ONE_HOUR,
-                                end: THIRTY_SECONDS
-                            }
-                        },
-                        {
-                            label: '30 Minutes',
-                            bounds: {
-                                start: - THIRTY_MINUTES,
-                                end: THIRTY_SECONDS
-                            }
-                        },
-                        {
-                            label: '15 Minutes',
-                            bounds: {
-                                start: - FIFTEEN_MINUTES,
-                                end: THIRTY_SECONDS
-                            }
-                        },
-                        {
-                            label: '5 Minutes',
-                            bounds: {
-                                start: - FIVE_MINUTES,
-                                end: THIRTY_SECONDS
-                            }
-                        },
-                        {
-                            label: '1 Minute',
-                            bounds: {
-                                start: - ONE_MINUTE,
-                                end: THIRTY_SECONDS
-                            }
-                        }
-                    ]
+                  label: '1 Minute',
+                  bounds: {
+                    start: -ONE_MINUTE,
+                    end: THIRTY_SECONDS
+                  }
                 }
-            ]
-        }));
-        openmct.install(openmct.plugins.SummaryWidget());
-        openmct.install(openmct.plugins.Notebook());
-        openmct.install(openmct.plugins.LADTable());
-        openmct.install(openmct.plugins.Filters(['table', 'telemetry.plot.overlay']));
-        openmct.install(openmct.plugins.ObjectMigration());
-        openmct.install(openmct.plugins.ClearData(
-            ['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked'],
-            {indicator: true}
-        ));
+              ]
+            }
+          ]
+        })
+      );
+      openmct.install(openmct.plugins.SummaryWidget());
+      openmct.install(openmct.plugins.Notebook());
+      openmct.install(openmct.plugins.LADTable());
+      openmct.install(openmct.plugins.Filters(['table', 'telemetry.plot.overlay']));
+      openmct.install(openmct.plugins.ObjectMigration());
+      openmct.install(
+        openmct.plugins.ClearData(
+          ['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked', 'example.imagery'],
+          { indicator: true }
+        )
+      );
+      openmct.install(openmct.plugins.Clock({ enableClockIndicator: true }));
+      openmct.install(openmct.plugins.Timer());
+      openmct.install(openmct.plugins.Timelist());
+      openmct.install(openmct.plugins.BarChart());
+      openmct.install(openmct.plugins.ScatterPlot());
+      document.addEventListener('DOMContentLoaded', function () {
         openmct.start();
+      });
     </script>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
 </html>
diff --git a/indexTest.js b/indexTest.js
deleted file mode 100644
index 6c354918652..00000000000
--- a/indexTest.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const testsContext = require.context('.', true, /\/(src|platform)\/.*Spec.js$/);
-
-testsContext.keys().forEach(testsContext);
diff --git a/jsdoc.json b/jsdoc.json
deleted file mode 100644
index ac485a5efaf..00000000000
--- a/jsdoc.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-    "source": {
-        "include": [
-            "src/"
-        ],
-        "includePattern": "src/.+\\.js$",
-        "excludePattern": ".+\\Spec\\.js$|lib/.+"
-    },
-    "plugins": [
-        "plugins/markdown"
-    ]
-}
diff --git a/karma.conf.cjs b/karma.conf.cjs
new file mode 100644
index 00000000000..33e11e3edac
--- /dev/null
+++ b/karma.conf.cjs
@@ -0,0 +1,115 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*global module,process*/
+
+module.exports = async (config) => {
+  let webpackConfig;
+  let browsers;
+  let singleRun;
+
+  if (process.env.KARMA_DEBUG) {
+    webpackConfig = (await import('./.webpack/webpack.dev.js')).default;
+    browsers = ['ChromeDebugging'];
+    singleRun = false;
+  } else {
+    webpackConfig = (await import('./.webpack/webpack.coverage.js')).default;
+    browsers = ['ChromeHeadless'];
+    singleRun = true;
+  }
+
+  delete webpackConfig.output;
+  // karma doesn't support webpack entry
+  delete webpackConfig.entry;
+
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', 'webpack'],
+    files: [
+      'index-test.cjs',
+      // included means: should the files be included in the browser using <script> tag?
+      // We don't want them as a <script> because the shared worker source
+      // needs loaded remotely by the shared worker process.
+      {
+        pattern: 'dist/couchDBChangesFeed.js*',
+        included: false
+      },
+      {
+        pattern: 'dist/inMemorySearchWorker.js*',
+        included: false
+      },
+      {
+        pattern: 'dist/generatorWorker.js*',
+        included: false
+      }
+    ],
+    port: 9876,
+    reporters: ['spec', 'junit', 'coverage-istanbul'],
+    browsers,
+    client: {
+      jasmine: {
+        random: false,
+        timeoutInterval: 5000
+      }
+    },
+    customLaunchers: {
+      ChromeDebugging: {
+        base: 'Chrome',
+        flags: ['--remote-debugging-port=9222'],
+        debug: true
+      }
+    },
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    junitReporter: {
+      outputDir: 'dist/reports/tests', //Useful for CircleCI
+      outputFile: 'test-results.xml', //Useful for CircleCI
+      useBrowserName: false //Disable since we only want chrome
+    },
+    coverageIstanbulReporter: {
+      fixWebpackSourcePaths: true,
+      skipFilesWithNoCoverage: true,
+      dir: 'coverage/unit', //Sets coverage file to be consumed by codecov.io
+      reports: ['lcovonly']
+    },
+    specReporter: {
+      maxLogLines: 5,
+      suppressErrorSummary: false,
+      suppressFailed: false,
+      suppressPassed: false,
+      suppressSkipped: true,
+      showSpecTiming: true,
+      failFast: false
+    },
+    preprocessors: {
+      'index-test.cjs': ['webpack', 'sourcemap']
+    },
+    webpack: webpackConfig,
+    webpackMiddleware: {
+      stats: 'errors-warnings'
+    },
+    concurrency: 1,
+    singleRun,
+    browserNoActivityTimeout: 400000
+  });
+};
diff --git a/karma.conf.js b/karma.conf.js
deleted file mode 100644
index 25c17e7ade0..00000000000
--- a/karma.conf.js
+++ /dev/null
@@ -1,120 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/*global module,process*/
-
-const devMode = process.env.NODE_ENV !== 'production';
-const browsers = [process.env.NODE_ENV === 'debug' ? 'ChromeDebugging' : 'ChromeHeadless'];
-const coverageEnabled = process.env.COVERAGE === 'true';
-const reporters = ['progress', 'html', 'junit'];
-
-if (coverageEnabled) {
-    reporters.push('coverage-istanbul');
-}
-
-module.exports = (config) => {
-    const webpackConfig = require('./webpack.config.js');
-    delete webpackConfig.output;
-
-    if (!devMode || coverageEnabled) {
-        webpackConfig.module.rules.push({
-            test: /\.js$/,
-            exclude: /node_modules|example|lib|dist/,
-            use: {
-                loader: 'istanbul-instrumenter-loader',
-                options: {
-                    esModules: true
-                }
-            }
-        });
-    }
-
-    config.set({
-        basePath: '',
-        frameworks: ['jasmine'],
-        files: [
-            'indexTest.js'
-        ],
-        port: 9876,
-        reporters: reporters,
-        browsers: browsers,
-        client: {
-            jasmine: {
-                random: false,
-                timeoutInterval: 30000
-            }
-        },
-        customLaunchers: {
-            ChromeDebugging: {
-                base: 'Chrome',
-                flags: ['--remote-debugging-port=9222'],
-                debug: true
-            },
-            FirefoxESR: {
-                base: 'FirefoxHeadless',
-                name: 'FirefoxESR'
-            }
-        },
-        colors: true,
-        logLevel: config.LOG_INFO,
-        autoWatch: true,
-        // HTML test reporting.
-        htmlReporter: {
-            outputDir: "dist/reports/tests",
-            preserveDescribeNesting: true,
-            foldAll: false
-        },
-        junitReporter: {
-            outputDir: "dist/reports/tests",
-            outputFile: "test-results.xml",
-            useBrowserName: false
-        },
-        browserConsoleLogOptions: {
-            level: "error",
-            format: "%b %T: %m",
-            terminal: true
-        },
-        coverageIstanbulReporter: {
-            fixWebpackSourcePaths: true,
-            dir: process.env.CIRCLE_ARTIFACTS
-                ? process.env.CIRCLE_ARTIFACTS + '/coverage'
-                : "dist/reports/coverage",
-            reports: ['html', 'lcovonly', 'text-summary'],
-            thresholds: {
-                global: {
-                    lines: 66
-                }
-            }
-        },
-        preprocessors: {
-            'indexTest.js': ['webpack', 'sourcemap']
-        },
-        webpack: webpackConfig,
-        webpackMiddleware: {
-            stats: 'errors-only',
-            logLevel: 'warn'
-        },
-        concurrency: 1,
-        singleRun: true,
-        browserNoActivityTimeout: 400000
-    });
-};
diff --git a/lighthouserc.yml b/lighthouserc.yml
deleted file mode 100644
index b2a2474a716..00000000000
--- a/lighthouserc.yml
+++ /dev/null
@@ -1,96 +0,0 @@
----
-ci:
-  collect:
-    urls:
-    - http://localhost/
-    numberOfRuns: 5
-    settings:
-      onlyCategories:
-      - performance
-      - best-practices
-  upload:
-    target: temporary-public-storage
-  assert:
-    preset: lighthouse:recommended
-    assertions:
-      ### Applicable assertions
-      bootup-time:
-      - warn
-      - minScore: 0.88 #Original value was calculated at 0.88
-      dom-size: 
-      - error
-      - maxNumericValue: 200 #Original value was calculated at 188
-      first-contentful-paint:
-      - error
-      - minScore: 0.07 #Original value was calculated at 0.08
-      mainthread-work-breakdown:
-      - warn
-      - minScore: 0.8 #Original value was calculated at 0.8
-      unused-javascript:
-      - warn
-      - maxLength: 1
-      - error
-      - maxNumericValue: 2000 #Original value was calculated at 1855
-      unused-css-rules: warn
-      installable-manifest: warn
-      service-worker: warn
-      ### Disabled seo, accessibility, and pwa assertions, below
-      categories:seo: 'off'
-      categories:accessibility: 'off'
-      categories:pwa: 'off'
-      accesskeys: 'off'
-      apple-touch-icon: 'off'
-      aria-allowed-attr: 'off'
-      aria-command-name: 'off'
-      aria-hidden-body: 'off'
-      aria-hidden-focus: 'off'
-      aria-input-field-name: 'off'
-      aria-meter-name: 'off'
-      aria-progressbar-name: 'off'
-      aria-required-attr: 'off'
-      aria-required-children: 'off'
-      aria-required-parent: 'off'
-      aria-roles: 'off'
-      aria-toggle-field-name: 'off'
-      aria-tooltip-name: 'off'
-      aria-treeitem-name: 'off'
-      aria-valid-attr: 'off'
-      aria-valid-attr-value: 'off'
-      button-name: 'off'
-      bypass: 'off'
-      canonical: 'off'
-      color-contrast: 'off'
-      content-width: 'off'
-      crawlable-anchors: 'off'
-      csp-xss: 'off'
-      font-display: 'off'
-      font-size: 'off'
-      maskable-icon: 'off'
-      heading-order: 'off'
-      hreflang: 'off'
-      html-has-lang: 'off'
-      html-lang-valid: 'off'
-      http-status-code: 'off'
-      image-alt: 'off'
-      input-image-alt: 'off'
-      is-crawlable: 'off'
-      label: 'off'
-      link-name: 'off'
-      link-text: 'off'
-      list: 'off'
-      listitem: 'off'
-      meta-description: 'off'
-      meta-refresh: 'off'
-      meta-viewport: 'off'
-      object-alt: 'off'
-      plugins: 'off'
-      robots-txt: 'off'
-      splash-screen: 'off'
-      tabindex: 'off'
-      tap-targets: 'off'
-      td-headers-attr: 'off'
-      th-has-data-cells: 'off'
-      themed-omnibox: 'off'
-      valid-lang: 'off'
-      video-caption: 'off'
-      viewport: 'off'
diff --git a/openmct.js b/openmct.js
index fcebd1bc2a3..d356db4d973 100644
--- a/openmct.js
+++ b/openmct.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,19 +19,65 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/*global module*/
 
 const matcher = /\/openmct.js$/;
 if (document.currentScript) {
-    let src = document.currentScript.src;
-    if (src && matcher.test(src)) {
-        // eslint-disable-next-line no-undef
-        __webpack_public_path__ = src.replace(matcher, '') + '/';
-    }
+  let src = document.currentScript.src;
+  if (src && matcher.test(src)) {
+    // eslint-disable-next-line no-undef
+    __webpack_public_path__ = src.replace(matcher, '') + '/';
+  }
 }
 
-const MCT = require('./src/MCT');
+/**
+ * @typedef {object} BuildInfo
+ * @property {string} version
+ * @property {string} buildDate
+ * @property {string} revision
+ * @property {string} branch
+ */
 
+/**
+ * @typedef {object} OpenMCT
+ * @property {BuildInfo} buildInfo
+ * @property {*} selection
+ * @property {import('./src/api/time/TimeAPI').default} time
+ * @property {import('./src/api/composition/CompositionAPI').default} composition
+ * @property {*} objectViews
+ * @property {*} inspectorViews
+ * @property {*} propertyEditors
+ * @property {*} toolbars
+ * @property {import('./src/api/types/TypeRegistry').default} types
+ * @property {import('./src/api/objects/ObjectAPI').default} objects
+ * @property {import('./src/api/telemetry/TelemetryAPI').default} telemetry
+ * @property {import('./src/api/indicators/IndicatorAPI').default} indicators
+ * @property {import('./src/api/user/UserAPI').default} user
+ * @property {import('./src/api/notifications/NotificationAPI').default} notifications
+ * @property {import('./src/api/Editor').default} editor
+ * @property {import('./src/api/overlays/OverlayAPI')} overlays
+ * @property {import('./src/api/tooltips/ToolTipAPI')} tooltips
+ * @property {import('./src/api/menu/MenuAPI').default} menus
+ * @property {import('./src/api/actions/ActionsAPI').default} actions
+ * @property {import('./src/api/status/StatusAPI').default} status
+ * @property {*} priority
+ * @property {import('./src/ui/router/ApplicationRouter')} router
+ * @property {import('./src/api/faultmanagement/FaultManagementAPI').default} faults
+ * @property {import('./src/api/forms/FormsAPI').default} forms
+ * @property {import('./src/api/Branding').default} branding
+ * @property {import('./src/api/annotation/AnnotationAPI').default} annotation
+ * @property {{(plugin: OpenMCTPlugin) => void}} install
+ * @property {{() => string}} getAssetPath
+ * @property {{(assetPath: string) => void}} setAssetPath
+ * @property {{(domElement: HTMLElement, isHeadlessMode: boolean) => void}} start
+ * @property {{() => void}} startHeadless
+ * @property {{() => void}} destroy
+ * @property {OpenMCTPlugin[]} plugins
+ * @property {OpenMCTComponent[]} components
+ */
+
+import { MCT } from './src/MCT.js';
+
+/** @type {OpenMCT} */
 const openmct = new MCT();
 
-module.exports = openmct;
+export default openmct;
diff --git a/package.json b/package.json
index 52ec1f6ace4..c90b9b56f00 100644
--- a/package.json
+++ b/package.json
@@ -1,111 +1,157 @@
 {
   "name": "openmct",
-  "version": "1.7.6-SNAPSHOT",
+  "version": "4.0.0-next",
   "description": "The Open MCT core platform",
-  "dependencies": {},
+  "type": "module",
+  "main": "dist/openmct.js",
   "devDependencies": {
-    "angular": ">=1.8.0",
-    "angular-route": "1.4.14",
-    "babel-eslint": "10.0.3",
-    "comma-separated-values": "^3.6.4",
-    "concurrently": "^3.6.1",
-    "copy-webpack-plugin": "^4.5.2",
-    "cross-env": "^6.0.3",
-    "css-loader": "^1.0.0",
-    "d3-array": "1.2.x",
-    "d3-axis": "1.0.x",
-    "d3-collection": "1.0.x",
-    "d3-color": "1.0.x",
-    "d3-format": "1.2.x",
-    "d3-interpolate": "1.1.x",
-    "d3-scale": "1.0.x",
-    "d3-selection": "1.3.x",
-    "d3-time": "1.0.x",
-    "d3-time-format": "2.1.x",
-    "eslint": "7.0.0",
-    "eslint-plugin-vue": "^7.5.0",
-    "eslint-plugin-you-dont-need-lodash-underscore": "^6.10.0",
-    "eventemitter3": "^1.2.0",
-    "exports-loader": "^0.7.0",
-    "express": "^4.13.1",
-    "fast-sass-loader": "1.4.6",
-    "file-loader": "^1.1.11",
-    "file-saver": "^1.3.8",
-    "git-rev-sync": "^1.4.0",
-    "glob": ">= 3.0.0",
-    "html-loader": "^0.5.5",
-    "html2canvas": "^1.0.0-rc.7",
-    "imports-loader": "^0.8.0",
-    "istanbul-instrumenter-loader": "^3.0.1",
-    "jasmine-core": "^3.7.1",
-    "jsdoc": "^3.3.2",
-    "karma": "6.3.4",
-    "karma-chrome-launcher": "3.1.0",
-    "karma-firefox-launcher": "2.1.1",
+    "@axe-core/playwright": "4.8.5",
+    "@babel/eslint-parser": "7.23.3",
+    "@braintree/sanitize-url": "6.0.4",
+    "@percy/cli": "1.27.4",
+    "@percy/playwright": "1.0.4",
+    "@playwright/test": "1.39.0",
+    "@types/d3-axis": "3.0.6",
+    "@types/d3-scale": "4.0.8",
+    "@types/d3-selection": "3.0.10",
+    "@types/eventemitter3": "1.2.0",
+    "@types/jasmine": "5.1.2",
+    "@types/lodash": "4.14.192",
+    "@vue/compiler-sfc": "3.4.3",
+    "babel-loader": "9.1.0",
+    "babel-plugin-istanbul": "6.1.1",
+    "codecov": "3.8.3",
+    "comma-separated-values": "3.6.4",
+    "copy-webpack-plugin": "11.0.0",
+    "cspell": "7.3.8",
+    "css-loader": "6.10.0",
+    "d3-axis": "3.0.0",
+    "d3-scale": "4.0.2",
+    "d3-selection": "3.0.0",
+    "eslint": "8.56.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-compat": "4.2.0",
+    "eslint-plugin-no-unsanitized": "4.0.2",
+    "eslint-plugin-playwright": "0.12.0",
+    "eslint-plugin-prettier": "5.1.3",
+    "eslint-plugin-simple-import-sort": "10.0.0",
+    "eslint-plugin-unicorn": "49.0.0",
+    "eslint-plugin-vue": "9.22.0",
+    "eslint-plugin-you-dont-need-lodash-underscore": "6.13.0",
+    "eventemitter3": "1.2.0",
+    "file-saver": "2.0.5",
+    "flatbush": "4.2.0",
+    "git-rev-sync": "3.0.2",
+    "html2canvas": "1.4.1",
+    "imports-loader": "4.0.1",
+    "jasmine-core": "5.1.1",
+    "karma": "6.4.2",
+    "karma-chrome-launcher": "3.2.0",
     "karma-cli": "2.0.0",
-    "karma-coverage": "2.0.3",
+    "karma-coverage": "2.2.0",
     "karma-coverage-istanbul-reporter": "3.0.3",
+    "karma-jasmine": "5.1.0",
     "karma-junit-reporter": "2.0.1",
-    "karma-html-reporter": "0.2.7",
-    "karma-jasmine": "4.0.1",
-    "karma-sourcemap-loader": "0.3.8",
-    "karma-webpack": "4.0.2",
-    "location-bar": "^3.0.1",
-    "lodash": "^4.17.12",
-    "markdown-toc": "^0.11.7",
-    "marked": "^0.3.5",
-    "mini-css-extract-plugin": "^0.4.1",
-    "minimist": "^1.2.5",
-    "moment": "2.25.3",
-    "moment-duration-format": "^2.2.2",
-    "moment-timezone": "0.5.28",
-    "node-bourbon": "^4.2.3",
-    "node-sass": "^4.14.1",
-    "painterro": "^1.2.56",
-    "printj": "^1.2.1",
-    "raw-loader": "^0.5.1",
-    "request": "^2.69.0",
-    "split": "^1.0.0",
-    "style-loader": "^1.0.1",
-    "uuid": "^3.3.3",
-    "v8-compile-cache": "^1.1.0",
-    "vue": "2.5.6",
-    "vue-loader": "^15.2.6",
-    "vue-template-compiler": "2.5.6",
-    "webpack": "^4.16.2",
-    "webpack-cli": "^3.1.0",
-    "webpack-dev-middleware": "^3.1.3",
-    "webpack-hot-middleware": "^2.22.3",
-    "zepto": "^1.2.0"
+    "karma-sourcemap-loader": "0.4.0",
+    "karma-spec-reporter": "0.0.36",
+    "karma-webpack": "5.0.0",
+    "location-bar": "3.0.1",
+    "lodash": "4.17.21",
+    "marked": "12.0.0",
+    "mini-css-extract-plugin": "2.7.6",
+    "moment": "2.30.1",
+    "moment-duration-format": "2.3.2",
+    "moment-timezone": "0.5.41",
+    "npm-run-all2": "6.1.1",
+    "nyc": "15.1.0",
+    "painterro": "1.2.87",
+    "plotly.js-basic-dist-min": "2.29.1",
+    "plotly.js-gl2d-dist-min": "2.20.0",
+    "prettier": "3.2.5",
+    "prettier-eslint": "16.3.0",
+    "printj": "1.3.1",
+    "resolve-url-loader": "5.0.0",
+    "sanitize-html": "2.12.1",
+    "sass": "1.68.0",
+    "sass-loader": "14.1.1",
+    "sinon": "17.0.0",
+    "style-loader": "3.3.3",
+    "terser-webpack-plugin": "5.3.9",
+    "tiny-emitter": "2.1.0",
+    "typescript": "5.3.3",
+    "uuid": "9.0.1",
+    "vue": "3.4.19",
+    "vue-eslint-parser": "9.4.2",
+    "vue-loader": "16.8.3",
+    "webpack": "5.90.3",
+    "webpack-cli": "5.1.1",
+    "webpack-dev-server": "5.0.2",
+    "webpack-merge": "5.10.0"
   },
   "scripts": {
-    "clean": "rm -rf ./dist /node_modules; rm package-lock.json",
-    "clean-test-lint": "npm run clean; npm install ; npm run test; npm run lint",
-    "start": "node app.js",
-    "lint": "eslint platform example src --ext .js,.vue openmct.js",
-    "lint:fix": "eslint platform example src --ext .js,.vue openmct.js --fix",
-    "build:prod": "cross-env NODE_ENV=production webpack",
-    "build:dev": "webpack",
-    "build:watch": "webpack --watch",
-    "test": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --single-run",
-    "test:debug": "cross-env NODE_ENV=debug karma start --no-single-run",
-    "test:coverage": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" COVERAGE=true karma start --single-run",
-    "test:coverage:firefox": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --single-run --browsers=FirefoxHeadless",
-    "test:watch": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --no-single-run",
-    "verify": "concurrently 'npm:test' 'npm:lint'",
-    "jsdoc": "jsdoc -c jsdoc.json -R API.md -r -d dist/docs/api",
-    "otherdoc": "node docs/gendocs.js --in docs/src --out dist/docs --suppress-toc 'docs/src/index.md|docs/src/process/index.md'",
-    "docs": "npm run jsdoc ; npm run otherdoc",
-    "prepare": "npm run build:prod"
+    "clean": "rm -rf ./dist ./node_modules ./package-lock.json ./coverage ./html-test-results ./test-results ./.nyc_output ",
+    "start": "npx webpack serve --config ./.webpack/webpack.dev.js",
+    "start:prod": "npx webpack serve --config ./.webpack/webpack.prod.js",
+    "start:coverage": "npx webpack serve --config ./.webpack/webpack.coverage.js",
+    "lint:js": "eslint \"example/**/*.js\" \"src/**/*.js\" \"e2e/**/*.js\" \"openmct.js\" --max-warnings=0",
+    "lint:vue": "eslint \"src/**/*.vue\"",
+    "lint:spelling": "cspell \"**/*.{js,md,vue}\" --show-context --gitignore --quiet",
+    "lint": "run-p \"lint:js -- {1}\" \"lint:vue -- {1}\" \"lint:spelling -- {1}\" --",
+    "lint:fix": "eslint example src e2e --ext .js,.vue openmct.js --fix",
+    "build:prod": "webpack --config ./.webpack/webpack.prod.js",
+    "build:dev": "webpack --config ./.webpack/webpack.dev.js",
+    "build:coverage": "webpack --config ./.webpack/webpack.coverage.js",
+    "build:watch": "webpack --config ./.webpack/webpack.dev.js --watch",
+    "info": "npx envinfo --system --browsers --npmPackages --binaries --languages --markdown",
+    "test": "karma start karma.conf.cjs",
+    "test:debug": "KARMA_DEBUG=true karma start karma.conf.cjs",
+    "test:e2e": "npx playwright test",
+    "test:e2e:a11y": "npx playwright test --config=e2e/playwright-visual-a11y.config.js --project=chrome --grep @a11y",
+    "test:e2e:mobile": "npx playwright test --config=e2e/playwright-mobile.config.js",
+    "test:e2e:couchdb": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @couchdb --workers=1",
+    "test:e2e:stable": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep-invert \"@unstable|@couchdb|@generatedata\"",
+    "test:e2e:unstable": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @unstable",
+    "test:e2e:local": "npx playwright test --config=e2e/playwright-local.config.js --project=chrome",
+    "test:e2e:generatedata": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @generatedata",
+    "test:e2e:checksnapshots": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @snapshot --retries=0",
+    "test:e2e:updatesnapshots": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @snapshot --update-snapshots",
+    "test:e2e:visual:ci": "percy exec --config ./e2e/.percy.ci.yml --partial -- npx playwright test --config=e2e/playwright-visual-a11y.config.js --project=chrome --grep-invert @unstable",
+    "test:e2e:visual:full": "percy exec --config ./e2e/.percy.nightly.yml -- npx playwright test --config=e2e/playwright-visual-a11y.config.js --grep-invert @unstable",
+    "test:e2e:full": "npx playwright test --config=e2e/playwright-ci.config.js --grep-invert @couchdb",
+    "test:e2e:watch": "npx playwright test --ui --config=e2e/playwright-watch.config.js",
+    "test:perf:contract": "npx playwright test --config=e2e/playwright-performance-dev.config.js",
+    "test:perf:localhost": "npx playwright test --config=e2e/playwright-performance-prod.config.js --project=chrome",
+    "test:perf:memory": "npx playwright test --config=e2e/playwright-performance-prod.config.js --project=chrome-memory",
+    "update-about-dialog-copyright": "perl -pi -e 's/20\\d\\d\\-202\\d/2014\\-2023/gm' ./src/ui/layout/AboutDialog.vue",
+    "update-copyright-date": "npm run update-about-dialog-copyright && grep -lr --null --include=*.{js,scss,vue,ts,sh,html,md,frag} 'Copyright (c) 20' . | xargs -r0 perl -pi -e 's/Copyright\\s\\(c\\)\\s20\\d\\d\\-20\\d\\d/Copyright \\(c\\)\\ 2014\\-2024/gm'",
+    "cov:e2e:report": "nyc report --reporter=lcovonly --report-dir=./coverage/e2e",
+    "cov:e2e:full:publish": "codecov --disable=gcov -f ./coverage/e2e/lcov.info -F e2e-full",
+    "cov:e2e:stable:publish": "codecov --disable=gcov -f ./coverage/e2e/lcov.info -F e2e-stable",
+    "cov:unit:publish": "codecov --disable=gcov -f ./coverage/unit/lcov.info -F unit",
+    "prepare": "npm run build:prod && npx tsc"
   },
+  "homepage": "https://nasa.github.io/openmct",
   "repository": {
     "type": "git",
-    "url": "https://github.com/nasa/openmct.git"
+    "url": "git+https://github.com/nasa/openmct.git"
   },
   "engines": {
-    "node": ">=10.10.2 <16.0.0"
+    "node": ">=18.14.2 <22"
+  },
+  "browserslist": [
+    "Firefox ESR",
+    "not IE 11",
+    "last 2 Chrome versions",
+    "unreleased Chrome versions",
+    "ios_saf >= 16",
+    "Safari >= 16"
+  ],
+  "author": {
+    "name": "National Aeronautics and Space Administration",
+    "url": "https://www.nasa.gov"
   },
-  "author": "",
   "license": "Apache-2.0",
-  "private": true
+  "keywords": [
+    "nasa"
+  ]
 }
diff --git a/platform/README.md b/platform/README.md
deleted file mode 100644
index e5144829f1c..00000000000
--- a/platform/README.md
+++ /dev/null
@@ -1,2 +0,0 @@
-This directory contains all bundles for the Open MCT platform, as well 
-as the framework which runs them.
diff --git a/platform/commonUI/README.md b/platform/commonUI/README.md
deleted file mode 100644
index 29e0f86c1c9..00000000000
--- a/platform/commonUI/README.md
+++ /dev/null
@@ -1,17 +0,0 @@
-This directory contains bundles containing common user interface
-elements of Open MCT; that is, the user interface for the application
-as a whole (as opposed to for specific features) is implemented here.
-
-# Extensions
-
-This bundles adds a `stylesheets` extension category used to inject CSS
-from bundles. These extensions are declaration-only (no scripted
-implementation is needed or used); a single property, `stylesheetUrl`,
-should be provided, with a path to the relevant CSS file (including
-extension) relative to the resources directory for that bundle.
-
-Links to these CSS files are appended to the head when the application
-is started. These are added in standard priority order (see documentation
-for the framework layer); the order of inclusion of style sheets can
-change the way they are handled/understood by the browser, so priority
-can be used to provide control over this order.
diff --git a/platform/commonUI/about/README.md b/platform/commonUI/about/README.md
deleted file mode 100644
index 05bcfe22cd2..00000000000
--- a/platform/commonUI/about/README.md
+++ /dev/null
@@ -1,26 +0,0 @@
-The "about" bundle provides the default lower-right application logo,
-as well as the dialog it launches when clicked.
-
-# Extensions
-
-The About dialog contains several line items to display different
-version properties (e.g. when built, et cetera.) Plug-ins may wish
-to introduce additional line items here, in particular if the
-platform is used to build a separately-branded piece of software.
-
-This bundle introduces the `versions` extension category to support this.
-An extension of this category is implementation-less (all information
-is contained within its declaration) and should include the following
-fields:
-
-* `name`: The name to display for this version line-item; this may
-  be the name of the software, or something else such as "Built".
-* `value`: The value to display corresponding to this line-item;
-  this is typically a version number, revision identifier, or
-  human-readable date.
-* `description`: Optional; a longer-form description of this line
-  item, to display in a tooltip.
-
-Ordering of these line items is handled by extension priority; see framework
-documentation (`platform/framework/README.md`) for information on how
-this ordering is handled.
diff --git a/platform/commonUI/about/bundle.js b/platform/commonUI/about/bundle.js
deleted file mode 100644
index efa8a7c4d3e..00000000000
--- a/platform/commonUI/about/bundle.js
+++ /dev/null
@@ -1,181 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./res/templates/about-dialog.html",
-    "./src/LogoController",
-    "./src/AboutController",
-    "./src/LicenseController",
-    "./res/templates/app-logo.html",
-    "./res/templates/about-logo.html",
-    "./res/templates/overlay-about.html",
-    "./res/templates/license-apache.html",
-    "./res/templates/license-mit.html",
-    "./res/templates/licenses.html",
-    "./res/templates/licenses-export-md.html"
-], function (
-    aboutDialogTemplate,
-    LogoController,
-    AboutController,
-    LicenseController,
-    appLogoTemplate,
-    aboutLogoTemplate,
-    overlayAboutTemplate,
-    licenseApacheTemplate,
-    licenseMitTemplate,
-    licensesTemplate,
-    licensesExportMdTemplate
-) {
-
-    return {
-        name: "platform/commonUI/about",
-        definition: {
-            "name": "About Open MCT",
-            "extensions": {
-                "templates": [
-                    {
-                        "key": "app-logo",
-                        "priority": "optional",
-                        "template": appLogoTemplate
-                    },
-                    {
-                        "key": "about-logo",
-                        "priority": "preferred",
-                        "template": aboutLogoTemplate
-                    },
-                    {
-                        "key": "about-dialog",
-                        "template": aboutDialogTemplate
-                    },
-                    {
-                        "key": "overlay-about",
-                        "template": overlayAboutTemplate
-                    },
-                    {
-                        "key": "license-apache",
-                        "template": licenseApacheTemplate
-                    },
-                    {
-                        "key": "license-mit",
-                        "template": licenseMitTemplate
-                    }
-                ],
-                "controllers": [
-                    {
-                        "key": "LogoController",
-                        "depends": [
-                            "overlayService"
-                        ],
-                        "implementation": LogoController
-                    },
-                    {
-                        "key": "AboutController",
-                        "depends": [
-                            "versions[]",
-                            "$window"
-                        ],
-                        "implementation": AboutController
-                    },
-                    {
-                        "key": "LicenseController",
-                        "depends": [
-                            "licenses[]"
-                        ],
-                        "implementation": LicenseController
-                    }
-                ],
-                "licenses": [
-                    {
-                        "name": "Json.NET",
-                        "version": "6.0.8",
-                        "author": "Newtonsoft",
-                        "description": "JSON serialization/deserialization",
-                        "website": "http://www.newtonsoft.com/json",
-                        "copyright": "Copyright (c) 2007 James Newton-King",
-                        "license": "license-mit",
-                        "link": "https://github.com/JamesNK/Newtonsoft.Json/blob/master/LICENSE.md"
-                    },
-                    {
-                        "name": "Nancy",
-                        "version": "0.23.2",
-                        "author": "Andreas Håkansson, Steven Robbins and contributors",
-                        "description": "Embedded web server",
-                        "website": "http://nancyfx.org/",
-                        "copyright": "Copyright © 2010 Andreas Håkansson, Steven Robbins and contributors",
-                        "license": "license-mit",
-                        "link": "http://www.opensource.org/licenses/mit-license.php"
-                    },
-                    {
-                        "name": "Nancy.Hosting.Self",
-                        "version": "0.23.2",
-                        "author": "Andreas Håkansson, Steven Robbins and contributors",
-                        "description": "Embedded web server",
-                        "website": "http://nancyfx.org/",
-                        "copyright": "Copyright © 2010 Andreas Håkansson, Steven Robbins and contributors",
-                        "license": "license-mit",
-                        "link": "http://www.opensource.org/licenses/mit-license.php"
-                    },
-                    {
-                        "name": "SuperSocket",
-                        "version": "0.9.0.2",
-                        "author": " Kerry Jiang",
-                        "description": "Supports SuperWebSocket",
-                        "website": "https://supersocket.codeplex.com/",
-                        "copyright": "Copyright 2010-2014 Kerry Jiang (kerry-jiang@hotmail.com)",
-                        "license": "license-apache",
-                        "link": "https://supersocket.codeplex.com/license"
-                    },
-                    {
-                        "name": "SuperWebSocket",
-                        "version": "0.9.0.2",
-                        "author": " Kerry Jiang",
-                        "description": "WebSocket implementation for client-server communication",
-                        "website": "https://superwebsocket.codeplex.com/",
-                        "copyright": "Copyright 2010-2014 Kerry Jiang (kerry-jiang@hotmail.com)",
-                        "license": "license-apache",
-                        "link": "https://superwebsocket.codeplex.com/license"
-                    },
-                    {
-                        "name": "log4net",
-                        "version": "2.0.3",
-                        "author": "Apache Software Foundation",
-                        "description": "Logging",
-                        "website": "http://logging.apache.org/log4net/",
-                        "copyright": "Copyright © 2004-2015 Apache Software Foundation.",
-                        "license": "license-apache",
-                        "link": "http://logging.apache.org/log4net/license.html"
-                    }
-                ],
-                "routes": [
-                    {
-                        "when": "/licenses",
-                        "template": licensesTemplate
-                    },
-                    {
-                        "when": "/licenses-md",
-                        "template": licensesExportMdTemplate
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/commonUI/about/res/templates/about-dialog.html b/platform/commonUI/about/res/templates/about-dialog.html
deleted file mode 100644
index 8b7cfe2204e..00000000000
--- a/platform/commonUI/about/res/templates/about-dialog.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div class="abs t-about l-about t-about-openmctweb s-about" ng-controller = "AboutController as about">
-    <div class="l-splash s-splash"></div>
-    <div class="s-text l-content">
-        <h1 class="l-title s-title">Open MCT</h1>
-        <div class="l-description s-description">
-	        <p>Open MCT, Copyright &copy; 2014-2021, United States Government as represented by the Administrator of the National Aeronautics and Space Administration. All rights reserved.</p>
-	        <p>Open MCT is licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.  You may obtain a copy of the License at <a target="_blank" href="http://www.apache.org/licenses/LICENSE-2.0">http://www.apache.org/licenses/LICENSE-2.0</a>.</p>
-	        <p>Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.</p>
-	        <p>Open MCT includes source code licensed under additional open source licenses. See the Open Source Licenses file included with this distribution or <a ng-click="about.openLicenses()">click here for licensing information</a>.</p>
-        </div>
-        <h2>Version Information</h2>
-        <ul class="t-info l-info s-info" ng-repeat = "version in about.versions()">
-            <li title="{{version.description}}">
-                <span class="info version-name">{{version.name}}</span>
-	            <span class="info version-value">{{version.value}}</span>
-            </li>
-        </ul>
-    </div>
-</div>
-
diff --git a/platform/commonUI/about/res/templates/about-logo.html b/platform/commonUI/about/res/templates/about-logo.html
deleted file mode 100644
index c2873359ed8..00000000000
--- a/platform/commonUI/about/res/templates/about-logo.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<span ng-controller="LogoController as logo">
-    <mct-include ng-click="logo.showAboutDialog()" key="'app-logo'">
-    </mct-include>
-</span>
diff --git a/platform/commonUI/about/res/templates/app-logo.html b/platform/commonUI/about/res/templates/app-logo.html
deleted file mode 100644
index 5a571a9fa98..00000000000
--- a/platform/commonUI/about/res/templates/app-logo.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<span ng-controller = "AboutController as about">
-	<div class='app-logo logo-openmctweb abs' title="Version {{about.versions()[0].value}}"></div>
-</span>
diff --git a/platform/commonUI/about/res/templates/license-apache.html b/platform/commonUI/about/res/templates/license-apache.html
deleted file mode 100644
index e44552e877f..00000000000
--- a/platform/commonUI/about/res/templates/license-apache.html
+++ /dev/null
@@ -1,199 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<!-- From http://www.apache.org/licenses/LICENSE-2.0 -->
-<br>
-	<p>Version 2.0, January 2004</p>
-	<p><a href="http://www.apache.org/licenses/">http://www.apache.org/licenses/</a></p>
-	<h3>TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION</h3>
-	<p><strong><a name="definitions">1. Definitions</a></strong>.</p>
-	<p>"License" shall mean the terms and conditions for use, reproduction, and
-		distribution as defined by Sections 1 through 9 of this document.</p>
-	<p>"Licensor" shall mean the copyright owner or entity authorized by the
-		copyright owner that is granting the License.</p>
-	<p>"Legal Entity" shall mean the union of the acting entity and all other
-		entities that control, are controlled by, or are under common control with
-		that entity. For the purposes of this definition, "control" means (i) the
-		power, direct or indirect, to cause the direction or management of such
-		entity, whether by contract or otherwise, or (ii) ownership of fifty
-		percent (50%) or more of the outstanding shares, or (iii) beneficial
-		ownership of such entity.</p>
-	<p>"You" (or "Your") shall mean an individual or Legal Entity exercising
-		permissions granted by this License.</p>
-	<p>"Source" form shall mean the preferred form for making modifications,
-		including but not limited to software source code, documentation source,
-		and configuration files.</p>
-	<p>"Object" form shall mean any form resulting from mechanical transformation
-		or translation of a Source form, including but not limited to compiled
-		object code, generated documentation, and conversions to other media types.</p>
-	<p>"Work" shall mean the work of authorship, whether in Source or Object form,
-		made available under the License, as indicated by a copyright notice that
-		is included in or attached to the work (an example is provided in the
-		Appendix below).</p>
-	<p>"Derivative Works" shall mean any work, whether in Source or Object form,
-		that is based on (or derived from) the Work and for which the editorial
-		revisions, annotations, elaborations, or other modifications represent, as
-		a whole, an original work of authorship. For the purposes of this License,
-		Derivative Works shall not include works that remain separable from, or
-		merely link (or bind by name) to the interfaces of, the Work and Derivative
-		Works thereof.</p>
-	<p>"Contribution" shall mean any work of authorship, including the original
-		version of the Work and any modifications or additions to that Work or
-		Derivative Works thereof, that is intentionally submitted to Licensor for
-		inclusion in the Work by the copyright owner or by an individual or Legal
-		Entity authorized to submit on behalf of the copyright owner. For the
-		purposes of this definition, "submitted" means any form of electronic,
-		verbal, or written communication sent to the Licensor or its
-		representatives, including but not limited to communication on electronic
-		mailing lists, source code control systems, and issue tracking systems that
-		are managed by, or on behalf of, the Licensor for the purpose of discussing
-		and improving the Work, but excluding communication that is conspicuously
-		marked or otherwise designated in writing by the copyright owner as "Not a
-		Contribution."</p>
-	<p>"Contributor" shall mean Licensor and any individual or Legal Entity on
-		behalf of whom a Contribution has been received by Licensor and
-		subsequently incorporated within the Work.</p>
-	<p><strong><a name="copyright">2. Grant of Copyright License</a></strong>. Subject to the
-		terms and conditions of this License, each Contributor hereby grants to You
-		a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-		copyright license to reproduce, prepare Derivative Works of, publicly
-		display, publicly perform, sublicense, and distribute the Work and such
-		Derivative Works in Source or Object form.</p>
-	<p><strong><a name="patent">3. Grant of Patent License</a></strong>. Subject to the terms
-		and conditions of this License, each Contributor hereby grants to You a
-		perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-		(except as stated in this section) patent license to make, have made, use,
-		offer to sell, sell, import, and otherwise transfer the Work, where such
-		license applies only to those patent claims licensable by such Contributor
-		that are necessarily infringed by their Contribution(s) alone or by
-		combination of their Contribution(s) with the Work to which such
-		Contribution(s) was submitted. If You institute patent litigation against
-		any entity (including a cross-claim or counterclaim in a lawsuit) alleging
-		that the Work or a Contribution incorporated within the Work constitutes
-		direct or contributory patent infringement, then any patent licenses
-		granted to You under this License for that Work shall terminate as of the
-		date such litigation is filed.</p>
-	<p><strong><a name="redistribution">4. Redistribution</a></strong>. You may reproduce and
-		distribute copies of the Work or Derivative Works thereof in any medium,
-		with or without modifications, and in Source or Object form, provided that
-		You meet the following conditions:</p>
-	<ol style="list-style: lower-latin;">
-		<li>You must give any other recipients of the Work or Derivative Works a
-			copy of this License; and</li>
-
-		<li>You must cause any modified files to carry prominent notices stating
-			that You changed the files; and</li>
-
-		<li>You must retain, in the Source form of any Derivative Works that You
-			distribute, all copyright, patent, trademark, and attribution notices from
-			the Source form of the Work, excluding those notices that do not pertain to
-			any part of the Derivative Works; and</li>
-
-		<li>If the Work includes a "NOTICE" text file as part of its distribution,
-			then any Derivative Works that You distribute must include a readable copy
-			of the attribution notices contained within such NOTICE file, excluding
-			those notices that do not pertain to any part of the Derivative Works, in
-			at least one of the following places: within a NOTICE text file distributed
-			as part of the Derivative Works; within the Source form or documentation,
-			if provided along with the Derivative Works; or, within a display generated
-			by the Derivative Works, if and wherever such third-party notices normally
-			appear. The contents of the NOTICE file are for informational purposes only
-			and do not modify the License. You may add Your own attribution notices
-			within Derivative Works that You distribute, alongside or as an addendum to
-			the NOTICE text from the Work, provided that such additional attribution
-			notices cannot be construed as modifying the License.
-			<br>
-			<br>
-			You may add Your own copyright statement to Your modifications and may
-			provide additional or different license terms and conditions for use,
-			reproduction, or distribution of Your modifications, or for any such
-			Derivative Works as a whole, provided Your use, reproduction, and
-			distribution of the Work otherwise complies with the conditions stated in
-			this License.
-		</li>
-
-	</ol>
-
-	<p><strong><a name="contributions">5. Submission of Contributions</a></strong>. Unless You
-		explicitly state otherwise, any Contribution intentionally submitted for
-		inclusion in the Work by You to the Licensor shall be under the terms and
-		conditions of this License, without any additional terms or conditions.
-		Notwithstanding the above, nothing herein shall supersede or modify the
-		terms of any separate license agreement you may have executed with Licensor
-		regarding such Contributions.</p>
-	<p><strong><a name="trademarks">6. Trademarks</a></strong>. This License does not grant
-		permission to use the trade names, trademarks, service marks, or product
-		names of the Licensor, except as required for reasonable and customary use
-		in describing the origin of the Work and reproducing the content of the
-		NOTICE file.</p>
-	<p><strong><a name="no-warranty">7. Disclaimer of Warranty</a></strong>. Unless required by
-		applicable law or agreed to in writing, Licensor provides the Work (and
-		each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT
-		WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including,
-		without limitation, any warranties or conditions of TITLE,
-		NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You
-		are solely responsible for determining the appropriateness of using or
-		redistributing the Work and assume any risks associated with Your exercise
-		of permissions under this License.</p>
-	<p><strong><a name="no-liability">8. Limitation of Liability</a></strong>. In no event and
-		under no legal theory, whether in tort (including negligence), contract, or
-		otherwise, unless required by applicable law (such as deliberate and
-		grossly negligent acts) or agreed to in writing, shall any Contributor be
-		liable to You for damages, including any direct, indirect, special,
-		incidental, or consequential damages of any character arising as a result
-		of this License or out of the use or inability to use the Work (including
-		but not limited to damages for loss of goodwill, work stoppage, computer
-		failure or malfunction, or any and all other commercial damages or losses),
-		even if such Contributor has been advised of the possibility of such
-		damages.</p>
-	<p><strong><a name="additional">9. Accepting Warranty or Additional Liability</a></strong>.
-		While redistributing the Work or Derivative Works thereof, You may choose
-		to offer, and charge a fee for, acceptance of support, warranty, indemnity,
-		or other liability obligations and/or rights consistent with this License.
-		However, in accepting such obligations, You may act only on Your own behalf
-		and on Your sole responsibility, not on behalf of any other Contributor,
-		and only if You agree to indemnify, defend, and hold each Contributor
-		harmless for any liability incurred by, or claims asserted against, such
-		Contributor by reason of your accepting any such warranty or additional
-		liability.</p>
-	<h3>END OF TERMS AND CONDITIONS</h3>
-	<h3 id="apply">APPENDIX: How to apply the Apache License to your work</h3>
-	<p>To apply the Apache License to your work, attach the following boilerplate
-		notice, with the fields enclosed by brackets "[]" replaced with your own
-		identifying information. (Don't include the brackets!) The text should be
-		enclosed in the appropriate comment syntax for the file format. We also
-		recommend that a file or class name and description of purpose be included
-		on the same "printed page" as the copyright notice for easier
-		identification within third-party archives.</p>
-	<div class="codehilite"><pre>Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-</pre></div>
diff --git a/platform/commonUI/about/res/templates/license-mit.html b/platform/commonUI/about/res/templates/license-mit.html
deleted file mode 100644
index 11640f1ce79..00000000000
--- a/platform/commonUI/about/res/templates/license-mit.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>
-<p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p>
-<p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>
diff --git a/platform/commonUI/about/res/templates/licenses-export-md.html b/platform/commonUI/about/res/templates/licenses-export-md.html
deleted file mode 100644
index c83d7e2a44c..00000000000
--- a/platform/commonUI/about/res/templates/licenses-export-md.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div ng-controller="LicenseController as lc" class="abs l-about l-standalone s-text s-md-export">
-    <h1># Open MCT Licenses</h1>
-    <h2>## Apache License</h2>
-    <mct-include key="'license-apache'"></mct-include>
-
-    <h2>## Software Components Licenses</h2>
-    <p>This software includes components released under the following licenses:</p>
-    <div class="l-license-software" ng-repeat="license in lc.licenses()">
-        <p>### {{license.name}}</p>
-        <p>#### Info</p>
-        <p>* Link: {{license.website}}</p>
-        <p>* Version: {{license.version}}</p>
-        <p>* Author<span ng-show="license.author.indexOf(',') > 0">s</span>: {{license.author}}</p>
-        <p>* Description: {{license.description}}</p>
-        <p>#### License</p>
-        <p ng-show="license.copyright.length > 0">{{license.copyright}}</p>
-        <mct-include key="license.license"></mct-include>
-        <p>&nbsp;</p>
-        <p>---</p>
-    </div>
-</div>
diff --git a/platform/commonUI/about/res/templates/licenses.html b/platform/commonUI/about/res/templates/licenses.html
deleted file mode 100644
index f71e6b1e077..00000000000
--- a/platform/commonUI/about/res/templates/licenses.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div ng-controller="LicenseController as lc" class="abs l-standalone s-text l-about l-licenses s-about s-licenses">
-	<h1>OpenMCT Web Licenses</h1>
-	<h2>Apache License</h2>
-	<mct-include key="'license-apache'"></mct-include>
-
-	<h2>Software Components Licenses</h2>
-    <p>This software includes components released under the following licenses:</p>
-	<div class="l-licenses-software">
-		<div class="l-license-software" ng-repeat="license in lc.licenses()">
-			<h3><a target="_blank" ng-href="{{license.website}}">{{license.name}}</a></h3>
-			<p>
-				<em>Version</em> {{license.version}}
-				<em>&nbsp;|&nbsp;Author<span ng-show="license.author.indexOf(',') > 0">s</span></em> {{license.author}}
-				<em>&nbsp;|&nbsp;Description</em> {{license.description}}
-			</p>
-			<em>License</em>
-			<div class="s-license-text">
-				<p ng-show="license.copyright.length > 0">{{license.copyright}}</p>
-				<mct-include key="license.license"></mct-include>
-			</div>
-		</div>
-	</div>
-</div>
diff --git a/platform/commonUI/about/res/templates/overlay-about.html b/platform/commonUI/about/res/templates/overlay-about.html
deleted file mode 100644
index 85f20ae45e3..00000000000
--- a/platform/commonUI/about/res/templates/overlay-about.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<mct-container key="overlay">
-    <mct-include key="'about-dialog'">
-    </mct-include>
-</mct-container>
diff --git a/platform/commonUI/about/src/AboutController.js b/platform/commonUI/about/src/AboutController.js
deleted file mode 100644
index 15bd291e3b7..00000000000
--- a/platform/commonUI/about/src/AboutController.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Implements Open MCT's About dialog.
- * @namespace platform/commonUI/about
- */
-define(
-    [],
-    function () {
-
-        /**
-         * The AboutController provides information to populate the
-         * About dialog.
-         * @memberof platform/commonUI/about
-         * @constructor
-         * @param {object[]} versions an array of version extensions;
-         *        injected from `versions[]`
-         * @param $window Angular-injected window object
-         */
-        function AboutController(versions, $window) {
-            this.versionDefinitions = versions;
-            this.$window = $window;
-        }
-
-        /**
-         * Get version info. This is given as an array of
-         * objects, where each object is intended to appear
-         * as a line-item in the version information listing.
-         * @returns {object[]} version information
-         */
-        AboutController.prototype.versions = function () {
-            return this.versionDefinitions;
-        };
-
-        /**
-         * Open a new window (or tab, depending on browser
-         * configuration) containing open source licenses.
-         */
-        AboutController.prototype.openLicenses = function () {
-            // Open a new browser window at the licenses route
-            this.$window.open("#/licenses");
-        };
-
-        return AboutController;
-    }
-);
diff --git a/platform/commonUI/about/src/LicenseController.js b/platform/commonUI/about/src/LicenseController.js
deleted file mode 100644
index ec1d69c878a..00000000000
--- a/platform/commonUI/about/src/LicenseController.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Provides extension-introduced licenses information to the
-         * licenses route.
-         * @memberof platform/commonUI/about
-         * @constructor
-         */
-        function LicenseController(licenses) {
-            this.licenseDefinitions = licenses;
-        }
-
-        /**
-         * Get license information.
-         * @returns {Array} license extensions
-         * @memberof platform/commonUI/about.LicenseController#
-         */
-        LicenseController.prototype.licenses = function () {
-            return this.licenseDefinitions;
-        };
-
-        return LicenseController;
-    }
-);
diff --git a/platform/commonUI/about/src/LogoController.js b/platform/commonUI/about/src/LogoController.js
deleted file mode 100644
index 7042ab1066f..00000000000
--- a/platform/commonUI/about/src/LogoController.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * The LogoController provides functionality to the application
-         * logo in the bottom-right of the user interface.
-         * @memberof platform/commonUI/about
-         * @constructor
-         * @param {OverlayService} overlayService the overlay service
-         */
-        function LogoController(overlayService) {
-            this.overlayService = overlayService;
-        }
-
-        /**
-         * Display the About dialog.
-         * @memberof LogoController#
-         * @memberof platform/commonUI/about.LogoController#
-         */
-        LogoController.prototype.showAboutDialog = function () {
-            this.overlayService.createOverlay("overlay-about");
-        };
-
-        return LogoController;
-    }
-);
diff --git a/platform/commonUI/about/test/AboutControllerSpec.js b/platform/commonUI/about/test/AboutControllerSpec.js
deleted file mode 100644
index 290b0a53fd9..00000000000
--- a/platform/commonUI/about/test/AboutControllerSpec.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['../src/AboutController'],
-    function (AboutController) {
-
-        describe("The About controller", function () {
-            let testVersions;
-            let mockWindow;
-            let controller;
-
-            beforeEach(function () {
-                testVersions = [
-                    {
-                        name: "Some name",
-                        value: "1.2.3"
-                    },
-                    {
-                        name: "Some other name",
-                        value: "3.2.1"
-                    }
-                ];
-                mockWindow = jasmine.createSpyObj("$window", ["open"]);
-                controller = new AboutController(testVersions, mockWindow);
-            });
-
-            it("exposes version information", function () {
-                // This will be injected, so it should just give back
-                // what it got in.
-                expect(controller.versions()).toEqual(testVersions);
-            });
-
-            it("opens license information in a window", function () {
-                //Verify precondition
-                expect(mockWindow.open).not.toHaveBeenCalled();
-                controller.openLicenses();
-                expect(mockWindow.open).toHaveBeenCalledWith("#/licenses");
-            });
-        });
-
-    }
-);
diff --git a/platform/commonUI/about/test/LicenseControllerSpec.js b/platform/commonUI/about/test/LicenseControllerSpec.js
deleted file mode 100644
index 142190ecde6..00000000000
--- a/platform/commonUI/about/test/LicenseControllerSpec.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['../src/LicenseController'],
-    function (LicenseController) {
-
-        describe("The License controller", function () {
-            var testLicenses,
-                controller;
-
-            beforeEach(function () {
-                testLicenses = [
-                    { name: "A" },
-                    { name: "B" },
-                    { name: "C" }
-                ];
-                controller = new LicenseController(testLicenses);
-            });
-
-            it("exposes license information", function () {
-                // LicenseController is just there to pass licenses[]
-                // extensions down to the template.
-                expect(controller.licenses()).toEqual(testLicenses);
-            });
-
-        });
-
-    }
-);
diff --git a/platform/commonUI/about/test/LogoControllerSpec.js b/platform/commonUI/about/test/LogoControllerSpec.js
deleted file mode 100644
index f7042118431..00000000000
--- a/platform/commonUI/about/test/LogoControllerSpec.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['../src/LogoController'],
-    function (LogoController) {
-
-        describe("The About controller", function () {
-            var mockOverlayService,
-                controller;
-
-            beforeEach(function () {
-                mockOverlayService = jasmine.createSpyObj(
-                    "overlayService",
-                    ["createOverlay"]
-                );
-                controller = new LogoController(mockOverlayService);
-            });
-
-            it("shows the about dialog", function () {
-                //Verify precondition
-                expect(mockOverlayService.createOverlay)
-                    .not.toHaveBeenCalled();
-                controller.showAboutDialog();
-                expect(mockOverlayService.createOverlay)
-                    .toHaveBeenCalledWith("overlay-about");
-            });
-
-        });
-
-    }
-);
diff --git a/platform/commonUI/browse/bundle.js b/platform/commonUI/browse/bundle.js
deleted file mode 100644
index f0034dd088e..00000000000
--- a/platform/commonUI/browse/bundle.js
+++ /dev/null
@@ -1,158 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/navigation/NavigationService",
-    "./src/navigation/NavigateAction",
-    "./src/navigation/OrphanNavigationHandler",
-    "./res/templates/browse.html",
-    "./res/templates/browse-object.html",
-    "./res/templates/browse/object-header.html",
-    "./res/templates/browse/object-header-frame.html",
-    "./res/templates/menu-arrow.html",
-    "./res/templates/back-arrow.html",
-    "./res/templates/browse/object-properties.html",
-    "./res/templates/browse/inspector-region.html"
-], function (
-    NavigationService,
-    NavigateAction,
-    OrphanNavigationHandler,
-    browseTemplate,
-    browseObjectTemplate,
-    objectHeaderTemplate,
-    objectHeaderFrameTemplate,
-    menuArrowTemplate,
-    backArrowTemplate,
-    objectPropertiesTemplate,
-    inspectorRegionTemplate
-) {
-
-    return {
-        name: "platform/commonUI/browse",
-        definition: {
-            "extensions": {
-                "routes": [
-                ],
-                "constants": [
-                    {
-                        "key": "DEFAULT_PATH",
-                        "value": "mine",
-                        "priority": "fallback"
-                    }
-                ],
-                "representations": [
-                    {
-                        "key": "browse-object",
-                        "template": browseObjectTemplate,
-                        "gestures": [
-                            "drop"
-                        ],
-                        "uses": [
-                            "view"
-                        ]
-                    },
-                    {
-                        "key": "object-header",
-                        "template": objectHeaderTemplate,
-                        "uses": [
-                            "type"
-                        ]
-                    },
-                    {
-                        "key": "object-header-frame",
-                        "template": objectHeaderFrameTemplate,
-                        "uses": [
-                            "type"
-                        ]
-                    },
-                    {
-                        "key": "menu-arrow",
-                        "template": menuArrowTemplate,
-                        "uses": [
-                            "action"
-                        ],
-                        "gestures": [
-                            "menu"
-                        ]
-                    },
-                    {
-                        "key": "back-arrow",
-                        "uses": [
-                            "context"
-                        ],
-                        "template": backArrowTemplate
-                    },
-                    {
-                        "key": "object-properties",
-                        "template": objectPropertiesTemplate
-                    },
-                    {
-                        "key": "inspector-region",
-                        "template": inspectorRegionTemplate
-                    }
-                ],
-                "services": [
-                    {
-                        "key": "navigationService",
-                        "implementation": NavigationService,
-                        "depends": [
-                            "$window"
-                        ]
-                    }
-                ],
-                "actions": [
-                    {
-                        "key": "navigate",
-                        "implementation": NavigateAction,
-                        "depends": [
-                            "navigationService"
-                        ]
-                    }
-                ],
-                "runs": [
-                    {
-                        "implementation": OrphanNavigationHandler,
-                        "depends": [
-                            "throttle",
-                            "topic",
-                            "navigationService"
-                        ]
-                    }
-                ],
-                "templates": [
-                    {
-                        key: "browseRoot",
-                        template: browseTemplate
-                    },
-                    {
-                        key: "browseObject",
-                        template: browseObjectTemplate
-                    },
-                    {
-                        key: "inspectorRegion",
-                        template: inspectorRegionTemplate
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html
deleted file mode 100644
index 16bbccb48dd..00000000000
--- a/platform/commonUI/browse/res/templates/back-arrow.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-
-<a class='s-icon-button icon-pointer-left'
-   ng-show="context.getPath().length > 2"
-   ng-click="context.getParent().getCapability('action').perform('navigate')">
-</a>
-
diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html
deleted file mode 100644
index 6d031910005..00000000000
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ /dev/null
@@ -1,69 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div ng-controller="BrowseObjectController" class="abs l-flex-col">
-    <div class="holder flex-elem l-flex-row object-browse-bar t-primary">
-        <div class="items-select left flex-elem l-flex-row grows">
-            <mct-representation key="'back-arrow'"
-                                mct-object="domainObject"
-                                class="flex-elem l-back"></mct-representation>
-            <mct-representation key="'object-header'"
-                                mct-object="domainObject"
-                                class="l-flex-row flex-elem grows object-header">
-            </mct-representation>
-        </div>
-        <div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
-            <span class="l-object-action-buttons">
-                <mct-representation key="'switcher'"
-                                    mct-object="domainObject"
-                                    ng-model="representation">
-                </mct-representation>
-                <!-- Temporarily, on mobile, the action buttons are hidden-->
-                <mct-representation key="'action-group'"
-                                    mct-object="domainObject"
-                                    parameters="{ category: 'view-control' }"
-                                    class="mobile-hide l-object-action-buttons">
-                </mct-representation>
-            </span>
-        </div>
-    </div>
-    <div class="holder l-flex-col flex-elem grows l-object-wrapper l-controls-visible l-time-controller-visible">
-        <div class="holder l-flex-col flex-elem grows l-object-wrapper-inner">
-            <!-- Toolbar and Save/Cancel buttons -->
-            <div class="l-edit-controls flex-elem l-flex-row flex-align-end">
-                <mct-representation key="'edit-action-buttons'"
-                                    mct-object="domainObject"
-                                    class='flex-elem conclude-editing'>
-                </mct-representation>
-
-            </div>
-            <mct-representation key="representation.selected.key"
-                                mct-object="representation.selected.key && domainObject"
-                                class="abs flex-elem grows object-holder-main scroll"
-                                mct-selectable="{
-                                    item: domainObject.useCapability('adapter'),
-                                    oldItem: domainObject
-                                }"
-                                mct-init-select>
-            </mct-representation>
-        </div>
-    </div>
-</div>
diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
deleted file mode 100644
index 37eecfb61c6..00000000000
--- a/platform/commonUI/browse/res/templates/browse.html
+++ /dev/null
@@ -1,90 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-
-<div class="abs holder-all" ng-controller="BrowseController">
-    <mct-include key="'topbar-browse'"></mct-include>
-    <div class="abs holder holder-main browse-area s-browse-area browse-wrapper"
-         ng-controller="PaneController as modelPaneTree"
-         ng-class="modelPaneTree.visible() ? 'pane-tree-showing' : 'pane-tree-hidden'" hide-parameter="hideTree">
-        <mct-split-pane class='abs contents'
-                        anchor='left' alias="leftSide">
-            <div class='split-pane-component treeview pane left'>
-                <div class="abs holder l-flex-col holder-treeview-elements">
-                    <mct-representation key="'create-button'"
-                                        mct-object="navigatedObject"
-                                        class="holder flex-elem create-button-holder">
-                    </mct-representation>
-                    <mct-include key="'search'"
-                                 ng-model="treeModel"
-                                 class="holder l-flex-col flex-elem search-holder"
-                                 ng-class="{ active: treeModel.search, grows: treeModel.search }">
-                    </mct-include>
-                    <mct-representation key="'tree'"
-                                        mct-object="domainObject"
-                                        parameters="tree"
-                                        ng-model="treeModel"
-                                        class="holder flex-elem grows vscroll tree-holder"
-                                        ng-hide="treeModel.search">
-                    </mct-representation>
-                </div>
-            </div>
-
-            <mct-splitter class="splitter-treeview mobile-hide"></mct-splitter>
-
-            <div class='split-pane-component items pane primary-pane right'>
-                <a class="mini-tab-icon anchor-left toggle-pane toggle-tree"
-                   title="{{ modelPaneTree.visible()? 'Hide' : 'Show' }} this pane"
-                   ng-click="modelPaneTree.toggle()"
-                   ng-class="{ collapsed : !modelPaneTree.visible() }"></a>
-
-                <div class='holder holder-object-and-inspector abs' id='content-area'
-                     ng-controller="InspectorPaneController as modelPaneInspect"
-                     ng-class="modelPaneInspect.visible() ? 'pane-inspect-showing' : 'pane-inspect-hidden'"
-                     hide-parameter="hideInspector">
-
-                    <mct-split-pane class='l-object-and-inspector contents abs' anchor='right' alias="rightSide">
-                        <div class='split-pane-component t-object pane primary-pane left'>
-                            <mct-representation mct-object="navigatedObject"
-                                                key="navigatedObject.getCapability('status').get('editing') ? 'edit-object' : 'browse-object'"
-                                                class="abs holder holder-object t-main-view">
-                            </mct-representation>
-                            <a class="mini-tab-icon anchor-right mobile-hide toggle-pane toggle-inspect flush-right"
-                               title="{{ modelPaneInspect.visible()? 'Hide' : 'Show' }} the Inspection pane"
-                               ng-click="modelPaneInspect.toggle()"
-                               ng-class="{ collapsed : !modelPaneInspect.visible() }"></a>
-                        </div>
-
-                        <mct-splitter class="splitter-inspect mobile-hide flush-right edge-shdw"></mct-splitter>
-
-                        <div class="split-pane-component t-inspect pane right mobile-hide">
-                            <mct-representation key="'object-inspector'"
-                                                mct-object="navigatedObject"
-                                                ng-model="treeModel">
-                            </mct-representation>
-                        </div>
-                    </mct-split-pane>
-                </div>
-            </div>
-        </mct-split-pane>
-    </div>
-    <mct-include key="'bottombar'"></mct-include>
-</div>
diff --git a/platform/commonUI/browse/res/templates/browse/inspector-region.html b/platform/commonUI/browse/res/templates/browse/inspector-region.html
deleted file mode 100644
index fbddf4c26f1..00000000000
--- a/platform/commonUI/browse/res/templates/browse/inspector-region.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div ng-controller="InspectorController as controller">
-        <mct-representation
-                key="'object-properties'"
-                mct-object="controller.selectedItem()"
-                ng-model="ngModel">
-        </mct-representation>
-
-        <div ng-if="!controller.hasProviderView()">
-            <mct-representation
-                    key="inspectorKey"
-                    mct-object="controller.selectedItem()"
-                    ng-model="ngModel">
-            </mct-representation>
-        </div>
-
-        <div class='inspector-provider-view'>
-        </div>
-</div>
diff --git a/platform/commonUI/browse/res/templates/browse/object-header-frame.html b/platform/commonUI/browse/res/templates/browse/object-header-frame.html
deleted file mode 100644
index ff1172cf781..00000000000
--- a/platform/commonUI/browse/res/templates/browse/object-header-frame.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<span class='type-icon flex-elem {{type.getCssClass()}}'></span>
-<span class="l-elem-wrapper l-flex-row flex-elem grows" ng-controller="ObjectHeaderController as controller">
-    <span ng-if="parameters.mode" class='action flex-elem'>{{parameters.mode}}</span>
-    <span class='title-label flex-elem holder flex-can-shrink s-input-inline'>{{model.name}}</span>
-    <span class='t-object-alert t-alert-unsynced flex-elem holder' title='This object is not currently displaying real-time data'></span>
-    <mct-representation
-        key="'menu-arrow'"
-        mct-object='domainObject'
-        class="flex-elem context-available-w"></mct-representation>
-</span>
diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html
deleted file mode 100644
index 3deb3ccfcea..00000000000
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<span class='type-icon flex-elem {{type.getCssClass()}}'></span>
-<span class="l-elem-wrapper l-flex-row flex-elem grows" ng-controller="ObjectHeaderController as controller">
-    <span ng-if="parameters.mode" class='action flex-elem'>{{parameters.mode}}</span>
-    <span ng-attr-contenteditable="{{ controller.editable ? true : undefined }}"
-		class='title-label flex-elem holder flex-can-shrink s-input-inline'
-		ng-click="controller.edit()"
-		ng-blur="controller.updateName($event)"
-		ng-keypress="controller.updateName($event)">{{model.name}}</span>
-    <span class='t-object-alert t-alert-unsynced flex-elem holder' title='This object is not currently displaying real-time data'></span>
-    <mct-representation
-        key="'menu-arrow'"
-        mct-object='domainObject'
-        class="flex-elem context-available-w"></mct-representation>
-</span>
diff --git a/platform/commonUI/browse/res/templates/browse/object-properties.html b/platform/commonUI/browse/res/templates/browse/object-properties.html
deleted file mode 100644
index efe5a64ad2f..00000000000
--- a/platform/commonUI/browse/res/templates/browse/object-properties.html
+++ /dev/null
@@ -1,64 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div ng-controller="ObjectInspectorController as controller" class="grid-properties">
-    <ul class="l-inspector-part">
-        <h2 class="first">Properties</h2>
-        <li class="t-repeat grid-row"
-             ng-repeat="data in metadata"
-             ng-class="{ first:$index === 0 }">
-            <div class="grid-cell label">{{ data.name }}</div>
-            <div class="grid-cell value">{{ data.value }}</div>
-        </li>
-    </ul>
-
-    <ul class="l-inspector-part" ng-if="contextutalParents.length > 0">
-        <h2 title="The location of this linked object.">Location</h2>
-        <li class="grid-row">
-            <div class="label" ng-if="primaryParents.length > 0">This Link</div>
-            <div class="grid-cell value">
-                <div class="t-repeat inspector-location"
-                     ng-repeat="parent in contextutalParents"
-                     ng-class="{ last:($index + 1) === contextualParents.length }">
-                    <mct-representation key="'label'"
-                                        mct-object="parent"
-                                        ng-click="parent.getCapability('action').perform('navigate')"
-                                        class="location-item">
-                    </mct-representation>
-                </div>
-            </div>
-        </li>
-        <li class="grid-row" ng-if="primaryParents.length > 0">
-            <div class="grid-cell label">Original</div>
-            <div class="grid-cell value">
-                <div class="t-repeat inspector-location value"
-                     ng-repeat="parent in primaryParents"
-                     ng-class="{ last:($index + 1) === primaryParents.length }">
-                    <mct-representation key="'label'"
-                                        mct-object="parent"
-                                        ng-click="parent.getCapability('action').perform('navigate')"
-                                        class="location-item">
-                    </mct-representation>
-                </div>
-            </div>
-        </li>
-    </ul>
-</div>
diff --git a/platform/commonUI/browse/res/templates/menu-arrow.html b/platform/commonUI/browse/res/templates/menu-arrow.html
deleted file mode 100644
index 719dd86c49f..00000000000
--- a/platform/commonUI/browse/res/templates/menu-arrow.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-
-<span ng-controller="MenuArrowController as menuArrow">
-    <a class='context-available'
-       ng-click='menuArrow.showMenu($event)'></a>
-</span>
diff --git a/platform/commonUI/browse/src/InspectorRegion.js b/platform/commonUI/browse/src/InspectorRegion.js
deleted file mode 100644
index d519c9521f0..00000000000
--- a/platform/commonUI/browse/src/InspectorRegion.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [
-        '../../regions/src/Region'
-    ],
-    function (Region) {
-
-        /**
-         * Defines the a default Inspector region. Captured in a class to
-         * allow for modular extension and customization of regions based on
-         * the typical case.
-         * @memberOf platform/commonUI/regions
-         * @constructor
-         */
-        function InspectorRegion() {
-            Region.call(this, {'name': 'Inspector'});
-
-            this.buildRegion();
-        }
-
-        InspectorRegion.prototype = Object.create(Region.prototype);
-        InspectorRegion.prototype.constructor = Region;
-
-        /**
-         * @private
-         */
-        InspectorRegion.prototype.buildRegion = function () {
-            var metadataRegion = {
-                name: 'metadata',
-                title: 'Metadata Region',
-                // Which modes should the region part be visible in? If
-                // nothing provided here, then assumed that part is visible
-                // in both. The visibility or otherwise of a region part
-                // should be decided by a policy. In this case, 'modes' is a
-                // shortcut that is used by the EditableRegionPolicy.
-                modes: ['browse', 'edit'],
-                content: {
-                    key: 'object-properties'
-                }
-            };
-            this.addRegion(new Region(metadataRegion), 0);
-        };
-
-        return InspectorRegion;
-    }
-);
diff --git a/platform/commonUI/browse/src/navigation/NavigateAction.js b/platform/commonUI/browse/src/navigation/NavigateAction.js
deleted file mode 100644
index 0637d5b51fa..00000000000
--- a/platform/commonUI/browse/src/navigation/NavigateAction.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining NavigateAction. Created by vwoeltje on 11/10/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * The navigate action navigates to a specific domain object.
-         * @memberof platform/commonUI/browse
-         * @constructor
-         * @implements {Action}
-         */
-        function NavigateAction(navigationService, context) {
-            this.domainObject = context.domainObject;
-            this.navigationService = navigationService;
-        }
-
-        /**
-         * Navigate to the object described in the context.
-         * @returns {Promise} a promise that is resolved once the
-         *          navigation has been updated
-         */
-        NavigateAction.prototype.perform = function () {
-            if (this.navigationService.shouldNavigate()) {
-                this.navigationService.setNavigation(this.domainObject, true);
-
-                return Promise.resolve({});
-            }
-
-            return Promise.reject('Navigation Prevented by User');
-        };
-
-        /**
-         * Navigate as an action is only applicable when a domain object
-         * is described in the action context.
-         * @param {ActionContext} context the context in which the action
-         *        will be performed
-         * @returns {boolean} true if applicable
-         */
-        NavigateAction.appliesTo = function (context) {
-            return context.domainObject !== undefined;
-        };
-
-        return NavigateAction;
-    }
-);
diff --git a/platform/commonUI/browse/src/navigation/NavigationService.js b/platform/commonUI/browse/src/navigation/NavigationService.js
deleted file mode 100644
index 650c949fd20..00000000000
--- a/platform/commonUI/browse/src/navigation/NavigationService.js
+++ /dev/null
@@ -1,203 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining NavigationService. Created by vwoeltje on 11/10/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * The navigation service maintains the application's current
-         * navigation state, and allows listening for changes thereto.
-         *
-         * @memberof platform/commonUI/browse
-         * @constructor
-         */
-        function NavigationService($window) {
-            this.navigated = undefined;
-            this.callbacks = [];
-            this.checks = [];
-            this.$window = $window;
-
-            this.oldUnload = $window.onbeforeunload;
-            $window.onbeforeunload = this.onBeforeUnload.bind(this);
-        }
-
-        /**
-         * Get the current navigation state.
-         *
-         * @returns {DomainObject} the object that is navigated-to
-         */
-        NavigationService.prototype.getNavigation = function () {
-            return this.navigated;
-        };
-
-        /**
-         * Navigate to a specified object.  If navigation checks exist and
-         * return reasons to prevent navigation, it will prompt the user before
-         * continuing. Trying to navigate to the currently navigated object will
-         * do nothing.
-         *
-         * If a truthy value is passed for `force`, it will skip navigation
-         * and will not prevent navigation to an already selected object.
-         *
-         * @param {DomainObject} domainObject the domain object to navigate to
-         * @param {Boolean} force if true, force navigation to occur.
-         * @returns {Boolean} true if navigation occured, otherwise false.
-         */
-        NavigationService.prototype.setNavigation = function (domainObject, force) {
-            if (force) {
-                this.doNavigation(domainObject);
-
-                return true;
-            }
-
-            if (this.navigated === domainObject) {
-                return true;
-            }
-
-            var doNotNavigate = this.shouldWarnBeforeNavigate();
-            if (doNotNavigate && !this.$window.confirm(doNotNavigate)) {
-                return false;
-            }
-
-            this.doNavigation(domainObject);
-
-            return true;
-        };
-
-        /**
-         * Listen for changes in navigation. The passed callback will
-         * be invoked with the new domain object of navigation when
-         * this changes.
-         *
-         * @param {function} callback the callback to invoke when
-         *        navigation state changes
-         */
-        NavigationService.prototype.addListener = function (callback) {
-            this.callbacks.push(callback);
-        };
-
-        /**
-         * Stop listening for changes in navigation state.
-         *
-         * @param {function} callback the callback which should
-         *        no longer be invoked when navigation state
-         *        changes
-         */
-        NavigationService.prototype.removeListener = function (callback) {
-            this.callbacks = this.callbacks.filter(function (cb) {
-                return cb !== callback;
-            });
-        };
-
-        /**
-         * Check if navigation should proceed.  May prompt a user for input
-         * if any checkFns return messages.  Returns true if the user wishes to
-         * navigate, otherwise false.  If using this prior to calling
-         * `setNavigation`, you should call `setNavigation` with `force=true`
-         * to prevent duplicate dialogs being displayed to the user.
-         *
-         * @returns {Boolean} true if the user wishes to navigate, otherwise false.
-         */
-        NavigationService.prototype.shouldNavigate = function () {
-            var doNotNavigate = this.shouldWarnBeforeNavigate();
-
-            return !doNotNavigate || this.$window.confirm(doNotNavigate);
-        };
-
-        /**
-         * Register a check function to be called before any navigation occurs.
-         * Check functions should return a human readable "message" if
-         * there are any reasons to prevent navigation.  Otherwise, they should
-         * return falsy.  Returns a function which can be called to remove the
-         * check function.
-         *
-         * @param {Function} checkFn a function to call before navigation occurs.
-         * @returns {Function} removeCheck call to remove check
-         */
-        NavigationService.prototype.checkBeforeNavigation = function (checkFn) {
-            this.checks.push(checkFn);
-
-            return function removeCheck() {
-                this.checks = this.checks.filter(function (fn) {
-                    return checkFn !== fn;
-                });
-            }.bind(this);
-        };
-
-        /**
-         * Private method to actually perform navigation.
-         *
-         * @private
-         */
-        NavigationService.prototype.doNavigation = function (value) {
-            this.navigated = value;
-            this.callbacks.forEach(function (callback) {
-                callback(value);
-            });
-        };
-
-        /**
-         * Returns either a false value, or a string that should be displayed
-         * to the user before navigation is allowed.
-         *
-         * @private
-         */
-        NavigationService.prototype.shouldWarnBeforeNavigate = function () {
-            var reasons = [];
-            this.checks.forEach(function (checkFn) {
-                var reason = checkFn();
-                if (reason) {
-                    reasons.push(reason);
-                }
-            });
-
-            if (reasons.length) {
-                return reasons.join('\n');
-            }
-
-            return false;
-        };
-
-        /**
-         * Listener for window on before unload event-- will warn before
-         * navigation is allowed.
-         *
-         * @private
-         */
-        NavigationService.prototype.onBeforeUnload = function () {
-            var shouldWarnBeforeNavigate = this.shouldWarnBeforeNavigate();
-            if (shouldWarnBeforeNavigate) {
-                return shouldWarnBeforeNavigate;
-            }
-
-            if (this.oldUnload) {
-                return this.oldUnload.apply(undefined, [].slice.apply(arguments));
-            }
-        };
-
-        return NavigationService;
-    }
-);
diff --git a/platform/commonUI/browse/src/navigation/OrphanNavigationHandler.js b/platform/commonUI/browse/src/navigation/OrphanNavigationHandler.js
deleted file mode 100644
index 198f57d9cc2..00000000000
--- a/platform/commonUI/browse/src/navigation/OrphanNavigationHandler.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([], function () {
-
-    /**
-     * Navigates away from orphan objects whenever they are detected.
-     *
-     * An orphan object is an object whose apparent parent does not
-     * actually contain it. This may occur in certain circumstances, such
-     * as when persistence succeeds for a newly-created object but fails
-     * for its parent.
-     *
-     * @param throttle the `throttle` service
-     * @param topic the `topic` service
-     * @param navigationService the `navigationService`
-     * @constructor
-     */
-    function OrphanNavigationHandler(throttle, topic, navigationService) {
-        var throttledCheckNavigation;
-
-        function getParent(domainObject) {
-            var context = domainObject.getCapability('context');
-
-            return context.getParent();
-        }
-
-        function preventOrphanNavigation(domainObject) {
-            var parent = getParent(domainObject);
-            parent.useCapability('composition')
-                .then(function (composees) {
-                    var isOrphan = composees.every(function (c) {
-                        return c.getId() !== domainObject.getId();
-                    });
-                    if (isOrphan) {
-                        parent.getCapability('action').perform('navigate');
-                    }
-                });
-        }
-
-        function checkNavigation() {
-            var navigatedObject = navigationService.getNavigation();
-            if (navigatedObject && navigatedObject.hasCapability('context')) {
-                if (!navigatedObject.getCapability('editor').isEditContextRoot()) {
-                    preventOrphanNavigation(navigatedObject);
-                }
-            }
-        }
-
-        throttledCheckNavigation = throttle(checkNavigation);
-
-        navigationService.addListener(throttledCheckNavigation);
-        topic('mutation').listen(throttledCheckNavigation);
-    }
-
-    return OrphanNavigationHandler;
-});
diff --git a/platform/commonUI/browse/test/InspectorRegionSpec.js b/platform/commonUI/browse/test/InspectorRegionSpec.js
deleted file mode 100644
index 2f228cb99f0..00000000000
--- a/platform/commonUI/browse/test/InspectorRegionSpec.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * MCTIncudeSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../src/InspectorRegion"],
-    function (InspectorRegion) {
-
-        describe("The inspector region", function () {
-            var inspectorRegion;
-
-            beforeEach(function () {
-                inspectorRegion = new InspectorRegion();
-            });
-
-            it("creates default region parts", function () {
-                expect(inspectorRegion.regions.length).toBe(1);
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/browse/test/navigation/NavigateActionSpec.js b/platform/commonUI/browse/test/navigation/NavigateActionSpec.js
deleted file mode 100644
index 158714b635d..00000000000
--- a/platform/commonUI/browse/test/navigation/NavigateActionSpec.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * MCTRepresentationSpec. Created by vwoeltje on 11/6/14.
- */
-define([
-    "../../src/navigation/NavigateAction"
-], function (
-    NavigateAction
-) {
-
-    describe("The navigate action", function () {
-        var mockNavigationService,
-            mockDomainObject,
-            action;
-
-        beforeEach(function () {
-            mockNavigationService = jasmine.createSpyObj(
-                "navigationService",
-                [
-                    "shouldNavigate",
-                    "setNavigation"
-                ]
-            );
-
-            mockDomainObject = {};
-
-            action = new NavigateAction(
-                mockNavigationService,
-                { domainObject: mockDomainObject }
-            );
-        });
-
-        it("sets navigation if it is allowed", function () {
-            mockNavigationService.shouldNavigate.and.returnValue(true);
-
-            return action.perform()
-                .then(function () {
-                    expect(mockNavigationService.setNavigation)
-                        .toHaveBeenCalledWith(mockDomainObject, true);
-                });
-        });
-
-        it("does not set navigation if it is not allowed", function () {
-            mockNavigationService.shouldNavigate.and.returnValue(false);
-            var onSuccess = jasmine.createSpy('onSuccess');
-
-            return action.perform()
-                .then(onSuccess, function () {
-                    expect(onSuccess).not.toHaveBeenCalled();
-                    expect(mockNavigationService.setNavigation)
-                        .not
-                        .toHaveBeenCalledWith(mockDomainObject);
-                });
-        });
-
-        it("is only applicable when a domain object is in context", function () {
-            expect(NavigateAction.appliesTo({})).toBeFalsy();
-            expect(NavigateAction.appliesTo({
-                domainObject: mockDomainObject
-            })).toBeTruthy();
-        });
-
-    });
-});
diff --git a/platform/commonUI/browse/test/navigation/NavigationServiceSpec.js b/platform/commonUI/browse/test/navigation/NavigationServiceSpec.js
deleted file mode 100644
index 7d3520b2ba8..00000000000
--- a/platform/commonUI/browse/test/navigation/NavigationServiceSpec.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * MCTRepresentationSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/navigation/NavigationService"],
-    function (NavigationService) {
-
-        describe("The navigation service", function () {
-            var $window,
-                navigationService;
-
-            beforeEach(function () {
-                $window = jasmine.createSpyObj('$window', ['confirm']);
-                navigationService = new NavigationService($window);
-            });
-
-            it("stores navigation state", function () {
-                var testObject = { someKey: 42 },
-                    otherObject = { someKey: "some value" };
-                expect(navigationService.getNavigation())
-                    .toBeUndefined();
-                navigationService.setNavigation(testObject);
-                expect(navigationService.getNavigation())
-                    .toBe(testObject);
-                expect(navigationService.getNavigation())
-                    .toBe(testObject);
-                navigationService.setNavigation(otherObject);
-                expect(navigationService.getNavigation())
-                    .toBe(otherObject);
-            });
-
-            it("notifies listeners on change", function () {
-                var testObject = { someKey: 42 },
-                    callback = jasmine.createSpy("callback");
-
-                navigationService.addListener(callback);
-                expect(callback).not.toHaveBeenCalled();
-
-                navigationService.setNavigation(testObject);
-                expect(callback).toHaveBeenCalledWith(testObject);
-            });
-
-            it("does not notify listeners when no changes occur", function () {
-                var testObject = { someKey: 42 },
-                    callback = jasmine.createSpy("callback");
-
-                navigationService.addListener(callback);
-                navigationService.setNavigation(testObject);
-                navigationService.setNavigation(testObject);
-                expect(callback.calls.count()).toEqual(1);
-            });
-
-            it("stops notifying listeners after removal", function () {
-                var testObject = { someKey: 42 },
-                    callback = jasmine.createSpy("callback");
-
-                navigationService.addListener(callback);
-                navigationService.removeListener(callback);
-
-                navigationService.setNavigation(testObject);
-                expect(callback).not.toHaveBeenCalled();
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/browse/test/navigation/OrphanNavigationHandlerSpec.js b/platform/commonUI/browse/test/navigation/OrphanNavigationHandlerSpec.js
deleted file mode 100644
index 904b2db2f1c..00000000000
--- a/platform/commonUI/browse/test/navigation/OrphanNavigationHandlerSpec.js
+++ /dev/null
@@ -1,182 +0,0 @@
-/*****************************************************************************
-* Open MCT, Copyright (c) 2014-2021, United States Government
-* as represented by the Administrator of the National Aeronautics and Space
-* Administration. All rights reserved.
-*
-* Open MCT is licensed under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-* http://www.apache.org/licenses/LICENSE-2.0.
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-* License for the specific language governing permissions and limitations
-* under the License.
-*
-* Open MCT includes source code licensed under additional open source
-* licenses. See the Open Source Licenses file (LICENSES.md) included with
-    * this source code distribution or the Licensing information page available
-* at runtime from the About dialog for additional information.
-*****************************************************************************/
-
-define([
-    '../../src/navigation/OrphanNavigationHandler'
-], function (OrphanNavigationHandler) {
-    describe("OrphanNavigationHandler", function () {
-        var mockTopic,
-            mockThrottle,
-            mockMutationTopic,
-            mockNavigationService,
-            mockDomainObject,
-            mockParentObject,
-            mockContext,
-            mockActionCapability,
-            mockEditor,
-            testParentComposition,
-            testId,
-            mockThrottledFns;
-
-        beforeEach(function () {
-            testId = 'some-identifier';
-
-            mockThrottledFns = [];
-
-            mockTopic = jasmine.createSpy('topic');
-            mockThrottle = jasmine.createSpy('throttle');
-            mockNavigationService = jasmine.createSpyObj('navigationService', [
-                'getNavigation',
-                'addListener'
-            ]);
-            mockMutationTopic = jasmine.createSpyObj('mutationTopic', [
-                'listen'
-            ]);
-            mockDomainObject = jasmine.createSpyObj('domainObject', [
-                'getId',
-                'getCapability',
-                'hasCapability'
-            ]);
-            mockParentObject = jasmine.createSpyObj('domainObject', [
-                'getId',
-                'getCapability',
-                'useCapability'
-            ]);
-            mockContext = jasmine.createSpyObj('context', ['getParent']);
-            mockActionCapability = jasmine.createSpyObj('action', ['perform']);
-            mockEditor = jasmine.createSpyObj('editor', ['isEditContextRoot']);
-
-            mockThrottle.and.callFake(function (fn) {
-                var mockThrottledFn =
-                    jasmine.createSpy('throttled-' + mockThrottledFns.length);
-                mockThrottledFn.and.callFake(fn);
-                mockThrottledFns.push(mockThrottledFn);
-
-                return mockThrottledFn;
-            });
-            mockTopic.and.returnValue(mockMutationTopic);
-            mockDomainObject.getId.and.returnValue(testId);
-            mockDomainObject.getCapability.and.callFake(function (c) {
-                return {
-                    context: mockContext,
-                    editor: mockEditor
-                }[c];
-            });
-            mockDomainObject.hasCapability.and.callFake(function (c) {
-                return Boolean(mockDomainObject.getCapability(c));
-            });
-            mockParentObject.getCapability.and.callFake(function (c) {
-                return {
-                    action: mockActionCapability
-                }[c];
-            });
-            testParentComposition = [];
-            mockParentObject.useCapability.and.returnValue(Promise.resolve(testParentComposition));
-
-            mockContext.getParent.and.returnValue(mockParentObject);
-            mockNavigationService.getNavigation.and.returnValue(mockDomainObject);
-            mockEditor.isEditContextRoot.and.returnValue(false);
-
-            return new OrphanNavigationHandler(
-                mockThrottle,
-                mockTopic,
-                mockNavigationService
-            );
-        });
-
-        it("listens for mutation with a throttled function", function () {
-            expect(mockMutationTopic.listen)
-                .toHaveBeenCalledWith(jasmine.any(Function));
-            expect(mockThrottledFns.indexOf(
-                mockMutationTopic.listen.calls.mostRecent().args[0]
-            )).not.toEqual(-1);
-        });
-
-        it("listens for navigation changes with a throttled function", function () {
-            expect(mockNavigationService.addListener)
-                .toHaveBeenCalledWith(jasmine.any(Function));
-            expect(mockThrottledFns.indexOf(
-                mockNavigationService.addListener.calls.mostRecent().args[0]
-            )).not.toEqual(-1);
-        });
-
-        [false, true].forEach(function (isOrphan) {
-            var prefix = isOrphan ? "" : "non-";
-            describe("for " + prefix + "orphan objects", function () {
-                beforeEach(function () {
-                    if (!isOrphan) {
-                        testParentComposition.push(mockDomainObject);
-                    }
-                });
-
-                [false, true].forEach(function (isEditRoot) {
-                    var caseName = isEditRoot
-                        ? "that are being edited" : "that are not being edited";
-
-                    function itNavigatesAsExpected() {
-                        if (isOrphan && !isEditRoot) {
-                            it("navigates to the parent", function () {
-                                return Promise.resolve().then(function () {
-                                    expect(mockActionCapability.perform)
-                                        .toHaveBeenCalledWith('navigate');
-                                });
-                            });
-                        } else {
-                            it("does nothing", function () {
-                                return Promise.resolve().then(function () {
-                                    expect(mockActionCapability.perform)
-                                        .not.toHaveBeenCalled();
-                                });
-                            });
-                        }
-                    }
-
-                    describe(caseName, function () {
-                        beforeEach(function () {
-                            mockEditor.isEditContextRoot.and.returnValue(isEditRoot);
-                        });
-
-                        describe("when navigation changes", function () {
-                            beforeEach(function () {
-                                mockNavigationService.addListener.calls.mostRecent()
-                                    .args[0](mockDomainObject);
-                            });
-                            itNavigatesAsExpected();
-                        });
-
-                        describe("when mutation occurs", function () {
-                            beforeEach(function () {
-                                mockMutationTopic.listen.calls.mostRecent()
-                                    .args[0](mockParentObject);
-                            });
-
-                            itNavigatesAsExpected();
-                        });
-
-                    });
-                });
-            });
-        });
-
-    });
-});
-
diff --git a/platform/commonUI/dialog/README.md b/platform/commonUI/dialog/README.md
deleted file mode 100644
index c42cf3a95be..00000000000
--- a/platform/commonUI/dialog/README.md
+++ /dev/null
@@ -1,27 +0,0 @@
-This bundle provides `dialogService`, which can be used to prompt
-for user input.
-
-## `getUserChoice`
-
-The `getUserChoice` method is useful for displaying a message and a set of
-buttons. This method returns a promise which will resolve to the user's
-chosen option (or, more specifically, its `key`), and will be rejected if
-the user closes the dialog with the X in the top-right;
-
-The `dialogModel` given as an argument to this method should have the
-following properties.
-
-* `title`: The title to display at the top of the dialog.
-* `hint`: Short message to display below the title.
-* `template`: Identifying key (as will be passed to `mct-include`) for
-  the template which will be used to populate the inner area of the dialog.
-* `model`: Model to pass in the `ng-model` attribute of
-  `mct-include`.
-* `parameters`: Parameters to pass in the `parameters` attribute of
-  `mct-include`.
-* `options`: An array of options describing each button at the bottom.
-  Each option may have the following properties:
-  * `name`: Human-readable name to display in the button.
-  * `key`: Machine-readable key, to pass as the result of the resolved
-   promise when clicked.
-  * `description`: Description to show in tool tip on hover.
diff --git a/platform/commonUI/dialog/bundle.js b/platform/commonUI/dialog/bundle.js
deleted file mode 100644
index 1b00d138bb5..00000000000
--- a/platform/commonUI/dialog/bundle.js
+++ /dev/null
@@ -1,112 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/DialogService",
-    "./src/OverlayService",
-    "./res/templates/overlay-dialog.html",
-    "./res/templates/overlay-options.html",
-    "./res/templates/dialog.html",
-    "./res/templates/overlay-blocking-message.html",
-    "./res/templates/message.html",
-    "./res/templates/notification-message.html",
-    "./res/templates/overlay-message-list.html",
-    "./res/templates/overlay.html"
-], function (
-    DialogService,
-    OverlayService,
-    overlayDialogTemplate,
-    overlayOptionsTemplate,
-    dialogTemplate,
-    overlayBlockingMessageTemplate,
-    messageTemplate,
-    notificationMessageTemplate,
-    overlayMessageListTemplate,
-    overlayTemplate
-) {
-
-    return {
-        name: "platform/commonUI/dialog",
-        definition: {
-            "extensions": {
-                "services": [
-                    {
-                        "key": "dialogService",
-                        "implementation": DialogService,
-                        "depends": [
-                            "overlayService",
-                            "$q",
-                            "$log",
-                            "$document"
-                        ]
-                    },
-                    {
-                        "key": "overlayService",
-                        "implementation": OverlayService,
-                        "depends": [
-                            "$document",
-                            "$compile",
-                            "$rootScope",
-                            "$timeout"
-                        ]
-                    }
-                ],
-                "templates": [
-                    {
-                        "key": "overlay-dialog",
-                        "template": overlayDialogTemplate
-                    },
-                    {
-                        "key": "overlay-options",
-                        "template": overlayOptionsTemplate
-                    },
-                    {
-                        "key": "form-dialog",
-                        "template": dialogTemplate
-                    },
-                    {
-                        "key": "overlay-blocking-message",
-                        "template": overlayBlockingMessageTemplate
-                    },
-                    {
-                        "key": "message",
-                        "template": messageTemplate
-                    },
-                    {
-                        "key": "notification-message",
-                        "template": notificationMessageTemplate
-                    },
-                    {
-                        "key": "overlay-message-list",
-                        "template": overlayMessageListTemplate
-                    }
-                ],
-                "containers": [
-                    {
-                        "key": "overlay",
-                        "template": overlayTemplate
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/commonUI/dialog/res/templates/dialog.html b/platform/commonUI/dialog/res/templates/dialog.html
deleted file mode 100644
index 348fddc0f1a..00000000000
--- a/platform/commonUI/dialog/res/templates/dialog.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div class="c-overlay__top-bar">
-    <div class="c-overlay__dialog-title">{{ngModel.title}}</div>
-    <div class="c-overlay__dialog-hint hint">All fields marked <span class="req icon-asterisk"></span> are required.</div>
-</div>
-<div class='c-overlay__contents-main'>
-    <mct-form ng-model="ngModel.value"
-              structure="ngModel.structure"
-              class="validates"
-              name="createForm">
-    </mct-form>
-</div>
-<div class="c-overlay__button-bar">
-    <button class='c-button c-button--major'
-       ng-class="{ disabled: !createForm.$valid }"
-       ng-click="ngModel.confirm()">
-        OK
-    </button>
-    <button class='c-button  '
-       ng-click="ngModel.cancel()">
-        Cancel
-    </button>
-</div>
diff --git a/platform/commonUI/dialog/res/templates/message.html b/platform/commonUI/dialog/res/templates/message.html
deleted file mode 100644
index c75878cfc50..00000000000
--- a/platform/commonUI/dialog/res/templates/message.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<div class="c-message"
-     ng-class="'message-severity-' + ngModel.severity">
-    <div class="w-message-contents">
-        <div class="c-message__top-bar">
-            <div class="c-message__title">{{ngModel.title}}</div>
-        </div>
-        <div class="c-message__hint" ng-hide="ngModel.hint === undefined">
-            {{ngModel.hint}}
-            <span ng-if="ngModel.timestamp !== undefined">[{{ngModel.timestamp}}]</span>
-        </div>
-        <div class="message-body">
-            <div class="message-action">
-                {{ngModel.actionText}}
-            </div>
-            <mct-include key="'progress-bar'"
-                         ng-model="ngModel"
-                         ng-show="ngModel.progress !== undefined || ngModel.unknownProgress"></mct-include>
-        </div>
-        <div class="c-overlay__button-bar">
-            <button ng-repeat="dialogOption in ngModel.options"
-               class="c-button"
-               ng-click="dialogOption.callback()">
-                {{dialogOption.label}}
-            </button>
-            <button class="c-button c-button--major"
-               ng-if="ngModel.primaryOption"
-               ng-click="ngModel.primaryOption.callback()">
-                {{ngModel.primaryOption.label}}
-            </button>
-        </div>
-    </div>
-</div>
\ No newline at end of file
diff --git a/platform/commonUI/dialog/res/templates/notification-message.html b/platform/commonUI/dialog/res/templates/notification-message.html
deleted file mode 100644
index 8fabb81081d..00000000000
--- a/platform/commonUI/dialog/res/templates/notification-message.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<div class="c-message"
-     ng-class="'message-severity-' + ngModel.severity">
-    <div class="w-message-contents">
-        <div class="c-message__top-bar">
-            <div class="c-message__title">{{ngModel.message}}</div>
-        </div>
-        <div class="message-body">
-            <mct-include key="'progress-bar'"
-                         ng-model="ngModel"
-                         ng-show="ngModel.progressPerc !== undefined"></mct-include>
-        </div>
-    </div>
-    <div class="c-overlay__button-bar">
-        <button ng-repeat="dialogOption in ngModel.options"
-                class="c-button"
-                ng-click="dialogOption.callback()">
-            {{dialogOption.label}}
-        </button>
-        <button class="c-button c-button--major"
-                ng-if="ngModel.primaryOption"
-                ng-click="ngModel.primaryOption.callback()">
-            {{ngModel.primaryOption.label}}
-        </button>
-    </div>
-</div>
diff --git a/platform/commonUI/dialog/res/templates/overlay-blocking-message.html b/platform/commonUI/dialog/res/templates/overlay-blocking-message.html
deleted file mode 100644
index 1730aa5a5b6..00000000000
--- a/platform/commonUI/dialog/res/templates/overlay-blocking-message.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<mct-container key="overlay" class="t-message-single">
-    <mct-include key="'message'" ng-model="ngModel">
-    </mct-include>
-</mct-container>
diff --git a/platform/commonUI/dialog/res/templates/overlay-dialog.html b/platform/commonUI/dialog/res/templates/overlay-dialog.html
deleted file mode 100644
index 357c3f6642c..00000000000
--- a/platform/commonUI/dialog/res/templates/overlay-dialog.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<mct-container key="overlay">
-    <mct-include key="'form-dialog'" ng-model="ngModel">
-    </mct-include>
-</mct-container>
diff --git a/platform/commonUI/dialog/res/templates/overlay-message-list.html b/platform/commonUI/dialog/res/templates/overlay-message-list.html
deleted file mode 100644
index caabd7d4bf2..00000000000
--- a/platform/commonUI/dialog/res/templates/overlay-message-list.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<mct-container key="overlay">
-    <div class="t-message-list c-overlay__contents">
-        <div class="c-overlay__top-bar">
-            <div class="c-overlay__dialog-title">{{ngModel.dialog.title}}</div>
-            <div class="c-overlay__dialog-hint">Displaying {{ngModel.dialog.messages.length}} message<span
-                    ng-show="ngModel.dialog.messages.length > 1 ||
-                            ngModel.dialog.messages.length == 0">s</span>
-            </div>
-            <button
-                ng-if="ngModel.dialog.topBarButton"
-                class="c-button c-button--major"
-                ng-click="ngModel.topBarButton.onClick">
-                {{ ngModel.topBarButton.label }}
-            </button>
-        </div>
-        <div class="w-messages c-overlay__messages">
-            <mct-include
-                ng-repeat="msg in ngModel.dialog.messages | orderBy: '-'"
-                key="'notification-message'" ng-model="msg.model"></mct-include>
-        </div>
-        <div class="c-overlay__bottom-bar">
-            <button ng-repeat="dialogAction in ngModel.dialog.actions"
-               class="c-button c-button--major"
-               ng-click="dialogAction.action()">
-                {{ dialogAction.label }}
-            </button>
-        </div>
-    </div>
-</mct-container>
diff --git a/platform/commonUI/dialog/res/templates/overlay-options.html b/platform/commonUI/dialog/res/templates/overlay-options.html
deleted file mode 100644
index f32359c624a..00000000000
--- a/platform/commonUI/dialog/res/templates/overlay-options.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<mct-container key="c-overlay__contents">
-    <div class=c-overlay__top-bar">
-        <div class="c-overlay__dialog-title">{{ngModel.dialog.title}}</div>
-        <div class="c-overlay__dialog-hint hint">{{ngModel.dialog.hint}}</div>
-    </div>
-    <div class='c-overlay__contents-main'>
-        <mct-include key="ngModel.dialog.template"
-                     parameters="ngModel.dialog.parameters"
-                     ng-model="ngModel.dialog.model">
-        </mct-include>
-    </div>
-    <div class="c-overlay__button-bar">
-        <button ng-repeat="option in ngModel.dialog.options"
-           href=''
-           class="s-button lg"
-           title="{{option.description}}"
-           ng-click="ngModel.confirm(option.key)"
-           ng-class="{ major: $first, subtle: !$first }">
-            {{option.name}}
-        </button>
-    </div>
-</mct-container>
diff --git a/platform/commonUI/dialog/res/templates/overlay.html b/platform/commonUI/dialog/res/templates/overlay.html
deleted file mode 100644
index b6e28290387..00000000000
--- a/platform/commonUI/dialog/res/templates/overlay.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div class="c-overlay l-overlay-small" ng-class="{'delayEntry100ms' : ngModel.delay}">
-    <div class="c-overlay__blocker"></div>
-    <div class="c-overlay__outer">
-        <button ng-click="ngModel.cancel()"
-           ng-if="ngModel.cancel"
-           class="c-click-icon c-overlay__close-button icon-x"></button>
-        <div class="c-overlay__contents" ng-transclude></div>
-    </div>
-</div>
diff --git a/platform/commonUI/dialog/src/DialogService.js b/platform/commonUI/dialog/src/DialogService.js
deleted file mode 100644
index 85f78472822..00000000000
--- a/platform/commonUI/dialog/src/DialogService.js
+++ /dev/null
@@ -1,271 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * This bundle implements the dialog service, which can be used to
- * launch dialogs for user input & notifications.
- * @namespace platform/commonUI/dialog
- */
-define(
-    [],
-    function () {
-        /**
-         * The dialog service is responsible for handling window-modal
-         * communication with the user, such as displaying forms for user
-         * input.
-         * @memberof platform/commonUI/dialog
-         * @constructor
-         */
-        function DialogService(overlayService, $q, $log, $document) {
-            this.overlayService = overlayService;
-            this.$q = $q;
-            this.$log = $log;
-            this.activeOverlay = undefined;
-
-            this.findBody = function () {
-                return $document.find('body');
-            };
-        }
-
-        /**
-         * @private
-         */
-        DialogService.prototype.dismissOverlay = function (overlay) {
-            //Dismiss the overlay
-            overlay.dismiss();
-
-            //If dialog is the current active one, dismiss it
-            if (overlay === this.activeOverlay) {
-                this.activeOverlay = undefined;
-            }
-        };
-
-        DialogService.prototype.getDialogResponse = function (key, model, resultGetter, typeClass) {
-            // We will return this result as a promise, because user
-            // input is asynchronous.
-            var deferred = this.$q.defer(),
-                self = this,
-                overlay,
-                handleEscKeydown;
-
-            // Confirm function; this will be passed in to the
-            // overlay-dialog template and associated with a
-            // OK button click
-            function confirm(value) {
-                // Pass along the result
-                deferred.resolve(resultGetter ? resultGetter() : value);
-                self.dismissOverlay(overlay);
-            }
-
-            // Cancel function; this will be passed in to the
-            // overlay-dialog template and associated with a
-            // Cancel or X button click
-            function cancel() {
-                deferred.reject();
-                self.findBody().off('keydown', handleEscKeydown);
-                self.dismissOverlay(overlay);
-            }
-
-            handleEscKeydown = function (event) {
-                if (event.keyCode === 27) {
-                    cancel();
-                }
-            };
-
-            // Add confirm/cancel callbacks
-            model.confirm = confirm;
-            model.cancel = cancel;
-
-            this.findBody().on('keydown', handleEscKeydown);
-
-            if (this.canShowDialog(model)) {
-                // Add the overlay using the OverlayService, which
-                // will handle actual insertion into the DOM
-                overlay = this.activeOverlay = this.overlayService.createOverlay(
-                    key,
-                    model,
-                    typeClass || "t-dialog"
-                );
-            } else {
-                deferred.reject();
-            }
-
-            return deferred.promise;
-        };
-
-        /**
-         * Request user input via a window-modal dialog.
-         *
-         * @param {FormModel} formModel a description of the form
-         *        to be shown (see platform/forms)
-         * @param {object} value the initial state of the form
-         * @returns {Promise} a promise for the form value that the
-         *          user has supplied; this may be rejected if
-         *          user input cannot be obtained (for instance,
-         *          because the user cancelled the dialog)
-         */
-        DialogService.prototype.getUserInput = function (formModel, value) {
-            var overlayModel = {
-                title: formModel.name,
-                message: formModel.message,
-                structure: formModel,
-                value: value
-            };
-
-            // Provide result from the model
-            function resultGetter() {
-                return overlayModel.value;
-            }
-
-            // Show the overlay-dialog
-            return this.getDialogResponse(
-                "overlay-dialog",
-                overlayModel,
-                resultGetter
-            );
-        };
-
-        /**
-         * Request that the user chooses from a set of options,
-         * which will be shown as buttons.
-         *
-         * @param dialogModel a description of the dialog to show
-         * @return {Promise} a promise for the user's choice
-         */
-        DialogService.prototype.getUserChoice = function (dialogModel) {
-            // Show the overlay-options dialog
-            return this.getDialogResponse(
-                "overlay-options",
-                { dialog: dialogModel }
-            );
-        };
-
-        /**
-         * Tests if a dialog can be displayed. A modal dialog may only be
-         * displayed if one is not already visible.
-         * Will log a warning message if it can't display a dialog.
-         * @returns {boolean} true if dialog is currently visible, false
-         * otherwise
-         */
-        DialogService.prototype.canShowDialog = function (dialogModel) {
-            if (this.activeOverlay) {
-                // Only one dialog should be shown at a time.
-                // The application design should be such that
-                // we never even try to do this.
-                this.$log.warn([
-                    "Dialog already showing; ",
-                    "unable to show ",
-                    dialogModel.title
-                ].join(""));
-
-                return false;
-            } else {
-                return true;
-            }
-        };
-
-        /**
-         * A user action that can be performed from a blocking dialog. These
-         * actions will be rendered as buttons within a blocking dialog.
-         *
-         * @typedef DialogOption
-         * @property {string} label a label to be displayed as the button
-         * text for this action
-         * @property {function} callback a function to be called when the
-         * button is clicked
-         */
-
-        /**
-         * @typedef DialogHandle
-         * @property {function} dismiss a function to dismiss the given dialog
-         */
-
-        /**
-         * A description of the model options that may be passed to the
-         * showBlockingMessage method. Note that the DialogModel described
-         * here is shared with the Notifications framework.
-         * @see NotificationService
-         *
-         * @typedef DialogModel
-         * @property {string} title the title to use for the dialog
-         * @property {string} severity the severity level of this message.
-         * These are defined in a bundle constant with key 'dialogSeverity'
-         * @property {string} hint the 'hint' message to show below the title
-         * @property {string} actionText text that indicates a current action,
-         * shown above a progress bar to indicate what's happening.
-         * @property {number} progress a percentage value (1-100)
-         * indicating the completion of the blocking task
-         * @property {boolean} delay adds a brief delay before loading
-         * the dialog. Useful for removing the dialog flicker when the
-         * conditions for displaying the dialog change rapidly.
-         * @property {string} progressText the message to show below a
-         * progress bar to indicate progress. For example, this might be
-         * used to indicate time remaining, or items still to process.
-         * @property {boolean} unknownProgress some tasks may be
-         * impossible to provide an estimate for. Providing a true value for
-         * this attribute will indicate to the user that the progress and
-         * duration cannot be estimated.
-         * @property {DialogOption} primaryOption an action that will
-         * be added to the dialog as a button. The primary action can be
-         * used as the suggested course of action for the user. Making it
-         * distinct from other actions allows it to be styled differently,
-         * and treated preferentially in banner mode.
-         * @property {DialogOption[]} options a list of actions that will
-         * be added to the dialog as buttons.
-         */
-
-        /**
-         * Displays a blocking (modal) dialog. This dialog can be used for
-         * displaying messages that require the user's
-         * immediate attention. The message may include an indication of
-         * progress, as well as a series of actions that
-         * the user can take if necessary
-         * @param {DialogModel} dialogModel defines options for the dialog
-         * @param {typeClass} string tells overlayService that this overlay should use appropriate CSS class
-         * @returns {boolean | {DialogHandle}}
-         */
-        DialogService.prototype.showBlockingMessage = function (dialogModel) {
-            if (this.canShowDialog(dialogModel)) {
-                // Add the overlay using the OverlayService, which
-                // will handle actual insertion into the DOM
-                var self = this,
-                    overlay = this.overlayService.createOverlay(
-                        "overlay-blocking-message",
-                        dialogModel,
-                        "t-dialog-sm"
-                    );
-
-                this.activeOverlay = overlay;
-
-                return {
-                    dismiss: function () {
-                        self.dismissOverlay(overlay);
-                    }
-                };
-            } else {
-                return false;
-            }
-        };
-
-        return DialogService;
-    }
-);
diff --git a/platform/commonUI/dialog/src/OverlayService.js b/platform/commonUI/dialog/src/OverlayService.js
deleted file mode 100644
index d53be9574fb..00000000000
--- a/platform/commonUI/dialog/src/OverlayService.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        // Template to inject into the DOM to show the dialog; really just points to
-        // the a specific template that can be included via mct-include
-        var TEMPLATE = '<mct-include ng-model="overlay" key="key" ng-class="typeClass"></mct-include>';
-
-        /**
-         * The OverlayService is responsible for pre-pending templates to
-         * the body of the document, which is useful for displaying templates
-         * which need to block the full screen.
-         *
-         * This is intended to be used by the DialogService; by design, it
-         * does not have any protections in place to prevent multiple overlays
-         * from being shown at once. (The DialogService does have these
-         * protections, and should be used for most overlay-type interactions,
-         * particularly where a multiple-overlay effect is not specifically
-         * desired).
-         *
-         * @memberof platform/commonUI/dialog
-         * @constructor
-         */
-        function OverlayService($document, $compile, $rootScope, $timeout) {
-            this.$compile = $compile;
-            this.$timeout = $timeout;
-
-            // Don't include $document and $rootScope directly;
-            // avoids https://docs.angularjs.org/error/ng/cpws
-            this.findBody = function () {
-                return $document.find('body');
-            };
-
-            this.newScope = function () {
-                return $rootScope.$new();
-            };
-        }
-
-        /**
-         * Add a new overlay to the document. This will be
-         * prepended to the document body; the overlay's
-         * template (as pointed to by the `key` argument) is
-         * responsible for having a useful z-order, and for
-         * blocking user interactions if appropriate.
-         *
-         * @param {string} key the symbolic key which identifies
-         *        the template of the overlay to be shown
-         * @param {object} overlayModel the model to pass to the
-         *        included overlay template (this will be passed
-         *        in via ng-model)
-         * @param {string} typeClass the element class to use in rendering
-         *        the overlay. Can be specified to provide custom styling of
-         *        overlays
-         */
-        OverlayService.prototype.createOverlay = function (key, overlayModel, typeClass) {
-            // Create a new scope for this overlay
-            var scope = this.newScope(),
-                element;
-
-            // Stop showing the overlay; additionally, release the scope
-            // that it uses.
-            function dismiss() {
-                scope.$destroy();
-                element.remove();
-            }
-
-            // If no model is supplied, just fill in a default "cancel"
-            overlayModel = overlayModel || { cancel: dismiss };
-
-            // Populate the scope; will be passed directly to the template
-            scope.overlay = overlayModel;
-            scope.key = key;
-            scope.typeClass = typeClass || 't-dialog';
-
-            this.$timeout(() => {
-                // Create the overlay element and add it to the document's body
-                element = this.$compile(TEMPLATE)(scope);
-
-                // Append so that most recent dialog is last in DOM. This means the most recent dialog will be on top when
-                // multiple overlays with the same z-index are active.
-                this.findBody().append(element);
-            });
-
-            return {
-                dismiss: dismiss
-            };
-        };
-
-        return OverlayService;
-    }
-);
diff --git a/platform/commonUI/dialog/test/DialogServiceSpec.js b/platform/commonUI/dialog/test/DialogServiceSpec.js
deleted file mode 100644
index d08c3acd18b..00000000000
--- a/platform/commonUI/dialog/test/DialogServiceSpec.js
+++ /dev/null
@@ -1,214 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * MCTIncudeSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../src/DialogService"],
-    function (DialogService) {
-
-        describe("The dialog service", function () {
-            var mockOverlayService,
-                mockQ,
-                mockLog,
-                mockOverlay,
-                mockDeferred,
-                mockDocument,
-                mockBody,
-                dialogService;
-
-            beforeEach(function () {
-                mockOverlayService = jasmine.createSpyObj(
-                    "overlayService",
-                    ["createOverlay"]
-                );
-                mockQ = jasmine.createSpyObj(
-                    "$q",
-                    ["defer"]
-                );
-                mockLog = jasmine.createSpyObj(
-                    "$log",
-                    ["warn", "info", "debug"]
-                );
-                mockOverlay = jasmine.createSpyObj(
-                    "overlay",
-                    ["dismiss"]
-                );
-                mockDeferred = jasmine.createSpyObj(
-                    "deferred",
-                    ["resolve", "reject"]
-                );
-                mockDocument = jasmine.createSpyObj(
-                    "$document",
-                    ["find"]
-                );
-                mockBody = jasmine.createSpyObj('body', ['on', 'off']);
-                mockDocument.find.and.returnValue(mockBody);
-
-                mockDeferred.promise = "mock promise";
-
-                mockQ.defer.and.returnValue(mockDeferred);
-                mockOverlayService.createOverlay.and.returnValue(mockOverlay);
-
-                dialogService = new DialogService(
-                    mockOverlayService,
-                    mockQ,
-                    mockLog,
-                    mockDocument
-                );
-            });
-
-            it("adds an overlay when user input is requested", function () {
-                dialogService.getUserInput({}, {});
-                expect(mockOverlayService.createOverlay).toHaveBeenCalled();
-            });
-
-            it("allows user input to be canceled", function () {
-                dialogService.getUserInput({}, { someKey: "some value" });
-                mockOverlayService.createOverlay.calls.mostRecent().args[1].cancel();
-                expect(mockDeferred.reject).toHaveBeenCalled();
-                expect(mockDeferred.resolve).not.toHaveBeenCalled();
-            });
-
-            it("passes back the result of user input when confirmed", function () {
-                var value = { someKey: 42 };
-                dialogService.getUserInput({}, value);
-                mockOverlayService.createOverlay.calls.mostRecent().args[1].confirm();
-                expect(mockDeferred.reject).not.toHaveBeenCalled();
-                expect(mockDeferred.resolve).toHaveBeenCalledWith(value);
-            });
-
-            it("logs a warning when a dialog is already showing", function () {
-                dialogService.getUserInput({}, {});
-                expect(mockLog.warn).not.toHaveBeenCalled();
-                dialogService.getUserInput({}, {});
-                expect(mockLog.warn).toHaveBeenCalled();
-                expect(mockDeferred.reject).toHaveBeenCalled();
-            });
-
-            it("can show multiple dialogs if prior ones are dismissed", function () {
-                dialogService.getUserInput({}, {});
-                expect(mockLog.warn).not.toHaveBeenCalled();
-                mockOverlayService.createOverlay.calls.mostRecent().args[1].confirm();
-                dialogService.getUserInput({}, {});
-                expect(mockLog.warn).not.toHaveBeenCalled();
-                expect(mockDeferred.reject).not.toHaveBeenCalled();
-            });
-
-            it("provides an options dialogs", function () {
-                var dialogModel = {};
-                dialogService.getUserChoice(dialogModel);
-                expect(mockOverlayService.createOverlay).toHaveBeenCalledWith(
-                    'overlay-options',
-                    {
-                        dialog: dialogModel,
-                        confirm: jasmine.any(Function),
-                        cancel: jasmine.any(Function)
-                    },
-                    't-dialog'
-                );
-            });
-
-            it("invokes the overlay service with the correct parameters when"
-                + " a blocking dialog is requested", function () {
-                var dialogModel = {};
-                expect(dialogService.showBlockingMessage(dialogModel)).not.toBe(false);
-                expect(mockOverlayService.createOverlay).toHaveBeenCalledWith(
-                    "overlay-blocking-message",
-                    dialogModel,
-                    "t-dialog-sm"
-                );
-            });
-
-            it("adds a keydown event listener to the body", function () {
-                dialogService.getUserInput({}, {});
-                expect(mockDocument.find).toHaveBeenCalledWith("body");
-                expect(mockBody.on).toHaveBeenCalledWith("keydown", jasmine.any(Function));
-            });
-
-            it("destroys the event listener when the dialog is cancelled", function () {
-                dialogService.getUserInput({}, {});
-                mockOverlayService.createOverlay.calls.mostRecent().args[1].cancel();
-                expect(mockBody.off).toHaveBeenCalledWith("keydown", jasmine.any(Function));
-            });
-
-            it("cancels the dialog when an escape keydown event is triggered", function () {
-                dialogService.getUserInput({}, {});
-                mockBody.on.calls.mostRecent().args[1]({
-                    keyCode: 27
-                });
-                expect(mockDeferred.reject).toHaveBeenCalled();
-                expect(mockDeferred.resolve).not.toHaveBeenCalled();
-            });
-
-            it("ignores non escape keydown events", function () {
-                dialogService.getUserInput({}, {});
-                mockBody.on.calls.mostRecent().args[1]({
-                    keyCode: 13
-                });
-                expect(mockDeferred.reject).not.toHaveBeenCalled();
-                expect(mockDeferred.resolve).not.toHaveBeenCalled();
-            });
-
-            describe("the blocking message dialog", function () {
-                var dialogModel = {};
-                var dialogHandle;
-
-                beforeEach(function () {
-                    dialogHandle = dialogService.showBlockingMessage(dialogModel);
-                });
-
-                it("returns a handle to the dialog", function () {
-                    expect(dialogHandle).not.toBe(undefined);
-                });
-
-                it("dismissing the dialog dismisses the overlay", function () {
-                    dialogHandle.dismiss();
-                    expect(mockOverlay.dismiss).toHaveBeenCalled();
-                });
-
-                it("individual dialogs can be dismissed", function () {
-                    var secondDialogHandle,
-                        secondMockOverlay;
-
-                    dialogHandle.dismiss();
-
-                    secondMockOverlay = jasmine.createSpyObj(
-                        "overlay",
-                        ["dismiss"]
-                    );
-                    mockOverlayService.createOverlay.and.returnValue(secondMockOverlay);
-                    secondDialogHandle = dialogService.showBlockingMessage(dialogModel);
-
-                    //Dismiss the first dialog. It should only dismiss if it
-                    // is active
-                    dialogHandle.dismiss();
-                    expect(secondMockOverlay.dismiss).not.toHaveBeenCalled();
-                    secondDialogHandle.dismiss();
-                    expect(secondMockOverlay.dismiss).toHaveBeenCalled();
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/dialog/test/OverlayServiceSpec.js b/platform/commonUI/dialog/test/OverlayServiceSpec.js
deleted file mode 100644
index e360011a9df..00000000000
--- a/platform/commonUI/dialog/test/OverlayServiceSpec.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * MCTIncudeSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../src/OverlayService"],
-    function (OverlayService) {
-
-        describe("The overlay service", function () {
-            var mockDocument,
-                mockCompile,
-                mockRootScope,
-                mockBody,
-                mockTemplate,
-                mockElement,
-                mockScope,
-                mockTimeout,
-                overlayService;
-
-            beforeEach(function () {
-                mockDocument = jasmine.createSpyObj("$document", ["find"]);
-                mockCompile = jasmine.createSpy("$compile");
-                mockRootScope = jasmine.createSpyObj("$rootScope", ["$new"]);
-                mockBody = jasmine.createSpyObj("body", ["append"]);
-                mockTemplate = jasmine.createSpy("template");
-                mockElement = jasmine.createSpyObj("element", ["remove"]);
-                mockScope = jasmine.createSpyObj("scope", ["$destroy"]);
-                mockTimeout = function (callback) {
-                    callback();
-                };
-
-                mockDocument.find.and.returnValue(mockBody);
-                mockCompile.and.returnValue(mockTemplate);
-                mockRootScope.$new.and.returnValue(mockScope);
-                mockTemplate.and.returnValue(mockElement);
-
-                overlayService = new OverlayService(
-                    mockDocument,
-                    mockCompile,
-                    mockRootScope,
-                    mockTimeout
-                );
-            });
-
-            it("prepends an mct-include to create overlays", function () {
-                overlayService.createOverlay("test", {});
-                expect(mockCompile).toHaveBeenCalled();
-                expect(mockCompile.calls.mostRecent().args[0].indexOf("mct-include"))
-                    .not.toEqual(-1);
-            });
-
-            it("adds the templated element to the body", function () {
-                overlayService.createOverlay("test", {});
-                expect(mockBody.append).toHaveBeenCalledWith(mockElement);
-            });
-
-            it("places the provided model/key in its template's scope", function () {
-                overlayService.createOverlay("test", { someKey: 42 });
-                expect(mockScope.overlay).toEqual({ someKey: 42 });
-                expect(mockScope.key).toEqual("test");
-
-                // Make sure this is actually what was rendered, too
-                expect(mockTemplate).toHaveBeenCalledWith(mockScope);
-            });
-
-            it("removes the prepended element on request", function () {
-                var overlay = overlayService.createOverlay("test", {});
-
-                // Verify precondition
-                expect(mockElement.remove).not.toHaveBeenCalled();
-                expect(mockScope.$destroy).not.toHaveBeenCalled();
-
-                // Dismiss the overlay
-                overlay.dismiss();
-
-                // Now it should have been removed, and the scope destroyed
-                expect(mockElement.remove).toHaveBeenCalled();
-                expect(mockScope.$destroy).toHaveBeenCalled();
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/edit/README.md b/platform/commonUI/edit/README.md
deleted file mode 100644
index ca52b78f1a6..00000000000
--- a/platform/commonUI/edit/README.md
+++ /dev/null
@@ -1,45 +0,0 @@
-Contains sources and resources associated with Edit mode.
-
-# Extensions
-
-# Toolbars
-
-Views may specify the contents of a toolbar through a `toolbar`
-property in their bundle definition. This should appear as the
-structure one would provide to the `mct-toolbar` directive,
-except additional properties are recognized to support the
-mediation between toolbar contents, user interaction, and the
-current selection (as read from the `selection` property of the
-view's scope.) These additional properties are:
-
-* `property`: Name of the property within a selected object. If,
-  for any given object in the selection, that field is a function,
-  then that function is assumed to be an accessor-mutator function
-  (that is, it will be called with no arguments to get, and with
-  an argument to set.)
-* `method`: Name of a method to invoke upon a selected object when
-  a control is activated, e.g. on a button click.
-* `exclusive`: Optional; true if this control should be considered
-  applicable only when all elements in the selection has
-  the associated property. Otherwise, only at least one member of the
-  current selection must have this property for the control to be shown.
-
-Controls in the toolbar are shown based on applicability to the
-current selection. Applicability for a given member of the selection
-is determined by the presence of absence of the named `property`
-field. As a consequence of this, if `undefined` is a valid value for
-that property, an accessor-mutator function must be used. Likewise,
-if toolbar properties are meant to be view-global (as opposed to
-per-selection) then the view must include some object to act as its
-proxy in the current selection (in addition to whatever objects the
-user will conceive of as part of the current selection), typically
-with `inclusive` set to `true`.
-
-## Selection
-
-The `selection` property of a view's scope in Edit mode will be
-initialized to an empty array. This array's contents may be modified
-to implicitly change the contents of the toolbar based on the rules
-described above. Care should be taken to modify this array in-place
-instead of shadowing it (as the selection will typically
-be a few scopes up the hierarchy from the view's actual scope.)
diff --git a/platform/commonUI/edit/bundle.js b/platform/commonUI/edit/bundle.js
deleted file mode 100644
index 0280679b6ae..00000000000
--- a/platform/commonUI/edit/bundle.js
+++ /dev/null
@@ -1,357 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/controllers/EditActionController",
-    "./src/controllers/EditPanesController",
-    "./src/controllers/EditObjectController",
-    "./src/actions/EditAndComposeAction",
-    "./src/actions/EditAction",
-    "./src/actions/PropertiesAction",
-    "./src/actions/SaveAction",
-    "./src/actions/SaveAndStopEditingAction",
-    "./src/actions/SaveAsAction",
-    "./src/actions/CancelAction",
-    "./src/policies/EditPersistableObjectsPolicy",
-    "./src/representers/EditRepresenter",
-    "./src/capabilities/EditorCapability",
-    "./src/capabilities/TransactionCapabilityDecorator",
-    "./src/services/TransactionManager",
-    "./src/services/TransactionService",
-    "./src/creation/CreateMenuController",
-    "./src/creation/LocatorController",
-    "./src/creation/CreationPolicy",
-    "./src/creation/CreateActionProvider",
-    "./src/creation/CreationService",
-    "./res/templates/create/locator.html",
-    "./res/templates/create/create-button.html",
-    "./res/templates/create/create-menu.html",
-    "./res/templates/library.html",
-    "./res/templates/edit-object.html",
-    "./res/templates/edit-action-buttons.html",
-    "./res/templates/topbar-edit.html"
-], function (
-    EditActionController,
-    EditPanesController,
-    EditObjectController,
-    EditAndComposeAction,
-    EditAction,
-    PropertiesAction,
-    SaveAction,
-    SaveAndStopEditingAction,
-    SaveAsAction,
-    CancelAction,
-    EditPersistableObjectsPolicy,
-    EditRepresenter,
-    EditorCapability,
-    TransactionCapabilityDecorator,
-    TransactionManager,
-    TransactionService,
-    CreateMenuController,
-    LocatorController,
-    CreationPolicy,
-    CreateActionProvider,
-    CreationService,
-    locatorTemplate,
-    createButtonTemplate,
-    createMenuTemplate,
-    libraryTemplate,
-    editObjectTemplate,
-    editActionButtonsTemplate,
-    topbarEditTemplate
-) {
-    return {
-        name: "platform/commonUI/edit",
-        definition: {
-            "extensions": {
-                "controllers": [
-                    {
-                        "key": "EditActionController",
-                        "implementation": EditActionController,
-                        "depends": [
-                            "$scope"
-                        ]
-                    },
-                    {
-                        "key": "EditPanesController",
-                        "implementation": EditPanesController,
-                        "depends": [
-                            "$scope"
-                        ]
-                    },
-                    {
-                        "key": "EditObjectController",
-                        "implementation": EditObjectController,
-                        "depends": [
-                            "$scope",
-                            "$location",
-                            "navigationService"
-                        ]
-                    },
-                    {
-                        "key": "CreateMenuController",
-                        "implementation": CreateMenuController,
-                        "depends": [
-                            "$scope"
-                        ]
-                    },
-                    {
-                        "key": "LocatorController",
-                        "implementation": LocatorController,
-                        "depends": [
-                            "$scope",
-                            "$timeout",
-                            "objectService"
-                        ]
-                    }
-                ],
-                "actions": [
-                    {
-                        "key": "compose",
-                        "implementation": EditAndComposeAction
-                    },
-                    {
-                        "key": "edit",
-                        "implementation": EditAction,
-                        "depends": [
-                            "$location",
-                            "navigationService",
-                            "$log"
-                        ],
-                        "description": "Edit",
-                        "category": "view-control",
-                        "cssClass": "major icon-pencil",
-                        "group": "action",
-                        "priority": 10
-                    },
-                    {
-                        "key": "properties",
-                        "category": [
-                            "contextual",
-                            "view-control"
-                        ],
-                        "implementation": PropertiesAction,
-                        "cssClass": "major icon-pencil",
-                        "name": "Edit Properties...",
-                        "group": "action",
-                        "priority": 10,
-                        "description": "Edit properties of this object.",
-                        "depends": [
-                            "dialogService"
-                        ]
-                    },
-                    {
-                        "key": "save-and-stop-editing",
-                        "category": "save",
-                        "implementation": SaveAndStopEditingAction,
-                        "name": "Save and Finish Editing",
-                        "cssClass": "icon-save labeled",
-                        "description": "Save changes made to these objects.",
-                        "depends": [
-                            "dialogService",
-                            "notificationService"
-                        ]
-                    },
-                    {
-                        "key": "save",
-                        "category": "save",
-                        "implementation": SaveAction,
-                        "name": "Save and Continue Editing",
-                        "cssClass": "icon-save labeled",
-                        "description": "Save changes made to these objects.",
-                        "depends": [
-                            "dialogService",
-                            "notificationService"
-                        ]
-                    },
-                    {
-                        "key": "save-as",
-                        "category": "save",
-                        "implementation": SaveAsAction,
-                        "name": "Save As...",
-                        "cssClass": "icon-save labeled",
-                        "description": "Save changes made to these objects.",
-                        "depends": [
-                            "$injector",
-                            "dialogService",
-                            "copyService",
-                            "notificationService",
-                            "openmct"
-                        ],
-                        "priority": "mandatory"
-                    },
-                    {
-                        "key": "cancel",
-                        "category": "conclude-editing",
-                        "implementation": CancelAction,
-                        // Because we use the name as label for edit buttons and mct-control buttons need
-                        // the label to be set to undefined in order to not apply the labeled CSS rule.
-                        "name": undefined,
-                        "cssClass": "icon-x no-label",
-                        "description": "Discard changes made to these objects.",
-                        "depends": []
-                    }
-                ],
-                "policies": [
-                    {
-                        "category": "action",
-                        "implementation": EditPersistableObjectsPolicy,
-                        "depends": ["openmct"]
-                    },
-                    {
-                        "implementation": CreationPolicy,
-                        "category": "creation"
-                    }
-                ],
-                "templates": [
-                    {
-                        "key": "edit-library",
-                        "template": libraryTemplate
-                    }
-                ],
-                "representations": [
-                    {
-                        "key": "edit-object",
-                        "template": editObjectTemplate,
-                        "uses": [
-                            "view"
-                        ],
-                        "gestures": [
-                            "drop"
-                        ]
-                    },
-                    {
-                        "key": "edit-action-buttons",
-                        "template": editActionButtonsTemplate,
-                        "uses": [
-                            "action"
-                        ]
-                    },
-                    {
-                        "key": "topbar-edit",
-                        "template": topbarEditTemplate
-                    },
-                    {
-                        "key": "create-button",
-                        "template": createButtonTemplate
-                    },
-                    {
-                        "key": "create-menu",
-                        "template": createMenuTemplate,
-                        "uses": [
-                            "action"
-                        ]
-                    }
-                ],
-                "components": [
-                    {
-                        "type": "decorator",
-                        "provides": "capabilityService",
-                        "implementation": TransactionCapabilityDecorator,
-                        "depends": [
-                            "$q",
-                            "transactionManager"
-                        ],
-                        "priority": "fallback"
-                    },
-                    {
-                        "type": "provider",
-                        "provides": "transactionService",
-                        "implementation": TransactionService,
-                        "depends": [
-                            "$q",
-                            "$log",
-                            "cacheService"
-                        ]
-                    },
-                    {
-                        "key": "CreateActionProvider",
-                        "provides": "actionService",
-                        "type": "provider",
-                        "implementation": CreateActionProvider,
-                        "depends": [
-                            "typeService",
-                            "policyService"
-                        ]
-                    },
-                    {
-                        "key": "CreationService",
-                        "provides": "creationService",
-                        "type": "provider",
-                        "implementation": CreationService,
-                        "depends": [
-                            "$q",
-                            "$log"
-                        ]
-                    }
-
-                ],
-                "representers": [
-                    {
-                        "implementation": EditRepresenter,
-                        "depends": [
-                            "$log"
-                        ]
-                    }
-                ],
-                "capabilities": [
-                    {
-                        "key": "editor",
-                        "name": "Editor Capability",
-                        "description": "Provides transactional editing capabilities",
-                        "implementation": EditorCapability,
-                        "depends": [
-                            "transactionService",
-                            "openmct"
-                        ]
-                    }
-                ],
-                "controls": [
-                    {
-                        "key": "locator",
-                        "template": locatorTemplate
-                    }
-                ],
-                "services": [
-                    {
-                        "key": "transactionManager",
-                        "implementation": TransactionManager,
-                        "depends": [
-                            "transactionService"
-                        ]
-                    }
-                ],
-                "runs": [
-                    {
-                        depends: [
-                            "toolbars[]",
-                            "openmct"
-                        ],
-                        implementation: function (toolbars, openmct) {
-                            toolbars.forEach(openmct.toolbars.addProvider, openmct.toolbars);
-                        }
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/commonUI/edit/res/templates/create/create-button.html b/platform/commonUI/edit/res/templates/create/create-button.html
deleted file mode 100644
index 5878c9bf977..00000000000
--- a/platform/commonUI/edit/res/templates/create/create-button.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<span ng-controller="ClickAwayController as createController">
-    <div class="s-menu-button major create-button" ng-click="createController.toggle()">
-		<span class="title-label">Create</span>
-    </div>
-    <div class="menu super-menu l-create-menu" ng-show="createController.isActive()">
-        <mct-representation mct-object="domainObject" key="'create-menu'">
-        </mct-representation>
-    </div>
-</span>
diff --git a/platform/commonUI/edit/res/templates/create/create-menu.html b/platform/commonUI/edit/res/templates/create/create-menu.html
deleted file mode 100644
index 2656ac4fd75..00000000000
--- a/platform/commonUI/edit/res/templates/create/create-menu.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div class="w-menu" ng-controller="CreateMenuController">
-    <div class="col menu-items">
-        <ul>
-            <li ng-repeat="createAction in createActions" ng-click="createAction.perform()">
-                <a ng-mouseover="representation.activeMetadata = createAction.getMetadata()"
-                   ng-mouseleave="representation.activeMetadata = undefined"
-                   class="menu-item-a {{ createAction.getMetadata().cssClass }}">
-                    {{createAction.getMetadata().name}}
-                </a>
-            </li>
-        </ul>
-    </div>
-    <div class="col menu-item-description">
-        <div class="desc-area icon {{ representation.activeMetadata.cssClass }}"></div>
-        <div class="w-title-desc">
-            <div class="desc-area title">
-                {{representation.activeMetadata.name}}
-            </div>
-            <div class="desc-area description">
-                {{representation.activeMetadata.description}}
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/platform/commonUI/edit/res/templates/create/locator.html b/platform/commonUI/edit/res/templates/create/locator.html
deleted file mode 100644
index 9a889d5d554..00000000000
--- a/platform/commonUI/edit/res/templates/create/locator.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div ng-controller="LocatorController" class="selector-list">
-    <div class="wrapper">
-        <mct-representation key="'tree'"
-                            mct-object="rootObject"
-                            ng-model="treeModel">
-        </mct-representation>
-    </div>
-</div>
diff --git a/platform/commonUI/edit/res/templates/edit-action-buttons.html b/platform/commonUI/edit/res/templates/edit-action-buttons.html
deleted file mode 100644
index 52fa2ec7282..00000000000
--- a/platform/commonUI/edit/res/templates/edit-action-buttons.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<span ng-controller="EditActionController">
-    <!-- If there's a single save action show a button, otherwise show a dropdown with all save actions. -->
-    <span ng-if="saveActions.length === 1">
-        <mct-control key="'button'"
-                     structure="{
-                        text: saveActions[0].getMetadata().name,
-                        click: actionPerformer(saveActions[0]),
-                        cssClass: 'major ' + saveActions[0].getMetadata().cssClass
-                     }">
-        </mct-control>
-    </span>
-
-    <span ng-if="saveActions.length > 1">
-        <mct-control key="'menu-button'"
-                     structure="{
-                        options: saveActionsAsMenuOptions,
-                        click: saveActionMenuClickHandler,
-                        cssClass: 'btn-bar right icon-save no-label major'
-                     }">
-        </mct-control>
-    </span>
-
-    <span ng-repeat="currentAction in otherEditActions">
-        <mct-control key="'button'"
-                     structure="{
-                        text: currentAction.getMetadata().name,
-                        click: actionPerformer(currentAction),
-                        cssClass: currentAction.getMetadata().cssClass
-                     }">
-        </mct-control>
-    </span>
-</span>
diff --git a/platform/commonUI/edit/res/templates/edit-object.html b/platform/commonUI/edit/res/templates/edit-object.html
deleted file mode 100644
index 6304215f0dc..00000000000
--- a/platform/commonUI/edit/res/templates/edit-object.html
+++ /dev/null
@@ -1,78 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div class="abs l-flex-col" ng-controller="EditObjectController as EditObjectController">
-    <div class="holder flex-elem l-flex-row object-browse-bar ">
-        <div class="items-select left flex-elem l-flex-row grows">
-            <mct-representation key="'back-arrow'"
-                                mct-object="domainObject"
-                                class="flex-elem l-back">
-            </mct-representation>
-            <mct-representation key="'object-header'"
-                                mct-object="domainObject"
-                                class="l-flex-row flex-elem grows object-header">
-            </mct-representation>
-        </div>
-        <div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
-            <mct-representation key="'switcher'"
-                                mct-object="domainObject"
-                                ng-model="representation">
-            </mct-representation>
-            <!-- Temporarily, on mobile, the action buttons are hidden-->
-            <mct-representation key="'action-group'"
-                                mct-object="domainObject"
-                                parameters="{ category: 'view-control' }"
-                                class="mobile-hide">
-            </mct-representation>
-        </div>
-    </div>
-    <div class="holder l-flex-col flex-elem grows l-object-wrapper">
-        <div class="holder l-flex-col flex-elem grows l-object-wrapper-inner">
-            <!-- Toolbar and Save/Cancel buttons -->
-            <div class="l-edit-controls flex-elem l-flex-row flex-align-end">
-                <mct-toolbar name="mctToolbar"
-                             structure="editToolbar.structure"
-                             ng-model="editToolbar.state"
-                             class="flex-elem grows">
-                </mct-toolbar>
-                <mct-representation key="'edit-action-buttons'"
-                                    mct-object="domainObject"
-                                    class='flex-elem conclude-editing'>
-                </mct-representation>
-
-            </div>
-            <mct-representation key="representation.selected.key"
-                                mct-object="representation.selected.key && domainObject"
-                                class="abs flex-elem grows object-holder-main scroll"
-                                mct-selectable="{
-                                    item: domainObject.useCapability('adapter'),
-                                    oldItem: domainObject
-                                }"
-                                mct-init-select>
-            </mct-representation>
-        </div><!--/ l-object-wrapper-inner -->
-    </div>
-    <mct-representation mct-object="domainObject"
-                        key="'time-conductor'"
-                        class="abs holder flex-elem flex-fixed l-flex-row l-time-conductor-holder">
-    </mct-representation>
-
-</div>
diff --git a/platform/commonUI/edit/res/templates/library.html b/platform/commonUI/edit/res/templates/library.html
deleted file mode 100644
index e39ca9ff1f5..00000000000
--- a/platform/commonUI/edit/res/templates/library.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<mct-representation key="'tree'"
-                    mct-object="parameters.domainObject"
-                    parameters="parameters">
-</mct-representation>
diff --git a/platform/commonUI/edit/res/templates/topbar-edit.html b/platform/commonUI/edit/res/templates/topbar-edit.html
deleted file mode 100644
index 0624e7550aa..00000000000
--- a/platform/commonUI/edit/res/templates/topbar-edit.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div class='top-bar edit abs'>
-    <mct-representation key="'object-header'"
-                        mct-object="domainObject"
-                        parameters="{ mode: 'Edit' }"
-                        class="l-flex-row flex-elem grows object-header">
-    </mct-representation>
-    <div class='buttons-main btn-bar buttons abs'>
-        <mct-representation key="'switcher'"
-                            mct-object="domainObject"
-                            ng-model="ngModel">
-        </mct-representation>
-
-        <mct-representation key="'edit-action-buttons'"
-                            mct-object="domainObject"
-                            class='conclude-editing'>
-        </mct-representation>
-    </div>
-</div>
diff --git a/platform/commonUI/edit/src/actions/CancelAction.js b/platform/commonUI/edit/src/actions/CancelAction.js
deleted file mode 100644
index 83b8cf99d6e..00000000000
--- a/platform/commonUI/edit/src/actions/CancelAction.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    function () {
-
-        /**
-         * The "Cancel" action; the action triggered by clicking Cancel from
-         * Edit Mode. Exits the editing user interface and invokes object
-         * capabilities to persist the changes that have been made.
-         * @constructor
-         * @memberof platform/commonUI/edit
-         * @implements {Action}
-         */
-        function CancelAction(context) {
-            this.domainObject = context.domainObject;
-        }
-
-        /**
-         * Cancel editing.
-         *
-         * @returns {Promise} a promise that will be fulfilled when
-         *          cancellation has completed
-         */
-        CancelAction.prototype.perform = function () {
-            var domainObject = this.domainObject;
-
-            function returnToBrowse() {
-                var parent;
-
-                //If the object existed already, navigate to refresh view
-                // with previous object state.
-                if (domainObject.getModel().persisted) {
-                    return domainObject.getCapability("action").perform("navigate");
-                } else {
-                    //If the object was new, and user has cancelled, then
-                    //navigate back to parent because nothing to show.
-                    return domainObject.getCapability("location").getOriginal().then(function (original) {
-                        parent = original.getCapability("context").getParent();
-
-                        return parent.getCapability("action").perform("navigate");
-                    });
-                }
-            }
-
-            function cancel() {
-                return domainObject.getCapability("editor").finish();
-            }
-
-            //Do navigation first in order to trigger unsaved changes dialog
-            return returnToBrowse()
-                .then(cancel);
-        };
-
-        /**
-         * Check if this action is applicable in a given context.
-         * This will ensure that a domain object is present in the context,
-         * and that this domain object is in Edit mode.
-         * @returns {boolean} true if applicable
-         */
-        CancelAction.appliesTo = function (context) {
-            var domainObject = (context || {}).domainObject;
-
-            return domainObject !== undefined
-                && domainObject.hasCapability('editor')
-                && domainObject.getCapability('editor').isEditContextRoot();
-        };
-
-        return CancelAction;
-    }
-);
diff --git a/platform/commonUI/edit/src/actions/EditAction.js b/platform/commonUI/edit/src/actions/EditAction.js
deleted file mode 100644
index 1a5c6204614..00000000000
--- a/platform/commonUI/edit/src/actions/EditAction.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining EditAction. Created by vwoeltje on 11/14/14.
- */
-define(
-    [],
-    function () {
-
-        // A no-op action to return in the event that the action cannot
-        // be completed.
-        var NULL_ACTION = {
-            perform: function () {
-                return undefined;
-            }
-        };
-
-        /**
-         * The Edit action is performed when the user wishes to enter Edit
-         * mode (typically triggered by the Edit button.) This will
-         * show the user interface for editing (by way of a change in
-         * route)
-         * @memberof platform/commonUI/edit
-         * @constructor
-         * @implements {Action}
-         */
-        function EditAction($location, navigationService, $log, context) {
-            var domainObject = (context || {}).domainObject;
-
-            // We cannot enter Edit mode if we have no domain object to
-            // edit, so verify that one was defined as part of the
-            // context. (This is also verified in appliesTo, so this
-            // would indicate abnormal behavior.)
-            if (!domainObject) {
-                $log.warn([
-                    "No domain object to edit; ",
-                    "edit action is not valid."
-                ].join(""));
-
-                return NULL_ACTION;
-            }
-
-            this.domainObject = domainObject;
-            this.$location = $location;
-            this.navigationService = navigationService;
-        }
-
-        /**
-         * Enter edit mode.
-         */
-        EditAction.prototype.perform = function () {
-
-            //If this is not the currently navigated object, then navigate
-            // to it.
-            if (this.navigationService.getNavigation() !== this.domainObject) {
-                this.navigationService.setNavigation(this.domainObject);
-            }
-
-            this.domainObject.useCapability("editor");
-        };
-
-        /**
-         * Check for applicability; verify that a domain object is present
-         * for this action to be performed upon.
-         * @param {ActionContext} context the context in which this action
-         *        will be performed; should contain a `domainObject` property
-         */
-        EditAction.appliesTo = function (context) {
-            var domainObject = (context || {}).domainObject,
-                type = domainObject && domainObject.getCapability('type');
-
-            // Only allow editing of types that support it and are not already
-            // being edited
-            return type && type.hasFeature('creation')
-                && domainObject.hasCapability('editor')
-                && !domainObject.getCapability('editor').isEditContextRoot();
-        };
-
-        return EditAction;
-    }
-);
diff --git a/platform/commonUI/edit/src/actions/EditAndComposeAction.js b/platform/commonUI/edit/src/actions/EditAndComposeAction.js
deleted file mode 100644
index c3ace5ea359..00000000000
--- a/platform/commonUI/edit/src/actions/EditAndComposeAction.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Add one domain object to another's composition.
-         * @constructor
-         * @memberof platform/commonUI/edit
-         * @implements {Action}
-         */
-        function EditAndComposeAction(context) {
-            this.domainObject = (context || {}).domainObject;
-            this.selectedObject = (context || {}).selectedObject;
-        }
-
-        EditAndComposeAction.prototype.perform = function () {
-            var self = this,
-                editAction = this.domainObject.getCapability('action').getActions("edit")[0];
-
-            // Link these objects
-            function doLink() {
-                var composition = self.domainObject
-                        && self.domainObject.getCapability('composition');
-
-                return composition && composition.add(self.selectedObject);
-            }
-
-            if (editAction) {
-                editAction.perform();
-            }
-
-            return this.selectedObject && doLink();
-        };
-
-        return EditAndComposeAction;
-    }
-);
diff --git a/platform/commonUI/edit/src/actions/PropertiesAction.js b/platform/commonUI/edit/src/actions/PropertiesAction.js
deleted file mode 100644
index fae55bee14b..00000000000
--- a/platform/commonUI/edit/src/actions/PropertiesAction.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Edit the properties of a domain object. Shows a dialog
- * which should display a set of properties similar to that
- * shown in the Create wizard.
- */
-define(
-    ['./PropertiesDialog'],
-    function (PropertiesDialog) {
-
-        /**
-         * Implements the "Edit Properties" action, which prompts the user
-         * to modify a domain object's properties.
-         *
-         * @param {DialogService} dialogService a service which will show the dialog
-         * @param {DomainObject} object the object to be edited
-         * @param {ActionContext} context the context in which this action is performed
-         * @memberof platform/commonUI/edit
-         * @implements {Action}
-         * @constructor
-         */
-        function PropertiesAction(dialogService, context) {
-            this.domainObject = (context || {}).domainObject;
-            this.dialogService = dialogService;
-        }
-
-        PropertiesAction.prototype.perform = function () {
-            var type = this.domainObject.getCapability('type'),
-                domainObject = this.domainObject,
-                dialogService = this.dialogService;
-
-            // Update the domain object model based on user input
-            function updateModel(userInput, dialog) {
-                return domainObject.useCapability('mutation', function (model) {
-                    dialog.updateModel(model, userInput);
-                });
-            }
-
-            function showDialog(objType) {
-                // Create a dialog object to generate the form structure, etc.
-                var dialog =
-                    new PropertiesDialog(objType, domainObject.getModel());
-
-                // Show the dialog
-                return dialogService.getUserInput(
-                    dialog.getFormStructure(),
-                    dialog.getInitialFormValue()
-                ).then(function (userInput) {
-                    // Update the model, if user input was provided
-                    return userInput && updateModel(userInput, dialog);
-                });
-            }
-
-            return type && showDialog(type);
-        };
-
-        /**
-         * Filter this action for applicability against a given context.
-         * This will ensure that a domain object is present in the
-         * context.
-         */
-        PropertiesAction.appliesTo = function (context) {
-
-            var domainObject = (context || {}).domainObject,
-                type = domainObject && domainObject.getCapability('type'),
-                creatable = type && type.hasFeature('creation');
-
-            if (domainObject && domainObject.model && domainObject.model.locked) {
-                return false;
-            }
-
-            // Only allow creatable types to be edited
-            return domainObject && creatable;
-        };
-
-        return PropertiesAction;
-    }
-
-);
-
diff --git a/platform/commonUI/edit/src/actions/PropertiesDialog.js b/platform/commonUI/edit/src/actions/PropertiesDialog.js
deleted file mode 100644
index c3e2c4bcfb3..00000000000
--- a/platform/commonUI/edit/src/actions/PropertiesDialog.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    function () {
-
-        /**
-         * Construct a new Properties dialog.
-         *
-         * @param {TypeImpl} type the type of domain object for which properties
-         *        will be specified
-         * @param {DomainObject} the object for which properties will be set
-         * @memberof platform/commonUI/edit
-         * @constructor
-         */
-        function PropertiesDialog(type, model) {
-            this.type = type;
-            this.model = model;
-            this.properties = type.getProperties();
-        }
-
-        /**
-         * Get sections provided by this dialog.
-         * @return {FormStructure} the structure of this form
-         */
-        PropertiesDialog.prototype.getFormStructure = function () {
-            return {
-                name: "Edit " + this.model.name,
-                sections: [{
-                    name: "Properties",
-                    rows: this.properties.map(function (property, index) {
-                        // Property definition is same as form row definition
-                        var row = JSON.parse(JSON.stringify(property.getDefinition()));
-                        row.key = index;
-
-                        return row;
-                    }).filter(function (row) {
-                        // Only show properties which are editable
-                        return row.control;
-                    })
-                }]
-            };
-        };
-
-        /**
-         * Get the initial state of the form shown by this dialog
-         * (based on the object model)
-         * @returns {object} initial state of the form
-         */
-        PropertiesDialog.prototype.getInitialFormValue = function () {
-            var model = this.model;
-
-            // Start with initial values for properties
-            // Note that index needs to correlate to row.key
-            // from getFormStructure
-            return this.properties.map(function (property) {
-                return property.getValue(model);
-            });
-        };
-
-        /**
-         * Update a domain object model based on the value of a form.
-         */
-        PropertiesDialog.prototype.updateModel = function (model, formValue) {
-            // Update all properties
-            this.properties.forEach(function (property, index) {
-                property.setValue(model, formValue[index]);
-            });
-        };
-
-        return PropertiesDialog;
-    }
-);
diff --git a/platform/commonUI/edit/src/actions/SaveAction.js b/platform/commonUI/edit/src/actions/SaveAction.js
deleted file mode 100644
index 6cfabe2c8e3..00000000000
--- a/platform/commonUI/edit/src/actions/SaveAction.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['./SaveInProgressDialog'],
-    function (SaveInProgressDialog) {
-
-        /**
-         * The "Save" action; it invokes object capabilities to persist
-         * the changes that have been made.
-         * @constructor
-         * @implements {Action}
-         * @memberof platform/commonUI/edit
-         */
-        function SaveAction(
-            dialogService,
-            notificationService,
-            context
-        ) {
-            this.domainObject = (context || {}).domainObject;
-            this.dialogService = dialogService;
-            this.notificationService = notificationService;
-        }
-
-        /**
-         * Save changes.
-         *
-         * @returns {Promise} a promise that will be fulfilled when
-         *          cancellation has completed
-         * @memberof platform/commonUI/edit.SaveAction#
-         */
-        SaveAction.prototype.perform = function () {
-            var self = this,
-                domainObject = this.domainObject,
-                dialog = new SaveInProgressDialog(this.dialogService);
-
-            // Invoke any save behavior introduced by the editor capability;
-            // this is introduced by EditableDomainObject which is
-            // used to insulate underlying objects from changes made
-            // during editing.
-            function doSave() {
-                return domainObject.getCapability("editor").save();
-            }
-
-            function onSuccess() {
-                dialog.hide();
-                self.notificationService.info("Save Succeeded");
-            }
-
-            function onFailure() {
-                dialog.hide();
-                self.notificationService.error("Save Failed");
-            }
-
-            dialog.show();
-
-            return doSave()
-                .then(onSuccess)
-                .catch(onFailure);
-        };
-
-        /**
-         * Check if this action is applicable in a given context.
-         * This will ensure that a domain object is present in the context,
-         * and that this domain object is in Edit mode.
-         * @returns true if applicable
-         */
-        SaveAction.appliesTo = function (context) {
-            var domainObject = (context || {}).domainObject;
-
-            return domainObject !== undefined
-                && domainObject.hasCapability('editor')
-                && domainObject.getCapability('editor').isEditContextRoot()
-                && domainObject.getModel().persisted !== undefined;
-        };
-
-        return SaveAction;
-    }
-);
diff --git a/platform/commonUI/edit/src/actions/SaveAndStopEditingAction.js b/platform/commonUI/edit/src/actions/SaveAndStopEditingAction.js
deleted file mode 100644
index 32412bcfcc3..00000000000
--- a/platform/commonUI/edit/src/actions/SaveAndStopEditingAction.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["./SaveAction"],
-    function (SaveAction) {
-
-        /**
-         * The "Save and Stop Editing" action performs a [Save action]{@link SaveAction}
-         * on the object under edit followed by exiting the edit user interface.
-         * @constructor
-         * @implements {Action}
-         * @memberof platform/commonUI/edit
-         */
-        function SaveAndStopEditingAction(
-            dialogService,
-            notificationService,
-            context
-        ) {
-            this.context = context;
-            this.domainObject = (context || {}).domainObject;
-            this.dialogService = dialogService;
-            this.notificationService = notificationService;
-        }
-
-        /**
-         * Trigger a save operation and exit edit mode.
-         *
-         * @returns {Promise} a promise that will be fulfilled when
-         *          cancellation has completed
-         * @memberof platform/commonUI/edit.SaveAndStopEditingAction#
-         */
-        SaveAndStopEditingAction.prototype.perform = function () {
-            var domainObject = this.domainObject,
-                saveAction = new SaveAction(this.dialogService, this.notificationService, this.context);
-
-            function closeEditor() {
-                return domainObject.getCapability("editor").finish();
-            }
-
-            return saveAction.perform()
-                .then(closeEditor)
-                .catch(closeEditor);
-        };
-
-        /**
-         * Check if this action is applicable in a given context.
-         * This will ensure that a domain object is present in the context,
-         * and that this domain object is in Edit mode.
-         * @returns true if applicable
-         */
-        SaveAndStopEditingAction.appliesTo = SaveAction.appliesTo;
-
-        return SaveAndStopEditingAction;
-    }
-);
diff --git a/platform/commonUI/edit/src/actions/SaveAsAction.js b/platform/commonUI/edit/src/actions/SaveAsAction.js
deleted file mode 100644
index 64cc9902004..00000000000
--- a/platform/commonUI/edit/src/actions/SaveAsAction.js
+++ /dev/null
@@ -1,220 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    '../creation/CreateWizard',
-    './SaveInProgressDialog'
-],
-function (
-    CreateWizard,
-    SaveInProgressDialog
-) {
-
-    /**
-         * The "Save" action; the action triggered by clicking Save from
-         * Edit Mode. Exits the editing user interface and invokes object
-         * capabilities to persist the changes that have been made.
-         * @constructor
-         * @implements {Action}
-         * @memberof platform/commonUI/edit
-         */
-    function SaveAsAction(
-        $injector,
-        dialogService,
-        copyService,
-        notificationService,
-        openmct,
-        context
-    ) {
-        this.domainObject = (context || {}).domainObject;
-        this.injectObjectService = function () {
-            this.objectService = $injector.get("objectService");
-        };
-
-        this.dialogService = dialogService;
-        this.copyService = copyService;
-        this.notificationService = notificationService;
-        this.openmct = openmct;
-    }
-
-    /**
-         * @private
-         */
-    SaveAsAction.prototype.createWizard = function (parent) {
-        return new CreateWizard(
-            this.domainObject,
-            parent,
-            this.openmct
-        );
-    };
-
-    /**
-         * @private
-         */
-    SaveAsAction.prototype.getObjectService = function () {
-        // Lazily acquire object service (avoids cyclical dependency)
-        if (!this.objectService) {
-            this.injectObjectService();
-        }
-
-        return this.objectService;
-    };
-
-    /**
-         * Save changes and conclude editing.
-         *
-         * @returns {Promise} a promise that will be fulfilled when
-         *          cancellation has completed
-         * @memberof platform/commonUI/edit.SaveAction#
-         */
-    SaveAsAction.prototype.perform = function () {
-        return this.save();
-    };
-
-    /**
-         * @private
-         */
-    SaveAsAction.prototype.save = function () {
-        var self = this,
-            domainObject = this.domainObject,
-            dialog = new SaveInProgressDialog(this.dialogService),
-            toUndirty = [];
-
-        function doWizardSave(parent) {
-            var wizard = self.createWizard(parent);
-
-            return self.dialogService
-                .getUserInput(wizard.getFormStructure(true),
-                    wizard.getInitialFormValue())
-                .then(wizard.populateObjectFromInput.bind(wizard), function (failureReason) {
-                    return Promise.reject("user canceled");
-                });
-        }
-
-        function showBlockingDialog(object) {
-            dialog.show();
-
-            return object;
-        }
-
-        function hideBlockingDialog(object) {
-            dialog.hide();
-
-            return object;
-        }
-
-        function fetchObject(objectId) {
-            return self.getObjectService().getObjects([objectId]).then(function (objects) {
-                return objects[objectId];
-            });
-        }
-
-        function getParent(object) {
-            return fetchObject(object.getModel().location);
-        }
-
-        function saveObject(parent) {
-            return self.openmct.editor.save().then(() => {
-                // Force mutation for search indexing
-                return parent;
-            });
-        }
-
-        function addSavedObjectToParent(parent) {
-            return parent.getCapability("composition")
-                .add(domainObject)
-                .then(function (addedObject) {
-                    return parent.getCapability("persistence").persist()
-                        .then(function () {
-                            return addedObject;
-                        });
-                });
-        }
-
-        function undirty(object) {
-            return object.getCapability('persistence').refresh();
-        }
-
-        function undirtyOriginals(object) {
-            return Promise.all(toUndirty.map(undirty))
-                .then(() => {
-                    return object;
-                });
-        }
-
-        function indexForSearch(addedObject) {
-            addedObject.useCapability('mutation', (model) => {
-                return model;
-            });
-
-            return addedObject;
-        }
-
-        function onSuccess(object) {
-            self.notificationService.info("Save Succeeded");
-
-            return object;
-        }
-
-        function onFailure(reason) {
-            hideBlockingDialog();
-            if (reason !== "user canceled") {
-                self.notificationService.error("Save Failed");
-            }
-
-            throw reason;
-        }
-
-        return getParent(domainObject)
-            .then(doWizardSave)
-            .then(showBlockingDialog)
-            .then(getParent)
-            .then(saveObject)
-            .then(addSavedObjectToParent)
-            .then(undirtyOriginals)
-            .then((addedObject) => {
-                return fetchObject(addedObject.getId());
-            })
-            .then(indexForSearch)
-            .then(hideBlockingDialog)
-            .then(onSuccess)
-            .catch(onFailure);
-    };
-
-    /**
-         * Check if this action is applicable in a given context.
-         * This will ensure that a domain object is present in the context,
-         * and that this domain object is in Edit mode.
-         * @returns true if applicable
-         */
-    SaveAsAction.appliesTo = function (context) {
-        var domainObject = (context || {}).domainObject;
-
-        return domainObject !== undefined
-                && domainObject.hasCapability('editor')
-                && domainObject.getCapability('editor').isEditContextRoot()
-                && domainObject.getModel().persisted === undefined;
-    };
-
-    return SaveAsAction;
-}
-);
diff --git a/platform/commonUI/edit/src/actions/SaveInProgressDialog.js b/platform/commonUI/edit/src/actions/SaveInProgressDialog.js
deleted file mode 100644
index ea419e70406..00000000000
--- a/platform/commonUI/edit/src/actions/SaveInProgressDialog.js
+++ /dev/null
@@ -1,24 +0,0 @@
-define([], function () {
-    function SaveInProgressDialog(dialogService) {
-        this.dialogService = dialogService;
-        this.dialog = undefined;
-    }
-
-    SaveInProgressDialog.prototype.show = function () {
-        this.dialog = this.dialogService.showBlockingMessage({
-            title: "Saving",
-            hint: "Do not navigate away from this page or close this browser tab while this message is displayed.",
-            unknownProgress: true,
-            severity: "info",
-            delay: true
-        });
-    };
-
-    SaveInProgressDialog.prototype.hide = function () {
-        if (this.dialog) {
-            this.dialog.dismiss();
-        }
-    };
-
-    return SaveInProgressDialog;
-});
diff --git a/platform/commonUI/edit/src/capabilities/EditorCapability.js b/platform/commonUI/edit/src/capabilities/EditorCapability.js
deleted file mode 100644
index 0317198d825..00000000000
--- a/platform/commonUI/edit/src/capabilities/EditorCapability.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * A capability that implements an editing 'session' for a domain
-         * object. An editing session is initiated via a call to .edit().
-         * Once initiated, any persist operations will be queued pending a
-         * subsequent call to [.save()](@link #save) or [.finish()](@link
-         * #finish).
-         * @param transactionService
-         * @param domainObject
-         * @constructor
-         */
-        function EditorCapability(
-            transactionService,
-            openmct,
-            domainObject
-        ) {
-            this.transactionService = transactionService;
-            this.openmct = openmct;
-            this.domainObject = domainObject;
-        }
-
-        /**
-         * Initiate an editing session. This will start a transaction during
-         * which any persist operations will be deferred until either save()
-         * or finish() are called.
-         */
-        EditorCapability.prototype.edit = function () {
-            console.warn('DEPRECATED: cannot edit via edit capability, use openmct.editor instead.');
-
-            if (!this.openmct.editor.isEditing()) {
-                this.openmct.editor.edit();
-                this.domainObject.getCapability('status').set('editing', true);
-            }
-        };
-
-        /**
-         * Determines whether this object, or any of its ancestors are
-         * currently being edited.
-         * @returns boolean
-         */
-        EditorCapability.prototype.inEditContext = function () {
-            return this.openmct.editor.isEditing();
-        };
-
-        /**
-         * Is this the root editing object (ie. the object that the user
-         * clicked 'edit' on)?
-         * @returns {*}
-         */
-        EditorCapability.prototype.isEditContextRoot = function () {
-            return this.openmct.editor.isEditing();
-        };
-
-        /**
-         * Save any unsaved changes from this editing session. This will
-         * end the current transaction and continue with a new one.
-         * @returns {*}
-         */
-        EditorCapability.prototype.save = function () {
-            console.warn('DEPRECATED: cannot save via edit capability, use openmct.editor instead.');
-
-            return Promise.resolve();
-        };
-
-        EditorCapability.prototype.invoke = EditorCapability.prototype.edit;
-
-        /**
-         * Finish the current editing session. This will discard any pending
-         * persist operations
-         * @returns {*}
-         */
-        EditorCapability.prototype.finish = function () {
-            console.warn('DEPRECATED: cannot finish via edit capability, use openmct.editor instead.');
-
-            return Promise.resolve();
-        };
-
-        /**
-         * @returns {boolean} true if there have been any domain model
-         * modifications since the last persist, false otherwise.
-         */
-        EditorCapability.prototype.dirty = function () {
-            return this.transactionService.size() > 0;
-        };
-
-        return EditorCapability;
-    }
-);
diff --git a/platform/commonUI/edit/src/capabilities/TransactionCapabilityDecorator.js b/platform/commonUI/edit/src/capabilities/TransactionCapabilityDecorator.js
deleted file mode 100644
index 46eb5ef97f5..00000000000
--- a/platform/commonUI/edit/src/capabilities/TransactionCapabilityDecorator.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['./TransactionalPersistenceCapability'],
-    function (TransactionalPersistenceCapability) {
-
-        /**
-         * Wraps the [PersistenceCapability]{@link PersistenceCapability} with
-         * transactional capabilities.
-         * @param $q
-         * @param transactionService
-         * @param capabilityService
-         * @see TransactionalPersistenceCapability
-         * @constructor
-         */
-        function TransactionCapabilityDecorator(
-            $q,
-            transactionService,
-            capabilityService
-        ) {
-            this.capabilityService = capabilityService;
-            this.transactionService = transactionService;
-            this.$q = $q;
-        }
-
-        /**
-         * Decorate PersistenceCapability to queue persistence calls when a
-         * transaction is in progress.
-         */
-        TransactionCapabilityDecorator.prototype.getCapabilities = function () {
-            var self = this,
-                capabilities = this.capabilityService.getCapabilities
-                    .apply(this.capabilityService, arguments),
-                persistenceCapability = capabilities.persistence;
-
-            capabilities.persistence = function (domainObject) {
-                var original =
-                    (typeof persistenceCapability === 'function')
-                        ? persistenceCapability(domainObject)
-                        : persistenceCapability;
-
-                return new TransactionalPersistenceCapability(
-                    self.$q,
-                    self.transactionService,
-                    original,
-                    domainObject
-                );
-            };
-
-            return capabilities;
-        };
-
-        return TransactionCapabilityDecorator;
-    }
-);
diff --git a/platform/commonUI/edit/src/capabilities/TransactionalPersistenceCapability.js b/platform/commonUI/edit/src/capabilities/TransactionalPersistenceCapability.js
deleted file mode 100644
index aa3d04d3ead..00000000000
--- a/platform/commonUI/edit/src/capabilities/TransactionalPersistenceCapability.js
+++ /dev/null
@@ -1,91 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Wraps persistence capability to enable transactions. Transactions
-         * will cause persist calls not to be invoked immediately, but
-         * rather queued until [EditorCapability.save()]{@link EditorCapability#save}
-         * or [EditorCapability.cancel()]{@link EditorCapability#cancel} are
-         * called.
-         * @memberof platform/commonUI/edit/capabilities
-         * @param $q
-         * @param transactionManager
-         * @param persistenceCapability
-         * @param domainObject
-         * @constructor
-         */
-        function TransactionalPersistenceCapability(
-            $q,
-            transactionManager,
-            persistenceCapability,
-            domainObject
-        ) {
-            this.transactionManager = transactionManager;
-            this.persistenceCapability = persistenceCapability;
-            this.domainObject = domainObject;
-            this.$q = $q;
-        }
-
-        /**
-         * The wrapped persist function. If a transaction is active, persist
-         * will be queued until the transaction is committed or cancelled.
-         * @returns {*}
-         */
-        TransactionalPersistenceCapability.prototype.persist = function () {
-            var wrappedPersistence = this.persistenceCapability;
-
-            if (this.transactionManager.isActive()) {
-                this.transactionManager.addToTransaction(
-                    this.domainObject.getId(),
-                    wrappedPersistence.persist.bind(wrappedPersistence),
-                    wrappedPersistence.refresh.bind(wrappedPersistence)
-                );
-
-                //Need to return a promise from this function
-                return this.$q.when(true);
-            } else {
-                return this.persistenceCapability.persist();
-            }
-        };
-
-        TransactionalPersistenceCapability.prototype.refresh = function () {
-            this.transactionManager
-                .clearTransactionsFor(this.domainObject.getId());
-
-            return this.persistenceCapability.refresh();
-        };
-
-        TransactionalPersistenceCapability.prototype.getSpace = function () {
-            return this.persistenceCapability.getSpace();
-        };
-
-        TransactionalPersistenceCapability.prototype.persisted = function () {
-            return this.persistenceCapability.persisted();
-        };
-
-        return TransactionalPersistenceCapability;
-    }
-);
diff --git a/platform/commonUI/edit/src/controllers/EditActionController.js b/platform/commonUI/edit/src/controllers/EditActionController.js
deleted file mode 100644
index f11579bbfc1..00000000000
--- a/platform/commonUI/edit/src/controllers/EditActionController.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining EditActionController. Created by vwoeltje on 11/17/14.
- */
-define(
-    [],
-    function () {
-
-        var SAVE_ACTION_CONTEXT = { category: 'save' };
-        var OTHERS_ACTION_CONTEXT = { category: 'conclude-editing' };
-
-        /**
-         * Controller which supplies action instances for Save/Cancel.
-         * @memberof platform/commonUI/edit
-         * @constructor
-         */
-        function EditActionController($scope) {
-
-            function actionToMenuOption(action) {
-                return {
-                    key: action,
-                    name: action.getMetadata().name,
-                    cssClass: action.getMetadata().cssClass
-                };
-            }
-
-            // Maintain all "conclude-editing" and "save" actions in the
-            // present context.
-            function updateActions() {
-                $scope.saveActions = $scope.action
-                    ? $scope.action.getActions(SAVE_ACTION_CONTEXT)
-                    : [];
-
-                $scope.saveActionsAsMenuOptions = $scope.saveActions.map(actionToMenuOption);
-
-                $scope.saveActionMenuClickHandler = function (clickedAction) {
-                    clickedAction.perform();
-                };
-
-                $scope.otherEditActions = $scope.action
-                    ? $scope.action.getActions(OTHERS_ACTION_CONTEXT)
-                    : [];
-
-                // Required because Angular does not allow 'bind'
-                // in expressions.
-                $scope.actionPerformer = function (action) {
-                    return action.perform.bind(action);
-                };
-            }
-
-            // Update set of actions whenever the action capability
-            // changes or becomes available.
-            $scope.$watch("action", updateActions);
-        }
-
-        return EditActionController;
-    }
-);
diff --git a/platform/commonUI/edit/src/controllers/EditObjectController.js b/platform/commonUI/edit/src/controllers/EditObjectController.js
deleted file mode 100644
index 595e008ac00..00000000000
--- a/platform/commonUI/edit/src/controllers/EditObjectController.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * This bundle implements Edit mode.
- * @namespace platform/commonUI/edit
- */
-define(
-    [],
-    function () {
-
-        function cancelEditing(domainObject) {
-            var navigatedObject = domainObject,
-                editorCapability = navigatedObject
-                    && navigatedObject.getCapability("editor");
-
-            return editorCapability
-                && editorCapability.finish();
-        }
-
-        /**
-         * Controller which is responsible for populating the scope for
-         * Edit mode
-         * @memberof platform/commonUI/edit
-         * @constructor
-         */
-        function EditObjectController($scope, $location, navigationService) {
-            this.scope = $scope;
-            var domainObject = $scope.domainObject;
-
-            var removeCheck = navigationService
-                .checkBeforeNavigation(function () {
-                    return "Continuing will cause the loss of any unsaved changes.";
-                });
-
-            $scope.$on('$destroy', function () {
-                removeCheck();
-                cancelEditing(domainObject);
-            });
-
-            function setViewForDomainObject() {
-
-                var locationViewKey = $location.search().view;
-
-                function selectViewIfMatching(view) {
-                    if (view.key === locationViewKey) {
-                        $scope.representation = $scope.representation || {};
-                        $scope.representation.selected = view;
-                    }
-                }
-
-                if (locationViewKey) {
-                    ((domainObject && domainObject.useCapability('view')) || [])
-                        .forEach(selectViewIfMatching);
-                }
-            }
-
-            setViewForDomainObject();
-
-            $scope.doAction = function (action) {
-                return $scope[action] && $scope[action]();
-            };
-        }
-
-        return EditObjectController;
-    }
-);
diff --git a/platform/commonUI/edit/src/controllers/EditPanesController.js b/platform/commonUI/edit/src/controllers/EditPanesController.js
deleted file mode 100644
index 9593250a899..00000000000
--- a/platform/commonUI/edit/src/controllers/EditPanesController.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Supports the Library and Elements panes in Edit mode.
-         * @memberof platform/commonUI/edit
-         * @constructor
-         */
-        function EditPanesController($scope) {
-            var self = this;
-
-            // Update root object based on represented object
-            function updateRoot(domainObject) {
-                var root = self.rootDomainObject,
-                    context = domainObject
-                        && domainObject.getCapability('context'),
-                    newRoot = context && context.getTrueRoot(),
-                    oldId = root && root.getId(),
-                    newId = newRoot && newRoot.getId();
-
-                // Only update if this has actually changed,
-                // to avoid excessive refreshing.
-                if (oldId !== newId) {
-                    self.rootDomainObject = newRoot;
-                }
-            }
-
-            // Update root when represented object changes
-            $scope.$watch('domainObject', updateRoot);
-        }
-
-        /**
-         * Get the root-level domain object, as reported by the
-         * represented domain object.
-         * @returns {DomainObject} the root object
-         */
-        EditPanesController.prototype.getRoot = function () {
-            return this.rootDomainObject;
-        };
-
-        return EditPanesController;
-    }
-);
diff --git a/platform/commonUI/edit/src/creation/CreateAction.js b/platform/commonUI/edit/src/creation/CreateAction.js
deleted file mode 100644
index bd8f8d89157..00000000000
--- a/platform/commonUI/edit/src/creation/CreateAction.js
+++ /dev/null
@@ -1,124 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining CreateAction. Created by vwoeltje on 11/10/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * The Create Action is performed to create new instances of
-         * domain objects of a specific type. This is the action that
-         * is performed when a user uses the Create menu.
-         *
-         * @memberof platform/commonUI/browse
-         * @implements {Action}
-         * @constructor
-         *
-         * @param {Type} type the type of domain object to create
-         * @param {DomainObject} parent the domain object that should
-         *        act as a container for the newly-created object
-         *        (note that the user will have an opportunity to
-         *        override this)
-         * @param {ActionContext} context the context in which the
-         *        action is being performed
-         */
-        function CreateAction(type, parent, context, openmct) {
-            this.metadata = {
-                key: 'create',
-                cssClass: type.getCssClass(),
-                name: type.getName(),
-                type: type.getKey(),
-                description: type.getDescription(),
-                context: context
-            };
-            this.type = type;
-            this.parent = parent;
-            this.openmct = openmct;
-        }
-
-        /**
-         * Create a new object of the given type.
-         * This will prompt for user input first.
-         */
-        CreateAction.prototype.perform = function () {
-            var newModel = this.type.getInitialModel(),
-                openmct = this.openmct,
-                newObject;
-
-            function onCancel() {
-                openmct.editor.cancel();
-            }
-
-            function isFirstViewEditable(domainObject, objectPath) {
-                let firstView = openmct.objectViews.get(domainObject, objectPath)[0];
-
-                return firstView && firstView.canEdit && firstView.canEdit(domainObject, objectPath);
-            }
-
-            function navigateAndEdit(object) {
-                let objectPath = object.getCapability('context').getPath(),
-                    url = '#/browse/' + objectPath
-                        .slice(1)
-                        .map(function (o) {
-                            return o && openmct.objects.makeKeyString(o.getId());
-                        })
-                        .join('/');
-
-                openmct.router.navigate(url);
-
-                if (isFirstViewEditable(object.useCapability('adapter'), objectPath)) {
-                    openmct.editor.edit();
-                }
-            }
-
-            newModel.type = this.type.getKey();
-            newModel.location = this.parent.getId();
-            newObject = this.parent.useCapability('instantiation', newModel);
-
-            openmct.editor.edit();
-            newObject.getCapability("action").perform("save-as").then(navigateAndEdit, onCancel);
-            // TODO: support editing object without saving object first.
-            // Which means we have to toggle createwizard afterwards.  For now,
-            // We will disable this.
-        };
-
-        /**
-         * Metadata associated with a Create action.
-         * @typedef {ActionMetadata} CreateActionMetadata
-         * @property {string} type the key for the type of domain object
-         *           to be created
-         */
-
-        /**
-         * Get metadata about this action.
-         * @returns {CreateActionMetadata} metadata about this action
-         */
-        CreateAction.prototype.getMetadata = function () {
-            return this.metadata;
-        };
-
-        return CreateAction;
-    }
-);
diff --git a/platform/commonUI/edit/src/creation/CreateActionProvider.js b/platform/commonUI/edit/src/creation/CreateActionProvider.js
deleted file mode 100644
index 005b7085df0..00000000000
--- a/platform/commonUI/edit/src/creation/CreateActionProvider.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining CreateActionProvider.js. Created by vwoeltje on 11/10/14.
- */
-define(
-    ["./CreateAction"],
-    function (CreateAction) {
-
-        /**
-         * The CreateActionProvider is an ActionProvider which introduces
-         * a Create action for each creatable domain object type.
-         *
-         * @memberof platform/commonUI/browse
-         * @constructor
-         * @implements {ActionService}
-         *
-         * @param {TypeService} typeService the type service, used to discover
-         *        available types
-         * @param {DialogService} dialogService the dialog service, used by
-         *        specific Create actions to get user input to populate the
-         *        model of the newly-created domain object.
-         * @param {CreationService} creationService the creation service (also
-         *        introduced in this bundle), responsible for handling actual
-         *        object creation.
-         */
-        function CreateActionProvider(typeService, policyService) {
-            this.typeService = typeService;
-            this.policyService = policyService;
-        }
-
-        CreateActionProvider.prototype.getActions = function (actionContext) {
-            var context = actionContext || {},
-                key = context.key,
-                destination = context.domainObject,
-                self = this;
-
-            // We only provide Create actions, and we need a
-            // domain object to serve as the container for the
-            // newly-created object (although the user may later
-            // make a different selection)
-            if (key !== 'create' || !destination) {
-                return [];
-            }
-
-            // Introduce one create action per type
-            return this.typeService.listTypes().filter(function (type) {
-                return self.policyService.allow("creation", type);
-            }).map(function (type) {
-                return new CreateAction(
-                    type,
-                    destination,
-                    context
-                );
-            });
-        };
-
-        return CreateActionProvider;
-    }
-);
diff --git a/platform/commonUI/edit/src/creation/CreateMenuController.js b/platform/commonUI/edit/src/creation/CreateMenuController.js
deleted file mode 100644
index 3fedf001934..00000000000
--- a/platform/commonUI/edit/src/creation/CreateMenuController.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining CreateMenuController. Created by vwoeltje on 11/10/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * Controller for the Create menu; maintains an up-to-date
-         * set of Create actions based on the currently-selected
-         * domain object.
-         *
-         * @memberof platform/commonUI/browse
-         * @constructor
-         */
-        function CreateMenuController($scope) {
-            // Update the set of Create actions
-            function refreshActions() {
-                $scope.createActions = $scope.action
-                    ? $scope.action.getActions('create')
-                    : [];
-            }
-
-            // Listen for new instances of the represented object's
-            // "action" capability. This is provided by the mct-representation
-            // for the Create button.
-            // A watch is needed here (instead of invoking action.getActions
-            // directly) because different action instances may be returned
-            // with each call.
-            $scope.$watch("action", refreshActions);
-        }
-
-        return CreateMenuController;
-    }
-);
diff --git a/platform/commonUI/edit/src/creation/CreateWizard.js b/platform/commonUI/edit/src/creation/CreateWizard.js
deleted file mode 100644
index 32cf99368bb..00000000000
--- a/platform/commonUI/edit/src/creation/CreateWizard.js
+++ /dev/null
@@ -1,186 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    function () {
-
-        /**
-         * A class for capturing user input data from an object creation
-         * dialog, and populating a domain object with that data.
-         *
-         * @param {DomainObject} domainObject the newly created object to
-         * populate with user input
-         * @param {DomainObject} parent the domain object to serve as
-         *        the initial parent for the created object, in the dialog
-         * @memberof platform/commonUI/browse
-         * @constructor
-         */
-        function CreateWizard(domainObject, parent, openmct) {
-            this.type = domainObject.getCapability('type');
-            this.model = domainObject.getModel();
-            this.domainObject = domainObject;
-            this.properties = this.type.getProperties();
-            this.parent = parent;
-            this.openmct = openmct;
-        }
-
-        /**
-         * Get the form model for this wizard; this is a description
-         * that will be rendered to an HTML form. See the
-         * platform/forms bundle
-         * @param {boolean} includeLocation if true, a 'location' section
-         * will be included that will allow the user to select the location
-         * of the newly created object, otherwise the .location property of
-         * the model will be used.
-         * @return {FormModel} formModel the form model to
-         *         show in the create dialog
-         */
-        CreateWizard.prototype.getFormStructure = function (includeLocation) {
-            var sections = [],
-                domainObject = this.domainObject,
-                self = this;
-
-            function validateLocation(parent) {
-                return parent && self.openmct.composition.checkPolicy(parent.useCapability('adapter'), domainObject.useCapability('adapter'));
-            }
-
-            sections.push({
-                name: "Properties",
-                rows: this.properties.map(function (property, index) {
-                    // Property definition is same as form row definition
-                    var row = JSON.parse(JSON.stringify(property.getDefinition()));
-
-                    // Use index as the key into the formValue;
-                    // this correlates to the indexing provided by
-                    // getInitialFormValue
-                    row.key = index;
-
-                    return row;
-                }).filter(function (row) {
-                    // Only show rows which have defined controls
-                    return row && row.control;
-                })
-            });
-
-            // Ensure there is always a "save in" section
-            if (includeLocation) {
-                sections.push({
-                    name: 'Location',
-                    cssClass: "grows",
-                    rows: [{
-                        name: "Save In",
-                        control: "locator",
-                        validate: validateLocation.bind(this),
-                        key: "createParent"
-                    }]
-                });
-            }
-
-            return {
-                sections: sections,
-                name: "Create a New " + this.type.getName()
-            };
-        };
-
-        /**
-         * Given some form input values and a domain object, populate the
-         * domain object used to create this wizard from the given form values.
-         * @param formValue
-         * @returns {DomainObject}
-         */
-        CreateWizard.prototype.populateObjectFromInput = function (formValue) {
-            var parent = this.getLocation(formValue),
-                formModel = this.createModel(formValue);
-
-            formModel.location = parent.getId();
-
-            this.updateNamespaceFromParent(parent);
-
-            this.domainObject.useCapability("mutation", function () {
-                return formModel;
-            });
-
-            return this.domainObject;
-        };
-
-        /** @private */
-        CreateWizard.prototype.updateNamespaceFromParent = function (parent) {
-            let childIdentifier = this.domainObject.useCapability('adapter').identifier;
-            let parentIdentifier = parent.useCapability('adapter').identifier;
-            childIdentifier.namespace = parentIdentifier.namespace;
-            this.domainObject.id = this.openmct.objects.makeKeyString(childIdentifier);
-        };
-
-        /**
-         * Get the initial value for the form being described.
-         * This will include the values for all properties described
-         * in the structure.
-         *
-         * @returns {object} the initial value of the form
-         */
-        CreateWizard.prototype.getInitialFormValue = function () {
-            // Start with initial values for properties
-            var model = this.model,
-                formValue = this.properties.map(function (property) {
-                    return property.getValue(model);
-                });
-
-            // Include the createParent
-            formValue.createParent = this.parent;
-
-            return formValue;
-        };
-
-        /**
-         * Based on a populated form, get the domain object which
-         * should be used as a parent for the newly-created object.
-         * @private
-         * @return {DomainObject}
-         */
-        CreateWizard.prototype.getLocation = function (formValue) {
-            return formValue.createParent || this.parent;
-        };
-
-        /**
-         * Create the domain object model for a newly-created object,
-         * based on user input read from a formModel.
-         * @private
-         * @return {object} the domain object model
-         */
-        CreateWizard.prototype.createModel = function (formValue) {
-            // Clone
-            var newModel = JSON.parse(JSON.stringify(this.model));
-
-            // Always use the type from the type definition
-            newModel.type = this.type.getKey();
-
-            // Update all properties
-            this.properties.forEach(function (property, index) {
-                property.setValue(newModel, formValue[index]);
-            });
-
-            return newModel;
-        };
-
-        return CreateWizard;
-    }
-);
diff --git a/platform/commonUI/edit/src/creation/CreationPolicy.js b/platform/commonUI/edit/src/creation/CreationPolicy.js
deleted file mode 100644
index 5a4895f5ac4..00000000000
--- a/platform/commonUI/edit/src/creation/CreationPolicy.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * A policy for determining whether objects of a given type can be
-         * created.
-         * @constructor
-         * @implements {Policy}
-         * @memberof platform/commonUI/browse
-         */
-        function CreationPolicy() {
-        }
-
-        CreationPolicy.prototype.allow = function (type) {
-            return type.hasFeature("creation");
-        };
-
-        return CreationPolicy;
-    }
-);
diff --git a/platform/commonUI/edit/src/creation/CreationService.js b/platform/commonUI/edit/src/creation/CreationService.js
deleted file mode 100644
index 86d4c6df829..00000000000
--- a/platform/commonUI/edit/src/creation/CreationService.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining CreateService. Created by vwoeltje on 11/10/14.
- */
-define(
-    [],
-    function () {
-
-        var NON_PERSISTENT_WARNING =
-                "Tried to create an object in non-persistent container.";
-
-        /**
-         * The creation service is responsible for instantiating and
-         * persisting new domain objects. Handles all actual object
-         * mutation and persistence associated with domain object
-         * creation.
-         * @memberof platform/commonUI/browse
-         * @constructor
-         */
-        function CreationService($q, $log) {
-            this.$q = $q;
-            this.$log = $log;
-        }
-
-        /**
-         * Create a new domain object with the provided model, as
-         * a member of the provided parent domain object's composition.
-         * This parent will additionally determine which persistence
-         * space an object is created within (as it is possible to
-         * have multiple persistence spaces attached.)
-         *
-         * Note that the model passed in for object creation may be
-         * modified to attach additional initial properties associated
-         * with domain object creation.
-         *
-         * @param {object} model the model for the newly-created
-         *        domain object
-         * @param {DomainObject} parent the domain object which
-         *        should contain the newly-created domain object
-         *        in its composition
-         * @return {Promise} a promise that will resolve when the domain
-         *         object has been created
-         */
-        CreationService.prototype.createObject = function (model, parent) {
-            var persistence = parent.getCapability("persistence"),
-                newObject = parent.useCapability("instantiation", model),
-                newObjectPersistence = newObject.getCapability("persistence"),
-                self = this;
-
-            // Add the newly-created object's id to the parent's
-            // composition, so that it will subsequently appear
-            // as a child contained by that parent.
-            function addToComposition() {
-                var compositionCapability = parent.getCapability('composition'),
-                    addResult = compositionCapability
-                        && compositionCapability.add(newObject);
-
-                return self.$q.when(addResult).then(function (result) {
-                    if (!result) {
-                        self.$log.error("Could not modify " + parent.getId());
-
-                        return undefined;
-                    }
-
-                    return persistence.persist().then(function () {
-                        return result;
-                    });
-                });
-            }
-
-            // We need the parent's persistence capability to determine
-            // what space to create the new object's model in.
-            if (!persistence || !newObjectPersistence) {
-                self.$log.warn(NON_PERSISTENT_WARNING);
-
-                return self.$q.reject(new Error(NON_PERSISTENT_WARNING));
-            }
-
-            // Persist the new object, then add it to composition.
-            return newObjectPersistence.persist().then(addToComposition);
-        };
-
-        return CreationService;
-    }
-);
-
diff --git a/platform/commonUI/edit/src/creation/LocatorController.js b/platform/commonUI/edit/src/creation/LocatorController.js
deleted file mode 100644
index 57ea8f7864a..00000000000
--- a/platform/commonUI/edit/src/creation/LocatorController.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Controller for the "locator" control, which provides the
-         * user with the ability to select a domain object as the
-         * destination for a newly-created object in the Create menu.
-         * @memberof platform/commonUI/browse
-         * @constructor
-         */
-        function LocatorController($scope, $timeout, objectService) {
-            // Populate values needed by the locator control. These are:
-            // * rootObject: The top-level object, since we want to show
-            //               the full tree
-            // * treeModel: The model for the embedded tree representation,
-            //              used for bi-directional object selection.
-            function setLocatingObject(domainObject, priorObject) {
-                var context = domainObject
-                    && domainObject.getCapability("context"),
-                    contextRoot = context && context.getRoot();
-
-                if (contextRoot && contextRoot !== $scope.rootObject) {
-                    $scope.rootObject = undefined;
-                    // Update the displayed tree on a timeout to avoid
-                    // an infinite digest exception.
-                    $timeout(function () {
-                        $scope.rootObject =
-                            (context && context.getRoot()) || $scope.rootObject;
-                    }, 0);
-                } else if (!contextRoot && !$scope.rootObject) {
-                    // Update the displayed tree on a timeout to avoid
-                    // an infinite digest exception.
-                    objectService.getObjects(['ROOT'])
-                        .then(function (objects) {
-                            $timeout(function () {
-                                $scope.rootObject = objects.ROOT;
-                            }, 0);
-                        });
-                }
-
-                $scope.treeModel.selectedObject = domainObject;
-                $scope.ngModel[$scope.field] = domainObject;
-
-                // Restrict which locations can be selected
-                if (domainObject
-                        && $scope.structure
-                            && $scope.structure.validate) {
-                    if (!$scope.structure.validate(domainObject)) {
-                        setLocatingObject(priorObject, undefined);
-
-                        return;
-                    }
-                }
-
-                // Set validity
-                if ($scope.ngModelController) {
-                    $scope.ngModelController.$setValidity(
-                        'composition',
-                        Boolean($scope.treeModel.selectedObject)
-                    );
-                }
-            }
-
-            // Initial state for the tree's model
-            $scope.treeModel =
-                { selectedObject: $scope.ngModel[$scope.field] };
-
-            // Watch for changes from the tree
-            $scope.$watch("treeModel.selectedObject", setLocatingObject);
-        }
-
-        return LocatorController;
-    }
-);
-
diff --git a/platform/commonUI/edit/src/policies/EditPersistableObjectsPolicy.js b/platform/commonUI/edit/src/policies/EditPersistableObjectsPolicy.js
deleted file mode 100644
index 5cb7f76df6a..00000000000
--- a/platform/commonUI/edit/src/policies/EditPersistableObjectsPolicy.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['objectUtils'],
-    function (objectUtils) {
-
-        /**
-         * Policy that prevents editing of any object from a provider that does not
-         * support persistence (ie. the 'save' operation). Editing is prevented
-         * as a subsequent save would fail, causing the loss of a user's changes.
-         * @param openmct
-         * @constructor
-         */
-        function EditPersistableObjectsPolicy(openmct) {
-            this.openmct = openmct;
-        }
-
-        EditPersistableObjectsPolicy.prototype.allow = function (action, context) {
-            var domainObject = context.domainObject;
-            var key = action.getMetadata().key;
-            var category = (context || {}).category;
-
-            // Use category to selectively block edit from the view. Edit action
-            // is also invoked during the create process which should be allowed,
-            // because it may be saved elsewhere
-            if ((key === 'edit' && category === 'view-control') || key === 'properties') {
-                let identifier = this.openmct.objects.parseKeyString(domainObject.getId());
-
-                return this.openmct.objects.isPersistable(identifier);
-            }
-
-            return true;
-        };
-
-        return EditPersistableObjectsPolicy;
-    }
-);
diff --git a/platform/commonUI/edit/src/representers/EditRepresenter.js b/platform/commonUI/edit/src/representers/EditRepresenter.js
deleted file mode 100644
index d39ed0d8975..00000000000
--- a/platform/commonUI/edit/src/representers/EditRepresenter.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * The EditRepresenter is responsible for implementing
-         * representation-level behavior relevant to Edit mode.
-         * Specifically, this listens for changes to view configuration
-         * or to domain object models, and triggers persistence when
-         * these are detected.
-         *
-         * This is exposed as an extension of category `representers`,
-         * which mct-representation will utilize to add additional
-         * behavior to each representation.
-         *
-         * This will be called once per mct-representation directive,
-         * and may be reused for different domain objects and/or
-         * representations resulting from changes there.
-         *
-         * @memberof platform/commonUI/edit
-         * @implements {Representer}
-         * @constructor
-         */
-        function EditRepresenter($log, $scope) {
-            this.$log = $log;
-            this.$scope = $scope;
-
-            this.$scope.commit = this.commit.bind(this);
-        }
-
-        /**
-         * Commit any changes made to the in-scope model to the domain object.
-         * Also commits any changes made to $scope.configuration to the proper
-         * configuration value for the current representation.
-         *
-         * @param {String} message a message to log with the commit message.
-         */
-        EditRepresenter.prototype.commit = function (message) {
-            var model = this.$scope.model,
-                configuration = this.$scope.configuration,
-                domainObject = this.domainObject;
-
-            this.$log.debug([
-                "Committing ",
-                domainObject && domainObject.getModel().name,
-                "(" + (domainObject && domainObject.getId()) + "):",
-                message
-            ].join(" "));
-
-            if (this.domainObject) {
-                if (this.key && configuration) {
-                    model.configuration = model.configuration || {};
-                    model.configuration[this.key] = configuration;
-                }
-
-                domainObject.useCapability('mutation', function () {
-                    return model;
-                });
-            }
-        };
-
-        // Handle a specific representation of a specific domain object
-        EditRepresenter.prototype.represent = function (representation, representedObject) {
-            this.domainObject = representedObject;
-            if (representation) {
-                this.key = representation.key;
-            } else {
-                delete this.key;
-            }
-        };
-
-        // Respond to the destruction of the current representation.
-        EditRepresenter.prototype.destroy = function () {};
-
-        return EditRepresenter;
-    }
-);
diff --git a/platform/commonUI/edit/src/services/NestedTransaction.js b/platform/commonUI/edit/src/services/NestedTransaction.js
deleted file mode 100644
index 91d4371efe9..00000000000
--- a/platform/commonUI/edit/src/services/NestedTransaction.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-define(['./Transaction'], function (Transaction) {
-    /**
-     * A nested transaction is a transaction which takes place in the context
-     * of a larger parent transaction. It becomes part of the parent
-     * transaction when (and only when) committed.
-     * @param parent
-     * @constructor
-     * @extends {platform/commonUI/edit/services.Transaction}
-     * @memberof platform/commonUI/edit/services
-     */
-    function NestedTransaction(parent) {
-        this.parent = parent;
-        Transaction.call(this, parent.$log);
-    }
-
-    NestedTransaction.prototype = Object.create(Transaction.prototype);
-
-    NestedTransaction.prototype.commit = function () {
-        this.parent.add(
-            Transaction.prototype.commit.bind(this),
-            Transaction.prototype.cancel.bind(this)
-        );
-
-        return Promise.resolve(true);
-    };
-
-    return NestedTransaction;
-});
diff --git a/platform/commonUI/edit/src/services/Transaction.js b/platform/commonUI/edit/src/services/Transaction.js
deleted file mode 100644
index b4442147b9b..00000000000
--- a/platform/commonUI/edit/src/services/Transaction.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-define([], function () {
-    /**
-     * A Transaction represents a set of changes that are intended to
-     * be kept or discarded as a unit.
-     * @param $log Angular's `$log` service, for logging messages
-     * @constructor
-     * @memberof platform/commonUI/edit/services
-     */
-    function Transaction($log) {
-        this.$log = $log;
-        this.callbacks = [];
-    }
-
-    /**
-     * Add a change to the current transaction, as expressed by functions
-     * to either keep or discard the change.
-     * @param {Function} commit called when the transaction is committed
-     * @param {Function} cancel called when the transaction is cancelled
-     * @returns {Function) a function which may be called to remove this
-     *          pair of callbacks from the transaction
-     */
-    Transaction.prototype.add = function (commit, cancel) {
-        var callback = {
-            commit: commit,
-            cancel: cancel
-        };
-        this.callbacks.push(callback);
-
-        return function () {
-            this.callbacks = this.callbacks.filter(function (c) {
-                return c !== callback;
-            });
-        }.bind(this);
-    };
-
-    /**
-     * Get the number of changes in the current transaction.
-     * @returns {number} the size of the current transaction
-     */
-    Transaction.prototype.size = function () {
-        return this.callbacks.length;
-    };
-
-    /**
-     * Keep all changes associated with this transaction.
-     * @method {platform/commonUI/edit/services.Transaction#commit}
-     * @returns {Promise} a promise which will resolve when all callbacks
-     *          have been handled.
-     */
-
-    /**
-     * Discard all changes associated with this transaction.
-     * @method {platform/commonUI/edit/services.Transaction#cancel}
-     * @returns {Promise} a promise which will resolve when all callbacks
-     *          have been handled.
-     */
-
-    ['commit', 'cancel'].forEach(function (method) {
-        Transaction.prototype[method] = function () {
-            var promises = [];
-            var callback;
-
-            while (this.callbacks.length > 0) {
-                callback = this.callbacks.shift();
-                try {
-                    promises.push(callback[method]());
-                } catch (e) {
-                    this.$log
-                        .error("Error trying to " + method + " transaction.");
-                }
-            }
-
-            return Promise.all(promises);
-        };
-    });
-
-    return Transaction;
-});
diff --git a/platform/commonUI/edit/src/services/TransactionManager.js b/platform/commonUI/edit/src/services/TransactionManager.js
deleted file mode 100644
index 52887a83cd4..00000000000
--- a/platform/commonUI/edit/src/services/TransactionManager.js
+++ /dev/null
@@ -1,119 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([], function () {
-    /**
-     * Manages transactions to support the TransactionalPersistenceCapability.
-     * This assumes that all commit/cancel callbacks for a given domain
-     * object are equivalent, and only need to be added once to any active
-     * transaction. Violating this assumption may cause unexpected behavior.
-     * @constructor
-     * @memberof platform/commonUI/edit
-     */
-    function TransactionManager(transactionService) {
-        this.transactionService = transactionService;
-        this.clearTransactionFns = {};
-    }
-
-    /**
-     * Check if a transaction is currently active.
-     * @returns {boolean} true if there is a transaction active
-     */
-    TransactionManager.prototype.isActive = function () {
-        return this.transactionService.isActive();
-    };
-
-    /**
-     * Check if callbacks associated with this domain object have already
-     * been added to the active transaction.
-     * @private
-     * @param {string} id the identifier of the domain object to check
-     * @returns {boolean} true if callbacks have been added
-     */
-    TransactionManager.prototype.isScheduled = function (id) {
-        return Boolean(this.clearTransactionFns[id]);
-    };
-
-    /**
-     * Add callbacks associated with this domain object to the active
-     * transaction. Both callbacks are expected to return promises that
-     * resolve when their associated behavior is complete.
-     *
-     * If callbacks associated with this domain object have already been
-     * added to the active transaction, this call will be ignored.
-     *
-     * @param {string} id the identifier of the associated domain object
-     * @param {Function} onCommit behavior to invoke when committing transaction
-     * @param {Function} onCancel behavior to invoke when cancelling transaction
-     */
-    TransactionManager.prototype.addToTransaction = function (
-        id,
-        onCommit,
-        onCancel
-    ) {
-        var release = this.releaseClearFn.bind(this, id);
-
-        function chain(promiseFn, nextFn) {
-            return function () {
-                return promiseFn().then(nextFn);
-            };
-        }
-
-        /**
-         * Clear any existing persistence calls for object with given ID. This ensures only the most recent persistence
-         * call is executed. This should prevent stale objects being persisted and overwriting fresh ones.
-         */
-        if (this.isScheduled(id)) {
-            this.clearTransactionsFor(id);
-        }
-
-        this.clearTransactionFns[id] =
-            this.transactionService.addToTransaction(
-                chain(onCommit, release),
-                chain(onCancel, release)
-            );
-    };
-
-    /**
-     * Remove any callbacks associated with this domain object from the
-     * active transaction.
-     * @param {string} id the identifier for the domain object
-     */
-    TransactionManager.prototype.clearTransactionsFor = function (id) {
-        if (this.isScheduled(id)) {
-            this.clearTransactionFns[id]();
-            this.releaseClearFn(id);
-        }
-    };
-
-    /**
-     * Release the cached "remove from transaction" function that has been
-     * stored in association with this domain object.
-     * @param {string} id the identifier for the domain object
-     * @private
-     */
-    TransactionManager.prototype.releaseClearFn = function (id) {
-        delete this.clearTransactionFns[id];
-    };
-
-    return TransactionManager;
-});
diff --git a/platform/commonUI/edit/src/services/TransactionService.js b/platform/commonUI/edit/src/services/TransactionService.js
deleted file mode 100644
index dbf7abaceb8..00000000000
--- a/platform/commonUI/edit/src/services/TransactionService.js
+++ /dev/null
@@ -1,138 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-define(
-    ['./Transaction', './NestedTransaction'],
-    function (Transaction, NestedTransaction) {
-        /**
-         * Implements an application-wide transaction state. Once a
-         * transaction is started, calls to
-         * [PersistenceCapability.persist()]{@link PersistenceCapability#persist}
-         * will be deferred until a subsequent call to
-         * [TransactionService.commit]{@link TransactionService#commit} is made.
-         *
-         * @memberof platform/commonUI/edit/services
-         * @param $q
-         * @constructor
-         */
-        function TransactionService($q, $log, cacheService) {
-            this.$q = $q;
-            this.$log = $log;
-            this.cacheService = cacheService;
-            this.transactions = [];
-        }
-
-        /**
-         * Starts a transaction. While a transaction is active all calls to
-         * [PersistenceCapability.persist](@link PersistenceCapability#persist)
-         * will be queued until [commit]{@link #commit} or [cancel]{@link
-         * #cancel} are called
-         */
-        TransactionService.prototype.startTransaction = function () {
-            var transaction = this.isActive()
-                ? new NestedTransaction(this.transactions[0])
-                : new Transaction(this.$log);
-
-            this.transactions.push(transaction);
-        };
-
-        /**
-         * @returns {boolean} If true, indicates that a transaction is in progress
-         */
-        TransactionService.prototype.isActive = function () {
-            return this.transactions.length > 0;
-        };
-
-        /**
-         * Adds provided functions to a queue to be called on
-         * [.commit()]{@link #commit} or
-         * [.cancel()]{@link #commit}
-         * @param onCommit A function to call on commit
-         * @param onCancel A function to call on cancel
-         */
-        TransactionService.prototype.addToTransaction = function (onCommit, onCancel) {
-            if (this.isActive()) {
-                return this.activeTransaction().add(onCommit, onCancel);
-            } else {
-                //Log error because this is a programming error if it occurs.
-                this.$log.error("No transaction in progress");
-            }
-        };
-
-        /**
-         * Get the transaction at the top of the stack.
-         * @private
-         */
-        TransactionService.prototype.activeTransaction = function () {
-            return this.transactions[this.transactions.length - 1];
-        };
-
-        /**
-         * All persist calls deferred since the beginning of the transaction
-         * will be committed.  If this is the last transaction, clears the
-         * cache.
-         *
-         * @returns {Promise} resolved when all persist operations have
-         * completed. Will reject if any commit operations fail
-         */
-        TransactionService.prototype.commit = function () {
-            var transaction = this.transactions.pop();
-            if (!transaction) {
-                return Promise.reject();
-            }
-
-            if (!this.isActive()) {
-                return transaction.commit()
-                    .then(function (r) {
-                        this.cacheService.flush();
-
-                        return r;
-                    }.bind(this));
-            }
-
-            return transaction.commit();
-        };
-
-        /**
-         * Cancel the current transaction, replacing any dirty objects from
-         * persistence. Not a true rollback, as it cannot be used to undo any
-         * persist calls that were successful in the event one of a batch of
-         * persists failing.
-         *
-         * @returns {*}
-         */
-        TransactionService.prototype.cancel = function () {
-            var transaction = this.transactions.pop();
-
-            return transaction ? transaction.cancel() : Promise.reject();
-        };
-
-        /**
-         * Get the size (the number of commit/cancel callbacks) of
-         * the active transaction.
-         * @returns {number} size of the active transaction
-         */
-        TransactionService.prototype.size = function () {
-            return this.isActive() ? this.activeTransaction().size() : 0;
-        };
-
-        return TransactionService;
-    });
diff --git a/platform/commonUI/edit/test/actions/CancelActionSpec.js b/platform/commonUI/edit/test/actions/CancelActionSpec.js
deleted file mode 100644
index 54073b6036d..00000000000
--- a/platform/commonUI/edit/test/actions/CancelActionSpec.js
+++ /dev/null
@@ -1,155 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/actions/CancelAction"],
-    function (CancelAction) {
-
-        describe("The Cancel action", function () {
-            var mockDomainObject,
-                mockParentObject,
-                capabilities = {},
-                parentCapabilities = {},
-                actionContext,
-                action;
-
-            function mockPromise(value) {
-                return {
-                    then: function (callback) {
-                        return mockPromise(callback(value));
-                    }
-                };
-            }
-
-            beforeEach(function () {
-                mockDomainObject = jasmine.createSpyObj(
-                    "domainObject",
-                    [
-                        "getCapability",
-                        "hasCapability",
-                        "getModel"
-                    ]
-                );
-                mockDomainObject.getModel.and.returnValue({});
-
-                mockParentObject = jasmine.createSpyObj(
-                    "parentObject",
-                    [
-                        "getCapability"
-                    ]
-                );
-                mockParentObject.getCapability.and.callFake(function (name) {
-                    return parentCapabilities[name];
-                });
-
-                capabilities.editor = jasmine.createSpyObj(
-                    "editor",
-                    ["save", "finish", "isEditContextRoot"]
-                );
-                capabilities.action = jasmine.createSpyObj(
-                    "actionCapability",
-                    [
-                        "perform"
-                    ]
-                );
-                capabilities.location = jasmine.createSpyObj(
-                    "locationCapability",
-                    [
-                        "getOriginal"
-                    ]
-                );
-                capabilities.location.getOriginal.and.returnValue(mockPromise(mockDomainObject));
-                capabilities.context = jasmine.createSpyObj(
-                    "contextCapability",
-                    [
-                        "getParent"
-                    ]
-                );
-                capabilities.context.getParent.and.returnValue(mockParentObject);
-
-                parentCapabilities.action = jasmine.createSpyObj(
-                    "actionCapability",
-                    [
-                        "perform"
-                    ]
-                );
-
-                actionContext = {
-                    domainObject: mockDomainObject
-                };
-
-                mockDomainObject.getCapability.and.callFake(function (name) {
-                    return capabilities[name];
-                });
-
-                mockDomainObject.hasCapability.and.callFake(function (name) {
-                    return Boolean(capabilities[name]);
-                });
-
-                capabilities.editor.finish.and.returnValue(mockPromise(true));
-
-                action = new CancelAction(actionContext);
-
-            });
-
-            it("only applies to domain object that is being edited", function () {
-                capabilities.editor.isEditContextRoot.and.returnValue(true);
-                expect(CancelAction.appliesTo(actionContext)).toBeTruthy();
-                expect(mockDomainObject.hasCapability).toHaveBeenCalledWith("editor");
-
-                capabilities.editor.isEditContextRoot.and.returnValue(false);
-                expect(CancelAction.appliesTo(actionContext)).toBeFalsy();
-
-                mockDomainObject.hasCapability.and.returnValue(false);
-                expect(CancelAction.appliesTo(actionContext)).toBeFalsy();
-            });
-
-            it("invokes the editor capability's cancel functionality when"
-                + " performed", function () {
-                mockDomainObject.getModel.and.returnValue({persisted: 1});
-                //Return true from navigate action
-                capabilities.action.perform.and.returnValue(mockPromise(true));
-                action.perform();
-
-                // Should have called finish
-                expect(capabilities.editor.finish).toHaveBeenCalled();
-
-                // Definitely shouldn't call save!
-                expect(capabilities.editor.save).not.toHaveBeenCalled();
-            });
-
-            it("navigates to object if existing using navigate action", function () {
-                mockDomainObject.getModel.and.returnValue({persisted: 1});
-                //Return true from navigate action
-                capabilities.action.perform.and.returnValue(mockPromise(true));
-                action.perform();
-                expect(capabilities.action.perform).toHaveBeenCalledWith("navigate");
-            });
-
-            it("navigates to parent if new using navigate action", function () {
-                mockDomainObject.getModel.and.returnValue({persisted: undefined});
-                action.perform();
-                expect(parentCapabilities.action.perform).toHaveBeenCalledWith("navigate");
-            });
-        });
-    }
-);
diff --git a/platform/commonUI/edit/test/actions/EditActionSpec.js b/platform/commonUI/edit/test/actions/EditActionSpec.js
deleted file mode 100644
index ece393a9243..00000000000
--- a/platform/commonUI/edit/test/actions/EditActionSpec.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/actions/EditAction"],
-    function (EditAction) {
-
-        describe("The Edit action", function () {
-            var mockLocation,
-                mockNavigationService,
-                mockLog,
-                mockDomainObject,
-                mockType,
-                mockEditor,
-                actionContext,
-                capabilities,
-                action;
-
-            beforeEach(function () {
-                mockLocation = jasmine.createSpyObj(
-                    "$location",
-                    ["path"]
-                );
-                mockNavigationService = jasmine.createSpyObj(
-                    "navigationService",
-                    ["setNavigation", "getNavigation", "addListener", "removeListener"]
-                );
-                mockLog = jasmine.createSpyObj(
-                    "$log",
-                    ["error", "warn", "info", "debug"]
-                );
-                mockDomainObject = jasmine.createSpyObj(
-                    "domainObject",
-                    ["getId", "getModel", "getCapability", "hasCapability", "useCapability"]
-                );
-                mockType = jasmine.createSpyObj(
-                    "type",
-                    ["hasFeature"]
-                );
-                mockEditor = jasmine.createSpyObj(
-                    "editorCapability",
-                    ["edit", "isEditContextRoot"]
-                );
-
-                capabilities = {
-                    type: mockType,
-                    editor: mockEditor
-                };
-
-                mockDomainObject.getCapability.and.callFake(function (name) {
-                    return capabilities[name];
-                });
-                mockDomainObject.hasCapability.and.returnValue(true);
-                mockType.hasFeature.and.returnValue(true);
-
-                actionContext = { domainObject: mockDomainObject };
-
-                action = new EditAction(
-                    mockLocation,
-                    mockNavigationService,
-                    mockLog,
-                    actionContext
-                );
-            });
-
-            it("is only applicable when an editable domain object is present", function () {
-                expect(EditAction.appliesTo(actionContext)).toBeTruthy();
-                expect(EditAction.appliesTo({})).toBeFalsy();
-
-                expect(mockDomainObject.hasCapability).toHaveBeenCalledWith('editor');
-                // Should have checked for creatability
-                expect(mockType.hasFeature).toHaveBeenCalledWith('creation');
-            });
-
-            it("is only applicable to objects not already in edit mode", function () {
-                mockEditor.isEditContextRoot.and.returnValue(false);
-                expect(EditAction.appliesTo(actionContext)).toBe(true);
-                mockEditor.isEditContextRoot.and.returnValue(true);
-                expect(EditAction.appliesTo(actionContext)).toBe(false);
-            });
-
-            it ("invokes the Edit capability on the object", function () {
-                action.perform();
-                expect(mockDomainObject.useCapability).toHaveBeenCalledWith("editor");
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/edit/test/actions/EditAndComposeActionSpec.js b/platform/commonUI/edit/test/actions/EditAndComposeActionSpec.js
deleted file mode 100644
index 049e3db26d4..00000000000
--- a/platform/commonUI/edit/test/actions/EditAndComposeActionSpec.js
+++ /dev/null
@@ -1,119 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/actions/EditAndComposeAction"],
-    function (EditAndComposeAction) {
-
-        describe("The Link action", function () {
-            var mockDomainObject,
-                mockParent,
-                mockContext,
-                mockComposition,
-                mockActionCapability,
-                mockEditAction,
-                mockType,
-                actionContext,
-                model,
-                capabilities,
-                action;
-
-            function mockPromise(value) {
-                return {
-                    then: function (callback) {
-                        return mockPromise(callback(value));
-                    }
-                };
-            }
-
-            beforeEach(function () {
-                mockDomainObject = jasmine.createSpyObj(
-                    "domainObject",
-                    ["getId", "getCapability"]
-                );
-                mockParent = {
-                    getModel: function () {
-                        return model;
-                    },
-                    getCapability: function (k) {
-                        return capabilities[k];
-                    },
-                    useCapability: function (k, v) {
-                        return capabilities[k].invoke(v);
-                    }
-                };
-                mockContext = jasmine.createSpyObj("context", ["getParent"]);
-                mockComposition = jasmine.createSpyObj("composition", ["invoke", "add"]);
-                mockType = jasmine.createSpyObj("type", ["hasFeature", "getKey"]);
-                mockActionCapability = jasmine.createSpyObj("actionCapability", ["getActions"]);
-                mockEditAction = jasmine.createSpyObj("editAction", ["perform"]);
-
-                mockDomainObject.getId.and.returnValue("test");
-                mockDomainObject.getCapability.and.returnValue(mockContext);
-                mockContext.getParent.and.returnValue(mockParent);
-                mockType.hasFeature.and.returnValue(true);
-                mockType.getKey.and.returnValue("layout");
-                mockComposition.invoke.and.returnValue(mockPromise(true));
-                mockComposition.add.and.returnValue(mockPromise(true));
-                mockActionCapability.getActions.and.returnValue([]);
-
-                capabilities = {
-                    composition: mockComposition,
-                    action: mockActionCapability,
-                    type: mockType
-                };
-                model = {
-                    composition: ["a", "b", "c"]
-                };
-
-                actionContext = {
-                    domainObject: mockParent,
-                    selectedObject: mockDomainObject
-                };
-
-                action = new EditAndComposeAction(actionContext);
-            });
-
-            it("adds to the parent's composition when performed", function () {
-                action.perform();
-                expect(mockComposition.add)
-                    .toHaveBeenCalledWith(mockDomainObject);
-            });
-
-            it("enables edit mode for objects that have an edit action", function () {
-                mockActionCapability.getActions.and.returnValue([mockEditAction]);
-                action.perform();
-                expect(mockEditAction.perform).toHaveBeenCalled();
-            });
-
-            it("Does not enable edit mode for objects that do not have an"
-                + " edit action", function () {
-                mockActionCapability.getActions.and.returnValue([]);
-                action.perform();
-                expect(mockEditAction.perform).not.toHaveBeenCalled();
-                expect(mockComposition.add)
-                    .toHaveBeenCalledWith(mockDomainObject);
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/edit/test/actions/PropertiesActionSpec.js b/platform/commonUI/edit/test/actions/PropertiesActionSpec.js
deleted file mode 100644
index fff5123f0b9..00000000000
--- a/platform/commonUI/edit/test/actions/PropertiesActionSpec.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['../../src/actions/PropertiesAction'],
-    function (PropertiesAction) {
-
-        describe("Properties action", function () {
-            var capabilities, model, object, context, input, dialogService, action;
-
-            function mockPromise(value) {
-                return {
-                    then: function (callback) {
-                        return mockPromise(callback(value));
-                    }
-                };
-            }
-
-            beforeEach(function () {
-                capabilities = {
-                    type: {
-                        getProperties: function () {
-                            return [];
-                        },
-                        hasFeature: jasmine.createSpy('hasFeature')
-                    },
-                    mutation: jasmine.createSpy("mutation")
-                };
-                model = {};
-                input = {};
-                object = {
-                    getId: function () {
-                        return 'test-id';
-                    },
-                    getCapability: function (k) {
-                        return capabilities[k];
-                    },
-                    getModel: function () {
-                        return model;
-                    },
-                    useCapability: function (k, v) {
-                        return capabilities[k](v);
-                    },
-                    hasCapability: function () {
-                        return true;
-                    }
-                };
-                context = {
-                    someKey: "some value",
-                    domainObject: object
-                };
-                dialogService = {
-                    getUserInput: function () {
-                        return mockPromise(input);
-                    }
-                };
-
-                capabilities.type.hasFeature.and.returnValue(true);
-                capabilities.mutation.and.returnValue(true);
-
-                action = new PropertiesAction(dialogService, context);
-            });
-
-            it("mutates an object when performed", function () {
-                action.perform();
-                expect(capabilities.mutation).toHaveBeenCalled();
-                capabilities.mutation.calls.mostRecent().args[0]({});
-            });
-
-            it("does not muate object upon cancel", function () {
-                input = undefined;
-                action.perform();
-                expect(capabilities.mutation).not.toHaveBeenCalled();
-            });
-
-            it("is only applicable when a domain object is in context", function () {
-                expect(PropertiesAction.appliesTo(context)).toBeTruthy();
-                expect(PropertiesAction.appliesTo({})).toBeFalsy();
-                // Make sure it checked for creatability
-                expect(capabilities.type.hasFeature).toHaveBeenCalledWith('creation');
-            });
-        });
-    }
-);
diff --git a/platform/commonUI/edit/test/actions/PropertiesDialogSpec.js b/platform/commonUI/edit/test/actions/PropertiesDialogSpec.js
deleted file mode 100644
index b870ac029c3..00000000000
--- a/platform/commonUI/edit/test/actions/PropertiesDialogSpec.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/actions/PropertiesDialog"],
-    function (PropertiesDialog) {
-
-        describe("Properties dialog", function () {
-
-            var type, properties, model, dialog;
-
-            beforeEach(function () {
-                type = {
-                    getProperties: function () {
-                        return properties;
-                    }
-                };
-                model = { x: "initial value" };
-                properties = ["x", "y", "z"].map(function (k) {
-                    return {
-                        getValue: function (m) {
-                            return m[k];
-                        },
-                        setValue: function (m, v) {
-                            m[k] = v;
-                        },
-                        getDefinition: function () {
-                            return { control: 'textfield '};
-                        }
-                    };
-                });
-
-                dialog = new PropertiesDialog(type, model);
-            });
-
-            it("provides sections based on type properties", function () {
-                expect(dialog.getFormStructure().sections[0].rows.length)
-                    .toEqual(properties.length);
-            });
-
-            it("pulls initial values from object model", function () {
-                expect(dialog.getInitialFormValue()[0])
-                    .toEqual("initial value");
-            });
-
-            it("populates models with form results", function () {
-                dialog.updateModel(model, [
-                    "new value",
-                    "other new value",
-                    42
-                ]);
-                expect(model).toEqual({
-                    x: "new value",
-                    y: "other new value",
-                    z: 42
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/edit/test/actions/SaveActionSpec.js b/platform/commonUI/edit/test/actions/SaveActionSpec.js
deleted file mode 100644
index 1cd2643424d..00000000000
--- a/platform/commonUI/edit/test/actions/SaveActionSpec.js
+++ /dev/null
@@ -1,159 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/actions/SaveAction"],
-    function (SaveAction) {
-
-        describe("The Save action", function () {
-            var mockDomainObject,
-                mockEditorCapability,
-                actionContext,
-                mockDialogService,
-                mockNotificationService,
-                mockActionCapability,
-                capabilities = {},
-                action;
-
-            function mockPromise(value) {
-                return {
-                    then: function (callback) {
-                        return mockPromise(callback(value));
-                    },
-                    catch: function (callback) {
-                        return mockPromise(callback(value));
-                    }
-                };
-            }
-
-            beforeEach(function () {
-                mockDomainObject = jasmine.createSpyObj(
-                    "domainObject",
-                    [
-                        "getCapability",
-                        "hasCapability",
-                        "getModel",
-                        "getOriginalObject"
-                    ]
-                );
-                mockEditorCapability = jasmine.createSpyObj(
-                    "editor",
-                    ["save", "isEditContextRoot"]
-                );
-                mockActionCapability = jasmine.createSpyObj(
-                    "actionCapability",
-                    ["perform"]
-                );
-                capabilities.editor = mockEditorCapability;
-                capabilities.action = mockActionCapability;
-
-                actionContext = {
-                    domainObject: mockDomainObject
-                };
-
-                mockDialogService = jasmine.createSpyObj(
-                    "dialogService",
-                    ["showBlockingMessage"]
-                );
-
-                mockNotificationService = jasmine.createSpyObj(
-                    "notificationService",
-                    ["info", "error"]
-                );
-
-                mockDomainObject.hasCapability.and.returnValue(true);
-                mockDomainObject.getCapability.and.callFake(function (capability) {
-                    return capabilities[capability];
-                });
-                mockDomainObject.getModel.and.returnValue({persisted: 0});
-                mockEditorCapability.save.and.returnValue(mockPromise(true));
-                mockEditorCapability.isEditContextRoot.and.returnValue(true);
-
-                action = new SaveAction(mockDialogService, mockNotificationService, actionContext);
-            });
-
-            it("only applies to domain object with an editor capability", function () {
-                expect(SaveAction.appliesTo(actionContext)).toBe(true);
-                expect(mockDomainObject.hasCapability).toHaveBeenCalledWith("editor");
-
-                mockDomainObject.hasCapability.and.returnValue(false);
-                mockDomainObject.getCapability.and.returnValue(undefined);
-                expect(SaveAction.appliesTo(actionContext)).toBe(false);
-            });
-
-            it("only applies to domain object that has already been persisted",
-                function () {
-                    mockDomainObject.getModel.and.returnValue({persisted: undefined});
-                    expect(SaveAction.appliesTo(actionContext)).toBe(false);
-                });
-
-            it("uses the editor capability to save the object",
-                function () {
-                    action.perform();
-                    expect(mockEditorCapability.save).toHaveBeenCalled();
-                });
-
-            describe("in order to keep the user in the loop", function () {
-                var mockDialogHandle;
-
-                beforeEach(function () {
-                    mockDialogHandle = jasmine.createSpyObj("dialogHandle", ["dismiss"]);
-                    mockDialogService.showBlockingMessage.and.returnValue(mockDialogHandle);
-                });
-
-                it("shows a dialog while saving", function () {
-                    mockEditorCapability.save.and.returnValue(new Promise(function () {
-                    }));
-                    action.perform();
-                    expect(mockDialogService.showBlockingMessage).toHaveBeenCalled();
-                    expect(mockDialogHandle.dismiss).not.toHaveBeenCalled();
-                });
-
-                it("hides the dialog when saving is complete", function () {
-                    action.perform();
-                    expect(mockDialogService.showBlockingMessage).toHaveBeenCalled();
-                    expect(mockDialogHandle.dismiss).toHaveBeenCalled();
-                });
-
-                it("notifies if saving succeeded", function () {
-                    var mockCallback = jasmine.createSpy("callback");
-                    mockEditorCapability.save.and.returnValue(Promise.resolve());
-
-                    return action.perform().then(mockCallback).then(function () {
-                        expect(mockNotificationService.info).toHaveBeenCalled();
-                        expect(mockNotificationService.error).not.toHaveBeenCalled();
-                    });
-                });
-
-                it("notifies if saving failed", function () {
-                    var mockCallback = jasmine.createSpy("callback");
-                    mockEditorCapability.save.and.returnValue(Promise.reject("some failure reason"));
-
-                    return action.perform().then(mockCallback).then(function () {
-                        expect(mockNotificationService.error).toHaveBeenCalled();
-                        expect(mockNotificationService.info).not.toHaveBeenCalled();
-                    });
-                });
-            });
-        });
-    }
-);
diff --git a/platform/commonUI/edit/test/actions/SaveAndStopEditingActionSpec.js b/platform/commonUI/edit/test/actions/SaveAndStopEditingActionSpec.js
deleted file mode 100644
index c4eb1058ae6..00000000000
--- a/platform/commonUI/edit/test/actions/SaveAndStopEditingActionSpec.js
+++ /dev/null
@@ -1,128 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/actions/SaveAndStopEditingAction"],
-    function (SaveAndStopEditingAction) {
-
-        describe("The Save and Stop Editing action", function () {
-
-            // Some mocks appear unused because the
-            // underlying SaveAction that this action
-            // depends on is not mocked, so we mock some
-            // of SaveAction's own dependencies to make
-            // it run.
-            var mockDomainObject,
-                mockEditorCapability,
-                actionContext,
-                dialogService,
-                notificationService,
-                mockActionCapability,
-                capabilities = {},
-                action;
-
-            function mockPromise(value) {
-                return {
-                    then: function (callback) {
-                        return mockPromise(callback(value));
-                    },
-                    catch: function (callback) {
-                        return mockPromise(callback(value));
-                    }
-                };
-            }
-
-            beforeEach(function () {
-                mockDomainObject = jasmine.createSpyObj(
-                    "domainObject",
-                    [
-                        "getCapability",
-                        "hasCapability",
-                        "getModel",
-                        "getOriginalObject"
-                    ]
-                );
-                mockEditorCapability = jasmine.createSpyObj(
-                    "editor",
-                    ["save", "finish", "isEditContextRoot"]
-                );
-                mockActionCapability = jasmine.createSpyObj(
-                    "actionCapability",
-                    ["perform"]
-                );
-                capabilities.editor = mockEditorCapability;
-                capabilities.action = mockActionCapability;
-
-                actionContext = {
-                    domainObject: mockDomainObject
-                };
-                dialogService = jasmine.createSpyObj(
-                    "dialogService",
-                    ["showBlockingMessage"]
-                );
-
-                notificationService = jasmine.createSpyObj(
-                    "notificationService",
-                    ["info", "error"]
-                );
-
-                mockDomainObject.hasCapability.and.returnValue(true);
-                mockDomainObject.getCapability.and.callFake(function (capability) {
-                    return capabilities[capability];
-                });
-                mockDomainObject.getModel.and.returnValue({ persisted: 0 });
-                mockEditorCapability.save.and.returnValue(mockPromise(true));
-                mockEditorCapability.isEditContextRoot.and.returnValue(true);
-
-                action = new SaveAndStopEditingAction(dialogService, notificationService, actionContext);
-            });
-
-            it("only applies to domain object with an editor capability", function () {
-                expect(SaveAndStopEditingAction.appliesTo(actionContext)).toBe(true);
-                expect(mockDomainObject.hasCapability).toHaveBeenCalledWith("editor");
-
-                mockDomainObject.hasCapability.and.returnValue(false);
-                mockDomainObject.getCapability.and.returnValue(undefined);
-                expect(SaveAndStopEditingAction.appliesTo(actionContext)).toBe(false);
-            });
-
-            it("only applies to domain object that has already been persisted", function () {
-                mockDomainObject.getModel.and.returnValue({ persisted: undefined });
-                expect(SaveAndStopEditingAction.appliesTo(actionContext)).toBe(false);
-            });
-
-            it("does not close the editor before completing the save", function () {
-                mockEditorCapability.save.and.returnValue(new Promise(function () {
-                }));
-                action.perform();
-                expect(mockEditorCapability.save).toHaveBeenCalled();
-                expect(mockEditorCapability.finish).not.toHaveBeenCalled();
-            });
-
-            it("closes the editor after saving", function () {
-                action.perform();
-                expect(mockEditorCapability.save).toHaveBeenCalled();
-                expect(mockEditorCapability.finish).toHaveBeenCalled();
-            });
-        });
-    }
-);
diff --git a/platform/commonUI/edit/test/actions/SaveAsActionSpec.js b/platform/commonUI/edit/test/actions/SaveAsActionSpec.js
deleted file mode 100644
index dcce37bfa49..00000000000
--- a/platform/commonUI/edit/test/actions/SaveAsActionSpec.js
+++ /dev/null
@@ -1,249 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/actions/SaveAsAction"],
-    function (SaveAsAction) {
-
-        xdescribe("The Save As action", function () {
-            var mockDomainObject,
-                mockClonedObject,
-                mockEditorCapability,
-                mockActionCapability,
-                mockObjectService,
-                mockDialogService,
-                mockCopyService,
-                mockNotificationService,
-                mockParent,
-                actionContext,
-                capabilities = {},
-                action;
-
-            function noop() {}
-
-            function mockPromise(value) {
-                return (value || {}).then ? value
-                    : {
-                        then: function (callback) {
-                            return mockPromise(callback(value));
-                        },
-                        catch: function (callback) {
-                            return mockPromise(callback(value));
-                        }
-                    };
-            }
-
-            beforeEach(function () {
-                mockDomainObject = jasmine.createSpyObj(
-                    "domainObject",
-                    [
-                        "getCapability",
-                        "hasCapability",
-                        "getModel",
-                        "getId"
-                    ]
-                );
-                mockDomainObject.hasCapability.and.returnValue(true);
-                mockDomainObject.getCapability.and.callFake(function (capability) {
-                    return capabilities[capability];
-                });
-                mockDomainObject.getModel.and.returnValue({
-                    location: 'a',
-                    persisted: undefined
-                });
-                mockDomainObject.getId.and.returnValue(0);
-
-                mockClonedObject = jasmine.createSpyObj(
-                    "clonedObject",
-                    [
-                        "getId"
-                    ]
-                );
-                mockClonedObject.getId.and.returnValue(1);
-
-                mockParent = jasmine.createSpyObj(
-                    "parentObject",
-                    [
-                        "getCapability",
-                        "hasCapability",
-                        "getModel"
-                    ]
-                );
-
-                mockEditorCapability = jasmine.createSpyObj(
-                    "editor",
-                    ["save", "finish", "isEditContextRoot"]
-                );
-                mockEditorCapability.save.and.returnValue(mockPromise(true));
-                mockEditorCapability.finish.and.returnValue(mockPromise(true));
-                mockEditorCapability.isEditContextRoot.and.returnValue(true);
-                capabilities.editor = mockEditorCapability;
-
-                mockActionCapability = jasmine.createSpyObj(
-                    "action",
-                    ["perform"]
-                );
-                capabilities.action = mockActionCapability;
-
-                mockObjectService = jasmine.createSpyObj(
-                    "objectService",
-                    ["getObjects"]
-                );
-                mockObjectService.getObjects.and.returnValue(mockPromise({'a': mockParent}));
-
-                mockDialogService = jasmine.createSpyObj(
-                    "dialogService",
-                    [
-                        "getUserInput",
-                        "showBlockingMessage"
-                    ]
-                );
-                mockDialogService.getUserInput.and.returnValue(mockPromise(undefined));
-
-                mockCopyService = jasmine.createSpyObj(
-                    "copyService",
-                    [
-                        "perform"
-                    ]
-                );
-                mockCopyService.perform.and.returnValue(mockPromise(mockClonedObject));
-
-                mockNotificationService = jasmine.createSpyObj(
-                    "notificationService",
-                    [
-                        "info",
-                        "error"
-                    ]
-                );
-
-                actionContext = {
-                    domainObject: mockDomainObject
-                };
-
-                action = new SaveAsAction(
-                    undefined,
-                    undefined,
-                    mockDialogService,
-                    mockCopyService,
-                    mockNotificationService,
-                    actionContext);
-
-                spyOn(action, "getObjectService");
-                action.getObjectService.and.returnValue(mockObjectService);
-
-                spyOn(action, "createWizard");
-                action.createWizard.and.returnValue({
-                    getFormStructure: noop,
-                    getInitialFormValue: noop,
-                    populateObjectFromInput: function () {
-                        return mockDomainObject;
-                    }
-                });
-
-            });
-
-            it("only applies to domain object with an editor capability", function () {
-                expect(SaveAsAction.appliesTo(actionContext)).toBe(true);
-                expect(mockDomainObject.hasCapability).toHaveBeenCalledWith("editor");
-
-                mockDomainObject.hasCapability.and.returnValue(false);
-                mockDomainObject.getCapability.and.returnValue(undefined);
-                expect(SaveAsAction.appliesTo(actionContext)).toBe(false);
-            });
-
-            it("only applies to domain object that has not already been"
-                + " persisted", function () {
-                expect(SaveAsAction.appliesTo(actionContext)).toBe(true);
-                expect(mockDomainObject.hasCapability).toHaveBeenCalledWith("editor");
-
-                mockDomainObject.getModel.and.returnValue({persisted: 0});
-                expect(SaveAsAction.appliesTo(actionContext)).toBe(false);
-            });
-
-            it("uses the editor capability to save the object", function () {
-                mockEditorCapability.save.and.returnValue(Promise.resolve());
-
-                return action.perform().then(function () {
-                    expect(mockEditorCapability.save).toHaveBeenCalled();
-                });
-            });
-
-            it("uses the editor capability to finish editing the object", function () {
-                return action.perform().then(function () {
-                    expect(mockEditorCapability.finish.calls.count()).toBeGreaterThan(0);
-                });
-            });
-
-            it("returns to browse after save", function () {
-                spyOn(action, "save");
-                action.save.and.returnValue(mockPromise(mockDomainObject));
-                action.perform();
-                expect(mockActionCapability.perform).toHaveBeenCalledWith(
-                    "navigate"
-                );
-            });
-
-            it("prompts the user for object details", function () {
-                action.perform();
-                expect(mockDialogService.getUserInput).toHaveBeenCalled();
-            });
-
-            describe("in order to keep the user in the loop", function () {
-                var mockDialogHandle;
-
-                beforeEach(function () {
-                    mockDialogHandle = jasmine.createSpyObj("dialogHandle", ["dismiss"]);
-                    mockDialogService.showBlockingMessage.and.returnValue(mockDialogHandle);
-                });
-
-                it("shows a blocking dialog indicating that saving is in progress", function () {
-                    mockEditorCapability.save.and.returnValue(new Promise(function () {}));
-                    action.perform();
-                    expect(mockDialogService.showBlockingMessage).toHaveBeenCalled();
-                    expect(mockDialogHandle.dismiss).not.toHaveBeenCalled();
-                });
-
-                it("hides the blocking dialog after saving finishes", function () {
-                    return action.perform().then(function () {
-                        expect(mockDialogService.showBlockingMessage).toHaveBeenCalled();
-                        expect(mockDialogHandle.dismiss).toHaveBeenCalled();
-                    });
-                });
-
-                it("notifies if saving succeeded", function () {
-                    return action.perform().then(function () {
-                        expect(mockNotificationService.info).toHaveBeenCalled();
-                        expect(mockNotificationService.error).not.toHaveBeenCalled();
-                    });
-                });
-
-                it("notifies if saving failed", function () {
-                    mockCopyService.perform.and.returnValue(Promise.reject("some failure reason"));
-                    action.perform().then(function () {
-                        expect(mockNotificationService.error).toHaveBeenCalled();
-                        expect(mockNotificationService.info).not.toHaveBeenCalled();
-                    });
-                });
-            });
-        });
-    }
-);
diff --git a/platform/commonUI/edit/test/capabilities/EditorCapabilitySpec.js b/platform/commonUI/edit/test/capabilities/EditorCapabilitySpec.js
deleted file mode 100644
index e97e8a6d8ea..00000000000
--- a/platform/commonUI/edit/test/capabilities/EditorCapabilitySpec.js
+++ /dev/null
@@ -1,192 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/capabilities/EditorCapability"],
-    function (EditorCapability) {
-
-        xdescribe("The editor capability", function () {
-            var mockDomainObject,
-                capabilities,
-                mockParentObject,
-                mockTransactionService,
-                mockStatusCapability,
-                mockParentStatus,
-                mockContextCapability,
-                capability;
-
-            function fastPromise(val) {
-                return {
-                    then: function (callback) {
-                        return callback(val);
-                    }
-                };
-            }
-
-            beforeEach(function () {
-                mockDomainObject = jasmine.createSpyObj(
-                    "domainObject",
-                    ["getId", "getModel", "hasCapability", "getCapability", "useCapability"]
-                );
-                mockParentObject = jasmine.createSpyObj(
-                    "domainObject",
-                    ["getId", "getModel", "hasCapability", "getCapability", "useCapability"]
-                );
-                mockTransactionService = jasmine.createSpyObj(
-                    "transactionService",
-                    [
-                        "startTransaction",
-                        "size",
-                        "commit",
-                        "cancel"
-                    ]
-                );
-                mockTransactionService.commit.and.returnValue(fastPromise());
-                mockTransactionService.cancel.and.returnValue(fastPromise());
-                mockTransactionService.isActive = jasmine.createSpy('isActive');
-
-                mockStatusCapability = jasmine.createSpyObj(
-                    "statusCapability",
-                    ["get", "set"]
-                );
-                mockParentStatus = jasmine.createSpyObj(
-                    "statusCapability",
-                    ["get", "set"]
-                );
-                mockContextCapability = jasmine.createSpyObj(
-                    "contextCapability",
-                    ["getParent"]
-                );
-                mockContextCapability.getParent.and.returnValue(mockParentObject);
-
-                capabilities = {
-                    context: mockContextCapability,
-                    status: mockStatusCapability
-                };
-
-                mockDomainObject.hasCapability.and.callFake(function (name) {
-                    return capabilities[name] !== undefined;
-                });
-
-                mockDomainObject.getCapability.and.callFake(function (name) {
-                    return capabilities[name];
-                });
-
-                mockParentObject.getCapability.and.returnValue(mockParentStatus);
-                mockParentObject.hasCapability.and.returnValue(false);
-
-                capability = new EditorCapability(
-                    mockTransactionService,
-                    mockDomainObject
-                );
-            });
-
-            it("starts a transaction when edit is invoked", function () {
-                capability.edit();
-                expect(mockTransactionService.startTransaction).toHaveBeenCalled();
-            });
-
-            it("sets editing status on object", function () {
-                capability.edit();
-                expect(mockStatusCapability.set).toHaveBeenCalledWith("editing", true);
-            });
-
-            it("uses editing status to determine editing context root", function () {
-                capability.edit();
-                mockStatusCapability.get.and.returnValue(false);
-                expect(capability.isEditContextRoot()).toBe(false);
-                mockStatusCapability.get.and.returnValue(true);
-                expect(capability.isEditContextRoot()).toBe(true);
-            });
-
-            it("inEditingContext returns true if parent object is being"
-                + " edited", function () {
-                mockStatusCapability.get.and.returnValue(false);
-                mockParentStatus.get.and.returnValue(false);
-                expect(capability.inEditContext()).toBe(false);
-                mockParentStatus.get.and.returnValue(true);
-                expect(capability.inEditContext()).toBe(true);
-            });
-
-            describe("save", function () {
-                beforeEach(function () {
-                    capability.edit();
-                    capability.save();
-                });
-                it("commits the transaction", function () {
-                    expect(mockTransactionService.commit).toHaveBeenCalled();
-                });
-                it("begins a new transaction", function () {
-                    expect(mockTransactionService.startTransaction).toHaveBeenCalled();
-                });
-            });
-
-            describe("finish", function () {
-                beforeEach(function () {
-                    mockTransactionService.isActive.and.returnValue(true);
-                    capability.edit();
-                    capability.finish();
-                });
-                it("cancels the transaction", function () {
-                    expect(mockTransactionService.cancel).toHaveBeenCalled();
-                });
-                it("resets the edit state", function () {
-                    expect(mockStatusCapability.set).toHaveBeenCalledWith('editing', false);
-                });
-            });
-
-            describe("finish", function () {
-                beforeEach(function () {
-                    mockTransactionService.isActive.and.returnValue(false);
-                    capability.edit();
-                });
-
-                it("does not cancel transaction when transaction is not active", function () {
-                    capability.finish();
-                    expect(mockTransactionService.cancel).not.toHaveBeenCalled();
-                });
-
-                it("returns a promise", function () {
-                    expect(capability.finish() instanceof Promise).toBe(true);
-                });
-
-            });
-
-            describe("dirty", function () {
-                var model = {};
-
-                beforeEach(function () {
-                    mockDomainObject.getModel.and.returnValue(model);
-                    capability.edit();
-                    capability.finish();
-                });
-                it("returns true if the object has been modified since it"
-                    + " was last persisted", function () {
-                    mockTransactionService.size.and.returnValue(0);
-                    expect(capability.dirty()).toBe(false);
-                    mockTransactionService.size.and.returnValue(1);
-                    expect(capability.dirty()).toBe(true);
-                });
-            });
-        });
-    }
-);
diff --git a/platform/commonUI/edit/test/capabilities/TransactionCapabilityDecoratorSpec.js b/platform/commonUI/edit/test/capabilities/TransactionCapabilityDecoratorSpec.js
deleted file mode 100644
index e730e67aa39..00000000000
--- a/platform/commonUI/edit/test/capabilities/TransactionCapabilityDecoratorSpec.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [
-        "../../src/capabilities/TransactionalPersistenceCapability",
-        "../../src/capabilities/TransactionCapabilityDecorator"
-    ],
-    function (TransactionalPersistenceCapability, TransactionCapabilityDecorator) {
-
-        describe("The transaction capability decorator", function () {
-            var mockQ,
-                mockTransactionService,
-                mockCapabilityService,
-                provider;
-
-            beforeEach(function () {
-                mockQ = {};
-                mockTransactionService = {};
-                mockCapabilityService = jasmine.createSpyObj("capabilityService", ["getCapabilities"]);
-                mockCapabilityService.getCapabilities.and.returnValue({
-                    persistence: function () {}
-                });
-
-                provider = new TransactionCapabilityDecorator(mockQ, mockTransactionService, mockCapabilityService);
-
-            });
-            it("decorates the persistence capability", function () {
-                var capabilities = provider.getCapabilities();
-                expect(capabilities.persistence({}) instanceof TransactionalPersistenceCapability).toBe(true);
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/edit/test/capabilities/TransactionalPersistenceCapabilitySpec.js b/platform/commonUI/edit/test/capabilities/TransactionalPersistenceCapabilitySpec.js
deleted file mode 100644
index bb380011932..00000000000
--- a/platform/commonUI/edit/test/capabilities/TransactionalPersistenceCapabilitySpec.js
+++ /dev/null
@@ -1,111 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [
-        "../../src/capabilities/TransactionalPersistenceCapability"
-    ],
-    function (TransactionalPersistenceCapability) {
-
-        function fastPromise(val) {
-            return {
-                then: function (callback) {
-                    return callback(val);
-                }
-            };
-        }
-
-        describe("The transactional persistence decorator", function () {
-            var mockQ,
-                mockTransactionManager,
-                mockPersistence,
-                mockDomainObject,
-                testId,
-                capability;
-
-            beforeEach(function () {
-                testId = "test-id";
-
-                mockQ = jasmine.createSpyObj("$q", ["when"]);
-                mockQ.when.and.callFake(function (val) {
-                    return fastPromise(val);
-                });
-                mockTransactionManager = jasmine.createSpyObj(
-                    "transactionService",
-                    ["isActive", "addToTransaction", "clearTransactionsFor"]
-                );
-                mockPersistence = jasmine.createSpyObj(
-                    "persistenceCapability",
-                    ["persist", "refresh", "getSpace"]
-                );
-                mockPersistence.persist.and.returnValue(fastPromise());
-                mockPersistence.refresh.and.returnValue(fastPromise());
-
-                mockDomainObject = jasmine.createSpyObj(
-                    "domainObject",
-                    ["getModel", "getId"]
-                );
-                mockDomainObject.getModel.and.returnValue({persisted: 1});
-                mockDomainObject.getId.and.returnValue(testId);
-
-                capability = new TransactionalPersistenceCapability(
-                    mockQ,
-                    mockTransactionManager,
-                    mockPersistence,
-                    mockDomainObject
-                );
-            });
-
-            it("if no transaction is active, passes through to persistence"
-                + " provider", function () {
-                mockTransactionManager.isActive.and.returnValue(false);
-                capability.persist();
-                expect(mockPersistence.persist).toHaveBeenCalled();
-            });
-
-            it("if transaction is active, persist and cancel calls are"
-                + " queued", function () {
-                mockTransactionManager.isActive.and.returnValue(true);
-                capability.persist();
-                expect(mockTransactionManager.addToTransaction).toHaveBeenCalled();
-                mockTransactionManager.addToTransaction.calls.mostRecent().args[1]();
-                expect(mockPersistence.persist).toHaveBeenCalled();
-                mockTransactionManager.addToTransaction.calls.mostRecent().args[2]();
-                expect(mockPersistence.refresh).toHaveBeenCalled();
-            });
-
-            it("wraps getSpace", function () {
-                mockPersistence.getSpace.and.returnValue('foo');
-                expect(capability.getSpace()).toEqual('foo');
-            });
-
-            it("clears transactions and delegates refresh calls", function () {
-                capability.refresh();
-                expect(mockTransactionManager.clearTransactionsFor)
-                    .toHaveBeenCalledWith(testId);
-                expect(mockPersistence.refresh)
-                    .toHaveBeenCalled();
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/edit/test/controllers/EditActionControllerSpec.js b/platform/commonUI/edit/test/controllers/EditActionControllerSpec.js
deleted file mode 100644
index 7156cab2418..00000000000
--- a/platform/commonUI/edit/test/controllers/EditActionControllerSpec.js
+++ /dev/null
@@ -1,106 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/controllers/EditActionController"],
-    function (EditActionController) {
-
-        describe("The Edit Action controller", function () {
-            var mockSaveActionMetadata = {
-                name: "mocked-save-action",
-                cssClass: "mocked-save-action-css"
-            };
-
-            function fakeGetActions(actionContext) {
-                if (actionContext.category === "save") {
-                    var mockedSaveActions = [
-                        jasmine.createSpyObj("mockSaveAction", ["getMetadata", "perform"]),
-                        jasmine.createSpyObj("mockSaveAction", ["getMetadata", "perform"])
-                    ];
-                    mockedSaveActions.forEach(function (action) {
-                        action.getMetadata.and.returnValue(mockSaveActionMetadata);
-                    });
-
-                    return mockedSaveActions;
-                } else if (actionContext.category === "conclude-editing") {
-                    return ["a", "b", "c"];
-                } else {
-                    throw "EditActionController uses a context that's not covered by tests.";
-                }
-            }
-
-            var mockScope,
-                mockActions,
-                controller;
-
-            beforeEach(function () {
-                mockActions = jasmine.createSpyObj("action", ["getActions"]);
-                mockActions.getActions.and.callFake(fakeGetActions);
-                mockScope = jasmine.createSpyObj("$scope", ["$watch"]);
-                mockScope.action = mockActions;
-                controller = new EditActionController(mockScope);
-            });
-
-            function makeControllerUpdateActions() {
-                mockScope.$watch.calls.mostRecent().args[1]();
-            }
-
-            it("watches scope that may change applicable actions", function () {
-                // The action capability
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "action",
-                    jasmine.any(Function)
-                );
-            });
-
-            it("populates the scope with 'save' actions", function () {
-                makeControllerUpdateActions();
-                expect(mockScope.saveActions.length).toEqual(2);
-            });
-
-            it("converts 'save' actions to their menu counterparts", function () {
-                makeControllerUpdateActions();
-                var menuOptions = mockScope.saveActionsAsMenuOptions;
-
-                expect(menuOptions.length).toEqual(2);
-                expect(menuOptions[0].key).toEqual(mockScope.saveActions[0]);
-                expect(menuOptions[1].key).toEqual(mockScope.saveActions[1]);
-                menuOptions.forEach(function (option) {
-                    expect(option.name).toEqual(mockSaveActionMetadata.name);
-                    expect(option.cssClass).toEqual(mockSaveActionMetadata.cssClass);
-                });
-            });
-
-            it("uses a click handler to perform the clicked action", function () {
-                makeControllerUpdateActions();
-                var sampleSaveAction = mockScope.saveActions[0];
-                mockScope.saveActionMenuClickHandler(sampleSaveAction);
-                expect(sampleSaveAction.perform).toHaveBeenCalled();
-            });
-
-            it("populates the scope with other editing actions", function () {
-                makeControllerUpdateActions();
-                expect(mockScope.otherEditActions).toEqual(["a", "b", "c"]);
-            });
-        });
-    }
-);
diff --git a/platform/commonUI/edit/test/controllers/EditObjectControllerSpec.js b/platform/commonUI/edit/test/controllers/EditObjectControllerSpec.js
deleted file mode 100644
index e63b8f2db91..00000000000
--- a/platform/commonUI/edit/test/controllers/EditObjectControllerSpec.js
+++ /dev/null
@@ -1,138 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/controllers/EditObjectController"],
-    function (EditObjectController) {
-
-        describe("The Edit Object controller", function () {
-            var mockScope,
-                mockObject,
-                testViews,
-                mockEditorCapability,
-                mockLocation,
-                mockNavigationService,
-                removeCheck,
-                mockStatusCapability,
-                mockCapabilities,
-                controller;
-
-            beforeEach(function () {
-                mockScope = jasmine.createSpyObj(
-                    "$scope",
-                    ["$on", "$watch"]
-                );
-                mockObject = jasmine.createSpyObj(
-                    "domainObject",
-                    ["getId", "getModel", "getCapability", "hasCapability", "useCapability"]
-                );
-                mockEditorCapability = jasmine.createSpyObj(
-                    "mockEditorCapability",
-                    ["isEditContextRoot", "dirty", "finish"]
-                );
-                mockStatusCapability = jasmine.createSpyObj('statusCapability',
-                    ["get"]
-                );
-
-                mockCapabilities = {
-                    "editor": mockEditorCapability,
-                    "status": mockStatusCapability
-                };
-
-                mockLocation = jasmine.createSpyObj('$location',
-                    ["search"]
-                );
-                mockLocation.search.and.returnValue({"view": "fixed"});
-                mockNavigationService = jasmine.createSpyObj('navigationService',
-                    ["checkBeforeNavigation"]
-                );
-
-                removeCheck = jasmine.createSpy('removeCheck');
-                mockNavigationService.checkBeforeNavigation.and.returnValue(removeCheck);
-
-                mockObject.getId.and.returnValue("test");
-                mockObject.getModel.and.returnValue({ name: "Test object" });
-                mockObject.getCapability.and.callFake(function (key) {
-                    return mockCapabilities[key];
-                });
-
-                testViews = [
-                    { key: 'abc' },
-                    {
-                        key: 'def',
-                        someKey: 'some value'
-                    },
-                    { key: 'xyz' }
-                ];
-
-                mockObject.useCapability.and.callFake(function (c) {
-                    return (c === 'view') && testViews;
-                });
-                mockLocation.search.and.returnValue({ view: 'def' });
-
-                mockScope.domainObject = mockObject;
-
-                controller = new EditObjectController(
-                    mockScope,
-                    mockLocation,
-                    mockNavigationService
-                );
-            });
-
-            it("adds a check before navigation", function () {
-                expect(mockNavigationService.checkBeforeNavigation)
-                    .toHaveBeenCalledWith(jasmine.any(Function));
-
-                var checkFn = mockNavigationService.checkBeforeNavigation.calls.mostRecent().args[0];
-
-                mockEditorCapability.isEditContextRoot.and.returnValue(false);
-                mockEditorCapability.dirty.and.returnValue(false);
-
-                expect(checkFn()).toBe("Continuing will cause the loss of any unsaved changes.");
-
-                mockEditorCapability.isEditContextRoot.and.returnValue(true);
-                expect(checkFn()).toBe("Continuing will cause the loss of any unsaved changes.");
-
-                mockEditorCapability.dirty.and.returnValue(true);
-                expect(checkFn())
-                    .toBe("Continuing will cause the loss of any unsaved changes.");
-
-            });
-
-            it("cleans up on destroy", function () {
-                expect(mockScope.$on)
-                    .toHaveBeenCalledWith("$destroy", jasmine.any(Function));
-
-                mockScope.$on.calls.mostRecent().args[1]();
-
-                expect(mockEditorCapability.finish).toHaveBeenCalled();
-                expect(removeCheck).toHaveBeenCalled();
-            });
-
-            it("sets the active view from query parameters", function () {
-                expect(mockScope.representation.selected)
-                    .toEqual(testViews[1]);
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/edit/test/controllers/EditPanesControllerSpec.js b/platform/commonUI/edit/test/controllers/EditPanesControllerSpec.js
deleted file mode 100644
index 76d6532653d..00000000000
--- a/platform/commonUI/edit/test/controllers/EditPanesControllerSpec.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/controllers/EditPanesController"],
-    function (EditPanesController) {
-
-        describe("The Edit Panes controller", function () {
-            var mockScope,
-                mockDomainObject,
-                mockContext,
-                controller;
-
-            beforeEach(function () {
-                mockScope = jasmine.createSpyObj("$scope", ["$watch"]);
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getId', 'getCapability']
-                );
-                mockContext = jasmine.createSpyObj(
-                    'context',
-                    ['getTrueRoot']
-                );
-
-                mockDomainObject.getId.and.returnValue('test-id');
-                mockDomainObject.getCapability.and.returnValue(mockContext);
-
-                // Return a new instance of the root object each time
-                mockContext.getTrueRoot.and.callFake(function () {
-                    var mockRoot = jasmine.createSpyObj('root', ['getId']);
-                    mockRoot.getId.and.returnValue('root-id');
-
-                    return mockRoot;
-                });
-
-                controller = new EditPanesController(mockScope);
-            });
-
-            it("watches for the domain object in view", function () {
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "domainObject",
-                    jasmine.any(Function)
-                );
-            });
-
-            it("exposes the root object found via the object's context capability", function () {
-                mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
-
-                // Verify that the correct capability was used
-                expect(mockDomainObject.getCapability)
-                    .toHaveBeenCalledWith('context');
-
-                // Should have exposed the root from getRoot
-                expect(controller.getRoot().getId()).toEqual('root-id');
-            });
-
-            it("preserves the same root instance to avoid excessive refreshing", function () {
-                var firstRoot;
-                // Expose the domain object
-                mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
-                firstRoot = controller.getRoot();
-                // Update!
-                mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
-                // Should still have the same object instance, to avoid
-                // triggering the watch used by the template we're supporting
-                expect(controller.getRoot()).toBe(firstRoot);
-            });
-
-            // Complements the test above; the object pointed to should change
-            // when the actual root has changed (detected by identifier)
-            it("updates the root when it changes", function () {
-                var firstRoot;
-                // Expose the domain object
-                mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
-                firstRoot = controller.getRoot();
-
-                // Change the exposed root
-                mockContext.getTrueRoot.and.callFake(function () {
-                    var mockRoot = jasmine.createSpyObj('root', ['getId']);
-                    mockRoot.getId.and.returnValue('other-root-id');
-
-                    return mockRoot;
-                });
-
-                // Update!
-                mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
-
-                // Should still have the same object instance, to avoid
-                // triggering the watch used by the template we're supporting
-                expect(controller.getRoot()).not.toBe(firstRoot);
-                expect(controller.getRoot().getId()).toEqual('other-root-id');
-            });
-        });
-    }
-);
diff --git a/platform/commonUI/edit/test/creation/CreateActionProviderSpec.js b/platform/commonUI/edit/test/creation/CreateActionProviderSpec.js
deleted file mode 100644
index eded353bc31..00000000000
--- a/platform/commonUI/edit/test/creation/CreateActionProviderSpec.js
+++ /dev/null
@@ -1,118 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * MCTRepresentationSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/creation/CreateActionProvider"],
-    function (CreateActionProvider) {
-
-        describe("The create action provider", function () {
-            var mockTypeService,
-                mockPolicyService,
-                mockCreationPolicy,
-                mockPolicyMap = {},
-                mockTypes,
-                provider;
-
-            function createMockType(name) {
-                var mockType = jasmine.createSpyObj(
-                    "type" + name,
-                    [
-                        "getKey",
-                        "getGlyph",
-                        "getCssClass",
-                        "getName",
-                        "getDescription",
-                        "getProperties",
-                        "getInitialModel",
-                        "hasFeature"
-                    ]
-                );
-                mockType.hasFeature.and.returnValue(true);
-                mockType.getName.and.returnValue(name);
-
-                return mockType;
-            }
-
-            beforeEach(function () {
-                mockTypeService = jasmine.createSpyObj(
-                    "typeService",
-                    ["listTypes"]
-                );
-                mockPolicyService = jasmine.createSpyObj(
-                    "policyService",
-                    ["allow"]
-                );
-
-                mockTypes = ["A", "B", "C"].map(createMockType);
-
-                mockTypes.forEach(function (type) {
-                    mockPolicyMap[type.getName()] = true;
-                });
-
-                mockCreationPolicy = function (type) {
-                    return mockPolicyMap[type.getName()];
-                };
-
-                mockPolicyService.allow.and.callFake(function (category, type) {
-                    return Boolean(category === "creation" && mockCreationPolicy(type));
-                });
-
-                mockTypeService.listTypes.and.returnValue(mockTypes);
-
-                provider = new CreateActionProvider(
-                    mockTypeService,
-                    mockPolicyService
-                );
-            });
-
-            it("exposes one create action per type", function () {
-                expect(provider.getActions({
-                    key: "create",
-                    domainObject: {}
-                }).length).toEqual(3);
-            });
-
-            it("exposes no non-create actions", function () {
-                expect(provider.getActions({
-                    key: "somethingElse",
-                    domainObject: {}
-                }).length).toEqual(0);
-            });
-
-            it("does not expose non-creatable types", function () {
-                // One of the types won't have the creation feature...
-                mockPolicyMap[mockTypes[0].getName()] = false;
-                // ...so it should have been filtered out.
-                expect(provider.getActions({
-                    key: "create",
-                    domainObject: {}
-                }).length).toEqual(2);
-                // Make sure it was creation which was used to check
-                expect(mockPolicyService.allow)
-                    .toHaveBeenCalledWith("creation", mockTypes[0]);
-            });
-        });
-    }
-);
diff --git a/platform/commonUI/edit/test/creation/CreateActionSpec.js b/platform/commonUI/edit/test/creation/CreateActionSpec.js
deleted file mode 100644
index 9bc7957696b..00000000000
--- a/platform/commonUI/edit/test/creation/CreateActionSpec.js
+++ /dev/null
@@ -1,186 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * MCTRepresentationSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/creation/CreateAction"],
-    function (CreateAction) {
-
-        xdescribe("The create action", function () {
-            var mockType,
-                mockParent,
-                mockContext,
-                mockDomainObject,
-                capabilities = {},
-                mockEditAction,
-                action;
-
-            function mockPromise(value) {
-                return {
-                    then: function (callback) {
-                        return mockPromise(callback(value));
-                    }
-                };
-            }
-
-            beforeEach(function () {
-                mockType = jasmine.createSpyObj(
-                    "type",
-                    [
-                        "getKey",
-                        "getGlyph",
-                        "getCssClass",
-                        "getName",
-                        "getDescription",
-                        "getProperties",
-                        "getInitialModel"
-                    ]
-                );
-                mockParent = jasmine.createSpyObj(
-                    "domainObject",
-                    [
-                        "getId",
-                        "getModel",
-                        "getCapability",
-                        "useCapability"
-                    ]
-                );
-                mockDomainObject = jasmine.createSpyObj(
-                    "domainObject",
-                    [
-                        "getId",
-                        "getModel",
-                        "getCapability",
-                        "hasCapability",
-                        "useCapability"
-                    ]
-                );
-                mockDomainObject.hasCapability.and.callFake(function (name) {
-                    return Boolean(capabilities[name]);
-                });
-                mockDomainObject.getCapability.and.callFake(function (name) {
-                    return capabilities[name];
-                });
-
-                capabilities.action = jasmine.createSpyObj(
-                    "actionCapability",
-                    [
-                        "getActions",
-                        "perform"
-                    ]
-                );
-
-                capabilities.editor = jasmine.createSpyObj(
-                    "editorCapability",
-                    [
-                        "edit",
-                        "save",
-                        "finish"
-                    ]
-                );
-
-                mockEditAction = jasmine.createSpyObj(
-                    "editAction",
-                    [
-                        "perform"
-                    ]
-                );
-
-                mockContext = {
-                    domainObject: mockParent
-                };
-                mockParent.useCapability.and.returnValue(mockDomainObject);
-
-                mockType.getKey.and.returnValue("test");
-                mockType.getCssClass.and.returnValue("icon-telemetry");
-                mockType.getDescription.and.returnValue("a test type");
-                mockType.getName.and.returnValue("Test");
-                mockType.getProperties.and.returnValue([]);
-                mockType.getInitialModel.and.returnValue({});
-
-                action = new CreateAction(
-                    mockType,
-                    mockParent,
-                    mockContext
-                );
-            });
-
-            it("exposes type-appropriate metadata", function () {
-                var metadata = action.getMetadata();
-
-                expect(metadata.name).toEqual("Test");
-                expect(metadata.description).toEqual("a test type");
-                expect(metadata.cssClass).toEqual("icon-telemetry");
-            });
-
-            describe("the perform function", function () {
-                var promise = jasmine.createSpyObj("promise", ["then"]);
-                beforeEach(function () {
-                    capabilities.action.getActions.and.returnValue([mockEditAction]);
-                });
-
-                it("uses the instantiation capability when performed", function () {
-                    action.perform();
-                    expect(mockParent.useCapability).toHaveBeenCalledWith("instantiation", jasmine.any(Object));
-                });
-
-                it("uses the edit action if available", function () {
-                    action.perform();
-                    expect(mockEditAction.perform).toHaveBeenCalled();
-                });
-
-                it("uses the save-as action if object does not have an edit action"
-                    + " available", function () {
-                    capabilities.action.getActions.and.returnValue([]);
-                    capabilities.action.perform.and.returnValue(mockPromise(undefined));
-                    capabilities.editor.save.and.returnValue(promise);
-                    action.perform();
-                    expect(capabilities.action.perform).toHaveBeenCalledWith("save-as");
-                });
-
-                describe("uses to editor capability", function () {
-                    beforeEach(function () {
-                        capabilities.action.getActions.and.returnValue([]);
-                        capabilities.action.perform.and.returnValue(promise);
-                        capabilities.editor.save.and.returnValue(promise);
-                    });
-
-                    it("to save the edit if user saves dialog", function () {
-                        action.perform();
-                        expect(promise.then).toHaveBeenCalled();
-                        promise.then.calls.mostRecent().args[0]();
-                        expect(capabilities.editor.save).toHaveBeenCalled();
-                    });
-
-                    it("to finish the edit if user cancels dialog", function () {
-                        action.perform();
-                        promise.then.calls.mostRecent().args[1]();
-                        expect(capabilities.editor.finish).toHaveBeenCalled();
-                    });
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/edit/test/creation/CreateMenuControllerSpec.js b/platform/commonUI/edit/test/creation/CreateMenuControllerSpec.js
deleted file mode 100644
index 4a5298d3433..00000000000
--- a/platform/commonUI/edit/test/creation/CreateMenuControllerSpec.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * MCTRepresentationSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/creation/CreateMenuController"],
-    function (CreateMenuController) {
-
-        describe("The create menu controller", function () {
-            var mockScope,
-                mockActions,
-                controller;
-
-            beforeEach(function () {
-                mockActions = jasmine.createSpyObj("action", ["getActions"]);
-                mockScope = jasmine.createSpyObj("$scope", ["$watch"]);
-                controller = new CreateMenuController(mockScope);
-            });
-
-            it("watches scope that may change applicable actions", function () {
-                // The action capability
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "action",
-                    jasmine.any(Function)
-                );
-            });
-
-            it("populates the scope with create actions", function () {
-                mockScope.action = mockActions;
-
-                mockActions.getActions.and.returnValue(["a", "b", "c"]);
-
-                // Call the watch
-                mockScope.$watch.calls.mostRecent().args[1]();
-
-                // Should have grouped and ungrouped actions in scope now
-                expect(mockScope.createActions.length).toEqual(3);
-
-                // Make sure the right action type was requested
-                expect(mockActions.getActions).toHaveBeenCalledWith("create");
-            });
-        });
-    }
-);
diff --git a/platform/commonUI/edit/test/creation/CreateWizardSpec.js b/platform/commonUI/edit/test/creation/CreateWizardSpec.js
deleted file mode 100644
index 8fff4dc903c..00000000000
--- a/platform/commonUI/edit/test/creation/CreateWizardSpec.js
+++ /dev/null
@@ -1,197 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * MCTRepresentationSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/creation/CreateWizard"],
-    function (CreateWizard) {
-
-        xdescribe("The create wizard", function () {
-            var mockType,
-                mockParent,
-                mockProperties,
-                mockPolicyService,
-                testModel,
-                mockDomainObject,
-                wizard;
-
-            function createMockProperty(name) {
-                var mockProperty = jasmine.createSpyObj(
-                    "property" + name,
-                    ["getDefinition", "getValue", "setValue"]
-                );
-                mockProperty.getDefinition.and.returnValue({
-                    control: "textfield"
-                });
-                mockProperty.getValue.and.returnValue(name);
-
-                return mockProperty;
-            }
-
-            beforeEach(function () {
-                mockType = jasmine.createSpyObj(
-                    "type",
-                    [
-                        "getKey",
-                        "getGlyph",
-                        "getCssClass",
-                        "getName",
-                        "getDescription",
-                        "getProperties",
-                        "getInitialModel"
-                    ]
-                );
-                mockParent = jasmine.createSpyObj(
-                    "domainObject",
-                    [
-                        "getId",
-                        "getModel",
-                        "getCapability"
-                    ]
-                );
-                mockProperties = ["A", "B", "C"].map(createMockProperty);
-                mockPolicyService = jasmine.createSpyObj('policyService', ['allow']);
-
-                testModel = { someKey: "some value" };
-
-                mockType.getKey.and.returnValue("test");
-                mockType.getCssClass.and.returnValue("icon-telemetry");
-                mockType.getDescription.and.returnValue("a test type");
-                mockType.getName.and.returnValue("Test");
-                mockType.getInitialModel.and.returnValue(testModel);
-                mockType.getProperties.and.returnValue(mockProperties);
-
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getCapability', 'useCapability', 'getModel']
-                );
-
-                //Mocking the getCapability('type') call
-                mockDomainObject.getCapability.and.returnValue(mockType);
-                mockDomainObject.useCapability.and.returnValue();
-                mockDomainObject.getModel.and.returnValue(testModel);
-
-                wizard = new CreateWizard(
-                    mockDomainObject,
-                    mockParent,
-                    mockPolicyService
-                );
-            });
-
-            it("creates a form model with a Properties section", function () {
-                expect(wizard.getFormStructure().sections[0].name)
-                    .toEqual("Properties");
-            });
-
-            it("adds one row per defined type property", function () {
-                // Three properties were defined in the mock type
-                expect(wizard.getFormStructure().sections[0].rows.length)
-                    .toEqual(3);
-            });
-
-            it("interprets form data using type-defined properties", function () {
-                // Use key names from mock properties
-                wizard.createModel([
-                    "field 0",
-                    "field 1",
-                    "field 2"
-                ]);
-
-                // Should have gotten a setValue call
-                mockProperties.forEach(function (mockProperty, i) {
-                    expect(mockProperty.setValue).toHaveBeenCalledWith(
-                        {
-                            someKey: "some value",
-                            type: 'test'
-                        },
-                        "field " + i
-                    );
-                });
-            });
-
-            it("looks up initial values from properties", function () {
-                var initialValue = wizard.getInitialFormValue();
-
-                expect(initialValue[0]).toEqual("A");
-                expect(initialValue[1]).toEqual("B");
-                expect(initialValue[2]).toEqual("C");
-
-                // Verify that expected argument was passed
-                mockProperties.forEach(function (mockProperty) {
-                    expect(mockProperty.getValue)
-                        .toHaveBeenCalledWith(testModel);
-                });
-            });
-
-            it("populates the model on the associated object", function () {
-                var formValue = {
-                        "A": "ValueA",
-                        "B": "ValueB",
-                        "C": "ValueC"
-                    },
-                    compareModel = wizard.createModel(formValue);
-                //populateObjectFromInput adds a .location attribute that is not added by createModel.
-                compareModel.location = undefined;
-                wizard.populateObjectFromInput(formValue);
-                expect(mockDomainObject.useCapability).toHaveBeenCalledWith('mutation', jasmine.any(Function));
-                expect(mockDomainObject.useCapability.calls.mostRecent().args[1]()).toEqual(compareModel);
-            });
-
-            it("validates selection types using policy", function () {
-                var mockDomainObj = jasmine.createSpyObj(
-                        'domainObject',
-                        ['getCapability']
-                    ),
-                    mockOtherType = jasmine.createSpyObj(
-                        'otherType',
-                        ['getKey']
-                    ),
-
-                    //Create a form structure with location
-                    structure = wizard.getFormStructure(true),
-                    sections = structure.sections,
-                    rows = structure.sections[sections.length - 1].rows,
-                    locationRow = rows[rows.length - 1];
-
-                mockDomainObj.getCapability.and.returnValue(mockOtherType);
-                locationRow.validate(mockDomainObj);
-
-                // Should check policy to see if the user-selected location
-                // can actually contain objects of this type
-                expect(mockPolicyService.allow).toHaveBeenCalledWith(
-                    'composition',
-                    mockDomainObj,
-                    mockDomainObject
-                );
-            });
-
-            it("creates a form model without a location if not requested", function () {
-                expect(wizard.getFormStructure(false).sections.some(function (section) {
-                    return section.name === 'Location';
-                })).toEqual(false);
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/edit/test/creation/CreationPolicySpec.js b/platform/commonUI/edit/test/creation/CreationPolicySpec.js
deleted file mode 100644
index fa65ac767ac..00000000000
--- a/platform/commonUI/edit/test/creation/CreationPolicySpec.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/creation/CreationPolicy"],
-    function (CreationPolicy) {
-
-        describe("The creation policy", function () {
-            var mockType,
-                policy;
-
-            beforeEach(function () {
-                mockType = jasmine.createSpyObj(
-                    'type',
-                    ['hasFeature']
-                );
-
-                policy = new CreationPolicy();
-            });
-
-            it("allows creation of types with the creation feature", function () {
-                mockType.hasFeature.and.returnValue(true);
-                expect(policy.allow(mockType)).toBeTruthy();
-            });
-
-            it("disallows creation of types without the creation feature", function () {
-                mockType.hasFeature.and.returnValue(false);
-                expect(policy.allow(mockType)).toBeFalsy();
-            });
-        });
-    }
-);
diff --git a/platform/commonUI/edit/test/creation/CreationServiceSpec.js b/platform/commonUI/edit/test/creation/CreationServiceSpec.js
deleted file mode 100644
index 799474d24e8..00000000000
--- a/platform/commonUI/edit/test/creation/CreationServiceSpec.js
+++ /dev/null
@@ -1,216 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * MCTRepresentationSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/creation/CreationService"],
-    function (CreationService) {
-
-        describe("The creation service", function () {
-            var mockQ,
-                mockLog,
-                mockParentObject,
-                mockNewObject,
-                mockMutationCapability,
-                mockPersistenceCapability,
-                mockCompositionCapability,
-                mockContextCapability,
-                mockCreationCapability,
-                mockCapabilities,
-                mockNewPersistenceCapability,
-                creationService;
-
-            function mockPromise(value) {
-                return (value && value.then) ? value : {
-                    then: function (callback) {
-                        return mockPromise(callback(value));
-                    }
-                };
-            }
-
-            function mockReject(value) {
-                return {
-                    then: function (callback, error) {
-                        return mockPromise(error(value));
-                    }
-                };
-            }
-
-            beforeEach(function () {
-                mockQ = {
-                    when: mockPromise,
-                    reject: mockReject
-                };
-                mockLog = jasmine.createSpyObj(
-                    "$log",
-                    ["error", "warn", "info", "debug"]
-                );
-                mockParentObject = jasmine.createSpyObj(
-                    "parentObject",
-                    ["getId", "getCapability", "useCapability"]
-                );
-                mockNewObject = jasmine.createSpyObj(
-                    "newObject",
-                    ["getId", "getCapability", "useCapability"]
-                );
-                mockMutationCapability = jasmine.createSpyObj(
-                    "mutation",
-                    ["invoke"]
-                );
-                mockPersistenceCapability = jasmine.createSpyObj(
-                    "persistence",
-                    ["persist", "getSpace"]
-                );
-                mockCompositionCapability = jasmine.createSpyObj(
-                    "composition",
-                    ["invoke", "add"]
-                );
-                mockContextCapability = jasmine.createSpyObj(
-                    "context",
-                    ["getPath"]
-                );
-                mockCreationCapability = jasmine.createSpyObj(
-                    "creation",
-                    ["instantiate", "invoke"]
-                );
-                mockCapabilities = {
-                    mutation: mockMutationCapability,
-                    persistence: mockPersistenceCapability,
-                    composition: mockCompositionCapability,
-                    context: mockContextCapability,
-                    instantiation: mockCreationCapability
-                };
-                mockNewPersistenceCapability = jasmine.createSpyObj(
-                    "new-persistence",
-                    ["persist", "getSpace"]
-                );
-
-                mockParentObject.getCapability.and.callFake(function (key) {
-                    return mockCapabilities[key];
-                });
-                mockParentObject.useCapability.and.callFake(function (key, value) {
-                    return mockCapabilities[key].invoke(value);
-                });
-                mockParentObject.getId.and.returnValue('parentId');
-
-                mockNewObject.getId.and.returnValue('newId');
-                mockNewObject.getCapability.and.callFake(function (c) {
-                    return c === 'persistence'
-                        ? mockNewPersistenceCapability : undefined;
-                });
-
-                mockPersistenceCapability.persist
-                    .and.returnValue(mockPromise(true));
-                mockNewPersistenceCapability.persist
-                    .and.returnValue(mockPromise(true));
-
-                mockMutationCapability.invoke.and.returnValue(mockPromise(true));
-                mockPersistenceCapability.getSpace.and.returnValue("testSpace");
-                mockCompositionCapability.invoke.and.returnValue(
-                    mockPromise([mockNewObject])
-                );
-                mockCompositionCapability.add.and.returnValue(mockPromise(true));
-                mockCreationCapability.instantiate.and.returnValue(mockNewObject);
-                mockCreationCapability.invoke.and.callFake(function (model) {
-                    return mockCreationCapability.instantiate(model);
-                });
-
-                creationService = new CreationService(
-                    mockQ,
-                    mockLog
-                );
-            });
-
-            it("allows new objects to be created", function () {
-                var model = { someKey: "some value" };
-                creationService.createObject(model, mockParentObject);
-                expect(mockCreationCapability.instantiate)
-                    .toHaveBeenCalledWith(model);
-            });
-
-            it("adds new objects to the parent's composition", function () {
-                var model = { someKey: "some value" };
-                creationService.createObject(model, mockParentObject);
-
-                // Verify that a new ID was added
-                expect(mockCompositionCapability.add)
-                    .toHaveBeenCalledWith(mockNewObject);
-            });
-
-            it("provides the newly-created object", function () {
-                var mockDomainObject = jasmine.createSpyObj(
-                        'newDomainObject',
-                        ['getId', 'getModel', 'getCapability']
-                    ),
-                    mockCallback = jasmine.createSpy('callback');
-
-                // Act as if the object had been created
-                mockCompositionCapability.add.and.callFake(function (id) {
-                    mockDomainObject.getId.and.returnValue(id);
-                    mockCompositionCapability.invoke
-                        .and.returnValue(mockPromise([mockDomainObject]));
-
-                    return mockPromise(mockDomainObject);
-                });
-
-                // Should find it in the composition
-                creationService.createObject({}, mockParentObject)
-                    .then(mockCallback);
-
-                expect(mockCallback).toHaveBeenCalledWith(mockDomainObject);
-
-            });
-
-            it("warns if parent has no persistence capability", function () {
-                // Callbacks
-                var success = jasmine.createSpy("success"),
-                    failure = jasmine.createSpy("failure");
-
-                mockCapabilities.persistence = undefined;
-                creationService.createObject({}, mockParentObject).then(
-                    success,
-                    failure
-                );
-
-                // Should have warned and rejected the promise
-                expect(mockLog.warn).toHaveBeenCalled();
-                expect(success).not.toHaveBeenCalled();
-                expect(failure).toHaveBeenCalled();
-            });
-
-            it("logs an error when mutation fails", function () {
-                // If mutation of the parent fails, we've lost the
-                // created object - this is an error.
-                var model = { someKey: "some value" };
-
-                mockCompositionCapability.add.and.returnValue(mockPromise(false));
-
-                creationService.createObject(model, mockParentObject);
-
-                expect(mockLog.error).toHaveBeenCalled();
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/edit/test/creation/LocatorControllerSpec.js b/platform/commonUI/edit/test/creation/LocatorControllerSpec.js
deleted file mode 100644
index 615fb645e41..00000000000
--- a/platform/commonUI/edit/test/creation/LocatorControllerSpec.js
+++ /dev/null
@@ -1,171 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * MCTRepresentationSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/creation/LocatorController"],
-    function (LocatorController) {
-
-        describe("The locator controller", function () {
-            var mockScope,
-                mockTimeout,
-                mockDomainObject,
-                mockRootObject,
-                mockContext,
-                mockObjectService,
-                getObjectsPromise,
-                controller;
-
-            beforeEach(function () {
-                mockScope = jasmine.createSpyObj(
-                    "$scope",
-                    ["$watch"]
-                );
-                mockTimeout = jasmine.createSpy("$timeout");
-                mockDomainObject = jasmine.createSpyObj(
-                    "domainObject",
-                    ["getCapability"]
-                );
-                mockRootObject = jasmine.createSpyObj(
-                    "rootObject",
-                    ["getCapability"]
-                );
-                mockContext = jasmine.createSpyObj(
-                    "context",
-                    ["getRoot"]
-                );
-                mockObjectService = jasmine.createSpyObj(
-                    "objectService",
-                    ["getObjects"]
-                );
-                getObjectsPromise = jasmine.createSpyObj(
-                    "promise",
-                    ["then"]
-                );
-
-                mockDomainObject.getCapability.and.returnValue(mockContext);
-                mockContext.getRoot.and.returnValue(mockRootObject);
-                mockObjectService.getObjects.and.returnValue(getObjectsPromise);
-
-                mockScope.ngModel = {};
-                mockScope.field = "someField";
-
-                controller = new LocatorController(mockScope, mockTimeout, mockObjectService);
-            });
-            describe("when context is available", function () {
-
-                beforeEach(function () {
-                    mockContext.getRoot.and.returnValue(mockRootObject);
-                    controller = new LocatorController(mockScope, mockTimeout, mockObjectService);
-                });
-
-                it("adds a treeModel to scope", function () {
-                    expect(mockScope.treeModel).toBeDefined();
-                });
-
-                it("watches for changes to treeModel", function () {
-                    // This is what the embedded tree representation
-                    // will be modifying.
-                    expect(mockScope.$watch).toHaveBeenCalledWith(
-                        "treeModel.selectedObject",
-                        jasmine.any(Function)
-                    );
-                });
-
-                it("changes its own model on embedded model updates", function () {
-                    // Need to pass on selection changes as updates to
-                    // the control's value
-                    mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
-                    mockTimeout.calls.mostRecent().args[0]();
-                    expect(mockScope.ngModel.someField).toEqual(mockDomainObject);
-                    expect(mockScope.rootObject).toEqual(mockRootObject);
-
-                    // Verify that the capability we expect to have been used
-                    // was used.
-                    expect(mockDomainObject.getCapability)
-                        .toHaveBeenCalledWith("context");
-                });
-
-                it("rejects changes which fail validation", function () {
-                    mockScope.structure = { validate: jasmine.createSpy('validate') };
-                    mockScope.structure.validate.and.returnValue(false);
-
-                    // Pass selection change
-                    mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
-                    mockTimeout.calls.mostRecent().args[0]();
-
-                    expect(mockScope.structure.validate).toHaveBeenCalled();
-                    // Change should have been rejected
-                    expect(mockScope.ngModel.someField).not.toEqual(mockDomainObject);
-                });
-
-                it("treats a lack of a selection as invalid", function () {
-                    mockScope.ngModelController = jasmine.createSpyObj(
-                        'ngModelController',
-                        ['$setValidity']
-                    );
-
-                    mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
-                    mockTimeout.calls.mostRecent().args[0]();
-                    expect(mockScope.ngModelController.$setValidity)
-                        .toHaveBeenCalledWith(jasmine.any(String), true);
-
-                    mockScope.$watch.calls.mostRecent().args[1](undefined);
-                    mockTimeout.calls.mostRecent().args[0]();
-                    expect(mockScope.ngModelController.$setValidity)
-                        .toHaveBeenCalledWith(jasmine.any(String), false);
-                });
-            });
-            describe("when no context is available", function () {
-                var defaultRoot = "DEFAULT_ROOT";
-
-                beforeEach(function () {
-                    mockContext.getRoot.and.returnValue(undefined);
-                    getObjectsPromise.then.and.callFake(function (callback) {
-                        callback({'ROOT': defaultRoot});
-                    });
-                    controller = new LocatorController(mockScope, mockTimeout, mockObjectService);
-                });
-
-                it("provides a default context where none is available", function () {
-                    mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
-                    mockTimeout.calls.mostRecent().args[0]();
-                    expect(mockScope.rootObject).toBe(defaultRoot);
-                });
-
-                it("does not issue redundant requests for the root object", function () {
-                    mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
-                    mockTimeout.calls.mostRecent().args[0]();
-                    mockScope.$watch.calls.mostRecent().args[1](undefined);
-                    mockTimeout.calls.mostRecent().args[0]();
-                    mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
-                    mockTimeout.calls.mostRecent().args[0]();
-                    expect(mockObjectService.getObjects.calls.count())
-                        .toEqual(1);
-                });
-
-            });
-        });
-    }
-);
diff --git a/platform/commonUI/edit/test/policies/EditPersistableObjectsSpec.js b/platform/commonUI/edit/test/policies/EditPersistableObjectsSpec.js
deleted file mode 100644
index 8213c6253da..00000000000
--- a/platform/commonUI/edit/test/policies/EditPersistableObjectsSpec.js
+++ /dev/null
@@ -1,102 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/policies/EditPersistableObjectsPolicy"],
-    function (EditPersistableObjectsPolicy) {
-
-        describe("The Edit persistable objects policy", function () {
-            var mockDomainObject,
-                mockEditAction,
-                mockPropertiesAction,
-                mockOtherAction,
-                mockAPI,
-                mockObjectAPI,
-                testContext,
-                policy;
-
-            beforeEach(function () {
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    [
-                        'getId'
-                    ]
-                );
-
-                mockObjectAPI = jasmine.createSpyObj('objectAPI', [
-                    'isPersistable',
-                    'parseKeyString'
-                ]);
-
-                mockAPI = {
-                    objects: mockObjectAPI
-                };
-
-                mockEditAction = jasmine.createSpyObj('edit', ['getMetadata']);
-                mockPropertiesAction = jasmine.createSpyObj('properties', ['getMetadata']);
-                mockOtherAction = jasmine.createSpyObj('other', ['getMetadata']);
-
-                mockEditAction.getMetadata.and.returnValue({ key: 'edit' });
-                mockPropertiesAction.getMetadata.and.returnValue({ key: 'properties' });
-                mockOtherAction.getMetadata.and.returnValue({key: 'other'});
-
-                mockDomainObject.getId.and.returnValue('test:testId');
-
-                testContext = {
-                    domainObject: mockDomainObject,
-                    category: 'view-control'
-                };
-
-                policy = new EditPersistableObjectsPolicy(mockAPI);
-            });
-
-            it("Applies to edit action", function () {
-                expect(mockObjectAPI.isPersistable).not.toHaveBeenCalled();
-
-                policy.allow(mockEditAction, testContext);
-                expect(mockObjectAPI.isPersistable).toHaveBeenCalled();
-            });
-
-            it("Applies to properties action", function () {
-                expect(mockObjectAPI.isPersistable).not.toHaveBeenCalled();
-
-                policy.allow(mockPropertiesAction, testContext);
-                expect(mockObjectAPI.isPersistable).toHaveBeenCalled();
-            });
-
-            it("does not apply to other actions", function () {
-                expect(mockObjectAPI.isPersistable).not.toHaveBeenCalled();
-
-                policy.allow(mockOtherAction, testContext);
-                expect(mockObjectAPI.isPersistable).not.toHaveBeenCalled();
-            });
-
-            it("Tests object provider for editability", function () {
-                mockObjectAPI.isPersistable.and.returnValue(false);
-                expect(policy.allow(mockEditAction, testContext)).toBe(false);
-                expect(mockObjectAPI.isPersistable).toHaveBeenCalled();
-                mockObjectAPI.isPersistable.and.returnValue(true);
-                expect(policy.allow(mockEditAction, testContext)).toBe(true);
-            });
-        });
-    }
-);
diff --git a/platform/commonUI/edit/test/representers/EditRepresenterSpec.js b/platform/commonUI/edit/test/representers/EditRepresenterSpec.js
deleted file mode 100644
index a9d9657a4dd..00000000000
--- a/platform/commonUI/edit/test/representers/EditRepresenterSpec.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    '../../src/representers/EditRepresenter'
-], function (
-    EditRepresenter
-) {
-    describe('EditRepresenter', function () {
-        var $log,
-            $scope,
-            representer;
-
-        beforeEach(function () {
-            $log = jasmine.createSpyObj('$log', ['debug']);
-            $scope = {};
-            representer = new EditRepresenter($log, $scope);
-        });
-
-        it('injects a commit function in scope', function () {
-            expect($scope.commit).toEqual(jasmine.any(Function));
-        });
-
-        describe('representation', function () {
-            var domainObject,
-                representation;
-
-            beforeEach(function () {
-                domainObject = jasmine.createSpyObj('domainObject', [
-                    'getId',
-                    'getModel',
-                    'useCapability'
-                ]);
-
-                domainObject.getId.and.returnValue('anId');
-                domainObject.getModel.and.returnValue({name: 'anObject'});
-
-                representation = {
-                    key: 'someRepresentation'
-                };
-                $scope.model = {name: 'anotherName'};
-                $scope.configuration = {some: 'config'};
-                representer.represent(representation, domainObject);
-            });
-
-            it('logs a message when commiting', function () {
-                $scope.commit('Test Message');
-                expect($log.debug)
-                    .toHaveBeenCalledWith('Committing  anObject (anId): Test Message');
-            });
-
-            it('mutates the object when committing', function () {
-                $scope.commit('Test Message');
-
-                expect(domainObject.useCapability)
-                    .toHaveBeenCalledWith('mutation', jasmine.any(Function));
-
-                var mutateValue = domainObject.useCapability.calls.all()[0].args[1]();
-
-                expect(mutateValue.configuration.someRepresentation)
-                    .toEqual({some: 'config'});
-                expect(mutateValue.name).toEqual('anotherName');
-            });
-
-        });
-
-    });
-});
diff --git a/platform/commonUI/edit/test/services/NestedTransactionSpec.js b/platform/commonUI/edit/test/services/NestedTransactionSpec.js
deleted file mode 100644
index d5a22604a96..00000000000
--- a/platform/commonUI/edit/test/services/NestedTransactionSpec.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(["../../src/services/NestedTransaction"], function (NestedTransaction) {
-    var TRANSACTION_METHODS = ['add', 'commit', 'cancel', 'size'];
-
-    describe("A NestedTransaction", function () {
-        var mockTransaction,
-            nestedTransaction;
-
-        beforeEach(function () {
-            mockTransaction =
-                jasmine.createSpyObj('transaction', TRANSACTION_METHODS);
-            nestedTransaction = new NestedTransaction(mockTransaction);
-        });
-
-        it("exposes a Transaction's interface", function () {
-            TRANSACTION_METHODS.forEach(function (method) {
-                expect(nestedTransaction[method])
-                    .toEqual(jasmine.any(Function));
-            });
-        });
-
-        describe("when callbacks are added", function () {
-            var mockCommit,
-                mockCancel;
-
-            beforeEach(function () {
-                mockCommit = jasmine.createSpy('commit');
-                mockCancel = jasmine.createSpy('cancel');
-                nestedTransaction.add(mockCommit, mockCancel);
-            });
-
-            it("does not interact with its parent transaction", function () {
-                TRANSACTION_METHODS.forEach(function (method) {
-                    expect(mockTransaction[method])
-                        .not.toHaveBeenCalled();
-                });
-            });
-
-            describe("and the transaction is committed", function () {
-                beforeEach(function () {
-                    nestedTransaction.commit();
-                });
-
-                it("adds to its parent transaction", function () {
-                    expect(mockTransaction.add).toHaveBeenCalledWith(
-                        jasmine.any(Function),
-                        jasmine.any(Function)
-                    );
-                });
-            });
-        });
-    });
-});
-
diff --git a/platform/commonUI/edit/test/services/TransactionManagerSpec.js b/platform/commonUI/edit/test/services/TransactionManagerSpec.js
deleted file mode 100644
index 9b6e164b9dd..00000000000
--- a/platform/commonUI/edit/test/services/TransactionManagerSpec.js
+++ /dev/null
@@ -1,141 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/services/TransactionManager"],
-    function (TransactionManager) {
-        describe("TransactionManager", function () {
-            var mockTransactionService,
-                testId,
-                mockOnCommit,
-                mockOnCancel,
-                mockRemoves,
-                mockPromise,
-                manager;
-
-            beforeEach(function () {
-                mockRemoves = [];
-                mockTransactionService = jasmine.createSpyObj(
-                    "transactionService",
-                    ["addToTransaction", "isActive"]
-                );
-                mockOnCommit = jasmine.createSpy('commit');
-                mockOnCancel = jasmine.createSpy('cancel');
-                testId = 'test-id';
-                mockPromise = jasmine.createSpyObj('promise', ['then']);
-
-                mockOnCommit.and.returnValue(mockPromise);
-                mockOnCancel.and.returnValue(mockPromise);
-
-                mockTransactionService.addToTransaction.and.callFake(function () {
-                    var mockRemove =
-                        jasmine.createSpy('remove-' + mockRemoves.length);
-                    mockRemoves.push(mockRemove);
-
-                    return mockRemove;
-                });
-
-                manager = new TransactionManager(mockTransactionService);
-            });
-
-            it("delegates isActive calls", function () {
-                [false, true].forEach(function (state) {
-                    mockTransactionService.isActive.and.returnValue(state);
-                    expect(manager.isActive()).toBe(state);
-                });
-            });
-
-            describe("when addToTransaction is called", function () {
-                beforeEach(function () {
-                    manager.addToTransaction(
-                        testId,
-                        mockOnCommit,
-                        mockOnCancel
-                    );
-                });
-
-                it("adds callbacks to the active transaction", function () {
-                    expect(mockTransactionService.addToTransaction)
-                        .toHaveBeenCalledWith(
-                            jasmine.any(Function),
-                            jasmine.any(Function)
-                        );
-                });
-
-                it("invokes passed-in callbacks from its own callbacks", function () {
-                    expect(mockOnCommit).not.toHaveBeenCalled();
-                    mockTransactionService.addToTransaction
-                        .calls.mostRecent().args[0]();
-                    expect(mockOnCommit).toHaveBeenCalled();
-
-                    expect(mockOnCancel).not.toHaveBeenCalled();
-                    mockTransactionService.addToTransaction
-                        .calls.mostRecent().args[1]();
-                    expect(mockOnCancel).toHaveBeenCalled();
-                });
-
-                describe("Adds callbacks to transaction", function () {
-                    beforeEach(function () {
-                        spyOn(manager, 'clearTransactionsFor');
-                        manager.clearTransactionsFor.and.callThrough();
-                    });
-
-                    it("and clears pending calls if same object", function () {
-                        manager.addToTransaction(
-                            testId,
-                            jasmine.createSpy(),
-                            jasmine.createSpy()
-                        );
-                        expect(manager.clearTransactionsFor).toHaveBeenCalledWith(testId);
-                    });
-
-                    it("and does not clear pending calls if different object", function () {
-                        manager.addToTransaction(
-                            'other-id',
-                            jasmine.createSpy(),
-                            jasmine.createSpy()
-                        );
-                        expect(manager.clearTransactionsFor).not.toHaveBeenCalled();
-                    });
-
-                    afterEach(function () {
-                        expect(mockTransactionService.addToTransaction.calls.count()).toEqual(2);
-                    });
-                });
-
-                it("does not remove callbacks from the transaction", function () {
-                    expect(mockRemoves[0]).not.toHaveBeenCalled();
-                });
-
-                describe("and clearTransactionsFor is subsequently called", function () {
-                    beforeEach(function () {
-                        manager.clearTransactionsFor(testId);
-                    });
-
-                    it("removes callbacks from the transaction", function () {
-                        expect(mockRemoves[0]).toHaveBeenCalled();
-                    });
-                });
-            });
-        });
-    }
-);
diff --git a/platform/commonUI/edit/test/services/TransactionServiceSpec.js b/platform/commonUI/edit/test/services/TransactionServiceSpec.js
deleted file mode 100644
index 548607e16ff..00000000000
--- a/platform/commonUI/edit/test/services/TransactionServiceSpec.js
+++ /dev/null
@@ -1,139 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/services/TransactionService"],
-    function (TransactionService) {
-
-        describe("The Transaction Service", function () {
-            var mockQ,
-                mockLog,
-                mockCacheService,
-                transactionService;
-
-            function fastPromise(val) {
-                return {
-                    then: function (callback) {
-                        return fastPromise(callback(val));
-                    }
-                };
-            }
-
-            beforeEach(function () {
-                mockQ = jasmine.createSpyObj("$q", ["all"]);
-                mockCacheService = jasmine.createSpyObj("cacheService", ["flush"]);
-                mockQ.all.and.returnValue(fastPromise());
-                mockLog = jasmine.createSpyObj("$log", ["error"]);
-                transactionService = new TransactionService(mockQ, mockLog, mockCacheService);
-            });
-
-            it("isActive returns true if a transaction is in progress", function () {
-                expect(transactionService.isActive()).toBe(false);
-                transactionService.startTransaction();
-                expect(transactionService.isActive()).toBe(true);
-            });
-
-            it("addToTransaction queues onCommit and onCancel functions", function () {
-                var onCommit = jasmine.createSpy('onCommit'),
-                    onCancel = jasmine.createSpy('onCancel');
-
-                transactionService.startTransaction();
-                transactionService.addToTransaction(onCommit, onCancel);
-                expect(transactionService.size()).toBe(1);
-            });
-
-            it("size function returns size of commit and cancel queues", function () {
-                var onCommit = jasmine.createSpy('onCommit'),
-                    onCancel = jasmine.createSpy('onCancel');
-
-                transactionService.startTransaction();
-                transactionService.addToTransaction(onCommit, onCancel);
-                transactionService.addToTransaction(onCommit, onCancel);
-                transactionService.addToTransaction(onCommit, onCancel);
-                expect(transactionService.size()).toBe(3);
-            });
-
-            describe("commit", function () {
-                var onCommits;
-
-                beforeEach(function () {
-                    onCommits = [0, 1, 2].map(function (val) {
-                        return jasmine.createSpy("onCommit" + val);
-                    });
-
-                    transactionService.startTransaction();
-                    onCommits.forEach(transactionService.addToTransaction.bind(transactionService));
-                });
-
-                it("commit calls all queued commit functions", function () {
-                    expect(transactionService.size()).toBe(3);
-
-                    return transactionService.commit().then(() => {
-                        onCommits.forEach(function (spy) {
-                            expect(spy).toHaveBeenCalled();
-                        });
-                    });
-                });
-
-                it("commit resets active state and clears queues", function () {
-                    return transactionService.commit().then(() => {
-                        expect(transactionService.isActive()).toBe(false);
-                        expect(transactionService.size()).toBe(0);
-                        expect(transactionService.size()).toBe(0);
-                    });
-                });
-
-            });
-
-            describe("cancel", function () {
-                var onCancels;
-
-                beforeEach(function () {
-                    onCancels = [0, 1, 2].map(function (val) {
-                        return jasmine.createSpy("onCancel" + val);
-                    });
-
-                    transactionService.startTransaction();
-                    onCancels.forEach(function (onCancel) {
-                        transactionService.addToTransaction(undefined, onCancel);
-                    });
-                });
-
-                it("cancel calls all queued cancel functions", function () {
-                    expect(transactionService.size()).toBe(3);
-                    transactionService.cancel();
-                    onCancels.forEach(function (spy) {
-                        expect(spy).toHaveBeenCalled();
-                    });
-                });
-
-                it("cancel resets active state and clears queues", function () {
-                    transactionService.cancel();
-                    expect(transactionService.isActive()).toBe(false);
-                    expect(transactionService.size()).toBe(0);
-                });
-
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/edit/test/services/TransactionSpec.js b/platform/commonUI/edit/test/services/TransactionSpec.js
deleted file mode 100644
index 1082ef39309..00000000000
--- a/platform/commonUI/edit/test/services/TransactionSpec.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/services/Transaction"],
-    function (Transaction) {
-
-        describe("A Transaction", function () {
-            var mockLog,
-                transaction;
-
-            beforeEach(function () {
-                mockLog = jasmine.createSpyObj(
-                    '$log',
-                    ['warn', 'info', 'error', 'debug']
-                );
-                transaction = new Transaction(mockLog);
-            });
-
-            it("initially has a size of zero", function () {
-                expect(transaction.size()).toEqual(0);
-            });
-
-            describe("when callbacks are added", function () {
-                var mockCommit,
-                    mockCancel,
-                    remove;
-
-                beforeEach(function () {
-                    mockCommit = jasmine.createSpy('commit');
-                    mockCancel = jasmine.createSpy('cancel');
-                    remove = transaction.add(mockCommit, mockCancel);
-                });
-
-                it("reports a new size", function () {
-                    expect(transaction.size()).toEqual(1);
-                });
-
-                it("returns a function to remove those callbacks", function () {
-                    expect(remove).toEqual(jasmine.any(Function));
-                    remove();
-                    expect(transaction.size()).toEqual(0);
-                });
-
-                describe("and the transaction is committed", function () {
-                    beforeEach(function () {
-                        transaction.commit();
-                    });
-
-                    it("triggers the commit callback", function () {
-                        expect(mockCommit).toHaveBeenCalled();
-                    });
-
-                    it("does not trigger the cancel callback", function () {
-                        expect(mockCancel).not.toHaveBeenCalled();
-                    });
-                });
-
-                describe("and the transaction is cancelled", function () {
-                    beforeEach(function () {
-                        transaction.cancel();
-                    });
-
-                    it("triggers the cancel callback", function () {
-                        expect(mockCancel).toHaveBeenCalled();
-                    });
-
-                    it("does not trigger the commit callback", function () {
-                        expect(mockCommit).not.toHaveBeenCalled();
-                    });
-                });
-
-                describe("and an exception is encountered during commit", function () {
-                    beforeEach(function () {
-                        mockCommit.and.callFake(function () {
-                            throw new Error("test error");
-                        });
-                        transaction.commit();
-                    });
-
-                    it("logs an error", function () {
-                        expect(mockLog.error).toHaveBeenCalled();
-                    });
-                });
-            });
-
-        });
-    }
-);
-
diff --git a/platform/commonUI/formats/bundle.js b/platform/commonUI/formats/bundle.js
deleted file mode 100644
index 5e2879d0863..00000000000
--- a/platform/commonUI/formats/bundle.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/FormatProvider",
-    "./src/UTCTimeFormat",
-    "./src/DurationFormat"
-], function (
-    FormatProvider,
-    UTCTimeFormat,
-    DurationFormat
-) {
-
-    return {
-        name: "platform/commonUI/formats",
-        definition: {
-            "name": "Format Registry",
-            "description": "Provides a registry for formats, which allow parsing and formatting of values.",
-            "extensions": {
-                "components": [
-                    {
-                        "provides": "formatService",
-                        "type": "provider",
-                        "implementation": FormatProvider,
-                        "depends": [
-                            "formats[]"
-                        ]
-                    }
-                ],
-                "formats": [
-                    {
-                        "key": "utc",
-                        "implementation": UTCTimeFormat
-                    },
-                    {
-                        "key": "duration",
-                        "implementation": DurationFormat
-                    }
-                ],
-                "constants": [
-                    {
-                        "key": "DEFAULT_TIME_FORMAT",
-                        "value": "utc"
-                    }
-                ],
-                "licenses": [
-                    {
-                        "name": "d3",
-                        "version": "3.0.0",
-                        "description": "Incorporates modified code from d3 Time Scales",
-                        "author": "Mike Bostock",
-                        "copyright": "Copyright 2010-2016 Mike Bostock. "
-                    + "All rights reserved.",
-                        "link": "https://github.com/d3/d3/blob/master/LICENSE"
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/commonUI/formats/src/DurationFormat.js b/platform/commonUI/formats/src/DurationFormat.js
deleted file mode 100644
index 593bf314146..00000000000
--- a/platform/commonUI/formats/src/DurationFormat.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    'moment'
-], function (
-    moment
-) {
-
-    var DATE_FORMAT = "HH:mm:ss",
-        DATE_FORMATS = [
-            DATE_FORMAT
-        ];
-
-    /**
-     * Formatter for duration. Uses moment to produce a date from a given
-     * value, but output is formatted to display only time. Can be used for
-     * specifying a time duration. For specifying duration, it's best to
-     * specify a date of January 1, 1970, as the ms offset will equal the
-     * duration represented by the time.
-     *
-     * @implements {Format}
-     * @constructor
-     * @memberof platform/commonUI/formats
-     */
-    function DurationFormat() {
-        this.key = "duration";
-    }
-
-    DurationFormat.prototype.format = function (value) {
-        return moment.utc(value).format(DATE_FORMAT);
-    };
-
-    DurationFormat.prototype.parse = function (text) {
-        return moment.duration(text).asMilliseconds();
-    };
-
-    DurationFormat.prototype.validate = function (text) {
-        return moment.utc(text, DATE_FORMATS, true).isValid();
-    };
-
-    return DurationFormat;
-});
diff --git a/platform/commonUI/formats/src/FormatProvider.js b/platform/commonUI/formats/src/FormatProvider.js
deleted file mode 100644
index ab49c25574e..00000000000
--- a/platform/commonUI/formats/src/FormatProvider.js
+++ /dev/null
@@ -1,123 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-
-], function (
-
-) {
-
-    /**
-     * An object used to convert between numeric values and text values,
-     * typically used to display these values to the user and to convert
-     * user input to a numeric format, particularly for time formats.
-     * @interface Format
-     */
-    /**
-     * Parse text (typically user input) to a numeric value.
-     * Behavior is undefined when the text cannot be parsed;
-     * `validate` should be called first if the text may be invalid.
-     * @method Format#parse
-     * @memberof Format#
-     * @param {string} text the text to parse
-     * @returns {number} the parsed numeric value
-     */
-
-    /**
-     * @property {string} key A unique identifier for this formatter.
-     * @memberof Format#
-     */
-
-    /**
-     * Determine whether or not some text (typically user input) can
-     * be parsed to a numeric value by this format.
-     * @method validate
-     * @memberof Format#
-     * @param {string} text the text to parse
-     * @returns {boolean} true if the text can be parsed
-     */
-
-    /**
-     * Convert a numeric value to a text value for display using
-     * this format.
-     * @method format
-     * @memberof Format#
-     * @param {number} value the numeric value to format
-     * @param {number} [minValue] Contextual information for scaled formatting used in linear scales such as conductor
-     * and plot axes. Specifies the smallest number on the scale.
-     * @param {number} [maxValue] Contextual information for scaled formatting used in linear scales such as conductor
-     * and plot axes. Specifies the largest number on the scale
-     * @param {number} [count] Contextual information for scaled formatting used in linear scales such as conductor
-     * and plot axes. The number of labels on the scale.
-     * @returns {string} the text representation of the value
-     */
-
-    /**
-     * Provides access to `Format` objects which can be used to
-     * convert values between human-readable text and numeric
-     * representations.
-     * @interface FormatService
-     */
-
-    /**
-     * Look up a format by its symbolic identifier.
-     * @method getFormat
-     * @memberof FormatService#
-     * @param {string} key the identifier for this format
-     * @returns {Format} the format
-     * @throws {Error} errors when the requested format is unrecognized
-     */
-
-    /**
-     * Provides formats from the `formats` extension category.
-     * @constructor
-     * @implements {FormatService}
-     * @memberof platform/commonUI/formats
-     * @param {Array.<function(new : Format)>} format constructors,
-     *        from the `formats` extension category.
-     */
-    function FormatProvider(formats) {
-        var formatMap = {};
-
-        function addToMap(Format) {
-            var key = Format.key;
-            if (key && !formatMap[key]) {
-                formatMap[key] = new Format();
-            }
-        }
-
-        formats.forEach(addToMap);
-        this.formatMap = formatMap;
-    }
-
-    FormatProvider.prototype.getFormat = function (key) {
-        var format = this.formatMap[key];
-        if (!format) {
-            throw new Error("FormatProvider: No format found for " + key);
-        }
-
-        return format;
-    };
-
-    return FormatProvider;
-
-});
diff --git a/platform/commonUI/formats/src/UTCTimeFormat.js b/platform/commonUI/formats/src/UTCTimeFormat.js
deleted file mode 100644
index bbeba5780ce..00000000000
--- a/platform/commonUI/formats/src/UTCTimeFormat.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    'moment'
-], function (
-    moment
-) {
-
-    var DATE_FORMAT = "YYYY-MM-DD HH:mm:ss.SSS",
-        DATE_FORMATS = [
-            DATE_FORMAT,
-            DATE_FORMAT + "Z",
-            "YYYY-MM-DD HH:mm:ss",
-            "YYYY-MM-DD HH:mm",
-            "YYYY-MM-DD"
-        ];
-
-    /**
-     * @typedef Scale
-     * @property {number} min the minimum scale value, in ms
-     * @property {number} max the maximum scale value, in ms
-     */
-
-    /**
-     * Formatter for UTC timestamps. Interprets numeric values as
-     * milliseconds since the start of 1970.
-     *
-     * @implements {Format}
-     * @constructor
-     * @memberof platform/commonUI/formats
-     */
-    function UTCTimeFormat() {
-        this.key = "utc";
-    }
-
-    /**
-     * @param {number} value The value to format.
-     * @returns {string} the formatted date(s). If multiple values were requested, then an array of
-     * formatted values will be returned. Where a value could not be formatted, `undefined` will be returned at its position
-     * in the array.
-     */
-    UTCTimeFormat.prototype.format = function (value) {
-        if (value !== undefined) {
-            return moment.utc(value).format(DATE_FORMAT) + "Z";
-        } else {
-            return value;
-        }
-    };
-
-    UTCTimeFormat.prototype.parse = function (text) {
-        if (typeof text === 'number') {
-            return text;
-        }
-
-        return moment.utc(text, DATE_FORMATS).valueOf();
-    };
-
-    UTCTimeFormat.prototype.validate = function (text) {
-        return moment.utc(text, DATE_FORMATS, true).isValid();
-    };
-
-    return UTCTimeFormat;
-});
diff --git a/platform/commonUI/formats/test/FormatProviderSpec.js b/platform/commonUI/formats/test/FormatProviderSpec.js
deleted file mode 100644
index 37497e8a5b7..00000000000
--- a/platform/commonUI/formats/test/FormatProviderSpec.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['../src/FormatProvider'],
-    function (FormatProvider) {
-
-        var KEYS = ['a', 'b', 'c'];
-
-        describe("The FormatProvider", function () {
-            var mockFormats,
-                mockFormatInstances,
-                provider;
-
-            beforeEach(function () {
-                mockFormatInstances = KEYS.map(function (k) {
-                    return jasmine.createSpyObj(
-                        'format-' + k,
-                        ['parse', 'validate', 'format']
-                    );
-                });
-                // Return constructors
-                mockFormats = KEYS.map(function (k, i) {
-                    function MockFormat() {
-                        return mockFormatInstances[i];
-                    }
-
-                    MockFormat.key = k;
-
-                    return MockFormat;
-                });
-                provider = new FormatProvider(mockFormats);
-            });
-
-            it("looks up formats by key", function () {
-                KEYS.forEach(function (k, i) {
-                    expect(provider.getFormat(k))
-                        .toEqual(mockFormatInstances[i]);
-                });
-            });
-
-            it("throws an error about unknown formats", function () {
-                expect(function () {
-                    provider.getFormat('some-unknown-format');
-                }).toThrow();
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/general/README.md b/platform/commonUI/general/README.md
deleted file mode 100644
index 544baf08bc3..00000000000
--- a/platform/commonUI/general/README.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Directives
-
-* `mct-scroll-x` is an attribute whose value is an assignable
-  Angular expression. This two-way binds that expression to the
-  horizontal scroll state of the element on which it is applied.
-* `mct-scroll-y` is an attribute whose value is an assignable
-  Angular expression. This two-way binds that expression to the
-  vertical scroll state of the element on which it is applied.
diff --git a/platform/commonUI/general/bundle.js b/platform/commonUI/general/bundle.js
deleted file mode 100644
index cee38b124a3..00000000000
--- a/platform/commonUI/general/bundle.js
+++ /dev/null
@@ -1,529 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/services/UrlService",
-    "./src/services/PopupService",
-    "./src/SplashScreenManager",
-    "./src/StyleSheetLoader",
-    "./src/controllers/TimeRangeController",
-    "./src/controllers/DateTimePickerController",
-    "./src/controllers/DateTimeFieldController",
-    "./src/controllers/TreeNodeController",
-    "./src/controllers/ActionGroupController",
-    "./src/controllers/ToggleController",
-    "./src/controllers/ClickAwayController",
-    "./src/controllers/ViewSwitcherController",
-    "./src/controllers/GetterSetterController",
-    "./src/controllers/SelectorController",
-    "./src/controllers/ObjectInspectorController",
-    "./src/controllers/BannerController",
-    "./src/directives/MCTContainer",
-    "./src/directives/MCTDrag",
-    "./src/directives/MCTSelectable",
-    "./src/directives/MCTClickElsewhere",
-    "./src/directives/MCTResize",
-    "./src/directives/MCTPopup",
-    "./src/directives/MCTScroll",
-    "./src/directives/MCTSplitPane",
-    "./src/directives/MCTSplitter",
-    "./src/directives/MCTTree",
-    "./src/directives/MCTIndicators",
-    "./src/filters/ReverseFilter",
-    "./res/templates/bottombar.html",
-    "./res/templates/controls/action-button.html",
-    "./res/templates/controls/input-filter.html",
-    "./res/templates/angular-indicator.html",
-    "./res/templates/message-banner.html",
-    "./res/templates/progress-bar.html",
-    "./res/templates/controls/time-controller.html",
-    "./res/templates/containers/accordion.html",
-    "./res/templates/subtree.html",
-    "./res/templates/tree.html",
-    "./res/templates/tree-node.html",
-    "./res/templates/label.html",
-    "./res/templates/controls/action-group.html",
-    "./res/templates/controls/switcher.html",
-    "./res/templates/object-inspector.html",
-    "./res/templates/controls/selector.html",
-    "./res/templates/controls/datetime-picker.html",
-    "./res/templates/controls/datetime-field.html"
-], function (
-    UrlService,
-    PopupService,
-    SplashScreenManager,
-    StyleSheetLoader,
-    TimeRangeController,
-    DateTimePickerController,
-    DateTimeFieldController,
-    TreeNodeController,
-    ActionGroupController,
-    ToggleController,
-    ClickAwayController,
-    ViewSwitcherController,
-    GetterSetterController,
-    SelectorController,
-    ObjectInspectorController,
-    BannerController,
-    MCTContainer,
-    MCTDrag,
-    MCTSelectable,
-    MCTClickElsewhere,
-    MCTResize,
-    MCTPopup,
-    MCTScroll,
-    MCTSplitPane,
-    MCTSplitter,
-    MCTTree,
-    MCTIndicators,
-    ReverseFilter,
-    bottombarTemplate,
-    actionButtonTemplate,
-    inputFilterTemplate,
-    indicatorTemplate,
-    messageBannerTemplate,
-    progressBarTemplate,
-    timeControllerTemplate,
-    accordionTemplate,
-    subtreeTemplate,
-    treeTemplate,
-    treeNodeTemplate,
-    labelTemplate,
-    actionGroupTemplate,
-    switcherTemplate,
-    objectInspectorTemplate,
-    selectorTemplate,
-    datetimePickerTemplate,
-    datetimeFieldTemplate
-) {
-
-    return {
-        name: "platform/commonUI/general",
-        definition: {
-            "name": "General UI elements",
-            "description": "General UI elements, meant to be reused across modes",
-            "resources": "res",
-            "extensions": {
-                "services": [
-                    {
-                        "key": "urlService",
-                        "implementation": UrlService,
-                        "depends": [
-                            "$location"
-                        ]
-                    },
-                    {
-                        "key": "popupService",
-                        "implementation": PopupService,
-                        "depends": [
-                            "$document",
-                            "$window"
-                        ]
-                    }
-                ],
-                "runs": [
-                    {
-                        "implementation": StyleSheetLoader,
-                        "depends": [
-                            "stylesheets[]",
-                            "$document",
-                            "THEME",
-                            "ASSETS_PATH"
-                        ]
-                    },
-                    {
-                        "implementation": SplashScreenManager,
-                        "depends": [
-                            "$document"
-                        ]
-                    }
-                ],
-                "filters": [
-                    {
-                        "implementation": ReverseFilter,
-                        "key": "reverse"
-                    }
-                ],
-                "templates": [
-                    {
-                        "key": "bottombar",
-                        "template": bottombarTemplate
-                    },
-                    {
-                        "key": "action-button",
-                        "template": actionButtonTemplate
-                    },
-                    {
-                        "key": "input-filter",
-                        "template": inputFilterTemplate
-                    },
-                    {
-                        "key": "indicator",
-                        "template": indicatorTemplate
-                    },
-                    {
-                        "key": "message-banner",
-                        "template": messageBannerTemplate
-                    },
-                    {
-                        "key": "progress-bar",
-                        "template": progressBarTemplate
-                    },
-                    {
-                        "key": "time-controller",
-                        "template": timeControllerTemplate
-                    }
-                ],
-                "controllers": [
-                    {
-                        "key": "TimeRangeController",
-                        "implementation": TimeRangeController,
-                        "depends": [
-                            "$scope",
-                            "$timeout",
-                            "formatService",
-                            "DEFAULT_TIME_FORMAT",
-                            "now"
-                        ]
-                    },
-                    {
-                        "key": "DateTimePickerController",
-                        "implementation": DateTimePickerController,
-                        "depends": [
-                            "$scope",
-                            "now"
-                        ]
-                    },
-                    {
-                        "key": "DateTimeFieldController",
-                        "implementation": DateTimeFieldController,
-                        "depends": [
-                            "$scope",
-                            "formatService",
-                            "DEFAULT_TIME_FORMAT"
-                        ]
-                    },
-                    {
-                        "key": "TreeNodeController",
-                        "implementation": TreeNodeController,
-                        "depends": [
-                            "$scope",
-                            "$timeout",
-                            "navigationService"
-                        ]
-                    },
-                    {
-                        "key": "ActionGroupController",
-                        "implementation": ActionGroupController,
-                        "depends": [
-                            "$scope"
-                        ]
-                    },
-                    {
-                        "key": "ToggleController",
-                        "implementation": ToggleController
-                    },
-                    {
-                        "key": "ClickAwayController",
-                        "implementation": ClickAwayController,
-                        "depends": [
-                            "$document",
-                            "$timeout"
-                        ]
-                    },
-                    {
-                        "key": "ViewSwitcherController",
-                        "implementation": ViewSwitcherController,
-                        "depends": [
-                            "$scope",
-                            "$timeout"
-                        ]
-                    },
-                    {
-                        "key": "GetterSetterController",
-                        "implementation": GetterSetterController,
-                        "depends": [
-                            "$scope"
-                        ]
-                    },
-                    {
-                        "key": "SelectorController",
-                        "implementation": SelectorController,
-                        "depends": [
-                            "objectService",
-                            "$scope"
-                        ]
-                    },
-                    {
-                        "key": "ObjectInspectorController",
-                        "implementation": ObjectInspectorController,
-                        "depends": [
-                            "$scope",
-                            "objectService"
-                        ]
-                    },
-                    {
-                        "key": "BannerController",
-                        "implementation": BannerController,
-                        "depends": [
-                            "$scope",
-                            "notificationService",
-                            "dialogService"
-                        ]
-                    }
-                ],
-                "directives": [
-                    {
-                        "key": "mctContainer",
-                        "implementation": MCTContainer,
-                        "depends": [
-                            "containers[]"
-                        ]
-                    },
-                    {
-                        "key": "mctDrag",
-                        "implementation": MCTDrag,
-                        "depends": [
-                            "$document",
-                            "agentService"
-                        ]
-                    },
-                    {
-                        "key": "mctSelectable",
-                        "implementation": MCTSelectable,
-                        "depends": [
-                            "openmct"
-                        ]
-                    },
-                    {
-                        "key": "mctClickElsewhere",
-                        "implementation": MCTClickElsewhere,
-                        "depends": [
-                            "$document"
-                        ]
-                    },
-                    {
-                        "key": "mctResize",
-                        "implementation": MCTResize,
-                        "depends": [
-                            "$timeout"
-                        ]
-                    },
-                    {
-                        "key": "mctPopup",
-                        "implementation": MCTPopup,
-                        "depends": [
-                            "$compile",
-                            "popupService"
-                        ]
-                    },
-                    {
-                        "key": "mctScrollX",
-                        "implementation": MCTScroll,
-                        "depends": [
-                            "$parse",
-                            "MCT_SCROLL_X_PROPERTY",
-                            "MCT_SCROLL_X_ATTRIBUTE"
-                        ]
-                    },
-                    {
-                        "key": "mctScrollY",
-                        "implementation": MCTScroll,
-                        "depends": [
-                            "$parse",
-                            "MCT_SCROLL_Y_PROPERTY",
-                            "MCT_SCROLL_Y_ATTRIBUTE"
-                        ]
-                    },
-                    {
-                        "key": "mctSplitPane",
-                        "implementation": MCTSplitPane,
-                        "depends": [
-                            "$parse",
-                            "$log",
-                            "$interval",
-                            "$window"
-                        ]
-                    },
-                    {
-                        "key": "mctSplitter",
-                        "implementation": MCTSplitter
-                    },
-                    {
-                        "key": "mctTree",
-                        "implementation": MCTTree,
-                        "depends": ['gestureService', 'openmct']
-                    },
-                    {
-                        "key": "mctIndicators",
-                        "implementation": MCTIndicators,
-                        "depends": ['openmct']
-                    }
-                ],
-                "constants": [
-                    {
-                        "key": "MCT_SCROLL_X_PROPERTY",
-                        "value": "scrollLeft"
-                    },
-                    {
-                        "key": "MCT_SCROLL_X_ATTRIBUTE",
-                        "value": "mctScrollX"
-                    },
-                    {
-                        "key": "MCT_SCROLL_Y_PROPERTY",
-                        "value": "scrollTop"
-                    },
-                    {
-                        "key": "MCT_SCROLL_Y_ATTRIBUTE",
-                        "value": "mctScrollY"
-                    },
-                    {
-                        "key": "THEME",
-                        "value": "unspecified",
-                        "priority": "fallback"
-                    },
-                    {
-                        "key": "ASSETS_PATH",
-                        "value": ".",
-                        "priority": "fallback"
-                    }
-                ],
-                "containers": [
-                    {
-                        "key": "accordion",
-                        "template": accordionTemplate,
-                        "attributes": [
-                            "label"
-                        ]
-                    }
-                ],
-                "representations": [
-                    {
-                        "key": "tree",
-                        "template": subtreeTemplate,
-                        "uses": [
-                            "composition"
-                        ],
-                        "type": "root",
-                        "priority": "preferred"
-                    },
-                    {
-                        "key": "tree",
-                        "template": treeTemplate
-                    },
-                    {
-                        "key": "subtree",
-                        "template": subtreeTemplate,
-                        "uses": [
-                            "composition"
-                        ]
-                    },
-                    {
-                        "key": "tree-node",
-                        "template": treeNodeTemplate,
-                        "uses": [
-                            "action"
-                        ]
-                    },
-                    {
-                        "key": "label",
-                        "template": labelTemplate,
-                        "uses": [
-                            "type",
-                            "location"
-                        ],
-                        "gestures": [
-                            "drag",
-                            "menu",
-                            "info"
-                        ]
-                    },
-                    {
-                        "key": "node",
-                        "template": labelTemplate,
-                        "uses": [
-                            "type"
-                        ],
-                        "gestures": [
-                            "drag",
-                            "menu"
-                        ]
-                    },
-                    {
-                        "key": "action-group",
-                        "template": actionGroupTemplate,
-                        "uses": [
-                            "action"
-                        ]
-                    },
-                    {
-                        "key": "switcher",
-                        "template": switcherTemplate,
-                        "uses": [
-                            "view"
-                        ]
-                    },
-                    {
-                        "key": "object-inspector",
-                        "template": objectInspectorTemplate
-                    }
-                ],
-                "controls": [
-                    {
-                        "key": "selector",
-                        "template": selectorTemplate
-                    },
-                    {
-                        "key": "datetime-picker",
-                        "template": datetimePickerTemplate
-                    },
-                    {
-                        "key": "datetime-field",
-                        "template": datetimeFieldTemplate
-                    }
-                ],
-                "licenses": [
-                    {
-                        "name": "Normalize.css",
-                        "version": "1.1.2",
-                        "description": "Browser style normalization",
-                        "author": "Nicolas Gallagher, Jonathan Neal",
-                        "website": "http://necolas.github.io/normalize.css/",
-                        "copyright": "Copyright (c) Nicolas Gallagher and Jonathan Neal",
-                        "license": "license-mit",
-                        "link": "https://github.com/necolas/normalize.css/blob/v1.1.2/LICENSE.md"
-                    },
-                    {
-                        "name": "Zepto",
-                        "version": "1.1.6",
-                        "description": "DOM manipulation",
-                        "author": "Thomas Fuchs",
-                        "website": "http://zeptojs.com/",
-                        "copyright": "Copyright (c) 2010-2016 Thomas Fuchs",
-                        "license": "license-mit",
-                        "link": "https://github.com/madrobby/zepto/blob/master/MIT-LICENSE"
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/commonUI/general/res/templates/angular-indicator.html b/platform/commonUI/general/res/templates/angular-indicator.html
deleted file mode 100644
index 8aebc93aea1..00000000000
--- a/platform/commonUI/general/res/templates/angular-indicator.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-<div class="c-indicator {{ngModel.getCssClass()}}"
-	 ng-show="ngModel.getText().length > 0">
-	<span class="label c-indicator__label">{{ngModel.getText()}}</span>
-</div>
diff --git a/platform/commonUI/general/res/templates/bottombar.html b/platform/commonUI/general/res/templates/bottombar.html
deleted file mode 100644
index 5cf4656d1a4..00000000000
--- a/platform/commonUI/general/res/templates/bottombar.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div class='abs bottom-bar l-ue-bottom-bar s-ue-bottom-bar mobile-disable-select'>
-    <div id='status' class='status-holder'>
-        <mct-indicators></mct-indicators>
-    </div>
-    <mct-include key="'message-banner'"></mct-include>
-    <mct-include key="'about-logo'"></mct-include>
-</div>
diff --git a/platform/commonUI/general/res/templates/containers/accordion.html b/platform/commonUI/general/res/templates/containers/accordion.html
deleted file mode 100644
index 40910a5e6bf..00000000000
--- a/platform/commonUI/general/res/templates/containers/accordion.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div
-    class="accordion-head"
-    ng-click="toggle.toggle()"
-    ng-class="{ expanded:!toggle.isActive() }"
-    >
-    {{container.label}}
-</div>
-<div
-    class="accordion-contents"
-    ng-show="!toggle.isActive()"
-    ng-transclude
-    >
-</div>
diff --git a/platform/commonUI/general/res/templates/controls/action-button.html b/platform/commonUI/general/res/templates/controls/action-button.html
deleted file mode 100644
index 9e233430b86..00000000000
--- a/platform/commonUI/general/res/templates/controls/action-button.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<a class="s-button key-{{parameters.action.getMetadata().key}} {{parameters.action.getMetadata().cssClass}}"
-   ng-class="{ labeled: parameters.labeled }"
-   title="{{parameters.action.getMetadata().description}}"
-   ng-click="parameters.action.perform()">
-    <span class="title-label" ng-if="parameters.labeled">
-        {{parameters.action.getMetadata().name}}
-    </span>
-</a>
diff --git a/platform/commonUI/general/res/templates/controls/action-group.html b/platform/commonUI/general/res/templates/controls/action-group.html
deleted file mode 100644
index 15b864b23bf..00000000000
--- a/platform/commonUI/general/res/templates/controls/action-group.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<span ng-controller="ActionGroupController">
-    <span ng-repeat="action in ungrouped">
-        <mct-include key="'action-button'" parameters="{ action: action }"></mct-include>
-    </span>
-    <span class="l-btn-set" ng-repeat="group in groups">
-        <span ng-repeat="action in group">
-            <mct-include key="'action-button'"
-                         parameters="{ action: action }"
-                         ng-class="{ first:$index == 0, last:$index == group.length - 1 }"
-	            >
-            </mct-include>
-        </span>
-    </span>
-</span>
diff --git a/platform/commonUI/general/res/templates/controls/breadcrumb.html b/platform/commonUI/general/res/templates/controls/breadcrumb.html
deleted file mode 100644
index ce923da77e2..00000000000
--- a/platform/commonUI/general/res/templates/controls/breadcrumb.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<div ng-init="bcItems=[
-				{type: 'folder', glyph: 'F', name: 'My Items'},
-				{type: 'layout', glyph: 'L', name: 'Layout with a somewhat long name'},
-				{type: 'telemetry-panel', glyph: 't', name: 'Panel, My Panel'},
-				{type: 'telemetry-element', glyph: 'T', name: 'ACS-0009'}
-	        ]"></div>
-
-<div class="l-breadcrumb s-breadcrumb">
-	<span
-		class="l-breadcrumb-item s-breadcrumb-item"
-		ng-repeat="bcItem in bcItems"
-		>
-		<a><span class="ui-symbol icon {{bcItem.type}}">{{bcItem.glyph}}</span>{{bcItem.name}}</a> <span class="ui-symbol sep">}</span>
-	</span>
-</div>
diff --git a/platform/commonUI/general/res/templates/controls/datetime-field.html b/platform/commonUI/general/res/templates/controls/datetime-field.html
deleted file mode 100644
index a319e56cb41..00000000000
--- a/platform/commonUI/general/res/templates/controls/datetime-field.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<span ng-controller="DateTimeFieldController">
-    <input type="text" autocorrect="off" spellcheck="false"
-           ng-model="textValue"
-           ng-blur="restoreTextValue(); ngBlur()"
-           ng-mouseup="ngMouseup()"
-           ng-disabled="ngDisabled"
-           ng-class="{
-                        error: textInvalid ||
-                            (structure.validate &&
-                                !structure.validate(ngModel[field])),
-                        'picker-icon': structure.format === 'utc' || !structure.format
-                     }">
-    </input>
-    <a class="ui-symbol icon icon-calendar"
-       ng-if="!picker.active && (structure.format === 'utc' || !structure.format)"
-       ng-click="picker.active = !picker.active"></a>
-    <!-- If picker active show icon with no onclick to prevent double registration of clicks -->
-    <a class="ui-symbol icon icon-calendar" ng-if="picker.active"></a>
-    <mct-popup ng-if="picker.active">
-        <div mct-click-elsewhere="picker.active = false">
-            <mct-control key="'datetime-picker'"
-                         ng-model="pickerModel"
-                         field="'value'">
-            </mct-control>
-        </div>
-    </mct-popup>
-</span>
diff --git a/platform/commonUI/general/res/templates/controls/datetime-picker.html b/platform/commonUI/general/res/templates/controls/datetime-picker.html
deleted file mode 100644
index b16866299ec..00000000000
--- a/platform/commonUI/general/res/templates/controls/datetime-picker.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-
-<div ng-controller="DateTimePickerController" class="l-datetime-picker s-datetime-picker s-menu">
-	<div class="holder">
-		<div class="l-month-year-pager">
-			<a class="pager prev" ng-click="changeMonth(-1)"></a>
-			<span class="val">{{month}} {{year}}</span>
-			<a class="pager next" ng-click="changeMonth(1)"></a>
-		</div>
-		<div class="l-calendar">
-			<ul class="l-cal-row l-header">
-				<li ng-repeat="day in ['Su','Mo','Tu','We','Th','Fr','Sa']">{{day}}</li>
-			</ul>
-			<ul class="l-cal-row l-body" ng-repeat="row in table">
-				<li ng-repeat="cell in row"
-					ng-click="select(cell)"
-					ng-class='{ "in-month": isInCurrentMonth(cell), selected: isSelected(cell) }'>
-					<div class="prime">{{cell.day}}</div>
-					<div class="sub">{{cell.dayOfYear}}</div>
-				</li>
-			</ul>
-		</div>
-	</div>
-	<div class="l-time-selects complex datetime"
-			ng-show="options">
-		<div class="field-hints">
-			<span class="hint time md"
-				  ng-repeat="key in ['hours', 'minutes', 'seconds']"
-				  ng-if="options[key]">
-				{{nameFor(key)}}
-			</span>
-		</div>
-		<div>
-			<span class="field control time md"
-				  ng-repeat="key in ['hours', 'minutes', 'seconds']"
-				  ng-if="options[key]">
-				<div class='form-control select'>
-					<select size="1"
-							ng-model="time[key]"
-							ng-options="i for i in optionsFor(key)">
-					</select>
-				</div>
-			</span>
-		</div>
-	</div>
-</div>
diff --git a/platform/commonUI/general/res/templates/controls/input-filter.html b/platform/commonUI/general/res/templates/controls/input-filter.html
deleted file mode 100644
index 932ee743246..00000000000
--- a/platform/commonUI/general/res/templates/controls/input-filter.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<!-- look at action-button for example -->
-<span class="t-filter l-filter"
-      ng-controller="GetterSetterController">
-	<input type="search"
-           class="t-filter-input"
-           ng-model="getterSetter.value"/>
-	<a class="clear-icon icon-x-in-circle"
-       ng-class="{show: !(getterSetter.value === '' || getterSetter.value === undefined)}"
-       ng-click="getterSetter.value = ''">
-    </a>
-</span>
diff --git a/platform/commonUI/general/res/templates/controls/selector.html b/platform/commonUI/general/res/templates/controls/selector.html
deleted file mode 100644
index 28485c8a75d..00000000000
--- a/platform/commonUI/general/res/templates/controls/selector.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div class='form-control complex channel-selector cols cols-32'
-     ng-controller="SelectorController as selector">
-    <div class='col col-15'>
-        <div class='line field-hints'>Available</div>
-        <div class='line treeview' name='available'>
-            <mct-representation key="'tree'"
-                                mct-object="selector.root()"
-                                ng-model="selector.treeModel">
-            </mct-representation>
-        </div>
-    </div>
-    <div class='col col-2'>
-        <div class='btn-holder valign-mid btns-add-remove'>
-            <a class='s-button major'
-               ng-click="selector.select(selector.treeModel.selectedObject)">
-                <span class='ui-symbol'>&gt;</span>
-            </a>
-            <a class='s-button major'
-               ng-click="selector.deselect(selector.listModel.selectedObject)">
-                <span class='ui-symbol'>&lt;</span>
-            </a>
-        </div>
-    </div>
-    <div class='col col-15'>
-        <div class='line field-hints'>Selected</div>
-        <div class='line treeview l-tree-item-flat-list' name='selected'>
-            <ul class="tree">
-                <li ng-repeat="selectedObject in selector.selected()">
-	                <span
-		                class="tree-item"
-		                ng-class="{selected: selector.listModel.selectedObject === selectedObject }"
-		                >
-                    <mct-representation
-	                    key="'label'"
-	                    mct-object="selectedObject"
-	                    ng-click="selector.listModel.selectedObject = selectedObject"
-	                    >
-                    </mct-representation>
-					</span>
-                </li>
-            </ul>
-        </div>
-    </div>
-</div>
diff --git a/platform/commonUI/general/res/templates/controls/switcher.html b/platform/commonUI/general/res/templates/controls/switcher.html
deleted file mode 100644
index 147b0e9ba7b..00000000000
--- a/platform/commonUI/general/res/templates/controls/switcher.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<span ng-controller="ViewSwitcherController">
-    <div class="view-switcher menu-element s-menu-button {{ngModel.selected.cssClass}}"
-	    ng-if="view.length > 1"
-	    ng-controller="ClickAwayController as toggle">
-
-        <span class="l-click-area"
-	        ng-click="toggle.toggle()"
-	        title="{{ngModel.selected.name}}"></span>
-        <span class="title-label">{{ngModel.selected.name}}</span>
-
-        <div class="menu" ng-show="toggle.isActive()">
-            <ul>
-                <li ng-repeat="option in view"
-                    ng-click="ngModel.selected = option; toggle.setState(false)"
-                    class="{{option.cssClass}}">
-                    {{option.name}}
-                </li>
-            </ul>
-        </div>
-    </div>
-</span>
diff --git a/platform/commonUI/general/res/templates/controls/time-controller.html b/platform/commonUI/general/res/templates/controls/time-controller.html
deleted file mode 100644
index f11bf3f6cb0..00000000000
--- a/platform/commonUI/general/res/templates/controls/time-controller.html
+++ /dev/null
@@ -1,100 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div ng-controller="TimeRangeController as trCtrl" class="l-flex-col">
-    <form class="l-time-range-inputs-holder l-flex-row flex-elem"
-          ng-submit="trCtrl.updateBoundsFromForm()">
-        <span class="l-time-range-inputs-elem flex-elem icon-clock"></span>
-        <span class="l-time-range-inputs-elem t-inputs-w l-flex-row flex-elem">
-            <span class="l-time-range-input-w flex-elem">
-                <mct-control key="'datetime-field'"
-                             structure="{
-                                 format: parameters.format,
-                                 validate: trCtrl.validateStart
-                             }"
-                             ng-model="formModel"
-                             ng-blur="trCtrl.updateBoundsFromForm()"
-                             field="'start'"
-                             class="time-range-start">
-                </mct-control>
-            </span>
-
-            <span class="l-time-range-inputs-elem lbl flex-elem">to</span>
-
-            <span class="l-time-range-input-w flex-elem" ng-controller="ToggleController as t2">
-                <mct-control key="'datetime-field'"
-                             structure="{
-                                 format: parameters.format,
-                                 validate: trCtrl.validateEnd
-                             }"
-                             ng-model="formModel"
-                             ng-blur="trCtrl.updateBoundsFromForm()"
-                             field="'end'"
-                             class="time-range-end">
-                </mct-control>
-            </span>
-        </span>
-        <input type="submit" class="hidden">
-    </form>
-
-    <div class="l-time-range-slider-holder flex-elem">
-        <div class="l-time-range-slider">
-            <div class="slider"
-                 mct-resize="spanWidth = bounds.width">
-                <div class="knob knob-l"
-                     mct-drag-down="trCtrl.startLeftDrag()"
-                     mct-drag="trCtrl.leftDrag(delta[0])"
-                     ng-style="{ left: startInnerPct }">
-                    <div class="range-value">{{startInnerText}}</div>
-                </div>
-                <div class="knob knob-r"
-                     mct-drag-down="trCtrl.startRightDrag()"
-                     mct-drag="trCtrl.rightDrag(delta[0])"
-                     ng-style="{ right: endInnerPct }">
-                    <div class="range-value">{{endInnerText}}</div>
-                </div>
-                <div class="slot range-holder">
-                    <div class="range"
-                         mct-drag-down="trCtrl.startMiddleDrag()"
-                         mct-drag="trCtrl.middleDrag(delta[0])"
-                         ng-style="{
-                             left: startInnerPct,
-                             right: endInnerPct
-                         }">
-                        <div class="toi-line"></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div class="l-time-range-ticks-holder flex-elem">
-        <div class="l-time-range-ticks">
-            <div
-                ng-repeat="tick in ticks track by $index"
-                ng-style="{ left: $index * (100 / (ticks.length - 1)) + '%' }"
-                class="tick tick-x"
-                >
-                <span class="l-time-range-tick-label">{{tick}}</span>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/platform/commonUI/general/res/templates/label.html b/platform/commonUI/general/res/templates/label.html
deleted file mode 100644
index 27983aed19a..00000000000
--- a/platform/commonUI/general/res/templates/label.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div class="c-object-label"
-     ng-class="{ 'is-status--missing': model.status === 'missing' }"
->
-    <div class="c-object-label__type-icon {{type.getCssClass()}}"
-         ng-class="{ 'l-icon-link':location.isLink() }"
-    >
-        <span class="is-status__indicator" title="This item is missing or suspect"></span>
-    </div>
-    <div class='c-object-label__name'>{{model.name}}</div>
-</div>
diff --git a/platform/commonUI/general/res/templates/message-banner.html b/platform/commonUI/general/res/templates/message-banner.html
deleted file mode 100644
index 861db305223..00000000000
--- a/platform/commonUI/general/res/templates/message-banner.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<div ng-controller="BannerController" ng-show="active.notification"
-     class="c-message-banner {{active.notification.model.severity}}" ng-class="{
-     'minimized': active.notification.model.minimized,
-     'new': !active.notification.model.minimized}"
-     ng-click="maximize(active.notification)">
-    <span class="c-message-banner__message">
-        {{active.notification.model.title}}
-    </span>
-    <span ng-show="active.notification.model.progress !== undefined || active.notification.model.unknownProgress">
-        <mct-include key="'progress-bar'" class="c-message-banner__progress-bar"
-                     ng-model="active.notification.model">
-        </mct-include>
-    </span>
-    <a ng-hide="active.notification.model.primaryOption === undefined"
-       class="banner-elem l-action s-action"
-       ng-click="action(active.notification.model.primaryOption.callback, $event)">
-        {{active.notification.model.primaryOption.label}}
-    </a>
-    <button class="c-message-banner__close-button c-click-icon icon-x-in-circle" ng-click="dismiss(active.notification, $event)"></button>
-</div>
diff --git a/platform/commonUI/general/res/templates/object-inspector.html b/platform/commonUI/general/res/templates/object-inspector.html
deleted file mode 100644
index 6abc35e920b..00000000000
--- a/platform/commonUI/general/res/templates/object-inspector.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<span class="l-inspect">
-    <div ng-controller="PaneController">
-        <mct-split-pane class='abs contents split-layout' anchor='bottom'>
-            <div class="split-pane-component pane top">
-                <div class="abs holder holder-inspector l-flex-col">
-                    <div class="pane-header flex-elem">Inspection</div>
-                    <mct-representation
-                            key="'inspector-region'"
-                            mct-object="domainObject"
-                            ng-model="ngModel"
-                            class="flex-elem grows vscroll scroll-pad l-flex-col inspector-properties">
-                    </mct-representation>
-                </div>
-            </div>
-            <mct-splitter class="splitter-inspect-panel mobile-hide"></mct-splitter>
-            <div class="split-pane-component pane bottom">
-                <div class="abs holder holder-elements l-flex-col">
-                    <h2>Elements</h2>
-                    <mct-representation
-                            key="'edit-elements'"
-                            mct-object="domainObject"
-                            class="flex-elem l-flex-col holder grows current-elements">
-                    </mct-representation>
-                </div>
-            </div>
-        </mct-split-pane>
-    </div>
-</span>
diff --git a/platform/commonUI/general/res/templates/progress-bar.html b/platform/commonUI/general/res/templates/progress-bar.html
deleted file mode 100644
index 69883ed7ec7..00000000000
--- a/platform/commonUI/general/res/templates/progress-bar.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<span class="l-progress-bar s-progress-bar"
-      ng-class="{ indeterminate:ngModel.progressPerc === 'unknown' }">
-    <span class="progress-amt-holder">
-        <span class="progress-amt" style="width: {{ngModel.progressPerc === 'unknown' ? 100 : ngModel.progressPerc}}%"></span>
-    </span>
-</span>
-<div class="progress-info hint" ng-hide="ngModel.progressText === undefined">
-    <span class="progress-amt-text" ng-show="ngModel.progressPerc !== 'unknown' && ngModel.progressPerc > 0">{{ngModel.progressPerc}}% complete. </span>
-    {{ngModel.progressText}}
-</div>
diff --git a/platform/commonUI/general/res/templates/subtree.html b/platform/commonUI/general/res/templates/subtree.html
deleted file mode 100644
index 3eb67eb594c..00000000000
--- a/platform/commonUI/general/res/templates/subtree.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<mct-tree root-object="domainObject"
-    selected-object="ngModel.selectedObject"
-    on-selection="ngModel.onSelection"
-    allow-selection="ngModel.allowSelection">
-</mct-tree>
-
diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html
deleted file mode 100644
index ef0ecc452eb..00000000000
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<span ng-controller="ToggleController as toggle">
-    <div class="u-contents" ng-controller="TreeNodeController as treeNode">
-        <div class="c-tree__item menus-to-left"
-            ng-class="{selected: treeNode.isSelected()}">
-            <span class='c-disclosure-triangle c-tree__item__view-control'
-                ng-class="{ 'is-enabled': model.composition !== undefined, 'c-disclosure-triangle--expanded': toggle.isActive() }"
-                ng-click="toggle.toggle(); treeNode.trackExpansion()"
-                >
-            </span>
-            <mct-representation
-                class="rep-object-label"
-                key="'label'"
-                mct-object="domainObject"
-                parameters="{suppressMenuOnEdit: true}"
-                ng-click="treeNode.select()"
-                >
-            </mct-representation>
-        </div>
-        <div class="u-contents"
-            ng-show="toggle.isActive()"
-            ng-if="model.composition !== undefined">
-            <mct-representation key="'subtree'"
-                                ng-model="ngModel"
-                                parameters="parameters"
-                                mct-object="treeNode.hasBeenExpanded() && domainObject">
-            </mct-representation>
-        </div>
-    </div>
-</span>
diff --git a/platform/commonUI/general/res/templates/tree.html b/platform/commonUI/general/res/templates/tree.html
deleted file mode 100644
index db7511b5a6e..00000000000
--- a/platform/commonUI/general/res/templates/tree.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<ul class="c-tree">
-    <li class="c-tree__item-h">
-        <mct-representation key="'tree-node'"
-                            mct-object="domainObject"
-                            ng-model="ngModel"
-                            parameters="parameters">
-        </mct-representation>
-    </li>
-</ul>
diff --git a/platform/commonUI/general/res/templates/tree/node.html b/platform/commonUI/general/res/templates/tree/node.html
deleted file mode 100644
index 41f3a2b226a..00000000000
--- a/platform/commonUI/general/res/templates/tree/node.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<span class="c-tree__item js-tree__item"></span>
-<span class="c-tree__item-subtree"></span>
diff --git a/platform/commonUI/general/res/templates/tree/toggle.html b/platform/commonUI/general/res/templates/tree/toggle.html
deleted file mode 100644
index daa78ec9a04..00000000000
--- a/platform/commonUI/general/res/templates/tree/toggle.html
+++ /dev/null
@@ -1 +0,0 @@
-<span class='c-disclosure-triangle c-tree__item__view-control'></span>
diff --git a/platform/commonUI/general/res/templates/tree/tree-label.html b/platform/commonUI/general/res/templates/tree/tree-label.html
deleted file mode 100644
index da82af23371..00000000000
--- a/platform/commonUI/general/res/templates/tree/tree-label.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<div class="rep-object-label c-object-label c-tree__item__label">
-    <div class="c-object-label__type-icon c-tree__item__type-icon t-item-icon"></div>
-    <div class="c-object-label__name c-tree__item__name t-title-label"></div>
-</div>
diff --git a/platform/commonUI/general/res/templates/tree/wait-node.html b/platform/commonUI/general/res/templates/tree/wait-node.html
deleted file mode 100644
index eb54b14d493..00000000000
--- a/platform/commonUI/general/res/templates/tree/wait-node.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<li class='tree-item t-wait-node loading'>
-    <span class="t-title-label">Loading...</span>
-</li>
diff --git a/platform/commonUI/general/src/SplashScreenManager.js b/platform/commonUI/general/src/SplashScreenManager.js
deleted file mode 100644
index cd24aec0661..00000000000
--- a/platform/commonUI/general/src/SplashScreenManager.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-
-], function (
-
-) {
-
-    function SplashScreenManager($document) {
-        var splash;
-        $document = $document[0];
-        splash = $document.querySelectorAll('.l-splash-holder')[0];
-        if (!splash) {
-            return;
-        }
-
-        splash.className += ' fadeout';
-        splash.addEventListener('transitionend', function () {
-            splash.parentNode.removeChild(splash);
-        });
-    }
-
-    return SplashScreenManager;
-});
diff --git a/platform/commonUI/general/src/StyleSheetLoader.js b/platform/commonUI/general/src/StyleSheetLoader.js
deleted file mode 100644
index 1cc0c88ad52..00000000000
--- a/platform/commonUI/general/src/StyleSheetLoader.js
+++ /dev/null
@@ -1,82 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * This bundle provides various general-purpose UI elements, including
- * platform styling.
- * @namespace platform/commonUI/general
- */
-define(
-    [],
-    function () {
-
-        /**
-         * The StyleSheetLoader adds links to style sheets exposed from
-         * various bundles as extensions of category `stylesheets`.
-         * @memberof platform/commonUI/general
-         * @constructor
-         * @param {object[]} stylesheets stylesheet extension definitions
-         * @param $document Angular's jqLite-wrapped document element
-         * @param {string} activeTheme the theme in use
-         * @param {string} [assetPath] the directory relative to which
-         *        stylesheets will be found
-         */
-        function StyleSheetLoader(stylesheets, $document, activeTheme, assetPath) {
-            var head = $document.find('head'),
-                document = $document[0];
-
-            // Procedure for adding a single stylesheet
-            function addStyleSheet(stylesheet) {
-                // Create a link element, and construct full path
-                var link = document.createElement('link'),
-                    path = [
-                        assetPath,
-                        stylesheet.bundle.path,
-                        stylesheet.bundle.resources,
-                        stylesheet.stylesheetUrl
-                    ].join("/");
-
-                // Initialize attributes on the link
-                link.setAttribute("rel", "stylesheet");
-                link.setAttribute("type", "text/css");
-                link.setAttribute("href", path);
-
-                // Append the link to the head element
-                head.append(link);
-            }
-
-            // Stylesheets which specify themes should only be applied
-            // when that theme has been declared.
-            function matchesTheme(stylesheet) {
-                return stylesheet.theme === undefined
-                    || stylesheet.theme === activeTheme;
-            }
-
-            assetPath = assetPath || ".";
-
-            // Add all stylesheets from extensions
-            stylesheets.filter(matchesTheme).forEach(addStyleSheet);
-        }
-
-        return StyleSheetLoader;
-    }
-);
diff --git a/platform/commonUI/general/src/controllers/ActionGroupController.js b/platform/commonUI/general/src/controllers/ActionGroupController.js
deleted file mode 100644
index 2566fb3285e..00000000000
--- a/platform/commonUI/general/src/controllers/ActionGroupController.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining ActionGroupController. Created by vwoeltje on 11/14/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * Controller which keeps an up-to-date list of actions of
-         * a certain category, and additionally bins them into
-         * groups as described by their metadata. Used specifically
-         * to support button groups.
-         *
-         * This will maintain two fields in the scope:
-         * * `groups`: An array of arrays. Each element in the outer
-         *   array corresponds to a group; the inner array contains
-         *   the actions which are in that group.
-         * * `ungrouped`: All actions which did not have a defined
-         *   group.
-         *
-         * @memberof platform/commonUI/general
-         * @constructor
-         */
-        function ActionGroupController($scope) {
-
-            // Separate out the actions that have been retrieved
-            // into groups, and populate scope with this.
-            function groupActions(actions) {
-                var groups = {},
-                    ungrouped = [];
-
-                function assignToGroup(action) {
-                    var metadata = action.getMetadata(),
-                        group = metadata.group;
-                    if (group) {
-                        groups[group] = groups[group] || [];
-                        groups[group].push(action);
-                    } else {
-                        ungrouped.push(action);
-                    }
-                }
-
-                (actions || []).forEach(assignToGroup);
-
-                $scope.ungrouped = ungrouped;
-                $scope.groups = Object.keys(groups).sort().map(function (k) {
-                    return groups[k];
-                });
-            }
-
-            // Callback for when state which might influence action groupings
-            // changes.
-            function updateGroups() {
-                var actionCapability = $scope.action,
-                    params = $scope.parameters || {},
-                    category = params.category;
-
-                if (actionCapability && category) {
-                    // Get actions by capability, and group them
-                    groupActions(actionCapability.getActions({
-                        category: category
-                    }));
-                } else {
-                    // We don't have enough information to get any actions.
-                    groupActions([]);
-                }
-            }
-
-            // Changes to the represented object, to its action capability, or
-            // to the chosen action category may all require an update.
-            $scope.$watch("domainObject", updateGroups);
-            $scope.$watch("action", updateGroups);
-            $scope.$watch("parameters.category", updateGroups);
-
-            // Start with empty arrays.
-            $scope.ungrouped = [];
-            $scope.groups = [];
-        }
-
-        return ActionGroupController;
-    }
-);
diff --git a/platform/commonUI/general/src/controllers/BannerController.js b/platform/commonUI/general/src/controllers/BannerController.js
deleted file mode 100644
index 93cce6195f3..00000000000
--- a/platform/commonUI/general/src/controllers/BannerController.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * A controller for banner notifications. Banner notifications are a
-         * non-blocking way of drawing the user's attention to an event such
-         * as system errors, or the progress or successful completion of an
-         * ongoing task. This controller provides scoped functions for
-         * dismissing and 'maximizing' notifications. See {@link NotificationService}
-         * for more details on Notifications.
-         *
-         * @param $scope
-         * @param notificationService
-         * @param dialogService
-         * @constructor
-         */
-        function BannerController($scope, notificationService, dialogService) {
-            $scope.active = notificationService.active;
-
-            $scope.action = function (action, $event) {
-                /*
-                 Prevents default 'maximize' behaviour when clicking on
-                  notification button
-                 */
-                $event.stopPropagation();
-
-                return action();
-            };
-
-            $scope.dismiss = function (notification, $event) {
-                $event.stopPropagation();
-                notification.dismiss();
-            };
-
-            $scope.maximize = function (notification) {
-                if (notification.model.severity !== "info") {
-                    var dialog;
-                    notification.model.cancel = function () {
-                        dialog.dismiss();
-                    };
-
-                    //If the notification is dismissed by the user, close
-                    // the dialog.
-                    notification.on('dismiss', function () {
-                        dialog.dismiss();
-                    });
-
-                    dialog = dialogService.showBlockingMessage(notification.model);
-                }
-            };
-        }
-
-        return BannerController;
-    });
diff --git a/platform/commonUI/general/src/controllers/ClickAwayController.js b/platform/commonUI/general/src/controllers/ClickAwayController.js
deleted file mode 100644
index 982e2d0aa91..00000000000
--- a/platform/commonUI/general/src/controllers/ClickAwayController.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * A ClickAwayController is used to toggle things (such as context
-         * menus) where clicking elsewhere in the document while the toggle
-         * is in an active state is intended to dismiss the toggle.
-         *
-         * @memberof platform/commonUI/general
-         * @constructor
-         * @param $scope the scope in which this controller is active
-         * @param $document the document element, injected by Angular
-         */
-        function ClickAwayController($document, $timeout) {
-            var self = this;
-
-            this.state = false;
-            this.$document = $document;
-
-            // Callback used by the document listener. Timeout ensures that
-            // `clickaway` action occurs after `toggle` if `toggle` is
-            // triggered by a click/mouseup.
-            this.clickaway = function () {
-                $timeout(function () {
-                    self.deactivate();
-                });
-            };
-        }
-
-        // Track state, but also attach and detach a listener for
-        // mouseup events on the document.
-        ClickAwayController.prototype.deactivate = function () {
-            this.state = false;
-            this.$document.off("mouseup", this.clickaway);
-        };
-
-        ClickAwayController.prototype.activate = function () {
-            this.state = true;
-            this.$document.on("mouseup", this.clickaway);
-        };
-
-        /**
-         * Get the current state of the toggle.
-         * @return {boolean} true if active
-         */
-        ClickAwayController.prototype.isActive = function () {
-            return this.state;
-        };
-
-        /**
-         * Set a new state for the toggle.
-         * @return {boolean} true to activate
-         */
-        ClickAwayController.prototype.setState = function (newState) {
-            if (this.state !== newState) {
-                this.toggle();
-            }
-        };
-
-        /**
-         * Toggle the current state; activate if it is inactive,
-         * deactivate if it is active.
-         */
-        ClickAwayController.prototype.toggle = function () {
-            if (this.state) {
-                this.deactivate();
-            } else {
-                this.activate();
-            }
-        };
-
-        return ClickAwayController;
-    }
-);
diff --git a/platform/commonUI/general/src/controllers/DateTimeFieldController.js b/platform/commonUI/general/src/controllers/DateTimeFieldController.js
deleted file mode 100644
index 4132ded7668..00000000000
--- a/platform/commonUI/general/src/controllers/DateTimeFieldController.js
+++ /dev/null
@@ -1,112 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Controller to support the date-time entry field.
-         *
-         * Accepts a `format` property in the `structure` attribute
-         * which allows a date/time to be specified via its symbolic
-         * key (as will be used to look up said format from the
-         * `formatService`.)
-         *
-         * {@see FormatService}
-         * @constructor
-         * @memberof platform/commonUI/general
-         * @param $scope the Angular scope for this controller
-         * @param {FormatService} formatService the service to user to format
-         *        domain values
-         * @param {string} defaultFormat the format to request when no
-         *        format has been otherwise specified
-         */
-        function DateTimeFieldController($scope, formatService, defaultFormat) {
-            var formatter = formatService.getFormat(defaultFormat);
-
-            function updateFromModel(value) {
-                // Only reformat if the value is different from user
-                // input (to avoid reformatting valid input while typing.)
-                if (!formatter.validate($scope.textValue)
-                        || formatter.parse($scope.textValue) !== value) {
-                    $scope.textValue = formatter.format(value);
-                    $scope.textInvalid = false;
-                    $scope.lastValidValue = $scope.textValue;
-                }
-
-                $scope.pickerModel = { value: value };
-            }
-
-            function updateFromView(textValue) {
-                $scope.textInvalid = !formatter.validate(textValue);
-                if (!$scope.textInvalid) {
-                    $scope.ngModel[$scope.field] =
-                        formatter.parse(textValue);
-                    $scope.lastValidValue = $scope.textValue;
-                }
-            }
-
-            function updateFromPicker(value) {
-                if (value !== $scope.ngModel[$scope.field]) {
-                    $scope.ngModel[$scope.field] = value;
-                    updateFromModel(value);
-                    if ($scope.ngBlur) {
-                        $scope.ngBlur();
-                    }
-
-                    // If picker is active, dismiss it when valid value has been selected
-                    // This 'if' is to avoid unnecessary validation if picker is not active
-                    if ($scope.picker.active) {
-                        if ($scope.structure.validate && $scope.structure.validate($scope.ngModel[$scope.field])) {
-                            $scope.picker.active = false;
-                        } else if (!$scope.structure.validate) {
-                            //If picker visible, but no validation function, hide picker
-                            $scope.picker.active = false;
-                        }
-                    }
-                }
-            }
-
-            function setFormat(format) {
-                formatter = formatService.getFormat(format || defaultFormat);
-                updateFromModel($scope.ngModel[$scope.field]);
-            }
-
-            function restoreTextValue() {
-                $scope.textValue = $scope.lastValidValue;
-                updateFromView($scope.textValue);
-            }
-
-            $scope.restoreTextValue = restoreTextValue;
-
-            $scope.picker = { active: false };
-
-            $scope.$watch('structure.format', setFormat);
-            $scope.$watch('ngModel[field]', updateFromModel);
-            $scope.$watch('pickerModel.value', updateFromPicker);
-            $scope.$watch('textValue', updateFromView);
-        }
-
-        return DateTimeFieldController;
-    }
-);
diff --git a/platform/commonUI/general/src/controllers/DateTimePickerController.js b/platform/commonUI/general/src/controllers/DateTimePickerController.js
deleted file mode 100644
index 742e4b18bd0..00000000000
--- a/platform/commonUI/general/src/controllers/DateTimePickerController.js
+++ /dev/null
@@ -1,207 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['moment'],
-    function (moment) {
-
-        var TIME_NAMES = {
-                'hours': "Hour",
-                'minutes': "Minute",
-                'seconds': "Second"
-            },
-            MONTHS = moment.months(),
-            TIME_OPTIONS = (function makeRanges() {
-                var arr = [];
-                while (arr.length < 60) {
-                    arr.push(arr.length);
-                }
-
-                return {
-                    hours: arr.slice(0, 24),
-                    minutes: arr,
-                    seconds: arr
-                };
-            }());
-
-        /**
-         * Controller to support the date-time picker.
-         *
-         * Adds/uses the following properties in scope:
-         * * `year`: Year being displayed in picker
-         * * `month`: Month being displayed
-         * * `table`: Table being displayed; array of arrays of
-         *   * `day`: Day of month
-         *   * `dayOfYear`: Day of year
-         *   * `month`: Month associated with the day
-         *   * `year`: Year associated with the day.
-         * * `date`: Date chosen
-         *   * `year`: Year selected
-         *   * `month`: Month selected (0-indexed)
-         *   * `day`: Day of month selected
-         * * `time`: Chosen time (hours/minutes/seconds)
-         *   * `hours`: Hours chosen
-         *   * `minutes`: Minutes chosen
-         *   * `seconds`: Seconds chosen
-         *
-         * Months are zero-indexed, day-of-months are one-indexed.
-         */
-        function DateTimePickerController($scope, now) {
-            var year,
-                month, // For picker state, not model state
-                interacted = false;
-
-            function generateTable() {
-                var m = moment.utc({
-                        year: year,
-                        month: month
-                    }).day(0),
-                    table = [],
-                    row,
-                    col;
-
-                for (row = 0; row < 6; row += 1) {
-                    table.push([]);
-                    for (col = 0; col < 7; col += 1) {
-                        table[row].push({
-                            year: m.year(),
-                            month: m.month(),
-                            day: m.date(),
-                            dayOfYear: m.dayOfYear()
-                        });
-                        m.add(1, 'days'); // Next day!
-                    }
-                }
-
-                return table;
-            }
-
-            function updateScopeForMonth() {
-                $scope.month = MONTHS[month];
-                $scope.year = year;
-                $scope.table = generateTable();
-            }
-
-            function updateFromModel(ngModel) {
-                var m;
-
-                m = moment.utc(ngModel);
-
-                $scope.date = {
-                    year: m.year(),
-                    month: m.month(),
-                    day: m.date()
-                };
-                $scope.time = {
-                    hours: m.hour(),
-                    minutes: m.minute(),
-                    seconds: m.second()
-                };
-
-                //window.alert($scope.date.day + " " + ngModel);
-
-                // Zoom to that date in the picker, but
-                // only if the user hasn't interacted with it yet.
-                if (!interacted) {
-                    year = m.year();
-                    month = m.month();
-                    updateScopeForMonth();
-                }
-            }
-
-            function updateFromView() {
-                var m = moment.utc({
-                    year: $scope.date.year,
-                    month: $scope.date.month,
-                    day: $scope.date.day,
-                    hour: $scope.time.hours,
-                    minute: $scope.time.minutes,
-                    second: $scope.time.seconds
-                });
-                $scope.ngModel[$scope.field] = m.valueOf();
-            }
-
-            $scope.isInCurrentMonth = function (cell) {
-                return cell.month === month;
-            };
-
-            $scope.isSelected = function (cell) {
-                var date = $scope.date || {};
-
-                return cell.day === date.day
-                    && cell.month === date.month
-                    && cell.year === date.year;
-            };
-
-            $scope.select = function (cell) {
-                $scope.date = $scope.date || {};
-                $scope.date.month = cell.month;
-                $scope.date.year = cell.year;
-                $scope.date.day = cell.day;
-                updateFromView();
-            };
-
-            $scope.dateEquals = function (d1, d2) {
-                return d1.year === d2.year
-                    && d1.month === d2.month
-                    && d1.day === d2.day;
-            };
-
-            $scope.changeMonth = function (delta) {
-                month += delta;
-                if (month > 11) {
-                    month = 0;
-                    year += 1;
-                }
-
-                if (month < 0) {
-                    month = 11;
-                    year -= 1;
-                }
-
-                interacted = true;
-                updateScopeForMonth();
-            };
-
-            $scope.nameFor = function (key) {
-                return TIME_NAMES[key];
-            };
-
-            $scope.optionsFor = function (key) {
-                return TIME_OPTIONS[key];
-            };
-
-            updateScopeForMonth();
-
-            // Ensure some useful default
-            $scope.ngModel[$scope.field] =
-                $scope.ngModel[$scope.field] === undefined
-                    ? now() : $scope.ngModel[$scope.field];
-
-            $scope.$watch('ngModel[field]', updateFromModel);
-            $scope.$watchCollection('date', updateFromView);
-            $scope.$watchCollection('time', updateFromView);
-        }
-
-        return DateTimePickerController;
-    }
-);
diff --git a/platform/commonUI/general/src/controllers/GetterSetterController.js b/platform/commonUI/general/src/controllers/GetterSetterController.js
deleted file mode 100644
index 029812d937a..00000000000
--- a/platform/commonUI/general/src/controllers/GetterSetterController.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * This controller acts as an adapter to permit getter-setter
-         * functions to be used as ng-model arguments to controls,
-         * such as the input-filter. This is supported natively in
-         * Angular 1.3+ via `ng-model-options`, so this controller
-         * should be made obsolete after any upgrade to Angular 1.3.
-         *
-         * It expects to find in scope a value `ngModel` which is a
-         * function which, when called with no arguments, acts as a
-         * getter, and when called with one argument, acts as a setter.
-         *
-         * It also publishes into the scope a value `getterSetter.value`
-         * which is meant to be used as an assignable expression.
-         *
-         * This controller watches both of these; when one changes,
-         * it will update the other's value to match. Because of this,
-         * the `ngModel` function should be both stable and computationally
-         * inexpensive, as it will be invoked often.
-         *
-         * Getter-setter style models can be preferable when there
-         * is significant indirection between templates; "dotless"
-         * expressions in `ng-model` can behave unexpectedly due to the
-         * rules of scope, but dots are lost when passed in via `ng-model`
-         * (so if a control is internally implemented using regular
-         * form elements, it can't transparently pass through the `ng-model`
-         * parameter it received.) Getter-setter functions are never the
-         * target of a scope assignment and so avoid this problem.
-         *
-         * @memberof platform/commonUI/general
-         * @constructor
-         * @param {Scope} $scope the controller's scope
-         */
-        function GetterSetterController($scope) {
-
-            // Update internal assignable state based on changes
-            // to the getter-setter function.
-            function updateGetterSetter() {
-                if (typeof $scope.ngModel === 'function') {
-                    $scope.getterSetter.value = $scope.ngModel();
-                }
-            }
-
-            // Update the external getter-setter based on changes
-            // to the assignable state.
-            function updateNgModel() {
-                if (typeof $scope.ngModel === 'function') {
-                    $scope.ngModel($scope.getterSetter.value);
-                }
-            }
-
-            // Watch for changes to both expressions
-            $scope.$watch("ngModel()", updateGetterSetter);
-            $scope.$watch("getterSetter.value", updateNgModel);
-
-            // Publish an assignable field into scope.
-            $scope.getterSetter = {};
-
-        }
-
-        return GetterSetterController;
-
-    }
-);
diff --git a/platform/commonUI/general/src/controllers/ObjectInspectorController.js b/platform/commonUI/general/src/controllers/ObjectInspectorController.js
deleted file mode 100644
index e3261e21595..00000000000
--- a/platform/commonUI/general/src/controllers/ObjectInspectorController.js
+++ /dev/null
@@ -1,119 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining ObjectInspectorController. Created by shale on 08/21/2015.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * The ObjectInspectorController gets and formats the data for
-         *  the inspector display
-         *
-         * @constructor
-         */
-        function ObjectInspectorController($scope, objectService) {
-            $scope.primaryParents = [];
-            $scope.contextutalParents = [];
-            //$scope.isLink = false;
-
-            // Gets an array of the contextual parents/ancestors of the selected object
-            function getContextualPath() {
-                var currentObj = $scope.domainObject,
-                    currentParent,
-                    parents = [];
-
-                currentParent = currentObj
-                    && currentObj.hasCapability('context')
-                    && currentObj.getCapability('context').getParent();
-
-                while (currentParent && currentParent.getModel().type !== 'root'
-                        && currentParent.hasCapability('context')) {
-                    // Record this object
-                    parents.unshift(currentParent);
-
-                    // Get the next one up the tree
-                    currentObj = currentParent;
-                    currentParent = currentObj.getCapability('context').getParent();
-                }
-
-                $scope.contextutalParents = parents;
-            }
-
-            // Gets an array of the parents/ancestors of the selected object's
-            //   primary location (locational of original non-link)
-            function getPrimaryPath(current) {
-                var location;
-
-                // If this the the initial call of this recursive function
-                if (!current) {
-                    current = $scope.domainObject;
-                    $scope.primaryParents = [];
-                }
-
-                location = current.getModel().location;
-
-                if (location && location !== 'root') {
-                    objectService.getObjects([location]).then(function (obj) {
-                        var next = obj[location];
-
-                        $scope.primaryParents.unshift(next);
-                        getPrimaryPath(next);
-                    });
-                }
-
-            }
-
-            // Gets the metadata for the selected object
-            function getMetadata() {
-                $scope.metadata = $scope.domainObject
-                    && $scope.domainObject.hasCapability('metadata')
-                    && $scope.domainObject.useCapability('metadata');
-            }
-
-            // Set scope variables when the selected object changes
-            $scope.$watch('domainObject', function () {
-                $scope.isLink = $scope.domainObject
-                    && $scope.domainObject.hasCapability('location')
-                    && $scope.domainObject.getCapability('location').isLink();
-
-                if ($scope.isLink) {
-                    getPrimaryPath();
-                    getContextualPath();
-                } else {
-                    $scope.primaryParents = [];
-                    getContextualPath();
-                }
-
-                getMetadata();
-            });
-
-            var mutation = $scope.domainObject.getCapability('mutation');
-            var unlisten = mutation.listen(getMetadata);
-            $scope.$on('$destroy', unlisten);
-        }
-
-        return ObjectInspectorController;
-    }
-);
diff --git a/platform/commonUI/general/src/controllers/SelectorController.js b/platform/commonUI/general/src/controllers/SelectorController.js
deleted file mode 100644
index c8b71cefe09..00000000000
--- a/platform/commonUI/general/src/controllers/SelectorController.js
+++ /dev/null
@@ -1,164 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        var ROOT_ID = "ROOT";
-
-        /**
-         * Controller for the domain object selector control.
-         * @memberof platform/commonUI/general
-         * @constructor
-         * @param {ObjectService} objectService service from which to
-         *        read domain objects
-         * @param $scope Angular scope for this controller
-         */
-        function SelectorController(objectService, $scope) {
-            var treeModel = {},
-                listModel = {},
-                previousSelected,
-                self = this;
-
-            // For watch; look at the user's selection in the tree
-            function getTreeSelection() {
-                return treeModel.selectedObject;
-            }
-
-            // Store root object for subsequent exposure to template
-            function storeRoot(objects) {
-                self.rootObject = objects[ROOT_ID];
-            }
-
-            // Check that a selection is of the valid type
-            function validateTreeSelection(selectedObject) {
-                var type = selectedObject
-                    && selectedObject.getCapability('type');
-
-                // Delegate type-checking to the capability...
-                if (!type || !type.instanceOf($scope.structure.type)) {
-                    treeModel.selectedObject = previousSelected;
-                }
-
-                // Track current selection to restore it if an invalid
-                // selection is made later.
-                previousSelected = treeModel.selectedObject;
-            }
-
-            // Update the right-hand list of currently-selected objects
-            function updateList(ids) {
-                function updateSelectedObjects(objects) {
-                    // Look up from the
-                    function getObject(id) {
-                        return objects[id];
-                    }
-
-                    self.selectedObjects =
-                        ids.filter(getObject).map(getObject);
-                }
-
-                // Look up objects by id, then populate right-hand list
-                objectService.getObjects(ids).then(updateSelectedObjects);
-            }
-
-            // Reject attempts to select objects of the wrong type
-            $scope.$watch(getTreeSelection, validateTreeSelection);
-
-            // Make sure right-hand list matches underlying model
-            $scope.$watchCollection(function () {
-                return self.getField();
-            }, updateList);
-
-            // Look up root object, then store it
-            objectService.getObjects([ROOT_ID]).then(storeRoot);
-
-            this.$scope = $scope;
-            this.selectedObjects = [];
-
-            // Expose tree/list model for use in template directly
-            this.treeModel = treeModel;
-            this.listModel = listModel;
-        }
-
-        // Set the value of the field being edited
-        SelectorController.prototype.setField = function (value) {
-            this.$scope.ngModel[this.$scope.field] = value;
-        };
-
-        // Get the value of the field being edited
-        SelectorController.prototype.getField = function () {
-            return this.$scope.ngModel[this.$scope.field] || [];
-        };
-
-        /**
-         * Get the root object to show in the left-hand tree.
-         * @returns {DomainObject} the root object
-         */
-        SelectorController.prototype.root = function () {
-            return this.rootObject;
-        };
-
-        /**
-         * Add a domain object to the list of selected objects.
-         * @param {DomainObject} the domain object to select
-         */
-        SelectorController.prototype.select = function (domainObject) {
-            var id = domainObject && domainObject.getId(),
-                list = this.getField() || [];
-            // Only select if we have a valid id,
-            // and it isn't already selected
-            if (id && list.indexOf(id) === -1) {
-                this.setField(list.concat([id]));
-            }
-        };
-
-        /**
-         * Remove a domain object from the list of selected objects.
-         * @param {DomainObject} the domain object to select
-         */
-        SelectorController.prototype.deselect = function (domainObject) {
-            var id = domainObject && domainObject.getId(),
-                list = this.getField() || [];
-            // Only change if this was a valid id,
-            // for an object which was already selected
-            if (id && list.indexOf(id) !== -1) {
-                // Filter it out of the current field
-                this.setField(list.filter(function (otherId) {
-                    return otherId !== id;
-                }));
-                // Clear the current list selection
-                delete this.listModel.selectedObject;
-            }
-        };
-
-        /**
-         * Get the currently-selected domain objects.
-         * @returns {DomainObject[]} the current selection
-         */
-        SelectorController.prototype.selected = function () {
-            return this.selectedObjects;
-        };
-
-        return SelectorController;
-    }
-);
diff --git a/platform/commonUI/general/src/controllers/TimeRangeController.js b/platform/commonUI/general/src/controllers/TimeRangeController.js
deleted file mode 100644
index 5b4a55a6327..00000000000
--- a/platform/commonUI/general/src/controllers/TimeRangeController.js
+++ /dev/null
@@ -1,313 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-
-], function () {
-
-    var TICK_SPACING_PX = 150;
-
-    /* format number as percent; 0.0-1.0 to "0%"-"100%" */
-    function toPercent(p) {
-        return (100 * p) + "%";
-    }
-
-    function clamp(value, low, high) {
-        return Math.max(low, Math.min(high, value));
-    }
-
-    function copyBounds(bounds) {
-        return {
-            start: bounds.start,
-            end: bounds.end
-        };
-    }
-
-    /**
-     * Controller used by the `time-controller` template.
-     * @memberof platform/commonUI/general
-     * @constructor
-     * @param $scope the Angular scope for this controller
-     * @param {FormatService} formatService the service to user to format
-     *        domain values
-     * @param {string} defaultFormat the format to request when no
-     *        format has been otherwise specified
-     * @param {Function} now a function to return current system time
-     */
-    function TimeRangeController($scope, $timeout, formatService, defaultFormat, now) {
-        this.$scope = $scope;
-        this.formatService = formatService;
-        this.defaultFormat = defaultFormat;
-        this.now = now;
-
-        this.tickCount = 2;
-        this.innerMinimumSpan = 1000; // 1 second
-        this.outerMinimumSpan = 1000; // 1 second
-        this.initialDragValue = undefined;
-        this.formatter = formatService.getFormat(defaultFormat);
-        this.formStartChanged = false;
-        this.formEndChanged = false;
-        this.$timeout = $timeout;
-
-        this.$scope.ticks = [];
-
-        this.updateViewFromModel(this.$scope.ngModel);
-        this.updateFormModel();
-
-        [
-            'updateViewFromModel',
-            'updateSpanWidth',
-            'updateOuterStart',
-            'updateOuterEnd',
-            'updateFormat',
-            'validateStart',
-            'validateEnd',
-            'onFormStartChange',
-            'onFormEndChange'
-        ].forEach(function (boundFn) {
-            this[boundFn] = this[boundFn].bind(this);
-        }, this);
-
-        this.$scope.$watchCollection("ngModel", this.updateViewFromModel);
-        this.$scope.$watch("spanWidth", this.updateSpanWidth);
-        this.$scope.$watch("ngModel.outer.start", this.updateOuterStart);
-        this.$scope.$watch("ngModel.outer.end", this.updateOuterEnd);
-        this.$scope.$watch("parameters.format", this.updateFormat);
-        this.$scope.$watch("formModel.start", this.onFormStartChange);
-        this.$scope.$watch("formModel.end", this.onFormEndChange);
-    }
-
-    TimeRangeController.prototype.formatTimestamp = function (ts) {
-        return this.formatter.format(ts);
-    };
-
-    TimeRangeController.prototype.updateTicks = function () {
-        var i, p, ts, start, end, span;
-        end = this.$scope.ngModel.outer.end;
-        start = this.$scope.ngModel.outer.start;
-        span = end - start;
-        this.$scope.ticks = [];
-        for (i = 0; i < this.tickCount; i += 1) {
-            p = i / (this.tickCount - 1);
-            ts = p * span + start;
-            this.$scope.ticks.push(this.formatTimestamp(ts));
-        }
-    };
-
-    TimeRangeController.prototype.updateSpanWidth = function (w) {
-        this.tickCount = Math.max(Math.floor(w / TICK_SPACING_PX), 2);
-        this.updateTicks();
-    };
-
-    TimeRangeController.prototype.updateViewForInnerSpanFromModel = function (
-        ngModel
-    ) {
-        var span = ngModel.outer.end - ngModel.outer.start;
-
-        // Expose readable dates for the knobs
-        this.$scope.startInnerText = this.formatTimestamp(ngModel.inner.start);
-        this.$scope.endInnerText = this.formatTimestamp(ngModel.inner.end);
-
-        // And positions for the knobs
-        this.$scope.startInnerPct =
-            toPercent((ngModel.inner.start - ngModel.outer.start) / span);
-        this.$scope.endInnerPct =
-            toPercent((ngModel.outer.end - ngModel.inner.end) / span);
-    };
-
-    TimeRangeController.prototype.defaultBounds = function () {
-        var t = this.now();
-
-        return {
-            start: t - 24 * 3600 * 1000, // One day
-            end: t
-        };
-    };
-
-    TimeRangeController.prototype.updateViewFromModel = function (ngModel) {
-        ngModel = ngModel || {};
-        ngModel.outer = ngModel.outer || this.defaultBounds();
-        ngModel.inner = ngModel.inner || copyBounds(ngModel.outer);
-
-        // Stick it back is scope (in case we just set defaults)
-        this.$scope.ngModel = ngModel;
-
-        this.updateViewForInnerSpanFromModel(ngModel);
-        this.updateTicks();
-    };
-
-    TimeRangeController.prototype.startLeftDrag = function () {
-        this.initialDragValue = this.$scope.ngModel.inner.start;
-    };
-
-    TimeRangeController.prototype.startRightDrag = function () {
-        this.initialDragValue = this.$scope.ngModel.inner.end;
-    };
-
-    TimeRangeController.prototype.startMiddleDrag = function () {
-        this.initialDragValue = {
-            start: this.$scope.ngModel.inner.start,
-            end: this.$scope.ngModel.inner.end
-        };
-    };
-
-    TimeRangeController.prototype.toMillis = function (pixels) {
-        var span =
-            this.$scope.ngModel.outer.end - this.$scope.ngModel.outer.start;
-
-        return (pixels / this.$scope.spanWidth) * span;
-    };
-
-    TimeRangeController.prototype.leftDrag = function (pixels) {
-        var delta = this.toMillis(pixels);
-        this.$scope.ngModel.inner.start = clamp(
-            this.initialDragValue + delta,
-            this.$scope.ngModel.outer.start,
-            this.$scope.ngModel.inner.end - this.innerMinimumSpan
-        );
-        this.updateViewFromModel(this.$scope.ngModel);
-    };
-
-    TimeRangeController.prototype.rightDrag = function (pixels) {
-        var delta = this.toMillis(pixels);
-        this.$scope.ngModel.inner.end = clamp(
-            this.initialDragValue + delta,
-            this.$scope.ngModel.inner.start + this.innerMinimumSpan,
-            this.$scope.ngModel.outer.end
-        );
-        this.updateViewFromModel(this.$scope.ngModel);
-    };
-
-    TimeRangeController.prototype.middleDrag = function (pixels) {
-        var delta = this.toMillis(pixels),
-            edge = delta < 0 ? 'start' : 'end',
-            opposite = delta < 0 ? 'end' : 'start';
-
-        // Adjust the position of the edge in the direction of drag
-        this.$scope.ngModel.inner[edge] = clamp(
-            this.initialDragValue[edge] + delta,
-            this.$scope.ngModel.outer.start,
-            this.$scope.ngModel.outer.end
-        );
-        // Adjust opposite knob to maintain span
-        this.$scope.ngModel.inner[opposite] =
-            this.$scope.ngModel.inner[edge]
-            + this.initialDragValue[opposite]
-            - this.initialDragValue[edge];
-
-        this.updateViewFromModel(this.$scope.ngModel);
-    };
-
-    TimeRangeController.prototype.updateFormModel = function () {
-        this.$scope.formModel = {
-            start: ((this.$scope.ngModel || {}).outer || {}).start,
-            end: ((this.$scope.ngModel || {}).outer || {}).end
-        };
-    };
-
-    TimeRangeController.prototype.updateOuterStart = function () {
-        var ngModel = this.$scope.ngModel;
-
-        ngModel.inner.start =
-            Math.max(ngModel.outer.start, ngModel.inner.start);
-        ngModel.inner.end = Math.max(
-            ngModel.inner.start + this.innerMinimumSpan,
-            ngModel.inner.end
-        );
-
-        this.updateFormModel();
-        this.updateViewForInnerSpanFromModel(ngModel);
-        this.updateTicks();
-    };
-
-    TimeRangeController.prototype.updateOuterEnd = function () {
-        var ngModel = this.$scope.ngModel;
-
-        ngModel.inner.end =
-            Math.min(ngModel.outer.end, ngModel.inner.end);
-        ngModel.inner.start = Math.min(
-            ngModel.inner.end - this.innerMinimumSpan,
-            ngModel.inner.start
-        );
-
-        this.updateFormModel();
-        this.updateViewForInnerSpanFromModel(ngModel);
-        this.updateTicks();
-    };
-
-    TimeRangeController.prototype.updateFormat = function (key) {
-        this.formatter = this.formatService.getFormat(key || this.defaultFormat);
-        this.updateViewForInnerSpanFromModel(this.$scope.ngModel);
-        this.updateTicks();
-    };
-
-    TimeRangeController.prototype.updateBoundsFromForm = function () {
-        var self = this;
-
-        //Allow Angular to trigger watches and determine whether values have changed.
-        this.$timeout(function () {
-            if (self.formStartChanged) {
-                self.$scope.ngModel.outer.start =
-                    self.$scope.ngModel.inner.start =
-                        self.$scope.formModel.start;
-                self.formStartChanged = false;
-            }
-
-            if (self.formEndChanged) {
-                self.$scope.ngModel.outer.end =
-                    self.$scope.ngModel.inner.end =
-                        self.$scope.formModel.end;
-                self.formEndChanged = false;
-            }
-        });
-    };
-
-    TimeRangeController.prototype.onFormStartChange = function (
-        newValue,
-        oldValue
-    ) {
-        if (!this.formStartChanged && newValue !== oldValue) {
-            this.formStartChanged = true;
-        }
-    };
-
-    TimeRangeController.prototype.onFormEndChange = function (
-        newValue,
-        oldValue
-    ) {
-        if (!this.formEndChanged && newValue !== oldValue) {
-            this.formEndChanged = true;
-        }
-    };
-
-    TimeRangeController.prototype.validateStart = function (startValue) {
-        return startValue
-            <= this.$scope.formModel.end - this.outerMinimumSpan;
-    };
-
-    TimeRangeController.prototype.validateEnd = function (endValue) {
-        return endValue
-            >= this.$scope.formModel.start + this.outerMinimumSpan;
-    };
-
-    return TimeRangeController;
-});
diff --git a/platform/commonUI/general/src/controllers/ToggleController.js b/platform/commonUI/general/src/controllers/ToggleController.js
deleted file mode 100644
index 1b7f15e326d..00000000000
--- a/platform/commonUI/general/src/controllers/ToggleController.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * A ToggleController is used to activate/deactivate things.
-         * A common usage is for "twistie"
-         *
-         * @memberof platform/commonUI/general
-         * @constructor
-         */
-        function ToggleController() {
-            this.state = false;
-
-            this.setState = this.setState.bind(this);
-        }
-
-        /**
-         * Get the current state of the toggle.
-         * @return {boolean} true if active
-         */
-        ToggleController.prototype.isActive = function () {
-            return this.state;
-        };
-
-        /**
-         * Set a new state for the toggle.
-         * @return {boolean} true to activate
-         */
-        ToggleController.prototype.setState = function (newState) {
-            this.state = newState;
-        };
-
-        /**
-         * Toggle the current state; activate if it is inactive,
-         * deactivate if it is active.
-         */
-        ToggleController.prototype.toggle = function () {
-            this.state = !this.state;
-        };
-
-        return ToggleController;
-    }
-);
diff --git a/platform/commonUI/general/src/controllers/TreeNodeController.js b/platform/commonUI/general/src/controllers/TreeNodeController.js
deleted file mode 100644
index 7a41c939cd6..00000000000
--- a/platform/commonUI/general/src/controllers/TreeNodeController.js
+++ /dev/null
@@ -1,204 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining TreeNodeController. Created by vwoeltje on 11/10/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * The TreeNodeController supports the tree node representation;
-         * a tree node has a label for the current object as well as a
-         * subtree which shows (and is not loaded until) the node is
-         * expanded.
-         *
-         * This controller tracks the following, so that the tree node
-         * template may update its state accordingly:
-         *
-         * * Whether or not the tree node has ever been expanded (this
-         *   is used to lazily load, exactly once, the subtree)
-         * * Whether or not the node is currently the domain object
-         *   of navigation (this gets highlighted differently to
-         *   provide the user with visual feedback.)
-         *
-         * Additionally, this controller will automatically trigger
-         * node expansion when this tree node's _subtree_ will contain
-         * the navigated object (recursively, this becomes an
-         * expand-to-show-navigated-object behavior.)
-         *
-         * Finally, if a `callback` property is passed in through the
-         * `parameters` attribute of the `tree-node`, that callback
-         * will be invoked whenever a user clicks in a manner which
-         * would result in a selection. This callback is invoked
-         * even if the selection does not change (if you are only
-         * interested in changes, watch the `selectedObject` property
-         * of the object passed in `ng-model` instead.)
-         *
-         * @memberof platform/commonUI/general
-         * @constructor
-         */
-        function TreeNodeController($scope, $timeout) {
-            var self = this,
-                selectedObject = ($scope.ngModel || {}).selectedObject;
-
-            // Look up the id for a domain object. A convenience
-            // for mapping; additionally does some undefined-checking.
-            function getId(obj) {
-                return obj && obj.getId && obj.getId();
-            }
-
-            // Verify that id paths are equivalent, staring at
-            // index, ending at the end of the node path.
-            function checkPath(nodePath, navPath, index) {
-                index = index || 0;
-
-                // The paths overlap if we have made it past the
-                // end of the node's path; otherwise, check the
-                // id at the current index for equality and perform
-                // a recursive step for subsequent ids in the paths,
-                // until we exceed path length or hit a mismatch.
-                return (index >= nodePath.length)
-                    || ((navPath[index] === nodePath[index])
-                    && checkPath(nodePath, navPath, index + 1));
-            }
-
-            // Consider the currently-navigated object and update
-            // parameters which support display.
-            function checkSelection() {
-                var nodeObject = $scope.domainObject,
-                    navObject = selectedObject,
-                    nodeContext = nodeObject
-                        && nodeObject.getCapability('context'),
-                    navContext = navObject
-                        && navObject.getCapability('context'),
-                    nodePath,
-                    navPath;
-
-                // Deselect; we will reselect below, iff we are
-                // exactly at the end of the path.
-                self.isSelectedFlag = false;
-
-                // Expand if necessary (if the navigated object will
-                // be in this node's subtree)
-                if (nodeContext && navContext) {
-                    // Get the paths as arrays of identifiers
-                    nodePath = nodeContext.getPath().map(getId);
-                    navPath = navContext.getPath().map(getId);
-
-                    // Check to see if the node's path lies entirely
-                    // within the navigation path; otherwise, navigation
-                    // has happened in some other subtree.
-                    if (navPath.length >= nodePath.length
-                        && checkPath(nodePath, navPath)) {
-
-                        // nodePath is along the navPath; if it's
-                        // at the end of the path, highlight;
-                        // otherwise, expand.
-                        if (nodePath.length === navPath.length) {
-                            self.isSelectedFlag = true;
-                        } else { // node path is shorter: Expand!
-                            if ($scope.toggle) {
-                                $scope.toggle.setState(true);
-                            }
-
-                            self.trackExpansion();
-                        }
-
-                    }
-                }
-            }
-
-            // Callback for the selection updates; track the currently
-            // navigated object and update display parameters as needed.
-            function setSelection(object) {
-                selectedObject = object;
-                checkSelection();
-            }
-
-            this.isSelectedFlag = false;
-            this.hasBeenExpandedFlag = false;
-            this.$timeout = $timeout;
-            this.$scope = $scope;
-
-            // Listen for changes which will effect display parameters
-            $scope.$watch("ngModel.selectedObject", setSelection);
-            $scope.$watch("domainObject", checkSelection);
-        }
-
-        /**
-         * Select the domain object represented by this node in the tree.
-         * This will both update the `selectedObject` property in
-         * the object passed in via `ng-model`, and will fire any `callback`
-         * passed in via `parameters`.
-         */
-        TreeNodeController.prototype.select = function () {
-            if (this.$scope.ngModel) {
-                this.$scope.ngModel.selectedObject =
-                    this.$scope.domainObject;
-            }
-
-            if ((this.$scope.parameters || {}).callback) {
-                this.$scope.parameters.callback(this.$scope.domainObject);
-            }
-        };
-
-        /**
-         * This method should be called when a node is expanded
-         * to record that this has occurred, to support one-time
-         * lazy loading of the node's subtree.
-         */
-        TreeNodeController.prototype.trackExpansion = function () {
-            var self = this;
-            if (!self.hasBeenExpanded()) {
-                // Run on a timeout; if a lot of expansion needs to
-                // occur (e.g. if the selection is several nodes deep) we
-                // want this to be spread across multiple digest cycles.
-                self.$timeout(function () {
-                    self.hasBeenExpandedFlag = true;
-                }, 0);
-            }
-        };
-
-        /**
-         * Check if this not has ever been expanded.
-         * @returns true if it has been expanded
-         */
-        TreeNodeController.prototype.hasBeenExpanded = function () {
-            return this.hasBeenExpandedFlag;
-        };
-
-        /**
-         * Check whether or not the domain object represented by
-         * this tree node should be highlighted.
-         * An object will be highlighted if it matches
-         * ngModel.selectedObject
-         * @returns true if this should be highlighted
-         */
-        TreeNodeController.prototype.isSelected = function () {
-            return this.isSelectedFlag;
-        };
-
-        return TreeNodeController;
-    }
-);
diff --git a/platform/commonUI/general/src/controllers/ViewSwitcherController.js b/platform/commonUI/general/src/controllers/ViewSwitcherController.js
deleted file mode 100644
index 2e96df15326..00000000000
--- a/platform/commonUI/general/src/controllers/ViewSwitcherController.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining ViewSwitcherController. Created by vwoeltje on 11/7/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * Controller for the view switcher; populates and maintains a list
-         * of applicable views for a represented domain object.
-         * @memberof platform/commonUI/general
-         * @constructor
-         */
-        function ViewSwitcherController($scope, $timeout) {
-            // If the view capability gets refreshed, try to
-            // keep the same option chosen.
-            function findMatchingOption(options, selected) {
-                var i;
-
-                if (selected) {
-                    for (i = 0; i < options.length; i += 1) {
-                        if (options[i].key === selected.key) {
-                            return options[i];
-                        }
-                    }
-                }
-
-                return options[0];
-            }
-
-            // Get list of views, read from capability
-            function updateOptions(views) {
-                if (Array.isArray(views)) {
-                    $timeout(function () {
-                        $scope.ngModel.selected = findMatchingOption(
-                            views,
-                            ($scope.ngModel || {}).selected
-                        );
-                    }, 0);
-                }
-            }
-
-            // Update view options when the in-scope results of using the
-            // view capability change.
-            $scope.$watch("view", updateOptions);
-        }
-
-        return ViewSwitcherController;
-    }
-);
-
diff --git a/platform/commonUI/general/src/directives/MCTClickElsewhere.js b/platform/commonUI/general/src/directives/MCTClickElsewhere.js
deleted file mode 100644
index dee34a66ebc..00000000000
--- a/platform/commonUI/general/src/directives/MCTClickElsewhere.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * The `mct-click-elsewhere` directive will evaluate its
-         * associated expression whenever a `mousedown` occurs anywhere
-         * outside of the element that has the `mct-click-elsewhere`
-         * directive attached. This is useful for dismissing popups
-         * and the like.
-         */
-        function MCTClickElsewhere($document) {
-
-            // Link; install event handlers.
-            function link(scope, element, attrs) {
-                // Keep a reference to the body, to attach/detach
-                // mouse event handlers; mousedown and mouseup cannot
-                // only be attached to the element being linked, as the
-                // mouse may leave this element during the drag.
-                var body = $document.find('body');
-
-                function clickBody(event) {
-                    var x = event.clientX,
-                        y = event.clientY,
-                        rect = element[0].getBoundingClientRect(),
-                        xMin = rect.left,
-                        xMax = xMin + rect.width,
-                        yMin = rect.top,
-                        yMax = yMin + rect.height;
-
-                    if (x < xMin || x > xMax || y < yMin || y > yMax) {
-                        scope.$apply(function () {
-                            scope.$eval(attrs.mctClickElsewhere);
-                        });
-                    }
-                }
-
-                body.on("mousedown", clickBody);
-                scope.$on("$destroy", function () {
-                    body.off("mousedown", clickBody);
-                });
-            }
-
-            return {
-                // mct-drag only makes sense as an attribute
-                restrict: "A",
-                // Link function, to install event handlers
-                link: link
-            };
-        }
-
-        return MCTClickElsewhere;
-    }
-);
-
diff --git a/platform/commonUI/general/src/directives/MCTContainer.js b/platform/commonUI/general/src/directives/MCTContainer.js
deleted file mode 100644
index ed66039feab..00000000000
--- a/platform/commonUI/general/src/directives/MCTContainer.js
+++ /dev/null
@@ -1,91 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining MCTContainer. Created by vwoeltje on 11/17/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * The mct-container is similar to the mct-include directive
-         * insofar as it allows templates to be referenced by
-         * symbolic keys instead of by URL. Unlike mct-include, it
-         * supports transclusion.
-         *
-         * Unlike mct-include, mct-container accepts a key as a
-         * plain string attribute, instead of as an Angular
-         * expression.
-         *
-         * @memberof platform/commonUI/general
-         * @constructor
-         */
-        function MCTContainer(containers) {
-            var containerMap = {};
-
-            // Initialize container map from extensions
-            containers.forEach(function (container) {
-                containerMap[container.key] = container;
-            });
-
-            return {
-
-                // Allow only at the element level
-                restrict: 'E',
-
-                // Support transclusion
-                transclude: true,
-
-                // Create a new (non-isolate) scope
-                scope: true,
-
-                // Populate initial scope based on attributes requested
-                // by the container definition
-                link: function (scope, element, attrs) {
-                    var key = attrs.key,
-                        container = containerMap[key],
-                        alias = "container",
-                        copiedAttributes = {};
-
-                    if (container) {
-                        alias = container.alias || alias;
-                        (container.attributes || []).forEach(function (attr) {
-                            copiedAttributes[attr] = attrs[attr];
-                        });
-                    }
-
-                    scope[alias] = copiedAttributes;
-                },
-
-                template: function (element, attrs) {
-                    var key = attrs.key,
-                        container = containerMap[key];
-
-                    return container ? container.template : "";
-                }
-            };
-        }
-
-        return MCTContainer;
-    }
-);
diff --git a/platform/commonUI/general/src/directives/MCTDrag.js b/platform/commonUI/general/src/directives/MCTDrag.js
deleted file mode 100644
index d6b42ba2a00..00000000000
--- a/platform/commonUI/general/src/directives/MCTDrag.js
+++ /dev/null
@@ -1,177 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * The mct-drag directive allows drag functionality
-         * (in the mousedown-mousemove-mouseup sense, as opposed to
-         * the drag-and-drop sense) to be attached to specific
-         * elements. This takes the form of three attributes:
-         *
-         * * `mct-drag`: An Angular expression to evaluate during
-         *   drag movement.
-         * * `mct-drag-down`: An Angular expression to evaluate
-         *   when the drag begins.
-         * * `mct-drag-up`: An Angular expression to evaluate when
-         *   dragging ends.
-         *
-         * In each case, a variable `delta` will be provided to the
-         * expression; this is a two-element array or the horizontal
-         * and vertical pixel offset of the current mouse position
-         * relative to the mouse position where dragging began.
-         *
-         * @memberof platform/commonUI/general
-         * @constructor
-         *
-         */
-        function MCTDrag($document, agentService) {
-
-            // Link; install event handlers.
-            function link(scope, element, attrs) {
-                // Keep a reference to the body, to attach/detach
-                // mouse event handlers; mousedown and mouseup cannot
-                // only be attached to the element being linked, as the
-                // mouse may leave this element during the drag.
-                var body = $document.find('body'),
-                    isMobile = agentService.isMobile(),
-                    touchEvents,
-                    initialPosition,
-                    $event,
-                    delta;
-
-                if (isMobile) {
-                    touchEvents = {
-                        start: 'touchstart',
-                        end: 'touchend',
-                        move: 'touchmove'
-                    };
-                } else {
-                    touchEvents = {
-                        start: 'mousedown',
-                        end: "mouseup",
-                        move: "mousemove"
-                    };
-                }
-
-                // Utility function to cause evaluation of mctDrag,
-                // mctDragUp, etc
-                function fireListener(name) {
-                    // Evaluate the expression, with current delta
-                    scope.$eval(attrs[name], {
-                        delta: delta,
-                        $event: $event
-                    });
-
-                    // Trigger prompt digestion
-                    scope.$apply();
-                }
-
-                // Update positions (both actual and relative)
-                // based on a new mouse event object.
-                function updatePosition(event) {
-                    // Get the current position, as an array
-                    var currentPosition = [event.pageX, event.pageY];
-
-                    // Track the initial position, if one hasn't been observed
-                    initialPosition = initialPosition || currentPosition;
-
-                    // Compute relative position
-                    delta = currentPosition.map(function (v, i) {
-                        return v - initialPosition[i];
-                    });
-
-                    // Also track the plain event for firing listeners
-                    $event = event;
-                }
-
-                // Called during a drag, on mousemove
-                function continueDrag(event) {
-                    updatePosition(event);
-                    fireListener("mctDrag");
-
-                    // Don't show selection highlights, etc
-                    event.preventDefault();
-
-                    return false;
-                }
-
-                // Called only when the drag ends (on mouseup)
-                function endDrag(event) {
-                    // Detach event handlers
-                    body.off(touchEvents.end, endDrag);
-                    body.off(touchEvents.move, continueDrag);
-
-                    // Also call continueDrag, to fire mctDrag
-                    // and do its usual position update
-                    continueDrag(event);
-
-                    fireListener("mctDragUp");
-
-                    // Clear out start-of-drag position, target
-                    initialPosition = undefined;
-
-                    // Don't show selection highlights, etc
-                    event.preventDefault();
-
-                    return false;
-                }
-
-                // Called on mousedown on the element
-                function startDrag(event) {
-                    // Listen for mouse events at the body level,
-                    // since the mouse may leave the element during
-                    // the drag.
-                    body.on(touchEvents.end, endDrag);
-                    body.on(touchEvents.move, continueDrag);
-
-                    // Set an initial position
-                    updatePosition(event);
-
-                    // Fire listeners, including mctDrag
-                    fireListener("mctDragDown");
-                    fireListener("mctDrag");
-
-                    // Don't show selection highlights, etc
-                    event.preventDefault();
-
-                    return false;
-                }
-
-                // Listen for start event on the element
-                element.on(touchEvents.start, startDrag);
-            }
-
-            return {
-                // mct-drag only makes sense as an attribute
-                restrict: "A",
-                // Link function, to install event handlers
-                link: link
-            };
-        }
-
-        return MCTDrag;
-    }
-);
-
diff --git a/platform/commonUI/general/src/directives/MCTIndicators.js b/platform/commonUI/general/src/directives/MCTIndicators.js
deleted file mode 100644
index 6245a8901fb..00000000000
--- a/platform/commonUI/general/src/directives/MCTIndicators.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-        function MCTIndicators(openmct) {
-            return {
-                restrict: "E",
-                link: function link(scope, element) {
-                    openmct.indicators.indicatorElements
-                        .forEach(function (indicatorElement) {
-                            element.append(indicatorElement);
-                        });
-                }
-            };
-        }
-
-        return MCTIndicators;
-    }
-);
diff --git a/platform/commonUI/general/src/directives/MCTPopup.js b/platform/commonUI/general/src/directives/MCTPopup.js
deleted file mode 100644
index 58b145dfe59..00000000000
--- a/platform/commonUI/general/src/directives/MCTPopup.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    function () {
-
-        var TEMPLATE = "<div></div>";
-
-        /**
-         * The `mct-popup` directive may be used to display elements
-         * which "pop up" over other parts of the page. Typically, this is
-         * done in conjunction with an `ng-if` to control the visibility
-         * of the popup.
-         *
-         * Example of usage:
-         *
-         *     <mct-popup ng-if="someExpr">
-         *         <span>These are the contents of the popup!</span>
-         *     </mct-popup>
-         *
-         * @constructor
-         * @memberof platform/commonUI/general
-         * @param $compile Angular's $compile service
-         * @param {platform/commonUI/general.PopupService} popupService
-         */
-        function MCTPopup($compile, popupService) {
-            function link(scope, element, attrs, ctrl, transclude) {
-                var div = $compile(TEMPLATE)(scope),
-                    rect = element.parent()[0].getBoundingClientRect(),
-                    position = [rect.left, rect.top],
-                    popup = popupService.display(div, position);
-
-                div.addClass('t-popup');
-                transclude(function (clone) {
-                    div.append(clone);
-                });
-
-                scope.$on('$destroy', function () {
-                    popup.dismiss();
-                });
-            }
-
-            return {
-                restrict: "E",
-                transclude: true,
-                link: link,
-                scope: {}
-            };
-        }
-
-        return MCTPopup;
-    }
-);
diff --git a/platform/commonUI/general/src/directives/MCTResize.js b/platform/commonUI/general/src/directives/MCTResize.js
deleted file mode 100644
index 338021e4dcb..00000000000
--- a/platform/commonUI/general/src/directives/MCTResize.js
+++ /dev/null
@@ -1,123 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        // Default resize interval
-        var DEFAULT_INTERVAL = 100;
-
-        /**
-         * The mct-resize directive allows the size of a displayed
-         * HTML element to be tracked. This is done by polling,
-         * since the DOM API does not currently provide suitable
-         * events to watch this reliably.
-         *
-         * Attributes related to this directive are interpreted as
-         * follows:
-         *
-         * * `mct-resize`: An Angular expression to evaluate when
-         *   the size changes; the variable `bounds` will be provided
-         *   with two fields, `width` and `height`, both in pixels.
-         * * `mct-resize-interval`: Optional; the interval, in milliseconds,
-         *   at which to watch for updates. In some cases checking for
-         *   resize can carry a cost (it forces recalculation of
-         *   positions within the document) so it may be preferable to watch
-         *   infrequently. If omitted, a default of 100ms will be used.
-         *   This is an Angular expression, and it will be re-evaluated after
-         *   each interval.
-         *
-         * @memberof platform/commonUI/general
-         * @constructor
-         *
-         */
-        function MCTResize($timeout) {
-
-            // Link; start listening for changes to an element's size
-            function link(scope, element, attrs) {
-                var lastBounds,
-                    linking = true,
-                    active = true;
-
-                // Determine how long to wait before the next update
-                function currentInterval() {
-                    return attrs.mctResizeInterval
-                        ? scope.$eval(attrs.mctResizeInterval)
-                        : DEFAULT_INTERVAL;
-                }
-
-                // Evaluate mct-resize with the current bounds
-                function fireEval(bounds) {
-                    // Only update when bounds actually change
-                    if (!lastBounds
-                            || lastBounds.width !== bounds.width
-                            || lastBounds.height !== bounds.height) {
-                        scope.$eval(attrs.mctResize, { bounds: bounds });
-                        if (!linking) { // Avoid apply-in-a-digest
-                            scope.$apply();
-                        }
-
-                        lastBounds = bounds;
-                    }
-                }
-
-                // Callback to fire after each timeout;
-                // update bounds and schedule another timeout
-                function onInterval() {
-                    if (!active) {
-                        return;
-                    }
-
-                    fireEval({
-                        width: element[0].offsetWidth,
-                        height: element[0].offsetHeight
-                    });
-                    $timeout(onInterval, currentInterval(), false);
-                }
-
-                // Stop running in the background
-                function deactivate() {
-                    active = false;
-                }
-
-                // Unregister once out-of-scope
-                scope.$on("$destroy", deactivate);
-
-                // Handle the initial callback
-                onInterval();
-
-                // Trigger scope.$apply on subsequent changes
-                linking = false;
-            }
-
-            return {
-                // mct-resize only makes sense as an attribute
-                restrict: "A",
-                // Link function, to begin watching for changes
-                link: link
-            };
-        }
-
-        return MCTResize;
-    }
-);
diff --git a/platform/commonUI/general/src/directives/MCTScroll.js b/platform/commonUI/general/src/directives/MCTScroll.js
deleted file mode 100644
index 791ccb81700..00000000000
--- a/platform/commonUI/general/src/directives/MCTScroll.js
+++ /dev/null
@@ -1,82 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Implements `mct-scroll-x` and `mct-scroll-y` directives. Listens
-         * for scroll events and publishes their results into scope; watches
-         * scope and updates scroll state to match. This varies for x- and y-
-         * directives only by the attribute name chosen to find the expression,
-         * and the property (scrollLeft or scrollTop) managed within the
-         * element.
-         *
-         * This is exposed as two directives in `bundle.json`; the difference
-         * is handled purely by parameterization.
-         *
-         * @memberof platform/commonUI/general
-         * @constructor
-         * @param $parse Angular's $parse
-         * @param {string} property property to manage within the HTML element
-         * @param {string} attribute attribute to look at for the assignable
-         *        Angular expression
-         */
-        function MCTScroll($parse, property, attribute) {
-            function link(scope, element, attrs) {
-                var expr = attrs[attribute],
-                    parsed = $parse(expr);
-
-                // Set the element's scroll to match the scope's state
-                function updateElement(value) {
-                    element[0][property] = value;
-                }
-
-                // Handle event; assign to scroll state to scope
-                function updateScope() {
-                    parsed.assign(scope, element[0][property]);
-                    scope.$apply(expr);
-                }
-
-                // Initialize state in scope
-                parsed.assign(scope, element[0][property]);
-
-                // Update element state when value in scope changes
-                scope.$watch(expr, updateElement);
-
-                // Update state in scope when element is scrolled
-                element.on('scroll', updateScope);
-            }
-
-            return {
-                // Restrict to attributes
-                restrict: "A",
-                // Use this link function
-                link: link
-            };
-        }
-
-        return MCTScroll;
-
-    }
-);
diff --git a/platform/commonUI/general/src/directives/MCTSelectable.js b/platform/commonUI/general/src/directives/MCTSelectable.js
deleted file mode 100644
index df914f7f609..00000000000
--- a/platform/commonUI/general/src/directives/MCTSelectable.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * The mct-selectable directive allows selection functionality
-         * (click) to be attached to specific elements.
-         *
-         * Example of how to use the directive:
-         *
-         *   mct-selectable="{
-         *       // item is an optional domain object.
-         *       item: domainObject,
-         *       // Can define other arbitrary properties.
-         *       elementProxy: element,
-         *       controller: fixedController
-         *  }"
-         *
-         * @memberof platform/commonUI/general
-         * @constructor
-         */
-        function MCTSelectable(openmct) {
-
-            // Link; install event handlers.
-            function link(scope, element, attrs) {
-                var isDestroyed = false;
-                scope.$on("$destroy", function () {
-                    isDestroyed = true;
-                });
-
-                openmct.$injector.get('$timeout')(function () {
-                    if (isDestroyed) {
-                        return;
-                    }
-
-                    var removeSelectable = openmct.selection.selectable(
-                        element[0],
-                        scope.$eval(attrs.mctSelectable),
-                        Object.prototype.hasOwnProperty.call(attrs, 'mctInitSelect')
-                        && scope.$eval(attrs.mctInitSelect) !== false
-                    );
-
-                    scope.$on("$destroy", function () {
-                        removeSelectable();
-                    });
-                });
-
-            }
-
-            return {
-                // mct-selectable only makes sense as an attribute
-                restrict: "A",
-                // Link function, to install event handlers
-                link: link
-            };
-
-        }
-
-        return MCTSelectable;
-    }
-);
diff --git a/platform/commonUI/general/src/directives/MCTSplitPane.js b/platform/commonUI/general/src/directives/MCTSplitPane.js
deleted file mode 100644
index 70b7078d6a2..00000000000
--- a/platform/commonUI/general/src/directives/MCTSplitPane.js
+++ /dev/null
@@ -1,263 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        // Pixel width to allocate for the splitter itself
-        var DEFAULT_ANCHOR = 'left',
-            POLLING_INTERVAL = 15, // milliseconds
-            CHILDREN_WARNING_MESSAGE = [
-                "Invalid mct-split-pane contents.",
-                "This element should contain exactly three",
-                "child elements, where the middle-most element",
-                "is an mct-splitter."
-            ].join(" "),
-            ANCHOR_WARNING_MESSAGE = [
-                "Unknown anchor provided to mct-split-pane,",
-                "defaulting to",
-                DEFAULT_ANCHOR + "."
-            ].join(" "),
-            ANCHORS = {
-                left: {
-                    edge: "left",
-                    opposite: "right",
-                    dimension: "width",
-                    orientation: "vertical"
-                },
-                right: {
-                    edge: "right",
-                    opposite: "left",
-                    dimension: "width",
-                    orientation: "vertical",
-                    reversed: true
-                },
-                top: {
-                    edge: "top",
-                    opposite: "bottom",
-                    dimension: "height",
-                    orientation: "horizontal"
-                },
-                bottom: {
-                    edge: "bottom",
-                    opposite: "top",
-                    dimension: "height",
-                    orientation: "horizontal",
-                    reversed: true
-                }
-            };
-
-        /**
-         * Implements `mct-split-pane` directive.
-         *
-         * This takes the following attributes:
-         * * `position`: Two-way bound scope variable which will contain
-         *   the pixel position of the splitter, offset from the appropriate
-         *   edge.
-         * * `anchor`: Plain string, one of "left", "right", "top",
-         *    or "bottom".
-         *
-         * When used, an `mct-split-pane` element should contain exactly
-         * three child elements, where the middle is an `mct-splitter`
-         * element. These should be included in either left-to-right
-         * or top-to-bottom order (depending on anchoring.) If the contents
-         * do not match this form, `mct-split-pane` will issue a warning
-         * and its behavior will be undefined.
-         *
-         * This directive works by setting the width of the element
-         * nearest the anchor edge, and then positioning the other elements
-         * based on its observed width. As such, `min-width`, `max-width`,
-         * etc. can be set on that element to control the splitter's
-         * allowable positions.
-         *
-         * @memberof platform/commonUI/general
-         * @constructor
-         */
-        function MCTSplitPane($parse, $log, $interval, $window) {
-            function controller($scope, $element, $attrs) {
-                var anchorKey = $attrs.anchor || DEFAULT_ANCHOR,
-                    positionParsed = $parse($attrs.position),
-                    anchor,
-                    activeInterval,
-                    position,
-                    splitterSize,
-
-                    alias = $attrs.alias !== undefined
-                        ? "mctSplitPane-" + $attrs.alias : undefined,
-
-                    //convert string to number from localStorage
-                    userWidthPreference = $window.localStorage.getItem(alias) === null
-                        ? undefined : Number($window.localStorage.getItem(alias));
-
-                // Get relevant size (height or width) of DOM element
-                function getSize(domElement) {
-                    return (anchor.orientation === 'vertical'
-                        ? domElement.offsetWidth : domElement.offsetHeight);
-                }
-
-                // Apply styles to child elements
-                function updateChildren(children) {
-                    position = userWidthPreference || position;
-
-                    // Pick out correct elements to update, flowing from
-                    // selected anchor edge.
-                    var first = children.eq(anchor.reversed ? 2 : 0),
-                        splitter = children.eq(1),
-                        last = children.eq(anchor.reversed ? 0 : 2),
-                        firstSize;
-
-                    splitterSize = getSize(splitter[0]);
-                    first.css(anchor.edge, "0px");
-                    first.css(anchor.dimension, position + 'px');
-
-                    // Get actual size (to obey min-width etc.)
-                    firstSize = getSize(first[0]);
-                    first.css(anchor.dimension, firstSize + 'px');
-                    splitter.css(anchor.edge, firstSize + 'px');
-                    splitter.css(anchor.opposite, "auto");
-
-                    last.css(anchor.edge, firstSize + splitterSize + 'px');
-                    last.css(anchor.opposite, '0px');
-                    position = firstSize;
-                }
-
-                // Update positioning of contained elements
-                function updateElementPositions() {
-                    var children = $element.children();
-
-                    // Check to make sure contents are well-formed
-                    if (children.length !== 3
-                            || children[1].nodeName.toLowerCase() !== 'mct-splitter') {
-                        $log.warn(CHILDREN_WARNING_MESSAGE);
-
-                        return;
-                    }
-
-                    updateChildren(children);
-                }
-
-                // Enforce minimum/maximum positions
-                function enforceExtrema() {
-                    position = Math.max(position, 0);
-                    position = Math.min(position, getSize($element[0]));
-                }
-
-                // Getter-setter for the pixel offset of the splitter,
-                // relative to the current edge.
-                function getSetPosition(value) {
-                    var prior = position;
-                    if (typeof value === 'number') {
-                        position = value;
-                        enforceExtrema();
-                        updateElementPositions();
-
-                        // Pass change up so this state can be shared
-                        if (positionParsed.assign && position !== prior) {
-                            positionParsed.assign($scope, position);
-                        }
-                    }
-
-                    return position;
-                }
-
-                function setUserWidthPreference(value) {
-                    if (alias) {
-                        userWidthPreference = value;
-                    }
-                }
-
-                function persistToLocalStorage(value) {
-                    if (alias) {
-                        $window.localStorage.setItem(alias, value);
-                    }
-                }
-
-                // Dynamically apply a CSS class to elements when the user
-                // is actively resizing
-                function toggleClass(classToToggle) {
-                    $element.children().toggleClass(classToToggle);
-                }
-
-                // Make sure anchor parameter is something we know
-                if (!ANCHORS[anchorKey]) {
-                    $log.warn(ANCHOR_WARNING_MESSAGE);
-                    anchorKey = DEFAULT_ANCHOR;
-                }
-
-                anchor = ANCHORS[anchorKey];
-
-                $scope.$watch($attrs.position, getSetPosition);
-
-                $element.addClass("split-layout");
-                $element.addClass(anchor.orientation);
-
-                // Initialize positions
-                getSetPosition(getSize(
-                    $element.children().eq(anchor.reversed ? 2 : 0)[0]
-                ));
-
-                // And poll for position changes enforced by styles
-                activeInterval = $interval(function () {
-                    getSetPosition(getSetPosition());
-                }, POLLING_INTERVAL, 0, false);
-                // ...and stop polling when we're destroyed.
-                $scope.$on('$destroy', function () {
-                    $interval.cancel(activeInterval);
-                });
-
-                // Interface exposed by controller, for mct-splitter to user
-                return {
-                    anchor: function () {
-                        return anchor;
-                    },
-                    position: function (newPosition) {
-                        if (arguments.length === 0) {
-                            return getSetPosition();
-                        }
-
-                        setUserWidthPreference(newPosition);
-
-                        return getSetPosition(newPosition);
-                    },
-                    startResizing: function () {
-                        toggleClass('resizing');
-                    },
-                    endResizing: function (finalPosition) {
-                        persistToLocalStorage(finalPosition);
-                        toggleClass('resizing');
-                    }
-                };
-            }
-
-            return {
-                // Restrict to attributes
-                restrict: "E",
-                // Expose its controller
-                controller: ['$scope', '$element', '$attrs', controller]
-            };
-        }
-
-        return MCTSplitPane;
-
-    }
-);
diff --git a/platform/commonUI/general/src/directives/MCTSplitter.js b/platform/commonUI/general/src/directives/MCTSplitter.js
deleted file mode 100644
index 65c439d754c..00000000000
--- a/platform/commonUI/general/src/directives/MCTSplitter.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        // Pixel width to allocate for the splitter itself
-        var SPLITTER_TEMPLATE = "<div class='abs'"
-                + "mct-drag-down=\"splitter.startMove()\" "
-                + "mct-drag=\"splitter.move(delta)\" "
-                + "mct-drag-up=\"splitter.endMove()\"></div>";
-
-        /**
-         * Implements `mct-splitter` directive.
-         * @memberof platform/commonUI/general
-         * @constructor
-         */
-        function MCTSplitter() {
-            function link(scope, element, attrs, mctSplitPane) {
-                var initialPosition,
-                    newPosition;
-
-                element.addClass("splitter");
-
-                scope.splitter = {
-                    // Begin moving this splitter
-                    startMove: function () {
-                        mctSplitPane.startResizing();
-                        initialPosition = mctSplitPane.position();
-                    },
-                    // Handle user changes to splitter position
-                    move: function (delta) {
-                        var anchor = mctSplitPane.anchor(),
-                            index = anchor.orientation === "vertical" ? 0 : 1,
-                            pixelDelta = delta[index]
-                                * (anchor.reversed ? -1 : 1);
-
-                        // Update the position of this splitter
-                        newPosition = initialPosition + pixelDelta;
-
-                        if (initialPosition !== newPosition) {
-                            mctSplitPane.position(newPosition);
-                        }
-                    },
-                    // Grab the event when the user is done moving
-                    // the splitter and pass it on
-                    endMove: function () {
-                        mctSplitPane.endResizing(newPosition);
-                    }
-                };
-            }
-
-            return {
-                // Restrict to attributes
-                restrict: "E",
-                // Utilize the mct-split-pane controller
-                require: "^mctSplitPane",
-                // Expose its controller
-                link: link,
-                // Use the template defined above
-                template: SPLITTER_TEMPLATE,
-                // Create a new scope to put the splitter into
-                scope: true
-            };
-        }
-
-        return MCTSplitter;
-
-    }
-);
diff --git a/platform/commonUI/general/src/directives/MCTTree.js b/platform/commonUI/general/src/directives/MCTTree.js
deleted file mode 100644
index 1e930acac63..00000000000
--- a/platform/commonUI/general/src/directives/MCTTree.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    'angular',
-    '../ui/TreeView'
-], function (angular, TreeView) {
-    function MCTTree(gestureService, openmct) {
-        function link(scope, element) {
-            if (!scope.allowSelection) {
-                scope.allowSelection = function () {
-                    return true;
-                };
-            }
-
-            if (!scope.onSelection) {
-                scope.onSelection = function () {};
-            }
-
-            var currentSelection = scope.selectedObject;
-            var treeView = new TreeView(gestureService, openmct);
-
-            function setSelection(domainObject, event) {
-                if (currentSelection === domainObject) {
-                    return;
-                }
-
-                if (!scope.allowSelection(domainObject)) {
-                    treeView.value(currentSelection);
-
-                    return;
-                }
-
-                currentSelection = domainObject;
-                scope.onSelection(domainObject);
-                scope.selectedObject = domainObject;
-                if (event && event instanceof MouseEvent) {
-                    scope.$apply();
-                }
-            }
-
-            var unobserve = treeView.observe(setSelection);
-
-            element.append(angular.element(treeView.elements()));
-
-            scope.$watch('selectedObject', function (object) {
-                currentSelection = object;
-                treeView.value(object);
-            });
-            scope.$watch('rootObject', treeView.model.bind(treeView));
-            scope.$on('$destroy', unobserve);
-        }
-
-        return {
-            restrict: "E",
-            link: link,
-            scope: {
-                rootObject: "=",
-                selectedObject: "=",
-                onSelection: "=?",
-                allowSelection: "=?"
-            }
-        };
-    }
-
-    return MCTTree;
-});
diff --git a/platform/commonUI/general/src/filters/ReverseFilter.js b/platform/commonUI/general/src/filters/ReverseFilter.js
deleted file mode 100644
index dce477d73e4..00000000000
--- a/platform/commonUI/general/src/filters/ReverseFilter.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(function () {
-
-    /**
-     * Implements the `reverse` filter, which reverses text strings.
-     * Useful in cases where text should be reversed for presentational
-     * reasons (e.g. in conjunction with CSS tricks involving text direction),
-     * allowing such behavior to be handled independently from the controller
-     * layer.
-     *
-     * @constructor
-     * @memberof platform/commonUI/general
-     */
-    function ReverseFilter() {
-        return function reverse(value) {
-            return value && value.toString().split('').reverse().join('');
-        };
-    }
-
-    return ReverseFilter;
-});
diff --git a/platform/commonUI/general/src/services/Overlay.js b/platform/commonUI/general/src/services/Overlay.js
deleted file mode 100644
index e1f6d1ebde7..00000000000
--- a/platform/commonUI/general/src/services/Overlay.js
+++ /dev/null
@@ -1,186 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining OverlayService. Created by deeptailor on 03/29/2018
- */
-
-define(['zepto'], function ($) {
-    var OVERLAY_TEMPLATE = ''
-+ '    <div class="abs blocker"></div>'
-+ '    <div class="abs outer-holder">'
-+ '       <a class="close icon-x-in-circle"></a>'
-+ '       <div class="abs inner-holder l-flex-col">'
-+ '           <div class="t-contents flex-elem holder grows"></div>'
-+ '           <div class="bottom-bar flex-elem holder">'
-+ '               <a class="t-done s-button major">Done</a>'
-+ '           </div>'
-+ '       </div>'
-+ '    </div>';
-
-    /*
-     *  An Overlay Service when instantiated creates an overlay dialog.
-     *  @param {Object} options The options object required to instantiate the overlay service
-     *  options = {
-     *      $document: document object,
-     *      $scope: angular $scope object,
-     *      element: node to be injected into overlay as a view,
-     *      overlayWillMount: callback executed before overlay is injected,
-     *      overlayWillUnmount: callback executed before overlay is removed,
-     *      overlayDidMount: callback executed after overlay is injected,
-     *      overlayDidUnmount: callback executed after overlay is removed
-     *      browseBarButtons: an array of desired buttons to be added to the browse bar of the overlay.
-     *                        the array should consist of button objects containing:
-     *                              a) class - css class to be added to the button div
-     *                              b) title - desired button title
-     *                              c) clickHandler - callback to be added to the click event listener of the button
-     *  }
-     *  $document, $scope and element are required
-     */
-
-    function Overlay(options) {
-        this.element = options.$element;
-        this.document = options.$document[0];
-        this.$scope = options.$scope;
-
-        this.overlayWillMount = options.overlayWillMount;
-        this.overlayWillUnmount = options.overlayWillUnmount;
-
-        this.overlayDidMount = options.overlayDidMount;
-        this.overlayDidUnmount = options.overlayDidUnmount;
-
-        this.browseBarButtons = options.browseBarButtons || [];
-        this.buttons = [];
-
-        this.openOverlay = this.openOverlay.bind(this);
-        this.closeOverlay = this.closeOverlay.bind(this);
-        this.toggleOverlay = this.toggleOverlay.bind(this);
-        this.removeButtons = this.removeButtons.bind(this);
-
-        this.isOverlayOpen = false;
-    }
-
-    Overlay.prototype.openOverlay = function () {
-
-        if (this.overlayWillMount && typeof this.overlayWillMount === 'function') {
-            this.overlayWillMount();
-        }
-
-        this.overlay = this.document.createElement('div');
-        $(this.overlay).addClass('abs overlay l-large-view');
-        this.overlay.innerHTML = OVERLAY_TEMPLATE;
-
-        this.overlayContainer = this.overlay.querySelector('.t-contents');
-
-        this.closeButton = this.overlay.querySelector('a.close');
-        this.closeButton.addEventListener('click', this.toggleOverlay);
-
-        this.doneButton = this.overlay.querySelector('a.t-done');
-        this.doneButton.addEventListener('click', this.toggleOverlay);
-
-        this.blocker = this.overlay.querySelector('.abs.blocker');
-        this.blocker.addEventListener('click', this.toggleOverlay);
-
-        this.document.body.appendChild(this.overlay);
-
-        this.overlayContainer.appendChild(this.element);
-
-        this.browseBar = this.overlay.querySelector('.object-browse-bar .right');
-
-        if (this.browseBarButtons && Array.isArray(this.browseBarButtons)) {
-            this.browseBarButtons.forEach(function (buttonObject) {
-                var button = newButtonTemplate(buttonObject.class, buttonObject.title);
-                this.browseBar.prepend(button);
-                button.addEventListener('click', buttonObject.clickHandler);
-                this.buttons.push(button);
-            }.bind(this));
-        }
-
-        if (this.overlayDidMount && typeof this.overlayDidMount === 'function') {
-            this.overlayDidMount();
-        }
-    };
-
-    Overlay.prototype.closeOverlay = function () {
-
-        if (this.overlayWillUnmount && typeof this.overlayWillUnmount === 'function') {
-            this.overlayWillUnmount();
-        }
-
-        this.overlayContainer.removeChild(this.element);
-        this.document.body.removeChild(this.overlay);
-
-        this.closeButton.removeEventListener('click', this.toggleOverlay);
-        this.closeButton = undefined;
-
-        this.doneButton.removeEventListener('click', this.toggleOverlay);
-        this.doneButton = undefined;
-
-        this.blocker.removeEventListener('click', this.toggleOverlay);
-        this.blocker = undefined;
-
-        this.overlayContainer = undefined;
-        this.overlay = undefined;
-
-        this.removeButtons();
-
-        if (this.overlayDidUnmount && typeof this.overlayDidUnmount === 'function') {
-            this.overlayDidUnmount();
-        }
-    };
-
-    Overlay.prototype.toggleOverlay = function (event) {
-        if (event) {
-            event.stopPropagation();
-        }
-
-        if (!this.isOverlayOpen) {
-            this.openOverlay();
-            this.isOverlayOpen = true;
-        } else {
-            this.closeOverlay();
-            this.isOverlayOpen = false;
-        }
-    };
-
-    Overlay.prototype.removeButtons = function () {
-        this.buttons.forEach(function (button) {
-            button.remove();
-        }.bind(this));
-
-        this.buttons = [];
-    };
-
-    function newButtonTemplate(classString, title) {
-        var NEW_BUTTON_TEMPLATE = '<a class="s-button labeled' + classString + '">'
-        + '<span class="title-label">' + title + '</span>'
-        + '</a>';
-
-        var button = document.createElement('div');
-        $(button).addClass('holder flex-elem');
-        button.innerHTML = NEW_BUTTON_TEMPLATE;
-
-        return button;
-    }
-
-    return Overlay;
-});
diff --git a/platform/commonUI/general/src/services/Popup.js b/platform/commonUI/general/src/services/Popup.js
deleted file mode 100644
index ec3a0ffa34d..00000000000
--- a/platform/commonUI/general/src/services/Popup.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    function () {
-
-        /**
-         * A popup is an element that has been displayed at a particular
-         * location within the page.
-         * @constructor
-         * @memberof platform/commonUI/general
-         * @param element the jqLite-wrapped element
-         * @param {object} styles an object containing key-value pairs
-         *        of styles used to position the element.
-         */
-        function Popup(element, styles) {
-            this.styles = styles;
-            this.element = element;
-
-            element.css(styles);
-        }
-
-        /**
-         * Stop showing this popup.
-         */
-        Popup.prototype.dismiss = function () {
-            this.element.remove();
-        };
-
-        /**
-         * Check if this popup is positioned such that it appears to the
-         * left of its original location.
-         * @returns {boolean} true if the popup goes left
-         */
-        Popup.prototype.goesLeft = function () {
-            return !this.styles.left;
-        };
-
-        /**
-         * Check if this popup is positioned such that it appears to the
-         * right of its original location.
-         * @returns {boolean} true if the popup goes right
-         */
-        Popup.prototype.goesRight = function () {
-            return !this.styles.right;
-        };
-
-        /**
-         * Check if this popup is positioned such that it appears above
-         * its original location.
-         * @returns {boolean} true if the popup goes up
-         */
-        Popup.prototype.goesUp = function () {
-            return !this.styles.top;
-        };
-
-        /**
-         * Check if this popup is positioned such that it appears below
-         * its original location.
-         * @returns {boolean} true if the popup goes down
-         */
-        Popup.prototype.goesDown = function () {
-            return !this.styles.bottom;
-        };
-
-        return Popup;
-    }
-);
diff --git a/platform/commonUI/general/src/services/PopupService.js b/platform/commonUI/general/src/services/PopupService.js
deleted file mode 100644
index b2094a86fc6..00000000000
--- a/platform/commonUI/general/src/services/PopupService.js
+++ /dev/null
@@ -1,124 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['./Popup'],
-    function (Popup) {
-
-        /**
-         * Displays popup elements at specific positions within the document.
-         * @memberof platform/commonUI/general
-         * @constructor
-         */
-        function PopupService($document, $window) {
-            this.$document = $document;
-            this.$window = $window;
-        }
-
-        /**
-         * Options controlling how the popup is displayed.
-         *
-         * @typedef PopupOptions
-         * @memberof platform/commonUI/general
-         * @property {number} [offsetX] the horizontal distance, in pixels,
-         *           to offset the element in whichever direction it is
-         *           displayed. Defaults to 0.
-         * @property {number} [offsetY] the vertical distance, in pixels,
-         *           to offset the element in whichever direction it is
-         *           displayed. Defaults to 0.
-         * @property {number} [marginX] the horizontal position, in pixels,
-         *           after which to prefer to display the element to the left.
-         *           If negative, this is relative to the right edge of the
-         *           page. Defaults to half the window's width.
-         * @property {number} [marginY] the vertical position, in pixels,
-         *           after which to prefer to display the element upward.
-         *           If negative, this is relative to the right edge of the
-         *           page. Defaults to half the window's height.
-         * @property {string} [leftClass] class to apply when shifting to the left
-         * @property {string} [rightClass] class to apply when shifting to the right
-         * @property {string} [upClass] class to apply when shifting upward
-         * @property {string} [downClass] class to apply when shifting downward
-         */
-
-        /**
-         * Display a popup at a particular location. The location chosen will
-         * be the corner of the element; the element will be positioned either
-         * to the left or the right of this point depending on available
-         * horizontal space, and will similarly be shifted upward or downward
-         * depending on available vertical space.
-         *
-         * @param element the jqLite-wrapped DOM element to pop up
-         * @param {number[]} position x,y position of the element, in
-         *        pixel coordinates. Negative values are interpreted as
-         *        relative to the right or bottom of the window.
-         * @param {PopupOptions} [options] additional options to control
-         *        positioning of the popup
-         * @returns {platform/commonUI/general.Popup} the popup
-         */
-        PopupService.prototype.display = function (element, position, options) {
-            var $document = this.$document,
-                $window = this.$window,
-                body = $document.find('body'),
-                winDim = [$window.innerWidth, $window.innerHeight],
-                styles = { position: 'absolute' },
-                margin,
-                offset;
-
-            function adjustNegatives(value, index) {
-                return value < 0 ? (value + winDim[index]) : value;
-            }
-
-            // Defaults
-            options = options || {};
-            offset = [
-                options.offsetX !== undefined ? options.offsetX : 0,
-                options.offsetY !== undefined ? options.offsetY : 0
-            ];
-            margin = [options.marginX, options.marginY].map(function (m, i) {
-                return m === undefined ? (winDim[i] / 2) : m;
-            }).map(adjustNegatives);
-
-            position = position.map(adjustNegatives);
-
-            if (position[0] > margin[0]) {
-                styles.right = (winDim[0] - position[0] + offset[0]) + 'px';
-            } else {
-                styles.left = (position[0] + offset[0]) + 'px';
-            }
-
-            if (position[1] > margin[1]) {
-                styles.bottom = (winDim[1] - position[1] + offset[1]) + 'px';
-            } else {
-                styles.top = (position[1] + offset[1]) + 'px';
-            }
-
-            // Add the menu to the body
-            body.append(element);
-
-            // Return a function to dismiss the bubble
-            return new Popup(element, styles);
-        };
-
-        return PopupService;
-    }
-);
-
diff --git a/platform/commonUI/general/src/services/UrlService.js b/platform/commonUI/general/src/services/UrlService.js
deleted file mode 100644
index 72de4de1c21..00000000000
--- a/platform/commonUI/general/src/services/UrlService.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining UrlService.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * The url service handles calls for url paths
-         * using domain objects.
-         * @constructor
-         * @memberof platform/commonUI/general
-         */
-        function UrlService($location) {
-            this.$location = $location;
-        }
-
-        /**
-         * Returns the Url path for a specific domain object
-         * without the index.html path and the view path
-         * @param {string} mode value of browse or edit mode
-         *        for the path
-         * @param {DomainObject} value of the domain object
-         *        to get the path of
-         * @returns {string} URL for the domain object
-         */
-        UrlService.prototype.urlForLocation = function (mode, domainObject) {
-            var context = domainObject
-                    && domainObject.getCapability('context'),
-                objectPath = context ? context.getPath() : [],
-                ids = objectPath.map(function (domainObj) {
-                    return domainObj.getId();
-                });
-
-            // Parses the path together. Starts with the
-            // default index.html file, then the mode passed
-            // into the service, followed by ids in the url
-            // joined by '/', and lastly the view path from
-            // the current location
-            return mode + "/" + ids.slice(1).join("/");
-        };
-
-        /**
-         * Returns the Url path for a specific domain object
-         * including the index.html path and the view path
-         * allowing a new tab to hold the correct characteristics
-         * @param {string} mode value of browse or edit mode
-         *        for the path
-         * @param {DomainObject} value of the domain object
-         *        to get the path of
-         * @returns {string} URL for the domain object
-         */
-        UrlService.prototype.urlForNewTab = function (mode, domainObject) {
-            var search = this.$location.search(),
-                arr = [];
-            for (var key in search) {
-                if (Object.prototype.hasOwnProperty.call(search, key)) {
-                    arr.push(key + '=' + search[key]);
-                }
-            }
-
-            var searchPath = "?" + arr.join('&'),
-                newTabPath =
-                    "#" + this.urlForLocation(mode, domainObject)
-                            + searchPath;
-
-            return newTabPath;
-        };
-
-        return UrlService;
-    }
-);
diff --git a/platform/commonUI/general/src/ui/ToggleView.js b/platform/commonUI/general/src/ui/ToggleView.js
deleted file mode 100644
index 4f53614ccbc..00000000000
--- a/platform/commonUI/general/src/ui/ToggleView.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    'zepto',
-    '../../res/templates/tree/toggle.html'
-], function ($, toggleTemplate) {
-    function ToggleView(state) {
-        this.expanded = Boolean(state);
-        this.callbacks = [];
-        this.el = $(toggleTemplate);
-        this.el.on('click', function () {
-            this.value(!this.expanded);
-        }.bind(this));
-    }
-
-    ToggleView.prototype.value = function (state) {
-        this.expanded = state;
-
-        if (state) {
-            this.el.addClass('c-disclosure-triangle--expanded');
-        } else {
-            this.el.removeClass('c-disclosure-triangle--expanded');
-        }
-
-        this.callbacks.forEach(function (callback) {
-            callback(state);
-        });
-    };
-
-    ToggleView.prototype.observe = function (callback) {
-        this.callbacks.push(callback);
-
-        return function () {
-            this.callbacks = this.callbacks.filter(function (c) {
-                return c !== callback;
-            });
-        }.bind(this);
-    };
-
-    ToggleView.prototype.elements = function () {
-        return this.el;
-    };
-
-    return ToggleView;
-});
diff --git a/platform/commonUI/general/src/ui/TreeLabelView.js b/platform/commonUI/general/src/ui/TreeLabelView.js
deleted file mode 100644
index 491b219d18e..00000000000
--- a/platform/commonUI/general/src/ui/TreeLabelView.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    'zepto',
-    '../../res/templates/tree/tree-label.html'
-], function ($, labelTemplate) {
-
-    function TreeLabelView(gestureService) {
-        this.el = $(labelTemplate);
-        this.gestureService = gestureService;
-    }
-
-    function isLink(domainObject) {
-        var location = domainObject.getCapability('location');
-
-        return location.isLink();
-    }
-
-    function getClass(domainObject) {
-        var type = domainObject.getCapability('type');
-
-        return type.getCssClass();
-    }
-
-    function removePreviousIconClass(el) {
-        $(el).removeClass(function (index, className) {
-            return (className.match (/\bicon-\S+/g) || []).join(' ');
-        });
-    }
-
-    TreeLabelView.prototype.updateView = function (domainObject) {
-        var titleEl = this.el.find('.t-title-label'),
-            iconEl = this.el.find('.t-item-icon');
-
-        removePreviousIconClass(iconEl);
-
-        titleEl.text(domainObject ? domainObject.getModel().name : "");
-        iconEl.addClass(domainObject ? getClass(domainObject) : "");
-
-        if (domainObject && isLink(domainObject)) {
-            iconEl.addClass('l-icon-link');
-        } else {
-            iconEl.removeClass('l-icon-link');
-        }
-    };
-
-    TreeLabelView.prototype.model = function (domainObject) {
-        if (this.unlisten) {
-            this.unlisten();
-            delete this.unlisten;
-        }
-
-        if (this.activeGestures) {
-            this.activeGestures.destroy();
-            delete this.activeGestures;
-        }
-
-        this.updateView(domainObject);
-
-        if (domainObject) {
-            this.unlisten = domainObject.getCapability('mutation')
-                .listen(this.updateView.bind(this, domainObject));
-
-            this.activeGestures = this.gestureService.attachGestures(
-                this.elements(),
-                domainObject,
-                ['info', 'menu', 'drag']
-            );
-        }
-    };
-
-    TreeLabelView.prototype.elements = function () {
-        return this.el;
-    };
-
-    return TreeLabelView;
-});
diff --git a/platform/commonUI/general/src/ui/TreeNodeView.js b/platform/commonUI/general/src/ui/TreeNodeView.js
deleted file mode 100644
index e9cb38b26f6..00000000000
--- a/platform/commonUI/general/src/ui/TreeNodeView.js
+++ /dev/null
@@ -1,158 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    'zepto',
-    '../../res/templates/tree/node.html',
-    './ToggleView',
-    './TreeLabelView'
-], function ($, nodeTemplate, ToggleView, TreeLabelView) {
-
-    function TreeNodeView(gestureService, subtreeFactory, selectFn, openmct) {
-        this.li = $('<li class="c-tree__item-h">');
-        this.openmct = openmct;
-        this.statusClasses = [];
-
-        this.toggleView = new ToggleView(false);
-        this.toggleView.observe(function (state) {
-            if (state) {
-                if (!this.subtreeView) {
-                    this.subtreeView = subtreeFactory();
-                    this.subtreeView.model(this.activeObject);
-                    this.li.find('.c-tree__item-subtree').eq(0)
-                        .append($(this.subtreeView.elements()));
-                }
-
-                $(this.subtreeView.elements()).removeClass('hidden');
-            } else if (this.subtreeView) {
-                $(this.subtreeView.elements()).addClass('hidden');
-            }
-        }.bind(this));
-
-        this.labelView = new TreeLabelView(gestureService);
-
-        $(this.labelView.elements()).on('click', function (event) {
-            selectFn(this.activeObject, event);
-        }.bind(this));
-
-        this.li.append($(nodeTemplate));
-        this.li.find('span').eq(0)
-            .append($(this.toggleView.elements()))
-            .append($(this.labelView.elements()));
-
-        this.model(undefined);
-    }
-
-    TreeNodeView.prototype.updateStatusClasses = function (statuses) {
-        this.statusClasses.forEach(function (statusClass) {
-            this.li.removeClass(statusClass);
-        }.bind(this));
-
-        this.statusClasses = statuses.map(function (status) {
-            return 's-status-' + status;
-        });
-
-        this.statusClasses.forEach(function (statusClass) {
-            this.li.addClass(statusClass);
-        }.bind(this));
-    };
-
-    TreeNodeView.prototype.model = function (domainObject) {
-        if (this.unlisten) {
-            this.unlisten();
-        }
-
-        this.activeObject = domainObject;
-        if (domainObject && domainObject.hasCapability('adapter')) {
-            var obj = domainObject.useCapability('adapter');
-            var hasComposition = this.openmct.composition.get(obj) !== undefined;
-            if (hasComposition) {
-                $(this.toggleView.elements()).addClass('is-enabled');
-            } else {
-                $(this.toggleView.elements()).removeClass('is-enabled');
-            }
-        }
-
-        if (domainObject && domainObject.hasCapability('status')) {
-            this.unlisten = domainObject.getCapability('status')
-                .listen(this.updateStatusClasses.bind(this));
-            this.updateStatusClasses(
-                domainObject.getCapability('status').list()
-            );
-        }
-
-        this.labelView.model(domainObject);
-        if (this.subtreeView) {
-            this.subtreeView.model(domainObject);
-        }
-    };
-
-    function getIdPath(domainObject) {
-        var context = domainObject && domainObject.getCapability('context');
-
-        function getId(domainObj) {
-            return domainObj.getId();
-        }
-
-        return context ? context.getPath().map(getId) : [];
-    }
-
-    TreeNodeView.prototype.value = function (domainObject) {
-        var activeIdPath = getIdPath(this.activeObject),
-            selectedIdPath = getIdPath(domainObject);
-
-        if (this.onSelectionPath) {
-            this.li.find('.js-tree__item').eq(0).removeClass('is-selected');
-            if (this.subtreeView) {
-                this.subtreeView.value(undefined);
-            }
-        }
-
-        this.onSelectionPath =
-            Boolean(domainObject)
-            && Boolean(this.activeObject)
-            && (activeIdPath.length <= selectedIdPath.length)
-                && activeIdPath.every(function (id, index) {
-                    return selectedIdPath[index] === id;
-                });
-
-        if (this.onSelectionPath) {
-            if (activeIdPath.length === selectedIdPath.length) {
-                this.li.find('.js-tree__item').eq(0).addClass('is-selected');
-            } else {
-                // Expand to reveal the selection
-                this.toggleView.value(true);
-                this.subtreeView.value(domainObject);
-            }
-        }
-    };
-
-    /**
-     *
-     * @returns {HTMLElement[]}
-     */
-    TreeNodeView.prototype.elements = function () {
-        return this.li;
-    };
-
-    return TreeNodeView;
-});
diff --git a/platform/commonUI/general/src/ui/TreeView.js b/platform/commonUI/general/src/ui/TreeView.js
deleted file mode 100644
index a00042ffb38..00000000000
--- a/platform/commonUI/general/src/ui/TreeView.js
+++ /dev/null
@@ -1,141 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    'zepto',
-    './TreeNodeView',
-    '../../res/templates/tree/wait-node.html'
-], function ($, TreeNodeView, spinnerTemplate) {
-
-    function TreeView(gestureService, openmct, selectFn) {
-        this.ul = $('<ul class="c-tree"></ul>');
-        this.nodeViews = [];
-        this.callbacks = [];
-        this.selectFn = selectFn || this.value.bind(this);
-        this.gestureService = gestureService;
-        this.pending = false;
-        this.openmct = openmct;
-    }
-
-    TreeView.prototype.newTreeView = function () {
-        return new TreeView(this.gestureService, this.openmct, this.selectFn);
-    };
-
-    TreeView.prototype.setSize = function (sz) {
-        var nodeView;
-
-        while (this.nodeViews.length < sz) {
-            nodeView = new TreeNodeView(
-                this.gestureService,
-                this.newTreeView.bind(this),
-                this.selectFn,
-                this.openmct
-            );
-            this.nodeViews.push(nodeView);
-            this.ul.append($(nodeView.elements()));
-        }
-
-        while (this.nodeViews.length > sz) {
-            nodeView = this.nodeViews.pop();
-            $(nodeView.elements()).remove();
-        }
-    };
-
-    TreeView.prototype.loadComposition = function () {
-        var self = this,
-            domainObject = this.activeObject;
-
-        function addNode(domainObj, index) {
-            self.nodeViews[index].model(domainObj);
-        }
-
-        function addNodes(domainObjects) {
-            if (self.pending) {
-                self.pending = false;
-                self.nodeViews = [];
-                self.ul.empty();
-            }
-
-            if (domainObject === self.activeObject) {
-                self.setSize(domainObjects.length);
-                domainObjects.forEach(addNode);
-                self.updateNodeViewSelection();
-            }
-        }
-
-        domainObject.useCapability('composition')
-            .then(addNodes);
-    };
-
-    TreeView.prototype.model = function (domainObject) {
-        if (this.unlisten) {
-            this.unlisten();
-        }
-
-        this.activeObject = domainObject;
-        this.ul.empty();
-
-        if (domainObject && domainObject.hasCapability('composition')) {
-            this.pending = true;
-            this.ul.append($(spinnerTemplate));
-            this.unlisten = domainObject.getCapability('mutation')
-                .listen(this.loadComposition.bind(this));
-            this.loadComposition(domainObject);
-        } else {
-            this.setSize(0);
-        }
-    };
-
-    TreeView.prototype.updateNodeViewSelection = function () {
-        this.nodeViews.forEach(function (nodeView) {
-            nodeView.value(this.selectedObject);
-        }.bind(this));
-    };
-
-    TreeView.prototype.value = function (domainObject, event) {
-        this.selectedObject = domainObject;
-        this.updateNodeViewSelection();
-        this.callbacks.forEach(function (callback) {
-            callback(domainObject, event);
-        });
-    };
-
-    TreeView.prototype.observe = function (callback) {
-        this.callbacks.push(callback);
-
-        return function () {
-            this.callbacks = this.callbacks.filter(function (c) {
-                return c !== callback;
-            });
-        }.bind(this);
-    };
-
-    /**
-     *
-     * @returns {HTMLElement[]}
-     */
-    TreeView.prototype.elements = function () {
-        return this.ul;
-    };
-
-    return TreeView;
-});
diff --git a/platform/commonUI/general/test/SplashScreenManagerSpec.js b/platform/commonUI/general/test/SplashScreenManagerSpec.js
deleted file mode 100644
index 3aa1ee7a853..00000000000
--- a/platform/commonUI/general/test/SplashScreenManagerSpec.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    '../src/SplashScreenManager'
-], function (SplashScreenManager) {
-
-    describe('SplashScreenManager', function () {
-        var $document,
-            splashElement;
-
-        beforeEach(function () {
-            $document = jasmine.createSpyObj(
-                '$document',
-                ['querySelectorAll']
-            );
-
-            splashElement = jasmine.createSpyObj(
-                'splashElement',
-                ['addEventListener']
-            );
-
-            splashElement.parentNode = jasmine.createSpyObj(
-                'splashParent',
-                ['removeChild']
-            );
-
-            splashElement.className = 'some-class-name';
-
-            $document.querySelectorAll.and.returnValue([splashElement]);
-        });
-
-        describe('when element exists', function () {
-            beforeEach(function () {
-                $document.querySelectorAll.and.returnValue([splashElement]);
-
-                return new SplashScreenManager([$document]);
-            });
-
-            it('adds fade out class', function () {
-                expect(splashElement.className).toBe('some-class-name fadeout');
-            });
-
-            it('removes the element when the transition ends', function () {
-                expect(splashElement.addEventListener)
-                    .toHaveBeenCalledWith(
-                        'transitionend',
-                        jasmine.any(Function)
-                    );
-                expect(splashElement.parentNode.removeChild)
-                    .not
-                    .toHaveBeenCalled();
-
-                splashElement.addEventListener.calls.mostRecent().args[1]();
-                expect(splashElement.parentNode.removeChild)
-                    .toHaveBeenCalledWith(splashElement);
-            });
-        });
-
-        it('does not error when element doesn\'t exist', function () {
-            $document.querySelectorAll.and.returnValue([]);
-
-            function run() {
-                return new SplashScreenManager([$document]);
-            }
-
-            expect(run).not.toThrow();
-        });
-    });
-});
-
diff --git a/platform/commonUI/general/test/StyleSheetLoaderSpec.js b/platform/commonUI/general/test/StyleSheetLoaderSpec.js
deleted file mode 100644
index e9fa8d51fbe..00000000000
--- a/platform/commonUI/general/test/StyleSheetLoaderSpec.js
+++ /dev/null
@@ -1,120 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/StyleSheetLoader"],
-    function (StyleSheetLoader) {
-
-        describe("The style sheet loader", function () {
-            var testStyleSheets,
-                mockDocument,
-                mockPlainDocument,
-                mockHead,
-                mockElement,
-                testBundle,
-                loader; // eslint-disable-line
-
-            beforeEach(function () {
-                testBundle = {
-                    path: "a/b",
-                    resources: "c"
-                };
-
-                testStyleSheets = [
-                    {
-                        stylesheetUrl: "d.css",
-                        bundle: testBundle
-                    },
-                    {
-                        stylesheetUrl: "e.css",
-                        bundle: testBundle
-                    },
-                    {
-                        stylesheetUrl: "f.css",
-                        bundle: testBundle
-                    }
-                ];
-
-                mockPlainDocument =
-                    jasmine.createSpyObj("document", ["createElement"]);
-                mockDocument = [mockPlainDocument];
-                mockDocument.find = jasmine.createSpy("$document.find");
-                mockHead = jasmine.createSpyObj("head", ["append"]);
-                mockElement = jasmine.createSpyObj("link", ["setAttribute"]);
-
-                mockDocument.find.and.returnValue(mockHead);
-                mockPlainDocument.createElement.and.returnValue(mockElement);
-
-                loader = new StyleSheetLoader(testStyleSheets, mockDocument);
-            });
-
-            it("appends one link per stylesheet extension", function () {
-                expect(mockHead.append.calls.count())
-                    .toEqual(testStyleSheets.length);
-            });
-
-            it("appends links to the head", function () {
-                expect(mockDocument.find).toHaveBeenCalledWith('head');
-            });
-
-            it("adjusts link locations", function () {
-                expect(mockElement.setAttribute)
-                    .toHaveBeenCalledWith('href', "./a/b/c/d.css");
-            });
-
-            describe("for themed stylesheets", function () {
-                var testTheme = "test-theme";
-
-                beforeEach(function () {
-                    testStyleSheets = [{
-                        stylesheetUrl: "themed.css",
-                        bundle: testBundle,
-                        theme: testTheme
-                    }, {
-                        stylesheetUrl: "bad-theme.css",
-                        bundle: testBundle,
-                        theme: 'bad-theme'
-                    }];
-
-                    loader = new StyleSheetLoader(
-                        testStyleSheets,
-                        mockDocument,
-                        testTheme
-                    );
-                });
-
-                it("includes matching themes", function () {
-                    expect(mockElement.setAttribute)
-                        .toHaveBeenCalledWith('href', "./a/b/c/themed.css");
-                });
-
-                it("excludes mismatching themes", function () {
-                    expect(mockElement.setAttribute)
-                        .not
-                        .toHaveBeenCalledWith('href', "./a/b/c/bad-theme.css");
-                });
-            });
-
-        });
-    }
-);
-
diff --git a/platform/commonUI/general/test/controllers/ActionGroupControllerSpec.js b/platform/commonUI/general/test/controllers/ActionGroupControllerSpec.js
deleted file mode 100644
index 4b10e500f80..00000000000
--- a/platform/commonUI/general/test/controllers/ActionGroupControllerSpec.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/controllers/ActionGroupController"],
-    function (ActionGroupController) {
-
-        describe("The action group controller", function () {
-            var mockScope,
-                mockActions,
-                controller;
-
-            function mockAction(metadata, index) {
-                var action = jasmine.createSpyObj(
-                    "action" + index,
-                    ["perform", "getMetadata"]
-                );
-                action.getMetadata.and.returnValue(metadata);
-
-                return action;
-            }
-
-            beforeEach(function () {
-                mockActions = jasmine.createSpyObj("action", ["getActions"]);
-                mockScope = jasmine.createSpyObj("$scope", ["$watch"]);
-                controller = new ActionGroupController(mockScope);
-            });
-
-            it("watches scope that may change applicable actions", function () {
-                // The action capability
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "action",
-                    jasmine.any(Function)
-                );
-                // The category of action to load
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "parameters.category",
-                    jasmine.any(Function)
-                );
-            });
-
-            it("populates the scope with grouped and ungrouped actions", function () {
-                mockScope.action = mockActions;
-                mockScope.parameters = { category: "test" };
-
-                mockActions.getActions.and.returnValue([
-                    {
-                        group: "a",
-                        someKey: 0
-                    },
-                    {
-                        group: "a",
-                        someKey: 1
-                    },
-                    {
-                        group: "b",
-                        someKey: 2
-                    },
-                    {
-                        group: "a",
-                        someKey: 3
-                    },
-                    {
-                        group: "b",
-                        someKey: 4
-                    },
-                    { someKey: 5 },
-                    { someKey: 6 },
-                    {
-                        group: "a",
-                        someKey: 7
-                    },
-                    { someKey: 8 }
-                ].map(mockAction));
-
-                // Call the watch
-                mockScope.$watch.calls.mostRecent().args[1]();
-
-                // Should have grouped and ungrouped actions in scope now
-                expect(mockScope.groups.length).toEqual(2);
-                expect(mockScope.groups[0].length).toEqual(4); // a
-                expect(mockScope.groups[1].length).toEqual(2); // b
-                expect(mockScope.ungrouped.length).toEqual(3); // ungrouped
-            });
-
-            it("provides empty arrays when no action capability is available", function () {
-                // Call the watch
-                mockScope.$watch.calls.mostRecent().args[1]();
-
-                expect(mockScope.groups.length).toEqual(0);
-                expect(mockScope.ungrouped.length).toEqual(0);
-            });
-        });
-    }
-);
diff --git a/platform/commonUI/general/test/controllers/ClickAwayControllerSpec.js b/platform/commonUI/general/test/controllers/ClickAwayControllerSpec.js
deleted file mode 100644
index 9eeefdea625..00000000000
--- a/platform/commonUI/general/test/controllers/ClickAwayControllerSpec.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/controllers/ClickAwayController"],
-    function (ClickAwayController) {
-
-        describe("The click-away controller", function () {
-            var mockDocument,
-                mockTimeout,
-                controller;
-
-            beforeEach(function () {
-                mockDocument = jasmine.createSpyObj(
-                    "$document",
-                    ["on", "off"]
-                );
-                mockTimeout = jasmine.createSpy('timeout');
-                controller = new ClickAwayController(
-                    mockDocument,
-                    mockTimeout
-                );
-            });
-
-            it("is initially inactive", function () {
-                expect(controller.isActive()).toBe(false);
-            });
-
-            it("does not listen to the document before being toggled", function () {
-                expect(mockDocument.on).not.toHaveBeenCalled();
-            });
-
-            it("tracks enabled/disabled state when toggled", function () {
-                controller.toggle();
-                expect(controller.isActive()).toBe(true);
-                controller.toggle();
-                expect(controller.isActive()).toBe(false);
-                controller.toggle();
-                expect(controller.isActive()).toBe(true);
-                controller.toggle();
-                expect(controller.isActive()).toBe(false);
-            });
-
-            it("allows active state to be explicitly specified", function () {
-                controller.setState(true);
-                expect(controller.isActive()).toBe(true);
-                controller.setState(true);
-                expect(controller.isActive()).toBe(true);
-                controller.setState(false);
-                expect(controller.isActive()).toBe(false);
-                controller.setState(false);
-                expect(controller.isActive()).toBe(false);
-            });
-
-            it("registers a mouse listener when activated", function () {
-                controller.setState(true);
-                expect(mockDocument.on).toHaveBeenCalled();
-            });
-
-            it("deactivates and detaches listener on document click", function () {
-                var callback, timeout;
-                controller.setState(true);
-                callback = mockDocument.on.calls.mostRecent().args[1];
-                callback();
-                timeout = mockTimeout.calls.mostRecent().args[0];
-                timeout();
-                expect(controller.isActive()).toEqual(false);
-                expect(mockDocument.off).toHaveBeenCalledWith("mouseup", callback);
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/general/test/controllers/DateTimeFieldControllerSpec.js b/platform/commonUI/general/test/controllers/DateTimeFieldControllerSpec.js
deleted file mode 100644
index b2a54017a4b..00000000000
--- a/platform/commonUI/general/test/controllers/DateTimeFieldControllerSpec.js
+++ /dev/null
@@ -1,221 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/controllers/DateTimeFieldController", "moment"],
-    function (DateTimeFieldController, moment) {
-
-        var TEST_FORMAT = "YYYY-MM-DD HH:mm:ss";
-
-        describe("The DateTimeFieldController", function () {
-            var mockScope,
-                mockFormatService,
-                mockFormat,
-                controller;
-
-            function fireWatch(expr, value) {
-                mockScope.$watch.calls.all().forEach(function (call) {
-                    if (call.args[0] === expr) {
-                        call.args[1](value);
-                    }
-                });
-            }
-
-            beforeEach(function () {
-                mockScope = jasmine.createSpyObj('$scope', ['$watch']);
-                mockFormatService =
-                    jasmine.createSpyObj('formatService', ['getFormat']);
-                mockFormat = jasmine.createSpyObj('format', [
-                    'parse',
-                    'validate',
-                    'format'
-                ]);
-
-                mockFormatService.getFormat.and.returnValue(mockFormat);
-
-                mockFormat.validate.and.callFake(function (text) {
-                    return moment.utc(text, TEST_FORMAT).isValid();
-                });
-                mockFormat.parse.and.callFake(function (text) {
-                    return moment.utc(text, TEST_FORMAT).valueOf();
-                });
-                mockFormat.format.and.callFake(function (value) {
-                    return moment.utc(value).format(TEST_FORMAT);
-                });
-
-                mockScope.ngModel = { testField: 12321 };
-                mockScope.field = "testField";
-                mockScope.structure = { format: "someFormat" };
-                mockScope.ngBlur = jasmine.createSpy('blur');
-
-                controller = new DateTimeFieldController(
-                    mockScope,
-                    mockFormatService
-                );
-                fireWatch("ngModel[field]", mockScope.ngModel.testField);
-            });
-
-            it("updates text from model values", function () {
-                var testTime = mockFormat.parse("1977-05-25 17:30:00");
-                mockScope.ngModel.testField = testTime;
-                fireWatch("ngModel[field]", testTime);
-                expect(mockScope.textValue).toEqual("1977-05-25 17:30:00");
-            });
-
-            describe("when valid text is entered", function () {
-                var newText;
-
-                beforeEach(function () {
-                    newText = "1977-05-25 17:30:00";
-                    mockScope.textValue = newText;
-                    fireWatch("textValue", newText);
-                });
-
-                it("updates models from user-entered text", function () {
-                    expect(mockScope.ngModel.testField)
-                        .toEqual(mockFormat.parse(newText));
-                    expect(mockScope.textInvalid).toBeFalsy();
-                });
-
-                it("does not indicate a blur event", function () {
-                    expect(mockScope.ngBlur).not.toHaveBeenCalled();
-                });
-            });
-
-            describe("when a date is chosen via the date picker", function () {
-                var newValue;
-
-                beforeEach(function () {
-                    newValue = 12345654321;
-                    mockScope.pickerModel.value = newValue;
-                    fireWatch("pickerModel.value", newValue);
-                });
-
-                it("updates models", function () {
-                    expect(mockScope.ngModel.testField).toEqual(newValue);
-                });
-
-                it("fires a blur event", function () {
-                    expect(mockScope.ngBlur).toHaveBeenCalled();
-                });
-            });
-
-            it("exposes toggle state for date-time picker", function () {
-                expect(mockScope.picker.active).toBe(false);
-            });
-
-            describe("when user input is invalid", function () {
-                var newText, oldText, oldValue;
-
-                beforeEach(function () {
-                    newText = "Not a date";
-                    oldValue = mockScope.ngModel.testField;
-                    oldText = mockScope.textValue;
-                    mockScope.textValue = newText;
-                    fireWatch("textValue", newText);
-                });
-
-                it("displays error state", function () {
-                    expect(mockScope.textInvalid).toBeTruthy();
-                });
-
-                it("does not modify model state", function () {
-                    expect(mockScope.ngModel.testField).toEqual(oldValue);
-                });
-
-                it("does not modify user input", function () {
-                    expect(mockScope.textValue).toEqual(newText);
-                });
-
-                it("restores valid text values on request", function () {
-                    mockScope.restoreTextValue();
-                    expect(mockScope.textValue).toEqual(oldText);
-                });
-            });
-
-            it("does not modify valid but irregular user input", function () {
-                // Don't want the controller "fixing" bad or
-                // irregularly-formatted input out from under
-                // the user's fingertips.
-                var newText = "2015-3-3 01:02:04",
-                    oldValue = mockScope.ngModel.testField;
-
-                mockFormat.validate.and.returnValue(true);
-                mockFormat.parse.and.returnValue(42);
-                mockScope.textValue = newText;
-                fireWatch("textValue", newText);
-
-                expect(mockScope.textValue).toEqual(newText);
-                expect(mockScope.ngModel.testField).toEqual(42);
-                expect(mockScope.ngModel.testField).not.toEqual(oldValue);
-            });
-
-            it("obtains a format from the format service", function () {
-                fireWatch('structure.format', mockScope.structure.format);
-                expect(mockFormatService.getFormat)
-                    .toHaveBeenCalledWith(mockScope.structure.format);
-            });
-
-            it("throws an error for unknown formats", function () {
-                mockFormatService.getFormat.and.returnValue(undefined);
-                expect(function () {
-                    fireWatch("structure.format", "some-format");
-                }).toThrow();
-            });
-
-            describe("using the obtained format", function () {
-                var testValue = 1234321,
-                    testText = "some text";
-
-                beforeEach(function () {
-                    mockFormat.validate.and.returnValue(true);
-                    mockFormat.parse.and.returnValue(testValue);
-                    mockFormat.format.and.returnValue(testText);
-                });
-
-                it("parses user input", function () {
-                    var newText = "some other new text";
-                    mockScope.textValue = newText;
-                    fireWatch("textValue", newText);
-                    expect(mockFormat.parse).toHaveBeenCalledWith(newText);
-                    expect(mockScope.ngModel.testField).toEqual(testValue);
-                });
-
-                it("validates user input", function () {
-                    var newText = "some other new text";
-                    mockScope.textValue = newText;
-                    fireWatch("textValue", newText);
-                    expect(mockFormat.validate).toHaveBeenCalledWith(newText);
-                });
-
-                it("formats model data for display", function () {
-                    var newValue = 42;
-                    mockScope.ngModel.testField = newValue;
-                    fireWatch("ngModel[field]", newValue);
-                    expect(mockFormat.format).toHaveBeenCalledWith(newValue);
-                    expect(mockScope.textValue).toEqual(testText);
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/general/test/controllers/DateTimePickerControllerSpec.js b/platform/commonUI/general/test/controllers/DateTimePickerControllerSpec.js
deleted file mode 100644
index 24c771d7a6b..00000000000
--- a/platform/commonUI/general/test/controllers/DateTimePickerControllerSpec.js
+++ /dev/null
@@ -1,193 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/controllers/DateTimePickerController", "moment"],
-    function (DateTimePickerController, moment) {
-
-        describe("The DateTimePickerController", function () {
-            var mockScope,
-                mockNow,
-                controller;
-
-            function fireWatch(expr, value) {
-                mockScope.$watch.calls.all().forEach(function (call) {
-                    if (call.args[0] === expr) {
-                        call.args[1](value);
-                    }
-                });
-            }
-
-            function fireWatchCollection(expr, value) {
-                mockScope.$watchCollection.calls.all().forEach(function (call) {
-                    if (call.args[0] === expr) {
-                        call.args[1](value);
-                    }
-                });
-            }
-
-            beforeEach(function () {
-                mockScope = jasmine.createSpyObj(
-                    "$scope",
-                    ["$apply", "$watch", "$watchCollection"]
-                );
-                mockScope.ngModel = {};
-                mockScope.field = "testField";
-                mockNow = jasmine.createSpy('now');
-                controller = new DateTimePickerController(mockScope, mockNow);
-            });
-
-            it("watches the model that was passed in", function () {
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "ngModel[field]",
-                    jasmine.any(Function)
-                );
-            });
-
-            it("updates value in model when values in scope change", function () {
-                mockScope.date = {
-                    year: 1998,
-                    month: 0,
-                    day: 6
-                };
-                mockScope.time = {
-                    hours: 12,
-                    minutes: 34,
-                    seconds: 56
-                };
-                fireWatchCollection("date", mockScope.date);
-                expect(mockScope.ngModel[mockScope.field])
-                    .toEqual(moment.utc("1998-01-06 12:34:56").valueOf());
-            });
-
-            describe("once initialized with model state", function () {
-                var testTime = moment.utc("1998-01-06 12:34:56").valueOf();
-
-                beforeEach(function () {
-                    fireWatch("ngModel[field]", testTime);
-                });
-
-                it("exposes date/time values in scope", function () {
-                    expect(mockScope.date.year).toEqual(1998);
-                    expect(mockScope.date.month).toEqual(0); // Months are zero-indexed
-                    expect(mockScope.date.day).toEqual(6);
-                    expect(mockScope.time.hours).toEqual(12);
-                    expect(mockScope.time.minutes).toEqual(34);
-                    expect(mockScope.time.seconds).toEqual(56);
-                });
-
-                it("provides names for time properties", function () {
-                    Object.keys(mockScope.time).forEach(function (key) {
-                        expect(mockScope.nameFor(key))
-                            .toEqual(jasmine.any(String));
-                    });
-                });
-
-                it("provides options for time properties", function () {
-                    Object.keys(mockScope.time).forEach(function (key) {
-                        expect(mockScope.optionsFor(key))
-                            .toEqual(jasmine.any(Array));
-                    });
-                });
-
-                it("exposes times to populate calendar as a table", function () {
-                    // Verify that data structure is as expected by template
-                    expect(mockScope.table).toEqual(jasmine.any(Array));
-                    expect(mockScope.table[0]).toEqual(jasmine.any(Array));
-                    expect(mockScope.table[0][0]).toEqual({
-                        year: jasmine.any(Number),
-                        month: jasmine.any(Number),
-                        day: jasmine.any(Number),
-                        dayOfYear: jasmine.any(Number)
-                    });
-                });
-
-                it("contains the current date in its initial table", function () {
-                    var matchingCell;
-                    // Should be able to find the selected date
-                    mockScope.table.forEach(function (row) {
-                        row.forEach(function (cell) {
-                            if (cell.dayOfYear === 6) {
-                                matchingCell = cell;
-                            }
-                        });
-                    });
-                    expect(matchingCell).toEqual({
-                        year: 1998,
-                        month: 0,
-                        day: 6,
-                        dayOfYear: 6
-                    });
-                });
-
-                it("allows the displayed month to be advanced", function () {
-                    // Around the edges of the displayed calendar we
-                    // may be in previous or subsequent month, so
-                    // test around the middle.
-                    var i, originalMonth = mockScope.table[2][0].month;
-
-                    function mod12(month) {
-                        return ((month % 12) + 12) % 12;
-                    }
-
-                    for (i = 1; i <= 12; i += 1) {
-                        mockScope.changeMonth(1);
-                        expect(mockScope.table[2][0].month)
-                            .toEqual(mod12(originalMonth + i));
-                    }
-
-                    for (i = 11; i >= -12; i -= 1) {
-                        mockScope.changeMonth(-1);
-                        expect(mockScope.table[2][0].month)
-                            .toEqual(mod12(originalMonth + i));
-                    }
-                });
-
-                it("allows checking if a cell is in the current month", function () {
-                    expect(mockScope.isInCurrentMonth(mockScope.table[2][0]))
-                        .toBe(true);
-                });
-
-                it("allows cells to be selected", function () {
-                    mockScope.select(mockScope.table[2][0]);
-                    expect(mockScope.isSelected(mockScope.table[2][0]))
-                        .toBe(true);
-                    mockScope.select(mockScope.table[2][1]);
-                    expect(mockScope.isSelected(mockScope.table[2][0]))
-                        .toBe(false);
-                    expect(mockScope.isSelected(mockScope.table[2][1]))
-                        .toBe(true);
-                });
-
-                it("allows cells to be compared", function () {
-                    var table = mockScope.table;
-                    expect(mockScope.dateEquals(table[2][0], table[2][1]))
-                        .toBe(false);
-                    expect(mockScope.dateEquals(table[2][1], table[2][1]))
-                        .toBe(true);
-                });
-
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/general/test/controllers/GetterSetterControllerSpec.js b/platform/commonUI/general/test/controllers/GetterSetterControllerSpec.js
deleted file mode 100644
index bf6ea38913f..00000000000
--- a/platform/commonUI/general/test/controllers/GetterSetterControllerSpec.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/controllers/GetterSetterController"],
-    function (GetterSetterController) {
-
-        describe("The getter-setter controller", function () {
-            var mockScope,
-                mockModel,
-                controller;
-
-            beforeEach(function () {
-                mockScope = jasmine.createSpyObj("$scope", ["$watch"]);
-                mockModel = jasmine.createSpy("ngModel");
-                mockScope.ngModel = mockModel;
-                controller = new GetterSetterController(mockScope);
-            });
-
-            it("watches for changes to external and internal mode", function () {
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "ngModel()",
-                    jasmine.any(Function)
-                );
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "getterSetter.value",
-                    jasmine.any(Function)
-                );
-            });
-
-            it("updates an external function when changes are detected", function () {
-                mockScope.getterSetter.value = "some new value";
-                // Verify precondition
-                expect(mockScope.ngModel)
-                    .not.toHaveBeenCalledWith("some new value");
-                // Fire the matching watcher
-                mockScope.$watch.calls.all().forEach(function (call) {
-                    if (call.args[0] === "getterSetter.value") {
-                        call.args[1](mockScope.getterSetter.value);
-                    }
-                });
-                // Verify getter-setter was notified
-                expect(mockScope.ngModel)
-                    .toHaveBeenCalledWith("some new value");
-            });
-
-            it("updates internal state when external changes are detected", function () {
-                mockScope.ngModel.and.returnValue("some other new value");
-                // Verify precondition
-                expect(mockScope.getterSetter.value).toBeUndefined();
-                // Fire the matching watcher
-                mockScope.$watch.calls.all().forEach(function (call) {
-                    if (call.args[0] === "ngModel()") {
-                        call.args[1]("some other new value");
-                    }
-                });
-                // Verify state in scope was updated
-                expect(mockScope.getterSetter.value)
-                    .toEqual("some other new value");
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/general/test/controllers/ObjectInspectorControllerSpec.js b/platform/commonUI/general/test/controllers/ObjectInspectorControllerSpec.js
deleted file mode 100644
index 5934ee65045..00000000000
--- a/platform/commonUI/general/test/controllers/ObjectInspectorControllerSpec.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Created by shale on 08/24/2015.
- */
-define(
-    ["../../src/controllers/ObjectInspectorController"],
-    function (ObjectInspectorController) {
-
-        describe("The object inspector controller ", function () {
-            var mockScope,
-                mockObjectService,
-                mockPromise,
-                mockDomainObject,
-                mockContextCapability,
-                mockLocationCapability,
-                controller;
-
-            beforeEach(function () {
-                mockScope = jasmine.createSpyObj(
-                    "$scope",
-                    ["$watch", "$on"]
-                );
-
-                mockObjectService = jasmine.createSpyObj(
-                    "objectService",
-                    ["getObjects"]
-                );
-                mockPromise = jasmine.createSpyObj(
-                    "promise",
-                    ["then"]
-                );
-                mockObjectService.getObjects.and.returnValue(mockPromise);
-
-                mockDomainObject = jasmine.createSpyObj(
-                    "selectedObject",
-                    ["hasCapability", "getCapability", "useCapability", "getModel"]
-                );
-                mockDomainObject.getModel.and.returnValue({location: 'somewhere'});
-                mockDomainObject.hasCapability.and.returnValue(true);
-
-                mockContextCapability = jasmine.createSpyObj(
-                    "context capability",
-                    ["getParent"]
-                );
-                mockLocationCapability = jasmine.createSpyObj(
-                    "location capability",
-                    ["isLink"]
-                );
-
-                mockDomainObject.getCapability.and.callFake(function (param) {
-                    if (param === 'location') {
-                        return mockLocationCapability;
-                    } else if (param === 'context') {
-                        return mockContextCapability;
-                    } else if (param === 'mutation') {
-                        return {
-                            listen: function () {
-                                return true;
-                            }
-                        };
-                    }
-                });
-
-                mockScope.domainObject = mockDomainObject;
-                controller = new ObjectInspectorController(mockScope, mockObjectService);
-            });
-
-            it("watches for changes to the selected object", function () {
-                expect(mockScope.$watch).toHaveBeenCalledWith('domainObject', jasmine.any(Function));
-            });
-
-            it("looks for contextual parent objects", function () {
-                mockScope.$watch.calls.mostRecent().args[1]();
-                expect(mockContextCapability.getParent).toHaveBeenCalled();
-            });
-
-            it("if link, looks for primary parent objects", function () {
-                mockLocationCapability.isLink.and.returnValue(true);
-
-                mockScope.$watch.calls.mostRecent().args[1]();
-                expect(mockDomainObject.getModel).toHaveBeenCalled();
-                expect(mockObjectService.getObjects).toHaveBeenCalled();
-                mockPromise.then.calls.mostRecent().args[0]({'somewhere': mockDomainObject});
-            });
-
-            it("gets metadata", function () {
-                mockScope.$watch.calls.mostRecent().args[1]();
-                expect(mockDomainObject.useCapability).toHaveBeenCalledWith('metadata');
-            });
-        });
-    }
-);
diff --git a/platform/commonUI/general/test/controllers/SelectorControllerSpec.js b/platform/commonUI/general/test/controllers/SelectorControllerSpec.js
deleted file mode 100644
index b2b23977093..00000000000
--- a/platform/commonUI/general/test/controllers/SelectorControllerSpec.js
+++ /dev/null
@@ -1,186 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/controllers/SelectorController"],
-    function (SelectorController) {
-
-        describe("The controller for the 'selector' control", function () {
-            var mockObjectService,
-                mockScope,
-                mockDomainObject,
-                mockType,
-                mockDomainObjects,
-                controller;
-
-            function promiseOf(v) {
-                return (v || {}).then ? v : {
-                    then: function (callback) {
-                        return promiseOf(callback(v));
-                    }
-                };
-            }
-
-            function makeMockObject(id) {
-                var mockObject = jasmine.createSpyObj(
-                    'object-' + id,
-                    ['getId']
-                );
-                mockObject.getId.and.returnValue(id);
-
-                return mockObject;
-            }
-
-            beforeEach(function () {
-                mockObjectService = jasmine.createSpyObj(
-                    'objectService',
-                    ['getObjects']
-                );
-                mockScope = jasmine.createSpyObj(
-                    '$scope',
-                    ['$watch', '$watchCollection']
-                );
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getCapability', 'hasCapability']
-                );
-                mockType = jasmine.createSpyObj(
-                    'type',
-                    ['instanceOf']
-                );
-                mockDomainObjects = {};
-
-                ["ROOT", "abc", "def", "xyz"].forEach(function (id) {
-                    mockDomainObjects[id] = makeMockObject(id);
-                });
-
-                mockDomainObject.getCapability.and.returnValue(mockType);
-                mockObjectService.getObjects.and.returnValue(promiseOf(mockDomainObjects));
-                mockScope.field = "testField";
-                mockScope.ngModel = {};
-
-                controller = new SelectorController(
-                    mockObjectService,
-                    mockScope
-                );
-            });
-
-            it("loads the root object", function () {
-                expect(mockObjectService.getObjects)
-                    .toHaveBeenCalledWith(["ROOT"]);
-            });
-
-            it("watches for changes in selection in left-hand tree", function () {
-                var testObject = {
-                    a: 123,
-                    b: 456
-                };
-                // This test is sensitive to ordering of watch calls
-                expect(mockScope.$watch.calls.count()).toEqual(1);
-                // Make sure we're watching the correct object
-                controller.treeModel.selectedObject = testObject;
-                expect(mockScope.$watch.calls.all()[0].args[0]()).toBe(testObject);
-            });
-
-            it("watches for changes in controlled property", function () {
-                var testValue = ["a", "b", 1, 2];
-                // This test is sensitive to ordering of watch calls
-                expect(mockScope.$watchCollection.calls.count()).toEqual(1);
-                // Make sure we're watching the correct object
-                mockScope.ngModel = { testField: testValue };
-                expect(mockScope.$watchCollection.calls.all()[0].args[0]()).toBe(testValue);
-            });
-
-            it("rejects selection of incorrect types", function () {
-                mockScope.structure = { type: "someType" };
-                mockType.instanceOf.and.returnValue(false);
-                controller.treeModel.selectedObject = mockDomainObject;
-                // Fire the watch
-                mockScope.$watch.calls.all()[0].args[1](mockDomainObject);
-                // Should have cleared the selection
-                expect(controller.treeModel.selectedObject).toBeUndefined();
-                // Verify interaction (that instanceOf got a useful argument)
-                expect(mockType.instanceOf).toHaveBeenCalledWith("someType");
-            });
-
-            it("permits selection of matching types", function () {
-                mockScope.structure = { type: "someType" };
-                mockType.instanceOf.and.returnValue(true);
-                controller.treeModel.selectedObject = mockDomainObject;
-                // Fire the watch
-                mockScope.$watch.calls.all()[0].args[1](mockDomainObject);
-                // Should have preserved the selection
-                expect(controller.treeModel.selectedObject).toEqual(mockDomainObject);
-                // Verify interaction (that instanceOf got a useful argument)
-                expect(mockType.instanceOf).toHaveBeenCalledWith("someType");
-            });
-
-            it("loads objects when the underlying list changes", function () {
-                var testIds = ["abc", "def", "xyz"];
-                // This test is sensitive to ordering of watch calls
-                expect(mockScope.$watchCollection.calls.count()).toEqual(1);
-                // Make sure we're watching the correct object
-                mockScope.ngModel = { testField: testIds };
-                // Fire the watch
-                mockScope.$watchCollection.calls.all()[0].args[1](testIds);
-                // Should have loaded the corresponding objects
-                expect(mockObjectService.getObjects).toHaveBeenCalledWith(testIds);
-            });
-
-            it("exposes the root object to populate the left-hand tree", function () {
-                expect(controller.root()).toEqual(mockDomainObjects.ROOT);
-            });
-
-            it("adds objects to the underlying model", function () {
-                expect(mockScope.ngModel.testField).toBeUndefined();
-                controller.select(mockDomainObjects.def);
-                expect(mockScope.ngModel.testField).toEqual(["def"]);
-                controller.select(mockDomainObjects.abc);
-                expect(mockScope.ngModel.testField).toEqual(["def", "abc"]);
-            });
-
-            it("removes objects to the underlying model", function () {
-                controller.select(mockDomainObjects.def);
-                controller.select(mockDomainObjects.abc);
-                expect(mockScope.ngModel.testField).toEqual(["def", "abc"]);
-                controller.deselect(mockDomainObjects.def);
-                expect(mockScope.ngModel.testField).toEqual(["abc"]);
-            });
-
-            it("provides a list of currently-selected objects", function () {
-                // Verify precondition
-                expect(controller.selected()).toEqual([]);
-                // Select some objects
-                controller.select(mockDomainObjects.def);
-                controller.select(mockDomainObjects.abc);
-                // Fire the watch for the id changes...
-                mockScope.$watchCollection.calls.all()[0].args[1](
-                    mockScope.$watchCollection.calls.all()[0].args[0]()
-                );
-                // Should have loaded and exposed those objects
-                expect(controller.selected()).toEqual(
-                    [mockDomainObjects.def, mockDomainObjects.abc]
-                );
-            });
-        });
-    }
-);
diff --git a/platform/commonUI/general/test/controllers/TimeRangeControllerSpec.js b/platform/commonUI/general/test/controllers/TimeRangeControllerSpec.js
deleted file mode 100644
index 3b59d82fdd7..00000000000
--- a/platform/commonUI/general/test/controllers/TimeRangeControllerSpec.js
+++ /dev/null
@@ -1,317 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/controllers/TimeRangeController", "moment"],
-    function (TimeRangeController, moment) {
-
-        var SEC = 1000,
-            MIN = 60 * SEC,
-            HOUR = 60 * MIN,
-            DAY = 24 * HOUR;
-
-        describe("The TimeRangeController", function () {
-            var mockScope,
-                mockFormatService,
-                testDefaultFormat,
-                mockTimeout,
-                mockNow,
-                mockFormat,
-                controller;
-
-            function fireWatch(expr, value) {
-                mockScope.$watch.calls.all().forEach(function (call) {
-                    if (call.args[0] === expr) {
-                        call.args[1](value);
-                    }
-                });
-            }
-
-            function fireWatchCollection(expr, value) {
-                mockScope.$watchCollection.calls.all().forEach(function (call) {
-                    if (call.args[0] === expr) {
-                        call.args[1](value);
-                    }
-                });
-            }
-
-            beforeEach(function () {
-                mockTimeout = function (fn) {
-                    return fn();
-                };
-
-                mockScope = jasmine.createSpyObj(
-                    "$scope",
-                    ["$apply", "$watch", "$watchCollection"]
-                );
-                mockFormatService = jasmine.createSpyObj(
-                    "formatService",
-                    ["getFormat"]
-                );
-                testDefaultFormat = 'utc';
-                mockFormat = jasmine.createSpyObj(
-                    "format",
-                    ["validate", "format", "parse"]
-                );
-
-                mockFormatService.getFormat.and.returnValue(mockFormat);
-
-                mockFormat.format.and.callFake(function (value) {
-                    return moment.utc(value).format("YYYY-MM-DD HH:mm:ss");
-                });
-
-                mockNow = jasmine.createSpy('now');
-
-                controller = new TimeRangeController(
-                    mockScope,
-                    mockTimeout,
-                    mockFormatService,
-                    testDefaultFormat,
-                    mockNow
-                );
-            });
-
-            it("watches the model that was passed in", function () {
-                expect(mockScope.$watchCollection)
-                    .toHaveBeenCalledWith("ngModel", jasmine.any(Function));
-            });
-
-            it("exposes start time validator", function () {
-                var testValue = 42000000;
-                mockScope.formModel = { end: testValue };
-                expect(controller.validateStart(testValue + 1))
-                    .toBe(false);
-                expect(controller.validateStart(testValue - 60 * 60 * 1000 - 1))
-                    .toBe(true);
-            });
-
-            it("exposes end time validator", function () {
-                var testValue = 42000000;
-                mockScope.formModel = { start: testValue };
-                expect(controller.validateEnd(testValue - 1))
-                    .toBe(false);
-                expect(controller.validateEnd(testValue + 60 * 60 * 1000 + 1))
-                    .toBe(true);
-            });
-
-            describe("when changes are made via form entry", function () {
-                beforeEach(function () {
-                    mockScope.ngModel = {
-                        outer: {
-                            start: DAY * 2,
-                            end: DAY * 3
-                        },
-                        inner: {
-                            start: DAY * 2.25,
-                            end: DAY * 2.75
-                        }
-                    };
-                    mockScope.formModel = {
-                        start: DAY * 10000,
-                        end: DAY * 11000
-                    };
-                });
-
-                it('updates all changed bounds when requested', function () {
-                    fireWatchCollection("formModel", mockScope.formModel);
-                    fireWatch("formModel.start", mockScope.formModel.start);
-                    fireWatch("formModel.end", mockScope.formModel.end);
-
-                    expect(mockScope.ngModel.outer.start)
-                        .not.toEqual(mockScope.formModel.start);
-                    expect(mockScope.ngModel.inner.start)
-                        .not.toEqual(mockScope.formModel.start);
-
-                    expect(mockScope.ngModel.outer.end)
-                        .not.toEqual(mockScope.formModel.end);
-                    expect(mockScope.ngModel.inner.end)
-                        .not.toEqual(mockScope.formModel.end);
-
-                    controller.updateBoundsFromForm();
-
-                    expect(mockScope.ngModel.outer.start)
-                        .toEqual(mockScope.formModel.start);
-                    expect(mockScope.ngModel.inner.start)
-                        .toEqual(mockScope.formModel.start);
-
-                    expect(mockScope.ngModel.outer.end)
-                        .toEqual(mockScope.formModel.end);
-                    expect(mockScope.ngModel.inner.end)
-                        .toEqual(mockScope.formModel.end);
-                });
-
-                it('updates changed start bound when requested', function () {
-                    fireWatchCollection("formModel", mockScope.formModel);
-                    fireWatch("formModel.start", mockScope.formModel.start);
-
-                    expect(mockScope.ngModel.outer.start)
-                        .not.toEqual(mockScope.formModel.start);
-                    expect(mockScope.ngModel.inner.start)
-                        .not.toEqual(mockScope.formModel.start);
-
-                    expect(mockScope.ngModel.outer.end)
-                        .not.toEqual(mockScope.formModel.end);
-                    expect(mockScope.ngModel.inner.end)
-                        .not.toEqual(mockScope.formModel.end);
-
-                    controller.updateBoundsFromForm();
-
-                    expect(mockScope.ngModel.outer.start)
-                        .toEqual(mockScope.formModel.start);
-                    expect(mockScope.ngModel.inner.start)
-                        .toEqual(mockScope.formModel.start);
-
-                    expect(mockScope.ngModel.outer.end)
-                        .not.toEqual(mockScope.formModel.end);
-                    expect(mockScope.ngModel.inner.end)
-                        .not.toEqual(mockScope.formModel.end);
-                });
-
-                it('updates changed end bound when requested', function () {
-                    fireWatchCollection("formModel", mockScope.formModel);
-                    fireWatch("formModel.end", mockScope.formModel.end);
-
-                    expect(mockScope.ngModel.outer.start)
-                        .not.toEqual(mockScope.formModel.start);
-                    expect(mockScope.ngModel.inner.start)
-                        .not.toEqual(mockScope.formModel.start);
-
-                    expect(mockScope.ngModel.outer.end)
-                        .not.toEqual(mockScope.formModel.end);
-                    expect(mockScope.ngModel.inner.end)
-                        .not.toEqual(mockScope.formModel.end);
-
-                    controller.updateBoundsFromForm();
-
-                    expect(mockScope.ngModel.outer.start)
-                        .not.toEqual(mockScope.formModel.start);
-                    expect(mockScope.ngModel.inner.start)
-                        .not.toEqual(mockScope.formModel.start);
-
-                    expect(mockScope.ngModel.outer.end)
-                        .toEqual(mockScope.formModel.end);
-                    expect(mockScope.ngModel.inner.end)
-                        .toEqual(mockScope.formModel.end);
-                });
-            });
-
-            describe("when dragged", function () {
-                beforeEach(function () {
-                    mockScope.ngModel = {
-                        outer: {
-                            start: DAY * 1000,
-                            end: DAY * 1001
-                        },
-                        inner: {
-                            start: DAY * 1000 + HOUR * 3,
-                            end: DAY * 1001 - HOUR * 3
-                        }
-                    };
-                    mockScope.spanWidth = 1000;
-                    fireWatch("spanWidth", mockScope.spanWidth);
-                    fireWatchCollection("ngModel", mockScope.ngModel);
-                });
-
-                it("updates the start time for left drags", function () {
-                    controller.startLeftDrag();
-                    controller.leftDrag(250);
-                    expect(mockScope.ngModel.inner.start)
-                        .toEqual(DAY * 1000 + HOUR * 9);
-                });
-
-                it("updates the end time for right drags", function () {
-                    controller.startRightDrag();
-                    controller.rightDrag(-250);
-                    expect(mockScope.ngModel.inner.end)
-                        .toEqual(DAY * 1000 + HOUR * 15);
-                });
-
-                it("updates both start and end for middle drags", function () {
-                    controller.startMiddleDrag();
-                    controller.middleDrag(-125);
-                    expect(mockScope.ngModel.inner).toEqual({
-                        start: DAY * 1000,
-                        end: DAY * 1000 + HOUR * 18
-                    });
-                    controller.middleDrag(250);
-                    expect(mockScope.ngModel.inner).toEqual({
-                        start: DAY * 1000 + HOUR * 6,
-                        end: DAY * 1001
-                    });
-                });
-
-                it("enforces a minimum inner span", function () {
-                    controller.startRightDrag();
-                    controller.rightDrag(-9999999);
-                    expect(mockScope.ngModel.inner.end)
-                        .toBeGreaterThan(mockScope.ngModel.inner.start);
-                });
-            });
-
-            describe("when outer bounds are changed", function () {
-                beforeEach(function () {
-                    mockScope.ngModel = {
-                        outer: {
-                            start: DAY * 1000,
-                            end: DAY * 1001
-                        },
-                        inner: {
-                            start: DAY * 1000 + HOUR * 3,
-                            end: DAY * 1001 - HOUR * 3
-                        }
-                    };
-                    mockScope.spanWidth = 1000;
-                    fireWatch("spanWidth", mockScope.spanWidth);
-                    fireWatchCollection("ngModel", mockScope.ngModel);
-                });
-
-                it("enforces a minimum inner span when outer span changes", function () {
-                    mockScope.ngModel.outer.end =
-                        mockScope.ngModel.outer.start - DAY * 100;
-                    fireWatch(
-                        "ngModel.outer.end",
-                        mockScope.ngModel.outer.end
-                    );
-                    expect(mockScope.ngModel.inner.end)
-                        .toBeGreaterThan(mockScope.ngModel.inner.start);
-                });
-
-            });
-
-            it("watches for changes in format selection", function () {
-                expect(mockFormatService.getFormat)
-                    .not.toHaveBeenCalledWith('test-format');
-                fireWatch("parameters.format", 'test-format');
-                expect(mockFormatService.getFormat)
-                    .toHaveBeenCalledWith('test-format');
-            });
-
-            it("throws an error for unknown formats", function () {
-                mockFormatService.getFormat.and.returnValue(undefined);
-                expect(function () {
-                    fireWatch("parameters.format", "some-format");
-                }).toThrow();
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/general/test/controllers/ToggleControllerSpec.js b/platform/commonUI/general/test/controllers/ToggleControllerSpec.js
deleted file mode 100644
index 9d7c8c4e045..00000000000
--- a/platform/commonUI/general/test/controllers/ToggleControllerSpec.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/controllers/ToggleController"],
-    function (ToggleController) {
-
-        describe("The toggle controller", function () {
-            var controller;
-
-            beforeEach(function () {
-                controller = new ToggleController();
-            });
-
-            it("is initially inactive", function () {
-                expect(controller.isActive()).toBe(false);
-            });
-
-            it("tracks enabled/disabled state when toggled", function () {
-                controller.toggle();
-                expect(controller.isActive()).toBe(true);
-                controller.toggle();
-                expect(controller.isActive()).toBe(false);
-                controller.toggle();
-                expect(controller.isActive()).toBe(true);
-                controller.toggle();
-                expect(controller.isActive()).toBe(false);
-            });
-
-            it("allows active state to be explicitly specified", function () {
-                controller.setState(true);
-                expect(controller.isActive()).toBe(true);
-                controller.setState(true);
-                expect(controller.isActive()).toBe(true);
-                controller.setState(false);
-                expect(controller.isActive()).toBe(false);
-                controller.setState(false);
-                expect(controller.isActive()).toBe(false);
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
deleted file mode 100644
index 2793a1799e3..00000000000
--- a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
+++ /dev/null
@@ -1,209 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/controllers/TreeNodeController"],
-    function (TreeNodeController) {
-
-        describe("The tree node controller", function () {
-            var mockScope,
-                mockTimeout,
-                mockDomainObject,
-                controller;
-
-            function TestObject(id, context) {
-                return {
-                    getId: function () {
-                        return id;
-                    },
-                    getCapability: function (key) {
-                        return key === 'context' ? context : undefined;
-                    }
-                };
-            }
-
-            beforeEach(function () {
-                mockScope = jasmine.createSpyObj("$scope", ["$watch", "$on", "$emit"]);
-                mockTimeout = jasmine.createSpy("$timeout");
-                mockDomainObject = jasmine.createSpyObj(
-                    "domainObject",
-                    ["getId", "getCapability", "getModel", "useCapability"]
-                );
-
-                controller = new TreeNodeController(mockScope, mockTimeout);
-            });
-
-            it("allows tracking of expansion state", function () {
-                // The tree node tracks whether or not it has ever
-                // been expanded in order to lazily load the expanded
-                // portion of the tree.
-                expect(controller.hasBeenExpanded()).toBeFalsy();
-                controller.trackExpansion();
-
-                // Expansion is tracked on a timeout, because too
-                // much expansion can result in an unstable digest.
-                expect(mockTimeout).toHaveBeenCalled();
-                mockTimeout.calls.mostRecent().args[0]();
-
-                expect(controller.hasBeenExpanded()).toBeTruthy();
-                controller.trackExpansion();
-                expect(controller.hasBeenExpanded()).toBeTruthy();
-            });
-
-            it("tracks whether or not the represented object is currently navigated-to", function () {
-                // This is needed to highlight the current selection
-                var mockContext = jasmine.createSpyObj(
-                        "context",
-                        ["getParent", "getPath", "getRoot"]
-                    ),
-                    obj = new TestObject("test-object", mockContext);
-
-                mockContext.getPath.and.returnValue([obj]);
-
-                // Verify precondition
-                expect(controller.isSelected()).toBeFalsy();
-
-                // Change the represented domain object
-                mockScope.domainObject = obj;
-
-                // Invoke the watch with the new selection
-                mockScope.$watch.calls.all()[0].args[1](obj);
-
-                expect(controller.isSelected()).toBeTruthy();
-            });
-
-            it("expands a node if it is on the navigation path", function () {
-                var mockParentContext = jasmine.createSpyObj(
-                        "parentContext",
-                        ["getParent", "getPath", "getRoot"]
-                    ),
-                    mockChildContext = jasmine.createSpyObj(
-                        "childContext",
-                        ["getParent", "getPath", "getRoot"]
-                    ),
-                    parent = new TestObject("parent", mockParentContext),
-                    child = new TestObject("child", mockChildContext);
-
-                mockChildContext.getParent.and.returnValue(parent);
-                mockChildContext.getPath.and.returnValue([parent, child]);
-                mockParentContext.getPath.and.returnValue([parent]);
-
-                // Set up such that we are on, but not at the end of, a path
-                mockScope.ngModel = { selectedObject: child };
-                mockScope.domainObject = parent;
-                mockScope.toggle = jasmine.createSpyObj("toggle", ["setState"]);
-
-                // Invoke the watch with the new selection
-                mockScope.$watch.calls.all()[0].args[1](child);
-
-                // Expansion is tracked on a timeout, because too
-                // much expansion can result in an unstable digest.
-                // Trigger that timeout.
-                expect(mockTimeout).toHaveBeenCalled();
-                mockTimeout.calls.mostRecent().args[0]();
-
-                expect(mockScope.toggle.setState).toHaveBeenCalledWith(true);
-                expect(controller.hasBeenExpanded()).toBeTruthy();
-                expect(controller.isSelected()).toBeFalsy();
-
-            });
-
-            it("does not expand a node if it is not on the navigation path", function () {
-                var mockParentContext = jasmine.createSpyObj(
-                        "parentContext",
-                        ["getParent", "getPath", "getRoot"]
-                    ),
-                    mockChildContext = jasmine.createSpyObj(
-                        "childContext",
-                        ["getParent", "getPath", "getRoot"]
-                    ),
-                    parent = new TestObject("parent", mockParentContext),
-                    child = new TestObject("child", mockChildContext);
-
-                mockChildContext.getParent.and.returnValue(parent);
-                mockChildContext.getPath.and.returnValue([child, child]);
-                mockParentContext.getPath.and.returnValue([parent]);
-
-                // Set up such that we are on, but not at the end of, a path
-                mockScope.ngModel = { selectedObject: child };
-                mockScope.domainObject = parent;
-                mockScope.toggle = jasmine.createSpyObj("toggle", ["setState"]);
-
-                // Invoke the watch with the new selection
-                mockScope.$watch.calls.all()[0].args[1](child);
-
-                // Expansion is tracked on a timeout, because too
-                // much expansion can result in an unstable digest.
-                // We want to make sure no timeouts are pending here.
-                expect(mockTimeout).not.toHaveBeenCalled();
-                expect(controller.hasBeenExpanded()).toBeFalsy();
-                expect(controller.isSelected()).toBeFalsy();
-            });
-
-            it("does not expand a node if no context is available", function () {
-                var mockParentContext = jasmine.createSpyObj(
-                        "parentContext",
-                        ["getParent", "getPath", "getRoot"]
-                    ),
-                    mockChildContext = jasmine.createSpyObj(
-                        "childContext",
-                        ["getParent", "getPath", "getRoot"]
-                    ),
-                    parent = new TestObject("parent", mockParentContext),
-                    child = new TestObject("child", undefined);
-
-                mockChildContext.getParent.and.returnValue(parent);
-                mockChildContext.getPath.and.returnValue([parent, child]);
-                mockParentContext.getPath.and.returnValue([parent]);
-
-                // Set up such that we are on, but not at the end of, a path
-                mockScope.ngModel = { selectedObject: child };
-                mockScope.domainObject = parent;
-                mockScope.toggle = jasmine.createSpyObj("toggle", ["setState"]);
-
-                // Invoke the watch with the new selection
-                mockScope.$watch.calls.all()[0].args[1](child);
-
-                expect(mockScope.toggle.setState).not.toHaveBeenCalled();
-                expect(controller.hasBeenExpanded()).toBeFalsy();
-                expect(controller.isSelected()).toBeFalsy();
-
-            });
-
-            it("exposes selected objects in scope", function () {
-                mockScope.domainObject = mockDomainObject;
-                mockScope.ngModel = {};
-                controller.select();
-                expect(mockScope.ngModel.selectedObject)
-                    .toEqual(mockDomainObject);
-            });
-
-            it("invokes optional callbacks upon selection", function () {
-                mockScope.parameters =
-                    { callback: jasmine.createSpy('callback') };
-                controller.select();
-                expect(mockScope.parameters.callback).toHaveBeenCalled();
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/general/test/controllers/ViewSwitcherControllerSpec.js b/platform/commonUI/general/test/controllers/ViewSwitcherControllerSpec.js
deleted file mode 100644
index a6b104068f8..00000000000
--- a/platform/commonUI/general/test/controllers/ViewSwitcherControllerSpec.js
+++ /dev/null
@@ -1,155 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * MCTRepresentationSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/controllers/ViewSwitcherController"],
-    function (ViewSwitcherController) {
-
-        describe("The view switcher controller", function () {
-            var mockScope,
-                mockTimeout,
-                controller;
-
-            beforeEach(function () {
-                mockScope = jasmine.createSpyObj("$scope", ["$watch"]);
-                mockTimeout = jasmine.createSpy("$timeout");
-                mockTimeout.and.callFake(function (cb) {
-                    cb();
-                });
-                mockScope.ngModel = {};
-                controller = new ViewSwitcherController(mockScope, mockTimeout);
-            });
-
-            it("watches for changes in applicable views", function () {
-                // The view capability is used by associated
-                // representations, so "view" in scope should always
-                // be the list of applicable views. The view switcher
-                // controller should be watching this.
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "view",
-                    jasmine.any(Function)
-                );
-            });
-
-            it("maintains the current selection when views change", function () {
-                var views = [
-                    {
-                        key: "a",
-                        name: "View A"
-                    },
-                    {
-                        key: "b",
-                        name: "View B"
-                    },
-                    {
-                        key: "c",
-                        name: "View C"
-                    },
-                    {
-                        key: "d",
-                        name: "View D"
-                    }
-                ];
-                mockScope.$watch.calls.mostRecent().args[1](views);
-                mockScope.ngModel.selected = views[1];
-
-                // Change the set of applicable views
-                mockScope.$watch.calls.mostRecent().args[1]([
-                    {
-                        key: "a",
-                        name: "View A"
-                    },
-                    {
-                        key: "b",
-                        name: "View B"
-                    },
-                    {
-                        key: "x",
-                        name: "View X"
-                    }
-                ]);
-
-                // "b" is still in there, should remain selected
-                expect(mockScope.ngModel.selected).toEqual(views[1]);
-            });
-
-            it("chooses a default if a selected view becomes inapplicable", function () {
-                var views = [
-                    {
-                        key: "a",
-                        name: "View A"
-                    },
-                    {
-                        key: "b",
-                        name: "View B"
-                    },
-                    {
-                        key: "c",
-                        name: "View C"
-                    },
-                    {
-                        key: "d",
-                        name: "View D"
-                    }
-                ];
-                mockScope.$watch.calls.mostRecent().args[1](views);
-                mockScope.ngModel.selected = views[1];
-
-                // Change the set of applicable views
-                mockScope.$watch.calls.mostRecent().args[1]([
-                    {
-                        key: "a",
-                        name: "View A"
-                    },
-                    {
-                        key: "c",
-                        name: "View C"
-                    },
-                    {
-                        key: "x",
-                        name: "View X"
-                    }
-                ]);
-
-                // "b" is still in there, should remain selected
-                expect(mockScope.ngModel.selected).not.toEqual(views[1]);
-            });
-
-            // Use of a timeout avoids infinite digest problems when deeply
-            // nesting switcher-driven views (e.g. in a layout.) See WTD-689
-            it("updates initial selection on a timeout", function () {
-                // Verify precondition
-                expect(mockTimeout).not.toHaveBeenCalled();
-
-                // Invoke the watch for set of views
-                mockScope.$watch.calls.mostRecent().args[1]([]);
-
-                // Should have run on a timeout
-                expect(mockTimeout).toHaveBeenCalled();
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/general/test/directives/MCTClickElsewhereSpec.js b/platform/commonUI/general/test/directives/MCTClickElsewhereSpec.js
deleted file mode 100644
index 3c1c7bdaddc..00000000000
--- a/platform/commonUI/general/test/directives/MCTClickElsewhereSpec.js
+++ /dev/null
@@ -1,129 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/directives/MCTClickElsewhere"],
-    function (MCTClickElsewhere) {
-
-        var JQLITE_METHODS = ["on", "off", "find", "parent"];
-
-        describe("The mct-click-elsewhere directive", function () {
-            var mockDocument,
-                mockScope,
-                mockElement,
-                testAttrs,
-                mockBody,
-                mockPlainEl,
-                testRect,
-                mctClickElsewhere;
-
-            function testEvent(x, y) {
-                return {
-                    clientX: x,
-                    clientY: y,
-                    preventDefault: jasmine.createSpy("preventDefault")
-                };
-            }
-
-            beforeEach(function () {
-                mockDocument =
-                    jasmine.createSpyObj("$document", JQLITE_METHODS);
-                mockScope =
-                    jasmine.createSpyObj("$scope", ["$eval", "$apply", "$on"]);
-                mockElement =
-                    jasmine.createSpyObj("element", JQLITE_METHODS);
-                mockBody =
-                    jasmine.createSpyObj("body", JQLITE_METHODS);
-                mockPlainEl =
-                    jasmine.createSpyObj("htmlElement", ["getBoundingClientRect"]);
-
-                testAttrs = {
-                    mctClickElsewhere: "some Angular expression"
-                };
-                testRect = {
-                    left: 20,
-                    top: 42,
-                    width: 60,
-                    height: 75
-                };
-                mockElement[0] = mockPlainEl;
-                mockPlainEl.getBoundingClientRect.and.returnValue(testRect);
-
-                mockDocument.find.and.returnValue(mockBody);
-
-                mctClickElsewhere = new MCTClickElsewhere(mockDocument);
-                mctClickElsewhere.link(mockScope, mockElement, testAttrs);
-            });
-
-            it("is valid as an attribute", function () {
-                expect(mctClickElsewhere.restrict).toEqual("A");
-            });
-
-            it("detaches listeners when destroyed", function () {
-                expect(mockBody.off).not.toHaveBeenCalled();
-                mockScope.$on.calls.all().forEach(function (call) {
-                    if (call.args[0] === '$destroy') {
-                        call.args[1]();
-                    }
-                });
-                expect(mockBody.off).toHaveBeenCalled();
-                expect(mockBody.off.calls.mostRecent().args)
-                    .toEqual(mockBody.on.calls.mostRecent().args);
-            });
-
-            it("listens for mousedown on the document's body", function () {
-                expect(mockBody.on)
-                    .toHaveBeenCalledWith('mousedown', jasmine.any(Function));
-            });
-
-            describe("when a click occurs outside the element's bounds", function () {
-                beforeEach(function () {
-                    mockBody.on.calls.mostRecent().args[1](testEvent(
-                        testRect.left + testRect.width + 10,
-                        testRect.top + testRect.height + 10
-                    ));
-                });
-
-                it("triggers an evaluation of its related Angular expression", function () {
-                    expect(mockScope.$apply).toHaveBeenCalled();
-                    mockScope.$apply.calls.mostRecent().args[0]();
-                    expect(mockScope.$eval)
-                        .toHaveBeenCalledWith(testAttrs.mctClickElsewhere);
-                });
-            });
-
-            describe("when a click occurs within the element's bounds", function () {
-                beforeEach(function () {
-                    mockBody.on.calls.mostRecent().args[1](testEvent(
-                        testRect.left + testRect.width / 2,
-                        testRect.top + testRect.height / 2
-                    ));
-                });
-
-                it("triggers no evaluation", function () {
-                    expect(mockScope.$eval).not.toHaveBeenCalled();
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/general/test/directives/MCTContainerSpec.js b/platform/commonUI/general/test/directives/MCTContainerSpec.js
deleted file mode 100644
index 4ba6b016ab6..00000000000
--- a/platform/commonUI/general/test/directives/MCTContainerSpec.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/directives/MCTContainer"],
-    function (MCTContainer) {
-
-        describe("The mct-container directive", function () {
-            var testContainers = [
-                    {
-                        bundle: {
-                            path: "a",
-                            resources: "b"
-                        },
-                        template: "<div>foo</div>",
-                        key: "abc"
-                    },
-                    {
-                        bundle: {
-                            path: "x",
-                            resources: "y"
-                        },
-                        template: "<span>bar</span>",
-                        key: "xyz",
-                        attributes: ["someAttr", "someOtherAttr"]
-                    }
-                ],
-                mctContainer;
-
-            beforeEach(function () {
-                mctContainer = new MCTContainer(testContainers);
-            });
-
-            it("is applicable to elements", function () {
-                expect(mctContainer.restrict).toEqual("E");
-            });
-
-            it("creates a new (non-isolate) scope", function () {
-                expect(mctContainer.scope).toBe(true);
-            });
-
-            it("chooses a template based on key", function () {
-                expect(mctContainer.template(
-                    undefined,
-                    { key: "abc" }
-                )).toEqual(testContainers[0].template);
-
-                expect(mctContainer.template(
-                    undefined,
-                    { key: "xyz" }
-                )).toEqual(testContainers[1].template);
-            });
-
-            it("copies attributes needed by the container", function () {
-                var scope = {};
-
-                mctContainer.link(
-                    scope,
-                    undefined,
-                    {
-                        key: "xyz",
-                        someAttr: "some value",
-                        someOtherAttr: "some other value",
-                        someExtraAttr: "should not be present"
-                    }
-                );
-
-                expect(scope.container.someAttr).toEqual("some value");
-                expect(scope.container.someOtherAttr).toEqual("some other value");
-                expect(scope.container.someExtraAttr).toBeUndefined();
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/general/test/directives/MCTDragSpec.js b/platform/commonUI/general/test/directives/MCTDragSpec.js
deleted file mode 100644
index 2691691c6a4..00000000000
--- a/platform/commonUI/general/test/directives/MCTDragSpec.js
+++ /dev/null
@@ -1,303 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/directives/MCTDrag"],
-    function (MCTDrag) {
-
-        var JQLITE_METHODS = ["on", "off", "find"];
-
-        describe("The mct-drag directive in Mobile", function () {
-            var mockDocument,
-                mockAgentService,
-                mockScope,
-                mockElement,
-                testAttrs,
-                mockBody,
-                mctDrag;
-
-            function testEvent(x, y) {
-                return {
-                    pageX: x,
-                    pageY: y,
-                    preventDefault: jasmine.createSpy("preventDefault")
-                };
-            }
-
-            beforeEach(function () {
-                mockDocument =
-                    jasmine.createSpyObj("$document", JQLITE_METHODS);
-                mockAgentService =
-                    jasmine.createSpyObj("agentService", ["isMobile"]);
-                mockScope =
-                    jasmine.createSpyObj("$scope", ["$eval", "$apply"]);
-                mockElement =
-                    jasmine.createSpyObj("element", JQLITE_METHODS);
-                mockBody =
-                    jasmine.createSpyObj("body", JQLITE_METHODS);
-
-                testAttrs = {
-                    mctDragDown: "starting a drag",
-                    mctDrag: "continuing a drag",
-                    mctDragUp: "ending a drag"
-                };
-
-                mockDocument.find.and.returnValue(mockBody);
-                mockAgentService.isMobile.and.returnValue(true);
-
-                mctDrag = new MCTDrag(mockDocument, mockAgentService);
-                mctDrag.link(mockScope, mockElement, testAttrs);
-            });
-
-            it("is valid as an attribute", function () {
-                expect(mctDrag.restrict).toEqual("A");
-            });
-
-            it("listens for touchstart on its element", function () {
-                expect(mockElement.on).toHaveBeenCalledWith(
-                    "touchstart",
-                    jasmine.any(Function)
-                );
-
-                // Verify no interactions with body as well
-                expect(mockBody.on).not.toHaveBeenCalled();
-            });
-
-            it("invokes mctDragDown when dragging begins", function () {
-                var event = testEvent(42, 60);
-                mockElement.on.calls.mostRecent().args[1](event);
-                expect(mockScope.$eval).toHaveBeenCalledWith(
-                    testAttrs.mctDragDown,
-                    {
-                        delta: [0, 0],
-                        $event: event
-                    }
-                );
-            });
-
-            it("listens for touchmove after dragging begins", function () {
-                mockElement.on.calls.mostRecent().args[1](testEvent(42, 60));
-                expect(mockBody.on).toHaveBeenCalledWith(
-                    "touchmove",
-                    jasmine.any(Function)
-                );
-                expect(mockBody.on).toHaveBeenCalledWith(
-                    "touchend",
-                    jasmine.any(Function)
-                );
-            });
-
-            it("invokes mctDrag expression during drag", function () {
-                var event;
-
-                mockElement.on.calls.mostRecent().args[1](testEvent(42, 60));
-
-                // Find and invoke the touchmove listener
-                mockBody.on.calls.all().forEach(function (call) {
-                    if (call.args[0] === 'touchmove') {
-                        call.args[1](event = testEvent(52, 200));
-                    }
-                });
-
-                // Should have passed that delta to mct-drag expression
-                expect(mockScope.$eval).toHaveBeenCalledWith(
-                    testAttrs.mctDrag,
-                    {
-                        delta: [10, 140],
-                        $event: event
-                    }
-                );
-            });
-
-            it("invokes mctDragUp expression after drag", function () {
-                var event;
-
-                mockElement.on.calls.mostRecent().args[1](testEvent(42, 60));
-
-                // Find and invoke the touchmove listener
-                mockBody.on.calls.all().forEach(function (call) {
-                    if (call.args[0] === 'touchmove') {
-                        call.args[1](testEvent(52, 200));
-                    }
-                });
-                // Find and invoke the touchmove listener
-                mockBody.on.calls.all().forEach(function (call) {
-                    if (call.args[0] === 'touchend') {
-                        call.args[1](event = testEvent(40, 71));
-                    }
-                });
-
-                // Should have passed that delta to mct-drag-up expression
-                // and that delta should have been relative to the
-                // initial position
-                expect(mockScope.$eval).toHaveBeenCalledWith(
-                    testAttrs.mctDragUp,
-                    {
-                        delta: [-2, 11],
-                        $event: event
-                    }
-                );
-
-                // Should also have unregistered listeners
-                expect(mockBody.off).toHaveBeenCalled();
-            });
-
-        });
-
-        describe("The mct-drag directive in Desktop", function () {
-            var mockDocument,
-                mockAgentService,
-                mockScope,
-                mockElement,
-                testAttrs,
-                mockBody,
-                mctDrag;
-
-            function testEvent(x, y) {
-                return {
-                    pageX: x,
-                    pageY: y,
-                    preventDefault: jasmine.createSpy("preventDefault")
-                };
-            }
-
-            beforeEach(function () {
-                mockDocument =
-                    jasmine.createSpyObj("$document", JQLITE_METHODS);
-                mockAgentService =
-                    jasmine.createSpyObj("agentService", ["isMobile"]);
-                mockScope =
-                    jasmine.createSpyObj("$scope", ["$eval", "$apply"]);
-                mockElement =
-                    jasmine.createSpyObj("element", JQLITE_METHODS);
-                mockBody =
-                    jasmine.createSpyObj("body", JQLITE_METHODS);
-
-                testAttrs = {
-                    mctDragDown: "starting a drag",
-                    mctDrag: "continuing a drag",
-                    mctDragUp: "ending a drag"
-                };
-
-                mockDocument.find.and.returnValue(mockBody);
-                mockAgentService.isMobile.and.returnValue(false);
-
-                mctDrag = new MCTDrag(mockDocument, mockAgentService);
-                mctDrag.link(mockScope, mockElement, testAttrs);
-            });
-
-            it("is valid as an attribute", function () {
-                expect(mctDrag.restrict).toEqual("A");
-            });
-
-            it("listens for mousedown on its element", function () {
-                expect(mockElement.on).toHaveBeenCalledWith(
-                    "mousedown",
-                    jasmine.any(Function)
-                );
-
-                // Verify no interactions with body as well
-                expect(mockBody.on).not.toHaveBeenCalled();
-            });
-
-            it("invokes mctDragDown when dragging begins", function () {
-                var event = testEvent(42, 60);
-                mockElement.on.calls.mostRecent().args[1](event);
-                expect(mockScope.$eval).toHaveBeenCalledWith(
-                    testAttrs.mctDragDown,
-                    {
-                        delta: [0, 0],
-                        $event: event
-                    }
-                );
-            });
-
-            it("listens for mousemove after dragging begins", function () {
-                mockElement.on.calls.mostRecent().args[1](testEvent(42, 60));
-                expect(mockBody.on).toHaveBeenCalledWith(
-                    "mousemove",
-                    jasmine.any(Function)
-                );
-                expect(mockBody.on).toHaveBeenCalledWith(
-                    "mouseup",
-                    jasmine.any(Function)
-                );
-            });
-
-            it("invokes mctDrag expression during drag", function () {
-                var event;
-
-                mockElement.on.calls.mostRecent().args[1](testEvent(42, 60));
-
-                // Find and invoke the mousemove listener
-                mockBody.on.calls.all().forEach(function (call) {
-                    if (call.args[0] === 'mousemove') {
-                        call.args[1](event = testEvent(52, 200));
-                    }
-                });
-
-                // Should have passed that delta to mct-drag expression
-                expect(mockScope.$eval).toHaveBeenCalledWith(
-                    testAttrs.mctDrag,
-                    {
-                        delta: [10, 140],
-                        $event: event
-                    }
-                );
-            });
-
-            it("invokes mctDragUp expression after drag", function () {
-                var event;
-
-                mockElement.on.calls.mostRecent().args[1](testEvent(42, 60));
-
-                // Find and invoke the mousemove listener
-                mockBody.on.calls.all().forEach(function (call) {
-                    if (call.args[0] === 'mousemove') {
-                        call.args[1](testEvent(52, 200));
-                    }
-                });
-                // Find and invoke the mousemove listener
-                mockBody.on.calls.all().forEach(function (call) {
-                    if (call.args[0] === 'mouseup') {
-                        call.args[1](event = testEvent(40, 71));
-                    }
-                });
-
-                // Should have passed that delta to mct-drag-up expression
-                // and that delta should have been relative to the
-                // initial position
-                expect(mockScope.$eval).toHaveBeenCalledWith(
-                    testAttrs.mctDragUp,
-                    {
-                        delta: [-2, 11],
-                        $event: event
-                    }
-                );
-
-                // Should also have unregistered listeners
-                expect(mockBody.off).toHaveBeenCalled();
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/general/test/directives/MCTPopupSpec.js b/platform/commonUI/general/test/directives/MCTPopupSpec.js
deleted file mode 100644
index d2a50e53d2a..00000000000
--- a/platform/commonUI/general/test/directives/MCTPopupSpec.js
+++ /dev/null
@@ -1,132 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/directives/MCTPopup"],
-    function (MCTPopup) {
-
-        var JQLITE_METHODS = [
-            "on",
-            "off",
-            "find",
-            "parent",
-            "css",
-            "addClass",
-            "append"
-        ];
-
-        describe("The mct-popup directive", function () {
-            var mockCompile,
-                mockPopupService,
-                mockPopup,
-                mockScope,
-                mockElement,
-                testAttrs,
-                mockTransclude,
-                mockParentEl,
-                mockNewElement,
-                testRect,
-                mctPopup;
-
-            beforeEach(function () {
-                mockCompile =
-                    jasmine.createSpy("$compile");
-                mockPopupService =
-                    jasmine.createSpyObj("popupService", ["display"]);
-                mockPopup =
-                    jasmine.createSpyObj("popup", ["dismiss"]);
-                mockScope =
-                    jasmine.createSpyObj("$scope", ["$eval", "$apply", "$on"]);
-                mockElement =
-                    jasmine.createSpyObj("element", JQLITE_METHODS);
-                mockTransclude =
-                    jasmine.createSpy("transclude");
-                mockParentEl =
-                    jasmine.createSpyObj("parent", ["getBoundingClientRect"]);
-                mockNewElement =
-                    jasmine.createSpyObj("newElement", JQLITE_METHODS);
-
-                testAttrs = {
-                    mctClickElsewhere: "some Angular expression"
-                };
-                testRect = {
-                    left: 20,
-                    top: 42,
-                    width: 60,
-                    height: 75
-                };
-
-                mockCompile.and.callFake(function () {
-                    var mockFn = jasmine.createSpy();
-                    mockFn.and.returnValue(mockNewElement);
-
-                    return mockFn;
-                });
-                mockElement.parent.and.returnValue([mockParentEl]);
-                mockParentEl.getBoundingClientRect.and.returnValue(testRect);
-                mockPopupService.display.and.returnValue(mockPopup);
-
-                mctPopup = new MCTPopup(mockCompile, mockPopupService);
-
-                mctPopup.link(
-                    mockScope,
-                    mockElement,
-                    testAttrs,
-                    null,
-                    mockTransclude
-                );
-            });
-
-            it("is valid as an element", function () {
-                expect(mctPopup.restrict).toEqual("E");
-            });
-
-            describe("creates an element which", function () {
-                it("displays as a popup", function () {
-                    expect(mockPopupService.display).toHaveBeenCalledWith(
-                        mockNewElement,
-                        [testRect.left, testRect.top]
-                    );
-                });
-
-                it("displays transcluded content", function () {
-                    var mockClone =
-                        jasmine.createSpyObj('clone', JQLITE_METHODS);
-                    mockTransclude.calls.mostRecent().args[0](mockClone);
-                    expect(mockNewElement.append)
-                        .toHaveBeenCalledWith(mockClone);
-                });
-
-                it("is removed when its containing scope is destroyed", function () {
-                    expect(mockPopup.dismiss).not.toHaveBeenCalled();
-                    mockScope.$on.calls.all().forEach(function (call) {
-                        if (call.args[0] === '$destroy') {
-                            call.args[1]();
-                        }
-                    });
-                    expect(mockPopup.dismiss).toHaveBeenCalled();
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/general/test/directives/MCTResizeSpec.js b/platform/commonUI/general/test/directives/MCTResizeSpec.js
deleted file mode 100644
index 49273604941..00000000000
--- a/platform/commonUI/general/test/directives/MCTResizeSpec.js
+++ /dev/null
@@ -1,166 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/directives/MCTResize"],
-    function (MCTResize) {
-
-        describe("The mct-resize directive", function () {
-            var mockTimeout,
-                mockScope,
-                testElement,
-                testAttrs,
-                mctResize;
-
-            beforeEach(function () {
-                mockTimeout = jasmine.createSpy("$timeout");
-                mockScope = jasmine.createSpyObj("$scope", ["$eval", "$on", "$apply"]);
-
-                testElement = {
-                    offsetWidth: 100,
-                    offsetHeight: 200
-                };
-                testAttrs = { mctResize: "some-expr" };
-
-                mctResize = new MCTResize(mockTimeout);
-            });
-
-            it("is applicable as an attribute only", function () {
-                expect(mctResize.restrict).toEqual("A");
-            });
-
-            it("starts tracking size changes upon link", function () {
-                expect(mockTimeout).not.toHaveBeenCalled();
-                mctResize.link(mockScope, [testElement], testAttrs);
-                expect(mockTimeout).toHaveBeenCalledWith(
-                    jasmine.any(Function),
-                    jasmine.any(Number),
-                    false
-                );
-                expect(mockScope.$eval).toHaveBeenCalledWith(
-                    testAttrs.mctResize,
-                    {
-                        bounds: {
-                            width: 100,
-                            height: 200
-                        }
-                    }
-                );
-            });
-
-            it("reports size changes on a timeout", function () {
-                mctResize.link(mockScope, [testElement], testAttrs);
-
-                // Change the element's apparent size
-                testElement.offsetWidth = 300;
-                testElement.offsetHeight = 350;
-
-                // Shouldn't know about this yet...
-                expect(mockScope.$eval).not.toHaveBeenCalledWith(
-                    testAttrs.mctResize,
-                    {
-                        bounds: {
-                            width: 300,
-                            height: 350
-                        }
-                    }
-                );
-
-                // Fire the timeout
-                mockTimeout.calls.mostRecent().args[0]();
-
-                // Should have triggered an evaluation of mctResize
-                // with the new width & height
-                expect(mockScope.$eval).toHaveBeenCalledWith(
-                    testAttrs.mctResize,
-                    {
-                        bounds: {
-                            width: 300,
-                            height: 350
-                        }
-                    }
-                );
-            });
-
-            it("stops size checking for size changes after destroy", function () {
-                mctResize.link(mockScope, [testElement], testAttrs);
-
-                // First, make sure there's a $destroy observer
-                expect(mockScope.$on)
-                    .toHaveBeenCalledWith("$destroy", jasmine.any(Function));
-
-                // Should have scheduled the first timeout
-                expect(mockTimeout.calls.count()).toEqual(1);
-
-                // Fire the timeout
-                mockTimeout.calls.mostRecent().args[0]();
-
-                // Should have scheduled another timeout
-                expect(mockTimeout.calls.count()).toEqual(2);
-
-                // Broadcast a destroy event
-                mockScope.$on.calls.mostRecent().args[1]();
-
-                testElement.offsetWidth = 300;
-                testElement.offsetHeight = 350;
-                mockScope.$eval.calls.reset();
-
-                // Fire the timeout
-                mockTimeout.calls.mostRecent().args[0]();
-
-                // Should NOT have scheduled another timeout
-                expect(mockTimeout.calls.count()).toEqual(2);
-                expect(mockScope.$eval).not.toHaveBeenCalled();
-            });
-
-            it("triggers a digest cycle when size changes", function () {
-                var applyCount;
-                mctResize.link(mockScope, [testElement], testAttrs);
-                applyCount = mockScope.$apply.calls.count();
-
-                // Change the element's apparent size
-                testElement.offsetWidth = 300;
-                testElement.offsetHeight = 350;
-
-                // Fire the timeout
-                mockTimeout.calls.mostRecent().args[0]();
-
-                // No more apply calls
-                expect(mockScope.$apply.calls.count())
-                    .toBeGreaterThan(applyCount);
-            });
-
-            it("does not trigger a digest cycle when size does not change", function () {
-                var applyCount;
-                mctResize.link(mockScope, [testElement], testAttrs);
-                applyCount = mockScope.$apply.calls.count();
-
-                // Fire the timeout
-                mockTimeout.calls.mostRecent().args[0]();
-
-                // No more apply calls
-                expect(mockScope.$apply.calls.count()).toEqual(applyCount);
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/general/test/directives/MCTScrollSpec.js b/platform/commonUI/general/test/directives/MCTScrollSpec.js
deleted file mode 100644
index cd0f3d16543..00000000000
--- a/platform/commonUI/general/test/directives/MCTScrollSpec.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-define(
-    ['../../src/directives/MCTScroll'],
-    function (MCTScroll) {
-
-        var EVENT_PROPERTY = "testProperty",
-            ATTRIBUTE = "testAttribute",
-            EXPRESSION = "some.expression";
-
-        // MCTScroll is the commonality between mct-scroll-x and
-        // mct-scroll-y; it gets the event property to watch and
-        // the attribute which contains the associated assignable
-        // expression.
-        describe("An mct-scroll-* directive", function () {
-            var mockParse,
-                mockParsed,
-                mockScope,
-                mockElement,
-                testAttrs,
-                mctScroll;
-
-            beforeEach(function () {
-                mockParse = jasmine.createSpy('$parse');
-                mockParsed = jasmine.createSpy('parsed');
-                mockParsed.assign = jasmine.createSpy('assign');
-
-                mockScope = jasmine.createSpyObj('$scope', ['$watch', '$apply']);
-                mockElement = [{ testProperty: 42 }];
-                mockElement.on = jasmine.createSpy('on');
-
-                mockParse.and.returnValue(mockParsed);
-
-                testAttrs = {};
-                testAttrs[ATTRIBUTE] = EXPRESSION;
-
-                mctScroll = new MCTScroll(
-                    mockParse,
-                    EVENT_PROPERTY,
-                    ATTRIBUTE
-                );
-                mctScroll.link(mockScope, mockElement, testAttrs);
-            });
-
-            it("is available for attributes", function () {
-                expect(mctScroll.restrict).toEqual('A');
-            });
-
-            it("does not create an isolate scope", function () {
-                expect(mctScroll.scope).toBeUndefined();
-            });
-
-            it("watches for changes in observed expression", function () {
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    EXPRESSION,
-                    jasmine.any(Function)
-                );
-                // Should have been only watch (other tests need this to be true)
-                expect(mockScope.$watch.calls.count()).toEqual(1);
-            });
-
-            it("listens for scroll events", function () {
-                expect(mockElement.on).toHaveBeenCalledWith(
-                    'scroll',
-                    jasmine.any(Function)
-                );
-                // Should have been only listener (other tests need this to be true)
-                expect(mockElement.on.calls.count()).toEqual(1);
-            });
-
-            it("publishes initial scroll state", function () {
-                expect(mockParse).toHaveBeenCalledWith(EXPRESSION);
-                expect(mockParsed.assign).toHaveBeenCalledWith(mockScope, 42);
-            });
-
-            it("updates scroll state when scope changes", function () {
-                mockScope.$watch.calls.mostRecent().args[1](64);
-                expect(mockElement[0].testProperty).toEqual(64);
-            });
-
-            it("updates scope when scroll state changes", function () {
-                mockElement[0].testProperty = 12321;
-                mockElement.on.calls.mostRecent().args[1]({ target: mockElement[0] });
-                expect(mockParsed.assign).toHaveBeenCalledWith(mockScope, 12321);
-                expect(mockScope.$apply).toHaveBeenCalledWith(EXPRESSION);
-            });
-
-            // This would trigger an infinite digest exception
-            it("does not call $apply during construction", function () {
-                expect(mockScope.$apply).not.toHaveBeenCalled();
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/general/test/directives/MCTSplitPaneSpec.js b/platform/commonUI/general/test/directives/MCTSplitPaneSpec.js
deleted file mode 100644
index a72539ede0d..00000000000
--- a/platform/commonUI/general/test/directives/MCTSplitPaneSpec.js
+++ /dev/null
@@ -1,233 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/directives/MCTSplitPane"],
-    function (MCTSplitPane) {
-
-        var JQLITE_METHODS = [
-            'on',
-            'addClass',
-            'children',
-            'eq',
-            'toggleClass',
-            'css'
-        ];
-
-        describe("The mct-split-pane directive", function () {
-            var mockParse,
-                mockLog,
-                mockInterval,
-                mockParsed,
-                mctSplitPane,
-                mockWindow = {};
-
-            beforeEach(function () {
-                mockParse = jasmine.createSpy('$parse');
-                mockLog =
-                    jasmine.createSpyObj('$log', ['warn', 'info', 'debug']);
-                mockInterval = jasmine.createSpy('$interval');
-                mockInterval.cancel = jasmine.createSpy('mockCancel');
-                mockParsed = jasmine.createSpy('parsed');
-                mockParsed.assign = jasmine.createSpy('assign');
-                mockParse.and.returnValue(mockParsed);
-
-                mockWindow.localStorage = {
-                    store: {},
-                    setItem: function (key, value) {
-                        this.store[key] = value;
-                    },
-                    getItem: function (key) {
-                        return this.store[key];
-                    }
-                };
-
-                mctSplitPane = new MCTSplitPane(
-                    mockParse,
-                    mockLog,
-                    mockInterval,
-                    mockWindow
-                );
-            });
-
-            it("is only applicable as an element", function () {
-                expect(mctSplitPane.restrict).toEqual("E");
-            });
-
-            describe("when its controller is applied", function () {
-                var mockScope,
-                    mockElement,
-                    testAttrs,
-                    mockChildren,
-                    mockFirstPane,
-                    mockSplitter,
-                    mockSecondPane,
-                    controller;
-
-                function fireOn(eventType) {
-                    mockScope.$on.calls.all().forEach(function (call) {
-                        if (call.args[0] === eventType) {
-                            call.args[1]();
-                        }
-                    });
-                }
-
-                beforeEach(function () {
-                    mockScope =
-                        jasmine.createSpyObj('$scope', ['$apply', '$watch', '$on']);
-                    mockElement =
-                        jasmine.createSpyObj('element', JQLITE_METHODS);
-                    testAttrs = {alias: 'rightSide'};
-                    mockChildren =
-                        jasmine.createSpyObj('children', JQLITE_METHODS);
-                    mockFirstPane =
-                        jasmine.createSpyObj('firstPane', JQLITE_METHODS);
-                    mockSplitter =
-                        jasmine.createSpyObj('splitter', JQLITE_METHODS);
-                    mockSecondPane =
-                        jasmine.createSpyObj('secondPane', JQLITE_METHODS);
-
-                    mockElement.children.and.returnValue(mockChildren);
-                    mockElement[0] = {
-                        offsetWidth: 12321,
-                        offsetHeight: 45654
-                    };
-                    mockChildren.eq.and.callFake(function (i) {
-                        return [mockFirstPane, mockSplitter, mockSecondPane][i];
-                    });
-                    mockFirstPane[0] = {
-                        offsetWidth: 123,
-                        offsetHeight: 456
-                    };
-                    mockSplitter[0] = {
-                        nodeName: 'mct-splitter',
-                        offsetWidth: 10,
-                        offsetHeight: 456
-                    };
-                    mockSecondPane[0] = {
-                        offsetWidth: 10,
-                        offsetHeight: 456
-                    };
-
-                    mockChildren[0] = mockFirstPane[0];
-                    mockChildren[1] = mockSplitter[0];
-                    mockChildren[3] = mockSecondPane[0];
-                    mockChildren.length = 3;
-
-                    controller = mctSplitPane.controller[3](
-                        mockScope,
-                        mockElement,
-                        testAttrs
-                    );
-                });
-
-                it("sets an interval which does not trigger digests", function () {
-                    expect(mockInterval.calls.mostRecent().args[3]).toBe(false);
-                });
-
-                it("exposes its splitter's initial position", function () {
-                    expect(controller.position()).toEqual(
-                        mockFirstPane[0].offsetWidth
-                    );
-                });
-
-                it("exposes the current anchoring mode", function () {
-                    expect(controller.anchor()).toEqual({
-                        edge: 'left',
-                        opposite: 'right',
-                        dimension: 'width',
-                        orientation: 'vertical'
-                    });
-                });
-
-                it("applies resizing class to children when resizing", function () {
-                    controller.startResizing();
-                    expect(mockChildren.toggleClass).toHaveBeenCalledWith('resizing');
-                });
-
-                it("removes resizing class from children when resizing action ends", function () {
-                    controller.endResizing(0);
-                    expect(mockChildren.toggleClass).toHaveBeenCalledWith('resizing');
-                });
-
-                it("allows positions to be set", function () {
-                    var testValue = mockChildren[0].offsetWidth + 50;
-                    controller.position(testValue);
-                    expect(mockFirstPane.css).toHaveBeenCalledWith(
-                        'width',
-                        (testValue) + 'px'
-                    );
-                });
-
-                it("issues no warnings under nominal usage", function () {
-                    expect(mockLog.warn).not.toHaveBeenCalled();
-                });
-
-                it("warns if no mct-splitter is present", function () {
-                    mockSplitter[0].nodeName = "not-mct-splitter";
-                    controller = mctSplitPane.controller[3](
-                        mockScope,
-                        mockElement,
-                        testAttrs
-                    );
-                    expect(mockLog.warn).toHaveBeenCalled();
-                });
-
-                it("warns if an unknown anchor key is given", function () {
-                    testAttrs.anchor = "middle";
-                    controller = mctSplitPane.controller[3](
-                        mockScope,
-                        mockElement,
-                        testAttrs
-                    );
-                    expect(mockLog.warn).toHaveBeenCalled();
-                });
-
-                it("updates positions on a timer", function () {
-                    mockFirstPane[0].offsetWidth += 100;
-                    // Should not reflect the change yet
-                    expect(controller.position()).not.toEqual(
-                        mockFirstPane[0].offsetWidth
-                    );
-                    mockInterval.calls.mostRecent().args[0]();
-                    expect(controller.position()).toEqual(
-                        mockFirstPane[0].offsetWidth
-                    );
-                });
-
-                it("cancels the active interval when scope is destroyed", function () {
-                    expect(mockInterval.cancel).not.toHaveBeenCalled();
-                    fireOn('$destroy');
-                    expect(mockInterval.cancel).toHaveBeenCalled();
-                });
-
-                it("saves user preference to localStorage when user is done resizing", function () {
-                    controller.endResizing(100);
-                    expect(Number(mockWindow.localStorage.getItem('mctSplitPane-rightSide'))).toEqual(100);
-                });
-
-            });
-
-        });
-
-    }
-);
diff --git a/platform/commonUI/general/test/directives/MCTSplitterSpec.js b/platform/commonUI/general/test/directives/MCTSplitterSpec.js
deleted file mode 100644
index 73ab9a2e2d0..00000000000
--- a/platform/commonUI/general/test/directives/MCTSplitterSpec.js
+++ /dev/null
@@ -1,110 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/directives/MCTSplitter"],
-    function (MCTSplitter) {
-
-        describe("The mct-splitter directive", function () {
-            var mctSplitter;
-
-            beforeEach(function () {
-                mctSplitter = new MCTSplitter();
-            });
-
-            it("is applicable to elements", function () {
-                expect(mctSplitter.restrict).toEqual("E");
-            });
-
-            it("depends on the mct-split-pane controller", function () {
-                expect(mctSplitter.require).toEqual("^mctSplitPane");
-            });
-
-            describe("when linked", function () {
-                var mockScope,
-                    mockElement,
-                    testAttrs,
-                    mockSplitPane;
-
-                beforeEach(function () {
-                    mockScope = jasmine.createSpyObj(
-                        '$scope',
-                        ['$on', '$watch']
-                    );
-                    mockElement = jasmine.createSpyObj(
-                        'element',
-                        ['addClass']
-                    );
-                    testAttrs = {};
-                    mockSplitPane = jasmine.createSpyObj(
-                        'mctSplitPane',
-                        ['position', 'startResizing', 'endResizing', 'anchor']
-                    );
-
-                    mctSplitter.link(
-                        mockScope,
-                        mockElement,
-                        testAttrs,
-                        mockSplitPane
-                    );
-                });
-
-                it("adds a splitter class", function () {
-                    expect(mockElement.addClass)
-                        .toHaveBeenCalledWith('splitter');
-                });
-
-                describe("and then manipulated", function () {
-                    var testPosition;
-
-                    beforeEach(function () {
-                        testPosition = 12321;
-                        mockSplitPane.position.and.returnValue(testPosition);
-                        mockSplitPane.anchor.and.returnValue({
-                            orientation: 'vertical',
-                            reversed: false
-                        });
-                        mockScope.splitter.startMove();
-                    });
-
-                    it("tell's the splitter when it is resizing", function () {
-                        expect(mockSplitPane.startResizing)
-                            .toHaveBeenCalled();
-                    });
-
-                    it("repositions during drag", function () {
-                        mockScope.splitter.move([10, 0]);
-                        expect(mockSplitPane.position)
-                            .toHaveBeenCalledWith(testPosition + 10);
-                    });
-
-                    it("tell's the splitter when it is done resizing", function () {
-                        mockScope.splitter.move([10, 0]);
-                        mockScope.splitter.endMove();
-                        expect(mockSplitPane.endResizing).toHaveBeenCalledWith(testPosition + 10);
-                    });
-
-                });
-            });
-        });
-    }
-);
diff --git a/platform/commonUI/general/test/directives/MCTTreeSpec.js b/platform/commonUI/general/test/directives/MCTTreeSpec.js
deleted file mode 100644
index 7b7b71b8080..00000000000
--- a/platform/commonUI/general/test/directives/MCTTreeSpec.js
+++ /dev/null
@@ -1,146 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    '../../src/directives/MCTTree',
-    '../../src/ui/TreeView'
-], function (MCTTree, TreeView) {
-    describe("The mct-tree directive", function () {
-        var mockParse,
-            mockGestureService,
-            mockExpr,
-            mctTree;
-
-        function makeMockDomainObject(id) {
-            var mockDomainObject = jasmine.createSpyObj('domainObject-' + id, [
-                'getId',
-                'getModel',
-                'getCapability',
-                'hasCapability'
-            ]);
-            mockDomainObject.getId.and.returnValue(id);
-            mockDomainObject.getModel.and.returnValue({});
-
-            return mockDomainObject;
-        }
-
-        beforeEach(function () {
-            mockGestureService = jasmine.createSpyObj(
-                'gestureService',
-                ['attachGestures']
-            );
-            mockParse = jasmine.createSpy('$parse');
-            mockExpr = jasmine.createSpy('expr');
-            mockExpr.assign = jasmine.createSpy('assign');
-            mockParse.and.returnValue(mockExpr);
-            spyOn(TreeView.prototype, 'observe').and.callThrough();
-
-            mctTree = new MCTTree(mockParse, mockGestureService);
-        });
-
-        it("is applicable as an element", function () {
-            expect(mctTree.restrict).toEqual("E");
-        });
-
-        it("two-way binds", function () {
-            expect(mctTree.scope).toEqual({
-                rootObject: "=",
-                selectedObject: "=",
-                allowSelection: "=?",
-                onSelection: "=?"
-            });
-        });
-
-        describe("link", function () {
-            var mockScope,
-                mockElement,
-                testAttrs;
-
-            beforeEach(function () {
-                mockScope =
-                    jasmine.createSpyObj('$scope', ['$watch', '$on', '$apply']);
-                mockElement = jasmine.createSpyObj('element', ['append']);
-                testAttrs = { mctModel: "some-expression" };
-                mockScope.$parent =
-                    jasmine.createSpyObj('$scope', ['$watch', '$on']);
-                mctTree.link(mockScope, mockElement, testAttrs);
-            });
-
-            it("populates the mct-tree element", function () {
-                expect(mockElement.append).toHaveBeenCalled();
-            });
-
-            it("watches for selected-object expression in the parent", function () {
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "selectedObject",
-                    jasmine.any(Function)
-                );
-            });
-
-            it("watches for changes to root-object", function () {
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "rootObject",
-                    jasmine.any(Function)
-                );
-            });
-
-            it("listens for the $destroy event", function () {
-                expect(mockScope.$on).toHaveBeenCalledWith(
-                    "$destroy",
-                    jasmine.any(Function)
-                );
-            });
-
-            it("watches for changes in tree view", function () {
-
-            });
-
-            // https://github.com/nasa/openmct/issues/1114
-            it("does not trigger $apply during $watches", function () {
-                mockScope.mctObject = makeMockDomainObject('root');
-                mockScope.mctMode = makeMockDomainObject('selection');
-                mockScope.$watch.calls.all().forEach(function (call) {
-                    call.args[1](mockScope[call.args[0]]);
-                });
-                expect(mockScope.$apply).not.toHaveBeenCalled();
-            });
-            it("does trigger $apply from tree manipulation", function () {
-                if (/PhantomJS/g.test(window.navigator.userAgent)) {
-                    console.log('Unable to run test in PhantomJS due to lack of support for event constructors');
-
-                    return;
-                }
-
-                // White-boxy; we know this is the setter for the tree's value
-                var treeValueFn = TreeView.prototype.observe.calls.all()[0].args[0];
-
-                mockScope.mctObject = makeMockDomainObject('root');
-                mockScope.mctMode = makeMockDomainObject('selection');
-
-                treeValueFn(makeMockDomainObject('other'), new MouseEvent("click"));
-
-                expect(mockScope.$apply).toHaveBeenCalled();
-            });
-        });
-    });
-
-});
diff --git a/platform/commonUI/general/test/filters/ReverseFilterSpec.js b/platform/commonUI/general/test/filters/ReverseFilterSpec.js
deleted file mode 100644
index 8a2f5156004..00000000000
--- a/platform/commonUI/general/test/filters/ReverseFilterSpec.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['../../src/filters/ReverseFilter'],
-    function (ReverseFilter) {
-
-        describe("The reverse filter", function () {
-            var reverse;
-
-            beforeEach(function () {
-                reverse = new ReverseFilter();
-            });
-
-            it("reverses text", function () {
-                expect(reverse('foo')).toEqual('oof');
-            });
-
-            it("returns undefined for undefined inputs", function () {
-                expect(reverse(undefined)).toBeUndefined();
-            });
-        });
-    }
-);
diff --git a/platform/commonUI/general/test/services/PopupServiceSpec.js b/platform/commonUI/general/test/services/PopupServiceSpec.js
deleted file mode 100644
index 45d1d2edca9..00000000000
--- a/platform/commonUI/general/test/services/PopupServiceSpec.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/services/PopupService"],
-    function (PopupService) {
-
-        describe("PopupService", function () {
-            var mockDocument,
-                testWindow,
-                mockBody,
-                mockElement,
-                popupService;
-
-            beforeEach(function () {
-                mockDocument = jasmine.createSpyObj('$document', ['find']);
-                testWindow = {
-                    innerWidth: 1000,
-                    innerHeight: 800
-                };
-                mockBody = jasmine.createSpyObj('body', ['append']);
-                mockElement = jasmine.createSpyObj('element', [
-                    'css',
-                    'remove'
-                ]);
-
-                mockDocument.find.and.callFake(function (query) {
-                    return query === 'body' && mockBody;
-                });
-
-                popupService = new PopupService(mockDocument, testWindow);
-            });
-
-            it("adds elements to the body of the document", function () {
-                popupService.display(mockElement, [0, 0]);
-                expect(mockBody.append).toHaveBeenCalledWith(mockElement);
-            });
-
-            describe("when positioned in appropriate quadrants", function () {
-                it("orients elements relative to the top-left", function () {
-                    popupService.display(mockElement, [25, 50]);
-                    expect(mockElement.css).toHaveBeenCalledWith({
-                        position: 'absolute',
-                        left: '25px',
-                        top: '50px'
-                    });
-                });
-
-                it("orients elements relative to the top-right", function () {
-                    popupService.display(mockElement, [800, 50]);
-                    expect(mockElement.css).toHaveBeenCalledWith({
-                        position: 'absolute',
-                        right: '200px',
-                        top: '50px'
-                    });
-                });
-
-                it("orients elements relative to the bottom-right", function () {
-                    popupService.display(mockElement, [800, 650]);
-                    expect(mockElement.css).toHaveBeenCalledWith({
-                        position: 'absolute',
-                        right: '200px',
-                        bottom: '150px'
-                    });
-                });
-
-                it("orients elements relative to the bottom-left", function () {
-                    popupService.display(mockElement, [120, 650]);
-                    expect(mockElement.css).toHaveBeenCalledWith({
-                        position: 'absolute',
-                        left: '120px',
-                        bottom: '150px'
-                    });
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/general/test/services/PopupSpec.js b/platform/commonUI/general/test/services/PopupSpec.js
deleted file mode 100644
index 1f2b6b98f67..00000000000
--- a/platform/commonUI/general/test/services/PopupSpec.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/services/Popup"],
-    function (Popup) {
-
-        describe("Popup", function () {
-            var mockElement,
-                testStyles,
-                popup;
-
-            beforeEach(function () {
-                mockElement =
-                    jasmine.createSpyObj('element', ['css', 'remove']);
-                testStyles = {
-                    left: '12px',
-                    top: '14px'
-                };
-                popup = new Popup(mockElement, testStyles);
-            });
-
-            it("applies CSS styles when instantiated", function () {
-                expect(mockElement.css)
-                    .toHaveBeenCalledWith(testStyles);
-            });
-
-            it("reports the orientation of the popup", function () {
-                var otherStyles = {
-                        right: '12px',
-                        bottom: '14px'
-                    },
-                    otherPopup = new Popup(mockElement, otherStyles);
-
-                expect(popup.goesLeft()).toBeFalsy();
-                expect(popup.goesRight()).toBeTruthy();
-                expect(popup.goesUp()).toBeFalsy();
-                expect(popup.goesDown()).toBeTruthy();
-
-                expect(otherPopup.goesLeft()).toBeTruthy();
-                expect(otherPopup.goesRight()).toBeFalsy();
-                expect(otherPopup.goesUp()).toBeTruthy();
-                expect(otherPopup.goesDown()).toBeFalsy();
-            });
-
-            it("removes elements when dismissed", function () {
-                expect(mockElement.remove).not.toHaveBeenCalled();
-                popup.dismiss();
-                expect(mockElement.remove).toHaveBeenCalled();
-            });
-
-        });
-
-    }
-);
diff --git a/platform/commonUI/general/test/services/UrlServiceSpec.js b/platform/commonUI/general/test/services/UrlServiceSpec.js
deleted file mode 100644
index 1086084c278..00000000000
--- a/platform/commonUI/general/test/services/UrlServiceSpec.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * MCTRepresentationSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/services/UrlService"],
-    function (UrlService) {
-
-        describe("The url service", function () {
-            var urlService,
-                mockLocation,
-                mockDomainObject,
-                mockContext,
-                mockMode,
-                testViews;
-
-            beforeEach(function () {
-                // Creates a mockLocation, used to
-                // do the view search
-                mockLocation = jasmine.createSpyObj(
-                    "$location",
-                    ["path", "search"]
-                );
-
-                // The mockDomainObject is initialized as a
-                // spy object to ultimately be passed into the
-                // urlService urlFor function
-                mockDomainObject = jasmine.createSpyObj(
-                    "domainObject",
-                    ["getId", "getCapability", "getModel", "useCapability"]
-                );
-                mockContext = jasmine.createSpyObj('context', ['getPath']);
-                testViews = [
-                    { key: 'abc' },
-                    {
-                        key: 'def',
-                        someKey: 'some value'
-                    },
-                    { key: 'xyz' }
-                ];
-                mockMode = "browse";
-
-                // The mockContext is set a path
-                // for the mockDomainObject
-                mockContext.getPath.and.returnValue(
-                    [mockDomainObject]
-                );
-
-                // view capability used with the testviews made
-                mockDomainObject.useCapability.and.callFake(function (c) {
-                    return (c === 'view') && testViews;
-                });
-
-                // context capability used with the mockContext created
-                // so the variables including context in the urlFor are
-                // initialized and reached
-                mockDomainObject.getCapability.and.callFake(function (c) {
-                    return c === 'context' && mockContext;
-                });
-
-                // Uses the mockLocation to get the current
-                // "mock" website's view
-                mockLocation.search.and.returnValue({ view: 'def' });
-
-                urlService = new UrlService(mockLocation);
-            });
-
-            it("get url for a location using domainObject and mode", function () {
-                urlService.urlForLocation(mockMode, mockDomainObject);
-            });
-
-            it("get url for a new tab using domainObject and mode", function () {
-                urlService.urlForNewTab(mockMode, mockDomainObject);
-            });
-        });
-    }
-);
diff --git a/platform/commonUI/general/test/suite.json b/platform/commonUI/general/test/suite.json
deleted file mode 100644
index 09d0bfd0979..00000000000
--- a/platform/commonUI/general/test/suite.json
+++ /dev/null
@@ -1,29 +0,0 @@
-[
-    "controllers/ActionGroupController",
-    "controllers/BottomBarController",
-    "controllers/ClickAwayController",
-    "controllers/ContextMenuController",
-    "controllers/DateTimeFieldController",
-    "controllers/DateTimePickerController",
-    "controllers/GetterSetterController",
-    "controllers/ObjectInspectorController",
-    "controllers/SelectorController",
-    "controllers/TimeRangeController",
-    "controllers/ToggleController",
-    "controllers/TreeNodeController",
-    "controllers/ViewSwitcherController",
-    "directives/MCTClickElsewhere",
-    "directives/MCTContainer",
-    "directives/MCTDrag",
-    "directives/MCTPopup",
-    "directives/MCTResize",
-    "directives/MCTScroll",
-    "directives/MCTSplitPane",
-    "directives/MCTSplitter",
-    "filters/ReverseFilter",
-    "services/Popup",
-    "services/PopupService",
-    "services/UrlService",
-    "StyleSheetLoader",
-    "UnsupportedBrowserWarning"
-]
diff --git a/platform/commonUI/general/test/ui/TreeViewSpec.js b/platform/commonUI/general/test/ui/TreeViewSpec.js
deleted file mode 100644
index b99d20661f2..00000000000
--- a/platform/commonUI/general/test/ui/TreeViewSpec.js
+++ /dev/null
@@ -1,290 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    '../../src/ui/TreeView',
-    'zepto'
-], function (TreeView, $) {
-
-    xdescribe("TreeView", function () {
-        var mockGestureService,
-            mockGestureHandle,
-            mockDomainObject,
-            mockMutation,
-            mockUnlisten,
-            testCapabilities,
-            treeView;
-
-        function makeMockDomainObject(id, model, capabilities) {
-            var mockDomainObj = jasmine.createSpyObj(
-                'domainObject-' + id,
-                [
-                    'getId',
-                    'getModel',
-                    'getCapability',
-                    'hasCapability',
-                    'useCapability'
-                ]
-            );
-            mockDomainObj.getId.and.returnValue(id);
-            mockDomainObj.getModel.and.returnValue(model);
-            mockDomainObj.hasCapability.and.callFake(function (c) {
-                return Boolean(capabilities[c]);
-            });
-            mockDomainObj.getCapability.and.callFake(function (c) {
-                return capabilities[c];
-            });
-            mockDomainObj.useCapability.and.callFake(function (c) {
-                return capabilities[c] && capabilities[c].invoke();
-            });
-
-            return mockDomainObj;
-        }
-
-        beforeEach(function () {
-            mockGestureService = jasmine.createSpyObj(
-                'gestureService',
-                ['attachGestures']
-            );
-
-            mockGestureHandle = jasmine.createSpyObj('gestures', ['destroy']);
-
-            mockGestureService.attachGestures.and.returnValue(mockGestureHandle);
-
-            mockMutation = jasmine.createSpyObj('mutation', ['listen']);
-            mockUnlisten = jasmine.createSpy('unlisten');
-            mockMutation.listen.and.returnValue(mockUnlisten);
-
-            testCapabilities = { mutation: mockMutation };
-
-            mockDomainObject =
-                makeMockDomainObject('parent', {}, testCapabilities);
-
-            treeView = new TreeView(mockGestureService);
-        });
-
-        describe("elements", function () {
-            var elements;
-
-            beforeEach(function () {
-                elements = treeView.elements();
-            });
-
-            it("is an unordered list", function () {
-                expect(elements[0].tagName.toLowerCase())
-                    .toEqual('ul');
-            });
-        });
-
-        describe("model", function () {
-            var mockComposition;
-
-            function makeGenericCapabilities() {
-                var mockStatus =
-                        jasmine.createSpyObj('status', ['listen', 'list']);
-
-                mockStatus.list.and.returnValue([]);
-
-                return {
-                    context: jasmine.createSpyObj('context', ['getPath']),
-                    type: jasmine.createSpyObj('type', ['getCssClass']),
-                    location: jasmine.createSpyObj('location', ['isLink']),
-                    mutation: jasmine.createSpyObj('mutation', ['listen']),
-                    status: mockStatus
-                };
-            }
-
-            beforeEach(function () {
-                mockComposition = ['a', 'b', 'c'].map(function (id) {
-                    var testCaps = makeGenericCapabilities(),
-                        mockChild =
-                            makeMockDomainObject(id, {}, testCaps);
-
-                    testCaps.context.getPath
-                        .and.returnValue([mockDomainObject, mockChild]);
-
-                    return mockChild;
-                });
-
-                testCapabilities.composition =
-                    jasmine.createSpyObj('composition', ['invoke']);
-                testCapabilities.composition.invoke
-                    .and.returnValue(Promise.resolve(mockComposition));
-
-                treeView.model(mockDomainObject);
-
-                return testCapabilities.composition.invoke();
-            });
-
-            it("adds one node per composition element", function () {
-                expect(treeView.elements()[0].childElementCount)
-                    .toEqual(mockComposition.length);
-            });
-
-            it("listens for mutation", function () {
-                expect(testCapabilities.mutation.listen)
-                    .toHaveBeenCalledWith(jasmine.any(Function));
-            });
-
-            describe("when mutation occurs", function () {
-                beforeEach(function () {
-                    mockComposition.pop();
-                    testCapabilities.mutation.listen
-                        .calls.mostRecent().args[0](mockDomainObject.getModel());
-
-                    return testCapabilities.composition.invoke();
-                });
-
-                it("continues to show one node per composition element", function () {
-                    expect(treeView.elements()[0].childElementCount)
-                        .toEqual(mockComposition.length);
-                });
-            });
-
-            describe("when replaced with a non-compositional domain object", function () {
-                beforeEach(function () {
-                    delete testCapabilities.composition;
-                    treeView.model(mockDomainObject);
-                });
-
-                it("stops listening for mutation", function () {
-                    expect(mockUnlisten).toHaveBeenCalled();
-                });
-
-                it("removes all tree nodes", function () {
-                    expect(treeView.elements()[0].childElementCount)
-                        .toEqual(0);
-                });
-            });
-
-            describe("when selection state changes", function () {
-                var selectionIndex = 1;
-
-                beforeEach(function () {
-                    treeView.value(mockComposition[selectionIndex]);
-                });
-
-                it("communicates selection state to an appropriate node", function () {
-                    var selected = $(treeView.elements()[0]).find('.selected');
-                    expect(selected.length).toEqual(1);
-                });
-            });
-
-            describe("when a context-less object is selected", function () {
-                beforeEach(function () {
-                    var testCaps = makeGenericCapabilities(),
-                        mockDomainObj =
-                            makeMockDomainObject('xyz', {}, testCaps);
-                    delete testCaps.context;
-                    treeView.value(mockDomainObj);
-                });
-
-                it("clears all selection state", function () {
-                    var selected = $(treeView.elements()[0]).find('.selected');
-                    expect(selected.length).toEqual(0);
-                });
-            });
-
-            describe("when children contain children", function () {
-                beforeEach(function () {
-                    var newCapabilities = makeGenericCapabilities(),
-                        gcCapabilities = makeGenericCapabilities(),
-                        mockNewChild =
-                            makeMockDomainObject('d', {}, newCapabilities),
-                        mockGrandchild =
-                            makeMockDomainObject('gc', {}, gcCapabilities);
-
-                    newCapabilities.composition =
-                        jasmine.createSpyObj('composition', ['invoke']);
-                    newCapabilities.composition.invoke
-                        .and.returnValue(Promise.resolve([mockGrandchild]));
-                    mockComposition.push(mockNewChild);
-
-                    newCapabilities.context.getPath.and.returnValue([
-                        mockDomainObject,
-                        mockNewChild
-                    ]);
-                    gcCapabilities.context.getPath.and.returnValue([
-                        mockDomainObject,
-                        mockNewChild,
-                        mockGrandchild
-                    ]);
-
-                    testCapabilities.mutation.listen
-                        .calls.mostRecent().args[0](mockDomainObject);
-
-                    return testCapabilities.composition.invoke().then(function () {
-                        treeView.value(mockGrandchild);
-
-                        return newCapabilities.composition.invoke();
-                    });
-                });
-
-                it("creates inner trees", function () {
-                    expect($(treeView.elements()[0]).find('ul').length)
-                        .toEqual(1);
-                });
-            });
-
-            describe("when status changes", function () {
-                var testStatuses;
-
-                beforeEach(function () {
-                    var mockStatus = mockComposition[1].getCapability('status');
-
-                    testStatuses = ['foo'];
-
-                    mockStatus.list.and.returnValue(testStatuses);
-                    mockStatus.listen.calls.mostRecent().args[0](testStatuses);
-                });
-
-                it("reflects the status change in the tree", function () {
-                    expect($(treeView.elements()).find('.s-status-foo').length)
-                        .toEqual(1);
-                });
-            });
-        });
-
-        describe("observe", function () {
-            var mockCallback,
-                unobserve;
-
-            beforeEach(function () {
-                mockCallback = jasmine.createSpy('callback');
-                unobserve = treeView.observe(mockCallback);
-            });
-
-            it("notifies listeners when value is changed", function () {
-                treeView.value(mockDomainObject, {some: event});
-                expect(mockCallback)
-                    .toHaveBeenCalledWith(mockDomainObject, {some: event});
-            });
-
-            it("does not notify listeners when deactivated", function () {
-                unobserve();
-                treeView.value(mockDomainObject);
-                expect(mockCallback).not.toHaveBeenCalled();
-            });
-        });
-    });
-
-});
diff --git a/platform/commonUI/inspect/bundle.js b/platform/commonUI/inspect/bundle.js
deleted file mode 100644
index d06017e182d..00000000000
--- a/platform/commonUI/inspect/bundle.js
+++ /dev/null
@@ -1,117 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/gestures/InfoGesture",
-    "./src/gestures/InfoButtonGesture",
-    "./src/services/InfoService",
-    "./res/info-table.html",
-    "./res/info-bubble.html",
-    "./res/bubble.html",
-    "./res/templates/info-button.html"
-], function (
-    InfoGesture,
-    InfoButtonGesture,
-    InfoService,
-    infoTableTemplate,
-    infoBubbleTemplate,
-    bubbleTemplate,
-    infoButtonTemplate
-) {
-
-    return {
-        name: "platform/commonUI/inspect",
-        definition: {
-            "extensions": {
-                "templates": [
-                    {
-                        "key": "info-table",
-                        "template": infoTableTemplate
-                    },
-                    {
-                        "key": "info-bubble",
-                        "template": infoBubbleTemplate
-                    }
-                ],
-                "containers": [
-                    {
-                        "key": "bubble",
-                        "template": bubbleTemplate,
-                        "attributes": [
-                            "bubbleTitle",
-                            "bubbleLayout"
-                        ],
-                        "alias": "bubble"
-                    }
-                ],
-                "gestures": [
-                    {
-                        "key": "info",
-                        "implementation": InfoGesture,
-                        "depends": [
-                            "$timeout",
-                            "agentService",
-                            "infoService",
-                            "INFO_HOVER_DELAY"
-                        ]
-                    },
-                    {
-                        "key": "infobutton",
-                        "implementation": InfoButtonGesture,
-                        "depends": [
-                            "$document",
-                            "agentService",
-                            "infoService"
-                        ]
-                    }
-                ],
-                "services": [
-                    {
-                        "key": "infoService",
-                        "implementation": InfoService,
-                        "depends": [
-                            "$compile",
-                            "$rootScope",
-                            "popupService",
-                            "agentService"
-                        ]
-                    }
-                ],
-                "constants": [
-                    {
-                        "key": "INFO_HOVER_DELAY",
-                        "value": 2000
-                    }
-                ],
-                "representations": [
-                    {
-                        "key": "info-button",
-                        "template": infoButtonTemplate,
-                        "gestures": [
-                            "infobutton"
-                        ]
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/commonUI/inspect/res/bubble.html b/platform/commonUI/inspect/res/bubble.html
deleted file mode 100644
index f528d6432fa..00000000000
--- a/platform/commonUI/inspect/res/bubble.html
+++ /dev/null
@@ -1,9 +0,0 @@
-    <div class="t-infobubble s-infobubble l-infobubble-wrapper {{bubble.bubbleLayout}}">
-        <div class="l-infobubble">
-            <div ng-show="bubble.bubbleTitle.length > 0"
-                 class="title">
-                {{bubble.bubbleTitle}}
-            </div>
-            <span ng-transclude></span>
-        </div>
-    </div>
diff --git a/platform/commonUI/inspect/res/info-bubble.html b/platform/commonUI/inspect/res/info-bubble.html
deleted file mode 100644
index 82545cb29e8..00000000000
--- a/platform/commonUI/inspect/res/info-bubble.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<mct-container
-	key="bubble"
-	bubble-title="{{parameters.title}}"
-	bubble-layout="{{parameters.layout}}"
-	>
-    <mct-include key="info-table"
-                 ng-model="ngModel">
-    </mct-include>
-</mct-container>
diff --git a/platform/commonUI/inspect/res/info-table.html b/platform/commonUI/inspect/res/info-table.html
deleted file mode 100644
index 0c89a498d90..00000000000
--- a/platform/commonUI/inspect/res/info-table.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<table>
-    <tr ng-repeat="property in ngModel">
-        <td class="label">{{property.name}}</td>
-        <td title="{{property.value}}" class="value align-{{property.align}}">
-            {{property.value}}
-        </td>
-    </tr>
-</table>
diff --git a/platform/commonUI/inspect/res/infobubble.html b/platform/commonUI/inspect/res/infobubble.html
deleted file mode 100644
index 3afb65c71cc..00000000000
--- a/platform/commonUI/inspect/res/infobubble.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div ng-init="
-bubbles = [
-	{layout: 'arw-top arw-left'},
-	{layout: 'arw-top arw-right'},
-	{layout: 'arw-btm arw-left'},
-	{layout: 'arw-btm arw-right'}
-];
-
-titlex='Egress Scenario scelerisque mauris pid montes nunc ut aliquam elementum tincidunt phasellus 1';
-title='Egress Scenario 1';
-
-propertiesShort=[{label:'Type', value:'Timeline', align:'left'},
-{label:'Start', value:'2015-04-27 00:00:00 UTC', align:'left'},
-{label:'End', value:'2015-04-27 09:15:37 UTC', align:'left'},
-{label:'ID', value:'WRP-T-89', align:'left'}];
-
-properties=[{label:'Type', value:'Timeline', align:'left'},
-{label:'Start', value:'2015-04-27 00:00:00 UTC', align:'left'},
-{label:'End', value:'2015-04-27 06:07:26 UTC', align:'left'},
-{label:'Duration', value:'06:07:26', align:'left'},
-{label:'Created', value:'2015-04-26 12:27:00 UTC', align:'left'},
-{label:'Modified', value:'2015-04-26 23:21:00 UTC', align:'left'},
-{label:'Status', value:'Up to date', align:'left'},
-{label:'URL', value:'http://www.logitech.com/en-us/product/bluetooth-mouse-m557?crid=7', align:'wrap'},
-{label:'Description', value:'Enjoy exceptional battery life for a Bluetooth mouse, and work for up to a full year between battery changes, An On/Off switch helps conserve power, smart sleep mode extends battery life, and an indicator light helps to ensure that you’ll never be caught off guard.', align:'wrap'},
-{label:'ID', value:'WRP-T-89', align:'left'}];
-"></div>
-
-
-<div
-	style="position: absolute"
-	ng-repeat="bubble in bubbles"
-	ng-style="{left: $index * 300 + 'px'}"
-	>
-	<div class="t-infobubble s-infobubble l-infobubble-wrapper {{bubble.layout}}">
-		<div class="l-infobubble">
-			<div
-				ng-show="title.length > 0"
-				class="title"
-				>{{title}}
-			</div>
-			<table>
-				<tr ng-repeat="property in properties">
-					<td class="label">{{property.label}}</td>
-					<td title="{{property.value}}" class="value align-{{property.align}}">{{property.value}}</td>
-				</tr>
-			</table>
-		</div>
-	</div>
-</div>
diff --git a/platform/commonUI/inspect/res/templates/info-button.html b/platform/commonUI/inspect/res/templates/info-button.html
deleted file mode 100644
index 5e22b5d6c74..00000000000
--- a/platform/commonUI/inspect/res/templates/info-button.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-
-<!--The icon for the info button appearing in a grid item (list in folder)-->
-<a class='s-icon-button icon-info'></a>
diff --git a/platform/commonUI/inspect/src/InfoConstants.js b/platform/commonUI/inspect/src/InfoConstants.js
deleted file mode 100644
index 0a66b51e4df..00000000000
--- a/platform/commonUI/inspect/src/InfoConstants.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * This bundle provides support for object inspection (specifically, metadata
- * show in bubbles on hover.)
- * @namespace platform/commonUI/inspect
- */
-
-define({
-    BUBBLE_TEMPLATE: "<mct-container key=\"bubble\" "
-                + "bubble-title=\"{{bubbleTitle}}\" "
-                + "bubble-layout=\"{{bubbleLayout}}\">"
-                + "<mct-include key=\"bubbleTemplate\" "
-                + "ng-model=\"bubbleModel\">"
-                + "</mct-include>"
-                + "</mct-container>",
-    // Options and classes for bubble
-    BUBBLE_OPTIONS: {
-        offsetX: 0,
-        offsetY: -26
-    },
-    BUBBLE_MOBILE_POSITION: [0, -25],
-    // Max width and margins allowed for bubbles;
-    // defined in /platform/commonUI/general/res/sass/_constants.scss
-    BUBBLE_MARGIN_LR: 10,
-    BUBBLE_MAX_WIDTH: 300
-});
diff --git a/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js b/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
deleted file mode 100644
index 7c9482e073a..00000000000
--- a/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * The `info` gesture displays domain object metadata in a
-         * bubble on hover.
-         *
-         * @constructor
-         * @param $document Angular's `$document`
-         * @param {InfoService} infoService a service which shows info bubbles
-         * @param element jqLite-wrapped DOM element
-         * @param {DomainObject} domainObject the domain object for which to
-         *        show information
-         */
-        function InfoGestureButton($document, agentService, infoService, element, domainObject) {
-            var dismissBubble,
-                touchPosition,
-                body = $document.find('body');
-
-            function trackPosition(event) {
-                // Record touch position, so bubble can be shown at latest
-                // touch position, also offset by 22px to left (accounts for
-                // a finger-sized touch on the info button)
-                touchPosition = [event.clientX - 22, event.clientY];
-            }
-
-            // Hides the bubble and detaches the
-            // body hidebubble listener
-            function hideBubble() {
-                // If a bubble is showing, dismiss it
-                if (dismissBubble) {
-                    dismissBubble();
-                    dismissBubble = undefined;
-                }
-
-                // Detaches body touch listener
-                body.off('touchstart', hideBubble);
-            }
-
-            // Displays the bubble by tracking position of
-            // touch, using infoService to display the bubble,
-            // and then on any body touch the bubble is dismissed
-            function showBubble(event) {
-                trackPosition(event);
-                event.stopPropagation();
-                // Show the bubble, but on any touchstart on the
-                // body (anywhere) call hidebubble
-                dismissBubble = infoService.display(
-                    "info-table",
-                    domainObject.getModel().name,
-                    domainObject.useCapability('metadata'),
-                    touchPosition
-                );
-
-                // On any touch on the body, default body touches/events
-                // are prevented, the bubble is dismissed, and the touchstart
-                // body event is unbound, reallowing gestures
-                body.on('touchstart', function (evt) {
-                    evt.preventDefault();
-                    hideBubble();
-                    body.unbind('touchstart');
-                });
-            }
-
-            // Checks if you are on a mobile device, if the device is
-            // mobile (agentService.isMobile() = true), then
-            // the a click on something (info button) brings up
-            // the bubble
-            if (agentService.isMobile()) {
-                element.on('click', showBubble);
-            }
-
-            return {
-                /**
-                 * Detach any event handlers associated with this gesture.
-                 * @memberof InfoGesture
-                 * @method
-                 */
-                destroy: function () {
-                    // Dismiss any active bubble...
-                    hideBubble();
-                    // ...and detach listeners
-                    element.off('click', showBubble);
-                }
-            };
-        }
-
-        return InfoGestureButton;
-
-    }
-
-);
diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js
deleted file mode 100644
index 424d3557f81..00000000000
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ /dev/null
@@ -1,149 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * The `info` gesture displays domain object metadata in a
-         * bubble on hover.
-         *
-         * @memberof platform/commonUI/inspect
-         * @constructor
-         * @implements {Gesture}
-         * @param $timeout Angular's `$timeout`
-         * @param {InfoService} infoService a service which shows info bubbles
-         * @param {number} delay delay, in milliseconds, before bubble appears
-         * @param element jqLite-wrapped DOM element
-         * @param {DomainObject} domainObject the domain object for which to
-         *        show information
-         */
-        function InfoGesture($timeout, agentService, infoService, delay, element, domainObject) {
-            var self = this;
-
-            // Callback functions to preserve the "this" pointer (in the
-            // absence of Function.prototype.bind)
-            this.showBubbleCallback = function (event) {
-                self.showBubble(event);
-            };
-
-            this.hideBubbleCallback = function (event) {
-                self.hideBubble(event);
-            };
-
-            this.trackPositionCallback = function (event) {
-                self.trackPosition(event);
-            };
-
-            this.element = element;
-            this.$timeout = $timeout;
-            this.infoService = infoService;
-            this.delay = delay;
-            this.domainObject = domainObject;
-
-            // Checks if you are on a mobile device, if the device is
-            // not mobile (agentService.isMobile() = false), then
-            // the pendingBubble and therefore hovering is allowed
-            if (!agentService.isMobile()) {
-                // Show bubble (on a timeout) on mouse over
-                element.on('mouseenter', this.showBubbleCallback);
-            }
-        }
-
-        InfoGesture.prototype.trackPosition = function (event) {
-            // Record mouse position, so bubble can be shown at latest
-            // mouse position (not just where the mouse entered)
-            this.mousePosition = [event.clientX, event.clientY];
-        };
-
-        InfoGesture.prototype.hideBubble = function () {
-            // If a bubble is showing, dismiss it
-            if (this.dismissBubble) {
-                this.dismissBubble();
-                this.element.off('mouseleave', this.hideBubbleCallback);
-                this.dismissBubble = undefined;
-            }
-
-            // If a bubble will be shown on a timeout, cancel that
-            if (this.pendingBubble) {
-                this.$timeout.cancel(this.pendingBubble);
-                this.element.off('mousemove', this.trackPositionCallback);
-                this.element.off('mouseleave', this.hideBubbleCallback);
-                this.pendingBubble = undefined;
-            }
-
-            // Also clear mouse position so we don't have a ton of tiny
-            // arrays allocated while user mouses over things
-            this.mousePosition = undefined;
-        };
-
-        InfoGesture.prototype.showBubble = function (event) {
-            var self = this;
-
-            function displayBubble() {
-                self.dismissBubble = self.infoService.display(
-                    "info-table",
-                    self.domainObject.getModel().name,
-                    self.domainObject.useCapability('metadata'),
-                    self.mousePosition
-                );
-                self.element.off('mousemove', self.trackPositionCallback);
-                self.pendingBubble = undefined;
-            }
-
-            this.trackPosition(event);
-
-            // Do nothing if we're already scheduled to show a bubble.
-            // This may happen due to redundant event firings caused
-            // by https://github.com/angular/angular.js/issues/12795
-            if (this.pendingBubble) {
-                return;
-            }
-
-            // Also need to track position during hover
-            this.element.on('mousemove', this.trackPositionCallback);
-
-            // Show the bubble, after a suitable delay (if mouse has
-            // left before this time is up, this will be canceled.)
-            this.pendingBubble = this.$timeout(displayBubble, this.delay);
-
-            this.element.on('mouseleave', this.hideBubbleCallback);
-        };
-
-        /**
-         * Detach any event handlers associated with this gesture.
-         * @method
-         */
-        InfoGesture.prototype.destroy = function () {
-            // Dismiss any active bubble...
-            this.hideBubble();
-            // ...and detach listeners
-            this.element.off('mouseenter', this.showBubbleCallback);
-        };
-
-        return InfoGesture;
-
-    }
-
-);
-
diff --git a/platform/commonUI/inspect/src/services/InfoService.js b/platform/commonUI/inspect/src/services/InfoService.js
deleted file mode 100644
index 36b789230e2..00000000000
--- a/platform/commonUI/inspect/src/services/InfoService.js
+++ /dev/null
@@ -1,106 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['../InfoConstants'],
-    function (InfoConstants) {
-
-        var BUBBLE_TEMPLATE = InfoConstants.BUBBLE_TEMPLATE,
-            MOBILE_POSITION = InfoConstants.BUBBLE_MOBILE_POSITION,
-            OPTIONS = InfoConstants.BUBBLE_OPTIONS;
-
-        /**
-         * Displays informative content ("info bubbles") for the user.
-         * @memberof platform/commonUI/inspect
-         * @constructor
-         */
-        function InfoService($compile, $rootScope, popupService, agentService) {
-            this.$compile = $compile;
-            this.$rootScope = $rootScope;
-            this.popupService = popupService;
-            this.agentService = agentService;
-        }
-
-        /**
-         * Display an info bubble at the specified location.
-         * @param {string} templateKey template to place in bubble
-         * @param {string} title title for the bubble
-         * @param {*} content content to pass to the template, via
-         *        `ng-model`
-         * @param {number[]} x,y position of the info bubble, in
-         *        pixel coordinates.
-         * @returns {Function} a function that may be invoked to
-         *          dismiss the info bubble
-         */
-        InfoService.prototype.display = function (templateKey, title, content, position) {
-            var $compile = this.$compile,
-                $rootScope = this.$rootScope,
-                scope = $rootScope.$new(),
-                span = $compile('<span></span>')(scope),
-                bubbleSpaceLR = InfoConstants.BUBBLE_MARGIN_LR
-                    + InfoConstants.BUBBLE_MAX_WIDTH,
-                options,
-                popup,
-                bubble;
-
-            options = Object.create(OPTIONS);
-            options.marginX = -bubbleSpaceLR;
-
-            // prevent bubble from appearing right under pointer,
-            // which causes hover callback to be called multiple times
-            options.offsetX = 1;
-
-            // On a phone, bubble takes up more screen real estate,
-            // so position it differently (toward the bottom)
-            if (this.agentService.isPhone()) {
-                position = MOBILE_POSITION;
-                options = {};
-            }
-
-            popup = this.popupService.display(span, position, options);
-
-            // Pass model & container parameters into the scope
-            scope.bubbleModel = content;
-            scope.bubbleTemplate = templateKey;
-            scope.bubbleTitle = title;
-            // Style the bubble according to how it was positioned
-            scope.bubbleLayout = [
-                popup.goesUp() ? 'arw-btm' : 'arw-top',
-                popup.goesLeft() ? 'arw-right' : 'arw-left'
-            ].join(' ');
-
-            // Create the info bubble, now that we know how to
-            // point the arrow...
-            bubble = $compile(BUBBLE_TEMPLATE)(scope);
-            span.append(bubble);
-
-            // Return a function to dismiss the info bubble
-            return function dismiss() {
-                popup.dismiss();
-                scope.$destroy();
-            };
-        };
-
-        return InfoService;
-    }
-);
-
diff --git a/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js b/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js
deleted file mode 100644
index 2f81e4b3276..00000000000
--- a/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js
+++ /dev/null
@@ -1,148 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['../../src/gestures/InfoButtonGesture'],
-    function (InfoButtonGesture) {
-
-        describe("The info button gesture", function () {
-            var mockDocument,
-                mockBody,
-                mockAgentService,
-                mockInfoService,
-                mockElement,
-                mockDomainObject,
-                mockEvent,
-                mockScope,
-                mockOff,
-                testMetadata,
-                mockHide,
-                gesture,
-                fireGesture,
-                fireDismissGesture;
-
-            beforeEach(function () {
-                mockDocument = jasmine.createSpyObj('$document', ['find']);
-                mockBody = jasmine.createSpyObj('body', ['on', 'off', 'scope', 'css', 'unbind']);
-                mockDocument.find.and.returnValue(mockBody);
-                mockAgentService = jasmine.createSpyObj('agentService', ['isMobile', 'isPhone']);
-                mockInfoService = jasmine.createSpyObj(
-                    'infoService',
-                    ['display']
-                );
-                mockElement = jasmine.createSpyObj(
-                    'element',
-                    ['on', 'off', 'scope', 'css']
-                );
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getId', 'getCapability', 'useCapability', 'getModel']
-                );
-
-                mockEvent = jasmine.createSpyObj("event", ["preventDefault", "stopPropagation"]);
-                mockEvent.pageX = 0;
-                mockEvent.pageY = 0;
-                mockScope = jasmine.createSpyObj('$scope', ['$on']);
-                mockOff = jasmine.createSpy('$off');
-                testMetadata = [{
-                    name: "Test name",
-                    value: "Test value"
-                }];
-                mockHide = jasmine.createSpy('hide');
-
-                mockDomainObject.getModel.and.returnValue({ name: "Test Object" });
-                mockDomainObject.useCapability.and.callFake(function (c) {
-                    return (c === 'metadata') ? testMetadata : undefined;
-                });
-                mockElement.scope.and.returnValue(mockScope);
-                mockScope.$on.and.returnValue(mockOff);
-                mockInfoService.display.and.returnValue(mockHide);
-                mockAgentService.isMobile.and.returnValue(true);
-                gesture = new InfoButtonGesture(
-                    mockDocument,
-                    mockAgentService,
-                    mockInfoService,
-                    mockElement,
-                    mockDomainObject
-                );
-                fireGesture = mockElement.on.calls.mostRecent().args[1];
-            });
-
-            it("expect click on the representation", function () {
-                // Fires a click call on element and then
-                // expects the click to have happened
-                fireGesture(mockEvent);
-                expect(mockElement.on).toHaveBeenCalledWith(
-                    "click",
-                    jasmine.any(Function)
-                );
-            });
-
-            it("expect click then dismiss on the representation", function () {
-                // Fire the click and then expect the click
-                fireGesture(mockEvent);
-                expect(mockElement.on).toHaveBeenCalledWith(
-                    "click",
-                    jasmine.any(Function)
-                );
-
-                // Get the touch start on the body
-                // and fire the dismiss gesture
-                fireDismissGesture = mockBody.on.calls.mostRecent().args[1];
-                fireDismissGesture(mockEvent);
-                // Expect Body to have been touched, event.preventDefault()
-                // to be called, then the mockBody listener to be detached
-                // lastly unbind the touchstart used to dismiss so other
-                // events can be called
-                expect(mockBody.on).toHaveBeenCalledWith(
-                    "touchstart",
-                    jasmine.any(Function)
-                );
-                expect(mockEvent.preventDefault).toHaveBeenCalled();
-                expect(mockBody.off).toHaveBeenCalledWith(
-                    "touchstart",
-                    jasmine.any(Function)
-                );
-                expect(mockBody.unbind).toHaveBeenCalledWith(
-                    'touchstart'
-                );
-            });
-
-            it("detaches a callback for info bubble events when destroyed", function () {
-                expect(mockElement.off).not.toHaveBeenCalled();
-
-                gesture.destroy();
-
-                expect(mockElement.off).toHaveBeenCalledWith(
-                    "click",
-                    jasmine.any(Function)
-                );
-            });
-
-            // https://github.com/nasa/openmct/issues/948
-            it("does not try to access scope", function () {
-                expect(mockElement.scope).not.toHaveBeenCalled();
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/inspect/test/gestures/InfoGestureSpec.js b/platform/commonUI/inspect/test/gestures/InfoGestureSpec.js
deleted file mode 100644
index 6f66d824730..00000000000
--- a/platform/commonUI/inspect/test/gestures/InfoGestureSpec.js
+++ /dev/null
@@ -1,188 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['../../src/gestures/InfoGesture'],
-    function (InfoGesture) {
-
-        describe("The info gesture", function () {
-            var mockTimeout,
-                mockAgentService,
-                mockInfoService,
-                testDelay = 12321,
-                mockElement,
-                mockDomainObject,
-                mockScope,
-                mockOff,
-                testMetadata,
-                mockPromise,
-                mockHide,
-                gesture;
-
-            function fireEvent(evt, value) {
-                mockElement.on.calls.all().forEach(function (call) {
-                    if (call.args[0] === evt) {
-                        call.args[1](value);
-                    }
-                });
-            }
-
-            beforeEach(function () {
-                mockTimeout = jasmine.createSpy('$timeout');
-                mockTimeout.cancel = jasmine.createSpy('cancel');
-                mockAgentService = jasmine.createSpyObj('agentService', ['isMobile']);
-                mockInfoService = jasmine.createSpyObj(
-                    'infoService',
-                    ['display']
-                );
-                mockElement = jasmine.createSpyObj(
-                    'element',
-                    ['on', 'off', 'scope', 'css']
-                );
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getId', 'getCapability', 'useCapability', 'getModel']
-                );
-                mockScope = jasmine.createSpyObj('$scope', ['$on']);
-                mockOff = jasmine.createSpy('$off');
-                testMetadata = [{
-                    name: "Test name",
-                    value: "Test value"
-                }];
-                mockPromise = jasmine.createSpyObj('promise', ['then']);
-                mockHide = jasmine.createSpy('hide');
-
-                mockDomainObject.getModel.and.returnValue({ name: "Test Object" });
-                mockDomainObject.useCapability.and.callFake(function (c) {
-                    return (c === 'metadata') ? testMetadata : undefined;
-                });
-                mockElement.scope.and.returnValue(mockScope);
-                mockScope.$on.and.returnValue(mockOff);
-                mockTimeout.and.returnValue(mockPromise);
-                mockInfoService.display.and.returnValue(mockHide);
-
-                gesture = new InfoGesture(
-                    mockTimeout,
-                    mockAgentService,
-                    mockInfoService,
-                    testDelay,
-                    mockElement,
-                    mockDomainObject
-                );
-            });
-
-            it("listens for mouseenter on the representation", function () {
-                expect(mockElement.on)
-                    .toHaveBeenCalledWith('mouseenter', jasmine.any(Function));
-            });
-
-            it("displays an info bubble on a delay after mouseenter", function () {
-                fireEvent("mouseenter", {
-                    clientX: 1977,
-                    clientY: 42
-                });
-                expect(mockTimeout)
-                    .toHaveBeenCalledWith(jasmine.any(Function), testDelay);
-                mockTimeout.calls.mostRecent().args[0]();
-                expect(mockInfoService.display).toHaveBeenCalledWith(
-                    jasmine.any(String),
-                    "Test Object",
-                    testMetadata,
-                    [1977, 42]
-                );
-            });
-
-            it("does not display info bubble if mouse leaves too soon", function () {
-                fireEvent("mouseenter", {
-                    clientX: 1977,
-                    clientY: 42
-                });
-                fireEvent("mouseleave", {
-                    clientX: 1977,
-                    clientY: 42
-                });
-                expect(mockTimeout.cancel).toHaveBeenCalledWith(mockPromise);
-                expect(mockInfoService.display).not.toHaveBeenCalled();
-            });
-
-            it("hides a shown bubble when mouse leaves", function () {
-                fireEvent("mouseenter", {
-                    clientX: 1977,
-                    clientY: 42
-                });
-                mockTimeout.calls.mostRecent().args[0]();
-                expect(mockHide).not.toHaveBeenCalled(); // verify precondition
-                fireEvent("mouseleave", {});
-                expect(mockHide).toHaveBeenCalled();
-            });
-
-            it("tracks mouse position", function () {
-                fireEvent("mouseenter", {
-                    clientX: 1977,
-                    clientY: 42
-                });
-                fireEvent("mousemove", {
-                    clientX: 1999,
-                    clientY: 11
-                });
-                fireEvent("mousemove", {
-                    clientX: 1984,
-                    clientY: 11
-                });
-                mockTimeout.calls.mostRecent().args[0]();
-                // Should have displayed at the latest observed mouse position
-                expect(mockInfoService.display).toHaveBeenCalledWith(
-                    jasmine.any(String),
-                    "Test Object",
-                    testMetadata,
-                    [1984, 11]
-                );
-            });
-
-            it("hides shown bubbles when destroyed", function () {
-                fireEvent("mouseenter", {
-                    clientX: 1977,
-                    clientY: 42
-                });
-                mockTimeout.calls.mostRecent().args[0]();
-                expect(mockHide).not.toHaveBeenCalled(); // verify precondition
-                gesture.destroy();
-                expect(mockHide).toHaveBeenCalled();
-            });
-
-            it("detaches listeners when destroyed", function () {
-                fireEvent("mouseenter", {
-                    clientX: 1977,
-                    clientY: 42
-                });
-                gesture.destroy();
-                mockElement.on.calls.all().forEach(function (call) {
-                    expect(mockElement.off).toHaveBeenCalledWith(
-                        call.args[0],
-                        call.args[1]
-                    );
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/inspect/test/services/InfoServiceSpec.js b/platform/commonUI/inspect/test/services/InfoServiceSpec.js
deleted file mode 100644
index 9641bf94d35..00000000000
--- a/platform/commonUI/inspect/test/services/InfoServiceSpec.js
+++ /dev/null
@@ -1,142 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['../../src/services/InfoService'],
-    function (InfoService) {
-
-        describe("The info service", function () {
-            var mockCompile,
-                mockRootScope,
-                mockPopupService,
-                mockAgentService,
-                mockScope,
-                mockElements,
-                mockPopup,
-                service;
-
-            beforeEach(function () {
-                mockCompile = jasmine.createSpy('$compile');
-                mockRootScope = jasmine.createSpyObj('$rootScope', ['$new']);
-                mockAgentService = jasmine.createSpyObj('agentService', ['isMobile', 'isPhone']);
-                mockPopupService = jasmine.createSpyObj(
-                    'popupService',
-                    ['display']
-                );
-                mockPopup = jasmine.createSpyObj('popup', [
-                    'dismiss',
-                    'goesLeft',
-                    'goesRight',
-                    'goesUp',
-                    'goesDown'
-                ]);
-
-                mockScope = jasmine.createSpyObj("scope", ["$destroy"]);
-                mockElements = [];
-
-                mockPopupService.display.and.returnValue(mockPopup);
-                mockCompile.and.callFake(function () {
-                    var mockCompiledTemplate = jasmine.createSpy('template'),
-                        mockElement = jasmine.createSpyObj('element', [
-                            'css',
-                            'remove',
-                            'append'
-                        ]);
-                    mockCompiledTemplate.and.returnValue(mockElement);
-                    mockElements.push(mockElement);
-
-                    return mockCompiledTemplate;
-                });
-                mockRootScope.$new.and.returnValue(mockScope);
-
-                service = new InfoService(
-                    mockCompile,
-                    mockRootScope,
-                    mockPopupService,
-                    mockAgentService
-                );
-            });
-
-            it("creates elements and displays them as popups", function () {
-                service.display('', '', {}, [123, 456]);
-                expect(mockPopupService.display).toHaveBeenCalledWith(
-                    mockElements[0],
-                    [123, 456],
-                    jasmine.any(Object)
-                );
-            });
-
-            it("provides a function to remove displayed info bubbles", function () {
-                var fn = service.display('', '', {}, [0, 0]);
-                expect(mockPopup.dismiss).not.toHaveBeenCalled();
-                fn();
-                expect(mockPopup.dismiss).toHaveBeenCalled();
-            });
-
-            it("when on phone device, positions at  bottom", function () {
-                mockAgentService.isPhone.and.returnValue(true);
-                service = new InfoService(
-                    mockCompile,
-                    mockRootScope,
-                    mockPopupService,
-                    mockAgentService
-                );
-                service.display('', '', {}, [123, 456]);
-                expect(mockPopupService.display).toHaveBeenCalledWith(
-                    mockElements[0],
-                    [0, -25],
-                    jasmine.any(Object)
-                );
-            });
-
-            [false, true].forEach(function (goesLeft) {
-                [false, true].forEach(function (goesUp) {
-                    var vertical = goesUp ? "up" : "down",
-                        horizontal = goesLeft ? "left" : "right",
-                        location = [vertical, horizontal].join('-');
-                    describe("when bubble goes " + location, function () {
-                        var expectedLocation = [
-                            goesUp ? "bottom" : "top",
-                            goesLeft ? "right" : "left"
-                        ].join('-');
-
-                        beforeEach(function () {
-                            mockPopup.goesUp.and.returnValue(goesUp);
-                            mockPopup.goesDown.and.returnValue(!goesUp);
-                            mockPopup.goesLeft.and.returnValue(goesLeft);
-                            mockPopup.goesRight.and.returnValue(!goesLeft);
-                            service.display('', '', {}, [10, 10]);
-                        });
-
-                        it("positions the arrow in the " + expectedLocation, function () {
-                            expect(mockScope.bubbleLayout).toEqual([
-                                goesUp ? "arw-btm" : "arw-top",
-                                goesLeft ? "arw-right" : "arw-left"
-                            ].join(' '));
-                        });
-                    });
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/mobile/bundle.js b/platform/commonUI/mobile/bundle.js
deleted file mode 100644
index b18ddd07216..00000000000
--- a/platform/commonUI/mobile/bundle.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/MCTDevice",
-    "./src/AgentService",
-    "./src/DeviceClassifier"
-], function (
-    MCTDevice,
-    AgentService,
-    DeviceClassifier
-) {
-
-    return {
-        name: "platform/commonUI/mobile",
-        definition: {
-            "extensions": {
-                "directives": [
-                    {
-                        "key": "mctDevice",
-                        "implementation": MCTDevice,
-                        "depends": [
-                            "agentService"
-                        ]
-                    }
-                ],
-                "services": [
-                    {
-                        "key": "agentService",
-                        "implementation": AgentService,
-                        "depends": [
-                            "$window"
-                        ]
-                    }
-                ],
-                "runs": [
-                    {
-                        "implementation": DeviceClassifier,
-                        "depends": [
-                            "agentService",
-                            "$document"
-                        ]
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/commonUI/mobile/src/AgentService.js b/platform/commonUI/mobile/src/AgentService.js
deleted file mode 100644
index c997f3f869f..00000000000
--- a/platform/commonUI/mobile/src/AgentService.js
+++ /dev/null
@@ -1,141 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Provides features which support variant behavior on mobile devices.
- *
- * @namespace platform/commonUI/mobile
- */
-define(
-    [],
-    function () {
-
-        /**
-         * The query service handles calls for browser and userAgent
-         * info using a comparison between the userAgent and key
-         * device names
-         * @constructor
-         * @param $window Angular-injected instance of the window
-         * @memberof platform/commonUI/mobile
-         */
-        function AgentService($window) {
-            var userAgent = $window.navigator.userAgent,
-                matches = userAgent.match(/iPad|iPhone|Android/i) || [];
-
-            this.userAgent = userAgent;
-            this.mobileName = matches[0];
-            this.$window = $window;
-            this.touchEnabled = ($window.ontouchstart !== undefined);
-        }
-
-        /**
-         * Check if the user is on a mobile device.
-         * @returns {boolean} true on mobile
-         */
-        AgentService.prototype.isMobile = function () {
-            return Boolean(this.mobileName);
-        };
-
-        /**
-         * Check if the user is on a phone-sized mobile device.
-         * @returns {boolean} true on a phone
-         */
-        AgentService.prototype.isPhone = function () {
-            if (this.isMobile()) {
-                if (this.isAndroidTablet()) {
-                    return false;
-                } else if (this.mobileName === 'iPad') {
-                    return false;
-                } else {
-                    return true;
-                }
-            } else {
-                return false;
-            }
-        };
-
-        /**
-         * Check if the user is on a tablet sized android device
-         * @returns {boolean} true on an android tablet
-         */
-        AgentService.prototype.isAndroidTablet = function () {
-            if (this.mobileName === 'Android') {
-                if (this.isPortrait() && window.innerWidth >= 768) {
-                    return true;
-                } else if (this.isLandscape() && window.innerHeight >= 768) {
-                    return true;
-                }
-            } else {
-                return false;
-            }
-        };
-
-        /**
-         * Check if the user is on a tablet-sized mobile device.
-         * @returns {boolean} true on a tablet
-         */
-        AgentService.prototype.isTablet = function () {
-            return (this.isMobile() && !this.isPhone() && this.mobileName !== 'Android') || (this.isMobile() && this.isAndroidTablet());
-        };
-
-        /**
-         * Check if the user's device is in a portrait-style
-         * orientation (display width is narrower than display height.)
-         * @returns {boolean} true in portrait mode
-         */
-        AgentService.prototype.isPortrait = function () {
-            return this.$window.innerWidth < this.$window.innerHeight;
-        };
-
-        /**
-         * Check if the user's device is in a landscape-style
-         * orientation (display width is greater than display height.)
-         * @returns {boolean} true in landscape mode
-         */
-        AgentService.prototype.isLandscape = function () {
-            return !this.isPortrait();
-        };
-
-        /**
-         * Check if the user's device supports a touch interface.
-         * @returns {boolean} true if touch is supported
-         */
-        AgentService.prototype.isTouch = function () {
-            return this.touchEnabled;
-        };
-
-        /**
-         * Check if the user agent matches a certain named device,
-         * as indicated by checking for a case-insensitive substring
-         * match.
-         * @param {string} name the name to check for
-         * @returns {boolean} true if the user agent includes that name
-         */
-        AgentService.prototype.isBrowser = function (name) {
-            name = name.toLowerCase();
-
-            return this.userAgent.toLowerCase().indexOf(name) !== -1;
-        };
-
-        return AgentService;
-    }
-);
diff --git a/platform/commonUI/mobile/src/DeviceClassifier.js b/platform/commonUI/mobile/src/DeviceClassifier.js
deleted file mode 100644
index 25387d2095f..00000000000
--- a/platform/commonUI/mobile/src/DeviceClassifier.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['./DeviceMatchers'],
-    function (DeviceMatchers) {
-
-        /**
-         * Runs at application startup and adds a subset of the following
-         * CSS classes to the body of the document, depending on device
-         * attributes:
-         *
-         * * `mobile`: Phones or tablets.
-         * * `phone`: Phones specifically.
-         * * `tablet`: Tablets specifically.
-         * * `desktop`: Non-mobile devices.
-         * * `portrait`: Devices in a portrait-style orientation.
-         * * `landscape`: Devices in a landscape-style orientation.
-         * * `touch`: Device supports touch events.
-         *
-         * @param {platform/commonUI/mobile.AgentService} agentService
-         *        the service used to examine the user agent
-         * @param $document Angular's jqLite-wrapped document element
-         * @constructor
-         */
-        function MobileClassifier(agentService, $document) {
-            var body = $document.find('body');
-
-            Object.keys(DeviceMatchers).forEach(function (key, index, array) {
-                if (DeviceMatchers[key](agentService)) {
-                    body.addClass(key);
-                }
-            });
-
-            if (agentService.isMobile()) {
-                var mediaQuery = window.matchMedia('(orientation: landscape)');
-
-                mediaQuery.addListener(function (event) {
-                    if (event.matches) {
-                        body.removeClass('portrait');
-                        body.addClass('landscape');
-                    } else {
-                        body.removeClass('landscape');
-                        body.addClass('portrait');
-                    }
-                });
-            }
-        }
-
-        return MobileClassifier;
-
-    }
-);
diff --git a/platform/commonUI/mobile/src/DeviceMatchers.js b/platform/commonUI/mobile/src/DeviceMatchers.js
deleted file mode 100644
index dc4c5ce4cd3..00000000000
--- a/platform/commonUI/mobile/src/DeviceMatchers.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-define(function () {
-
-    /**
-     * An object containing key-value pairs, where keys are symbolic of
-     * device attributes, and values are functions that take the
-     * `agentService` as inputs and return boolean values indicating
-     * whether or not the current device has these attributes.
-     *
-     * For internal use by the mobile support bundle.
-     *
-     * @memberof platform/commonUI/mobile
-     * @private
-     */
-    return {
-        mobile: function (agentService) {
-            return agentService.isMobile();
-        },
-        phone: function (agentService) {
-            return agentService.isPhone();
-        },
-        tablet: function (agentService) {
-            return agentService.isTablet();
-        },
-        desktop: function (agentService) {
-            return !agentService.isMobile();
-        },
-        portrait: function (agentService) {
-            return agentService.isPortrait();
-        },
-        landscape: function (agentService) {
-            return agentService.isLandscape();
-        },
-        touch: function (agentService) {
-            return agentService.isTouch();
-        }
-    };
-});
diff --git a/platform/commonUI/mobile/src/MCTDevice.js b/platform/commonUI/mobile/src/MCTDevice.js
deleted file mode 100644
index dfd435fc0f3..00000000000
--- a/platform/commonUI/mobile/src/MCTDevice.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['./DeviceMatchers'],
-    function (DeviceMatchers) {
-
-        /**
-         * The `mct-device` directive, when applied as an attribute,
-         * only includes the element when the device being used matches
-         * a set of characteristics required.
-         *
-         * Required characteristics are given as space-separated strings
-         * as the value to this attribute, e.g.:
-         *
-         *    <span mct-device="mobile portrait">Hello world!</span>
-         *
-         * ...will only show Hello world! when viewed on a mobile device
-         * in the portrait orientation.
-         *
-         * Valid device characteristics to detect are:
-         *
-         * * `mobile`: Phones or tablets.
-         * * `phone`: Phones specifically.
-         * * `tablet`: Tablets specifically.
-         * * `desktop`: Non-mobile devices.
-         * * `portrait`: Devices in a portrait-style orientation.
-         * * `landscape`: Devices in a landscape-style orientation.
-         * * `touch`: Device supports touch events.
-         *
-         * @param {AgentService} agentService used to detect device type
-         *        based on information about the user agent
-         */
-        function MCTDevice(agentService) {
-
-            function deviceMatches(tokens) {
-                tokens = tokens || "";
-
-                return tokens.split(" ").every(function (token) {
-                    var fn = DeviceMatchers[token];
-
-                    return fn && fn(agentService);
-                });
-            }
-
-            function link(scope, element, attrs, ctrl, transclude) {
-                if (deviceMatches(attrs.mctDevice)) {
-                    transclude(function (clone) {
-                        element.replaceWith(clone);
-                    });
-                }
-            }
-
-            return {
-                link: link,
-                // We are transcluding the whole element (like ng-if)
-                transclude: 'element',
-                // 1 more than ng-if
-                priority: 601,
-                // Also terminal, since element will be transcluded
-                terminal: true,
-                // Only apply as an attribute
-                restrict: "A"
-            };
-        }
-
-        return MCTDevice;
-    }
-);
diff --git a/platform/commonUI/mobile/test/AgentServiceSpec.js b/platform/commonUI/mobile/test/AgentServiceSpec.js
deleted file mode 100644
index 2b6af07141a..00000000000
--- a/platform/commonUI/mobile/test/AgentServiceSpec.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/AgentService"],
-    function (AgentService) {
-
-        var TEST_USER_AGENTS = {
-            DESKTOP: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.89 Safari/537.36",
-            IPAD: "Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53",
-            IPHONE: "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53"
-        };
-
-        describe("The AgentService", function () {
-            var testWindow, agentService;
-
-            beforeEach(function () {
-                testWindow = {
-                    innerWidth: 640,
-                    innerHeight: 480,
-                    navigator: {
-                        userAgent: TEST_USER_AGENTS.DESKTOP
-                    }
-                };
-            });
-
-            it("recognizes desktop devices as non-mobile", function () {
-                testWindow.navigator.userAgent = TEST_USER_AGENTS.DESKTOP;
-                agentService = new AgentService(testWindow);
-                expect(agentService.isMobile()).toBeFalsy();
-                expect(agentService.isPhone()).toBeFalsy();
-                expect(agentService.isTablet()).toBeFalsy();
-            });
-
-            it("detects iPhones", function () {
-                testWindow.navigator.userAgent = TEST_USER_AGENTS.IPHONE;
-                agentService = new AgentService(testWindow);
-                expect(agentService.isMobile()).toBeTruthy();
-                expect(agentService.isPhone()).toBeTruthy();
-                expect(agentService.isTablet()).toBeFalsy();
-            });
-
-            it("detects iPads", function () {
-                testWindow.navigator.userAgent = TEST_USER_AGENTS.IPAD;
-                agentService = new AgentService(testWindow);
-                expect(agentService.isMobile()).toBeTruthy();
-                expect(agentService.isPhone()).toBeFalsy();
-                expect(agentService.isTablet()).toBeTruthy();
-            });
-
-            it("detects display orientation", function () {
-                agentService = new AgentService(testWindow);
-                testWindow.innerWidth = 1024;
-                testWindow.innerHeight = 400;
-                expect(agentService.isPortrait()).toBeFalsy();
-                expect(agentService.isLandscape()).toBeTruthy();
-                testWindow.innerWidth = 400;
-                testWindow.innerHeight = 1024;
-                expect(agentService.isPortrait()).toBeTruthy();
-                expect(agentService.isLandscape()).toBeFalsy();
-            });
-
-            it("detects touch support", function () {
-                testWindow.ontouchstart = null;
-                expect(new AgentService(testWindow).isTouch())
-                    .toBe(true);
-                delete testWindow.ontouchstart;
-                expect(new AgentService(testWindow).isTouch())
-                    .toBe(false);
-            });
-
-            it("allows for checking browser type", function () {
-                testWindow.navigator.userAgent = "Chromezilla Safarifox";
-                agentService = new AgentService(testWindow);
-                expect(agentService.isBrowser("Chrome")).toBe(true);
-                expect(agentService.isBrowser("Firefox")).toBe(false);
-            });
-        });
-    }
-);
diff --git a/platform/commonUI/mobile/test/DeviceClassifierSpec.js b/platform/commonUI/mobile/test/DeviceClassifierSpec.js
deleted file mode 100644
index 9ae365b73be..00000000000
--- a/platform/commonUI/mobile/test/DeviceClassifierSpec.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/DeviceClassifier", "../src/DeviceMatchers"],
-    function (DeviceClassifier, DeviceMatchers) {
-
-        var AGENT_SERVICE_METHODS = [
-                'isMobile',
-                'isPhone',
-                'isTablet',
-                'isPortrait',
-                'isLandscape',
-                'isTouch'
-            ],
-            TEST_PERMUTATIONS = [
-                ['isMobile', 'isPhone', 'isTouch', 'isPortrait'],
-                ['isMobile', 'isPhone', 'isTouch', 'isLandscape'],
-                ['isMobile', 'isTablet', 'isTouch', 'isPortrait'],
-                ['isMobile', 'isTablet', 'isTouch', 'isLandscape'],
-                ['isTouch'],
-                []
-            ];
-
-        describe("DeviceClassifier", function () {
-            var mockAgentService,
-                mockDocument,
-                mockBody;
-
-            beforeEach(function () {
-                mockAgentService = jasmine.createSpyObj(
-                    'agentService',
-                    AGENT_SERVICE_METHODS
-                );
-                mockDocument = jasmine.createSpyObj(
-                    '$document',
-                    ['find']
-                );
-                mockBody = jasmine.createSpyObj(
-                    'body',
-                    ['addClass']
-                );
-                mockDocument.find.and.callFake(function (sel) {
-                    return sel === 'body' && mockBody;
-                });
-                AGENT_SERVICE_METHODS.forEach(function (m) {
-                    mockAgentService[m].and.returnValue(false);
-                });
-            });
-
-            TEST_PERMUTATIONS.forEach(function (trueMethods) {
-                var summary = trueMethods.length === 0
-                    ? "device has no detected characteristics"
-                    : "device " + (trueMethods.join(", "));
-
-                describe("when " + summary, function () {
-                    var classifier; // eslint-disable-line
-
-                    beforeEach(function () {
-                        trueMethods.forEach(function (m) {
-                            mockAgentService[m].and.returnValue(true);
-                        });
-                        classifier = new DeviceClassifier(
-                            mockAgentService,
-                            mockDocument
-                        );
-                    });
-
-                    it("adds classes for matching, detected characteristics", function () {
-                        Object.keys(DeviceMatchers).filter(function (m) {
-                            return DeviceMatchers[m](mockAgentService);
-                        }).forEach(function (key) {
-                            expect(mockBody.addClass)
-                                .toHaveBeenCalledWith(key);
-                        });
-                    });
-
-                    it("does not add classes for non-matching characteristics", function () {
-                        Object.keys(DeviceMatchers).filter(function (m) {
-                            return !DeviceMatchers[m](mockAgentService);
-                        }).forEach(function (key) {
-                            expect(mockBody.addClass)
-                                .not.toHaveBeenCalledWith(key);
-                        });
-                    });
-                });
-            });
-        });
-    }
-);
diff --git a/platform/commonUI/mobile/test/DeviceMatchersSpec.js b/platform/commonUI/mobile/test/DeviceMatchersSpec.js
deleted file mode 100644
index d3569c00c0b..00000000000
--- a/platform/commonUI/mobile/test/DeviceMatchersSpec.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/DeviceMatchers"],
-    function (DeviceMatchers) {
-
-        describe("DeviceMatchers", function () {
-            var mockAgentService;
-
-            beforeEach(function () {
-                mockAgentService = jasmine.createSpyObj(
-                    'agentService',
-                    [
-                        'isMobile',
-                        'isPhone',
-                        'isTablet',
-                        'isPortrait',
-                        'isLandscape',
-                        'isTouch'
-                    ]
-                );
-            });
-
-            it("detects when a device is a desktop device", function () {
-                mockAgentService.isMobile.and.returnValue(false);
-                expect(DeviceMatchers.desktop(mockAgentService))
-                    .toBe(true);
-                mockAgentService.isMobile.and.returnValue(true);
-                expect(DeviceMatchers.desktop(mockAgentService))
-                    .toBe(false);
-            });
-
-            function method(deviceType) {
-                return "is" + deviceType[0].toUpperCase() + deviceType.slice(1);
-            }
-
-            [
-                "mobile",
-                "phone",
-                "tablet",
-                "landscape",
-                "portrait",
-                "landscape",
-                "touch"
-            ].forEach(function (deviceType) {
-                it("detects when a device is a " + deviceType + " device", function () {
-                    mockAgentService[method(deviceType)].and.returnValue(true);
-                    expect(DeviceMatchers[deviceType](mockAgentService))
-                        .toBe(true);
-                    mockAgentService[method(deviceType)].and.returnValue(false);
-                    expect(DeviceMatchers[deviceType](mockAgentService))
-                        .toBe(false);
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/mobile/test/MCTDeviceSpec.js b/platform/commonUI/mobile/test/MCTDeviceSpec.js
deleted file mode 100644
index 8c297c6ed56..00000000000
--- a/platform/commonUI/mobile/test/MCTDeviceSpec.js
+++ /dev/null
@@ -1,168 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['../src/MCTDevice'],
-    function (MCTDevice) {
-
-        var JQLITE_METHODS = ['replaceWith'];
-
-        describe("The mct-device directive", function () {
-            var mockAgentService,
-                mockTransclude,
-                mockElement,
-                mockClone,
-                testAttrs,
-                directive;
-
-            function link() {
-                directive.link(null, mockElement, testAttrs, null, mockTransclude);
-            }
-
-            beforeEach(function () {
-                mockAgentService = jasmine.createSpyObj(
-                    "agentService",
-                    ["isMobile", "isPhone", "isTablet", "isPortrait", "isLandscape"]
-                );
-                mockTransclude = jasmine.createSpy("$transclude");
-                mockElement = jasmine.createSpyObj(name, JQLITE_METHODS);
-                mockClone = jasmine.createSpyObj(name, JQLITE_METHODS);
-
-                mockTransclude.and.callFake(function (fn) {
-                    fn(mockClone);
-                });
-
-                // Look desktop-like by default
-                mockAgentService.isLandscape.and.returnValue(true);
-
-                testAttrs = {};
-
-                directive = new MCTDevice(mockAgentService);
-            });
-
-            function expectInclusion() {
-                expect(mockElement.replaceWith)
-                    .toHaveBeenCalledWith(mockClone);
-            }
-
-            function expectExclusion() {
-                expect(mockElement.replaceWith).not.toHaveBeenCalled();
-            }
-
-            it("is applicable at the attribute level", function () {
-                expect(directive.restrict).toEqual("A");
-            });
-
-            it("transcludes at the element level", function () {
-                expect(directive.transclude).toEqual('element');
-            });
-
-            it("has a greater priority number than ng-if", function () {
-                expect(directive.priority > 600).toBeTruthy();
-            });
-
-            it("restricts element inclusion for mobile devices", function () {
-                testAttrs.mctDevice = "mobile";
-                link();
-                expectExclusion();
-
-                mockAgentService.isMobile.and.returnValue(true);
-                link();
-                expectInclusion();
-            });
-
-            it("restricts element inclusion for tablet devices", function () {
-                testAttrs.mctDevice = "tablet";
-                mockAgentService.isMobile.and.returnValue(true);
-                link();
-                expectExclusion();
-
-                mockAgentService.isTablet.and.returnValue(true);
-                link();
-                expectInclusion();
-            });
-
-            it("restricts element inclusion for phone devices", function () {
-                testAttrs.mctDevice = "phone";
-                mockAgentService.isMobile.and.returnValue(true);
-                link();
-                expectExclusion();
-
-                mockAgentService.isPhone.and.returnValue(true);
-                link();
-                expectInclusion();
-            });
-
-            it("restricts element inclusion for desktop devices", function () {
-                testAttrs.mctDevice = "desktop";
-                mockAgentService.isMobile.and.returnValue(true);
-                link();
-                expectExclusion();
-
-                mockAgentService.isMobile.and.returnValue(false);
-                link();
-                expectInclusion();
-            });
-
-            it("restricts element inclusion for portrait orientation", function () {
-                testAttrs.mctDevice = "portrait";
-                link();
-                expectExclusion();
-
-                mockAgentService.isPortrait.and.returnValue(true);
-                link();
-                expectInclusion();
-            });
-
-            it("restricts element inclusion for landscape orientation", function () {
-                testAttrs.mctDevice = "landscape";
-                mockAgentService.isLandscape.and.returnValue(false);
-                mockAgentService.isPortrait.and.returnValue(true);
-                link();
-                expectExclusion();
-
-                mockAgentService.isLandscape.and.returnValue(true);
-                link();
-                expectInclusion();
-            });
-
-            it("allows multiple device characteristics to be requested", function () {
-                // Won't try to test every permutation here, just
-                // make sure the multi-characteristic feature has support.
-                testAttrs.mctDevice = "portrait mobile";
-                link();
-                // Neither portrait nor mobile, not called
-                expectExclusion();
-
-                mockAgentService.isPortrait.and.returnValue(true);
-                link();
-
-                // Was portrait, but not mobile, so no
-                expectExclusion();
-
-                mockAgentService.isMobile.and.returnValue(true);
-                link();
-                expectInclusion();
-            });
-        });
-    }
-);
diff --git a/platform/commonUI/notification/bundle.js b/platform/commonUI/notification/bundle.js
deleted file mode 100644
index 0bb7477fa28..00000000000
--- a/platform/commonUI/notification/bundle.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/NotificationService"
-], function (
-    NotificationService
-) {
-
-    return {
-        name: "platform/commonUI/notification",
-        definition: {
-            "extensions": {
-                "services": [
-                    {
-                        "key": "notificationService",
-                        "implementation": function (openmct) {
-                            return new NotificationService.default(openmct);
-                        },
-                        "depends": [
-                            "openmct"
-                        ]
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/commonUI/notification/src/NotificationService.js b/platform/commonUI/notification/src/NotificationService.js
deleted file mode 100644
index 181c097c14c..00000000000
--- a/platform/commonUI/notification/src/NotificationService.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-export default class NotificationService {
-    constructor(openmct) {
-        this.openmct = openmct;
-    }
-    info(message) {
-        if (typeof message === 'string') {
-            return this.openmct.notifications.info(message);
-        } else {
-            if (Object.prototype.hasOwnProperty.call(message, 'progress')) {
-                return this.openmct.notifications.progress(message.title, message.progress, message.progressText);
-            } else {
-                return this.openmct.notifications.info(message.title);
-            }
-        }
-    }
-    alert(message) {
-        if (typeof message === 'string') {
-            return this.openmct.notifications.alert(message);
-        } else {
-            return this.openmct.notifications.alert(message.title);
-        }
-    }
-    error(message) {
-        if (typeof message === 'string') {
-            return this.openmct.notifications.error(message);
-        } else {
-            return this.openmct.notifications.error(message.title);
-        }
-    }
-    notify(options) {
-        switch (options.severity) {
-        case 'info':
-            return this.info(options);
-        case 'alert':
-            return this.alert(options);
-        case 'error':
-            return this.error(options);
-        }
-    }
-    getAllNotifications() {
-        return this.openmct.notifications.notifications;
-    }
-}
diff --git a/platform/commonUI/regions/bundle.js b/platform/commonUI/regions/bundle.js
deleted file mode 100644
index b6ecc8ec6fd..00000000000
--- a/platform/commonUI/regions/bundle.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    './src/InspectorController',
-    './src/EditableRegionPolicy'
-], function (
-    InspectorController,
-    EditableRegionPolicy
-) {
-
-    return {
-        name: "platform/commonUI/regions",
-        definition: {
-            "extensions": {
-                "controllers": [
-                    {
-                        "key": "InspectorController",
-                        "implementation": InspectorController,
-                        "depends": [
-                            "$scope",
-                            "openmct",
-                            "$document"
-                        ]
-                    }
-                ],
-                "policies": [
-                    {
-                        "category": "region",
-                        "implementation": EditableRegionPolicy
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/commonUI/regions/src/EditableRegionPolicy.js b/platform/commonUI/regions/src/EditableRegionPolicy.js
deleted file mode 100644
index 03215bcadee..00000000000
--- a/platform/commonUI/regions/src/EditableRegionPolicy.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * A policy for determining whether a region part should be visible or
-         * not, based on its editability and the current state of the domain
-         * object .
-         * @constructor
-         * @implements {Policy}
-         * @memberof platform/commonUI/regions
-         */
-        function EditableRegionPolicy() {
-        }
-
-        EditableRegionPolicy.prototype.allow = function (regionPart, domainObject) {
-            if (!regionPart.modes) {
-                return true;
-            }
-
-            if (domainObject.hasCapability('editor') && domainObject.getCapability('editor').inEditContext()) {
-                //If the domain object is in edit mode, only include a part
-                // if it is marked editable
-                return regionPart.modes.indexOf('edit') !== -1;
-            } else {
-                //If the domain object is not in edit mode, return any parts
-                // that are not explicitly marked editable
-                return regionPart.modes.indexOf('browse') !== -1;
-            }
-        };
-
-        return EditableRegionPolicy;
-    }
-);
diff --git a/platform/commonUI/regions/src/InspectorController.js b/platform/commonUI/regions/src/InspectorController.js
deleted file mode 100644
index e82556b6822..00000000000
--- a/platform/commonUI/regions/src/InspectorController.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * The InspectorController listens for the selection changes and adds the selection
-         * object to the scope.
-         *
-         * @constructor
-         */
-        function InspectorController($scope, openmct, $document) {
-            var self = this;
-            self.$scope = $scope;
-
-            /**
-             * Callback handler for the selection change event.
-             * Adds the selection object to the scope. If the selected item has an inspector view,
-             * it puts the key in the scope. If provider view exists, it shows the view.
-             */
-            function setSelection(selection) {
-                if (selection[0]) {
-                    var view = openmct.inspectorViews.get(selection);
-                    var container = $document[0].querySelectorAll('.inspector-provider-view')[0];
-                    container.innerHTML = "";
-
-                    if (view) {
-                        self.providerView = true;
-                        view.show(container);
-                    } else {
-                        self.providerView = false;
-                        var selectedItem = selection[0].context.oldItem;
-
-                        if (selectedItem) {
-                            $scope.inspectorKey = selectedItem.getCapability("type").typeDef.inspector;
-                        }
-                    }
-                }
-
-                self.$scope.selection = selection;
-            }
-
-            openmct.selection.on("change", setSelection);
-
-            setSelection(openmct.selection.get());
-
-            $scope.$on("$destroy", function () {
-                openmct.selection.off("change", setSelection);
-            });
-        }
-
-        /**
-         * Gets the selected item.
-         *
-         * @returns a domain object
-         */
-        InspectorController.prototype.selectedItem = function () {
-            return this.$scope.selection[0] && this.$scope.selection[0].context.oldItem;
-        };
-
-        /**
-         * Checks if a provider view exists.
-         *
-         * @returns 'true' if provider view exists, 'false' otherwise
-         */
-        InspectorController.prototype.hasProviderView = function () {
-            return this.providerView;
-        };
-
-        return InspectorController;
-    }
-);
diff --git a/platform/commonUI/regions/src/Region.js b/platform/commonUI/regions/src/Region.js
deleted file mode 100644
index 90c5be3b065..00000000000
--- a/platform/commonUI/regions/src/Region.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * @typeDef {object} PartContents
-         * @property {string} key If the part is defined as a
-         * representation, the key corresponding to the representation.
-         * @memberOf platform/commonUI/regions
-         */
-
-        /**
-         * @typeDef {object} RegionConfiguration
-         * @property {string} name A unique name for this region part
-         * @property {PartContents} [content] the details of the region being
-         * defined
-         * @property {Array<string>} [modes] the modes that this region
-         * should be included in. Options are 'edit' and 'browse'. By
-         * default, will be included in both. Inclusion of regions is
-         * determined by policies of category 'region'. By default, the
-         * {EditableRegionPolicy} will be applied.
-         * @memberOf platform/commonUI/regions
-         */
-
-        /**
-         * Defines the interface for a screen region. A screen region is a
-         * section of the browse an edit screens for an object. Regions are
-         * declared in object type definitions.
-         * @memberOf platform/commonUI/regions
-         * @abstract
-         * @constructor
-         */
-        function Region(configuration) {
-            configuration = configuration || {};
-            this.name = configuration.name;
-            this.content = configuration.content;
-            this.modes = configuration.modes;
-
-            this.regions = [];
-        }
-
-        /**
-         * Adds a sub-region to this region.
-         * @param {Region} region the part to add
-         * @param {number} [index] the position to insert the region. By default
-         * will add to the end
-         */
-        Region.prototype.addRegion = function (region, index) {
-            if (index) {
-                this.regions.splice(index, 0, region);
-            } else {
-                this.regions.push(region);
-            }
-        };
-
-        /**
-         * Removes a sub-region from this region.
-         * @param {Region | number | strnig} region The region to
-         * remove. If a number, will remove the region at that index. If a
-         * string, will remove the region with the matching name. If an
-         * object, will attempt to remove that object from the Region
-         */
-        Region.prototype.removeRegion = function (region) {
-            if (typeof region === 'number') {
-                this.regions.splice(region, 1);
-            } else if (typeof region === 'string') {
-                this.regions = this.regions.filter(function (thisRegion) {
-                    return thisRegion.name !== region;
-                });
-            } else {
-                this.regions.splice(this.regions.indexOf(region), 1);
-            }
-        };
-
-        return Region;
-    }
-);
diff --git a/platform/commonUI/regions/test/EditableRegionPolicySpec.js b/platform/commonUI/regions/test/EditableRegionPolicySpec.js
deleted file mode 100644
index 3aac1946536..00000000000
--- a/platform/commonUI/regions/test/EditableRegionPolicySpec.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['../src/EditableRegionPolicy'],
-    function (EditableRegionPolicy) {
-
-        describe("The editable region policy ", function () {
-
-            var editableRegionPolicy,
-                mockDomainObject,
-                mockEditorCapability,
-                mockBrowseRegionPart = {
-                    modes: 'browse'
-                },
-                mockEditRegionPart = {
-                    modes: 'edit'
-                },
-                mockAllModesRegionPart = {};
-
-            beforeEach(function () {
-                editableRegionPolicy = new EditableRegionPolicy();
-
-                mockEditorCapability = jasmine.createSpyObj("editorCapability", [
-                    "inEditContext"
-                ]);
-                mockDomainObject = jasmine.createSpyObj("domainObject", [
-                    "hasCapability", "getCapability"
-                ]);
-                mockDomainObject.hasCapability.and.returnValue(true);
-                mockDomainObject.getCapability.and.returnValue(mockEditorCapability);
-            });
-
-            it("includes only browse region parts for object not in edit mode", function () {
-                mockEditorCapability.inEditContext.and.returnValue(false);
-                expect(editableRegionPolicy.allow(mockBrowseRegionPart, mockDomainObject)).toBe(true);
-                expect(editableRegionPolicy.allow(mockEditRegionPart, mockDomainObject)).toBe(false);
-            });
-
-            it("includes only edit region parts for object in edit mode", function () {
-                mockEditorCapability.inEditContext.and.returnValue(true);
-                expect(editableRegionPolicy.allow(mockBrowseRegionPart, mockDomainObject)).toBe(false);
-                expect(editableRegionPolicy.allow(mockEditRegionPart, mockDomainObject)).toBe(true);
-            });
-
-            it("includes region parts with no mode specification", function () {
-                mockEditorCapability.inEditContext.and.returnValue(false);
-                expect(editableRegionPolicy.allow(mockAllModesRegionPart, mockDomainObject)).toBe(true);
-                mockEditorCapability.inEditContext.and.returnValue(true);
-                expect(editableRegionPolicy.allow(mockAllModesRegionPart, mockDomainObject)).toBe(true);
-            });
-
-        });
-    }
-);
diff --git a/platform/commonUI/regions/test/InspectorControllerSpec.js b/platform/commonUI/regions/test/InspectorControllerSpec.js
deleted file mode 100644
index 7a698709722..00000000000
--- a/platform/commonUI/regions/test/InspectorControllerSpec.js
+++ /dev/null
@@ -1,120 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['../src/InspectorController'],
-    function (InspectorController) {
-
-        describe("The inspector controller ", function () {
-            var mockScope,
-                mockDomainObject,
-                mockOpenMCT,
-                mockSelection,
-                mockInspectorViews,
-                mockTypeDef,
-                controller,
-                container,
-                $document = [],
-                selectable = [];
-
-            beforeEach(function () {
-                mockTypeDef = {
-                    typeDef: {
-                        inspector: "some-key"
-                    }
-                };
-
-                mockDomainObject = jasmine.createSpyObj('domainObject', [
-                    'getCapability'
-                ]);
-                mockDomainObject.getCapability.and.returnValue(mockTypeDef);
-
-                mockScope = jasmine.createSpyObj('$scope',
-                    ['$on', 'selection']
-                );
-
-                selectable[0] = {
-                    context: {
-                        oldItem: mockDomainObject
-                    }
-                };
-
-                mockSelection = jasmine.createSpyObj("selection", [
-                    'on',
-                    'off',
-                    'get'
-                ]);
-                mockSelection.get.and.returnValue(selectable);
-
-                mockInspectorViews = jasmine.createSpyObj('inspectorViews', ['get']);
-                mockOpenMCT = {
-                    selection: mockSelection,
-                    inspectorViews: mockInspectorViews
-                };
-
-                container = jasmine.createSpy('container', ['innerHTML']);
-                $document[0] = jasmine.createSpyObj("$document", ['querySelectorAll']);
-                $document[0].querySelectorAll.and.returnValue([container]);
-
-                controller = new InspectorController(mockScope, mockOpenMCT, $document);
-            });
-
-            it("listens for selection change event", function () {
-                expect(mockOpenMCT.selection.on).toHaveBeenCalledWith(
-                    'change',
-                    jasmine.any(Function)
-                );
-
-                expect(controller.selectedItem()).toEqual(mockDomainObject);
-
-                var mockItem = jasmine.createSpyObj('domainObject', [
-                    'getCapability'
-                ]);
-                mockItem.getCapability.and.returnValue(mockTypeDef);
-                selectable[0].context.oldItem = mockItem;
-
-                mockOpenMCT.selection.on.calls.mostRecent().args[1](selectable);
-
-                expect(controller.selectedItem()).toEqual(mockItem);
-            });
-
-            it("cleans up on scope destroy", function () {
-                expect(mockScope.$on).toHaveBeenCalledWith(
-                    '$destroy',
-                    jasmine.any(Function)
-                );
-
-                mockScope.$on.calls.all()[0].args[1]();
-
-                expect(mockOpenMCT.selection.off).toHaveBeenCalledWith(
-                    'change',
-                    jasmine.any(Function)
-                );
-            });
-
-            it("adds selection object to scope", function () {
-                expect(mockScope.selection).toEqual(selectable);
-                expect(controller.selectedItem()).toEqual(mockDomainObject);
-            });
-        });
-    }
-);
diff --git a/platform/commonUI/regions/test/RegionSpec.js b/platform/commonUI/regions/test/RegionSpec.js
deleted file mode 100644
index 5b3151e8fb6..00000000000
--- a/platform/commonUI/regions/test/RegionSpec.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['../src/Region'],
-    function (Region) {
-
-        describe("The region class ", function () {
-
-            var region,
-                part2 = new Region({'name': 'part2'});
-
-            beforeEach(function () {
-                region = new Region();
-                region.regions = [
-                    new Region({name: 'part1'}),
-                    new Region({name: 'part3'}),
-                    new Region({name: 'part4'})
-                ];
-            });
-
-            it("adding a region at a specified index adds it in that"
-                + " position", function () {
-
-                region.addRegion(part2, 1);
-
-                expect(region.regions.length).toBe(4);
-                expect(region.regions[1]).toBe(part2);
-            });
-
-            it("adding a region without an index adds it at the end", function () {
-                var partN = new Region({'name': 'partN'});
-
-                region.addRegion(partN);
-
-                expect(region.regions.length).toBe(4);
-                expect(region.regions[region.regions.length - 1]).toBe(partN);
-            });
-
-            describe("removing a region", function () {
-                var partName = "part2";
-
-                beforeEach(function () {
-                    region.regions = [
-                        new Region({name: 'part1'}),
-                        part2,
-                        new Region({name: 'part3'}),
-                        new Region({name: 'part4'})
-                    ];
-                });
-
-                it("with a string matches on region name", function () {
-                    expect(region.regions.length).toBe(4);
-                    expect(region.regions.indexOf(part2)).toBe(1);
-
-                    region.removeRegion(partName);
-
-                    expect(region.regions.length).toBe(3);
-                    expect(region.regions.indexOf(part2)).toBe(-1);
-                });
-
-                it("with a number removes by index", function () {
-                    expect(region.regions.length).toBe(4);
-                    expect(region.regions.indexOf(part2)).toBe(1);
-
-                    region.removeRegion(1);
-
-                    expect(region.regions.length).toBe(3);
-                    expect(region.regions.indexOf(part2)).toBe(-1);
-                });
-
-                it("with object matches that object", function () {
-                    expect(region.regions.length).toBe(4);
-                    expect(region.regions.indexOf(part2)).toBe(1);
-
-                    region.removeRegion(part2);
-
-                    expect(region.regions.length).toBe(3);
-                    expect(region.regions.indexOf(part2)).toBe(-1);
-                });
-            });
-        });
-    }
-);
diff --git a/platform/containment/README.md b/platform/containment/README.md
deleted file mode 100644
index b72c3674fa4..00000000000
--- a/platform/containment/README.md
+++ /dev/null
@@ -1,2 +0,0 @@
-Implements support for rules which determine which objects are allowed
-to contain other objects, typically by type.
diff --git a/platform/containment/bundle.js b/platform/containment/bundle.js
deleted file mode 100644
index 6dfc7be34a5..00000000000
--- a/platform/containment/bundle.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/CompositionPolicy",
-    "./src/CompositionMutabilityPolicy",
-    "./src/CompositionModelPolicy",
-    "./src/ComposeActionPolicy",
-    "./src/PersistableCompositionPolicy"
-], function (
-    CompositionPolicy,
-    CompositionMutabilityPolicy,
-    CompositionModelPolicy,
-    ComposeActionPolicy,
-    PersistableCompositionPolicy
-) {
-
-    return {
-        name: "platform/containment",
-        definition: {
-            "extensions": {
-                "policies": [
-                    {
-                        "category": "composition",
-                        "implementation": CompositionPolicy,
-                        "message": "Objects of this type cannot contain objects of that type."
-                    },
-                    {
-                        "category": "composition",
-                        "implementation": CompositionMutabilityPolicy,
-                        "message": "Objects of this type cannot be modified."
-                    },
-                    {
-                        "category": "composition",
-                        "implementation": CompositionModelPolicy,
-                        "message": "Objects of this type cannot contain other objects."
-                    },
-                    {
-                        "category": "action",
-                        "implementation": ComposeActionPolicy,
-                        "depends": [
-                            "$injector",
-                            "openmct"
-                        ],
-                        "message": "Objects of this type cannot contain objects of that type."
-                    },
-                    {
-                        "category": "composition",
-                        "implementation": PersistableCompositionPolicy,
-                        "depends": ["openmct"],
-                        "message": "Change cannot be made to composition of non-persistable object"
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/containment/src/ComposeActionPolicy.js b/platform/containment/src/ComposeActionPolicy.js
deleted file mode 100644
index b47b339824b..00000000000
--- a/platform/containment/src/ComposeActionPolicy.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Restrict `compose` actions to cases where composition
-         * is explicitly allowed.
-         *
-         * Note that this is a policy that needs the `policyService`,
-         * since it's delegated to a different policy category.
-         * To avoid a circular dependency, the service is obtained via
-         * Angular's `$injector`.
-         * @constructor
-         * @memberof platform/containment
-         * @implements {Policy.<Action, ActionContext>}
-         */
-        function ComposeActionPolicy($injector, openmct) {
-            this.getPolicyService = function () {
-                return $injector.get('policyService');
-            };
-
-            this.openmct = openmct;
-        }
-
-        ComposeActionPolicy.prototype.allowComposition = function (containerObject, selectedObject) {
-
-            // Get a reference to the policy service if needed...
-            this.policyService = this.policyService || this.getPolicyService();
-
-            // ...and delegate to the composition policy
-            return containerObject.getId() !== selectedObject.getId()
-                && this.openmct.composition.checkPolicy(containerObject.useCapability('adapter'),
-                    selectedObject.useCapability('adapter'));
-        };
-
-        /**
-         * Check whether or not a compose action should be allowed
-         * in this context.
-         * @returns {boolean} true if it may be allowed
-         * @memberof platform/containment.ComposeActionPolicy#
-         */
-        ComposeActionPolicy.prototype.allow = function (candidate, context) {
-            if (candidate.getMetadata().key === 'compose') {
-                return this.allowComposition(
-                    (context || {}).domainObject,
-                    (context || {}).selectedObject
-                );
-            }
-
-            return true;
-        };
-
-        return ComposeActionPolicy;
-
-    }
-);
diff --git a/platform/containment/src/CompositionModelPolicy.js b/platform/containment/src/CompositionModelPolicy.js
deleted file mode 100644
index 11f27449e92..00000000000
--- a/platform/containment/src/CompositionModelPolicy.js
+++ /dev/null
@@ -1,26 +0,0 @@
-
-define(
-    [],
-    function () {
-
-        /**
-         * Policy allowing composition only for domain object types which
-         * have a composition property.
-         * @constructor
-         * @memberof platform/containment
-         * @implements {Policy.<Type, Type>}
-         */
-        function CompositionModelPolicy() {
-        }
-
-        CompositionModelPolicy.prototype.allow = function (candidate) {
-            var candidateType = candidate.getCapability('type');
-
-            return Array.isArray(
-                (candidateType.getInitialModel() || {}).composition
-            );
-        };
-
-        return CompositionModelPolicy;
-    }
-);
diff --git a/platform/containment/src/CompositionMutabilityPolicy.js b/platform/containment/src/CompositionMutabilityPolicy.js
deleted file mode 100644
index cb0eec7207a..00000000000
--- a/platform/containment/src/CompositionMutabilityPolicy.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Disallow composition changes to objects which are not mutable.
-         * @memberof platform/containment
-         * @constructor
-         * @implements {Policy.<Type, Type>}
-         */
-        function CompositionMutabilityPolicy() {
-        }
-
-        CompositionMutabilityPolicy.prototype.allow = function (candidate) {
-            // Equate creatability with mutability; that is, users
-            // can only modify objects of types they can create, and
-            // vice versa.
-            return candidate.getCapability('type').hasFeature('creation');
-        };
-
-        return CompositionMutabilityPolicy;
-    }
-);
diff --git a/platform/containment/src/CompositionPolicy.js b/platform/containment/src/CompositionPolicy.js
deleted file mode 100644
index 53fa48933d1..00000000000
--- a/platform/containment/src/CompositionPolicy.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * This bundle implements "containment" rules, which determine which objects
- * can be contained within which other objects.
- * @namespace platform/containment
- */
-define(
-    [],
-    function () {
-
-        /**
-         * Determines whether a given object can contain a candidate child object.
-         * @constructor
-         * @memberof platform/containment
-         * @implements {Policy.<DomainObjectImpl, DomainObjectImpl>}
-         */
-        function CompositionPolicy() {
-        }
-
-        CompositionPolicy.prototype.allow = function (parent, child) {
-            var parentDef = parent.getCapability('type').getDefinition();
-
-            // A parent without containment rules can contain anything.
-            if (!parentDef.contains) {
-                return true;
-            }
-
-            // If any containment rule matches context type, the candidate
-            // can contain this type.
-            return parentDef.contains.some(function (c) {
-                // Simple containment rules are supported typeKeys.
-                if (typeof c === 'string') {
-                    return c === child.getCapability('type').getKey();
-                }
-
-                // More complicated rules require context to have all specified
-                // capabilities.
-                if (!Array.isArray(c.has)) {
-                    c.has = [c.has];
-                }
-
-                return c.has.every(function (capability) {
-                    return child.hasCapability(capability);
-                });
-            });
-        };
-
-        return CompositionPolicy;
-    }
-);
diff --git a/platform/containment/src/PersistableCompositionPolicy.js b/platform/containment/src/PersistableCompositionPolicy.js
deleted file mode 100644
index 389fcb8f9f7..00000000000
--- a/platform/containment/src/PersistableCompositionPolicy.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * This bundle implements "containment" rules, which determine which objects
- * can be contained within which other objects.
- * @namespace platform/containment
- */
-define(
-    ['objectUtils'],
-    function (objectUtils) {
-
-        function PersistableCompositionPolicy(openmct) {
-            this.openmct = openmct;
-        }
-
-        /**
-         * Only allow changes to composition if the changes can be saved. This in
-         * effect prevents selection of objects from the locator that do not
-         * support persistence.
-         * @param parent
-         * @param child
-         * @returns {boolean}
-         */
-        PersistableCompositionPolicy.prototype.allow = function (parent) {
-            // If object is in edit mode, allow composition because it is
-            // part of object creation, and the object may be saved to another
-            // namespace that does support persistence. The EditPersistableObjectsPolicy
-            // prevents editing of objects that cannot be persisted, so we can assume that this
-            // is a new object.
-            if (!(parent.hasCapability('editor') && parent.getCapability('editor').isEditContextRoot())) {
-                let identifier = this.openmct.objects.parseKeyString(parent.getId());
-
-                return this.openmct.objects.isPersistable(identifier);
-            }
-
-            return true;
-        };
-
-        return PersistableCompositionPolicy;
-    }
-);
diff --git a/platform/containment/test/ComposeActionPolicySpec.js b/platform/containment/test/ComposeActionPolicySpec.js
deleted file mode 100644
index a80ee4f37f4..00000000000
--- a/platform/containment/test/ComposeActionPolicySpec.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/ComposeActionPolicy"],
-    function (ComposeActionPolicy) {
-        xdescribe("The compose action policy", function () {
-            var mockInjector,
-                mockPolicyService,
-                mockTypes,
-                mockDomainObjects,
-                mockAction,
-                testContext,
-                policy;
-
-            beforeEach(function () {
-                mockInjector = jasmine.createSpyObj('$injector', ['get']);
-                mockPolicyService = jasmine.createSpyObj(
-                    'policyService',
-                    ['allow']
-                );
-                mockTypes = ['a', 'b'].map(function (type) {
-                    var mockType = jasmine.createSpyObj('type-' + type, ['getKey']);
-                    mockType.getKey.and.returnValue(type);
-
-                    return mockType;
-                });
-                mockDomainObjects = ['a', 'b'].map(function (id, index) {
-                    var mockDomainObject = jasmine.createSpyObj(
-                        'domainObject-' + id,
-                        ['getId', 'getCapability']
-                    );
-                    mockDomainObject.getId.and.returnValue(id);
-                    mockDomainObject.getCapability.and.callFake(function (c) {
-                        return c === 'type' && mockTypes[index];
-                    });
-
-                    return mockDomainObject;
-                });
-                mockAction = jasmine.createSpyObj('action', ['getMetadata']);
-
-                testContext = {
-                    key: 'compose',
-                    domainObject: mockDomainObjects[0],
-                    selectedObject: mockDomainObjects[1]
-                };
-
-                mockAction.getMetadata.and.returnValue(testContext);
-                mockInjector.get.and.callFake(function (service) {
-                    return service === 'policyService' && mockPolicyService;
-                });
-
-                policy = new ComposeActionPolicy(mockInjector);
-            });
-
-            it("defers to composition policy", function () {
-                mockPolicyService.allow.and.returnValue(false);
-                expect(policy.allow(mockAction, testContext)).toBeFalsy();
-                mockPolicyService.allow.and.returnValue(true);
-                expect(policy.allow(mockAction, testContext)).toBeTruthy();
-
-                expect(mockPolicyService.allow).toHaveBeenCalledWith(
-                    'composition',
-                    mockDomainObjects[0],
-                    mockDomainObjects[1]
-                );
-            });
-
-            it("allows actions other than compose", function () {
-                testContext.key = 'somethingElse';
-                mockPolicyService.allow.and.returnValue(false);
-                expect(policy.allow(mockAction, testContext)).toBeTruthy();
-            });
-        });
-    }
-);
diff --git a/platform/containment/test/CompositionModelPolicySpec.js b/platform/containment/test/CompositionModelPolicySpec.js
deleted file mode 100644
index c2ebb9e45db..00000000000
--- a/platform/containment/test/CompositionModelPolicySpec.js
+++ /dev/null
@@ -1,30 +0,0 @@
-
-define(
-    ["../src/CompositionModelPolicy"],
-    function (CompositionModelPolicy) {
-
-        describe("The composition model policy", function () {
-            var mockObject,
-                mockType,
-                policy;
-
-            beforeEach(function () {
-                mockType = jasmine.createSpyObj('type', ['getInitialModel']);
-                mockObject = {
-                    getCapability: function () {
-                        return mockType;
-                    }
-                };
-                policy = new CompositionModelPolicy();
-            });
-
-            it("only allows composition for types which will have a composition property", function () {
-                mockType.getInitialModel.and.returnValue({});
-                expect(policy.allow(mockObject)).toBeFalsy();
-                mockType.getInitialModel.and.returnValue({ composition: [] });
-                expect(policy.allow(mockObject)).toBeTruthy();
-            });
-        });
-
-    }
-);
diff --git a/platform/containment/test/CompositionMutabilityPolicySpec.js b/platform/containment/test/CompositionMutabilityPolicySpec.js
deleted file mode 100644
index 900a821d548..00000000000
--- a/platform/containment/test/CompositionMutabilityPolicySpec.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/CompositionMutabilityPolicy"],
-    function (CompositionMutabilityPolicy) {
-
-        describe("The composition mutability policy", function () {
-            var mockObject,
-                mockType,
-                policy;
-
-            beforeEach(function () {
-                mockType = jasmine.createSpyObj('type', ['hasFeature']);
-                mockObject = {
-                    getCapability: function () {
-                        return mockType;
-                    }
-                };
-                policy = new CompositionMutabilityPolicy();
-            });
-
-            it("only allows composition for types which can be created/modified", function () {
-                expect(policy.allow(mockObject)).toBeFalsy();
-                mockType.hasFeature.and.returnValue(true);
-                expect(policy.allow(mockObject)).toBeTruthy();
-                expect(mockType.hasFeature).toHaveBeenCalledWith('creation');
-            });
-        });
-
-    }
-);
diff --git a/platform/containment/test/CompositionPolicySpec.js b/platform/containment/test/CompositionPolicySpec.js
deleted file mode 100644
index ad29b572a99..00000000000
--- a/platform/containment/test/CompositionPolicySpec.js
+++ /dev/null
@@ -1,131 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/CompositionPolicy"],
-    function (CompositionPolicy) {
-        describe("Composition policy", function () {
-            var mockParentObject,
-                typeA,
-                typeB,
-                typeC,
-                mockChildObject,
-                policy;
-
-            beforeEach(function () {
-                mockParentObject = jasmine.createSpyObj('domainObject', [
-                    'getCapability'
-                ]);
-
-                typeA = jasmine.createSpyObj(
-                    'type A-- the particular kind',
-                    ['getKey', 'getDefinition']
-                );
-                typeA.getKey.and.returnValue('a');
-                typeA.getDefinition.and.returnValue({
-                    contains: ['a']
-                });
-
-                typeB = jasmine.createSpyObj(
-                    'type B-- anything goes',
-                    ['getKey', 'getDefinition']
-                );
-                typeB.getKey.and.returnValue('b');
-                typeB.getDefinition.and.returnValue({
-                    contains: ['a', 'b']
-                });
-
-                typeC = jasmine.createSpyObj(
-                    'type C-- distinguishing and interested in telemetry',
-                    ['getKey', 'getDefinition']
-                );
-                typeC.getKey.and.returnValue('c');
-                typeC.getDefinition.and.returnValue({
-                    contains: [{has: 'telemetry'}]
-                });
-
-                mockChildObject = jasmine.createSpyObj(
-                    'childObject',
-                    ['getCapability', 'hasCapability']
-                );
-
-                policy = new CompositionPolicy();
-            });
-
-            describe('enforces simple containment rules', function () {
-
-                it('allows when type matches', function () {
-                    mockParentObject.getCapability.and.returnValue(typeA);
-
-                    mockChildObject.getCapability.and.returnValue(typeA);
-                    expect(policy.allow(mockParentObject, mockChildObject))
-                        .toBeTruthy();
-
-                    mockParentObject.getCapability.and.returnValue(typeB);
-                    expect(policy.allow(mockParentObject, mockChildObject))
-                        .toBeTruthy();
-
-                    mockChildObject.getCapability.and.returnValue(typeB);
-                    expect(policy.allow(mockParentObject, mockChildObject))
-                        .toBeTruthy();
-                });
-
-                it('disallows when type doesn\'t match', function () {
-
-                    mockParentObject.getCapability.and.returnValue(typeA);
-                    mockChildObject.getCapability.and.returnValue(typeB);
-                    expect(policy.allow(mockParentObject, mockChildObject))
-                        .toBeFalsy();
-
-                    mockChildObject.getCapability.and.returnValue(typeC);
-                    expect(policy.allow(mockParentObject, mockChildObject))
-                        .toBeFalsy();
-                });
-
-            });
-
-            describe('enforces capability-based containment rules', function () {
-                it('allows when object has capability', function () {
-                    mockParentObject.getCapability.and.returnValue(typeC);
-
-                    mockChildObject.hasCapability.and.returnValue(true);
-                    expect(policy.allow(mockParentObject, mockChildObject))
-                        .toBeTruthy();
-                    expect(mockChildObject.hasCapability)
-                        .toHaveBeenCalledWith('telemetry');
-                });
-
-                it('skips when object doesn\'t have capability', function () {
-                    mockChildObject.hasCapability.and.returnValue(false);
-
-                    mockParentObject.getCapability.and.returnValue(typeC);
-
-                    expect(policy.allow(mockParentObject, mockChildObject))
-                        .toBeFalsy();
-                    expect(mockChildObject.hasCapability)
-                        .toHaveBeenCalledWith('telemetry');
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/containment/test/PersistableCompositionPolicySpec.js b/platform/containment/test/PersistableCompositionPolicySpec.js
deleted file mode 100644
index 6f9aa74bd66..00000000000
--- a/platform/containment/test/PersistableCompositionPolicySpec.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/PersistableCompositionPolicy"],
-    function (PersistableCompositionPolicy) {
-        describe("Persistable Composition policy", function () {
-            var objectAPI;
-            var mockOpenMCT;
-            var persistableCompositionPolicy;
-            var mockParent;
-            var mockChild;
-            var mockEditorCapability;
-
-            beforeEach(function () {
-                objectAPI = jasmine.createSpyObj('objectsAPI', [
-                    'isPersistable',
-                    'parseKeyString'
-                ]);
-
-                mockOpenMCT = {
-                    objects: objectAPI
-                };
-                mockParent = jasmine.createSpyObj('domainObject', [
-                    'hasCapability',
-                    'getCapability',
-                    'getId'
-                ]);
-                mockParent.hasCapability.and.returnValue(true);
-                mockParent.getId.and.returnValue('someNamespace:someId');
-                mockChild = {};
-                mockEditorCapability = jasmine.createSpyObj('domainObject', [
-                    'isEditContextRoot'
-                ]);
-                mockParent.getCapability.and.returnValue(mockEditorCapability);
-                persistableCompositionPolicy = new PersistableCompositionPolicy(mockOpenMCT);
-            });
-
-            //Parent
-            // - getCapability ('editor')
-            //     - isEditContextRoot
-            // - openMct.objects.getProvider
-
-            it("Does not allow composition for objects that are not persistable", function () {
-                mockEditorCapability.isEditContextRoot.and.returnValue(false);
-                objectAPI.isPersistable.and.returnValue(true);
-                expect(persistableCompositionPolicy.allow(mockParent, mockChild)).toBe(true);
-                objectAPI.isPersistable.and.returnValue(false);
-                expect(persistableCompositionPolicy.allow(mockParent, mockChild)).toBe(false);
-            });
-
-            it("Always allows composition of objects in edit mode to support object creation", function () {
-                mockEditorCapability.isEditContextRoot.and.returnValue(true);
-                objectAPI.isPersistable.and.returnValue(true);
-                expect(persistableCompositionPolicy.allow(mockParent, mockChild)).toBe(true);
-                expect(objectAPI.isPersistable).not.toHaveBeenCalled();
-
-                mockEditorCapability.isEditContextRoot.and.returnValue(false);
-                objectAPI.isPersistable.and.returnValue(true);
-                expect(persistableCompositionPolicy.allow(mockParent, mockChild)).toBe(true);
-                expect(objectAPI.isPersistable).toHaveBeenCalled();
-            });
-
-        });
-    }
-);
diff --git a/platform/core/README.md b/platform/core/README.md
deleted file mode 100644
index 422ab4ce631..00000000000
--- a/platform/core/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-This bundle contains core software components of Open MCT. These 
-components describe MCT's information model, and are responsible for 
-introducing the API and infrastructure which supports domain objects.
diff --git a/platform/core/bundle.js b/platform/core/bundle.js
deleted file mode 100644
index 0e3ff951377..00000000000
--- a/platform/core/bundle.js
+++ /dev/null
@@ -1,393 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/objects/DomainObjectProvider",
-    "./src/capabilities/CoreCapabilityProvider",
-    "./src/models/StaticModelProvider",
-    "./src/models/ModelAggregator",
-    "./src/models/ModelCacheService",
-    "./src/models/PersistedModelProvider",
-    "./src/models/CachingModelDecorator",
-    "./src/models/MissingModelDecorator",
-    "./src/types/TypeProvider",
-    "./src/actions/ActionProvider",
-    "./src/actions/ActionAggregator",
-    "./src/actions/LoggingActionDecorator",
-    "./src/views/ViewProvider",
-    "./src/identifiers/IdentifierProvider",
-    "./src/capabilities/CompositionCapability",
-    "./src/capabilities/RelationshipCapability",
-    "./src/types/TypeCapability",
-    "./src/actions/ActionCapability",
-    "./src/views/ViewCapability",
-    "./src/capabilities/PersistenceCapability",
-    "./src/capabilities/MetadataCapability",
-    "./src/capabilities/MutationCapability",
-    "./src/capabilities/DelegationCapability",
-    "./src/capabilities/InstantiationCapability",
-    "./src/runs/TransactingMutationListener",
-    "./src/services/Now",
-    "./src/services/Throttle",
-    "./src/services/Topic",
-    "./src/services/Instantiate"
-], function (
-    DomainObjectProvider,
-    CoreCapabilityProvider,
-    StaticModelProvider,
-    ModelAggregator,
-    ModelCacheService,
-    PersistedModelProvider,
-    CachingModelDecorator,
-    MissingModelDecorator,
-    TypeProvider,
-    ActionProvider,
-    ActionAggregator,
-    LoggingActionDecorator,
-    ViewProvider,
-    IdentifierProvider,
-    CompositionCapability,
-    RelationshipCapability,
-    TypeCapability,
-    ActionCapability,
-    ViewCapability,
-    PersistenceCapability,
-    MetadataCapability,
-    MutationCapability,
-    DelegationCapability,
-    InstantiationCapability,
-    TransactingMutationListener,
-    Now,
-    Throttle,
-    Topic,
-    Instantiate
-) {
-
-    return {
-        name: "platform/core",
-        definition: {
-            "name": "Open MCT Core",
-            "description": "Defines core concepts of Open MCT.",
-            "sources": "src",
-            "configuration": {
-                "paths": {
-                    "uuid": "uuid"
-                }
-            },
-            "extensions": {
-                "components": [
-                    {
-                        "provides": "objectService",
-                        "type": "provider",
-                        "implementation": DomainObjectProvider,
-                        "depends": [
-                            "modelService",
-                            "instantiate"
-                        ]
-                    },
-                    {
-                        "provides": "capabilityService",
-                        "type": "provider",
-                        "implementation": CoreCapabilityProvider,
-                        "depends": [
-                            "capabilities[]",
-                            "$log"
-                        ]
-                    },
-                    {
-                        "provides": "modelService",
-                        "type": "provider",
-                        "implementation": StaticModelProvider,
-                        "depends": [
-                            "models[]",
-                            "$q",
-                            "$log"
-                        ]
-                    },
-                    {
-                        "provides": "modelService",
-                        "type": "aggregator",
-                        "implementation": ModelAggregator,
-                        "depends": [
-                            "$q"
-                        ]
-                    },
-                    {
-                        "provides": "modelService",
-                        "type": "provider",
-                        "implementation": PersistedModelProvider,
-                        "depends": [
-                            "persistenceService",
-                            "$q",
-                            "now",
-                            "PERSISTENCE_SPACE"
-                        ]
-                    },
-                    {
-                        "provides": "modelService",
-                        "type": "decorator",
-                        "implementation": CachingModelDecorator,
-                        "depends": [
-                            "cacheService"
-                        ]
-                    },
-                    {
-                        "provides": "modelService",
-                        "type": "decorator",
-                        "priority": "fallback",
-                        "implementation": MissingModelDecorator
-                    },
-                    {
-                        "provides": "typeService",
-                        "type": "provider",
-                        "implementation": TypeProvider,
-                        "depends": [
-                            "types[]"
-                        ]
-                    },
-                    {
-                        "provides": "actionService",
-                        "type": "provider",
-                        "implementation": ActionProvider,
-                        "depends": [
-                            "actions[]",
-                            "$log"
-                        ]
-                    },
-                    {
-                        "provides": "actionService",
-                        "type": "aggregator",
-                        "implementation": ActionAggregator
-                    },
-                    {
-                        "provides": "actionService",
-                        "type": "decorator",
-                        "implementation": LoggingActionDecorator,
-                        "depends": [
-                            "$log"
-                        ]
-                    },
-                    {
-                        "provides": "viewService",
-                        "type": "provider",
-                        "implementation": ViewProvider,
-                        "depends": [
-                            "views[]",
-                            "$log"
-                        ]
-                    },
-                    {
-                        "provides": "identifierService",
-                        "type": "provider",
-                        "implementation": IdentifierProvider,
-                        "depends": [
-                            "PERSISTENCE_SPACE"
-                        ]
-                    }
-                ],
-                "types": [
-                    {
-                        "properties": [
-                            {
-                                "control": "textfield",
-                                "name": "Title",
-                                "key": "name",
-                                "property": "name",
-                                "pattern": "\\S+",
-                                "required": true,
-                                "cssClass": "l-input-lg"
-                            },
-                            {
-                                "name": "Notes",
-                                "key": "notes",
-                                "property": "notes",
-                                "control": "textarea",
-                                "required": false,
-                                "cssClass": "l-textarea-sm"
-                            }
-                        ]
-                    },
-                    {
-                        "key": "root",
-                        "name": "Root",
-                        "cssClass": "icon-folder"
-                    },
-                    {
-                        "key": "folder",
-                        "name": "Folder",
-                        "cssClass": "icon-folder",
-                        "features": "creation",
-                        "description": "Create folders to organize other objects or links to objects.",
-                        "priority": 1000,
-                        "model": {
-                            "composition": []
-                        }
-                    },
-                    {
-                        "key": "unknown",
-                        "name": "Unknown Type",
-                        "cssClass": "icon-object-unknown"
-                    },
-                    {
-                        "name": "Unknown Type",
-                        "cssClass": "icon-object-unknown"
-                    }
-                ],
-                "capabilities": [
-                    {
-                        "key": "composition",
-                        "implementation": CompositionCapability,
-                        "depends": [
-                            "$injector"
-                        ]
-                    },
-                    {
-                        "key": "relationship",
-                        "implementation": RelationshipCapability,
-                        "depends": [
-                            "$injector"
-                        ]
-                    },
-                    {
-                        "key": "type",
-                        "implementation": TypeCapability,
-                        "depends": [
-                            "typeService"
-                        ]
-                    },
-                    {
-                        "key": "action",
-                        "implementation": ActionCapability,
-                        "depends": [
-                            "$q",
-                            "actionService"
-                        ]
-                    },
-                    {
-                        "key": "view",
-                        "implementation": ViewCapability,
-                        "depends": [
-                            "viewService"
-                        ]
-                    },
-                    {
-                        "key": "persistence",
-                        "implementation": PersistenceCapability,
-                        "depends": [
-                            "cacheService",
-                            "persistenceService",
-                            "identifierService",
-                            "notificationService",
-                            "$q",
-                            "openmct"
-                        ]
-                    },
-                    {
-                        "key": "metadata",
-                        "implementation": MetadataCapability
-                    },
-                    {
-                        "key": "mutation",
-                        "implementation": MutationCapability,
-                        "depends": [
-                            "topic",
-                            "now"
-                        ]
-                    },
-                    {
-                        "key": "delegation",
-                        "implementation": DelegationCapability,
-                        "depends": [
-                            "$q"
-                        ]
-                    },
-                    {
-                        "key": "instantiation",
-                        "implementation": InstantiationCapability,
-                        "depends": [
-                            "$injector",
-                            "identifierService",
-                            "now"
-                        ]
-                    }
-                ],
-                "services": [
-                    {
-                        "key": "cacheService",
-                        "implementation": ModelCacheService
-                    },
-                    {
-                        "key": "now",
-                        "implementation": Now
-                    },
-                    {
-                        "key": "throttle",
-                        "implementation": Throttle,
-                        "depends": [
-                            "$timeout"
-                        ]
-                    },
-                    {
-                        "key": "topic",
-                        "implementation": Topic,
-                        "depends": [
-                            "$log"
-                        ]
-                    },
-                    {
-                        "key": "instantiate",
-                        "implementation": Instantiate,
-                        "depends": [
-                            "capabilityService",
-                            "identifierService",
-                            "cacheService"
-                        ]
-                    }
-                ],
-                "runs": [
-                    {
-                        "implementation": TransactingMutationListener,
-                        "depends": ["topic", "transactionService", "cacheService"]
-                    }
-                ],
-                "constants": [
-                    {
-                        "key": "PERSISTENCE_SPACE",
-                        "value": "mct"
-                    }
-                ],
-                "licenses": [
-                    {
-                        "name": "Math.uuid.js",
-                        "version": "1.4.7",
-                        "description": "Unique identifer generation (code adapted.)",
-                        "author": "Robert Kieffer",
-                        "website": "https://github.com/broofa/node-uuid",
-                        "copyright": "Copyright (c) 2010-2012 Robert Kieffer",
-                        "license": "license-mit",
-                        "link": "http://opensource.org/licenses/MIT"
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/core/src/actions/ActionAggregator.js b/platform/core/src/actions/ActionAggregator.js
deleted file mode 100644
index 7d664f009a8..00000000000
--- a/platform/core/src/actions/ActionAggregator.js
+++ /dev/null
@@ -1,124 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    function () {
-
-        /**
-         * Actions are reusable processes/behaviors performed by users within
-         * the system, typically upon domain objects. Actions are commonly
-         * exposed to users as menu items or buttons.
-         *
-         * Actions are usually registered via the `actions` extension
-         * category, or (in advanced cases) via an `actionService`
-         * implementation.
-         *
-         * @interface Action
-         */
-
-        /**
-         * Perform the behavior associated with this action. The return type
-         * may vary depending on which action has been performed; in general,
-         * no return value should be expected.
-         *
-         * @method Action#perform
-         */
-
-        /**
-         * Get metadata associated with this action.
-         *
-         * @method Action#getMetadata
-         * @returns {ActionMetadata}
-         */
-
-        /**
-         * Metadata associated with an Action. Actions of specific types may
-         * extend this with additional properties.
-         *
-         * @typedef {Object} ActionMetadata
-         * @property {string} key machine-readable identifier for this action
-         * @property {string} name human-readable name for this action
-         * @property {string} description human-readable description
-         * @property {string} cssClass CSS class for icon
-         * @property {ActionContext} context the context in which the action
-         *           will be performed.
-         */
-
-        /**
-         * Provides actions that can be performed within specific contexts.
-         *
-         * @interface ActionService
-         */
-
-        /**
-         * Get actions which can be performed within a certain context.
-         *
-         * @method ActionService#getActions
-         * @param {ActionContext} context the context in which the action will
-         *        be performed
-         * @return {Action[]} relevant actions
-         */
-
-        /**
-         * A description of the context in which an action may occur.
-         *
-         * @typedef ActionContext
-         * @property {DomainObject} [domainObject] the domain object being
-         *           acted upon.
-         * @property {DomainObject} [selectedObject] the selection at the
-         *           time of action (e.g. the dragged object in a
-         *           drag-and-drop operation.)
-         * @property {string} [key] the machine-readable identifier of
-         *           the relevant action
-         * @property {string} [category] a string identifying the category
-         *           of action being performed
-         */
-
-        /**
-         * The ActionAggregator makes several actionService
-         * instances act as those they were one. When requesting
-         * actions for a given context, results from all
-         * services will be assembled and concatenated.
-         *
-         * @memberof platform/core
-         * @constructor
-         * @implements {ActionService}
-         * @param {ActionService[]} actionProviders an array
-         *        of action services
-         */
-        function ActionAggregator(actionProviders) {
-            this.actionProviders = actionProviders;
-        }
-
-        ActionAggregator.prototype.getActions = function (context) {
-            // Get all actions from all providers, reduce down
-            // to one array by concatenation
-            return this.actionProviders.map(function (provider) {
-                return provider.getActions(context);
-            }).reduce(function (a, b) {
-                return a.concat(b);
-            }, []);
-        };
-
-        return ActionAggregator;
-    }
-);
diff --git a/platform/core/src/actions/ActionCapability.js b/platform/core/src/actions/ActionCapability.js
deleted file mode 100644
index 09a51ee030e..00000000000
--- a/platform/core/src/actions/ActionCapability.js
+++ /dev/null
@@ -1,119 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining ActionCapability. Created by vwoeltje on 11/10/14.
- */
-define(
-    ['lodash'],
-    function (_) {
-
-        /**
-         * The ActionCapability allows applicable Actions to be retrieved and
-         * performed for specific domain objects, e.g.:
-         *
-         * `domainObject.getCapability("action").perform("navigate");`
-         *
-         * ...will initiate a navigate action upon the domain object,
-         * if an action with key "navigate" is defined.
-         *
-         * @param {*} $q Angular's $q service, for promises
-         * @param {ActionService} actionService the service from
-         *        which to retrieve actions.
-         * @param {DomainObject} domainObject the object upon
-         *        which the action will be performed (also, the
-         *        action which exposes the capability.)
-         *
-         * @memberof platform/core
-         * @constructor
-         */
-        function ActionCapability($q, actionService, domainObject) {
-            this.$q = $q;
-            this.actionService = actionService;
-            this.domainObject = domainObject;
-        }
-
-        /**
-         * Perform an action. This will find and perform the
-         * first matching action available for the specified
-         * context or key.
-         *
-         * @param {ActionContext|string} context the context in which
-         *       to perform the action; this is passed along to
-         *       the action service to match against available
-         *       actions. The "domainObject" field will automatically
-         *       be populated with the domain object that exposed
-         *       this capability. If given as a string, this will
-         *       be taken as the "key" field to match against
-         *       specific actions.
-         * @returns {Promise} the result of the action that was
-         *       performed, or undefined if no matching action
-         *       was found.
-         * @memberof platform/core.ActionCapability#
-         */
-        ActionCapability.prototype.getActions = function (context) {
-            // Get all actions which are valid in this context;
-            // this simply redirects to the action service,
-            // but additionally adds a domainObject field.
-            var baseContext;
-            if (typeof context === 'string') {
-                baseContext = { key: context };
-            } else {
-                baseContext = context || {};
-            }
-
-            var actionContext = Object.assign({}, baseContext);
-            actionContext.domainObject = this.domainObject;
-
-            return this.actionService.getActions(actionContext);
-        };
-
-        /**
-         * Get actions which are available for this domain object,
-         * in this context.
-         *
-         * @param {ActionContext|string} context the context in which
-         *       to perform the action; this is passed along to
-         *       the action service to match against available
-         *       actions. The "domainObject" field will automatically
-         *       be populated with the domain object that exposed
-         *       this capability. If given as a string, this will
-         *       be taken as the "key" field to match against
-         *       specific actions.
-         * @returns {Action[]} an array of matching actions
-         * @memberof platform/core.ActionCapability#
-         */
-        ActionCapability.prototype.perform = function (context, flag) {
-            // Alias to getActions(context)[0].perform, with a
-            // check for empty arrays.
-            var actions = this.getActions(context);
-
-            return this.$q.when(
-                (actions && actions.length > 0)
-                    ? actions[0].perform(flag)
-                    : undefined
-            );
-        };
-
-        return ActionCapability;
-    }
-);
diff --git a/platform/core/src/actions/ActionProvider.js b/platform/core/src/actions/ActionProvider.js
deleted file mode 100644
index 6aa7a06f0b3..00000000000
--- a/platform/core/src/actions/ActionProvider.js
+++ /dev/null
@@ -1,157 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining ActionProvider. Created by vwoeltje on 11/7/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * An ActionProvider (implementing ActionService) provides actions
-         * that are applicable in specific contexts, chosen from a set
-         * of actions exposed via extension (specifically, the "actions"
-         * category of extension.)
-         *
-         * @memberof platform/core
-         * @imeplements {ActionService}
-         * @constructor
-         */
-        function ActionProvider(actions, $log) {
-            var self = this;
-
-            this.$log = $log;
-
-            // Build up look-up tables
-            this.actions = actions;
-            this.actionsByKey = {};
-            this.actionsByCategory = {};
-            actions.forEach(function (Action) {
-                // Get an action's category or categories
-                var categories = Action.category || [];
-
-                // Convert to an array if necessary
-                categories = Array.isArray(categories)
-                    ? categories : [categories];
-
-                // Store action under all relevant categories
-                categories.forEach(function (category) {
-                    self.actionsByCategory[category] =
-                        self.actionsByCategory[category] || [];
-                    self.actionsByCategory[category].push(Action);
-                });
-
-                // Store action by ekey as well
-                if (Action.key) {
-                    self.actionsByKey[Action.key] =
-                        self.actionsByKey[Action.key] || [];
-                    self.actionsByKey[Action.key].push(Action);
-                }
-            });
-        }
-
-        ActionProvider.prototype.getActions = function (actionContext) {
-            var context = (actionContext || {}),
-                category = context.category,
-                key = context.key,
-                $log = this.$log,
-                candidates;
-
-            // Instantiate an action; invokes the constructor and
-            // additionally fills in the action's getMetadata method
-            // with the extension definition (if no getMetadata
-            // method was supplied.)
-            function instantiateAction(Action, ctxt) {
-                var action = new Action(ctxt),
-                    metadata;
-
-                // Provide a getMetadata method that echos
-                // declarative bindings, as well as context,
-                // unless the action has defined its own.
-                if (!action.getMetadata) {
-                    metadata = Object.create(Action.definition || {});
-                    metadata.context = ctxt;
-                    action.getMetadata = function () {
-                        return metadata;
-                    };
-                }
-
-                return action;
-            }
-
-            // Filter the array of actions down to those which are
-            // applicable in a given context, according to the static
-            // appliesTo method of given actions (if defined), and
-            // instantiate those applicable actions.
-            function createIfApplicable(actions, ctxt) {
-                function isApplicable(Action) {
-                    return Action.appliesTo ? Action.appliesTo(ctxt) : true;
-                }
-
-                function instantiate(Action) {
-                    try {
-                        return instantiateAction(Action, ctxt);
-                    } catch (e) {
-                        $log.error([
-                            "Could not instantiate action",
-                            Action.key,
-                            "due to:",
-                            e.message
-                        ].join(" "));
-
-                        return undefined;
-                    }
-                }
-
-                function isDefined(action) {
-                    return action !== undefined;
-                }
-
-                return (actions || []).filter(isApplicable)
-                    .map(instantiate)
-                    .filter(isDefined);
-            }
-
-            // Match actions to the provided context by comparing "key"
-            // and/or "category" parameters, if specified.
-            candidates = this.actions;
-            if (key) {
-                candidates = this.actionsByKey[key];
-                if (category) {
-                    candidates = candidates.filter(function (Action) {
-                        return Action.category === category;
-                    });
-                }
-            } else if (category) {
-                candidates = this.actionsByCategory[category];
-            }
-
-            // Instantiate those remaining actions, with additional
-            // filtering per any appliesTo methods defined on those
-            // actions.
-            return createIfApplicable(candidates, context);
-        };
-
-        return ActionProvider;
-    }
-);
diff --git a/platform/core/src/actions/LoggingActionDecorator.js b/platform/core/src/actions/LoggingActionDecorator.js
deleted file mode 100644
index 5d4d1bd4ad5..00000000000
--- a/platform/core/src/actions/LoggingActionDecorator.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining LoggingActionDecorator. Created by vwoeltje on 11/17/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * The LoggingActionDecorator decorates an ActionService such that
-         * the actions it exposes always emit a log message when they are
-         * performed.
-         *
-         * @memberof platform/core
-         * @constructor
-         * @implements {ActionService}
-         * @param $log Angular's logging service
-         * @param {ActionService} actionService the decorated action service
-         */
-        function LoggingActionDecorator($log, actionService) {
-            this.$log = $log;
-            this.actionService = actionService;
-        }
-
-        LoggingActionDecorator.prototype.getActions = function () {
-            var actionService = this.actionService,
-                $log = this.$log;
-
-            // Decorate the perform method of the specified action, such that
-            // it emits a log message whenever performed.
-            function addLogging(action) {
-                var logAction = Object.create(action),
-                    metadata = action.getMetadata() || {},
-                    context = metadata.context || {},
-                    domainObject = context.domainObject;
-
-                logAction.perform = function () {
-                    $log.info([
-                        "Performing action ",
-                        metadata.key,
-                        " upon ",
-                        domainObject && domainObject.getId()
-                    ].join(""));
-
-                    return action.perform.apply(action, arguments);
-                };
-
-                return logAction;
-            }
-
-            return actionService.getActions.apply(
-                actionService,
-                arguments
-            ).map(addLogging);
-        };
-
-        return LoggingActionDecorator;
-    }
-);
diff --git a/platform/core/src/capabilities/CompositionCapability.js b/platform/core/src/capabilities/CompositionCapability.js
deleted file mode 100644
index 9b432a6f2c2..00000000000
--- a/platform/core/src/capabilities/CompositionCapability.js
+++ /dev/null
@@ -1,162 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining CompositionCapability. Created by vwoeltje on 11/7/14.
- */
-define(
-    ['./ContextualDomainObject'],
-    function (ContextualDomainObject) {
-
-        /**
-         * Composition capability. A domain object's composition is the set of
-         * domain objects it contains. This is available as an array of
-         * identifiers in the model; the composition capability makes this
-         * available as an array of domain object instances, which may
-         * require consulting the object service (e.g. to trigger a database
-         * query to retrieve the nested object models.)
-         *
-         * @memberof platform/core
-         * @constructor
-         * @implements {Capability}
-         */
-        function CompositionCapability($injector, domainObject) {
-            // Get a reference to the object service from $injector
-            this.injectObjectService = function () {
-                this.objectService = $injector.get("objectService");
-            };
-
-            this.domainObject = domainObject;
-        }
-
-        /**
-         * Add a domain object to the composition of this domain object.
-         *
-         * If no index is given, this is added to the end of the composition.
-         *
-         * @param {DomainObject|string} domainObject the domain object to add,
-         *        or simply its identifier
-         * @param {number} [index] the index at which to add the object
-         * @returns {Promise.<DomainObject>} a promise for the added object
-         *          in its new context
-         */
-        CompositionCapability.prototype.add = function (domainObject, index) {
-            var self = this,
-                id = typeof domainObject === 'string'
-                    ? domainObject : domainObject.getId(),
-                model = self.domainObject.getModel(),
-                composition = model.composition,
-                oldIndex = composition.indexOf(id);
-
-            // Find the object with the above id, used to contextualize
-            function findObject(objects) {
-                var i;
-                for (i = 0; i < objects.length; i += 1) {
-                    if (objects[i].getId() === id) {
-                        return objects[i];
-                    }
-                }
-            }
-
-            function contextualize(mutationResult) {
-                return mutationResult && self.invoke().then(findObject);
-            }
-
-            function addIdToModel(objModel) {
-                // Pick a specific index if needed.
-                index = isNaN(index) ? composition.length : index;
-                // Also, don't put past the end of the array
-                index = Math.min(composition.length, index);
-
-                // Remove the existing instance of the id
-                if (oldIndex !== -1) {
-                    objModel.composition.splice(oldIndex, 1);
-                }
-
-                // ...and add it back at the appropriate index.
-                objModel.composition.splice(index, 0, id);
-            }
-
-            // If no index has been specified already and the id is already
-            // present, nothing to do. If the id is already at that index,
-            // also nothing to do, so cancel mutation.
-            if ((isNaN(index) && oldIndex !== -1) || (index === oldIndex)) {
-                return contextualize(true);
-            }
-
-            return this.domainObject.useCapability('mutation', addIdToModel)
-                .then(contextualize);
-        };
-
-        /**
-         * Request the composition of this object.
-         * @returns {Promise.<DomainObject[]>} a list of all domain
-         *     objects which compose this domain object.
-         */
-        CompositionCapability.prototype.invoke = function () {
-            var domainObject = this.domainObject,
-                model = domainObject.getModel(),
-                ids;
-
-            // Then filter out non-existent objects,
-            // and wrap others (such that they expose a
-            // "context" capability)
-            function contextualizeObjects(objects) {
-                return ids.filter(function (id) {
-                    return objects[id];
-                }).map(function (id) {
-                    return new ContextualDomainObject(objects[id], domainObject);
-                });
-            }
-
-            // Lazily acquire object service (avoids cyclical dependency)
-            if (!this.objectService) {
-                this.injectObjectService();
-            }
-
-            // Make a new request if we haven't made one, or if the
-            // object has been modified.
-            if (!this.lastPromise || this.lastModified !== model.modified) {
-                ids = model.composition || [];
-                this.lastModified = model.modified;
-                // Load from the underlying object service
-                this.lastPromise = this.objectService.getObjects(ids)
-                    .then(contextualizeObjects);
-            }
-
-            return this.lastPromise;
-        };
-
-        /**
-         * Test to determine whether or not this capability should be exposed
-         * by a domain object based on its model. Checks for the presence of
-         * a composition field, that must be an array.
-         * @param model the domain object model
-         * @returns {boolean} true if this object has a composition
-         */
-        CompositionCapability.appliesTo = function (model) {
-            return Array.isArray((model || {}).composition);
-        };
-
-        return CompositionCapability;
-    }
-);
diff --git a/platform/core/src/capabilities/ContextCapability.js b/platform/core/src/capabilities/ContextCapability.js
deleted file mode 100644
index 16857e5f5cc..00000000000
--- a/platform/core/src/capabilities/ContextCapability.js
+++ /dev/null
@@ -1,111 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining ContextCapability. Created by vwoeltje on 11/17/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * The `context` capability of a domain object (retrievable with
-         * `domainObject.getCapability("context")`) allows an object's
-         * hierarchical parents and ancestors to be retrieved (specifically,
-         * those whose `composition` capability was used to access this
-         * object.)
-         *
-         * @memberof platform/core
-         * @constructor
-         * @implements {Capability}
-         */
-        function ContextCapability(parentObject, domainObject) {
-            this.parentObject = parentObject;
-            this.domainObject = domainObject;
-        }
-
-        /**
-         * Get the immediate parent of a domain object.
-         *
-         * A domain object may be contained in multiple places; its
-         * parent (as exposed by this capability) is the domain
-         * object from which this object was accessed, usually
-         * by way of a `composition` capability.
-         *
-         * @returns {DomainObject} the immediate parent of this
-         *          domain object.
-         */
-        ContextCapability.prototype.getParent = function () {
-            return this.parentObject;
-        };
-
-        /**
-         * Get an array containing the complete direct ancestry
-         * of this domain object, including the domain object
-         * itself.
-         *
-         * A domain object may be contained in multiple places; its
-         * parent and all ancestors (as exposed by this capability)
-         * serve as a record of how this specific domain object
-         * instance was reached.
-         *
-         * The first element in the returned array is the deepest
-         * ancestor; subsequent elements are progressively more
-         * recent ancestors, with the domain object which exposed
-         * the capability occupying the last element of the array.
-         *
-         * @returns {DomainObject[]} the full composition ancestry
-         *          of the domain object which exposed this
-         *          capability.
-         */
-        ContextCapability.prototype.getPath = function () {
-            var parentObject = this.parentObject,
-                parentContext =
-                    parentObject && parentObject.getCapability('context'),
-                parentPath = parentContext
-                    ? parentContext.getPath() : [this.parentObject];
-
-            return parentPath.concat([this.domainObject]);
-        };
-
-        /**
-         * Get the deepest ancestor available for this domain object;
-         * equivalent to `getPath()[0]`.
-         *
-         * See notes on `getPath()` for how ancestry is defined in
-         * the context of this capability.
-         *
-         * @returns {DomainObject} the deepest ancestor of the domain
-         *          object which exposed this capability.
-         */
-        ContextCapability.prototype.getRoot = function () {
-            var parentContext = this.parentObject
-                && this.parentObject.getCapability('context');
-
-            return parentContext
-                ? parentContext.getRoot()
-                : (this.parentObject || this.domainObject);
-        };
-
-        return ContextCapability;
-    }
-);
diff --git a/platform/core/src/capabilities/ContextualDomainObject.js b/platform/core/src/capabilities/ContextualDomainObject.js
deleted file mode 100644
index 7e5eb50ac35..00000000000
--- a/platform/core/src/capabilities/ContextualDomainObject.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining ContextualDomainObject. Created by vwoeltje on 11/18/14.
- */
-define(
-    ["./ContextCapability"],
-    function (ContextCapability) {
-
-        /**
-         * Wraps a domain object, such that it exposes a `context` capability.
-         * A domain object may be contained by multiple other domain objects;
-         * the `context` capability allows two instances of the same domain
-         * object to be distinguished from one another based on which
-         * specific instance of a containing object exposed them (by way of a
-         * `composition` capability.)
-         *
-         * @param {DomainObject} domainObject the domain object for which
-         *        context should be exposed
-         * @param {DomainObject} parentObject the domain object from which
-         *        the wrapped object was retrieved
-         *
-         * @memberof platform/core
-         * @constructor
-         * @implements {DomainObject}
-         */
-        function ContextualDomainObject(domainObject, parentObject) {
-            // Prototypally inherit from the domain object, and
-            // instantiate its context capability ahead of time.
-            var contextualObject = Object.create(domainObject),
-                contextCapability =
-                    new ContextCapability(parentObject, domainObject);
-
-            // Intercept requests for a context capability.
-            contextualObject.getCapability = function (name) {
-                return name === "context"
-                    ? contextCapability
-                    : domainObject.getCapability.apply(this, arguments);
-            };
-
-            return contextualObject;
-        }
-
-        return ContextualDomainObject;
-    }
-);
diff --git a/platform/core/src/capabilities/CoreCapabilityProvider.js b/platform/core/src/capabilities/CoreCapabilityProvider.js
deleted file mode 100644
index 5c9385561a1..00000000000
--- a/platform/core/src/capabilities/CoreCapabilityProvider.js
+++ /dev/null
@@ -1,110 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining CoreCapabilityProvider. Created by vwoeltje on 11/7/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * A capability provides an interface with dealing with some
-         * dynamic behavior associated with a domain object.
-         * @interface Capability
-         */
-
-        /**
-         * Optional; if present, will be used by `DomainObject#useCapability`
-         * to simplify interaction with a specific capability. Parameters
-         * and return values vary depending on capability type.
-         * @method Capability#invoke
-         */
-
-        /**
-         * Provides capabilities based on extension definitions,
-         * matched to domain object models.
-         *
-         * @param {Array.<function(DomainObject) : Capability>} an array
-         *        of constructor functions for capabilities, as
-         *        exposed by extensions defined at the bundle level.
-         *
-         * @memberof platform/core
-         * @constructor
-         */
-        function CoreCapabilityProvider(capabilities, $log) {
-            // Filter by invoking the capability's appliesTo method
-            function filterCapabilities(model, id) {
-                return capabilities.filter(function (capability) {
-                    return capability.appliesTo
-                        ? capability.appliesTo(model, id)
-                        : true;
-                });
-            }
-
-            // Package capabilities as key-value pairs
-            function packageCapabilities(caps) {
-                var result = {};
-                caps.forEach(function (capability) {
-                    if (capability.key) {
-                        result[capability.key] =
-                            result[capability.key] || capability;
-                    } else {
-                        $log.warn("No key defined for capability; skipping.");
-                    }
-                });
-
-                return result;
-            }
-
-            function getCapabilities(model, id) {
-                return packageCapabilities(filterCapabilities(model, id));
-            }
-
-            return {
-                /**
-                 * Get all capabilities associated with a given domain
-                 * object.
-                 *
-                 * This returns a promise for an object containing key-value
-                 * pairs, where keys are capability names and values are
-                 * either:
-                 *
-                 * * Capability instances
-                 * * Capability constructors (which take a domain object
-                 *   as their argument.)
-                 *
-                 *
-                 * @param {*} model the object model
-                 * @returns {Object.<string,function|Capability>} all
-                 *     capabilities known to be valid for this model, as
-                 *     key-value pairs
-                 * @memberof platform/core.CoreCapabilityProvider#
-                 */
-                getCapabilities: getCapabilities
-            };
-        }
-
-        return CoreCapabilityProvider;
-    }
-);
-
diff --git a/platform/core/src/capabilities/DelegationCapability.js b/platform/core/src/capabilities/DelegationCapability.js
deleted file mode 100644
index 61f652f6a38..00000000000
--- a/platform/core/src/capabilities/DelegationCapability.js
+++ /dev/null
@@ -1,129 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining DelegationCapability. Created by vwoeltje on 11/18/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * The `delegation` capability allows a domain object to indicate
-         * that it wishes to delegate responsibility for some other
-         * capability to some other domain objects.
-         *
-         * This is specifically useful in the case of telemetry panels,
-         * which delegate responsibility for the `telemetry` capability
-         * to their contained objects.
-         *
-         * A type of domain object may indicate that it wishes to delegate
-         * responsibility for one or more capabilities to the members of
-         * its composition; this is done by included a `delegates` field
-         * in the type's definition, which contains an array of names of
-         * capabilities to be delegated.
-         *
-         * @param $q Angular's $q, for promises
-         * @param {DomainObject} domainObject the delegating domain object
-         * @memberof platform/core
-         * @constructor
-         * @implements {Capability}
-         */
-        function DelegationCapability($q, domainObject) {
-            var type = domainObject.getCapability("type"),
-                self = this;
-
-            this.$q = $q;
-            this.delegateCapabilities = {};
-            this.domainObject = domainObject;
-
-            // Generate set for easy lookup of capability delegation
-            if (type && type.getDefinition) {
-                (type.getDefinition().delegates || []).forEach(function (key) {
-                    self.delegateCapabilities[key] = true;
-                });
-            }
-        }
-
-        /**
-         * Get the domain objects which are intended to be delegated
-         * responsibility for some specific capability.
-         *
-         * @param {string} key the name of the delegated capability
-         * @returns {DomainObject[]} the domain objects to which
-         *          responsibility for this capability is delegated.
-         * @memberof platform/core.DelegationCapability#
-         */
-        DelegationCapability.prototype.getDelegates = function (key) {
-            var domainObject = this.domainObject;
-
-            function filterObjectsWithCapability(capability) {
-                return function (objects) {
-                    return objects.filter(function (obj) {
-                        return obj.hasCapability(capability);
-                    });
-                };
-            }
-
-            function promiseChildren() {
-                return domainObject.useCapability('composition');
-            }
-
-            return this.doesDelegateCapability(key)
-                ? promiseChildren().then(
-                    filterObjectsWithCapability(key)
-                )
-                : this.$q.when([]);
-        };
-
-        /**
-         * Check if the domain object which exposed this capability
-         * wishes to delegate another capability.
-         *
-         * @param {string} key the capability to check for
-         * @returns {boolean} true if the capability is delegated
-         */
-        DelegationCapability.prototype.doesDelegateCapability = function (key) {
-            return Boolean(this.delegateCapabilities[key]);
-        };
-
-        /**
-         * Invoke this capability; alias of `getDelegates`, used to
-         * simplify usage, e.g.:
-         *
-         * `domainObject.useCapability("delegation", "telemetry")`
-         *
-         * ...will retrieve all members of a domain object's
-         * composition which have a "telemetry" capability.
-         *
-         * @param {string} the name of the delegated capability
-         * @returns {DomainObject[]} the domain objects to which
-         *          responsibility for this capability is delegated.
-         * @memberof platform/core.DelegationCapability#
-         */
-        DelegationCapability.prototype.invoke =
-            DelegationCapability.prototype.getDelegates;
-
-        return DelegationCapability;
-
-    }
-);
diff --git a/platform/core/src/capabilities/InstantiationCapability.js b/platform/core/src/capabilities/InstantiationCapability.js
deleted file mode 100644
index f8592f6133b..00000000000
--- a/platform/core/src/capabilities/InstantiationCapability.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['./ContextualDomainObject'],
-    function (ContextualDomainObject) {
-
-        /**
-         * Implements the `instantiation` capability. This allows new domain
-         * objects to be instantiated.
-         *
-         * @constructor
-         * @memberof platform/core
-         * @param $injector Angular's `$injector`
-         * @implements {Capability}
-         */
-        function InstantiationCapability(
-            $injector,
-            identifierService,
-            now,
-            domainObject
-        ) {
-            this.$injector = $injector;
-            this.identifierService = identifierService;
-            this.domainObject = domainObject;
-            this.now = now;
-        }
-
-        /**
-         * Instantiate a new domain object with the provided model.
-         *
-         * This domain object will have been simply instantiated; it will not
-         * have been persisted, nor will it have been added to the
-         * composition of the object which exposed this capability.
-         *
-         * @param {object} the model for the new domain object
-         * @returns {DomainObject} the new domain object
-         */
-        InstantiationCapability.prototype.instantiate = function (model) {
-            var parsedId =
-                    this.identifierService.parse(this.domainObject.getId()),
-                space = parsedId.getDefinedSpace(),
-                id = this.identifierService.generate(space);
-
-            model.modified = this.now();
-
-            // Lazily initialize; instantiate depends on capabilityService,
-            // which depends on all capabilities, including this one.
-            this.instantiateFn = this.instantiateFn
-                || this.$injector.get("instantiate");
-
-            var newObject = this.instantiateFn(model, id);
-
-            return new ContextualDomainObject(newObject, this.domainObject);
-        };
-
-        /**
-         * Alias of `instantiate`.
-         * @see {platform/core.CreationCapability#instantiate}
-         */
-        InstantiationCapability.prototype.invoke =
-            InstantiationCapability.prototype.instantiate;
-
-        return InstantiationCapability;
-    }
-);
diff --git a/platform/core/src/capabilities/MetadataCapability.js b/platform/core/src/capabilities/MetadataCapability.js
deleted file mode 100644
index fa8f93516b9..00000000000
--- a/platform/core/src/capabilities/MetadataCapability.js
+++ /dev/null
@@ -1,92 +0,0 @@
-
-define(
-    ['moment'],
-    function (moment) {
-
-        /**
-         * A piece of information about a domain object.
-         * @typedef {Object} MetadataProperty
-         * @property {string} name the human-readable name of this property
-         * @property {string} value the human-readable value of this property,
-         *           for this specific domain object
-         */
-
-        var TIME_FORMAT = "YYYY-MM-DD HH:mm:ss";
-
-        /**
-         * Implements the `metadata` capability of a domain object, providing
-         * properties of that object for display.
-         *
-         * Usage: `domainObject.useCapability("metadata")`
-         *
-         * ...which will return an array of objects containing `name` and
-         * `value` properties describing that domain object (suitable for
-         * display.)
-         *
-         * @param {DomainObject} domainObject the domain object whose
-         *        metadata is to be exposed
-         * @implements {Capability}
-         * @constructor
-         * @memberof platform/core
-         */
-        function MetadataCapability(domainObject) {
-            this.domainObject = domainObject;
-        }
-
-        /**
-         * Get metadata about this object.
-         * @returns {MetadataProperty[]} metadata about this object
-         */
-        MetadataCapability.prototype.invoke = function () {
-            var domainObject = this.domainObject,
-                model = domainObject.getModel();
-
-            function hasDisplayableValue(metadataProperty) {
-                var t = typeof metadataProperty.value;
-
-                return (t === 'string' || t === 'number');
-            }
-
-            function formatTimestamp(timestamp) {
-                return typeof timestamp === 'number'
-                    ? (moment.utc(timestamp).format(TIME_FORMAT) + " UTC")
-                    : undefined;
-            }
-
-            function getProperties() {
-                var type = domainObject.getCapability('type');
-
-                function lookupProperty(typeProperty) {
-                    return {
-                        name: typeProperty.getDefinition().name,
-                        value: typeProperty.getValue(model)
-                    };
-                }
-
-                return (type ? type.getProperties() : []).map(lookupProperty);
-            }
-
-            function getCommonMetadata() {
-                var type = domainObject.getCapability('type');
-
-                // Note that invalid values will be filtered out later
-                return [
-                    {
-                        name: "Updated",
-                        value: formatTimestamp(model.modified)
-                    },
-                    {
-                        name: "Type",
-                        value: type && type.getName()
-                    }
-                ];
-            }
-
-            return getProperties().concat(getCommonMetadata())
-                .filter(hasDisplayableValue);
-        };
-
-        return MetadataCapability;
-    }
-);
-
diff --git a/platform/core/src/capabilities/MutationCapability.js b/platform/core/src/capabilities/MutationCapability.js
deleted file mode 100644
index 62e82c27f02..00000000000
--- a/platform/core/src/capabilities/MutationCapability.js
+++ /dev/null
@@ -1,189 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining MutationCapability. Created by vwoeltje on 11/12/14.
- */
-define(
-    [],
-    function () {
-
-        var GENERAL_TOPIC = "mutation",
-            TOPIC_PREFIX = "mutation:";
-
-        // Utility function to overwrite a destination object
-        // with the contents of a source object.
-        function copyValues(destination, source) {
-            // First, remove all previously-existing keys
-            Object.keys(destination).forEach(function (k) {
-                delete destination[k];
-            });
-            // Second, write all new keys
-            Object.keys(source).forEach(function (k) {
-                destination[k] = source[k];
-            });
-        }
-
-        // Utility function to cast to a promise, without waiting
-        // for nextTick if a value is non-promise-like.
-        function fastPromise(value) {
-            return (value || {}).then ? value : {
-                then: function (callback) {
-                    return fastPromise(callback(value));
-                }
-            };
-        }
-
-        /**
-         * The `mutation` capability allows a domain object's model to be
-         * modified. Wrapping such modifications in calls made through
-         * this capability allows these changes to be tracked (e.g. to
-         * ensure that a domain object's `modified` timestamp is kept
-         * up-to-date.)
-         *
-         * Usage:
-         *
-         * ```
-         * domainObject.useCapability("mutation", function (model) {
-         *     // make changes to model here...
-         * });
-         * ```
-         *
-         * @param {Function} topic a service for creating listeners
-         * @param {Function} now a service to get the current time
-         * @param {DomainObject} domainObject the domain object
-         *        which will expose this capability
-         * @memberof platform/core
-         * @constructor
-         * @implements {Capability}
-         */
-        function MutationCapability(topic, now, domainObject) {
-            this.generalMutationTopic =
-                topic(GENERAL_TOPIC);
-            this.specificMutationTopic =
-                topic(TOPIC_PREFIX + domainObject.getId());
-
-            this.now = now;
-            this.domainObject = domainObject;
-        }
-
-        /**
-         * Modify the domain object's model, using a provided
-         * function. This function will receive a copy of the
-         * domain object's model as an argument; behavior
-         * varies depending on that function's return value:
-         *
-         * * If no value (or undefined) is returned by the mutator,
-         *   the state of the model object delivered as the mutator's
-         *   argument will become the domain object's new model.
-         *   This is useful for writing code that modifies the model
-         *   directly.
-         * * If a plain object is returned, that object will be used
-         *   as the domain object's new model.
-         * * If boolean `false` is returned, the mutation will be
-         *   cancelled.
-         * * If a promise is returned, its resolved value will be
-         *   handled as one of the above.
-         *
-         *
-         * @param  {Function} mutator the function which will make
-         *         changes to the domain object's model.
-         * @param  {number} [timestamp] timestamp to record for
-         *         this mutation (otherwise, system time will be
-         *         used)
-         * @returns {Promise.<boolean>} a promise for the result
-         *         of the mutation; true if changes were made.
-         */
-        MutationCapability.prototype.mutate = function (mutator, timestamp) {
-            // Get the object's model and clone it, so the
-            // mutator function has a temporary copy to work with.
-            var domainObject = this.domainObject,
-                now = this.now,
-                generalTopic = this.generalMutationTopic,
-                specificTopic = this.specificMutationTopic,
-                model = domainObject.getModel(),
-                clone = JSON.parse(JSON.stringify(model)),
-                useTimestamp = arguments.length > 1;
-
-            function notifyListeners(newModel) {
-                generalTopic.notify(domainObject);
-                specificTopic.notify(newModel);
-            }
-
-            // Function to handle copying values to the actual
-            function handleMutation(mutationResult) {
-                // If mutation result was undefined, just use
-                // the clone; this allows the mutator to omit return
-                // values and just change the model directly.
-                var result = mutationResult || clone;
-
-                // Allow mutators to change their mind by
-                // returning false.
-                if (mutationResult !== false) {
-                    // Copy values if result was a different object
-                    // (either our clone or some other new thing)
-                    let modelHasChanged = _.isEqual(model, result) === false;
-                    if (modelHasChanged) {
-                        copyValues(model, result);
-                    }
-
-                    if (modelHasChanged
-                        || (useTimestamp !== undefined)
-                        || (model.modified === undefined)) {
-                        model.modified = useTimestamp ? timestamp : now();
-                    }
-
-                    notifyListeners(model);
-                }
-
-                // Report the result of the mutation
-                return mutationResult !== false;
-            }
-
-            // Invoke the provided mutator, then make changes to
-            // the underlying model (if applicable.)
-            return fastPromise(mutator(clone)).then(handleMutation);
-        };
-
-        /**
-         * Listen for mutations of this domain object's model.
-         * The provided listener will be invoked with the domain
-         * object's new model after any changes. To stop listening,
-         * invoke the function returned by this method.
-         * @param {Function} listener function to call on mutation
-         * @returns {Function} a function to stop listening
-         * @memberof platform/core.MutationCapability#
-         */
-        MutationCapability.prototype.listen = function (listener) {
-            return this.specificMutationTopic.listen(listener);
-        };
-
-        /**
-         * Alias of `mutate`, used to support useCapability.
-         */
-        MutationCapability.prototype.invoke =
-            MutationCapability.prototype.mutate;
-
-        return MutationCapability;
-    }
-);
-
diff --git a/platform/core/src/capabilities/PersistenceCapability.js b/platform/core/src/capabilities/PersistenceCapability.js
deleted file mode 100644
index 64842a59584..00000000000
--- a/platform/core/src/capabilities/PersistenceCapability.js
+++ /dev/null
@@ -1,206 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(["objectUtils"],
-    function (objectUtils) {
-
-        /**
-         * Defines the `persistence` capability, used to trigger the
-         * writing of changes to a domain object to an underlying
-         * persistence store.
-         *
-         * @param {PersistenceService} persistenceService the underlying
-         *        provider of persistence capabilities.
-         * @param {string} space the name of the persistence space to
-         *        use (this is an arbitrary string, useful in principle
-         *        for distinguishing different persistence stores from
-         *        one another.)
-         * @param {DomainObject} the domain object which shall expose
-         *        this capability
-         *
-         * @memberof platform/core
-         * @constructor
-         * @implements {Capability}
-         */
-        function PersistenceCapability(
-            cacheService,
-            persistenceService,
-            identifierService,
-            notificationService,
-            $q,
-            openmct,
-            domainObject
-        ) {
-            // Cache modified timestamp
-            this.modified = domainObject.getModel().modified;
-
-            this.domainObject = domainObject;
-            this.cacheService = cacheService;
-            this.identifierService = identifierService;
-            this.persistenceService = persistenceService;
-            this.notificationService = notificationService;
-            this.$q = $q;
-            this.openmct = openmct;
-        }
-
-        /**
-         * Checks if the value returned is falsey, and if so returns a
-         * rejected promise
-         */
-        function rejectIfFalsey(value, $q) {
-            if (!value) {
-                return Promise.reject("Error persisting object");
-            } else {
-                return value;
-            }
-        }
-
-        function formatError(error) {
-            if (error && error.message) {
-                return error.message;
-            } else if (error && typeof error === "string") {
-                return error;
-            } else {
-                return "unknown error";
-            }
-        }
-
-        /**
-         * Display a notification message if an error has occurred during
-         * persistence.
-         */
-        function notifyOnError(error, domainObject, notificationService, $q) {
-            var errorMessage = "Unable to persist " + domainObject.getModel().name;
-            if (error) {
-                errorMessage += ": " + formatError(error);
-            }
-
-            notificationService.error({
-                title: "Error persisting " + domainObject.getModel().name,
-                hint: errorMessage,
-                dismissable: true
-            });
-
-            return Promise.reject(error);
-        }
-
-        /**
-         * Persist any changes which have been made to this
-         * domain object's model.
-         * @returns {Promise} a promise which will be resolved
-         *          if persistence is successful, and rejected
-         *          if not.
-         */
-        PersistenceCapability.prototype.persist = function () {
-            var self = this,
-                domainObject = this.domainObject;
-
-            const identifier = {
-                namespace: this.getSpace(),
-                key: this.getKey()
-            };
-
-            let newStyleObject = objectUtils.toNewFormat(domainObject.getModel(), identifier);
-
-            return this.openmct.objects
-                .save(newStyleObject)
-                .then(function (result) {
-                    return rejectIfFalsey(result, self.$q);
-                }).catch(function (error) {
-                    return notifyOnError(error, domainObject, self.notificationService, self.$q);
-                });
-        };
-
-        /**
-         * Update this domain object to match the latest from
-         * persistence.
-         * @returns {Promise} a promise which will be resolved
-         *          when the update is complete
-         */
-        PersistenceCapability.prototype.refresh = function () {
-            var domainObject = this.domainObject;
-            var $q = this.$q;
-
-            // Update a domain object's model upon refresh
-            function updateModel(model) {
-                if (model === undefined) {
-                    //Get failed, reject promise
-                    return $q.reject('Got empty object model');
-                } else {
-                    var modified = model.modified;
-
-                    return domainObject.useCapability("mutation", function () {
-                        return model;
-                    }, modified);
-
-                }
-            }
-
-            if (domainObject.getModel().persisted === undefined) {
-                return this.$q.when(true);
-            }
-
-            return this.persistenceService.readObject(
-                this.getSpace(),
-                this.getKey()
-            ).then(updateModel);
-        };
-
-        /**
-         * Get the space in which this domain object is persisted;
-         * this is useful when, for example, decided which space a
-         * newly-created domain object should be persisted to (by
-         * default, this should be the space of its containing
-         * object.)
-         *
-         * @returns {string} the name of the space which should
-         *          be used to persist this object
-         */
-        PersistenceCapability.prototype.getSpace = function () {
-            var id = this.domainObject.getId();
-
-            return this.identifierService.parse(id).getSpace();
-        };
-
-        /**
-         * Check if this domain object has been persisted at some
-         * point.
-         * @returns {boolean} true if the object has been persisted
-         */
-        PersistenceCapability.prototype.persisted = function () {
-            return this.domainObject.getModel().persisted !== undefined;
-        };
-
-        /**
-         * Get the key for this domain object in the given space.
-         *
-         * @returns {string} the key of the object in it's space.
-         */
-        PersistenceCapability.prototype.getKey = function () {
-            var id = this.domainObject.getId();
-
-            return this.identifierService.parse(id).getKey();
-        };
-
-        return PersistenceCapability;
-    }
-);
diff --git a/platform/core/src/capabilities/RelationshipCapability.js b/platform/core/src/capabilities/RelationshipCapability.js
deleted file mode 100644
index 4ab11e4c833..00000000000
--- a/platform/core/src/capabilities/RelationshipCapability.js
+++ /dev/null
@@ -1,128 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Relationship capability. Describes a domain objects relationship
-         * to other domain objects within the system, and provides a way to
-         * access related objects.
-         *
-         * For most cases, this is not the capability to use; the
-         * `composition` capability describes the more general relationship
-         * between objects typically seen (e.g. in the tree.) This capability
-         * is instead intended for the more unusual case of relationships
-         * which are not intended to appear in the tree, but are instead
-         * intended only for special, limited usage.
-         *
-         * @memberof platform/core
-         * @constructor
-         * @implements {Capability}
-         */
-        function RelationshipCapability($injector, domainObject) {
-            // Get a reference to the object service from $injector
-            this.injectObjectService = function () {
-                this.objectService = $injector.get("objectService");
-            };
-
-            this.lastPromise = {};
-            this.domainObject = domainObject;
-        }
-
-        /**
-         * List all types of relationships exposed by this
-         * object.
-         * @returns {string[]} a list of all relationship types
-         */
-        RelationshipCapability.prototype.listRelationships = function listRelationships() {
-            var relationships =
-                (this.domainObject.getModel() || {}).relationships || {};
-
-            // Check if this key really does expose an array of ids
-            // (to filter out malformed relationships)
-            function isArray(key) {
-                return Array.isArray(relationships[key]);
-            }
-
-            return Object.keys(relationships).filter(isArray).sort();
-        };
-
-        /**
-         * Request related objects, with a given relationship type.
-         * This will typically require asynchronous lookup, so this
-         * returns a promise.
-         * @param {string} key the type of relationship
-         * @returns {Promise.<DomainObject[]>} a promise for related
-         *          domain objects
-         */
-        RelationshipCapability.prototype.getRelatedObjects = function (key) {
-            var model = this.domainObject.getModel(),
-                ids;
-
-            // Package objects as an array
-            function packageObject(objects) {
-                return ids.map(function (id) {
-                    return objects[id];
-                }).filter(function (obj) {
-                    return obj;
-                });
-            }
-
-            // Clear cached promises if modification has occurred
-            if (this.lastModified !== model.modified) {
-                this.lastPromise = {};
-                this.lastModified = model.modified;
-            }
-
-            // Make a new request if needed
-            if (!this.lastPromise[key]) {
-                ids = (model.relationships || {})[key] || [];
-                this.lastModified = model.modified;
-                // Lazily initialize object service now that we need it
-                if (!this.objectService) {
-                    this.injectObjectService();
-                }
-
-                // Load from the underlying object service
-                this.lastPromise[key] = this.objectService.getObjects(ids)
-                    .then(packageObject);
-            }
-
-            return this.lastPromise[key];
-        };
-
-        /**
-         * Test to determine whether or not this capability should be exposed
-         * by a domain object based on its model. Checks for the presence of
-         * a `relationships` field, that must be an object.
-         * @param model the domain object model
-         * @returns {boolean} true if this object has relationships
-         */
-        RelationshipCapability.appliesTo = function (model) {
-            return Boolean((model || {}).relationships);
-        };
-
-        return RelationshipCapability;
-    }
-);
diff --git a/platform/core/src/identifiers/Identifier.js b/platform/core/src/identifiers/Identifier.js
deleted file mode 100644
index 7f8065c3f33..00000000000
--- a/platform/core/src/identifiers/Identifier.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        var SEPARATOR = ":";
-
-        /**
-         * Provides an interface for interpreting domain object identifiers;
-         * in particular, parses out persistence space/key pairs associated
-         * with the domain object.
-         *
-         * @memberof platform/core
-         * @constructor
-         * @param {string} id the domain object identifier
-         * @param {string} defaultSpace the persistence space to use if
-         *        one is not encoded in the identifier
-         */
-        function Identifier(id, defaultSpace) {
-            var separatorIndex = id.indexOf(SEPARATOR);
-
-            if (separatorIndex > -1) {
-                this.key = id.substring(separatorIndex + 1);
-                this.space = id.substring(0, separatorIndex);
-                this.definedSpace = this.space;
-            } else {
-                this.key = id;
-                this.space = defaultSpace;
-                this.definedSpace = undefined;
-            }
-        }
-
-        /**
-         * Get the key under which the identified domain object's model
-         * should be persisted, within its persistence space.
-         * @returns {string} the key within its persistence space
-         */
-        Identifier.prototype.getKey = function () {
-            return this.key;
-        };
-
-        /**
-         * Get the space in which the identified domain object's model should
-         * be persisted.
-         * @returns {string} the persistence space
-         */
-        Identifier.prototype.getSpace = function () {
-            return this.space;
-        };
-
-        /**
-         * Get the persistence space, if any, which has been explicitly
-         * encoded in this domain object's identifier. Returns undefined
-         * if no such space has been specified.
-         * @returns {string} the persistence space, or undefined
-         */
-        Identifier.prototype.getDefinedSpace = function () {
-            return this.definedSpace;
-        };
-
-        return Identifier;
-    }
-);
diff --git a/platform/core/src/identifiers/IdentifierProvider.js b/platform/core/src/identifiers/IdentifierProvider.js
deleted file mode 100644
index 82c20b2194b..00000000000
--- a/platform/core/src/identifiers/IdentifierProvider.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["uuid", "./Identifier"],
-    function (uuid, Identifier) {
-
-        /**
-         * Parses and generates domain object identifiers.
-         * @param {string} defaultSpace the default persistence space
-         * @constructor
-         * @memberof {platform/core}
-         */
-        function IdentifierProvider(defaultSpace) {
-            this.defaultSpace = defaultSpace;
-        }
-
-        /**
-         * Generate a new domain object identifier. A persistence space
-         * may optionally be included; if not specified, no space will
-         * be encoded into the identifier.
-         * @param {string} [space] the persistence space to encode
-         *        in this identifier
-         * @returns {string} a new domain object identifier
-         */
-        IdentifierProvider.prototype.generate = function (space) {
-            var id = uuid();
-            if (space !== undefined) {
-                id = space + ":" + id;
-            }
-
-            return id;
-        };
-
-        /**
-         * Parse a domain object identifier to examine its component
-         * parts (e.g. its persistence space.)
-         * @returns {platform/core.Identifier} the parsed identifier
-         */
-        IdentifierProvider.prototype.parse = function (id) {
-            return new Identifier(id, this.defaultSpace);
-        };
-
-        return IdentifierProvider;
-    }
-);
diff --git a/platform/core/src/models/CachingModelDecorator.js b/platform/core/src/models/CachingModelDecorator.js
deleted file mode 100644
index 59f9435470f..00000000000
--- a/platform/core/src/models/CachingModelDecorator.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * The caching model decorator maintains a cache of loaded domain
-         * object models, and ensures that duplicate models for the same
-         * object are not provided.
-         * @memberof platform/core
-         * @constructor
-         * @param {ModelService} modelService this service to decorate
-         * @implements {ModelService}
-         */
-        function CachingModelDecorator(cacheService, modelService) {
-            this.cacheService = cacheService;
-            this.modelService = modelService;
-        }
-
-        CachingModelDecorator.prototype.getModels = function (ids) {
-            var loadFromCache = ids.filter(function cached(id) {
-                    return this.cacheService.has(id);
-                }, this),
-                loadFromService = ids.filter(function notCached(id) {
-                    return !this.cacheService.has(id);
-                }, this);
-
-            if (!loadFromCache.length) {
-                return this.modelService.getModels(loadFromService);
-            }
-
-            return this.modelService.getModels(loadFromService)
-                .then(function (modelResults) {
-                    loadFromCache.forEach(function (id) {
-                        modelResults[id] = this.cacheService.get(id);
-                    }, this);
-
-                    return modelResults;
-                }.bind(this));
-        };
-
-        return CachingModelDecorator;
-    }
-);
diff --git a/platform/core/src/models/MissingModelDecorator.js b/platform/core/src/models/MissingModelDecorator.js
deleted file mode 100644
index 04598b277ff..00000000000
--- a/platform/core/src/models/MissingModelDecorator.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Adds placeholder domain object models for any models which
-         * fail to load from the underlying model service.
-         * @constructor
-         * @memberof platform/core
-         * @param {ModelService} modelService this service to decorate
-         * @implements {ModelService}
-         */
-        function MissingModelDecorator(modelService) {
-            this.modelService = modelService;
-        }
-
-        function missingModel(id) {
-            return {
-                type: "unknown",
-                name: "Missing: " + id
-            };
-        }
-
-        MissingModelDecorator.prototype.getModels = function (ids) {
-            function addMissingModels(models) {
-                var result = {};
-                ids.forEach(function (id) {
-                    result[id] = models[id] || missingModel(id);
-                });
-
-                return result;
-            }
-
-            return this.modelService.getModels(ids).then(addMissingModels);
-        };
-
-        return MissingModelDecorator;
-    }
-);
-
diff --git a/platform/core/src/models/ModelAggregator.js b/platform/core/src/models/ModelAggregator.js
deleted file mode 100644
index aa1ce242d9b..00000000000
--- a/platform/core/src/models/ModelAggregator.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining ModelAggregator. Created by vwoeltje on 11/7/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * Allow domain object models to be looked up by their identifiers.
-         *
-         * @interface ModelService
-         */
-
-        /**
-         * Get domain object models.
-         *
-         * This may provide either a superset or a subset of the models
-         * requested. Absence of a model means it does not exist within
-         * this service instance.
-         *
-         * @method ModelService#getModels
-         * @param {string[]} ids identifiers for models desired.
-         * @returns {Promise.<Object>} a promise for an object mapping
-         *          string identifiers to domain object models.
-         */
-
-        /**
-         * Allows multiple services which provide models for domain objects
-         * to be treated as one.
-         *
-         * @memberof platform/core
-         * @constructor
-         * @implements {ModelService}
-         * @param $q Angular's $q, for promises
-         * @param {ModelService[]} providers the model providers to be
-         *        aggregated
-         */
-        function ModelAggregator($q, providers) {
-            this.providers = providers;
-            this.$q = $q;
-        }
-
-        // Pick a domain object model to use, favoring the one
-        // with the most recent timestamp
-        function pick(a, b) {
-            var aModified = (a || {}).modified || Number.NEGATIVE_INFINITY,
-                bModified = (b || {}).modified || Number.NEGATIVE_INFINITY;
-
-            return (aModified > bModified) ? a : (b || a);
-        }
-
-        // Merge results from multiple providers into one
-        // large result object.
-        function mergeModels(provided, ids) {
-            var result = {};
-            ids.forEach(function (id) {
-                provided.forEach(function (models) {
-                    if (models[id]) {
-                        result[id] = pick(result[id], models[id]);
-                    }
-                });
-            });
-
-            return result;
-        }
-
-        ModelAggregator.prototype.getModels = function (ids) {
-            return this.$q.all(this.providers.map(function (provider) {
-                return provider.getModels(ids);
-            })).then(function (provided) {
-                return mergeModels(provided, ids);
-            });
-        };
-
-        return ModelAggregator;
-    }
-);
diff --git a/platform/core/src/models/ModelCacheService.js b/platform/core/src/models/ModelCacheService.js
deleted file mode 100644
index e2ca5e4e42b..00000000000
--- a/platform/core/src/models/ModelCacheService.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([], function () {
-
-    /**
-     * Provides a cache for domain object models which exist in memory,
-     * but may or may not exist in backing persistence stores.
-     * @constructor
-     * @memberof platform/core
-     */
-    function ModelCacheService() {
-        this.cache = {};
-    }
-
-    /**
-     * Put a domain object model in the cache.
-     * @param {string} id the domain object's identifier
-     * @param {object} model the domain object's model
-     */
-    ModelCacheService.prototype.put = function (id, model) {
-        this.cache[id] = model;
-    };
-
-    /**
-     * Retrieve a domain object model from the cache.
-     * @param {string} id the domain object's identifier
-     * @returns {object} the domain object's model
-     */
-    ModelCacheService.prototype.get = function (id) {
-        return this.cache[id];
-    };
-
-    /**
-     * Check if a domain object model is in the cache.
-     * @param {string} id the domain object's identifier
-     * @returns {boolean} true if present; false if not
-     */
-    ModelCacheService.prototype.has = function (id) {
-        return Object.prototype.hasOwnProperty.call(this.cache, id);
-    };
-
-    /**
-     * Remove a domain object model from the cache.
-     * @param {string} id the domain object's identifier
-     */
-    ModelCacheService.prototype.remove = function (id) {
-        delete this.cache[id];
-    };
-
-    /**
-     * Retrieve all cached domain object models. These are given
-     * as an object containing key-value pairs, where keys are
-     * domain object identifiers and values are domain object models.
-     * @returns {object} all domain object models
-     */
-    ModelCacheService.prototype.all = function () {
-        return this.cache;
-    };
-
-    ModelCacheService.prototype.flush = function () {
-        this.cache = {};
-    };
-
-    return ModelCacheService;
-});
diff --git a/platform/core/src/models/PersistedModelProvider.js b/platform/core/src/models/PersistedModelProvider.js
deleted file mode 100644
index 23f05371acc..00000000000
--- a/platform/core/src/models/PersistedModelProvider.js
+++ /dev/null
@@ -1,136 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining PersistedModelProvider. Created by vwoeltje on 11/12/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * A model service which reads domain object models from an external
-         * persistence service.
-         *
-         * Identifiers will be interpreted as follows:
-         * * If no colon is present, the model will be read from the default
-         *   persistence space.
-         * * If a colon is present, everything before the first colon will be
-         *   taken to refer to the persistence space, and everything after
-         *   will be taken to be that model's key within this space. (If
-         *   no such space exists within the `persistenceService`, that
-         *   identifier will simply be ignored.)
-         *
-         * @memberof platform/core
-         * @constructor
-         * @implements {ModelService}
-         * @param {PersistenceService} persistenceService the service in which
-         *        domain object models are persisted.
-         * @param $q Angular's $q service, for working with promises
-         * @param {function} now a function which provides the current time
-         * @param {string} space the name of the persistence space(s)
-         *        from which models should be retrieved by default
-         */
-        function PersistedModelProvider(persistenceService, $q, now, space) {
-            this.persistenceService = persistenceService;
-            this.$q = $q;
-            this.now = now;
-            this.defaultSpace = space;
-        }
-
-        PersistedModelProvider.prototype.getModels = function (ids) {
-            var persistenceService = this.persistenceService,
-                $q = this.$q,
-                now = this.now,
-                defaultSpace = this.defaultSpace,
-                parsedIds;
-
-            // Load a single object model from any persistence spaces
-            function loadModel(parsedId) {
-                return persistenceService
-                    .readObject(parsedId.space, parsedId.key);
-            }
-
-            // Ensure that models read from persistence have some
-            // sensible timestamp indicating they've been persisted.
-            function addPersistedTimestamp(model) {
-                if (model && (model.persisted === undefined)) {
-                    model.persisted = model.modified !== undefined
-                        ? model.modified : now();
-                }
-
-                return model;
-            }
-
-            // Package the result as id->model
-            function packageResult(parsedIdsToPackage, models) {
-                var result = {};
-                parsedIdsToPackage.forEach(function (parsedId, index) {
-                    var id = parsedId.id;
-                    if (models[index]) {
-                        result[id] = models[index];
-                    }
-                });
-
-                return result;
-            }
-
-            function loadModels(parsedIdsToLoad) {
-                return $q.all(parsedIdsToLoad.map(loadModel))
-                    .then(function (models) {
-                        return packageResult(
-                            parsedIdsToLoad,
-                            models.map(addPersistedTimestamp)
-                        );
-                    });
-            }
-
-            function restrictToSpaces(spaces) {
-                return parsedIds.filter(function (parsedId) {
-                    return spaces.indexOf(parsedId.space) !== -1;
-                });
-            }
-
-            parsedIds = ids.map(function (id) {
-                var parts = id.split(":");
-
-                return (parts.length > 1)
-                    ? {
-                        id: id,
-                        space: parts[0],
-                        key: parts.slice(1).join(":")
-                    }
-                    : {
-                        id: id,
-                        space: defaultSpace,
-                        key: id
-                    };
-            });
-
-            return persistenceService.listSpaces()
-                .then(restrictToSpaces)
-                .then(loadModels);
-        };
-
-        return PersistedModelProvider;
-    }
-);
diff --git a/platform/core/src/models/StaticModelProvider.js b/platform/core/src/models/StaticModelProvider.js
deleted file mode 100644
index 9da70ec52c0..00000000000
--- a/platform/core/src/models/StaticModelProvider.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining StaticModelProvider. Created by vwoeltje on 11/7/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * Loads static models, provided as declared extensions of bundles.
-         * @memberof platform/core
-         * @constructor
-         */
-        function StaticModelProvider(models, $q, $log) {
-            var modelMap = {};
-
-            function addModelToMap(model) {
-                // Skip models which don't look right
-                if (typeof model !== 'object'
-                        || typeof model.id !== 'string'
-                            || typeof model.model !== 'object') {
-                    $log.warn([
-                        "Skipping malformed domain object model exposed by ",
-                        ((model || {}).bundle || {}).path
-                    ].join(""));
-                } else {
-                    modelMap[model.id] = model.model;
-                }
-            }
-
-            // Prepopulate maps with models to make subsequent lookup faster.
-            models.forEach(addModelToMap);
-
-            this.modelMap = modelMap;
-            this.$q = $q;
-        }
-
-        StaticModelProvider.prototype.getModels = function (ids) {
-            var modelMap = this.modelMap,
-                result = {};
-            ids.forEach(function (id) {
-                result[id] = modelMap[id];
-            });
-
-            return this.$q.when(result);
-        };
-
-        return StaticModelProvider;
-    }
-);
diff --git a/platform/core/src/objects/DomainObjectImpl.js b/platform/core/src/objects/DomainObjectImpl.js
deleted file mode 100644
index 0b9fd0b79b2..00000000000
--- a/platform/core/src/objects/DomainObjectImpl.js
+++ /dev/null
@@ -1,142 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining DomainObject. Created by vwoeltje on 11/7/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * A domain object is an entity of interest to the user.
-         *
-         * @interface DomainObject
-         */
-
-        /**
-         * Get the unique identifier for this domain object.
-         *
-         * @method DomainObject#getId
-         * @return {string} the domain object's unique identifier
-         */
-
-        /**
-         * Get the domain object's model. This is useful to
-         * directly look up known properties of an object, but
-         * direct modification of a returned model is generally
-         * discouraged and may result in errors. Instead, an
-         * object's `mutation` capability should be used.
-         *
-         * @method DomainObject#getModel
-         * @return {object} the domain object's persistent state
-         */
-
-        /**
-         * Get a capability associated with this object.
-         * Capabilities are looked up by string identifiers;
-         * prior knowledge of a capability's interface is
-         * necessary.
-         *
-         * @method DomainObject#getCapability
-         * @param {string} key the identifier for the capability
-         * @return {Capability} the named capability, or undefined
-         *         if not present.
-         */
-
-        /**
-         * Check if this domain object supports a capability
-         * with the provided name.
-         *
-         * @method DomainObject#hasCapability
-         * @param {string} key the identifier for the capability
-         * @return {boolean} true if this domain object has this capability
-         */
-
-        /**
-         * Use a capability of an object; the behavior of this method
-         * depends on the interface of the capability, and whether
-         * or not it is present.
-         *
-         * * If the capability is not present for this object,
-         *   no operation occurs.
-         * * If the capability is present and has an `invoke` method,
-         *   that method is called with any additional arguments
-         *   provided, and its return value is returned.
-         * * If the capability is present but has no `invoke` method,
-         *   this capability itself is returned.
-         *
-         * @method DomainObject#useCapability
-         * @param {string} name the name of the capability to invoke
-         * @param {...*} [arguments] to pass to the invocation
-         * @returns {*|Capability} the result of invocation (see description)
-         */
-
-        /**
-         * Construct a new domain object with the specified
-         * identifier, model, and capabilities.
-         *
-         * @param {string} id the object's unique identifier
-         * @param {object} model the "JSONifiable" state of the object
-         * @param {Object.<string, Capability>|function} capabilities all
-         *        capabilities to be exposed by this object
-         * @memberof platform/core
-         * @constructor
-         */
-        function DomainObjectImpl(id, model, capabilities) {
-            this.id = id;
-            this.model = model;
-            this.capabilities = capabilities;
-        }
-
-        DomainObjectImpl.prototype.getId = function () {
-            return this.id;
-        };
-
-        DomainObjectImpl.prototype.getModel = function () {
-            return this.model;
-        };
-
-        DomainObjectImpl.prototype.getCapability = function (name) {
-            var capability = this.capabilities[name];
-
-            return typeof capability === 'function'
-                ? capability(this) : capability;
-        };
-
-        DomainObjectImpl.prototype.hasCapability = function (name) {
-            return this.getCapability(name) !== undefined;
-        };
-
-        DomainObjectImpl.prototype.useCapability = function (name) {
-            // Get tail of args to pass to invoke
-            var args = Array.prototype.slice.apply(arguments, [1]),
-                capability = this.getCapability(name);
-
-            return (capability && capability.invoke)
-                ? capability.invoke.apply(capability, args)
-                : capability;
-        };
-
-        return DomainObjectImpl;
-    }
-);
diff --git a/platform/core/src/objects/DomainObjectProvider.js b/platform/core/src/objects/DomainObjectProvider.js
deleted file mode 100644
index 40d865a44e9..00000000000
--- a/platform/core/src/objects/DomainObjectProvider.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * This bundle implements core components of Open MCT's service
- * infrastructure and information model.
- * @namespace platform/core
- */
-define(
-    [],
-    function () {
-
-        /**
-         * Provides instances of domain objects, as retrieved by their
-         * identifiers.
-         *
-         * @interface ObjectService
-         */
-
-        /**
-         * Get a set of objects associated with a list of identifiers.
-         * The provided result may contain a subset or a superset of
-         * the total number of objects.
-         *
-         * @method ObjectService#getObjects
-         * @param {string[]} ids the identifiers for domain objects
-         *        of interest.
-         * @return {Promise<object<string, DomainObject>>} a promise
-         *         for an object containing key-value pairs, where keys
-         *         are string identifiers for domain objects, and
-         *         values are the corresponding domain objects themselves.
-         */
-
-        /**
-         * Construct a new provider for domain objects.
-         *
-         * @param {ModelService} modelService the service which shall
-         *        provide models (persistent state) for domain objects
-         * @param {Function} instantiate a service to instantiate new
-         *        domain object instances
-         * @param $q Angular's $q, for promise consolidation
-         * @memberof platform/core
-         * @constructor
-         */
-        function DomainObjectProvider(modelService, instantiate) {
-            this.modelService = modelService;
-            this.instantiate = instantiate;
-        }
-
-        DomainObjectProvider.prototype.getObjects = function getObjects(ids) {
-            var modelService = this.modelService,
-                instantiate = this.instantiate;
-
-            // Assemble the results from the model service and the
-            // capability service into one value, suitable to return
-            // from this service.
-            function assembleResult(models) {
-                var result = {};
-                ids.forEach(function (id) {
-                    if (models[id]) {
-                        // Create the domain object
-                        result[id] = instantiate(models[id], id);
-                    }
-                });
-
-                return result;
-            }
-
-            return modelService.getModels(ids).then(assembleResult);
-        };
-
-        return DomainObjectProvider;
-    }
-);
diff --git a/platform/core/src/runs/TransactingMutationListener.js b/platform/core/src/runs/TransactingMutationListener.js
deleted file mode 100644
index 9571c913aba..00000000000
--- a/platform/core/src/runs/TransactingMutationListener.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([], function () {
-
-    /**
-     * Listens for mutation on domain objects and triggers persistence when
-     * it occurs.
-     * @param {Topic} topic the `topic` service; used to listen for mutation
-     * @memberof platform/core
-     */
-    function TransactingMutationListener(
-        topic,
-        transactionService,
-        cacheService
-    ) {
-
-        function hasChanged(domainObject) {
-            var model = domainObject.getModel();
-
-            return model.persisted === undefined || model.modified > model.persisted;
-        }
-
-        var mutationTopic = topic('mutation');
-        mutationTopic.listen(function (domainObject) {
-            var persistence = domainObject.getCapability('persistence');
-            cacheService.put(domainObject.getId(), domainObject.getModel());
-
-            if (hasChanged(domainObject)) {
-                persistence.persist();
-            }
-        });
-    }
-
-    return TransactingMutationListener;
-});
diff --git a/platform/core/src/services/Instantiate.js b/platform/core/src/services/Instantiate.js
deleted file mode 100644
index c32f74e89fe..00000000000
--- a/platform/core/src/services/Instantiate.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['../objects/DomainObjectImpl'],
-    function (DomainObjectImpl) {
-
-        /**
-         * The `instantiate` service allows new domain object instances to be
-         * created. These objects are not persisted to any back-end or
-         * placed anywhere in the object hierarchy by default.
-         *
-         * Usage: `instantiate(model, [id])`
-         *
-         * ...returns a new instance of a domain object with the specified
-         * model. An identifier may be provided; if omitted, one will be
-         * generated instead.
-         *
-         * @constructor
-         * @memberof platform/core
-         * @param {CapabilityService} capabilityService the service which will
-         *        provide instantiated domain objects with their capabilities
-         * @param {IdentifierService} identifierService service to generate
-         *        new identifiers
-         */
-        function Instantiate(
-            capabilityService,
-            identifierService,
-            cacheService
-        ) {
-            return function (model, id) {
-                var capabilities = capabilityService.getCapabilities(model);
-                id = id || identifierService.generate();
-                cacheService.put(id, model);
-
-                return new DomainObjectImpl(id, model, capabilities);
-            };
-        }
-
-        return Instantiate;
-    }
-);
diff --git a/platform/core/src/services/Now.js b/platform/core/src/services/Now.js
deleted file mode 100644
index d3cd6e87a6c..00000000000
--- a/platform/core/src/services/Now.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Defines the `now` service, which is a simple wrapper upon
-         * `Date.now()` which can be injected to support testability.
-         *
-         * @returns {Function} a function which returns current system time
-         * @memberof platform/core
-         */
-        function Now() {
-            /**
-             * Get the current time.
-             * @returns {number} current time, in milliseconds since
-             *          1970-01-01 00:00:00Z
-             * @memberof platform/core.Now#
-             */
-            return function () {
-                return Date.now();
-            };
-        }
-
-        return Now;
-    }
-);
diff --git a/platform/core/src/services/Throttle.js b/platform/core/src/services/Throttle.js
deleted file mode 100644
index 22d28b785b6..00000000000
--- a/platform/core/src/services/Throttle.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Throttler for function executions, registered as the `throttle`
-         * service.
-         *
-         * Usage:
-         *
-         *     throttle(fn, delay, [apply])
-         *
-         * Returns a function that, when invoked, will invoke `fn` after
-         * `delay` milliseconds, only if no other invocations are pending.
-         * The optional argument `apply` determines whether or not a
-         * digest cycle should be triggered.
-         *
-         * The returned function will itself return a `Promise` which will
-         * resolve to the returned value of `fn` whenever that is invoked.
-         *
-         * In cases where arguments are provided, only the most recent
-         * set of arguments will be passed on to the throttled function
-         * at the time it is executed.
-         *
-         * @returns {Function}
-         * @memberof platform/core
-         */
-        function Throttle($timeout) {
-            /**
-             * Throttle this function.
-             * @param {Function} fn the function to throttle
-             * @param {number} [delay] the delay, in milliseconds, before
-             *        executing this function; defaults to 0.
-             * @param {boolean} apply true if a `$apply` call should be
-             *        invoked after this function executes; defaults to
-             *        `false`.
-             * @memberof platform/core.Throttle#
-             */
-            return function (fn, delay, apply) {
-                var promise,
-                    args = [];
-
-                function invoke() {
-                    // Clear the active timeout so a new one starts next time.
-                    promise = undefined;
-
-                    // Invoke the function with the latest supplied arguments.
-                    return fn.apply(null, args);
-                }
-
-                // Defaults
-                delay = delay || 0;
-                apply = apply || false;
-
-                return function () {
-                    // Store arguments from this invocation
-                    args = Array.prototype.slice.apply(arguments, [0]);
-                    // Start a timeout if needed
-                    promise = promise || $timeout(invoke, delay, apply);
-
-                    // Return whichever timeout is active (to get
-                    // a promise for the results of fn)
-                    return promise;
-                };
-            };
-        }
-
-        return Throttle;
-    }
-);
-
diff --git a/platform/core/src/services/Topic.js b/platform/core/src/services/Topic.js
deleted file mode 100644
index 92010734529..00000000000
--- a/platform/core/src/services/Topic.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        var ERROR_PREFIX = "Error when notifying listener: ";
-
-        /**
-         * The `topic` service provides a way to create both named,
-         * shared listeners and anonymous, private listeners.
-         *
-         * Usage:
-         *
-         * ```
-         * var t = topic('foo'); // Use/create a named topic
-         * t.listen(function () { ... });
-         * t.notify({ some: "message" });
-         * ```
-         *
-         * Named topics are shared; multiple calls to `topic`
-         * with the same argument will return a single object instance.
-         * Anonymous topics (where `topic` has been called with no
-         * arguments) are private; each call returns a new instance.
-         *
-         * @returns {Function}
-         * @memberof platform/core
-         */
-        function Topic($log) {
-            var topics = {};
-
-            function createTopic() {
-                var listeners = [];
-
-                return {
-                    listen: function (listener) {
-                        listeners.push(listener);
-
-                        return function unlisten() {
-                            listeners = listeners.filter(function (l) {
-                                return l !== listener;
-                            });
-                        };
-                    },
-                    notify: function (message) {
-                        listeners.forEach(function (listener) {
-                            try {
-                                listener(message);
-                            } catch (e) {
-                                $log.error(ERROR_PREFIX + e.message);
-                                $log.error(e);
-                            }
-                        });
-                    }
-                };
-            }
-
-            /**
-             * Use and (if necessary) create a new topic.
-             * @param {string} [key] name of the topic to use
-             * @memberof platform/core.Topic#
-             */
-            return function (key) {
-                if (arguments.length < 1) {
-                    return createTopic();
-                } else {
-                    topics[key] = topics[key] || createTopic();
-
-                    return topics[key];
-                }
-            };
-        }
-
-        return Topic;
-    }
-);
-
diff --git a/platform/core/src/types/MergeModels.js b/platform/core/src/types/MergeModels.js
deleted file mode 100644
index 4df2009e850..00000000000
--- a/platform/core/src/types/MergeModels.js
+++ /dev/null
@@ -1,106 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Defines MergedModel, which allows a deep merge of domain object
- * models, or JSONifiable JavaScript objects generally.
- *
- */
-define(
-    function () {
-
-        /**
-         * Utility function for merging domain object models (or any
-         * JavaScript object which follows the same conventions.)
-         * Performs a "deep merge", resolving conflicts (occurrences
-         * of the same property in both objects) such that:
-         *
-         * * Non-conflicting properties are both contained in the
-         *   result object.
-         * * Conflicting properties which are both arrays are
-         *   concatenated.
-         * * Conflicting properties which are both objects are
-         *   merged recursively.
-         * * Conflicting properties which do not fall into any of the
-         *   preceding categories are taken from the second argument,
-         *   shadowing any values from the first.
-         *
-         * An optional third argument, the "merger", may be provided.
-         * This may be either a function, or an object containing
-         * key-value pairs where keys are strings (corresponding to
-         * the names of properties) and values are other mergers
-         * (either functions or objects.)
-         *
-         * * If the merger is a function, it will be used upon the
-         *   two input objects in lieu of the behavior described
-         *   above.
-         * * If the merger is an object, then its values will be
-         *   used as mergers when resolving properties with
-         *   corresponding keys in the recursive step.
-         *
-         *
-         * @param modelA the first object to be merged
-         * @param modelB the second object to be merged
-         * @param merger the merger, as described above
-         * @returns {*} the result of merging `modelA` and `modelB`
-         * @constructor
-         * @memberof platform/core
-         */
-        function mergeModels(modelA, modelB, merger) {
-            var mergeFunction;
-
-            function mergeArrays(a, b) {
-                return a.concat(b);
-            }
-
-            function mergeObjects(a, b) {
-                var result = {};
-                Object.keys(a).forEach(function (k) {
-                    result[k] = Object.prototype.hasOwnProperty.call(b, k)
-                        ? mergeModels(a[k], b[k], (merger || {})[k])
-                        : a[k];
-                });
-                Object.keys(b).forEach(function (k) {
-                    // Copy any properties not already merged
-                    if (!Object.prototype.hasOwnProperty.call(a, k)) {
-                        result[k] = b[k];
-                    }
-                });
-
-                return result;
-            }
-
-            function mergeOther(a, b) {
-                return b;
-            }
-
-            mergeFunction = (merger && Function.isFunction(merger)) ? merger
-                : (Array.isArray(modelA) && Array.isArray(modelB)) ? mergeArrays
-                    : (modelA instanceof Object && modelB instanceof Object) ? mergeObjects
-                        : mergeOther;
-
-            return mergeFunction(modelA, modelB);
-        }
-
-        return mergeModels;
-    }
-);
diff --git a/platform/core/src/types/TypeCapability.js b/platform/core/src/types/TypeCapability.js
deleted file mode 100644
index 99ded1a89f9..00000000000
--- a/platform/core/src/types/TypeCapability.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining TypeCapability. Created by vwoeltje on 11/10/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * The `type` capability makes information about a domain object's
-         * type directly available when working with that object, by way
-         * of a `domainObject.getCapability('type')` invocation.
-         *
-         * @memberof platform/core
-         * @constructor
-         * @augments {Type}
-         * @implements {Capability}
-         * @param {TypeService} typeService the service which
-         *        provides type information
-         * @param {DomainObject} domainObject the domain object
-         *        which exposes the type capability
-         */
-        function TypeCapability(typeService, domainObject) {
-            var typeKey = domainObject.getModel().type,
-                type = typeService.getType(typeKey);
-
-            // Simply return the type, but wrap with Object.create
-            // to avoid exposing the type object directly.
-            return Object.create(type);
-        }
-
-        return TypeCapability;
-    }
-);
diff --git a/platform/core/src/types/TypeImpl.js b/platform/core/src/types/TypeImpl.js
deleted file mode 100644
index 4c2d9ed3d8e..00000000000
--- a/platform/core/src/types/TypeImpl.js
+++ /dev/null
@@ -1,194 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['./TypeProperty'],
-    function (TypeProperty) {
-
-        /**
-         * Describes a type of domain object.
-         *
-         * @interface Type
-         */
-
-        /**
-         * Get the string key which identifies this type.
-         * This is the type's machine-readable name/identifier,
-         * and will correspond to the "type" field of the models
-         * of domain objects of this type.
-         *
-         * @returns {string} the key which identifies this type
-         * @method Type#getKey
-         */
-        /**
-         * Get the human-readable name for this type, as should
-         * be displayed in the user interface when referencing
-         * this type.
-         *
-         * @returns {string} the human-readable name of this type
-         * @method Type#getName
-         */
-        /**
-         * Get the human-readable description for this type, as should
-         * be displayed in the user interface when describing
-         * this type.
-         *
-         * @returns {string} the human-readable description of this type
-         * @method Type#getDescription
-         */
-        /**
-         * Get the cssClass associated with this type. cssClass is a
-         * string which will appear as an icon (when
-         * displayed in an appropriate font) which visually
-         * distinguish types from one another.
-         *
-         * @returns {string} the cssClass for this type
-         * @method Type#getCssClass
-         */
-        /**
-         * Get an array of properties associated with objects of
-         * this type, as might be shown in a Create wizard or
-         * an Edit Properties view.
-         *
-         * @return {TypeProperty[]} properties associated with
-         *         objects of this type
-         * @method Type#getPropertiees
-         */
-        /**
-         * Get the initial state of a model for domain objects of
-         * this type.
-         *
-         * @return {object} initial domain object model
-         * @method Type#getInitialModel
-         */
-        /**
-         * Get the raw type definition for this type. This is an
-         * object containing key-value pairs of type metadata;
-         * this allows the retrieval and use of custom type
-         * properties which are not recognized within this interface.
-         *
-         * @returns {object} the raw definition for this type
-         * @method Type#getDefinition
-         */
-        /**
-         * Check if this type is or inherits from some other type.
-         *
-         * @param {string|Type} key either
-         *        a string key for a type, or an instance of a type
-         *        object, which this
-         * @returns {boolean} true
-         * @method Type#instanceOf
-         */
-        /**
-         * Check if a type should support a given feature. This simply
-         * checks for the presence or absence of the feature key in
-         * the type definition's "feature" field.
-         * @param {string} feature a string identifying the feature
-         * @returns {boolean} true if the feature is supported
-         * @method Type#hasFeature
-         */
-
-        /**
-         * Construct a new type. Types describe categories of
-         * domain objects.
-         *
-         * @implements {Type}
-         * @param {TypeDefinition} typeDef an object containing
-         *        key-value pairs describing a type and its
-         *        relationship to other types.
-         * @constructor
-         * @memberof platform/core
-         */
-        function TypeImpl(typeDef) {
-            var inheritList = typeDef.inherits || [],
-                featureSet = {};
-
-            (typeDef.features || []).forEach(function (feature) {
-                featureSet[feature] = true;
-            });
-
-            this.typeDef = typeDef;
-            this.featureSet = featureSet;
-            this.inheritList = inheritList;
-        }
-
-        TypeImpl.prototype.getKey = function () {
-            return this.typeDef.key;
-        };
-
-        TypeImpl.prototype.getName = function () {
-            return this.typeDef.name;
-        };
-
-        TypeImpl.prototype.getDescription = function () {
-            return this.typeDef.description;
-        };
-
-        TypeImpl.prototype.getCssClass = function () {
-            return this.typeDef.cssClass;
-        };
-
-        TypeImpl.prototype.getProperties = function () {
-            return (this.typeDef.properties || []).map(function (propertyDef) {
-                return new TypeProperty(propertyDef);
-            });
-        };
-
-        /**
-         * Returns the default model for an object of this type. Note that
-         * this method returns a clone of the original model, so if using this
-         * method heavily, consider caching the result to optimize performance.
-         *
-         * @return {object} The default model for an object of this type.
-         */
-        TypeImpl.prototype.getInitialModel = function () {
-            return JSON.parse(JSON.stringify(this.typeDef.model || {}));
-        };
-
-        TypeImpl.prototype.getDefinition = function () {
-            return this.typeDef;
-        };
-
-        TypeImpl.prototype.instanceOf = function instanceOf(key) {
-            var typeDef = this.typeDef,
-                inheritList = this.inheritList;
-
-            if (key === typeDef.key) {
-                return true;
-            } else if (inheritList.indexOf(key) > -1) {
-                return true;
-            } else if (!key) {
-                return true;
-            } else if (key !== null && typeof key === 'object') {
-                return key.getKey ? this.instanceOf(key.getKey()) : false;
-            } else {
-                return false;
-            }
-        };
-
-        TypeImpl.prototype.hasFeature = function (feature) {
-            return this.featureSet[feature] || false;
-        };
-
-        return TypeImpl;
-    }
-);
diff --git a/platform/core/src/types/TypeProperty.js b/platform/core/src/types/TypeProperty.js
deleted file mode 100644
index 1abc82acfb1..00000000000
--- a/platform/core/src/types/TypeProperty.js
+++ /dev/null
@@ -1,163 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['./TypePropertyConversion'],
-    function (TypePropertyConversion) {
-
-        /**
-         * Instantiate a property associated with domain objects of a
-         * given type. This provides an interface by which
-         *
-         * @memberof platform/core
-         * @constructor
-         */
-        function TypeProperty(propertyDefinition) {
-            // Load an appropriate conversion
-            this.conversion = new TypePropertyConversion(
-                propertyDefinition.conversion || "identity"
-            );
-            this.propertyDefinition = propertyDefinition;
-        }
-
-        // Check if a value is defined; used to check if initial array
-        // values have been populated.
-        function isUnpopulatedArray(value) {
-            var i;
-
-            if (!Array.isArray(value) || value.length === 0) {
-                return false;
-            }
-
-            for (i = 0; i < value.length; i += 1) {
-                if (value[i] !== undefined) {
-                    return false;
-                }
-            }
-
-            return true;
-        }
-
-        // Specify a field deeply within an object
-        function specifyValue(object, propertyPath, value) {
-            // If path is not an array, just set the property
-            if (!Array.isArray(propertyPath)) {
-                object[propertyPath] = value;
-            } else if (propertyPath.length > 1) {
-                // Otherwise, look up in defined sequence
-                object[propertyPath[0]] = object[propertyPath[0]] || {};
-                specifyValue(
-                    object[propertyPath[0]],
-                    propertyPath.slice(1),
-                    value
-                );
-            } else if (propertyPath.length === 1) {
-                object[propertyPath[0]] = value;
-            }
-        }
-
-        // Perform a lookup for a value from an object,
-        // which may recursively look at contained objects
-        // based on the path provided.
-        function lookupValue(object, propertyPath) {
-            var value;
-
-            // Can't look up from a non-object
-            if (!object) {
-                return undefined;
-            }
-
-            // If path is not an array, just look up the property
-            if (!Array.isArray(propertyPath)) {
-                return object[propertyPath];
-            }
-
-            // Otherwise, look up in the sequence defined in the array
-            if (propertyPath.length > 0) {
-                value = object[propertyPath[0]];
-
-                return propertyPath.length > 1
-                    ? lookupValue(value, propertyPath.slice(1))
-                    : value;
-            }
-
-            // Fallback; property path was empty
-            return undefined;
-        }
-
-        /**
-         * Retrieve the value associated with this property
-         * from a given model.
-         * @param {object} model a domain object model to read from
-         * @returns {*} the value for this property, as read from the model
-         */
-        TypeProperty.prototype.getValue = function (model) {
-            var property = this.propertyDefinition.property
-                    || this.propertyDefinition.key,
-                initialValue =
-                    property && lookupValue(model, property);
-
-            // Provide an empty array if this is a multi-item
-            // property.
-            if (Array.isArray(this.propertyDefinition.items)) {
-                initialValue = initialValue
-                    || new Array(this.propertyDefinition.items.length);
-            }
-
-            return this.conversion.toFormValue(initialValue);
-        };
-
-        /**
-         * Set a value associated with this property in
-         * an object's model.
-         * @param {object} model a domain object model to update
-         * @param {*} value the new value to set for this property
-         */
-        TypeProperty.prototype.setValue = function (model, value) {
-            var property = this.propertyDefinition.property
-                    || this.propertyDefinition.key;
-
-            // If an array contains all undefined values, treat it
-            // as undefined, to filter back out arrays for input
-            // that never got entered.
-            value = isUnpopulatedArray(value) ? undefined : value;
-
-            // Convert to a value suitable for storage in the
-            // domain object's model
-            value = this.conversion.toModelValue(value);
-
-            return property
-                ? specifyValue(model, property, value)
-                : undefined;
-        };
-
-        /**
-         * Get the raw definition for this property.
-         * @returns {TypePropertyDefinition}
-         */
-        TypeProperty.prototype.getDefinition = function () {
-            return this.propertyDefinition;
-        };
-
-        return TypeProperty;
-    }
-);
diff --git a/platform/core/src/types/TypePropertyConversion.js b/platform/core/src/types/TypePropertyConversion.js
deleted file mode 100644
index 27e74e4b71b..00000000000
--- a/platform/core/src/types/TypePropertyConversion.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    function () {
-
-        var conversions = {
-                number: {
-                    toModelValue: parseFloat,
-                    toFormValue: function (modelValue) {
-                        return (typeof modelValue === 'number')
-                            ? modelValue.toString(10) : undefined;
-                    }
-                },
-                identity: {
-                    toModelValue: function (v) {
-                        return v;
-                    },
-                    toFormValue: function (v) {
-                        return v;
-                    }
-                }
-            },
-            ARRAY_SUFFIX = '[]';
-
-        // Utility function to handle arrays of conversions
-        function ArrayConversion(conversion) {
-            return {
-                toModelValue: function (formValue) {
-                    return formValue && formValue.map(conversion.toModelValue);
-                },
-                toFormValue: function (modelValue) {
-                    return modelValue && modelValue.map(conversion.toFormValue);
-                }
-            };
-        }
-
-        /**
-         * Look up an appropriate conversion between form values and model
-         * values, e.g. to numeric values.
-         * @constructor
-         * @memberof platform/core
-         */
-        function TypePropertyConversion(name) {
-            if (name
-                    && name.length > ARRAY_SUFFIX.length
-                    && name.indexOf(ARRAY_SUFFIX, name.length - ARRAY_SUFFIX.length) !== -1) {
-                return new ArrayConversion(
-                    new TypePropertyConversion(
-                        name.substring(0, name.length - ARRAY_SUFFIX.length)
-                    )
-                );
-            } else {
-                if (!conversions[name]) {
-                    throw new Error("Unknown conversion type: " + name);
-                }
-
-                return conversions[name];
-            }
-        }
-
-        /**
-         * Convert a value from its format as read from a form, to a
-         * format appropriate to store in a model.
-         * @method platform/core.TypePropertyConversion#toModelValue
-         * @param {*} formValue value as read from a form
-         * @returns {*} value to store in a model
-         */
-
-        /**
-         * Convert a value from its format as stored in a model, to a
-         * format appropriate to display in a form.
-         * @method platform/core.TypePropertyConversion#toFormValue
-         * @param {*} modelValue value as stored in a model
-         * @returns {*} value to display within a form
-         */
-
-        return TypePropertyConversion;
-    }
-);
diff --git a/platform/core/src/types/TypeProvider.js b/platform/core/src/types/TypeProvider.js
deleted file mode 100644
index ecf4f550a1c..00000000000
--- a/platform/core/src/types/TypeProvider.js
+++ /dev/null
@@ -1,197 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['./TypeImpl', './MergeModels'],
-    function (TypeImpl, mergeModels) {
-
-        /**
-         * Provides domain object types that are available/recognized within
-         * the system.
-         *
-         * @interface TypeService
-         */
-        /**
-         * Get a specific type by name.
-         *
-         * @method TypeService#getType
-         * @param {string} key the key (machine-readable identifier)
-         *        for the type of interest
-         * @returns {Type} the type identified by this key
-         */
-        /**
-         * List all known types.
-         *
-         * @method TypeService#listTypes
-         * @returns {Type[]} all known types
-         */
-
-        var TO_CONCAT = ['inherits', 'capabilities', 'properties', 'features'],
-            TO_MERGE = ['model'];
-
-        function copyKeys(a, b) {
-            Object.keys(b).forEach(function (k) {
-                a[k] = b[k];
-            });
-        }
-
-        function removeDuplicates(array) {
-            var set = {};
-
-            return array ? array.filter(function (element) {
-                // Don't filter objects (e.g. property definitions)
-                if (element instanceof Object && !(element instanceof String)) {
-                    return true;
-                }
-
-                return set[element]
-                    ? false
-                    : (set[element] = true);
-            }) : array;
-        }
-
-        // Reduce an array of type definitions to a single type definition,
-        // which has merged all properties in order.
-        function collapse(typeDefs) {
-            var collapsed = typeDefs.reduce(function (a, b) {
-                var result = {};
-                copyKeys(result, a);
-                copyKeys(result, b);
-
-                // Special case: Do a merge, e.g. on "model"
-                TO_MERGE.forEach(function (k) {
-                    if (a[k] && b[k]) {
-                        result[k] = mergeModels(a[k], b[k]);
-                    }
-                });
-
-                // Special case: Concatenate certain arrays
-                TO_CONCAT.forEach(function (k) {
-                    if (a[k] || b[k]) {
-                        result[k] = (a[k] || []).concat(b[k] || []);
-                    }
-                });
-
-                return result;
-            }, {});
-
-            // Remove any duplicates from the collapsed array
-            TO_CONCAT.forEach(function (k) {
-                if (collapsed[k]) {
-                    collapsed[k] = removeDuplicates(collapsed[k]);
-                }
-            });
-
-            return collapsed;
-        }
-
-        /**
-         * A type provider provides information about types of domain objects
-         * within the running Open MCT instance.
-         *
-         * @param {Array<TypeDefinition>} types the raw type
-         *        definitions for this type.
-         * @memberof platform/core
-         * @constructor
-         */
-        function TypeProvider(types) {
-            var rawTypeDefinitions = types,
-                typeDefinitions = (function (typeDefArray) {
-                    var result = {};
-                    typeDefArray.forEach(function (typeDef) {
-                        var k = typeDef.key;
-                        if (k) {
-                            result[k] = (result[k] || []).concat(typeDef);
-                        }
-                    });
-
-                    return result;
-                }(rawTypeDefinitions));
-
-            this.typeMap = {};
-            this.typeDefinitions = typeDefinitions;
-            this.rawTypeDefinitions = types;
-        }
-
-        TypeProvider.prototype.listTypes = function () {
-            var self = this;
-
-            return removeDuplicates(
-                this.rawTypeDefinitions.filter(function (def) {
-                    return def.key;
-                }).map(function (def) {
-                    return def.key;
-                }).map(function (key) {
-                    return self.getType(key);
-                })
-            );
-        };
-
-        TypeProvider.prototype.getType = function (key) {
-            var typeDefinitions = this.typeDefinitions,
-                self = this;
-
-            function getUndefinedType() {
-                return (self.undefinedType = self.undefinedType || collapse(
-                    self.rawTypeDefinitions.filter(function (typeDef) {
-                        return !typeDef.key;
-                    })
-                ));
-            }
-
-            function asArray(value) {
-                return Array.isArray(value) ? value : [value];
-            }
-
-            function lookupTypeDef(typeKey) {
-                function buildTypeDef(typeKeyToBuild) {
-                    var typeDefs = typeDefinitions[typeKeyToBuild] || [],
-                        inherits = typeDefs.map(function (typeDef) {
-                            return asArray(typeDef.inherits || []);
-                        }).reduce(function (a, b) {
-                            return a.concat(b);
-                        }, []),
-                        def = collapse(
-                            [getUndefinedType()].concat(
-                                inherits.map(lookupTypeDef)
-                            ).concat(typeDefs)
-                        );
-
-                    // Always provide a default name
-                    def.model = def.model || {};
-                    def.model.name = def.model.name
-                        || ("Unnamed " + (def.name || "Object"));
-
-                    return def;
-                }
-
-                return (self.typeMap[typeKey] =
-                    self.typeMap[typeKey] || buildTypeDef(typeKey));
-            }
-
-            return new TypeImpl(lookupTypeDef(key));
-        };
-
-        return TypeProvider;
-    }
-
-);
diff --git a/platform/core/src/views/ViewCapability.js b/platform/core/src/views/ViewCapability.js
deleted file mode 100644
index b80f5cbed3a..00000000000
--- a/platform/core/src/views/ViewCapability.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining ViewCapability. Created by vwoeltje on 11/10/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * A `view` capability can be used to retrieve an array of
-         * all views (or, more specifically, the declarative metadata
-         * thereabout) which are applicable to a specific domain
-         * object.
-         *
-         * @memberof platform/core
-         * @implements {Capability}
-         * @constructor
-         */
-        function ViewCapability(viewService, domainObject) {
-            this.viewService = viewService;
-            this.domainObject = domainObject;
-        }
-
-        /**
-         * Get all view definitions which are applicable to
-         * this object.
-         * @returns {View[]} an array of view definitions
-         *          which are applicable to this object.
-         * @memberof platform/core.ViewCapability#
-         */
-        ViewCapability.prototype.invoke = function () {
-            return this.viewService.getViews(this.domainObject);
-        };
-
-        return ViewCapability;
-    }
-);
diff --git a/platform/core/src/views/ViewProvider.js b/platform/core/src/views/ViewProvider.js
deleted file mode 100644
index c8c5cf55681..00000000000
--- a/platform/core/src/views/ViewProvider.js
+++ /dev/null
@@ -1,161 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining ViewProvider. Created by vwoeltje on 11/10/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * Provides definitions for views that are available for specific
-         * domain objects.
-         *
-         * @interface ViewService
-         */
-
-        /**
-         * Get all views which are applicable to this domain object.
-         *
-         * @method ViewService#getViews
-         * @param {DomainObject} domainObject the domain object to view
-         * @returns {View[]} all views which can be used to visualize
-         *          this domain object.
-         */
-
-        /**
-         * A view provider allows view definitions (defined as extensions)
-         * to be read, and takes responsibility for filtering these down
-         * to a set that is applicable to specific domain objects. This
-         * filtering is parameterized by the extension definitions
-         * themselves; specifically:
-         *
-         * * Definitions with a `needs` property containing an array of
-         *   strings are only applicable to domain objects which have
-         *   all those capabilities.
-         *   * If the view definition has a `delegation` property that
-         *     is truthy, then domain objects which delegate capabilities
-         *     from the `needs` property will be treated as having those
-         *     capabilities for purposes of determining view applicability.
-         * * Definitions with a `type` property are only applicable to
-         *   domain object's whose `type` capability matches or inherits
-         *   from that type.
-         *
-         * Views themselves are primarily metadata, such as name, icon and
-         * description (to be shown in the UI); they do not contain any
-         * information directly applicable to rendering to the DOM, although
-         * they do contain sufficient information (such as a `templateUrl`,
-         * used in the representation bundle) to retrieve those details.
-         * The role of a view provider and of a view capability is to
-         * describe what views are available, not how to instantiate them.
-         *
-         * @memberof platform/core
-         * @constructor
-         * @param {View[]} an array of view definitions
-         * @param $log Angular's logging service
-         * @implements {ViewService}
-         */
-        function ViewProvider(views, $log) {
-
-            // Views without defined keys cannot be used in the user
-            // interface, and can result in unexpected behavior. These
-            // are filtered out using this function.
-            function validate(view) {
-                var key = view.key;
-
-                // Leave a log message to support detection of this issue.
-                if (!key) {
-                    $log.warn([
-                        "No key specified for view in ",
-                        (view.bundle || {}).path,
-                        "; omitting this view."
-                    ].join(""));
-                }
-
-                return key;
-            }
-
-            // Filter out any key-less views
-            this.views = views.filter(validate);
-        }
-
-        ViewProvider.prototype.getViews = function (domainObject) {
-            var type = domainObject.useCapability("type");
-
-            // Check if an object has all capabilities designated as `needs`
-            // for a view. Exposing a capability via delegation is taken to
-            // satisfy this filter if `allowDelegation` is true.
-            function capabilitiesMatch(domainObj, capabilities, allowDelegation) {
-                var delegation = domainObj.getCapability("delegation");
-
-                allowDelegation = allowDelegation && (delegation !== undefined);
-
-                // Check if an object has (or delegates, if allowed) a
-                // capability.
-                function hasCapability(c) {
-                    return domainObj.hasCapability(c)
-                        || (allowDelegation && delegation.doesDelegateCapability(c));
-                }
-
-                // For the reduce step below.
-                function and(a, b) {
-                    return a && b;
-                }
-
-                // Do a bulk `and` operation over all needed capabilities.
-                return capabilities.map(hasCapability).reduce(and, true);
-            }
-
-            // Check if a view and domain object type can be paired;
-            // both can restrict the others they accept.
-            function viewMatchesType(view, objType) {
-                var views = objType && (objType.getDefinition() || {}).views,
-                    matches = true;
-
-                // View is restricted to a certain type
-                if (view.type) {
-                    matches = matches && objType && objType.instanceOf(view.type);
-                }
-
-                // Type wishes to restrict its specific views
-                if (Array.isArray(views)) {
-                    matches = matches && (views.indexOf(view.key) > -1);
-                }
-
-                return matches;
-            }
-
-            // First, filter views by type (matched to domain object type.)
-            // Second, filter by matching capabilities.
-            return this.views.filter(function (view) {
-                return viewMatchesType(view, type) && capabilitiesMatch(
-                    domainObject,
-                    view.needs || [],
-                    view.delegation || false
-                );
-            });
-        };
-
-        return ViewProvider;
-    }
-);
diff --git a/platform/core/test/actions/ActionAggregatorSpec.js b/platform/core/test/actions/ActionAggregatorSpec.js
deleted file mode 100644
index 37196860245..00000000000
--- a/platform/core/test/actions/ActionAggregatorSpec.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * ActionAggregatorSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/actions/ActionAggregator"],
-    function (ActionAggregator) {
-
-        describe("Action aggregator", function () {
-            var mockAggregators,
-                aggregator;
-
-            function createMockActionProvider(actions, i) {
-                var spy = jasmine.createSpyObj("agg" + i, ["getActions"]);
-                spy.getActions.and.returnValue(actions);
-
-                return spy;
-            }
-
-            beforeEach(function () {
-                mockAggregators = [
-                    ["a", "b"],
-                    ["c"],
-                    ["d", "e", "f"]
-                ].map(createMockActionProvider);
-                aggregator = new ActionAggregator(mockAggregators);
-            });
-
-            it("consolidates results from aggregated services", function () {
-                expect(aggregator.getActions()).toEqual(
-                    ["a", "b", "c", "d", "e", "f"]
-                );
-            });
-
-            it("passes context along to all aggregated services", function () {
-                var context = { domainObject: "something" };
-
-                // Verify precondition
-                mockAggregators.forEach(function (mockAgg) {
-                    expect(mockAgg.getActions).not.toHaveBeenCalled();
-                });
-
-                aggregator.getActions(context);
-
-                // All services should have been called with this context
-                mockAggregators.forEach(function (mockAgg) {
-                    expect(mockAgg.getActions).toHaveBeenCalledWith(context);
-                });
-            });
-        });
-    }
-);
diff --git a/platform/core/test/actions/ActionCapabilitySpec.js b/platform/core/test/actions/ActionCapabilitySpec.js
deleted file mode 100644
index 2d7b16e9912..00000000000
--- a/platform/core/test/actions/ActionCapabilitySpec.js
+++ /dev/null
@@ -1,96 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * ActionCapabilitySpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/actions/ActionCapability"],
-    function (ActionCapability) {
-
-        describe("The action capability", function () {
-            var mockQ,
-                mockAction,
-                mockActionService,
-                mockDomainObject,
-                capability;
-
-            beforeEach(function () {
-                mockAction = jasmine.createSpyObj(
-                    "action",
-                    ["perform", "getMetadata"]
-                );
-                mockActionService = jasmine.createSpyObj(
-                    "actionService",
-                    ["getActions"]
-                );
-                mockQ = jasmine.createSpyObj(
-                    "$q",
-                    ["when"]
-                );
-                mockDomainObject = jasmine.createSpyObj(
-                    "domainObject",
-                    ["getId", "getModel", "getCapability", "hasCapability", "useCapability"]
-                );
-
-                mockActionService.getActions.and.returnValue([mockAction, {}]);
-
-                capability = new ActionCapability(
-                    mockQ,
-                    mockActionService,
-                    mockDomainObject
-                );
-            });
-
-            it("retrieves action for domain objects from the action service", function () {
-                // Verify precondition
-                expect(mockActionService.getActions).not.toHaveBeenCalled();
-
-                // Call getActions
-                expect(capability.getActions("some key")).toEqual([mockAction, {}]);
-
-                // Verify interaction
-                expect(mockActionService.getActions).toHaveBeenCalledWith({
-                    key: "some key",
-                    domainObject: mockDomainObject
-                });
-            });
-
-            it("promises the result of performed actions", function () {
-                var mockPromise = jasmine.createSpyObj("promise", ["then"]);
-                mockQ.when.and.returnValue(mockPromise);
-                mockAction.perform.and.returnValue("the action's result");
-
-                // Verify precondition
-                expect(mockAction.perform).not.toHaveBeenCalled();
-
-                // Perform via capability
-                expect(capability.perform()).toEqual(mockPromise);
-
-                // Verify that the action's result is what was wrapped
-                expect(mockQ.when).toHaveBeenCalledWith("the action's result");
-
-            });
-
-        });
-    }
-);
diff --git a/platform/core/test/actions/ActionProviderSpec.js b/platform/core/test/actions/ActionProviderSpec.js
deleted file mode 100644
index bbade4d9fab..00000000000
--- a/platform/core/test/actions/ActionProviderSpec.js
+++ /dev/null
@@ -1,204 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * ActionProviderSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/actions/ActionProvider"],
-    function (ActionProvider) {
-
-        describe("The action provider", function () {
-            var mockLog,
-                actions,
-                actionProvider;
-
-            function SimpleAction() {
-                return {
-                    perform: function () {
-                        return "simple";
-                    }
-                };
-            }
-
-            function CategorizedAction() {
-                return {
-                    perform: function () {
-                        return "categorized";
-                    }
-                };
-            }
-
-            CategorizedAction.category = "someCategory";
-
-            function KeyedAction() {
-                return {
-                    perform: function () {
-                        return "keyed";
-                    }
-                };
-            }
-
-            KeyedAction.key = "someKey";
-
-            function CategorizedKeyedAction() {
-                return {
-                    perform: function () {
-                        return "both";
-                    }
-                };
-            }
-
-            CategorizedKeyedAction.key = "someKey";
-            CategorizedKeyedAction.category = "someCategory";
-
-            function MetadataAction() {
-                return {
-                    perform: function () {
-                        return "metadata";
-                    },
-                    getMetadata: function () {
-                        return "custom metadata";
-                    }
-                };
-            }
-
-            MetadataAction.key = "metadata";
-
-            beforeEach(function () {
-                mockLog = jasmine.createSpyObj(
-                    '$log',
-                    ['error', 'warn', 'info', 'debug']
-                );
-                actions = [
-                    SimpleAction,
-                    CategorizedAction,
-                    KeyedAction,
-                    CategorizedKeyedAction,
-                    MetadataAction
-                ];
-                actionProvider = new ActionProvider(actions);
-            });
-
-            it("exposes provided action extensions", function () {
-                var provided = actionProvider.getActions();
-
-                // Should have gotten all actions
-                expect(provided.length).toEqual(actions.length);
-
-                // Verify that this was the action we expected
-                expect(provided[0].perform()).toEqual("simple");
-            });
-
-            it("matches provided actions by key", function () {
-                var provided = actionProvider.getActions({ key: "someKey" });
-
-                // Only two should have matched
-                expect(provided.length).toEqual(2);
-
-                // Verify that this was the action we expected
-                expect(provided[0].perform()).toEqual("keyed");
-            });
-
-            it("matches provided actions by category", function () {
-                var provided = actionProvider.getActions({ category: "someCategory" });
-
-                // Only two should have matched
-                expect(provided.length).toEqual(2);
-
-                // Verify that this was the action we expected
-                expect(provided[0].perform()).toEqual("categorized");
-            });
-
-            it("matches provided actions by both category and key", function () {
-                var provided = actionProvider.getActions({
-                    category: "someCategory",
-                    key: "someKey"
-                });
-
-                // Only two should have matched
-                expect(provided.length).toEqual(1);
-
-                // Verify that this was the action we expected
-                expect(provided[0].perform()).toEqual("both");
-            });
-
-            it("adds a getMetadata method when none is defined", function () {
-                var provided = actionProvider.getActions({
-                    category: "someCategory",
-                    key: "someKey"
-                });
-
-                // Should be defined, even though the action didn't define this
-                expect(provided[0].getMetadata).toBeDefined();
-
-                // Should have static fields, plus context
-                expect(provided[0].getMetadata().context).toEqual({
-                    key: "someKey",
-                    category: "someCategory"
-                });
-
-            });
-
-            it("does not override defined getMetadata methods", function () {
-                var provided = actionProvider.getActions({ key: "metadata" });
-                expect(provided[0].getMetadata()).toEqual("custom metadata");
-            });
-
-            describe("when actions throw errors during instantiation", function () {
-                var errorText,
-                    provided;
-
-                beforeEach(function () {
-                    errorText = "some error text";
-
-                    function BadAction() {
-                        throw new Error(errorText);
-                    }
-
-                    provided = new ActionProvider(
-                        [SimpleAction, BadAction],
-                        mockLog
-                    ).getActions();
-                });
-
-                it("logs an error", function () {
-                    expect(mockLog.error)
-                        .toHaveBeenCalledWith(jasmine.any(String));
-                });
-
-                it("reports the error's message", function () {
-                    expect(
-                        mockLog.error.calls.mostRecent().args[0].indexOf(errorText)
-                    ).not.toEqual(-1);
-                });
-
-                it("still provides valid actions", function () {
-                    expect(provided.length).toEqual(1);
-                    expect(provided[0].perform()).toEqual("simple");
-                });
-
-            });
-
-        });
-    }
-);
diff --git a/platform/core/test/actions/LoggingActionDecoratorSpec.js b/platform/core/test/actions/LoggingActionDecoratorSpec.js
deleted file mode 100644
index 332b337cbb7..00000000000
--- a/platform/core/test/actions/LoggingActionDecoratorSpec.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * LoggingActionDecoratorSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/actions/LoggingActionDecorator"],
-    function (LoggingActionDecorator) {
-
-        describe("The logging action decorator", function () {
-            var mockLog,
-                mockAction,
-                mockActionService,
-                decorator;
-
-            beforeEach(function () {
-                mockAction = jasmine.createSpyObj(
-                    "action",
-                    ["perform", "getMetadata"]
-                );
-                mockActionService = jasmine.createSpyObj(
-                    "actionService",
-                    ["getActions"]
-                );
-                mockLog = jasmine.createSpyObj(
-                    "$log",
-                    ["error", "warn", "info", "debug"]
-                );
-
-                mockActionService.getActions.and.returnValue([mockAction]);
-
-                decorator = new LoggingActionDecorator(
-                    mockLog,
-                    mockActionService
-                );
-            });
-
-            it("logs when actions are performed", function () {
-                // Verify precondition
-                expect(mockLog.info).not.toHaveBeenCalled();
-
-                // Perform an action, retrieved through the decorator
-                decorator.getActions()[0].perform();
-
-                // That should have been logged.
-                expect(mockLog.info).toHaveBeenCalled();
-            });
-
-        });
-    }
-);
diff --git a/platform/core/test/capabilities/CompositionCapabilitySpec.js b/platform/core/test/capabilities/CompositionCapabilitySpec.js
deleted file mode 100644
index 48a9ac684f8..00000000000
--- a/platform/core/test/capabilities/CompositionCapabilitySpec.js
+++ /dev/null
@@ -1,214 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * CompositionCapabilitySpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    [
-        "../../src/capabilities/CompositionCapability",
-        "../../src/capabilities/ContextualDomainObject"
-    ],
-    function (CompositionCapability, ContextualDomainObject) {
-
-        var DOMAIN_OBJECT_METHODS = [
-            "getId",
-            "getModel",
-            "getCapability",
-            "hasCapability",
-            "useCapability"
-        ];
-
-        describe("The composition capability", function () {
-            var mockDomainObject,
-                mockInjector,
-                mockObjectService,
-                composition;
-
-            // Composition Capability makes use of promise chaining,
-            // so support that, but don't introduce complication of
-            // native promises.
-            function mockPromise(value) {
-                return (value || {}).then ? value : {
-                    then: function (callback) {
-                        return mockPromise(callback(value));
-                    }
-                };
-            }
-
-            beforeEach(function () {
-                mockDomainObject = jasmine.createSpyObj(
-                    "domainObject",
-                    DOMAIN_OBJECT_METHODS
-                );
-
-                mockObjectService = jasmine.createSpyObj(
-                    "objectService",
-                    ["getObjects"]
-                );
-
-                mockInjector = {
-                    get: function (name) {
-                        return (name === "objectService") && mockObjectService;
-                    }
-                };
-
-                mockObjectService.getObjects.and.returnValue(mockPromise([]));
-
-                composition = new CompositionCapability(
-                    mockInjector,
-                    mockDomainObject
-                );
-            });
-
-            it("applies only to models with a composition field", function () {
-                expect(CompositionCapability.appliesTo({ composition: [] }))
-                    .toBeTruthy();
-                expect(CompositionCapability.appliesTo({}))
-                    .toBeFalsy();
-            });
-
-            it("requests ids found in model's composition from the object service", function () {
-                var ids = ["a", "b", "c", "xyz"];
-
-                mockDomainObject.getModel.and.returnValue({ composition: ids });
-
-                composition.invoke();
-
-                expect(mockObjectService.getObjects).toHaveBeenCalledWith(ids);
-            });
-
-            it("adds a context capability to returned domain objects", function () {
-                var result,
-                    mockChild = jasmine.createSpyObj("child", DOMAIN_OBJECT_METHODS);
-
-                mockDomainObject.getModel.and.returnValue({ composition: ["x"] });
-                mockObjectService.getObjects.and.returnValue(mockPromise({x: mockChild}));
-                mockChild.getCapability.and.returnValue(undefined);
-
-                composition.invoke().then(function (c) {
-                    result = c;
-                });
-
-                // Should have been added by a wrapper
-                expect(result[0].getCapability('context')).toBeDefined();
-
-            });
-
-            it("allows domain objects to be added", function () {
-                var result,
-                    testModel = { composition: [] },
-                    mockChild = jasmine.createSpyObj("child", DOMAIN_OBJECT_METHODS);
-
-                mockDomainObject.getModel.and.returnValue(testModel);
-                mockObjectService.getObjects.and.returnValue(mockPromise({a: mockChild}));
-                mockChild.getCapability.and.returnValue(undefined);
-                mockChild.getId.and.returnValue('a');
-
-                mockDomainObject.useCapability.and.callFake(function (key, mutator) {
-                    if (key === 'mutation') {
-                        mutator(testModel);
-
-                        return mockPromise(true);
-                    }
-                });
-
-                composition.add(mockChild).then(function (domainObject) {
-                    result = domainObject;
-                });
-
-                expect(testModel.composition).toEqual(['a']);
-
-                // Should have returned the added object in its new context
-                expect(result.getId()).toEqual('a');
-                expect(result.getCapability('context')).toBeDefined();
-                expect(result.getCapability('context').getParent())
-                    .toEqual(mockDomainObject);
-            });
-
-            it("does not re-add IDs which are already present", function () {
-                var result,
-                    testModel = { composition: ['a'] },
-                    mockChild = jasmine.createSpyObj("child", DOMAIN_OBJECT_METHODS);
-
-                mockDomainObject.getModel.and.returnValue(testModel);
-                mockObjectService.getObjects.and.returnValue(mockPromise({a: mockChild}));
-                mockChild.getCapability.and.returnValue(undefined);
-                mockChild.getId.and.returnValue('a');
-
-                mockDomainObject.useCapability.and.callFake(function (key, mutator) {
-                    if (key === 'mutation') {
-                        mutator(testModel);
-
-                        return mockPromise(true);
-                    }
-                });
-
-                composition.add(mockChild).then(function (domainObject) {
-                    result = domainObject;
-                });
-
-                // Still just 'a'
-                expect(testModel.composition).toEqual(['a']);
-
-                // Should have returned the added object in its new context
-                expect(result.getId()).toEqual('a');
-                expect(result.getCapability('context')).toBeDefined();
-                expect(result.getCapability('context').getParent())
-                    .toEqual(mockDomainObject);
-            });
-
-            it("can add objects at a specified index", function () {
-                var result,
-                    testModel = { composition: ['a', 'b', 'c'] },
-                    mockChild = jasmine.createSpyObj("child", DOMAIN_OBJECT_METHODS);
-
-                mockDomainObject.getModel.and.returnValue(testModel);
-                mockObjectService.getObjects.and.returnValue(mockPromise({a: mockChild}));
-                mockChild.getCapability.and.returnValue(undefined);
-                mockChild.getId.and.returnValue('a');
-
-                mockDomainObject.useCapability.and.callFake(function (key, mutator) {
-                    if (key === 'mutation') {
-                        mutator(testModel);
-
-                        return mockPromise(true);
-                    }
-                });
-
-                composition.add(mockChild, 1).then(function (domainObject) {
-                    result = domainObject;
-                });
-
-                // Still just 'a'
-                expect(testModel.composition).toEqual(['b', 'a', 'c']);
-
-                // Should have returned the added object in its new context
-                expect(result.getId()).toEqual('a');
-                expect(result.getCapability('context')).toBeDefined();
-                expect(result.getCapability('context').getParent())
-                    .toEqual(mockDomainObject);
-            });
-
-        });
-    }
-);
diff --git a/platform/core/test/capabilities/ContextCapabilitySpec.js b/platform/core/test/capabilities/ContextCapabilitySpec.js
deleted file mode 100644
index 8afcbd7e100..00000000000
--- a/platform/core/test/capabilities/ContextCapabilitySpec.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * ContextCapability. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/capabilities/ContextCapability"],
-    function (ContextCapability) {
-
-        var DOMAIN_OBJECT_METHODS = [
-            "getId",
-            "getModel",
-            "getCapability",
-            "hasCapability",
-            "useCapability"
-        ];
-
-        describe("The context capability", function () {
-            var mockDomainObject,
-                mockParent,
-                mockGrandparent,
-                mockContext,
-                context;
-
-            beforeEach(function () {
-                mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
-                mockParent = jasmine.createSpyObj("parent", DOMAIN_OBJECT_METHODS);
-                mockGrandparent = jasmine.createSpyObj("grandparent", DOMAIN_OBJECT_METHODS);
-                mockContext = jasmine.createSpyObj("context", ["getParent", "getRoot", "getPath"]);
-
-                mockParent.getCapability.and.returnValue(mockContext);
-                mockContext.getParent.and.returnValue(mockGrandparent);
-                mockContext.getRoot.and.returnValue(mockGrandparent);
-                mockContext.getPath.and.returnValue([mockGrandparent, mockParent]);
-
-                context = new ContextCapability(mockParent, mockDomainObject);
-            });
-
-            it("allows an object's parent to be retrieved", function () {
-                expect(context.getParent()).toEqual(mockParent);
-            });
-
-            it("allows an object's full ancestry to be retrieved", function () {
-                expect(context.getPath()).toEqual([mockGrandparent, mockParent, mockDomainObject]);
-            });
-
-            it("allows the deepest ancestor of an object to be retrieved", function () {
-                expect(context.getRoot()).toEqual(mockGrandparent);
-            });
-
-            it("treats ancestors with no context capability as deepest ancestors", function () {
-                mockParent.getCapability.and.returnValue(undefined);
-                expect(context.getPath()).toEqual([mockParent, mockDomainObject]);
-                expect(context.getRoot()).toEqual(mockParent);
-            });
-
-        });
-    }
-);
diff --git a/platform/core/test/capabilities/ContextualDomainObjectSpec.js b/platform/core/test/capabilities/ContextualDomainObjectSpec.js
deleted file mode 100644
index ced432ff977..00000000000
--- a/platform/core/test/capabilities/ContextualDomainObjectSpec.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * ContextualDomainObjectSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/capabilities/ContextualDomainObject"],
-    function (ContextualDomainObject) {
-
-        var DOMAIN_OBJECT_METHODS = [
-            "getId",
-            "getModel",
-            "getCapability",
-            "hasCapability",
-            "useCapability"
-        ];
-
-        describe("A contextual domain object", function () {
-            var mockParent,
-                mockDomainObject,
-                model,
-                contextualDomainObject;
-
-            beforeEach(function () {
-                mockParent = jasmine.createSpyObj("parent", DOMAIN_OBJECT_METHODS);
-                mockDomainObject = jasmine.createSpyObj("parent", DOMAIN_OBJECT_METHODS);
-
-                model = { someKey: "some value" };
-
-                mockDomainObject.getCapability.and.returnValue("some capability");
-                mockDomainObject.getModel.and.returnValue(model);
-
-                contextualDomainObject = new ContextualDomainObject(
-                    mockDomainObject,
-                    mockParent
-                );
-            });
-
-            it("adds a context capability to a domain object", function () {
-                var context = contextualDomainObject.getCapability('context');
-
-                // Expect something that looks like a context capability
-                expect(context).toBeDefined();
-                expect(context.getPath).toBeDefined();
-                expect(context.getRoot).toBeDefined();
-                expect(context.getParent()).toEqual(mockParent);
-            });
-
-            it("does not shadow other domain object methods", function () {
-                expect(contextualDomainObject.getModel())
-                    .toEqual(model);
-                expect(contextualDomainObject.getCapability("other"))
-                    .toEqual("some capability");
-            });
-
-        });
-    }
-);
diff --git a/platform/core/test/capabilities/CoreCapabilityProviderSpec.js b/platform/core/test/capabilities/CoreCapabilityProviderSpec.js
deleted file mode 100644
index 2bcf984ac3e..00000000000
--- a/platform/core/test/capabilities/CoreCapabilityProviderSpec.js
+++ /dev/null
@@ -1,112 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * CoreCapabilityProviderSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/capabilities/CoreCapabilityProvider"],
-    function (CoreCapabilityProvider) {
-
-        describe("The core capability provider", function () {
-            var mockLog,
-                provider;
-
-            function BasicCapability() {
-                return;
-            }
-
-            BasicCapability.key = "basic";
-
-            function ApplicableCapability() {
-                return;
-            }
-
-            ApplicableCapability.key = "applicable";
-            ApplicableCapability.appliesTo = function (model) {
-                return !model.isNotApplicable;
-            };
-
-            function KeylessCapability() {
-                return;
-            }
-
-            beforeEach(function () {
-                KeylessCapability.key = undefined;
-
-                mockLog = jasmine.createSpyObj(
-                    "$log",
-                    ["error", "warn", "info", "debug"]
-                );
-
-                provider = new CoreCapabilityProvider([
-                    BasicCapability,
-                    ApplicableCapability,
-                    KeylessCapability
-                ], mockLog);
-            });
-
-            it("returns capabilities for models, from extensions", function () {
-                expect(provider.getCapabilities({})).toEqual({
-                    basic: BasicCapability,
-                    applicable: ApplicableCapability
-                });
-            });
-
-            it("filters out capabilities which do not apply to models", function () {
-                expect(provider.getCapabilities({ isNotApplicable: true })).toEqual({
-                    basic: BasicCapability
-                });
-            });
-
-            it("logs a warning when capability extensions have not defined keys", function () {
-                // Verify precondition
-                expect(mockLog.warn).not.toHaveBeenCalled();
-
-                provider.getCapabilities({});
-
-                expect(mockLog.warn).toHaveBeenCalled();
-
-            });
-
-            it("does not log a warning when all capability extensions are valid", function () {
-                KeylessCapability.key = "someKey";
-                provider.getCapabilities({});
-                expect(mockLog.warn).not.toHaveBeenCalled();
-            });
-
-            it("prefers higher-priority capability", function () {
-                KeylessCapability.key = BasicCapability.key;
-                expect(provider.getCapabilities({}).basic)
-                    .toEqual(BasicCapability);
-            });
-
-            // https://github.com/nasa/openmctweb/issues/49
-            it("does not log a warning for multiple capabilities with the same key", function () {
-                KeylessCapability.key = BasicCapability.key;
-                provider.getCapabilities({});
-                expect(mockLog.warn).not.toHaveBeenCalled();
-            });
-
-        });
-    }
-);
diff --git a/platform/core/test/capabilities/DelegationCapabilitySpec.js b/platform/core/test/capabilities/DelegationCapabilitySpec.js
deleted file mode 100644
index 109b1eba706..00000000000
--- a/platform/core/test/capabilities/DelegationCapabilitySpec.js
+++ /dev/null
@@ -1,110 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * DelegationCapabilitySpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/capabilities/DelegationCapability"],
-    function (DelegationCapability) {
-
-        describe("The delegation capability", function () {
-            var captured,
-                typeDef = {},
-                type,
-                capabilities,
-                children = [],
-                object = {},
-                delegation;
-
-            function capture(k) {
-                return function (v) {
-                    captured[k] = v;
-                };
-            }
-
-            function TestDomainObject(caps, id) {
-                return {
-                    getId: function () {
-                        return id;
-                    },
-                    getCapability: function (name) {
-                        return caps[name];
-                    },
-                    useCapability: function (name) {
-                        return this.getCapability(name).invoke();
-                    },
-                    hasCapability: function (name) {
-                        return this.getCapability(name) !== undefined;
-                    }
-                };
-            }
-
-            function mockPromise(value) {
-                return {
-                    then: function (callback) {
-                        return value.then
-                            ? value : mockPromise(callback(value));
-                    }
-                };
-            }
-
-            beforeEach(function () {
-                captured = {};
-                typeDef = {};
-                typeDef.delegates = ["foo"];
-                type = {
-                    getDefinition: function () {
-                        return typeDef;
-                    }
-                };
-                children = [];
-                capabilities = {
-                    type: type,
-                    composition: {
-                        invoke: function () {
-                            return mockPromise(children);
-                        }
-                    }
-                };
-                object = new TestDomainObject(capabilities);
-
-                delegation = new DelegationCapability({ when: mockPromise }, object);
-            });
-
-            it("provides a list of children which expose a desired capability", function () {
-
-                children = [
-                    new TestDomainObject({ foo: true }, 'has-capability'),
-                    new TestDomainObject({ }, 'does-not-have-capability')
-                ];
-
-                // Look up delegates
-                delegation.getDelegates('foo').then(capture('delegates'));
-
-                // Expect only the first child to be a delegate
-                expect(captured.delegates.length).toEqual(1);
-                expect(captured.delegates[0].getId()).toEqual('has-capability');
-            });
-        });
-    }
-);
diff --git a/platform/core/test/capabilities/InstantiationCapabilitySpec.js b/platform/core/test/capabilities/InstantiationCapabilitySpec.js
deleted file mode 100644
index 88bfcb4a39d..00000000000
--- a/platform/core/test/capabilities/InstantiationCapabilitySpec.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/capabilities/InstantiationCapability"],
-    function (InstantiationCapability) {
-
-        describe("The 'instantiation' capability", function () {
-            var mockInjector,
-                mockIdentifierService,
-                mockInstantiate,
-                mockIdentifier,
-                mockNow,
-                mockDomainObject,
-                instantiation;
-
-            beforeEach(function () {
-                mockInjector = jasmine.createSpyObj("$injector", ["get"]);
-                mockInstantiate = jasmine.createSpy("instantiate");
-                mockIdentifierService = jasmine.createSpyObj(
-                    'identifierService',
-                    ['parse', 'generate']
-                );
-                mockIdentifier = jasmine.createSpyObj(
-                    'identifier',
-                    ['getSpace', 'getKey', 'getDefinedSpace']
-                );
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getId', 'getCapability', 'getModel']
-                );
-
-                mockInjector.get.and.callFake(function (key) {
-                    return {
-                        'instantiate': mockInstantiate
-                    }[key];
-                });
-                mockIdentifierService.parse.and.returnValue(mockIdentifier);
-                mockIdentifierService.generate.and.returnValue("some-id");
-
-                mockNow = jasmine.createSpy();
-                mockNow.and.returnValue(1234321);
-
-                instantiation = new InstantiationCapability(
-                    mockInjector,
-                    mockIdentifierService,
-                    mockNow,
-                    mockDomainObject
-                );
-            });
-
-            it("aliases 'instantiate' as 'invoke'", function () {
-                expect(instantiation.invoke).toBe(instantiation.instantiate);
-            });
-
-            it("uses instantiate and contextualize to create domain objects", function () {
-                var mockDomainObj = jasmine.createSpyObj('domainObject', [
-                        'getId',
-                        'getModel',
-                        'getCapability',
-                        'useCapability',
-                        'hasCapability'
-                    ]), testModel = { someKey: "some value" };
-                mockInstantiate.and.returnValue(mockDomainObj);
-                instantiation.instantiate(testModel);
-                expect(mockInstantiate)
-                    .toHaveBeenCalledWith({
-                        someKey: "some value",
-                        modified: mockNow()
-                    }, jasmine.any(String));
-            });
-
-        });
-    }
-);
diff --git a/platform/core/test/capabilities/MetadataCapabilitySpec.js b/platform/core/test/capabilities/MetadataCapabilitySpec.js
deleted file mode 100644
index a94fac607ef..00000000000
--- a/platform/core/test/capabilities/MetadataCapabilitySpec.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['../../src/capabilities/MetadataCapability'],
-    function (MetadataCapability) {
-
-        describe("The metadata capability", function () {
-            var mockDomainObject,
-                mockType,
-                mockProperties,
-                testModel,
-                metadata;
-
-            function getCapability(key) {
-                return key === 'type' ? mockType : undefined;
-            }
-
-            function findValue(properties, name) {
-                var i;
-                for (i = 0; i < properties.length; i += 1) {
-                    if (properties[i].name === name) {
-                        return properties[i].value;
-                    }
-                }
-            }
-
-            beforeEach(function () {
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getId', 'getCapability', 'useCapability', 'getModel']
-                );
-                mockType = jasmine.createSpyObj(
-                    'type',
-                    ['getProperties', 'getName']
-                );
-                mockProperties = ['a', 'b', 'c'].map(function (k) {
-                    var mockProperty = jasmine.createSpyObj(
-                        'property-' + k,
-                        ['getValue', 'getDefinition']
-                    );
-                    mockProperty.getValue.and.returnValue("Value " + k);
-                    mockProperty.getDefinition.and.returnValue({ name: "Property " + k});
-
-                    return mockProperty;
-                });
-                testModel = { name: "" };
-
-                mockDomainObject.getId.and.returnValue("Test id");
-                mockDomainObject.getModel.and.returnValue(testModel);
-                mockDomainObject.getCapability.and.callFake(getCapability);
-                mockDomainObject.useCapability.and.callFake(getCapability);
-                mockType.getProperties.and.returnValue(mockProperties);
-                mockType.getName.and.returnValue("Test type");
-
-                metadata = new MetadataCapability(mockDomainObject);
-            });
-
-            it("reads properties from the domain object model", function () {
-                metadata.invoke();
-                mockProperties.forEach(function (mockProperty) {
-                    expect(mockProperty.getValue).toHaveBeenCalledWith(testModel);
-                });
-            });
-
-            it("reports type-specific properties", function () {
-                var properties = metadata.invoke();
-                expect(findValue(properties, 'Property a')).toEqual("Value a");
-                expect(findValue(properties, 'Property b')).toEqual("Value b");
-                expect(findValue(properties, 'Property c')).toEqual("Value c");
-            });
-
-            it("reports generic properties", function () {
-                var properties = metadata.invoke();
-                expect(findValue(properties, 'Type')).toEqual("Test type");
-            });
-
-        });
-    }
-);
diff --git a/platform/core/test/capabilities/MutationCapabilitySpec.js b/platform/core/test/capabilities/MutationCapabilitySpec.js
deleted file mode 100644
index 05ac4af63bf..00000000000
--- a/platform/core/test/capabilities/MutationCapabilitySpec.js
+++ /dev/null
@@ -1,139 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * MutationCapabilitySpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    [
-        "../../src/capabilities/MutationCapability",
-        "../../src/services/Topic"
-    ],
-    function (MutationCapability, Topic) {
-
-        describe("The mutation capability", function () {
-            var testModel,
-                topic,
-                mockNow,
-                domainObject = {
-                    getId: function () {
-                        return "test-id";
-                    },
-                    getModel: function () {
-                        return testModel;
-                    }
-                },
-                mutation;
-
-            beforeEach(function () {
-                testModel = { number: 6 };
-                topic = new Topic();
-                mockNow = jasmine.createSpy('now');
-                mockNow.and.returnValue(12321);
-                mutation = new MutationCapability(
-                    topic,
-                    mockNow,
-                    domainObject
-                );
-            });
-
-            it("allows mutation of a model", function () {
-                mutation.invoke(function (m) {
-                    m.number = m.number * 7;
-                });
-                expect(testModel.number).toEqual(42);
-            });
-
-            it("allows setting a model", function () {
-                mutation.invoke(function () {
-                    return { someKey: "some value" };
-                });
-                expect(testModel.number).toBeUndefined();
-                expect(testModel.someKey).toEqual("some value");
-            });
-
-            it("allows model mutation to be aborted", function () {
-                mutation.invoke(function (m) {
-                    m.number = m.number * 7;
-
-                    return false; // Should abort change
-                });
-                // Number should not have been changed
-                expect(testModel.number).toEqual(6);
-            });
-
-            it("attaches a timestamp on mutation", function () {
-                // Verify precondition
-                expect(testModel.modified).toBeUndefined();
-                mutation.invoke(function (m) {
-                    m.number = m.number * 7;
-                });
-                // Should have gotten a timestamp from 'now'
-                expect(testModel.modified).toEqual(12321);
-            });
-
-            it("allows a timestamp to be provided", function () {
-                mutation.invoke(function (m) {
-                    m.number = m.number * 7;
-                }, 42);
-                // Should have gotten a timestamp from 'now'
-                expect(testModel.modified).toEqual(42);
-            });
-
-            it("notifies listeners of mutation", function () {
-                var mockCallback = jasmine.createSpy('callback');
-                mutation.listen(mockCallback);
-                mutation.invoke(function (m) {
-                    m.number = 8;
-                });
-                expect(mockCallback).toHaveBeenCalled();
-                expect(mockCallback.calls.mostRecent().args[0].number)
-                    .toEqual(8);
-            });
-
-            it("allows listeners to stop listening", function () {
-                var mockCallback = jasmine.createSpy('callback');
-                mutation.listen(mockCallback)(); // Unlisten immediately
-                mutation.invoke(function (m) {
-                    m.number = 8;
-                });
-                expect(mockCallback).not.toHaveBeenCalled();
-            });
-
-            it("shares listeners across instances", function () {
-                var mockCallback = jasmine.createSpy('callback'),
-                    otherMutation = new MutationCapability(
-                        topic,
-                        mockNow,
-                        domainObject
-                    );
-                mutation.listen(mockCallback);
-                otherMutation.invoke(function (m) {
-                    m.number = 8;
-                });
-                expect(mockCallback).toHaveBeenCalled();
-                expect(mockCallback.calls.mostRecent().args[0].number)
-                    .toEqual(8);
-            });
-        });
-    }
-);
diff --git a/platform/core/test/capabilities/PersistenceCapabilitySpec.js b/platform/core/test/capabilities/PersistenceCapabilitySpec.js
deleted file mode 100644
index b876f8e6ece..00000000000
--- a/platform/core/test/capabilities/PersistenceCapabilitySpec.js
+++ /dev/null
@@ -1,196 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/**
- * PersistenceCapabilitySpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/capabilities/PersistenceCapability"],
-    function (PersistenceCapability) {
-
-        describe("The persistence capability", function () {
-            var mockPersistenceService,
-                mockIdentifierService,
-                mockDomainObject,
-                mockIdentifier,
-                mockNofificationService,
-                mockCacheService,
-                mockQ,
-                key = "persistence key",
-                id = "object identifier",
-                model,
-                SPACE = "some space",
-                persistence,
-                mockOpenMCT,
-                mockNewStyleDomainObject;
-
-            function asPromise(value, doCatch) {
-                return (value || {}).then ? value : {
-                    then: function (callback) {
-                        return asPromise(callback(value));
-                    },
-                    catch: function (callback) {
-                        //Define a default 'happy' catch, that skips over the
-                        // catch callback
-                        return doCatch ? asPromise(callback(value)) : asPromise(value);
-                    }
-                };
-            }
-
-            beforeEach(function () {
-                model = {
-                    someKey: "some value",
-                    name: "domain object"
-                };
-
-                mockPersistenceService = jasmine.createSpyObj(
-                    "persistenceService",
-                    ["updateObject", "readObject", "createObject", "deleteObject"]
-                );
-
-                mockIdentifierService = jasmine.createSpyObj(
-                    'identifierService',
-                    ['parse', 'generate']
-                );
-                mockIdentifier = jasmine.createSpyObj(
-                    'identifier',
-                    ['getSpace', 'getKey', 'getDefinedSpace']
-                );
-                mockQ = jasmine.createSpyObj(
-                    "$q",
-                    ["reject", "when"]
-                );
-                mockNofificationService = jasmine.createSpyObj(
-                    "notificationService",
-                    ["error"]
-                );
-                mockCacheService = jasmine.createSpyObj(
-                    "cacheService",
-                    ["get", "put", "remove", "all"]
-                );
-
-                mockDomainObject = {
-                    getId: function () {
-                        return id;
-                    },
-                    getModel: function () {
-                        return model;
-                    },
-                    useCapability: jasmine.createSpy()
-                };
-
-                mockNewStyleDomainObject = Object.assign({}, model);
-                mockNewStyleDomainObject.identifier = {
-                    namespace: SPACE,
-                    key: key
-                };
-
-                // Simulate mutation capability
-                mockDomainObject.useCapability.and.callFake(function (capability, mutator) {
-                    if (capability === 'mutation') {
-                        model = mutator(model) || model;
-                    }
-                });
-
-                mockOpenMCT = {};
-                mockOpenMCT.objects = jasmine.createSpyObj('Object API', ['save']);
-
-                mockIdentifierService.parse.and.returnValue(mockIdentifier);
-                mockIdentifier.getSpace.and.returnValue(SPACE);
-                mockIdentifier.getKey.and.returnValue(key);
-                mockQ.when.and.callFake(asPromise);
-                persistence = new PersistenceCapability(
-                    mockCacheService,
-                    mockPersistenceService,
-                    mockIdentifierService,
-                    mockNofificationService,
-                    mockQ,
-                    mockOpenMCT,
-                    mockDomainObject
-                );
-            });
-
-            describe("successful persistence", function () {
-                beforeEach(function () {
-                    mockOpenMCT.objects.save.and.returnValue(Promise.resolve(true));
-                });
-                it("creates unpersisted objects with the persistence service", function () {
-                    // Verify precondition; no call made during constructor
-                    expect(mockOpenMCT.objects.save).not.toHaveBeenCalled();
-
-                    persistence.persist();
-
-                    expect(mockOpenMCT.objects.save).toHaveBeenCalledWith(mockNewStyleDomainObject);
-                });
-
-                it("reports which persistence space an object belongs to", function () {
-                    expect(persistence.getSpace()).toEqual(SPACE);
-                });
-
-                it("refreshes the domain object model from persistence", function () {
-                    var refreshModel = {someOtherKey: "some other value"};
-                    model.persisted = 1;
-                    mockPersistenceService.readObject.and.returnValue(asPromise(refreshModel));
-                    persistence.refresh();
-                    expect(model).toEqual(refreshModel);
-                });
-
-                it("does not trigger error notification on successful"
-                    + " persistence", function () {
-                    let rejected = false;
-
-                    return persistence.persist()
-                        .catch(() => rejected = true)
-                        .then(() => {
-                            expect(rejected).toBe(false);
-                            expect(mockNofificationService.error).not.toHaveBeenCalled();
-                        });
-                });
-            });
-
-            describe("unsuccessful persistence", function () {
-                beforeEach(function () {
-                    mockOpenMCT.objects.save.and.returnValue(Promise.resolve(false));
-                });
-                it("rejects on falsey persistence result", function () {
-                    let rejected = false;
-
-                    return persistence.persist()
-                        .catch(() => rejected = true)
-                        .then(() => {
-                            expect(rejected).toBe(true);
-                        });
-                });
-
-                it("notifies user on persistence failure", function () {
-                    let rejected = false;
-
-                    return persistence.persist()
-                        .catch(() => rejected = true)
-                        .then(() => {
-                            expect(rejected).toBe(true);
-                            expect(mockNofificationService.error).toHaveBeenCalled();
-                        });
-                });
-            });
-        });
-    }
-);
diff --git a/platform/core/test/capabilities/RelationshipCapabilitySpec.js b/platform/core/test/capabilities/RelationshipCapabilitySpec.js
deleted file mode 100644
index 8821714f2a8..00000000000
--- a/platform/core/test/capabilities/RelationshipCapabilitySpec.js
+++ /dev/null
@@ -1,144 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * CompositionCapabilitySpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/capabilities/RelationshipCapability"],
-    function (RelationshipCapability) {
-
-        var DOMAIN_OBJECT_METHODS = [
-            "getId",
-            "getModel",
-            "getCapability",
-            "hasCapability",
-            "useCapability"
-        ];
-
-        describe("The relationship capability", function () {
-            var mockDomainObject,
-                mockInjector,
-                mockObjectService,
-                relationship;
-
-            // Composition Capability makes use of promise chaining,
-            // so support that, but don't introduce complication of
-            // native promises.
-            function mockPromise(value) {
-                return {
-                    then: function (callback) {
-                        return mockPromise(callback(value));
-                    }
-                };
-            }
-
-            beforeEach(function () {
-                mockDomainObject = jasmine.createSpyObj(
-                    "domainObject",
-                    DOMAIN_OBJECT_METHODS
-                );
-
-                mockObjectService = jasmine.createSpyObj(
-                    "objectService",
-                    ["getObjects"]
-                );
-
-                mockInjector = {
-                    get: function (name) {
-                        return (name === "objectService") && mockObjectService;
-                    }
-                };
-
-                mockObjectService.getObjects.and.returnValue(mockPromise([]));
-
-                relationship = new RelationshipCapability(
-                    mockInjector,
-                    mockDomainObject
-                );
-            });
-
-            it("applies only to models with a 'relationships' field", function () {
-                expect(RelationshipCapability.appliesTo({ relationships: {} }))
-                    .toBeTruthy();
-                expect(RelationshipCapability.appliesTo({}))
-                    .toBeFalsy();
-            });
-
-            it("requests ids found in model's composition from the object service", function () {
-                var ids = ["a", "b", "c", "xyz"];
-
-                mockDomainObject.getModel.and.returnValue({ relationships: { xyz: ids } });
-
-                relationship.getRelatedObjects('xyz');
-
-                expect(mockObjectService.getObjects).toHaveBeenCalledWith(ids);
-            });
-
-            it("provides a list of relationship types", function () {
-                mockDomainObject.getModel.and.returnValue({
-                    relationships: {
-                        abc: ['a', 'b'],
-                        def: "not an array, should be ignored",
-                        xyz: []
-                    }
-                });
-                expect(relationship.listRelationships()).toEqual(['abc', 'xyz']);
-            });
-
-            it("avoids redundant requests", function () {
-                // Lookups can be expensive, so this capability
-                // should have some self-caching
-                mockDomainObject.getModel
-                    .and.returnValue({ relationships: { xyz: ['a'] } });
-
-                // Call twice; response should be the same object instance
-                expect(relationship.getRelatedObjects('xyz'))
-                    .toBe(relationship.getRelatedObjects('xyz'));
-
-                // Should have only made one call
-                expect(mockObjectService.getObjects.calls.count())
-                    .toEqual(1);
-            });
-
-            it("makes new requests on modification", function () {
-                // Lookups can be expensive, so this capability
-                // should have some self-caching
-                var testModel;
-
-                testModel = { relationships: { xyz: ['a'] } };
-
-                mockDomainObject.getModel.and.returnValue(testModel);
-
-                // Call twice, but as if modification had occurred in between
-                relationship.getRelatedObjects('xyz');
-                testModel.modified = 123;
-                relationship.getRelatedObjects('xyz');
-
-                // Should have only made one call
-                expect(mockObjectService.getObjects.calls.count())
-                    .toEqual(2);
-            });
-
-        });
-    }
-);
diff --git a/platform/core/test/identifiers/IdentifierProviderSpec.js b/platform/core/test/identifiers/IdentifierProviderSpec.js
deleted file mode 100644
index a29ccd39ba6..00000000000
--- a/platform/core/test/identifiers/IdentifierProviderSpec.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/identifiers/IdentifierProvider"],
-    function (IdentifierProvider) {
-
-        describe("IdentifierProvider", function () {
-            var defaultSpace,
-                provider;
-
-            beforeEach(function () {
-                defaultSpace = "some-default-space";
-                provider = new IdentifierProvider(defaultSpace);
-            });
-
-            it("generates unique identifiers", function () {
-                expect(provider.generate())
-                    .not.toEqual(provider.generate());
-            });
-
-            it("allows spaces to be specified for generated identifiers", function () {
-                var specificSpace = "some-specific-space",
-                    id = provider.generate(specificSpace);
-                expect(id).toEqual(jasmine.any(String));
-                expect(provider.parse(id).getDefinedSpace())
-                    .toEqual(specificSpace);
-            });
-
-            it("parses identifiers using the default space", function () {
-                expect(provider.parse("some-unprefixed-id").getSpace())
-                    .toEqual(defaultSpace);
-            });
-
-        });
-    }
-);
diff --git a/platform/core/test/identifiers/IdentifierSpec.js b/platform/core/test/identifiers/IdentifierSpec.js
deleted file mode 100644
index 2025d97dad6..00000000000
--- a/platform/core/test/identifiers/IdentifierSpec.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/identifiers/Identifier"],
-    function (Identifier) {
-
-        describe("A parsed domain object identifier", function () {
-            var id,
-                defaultSpace,
-                identifier;
-
-            beforeEach(function () {
-                defaultSpace = "someDefaultSpace";
-            });
-
-            describe("when space is encoded", function () {
-                var idSpace, idKey;
-
-                beforeEach(function () {
-                    idSpace = "a-specific-space";
-                    idKey = "a-specific-key";
-                    id = idSpace + ":" + idKey;
-                    identifier = new Identifier(id, defaultSpace);
-                });
-
-                it("provides the encoded space", function () {
-                    expect(identifier.getSpace()).toEqual(idSpace);
-                });
-
-                it("provides the key within that space", function () {
-                    expect(identifier.getKey()).toEqual(idKey);
-                });
-
-                it("provides the defined space", function () {
-                    expect(identifier.getDefinedSpace()).toEqual(idSpace);
-                });
-            });
-
-            describe("when space is not encoded", function () {
-                beforeEach(function () {
-                    id = "a-generic-id";
-                    identifier = new Identifier(id, defaultSpace);
-                });
-
-                it("provides the default space", function () {
-                    expect(identifier.getSpace()).toEqual(defaultSpace);
-                });
-
-                it("provides the id as the key", function () {
-                    expect(identifier.getKey()).toEqual(id);
-                });
-
-                it("provides no defined space", function () {
-                    expect(identifier.getDefinedSpace()).toEqual(undefined);
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/core/test/models/CachingModelDecoratorSpec.js b/platform/core/test/models/CachingModelDecoratorSpec.js
deleted file mode 100644
index 1fcf4b3acaa..00000000000
--- a/platform/core/test/models/CachingModelDecoratorSpec.js
+++ /dev/null
@@ -1,157 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [
-        "../../src/models/CachingModelDecorator",
-        "../../src/models/ModelCacheService"
-    ],
-    function (CachingModelDecorator, ModelCacheService) {
-
-        xdescribe("The caching model decorator", function () {
-            var mockModelService,
-                mockCallback,
-                testModels,
-                decorator;
-
-            function asPromise(value) {
-                return (value || {}).then ? value : {
-                    then: function (callback) {
-                        return asPromise(callback(value));
-                    }
-                };
-            }
-
-            function fakePromise() {
-                var chains = [],
-                    callbacks = [];
-
-                return {
-                    then: function (callback) {
-                        var next = fakePromise();
-                        callbacks.push(callback);
-                        chains.push(next);
-
-                        return next;
-                    },
-                    resolve: function (value) {
-                        callbacks.forEach(function (cb, i) {
-                            chains[i].resolve(cb(value));
-                        });
-                    }
-                };
-            }
-
-            beforeEach(function () {
-                mockCallback = jasmine.createSpy();
-                mockModelService = jasmine.createSpyObj('modelService', ['getModels']);
-                testModels = {
-                    a: { someKey: "some value" },
-                    b: { someOtherKey: "some other value" }
-                };
-                mockModelService.getModels.and.returnValue(asPromise(testModels));
-                decorator = new CachingModelDecorator(
-                    new ModelCacheService(),
-                    mockModelService
-                );
-            });
-
-            it("loads models from its wrapped model service", function () {
-                decorator.getModels(['a', 'b']).then(mockCallback);
-                expect(mockCallback).toHaveBeenCalledWith(testModels);
-            });
-
-            it("does not try to reload cached models", function () {
-                mockModelService.getModels.and.returnValue(asPromise({ a: testModels.a }));
-                decorator.getModels(['a']);
-                mockModelService.getModels.and.returnValue(asPromise(testModels));
-                decorator.getModels(['a', 'b']);
-                expect(mockModelService.getModels).not.toHaveBeenCalledWith(['a', 'b']);
-                expect(mockModelService.getModels.calls.mostRecent().args[0]).toEqual(['b']);
-            });
-
-            it("does not call its wrapped model service if not needed", function () {
-                decorator.getModels(['a', 'b']);
-                expect(mockModelService.getModels.calls.count()).toEqual(1);
-                decorator.getModels(['a', 'b']).then(mockCallback);
-                expect(mockModelService.getModels.calls.count()).toEqual(1);
-                // Verify that we still got back our models, even though
-                // no new call to the wrapped service was made
-                expect(mockCallback).toHaveBeenCalledWith(testModels);
-            });
-
-            it("ensures a single object instance, even for multiple concurrent calls", function () {
-                var promiseA, promiseB;
-
-                promiseA = fakePromise();
-                promiseB = fakePromise();
-
-                // Issue two calls before those promises resolve
-                mockModelService.getModels.and.returnValue(promiseA);
-                decorator.getModels(['a']);
-                mockModelService.getModels.and.returnValue(promiseB);
-                decorator.getModels(['a']).then(mockCallback);
-
-                // Then resolve those promises. Note that we're whiteboxing here
-                // to figure out which promises to resolve (that is, we know that
-                // two thens are chained after each getModels)
-                promiseA.resolve(testModels);
-                promiseB.resolve({
-                    a: { someNewKey: "some other value" }
-                });
-
-                // Ensure that we have a pointer-identical instance
-                expect(mockCallback.calls.mostRecent().args[0].a)
-                    .toEqual({ someNewKey: "some other value" });
-                expect(mockCallback.calls.mostRecent().args[0].a)
-                    .toBe(testModels.a);
-            });
-
-            it("is robust against updating with undefined values", function () {
-                var promiseA, promiseB;
-
-                promiseA = fakePromise();
-                promiseB = fakePromise();
-
-                // Issue two calls before those promises resolve
-                mockModelService.getModels.and.returnValue(promiseA);
-                decorator.getModels(['a']);
-                mockModelService.getModels.and.returnValue(promiseB);
-                decorator.getModels(['a']).then(mockCallback);
-
-                // Some model providers might erroneously add undefined values
-                // under requested keys, so handle that
-                promiseA.resolve({
-                    a: undefined
-                });
-                promiseB.resolve({
-                    a: { someNewKey: "some other value" }
-                });
-
-                // Should still have gotten the model
-                expect(mockCallback.calls.mostRecent().args[0].a)
-                    .toEqual({ someNewKey: "some other value" });
-            });
-
-        });
-    }
-);
diff --git a/platform/core/test/models/MissingModelDecoratorSpec.js b/platform/core/test/models/MissingModelDecoratorSpec.js
deleted file mode 100644
index 88a235691fb..00000000000
--- a/platform/core/test/models/MissingModelDecoratorSpec.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/models/MissingModelDecorator"],
-    function (MissingModelDecorator) {
-
-        describe("The missing model decorator", function () {
-            var mockModelService,
-                testModels,
-                decorator;
-
-            function asPromise(value) {
-                return (value || {}).then ? value : {
-                    then: function (callback) {
-                        return asPromise(callback(value));
-                    }
-                };
-            }
-
-            beforeEach(function () {
-                mockModelService = jasmine.createSpyObj(
-                    "modelService",
-                    ["getModels"]
-                );
-
-                testModels = {
-                    testId: { someKey: "some value" }
-                };
-
-                mockModelService.getModels.and.returnValue(asPromise(testModels));
-
-                decorator = new MissingModelDecorator(mockModelService);
-            });
-
-            it("delegates to the wrapped model service", function () {
-                decorator.getModels(['a', 'b', 'c']);
-                expect(mockModelService.getModels)
-                    .toHaveBeenCalledWith(['a', 'b', 'c']);
-            });
-
-            it("provides models for any IDs which are missing", function () {
-                var models;
-                decorator.getModels(['testId', 'otherId'])
-                    .then(function (m) {
-                        models = m;
-                    });
-                expect(models.otherId).toBeDefined();
-            });
-
-            it("does not overwrite existing models", function () {
-                var models;
-                decorator.getModels(['testId', 'otherId'])
-                    .then(function (m) {
-                        models = m;
-                    });
-                expect(models.testId).toEqual({ someKey: "some value" });
-            });
-
-            it("does not modify the wrapped service's response", function () {
-                decorator.getModels(['testId', 'otherId']);
-                expect(testModels.otherId).toBeUndefined();
-            });
-        });
-
-    }
-);
diff --git a/platform/core/test/models/ModelAggregatorSpec.js b/platform/core/test/models/ModelAggregatorSpec.js
deleted file mode 100644
index 3f94234918b..00000000000
--- a/platform/core/test/models/ModelAggregatorSpec.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * ModelAggregatorSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/models/ModelAggregator"],
-    function (ModelAggregator) {
-
-        describe("The model aggregator", function () {
-            var mockQ,
-                mockProviders,
-                modelList = [
-                    {
-                        "a": { someKey: "some value" },
-                        "b": undefined
-                    },
-                    {
-                        "b": { someOtherKey: "some other value" },
-                        "a": undefined
-                    }
-                ],
-                aggregator;
-
-            beforeEach(function () {
-                mockQ = jasmine.createSpyObj("$q", ["all"]);
-                mockProviders = modelList.map(function (models, i) {
-                    var mockProvider = jasmine.createSpyObj(
-                        "mockProvider" + i,
-                        ["getModels"]
-                    );
-                    mockProvider.getModels.and.returnValue(models);
-
-                    return mockProvider;
-                });
-
-                mockQ.all.and.returnValue({
-                    then: function (c) {
-                        return c(modelList);
-                    }
-                });
-
-                aggregator = new ModelAggregator(mockQ, mockProviders);
-            });
-
-            it("aggregates results promised by multiple providers", function () {
-                expect(aggregator.getModels(["a", "b"])).toEqual({
-                    "a": { someKey: "some value" },
-                    "b": { someOtherKey: "some other value" }
-                });
-            });
-
-            it("passes ids to all aggregated providers", function () {
-                aggregator.getModels(["a", "b"]);
-
-                mockProviders.forEach(function (mockProvider) {
-                    expect(mockProvider.getModels)
-                        .toHaveBeenCalledWith(["a", "b"]);
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/core/test/models/ModelCacheServiceSpec.js b/platform/core/test/models/ModelCacheServiceSpec.js
deleted file mode 100644
index 134146e794b..00000000000
--- a/platform/core/test/models/ModelCacheServiceSpec.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(['../../src/models/ModelCacheService'], function (ModelCacheService) {
-    describe("ModelCacheService", function () {
-        var testIds,
-            testModels,
-            cacheService;
-
-        beforeEach(function () {
-            testIds = ['a', 'b', 'c', 'd'];
-            testModels = testIds.reduce(function (models, id) {
-                models[id] = { someKey: "some value for " + id };
-
-                return models;
-            }, {});
-            cacheService = new ModelCacheService();
-        });
-
-        describe("when populated with models", function () {
-            beforeEach(function () {
-                testIds.forEach(function (id) {
-                    cacheService.put(id, testModels[id]);
-                });
-            });
-
-            it("indicates that it has these models", function () {
-                testIds.forEach(function (id) {
-                    expect(cacheService.has(id)).toBe(true);
-                });
-            });
-
-            it("provides all of these models", function () {
-                expect(cacheService.all()).toEqual(testModels);
-            });
-
-            it("allows models to be retrieved", function () {
-                testIds.forEach(function (id) {
-                    expect(cacheService.get(id)).toEqual(testModels[id]);
-                });
-            });
-
-            it("allows models to be removed", function () {
-                cacheService.remove('a');
-                expect(cacheService.has('a')).toBe(false);
-            });
-        });
-    });
-});
diff --git a/platform/core/test/models/PersistedModelProviderSpec.js b/platform/core/test/models/PersistedModelProviderSpec.js
deleted file mode 100644
index 3aca9354428..00000000000
--- a/platform/core/test/models/PersistedModelProviderSpec.js
+++ /dev/null
@@ -1,173 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * PersistedModelProviderSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/models/PersistedModelProvider"],
-    function (PersistedModelProvider) {
-
-        describe("The persisted model provider", function () {
-            var mockQ,
-                mockPersistenceService,
-                SPACE = "space0",
-                modTimes,
-                mockNow,
-                provider;
-
-            function mockPromise(value) {
-                return (value || {}).then ? value : {
-                    then: function (callback) {
-                        return mockPromise(callback(value));
-                    },
-                    testValue: value
-                };
-            }
-
-            function mockAll(mockPromises) {
-                return mockPromise(mockPromises.map(function (p) {
-                    return p.testValue;
-                }));
-            }
-
-            beforeEach(function () {
-                modTimes = {};
-                mockQ = {
-                    when: mockPromise,
-                    all: mockAll
-                };
-                mockPersistenceService = jasmine.createSpyObj(
-                    'persistenceService',
-                    [
-                        'createObject',
-                        'readObject',
-                        'updateObject',
-                        'deleteObject',
-                        'listSpaces',
-                        'listObjects'
-                    ]
-                );
-                mockNow = jasmine.createSpy("now");
-
-                mockPersistenceService.readObject
-                    .and.callFake(function (space, id) {
-                        return mockPromise({
-                            space: space,
-                            id: id,
-                            modified: (modTimes[space] || {})[id],
-                            persisted: 0
-                        });
-                    });
-                mockPersistenceService.listSpaces
-                    .and.returnValue(mockPromise([SPACE]));
-
-                provider = new PersistedModelProvider(
-                    mockPersistenceService,
-                    mockQ,
-                    mockNow,
-                    SPACE
-                );
-            });
-
-            it("reads object models from persistence", function () {
-                var models;
-
-                provider.getModels(["a", "x", "zz"]).then(function (m) {
-                    models = m;
-                });
-
-                expect(models).toEqual({
-                    a: {
-                        space: SPACE,
-                        id: "a",
-                        persisted: 0,
-                        modified: undefined
-                    },
-                    x: {
-                        space: SPACE,
-                        id: "x",
-                        persisted: 0,
-                        modified: undefined
-                    },
-                    zz: {
-                        space: SPACE,
-                        id: "zz",
-                        persisted: 0,
-                        modified: undefined
-                    }
-                });
-            });
-
-            it("ensures that persisted timestamps are present", function () {
-                var mockCallback = jasmine.createSpy("callback"),
-                    testModels = {
-                        a: {
-                            modified: 123,
-                            persisted: 1984,
-                            name: "A"
-                        },
-                        b: {
-                            persisted: 1977,
-                            name: "B"
-                        },
-                        c: {
-                            modified: 42,
-                            name: "C"
-                        },
-                        d: { name: "D" }
-                    };
-
-                mockPersistenceService.readObject.and.callFake(
-                    function (space, id) {
-                        return mockPromise(testModels[id]);
-                    }
-                );
-                mockNow.and.returnValue(12321);
-
-                provider.getModels(Object.keys(testModels)).then(mockCallback);
-
-                expect(mockCallback).toHaveBeenCalledWith({
-                    a: {
-                        modified: 123,
-                        persisted: 1984,
-                        name: "A"
-                    },
-                    b: {
-                        persisted: 1977,
-                        name: "B"
-                    },
-                    c: {
-                        modified: 42,
-                        persisted: 42,
-                        name: "C"
-                    },
-                    d: {
-                        persisted: 12321,
-                        name: "D"
-                    }
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/core/test/models/StaticModelProviderSpec.js b/platform/core/test/models/StaticModelProviderSpec.js
deleted file mode 100644
index 8f2dd59f630..00000000000
--- a/platform/core/test/models/StaticModelProviderSpec.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * StaticModelProviderSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/models/StaticModelProvider"],
-    function (StaticModelProvider) {
-
-        describe("The static model provider", function () {
-            var models = [
-                    {
-                        "id": "a",
-                        "model": {
-                            "name": "Thing A",
-                            "someProperty": "Some Value A"
-                        }
-                    },
-                    {
-                        "id": "b",
-                        "model": {
-                            "name": "Thing B",
-                            "someProperty": "Some Value B"
-                        }
-                    }
-                ],
-                mockLog,
-                mockQ,
-                provider;
-
-            beforeEach(function () {
-                mockQ = jasmine.createSpyObj("$q", ["when"]);
-                mockLog = jasmine.createSpyObj("$log", ["error", "warn", "info", "debug"]);
-                provider = new StaticModelProvider(models, mockQ, mockLog);
-            });
-
-            it("provides models from extension declarations", function () {
-                var mockPromise = {
-                    then: function () {
-                        return;
-                    }
-                };
-                mockQ.when.and.returnValue(mockPromise);
-
-                // Verify that we got the promise as the return value
-                expect(provider.getModels(["a", "b"])).toEqual(mockPromise);
-
-                // Verify that the promise has the desired models
-                expect(mockQ.when.calls.count()).toEqual(1);
-                expect(mockQ.when.calls.mostRecent().args[0].a.name).toEqual("Thing A");
-                expect(mockQ.when.calls.mostRecent().args[0].a.someProperty).toEqual("Some Value A");
-                expect(mockQ.when.calls.mostRecent().args[0].b.name).toEqual("Thing B");
-                expect(mockQ.when.calls.mostRecent().args[0].b.someProperty).toEqual("Some Value B");
-            });
-
-            it("does not provide models which are not in extension declarations", function () {
-                provider.getModels(["c"]);
-
-                // Verify that the promise has the desired models
-                expect(mockQ.when.calls.count()).toEqual(1);
-                expect(mockQ.when.calls.mostRecent().args[0].c).toBeUndefined();
-            });
-
-            it("logs a warning when model definitions are malformed", function () {
-                // Verify precondition
-                expect(mockLog.warn).not.toHaveBeenCalled();
-
-                // Shouldn't fail with an exception
-                expect(new StaticModelProvider([
-                    { "bad": "no id" },
-                    { "id": "...but no model..." },
-                    { "model": "...and no id..." },
-                    {
-                        "id": -40,
-                        "model": {}
-                    },
-                    {
-                        "model": "should be an object",
-                        "id": "x"
-                    }
-                ], mockQ, mockLog)).toBeDefined();
-
-                // Should show warnings
-                expect(mockLog.warn.calls.count()).toEqual(5);
-            });
-
-        });
-    }
-);
diff --git a/platform/core/test/objects/DomainObjectProviderSpec.js b/platform/core/test/objects/DomainObjectProviderSpec.js
deleted file mode 100644
index ffab540d417..00000000000
--- a/platform/core/test/objects/DomainObjectProviderSpec.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * DomainObjectProviderSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    [
-        "../../src/objects/DomainObjectProvider",
-        "../../src/objects/DomainObjectImpl"
-    ],
-    function (DomainObjectProvider, DomainObjectImpl) {
-
-        describe("The domain object provider", function () {
-            var mockModelService,
-                mockInstantiate,
-                provider;
-
-            function mockPromise(value) {
-                return (value && value.then) ? value : {
-                    then: function (callback) {
-                        return mockPromise(callback(value));
-                    },
-                    // Provide a synchronous way to get a value out
-                    // of this phony promise.
-                    testValue: value
-                };
-            }
-
-            beforeEach(function () {
-                mockModelService = jasmine.createSpyObj(
-                    "modelService",
-                    ["getModels"]
-                );
-                mockInstantiate = jasmine.createSpy("instantiate");
-
-                mockInstantiate.and.callFake(function (model, id) {
-                    return new DomainObjectImpl(id, model, {});
-                });
-
-                provider = new DomainObjectProvider(
-                    mockModelService,
-                    mockInstantiate
-                );
-            });
-
-            it("requests models from the model service", function () {
-                var ids = ["a", "b", "c"];
-                mockModelService.getModels.and.returnValue(mockPromise({}));
-                provider.getObjects(ids);
-                expect(mockModelService.getModels).toHaveBeenCalledWith(ids);
-            });
-
-            it("instantiates objects with provided models", function () {
-                var ids = ["a", "b", "c"],
-                    model = { someKey: "some value"},
-                    result;
-                mockModelService.getModels.and.returnValue(mockPromise({ a: model }));
-                result = provider.getObjects(ids).testValue;
-                expect(mockInstantiate).toHaveBeenCalledWith(model, 'a');
-                expect(result.a.getId()).toEqual("a");
-                expect(result.a.getModel()).toEqual(model);
-            });
-
-        });
-    }
-);
diff --git a/platform/core/test/objects/DomainObjectSpec.js b/platform/core/test/objects/DomainObjectSpec.js
deleted file mode 100644
index b024edb03e4..00000000000
--- a/platform/core/test/objects/DomainObjectSpec.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * DomainObjectSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/objects/DomainObjectImpl"],
-    function (DomainObject) {
-
-        describe("A domain object", function () {
-            var testId = "test id",
-                testModel = { someKey: "some value"},
-                testCapabilities = {
-                    "static": "some static capability",
-                    "dynamic": function (domainObject) {
-                        return "Dynamically generated for "
-                                    + domainObject.getId();
-                    },
-                    "invokable": {
-                        invoke: function (arg) {
-                            return "invoked with " + arg;
-                        }
-                    }
-                },
-                domainObject;
-
-            beforeEach(function () {
-                domainObject = new DomainObject(
-                    testId,
-                    testModel,
-                    testCapabilities
-                );
-            });
-
-            it("reports its id", function () {
-                expect(domainObject.getId()).toEqual(testId);
-            });
-
-            it("reports its model", function () {
-                expect(domainObject.getModel()).toEqual(testModel);
-            });
-
-            it("reports static capabilities", function () {
-                expect(domainObject.getCapability("static"))
-                    .toEqual("some static capability");
-            });
-
-            it("instantiates dynamic capabilities", function () {
-                expect(domainObject.getCapability("dynamic"))
-                    .toEqual("Dynamically generated for test id");
-            });
-
-            it("allows for checking for the presence of capabilities", function () {
-                Object.keys(testCapabilities).forEach(function (capability) {
-                    expect(domainObject.hasCapability(capability)).toBeTruthy();
-                });
-                expect(domainObject.hasCapability("somethingElse")).toBeFalsy();
-            });
-
-            it("allows for shorthand capability invocation", function () {
-                expect(domainObject.useCapability("invokable", "a specific value"))
-                    .toEqual("invoked with a specific value");
-            });
-
-        });
-    }
-);
diff --git a/platform/core/test/runs/TransactingMutationListenerSpec.js b/platform/core/test/runs/TransactingMutationListenerSpec.js
deleted file mode 100644
index 4912acd3258..00000000000
--- a/platform/core/test/runs/TransactingMutationListenerSpec.js
+++ /dev/null
@@ -1,112 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/runs/TransactingMutationListener"],
-    function (TransactingMutationListener) {
-
-        describe("TransactingMutationListener", function () {
-            var mockTopic,
-                mockMutationTopic,
-                mockCacheService,
-                mockTransactionService,
-                mockDomainObject,
-                mockModel,
-                mockPersistence;
-
-            beforeEach(function () {
-                mockTopic = jasmine.createSpy('topic');
-                mockMutationTopic =
-                    jasmine.createSpyObj('mutation', ['listen']);
-                mockCacheService =
-                    jasmine.createSpyObj('cacheService', [
-                        'put'
-                    ]);
-                mockTransactionService =
-                    jasmine.createSpyObj('transactionService', [
-                        'isActive',
-                        'startTransaction',
-                        'commit'
-                    ]);
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getId', 'getCapability', 'getModel']
-                );
-                mockPersistence = jasmine.createSpyObj(
-                    'persistence',
-                    ['persist', 'refresh', 'persisted']
-                );
-
-                mockTopic.and.callFake(function (t) {
-                    expect(t).toBe('mutation');
-
-                    return mockMutationTopic;
-                });
-
-                mockDomainObject.getId.and.returnValue('mockId');
-                mockDomainObject.getCapability.and.callFake(function (c) {
-                    expect(c).toBe('persistence');
-
-                    return mockPersistence;
-                });
-                mockModel = {};
-                mockDomainObject.getModel.and.returnValue(mockModel);
-
-                mockPersistence.persisted.and.returnValue(true);
-
-                return new TransactingMutationListener(
-                    mockTopic,
-                    mockTransactionService,
-                    mockCacheService
-                );
-            });
-
-            it("listens for mutation", function () {
-                expect(mockMutationTopic.listen)
-                    .toHaveBeenCalledWith(jasmine.any(Function));
-            });
-
-            it("calls persist if the model has changed", function () {
-                mockModel.persisted = Date.now();
-
-                //Mark the model dirty by setting the mutated date later than the last persisted date.
-                mockModel.modified = mockModel.persisted + 1;
-
-                mockMutationTopic.listen.calls.mostRecent()
-                    .args[0](mockDomainObject);
-
-                expect(mockPersistence.persist).toHaveBeenCalled();
-            });
-
-            it("does not call persist if the model has not changed", function () {
-                mockModel.persisted = Date.now();
-
-                mockModel.modified = mockModel.persisted;
-
-                mockMutationTopic.listen.calls.mostRecent()
-                    .args[0](mockDomainObject);
-
-                expect(mockPersistence.persist).not.toHaveBeenCalled();
-            });
-        });
-    }
-);
diff --git a/platform/core/test/services/InstantiateSpec.js b/platform/core/test/services/InstantiateSpec.js
deleted file mode 100644
index ffd2e281d1b..00000000000
--- a/platform/core/test/services/InstantiateSpec.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/services/Instantiate"],
-    function (Instantiate) {
-
-        describe("The 'instantiate' service", function () {
-
-            var mockCapabilityService,
-                mockIdentifierService,
-                mockCapabilityConstructor,
-                mockCapabilityInstance,
-                mockCacheService,
-                idCounter,
-                testModel,
-                instantiate,
-                domainObject;
-
-            beforeEach(function () {
-                idCounter = 0;
-
-                mockCapabilityService = jasmine.createSpyObj(
-                    'capabilityService',
-                    ['getCapabilities']
-                );
-                mockIdentifierService = jasmine.createSpyObj(
-                    'identifierService',
-                    ['parse', 'generate']
-                );
-                mockCapabilityConstructor = jasmine.createSpy('capability');
-                mockCapabilityInstance = {};
-                mockCapabilityService.getCapabilities.and.returnValue({
-                    something: mockCapabilityConstructor
-                });
-                mockCapabilityConstructor.and.returnValue(mockCapabilityInstance);
-
-                mockIdentifierService.generate.and.callFake(function (space) {
-                    return (space ? (space + ":") : "")
-                            + "some-id-" + (idCounter += 1);
-                });
-
-                mockCacheService = jasmine.createSpyObj(
-                    'cacheService',
-                    ['get', 'put', 'remove', 'all']
-                );
-
-                testModel = { someKey: "some value" };
-
-                instantiate = new Instantiate(
-                    mockCapabilityService,
-                    mockIdentifierService,
-                    mockCacheService
-                );
-                domainObject = instantiate(testModel);
-            });
-
-            it("loads capabilities from the capability service", function () {
-                expect(mockCapabilityService.getCapabilities)
-                    .toHaveBeenCalledWith(testModel);
-            });
-
-            it("exposes loaded capabilities from the created object", function () {
-                expect(domainObject.getCapability('something'))
-                    .toBe(mockCapabilityInstance);
-                expect(mockCapabilityConstructor)
-                    .toHaveBeenCalledWith(domainObject);
-            });
-
-            it("exposes the provided model", function () {
-                expect(domainObject.getModel()).toEqual(testModel);
-            });
-
-            it("provides unique identifiers", function () {
-                expect(domainObject.getId()).toEqual(jasmine.any(String));
-                expect(instantiate(testModel).getId())
-                    .not.toEqual(domainObject.getId());
-            });
-
-            it("caches the instantiated model", function () {
-                expect(mockCacheService.put).toHaveBeenCalledWith(
-                    domainObject.getId(),
-                    testModel
-                );
-            });
-        });
-
-    }
-);
diff --git a/platform/core/test/services/NowSpec.js b/platform/core/test/services/NowSpec.js
deleted file mode 100644
index b083fd453b2..00000000000
--- a/platform/core/test/services/NowSpec.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/services/Now"],
-    function (Now) {
-
-        describe("The 'now' service", function () {
-            var now = new Now();
-
-            it("reports system time", function () {
-                var a = Date.now(),
-                    b = now(),
-                    c = Date.now();
-
-                // Clock could, in principle, tick between evaluating the
-                // expressions above. We can't predict or prevent this but
-                // want the test to be stable, so we only verify that now()
-                // returns a value that makes sense given a previous and
-                // subsequent measurement from Date.now()
-                expect(a <= b).toBeTruthy();
-                expect(b <= c).toBeTruthy();
-                expect(b).toBeDefined();
-            });
-
-        });
-    }
-);
diff --git a/platform/core/test/services/ThrottleSpec.js b/platform/core/test/services/ThrottleSpec.js
deleted file mode 100644
index d53b57d6d62..00000000000
--- a/platform/core/test/services/ThrottleSpec.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/services/Throttle"],
-    function (Throttle) {
-
-        describe("The 'throttle' service", function () {
-            var throttle,
-                mockTimeout,
-                mockFn,
-                mockPromise;
-
-            beforeEach(function () {
-                mockTimeout = jasmine.createSpy("$timeout");
-                mockPromise = jasmine.createSpyObj("promise", ["then"]);
-                mockFn = jasmine.createSpy("fn");
-                mockTimeout.and.returnValue(mockPromise);
-                throttle = new Throttle(mockTimeout);
-            });
-
-            it("provides functions which run on a timeout", function () {
-                var throttled = throttle(mockFn);
-                // Verify precondition: Not called at throttle-time
-                expect(mockTimeout).not.toHaveBeenCalled();
-                expect(throttled()).toEqual(mockPromise);
-                expect(mockFn).not.toHaveBeenCalled();
-                expect(mockTimeout)
-                    .toHaveBeenCalledWith(jasmine.any(Function), 0, false);
-            });
-
-            it("schedules only one timeout at a time", function () {
-                var throttled = throttle(mockFn);
-                throttled();
-                throttled();
-                throttled();
-                expect(mockTimeout.calls.count()).toEqual(1);
-            });
-
-            it("schedules additional invocations after resolution", function () {
-                var throttled = throttle(mockFn);
-                throttled();
-                mockTimeout.calls.mostRecent().args[0](); // Resolve timeout
-                throttled();
-                mockTimeout.calls.mostRecent().args[0]();
-                throttled();
-                mockTimeout.calls.mostRecent().args[0]();
-                expect(mockTimeout.calls.count()).toEqual(3);
-            });
-        });
-    }
-);
diff --git a/platform/core/test/services/TopicSpec.js b/platform/core/test/services/TopicSpec.js
deleted file mode 100644
index 2bbd86dc102..00000000000
--- a/platform/core/test/services/TopicSpec.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/services/Topic"],
-    function (Topic) {
-
-        describe("The 'topic' service", function () {
-            var topic,
-                mockLog,
-                testMessage,
-                mockCallback;
-
-            beforeEach(function () {
-                testMessage = { someKey: "some value"};
-                mockLog = jasmine.createSpyObj(
-                    '$log',
-                    ['error', 'warn', 'info', 'debug']
-                );
-                mockCallback = jasmine.createSpy('callback');
-                topic = new Topic(mockLog);
-            });
-
-            it("notifies listeners on a topic", function () {
-                topic("abc").listen(mockCallback);
-                topic("abc").notify(testMessage);
-                expect(mockCallback).toHaveBeenCalledWith(testMessage);
-            });
-
-            it("does not notify listeners across topics", function () {
-                topic("abc").listen(mockCallback);
-                topic("xyz").notify(testMessage);
-                expect(mockCallback).not.toHaveBeenCalledWith(testMessage);
-            });
-
-            it("does not notify listeners after unlistening", function () {
-                topic("abc").listen(mockCallback)(); // Unlisten immediately
-                topic("abc").notify(testMessage);
-                expect(mockCallback).not.toHaveBeenCalledWith(testMessage);
-            });
-
-            it("provides anonymous private topics", function () {
-                var t1 = topic(), t2 = topic();
-
-                t1.listen(mockCallback);
-                t2.notify(testMessage);
-                expect(mockCallback).not.toHaveBeenCalledWith(testMessage);
-                t1.notify(testMessage);
-                expect(mockCallback).toHaveBeenCalledWith(testMessage);
-            });
-
-            it("is robust against errors thrown by listeners", function () {
-                var mockBadCallback = jasmine.createSpy("bad-callback"),
-                    t = topic();
-
-                mockBadCallback.and.callFake(function () {
-                    throw new Error("I'm afraid I can't do that.");
-                });
-
-                t.listen(mockBadCallback);
-                t.listen(mockCallback);
-
-                t.notify(testMessage);
-                expect(mockCallback).toHaveBeenCalledWith(testMessage);
-            });
-
-        });
-    }
-);
diff --git a/platform/core/test/types/MergeModelsSpec.js b/platform/core/test/types/MergeModelsSpec.js
deleted file mode 100644
index 47276a32a75..00000000000
--- a/platform/core/test/types/MergeModelsSpec.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * MergeModelsSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/types/MergeModels"],
-    function (mergeModels) {
-
-        describe("Model merger", function () {
-            it("merges models", function () {
-                expect(mergeModels(
-                    {
-                        "a": "property a",
-                        "b": [1, 2, 3],
-                        "c": {
-                            x: 42,
-                            z: [0]
-                        },
-                        "d": "should be ignored"
-                    },
-                    {
-                        "b": [4],
-                        "c": {
-                            y: "property y",
-                            z: ["h"]
-                        },
-                        "d": "property d"
-                    }
-                )).toEqual({
-                    "a": "property a",
-                    "b": [1, 2, 3, 4],
-                    "c": {
-                        x: 42,
-                        y: "property y",
-                        z: [0, "h"]
-                    },
-                    "d": "property d"
-                });
-            });
-        });
-    }
-);
diff --git a/platform/core/test/types/TypeCapabilitySpec.js b/platform/core/test/types/TypeCapabilitySpec.js
deleted file mode 100644
index aa76c866846..00000000000
--- a/platform/core/test/types/TypeCapabilitySpec.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * TypeCapabilitySpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/types/TypeCapability"],
-    function (TypeCapability) {
-
-        describe("The type capability", function () {
-            var mockTypeService,
-                mockDomainObject,
-                mockType,
-                type;
-
-            beforeEach(function () {
-                mockTypeService = jasmine.createSpyObj(
-                    "typeService",
-                    ["getType"]
-                );
-                mockDomainObject = jasmine.createSpyObj(
-                    "domainObject",
-                    ["getId", "getModel", "getCapability"]
-                );
-                mockType = {
-                    someKey: "some value",
-                    someOtherProperty: "some other property",
-                    aThirdProperty: "a third property"
-                };
-
-                mockTypeService.getType.and.returnValue(mockType);
-                mockDomainObject.getModel.and.returnValue({type: "mockType"});
-
-                type = new TypeCapability(mockTypeService, mockDomainObject);
-            });
-
-            it("looks up an object's type from type service", function () {
-                expect(type.someKey).toEqual(mockType.someKey);
-                expect(type.someOtherProperty).toEqual(mockType.someOtherProperty);
-                expect(type.aThirdProperty).toEqual(mockType.aThirdProperty);
-                expect(mockTypeService.getType).toHaveBeenCalledWith("mockType");
-            });
-
-        });
-    }
-);
diff --git a/platform/core/test/types/TypeImplSpec.js b/platform/core/test/types/TypeImplSpec.js
deleted file mode 100644
index 8a64f3994e4..00000000000
--- a/platform/core/test/types/TypeImplSpec.js
+++ /dev/null
@@ -1,117 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['../../src/types/TypeImpl'],
-    function (TypeImpl) {
-
-        describe("Type definition wrapper", function () {
-            var testTypeDef,
-                type;
-
-            beforeEach(function () {
-                testTypeDef = {
-                    key: 'test-type',
-                    name: 'Test Type',
-                    description: 'A type, for testing',
-                    cssClass: 'icon-telemetry-panel',
-                    inherits: ['test-parent-1', 'test-parent-2'],
-                    features: ['test-feature-1'],
-                    properties: [{}],
-                    model: {someKey: "some value"}
-                };
-                type = new TypeImpl(testTypeDef);
-            });
-
-            it("exposes key from definition", function () {
-                expect(type.getKey()).toEqual('test-type');
-            });
-
-            it("exposes name from definition", function () {
-                expect(type.getName()).toEqual('Test Type');
-            });
-
-            it("exposes description from definition", function () {
-                expect(type.getDescription()).toEqual('A type, for testing');
-            });
-
-            it("exposes CSS class from definition", function () {
-                expect(type.getCssClass()).toEqual('icon-telemetry-panel');
-            });
-
-            it("exposes its underlying type definition", function () {
-                expect(type.getDefinition()).toEqual(testTypeDef);
-            });
-
-            it("supports instance-of checks by type key", function () {
-                expect(type.instanceOf('test-parent-1')).toBeTruthy();
-                expect(type.instanceOf('test-parent-2')).toBeTruthy();
-                expect(type.instanceOf('some-other-type')).toBeFalsy();
-            });
-
-            it("supports instance-of checks by specific type key", function () {
-                expect(type.instanceOf('test-type')).toBeTruthy();
-            });
-
-            it("supports instance-of checks by type object", function () {
-                expect(type.instanceOf({
-                    getKey: function () {
-                        return 'test-parent-1';
-                    }
-                })).toBeTruthy();
-                expect(type.instanceOf({
-                    getKey: function () {
-                        return 'some-other-type';
-                    }
-                })).toBeFalsy();
-            });
-
-            it("correctly recognizes instance-of checks upon itself", function () {
-                expect(type.instanceOf(type)).toBeTruthy();
-            });
-
-            it("recognizes that all types are instances of the undefined type", function () {
-                expect(type.instanceOf()).toBeTruthy();
-                expect(type.instanceOf({ getKey: function () {} })).toBeTruthy();
-            });
-
-            it("allows features to be exposed", function () {
-                expect(type.hasFeature('test-feature-1')).toBeTruthy();
-                expect(type.hasFeature('test-feature-2')).toBeFalsy();
-            });
-
-            it("provides an initial model, if defined", function () {
-                expect(type.getInitialModel().someKey).toEqual("some value");
-            });
-
-            it("provides a fresh initial model each time", function () {
-                var model = type.getInitialModel();
-                model.someKey = "some other value";
-                expect(type.getInitialModel().someKey).toEqual("some value");
-            });
-
-            it("provides type properties", function () {
-                expect(type.getProperties().length).toEqual(1);
-            });
-        });
-    }
-);
diff --git a/platform/core/test/types/TypePropertyConversionSpec.js b/platform/core/test/types/TypePropertyConversionSpec.js
deleted file mode 100644
index c62e1047fda..00000000000
--- a/platform/core/test/types/TypePropertyConversionSpec.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['../../src/types/TypePropertyConversion'],
-    function (TypePropertyConversion) {
-
-        describe("Type property conversion", function () {
-
-            it("allows non-conversion when parameter is 'identity'", function () {
-                var conversion = new TypePropertyConversion("identity");
-                [42, "42", { a: 42 }].forEach(function (v) {
-                    expect(conversion.toFormValue(v)).toBe(v);
-                    expect(conversion.toModelValue(v)).toBe(v);
-                });
-            });
-
-            it("allows numeric conversion", function () {
-                var conversion = new TypePropertyConversion("number");
-                expect(conversion.toFormValue(42)).toBe("42");
-                expect(conversion.toModelValue("42")).toBe(42);
-            });
-
-            it("supports array conversions", function () {
-                var conversion = new TypePropertyConversion("number[]");
-                expect(conversion.toFormValue([42, 44]).length).toEqual(2);
-                expect(conversion.toFormValue([42, 44])[0]).toBe("42");
-                expect(conversion.toModelValue(["11", "42"])[1]).toBe(42);
-            });
-
-            it("throws exceptions on unrecognized conversions", function () {
-                var caught = false;
-
-                try {
-                    // eslint-disable-next-line
-                    new TypePropertyConversion("some-unknown-conversion");
-                } catch (e) {
-                    caught = true;
-                }
-
-                expect(caught).toBeTruthy();
-            });
-
-        });
-    }
-);
diff --git a/platform/core/test/types/TypePropertySpec.js b/platform/core/test/types/TypePropertySpec.js
deleted file mode 100644
index 4fb32a2e75f..00000000000
--- a/platform/core/test/types/TypePropertySpec.js
+++ /dev/null
@@ -1,129 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['../../src/types/TypeProperty'],
-    function (TypeProperty) {
-
-        describe("Type property", function () {
-
-            it("allows retrieval of its definition", function () {
-                var definition = {
-                    key: "hello",
-                    someOtherKey: "hm?"
-                };
-                expect(
-                    new TypeProperty(definition).getDefinition()
-                ).toEqual(definition);
-            });
-
-            it("sets properties in object models", function () {
-                var definition = {
-                        key: "someKey",
-                        property: "someProperty"
-                    },
-                    model = {},
-                    property = new TypeProperty(definition);
-                property.setValue(model, "some value");
-                expect(model.someProperty).toEqual("some value");
-            });
-
-            it("gets properties from object models", function () {
-                var definition = {
-                        key: "someKey",
-                        property: "someProperty"
-                    },
-                    model = { someProperty: "some value"},
-                    property = new TypeProperty(definition);
-                expect(property.getValue(model)).toEqual("some value");
-            });
-
-            it("sets properties by path", function () {
-                var definition = {
-                        key: "someKey",
-                        property: ["some", "property"]
-                    },
-                    model = {},
-                    property = new TypeProperty(definition);
-                property.setValue(model, "some value");
-                expect(model.some.property).toEqual("some value");
-            });
-
-            it("gets properties by path", function () {
-                var definition = {
-                        key: "someKey",
-                        property: ["some", "property"]
-                    },
-                    model = { some: { property: "some value" } },
-                    property = new TypeProperty(definition);
-                expect(property.getValue(model)).toEqual("some value");
-            });
-
-            it("stops looking for properties when a path is invalid", function () {
-                var definition = {
-                        key: "someKey",
-                        property: ["some", "property"]
-                    },
-                    property = new TypeProperty(definition);
-                expect(property.getValue(undefined)).toBeUndefined();
-            });
-
-            it("gives undefined for empty paths", function () {
-                var definition = {
-                        key: "someKey",
-                        property: []
-                    },
-                    model = { some: { property: "some value" } },
-                    property = new TypeProperty(definition);
-                expect(property.getValue(model)).toBeUndefined();
-            });
-
-            it("provides empty arrays for values that are array-like", function () {
-                var definition = {
-                        property: "someProperty",
-                        items: [{}, {}, {}]
-                    },
-                    model = {},
-                    property = new TypeProperty(definition);
-                expect(property.getValue(model))
-                    .toEqual([undefined, undefined, undefined]);
-            });
-
-            it("detects and ignores empty arrays on setValue", function () {
-                var definition = {
-                        property: "someProperty",
-                        items: [{}, {}, {}]
-                    },
-                    model = {},
-                    property = new TypeProperty(definition);
-
-                property.setValue(model, [undefined, undefined, undefined]);
-                expect(model.someProperty).toBeUndefined();
-
-                // Verify that this only happens when all are undefined
-                property.setValue(model, [undefined, "x", 42]);
-                expect(model.someProperty).toEqual([undefined, "x", 42]);
-            });
-
-        });
-    }
-);
diff --git a/platform/core/test/types/TypeProviderSpec.js b/platform/core/test/types/TypeProviderSpec.js
deleted file mode 100644
index d3e293fde05..00000000000
--- a/platform/core/test/types/TypeProviderSpec.js
+++ /dev/null
@@ -1,147 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['../../src/types/TypeProvider'],
-    function (TypeProvider) {
-
-        describe("Type provider", function () {
-
-            var captured = {},
-                testTypeDefinitions = [
-                    {
-                        key: 'basic',
-                        cssClass: "icon-magnify-in",
-                        name: "Basic Type"
-                    },
-                    {
-                        key: 'multi1',
-                        cssClass: "icon-trash",
-                        description: "Multi1 Description",
-                        capabilities: ['a1', 'b1']
-                    },
-                    {
-                        key: 'multi2',
-                        cssClass: "icon-magnify-out",
-                        capabilities: ['a2', 'b2', 'c2']
-                    },
-                    {
-                        key: 'single-subtype',
-                        inherits: 'basic',
-                        name: "Basic Subtype",
-                        description: "A test subtype"
-                    },
-                    {
-                        key: 'multi-subtype',
-                        inherits: ['multi1', 'multi2'],
-                        name: "Multi-parent Subtype",
-                        capabilities: ['a3']
-                    },
-                    {
-                        name: "Default"
-                    }
-                ],
-                provider;
-
-            beforeEach(function () {
-                captured = {};
-                provider = new TypeProvider(testTypeDefinitions);
-            });
-
-            it("looks up non-inherited types by name", function () {
-                captured.type = provider.getType('basic');
-
-                expect(captured.type.getCssClass()).toEqual("icon-magnify-in");
-                expect(captured.type.getName()).toEqual("Basic Type");
-                expect(captured.type.getDescription()).toBeUndefined();
-            });
-
-            it("supports single inheritance", function () {
-                captured.type = provider.getType('single-subtype');
-
-                expect(captured.type.getCssClass()).toEqual("icon-magnify-in");
-                expect(captured.type.getName()).toEqual("Basic Subtype");
-                expect(captured.type.getDescription()).toEqual("A test subtype");
-            });
-
-            it("supports multiple inheritance", function () {
-                captured.type = provider.getType('multi-subtype');
-
-                expect(captured.type.getCssClass()).toEqual("icon-magnify-out");
-                expect(captured.type.getName()).toEqual("Multi-parent Subtype");
-                expect(captured.type.getDescription()).toEqual("Multi1 Description");
-            });
-
-            it("concatenates capabilities in order", function () {
-                captured.type = provider.getType('multi-subtype');
-
-                expect(captured.type.getDefinition().capabilities).toEqual(
-                    ['a1', 'b1', 'a2', 'b2', 'c2', 'a3']
-                );
-            });
-
-            it("allows lookup of the undefined type", function () {
-                captured.type = provider.getType(undefined);
-
-                expect(captured.type.getName()).toEqual("Default");
-            });
-
-            it("concatenates capabilities of all undefined types", function () {
-                captured.type = new TypeProvider(
-                    testTypeDefinitions.concat([
-                        { capabilities: ['a', 'b', 'c'] },
-                        { capabilities: ['x', 'y', 'z'] }
-                    ])
-                ).getType(undefined);
-
-                expect(captured.type.getDefinition().capabilities).toEqual(
-                    ['a', 'b', 'c', 'x', 'y', 'z']
-                );
-
-            });
-
-            it("includes capabilities from undefined type in all types", function () {
-                captured.type = new TypeProvider(
-                    testTypeDefinitions.concat([
-                        { capabilities: ['a', 'b', 'c'] },
-                        { capabilities: ['x', 'y', 'z'] }
-                    ])
-                ).getType('multi-subtype');
-
-                expect(captured.type.getDefinition().capabilities).toEqual(
-                    ['a', 'b', 'c', 'x', 'y', 'z', 'a1', 'b1', 'a2', 'b2', 'c2', 'a3']
-                );
-            });
-
-            it("allows types to be listed", function () {
-                captured.types = provider.listTypes();
-
-                expect(captured.types.length).toEqual(
-                    testTypeDefinitions.filter(function (t) {
-                        return t.key;
-                    }).length
-                );
-            });
-
-        });
-    }
-);
diff --git a/platform/core/test/views/ViewCapabilitySpec.js b/platform/core/test/views/ViewCapabilitySpec.js
deleted file mode 100644
index e6085fc4183..00000000000
--- a/platform/core/test/views/ViewCapabilitySpec.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * ViewCapabilitySpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/views/ViewCapability"],
-    function (ViewCapability) {
-
-        describe("A view capability", function () {
-            var mockViewService,
-                mockDomainObject,
-                views = [{key: "someView"}],
-                view;
-
-            beforeEach(function () {
-                mockViewService = jasmine.createSpyObj(
-                    "viewService",
-                    ["getViews"]
-                );
-                mockDomainObject = jasmine.createSpyObj(
-                    "domainObject",
-                    ["getId", "getModel", "getCapability"]
-                );
-                mockViewService.getViews.and.returnValue(views);
-                view = new ViewCapability(mockViewService, mockDomainObject);
-            });
-
-            it("issues invocations to the view service", function () {
-                expect(view.invoke()).toEqual(views);
-                expect(mockViewService.getViews).toHaveBeenCalledWith(
-                    mockDomainObject
-                );
-            });
-
-        });
-    }
-);
diff --git a/platform/core/test/views/ViewProviderSpec.js b/platform/core/test/views/ViewProviderSpec.js
deleted file mode 100644
index 8682c8afc0d..00000000000
--- a/platform/core/test/views/ViewProviderSpec.js
+++ /dev/null
@@ -1,167 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * ViewProviderSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/views/ViewProvider"],
-    function (ViewProvider) {
-
-        describe("The view provider", function () {
-            var viewA = {
-                    key: "a"
-                },
-                viewB = {
-                    key: "b",
-                    needs: ["someCapability"]
-                },
-                viewC = {
-                    key: "c",
-                    needs: ["someCapability"],
-                    delegation: true
-                },
-                capabilities = {},
-                delegates = {},
-                delegation,
-                mockDomainObject = {},
-                mockLog,
-                provider;
-
-            beforeEach(function () {
-                // Simulate the expected API
-                mockDomainObject.hasCapability = function (c) {
-                    return capabilities[c] !== undefined;
-                };
-
-                mockDomainObject.getCapability = function (c) {
-                    return capabilities[c];
-                };
-
-                mockDomainObject.useCapability = function (c, v) {
-                    return capabilities[c] && capabilities[c].invoke(v);
-                };
-
-                mockLog = jasmine.createSpyObj("$log", ["warn", "info", "debug"]);
-
-                capabilities = {};
-                delegates = {};
-
-                delegation = {
-                    doesDelegateCapability: function (c) {
-                        return delegates[c] !== undefined;
-                    }
-                };
-
-                provider = new ViewProvider([viewA, viewB, viewC], mockLog);
-            });
-
-            it("reports views provided as extensions", function () {
-                capabilities.someCapability = true;
-                expect(provider.getViews(mockDomainObject))
-                    .toEqual([viewA, viewB, viewC]);
-            });
-
-            it("filters views by needed capabilities", function () {
-                //capabilities.someCapability = true;
-                expect(provider.getViews(mockDomainObject))
-                    .toEqual([viewA]);
-            });
-
-            it("allows delegation of needed capabilities when specified", function () {
-                //capabilities.someCapability = true;
-                capabilities.delegation = delegation;
-                delegates.someCapability = true;
-                expect(provider.getViews(mockDomainObject))
-                    .toEqual([viewA, viewC]);
-            });
-
-            it("warns if keys are omitted from views", function () {
-                // Verify that initial construction issued no warning
-                expect(mockLog.warn).not.toHaveBeenCalled();
-                // Recreate with no keys; that view should be filtered out
-                expect(
-                    new ViewProvider(
-                        [viewA, { some: "bad view" }],
-                        mockLog
-                    ).getViews(mockDomainObject)
-                ).toEqual([viewA]);
-                // We should have also received a warning, to support debugging
-                expect(mockLog.warn).toHaveBeenCalledWith(jasmine.any(String));
-            });
-
-            it("restricts typed views to matching types", function () {
-                var testType = "testType",
-                    testView = {
-                        key: "x",
-                        type: testType
-                    },
-                    viewProvider = new ViewProvider([testView], mockLog);
-
-                // Include a "type" capability
-                capabilities.type = jasmine.createSpyObj(
-                    "type",
-                    ["instanceOf", "invoke", "getDefinition"]
-                );
-                capabilities.type.invoke.and.returnValue(capabilities.type);
-
-                // Should be included when types match
-                capabilities.type.instanceOf.and.returnValue(true);
-                expect(viewProvider.getViews(mockDomainObject))
-                    .toEqual([testView]);
-                expect(capabilities.type.instanceOf)
-                    .toHaveBeenCalledWith(testType);
-
-                // ...but not when they don't
-                capabilities.type.instanceOf.and.returnValue(false);
-                expect(viewProvider.getViews(mockDomainObject))
-                    .toEqual([]);
-
-            });
-
-            it("enforces view restrictions from types", function () {
-                var testView = { key: "x" },
-                    viewProvider = new ViewProvider([testView], mockLog);
-
-                // Include a "type" capability
-                capabilities.type = jasmine.createSpyObj(
-                    "type",
-                    ["instanceOf", "invoke", "getDefinition"]
-                );
-                capabilities.type.invoke.and.returnValue(capabilities.type);
-
-                // Should be included when view keys match
-                capabilities.type.getDefinition
-                    .and.returnValue({ views: [testView.key]});
-                expect(viewProvider.getViews(mockDomainObject))
-                    .toEqual([testView]);
-
-                // ...but not when they don't
-                capabilities.type.getDefinition
-                    .and.returnValue({ views: ["somethingElse"]});
-                expect(viewProvider.getViews(mockDomainObject))
-                    .toEqual([]);
-            });
-
-        });
-    }
-);
diff --git a/platform/data/README.md b/platform/data/README.md
deleted file mode 100644
index dfcf85e2c90..00000000000
--- a/platform/data/README.md
+++ /dev/null
@@ -1,2 +0,0 @@
-This bundle is responsible for introducing a reusable infrastructure 
-and set of APIs for using time-series data in Open MCT.
diff --git a/platform/entanglement/README.md b/platform/entanglement/README.md
deleted file mode 100644
index aaf517decf2..00000000000
--- a/platform/entanglement/README.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# Entanglement
-
-Entanglement is the process of moving, copying, and linking domain objects
-in such a way that their relationships are impossible to discern.
-
-This bundle provides move, copy, and link functionality.  Achieving a state of 
-entanglement is left up to the end user.
-
-
-## Services implement logic
-
-Each method (move, copy, link) is implemented as a service, and each service
-provides two functions: `validate` and `perform`.
-
-`validate(object, parentCandidate)` returns true if the `object` can be 
-move/copy/linked into the `parentCandidate`'s composition.
-
-`perform(object, parentObject)` move/copy/links the `object` into the 
-`parentObject`'s composition.
-
-## Actions implement user interactions
-
-Actions are used to expose move/copy/link to the user.  They prompt for input
-where necessary, and complete the actions.
diff --git a/platform/entanglement/bundle.js b/platform/entanglement/bundle.js
deleted file mode 100644
index 591797ec1da..00000000000
--- a/platform/entanglement/bundle.js
+++ /dev/null
@@ -1,152 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/actions/LinkAction",
-    "./src/actions/SetPrimaryLocationAction",
-    "./src/services/LocatingCreationDecorator",
-    "./src/services/LocatingObjectDecorator",
-    "./src/policies/CopyPolicy",
-    "./src/policies/CrossSpacePolicy",
-    "./src/capabilities/LocationCapability",
-    "./src/services/LinkService",
-    "./src/services/CopyService",
-    "./src/services/LocationService"
-], function (
-    LinkAction,
-    SetPrimaryLocationAction,
-    LocatingCreationDecorator,
-    LocatingObjectDecorator,
-    CopyPolicy,
-    CrossSpacePolicy,
-    LocationCapability,
-    LinkService,
-    CopyService,
-    LocationService
-) {
-
-    return {
-        name: "platform/entanglement",
-        definition: {
-            "name": "Entanglement",
-            "description": "Tools to assist you in entangling the world of WARP.",
-            "configuration": {},
-            "extensions": {
-                "actions": [
-                    {
-                        "key": "link",
-                        "name": "Create Link",
-                        "description": "Create Link to object in another location.",
-                        "cssClass": "icon-link",
-                        "category": "contextual",
-                        "group": "action",
-                        "priority": 7,
-                        "implementation": LinkAction,
-                        "depends": [
-                            "policyService",
-                            "locationService",
-                            "linkService"
-                        ]
-                    },
-                    {
-                        "key": "locate",
-                        "name": "Set Primary Location",
-                        "description": "Set a domain object's primary location.",
-                        "cssClass": "",
-                        "category": "contextual",
-                        "implementation": SetPrimaryLocationAction
-                    }
-                ],
-                "components": [
-                    {
-                        "type": "decorator",
-                        "provides": "creationService",
-                        "implementation": LocatingCreationDecorator
-                    },
-                    {
-                        "type": "decorator",
-                        "provides": "objectService",
-                        "implementation": LocatingObjectDecorator,
-                        "depends": [
-                            "$q",
-                            "$log"
-                        ]
-                    }
-                ],
-                "policies": [
-                    {
-                        "category": "action",
-                        "implementation": CrossSpacePolicy
-                    },
-                    {
-                        "category": "action",
-                        "implementation": CopyPolicy
-                    }
-                ],
-                "capabilities": [
-                    {
-                        "key": "location",
-                        "name": "Location Capability",
-                        "description": "Provides a capability for retrieving the location of an object based upon it's context.",
-                        "implementation": LocationCapability,
-                        "depends": [
-                            "$q",
-                            "$injector"
-                        ]
-                    }
-                ],
-                "services": [
-                    {
-                        "key": "linkService",
-                        "name": "Link Service",
-                        "description": "Provides a service for linking objects",
-                        "implementation": LinkService,
-                        "depends": [
-                            "openmct"
-                        ]
-                    },
-                    {
-                        "key": "copyService",
-                        "name": "Copy Service",
-                        "description": "Provides a service for copying objects",
-                        "implementation": CopyService,
-                        "depends": [
-                            "$q",
-                            "policyService",
-                            "openmct"
-                        ]
-                    },
-                    {
-                        "key": "locationService",
-                        "name": "Location Service",
-                        "description": "Provides a service for prompting a user for locations.",
-                        "implementation": LocationService,
-                        "depends": [
-                            "dialogService"
-                        ]
-                    }
-                ],
-                "licenses": []
-            }
-        }
-    };
-});
diff --git a/platform/entanglement/src/actions/AbstractComposeAction.js b/platform/entanglement/src/actions/AbstractComposeAction.js
deleted file mode 100644
index 2549a3b9558..00000000000
--- a/platform/entanglement/src/actions/AbstractComposeAction.js
+++ /dev/null
@@ -1,163 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['./CancelError'],
-    function (CancelError) {
-        var CANCEL_MESSAGE = "User cancelled location selection.";
-
-        /**
-         * Common interface exposed by services which support move, copy,
-         * and link actions.
-         * @interface platform/entanglement.AbstractComposeService
-         * @private
-         */
-        /**
-         * Change the composition of the specified objects. Note that this
-         * should only be invoked after successfully validating.
-         *
-         * @param {DomainObject} domainObject  the domain object to
-         *    move, copy, or link.
-         * @param {DomainObject} parent  the domain object whose composition
-         *    will be changed to contain the domainObject (or its duplicate)
-         * @returns {Promise} A promise that is fulfilled when the
-         *    duplicate operation has completed.
-         * @method platform/entanglement.AbstractComposeService#perform
-         */
-        /**
-         * Check if this composition change is valid for these objects.
-         *
-         * @param {DomainObject} domainObject  the domain object to
-         *    move, copy, or link.
-         * @param {DomainObject} parent  the domain object whose composition
-         *    will be changed to contain the domainObject (or its duplicate)
-         * @returns {boolean} true if this composition change is allowed
-         * @method platform/entanglement.AbstractComposeService#validate
-         */
-
-        /**
-         * Template class for Move, Copy, and Link actions.
-         *
-         * @implements {Action}
-         * @constructor
-         * @private
-         * @memberof platform/entanglement
-         * @param {PolicyService} policyService the policy service to use to
-         *        verify that variants of this action are allowed
-         * @param {platform/entanglement.LocationService} locationService a
-         *        service to request destinations from the user
-         * @param {platform/entanglement.AbstractComposeService} composeService
-         *        a service which will handle actual changes to composition
-         * @param {ActionContext} the context in which the action will be performed
-         * @param {string} verb the verb to display for the action (e.g. "Move")
-         * @param {string} [suffix] a string to display in the dialog title;
-         *        default is "to a new location"
-         */
-        function AbstractComposeAction(
-            policyService,
-            locationService,
-            composeService,
-            context,
-            verb,
-            suffix
-        ) {
-            if (context.selectedObject) {
-                this.newParent = context.domainObject;
-                this.object = context.selectedObject;
-            } else {
-                this.object = context.domainObject;
-            }
-
-            this.currentParent = this.object
-                .getCapability('context')
-                .getParent();
-
-            this.context = context;
-            this.policyService = policyService;
-            this.locationService = locationService;
-            this.composeService = composeService;
-            this.verb = verb || "Compose";
-            this.suffix = suffix || "To a New Location";
-        }
-
-        AbstractComposeAction.prototype.cloneContext = function () {
-            var clone = {}, original = this.context;
-            Object.keys(original).forEach(function (k) {
-                clone[k] = original[k];
-            });
-
-            return clone;
-        };
-
-        AbstractComposeAction.prototype.perform = function () {
-            var dialogTitle,
-                label,
-                validateLocation,
-                self = this,
-                locationService = this.locationService,
-                composeService = this.composeService,
-                currentParent = this.currentParent,
-                newParent = this.newParent,
-                object = this.object;
-
-            if (newParent) {
-                return composeService.perform(object, newParent);
-            }
-
-            dialogTitle = [this.verb, object.getModel().name, this.suffix]
-                .join(" ");
-
-            label = this.verb + " To";
-
-            validateLocation = function (newParentObj) {
-                var newContext = self.cloneContext();
-                newContext.selectedObject = object;
-                newContext.domainObject = newParentObj;
-
-                return composeService.validate(object, newParentObj)
-                    && self.policyService.allow("action", self, newContext);
-            };
-
-            return locationService.getLocationFromUser(
-                dialogTitle,
-                label,
-                validateLocation,
-                currentParent
-            ).then(function (newParentObj) {
-                return composeService.perform(object, newParentObj);
-            }, function () {
-                return Promise.reject(new CancelError(CANCEL_MESSAGE));
-            }.bind(this));
-        };
-
-        AbstractComposeAction.appliesTo = function (context) {
-            var applicableObject =
-                context.selectedObject || context.domainObject;
-
-            return Boolean(applicableObject
-                && applicableObject.hasCapability('context'));
-        };
-
-        return AbstractComposeAction;
-    }
-);
-
diff --git a/platform/entanglement/src/actions/CancelError.js b/platform/entanglement/src/actions/CancelError.js
deleted file mode 100644
index 31f00aaf503..00000000000
--- a/platform/entanglement/src/actions/CancelError.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(function () {
-    function CancelError() {
-        Error.apply(this, arguments);
-        this.name = CancelError;
-    }
-
-    CancelError.prototype = Object.create(Error.prototype);
-
-    return CancelError;
-});
diff --git a/platform/entanglement/src/actions/LinkAction.js b/platform/entanglement/src/actions/LinkAction.js
deleted file mode 100644
index bd542a4f8cc..00000000000
--- a/platform/entanglement/src/actions/LinkAction.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['./AbstractComposeAction'],
-    function (AbstractComposeAction) {
-
-        /**
-         * The LinkAction is available from context menus and allows a user to
-         * link an object to another location of their choosing.
-         *
-         * @implements {Action}
-         * @constructor
-         * @memberof platform/entanglement
-         */
-        function LinkAction(policyService, locationService, linkService, context) {
-            AbstractComposeAction.apply(
-                this,
-                [policyService, locationService, linkService, context, "Link"]
-            );
-        }
-
-        LinkAction.prototype = Object.create(AbstractComposeAction.prototype);
-        LinkAction.appliesTo = AbstractComposeAction.appliesTo;
-
-        return LinkAction;
-    }
-);
-
diff --git a/platform/entanglement/src/actions/SetPrimaryLocationAction.js b/platform/entanglement/src/actions/SetPrimaryLocationAction.js
deleted file mode 100644
index f283fa96a84..00000000000
--- a/platform/entanglement/src/actions/SetPrimaryLocationAction.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    function () {
-
-        /**
-         * Implements the "Set Primary Location" action, which sets a
-         * location property for objects to match their contextual
-         * location.
-         *
-         * @implements {Action}
-         * @constructor
-         * @private
-         * @memberof platform/entanglement
-         * @param {ActionContext} context the context in which the action
-         *        will be performed
-         */
-        function SetPrimaryLocationAction(context) {
-            this.domainObject = context.domainObject;
-        }
-
-        SetPrimaryLocationAction.prototype.perform = function () {
-            var location = this.domainObject.getCapability('location');
-
-            return location.setPrimaryLocation(
-                location.getContextualLocation()
-            );
-        };
-
-        SetPrimaryLocationAction.appliesTo = function (context) {
-            var domainObject = context.domainObject;
-
-            return domainObject && domainObject.hasCapability("location")
-                && (domainObject.getModel().location === undefined);
-        };
-
-        return SetPrimaryLocationAction;
-    }
-);
-
diff --git a/platform/entanglement/src/capabilities/LocationCapability.js b/platform/entanglement/src/capabilities/LocationCapability.js
deleted file mode 100644
index 6f45ed8bb0d..00000000000
--- a/platform/entanglement/src/capabilities/LocationCapability.js
+++ /dev/null
@@ -1,128 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    function () {
-
-        /**
-         * The location capability allows a domain object to know its current
-         * parent, and also know its original parent.  When a domain object's
-         * current parent is its original parent, the object is considered an
-         * original, otherwise it's a link.
-         *
-         * @constructor
-         */
-        function LocationCapability($q, $injector, domainObject) {
-            this.domainObject = domainObject;
-            this.$q = $q;
-            this.$injector = $injector;
-
-            return this;
-        }
-
-        /**
-         * Get an instance of this domain object in its original location.
-         *
-         * @returns {Promise.<DomainObject>} a promise for the original
-         *          instance of this domain object
-         */
-        LocationCapability.prototype.getOriginal = function () {
-            var id;
-
-            if (this.isOriginal()) {
-                return this.$q.when(this.domainObject);
-            }
-
-            id = this.domainObject.getId();
-
-            this.objectService =
-                this.objectService || this.$injector.get("objectService");
-
-            // Assume that an object will be correctly contextualized when
-            // loaded directly from the object service; this is true
-            // so long as LocatingObjectDecorator is present, and that
-            // decorator is also contained in this bundle.
-            return this.objectService.getObjects([id])
-                .then(function (objects) {
-                    return objects[id];
-                });
-        };
-
-        /**
-         * Set the primary location (the parent id) of the current domain
-         * object.
-         *
-         * @param {String} location the primary location to persist.
-         * @returns {Promise} a promise that is resolved when the operation
-         * completes.
-         */
-        LocationCapability.prototype.setPrimaryLocation = function (location) {
-            return this.domainObject.useCapability(
-                'mutation',
-                function (model) {
-                    model.location = location;
-                }
-            );
-        };
-
-        /**
-         * Returns the contextual location of the current domain object.  Only
-         * valid for domain objects that have a context capability.
-         *
-         * @returns {String} the contextual location of the object; the id of
-         * its parent.
-         */
-        LocationCapability.prototype.getContextualLocation = function () {
-            var context = this.domainObject.getCapability("context");
-
-            if (!context) {
-                return;
-            }
-
-            return context.getParent().getId();
-        };
-
-        /**
-         * Returns true if the domainObject is a link, false if it's an
-         * original.
-         *
-         * @returns {Boolean}
-         */
-        LocationCapability.prototype.isLink = function () {
-            var model = this.domainObject.getModel();
-
-            return model.location !== this.getContextualLocation();
-        };
-
-        /**
-         * Returns true if the domainObject is an original, false if it's a
-         * link.
-         *
-         * @returns {Boolean}
-         */
-        LocationCapability.prototype.isOriginal = function () {
-            return !this.isLink();
-        };
-
-        return LocationCapability;
-    }
-);
diff --git a/platform/entanglement/src/policies/CopyPolicy.js b/platform/entanglement/src/policies/CopyPolicy.js
deleted file mode 100644
index 4013863ab10..00000000000
--- a/platform/entanglement/src/policies/CopyPolicy.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([], function () {
-
-    /**
-     * Disallow duplication when the object to be duplicated is not
-     * creatable.
-     * @constructor
-     * @implements {Policy}
-     * @memberof platform/entanglement
-     */
-    function CopyPolicy() {
-    }
-
-    function allowCreation(domainObject) {
-        var type = domainObject && domainObject.getCapability('type');
-
-        return Boolean(type && type.hasFeature('creation'));
-    }
-
-    function selectedObject(context) {
-        return context.selectedObject || context.domainObject;
-    }
-
-    CopyPolicy.prototype.allow = function (action, context) {
-        var key = action.getMetadata().key;
-
-        if (key === 'copy') {
-            return allowCreation(selectedObject(context));
-        }
-
-        return true;
-    };
-
-    return CopyPolicy;
-});
diff --git a/platform/entanglement/src/policies/CrossSpacePolicy.js b/platform/entanglement/src/policies/CrossSpacePolicy.js
deleted file mode 100644
index 04759f94ec1..00000000000
--- a/platform/entanglement/src/policies/CrossSpacePolicy.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        var DISALLOWED_ACTIONS = ["move"];
-
-        /**
-         * This policy prevents performing move/copy/link actions across
-         * different persistence spaces (e.g. linking to an object in
-         * a private space from an object in a public space.)
-         * @memberof {platform/entanglement}
-         * @constructor
-         * @implements {Policy}
-         */
-        function CrossSpacePolicy() {
-        }
-
-        function lookupSpace(domainObject) {
-            var persistence = domainObject
-                && domainObject.getCapability("persistence");
-
-            return persistence && persistence.getSpace();
-        }
-
-        function isCrossSpace(context) {
-            var domainObject = context.domainObject,
-                selectedObject = context.selectedObject;
-
-            return selectedObject !== undefined
-                && domainObject !== undefined
-                && lookupSpace(domainObject) !== lookupSpace(selectedObject);
-        }
-
-        CrossSpacePolicy.prototype.allow = function (action, context) {
-            var key = action.getMetadata().key;
-
-            if (DISALLOWED_ACTIONS.indexOf(key) !== -1) {
-                return !isCrossSpace(context);
-            }
-
-            return true;
-        };
-
-        return CrossSpacePolicy;
-
-    }
-);
diff --git a/platform/entanglement/src/services/CopyService.js b/platform/entanglement/src/services/CopyService.js
deleted file mode 100644
index f2ff8294b22..00000000000
--- a/platform/entanglement/src/services/CopyService.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["./CopyTask"],
-    function (CopyTask) {
-
-        /**
-         * CopyService provides an interface for deep copying objects from one
-         * location to another.  It also provides a method for determining if
-         * an object can be copied to a specific location.
-         * @constructor
-         * @memberof platform/entanglement
-         * @implements {platform/entanglement.AbstractComposeService}
-         */
-        function CopyService($q, policyService, openmct) {
-            this.$q = $q;
-            this.policyService = policyService;
-            this.openmct = openmct;
-        }
-
-        CopyService.prototype.validate = function (object, parentCandidate) {
-            if (!parentCandidate || !parentCandidate.getId) {
-                return false;
-            }
-
-            if (parentCandidate.getId() === object.getId()) {
-                return false;
-            }
-
-            return this.openmct.composition.checkPolicy(parentCandidate.useCapability('adapter'), object.useCapability('adapter'));
-        };
-
-        /**
-         * A function used to check if a domain object should be cloned
-         * or not.
-         * @callback platform/entanglement.CopyService~filter
-         * @param {DomainObject} domainObject the object to be cloned
-         * @returns {boolean} true if the object should be cloned; false
-         *          if it should be linked
-         */
-
-        /**
-         * Creates a duplicate of the object tree starting at domainObject to
-         * the new parent specified.
-         *
-         * Any domain objects which cannot be created will not be cloned;
-         * instead, these will appear as links. If a filtering function
-         * is provided, any objects which fail that check will also be
-         * linked instead of cloned
-         *
-         * @param {DomainObject} domainObject the object to duplicate
-         * @param {DomainObject} parent the destination for the clone
-         * @param {platform/entanglement.CopyService~filter} [filter]
-         *        an optional function used to filter out objects from
-         *        the cloning process
-         * @returns a promise that will be completed with the clone of
-         * domainObject when the duplication is successful.
-         */
-        CopyService.prototype.perform = function (domainObject, parent, filter) {
-            var policyService = this.policyService;
-
-            // Combines caller-provided filter (if any) with the
-            // baseline behavior of respecting creation policy.
-            function filterWithPolicy(domainObj) {
-                return (!filter || filter(domainObj))
-                    && policyService.allow(
-                        "creation",
-                        domainObj.getCapability("type")
-                    );
-            }
-
-            if (this.validate(domainObject, parent)) {
-                return new CopyTask(
-                    domainObject,
-                    parent,
-                    filterWithPolicy,
-                    this.$q
-                ).perform();
-            } else {
-                throw new Error(
-                    "Tried to copy objects without validating first."
-                );
-            }
-        };
-
-        return CopyService;
-    }
-);
-
diff --git a/platform/entanglement/src/services/CopyTask.js b/platform/entanglement/src/services/CopyTask.js
deleted file mode 100644
index 326ee176b08..00000000000
--- a/platform/entanglement/src/services/CopyTask.js
+++ /dev/null
@@ -1,276 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * This class encapsulates the process of copying a domain object
-         * and all of its children.
-         *
-         * @param {DomainObject} domainObject The object to copy
-         * @param {DomainObject} parent The new location of the cloned object tree
-         * @param {platform/entanglement.CopyService~filter} filter
-         *        a function used to filter out objects from
-         *        the cloning process
-         * @param $q Angular's $q, for promises
-         * @constructor
-         */
-        function CopyTask(domainObject, parent, filter, $q) {
-            this.domainObject = domainObject;
-            this.parent = parent;
-            this.firstClone = undefined;
-            this.$q = $q;
-            this.deferred = undefined;
-            this.filter = filter;
-            this.persisted = 0;
-            this.clones = [];
-            this.idMap = {};
-        }
-
-        function composeChild(child, parent, setLocation) {
-            //Once copied, associate each cloned
-            // composee with its parent clone
-
-            parent.getModel().composition.push(child.getId());
-
-            //If a location is not specified, set it.
-            if (setLocation && child.getModel().location === undefined) {
-                child.getModel().location = parent.getId();
-            }
-
-            return child;
-        }
-
-        function cloneObjectModel(objectModel) {
-            var clone = JSON.parse(JSON.stringify(objectModel));
-
-            /**
-             * Reset certain fields.
-             */
-            //If has a composition, set it to an empty array. Will be
-            // recomposed later with the ids of its cloned children.
-            if (clone.composition) {
-                //Important to set it to an empty array here, otherwise
-                // hasCapability("composition") returns false;
-                clone.composition = [];
-            }
-
-            delete clone.persisted;
-            delete clone.modified;
-            delete clone.location;
-
-            return clone;
-        }
-
-        /**
-         * Will persist a list of {@link objectClones}. It will persist all
-         * simultaneously, irrespective of order in the list. This may
-         * result in automatic request batching by the browser.
-         */
-        function persistObjects(self) {
-            return self.$q.all(self.clones.map(function (clone) {
-                return clone.getCapability("persistence").persist().then(function () {
-                    self.deferred.notify({
-                        phase: "copying",
-                        totalObjects: self.clones.length,
-                        processed: ++self.persisted
-                    });
-                });
-            })).then(function () {
-                return self;
-            });
-        }
-
-        /**
-         * Will add a list of clones to the specified parent's composition
-         */
-        function addClonesToParent(self) {
-            return self.parent.getCapability("composition")
-                .add(self.firstClone)
-                .then(function (addedClone) {
-                    return self.parent.getCapability("persistence").persist()
-                        .then(function () {
-                            return addedClone;
-                        });
-                });
-        }
-
-        /**
-         * Update identifiers in a cloned object model (or part of
-         * a cloned object model) to reflect new identifiers after
-         * copying.
-         * @private
-         */
-        CopyTask.prototype.rewriteIdentifiers = function (obj, idMap) {
-            function lookupValue(value) {
-                return (typeof value === 'string' && idMap[value]) || value;
-            }
-
-            if (Array.isArray(obj)) {
-                obj.forEach(function (value, index) {
-                    obj[index] = lookupValue(value);
-                    this.rewriteIdentifiers(obj[index], idMap);
-                }, this);
-            } else if (obj && typeof obj === 'object') {
-                Object.keys(obj).forEach(function (key) {
-                    var value = obj[key];
-                    obj[key] = lookupValue(value);
-                    if (idMap[key]) {
-                        delete obj[key];
-                        obj[idMap[key]] = value;
-                    }
-
-                    this.rewriteIdentifiers(value, idMap);
-                }, this);
-            }
-        };
-
-        /**
-         * Given an array of objects composed by a parent, clone them, then
-         * add them to the parent.
-         * @private
-         * @returns {*}
-         */
-        CopyTask.prototype.copyComposees = function (composees, clonedParent, originalParent) {
-            var self = this,
-                idMap = {};
-
-            return (composees || []).reduce(function (promise, originalComposee) {
-                //If the composee is composed of other
-                // objects, chain a promise..
-                return promise.then(function () {
-                    // ...to recursively copy it (and its children)
-                    return self.copy(originalComposee, originalParent).then(function (clonedComposee) {
-                        //Map the original composee's ID to that of its
-                        // clone so that we can replace any references to it
-                        // in the parent
-                        idMap[originalComposee.getId()] = clonedComposee.getId();
-
-                        //Compose the child within its parent. Cloned
-                        // objects will need to also have their location
-                        // set, however linked objects will not.
-                        return composeChild(clonedComposee, clonedParent, clonedComposee !== originalComposee);
-                    });
-                });
-            }, self.$q.when(undefined)
-            ).then(function () {
-                //Replace any references in the cloned parent to
-                // contained objects that have been composed with the
-                // Ids of the clones
-                self.rewriteIdentifiers(clonedParent.getModel(), idMap);
-
-                //Add the clone to the list of clones that will
-                //be returned by this function
-                self.clones.push(clonedParent);
-
-                return clonedParent;
-            });
-        };
-
-        /**
-         * A recursive function that will perform a bottom-up copy of
-         * the object tree with originalObject at the root. Recurses to
-         * the farthest leaf, then works its way back up again,
-         * cloning objects, and composing them with their child clones
-         * as it goes
-         * @private
-         * @returns {DomainObject} If the type of the original object allows for
-         * duplication, then a duplicate of the object, otherwise the object
-         * itself (to allow linking to non duplicatable objects).
-         */
-        CopyTask.prototype.copy = function (originalObject) {
-            var self = this,
-                clone;
-
-            //Check if the type of the object being copied allows for
-            // creation of new instances. If it does not, then a link to the
-            // original will be created instead.
-            if (this.filter(originalObject)) {
-                //create a new clone of the original object. Use the
-                // creation capability of the targetParent to create the
-                // new clone. This will ensure that the correct persistence
-                // space is used.
-                clone = this.parent.useCapability("instantiation", cloneObjectModel(originalObject.getModel()));
-
-                //Iterate through child tree
-                return this.$q.when(originalObject.useCapability('composition')).then(function (composees) {
-                    self.deferred.notify({phase: "preparing"});
-
-                    //Duplicate the object's children, and their children, and
-                    // so on down to the leaf nodes of the tree.
-                    //If it is a link, don't both with children
-                    return self.copyComposees(composees, clone, originalObject);
-                });
-            } else {
-                //Creating a link, no need to iterate children
-                return self.$q.when(originalObject);
-            }
-
-        };
-
-        /**
-         * Will build a graph of an object and all of its child objects in
-         * memory
-         * @private
-         * @param domainObject The original object to be copied
-         * @param parent The parent of the original object to be copied
-         * @returns {Promise} resolved with an array of clones of the models
-         * of the object tree being copied. Copying is done in a bottom-up
-         * fashion, so that the last member in the array is a clone of the model
-         * object being copied. The clones are all full composed with
-         * references to their own children.
-         */
-        CopyTask.prototype.buildCopyPlan = function () {
-            var self = this;
-
-            return this.copy(self.domainObject, self.parent).then(function (domainObjectClone) {
-                if (domainObjectClone !== self.domainObject) {
-                    domainObjectClone.getModel().location = self.parent.getId();
-                }
-
-                self.firstClone = domainObjectClone;
-
-                return self;
-            });
-        };
-
-        /**
-         * Execute the copy task with the objects provided in the constructor.
-         * @returns {promise} Which will resolve with a clone of the object
-         * once complete.
-         */
-        CopyTask.prototype.perform = function () {
-            this.deferred = this.$q.defer();
-
-            this.buildCopyPlan()
-                .then(persistObjects)
-                .then(addClonesToParent)
-                .then(this.deferred.resolve, this.deferred.reject);
-
-            return this.deferred.promise;
-        };
-
-        return CopyTask;
-    }
-);
diff --git a/platform/entanglement/src/services/LinkService.js b/platform/entanglement/src/services/LinkService.js
deleted file mode 100644
index f6f45b40310..00000000000
--- a/platform/entanglement/src/services/LinkService.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    function () {
-
-        /**
-         * LinkService provides an interface for linking objects to additional
-         * locations.  It also provides a method for determining if an object
-         * can be copied to a specific location.
-         * @constructor
-         * @memberof platform/entanglement
-         * @implements {platform/entanglement.AbstractComposeService}
-         */
-        function LinkService(openmct) {
-            this.openmct = openmct;
-        }
-
-        LinkService.prototype.validate = function (object, parentCandidate) {
-            if (!parentCandidate || !parentCandidate.getId) {
-                return false;
-            }
-
-            if (parentCandidate.getId() === object.getId()) {
-                return false;
-            }
-
-            if (!parentCandidate.hasCapability('composition')) {
-                return false;
-            }
-
-            if (parentCandidate.getModel().composition.indexOf(object.getId()) !== -1) {
-                return false;
-            }
-
-            return this.openmct.composition.checkPolicy(parentCandidate.useCapability('adapter'), object.useCapability('adapter'));
-        };
-
-        LinkService.prototype.perform = function (object, parentObject) {
-            if (!this.validate(object, parentObject)) {
-                throw new Error(
-                    "Tried to link objects without validating first."
-                );
-            }
-
-            return parentObject.getCapability('composition').add(object);
-        };
-
-        return LinkService;
-    }
-);
-
diff --git a/platform/entanglement/src/services/LocatingCreationDecorator.js b/platform/entanglement/src/services/LocatingCreationDecorator.js
deleted file mode 100644
index 36cfae1c076..00000000000
--- a/platform/entanglement/src/services/LocatingCreationDecorator.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    function () {
-
-        /**
-         * Adds a `location` property to newly-created domain objects.
-         * @constructor
-         * @augments {platform/commonUI/browse.CreationService}
-         * @memberof platform/entanglement
-         */
-        function LocatingCreationDecorator(creationService) {
-            this.creationService = creationService;
-        }
-
-        LocatingCreationDecorator.prototype.createObject = function (model, parent) {
-            if (parent && parent.getId) {
-                model.location = parent.getId();
-            }
-
-            return this.creationService.createObject(model, parent);
-        };
-
-        return LocatingCreationDecorator;
-    }
-);
-
diff --git a/platform/entanglement/src/services/LocatingObjectDecorator.js b/platform/entanglement/src/services/LocatingObjectDecorator.js
deleted file mode 100644
index ecdcec64e71..00000000000
--- a/platform/entanglement/src/services/LocatingObjectDecorator.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['../../../core/src/capabilities/ContextualDomainObject'],
-    function (ContextualDomainObject) {
-
-        /**
-         * Ensures that domain objects are loaded with a context capability
-         * that reflects their location.
-         * @constructor
-         * @implements {ObjectService}
-         * @memberof platform/entanglement
-         */
-        function LocatingObjectDecorator($q, $log, objectService) {
-            this.$log = $log;
-            this.objectService = objectService;
-            this.$q = $q;
-        }
-
-        LocatingObjectDecorator.prototype.getObjects = function (ids, abortSignal) {
-            var $q = this.$q,
-                $log = this.$log,
-                objectService = this.objectService,
-                result = {};
-
-            // Load a single object using location to establish a context
-            function loadObjectInContext(id, exclude) {
-                function attachContext(objects) {
-                    var domainObject = (objects || {})[id],
-                        model = domainObject && domainObject.getModel(),
-                        location = (model || {}).location;
-
-                    // If no location is defined, we can't look up a context.
-                    if (!location) {
-                        return domainObject;
-                    }
-
-                    // Avoid looping indefinitely on cyclical locations
-                    if (exclude[id]) {
-                        $log.warn([
-                            "LocatingObjectDecorator detected a cycle",
-                            "while attempted to define a context for",
-                            id + ";",
-                            "no context will be added and unexpected behavior",
-                            "may follow."
-                        ].join(" "));
-
-                        return domainObject;
-                    }
-
-                    // Record that we've visited this ID to detect cycles.
-                    exclude[id] = true;
-
-                    // Do the recursive step to get the parent...
-                    return loadObjectInContext(location, exclude)
-                        .then(function (parent) {
-                            // ...and then contextualize with it!
-                            return new ContextualDomainObject(domainObject, parent);
-                        });
-                }
-
-                return objectService.getObjects([id], abortSignal).then(attachContext);
-            }
-
-            ids.forEach(function (id) {
-                result[id] = loadObjectInContext(id, {});
-            });
-
-            return $q.all(result);
-        };
-
-        return LocatingObjectDecorator;
-    }
-);
-
diff --git a/platform/entanglement/src/services/LocationService.js b/platform/entanglement/src/services/LocationService.js
deleted file mode 100644
index 4490c4c4226..00000000000
--- a/platform/entanglement/src/services/LocationService.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * This bundle implements actions which control the location of objects
- * (move, copy, link.)
- * @namespace platform/entanglement
- */
-define(
-    function () {
-
-        /**
-         * The LocationService allows for easily prompting the user for a
-         * location in the root tree.
-         * @constructor
-         * @memberof platform/entanglement
-         */
-        function LocationService(dialogService) {
-            return {
-                /** Prompt the user to select a location.  Returns a promise
-                 * that is resolved with a domainObject representing the
-                 * location selected by the user.
-                 *
-                 * @param {string} title - title of location dialog
-                 * @param {string} label - label for location input field
-                 * @param {function} validate - function that validates
-                 *     selections.
-                 * @param {domainObject} initialLocation - tree location to
-                 *     display at start
-                 * @returns {Promise} promise for a domain object.
-                 * @memberof platform/entanglement.LocationService#
-                 */
-                getLocationFromUser: function (title, label, validate, initialLocation) {
-                    var formStructure,
-                        formState;
-
-                    formStructure = {
-                        sections: [
-                            {
-                                name: 'Location',
-                                cssClass: "grows",
-                                rows: [
-                                    {
-                                        name: label,
-                                        control: "locator",
-                                        validate: validate,
-                                        key: 'location'
-                                    }
-                                ]
-                            }
-                        ],
-                        name: title
-                    };
-
-                    formState = {
-                        location: initialLocation
-                    };
-
-                    return dialogService
-                        .getUserInput(formStructure, formState)
-                        .then(function (userFormState) {
-                            return userFormState.location;
-                        });
-                }
-            };
-        }
-
-        return LocationService;
-    }
-);
-
diff --git a/platform/entanglement/test/ControlledPromise.js b/platform/entanglement/test/ControlledPromise.js
deleted file mode 100644
index 11eb3bfb133..00000000000
--- a/platform/entanglement/test/ControlledPromise.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    function () {
-
-        /**
-         * An instrumented promise implementation for better control of promises
-         * during tests.
-         *
-         */
-        function ControlledPromise() {
-            this.resolveHandlers = [];
-            this.rejectHandlers = [];
-            spyOn(this, 'then').and.callThrough();
-        }
-
-        /**
-         * Resolve the promise, passing the supplied value to all resolve
-         * handlers.
-         */
-        ControlledPromise.prototype.resolve = function (value) {
-            this.resolveHandlers.forEach(function (handler) {
-                handler(value);
-            });
-        };
-
-        /**
-         * Reject the promise, passing the supplied value to all rejection
-         * handlers.
-         */
-        ControlledPromise.prototype.reject = function (value) {
-            this.rejectHandlers.forEach(function (handler) {
-                handler(value);
-            });
-        };
-
-        /**
-         * Standard promise.then, returns a promise that support chaining.
-         * TODO: Need to support resolve/reject handlers that return promises.
-         */
-        ControlledPromise.prototype.then = function (onResolve, onReject) {
-            var returnPromise = new ControlledPromise();
-
-            if (onResolve) {
-                this.resolveHandlers.push(function (resolveWith) {
-                    var chainResult = onResolve(resolveWith);
-                    if (chainResult && chainResult.then) {
-                        // chainResult is a promise, resolve when it resolves.
-                        chainResult.then(function (pipedResult) {
-                            return returnPromise.resolve(pipedResult);
-                        });
-                    } else {
-                        returnPromise.resolve(chainResult);
-                    }
-                });
-            }
-
-            if (onReject) {
-                this.rejectHandlers.push(function (rejectWith) {
-                    var chainResult = onReject(rejectWith);
-                    if (chainResult && chainResult.then) {
-                        chainResult.then(function (pipedResult) {
-                            returnPromise.reject(pipedResult);
-                        });
-                    } else {
-                        returnPromise.reject(chainResult);
-                    }
-                });
-            }
-
-            return returnPromise;
-        };
-
-        return ControlledPromise;
-
-    }
-);
diff --git a/platform/entanglement/test/DomainObjectFactory.js b/platform/entanglement/test/DomainObjectFactory.js
deleted file mode 100644
index 834646a5c73..00000000000
--- a/platform/entanglement/test/DomainObjectFactory.js
+++ /dev/null
@@ -1,160 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    function () {
-
-        /**
-         * @typedef DomainObjectConfig
-         * @type {object}
-         * @property {string} [name] a name for the underlying jasmine spy
-         *     object mockDomainObject.  Used as
-         * @property {string} [id] initial id value for the domainOBject.
-         * @property {object} [model] initial values for the object's model.
-         * @property {object} [capabilities] an object containing
-         *     capability definitions.
-         */
-
-        var configObjectProps = ['model', 'capabilities'];
-
-        /**
-         * Internal function for ensuring an object is an instance of a
-         * DomainObjectConfig.
-         */
-        function ensureValidConfigObject(config) {
-            if (!config || !config.hasOwnProperty) {
-                config = {};
-            }
-
-            if (!config.name) {
-                config.name = 'domainObject';
-            }
-
-            configObjectProps.forEach(function (prop) {
-                if (!config[prop] || !config[prop].hasOwnProperty) {
-                    config[prop] = {};
-                }
-            });
-
-            return config;
-        }
-
-        /**
-         * Defines a factory function which takes a `config` object and returns
-         * a mock domainObject.  The config object is an easy way to provide
-         * initial properties for the domainObject-- they can be changed at any
-         * time by directly modifying the domainObject's properties.
-         *
-         * @param {Object} [config] initial configuration for a domain object.
-         * @returns {Object} mockDomainObject
-         */
-        function domainObjectFactory(config) {
-            config = ensureValidConfigObject(config);
-
-            var domainObject = jasmine.createSpyObj(config.name, [
-                'getId',
-                'getModel',
-                'getCapability',
-                'hasCapability',
-                'useCapability'
-            ]);
-
-            domainObject.model = JSON.parse(JSON.stringify(config.model));
-            domainObject.capabilities = config.capabilities;
-            domainObject.id = config.id;
-
-            /**
-             * getId: Returns `domainObject.id`.
-             *
-             * @returns {string} id
-             */
-            domainObject.getId.and.callFake(function () {
-                return domainObject.id;
-            });
-
-            /**
-             * getModel: Returns `domainObject.model`.
-             *
-             * @returns {object} model
-             */
-            domainObject.getModel.and.callFake(function () {
-                return domainObject.model;
-            });
-
-            /**
-             * getCapability: returns a `capability` object defined in
-             * domainObject.capabilities.  Returns undefined if capability
-             * does not exist.
-             *
-             * @param {string} capability name of the capability to return.
-             * @returns {*} capability object
-             */
-            domainObject.getCapability.and.callFake(function (capability) {
-                if (Object.prototype.hasOwnProperty.call(config.capabilities, capability)) {
-                    return config.capabilities[capability];
-                }
-            });
-
-            /**
-             * hasCapability: return true if domainObject.capabilities has a
-             * property named `capability`, otherwise returns false.
-             *
-             * @param {string} capability name of the capability to test for
-             *     existence of.
-             * @returns {boolean}
-             */
-            domainObject.hasCapability.and.callFake(function (capability) {
-                return Object.prototype.hasOwnProperty.call(config.capabilities, capability);
-            });
-
-            /**
-             * useCapability: find a capability in domainObject.capabilities
-             * and call that capabilities' invoke method.  If the capability
-             * does not have an invoke method, will throw an error.
-             *
-             * @param {string} capability name of a capability to invoke.
-             * @param {...*} params to pass to the capability's `invoke` method.
-             * @returns {*} result whatever was returned by `invoke`.
-             */
-            domainObject.useCapability.and.callFake(function (capability) {
-                if (Object.prototype.hasOwnProperty.call(config.capabilities, capability)) {
-                    if (!config.capabilities[capability].invoke) {
-                        throw new Error(
-                            capability + ' missing invoke function.'
-                        );
-                    }
-
-                    var passThroughArgs = [].slice.call(arguments, 1);
-
-                    return config
-                        .capabilities[capability]
-                        .invoke
-                        .apply(null, passThroughArgs);
-                }
-            });
-
-            return domainObject;
-        }
-
-        return domainObjectFactory;
-    }
-);
diff --git a/platform/entanglement/test/actions/AbstractComposeActionSpec.js b/platform/entanglement/test/actions/AbstractComposeActionSpec.js
deleted file mode 100644
index e55ad9360ee..00000000000
--- a/platform/entanglement/test/actions/AbstractComposeActionSpec.js
+++ /dev/null
@@ -1,227 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [
-        '../../src/actions/AbstractComposeAction',
-        '../services/MockCopyService',
-        '../DomainObjectFactory'
-    ],
-    function (AbstractComposeAction, MockCopyService, domainObjectFactory) {
-
-        describe("Move/copy/link Actions", function () {
-
-            var action,
-                policyService,
-                locationService,
-                locationServicePromise,
-                composeService,
-                context,
-                selectedObject,
-                selectedObjectContextCapability,
-                currentParent,
-                newParent;
-
-            beforeEach(function () {
-                policyService = jasmine.createSpyObj(
-                    'policyService',
-                    ['allow']
-                );
-
-                selectedObjectContextCapability = jasmine.createSpyObj(
-                    'selectedObjectContextCapability',
-                    [
-                        'getParent'
-                    ]
-                );
-
-                selectedObject = domainObjectFactory({
-                    name: 'selectedObject',
-                    model: {
-                        name: 'selectedObject'
-                    },
-                    capabilities: {
-                        context: selectedObjectContextCapability
-                    }
-                });
-
-                currentParent = domainObjectFactory({
-                    name: 'currentParent'
-                });
-
-                selectedObjectContextCapability
-                    .getParent
-                    .and.returnValue(currentParent);
-
-                newParent = domainObjectFactory({
-                    name: 'newParent'
-                });
-
-                locationService = jasmine.createSpyObj(
-                    'locationService',
-                    [
-                        'getLocationFromUser'
-                    ]
-                );
-
-                locationServicePromise = jasmine.createSpyObj(
-                    'locationServicePromise',
-                    [
-                        'then'
-                    ]
-                );
-
-                policyService.allow.and.returnValue(true);
-
-                locationService
-                    .getLocationFromUser
-                    .and.returnValue(locationServicePromise);
-
-                composeService = new MockCopyService();
-            });
-
-            it("are only applicable to domain objects with a context", function () {
-                var noContextObject = domainObjectFactory({
-                    name: 'selectedObject',
-                    model: { name: 'selectedObject' },
-                    capabilities: {}
-                });
-
-                expect(AbstractComposeAction.appliesTo({
-                    selectedObject: selectedObject
-                })).toBe(true);
-                expect(AbstractComposeAction.appliesTo({
-                    domainObject: selectedObject
-                })).toBe(true);
-
-                expect(AbstractComposeAction.appliesTo({
-                    selectedObject: noContextObject
-                })).toBe(false);
-                expect(AbstractComposeAction.appliesTo({
-                    domainObject: noContextObject
-                })).toBe(false);
-            });
-
-            describe("with context from context-action", function () {
-                beforeEach(function () {
-                    context = {
-                        domainObject: selectedObject
-                    };
-
-                    action = new AbstractComposeAction(
-                        policyService,
-                        locationService,
-                        composeService,
-                        context,
-                        "Compose"
-                    );
-                });
-
-                it("initializes happily", function () {
-                    expect(action).toBeDefined();
-                });
-
-                describe("when performed it", function () {
-                    beforeEach(function () {
-                        action.perform();
-                    });
-
-                    it("prompts for location", function () {
-                        expect(locationService.getLocationFromUser)
-                            .toHaveBeenCalledWith(
-                                "Compose selectedObject To a New Location",
-                                "Compose To",
-                                jasmine.any(Function),
-                                currentParent
-                            );
-                    });
-
-                    it("waits for location and handles cancellation by user", function () {
-                        expect(locationServicePromise.then)
-                            .toHaveBeenCalledWith(jasmine.any(Function), jasmine.any(Function));
-                    });
-
-                    it("copies object to selected location", function () {
-                        locationServicePromise
-                            .then
-                            .calls.mostRecent()
-                            .args[0](newParent);
-
-                        expect(composeService.perform)
-                            .toHaveBeenCalledWith(selectedObject, newParent);
-                    });
-
-                    describe("provides a validator which", function () {
-                        var validator;
-
-                        beforeEach(function () {
-                            validator = locationService.getLocationFromUser
-                                .calls.mostRecent().args[2];
-                            composeService.validate.and.returnValue(true);
-                            policyService.allow.and.returnValue(true);
-                        });
-
-                        it("is sensitive to policy", function () {
-                            expect(validator()).toBe(true);
-                            policyService.allow.and.returnValue(false);
-                            expect(validator()).toBe(false);
-                        });
-
-                        it("is sensitive to service-specific validation", function () {
-                            expect(validator()).toBe(true);
-                            composeService.validate.and.returnValue(false);
-                            expect(validator()).toBe(false);
-                        });
-
-                    });
-                });
-            });
-
-            describe("with context from drag-drop", function () {
-                beforeEach(function () {
-                    context = {
-                        selectedObject: selectedObject,
-                        domainObject: newParent
-                    };
-
-                    action = new AbstractComposeAction(
-                        policyService,
-                        locationService,
-                        composeService,
-                        context,
-                        "Compose"
-                    );
-                });
-
-                it("initializes happily", function () {
-                    expect(action).toBeDefined();
-                });
-
-                it("performs copy immediately", function () {
-                    action.perform();
-                    expect(composeService.perform)
-                        .toHaveBeenCalledWith(selectedObject, newParent);
-                });
-            });
-        });
-    }
-);
diff --git a/platform/entanglement/test/actions/LinkActionSpec.js b/platform/entanglement/test/actions/LinkActionSpec.js
deleted file mode 100644
index f42cce799f0..00000000000
--- a/platform/entanglement/test/actions/LinkActionSpec.js
+++ /dev/null
@@ -1,178 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [
-        '../../src/actions/LinkAction',
-        '../services/MockLinkService',
-        '../DomainObjectFactory'
-    ],
-    function (LinkAction, MockLinkService, domainObjectFactory) {
-
-        describe("Link Action", function () {
-
-            var linkAction,
-                policyService,
-                locationService,
-                locationServicePromise,
-                linkService,
-                context,
-                selectedObject,
-                selectedObjectContextCapability,
-                currentParent,
-                newParent;
-
-            beforeEach(function () {
-                policyService = jasmine.createSpyObj(
-                    'policyService',
-                    ['allow']
-                );
-                policyService.allow.and.returnValue(true);
-
-                selectedObjectContextCapability = jasmine.createSpyObj(
-                    'selectedObjectContextCapability',
-                    [
-                        'getParent'
-                    ]
-                );
-
-                selectedObject = domainObjectFactory({
-                    name: 'selectedObject',
-                    model: {
-                        name: 'selectedObject'
-                    },
-                    capabilities: {
-                        context: selectedObjectContextCapability
-                    }
-                });
-
-                currentParent = domainObjectFactory({
-                    name: 'currentParent'
-                });
-
-                selectedObjectContextCapability
-                    .getParent
-                    .and.returnValue(currentParent);
-
-                newParent = domainObjectFactory({
-                    name: 'newParent'
-                });
-
-                locationService = jasmine.createSpyObj(
-                    'locationService',
-                    [
-                        'getLocationFromUser'
-                    ]
-                );
-
-                locationServicePromise = jasmine.createSpyObj(
-                    'locationServicePromise',
-                    [
-                        'then'
-                    ]
-                );
-
-                locationService
-                    .getLocationFromUser
-                    .and.returnValue(locationServicePromise);
-
-                linkService = new MockLinkService();
-            });
-
-            describe("with context from context-action", function () {
-                beforeEach(function () {
-                    context = {
-                        domainObject: selectedObject
-                    };
-
-                    linkAction = new LinkAction(
-                        policyService,
-                        locationService,
-                        linkService,
-                        context
-                    );
-                });
-
-                it("initializes happily", function () {
-                    expect(linkAction).toBeDefined();
-                });
-
-                describe("when performed it", function () {
-                    beforeEach(function () {
-                        linkAction.perform();
-                    });
-
-                    it("prompts for location", function () {
-                        expect(locationService.getLocationFromUser)
-                            .toHaveBeenCalledWith(
-                                "Link selectedObject To a New Location",
-                                "Link To",
-                                jasmine.any(Function),
-                                currentParent
-                            );
-                    });
-
-                    it("waits for location and handles cancellation by user", function () {
-                        expect(locationServicePromise.then)
-                            .toHaveBeenCalledWith(jasmine.any(Function), jasmine.any(Function));
-                    });
-
-                    it("links object to selected location", function () {
-                        locationServicePromise
-                            .then
-                            .calls.mostRecent()
-                            .args[0](newParent);
-
-                        expect(linkService.perform)
-                            .toHaveBeenCalledWith(selectedObject, newParent);
-                    });
-                });
-            });
-
-            describe("with context from drag-drop", function () {
-                beforeEach(function () {
-                    context = {
-                        selectedObject: selectedObject,
-                        domainObject: newParent
-                    };
-
-                    linkAction = new LinkAction(
-                        policyService,
-                        locationService,
-                        linkService,
-                        context
-                    );
-                });
-
-                it("initializes happily", function () {
-                    expect(linkAction).toBeDefined();
-                });
-
-                it("performs link immediately", function () {
-                    linkAction.perform();
-                    expect(linkService.perform)
-                        .toHaveBeenCalledWith(selectedObject, newParent);
-                });
-            });
-        });
-    }
-);
diff --git a/platform/entanglement/test/actions/SetPrimaryLocationActionSpec.js b/platform/entanglement/test/actions/SetPrimaryLocationActionSpec.js
deleted file mode 100644
index 9ef6a170e9a..00000000000
--- a/platform/entanglement/test/actions/SetPrimaryLocationActionSpec.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [
-        '../../src/actions/SetPrimaryLocationAction',
-        '../DomainObjectFactory'
-    ],
-    function (SetPrimaryLocation, domainObjectFactory) {
-
-        describe("The 'set primary location' action", function () {
-            var testContext,
-                testModel,
-                testId,
-                mockLocationCapability;
-
-            beforeEach(function () {
-                testId = "some-id";
-                testModel = { name: "some name" };
-
-                mockLocationCapability = jasmine.createSpyObj(
-                    'location',
-                    ['setPrimaryLocation', 'getContextualLocation']
-                );
-
-                mockLocationCapability.getContextualLocation.and.returnValue(testId);
-
-                testContext = {
-                    domainObject: domainObjectFactory({
-                        capabilities: {
-                            location: mockLocationCapability
-                        },
-                        model: testModel
-                    })
-                };
-            });
-
-            it("is applicable to objects with no location specified", function () {
-                expect(SetPrimaryLocation.appliesTo(testContext))
-                    .toBe(true);
-                testContext.domainObject.getModel.and.returnValue({
-                    location: "something",
-                    name: "some name"
-                });
-                expect(SetPrimaryLocation.appliesTo(testContext))
-                    .toBe(false);
-            });
-
-            it("sets the location contextually when performed", function () {
-                new SetPrimaryLocation(testContext).perform();
-                expect(mockLocationCapability.setPrimaryLocation)
-                    .toHaveBeenCalledWith(testId);
-            });
-
-        });
-    }
-);
diff --git a/platform/entanglement/test/capabilities/LocationCapabilitySpec.js b/platform/entanglement/test/capabilities/LocationCapabilitySpec.js
deleted file mode 100644
index 071a6acd0fd..00000000000
--- a/platform/entanglement/test/capabilities/LocationCapabilitySpec.js
+++ /dev/null
@@ -1,163 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [
-        '../../src/capabilities/LocationCapability',
-        '../DomainObjectFactory',
-        '../ControlledPromise'
-    ],
-    function (LocationCapability, domainObjectFactory, ControlledPromise) {
-
-        describe("LocationCapability", function () {
-
-            describe("instantiated with domain object", function () {
-                var locationCapability,
-                    mutationPromise,
-                    mockQ,
-                    mockInjector,
-                    mockObjectService,
-                    domainObject;
-
-                beforeEach(function () {
-                    domainObject = domainObjectFactory({
-                        id: "testObject",
-                        capabilities: {
-                            context: {
-                                getParent: function () {
-                                    return domainObjectFactory({id: 'root'});
-                                }
-                            },
-                            mutation: jasmine.createSpyObj(
-                                'mutationCapability',
-                                ['invoke']
-                            )
-                        }
-                    });
-
-                    mockQ = jasmine.createSpyObj("$q", ["when"]);
-                    mockInjector = jasmine.createSpyObj("$injector", ["get"]);
-                    mockObjectService =
-                        jasmine.createSpyObj("objectService", ["getObjects"]);
-
-                    mutationPromise = new ControlledPromise();
-                    domainObject.capabilities.mutation.invoke.and.callFake(
-                        function (mutator) {
-                            return mutationPromise.then(function () {
-                                mutator(domainObject.model);
-                            });
-                        }
-                    );
-
-                    locationCapability = new LocationCapability(
-                        mockQ,
-                        mockInjector,
-                        domainObject
-                    );
-                });
-
-                it("returns contextual location", function () {
-                    expect(locationCapability.getContextualLocation())
-                        .toBe('root');
-                });
-
-                it("knows when the object is an original", function () {
-                    domainObject.model.location = 'root';
-                    expect(locationCapability.isOriginal()).toBe(true);
-                    expect(locationCapability.isLink()).toBe(false);
-                });
-
-                it("knows when the object is a link.", function () {
-                    domainObject.model.location = 'different-root';
-                    expect(locationCapability.isLink()).toBe(true);
-                    expect(locationCapability.isOriginal()).toBe(false);
-                });
-
-                it("can mutate location", function () {
-                    var result = locationCapability
-                            .setPrimaryLocation('root'),
-                        whenComplete = jasmine.createSpy('whenComplete');
-
-                    result.then(whenComplete);
-
-                    expect(domainObject.model.location).not.toBeDefined();
-                    mutationPromise.resolve();
-                    expect(domainObject.model.location).toBe('root');
-
-                    expect(whenComplete).toHaveBeenCalled();
-                });
-
-                describe("when used to load an original instance", function () {
-                    var objectPromise,
-                        qPromise,
-                        originalObjects,
-                        mockCallback;
-
-                    function resolvePromises() {
-                        if (mockQ.when.calls.count() > 0) {
-                            qPromise.resolve(mockQ.when.calls.mostRecent().args[0]);
-                        }
-
-                        if (mockObjectService.getObjects.calls.count() > 0) {
-                            objectPromise.resolve(originalObjects);
-                        }
-                    }
-
-                    beforeEach(function () {
-                        objectPromise = new ControlledPromise();
-                        qPromise = new ControlledPromise();
-                        originalObjects = {
-                            testObject: domainObjectFactory()
-                        };
-
-                        mockInjector.get.and.callFake(function (key) {
-                            return key === 'objectService' && mockObjectService;
-                        });
-                        mockObjectService.getObjects.and.returnValue(objectPromise);
-                        mockQ.when.and.returnValue(qPromise);
-
-                        mockCallback = jasmine.createSpy('callback');
-                    });
-
-                    it("provides originals directly", function () {
-                        domainObject.model.location = 'root';
-                        locationCapability.getOriginal().then(mockCallback);
-                        expect(mockCallback).not.toHaveBeenCalled();
-                        resolvePromises();
-                        expect(mockCallback)
-                            .toHaveBeenCalledWith(domainObject);
-                    });
-
-                    it("loads from the object service for links", function () {
-                        domainObject.model.location = 'some-other-root';
-                        locationCapability.getOriginal().then(mockCallback);
-                        expect(mockCallback).not.toHaveBeenCalled();
-                        resolvePromises();
-                        expect(mockCallback)
-                            .toHaveBeenCalledWith(originalObjects.testObject);
-                    });
-                });
-
-            });
-        });
-    }
-);
diff --git a/platform/entanglement/test/policies/CopyPolicySpec.js b/platform/entanglement/test/policies/CopyPolicySpec.js
deleted file mode 100644
index cb08f718e2e..00000000000
--- a/platform/entanglement/test/policies/CopyPolicySpec.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    '../../src/policies/CopyPolicy',
-    '../DomainObjectFactory'
-], function (CopyPolicy, domainObjectFactory) {
-
-    describe("CopyPolicy", function () {
-        var testMetadata,
-            testContext,
-            mockDomainObject,
-            mockType,
-            mockAction,
-            policy;
-
-        beforeEach(function () {
-            mockType =
-                jasmine.createSpyObj('type', ['hasFeature']);
-
-            testMetadata = {};
-
-            mockDomainObject = domainObjectFactory({
-                capabilities: { type: mockType }
-            });
-
-            mockType.hasFeature.and.callFake(function (feature) {
-                return feature === 'creation';
-            });
-
-            mockAction = jasmine.createSpyObj('action', ['getMetadata']);
-            mockAction.getMetadata.and.returnValue(testMetadata);
-
-            testContext = { domainObject: mockDomainObject };
-
-            policy = new CopyPolicy();
-        });
-
-        describe("for copy actions", function () {
-            beforeEach(function () {
-                testMetadata.key = 'copy';
-            });
-
-            describe("when an object is non-creatable", function () {
-                beforeEach(function () {
-                    mockType.hasFeature.and.returnValue(false);
-                });
-
-                it("disallows the action", function () {
-                    expect(policy.allow(mockAction, testContext)).toBe(false);
-                });
-            });
-
-            describe("when an object is creatable", function () {
-                it("allows the action", function () {
-                    expect(policy.allow(mockAction, testContext)).toBe(true);
-                });
-            });
-        });
-
-        describe("for other actions", function () {
-            beforeEach(function () {
-                testMetadata.key = 'foo';
-            });
-
-            it("simply allows the action", function () {
-                expect(policy.allow(mockAction, testContext)).toBe(true);
-                mockType.hasFeature.and.returnValue(false);
-                expect(policy.allow(mockAction, testContext)).toBe(true);
-            });
-        });
-    });
-});
diff --git a/platform/entanglement/test/policies/CrossSpacePolicySpec.js b/platform/entanglement/test/policies/CrossSpacePolicySpec.js
deleted file mode 100644
index c8b70e51524..00000000000
--- a/platform/entanglement/test/policies/CrossSpacePolicySpec.js
+++ /dev/null
@@ -1,117 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [
-        '../../src/policies/CrossSpacePolicy',
-        '../DomainObjectFactory'
-    ],
-    function (CrossSpacePolicy, domainObjectFactory) {
-
-        describe("CrossSpacePolicy", function () {
-            var mockAction,
-                testActionMetadata,
-                sameSpaceContext,
-                crossSpaceContext,
-                policy;
-
-            function makeObject(space) {
-                var mockPersistence = jasmine.createSpyObj(
-                    'persistence',
-                    ['getSpace']
-                );
-                mockPersistence.getSpace.and.returnValue(space);
-
-                return domainObjectFactory({
-                    id: space + ":foo",
-                    model: {},
-                    capabilities: { persistence: mockPersistence }
-                });
-            }
-
-            beforeEach(function () {
-                testActionMetadata = {};
-
-                // Policy should only call passive methods, so
-                // only define those in mocks.
-                mockAction = jasmine.createSpyObj(
-                    'action',
-                    ['getMetadata']
-                );
-                mockAction.getMetadata.and.returnValue(testActionMetadata);
-
-                sameSpaceContext = {
-                    domainObject: makeObject('a'),
-                    selectedObject: makeObject('a')
-                };
-                crossSpaceContext = {
-                    domainObject: makeObject('a'),
-                    selectedObject: makeObject('b')
-                };
-
-                policy = new CrossSpacePolicy();
-            });
-
-            describe("for move actions", function () {
-                beforeEach(function () {
-                    testActionMetadata.key = 'move';
-                });
-
-                it("allows same-space changes", function () {
-                    expect(policy.allow(mockAction, sameSpaceContext))
-                        .toBe(true);
-                });
-
-                it("disallows cross-space changes", function () {
-                    expect(policy.allow(mockAction, crossSpaceContext))
-                        .toBe(false);
-                });
-
-                it("allows actions with no selectedObject", function () {
-                    expect(policy.allow(mockAction, {
-                        domainObject: makeObject('a')
-                    })).toBe(true);
-                });
-            });
-
-            describe("for other actions", function () {
-                beforeEach(function () {
-                    testActionMetadata.key = "some-other-action";
-                });
-
-                it("allows same-space and cross-space changes", function () {
-                    expect(policy.allow(mockAction, crossSpaceContext))
-                        .toBe(true);
-                    expect(policy.allow(mockAction, sameSpaceContext))
-                        .toBe(true);
-                });
-
-                it("allows actions with no selectedObject", function () {
-                    expect(policy.allow(mockAction, {
-                        domainObject: makeObject('a')
-                    })).toBe(true);
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/entanglement/test/services/CopyServiceSpec.js b/platform/entanglement/test/services/CopyServiceSpec.js
deleted file mode 100644
index 45bef982b0a..00000000000
--- a/platform/entanglement/test/services/CopyServiceSpec.js
+++ /dev/null
@@ -1,479 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [
-        '../../src/services/CopyService',
-        '../DomainObjectFactory'
-    ],
-    function (CopyService, domainObjectFactory) {
-
-        function synchronousPromise(value) {
-            if (value && value.then) {
-                return value;
-            }
-
-            var promise = {
-                then: function (callback) {
-                    return synchronousPromise(callback(value));
-                }
-            };
-            spyOn(promise, 'then').and.callThrough();
-
-            return promise;
-        }
-
-        xdescribe("CopyService", function () {
-            var policyService;
-
-            beforeEach(function () {
-                policyService = jasmine.createSpyObj(
-                    'policyService',
-                    ['allow']
-                );
-            });
-
-            describe("validate", function () {
-
-                var copyService,
-                    object,
-                    parentCandidate,
-                    validate;
-
-                beforeEach(function () {
-                    copyService = new CopyService(
-                        null,
-                        policyService
-                    );
-                    object = domainObjectFactory({
-                        name: 'object',
-                        capabilities: {
-                            type: { type: 'object' }
-                        }
-                    });
-                    parentCandidate = domainObjectFactory({
-                        name: 'parentCandidate',
-                        capabilities: {
-                            type: { type: 'parentCandidate' }
-                        }
-                    });
-                    validate = function () {
-                        return copyService.validate(object, parentCandidate);
-                    };
-                });
-
-                it("does not allow invalid parentCandidate", function () {
-                    parentCandidate = undefined;
-                    expect(validate()).toBe(false);
-                    parentCandidate = {};
-                    expect(validate()).toBe(false);
-                });
-
-                it("does not allow copying into source object", function () {
-                    object.id = parentCandidate.id = 'abc';
-                    expect(validate()).toBe(false);
-                });
-
-                describe("defers to policyService", function () {
-                    beforeEach(function () {
-                        object.id = 'a';
-                        parentCandidate.id = 'b';
-                    });
-
-                    it("calls policy service with correct args", function () {
-                        validate();
-                        expect(policyService.allow).toHaveBeenCalledWith(
-                            "composition",
-                            parentCandidate,
-                            object
-                        );
-                    });
-
-                    it("and returns false", function () {
-                        policyService.allow.and.returnValue(false);
-                        expect(validate()).toBe(false);
-                    });
-
-                    it("and returns true", function () {
-                        policyService.allow.and.returnValue(true);
-                        expect(validate()).toBe(true);
-                    });
-                });
-            });
-
-            describe("perform", function () {
-
-                var mockQ,
-                    mockDeferred,
-                    copyService,
-                    object,
-                    newParent,
-                    copyResult,
-                    copyFinished,
-                    persistObjectPromise,
-                    persistenceCapability,
-                    instantiationCapability,
-                    compositionCapability,
-                    locationCapability,
-                    resolvedValue;
-
-                beforeEach(function () {
-                    policyService.allow.and.returnValue(true);
-
-                    persistObjectPromise = synchronousPromise(undefined);
-
-                    instantiationCapability = jasmine.createSpyObj(
-                        "instantiation",
-                        ["invoke"]
-                    );
-
-                    persistenceCapability = jasmine.createSpyObj(
-                        "persistenceCapability",
-                        ["persist", "getSpace"]
-                    );
-                    persistenceCapability.persist.and.returnValue(persistObjectPromise);
-
-                    compositionCapability = jasmine.createSpyObj(
-                        'compositionCapability',
-                        ['invoke', 'add']
-                    );
-                    compositionCapability.add.and.callFake(synchronousPromise);
-
-                    locationCapability = jasmine.createSpyObj(
-                        'locationCapability',
-                        ['isLink']
-                    );
-                    locationCapability.isLink.and.returnValue(false);
-
-                    mockDeferred = jasmine.createSpyObj(
-                        'mockDeferred',
-                        ['notify', 'resolve', 'reject']
-                    );
-                    mockDeferred.notify.and.callFake(function () {});
-                    mockDeferred.resolve.and.callFake(function (value) {
-                        resolvedValue = value;
-                    });
-                    mockDeferred.promise = {
-                        then: function (callback) {
-                            return synchronousPromise(callback(resolvedValue));
-                        }
-                    };
-
-                    mockQ = jasmine.createSpyObj(
-                        'mockQ',
-                        ['when', 'all', 'reject', 'defer']
-                    );
-                    mockQ.reject.and.returnValue(synchronousPromise(undefined));
-                    mockQ.when.and.callFake(synchronousPromise);
-                    mockQ.all.and.callFake(function (promises) {
-                        var result = {};
-                        Object.keys(promises).forEach(function (k) {
-                            promises[k].then(function (v) {
-                                result[k] = v;
-                            });
-                        });
-
-                        return synchronousPromise(result);
-                    });
-                    mockQ.defer.and.returnValue(mockDeferred);
-
-                });
-
-                describe("on domain object without composition", function () {
-                    beforeEach(function () {
-                        var objectCopy;
-
-                        newParent = domainObjectFactory({
-                            name: 'newParent',
-                            id: '456',
-                            model: {
-                                composition: []
-                            },
-                            capabilities: {
-                                instantiation: instantiationCapability,
-                                persistence: persistenceCapability,
-                                composition: compositionCapability
-                            }
-                        });
-
-                        object = domainObjectFactory({
-                            name: 'object',
-                            id: 'abc',
-                            model: {
-                                name: 'some object',
-                                location: '456',
-                                someOtherAttribute: 'some other value',
-                                embeddedObjectAttribute: {
-                                    name: 'Some embedded object'
-                                }
-                            },
-                            capabilities: {
-                                persistence: persistenceCapability
-                            }
-                        });
-
-                        objectCopy = domainObjectFactory({
-                            name: 'object',
-                            id: 'abc.copy.fdgdfgdf',
-                            capabilities: {
-                                persistence: persistenceCapability,
-                                location: locationCapability
-                            }
-                        });
-
-                        instantiationCapability.invoke.and.callFake(
-                            function (model) {
-                                objectCopy.model = model;
-
-                                return objectCopy;
-                            }
-                        );
-
-                        copyService = new CopyService(mockQ, policyService);
-                        copyResult = copyService.perform(object, newParent);
-                        copyFinished = jasmine.createSpy('copyFinished');
-                        copyResult.then(copyFinished);
-                    });
-
-                    it("uses persistence capability", function () {
-                        expect(persistenceCapability.persist)
-                            .toHaveBeenCalled();
-                    });
-
-                    it("deep clones object model", function () {
-                        var newModel = copyFinished.calls.all()[0].args[0].getModel();
-                        expect(newModel).toEqual(object.model);
-                        expect(newModel).not.toBe(object.model);
-                    });
-
-                    it("returns a promise", function () {
-                        expect(copyResult).toBeDefined();
-                        expect(copyFinished).toHaveBeenCalled();
-                    });
-
-                });
-
-                describe("on domainObject with composition", function () {
-                    var childObject,
-                        objectClone,
-                        childObjectClone;
-
-                    beforeEach(function () {
-                        var invocationCount = 0,
-                            objectClones;
-
-                        instantiationCapability.invoke.and.callFake(
-                            function (model) {
-                                var cloneToReturn = objectClones[invocationCount++];
-                                cloneToReturn.model = model;
-
-                                return cloneToReturn;
-                            }
-                        );
-
-                        newParent = domainObjectFactory({
-                            name: 'newParent',
-                            id: '456',
-                            model: {
-                                composition: []
-                            },
-                            capabilities: {
-                                instantiation: instantiationCapability,
-                                persistence: persistenceCapability,
-                                composition: compositionCapability
-                            }
-                        });
-
-                        childObject = domainObjectFactory({
-                            name: 'childObject',
-                            id: 'def',
-                            model: {
-                                name: 'a child object',
-                                location: 'abc'
-                            },
-                            capabilities: {
-                                persistence: persistenceCapability,
-                                location: locationCapability
-                            }
-                        });
-
-                        childObjectClone = domainObjectFactory({
-                            name: 'childObject',
-                            id: 'def.clone',
-                            capabilities: {
-                                persistence: persistenceCapability,
-                                location: locationCapability
-                            }
-                        });
-
-                        compositionCapability
-                            .invoke
-                            .and.returnValue(synchronousPromise([childObject]));
-
-                        object = domainObjectFactory({
-                            name: 'some object',
-                            id: 'abc',
-                            model: {
-                                name: 'some object',
-                                composition: ['def'],
-                                location: 'testLocation'
-                            },
-                            capabilities: {
-                                instantiation: instantiationCapability,
-                                composition: compositionCapability,
-                                location: locationCapability,
-                                persistence: persistenceCapability
-                            }
-                        });
-
-                        objectClone = domainObjectFactory({
-                            name: 'some object',
-                            id: 'abc.clone',
-                            capabilities: {
-                                instantiation: instantiationCapability,
-                                composition: compositionCapability,
-                                location: locationCapability,
-                                persistence: persistenceCapability
-                            }
-                        });
-
-                        objectClones = [objectClone, childObjectClone];
-
-                        copyService = new CopyService(mockQ, policyService);
-                    });
-
-                    describe("the cloning process", function () {
-                        beforeEach(function () {
-                            copyResult = copyService.perform(object, newParent);
-                            copyFinished = jasmine.createSpy('copyFinished');
-                            copyResult.then(copyFinished);
-                        });
-
-                        it("returns a promise", function () {
-                            expect(copyResult.then).toBeDefined();
-                            expect(copyFinished).toHaveBeenCalled();
-                        });
-
-                        it("returns a promise", function () {
-                            expect(copyResult.then).toBeDefined();
-                            expect(copyFinished).toHaveBeenCalled();
-                        });
-
-                        it ("correctly locates cloned objects", function () {
-                            expect(childObjectClone.getModel().location).toEqual(objectClone.getId());
-                        });
-                    });
-
-                    describe("when cloning non-creatable objects", function () {
-                        beforeEach(function () {
-                            policyService.allow.and.callFake(function (category) {
-                                //Return false for 'creation' policy
-                                return category !== 'creation';
-                            });
-
-                            copyResult = copyService.perform(object, newParent);
-                            copyFinished = jasmine.createSpy('copyFinished');
-                            copyResult.then(copyFinished);
-                        });
-                        it ("creates link instead of clone", function () {
-                            var copiedObject = copyFinished.calls.all()[0].args[0];
-                            expect(copiedObject).toBe(object);
-                            expect(compositionCapability.add)
-                                .toHaveBeenCalledWith(copiedObject);
-                        });
-                    });
-
-                    describe("when provided a filtering function", function () {
-                        beforeEach(function () {
-                            copyFinished = jasmine.createSpy('copyFinished');
-                        });
-
-                        function accept() {
-                            return true;
-                        }
-
-                        function reject() {
-                            return false;
-                        }
-
-                        it("does not create new instances of objects "
-                            + "rejected by the filter", function () {
-                            copyService.perform(object, newParent, reject)
-                                .then(copyFinished);
-                            expect(copyFinished.calls.mostRecent().args[0])
-                                .toBe(object);
-                        });
-
-                        it("does create new instances of objects "
-                            + "accepted by the filter", function () {
-                            copyService.perform(object, newParent, accept)
-                                .then(copyFinished);
-                            expect(copyFinished.calls.mostRecent().args[0])
-                                .not.toBe(object);
-                        });
-                    });
-                });
-
-                describe("on invalid inputs", function () {
-                    beforeEach(function () {
-                        object = domainObjectFactory({
-                            name: 'object',
-                            capabilities: {
-                                type: { type: 'object' },
-                                location: locationCapability,
-                                persistence: persistenceCapability
-                            }
-                        });
-
-                        newParent = domainObjectFactory({
-                            name: 'parentCandidate',
-                            capabilities: {
-                                type: { type: 'parentCandidate' },
-                                instantiation: instantiationCapability,
-                                composition: compositionCapability,
-                                persistence: persistenceCapability
-                            }
-                        });
-
-                        instantiationCapability.invoke.and.returnValue(object);
-                    });
-
-                    it("throws an error", function () {
-                        var service =
-                            new CopyService(mockQ, policyService);
-
-                        function perform() {
-                            service.perform(object, newParent);
-                        }
-
-                        spyOn(service, "validate");
-                        service.validate.and.returnValue(true);
-                        expect(perform).not.toThrow();
-                        service.validate.and.returnValue(false);
-                        expect(perform).toThrow();
-                    });
-                });
-
-            });
-        });
-    }
-);
diff --git a/platform/entanglement/test/services/CopyTaskSpec.js b/platform/entanglement/test/services/CopyTaskSpec.js
deleted file mode 100644
index 2bc0fc25811..00000000000
--- a/platform/entanglement/test/services/CopyTaskSpec.js
+++ /dev/null
@@ -1,267 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [
-        '../../src/services/CopyTask',
-        '../DomainObjectFactory'
-    ],
-    function (CopyTask, domainObjectFactory) {
-
-        var ID_A = "some-string-with-vaguely-uuidish-uniqueness",
-            ID_B = "some-other-similarly-unique-string";
-
-        function synchronousPromise(value) {
-            return (value && value.then) ? value : {
-                then: function (callback) {
-                    return synchronousPromise(callback(value));
-                }
-            };
-        }
-
-        describe("CopyTask", function () {
-            var mockDomainObject,
-                mockParentObject,
-                mockFilter,
-                mockQ,
-                mockDeferred,
-                testModel,
-                counter,
-                cloneIds,
-                task;
-
-            function makeMockCapabilities(childIds) {
-                var mockCapabilities = {
-                        persistence: jasmine.createSpyObj(
-                            'persistence',
-                            ['persist']
-                        ),
-                        composition: jasmine.createSpyObj(
-                            'composition',
-                            ['add', 'invoke']
-                        ),
-                        instantiation: jasmine.createSpyObj(
-                            'instantiation',
-                            ['instantiate', 'invoke']
-                        )
-                    },
-                    mockChildren = (childIds || []).map(function (id) {
-                        return domainObjectFactory({
-                            id: id,
-                            capabilities: makeMockCapabilities([]),
-                            model: { originalId: id }
-                        });
-                    });
-
-                mockCapabilities.persistence.persist
-                    .and.returnValue(synchronousPromise(true));
-                mockCapabilities.composition.add.and.callFake(function (obj) {
-                    return synchronousPromise(obj);
-                });
-                mockCapabilities.composition.invoke
-                    .and.returnValue(synchronousPromise(mockChildren));
-                mockCapabilities.instantiation.invoke
-                    .and.callFake(function (model) {
-                        var id = "some-id-" + counter;
-                        cloneIds[model.originalId] = id;
-                        counter += 1;
-
-                        return domainObjectFactory({
-                            id: id,
-                            model: model,
-                            capabilities: makeMockCapabilities()
-                        });
-                    });
-
-                return mockCapabilities;
-            }
-
-            beforeEach(function () {
-                counter = 0;
-                cloneIds = {};
-
-                testModel = {
-                    composition: [ID_A, ID_B],
-                    someObj: {},
-                    someArr: [ID_A, ID_B],
-                    objArr: [{"id": ID_A}, {"id": ID_B}],
-                    singleElementArr: [ID_A]
-                };
-                testModel.someObj[ID_A] = "some value";
-                testModel.someObj.someProperty = ID_B;
-
-                mockDomainObject = domainObjectFactory({
-                    capabilities: makeMockCapabilities(testModel.composition),
-                    model: testModel
-                });
-                mockParentObject = domainObjectFactory({
-                    capabilities: makeMockCapabilities()
-                });
-                mockFilter = jasmine.createSpy('filter');
-                mockQ = jasmine.createSpyObj('$q', ['when', 'defer', 'all']);
-                mockDeferred = jasmine.createSpyObj(
-                    'deferred',
-                    ['notify', 'resolve', 'reject']
-                );
-
-                mockFilter.and.returnValue(true);
-
-                mockQ.when.and.callFake(synchronousPromise);
-                mockQ.defer.and.returnValue(mockDeferred);
-                mockQ.all.and.callFake(function (promises) {
-                    return synchronousPromise(promises.map(function (promise) {
-                        var value;
-                        promise.then(function (v) {
-                            value = v;
-                        });
-
-                        return value;
-                    }));
-                });
-
-                mockDeferred.resolve.and.callFake(function (value) {
-                    mockDeferred.promise = synchronousPromise(value);
-                });
-
-            });
-
-            describe("produces models which", function () {
-                var model;
-
-                beforeEach(function () {
-                    task = new CopyTask(
-                        mockDomainObject,
-                        mockParentObject,
-                        mockFilter,
-                        mockQ
-                    );
-
-                    task.perform().then(function (clone) {
-                        model = clone.getModel();
-                    });
-                });
-
-                it("contain rewritten identifiers in arrays", function () {
-                    expect(model.someArr)
-                        .toEqual(testModel.someArr.map(function (id) {
-                            return cloneIds[id];
-                        }));
-                });
-
-                it("contain rewritten identifiers in properties", function () {
-                    expect(model.someObj.someProperty)
-                        .toEqual(cloneIds[testModel.someObj.someProperty]);
-                });
-
-                it("contain rewritten identifiers in property names", function () {
-                    expect(model.someObj[cloneIds[ID_A]])
-                        .toEqual(testModel.someObj[ID_A]);
-                });
-
-                it("contain rewritten identifiers in single-element arrays", function () {
-                    expect(model.singleElementArr)
-                        .toEqual(testModel.singleElementArr.map(function (id) {
-                            return cloneIds[id];
-                        }));
-                });
-            });
-
-            describe("copies object trees with multiple references to the"
-                + " same object", function () {
-                var mockDomainObjectB,
-                    mockComposingObject,
-                    composingObjectModel,
-                    domainObjectClone,
-                    domainObjectBClone;
-
-                beforeEach(function () {
-                    mockDomainObjectB = domainObjectFactory({
-                        capabilities: makeMockCapabilities(testModel.composition),
-                        model: testModel
-                    });
-                    composingObjectModel = {
-                        name: 'mockComposingObject',
-                        composition: [mockDomainObject.getId(), mockDomainObjectB.getId()]
-                    };
-                    mockComposingObject = domainObjectFactory({
-                        capabilities: makeMockCapabilities(composingObjectModel.composition),
-                        model: composingObjectModel
-                    });
-
-                    mockComposingObject.capabilities.composition.invoke.and.returnValue([mockDomainObject, mockDomainObjectB]);
-                    task = new CopyTask(
-                        mockComposingObject,
-                        mockParentObject,
-                        mockFilter,
-                        mockQ
-                    );
-
-                    task.perform();
-                    domainObjectClone = task.clones[2];
-                    domainObjectBClone = task.clones[5];
-                });
-
-                /**
-                 * mockDomainObject and mockDomainObjectB have the same
-                 * model with references to children ID_A and ID_B. Expect
-                 * that after duplication the references should differ
-                 * because they are each now referencing different child
-                 * objects. This tests the issue reported in #428
-                 */
-                it(" and correctly updates child identifiers in models ", function () {
-                    var childA_ID = task.clones[0].getId(),
-                        childB_ID = task.clones[1].getId(),
-                        childC_ID = task.clones[3].getId(),
-                        childD_ID = task.clones[4].getId();
-
-                    expect(domainObjectClone.model.someArr[0]).not.toBe(domainObjectBClone.model.someArr[0]);
-                    expect(domainObjectClone.model.someArr[0]).toBe(childA_ID);
-                    expect(domainObjectBClone.model.someArr[0]).toBe(childC_ID);
-                    expect(domainObjectClone.model.someArr[1]).not.toBe(domainObjectBClone.model.someArr[1]);
-                    expect(domainObjectClone.model.someArr[1]).toBe(childB_ID);
-                    expect(domainObjectBClone.model.someArr[1]).toBe(childD_ID);
-                    expect(domainObjectClone.model.someObj.someProperty).not.toBe(domainObjectBClone.model.someObj.someProperty);
-                    expect(domainObjectClone.model.someObj.someProperty).toBe(childB_ID);
-                    expect(domainObjectBClone.model.someObj.someProperty).toBe(childD_ID);
-
-                });
-
-                /**
-                 * This a bug found in testathon when testing issue #428
-                 */
-                it(" and correctly updates child identifiers in object"
-                    + " arrays within models ", function () {
-                    var childA_ID = task.clones[0].getId(),
-                        childB_ID = task.clones[1].getId();
-
-                    expect(domainObjectClone.model.objArr[0].id).not.toBe(ID_A);
-                    expect(domainObjectClone.model.objArr[0].id).toBe(childA_ID);
-                    expect(domainObjectClone.model.objArr[1].id).not.toBe(ID_B);
-                    expect(domainObjectClone.model.objArr[1].id).toBe(childB_ID);
-
-                });
-            });
-
-        });
-
-    }
-);
diff --git a/platform/entanglement/test/services/LinkServiceSpec.js b/platform/entanglement/test/services/LinkServiceSpec.js
deleted file mode 100644
index 5d03a27127b..00000000000
--- a/platform/entanglement/test/services/LinkServiceSpec.js
+++ /dev/null
@@ -1,215 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [
-        '../../src/services/LinkService',
-        '../DomainObjectFactory',
-        '../ControlledPromise'
-    ],
-    function (LinkService, domainObjectFactory, ControlledPromise) {
-
-        xdescribe("LinkService", function () {
-
-            var linkService,
-                mockPolicyService;
-
-            beforeEach(function () {
-                mockPolicyService = jasmine.createSpyObj(
-                    'policyService',
-                    ['allow']
-                );
-                mockPolicyService.allow.and.returnValue(true);
-                linkService = new LinkService(mockPolicyService);
-            });
-
-            describe("validate", function () {
-
-                var object,
-                    parentCandidate,
-                    validate;
-
-                beforeEach(function () {
-                    object = domainObjectFactory({
-                        name: 'object'
-                    });
-                    parentCandidate = domainObjectFactory({
-                        name: 'parentCandidate',
-                        capabilities: {
-                            composition: jasmine.createSpyObj(
-                                'composition',
-                                ['invoke', 'add']
-                            )
-                        }
-                    });
-                    validate = function () {
-                        return linkService.validate(object, parentCandidate);
-                    };
-                });
-
-                it("does not allow invalid parentCandidate", function () {
-                    parentCandidate = undefined;
-                    expect(validate()).toBe(false);
-                    parentCandidate = {};
-                    expect(validate()).toBe(false);
-                });
-
-                it("does not allow parent to be object", function () {
-                    parentCandidate.id = object.id = 'abc';
-                    expect(validate()).toBe(false);
-                });
-
-                it("does not allow parent that contains object", function () {
-                    object.id = 'abc';
-                    parentCandidate.id = 'xyz';
-                    parentCandidate.model.composition = ['abc'];
-                    expect(validate()).toBe(false);
-                });
-
-                it("does not allow parents without composition", function () {
-                    parentCandidate = domainObjectFactory({
-                        name: 'parentCandidate'
-                    });
-                    object.id = 'abc';
-                    parentCandidate.id = 'xyz';
-                    parentCandidate.hasCapability.and.callFake(function (c) {
-                        return c !== 'composition';
-                    });
-                    expect(validate()).toBe(false);
-                });
-
-                describe("defers to policyService", function () {
-                    beforeEach(function () {
-                        object.id = 'abc';
-                        object.capabilities.type = { type: 'object' };
-                        parentCandidate.id = 'xyz';
-                        parentCandidate.capabilities.type = {
-                            type: 'parentCandidate'
-                        };
-                        parentCandidate.model.composition = [];
-                    });
-
-                    it("calls policy service with correct args", function () {
-                        validate();
-                        expect(mockPolicyService.allow).toHaveBeenCalledWith(
-                            "composition",
-                            parentCandidate,
-                            object
-                        );
-                    });
-
-                    it("and returns false", function () {
-                        mockPolicyService.allow.and.returnValue(true);
-                        expect(validate()).toBe(true);
-                        expect(mockPolicyService.allow).toHaveBeenCalled();
-                    });
-
-                    it("and returns true", function () {
-                        mockPolicyService.allow.and.returnValue(false);
-                        expect(validate()).toBe(false);
-                        expect(mockPolicyService.allow).toHaveBeenCalled();
-                    });
-                });
-            });
-
-            describe("perform", function () {
-
-                var object,
-                    linkedObject,
-                    parentModel,
-                    parentObject,
-                    compositionPromise,
-                    addPromise,
-                    compositionCapability;
-
-                beforeEach(function () {
-                    compositionPromise = new ControlledPromise();
-                    addPromise = new ControlledPromise();
-                    compositionCapability = jasmine.createSpyObj(
-                        'compositionCapability',
-                        ['invoke', 'add']
-                    );
-                    compositionCapability.invoke.and.returnValue(compositionPromise);
-                    compositionCapability.add.and.returnValue(addPromise);
-                    parentModel = {
-                        composition: []
-                    };
-                    parentObject = domainObjectFactory({
-                        name: 'parentObject',
-                        model: parentModel,
-                        capabilities: {
-                            mutation: {
-                                invoke: function (mutator) {
-                                    mutator(parentModel);
-
-                                    return new ControlledPromise();
-                                }
-                            },
-                            composition: compositionCapability
-                        }
-                    });
-
-                    object = domainObjectFactory({
-                        name: 'object',
-                        id: 'xyz'
-                    });
-
-                    linkedObject = domainObjectFactory({
-                        name: 'object-link',
-                        id: 'xyz'
-                    });
-
-                });
-
-                it("adds to the parent's composition", function () {
-                    expect(compositionCapability.add).not.toHaveBeenCalled();
-                    linkService.perform(object, parentObject);
-                    expect(compositionCapability.add)
-                        .toHaveBeenCalledWith(object);
-                });
-
-                it("returns object representing new link", function () {
-                    var returnPromise, whenComplete;
-                    returnPromise = linkService.perform(object, parentObject);
-                    whenComplete = jasmine.createSpy('whenComplete');
-                    returnPromise.then(whenComplete);
-
-                    addPromise.resolve(linkedObject);
-                    compositionPromise.resolve([linkedObject]);
-                    expect(whenComplete).toHaveBeenCalledWith(linkedObject);
-                });
-
-                it("throws an error when performed on invalid inputs", function () {
-                    function perform() {
-                        linkService.perform(object, parentObject);
-                    }
-
-                    spyOn(linkService, 'validate');
-                    linkService.validate.and.returnValue(true);
-                    expect(perform).not.toThrow();
-                    linkService.validate.and.returnValue(false);
-                    expect(perform).toThrow();
-                });
-            });
-        });
-    }
-);
diff --git a/platform/entanglement/test/services/LocatingCreationDecoratorSpec.js b/platform/entanglement/test/services/LocatingCreationDecoratorSpec.js
deleted file mode 100644
index c9ee60ea373..00000000000
--- a/platform/entanglement/test/services/LocatingCreationDecoratorSpec.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [
-        '../../src/services/LocatingCreationDecorator'
-    ],
-    function (LocatingCreationDecorator) {
-
-        describe("LocatingCreationDecorator", function () {
-            var mockCreationService,
-                mockPromise,
-                mockParent,
-                decorator;
-
-            beforeEach(function () {
-                mockCreationService = jasmine.createSpyObj(
-                    'creationService',
-                    ['createObject']
-                );
-                mockPromise = jasmine.createSpyObj(
-                    'promise',
-                    ['then']
-                );
-                mockParent = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getCapability', 'getId', 'getModel', 'hasCapability', 'useCapability']
-                );
-                mockCreationService.createObject.and.returnValue(mockPromise);
-                mockParent.getId.and.returnValue('test-id');
-                decorator = new LocatingCreationDecorator(mockCreationService);
-            });
-
-            it("delegates to its decorated service", function () {
-                expect(decorator.createObject(
-                    { someKey: "some value" },
-                    mockParent
-                )).toEqual(mockPromise); // promise returned by decoratee
-            });
-
-            it("adds a location property", function () {
-                decorator.createObject(
-                    { someKey: "some value" },
-                    mockParent
-                );
-                expect(mockCreationService.createObject).toHaveBeenCalledWith(
-                    {
-                        someKey: "some value",
-                        location: "test-id" // Parent's identifier
-                    },
-                    mockParent
-                );
-            });
-
-        });
-    }
-);
diff --git a/platform/entanglement/test/services/LocatingObjectDecoratorSpec.js b/platform/entanglement/test/services/LocatingObjectDecoratorSpec.js
deleted file mode 100644
index 53cb493ecce..00000000000
--- a/platform/entanglement/test/services/LocatingObjectDecoratorSpec.js
+++ /dev/null
@@ -1,131 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [
-        '../../src/services/LocatingObjectDecorator',
-        '../../../core/src/capabilities/ContextualDomainObject'
-    ],
-    function (LocatingObjectDecorator, ContextualDomainObject) {
-
-        describe("LocatingObjectDecorator", function () {
-            var mockQ,
-                mockLog,
-                mockObjectService,
-                mockCallback,
-                testObjects,
-                testModels,
-                decorator;
-
-            function testPromise(v) {
-                return (v || {}).then ? v : {
-                    then: function (callback) {
-                        return testPromise(callback(v));
-                    }
-                };
-            }
-
-            beforeEach(function () {
-                // A <- B <- C
-                // D <-> E, to verify cycle detection
-                testModels = {
-                    a: { name: "A" },
-                    b: {
-                        name: "B",
-                        location: "a"
-                    },
-                    c: {
-                        name: "C",
-                        location: "b"
-                    },
-                    d: {
-                        name: "D",
-                        location: "e"
-                    },
-                    e: {
-                        name: "E",
-                        location: "d"
-                    }
-                };
-                testObjects = {};
-
-                mockQ = jasmine.createSpyObj("$q", ["when", "all"]);
-                mockLog =
-                    jasmine.createSpyObj("$log", ["error", "warn", "info", "debug"]);
-                mockObjectService =
-                    jasmine.createSpyObj("objectService", ["getObjects"]);
-
-                mockQ.when.and.callFake(testPromise);
-                mockQ.all.and.callFake(function (promises) {
-                    var result = {};
-                    Object.keys(promises).forEach(function (k) {
-                        promises[k].then(function (v) {
-                            result[k] = v;
-                        });
-                    });
-
-                    return testPromise(result);
-                });
-
-                mockObjectService.getObjects.and.returnValue(testPromise(testObjects));
-
-                mockCallback = jasmine.createSpy("callback");
-
-                Object.keys(testModels).forEach(function (id) {
-                    testObjects[id] = jasmine.createSpyObj(
-                        "domainObject-" + id,
-                        ["getId", "getModel", "getCapability"]
-                    );
-                    testObjects[id].getId.and.returnValue(id);
-                    testObjects[id].getModel.and.returnValue(testModels[id]);
-                });
-
-                decorator = new LocatingObjectDecorator(
-                    mockQ,
-                    mockLog,
-                    mockObjectService
-                );
-            });
-
-            it("contextualizes domain objects", function () {
-                decorator.getObjects(['b', 'c']).then(mockCallback);
-                expect(mockCallback).toHaveBeenCalled();
-
-                var callbackObj = mockCallback.calls.mostRecent().args[0];
-                expect(testObjects.b.getCapability('context')).not.toBeDefined();
-                expect(testObjects.c.getCapability('context')).not.toBeDefined();
-                expect(callbackObj.b.getCapability('context')).toBeDefined();
-                expect(callbackObj.c.getCapability('context')).toBeDefined();
-            });
-
-            it("warns on cycle detection", function () {
-                // Base case, no cycle, no warning
-                decorator.getObjects(['a', 'b', 'c']);
-                expect(mockLog.warn).not.toHaveBeenCalled();
-
-                decorator.getObjects(['e']);
-                expect(mockLog.warn).toHaveBeenCalled();
-            });
-
-        });
-    }
-);
diff --git a/platform/entanglement/test/services/LocationServiceSpec.js b/platform/entanglement/test/services/LocationServiceSpec.js
deleted file mode 100644
index 5ab5eecf4f3..00000000000
--- a/platform/entanglement/test/services/LocationServiceSpec.js
+++ /dev/null
@@ -1,151 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [
-        '../../src/services/LocationService'
-    ],
-    function (LocationService) {
-
-        describe("LocationService", function () {
-            var dialogService,
-                locationService,
-                dialogServicePromise,
-                chainedPromise;
-
-            beforeEach(function () {
-                dialogService = jasmine.createSpyObj(
-                    'dialogService',
-                    ['getUserInput']
-                );
-                dialogServicePromise = jasmine.createSpyObj(
-                    'dialogServicePromise',
-                    ['then']
-                );
-                chainedPromise = jasmine.createSpyObj(
-                    'chainedPromise',
-                    ['then']
-                );
-                dialogServicePromise.then.and.returnValue(chainedPromise);
-                dialogService.getUserInput.and.returnValue(dialogServicePromise);
-                locationService = new LocationService(dialogService);
-            });
-
-            describe("getLocationFromUser", function () {
-                var title,
-                    label,
-                    validate,
-                    initialLocation,
-                    locationResult,
-                    formStructure,
-                    formState;
-
-                beforeEach(function () {
-                    title = "Get a location to do something";
-                    label = "a location";
-                    validate = function () {
-                        return true;
-                    };
-
-                    initialLocation = { key: "a key" };
-                    locationResult = locationService.getLocationFromUser(
-                        title,
-                        label,
-                        validate,
-                        initialLocation
-                    );
-                    formStructure = dialogService
-                        .getUserInput
-                        .calls.mostRecent()
-                        .args[0];
-                    formState = dialogService
-                        .getUserInput
-                        .calls.mostRecent()
-                        .args[1];
-                });
-
-                it("calls through to dialogService", function () {
-                    expect(dialogService.getUserInput).toHaveBeenCalledWith(
-                        jasmine.any(Object),
-                        jasmine.any(Object)
-                    );
-                    expect(formStructure.name).toBe(title);
-                });
-
-                it("returns a promise", function () {
-                    expect(locationResult.then).toBeDefined();
-                });
-
-                describe("formStructure", function () {
-                    var locationSection,
-                        inputRow;
-
-                    beforeEach(function () {
-                        locationSection = formStructure.sections[0];
-                        inputRow = locationSection.rows[0];
-                    });
-
-                    it("has a location section", function () {
-                        expect(locationSection).toBeDefined();
-                        expect(locationSection.name).toBe('Location');
-                    });
-
-                    it("has a input row", function () {
-                        expect(inputRow.control).toBe('locator');
-                        expect(inputRow.key).toBe('location');
-                        expect(inputRow.name).toBe(label);
-                        expect(inputRow.validate).toBe(validate);
-                    });
-                });
-
-                describe("formState", function () {
-                    it("has an initial location", function () {
-                        expect(formState.location).toBe(initialLocation);
-                    });
-                });
-
-                describe("resolution of dialog service promise", function () {
-                    var resolution,
-                        resolver,
-                        dialogResult,
-                        selectedLocation;
-
-                    beforeEach(function () {
-                        resolver =
-                            dialogServicePromise.then.calls.mostRecent().args[0];
-
-                        selectedLocation = { key: "i'm a location key" };
-                        dialogResult = {
-                            location: selectedLocation
-                        };
-
-                        resolution = resolver(dialogResult);
-                    });
-
-                    it("returns selectedLocation", function () {
-                        expect(resolution).toBe(selectedLocation);
-                    });
-                });
-            });
-        });
-    }
-);
diff --git a/platform/entanglement/test/services/MockCopyService.js b/platform/entanglement/test/services/MockCopyService.js
deleted file mode 100644
index 51c4a9d06fc..00000000000
--- a/platform/entanglement/test/services/MockCopyService.js
+++ /dev/null
@@ -1,96 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    function () {
-
-        /**
-         * MockCopyService provides the same interface as the copyService,
-         * returning promises where it would normally do so.  At it's core,
-         * it is a jasmine spy object, but it also tracks the promises it
-         * returns and provides shortcut methods for resolving those promises
-         * synchronously.
-         *
-         * Usage:
-         *
-         * ```javascript
-         * var copyService = new MockCopyService();
-         *
-         * // validate is a standard jasmine spy.
-         * copyService.validate.and.returnValue(true);
-         * var isValid = copyService.validate(object, parentCandidate);
-         * expect(isValid).toBe(true);
-         *
-         * // perform returns promises and tracks them.
-         * var whenCopied = jasmine.createSpy('whenCopied');
-         * copyService.perform(object, parentObject).then(whenCopied);
-         * expect(whenCopied).not.toHaveBeenCalled();
-         * copyService.perform.calls.mostRecent().resolve('someArg');
-         * expect(whenCopied).toHaveBeenCalledWith('someArg');
-         * ```
-         */
-        function MockCopyService() {
-            // track most recent call of a function,
-            // perform automatically returns
-            var mockCopyService = jasmine.createSpyObj(
-                'MockCopyService',
-                [
-                    'validate',
-                    'perform'
-                ]
-            );
-
-            mockCopyService.perform.and.callFake(() => {
-                var performPromise,
-                    callExtensions,
-                    spy;
-
-                performPromise = jasmine.createSpyObj(
-                    'performPromise',
-                    ['then']
-                );
-
-                callExtensions = {
-                    promise: performPromise,
-                    resolve: function (resolveWith) {
-                        performPromise.then.calls.all().forEach(function (call) {
-                            call.args[0](resolveWith);
-                        });
-                    }
-                };
-
-                spy = mockCopyService.perform;
-
-                Object.keys(callExtensions).forEach(function (key) {
-                    spy.calls.mostRecent()[key] = callExtensions[key];
-                    spy.calls.all()[spy.calls.count() - 1][key] = callExtensions[key];
-                });
-
-                return performPromise;
-            });
-
-            return mockCopyService;
-        }
-
-        return MockCopyService;
-    }
-);
diff --git a/platform/entanglement/test/services/MockLinkService.js b/platform/entanglement/test/services/MockLinkService.js
deleted file mode 100644
index 27cb60f46df..00000000000
--- a/platform/entanglement/test/services/MockLinkService.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [
-        '../ControlledPromise'
-    ],
-    function (ControlledPromise) {
-
-        /**
-         * MockLinkService provides the same interface as the linkService,
-         * returning promises where it would normally do so.  At it's core,
-         * it is a jasmine spy object, but it also tracks the promises it
-         * returns and provides shortcut methods for resolving those promises
-         * synchronously.
-         *
-         * Usage:
-         *
-         * ```javascript
-         * var linkService = new MockLinkService();
-         *
-         * // validate is a standard jasmine spy.
-         * linkService.validate.and.returnValue(true);
-         * var isValid = linkService.validate(object, parentObject);
-         * expect(isValid).toBe(true);
-         *
-         * // perform returns promises and tracks them.
-         * var whenLinked = jasmine.createSpy('whenLinked');
-         * linkService.perform(object, parentObject).then(whenLinked);
-         * expect(whenLinked).not.toHaveBeenCalled();
-         * linkService.perform.calls.mostRecent().promise.resolve('someArg');
-         * expect(whenLinked).toHaveBeenCalledWith('someArg');
-         * ```
-         */
-        function MockLinkService() {
-            // track most recent call of a function,
-            // perform automatically returns
-            var mockLinkService = jasmine.createSpyObj(
-                'MockLinkService',
-                [
-                    'validate',
-                    'perform'
-                ]
-            );
-
-            mockLinkService.perform.and.callFake(object => {
-                var performPromise = new ControlledPromise();
-
-                mockLinkService.perform.calls.mostRecent().promise = performPromise;
-                mockLinkService.perform.calls.all()[mockLinkService.perform.calls.count() - 1].promise =
-                    performPromise;
-
-                return performPromise.then(function (overrideObject) {
-                    if (overrideObject) {
-                        return overrideObject;
-                    }
-
-                    return object;
-                });
-            });
-
-            return mockLinkService;
-        }
-
-        return MockLinkService;
-    }
-);
diff --git a/platform/execution/README.md b/platform/execution/README.md
deleted file mode 100644
index 2188e5f909c..00000000000
--- a/platform/execution/README.md
+++ /dev/null
@@ -1 +0,0 @@
-Contains services which manage execution and flow control (e.g. for concurrency.)
diff --git a/platform/execution/bundle.js b/platform/execution/bundle.js
deleted file mode 100644
index b4d5b21270c..00000000000
--- a/platform/execution/bundle.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/WorkerService"
-], function (
-    WorkerService
-) {
-
-    return {
-        name: "platform/execution",
-        definition: {
-            "extensions": {
-                "services": [
-                    {
-                        "key": "workerService",
-                        "implementation": WorkerService,
-                        "depends": [
-                            "$window",
-                            "workers[]"
-                        ]
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/execution/src/WorkerService.js b/platform/execution/src/WorkerService.js
deleted file mode 100644
index 2d9f300562c..00000000000
--- a/platform/execution/src/WorkerService.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * This bundle contains services for managing the flow of execution,
- * such as support for running web workers on background threads.
- * @namespace platform/execution
- */
-define(
-    [],
-    function () {
-
-        /**
-         * Handles the execution of WebWorkers.
-         * @memberof platform/execution
-         * @constructor
-         */
-        function WorkerService($window, workers) {
-            var workerUrls = {},
-                sharedWorkers = {};
-
-            function addWorker(worker) {
-                var key = worker.key;
-                if (!workerUrls[key]) {
-                    if (worker.scriptUrl) {
-                        workerUrls[key] = [
-                            worker.bundle.path,
-                            worker.bundle.sources,
-                            worker.scriptUrl
-                        ].join("/");
-                    } else if (worker.scriptText) {
-                        var blob = new Blob(
-                            [worker.scriptText],
-                            {type: 'application/javascript'}
-                        );
-                        workerUrls[key] = URL.createObjectURL(blob);
-                    }
-
-                    sharedWorkers[key] = worker.shared;
-                }
-            }
-
-            (workers || []).forEach(addWorker);
-            this.workerUrls = workerUrls;
-            this.sharedWorkers = sharedWorkers;
-            this.Worker = $window.Worker;
-            this.SharedWorker = $window.SharedWorker;
-        }
-
-        /**
-         * Start running a new web worker. This will run a worker
-         * that has been registered under the `workers` category
-         * of extension.
-         *
-         * This will return either a Worker or a SharedWorker,
-         * depending on whether a `shared` flag has been specified
-         * on the the extension definition for the referenced worker.
-         *
-         * @param {string} key symbolic identifier for the worker
-         * @returns {Worker | SharedWorker} the running Worker
-         */
-        WorkerService.prototype.run = function (key) {
-            var scriptUrl = this.workerUrls[key],
-                Worker = this.sharedWorkers[key]
-                    ? this.SharedWorker : this.Worker;
-
-            return scriptUrl && Worker && new Worker(scriptUrl);
-        };
-
-        return WorkerService;
-    }
-);
-
diff --git a/platform/execution/test/WorkerServiceSpec.js b/platform/execution/test/WorkerServiceSpec.js
deleted file mode 100644
index 6e181fce94a..00000000000
--- a/platform/execution/test/WorkerServiceSpec.js
+++ /dev/null
@@ -1,105 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/WorkerService"],
-    function (WorkerService) {
-
-        describe("The worker service", function () {
-            var mockWindow,
-                testWorkers,
-                mockWorker,
-                mockSharedWorker,
-                service;
-
-            beforeEach(function () {
-                mockWindow = jasmine.createSpyObj(
-                    '$window',
-                    ['Worker', 'SharedWorker']
-                );
-                testWorkers = [
-                    {
-                        key: 'abc',
-                        scriptUrl: 'c.js',
-                        bundle: {
-                            path: 'a',
-                            sources: 'b'
-                        }
-                    },
-                    {
-                        key: 'xyz',
-                        scriptUrl: 'z.js',
-                        bundle: {
-                            path: 'x',
-                            sources: 'y'
-                        }
-                    },
-                    {
-                        key: 'xyz',
-                        scriptUrl: 'bad.js',
-                        bundle: {
-                            path: 'bad',
-                            sources: 'bad'
-                        }
-                    },
-                    {
-                        key: 'a-shared-worker',
-                        shared: true,
-                        scriptUrl: 'c.js',
-                        bundle: {
-                            path: 'a',
-                            sources: 'b'
-                        }
-                    }
-                ];
-                mockWorker = {};
-                mockSharedWorker = {};
-
-                mockWindow.Worker.and.returnValue(mockWorker);
-                mockWindow.SharedWorker.and.returnValue(mockSharedWorker);
-
-                service = new WorkerService(mockWindow, testWorkers);
-            });
-
-            it("instantiates workers at registered paths", function () {
-                expect(service.run('abc')).toBe(mockWorker);
-                expect(mockWindow.Worker).toHaveBeenCalledWith('a/b/c.js');
-            });
-
-            it("prefers the first worker when multiple keys are found", function () {
-                expect(service.run('xyz')).toBe(mockWorker);
-                expect(mockWindow.Worker).toHaveBeenCalledWith('x/y/z.js');
-            });
-
-            it("allows workers to be shared", function () {
-                expect(service.run('a-shared-worker')).toBe(mockSharedWorker);
-                expect(mockWindow.SharedWorker)
-                    .toHaveBeenCalledWith('a/b/c.js');
-            });
-
-            it("returns undefined for unknown workers", function () {
-                expect(service.run('def')).toBeUndefined();
-            });
-
-        });
-    }
-);
diff --git a/platform/exporters/ExportService.js b/platform/exporters/ExportService.js
deleted file mode 100644
index 76ba17902b7..00000000000
--- a/platform/exporters/ExportService.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * @namespace platform/exporters
- */
-define(['csv'], function (CSV) {
-
-    /**
-     * Callback used to initiate saving files from the export service;
-     * typical implementation is
-     * [FileSaver.js](https://github.com/eligrey/FileSaver.js/).
-     * @callback platform/exporters.ExportService~saveAs
-     * @param {Blob} blob the contents of the file to export
-     * @param {string} filename the name of the file to export
-     */
-
-    /**
-     * The `exportService` provides a means to initiate downloads of
-     * structured data in the CSV format.
-     * @param {platform/exporters.ExportService~saveAs} saveAs function
-     *        used to initiate saving files
-     * @constructor
-     * @memberof platform/exporters
-     */
-    function ExportService(saveAs) {
-        this.saveAs = saveAs;
-    }
-
-    /**
-     * Export a set of data as comma-separated values. Triggers a download
-     * using the function provided when the ExportService was instantiated.
-     *
-     * @param {Object[]} rows an array of objects containing key-value pairs,
-     *        where keys are header names, and values are values
-     * @param {ExportOptions} [options] additional parameters for the file
-     *        export
-     */
-    ExportService.prototype.exportCSV = function (rows, options) {
-        var headers = (options && options.headers)
-                || (Object.keys((rows[0] || {})).sort()),
-            filename = (options && options.filename) || "export.csv",
-            csvText = new CSV(rows, { header: headers }).encode(),
-            blob = new Blob([csvText], { type: "text/csv" });
-        this.saveAs(blob, filename);
-    };
-
-    /**
-     * Export an object as a JSON file. Triggers a download using the function
-     * provided when the ExportService was instantiated.
-     *
-     * @param {Object} obj an object to be exported as JSON
-     * @param {ExportOptions} [options] additional parameters for the file
-     *        export
-     */
-    ExportService.prototype.exportJSON = function (obj, options) {
-        var filename = (options && options.filename) || "test-export.json";
-        var jsonText = JSON.stringify(obj);
-        var blob = new Blob([jsonText], {type: "application/json"});
-        this.saveAs(blob, filename);
-    };
-    /**
-     * Additional parameters for file export.
-     * @typedef ExportOptions
-     * @property {string} filename the name of the file to write
-     * @property {string[]} headers column header names, both as they
-     *           should appear in the output and as they should be
-     *           used to look up values from the data set. Defaults
-     *           to the keys in the first object in the data set.
-     */
-
-    return ExportService;
-});
diff --git a/platform/exporters/ExportServiceSpec.js b/platform/exporters/ExportServiceSpec.js
deleted file mode 100644
index f21e880718e..00000000000
--- a/platform/exporters/ExportServiceSpec.js
+++ /dev/null
@@ -1,159 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["./ExportService", "csv"],
-    function (ExportService, CSV) {
-
-        describe("ExportService", function () {
-            var mockSaveAs,
-                testRows,
-                csvContents,
-                readCSVPromise,
-                exportService;
-
-            beforeEach(function () {
-                var resolveFunction;
-                csvContents = undefined;
-                testRows = [
-                    {
-                        a: 1,
-                        b: 2,
-                        c: 3
-                    },
-                    {
-                        a: 4,
-                        b: 5,
-                        c: 6
-                    },
-                    {
-                        a: 7,
-                        b: 8,
-                        c: 9
-                    }
-                ];
-                mockSaveAs = jasmine.createSpy('saveAs');
-                readCSVPromise = new Promise(function (resolve) {
-                    resolveFunction = resolve;
-                });
-                mockSaveAs.and.callFake(function (blob) {
-                    var reader = new FileReader();
-                    reader.onloadend = function () {
-                        csvContents = new CSV(reader.result).parse();
-                        resolveFunction();
-                    };
-
-                    reader.readAsText(blob);
-                });
-                exportService = new ExportService(mockSaveAs);
-            });
-
-            describe("#exportCSV(rows)", function () {
-                beforeEach(function () {
-                    exportService.exportCSV(testRows);
-
-                    return readCSVPromise;
-                });
-
-                it("triggers saving of a file", function () {
-                    expect(mockSaveAs).toHaveBeenCalledWith(
-                        jasmine.any(Blob),
-                        jasmine.any(String)
-                    );
-                });
-
-                it("includes headers from the data set", function () {
-                    expect(csvContents[0])
-                        .toEqual(Object.keys(testRows[0]).sort());
-                });
-
-                it("includes data from the data set", function () {
-                    var headers = csvContents[0],
-                        expectedData = testRows.map(function (row) {
-                            return headers.map(function (key) {
-                                return String(row[key]);
-                            });
-                        });
-                    // Everything after header should be data
-                    expect(csvContents.slice(1)).toEqual(expectedData);
-                });
-            });
-
-            describe("#exportCSV(rows, options.headers)", function () {
-                var testHeaders;
-
-                beforeEach(function () {
-                    testHeaders = ['a', 'b'];
-                    exportService
-                        .exportCSV(testRows, { headers: testHeaders });
-
-                    return readCSVPromise;
-                });
-
-                it("triggers saving of a file", function () {
-                    expect(mockSaveAs).toHaveBeenCalledWith(
-                        jasmine.any(Blob),
-                        jasmine.any(String)
-                    );
-                });
-
-                it("includes only the specified headers", function () {
-                    expect(csvContents[0])
-                        .toEqual(testHeaders);
-                    expect(csvContents[0])
-                        .not.toEqual(Object.keys(testRows[0]).sort());
-                });
-
-                it("includes a subset data from the data set", function () {
-                    var headers = testHeaders,
-                        expectedData = testRows.map(function (row) {
-                            return headers.map(function (key) {
-                                return String(row[key]);
-                            });
-                        });
-                    expect(csvContents.slice(1)).toEqual(expectedData);
-                });
-            });
-
-            describe("#exportCSV(rows, options.filename)", function () {
-                var testFilename;
-
-                beforeEach(function () {
-                    testFilename = "some-test-filename.csv";
-                    exportService
-                        .exportCSV(testRows, { filename: testFilename });
-
-                    return readCSVPromise;
-                });
-
-                it("saves a file with the specified name", function () {
-                    expect(mockSaveAs).toHaveBeenCalledWith(
-                        jasmine.any(Blob),
-                        testFilename
-                    );
-                });
-            });
-
-        });
-
-    }
-);
diff --git a/platform/exporters/bundle.js b/platform/exporters/bundle.js
deleted file mode 100644
index 55b3e86451b..00000000000
--- a/platform/exporters/bundle.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./ExportService",
-    "saveAs"
-], function (ExportService, saveAs) {
-
-    return {
-        name: "platform/exporters",
-        definition: {
-            extensions: {
-                services: [
-                    {
-                        key: "exportService",
-                        implementation: function () {
-                            return new ExportService(saveAs.saveAs);
-                        }
-                    }
-                ],
-                licenses: [
-                    {
-                        "name": "CSV.js",
-                        "version": "3.6.4",
-                        "author": "Kash Nouroozi",
-                        "description": "Encoder for CSV (comma separated values) export",
-                        "website": "https://github.com/knrz/CSV.js",
-                        "copyright": "Copyright (c) 2014 Kash Nouroozi",
-                        "license": "license-mit",
-                        "link": "https://github.com/knrz/CSV.js/blob/3.6.4/LICENSE"
-                    },
-                    {
-                        "name": "FileSaver.js",
-                        "version": "0.0.2",
-                        "author": "Eli Grey",
-                        "description": "File download initiator (for file exports)",
-                        "website": "https://github.com/eligrey/FileSaver.js/",
-                        "copyright": "Copyright © 2015 Eli Grey.",
-                        "license": "license-mit",
-                        "link": "https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md"
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/features/README.md b/platform/features/README.md
deleted file mode 100644
index c839461c4d0..00000000000
--- a/platform/features/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-This directory contains bundles which represent specific user-facing 
-features of Open MCT, such as plots and other visualizations. 
-Bundles in this directory should be effectively optional.
diff --git a/platform/features/clock/bundle.js b/platform/features/clock/bundle.js
deleted file mode 100644
index bedf1d37146..00000000000
--- a/platform/features/clock/bundle.js
+++ /dev/null
@@ -1,305 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "moment-timezone",
-    "./src/indicators/ClockIndicator",
-    "./src/services/TickerService",
-    "./src/services/TimerService",
-    "./src/controllers/ClockController",
-    "./src/controllers/TimerController",
-    "./src/controllers/RefreshingController",
-    "./src/actions/StartTimerAction",
-    "./src/actions/RestartTimerAction",
-    "./src/actions/StopTimerAction",
-    "./src/actions/PauseTimerAction",
-    "./res/templates/clock.html",
-    "./res/templates/timer.html"
-], function (
-    MomentTimezone,
-    ClockIndicator,
-    TickerService,
-    TimerService,
-    ClockController,
-    TimerController,
-    RefreshingController,
-    StartTimerAction,
-    RestartTimerAction,
-    StopTimerAction,
-    PauseTimerAction,
-    clockTemplate,
-    timerTemplate
-) {
-    return {
-        name: "platform/features/clock",
-        definition: {
-            "name": "Clocks/Timers",
-            "descriptions": "Domain objects for displaying current & relative times.",
-            "configuration": {
-                "paths": {
-                    "moment-duration-format": "moment-duration-format"
-                },
-                "shim": {
-                    "moment-duration-format": {
-                        "deps": [
-                            "moment"
-                        ]
-                    }
-                }
-            },
-            "extensions": {
-                "constants": [
-                    {
-                        "key": "CLOCK_INDICATOR_FORMAT",
-                        "value": "YYYY/MM/DD HH:mm:ss"
-                    }
-                ],
-                "indicators": [
-                    {
-                        "implementation": ClockIndicator,
-                        "depends": [
-                            "tickerService",
-                            "CLOCK_INDICATOR_FORMAT"
-                        ],
-                        "priority": "preferred"
-                    }
-                ],
-                "services": [
-                    {
-                        "key": "tickerService",
-                        "implementation": TickerService,
-                        "depends": [
-                            "$timeout",
-                            "now"
-                        ]
-                    },
-                    {
-                        "key": "timerService",
-                        "implementation": TimerService,
-                        "depends": ["openmct"]
-                    }
-                ],
-                "controllers": [
-                    {
-                        "key": "ClockController",
-                        "implementation": ClockController,
-                        "depends": [
-                            "$scope",
-                            "tickerService"
-                        ]
-                    },
-                    {
-                        "key": "TimerController",
-                        "implementation": TimerController,
-                        "depends": [
-                            "$scope",
-                            "$window",
-                            "now"
-                        ]
-                    },
-                    {
-                        "key": "RefreshingController",
-                        "implementation": RefreshingController,
-                        "depends": [
-                            "$scope",
-                            "tickerService"
-                        ]
-                    }
-                ],
-                "views": [
-                    {
-                        "key": "clock",
-                        "type": "clock",
-                        "editable": false,
-                        "template": clockTemplate
-                    },
-                    {
-                        "key": "timer",
-                        "type": "timer",
-                        "editable": false,
-                        "template": timerTemplate
-                    }
-                ],
-                "actions": [
-                    {
-                        "key": "timer.start",
-                        "implementation": StartTimerAction,
-                        "depends": [
-                            "now"
-                        ],
-                        "category": "contextual",
-                        "name": "Start",
-                        "cssClass": "icon-play",
-                        "priority": "preferred"
-                    },
-                    {
-                        "key": "timer.pause",
-                        "implementation": PauseTimerAction,
-                        "depends": [
-                            "now"
-                        ],
-                        "category": "contextual",
-                        "name": "Pause",
-                        "cssClass": "icon-pause",
-                        "priority": "preferred"
-                    },
-                    {
-                        "key": "timer.restart",
-                        "implementation": RestartTimerAction,
-                        "depends": [
-                            "now"
-                        ],
-                        "category": "contextual",
-                        "name": "Restart at 0",
-                        "cssClass": "icon-refresh",
-                        "priority": "preferred"
-                    },
-                    {
-                        "key": "timer.stop",
-                        "implementation": StopTimerAction,
-                        "depends": [
-                            "now"
-                        ],
-                        "category": "contextual",
-                        "name": "Stop",
-                        "cssClass": "icon-box-round-corners",
-                        "priority": "preferred"
-                    }
-                ],
-                "types": [
-                    {
-                        "key": "clock",
-                        "name": "Clock",
-                        "cssClass": "icon-clock",
-                        "description": "A UTC-based clock that supports a variety of display formats. Clocks can be added to Display Layouts.",
-                        "priority": 101,
-                        "features": [
-                            "creation"
-                        ],
-                        "properties": [
-                            {
-                                "key": "clockFormat",
-                                "name": "Display Format",
-                                "control": "composite",
-                                "items": [
-                                    {
-                                        "control": "select",
-                                        "options": [
-                                            {
-                                                "value": "YYYY/MM/DD hh:mm:ss",
-                                                "name": "YYYY/MM/DD hh:mm:ss"
-                                            },
-                                            {
-                                                "value": "YYYY/DDD hh:mm:ss",
-                                                "name": "YYYY/DDD hh:mm:ss"
-                                            },
-                                            {
-                                                "value": "hh:mm:ss",
-                                                "name": "hh:mm:ss"
-                                            }
-                                        ],
-                                        "cssClass": "l-inline"
-                                    },
-                                    {
-                                        "control": "select",
-                                        "options": [
-                                            {
-                                                "value": "clock12",
-                                                "name": "12hr"
-                                            },
-                                            {
-                                                "value": "clock24",
-                                                "name": "24hr"
-                                            }
-                                        ],
-                                        "cssClass": "l-inline"
-                                    }
-                                ]
-                            },
-                            {
-                                "key": "timezone",
-                                "name": "Timezone",
-                                "control": "autocomplete",
-                                "options": MomentTimezone.tz.names()
-                            }
-                        ],
-                        "model": {
-                            "clockFormat": [
-                                "YYYY/MM/DD hh:mm:ss",
-                                "clock12"
-                            ],
-                            "timezone": "UTC"
-                        }
-                    },
-                    {
-                        "key": "timer",
-                        "name": "Timer",
-                        "cssClass": "icon-timer",
-                        "description": "A timer that counts up or down to a datetime. Timers can be started, stopped and reset whenever needed, and support a variety of display formats. Each Timer displays the same value to all users. Timers can be added to Display Layouts.",
-                        "priority": 100,
-                        "features": [
-                            "creation"
-                        ],
-                        "properties": [
-                            {
-                                "key": "timestamp",
-                                "control": "datetime",
-                                "name": "Target"
-                            },
-                            {
-                                "key": "timerFormat",
-                                "control": "select",
-                                "name": "Display Format",
-                                "options": [
-                                    {
-                                        "value": "long",
-                                        "name": "DDD hh:mm:ss"
-                                    },
-                                    {
-                                        "value": "short",
-                                        "name": "hh:mm:ss"
-                                    }
-                                ]
-                            }
-                        ],
-                        "model": {
-                            "timerFormat": "DDD hh:mm:ss"
-                        }
-                    }
-                ],
-                "runs": [],
-                "licenses": [
-                    {
-                        "name": "moment-duration-format",
-                        "version": "1.3.0",
-                        "author": "John Madhavan-Reese",
-                        "description": "Duration parsing/formatting",
-                        "website": "https://github.com/jsmreese/moment-duration-format",
-                        "copyright": "Copyright 2014 John Madhavan-Reese",
-                        "license": "license-mit",
-                        "link": "https://github.com/jsmreese/moment-duration-format/blob/master/LICENSE"
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/features/clock/res/templates/clock.html b/platform/features/clock/res/templates/clock.html
deleted file mode 100644
index 5ab37a14c6b..00000000000
--- a/platform/features/clock/res/templates/clock.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2009-2016, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div class="c-clock l-time-display u-style-receiver js-style-receiver" ng-controller="ClockController as clock">
-	<div class="c-clock__timezone">
-		{{clock.zone()}}
-	</div>
-	<div class="c-clock__value">
-		{{clock.text()}}
-	</div>
-	<div class="c-clock__ampm">
-		{{clock.ampm()}}
-	</div>
-</div>
diff --git a/platform/features/clock/res/templates/timer.html b/platform/features/clock/res/templates/timer.html
deleted file mode 100644
index 3df5ba596d4..00000000000
--- a/platform/features/clock/res/templates/timer.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2009-2016, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div class="c-timer u-style-receiver js-style-receiver is-{{timer.timerState}}" ng-controller="TimerController as timer">
-    <div class="c-timer__controls">
-        <button ng-click="timer.clickStopButton()"
-                ng-hide="timer.timerState == 'stopped'"
-                title="Reset"
-                class="c-timer__ctrl-reset c-icon-button c-icon-button--major icon-reset"></button>
-        <button ng-click="timer.clickButton()"
-                title="{{timer.buttonText()}}"
-                class="c-timer__ctrl-pause-play c-icon-button c-icon-button--major {{timer.buttonCssClass()}}"></button>
-    </div>
-    <div class="c-timer__direction {{timer.signClass()}}"
-        ng-hide="!timer.signClass()"></div>
-	<div class="c-timer__value">{{timer.text() || "--:--:--"}}
-	</div>
-	<span class="c-timer__ng-controller u-contents" ng-controller="RefreshingController"></span>
-</div>
diff --git a/platform/features/clock/src/actions/PauseTimerAction.js b/platform/features/clock/src/actions/PauseTimerAction.js
deleted file mode 100644
index f8ef5798160..00000000000
--- a/platform/features/clock/src/actions/PauseTimerAction.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Implements the "Pause" action for timers.
-         *
-         * Sets the reference pausedTime in a timer to the current
-         * time, such that it stops counting up.
-         *
-         * @implements {Action}
-         * @memberof platform/features/clock
-         * @constructor
-         * @param {Function} now a function which returns the current
-         *        time (typically wrapping `Date.now`)
-         * @param {ActionContext} context the context for this action
-         */
-        function PauseTimerAction(now, context) {
-            this.domainObject = context.domainObject;
-            this.now = now;
-        }
-
-        PauseTimerAction.appliesTo = function (context) {
-            var model =
-                (context.domainObject && context.domainObject.getModel())
-                || {};
-
-            // We show this variant for timers which have
-            // a target time, or is in a playing state.
-            return model.type === 'timer'
-                    && model.timerState === 'started';
-        };
-
-        PauseTimerAction.prototype.perform = function () {
-            var domainObject = this.domainObject,
-                now = this.now;
-
-            function updateModel(model) {
-                model.timerState = 'paused';
-                model.pausedTime = now();
-            }
-
-            return domainObject.useCapability('mutation', updateModel);
-        };
-
-        return PauseTimerAction;
-    }
-);
diff --git a/platform/features/clock/src/actions/RestartTimerAction.js b/platform/features/clock/src/actions/RestartTimerAction.js
deleted file mode 100644
index 20971bcc4f8..00000000000
--- a/platform/features/clock/src/actions/RestartTimerAction.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Implements the "Restart at 0" action.
-         *
-         * Behaves the same as (and delegates functionality to)
-         * the "Start" action.
-         *
-         * @implements {Action}
-         * @memberof platform/features/clock
-         * @constructor
-         * @param {Function} now a function which returns the current
-         *        time (typically wrapping `Date.now`)
-         * @param {ActionContext} context the context for this action
-         */
-        function RestartTimerAction(now, context) {
-            this.domainObject = context.domainObject;
-            this.now = now;
-        }
-
-        RestartTimerAction.appliesTo = function (context) {
-            var model =
-                (context.domainObject && context.domainObject.getModel())
-                || {};
-
-            // We show this variant for timers which already have a target time.
-            return model.type === 'timer'
-                && model.timerState !== 'stopped';
-        };
-
-        RestartTimerAction.prototype.perform = function () {
-            var domainObject = this.domainObject,
-                now = this.now;
-
-            function updateModel(model) {
-                model.timestamp = now();
-                model.timerState = 'started';
-                model.pausedTime = undefined;
-            }
-
-            return domainObject.useCapability('mutation', updateModel);
-        };
-
-        return RestartTimerAction;
-    }
-);
diff --git a/platform/features/clock/src/actions/StartTimerAction.js b/platform/features/clock/src/actions/StartTimerAction.js
deleted file mode 100644
index a8470c6e1cb..00000000000
--- a/platform/features/clock/src/actions/StartTimerAction.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Implements the "Start" action for timers.
-         *
-         * Sets the reference timestamp in a timer to the current
-         * time, such that it begins counting up.
-         *
-         * @implements {Action}
-         * @memberof platform/features/clock
-         * @constructor
-         * @param {Function} now a function which returns the current
-         *        time (typically wrapping `Date.now`)
-         * @param {ActionContext} context the context for this action
-         */
-        function StartTimerAction(now, context) {
-            this.domainObject = context.domainObject;
-            this.now = now;
-        }
-
-        StartTimerAction.appliesTo = function (context) {
-            var model =
-                (context.domainObject && context.domainObject.getModel())
-                || {};
-
-            // We show this variant for timers which do not yet have
-            // a target time.
-            return model.type === 'timer'
-                    && model.timerState !== 'started';
-        };
-
-        StartTimerAction.prototype.perform = function () {
-            var domainObject = this.domainObject,
-                now = this.now;
-
-            function updateModel(model) {
-                //if we are resuming
-                if (model.pausedTime) {
-                    var timeShift = now() - model.pausedTime;
-                    model.timestamp = model.timestamp + timeShift;
-                } else {
-                    model.timestamp = now();
-                }
-
-                model.timerState = 'started';
-                model.pausedTime = undefined;
-            }
-
-            return domainObject.useCapability('mutation', updateModel);
-        };
-
-        return StartTimerAction;
-    }
-);
diff --git a/platform/features/clock/src/actions/StopTimerAction.js b/platform/features/clock/src/actions/StopTimerAction.js
deleted file mode 100644
index 77d433cd127..00000000000
--- a/platform/features/clock/src/actions/StopTimerAction.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Implements the "Stop" action for timers.
-         *
-         * Sets the reference timestamp in a timer undefined,
-         * such that it is reset and makes no movements.
-         *
-         * @implements {Action}
-         * @memberof platform/features/clock
-         * @constructor
-         * @param {Function} now a function which returns the current
-         *        time (typically wrapping `Date.now`)
-         * @param {ActionContext} context the context for this action
-         */
-        function StopTimerAction(now, context) {
-            this.domainObject = context.domainObject;
-            this.now = now;
-        }
-
-        StopTimerAction.appliesTo = function (context) {
-            var model =
-                (context.domainObject && context.domainObject.getModel())
-                || {};
-
-            // We show this variant for timers which do not yet have
-            // a target time.
-            return model.type === 'timer'
-                    && model.timerState !== 'stopped';
-        };
-
-        StopTimerAction.prototype.perform = function () {
-            var domainObject = this.domainObject;
-
-            function updateModel(model) {
-                model.timestamp = undefined;
-                model.timerState = 'stopped';
-                model.pausedTime = undefined;
-            }
-
-            return domainObject.useCapability('mutation', updateModel);
-        };
-
-        return StopTimerAction;
-    }
-);
diff --git a/platform/features/clock/src/controllers/ClockController.js b/platform/features/clock/src/controllers/ClockController.js
deleted file mode 100644
index 674ad78095e..00000000000
--- a/platform/features/clock/src/controllers/ClockController.js
+++ /dev/null
@@ -1,110 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    'moment',
-    'moment-timezone'
-],
-function (
-    moment,
-    momentTimezone
-) {
-
-    /**
-         * Controller for views of a Clock domain object.
-         *
-         * @constructor
-         * @memberof platform/features/clock
-         * @param {angular.Scope} $scope the Angular scope
-         * @param {platform/features/clock.TickerService} tickerService
-         *        a service used to align behavior with clock ticks
-         */
-    function ClockController($scope, tickerService) {
-        var lastTimestamp,
-            unlisten,
-            timeFormat,
-            zoneName,
-            self = this;
-
-        function update() {
-            var m = zoneName
-                ? moment.utc(lastTimestamp).tz(zoneName) : moment.utc(lastTimestamp);
-            self.zoneAbbr = m.zoneAbbr();
-            self.textValue = timeFormat && m.format(timeFormat);
-            self.ampmValue = m.format("A"); // Just the AM or PM part
-        }
-
-        function tick(timestamp) {
-            lastTimestamp = timestamp;
-            update();
-        }
-
-        function updateModel(model) {
-            var baseFormat;
-            if (model !== undefined) {
-                baseFormat = model.clockFormat[0];
-
-                self.use24 = model.clockFormat[1] === 'clock24';
-                timeFormat = self.use24
-                    ? baseFormat.replace('hh', "HH") : baseFormat;
-                // If wrong timezone is provided, the UTC will be used
-                zoneName = momentTimezone.tz.names().includes(model.timezone)
-                    ? model.timezone : "UTC";
-                update();
-            }
-        }
-
-        // Pull in the model (clockFormat and timezone) from the domain object model
-        $scope.$watch('model', updateModel);
-
-        // Listen for clock ticks ... and stop listening on destroy
-        unlisten = tickerService.listen(tick);
-        $scope.$on('$destroy', unlisten);
-    }
-
-    /**
-         * Get the clock's time zone, as displayable text.
-         * @returns {string}
-         */
-    ClockController.prototype.zone = function () {
-        return this.zoneAbbr;
-    };
-
-    /**
-         * Get the current time, as displayable text.
-         * @returns {string}
-         */
-    ClockController.prototype.text = function () {
-        return this.textValue;
-    };
-
-    /**
-         * Get the text to display to qualify a time as AM or PM.
-         * @returns {string}
-         */
-    ClockController.prototype.ampm = function () {
-        return this.use24 ? '' : this.ampmValue;
-    };
-
-    return ClockController;
-}
-);
diff --git a/platform/features/clock/src/controllers/RefreshingController.js b/platform/features/clock/src/controllers/RefreshingController.js
deleted file mode 100644
index 1c3c3cd662a..00000000000
--- a/platform/features/clock/src/controllers/RefreshingController.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Continually refreshes the represented domain object.
-         *
-         * This is a short-term workaround to assure Timer views stay
-         * up-to-date; should be replaced by a global auto-refresh.
-         *
-         * @constructor
-         * @memberof platform/features/clock
-         * @param {angular.Scope} $scope the Angular scope
-         * @param {platform/features/clock.TickerService} tickerService
-         *        a service used to align behavior with clock ticks
-         */
-        function RefreshingController($scope, tickerService) {
-            var unlisten;
-
-            function triggerRefresh() {
-                var persistence = $scope.domainObject
-                    && $scope.domainObject.getCapability('persistence');
-
-                return persistence && persistence.refresh();
-            }
-
-            unlisten = tickerService.listen(triggerRefresh);
-            $scope.$on('$destroy', unlisten);
-        }
-
-        return RefreshingController;
-    }
-);
diff --git a/platform/features/clock/src/controllers/TimerController.js b/platform/features/clock/src/controllers/TimerController.js
deleted file mode 100644
index 315bcd4607a..00000000000
--- a/platform/features/clock/src/controllers/TimerController.js
+++ /dev/null
@@ -1,239 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['./TimerFormatter'],
-    function (TimerFormatter) {
-
-        var FORMATTER = new TimerFormatter();
-
-        /**
-         * Controller for views of a Timer domain object.
-         *
-         * @constructor
-         * @memberof platform/features/clock
-         * @param {angular.Scope} $scope the Angular scope
-         * @param $window Angular-provided window object
-         * @param {Function} now a function which returns the current
-         *        time (typically wrapping `Date.now`)
-         */
-        function TimerController($scope, $window, now) {
-            var formatter,
-                active = true,
-                relativeTimestamp,
-                lastTimestamp,
-                relativeTimerState,
-                self = this;
-
-            function update() {
-                var timeDelta = lastTimestamp - relativeTimestamp;
-
-                if (formatter && !isNaN(timeDelta)) {
-                    self.textValue = formatter(timeDelta);
-                    self.signValue = timeDelta < 0 ? "-"
-                        : timeDelta >= 1000 ? "+" : "";
-                    self.signCssClass = timeDelta < 0 ? "icon-minus"
-                        : timeDelta >= 1000 ? "icon-plus" : "";
-                } else {
-                    self.textValue = "";
-                    self.signValue = "";
-                    self.signCssClass = "";
-                }
-            }
-
-            function updateFormat(key) {
-                formatter = FORMATTER[key] || FORMATTER.long;
-            }
-
-            function updateTimestamp(timestamp) {
-                relativeTimestamp = timestamp;
-            }
-
-            function updateTimerState(timerState) {
-                self.timerState = relativeTimerState = timerState;
-            }
-
-            function updateActions(actionCapability, actionKey) {
-                self.relevantAction = actionCapability
-                    && actionCapability.getActions(actionKey)[0];
-
-                self.stopAction = relativeTimerState !== 'stopped'
-                    ? actionCapability && actionCapability.getActions('timer.stop')[0] : undefined;
-
-            }
-
-            function isPaused() {
-                return relativeTimerState === 'paused';
-            }
-
-            function handleLegacyTimer(model) {
-                if (model.timerState === undefined) {
-                    model.timerState = model.timestamp === undefined
-                        ? 'stopped' : 'started';
-                }
-            }
-
-            function updateObject(domainObject) {
-                var model = domainObject.getModel();
-                handleLegacyTimer(model);
-
-                var timestamp = model.timestamp,
-                    formatKey = model.timerFormat,
-                    timerState = model.timerState,
-                    actionCapability = domainObject.getCapability('action'),
-                    actionKey = (timerState !== 'started')
-                        ? 'timer.start' : 'timer.pause';
-
-                updateFormat(formatKey);
-                updateTimestamp(timestamp);
-                updateTimerState(timerState);
-                updateActions(actionCapability, actionKey);
-
-                //if paused on startup show last known position
-                if (isPaused() && !lastTimestamp) {
-                    lastTimestamp = model.pausedTime;
-                }
-
-                update();
-            }
-
-            function handleObjectChange(domainObject) {
-                if (domainObject) {
-                    updateObject(domainObject);
-                }
-            }
-
-            function handleModification() {
-                handleObjectChange($scope.domainObject);
-            }
-
-            function tick() {
-                var lastSign = self.signValue,
-                    lastText = self.textValue;
-
-                if (!isPaused()) {
-                    lastTimestamp = now();
-                    update();
-                }
-
-                if (relativeTimerState === undefined) {
-                    handleModification();
-                }
-
-                // We're running in an animation frame, not in a digest cycle.
-                // We need to trigger a digest cycle if our displayable data
-                // changes.
-                if (lastSign !== self.signValue || lastText !== self.textValue) {
-                    $scope.$apply();
-                }
-
-                if (active) {
-                    $window.requestAnimationFrame(tick);
-                }
-            }
-
-            $window.requestAnimationFrame(tick);
-
-            // Pull in the timer format from the domain object model
-            $scope.$watch('domainObject', handleObjectChange);
-            $scope.$watch('model.modified', handleModification);
-
-            // When the scope is destroyed, stop requesting anim. frames
-            $scope.$on('$destroy', function () {
-                active = false;
-            });
-
-            this.$scope = $scope;
-            this.signValue = '';
-            this.textValue = '';
-            this.updateObject = updateObject;
-        }
-
-        /**
-         * Get the CSS class to display the right icon
-         * for the start/pause button.
-         * @returns {string} cssclass to display
-         */
-        TimerController.prototype.buttonCssClass = function () {
-            return this.relevantAction
-                ? this.relevantAction.getMetadata().cssClass : "";
-        };
-
-        /**
-         * Get the text to show for the start/pause button
-         * (e.g. in a tooltip)
-         * @returns {string} name of the action
-         */
-        TimerController.prototype.buttonText = function () {
-            return this.relevantAction
-                ? this.relevantAction.getMetadata().name : "";
-        };
-
-        /**
-         * Perform the action associated with the start/pause button.
-         */
-        TimerController.prototype.clickButton = function () {
-            if (this.relevantAction) {
-                this.relevantAction.perform();
-                this.updateObject(this.$scope.domainObject);
-            }
-        };
-
-        /**
-         * Perform the action associated with the stop button.
-         */
-        TimerController.prototype.clickStopButton = function () {
-            if (this.stopAction) {
-                this.stopAction.perform();
-                this.updateObject(this.$scope.domainObject);
-            }
-        };
-
-        /**
-         * Get the sign (+ or -) of the current timer value, as
-         * displayable text.
-         * @returns {string} sign of the current timer value
-         */
-        TimerController.prototype.sign = function () {
-            return this.signValue;
-        };
-
-        /**
-         * Get the sign (+ or -) of the current timer value, as
-         * a CSS class.
-         * @returns {string} sign of the current timer value
-         */
-        TimerController.prototype.signClass = function () {
-            return this.signCssClass;
-        };
-
-        /**
-         * Get the text to display for the current timer value.
-         * @returns {string} current timer value
-         */
-        TimerController.prototype.text = function () {
-            return this.textValue;
-        };
-
-        return TimerController;
-    }
-);
diff --git a/platform/features/clock/src/controllers/TimerFormatter.js b/platform/features/clock/src/controllers/TimerFormatter.js
deleted file mode 100644
index 10f4cb7df26..00000000000
--- a/platform/features/clock/src/controllers/TimerFormatter.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['moment', 'moment-duration-format'],
-    function (moment) {
-
-        var SHORT_FORMAT = "HH:mm:ss",
-            LONG_FORMAT = "d[D] HH:mm:ss";
-
-        /**
-         * Provides formatting functions for Timers.
-         *
-         * Display formats for timers are a little different from what
-         * moment.js provides, so we have custom logic here. This specifically
-         * supports `TimerController`.
-         *
-         * @constructor
-         * @memberof platform/features/clock
-         */
-        function TimerFormatter() {
-        }
-
-        // Round this timestamp down to the second boundary
-        // (e.g. 1124ms goes down to 1000ms, -2400ms goes down to -3000ms)
-        function toWholeSeconds(duration) {
-            return Math.abs(Math.floor(duration / 1000) * 1000);
-        }
-
-        /**
-         * Format a duration for display, using the short form.
-         * (e.g. 03:33:11)
-         * @param {number} duration the duration, in milliseconds
-         * @param {boolean} sign true if positive
-         */
-        TimerFormatter.prototype.short = function (duration) {
-            return moment.duration(toWholeSeconds(duration), 'ms')
-                .format(SHORT_FORMAT, { trim: false });
-        };
-
-        /**
-         * Format a duration for display, using the long form.
-         * (e.g. 0d 03:33:11)
-         * @param {number} duration the duration, in milliseconds
-         * @param {boolean} sign true if positive
-         */
-        TimerFormatter.prototype.long = function (duration) {
-            return moment.duration(toWholeSeconds(duration), 'ms')
-                .format(LONG_FORMAT, { trim: false });
-        };
-
-        return TimerFormatter;
-    }
-);
diff --git a/platform/features/clock/src/indicators/ClockIndicator.js b/platform/features/clock/src/indicators/ClockIndicator.js
deleted file mode 100644
index 79520bd3372..00000000000
--- a/platform/features/clock/src/indicators/ClockIndicator.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['moment'],
-    function (moment) {
-
-        /**
-         * Indicator that displays the current UTC time in the status area.
-         * @implements {Indicator}
-         * @memberof platform/features/clock
-         * @param {platform/features/clock.TickerService} tickerService
-         *        a service used to align behavior with clock ticks
-         * @param {string} indicatorFormat format string for timestamps
-         *        shown in this indicator
-         */
-        function ClockIndicator(tickerService, indicatorFormat) {
-            var self = this;
-
-            this.text = "";
-
-            tickerService.listen(function (timestamp) {
-                self.text = moment.utc(timestamp)
-                    .format(indicatorFormat) + " UTC";
-            });
-        }
-
-        ClockIndicator.prototype.getGlyphClass = function () {
-            return "";
-        };
-
-        ClockIndicator.prototype.getCssClass = function () {
-            return "t-indicator-clock icon-clock no-minify c-indicator--not-clickable";
-        };
-
-        ClockIndicator.prototype.getText = function () {
-            return this.text;
-        };
-
-        ClockIndicator.prototype.getDescription = function () {
-            return "";
-        };
-
-        return ClockIndicator;
-    }
-);
diff --git a/platform/features/clock/src/services/TickerService.js b/platform/features/clock/src/services/TickerService.js
deleted file mode 100644
index 18169ac9534..00000000000
--- a/platform/features/clock/src/services/TickerService.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Calls functions every second, as close to the actual second
-         * tick as is feasible.
-         * @constructor
-         * @memberof platform/features/clock
-         * @param $timeout Angular's $timeout
-         * @param {Function} now function to provide the current time in ms
-         */
-        function TickerService($timeout, now) {
-            var self = this;
-
-            function tick() {
-                var timestamp = now(),
-                    millis = timestamp % 1000;
-
-                // Only update callbacks if a second has actually passed.
-                if (timestamp >= self.last + 1000) {
-                    self.callbacks.forEach(function (callback) {
-                        callback(timestamp);
-                    });
-                    self.last = timestamp - millis;
-                }
-
-                // Try to update at exactly the next second
-                $timeout(tick, 1000 - millis, true);
-            }
-
-            tick();
-
-            this.callbacks = [];
-            this.last = now() - 1000;
-        }
-
-        /**
-         * Listen for clock ticks. The provided callback will
-         * be invoked with the current timestamp (in milliseconds
-         * since Jan 1 1970) at regular intervals, as near to the
-         * second boundary as possible.
-         *
-         * @param {Function} callback callback to invoke
-         * @returns {Function} a function to unregister this listener
-         */
-        TickerService.prototype.listen = function (callback) {
-            var self = this;
-
-            self.callbacks.push(callback);
-
-            // Provide immediate feedback
-            callback(this.last);
-
-            // Provide a deregistration function
-            return function () {
-                self.callbacks = self.callbacks.filter(function (cb) {
-                    return cb !== callback;
-                });
-            };
-        };
-
-        return TickerService;
-    }
-);
diff --git a/platform/features/clock/src/services/TimerService.js b/platform/features/clock/src/services/TimerService.js
deleted file mode 100644
index 3d94914bb02..00000000000
--- a/platform/features/clock/src/services/TimerService.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(['EventEmitter'], function (EventEmitter) {
-
-    /**
-     * Tracks the currently-followed Timer object. Used by
-     * timelines et al to synchronize to a particular timer.
-     *
-     * The TimerService emits `change` events when the active timer
-     * is changed.
-     */
-    function TimerService(openmct) {
-        EventEmitter.apply(this);
-        this.time = openmct.time;
-        this.objects = openmct.objects;
-    }
-
-    TimerService.prototype = Object.create(EventEmitter.prototype);
-
-    /**
-     * Set (or clear, if `timer` is undefined) the currently active timer.
-     * @param {DomainObject} timer the new active timer
-     * @emits change
-     */
-    TimerService.prototype.setTimer = function (timer) {
-        this.timer = timer;
-        this.emit('change', timer);
-
-        if (this.stopObserving) {
-            this.stopObserving();
-            delete this.stopObserving;
-        }
-
-        if (timer) {
-            this.stopObserving =
-                this.objects.observe(timer, '*', this.setTimer.bind(this));
-        }
-    };
-
-    /**
-     * Get the currently active timer.
-     * @return {DomainObject} the active timer
-     * @emits change
-     */
-    TimerService.prototype.getTimer = function () {
-        return this.timer;
-    };
-
-    /**
-     * Check if there is a currently active timer.
-     * @return {boolean} true if there is a timer
-     */
-    TimerService.prototype.hasTimer = function () {
-        return Boolean(this.timer);
-    };
-
-    /**
-     * Convert the provided timestamp to milliseconds relative to
-     * the active timer.
-     * @return {number} milliseconds since timer start
-     */
-    TimerService.prototype.convert = function (timestamp) {
-        var clock = this.time.clock();
-        var canConvert = this.hasTimer()
-            && Boolean(clock)
-            && this.timer.timerState !== 'stopped';
-
-        if (!canConvert) {
-            return undefined;
-        }
-
-        var now = clock.currentValue();
-        var delta = this.timer.timerState === 'paused'
-            ? now - this.timer.pausedTime : 0;
-        var epoch = this.timer.timestamp;
-
-        return timestamp - epoch - delta;
-    };
-
-    /**
-     * Get the value of the active clock, adjusted to be relative to the active
-     * timer. If there is no clock or no active timer, this will return
-     * `undefined`.
-     * @return {number} milliseconds since the start of the active timer
-     */
-    TimerService.prototype.now = function () {
-        var clock = this.time.clock();
-
-        return clock && this.convert(clock.currentValue());
-    };
-
-    return TimerService;
-});
diff --git a/platform/features/clock/test/actions/PauseTimerActionSpec.js b/platform/features/clock/test/actions/PauseTimerActionSpec.js
deleted file mode 100644
index 2e8eaf30db1..00000000000
--- a/platform/features/clock/test/actions/PauseTimerActionSpec.js
+++ /dev/null
@@ -1,106 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/actions/PauseTimerAction"],
-    function (PauseTimerAction) {
-
-        describe("A timer's Pause action", function () {
-            var mockNow,
-                mockDomainObject,
-                testModel,
-                testContext,
-                action;
-
-            function asPromise(value) {
-                return (value || {}).then ? value : {
-                    then: function (callback) {
-                        return asPromise(callback(value));
-                    }
-                };
-            }
-
-            function testState(type, timerState, timestamp, expected) {
-                testModel.type = type;
-                testModel.timerState = timerState;
-                testModel.timestamp = timestamp;
-
-                if (expected) {
-                    expect(PauseTimerAction.appliesTo(testContext)).toBeTruthy();
-                } else {
-                    expect(PauseTimerAction.appliesTo(testContext)).toBeFalsy();
-                }
-            }
-
-            beforeEach(function () {
-                mockNow = jasmine.createSpy('now');
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getCapability', 'useCapability', 'getModel']
-                );
-
-                mockDomainObject.useCapability.and.callFake(function (c, v) {
-                    if (c === 'mutation') {
-                        testModel = v(testModel) || testModel;
-
-                        return asPromise(true);
-                    }
-                });
-                mockDomainObject.getModel.and.callFake(function () {
-                    return testModel;
-                });
-
-                testModel = {};
-                testContext = {domainObject: mockDomainObject};
-
-                action = new PauseTimerAction(mockNow, testContext);
-            });
-
-            it("updates the model with a timerState", function () {
-                testModel.timerState = 'started';
-                action.perform();
-                expect(testModel.timerState).toEqual('paused');
-            });
-
-            it("updates the model with a pausedTime", function () {
-                testModel.pausedTime = undefined;
-                mockNow.and.returnValue(12000);
-                action.perform();
-                expect(testModel.pausedTime).toEqual(12000);
-            });
-
-            it("applies only to timers in a playing state", function () {
-                //in a stopped state
-                testState('timer', 'stopped', undefined, false);
-
-                //in a paused state
-                testState('timer', 'paused', 12000, false);
-
-                //in a playing state
-                testState('timer', 'started', 12000, true);
-
-                //not a timer
-                testState('clock', 'started', 12000, false);
-            });
-        });
-    }
-);
diff --git a/platform/features/clock/test/actions/RestartTimerActionSpec.js b/platform/features/clock/test/actions/RestartTimerActionSpec.js
deleted file mode 100644
index fe59ef83510..00000000000
--- a/platform/features/clock/test/actions/RestartTimerActionSpec.js
+++ /dev/null
@@ -1,112 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/actions/RestartTimerAction"],
-    function (RestartTimerAction) {
-
-        describe("A timer's restart action", function () {
-            var mockNow,
-                mockDomainObject,
-                testModel,
-                testContext,
-                action;
-
-            function asPromise(value) {
-                return (value || {}).then ? value : {
-                    then: function (callback) {
-                        return asPromise(callback(value));
-                    }
-                };
-            }
-
-            function testState(type, timerState, timestamp, expected) {
-                testModel.type = type;
-                testModel.timerState = timerState;
-                testModel.timestamp = timestamp;
-
-                if (expected) {
-                    expect(RestartTimerAction.appliesTo(testContext)).toBeTruthy();
-                } else {
-                    expect(RestartTimerAction.appliesTo(testContext)).toBeFalsy();
-                }
-            }
-
-            beforeEach(function () {
-                mockNow = jasmine.createSpy('now');
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getCapability', 'useCapability', 'getModel']
-                );
-
-                mockDomainObject.useCapability.and.callFake(function (c, v) {
-                    if (c === 'mutation') {
-                        testModel = v(testModel) || testModel;
-
-                        return asPromise(true);
-                    }
-                });
-                mockDomainObject.getModel.and.callFake(function () {
-                    return testModel;
-                });
-
-                testModel = {};
-                testContext = { domainObject: mockDomainObject };
-
-                action = new RestartTimerAction(mockNow, testContext);
-            });
-
-            it("updates the model with a timestamp", function () {
-                testModel.pausedTime = 12000;
-                mockNow.and.returnValue(12000);
-                action.perform();
-                expect(testModel.timestamp).toEqual(12000);
-            });
-
-            it("updates the model with a pausedTime", function () {
-                testModel.pausedTime = 12000;
-                action.perform();
-                expect(testModel.pausedTime).toEqual(undefined);
-            });
-
-            it("updates the model with a timerState", function () {
-                testModel.timerState = 'stopped';
-                action.perform();
-                expect(testModel.timerState).toEqual('started');
-            });
-
-            it("applies only to timers in a non-stopped state", function () {
-                //in a stopped state
-                testState('timer', 'stopped', undefined, false);
-
-                //in a paused state
-                testState('timer', 'paused', 12000, true);
-
-                //in a playing state
-                testState('timer', 'started', 12000, true);
-
-                //not a timer
-                testState('clock', 'paused', 12000, false);
-            });
-        });
-    }
-);
diff --git a/platform/features/clock/test/actions/StartTimerActionSpec.js b/platform/features/clock/test/actions/StartTimerActionSpec.js
deleted file mode 100644
index 11d1126ab95..00000000000
--- a/platform/features/clock/test/actions/StartTimerActionSpec.js
+++ /dev/null
@@ -1,111 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/actions/StartTimerAction"],
-    function (StartTimerAction) {
-
-        describe("A timer's start action", function () {
-            var mockNow,
-                mockDomainObject,
-                testModel,
-                testContext,
-                action;
-
-            function asPromise(value) {
-                return (value || {}).then ? value : {
-                    then: function (callback) {
-                        return asPromise(callback(value));
-                    }
-                };
-            }
-
-            function testState(type, timerState, timestamp, expected) {
-                testModel.type = type;
-                testModel.timerState = timerState;
-                testModel.timestamp = timestamp;
-
-                if (expected) {
-                    expect(StartTimerAction.appliesTo(testContext)).toBeTruthy();
-                } else {
-                    expect(StartTimerAction.appliesTo(testContext)).toBeFalsy();
-                }
-            }
-
-            beforeEach(function () {
-                mockNow = jasmine.createSpy('now');
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getCapability', 'useCapability', 'getModel']
-                );
-
-                mockDomainObject.useCapability.and.callFake(function (c, v) {
-                    if (c === 'mutation') {
-                        testModel = v(testModel) || testModel;
-
-                        return asPromise(true);
-                    }
-                });
-                mockDomainObject.getModel.and.callFake(function () {
-                    return testModel;
-                });
-
-                testModel = {};
-                testContext = {domainObject: mockDomainObject};
-
-                action = new StartTimerAction(mockNow, testContext);
-            });
-
-            it("updates the model with a timestamp", function () {
-                mockNow.and.returnValue(12000);
-                action.perform();
-                expect(testModel.timestamp).toEqual(12000);
-            });
-
-            it("updates the model with a pausedTime", function () {
-                testModel.pausedTime = 12000;
-                action.perform();
-                expect(testModel.pausedTime).toEqual(undefined);
-            });
-
-            it("updates the model with a timerState", function () {
-                testModel.timerState = undefined;
-                action.perform();
-                expect(testModel.timerState).toEqual('started');
-            });
-
-            it("applies only to timers not in a playing state", function () {
-                //in a stopped state
-                testState('timer', 'stopped', undefined, true);
-
-                //in a paused state
-                testState('timer', 'paused', 12000, true);
-
-                //in a playing state
-                testState('timer', 'started', 12000, false);
-
-                //not a timer
-                testState('clock', 'paused', 12000, false);
-            });
-        });
-    }
-);
diff --git a/platform/features/clock/test/actions/StopTimerActionSpec.js b/platform/features/clock/test/actions/StopTimerActionSpec.js
deleted file mode 100644
index 371a4caacf6..00000000000
--- a/platform/features/clock/test/actions/StopTimerActionSpec.js
+++ /dev/null
@@ -1,111 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/actions/StopTimerAction"],
-    function (StopTimerAction) {
-
-        describe("A timer's stop action", function () {
-            var mockNow,
-                mockDomainObject,
-                testModel,
-                testContext,
-                action;
-
-            function asPromise(value) {
-                return (value || {}).then ? value : {
-                    then: function (callback) {
-                        return asPromise(callback(value));
-                    }
-                };
-            }
-
-            function testState(type, timerState, timestamp, expected) {
-                testModel.type = type;
-                testModel.timerState = timerState;
-                testModel.timestamp = timestamp;
-
-                if (expected) {
-                    expect(StopTimerAction.appliesTo(testContext)).toBeTruthy();
-                } else {
-                    expect(StopTimerAction.appliesTo(testContext)).toBeFalsy();
-                }
-            }
-
-            beforeEach(function () {
-                mockNow = jasmine.createSpy('now');
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getCapability', 'useCapability', 'getModel']
-                );
-
-                mockDomainObject.useCapability.and.callFake(function (c, v) {
-                    if (c === 'mutation') {
-                        testModel = v(testModel) || testModel;
-
-                        return asPromise(true);
-                    }
-                });
-                mockDomainObject.getModel.and.callFake(function () {
-                    return testModel;
-                });
-
-                testModel = {};
-                testContext = {domainObject: mockDomainObject};
-
-                action = new StopTimerAction(mockNow, testContext);
-            });
-
-            it("updates the model with a timestamp", function () {
-                mockNow.and.returnValue(12000);
-                action.perform();
-                expect(testModel.timestamp).toEqual(undefined);
-            });
-
-            it("updates the model with a pausedTime", function () {
-                testModel.pausedTime = 12000;
-                action.perform();
-                expect(testModel.pausedTime).toEqual(undefined);
-            });
-
-            it("updates the model with a timerState", function () {
-                testModel.timerState = 'started';
-                action.perform();
-                expect(testModel.timerState).toEqual('stopped');
-            });
-
-            it("applies only to timers in a non-stopped state", function () {
-                //in a stopped state
-                testState('timer', 'stopped', undefined, false);
-
-                //in a paused state
-                testState('timer', 'paused', 12000, true);
-
-                //in a playing state
-                testState('timer', 'started', 12000, true);
-
-                //not a timer
-                testState('clock', 'paused', 12000, false);
-            });
-        });
-    }
-);
diff --git a/platform/features/clock/test/controllers/ClockControllerSpec.js b/platform/features/clock/test/controllers/ClockControllerSpec.js
deleted file mode 100644
index d53987a632d..00000000000
--- a/platform/features/clock/test/controllers/ClockControllerSpec.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/controllers/ClockController"],
-    function (ClockController) {
-
-        // Wed, 03 Jun 2015 17:56:14 GMT
-        var TEST_TIMESTAMP = 1433354174000;
-
-        describe("A clock view's controller", function () {
-            var mockScope,
-                mockTicker,
-                mockUnticker,
-                controller;
-
-            beforeEach(function () {
-                mockScope = jasmine.createSpyObj('$scope', ['$watch', '$on']);
-                mockTicker = jasmine.createSpyObj('ticker', ['listen']);
-                mockUnticker = jasmine.createSpy('unticker');
-
-                mockTicker.listen.and.returnValue(mockUnticker);
-
-                controller = new ClockController(mockScope, mockTicker);
-            });
-
-            it("watches for model (clockFormat and timezone) from the domain object model", function () {
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "model",
-                    jasmine.any(Function)
-                );
-            });
-
-            it("subscribes to clock ticks", function () {
-                expect(mockTicker.listen)
-                    .toHaveBeenCalledWith(jasmine.any(Function));
-            });
-
-            it("unsubscribes to ticks when destroyed", function () {
-                // Make sure $destroy is being listened for...
-                expect(mockScope.$on.calls.mostRecent().args[0]).toEqual('$destroy');
-                expect(mockUnticker).not.toHaveBeenCalled();
-
-                // ...and makes sure that its listener unsubscribes from ticker
-                mockScope.$on.calls.mostRecent().args[1]();
-                expect(mockUnticker).toHaveBeenCalled();
-            });
-
-            it("formats using the format string from the model", function () {
-                mockTicker.listen.calls.mostRecent().args[0](TEST_TIMESTAMP);
-                mockScope.$watch.calls.mostRecent().args[1]({
-                    "clockFormat": [
-                        "YYYY-DDD hh:mm:ss",
-                        "clock24"
-                    ],
-                    "timezone": "Canada/Eastern"
-                });
-
-                expect(controller.zone()).toEqual("EDT");
-                expect(controller.text()).toEqual("2015-154 13:56:14");
-                expect(controller.ampm()).toEqual("");
-            });
-
-            it("formats 12-hour time", function () {
-                mockTicker.listen.calls.mostRecent().args[0](TEST_TIMESTAMP);
-                mockScope.$watch.calls.mostRecent().args[1]({
-                    "clockFormat": [
-                        "YYYY-DDD hh:mm:ss",
-                        "clock12"
-                    ],
-                    "timezone": ""
-                });
-
-                expect(controller.zone()).toEqual("UTC");
-                expect(controller.text()).toEqual("2015-154 05:56:14");
-                expect(controller.ampm()).toEqual("PM");
-            });
-
-            it("does not throw exceptions when model is undefined", function () {
-                mockTicker.listen.calls.mostRecent().args[0](TEST_TIMESTAMP);
-                expect(function () {
-                    mockScope.$watch.calls.mostRecent().args[1](undefined);
-                }).not.toThrow();
-            });
-
-        });
-    }
-);
diff --git a/platform/features/clock/test/controllers/RefreshingControllerSpec.js b/platform/features/clock/test/controllers/RefreshingControllerSpec.js
deleted file mode 100644
index 5259ef1c00a..00000000000
--- a/platform/features/clock/test/controllers/RefreshingControllerSpec.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/controllers/RefreshingController"],
-    function (RefreshingController) {
-
-        describe("The refreshing controller", function () {
-            var mockScope,
-                mockTicker,
-                mockUnticker,
-                controller;
-
-            beforeEach(function () {
-                mockScope = jasmine.createSpyObj('$scope', ['$on']);
-                mockTicker = jasmine.createSpyObj('ticker', ['listen']);
-                mockUnticker = jasmine.createSpy('unticker');
-
-                mockTicker.listen.and.returnValue(mockUnticker);
-
-                controller = new RefreshingController(mockScope, mockTicker);
-            });
-
-            it("refreshes the represented object on every tick", function () {
-                var mockDomainObject = jasmine.createSpyObj(
-                        'domainObject',
-                        ['getCapability']
-                    ),
-                    mockPersistence = jasmine.createSpyObj(
-                        'persistence',
-                        ['persist', 'refresh']
-                    );
-
-                mockDomainObject.getCapability.and.callFake(function (c) {
-                    return (c === 'persistence') && mockPersistence;
-                });
-
-                mockScope.domainObject = mockDomainObject;
-
-                mockTicker.listen.calls.mostRecent().args[0](12321);
-                expect(mockPersistence.refresh).toHaveBeenCalled();
-                expect(mockPersistence.persist).not.toHaveBeenCalled();
-            });
-
-            it("subscribes to clock ticks", function () {
-                expect(mockTicker.listen)
-                    .toHaveBeenCalledWith(jasmine.any(Function));
-            });
-
-            it("unsubscribes to ticks when destroyed", function () {
-                // Make sure $destroy is being listened for...
-                expect(mockScope.$on.calls.mostRecent().args[0]).toEqual('$destroy');
-                expect(mockUnticker).not.toHaveBeenCalled();
-
-                // ...and makes sure that its listener unsubscribes from ticker
-                mockScope.$on.calls.mostRecent().args[1]();
-                expect(mockUnticker).toHaveBeenCalled();
-            });
-        });
-    }
-);
diff --git a/platform/features/clock/test/controllers/TimerControllerSpec.js b/platform/features/clock/test/controllers/TimerControllerSpec.js
deleted file mode 100644
index 68480cfa365..00000000000
--- a/platform/features/clock/test/controllers/TimerControllerSpec.js
+++ /dev/null
@@ -1,227 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/controllers/TimerController"],
-    function (TimerController) {
-
-        // Wed, 03 Jun 2015 17:56:14 GMT
-        var TEST_TIMESTAMP = 1433354174000;
-
-        describe("A timer view's controller", function () {
-            var mockScope,
-                mockWindow,
-                mockNow,
-                mockDomainObject,
-                mockActionCapability,
-                mockStart,
-                mockPause,
-                mockStop,
-                testModel,
-                controller;
-
-            function invokeWatch(expr, value) {
-                mockScope.$watch.calls.all().forEach(function (call) {
-                    if (call.args[0] === expr) {
-                        call.args[1](value);
-                    }
-                });
-            }
-
-            beforeEach(function () {
-                mockScope = jasmine.createSpyObj(
-                    '$scope',
-                    ['$watch', '$on', '$apply']
-                );
-                mockWindow = jasmine.createSpyObj(
-                    '$window',
-                    ['requestAnimationFrame']
-                );
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getCapability', 'useCapability', 'getModel']
-                );
-                mockActionCapability = jasmine.createSpyObj(
-                    'action',
-                    ['getActions']
-                );
-                mockStart = jasmine.createSpyObj(
-                    'start',
-                    ['getMetadata', 'perform']
-                );
-                mockPause = jasmine.createSpyObj(
-                    'paused',
-                    ['getMetadata', 'perform']
-                );
-                mockStop = jasmine.createSpyObj(
-                    'stopped',
-                    ['getMetadata', 'perform']
-                );
-                mockNow = jasmine.createSpy('now');
-
-                mockDomainObject.getCapability.and.callFake(function (c) {
-                    return (c === 'action') && mockActionCapability;
-                });
-                mockDomainObject.getModel.and.callFake(function () {
-                    return testModel;
-                });
-                mockActionCapability.getActions.and.callFake(function (k) {
-                    return [{
-                        'timer.start': mockStart,
-                        'timer.pause': mockPause,
-                        'timer.stop': mockStop
-                    }[k]];
-                });
-
-                mockStart.getMetadata.and.returnValue({
-                    cssClass: "icon-play",
-                    name: "Start"
-                });
-                mockPause.getMetadata.and.returnValue({
-                    cssClass: "icon-pause",
-                    name: "Pause"
-                });
-                mockStop.getMetadata.and.returnValue({
-                    cssClass: "icon-box-round-corners",
-                    name: "Stop"
-                });
-                mockScope.domainObject = mockDomainObject;
-
-                testModel = {};
-
-                controller = new TimerController(mockScope, mockWindow, mockNow);
-            });
-
-            it("watches for the domain object in view", function () {
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "domainObject",
-                    jasmine.any(Function)
-                );
-            });
-
-            it("watches for domain object modifications", function () {
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "model.modified",
-                    jasmine.any(Function)
-                );
-            });
-
-            it("updates on a timer", function () {
-                expect(mockWindow.requestAnimationFrame)
-                    .toHaveBeenCalledWith(jasmine.any(Function));
-            });
-
-            it("displays nothing when there is no target", function () {
-                // Notify that domain object is available via scope
-                invokeWatch('domainObject', mockDomainObject);
-                mockNow.and.returnValue(TEST_TIMESTAMP);
-                mockWindow.requestAnimationFrame.calls.mostRecent().args[0]();
-                expect(controller.sign()).toEqual("");
-                expect(controller.signClass()).toEqual("");
-                expect(controller.text()).toEqual("");
-            });
-
-            it("formats time to display relative to target", function () {
-                testModel.timestamp = TEST_TIMESTAMP;
-                testModel.timerFormat = 'long';
-                // Notify that domain object is available via scope
-                invokeWatch('domainObject', mockDomainObject);
-
-                mockNow.and.returnValue(TEST_TIMESTAMP + 121000);
-                mockWindow.requestAnimationFrame.calls.mostRecent().args[0]();
-                expect(controller.sign()).toEqual("+");
-                expect(controller.signClass()).toEqual("icon-plus");
-                expect(controller.text()).toEqual("0D 00:02:01");
-
-                mockNow.and.returnValue(TEST_TIMESTAMP - 121000);
-                mockWindow.requestAnimationFrame.calls.mostRecent().args[0]();
-                expect(controller.sign()).toEqual("-");
-                expect(controller.signClass()).toEqual("icon-minus");
-                expect(controller.text()).toEqual("0D 00:02:01");
-
-                mockNow.and.returnValue(TEST_TIMESTAMP);
-                mockWindow.requestAnimationFrame.calls.mostRecent().args[0]();
-                expect(controller.sign()).toEqual("");
-                expect(controller.signClass()).toEqual("");
-                expect(controller.text()).toEqual("0D 00:00:00");
-            });
-
-            it("shows cssClass & name for the applicable start/pause action", function () {
-                invokeWatch('domainObject', mockDomainObject);
-                expect(controller.buttonCssClass()).toEqual("icon-play");
-                expect(controller.buttonText()).toEqual("Start");
-
-                testModel.timestamp = 12321;
-                testModel.timerState = 'started';
-                invokeWatch('model.modified', 1);
-                expect(controller.buttonCssClass()).toEqual("icon-pause");
-                expect(controller.buttonText()).toEqual("Pause");
-            });
-
-            it("performs correct start/pause/stop action on click", function () {
-                //test start
-                invokeWatch('domainObject', mockDomainObject);
-                expect(mockStart.perform).not.toHaveBeenCalled();
-                controller.clickButton();
-                expect(mockStart.perform).toHaveBeenCalled();
-
-                //test pause
-                testModel.timestamp = 12321;
-                testModel.timerState = 'started';
-                invokeWatch('model.modified', 1);
-                expect(mockPause.perform).not.toHaveBeenCalled();
-                controller.clickButton();
-                expect(mockPause.perform).toHaveBeenCalled();
-
-                //test stop
-                expect(mockStop.perform).not.toHaveBeenCalled();
-                controller.clickStopButton();
-                expect(mockStop.perform).toHaveBeenCalled();
-            });
-
-            it("stops requesting animation frames when destroyed", function () {
-                var initialCount = mockWindow.requestAnimationFrame.calls.count();
-
-                // First, check that normally new frames keep getting requested
-                mockWindow.requestAnimationFrame.calls.mostRecent().args[0]();
-                expect(mockWindow.requestAnimationFrame.calls.count())
-                    .toEqual(initialCount + 1);
-                mockWindow.requestAnimationFrame.calls.mostRecent().args[0]();
-                expect(mockWindow.requestAnimationFrame.calls.count())
-                    .toEqual(initialCount + 2);
-
-                // Now, verify that it stops after $destroy
-                expect(mockScope.$on.calls.mostRecent().args[0])
-                    .toEqual('$destroy');
-                mockScope.$on.calls.mostRecent().args[1]();
-
-                // Frames should no longer get requested
-                mockWindow.requestAnimationFrame.calls.mostRecent().args[0]();
-                expect(mockWindow.requestAnimationFrame.calls.count())
-                    .toEqual(initialCount + 2);
-                mockWindow.requestAnimationFrame.calls.mostRecent().args[0]();
-                expect(mockWindow.requestAnimationFrame.calls.count())
-                    .toEqual(initialCount + 2);
-            });
-        });
-    }
-);
diff --git a/platform/features/clock/test/controllers/TimerFormatterSpec.js b/platform/features/clock/test/controllers/TimerFormatterSpec.js
deleted file mode 100644
index 1774623c89a..00000000000
--- a/platform/features/clock/test/controllers/TimerFormatterSpec.js
+++ /dev/null
@@ -1,111 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/controllers/TimerFormatter"],
-    function (TimerFormatter) {
-
-        var MS_IN_SEC = 1000,
-            MS_IN_MIN = MS_IN_SEC * 60,
-            MS_IN_HR = MS_IN_MIN * 60,
-            MS_IN_DAY = MS_IN_HR * 24;
-
-        describe("The timer value formatter", function () {
-            var formatter = new TimerFormatter();
-
-            function sum(a, b) {
-                return a + b;
-            }
-
-            function toDuration(days, hours, mins, secs) {
-                return [
-                    days * MS_IN_DAY,
-                    hours * MS_IN_HR,
-                    mins * MS_IN_MIN,
-                    secs * MS_IN_SEC
-                ].reduce(sum, 0);
-            }
-
-            it("formats short-form values (no days)", function () {
-                expect(formatter.short(toDuration(0, 123, 2, 3) + 123))
-                    .toEqual("123:02:03");
-            });
-
-            it("formats negative short-form values (no days)", function () {
-                expect(formatter.short(-toDuration(0, 123, 2, 3) + 123))
-                    .toEqual("123:02:03");
-            });
-
-            it("formats long-form values (with days)", function () {
-                expect(formatter.long(toDuration(0, 123, 2, 3) + 123))
-                    .toEqual("5D 03:02:03");
-            });
-
-            it("formats negative long-form values (no days)", function () {
-                expect(formatter.long(-toDuration(0, 123, 2, 3) + 123))
-                    .toEqual("5D 03:02:03");
-            });
-
-            it("rounds seconds down for positive durations", function () {
-                expect(formatter.short(MS_IN_SEC + 600))
-                    .toEqual("00:00:01");
-            });
-
-            it("rounds seconds up for negative durations", function () {
-                expect(formatter.short(-MS_IN_SEC - 600))
-                    .toEqual("00:00:02");
-            });
-
-            it("short-formats correctly around negative time borders", function () {
-                expect(formatter.short(-1)).toEqual("00:00:01");
-                expect(formatter.short(-1000)).toEqual("00:00:01");
-                expect(formatter.short(-1001)).toEqual("00:00:02");
-                expect(formatter.short(-2000)).toEqual("00:00:02");
-                expect(formatter.short(-59001)).toEqual("00:01:00");
-                expect(formatter.short(-60000)).toEqual("00:01:00");
-
-                expect(formatter.short(-MS_IN_HR + 999)).toEqual("01:00:00");
-                expect(formatter.short(-MS_IN_HR)).toEqual("01:00:00");
-            });
-
-            it("differentiates between values around zero", function () {
-                // These are more than 1000 ms apart so should not appear
-                // as the same second
-                expect(formatter.short(-999))
-                    .not.toEqual(formatter.short(999));
-            });
-
-            it("handles negative days", function () {
-                expect(formatter.long(-10 * MS_IN_DAY))
-                    .toEqual("10D 00:00:00");
-                expect(formatter.long(-10 * MS_IN_DAY + 100))
-                    .toEqual("10D 00:00:00");
-                expect(formatter.long(-10 * MS_IN_DAY + 999))
-                    .toEqual("10D 00:00:00");
-
-                expect(formatter.short(-10 * MS_IN_DAY + 100))
-                    .toEqual("240:00:00");
-            });
-
-        });
-    }
-);
diff --git a/platform/features/clock/test/indicators/ClockIndicatorSpec.js b/platform/features/clock/test/indicators/ClockIndicatorSpec.js
deleted file mode 100644
index 68d73977958..00000000000
--- a/platform/features/clock/test/indicators/ClockIndicatorSpec.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/indicators/ClockIndicator"],
-    function (ClockIndicator) {
-
-        // Wed, 03 Jun 2015 17:56:14 GMT
-        var TEST_TIMESTAMP = 1433354174000,
-            TEST_FORMAT = "YYYY-DDD HH:mm:ss";
-
-        describe("The clock indicator", function () {
-            var mockTicker,
-                mockUnticker,
-                indicator;
-
-            beforeEach(function () {
-                mockTicker = jasmine.createSpyObj('ticker', ['listen']);
-                mockUnticker = jasmine.createSpy('unticker');
-
-                mockTicker.listen.and.returnValue(mockUnticker);
-
-                indicator = new ClockIndicator(mockTicker, TEST_FORMAT);
-            });
-
-            it("displays the current time", function () {
-                mockTicker.listen.calls.mostRecent().args[0](TEST_TIMESTAMP);
-                expect(indicator.getText()).toEqual("2015-154 17:56:14 UTC");
-            });
-
-            it("implements the Indicator interface", function () {
-                expect(indicator.getCssClass()).toEqual(jasmine.any(String));
-                expect(indicator.getText()).toEqual(jasmine.any(String));
-                expect(indicator.getDescription()).toEqual(jasmine.any(String));
-            });
-
-        });
-    }
-);
diff --git a/platform/features/clock/test/services/TickerServiceSpec.js b/platform/features/clock/test/services/TickerServiceSpec.js
deleted file mode 100644
index a7fb257fb7a..00000000000
--- a/platform/features/clock/test/services/TickerServiceSpec.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/services/TickerService"],
-    function (TickerService) {
-
-        var TEST_TIMESTAMP = 1433354174000;
-
-        describe("The ticker service", function () {
-            var mockTimeout,
-                mockNow,
-                mockCallback,
-                tickerService;
-
-            beforeEach(function () {
-                mockTimeout = jasmine.createSpy('$timeout');
-                mockNow = jasmine.createSpy('now');
-                mockCallback = jasmine.createSpy('callback');
-
-                mockNow.and.returnValue(TEST_TIMESTAMP);
-
-                tickerService = new TickerService(mockTimeout, mockNow);
-            });
-
-            it("notifies listeners of clock ticks", function () {
-                tickerService.listen(mockCallback);
-                mockNow.and.returnValue(TEST_TIMESTAMP + 12321);
-                mockTimeout.calls.mostRecent().args[0]();
-                expect(mockCallback)
-                    .toHaveBeenCalledWith(TEST_TIMESTAMP + 12321);
-            });
-
-            it("allows listeners to unregister", function () {
-                tickerService.listen(mockCallback)(); // Unregister immediately
-                mockNow.and.returnValue(TEST_TIMESTAMP + 12321);
-                mockTimeout.calls.mostRecent().args[0]();
-                expect(mockCallback).not
-                    .toHaveBeenCalledWith(TEST_TIMESTAMP + 12321);
-            });
-        });
-    }
-);
diff --git a/platform/features/clock/test/services/TimerServiceSpec.js b/platform/features/clock/test/services/TimerServiceSpec.js
deleted file mode 100644
index 3c57ba2e2e4..00000000000
--- a/platform/features/clock/test/services/TimerServiceSpec.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    '../../src/services/TimerService'
-], function (TimerService) {
-    describe("TimerService", function () {
-        var callback;
-        var mockmct;
-        var timerService;
-
-        beforeEach(function () {
-            callback = jasmine.createSpy('callback');
-            mockmct = {
-                time: { clock: jasmine.createSpy('clock') },
-                objects: { observe: jasmine.createSpy('observe') }
-            };
-            timerService = new TimerService(mockmct);
-            timerService.on('change', callback);
-        });
-
-        it("initially emits no change events", function () {
-            expect(callback).not.toHaveBeenCalled();
-        });
-
-        it("reports no current timer", function () {
-            expect(timerService.getTimer()).toBeUndefined();
-        });
-
-        describe("setTimer", function () {
-            var testTimer;
-
-            beforeEach(function () {
-                testTimer = { name: "I am some timer; you are nobody." };
-                timerService.setTimer(testTimer);
-            });
-
-            it("emits a change event", function () {
-                expect(callback).toHaveBeenCalled();
-            });
-
-            it("reports the current timer", function () {
-                expect(timerService.getTimer()).toBe(testTimer);
-            });
-
-            it("observes changes to an object", function () {
-                var newTimer = { name: "I am another timer." };
-                expect(mockmct.objects.observe).toHaveBeenCalledWith(
-                    testTimer,
-                    '*',
-                    jasmine.any(Function)
-                );
-                mockmct.objects.observe.calls.mostRecent().args[2](newTimer);
-                expect(timerService.getTimer()).toBe(newTimer);
-            });
-        });
-    });
-});
diff --git a/platform/features/my-items/README.md b/platform/features/my-items/README.md
deleted file mode 100644
index df61bacf6c8..00000000000
--- a/platform/features/my-items/README.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# My Items plugin
-Defines top-level folder named "My Items" to store user-created items. Enabled by default, this can be disabled in a 
-read-only deployment with no user-editable objects.
-
-## Installation
-```js
-openmct.install(openmct.plugins.MyItems());
-```
\ No newline at end of file
diff --git a/platform/features/my-items/bundle.js b/platform/features/my-items/bundle.js
deleted file mode 100644
index fcabcc2f0ec..00000000000
--- a/platform/features/my-items/bundle.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([], function () {
-    return {
-        name: "platform/features/my-items",
-        definition: {
-            "name": "My Items",
-            "description": "Defines a root named My Items",
-            "extensions": {
-                "roots": [
-                    {
-                        "id": "mine"
-                    }
-                ],
-                "models": [
-                    {
-                        "id": "mine",
-                        "model": {
-                            "name": "My Items",
-                            "type": "folder",
-                            "composition": [],
-                            "location": "ROOT"
-                        }
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/features/pages/bundle.js b/platform/features/pages/bundle.js
deleted file mode 100644
index b2c631b325c..00000000000
--- a/platform/features/pages/bundle.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/EmbeddedPageController",
-    "./res/iframe.html"
-], function (
-    EmbeddedPageController,
-    iframeTemplate
-) {
-
-    return {
-        name: "platform/features/pages",
-        definition: {
-            "extensions": {
-                "types": [
-                    {
-                        "key": "example.page",
-                        "name": "Web Page",
-                        "cssClass": "icon-page",
-                        "description": "Embed a web page or web-based image in a resizeable window component. Can be added to Display Layouts. Note that the URL being embedded must allow iframing.",
-                        "priority": 50,
-                        "features": [
-                            "creation"
-                        ],
-                        "properties": [
-                            {
-                                "key": "url",
-                                "name": "URL",
-                                "control": "textfield",
-                                "required": true,
-                                "cssClass": "l-input-lg"
-                            }
-                        ]
-                    }
-                ],
-                "views": [
-                    {
-                        "template": iframeTemplate,
-                        "name": "Page",
-                        "type": "example.page",
-                        "key": "example.page",
-                        "editable": false
-                    }
-                ],
-                "controllers": [
-                    {
-                        "key": "EmbeddedPageController",
-                        "implementation": EmbeddedPageController,
-                        "depends": [
-                            "$sce"
-                        ]
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/features/static-markup/bundle.js b/platform/features/static-markup/bundle.js
deleted file mode 100644
index ceddc93ac93..00000000000
--- a/platform/features/static-markup/bundle.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-
-    "./res/markup.html"
-], function (
-    markupTemplate
-) {
-
-    return {
-        name: "platform/features/static-markup",
-        definition: {
-            "extensions": {
-                "types": [
-                    {
-                        "key": "static.markup",
-                        "name": "Static Markup",
-                        "cssClass": "icon-pencil",
-                        "description": "Static markup sandbox",
-                        "features": [
-                            "creation"
-                        ]
-                    }
-                ],
-                "views": [
-                    {
-                        "template": markupTemplate,
-                        "name": "Static Markup",
-                        "type": "static.markup",
-                        "key": "static.markup"
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/features/static-markup/res/markup.html b/platform/features/static-markup/res/markup.html
deleted file mode 100644
index 72d3c9c44e1..00000000000
--- a/platform/features/static-markup/res/markup.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<h1>Static Markup Sandbox</h1>
-
-<h2>Plot limits</h2>
-<div ng-init="limits=[
-				{type: 'upr', severity: 'red', top: 0, bottom: 90},
-				{type: 'upr', severity: 'yellow', top: 10, bottom: 80},
-				{type: 'lwr', severity: 'yellow', top: 70, bottom: 20},
-				{type: 'lwr', severity: 'red', top: 80, bottom: 0}
-	        ]"></div>
-<div style="width: 1000px; height: 500px">
-    <div class="gl-plot" style="height: 100%;">
-        <div class="gl-plot-display-area">
-	        <div
-		        ng-repeat="limit in limits"
-		        ng-show="1"
-		        class="t-limit l-limit s-limit-{{limit.type}}-{{limit.severity}}"
-		        style="top: {{limit.top}}%; bottom: {{limit.bottom}}%"
-		        ></div>
-        </div>
-    </div>
-</div>
-
-<h2>Animation</h2>
-<div class="pulse" style="background: #cc0000; color: #fff; padding: 10px;">This should pulse</div>
diff --git a/platform/forms/README.md b/platform/forms/README.md
deleted file mode 100644
index 1f0b7386ec5..00000000000
--- a/platform/forms/README.md
+++ /dev/null
@@ -1,133 +0,0 @@
-# Overview
-
-This bundle contains a general implementation of forms in Open MCT.
-This allows forms to be expressed using a reasonably concise declarative
-syntax, and rendered as Angular templates in a consistent fashion.
-
-# Usage
-
-To include a form with a declarative definition, use the `mct-form`
-directive, e.g.:
-
-    <mct-form ng-model="myModel" structure="myStructure" name="myForm">
-    </mct-form>
-
-Using toolbars is similar:
-
-    <mct-toolbar ng-model="myModel" structure="myStructure" name="myToolbar">
-    </mct-toolbar>
-
-The attributes utilized by this form are as follows:
-
-* `ng-model`: The object which should contain the full form input. Individual
-  fields in this model are bound to individual controls; the names used for
-  these fields are provided in the form structure (see below).
-* `structure`: The structure of the form; e.g. sections, rows, their names,
-  and so forth. The value of this attribute should be an Angular expression.
-* `name`: The name in the containing scope under which to publish form
-  "meta-state", e.g. `$valid`, `$dirty`, etc. This is as the behavior of
-  `ng-form`. Passed as plain text in the attribute.
-
-## Form structure
-
-A form's structure is described as a JavaScript object in the following form:
-
-    {
-        "name": ... title to display for the form, as a string ...,
-        "sections": [
-            {
-                "name": ... title to display for the section ...,
-                "rows": [
-                    {
-                        "name": ... title to display for this row ...,
-                        "control": ... symbolic key for the control ...,
-                        "key": ... field name in ng-model ...
-                        "pattern": ... optional, reg exp to match against ...
-                        "required": ... optional boolean ...
-                        "options": [
-                            "name": ... name to display (e.g. in a select) ...,
-                            "value": ... value to store in the model ...
-                        ]
-                    },
-                    ... and other rows ...
-                ]
-            },
-            ... and other sections ...
-        ]
-    }
-
-Note that `pattern` may be specified as a string, to simplify storing
-for structures as JSON when necessary. The string should be given in
-a form appropriate to pass to a `RegExp` constructor.
-
-## Toolbar structure
-
-A toolbar's structure is described similarly to forms, except that there
-is no notion of rows; instead, there are `items`.
-
-    {
-        "name": ... title to display for the form, as a string ...,
-        "sections": [
-            {
-                "name": ... title to display for the section ...,
-                "items": [
-                    {
-                        "name": ... title to display for this row ...,
-                        "control": ... symbolic key for the control ...,
-                        "key": ... field name in ng-model ...
-                        "pattern": ... optional, reg exp to match against ...
-                        "required": ... optional boolean ...
-                        "options": [
-                            "name": ... name to display (e.g. in a select) ...,
-                            "value": ... value to store in the model ...
-                        ],
-                        "disabled": ... true if control should be disabled ...
-                        "size": ... size of the control (for textfields) ...
-                        "click": ... function to invoke (for buttons) ...
-                        "glyph": ... glyph to display (for buttons) ...
-                        "text": ... text withiin control (for buttons) ...
-                    },
-                    ... and other rows ...
-                ]
-            },
-            ... and other sections ...
-        ]
-    }
-
-Note that `pattern` may be specified as a string, to simplify storing
-for structures as JSON when necessary. The string should be given in
-a form appropriate to pass to a `RegExp` constructor.
-
-## Adding controls
-
-These control types are included in the forms bundle:
-
-* `textfield`: A text input to enter plain text.
-* `numberfield`: A text input to enter numbers.
-* `select`: A drop-down list of options.
-* `checkbox`: A box which may be checked/unchecked.
-* `color`: A color picker.
-* `button`: A button.
-* `datetime`: An input for UTC date/time entry; gives result as a
-  UNIX timestamp, in milliseconds since start of 1970, UTC.
-
-New controls may be added as extensions of the `controls` category.
-Extensions of this category have two properites:
-
-* `key`: The symbolic name for this control (matched against the
-  `control` field in rows of the form structure).
-* `templateUrl`: The URL to the control's Angular template, relative
-  to the resources directory of the bundle which exposes the extension.
-
-Within the template for a control, the following variables will be
-included in scope:
-
-* `ngModel`: The model where form input will be stored. Notably we
-  also need to look at `field` (see below) to determine which field
-  in the model should be modified.
-* `ngRequired`: True if input is required.
-* `ngPattern`: The pattern to match against (for text entry.)
-* `options`: The options for this control, as passed from the
-  `options` property of an individual row.
-* `field`: Name of the field in `ngModel` which will hold the value
-  for this control.
diff --git a/platform/forms/bundle.js b/platform/forms/bundle.js
deleted file mode 100644
index ac0394e91de..00000000000
--- a/platform/forms/bundle.js
+++ /dev/null
@@ -1,202 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/MCTForm",
-    "./src/MCTControl",
-    "./src/MCTFileInput",
-    "./src/FileInputService",
-    "./src/controllers/AutocompleteController",
-    "./src/controllers/DateTimeController",
-    "./src/controllers/CompositeController",
-    "./src/controllers/ColorController",
-    "./src/controllers/DialogButtonController",
-    "./res/templates/controls/autocomplete.html",
-    "./res/templates/controls/checkbox.html",
-    "./res/templates/controls/datetime.html",
-    "./res/templates/controls/select.html",
-    "./res/templates/controls/textfield.html",
-    "./res/templates/controls/numberfield.html",
-    "./res/templates/controls/textarea.html",
-    "./res/templates/controls/button.html",
-    "./res/templates/controls/color.html",
-    "./res/templates/controls/composite.html",
-    "./res/templates/controls/menu-button.html",
-    "./res/templates/controls/dialog.html",
-    "./res/templates/controls/radio.html",
-    "./res/templates/controls/file-input.html"
-], function (
-    MCTForm,
-    MCTControl,
-    MCTFileInput,
-    FileInputService,
-    AutocompleteController,
-    DateTimeController,
-    CompositeController,
-    ColorController,
-    DialogButtonController,
-    autocompleteTemplate,
-    checkboxTemplate,
-    datetimeTemplate,
-    selectTemplate,
-    textfieldTemplate,
-    numberfieldTemplate,
-    textareaTemplate,
-    buttonTemplate,
-    colorTemplate,
-    compositeTemplate,
-    menuButtonTemplate,
-    dialogTemplate,
-    radioTemplate,
-    fileInputTemplate
-) {
-
-    return {
-        name: "platform/forms",
-        definition: {
-            "name": "MCT Forms",
-            "description": "Form generator; includes directive and some controls.",
-            "extensions": {
-                "directives": [
-                    {
-                        "key": "mctForm",
-                        "implementation": MCTForm
-                    },
-                    {
-                        "key": "mctControl",
-                        "implementation": MCTControl,
-                        "depends": [
-                            "templateLinker",
-                            "controls[]"
-                        ]
-                    },
-                    {
-                        "key": "mctFileInput",
-                        "implementation": MCTFileInput,
-                        "depends": [
-                            "fileInputService"
-                        ]
-                    }
-                ],
-                "controls": [
-                    {
-                        "key": "autocomplete",
-                        "template": autocompleteTemplate
-                    },
-                    {
-                        "key": "checkbox",
-                        "template": checkboxTemplate
-                    },
-                    {
-                        "key": "radio",
-                        "template": radioTemplate
-                    },
-                    {
-                        "key": "datetime",
-                        "template": datetimeTemplate
-                    },
-                    {
-                        "key": "select",
-                        "template": selectTemplate
-                    },
-                    {
-                        "key": "textfield",
-                        "template": textfieldTemplate
-                    },
-                    {
-                        "key": "numberfield",
-                        "template": numberfieldTemplate
-                    },
-                    {
-                        "key": "textarea",
-                        "template": textareaTemplate
-                    },
-                    {
-                        "key": "button",
-                        "template": buttonTemplate
-                    },
-                    {
-                        "key": "color",
-                        "template": colorTemplate
-                    },
-                    {
-                        "key": "composite",
-                        "template": compositeTemplate
-                    },
-                    {
-                        "key": "menu-button",
-                        "template": menuButtonTemplate
-                    },
-                    {
-                        "key": "dialog-button",
-                        "template": dialogTemplate
-                    },
-                    {
-                        "key": "file-input",
-                        "template": fileInputTemplate
-                    }
-                ],
-                "controllers": [
-                    {
-                        "key": "AutocompleteController",
-                        "implementation": AutocompleteController,
-                        "depends": [
-                            "$scope",
-                            "$element"
-                        ]
-                    },
-                    {
-                        "key": "DateTimeController",
-                        "implementation": DateTimeController,
-                        "depends": [
-                            "$scope"
-                        ]
-                    },
-                    {
-                        "key": "CompositeController",
-                        "implementation": CompositeController
-                    },
-                    {
-                        "key": "ColorController",
-                        "implementation": ColorController
-                    },
-                    {
-                        "key": "DialogButtonController",
-                        "implementation": DialogButtonController,
-                        "depends": [
-                            "$scope",
-                            "dialogService"
-                        ]
-                    }
-                ],
-                "components": [
-                    {
-                        "provides": "fileInputService",
-                        "type": "provider",
-                        "implementation": FileInputService
-                    }
-
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/forms/res/templates/controls/autocomplete.html b/platform/forms/res/templates/controls/autocomplete.html
deleted file mode 100644
index 8e37132e609..00000000000
--- a/platform/forms/res/templates/controls/autocomplete.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-
-<div ng-controller="AutocompleteController"
-     class='form-control autocomplete'>
-    <input class="autocompleteInput"
-           type="text"
-           ng-model="ngModel[field]"
-           ng-change="filterOptions(ngModel[field])"
-           ng-click="inputClicked()"
-           ng-keydown="keyDown($event)"/>
-    <span class="icon-arrow-down"
-          ng-click="arrowClicked()"></span>
-    <div class="autocompleteOptions"
-         ng-init="hideOptions = true"
-         ng-hide="hideOptions"
-         mct-click-elsewhere="hideOptions = true">
-        <ul>
-            <li ng-repeat="opt in filteredOptions"
-                ng-click="fillInput(opt.name)"
-                ng-mouseover="optionMouseover(opt.optionId)"
-                ng-class="optionIndex === opt.optionId ? 'optionPreSelected' : ''">
-                <span class="optionText">{{opt.name}}</span>
-            </li>
-        </ul>
-    </div>
-</div>
diff --git a/platform/forms/res/templates/controls/button.html b/platform/forms/res/templates/controls/button.html
deleted file mode 100644
index e14f2571570..00000000000
--- a/platform/forms/res/templates/controls/button.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<a class="s-button {{structure.cssClass}}"
-   ng-class="{ labeled: structure.text }"
-   ng-click="structure.click()">
-    <span class="title-label" ng-if="structure.text">
-        {{structure.text}}
-    </span>
-</a>
diff --git a/platform/forms/res/templates/controls/checkbox.html b/platform/forms/res/templates/controls/checkbox.html
deleted file mode 100644
index 253d7f8b288..00000000000
--- a/platform/forms/res/templates/controls/checkbox.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<label class="checkbox custom no-text">
-    <input type="checkbox"
-           name="mctControl"
-           ng-model="ngModel[field]"
-           ng-disabled="ngDisabled">
-    <em></em>
-</label>
diff --git a/platform/forms/res/templates/controls/color.html b/platform/forms/res/templates/controls/color.html
deleted file mode 100644
index a3998f5ba02..00000000000
--- a/platform/forms/res/templates/controls/color.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div class="s-button s-menu-button menu-element t-color-palette {{structure.cssClass}}"
-    ng-controller="ClickAwayController as toggle">
-
-    <span class="l-click-area" ng-click="toggle.toggle()"></span>
-    <span class="color-swatch"
-          ng-class="{'no-selection':ngModel[field] === 'transparent'}"
-          ng-style="{
-             'background-color': ngModel[field]
-         }">
-    </span>
-    <span class="title-label" ng-if="structure.text">
-        {{structure.text}}
-    </span>
-
-    <div class="menu l-palette l-color-palette"
-        ng-controller="ColorController as colors"
-        ng-show="toggle.isActive()">
-        <div
-            class="l-palette-row l-option-row"
-            ng-if="!structure.mandatory">
-            <div class="l-palette-item s-palette-item no-selection {{ngModel[field] === 'transparent' ? 'selected' : '' }}"
-                ng-click="ngModel[field] = 'transparent'">
-            </div>
-            <span class="l-palette-item-label">None</span>
-        </div>
-        <div
-            class="l-palette-row"
-            ng-repeat="group in colors.groups()">
-            <div class="l-palette-item s-palette-item {{ngModel[field] === color ? 'selected' : '' }}"
-                ng-repeat="color in group"
-                ng-style="{ background: color }"
-                ng-click="ngModel[field] = color">
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/platform/forms/res/templates/controls/composite.html b/platform/forms/res/templates/controls/composite.html
deleted file mode 100644
index 7e88bc8031b..00000000000
--- a/platform/forms/res/templates/controls/composite.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<span ng-controller="CompositeController as compositeCtrl">
-    <ng-form name="mctFormItem" ng-repeat="item in structure.items">
-        <div class="l-composite-control l-{{item.control}} {{item.cssClass}}">
-            <mct-control key="item.control"
-                         ng-model="ngModel[field]"
-                         ng-required="ngRequired || compositeCtrl.isNonEmpty(ngModel[field])"
-                         ng-pattern="ngPattern"
-                         options="item.options"
-                         structure="item"
-                         field="$index">
-            </mct-control>
-            <span class="composite-control-label">
-                {{item.name}}
-            </span>
-        </div>
-    </ng-form>
-</span>
diff --git a/platform/forms/res/templates/controls/datetime.html b/platform/forms/res/templates/controls/datetime.html
deleted file mode 100644
index e571f044a04..00000000000
--- a/platform/forms/res/templates/controls/datetime.html
+++ /dev/null
@@ -1,83 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div class='form-control complex datetime'>
-
-    <div class='field-hints'>
-        <span class='hint date'>Date</span>
-        <span class='hint time sm'>Hour</span>
-        <span class='hint time sm'>Min</span>
-        <span class='hint time sm'>Sec</span>
-        <span class='hint timezone'>Timezone</span>
-    </div>
-
-
-    <ng-form name="mctControl">
-        <div class='fields' ng-controller="DateTimeController">
-            <span class='field control date'>
-                <input type='text'
-                       name='date'
-                       placeholder="{{format}}"
-                       ng-pattern="/\d\d\d\d-\d\d-\d\d/"
-                       ng-model='datetime.date'
-                       ng-required='ngRequired || partiallyComplete'/>
-            </span>
-            <span class='field control time sm'>
-                <input type='text'
-                       name='hour'
-                       maxlength='2'
-                       min='0'
-                       max='23'
-                       integer
-                       ng-pattern='/\d+/'
-                       ng-model="datetime.hour"
-                       ng-required='ngRequired || partiallyComplete'/>
-            </span>
-            <span class='field control time sm'>
-                <input type='text'
-                       name='min'
-                       maxlength='2'
-                       min='0'
-                       max='59'
-                       integer
-                       ng-pattern='/\d+/'
-                       ng-model="datetime.min"
-                       ng-required='ngRequired || partiallyComplete'/>
-            </span>
-            <span class='field control time sm'>
-                <input type='text'
-                       name='sec'
-                       maxlength='2'
-                       min='0'
-                       max='59'
-                       integer
-                       ng-pattern='/\d+/'
-                       ng-model="datetime.sec"
-                       ng-required='ngRequired || partiallyComplete'/>
-            </span>
-            <span class='field control timezone'>
-                UTC
-            </span>
-        </div>
-    </ng-form>
-
-
-</div>
diff --git a/platform/forms/res/templates/controls/dialog.html b/platform/forms/res/templates/controls/dialog.html
deleted file mode 100644
index 0ea910746fe..00000000000
--- a/platform/forms/res/templates/controls/dialog.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<span ng-controller="DialogButtonController as dialog">
-    <mct-control key="'button'"
-                 structure="dialog.getButtonStructure()">
-    </mct-control>
-</span>
diff --git a/platform/forms/res/templates/controls/file-input.html b/platform/forms/res/templates/controls/file-input.html
deleted file mode 100644
index c780b2a3309..00000000000
--- a/platform/forms/res/templates/controls/file-input.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-
-<button class="c-button {{structure.cssClass}}"
-   ng-model="ngModel[field]"
-   ng-class="{ labeled: structure.text }"
-   mct-file-input>
-    <span class="c-button__label" ng-if="structure.text">
-        {{structure.text}}
-    </span>
-</button>
diff --git a/platform/forms/res/templates/controls/menu-button.html b/platform/forms/res/templates/controls/menu-button.html
deleted file mode 100644
index 0d010a84aa9..00000000000
--- a/platform/forms/res/templates/controls/menu-button.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div class="s-menu-button menu-element {{ structure.cssClass }}"
-     ng-controller="ClickAwayController as toggle">
-
-    <span class="l-click-area" ng-click="toggle.toggle()"></span>
-    <span class="title-label" ng-if="structure.text">
-        {{structure.text}}
-    </span>
-
-    <div class="menu" ng-show="toggle.isActive()">
-        <ul>
-            <li ng-click="structure.click(option.key); toggle.setState(false)"
-                ng-repeat="option in structure.options"
-                class="{{ option.cssClass }}">
-                    {{option.name}}
-            </li>
-        </ul>
-    </div>
-</div>
diff --git a/platform/forms/res/templates/controls/numberfield.html b/platform/forms/res/templates/controls/numberfield.html
deleted file mode 100644
index bb235e029cf..00000000000
--- a/platform/forms/res/templates/controls/numberfield.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<span class='form-control shell'>
-    <span class='field control {{structure.cssClass}}'>
-        <input type="number"
-               ng-required="ngRequired"
-               ng-model="ngModel[field]"
-               ng-blur="ngBlur()"
-               ng-pattern="ngPattern"
-               min="{{structure.min}}"
-               max="{{structure.max}}"
-               step="{{structure.step}}"
-               name="mctControl">
-    </span>
-</span>
diff --git a/platform/forms/res/templates/controls/radio.html b/platform/forms/res/templates/controls/radio.html
deleted file mode 100644
index a6daab09ec2..00000000000
--- a/platform/forms/res/templates/controls/radio.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<label class="radio custom no-text">
-    <input type="radio"
-           name="mctControl"
-           ng-model="ngModel[field]"
-           ng-disabled="ngDisabled"
-           ng-value="structure.value">
-    <em></em>
-</label>
diff --git a/platform/forms/res/templates/controls/select.html b/platform/forms/res/templates/controls/select.html
deleted file mode 100644
index f95121d4f77..00000000000
--- a/platform/forms/res/templates/controls/select.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div class='form-control select'>
-    <select
-            ng-model="ngModel[field]"
-            ng-options="opt.value as opt.name for opt in options"
-            ng-required="ngRequired"
-            name="mctControl">
-        <option value="" ng-show="!ngModel[field]">- Select One -</option>
-    </select>
-</div>
diff --git a/platform/forms/res/templates/controls/textarea.html b/platform/forms/res/templates/controls/textarea.html
deleted file mode 100644
index f232040e6e8..00000000000
--- a/platform/forms/res/templates/controls/textarea.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<span class='form-control shell'>
-    <span class='field control {{structure.cssClass}}'>
-        <textarea ng-required="ngRequired"
-               ng-model="ngModel[field]"
-               ng-pattern="ngPattern"
-               size="{{structure.size}}"
-               name="mctControl">
-        </textarea>
-    </span>
-</span>
diff --git a/platform/forms/res/templates/controls/textfield.html b/platform/forms/res/templates/controls/textfield.html
deleted file mode 100644
index 18d4deda881..00000000000
--- a/platform/forms/res/templates/controls/textfield.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<span class='form-control shell'>
-    <span class='field control {{structure.cssClass}}'>
-        <input type="text"
-               ng-required="ngRequired"
-               ng-model="ngModel[field]"
-               ng-blur="ngBlur()"
-               ng-pattern="ngPattern"
-               size="{{structure.size}}"
-               name="mctControl">
-    </span>
-</span>
diff --git a/platform/forms/res/templates/form.html b/platform/forms/res/templates/form.html
deleted file mode 100644
index 9be1363a2c0..00000000000
--- a/platform/forms/res/templates/form.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<form name="mctForm" novalidate class="form c-form" autocomplete="off">
-    <span ng-repeat="section in structure.sections"
-          class="l-form-section c-form__section {{ section.cssClass }}">
-        <h2 class="c-form__header" ng-if="section.name">
-            {{section.name}}
-        </h2>
-        <ng-form class="form-row c-form__row validates {{ section.cssClass }}"
-                 ng-class="{
-                 first:$index < 1,
-                 req: row.required,
-                 valid: mctFormInner.$dirty && mctFormInner.$valid,
-                 invalid: mctFormInner.$dirty && !mctFormInner.$valid,
-                 first: $index < 1,
-                'l-controls-first': row.layout === 'control-first',
-                'l-controls-under': row.layout === 'controls-under'
-                 }"
-                 name="mctFormInner"
-                 ng-repeat="row in section.rows">
-            <div class='c-form__row__label label flex-elem' title="{{row.description}}">
-                {{row.name}}
-            </div>
-            <div class='c-form__row__controls controls flex-elem'>
-                <div class="c-form__controls-wrapper wrapper" ng-if="row.control">
-                    <mct-control key="row.control"
-                                 ng-model="ngModel"
-                                 ng-required="row.required"
-                                 ng-pattern="getRegExp(row.pattern)"
-                                 options="row.options"
-                                 structure="row"
-                                 field="row.key">
-                    </mct-control>
-                </div>
-            </div>
-        </ng-form>
-    </span>
-</form>
diff --git a/platform/forms/src/FileInputService.js b/platform/forms/src/FileInputService.js
deleted file mode 100644
index bdc3fd2c2a5..00000000000
--- a/platform/forms/src/FileInputService.js
+++ /dev/null
@@ -1,96 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(["zepto"], function ($) {
-
-    /**
-     * The FileInputService provides an interface for triggering a file input.
-     *
-     * @constructor
-     * @memberof platform/forms
-     */
-    function FileInputService() {
-    }
-
-    /**
-     * Creates, triggers, and destroys a file picker element and returns a
-     * promise for an object containing the chosen file's name and contents.
-     *
-     * @returns {Promise} promise for an object containing file meta-data
-     */
-    FileInputService.prototype.getInput = function (fileType) {
-        var input = this.newInput();
-        var read = this.readFile;
-        var fileInfo = {};
-        var file;
-
-        return new Promise(function (resolve, reject) {
-            input.trigger("click");
-            input.on('change', function (event) {
-                // eslint-disable-next-line no-invalid-this
-                file = this.files[0];
-                input.remove();
-                if (file) {
-                    if (fileType && (!file.type || (file.type !== fileType))) {
-                        reject("Incompatible file type");
-                    }
-
-                    read(file)
-                        .then(function (contents) {
-                            fileInfo.name = file.name;
-                            fileInfo.body = contents;
-                            resolve(fileInfo);
-                        }, function () {
-                            reject("File read error");
-                        });
-                }
-            });
-        });
-    };
-
-    FileInputService.prototype.readFile = function (file) {
-        var fileReader = new FileReader();
-
-        return new Promise(function (resolve, reject) {
-            fileReader.onload = function (event) {
-                resolve(event.target.result);
-            };
-
-            fileReader.onerror = function () {
-                return reject(event.target.result);
-            };
-
-            fileReader.readAsText(file);
-        });
-    };
-
-    FileInputService.prototype.newInput = function () {
-        var input = $(document.createElement('input'));
-        input.attr("type", "file");
-        input.css("display", "none");
-        $('body').append(input);
-
-        return input;
-    };
-
-    return FileInputService;
-});
diff --git a/platform/forms/src/MCTControl.js b/platform/forms/src/MCTControl.js
deleted file mode 100644
index d6237bf9f26..00000000000
--- a/platform/forms/src/MCTControl.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * The mct-control will dynamically include the control
-         * for a form element based on a symbolic key. Individual
-         * controls are defined under the extension category
-         * `controls`; this allows plug-ins to introduce new form
-         * control types while still making use of the form
-         * generator to ensure an overall consistent form style.
-         * @constructor
-         * @memberof platform/forms
-         */
-        function MCTControl(templateLinker, controls) {
-            var controlMap = {};
-
-            // Prepopulate controlMap for easy look up by key
-            controls.forEach(function (control) {
-                controlMap[control.key] = control;
-            });
-
-            function link(scope, element, attrs, ngModelController) {
-                var changeTemplate = templateLinker.link(scope, element);
-                scope.$watch("key", function (key) {
-                    changeTemplate(controlMap[key]);
-                });
-                scope.ngModelController = ngModelController;
-            }
-
-            return {
-                // Only show at the element level
-                restrict: "E",
-
-                // ngOptions is terminal, so we need to be higher priority
-                priority: 1000,
-
-                // Get the ngModelController, so that controls can set validity
-                require: '?ngModel',
-
-                // Link function
-                link: link,
-
-                // Pass through Angular's normal input field attributes
-                scope: {
-                    // Used to choose which form control to use
-                    key: "=",
-
-                    // Allow controls to trigger blur-like events
-                    ngBlur: "&",
-
-                    // Allow controls to trigger blur-like events
-                    ngMouseup: "&",
-
-                    // The state of the form value itself
-                    ngModel: "=",
-
-                    // Enabled/disabled state
-                    ngDisabled: "=",
-
-                    // Whether or not input is required
-                    ngRequired: "=",
-
-                    // Pattern (for input fields)
-                    ngPattern: "=",
-
-                    // Set of choices (if any)
-                    options: "=",
-
-                    // Structure (subtree of Form Structure)
-                    structure: "=",
-
-                    // Name, as in "<input name="...
-                    field: "="
-                }
-            };
-        }
-
-        return MCTControl;
-    }
-);
diff --git a/platform/forms/src/MCTFileInput.js b/platform/forms/src/MCTFileInput.js
deleted file mode 100644
index 074e279f00a..00000000000
--- a/platform/forms/src/MCTFileInput.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['zepto'],
-    function ($) {
-
-        /**
-         * The mct-file-input handles behavior of the file input form control.
-         * @constructor
-         * @memberof platform/forms
-         */
-        function MCTFileInput(fileInputService) {
-
-            function link(scope, element, attrs, control) {
-
-                function setText(fileName) {
-                    scope.structure.text = fileName.length > 20
-                        ? fileName.substr(0, 20) + "..."
-                        : fileName;
-                }
-
-                function handleClick() {
-                    fileInputService.getInput(scope.structure.type).then(function (result) {
-                        setText(result.name);
-                        scope.ngModel[scope.field] = result;
-                        control.$setValidity("file-input", true);
-                    }, function () {
-                        setText('Select File');
-                        control.$setValidity("file-input", false);
-                    });
-                }
-
-                control.$setValidity("file-input", false);
-                element.on('click', handleClick);
-            }
-
-            return {
-                restrict: "A",
-                require: "^form",
-                link: link
-            };
-        }
-
-        return MCTFileInput;
-    }
-);
diff --git a/platform/forms/src/MCTForm.js b/platform/forms/src/MCTForm.js
deleted file mode 100644
index dc8cd295c24..00000000000
--- a/platform/forms/src/MCTForm.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * This bundle implements directives for displaying and handling forms for
- * user input.
- * @namespace platform/forms
- */
-define(
-    ["./controllers/FormController", "../res/templates/form.html"],
-    function (FormController, formTemplate) {
-
-        /**
-         * The mct-form directive allows generation of displayable
-         * forms based on a declarative description of the form's
-         * structure.
-         *
-         * This directive accepts three attributes:
-         *
-         * * `ng-model`: The model for the form; where user input
-         *   where be stored.
-         * * `structure`: The declarative structure of the form.
-         *   Describes what controls should be shown and where
-         *   their values should be read/written in the model.
-         * * `name`: The name under which to expose the form's
-         *   dirty/valid state. This is similar to ng-form's use
-         *   of name, except this will be made available in the
-         *   parent scope.
-         *
-         * @memberof platform/forms
-         * @constructor
-         */
-        function MCTForm() {
-            return {
-                // Only show at the element level
-                restrict: "E",
-
-                // Load the forms template
-                template: formTemplate,
-
-                // Use FormController to populate/respond to changes in scope
-                controller: ['$scope', FormController],
-
-                // Initial an isolate scope
-                scope: {
-
-                    // The model: Where form input will actually go
-                    ngModel: "=",
-
-                    // Form structure; what sections/rows to show
-                    structure: "=",
-
-                    // Name under which to publish the form
-                    name: "@"
-                }
-            };
-        }
-
-        return MCTForm;
-    }
-);
diff --git a/platform/forms/src/controllers/AutocompleteController.js b/platform/forms/src/controllers/AutocompleteController.js
deleted file mode 100644
index 5b129bc98ee..00000000000
--- a/platform/forms/src/controllers/AutocompleteController.js
+++ /dev/null
@@ -1,140 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Controller for the `autocomplete` form control.
-         *
-         * @memberof platform/forms
-         * @constructor
-         */
-        function AutocompleteController($scope, $element) {
-
-            var key = {
-                    down: 40,
-                    up: 38,
-                    enter: 13
-                },
-                autocompleteInputElement = $element[0].getElementsByClassName('autocompleteInput')[0];
-
-            if ($scope.options[0].name) {
-                // If "options" include name, value pair
-                $scope.optionNames = $scope.options.map(function (opt) {
-                    return opt.name;
-                });
-            } else {
-                // If options is only an array of string.
-                $scope.optionNames = $scope.options;
-            }
-
-            function fillInputWithIndexedOption() {
-                if ($scope.filteredOptions[$scope.optionIndex]) {
-                    $scope.ngModel[$scope.field] = $scope.filteredOptions[$scope.optionIndex].name;
-                }
-            }
-
-            function decrementOptionIndex() {
-                if ($scope.optionIndex === 0) {
-                    $scope.optionIndex = $scope.filteredOptions.length;
-                }
-
-                $scope.optionIndex--;
-                fillInputWithIndexedOption();
-            }
-
-            function incrementOptionIndex() {
-                if ($scope.optionIndex === $scope.filteredOptions.length - 1) {
-                    $scope.optionIndex = -1;
-                }
-
-                $scope.optionIndex++;
-                fillInputWithIndexedOption();
-            }
-
-            function fillInputWithString(string) {
-                $scope.hideOptions = true;
-                $scope.ngModel[$scope.field] = string;
-            }
-
-            function showOptions(string) {
-                $scope.hideOptions = false;
-                $scope.filterOptions(string);
-                $scope.optionIndex = 0;
-            }
-
-            $scope.keyDown = function ($event) {
-                if ($scope.filteredOptions) {
-                    var keyCode = $event.keyCode;
-                    switch (keyCode) {
-                    case key.down:
-                        incrementOptionIndex();
-                        break;
-                    case key.up:
-                        $event.preventDefault(); // Prevents cursor jumping back and forth
-                        decrementOptionIndex();
-                        break;
-                    case key.enter:
-                        if ($scope.filteredOptions[$scope.optionIndex]) {
-                            fillInputWithString($scope.filteredOptions[$scope.optionIndex].name);
-                        }
-                    }
-                }
-            };
-
-            $scope.filterOptions = function (string) {
-                $scope.hideOptions = false;
-                $scope.filteredOptions = $scope.optionNames.filter(function (option) {
-                    return option.toLowerCase().indexOf(string.toLowerCase()) >= 0;
-                }).map(function (option, index) {
-                    return {
-                        optionId: index,
-                        name: option
-                    };
-                });
-            };
-
-            $scope.inputClicked = function () {
-                autocompleteInputElement.select();
-                showOptions(autocompleteInputElement.value);
-            };
-
-            $scope.arrowClicked = function () {
-                autocompleteInputElement.select();
-                showOptions('');
-            };
-
-            $scope.fillInput = function (string) {
-                fillInputWithString(string);
-            };
-
-            $scope.optionMouseover = function (optionId) {
-                $scope.optionIndex = optionId;
-            };
-        }
-
-        return AutocompleteController;
-
-    }
-);
diff --git a/platform/forms/src/controllers/ColorController.js b/platform/forms/src/controllers/ColorController.js
deleted file mode 100644
index a692b39b117..00000000000
--- a/platform/forms/src/controllers/ColorController.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        var BASE_COLORS = [
-                [136, 32, 32],
-                [224, 64, 64],
-                [240, 160, 72],
-                [255, 248, 96],
-                [128, 240, 72],
-                [128, 248, 248],
-                [88, 144, 224],
-                [0, 72, 240],
-                [136, 80, 240],
-                [224, 96, 248]
-            ],
-            GRADIENTS = [0.75, 0.50, 0.25, -0.25, -0.50, -0.75],
-            GROUPS = [];
-
-        function toWebColor(triplet) {
-            return '#' + triplet.map(function (v) {
-                return (v < 16 ? '0' : '') + v.toString(16);
-            }).join('');
-        }
-
-        function toGradient(triplet, value) {
-            return triplet.map(function (v) {
-                return Math.round(value > 0
-                    ? (v + (255 - v) * value)
-                    : (v * (1 + value))
-                );
-            });
-        }
-
-        function initializeGroups() {
-            var group;
-
-            // Ten grayscale colors
-            group = [];
-            while (group.length < 10) {
-                group.push(toWebColor([
-                    Math.round(28.3333 * group.length),
-                    Math.round(28.3333 * group.length),
-                    Math.round(28.3333 * group.length)
-                ]));
-            }
-
-            GROUPS.push(group);
-
-            // Ten basic colors
-            GROUPS.push(BASE_COLORS.map(toWebColor));
-
-            // ...and some gradients of those colors
-            group = [];
-            GRADIENTS.forEach(function (v) {
-                group = group.concat(BASE_COLORS.map(function (c) {
-                    return toWebColor(toGradient(c, v));
-                }));
-            });
-            GROUPS.push(group);
-        }
-
-        function ColorController() {
-            if (GROUPS.length === 0) {
-                initializeGroups();
-            }
-        }
-
-        /**
-         * Get groups of colors to display in a color picker. These are
-         * given as #-prefixed color strings, in a two-dimensional array.
-         * Each element of the array is a group of related colors (e.g.
-         * grayscale colors, web colors, gradients...)
-         * @returns {string[][]} groups of colors
-         */
-        ColorController.prototype.groups = function () {
-            return GROUPS;
-        };
-
-        return ColorController;
-    }
-);
diff --git a/platform/forms/src/controllers/CompositeController.js b/platform/forms/src/controllers/CompositeController.js
deleted file mode 100644
index efa07d2a854..00000000000
--- a/platform/forms/src/controllers/CompositeController.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * The CompositeController supports the "composite" control type,
-         * which provides an array of other controls. It is used specifically
-         * to support validation when a particular row is not marked as
-         * required; in this case, empty input should be allowed, but partial
-         * input (where some but not all of the composite controls have been
-         * filled in) should be disallowed. This is enforced in the template
-         * by an ng-required directive, but that is supported by the
-         * isNonEmpty check that this controller provides.
-         * @memberof platform/forms
-         * @constructor
-         */
-        function CompositeController() {
-        }
-
-        // Check if an element is defined; the map step of isNonEmpty
-        function isDefined(element) {
-            return typeof element !== 'undefined';
-        }
-
-        /**
-         * Check if an array contains anything other than
-         * undefined elements.
-         * @param {Array} value the array to check
-         * @returns {boolean} true if any non-undefined
-         *          element is in the array
-         * @memberof platform/forms.CompositeController#
-         */
-        CompositeController.prototype.isNonEmpty = function (value) {
-            return Array.isArray(value) && value.some(isDefined);
-        };
-
-        return CompositeController;
-
-    }
-);
diff --git a/platform/forms/src/controllers/DateTimeController.js b/platform/forms/src/controllers/DateTimeController.js
deleted file mode 100644
index 4a41f2773f9..00000000000
--- a/platform/forms/src/controllers/DateTimeController.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["moment"],
-    function (moment) {
-
-        var DATE_FORMAT = "YYYY-MM-DD";
-
-        /**
-         * Controller for the `datetime` form control.
-         * This is a composite control; it includes multiple
-         * input fields but outputs a single timestamp (in
-         * milliseconds since start of 1970) to the ngModel.
-         *
-         * @memberof platform/forms
-         * @constructor
-         */
-        function DateTimeController($scope) {
-
-            // Update the
-            function update() {
-                var date = $scope.datetime.date,
-                    hour = $scope.datetime.hour,
-                    min = $scope.datetime.min,
-                    sec = $scope.datetime.sec,
-                    fullDateTime = moment.utc(date, DATE_FORMAT)
-                        .hour(hour || 0)
-                        .minute(min || 0)
-                        .second(sec || 0);
-
-                if (fullDateTime.isValid()) {
-                    $scope.ngModel[$scope.field] = fullDateTime.valueOf();
-                }
-
-                // If anything is complete, say so in scope; there are
-                // ng-required usages that will update off of this (to
-                // allow datetime to be optional while still permitting
-                // incomplete input)
-                $scope.partiallyComplete =
-                    Object.keys($scope.datetime).some(function (key) {
-                        return $scope.datetime[key];
-                    });
-
-                // Treat empty input as an undefined value
-                if (!$scope.partiallyComplete) {
-                    $scope.ngModel[$scope.field] = undefined;
-                }
-            }
-
-            function updateDateTime(value) {
-                var m;
-                if (value !== undefined) {
-                    m = moment.utc(value);
-                    $scope.datetime = {
-                        date: m.format(DATE_FORMAT),
-                        hour: m.format("H"),
-                        min: m.format("m"),
-                        sec: m.format("s")
-                    };
-                } else {
-                    $scope.datetime = {};
-                }
-            }
-
-            // ...and update form values when actual field in model changes
-            $scope.$watch("ngModel[field]", updateDateTime);
-
-            // Update value whenever any field changes.
-            $scope.$watch("datetime.date", update);
-            $scope.$watch("datetime.hour", update);
-            $scope.$watch("datetime.min", update);
-            $scope.$watch("datetime.sec", update);
-
-            // Expose format string for placeholder
-            $scope.format = DATE_FORMAT;
-
-            // Initialize forms values
-            updateDateTime(
-                ($scope.ngModel && $scope.field)
-                    ? $scope.ngModel[$scope.field] : undefined
-            );
-        }
-
-        return DateTimeController;
-
-    }
-);
-
diff --git a/platform/forms/src/controllers/DialogButtonController.js b/platform/forms/src/controllers/DialogButtonController.js
deleted file mode 100644
index 435b127b346..00000000000
--- a/platform/forms/src/controllers/DialogButtonController.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-define(
-    [],
-    function () {
-
-        /**
-         * Controller for the `dialog-button` control type. Provides
-         * structure for a button (embedded via the template) which
-         * will show a dialog for editing a single property when clicked.
-         * @memberof platform/forms
-         * @constructor
-         * @param $scope the control's Angular scope
-         * @param {DialogService} dialogService service to use to prompt
-         *        for user input
-         */
-        function DialogButtonController($scope, dialogService) {
-            var self = this,
-                buttonForm;
-
-            // Store the result of user input to the model
-            function storeResult(result) {
-                $scope.ngModel[$scope.field] = result[$scope.field];
-            }
-
-            // Prompt for user input
-            function showDialog() {
-                // Prepare initial state
-                var state = {};
-                state[$scope.field] = $scope.ngModel[$scope.field];
-
-                // Show dialog, then store user input (if any)
-                dialogService.getUserInput(buttonForm, state).then(storeResult);
-            }
-
-            // Refresh state based on structure for this control
-            function refreshStructure(structure) {
-                var row = Object.create(structure.dialog || {});
-
-                structure = structure || {};
-
-                // Add the key, to read back from that row
-                row.key = $scope.field;
-
-                // Prepare the structure for the button itself
-                self.buttonStructure = {};
-                self.buttonStructure.cssClass = structure.cssClass;
-                self.buttonStructure.name = structure.name;
-                self.buttonStructure.description = structure.description;
-                self.buttonStructure.click = showDialog;
-
-                // Prepare the form; a single row
-                buttonForm = {
-                    name: structure.title,
-                    sections: [{ rows: [row] }]
-                };
-            }
-
-            $scope.$watch('structure', refreshStructure);
-        }
-
-        /**
-         * Get the structure for an `mct-control` of type
-         * `button`; a dialog will be launched when this button
-         * is clicked.
-         * @returns dialog structure
-         */
-        DialogButtonController.prototype.getButtonStructure = function () {
-            return this.buttonStructure;
-        };
-
-        return DialogButtonController;
-    }
-);
diff --git a/platform/forms/src/controllers/FormController.js b/platform/forms/src/controllers/FormController.js
deleted file mode 100644
index eebae6e9433..00000000000
--- a/platform/forms/src/controllers/FormController.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        // Default ng-pattern; any non whitespace
-        var NON_WHITESPACE = /\S/;
-
-        /**
-         * Controller for mct-form and mct-toolbar directives.
-         * @memberof platform/forms
-         * @constructor
-         */
-        function FormController($scope) {
-            var regexps = [];
-
-            // ng-pattern seems to want a RegExp, and not a
-            // string (despite what documentation says) but
-            // we want form structure to be JSON-expressible,
-            // so we make RegExp's from strings as-needed
-            function getRegExp(pattern) {
-                // If undefined, don't apply a pattern
-                if (!pattern) {
-                    return NON_WHITESPACE;
-                }
-
-                // Just echo if it's already a regexp
-                if (pattern instanceof RegExp) {
-                    return pattern;
-                }
-
-                // Otherwise, assume a string
-                // Cache for easy lookup later (so we don't
-                // creat a new RegExp every digest cycle)
-                if (!regexps[pattern]) {
-                    regexps[pattern] = new RegExp(pattern);
-                }
-
-                return regexps[pattern];
-            }
-
-            // Publish the form state under the requested
-            // name in the parent scope
-            $scope.$watch("mctForm", function (mctForm) {
-                if ($scope.name) {
-                    $scope.$parent[$scope.name] = mctForm;
-                }
-            });
-
-            // Expose the regexp lookup
-            $scope.getRegExp = getRegExp;
-        }
-
-        return FormController;
-    }
-);
diff --git a/platform/forms/test/FileInputServiceSpec.js b/platform/forms/test/FileInputServiceSpec.js
deleted file mode 100644
index 014b6cc7d71..00000000000
--- a/platform/forms/test/FileInputServiceSpec.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/FileInputService"],
-    function (FileInputService) {
-
-        describe("The FileInputService", function () {
-            var fileInputService,
-                mockInput;
-
-            beforeEach(function () {
-                fileInputService = new FileInputService();
-                mockInput = jasmine.createSpyObj('input',
-                    [
-                        'on',
-                        'trigger',
-                        'remove'
-                    ]
-                );
-                mockInput.on.and.callFake(function (event, changeHandler) {
-                    changeHandler.apply(mockInput);
-                });
-                spyOn(fileInputService, "newInput").and.returnValue(
-                    mockInput
-                );
-
-            });
-
-            it("can read a file", function () {
-                mockInput.files = [new File(["file content"], "file name")];
-                fileInputService.getInput().then(function (result) {
-                    expect(result.name).toBe("file name");
-                    expect(result.body).toBe("file content");
-                });
-
-                expect(mockInput.trigger).toHaveBeenCalledWith('click');
-                expect(mockInput.remove).toHaveBeenCalled();
-            });
-
-            it("catches file read errors", function () {
-                mockInput.files = ["GARBAGE"];
-                fileInputService.getInput().then(
-                    function (result) {},
-                    function (err) {
-                        expect(err).toBe("File read error");
-                    }
-                );
-
-                expect(mockInput.trigger).toHaveBeenCalledWith('click');
-                expect(mockInput.remove).toHaveBeenCalled();
-            });
-        });
-    }
-);
diff --git a/platform/forms/test/MCTControlSpec.js b/platform/forms/test/MCTControlSpec.js
deleted file mode 100644
index f7ff316e078..00000000000
--- a/platform/forms/test/MCTControlSpec.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/MCTControl"],
-    function (MCTControl) {
-
-        describe("The mct-control directive", function () {
-            var testControls,
-                mockScope,
-                mockLinker,
-                mockChangeTemplate,
-                mctControl;
-
-            beforeEach(function () {
-                testControls = [
-                    {
-                        key: "abc",
-                        bundle: {
-                            path: "a",
-                            resources: "b"
-                        },
-                        templateUrl: "c/template.html"
-                    },
-                    {
-                        key: "xyz",
-                        bundle: {
-                            path: "x",
-                            resources: "y"
-                        },
-                        templateUrl: "z/template.html"
-                    }
-                ];
-
-                mockScope = jasmine.createSpyObj("$scope", ["$watch"]);
-                mockLinker = jasmine.createSpyObj("templateLinker", ["link"]);
-                mockChangeTemplate = jasmine.createSpy('changeTemplate');
-                mockLinker.link.and.returnValue(mockChangeTemplate);
-
-                mctControl = new MCTControl(mockLinker, testControls);
-            });
-
-            it("is restricted to the element level", function () {
-                expect(mctControl.restrict).toEqual("E");
-            });
-
-            it("watches its passed key to choose a template", function () {
-                mctControl.link(mockScope);
-
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "key",
-                    jasmine.any(Function)
-                );
-            });
-
-            it("changes its template dynamically", function () {
-                mctControl.link(mockScope);
-
-                expect(mockChangeTemplate)
-                    .not.toHaveBeenCalledWith(testControls[1]);
-
-                mockScope.key = "xyz";
-                mockScope.$watch.calls.mostRecent().args[1]("xyz");
-
-                // Should have communicated the template path to
-                // ng-include via the "inclusion" field in scope
-                expect(mockChangeTemplate)
-                    .toHaveBeenCalledWith(testControls[1]);
-            });
-
-        });
-    }
-);
diff --git a/platform/forms/test/MCTFileInputSpec.js b/platform/forms/test/MCTFileInputSpec.js
deleted file mode 100644
index 3b05f7da57e..00000000000
--- a/platform/forms/test/MCTFileInputSpec.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/MCTFileInput"],
-    function (MCTFileInput) {
-
-        xdescribe("The mct-file-input directive", function () {
-
-            var mockScope,
-                mockFileInputService,
-                mctFileInput,
-                element,
-                attrs,
-                control;
-
-            beforeEach(function () {
-                attrs = [];
-                control = jasmine.createSpyObj('control', ['$setValidity']);
-                element = jasmine.createSpyObj('element', ['on', 'trigger']);
-                mockFileInputService = jasmine.createSpyObj('fileInputService',
-                    ['getInput']
-                );
-                mockScope = jasmine.createSpyObj(
-                    '$scope',
-                    ['$watch']
-                );
-
-                mockScope.structure = {text: 'Select File'};
-                mockScope.field = "file-input";
-                mockScope.ngModel = {"file-input": undefined};
-
-                element.on.and.callFake(function (event, clickHandler) {
-                    clickHandler();
-                });
-                mockFileInputService.getInput.and.returnValue(
-                    Promise.resolve({
-                        name: "file-name",
-                        body: "file-body"
-                    })
-                );
-
-                mctFileInput = new MCTFileInput(mockFileInputService);
-
-                return new Promise(function (resolve) {
-                    mctFileInput.link(mockScope, element, attrs, control);
-                    setTimeout(resolve, 100);
-                });
-            });
-
-            it("is restricted to attributes", function () {
-                expect(mctFileInput.restrict).toEqual("A");
-            });
-
-            it("changes button text to match file name", function () {
-                expect(element.on).toHaveBeenCalledWith(
-                    'click',
-                    jasmine.any(Function)
-                );
-                expect(mockScope.structure.text).toEqual("file-name");
-            });
-
-            it("validates control on file selection", function () {
-                var calls = control.$setValidity.calls;
-
-                expect(calls.count()).toBe(2);
-                expect(calls.all()[0].args).toEqual(
-                    ['file-input', false]
-                );
-                expect(calls.all()[1].args).toEqual(
-                    ['file-input', true]
-                );
-            });
-        });
-    }
-);
diff --git a/platform/forms/test/MCTFormSpec.js b/platform/forms/test/MCTFormSpec.js
deleted file mode 100644
index 5145dfc0095..00000000000
--- a/platform/forms/test/MCTFormSpec.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/MCTForm"],
-    function (MCTForm) {
-
-        describe("The mct-form directive", function () {
-            var mockScope,
-                mctForm;
-
-            function installController() {
-                var Controller = mctForm.controller[1];
-
-                return new Controller(mockScope);
-            }
-
-            beforeEach(function () {
-                mockScope = jasmine.createSpyObj("$scope", ["$watch"]);
-                mockScope.$parent = {};
-                mctForm = new MCTForm();
-            });
-
-            it("is restricted to elements", function () {
-                expect(mctForm.restrict).toEqual("E");
-            });
-
-            it("watches for changes in form by name", function () {
-                // mct-form needs to watch for the form by name
-                // in order to convey changes in $valid, $dirty, etc
-                // up to the parent scope.
-                installController();
-
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "mctForm",
-                    jasmine.any(Function)
-                );
-            });
-
-            it("conveys form status to parent scope", function () {
-                var someState = { someKey: "some value" };
-                mockScope.name = "someName";
-
-                installController();
-
-                mockScope.$watch.calls.mostRecent().args[1](someState);
-
-                expect(mockScope.$parent.someName).toBe(someState);
-            });
-
-            it("allows strings to be converted to RegExps", function () {
-                // This is needed to support ng-pattern in the template
-                installController();
-
-                // Should have added getRegExp to the scope,
-                // to convert strings to regular expressions
-                expect(mockScope.getRegExp("^\\d+$")).toEqual(/^\d+$/);
-            });
-
-            it("returns the same regexp instance for the same string", function () {
-                // Don't want new instances each digest cycle, for performance
-                var strRegExp = "^[a-z]\\d+$",
-                    regExp;
-
-                // Add getRegExp to scope
-                installController();
-                regExp = mockScope.getRegExp(strRegExp);
-
-                // Same object instance each time...
-                expect(mockScope.getRegExp(strRegExp)).toBe(regExp);
-                expect(mockScope.getRegExp(strRegExp)).toBe(regExp);
-            });
-
-            it("passes RegExp objects through untouched", function () {
-                // Permit using forms to simply provide their own RegExp object
-                var regExp = /^\d+[a-d]$/;
-
-                // Add getRegExp to scope
-                installController();
-
-                // Should have added getRegExp to the scope,
-                // to convert strings to regular expressions
-                expect(mockScope.getRegExp(regExp)).toBe(regExp);
-            });
-
-            it("passes a non-whitespace regexp when no pattern is defined", function () {
-                // If no pattern is supplied, ng-pattern should match anything
-                installController();
-                expect(mockScope.getRegExp()).toEqual(/\S/);
-                expect(mockScope.getRegExp(undefined)).toEqual(/\S/);
-            });
-
-        });
-    }
-);
diff --git a/platform/forms/test/controllers/AutocompleteControllerSpec.js b/platform/forms/test/controllers/AutocompleteControllerSpec.js
deleted file mode 100644
index 12b0f560c47..00000000000
--- a/platform/forms/test/controllers/AutocompleteControllerSpec.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "../../src/controllers/AutocompleteController",
-    "angular"
-], function (
-    AutocompleteController,
-    angular
-) {
-
-    describe("The autocomplete controller", function () {
-        var mockScope,
-            mockElement,
-            controller;
-
-        beforeEach(function () {
-            mockScope = jasmine.createSpyObj("$scope", ["$watch"]);
-            mockScope.options = ['Asia/Dhaka', 'UTC', 'Toronto', 'Asia/Shanghai', 'Hotel California'];
-            mockScope.ngModel = [null, null, null, null, null];
-            mockScope.field = 4;
-            mockElement = angular.element("<div></div>");
-            controller = new AutocompleteController(mockScope, mockElement);
-        });
-
-        it("makes optionNames array equal to options if options is an array of string", function () {
-            expect(mockScope.optionNames).toEqual(mockScope.options);
-        });
-
-        it("filters options by returning array containing optionId and name", function () {
-            mockScope.filterOptions('Asia');
-            var filteredOptions = [{
-                optionId: 0,
-                name: 'Asia/Dhaka'
-            },
-            {
-                optionId: 1,
-                name: 'Asia/Shanghai'
-            }];
-            expect(mockScope.filteredOptions).toEqual(filteredOptions);
-        });
-
-        it("fills input with given string", function () {
-            var str = "UTC";
-            mockScope.fillInput(str);
-            expect(mockScope.hideOptions).toEqual(true);
-            expect(mockScope.ngModel[mockScope.field]).toEqual(str);
-        });
-
-        it("sets a new optionIndex on mouse hover", function () {
-            mockScope.optionMouseover(1);
-            expect(mockScope.optionIndex).toEqual(1);
-        });
-
-    });
-});
diff --git a/platform/forms/test/controllers/ColorControllerSpec.js b/platform/forms/test/controllers/ColorControllerSpec.js
deleted file mode 100644
index 373fc100e0c..00000000000
--- a/platform/forms/test/controllers/ColorControllerSpec.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/controllers/ColorController"],
-    function (ColorController) {
-
-        var COLOR_REGEX = /^#[0-9a-fA-F]{6}$/;
-
-        describe("The color picker's controller", function () {
-            var controller;
-
-            beforeEach(function () {
-                controller = new ColorController();
-            });
-
-            it("exposes groups of colors", function () {
-                var groups = controller.groups();
-
-                // Make sure that the groups array is non-empty
-                expect(Array.isArray(groups)).toBeTruthy();
-                expect(groups.length).not.toEqual(0);
-
-                groups.forEach(function (group) {
-                    // Make sure each group is a non-empty array
-                    expect(Array.isArray(group)).toBeTruthy();
-                    expect(group.length).not.toEqual(0);
-                    // Make sure they're valid web colors
-                    group.forEach(function (color) {
-                        expect(COLOR_REGEX.test(color)).toBeTruthy();
-                    });
-                });
-            });
-
-            it("exposes unique colors", function () {
-                var count = 0, set = {};
-
-                // Count each color, and add them to the set
-                controller.groups().forEach(function (group) {
-                    group.forEach(function (color) {
-                        count += 1;
-                        set[color] = true;
-                    });
-                });
-
-                // Size of set should be number of colors if all were unique
-                expect(Object.keys(set).length).toEqual(count);
-            });
-        });
-    }
-);
diff --git a/platform/forms/test/controllers/CompositeControllerSpec.js b/platform/forms/test/controllers/CompositeControllerSpec.js
deleted file mode 100644
index ee2653a8ac9..00000000000
--- a/platform/forms/test/controllers/CompositeControllerSpec.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/controllers/CompositeController"],
-    function (CompositeController) {
-
-        describe("The composite controller", function () {
-            var controller;
-
-            beforeEach(function () {
-                controller = new CompositeController();
-            });
-
-            it("detects non-empty arrays", function () {
-                expect(controller.isNonEmpty(["a", "b", undefined]))
-                    .toBeTruthy();
-                expect(controller.isNonEmpty([3]))
-                    .toBeTruthy();
-            });
-
-            it("detects empty arrays", function () {
-                expect(controller.isNonEmpty([undefined, undefined, undefined]))
-                    .toBeFalsy();
-                expect(controller.isNonEmpty([]))
-                    .toBeFalsy();
-            });
-
-            it("ignores non-arrays", function () {
-                expect(controller.isNonEmpty("this is not an array"))
-                    .toBeFalsy();
-            });
-
-        });
-    }
-);
diff --git a/platform/forms/test/controllers/DateTimeControllerSpec.js b/platform/forms/test/controllers/DateTimeControllerSpec.js
deleted file mode 100644
index add1f7e0ac5..00000000000
--- a/platform/forms/test/controllers/DateTimeControllerSpec.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/controllers/DateTimeController"],
-    function (DateTimeController) {
-
-        describe("The date-time controller", function () {
-            var mockScope,
-                controller;
-
-            beforeEach(function () {
-                mockScope = jasmine.createSpyObj("$scope", ["$watch"]);
-                controller = new DateTimeController(mockScope);
-            });
-
-            it("watches for changes in fields", function () {
-                ["date", "hour", "min", "sec"].forEach(function (fieldName) {
-                    expect(mockScope.$watch).toHaveBeenCalledWith(
-                        "datetime." + fieldName,
-                        jasmine.any(Function)
-                    );
-                });
-            });
-
-            it("converts date-time input into a timestamp", function () {
-                mockScope.ngModel = {};
-                mockScope.field = "test";
-                mockScope.datetime.date = "2014-11-28";
-                mockScope.datetime.hour = 22;
-                mockScope.datetime.min = 55;
-                mockScope.datetime.sec = 13;
-
-                mockScope.$watch.calls.mostRecent().args[1]();
-
-                expect(mockScope.ngModel.test).toEqual(1417215313000);
-            });
-
-            it("reports when form input is partially complete", function () {
-                // This is needed to flag the control's state as invalid
-                // when it is partially complete without having it treated
-                // as required.
-                mockScope.ngModel = {};
-                mockScope.field = "test";
-                mockScope.datetime.date = "2014-11-28";
-                mockScope.datetime.hour = 22;
-                mockScope.datetime.min = 55;
-                // mockScope.datetime.sec = 13;
-
-                mockScope.$watch.calls.mostRecent().args[1]();
-
-                expect(mockScope.partiallyComplete).toBeTruthy();
-            });
-
-            it("reports 'undefined' for empty input", function () {
-                mockScope.ngModel = { test: 12345 };
-                mockScope.field = "test";
-                mockScope.$watch.calls.mostRecent().args[1]();
-                // Clear all inputs
-                mockScope.datetime = {};
-                mockScope.$watch.calls.mostRecent().args[1]();
-
-                // Should have cleared out the time stamp
-                expect(mockScope.ngModel.test).toBeUndefined();
-            });
-
-            it("exposes date-time format for placeholder", function () {
-                expect(mockScope.format).toEqual(jasmine.any(String));
-                expect(mockScope.format.length).toBeGreaterThan(0);
-            });
-            it("initializes form fields with values from ng-model", function () {
-                mockScope.ngModel = { test: 1417215313000 };
-                mockScope.field = "test";
-                mockScope.$watch.calls.all().forEach(function (call) {
-                    if (call.args[0] === 'ngModel[field]') {
-                        call.args[1](mockScope.ngModel.test);
-                    }
-                });
-                expect(mockScope.datetime).toEqual({
-                    date: "2014-11-28",
-                    hour: "22",
-                    min: "55",
-                    sec: "13"
-                });
-            });
-        });
-    }
-);
diff --git a/platform/forms/test/controllers/DialogButtonControllerSpec.js b/platform/forms/test/controllers/DialogButtonControllerSpec.js
deleted file mode 100644
index 1a270d48465..00000000000
--- a/platform/forms/test/controllers/DialogButtonControllerSpec.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/controllers/DialogButtonController"],
-    function (DialogButtonController) {
-
-        describe("A dialog button controller", function () {
-            var mockScope,
-                mockDialogService,
-                mockPromise,
-                testStructure,
-                controller;
-
-            beforeEach(function () {
-                mockScope = jasmine.createSpyObj(
-                    '$scope',
-                    ['$watch']
-                );
-                mockDialogService = jasmine.createSpyObj(
-                    'dialogService',
-                    ['getUserInput']
-                );
-                mockPromise = jasmine.createSpyObj(
-                    'promise',
-                    ['then']
-                );
-                testStructure = {
-                    name: "A Test",
-                    cssClass: "icon-T",
-                    description: "Test description",
-                    control: "dialog-button",
-                    title: "Test title",
-                    dialog: {
-                        "control": "textfield",
-                        "name": "Inner control"
-                    }
-                };
-
-                mockScope.field = "testKey";
-                mockScope.ngModel = { testKey: "initial test value" };
-                mockScope.structure = testStructure;
-
-                mockDialogService.getUserInput.and.returnValue(mockPromise);
-
-                controller = new DialogButtonController(
-                    mockScope,
-                    mockDialogService
-                );
-            });
-
-            it("provides a structure for a button control", function () {
-                var buttonStructure;
-
-                // Template is just a mct-control pointing to a button
-                // control, so this controller needs to set up all the
-                // logic for showing a dialog and collecting user input
-                // when that button gets clicked.
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "structure", // As passed in via mct-control
-                    jasmine.any(Function)
-                );
-
-                mockScope.$watch.calls.mostRecent().args[1](testStructure);
-
-                buttonStructure = controller.getButtonStructure();
-                expect(buttonStructure.cssClass).toEqual(testStructure.cssClass);
-                expect(buttonStructure.description).toEqual(testStructure.description);
-                expect(buttonStructure.name).toEqual(testStructure.name);
-                expect(buttonStructure.click).toEqual(jasmine.any(Function));
-            });
-
-            it("shows a dialog when clicked", function () {
-                mockScope.$watch.calls.mostRecent().args[1](testStructure);
-                // Verify precondition - no dialog shown
-                expect(mockDialogService.getUserInput).not.toHaveBeenCalled();
-                // Click!
-                controller.getButtonStructure().click();
-                // Should have shown a dialog
-                expect(mockDialogService.getUserInput).toHaveBeenCalled();
-            });
-
-            it("stores user input to the model", function () {
-                var key, input = {};
-                // Show dialog, click...
-                mockScope.$watch.calls.mostRecent().args[1](testStructure);
-                controller.getButtonStructure().click();
-                // Should be listening to 'then'
-                expect(mockPromise.then)
-                    .toHaveBeenCalledWith(jasmine.any(Function));
-                // Find the key that the dialog should return
-                key = mockDialogService.getUserInput.calls.mostRecent()
-                    .args[0].sections[0].rows[0].key;
-                // Provide 'user input'
-                input[key] = "test user input";
-                // Resolve the promise with it
-                mockPromise.then.calls.mostRecent().args[0](input);
-                // ... should have been placed into the model
-                expect(mockScope.ngModel.testKey).toEqual("test user input");
-            });
-
-            it("supplies initial model state to the dialog", function () {
-                var key, state;
-                mockScope.$watch.calls.mostRecent().args[1](testStructure);
-                controller.getButtonStructure().click();
-                // Find the key that the dialog should return
-                key = mockDialogService.getUserInput.calls.mostRecent()
-                    .args[0].sections[0].rows[0].key;
-                // Get the initial state provided to the dialog
-                state = mockDialogService.getUserInput.calls.mostRecent().args[1];
-                // Should have had value from ngModel stored to that key
-                expect(state[key]).toEqual("initial test value");
-            });
-        });
-    }
-);
diff --git a/platform/forms/test/controllers/FormControllerSpec.js b/platform/forms/test/controllers/FormControllerSpec.js
deleted file mode 100644
index ed1619ba0c4..00000000000
--- a/platform/forms/test/controllers/FormControllerSpec.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/controllers/FormController"],
-    function (FormController) {
-
-        describe("The form controller", function () {
-            var mockScope,
-                controller;
-
-            beforeEach(function () {
-                mockScope = jasmine.createSpyObj("$scope", ["$watch"]);
-                mockScope.$parent = {};
-                controller = new FormController(mockScope);
-            });
-
-            it("watches for changes in form by name", function () {
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "mctForm",
-                    jasmine.any(Function)
-                );
-            });
-
-            it("conveys form status to parent scope", function () {
-                var someState = { someKey: "some value" };
-                mockScope.name = "someName";
-                mockScope.$watch.calls.mostRecent().args[1](someState);
-                expect(mockScope.$parent.someName).toBe(someState);
-            });
-
-            it("allows strings to be converted to RegExps", function () {
-                // Should have added getRegExp to the scope,
-                // to convert strings to regular expressions
-                expect(mockScope.getRegExp("^\\d+$")).toEqual(/^\d+$/);
-            });
-
-            it("returns the same regexp instance for the same string", function () {
-                // Don't want new instances each digest cycle, for performance
-                var strRegExp = "^[a-z]\\d+$",
-                    regExp;
-
-                // Add getRegExp to scope
-                regExp = mockScope.getRegExp(strRegExp);
-
-                // Same object instance each time...
-                expect(mockScope.getRegExp(strRegExp)).toBe(regExp);
-                expect(mockScope.getRegExp(strRegExp)).toBe(regExp);
-            });
-
-            it("passes RegExp objects through untouched", function () {
-                // Permit using forms to simply provide their own RegExp object
-                var regExp = /^\d+[a-d]$/;
-
-                // Should have added getRegExp to the scope,
-                // to convert strings to regular expressions
-                expect(mockScope.getRegExp(regExp)).toBe(regExp);
-            });
-
-            it("passes a non-whitespace regexp when no pattern is defined", function () {
-                // If no pattern is supplied, ng-pattern should match anything
-                expect(mockScope.getRegExp()).toEqual(/\S/);
-                expect(mockScope.getRegExp(undefined)).toEqual(/\S/);
-            });
-
-        });
-    }
-);
diff --git a/platform/framework/README.md b/platform/framework/README.md
deleted file mode 100644
index 5b5fbc8bc86..00000000000
--- a/platform/framework/README.md
+++ /dev/null
@@ -1,192 +0,0 @@
-Framework-level components for Open MCT. This is Angular and Require,
-with an extra layer to mediate between them and act as an extension
-mechanism to allow plug-ins to be introduced declaratively.
-
-# Usage
-
-This section needs to be written. For now, refer to implementation notes and
-examples in `example/builtins`, `example/extensions`, and `example/composite`.
-
-## Circular dependencies
-
-The framework layer (like Angular itself) does not support circular
-dependencies among extensions. Generally, circular dependencies can be
-avoided by refactoring; for instance, a dependency-less intermediary can be
-added by two parties which depend upon one another, and both can depend upon
-this intermediary while one abandons its dependency to the other (the
-intermediary must then provide the functionality that was needed in the
-abandoned dependency.)
-
-In some cases this refactoring is non-obvious or ineffective (for instance,
-when a service component depends upon the whole.) In these cases, Angular's
-`$injector` may be used to break the declaration-time dependency, by allowing
-retrieval of the dependency at use-time instead. (This is essentially the
-same solution as above, where `$injector` acts as an application-global
-generalized intermediary.)
-
-# Implementation Notes
-
-The framework layer is responsible for performing a four-stage initialization
-process. These stages are:
-
-1. __Loading definitions.__ JSON declarations are loaded for all bundles which
-   will constitute the application, and wrapped in a useful API for subsequent
-   stages. _Sources in `src/load`_
-2. __Resolving extensions.__ Any scripts which provide implementations for
-   extensions exposed by bundles are loaded, using Require.
-   _Sources in `src/resolve`_
-3. __Registering extensions.__ Resolved extensions are registered with Angular,
-   such that they can be used by the application at run-time. This stage
-   includes both registration of Angular built-ins (directives, controllers,
-   routes, constants, and services) as well as registration of non-Angular
-   extensions. _Sources in `src/register`_
-4. __Bootstrapping.__ JSON declarations are loaded for all bundles which
-   will constitute the application, and wrapped in a useful API for subsequent
-   stages. _Sources in `src/bootstrap`_
-
-Additionally, the framework layer takes responsibility for initializing
-other application state. Currently this simply means adding Promise to the
-global namespace if it is not defined.
-
-## Load stage
-
-Using Angular's `$http`, the list of installed bundles is loaded from
-`bundles.json`; then, each bundle's declaration (its path + `bundle.json`)
-is loaded. These are wrapped by `Bundle` objects, and the extensions they
-expose are wrapped by `Extension` objects; this is only to provide a
-useful API for subsequent stages.
-
-A bundle is a set of related extensions; an extension is an individual
-unit of the application that is meant to be used by other pieces of the
-application.
-
-## Resolution stage
-
-Some, but not all, individual extensions have corresponding scripts.
-These are referred to by the `implementation` field in their extension
-definition. The implementation name should not include the bundle path,
-or the name of the source folder; these will be pre-pended by the framework
-during this stage. The implementation name should include a `.js` extension.
-
-Bundles may utilize third-party libraries, and may wish to expose these such
-that other bundles may use them. Require JS may need special configuration
-to recognize and utilize third-party libraries, and when exposing a
-third-party library it may be desirable to do so under a short name
-(to avoid long relative paths.) Such configuration is performed during the
-resolution stage, immediately before implementations are loaded. Any
-`configuration` properties from a bundle's definition (`bundle.json`) will
-be used to perform this configuration; these `configuration` should take
-the same form as needed to populate a
-[`require.config`](http://requirejs.org/docs/api.html#config) call.
-At present, only `shim` and `paths` options are supported; any `paths` will
-be prepended with the bundle's library path (the bundle's `lib` folder, by
-default; this directory name can be overridden by specifying a `libraries`
-property in `bundles.json`.)
-
-An extension is resolved by loading its implementing script, if one has been
-declared. If none is declared, the extension's raw definition is used
-instead. To ensure that extensions look similar regardless of whether or
-not an implementation is present, all key-value pairs from the definition
-are copied to the loaded implementation (if one has been loaded.)
-
-## Registration stage
-
-Following implementation resolution, extensions are registered by Angular.
-How this registration occurs depends on whether or not there is built in
-support for the category of extension being registered.
-
-* For _built-in_ extension types (recognized by Angular), these are
-  registered with the application module. These categories are `directives`,
-  `controllers`, `services`, `constants`, and `routes`.
-* For _composite services_, extensions of category `components` are passed
-  to the service compositor, which builds up a dependency graph among
-  the components such that their fully-wired whole is exposed as a single
-  service.
-* For _general extensions_, the resolved extensions are assembled into a
-  list, with Angular-level dependencies are declared, and the full set
-  is exposed as a single Angular "service."
-
-### Priority order
-
-Within each category, registration occurs in priority order. An extension's
-priority may be specified as a `priority` property in its extension
-definition; this may be a number, or a symbolic string. Extensions are
-registered in reverse numeric order (highest-priority first), and symbolic
-strings are mapped to the numeric values as follows:
-
-* `fallback`: Negative infinity. Used for extensions that are not intended
-  for use (that is, they are meant to be overridden) but are present as an
-  option of last resort.
-* `default`: -100. Used for extensions that are expected to be overridden, but
-  need a useful default.
-* `none`: 0. Also used if no priority is specified, or if an unknown or
-  malformed priority is specified.
-* `optional`: 100. Used for extensions that are meant to be used, but may be
-  overridden.
-* `preferred`: 1000. Used for extensions that are specifically intended to
-  be used, but still may be overridden in principle.
-* `mandatory`: Positive infinity. Used when an extension should definitely
-  not be overridden.
-
-These symbolic names are chosen to reflect usage where many extensions may
-satisfy a given usage, but only one may be used; in this case, as a
-convention it should be the lowest-ordered (highest-priority) extensions
-available. In other cases, a full set (or multi-element subset) of
-extensions may be desired, with a specific ordering; in these cases, it
-is preferable to specify priority numerically when declaring extensions,
-and to understand that extensions will be sorted according to these
-conventions when using them.
-
-### Composite services
-
-Composite services are assumed to follow a provider-aggregator-decorator
-pattern where:
-
-* _Providers_ have dependencies as usual, and expose the API associated
-  with the service they compose. Providers are full service implementations
-  in-and-of-themselves.
-* _Aggregators_ have dependencies as usual plus one additional dependency,
-  which will be satisfied by the array of all providers registered of
-  that type of service. Implementations are assumed to include an extra
-  argument (after what they declare in `depends`) to receive this array.
-  Aggregators make multiple providers appear as one.
-* _Decorators_ have dependencies as usual plus one additional dependency,
-  which will be satisfied by either an aggregator (if one is present),
-  the latest provider (if no aggregator is present), or another decorator
-  (if multiple decorators are present.) As with aggregators, an additional
-  argument should be accepted by the implementation to receive this.
-  Decorators modify or augment the behavior of a service, but do not
-  provide its core functionality.
-* All of the above must be declared with a `provides` property, which
-  indicates which type of service they compose. Providers will only be
-  paired with aggregators of matching types, and so on. The value of
-  this property is also the name of the service that is ultimately
-  registered with Angular to represent the composite service as a whole.
-
-The service compositor handles this in five steps:
-
-1. All providers are registered.
-2. Arrays of providers are registered.
-3. All aggregators are registered (with dependencies to the arrays
-   registered in the previous step.)
-4. All decorators are registered (with dependencies on the most recent
-   components of matching types.)
-5. Full composite services are registered (essentially aliasing back
-   to the latest component registered of a given type.)
-
-Throughout these steps, components are registered with Angular using
-generated names like `typeService[decorator#11]`. It is technically possible
-to reference these dependencies elsewhere but that is not the intent.
-Rather, the resulting composed service should be referred to as
-`typeService` (or, more generally, the value matched from the `provides`
-field of the paired service components.)
-
-### General extensions
-
-Similar to composite services, each individual general extension gets
-registered using a generated name, like `types[extension#0]`. These are
-not intended to be referenced directly; instead, they are declared
-dependencies of the full list of general extensions of a given category.
-This list of extensions is registered with a square-brackets suffix,
-like `types[]`; this _is_ intended to be declared as a dependency by
-non-framework code.
diff --git a/platform/framework/bundle.js b/platform/framework/bundle.js
deleted file mode 100644
index aaead5e2f86..00000000000
--- a/platform/framework/bundle.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([], function () {
-
-    return {
-        name: "platform/framework",
-        definition: {
-            "name": "Open MCT Framework Component",
-            "description": "Framework layer for Open MCT; interprets bundle definitions and serves as an intermediary between Require and Angular",
-            "libraries": "lib",
-            "configuration": {
-                "paths": {
-                    "angular": "angular.min"
-                },
-                "shim": {
-                    "angular": {
-                        "exports": "angular"
-                    }
-                }
-            },
-            "extensions": {
-                "licenses": [
-                    {
-                        "name": "Blanket.js",
-                        "version": "1.1.5",
-                        "description": "Code coverage measurement and reporting",
-                        "author": "Alex Seville",
-                        "website": "http://blanketjs.org/",
-                        "copyright": "Copyright (c) 2013 Alex Seville",
-                        "license": "license-mit",
-                        "link": "http://opensource.org/licenses/MIT"
-                    },
-                    {
-                        "name": "Jasmine",
-                        "version": "1.3.1",
-                        "description": "Unit testing",
-                        "author": "Pivotal Labs",
-                        "website": "http://jasmine.github.io/",
-                        "copyright": "Copyright (c) 2008-2011 Pivotal Labs",
-                        "license": "license-mit",
-                        "link": "http://opensource.org/licenses/MIT"
-                    },
-                    {
-                        "name": "RequireJS",
-                        "version": "2.1.22",
-                        "description": "Script loader",
-                        "author": "The Dojo Foundation",
-                        "website": "http://requirejs.org/",
-                        "copyright": "Copyright (c) 2010-2015, The Dojo Foundation",
-                        "license": "license-mit",
-                        "link": "https://github.com/jrburke/requirejs/blob/master/LICENSE"
-                    },
-                    {
-                        "name": "AngularJS",
-                        "version": "1.4.4",
-                        "description": "Client-side web application framework",
-                        "author": "Google",
-                        "website": "http://angularjs.org/",
-                        "copyright": "Copyright (c) 2010-2015 Google, Inc. http://angularjs.org",
-                        "license": "license-mit",
-                        "link": "https://github.com/angular/angular.js/blob/v1.4.4/LICENSE"
-                    },
-                    {
-                        "name": "Angular-Route",
-                        "version": "1.4.4",
-                        "description": "Client-side view routing",
-                        "author": "Google",
-                        "website": "http://angularjs.org/",
-                        "copyright": "Copyright (c) 2010-2015 Google, Inc. http://angularjs.org",
-                        "license": "license-mit",
-                        "link": "https://github.com/angular/angular.js/blob/v1.4.4/LICENSE"
-                    },
-                    {
-                        "name": "ES6-Promise",
-                        "version": "3.0.2",
-                        "description": "Promise polyfill for pre-ECMAScript 6 browsers",
-                        "author": "Yehuda Katz, Tom Dale, Stefan Penner and contributors",
-                        "website": "https://github.com/jakearchibald/es6-promise",
-                        "copyright": "Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors",
-                        "license": "license-mit",
-                        "link": "https://github.com/jakearchibald/es6-promise/blob/master/LICENSE"
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/framework/src/Constants.js b/platform/framework/src/Constants.js
deleted file mode 100644
index 1e06ad24e59..00000000000
--- a/platform/framework/src/Constants.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Constants used by the framework layer.
- */
-define({
-    MODULE_NAME: "OpenMCTWeb",
-    BUNDLE_FILE: "bundle.json",
-    SEPARATOR: "/",
-    EXTENSION_SUFFIX: "[]",
-    DEFAULT_BUNDLE: {
-        "sources": "src",
-        "resources": "res",
-        "libraries": "lib",
-        "tests": "test",
-        "configuration": {},
-        "extensions": {}
-    },
-    PRIORITY_LEVELS: {
-        "fallback": Number.NEGATIVE_INFINITY,
-        "default": -100,
-        "none": 0,
-        "optional": 100,
-        "preferred": 1000,
-        "mandatory": Number.POSITIVE_INFINITY
-    },
-    DEFAULT_PRIORITY: 0
-});
diff --git a/platform/framework/src/FrameworkInitializer.js b/platform/framework/src/FrameworkInitializer.js
deleted file mode 100644
index 43502bb7871..00000000000
--- a/platform/framework/src/FrameworkInitializer.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining FrameworkInitializer. Created by vwoeltje on 11/3/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * Responsible for managing the four stages of framework
-         * initialization:
-         *
-         * * Loading bundle metadata (JSON files)
-         * * Resolving extension implementations with Require
-         * * Registering extensions with Angular
-         * * Bootstrapping the Angular application.
-         *
-         * @memberof platform/framework
-         * @constructor
-         * @param {platform/framework.BundleLoader} loader
-         * @param {platform/framework.BundleResolver} resolver
-         * @param {platform/framework.ExtensionRegistrar} registrar
-         * @param {platform/framework.ApplicationBootstrapper} bootstrapper
-         */
-        function FrameworkInitializer(loader, resolver, registrar, bootstrapper) {
-            this.loader = loader;
-            this.resolver = resolver;
-            this.registrar = registrar;
-            this.bootstrapper = bootstrapper;
-        }
-
-        function bind(method, thisArg) {
-            return function () {
-                return method.apply(thisArg, arguments);
-            };
-        }
-
-        /**
-         * Run the application defined by this set of bundles.
-         * @param bundleList
-         * @returns {*}
-         */
-        FrameworkInitializer.prototype.runApplication = function () {
-            return this.loader.loadBundles([])
-                .then(bind(this.resolver.resolveBundles, this.resolver))
-                .then(bind(this.registrar.registerExtensions, this.registrar))
-                .then(bind(this.bootstrapper.bootstrap, this.bootstrapper));
-        };
-
-        return FrameworkInitializer;
-    }
-);
diff --git a/platform/framework/src/FrameworkLayer.js b/platform/framework/src/FrameworkLayer.js
deleted file mode 100644
index 2c9e86be52f..00000000000
--- a/platform/framework/src/FrameworkLayer.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    './Constants',
-    './FrameworkInitializer',
-    './LogLevel',
-    './load/BundleLoader',
-    './resolve/ImplementationLoader',
-    './resolve/ExtensionResolver',
-    './resolve/BundleResolver',
-    './register/CustomRegistrars',
-    './register/ExtensionRegistrar',
-    './register/ExtensionSorter',
-    './bootstrap/ApplicationBootstrapper'
-], function (
-    Constants,
-    FrameworkInitializer,
-    LogLevel,
-    BundleLoader,
-    ImplementationLoader,
-    ExtensionResolver,
-    BundleResolver,
-    CustomRegistrars,
-    ExtensionRegistrar,
-    ExtensionSorter,
-    ApplicationBootstrapper
-) {
-
-    function FrameworkLayer($http, $log) {
-        this.$http = $http;
-        this.$log = $log;
-    }
-
-    FrameworkLayer.prototype.initializeApplication = function (
-        angular,
-        openmct,
-        logLevel
-    ) {
-        var $http = this.$http,
-            $log = this.$log,
-            app = angular.module(Constants.MODULE_NAME, ["ngRoute"]),
-            loader = new BundleLoader($http, $log, openmct.legacyRegistry),
-            resolver = new BundleResolver(
-                new ExtensionResolver(
-                    new ImplementationLoader({}),
-                    $log
-                ),
-                $log
-            ),
-            registrar = new ExtensionRegistrar(
-                app,
-                new CustomRegistrars(app, $log),
-                new ExtensionSorter($log),
-                $log
-            ),
-            bootstrapper = new ApplicationBootstrapper(
-                angular,
-                openmct.element,
-                $log
-            ),
-            initializer = new FrameworkInitializer(
-                loader,
-                resolver,
-                registrar,
-                bootstrapper
-            );
-
-        // Override of angular1.6 ! hashPrefix
-        app.config(['$locationProvider', function ($locationProvider) {
-            $locationProvider.hashPrefix('');
-        }]);
-
-        // Apply logging levels; this must be done now, before the
-        // first log statement.
-        new LogLevel(logLevel).configure(app, $log);
-
-        // Initialize the application
-        $log.info("Initializing application.");
-
-        return initializer.runApplication();
-    };
-
-    return FrameworkLayer;
-});
diff --git a/platform/framework/src/LogLevel.js b/platform/framework/src/LogLevel.js
deleted file mode 100644
index f90ea6c8480..00000000000
--- a/platform/framework/src/LogLevel.js
+++ /dev/null
@@ -1,100 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        // Log levels; note that these must be in order of
-        // most-important-first for LogLevel to function correctly
-        // as implemented.
-        var LOG_LEVELS = [
-            'error',
-            'warn',
-            'info',
-            'log',
-            'debug'
-        ];
-
-        // No-op, to replace undesired log levels with
-        function NOOP() {}
-
-        /**
-         * Handles enforcement of logging at different levels, specified
-         * at load time. The provided level should be one of "error",
-         * "warn", "info", "log", or "debug"; otherwise, "warn" is used
-         * as a default. Only log messages of levels equal to or greater
-         * than the specified level will be passed to console.
-         *
-         * @memberof platform/framework
-         * @constructor
-         * @param {string} level the logging level
-         */
-        function LogLevel(level) {
-            // Find the numeric level associated with the string
-            this.index = LOG_LEVELS.indexOf(level);
-
-            // Default to 'warn' level if unspecified
-            if (this.index < 0) {
-                this.index = 1;
-            }
-        }
-
-        /**
-         * Configure logging to suppress log output if it is
-         * not of an appropriate level. Both the Angular app
-         * being initialized and a reference to `$log` should be
-         * passed; the former is used to configure application
-         * logging, while the latter is needed to apply the
-         * same configuration during framework initialization
-         * (since the framework also logs.)
-         *
-         * @param app the Angular app to configure
-         * @param $log Angular's $log (also configured)
-         * @memberof platform/framework.LogLevel#
-         */
-        LogLevel.prototype.configure = function (app, $log) {
-            var index = this.index;
-
-            // Replace logging methods with no-ops, if they are
-            // not of an appropriate level.
-            function decorate(log) {
-                LOG_LEVELS.forEach(function (m, i) {
-                    // Determine applicability based on index
-                    // (since levels are in descending order)
-                    if (i > index) {
-                        log[m] = NOOP;
-                    }
-                });
-            }
-
-            decorate($log);
-            app.decorator('$log', ['$delegate', function ($delegate) {
-                decorate($delegate);
-
-                return $delegate;
-            }]);
-        };
-
-        return LogLevel;
-    }
-);
diff --git a/platform/framework/src/Main.js b/platform/framework/src/Main.js
deleted file mode 100644
index 750c338502c..00000000000
--- a/platform/framework/src/Main.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Implements the framework layer, which handles the loading of bundles
- * and the wiring-together of the extensions they expose.
- * @namespace platform/framework
- */
-define(
-    [
-        './FrameworkLayer',
-        'angular',
-        'angular-route'
-    ],
-    function (
-        FrameworkLayer,
-        angular
-    ) {
-
-        function Main() {
-        }
-
-        Main.prototype.run = function (openmct) {
-            // Get a reference to Angular's injector, so we can get $http and $log
-            // services, which are useful to the framework layer.
-            var injector = angular.injector(['ng']);
-
-            // Look up log level from query string
-            function logLevel() {
-                var match = /[?&]log=([a-z]+)/.exec(window.location.search);
-
-                return match ? match[1] : "";
-            }
-
-            return injector.instantiate(['$http', '$log', FrameworkLayer])
-                .initializeApplication(angular, openmct, logLevel());
-        };
-
-        return Main;
-    }
-);
diff --git a/platform/framework/src/bootstrap/ApplicationBootstrapper.js b/platform/framework/src/bootstrap/ApplicationBootstrapper.js
deleted file mode 100644
index 20e9fb581a9..00000000000
--- a/platform/framework/src/bootstrap/ApplicationBootstrapper.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining Bootstrapper. Created by vwoeltje on 11/4/14.
- *
- * The bootstrapper is responsible
- */
-define(
-    [],
-    function () {
-
-        /**
-         * The application bootstrapper is responsible for issuing the
-         * bootstrap call to Angular. This would normally not be needed
-         * with an appropriately-placed ng-app directive, but the
-         * framework needs to wait until all extensions have been loaded
-         * and registered.
-         *
-         * @memberof platform/framework
-         * @constructor
-         */
-        function ApplicationBootstrapper(angular, document, $log) {
-            this.angular = angular;
-            this.document = document;
-            this.$log = $log;
-        }
-
-        /**
-         * Bootstrap the application.
-         *
-         * @param {angular.Module} app the Angular application to
-         *        bootstrap
-         */
-        ApplicationBootstrapper.prototype.bootstrap = function (app) {
-            var angular = this.angular,
-                document = this.document,
-                $log = this.$log;
-
-            return new Promise(function (resolve, reject) {
-                $log.info("Bootstrapping application " + (app || {}).name);
-                angular.element(document).ready(function () {
-                    angular.bootstrap(document, [app.name], { strictDi: true });
-                    resolve(angular);
-                });
-            });
-        };
-
-        return ApplicationBootstrapper;
-    }
-);
diff --git a/platform/framework/src/load/Bundle.js b/platform/framework/src/load/Bundle.js
deleted file mode 100644
index cfe5cf18f2d..00000000000
--- a/platform/framework/src/load/Bundle.js
+++ /dev/null
@@ -1,207 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['../Constants', './Extension'],
-    function (Constants, Extension) {
-
-        /**
-         * A bundle's plain JSON definition.
-         *
-         * @name BundleDefinition
-         * @property {string} name the human-readable name of this bundle
-         * @property {string} sources the name of the directory which
-         *           contains source code used by this bundle
-         * @property {string} resources the name of the directory which
-         *           contains resource files used by this bundle
-         * @property {Object.<string,ExtensionDefinition[]>} [extensions={}]
-         *           all extensions exposed by this bundle
-         * @constructor
-         * @memberof platform/framework
-         */
-
-        /**
-         * Instantiate a new reference to a bundle, based on its human-readable
-         * definition.
-         *
-         * @param {string} path the path to the directory containing
-         *        this bundle
-         * @param {BundleDefinition} bundleDefinition
-         * @returns {{getDefinition: Function}}
-         * @constructor
-         */
-        function Bundle(path, bundleDefinition) {
-            // Start with defaults
-            var definition = Object.create(Constants.DEFAULT_BUNDLE),
-                logName = path;
-
-            // Override defaults with specifics from bundle definition
-            Object.keys(bundleDefinition).forEach(function (k) {
-                definition[k] = bundleDefinition[k];
-            });
-
-            // Record path to bundle in definition
-            definition.path = path;
-
-            // Build up the log-friendly name for this bundle
-            if (definition.key || definition.name) {
-                logName += "(";
-                logName += definition.key || "";
-                logName += (definition.key && definition.name) ? " " : "";
-                logName += definition.name || "";
-                logName += ")";
-            }
-
-            this.path = path;
-            this.definition = definition;
-            this.logName = logName;
-        }
-
-        // Utility function for resolving paths in this bundle
-        Bundle.prototype.resolvePath = function (elements) {
-            var path = this.path;
-
-            return [path].concat(elements || []).join(Constants.SEPARATOR);
-        };
-
-        /**
-         * Get the path to this bundle.
-         * @returns {string} path to this bundle;
-         */
-        Bundle.prototype.getPath = function () {
-            return this.path;
-        };
-
-        /**
-         * Get the path to this bundle's source folder. If an
-         * argument is provided, the path will be to the source
-         * file within the bundle's source file.
-         *
-         * @param {string} [sourceFile] optionally, give a path to
-         *        a specific source file in the bundle.
-         * @returns {string} path to the source folder (or to the
-         *          source file within it)
-         */
-        Bundle.prototype.getSourcePath = function (sourceFile) {
-            var subpath = sourceFile
-                ? [this.definition.sources, sourceFile]
-                : [this.definition.sources];
-
-            return this.resolvePath(subpath);
-        };
-
-        /**
-         * Get the path to this bundle's resource folder. If an
-         * argument is provided, the path will be to the resource
-         * file within the bundle's resource file.
-         *
-         * @param {string} [resourceFile] optionally, give a path to
-         *        a specific resource file in the bundle.
-         * @returns {string} path to the resource folder (or to the
-         *          resource file within it)
-         */
-        Bundle.prototype.getResourcePath = function (resourceFile) {
-            var subpath = resourceFile
-                ? [this.definition.resources, resourceFile]
-                : [this.definition.resources];
-
-            return this.resolvePath(subpath);
-        };
-
-        /**
-         * Get the path to this bundle's library folder. If an
-         * argument is provided, the path will be to the library
-         * file within the bundle's resource file.
-         *
-         * @param {string} [libraryFile] optionally, give a path to
-         *        a specific library file in the bundle.
-         * @returns {string} path to the resource folder (or to the
-         *          resource file within it)
-         */
-        Bundle.prototype.getLibraryPath = function (libraryFile) {
-            var subpath = libraryFile
-                ? [this.definition.libraries, libraryFile]
-                : [this.definition.libraries];
-
-            return this.resolvePath(subpath);
-        };
-
-        /**
-         * Get library configuration for this bundle. This is read
-         * from the bundle's definition; if the bundle is well-formed,
-         * it will resemble a require.config object.
-         * @returns {object} library configuration
-         */
-        Bundle.prototype.getConfiguration = function () {
-            return this.definition.configuration || {};
-        };
-
-        /**
-         * Get a log-friendly name for this bundle; this will
-         * include both the key (machine-readable name for this
-         * bundle) and the name (human-readable name for this
-         * bundle.)
-         * @returns {string} log-friendly name for this bundle
-         */
-        Bundle.prototype.getLogName = function () {
-            return this.logName;
-        };
-
-        /**
-         * Get all extensions exposed by this bundle of a given
-         * category.
-         *
-         * @param {string} category name of the extension category
-         * @returns {Array} extension definitions of that category
-         */
-        Bundle.prototype.getExtensions = function (category) {
-            var extensions = this.definition.extensions[category] || [],
-                self = this;
-
-            return extensions.map(function objectify(extDefinition) {
-                return new Extension(self, category, extDefinition);
-            });
-        };
-
-        /**
-         * Get a list of all extension categories exposed by this bundle.
-         *
-         * @returns {string[]} the extension categories
-         */
-        Bundle.prototype.getExtensionCategories = function () {
-            return Object.keys(this.definition.extensions);
-        };
-
-        /**
-         * Get the plain definition of this bundle, as read from
-         * its JSON declaration.
-         *
-         * @returns {platform/framework.BundleDefinition} the raw
-         *          definition of this bundle
-         */
-        Bundle.prototype.getDefinition = function () {
-            return this.definition;
-        };
-
-        return Bundle;
-    }
-);
diff --git a/platform/framework/src/load/BundleLoader.js b/platform/framework/src/load/BundleLoader.js
deleted file mode 100644
index 7d6865aa09d..00000000000
--- a/platform/framework/src/load/BundleLoader.js
+++ /dev/null
@@ -1,160 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining BundleLoader.js. Created by vwoeltje on 10/31/14.
- */
-define(
-    ['../Constants', './Bundle'],
-    function (Constants, Bundle) {
-
-        var INVALID_ARGUMENT_MESSAGE = "Malformed loadBundles argument; "
-            + "expected string or array",
-            BAD_CONTENTS_PREFIX = "Invalid bundle contents for ",
-            LOAD_ERROR_PREFIX = "Failed to load bundle ";
-
-        /**
-         * Loads bundle definitions and wraps them in interfaces which are
-         * useful to the framework. This provides the base information which
-         * will be used by later phases of framework layer initialization.
-         *
-         * @memberof platform/framework
-         * @constructor
-         * @param $http Angular's HTTP requester
-         * @param $log Angular's logging service
-         */
-        function BundleLoader($http, $log, legacyRegistry) {
-            this.$http = $http;
-            this.$log = $log;
-            this.legacyRegistry = legacyRegistry;
-        }
-
-        /**
-         * Load a group of bundles, to be used to constitute the
-         * application by later framework initialization phases.
-         *
-         * @param {string|string[]} an array of bundle names to load, or
-         *        the name of a JSON file containing that array
-         * @returns {Promise.<Bundle[]>} a promise for the loaded bundles
-         */
-        BundleLoader.prototype.loadBundles = function (bundles) {
-            var $http = this.$http,
-                $log = this.$log,
-                legacyRegistry = this.legacyRegistry;
-
-            // Utility function; load contents of JSON file using $http
-            function getJSON(file) {
-                return $http.get(file).then(function (response) {
-                    return response.data;
-                });
-            }
-
-            // Remove bundles which failed to load properly.
-            // These should have been logged when loaded by
-            // loadBundleDefinition, so at this point they are safe
-            // to discard.
-            function filterBundles(array) {
-                return array.filter(function (x) {
-                    return x !== undefined;
-                });
-            }
-
-            // Load a definition for a bundle
-            function loadBundleDefinition(bundlePath) {
-                return getJSON(bundlePath + "/" + Constants.BUNDLE_FILE).then(
-                    function (x) {
-                        if (x === null || typeof x !== 'object') {
-                            $log.warn(BAD_CONTENTS_PREFIX + bundlePath);
-
-                            return undefined;
-                        }
-
-                        return x;
-                    },
-                    function () {
-                        $log.warn(LOAD_ERROR_PREFIX + bundlePath);
-
-                        return undefined;
-                    }
-                );
-            }
-
-            // Load an individual bundle, as a Bundle object.
-            // Returns undefined if the definition could not be loaded.
-            function loadBundle(bundlePath) {
-                if (legacyRegistry.contains(bundlePath)) {
-                    return Promise.resolve(new Bundle(
-                        bundlePath,
-                        legacyRegistry.get(bundlePath)
-                    ));
-                }
-
-                return loadBundleDefinition(bundlePath).then(function (definition) {
-                    return definition && (new Bundle(bundlePath, definition));
-                });
-            }
-
-            // Used to filter out redundant bundles
-            function unique(element, index, array) {
-                return array.indexOf(element) === index;
-            }
-
-            // Load all named bundles from the array, returned as an array
-            // of Bundle objects.
-            function loadBundlesFromArray(bundleArray) {
-                var bundlePromises = legacyRegistry.list()
-                    .concat(bundleArray)
-                    .filter(unique)
-                    .map(loadBundle);
-
-                return Promise.all(bundlePromises)
-                    .then(filterBundles);
-            }
-
-            // Load all bundles named in the referenced file. The file is
-            // presumed to be a JSON file
-            function loadBundlesFromFile(listFile) {
-                function handleError(err) {
-                    $log.info([
-                        "No external bundles loaded;",
-                        "could not load bundle listing in",
-                        listFile,
-                        "due to error",
-                        err.status,
-                        err.statusText
-                    ].join(' '));
-
-                    return loadBundlesFromArray([]);
-                }
-
-                return getJSON(listFile)
-                    .then(loadBundlesFromArray, handleError);
-            }
-
-            return Array.isArray(bundles) ? loadBundlesFromArray(bundles)
-                : (typeof bundles === 'string') ? loadBundlesFromFile(bundles)
-                    : Promise.reject(new Error(INVALID_ARGUMENT_MESSAGE));
-        };
-
-        return BundleLoader;
-    }
-);
diff --git a/platform/framework/src/load/Extension.js b/platform/framework/src/load/Extension.js
deleted file mode 100644
index 53310c15cff..00000000000
--- a/platform/framework/src/load/Extension.js
+++ /dev/null
@@ -1,190 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * An extension's plain JSON definition.
-         *
-         * @name ExtensionDefinition
-         * @property {string} [key] the machine-readable identifier for this
-         *           extension
-         * @property {string} [implementation] the path to the AMD module
-         *           which implements this extension; this path is relative
-         *           to the containing bundle's source folder.
-         * @property {string[]} [depends=[]] the dependencies needed by this
-         *           extension; these are strings as shall be passed to
-         *           Angular's dependency resolution mechanism.
-         * @constructor
-         * @memberof platform/framework
-         */
-
-        /**
-         * Instantiate a new extension based on its definition. This serves
-         * primarily as a wrapper around the extension's definition to expose
-         * a useful interface.
-         *
-         * An extension
-         *
-         * @param {Bundle} bundle the bundle which exposed this extension
-         * @param {string} category the type of extension being exposed
-         * @param {ExtensionDefinition} definition the plain definition of
-         *        this extension
-         * @constructor
-         */
-        function Extension(bundle, category, definition) {
-            var logName = category,
-                extensionDefinition = {};
-
-            // Build up the log-friendly name for this bundle
-            if (definition.key || definition.name) {
-                logName += "(";
-                logName += definition.key || "";
-                logName += (definition.key && definition.name) ? " " : "";
-                logName += definition.name || "";
-                logName += ")";
-            }
-
-            logName += " from " + bundle.getLogName();
-
-            // Copy over definition. This allows us to attach the bundle
-            // definition without modifying the original definition object.
-            Object.keys(definition).forEach(function (k) {
-                extensionDefinition[k] = definition[k];
-            });
-
-            // Attach bundle metadata
-            extensionDefinition.bundle = bundle.getDefinition();
-
-            this.logName = logName;
-            this.bundle = bundle;
-            this.category = category;
-            this.definition = definition;
-            this.extensionDefinition = extensionDefinition;
-        }
-
-        /**
-         * Get the machine-readable identifier for this extension.
-         *
-         * @returns {string} the identifier for this extension
-         */
-        Extension.prototype.getKey = function () {
-            return this.definition.key || "undefined";
-        };
-
-        /**
-         * Get the bundle which declared this extension.
-         *
-         * @returns {Bundle} the declaring bundle
-         */
-        Extension.prototype.getBundle = function () {
-            return this.bundle;
-        };
-
-        /**
-         * Get the category into which this extension falls.
-         * (e.g. "directives")
-         *
-         * @returns {string} the extension category
-         */
-        Extension.prototype.getCategory = function () {
-            return this.category;
-        };
-
-        /**
-         * Check whether or not this extension should have an
-         * associated implementation module which may need to
-         * be loaded.
-         *
-         * @returns {boolean} true if an implementation separate
-         *          from this definition should also be loaded
-         */
-        Extension.prototype.hasImplementation = function () {
-            return this.definition.implementation !== undefined;
-        };
-
-        /**
-         * Get the path to the AMD module which implements this
-         * extension. Will return undefined if there is no
-         * implementation associated with this extension.
-         *
-         * @returns {string} path to implementation, or undefined
-         */
-        Extension.prototype.getImplementationPath = function () {
-            return (this.hasImplementation() && !this.hasImplementationValue())
-                ? this.bundle.getSourcePath(this.definition.implementation)
-                : undefined;
-        };
-
-        /**
-         * Check if an extension has an actual implementation value
-         * (and not just a path to an implementation) defined.
-         * @returns {function} the constructor for this extension instance
-         */
-        Extension.prototype.getImplementationValue = function () {
-            return typeof this.definition.implementation === 'function'
-                ? this.definition.implementation
-                : undefined;
-        };
-
-        /**
-         * Check if an extension has an actual implementation value
-         * (and not just a path to an implementation) defined.
-         * @returns {boolean} true if a value is available
-         */
-        Extension.prototype.hasImplementationValue = function () {
-            return typeof this.definition.implementation === 'function';
-        };
-
-        /**
-         * Get a log-friendly name for this extension; this will
-         * include both the key (machine-readable name for this
-         * extension) and the name (human-readable name for this
-         * extension.)
-         *
-         * @returns {string} log-friendly name for this extension
-         */
-        Extension.prototype.getLogName = function () {
-            return this.logName;
-        };
-
-        /**
-         * Get the plain definition of the extension.
-         *
-         * Note that this definition will have an additional "bundle"
-         * field which points back to the bundle which defined the
-         * extension, as a convenience.
-         *
-         * @returns {ExtensionDefinition} the plain definition of
-         *          this extension, as read from the bundle
-         *          declaration.
-         */
-        Extension.prototype.getDefinition = function () {
-            return this.extensionDefinition;
-        };
-
-        return Extension;
-
-    }
-);
diff --git a/platform/framework/src/register/CustomRegistrars.js b/platform/framework/src/register/CustomRegistrars.js
deleted file mode 100644
index 4dcfc2af466..00000000000
--- a/platform/framework/src/register/CustomRegistrars.js
+++ /dev/null
@@ -1,248 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* eslint-disable no-invalid-this */
-
-/**
- * Module defining CustomRegistrars. Created by vwoeltje on 11/3/14.
- */
-define(
-    ['../Constants', './ServiceCompositor'],
-    function (Constants, ServiceCompositor) {
-        /*jshint validthis:true */
-
-        /**
-         * Handles registration of a few specific extension types that are
-         * understood natively by Angular. This includes services and
-         * directives.
-         * @memberof platform/framework
-         * @constructor
-         */
-        function CustomRegistrars(app, $log) {
-            this.app = app;
-            this.$log = $log;
-            this.registered = {}; // Track registered keys by extension
-        }
-
-        // Utility; bind a function to a "this" pointer
-        function bind(fn, thisArg) {
-            return function () {
-                return fn.apply(thisArg, arguments);
-            };
-        }
-
-        // Used to create custom registration functions which map to
-        // named methods on Angular modules, which follow the normal
-        // app.method(key, [ deps..., function ]) pattern.
-        function customRegistrar(angularFunction) {
-            return function (extension, index) {
-                var app = this.app,
-                    $log = this.$log,
-                    key = extension.key,
-                    dependencies = extension.depends || [],
-                    registered = this.registered[angularFunction] || {};
-
-                this.registered[angularFunction] = registered;
-
-                if (!key) {
-                    $log.warn([
-                        "Cannot register ",
-                        angularFunction,
-                        " ",
-                        index,
-                        ", no key specified. ",
-                        JSON.stringify(extension)
-                    ].join(""));
-                } else if (registered[key]) {
-                    $log.debug([
-                        "Already registered ",
-                        angularFunction,
-                        " with key ",
-                        key,
-                        "; skipping."
-                    ].join(""));
-                } else {
-                    $log.info([
-                        "Registering ",
-                        angularFunction,
-                        ": ",
-                        key
-                    ].join(""));
-                    registered[key] = true;
-                    app[angularFunction](
-                        key,
-                        dependencies.concat([extension])
-                    );
-                }
-            };
-        }
-
-        function registerConstant(extension) {
-            var app = this.app,
-                $log = this.$log,
-                key = extension.key,
-                value = extension.value;
-
-            if (typeof key === "string" && value !== undefined) {
-                $log.info([
-                    "Registering constant: ",
-                    key,
-                    " with value ",
-                    value
-                ].join(""));
-                app.constant(key, value);
-            } else {
-                $log.warn([
-                    "Cannot register constant ",
-                    key,
-                    " with value ",
-                    value
-                ].join(""));
-            }
-
-        }
-
-        // Custom registration function for extensions of category "runs"
-        function registerRun(extension) {
-            var app = this.app,
-                $log = this.$log;
-
-            if (typeof extension === 'function') {
-                // Prepend dependencies, and schedule to run
-                app.run((extension.depends || []).concat([extension]));
-            } else {
-                // If it's not a function, no implementation was given
-                $log.warn([
-                    "Cannot register run extension from ",
-                    (extension.bundle || {}).path,
-                    "; no implementation."
-                ].join(""));
-            }
-        }
-
-        // Custom registration function for extensions of category "route"
-        function registerRoute(extension) {
-            var app = this.app,
-                $log = this.$log,
-                route = Object.create(extension);
-
-            // Adjust path for bundle
-            if (route.templateUrl) {
-                route.templateUrl = [
-                    route.bundle.path,
-                    route.bundle.resources,
-                    route.templateUrl
-                ].join(Constants.SEPARATOR);
-            }
-
-            // Log the registration
-            $log.info("Registering route: " + (route.key || route.when));
-
-            // Register the route with Angular
-            app.config(['$routeProvider', function ($routeProvider) {
-                if (route.when) {
-                    $routeProvider.when(route.when, route);
-                } else {
-                    $routeProvider.otherwise(route);
-                }
-            }]);
-        }
-
-        // Handle service compositing
-        function registerComponents(components) {
-            var app = this.app,
-                $log = this.$log;
-
-            return new ServiceCompositor(app, $log)
-                .registerCompositeServices(components);
-        }
-
-        // Utility; create a function which converts another function
-        // (which acts on single objects) to one which acts upon arrays.
-        function mapUpon(func) {
-            return function (array) {
-                return array.map(bind(func, this));
-            };
-        }
-
-        // More like key-value pairs than methods; key is the
-        // name of the extension category to be handled, and the value
-        // is the function which handles it.
-
-        /**
-         * Register constant values.
-         * @param {Array} extensions the resolved extensions
-         */
-        CustomRegistrars.prototype.constants =
-            mapUpon(registerConstant);
-
-        /**
-         * Register Angular routes.
-         * @param {Array} extensions the resolved extensions
-         */
-        CustomRegistrars.prototype.routes =
-            mapUpon(registerRoute);
-
-        /**
-         * Register Angular directives.
-         * @param {Array} extensions the resolved extensions
-         */
-        CustomRegistrars.prototype.directives =
-            mapUpon(customRegistrar("directive"));
-
-        /**
-         * Register Angular controllers.
-         * @param {Array} extensions the resolved extensions
-         */
-        CustomRegistrars.prototype.controllers =
-            mapUpon(customRegistrar("controller"));
-
-        /**
-         * Register Angular services.
-         * @param {Array} extensions the resolved extensions
-         */
-        CustomRegistrars.prototype.services =
-            mapUpon(customRegistrar("service"));
-
-        /**
-         * Register Angular filters.
-         * @param {Array} extensions the resolved extensions
-         */
-        CustomRegistrars.prototype.filters =
-            mapUpon(customRegistrar("filter"));
-
-        /**
-         * Register functions which will run after bootstrapping.
-         * @param {Array} extensions the resolved extensions
-         */
-        CustomRegistrars.prototype.runs =
-            mapUpon(registerRun);
-
-        /**
-         * Register components of composite services.
-         * @param {Array} extensions the resolved extensions
-         */
-        CustomRegistrars.prototype.components =
-            registerComponents;
-
-        return CustomRegistrars;
-    }
-);
diff --git a/platform/framework/src/register/ExtensionRegistrar.js b/platform/framework/src/register/ExtensionRegistrar.js
deleted file mode 100644
index 04b14952fcd..00000000000
--- a/platform/framework/src/register/ExtensionRegistrar.js
+++ /dev/null
@@ -1,232 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining ExtensionRegistrar. Created by vwoeltje on 11/3/14.
- */
-define(
-    ['../Constants', './PartialConstructor'],
-    function (Constants, PartialConstructor) {
-
-        /**
-         * Responsible for registering extensions with Angular.
-         *
-         * @memberof platform/framework
-         * @constructor
-         * @param {angular.Module} the Angular application with which
-         *        extensions should be registered
-         * @param {Object.<string,function>} customRegistrars an object
-         *        containing custom registration functions, primarily for
-         *        Angular built-ins.
-         * @param {ExtensionSorter} sorter the sorter which will impose
-         *        priority ordering upon extensions
-         * @param {*} $log Angular's logging service
-         */
-        function ExtensionRegistrar(app, customRegistrars, sorter, $log) {
-            // Track which extension categories have already been registered.
-            // Exceptions will be thrown if the same extension category is
-            // registered twice.
-            this.registeredCategories = {};
-            this.customRegistrars = customRegistrars || {};
-            this.app = app;
-            this.sorter = sorter;
-            this.$log = $log;
-        }
-
-        /**
-         * Register a group of resolved extensions with the Angular
-         * module managed by this registrar.
-         *
-         * For convenient chaining (particularly from the framework
-         * initializer's perspective), this returns the Angular
-         * module with which extensions were registered.
-         *
-         * @param {Object.<string, object[]>} extensionGroup an object
-         *        containing key-value pairs, where keys are extension
-         *        categories and values are arrays of resolved
-         *        extensions
-         * @returns {angular.Module} the application module with
-         *        which extensions were registered
-         */
-        ExtensionRegistrar.prototype.registerExtensions = function (extensionGroup) {
-            var registeredCategories = this.registeredCategories,
-                customRegistrars = this.customRegistrars,
-                app = this.app,
-                sorter = this.sorter,
-                $log = this.$log;
-
-            // Used to build unique identifiers for individual extensions,
-            // so that these can be registered separately with Angular
-            function identify(category, extension, index) {
-                var name = extension.key
-                    ? ("extension-" + extension.key + "#" + index)
-                    : ("extension#" + index);
-
-                return category + "[" + name + "]";
-            }
-
-            // Echo arguments; used to represent groups of non-built-in
-            // extensions as a single dependency.
-            function echo() {
-                return Array.prototype.slice.call(arguments);
-            }
-
-            // Always return a static value; used to represent plain
-            // metadata as a single dependency in Angular.
-            function staticFunction(value) {
-                return function () {
-                    return value;
-                };
-            }
-
-            // Utility function; create the second argument for Angular's
-            // .service service registration method (an array containing
-            // both dependencies and a factory method for the service.)
-            function makeServiceArgument(category, extension) {
-                var dependencies = extension.depends || [],
-                    factory = (typeof extension === 'function')
-                        ? new PartialConstructor(extension)
-                        : staticFunction(extension);
-
-                return dependencies.concat([factory]);
-            }
-
-            // Register extension arrays with Angular under an appropriately
-            // suffixed name, e.g. "types[]"
-            function registerExtensionArraysForCategory(category, names) {
-                var name = category + Constants.EXTENSION_SUFFIX;
-                app.factory(name, names.concat([echo]));
-            }
-
-            function registerExtensionsForCategory(category, extensions) {
-                var names = [];
-
-                function registerExtension(extension, index) {
-                    var name = identify(category, extension, index);
-
-                    // Track individual extension names as-registered
-                    names.push(name);
-
-                    app.factory(
-                        name,
-                        makeServiceArgument(category, extension)
-                    );
-                }
-
-                if (registeredCategories[category]) {
-                    $log.warn([
-                        "Tried to register extensions for category ",
-                        category,
-                        " more than once. Ignoring all but first set."
-                    ].join(""));
-                } else {
-                    // Register all extensions. Use custom registration
-                    // code for services, directives, etc; otherwise,
-                    // just register them under generic names.
-                    if (customRegistrars[category]) {
-                        customRegistrars[category](extensions);
-                    } else {
-                        extensions.forEach(registerExtension);
-                        registerExtensionArraysForCategory(category, names);
-                    }
-
-                    registeredCategories[category] = true;
-
-                    return true;
-                }
-            }
-
-            // Check if a declared dependency looks like a dependency on
-            // an extension category (e.g. is suffixed by [])
-            function isExtensionDependency(dependency) {
-                var index = dependency.indexOf(
-                    Constants.EXTENSION_SUFFIX,
-                    dependency.length - Constants.EXTENSION_SUFFIX.length
-                );
-
-                return index !== -1;
-            }
-
-            // Examine a group of resolved dependencies to determine
-            // which extension categories still need to be satisfied.
-            function findEmptyExtensionDependencies(extGroup) {
-                var needed = {},
-                    categories = Object.keys(extGroup),
-                    allExtensions = [];
-
-                // Build up an array of all extensions
-                categories.forEach(function (category) {
-                    allExtensions =
-                        allExtensions.concat(extGroup[category]);
-                });
-
-                // Track all extension dependencies exposed therefrom
-                allExtensions.forEach(function (extension) {
-                    (extension.depends || []).filter(
-                        isExtensionDependency
-                    ).forEach(function (dependency) {
-                        needed[dependency] = true;
-                    });
-                });
-
-                // Remove categories which have been provided
-                categories.forEach(function (category) {
-                    var dependency = category + Constants.EXTENSION_SUFFIX;
-                    delete needed[dependency];
-                });
-
-                return Object.keys(needed);
-            }
-
-            // Register any extension categories that are depended-upon but
-            // have not been declared anywhere; such dependencies are then
-            // satisfied by an empty array, instead of not at all.
-            function registerEmptyDependencies(extGroup) {
-                findEmptyExtensionDependencies(extGroup)
-                    .forEach(function (name) {
-                        $log.info("Registering empty extension category " + name);
-                        app.factory(name, [staticFunction([])]);
-                    });
-            }
-
-            // Announce we're entering a new phase
-            $log.info("Registering extensions...");
-
-            // Register all declared extensions by category
-            Object.keys(extensionGroup).forEach(function (category) {
-                registerExtensionsForCategory(
-                    category,
-                    sorter.sort(extensionGroup[category])
-                );
-            });
-
-            // Also handle categories which are needed but not declared
-            registerEmptyDependencies(extensionGroup);
-
-            // Return the application to which these extensions
-            // have been registered
-            return app;
-        };
-
-        return ExtensionRegistrar;
-    }
-);
diff --git a/platform/framework/src/register/ExtensionSorter.js b/platform/framework/src/register/ExtensionSorter.js
deleted file mode 100644
index a6ddad6be13..00000000000
--- a/platform/framework/src/register/ExtensionSorter.js
+++ /dev/null
@@ -1,118 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../Constants"],
-    function (Constants) {
-
-        /**
-         * Responsible for applying priority order to extensions in a
-         * given category. This will sort in reverse order of the numeric
-         * priority given for extensions in the `priority` priority (such
-         * that large values are registered first.) Extensions may also
-         * specify symbolic properties as strings (instead of numbers),
-         * which will be looked up from the table `Constants.PRIORITY_LEVELS`.
-         * @param $log Angular's logging service
-         * @memberof platform/framework
-         * @constructor
-         */
-        function ExtensionSorter($log) {
-            this.$log = $log;
-        }
-
-        /**
-         * Sort extensions according to priority.
-         *
-         * @param {object[]} extensions array of resolved extensions
-         * @returns {object[]} the same extensions, in priority order
-         */
-        ExtensionSorter.prototype.sort = function (extensions) {
-            var $log = this.$log;
-
-            // Handle unknown or malformed priorities specified by extensions
-            function unrecognizedPriority(extension) {
-                // Issue a warning
-                $log.warn([
-                    "Unrecognized priority '",
-                    (extension || {}).priority,
-                    "' specified for extension from ",
-                    ((extension || {}).bundle || {}).path,
-                    "; defaulting to ",
-                    Constants.DEFAULT_PRIORITY
-                ].join(''));
-
-                // Provide a return value (default priority) to make this
-                // useful in an expression.
-                return Constants.DEFAULT_PRIORITY;
-            }
-
-            function getPriority(extension) {
-                var priority =
-                    (extension || {}).priority || Constants.DEFAULT_PRIORITY;
-
-                // If it's a symbolic priority, look it up
-                if (typeof priority === 'string') {
-                    priority = Constants.PRIORITY_LEVELS[priority];
-                }
-
-                // Should be a number; otherwise, issue a warning and
-                // fall back to default priority level.
-                return (typeof priority === 'number')
-                    ? priority : unrecognizedPriority(extension);
-            }
-
-            // Attach a numeric priority to an extension; this is done in
-            // one pass outside of the comparator, mainly because getPriority
-            // may log warnings, and we only want this to happen once
-            // (instead of the many times that might occur during a sort.)
-            function prioritize(extension, index) {
-                return {
-                    // The extension itself, for later unwrapping
-                    extension: extension,
-                    // The index, to provide a stable sort (see compare)
-                    index: index,
-                    // The numeric priority of the extension
-                    priority: getPriority(extension)
-                };
-            }
-
-            // Unwrap the original extension
-            // (for use after ordering has been applied)
-            function deprioritize(prioritized) {
-                return prioritized.extension;
-            }
-
-            // Compare two prioritized extensions
-            function compare(a, b) {
-                // Reverse order by numeric priority; or, original order.
-                return (b.priority - a.priority) || (a.index - b.index);
-            }
-
-            return (extensions || [])
-                .map(prioritize)
-                .sort(compare)
-                .map(deprioritize);
-        };
-
-        return ExtensionSorter;
-    }
-);
diff --git a/platform/framework/src/register/PartialConstructor.js b/platform/framework/src/register/PartialConstructor.js
deleted file mode 100644
index e6fca5af84e..00000000000
--- a/platform/framework/src/register/PartialConstructor.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining PartialConstructor. Created by vwoeltje on 11/3/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * A partial constructor is used to instantiate objects in two
-         * stages:
-         *
-         * * First, dependencies injected from Angular
-         * * Second, arguments passed at run-time
-         *
-         * This allows extensions to accept both their Angular-injected
-         * dependencies and their per-instance attributes all in one
-         * constructor invocation. User code for these extensions then
-         * does not see the Angular dependency arguments; they may
-         * instantiate instances of these extensions by passing only
-         * those per-instance arguments.
-         *
-         * @memberof platform/framework
-         * @constructor
-         */
-        function PartialConstructor(Constructor) {
-
-            function OuterConstructor() { // Bind services
-                var dependencies = Array.prototype.slice.call(arguments);
-
-                function InnerConstructor() { // Bind everything else
-                    var other = Array.prototype.slice.call(arguments),
-                        instance = Object.create(Constructor.prototype);
-
-                    // Mimic "new" behavior with apply.
-                    instance = Constructor.apply(
-                        instance,
-                        dependencies.concat(other)
-                    ) || instance;
-
-                    return instance;
-                }
-
-                // Copy properties from original constructor
-                Object.keys(Constructor).forEach(function (k) {
-                    InnerConstructor[k] = Constructor[k];
-                });
-
-                return InnerConstructor;
-            }
-
-            return OuterConstructor;
-        }
-
-        return PartialConstructor;
-    }
-);
diff --git a/platform/framework/src/register/ServiceCompositor.js b/platform/framework/src/register/ServiceCompositor.js
deleted file mode 100644
index c634a856795..00000000000
--- a/platform/framework/src/register/ServiceCompositor.js
+++ /dev/null
@@ -1,257 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining ServiceCompositor. Created by vwoeltje on 11/5/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * Handles service compositing; that is, building up services
-         * from provider, aggregator, and decorator components.
-         *
-         * @memberof platform/framework
-         * @constructor
-         */
-        function ServiceCompositor(app, $log) {
-            this.latest = {};
-            this.providerLists = {}; // Track latest services registered
-            this.app = app;
-            this.$log = $log;
-        }
-
-        /**
-         * Register composite services with Angular. This will build
-         * up a dependency hierarchy between providers, aggregators,
-         * and/or decorators, such that a dependency upon the service
-         * type they expose shall be satisfied by their fully-wired
-         * whole.
-         *
-         * Note that this method assumes that a complete set of
-         * components shall be provided. Multiple calls to this
-         * method may not behave as expected.
-         *
-         * @param {Array} components extensions of category component
-         */
-        ServiceCompositor.prototype.registerCompositeServices = function (components) {
-            var latest = this.latest,
-                providerLists = this.providerLists,
-                app = this.app,
-                $log = this.$log;
-
-            // Log a warning; defaults to "no service provided by"
-            function warn(extension, category, message) {
-                var msg = message || "No service provided by";
-                $log.warn([
-                    msg,
-                    " ",
-                    category,
-                    " ",
-                    extension.key,
-                    " from bundle ",
-                    (extension.bundle || { path: "unknown bundle" }).path,
-                    "; skipping."
-                ].join(""));
-            }
-
-            //Log an info: defaults to "no service provide by"
-            function info(extension, category, message) {
-                var msg = message || "No service provided by";
-                $log.info([
-                    msg,
-                    " ",
-                    category,
-                    " ",
-                    extension.key,
-                    " from bundle ",
-                    (extension.bundle || { path: "unknown bundle" }).path,
-                    "; skipping."
-                ].join(""));
-            }
-
-            // Echo arguments; used to represent groups of non-built-in
-            // extensions as a single dependency.
-            function echoMany() {
-                return Array.prototype.slice.call(arguments);
-            }
-
-            // Echo arguments; used to represent groups of non-built-in
-            // extensions as a single dependency.
-            function echoSingle(value) {
-                return value;
-            }
-
-            // Generates utility functions to match types (one of
-            // provider, aggregator, or decorator) of component. Used
-            // to filter down to specific types, which are handled
-            // in order.
-            function hasType(type) {
-                return function (extension) {
-                    return extension.type === type;
-                };
-            }
-
-            // Make a unique name for a service component.
-            function makeName(category, service, index) {
-                return [
-                    service,
-                    "[",
-                    category,
-                    "#",
-                    index,
-                    "]"
-                ].join("");
-            }
-
-            // Register a specific provider instance with Angular, and
-            // record its name for subsequent stages.
-            function registerProvider(provider, index) {
-                var service = provider.provides,
-                    dependencies = provider.depends || [],
-                    name = makeName("provider", service, index);
-
-                if (!service) {
-                    return warn(provider, "provider");
-                }
-
-                providerLists[service] = providerLists[service] || [];
-                providerLists[service].push(name);
-
-                // This provider is the latest candidate for resolving
-                // the composite service.
-                latest[service] = name;
-
-                app.service(name, dependencies.concat([provider]));
-
-                $log.info("Registering provider for " + service);
-            }
-
-            // Register an array of providers as a single dependency;
-            // aggregators will then depend upon this to consume all
-            // aggregated providers as a single dependency.
-            function registerProviderSets() {
-                Object.keys(providerLists).forEach(function (service) {
-                    var name = makeName("provider", service, "*"),
-                        list = providerLists[service];
-
-                    $log.info([
-                        "Compositing",
-                        list.length,
-                        "providers for",
-                        service
-                    ].join(" "));
-
-                    app.service(name, list.concat([echoMany]));
-                });
-            }
-
-            // Registers an aggregator via Angular, including both
-            // its declared dependencies and the additional, implicit
-            // dependency upon the array of all providers.
-            function registerAggregator(aggregator, index) {
-                var service = aggregator.provides,
-                    dependencies = aggregator.depends || [],
-                    providerSetName = makeName("provider", service, "*"),
-                    name = makeName("aggregator", service, index);
-
-                if (!service) {
-                    return info(aggregator, "aggregator");
-                }
-
-                // Aggregators need other services to aggregate, otherwise they
-                // do nothing.
-                if (!latest[service]) {
-                    return info(
-                        aggregator,
-                        "aggregator",
-                        "No services to aggregate for"
-                    );
-                }
-
-                dependencies = dependencies.concat([providerSetName]);
-                latest[service] = name;
-
-                app.service(name, dependencies.concat([aggregator]));
-            }
-
-            // Registers a decorator via Angular, including its implicit
-            // dependency on the latest service component which has come
-            // before it.
-            function registerDecorator(decorator, index) {
-                var service = decorator.provides,
-                    dependencies = decorator.depends || [],
-                    name = makeName("decorator", service, index);
-
-                if (!service) {
-                    return warn(decorator, "decorator");
-                }
-
-                // Decorators need other services to decorate, otherwise they
-                // do nothing.
-                if (!latest[service]) {
-                    return warn(
-                        decorator,
-                        "decorator",
-                        "No services to decorate for"
-                    );
-                }
-
-                dependencies = dependencies.concat([latest[service]]);
-                latest[service] = name;
-
-                app.service(name, dependencies.concat([decorator]));
-            }
-
-            // Alias the latest services of various types back to the
-            // more general service declaration.
-            function registerLatest() {
-                Object.keys(latest).forEach(function (service) {
-                    app.service(service, [latest[service], echoSingle]);
-                });
-            }
-
-            // Register composite services in phases:
-            // * Register providers
-            // * Register aggregators (which use providers)
-            // * Register decorators (which use anything)
-            // Then, register the latest candidate as a plain service.
-            function registerComposites(providers, aggregators, decorators) {
-                providers.forEach(registerProvider);
-                registerProviderSets();
-                aggregators.forEach(registerAggregator);
-                decorators.forEach(registerDecorator);
-                registerLatest();
-            }
-
-            // Initial point of entry; split into three component types.
-            registerComposites(
-                components.filter(hasType("provider")),
-                components.filter(hasType("aggregator")),
-                components.filter(hasType("decorator"))
-            );
-        };
-
-        return ServiceCompositor;
-    }
-);
diff --git a/platform/framework/src/resolve/BundleResolver.js b/platform/framework/src/resolve/BundleResolver.js
deleted file mode 100644
index f04297baab2..00000000000
--- a/platform/framework/src/resolve/BundleResolver.js
+++ /dev/null
@@ -1,125 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining BundleResolver. Created by vwoeltje on 11/4/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * Responsible for the extension resolution phase of framework
-         * initialization. During this phase, any scripts implementing
-         * extensions provided by bundles are loaded.
-         *
-         * @memberof platform/framework
-         * @constructor
-         */
-        function BundleResolver(extensionResolver, $log) {
-            this.extensionResolver = extensionResolver;
-            this.$log = $log;
-        }
-
-        /**
-         * Resolve all extensions exposed by these bundles.
-         *
-         * @param {Bundle[]} bundles the bundles to resolve
-         * @returns {Promise.<Object.<string, object[]>>} an promise
-         *          for an object containing
-         *          key-value pairs, where keys are extension
-         *          categories and values are arrays of resolved
-         *          extensions belonging to those categories
-         */
-        BundleResolver.prototype.resolveBundles = function (bundles) {
-            var extensionResolver = this.extensionResolver,
-                $log = this.$log;
-
-            /*
-             * Merge resolved bundles (where each is expressed as an
-             * object containing key-value pairs, where keys are extension
-             * categories and values are arrays of resolved extensions)
-             * into one large object containing resolved extensions from
-             * all bundles (in the same form.)
-             *
-             * @param {Object.<string, object[]>|Array} resolvedBundles
-             * @returns {Object.<string, object[]>}
-             * @memberof platform/framework.BundleResolver#
-             */
-            function mergeResolvedBundles(resolvedBundles) {
-                var result = {};
-
-                resolvedBundles.forEach(function (resolved) {
-                    Object.keys(resolved).forEach(function (k) {
-                        result[k] = (result[k] || []).concat(resolved[k]);
-                    });
-                });
-
-                return result;
-            }
-
-            // Resolve a bundle; resolve all extensions, and return
-            // the resolved extensions in an object in the format described
-            // for mergeResolvedBundles above
-            function resolveBundle(bundle) {
-                var categories = bundle.getExtensionCategories(),
-                    result = {};
-
-                function resolveExtension(extension) {
-                    var category = extension.getCategory();
-
-                    function push(resolved) {
-                        result[category].push(resolved);
-                    }
-
-                    return extensionResolver.resolve(extension).then(push);
-                }
-
-                function resolveCategory(category) {
-                    result[category] = [];
-
-                    return Promise.all(
-                        bundle.getExtensions(category).map(resolveExtension)
-                    );
-                }
-
-                function giveResult() {
-                    return result;
-                }
-
-                // Log the large-scale task
-                $log.info(
-                    "Resolving extensions for bundle " + bundle.getLogName()
-                );
-
-                return Promise.all(categories.map(resolveCategory))
-                    .then(giveResult);
-            }
-
-            // Then, resolve all extension implementations.
-            return Promise.all(bundles.map(resolveBundle))
-                .then(mergeResolvedBundles);
-        };
-
-        return BundleResolver;
-    }
-);
diff --git a/platform/framework/src/resolve/ExtensionResolver.js b/platform/framework/src/resolve/ExtensionResolver.js
deleted file mode 100644
index 208f5186854..00000000000
--- a/platform/framework/src/resolve/ExtensionResolver.js
+++ /dev/null
@@ -1,147 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining ExtensionResolver. Created by vwoeltje on 11/3/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * An ExtensionResolver is responsible for loading any implementation
-         * modules associated with specific extensions.
-         *
-         * @param {ImplementationLoader} loader used to load implementations
-         * @param {*} $log Angular's logging service
-         * @memberof platform/framework
-         * @constructor
-         */
-        function ExtensionResolver(loader, $log) {
-            this.loader = loader;
-            this.$log = $log;
-        }
-
-        /**
-         * Resolve the provided extension; this will give a promise
-         * for the extension's implementation, if one has been
-         * specified, or for the plain definition of the extension
-         * otherwise. The plain definition will also be given
-         * if the implementation fails to load for some reason.
-         *
-         * All key-value pairs from the extension definition
-         * will additionally be attached to any loaded implementation.
-         *
-         * @param {Extension} extension the extension to resolve
-         * @returns {Promise} a promise for the resolved extension
-         */
-        ExtensionResolver.prototype.resolve = function (extension) {
-            var loader = this.loader,
-                $log = this.$log;
-
-            function loadImplementation(ext) {
-                var implPromise = ext.hasImplementationValue()
-                        ? Promise.resolve(ext.getImplementationValue())
-                        : loader.load(ext.getImplementationPath()),
-                    definition = ext.getDefinition();
-
-                // Wrap a constructor function (to avoid modifying the original)
-                function constructorFor(impl) {
-                    function Constructor() {
-                        return impl.apply(this, arguments);
-                    }
-
-                    Constructor.prototype = impl.prototype;
-
-                    return Constructor;
-                }
-
-                // Attach values from the object definition to the
-                // loaded implementation.
-                function attachDefinition(impl) {
-                    var result = (typeof impl === 'function')
-                        ? constructorFor(impl)
-                        : Object.create(impl);
-
-                    // Copy over static properties
-                    Object.keys(impl).forEach(function (k) {
-                        result[k] = impl[k];
-                    });
-
-                    // Copy over definition
-                    Object.keys(definition).forEach(function (k) {
-                        if (result[k] === undefined) {
-                            result[k] = definition[k];
-                        }
-                    });
-                    result.definition = definition;
-
-                    // Log that this load was successful
-                    $log.info("Resolved " + ext.getLogName());
-
-                    return result;
-                }
-
-                // Log any errors in loading the implementation, and
-                // return the plain extension definition instead.
-                function handleError(err) {
-                    // Build up a log message from parts
-                    var message = [
-                        "Could not load implementation for extension ",
-                        ext.getLogName(),
-                        " due to ",
-                        err.message
-                    ].join("");
-
-                    // Log that the extension was not loaded
-                    $log.warn(message);
-
-                    return ext.getDefinition();
-                }
-
-                if (!ext.hasImplementationValue()) {
-                    // Log that loading has begun
-                    $log.info([
-                        "Loading implementation ",
-                        ext.getImplementationPath(),
-                        " for extension ",
-                        ext.getLogName()
-                    ].join(""));
-                }
-
-                return implPromise.then(attachDefinition, handleError);
-            }
-
-            // Log that loading has begun
-            $log.info([
-                "Resolving extension ",
-                extension.getLogName()
-            ].join(""));
-
-            return extension.hasImplementation()
-                ? loadImplementation(extension)
-                : Promise.resolve(extension.getDefinition());
-        };
-
-        return ExtensionResolver;
-    }
-);
diff --git a/platform/framework/src/resolve/ImplementationLoader.js b/platform/framework/src/resolve/ImplementationLoader.js
deleted file mode 100644
index a4362634c85..00000000000
--- a/platform/framework/src/resolve/ImplementationLoader.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining ImplementationLoader. Created by vwoeltje on 11/3/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * Responsible for loading extension implementations
-         * (AMD modules.) Acts as a wrapper around RequireJS to
-         * provide a promise-like API.
-         * @memberof platform/framework
-         * @constructor
-         * @param {*} require RequireJS, or an object with similar API
-         * @param {*} $log Angular's logging service
-         */
-        function ImplementationLoader(require) {
-            this.require = require;
-        }
-
-        /**
-         * Load an extension's implementation; or, equivalently,
-         * load an AMD module. This is fundamentally similar
-         * to a call to RequireJS, except that the result is
-         * wrapped in a promise. The promise will be fulfilled
-         * with the loaded module, or rejected with the error
-         * reported by Require.
-         *
-         * @param {string} path the path to the module to load
-         * @returns {Promise} a promise for the specified module.
-         */
-        ImplementationLoader.prototype.load = function loadModule(path) {
-            var require = this.require;
-
-            return new Promise(function (fulfill, reject) {
-                require([path], fulfill, reject);
-            });
-        };
-
-        return ImplementationLoader;
-    }
-);
diff --git a/platform/framework/test/FrameworkInitializerSpec.js b/platform/framework/test/FrameworkInitializerSpec.js
deleted file mode 100644
index 3f4b6a06c59..00000000000
--- a/platform/framework/test/FrameworkInitializerSpec.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * FrameworkInitializerSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../src/FrameworkInitializer"],
-    function (FrameworkInitializer) {
-
-        describe("The framework initializer", function () {
-            var initializer;
-
-            function appender(name) {
-                return function (value) {
-                    return Promise.resolve(value.concat([name]));
-                };
-            }
-
-            beforeEach(function () {
-                initializer = new FrameworkInitializer(
-                    { loadBundles: appender("loader") },
-                    { resolveBundles: appender("resolver") },
-                    { registerExtensions: appender("registrar") },
-                    { bootstrap: appender("bootstrapper")}
-                );
-            });
-
-            // Really just delegates work, can only verify the
-            // order of calls.
-            it("calls injected stages in order", function () {
-                return initializer.runApplication([]).then(function (result) {
-                    expect(result).toEqual(
-                        ["loader", "resolver", "registrar", "bootstrapper"]
-                    );
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/framework/test/LogLevelSpec.js b/platform/framework/test/LogLevelSpec.js
deleted file mode 100644
index ef0086233ee..00000000000
--- a/platform/framework/test/LogLevelSpec.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['../src/LogLevel'],
-    function (LogLevel) {
-
-        var LOG_METHODS = [
-            'error',
-            'warn',
-            'info',
-            'log',
-            'debug'
-        ];
-
-        describe("The logging level handler", function () {
-            var mockLog,
-                mockApp,
-                mockDelegate,
-                mockMethods;
-
-            function logAll(v) {
-                LOG_METHODS.forEach(function (m) {
-                    mockLog[m](v);
-                    mockDelegate[m](v);
-                });
-            }
-
-            function expectCalls(calls, v) {
-                LOG_METHODS.forEach(function (m) {
-                    if (calls.indexOf(m) > -1) {
-                        expect(mockMethods[m]).toHaveBeenCalledWith(v);
-                    } else {
-                        expect(mockMethods[m]).not.toHaveBeenCalledWith(v);
-                    }
-                });
-            }
-
-            beforeEach(function () {
-                mockMethods = jasmine.createSpyObj("levels", LOG_METHODS);
-                mockLog = jasmine.createSpyObj('$log', LOG_METHODS);
-                mockApp = jasmine.createSpyObj('app', ['config', 'decorator']);
-                mockDelegate = jasmine.createSpyObj('$delegate', LOG_METHODS);
-
-                LOG_METHODS.forEach(function (m) {
-                    mockLog[m].and.callFake(mockMethods[m]);
-                    mockDelegate[m].and.callFake(mockMethods[m]);
-                });
-
-                mockApp.decorator.and.callFake(function (key, decoration) {
-                    // We only expect $log to be decorated
-                    if (key === '$log' && decoration[0] === '$delegate') {
-                        decoration[1](mockDelegate);
-                    }
-                });
-            });
-
-            it("defaults to 'warn' level", function () {
-                new LogLevel("garbage").configure(mockApp, mockLog);
-                logAll("test");
-                expectCalls(['error', 'warn'], 'test');
-            });
-
-            LOG_METHODS.forEach(function (m, i) {
-                it("supports log level '" + m + "'", function () {
-                    // Note: This is sensitive to ordering of LOG_METHODS,
-                    // which needs to be highest-level-first above.
-                    var expected = LOG_METHODS.slice(0, i + 1),
-                        message = "test " + m;
-
-                    new LogLevel(m).configure(mockApp, mockLog);
-                    logAll(message);
-                    expectCalls(expected, message);
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/framework/test/bootstrap/ApplicationBootstrapperSpec.js b/platform/framework/test/bootstrap/ApplicationBootstrapperSpec.js
deleted file mode 100644
index 482d57fab02..00000000000
--- a/platform/framework/test/bootstrap/ApplicationBootstrapperSpec.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * ApplicationBootstrapperSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/bootstrap/ApplicationBootstrapper"],
-    function (ApplicationBootstrapper) {
-
-        describe("The application bootstrapper", function () {
-            // Test support variables
-            var bootstrapper,
-                captured,
-                mockAngular,
-                mockDocument,
-                mockLog,
-                mockApp;
-
-            // Used to capture arguments to mocks
-            function capture() {
-                var names = Array.prototype.slice.apply(arguments, []);
-
-                return function () {
-                    var values = arguments;
-                    names.forEach(function (name, index) {
-                        captured[name] = values[index];
-                    });
-                };
-            }
-
-            // Set up the mocks before each run
-            beforeEach(function () {
-                captured = {};
-
-                mockAngular = {
-                    element: function (selector) {
-                        captured.selector = selector;
-
-                        return { ready: capture("callback") };
-                    },
-                    bootstrap: capture("element", "appNames")
-                };
-
-                mockDocument = "I am just a value.";
-
-                mockLog = { info: capture("info") };
-
-                mockApp = { name: "MockApp" };
-
-                bootstrapper = new ApplicationBootstrapper(
-                    mockAngular,
-                    mockDocument,
-                    mockLog
-                );
-
-                bootstrapper.bootstrap(mockApp);
-            });
-
-            // The tests.
-
-            it("waits for the provided document element to be ready", function () {
-                // Should have provided Angular a selector...
-                expect(captured.selector).toBe(mockDocument);
-                // ...and called ready on the response.
-                expect(captured.callback).toBeDefined();
-            });
-
-            it("issues a bootstrap call once ready", function () {
-                // Verify precondition; bootstrap not called
-                expect(captured.element).toBeUndefined();
-                expect(captured.appNames).toBeUndefined();
-
-                // Call the "ready" function
-                captured.callback();
-
-                // Verify that bootstrap was called
-                expect(captured.element).toBe(mockDocument);
-                expect(captured.appNames).toEqual([mockApp.name]);
-            });
-
-            it("logs that the bootstrap phase has been reached", function () {
-                expect(captured.info).toBeDefined();
-                expect(typeof captured.info).toEqual('string');
-            });
-
-        });
-    }
-);
diff --git a/platform/framework/test/load/BundleLoaderSpec.js b/platform/framework/test/load/BundleLoaderSpec.js
deleted file mode 100644
index a85974b35f9..00000000000
--- a/platform/framework/test/load/BundleLoaderSpec.js
+++ /dev/null
@@ -1,122 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * BundleLoaderSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/load/BundleLoader"],
-    function (BundleLoader) {
-
-        describe("The bundle loader", function () {
-            var loader,
-                mockHttp,
-                mockLog,
-                mockRegistry,
-                testBundles;
-
-            beforeEach(function () {
-                testBundles = {
-                    "bundles.json": ["bundle/a", "bundle/b"],
-                    "bundle/a/bundle.json": {"someValue": 6},
-                    "bundle/b/bundle.json": {"someValue": 7}
-                };
-
-                mockHttp = jasmine.createSpyObj("$http", ["get"]);
-                mockLog = jasmine.createSpyObj("$log", ["error", "warn", "info", "debug"]);
-                mockRegistry = jasmine.createSpyObj(
-                    'legacyRegistry',
-                    ['list', 'contains', 'get']
-                );
-                mockRegistry.list.and.returnValue([]);
-                mockRegistry.contains.and.returnValue(false);
-                loader = new BundleLoader(mockHttp, mockLog, mockRegistry);
-            });
-
-            it("accepts a JSON file name and loads all bundles", function () {
-                // Set up; return named bundles
-                mockHttp.get.and.returnValue(Promise.resolve({ data: [] }));
-
-                // Call load bundles
-                return loader.loadBundles("test-filename.json").then(function (bundles) {
-                    // Should have loaded the file via $http
-                    expect(mockHttp.get).toHaveBeenCalledWith("test-filename.json");
-
-                    // Should have gotten an empty bundle list
-                    expect(bundles).toEqual([]);
-                });
-            });
-
-            it("accepts a list of bundle paths", function () {
-                // Set up; return named bundles
-                mockHttp.get.and.callFake(function (name) {
-                    return Promise.resolve({data: testBundles[name]});
-                });
-
-                // Call load bundles
-                return loader.loadBundles(["bundle/a", "bundle/b"]).then(function (bundles) {
-                    // Should have gotten back two bundles
-                    expect(bundles.length).toEqual(2);
-
-                    // They should have the values we expect; don't care about order,
-                    // some map/reduce the summation.
-                    expect(bundles.map(function (call) {
-                        return call.getDefinition().someValue;
-                    }).reduce(function (a, b) {
-                        return a + b;
-                    }, 0)).toEqual(13);
-                });
-            });
-
-            it("warns about, then ignores, missing bundle declarations", function () {
-                // File-not-found
-                mockHttp.get.and.returnValue(Promise.reject(new Error("test error")));
-
-                // Try and load
-                return loader.loadBundles(["some/bundle"]).then(function (bundles) {
-                    // Should have gotten zero bundles
-                    expect(bundles.length).toEqual(0);
-
-                    // They should have the values we expect; don't care about order,
-                    // some map/reduce the summation.
-                    expect(mockLog.warn).toHaveBeenCalled();
-                });
-            });
-
-            it("warns about, then ignores, malformed bundle declarations", function () {
-                // File-not-found
-                mockHttp.get.and.returnValue(Promise.resolve(["I am not a valid bundle."]));
-
-                // Try and load
-                return loader.loadBundles(["some/bundle"]).then(function (bundles) {
-                    // Should have gotten zero bundle
-                    expect(bundles.length).toEqual(0);
-
-                    // They should have the values we expect; don't care about order,
-                    // some map/reduce the summation.
-                    expect(mockLog.warn).toHaveBeenCalled();
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/framework/test/load/BundleSpec.js b/platform/framework/test/load/BundleSpec.js
deleted file mode 100644
index f87bfe54f62..00000000000
--- a/platform/framework/test/load/BundleSpec.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * BundleSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/load/Bundle", "../../src/Constants"],
-    function (Bundle, Constants) { // Verify against constants, too
-
-        describe("A bundle", function () {
-            var PATH = "some/path",
-                KEY = "someKey";
-
-            it("reports its path", function () {
-                expect(new Bundle(PATH, {}).getPath()).toEqual(PATH);
-            });
-
-            it("reports its source path", function () {
-                expect(new Bundle(PATH, { "sources": "test-src" }).getSourcePath()).toEqual(
-                    PATH + Constants.SEPARATOR + "test-src"
-                );
-            });
-
-            it("reports the default source path if none is configured", function () {
-                expect(new Bundle(PATH, {}).getSourcePath()).toEqual(
-                    PATH + Constants.SEPARATOR + Constants.DEFAULT_BUNDLE.sources
-                );
-            });
-
-            it("reports its resource path", function () {
-                expect(new Bundle(PATH, { "resources": "test-res" }).getResourcePath()).toEqual(
-                    PATH + Constants.SEPARATOR + "test-res"
-                );
-            });
-
-            it("reports the default resource path if none is configured", function () {
-                expect(new Bundle(PATH, {}).getResourcePath()).toEqual(
-                    PATH + Constants.SEPARATOR + Constants.DEFAULT_BUNDLE.resources
-                );
-            });
-
-            it("has a log-friendly name for the bundle which includes its key and path", function () {
-                // Use indexof to look for the bundle's key
-                var logName = new Bundle(PATH, { key: KEY }).getLogName();
-                expect(logName.indexOf(KEY)).not.toEqual(-1);
-                expect(logName.indexOf(PATH)).not.toEqual(-1);
-            });
-
-            it("reports all declared extension categories", function () {
-                var bundle = new Bundle(PATH, {
-                    extensions: {
-                        things: [],
-                        tests: [],
-                        foos: []
-                    }
-                });
-
-                expect(bundle.getExtensionCategories().sort()).toEqual(
-                    ["foos", "tests", "things"]
-                );
-            });
-
-            it("reports all extensions that have been declared", function () {
-                var bundle = new Bundle(PATH, {
-                    extensions: { things: [{}, {}, {}] }
-                });
-                expect(bundle.getExtensions("things").length).toEqual(3);
-            });
-
-            it("reports an empty list for extensions that have not been declared", function () {
-                var bundle = new Bundle(PATH, {
-                    extensions: { things: [{}, {}, {}] }
-                });
-                expect(bundle.getExtensions("stuffs").length).toEqual(0);
-            });
-        });
-    }
-);
diff --git a/platform/framework/test/load/ExtensionSpec.js b/platform/framework/test/load/ExtensionSpec.js
deleted file mode 100644
index 04e500d42f8..00000000000
--- a/platform/framework/test/load/ExtensionSpec.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * ExtensionSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/load/Extension", "../../src/load/Bundle"],
-    function (Extension, Bundle) {
-
-        describe("An extension", function () {
-            var bundle;
-
-            beforeEach(function () {
-                bundle = new Bundle("test/bundle", {});
-            });
-
-            it("reports its key", function () {
-                expect(new Extension(bundle, "tests", { key: "testKey"}).getKey())
-                    .toEqual("testKey");
-            });
-
-            it("reports some key, even if non is defined", function () {
-                expect(new Extension(bundle, "tests", {}).getKey()).toBeDefined();
-            });
-
-            it("allows retrieval of its declaring bundle", function () {
-                expect(new Extension(bundle, "tests", {}).getBundle()).toBe(bundle);
-            });
-
-            it("reports its category", function () {
-                expect(new Extension(bundle, "tests", {}).getCategory())
-                    .toEqual("tests");
-                expect(new Extension(bundle, "otherThings", {}).getCategory())
-                    .toEqual("otherThings");
-            });
-
-            it("provides a check to see if an implementation is associated with the extension", function () {
-                expect(new Extension(bundle, "tests", {}).hasImplementation())
-                    .toBeFalsy();
-                expect(new Extension(bundle, "tests", { implementation: "Something.js" }).hasImplementation())
-                    .toBeTruthy();
-            });
-
-            it("provides a full path to an implementation, if present", function () {
-                expect(new Extension(bundle, "tests", { implementation: "Something.js" }).getImplementationPath())
-                    .toEqual("test/bundle/src/Something.js");
-            });
-
-            it("does not define an implementation path if there is no implementation", function () {
-                expect(new Extension(bundle, "tests", {}).getImplementationPath())
-                    .toBeUndefined();
-            });
-
-            it("provides a log-friendly name which contains the extension key", function () {
-                var logName =
-                        new Extension(bundle, "tests", { key: "testKey"}).getLogName();
-                expect(logName.indexOf("testKey")).not.toEqual(-1);
-            });
-
-            it("allows its definition to be retrieved", function () {
-                var definition = {
-                        key: "someKey",
-                        implementation: "SomeImplementation.js"
-                    },
-                    reported = new Extension(bundle, "tests", definition).getDefinition();
-
-                // Bundle is added, so we can't do a normal toEqual; check that
-                // all keys are still there, though.
-                Object.keys(definition).forEach(function (k) {
-                    expect(reported[k]).toEqual(definition[k]);
-                });
-            });
-
-            it("includes the bundle in its definition", function () {
-                // Bundle is needed by some registrars in the the registration phase,
-                // so make sure it gets attached to the definition.
-                var definition = {
-                        key: "someKey",
-                        implementation: "SomeImplementation.js"
-                    },
-                    reported = new Extension(bundle, "tests", definition).getDefinition();
-
-                expect(reported.bundle).toEqual(bundle.getDefinition());
-            });
-        });
-    }
-);
diff --git a/platform/framework/test/register/CustomRegistrarsSpec.js b/platform/framework/test/register/CustomRegistrarsSpec.js
deleted file mode 100644
index ef3341a6d03..00000000000
--- a/platform/framework/test/register/CustomRegistrarsSpec.js
+++ /dev/null
@@ -1,198 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * CustomRegistrarsSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/register/CustomRegistrars"],
-    function (CustomRegistrars) {
-
-        describe("Custom registrars", function () {
-            var mockLog,
-                mockApp,
-                customRegistrars;
-
-            // Set up mock test dependencies
-            beforeEach(function () {
-                mockApp = jasmine.createSpyObj("app", [
-                    "controller",
-                    "directive",
-                    "service",
-                    "constant",
-                    "config",
-                    "run"
-                ]);
-
-                mockLog = jasmine.createSpyObj("$log", [
-                    "error",
-                    "warn",
-                    "info",
-                    "debug"
-                ]);
-
-                customRegistrars = new CustomRegistrars(mockApp, mockLog);
-            });
-
-            it("has custom registrars for Angular built-ins", function () {
-                expect(customRegistrars.directives).toBeTruthy();
-                expect(customRegistrars.controllers).toBeTruthy();
-                expect(customRegistrars.services).toBeTruthy();
-                expect(customRegistrars.routes).toBeTruthy();
-                expect(customRegistrars.constants).toBeTruthy();
-                expect(customRegistrars.runs).toBeTruthy();
-            });
-
-            it("invokes built-in functions on the app", function () {
-                // Verify preconditions, invoke, expect to have been called
-                expect(mockApp.directive.calls.count()).toEqual(0);
-                customRegistrars.directives([{ key: "a" }, { key: "b" }, { key: "c" }]);
-                expect(mockApp.directive.calls.count()).toEqual(3);
-
-                expect(mockApp.controller.calls.count()).toEqual(0);
-                customRegistrars.controllers([{ key: "a" }, { key: "b" }, { key: "c" }]);
-                expect(mockApp.controller.calls.count()).toEqual(3);
-
-                expect(mockApp.service.calls.count()).toEqual(0);
-                customRegistrars.services([{ key: "a" }, { key: "b" }, { key: "c" }]);
-                expect(mockApp.service.calls.count()).toEqual(3);
-
-                expect(mockApp.constant.calls.count()).toEqual(0);
-                customRegistrars.constants([{
-                    key: "a",
-                    value: "b"
-                }, {
-                    key: "b",
-                    value: "c"
-                }, {
-                    key: "c",
-                    value: "d"
-                }]);
-                expect(mockApp.constant.calls.count()).toEqual(3);
-
-                expect(mockApp.run.calls.count()).toEqual(0);
-                customRegistrars.runs([jasmine.createSpy("a"), jasmine.createSpy("a"), jasmine.createSpy("a")]);
-                expect(mockApp.run.calls.count()).toEqual(3);
-
-            });
-
-            it("warns when keys are not defined, then skips", function () {
-                // Verify preconditions, invoke, expect to have been called
-                expect(mockApp.directive.calls.count()).toEqual(0);
-                customRegistrars.directives([{ key: "a" }, { }, { key: "c" }]);
-                expect(mockApp.directive.calls.count()).toEqual(2);
-                expect(mockLog.warn.calls.count()).toEqual(1);
-
-                expect(mockApp.controller.calls.count()).toEqual(0);
-                customRegistrars.controllers([{ }, { }, { key: "c" }]);
-                expect(mockApp.controller.calls.count()).toEqual(1);
-                expect(mockLog.warn.calls.count()).toEqual(3);
-
-                expect(mockApp.service.calls.count()).toEqual(0);
-                customRegistrars.services([{ }, { }, { }]);
-                expect(mockApp.service.calls.count()).toEqual(0);
-                expect(mockLog.warn.calls.count()).toEqual(6);
-
-                expect(mockApp.constant.calls.count()).toEqual(0);
-                customRegistrars.constants([{ }, { }, { }]);
-                expect(mockApp.constant.calls.count()).toEqual(0);
-                expect(mockLog.warn.calls.count()).toEqual(9);
-
-                // Notably, keys are not needed for run calls
-            });
-
-            it("does not re-register duplicate keys", function () {
-                // Verify preconditions, invoke, expect to have been called
-                expect(mockApp.directive.calls.count()).toEqual(0);
-                customRegistrars.directives([{ key: "a" }, { key: "a" }]);
-                expect(mockApp.directive.calls.count()).toEqual(1);
-
-                expect(mockApp.controller.calls.count()).toEqual(0);
-                customRegistrars.controllers([{ key: "c" }, { key: "c" }, { key: "c" }]);
-                expect(mockApp.controller.calls.count()).toEqual(1);
-
-                expect(mockApp.service.calls.count()).toEqual(0);
-                customRegistrars.services([{ key: "b" }, { key: "b" }]);
-                expect(mockApp.service.calls.count()).toEqual(1);
-
-                // None of this should have warned, this is all
-                // nominal behavior
-                expect(mockLog.warn.calls.count()).toEqual(0);
-            });
-
-            it("allows routes to be registered", function () {
-                var mockRouteProvider = jasmine.createSpyObj(
-                        "$routeProvider",
-                        ["when", "otherwise"]
-                    ),
-                    bundle = {
-                        path: "test/bundle",
-                        resources: "res"
-                    },
-                    routes = [
-                        {
-                            when: "foo",
-                            templateUrl: "templates/test.html",
-                            bundle: bundle
-                        },
-                        {
-                            templateUrl: "templates/default.html",
-                            bundle: bundle
-                        }
-                    ];
-
-                customRegistrars.routes(routes);
-
-                // Give it the route provider based on its config call
-                mockApp.config.calls.all().forEach(function (call) {
-                    // Invoke the provided callback
-                    call.args[0][1](mockRouteProvider);
-                });
-
-                // The "when" clause should have been mapped to the when method...
-                expect(mockRouteProvider.when).toHaveBeenCalled();
-                expect(mockRouteProvider.when.calls.mostRecent().args[0]).toEqual("foo");
-                expect(mockRouteProvider.when.calls.mostRecent().args[1].templateUrl)
-                    .toEqual("test/bundle/res/templates/test.html");
-
-                // ...while the other should have been treated as a default route
-                expect(mockRouteProvider.otherwise).toHaveBeenCalled();
-                expect(mockRouteProvider.otherwise.calls.mostRecent().args[0].templateUrl)
-                    .toEqual("test/bundle/res/templates/default.html");
-            });
-
-            it("accepts components for service compositing", function () {
-                // Most relevant code will be exercised in service compositor spec
-                expect(customRegistrars.components).toBeTruthy();
-                customRegistrars.components([]);
-            });
-
-            it("warns if no implementation is provided for runs", function () {
-                // Verify precondition
-                expect(mockLog.warn).not.toHaveBeenCalled();
-                customRegistrars.runs([{ something: "that is not a function"}]);
-                expect(mockLog.warn).toHaveBeenCalledWith(jasmine.any(String));
-                expect(mockApp.run).not.toHaveBeenCalled();
-            });
-        });
-    }
-);
diff --git a/platform/framework/test/register/ExtensionRegistrarSpec.js b/platform/framework/test/register/ExtensionRegistrarSpec.js
deleted file mode 100644
index 68d8b9ccdb5..00000000000
--- a/platform/framework/test/register/ExtensionRegistrarSpec.js
+++ /dev/null
@@ -1,119 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * ExtensionRegistrarSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/register/ExtensionRegistrar"],
-    function (ExtensionRegistrar) {
-
-        describe("The extension registrar", function () {
-            var mockApp,
-                mockLog,
-                mockSorter,
-                customRegistrars,
-                registrar;
-
-            beforeEach(function () {
-                mockApp = jasmine.createSpyObj("app", ["factory"]);
-                mockLog = jasmine.createSpyObj("$log", ["error", "warn", "debug", "info"]);
-                mockSorter = jasmine.createSpyObj("sorter", ["sort"]);
-                customRegistrars = {};
-
-                mockSorter.sort.and.callFake(function (v) {
-                    return v;
-                });
-
-                registrar = new ExtensionRegistrar(
-                    mockApp,
-                    customRegistrars,
-                    mockSorter,
-                    mockLog
-                );
-            });
-
-            it("registers extensions using the factory", function () {
-                registrar.registerExtensions({ things: [{}] });
-                expect(mockApp.factory).toHaveBeenCalled();
-            });
-
-            it("registers extensions with square brackets, as arrays", function () {
-                var callbacks = {};
-                mockApp.factory.and.callFake(function (name, value) {
-                    callbacks[name] = value[value.length - 1];
-                });
-                registrar.registerExtensions({ things: [{}] });
-                expect(callbacks["things[]"]).toBeDefined();
-
-                // Verify dependency echo behavior
-                expect(callbacks["things[]"]("a", "b", "c")).toEqual(["a", "b", "c"]);
-            });
-
-            it("warns if multiple registrations are made for the same category of extension", function () {
-                registrar.registerExtensions({ things: [{}] });
-                expect(mockLog.warn).not.toHaveBeenCalled();
-                registrar.registerExtensions({ things: [{}] });
-                expect(mockLog.warn).toHaveBeenCalled();
-            });
-
-            it("registers empty extension categories when they are needed", function () {
-                var lengths = {};
-                mockApp.factory.and.callFake(function (name, value) {
-                    lengths[name] = value.length;
-                });
-                // Nobody has registered tests[], but it looks like an extension dependency,
-                // so register it as an empty array.
-                registrar.registerExtensions({ things: [{ depends: ["tests[]", "other"] }] });
-                expect(lengths["tests[]"]).toEqual(1);
-                expect(lengths.other).toBeUndefined();
-            });
-
-            it("invokes custom registrars (not app.factory) when available", function () {
-                customRegistrars.things = jasmine.createSpy("things");
-                registrar.registerExtensions({ things: [{}] });
-                expect(mockApp.factory).not.toHaveBeenCalled();
-                expect(customRegistrars.things).toHaveBeenCalled();
-            });
-
-            it("sorts extensions before registering", function () {
-                // Some extension definitions to sort
-                var a = { a: 'a' }, b = { b: 'b' }, c = { c: 'c' };
-
-                // Fake sorting; just reverse the array
-                mockSorter.sort.and.callFake(function (v) {
-                    return v.reverse();
-                });
-
-                // Register the extensions
-                registrar.registerExtensions({ things: [a, b, c] });
-
-                // Verify registration interactions occurred in reverse-order
-                [c, b, a].forEach(function (extension, index) {
-                    expect(mockApp.factory.calls.all()[index].args[1][0]())
-                        .toEqual(extension);
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/framework/test/register/ExtensionSorterSpec.js b/platform/framework/test/register/ExtensionSorterSpec.js
deleted file mode 100644
index a6de3ebec61..00000000000
--- a/platform/framework/test/register/ExtensionSorterSpec.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/register/ExtensionSorter"],
-    function (ExtensionSorter) {
-
-        describe("The extension sorter", function () {
-            var mockLog,
-                sorter;
-
-            beforeEach(function () {
-                mockLog = jasmine.createSpyObj(
-                    "$log",
-                    ["error", "warn", "debug", "info"]
-                );
-
-                sorter = new ExtensionSorter(mockLog);
-            });
-
-            it("sorts extensions in priority order", function () {
-                var a = { priority: 10 },
-                    b = {},
-                    c = { priority: 'mandatory' }; // Should be +Inf
-                expect(sorter.sort([a, b, c])).toEqual([c, a, b]);
-            });
-
-            it("warns about unrecognized priorities", function () {
-                var a = { priority: 10 },
-                    b = {},
-                    c = { priority: 'mandatory' }, // Should be +Inf
-                    d = { priority: 'GARBAGE-TEXT' },
-                    e = { priority: { mal: "formed"} },
-                    f = { priority: 3 };
-
-                // Sorting should use default order (note we assume
-                // a stable sort here as well)
-                expect(sorter.sort(
-                    [a, b, c, d, e, f]
-                )).toEqual(
-                    [c, a, f, b, d, e]
-                );
-
-                // Should have been warned exactly twice (for d & e)
-                expect(mockLog.warn.calls.count()).toEqual(2);
-            });
-
-        });
-    }
-);
diff --git a/platform/framework/test/register/PartialConstructorSpec.js b/platform/framework/test/register/PartialConstructorSpec.js
deleted file mode 100644
index 4871aefcd98..00000000000
--- a/platform/framework/test/register/PartialConstructorSpec.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * PartialConstructorSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/register/PartialConstructor"],
-    function (PartialConstructor) {
-
-        describe("A partial constructor", function () {
-            var result,
-                PartializedConstructor;
-
-            function RegularConstructor(a, b, c, d) {
-                result = {
-                    a: a,
-                    b: b,
-                    c: c,
-                    d: d
-                };
-
-                return result;
-            }
-
-            function ThisStyleConstructor(x, y, z) {
-                this.message = [x, y, z].join(" ");
-            }
-
-            RegularConstructor.someProperty = "test property";
-
-            beforeEach(function () {
-                result = undefined;
-                PartializedConstructor = new PartialConstructor(RegularConstructor);
-            });
-
-            it("splits a constructor call into two stages", function () {
-                var RemainingConstructor = new PartializedConstructor("test"),
-                    instance;
-                // first call should not have hit constructor
-                expect(result).toBeUndefined();
-
-                // Call again
-                instance = new RemainingConstructor(1, 2, 3);
-                expect(result).toEqual({
-                    a: "test",
-                    b: 1,
-                    c: 2,
-                    d: 3
-                });
-
-                // Should have returned the constructor's value
-                expect(instance).toEqual(result);
-            });
-
-            it("handles this-style constructors", function () {
-                var Partialized = new PartialConstructor(ThisStyleConstructor),
-                    Remaining = new Partialized("this"),
-                    instance = new Remaining("is", "correct");
-
-                // We should have everything we put in "this", and we
-                // should still pass an instanceof test.g
-                expect(instance.message).toEqual("this is correct");
-                expect(instance).toEqual(new ThisStyleConstructor("this", "is", "correct"));
-                expect(instance instanceof ThisStyleConstructor).toBeTruthy();
-            });
-
-            it("retains static properties after partialization", function () {
-                // This string should appear after invoking the partialized
-                // constructor, such that the resulting inner constructor
-                // exposes these as if we were looking at the original
-                // RegularConstructor.
-                expect(new PartializedConstructor().someProperty).toEqual("test property");
-            });
-
-        });
-    }
-);
diff --git a/platform/framework/test/register/ServiceCompositorSpec.js b/platform/framework/test/register/ServiceCompositorSpec.js
deleted file mode 100644
index 0e78721e666..00000000000
--- a/platform/framework/test/register/ServiceCompositorSpec.js
+++ /dev/null
@@ -1,258 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * ServiceCompositorSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/register/ServiceCompositor"],
-    function (ServiceCompositor) {
-
-        describe("The service compositor", function () {
-            var registered,
-                mockApp,
-                mockLog,
-                compositor;
-
-            beforeEach(function () {
-                registered = {};
-
-                mockApp = jasmine.createSpyObj("app", ["service"]);
-                mockLog = jasmine.createSpyObj("$log", ["error", "warn", "info", "debug"]);
-
-                mockApp.service.and.callFake(function (name, value) {
-                    var factory = value[value.length - 1];
-
-                    registered[name] = {
-                        depends: value.slice(0, value.length - 1),
-                        callback: value[value.length - 1]
-                    };
-
-                    // Track what name it was registered under
-                    factory.registeredName = name;
-                });
-
-                compositor = new ServiceCompositor(mockApp, mockLog);
-            });
-
-            it("allows composite services to be registered", function () {
-                compositor.registerCompositeServices([
-                    {
-                        type: "provider",
-                        provides: "testService"
-                    }
-                ]);
-
-                expect(mockApp.service).toHaveBeenCalled();
-            });
-
-            it("allows composite services to be registered", function () {
-                // Prepare components that look like resolved extensions
-                var components, name;
-                function MyDecorator() {
-                    return {};
-                }
-
-                function MyOtherDecorator() {
-                    return {};
-                }
-
-                function MyProvider() {
-                    return {};
-                }
-
-                function MyOtherProvider() {
-                    return {};
-                }
-
-                function MyAggregator() {
-                    return {};
-                }
-
-                components = [
-                    MyDecorator,
-                    MyProvider,
-                    MyAggregator,
-                    MyOtherDecorator,
-                    MyOtherProvider
-                ];
-
-                MyDecorator.type = "decorator";
-                MyOtherDecorator.type = "decorator";
-                MyProvider.type = "provider";
-                MyOtherProvider.type = "provider";
-                MyAggregator.type = "aggregator";
-                components.forEach(function (c) {
-                    c.provides = "testService";
-                });
-
-                // Add some test dependencies, to check prepending
-                MyOtherDecorator.depends = ["someOtherService"];
-                MyAggregator.depends = ["tests[]"];
-
-                // Register!
-                compositor.registerCompositeServices(components);
-
-                expect(mockApp.service).toHaveBeenCalled();
-
-                // Verify some interesting spots on dependency graph
-                expect(registered.testService.depends).toEqual([
-                    MyOtherDecorator.registeredName
-                ]);
-                expect(registered[MyOtherDecorator.registeredName].depends).toEqual([
-                    "someOtherService",
-                    MyDecorator.registeredName
-                ]);
-                expect(registered[MyAggregator.registeredName].depends.length).toEqual(2);
-                // Get the name of the group of providers
-                name = registered[MyAggregator.registeredName].depends[1];
-                // ...it should depend on both providers
-                expect(registered[name].depends).toEqual([
-                    MyProvider.registeredName,
-                    MyOtherProvider.registeredName
-                ]);
-            });
-
-            it("allows registered composite services to be instantiated", function () {
-                // Prepare components that look like resolved extensions
-                var components, name;
-                function MyProvider() {
-                    return {};
-                }
-
-                function MyOtherProvider() {
-                    return {};
-                }
-
-                function MyAggregator() {
-                    return {};
-                }
-
-                components = [MyProvider, MyAggregator, MyOtherProvider];
-
-                MyProvider.type = "provider";
-                MyOtherProvider.type = "provider";
-                MyAggregator.type = "aggregator";
-                components.forEach(function (c) {
-                    c.provides = "testService";
-                });
-
-                // Register!
-                compositor.registerCompositeServices(components);
-
-                expect(mockApp.service).toHaveBeenCalled();
-
-                // Test service should just be a reflecting dependency;
-                // it will depend upon (then return) the aggregator.
-                expect(registered.testService.callback("hello")).toEqual("hello");
-
-                // The aggregated provider dependencies should be similar,
-                // except they should reflect back the array of arguments.
-                // Get the name of the group of providers
-                name = registered[MyAggregator.registeredName].depends[0];
-                // ...it should depend on both providers
-                expect(registered[name].callback(1, 2, "hello")).toEqual([1, 2, "hello"]);
-
-            });
-
-            it("warns and skips components with no service type", function () {
-                // Prepare components that look like resolved extensions
-                var components;
-                function MyProvider() {
-                    return {};
-                }
-
-                function MyDecorator() {
-                    return {};
-                }
-
-                function MyAggregator() {
-                    return {};
-                }
-
-                components = [MyProvider, MyAggregator, MyDecorator];
-
-                MyProvider.type = "provider";
-                MyDecorator.type = "decorator";
-                MyAggregator.type = "aggregator";
-
-                // Notably, we don't do
-                // components.forEach(function (c) { c.provides = "testService"; });
-
-                // Try to register...
-                compositor.registerCompositeServices(components);
-
-                // Nothing should have gotten registered
-                expect(mockApp.service).not.toHaveBeenCalled();
-
-                // Should have gotten one warning for each skipped component
-                expect(mockLog.warn.calls.count()).toEqual(2);
-                expect(mockLog.info.calls.count()).toEqual(1);
-            });
-
-            it("warns about and skips aggregators with zero providers", function () {
-                // Prepare components that look like resolved extensions
-                var components;
-                function MyAggregator() {
-                    return {};
-                }
-
-                components = [MyAggregator];
-
-                MyAggregator.type = "aggregator";
-                MyAggregator.provides = "testService";
-
-                // Try to register...
-                compositor.registerCompositeServices(components);
-
-                // Nothing should have gotten registered
-                expect(mockApp.service).not.toHaveBeenCalled();
-
-                // Should have gotten a warning
-                expect(mockLog.info).toHaveBeenCalled();
-            });
-
-            it("warns about and skips decorators with nothing to decorate", function () {
-                // Prepare components that look like resolved extensions
-                var components;
-                function MyDecorator() {
-                    return {};
-                }
-
-                components = [MyDecorator];
-
-                MyDecorator.type = "decorator";
-                MyDecorator.provides = "testService";
-
-                // Try to register...
-                compositor.registerCompositeServices(components);
-
-                // Nothing should have gotten registered
-                expect(mockApp.service).not.toHaveBeenCalled();
-
-                // Should have gotten a warning
-                expect(mockLog.warn).toHaveBeenCalled();
-            });
-
-        });
-    }
-);
diff --git a/platform/framework/test/resolve/BundleResolverSpec.js b/platform/framework/test/resolve/BundleResolverSpec.js
deleted file mode 100644
index 61defd28eb2..00000000000
--- a/platform/framework/test/resolve/BundleResolverSpec.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * BundleResolverSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/resolve/BundleResolver", "../../src/load/Bundle"],
-    function (BundleResolver, Bundle) {
-
-        describe("The bundle resolver", function () {
-            var mockExtensionResolver,
-                mockLog,
-                resolver;
-
-            beforeEach(function () {
-                mockExtensionResolver = jasmine.createSpyObj(
-                    "extensionResolver",
-                    ["resolve"]
-                );
-                mockLog = jasmine.createSpyObj(
-                    "$log",
-                    ["error", "warn", "info", "debug"]
-                );
-
-                mockExtensionResolver.resolve.and.returnValue(Promise.resolve("a"));
-
-                resolver = new BundleResolver(
-                    mockExtensionResolver,
-                    mockLog
-                );
-            });
-
-            it("invokes the extension resolver for all bundle extensions", function () {
-                return resolver.resolveBundles([
-                    new Bundle("x", { extensions: { tests: [{}, {}, {}] } }),
-                    new Bundle("y", {
-                        extensions: {
-                            tests: [{}, {}],
-                            others: [{}, {}]
-                        }
-                    }),
-                    new Bundle("z", { extensions: { others: [{}] } })
-                ]).then(function (result) {
-                    expect(result.tests).toEqual(["a", "a", "a", "a", "a"]);
-                    expect(result.others).toEqual(["a", "a", "a"]);
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/framework/test/resolve/ExtensionResolverSpec.js b/platform/framework/test/resolve/ExtensionResolverSpec.js
deleted file mode 100644
index 4e0b591c0f5..00000000000
--- a/platform/framework/test/resolve/ExtensionResolverSpec.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * ExtensionResolverSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/resolve/ExtensionResolver", "../../src/load/Bundle"],
-    function (ExtensionResolver, Bundle) {
-
-        describe("", function () {
-            var mockLoader,
-                mockLog,
-                resolver;
-
-            // Test implementation, to load from the mock loader
-            function Constructor() {
-                return { someKey: "some value" };
-            }
-
-            Constructor.someProperty = "some static value";
-
-            beforeEach(function () {
-                mockLoader = jasmine.createSpyObj("loader", ["load"]);
-
-                mockLog = jasmine.createSpyObj(
-                    "$log",
-                    ["error", "warn", "info", "debug"]
-                );
-
-                mockLoader.load.and.returnValue(Promise.resolve(Constructor));
-
-                resolver = new ExtensionResolver(mockLoader, mockLog);
-            });
-
-            it("requests implementations from the implementation loader", function () {
-                var bundle = new Bundle("w", {
-                        sources: "x",
-                        extensions: { tests: [{ implementation: "y/z.js" }] }
-                    }),
-                    extension = bundle.getExtensions("tests")[0];
-
-                return resolver.resolve(extension).then(function (result) {
-                    // Verify that the right file was requested
-                    expect(mockLoader.load).toHaveBeenCalledWith("w/x/y/z.js");
-
-                    // We should have resolved to the constructor from above
-                    expect(typeof result).toEqual('function');
-                    expect(result().someKey).toEqual("some value");
-                });
-            });
-
-            it("issues a warning and defaults to plain definition if load fails", function () {
-                var bundle = new Bundle("w", {
-                        sources: "x",
-                        extensions: {
-                            tests: [{
-                                someOtherKey: "some other value",
-                                implementation: "y/z.js"
-                            }]
-                        }
-                    }),
-                    extension = bundle.getExtensions("tests")[0];
-
-                mockLoader.load.and.returnValue(Promise.reject(new Error("test error")));
-
-                return resolver.resolve(extension).then(function (result) {
-                    // Should have gotten a warning
-                    expect(mockLog.warn).toHaveBeenCalled();
-                    // We should have resolved to the plain definition from above
-                    expect(typeof result).not.toEqual('function');
-                    expect(result.someOtherKey).toEqual("some other value");
-                });
-            });
-
-            it("ensures implementation properties are exposed", function () {
-                var bundle = new Bundle("w", {
-                        sources: "x",
-                        extensions: { tests: [{ implementation: "y/z.js" }] }
-                    }),
-                    extension = bundle.getExtensions("tests")[0];
-
-                return resolver.resolve(extension).then(function (result) {
-                    // Verify that the right file was requested
-                    expect(mockLoader.load).toHaveBeenCalledWith("w/x/y/z.js");
-                    // We should have resolved to the constructor from above
-                    expect(typeof result).toEqual('function');
-                    expect(result().someKey).toEqual("some value");
-                    expect(result.someProperty).toEqual("some static value");
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/framework/test/resolve/ImplementationLoaderSpec.js b/platform/framework/test/resolve/ImplementationLoaderSpec.js
deleted file mode 100644
index 3ec3c8f2bd7..00000000000
--- a/platform/framework/test/resolve/ImplementationLoaderSpec.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * ImplementationLoaderSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/resolve/ImplementationLoader"],
-    function (ImplementationLoader) {
-
-        describe("The implementation loader", function () {
-            var required,
-                loader;
-
-            function mockRequire(names, fulfill, reject) {
-                required = {
-                    names: names,
-                    fulfill: fulfill,
-                    reject: reject
-                };
-            }
-
-            beforeEach(function () {
-                required = undefined;
-                loader = new ImplementationLoader(mockRequire);
-            });
-
-            it("passes script names to require", function () {
-                loader.load("xyz.js");
-                expect(required.names).toEqual(["xyz.js"]);
-            });
-
-            it("wraps require results in a Promise that can resolve", function () {
-                // Load and get the result
-                var promise = loader.load("xyz.js").then(function (result) {
-                    expect(result).toEqual("test result");
-                });
-
-                required.fulfill("test result");
-
-                return promise;
-            });
-
-            it("wraps require results in a Promise that can reject", function () {
-                var result,
-                    rejection;
-
-                // Load and get the result
-                var promise = loader.load("xyz.js").then(
-                    function (v) {
-                        result = v;
-                    },
-                    function (v) {
-                        rejection = v;
-                    });
-
-                expect(result).toBeUndefined();
-
-                required.reject("test result");
-
-                return promise.then(function () {
-                    expect(result).toBeUndefined();
-                    expect(rejection).toEqual("test result");
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/identity/README.md b/platform/identity/README.md
deleted file mode 100644
index 4df89f73683..00000000000
--- a/platform/identity/README.md
+++ /dev/null
@@ -1,2 +0,0 @@
-This bundle is responsible for introducing identity management features 
-and API to Open MCT.
diff --git a/platform/identity/bundle.js b/platform/identity/bundle.js
deleted file mode 100644
index fc077b96f0c..00000000000
--- a/platform/identity/bundle.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/IdentityAggregator",
-    "./src/IdentityProvider",
-    "./src/IdentityCreationDecorator",
-    "./src/IdentityIndicator"
-], function (
-    IdentityAggregator,
-    IdentityProvider,
-    IdentityCreationDecorator,
-    IdentityIndicator
-) {
-
-    return {
-        name: "platform/identity",
-        definition: {
-            "extensions": {
-                "components": [
-                    {
-                        "implementation": IdentityAggregator,
-                        "type": "aggregator",
-                        "provides": "identityService",
-                        "depends": [
-                            "$q"
-                        ]
-                    },
-                    {
-                        "implementation": IdentityProvider,
-                        "type": "provider",
-                        "provides": "identityService",
-                        "depends": [
-                            "$q"
-                        ],
-                        "priority": "fallback"
-                    },
-                    {
-                        "type": "decorator",
-                        "provides": "creationService",
-                        "implementation": IdentityCreationDecorator,
-                        "depends": [
-                            "identityService"
-                        ]
-                    }
-                ],
-                "indicators": [
-                    {
-                        "implementation": IdentityIndicator,
-                        "depends": [
-                            "identityService"
-                        ]
-                    }
-                ],
-                "types": [
-                    {
-                        "properties": [
-                            {
-                                "key": "creator",
-                                "name": "Creator"
-                            }
-                        ]
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/identity/src/IdentityAggregator.js b/platform/identity/src/IdentityAggregator.js
deleted file mode 100644
index 79c0ec7b745..00000000000
--- a/platform/identity/src/IdentityAggregator.js
+++ /dev/null
@@ -1,91 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Defines interfaces and common infrastructure for establishing
- * a user's identity.
- * @namespace platform/identity
- */
-define(
-    function () {
-
-        /**
-         * Provides information about the currently logged-in
-         * user, if available.
-         *
-         * @interface IdentityService
-         */
-
-        /**
-         * Get information about the current user. This returns a promise
-         * which will resolve to metadata about the user, or undefined if
-         * no information about the user is available.
-         *
-         * @method IdentityService#getUser
-         * @returns {Promise.<IdentityMetadata>} a promise for metadata about
-         *         the current user
-         */
-
-        /**
-         * Metadata about a user.
-         *
-         * @typedef IdentityMetadata
-         * @property {string} name the user's human-readable name
-         * @property {string} key the user's machine-readable name
-         */
-
-        /**
-         * Aggregator for multiple identity services. Exposes the first
-         * defined identity provided by any provider, according to
-         * priority order.
-         *
-         * @constructor
-         * @implements {IdentityService}
-         * @memberof platform/identity
-         */
-        function IdentityAggregator($q, providers) {
-            this.providers = providers;
-            this.$q = $q;
-        }
-
-        function delegateGetUser(provider) {
-            return provider.getUser();
-        }
-
-        function identity(value) {
-            return value;
-        }
-
-        function giveFirst(results) {
-            return results.filter(identity)[0];
-        }
-
-        IdentityAggregator.prototype.getUser = function () {
-            var $q = this.$q,
-                promises = this.providers.map(delegateGetUser);
-
-            return $q.all(promises).then(giveFirst);
-        };
-
-        return IdentityAggregator;
-    }
-);
diff --git a/platform/identity/src/IdentityCreationDecorator.js b/platform/identity/src/IdentityCreationDecorator.js
deleted file mode 100644
index 5ecbc375831..00000000000
--- a/platform/identity/src/IdentityCreationDecorator.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    function () {
-
-        /**
-         * Adds a `creator` property to newly-created domain objects.
-         * @constructor
-         * @augments {platform/commonUI/browse.CreationService}
-         * @memberof platform/entanglement
-         */
-        function IdentityCreationDecorator(identityService, creationService) {
-            this.identityService = identityService;
-            this.creationService = creationService;
-        }
-
-        IdentityCreationDecorator.prototype.createObject = function (model, parent) {
-            var creationService = this.creationService,
-                identityService = this.identityService;
-
-            return identityService.getUser().then(function (user) {
-                if (user && user.key) {
-                    model.creator = user.key;
-                }
-
-                return creationService.createObject(model, parent);
-            });
-        };
-
-        return IdentityCreationDecorator;
-    }
-);
-
diff --git a/platform/identity/src/IdentityIndicator.js b/platform/identity/src/IdentityIndicator.js
deleted file mode 100644
index db1c8bebbba..00000000000
--- a/platform/identity/src/IdentityIndicator.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Indicator showing the currently logged-in user.
-         * @constructor
-         * @memberof platform/identity
-         * @implements {Indicator}
-         * @param {IdentityService} identityService the identity service
-         */
-        function IdentityIndicator(identityService) {
-            // Track the current connection state
-            var self = this;
-
-            identityService.getUser().then(function (user) {
-                if (user && user.key) {
-                    self.text = user.name || user.key;
-                    self.description = "Logged in as " + user.key;
-                }
-            });
-        }
-
-        IdentityIndicator.prototype.getCssClass = function () {
-            return this.text && "icon-person";
-        };
-
-        IdentityIndicator.prototype.getText = function () {
-            return this.text;
-        };
-
-        IdentityIndicator.prototype.getDescription = function () {
-            return this.description;
-        };
-
-        return IdentityIndicator;
-    }
-);
diff --git a/platform/identity/src/IdentityProvider.js b/platform/identity/src/IdentityProvider.js
deleted file mode 100644
index bfa030f56f3..00000000000
--- a/platform/identity/src/IdentityProvider.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Defines interfaces and common infrastructure for establishing
- * a user's identity.
- * @namespace platform/identity
- */
-define(
-    function () {
-
-        /**
-         * Default implementation of an identity service. Provides an
-         * unknown user as an `undefined` value; this is present simply
-         * to ensure that there is always an `identityService` available
-         * for platform components to use.
-         *
-         * @constructor
-         * @implements {IdentityService}
-         * @memberof platform/identity
-         */
-        function IdentityProvider($q) {
-            this.userPromise = $q.when(undefined);
-        }
-
-        IdentityProvider.prototype.getUser = function () {
-            return this.userPromise;
-        };
-
-        return IdentityProvider;
-    }
-);
diff --git a/platform/identity/test/IdentityAggregatorSpec.js b/platform/identity/test/IdentityAggregatorSpec.js
deleted file mode 100644
index ea9f3fc24d5..00000000000
--- a/platform/identity/test/IdentityAggregatorSpec.js
+++ /dev/null
@@ -1,139 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/IdentityAggregator"],
-    function (IdentityAggregator) {
-
-        describe("The identity aggregator", function () {
-            var mockProviders,
-                mockQ,
-                resolves,
-                testUsers,
-                aggregator;
-
-            function resolveProviderPromises() {
-                ['a', 'b', 'c'].forEach(function (id, i) {
-                    resolves[id](testUsers[i]);
-                });
-            }
-
-            beforeEach(function () {
-                testUsers = [
-                    {
-                        key: "user0",
-                        name: "User Zero"
-                    },
-                    {
-                        key: "user1",
-                        name: "User One"
-                    },
-                    {
-                        key: "user2",
-                        name: "User Two"
-                    }
-                ];
-
-                resolves = {};
-
-                mockProviders = ['a', 'b', 'c'].map(function (id) {
-                    var mockProvider = jasmine.createSpyObj(
-                        'provider-' + id,
-                        ['getUser']
-                    );
-
-                    mockProvider.getUser.and.returnValue(new Promise(function (r) {
-                        resolves[id] = r;
-                    }));
-
-                    return mockProvider;
-                });
-
-                mockQ = jasmine.createSpyObj('$q', ['all']);
-                mockQ.all.and.callFake(function (promises) {
-                    return Promise.all(promises);
-                });
-
-                aggregator = new IdentityAggregator(
-                    mockQ,
-                    mockProviders
-                );
-            });
-
-            it("delegates to the aggregated providers", function () {
-                // Verify precondition
-                mockProviders.forEach(function (p) {
-                    expect(p.getUser).not.toHaveBeenCalled();
-                });
-
-                aggregator.getUser();
-
-                mockProviders.forEach(function (p) {
-                    expect(p.getUser).toHaveBeenCalled();
-                });
-            });
-
-            it("returns the first result when it is defined", function () {
-                var promise = aggregator.getUser();
-
-                resolveProviderPromises();
-
-                return promise.then(function (user) {
-                    expect(user).toEqual(testUsers[0]);
-                });
-            });
-
-            it("returns a later result when earlier results are undefined", function () {
-                testUsers[0] = undefined;
-
-                var promise = aggregator.getUser();
-
-                resolveProviderPromises();
-
-                return promise.then(function (user) {
-                    expect(user).toEqual(testUsers[1]);
-                });
-            });
-
-            it("returns undefined when no providers expose users", function () {
-                testUsers = [undefined, undefined, undefined];
-
-                var promise = aggregator.getUser();
-
-                resolveProviderPromises();
-
-                return promise.then(function (user) {
-                    expect(user).toBe(undefined);
-                });
-            });
-
-            it("returns undefined when there are no providers", function () {
-                var promise = new IdentityAggregator(mockQ, []).getUser();
-
-                return promise.then(function (user) {
-                    expect(user).toBe(undefined);
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/identity/test/IdentityCreationDecoratorSpec.js b/platform/identity/test/IdentityCreationDecoratorSpec.js
deleted file mode 100644
index b35de02b377..00000000000
--- a/platform/identity/test/IdentityCreationDecoratorSpec.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [
-        '../src/IdentityCreationDecorator'
-    ],
-    function (IdentityCreationDecorator) {
-
-        describe("IdentityCreationDecorator", function () {
-            var mockIdentityService,
-                mockCreationService,
-                mockParent,
-                mockCreatedObject,
-                decorator;
-
-            beforeEach(function () {
-                mockIdentityService = jasmine.createSpyObj(
-                    'identityService',
-                    ['getUser']
-                );
-                mockCreationService = jasmine.createSpyObj(
-                    'creationService',
-                    ['createObject']
-                );
-                mockParent = jasmine.createSpyObj(
-                    'parentObject',
-                    ['getCapability', 'getId', 'getModel', 'hasCapability', 'useCapability']
-                );
-                mockCreatedObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getCapability', 'getId', 'getModel', 'hasCapability', 'useCapability']
-                );
-                mockCreationService.createObject
-                    .and.returnValue(Promise.resolve(mockCreatedObject));
-                mockIdentityService.getUser
-                    .and.returnValue(Promise.resolve({ key: "test-user-id" }));
-                mockParent.getId.and.returnValue('test-id');
-                decorator = new IdentityCreationDecorator(
-                    mockIdentityService,
-                    mockCreationService
-                );
-            });
-
-            it("delegates to its decorated service when identity is available", function () {
-                var testModel = { someKey: "some value" };
-
-                return decorator.createObject(testModel, mockParent)
-                    .then(function (object) {
-                        expect(object).toEqual(mockCreatedObject);
-                    });
-            });
-
-            it("adds a creator property", function () {
-                var testModel = { someKey: "some value" };
-
-                return decorator.createObject(testModel, mockParent)
-                    .then(function (object) {
-                        expect(object)
-                            .toEqual(mockCreatedObject);
-
-                        // Make sure arguments were delegated appropriately
-                        expect(mockCreationService.createObject)
-                            .toHaveBeenCalledWith(
-                                {
-                                    someKey: "some value",
-                                    creator: "test-user-id"
-                                },
-                                mockParent
-                            );
-                    });
-            });
-
-        });
-    }
-);
diff --git a/platform/identity/test/IdentityIndicatorSpec.js b/platform/identity/test/IdentityIndicatorSpec.js
deleted file mode 100644
index 705089e06e4..00000000000
--- a/platform/identity/test/IdentityIndicatorSpec.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/IdentityIndicator"],
-    function (IdentityIndicator) {
-
-        describe("The identity indicator", function () {
-            var mockPromise,
-                mockIdentityService,
-                indicator;
-
-            beforeEach(function () {
-                mockPromise = jasmine.createSpyObj('promise', ['then']);
-                mockIdentityService = jasmine.createSpyObj(
-                    'identityService',
-                    ['getUser']
-                );
-
-                mockIdentityService.getUser.and.returnValue(mockPromise);
-
-                indicator = new IdentityIndicator(mockIdentityService);
-            });
-
-            it("shows information about the current user", function () {
-                mockPromise.then.calls.mostRecent().args[0]({
-                    key: "testuserid",
-                    name: "A User"
-                });
-                expect(indicator.getCssClass()).toEqual("icon-person");
-                expect(indicator.getText()).toEqual("A User");
-                expect(indicator.getDescription().indexOf("testuserid"))
-                    .not.toEqual(-1);
-            });
-
-            it("shows nothing while no user information is available", function () {
-                expect(indicator.getCssClass()).toBeUndefined();
-                expect(indicator.getText()).toBeUndefined();
-                expect(indicator.getDescription()).toBeUndefined();
-            });
-
-            it("shows nothing when there is no identity information", function () {
-                mockPromise.then.calls.mostRecent().args[0](undefined);
-                expect(indicator.getCssClass()).toBeUndefined();
-                expect(indicator.getText()).toBeUndefined();
-                expect(indicator.getDescription()).toBeUndefined();
-            });
-
-        });
-    }
-);
diff --git a/platform/identity/test/IdentityProviderSpec.js b/platform/identity/test/IdentityProviderSpec.js
deleted file mode 100644
index 03da7c766a2..00000000000
--- a/platform/identity/test/IdentityProviderSpec.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [
-        '../src/IdentityProvider'
-    ],
-    function (IdentityProvider) {
-
-        describe("IdentityProvider", function () {
-            var mockQ, provider;
-
-            beforeEach(function () {
-                mockQ = jasmine.createSpyObj('$q', ['when']);
-                mockQ.when.and.callFake(function (v) {
-                    return Promise.resolve(v);
-                });
-
-                provider = new IdentityProvider(mockQ);
-            });
-
-            it("provides an undefined user", function () {
-                return provider.getUser().then(function (user) {
-                    expect(user).toBe(undefined);
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/import-export/README.md b/platform/import-export/README.md
deleted file mode 100644
index e8d903ec68d..00000000000
--- a/platform/import-export/README.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Import / Export Plugin
-The Import/Export plugin allows objects to be exported as JSON files. This allows for sharing of objects between users 
-who are not using a shared persistence store. It also allows object trees to be backed up. Additionally, object trees 
-exported using this tool can then be exposed as read-only static root trees using the 
-[Static Root Plugin](../../src/plugins/staticRootPlugin/README.md).
-
-Upon installation it will add two new context menu actions to allow import and export of objects. Initiating the Export 
-action on an object will produce a JSON file that includes the object and all of its composed children. Selecting Import 
-on an object will allow the user to import a previously exported object tree as a child of the selected object.
-
-## Installation
-```js
-openmct.install(openmct.plugins.ImportExport())
-```
\ No newline at end of file
diff --git a/platform/import-export/bundle.js b/platform/import-export/bundle.js
deleted file mode 100644
index a5e5a851275..00000000000
--- a/platform/import-export/bundle.js
+++ /dev/null
@@ -1,82 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/actions/ExportAsJSONAction",
-    "./src/actions/ImportAsJSONAction"
-], function (
-    ExportAsJSONAction,
-    ImportAsJSONAction
-) {
-
-    return function ImportExportPlugin() {
-        return function (openmct) {
-            ExportAsJSONAction.appliesTo = function (context) {
-                return openmct.$injector.get('policyService')
-                    .allow("creation", context.domainObject.getCapability("type")
-                    );
-            };
-
-            openmct.legacyRegistry.register("platform/import-export", {
-                "name": "Import-export plugin",
-                "description": "Allows importing / exporting of domain objects as JSON.",
-                "extensions": {
-                    "actions": [
-                        {
-                            "key": "export.JSON",
-                            "name": "Export as JSON",
-                            "implementation": ExportAsJSONAction,
-                            "category": "contextual",
-                            "cssClass": "icon-export",
-                            "group": "json",
-                            "priority": 2,
-                            "depends": [
-                                "openmct",
-                                "exportService",
-                                "policyService",
-                                "identifierService",
-                                "typeService"
-                            ]
-                        },
-                        {
-                            "key": "import.JSON",
-                            "name": "Import from JSON",
-                            "implementation": ImportAsJSONAction,
-                            "category": "contextual",
-                            "cssClass": "icon-import",
-                            "group": "json",
-                            "priority": 2,
-                            "depends": [
-                                "exportService",
-                                "identifierService",
-                                "dialogService",
-                                "openmct"
-                            ]
-                        }
-                    ]
-                }
-            });
-
-            openmct.legacyRegistry.enable('platform/import-export');
-        };
-    };
-});
diff --git a/platform/import-export/src/actions/ExportAsJSONAction.js b/platform/import-export/src/actions/ExportAsJSONAction.js
deleted file mode 100644
index ea299bad44b..00000000000
--- a/platform/import-export/src/actions/ExportAsJSONAction.js
+++ /dev/null
@@ -1,202 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(['lodash'], function (_) {
-
-    /**
-     * The ExportAsJSONAction is available from context menus and allows a user
-     * to export any creatable domain object as a JSON file.
-     *
-     * @implements {Action}
-     * @constructor
-     * @memberof platform/import-export
-     */
-    function ExportAsJSONAction(
-        openmct,
-        exportService,
-        policyService,
-        identifierService,
-        typeService,
-        context
-    ) {
-        this.openmct = openmct;
-        this.root = {};
-        this.tree = {};
-        this.calls = 0;
-        this.context = context;
-        this.externalIdentifiers = [];
-        this.exportService = exportService;
-        this.policyService = policyService;
-        this.identifierService = identifierService;
-        this.typeService = typeService;
-
-        this.idMap = {};
-    }
-
-    ExportAsJSONAction.prototype.perform = function () {
-        var root = this.context.domainObject.useCapability('adapter');
-        this.root = this.copyObject(root);
-        var rootId = this.getId(this.root);
-        this.tree[rootId] = this.root;
-
-        this.saveAs = function (completedTree) {
-            this.exportService.exportJSON(
-                completedTree,
-                {filename: this.root.name + '.json'}
-            );
-        };
-
-        this.write(this.root);
-    };
-
-    /**
-     * Traverses object hierarchy and populates tree object with models and
-     * identifiers.
-     *
-     * @private
-     * @param {Object} parent
-     */
-    ExportAsJSONAction.prototype.write = function (parent) {
-        this.calls++;
-        var composition = this.openmct.composition.get(parent);
-
-        if (composition !== undefined) {
-            composition.load()
-                .then(function (children) {
-                    children.forEach(function (child, index) {
-                        // Only export if object is creatable
-                        if (this.isCreatable(child)) {
-                            // Prevents infinite export of self-contained objs
-                            if (!Object.prototype.hasOwnProperty.call(this.tree, this.getId(child))) {
-                                // If object is a link to something absent from
-                                // tree, generate new id and treat as new object
-                                if (this.isExternal(child, parent)) {
-                                    child = this.rewriteLink(child, parent);
-                                } else {
-                                    this.tree[this.getId(child)] = child;
-                                }
-
-                                this.write(child);
-                            }
-                        }
-                    }.bind(this));
-                    this.calls--;
-                    if (this.calls === 0) {
-                        this.rewriteReferences();
-                        this.saveAs(this.wrapTree());
-                    }
-                }.bind(this));
-        } else {
-            this.calls--;
-            if (this.calls === 0) {
-                this.rewriteReferences();
-                this.saveAs(this.wrapTree());
-            }
-        }
-    };
-
-    /**
-     * Exports an externally linked object as an entirely new object in the
-     * case where the original is not present in the exported tree.
-     *
-     * @private
-     */
-    ExportAsJSONAction.prototype.rewriteLink = function (child, parent) {
-        this.externalIdentifiers.push(this.getId(child));
-        var index = parent.composition.findIndex(id => {
-            return _.isEqual(child.identifier, id);
-        });
-        var copyOfChild = this.copyObject(child);
-        copyOfChild.identifier.key = this.identifierService.generate();
-        var newIdString = this.getId(copyOfChild);
-        var parentId = this.getId(parent);
-
-        this.idMap[this.getId(child)] = newIdString;
-        copyOfChild.location = parentId;
-        parent.composition[index] = copyOfChild.identifier;
-        this.tree[newIdString] = copyOfChild;
-        this.tree[parentId].composition[index] = copyOfChild.identifier;
-
-        return copyOfChild;
-    };
-
-    ExportAsJSONAction.prototype.copyObject = function (object) {
-        var jsonString = JSON.stringify(object);
-
-        return JSON.parse(jsonString);
-    };
-
-    ExportAsJSONAction.prototype.isExternal = function (child, parent) {
-        if (child.location !== this.getId(parent)
-            && !Object.keys(this.tree).includes(child.location)
-            && this.getId(child) !== this.getId(this.root)
-            || this.externalIdentifiers.includes(this.getId(child))) {
-
-            return true;
-        }
-
-        return false;
-    };
-
-    /**
-     * Wraps root object for identification on reimport and wraps entire
-     * exported JSON construct for validation.
-     *
-     * @private
-     */
-    ExportAsJSONAction.prototype.wrapTree = function () {
-        return {
-            "openmct": this.tree,
-            "rootId": this.getId(this.root)
-        };
-    };
-
-    ExportAsJSONAction.prototype.isCreatable = function (domainObject) {
-        var type = this.typeService.getType(domainObject.type);
-
-        return this.policyService.allow(
-            "creation",
-            type
-        );
-    };
-
-    /**
-     * @private
-     */
-    ExportAsJSONAction.prototype.getId = function (domainObject) {
-        return this.openmct.objects.makeKeyString(domainObject.identifier);
-    };
-
-    /**
-     * @private
-     */
-    ExportAsJSONAction.prototype.rewriteReferences = function () {
-        var treeString = JSON.stringify(this.tree);
-        Object.keys(this.idMap).forEach(function (oldId) {
-            var newId = this.idMap[oldId];
-            treeString = treeString.split(oldId).join(newId);
-        }.bind(this));
-        this.tree = JSON.parse(treeString);
-    };
-
-    return ExportAsJSONAction;
-});
diff --git a/platform/import-export/src/actions/ImportAsJSONAction.js b/platform/import-export/src/actions/ImportAsJSONAction.js
deleted file mode 100644
index 5ab16f9f98a..00000000000
--- a/platform/import-export/src/actions/ImportAsJSONAction.js
+++ /dev/null
@@ -1,236 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-define(['zepto', 'objectUtils'], function ($, objectUtils) {
-
-    /**
-     * The ImportAsJSONAction is available from context menus and allows a user
-     * to import a previously exported domain object into any domain object
-     * that has the composition capability.
-     *
-     * @implements {Action}
-     * @constructor
-     * @memberof platform/import-export
-     */
-    function ImportAsJSONAction(
-        exportService,
-        identifierService,
-        dialogService,
-        openmct,
-        context
-    ) {
-
-        this.openmct = openmct;
-        this.context = context;
-        this.exportService = exportService;
-        this.dialogService = dialogService;
-        this.identifierService = identifierService;
-        this.instantiate = openmct.$injector.get("instantiate");
-    }
-
-    ImportAsJSONAction.prototype.perform = function () {
-        this.dialogService.getUserInput(this.getFormModel(), {})
-            .then(function (form) {
-                var objectTree = form.selectFile.body;
-                if (this.validateJSON(objectTree)) {
-                    this.importObjectTree(JSON.parse(objectTree));
-                } else {
-                    this.displayError();
-                }
-            }.bind(this));
-    };
-
-    ImportAsJSONAction.prototype.importObjectTree = function (objTree) {
-        var parent = this.context.domainObject;
-        var namespace = parent.useCapability('adapter').identifier.namespace;
-
-        var tree = this.generateNewIdentifiers(objTree, namespace);
-        var rootId = tree.rootId;
-
-        var rootModel = tree.openmct[rootId];
-        delete rootModel.persisted;
-
-        var rootObj = this.instantiate(rootModel, rootId);
-        var newStyleParent = parent.useCapability('adapter');
-        var newStyleRootObj = rootObj.useCapability('adapter');
-
-        if (this.openmct.composition.checkPolicy(newStyleParent, newStyleRootObj)) {
-            // Instantiate all objects in tree with their newly generated ids,
-            // adding each to its rightful parent's composition
-            rootObj.getCapability("location").setPrimaryLocation(parent.getId());
-            this.deepInstantiate(rootObj, tree.openmct, []);
-            parent.getCapability("composition").add(rootObj);
-        } else {
-            var dialog = this.openmct.overlays.dialog({
-                iconClass: 'alert',
-                message: "We're sorry, but you cannot import that object type into this object.",
-                buttons: [
-                    {
-                        label: "Ok",
-                        emphasis: true,
-                        callback: function () {
-                            dialog.dismiss();
-                        }
-                    }
-                ]
-            });
-        }
-    };
-
-    ImportAsJSONAction.prototype.deepInstantiate = function (parent, tree, seen) {
-        // Traverses object tree, instantiates all domain object w/ new IDs and
-        // adds to parent's composition
-        if (parent.hasCapability("composition")) {
-            var parentModel = parent.getModel();
-            var newObj;
-
-            seen.push(parent.getId());
-
-            parentModel.composition.forEach(function (childId) {
-                let keystring = this.openmct.objects.makeKeyString(childId);
-
-                if (!tree[keystring] || seen.includes(keystring)) {
-                    return;
-                }
-
-                let newModel = tree[keystring];
-                delete newModel.persisted;
-
-                newObj = this.instantiate(newModel, keystring);
-                newObj.getCapability("location")
-                    .setPrimaryLocation(tree[keystring].location);
-                this.deepInstantiate(newObj, tree, seen);
-            }, this);
-        }
-    };
-
-    ImportAsJSONAction.prototype.generateNewIdentifiers = function (tree, namespace) {
-        // For each domain object in the file, generate new ID, replace in tree
-        Object.keys(tree.openmct).forEach(function (domainObjectId) {
-            let newId = {
-                namespace: namespace,
-                key: this.identifierService.generate()
-            };
-
-            let oldId = objectUtils.parseKeyString(domainObjectId);
-
-            tree = this.rewriteId(oldId, newId, tree);
-        }, this);
-
-        return tree;
-    };
-
-    ImportAsJSONAction.prototype.getKeyString = function (identifier) {
-        return this.openmct.objects.makeKeyString(identifier);
-    };
-
-    /**
-     * Rewrites all instances of a given id in the tree with a newly generated
-     * replacement to prevent collision.
-     *
-     * @private
-     */
-    ImportAsJSONAction.prototype.rewriteId = function (oldId, newId, tree) {
-        let newIdKeyString = this.openmct.objects.makeKeyString(newId);
-        let oldIdKeyString = this.openmct.objects.makeKeyString(oldId);
-        tree = JSON.stringify(tree).replace(new RegExp(oldIdKeyString, 'g'), newIdKeyString);
-
-        return JSON.parse(tree, (key, value) => {
-            if (value !== undefined
-                && value !== null
-                && Object.prototype.hasOwnProperty.call(value, 'key')
-                && Object.prototype.hasOwnProperty.call(value, 'namespace')
-                && value.key === oldId.key
-                && value.namespace === oldId.namespace) {
-                return newId;
-            } else {
-                return value;
-            }
-        });
-    };
-
-    ImportAsJSONAction.prototype.getFormModel = function () {
-        return {
-            name: "Import as JSON",
-            sections: [
-                {
-                    name: "Import A File",
-                    rows: [
-                        {
-                            name: 'Select File',
-                            key: 'selectFile',
-                            control: 'file-input',
-                            required: true,
-                            text: 'Select File...'
-                        }
-                    ]
-                }
-            ]
-        };
-    };
-
-    ImportAsJSONAction.prototype.validateJSON = function (jsonString) {
-        var json;
-        try {
-            json = JSON.parse(jsonString);
-        } catch (e) {
-            return false;
-        }
-
-        if (!json.openmct || !json.rootId) {
-            return false;
-        }
-
-        return true;
-    };
-
-    ImportAsJSONAction.prototype.displayError = function () {
-        var dialog,
-            model = {
-                title: "Invalid File",
-                actionText: "The selected file was either invalid JSON or was "
-                + "not formatted properly for import into Open MCT.",
-                severity: "error",
-                options: [
-                    {
-                        label: "Ok",
-                        callback: function () {
-                            dialog.dismiss();
-                        }
-                    }
-                ]
-            };
-        dialog = this.dialogService.showBlockingMessage(model);
-    };
-
-    ImportAsJSONAction.appliesTo = function (context) {
-        let domainObject = context.domainObject;
-
-        if (domainObject && domainObject.model.locked) {
-            return false;
-        }
-
-        return domainObject !== undefined
-            && domainObject.hasCapability("composition");
-    };
-
-    return ImportAsJSONAction;
-});
diff --git a/platform/import-export/test/actions/ExportAsJSONActionSpec.js b/platform/import-export/test/actions/ExportAsJSONActionSpec.js
deleted file mode 100644
index 85e9002be76..00000000000
--- a/platform/import-export/test/actions/ExportAsJSONActionSpec.js
+++ /dev/null
@@ -1,252 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [
-        "../../src/actions/ExportAsJSONAction",
-        "../../../entanglement/test/DomainObjectFactory",
-        "../../../../src/MCT",
-        '../../../../src/adapter/capabilities/AdapterCapability'
-    ],
-    function (ExportAsJSONAction, domainObjectFactory, MCT, AdapterCapability) {
-
-        xdescribe("The export JSON action", function () {
-
-            var context,
-                action,
-                exportService,
-                identifierService,
-                typeService,
-                openmct,
-                policyService,
-                mockType,
-                mockObjectProvider,
-                exportedTree;
-
-            beforeEach(function () {
-                openmct = new MCT();
-                mockObjectProvider = {
-                    objects: {},
-                    get: function (id) {
-                        return Promise.resolve(mockObjectProvider.objects[id.key]);
-                    }
-                };
-                openmct.objects.addProvider('', mockObjectProvider);
-
-                exportService = jasmine.createSpyObj('exportService',
-                    ['exportJSON']);
-                identifierService = jasmine.createSpyObj('identifierService',
-                    ['generate']);
-                policyService = jasmine.createSpyObj('policyService',
-                    ['allow']);
-                mockType = jasmine.createSpyObj('type', ['hasFeature']);
-                typeService = jasmine.createSpyObj('typeService', [
-                    'getType'
-                ]);
-
-                mockType.hasFeature.and.callFake(function (feature) {
-                    return feature === 'creation';
-                });
-
-                typeService.getType.and.returnValue(mockType);
-
-                context = {};
-                context.domainObject = domainObjectFactory(
-                    {
-                        name: 'test',
-                        id: 'someID',
-                        capabilities: {
-                            'adapter': {
-                                invoke: invokeAdapter
-                            }
-                        }
-                    });
-                identifierService.generate.and.returnValue('brandNewId');
-                exportService.exportJSON.and.callFake(function (tree, options) {
-                    exportedTree = tree;
-                });
-                policyService.allow.and.callFake(function (capability, type) {
-                    return type.hasFeature(capability);
-                });
-
-                action = new ExportAsJSONAction(openmct, exportService, policyService,
-                    identifierService, typeService, context);
-            });
-
-            function invokeAdapter() {
-                var newStyleObject = new AdapterCapability(context.domainObject).invoke();
-
-                return newStyleObject;
-            }
-
-            it("initializes happily", function () {
-                expect(action).toBeDefined();
-            });
-
-            it("doesn't export non-creatable objects in tree", function () {
-                var nonCreatableType = {
-                    hasFeature:
-                        function (feature) {
-                            return feature !== 'creation';
-                        }
-                };
-
-                typeService.getType.and.returnValue(nonCreatableType);
-
-                var parent = domainObjectFactory({
-                    name: 'parent',
-                    model: {
-                        name: 'parent',
-                        location: 'ROOT',
-                        composition: ['childId']
-                    },
-                    id: 'parentId',
-                    capabilities: {
-                        'adapter': {
-                            invoke: invokeAdapter
-                        }
-                    }
-                });
-
-                var child = {
-                    identifier: {
-                        namespace: '',
-                        key: 'childId'
-                    },
-                    name: 'child',
-                    location: 'parentId'
-                };
-                context.domainObject = parent;
-                addChild(child);
-
-                action.perform();
-
-                return new Promise(function (resolve, reject) {
-                    setTimeout(resolve, 100);
-                }).then(function () {
-                    expect(Object.keys(action.tree).length).toBe(1);
-                    expect(Object.prototype.hasOwnProperty.call(action.tree, "parentId"))
-                        .toBeTruthy();
-                });
-            });
-
-            it("can export self-containing objects", function () {
-                var parent = domainObjectFactory({
-                    name: 'parent',
-                    model: {
-                        name: 'parent',
-                        location: 'ROOT',
-                        composition: ['infiniteChildId']
-                    },
-                    id: 'infiniteParentId',
-                    capabilities: {
-                        'adapter': {
-                            invoke: invokeAdapter
-                        }
-                    }
-                });
-
-                var child = {
-                    identifier: {
-                        namespace: '',
-                        key: 'infiniteChildId'
-                    },
-                    name: 'child',
-                    location: 'infiniteParentId',
-                    composition: ['infiniteParentId']
-                };
-                addChild(child);
-
-                context.domainObject = parent;
-
-                action.perform();
-
-                return new Promise(function (resolve, reject) {
-                    setTimeout(resolve, 100);
-                }).then(function () {
-                    expect(Object.keys(action.tree).length).toBe(2);
-                    expect(Object.prototype.hasOwnProperty.call(action.tree, "infiniteParentId"))
-                        .toBeTruthy();
-                    expect(Object.prototype.hasOwnProperty.call(action.tree, "infiniteChildId"))
-                        .toBeTruthy();
-                });
-            });
-
-            it("exports links to external objects as new objects", function () {
-                var parent = domainObjectFactory({
-                    name: 'parent',
-                    model: {
-                        name: 'parent',
-                        composition: ['externalId'],
-                        location: 'ROOT'
-                    },
-                    id: 'parentId',
-                    capabilities: {
-                        'adapter': {
-                            invoke: invokeAdapter
-                        }
-                    }
-                });
-
-                var externalObject = {
-                    name: 'external',
-                    location: 'outsideOfTree',
-                    identifier: {
-                        namespace: '',
-                        key: 'externalId'
-                    }
-                };
-                addChild(externalObject);
-
-                context.domainObject = parent;
-
-                return new Promise (function (resolve) {
-                    action.perform();
-                    setTimeout(resolve, 100);
-                }).then(function () {
-                    expect(Object.keys(action.tree).length).toBe(2);
-                    expect(Object.prototype.hasOwnProperty.call(action.tree, "parentId"))
-                        .toBeTruthy();
-                    expect(Object.prototype.hasOwnProperty.call(action.tree, "brandNewId"))
-                        .toBeTruthy();
-                    expect(action.tree.brandNewId.location).toBe('parentId');
-                });
-            });
-
-            it("exports object tree in the correct format", function () {
-                action.perform();
-
-                return new Promise(function (resolve, reject) {
-                    setTimeout(resolve, 100);
-                }).then(function () {
-                    expect(Object.keys(exportedTree).length).toBe(2);
-                    expect(Object.prototype.hasOwnProperty.call(exportedTree, "openmct")).toBeTruthy();
-                    expect(Object.prototype.hasOwnProperty.call(exportedTree, "rootId")).toBeTruthy();
-                });
-            });
-
-            function addChild(object) {
-                mockObjectProvider.objects[object.identifier.key] = object;
-            }
-        });
-    }
-);
diff --git a/platform/import-export/test/actions/ImportAsJSONActionSpec.js b/platform/import-export/test/actions/ImportAsJSONActionSpec.js
deleted file mode 100644
index 717032b9eae..00000000000
--- a/platform/import-export/test/actions/ImportAsJSONActionSpec.js
+++ /dev/null
@@ -1,235 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [
-        "../../src/actions/ImportAsJSONAction",
-        "../../../entanglement/test/DomainObjectFactory"
-    ],
-    function (ImportAsJSONAction, domainObjectFactory) {
-
-        xdescribe("The import JSON action", function () {
-
-            var context = {};
-            var action,
-                exportService,
-                identifierService,
-                dialogService,
-                openmct,
-                mockDialog,
-                compositionCapability,
-                mockInstantiate,
-                uniqueId,
-                newObjects;
-
-            beforeEach(function () {
-
-                uniqueId = 0;
-                newObjects = [];
-                openmct = {
-                    $injector: jasmine.createSpyObj('$injector', ['get']),
-                    objects: {
-                        makeKeyString: function (identifier) {
-                            return identifier.key;
-                        }
-                    }
-                };
-                mockInstantiate = jasmine.createSpy('instantiate').and.callFake(
-                    function (model, id) {
-                        var config = {
-                            "model": model,
-                            "id": id,
-                            "capabilities": {}
-                        };
-                        var locationCapability = {
-                            setPrimaryLocation: jasmine.createSpy('setPrimaryLocation')
-                                .and
-                                .callFake(function (newLocation) {
-                                    config.model.location = newLocation;
-                                })
-                        };
-                        config.capabilities.location = locationCapability;
-                        if (model.composition) {
-                            var compCapability =
-                                jasmine.createSpy('compCapability')
-                                    .and.returnValue(model.composition);
-                            compCapability.add = jasmine.createSpy('add')
-                                .and.callFake(function (newObj) {
-                                    config.model.composition.push(newObj.getId());
-                                });
-                            config.capabilities.composition = compCapability;
-                        }
-
-                        newObjects.push(domainObjectFactory(config));
-
-                        return domainObjectFactory(config);
-                    });
-                openmct.$injector.get.and.returnValue(mockInstantiate);
-                dialogService = jasmine.createSpyObj('dialogService',
-                    [
-                        'getUserInput',
-                        'showBlockingMessage'
-                    ]
-                );
-                identifierService = jasmine.createSpyObj('identifierService',
-                    [
-                        'generate'
-                    ]
-                );
-                identifierService.generate.and.callFake(function () {
-                    uniqueId++;
-
-                    return uniqueId;
-                });
-                compositionCapability = jasmine.createSpy('compositionCapability');
-                mockDialog = jasmine.createSpyObj("dialog", ["dismiss"]);
-                dialogService.showBlockingMessage.and.returnValue(mockDialog);
-
-                action = new ImportAsJSONAction(exportService, identifierService,
-                    dialogService, openmct, context);
-            });
-
-            it("initializes happily", function () {
-                expect(action).toBeDefined();
-            });
-
-            it("only applies to objects with composition capability", function () {
-                var compDomainObject = domainObjectFactory({
-                    name: 'compObject',
-                    model: { name: 'compObject'},
-                    capabilities: {"composition": compositionCapability}
-                });
-                var noCompDomainObject = domainObjectFactory();
-
-                context.domainObject = compDomainObject;
-                expect(ImportAsJSONAction.appliesTo(context)).toBe(true);
-                context.domainObject = noCompDomainObject;
-                expect(ImportAsJSONAction.appliesTo(context)).toBe(false);
-            });
-
-            it("displays error dialog on invalid file choice", function () {
-                dialogService.getUserInput.and.returnValue(Promise.resolve(
-                    {
-                        selectFile: {
-                            body: JSON.stringify({badKey: "INVALID"}),
-                            name: "fileName"
-                        }
-                    })
-                );
-
-                action.perform();
-
-                return new Promise(function (resolve, reject) {
-                    setTimeout(resolve, 100);
-                }).then(function () {
-                    expect(dialogService.getUserInput).toHaveBeenCalled();
-                    expect(dialogService.showBlockingMessage).toHaveBeenCalled();
-                });
-            });
-
-            it("can import self-containing objects", function () {
-                var compDomainObject = domainObjectFactory({
-                    name: 'compObject',
-                    model: { name: 'compObject'},
-                    capabilities: {"composition": compositionCapability}
-                });
-                context.domainObject = compDomainObject;
-
-                dialogService.getUserInput.and.returnValue(Promise.resolve(
-                    {
-                        selectFile: {
-                            body: JSON.stringify({
-                                "openmct": {
-                                    "infiniteParent": {
-                                        "composition": [{
-                                            key: "infinteChild",
-                                            namespace: ""
-                                        }],
-                                        "name": "1",
-                                        "type": "folder",
-                                        "modified": 1503598129176,
-                                        "location": "mine",
-                                        "persisted": 1503598129176
-                                    },
-                                    "infinteChild": {
-                                        "composition": [{
-                                            key: "infinteParent",
-                                            namespace: ""
-                                        }],
-                                        "name": "2",
-                                        "type": "folder",
-                                        "modified": 1503598132428,
-                                        "location": "infiniteParent",
-                                        "persisted": 1503598132428
-                                    }
-                                },
-                                "rootId": "infiniteParent"
-                            }),
-                            name: "fileName"
-                        }
-                    })
-                );
-
-                action.perform();
-
-                return new Promise(function (resolve, reject) {
-                    setTimeout(resolve, 100);
-                }).then(function () {
-                    expect(mockInstantiate.calls.count()).toEqual(2);
-                });
-            });
-
-            it("assigns new ids to each imported object", function () {
-                dialogService.getUserInput.and.returnValue(Promise.resolve(
-                    {
-                        selectFile: {
-                            body: JSON.stringify({
-                                "openmct": {
-                                    "cce9f107-5060-4f55-8151-a00120f4222f": {
-                                        "composition": [],
-                                        "name": "test",
-                                        "type": "folder",
-                                        "modified": 1503596596639,
-                                        "location": "mine",
-                                        "persisted": 1503596596639
-                                    }
-                                },
-                                "rootId": "cce9f107-5060-4f55-8151-a00120f4222f"
-                            }),
-                            name: "fileName"
-                        }
-                    })
-                );
-
-                action.perform();
-
-                return new Promise(function (resolve, reject) {
-                    setTimeout(resolve, 100);
-                }).then(function () {
-                    expect(mockInstantiate.calls.count()).toEqual(1);
-                    expect(newObjects[0].getId()).toBe('1');
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/persistence/README.md b/platform/persistence/README.md
deleted file mode 100644
index e5ffbd156d7..00000000000
--- a/platform/persistence/README.md
+++ /dev/null
@@ -1 +0,0 @@
-This directory contains bundles relating to the persistence of domain objects.
diff --git a/platform/persistence/aggregator/bundle.js b/platform/persistence/aggregator/bundle.js
deleted file mode 100644
index 142cfc2a58d..00000000000
--- a/platform/persistence/aggregator/bundle.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/PersistenceAggregator"
-], function (
-    PersistenceAggregator
-) {
-
-    return {
-        name: "platform/persistence/aggregator",
-        definition: {
-            "extensions": {
-                "components": [
-                    {
-                        "provides": "persistenceService",
-                        "type": "aggregator",
-                        "depends": [
-                            "$q"
-                        ],
-                        "implementation": PersistenceAggregator
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/persistence/aggregator/src/PersistenceAggregator.js b/platform/persistence/aggregator/src/PersistenceAggregator.js
deleted file mode 100644
index 712511df8bd..00000000000
--- a/platform/persistence/aggregator/src/PersistenceAggregator.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        // Return values to use when a persistence space is unknown,
-        // and there is no appropriate provider to route to.
-        var METHOD_DEFAULTS = {
-            createObject: false,
-            readObject: undefined,
-            listObjects: [],
-            updateObject: false,
-            deleteObject: false
-        };
-
-        /**
-         * Aggregates multiple persistence providers, such that they can be
-         * utilized as if they were a single object. This is achieved by
-         * routing persistence calls to an appropriate provider; the space
-         * specified at call time is matched with the first provider (per
-         * priority order) which reports that it provides persistence for
-         * this space.
-         *
-         * @memberof platform/persistence/aggregator
-         * @constructor
-         * @implements {PersistenceService}
-         * @param $q Angular's $q, for promises
-         * @param {PersistenceService[]} providers the providers to aggregate
-         */
-        function PersistenceAggregator($q, providers) {
-            var providerMap = {};
-
-            function addToMap(provider) {
-                return provider.listSpaces().then(function (spaces) {
-                    spaces.forEach(function (space) {
-                        providerMap[space] = providerMap[space] || provider;
-                    });
-                });
-            }
-
-            this.providerMapPromise = $q.all(providers.map(addToMap))
-                .then(function () {
-                    return providerMap;
-                });
-        }
-
-        PersistenceAggregator.prototype.listSpaces = function () {
-            return this.providerMapPromise.then(function (map) {
-                return Object.keys(map);
-            });
-        };
-
-        Object.keys(METHOD_DEFAULTS).forEach(function (method) {
-            PersistenceAggregator.prototype[method] = function (space) {
-                var delegateArgs = Array.prototype.slice.apply(arguments, []);
-
-                return this.providerMapPromise.then(function (map) {
-                    var provider = map[space];
-
-                    return provider
-                        ? provider[method].apply(provider, delegateArgs)
-                        : METHOD_DEFAULTS[method];
-                });
-            };
-        });
-
-        return PersistenceAggregator;
-    }
-);
diff --git a/platform/persistence/aggregator/test/PersistenceAggregatorSpec.js b/platform/persistence/aggregator/test/PersistenceAggregatorSpec.js
deleted file mode 100644
index 62b9e354033..00000000000
--- a/platform/persistence/aggregator/test/PersistenceAggregatorSpec.js
+++ /dev/null
@@ -1,105 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['../src/PersistenceAggregator'],
-    function (PersistenceAggregator) {
-
-        var PERSISTENCE_SERVICE_METHODS = [
-                'listSpaces',
-                'listObjects',
-                'createObject',
-                'readObject',
-                'updateObject',
-                'deleteObject'
-            ],
-            WRAPPED_METHODS = PERSISTENCE_SERVICE_METHODS.filter(function (m) {
-                return m !== 'listSpaces';
-            });
-
-        function fakePromise(value) {
-            return (value || {}).then ? value : {
-                then: function (callback) {
-                    return fakePromise(callback(value));
-                }
-            };
-        }
-
-        describe("PersistenceAggregator", function () {
-            var mockQ,
-                mockProviders,
-                mockCallback,
-                testSpaces,
-                aggregator;
-
-            beforeEach(function () {
-                testSpaces = ['a', 'b', 'c'];
-                mockQ = jasmine.createSpyObj("$q", ['all']);
-                mockProviders = testSpaces.map(function (space) {
-                    var mockProvider = jasmine.createSpyObj(
-                        'provider-' + space,
-                        PERSISTENCE_SERVICE_METHODS
-                    );
-                    PERSISTENCE_SERVICE_METHODS.forEach(function (m) {
-                        mockProvider[m].and.returnValue(fakePromise(true));
-                    });
-                    mockProvider.listSpaces.and.returnValue(fakePromise([space]));
-
-                    return mockProvider;
-                });
-                mockCallback = jasmine.createSpy();
-
-                mockQ.all.and.callFake(function (fakePromises) {
-                    var result = [];
-                    fakePromises.forEach(function (p) {
-                        p.then(function (v) {
-                            result.push(v);
-                        });
-                    });
-
-                    return fakePromise(result);
-                });
-
-                aggregator = new PersistenceAggregator(mockQ, mockProviders);
-            });
-
-            it("exposes spaces for all providers", function () {
-                aggregator.listSpaces().then(mockCallback);
-                expect(mockCallback).toHaveBeenCalledWith(testSpaces);
-            });
-
-            WRAPPED_METHODS.forEach(function (m) {
-                it("redirects " + m + " calls to an appropriate provider", function () {
-                    testSpaces.forEach(function (space, index) {
-                        var key = 'key-' + space,
-                            value = 'val-' + space;
-                        expect(aggregator[m](space, key, value))
-                            .toEqual(mockProviders[index][m]());
-                        expect(mockProviders[index][m])
-                            .toHaveBeenCalledWith(space, key, value);
-                    });
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/persistence/elastic/README.md b/platform/persistence/elastic/README.md
deleted file mode 100644
index 413501d9ca5..00000000000
--- a/platform/persistence/elastic/README.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Elasticsearch Persistence Provider
-An adapter for using Elastic for persistence of user-created objects. The installation function takes the URL for an 
-Elasticsearch server as a parameter.
-
-## Installation
-```js
-openmct.install(openmct.plugins.Elasticsearch('http://localhost:9200'))
-```
\ No newline at end of file
diff --git a/platform/persistence/elastic/bundle.js b/platform/persistence/elastic/bundle.js
deleted file mode 100644
index 7fedf6e51da..00000000000
--- a/platform/persistence/elastic/bundle.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/ElasticPersistenceProvider",
-    "./src/ElasticSearchProvider",
-    "./src/ElasticIndicator"
-], function (
-    ElasticPersistenceProvider,
-    ElasticSearchProvider,
-    ElasticIndicator
-) {
-
-    return {
-        name: "platform/persistence/elastic",
-        definition: {
-            "name": "ElasticSearch Persistence",
-            "description": "Adapter to read and write objects using an ElasticSearch instance.",
-            "extensions": {
-                "components": [
-                    {
-                        "provides": "persistenceService",
-                        "type": "provider",
-                        "implementation": ElasticPersistenceProvider,
-                        "depends": [
-                            "$http",
-                            "$q",
-                            "PERSISTENCE_SPACE",
-                            "ELASTIC_ROOT",
-                            "ELASTIC_PATH"
-                        ]
-                    },
-                    {
-                        "provides": "searchService",
-                        "type": "provider",
-                        "implementation": ElasticSearchProvider,
-                        "depends": [
-                            "$http",
-                            "ELASTIC_ROOT"
-                        ]
-                    }
-                ],
-                "constants": [
-                    {
-                        "key": "PERSISTENCE_SPACE",
-                        "value": "mct"
-                    },
-                    {
-                        "key": "ELASTIC_ROOT",
-                        "value": "http://localhost:9200",
-                        "priority": "fallback"
-                    },
-                    {
-                        "key": "ELASTIC_PATH",
-                        "value": "mct/_doc",
-                        "priority": "fallback"
-                    },
-                    {
-                        "key": "ELASTIC_INDICATOR_INTERVAL",
-                        "value": 15000,
-                        "priority": "fallback"
-                    }
-                ],
-                "indicators": [
-                    {
-                        "implementation": ElasticIndicator,
-                        "depends": [
-                            "$http",
-                            "$interval",
-                            "ELASTIC_ROOT",
-                            "ELASTIC_INDICATOR_INTERVAL"
-                        ]
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/persistence/elastic/src/ElasticIndicator.js b/platform/persistence/elastic/src/ElasticIndicator.js
deleted file mode 100644
index dcb9e86eb5f..00000000000
--- a/platform/persistence/elastic/src/ElasticIndicator.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        // Set of connection states; changing among these states will be
-        // reflected in the indicator's appearance.
-        // CONNECTED: Everything nominal, expect to be able to read/write.
-        // DISCONNECTED: HTTP failed; maybe misconfigured, disconnected.
-        // PENDING: Still trying to connect, and haven't failed yet.
-        var CONNECTED = {
-                text: "Connected",
-                glyphClass: "ok",
-                statusClass: "s-status-on",
-                description: "Connected to the domain object database."
-            },
-            DISCONNECTED = {
-                text: "Disconnected",
-                glyphClass: "err",
-                statusClass: "s-status-caution",
-                description: "Unable to connect to the domain object database."
-            },
-            PENDING = {
-                text: "Checking connection..."
-            };
-
-        /**
-         * Indicator for the current ElasticSearch connection. Polls
-         * ElasticSearch at a regular interval (defined by bundle constants)
-         * to ensure that the database is available.
-         * @constructor
-         * @memberof platform/persistence/elastic
-         * @implements {Indicator}
-         * @param $http Angular's $http service
-         * @param $interval Angular's $interval service
-         * @param {string} path the URL to poll for elasticsearch availability
-         * @param {number} interval the interval, in milliseconds, to poll at
-         */
-        function ElasticIndicator($http, $interval, path, interval) {
-            // Track the current connection state
-            var self = this;
-
-            this.state = PENDING;
-
-            // Callback if the HTTP request to ElasticSearch fails
-            function handleError() {
-                self.state = DISCONNECTED;
-            }
-
-            // Callback if the HTTP request succeeds.
-            function handleResponse() {
-                self.state = CONNECTED;
-            }
-
-            // Try to connect to ElasticSearch, and update the indicator.
-            function updateIndicator() {
-                $http.get(path).then(handleResponse, handleError);
-            }
-
-            // Update the indicator initially, and start polling.
-            updateIndicator();
-            $interval(updateIndicator, interval, 0, false);
-        }
-
-        ElasticIndicator.prototype.getCssClass = function () {
-            return "c-indicator--clickable icon-suitcase";
-        };
-
-        ElasticIndicator.prototype.getGlyphClass = function () {
-            return this.state.glyphClass;
-        };
-
-        ElasticIndicator.prototype.getText = function () {
-            return this.state.text;
-        };
-
-        ElasticIndicator.prototype.getDescription = function () {
-            return this.state.description;
-        };
-
-        return ElasticIndicator;
-    }
-);
diff --git a/platform/persistence/elastic/src/ElasticPersistenceProvider.js b/platform/persistence/elastic/src/ElasticPersistenceProvider.js
deleted file mode 100644
index f9f1e5367c0..00000000000
--- a/platform/persistence/elastic/src/ElasticPersistenceProvider.js
+++ /dev/null
@@ -1,168 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * This bundle implements a persistence service which uses ElasticSearch to
- * store documents.
- * @namespace platform/persistence/elastic
- */
-define(
-    [],
-    function () {
-
-        // JSLint doesn't like underscore-prefixed properties,
-        // so hide them here.
-        var SRC = "_source",
-            CONFLICT = 409,
-            SEQ_NO = "_seq_no",
-            PRIMARY_TERM = "_primary_term";
-
-        /**
-         * The ElasticPersistenceProvider reads and writes JSON documents
-         * (more specifically, domain object models) to/from an ElasticSearch
-         * instance.
-         * @memberof platform/persistence/elastic
-         * @constructor
-         * @implements {PersistenceService}
-         * @param $http Angular's $http service
-         * @param $interval Angular's $interval service
-         * @param {string} space the name of the persistence space being served
-         * @param {string} root the root of the path to ElasticSearch
-         * @param {stirng} path the path to domain objects within ElasticSearch
-         */
-        function ElasticPersistenceProvider($http, $q, space, root, path) {
-            this.spaces = [space];
-            this.revs = {};
-            this.$http = $http;
-            this.$q = $q;
-            this.root = root;
-            this.path = path;
-        }
-
-        // Issue a request using $http; get back the plain JS object
-        // from the expected JSON response
-        ElasticPersistenceProvider.prototype.request = function (subpath, method, value, params) {
-            return this.$http({
-                method: method,
-                url: this.root + '/' + this.path + '/' + subpath,
-                params: params,
-                data: value
-            }).then(function (response) {
-                return response.data;
-            }, function (response) {
-                return (response || {}).data;
-            });
-        };
-
-        // Shorthand methods for GET/PUT methods
-        ElasticPersistenceProvider.prototype.get = function (subpath) {
-            return this.request(subpath, "GET");
-        };
-
-        ElasticPersistenceProvider.prototype.put = function (subpath, value, params) {
-            return this.request(subpath, "PUT", value, params);
-        };
-
-        ElasticPersistenceProvider.prototype.del = function (subpath) {
-            return this.request(subpath, "DELETE");
-        };
-
-        // Handle an update error
-        ElasticPersistenceProvider.prototype.handleError = function (response, key) {
-            var error = new Error("Persistence error."),
-                $q = this.$q;
-            if ((response || {}).status === CONFLICT) {
-                error.key = "revision";
-
-                // Load the updated model, then reject the promise
-                return this.get(key).then(function (res) {
-                    error.model = res[SRC];
-
-                    return $q.reject(error);
-                });
-            }
-
-            // Reject the promise
-            return this.$q.reject(error);
-        };
-
-        // Get a domain object model out of ElasticSearch's response
-        ElasticPersistenceProvider.prototype.getModel = function (response) {
-            if (response && response[SRC]) {
-                this.revs[response[SEQ_NO]] = response[SEQ_NO];
-                this.revs[response[PRIMARY_TERM]] = response[PRIMARY_TERM];
-
-                return response[SRC];
-            } else {
-                return undefined;
-            }
-        };
-
-        // Check the response to a create/update/delete request;
-        // track the rev if it's valid, otherwise return false to
-        // indicate that the request failed.
-        ElasticPersistenceProvider.prototype.checkResponse = function (response, key) {
-            if (response && !response.error) {
-                this.revs[SEQ_NO] = response[SEQ_NO];
-                this.revs[PRIMARY_TERM] = response[PRIMARY_TERM];
-
-                return response;
-            } else {
-                return this.handleError(response, key);
-            }
-        };
-
-        // Public API
-        ElasticPersistenceProvider.prototype.listSpaces = function () {
-            return this.$q.when(this.spaces);
-        };
-
-        ElasticPersistenceProvider.prototype.listObjects = function () {
-            // Not yet implemented
-            return this.$q.when([]);
-        };
-
-        ElasticPersistenceProvider.prototype.createObject = function (space, key, value) {
-            return this.put(key, value).then(this.checkResponse.bind(this));
-        };
-
-        ElasticPersistenceProvider.prototype.readObject = function (space, key) {
-            return this.get(key).then(this.getModel.bind(this));
-        };
-
-        ElasticPersistenceProvider.prototype.updateObject = function (space, key, value) {
-            var self = this;
-            function checkUpdate(response) {
-                return self.checkResponse(response, key);
-            }
-
-            return this.put(key, value)
-                .then(checkUpdate);
-        };
-
-        ElasticPersistenceProvider.prototype.deleteObject = function (space, key) {
-            return this.del(key).then(this.checkResponse.bind(this));
-        };
-
-        return ElasticPersistenceProvider;
-    }
-);
diff --git a/platform/persistence/elastic/src/ElasticSearchProvider.js b/platform/persistence/elastic/src/ElasticSearchProvider.js
deleted file mode 100644
index 28ce84362d3..00000000000
--- a/platform/persistence/elastic/src/ElasticSearchProvider.js
+++ /dev/null
@@ -1,142 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining ElasticSearchProvider. Created by shale on 07/16/2015.
- */
-define([
-
-], function (
-
-) {
-
-    var ID_PROPERTY = '_id',
-        SOURCE_PROPERTY = '_source',
-        SCORE_PROPERTY = '_score';
-
-    /**
-     * A search service which searches through domain objects in
-     * the filetree using ElasticSearch.
-     *
-     * @constructor
-     * @param $http Angular's $http service, for working with urls.
-     * @param ROOT the constant `ELASTIC_ROOT` which allows us to
-     *        interact with ElasticSearch.
-     */
-    function ElasticSearchProvider($http, ROOT) {
-        this.$http = $http;
-        this.root = ROOT;
-    }
-
-    /**
-     * Search for domain objects using elasticsearch as a search provider.
-     *
-     * @param {String} searchTerm the term to search by.
-     * @param {Number} [maxResults] the max number of results to return.
-     * @returns {Promise} promise for a modelResults object.
-     */
-    ElasticSearchProvider.prototype.query = function (searchTerm, maxResults) {
-        var searchUrl = this.root + '/_search/',
-            params = {},
-            provider = this;
-
-        searchTerm = this.cleanTerm(searchTerm);
-        searchTerm = this.fuzzyMatchUnquotedTerms(searchTerm);
-
-        params.q = searchTerm;
-        params.size = maxResults;
-
-        return this
-            .$http({
-                method: "GET",
-                url: searchUrl,
-                params: params
-            })
-            .then(function success(succesResponse) {
-                return provider.parseResponse(succesResponse);
-            }, function error() {
-                // Gracefully fail.
-                return {
-                    hits: [],
-                    total: 0
-                };
-            });
-    };
-
-    /**
-     * Clean excess whitespace from a search term and return the cleaned
-     * version.
-     *
-     * @private
-     * @param {string} the search term to clean.
-     * @returns {string} search terms cleaned of excess whitespace.
-     */
-    ElasticSearchProvider.prototype.cleanTerm = function (term) {
-        return term.trim().replace(/ +/g, ' ');
-    };
-
-    /**
-     * Add fuzzy matching markup to search terms that are not quoted.
-     *
-     * The following:
-     *     hello welcome "to quoted village" have fun
-     * will become
-     *     hello~ welcome~ "to quoted village" have~ fun~
-     *
-     * @private
-     */
-    ElasticSearchProvider.prototype.fuzzyMatchUnquotedTerms = function (query) {
-        var matchUnquotedSpaces = '\\s+(?=([^"]*"[^"]*")*[^"]*$)',
-            matcher = new RegExp(matchUnquotedSpaces, 'g');
-
-        return query
-            .replace(matcher, '~ ')
-            .replace(/$/, '~')
-            .replace(/"~+/, '"');
-    };
-
-    /**
-     * Parse the response from ElasticSearch and convert it to a
-     * modelResults object.
-     *
-     * @private
-     * @param response a ES response object from $http
-     * @returns modelResults
-     */
-    ElasticSearchProvider.prototype.parseResponse = function (response) {
-        var results = response.data.hits.hits,
-            searchResults = results.map(function (result) {
-                return {
-                    id: result[ID_PROPERTY],
-                    model: result[SOURCE_PROPERTY],
-                    score: result[SCORE_PROPERTY]
-                };
-            });
-
-        return {
-            hits: searchResults,
-            total: response.data.hits.total
-        };
-    };
-
-    return ElasticSearchProvider;
-});
diff --git a/platform/persistence/elastic/test/ElasticIndicatorSpec.js b/platform/persistence/elastic/test/ElasticIndicatorSpec.js
deleted file mode 100644
index ea4bbd17510..00000000000
--- a/platform/persistence/elastic/test/ElasticIndicatorSpec.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/ElasticIndicator"],
-    function (ElasticIndicator) {
-
-        xdescribe("The ElasticSearch status indicator", function () {
-            var mockHttp,
-                mockInterval,
-                testPath,
-                testInterval,
-                mockPromise,
-                indicator;
-
-            beforeEach(function () {
-                mockHttp = jasmine.createSpyObj("$http", ["get"]);
-                mockInterval = jasmine.createSpy("$interval");
-                mockPromise = jasmine.createSpyObj("promise", ["then"]);
-                testPath = "/test/path";
-                testInterval = 12321; // Some number
-
-                mockHttp.get.and.returnValue(mockPromise);
-
-                indicator = new ElasticIndicator(
-                    mockHttp,
-                    mockInterval,
-                    testPath,
-                    testInterval
-                );
-            });
-
-            it("polls for changes", function () {
-                expect(mockInterval).toHaveBeenCalledWith(
-                    jasmine.any(Function),
-                    testInterval,
-                    0,
-                    false
-                );
-            });
-
-            it("has a database icon", function () {
-                expect(indicator.getCssClass()).toEqual("icon-suitcase");
-            });
-
-            it("consults the database at the configured path", function () {
-                expect(mockHttp.get).toHaveBeenCalledWith(testPath);
-            });
-
-            it("changes when the database connection is nominal", function () {
-                var initialText = indicator.getText(),
-                    initialDescrption = indicator.getDescription(),
-                    initialGlyphClass = indicator.getGlyphClass();
-
-                // Nominal just means getting back an object, without
-                // an error field.
-                mockPromise.then.calls.mostRecent().args[0]({ data: {} });
-
-                // Verify that these values changed;
-                // don't test for specific text.
-                expect(indicator.getText()).not.toEqual(initialText);
-                expect(indicator.getGlyphClass()).not.toEqual(initialGlyphClass);
-                expect(indicator.getDescription()).not.toEqual(initialDescrption);
-
-                // Do check for specific class
-                expect(indicator.getGlyphClass()).toEqual("ok");
-            });
-
-            it("changes when the server cannot be reached", function () {
-                var initialText = indicator.getText(),
-                    initialDescrption = indicator.getDescription(),
-                    initialGlyphClass = indicator.getGlyphClass();
-
-                // Nominal just means getting back an object, without
-                // an error field.
-                mockPromise.then.calls.mostRecent().args[1]({ data: {} });
-
-                // Verify that these values changed;
-                // don't test for specific text.
-                expect(indicator.getText()).not.toEqual(initialText);
-                expect(indicator.getGlyphClass()).not.toEqual(initialGlyphClass);
-                expect(indicator.getDescription()).not.toEqual(initialDescrption);
-
-                // Do check for specific class
-                expect(indicator.getGlyphClass()).toEqual("err");
-            });
-
-        });
-    }
-);
diff --git a/platform/persistence/elastic/test/ElasticPersistenceProviderSpec.js b/platform/persistence/elastic/test/ElasticPersistenceProviderSpec.js
deleted file mode 100644
index 18a3836bd44..00000000000
--- a/platform/persistence/elastic/test/ElasticPersistenceProviderSpec.js
+++ /dev/null
@@ -1,253 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/ElasticPersistenceProvider"],
-    function (ElasticPersistenceProvider) {
-
-        describe("The ElasticSearch persistence provider", function () {
-            var mockHttp,
-                mockQ,
-                testSpace = "testSpace",
-                testRoot = "/test",
-                testPath = "db",
-                capture,
-                provider;
-
-            function mockPromise(value) {
-                return (value || {}).then ? value : {
-                    then: function (callback) {
-                        return mockPromise(callback(value));
-                    }
-                };
-            }
-
-            beforeEach(function () {
-                mockHttp = jasmine.createSpy("$http");
-                mockQ = jasmine.createSpyObj("$q", ["when", "reject"]);
-
-                mockQ.when.and.callFake(mockPromise);
-                mockQ.reject.and.callFake(function (value) {
-                    return {
-                        then: function (ignored, callback) {
-                            return mockPromise(callback(value));
-                        }
-                    };
-                });
-
-                // Capture promise results
-                capture = jasmine.createSpy("capture");
-
-                provider = new ElasticPersistenceProvider(
-                    mockHttp,
-                    mockQ,
-                    testSpace,
-                    testRoot,
-                    testPath
-                );
-            });
-
-            it("reports available spaces", function () {
-                provider.listSpaces().then(capture);
-                expect(capture).toHaveBeenCalledWith([testSpace]);
-            });
-
-            // General pattern of tests below is to simulate ElasticSearch's
-            // response, verify that request looks like what ElasticSearch
-            // would expect, and finally verify that ElasticPersistenceProvider's
-            // return values match what is expected.
-            it("lists all available documents", function () {
-                // Not implemented yet
-                provider.listObjects().then(capture);
-                expect(capture).toHaveBeenCalledWith([]);
-            });
-
-            it("allows object creation", function () {
-                var model = { someKey: "some value" };
-                mockHttp.and.returnValue(mockPromise({
-                    data: {
-                        "_id": "abc",
-                        "_seq_no": 1,
-                        "_primary_term": 1
-                    }
-                }));
-                provider.createObject("testSpace", "abc", model).then(capture);
-                expect(mockHttp).toHaveBeenCalledWith({
-                    url: "/test/db/abc",
-                    method: "PUT",
-                    data: model,
-                    params: undefined
-                });
-                expect(capture.calls.mostRecent().args[0]).toBeTruthy();
-            });
-
-            it("allows object models to be read back", function () {
-                var model = { someKey: "some value" };
-                mockHttp.and.returnValue(mockPromise({
-                    data: {
-                        "_id": "abc",
-                        "_seq_no": 1,
-                        "_primary_term": 1,
-                        "_source": model
-                    }
-                }));
-                provider.readObject("testSpace", "abc").then(capture);
-                expect(mockHttp).toHaveBeenCalledWith({
-                    url: "/test/db/abc",
-                    method: "GET",
-                    params: undefined,
-                    data: undefined
-                });
-                expect(capture).toHaveBeenCalledWith(model);
-            });
-
-            it("allows object update", function () {
-                var model = { someKey: "some value" };
-
-                // First do a read to populate rev tags...
-                mockHttp.and.returnValue(mockPromise({
-                    data: {
-                        "_id": "abc",
-                        "_source": {}
-                    }
-                }));
-                provider.readObject("testSpace", "abc");
-
-                // Now perform an update
-                mockHttp.and.returnValue(mockPromise({
-                    data: {
-                        "_id": "abc",
-                        "_seq_no": 1,
-                        "_source": {}
-                    }
-                }));
-                provider.updateObject("testSpace", "abc", model).then(capture);
-                expect(mockHttp).toHaveBeenCalledWith({
-                    url: "/test/db/abc",
-                    method: "PUT",
-                    params: undefined,
-                    data: model
-                });
-                expect(capture.calls.mostRecent().args[0]).toBeTruthy();
-            });
-
-            it("allows object deletion", function () {
-                // First do a read to populate rev tags...
-                mockHttp.and.returnValue(mockPromise({
-                    data: {
-                        "_id": "abc",
-                        "_source": {}
-                    }
-                }));
-                provider.readObject("testSpace", "abc");
-
-                // Now perform an update
-                mockHttp.and.returnValue(mockPromise({
-                    data: {
-                        "_id": "abc",
-                        "_source": {}
-                    }
-                }));
-                provider.deleteObject("testSpace", "abc", {}).then(capture);
-                expect(mockHttp).toHaveBeenCalledWith({
-                    url: "/test/db/abc",
-                    method: "DELETE",
-                    params: undefined,
-                    data: undefined
-                });
-                expect(capture.calls.mostRecent().args[0]).toBeTruthy();
-            });
-
-            it("returns undefined when objects are not found", function () {
-                // Act like a 404
-                mockHttp.and.returnValue({
-                    then: function (success, fail) {
-                        return mockPromise(fail());
-                    }
-                });
-                provider.readObject("testSpace", "abc").then(capture);
-                expect(capture).toHaveBeenCalledWith(undefined);
-            });
-
-            it("handles rejection due to _seq_no", function () {
-                var model = { someKey: "some value" },
-                    mockErrorCallback = jasmine.createSpy('error');
-
-                // First do a read to populate rev tags...
-                mockHttp.and.returnValue(mockPromise({
-                    data: {
-                        "_id": "abc",
-                        "_seq_no": 1,
-                        "_source": {}
-                    }
-                }));
-                provider.readObject("testSpace", "abc");
-
-                // Now perform an update
-                mockHttp.and.returnValue(mockPromise({
-                    data: {
-                        "status": 409,
-                        "error": "Revision error..."
-                    }
-                }));
-                provider.updateObject("testSpace", "abc", model).then(
-                    capture,
-                    mockErrorCallback
-                );
-
-                expect(capture).not.toHaveBeenCalled();
-                expect(mockErrorCallback).toHaveBeenCalled();
-            });
-
-            it("handles rejection due to unknown reasons", function () {
-                var model = { someKey: "some value" },
-                    mockErrorCallback = jasmine.createSpy('error');
-
-                // First do a read to populate rev tags...
-                mockHttp.and.returnValue(mockPromise({
-                    data: {
-                        "_id": "abc",
-                        "_seq_no": 1,
-                        "_source": {}
-                    }
-                }));
-                provider.readObject("testSpace", "abc");
-
-                // Now perform an update
-                mockHttp.and.returnValue(mockPromise({
-                    data: {
-                        "status": 410,
-                        "error": "Revision error..."
-                    }
-                }));
-                provider.updateObject("testSpace", "abc", model).then(
-                    capture,
-                    mockErrorCallback
-                );
-
-                expect(capture).not.toHaveBeenCalled();
-                expect(mockErrorCallback).toHaveBeenCalled();
-            });
-
-        });
-    }
-);
diff --git a/platform/persistence/elastic/test/ElasticSearchProviderSpec.js b/platform/persistence/elastic/test/ElasticSearchProviderSpec.js
deleted file mode 100644
index 0c751ed3db9..00000000000
--- a/platform/persistence/elastic/test/ElasticSearchProviderSpec.js
+++ /dev/null
@@ -1,164 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- *  SearchSpec. Created by shale on 07/31/2015.
- */
-define([
-    '../src/ElasticSearchProvider'
-], function (
-    ElasticSearchProvider
-) {
-
-    describe('ElasticSearchProvider', function () {
-        var $http,
-            ROOT,
-            provider;
-
-        beforeEach(function () {
-            $http = jasmine.createSpy('$http');
-            ROOT = 'http://localhost:9200';
-
-            provider = new ElasticSearchProvider($http, ROOT);
-        });
-
-        describe('query', function () {
-            beforeEach(function () {
-                spyOn(provider, 'cleanTerm').and.returnValue('cleanedTerm');
-                spyOn(provider, 'fuzzyMatchUnquotedTerms').and.returnValue('fuzzy');
-                spyOn(provider, 'parseResponse').and.returnValue('parsedResponse');
-                $http.and.returnValue(Promise.resolve({
-                    data: {
-                        hits: {
-                            hits: []
-                        }
-                    }
-                }));
-            });
-
-            it('cleans terms and adds fuzzyness', function () {
-                return provider.query('hello', 10)
-                    .then(() => {
-                        expect(provider.cleanTerm).toHaveBeenCalledWith('hello');
-                        expect(provider.fuzzyMatchUnquotedTerms)
-                            .toHaveBeenCalledWith('cleanedTerm');
-                    });
-            });
-
-            it('calls through to $http', function () {
-                return provider.query('hello', 10).then(() => {
-                    expect($http).toHaveBeenCalledWith({
-                        method: 'GET',
-                        params: {
-                            q: 'fuzzy',
-                            size: 10
-                        },
-                        url: 'http://localhost:9200/_search/'
-                    });
-                });
-            });
-
-            it('gracefully fails when http fails', function () {
-                $http.and.returnValue(Promise.reject());
-
-                return provider
-                    .query('hello', 10)
-                    .then(function (results) {
-                        expect(results).toEqual({
-                            hits: [],
-                            total: 0
-                        });
-                    });
-            });
-
-            it('parses and returns when http succeeds', function () {
-                $http.and.returnValue(Promise.resolve('successResponse'));
-
-                return provider
-                    .query('hello', 10)
-                    .then(function (results) {
-                        expect(provider.parseResponse)
-                            .toHaveBeenCalledWith('successResponse');
-                        expect(results).toBe('parsedResponse');
-                    });
-            });
-        });
-
-        it('can clean terms', function () {
-            expect(provider.cleanTerm('   asdhs  ')).toBe('asdhs');
-            expect(provider.cleanTerm('  and some    words'))
-                .toBe('and some words');
-            expect(provider.cleanTerm('Nice input')).toBe('Nice input');
-        });
-
-        it('can create fuzzy term matchers', function () {
-            expect(provider.fuzzyMatchUnquotedTerms('pwr dvc 43'))
-                .toBe('pwr~ dvc~ 43~');
-
-            expect(provider.fuzzyMatchUnquotedTerms(
-                'hello welcome "to quoted village" have fun'
-            )).toBe(
-                'hello~ welcome~ "to quoted village" have~ fun~'
-            );
-        });
-
-        it('can parse responses', function () {
-            var elasticSearchResponse = {
-                data: {
-                    hits: {
-                        total: 2,
-                        hits: [
-                            {
-                                '_id': 'hit1Id',
-                                '_source': 'hit1Model',
-                                '_score': 0.56
-                            },
-                            {
-                                '_id': 'hit2Id',
-                                '_source': 'hit2Model',
-                                '_score': 0.34
-                            }
-                        ]
-                    }
-                }
-            };
-
-            expect(provider.parseResponse(elasticSearchResponse))
-                .toEqual({
-                    hits: [
-                        {
-                            id: 'hit1Id',
-                            model: 'hit1Model',
-                            score: 0.56
-                        },
-                        {
-                            id: 'hit2Id',
-                            model: 'hit2Model',
-                            score: 0.34
-                        }
-                    ],
-                    total: 2
-                });
-        });
-    });
-
-});
diff --git a/platform/persistence/local/README.md b/platform/persistence/local/README.md
deleted file mode 100644
index 553fa499a31..00000000000
--- a/platform/persistence/local/README.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Local Storage Plugin
-Provides persistence of user-created objects in browser Local Storage. Objects persisted in this way will only be 
-available from the browser and machine on which they were persisted. For shared persistence, consider the 
-[Elasticsearch](../elastic/) and [CouchDB](../couch/) persistence plugins.
-
-## Installation
-```js
-openmct.install(openmct.plugins.LocalStorage());
-```
\ No newline at end of file
diff --git a/platform/persistence/local/bundle.js b/platform/persistence/local/bundle.js
deleted file mode 100644
index 9c150201933..00000000000
--- a/platform/persistence/local/bundle.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/LocalStoragePersistenceProvider",
-    "./src/LocalStorageIndicator"
-], function (
-    LocalStoragePersistenceProvider,
-    LocalStorageIndicator
-) {
-
-    return {
-        name: "platform/persistence/local",
-        definition: {
-            "extensions": {
-                "components": [
-                    {
-                        "provides": "persistenceService",
-                        "type": "provider",
-                        "implementation": LocalStoragePersistenceProvider,
-                        "depends": [
-                            "$window",
-                            "$q",
-                            "PERSISTENCE_SPACE"
-                        ]
-                    }
-                ],
-                "constants": [
-                    {
-                        "key": "PERSISTENCE_SPACE",
-                        "value": "mct"
-                    }
-                ],
-                "indicators": [
-                    {
-                        "implementation": LocalStorageIndicator
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/persistence/local/src/LocalStorageIndicator.js b/platform/persistence/local/src/LocalStorageIndicator.js
deleted file mode 100644
index 5500e67ca8a..00000000000
--- a/platform/persistence/local/src/LocalStorageIndicator.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        var LOCAL_STORAGE_WARNING = [
-            "Using browser local storage for persistence.",
-            "Anything you create or change will only be saved",
-            "in this browser on this machine."
-        ].join(' ');
-
-        /**
-         * Indicator for local storage persistence. Provides a minimum
-         * level of feedback indicating that local storage is in use.
-         * @constructor
-         * @memberof platform/persistence/local
-         * @implements {Indicator}
-         */
-        function LocalStorageIndicator() {
-        }
-
-        LocalStorageIndicator.prototype.getCssClass = function () {
-            return "c-indicator--clickable icon-suitcase s-status-caution";
-        };
-
-        LocalStorageIndicator.prototype.getGlyphClass = function () {
-            return 'caution';
-        };
-
-        LocalStorageIndicator.prototype.getText = function () {
-            return "Off-line storage";
-        };
-
-        LocalStorageIndicator.prototype.getDescription = function () {
-            return LOCAL_STORAGE_WARNING;
-        };
-
-        return LocalStorageIndicator;
-    }
-);
diff --git a/platform/persistence/local/src/LocalStoragePersistenceProvider.js b/platform/persistence/local/src/LocalStoragePersistenceProvider.js
deleted file mode 100644
index 2e087a14d26..00000000000
--- a/platform/persistence/local/src/LocalStoragePersistenceProvider.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * The LocalStoragePersistenceProvider reads and writes JSON documents
-         * (more specifically, domain object models) to/from the browser's
-         * local storage.
-         * @memberof platform/persistence/local
-         * @constructor
-         * @implements {PersistenceService}
-         * @param q Angular's $q, for promises
-         * @param $interval Angular's $interval service
-         * @param {string} space the name of the persistence space being served
-         */
-        function LocalStoragePersistenceProvider($window, $q, space) {
-            this.$q = $q;
-            this.space = space;
-            this.spaces = space ? [space] : [];
-            this.localStorage = $window.localStorage;
-        }
-
-        /**
-         * Set a value in local storage.
-         * @private
-         */
-        LocalStoragePersistenceProvider.prototype.setValue = function (key, value) {
-            this.localStorage[key] = JSON.stringify(value);
-        };
-
-        /**
-         * Get a value from local storage.
-         * @private
-         */
-        LocalStoragePersistenceProvider.prototype.getValue = function (key) {
-            return this.localStorage[key]
-                ? JSON.parse(this.localStorage[key]) : {};
-        };
-
-        LocalStoragePersistenceProvider.prototype.listSpaces = function () {
-            return this.$q.when(this.spaces);
-        };
-
-        LocalStoragePersistenceProvider.prototype.listObjects = function (space) {
-            return this.$q.when(Object.keys(this.getValue(space)));
-        };
-
-        LocalStoragePersistenceProvider.prototype.createObject = function (space, key, value) {
-            var spaceObj = this.getValue(space);
-            spaceObj[key] = value;
-            this.setValue(space, spaceObj);
-
-            return this.$q.when(true);
-        };
-
-        LocalStoragePersistenceProvider.prototype.readObject = function (space, key) {
-            var spaceObj = this.getValue(space);
-
-            return this.$q.when(spaceObj[key]);
-        };
-
-        LocalStoragePersistenceProvider.prototype.deleteObject = function (space, key) {
-            var spaceObj = this.getValue(space);
-            delete spaceObj[key];
-            this.setValue(space, spaceObj);
-
-            return this.$q.when(true);
-        };
-
-        LocalStoragePersistenceProvider.prototype.updateObject =
-            LocalStoragePersistenceProvider.prototype.createObject;
-
-        return LocalStoragePersistenceProvider;
-    }
-);
diff --git a/platform/persistence/local/test/LocalStorageIndicatorSpec.js b/platform/persistence/local/test/LocalStorageIndicatorSpec.js
deleted file mode 100644
index 52042d70ea8..00000000000
--- a/platform/persistence/local/test/LocalStorageIndicatorSpec.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/LocalStorageIndicator"],
-    function (LocalStorageIndicator) {
-
-        xdescribe("The local storage status indicator", function () {
-            var indicator;
-
-            beforeEach(function () {
-                indicator = new LocalStorageIndicator();
-            });
-
-            it("provides text to display in status area", function () {
-                // Don't particularly care what is there so long
-                // as interface is appropriately implemented.
-                expect(indicator.getText()).toEqual(jasmine.any(String));
-            });
-
-            it("has a database icon", function () {
-                expect(indicator.getCssClass()).toEqual("icon-suitcase s-status-caution");
-            });
-
-            it("has a 'caution' class to draw attention", function () {
-                expect(indicator.getGlyphClass()).toEqual("caution");
-            });
-
-            it("provides a description for a tooltip", function () {
-                // Just want some non-empty string here. Providing a
-                // message here is important but don't want to test wording.
-                var description = indicator.getDescription();
-                expect(description).toEqual(jasmine.any(String));
-                expect(description.length).not.toEqual(0);
-            });
-
-        });
-    }
-);
diff --git a/platform/persistence/local/test/LocalStoragePersistenceProviderSpec.js b/platform/persistence/local/test/LocalStoragePersistenceProviderSpec.js
deleted file mode 100644
index e92b0f30d64..00000000000
--- a/platform/persistence/local/test/LocalStoragePersistenceProviderSpec.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/LocalStoragePersistenceProvider"],
-    function (LocalStoragePersistenceProvider) {
-
-        describe("The local storage persistence provider", function () {
-            var mockQ,
-                testSpace = "testSpace",
-                mockCallback,
-                testLocalStorage,
-                provider;
-
-            function mockPromise(value) {
-                return (value || {}).then ? value : {
-                    then: function (callback) {
-                        return mockPromise(callback(value));
-                    }
-                };
-            }
-
-            beforeEach(function () {
-                testLocalStorage = {};
-
-                mockQ = jasmine.createSpyObj("$q", ["when", "reject"]);
-                mockCallback = jasmine.createSpy('callback');
-
-                mockQ.when.and.callFake(mockPromise);
-
-                provider = new LocalStoragePersistenceProvider(
-                    { localStorage: testLocalStorage },
-                    mockQ,
-                    testSpace
-                );
-            });
-
-            it("reports available spaces", function () {
-                provider.listSpaces().then(mockCallback);
-                expect(mockCallback).toHaveBeenCalledWith([testSpace]);
-            });
-
-            it("lists all available documents", function () {
-                provider.listObjects(testSpace).then(mockCallback);
-                expect(mockCallback.calls.mostRecent().args[0]).toEqual([]);
-                provider.createObject(testSpace, 'abc', { a: 42 });
-                provider.listObjects(testSpace).then(mockCallback);
-                expect(mockCallback.calls.mostRecent().args[0]).toEqual(['abc']);
-            });
-
-            it("allows object creation", function () {
-                var model = { someKey: "some value" };
-                provider.createObject(testSpace, "abc", model)
-                    .then(mockCallback);
-                expect(JSON.parse(testLocalStorage[testSpace]).abc)
-                    .toEqual(model);
-                expect(mockCallback.calls.mostRecent().args[0]).toBeTruthy();
-            });
-
-            it("allows object models to be read back", function () {
-                var model = { someKey: "some other value" };
-                testLocalStorage[testSpace] = JSON.stringify({ abc: model });
-                provider.readObject(testSpace, "abc").then(mockCallback);
-                expect(mockCallback).toHaveBeenCalledWith(model);
-            });
-
-            it("allows object update", function () {
-                var model = { someKey: "some new value" };
-                testLocalStorage[testSpace] = JSON.stringify({
-                    abc: { somethingElse: 42 }
-                });
-                provider.updateObject(testSpace, "abc", model)
-                    .then(mockCallback);
-                expect(JSON.parse(testLocalStorage[testSpace]).abc)
-                    .toEqual(model);
-            });
-
-            it("allows object deletion", function () {
-                testLocalStorage[testSpace] = JSON.stringify({
-                    abc: { somethingElse: 42 }
-                });
-                provider.deleteObject(testSpace, "abc").then(mockCallback);
-                expect(testLocalStorage[testSpace].abc)
-                    .toBeUndefined();
-            });
-
-            it("returns undefined when objects are not found", function () {
-                provider.readObject("testSpace", "abc").then(mockCallback);
-                expect(mockCallback).toHaveBeenCalledWith(undefined);
-            });
-
-        });
-    }
-);
diff --git a/platform/persistence/queue/README.md b/platform/persistence/queue/README.md
deleted file mode 100644
index b64bba3c34d..00000000000
--- a/platform/persistence/queue/README.md
+++ /dev/null
@@ -1,5 +0,0 @@
-This bundle provides an Overwrite/Cancel dialog when persisting
-domain objects, if persistence fails. It is meant to be paired
-with a persistence adapter which performs revision-checking
-on update calls, in order to provide the user interface for
-choosing between Overwrite and Cancel in that situation.
diff --git a/platform/persistence/queue/bundle.js b/platform/persistence/queue/bundle.js
deleted file mode 100644
index 0aa0c79e31e..00000000000
--- a/platform/persistence/queue/bundle.js
+++ /dev/null
@@ -1,82 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/QueuingPersistenceCapabilityDecorator",
-    "./src/PersistenceQueue",
-    "./src/PersistenceFailureController",
-    "./res/templates/persistence-failure-dialog.html"
-], function (
-    QueuingPersistenceCapabilityDecorator,
-    PersistenceQueue,
-    PersistenceFailureController,
-    persistenceFailureDialogTemplate
-) {
-
-    return {
-        name: "platform/persistence/queue",
-        definition: {
-            "extensions": {
-                "components": [
-                    {
-                        "type": "decorator",
-                        "provides": "capabilityService",
-                        "implementation": QueuingPersistenceCapabilityDecorator,
-                        "depends": [
-                            "persistenceQueue"
-                        ]
-                    }
-                ],
-                "services": [
-                    {
-                        "key": "persistenceQueue",
-                        "implementation": PersistenceQueue,
-                        "depends": [
-                            "$q",
-                            "$timeout",
-                            "dialogService",
-                            "PERSISTENCE_QUEUE_DELAY"
-                        ]
-                    }
-                ],
-                "constants": [
-                    {
-                        "key": "PERSISTENCE_QUEUE_DELAY",
-                        "value": 5
-                    }
-                ],
-                "templates": [
-                    {
-                        "key": "persistence-failure-dialog",
-                        "template": persistenceFailureDialogTemplate
-                    }
-                ],
-                "controllers": [
-                    {
-                        "key": "PersistenceFailureController",
-                        "implementation": PersistenceFailureController
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/persistence/queue/res/templates/persistence-failure-dialog.html b/platform/persistence/queue/res/templates/persistence-failure-dialog.html
deleted file mode 100644
index d477b31f9e4..00000000000
--- a/platform/persistence/queue/res/templates/persistence-failure-dialog.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<span ng-controller="PersistenceFailureController as controller">
-
-<div ng-if="ngModel.revised.length > 0">
-    External changes have been made to the following objects:
-    <ul>
-        <li ng-repeat="failure in ngModel.revised">
-            <mct-representation key="'label'"
-                                mct-object="failure.domainObject">
-            </mct-representation>
-            was modified at
-            <b>{{controller.formatTimestamp(failure.error.model.modified)}}</b>
-            by
-            <i>{{controller.formatUsername(failure.error.model.modifier)}}</i>
-        </li>
-    </ul>
-    You may overwrite these objects, or discard your changes to keep
-    the updates that were made externally.
-</div>
-
-<div ng-if="ngModel.unrecoverable.length > 0">
-    Changes to these objects could not be saved for unknown reasons:
-    <ul>
-        <li ng-repeat="failure in ngModel.unrecoverable">
-            <mct-representation key="'label'"
-                                mct-object="failure.domainObject">
-            </mct-representation>
-        </li>
-    </ul>
-</div>
-
-</span>
diff --git a/platform/persistence/queue/src/PersistenceFailureConstants.js b/platform/persistence/queue/src/PersistenceFailureConstants.js
deleted file mode 100644
index f3d35a503a5..00000000000
--- a/platform/persistence/queue/src/PersistenceFailureConstants.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define({
-    REVISION_ERROR_KEY: "revision",
-    OVERWRITE_KEY: "overwrite",
-    TIMESTAMP_FORMAT: "YYYY-MM-DD HH:mm:ss\\Z",
-    UNKNOWN_USER: "unknown user"
-});
diff --git a/platform/persistence/queue/src/PersistenceFailureController.js b/platform/persistence/queue/src/PersistenceFailureController.js
deleted file mode 100644
index b4b33d1cc12..00000000000
--- a/platform/persistence/queue/src/PersistenceFailureController.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['moment', './PersistenceFailureConstants'],
-    function (moment, Constants) {
-
-        /**
-         * Controller to support the template to be shown in the
-         * dialog shown for persistence failures.
-         * @constructor
-         * @memberof platform/persistence/queue
-         */
-        function PersistenceFailureController() {
-        }
-
-        /**
-         * Format a timestamp for display in the dialog.
-         * @memberof platform/persistence/queue.PersistenceFailureController#
-         */
-        PersistenceFailureController.prototype.formatTimestamp = function (timestamp) {
-            return moment.utc(timestamp)
-                .format(Constants.TIMESTAMP_FORMAT);
-        };
-
-        /**
-         * Format a user name for display in the dialog.
-         * @memberof platform/persistence/queue.PersistenceFailureController#
-         */
-        PersistenceFailureController.prototype.formatUsername = function (username) {
-            return username || Constants.UNKNOWN_USER;
-        };
-
-        return PersistenceFailureController;
-    }
-);
diff --git a/platform/persistence/queue/src/PersistenceFailureDialog.js b/platform/persistence/queue/src/PersistenceFailureDialog.js
deleted file mode 100644
index 9e2d187c30b..00000000000
--- a/platform/persistence/queue/src/PersistenceFailureDialog.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['./PersistenceFailureConstants'],
-    function (PersistenceFailureConstants) {
-
-        var OVERWRITE_CANCEL_OPTIONS = [
-                {
-                    name: "Overwrite",
-                    key: PersistenceFailureConstants.OVERWRITE_KEY
-                },
-                {
-                    name: "Discard",
-                    key: "cancel"
-                }
-            ],
-            OK_OPTIONS = [{
-                name: "OK",
-                key: "ok"
-            }];
-
-        /**
-         * Populates a `dialogModel` to pass to `dialogService.getUserChoise`
-         * in order to choose between Overwrite and Cancel.
-         * @constructor
-         * @memberof platform/persistence/queue
-         */
-        function PersistenceFailureDialog(failures) {
-            var revisionErrors = [],
-                otherErrors = [];
-
-            // Place this failure into an appropriate group
-            function categorizeFailure(failure) {
-                // Check if the error is due to object revision
-                var isRevisionError = ((failure || {}).error || {}).key
-                    === PersistenceFailureConstants.REVISION_ERROR_KEY;
-                // Push the failure into the appropriate group
-                (isRevisionError ? revisionErrors : otherErrors).push(failure);
-            }
-
-            // Separate into revision errors, and other errors
-            failures.forEach(categorizeFailure);
-
-            return {
-                title: "Save Error",
-                template: "persistence-failure-dialog",
-                model: {
-                    revised: revisionErrors,
-                    unrecoverable: otherErrors
-                },
-                options: revisionErrors.length > 0
-                    ? OVERWRITE_CANCEL_OPTIONS : OK_OPTIONS
-            };
-        }
-
-        return PersistenceFailureDialog;
-    }
-);
diff --git a/platform/persistence/queue/src/PersistenceFailureHandler.js b/platform/persistence/queue/src/PersistenceFailureHandler.js
deleted file mode 100644
index b7a9543d491..00000000000
--- a/platform/persistence/queue/src/PersistenceFailureHandler.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['./PersistenceFailureDialog', './PersistenceFailureConstants'],
-    function (PersistenceFailureDialog, PersistenceFailureConstants) {
-
-        /**
-         * Handle failures to persist domain object models.
-         * @param $q Angular's `$q`
-         * @param {DialogService} dialogService the dialog service
-         * @constructor
-         * @memberof platform/persistence/queue
-         */
-        function PersistenceFailureHandler($q, dialogService) {
-            this.$q = $q;
-            this.dialogService = dialogService;
-        }
-
-        /**
-         * Discard failures
-         * @param {Array} failures persistence failures, as prepared
-         *        by PersistenceQueueHandler
-         * @memberof platform/persistence/queue.PersistenceFailureHandler#
-         */
-        PersistenceFailureHandler.prototype.handle = function handleFailures(failures) {
-
-            var dialogModel = new PersistenceFailureDialog(failures),
-                revisionErrors = dialogModel.model.revised,
-                $q = this.$q;
-
-            // Discard changes for a failed refresh
-            function discard(failure) {
-                var persistence =
-                    failure.domainObject.getCapability('persistence');
-
-                return persistence.refresh();
-            }
-
-            // Discard changes associated with a failed save
-            function discardAll(failuresToDiscard) {
-                return $q.all(failuresToDiscard.map(discard));
-            }
-
-            return discardAll(revisionErrors);
-        };
-
-        return PersistenceFailureHandler;
-    }
-);
diff --git a/platform/persistence/queue/src/PersistenceQueue.js b/platform/persistence/queue/src/PersistenceQueue.js
deleted file mode 100644
index d3b5fea85bf..00000000000
--- a/platform/persistence/queue/src/PersistenceQueue.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [
-        './PersistenceQueueImpl',
-        './PersistenceQueueHandler',
-        './PersistenceFailureHandler'
-    ],
-    function (
-        PersistenceQueueImpl,
-        PersistenceQueueHandler,
-        PersistenceFailureHandler
-    ) {
-
-        /**
-         * The PersistenceQueue is used by the QueuingPersistenceCapability
-         * to aggregate calls for object persistence. These are then issued
-         * in a group, such that if some or all are rejected, this result can
-         * be shown to the user (again, in a group.)
-         *
-         * This constructor is exposed as a service, but handles only the
-         * wiring of injected dependencies; behavior is implemented in the
-         * various component parts.
-         *
-         * @param $timeout Angular's $timeout
-         * @param {PersistenceQueueHandler} handler handles actual
-         *        persistence when the queue is flushed
-         * @param {number} [DELAY] optional; delay in milliseconds between
-         *        attempts to flush the queue
-         * @constructor
-         * @memberof platform/persistence/queue
-         */
-        function PersistenceQueue(
-            $q,
-            $timeout,
-            dialogService,
-            PERSISTENCE_QUEUE_DELAY
-        ) {
-            // Wire up injected dependencies
-            return new PersistenceQueueImpl(
-                $q,
-                $timeout,
-                new PersistenceQueueHandler(
-                    $q,
-                    new PersistenceFailureHandler(
-                        $q,
-                        dialogService
-                    )
-                ),
-                PERSISTENCE_QUEUE_DELAY
-            );
-        }
-
-        return PersistenceQueue;
-    }
-);
diff --git a/platform/persistence/queue/src/PersistenceQueueHandler.js b/platform/persistence/queue/src/PersistenceQueueHandler.js
deleted file mode 100644
index dd7caa6e200..00000000000
--- a/platform/persistence/queue/src/PersistenceQueueHandler.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Handles actual persistence invocations for queued persistence
-         * attempts, in a group. Handling in a group in this manner
-         * also allows failure to be handled in a group (e.g. in a single
-         * summary dialog.)
-         * @param $q Angular's $q, for promises
-         * @param {PersistenceFailureHandler} handler to invoke in the event
-         *        that a persistence attempt fails.
-         * @constructor
-         * @memberof platform/persistence/queue
-         */
-        function PersistenceQueueHandler($q, failureHandler) {
-            this.$q = $q;
-            this.failureHandler = failureHandler;
-        }
-
-        /**
-         * Invoke the persist method on the provided persistence
-         * capabilities.
-         * @param {Object.<string,PersistenceCapability>} persistences
-         *        capabilities to invoke, in id->capability pairs.
-         * @param {Object.<string,DomainObject>} domainObjects
-         *        associated domain objects, in id->object pairs.
-         * @param {PersistenceQueue} queue the persistence queue,
-         *        to requeue as necessary
-         * @memberof platform/persistence/queue.PersistenceQueueHandler#
-         */
-        PersistenceQueueHandler.prototype.persist = function (persistences, domainObjects, queue) {
-            var ids = Object.keys(persistences),
-                $q = this.$q,
-                failureHandler = this.failureHandler;
-
-            // Handle a group of persistence invocations
-            function persistGroup(groupIds, persistenceCaps, domainObjs, pQueue) {
-                var failures = [];
-
-                // Try to persist a specific domain object
-                function tryPersist(id) {
-                    // Look up its persistence capability from the provided
-                    // id->persistence object.
-                    var persistence = persistenceCaps[id],
-                        domainObject = domainObjs[id];
-
-                    // Put a domain object back in the queue
-                    // (e.g. after Overwrite)
-                    function requeue() {
-                        return pQueue.put(domainObject, persistence);
-                    }
-
-                    // Handle success
-                    function succeed(value) {
-                        return value;
-                    }
-
-                    // Handle failure (build up a list of failures)
-                    function fail(error) {
-                        failures.push({
-                            id: id,
-                            persistence: persistence,
-                            domainObject: domainObject,
-                            requeue: requeue,
-                            error: error
-                        });
-
-                        return false;
-                    }
-
-                    // Invoke the actual persistence capability, then
-                    // note success or failures
-                    return persistence.persist().then(succeed, fail);
-                }
-
-                // Handle any failures from the full operation
-                function handleFailure(value) {
-                    return failures.length > 0
-                        ? failureHandler.handle(failures)
-                        : value;
-                }
-
-                // Try to persist everything, then handle any failures
-                return $q.all(groupIds.map(tryPersist)).then(handleFailure);
-            }
-
-            return persistGroup(ids, persistences, domainObjects, queue);
-        };
-
-        return PersistenceQueueHandler;
-    }
-);
diff --git a/platform/persistence/queue/src/PersistenceQueueImpl.js b/platform/persistence/queue/src/PersistenceQueueImpl.js
deleted file mode 100644
index 3c2a0405125..00000000000
--- a/platform/persistence/queue/src/PersistenceQueueImpl.js
+++ /dev/null
@@ -1,149 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * The PersistenceQueue is used by the QueuingPersistenceCapability
-         * to aggregrate calls for object persistence. These are then issued
-         * in a group, such that if some or all are rejected, this result can
-         * be shown to the user (again, in a group.)
-         *
-         * This implementation is separate out from PersistenceQueue, which
-         * handles the wiring of injected dependencies into an instance of
-         * this class.
-         *
-         * @param $timeout Angular's $timeout
-         * @param {PersistenceQueueHandler} handler handles actual
-         *        persistence when the queue is flushed
-         * @param {number} [DELAY] optional; delay in milliseconds between
-         *        attempts to flush the queue
-         * @constructor
-         * @memberof platform/persistence/queue
-         */
-        function PersistenceQueueImpl($q, $timeout, handler, delay) {
-
-            this.persistences = {};
-            this.objects = {};
-            this.lastObservedSize = 0;
-            this.activeDefer = $q.defer();
-
-            // If no delay is provided, use a default
-            this.delay = delay || 0;
-            this.handler = handler;
-            this.$timeout = $timeout;
-            this.$q = $q;
-        }
-
-        // Schedule a flushing of the queue (that is, plan to flush
-        // all objects in the queue)
-        PersistenceQueueImpl.prototype.scheduleFlush = function () {
-            var self = this,
-                $timeout = this.$timeout,
-                $q = this.$q,
-                handler = this.handler;
-
-            // Check if the queue's size has stopped increasing)
-            function quiescent() {
-                return Object.keys(self.persistences).length
-                    === self.lastObservedSize;
-            }
-
-            // Persist all queued objects
-            function flush() {
-                // Get a local reference to the active promise;
-                // this will be replaced with a promise for the next round
-                // of persistence calls, so we want to make sure we clear
-                // the correct one when this flush completes.
-                var flushingDefer = self.activeDefer;
-
-                // Clear the active promise for a queue flush
-                function clearFlushPromise(value) {
-                    self.flushPromise = undefined;
-                    flushingDefer.resolve(value);
-
-                    return value;
-                }
-
-                // Persist all queued objects
-                self.flushPromise = handler.persist(
-                    self.persistences,
-                    self.objects,
-                    self
-                ).then(clearFlushPromise, clearFlushPromise);
-
-                // Reset queue, etc.
-                self.persistences = {};
-                self.objects = {};
-                self.lastObservedSize = 0;
-                self.pendingTimeout = undefined;
-                self.activeDefer = $q.defer();
-            }
-
-            function maybeFlush() {
-                // Timeout fired, so clear it
-                self.pendingTimeout = undefined;
-                // Only flush when we've stopped receiving updates
-                if (quiescent()) {
-                    flush();
-                } else {
-                    self.scheduleFlush();
-                }
-
-                // Update lastObservedSize to detect quiescence
-                self.lastObservedSize = Object.keys(self.persistences).length;
-            }
-
-            // If we are already flushing the queue...
-            if (self.flushPromise) {
-                // Wait until that's over before considering a flush
-                self.flushPromise.then(maybeFlush);
-            } else {
-                // Otherwise, schedule a flush on a timeout (to give
-                // a window for other updates to get aggregated)
-                self.pendingTimeout = self.pendingTimeout
-                        || $timeout(maybeFlush, self.delay, false);
-            }
-
-            return self.activeDefer.promise;
-        };
-
-        /**
-         * Queue persistence of a domain object.
-         * @param {DomainObject} domainObject the domain object
-         * @param {PersistenceCapability} persistence the object's
-         *        undecorated persistence capability
-         * @returns {Promise} a promise which will resolve upon persistence
-         */
-        PersistenceQueueImpl.prototype.put = function (domainObject, persistence) {
-            var id = domainObject.getId();
-            this.persistences[id] = persistence;
-            this.objects[id] = domainObject;
-
-            return this.scheduleFlush();
-        };
-
-        return PersistenceQueueImpl;
-    }
-);
diff --git a/platform/persistence/queue/src/QueuingPersistenceCapability.js b/platform/persistence/queue/src/QueuingPersistenceCapability.js
deleted file mode 100644
index 30beb0ce04d..00000000000
--- a/platform/persistence/queue/src/QueuingPersistenceCapability.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * The QueuingPersistenceCapability places `persist` calls in a queue
-         * to be handled in batches.
-         * @param {PersistenceQueue} queue of persistence calls
-         * @param {PersistenceCapability} persistence the wrapped persistence
-         *        capability
-         * @param {DomainObject} domainObject the domain object which exposes
-         *        the capability
-         * @constructor
-         * @memberof platform/persistence/queue
-         */
-        function QueuingPersistenceCapability(queue, persistence, domainObject) {
-            var queuingPersistence = Object.create(persistence);
-
-            // Override persist calls to queue them instead
-            queuingPersistence.persist = function () {
-                return queue.put(domainObject, persistence);
-            };
-
-            return queuingPersistence;
-        }
-
-        return QueuingPersistenceCapability;
-    }
-);
diff --git a/platform/persistence/queue/src/QueuingPersistenceCapabilityDecorator.js b/platform/persistence/queue/src/QueuingPersistenceCapabilityDecorator.js
deleted file mode 100644
index 59a32311e91..00000000000
--- a/platform/persistence/queue/src/QueuingPersistenceCapabilityDecorator.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * This bundle decorates the persistence service to handle persistence
- * in batches, and to provide notification of persistence errors in batches
- * as well.
- * @namespace platform/persistence/queue
- */
-define(
-    ['./QueuingPersistenceCapability'],
-    function (QueuingPersistenceCapability) {
-
-        /**
-         * Capability decorator. Adds queueing support to persistence
-         * capabilities for domain objects, such that persistence attempts
-         * will be handled in batches (allowing failure notification to
-         * also be presented in batches.)
-         *
-         * @memberof platform/persistence/queue
-         * @constructor
-         * @implements {CapabilityService}
-         * @param {platform/persistence/queue.PersistenceQueue} persistenceQueue
-         * @param {CapabilityService} the decorated capability service
-         */
-        function QueuingPersistenceCapabilityDecorator(
-            persistenceQueue,
-            capabilityService
-        ) {
-            this.persistenceQueue = persistenceQueue;
-            this.capabilityService = capabilityService;
-        }
-
-        QueuingPersistenceCapabilityDecorator.prototype.getCapabilities = function (model, id) {
-            var capabilityService = this.capabilityService,
-                persistenceQueue = this.persistenceQueue;
-
-            function decoratePersistence(capabilities) {
-                var originalPersistence = capabilities.persistence;
-                if (originalPersistence) {
-                    capabilities.persistence = function (domainObject) {
-                        // Get/instantiate the original
-                        var original =
-                            (typeof originalPersistence === 'function')
-                                ? originalPersistence(domainObject)
-                                : originalPersistence;
-
-                        // Provide a decorated version
-                        return new QueuingPersistenceCapability(
-                            persistenceQueue,
-                            original,
-                            domainObject
-                        );
-                    };
-                }
-
-                return capabilities;
-            }
-
-            return decoratePersistence(
-                capabilityService.getCapabilities(model, id)
-            );
-        };
-
-        return QueuingPersistenceCapabilityDecorator;
-    }
-);
diff --git a/platform/persistence/queue/test/PersistenceFailureConstantsSpec.js b/platform/persistence/queue/test/PersistenceFailureConstantsSpec.js
deleted file mode 100644
index 7a68bf152eb..00000000000
--- a/platform/persistence/queue/test/PersistenceFailureConstantsSpec.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/PersistenceFailureConstants"],
-    function (PersistenceFailureConstants) {
-
-        describe("Persistence failure constants", function () {
-            it("defines an overwrite key", function () {
-                expect(PersistenceFailureConstants.OVERWRITE_KEY)
-                    .toEqual(jasmine.any(String));
-            });
-        });
-    }
-);
diff --git a/platform/persistence/queue/test/PersistenceFailureControllerSpec.js b/platform/persistence/queue/test/PersistenceFailureControllerSpec.js
deleted file mode 100644
index 9e1e84df335..00000000000
--- a/platform/persistence/queue/test/PersistenceFailureControllerSpec.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/PersistenceFailureController"],
-    function (PersistenceFailureController) {
-
-        describe("The persistence failure controller", function () {
-            var controller;
-
-            beforeEach(function () {
-                controller = new PersistenceFailureController();
-            });
-
-            it("converts timestamps to human-readable dates", function () {
-                expect(controller.formatTimestamp(402514331000))
-                    .toEqual("1982-10-03 17:32:11Z");
-            });
-
-            it("provides default user names", function () {
-                expect(controller.formatUsername(undefined))
-                    .toEqual(jasmine.any(String));
-            });
-        });
-    }
-);
diff --git a/platform/persistence/queue/test/PersistenceFailureDialogSpec.js b/platform/persistence/queue/test/PersistenceFailureDialogSpec.js
deleted file mode 100644
index 8cd5f48c9cd..00000000000
--- a/platform/persistence/queue/test/PersistenceFailureDialogSpec.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/PersistenceFailureDialog", "../src/PersistenceFailureConstants"],
-    function (PersistenceFailureDialog, Constants) {
-
-        describe("The persistence failure dialog", function () {
-            var testFailures,
-                dialog;
-
-            beforeEach(function () {
-                testFailures = [
-                    {
-                        error: { key: Constants.REVISION_ERROR_KEY },
-                        someKey: "abc"
-                    },
-                    {
-                        error: { key: "..." },
-                        someKey: "def"
-                    },
-                    {
-                        error: { key: Constants.REVISION_ERROR_KEY },
-                        someKey: "ghi"
-                    },
-                    {
-                        error: { key: Constants.REVISION_ERROR_KEY },
-                        someKey: "jkl"
-                    },
-                    {
-                        error: { key: "..." },
-                        someKey: "mno"
-                    }
-                ];
-                dialog = new PersistenceFailureDialog(testFailures);
-            });
-
-            it("categorizes failures", function () {
-                expect(dialog.model.revised).toEqual([
-                    testFailures[0], testFailures[2], testFailures[3]
-                ]);
-                expect(dialog.model.unrecoverable).toEqual([
-                    testFailures[1], testFailures[4]
-                ]);
-            });
-
-            it("provides an overwrite option", function () {
-                expect(dialog.options[0].key).toEqual(Constants.OVERWRITE_KEY);
-            });
-        });
-    }
-);
diff --git a/platform/persistence/queue/test/PersistenceFailureHandlerSpec.js b/platform/persistence/queue/test/PersistenceFailureHandlerSpec.js
deleted file mode 100644
index 2bcb9bf6465..00000000000
--- a/platform/persistence/queue/test/PersistenceFailureHandlerSpec.js
+++ /dev/null
@@ -1,82 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/PersistenceFailureHandler", "../src/PersistenceFailureConstants"],
-    function (PersistenceFailureHandler, Constants) {
-
-        describe("The persistence failure handler", function () {
-            var mockQ,
-                mockDialogService,
-                mockFailures,
-                mockPromise,
-                handler;
-
-            function makeMockFailure(id, index) {
-                var mockFailure = jasmine.createSpyObj(
-                        'failure-' + id,
-                        ['requeue']
-                    ),
-                    mockPersistence = jasmine.createSpyObj(
-                        'persistence-' + id,
-                        ['refresh', 'persist']
-                    );
-                mockFailure.domainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getCapability', 'useCapability', 'getModel']
-                );
-                mockFailure.domainObject.getCapability.and.callFake(function (c) {
-                    return (c === 'persistence') && mockPersistence;
-                });
-                mockFailure.domainObject.getModel.and.returnValue({
-                    id: id,
-                    modified: index
-                });
-                mockFailure.persistence = mockPersistence;
-                mockFailure.id = id;
-                mockFailure.error = { key: Constants.REVISION_ERROR_KEY };
-
-                return mockFailure;
-            }
-
-            beforeEach(function () {
-                mockQ = jasmine.createSpyObj('$q', ['all', 'when']);
-                mockDialogService = jasmine.createSpyObj('dialogService', ['getUserChoice']);
-                mockFailures = ['a', 'b', 'c'].map(makeMockFailure);
-                mockPromise = jasmine.createSpyObj('promise', ['then']);
-                mockDialogService.getUserChoice.and.returnValue(mockPromise);
-                mockQ.all.and.returnValue(mockPromise);
-                mockPromise.then.and.returnValue(mockPromise);
-                handler = new PersistenceFailureHandler(mockQ, mockDialogService);
-            });
-
-            it("discards on handle", function () {
-                handler.handle(mockFailures);
-                mockFailures.forEach(function (mockFailure) {
-                    expect(mockFailure.persistence.refresh).toHaveBeenCalled();
-                    expect(mockFailure.requeue).not.toHaveBeenCalled();
-                    expect(mockFailure.domainObject.useCapability).not.toHaveBeenCalled();
-                });
-            });
-        });
-    }
-);
diff --git a/platform/persistence/queue/test/PersistenceQueueHandlerSpec.js b/platform/persistence/queue/test/PersistenceQueueHandlerSpec.js
deleted file mode 100644
index b78d1ef6a96..00000000000
--- a/platform/persistence/queue/test/PersistenceQueueHandlerSpec.js
+++ /dev/null
@@ -1,136 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/PersistenceQueueHandler"],
-    function (PersistenceQueueHandler) {
-
-        var TEST_ERROR = { someKey: "some value" };
-
-        describe("The persistence queue handler", function () {
-            var mockQ,
-                mockFailureHandler,
-                mockPersistences,
-                mockDomainObjects,
-                mockQueue,
-                mockRejection,
-                handler;
-
-            function asPromise(value) {
-                return (value || {}).then ? value : {
-                    then: function (callback) {
-                        return asPromise(callback(value));
-                    }
-                };
-            }
-
-            function makeMockPersistence(id) {
-                var mockPersistence = jasmine.createSpyObj(
-                    'persistence-' + id,
-                    ['persist', 'refresh']
-                );
-                mockPersistence.persist.and.returnValue(asPromise(true));
-
-                return mockPersistence;
-            }
-
-            function makeMockDomainObject(id) {
-                var mockDomainObject = jasmine.createSpyObj(
-                    'domainObject-' + id,
-                    ['getId']
-                );
-                mockDomainObject.getId.and.returnValue(id);
-
-                return mockDomainObject;
-            }
-
-            beforeEach(function () {
-                mockQ = jasmine.createSpyObj('$q', ['all']);
-                mockFailureHandler = jasmine.createSpyObj('handler', ['handle']);
-                mockQueue = jasmine.createSpyObj('queue', ['put']);
-                mockPersistences = {};
-                mockDomainObjects = {};
-                ['a', 'b', 'c'].forEach(function (id) {
-                    mockPersistences[id] = makeMockPersistence(id);
-                    mockDomainObjects[id] = makeMockDomainObject(id);
-                });
-                mockRejection = jasmine.createSpyObj('rejection', ['then']);
-                mockQ.all.and.returnValue(asPromise([]));
-                mockRejection.then.and.callFake(function (callback, fallback) {
-                    return asPromise(fallback({ someKey: "some value" }));
-                });
-                handler = new PersistenceQueueHandler(mockQ, mockFailureHandler);
-            });
-
-            it("invokes persistence on all members in the group", function () {
-                handler.persist(mockPersistences, mockDomainObjects, mockQueue);
-                expect(mockPersistences.a.persist).toHaveBeenCalled();
-                expect(mockPersistences.b.persist).toHaveBeenCalled();
-                expect(mockPersistences.c.persist).toHaveBeenCalled();
-                // No failures in this group
-                expect(mockFailureHandler.handle).not.toHaveBeenCalled();
-            });
-
-            it("handles failures that occur", function () {
-                mockPersistences.b.persist.and.returnValue(mockRejection);
-                mockPersistences.c.persist.and.returnValue(mockRejection);
-                handler.persist(mockPersistences, mockDomainObjects, mockQueue);
-                expect(mockFailureHandler.handle).toHaveBeenCalledWith([
-                    {
-                        id: 'b',
-                        persistence: mockPersistences.b,
-                        domainObject: mockDomainObjects.b,
-                        requeue: jasmine.any(Function),
-                        error: TEST_ERROR
-                    },
-                    {
-                        id: 'c',
-                        persistence: mockPersistences.c,
-                        domainObject: mockDomainObjects.c,
-                        requeue: jasmine.any(Function),
-                        error: TEST_ERROR
-                    }
-                ]);
-            });
-
-            it("provides a requeue method for failures", function () {
-                // This method is needed by PersistenceFailureHandler
-                // to allow requeuing of objects for persistence when
-                // Overwrite is chosen.
-                mockPersistences.b.persist.and.returnValue(mockRejection);
-                handler.persist(mockPersistences, mockDomainObjects, mockQueue);
-
-                // Verify precondition
-                expect(mockQueue.put).not.toHaveBeenCalled();
-
-                // Invoke requeue
-                mockFailureHandler.handle.calls.mostRecent().args[0][0].requeue();
-
-                // Should have returned the object to the queue
-                expect(mockQueue.put).toHaveBeenCalledWith(
-                    mockDomainObjects.b,
-                    mockPersistences.b
-                );
-            });
-        });
-    }
-);
diff --git a/platform/persistence/queue/test/PersistenceQueueImplSpec.js b/platform/persistence/queue/test/PersistenceQueueImplSpec.js
deleted file mode 100644
index 42f55beab02..00000000000
--- a/platform/persistence/queue/test/PersistenceQueueImplSpec.js
+++ /dev/null
@@ -1,153 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/PersistenceQueueImpl"],
-    function (PersistenceQueueImpl) {
-
-        var TEST_DELAY = 42;
-
-        describe("The implemented persistence queue", function () {
-            var mockQ,
-                mockTimeout,
-                mockHandler,
-                mockDeferred,
-                mockPromise,
-                queue;
-
-            function makeMockDomainObject(id) {
-                var mockDomainObject = jasmine.createSpyObj(
-                    'domainObject-' + id,
-                    ['getId']
-                );
-                mockDomainObject.getId.and.returnValue(id);
-
-                return mockDomainObject;
-            }
-
-            function makeMockPersistence(id) {
-                var mockPersistence = jasmine.createSpyObj(
-                    'persistence-' + id,
-                    ['persist']
-                );
-
-                return mockPersistence;
-            }
-
-            beforeEach(function () {
-                mockQ = jasmine.createSpyObj('$q', ['when', 'defer']);
-                mockTimeout = jasmine.createSpy('$timeout');
-                mockHandler = jasmine.createSpyObj('handler', ['persist']);
-                mockDeferred = jasmine.createSpyObj('deferred', ['resolve']);
-                mockDeferred.promise = jasmine.createSpyObj('promise', ['then']);
-                mockPromise = jasmine.createSpyObj('promise', ['then']);
-                mockQ.defer.and.returnValue(mockDeferred);
-                mockTimeout.and.returnValue({});
-                mockHandler.persist.and.returnValue(mockPromise);
-                mockPromise.then.and.returnValue(mockPromise);
-                queue = new PersistenceQueueImpl(
-                    mockQ,
-                    mockTimeout,
-                    mockHandler,
-                    TEST_DELAY
-                );
-            });
-
-            it("schedules a timeout to persist objects", function () {
-                expect(mockTimeout).not.toHaveBeenCalled();
-                queue.put(makeMockDomainObject('a'), makeMockPersistence('a'));
-                expect(mockTimeout).toHaveBeenCalledWith(
-                    jasmine.any(Function),
-                    TEST_DELAY,
-                    false
-                );
-            });
-
-            it("does not schedule multiple timeouts for multiple objects", function () {
-                // Put three objects in without triggering the timeout;
-                // shouldn't schedule multiple timeouts
-                queue.put(makeMockDomainObject('a'), makeMockPersistence('a'));
-                queue.put(makeMockDomainObject('b'), makeMockPersistence('b'));
-                queue.put(makeMockDomainObject('c'), makeMockPersistence('c'));
-                expect(mockTimeout.calls.count()).toEqual(1);
-            });
-
-            it("returns a promise", function () {
-                expect(queue.put(makeMockDomainObject('a'), makeMockPersistence('a')))
-                    .toEqual(mockDeferred.promise);
-            });
-
-            it("waits for quiescence to proceed", function () {
-                // Keep adding objects to the queue between timeouts.
-                // Should keep scheduling timeouts instead of resolving.
-                queue.put(makeMockDomainObject('a'), makeMockPersistence('a'));
-                expect(mockTimeout.calls.count()).toEqual(1);
-                mockTimeout.calls.mostRecent().args[0]();
-                queue.put(makeMockDomainObject('b'), makeMockPersistence('b'));
-                expect(mockTimeout.calls.count()).toEqual(2);
-                mockTimeout.calls.mostRecent().args[0]();
-                queue.put(makeMockDomainObject('c'), makeMockPersistence('c'));
-                expect(mockTimeout.calls.count()).toEqual(3);
-                mockTimeout.calls.mostRecent().args[0]();
-                expect(mockHandler.persist).not.toHaveBeenCalled();
-            });
-
-            it("persists upon quiescence", function () {
-                // Add objects to the queue, but fire two timeouts afterward
-                queue.put(makeMockDomainObject('a'), makeMockPersistence('a'));
-                queue.put(makeMockDomainObject('b'), makeMockPersistence('b'));
-                queue.put(makeMockDomainObject('c'), makeMockPersistence('c'));
-                mockTimeout.calls.mostRecent().args[0]();
-                mockTimeout.calls.mostRecent().args[0]();
-                expect(mockHandler.persist).toHaveBeenCalled();
-            });
-
-            it("waits on an active flush, while flushing", function () {
-                // Persist some objects
-                queue.put(makeMockDomainObject('a'), makeMockPersistence('a'));
-                queue.put(makeMockDomainObject('b'), makeMockPersistence('b'));
-                mockTimeout.calls.mostRecent().args[0]();
-                mockTimeout.calls.mostRecent().args[0]();
-                expect(mockTimeout.calls.count()).toEqual(2);
-                // Adding a new object should not trigger a new timeout,
-                // because we haven't completed the previous flush
-                queue.put(makeMockDomainObject('c'), makeMockPersistence('c'));
-                expect(mockTimeout.calls.count()).toEqual(2);
-            });
-
-            it("clears the active flush after it has completed", function () {
-                // Persist some objects
-                queue.put(makeMockDomainObject('a'), makeMockPersistence('a'));
-                queue.put(makeMockDomainObject('b'), makeMockPersistence('b'));
-                mockTimeout.calls.mostRecent().args[0]();
-                mockTimeout.calls.mostRecent().args[0]();
-                expect(mockTimeout.calls.count()).toEqual(2);
-                // Resolve the promise from handler.persist
-                mockPromise.then.calls.all()[0].args[0](true);
-                // Adding a new object should now trigger a new timeout,
-                // because we have completed the previous flush
-                queue.put(makeMockDomainObject('c'), makeMockPersistence('c'));
-                expect(mockTimeout.calls.count()).toEqual(3);
-            });
-        });
-    }
-);
diff --git a/platform/persistence/queue/test/PersistenceQueueSpec.js b/platform/persistence/queue/test/PersistenceQueueSpec.js
deleted file mode 100644
index d8171c7b02c..00000000000
--- a/platform/persistence/queue/test/PersistenceQueueSpec.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/PersistenceQueue"],
-    function (PersistenceQueue) {
-
-        describe("The persistence queue", function () {
-            var mockQ,
-                mockTimeout,
-                mockDialogService,
-                queue;
-
-            beforeEach(function () {
-                mockQ = jasmine.createSpyObj("$q", ['defer']);
-                mockTimeout = jasmine.createSpy("$timeout");
-                mockDialogService = jasmine.createSpyObj(
-                    'dialogService',
-                    ['getUserChoice']
-                );
-                queue = new PersistenceQueue(mockQ, mockTimeout, mockDialogService);
-            });
-
-            // PersistenceQueue is just responsible for handling injected
-            // dependencies and wiring the PersistenceQueueImpl and its
-            // handlers. Functionality is tested there, so our test here is
-            // minimal (get back expected interface, no exceptions)
-            it("provides a queue with a put method", function () {
-                expect(queue.put).toEqual(jasmine.any(Function));
-            });
-
-        });
-    }
-);
diff --git a/platform/persistence/queue/test/QueuingPersistenceCapabilityDecoratorSpec.js b/platform/persistence/queue/test/QueuingPersistenceCapabilityDecoratorSpec.js
deleted file mode 100644
index 24dd7502503..00000000000
--- a/platform/persistence/queue/test/QueuingPersistenceCapabilityDecoratorSpec.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/QueuingPersistenceCapabilityDecorator"],
-    function (QueuingPersistenceCapabilityDecorator) {
-
-        describe("A queuing persistence capability decorator", function () {
-            var mockQueue,
-                mockCapabilityService,
-                mockPersistenceConstructor,
-                mockPersistence,
-                mockDomainObject,
-                testModel,
-                testId,
-                decorator;
-
-            beforeEach(function () {
-                mockQueue = jasmine.createSpyObj('queue', ['put']);
-                mockCapabilityService = jasmine.createSpyObj(
-                    'capabilityService',
-                    ['getCapabilities']
-                );
-                testModel = { someKey: "some value" };
-                testId = 'someId';
-                mockPersistence = jasmine.createSpyObj(
-                    'persistence',
-                    ['persist', 'refresh']
-                );
-                mockPersistenceConstructor = jasmine.createSpy();
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getId']
-                );
-
-                mockCapabilityService.getCapabilities.and.returnValue({
-                    persistence: mockPersistenceConstructor
-                });
-                mockPersistenceConstructor.and.returnValue(mockPersistence);
-
-                decorator = new QueuingPersistenceCapabilityDecorator(
-                    mockQueue,
-                    mockCapabilityService
-                );
-            });
-
-            // Here, we verify that the decorator wraps the calls it is expected
-            // to wrap; remaining responsibility belongs to
-            // QueuingPersistenceCapability itself, which has its own tests.
-
-            it("delegates to its wrapped service", function () {
-                decorator.getCapabilities(testModel, testId);
-                expect(mockCapabilityService.getCapabilities)
-                    .toHaveBeenCalledWith(testModel, testId);
-            });
-
-            it("wraps its persistence capability's constructor", function () {
-                decorator.getCapabilities(testModel).persistence(mockDomainObject);
-                expect(mockPersistenceConstructor).toHaveBeenCalledWith(mockDomainObject);
-            });
-
-        });
-    }
-);
diff --git a/platform/persistence/queue/test/QueuingPersistenceCapabilitySpec.js b/platform/persistence/queue/test/QueuingPersistenceCapabilitySpec.js
deleted file mode 100644
index ddbba8b6697..00000000000
--- a/platform/persistence/queue/test/QueuingPersistenceCapabilitySpec.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/QueuingPersistenceCapability"],
-    function (QueuingPersistenceCapability) {
-
-        describe("A queuing persistence capability", function () {
-            var mockQueue,
-                mockPersistence,
-                mockDomainObject,
-                persistence;
-
-            beforeEach(function () {
-                mockQueue = jasmine.createSpyObj('queue', ['put']);
-                mockPersistence = jasmine.createSpyObj(
-                    'persistence',
-                    ['persist', 'refresh']
-                );
-                mockDomainObject = {};
-                persistence = new QueuingPersistenceCapability(
-                    mockQueue,
-                    mockPersistence,
-                    mockDomainObject
-                );
-            });
-
-            it("puts a request for persistence into the queue on persist", function () {
-                // Verify precondition
-                expect(mockQueue.put).not.toHaveBeenCalled();
-                // Invoke persistence
-                persistence.persist();
-                // Should have queued
-                expect(mockQueue.put).toHaveBeenCalledWith(
-                    mockDomainObject,
-                    mockPersistence
-                );
-            });
-
-            it("exposes other methods from the wrapped persistence capability", function () {
-                expect(persistence.refresh).toBe(mockPersistence.refresh);
-            });
-        });
-    }
-);
diff --git a/platform/policy/README.md b/platform/policy/README.md
deleted file mode 100644
index 571782c1742..00000000000
--- a/platform/policy/README.md
+++ /dev/null
@@ -1,93 +0,0 @@
-# Overview
-
-This bundle provides support for policy in Open MCT. Policy can be
-used to limit the applicability of certain actions, or more broadly,
-to provide an extension point for arbitrary decisions.
-
-# Services
-
-This bundle introduces the `policyService`, which may be consulted for
-various decisions which are intended to be open for extension.
-
-The `policyService` has a single method, `allow`, which takes three
-arguments and returns a boolean value (true if policy says this decision
-should be allowed, false if not):
-
-* `category`: A string identifying which kind of decision is being made.
-  Typically, this will be a non-plural form of an extension type that is
-  being filtered down; for instance, to check whether or not a given
-  action should be returned by an `actionService`, one would use the
-  `action` category of extension.
-* `candidate`: An object representing the thing which shall or shall not
-  be allowed. Usually, this will be an instance of an extension of the
-  category defined above.
-  * This does need to be the case; additional
-    policies which are not specific to any extension may also be defined
-    and consulted using unique `category` identifiers. In this case, the
-    type of the object delivered for the candidate may be unique to the
-    policy type.
-* `context`: An object representing the context in which the decision is
-  occurring. Its contents are specific to each policy category.
-* `callback`: Optional; a function to call if the policy decision is
-  rejected. This function will be called with the `message` string
-  (which may be undefined) of whichever individual policy caused the
-  operation to fail.
-
-_Design rationale_: Returning a boolean here limits the amount of
-information that can be conveyed by a policy decision, but has the
-benefit of simplicity. In MCT on the desktop, the policy service
-returned a more complex object with both a boolean status and a string
-message; the string message was used rarely (by only around 15% of
-policy user code) and as such is made optional in the call itself here.
-
-_Design rationale_: Returning a boolean instead of a promise here implies
-that policy decisions must occur synchronously. This limits the logic
-which can be involved in a policy decision, but broadens its applicability;
-policy is meant to be used by a variety of other services to separate out
-a certain category of business logic, and a synchronous response means
-that this capability may be utilized by both synchronous and asynchronous
-services. Additionally, policies will often be used in loops (e.g. to filter
-down a set of applicable actions) where latency will have the result of
-harming the user experience (e.g. the user right-clicks and gets stuck
-waiting for a bunch of policy decisions to complete before a menu showing
-available actions can appear.)
-
-The `policyService` is a composite service; it may be modified by adding
-decorators, aggregators, etc.
-
-## Service Components
-
-The policy service is most often used by decorators for other composite
-services. For instance, this bundle contains a decorator for `actionService`
-which filters down the applicable actions exposed by that service based
-on policy.
-
-# Policy Categories
-
-This bundle introduces `action` as a policy category. Policies of this
-category shall take action instances as their candidate argument, and
-action contexts as their context argument.
-
-# Extensions
-
-This bundle introduces the `policies` category of extension. An extension
-of this category should have both an implementation, as well as the following
-metadata:
-
-* `category`: A string identifying which kind of policy decision this
-  effects.
-* `message`: Optional; a human-readable string describing the policy
-  decision when it fails.
-
-An extension of this category must also have an implementation which
-takes no arguments to its constructor and provides a single method,
-`allow`, which takes two arguments, `candidate` and `context` (see
-descriptions above under documentation for `actionService`) and returns
-a boolean indicating whether or not it allows the policy decision.
-
-Policy decisions require consensus among all policies; that is, if a
-single policy returns false, then the policy decision as a whole returns
-false. As a consequence, policies should be written in a permissive
-manner; that is, they should be designed to prohibit behavior under a
-specific set of conditions (by returning false), and allow any behavior
-which does not match those conditions (by returning true.)
diff --git a/platform/policy/bundle.js b/platform/policy/bundle.js
deleted file mode 100644
index 0f9ae86d0d1..00000000000
--- a/platform/policy/bundle.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/PolicyActionDecorator",
-    "./src/PolicyViewDecorator",
-    "./src/PolicyProvider"
-], function (
-    PolicyActionDecorator,
-    PolicyViewDecorator,
-    PolicyProvider
-) {
-
-    return {
-        name: "platform/policy",
-        definition: {
-            "name": "Policy Service",
-            "description": "Provides support for extension-driven decisions.",
-            "sources": "src",
-            "extensions": {
-                "components": [
-                    {
-                        "type": "decorator",
-                        "provides": "actionService",
-                        "implementation": PolicyActionDecorator,
-                        "depends": [
-                            "policyService"
-                        ]
-                    },
-                    {
-                        "type": "decorator",
-                        "provides": "viewService",
-                        "implementation": PolicyViewDecorator,
-                        "depends": [
-                            "policyService"
-                        ]
-                    },
-                    {
-                        "type": "provider",
-                        "provides": "policyService",
-                        "implementation": PolicyProvider,
-                        "depends": [
-                            "policies[]"
-                        ]
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/policy/src/PolicyActionDecorator.js b/platform/policy/src/PolicyActionDecorator.js
deleted file mode 100644
index 6416d56e7d0..00000000000
--- a/platform/policy/src/PolicyActionDecorator.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Filters out actions based on policy.
-         * @param {PolicyService} policyService the service which provides
-         *        policy decisions
-         * @param {ActionService} actionService the service to decorate
-         * @constructor
-         * @memberof platform/policy
-         * @implements {ActionService}
-         */
-        function PolicyActionDecorator(policyService, actionService) {
-            this.policyService = policyService;
-            this.actionService = actionService;
-        }
-
-        PolicyActionDecorator.prototype.getActions = function (context) {
-            var policyService = this.policyService;
-
-            // Check if an action is allowed by policy.
-            function allow(action) {
-                return policyService.allow('action', action, context);
-            }
-
-            // Look up actions, filter out the disallowed ones.
-            return this.actionService.getActions(context).filter(allow);
-        };
-
-        return PolicyActionDecorator;
-    }
-);
diff --git a/platform/policy/src/PolicyProvider.js b/platform/policy/src/PolicyProvider.js
deleted file mode 100644
index 179b6b42a8f..00000000000
--- a/platform/policy/src/PolicyProvider.js
+++ /dev/null
@@ -1,143 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * This bundle implements the policy service.
- * @namespace platform/policy
- */
-define(
-    [],
-    function () {
-
-        /**
-         * A policy is a participant in decision-making policies. Policies
-         * are divided into categories (identified symbolically by strings);
-         * within a given category, every given policy-driven decision will
-         * occur by consulting all available policies and requiring their
-         * collective consent (that is, every individual policy has the
-         * power to reject the decision entirely.)
-         *
-         * @interface Policy
-         * @template C, X
-         */
-
-        /**
-         * Check if this policy allows the described decision. The types
-         * of the arguments expected here vary depending on policy category.
-         *
-         * @method Policy#allow
-         * @template C, X
-         * @param {C} candidate the thing to allow or disallow
-         * @param {X} context the context in which the decision occurs
-         * @returns {boolean} false if disallowed; otherwise, true
-         */
-
-        /**
-         * The `policyService` handles decisions about what things
-         * are and are not allowed in certain contexts.
-         * @interface PolicyService
-         */
-
-        /**
-         * Check whether or not a certain decision is allowed by
-         * policy.
-         * @param {string} category a machine-readable identifier
-         *        for the kind of decision being made
-         * @param candidate the object about which the decision is
-         *        being made
-         * @param context the context in which the decision occurs
-         * @param {Function} [callback] callback to invoke with a
-         *        string message describing the reason a decision
-         *        was disallowed (if its disallowed)
-         * @returns {boolean} true if the decision is allowed,
-         *          otherwise false.
-         * @method PolicyService#allow
-         */
-
-        /**
-         * Provides an implementation of `policyService` which consults
-         * various policy extensions to determine whether or not a specific
-         * decision should be allowed.
-         * @memberof platform/policy
-         * @constructor
-         * @implements {PolicyService}
-         * @param {Policy[]} policies the policies to enforce
-         */
-        function PolicyProvider(policies) {
-            var policyMap = {};
-
-            // Instantiate a policy. Mostly just a constructor call, but
-            // we also track the message (which was provided as metadata
-            // along with the constructor) so that we can expose this later.
-            function instantiate(Policy) {
-                var policy = Object.create(new Policy());
-                policy.message = Policy.message;
-
-                return policy;
-            }
-
-            // Add a specific policy to the map for later lookup,
-            // according to its category. Note that policy extensions are
-            // provided as constructors, so they are instantiated here.
-            function addToMap(Policy) {
-                var category = (Policy || {}).category;
-                if (category) {
-                    // Create a new list for that category if needed...
-                    policyMap[category] = policyMap[category] || [];
-                    // ...and put an instance of this policy in that list.
-                    policyMap[category].push(instantiate(Policy));
-                }
-            }
-
-            // Populate the map for subsequent lookup
-            policies.forEach(addToMap);
-            this.policyMap = policyMap;
-        }
-
-        PolicyProvider.prototype.allow = function (category, candidate, context, callback) {
-            var policyList = this.policyMap[category] || [],
-                i;
-
-            // Iterate through policies. We do this instead of map or
-            // forEach so that we can return immediately if a policy
-            // chooses to disallow this decision.
-            for (i = 0; i < policyList.length; i += 1) {
-                // Consult the policy...
-                if (!policyList[i].allow(candidate, context)) {
-                    // ...it disallowed, so pass its message to
-                    // the callback (if any)
-                    if (callback) {
-                        callback(policyList[i].message);
-                    }
-
-                    // And return the failed result.
-                    return false;
-                }
-            }
-
-            // No policy disallowed this decision.
-            return true;
-        };
-
-        return PolicyProvider;
-    }
-);
diff --git a/platform/policy/src/PolicyViewDecorator.js b/platform/policy/src/PolicyViewDecorator.js
deleted file mode 100644
index 7a9b114ff46..00000000000
--- a/platform/policy/src/PolicyViewDecorator.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Filters out views based on policy.
-         * @param {PolicyService} policyService the service which provides
-         *        policy decisions
-         * @param {ViewService} viewService the service to decorate
-         * @constructor
-         * @memberof platform/policy
-         * @implements {ViewService}
-         */
-        function PolicyViewDecorator(policyService, viewService) {
-            this.policyService = policyService;
-            this.viewService = viewService;
-        }
-
-        PolicyViewDecorator.prototype.getViews = function (domainObject) {
-            var policyService = this.policyService;
-
-            // Check if an action is allowed by policy.
-            function allow(view) {
-                return policyService.allow('view', view, domainObject);
-            }
-
-            // Look up actions, filter out the disallowed ones.
-            return this.viewService.getViews(domainObject).filter(allow);
-        };
-
-        return PolicyViewDecorator;
-    }
-);
diff --git a/platform/policy/test/PolicyActionDecoratorSpec.js b/platform/policy/test/PolicyActionDecoratorSpec.js
deleted file mode 100644
index 8ddc8b699a9..00000000000
--- a/platform/policy/test/PolicyActionDecoratorSpec.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/PolicyActionDecorator"],
-    function (PolicyActionDecorator) {
-
-        describe("The policy action decorator", function () {
-            var mockPolicyService,
-                mockActionService,
-                testContext,
-                testActions,
-                decorator;
-
-            beforeEach(function () {
-                mockPolicyService = jasmine.createSpyObj(
-                    'policyService',
-                    ['allow']
-                );
-                mockActionService = jasmine.createSpyObj(
-                    'actionService',
-                    ['getActions']
-                );
-
-                // Content of actions should be irrelevant to this
-                // decorator, so just give it some objects to pass
-                // around.
-                testActions = [
-                    { someKey: "a" },
-                    { someKey: "b" },
-                    { someKey: "c" }
-                ];
-                testContext = { someKey: "some value" };
-
-                mockActionService.getActions.and.returnValue(testActions);
-                mockPolicyService.allow.and.returnValue(true);
-
-                decorator = new PolicyActionDecorator(
-                    mockPolicyService,
-                    mockActionService
-                );
-            });
-
-            it("delegates to its decorated action service", function () {
-                decorator.getActions(testContext);
-                expect(mockActionService.getActions)
-                    .toHaveBeenCalledWith(testContext);
-            });
-
-            it("provides actions from its decorated action service", function () {
-                // Mock policy service allows everything by default,
-                // so everything should be returned
-                expect(decorator.getActions(testContext))
-                    .toEqual(testActions);
-            });
-
-            it("consults the policy service for each candidate action", function () {
-                decorator.getActions(testContext);
-                testActions.forEach(function (testAction) {
-                    expect(mockPolicyService.allow).toHaveBeenCalledWith(
-                        'action',
-                        testAction,
-                        testContext
-                    );
-                });
-            });
-
-            it("filters out policy-disallowed actions", function () {
-                // Disallow the second action
-                mockPolicyService.allow.and.callFake(function (cat, candidate) {
-                    return candidate.someKey !== 'b';
-                });
-                expect(decorator.getActions(testContext))
-                    .toEqual([testActions[0], testActions[2]]);
-            });
-
-        });
-    }
-);
diff --git a/platform/policy/test/PolicyProviderSpec.js b/platform/policy/test/PolicyProviderSpec.js
deleted file mode 100644
index 7304030c836..00000000000
--- a/platform/policy/test/PolicyProviderSpec.js
+++ /dev/null
@@ -1,128 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/PolicyProvider"],
-    function (PolicyProvider) {
-
-        describe("The policy provider", function () {
-            var testPolicies,
-                mockPolicies,
-                mockPolicyConstructors,
-                testCandidate,
-                testContext,
-                provider;
-
-            beforeEach(function () {
-                testPolicies = [
-                    {
-                        category: "a",
-                        message: "some message",
-                        result: true
-                    },
-                    {
-                        category: "a",
-                        result: true
-                    },
-                    {
-                        category: "a",
-                        result: true
-                    },
-                    {
-                        category: "b",
-                        message: "some message",
-                        result: true
-                    },
-                    {
-                        category: "b",
-                        result: true
-                    },
-                    {
-                        category: "b",
-                        result: true
-                    }
-                ];
-                mockPolicies = testPolicies.map(function (p) {
-                    var mockPolicy = jasmine.createSpyObj("policy", ['allow']);
-                    mockPolicy.allow.and.callFake(function () {
-                        return p.result;
-                    });
-
-                    return mockPolicy;
-                });
-                mockPolicyConstructors = testPolicies.map(function (p, i) {
-                    var mockPolicyConstructor = jasmine.createSpy();
-                    mockPolicyConstructor.and.returnValue(mockPolicies[i]);
-                    mockPolicyConstructor.message = p.message;
-                    mockPolicyConstructor.category = p.category;
-
-                    return mockPolicyConstructor;
-                });
-
-                testCandidate = { someKey: "some value" };
-                testContext = { someOtherKey: "some other value" };
-
-                provider = new PolicyProvider(mockPolicyConstructors);
-            });
-
-            it("has an allow method", function () {
-                expect(provider.allow).toEqual(jasmine.any(Function));
-            });
-
-            it("consults all relevant policies", function () {
-                provider.allow("a", testCandidate, testContext);
-                expect(mockPolicies[0].allow)
-                    .toHaveBeenCalledWith(testCandidate, testContext);
-                expect(mockPolicies[1].allow)
-                    .toHaveBeenCalledWith(testCandidate, testContext);
-                expect(mockPolicies[2].allow)
-                    .toHaveBeenCalledWith(testCandidate, testContext);
-                expect(mockPolicies[3].allow)
-                    .not.toHaveBeenCalled();
-                expect(mockPolicies[4].allow)
-                    .not.toHaveBeenCalled();
-                expect(mockPolicies[5].allow)
-                    .not.toHaveBeenCalled();
-            });
-
-            it("allows what all policies allow", function () {
-                expect(provider.allow("a", testCandidate, testContext))
-                    .toBeTruthy();
-            });
-
-            it("disallows what any one policy disallows", function () {
-                testPolicies[1].result = false;
-                expect(provider.allow("a", testCandidate, testContext))
-                    .toBeFalsy();
-            });
-
-            it("provides a message for policy failure, when available", function () {
-                var mockCallback = jasmine.createSpy();
-                testPolicies[0].result = false;
-                expect(provider.allow("a", testCandidate, testContext, mockCallback))
-                    .toBeFalsy();
-                expect(mockCallback).toHaveBeenCalledWith(testPolicies[0].message);
-            });
-
-        });
-    }
-);
diff --git a/platform/policy/test/PolicyViewDecoratorSpec.js b/platform/policy/test/PolicyViewDecoratorSpec.js
deleted file mode 100644
index 2ed79514415..00000000000
--- a/platform/policy/test/PolicyViewDecoratorSpec.js
+++ /dev/null
@@ -1,102 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/PolicyViewDecorator"],
-    function (PolicyViewDecorator) {
-
-        describe("The policy view decorator", function () {
-            var mockPolicyService,
-                mockViewService,
-                mockDomainObject,
-                testViews,
-                decorator;
-
-            beforeEach(function () {
-                mockPolicyService = jasmine.createSpyObj(
-                    'policyService',
-                    ['allow']
-                );
-                mockViewService = jasmine.createSpyObj(
-                    'viewService',
-                    ['getViews']
-                );
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getId']
-                );
-
-                // Content of actions should be irrelevant to this
-                // decorator, so just give it some objects to pass
-                // around.
-                testViews = [
-                    { someKey: "a" },
-                    { someKey: "b" },
-                    { someKey: "c" }
-                ];
-
-                mockDomainObject.getId.and.returnValue('xyz');
-                mockViewService.getViews.and.returnValue(testViews);
-                mockPolicyService.allow.and.returnValue(true);
-
-                decorator = new PolicyViewDecorator(
-                    mockPolicyService,
-                    mockViewService
-                );
-            });
-
-            it("delegates to its decorated view service", function () {
-                decorator.getViews(mockDomainObject);
-                expect(mockViewService.getViews)
-                    .toHaveBeenCalledWith(mockDomainObject);
-            });
-
-            it("provides views from its decorated view service", function () {
-                // Mock policy service allows everything by default,
-                // so everything should be returned
-                expect(decorator.getViews(mockDomainObject))
-                    .toEqual(testViews);
-            });
-
-            it("consults the policy service for each candidate view", function () {
-                decorator.getViews(mockDomainObject);
-                testViews.forEach(function (testView) {
-                    expect(mockPolicyService.allow).toHaveBeenCalledWith(
-                        'view',
-                        testView,
-                        mockDomainObject
-                    );
-                });
-            });
-
-            it("filters out policy-disallowed views", function () {
-                // Disallow the second action
-                mockPolicyService.allow.and.callFake(function (cat, candidate) {
-                    return candidate.someKey !== 'b';
-                });
-                expect(decorator.getViews(mockDomainObject))
-                    .toEqual([testViews[0], testViews[2]]);
-            });
-
-        });
-    }
-);
diff --git a/platform/representation/README.md b/platform/representation/README.md
deleted file mode 100644
index 493a04bd0a7..00000000000
--- a/platform/representation/README.md
+++ /dev/null
@@ -1,120 +0,0 @@
-This bundle introduces the notion of "representations" to Open MCT,
-primarily via an Angular directive, `mct-representation`.
-
-A representation is used to display domain objects as Angular templates.
-
-# Extension Categories
-
-This bundle introduces four new categories of extension:
-
-* `templates`: Reusable Angular templates. This category of extension is
-  present to support the `mct-include` directive, which in turn is present
-  to allow templates to be loaded from across bundles, without knowing
-  their path ahead of time. A template has the following fields:
-    * `key`: The machine-readable name which identifies this template,
-      matched against the value given to the `key` attribute of the
-      `mct-include` directive.
-    * `templateUrl`: The path to the relevant Angular template. This
-      path is relative to the bundle's resources directory.
-* `representations`: Ways of representing a domain object. A representation
-  is defined with the following fields:
-    * `key`: The machine-readable name which identifies the representation.
-    * `templateUrl`: The path to the representation's Angular template. This
-      path is relative to the bundle's resources directory.
-    * `uses`: An array of capability names. Indicates that this representation
-      intends to use those capabilities of a domain object (via a
-      `useCapability` call), and expects to find the latest results of
-      that `useCapability` call in the scope of the presented template (under
-      the same name as the capability itself.)
-    * `gestures`: An array of keys identifying gestures which should be
-      available upon this representation. Examples of gestures include
-      "drag" (for representations that should act as draggable sources
-      for drag-drop operations) and "menu" (for representations which
-      should show a domain-object-specific context menu on right-click.)
-* `views`: A view is a representation with a visible identity to the user
-  (e.g. something they can switch among in the view menu.) A view
-  supports the same fields as a representation, and additionally:
-    * `name`: The human-readable name of the view.
-    * `glyph`: A character to display as an icon for this view.
-    * `description`: The human-readable description of the view.
-* `gestures`: A gesture is a user action which can be taken upon a
-  representation of a domain object. Gestures are described by:
-    * `key`: The machine-readable name used to look up the gesture.
-    * `implementation`: The class (relative to the bundle's sources
-    directory) which implements the gesture. This is instantiated once
-    per representation that uses the gesture. This class will
-    receive the jqLite-wrapped `mct-representation` element and the
-    domain object being represented as arguments, and should do any
-    necessary "wiring" (e.g. listening for events) during its
-    constructor call. This class may also expose an optional `destroy()`
-    method which should be called when the gesture should be removed,
-    to avoid memory leaks by way of unremoved listeners.
-
-
-# Extensions
-
-## Directives
-
-* `mct-include`: Includes a template by symbolic key; used to augment the
-  capability of Angular's `ng-include`, which loads templates by path.
-  Takes three attributes as Angular expressions:
-    * `key`: The symbolic identifier of the template to load, matched
-      against keys defined in extensions of category `templates`.
-      Note that this is an Angular expression, so internal quotes
-      may be necessary (see documentation of `ng-include`, which has the same
-      "gotcha" for URLs.)
-    * `ng-model`: Optional (and not often used); a model which should appear
-      in the included template's scope, for it to modify. The specific
-      interpretation of this attribute will vary depending on the included
-      template.
-    * `parameters`: Optional (and not often used); as `ng-model`, except the
-      intent is to provide information about how to display the included
-      template (e.g. "title", "color"). The specific interpretation of
-      this attribute will vary depending on the included template.
-* `mct-representation`: Similar to `mct-include`, except the template to
-  include is specifically a representation of a domain object.
-    * `key`: As used in `mct-include`, except it will refer to an extension
-      or category `representations` or of `views`.
-    * `mct-object`: An Angular expression; the domain object to be
-      represented.
-    * `parameters`: As defined for `mct-include`.
-
-### Examples
-
-    <mct-include key="'status-bar'"></mct-include>
-    <mct-representation key="'grid-item'"></mct-representation>
-
-    <mct-include key="'title-bar'"
-                 parameters="{title: 'Hello', tooltip: 'Hello, world.'}">
-    </mct-include>
-
-
-## Components
-
-* `gestureService`: A provider of type `gestureService` is included to
-  remove the need to depend on `gestures[]` directly; instead, the
-  gesture service can be used to add/remove gestures in groups. This is
-  present primarily for bundle-internal use (it is used by the
-  `mct-representation` directive) but it is exposed as a service component
-  for convenience.
-
-## Gestures
-
-In addition to introducing `gestures` as a category of extension, this bundle
-introduces three specific gestures as "built in" options, listed by key:
-
-* `drag`: Representations with this gesture can serve as drag sources for
-  drag-drop domain object composition.
-* `drop`: Representations with this gesture can serve as drop targets for
-  drag-drop domain object composition.
-  * When a drop occurs, an `mctDrop` event will be broadcast with two
-  arguments (in addition to Angular's event object): The domain object
-  identifier for the dropped object, and the position (with `x` and `y`
-  properties in pixels) of the drop, relative to the top-left of the
-  representation which features the drop gesture.
-* `menu`: Representations with this gesture will provide a custom context
-  menu (instead of the browser default).
-  * It should be noted that this gesture does _not_ define the appearance
-  or functionality of this menu; rather, it simply adds a
-  representation of key `context-menu` to the document at an appropriate
-  location. This representation will be supplied by the commonUI bundle.
diff --git a/platform/representation/bundle.js b/platform/representation/bundle.js
deleted file mode 100644
index 915eb306bcb..00000000000
--- a/platform/representation/bundle.js
+++ /dev/null
@@ -1,144 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/MCTInclude",
-    "./src/MCTRepresentation",
-    "./src/gestures/DragGesture",
-    "./src/gestures/DropGesture",
-    "./src/gestures/GestureProvider",
-    "./src/gestures/GestureRepresenter",
-    "./src/services/DndService",
-    "./src/TemplateLinker",
-    "./src/TemplatePrefetcher"
-], function (
-    MCTInclude,
-    MCTRepresentation,
-    DragGesture,
-    DropGesture,
-    GestureProvider,
-    GestureRepresenter,
-    DndService,
-    TemplateLinker,
-    TemplatePrefetcher
-) {
-
-    return {
-        name: "platform/representation",
-        definition: {
-            "extensions": {
-                "directives": [
-                    {
-                        "key": "mctInclude",
-                        "implementation": MCTInclude,
-                        "depends": [
-                            "templates[]",
-                            "templateLinker"
-                        ]
-                    },
-                    {
-                        "key": "mctRepresentation",
-                        "implementation": MCTRepresentation,
-                        "depends": [
-                            "representations[]",
-                            "views[]",
-                            "representers[]",
-                            "$q",
-                            "templateLinker",
-                            "$log"
-                        ]
-                    }
-                ],
-                "gestures": [
-                    {
-                        "key": "drag",
-                        "implementation": DragGesture,
-                        "depends": [
-                            "$log",
-                            "dndService"
-                        ]
-                    },
-                    {
-                        "key": "drop",
-                        "implementation": DropGesture,
-                        "depends": [
-                            "dndService",
-                            "$q"
-                        ]
-                    }
-                ],
-                "components": [
-                    {
-                        "provides": "gestureService",
-                        "type": "provider",
-                        "implementation": GestureProvider,
-                        "depends": [
-                            "gestures[]"
-                        ]
-                    }
-                ],
-                "representers": [
-                    {
-                        "implementation": GestureRepresenter,
-                        "depends": [
-                            "gestureService"
-                        ]
-                    }
-                ],
-                "services": [
-                    {
-                        "key": "dndService",
-                        "implementation": DndService,
-                        "depends": [
-                            "$log"
-                        ]
-                    },
-                    {
-                        "key": "templateLinker",
-                        "implementation": TemplateLinker,
-                        "depends": [
-                            "$templateRequest",
-                            "$sce",
-                            "$compile",
-                            "$log"
-                        ],
-                        "comment": "For internal use by mct-include and mct-representation."
-                    }
-                ],
-                "runs": [
-                    {
-                        "priority": "mandatory",
-                        "implementation": TemplatePrefetcher,
-                        "depends": [
-                            "templateLinker",
-                            "templates[]",
-                            "views[]",
-                            "representations[]",
-                            "controls[]",
-                            "containers[]"
-                        ]
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/representation/src/MCTInclude.js b/platform/representation/src/MCTInclude.js
deleted file mode 100644
index c2c308975ad..00000000000
--- a/platform/representation/src/MCTInclude.js
+++ /dev/null
@@ -1,102 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining MCTInclude. Created by vwoeltje on 11/7/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * Defines the mct-include directive. This acts like the
-         * ng-include directive, except it accepts a symbolic
-         * key which can be exposed by bundles, instead of requiring
-         * an explicit path.
-         *
-         * This directive uses two-way binding for three attributes:
-         *
-         * * `key`, matched against the key of a defined template extension
-         *   in order to determine which actual template to include.
-         * * `ng-model`, populated as `ngModel` in the loaded template's
-         *   scope; used for normal ng-model purposes (e.g. if the
-         *   included template is meant to two-way bind to a data model.)
-         * * `parameters`, used to communicate display parameters to
-         *   the included template (e.g. title.) The difference between
-         *   `parameters` and `ngModel` is intent: Both are two-way
-         *   bound, but `ngModel` is useful for data models (more like
-         *   an output) and `parameters` is meant to be useful for
-         *   display parameterization (more like an input.)
-         *
-         * @memberof platform/representation
-         * @constructor
-         * @param {TemplateDefinition[]} templates an array of
-         *        template extensions
-         */
-        function MCTInclude(templates, templateLinker) {
-            var templateMap = {};
-
-            function link(scope, element) {
-                var changeTemplate = templateLinker.link(
-                    scope,
-                    element,
-                    scope.key && templateMap[scope.key]
-                );
-
-                scope.$watch('key', function (newKey, oldKey) {
-                    if (newKey !== oldKey) {
-                        changeTemplate(newKey && templateMap[newKey]);
-                    }
-                });
-            }
-
-            // Prepopulate templateMap for easy look up by key
-            templates.forEach(function (template) {
-                var key = template.key;
-                // First found should win (priority ordering)
-                templateMap[key] =
-                    templateMap[key] || template;
-            });
-
-            return {
-                // Only show at the element level
-                restrict: "E",
-
-                // Use the included controller to populate scope
-                link: link,
-
-                // May hide the element, so let other directives act first
-                priority: -1000,
-
-                // Two-way bind key, ngModel, and parameters
-                scope: {
-                    key: "=",
-                    ngModel: "=",
-                    parameters: "="
-                }
-            };
-        }
-
-        return MCTInclude;
-    }
-);
-
diff --git a/platform/representation/src/MCTRepresentation.js b/platform/representation/src/MCTRepresentation.js
deleted file mode 100644
index 0bed902667d..00000000000
--- a/platform/representation/src/MCTRepresentation.js
+++ /dev/null
@@ -1,308 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * This bundle implements the directives for representing domain objects
- * as Angular-managed HTML.
- * @namespace platform/representation
- */
-define(
-    [],
-    function () {
-
-        /**
-         * Defines the mct-representation directive. This may be used to
-         * present domain objects as HTML (with event wiring), with the
-         * specific representation being mapped to a defined extension
-         * (as defined in either the `representation` category-of-extension,
-         * or the `views` category-of-extension.)
-         *
-         * This directive uses two-way binding for three attributes:
-         *
-         * * `key`, matched against the key of a defined template extension
-         *   in order to determine which actual template to include.
-         * * `mct-object`, populated as `domainObject` in the loaded
-         *   template's scope. This is the domain object being
-         *   represented as HTML by this directive.
-         * * `parameters`, used to communicate display parameters to
-         *   the included template (e.g. title.)
-         *
-         * @memberof platform/representation
-         * @constructor
-         * @param {RepresentationDefinition[]} representations an array of
-         *        representation extensions
-         * @param {ViewDefinition[]} views an array of view extensions
-         */
-        function MCTRepresentation(representations, views, representers, $q, templateLinker, $log) {
-            var representationMap = {};
-
-            // Assemble all representations and views
-            // The distinction between views and representations is
-            // not important here (view is-a representation)
-            representations.concat(views).forEach(function (representation) {
-                var key = representation.key;
-
-                // Store the representation
-                representationMap[key] = representationMap[key] || [];
-                representationMap[representation.key].push(representation);
-            });
-
-            // Look up a matching representation for this domain object
-            function lookup(key, domainObject) {
-                var candidates = representationMap[key] || [],
-                    type,
-                    i;
-                // Filter candidates by object type
-                for (i = 0; i < candidates.length; i += 1) {
-                    type = candidates[i].type;
-                    if (!type || !domainObject
-                            || domainObject.getCapability('type').instanceOf(type)) {
-                        return candidates[i];
-                    }
-                }
-            }
-
-            function link($scope, element, attrs) {
-                var activeRepresenters = representers.map(function (Representer) {
-                        return new Representer($scope, element, attrs);
-                    }),
-                    toClear = [], // Properties to clear out of scope on change
-                    counter = 0,
-                    couldRepresent = false,
-                    lastIdPath = [],
-                    lastKey,
-                    mutationListener,
-                    changeTemplate = templateLinker.link($scope, element);
-
-                // Populate scope with any capabilities indicated by the
-                // representation's extension definition
-                function refreshCapabilities() {
-                    var domainObject = $scope.domainObject,
-                        representation = lookup($scope.key, domainObject),
-                        uses = ((representation || {}).uses || []),
-                        myCounter = counter;
-
-                    if (mutationListener) {
-                        mutationListener();
-                        mutationListener = undefined;
-                    }
-
-                    if (domainObject) {
-                        mutationListener = domainObject
-                            .getCapability('mutation')
-                            .listen(refreshCapabilities);
-
-                        // Update model
-                        $scope.model = domainObject.getModel();
-
-                        // Provide any of the capabilities requested
-                        uses.forEach(function (used) {
-                            $log.debug([
-                                "Requesting capability ",
-                                used,
-                                " for representation ",
-                                $scope.key
-                            ].join(""));
-
-                            $q.when(
-                                domainObject.useCapability(used)
-                            ).then(function (c) {
-                                // Avoid clobbering capabilities from
-                                // subsequent representations;
-                                // Angular reuses scopes.
-                                if (counter === myCounter) {
-                                    $scope[used] = c;
-                                }
-                            });
-                        });
-                    }
-                }
-
-                // Destroy (deallocate any resources associated with) any
-                // active representers.
-                function destroyRepresenters() {
-                    activeRepresenters.forEach(function (activeRepresenter) {
-                        activeRepresenter.destroy();
-                    });
-                }
-
-                function unchanged(canRepresent, idPath, key) {
-                    return (canRepresent === couldRepresent)
-                        && (key === lastKey)
-                        && (idPath.length === lastIdPath.length)
-                        && idPath.every(function (id, i) {
-                            return id === lastIdPath[i];
-                        });
-                }
-
-                function getIdPath(domainObject) {
-                    if (!domainObject) {
-                        return [];
-                    }
-
-                    if (!domainObject.hasCapability('context')) {
-                        return [domainObject.getId()];
-                    }
-
-                    return domainObject.getCapability('context')
-                        .getPath().map(function (pathObject) {
-                            return pathObject.getId();
-                        });
-                }
-
-                // General-purpose refresh mechanism; should set up the scope
-                // as appropriate for current representation key and
-                // domain object.
-                function refresh() {
-                    var domainObject = $scope.domainObject,
-                        representation = lookup($scope.key, domainObject),
-                        uses = ((representation || {}).uses || []),
-                        canRepresent = Boolean(representation && domainObject),
-                        idPath = getIdPath(domainObject),
-                        key = $scope.key;
-
-                    if (unchanged(canRepresent, idPath, key)) {
-                        return;
-                    }
-
-                    // Create an empty object named "representation", for this
-                    // representation to store local variables into.
-                    $scope.representation = {};
-
-                    // Change templates (passing in undefined to clear
-                    // if we don't have enough info to show a template.)
-                    changeTemplate(canRepresent ? representation : undefined);
-
-                    // Any existing representers are no longer valid; release them.
-                    destroyRepresenters();
-
-                    // Log if a key was given, but no matching representation
-                    // was found.
-                    if (!representation && $scope.key) {
-                        $log.warn("No representation found for " + $scope.key);
-                    }
-
-                    // Clear out the scope from the last representation
-                    toClear.forEach(function (property) {
-                        delete $scope[property];
-                    });
-
-                    // To allow simplified change detection next time around
-                    couldRepresent = canRepresent;
-                    lastIdPath = idPath;
-                    lastKey = key;
-
-                    // Populate scope with fields associated with the current
-                    // domain object (if one has been passed in)
-                    if (canRepresent) {
-                        // Track how many representations we've made in this scope,
-                        // to ensure that the correct representations are matched to
-                        // the correct object/key pairs.
-                        counter += 1;
-
-                        // Initialize any capabilities
-                        refreshCapabilities();
-
-                        // Also provide the view configuration,
-                        // for the specific view
-                        $scope.configuration =
-                            ($scope.model.configuration || {})[$scope.key] || {};
-
-                        // Finally, wire up any additional behavior (such as
-                        // gestures) associated with this representation.
-                        activeRepresenters.forEach(function (representer) {
-                            representer.represent(representation, domainObject);
-                        });
-
-                        // Track which properties we want to clear from scope
-                        // next change object/key pair changes
-                        toClear = uses.concat(['model']);
-                    }
-                }
-
-                // Update the representation when the key changes (e.g. if a
-                // different representation has been selected)
-                $scope.$watch("key", refresh);
-
-                // Also update when the represented domain object changes
-                // (to a different object)
-                $scope.$watch("domainObject", refresh);
-
-                // Make sure any resources allocated by representers also get
-                // released.
-                $scope.$on("$destroy", destroyRepresenters);
-                $scope.$on("$destroy", function () {
-                    if (mutationListener) {
-                        mutationListener();
-                    }
-                });
-
-                // Do one initial refresh, so that we don't need another
-                // digest iteration just to populate the scope. Failure to
-                // do this can result in unstable digest cycles, which
-                // Angular will detect, and throw an Error about.
-                refresh();
-            }
-
-            return {
-                // Only applicable at the element level
-                restrict: "E",
-
-                // Handle Angular's linking step
-                link: link,
-
-                // May hide the element, so let other directives act first
-                priority: -1000,
-
-                // Two-way bind key and parameters, get the represented domain
-                // object as "mct-object"
-                scope: {
-                    key: "=",
-                    domainObject: "=mctObject",
-                    ngModel: "=",
-                    parameters: "="
-                }
-            };
-        }
-
-        /**
-         * A representer participates in the process of instantiating a
-         * representation of a domain object.
-         *
-         * @interface Representer
-         * @augments {Destroyable}
-         */
-        /**
-         * Set the current representation in use, and the domain
-         * object being represented.
-         *
-         * @method Representer#represent
-         * @param {RepresentationDefinition} representation the
-         *        definition of the representation in use
-         * @param {DomainObject} domainObject the domain object
-         *        being represented
-         */
-
-        return MCTRepresentation;
-    }
-);
-
diff --git a/platform/representation/src/TemplateLinker.js b/platform/representation/src/TemplateLinker.js
deleted file mode 100644
index d42a9e8eeb1..00000000000
--- a/platform/representation/src/TemplateLinker.js
+++ /dev/null
@@ -1,177 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * The `templateLinker` service is intended for internal use by
-         * the `mct-include` and `mct-representation` directives. It is
-         * used to support common behavior of directives; specifically,
-         * loading templates and inserting them into a specified element,
-         * and/or removing that element from the DOM when there is no
-         * template to populate it with.
-         *
-         * @param {Function} $templateRequest Angular's `$templateRequest`
-         *        service
-         * @param $sce Angular's `$sce` service
-         * @param {Function} $compile Angular's `$compile` service
-         * @param $log Angular's `$log` service
-         * @private
-         */
-        function TemplateLinker($templateRequest, $sce, $compile, $log) {
-            this.$templateRequest = $templateRequest;
-            this.$sce = $sce;
-            this.$compile = $compile;
-            this.$log = $log;
-        }
-
-        /**
-         * Load a template from the given URL. This request will be handled
-         * via `$templateRequest` to ensure caching et cetera.
-         * @param {string} the URL for the template
-         * @returns {Promise.<string>} a promise for the HTML content of
-         *          the template
-         */
-        TemplateLinker.prototype.load = function (templateUrl) {
-            return this.$templateRequest(
-                this.$sce.trustAsResourceUrl(templateUrl),
-                false
-            );
-        };
-
-        /**
-         * Get a path to a template from an extension definition fo
-         * a template, representation, or view.
-         * @param {TemplateDefinition} extensionDefinition the definition
-         *        of the template/representation/view to resolve
-         */
-        TemplateLinker.prototype.getPath = function (extensionDefinition) {
-            return [
-                extensionDefinition.bundle.path,
-                extensionDefinition.bundle.resources,
-                extensionDefinition.templateUrl
-            ].join('/');
-        };
-
-        /**
-         * Populate the given element with templates, within the given scope;
-         * intended to support the `link` function of the supported directives.
-         *
-         * @param {Scope} scope the Angular scope to use when rendering
-         *        templates
-         * @param element the jqLite-wrapped element into which templates
-         *        should be inserted
-         * @param {TemplateDefinition} extensionDefinition the definition
-         *        of the template/representation/view to display initially
-         * @returns {Function} a function which can be called with a template's
-         *          extension definition to switch templates, or `undefined`
-         *          to remove.
-         */
-        TemplateLinker.prototype.link = function (scope, element, ext) {
-            var activeElement = element,
-                activeTemplateUrl,
-                comment = this.$compile('<!-- hidden mct element -->')(scope),
-                activeScope,
-                self = this;
-
-            function destroyScope() {
-                if (activeScope) {
-                    activeScope.$destroy();
-                    activeScope = undefined;
-                }
-            }
-
-            function removeElement() {
-                if (activeElement !== comment) {
-                    destroyScope();
-                    activeElement.replaceWith(comment);
-                    activeElement = comment;
-                }
-            }
-
-            function addElement() {
-                if (activeElement !== element) {
-                    activeElement.replaceWith(element);
-                    activeElement = element;
-                    activeElement.empty();
-                }
-            }
-
-            function populateElement(template) {
-                destroyScope();
-                activeScope = scope.$new(false);
-                element.html(template);
-                self.$compile(element.contents())(activeScope);
-            }
-
-            function showTemplate(template) {
-                addElement();
-                populateElement(template);
-                activeTemplateUrl = undefined;
-            }
-
-            function badTemplateUrl(templateUrl) {
-                self.$log.warn("Couldn't load template at " + templateUrl);
-                removeElement();
-            }
-
-            function changeTemplateUrl(templateUrl) {
-                if (templateUrl) {
-                    destroyScope();
-                    addElement();
-                    self.load(templateUrl).then(function (template) {
-                        // Avoid race conditions
-                        if (templateUrl === activeTemplateUrl) {
-                            populateElement(template);
-                        }
-                    }, function () {
-                        badTemplateUrl(templateUrl);
-                    });
-                } else {
-                    removeElement();
-                }
-
-                activeTemplateUrl = templateUrl;
-            }
-
-            function changeTemplate(templateExt) {
-                templateExt = templateExt || {};
-                if (templateExt.templateUrl) {
-                    changeTemplateUrl(self.getPath(templateExt));
-                } else if (templateExt.template) {
-                    showTemplate(templateExt.template);
-                } else {
-                    removeElement();
-                }
-            }
-
-            changeTemplate(ext);
-
-            return changeTemplate;
-        };
-
-        return TemplateLinker;
-    }
-);
-
diff --git a/platform/representation/src/TemplatePrefetcher.js b/platform/representation/src/TemplatePrefetcher.js
deleted file mode 100644
index 1509d2d0c1d..00000000000
--- a/platform/representation/src/TemplatePrefetcher.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    function () {
-
-        /**
-         * Loads all templates when the application is started.
-         * @param {platform/representation.TemplateLinker} templateLinker
-         *        the `templateLinker` service, used to load and cache
-         *        template extensions
-         * @param {...Array.<{templateUrl: string}>} extensions arrays
-         *        of template or template-like extensions
-         */
-        function TemplatePrefetcher(templateLinker) {
-            Array.prototype.slice.apply(arguments, [1])
-                .reduce(function (a, b) {
-                    return a.concat(b);
-                }, [])
-                .forEach(function (ext) {
-                    if (ext.templateUrl) {
-                        templateLinker.load(templateLinker.getPath(ext));
-                    }
-                });
-        }
-
-        return TemplatePrefetcher;
-    }
-);
diff --git a/platform/representation/src/gestures/DragGesture.js b/platform/representation/src/gestures/DragGesture.js
deleted file mode 100644
index 937b63f6aed..00000000000
--- a/platform/representation/src/gestures/DragGesture.js
+++ /dev/null
@@ -1,119 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining DragGesture. Created by vwoeltje on 11/17/14.
- */
-define(
-    ['./GestureConstants'],
-    function (GestureConstants) {
-
-        /**
-         * Add event handlers to a representation such that it may be
-         * dragged as the source for drag-drop composition.
-         *
-         * @memberof platform/representation
-         * @constructor
-         * @implements {Gesture}
-         * @param $log Angular's logging service
-         * @param element the jqLite-wrapped element which should become
-         *        draggable
-         * @param {DomainObject} domainObject the domain object which
-         *        is represented; this will be passed on drop.
-         */
-        function DragGesture($log, dndService, element, domainObject) {
-            function startDrag(e) {
-                var event = (e || {}).originalEvent || e;
-
-                $log.debug("Initiating drag");
-
-                try {
-                    // Set the data associated with the drag-drop operation
-                    event.dataTransfer.effectAllowed = 'move';
-
-                    // Support drop as plain-text (JSON); not used internally
-                    event.dataTransfer.setData(
-                        'text/plain',
-                        JSON.stringify({
-                            id: domainObject.getId(),
-                            model: domainObject.getModel()
-                        })
-                    );
-
-                    // For internal use, pass the object's identifier as
-                    // part of the drag
-                    event.dataTransfer.setData(
-                        GestureConstants.MCT_DRAG_TYPE,
-                        domainObject.getId()
-                    );
-
-                    // Finally, also pass the id object instance via the
-                    // dndService, allowing inspection during drag as well
-                    // as retrieval of the original domain object.
-                    dndService.setData(
-                        GestureConstants.MCT_EXTENDED_DRAG_TYPE,
-                        domainObject
-                    );
-                    dndService.setData(
-                        GestureConstants.MCT_DRAG_TYPE,
-                        domainObject.getId()
-                    );
-
-                } catch (err) {
-                    // Exceptions at this point indicate that the browser
-                    // do not fully support drag-and-drop (e.g. if
-                    // dataTransfer is undefined)
-                    $log.warn([
-                        "Could not initiate drag due to ",
-                        err.message
-                    ].join(""));
-                }
-
-            }
-
-            function endDrag() {
-                // Clear the drag data after the drag is complete
-                dndService.removeData(GestureConstants.MCT_DRAG_TYPE);
-                dndService.removeData(GestureConstants.MCT_EXTENDED_DRAG_TYPE);
-            }
-
-            // Mark the element as draggable, and handle the dragstart event
-            $log.debug("Attaching drag gesture");
-            element.attr('draggable', 'true');
-            element.on('dragstart', startDrag);
-            element.on('dragend', endDrag);
-
-            this.element = element;
-            this.startDragCallback = startDrag;
-            this.endDragCallback = endDrag;
-        }
-
-        DragGesture.prototype.destroy = function () {
-            // Detach listener
-            this.element.removeAttr('draggable');
-            this.element.off('dragstart', this.startDragCallback);
-            this.element.off('dragend', this.endDragCallback);
-        };
-
-        return DragGesture;
-    }
-);
diff --git a/platform/representation/src/gestures/DropGesture.js b/platform/representation/src/gestures/DropGesture.js
deleted file mode 100644
index 311ab3ec615..00000000000
--- a/platform/representation/src/gestures/DropGesture.js
+++ /dev/null
@@ -1,129 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining DropGesture. Created by vwoeltje on 11/17/14.
- */
-define(
-    ['./GestureConstants'],
-    function (GestureConstants) {
-
-        /**
-         * A DropGesture adds and maintains event handlers upon an element
-         * such that it may act as a drop target for drag-drop composition.
-         *
-         * @memberof platform/representation
-         * @constructor
-         * @param $q Angular's $q, for promise handling
-         * @param element the jqLite-wrapped representation element
-         * @param {DomainObject} domainObject the domain object whose
-         *        composition should be modified as a result of the drop.
-         */
-        function DropGesture(dndService, $q, element, domainObject) {
-            var actionCapability = domainObject.getCapability('action'),
-                action; // Action for the drop, when it occurs
-
-            function broadcastDrop(id, event) {
-                // Find the relevant scope...
-                var rect,
-                    scope = element.scope && element.scope();
-
-                if (scope && scope.$broadcast) {
-                    // Get the representation's bounds, to convert
-                    // drop position
-                    rect = element[0].getBoundingClientRect();
-
-                    // ...and broadcast the event. This allows specific
-                    // views to have post-drop behavior which depends on
-                    // drop position.
-                    scope.$broadcast(
-                        GestureConstants.MCT_DROP_EVENT,
-                        id,
-                        {
-                            x: event.pageX - rect.left,
-                            y: event.pageY - rect.top
-                        }
-                    );
-                }
-            }
-
-            function dragOver(e) {
-                var event = (e || {}).originalEvent || e,
-                    selectedObject = dndService.getData(
-                        GestureConstants.MCT_EXTENDED_DRAG_TYPE
-                    );
-
-                if (selectedObject) {
-                    // TODO: Vary this based on modifier keys
-                    action = actionCapability.getActions({
-                        key: 'compose',
-                        selectedObject: selectedObject
-                    })[0];
-                    if (action) {
-                        event.dataTransfer.dropEffect = 'move';
-
-                        // Indicate that we will accept the drag
-                        event.preventDefault(); // Required in Chrome?
-
-                        return false;
-                    }
-                }
-            }
-
-            function drop(e) {
-                var event = (e || {}).originalEvent || e,
-                    id = event.dataTransfer.getData(GestureConstants.MCT_DRAG_TYPE);
-
-                // Handle the drop; add the dropped identifier to the
-                // destination domain object's composition, and persist
-                // the change.
-                if (id) {
-                    e.preventDefault();
-                    $q.when(action && action.perform()).then(function () {
-                        broadcastDrop(id, event);
-                    });
-
-                }
-            }
-
-            // We can only handle drops if we have access to actions...
-            if (actionCapability) {
-                // Listen for dragover,  to indicate we'll accept a drag
-                element.on('dragover', dragOver);
-
-                // Listen for the drop itself
-                element.on('drop', drop);
-            }
-
-            this.element = element;
-            this.dragOverCallback = dragOver;
-            this.dropCallback = drop;
-        }
-
-        DropGesture.prototype.destroy = function () {
-            this.element.off('dragover', this.dragOverCallback);
-            this.element.off('drop', this.dropCallback);
-        };
-
-        return DropGesture;
-    }
-);
diff --git a/platform/representation/src/gestures/GestureConstants.js b/platform/representation/src/gestures/GestureConstants.js
deleted file mode 100644
index 1463126c7fe..00000000000
--- a/platform/representation/src/gestures/GestureConstants.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Constants used by domain object gestures.
- * @class platform/representation.GestureConstants
- */
-define({
-    /**
-     * The string identifier for the data type used for drag-and-drop
-     * composition of domain objects. (e.g. in event.dataTransfer.setData
-     * calls.)
-     * @memberof platform/representation.GestureConstants
-     */
-    MCT_DRAG_TYPE: 'mct-domain-object-id',
-    /**
-     * The string identifier for the data type used for drag-and-drop
-     * composition of domain objects, by object instance (passed through
-     * the dndService)
-     * @memberof platform/representation.GestureConstants
-     */
-    MCT_EXTENDED_DRAG_TYPE: 'mct-domain-object',
-    /**
-     * An estimate for the dimensions of a context menu, used for
-     * positioning.
-     * @memberof platform/representation.GestureConstants
-     */
-    MCT_MENU_DIMENSIONS: [170, 200],
-    /**
-     * Identifier for drop events.
-     * @memberof platform/representation.GestureConstants
-     */
-    MCT_DROP_EVENT: 'mctDrop'
-});
diff --git a/platform/representation/src/gestures/GestureProvider.js b/platform/representation/src/gestures/GestureProvider.js
deleted file mode 100644
index 284f34ecfe0..00000000000
--- a/platform/representation/src/gestures/GestureProvider.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining GestureProvider. Created by vwoeltje on 11/22/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * Handles the attachment of gestures (responses to DOM events,
-         * generally) to DOM elements which represent domain objects.
-         *
-         * @interface GestureService
-         */
-        /**
-         * Attach a set of gestures (indicated by key) to a
-         * DOM element which represents a specific domain object.
-         * @method GestureService#attachGestures
-         * @param element the jqLite-wrapped DOM element which the
-         *        user will interact with
-         * @param {DomainObject} domainObject the domain object which
-         *        is represented by that element
-         * @param {string[]} gestureKeys an array of keys identifying
-         *        which gestures should apply; these will be matched
-         *        against the keys defined in the gestures' extension
-         *        definitions
-         * @return {Destroyable} an object with a `destroy`
-         *         method which can (and should) be used when
-         *         gestures should no longer be applied to an element.
-         */
-
-        /**
-         * The GestureProvider exposes defined gestures. Gestures are used
-         * do describe and handle general-purpose interactions with the DOM
-         * that should be interpreted as interactions with domain objects,
-         * such as right-clicking to expose context menus.
-         *
-         * Gestures are defined individually as extensions of the
-         * `gestures` category. The gesture provider merely serves as an
-         * intermediary between these and the `mct-representation` directive
-         * where they are used.
-         *
-         * @memberof platform/representation
-         * @implements {GestureService}
-         * @constructor
-         * @param {Gesture[]} gestures an array of all gestures which are
-         *        available as extensions
-         */
-        function GestureProvider(gestures) {
-            var gestureMap = {};
-
-            // Assemble all gestures into a map, for easy look up
-            gestures.forEach(function (gesture) {
-                gestureMap[gesture.key] = gestureMap[gesture.key] || gesture;
-            });
-
-            this.gestureMap = gestureMap;
-        }
-
-        function releaseGesture(gesture) {
-            // Invoke the gesture's "destroy" method (if there is one)
-            // to release any held resources and detach event handlers.
-            if (gesture && gesture.destroy) {
-                gesture.destroy();
-            }
-        }
-
-        GestureProvider.prototype.attachGestures = function attachGestures(element, domainObject, gestureKeys) {
-            // Look up the desired gestures, filter for applicability,
-            // and instantiate them. Maintain a reference to allow them
-            // to be destroyed as a group later.
-            var gestureMap = this.gestureMap,
-                attachedGestures = gestureKeys.map(function (key) {
-                    return gestureMap[key];
-                }).filter(function (Gesture) {
-                    return Gesture !== undefined && (Gesture.appliesTo
-                        ? Gesture.appliesTo(domainObject)
-                        : true);
-                }).map(function (Gesture) {
-                    return new Gesture(element, domainObject);
-                });
-
-            return {
-                destroy: function () {
-                    // Just call all the individual "destroy" methods
-                    attachedGestures.forEach(releaseGesture);
-                }
-            };
-        };
-
-        /**
-         * A destroyable object may have resources allocated which require
-         * explicit release.
-         *
-         * @interface Destroyable
-         */
-        /**
-         * Release any resources associated with this object.
-         *
-         * @method Destroyable#destroy
-         */
-
-        /**
-         * A gesture describes manners in which certain representations of
-         * domain objects may respond to DOM events upon those representations.
-         * @interface Gesture
-         * @augments Destroyable
-         */
-
-        return GestureProvider;
-    }
-);
diff --git a/platform/representation/src/gestures/GestureRepresenter.js b/platform/representation/src/gestures/GestureRepresenter.js
deleted file mode 100644
index 8ed69638f89..00000000000
--- a/platform/representation/src/gestures/GestureRepresenter.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * The GestureRepresenter is responsible for installing predefined
-         * gestures upon mct-representation instances.
-         * Gestures themselves are pulled from the gesture service; this
-         * simply wraps that behavior in a Representer interface, such that
-         * it may be included among other such Representers used to prepare
-         * specific representations.
-         * @param {GestureService} gestureService the service which provides
-         *        gestures
-         * @param {Scope} scope the Angular scope for this representation
-         * @param element the JQLite-wrapped mct-representation element
-         * @constructor
-         * @implements {Representer}
-         * @memberof platform/representation
-         */
-        function GestureRepresenter(gestureService, scope, element) {
-            this.gestureService = gestureService;
-            this.element = element;
-        }
-
-        GestureRepresenter.prototype.represent = function represent(representation, domainObject) {
-            // Clear out any existing gestures
-            this.destroy();
-
-            // Attach gestures - by way of the service.
-            this.gestureHandle = this.gestureService.attachGestures(
-                this.element,
-                domainObject,
-                (representation || {}).gestures || []
-            );
-        };
-
-        GestureRepresenter.prototype.destroy = function () {
-            // Release any resources associated with these gestures
-            if (this.gestureHandle) {
-                this.gestureHandle.destroy();
-            }
-        };
-
-        return GestureRepresenter;
-    }
-);
diff --git a/platform/representation/src/services/DndService.js b/platform/representation/src/services/DndService.js
deleted file mode 100644
index de5d01f601b..00000000000
--- a/platform/representation/src/services/DndService.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Drag-and-drop service.
-         * Supplements HTML5 drag-and-drop support by:
-         * * Storing arbitrary JavaScript objects (not just strings.)
-         * * Allowing inspection of dragged objects during `dragover` events,
-         *   etc. (which cannot be done in Chrome for security reasons)
-         * @memberof platform/representation
-         * @constructor
-         * @param $log Angular's $log service
-         */
-        function DndService($log) {
-            var data = {};
-
-            return {
-                /**
-                 * Set drag data associated with a given type.
-                 * @param {string} key the type's identiifer
-                 * @param {*} value the data being dragged
-                 * @memberof platform/representation.DndService#
-                 */
-                setData: function (key, value) {
-                    $log.debug("Setting drag data for " + key);
-                    data[key] = value;
-                },
-                /**
-                 * Get drag data associated with a given type.
-                 * @returns {*} the data being dragged
-                 * @memberof platform/representation.DndService#
-                 */
-                getData: function (key) {
-                    return data[key];
-                },
-                /**
-                 * Remove data associated with active drags.
-                 * @param {string} key the type to remove
-                 * @memberof platform/representation.DndService#
-                 */
-                removeData: function (key) {
-                    $log.debug("Clearing drag data for " + key);
-                    delete data[key];
-                }
-            };
-        }
-
-        return DndService;
-    }
-);
diff --git a/platform/representation/test/MCTIncludeSpec.js b/platform/representation/test/MCTIncludeSpec.js
deleted file mode 100644
index bee7ca4d473..00000000000
--- a/platform/representation/test/MCTIncludeSpec.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * MCTIncudeSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../src/MCTInclude"],
-    function (MCTInclude) {
-
-        describe("The mct-include directive", function () {
-            var testTemplates,
-                testUrls,
-                mockLinker,
-                mockScope,
-                mockElement,
-                mockChangeTemplate,
-                mctInclude;
-
-            function fireWatch(expr, value) {
-                mockScope.$watch.calls.all().forEach(function (call) {
-                    if (call.args[0] === expr) {
-                        call.args[1](value);
-                    }
-                });
-            }
-
-            beforeEach(function () {
-                testTemplates = [
-                    {
-                        key: "abc",
-                        bundle: {
-                            path: "a",
-                            resources: "b"
-                        },
-                        templateUrl: "c/template.html"
-                    },
-                    {
-                        key: "xyz",
-                        bundle: {
-                            path: "x",
-                            resources: "y"
-                        },
-                        templateUrl: "z/template.html"
-                    }
-                ];
-                testUrls = {};
-                testTemplates.forEach(function (t, i) {
-                    testUrls[t.key] = "some URL " + String(i);
-                });
-                mockLinker = jasmine.createSpyObj(
-                    'templateLinker',
-                    ['link', 'getPath']
-                );
-                mockScope = jasmine.createSpyObj('$scope', ['$watch', '$on']);
-                mockElement = jasmine.createSpyObj('element', ['empty']);
-                mockChangeTemplate = jasmine.createSpy('changeTemplate');
-                mockLinker.link.and.returnValue(mockChangeTemplate);
-                mockLinker.getPath.and.callFake(function (template) {
-                    return testUrls[template.key];
-                });
-                mctInclude = new MCTInclude(testTemplates, mockLinker);
-                mctInclude.link(mockScope, mockElement, {});
-            });
-
-            it("is restricted to elements", function () {
-                expect(mctInclude.restrict).toEqual("E");
-            });
-
-            it("exposes templates via the templateLinker", function () {
-                expect(mockLinker.link)
-                    .toHaveBeenCalledWith(mockScope, mockElement, undefined);
-            });
-
-            it("reads a template location from a scope's key variable", function () {
-                mockScope.key = 'abc';
-                fireWatch('key', mockScope.key);
-                expect(mockChangeTemplate)
-                    .toHaveBeenCalledWith(testTemplates[0]);
-
-                mockScope.key = 'xyz';
-                fireWatch('key', mockScope.key);
-                expect(mockChangeTemplate)
-                    .toHaveBeenCalledWith(testTemplates[1]);
-            });
-
-        });
-    }
-);
diff --git a/platform/representation/test/MCTRepresentationSpec.js b/platform/representation/test/MCTRepresentationSpec.js
deleted file mode 100644
index 195a5113373..00000000000
--- a/platform/representation/test/MCTRepresentationSpec.js
+++ /dev/null
@@ -1,343 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * MCTRepresentationSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../src/MCTRepresentation"],
-    function (MCTRepresentation) {
-
-        var JQLITE_FUNCTIONS = ["on", "off", "attr", "removeAttr"],
-            LOG_FUNCTIONS = ["error", "warn", "info", "debug"],
-            DOMAIN_OBJECT_METHODS = ["getId", "getModel", "getCapability", "hasCapability", "useCapability"];
-
-        describe("The mct-representation directive", function () {
-            var testRepresentations,
-                testViews,
-                testUrls,
-                mockRepresenters,
-                mockMutationCapability,
-                mockQ,
-                mockLinker,
-                mockLog,
-                mockChangeTemplate,
-                mockScope,
-                mockElement,
-                mockDomainObject,
-                testModel,
-                mctRepresentation;
-
-            function mockPromise(value) {
-                return (value && value.then) ? value : {
-                    then: function (callback) {
-                        return mockPromise(callback(value));
-                    }
-                };
-            }
-
-            function fireWatch(expr, value) {
-                mockScope.$watch.calls.all().forEach(function (call) {
-                    if (call.args[0] === expr) {
-                        call.args[1](value);
-                    }
-                });
-            }
-
-            beforeEach(function () {
-                testUrls = {};
-
-                testRepresentations = [
-                    {
-                        key: "abc",
-                        bundle: {
-                            path: "a",
-                            resources: "b"
-                        },
-                        templateUrl: "c/template.html"
-                    },
-                    {
-                        key: "def",
-                        bundle: {
-                            path: "d",
-                            resources: "e"
-                        },
-                        templateUrl: "f/template.html",
-                        uses: ["testCapability", "otherTestCapability"]
-                    }
-                ];
-
-                testViews = [
-                    {
-                        key: "uvw",
-                        bundle: {
-                            path: "u",
-                            resources: "v"
-                        },
-                        templateUrl: "w/template.html",
-                        gestures: ["testGesture", "otherTestGesture"]
-                    },
-                    {
-                        key: "xyz",
-                        bundle: {
-                            path: "x",
-                            resources: "y"
-                        },
-                        templateUrl: "z/template.html"
-                    }
-                ];
-
-                testModel = { someKey: "some value" };
-
-                testUrls = {};
-                testViews.concat(testRepresentations).forEach(function (t, i) {
-                    testUrls[t.key] = "some URL " + String(i);
-                });
-
-                mockRepresenters = ["A", "B"].map(function (name) {
-                    var constructor = jasmine.createSpy("Representer" + name),
-                        representer = jasmine.createSpyObj(
-                            "representer" + name,
-                            ["represent", "destroy"]
-                        );
-                    constructor.and.returnValue(representer);
-
-                    return constructor;
-                });
-
-                mockQ = { when: mockPromise };
-                mockLinker = jasmine.createSpyObj(
-                    'templateLinker',
-                    ['link', 'getPath']
-                );
-                mockChangeTemplate = jasmine.createSpy('changeTemplate');
-                mockLog = jasmine.createSpyObj("$log", LOG_FUNCTIONS);
-
-                mockMutationCapability =
-                    jasmine.createSpyObj("mutation", ["listen"]);
-
-                mockScope = jasmine.createSpyObj("scope", ["$watch", "$on"]);
-                mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
-                mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
-
-                mockDomainObject.getModel.and.returnValue(testModel);
-                mockLinker.link.and.returnValue(mockChangeTemplate);
-                mockLinker.getPath.and.callFake(function (ext) {
-                    return testUrls[ext.key];
-                });
-
-                mockDomainObject.getCapability.and.callFake(function (c) {
-                    return c === 'mutation' && mockMutationCapability;
-                });
-
-                mctRepresentation = new MCTRepresentation(
-                    testRepresentations,
-                    testViews,
-                    mockRepresenters,
-                    mockQ,
-                    mockLinker,
-                    mockLog
-                );
-                mctRepresentation.link(mockScope, mockElement);
-            });
-
-            it("is restricted to elements", function () {
-                expect(mctRepresentation.restrict).toEqual("E");
-            });
-
-            it("exposes templates via the templateLinker", function () {
-                expect(mockLinker.link)
-                    .toHaveBeenCalledWith(mockScope, mockElement);
-            });
-
-            it("watches scope when linked", function () {
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "key",
-                    jasmine.any(Function)
-                );
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "domainObject",
-                    jasmine.any(Function)
-                );
-            });
-
-            it("recognizes keys for representations", function () {
-                mockScope.key = "abc";
-                mockScope.domainObject = mockDomainObject;
-
-                // Trigger the watch
-                fireWatch('key', mockScope.key);
-                fireWatch('domainObject', mockDomainObject);
-
-                expect(mockChangeTemplate)
-                    .toHaveBeenCalledWith(testRepresentations[0]);
-            });
-
-            it("recognizes keys for views", function () {
-                mockScope.key = "xyz";
-                mockScope.domainObject = mockDomainObject;
-
-                // Trigger the watches
-                fireWatch('key', mockScope.key);
-                fireWatch('domainObject', mockDomainObject);
-
-                expect(mockChangeTemplate)
-                    .toHaveBeenCalledWith(testViews[1]);
-            });
-
-            it("does not load templates until there is an object", function () {
-                mockScope.key = "xyz";
-
-                // Trigger the watch
-                fireWatch('key', mockScope.key);
-
-                expect(mockChangeTemplate)
-                    .not.toHaveBeenCalledWith(jasmine.any(Object));
-
-                mockScope.domainObject = mockDomainObject;
-                fireWatch('domainObject', mockDomainObject);
-
-                expect(mockChangeTemplate)
-                    .toHaveBeenCalledWith(jasmine.any(Object));
-            });
-
-            it("loads declared capabilities", function () {
-                mockScope.key = "def";
-                mockScope.domainObject = mockDomainObject;
-
-                // Trigger the watch
-                mockScope.$watch.calls.all()[0].args[1]();
-
-                expect(mockDomainObject.useCapability)
-                    .toHaveBeenCalledWith("testCapability");
-                expect(mockDomainObject.useCapability)
-                    .toHaveBeenCalledWith("otherTestCapability");
-            });
-
-            it("logs when no representation is available for a key", function () {
-                mockScope.key = "someUnknownThing";
-
-                // Verify precondition
-                expect(mockLog.warn).not.toHaveBeenCalled();
-
-                // Trigger the watch
-                mockScope.$watch.calls.all()[0].args[1]();
-
-                // Should have gotten a warning - that's an unknown key
-                expect(mockLog.warn).toHaveBeenCalled();
-            });
-
-            it("clears out obsolete properties from scope", function () {
-                mockScope.key = "def";
-                mockScope.domainObject = mockDomainObject;
-                mockDomainObject.useCapability.and.returnValue("some value");
-
-                // Trigger the watch
-                mockScope.$watch.calls.all()[0].args[1]();
-                expect(mockScope.testCapability).toBeDefined();
-
-                // Change the view
-                mockScope.key = "xyz";
-
-                // Trigger the watch again; should clear capability from scope
-                mockScope.$watch.calls.all()[0].args[1]();
-                expect(mockScope.testCapability).toBeUndefined();
-            });
-
-            describe("when a domain object has been observed", function () {
-                var mockContext,
-                    mockContext2,
-                    mockLink,
-                    mockParent;
-
-                beforeEach(function () {
-                    mockContext = jasmine.createSpyObj('context', ['getPath']);
-                    mockContext2 = jasmine.createSpyObj('context', ['getPath']);
-                    mockLink = jasmine.createSpyObj(
-                        'linkedObject',
-                        DOMAIN_OBJECT_METHODS
-                    );
-                    mockParent = jasmine.createSpyObj(
-                        'parentObject',
-                        DOMAIN_OBJECT_METHODS
-                    );
-
-                    mockDomainObject.getCapability.and.callFake(function (c) {
-                        return {
-                            context: mockContext,
-                            mutation: mockMutationCapability
-                        }[c];
-                    });
-                    mockLink.getCapability.and.callFake(function (c) {
-                        return {
-                            context: mockContext2,
-                            mutation: mockMutationCapability
-                        }[c];
-                    });
-                    mockDomainObject.hasCapability.and.callFake(function (c) {
-                        return c === 'context';
-                    });
-                    mockLink.hasCapability.and.callFake(function (c) {
-                        return c === 'context';
-                    });
-                    mockLink.getModel.and.returnValue({});
-
-                    mockContext.getPath.and.returnValue([mockDomainObject]);
-                    mockContext2.getPath.and.returnValue([mockParent, mockLink]);
-
-                    mockLink.getId.and.returnValue('test-id');
-                    mockDomainObject.getId.and.returnValue('test-id');
-
-                    mockParent.getId.and.returnValue('parent-id');
-
-                    mockScope.key = "abc";
-                    mockScope.domainObject = mockDomainObject;
-
-                    mockScope.$watch.calls.all()[0].args[1]();
-                });
-
-                it("listens for mutation of that object", function () {
-                    expect(mockMutationCapability.listen)
-                        .toHaveBeenCalledWith(jasmine.any(Function));
-                });
-
-                it("detects subsequent changes among linked instances", function () {
-                    var callCount = mockChangeTemplate.calls.count();
-
-                    mockScope.domainObject = mockLink;
-                    mockScope.$watch.calls.all()[0].args[1]();
-
-                    expect(mockChangeTemplate.calls.count())
-                        .toEqual(callCount + 1);
-                });
-
-                it("does not trigger excess template changes for same instances", function () {
-                    var callCount = mockChangeTemplate.calls.count();
-                    mockScope.$watch.calls.all()[0].args[1]();
-                    expect(mockChangeTemplate.calls.count()).toEqual(callCount);
-                });
-
-            });
-
-        });
-    }
-);
diff --git a/platform/representation/test/TemplateLinkerSpec.js b/platform/representation/test/TemplateLinkerSpec.js
deleted file mode 100644
index aabe33d2647..00000000000
--- a/platform/representation/test/TemplateLinkerSpec.js
+++ /dev/null
@@ -1,239 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/TemplateLinker"],
-    function (TemplateLinker) {
-
-        var JQLITE_METHODS = ['replaceWith', 'empty', 'html', 'contents'],
-            SCOPE_METHODS = ['$on', '$new', '$destroy'];
-
-        describe("TemplateLinker", function () {
-            var mockTemplateRequest,
-                mockSce,
-                mockCompile,
-                mockLog,
-                mockScope,
-                mockElement,
-                mockTemplates,
-                mockElements,
-                mockContents,
-                mockNewScope,
-                mockPromise,
-                linker;
-
-            function testExtension(path, res, templatePath) {
-                return {
-                    bundle: {
-                        path: path,
-                        resources: res
-                    },
-                    templateUrl: templatePath
-                };
-            }
-
-            beforeEach(function () {
-                mockTemplateRequest = jasmine.createSpy('$templateRequest');
-                mockSce = jasmine.createSpyObj('$sce', ['trustAsResourceUrl']);
-                mockCompile = jasmine.createSpy('$compile');
-                mockLog = jasmine.createSpyObj('$log', ['error', 'warn']);
-                mockScope = jasmine.createSpyObj('$scope', SCOPE_METHODS);
-                mockNewScope = jasmine.createSpyObj('$scope', SCOPE_METHODS);
-                mockElement = jasmine.createSpyObj('element', JQLITE_METHODS);
-                mockPromise = jasmine.createSpyObj('promise', ['then']);
-                mockTemplates = {};
-                mockElements = {};
-                mockContents = {};
-
-                mockTemplateRequest.and.returnValue(mockPromise);
-                mockCompile.and.callFake(function (toCompile) {
-                    var html = typeof toCompile === 'string'
-                        ? toCompile : toCompile.testHtml;
-                    mockTemplates[html] = jasmine.createSpy('template');
-                    mockElements[html] =
-                        jasmine.createSpyObj('templateEl', JQLITE_METHODS);
-                    mockTemplates[html].and.returnValue(mockElements[html]);
-
-                    return mockTemplates[html];
-                });
-                mockSce.trustAsResourceUrl.and.callFake(function (url) {
-                    return { trusted: url };
-                });
-                mockScope.$new.and.returnValue(mockNewScope);
-                mockElement.html.and.callFake(function (html) {
-                    mockContents[html] =
-                        jasmine.createSpyObj('contentsEl', JQLITE_METHODS);
-                    mockContents[html].testHtml = html;
-                });
-                mockElement.contents.and.callFake(function () {
-                    return mockContents[
-                        mockElement.html.calls.mostRecent().args[0]
-                    ];
-                });
-
-                linker = new TemplateLinker(
-                    mockTemplateRequest,
-                    mockSce,
-                    mockCompile,
-                    mockLog
-                );
-            });
-
-            it("resolves extension paths", function () {
-                var testExt = testExtension('a', 'b', 'c/d.html');
-                expect(linker.getPath(testExt)).toEqual('a/b/c/d.html');
-            });
-
-            describe("when linking elements", function () {
-                var changeTemplate,
-                    commentElement;
-
-                function findCommentElement() {
-                    mockCompile.calls.all().forEach(function (call) {
-                        var html = call.args[0];
-                        if (html.indexOf("<!--") > -1) {
-                            commentElement = mockElements[html];
-                        }
-                    });
-                }
-
-                beforeEach(function () {
-                    changeTemplate = linker.link(mockScope, mockElement);
-                    findCommentElement();
-                });
-
-                it("compiles a comment to use to replace element", function () {
-                    expect(commentElement).toBeDefined();
-                });
-
-                it("initially replaces elements with comments", function () {
-                    expect(mockElement.replaceWith)
-                        .toHaveBeenCalledWith(commentElement);
-                });
-
-                it("provides a function to change templates", function () {
-                    expect(changeTemplate).toEqual(jasmine.any(Function));
-                });
-
-                describe("and then changing templates", function () {
-                    var testExt,
-                        testUrl,
-                        testTemplate;
-
-                    beforeEach(function () {
-                        testExt = testExtension('some', 'url', 'template.html');
-                        testUrl = linker.getPath(testExt);
-                        testTemplate = "<div>Some template!</div>";
-                        changeTemplate(testExt);
-                        mockPromise.then.calls.mostRecent()
-                            .args[0](testTemplate);
-                    });
-
-                    it("loads templates using $templateRequest", function () {
-                        expect(mockTemplateRequest).toHaveBeenCalledWith({
-                            trusted: testUrl
-                        }, false);
-                    });
-
-                    it("compiles element contents with a new scope", function () {
-                        expect(mockCompile)
-                            .toHaveBeenCalledWith(mockContents[testTemplate]);
-                        expect(mockTemplates[testTemplate])
-                            .toHaveBeenCalledWith(mockNewScope);
-                    });
-
-                    it("replaces comments with specified element", function () {
-                        expect(commentElement.replaceWith)
-                            .toHaveBeenCalledWith(mockElement);
-                    });
-
-                    it("inserts HTML content into the specified element", function () {
-                        expect(mockElement.html)
-                            .toHaveBeenCalledWith(testTemplate);
-                    });
-
-                    it("clears templates when called with undefined", function () {
-                        expect(mockElement.replaceWith.calls.count())
-                            .toEqual(1);
-                        changeTemplate(undefined);
-                        expect(mockElement.replaceWith.calls.count())
-                            .toEqual(2);
-                        expect(mockElement.replaceWith.calls.mostRecent().args[0])
-                            .toEqual(commentElement);
-                    });
-
-                    it("logs no warnings for nominal changes", function () {
-                        expect(mockLog.warn).not.toHaveBeenCalled();
-                    });
-
-                    describe("which cannot be found", function () {
-                        beforeEach(function () {
-                            changeTemplate(
-                                testExtension("some", "bad", "template.html")
-                            );
-                            // Reject the template promise
-                            mockPromise.then.calls.mostRecent().args[1]();
-                        });
-
-                        it("removes the element from the DOM", function () {
-                            expect(mockElement.replaceWith.calls.count())
-                                .toEqual(2);
-                            expect(
-                                mockElement.replaceWith.calls.mostRecent().args[0]
-                            ).toEqual(commentElement);
-                        });
-
-                        it("logs a warning", function () {
-                            expect(mockLog.warn)
-                                .toHaveBeenCalledWith(jasmine.any(String));
-                        });
-
-                    });
-                });
-
-            });
-
-            describe("when an initial template URL is provided", function () {
-                var testExt,
-                    testUrl;
-
-                beforeEach(function () {
-                    testExt = testExtension('some', 'test', 'template.html');
-                    testUrl = linker.getPath(testExt);
-                    linker.link(mockScope, mockElement, testExt);
-                });
-
-                it("does not remove the element initially", function () {
-                    expect(mockElement.replaceWith)
-                        .not.toHaveBeenCalled();
-                });
-
-                it("loads the specified template", function () {
-                    expect(mockTemplateRequest).toHaveBeenCalledWith({
-                        trusted: testUrl
-                    }, false);
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/representation/test/TemplatePrefetcherSpec.js b/platform/representation/test/TemplatePrefetcherSpec.js
deleted file mode 100644
index a23373c299e..00000000000
--- a/platform/representation/test/TemplatePrefetcherSpec.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/TemplatePrefetcher"],
-    function (TemplatePrefetcher) {
-
-        describe("TemplatePrefetcher", function () {
-            var mockTemplateLinker,
-                testExtensions,
-                testPathPrefix,
-                prefetcher; // eslint-disable-line
-
-            beforeEach(function () {
-                testPathPrefix = "some/path/";
-
-                mockTemplateLinker = jasmine.createSpyObj(
-                    'templateLinker',
-                    ['getPath', 'load']
-                );
-
-                mockTemplateLinker.getPath.and.callFake(function (ext) {
-                    return testPathPrefix + ext.templateUrl;
-                });
-
-                testExtensions = ['a', 'b', 'c'].map(function (category) {
-                    return ['x', 'y', 'z'].map(function (ext) {
-                        return {
-                            templateUrl: category + '/' + ext + '.html'
-                        };
-                    });
-                });
-
-                prefetcher = new TemplatePrefetcher(
-                    mockTemplateLinker,
-                    testExtensions[0],
-                    testExtensions[1],
-                    testExtensions[2]
-                );
-            });
-
-            it("loads all templates when run", function () {
-                testExtensions.forEach(function (category) {
-                    category.forEach(function (extension) {
-                        expect(mockTemplateLinker.load).toHaveBeenCalledWith(
-                            mockTemplateLinker.getPath(extension)
-                        );
-                    });
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/representation/test/gestures/DragGestureSpec.js b/platform/representation/test/gestures/DragGestureSpec.js
deleted file mode 100644
index 125dab74132..00000000000
--- a/platform/representation/test/gestures/DragGestureSpec.js
+++ /dev/null
@@ -1,136 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * DragGestureSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/gestures/DragGesture", "../../src/gestures/GestureConstants"],
-    function (DragGesture, GestureConstants) {
-
-        var JQLITE_FUNCTIONS = ["on", "off", "attr", "removeAttr"],
-            LOG_FUNCTIONS = ["error", "warn", "info", "debug"],
-            DND_FUNCTIONS = ["setData", "getData", "removeData"],
-            DOMAIN_OBJECT_METHODS = ["getId", "getModel", "getCapability", "hasCapability", "useCapability"],
-            TEST_ID = "test-id";
-
-        describe("The drag gesture", function () {
-            var mockLog,
-                mockDndService,
-                mockElement,
-                mockDomainObject,
-                mockDataTransfer,
-                handlers,
-                gesture;
-
-            beforeEach(function () {
-                mockLog = jasmine.createSpyObj("$log", LOG_FUNCTIONS);
-                mockDndService = jasmine.createSpyObj("dndService", DND_FUNCTIONS);
-                mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
-                mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
-                mockDataTransfer = jasmine.createSpyObj("dataTransfer", ["setData"]);
-
-                mockDomainObject.getId.and.returnValue(TEST_ID);
-                mockDomainObject.getModel.and.returnValue({});
-
-                handlers = {};
-
-                gesture = new DragGesture(mockLog, mockDndService, mockElement, mockDomainObject);
-
-                // Look up all handlers registered by the gesture
-                mockElement.on.calls.all().forEach(function (call) {
-                    handlers[call.args[0]] = call.args[1];
-                });
-            });
-
-            it("listens for dragstart on the element", function () {
-                expect(handlers.dragstart).toEqual(jasmine.any(Function));
-            });
-
-            it("marks an element as draggable", function () {
-                expect(mockElement.attr).toHaveBeenCalledWith("draggable", "true");
-            });
-
-            it("places data in a dataTransfer object", function () {
-                handlers.dragstart({ dataTransfer: mockDataTransfer });
-                expect(mockDataTransfer.setData).toHaveBeenCalledWith(
-                    GestureConstants.MCT_DRAG_TYPE,
-                    TEST_ID
-                );
-            });
-
-            it("places domain object in the dnd service", function () {
-                handlers.dragstart({ dataTransfer: mockDataTransfer });
-                expect(mockDndService.setData).toHaveBeenCalledWith(
-                    GestureConstants.MCT_DRAG_TYPE,
-                    TEST_ID
-                );
-                expect(mockDndService.setData).toHaveBeenCalledWith(
-                    GestureConstants.MCT_EXTENDED_DRAG_TYPE,
-                    mockDomainObject
-                );
-            });
-
-            it("clears domain object from the dnd service on drag end", function () {
-                // Start dragging
-                handlers.dragstart({ dataTransfer: mockDataTransfer });
-
-                // Verify precondition
-                expect(mockDndService.removeData).not.toHaveBeenCalled();
-
-                // End the drag
-                handlers.dragend({ dataTransfer: mockDataTransfer });
-
-                // Should have removed the data that was attached
-                expect(mockDndService.removeData)
-                    .toHaveBeenCalledWith(GestureConstants.MCT_DRAG_TYPE);
-                expect(mockDndService.removeData)
-                    .toHaveBeenCalledWith(GestureConstants.MCT_EXTENDED_DRAG_TYPE);
-            });
-
-            it("logs a warning if dataTransfer cannot be set", function () {
-                // Verify precondition
-                expect(mockLog.warn).not.toHaveBeenCalled();
-
-                // Fire the gesture without a dataTransfer field
-                handlers.dragstart({});
-
-                // Should have logged a warning
-                expect(mockLog.warn).toHaveBeenCalled();
-            });
-
-            it("removes draggable attribute and listener when destroyed", function () {
-                // Verify preconditions
-                expect(mockElement.removeAttr).not.toHaveBeenCalled();
-                expect(mockElement.off).not.toHaveBeenCalled();
-
-                // Notify the gesture that its scope is being destroyed
-                gesture.destroy();
-
-                // Verify that attribute/listener were removed
-                expect(mockElement.removeAttr).toHaveBeenCalledWith("draggable");
-                expect(mockElement.off).toHaveBeenCalledWith("dragstart", handlers.dragstart);
-            });
-
-        });
-    }
-);
diff --git a/platform/representation/test/gestures/DropGestureSpec.js b/platform/representation/test/gestures/DropGestureSpec.js
deleted file mode 100644
index f4268aef0dd..00000000000
--- a/platform/representation/test/gestures/DropGestureSpec.js
+++ /dev/null
@@ -1,186 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * DropGestureSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/gestures/DropGesture"],
-    function (DropGesture) {
-
-        // Methods to mock
-        var JQLITE_FUNCTIONS = ["on", "off", "attr", "removeAttr", "scope"],
-            DOMAIN_OBJECT_METHODS = ["getId", "getModel", "getCapability", "hasCapability", "useCapability"],
-            TEST_ID = "test-id",
-            DROP_ID = "drop-id";
-
-        describe("The drop gesture", function () {
-            var mockDndService,
-                mockQ,
-                mockElement,
-                mockDomainObject,
-                mockPersistence,
-                mockAction,
-                mockEvent,
-                mockScope,
-                mockUnwrappedElement,
-                mockDraggedObject,
-                mockCompose,
-                testModel,
-                testRect,
-                gesture,
-                callbacks;
-
-            function mockPromise(value) {
-                return (value && value.then) ? value : {
-                    then: function (callback) {
-                        return mockPromise(callback(value));
-                    }
-                };
-            }
-
-            beforeEach(function () {
-                testModel = { composition: [] };
-                testRect = {};
-
-                mockDndService = jasmine.createSpyObj('dndService', ['getData']);
-                mockQ = { when: mockPromise };
-                mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
-                mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
-                mockDraggedObject = jasmine.createSpyObj("draggedObject", DOMAIN_OBJECT_METHODS);
-                mockPersistence = jasmine.createSpyObj("persistence", ["persist"]);
-                mockEvent = jasmine.createSpyObj("event", ["preventDefault"]);
-                mockEvent.dataTransfer = jasmine.createSpyObj("dataTransfer", ["getData"]);
-                mockScope = jasmine.createSpyObj("$scope", ["$broadcast"]);
-                mockUnwrappedElement = jasmine.createSpyObj("unwrapped", ["getBoundingClientRect"]);
-                mockAction = jasmine.createSpyObj('action', ['getActions']);
-                mockCompose = jasmine.createSpyObj('compose', ['perform']);
-
-                mockDomainObject.getId.and.returnValue(TEST_ID);
-                mockDomainObject.getModel.and.returnValue(testModel);
-                mockDomainObject.getCapability.and.callFake(function (c) {
-                    return {
-                        persistence: mockPersistence,
-                        action: mockAction
-                    }[c];
-                });
-                mockDomainObject.useCapability.and.returnValue(true);
-                mockEvent.dataTransfer.getData.and.returnValue(DROP_ID);
-                mockElement[0] = mockUnwrappedElement;
-                mockElement.scope.and.returnValue(mockScope);
-                mockUnwrappedElement.getBoundingClientRect.and.returnValue(testRect);
-                mockDndService.getData.and.returnValue(mockDraggedObject);
-                mockAction.getActions.and.returnValue([mockCompose]);
-
-                gesture = new DropGesture(
-                    mockDndService,
-                    mockQ,
-                    mockElement,
-                    mockDomainObject
-                );
-
-                // Get a reference to all callbacks registered during constructor
-                callbacks = {};
-                mockElement.on.calls.all().forEach(function (call) {
-                    callbacks[call.args[0]] = call.args[1];
-                });
-            });
-
-            it("attaches dragover and drop listeners", function () {
-                expect(callbacks.dragover).toBeDefined();
-                expect(callbacks.drop).toBeDefined();
-            });
-
-            it("removes all listeners when destroyed", function () {
-                // Verify precondition
-                expect(mockElement.off).not.toHaveBeenCalled();
-
-                // Destroy
-                gesture.destroy();
-
-                // Verify all callbacks were unregistered
-                Object.keys(callbacks).forEach(function (k) {
-                    expect(mockElement.off).toHaveBeenCalledWith(k, callbacks[k]);
-                });
-            });
-
-            it("accepts data transfer and prevents default behavior on dragover", function () {
-                expect(callbacks.dragover(mockEvent)).toEqual(false);
-                expect(mockEvent.preventDefault).toHaveBeenCalled();
-                expect(mockEvent.dataTransfer.dropEffect).toBeDefined();
-            });
-
-            it("invokes compose on drop in edit mode", function () {
-                // Set the mockDomainObject to have the editor capability
-                mockDomainObject.hasCapability.and.returnValue(true);
-
-                callbacks.dragover(mockEvent);
-                expect(mockAction.getActions).toHaveBeenCalledWith({
-                    key: 'compose',
-                    selectedObject: mockDraggedObject
-                });
-                callbacks.drop(mockEvent);
-                expect(mockCompose.perform).toHaveBeenCalled();
-            });
-
-            it("invokes compose on drop in browse mode for folders", function () {
-                // Set the mockDomainObject to not have the editor capability
-                mockDomainObject.hasCapability.and.returnValue(false);
-                // Set the mockDomainObject to have a type of folder
-                mockDomainObject.getModel.and.returnValue({type: 'folder'});
-
-                callbacks.dragover(mockEvent);
-                expect(mockAction.getActions).toHaveBeenCalledWith({
-                    key: 'compose',
-                    selectedObject: mockDraggedObject
-                });
-                callbacks.drop(mockEvent);
-                expect(mockCompose.perform).toHaveBeenCalled();
-            });
-
-            it("broadcasts drop position (in edit mode)", function () {
-                // Set the mockDomainObject to have the editor capability
-                mockDomainObject.hasCapability.and.returnValue(true);
-
-                testRect.left = 42;
-                testRect.top = 36;
-                mockEvent.pageX = 52;
-                mockEvent.pageY = 64;
-                callbacks.drop(mockEvent);
-                expect(mockScope.$broadcast).toHaveBeenCalledWith(
-                    'mctDrop',
-                    DROP_ID,
-                    {
-                        x: 10,
-                        y: 28
-                    }
-                );
-            });
-
-            it("invokes preventDefault on drop", function () {
-                callbacks.drop(mockEvent);
-                expect(mockEvent.preventDefault).toHaveBeenCalled();
-            });
-
-        });
-    }
-);
diff --git a/platform/representation/test/gestures/GestureProviderSpec.js b/platform/representation/test/gestures/GestureProviderSpec.js
deleted file mode 100644
index 9dacf412b39..00000000000
--- a/platform/representation/test/gestures/GestureProviderSpec.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * GestureProviderSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/gestures/GestureProvider"],
-    function (GestureProvider) {
-
-        var JQLITE_FUNCTIONS = ["on", "off", "attr", "removeAttr"],
-            GESTURE_KEYS = ["a", "b", "c", "d", "e"],
-            DOMAIN_OBJECT_METHODS = ["getId", "getModel", "getCapability", "hasCapability", "useCapability"];
-
-        describe("The gesture provider", function () {
-            var mockGestures,
-                mockDestroys,
-                mockElement,
-                mockDomainObject,
-                provider;
-
-            beforeEach(function () {
-                mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
-                mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
-
-                mockDestroys = {};
-                mockGestures = {};
-                GESTURE_KEYS.forEach(function (key) {
-                    mockDestroys[key] = jasmine.createSpy("destroy-" + key);
-                    mockGestures[key] = jasmine.createSpy("gesture-" + key);
-                    mockGestures[key].and.returnValue({ destroy: mockDestroys[key] });
-                    mockGestures[key].key = key;
-                });
-
-                provider = new GestureProvider(GESTURE_KEYS.map(function (key) {
-                    return mockGestures[key];
-                }));
-            });
-
-            it("attaches matching to an element", function () {
-                provider.attachGestures(mockElement, mockDomainObject, ["a", "c", "e"]);
-
-                expect(mockGestures.a).toHaveBeenCalledWith(mockElement, mockDomainObject);
-                expect(mockGestures.c).toHaveBeenCalledWith(mockElement, mockDomainObject);
-                expect(mockGestures.e).toHaveBeenCalledWith(mockElement, mockDomainObject);
-                expect(mockGestures.b).not.toHaveBeenCalled();
-                expect(mockGestures.d).not.toHaveBeenCalled();
-
-                // No destroys should have been called - let's check
-                GESTURE_KEYS.forEach(function (key) {
-                    expect(mockDestroys[key]).not.toHaveBeenCalled();
-                });
-            });
-
-            it("detaches gestures on request", function () {
-                provider.attachGestures(
-                    mockElement,
-                    mockDomainObject,
-                    ["b", "d", "e"]
-                ).destroy();
-
-                expect(mockDestroys.b).toHaveBeenCalled();
-                expect(mockDestroys.d).toHaveBeenCalled();
-                expect(mockDestroys.e).toHaveBeenCalled();
-                expect(mockDestroys.a).not.toHaveBeenCalled();
-                expect(mockDestroys.c).not.toHaveBeenCalled();
-            });
-        });
-    }
-);
diff --git a/platform/representation/test/gestures/GestureRepresenterSpec.js b/platform/representation/test/gestures/GestureRepresenterSpec.js
deleted file mode 100644
index 242ae75960a..00000000000
--- a/platform/representation/test/gestures/GestureRepresenterSpec.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/gestures/GestureRepresenter"],
-    function (GestureRepresenter) {
-
-        describe("A gesture representer", function () {
-            var mockGestureService,
-                mockGestureHandle,
-                mockElement,
-                representer;
-
-            beforeEach(function () {
-                mockGestureService = jasmine.createSpyObj(
-                    "gestureService",
-                    ["attachGestures"]
-                );
-                mockGestureHandle = jasmine.createSpyObj(
-                    "gestureHandle",
-                    ["destroy"]
-                );
-
-                mockElement = { someKey: "some value" };
-
-                mockGestureService.attachGestures.and.returnValue(mockGestureHandle);
-
-                representer = new GestureRepresenter(
-                    mockGestureService,
-                    undefined, // Scope is not used
-                    mockElement
-                );
-            });
-
-            it("attaches declared gestures, and detaches on request", function () {
-                // Pass in some objects, which we expect to be passed into the
-                // gesture service accordingly.
-                var domainObject = { someOtherKey: "some other value" },
-                    representation = { gestures: ["a", "b", "c"] };
-
-                representer.represent(representation, domainObject);
-
-                expect(mockGestureService.attachGestures).toHaveBeenCalledWith(
-                    mockElement,
-                    domainObject,
-                    ["a", "b", "c"]
-                );
-
-                // Should not have been destroyed yet...
-                expect(mockGestureHandle.destroy).not.toHaveBeenCalled();
-
-                // Destroy
-                representer.destroy();
-
-                // Should have destroyed those old gestures
-                expect(mockGestureHandle.destroy).toHaveBeenCalled();
-            });
-
-        });
-    }
-);
diff --git a/platform/representation/test/services/DndServiceSpec.js b/platform/representation/test/services/DndServiceSpec.js
deleted file mode 100644
index 405c0b28eb5..00000000000
--- a/platform/representation/test/services/DndServiceSpec.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../../src/services/DndService"],
-    function (DndService) {
-
-        describe("The drag-and-drop service", function () {
-            var service;
-
-            beforeEach(function () {
-                var mockLog = jasmine.createSpyObj("$log", ['debug']);
-                service = new DndService(mockLog);
-            });
-
-            it("allows setting of arbitrary objects", function () {
-                var foo = {
-                    bar: function () {
-                        return 42;
-                    }
-                };
-
-                service.setData('xyz', foo);
-
-                // Test that we can get back callable data, since this is
-                // a key reason for having a service separate from HTML5 DnD.
-                expect(service.getData('xyz').bar()).toEqual(42);
-            });
-
-            it("stores data under specified keys", function () {
-                service.setData('abc', 42);
-                service.setData('def', "some data");
-
-                expect(service.getData('abc')).toEqual(42);
-                expect(service.getData('def')).toEqual("some data");
-            });
-
-            it("removes data", function () {
-                service.setData('abc', 42);
-                service.removeData('abc');
-                expect(service.getData('abc')).toBeUndefined();
-            });
-
-        });
-    }
-);
diff --git a/platform/search/bundle.js b/platform/search/bundle.js
deleted file mode 100644
index 8f6aa4e274a..00000000000
--- a/platform/search/bundle.js
+++ /dev/null
@@ -1,138 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/controllers/SearchController",
-    "./src/controllers/SearchMenuController",
-    "./src/services/GenericSearchProvider",
-    "./src/services/SearchAggregator",
-    "./res/templates/search-item.html",
-    "./res/templates/search.html",
-    "./res/templates/search-menu.html",
-    "raw-loader!./src/services/GenericSearchWorker.js",
-    "raw-loader!./src/services/BareBonesSearchWorker.js"
-], function (
-    SearchController,
-    SearchMenuController,
-    GenericSearchProvider,
-    SearchAggregator,
-    searchItemTemplate,
-    searchTemplate,
-    searchMenuTemplate,
-    searchWorkerText,
-    BareBonesSearchWorkerText
-) {
-
-    return {
-        name: "platform/search",
-        definition: {
-            "name": "Search",
-            "description": "Allows the user to search through the file tree.",
-            "extensions": {
-                "constants": [
-                    {
-                        "key": "GENERIC_SEARCH_ROOTS",
-                        "value": [
-                            "ROOT"
-                        ],
-                        "priority": "fallback"
-                    },
-                    {
-                        "key": "USE_LEGACY_INDEXER",
-                        "value": false,
-                        "priority": 2
-                    }
-                ],
-                "controllers": [
-                    {
-                        "key": "SearchController",
-                        "implementation": SearchController,
-                        "depends": [
-                            "$scope",
-                            "searchService"
-                        ]
-                    },
-                    {
-                        "key": "SearchMenuController",
-                        "implementation": SearchMenuController,
-                        "depends": [
-                            "$scope",
-                            "types[]"
-                        ]
-                    }
-                ],
-                "representations": [
-                    {
-                        "key": "search-item",
-                        "template": searchItemTemplate
-                    }
-                ],
-                "templates": [
-                    {
-                        "key": "search",
-                        "template": searchTemplate
-                    },
-                    {
-                        "key": "search-menu",
-                        "template": searchMenuTemplate
-                    }
-                ],
-                "components": [
-                    {
-                        "provides": "searchService",
-                        "type": "provider",
-                        "implementation": GenericSearchProvider,
-                        "depends": [
-                            "$q",
-                            "$log",
-                            "objectService",
-                            "workerService",
-                            "topic",
-                            "GENERIC_SEARCH_ROOTS",
-                            "USE_LEGACY_INDEXER",
-                            "openmct"
-                        ]
-                    },
-                    {
-                        "provides": "searchService",
-                        "type": "aggregator",
-                        "implementation": SearchAggregator,
-                        "depends": [
-                            "$q",
-                            "objectService"
-                        ]
-                    }
-                ],
-                "workers": [
-                    {
-                        "key": "bareBonesSearchWorker",
-                        "scriptText": BareBonesSearchWorkerText
-                    },
-                    {
-                        "key": "genericSearchWorker",
-                        "scriptText": searchWorkerText
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/search/res/templates/search-item.html b/platform/search/res/templates/search-item.html
deleted file mode 100644
index e864cfd9d17..00000000000
--- a/platform/search/res/templates/search-item.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-
-<div class="search-result-item l-flex-row flex-elem grows"
-     ng-class="{selected: ngModel.selectedObject.getId() === domainObject.getId()}">
-    <mct-representation key="'label'"
-                        mct-object="domainObject"
-                        ng-model="ngModel"
-                        ng-click="ngModel.allowSelection(domainObject) && ngModel.onSelection(domainObject)"
-                        class="l-flex-row flex-elem grows">
-    </mct-representation>
-</div>
diff --git a/platform/search/res/templates/search-menu.html b/platform/search/res/templates/search-menu.html
deleted file mode 100644
index c0384bcfb44..00000000000
--- a/platform/search/res/templates/search-menu.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-
-<div ng-controller="SearchMenuController as controller">
-
-    <div class="menu checkbox-menu"
-         mct-click-elsewhere="parameters.menuVisible(false)">
-        <ul>
-            <!-- First element is special - it's a reset option -->
-            <li class="search-menu-item special icon-asterisk"
-                title="Select all filters"
-                ng-click="ngModel.checkAll = !ngModel.checkAll; controller.checkAll()">
-                <label class="checkbox custom no-text">
-                    <input type="checkbox"
-                           class="checkbox"
-                           ng-model="ngModel.checkAll"
-                           ng-change="controller.checkAll()" />
-                    <em></em>
-                </label>
-				All
-            </li>
-
-            <!-- The filter options, by type -->
-            <li class="search-menu-item {{ type.cssClass }}"
-                ng-repeat="type in ngModel.types"
-                ng-click="ngModel.checked[type.key] = !ngModel.checked[type.key]; controller.updateOptions()">
-
-                <label class="checkbox custom no-text">
-                    <input type="checkbox"
-                           class="checkbox"
-                           ng-model="ngModel.checked[type.key]"
-                           ng-change="controller.updateOptions()" />
-                    <em></em>
-                </label>
-				{{ type.name }}
-            </li>
-        </ul>
-    </div>
-</div>
diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html
deleted file mode 100644
index 8e477b40cb8..00000000000
--- a/platform/search/res/templates/search.html
+++ /dev/null
@@ -1,78 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div class="angular-w l-flex-col flex-elem grows holder" ng-controller="SearchController as controller">
-    <div class="l-flex-col flex-elem grows holder holder-search" ng-controller="SearchMenuController as menuController">
-        <div class="c-search-btn-wrapper"
-             ng-controller="ToggleController as toggle"
-             ng-class="{ holder: !(ngModel.input === '' || ngModel.input === undefined) }">
-            <div class="c-search">
-                <input class="c-search__search-input"
-                       type="text" tabindex="10000"
-                       ng-model="ngModel.input"
-                       ng-keyup="controller.search()"/>
-                <button class="c-search__clear-input clear-icon icon-x-in-circle"
-                   ng-class="{show: !(ngModel.input === '' || ngModel.input === undefined)}"
-                   ng-click="ngModel.input = ''; controller.search()"></button>
-                <!-- To prevent double triggering of clicks on click away, render
-                   non-clickable version of the button when menu active-->
-                <a ng-if="!toggle.isActive()" class="menu-icon context-available"
-                   ng-click="toggle.toggle()"></a>
-                <a ng-if="toggle.isActive()" class="menu-icon context-available"></a>
-                <mct-include key="'search-menu'"
-                             class="menu-element c-search__search-menu-holder"
-                             ng-class="{invisible: !toggle.isActive()}"
-                             ng-model="ngModel"
-                             parameters="{menuVisible: toggle.setState}">
-                </mct-include>
-            </div>
-
-            <button class="c-button c-search__btn-cancel"
-               ng-show="!(ngModel.input === '' || ngModel.input === undefined)"
-               ng-click="ngModel.input = ''; ngModel.checkAll = true; menuController.checkAll(); controller.search()">
-                Cancel</button>
-        </div>
-
-        <div class="active-filter-display flex-elem holder"
-             ng-class="{invisible: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}">
-            <button class="clear-filters icon-x-in-circle s-icon-button"
-               ng-click="ngModel.checkAll = true; menuController.checkAll()"></button>Filtered by: {{ ngModel.filtersString }}
-        </div>
-
-        <div class="flex-elem holder results-msg" ng-model="ngModel" ng-show="!loading && ngModel.search">
-            {{
-                !results.length > 0? 'No results found':
-                    results.length + ' result' + (results.length > 1? 's':'') + ' found'
-            }}
-        </div>
-
-        <div class="search-results flex-elem holder grows vscroll"
-             ng-class="{invisible: !(loading || results.length > 0), loading: loading}">
-            <mct-representation key="'search-item'"
-                                ng-repeat="result in results"
-                                mct-object="result.object"
-                                ng-model="ngModel"
-                                class="l-flex-row flex-elem grows">
-            </mct-representation>
-            <button class="load-more-button s-button vsm" ng-if="controller.areMore()" ng-click="controller.loadMore()">More Results</button>
-        </div>
-    </div>
-</div>
diff --git a/platform/search/src/controllers/SearchController.js b/platform/search/src/controllers/SearchController.js
deleted file mode 100644
index 3e163f5984d..00000000000
--- a/platform/search/src/controllers/SearchController.js
+++ /dev/null
@@ -1,182 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining SearchController. Created by shale on 07/15/2015.
- */
-define(function () {
-
-    /**
-     * Controller for search in Tree View.
-     *
-     * Filtering is currently buggy; it filters after receiving results from
-     * search providers, the downside of this is that it requires search
-     * providers to provide objects for all possible results, which is
-     * potentially a hit to persistence, thus can be very very slow.
-     *
-     * Ideally, filtering should be handled before loading objects from the persistence
-     * store, the downside to this is that filters must be applied to object
-     * models, not object instances.
-     *
-     * @constructor
-     * @param $scope
-     * @param searchService
-     */
-    function SearchController($scope, searchService) {
-        var controller = this;
-        this.$scope = $scope;
-        this.$scope.ngModel = this.$scope.ngModel || {};
-        this.searchService = searchService;
-        this.numberToDisplay = this.RESULTS_PER_PAGE;
-        this.availabileResults = 0;
-        this.$scope.results = [];
-        this.$scope.loading = false;
-        this.pendingQuery = undefined;
-        this.$scope.ngModel.filter = function () {
-            return controller.onFilterChange.apply(controller, arguments);
-        };
-    }
-
-    SearchController.prototype.RESULTS_PER_PAGE = 20;
-
-    /**
-     * Returns true if there are more results than currently displayed for the
-     * for the current query and filters.
-     */
-    SearchController.prototype.areMore = function () {
-        return this.$scope.results.length < this.availableResults;
-    };
-
-    /**
-     * Display more results for the currently displayed query and filters.
-     */
-    SearchController.prototype.loadMore = function () {
-        this.numberToDisplay += this.RESULTS_PER_PAGE;
-        this.dispatchSearch();
-    };
-
-    /**
-     * Reset search results, then search for the query string specified in
-     * scope.
-     */
-    SearchController.prototype.search = function () {
-        var inputText = this.$scope.ngModel.input;
-
-        this.clearResults();
-
-        if (inputText) {
-            this.$scope.loading = true;
-            this.$scope.ngModel.search = true;
-        } else {
-            this.pendingQuery = undefined;
-            this.$scope.ngModel.search = false;
-            this.$scope.loading = false;
-
-            return;
-        }
-
-        this.dispatchSearch();
-    };
-
-    /**
-     * Dispatch a search to the search service if it hasn't already been
-     * dispatched.
-     *
-     * @private
-     */
-    SearchController.prototype.dispatchSearch = function () {
-        var inputText = this.$scope.ngModel.input,
-            controller = this,
-            queryId = inputText + this.numberToDisplay;
-
-        if (this.pendingQuery === queryId) {
-            return; // don't issue multiple queries for the same term.
-        }
-
-        this.pendingQuery = queryId;
-
-        this
-            .searchService
-            .query(inputText, this.numberToDisplay, this.filterPredicate())
-            .then(function (results) {
-                if (controller.pendingQuery !== queryId) {
-                    return; // another query in progress, so skip this one.
-                }
-
-                controller.onSearchComplete(results);
-            });
-    };
-
-    SearchController.prototype.filter = SearchController.prototype.onFilterChange;
-
-    /**
-     * Refilter results and update visible results when filters have changed.
-     */
-    SearchController.prototype.onFilterChange = function () {
-        this.pendingQuery = undefined;
-        this.search();
-    };
-
-    /**
-     * Returns a predicate function that can be used to filter object models.
-     *
-     * @private
-     */
-    SearchController.prototype.filterPredicate = function () {
-        if (this.$scope.ngModel.checkAll) {
-            return function () {
-                return true;
-            };
-        }
-
-        var includeTypes = this.$scope.ngModel.checked;
-
-        return function (model) {
-            return Boolean(includeTypes[model.type]);
-        };
-    };
-
-    /**
-     * Clear the search results.
-     *
-     * @private
-     */
-    SearchController.prototype.clearResults = function () {
-        this.$scope.results = [];
-        this.availableResults = 0;
-        this.numberToDisplay = this.RESULTS_PER_PAGE;
-    };
-
-    /**
-     * Update search results from given `results`.
-     *
-     * @private
-     */
-    SearchController.prototype.onSearchComplete = function (results) {
-        this.availableResults = results.total;
-        this.$scope.results = results.hits;
-        this.$scope.loading = false;
-        this.pendingQuery = undefined;
-    };
-
-    return SearchController;
-});
diff --git a/platform/search/src/controllers/SearchMenuController.js b/platform/search/src/controllers/SearchMenuController.js
deleted file mode 100644
index f112562bf66..00000000000
--- a/platform/search/src/controllers/SearchMenuController.js
+++ /dev/null
@@ -1,127 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining SearchMenuController. Created by shale on 08/17/2015.
- */
-define(function () {
-
-    function SearchMenuController($scope, types) {
-
-        // Model variables are:
-        //   ngModel.filter, the function filter defined in SearchController
-        //   ngModel.types, an array of type objects
-        //   ngModel.checked, a dictionary of which type filter options are checked
-        //   ngModel.checkAll, a boolean of whether all of the types in ngModel.checked are checked
-        //   ngModel.filtersString, a string list of what filters on the results are active
-        $scope.ngModel.types = [];
-        $scope.ngModel.checked = {};
-        $scope.ngModel.checkAll = true;
-        $scope.ngModel.filtersString = '';
-
-        // On initialization, fill the model's types with type keys
-        types.forEach(function (type) {
-            // We only want some types, the ones that are probably human readable
-            // Manually remove 'root', but not 'unknown'
-            if (type.key && type.name && type.key !== 'root') {
-                $scope.ngModel.types.push(type);
-                $scope.ngModel.checked[type.key] = false;
-            }
-        });
-
-        // For documentation, see updateOptions below
-        function updateOptions() {
-            var type,
-                i;
-
-            // Update all-checked status
-            if ($scope.ngModel.checkAll) {
-                for (type in $scope.ngModel.checked) {
-                    if ($scope.ngModel.checked[type]) {
-                        $scope.ngModel.checkAll = false;
-                    }
-                }
-            }
-
-            // Update the current filters string
-            $scope.ngModel.filtersString = '';
-            if (!$scope.ngModel.checkAll) {
-                for (i = 0; i < $scope.ngModel.types.length; i += 1) {
-                    // If the type key corresponds to a checked option...
-                    if ($scope.ngModel.checked[$scope.ngModel.types[i].key]) {
-                        // ... add it to the string list of current filter options
-                        if ($scope.ngModel.filtersString === '') {
-                            $scope.ngModel.filtersString += $scope.ngModel.types[i].name;
-                        } else {
-                            $scope.ngModel.filtersString += ', ' + $scope.ngModel.types[i].name;
-                        }
-                    }
-                }
-
-                // If there's still nothing in the filters string, there are no
-                //   filters selected
-                if ($scope.ngModel.filtersString === '') {
-                    $scope.ngModel.checkAll = true;
-                }
-            }
-
-            // Re-filter results
-            $scope.ngModel.filter();
-        }
-
-        // For documentation, see checkAll below
-        function checkAll() {
-            // Reset all the other options to original/default position
-            Object.keys($scope.ngModel.checked).forEach(function (type) {
-                $scope.ngModel.checked[type] = false;
-            });
-
-            // This setting will make the filters display hidden
-            $scope.ngModel.filtersString = '';
-            // Do not let checkAll become unchecked when it is the only checked filter
-            if (!$scope.ngModel.checkAll) {
-                $scope.ngModel.checkAll = true;
-            }
-
-            // Re-filter results
-            $scope.ngModel.filter();
-        }
-
-        return {
-            /**
-             * Updates the status of the checked options. Updates the filtersString
-             *   with which options are checked. Re-filters the search results after.
-             *   Not intended to be called by checkAll when it is toggled.
-             */
-            updateOptions: updateOptions,
-
-            /**
-             * Handles the search and filter options for when checkAll has been
-             *   toggled. This is a special case, compared to the other search
-             *   menu options, so is intended to be called instead of updateOptions.
-             */
-            checkAll: checkAll
-        };
-    }
-
-    return SearchMenuController;
-});
diff --git a/platform/search/src/services/BareBonesSearchWorker.js b/platform/search/src/services/BareBonesSearchWorker.js
deleted file mode 100644
index e6d935f11de..00000000000
--- a/platform/search/src/services/BareBonesSearchWorker.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining BareBonesSearchWorker. Created by deeptailor on 10/03/2019.
- */
-(function () {
-
-    // An array of objects composed of domain object IDs and names
-    // {id: domainObject's ID, name: domainObject's name}
-    var indexedItems = [];
-
-    function indexItem(id, model) {
-        indexedItems.push({
-            id: id,
-            name: model.name.toLowerCase(),
-            type: model.type
-        });
-    }
-
-    /**
-     * Gets search results from the indexedItems based on provided search
-     *   input. Returns matching results from indexedItems
-     *
-     * @param data An object which contains:
-     *           * input: The original string which we are searching with
-     *           * maxResults: The maximum number of search results desired
-     *           * queryId: an id identifying this query, will be returned.
-     */
-    function search(data) {
-        // This results dictionary will have domain object ID keys which
-        // point to the value the domain object's score.
-        var results,
-            input = data.input.trim().toLowerCase(),
-            message = {
-                request: 'search',
-                results: {},
-                total: 0,
-                queryId: data.queryId
-            };
-
-        results = indexedItems.filter((indexedItem) => {
-            return indexedItem.name.includes(input);
-        });
-
-        message.total = results.length;
-        message.results = results
-            .slice(0, data.maxResults);
-
-        return message;
-    }
-
-    self.onmessage = function (event) {
-        if (event.data.request === 'index') {
-            indexItem(event.data.id, event.data.model);
-        } else if (event.data.request === 'search') {
-            self.postMessage(search(event.data));
-        }
-    };
-}());
diff --git a/platform/search/src/services/GenericSearchProvider.js b/platform/search/src/services/GenericSearchProvider.js
deleted file mode 100644
index c4a5a83a60a..00000000000
--- a/platform/search/src/services/GenericSearchProvider.js
+++ /dev/null
@@ -1,326 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining GenericSearchProvider. Created by shale on 07/16/2015.
- */
-define([
-    'objectUtils',
-    'lodash'
-], function (
-    objectUtils,
-    _
-) {
-
-    /**
-     * A search service which searches through domain objects in
-     * the filetree without using external search implementations.
-     *
-     * @constructor
-     * @param $q Angular's $q, for promise consolidation.
-     * @param $log Anglar's $log, for logging.
-     * @param {ObjectService} objectService the object service.
-     * @param {WorkerService} workerService the workerService.
-     * @param {TopicService} topic the topic service.
-     * @param {Array} ROOTS An array of object Ids to begin indexing.
-     */
-    function GenericSearchProvider($q, $log, objectService, workerService, topic, ROOTS, USE_LEGACY_INDEXER, openmct) {
-        var provider = this;
-        this.$q = $q;
-        this.$log = $log;
-        this.objectService = objectService;
-        this.openmct = openmct;
-
-        this.indexedIds = {};
-        this.idsToIndex = [];
-        this.pendingIndex = {};
-        this.pendingRequests = 0;
-
-        this.pendingQueries = {};
-
-        this.USE_LEGACY_INDEXER = USE_LEGACY_INDEXER;
-
-        this.worker = this.startWorker(workerService);
-        this.indexOnMutation(topic);
-
-        ROOTS.forEach(function indexRoot(rootId) {
-            provider.scheduleForIndexing(rootId);
-        });
-
-    }
-
-    /**
-     * Maximum number of concurrent index requests to allow.
-     */
-    GenericSearchProvider.prototype.MAX_CONCURRENT_REQUESTS = 100;
-
-    /**
-     * Query the search provider for results.
-     *
-     * @param {String} input the string to search by.
-     * @param {Number} maxResults max number of results to return.
-     * @returns {Promise} a promise for a modelResults object.
-     */
-    GenericSearchProvider.prototype.query = function (
-        input,
-        maxResults
-    ) {
-
-        var queryId = this.dispatchSearch(input, maxResults),
-            pendingQuery = this.$q.defer();
-
-        this.pendingQueries[queryId] = pendingQuery;
-
-        return pendingQuery.promise;
-    };
-
-    /**
-     * Creates a search worker and attaches handlers.
-     *
-     * @private
-     * @param workerService
-     * @returns worker the created search worker.
-     */
-    GenericSearchProvider.prototype.startWorker = function (workerService) {
-        var provider = this,
-            worker;
-
-        if (this.USE_LEGACY_INDEXER) {
-            worker = workerService.run('genericSearchWorker');
-        } else {
-            worker = workerService.run('bareBonesSearchWorker');
-        }
-
-        worker.addEventListener('message', function (messageEvent) {
-            provider.onWorkerMessage(messageEvent);
-        });
-
-        return worker;
-    };
-
-    /**
-     * Listen to the mutation topic and re-index objects when they are
-     * mutated.
-     *
-     * @private
-     * @param topic the topicService.
-     */
-    GenericSearchProvider.prototype.indexOnMutation = function (topic) {
-        let mutationTopic = topic('mutation');
-
-        mutationTopic.listen(mutatedObject => {
-            let editor = mutatedObject.getCapability('editor');
-            if (!editor || !editor.inEditContext()) {
-                this.index(
-                    mutatedObject.getId(),
-                    mutatedObject.getModel()
-                );
-            }
-        });
-    };
-
-    /**
-     * Schedule an id to be indexed at a later date.  If there are less
-     * pending requests then allowed, will kick off an indexing request.
-     *
-     * @private
-     * @param {String} id to be indexed.
-     */
-    GenericSearchProvider.prototype.scheduleForIndexing = function (id) {
-        const identifier = objectUtils.parseKeyString(id);
-        const objectProvider = this.openmct.objects.getProvider(identifier);
-
-        if (objectProvider === undefined || objectProvider.search === undefined) {
-            if (!this.indexedIds[id] && !this.pendingIndex[id]) {
-                this.indexedIds[id] = true;
-                this.pendingIndex[id] = true;
-                this.idsToIndex.push(id);
-            }
-        }
-
-        this.keepIndexing();
-    };
-
-    /**
-     * If there are less pending requests than concurrent requests, keep
-     * firing requests.
-     *
-     * @private
-     */
-    GenericSearchProvider.prototype.keepIndexing = function () {
-        while (this.pendingRequests < this.MAX_CONCURRENT_REQUESTS
-            && this.idsToIndex.length
-        ) {
-            this.beginIndexRequest();
-        }
-    };
-
-    /**
-     * Pass an id and model to the worker to be indexed.  If the model has
-     * composition, schedule those ids for later indexing.
-     *
-     * @private
-     * @param id a model id
-     * @param model a model
-     */
-    GenericSearchProvider.prototype.index = function (id, model) {
-        var provider = this;
-
-        if (id !== 'ROOT') {
-            this.worker.postMessage({
-                request: 'index',
-                model: model,
-                id: id
-            });
-        }
-
-        var domainObject = objectUtils.toNewFormat(model, id);
-        var composition = this.openmct.composition.registry.find(p => {
-            return p.appliesTo(domainObject);
-        });
-
-        if (!composition) {
-            return;
-        }
-
-        composition.load(domainObject)
-            .then(function (children) {
-                children.forEach(function (child) {
-                    provider.scheduleForIndexing(objectUtils.makeKeyString(child));
-                });
-            });
-    };
-
-    /**
-     * Pulls an id from the indexing queue, loads it from the model service,
-     * and indexes it.  Upon completion, tells the provider to keep
-     * indexing.
-     *
-     * @private
-     */
-    GenericSearchProvider.prototype.beginIndexRequest = function () {
-        var idToIndex = this.idsToIndex.shift(),
-            provider = this;
-
-        this.pendingRequests += 1;
-        this.objectService
-            .getObjects([idToIndex])
-            .then(function (objects) {
-                delete provider.pendingIndex[idToIndex];
-                if (objects[idToIndex]) {
-                    provider.index(idToIndex, objects[idToIndex].model);
-                }
-            }, function () {
-                provider
-                    .$log
-                    .warn('Failed to index domain object ' + idToIndex);
-            })
-            .then(function () {
-                setTimeout(function () {
-                    provider.pendingRequests -= 1;
-                    provider.keepIndexing();
-                }, 0);
-            });
-    };
-
-    /**
-     * Handle messages from the worker.  Only really knows how to handle search
-     * results, which are parsed, transformed into a modelResult object, which
-     * is used to resolve the corresponding promise.
-     * @private
-     */
-    GenericSearchProvider.prototype.onWorkerMessage = function (event) {
-        if (event.data.request !== 'search') {
-            return;
-        }
-
-        var pendingQuery,
-            modelResults;
-
-        if (this.USE_LEGACY_INDEXER) {
-            pendingQuery = this.pendingQueries[event.data.queryId];
-            modelResults = {
-                total: event.data.total
-            };
-
-            modelResults.hits = event.data.results.map(function (hit) {
-                return {
-                    id: hit.item.id,
-                    model: hit.item.model,
-                    type: hit.item.type,
-                    score: hit.matchCount
-                };
-            });
-        } else {
-            pendingQuery = this.pendingQueries[event.data.queryId];
-            modelResults = {
-                total: event.data.total
-            };
-
-            modelResults.hits = event.data.results.map(function (hit) {
-                return {
-                    id: hit.id
-                };
-            });
-        }
-
-        pendingQuery.resolve(modelResults);
-        delete this.pendingQueries[event.data.queryId];
-    };
-
-    /**
-     * @private
-     * @returns {Number} a unique, unused query Id.
-     */
-    GenericSearchProvider.prototype.makeQueryId = function () {
-        var queryId = Math.ceil(Math.random() * 100000);
-        while (this.pendingQueries[queryId]) {
-            queryId = Math.ceil(Math.random() * 100000);
-        }
-
-        return queryId;
-    };
-
-    /**
-     * Dispatch a search query to the worker and return a queryId.
-     *
-     * @private
-     * @returns {Number} a unique query Id for the query.
-     */
-    GenericSearchProvider.prototype.dispatchSearch = function (
-        searchInput,
-        maxResults
-    ) {
-        var queryId = this.makeQueryId();
-
-        this.worker.postMessage({
-            request: 'search',
-            input: searchInput,
-            maxResults: maxResults,
-            queryId: queryId
-        });
-
-        return queryId;
-    };
-
-    return GenericSearchProvider;
-});
diff --git a/platform/search/src/services/GenericSearchWorker.js b/platform/search/src/services/GenericSearchWorker.js
deleted file mode 100644
index 8b2f65513e7..00000000000
--- a/platform/search/src/services/GenericSearchWorker.js
+++ /dev/null
@@ -1,162 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining GenericSearchWorker. Created by shale on 07/21/2015.
- */
-(function () {
-
-    // An array of objects composed of domain object IDs and models
-    // {id: domainObject's ID, model: domainObject's model}
-    var indexedItems = [],
-        TERM_SPLITTER = /[ _*]/;
-
-    function indexItem(id, model) {
-        var vector = {
-            name: model.name
-        };
-        vector.cleanName = model.name.trim();
-        vector.lowerCaseName = vector.cleanName.toLocaleLowerCase();
-        vector.terms = vector.lowerCaseName.split(TERM_SPLITTER);
-
-        indexedItems.push({
-            id: id,
-            vector: vector,
-            model: model,
-            type: model.type
-        });
-    }
-
-    // Helper function for search()
-    function convertToTerms(input) {
-        var query = {
-            exactInput: input
-        };
-        query.inputClean = input.trim();
-        query.inputLowerCase = query.inputClean.toLocaleLowerCase();
-        query.terms = query.inputLowerCase.split(TERM_SPLITTER);
-        query.exactTerms = query.inputClean.split(TERM_SPLITTER);
-
-        return query;
-    }
-
-    /**
-     * Gets search results from the indexedItems based on provided search
-     *   input. Returns matching results from indexedItems
-     *
-     * @param data An object which contains:
-     *           * input: The original string which we are searching with
-     *           * maxResults: The maximum number of search results desired
-     *           * queryId: an id identifying this query, will be returned.
-     */
-    function search(data) {
-        // This results dictionary will have domain object ID keys which
-        // point to the value the domain object's score.
-        var results,
-            input = data.input,
-            query = convertToTerms(input),
-            message = {
-                request: 'search',
-                results: {},
-                total: 0,
-                queryId: data.queryId
-            },
-            matches = {};
-
-        if (!query.inputClean) {
-            // No search terms, no results;
-            return message;
-        }
-
-        // Two phases: find matches, then score matches.
-        // Idea being that match finding should be fast, so that future scoring
-        // operations process fewer objects.
-
-        query.terms.forEach(function findMatchingItems(term) {
-            indexedItems
-                .filter(function matchesItem(item) {
-                    return item.vector.lowerCaseName.indexOf(term) !== -1;
-                })
-                .forEach(function trackMatch(matchedItem) {
-                    if (!matches[matchedItem.id]) {
-                        matches[matchedItem.id] = {
-                            matchCount: 0,
-                            item: matchedItem
-                        };
-                    }
-
-                    matches[matchedItem.id].matchCount += 1;
-                });
-        });
-
-        // Then, score matching items.
-        results = Object
-            .keys(matches)
-            .map(function asMatches(matchId) {
-                return matches[matchId];
-            })
-            .map(function prioritizeExactMatches(match) {
-                if (match.item.vector.name === query.exactInput) {
-                    match.matchCount += 100;
-                } else if (match.item.vector.lowerCaseName
-                           === query.inputLowerCase) {
-                    match.matchCount += 50;
-                }
-
-                return match;
-            })
-            .map(function prioritizeCompleteTermMatches(match) {
-                match.item.vector.terms.forEach(function (term) {
-                    if (query.terms.indexOf(term) !== -1) {
-                        match.matchCount += 0.5;
-                    }
-                });
-
-                return match;
-            })
-            .sort(function compare(a, b) {
-                if (a.matchCount > b.matchCount) {
-                    return -1;
-                }
-
-                if (a.matchCount < b.matchCount) {
-                    return 1;
-                }
-
-                return 0;
-            });
-
-        message.total = results.length;
-        message.results = results
-            .slice(0, data.maxResults);
-
-        return message;
-    }
-
-    self.onmessage = function (event) {
-        if (event.data.request === 'index') {
-            indexItem(event.data.id, event.data.model);
-        } else if (event.data.request === 'search') {
-            self.postMessage(search(event.data));
-        }
-    };
-}());
diff --git a/platform/search/src/services/SearchAggregator.js b/platform/search/src/services/SearchAggregator.js
deleted file mode 100644
index 7d9205b3f47..00000000000
--- a/platform/search/src/services/SearchAggregator.js
+++ /dev/null
@@ -1,233 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining SearchAggregator. Created by shale on 07/16/2015.
- */
-define([
-
-], function (
-
-) {
-
-    /**
-     * Aggregates multiple search providers as a singular search provider.
-     * Search providers are expected to implement a `query` method which returns
-     * a promise for a `modelResults` object.
-     *
-     * The search aggregator combines the results from multiple providers,
-     * removes aggregates, and converts the results to domain objects.
-     *
-     * @constructor
-     * @param $q Angular's $q, for promise consolidation.
-     * @param objectService
-     * @param {SearchProvider[]} providers The search providers to be
-     *        aggregated.
-     */
-    function SearchAggregator($q, objectService, providers) {
-        this.$q = $q;
-        this.objectService = objectService;
-        this.providers = providers;
-    }
-
-    /**
-     * If max results is not specified in query, use this as default.
-     */
-    SearchAggregator.prototype.DEFAULT_MAX_RESULTS = 100;
-
-    /**
-     * Because filtering isn't implemented inside each provider, the fudge
-     * factor is a multiplier on the number of results returned-- more results
-     * than requested will be fetched, and then will be filtered.  This helps
-     * provide more predictable pagination when large numbers of results are
-     * returned but very few results match filters.
-     *
-     * If a provider level filter implementation is implemented in the future,
-     * remove this.
-     */
-    SearchAggregator.prototype.FUDGE_FACTOR = 5;
-
-    /**
-     * Sends a query to each of the providers. Returns a promise for
-     *   a result object that has the format
-     *   {hits: searchResult[], total: number}
-     *   where a searchResult has the format
-     *   {id: string, object: domainObject, score: number}
-     *
-     * @param {String} inputText The text input that is the query.
-     * @param {Number} maxResults (optional) The maximum number of results
-     *   that this function should return. If not provided, a
-     *   default of 100 will be used.
-     * @param {Function} [filter] if provided, will be called for every
-     *   potential modelResult.  If it returns false, the model result will be
-     *   excluded from the search results.
-     * @param {AbortController.signal} abortSignal (optional) can pass in an abortSignal to cancel any
-     *   downstream fetch requests.
-     * @returns {Promise} A Promise for a search result object.
-     */
-    SearchAggregator.prototype.query = function (
-        inputText,
-        maxResults,
-        filter,
-        abortSignal
-    ) {
-
-        var aggregator = this,
-            resultPromises;
-
-        if (!maxResults) {
-            maxResults = this.DEFAULT_MAX_RESULTS;
-        }
-
-        resultPromises = this.providers.map(function (provider) {
-            return provider.query(
-                inputText,
-                maxResults * aggregator.FUDGE_FACTOR
-            );
-        });
-
-        return this.$q
-            .all(resultPromises)
-            .then(function (providerResults) {
-                var modelResults = {
-                    hits: [],
-                    total: 0
-                };
-
-                providerResults.forEach(function (providerResult) {
-                    modelResults.hits =
-                        modelResults.hits.concat(providerResult.hits);
-                    modelResults.total += providerResult.total;
-                });
-
-                modelResults = aggregator.orderByScore(modelResults);
-                modelResults = aggregator.applyFilter(modelResults, filter);
-                modelResults = aggregator.removeDuplicates(modelResults);
-
-                return aggregator.asObjectResults(modelResults, abortSignal);
-            });
-    };
-
-    /**
-     * Order model results by score descending and return them.
-     */
-    SearchAggregator.prototype.orderByScore = function (modelResults) {
-        modelResults.hits.sort(function (a, b) {
-            if (a.score > b.score) {
-                return -1;
-            } else if (b.score > a.score) {
-                return 1;
-            } else {
-                return 0;
-            }
-        });
-
-        return modelResults;
-    };
-
-    /**
-     * Apply a filter to each model result, removing it from search results
-     * if it does not match.
-     */
-    SearchAggregator.prototype.applyFilter = function (modelResults, filter) {
-        if (!filter) {
-            return modelResults;
-        }
-
-        var initialLength = modelResults.hits.length,
-            finalLength,
-            removedByFilter;
-
-        modelResults.hits = modelResults.hits.filter(function (hit) {
-            return filter(hit.model);
-        });
-
-        finalLength = modelResults.hits.length;
-        removedByFilter = initialLength - finalLength;
-        modelResults.total -= removedByFilter;
-
-        return modelResults;
-    };
-
-    /**
-     * Remove duplicate hits in a modelResults object, and decrement `total`
-     * each time a duplicate is removed.
-     */
-    SearchAggregator.prototype.removeDuplicates = function (modelResults) {
-        var includedIds = {};
-
-        modelResults.hits = modelResults
-            .hits
-            .filter(function alreadyInResults(hit) {
-                if (includedIds[hit.id]) {
-                    modelResults.total -= 1;
-
-                    return false;
-                }
-
-                includedIds[hit.id] = true;
-
-                return true;
-            });
-
-        return modelResults;
-    };
-
-    /**
-     * Convert modelResults to objectResults by fetching them from the object
-     * service.
-     *
-     * @param {Object} modelResults an object containing the results from the search
-     * @param {AbortController.signal} abortSignal (optional) abort signal to cancel any
-     *   downstream fetch requests
-     * @returns {Promise} for an objectResults object.
-     */
-    SearchAggregator.prototype.asObjectResults = function (modelResults, abortSignal) {
-        var objectIds = modelResults.hits.map(function (modelResult) {
-            return modelResult.id;
-        });
-
-        return this
-            .objectService
-            .getObjects(objectIds, abortSignal)
-            .then(function (objects) {
-
-                var objectResults = {
-                    total: modelResults.total
-                };
-
-                objectResults.hits = modelResults
-                    .hits
-                    .map(function asObjectResult(hit) {
-                        return {
-                            id: hit.id,
-                            object: objects[hit.id],
-                            score: hit.score
-                        };
-                    });
-
-                return objectResults;
-            });
-    };
-
-    return SearchAggregator;
-});
diff --git a/platform/search/test/controllers/SearchControllerSpec.js b/platform/search/test/controllers/SearchControllerSpec.js
deleted file mode 100644
index 45dfeb13619..00000000000
--- a/platform/search/test/controllers/SearchControllerSpec.js
+++ /dev/null
@@ -1,196 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * 'License'); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an 'AS IS' BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- *  SearchSpec. Created by shale on 07/31/2015.
- */
-define([
-    '../../src/controllers/SearchController'
-], function (
-    SearchController
-) {
-
-    describe('The search controller', function () {
-        var mockScope,
-            mockSearchService,
-            mockPromise,
-            mockSearchResult,
-            mockDomainObject,
-            mockTypes,
-            controller;
-
-        function bigArray(size) {
-            var array = [],
-                i;
-            for (i = 0; i < size; i += 1) {
-                array.push(mockSearchResult);
-            }
-
-            return array;
-        }
-
-        beforeEach(function () {
-            mockScope = jasmine.createSpyObj(
-                '$scope',
-                ['$watch']
-            );
-            mockScope.ngModel = {};
-            mockScope.ngModel.input = 'test input';
-            mockScope.ngModel.checked = {};
-            mockScope.ngModel.checked['mock.type'] = true;
-            mockScope.ngModel.checkAll = true;
-
-            mockSearchService = jasmine.createSpyObj(
-                'searchService',
-                ['query']
-            );
-            mockPromise = jasmine.createSpyObj(
-                'promise',
-                ['then']
-            );
-            mockSearchService.query.and.returnValue(mockPromise);
-
-            mockTypes = [{
-                key: 'mock.type',
-                name: 'Mock Type',
-                cssClass: 'icon-object-unknown'
-            }];
-
-            mockSearchResult = jasmine.createSpyObj(
-                'searchResult',
-                ['']
-            );
-            mockDomainObject = jasmine.createSpyObj(
-                'domainObject',
-                ['getModel']
-            );
-            mockSearchResult.object = mockDomainObject;
-            mockDomainObject.getModel.and.returnValue({
-                name: 'Mock Object',
-                type: 'mock.type'
-            });
-
-            controller = new SearchController(mockScope, mockSearchService, mockTypes);
-            controller.search();
-        });
-
-        it('has a default number of results per page', function () {
-            expect(controller.RESULTS_PER_PAGE).toBe(20);
-        });
-
-        it('sends queries to the search service', function () {
-            expect(mockSearchService.query).toHaveBeenCalledWith(
-                'test input',
-                controller.RESULTS_PER_PAGE,
-                jasmine.any(Function)
-            );
-        });
-
-        describe('filter query function', function () {
-            it('returns true when all types allowed', function () {
-                mockScope.ngModel.checkAll = true;
-                controller.onFilterChange();
-                var filterFn = mockSearchService.query.calls.mostRecent().args[2];
-                expect(filterFn('askbfa')).toBe(true);
-            });
-
-            it('returns true only for matching checked types', function () {
-                mockScope.ngModel.checkAll = false;
-                controller.onFilterChange();
-                var filterFn = mockSearchService.query.calls.mostRecent().args[2];
-                expect(filterFn({type: 'mock.type'})).toBe(true);
-                expect(filterFn({type: 'other.type'})).toBe(false);
-            });
-        });
-
-        it('populates the results with results from the search service', function () {
-            expect(mockPromise.then).toHaveBeenCalledWith(jasmine.any(Function));
-            mockPromise.then.calls.mostRecent().args[0]({hits: ['a']});
-
-            expect(mockScope.results.length).toBe(1);
-            expect(mockScope.results).toContain('a');
-        });
-
-        it('is loading until the service\'s promise fulfills', function () {
-            expect(mockScope.loading).toBeTruthy();
-
-            // Then resolve the promises
-            mockPromise.then.calls.mostRecent().args[0]({hits: []});
-            expect(mockScope.loading).toBeFalsy();
-        });
-
-        it('detects when there are more results', function () {
-            mockPromise.then.calls.mostRecent().args[0]({
-                hits: bigArray(controller.RESULTS_PER_PAGE),
-                total: controller.RESULTS_PER_PAGE + 5
-            });
-
-            expect(mockScope.results.length).toBe(controller.RESULTS_PER_PAGE);
-            expect(controller.areMore()).toBeTruthy();
-
-            controller.loadMore();
-
-            expect(mockSearchService.query).toHaveBeenCalledWith(
-                'test input',
-                controller.RESULTS_PER_PAGE * 2,
-                jasmine.any(Function)
-            );
-
-            mockPromise.then.calls.mostRecent().args[0]({
-                hits: bigArray(controller.RESULTS_PER_PAGE + 5),
-                total: controller.RESULTS_PER_PAGE + 5
-            });
-
-            expect(mockScope.results.length)
-                .toBe(controller.RESULTS_PER_PAGE + 5);
-
-            expect(controller.areMore()).toBe(false);
-        });
-
-        it('sets the ngModel.search flag', function () {
-            // Flag should be true with nonempty input
-            expect(mockScope.ngModel.search).toEqual(true);
-
-            // Flag should be false with empty input
-            mockScope.ngModel.input = '';
-            controller.search();
-            mockPromise.then.calls.mostRecent().args[0]({
-                hits: [],
-                total: 0
-            });
-            expect(mockScope.ngModel.search).toEqual(false);
-
-            // Both the empty string and undefined should be 'empty input'
-            mockScope.ngModel.input = undefined;
-            controller.search();
-            mockPromise.then.calls.mostRecent().args[0]({
-                hits: [],
-                total: 0
-            });
-            expect(mockScope.ngModel.search).toEqual(false);
-        });
-
-        it('attaches a filter function to scope', function () {
-            expect(mockScope.ngModel.filter).toEqual(jasmine.any(Function));
-        });
-    });
-});
diff --git a/platform/search/test/controllers/SearchMenuControllerSpec.js b/platform/search/test/controllers/SearchMenuControllerSpec.js
deleted file mode 100644
index 2a0e3d2e3b2..00000000000
--- a/platform/search/test/controllers/SearchMenuControllerSpec.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- *  SearchSpec. Created by shale on 08/17/2015.
- */
-define(
-    ["../../src/controllers/SearchMenuController"],
-    function (SearchMenuController) {
-
-        describe("The search menu controller", function () {
-            var mockScope,
-                mockTypes,
-                controller;
-
-            beforeEach(function () {
-                mockScope = jasmine.createSpyObj(
-                    "$scope",
-                    [""]
-                );
-
-                mockTypes = [
-                    {
-                        key: 'mock.type.1',
-                        name: 'Mock Type 1',
-                        cssClass: 'icon-layout'
-                    },
-                    {
-                        key: 'mock.type.2',
-                        name: 'Mock Type 2',
-                        cssClass: 'icon-telemetry'
-                    }
-                ];
-
-                mockScope.ngModel = {};
-                mockScope.ngModel.checked = {};
-                mockScope.ngModel.checked['mock.type.1'] = false;
-                mockScope.ngModel.checked['mock.type.2'] = false;
-                mockScope.ngModel.checkAll = true;
-                mockScope.ngModel.filter = jasmine.createSpy('$scope.ngModel.filter');
-                mockScope.ngModel.filtersString = '';
-
-                controller = new SearchMenuController(mockScope, mockTypes);
-            });
-
-            it("gets types on initialization", function () {
-                expect(mockScope.ngModel.types).toBeDefined();
-            });
-
-            it("refilters results when options are updated", function () {
-                controller.updateOptions();
-                expect(mockScope.ngModel.filter).toHaveBeenCalled();
-
-                controller.checkAll();
-                expect(mockScope.ngModel.filter).toHaveBeenCalled();
-            });
-
-            it("updates the filters string when options are updated", function () {
-                controller.updateOptions();
-                expect(mockScope.ngModel.filtersString).toEqual('');
-
-                mockScope.ngModel.checked['mock.type.1'] = true;
-
-                controller.updateOptions();
-                expect(mockScope.ngModel.filtersString).not.toEqual('');
-            });
-
-            it("changing checkAll status sets checkAll to true", function () {
-                controller.checkAll();
-                expect(mockScope.ngModel.checkAll).toEqual(true);
-                expect(mockScope.ngModel.filtersString).toEqual('');
-
-                mockScope.ngModel.checkAll = false;
-
-                controller.checkAll();
-                expect(mockScope.ngModel.checkAll).toEqual(true);
-                expect(mockScope.ngModel.filtersString).toEqual('');
-            });
-
-            it("checking checkAll option resets other options", function () {
-                mockScope.ngModel.checked['mock.type.1'] = true;
-                mockScope.ngModel.checked['mock.type.2'] = true;
-
-                controller.checkAll();
-
-                Object.keys(mockScope.ngModel.checked).forEach(function (type) {
-                    expect(mockScope.ngModel.checked[type]).toBeFalsy();
-                });
-            });
-
-            it("checks checkAll when no options are checked", function () {
-                Object.keys(mockScope.ngModel.checked).forEach(function (type) {
-                    mockScope.ngModel.checked[type] = false;
-                });
-                mockScope.ngModel.checkAll = false;
-
-                controller.updateOptions();
-
-                expect(mockScope.ngModel.filtersString).toEqual('');
-                expect(mockScope.ngModel.checkAll).toEqual(true);
-            });
-
-            it("tells the user when options are checked", function () {
-                mockScope.ngModel.checkAll = false;
-                Object.keys(mockScope.ngModel.checked).forEach(function (type) {
-                    mockScope.ngModel.checked[type] = true;
-                });
-
-                controller.updateOptions();
-
-                expect(mockScope.ngModel.filtersString).not.toEqual('');
-            });
-        });
-    }
-);
diff --git a/platform/search/test/services/GenericSearchProviderSpec.js b/platform/search/test/services/GenericSearchProviderSpec.js
deleted file mode 100644
index 8bc81a9c3e7..00000000000
--- a/platform/search/test/services/GenericSearchProviderSpec.js
+++ /dev/null
@@ -1,421 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- *  SearchSpec. Created by shale on 07/31/2015.
- */
-define([
-    "../../src/services/GenericSearchProvider"
-], function (
-    GenericSearchProvider
-) {
-
-    xdescribe('GenericSearchProvider', function () {
-        var $q,
-            $log,
-            modelService,
-            models,
-            workerService,
-            worker,
-            topic,
-            mutationTopic,
-            ROOTS,
-            compositionProvider,
-            openmct,
-            provider;
-
-        beforeEach(function () {
-            $q = jasmine.createSpyObj(
-                '$q',
-                ['defer']
-            );
-            $log = jasmine.createSpyObj(
-                '$log',
-                ['warn']
-            );
-            models = {};
-            modelService = jasmine.createSpyObj(
-                'modelService',
-                ['getModels']
-            );
-            modelService.getModels.and.returnValue(Promise.resolve(models));
-            workerService = jasmine.createSpyObj(
-                'workerService',
-                ['run']
-            );
-            worker = jasmine.createSpyObj(
-                'worker',
-                [
-                    'postMessage',
-                    'addEventListener'
-                ]
-            );
-            workerService.run.and.returnValue(worker);
-            topic = jasmine.createSpy('topic');
-            mutationTopic = jasmine.createSpyObj(
-                'mutationTopic',
-                ['listen']
-            );
-            topic.and.returnValue(mutationTopic);
-            ROOTS = [
-                'mine'
-            ];
-            compositionProvider = jasmine.createSpyObj(
-                'compositionProvider',
-                ['load', 'appliesTo']
-            );
-            compositionProvider.load.and.callFake(function (domainObject) {
-                return Promise.resolve(domainObject.composition);
-            });
-            compositionProvider.appliesTo.and.callFake(function (domainObject) {
-                return Boolean(domainObject.composition);
-            });
-            openmct = {
-                composition: {
-                    registry: [compositionProvider]
-                }
-            };
-
-            spyOn(GenericSearchProvider.prototype, 'scheduleForIndexing');
-
-            provider = new GenericSearchProvider(
-                $q,
-                $log,
-                modelService,
-                workerService,
-                topic,
-                ROOTS,
-                openmct
-            );
-        });
-
-        it('listens for general mutation', function () {
-            expect(topic).toHaveBeenCalledWith('mutation');
-            expect(mutationTopic.listen)
-                .toHaveBeenCalledWith(jasmine.any(Function));
-        });
-
-        it('re-indexes when mutation occurs', function () {
-            var mockDomainObject =
-                    jasmine.createSpyObj('domainObj', [
-                        'getId',
-                        'getModel',
-                        'getCapability'
-                    ]),
-                testModel = { some: 'model' };
-            mockDomainObject.getId.and.returnValue("some-id");
-            mockDomainObject.getModel.and.returnValue(testModel);
-            spyOn(provider, 'index').and.callThrough();
-            mutationTopic.listen.calls.mostRecent().args[0](mockDomainObject);
-            expect(provider.index).toHaveBeenCalledWith('some-id', testModel);
-        });
-
-        it('starts indexing roots', function () {
-            expect(provider.scheduleForIndexing).toHaveBeenCalledWith('mine');
-        });
-
-        it('runs a worker', function () {
-            expect(workerService.run)
-                .toHaveBeenCalledWith('genericSearchWorker');
-        });
-
-        it('listens for messages from worker', function () {
-            expect(worker.addEventListener)
-                .toHaveBeenCalledWith('message', jasmine.any(Function));
-            spyOn(provider, 'onWorkerMessage');
-            worker.addEventListener.calls.mostRecent().args[1]('mymessage');
-            expect(provider.onWorkerMessage).toHaveBeenCalledWith('mymessage');
-        });
-
-        it('has a maximum number of concurrent requests', function () {
-            expect(provider.MAX_CONCURRENT_REQUESTS).toBe(100);
-        });
-
-        describe('scheduleForIndexing', function () {
-            beforeEach(function () {
-                provider.scheduleForIndexing.and.callThrough();
-                spyOn(provider, 'keepIndexing');
-            });
-
-            it('tracks ids to index', function () {
-                expect(provider.indexedIds.a).not.toBeDefined();
-                expect(provider.pendingIndex.a).not.toBeDefined();
-                expect(provider.idsToIndex).not.toContain('a');
-                provider.scheduleForIndexing('a');
-                expect(provider.indexedIds.a).toBeDefined();
-                expect(provider.pendingIndex.a).toBeDefined();
-                expect(provider.idsToIndex).toContain('a');
-            });
-
-            it('calls keep indexing', function () {
-                provider.scheduleForIndexing('a');
-                expect(provider.keepIndexing).toHaveBeenCalled();
-            });
-        });
-
-        describe('keepIndexing', function () {
-            it('calls beginIndexRequest until at maximum', function () {
-                spyOn(provider, 'beginIndexRequest').and.callThrough();
-                provider.pendingRequests = 9;
-                provider.idsToIndex = ['a', 'b', 'c'];
-                provider.MAX_CONCURRENT_REQUESTS = 10;
-                provider.keepIndexing();
-                expect(provider.beginIndexRequest).toHaveBeenCalled();
-                expect(provider.beginIndexRequest.calls.count()).toBe(1);
-            });
-
-            it('calls beginIndexRequest for all ids to index', function () {
-                spyOn(provider, 'beginIndexRequest').and.callThrough();
-                provider.pendingRequests = 0;
-                provider.idsToIndex = ['a', 'b', 'c'];
-                provider.MAX_CONCURRENT_REQUESTS = 10;
-                provider.keepIndexing();
-                expect(provider.beginIndexRequest).toHaveBeenCalled();
-                expect(provider.beginIndexRequest.calls.count()).toBe(3);
-            });
-
-            it('does not index when at capacity', function () {
-                spyOn(provider, 'beginIndexRequest');
-                provider.pendingRequests = 10;
-                provider.idsToIndex.push('a');
-                provider.MAX_CONCURRENT_REQUESTS = 10;
-                provider.keepIndexing();
-                expect(provider.beginIndexRequest).not.toHaveBeenCalled();
-            });
-
-            it('does not index when no ids to index', function () {
-                spyOn(provider, 'beginIndexRequest');
-                provider.pendingRequests = 0;
-                provider.MAX_CONCURRENT_REQUESTS = 10;
-                provider.keepIndexing();
-                expect(provider.beginIndexRequest).not.toHaveBeenCalled();
-            });
-        });
-
-        describe('index', function () {
-            it('sends index message to worker', function () {
-                var id = 'anId',
-                    model = {};
-
-                provider.index(id, model);
-                expect(worker.postMessage).toHaveBeenCalledWith({
-                    request: 'index',
-                    id: id,
-                    model: model
-                });
-            });
-
-            it('schedules composed ids for indexing', function () {
-                var id = 'anId',
-                    model = {composition: ['abc', 'def']},
-                    resolve,
-                    promise = new Promise(function (r) {
-                        resolve = r;
-                    });
-
-                provider.scheduleForIndexing.and.callFake(resolve);
-
-                provider.index(id, model);
-
-                expect(compositionProvider.appliesTo).toHaveBeenCalledWith({
-                    identifier: {
-                        key: 'anId',
-                        namespace: ''
-                    },
-                    composition: [jasmine.any(Object), jasmine.any(Object)]
-                });
-
-                expect(compositionProvider.load).toHaveBeenCalledWith({
-                    identifier: {
-                        key: 'anId',
-                        namespace: ''
-                    },
-                    composition: [jasmine.any(Object), jasmine.any(Object)]
-                });
-
-                return promise.then(function () {
-                    expect(provider.scheduleForIndexing)
-                        .toHaveBeenCalledWith('abc');
-                    expect(provider.scheduleForIndexing)
-                        .toHaveBeenCalledWith('def');
-
-                });
-            });
-
-            it('does not index ROOT, but checks composition', function () {
-                var id = 'ROOT',
-                    model = {};
-
-                provider.index(id, model);
-                expect(worker.postMessage).not.toHaveBeenCalled();
-                expect(compositionProvider.appliesTo).toHaveBeenCalledWith({
-                    identifier: {
-                        key: 'ROOT',
-                        namespace: ''
-                    }
-                });
-            });
-        });
-
-        describe('beginIndexRequest', function () {
-
-            beforeEach(function () {
-                provider.pendingRequests = 0;
-                provider.pendingIds = {'abc': true};
-                provider.idsToIndex = ['abc'];
-                models.abc = {};
-                spyOn(provider, 'index');
-            });
-
-            it('removes items from queue', function () {
-                provider.beginIndexRequest();
-                expect(provider.idsToIndex.length).toBe(0);
-            });
-
-            it('tracks number of pending requests', function () {
-                provider.beginIndexRequest();
-                expect(provider.pendingRequests).toBe(1);
-
-                return waitsFor(function () {
-                    return provider.pendingRequests === 0;
-                }).then(function () {
-                    expect(provider.pendingRequests).toBe(0);
-                });
-            });
-
-            it('indexes objects', function () {
-                provider.beginIndexRequest();
-
-                return waitsFor(function () {
-                    return provider.pendingRequests === 0;
-                }).then(function () {
-                    expect(provider.index)
-                        .toHaveBeenCalledWith('abc', models.abc);
-                });
-            });
-
-            function waitsFor(latchFunction) {
-                return new Promise(function (resolve, reject) {
-                    var maxWait = 2000;
-                    var start = Date.now();
-
-                    checkLatchFunction();
-
-                    function checkLatchFunction() {
-                        var now = Date.now();
-                        var elapsed = now - start;
-
-                        if (latchFunction()) {
-                            resolve();
-                        } else if (elapsed >= maxWait) {
-                            reject("Timeout waiting for latch function to be true");
-                        } else {
-                            setTimeout(checkLatchFunction);
-                        }
-                    }
-                });
-            }
-        });
-
-        it('can dispatch searches to worker', function () {
-            spyOn(provider, 'makeQueryId').and.returnValue(428);
-            expect(provider.dispatchSearch('searchTerm', 100))
-                .toBe(428);
-
-            expect(worker.postMessage).toHaveBeenCalledWith({
-                request: 'search',
-                input: 'searchTerm',
-                maxResults: 100,
-                queryId: 428
-            });
-        });
-
-        it('can generate queryIds', function () {
-            expect(provider.makeQueryId()).toEqual(jasmine.any(Number));
-        });
-
-        it('can query for terms', function () {
-            var deferred = {promise: {}};
-            spyOn(provider, 'dispatchSearch').and.returnValue(303);
-            $q.defer.and.returnValue(deferred);
-
-            expect(provider.query('someTerm', 100)).toBe(deferred.promise);
-            expect(provider.pendingQueries[303]).toBe(deferred);
-        });
-
-        describe('onWorkerMessage', function () {
-            var pendingQuery;
-            beforeEach(function () {
-                pendingQuery = jasmine.createSpyObj(
-                    'pendingQuery',
-                    ['resolve']
-                );
-                provider.pendingQueries[143] = pendingQuery;
-            });
-
-            it('resolves pending searches', function () {
-                provider.onWorkerMessage({
-                    data: {
-                        request: 'search',
-                        total: 2,
-                        results: [
-                            {
-                                item: {
-                                    id: 'abc',
-                                    model: {id: 'abc'}
-                                },
-                                matchCount: 4
-                            },
-                            {
-                                item: {
-                                    id: 'def',
-                                    model: {id: 'def'}
-                                },
-                                matchCount: 2
-                            }
-                        ],
-                        queryId: 143
-                    }
-                });
-
-                expect(pendingQuery.resolve)
-                    .toHaveBeenCalledWith({
-                        total: 2,
-                        hits: [{
-                            id: 'abc',
-                            model: {id: 'abc'},
-                            score: 4
-                        }, {
-                            id: 'def',
-                            model: {id: 'def'},
-                            score: 2
-                        }]
-                    });
-
-                expect(provider.pendingQueries[143]).not.toBeDefined();
-
-            });
-
-        });
-
-    });
-});
diff --git a/platform/search/test/services/GenericSearchWorkerSpec.js b/platform/search/test/services/GenericSearchWorkerSpec.js
deleted file mode 100644
index 8bd02493f7e..00000000000
--- a/platform/search/test/services/GenericSearchWorkerSpec.js
+++ /dev/null
@@ -1,209 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * 'License'); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an 'AS IS' BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- *  SearchSpec. Created by shale on 07/31/2015.
- */
-define([
-    "raw-loader!../../src/services/GenericSearchWorker.js"
-], function (
-    GenericSearchWorkerText
-) {
-
-    var WORKER_FILE = URL.createObjectURL(new Blob(
-        [GenericSearchWorkerText],
-        {type: 'application/javascript'}
-    ));
-
-    describe('GenericSearchWorker', function () {
-        // If this test fails, make sure this path is correct
-        var worker,
-            objectX,
-            objectY,
-            objectZ,
-            itemsToIndex;
-
-        beforeEach(function () {
-            worker = new Worker(WORKER_FILE);
-
-            objectX = {
-                id: 'x',
-                model: {name: 'object xx'}
-            };
-            objectY = {
-                id: 'y',
-                model: {name: 'object yy'}
-            };
-            objectZ = {
-                id: 'z',
-                model: {name: 'object zz'}
-            };
-            itemsToIndex = [
-                objectX,
-                objectY,
-                objectZ
-            ];
-
-            itemsToIndex.forEach(function (item) {
-                worker.postMessage({
-                    request: 'index',
-                    id: item.id,
-                    model: item.model
-                });
-            });
-        });
-
-        afterEach(function () {
-            worker.terminate();
-        });
-
-        it('returns search results for partial term matches', function (done) {
-            worker.addEventListener('message', function (message) {
-                var data = message.data;
-                expect(data.request).toBe('search');
-                expect(data.total).toBe(3);
-                expect(data.queryId).toBe(123);
-                expect(data.results.length).toBe(3);
-                expect(data.results[0].item.id).toBe('x');
-                expect(data.results[0].item.model).toEqual(objectX.model);
-                expect(data.results[0].matchCount).toBe(1);
-                expect(data.results[1].item.id).toBe('y');
-                expect(data.results[1].item.model).toEqual(objectY.model);
-                expect(data.results[1].matchCount).toBe(1);
-                expect(data.results[2].item.id).toBe('z');
-                expect(data.results[2].item.model).toEqual(objectZ.model);
-                expect(data.results[2].matchCount).toBe(1);
-
-                done();
-            });
-
-            worker.postMessage({
-                request: 'search',
-                input: 'obj',
-                maxResults: 100,
-                queryId: 123
-            });
-        });
-
-        it('scores exact term matches higher', function (done) {
-            worker.addEventListener('message', function (message) {
-                expect(message.data.queryId).toBe(234);
-                expect(message.data.results.length).toBe(3);
-                expect(message.data.results[0].item.id).toBe('x');
-                expect(message.data.results[0].matchCount).toBe(1.5);
-
-                done();
-            });
-
-            worker.postMessage({
-                request: 'search',
-                input: 'object',
-                maxResults: 100,
-                queryId: 234
-            });
-        });
-
-        it('can find partial term matches', function (done) {
-            worker.addEventListener('message', function (message) {
-                expect(message.data.queryId).toBe(345);
-                expect(message.data.results.length).toBe(1);
-                expect(message.data.results[0].item.id).toBe('x');
-                expect(message.data.results[0].matchCount).toBe(1);
-
-                done();
-            });
-
-            worker.postMessage({
-                request: 'search',
-                input: 'x',
-                maxResults: 100,
-                queryId: 345
-            });
-        });
-
-        it('matches individual terms', function (done) {
-            worker.addEventListener('message', function (message) {
-                var data = message.data;
-
-                expect(data.queryId).toBe(456);
-                expect(data.results.length).toBe(3);
-                expect(data.results[0].item.id).toBe('x');
-                expect(data.results[0].matchCount).toBe(1);
-                expect(data.results[1].item.id).toBe('y');
-                expect(data.results[1].matchCount).toBe(1);
-                expect(data.results[2].item.id).toBe('z');
-                expect(data.results[1].matchCount).toBe(1);
-
-                done();
-            });
-
-            worker.postMessage({
-                request: 'search',
-                input: 'x y z',
-                maxResults: 100,
-                queryId: 456
-            });
-        });
-
-        it('scores exact matches highest', function (done) {
-            worker.addEventListener('message', function (message) {
-                var data = message.data;
-
-                expect(data.queryId).toBe(567);
-                expect(data.results.length).toBe(3);
-                expect(data.results[0].item.id).toBe('x');
-                expect(data.results[0].matchCount).toBe(103);
-                expect(data.results[1].matchCount).toBe(1.5);
-                expect(data.results[2].matchCount).toBe(1.5);
-
-                done();
-            });
-
-            worker.postMessage({
-                request: 'search',
-                input: 'object xx',
-                maxResults: 100,
-                queryId: 567
-            });
-        });
-
-        it('scores multiple term match above single match', function () {
-            worker.addEventListener('message', function (message) {
-                var data = message.data;
-
-                expect(data.queryId).toBe(678);
-                expect(data.results.length).toBe(3);
-                expect(data.results[0].item.id).toBe('x');
-                expect(data.results[0].matchCount).toBe(2);
-                expect(data.results[1].matchCount).toBe(1);
-                expect(data.results[2].matchCount).toBe(1);
-            });
-
-            worker.postMessage({
-                request: 'search',
-                input: 'obj x',
-                maxResults: 100,
-                queryId: 678
-            });
-        });
-    });
-});
diff --git a/platform/search/test/services/SearchAggregatorSpec.js b/platform/search/test/services/SearchAggregatorSpec.js
deleted file mode 100644
index fe4206521b6..00000000000
--- a/platform/search/test/services/SearchAggregatorSpec.js
+++ /dev/null
@@ -1,259 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- *  SearchSpec. Created by shale on 07/31/2015.
- */
-define([
-    "../../src/services/SearchAggregator"
-], function (SearchAggregator) {
-
-    xdescribe("SearchAggregator", function () {
-        var $q,
-            objectService,
-            providers,
-            aggregator;
-
-        beforeEach(function () {
-            $q = jasmine.createSpyObj(
-                '$q',
-                ['all']
-            );
-            $q.all.and.returnValue(Promise.resolve([]));
-            objectService = jasmine.createSpyObj(
-                'objectService',
-                ['getObjects']
-            );
-            providers = [];
-            aggregator = new SearchAggregator($q, objectService, providers);
-        });
-
-        it("has a fudge factor", function () {
-            expect(aggregator.FUDGE_FACTOR).toBe(5);
-        });
-
-        it("has default max results", function () {
-            expect(aggregator.DEFAULT_MAX_RESULTS).toBe(100);
-        });
-
-        it("can order model results by score", function () {
-            var modelResults = {
-                    hits: [
-                        {score: 1},
-                        {score: 23},
-                        {score: 11}
-                    ]
-                },
-                sorted = aggregator.orderByScore(modelResults);
-
-            expect(sorted.hits).toEqual([
-                {score: 23},
-                {score: 11},
-                {score: 1}
-            ]);
-        });
-
-        it('filters results without a function', function () {
-            var modelResults = {
-                    hits: [
-                        {thing: 1},
-                        {thing: 2}
-                    ],
-                    total: 2
-                },
-                filtered = aggregator.applyFilter(modelResults);
-
-            expect(filtered.hits).toEqual([
-                {thing: 1},
-                {thing: 2}
-            ]);
-
-            expect(filtered.total).toBe(2);
-        });
-
-        it('filters results with a function', function () {
-            const modelResults = {
-                hits: [
-                    {model: {thing: 1}},
-                    {model: {thing: 2}},
-                    {model: {thing: 3}}
-                ],
-                total: 3
-            };
-            let filtered = aggregator.applyFilter(modelResults, filterFunc);
-
-            function filterFunc(model) {
-                return model.thing < 2;
-            }
-
-            expect(filtered.hits).toEqual([
-                {model: {thing: 1}}
-            ]);
-            expect(filtered.total).toBe(1);
-        });
-
-        it('can remove duplicates', function () {
-            var modelResults = {
-                    hits: [
-                        {id: 15},
-                        {id: 23},
-                        {id: 14},
-                        {id: 23}
-                    ],
-                    total: 4
-                },
-                deduped = aggregator.removeDuplicates(modelResults);
-
-            expect(deduped.hits).toEqual([
-                {id: 15},
-                {id: 23},
-                {id: 14}
-            ]);
-            expect(deduped.total).toBe(3);
-        });
-
-        it('can convert model results to object results', function () {
-            var modelResults = {
-                    hits: [
-                        {
-                            id: 123,
-                            score: 5
-                        },
-                        {
-                            id: 234,
-                            score: 1
-                        }
-                    ],
-                    total: 2
-                },
-                objects = {
-                    123: '123-object-hey',
-                    234: '234-object-hello'
-                };
-
-            objectService.getObjects.and.returnValue(Promise.resolve(objects));
-
-            return aggregator
-                .asObjectResults(modelResults)
-                .then(function (objectResults) {
-                    expect(objectResults).toEqual({
-                        hits: [
-                            {
-                                id: 123,
-                                score: 5,
-                                object: '123-object-hey'
-                            },
-                            {
-                                id: 234,
-                                score: 1,
-                                object: '234-object-hello'
-                            }
-                        ],
-                        total: 2
-                    });
-                });
-        });
-
-        it('can send queries to providers', function () {
-            var provider = jasmine.createSpyObj(
-                'provider',
-                ['query']
-            );
-            provider.query.and.returnValue('i prooomise!');
-            providers.push(provider);
-
-            aggregator.query('find me', 123, 'filter');
-            expect(provider.query)
-                .toHaveBeenCalledWith(
-                    'find me',
-                    123 * aggregator.FUDGE_FACTOR
-                );
-            expect($q.all).toHaveBeenCalledWith(['i prooomise!']);
-        });
-
-        it('supplies max results when none is provided', function () {
-            var provider = jasmine.createSpyObj(
-                'provider',
-                ['query']
-            );
-            providers.push(provider);
-            aggregator.query('find me');
-            expect(provider.query).toHaveBeenCalledWith(
-                'find me',
-                aggregator.DEFAULT_MAX_RESULTS * aggregator.FUDGE_FACTOR
-            );
-        });
-
-        it('can combine responses from multiple providers', function () {
-            var providerResponses = [
-                {
-                    hits: [
-                        'oneHit',
-                        'twoHit'
-                    ],
-                    total: 2
-                },
-                {
-                    hits: [
-                        'redHit',
-                        'blueHit',
-                        'by',
-                        'Pete'
-                    ],
-                    total: 4
-                }
-            ];
-
-            $q.all.and.returnValue(Promise.resolve(providerResponses));
-            spyOn(aggregator, 'orderByScore').and.returnValue('orderedByScore!');
-            spyOn(aggregator, 'applyFilter').and.returnValue('filterApplied!');
-            spyOn(aggregator, 'removeDuplicates')
-                .and.returnValue('duplicatesRemoved!');
-            spyOn(aggregator, 'asObjectResults').and.returnValue('objectResults');
-
-            return aggregator
-                .query('something', 10, 'filter')
-                .then(function (objectResults) {
-                    expect(aggregator.orderByScore).toHaveBeenCalledWith({
-                        hits: [
-                            'oneHit',
-                            'twoHit',
-                            'redHit',
-                            'blueHit',
-                            'by',
-                            'Pete'
-                        ],
-                        total: 6
-                    });
-                    expect(aggregator.applyFilter)
-                        .toHaveBeenCalledWith('orderedByScore!', 'filter');
-                    expect(aggregator.removeDuplicates)
-                        .toHaveBeenCalledWith('filterApplied!');
-                    expect(aggregator.asObjectResults)
-                        .toHaveBeenCalledWith('duplicatesRemoved!');
-
-                    expect(objectResults).toBe('objectResults');
-                });
-        });
-
-    });
-});
diff --git a/platform/status/README.md b/platform/status/README.md
deleted file mode 100644
index 4d8cb7e6fa9..00000000000
--- a/platform/status/README.md
+++ /dev/null
@@ -1,2 +0,0 @@
-Facilitates tracking states associated with specific domain
-objects.
diff --git a/platform/status/bundle.js b/platform/status/bundle.js
deleted file mode 100644
index ce44561d7f9..00000000000
--- a/platform/status/bundle.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/StatusRepresenter",
-    "./src/StatusCapability",
-    "./src/StatusService"
-], function (
-    StatusRepresenter,
-    StatusCapability,
-    StatusService
-) {
-
-    return {
-        name: "platform/status",
-        definition: {
-            "extensions": {
-                "representers": [
-                    {
-                        "implementation": StatusRepresenter
-                    }
-                ],
-                "capabilities": [
-                    {
-                        "key": "status",
-                        "implementation": StatusCapability,
-                        "depends": [
-                            "statusService"
-                        ]
-                    }
-                ],
-                "services": [
-                    {
-                        "key": "statusService",
-                        "implementation": StatusService,
-                        "depends": [
-                            "topic"
-                        ]
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/status/src/StatusCapability.js b/platform/status/src/StatusCapability.js
deleted file mode 100644
index 5f959da6680..00000000000
--- a/platform/status/src/StatusCapability.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * The `status` capability can be used to attach information
-         * about the state of a domain object, expressed as simple
-         * string flags.
-         *
-         * Representations of domain objects will also receive CSS
-         * classes which reflect their current status.
-         * (@see platform/status.StatusRepresenter)
-         *
-         * @param {platform/status.StatusService} statusService
-         *        the service which will track domain object status
-         *        within the application.
-         * @param {DomainObject} the domain object whose status will
-         *        be tracked.
-         * @constructor
-         * @memberof platform/status
-         */
-        function StatusCapability(statusService, domainObject) {
-            this.statusService = statusService;
-            this.domainObject = domainObject;
-        }
-
-        /**
-         * List all status flags currently set for this domain object.
-         * @returns {string[]} all current status flags.
-         */
-        StatusCapability.prototype.list = function () {
-            return this.statusService.listStatuses(this.domainObject.getId());
-        };
-
-        /**
-         * Check if a status flag is currently set for this domain object.
-         * @param {string} status the status to get
-         * @returns {boolean} true if the flag is present, otherwise false
-         */
-        StatusCapability.prototype.get = function (status) {
-            return this.list().indexOf(status) !== -1;
-        };
-
-        /**
-         * Set a status flag on this domain object.
-         * @param {string} status the status to set
-         * @param {boolean} state true if the domain object should
-         *        possess this status, false if it should not
-         */
-        StatusCapability.prototype.set = function (status, state) {
-            return this.statusService.setStatus(
-                this.domainObject.getId(),
-                status,
-                state
-            );
-        };
-
-        /**
-         * Listen for changes in this domain object's status.
-         * @param {Function} callback function to invoke on changes;
-         *        called with the new status of the domain object, as an
-         *        array of strings
-         * @returns {Function} a function which can be used to stop
-         *          listening to status changes for this domain object.
-         */
-        StatusCapability.prototype.listen = function (callback) {
-            return this.statusService.listen(
-                this.domainObject.getId(),
-                callback
-            );
-        };
-
-        return StatusCapability;
-
-    }
-);
diff --git a/platform/status/src/StatusConstants.js b/platform/status/src/StatusConstants.js
deleted file mode 100644
index 514a2158e18..00000000000
--- a/platform/status/src/StatusConstants.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-define({
-    CSS_CLASS_PREFIX: 's-status-',
-    TOPIC_PREFIX: 'status:'
-});
diff --git a/platform/status/src/StatusRepresenter.js b/platform/status/src/StatusRepresenter.js
deleted file mode 100644
index bdb118c901a..00000000000
--- a/platform/status/src/StatusRepresenter.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['./StatusConstants'],
-    function (StatusConstants) {
-
-        var STATUS_CLASS_PREFIX = StatusConstants.CSS_CLASS_PREFIX;
-
-        /**
-         * Adds/removes CSS classes to `mct-representation`s to reflect the
-         * current status of represented domain objects, as reported by
-         * their `status` capability.
-         *
-         * Statuses are prefixed with `s-status-` to build CSS class names.
-         * As such, when a domain object has the status "pending", its
-         * representations will have the CSS class `s-status-pending`.
-         *
-         * @param {angular.Scope} scope the representation's scope object
-         * @param element the representation's jqLite-wrapped DOM element
-         * @implements {Representer}
-         * @constructor
-         * @memberof platform/status
-         */
-        function StatusRepresenter(scope, element) {
-            this.element = element;
-            this.lastClasses = [];
-        }
-
-        /**
-         * Remove any status-related classes from this representation.
-         * @private
-         */
-        StatusRepresenter.prototype.clearClasses = function () {
-            var element = this.element;
-            this.lastClasses.forEach(function (c) {
-                element.removeClass(c);
-            });
-        };
-
-        StatusRepresenter.prototype.represent = function (representation, domainObject) {
-            var self = this,
-                statusCapability = domainObject.getCapability('status');
-
-            function updateStatus(flags) {
-                var newClasses = flags.map(function (flag) {
-                    return STATUS_CLASS_PREFIX + flag;
-                });
-
-                self.clearClasses();
-
-                newClasses.forEach(function (c) {
-                    self.element.addClass(c);
-                });
-
-                self.lastClasses = newClasses;
-            }
-
-            updateStatus(statusCapability.list());
-            this.unlisten = statusCapability.listen(updateStatus);
-        };
-
-        StatusRepresenter.prototype.destroy = function () {
-            this.clearClasses();
-            if (this.unlisten) {
-                this.unlisten();
-                this.unlisten = undefined;
-            }
-        };
-
-        return StatusRepresenter;
-
-    }
-);
diff --git a/platform/status/src/StatusService.js b/platform/status/src/StatusService.js
deleted file mode 100644
index 7380fa54e75..00000000000
--- a/platform/status/src/StatusService.js
+++ /dev/null
@@ -1,91 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['./StatusConstants'],
-    function (StatusConstants) {
-
-        var STATUS_PREFIX = StatusConstants.TOPIC_PREFIX;
-
-        /**
-         * The `statusService` maintains information about the current
-         * status of specific domain objects within the system. Status
-         * is represented as string flags which are present when a
-         * domain object possesses that status, and false when it does
-         * not.
-         *
-         * @param {platform/core.Topic} topic the `topic` service, used
-         *        to create/use named listeners.
-         * @constructor
-         * @memberof platform/status
-         */
-        function StatusService(topic) {
-            this.statusTable = {};
-            this.topic = topic;
-        }
-
-        /**
-         * Get all status flags currently set for a domain object.
-         * @param {string} id the identifier of the domain object
-         * @returns {string[]} an array containing all status flags currently
-         *          applicable to the object with this identifier
-         */
-        StatusService.prototype.listStatuses = function (id) {
-            return this.statusTable[id] || [];
-        };
-
-        /**
-         * Set a status flag for a domain object.
-         * @param {string} id the identifier of the domain object
-         * @param {string} status the status to set
-         * @param {boolean} state true if the domain object should
-         *        possess this status, false if it should not
-         */
-        StatusService.prototype.setStatus = function (id, status, state) {
-            this.statusTable[id] = this.statusTable[id] || [];
-            this.statusTable[id] = this.statusTable[id].filter(function (s) {
-                return s !== status;
-            });
-            if (state) {
-                this.statusTable[id].push(status);
-            }
-
-            this.topic(STATUS_PREFIX + id).notify(this.statusTable[id]);
-        };
-
-        /**
-         * Listen for changes in a domain object's status.
-         * @param {string} id the identifier of the domain object
-         * @param {Function} callback function to invoke on changes;
-         *        called with the new status of the domain object, as an
-         *        array of strings
-         * @returns {Function} a function which can be used to stop
-         *          listening to status changes for this domain object.
-         */
-        StatusService.prototype.listen = function (id, callback) {
-            return this.topic(STATUS_PREFIX + id).listen(callback);
-        };
-
-        return StatusService;
-
-    }
-);
diff --git a/platform/status/test/StatusCapabilitySpec.js b/platform/status/test/StatusCapabilitySpec.js
deleted file mode 100644
index 539d17f546d..00000000000
--- a/platform/status/test/StatusCapabilitySpec.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/StatusCapability"],
-    function (StatusCapability) {
-
-        describe("The status capability", function () {
-            var mockStatusService,
-                mockDomainObject,
-                mockUnlisten,
-                testId,
-                testStatusFlags,
-                capability;
-
-            beforeEach(function () {
-                testId = "some-id";
-                testStatusFlags = ['a', 'b', 'c'];
-
-                mockStatusService = jasmine.createSpyObj(
-                    'statusService',
-                    ['listen', 'setStatus', 'listStatuses']
-                );
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getId', 'getCapability', 'getModel']
-                );
-                mockUnlisten = jasmine.createSpy('unlisten');
-
-                mockStatusService.listen.and.returnValue(mockUnlisten);
-                mockStatusService.listStatuses.and.returnValue(testStatusFlags);
-                mockDomainObject.getId.and.returnValue(testId);
-
-                capability = new StatusCapability(
-                    mockStatusService,
-                    mockDomainObject
-                );
-            });
-
-            it("sets status with the statusService", function () {
-                var testStatus = "some-test-status";
-                capability.set(testStatus, true);
-                expect(mockStatusService.setStatus)
-                    .toHaveBeenCalledWith(testId, testStatus, true);
-                capability.set(testStatus, false);
-                expect(mockStatusService.setStatus)
-                    .toHaveBeenCalledWith(testId, testStatus, false);
-            });
-
-            it("gets status from the statusService", function () {
-                expect(capability.list()).toBe(testStatusFlags);
-            });
-
-            it("listens to changes from the statusService", function () {
-                var mockCallback = jasmine.createSpy();
-                expect(capability.listen(mockCallback))
-                    .toBe(mockUnlisten);
-                expect(mockStatusService.listen)
-                    .toHaveBeenCalledWith(testId, mockCallback);
-            });
-
-            it("allows statuses to be checked individually", function () {
-                expect(capability.get('some-unset-status')).toBe(false);
-                expect(capability.get(testStatusFlags[0])).toBe(true);
-            });
-        });
-    }
-);
diff --git a/platform/status/test/StatusRepresenterSpec.js b/platform/status/test/StatusRepresenterSpec.js
deleted file mode 100644
index cf4bec92f81..00000000000
--- a/platform/status/test/StatusRepresenterSpec.js
+++ /dev/null
@@ -1,116 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/StatusRepresenter", "../src/StatusConstants"],
-    function (StatusRepresenter, StatusConstants) {
-
-        describe("The status representer", function () {
-            var mockScope,
-                mockElement,
-                testRepresentation,
-                mockDomainObject,
-                mockStatusCapability,
-                mockUnlisten,
-                elementClasses,
-                testStatusFlags,
-                representer;
-
-            function verifyClasses() {
-                expect(Object.keys(elementClasses).sort())
-                    .toEqual(testStatusFlags.map(function (s) {
-                        return StatusConstants.CSS_CLASS_PREFIX + s;
-                    }).sort());
-            }
-
-            function updateStatus(newFlags) {
-                testStatusFlags = newFlags;
-                mockStatusCapability.get.and.returnValue(newFlags);
-                mockStatusCapability.listen.calls.mostRecent()
-                    .args[0](newFlags);
-            }
-
-            beforeEach(function () {
-                testStatusFlags = ['x', 'y', 'z'];
-
-                mockScope = {};
-                mockElement = jasmine.createSpyObj('element', [
-                    'addClass',
-                    'removeClass'
-                ]);
-                testRepresentation = { key: "someKey" };
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getModel', 'getId', 'getCapability']
-                );
-                mockStatusCapability = jasmine.createSpyObj(
-                    'status',
-                    ['list', 'get', 'set', 'listen']
-                );
-                mockUnlisten = jasmine.createSpy();
-
-                elementClasses = {};
-
-                mockElement.addClass.and.callFake(function (c) {
-                    elementClasses[c] = true;
-                });
-                mockElement.removeClass.and.callFake(function (c) {
-                    delete elementClasses[c];
-                });
-
-                mockStatusCapability.list.and.returnValue(testStatusFlags);
-                mockStatusCapability.listen.and.returnValue(mockUnlisten);
-
-                mockDomainObject.getCapability.and.callFake(function (c) {
-                    return c === 'status' && mockStatusCapability;
-                });
-
-                representer = new StatusRepresenter(mockScope, mockElement);
-                representer.represent(testRepresentation, mockDomainObject);
-            });
-
-            it("listens for status changes", function () {
-                expect(mockStatusCapability.listen)
-                    .toHaveBeenCalledWith(jasmine.any(Function));
-            });
-
-            it("initially sets classes to reflect status", verifyClasses);
-
-            it("changes classes on status change callbacks", function () {
-                updateStatus(['a', 'x', '123']);
-                verifyClasses();
-            });
-
-            it("stops listening when destroyed", function () {
-                expect(mockUnlisten).not.toHaveBeenCalled();
-                representer.destroy();
-                expect(mockUnlisten).toHaveBeenCalled();
-            });
-
-            it("removes status classes when destroyed", function () {
-                expect(elementClasses).not.toEqual({});
-                representer.destroy();
-                expect(elementClasses).toEqual({});
-            });
-        });
-    }
-);
diff --git a/platform/status/test/StatusServiceSpec.js b/platform/status/test/StatusServiceSpec.js
deleted file mode 100644
index efbdf27961f..00000000000
--- a/platform/status/test/StatusServiceSpec.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/StatusService"],
-    function (StatusService) {
-
-        describe("The status service", function () {
-            var mockTopic,
-                mockTopicInstance,
-                mockUnlisten,
-                mockCallback,
-                testId,
-                testStatus,
-                statusService;
-
-            beforeEach(function () {
-                testId = "some-domain-object-identifier";
-                testStatus = "test-status";
-
-                mockTopic = jasmine.createSpy('topic');
-                mockTopicInstance = jasmine.createSpyObj(
-                    'topicInstance',
-                    ['notify', 'listen']
-                );
-                mockUnlisten = jasmine.createSpy('unlisten');
-                mockCallback = jasmine.createSpy('callback');
-
-                mockTopic.and.returnValue(mockTopicInstance);
-                mockTopicInstance.listen.and.returnValue(mockUnlisten);
-
-                statusService = new StatusService(mockTopic);
-            });
-
-            it("initially contains no flags for an object", function () {
-                expect(statusService.listStatuses(testId)).toEqual([]);
-            });
-
-            it("stores and clears status flags", function () {
-                statusService.setStatus(testId, testStatus, true);
-                expect(statusService.listStatuses(testId)).toEqual([testStatus]);
-                statusService.setStatus(testId, testStatus, false);
-                expect(statusService.listStatuses(testId)).toEqual([]);
-            });
-
-            it("uses topic to listen for changes", function () {
-                expect(statusService.listen(testId, mockCallback))
-                    .toEqual(mockUnlisten);
-                expect(mockTopic)
-                    .toHaveBeenCalledWith(jasmine.any(String));
-                // Just care that the topic was somehow unique to the object
-                expect(mockTopic.calls.mostRecent().args[0].indexOf(testId))
-                    .not.toEqual(-1);
-            });
-
-            it("notifies listeners of changes", function () {
-                statusService.setStatus(testId, testStatus, true);
-                expect(mockTopicInstance.notify)
-                    .toHaveBeenCalledWith([testStatus]);
-                statusService.setStatus(testId, testStatus, false);
-                expect(mockTopicInstance.notify)
-                    .toHaveBeenCalledWith([]);
-
-                expect(mockTopic)
-                    .toHaveBeenCalledWith(jasmine.any(String));
-                // Just care that the topic was somehow unique to the object
-                expect(mockTopic.calls.mostRecent().args[0].indexOf(testId))
-                    .not.toEqual(-1);
-            });
-
-        });
-    }
-);
diff --git a/platform/telemetry/README.md b/platform/telemetry/README.md
deleted file mode 100644
index dfcf85e2c90..00000000000
--- a/platform/telemetry/README.md
+++ /dev/null
@@ -1,2 +0,0 @@
-This bundle is responsible for introducing a reusable infrastructure 
-and set of APIs for using time-series data in Open MCT.
diff --git a/platform/telemetry/bundle.js b/platform/telemetry/bundle.js
deleted file mode 100644
index 8edd0d7a314..00000000000
--- a/platform/telemetry/bundle.js
+++ /dev/null
@@ -1,130 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    "./src/TelemetryAggregator",
-    "./src/TelemetryController",
-    "./src/TelemetryCapability",
-    "./src/TelemetryFormatter",
-    "./src/TelemetrySubscriber",
-    "./src/TelemetryHandler"
-], function (
-    TelemetryAggregator,
-    TelemetryController,
-    TelemetryCapability,
-    TelemetryFormatter,
-    TelemetrySubscriber,
-    TelemetryHandler
-) {
-
-    return {
-        name: "platform/telemetry",
-        definition: {
-            "name": "Data bundle",
-            "description": "Interfaces and infrastructure for real-time and historical data",
-            "configuration": {
-                "paths": {
-                    "moment": "moment.min"
-                },
-                "shim": {
-                    "moment": {
-                        "exports": "moment"
-                    }
-                }
-            },
-            "extensions": {
-                "components": [
-                    {
-                        "provides": "telemetryService",
-                        "type": "aggregator",
-                        "implementation": TelemetryAggregator,
-                        "depends": [
-                            "$q"
-                        ]
-                    }
-                ],
-                "controllers": [
-                    {
-                        "key": "TelemetryController",
-                        "implementation": TelemetryController,
-                        "depends": [
-                            "$scope",
-                            "$q",
-                            "$timeout",
-                            "$log"
-                        ]
-                    }
-                ],
-                "capabilities": [
-                    {
-                        "key": "telemetry",
-                        "implementation": TelemetryCapability,
-                        "depends": [
-                            "openmct",
-                            "$injector",
-                            "$q",
-                            "$log"
-                        ]
-                    }
-                ],
-                "services": [
-                    {
-                        "key": "telemetryFormatter",
-                        "implementation": TelemetryFormatter,
-                        "depends": [
-                            "formatService",
-                            "DEFAULT_TIME_FORMAT"
-                        ]
-                    },
-                    {
-                        "key": "telemetrySubscriber",
-                        "implementation": TelemetrySubscriber,
-                        "depends": [
-                            "$q",
-                            "$timeout"
-                        ]
-                    },
-                    {
-                        "key": "telemetryHandler",
-                        "implementation": TelemetryHandler,
-                        "depends": [
-                            "$q",
-                            "telemetrySubscriber"
-                        ]
-                    }
-                ],
-                "licenses": [
-                    {
-                        "name": "Moment.js",
-                        "version": "2.11.1",
-                        "author": "Tim Wood, Iskren Chernev, Moment.js contributors",
-                        "description": "Time/date parsing/formatting",
-                        "website": "http://momentjs.com",
-                        "copyright": "Copyright (c) 2011-2014 Tim Wood, Iskren Chernev, Moment.js contributors",
-                        "license": "license-mit",
-                        "link": "https://raw.githubusercontent.com/moment/moment/develop/LICENSE"
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/platform/telemetry/src/TelemetryAggregator.js b/platform/telemetry/src/TelemetryAggregator.js
deleted file mode 100644
index 444c7120a5f..00000000000
--- a/platform/telemetry/src/TelemetryAggregator.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * This bundle provides infrastructure and utility services for handling
- * telemetry data.
- * @namespace platform/telemetry
- */
-define(
-    [],
-    function () {
-
-        /**
-         * Describes a request for telemetry data. Note that responses
-         * may contain either a sub- or superset of the requested data.
-         * @typedef TelemetryRequest
-         * @property {string} source an identifier for the relevant
-         *           source of telemetry data
-         * @property {string} key an identifier for the specific
-         *           series of telemetry data provided by that source
-         * @property {number} [start] the earliest domain value of
-         *           interest for that telemetry data; for time-based
-         *           domains, this is in milliseconds since the start
-         *           of 1970
-         * @property {number} [end] the latest domain value of interest
-         *           for that telemetry data; for time-based domains,
-         *           this is in milliseconds since 1970
-         * @property {string} [domain] the domain for the query; if
-         *           omitted, this will be whatever the "normal"
-         *           domain is for a given telemetry series (the
-         *           first domain from its metadata)
-         * @property {number} [size] if set, indicates the maximum number
-         *           of data points of interest for this request (more
-         *           recent domain values will be preferred)
-         */
-
-        /**
-         * Request telemetry data.
-         * @param {TelemetryRequest[]} requests and array of
-         *        requests to be handled
-         * @returns {Promise} a promise for telemetry data
-         *          which may (or may not, depending on
-         *          availability) satisfy the requests
-         * @method TelemetryService#requestTelemetry
-         */
-        /**
-         * Subscribe to streaming updates to telemetry data.
-         * The provided callback will be invoked as new
-         * telemetry becomes available; as an argument, it
-         * will receive an object of key-value pairs, where
-         * keys are source identifiers and values are objects
-         * of key-value pairs, where keys are point identifiers
-         * and values are TelemetrySeries objects containing
-         * the latest streaming telemetry.
-         * @param {Function} callback the callback to invoke
-         * @param {TelemetryRequest[]} requests an array of
-         *        requests to be subscribed upon
-         * @returns {Function} a function which can be called
-         *        to unsubscribe
-         * @method TelmetryService#subscribe
-         */
-
-        /**
-         * A telemetry aggregator makes many telemetry providers
-         * appear as one.
-         *
-         * @memberof platform/telemetry
-         * @constructor
-         */
-        function TelemetryAggregator($q, telemetryProviders) {
-            this.$q = $q;
-            this.telemetryProviders = telemetryProviders;
-        }
-
-        // Merge the results from many providers into one
-        // result object.
-        function mergeResults(results) {
-            var merged = {};
-
-            results.forEach(function (result) {
-                Object.keys(result).forEach(function (k) {
-                    merged[k] = result[k];
-                });
-            });
-
-            return merged;
-        }
-
-        // Request telemetry from all providers; once they've
-        // responded, merge the results into one result object.
-        TelemetryAggregator.prototype.requestTelemetry = function (requests) {
-            return this.$q.all(this.telemetryProviders.map(function (provider) {
-                return provider.requestTelemetry(requests);
-            })).then(mergeResults);
-        };
-
-        // Subscribe to updates from all providers
-        TelemetryAggregator.prototype.subscribe = function (callback, requests) {
-            var unsubscribes = this.telemetryProviders.map(function (provider) {
-                return provider.subscribe(callback, requests);
-            });
-
-            // Return an unsubscribe function that invokes unsubscribe
-            // for all providers.
-            return function () {
-                unsubscribes.forEach(function (unsubscribe) {
-                    if (unsubscribe) {
-                        unsubscribe();
-                    }
-                });
-            };
-        };
-
-        return TelemetryAggregator;
-    }
-);
diff --git a/platform/telemetry/src/TelemetryCapability.js b/platform/telemetry/src/TelemetryCapability.js
deleted file mode 100644
index eb963a21afc..00000000000
--- a/platform/telemetry/src/TelemetryCapability.js
+++ /dev/null
@@ -1,340 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining TelemetryCapability. Created by vwoeltje on 11/12/14.
- */
-define(
-    [
-        'objectUtils',
-        'lodash'
-    ],
-    function (
-        objectUtils,
-        _
-    ) {
-
-        const EMPTY_SERIES = {
-            getPointCount: () => 0,
-            getDomainValue: () => 0,
-            getRangeValue: () => 0
-        };
-
-        /**
-         * Provides metadata about telemetry associated with a
-         * given domain object.
-         *
-         * @typedef TelemetryMetadata
-         * @property {string} source the machine-readable identifier for
-         *           the source of telemetry data for this object; used by
-         *           {@link TelemetryService} implementations to determine
-         *           whether or not they provide data for this object.
-         * @property {string} key the machine-readable identifier for
-         *           telemetry data associated with this specific object,
-         *           within that `source`.
-         * @property {TelemetryDomainMetadata[]} domains supported domain
-         *           options for telemetry data associated with this object,
-         *           to use in interpreting a {@link TelemetrySeries}
-         * @property {TelemetryRangeMetadata[]} ranges supported range
-         *           options for telemetry data associated with this object,
-         *           to use in interpreting a {@link TelemetrySeries}
-         */
-
-        /**
-         * Provides metadata about range options within a telemetry series.
-         * Range options describe distinct properties within any given datum
-         * of a telemetry series; for instance, a telemetry series containing
-         * both raw and uncalibrated values may provide separate ranges for
-         * each.
-         *
-         * @typedef TelemetryRangeMetadata
-         * @property {string} key machine-readable identifier for this range
-         * @property {string} name human-readable name for this range
-         * @property {string} [units] human-readable units for this range
-         * @property {string} [format] data format for this range; usually,
-         *                    one of `number`, or `string`. If `undefined`,
-         *                    should presume to be a `number`. Custom formats
-         *                    may be indicated here.
-         */
-
-        /**
-         * Provides metadata about domain options within a telemetry series.
-         * Domain options describe distinct properties within any given datum
-         * of a telemtry series; for instance, a telemetry series containing
-         * both spacecraft event time and earth received times may provide
-         * separate domains for each.
-         *
-         * Domains are typically used to represent timestamps in a telemetry
-         * series, but more generally may express any property which will
-         * have unique values for each datum in a series. It is this property
-         * which makes domains distinct from ranges, as it makes these values
-         * appropriate and meaningful for use to sort and bound a series.
-         *
-         * @typedef TelemetryDomainMetadata
-         * @property {string} key machine-readable identifier for this range
-         * @property {string} name human-readable name for this range
-         * @property {string} [system] machine-readable identifier for the
-         *                    time/date system associated with this domain;
-         *                    used by {@link DateService}
-         */
-
-        /**
-         * A telemetry capability provides a means of requesting telemetry
-         * for a specific object, and for unwrapping the response (to get
-         * at the specific data which is appropriate to the domain object.)
-         *
-         * @memberof platform/telemetry
-         * @implements {Capability}
-         * @constructor
-         */
-        function TelemetryCapability(openmct, $injector, $q, $log, domainObject) {
-            // We could depend on telemetryService directly, but
-            // there isn't a platform implementation of this.
-            this.initializeTelemetryService = function () {
-                try {
-                    return (this.telemetryService =
-                        $injector.get("telemetryService"));
-                } catch (e) {
-                    $log.info("Telemetry service unavailable");
-
-                    return (this.telemetryService = null);
-                }
-            };
-
-            this.openmct = openmct;
-            this.$q = $q;
-            this.$log = $log;
-            this.domainObject = domainObject;
-        }
-
-        // Build a request object. This takes the request that was
-        // passed to the capability, and adds source, id, and key
-        // fields associated with the object (from its type definition
-        // and/or its model)
-        TelemetryCapability.prototype.buildRequest = function (request) {
-            // Start with any "telemetry" field in type; use that as a
-            // basis for the request.
-            var domainObject = this.domainObject,
-                type = domainObject.getCapability("type"),
-                typeRequest = (type && type.getDefinition().telemetry) || {},
-                modelTelemetry = domainObject.getModel().telemetry,
-                fullRequest = Object.create(typeRequest),
-                newObject = objectUtils.toNewFormat(
-                    domainObject.getModel(),
-                    domainObject.getId()
-                ),
-                metadata = this.openmct.telemetry.getMetadata(newObject),
-                bounds,
-                timeSystem;
-
-            // Add properties from the telemetry field of this
-            // specific domain object.
-            Object.keys(modelTelemetry).forEach(function (k) {
-                fullRequest[k] = modelTelemetry[k];
-            });
-
-            // Add properties from this specific requestData call.
-            Object.keys(request).forEach(function (k) {
-                fullRequest[k] = request[k];
-            });
-
-            // Ensure an ID and key are present
-            if (!fullRequest.id) {
-                fullRequest.id = domainObject.getId();
-            }
-
-            if (!fullRequest.key) {
-                fullRequest.key = domainObject.getId();
-            }
-
-            if (request.start === undefined && request.end === undefined) {
-                bounds = this.openmct.time.bounds();
-                fullRequest.start = bounds.start;
-                fullRequest.end = bounds.end;
-            }
-
-            if (request.domain === undefined) {
-                timeSystem = this.openmct.time.timeSystem();
-                if (timeSystem !== undefined) {
-                    fullRequest.domain = timeSystem.key;
-                }
-            }
-
-            if (!fullRequest.ranges) {
-                fullRequest.ranges = metadata.valuesForHints(['range']);
-            }
-
-            if (!fullRequest.domains) {
-                fullRequest.domains = metadata.valuesForHints(['domain']);
-            }
-
-            return fullRequest;
-        };
-
-        function asSeries(telemetry, defaultDomain, defaultRange, sourceMap) {
-            function getValue(index, key) {
-                return telemetry[index][sourceMap[key].source];
-            }
-
-            return {
-                getRangeValue: function (index, range) {
-                    return getValue(index, range || defaultRange);
-                },
-                getDomainValue: function (index, domain) {
-                    return getValue(index, domain || defaultDomain);
-                },
-                getPointCount: function () {
-                    return telemetry.length;
-                },
-                getData: function () {
-                    return telemetry;
-                }
-            };
-        }
-
-        /**
-         * Request telemetry data for this specific domain object.
-         * @param {TelemetryRequest} [request] parameters for this
-         *        specific request
-         * @returns {Promise} a promise for the resulting telemetry
-         *          object
-         */
-        TelemetryCapability.prototype.requestData = function requestTelemetry(request) {
-            // Bring in any defaults from the object model
-            var fullRequest = this.buildRequest(request || {});
-            var source = fullRequest.source;
-            var key = fullRequest.key;
-            var telemetryService = this.telemetryService
-                || this.initializeTelemetryService(); // Lazy initialization
-
-            var domainObject = objectUtils.toNewFormat(this.domainObject.getModel(), this.domainObject.getId());
-            var telemetryAPI = this.openmct.telemetry;
-
-            var metadata = telemetryAPI.getMetadata(domainObject);
-            var defaultDomain = metadata.valuesForHints(['domain'])[0].key;
-            var defaultRange = metadata.valuesForHints(['range'])[0];
-            defaultRange = defaultRange ? defaultRange.key : undefined;
-
-            var sourceMap = _.keyBy(metadata.values(), 'key');
-
-            var isLegacyProvider = telemetryAPI.findRequestProvider(domainObject)
-                === telemetryAPI.legacyProvider;
-
-            // Pull out the relevant field from the larger,
-            // structured response.
-            function getRelevantResponse(response) {
-                return ((response || {})[source] || {})[key]
-                    || EMPTY_SERIES;
-            }
-
-            // Issue a request to the service
-            function requestTelemetryFromService() {
-                return telemetryService.requestTelemetry([fullRequest]);
-            }
-
-            if (isLegacyProvider) {
-                // If a telemetryService is not available,
-                // getTelemetryService() should reject, and this should
-                // bubble through subsequent then calls.
-                return telemetryService
-                    && requestTelemetryFromService().then(getRelevantResponse);
-            } else {
-                return telemetryAPI.request(domainObject, fullRequest).then(function (telemetry) {
-                    return asSeries(telemetry, defaultDomain, defaultRange, sourceMap);
-                });
-            }
-        };
-
-        /**
-         * Get metadata about this domain object's associated
-         * telemetry.
-         * @returns {TelemetryMetadata} metadata about this object's telemetry
-         */
-        TelemetryCapability.prototype.getMetadata = function () {
-            // metadata just looks like a request,
-            // so use buildRequest to bring in both
-            // type-level and object-level telemetry
-            // properties
-            return (this.metadata = this.metadata || this.buildRequest({}));
-        };
-
-        /**
-         * Subscribe to updates to telemetry data for this domain
-         * object.
-         * @param {Function} callback a function to call when new
-         *        data becomes available; the telemetry series
-         *        containing the data will be given as an argument.
-         * @param {TelemetryRequest} [request] parameters for the
-         *        subscription request
-         */
-        TelemetryCapability.prototype.subscribe = function subscribe(callback, request) {
-            var fullRequest = this.buildRequest(request || {});
-            var telemetryService = this.telemetryService
-                || this.initializeTelemetryService(); // Lazy initialization
-
-            var domainObject = objectUtils.toNewFormat(this.domainObject.getModel(), this.domainObject.getId());
-            var telemetryAPI = this.openmct.telemetry;
-
-            var metadata = telemetryAPI.getMetadata(domainObject);
-            var defaultDomain = metadata.valuesForHints(['domain'])[0].key;
-            var defaultRange = metadata.valuesForHints(['range'])[0];
-            defaultRange = defaultRange ? defaultRange.key : undefined;
-
-            var sourceMap = _.keyBy(metadata.values(), 'key');
-
-            var isLegacyProvider = telemetryAPI.findSubscriptionProvider(domainObject)
-                === telemetryAPI.legacyProvider;
-
-            function update(telemetry) {
-                callback(asSeries([telemetry], defaultDomain, defaultRange, sourceMap));
-            }
-
-            // Unpack the relevant telemetry series
-            function updateLegacy(telemetries) {
-                var source = fullRequest.source,
-                    key = fullRequest.key,
-                    result = ((telemetries || {})[source] || {})[key];
-                if (result) {
-                    callback(result);
-                }
-            }
-
-            // Avoid a loop here...
-            if (isLegacyProvider) {
-                return telemetryService
-                    && telemetryService.subscribe(updateLegacy, [fullRequest]);
-            } else {
-                return telemetryAPI.subscribe(domainObject, update, fullRequest);
-            }
-        };
-
-        /**
-         * The telemetry capability is applicable when a
-         * domain object model has a "telemetry" field.
-         */
-        TelemetryCapability.appliesTo = function (model) {
-            return Boolean(model && model.telemetry);
-        };
-
-        return TelemetryCapability;
-    }
-);
diff --git a/platform/telemetry/src/TelemetryController.js b/platform/telemetry/src/TelemetryController.js
deleted file mode 100644
index beebbb186c1..00000000000
--- a/platform/telemetry/src/TelemetryController.js
+++ /dev/null
@@ -1,404 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining TelemetryController. Created by vwoeltje on 11/12/14.
- */
-define(
-    [],
-    function () {
-
-        /**
-         * Serves as a reusable controller for views (or parts of views)
-         * which need to issue requests for telemetry data and use the
-         * results
-         *
-         * @memberof platform/telemetry
-         * @constructor
-         * @deprecated use platform/telemetry.TelemetryHandler instead
-         */
-        function TelemetryController($scope, $q, $timeout, $log) {
-
-            // Private to maintain in this scope
-            var self = {
-                // IDs of domain objects with telemetry
-                ids: [],
-
-                // Containers for latest responses (id->response)
-                // Used internally; see buildResponseContainer
-                // for format
-                response: {},
-
-                // Request fields (id->requests)
-                request: {},
-
-                // Number of outstanding requests
-                pending: 0,
-
-                // Array of object metadatas, for easy retrieval
-                metadatas: [],
-
-                // Interval at which to poll for new data
-                interval: 1000,
-
-                // Flag tracking whether or not a request
-                // is in progress
-                refreshing: false,
-
-                // Used to track whether a new telemetryUpdate
-                // is being issued.
-                broadcasting: false,
-
-                // Active subscriptions
-                subscriptions: [],
-
-                // Used for getTelemetryObjects; a reference is
-                // stored so that this can be called in a watch
-                telemetryObjects: [],
-
-                // Whether or not this controller is active; once
-                // scope is destroyed, polling should stop.
-                active: true
-            };
-
-            // Broadcast that a telemetryUpdate has occurred.
-            function doBroadcast() {
-                // This may get called multiple times from
-                // multiple objects, so set a flag to suppress
-                // multiple simultaneous events from being
-                // broadcast, then issue the actual broadcast
-                // later (via $timeout)
-                if (!self.broadcasting) {
-                    self.broadcasting = true;
-                    $timeout(function () {
-                        self.broadcasting = false;
-                        $scope.$broadcast("telemetryUpdate");
-                    });
-                }
-            }
-
-            // Issue a request for new telemetry for one of the
-            // objects being tracked by this controller
-            function requestTelemetryForId(id, trackPending) {
-                var responseObject = self.response[id],
-                    domainObject = responseObject.domainObject,
-                    telemetry = domainObject.getCapability('telemetry');
-
-                // Callback for when data comes back
-                function storeData(data) {
-                    self.pending -= trackPending ? 1 : 0;
-                    responseObject.data = data;
-                    doBroadcast();
-                }
-
-                self.pending += trackPending ? 1 : 0;
-
-                // Shouldn't happen, but isn't fatal,
-                // so warn.
-                if (!telemetry) {
-                    $log.warn([
-                        "Expected telemetry capability for ",
-                        id,
-                        " but found none. Cannot request data."
-                    ].join(""));
-
-                    // Request won't happen, so don't
-                    // mark it as pending.
-                    self.pending -= trackPending ? 1 : 0;
-
-                    return;
-                }
-
-                // Issue the request using the object's telemetry capability
-                return $q.when(telemetry.requestData(self.request))
-                    .then(storeData);
-            }
-
-            // Request telemetry for all objects tracked by this
-            // controller. A flag is passed to indicate whether the
-            // pending counter should be incremented (this will
-            // cause isRequestPending() to change, which we only
-            // want to happen for requests which have originated
-            // outside of this controller's polling action.)
-            function requestTelemetry(trackPending) {
-                return $q.all(self.ids.map(function (id) {
-                    return requestTelemetryForId(id, trackPending);
-                }));
-            }
-
-            // Subscribe to streaming telemetry updates
-            function subscribe(telemetryCapability, id) {
-                return telemetryCapability.subscribe(function () {
-                    requestTelemetryForId(id, false);
-                });
-            }
-
-            // Stop listening to active subscriptions
-            function unsubscribe() {
-                self.subscriptions.forEach(function (s) {
-                    return s && s();
-                });
-                self.subscriptions = [];
-            }
-
-            // Look up domain objects which have telemetry capabilities.
-            // This will either be the object in view, or object that
-            // this object delegates its telemetry capability to.
-            function promiseRelevantDomainObjects(domainObject) {
-                // If object has been cleared, there are no relevant
-                // telemetry-providing domain objects.
-                if (!domainObject) {
-                    return $q.when([]);
-                }
-
-                // Otherwise, try delegation first, and attach the
-                // object itself if it has a telemetry capability.
-                return $q.when(domainObject.useCapability(
-                    "delegation",
-                    "telemetry"
-                )).then(function (result) {
-                    var head = domainObject.hasCapability("telemetry")
-                            ? [domainObject] : [],
-                        tail = result || [];
-
-                    return head.concat(tail);
-                });
-            }
-
-            // Build the response containers that are used internally
-            // by this controller to track latest responses, etc, for
-            // a given domain object.
-            function buildResponseContainer(domainObject) {
-                var telemetry = domainObject
-                        && domainObject.getCapability("telemetry"),
-                    id,
-                    metadata;
-
-                if (telemetry) {
-                    id = domainObject.getId();
-
-                    self.subscriptions.push(subscribe(telemetry, id));
-
-                    metadata = telemetry.getMetadata();
-
-                    self.response[id] = {
-                        name: domainObject.getModel().name,
-                        domainObject: domainObject,
-                        metadata: metadata,
-                        pending: 0,
-                        data: {}
-                    };
-                } else {
-                    // Shouldn't happen, as we've checked for
-                    // telemetry capabilities previously, but
-                    // be defensive.
-                    $log.warn([
-                        "Expected telemetry capability for ",
-                        domainObject.getId(),
-                        " but none was found."
-                    ].join(""));
-
-                    // Create an empty container so subsequent
-                    // behavior won't hit an exception.
-                    self.response[domainObject.getId()] = {
-                        name: domainObject.getModel().name,
-                        domainObject: domainObject,
-                        metadata: {},
-                        pending: 0,
-                        data: {}
-                    };
-                }
-            }
-
-            // Build response containers (as above) for all
-            // domain objects, and update some controller-internal
-            // state to support subsequent calls.
-            function buildResponseContainers(domainObjects) {
-                // Clear out any existing subscriptions
-                unsubscribe();
-
-                // Build the containers
-                domainObjects.forEach(buildResponseContainer);
-
-                // Store the reference to support getTelemetryObjects
-                self.telemetryObjects = domainObjects;
-
-                // Maintain a list of relevant ids, to convert
-                // back from dictionary-like container objects to arrays.
-                self.ids = domainObjects.map(function (obj) {
-                    return obj.getId();
-                });
-
-                // Keep a reference to all applicable metadata
-                // to return from getMetadata
-                self.metadatas = self.ids.map(function (id) {
-                    return self.response[id].metadata;
-                });
-
-                // Issue a request for the new objects, if we
-                // know what our request looks like
-                if (self.request) {
-                    requestTelemetry(true);
-                }
-            }
-
-            // Get relevant telemetry-providing domain objects
-            // for the domain object which is represented in this
-            // scope. This will be the domain object itself, or
-            // its telemetry delegates, or both.
-            function getTelemetryObjects(domainObject) {
-                unsubscribe();
-                promiseRelevantDomainObjects(domainObject)
-                    .then(buildResponseContainers);
-            }
-
-            // Handle a polling refresh interval
-            function startTimeout() {
-                if (!self.refreshing && self.interval !== undefined) {
-                    self.refreshing = true;
-                    $timeout(function () {
-                        if (self.request) {
-                            requestTelemetry(false);
-                        }
-
-                        self.refreshing = false;
-
-                        if (self.active) {
-                            startTimeout();
-                        }
-                    }, self.interval);
-                }
-            }
-
-            // Stop polling for changes
-            function deactivate() {
-                unsubscribe();
-                self.active = false;
-            }
-
-            // Watch for a represented domain object
-            $scope.$watch("domainObject", getTelemetryObjects);
-
-            // Stop polling when destroyed
-            $scope.$on("$destroy", deactivate);
-
-            // Begin polling for data changes
-            startTimeout();
-
-            return {
-                /**
-                 * Get all telemetry metadata associated with
-                 * telemetry-providing domain objects managed by
-                 * this controller.
-                 *
-                 * This will ordered in the
-                 * same manner as `getTelemetryObjects()` or
-                 * `getResponse()`; that is, the metadata at a
-                 * given index will correspond to the telemetry-providing
-                 * domain object at the same index.
-                 * @returns {Array} an array of metadata objects
-                 * @memberof platform/telemetry.TelemetryController#
-                 */
-                getMetadata: function () {
-                    return self.metadatas;
-                },
-                /**
-                 * Get all telemetry-providing domain objects managed by
-                 * this controller.
-                 *
-                 * This will ordered in the
-                 * same manner as `getMetadata()` or
-                 * `getResponse()`; that is, the metadata at a
-                 * given index will correspond to the telemetry-providing
-                 * domain object at the same index.
-                 * @returns {DomainObject[]} an array of metadata objects
-                 * @memberof platform/telemetry.TelemetryController#
-                 */
-                getTelemetryObjects: function () {
-                    return self.telemetryObjects;
-                },
-                /**
-                 * Get the latest telemetry response for a specific
-                 * domain object (if an argument is given) or for all
-                 * objects managed by this controller (if no argument
-                 * is supplied.)
-                 *
-                 * In the first form, this returns a single object; in
-                 * the second form, it returns an array ordered in
-                 * same manner as `getMetadata()` or
-                 * `getTelemetryObjects()`; that is, the telemetry
-                 * response at a given index will correspond to the
-                 * telemetry-providing domain object at the same index.
-                 * @returns {Array} an array of responses
-                 * @memberof platform/telemetry.TelemetryController#
-                 */
-                getResponse: function getResponse(arg) {
-                    var id = arg && (typeof arg === 'string'
-                        ? arg : arg.getId());
-
-                    if (id) {
-                        return (self.response[id] || {}).data;
-                    }
-
-                    return (self.ids || []).map(getResponse);
-                },
-                /**
-                 * Check if the latest request (not counting
-                 * requests from TelemtryController's own polling)
-                 * is still outstanding. Users of the TelemetryController
-                 * may use this method as a condition upon which to
-                 * show user feedback, such as a wait spinner.
-                 *
-                 * @returns {boolean} true if the request is still outstanding
-                 * @memberof platform/telemetry.TelemetryController#
-                 */
-                isRequestPending: function () {
-                    return self.pending > 0;
-                },
-                /**
-                 * Issue a new data request. This will change the
-                 * request parameters that are passed along to all
-                 * telemetry capabilities managed by this controller.
-                 * @memberof platform/telemetry.TelemetryController#
-                 */
-                requestData: function (request) {
-                    self.request = request || {};
-
-                    return requestTelemetry(true);
-                },
-                /**
-                 * Change the interval at which this controller will
-                 * perform its polling activity.
-                 * @param {number} durationMillis the interval at
-                 *        which to poll, in milliseconds
-                 * @memberof platform/telemetry.TelemetryController#
-                 */
-                setRefreshInterval: function (durationMillis) {
-                    self.interval = durationMillis;
-                    startTimeout();
-                }
-            };
-        }
-
-        return TelemetryController;
-    }
-);
diff --git a/platform/telemetry/src/TelemetryDelegator.js b/platform/telemetry/src/TelemetryDelegator.js
deleted file mode 100644
index f284f63a0fb..00000000000
--- a/platform/telemetry/src/TelemetryDelegator.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Used to handle telemetry delegation associated with a
-         * given domain object.
-         * @constructor
-         * @memberof platform/telemetry
-         */
-        function TelemetryDelegator($q) {
-            this.$q = $q;
-        }
-
-        /**
-         * Promise telemetry-providing objects associated with
-         * this domain object (either the domain object itself,
-         * or the objects it delegates)
-         * @param {DomainObject} the domain object which may have
-         *        or delegate telemetry
-         * @returns {Promise.<DomainObject[]>} domain objects with
-         *          a telemetry capability
-         */
-        TelemetryDelegator.prototype.promiseTelemetryObjects = function (domainObject) {
-            var $q = this.$q;
-
-            // If object has been cleared, there are no relevant
-            // telemetry-providing domain objects.
-            if (!domainObject) {
-                return $q.when([]);
-            }
-
-            // Otherwise, try delegation first, and attach the
-            // object itself if it has a telemetry capability.
-            return $q.when(domainObject.useCapability(
-                "delegation",
-                "telemetry"
-            )).then(function (result) {
-                var head = domainObject.hasCapability("telemetry")
-                        ? [domainObject] : [],
-                    tail = result || [];
-
-                return head.concat(tail);
-            });
-        };
-
-        return TelemetryDelegator;
-    }
-);
diff --git a/platform/telemetry/src/TelemetryFormatter.js b/platform/telemetry/src/TelemetryFormatter.js
deleted file mode 100644
index 09389bd3dbd..00000000000
--- a/platform/telemetry/src/TelemetryFormatter.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * The TelemetryFormatter is responsible for formatting (as text
-         * for display) values along either the domain (usually time) or
-         * the range (usually value) of a data series.
-         * @memberof platform/telemetry
-         * @constructor
-         * @param {FormatService} formatService the service to user to format
-         *        domain values
-         * @param {string} defaultFormatKey the format to request when no
-         *        format has been otherwise specified
-         */
-        function TelemetryFormatter(formatService, defaultFormatKey) {
-            this.formatService = formatService;
-            this.defaultFormat = formatService.getFormat(defaultFormatKey);
-        }
-
-        /**
-         * Format a domain value.
-         * @param {number} v the domain value; usually, a timestamp
-         *        in milliseconds since start of 1970
-         * @param {string} [key] a key which identifies the format
-         *        to use
-         * @returns {string} a textual representation of the
-         *        data and time, suitable for display.
-         */
-        TelemetryFormatter.prototype.formatDomainValue = function (v, key) {
-            var formatter = (key === undefined)
-                ? this.defaultFormat
-                : this.formatService.getFormat(key);
-
-            return isNaN(v) ? "" : formatter.format(v);
-        };
-
-        /**
-         * Format a range value.
-         * @param {number} v the range value; a numeric value
-         * @param {string} [key] the key which identifies the
-         *        range; if unspecified or unknown, this will
-         *        be treated as a numeric value.
-         * @returns {string} a textual representation of the
-         *        value, suitable for display.
-         */
-        TelemetryFormatter.prototype.formatRangeValue = function (v, key) {
-            return String(v);
-        };
-
-        return TelemetryFormatter;
-    }
-);
diff --git a/platform/telemetry/src/TelemetryHandle.js b/platform/telemetry/src/TelemetryHandle.js
deleted file mode 100644
index 64d1fdfb6b7..00000000000
--- a/platform/telemetry/src/TelemetryHandle.js
+++ /dev/null
@@ -1,147 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * A telemetry handle acts as a helper in issuing requests for
-         * new telemetry as well as subscribing to real-time updates
-         * for the same telemetry series. This is exposed through the
-         * `telemetryHandler` service.
-         * @param $q Angular's $q, for promises
-         * @param {TelemetrySubscription} subscription a subscription
-         *        to supplied telemetry
-         * @constructor
-         * @memberof platform/telemetry
-         */
-        function TelemetryHandle($q, subscription) {
-            var seriesMap = {},
-                active = true,
-                self = Object.create(subscription);
-
-            // Request a telemetry series for this specific object
-            function requestSeries(telemetryObject, request, callback) {
-                var id = telemetryObject.getId(),
-                    telemetry = telemetryObject.getCapability('telemetry');
-
-                function receiveSeries(series) {
-                    // Store it for subsequent lookup
-                    seriesMap[id] = series;
-                    // Notify callback of new series data, if there is one
-                    if (callback && active) {
-                        callback(telemetryObject, series);
-                    }
-
-                    // Pass it along for promise-chaining
-                    return series;
-                }
-
-                // Issue the request via the object's telemetry capability
-                return telemetry.requestData(request).then(receiveSeries);
-            }
-
-            self.unsubscribe = function () {
-                active = false;
-
-                return subscription.unsubscribe();
-            };
-
-            /**
-             * Get the most recently obtained telemetry data series associated
-             * with this domain object.
-             * @param {DomainObject} the domain object which has telemetry
-             *        data associated with it
-             * @return {TelemetrySeries} the most recent telemetry series
-             *         (or undefined if there is not one)
-             * @memberof platform/telemetry.TelemetryHandle#
-             */
-            self.getSeries = function (domainObject) {
-                var id = domainObject.getId();
-
-                return seriesMap[id];
-            };
-
-            /**
-             * Change the request duration.
-             * @param {TelemetryRequest} request the request to issue
-             * @param {Function} [callback] a callback that will be
-             *        invoked as new data becomes available, with the
-             *        domain object for which new data is available.
-             * @memberof platform/telemetry.TelemetryHandle#
-             */
-            self.request = function (request, callback) {
-                // Issue (and handle) the new request from this object
-                function issueRequest(telemetryObject) {
-                    return requestSeries(telemetryObject, request, callback);
-                }
-
-                // Map the request to all telemetry objects
-                function issueRequests(telemetryObjects) {
-                    return $q.all(telemetryObjects.map(issueRequest));
-                }
-
-                // If the request is a simple number, treat it as a duration
-                request = (typeof request === 'number')
-                    ? { duration: request } : request;
-
-                // Look up telemetry-providing objects from the subscription,
-                // then issue new requests.
-                return subscription.promiseTelemetryObjects()
-                    .then(issueRequests);
-            };
-
-            /**
-             * Get the latest telemetry datum for this domain object. This
-             * will be from real-time telemetry, unless an index is specified,
-             * in which case it will be pulled from the historical telemetry
-             * series at the specified index. If there is no latest available
-             * datum, this will return undefined.
-             *
-             * @param {DomainObject} domainObject the object of interest
-             * @param {number} [index] the index of the data of interest
-             * @returns {TelemetryDatum} the most recent datum
-             */
-            self.getDatum = function (telemetryObject, index) {
-                function makeNewDatum(series) {
-                    if (series) {
-                        if (series.getDatum) {
-                            return series.getDatum(index);
-                        }
-
-                        return subscription.makeDatum(telemetryObject, series, index);
-                    }
-                }
-
-                return typeof index !== 'number'
-                    ? subscription.getDatum(telemetryObject)
-                    : makeNewDatum(this.getSeries(telemetryObject));
-            };
-
-            return self;
-        }
-
-        return TelemetryHandle;
-
-    }
-);
diff --git a/platform/telemetry/src/TelemetryHandler.js b/platform/telemetry/src/TelemetryHandler.js
deleted file mode 100644
index 9bb8185432b..00000000000
--- a/platform/telemetry/src/TelemetryHandler.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['./TelemetryHandle'],
-    function (TelemetryHandle) {
-
-        /**
-         * A TelemetryRequester provides an easy interface to request
-         * telemetry associated with a set of domain objects.
-         *
-         * @memberof platform/telemetry
-         * @constructor
-         * @param $q Angular's $q
-         */
-        function TelemetryHandler($q, telemetrySubscriber) {
-            this.$q = $q;
-            this.telemetrySubscriber = telemetrySubscriber;
-        }
-
-        /**
-         * Start receiving telemetry associated with this domain object
-         * (either directly, or via delegation.)
-         * @param {DomainObject} domainObject the domain object
-         * @param {Function} callback callback to invoke when new data is
-         *        available
-         * @param {boolean} lossless true if the callback should be invoked
-         *        one separate time for each new latest value
-         * @returns {TelemetryHandle} a handle to telemetry data
-         *          associated with this object
-         */
-        TelemetryHandler.prototype.handle = function (domainObject, callback, lossless) {
-            var subscription = this.telemetrySubscriber.subscribe(
-                domainObject,
-                callback,
-                lossless
-            );
-
-            return new TelemetryHandle(this.$q, subscription);
-        };
-
-        return TelemetryHandler;
-
-    }
-);
diff --git a/platform/telemetry/src/TelemetryQueue.js b/platform/telemetry/src/TelemetryQueue.js
deleted file mode 100644
index 298c4eed31b..00000000000
--- a/platform/telemetry/src/TelemetryQueue.js
+++ /dev/null
@@ -1,121 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Supports TelemetrySubscription. Provides a simple data structure
-         * (with a pool-like interface) that aggregates key-value pairs into
-         * a queued series of large objects, ensuring that no value is
-         * overwritten (but consolidated non-overlapping keys into single
-         * objects.)
-         * @memberof platform/telemetry
-         * @constructor
-         * @implements {platform/telemetry.TelemetryPool}
-         */
-        function TelemetryQueue() {
-            // General approach here:
-            // * Maintain a queue as an array of objects containing key-value
-            //   pairs. Putting values into the queue will assign to the
-            //   earliest-available queue position for the associated key
-            //   (appending to the array if necessary.)
-            // * Maintain a set of counts for each key, such that determining
-            //   the next available queue position is easy; O(1) insertion.
-            // * When retrieving objects, pop off the queue and decrement
-            //   counts. This provides O(n+k) or O(k) retrieval for a queue
-            //   of length n with k unique keys; this depends on whether
-            //   the browser's implementation of Array.prototype.shift is
-            //   O(n) or O(1).
-
-            // Graphically (indexes at top, keys along side, values as *'s),
-            // if we have a queue that looks like:
-            //   0 1 2 3 4
-            // a * * * * *
-            // b * *
-            // c * * *
-            //
-            // And we put a new value for b, we expect:
-            //   0 1 2 3 4
-            // a * * * * *
-            // b * * *
-            // c * * *
-
-            this.queue = [];
-            this.counts = {};
-        }
-
-        TelemetryQueue.prototype.isEmpty = function () {
-            return this.queue.length < 1;
-        };
-
-        TelemetryQueue.prototype.poll = function () {
-            var counts = this.counts;
-
-            // Decrement counts for a specific key
-            function decrementCount(key) {
-                if (counts[key] < 2) {
-                    delete counts[key];
-                } else {
-                    counts[key] -= 1;
-                }
-            }
-
-            // Decrement counts for the object that will be popped
-            Object.keys(counts).forEach(decrementCount);
-
-            return this.queue.shift();
-        };
-
-        TelemetryQueue.prototype.put = function (key, value) {
-            var queue = this.queue,
-                counts = this.counts;
-
-            // Look up an object in the queue that does not have a value
-            // assigned to this key (or, add a new one)
-            function getFreeObject(k) {
-                var index = counts[k] || 0, object;
-
-                // Track the largest free position for this key
-                counts[k] = index + 1;
-
-                // If it's before the end of the queue, add it there
-                if (index < queue.length) {
-                    return queue[index];
-                }
-
-                // Otherwise, values have been assigned
-                // to that key in all queued containers, so we need to queue
-                // up a new  container for key-value pairs.
-                object = {};
-                queue.push(object);
-
-                return object;
-            }
-
-            getFreeObject(key)[key] = value;
-        };
-
-        return TelemetryQueue;
-    }
-);
diff --git a/platform/telemetry/src/TelemetrySubscriber.js b/platform/telemetry/src/TelemetrySubscriber.js
deleted file mode 100644
index e57fd9f478d..00000000000
--- a/platform/telemetry/src/TelemetrySubscriber.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["./TelemetrySubscription"],
-    function (TelemetrySubscription) {
-
-        /**
-         * The TelemetrySubscriber is a service which allows
-         * subscriptions to be made for new data associated with
-         * domain objects. It is exposed as a service named
-         * `telemetrySubscriber`.
-         *
-         * Subscriptions may also be made directly using the
-         * `telemetry` capability of a domain object; the subscriber
-         * uses this as well, but additionally handles delegation
-         * (e.g. for telemetry panels) as well as latest-value
-         * extraction.
-         *
-         * @memberof platform/telemetry
-         * @constructor
-         * @param $q Angular's $q
-         * @param $timeout Angular's $timeout
-         */
-        function TelemetrySubscriber($q, $timeout) {
-            this.$q = $q;
-            this.$timeout = $timeout;
-        }
-
-        /**
-         * Subscribe to streaming telemetry updates
-         * associated with this domain object (either
-         * directly or via capability delegation.)
-         *
-         * @param {DomainObject} domainObject the object whose
-         *        associated telemetry data is of interest
-         * @param {Function} callback a function to invoke
-         *        when new data has become available.
-         * @param {boolean} lossless flag to indicate whether the
-         *        callback should be notified for all values
-         *        (otherwise, multiple values in quick succession
-         *        will call back with only the latest value.)
-         * @returns {platform/telemetry.TelemetrySubscription} the
-         *        subscription, which will provide access to latest values.
-         */
-        TelemetrySubscriber.prototype.subscribe = function (domainObject, callback, lossless) {
-            return new TelemetrySubscription(
-                this.$q,
-                this.$timeout,
-                domainObject,
-                callback,
-                lossless
-            );
-        };
-
-        return TelemetrySubscriber;
-    }
-);
diff --git a/platform/telemetry/src/TelemetrySubscription.js b/platform/telemetry/src/TelemetrySubscription.js
deleted file mode 100644
index 28b1b7734d5..00000000000
--- a/platform/telemetry/src/TelemetrySubscription.js
+++ /dev/null
@@ -1,388 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['./TelemetryQueue', './TelemetryTable', './TelemetryDelegator'],
-    function (TelemetryQueue, TelemetryTable, TelemetryDelegator) {
-
-        /**
-         * A pool of telemetry values.
-         * @interface platform/telemetry.TelemetryPool
-         * @private
-         */
-        /**
-         * Check if any value groups remain in this pool.
-         * @return {boolean} true if value groups remain
-         * @method platform/telemetry.TelemetryPool#isEmpty
-         */
-        /**
-         * Retrieve the next value group from this pool.
-         * This gives an object containing key-value pairs,
-         * where keys and values correspond to the arguments
-         * given to previous put functions.
-         * @return {object} key-value pairs
-         * @method platform/telemetry.TelemetryPool#poll
-         */
-        /**
-         * Put a key-value pair into the pool.
-         * @param {string} key the key to store the value under
-         * @param {*} value the value to store
-         * @method platform/telemetry.TelemetryPool#put
-         */
-
-        /**
-         * A TelemetrySubscription tracks latest values for streaming
-         * telemetry data and handles notifying interested observers.
-         * It implements the interesting behavior behind the
-         * `telemetrySubscriber` service.
-         *
-         * Subscriptions may also be made directly using the
-         * `telemetry` capability of a domain object; the subscriber
-         * uses this as well, but additionally handles delegation
-         * (e.g. for telemetry panels) as well as latest-value
-         * extraction.
-         *
-         * @memberof platform/telemetry
-         * @constructor
-         * @param $q Angular's $q
-         * @param $timeout Angular's $timeout
-         * @param {DomainObject} domainObject the object whose
-         *        associated telemetry data is of interest
-         * @param {Function} callback a function to invoke
-         *        when new data has become available.
-         * @param {boolean} lossless true if callback should be invoked
-         *        once with every data point available; otherwise, multiple
-         *        data events in a short period of time will only invoke
-         *        the callback once, with access to the latest data
-         */
-        function TelemetrySubscription($q, $timeout, domainObject, callback, lossless) {
-            var self = this,
-                delegator = new TelemetryDelegator($q),
-                pool = lossless ? new TelemetryQueue() : new TelemetryTable(),
-                updatePending;
-
-            // Look up domain objects which have telemetry capabilities.
-            // This will either be the object in view, or object that
-            // this object delegates its telemetry capability to.
-            function promiseRelevantObjects(domainObj) {
-                return delegator.promiseTelemetryObjects(domainObj);
-            }
-
-            function updateValuesFromPool() {
-                var values = pool.poll();
-                Object.keys(values).forEach(function (k) {
-                    self.latestValues[k] = values[k];
-                });
-            }
-
-            // Invoke the observer callback to notify that new streaming
-            // data has become available.
-            function fireCallback() {
-                // Play back from queue if we are lossless
-                while (!pool.isEmpty()) {
-                    updateValuesFromPool();
-                    // Fire callback, if one was provided
-                    if (callback) {
-                        callback();
-                    }
-                }
-
-                // Clear the pending flag so that future updates will
-                // schedule this callback.
-                updatePending = false;
-            }
-
-            // Look up metadata associated with an object's telemetry
-            function lookupMetadata(domainObj) {
-                var telemetryCapability =
-                    domainObj.getCapability("telemetry");
-
-                return telemetryCapability
-                        && telemetryCapability.getMetadata();
-            }
-
-            // Update the latest telemetry data for a specific
-            // domain object. This will notify listeners.
-            function update(domainObj, series) {
-                var count = series && series.getPointCount();
-
-                // Only schedule notification if there isn't already
-                // a notification pending (and if we actually have
-                // data)
-                if (!updatePending && count) {
-                    updatePending = true;
-                    $timeout(fireCallback, 0);
-                }
-
-                // Update the latest-value table
-                if (count > 0) {
-                    pool.put(domainObj.getId(), {
-                        domain: series.getDomainValue(count - 1),
-                        range: series.getRangeValue(count - 1),
-                        datum: self.makeDatum(domainObj, series, count - 1)
-                    });
-                }
-            }
-
-            // Prepare a subscription to a specific telemetry-providing
-            // domain object.
-            function subscribe(domainObj) {
-                var telemetryCapability =
-                    domainObj.getCapability("telemetry");
-
-                return telemetryCapability.subscribe(function (telemetry) {
-                    update(domainObj, telemetry);
-                });
-            }
-
-            // Prepare subscriptions to all relevant telemetry-providing
-            // domain objects.
-            function subscribeAll(domainObjects) {
-                return domainObjects.map(subscribe);
-            }
-
-            // Cache a reference to all relevant telemetry-providing
-            // domain objects. This will be called during the
-            // initial subscription chain; this allows `getTelemetryObjects()`
-            // to return a non-Promise to simplify usage elsewhere.
-            function cacheObjectReferences(objects) {
-                self.telemetryObjects = objects;
-                self.metadatas = objects.map(lookupMetadata);
-
-                self.metadataById = {};
-                objects.forEach(function (obj, i) {
-                    self.metadataById[obj.getId()] = self.metadatas[i];
-                });
-                // Fire callback, as this will be the first time that
-                // telemetry objects are available, or these objects
-                // will have changed.
-                if (callback) {
-                    callback();
-                }
-
-                return objects;
-            }
-
-            function initialize() {
-                // Get a reference to relevant objects (those with telemetry
-                // capabilities) and subscribe to their telemetry updates.
-                // Keep a reference to their promised return values, as these
-                // will be unsubscribe functions. (This must be a promise
-                // because delegation is supported, and retrieving delegate
-                // telemetry-capable objects may be an asynchronous operation.)
-                self.telemetryObjectPromise = promiseRelevantObjects(domainObject);
-                self.unsubscribePromise = self.telemetryObjectPromise
-                    .then(cacheObjectReferences)
-                    .then(subscribeAll);
-            }
-
-            function idsMatch(ids) {
-                return ids.length === self.telemetryObjects.length
-                    && ids.every(function (id, index) {
-                        return self.telemetryObjects[index].getId() === id;
-                    });
-            }
-
-            function modelChange(model) {
-                if (!idsMatch((model || {}).composition || [])) {
-                    // Reinitialize if composition has changed
-                    self.unsubscribeAll().then(initialize);
-                }
-            }
-
-            function addMutationListener() {
-                var mutation = domainObject
-                    && domainObject.getCapability('mutation');
-                if (mutation) {
-                    return mutation.listen(modelChange);
-                }
-            }
-
-            this.$q = $q;
-            this.latestValues = {};
-            this.telemetryObjects = [];
-            this.metadatas = [];
-
-            initialize();
-            this.unlistenToMutation = addMutationListener();
-        }
-
-        /**
-         * From a telemetry series, retrieve a single data point
-         * containing all fields for domains/ranges
-         * @private
-         */
-        TelemetrySubscription.prototype.makeDatum = function (domainObject, series, index) {
-            var id = domainObject && domainObject.getId(),
-                metadata = (id && this.metadataById[id]) || {},
-                result = {};
-
-            (metadata.domains || []).forEach(function (domain) {
-                result[domain.key] =
-                    series.getDomainValue(index, domain.key);
-            });
-
-            (metadata.ranges || []).forEach(function (range) {
-                result[range.key] =
-                    series.getRangeValue(index, range.key);
-            });
-
-            return result;
-        };
-
-        /**
-         * Terminate all underlying subscriptions.
-         * @private
-         */
-        TelemetrySubscription.prototype.unsubscribeAll = function () {
-            var $q = this.$q;
-
-            return this.unsubscribePromise.then(function (unsubscribes) {
-                return $q.all(unsubscribes.map(function (unsubscribe) {
-                    return unsubscribe();
-                }));
-            });
-        };
-
-        /**
-         * Terminate all underlying subscriptions associated
-         * with this object.
-         */
-        TelemetrySubscription.prototype.unsubscribe = function () {
-            if (this.unlistenToMutation) {
-                this.unlistenToMutation();
-            }
-
-            return this.unsubscribeAll();
-        };
-
-        /**
-         * Get the most recent domain value that has been observed
-         * for the specified domain object. This will typically be
-         * a timestamp.
-         *
-         * The domain object passed here should be one that is
-         * subscribed-to here; that is, it should be one of the
-         * domain objects returned by `getTelemetryObjects()`.
-         *
-         * @param {DomainObject} domainObject the object of interest
-         * @param {string} [key] the symbolic identifier of the domain
-         *        to look up; if omitted, the value for this object's
-         *        default domain will be used
-         * @returns the most recent domain value observed
-         */
-        TelemetrySubscription.prototype.getDomainValue = function (domainObject, key) {
-            var id = domainObject.getId(),
-                latestValue = this.latestValues[id];
-
-            return latestValue && (key
-                ? latestValue.datum[key]
-                : latestValue.domain);
-        };
-
-        /**
-         * Get the most recent range value that has been observed
-         * for the specified domain object. This will typically
-         * be a numeric measurement.
-         *
-         * The domain object passed here should be one that is
-         * subscribed-to here; that is, it should be one of the
-         * domain objects returned by `getTelemetryObjects()`.
-         *
-         * @param {DomainObject} domainObject the object of interest
-         * @param {string} [key] the symbolic identifier of the range
-         *        to look up; if omitted, the value for this object's
-         *        default range will be used
-         * @returns the most recent range value observed
-         */
-        TelemetrySubscription.prototype.getRangeValue = function (domainObject, key) {
-            var id = domainObject.getId(),
-                latestValue = this.latestValues[id];
-
-            return latestValue && (key
-                ? latestValue.datum[key]
-                : latestValue.range);
-        };
-
-        /**
-         * Get the latest telemetry datum for this domain object.
-         *
-         * @param {DomainObject} domainObject the object of interest
-         * @returns {TelemetryDatum} the most recent datum
-         */
-        TelemetrySubscription.prototype.getDatum = function (domainObject) {
-            var id = domainObject.getId();
-
-            return (this.latestValues[id] || {}).datum;
-        };
-
-        /**
-         * Get all telemetry-providing domain objects which are
-         * being observed as part of this subscription.
-         *
-         * Capability delegation will be taken into account (so, if
-         * a Telemetry Panel was passed in the constructor, this will
-         * return its contents.) Capability delegation is resolved
-         * asynchronously so the return value here may change over
-         * time; while this resolution is pending, this method will
-         * return an empty array.
-         *
-         * @returns {DomainObject[]} all subscribed-to domain objects
-         */
-        TelemetrySubscription.prototype.getTelemetryObjects = function () {
-            return this.telemetryObjects;
-        };
-
-        /**
-         * Get all telemetry metadata associated with
-         * telemetry-providing domain objects managed by
-         * this controller.
-         *
-         * This will ordered in the
-         * same manner as `getTelemetryObjects()` or
-         * `getResponse()`; that is, the metadata at a
-         * given index will correspond to the telemetry-providing
-         * domain object at the same index.
-         * @returns {TelemetryMetadata[]} an array of metadata objects
-         */
-        TelemetrySubscription.prototype.getMetadata = function () {
-            return this.metadatas;
-        };
-
-        /**
-         * Get a promise for all telemetry-providing objects
-         * associated with this subscription.
-         * @returns {Promise.<DomainObject[]>} a promise for
-         *          telemetry-providing objects
-         * @memberof platform/telemetry.TelemetrySubscription#
-         */
-        TelemetrySubscription.prototype.promiseTelemetryObjects = function () {
-            // Unsubscribe promise is available after objects
-            // are loaded.
-            return this.telemetryObjectPromise;
-        };
-
-        return TelemetrySubscription;
-
-    }
-);
-
diff --git a/platform/telemetry/src/TelemetryTable.js b/platform/telemetry/src/TelemetryTable.js
deleted file mode 100644
index 363755444a4..00000000000
--- a/platform/telemetry/src/TelemetryTable.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        /**
-         * Supports TelemetrySubscription. Provides a simple data structure
-         * (with a pool-like interface) that aggregates key-value pairs into
-         * one large object, overwriting new values as necessary. Stands
-         * in contrast to the TelemetryQueue, which will avoid overwriting
-         * values.
-         * @memberof platform/telemetry
-         * @constructor
-         * @implements {platform/telemetry.TelemetryPool}
-         */
-        function TelemetryTable() {
-        }
-
-        TelemetryTable.prototype.isEmpty = function () {
-            return !this.table;
-        };
-
-        TelemetryTable.prototype.poll = function () {
-            var t = this.table;
-            this.table = undefined;
-
-            return t;
-        };
-
-        TelemetryTable.prototype.put = function (key, value) {
-            this.table = this.table || {};
-            this.table[key] = value;
-        };
-
-        return TelemetryTable;
-    }
-);
diff --git a/platform/telemetry/test/TelemetryAggregatorSpec.js b/platform/telemetry/test/TelemetryAggregatorSpec.js
deleted file mode 100644
index 9c3115c535d..00000000000
--- a/platform/telemetry/test/TelemetryAggregatorSpec.js
+++ /dev/null
@@ -1,125 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/TelemetryAggregator"],
-    function (TelemetryAggregator) {
-
-        describe("The telemetry aggregator", function () {
-            var mockQ,
-                mockProviders,
-                mockUnsubscribes,
-                aggregator;
-
-            function mockPromise(value) {
-                return {
-                    then: function (callback) {
-                        return mockPromise(callback(value));
-                    }
-                };
-            }
-
-            function makeMockProvider(key, index) {
-                var provider = jasmine.createSpyObj(
-                        "provider" + index,
-                        ["requestTelemetry", "subscribe"]
-                    ),
-                    unsubscribe = jasmine.createSpy("unsubscribe" + index);
-                provider.requestTelemetry.and.returnValue({ someKey: key });
-                provider.subscribe.and.returnValue(unsubscribe);
-
-                // Store to verify interactions later
-                mockUnsubscribes[index] = unsubscribe;
-
-                return provider;
-            }
-
-            beforeEach(function () {
-                mockQ = jasmine.createSpyObj("$q", ["all"]);
-                mockQ.all.and.returnValue(mockPromise([]));
-
-                mockUnsubscribes = [];
-                mockProviders = ["a", "b", "c"].map(makeMockProvider);
-
-                aggregator = new TelemetryAggregator(mockQ, mockProviders);
-            });
-
-            it("passes requests to aggregated providers", function () {
-                var requests = [
-                    { someKey: "some value" },
-                    { someKey: "some other value" }
-                ];
-
-                aggregator.requestTelemetry(requests);
-
-                mockProviders.forEach(function (mockProvider) {
-                    expect(mockProvider.requestTelemetry)
-                        .toHaveBeenCalledWith(requests);
-                });
-            });
-
-            it("merges results from all providers", function () {
-                var capture = jasmine.createSpy("capture");
-
-                mockQ.all.and.returnValue(mockPromise([
-                    { someKey: "some value" },
-                    { someOtherKey: "some other value" }
-                ]));
-
-                aggregator.requestTelemetry().then(capture);
-
-                // Verify that aggregator results were run through
-                // $q.all
-                expect(mockQ.all).toHaveBeenCalledWith([
-                    { someKey: 'a' },
-                    { someKey: 'b' },
-                    { someKey: 'c' }
-                ]);
-
-                expect(capture).toHaveBeenCalledWith({
-                    someKey: "some value",
-                    someOtherKey: "some other value"
-                });
-            });
-
-            it("broadcasts subscriptions from all providers", function () {
-                var mockCallback = jasmine.createSpy("callback"),
-                    subscription = aggregator.subscribe(mockCallback);
-
-                // Make sure all providers got subscribed to
-                mockProviders.forEach(function (mockProvider) {
-                    expect(mockProvider.subscribe).toHaveBeenCalled();
-                });
-
-                // Verify that unsubscription gets broadcast too
-                mockUnsubscribes.forEach(function (mockUnsubscribe) {
-                    expect(mockUnsubscribe).not.toHaveBeenCalled();
-                });
-                subscription(); // unsubscribe
-                mockUnsubscribes.forEach(function (mockUnsubscribe) {
-                    expect(mockUnsubscribe).toHaveBeenCalled();
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/telemetry/test/TelemetryCapabilitySpec.js b/platform/telemetry/test/TelemetryCapabilitySpec.js
deleted file mode 100644
index 6ad7001d2e4..00000000000
--- a/platform/telemetry/test/TelemetryCapabilitySpec.js
+++ /dev/null
@@ -1,377 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/TelemetryCapability"],
-    function (TelemetryCapability) {
-
-        describe("The telemetry capability", function () {
-            var mockInjector,
-                mockQ,
-                mockLog,
-                mockDomainObject,
-                mockTelemetryService,
-                mockReject,
-                mockUnsubscribe,
-                telemetry,
-                mockTelemetryAPI,
-                mockMetadata,
-                mockAPI;
-
-            function mockPromise(value) {
-                return {
-                    then: function (callback) {
-                        return mockPromise(callback(value));
-                    }
-                };
-            }
-
-            function noop() {
-            }
-
-            beforeEach(function () {
-                mockInjector = jasmine.createSpyObj("$injector", ["get"]);
-                mockQ = jasmine.createSpyObj("$q", ["when", "reject"]);
-                mockLog = jasmine.createSpyObj("$log", ["warn", "info", "debug"]);
-                mockDomainObject = jasmine.createSpyObj(
-                    "domainObject",
-                    ["getId", "getCapability", "getModel"]
-                );
-                mockTelemetryService = jasmine.createSpyObj(
-                    "telemetryService",
-                    ["requestTelemetry", "subscribe"]
-                );
-                mockReject = jasmine.createSpyObj("reject", ["then"]);
-                mockUnsubscribe = jasmine.createSpy("unsubscribe");
-
-                mockInjector.get.and.returnValue(mockTelemetryService);
-
-                mockQ.when.and.callFake(mockPromise);
-                mockQ.reject.and.returnValue(mockReject);
-
-                mockDomainObject.getId.and.returnValue("testId");
-                mockDomainObject.getModel.and.returnValue({
-                    telemetry: {
-                        source: "testSource",
-                        key: "testKey"
-                    }
-                });
-
-                mockTelemetryService.requestTelemetry
-                    .and.returnValue(mockPromise({}));
-                mockTelemetryService.subscribe
-                    .and.returnValue(mockUnsubscribe);
-
-                // Bubble up...
-                mockReject.then.and.returnValue(mockReject);
-
-                mockTelemetryAPI = jasmine.createSpyObj("telemetryAPI", [
-                    "getMetadata",
-                    "subscribe",
-                    "request",
-                    "findRequestProvider",
-                    "findSubscriptionProvider"
-                ]);
-
-                mockMetadata = jasmine.createSpyObj('telemetryMetadata', [
-                    'valuesForHints',
-                    'values'
-                ]);
-
-                mockMetadata.valuesForHints.and.callFake(function (hints) {
-                    var hint = hints[0];
-                    var metadatum = {
-                        key: 'default' + hint
-                    };
-                    metadatum[hint] = "foo";
-
-                    return [metadatum];
-                });
-
-                mockTelemetryAPI.getMetadata.and.returnValue(mockMetadata);
-
-                mockAPI = {
-                    telemetry: mockTelemetryAPI,
-                    time: {
-                        bounds: function () {
-                            return {
-                                start: 0,
-                                end: 1
-                            };
-                        },
-                        timeSystem: function () {
-                            return {
-                                key: 'mockTimeSystem'
-                            };
-                        }
-                    }
-                };
-
-                telemetry = new TelemetryCapability(
-                    mockAPI,
-                    mockInjector,
-                    mockQ,
-                    mockLog,
-                    mockDomainObject
-                );
-            });
-
-            it("applies only to objects with telemetry sources", function () {
-                expect(TelemetryCapability.appliesTo({
-                    telemetry: { source: "testSource" }
-                })).toBeTruthy();
-                expect(TelemetryCapability.appliesTo({
-                    xtelemetry: { source: "testSource" }
-                })).toBeFalsy();
-                expect(TelemetryCapability.appliesTo({})).toBeFalsy();
-                expect(TelemetryCapability.appliesTo()).toBeFalsy();
-            });
-
-            it("gets a telemetry service from the injector", function () {
-                telemetry.requestData();
-                expect(mockInjector.get)
-                    .toHaveBeenCalledWith("telemetryService");
-            });
-
-            it("applies request arguments", function () {
-                telemetry.requestData({ start: 42 });
-                expect(mockTelemetryService.requestTelemetry)
-                    .toHaveBeenCalledWith([{
-                        id: "testId", // from domain object
-                        source: "testSource", // from model
-                        key: "testKey", // from model
-                        start: 42, // from argument
-                        domain: 'mockTimeSystem',
-                        domains: [{
-                            domain: "foo",
-                            key: 'defaultdomain'
-                        }],
-                        ranges: [{
-                            range: "foo",
-                            key: 'defaultrange'
-                        }]
-                    }]);
-            });
-
-            it("provides an empty series when telemetry is missing", function () {
-                var series;
-                mockTelemetryService.requestTelemetry.and.returnValue(mockPromise({}));
-                telemetry.requestData({}).then(function (s) {
-                    series = s;
-                });
-                expect(series.getPointCount()).toEqual(0);
-            });
-
-            it("provides telemetry metadata", function () {
-                expect(telemetry.getMetadata()).toEqual({
-                    id: "testId", // from domain object
-                    source: "testSource",
-                    key: "testKey",
-                    start: 0,
-                    end: 1,
-                    domain: 'mockTimeSystem',
-                    domains: [{
-                        domain: "foo",
-                        key: 'defaultdomain'
-                    }],
-                    ranges: [{
-                        range: "foo",
-                        key: 'defaultrange'
-                    }]
-                });
-            });
-
-            it("uses domain object as a key if needed", function () {
-                // Don't include key in telemetry
-                mockDomainObject.getModel.and.returnValue({
-                    telemetry: { source: "testSource" }
-                });
-
-                // Should have used the domain object's ID
-                expect(telemetry.getMetadata()).toEqual({
-                    id: "testId", // from domain object
-                    source: "testSource", // from model
-                    key: "testId", // from domain object
-                    start: 0,
-                    end: 1,
-                    domain: 'mockTimeSystem',
-                    domains: [{
-                        domain: "foo",
-                        key: 'defaultdomain'
-                    }],
-                    ranges: [{
-                        range: "foo",
-                        key: 'defaultrange'
-                    }]
-                });
-            });
-
-            it("warns if no telemetry service can be injected", function () {
-                mockInjector.get.and.callFake(function () {
-                    throw "";
-                });
-
-                // Verify precondition
-                expect(mockLog.warn).not.toHaveBeenCalled();
-
-                telemetry.requestData();
-
-                expect(mockLog.info).toHaveBeenCalled();
-            });
-
-            it("if a new style telemetry source is available, use it", function () {
-                var mockProvider = {};
-                mockTelemetryAPI.findSubscriptionProvider.and.returnValue(mockProvider);
-                telemetry.subscribe(noop, {});
-                expect(mockTelemetryService.subscribe).not.toHaveBeenCalled();
-                expect(mockTelemetryAPI.subscribe).toHaveBeenCalled();
-            });
-
-            it("if a new style telemetry source is not available, revert to old API", function () {
-                mockTelemetryAPI.findSubscriptionProvider.and.returnValue(undefined);
-                telemetry.subscribe(noop, {});
-                expect(mockTelemetryAPI.subscribe).not.toHaveBeenCalled();
-                expect(mockTelemetryService.subscribe).toHaveBeenCalled();
-            });
-
-            it("Wraps telemetry returned from the new API as a telemetry series", function () {
-                var returnedTelemetry;
-                var mockTelemetry = [{
-                    prop1: "val1",
-                    prop2: "val2",
-                    prop3: "val3"
-                },
-                {
-                    prop1: "val4",
-                    prop2: "val5",
-                    prop3: "val6"
-                }];
-                var mockProvider = {};
-
-                mockMetadata.values.and.returnValue([
-                    {
-                        key: 'defaultrange',
-                        source: 'prop1'
-                    },
-                    {
-                        key: 'defaultdomain',
-                        source: 'prop2'
-                    },
-                    {
-                        key: 'prop3',
-                        source: 'prop3'
-                    }
-                ]);
-
-                mockTelemetryAPI.findRequestProvider.and.returnValue(mockProvider);
-                mockTelemetryAPI.request.and.returnValue(Promise.resolve(mockTelemetry));
-
-                return telemetry.requestData({}).then(function (data) {
-                    returnedTelemetry = data;
-
-                    expect(returnedTelemetry.getPointCount).toBeDefined();
-                    expect(returnedTelemetry.getDomainValue).toBeDefined();
-                    expect(returnedTelemetry.getRangeValue).toBeDefined();
-                    expect(returnedTelemetry.getPointCount()).toBe(2);
-                    // Default domain + remap should work.
-                    expect(returnedTelemetry.getDomainValue(0)).toBe('val2');
-                    expect(returnedTelemetry.getDomainValue(1)).toBe('val5');
-                    // explicit domain should work
-                    expect(returnedTelemetry.getDomainValue(0, 'prop3')).toBe('val3');
-                    expect(returnedTelemetry.getDomainValue(1, 'prop3')).toBe('val6');
-                    // default range + remap should work
-                    expect(returnedTelemetry.getRangeValue(0)).toBe('val1');
-                    expect(returnedTelemetry.getRangeValue(1)).toBe('val4');
-                    // explicit range should work
-                    expect(returnedTelemetry.getRangeValue(0, 'prop3')).toBe('val3');
-                    expect(returnedTelemetry.getRangeValue(1, 'prop3')).toBe('val6');
-                });
-
-            });
-
-            it("allows subscriptions to updates", function () {
-                var mockCallback = jasmine.createSpy("callback"),
-                    subscription = telemetry.subscribe(mockCallback);
-
-                // Verify subscription to the appropriate object
-                expect(mockTelemetryService.subscribe).toHaveBeenCalledWith(
-                    jasmine.any(Function),
-                    [{
-                        id: "testId", // from domain object
-                        source: "testSource",
-                        key: "testKey",
-                        start: 0,
-                        end: 1,
-                        domain: 'mockTimeSystem',
-                        domains: [{
-                            domain: "foo",
-                            key: "defaultdomain"
-                        }],
-                        ranges: [{
-                            range: "foo",
-                            key: "defaultrange"
-                        }]
-                    }]
-                );
-
-                // Check that the callback gets invoked
-                expect(mockCallback).not.toHaveBeenCalled();
-                mockTelemetryService.subscribe.calls.mostRecent().args[0]({
-                    testSource: { testKey: { someKey: "some value" } }
-                });
-                expect(mockCallback).toHaveBeenCalledWith(
-                    { someKey: "some value" }
-                );
-
-                // Finally, unsubscribe
-                expect(mockUnsubscribe).not.toHaveBeenCalled();
-                subscription(); // should be an unsubscribe function
-                expect(mockUnsubscribe).toHaveBeenCalled();
-            });
-
-            it("applies time conductor bounds if request bounds not defined", function () {
-                var fullRequest = telemetry.buildRequest({});
-                var mockBounds = mockAPI.time.bounds();
-
-                expect(fullRequest.start).toBe(mockBounds.start);
-                expect(fullRequest.end).toBe(mockBounds.end);
-
-                fullRequest = telemetry.buildRequest({
-                    start: 10,
-                    end: 20
-                });
-
-                expect(fullRequest.start).toBe(10);
-                expect(fullRequest.end).toBe(20);
-            });
-
-            it("applies domain from time system if none defined", function () {
-                var fullRequest = telemetry.buildRequest({});
-                var mockTimeSystem = mockAPI.time.timeSystem();
-                expect(fullRequest.domain).toBe(mockTimeSystem.key);
-
-                fullRequest = telemetry.buildRequest({domain: 'someOtherDomain'});
-                expect(fullRequest.domain).toBe('someOtherDomain');
-            });
-        });
-    }
-);
diff --git a/platform/telemetry/test/TelemetryControllerSpec.js b/platform/telemetry/test/TelemetryControllerSpec.js
deleted file mode 100644
index 3be305e755c..00000000000
--- a/platform/telemetry/test/TelemetryControllerSpec.js
+++ /dev/null
@@ -1,245 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/TelemetryController"],
-    function (TelemetryController) {
-
-        describe("The telemetry controller", function () {
-            var mockScope,
-                mockQ,
-                mockTimeout,
-                mockLog,
-                mockDomainObject,
-                mockTelemetry,
-                mockUnsubscribe,
-                controller;
-
-            function mockPromise(value) {
-                return (value && value.then) ? value : {
-                    then: function (callback) {
-                        return mockPromise(callback(value));
-                    }
-                };
-            }
-
-            beforeEach(function () {
-                mockScope = jasmine.createSpyObj(
-                    "$scope",
-                    ["$on", "$broadcast", "$watch"]
-                );
-                mockQ = jasmine.createSpyObj("$q", ["all", "when"]);
-                mockTimeout = jasmine.createSpy("$timeout");
-                mockLog = jasmine.createSpyObj("$log", ["warn", "info", "debug"]);
-
-                mockDomainObject = jasmine.createSpyObj(
-                    "domainObject",
-                    [
-                        "getId",
-                        "getCapability",
-                        "getModel",
-                        "hasCapability",
-                        "useCapability"
-                    ]
-                );
-
-                mockTelemetry = jasmine.createSpyObj(
-                    "telemetry",
-                    ["requestData", "subscribe", "getMetadata"]
-                );
-                mockUnsubscribe = jasmine.createSpy("unsubscribe");
-
-                mockQ.when.and.callFake(mockPromise);
-                mockQ.all.and.returnValue(mockPromise([mockDomainObject]));
-
-                mockDomainObject.getId.and.returnValue("testId");
-                mockDomainObject.getModel.and.returnValue({ name: "TEST" });
-                mockDomainObject.useCapability.and.returnValue([]);
-                mockDomainObject.hasCapability.and.returnValue(true);
-                mockDomainObject.getCapability.and.returnValue(mockTelemetry);
-
-                mockTelemetry.getMetadata.and.returnValue({
-                    source: "testSource",
-                    key: "testKey"
-                });
-                mockTelemetry.requestData.and.returnValue(mockPromise({
-                    telemetryKey: "some value"
-                }));
-                mockTelemetry.subscribe.and.returnValue(mockUnsubscribe);
-
-                controller = new TelemetryController(
-                    mockScope,
-                    mockQ,
-                    mockTimeout,
-                    mockLog
-                );
-            });
-
-            it("watches the domain object in scope", function () {
-                expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "domainObject",
-                    jasmine.any(Function)
-                );
-            });
-
-            it("starts a refresh interval", function () {
-                expect(mockTimeout).toHaveBeenCalledWith(
-                    jasmine.any(Function),
-                    jasmine.any(Number)
-                );
-            });
-
-            it("changes refresh interval on request", function () {
-                controller.setRefreshInterval(42);
-
-                // Tick the clock; should issue a new request, with
-                // the new interval
-                mockTimeout.calls.mostRecent().args[0]();
-
-                expect(mockTimeout).toHaveBeenCalledWith(
-                    jasmine.any(Function),
-                    42
-                );
-            });
-
-            it("requests data from domain objects", function () {
-                // Push into the scope...
-                mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
-
-                expect(mockTelemetry.requestData).toHaveBeenCalled();
-            });
-
-            it("logs a warning if no telemetry capability exists", function () {
-                mockDomainObject.getCapability.and.returnValue(undefined);
-
-                // Push into the scope...
-                mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
-
-                expect(mockLog.warn).toHaveBeenCalled();
-            });
-
-            it("provides telemetry metadata", function () {
-                // Push into the scope...
-                mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
-
-                expect(controller.getMetadata()).toEqual([
-                    {
-                        source: "testSource",
-                        key: "testKey"
-                    }
-                ]);
-            });
-
-            it("provides telemetry-possessing domain objects", function () {
-                // Push into the scope...
-                mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
-
-                expect(controller.getTelemetryObjects())
-                    .toEqual([mockDomainObject]);
-            });
-
-            it("provides telemetry data", function () {
-                // Push into the scope...
-                mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
-
-                expect(controller.getResponse())
-                    .toEqual([{telemetryKey: "some value"}]);
-            });
-
-            it("provides telemetry data per-id", function () {
-                // Push into the scope...
-                mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
-
-                expect(controller.getResponse("testId"))
-                    .toEqual({telemetryKey: "some value"});
-            });
-
-            it("provides a check for pending requests", function () {
-                expect(controller.isRequestPending()).toBeFalsy();
-            });
-
-            it("allows a request to be specified", function () {
-                // Push into the scope...
-                mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
-
-                controller.requestData({ someKey: "some request" });
-
-                expect(mockTelemetry.requestData).toHaveBeenCalledWith({
-                    someKey: "some request"
-                });
-            });
-
-            it("allows an object to be removed from scope", function () {
-                // Push into the scope...
-                mockScope.$watch.calls.mostRecent().args[1](undefined);
-
-                expect(controller.getTelemetryObjects())
-                    .toEqual([]);
-            });
-
-            it("broadcasts when telemetry is available", function () {
-                // Push into the scope...
-                mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
-                controller.requestData({ someKey: "some request" });
-
-                // Verify precondition
-                expect(mockScope.$broadcast).not.toHaveBeenCalled();
-
-                // Call the broadcast timeout
-                mockTimeout.calls.mostRecent().args[0]();
-
-                // Should have broadcast a telemetryUpdate
-                expect(mockScope.$broadcast)
-                    .toHaveBeenCalledWith("telemetryUpdate");
-            });
-
-            it("subscribes for streaming telemetry updates", function () {
-                // Push into scope to create subscriptions
-                mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
-                // Should have subscribed
-                expect(mockTelemetry.subscribe)
-                    .toHaveBeenCalledWith(jasmine.any(Function));
-                // Invoke the subscriber function (for coverage)
-                mockTelemetry.subscribe.calls.mostRecent().args[0]({});
-            });
-
-            it("listens for scope destruction to clean up", function () {
-                expect(mockScope.$on).toHaveBeenCalledWith(
-                    "$destroy",
-                    jasmine.any(Function)
-                );
-                mockScope.$on.calls.mostRecent().args[1]();
-            });
-
-            it("unsubscribes when destroyed", function () {
-                // Push into scope to create subscriptions
-                mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
-
-                // Invoke "$destroy" listener
-                mockScope.$on.calls.mostRecent().args[1]();
-
-                // Should have unsubscribed
-                expect(mockUnsubscribe).toHaveBeenCalled();
-            });
-        });
-    }
-);
diff --git a/platform/telemetry/test/TelemetryFormatterSpec.js b/platform/telemetry/test/TelemetryFormatterSpec.js
deleted file mode 100644
index c8bb9391c4b..00000000000
--- a/platform/telemetry/test/TelemetryFormatterSpec.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/TelemetryFormatter"],
-    function (TelemetryFormatter) {
-
-        describe("The telemetry formatter", function () {
-            var mockFormatService,
-                mockFormat,
-                formatter;
-
-            beforeEach(function () {
-                mockFormatService =
-                    jasmine.createSpyObj("formatService", ["getFormat"]);
-                mockFormat = jasmine.createSpyObj("format", [
-                    "validate",
-                    "parse",
-                    "format"
-                ]);
-                mockFormatService.getFormat.and.returnValue(mockFormat);
-                formatter = new TelemetryFormatter(mockFormatService);
-            });
-
-            it("formats domains using the formatService", function () {
-                var testValue = 12321, testResult = "some result";
-                mockFormat.format.and.returnValue(testResult);
-
-                expect(formatter.formatDomainValue(testValue))
-                    .toEqual(testResult);
-                expect(mockFormat.format).toHaveBeenCalledWith(testValue);
-            });
-
-            it("passes format keys to the formatService", function () {
-                formatter.formatDomainValue(12321, "someKey");
-                expect(mockFormatService.getFormat)
-                    .toHaveBeenCalledWith("someKey");
-            });
-
-            it("formats ranges as values", function () {
-                var value = 3.14159265352979323846264338, // not pi
-                    formatted = formatter.formatRangeValue(value);
-                // Make sure we don't lose information by formatting
-                expect(parseFloat(formatted)).toEqual(value);
-            });
-        });
-    }
-);
diff --git a/platform/telemetry/test/TelemetryHandleSpec.js b/platform/telemetry/test/TelemetryHandleSpec.js
deleted file mode 100644
index 9f94f1487d4..00000000000
--- a/platform/telemetry/test/TelemetryHandleSpec.js
+++ /dev/null
@@ -1,141 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/TelemetryHandle"],
-    function (TelemetryHandle) {
-
-        describe("A telemetry handle", function () {
-            var mockQ,
-                mockSubscription,
-                mockDomainObject,
-                mockTelemetry,
-                mockSeries,
-                mockCallback,
-                handle;
-
-            function asPromise(v) {
-                return (v || {}).then ? v : {
-                    then: function (callback) {
-                        return asPromise(callback(v));
-                    }
-                };
-            }
-
-            beforeEach(function () {
-                mockQ = jasmine.createSpyObj('$q', ['when', 'all']);
-                mockSubscription = jasmine.createSpyObj(
-                    'subscription',
-                    [
-                        'makeDatum',
-                        'getDatum',
-                        'unsubscribe',
-                        'getTelemetryObjects',
-                        'promiseTelemetryObjects'
-                    ]
-                );
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getId', 'getCapability']
-                );
-                mockTelemetry = jasmine.createSpyObj(
-                    'telemetry',
-                    ['requestData']
-                );
-                mockSeries = jasmine.createSpyObj(
-                    'series',
-                    ['getPointCount', 'getDomainValue', 'getRangeValue']
-                );
-                mockCallback = jasmine.createSpy('callback');
-
-                // Simulate $q.all, at least for asPromise-provided promises
-                mockQ.all.and.callFake(function (values) {
-                    return values.map(function (v) {
-                        var r;
-                        asPromise(v).then(function (value) {
-                            r = value;
-                        });
-
-                        return r;
-                    });
-                });
-                mockQ.when.and.callFake(asPromise);
-                mockSubscription.getTelemetryObjects
-                    .and.returnValue([mockDomainObject]);
-                mockSubscription.promiseTelemetryObjects
-                    .and.returnValue(asPromise([mockDomainObject]));
-                mockDomainObject.getId.and.returnValue('testId');
-                mockDomainObject.getCapability.and.returnValue(mockTelemetry);
-                mockTelemetry.requestData.and.returnValue(asPromise(mockSeries));
-
-                handle = new TelemetryHandle(mockQ, mockSubscription);
-            });
-
-            it("exposes subscription API", function () {
-                // Should still expose methods from the provided subscription
-                // (though these may have been wrapped)
-                expect(mockSubscription.getTelemetryObjects)
-                    .not.toHaveBeenCalled();
-                handle.getTelemetryObjects();
-                expect(mockSubscription.getTelemetryObjects)
-                    .toHaveBeenCalled();
-
-                expect(mockSubscription.unsubscribe)
-                    .not.toHaveBeenCalled();
-                handle.unsubscribe();
-                expect(mockSubscription.unsubscribe)
-                    .toHaveBeenCalled();
-            });
-
-            it("provides an interface for historical requests", function () {
-                handle.request({}, mockCallback);
-                expect(mockCallback).toHaveBeenCalledWith(
-                    mockDomainObject,
-                    mockSeries
-                );
-            });
-
-            it("provides the latest series for domain objects", function () {
-                handle.request({});
-                expect(handle.getSeries(mockDomainObject))
-                    .toEqual(mockSeries);
-            });
-
-            it("provides access to the datum objects by index", function () {
-                var testDatum = {
-                        a: 1,
-                        b: 2
-                    }, testIndex = 42;
-                mockSubscription.makeDatum.and.returnValue(testDatum);
-                handle.request({});
-                expect(handle.getDatum(mockDomainObject, testIndex))
-                    .toEqual(testDatum);
-                expect(mockSubscription.makeDatum)
-                    .toHaveBeenCalledWith(
-                        mockDomainObject,
-                        mockSeries,
-                        testIndex
-                    );
-            });
-        });
-    }
-);
diff --git a/platform/telemetry/test/TelemetryHandlerSpec.js b/platform/telemetry/test/TelemetryHandlerSpec.js
deleted file mode 100644
index ac231d8af87..00000000000
--- a/platform/telemetry/test/TelemetryHandlerSpec.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/TelemetryHandler"],
-    function (TelemetryHandler) {
-
-        describe("The telemetry handler", function () {
-            // TelemetryHandler just provides a factory
-            // for TelemetryHandle, so most real testing
-            // should happen there.
-            var mockQ,
-                mockSubscriber,
-                mockDomainObject,
-                mockCallback,
-                mockSubscription,
-                handler;
-
-            beforeEach(function () {
-                mockQ = jasmine.createSpyObj("$q", ["when"]);
-                mockSubscriber = jasmine.createSpyObj(
-                    'telemetrySubscriber',
-                    ['subscribe']
-                );
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    ['getId', 'getCapability']
-                );
-                mockCallback = jasmine.createSpy('callback');
-                mockSubscription = jasmine.createSpyObj(
-                    'subscription',
-                    [
-                        'unsubscribe',
-                        'getTelemetryObjects',
-                        'getRangeValue',
-                        'getDomainValue'
-                    ]
-                );
-
-                mockSubscriber.subscribe.and.returnValue(mockSubscription);
-
-                handler = new TelemetryHandler(mockQ, mockSubscriber);
-            });
-
-            it("acts as a factory for subscription objects", function () {
-                var handle = handler.handle(
-                    mockDomainObject,
-                    mockCallback
-                );
-                // Just verify that this looks like a TelemetrySubscription
-                [
-                    "unsubscribe",
-                    "getTelemetryObjects",
-                    "getRangeValue",
-                    "getDomainValue",
-                    "request"
-                ].forEach(function (method) {
-                    expect(handle[method]).toEqual(jasmine.any(Function));
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/telemetry/test/TelemetryQueueSpec.js b/platform/telemetry/test/TelemetryQueueSpec.js
deleted file mode 100644
index a79872822c0..00000000000
--- a/platform/telemetry/test/TelemetryQueueSpec.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/TelemetryQueue"],
-    function (TelemetryQueue) {
-
-        describe("The telemetry queue", function () {
-            var queue;
-
-            beforeEach(function () {
-                // put, isEmpty, dequeue
-                queue = new TelemetryQueue();
-            });
-
-            it("stores elements by key", function () {
-                queue.put("a", { someKey: "some value" });
-                expect(queue.poll())
-                    .toEqual({ a: { someKey: "some value" }});
-            });
-
-            it("merges non-overlapping keys", function () {
-                queue.put("a", { someKey: "some value" });
-                queue.put("b", 42);
-                expect(queue.poll())
-                    .toEqual({
-                        a: { someKey: "some value" },
-                        b: 42
-                    });
-            });
-
-            it("adds new objects for repeated keys", function () {
-                queue.put("a", { someKey: "some value" });
-                queue.put("a", { someKey: "some other value" });
-                queue.put("b", 42);
-                expect(queue.poll())
-                    .toEqual({
-                        a: { someKey: "some value" },
-                        b: 42
-                    });
-                expect(queue.poll())
-                    .toEqual({ a: { someKey: "some other value" } });
-            });
-
-            it("reports emptiness", function () {
-                expect(queue.isEmpty()).toBeTruthy();
-                queue.put("a", { someKey: "some value" });
-                queue.put("a", { someKey: "some other value" });
-                queue.put("b", 42);
-                expect(queue.isEmpty()).toBeFalsy();
-                queue.poll();
-                expect(queue.isEmpty()).toBeFalsy();
-                queue.poll();
-                expect(queue.isEmpty()).toBeTruthy();
-            });
-
-        });
-
-    }
-);
diff --git a/platform/telemetry/test/TelemetrySubscriberSpec.js b/platform/telemetry/test/TelemetrySubscriberSpec.js
deleted file mode 100644
index 3959c8ddd46..00000000000
--- a/platform/telemetry/test/TelemetrySubscriberSpec.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/TelemetrySubscriber"],
-    function (TelemetrySubscriber) {
-
-        describe("The telemetry subscriber", function () {
-            // TelemetrySubscriber just provides a factory
-            // for TelemetrySubscription, so most real testing
-            // should happen there.
-            var mockQ,
-                mockTimeout,
-                mockDomainObject,
-                mockCallback,
-                mockPromise,
-                subscriber;
-
-            beforeEach(function () {
-                mockQ = jasmine.createSpyObj("$q", ["when"]);
-                mockTimeout = jasmine.createSpy("$timeout");
-                mockDomainObject = jasmine.createSpyObj(
-                    "domainObject",
-                    ["getCapability", "useCapability", "hasCapability"]
-                );
-                mockCallback = jasmine.createSpy("callback");
-                mockPromise = jasmine.createSpyObj("promise", ["then"]);
-
-                mockQ.when.and.returnValue(mockPromise);
-                mockPromise.then.and.returnValue(mockPromise);
-
-                subscriber = new TelemetrySubscriber(mockQ, mockTimeout);
-            });
-
-            it("acts as a factory for subscription objects", function () {
-                var subscription = subscriber.subscribe(
-                    mockDomainObject,
-                    mockCallback
-                );
-                // Just verify that this looks like a TelemetrySubscription
-                [
-                    "unsubscribe",
-                    "getTelemetryObjects",
-                    "getRangeValue",
-                    "getDomainValue"
-                ].forEach(function (method) {
-                    expect(subscription[method])
-                        .toEqual(jasmine.any(Function));
-                });
-            });
-
-        });
-    }
-);
diff --git a/platform/telemetry/test/TelemetrySubscriptionSpec.js b/platform/telemetry/test/TelemetrySubscriptionSpec.js
deleted file mode 100644
index 4c96925a88f..00000000000
--- a/platform/telemetry/test/TelemetrySubscriptionSpec.js
+++ /dev/null
@@ -1,271 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/TelemetrySubscription"],
-    function (TelemetrySubscription) {
-
-        describe("A telemetry subscription", function () {
-            var mockQ,
-                mockTimeout,
-                mockDomainObject,
-                mockCallback,
-                mockTelemetry,
-                mockMutation,
-                mockUnsubscribe,
-                mockUnlisten,
-                mockSeries,
-                testMetadata,
-                subscription;
-
-            function mockPromise(value) {
-                return (value && value.then) ? value : {
-                    then: function (callback) {
-                        return mockPromise(callback(value));
-                    }
-                };
-            }
-
-            beforeEach(function () {
-                testMetadata = { someKey: "some value" };
-
-                mockQ = jasmine.createSpyObj("$q", ["when", "all"]);
-                mockTimeout = jasmine.createSpy("$timeout");
-                mockDomainObject = jasmine.createSpyObj(
-                    "domainObject",
-                    ["getCapability", "useCapability", "hasCapability", "getId"]
-                );
-                mockCallback = jasmine.createSpy("callback");
-                mockTelemetry = jasmine.createSpyObj(
-                    "telemetry",
-                    ["subscribe", "getMetadata"]
-                );
-                mockMutation = jasmine.createSpyObj(
-                    "mutation",
-                    ["mutate", "listen"]
-                );
-                mockUnsubscribe = jasmine.createSpy("unsubscribe");
-                mockUnlisten = jasmine.createSpy("unlisten");
-                mockSeries = jasmine.createSpyObj(
-                    "series",
-                    ["getPointCount", "getDomainValue", "getRangeValue"]
-                );
-
-                mockQ.when.and.callFake(mockPromise);
-
-                mockDomainObject.hasCapability.and.returnValue(true);
-                mockDomainObject.getCapability.and.callFake(function (c) {
-                    return {
-                        telemetry: mockTelemetry,
-                        mutation: mockMutation
-                    }[c];
-                });
-                mockDomainObject.getId.and.returnValue('test-id');
-
-                mockTelemetry.subscribe.and.returnValue(mockUnsubscribe);
-                mockTelemetry.getMetadata.and.returnValue(testMetadata);
-
-                mockMutation.listen.and.returnValue(mockUnlisten);
-
-                mockSeries.getPointCount.and.returnValue(42);
-                mockSeries.getDomainValue.and.returnValue(123456);
-                mockSeries.getRangeValue.and.returnValue(789);
-
-                subscription = new TelemetrySubscription(
-                    mockQ,
-                    mockTimeout,
-                    mockDomainObject,
-                    mockCallback
-                );
-            });
-
-            it("subscribes to the provided object", function () {
-                expect(mockTelemetry.subscribe).toHaveBeenCalled();
-            });
-
-            it("unsubscribes on request", function () {
-                expect(mockUnsubscribe).not.toHaveBeenCalled();
-                subscription.unsubscribe();
-                expect(mockUnsubscribe).toHaveBeenCalled();
-            });
-
-            it("fires callbacks when subscriptions update", function () {
-                // Callback fires when telemetry objects become available,
-                // so track initial call count instead of verifying that
-                // it hasn't been called at all.
-                var initialCalls = mockCallback.calls.count();
-                mockTelemetry.subscribe.calls.mostRecent().args[0](mockSeries);
-                // This gets fired via a timeout, so trigger that
-                expect(mockTimeout).toHaveBeenCalledWith(
-                    jasmine.any(Function),
-                    0
-                );
-                mockTimeout.calls.mostRecent().args[0]();
-                // Should have triggered the callback to alert that
-                // new data was available
-                expect(mockCallback.calls.count()).toEqual(initialCalls + 1);
-            });
-
-            it("fires subscription callbacks once per cycle", function () {
-                var i;
-
-                // Verify precondition - one call for telemetryObjects
-                expect(mockCallback.calls.count()).toEqual(1);
-
-                for (i = 0; i < 100; i += 1) {
-                    mockTelemetry.subscribe.calls.mostRecent().args[0](mockSeries);
-                }
-
-                // This gets fired via a timeout, so trigger any of those
-                mockTimeout.calls.all().forEach(function (call) {
-                    call.args[0]();
-                });
-                // Should have only triggered the
-                expect(mockCallback.calls.count()).toEqual(2);
-            });
-
-            it("reports its latest observed data values", function () {
-                mockTelemetry.subscribe.calls.mostRecent().args[0](mockSeries);
-                // This gets fired via a timeout, so trigger that
-                mockTimeout.calls.mostRecent().args[0]();
-                // Verify that the last sample was looked at
-                expect(mockSeries.getDomainValue).toHaveBeenCalledWith(41);
-                expect(mockSeries.getRangeValue).toHaveBeenCalledWith(41);
-                // Domain and range values should now be available
-                expect(subscription.getDomainValue(mockDomainObject))
-                    .toEqual(123456);
-                expect(subscription.getRangeValue(mockDomainObject))
-                    .toEqual(789);
-            });
-
-            it("provides no objects if no domain object is provided", function () {
-                // omit last arguments
-                subscription = new TelemetrySubscription(mockQ, mockTimeout);
-
-                // Should have no objects
-                expect(subscription.getTelemetryObjects()).toEqual([]);
-            });
-
-            // This test case corresponds to plot usage of
-            // telemetrySubscription, where failure to callback
-            // once-per-update results in loss of data, WTD-784
-            it("fires one event per update if requested", function () {
-                var i, domains = [], ranges = [], lastCall, initialCalls;
-
-                // Clear out the subscription from beforeEach
-                subscription.unsubscribe();
-                // Create a subscription which does not drop events
-                subscription = new TelemetrySubscription(
-                    mockQ,
-                    mockTimeout,
-                    mockDomainObject,
-                    mockCallback,
-                    true // Don't drop updates!
-                );
-
-                // Track calls at this point
-                initialCalls = mockCallback.calls.count();
-
-                // Snapshot getDomainValue, getRangeValue at time of callback
-                mockCallback.and.callFake(function () {
-                    domains.push(subscription.getDomainValue(mockDomainObject));
-                    ranges.push(subscription.getRangeValue(mockDomainObject));
-                });
-
-                // Send 100 updates
-                for (i = 0; i < 100; i += 1) {
-                    // Return different values to verify later
-                    mockSeries.getDomainValue.and.returnValue(i);
-                    mockSeries.getRangeValue.and.returnValue(i * 2);
-                    mockTelemetry.subscribe.calls.mostRecent().args[0](mockSeries);
-                }
-
-                // Fire all timeouts that get scheduled
-                while (mockTimeout.calls.mostRecent() !== lastCall) {
-                    lastCall = mockTimeout.calls.mostRecent();
-                    lastCall.args[0]();
-                }
-
-                // Should have only triggered the
-                expect(mockCallback.calls.count()).toEqual(100 + initialCalls);
-            });
-
-            it("provides domain object metadata", function () {
-                expect(subscription.getMetadata()[0])
-                    .toEqual(testMetadata);
-            });
-
-            it("fires callback when telemetry objects are available", function () {
-                expect(mockCallback.calls.count()).toEqual(1);
-            });
-
-            it("exposes a promise for telemetry objects", function () {
-                var mockCallback2 = jasmine.createSpy('callback');
-                subscription.promiseTelemetryObjects().then(mockCallback2);
-
-                expect(mockCallback2)
-                    .toHaveBeenCalledWith([mockDomainObject]);
-            });
-
-            it("reinitializes on mutation", function () {
-                expect(mockTelemetry.subscribe.calls.count()).toEqual(1);
-                // Notify of a mutation which appears to change composition
-                mockMutation.listen.calls.mostRecent().args[0]({
-                    composition: ['Z']
-                });
-                // Use subscribe call as an indication of reinitialization
-                expect(mockTelemetry.subscribe.calls.count()).toEqual(2);
-            });
-
-            it("stops listening for mutation on unsubscribe", function () {
-                expect(mockUnlisten).not.toHaveBeenCalled();
-                subscription.unsubscribe();
-                expect(mockUnlisten).toHaveBeenCalled();
-            });
-
-            it("provides telemetry as datum objects", function () {
-                var testDatum = {
-                    a: 1,
-                    b: 13,
-                    c: 42,
-                    d: -1977
-                };
-
-                function lookup(index, key) {
-                    return testDatum[key];
-                }
-
-                mockSeries.getDomainValue.and.callFake(lookup);
-                mockSeries.getRangeValue.and.callFake(lookup);
-
-                testMetadata.domains = [{ key: 'a' }, { key: 'b'}];
-                testMetadata.ranges = [{ key: 'c' }, { key: 'd'}];
-
-                mockTelemetry.subscribe.calls.mostRecent().args[0](mockSeries);
-                mockTimeout.calls.mostRecent().args[0]();
-
-                expect(subscription.getDatum(mockDomainObject))
-                    .toEqual(testDatum);
-            });
-        });
-    }
-);
diff --git a/platform/telemetry/test/TelemetryTableSpec.js b/platform/telemetry/test/TelemetryTableSpec.js
deleted file mode 100644
index b0131050787..00000000000
--- a/platform/telemetry/test/TelemetryTableSpec.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ["../src/TelemetryTable"],
-    function (TelemetryTable) {
-
-        describe("The telemetry table", function () {
-            var queue;
-
-            beforeEach(function () {
-                // put, isEmpty, dequeue
-                queue = new TelemetryTable();
-            });
-
-            it("stores elements by key", function () {
-                queue.put("a", { someKey: "some value" });
-                expect(queue.poll())
-                    .toEqual({ a: { someKey: "some value" }});
-            });
-
-            it("merges non-overlapping keys", function () {
-                queue.put("a", { someKey: "some value" });
-                queue.put("b", 42);
-                expect(queue.poll())
-                    .toEqual({
-                        a: { someKey: "some value" },
-                        b: 42
-                    });
-            });
-
-            it("overwrites repeated keys", function () {
-                queue.put("a", { someKey: "some value" });
-                queue.put("a", { someKey: "some other value" });
-                queue.put("b", 42);
-                expect(queue.poll())
-                    .toEqual({
-                        a: { someKey: "some other value" },
-                        b: 42
-                    });
-                expect(queue.poll())
-                    .toBeUndefined();
-            });
-
-            it("reports emptiness", function () {
-                expect(queue.isEmpty()).toBeTruthy();
-                queue.put("a", { someKey: "some value" });
-                queue.put("a", { someKey: "some other value" });
-                queue.put("b", 42);
-                expect(queue.isEmpty()).toBeFalsy();
-                queue.poll();
-                expect(queue.isEmpty()).toBeTruthy();
-            });
-
-        });
-
-    }
-);
diff --git a/src/BundleRegistry.js b/src/BundleRegistry.js
deleted file mode 100644
index 881b489baae..00000000000
--- a/src/BundleRegistry.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(function () {
-
-    function BundleRegistry() {
-        this.bundles = {};
-        this.knownBundles = {};
-    }
-
-    BundleRegistry.prototype.register = function (path, definition) {
-        if (Object.prototype.hasOwnProperty.call(this.knownBundles, path)) {
-            throw new Error('Cannot register bundle with duplicate path', path);
-        }
-
-        this.knownBundles[path] = definition;
-    };
-
-    BundleRegistry.prototype.enable = function (path) {
-        if (!this.knownBundles[path]) {
-            throw new Error('Unknown bundle ' + path);
-        }
-
-        this.bundles[path] = this.knownBundles[path];
-    };
-
-    BundleRegistry.prototype.disable = function (path) {
-        if (!this.bundles[path]) {
-            throw new Error('Tried to disable inactive bundle ' + path);
-        }
-
-        delete this.bundles[path];
-    };
-
-    BundleRegistry.prototype.contains = function (path) {
-        return Boolean(this.bundles[path]);
-    };
-
-    BundleRegistry.prototype.get = function (path) {
-        return this.bundles[path];
-    };
-
-    BundleRegistry.prototype.list = function () {
-        return Object.keys(this.bundles);
-    };
-
-    BundleRegistry.prototype.remove = BundleRegistry.prototype.disable;
-
-    BundleRegistry.prototype.delete = function (path) {
-        if (!this.knownBundles[path]) {
-            throw new Error('Cannot remove Unknown Bundle ' + path);
-        }
-
-        delete this.bundles[path];
-        delete this.knownBundles[path];
-    };
-
-    return BundleRegistry;
-});
diff --git a/src/BundleRegistrySpec.js b/src/BundleRegistrySpec.js
deleted file mode 100644
index a1dd639504f..00000000000
--- a/src/BundleRegistrySpec.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(['./BundleRegistry'], function (BundleRegistry) {
-
-    describe("BundleRegistry", function () {
-        let testPath;
-        let bundleRegistry;
-
-        beforeEach(function () {
-            testPath = 'some/bundle';
-            bundleRegistry = new BundleRegistry();
-        });
-
-        it("initially lists no bundles", function () {
-            expect(bundleRegistry.list()).toEqual([]);
-        });
-
-        it("initially contains no bundles", function () {
-            expect(bundleRegistry.contains(testPath))
-                .toBe(false);
-        });
-
-        it("initially provides no bundles", function () {
-            expect(bundleRegistry.get(testPath))
-                .toBeUndefined();
-        });
-
-        describe("when a bundle has been registered", function () {
-            let testBundleDef;
-
-            beforeEach(function () {
-                testBundleDef = { someKey: "some value" };
-                bundleRegistry.register(testPath, testBundleDef);
-                bundleRegistry.enable(testPath);
-            });
-
-            it("lists registered bundles", function () {
-                expect(bundleRegistry.list()).toEqual([testPath]);
-            });
-
-            it("contains registered bundles", function () {
-                expect(bundleRegistry.contains(testPath))
-                    .toBe(true);
-            });
-
-            it("provides registered bundles", function () {
-                expect(bundleRegistry.get(testPath))
-                    .toBe(testBundleDef);
-            });
-
-            describe("and then removed", function () {
-                beforeEach(function () {
-                    bundleRegistry.remove(testPath);
-                });
-
-                it("appears empty again", function () {
-                    expect(bundleRegistry.list()).toEqual([]);
-                });
-
-                it("does not contain the removed bundle", function () {
-                    expect(bundleRegistry.contains(testPath))
-                        .toBe(false);
-                });
-            });
-        });
-    });
-
-});
diff --git a/src/MCT.js b/src/MCT.js
index 2eaef6e1fd7..0a011b33abf 100644
--- a/src/MCT.js
+++ b/src/MCT.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,454 +19,357 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/* eslint-disable no-undef */
+import EventEmitter from 'EventEmitter';
+import { createApp, markRaw } from 'vue';
+
+import ActionsAPI from './api/actions/ActionsAPI.js';
+import AnnotationAPI from './api/annotation/AnnotationAPI.js';
+import BrandingAPI from './api/Branding.js';
+import CompositionAPI from './api/composition/CompositionAPI.js';
+import EditorAPI from './api/Editor.js';
+import FaultManagementAPI from './api/faultmanagement/FaultManagementAPI.js';
+import FormsAPI from './api/forms/FormsAPI.js';
+import IndicatorAPI from './api/indicators/IndicatorAPI.js';
+import MenuAPI from './api/menu/MenuAPI.js';
+import NotificationAPI from './api/notifications/NotificationAPI.js';
+import ObjectAPI from './api/objects/ObjectAPI.js';
+import OverlayAPI from './api/overlays/OverlayAPI.js';
+import PriorityAPI from './api/priority/PriorityAPI.js';
+import StatusAPI from './api/status/StatusAPI.js';
+import TelemetryAPI from './api/telemetry/TelemetryAPI.js';
+import TimeAPI from './api/time/TimeAPI.js';
+import ToolTipAPI from './api/tooltips/ToolTipAPI.js';
+import TypeRegistry from './api/types/TypeRegistry.js';
+import UserAPI from './api/user/UserAPI.js';
+import DuplicateActionPlugin from './plugins/duplicate/plugin.js';
+import ExportAsJSONAction from './plugins/exportAsJSONAction/plugin.js';
+import ImageryPlugin from './plugins/imagery/plugin.js';
+import ImportFromJSONAction from './plugins/importFromJSONAction/plugin.js';
+import LicensesPlugin from './plugins/licenses/plugin.js';
+import LinkActionPlugin from './plugins/linkAction/plugin.js';
+import MoveActionPlugin from './plugins/move/plugin.js';
+import plugins from './plugins/plugins.js';
+import RemoveActionPlugin from './plugins/remove/plugin.js';
+import Selection from './selection/Selection.js';
+import Layout from './ui/layout/AppLayout.vue';
+import PreviewPlugin from './ui/preview/plugin.js';
+import InspectorViewRegistry from './ui/registries/InspectorViewRegistry.js';
+import ToolbarRegistry from './ui/registries/ToolbarRegistry.js';
+import ViewRegistry from './ui/registries/ViewRegistry.js';
+import ApplicationRouter from './ui/router/ApplicationRouter.js';
+import Browse from './ui/router/Browse.js';
+
+/**
+ * Open MCT is an extensible web application for building mission
+ * control user interfaces. This module is itself an instance of
+ * [MCT]{@link module:openmct.MCT}, which provides an interface for
+ * configuring and executing the application.
+ *
+ * @exports openmct
+ */
+
+/**
+ * The Open MCT application. This may be configured by installing plugins
+ * or registering extensions before the application is started.
+ * @constructor
+ * @memberof module:openmct
+ */
+export class MCT extends EventEmitter {
+  constructor() {
+    super();
+    EventEmitter.call(this);
+
+    this.buildInfo = {
+      version: __OPENMCT_VERSION__,
+      buildDate: __OPENMCT_BUILD_DATE__,
+      revision: __OPENMCT_REVISION__,
+      branch: __OPENMCT_BUILD_BRANCH__
+    };
+
+    this.destroy = this.destroy.bind(this);
+    this.defaultClock = 'local';
+
+    this.plugins = plugins;
 
-define([
-    'EventEmitter',
-    'uuid',
-    './BundleRegistry',
-    './installDefaultBundles',
-    './api/api',
-    './api/overlays/OverlayAPI',
-    './selection/Selection',
-    'objectUtils',
-    './plugins/plugins',
-    './adapter/indicators/legacy-indicators-plugin',
-    './plugins/buildInfo/plugin',
-    './ui/registries/ViewRegistry',
-    './plugins/imagery/plugin',
-    './ui/registries/InspectorViewRegistry',
-    './ui/registries/ToolbarRegistry',
-    './ui/router/ApplicationRouter',
-    './ui/router/Browse',
-    '../platform/framework/src/Main',
-    './ui/layout/Layout.vue',
-    '../platform/core/src/objects/DomainObjectImpl',
-    '../platform/core/src/capabilities/ContextualDomainObject',
-    './ui/preview/plugin',
-    './api/Branding',
-    './plugins/licenses/plugin',
-    './plugins/remove/plugin',
-    './plugins/move/plugin',
-    './plugins/duplicate/plugin',
-    'vue'
-], function (
-    EventEmitter,
-    uuid,
-    BundleRegistry,
-    installDefaultBundles,
-    api,
-    OverlayAPI,
-    Selection,
-    objectUtils,
-    plugins,
-    LegacyIndicatorsPlugin,
-    buildInfoPlugin,
-    ViewRegistry,
-    ImageryPlugin,
-    InspectorViewRegistry,
-    ToolbarRegistry,
-    ApplicationRouter,
-    Browse,
-    Main,
-    Layout,
-    DomainObjectImpl,
-    ContextualDomainObject,
-    PreviewPlugin,
-    BrandingAPI,
-    LicensesPlugin,
-    RemoveActionPlugin,
-    MoveActionPlugin,
-    DuplicateActionPlugin,
-    Vue
-) {
     /**
-     * Open MCT is an extensible web application for building mission
-     * control user interfaces. This module is itself an instance of
-     * [MCT]{@link module:openmct.MCT}, which provides an interface for
-     * configuring and executing the application.
-     *
-     * @exports openmct
+     * Tracks current selection state of the application.
+     * @private
      */
+    this.selection = new Selection(this);
 
     /**
-     * The Open MCT application. This may be configured by installing plugins
-     * or registering extensions before the application is started.
-     * @class MCT
-     * @memberof module:openmct
-     * @augments {EventEmitter}
+     * MCT's time conductor, which may be used to synchronize view contents
+     * for telemetry- or time-based views.
+     * @type {module:openmct.TimeConductor}
+     * @memberof module:openmct.MCT#
+     * @name conductor
      */
-    function MCT() {
-        EventEmitter.call(this);
-        /* eslint-disable no-undef */
-        this.buildInfo = {
-            version: __OPENMCT_VERSION__,
-            buildDate: __OPENMCT_BUILD_DATE__,
-            revision: __OPENMCT_REVISION__,
-            branch: __OPENMCT_BUILD_BRANCH__
-        };
-        /* eslint-enable no-undef */
-
-        this.legacyBundle = {
-            extensions: {
-                services: [
-                    {
-                        key: "openmct",
-                        implementation: function ($injector) {
-                            this.$injector = $injector;
-
-                            return this;
-                        }.bind(this),
-                        depends: ['$injector']
-                    }
-                ]
-            }
-        };
-
-        this.destroy = this.destroy.bind(this);
-        /**
-         * Tracks current selection state of the application.
-         * @private
-         */
-        this.selection = new Selection(this);
-
-        /**
-         * MCT's time conductor, which may be used to synchronize view contents
-         * for telemetry- or time-based views.
-         * @type {module:openmct.TimeConductor}
-         * @memberof module:openmct.MCT#
-         * @name conductor
-         */
-        this.time = new api.TimeAPI();
-
-        /**
-         * An interface for interacting with the composition of domain objects.
-         * The composition of a domain object is the list of other domain
-         * objects it "contains" (for instance, that should be displayed
-         * beneath it in the tree.)
-         *
-         * `composition` may be called as a function, in which case it acts
-         * as [`composition.get`]{@link module:openmct.CompositionAPI#get}.
-         *
-         * @type {module:openmct.CompositionAPI}
-         * @memberof module:openmct.MCT#
-         * @name composition
-         */
-        this.composition = new api.CompositionAPI(this);
-
-        /**
-         * Registry for views of domain objects which should appear in the
-         * main viewing area.
-         *
-         * @type {module:openmct.ViewRegistry}
-         * @memberof module:openmct.MCT#
-         * @name objectViews
-         */
-        this.objectViews = new ViewRegistry();
-
-        /**
-         * Registry for views which should appear in the Inspector area.
-         * These views will be chosen based on the selection state.
-         *
-         * @type {module:openmct.InspectorViewRegistry}
-         * @memberof module:openmct.MCT#
-         * @name inspectorViews
-         */
-        this.inspectorViews = new InspectorViewRegistry();
-
-        /**
-         * Registry for views which should appear in Edit Properties
-         * dialogs, and similar user interface elements used for
-         * modifying domain objects external to its regular views.
-         *
-         * @type {module:openmct.ViewRegistry}
-         * @memberof module:openmct.MCT#
-         * @name propertyEditors
-         */
-        this.propertyEditors = new ViewRegistry();
-
-        /**
-         * Registry for views which should appear in the status indicator area.
-         * @type {module:openmct.ViewRegistry}
-         * @memberof module:openmct.MCT#
-         * @name indicators
-         */
-        this.indicators = new ViewRegistry();
-
-        /**
-         * Registry for views which should appear in the toolbar area while
-         * editing. These views will be chosen based on the selection state.
-         *
-         * @type {module:openmct.ToolbarRegistry}
-         * @memberof module:openmct.MCT#
-         * @name toolbars
-         */
-        this.toolbars = new ToolbarRegistry();
-
-        /**
-         * Registry for domain object types which may exist within this
-         * instance of Open MCT.
-         *
-         * @type {module:openmct.TypeRegistry}
-         * @memberof module:openmct.MCT#
-         * @name types
-         */
-        this.types = new api.TypeRegistry();
-
-        /**
-         * An interface for interacting with domain objects and the domain
-         * object hierarchy.
-         *
-         * @type {module:openmct.ObjectAPI}
-         * @memberof module:openmct.MCT#
-         * @name objects
-         */
-        this.objects = new api.ObjectAPI.default(this.types, this);
-
-        /**
-         * An interface for retrieving and interpreting telemetry data associated
-         * with a domain object.
-         *
-         * @type {module:openmct.TelemetryAPI}
-         * @memberof module:openmct.MCT#
-         * @name telemetry
-         */
-        this.telemetry = new api.TelemetryAPI(this);
-
-        /**
-         * An interface for creating new indicators and changing them dynamically.
-         *
-         * @type {module:openmct.IndicatorAPI}
-         * @memberof module:openmct.MCT#
-         * @name indicators
-         */
-        this.indicators = new api.IndicatorAPI(this);
-
-        this.notifications = new api.NotificationAPI();
-
-        this.editor = new api.EditorAPI.default(this);
-
-        this.overlays = new OverlayAPI.default();
-
-        this.menus = new api.MenuAPI(this);
-
-        this.actions = new api.ActionsAPI(this);
-
-        this.status = new api.StatusAPI(this);
-
-        this.router = new ApplicationRouter(this);
-
-        this.branding = BrandingAPI.default;
-
-        this.legacyRegistry = new BundleRegistry();
-        installDefaultBundles(this.legacyRegistry);
-
-        // Plugins that are installed by default
-
-        this.install(this.plugins.Plot());
-        this.install(this.plugins.TelemetryTable.default());
-        this.install(PreviewPlugin.default());
-        this.install(LegacyIndicatorsPlugin());
-        this.install(LicensesPlugin.default());
-        this.install(RemoveActionPlugin.default());
-        this.install(MoveActionPlugin.default());
-        this.install(DuplicateActionPlugin.default());
-        this.install(this.plugins.FolderView());
-        this.install(this.plugins.Tabs());
-        this.install(ImageryPlugin.default());
-        this.install(this.plugins.FlexibleLayout());
-        this.install(this.plugins.GoToOriginalAction());
-        this.install(this.plugins.OpenInNewTabAction());
-        this.install(this.plugins.ImportExport());
-        this.install(this.plugins.WebPage());
-        this.install(this.plugins.Condition());
-        this.install(this.plugins.ConditionWidget());
-        this.install(this.plugins.URLTimeSettingsSynchronizer());
-        this.install(this.plugins.NotificationIndicator());
-        this.install(this.plugins.NewFolderAction());
-        this.install(this.plugins.ViewDatumAction());
-        this.install(this.plugins.ViewLargeAction());
-        this.install(this.plugins.ObjectInterceptors());
-        this.install(this.plugins.NonEditableFolder());
-    }
-
-    MCT.prototype = Object.create(EventEmitter.prototype);
-
-    MCT.prototype.MCT = MCT;
-
-    MCT.prototype.legacyExtension = function (category, extension) {
-        this.legacyBundle.extensions[category] =
-            this.legacyBundle.extensions[category] || [];
-        this.legacyBundle.extensions[category].push(extension);
-    };
+    this.time = new TimeAPI(this);
 
     /**
-     * Return a legacy object, for compatibility purposes only.  This method
-     * will be deprecated and removed in the future.
-     * @private
+     * An interface for interacting with the composition of domain objects.
+     * The composition of a domain object is the list of other domain
+     * objects it "contains" (for instance, that should be displayed
+     * beneath it in the tree.)
+     *
+     * `composition` may be called as a function, in which case it acts
+     * as [`composition.get`]{@link module:openmct.CompositionAPI#get}.
+     *
+     * @type {module:openmct.CompositionAPI}
+     * @memberof module:openmct.MCT#
+     * @name composition
      */
-    MCT.prototype.legacyObject = function (domainObject) {
-        let capabilityService = this.$injector.get('capabilityService');
-
-        function instantiate(model, keyString) {
-            const capabilities = capabilityService.getCapabilities(model, keyString);
-            model.id = keyString;
-
-            return new DomainObjectImpl(keyString, model, capabilities);
-        }
-
-        if (Array.isArray(domainObject)) {
-            // an array of domain objects. [object, ...ancestors] representing
-            // a single object with a given chain of ancestors.  We instantiate
-            // as a single contextual domain object.
-            return domainObject
-                .map((o) => {
-                    let keyString = objectUtils.makeKeyString(o.identifier);
-                    let oldModel = objectUtils.toOldFormat(o);
-
-                    return instantiate(oldModel, keyString);
-                })
-                .reverse()
-                .reduce((parent, child) => {
-                    return new ContextualDomainObject(child, parent);
-                });
-
-        } else {
-            let keyString = objectUtils.makeKeyString(domainObject.identifier);
-            let oldModel = objectUtils.toOldFormat(domainObject);
-
-            return instantiate(oldModel, keyString);
-        }
-    };
+    this.composition = new CompositionAPI(this);
 
     /**
-     * Set path to where assets are hosted.  This should be the path to main.js.
+     * Registry for views of domain objects which should appear in the
+     * main viewing area.
+     *
+     * @type {module:openmct.ViewRegistry}
      * @memberof module:openmct.MCT#
-     * @method setAssetPath
+     * @name objectViews
      */
-    MCT.prototype.setAssetPath = function (assetPath) {
-        this._assetPath = assetPath;
-    };
+    this.objectViews = new ViewRegistry();
 
     /**
-     * Get path to where assets are hosted.
+     * Registry for views which should appear in the Inspector area.
+     * These views will be chosen based on the selection state.
+     *
+     * @type {module:openmct.InspectorViewRegistry}
      * @memberof module:openmct.MCT#
-     * @method getAssetPath
+     * @name inspectorViews
      */
-    MCT.prototype.getAssetPath = function () {
-        const assetPathLength = this._assetPath && this._assetPath.length;
-        if (!assetPathLength) {
-            return '/';
-        }
-
-        if (this._assetPath[assetPathLength - 1] !== '/') {
-            return this._assetPath + '/';
-        }
-
-        return this._assetPath;
-    };
+    this.inspectorViews = new InspectorViewRegistry();
 
     /**
-     * Start running Open MCT. This should be called only after any plugins
-     * have been installed.
-     * @fires module:openmct.MCT~start
+     * Registry for views which should appear in Edit Properties
+     * dialogs, and similar user interface elements used for
+     * modifying domain objects external to its regular views.
+     *
+     * @type {module:openmct.ViewRegistry}
      * @memberof module:openmct.MCT#
-     * @method start
-     * @param {HTMLElement} [domElement] the DOM element in which to run
-     *        MCT; if undefined, MCT will be run in the body of the document
+     * @name propertyEditors
      */
-    MCT.prototype.start = function (domElement = document.body, isHeadlessMode = false) {
-        if (this.types.get('layout') === undefined) {
-            this.install(this.plugins.DisplayLayout({
-                showAsView: ['summary-widget']
-            }));
-        }
+    this.propertyEditors = new ViewRegistry();
 
-        this.element = domElement;
+    /**
+     * Registry for views which should appear in the toolbar area while
+     * editing. These views will be chosen based on the selection state.
+     *
+     * @type {module:openmct.ToolbarRegistry}
+     * @memberof module:openmct.MCT#
+     * @name toolbars
+     */
+    this.toolbars = new ToolbarRegistry();
 
-        this.legacyExtension('runs', {
-            depends: ['navigationService'],
-            implementation: function (navigationService) {
-                navigationService
-                    .addListener(this.emit.bind(this, 'navigation'));
-            }.bind(this)
-        });
+    /**
+     * Registry for domain object types which may exist within this
+     * instance of Open MCT.
+     *
+     * @type {module:openmct.TypeRegistry}
+     * @memberof module:openmct.MCT#
+     * @name types
+     */
+    this.types = new TypeRegistry();
 
-        // TODO: remove with legacy types.
-        this.types.listKeys().forEach(function (typeKey) {
-            const type = this.types.get(typeKey);
-            const legacyDefinition = type.toLegacyDefinition();
-            legacyDefinition.key = typeKey;
-            this.legacyExtension('types', legacyDefinition);
-        }.bind(this));
+    /**
+     * An interface for interacting with domain objects and the domain
+     * object hierarchy.
+     *
+     * @type {module:openmct.ObjectAPI}
+     * @memberof module:openmct.MCT#
+     * @name objects
+     */
+    this.objects = new ObjectAPI(this.types, this);
 
-        this.legacyRegistry.register('adapter', this.legacyBundle);
-        this.legacyRegistry.enable('adapter');
+    /**
+     * An interface for retrieving and interpreting telemetry data associated
+     * with a domain object.
+     *
+     * @type {module:openmct.TelemetryAPI}
+     * @memberof module:openmct.MCT#
+     * @name telemetry
+     */
+    this.telemetry = new TelemetryAPI(this);
 
-        this.router.route(/^\/$/, () => {
-            this.router.setPath('/browse/');
-        });
+    /**
+     * An interface for creating new indicators and changing them dynamically.
+     *
+     * @type {module:openmct.IndicatorAPI}
+     * @memberof module:openmct.MCT#
+     * @name indicators
+     */
+    this.indicators = new IndicatorAPI(this);
 
-        /**
-         * Fired by [MCT]{@link module:openmct.MCT} when the application
-         * is started.
-         * @event start
-         * @memberof module:openmct.MCT~
-         */
-        const startPromise = new Main();
-        startPromise.run(this)
-            .then(function (angular) {
-                this.$angular = angular;
-                // OpenMCT Object provider doesn't operate properly unless
-                // something has depended upon objectService.  Cool, right?
-                this.$injector.get('objectService');
+    /**
+     * MCT's user awareness management, to enable user and
+     * role specific functionality.
+     * @type {module:openmct.UserAPI}
+     * @memberof module:openmct.MCT#
+     * @name user
+     */
+    this.user = new UserAPI(this);
+
+    this.notifications = new NotificationAPI();
+    this.editor = new EditorAPI(this);
+    this.overlays = new OverlayAPI();
+    this.tooltips = new ToolTipAPI();
+    this.menus = new MenuAPI(this);
+    this.actions = new ActionsAPI(this);
+    this.status = new StatusAPI(this);
+    this.priority = PriorityAPI;
+    this.router = new ApplicationRouter(this);
+    this.faults = new FaultManagementAPI(this);
+    this.forms = new FormsAPI(this);
+    this.branding = BrandingAPI;
 
-                if (!isHeadlessMode) {
-                    const appLayout = new Vue({
-                        components: {
-                            'Layout': Layout.default
-                        },
-                        provide: {
-                            openmct: this
-                        },
-                        template: '<Layout ref="layout"></Layout>'
-                    });
-                    domElement.appendChild(appLayout.$mount().$el);
+    /**
+     * MCT's annotation API that enables
+     * human-created comments and categorization linked to data products
+     * @type {module:openmct.AnnotationAPI}
+     * @memberof module:openmct.MCT#
+     * @name annotation
+     */
+    this.annotation = new AnnotationAPI(this);
+
+    // Plugins that are installed by default
+    this.install(this.plugins.Plot());
+    this.install(this.plugins.TelemetryTable());
+    this.install(PreviewPlugin());
+    this.install(LicensesPlugin());
+    this.install(RemoveActionPlugin());
+    this.install(MoveActionPlugin());
+    this.install(LinkActionPlugin());
+    this.install(DuplicateActionPlugin());
+    this.install(ExportAsJSONAction());
+    this.install(ImportFromJSONAction());
+    this.install(this.plugins.FormActions());
+    this.install(this.plugins.FolderView());
+    this.install(this.plugins.Tabs());
+    this.install(ImageryPlugin());
+    this.install(this.plugins.FlexibleLayout());
+    this.install(this.plugins.GoToOriginalAction());
+    this.install(this.plugins.OpenInNewTabAction());
+    this.install(this.plugins.ReloadAction());
+    this.install(this.plugins.WebPage());
+    this.install(this.plugins.Condition());
+    this.install(this.plugins.ConditionWidget());
+    this.install(this.plugins.URLTimeSettingsSynchronizer());
+    this.install(this.plugins.NotificationIndicator());
+    this.install(this.plugins.NewFolderAction());
+    this.install(this.plugins.ViewDatumAction());
+    this.install(this.plugins.ViewLargeAction());
+    this.install(this.plugins.ObjectInterceptors());
+    this.install(this.plugins.DeviceClassifier());
+    this.install(this.plugins.UserIndicator());
+    this.install(this.plugins.Gauge());
+    this.install(this.plugins.InspectorViews());
+  }
+  /**
+   * Set path to where assets are hosted.  This should be the path to main.js.
+   * @memberof module:openmct.MCT#
+   * @method setAssetPath
+   */
+  setAssetPath(assetPath) {
+    this._assetPath = assetPath;
+  }
+  /**
+   * Get path to where assets are hosted.
+   * @memberof module:openmct.MCT#
+   * @method getAssetPath
+   */
+  getAssetPath() {
+    const assetPathLength = this._assetPath && this._assetPath.length;
+    if (!assetPathLength) {
+      return '/';
+    }
 
-                    this.layout = appLayout.$refs.layout;
-                    Browse(this);
-                }
+    if (this._assetPath[assetPathLength - 1] !== '/') {
+      return this._assetPath + '/';
+    }
 
-                window.addEventListener('beforeunload', this.destroy);
+    return this._assetPath;
+  }
+  /**
+   * Start running Open MCT. This should be called only after any plugins
+   * have been installed.
+   * @fires module:openmct.MCT~start
+   * @memberof module:openmct.MCT#
+   * @method start
+   * @param {HTMLElement} [domElement] the DOM element in which to run
+   *        MCT; if undefined, MCT will be run in the body of the document
+   */
+  start(domElement = document.body.firstElementChild, isHeadlessMode = false) {
+    // Create element to mount Layout if it doesn't exist
+    if (domElement === null) {
+      domElement = document.createElement('div');
+      document.body.appendChild(domElement);
+    }
+    domElement.id = 'openmct-app';
+
+    if (this.types.get('layout') === undefined) {
+      this.install(
+        this.plugins.DisplayLayout({
+          showAsView: ['summary-widget']
+        })
+      );
+    }
 
-                this.router.start();
-                this.emit('start');
-            }.bind(this));
-    };
+    this.element = domElement;
 
-    MCT.prototype.startHeadless = function () {
-        let unreachableNode = document.createElement('div');
+    if (!this.time.getClock()) {
+      this.time.setClock(this.defaultClock);
+    }
 
-        return this.start(unreachableNode, true);
-    };
+    this.router.route(/^\/$/, () => {
+      this.router.setPath('/browse/');
+    });
 
     /**
-     * Install a plugin in MCT.
-     *
-     * @param {Function} plugin a plugin install function which will be
-     *     invoked with the mct instance.
-     * @memberof module:openmct.MCT#
+     * Fired by [MCT]{@link module:openmct.MCT} when the application
+     * is started.
+     * @event start
+     * @memberof module:openmct.MCT~
      */
-    MCT.prototype.install = function (plugin) {
-        plugin(this);
-    };
-
-    MCT.prototype.destroy = function () {
-        window.removeEventListener('beforeunload', this.destroy);
-        this.emit('destroy');
-        this.router.destroy();
-    };
-
-    MCT.prototype.plugins = plugins;
-
-    return MCT;
-});
+    if (!isHeadlessMode) {
+      const appLayout = createApp(Layout);
+      appLayout.provide('openmct', markRaw(this));
+      const component = appLayout.mount(domElement);
+      component.$nextTick(() => {
+        this.layout = component;
+        this.app = appLayout;
+        this.browseRoutes = new Browse(this);
+        window.addEventListener('beforeunload', this.destroy);
+        this.router.start();
+        this.emit('start');
+      });
+    } else {
+      window.addEventListener('beforeunload', this.destroy);
+
+      this.router.start();
+      this.emit('start');
+    }
+  }
+  startHeadless() {
+    let unreachableNode = document.createElement('div');
+
+    return this.start(unreachableNode, true);
+  }
+  /**
+   * Install a plugin in MCT.
+   *
+   * @param {Function} plugin a plugin install function which will be
+   *     invoked with the mct instance.
+   * @memberof module:openmct.MCT#
+   */
+  install(plugin) {
+    plugin(this);
+  }
+
+  destroy() {
+    window.removeEventListener('beforeunload', this.destroy);
+    this.emit('destroy');
+    this.router.destroy();
+  }
+}
diff --git a/src/MCTSpec.js b/src/MCTSpec.js
index 0c2237534a5..feca7718367 100644
--- a/src/MCTSpec.js
+++ b/src/MCTSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,112 +20,98 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    './plugins/plugins',
-    'legacyRegistry',
-    'utils/testing'
-], function (plugins, legacyRegistry, testUtils) {
-    describe("MCT", function () {
-        let openmct;
-        let mockPlugin;
-        let mockPlugin2;
-        let mockListener;
-        let oldBundles;
-
-        beforeEach(function () {
-            mockPlugin = jasmine.createSpy('plugin');
-            mockPlugin2 = jasmine.createSpy('plugin2');
-            mockListener = jasmine.createSpy('listener');
-            oldBundles = legacyRegistry.list();
-
-            openmct = testUtils.createOpenMct();
-
-            openmct.install(mockPlugin);
-            openmct.install(mockPlugin2);
-            openmct.on('start', mockListener);
-        });
-
-        // Clean up the dirty singleton.
-        afterEach(function () {
-            legacyRegistry.list().forEach(function (bundle) {
-                if (oldBundles.indexOf(bundle) === -1) {
-                    legacyRegistry.delete(bundle);
-                }
-            });
-
-            return testUtils.resetApplicationState(openmct);
-        });
-
-        it("exposes plugins", function () {
-            expect(openmct.plugins).toEqual(plugins);
-        });
-
-        it("does not issue a start event before started", function () {
-            expect(mockListener).not.toHaveBeenCalled();
-        });
-
-        describe("start", function () {
-            let appHolder;
-            beforeEach(function (done) {
-                appHolder = document.createElement("div");
-                openmct.on('start', done);
-                openmct.start(appHolder);
-            });
-
-            it("calls plugins for configuration", function () {
-                expect(mockPlugin).toHaveBeenCalledWith(openmct);
-                expect(mockPlugin2).toHaveBeenCalledWith(openmct);
-            });
-
-            it("emits a start event", function () {
-                expect(mockListener).toHaveBeenCalled();
-            });
-
-            it("Renders the application into the provided container element", function () {
-                let openMctShellElements = appHolder.querySelectorAll('div.l-shell');
-                expect(openMctShellElements.length).toBe(1);
-            });
-        });
-
-        describe("startHeadless", function () {
-            beforeEach(function (done) {
-                openmct.on('start', done);
-                openmct.startHeadless();
-            });
-
-            it("calls plugins for configuration", function () {
-                expect(mockPlugin).toHaveBeenCalledWith(openmct);
-                expect(mockPlugin2).toHaveBeenCalledWith(openmct);
-            });
-
-            it("emits a start event", function () {
-                expect(mockListener).toHaveBeenCalled();
-            });
-
-            it("Does not render Open MCT", function () {
-                let openMctShellElements = document.body.querySelectorAll('div.l-shell');
-                expect(openMctShellElements.length).toBe(0);
-            });
-        });
-
-        describe("setAssetPath", function () {
-            let testAssetPath;
-
-            beforeEach(function () {
-                openmct.legacyExtension = jasmine.createSpy('legacyExtension');
-            });
-
-            it("configures the path for assets", function () {
-                testAssetPath = "some/path/";
-                openmct.setAssetPath(testAssetPath);
-                expect(openmct.getAssetPath()).toBe(testAssetPath);
-            });
-
-            it("adds a trailing /", function () {
-                testAssetPath = "some/path";
-                openmct.setAssetPath(testAssetPath);
-                expect(openmct.getAssetPath()).toBe(testAssetPath + "/");
-            });
-        });
+import * as testUtils from 'utils/testing';
+
+import plugins from './plugins/plugins.js';
+
+describe('MCT', function () {
+  let openmct;
+  let mockPlugin;
+  let mockPlugin2;
+  let mockListener;
+
+  beforeEach(function () {
+    mockPlugin = jasmine.createSpy('plugin');
+    mockPlugin2 = jasmine.createSpy('plugin2');
+    mockListener = jasmine.createSpy('listener');
+
+    openmct = testUtils.createOpenMct();
+
+    openmct.install(mockPlugin);
+    openmct.install(mockPlugin2);
+    openmct.on('start', mockListener);
+  });
+
+  // Clean up the dirty singleton.
+  afterEach(function () {
+    return testUtils.resetApplicationState(openmct);
+  });
+
+  it('exposes plugins', function () {
+    expect(openmct.plugins).toEqual(plugins);
+  });
+
+  it('does not issue a start event before started', function () {
+    expect(mockListener).not.toHaveBeenCalled();
+  });
+
+  describe('start', function () {
+    let appHolder;
+    beforeEach(function (done) {
+      appHolder = document.createElement('div');
+      openmct.on('start', done);
+      openmct.start(appHolder);
+    });
+
+    it('calls plugins for configuration', function () {
+      expect(mockPlugin).toHaveBeenCalledWith(openmct);
+      expect(mockPlugin2).toHaveBeenCalledWith(openmct);
+    });
+
+    it('emits a start event', function () {
+      expect(mockListener).toHaveBeenCalled();
+    });
+
+    it('Renders the application into the provided container element', function () {
+      let openMctShellElements = appHolder.querySelectorAll('div.l-shell');
+      expect(openMctShellElements.length).toBe(1);
+    });
+  });
+
+  describe('startHeadless', function () {
+    beforeEach(function (done) {
+      openmct.on('start', done);
+      openmct.startHeadless();
+    });
+
+    it('calls plugins for configuration', function () {
+      expect(mockPlugin).toHaveBeenCalledWith(openmct);
+      expect(mockPlugin2).toHaveBeenCalledWith(openmct);
+    });
+
+    it('emits a start event', function () {
+      expect(mockListener).toHaveBeenCalled();
+    });
+
+    it('Does not render Open MCT', function () {
+      let openMctShellElements = document.body.querySelectorAll('div.l-shell');
+      expect(openMctShellElements.length).toBe(0);
+    });
+  });
+
+  describe('setAssetPath', function () {
+    let testAssetPath;
+
+    it('configures the path for assets', function () {
+      testAssetPath = 'some/path/';
+      openmct.setAssetPath(testAssetPath);
+      expect(openmct.getAssetPath()).toBe(testAssetPath);
+    });
+
+    it('adds a trailing /', function () {
+      testAssetPath = 'some/path';
+      openmct.setAssetPath(testAssetPath);
+      expect(openmct.getAssetPath()).toBe(testAssetPath + '/');
     });
+  });
 });
diff --git a/src/adapter/actions/ActionDialogDecorator.js b/src/adapter/actions/ActionDialogDecorator.js
deleted file mode 100644
index bfa6a7ba557..00000000000
--- a/src/adapter/actions/ActionDialogDecorator.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    'objectUtils'
-], function (objectUtils) {
-    function ActionDialogDecorator(mct, actionService) {
-        this.mct = mct;
-        this.actionService = actionService;
-    }
-
-    ActionDialogDecorator.prototype.getActions = function (context) {
-        const mct = this.mct;
-
-        return this.actionService.getActions(context).map(function (action) {
-            if (action.dialogService) {
-                const domainObject = objectUtils.toNewFormat(
-                    context.domainObject.getModel(),
-                    objectUtils.parseKeyString(context.domainObject.getId())
-                );
-                const providers = mct.propertyEditors.get(domainObject, mct.router.path);
-
-                if (providers.length > 0) {
-                    action.dialogService = Object.create(action.dialogService);
-                    action.dialogService.getUserInput = function (form) {
-                        return new mct.Dialog(
-                            providers[0].view(context.domainObject),
-                            form.title
-                        ).show();
-                    };
-                }
-            }
-
-            return action;
-        });
-    };
-
-    return ActionDialogDecorator;
-});
diff --git a/src/adapter/actions/LegacyActionAdapter.js b/src/adapter/actions/LegacyActionAdapter.js
deleted file mode 100644
index 352d8322ca6..00000000000
--- a/src/adapter/actions/LegacyActionAdapter.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-import LegacyContextMenuAction from './LegacyContextMenuAction';
-
-export default function LegacyActionAdapter(openmct, legacyActions) {
-    function contextualCategoryOnly(action) {
-        if (action.category === 'contextual' || (Array.isArray(action.category) && action.category.includes('contextual'))) {
-            return true;
-        }
-
-        console.warn(`DEPRECATION WARNING: Action ${action.definition.key} in bundle ${action.bundle.path} is non-contextual and should be migrated.`);
-
-        return false;
-    }
-
-    legacyActions.filter(contextualCategoryOnly)
-        .map(LegacyAction => new LegacyContextMenuAction(openmct, LegacyAction))
-        .forEach(openmct.actions.register);
-}
diff --git a/src/adapter/actions/LegacyContextMenuAction.js b/src/adapter/actions/LegacyContextMenuAction.js
deleted file mode 100644
index 7b39179a12b..00000000000
--- a/src/adapter/actions/LegacyContextMenuAction.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-import _ from 'lodash';
-const INSIDE_EDIT_PATH_BLACKLIST = ["copy", "follow", "link", "locate", "move", "link"];
-const OUTSIDE_EDIT_PATH_BLACKLIST = ["copy", "follow", "properties", "move", "link", "remove", "locate"];
-
-export default class LegacyContextMenuAction {
-    constructor(openmct, LegacyAction) {
-        this.openmct = openmct;
-        this.key = LegacyAction.definition.key;
-        this.name = LegacyAction.definition.name;
-        this.description = LegacyAction.definition.description;
-        this.cssClass = LegacyAction.definition.cssClass;
-        this.LegacyAction = LegacyAction;
-        this.group = LegacyAction.definition.group;
-        this.priority = LegacyAction.definition.priority;
-    }
-
-    invoke(objectPath) {
-        this.openmct.objects.getRoot().then((root) => {
-            let pathWithRoot = objectPath.slice();
-            pathWithRoot.push(root);
-
-            let context = {
-                category: 'contextual',
-                domainObject: this.openmct.legacyObject(pathWithRoot)
-            };
-            let legacyAction = new this.LegacyAction(context);
-
-            if (!legacyAction.getMetadata) {
-                let metadata = Object.create(this.LegacyAction.definition);
-                metadata.context = context;
-                legacyAction.getMetadata = function () {
-                    return metadata;
-                }.bind(legacyAction);
-            }
-
-            legacyAction.perform();
-        });
-    }
-
-    appliesTo(objectPath) {
-        let legacyObject = this.openmct.legacyObject(objectPath);
-
-        return (this.LegacyAction.appliesTo === undefined
-                || this.LegacyAction.appliesTo({domainObject: legacyObject}))
-                && !this.isBlacklisted(objectPath);
-    }
-
-    /**
-     * @private
-     */
-    isBlacklisted(objectPath) {
-        let navigatedObject = this.openmct.router.path[0];
-        let isEditing = this.openmct.editor.isEditing();
-
-        /**
-         * Is the object being edited, or a child of the object being edited?
-         */
-        function isInsideEditPath() {
-            return objectPath.some((object) => _.eq(object.identifier, navigatedObject.identifier));
-        }
-
-        if (isEditing) {
-            if (isInsideEditPath()) {
-                return INSIDE_EDIT_PATH_BLACKLIST.some(actionKey => this.LegacyAction.key === actionKey);
-            } else {
-                return OUTSIDE_EDIT_PATH_BLACKLIST.some(actionKey => this.LegacyAction.key === actionKey);
-            }
-        }
-
-        return false;
-    }
-}
diff --git a/src/adapter/bundle.js b/src/adapter/bundle.js
deleted file mode 100644
index 0fc7c2d1109..00000000000
--- a/src/adapter/bundle.js
+++ /dev/null
@@ -1,217 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    './actions/ActionDialogDecorator',
-    './capabilities/AdapterCapability',
-    './directives/MCTView',
-    './services/Instantiate',
-    './services/MissingModelCompatibilityDecorator',
-    './capabilities/APICapabilityDecorator',
-    './policies/AdaptedViewPolicy',
-    './runs/AlternateCompositionInitializer',
-    './runs/TypeDeprecationChecker',
-    './runs/LegacyTelemetryProvider',
-    './runs/RegisterLegacyTypes',
-    './services/LegacyObjectAPIInterceptor',
-    './views/installLegacyViews',
-    './policies/LegacyCompositionPolicyAdapter',
-    './actions/LegacyActionAdapter',
-    './services/LegacyPersistenceAdapter'
-], function (
-    ActionDialogDecorator,
-    AdapterCapability,
-    MCTView,
-    Instantiate,
-    MissingModelCompatibilityDecorator,
-    APICapabilityDecorator,
-    AdaptedViewPolicy,
-    AlternateCompositionInitializer,
-    TypeDeprecationChecker,
-    LegacyTelemetryProvider,
-    RegisterLegacyTypes,
-    LegacyObjectAPIInterceptor,
-    installLegacyViews,
-    legacyCompositionPolicyAdapter,
-    LegacyActionAdapter,
-    LegacyPersistenceAdapter
-) {
-    return {
-        name: 'src/adapter',
-        definition: {
-            "extensions": {
-                "directives": [
-                    {
-                        key: "mctView",
-                        implementation: MCTView,
-                        depends: ["openmct"]
-                    }
-                ],
-                capabilities: [
-                    {
-                        key: "adapter",
-                        implementation: AdapterCapability
-                    }
-                ],
-                services: [
-                    {
-                        key: "instantiate",
-                        priority: "mandatory",
-                        implementation: Instantiate,
-                        depends: [
-                            "capabilityService",
-                            "identifierService",
-                            "cacheService"
-                        ]
-                    }
-                ],
-                components: [
-                    {
-                        type: "decorator",
-                        provides: "capabilityService",
-                        implementation: APICapabilityDecorator,
-                        depends: [
-                            "$injector"
-                        ]
-                    },
-                    {
-                        type: "decorator",
-                        provides: "actionService",
-                        implementation: ActionDialogDecorator,
-                        depends: ["openmct"]
-                    },
-                    {
-                        type: "decorator",
-                        provides: "modelService",
-                        implementation: MissingModelCompatibilityDecorator,
-                        depends: ["openmct"]
-                    },
-                    {
-                        provides: "objectService",
-                        type: "decorator",
-                        priority: "mandatory",
-                        implementation: LegacyObjectAPIInterceptor,
-                        depends: [
-                            "openmct",
-                            "roots[]",
-                            "instantiate",
-                            "topic"
-                        ]
-                    },
-                    {
-                        provides: "persistenceService",
-                        type: "provider",
-                        priority: "fallback",
-                        implementation: function legacyPersistenceProvider(openmct) {
-                            return new LegacyPersistenceAdapter.default(openmct);
-                        },
-                        depends: ["openmct"]
-                    }
-                ],
-                policies: [
-                    {
-                        category: "view",
-                        implementation: AdaptedViewPolicy,
-                        depends: ["openmct"]
-                    }
-                ],
-                runs: [
-                    {
-                        implementation: TypeDeprecationChecker,
-                        depends: ["types[]"]
-                    },
-                    {
-                        implementation: AlternateCompositionInitializer,
-                        depends: ["openmct"]
-                    },
-                    {
-                        implementation: LegacyTelemetryProvider,
-                        depends: [
-                            "openmct",
-                            "instantiate"
-                        ]
-                    },
-                    {
-                        implementation: installLegacyViews,
-                        depends: [
-                            "openmct",
-                            "views[]",
-                            "instantiate"
-                        ]
-                    },
-                    {
-                        implementation: RegisterLegacyTypes,
-                        depends: [
-                            "types[]",
-                            "openmct"
-                        ]
-                    },
-                    {
-                        implementation: legacyCompositionPolicyAdapter.default,
-                        depends: [
-                            "openmct"
-                        ]
-                    },
-                    {
-                        implementation: LegacyActionAdapter.default,
-                        depends: [
-                            "openmct",
-                            "actions[]"
-                        ]
-                    }
-                ],
-                licenses: [
-                    {
-                        "name": "almond",
-                        "version": "0.3.3",
-                        "description": "Lightweight RequireJS replacement for builds",
-                        "author": "jQuery Foundation",
-                        "website": "https://github.com/requirejs/almond",
-                        "copyright": "Copyright jQuery Foundation and other contributors, https://jquery.org/",
-                        "license": "license-mit",
-                        "link": "https://github.com/requirejs/almond/blob/master/LICENSE"
-                    },
-                    {
-                        "name": "lodash",
-                        "version": "3.10.1",
-                        "description": "Utility functions",
-                        "author": "Dojo Foundation",
-                        "website": "https://lodash.com",
-                        "copyright": "Copyright 2012-2015 The Dojo Foundation",
-                        "license": "license-mit",
-                        "link": "https://raw.githubusercontent.com/lodash/lodash/3.10.1/LICENSE"
-                    },
-                    {
-                        "name": "EventEmitter3",
-                        "version": "1.2.0",
-                        "description": "Event-driven programming support",
-                        "author": "Arnout Kazemier",
-                        "website": "https://github.com/primus/eventemitter3",
-                        "copyright": "Copyright (c) 2014 Arnout Kazemier",
-                        "license": "license-mit",
-                        "link": "https://github.com/primus/eventemitter3/blob/1.2.0/LICENSE"
-                    }
-                ]
-            }
-        }
-    };
-});
diff --git a/src/adapter/capabilities/APICapabilityDecorator.js b/src/adapter/capabilities/APICapabilityDecorator.js
deleted file mode 100644
index e3598d6003c..00000000000
--- a/src/adapter/capabilities/APICapabilityDecorator.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    './synchronizeMutationCapability',
-    './AlternateCompositionCapability',
-    './patchViewCapability'
-], function (
-    synchronizeMutationCapability,
-    AlternateCompositionCapability,
-    patchViewCapability
-) {
-
-    /**
-     * Overrides certain capabilities to keep consistency between old API
-     * and new API.
-     */
-    function APICapabilityDecorator($injector, capabilityService) {
-        this.$injector = $injector;
-        this.capabilityService = capabilityService;
-    }
-
-    APICapabilityDecorator.prototype.getCapabilities = function (
-        model,
-        id
-    ) {
-        const capabilities = this.capabilityService.getCapabilities(model, id);
-        if (capabilities.mutation) {
-            capabilities.mutation =
-                synchronizeMutationCapability(capabilities.mutation);
-        }
-
-        if (capabilities.view) {
-            capabilities.view = patchViewCapability(capabilities.view);
-        }
-
-        if (AlternateCompositionCapability.appliesTo(model, id)) {
-            capabilities.composition = function (domainObject) {
-                return new AlternateCompositionCapability(this.$injector, domainObject);
-            }.bind(this);
-        }
-
-        return capabilities;
-    };
-
-    return APICapabilityDecorator;
-
-});
diff --git a/src/adapter/capabilities/AdapterCapability.js b/src/adapter/capabilities/AdapterCapability.js
deleted file mode 100644
index e98ac518f97..00000000000
--- a/src/adapter/capabilities/AdapterCapability.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(['objectUtils'], function (objectUtils) {
-    function AdapterCapability(domainObject) {
-        this.domainObject = domainObject;
-    }
-
-    AdapterCapability.prototype.invoke = function () {
-        return objectUtils.toNewFormat(
-            this.domainObject.getModel(),
-            this.domainObject.getId()
-        );
-    };
-
-    return AdapterCapability;
-});
diff --git a/src/adapter/capabilities/AlternateCompositionCapability.js b/src/adapter/capabilities/AlternateCompositionCapability.js
deleted file mode 100644
index 23415401901..00000000000
--- a/src/adapter/capabilities/AlternateCompositionCapability.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
- * Module defining AlternateCompositionCapability. Created by vwoeltje on 11/7/14.
- */
-define([
-    'objectUtils',
-    '../../../platform/core/src/capabilities/ContextualDomainObject'
-], function (objectUtils, ContextualDomainObject) {
-    function AlternateCompositionCapability($injector, domainObject) {
-        this.domainObject = domainObject;
-        this.getDependencies = function () {
-            this.instantiate = $injector.get("instantiate");
-            this.getDependencies = undefined;
-            this.openmct = $injector.get("openmct");
-        }.bind(this);
-    }
-
-    AlternateCompositionCapability.prototype.add = function (child, index) {
-        if (typeof index !== 'undefined') {
-            // At first glance I don't see a location in the existing
-            // codebase where add is called with an index.  Won't support.
-            throw new Error(
-                'Composition Capability does not support adding at index'
-            );
-        }
-
-        function addChildToComposition(model) {
-            const existingIndex = model.composition.indexOf(child.getId());
-            if (existingIndex === -1) {
-                model.composition.push(child.getId());
-            }
-        }
-
-        return this.domainObject.useCapability(
-            'mutation',
-            addChildToComposition
-        )
-            .then(this.invoke.bind(this))
-            .then(function (children) {
-                return children.filter(function (c) {
-                    return c.getId() === child.getId();
-                })[0];
-            });
-    };
-
-    AlternateCompositionCapability.prototype.contextualizeChild = function (
-        child
-    ) {
-        if (this.getDependencies) {
-            this.getDependencies();
-        }
-
-        const keyString = objectUtils.makeKeyString(child.identifier);
-        const oldModel = objectUtils.toOldFormat(child);
-        const newDO = this.instantiate(oldModel, keyString);
-
-        return new ContextualDomainObject(newDO, this.domainObject);
-
-    };
-
-    AlternateCompositionCapability.prototype.invoke = function () {
-        const newFormatDO = objectUtils.toNewFormat(
-            this.domainObject.getModel(),
-            this.domainObject.getId()
-        );
-
-        if (this.getDependencies) {
-            this.getDependencies();
-        }
-
-        const collection = this.openmct.composition.get(newFormatDO);
-
-        return collection.load()
-            .then(function (children) {
-                return children.map(this.contextualizeChild, this);
-            }.bind(this));
-    };
-
-    AlternateCompositionCapability.appliesTo = function () {
-        // Will get replaced by a runs exception to properly
-        // bind to running openmct instance
-        return false;
-    };
-
-    return AlternateCompositionCapability;
-});
diff --git a/src/adapter/capabilities/patchViewCapability.js b/src/adapter/capabilities/patchViewCapability.js
deleted file mode 100644
index 3c81b2841a5..00000000000
--- a/src/adapter/capabilities/patchViewCapability.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    'lodash'
-], function (
-    _
-) {
-
-    function patchViewCapability(viewConstructor) {
-        return function makeCapability(domainObject) {
-            const capability = viewConstructor(domainObject);
-            const oldInvoke = capability.invoke.bind(capability);
-
-            /* eslint-disable you-dont-need-lodash-underscore/map */
-            capability.invoke = function () {
-                const availableViews = oldInvoke();
-                const newDomainObject = capability
-                    .domainObject
-                    .useCapability('adapter');
-
-                return _(availableViews).map(function (v, i) {
-                    const vd = {
-                        view: v,
-                        priority: i + 100 // arbitrary to allow new views to
-                        // be defaults by returning priority less than 100.
-                    };
-                    if (v.provider && v.provider.priority) {
-                        vd.priority = v.provider.priority(newDomainObject);
-                    }
-
-                    return vd;
-                })
-                    .sortBy('priority')
-                    .map('view')
-                    .value();
-            };
-            /* eslint-enable you-dont-need-lodash-underscore/map */
-
-            return capability;
-        };
-    }
-
-    return patchViewCapability;
-});
diff --git a/src/adapter/capabilities/synchronizeMutationCapability.js b/src/adapter/capabilities/synchronizeMutationCapability.js
deleted file mode 100644
index f79c8fe56cd..00000000000
--- a/src/adapter/capabilities/synchronizeMutationCapability.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-
-], function (
-
-) {
-
-    /**
-     * Wraps the mutation capability and synchronizes the mutation
-     */
-    function synchronizeMutationCapability(mutationConstructor) {
-
-        return function makeCapability(domainObject) {
-            const capability = mutationConstructor(domainObject);
-            const oldListen = capability.listen.bind(capability);
-            capability.listen = function (listener) {
-                return oldListen(function (newModel) {
-                    capability.domainObject.model =
-                        JSON.parse(JSON.stringify(newModel));
-                    listener(newModel);
-                });
-            };
-
-            return capability;
-        };
-    }
-
-    return synchronizeMutationCapability;
-});
diff --git a/src/adapter/directives/MCTView.js b/src/adapter/directives/MCTView.js
deleted file mode 100644
index edf79829734..00000000000
--- a/src/adapter/directives/MCTView.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-], function (
-) {
-    function MCTView(openmct) {
-        return {
-            restrict: 'E',
-            link: function (scope, element, attrs) {
-                const provider = openmct.objectViews.getByProviderKey(attrs.mctProviderKey);
-                const view = new provider.view(scope.domainObject.useCapability('adapter'));
-                const domElement = element[0];
-
-                view.show(domElement);
-
-                if (view.destroy) {
-                    scope.$on('$destroy', function () {
-                        view.destroy(domElement);
-                    });
-                }
-            }
-        };
-    }
-
-    return MCTView;
-});
diff --git a/src/adapter/indicators/legacy-indicators-plugin.js b/src/adapter/indicators/legacy-indicators-plugin.js
deleted file mode 100644
index ae6f1d51450..00000000000
--- a/src/adapter/indicators/legacy-indicators-plugin.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-define([], function () {
-    const LEGACY_INDICATOR_TEMPLATE =
-        '<mct-include '
-        + '   ng-model="indicator" '
-        + '   class="h-indicator" '
-        + '   key="template">'
-        + ' </mct-include>';
-
-    return function () {
-        return function (openmct) {
-            openmct.legacyExtension('runs', {
-                depends: ['indicators[]'],
-                implementation: addLegacyIndicators
-            });
-
-            function addLegacyIndicators(legacyIndicators) {
-                legacyIndicators.forEach(function (legacyIndicatorDef) {
-                    const legacyIndicator = initializeIfNeeded(legacyIndicatorDef);
-                    const legacyIndicatorElement = buildLegacyIndicator(legacyIndicator, legacyIndicatorDef.template);
-                    openmct.indicators.add({
-                        element: legacyIndicatorElement
-                    });
-                });
-            }
-
-            function initializeIfNeeded(LegacyIndicatorDef) {
-                let legacyIndicator;
-                if (typeof LegacyIndicatorDef === 'function') {
-                    legacyIndicator = new LegacyIndicatorDef();
-                } else {
-                    legacyIndicator = LegacyIndicatorDef;
-                }
-
-                return legacyIndicator;
-            }
-
-            function buildLegacyIndicator(legacyIndicator, template) {
-                const $compile = openmct.$injector.get('$compile');
-                const $rootScope = openmct.$injector.get('$rootScope');
-                const scope = $rootScope.$new(true);
-                scope.indicator = legacyIndicator;
-                scope.template = template || 'indicator';
-
-                return $compile(LEGACY_INDICATOR_TEMPLATE)(scope)[0];
-            }
-        };
-    };
-});
diff --git a/src/adapter/indicators/legacy-indicators-pluginSpec.js b/src/adapter/indicators/legacy-indicators-pluginSpec.js
deleted file mode 100644
index efa2eef5ccc..00000000000
--- a/src/adapter/indicators/legacy-indicators-pluginSpec.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [
-        "../../MCT",
-        "../../../platform/commonUI/general/src/directives/MCTIndicators",
-        "./legacy-indicators-plugin"
-    ],
-    function (
-        MCT,
-        MCTIndicators,
-        LegacyIndicatorsPlugin
-    ) {
-        let openmct;
-        let directive;
-        let holderElement;
-        const legacyExtensionFunction = MCT.prototype.legacyExtension;
-        let legacyIndicatorsRunsFunction;
-
-        xdescribe('The legacy indicators plugin', function () {
-            beforeEach(function () {
-                mockLegacyExtensionFunction();
-
-                openmct = new MCT();
-                directive = new MCTIndicators(openmct);
-                holderElement = document.createElement('div');
-
-                mockAngularComponents();
-                LegacyIndicatorsPlugin()(openmct);
-            });
-
-            afterEach(function () {
-                MCT.prototype.legacyExtension = legacyExtensionFunction;
-            });
-
-            function mockLegacyExtensionFunction() {
-                spyOn(MCT.prototype, "legacyExtension");
-                MCT.prototype.legacyExtension.and.callFake(function (extensionName, definition) {
-                    if (extensionName === 'runs') {
-                        legacyIndicatorsRunsFunction = definition.implementation;
-                    }
-                });
-            }
-
-            function mockAngularComponents() {
-                const mockInjector = jasmine.createSpyObj('$injector', ['get']);
-                const mockCompile = jasmine.createSpy('$compile');
-                const mockRootScope = jasmine.createSpyObj('rootScope', ['$new']);
-                const mockScope = {};
-
-                mockRootScope.$new.and.returnValue(mockScope);
-                mockInjector.get.and.callFake(function (service) {
-                    return {
-                        '$compile': mockCompile,
-                        '$rootScope': mockRootScope
-                    }[service];
-                });
-
-                openmct.$injector = mockInjector;
-                mockCompile.and.callFake(function () {
-                    return function () {
-                        return [document.createElement('div')];
-                    };
-                });
-            }
-
-            it("Displays any legacy indicators ", function () {
-                const legacyIndicators = [{}, {}, {}, {}];
-
-                legacyIndicatorsRunsFunction(legacyIndicators);
-                renderIndicators();
-
-                expect(holderElement.children.length).toBe(legacyIndicators.length);
-
-            });
-
-            it("If legacy indicator is defined as a constructor function, executes function ", function () {
-                const mockConstructorFunction = jasmine.createSpy('mockIndicatorConstructor');
-                const legacyIndicators = [{}, mockConstructorFunction];
-
-                mockConstructorFunction.and.returnValue({});
-                legacyIndicatorsRunsFunction(legacyIndicators);
-                renderIndicators();
-
-                expect(holderElement.children.length).toBe(legacyIndicators.length);
-                expect(mockConstructorFunction).toHaveBeenCalled();
-            });
-
-            function renderIndicators() {
-                directive.link({}, holderElement);
-            }
-        });
-    }
-);
diff --git a/src/adapter/policies/AdaptedViewPolicy.js b/src/adapter/policies/AdaptedViewPolicy.js
deleted file mode 100644
index 4701d2a8dde..00000000000
--- a/src/adapter/policies/AdaptedViewPolicy.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([], function () {
-    function AdaptedViewPolicy(openmct) {
-        this.openmct = openmct;
-    }
-
-    AdaptedViewPolicy.prototype.allow = function (
-        view,
-        legacyObject
-    ) {
-        if (Object.prototype.hasOwnProperty.call(view, 'provider')) {
-            const domainObject = legacyObject.useCapability('adapter');
-
-            return view.provider.canView(domainObject, this.openmct.router.path);
-        }
-
-        return true;
-    };
-
-    return AdaptedViewPolicy;
-});
diff --git a/src/adapter/policies/LegacyCompositionPolicyAdapter.js b/src/adapter/policies/LegacyCompositionPolicyAdapter.js
deleted file mode 100644
index 1325c7d905c..00000000000
--- a/src/adapter/policies/LegacyCompositionPolicyAdapter.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-export default function legacyCompositionPolicyAdapter(openmct) {
-    const instantiate = openmct.$injector.get('instantiate');
-    const policyService = openmct.$injector.get('policyService');
-
-    openmct.composition.addPolicy((parent, child) => {
-
-        let parentId = openmct.objects.makeKeyString(parent.identifier);
-        let childId = openmct.objects.makeKeyString(child.identifier);
-
-        let legacyParent = instantiate(parent, parentId);
-        let legacyChild = instantiate(child, childId);
-        let result = policyService.allow(
-            'composition',
-            legacyParent,
-            legacyChild
-        );
-
-        return result;
-    });
-}
diff --git a/src/adapter/policies/README.md b/src/adapter/policies/README.md
deleted file mode 100644
index f00ed0476f8..00000000000
--- a/src/adapter/policies/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Espresso Theme
-Dark theme for the Open MCT user interface.
-
-## Installation
-```js
-openmct.install(openmct.plugins.Espresso());
-```
\ No newline at end of file
diff --git a/src/adapter/runs/AlternateCompositionInitializer.js b/src/adapter/runs/AlternateCompositionInitializer.js
deleted file mode 100644
index 19463fda134..00000000000
--- a/src/adapter/runs/AlternateCompositionInitializer.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    '../capabilities/AlternateCompositionCapability',
-    'objectUtils'
-], function (
-    AlternateCompositionCapability,
-    objectUtils
-) {
-    // Present to work around the need for openmct to be used
-    // from AlternateCompositionCapability.appliesTo, even though it
-    // cannot be injected.
-    function AlternateCompositionInitializer(openmct) {
-        AlternateCompositionCapability.appliesTo = function (model, id) {
-            model = objectUtils.toNewFormat(model, id || '');
-
-            return Boolean(openmct.composition.get(model));
-        };
-    }
-
-    return AlternateCompositionInitializer;
-});
diff --git a/src/adapter/runs/LegacyTelemetryProvider.js b/src/adapter/runs/LegacyTelemetryProvider.js
deleted file mode 100644
index 7ade22483ec..00000000000
--- a/src/adapter/runs/LegacyTelemetryProvider.js
+++ /dev/null
@@ -1,193 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    'objectUtils'
-], function (
-    utils
-) {
-    /**
-     * @implements module:openmct.TelemetryAPI~TelemetryProvider
-     * @constructor
-     */
-    function LegacyTelemetryProvider(openmct, instantiate) {
-        this.telemetryApi = openmct.telemetry;
-        this.instantiate = instantiate;
-    }
-
-    /**
-     * Can provide telemetry for all objects that have the "telemetry"
-     * capability
-     *
-     * @see module:openmct.TelemetryAPI~TelemetryProvider#canProvideTelemetry
-     */
-    LegacyTelemetryProvider.prototype.canProvideTelemetry = function (domainObject) {
-        return this.instantiate(utils.toOldFormat(domainObject),
-            utils.makeKeyString(domainObject.identifier)).hasCapability("telemetry");
-    };
-
-    LegacyTelemetryProvider.prototype.supportsRequest =
-        LegacyTelemetryProvider.prototype.supportsSubscribe =
-        LegacyTelemetryProvider.prototype.canProvideTelemetry;
-
-    function createDatum(domainObject, metadata, legacySeries, i) {
-        let datum;
-
-        if (legacySeries.getDatum) {
-            datum = legacySeries.getDatum(i);
-        } else {
-            datum = {};
-            metadata.valuesForHints(['domain']).forEach(function (metadatum) {
-                datum[metadatum.key] = legacySeries.getDomainValue(i, metadatum.key);
-            });
-
-            metadata.valuesForHints(['range']).forEach(function (metadatum) {
-                datum[metadatum.key] = legacySeries.getRangeValue(i, metadatum.key);
-            });
-        }
-
-        /**
-         * If telemetry metadata defines a 'name' field, and one is not present
-         * on the datum, add it.
-         */
-        if (metadata.value('name') !== undefined && datum.name === undefined) {
-            datum.name = domainObject.name;
-        }
-
-        return datum;
-    }
-
-    function adaptSeries(domainObject, metadata, legacySeries) {
-        const series = [];
-
-        for (let i = 0; i < legacySeries.getPointCount(); i++) {
-            series.push(createDatum(domainObject, metadata, legacySeries, i));
-        }
-
-        return series;
-    }
-
-    /**
-     * @typedef {object} ConvertedTelemetryObject
-     * Telemetry data objects are converted from TelemetrySeries. Metadata is used
-     * to populate the returned object with attributes corresponding to the keys
-     * of domains and ranges. The attribute values are those returned by calls to
-     * [TelemetrySeries.getDomainValue()]{@link TelemetrySeries#getDomainValue}
-     * and [TelemetrySeries.getRangeValue()]{@link TelemetrySeries#getRangeValue}.
-     */
-
-    /**
-     * @see module:openmct.TelemetryAPI~TelemetryProvider#request
-     * @param {module:openmct.DomainObject}
-     * @param {module:openmct.TelemetryAPI~TelemetryRequest} options
-     *        options for this request. Passed straight through to legacy provider
-     * @returns {Promise.<ConvertedTelemetryObject[]>} a promise for an array of
-     *          telemetry data.
-     */
-    LegacyTelemetryProvider.prototype.request = function (domainObject, request) {
-        const metadata = this.telemetryApi.getMetadata(domainObject);
-        const oldObject = this.instantiate(utils.toOldFormat(domainObject), utils.makeKeyString(domainObject.identifier));
-        const capability = oldObject.getCapability("telemetry");
-
-        return capability.requestData(request).then(function (telemetrySeries) {
-            return Promise.resolve(adaptSeries(domainObject, metadata, telemetrySeries));
-        }).catch(function (error) {
-            return Promise.reject(error);
-        });
-    };
-
-    /**
-     * @callback LegacyTelemetryProvider~SubscribeCallback
-     * @param {ConvertedTelemetryObject}
-     */
-
-    /**
-     * @see module:openmct.TelemetryAPI~TelemetryProvider#request
-     * @param {module:openmct.DomainObject}
-     * @param {LegacyTelemetryProvider~SubscribeCallback} callback will be called with a single datum when
-     * new data is available.
-     * @param {module:openmct.TelemetryAPI~TelemetryRequest} options
-     *        options for this request. Passed straight through to legacy provider
-     * @returns {platform|telemetry.TelemetrySubscription|*}
-     */
-    LegacyTelemetryProvider.prototype.subscribe = function (domainObject, callback, request) {
-        const metadata = this.telemetryApi.getMetadata(domainObject);
-        const oldObject = this.instantiate(utils.toOldFormat(domainObject), utils.makeKeyString(domainObject.identifier));
-        const capability = oldObject.getCapability("telemetry");
-
-        function callbackWrapper(series) {
-            callback(createDatum(domainObject, metadata, series, series.getPointCount() - 1));
-        }
-
-        return capability.subscribe(callbackWrapper, request) || function () {};
-    };
-
-    LegacyTelemetryProvider.prototype.supportsLimits = function (domainObject) {
-        const oldObject = this.instantiate(
-            utils.toOldFormat(domainObject),
-            utils.makeKeyString(domainObject.identifier)
-        );
-
-        return oldObject.hasCapability("limit");
-    };
-
-    LegacyTelemetryProvider.prototype.getLimitEvaluator = function (domainObject) {
-        const oldObject = this.instantiate(
-            utils.toOldFormat(domainObject),
-            utils.makeKeyString(domainObject.identifier)
-        );
-        const limitEvaluator = oldObject.getCapability("limit");
-
-        return {
-            evaluate: function (datum, property) {
-                return limitEvaluator.evaluate(datum, property && property.key);
-            }
-
-        };
-    };
-
-    LegacyTelemetryProvider.prototype.getLimits = function (domainObject) {
-        const oldObject = this.instantiate(
-            utils.toOldFormat(domainObject),
-            utils.makeKeyString(domainObject.identifier)
-        );
-        const limitEvaluator = oldObject.getCapability("limit");
-
-        return {
-            limits: () => {
-                return limitEvaluator.limits.then !== undefined
-                    ? limitEvaluator.limits()
-                    : Promise.resolve(limitEvaluator.limits());
-            }
-        };
-    };
-
-    return function (openmct, instantiate) {
-        // Legacy provider should always be the fallback.
-        const provider = new LegacyTelemetryProvider(openmct, instantiate);
-        openmct.telemetry.legacyProvider = provider;
-        openmct.telemetry.requestProviders.push(provider);
-        openmct.telemetry.subscriptionProviders.push(provider);
-        openmct.telemetry.limitProviders.push(provider);
-    };
-
-});
diff --git a/src/adapter/runs/RegisterLegacyTypes.js b/src/adapter/runs/RegisterLegacyTypes.js
deleted file mode 100644
index 3527c62524f..00000000000
--- a/src/adapter/runs/RegisterLegacyTypes.js
+++ /dev/null
@@ -1,17 +0,0 @@
-define([
-
-], function (
-
-) {
-    function RegisterLegacyTypes(types, openmct) {
-        types.forEach(function (legacyDefinition) {
-            if (!openmct.types.get(legacyDefinition.key)) {
-                console.warn(`DEPRECATION WARNING: Migrate type ${legacyDefinition.key} from ${legacyDefinition.bundle.path} to use the new Types API.  Legacy type support will be removed soon.`);
-            }
-        });
-
-        openmct.types.importLegacyTypes(types);
-    }
-
-    return RegisterLegacyTypes;
-});
diff --git a/src/adapter/runs/TypeDeprecationChecker.js b/src/adapter/runs/TypeDeprecationChecker.js
deleted file mode 100644
index 877ed39346b..00000000000
--- a/src/adapter/runs/TypeDeprecationChecker.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/*****************************************************************************
- * Open openmct, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open openmct is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open openmct includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-
-], function (
-
-) {
-
-    function checkForDeprecatedFunctionality(typeDef) {
-        if (Object.prototype.hasOwnProperty.call(typeDef, 'telemetry')) {
-            console.warn(
-                'DEPRECATION WARNING: Telemetry data on type '
-                + 'registrations will be deprecated in a future version, '
-                + 'please convert to a custom telemetry metadata provider '
-                + 'for type: ' + typeDef.key
-            );
-        }
-    }
-
-    function TypeDeprecationChecker(types) {
-        types.forEach(checkForDeprecatedFunctionality);
-    }
-
-    return TypeDeprecationChecker;
-
-});
diff --git a/src/adapter/services/Instantiate.js b/src/adapter/services/Instantiate.js
deleted file mode 100644
index a719a4d11d4..00000000000
--- a/src/adapter/services/Instantiate.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    ['../../../platform/core/src/objects/DomainObjectImpl'],
-    function (DomainObjectImpl) {
-
-        /**
-         * Overrides platform version of instantiate, passes Id with model such
-         * that capability detection can utilize new format domain objects.
-         */
-        function Instantiate(
-            capabilityService,
-            identifierService,
-            cacheService
-        ) {
-            return function (model, id) {
-                id = id || identifierService.generate();
-                const old_id = model.id;
-                model.id = id;
-                const capabilities = capabilityService.getCapabilities(model, id);
-                model.id = old_id;
-                cacheService.put(id, model);
-
-                return new DomainObjectImpl(id, model, capabilities);
-            };
-        }
-
-        return Instantiate;
-    }
-);
diff --git a/src/adapter/services/LegacyObjectAPIInterceptor.js b/src/adapter/services/LegacyObjectAPIInterceptor.js
deleted file mode 100644
index 902b8ea9218..00000000000
--- a/src/adapter/services/LegacyObjectAPIInterceptor.js
+++ /dev/null
@@ -1,192 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    'objectUtils'
-], function (
-    utils
-) {
-    function ObjectServiceProvider(eventEmitter, objectService, instantiate, topic, $injector) {
-        this.eventEmitter = eventEmitter;
-        this.objectService = objectService;
-        this.instantiate = instantiate;
-        this.$injector = $injector;
-
-        this.generalTopic = topic('mutation');
-        this.bridgeEventBuses();
-    }
-
-    /**
-     * Bridges old and new style mutation events to provide compatibility between the two APIs
-     * @private
-     */
-    ObjectServiceProvider.prototype.bridgeEventBuses = function () {
-        let removeGeneralTopicListener;
-        let handleLegacyMutation;
-
-        const handleMutation = function (newStyleObject) {
-            const keyString = utils.makeKeyString(newStyleObject.identifier);
-            const oldStyleObject = this.instantiate(utils.toOldFormat(newStyleObject), keyString);
-
-            // Don't trigger self
-            removeGeneralTopicListener();
-
-            oldStyleObject.getCapability('mutation').mutate(function () {
-                return utils.toOldFormat(newStyleObject);
-            }, newStyleObject.modified);
-
-            removeGeneralTopicListener = this.generalTopic.listen(handleLegacyMutation);
-        }.bind(this);
-
-        handleLegacyMutation = function (legacyObject) {
-            const newStyleObject = utils.toNewFormat(legacyObject.getModel(), legacyObject.getId());
-            const keystring = utils.makeKeyString(newStyleObject.identifier);
-
-            this.eventEmitter.emit(keystring + ':$_synchronize_model', newStyleObject);
-            this.eventEmitter.emit(keystring + ":*", newStyleObject);
-            this.eventEmitter.emit('mutation', newStyleObject);
-        }.bind(this);
-
-        this.eventEmitter.on('mutation', handleMutation);
-        removeGeneralTopicListener = this.generalTopic.listen(handleLegacyMutation);
-    };
-
-    ObjectServiceProvider.prototype.create = async function (object) {
-        let model = utils.toOldFormat(object);
-
-        let result = await this.getPersistenceService().createObject(
-            this.getSpace(utils.makeKeyString(object.identifier)),
-            object.identifier.key,
-            model
-        );
-
-        return result;
-    };
-
-    ObjectServiceProvider.prototype.update = async function (object) {
-        let model = utils.toOldFormat(object);
-
-        let result = await this.getPersistenceService().updateObject(
-            this.getSpace(utils.makeKeyString(object.identifier)),
-            object.identifier.key,
-            model
-        );
-
-        return result;
-    };
-
-    /**
-     * Get the space in which this domain object is persisted;
-     * this is useful when, for example, decided which space a
-     * newly-created domain object should be persisted to (by
-     * default, this should be the space of its containing
-     * object.)
-     *
-     * @returns {string} the name of the space which should
-     *          be used to persist this object
-     */
-    ObjectServiceProvider.prototype.getSpace = function (keystring) {
-        return this.getIdentifierService().parse(keystring).getSpace();
-    };
-
-    ObjectServiceProvider.prototype.getIdentifierService = function () {
-        if (this.identifierService === undefined) {
-            this.identifierService = this.$injector.get('identifierService');
-        }
-
-        return this.identifierService;
-    };
-
-    ObjectServiceProvider.prototype.getPersistenceService = function () {
-        if (this.persistenceService === undefined) {
-            this.persistenceService = this.$injector.get('persistenceService');
-        }
-
-        return this.persistenceService;
-    };
-
-    ObjectServiceProvider.prototype.delete = function (object) {
-        // TODO!
-    };
-
-    ObjectServiceProvider.prototype.get = function (key) {
-        let keyString = utils.makeKeyString(key);
-
-        return this.objectService.getObjects([keyString])
-            .then(function (results) {
-                let model = results[keyString].getModel();
-
-                return utils.toNewFormat(model, key);
-            });
-    };
-
-    ObjectServiceProvider.prototype.superSecretFallbackSearch = function (query, abortSignal) {
-        const searchService = this.$injector.get('searchService');
-
-        // need to pass the abortSignal down, so need to
-        // pass in undefined for maxResults and filter on query
-        return searchService.query(query, undefined, undefined, abortSignal);
-    };
-
-    // Injects new object API as a decorator so that it hijacks all requests.
-    // Object providers implemented on new API should just work, old API should just work, many things may break.
-    function LegacyObjectAPIInterceptor(openmct, ROOTS, instantiate, topic, objectService) {
-        const eventEmitter = openmct.objects.eventEmitter;
-
-        this.getObjects = function (keys, abortSignal) {
-            const results = {};
-
-            const promises = keys.map(function (keyString) {
-                const key = utils.parseKeyString(keyString);
-
-                return openmct.objects.get(key, abortSignal)
-                    .then(function (object) {
-                        object = utils.toOldFormat(object);
-                        results[keyString] = instantiate(object, keyString);
-                    });
-            });
-
-            return Promise.all(promises)
-                .then(function () {
-                    return results;
-                });
-        };
-
-        openmct.objects.supersecretSetFallbackProvider(
-            new ObjectServiceProvider(
-                eventEmitter,
-                objectService,
-                instantiate,
-                topic,
-                openmct.$injector
-            )
-        );
-
-        ROOTS.forEach(function (r) {
-            openmct.objects.addRoot(utils.parseKeyString(r.id));
-        });
-
-        return this;
-    }
-
-    return LegacyObjectAPIInterceptor;
-});
diff --git a/src/adapter/services/LegacyPersistenceAdapter.js b/src/adapter/services/LegacyPersistenceAdapter.js
deleted file mode 100644
index 11d14c93eea..00000000000
--- a/src/adapter/services/LegacyPersistenceAdapter.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-import utils from 'objectUtils';
-
-export default class LegacyPersistenceAdapter {
-    constructor(openmct) {
-        this.openmct = openmct;
-    }
-
-    listObjects() {
-        return Promise.resolve([]);
-    }
-
-    listSpaces() {
-        return Promise.resolve(Object.keys(this.openmct.objects.providers));
-    }
-
-    createObject(space, key, legacyDomainObject) {
-        let object = utils.toNewFormat(legacyDomainObject, {
-            namespace: space,
-            key: key
-        });
-
-        return this.openmct.objects.save(object);
-    }
-
-    deleteObject(space, key) {
-        const identifier = {
-            namespace: space,
-            key: key
-        };
-
-        return this.openmct.objects.delete(identifier);
-    }
-
-    updateObject(space, key, legacyDomainObject) {
-        let object = utils.toNewFormat(legacyDomainObject, {
-            namespace: space,
-            key: key
-        });
-
-        return this.openmct.objects.save(object);
-    }
-
-    readObject(space, key) {
-        const identifier = {
-            namespace: space,
-            key: key
-        };
-
-        return this.openmct.objects.get(identifier).then(domainObject => {
-            let object = this.openmct.legacyObject(domainObject);
-
-            return object.model;
-        });
-    }
-}
diff --git a/src/adapter/services/MissingModelCompatibilityDecorator.js b/src/adapter/services/MissingModelCompatibilityDecorator.js
deleted file mode 100644
index 57568cfa132..00000000000
--- a/src/adapter/services/MissingModelCompatibilityDecorator.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    'objectUtils'
-], function (
-    objectUtils
-) {
-
-    /**
-     * Compatibility decorator for New API.
-     *
-     * When the model service returns no results, this attempts to load
-     * the model from the new Object API and returns that instead.  In order
-     * to prevent infinite recursion, this only tries to fetch from the API
-     * a single time.
-     *
-     */
-    function MissingModelCompatibilityDecorator(api, modelService) {
-        this.api = api;
-        this.modelService = modelService;
-        this.apiFetching = {}; // to prevent loops, if we have already
-    }
-
-    /**
-     * Fetch a set of ids from the public api and return a promise for their
-     * models.  If a model is requested twice, respond with a missing result.
-     */
-    MissingModelCompatibilityDecorator.prototype.apiFetch = function (ids) {
-        const results = {};
-
-        const promises = ids.map(function (id) {
-            if (this.apiFetching[id]) {
-                return Promise.resolve();
-            }
-
-            this.apiFetching[id] = true;
-
-            return this.api.objects.get(objectUtils.parseKeyString(id))
-                .then(function (newDO) {
-                    results[id] = objectUtils.toOldFormat(newDO);
-                });
-        }, this);
-
-        return Promise.all(promises).then(function () {
-            return results;
-        });
-    };
-
-    /**
-     * Return a promise for model results based on provided ids.  Will attempt
-     * to fetch any missing results from the object api.
-     */
-    MissingModelCompatibilityDecorator.prototype.getModels = function (ids) {
-        return this.modelService.getModels(ids)
-            .then(function (models) {
-                const missingIds = ids.filter(function (id) {
-                    return !models[id];
-                });
-
-                if (!missingIds.length) {
-                    return models;
-                }
-
-                return this.apiFetch(missingIds)
-                    .then(function (apiResults) {
-                        Object.keys(apiResults).forEach(function (k) {
-                            models[k] = apiResults[k];
-                        });
-
-                        return models;
-                    });
-            }.bind(this));
-    };
-
-    return MissingModelCompatibilityDecorator;
-});
-
diff --git a/src/adapter/templates/adapted-view-template.html b/src/adapter/templates/adapted-view-template.html
deleted file mode 100644
index f1fcd8435ef..00000000000
--- a/src/adapter/templates/adapted-view-template.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div ng-controller="AdaptedViewController" mct-view="view"></div>
diff --git a/src/adapter/views/LegacyViewProvider.js b/src/adapter/views/LegacyViewProvider.js
deleted file mode 100644
index 9a68a3e9854..00000000000
--- a/src/adapter/views/LegacyViewProvider.js
+++ /dev/null
@@ -1,143 +0,0 @@
-define([
-
-], function (
-
-) {
-    const DEFAULT_VIEW_PRIORITY = 100;
-
-    const PRIORITY_LEVELS = {
-        "fallback": Number.NEGATIVE_INFINITY,
-        "default": -100,
-        "none": 0,
-        "optional": DEFAULT_VIEW_PRIORITY,
-        "preferred": 1000,
-        "mandatory": Number.POSITIVE_INFINITY
-    };
-
-    function LegacyViewProvider(legacyView, openmct, convertToLegacyObject) {
-        console.warn(`DEPRECATION WARNING: Migrate ${legacyView.key} from ${legacyView.bundle.path} to use the new View APIs.  Legacy view support will be removed soon.`);
-
-        return {
-            key: legacyView.key,
-            name: legacyView.name,
-            cssClass: legacyView.cssClass,
-            description: legacyView.description,
-            canEdit: function () {
-                return legacyView.editable === true;
-            },
-            canView: function (domainObject) {
-                if (!domainObject || !domainObject.identifier) {
-                    return false;
-                }
-
-                if (legacyView.type) {
-                    return domainObject.type === legacyView.type;
-                }
-
-                let legacyObject = convertToLegacyObject(domainObject);
-                if (legacyView.needs) {
-                    let meetsNeeds = legacyView.needs.every(k => legacyObject.hasCapability(k));
-                    if (!meetsNeeds) {
-                        return false;
-                    }
-                }
-
-                return openmct.$injector.get('policyService').allow(
-                    'view', legacyView, legacyObject
-                );
-            },
-            view: function (domainObject) {
-                let $rootScope = openmct.$injector.get('$rootScope');
-                let templateLinker = openmct.$injector.get('templateLinker');
-                let scope = $rootScope.$new(true);
-                let legacyObject = convertToLegacyObject(domainObject);
-                let isDestroyed = false;
-                let unlistenToStatus;
-                let element;
-                scope.domainObject = legacyObject;
-                scope.model = legacyObject.getModel();
-                let child;
-                let parent;
-
-                return {
-                    show: function (container) {
-                        parent = container;
-                        child = document.createElement('div');
-                        parent.appendChild(child);
-                        let statusCapability = legacyObject.getCapability('status');
-                        unlistenToStatus = statusCapability.listen((newStatus) => {
-                            child.classList.remove('s-status-timeconductor-unsynced');
-
-                            if (newStatus.includes('timeconductor-unsynced')) {
-                                child.classList.add('s-status-timeconductor-unsynced');
-                            }
-                        });
-
-                        // TODO: implement "gestures" support ?
-                        let uses = legacyView.uses || [];
-                        let promises = [];
-                        let results = uses.map(function (capabilityKey, i) {
-                            let result = legacyObject.useCapability(capabilityKey);
-                            if (result.then) {
-                                promises.push(result.then(function (r) {
-                                    results[i] = r;
-                                }));
-                            }
-
-                            return result;
-                        });
-
-                        function link() {
-                            if (isDestroyed) {
-                                return;
-                            }
-
-                            uses.forEach(function (key, i) {
-                                scope[key] = results[i];
-                            });
-                            element = openmct.$angular.element(child);
-                            templateLinker.link(
-                                scope,
-                                element,
-                                legacyView
-                            );
-                            child.classList.add('u-contents');
-                        }
-
-                        if (promises.length) {
-                            Promise.all(promises)
-                                .then(function () {
-                                    link();
-                                    scope.$digest();
-                                });
-                        } else {
-                            link();
-                        }
-                    },
-                    onClearData() {
-                        scope.$broadcast('clearData');
-                    },
-                    destroy: function () {
-                        element.off();
-                        element.remove();
-                        scope.$destroy();
-                        element = null;
-                        scope = null;
-                        unlistenToStatus();
-                    }
-                };
-            },
-            priority: function () {
-                let priority = legacyView.priority || DEFAULT_VIEW_PRIORITY;
-                if (typeof priority === 'string') {
-                    priority = PRIORITY_LEVELS[priority];
-                }
-
-                return priority;
-            }
-        };
-    }
-
-    return LegacyViewProvider;
-
-});
diff --git a/src/adapter/views/TypeInspectorViewProvider.js b/src/adapter/views/TypeInspectorViewProvider.js
deleted file mode 100644
index 6ff740e703b..00000000000
--- a/src/adapter/views/TypeInspectorViewProvider.js
+++ /dev/null
@@ -1,99 +0,0 @@
-define([
-
-], function (
-
-) {
-    function TypeInspectorViewProvider(typeDefinition, openmct, convertToLegacyObject) {
-        console.warn(`DEPRECATION WARNING: Migrate ${typeDefinition.key} from ${typeDefinition.bundle.path} to use the new Inspector View APIs.  Legacy Inspector view support will be removed soon.`);
-        let representation = openmct.$injector.get('representations[]')
-            .filter((r) => r.key === typeDefinition.inspector)[0];
-
-        return {
-            key: representation.key,
-            name: representation.name,
-            cssClass: representation.cssClass,
-            description: representation.description,
-            canView: function (selection) {
-                if (selection.length !== 1 || selection[0].length === 0) {
-                    return false;
-                }
-
-                let selectionContext = selection[0][0].context;
-
-                if (!selectionContext.item) {
-                    return false;
-                }
-
-                return selectionContext.item.type === typeDefinition.key;
-            },
-            view: function (selection) {
-                let domainObject = selection[0][0].context.item;
-                let $rootScope = openmct.$injector.get('$rootScope');
-                let templateLinker = openmct.$injector.get('templateLinker');
-                let scope = $rootScope.$new(true);
-                let legacyObject = convertToLegacyObject(domainObject);
-                let isDestroyed = false;
-                let element;
-                scope.domainObject = legacyObject;
-                scope.model = legacyObject.getModel();
-
-                return {
-                    show: function (container) {
-                        let child = document.createElement('div');
-                        container.appendChild(child);
-                        // TODO: implement "gestures" support ?
-                        let uses = representation.uses || [];
-                        let promises = [];
-                        let results = uses.map(function (capabilityKey, i) {
-                            let result = legacyObject.useCapability(capabilityKey);
-                            if (result.then) {
-                                promises.push(result.then(function (r) {
-                                    results[i] = r;
-                                }));
-                            }
-
-                            return result;
-                        });
-
-                        function link() {
-                            if (isDestroyed) {
-                                return;
-                            }
-
-                            uses.forEach(function (key, i) {
-                                scope[key] = results[i];
-                            });
-                            element = openmct.$angular.element(child);
-                            templateLinker.link(
-                                scope,
-                                element,
-                                representation
-                            );
-                            container.style.height = '100%';
-                        }
-
-                        if (promises.length) {
-                            Promise.all(promises)
-                                .then(function () {
-                                    link();
-                                    scope.$digest();
-                                });
-                        } else {
-                            link();
-                        }
-                    },
-                    destroy: function () {
-                        element.off();
-                        element.remove();
-                        scope.$destroy();
-                        element = null;
-                        scope = null;
-                    }
-                };
-            }
-        };
-    }
-
-    return TypeInspectorViewProvider;
-
-});
diff --git a/src/adapter/views/installLegacyViews.js b/src/adapter/views/installLegacyViews.js
deleted file mode 100644
index 86419a09c9e..00000000000
--- a/src/adapter/views/installLegacyViews.js
+++ /dev/null
@@ -1,32 +0,0 @@
-define([
-    './LegacyViewProvider',
-    './TypeInspectorViewProvider',
-    'objectUtils'
-], function (
-    LegacyViewProvider,
-    TypeInspectorViewProvider,
-    objectUtils
-) {
-    function installLegacyViews(openmct, legacyViews, instantiate) {
-
-        function convertToLegacyObject(domainObject) {
-            let keyString = objectUtils.makeKeyString(domainObject.identifier);
-            let oldModel = objectUtils.toOldFormat(domainObject);
-
-            return instantiate(oldModel, keyString);
-        }
-
-        legacyViews.forEach(function (legacyView) {
-            openmct.objectViews.addProvider(new LegacyViewProvider(legacyView, openmct, convertToLegacyObject));
-        });
-
-        let inspectorTypes = openmct.$injector.get('types[]')
-            .filter((t) => Object.prototype.hasOwnProperty.call(t, 'inspector'));
-
-        inspectorTypes.forEach(function (typeDefinition) {
-            openmct.inspectorViews.addProvider(new TypeInspectorViewProvider(typeDefinition, openmct, convertToLegacyObject));
-        });
-    }
-
-    return installLegacyViews;
-});
diff --git a/src/api/Branding.js b/src/api/Branding.js
index 502db096a2e..b3717fc2b6d 100644
--- a/src/api/Branding.js
+++ b/src/api/Branding.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -23,8 +23,7 @@
 let brandingOptions = {};
 
 /**
- * @typedef {Object} BrandingOptions
- * @memberOf openmct/branding
+ * @typedef {object} BrandingOptions
  * @property {string} smallLogoImage URL to the image to use as the applications logo.
  * This logo will appear on every screen and when clicked will launch the about dialog.
  * @property {string} aboutHtml Custom content for the about screen. When defined the
@@ -38,9 +37,9 @@ let brandingOptions = {};
  * @param {BrandingOptions} options
  */
 export default function Branding(options) {
-    if (arguments.length === 1) {
-        brandingOptions = options;
-    }
+  if (arguments.length === 1) {
+    brandingOptions = options;
+  }
 
-    return brandingOptions;
+  return brandingOptions;
 }
diff --git a/src/api/Editor.js b/src/api/Editor.js
index f077d7d820a..218ec4dd041 100644
--- a/src/api/Editor.js
+++ b/src/api/Editor.js
@@ -1,6 +1,5 @@
-
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -24,73 +23,66 @@
 import EventEmitter from 'EventEmitter';
 
 export default class Editor extends EventEmitter {
-    constructor(openmct) {
-        super();
-        this.editing = false;
-        this.openmct = openmct;
-    }
-
-    /**
-     * Initiate an editing session. This will start a transaction during
-     * which any persist operations will be deferred until either save()
-     * or finish() are called.
-     * @private
-     */
-    edit() {
-        if (this.editing === true) {
-            throw "Already editing";
-        }
-
-        this.editing = true;
-        this.getTransactionService().startTransaction();
-        this.emit('isEditing', true);
-    }
+  constructor(openmct) {
+    super();
+    this.editing = false;
+    this.openmct = openmct;
+  }
 
-    /**
-     * @returns true if the application is in edit mode, false otherwise.
-     */
-    isEditing() {
-        return this.editing;
+  /**
+   * Initiate an editing session. This will start a transaction during
+   * which any persist operations will be deferred until either save()
+   * or finish() are called.
+   */
+  edit() {
+    if (this.editing === true) {
+      throw 'Already editing';
     }
 
-    /**
-     * Save any unsaved changes from this editing session. This will
-     * end the current transaction.
-     *
-     * @private
-     */
-    save() {
-        return this.getTransactionService().commit().then((result) => {
-            this.editing = false;
-            this.emit('isEditing', false);
+    this.editing = true;
+    this.emit('isEditing', true);
+    this.openmct.objects.startTransaction();
+  }
 
-            return result;
-        }).catch((error) => {
-            throw error;
-        });
-    }
+  /**
+   * @returns {boolean} true if the application is in edit mode, false otherwise.
+   */
+  isEditing() {
+    return this.editing;
+  }
 
-    /**
-     * End the currently active transaction and discard unsaved changes.
-     *
-     * @private
-     */
-    cancel() {
-        let cancelPromise = this.getTransactionService().cancel();
-        this.editing = false;
-        this.emit('isEditing', false);
+  /**
+   * Save any unsaved changes from this editing session. This will
+   * end the current transaction.
+   */
+  async save() {
+    const transaction = this.openmct.objects.getActiveTransaction();
+    await transaction.commit();
+    this.editing = false;
+    this.emit('isEditing', false);
+    this.openmct.objects.endTransaction();
+  }
 
-        return cancelPromise;
-    }
+  /**
+   * End the currently active transaction and discard unsaved changes.
+   */
+  cancel() {
+    this.editing = false;
+    this.emit('isEditing', false);
 
-    /**
-     * @private
-     */
-    getTransactionService() {
-        if (!this.transactionService) {
-            this.transactionService = this.openmct.$injector.get('transactionService');
-        }
+    return new Promise((resolve, reject) => {
+      const transaction = this.openmct.objects.getActiveTransaction();
+      if (!transaction) {
+        return resolve();
+      }
 
-        return this.transactionService;
-    }
+      transaction
+        .cancel()
+        .then(resolve)
+        .catch(reject)
+        .finally(() => {
+          this.openmct.objects.endTransaction();
+        });
+    });
+  }
 }
diff --git a/src/api/EditorSpec.js b/src/api/EditorSpec.js
new file mode 100644
index 00000000000..2a50a572a20
--- /dev/null
+++ b/src/api/EditorSpec.js
@@ -0,0 +1,68 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createOpenMct, resetApplicationState } from '../utils/testing.js';
+
+describe('The Editor API', () => {
+  let openmct;
+
+  beforeEach((done) => {
+    openmct = createOpenMct();
+    openmct.on('start', done);
+
+    spyOn(openmct.objects, 'endTransaction');
+
+    openmct.startHeadless();
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  it('opens a transaction on edit', () => {
+    expect(openmct.objects.isTransactionActive()).toBeFalse();
+    openmct.editor.edit();
+    expect(openmct.objects.isTransactionActive()).toBeTrue();
+  });
+
+  it('closes an open transaction on successful save', async () => {
+    spyOn(openmct.objects, 'getActiveTransaction').and.returnValue({
+      commit: () => Promise.resolve(true)
+    });
+
+    openmct.editor.edit();
+    await openmct.editor.save();
+
+    expect(openmct.objects.endTransaction).toHaveBeenCalled();
+  });
+
+  it('does not close an open transaction on failed save', async () => {
+    spyOn(openmct.objects, 'getActiveTransaction').and.returnValue({
+      commit: () => Promise.reject()
+    });
+
+    openmct.editor.edit();
+    await openmct.editor.save().catch(() => {});
+
+    expect(openmct.objects.endTransaction).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/api/actions/ActionCollection.js b/src/api/actions/ActionCollection.js
index 6545dd4a050..d099edb25d6 100644
--- a/src/api/actions/ActionCollection.js
+++ b/src/api/actions/ActionCollection.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -24,155 +24,161 @@ import EventEmitter from 'EventEmitter';
 import _ from 'lodash';
 
 class ActionCollection extends EventEmitter {
-    constructor(applicableActions, objectPath, view, openmct, skipEnvironmentObservers) {
-        super();
-
-        this.applicableActions = applicableActions;
-        this.openmct = openmct;
-        this.objectPath = objectPath;
-        this.view = view;
-        this.skipEnvironmentObservers = skipEnvironmentObservers;
-        this.objectUnsubscribes = [];
-
-        let debounceOptions = {
-            leading: false,
-            trailing: true
-        };
-
-        this._updateActions = _.debounce(this._updateActions.bind(this), 150, debounceOptions);
-        this._update = _.debounce(this._update.bind(this), 150, debounceOptions);
-
-        if (!skipEnvironmentObservers) {
-            this._observeObjectPath();
-            this.openmct.editor.on('isEditing', this._updateActions);
-        }
+  constructor(applicableActions, objectPath, view, openmct, skipEnvironmentObservers) {
+    super();
+
+    this.applicableActions = applicableActions;
+    this.openmct = openmct;
+    this.objectPath = objectPath;
+    this.view = view;
+    this.skipEnvironmentObservers = skipEnvironmentObservers;
+    this.objectUnsubscribes = [];
+
+    let debounceOptions = {
+      leading: false,
+      trailing: true
+    };
+
+    this._updateActions = _.debounce(this._updateActions.bind(this), 150, debounceOptions);
+    this._update = _.debounce(this._update.bind(this), 150, debounceOptions);
+
+    if (!skipEnvironmentObservers) {
+      this._observeObjectPath();
+      this.openmct.editor.on('isEditing', this._updateActions);
     }
-
-    disable(actionKeys) {
-        actionKeys.forEach(actionKey => {
-            if (this.applicableActions[actionKey]) {
-                this.applicableActions[actionKey].isDisabled = true;
-            }
-        });
-        this._update();
+  }
+
+  disable(actionKeys) {
+    actionKeys.forEach((actionKey) => {
+      if (this.applicableActions[actionKey]) {
+        this.applicableActions[actionKey].isDisabled = true;
+      }
+    });
+    this._update();
+  }
+
+  enable(actionKeys) {
+    actionKeys.forEach((actionKey) => {
+      if (this.applicableActions[actionKey]) {
+        this.applicableActions[actionKey].isDisabled = false;
+      }
+    });
+    this._update();
+  }
+
+  hide(actionKeys) {
+    actionKeys.forEach((actionKey) => {
+      if (this.applicableActions[actionKey]) {
+        this.applicableActions[actionKey].isHidden = true;
+      }
+    });
+    this._update();
+  }
+
+  show(actionKeys) {
+    actionKeys.forEach((actionKey) => {
+      if (this.applicableActions[actionKey]) {
+        this.applicableActions[actionKey].isHidden = false;
+      }
+    });
+    this._update();
+  }
+
+  destroy() {
+    if (!this.skipEnvironmentObservers) {
+      this.objectUnsubscribes.forEach((unsubscribe) => {
+        unsubscribe();
+      });
+
+      this.openmct.editor.off('isEditing', this._updateActions);
     }
 
-    enable(actionKeys) {
-        actionKeys.forEach(actionKey => {
-            if (this.applicableActions[actionKey]) {
-                this.applicableActions[actionKey].isDisabled = false;
-            }
-        });
-        this._update();
-    }
+    this.emit('destroy', this.view);
+    this.removeAllListeners();
+  }
 
-    hide(actionKeys) {
-        actionKeys.forEach(actionKey => {
-            if (this.applicableActions[actionKey]) {
-                this.applicableActions[actionKey].isHidden = true;
-            }
-        });
-        this._update();
-    }
+  getVisibleActions() {
+    let actionsArray = Object.keys(this.applicableActions);
+    let visibleActions = [];
 
-    show(actionKeys) {
-        actionKeys.forEach(actionKey => {
-            if (this.applicableActions[actionKey]) {
-                this.applicableActions[actionKey].isHidden = false;
-            }
-        });
-        this._update();
-    }
+    actionsArray.forEach((actionKey) => {
+      let action = this.applicableActions[actionKey];
 
-    destroy() {
-        super.removeAllListeners();
+      if (!action.isHidden) {
+        visibleActions.push(action);
+      }
+    });
 
-        if (!this.skipEnvironmentObservers) {
-            this.objectUnsubscribes.forEach(unsubscribe => {
-                unsubscribe();
-            });
+    return visibleActions;
+  }
 
-            this.openmct.editor.off('isEditing', this._updateActions);
-        }
+  getStatusBarActions() {
+    let actionsArray = Object.keys(this.applicableActions);
+    let statusBarActions = [];
 
-        this.emit('destroy', this.view);
-    }
+    actionsArray.forEach((actionKey) => {
+      let action = this.applicableActions[actionKey];
 
-    getVisibleActions() {
-        let actionsArray = Object.keys(this.applicableActions);
-        let visibleActions = [];
+      if (action.showInStatusBar && !action.isDisabled && !action.isHidden) {
+        statusBarActions.push(action);
+      }
+    });
 
-        actionsArray.forEach(actionKey => {
-            let action = this.applicableActions[actionKey];
+    return statusBarActions;
+  }
 
-            if (!action.isHidden) {
-                visibleActions.push(action);
-            }
-        });
+  getActionsObject() {
+    return this.applicableActions;
+  }
 
-        return visibleActions;
-    }
+  _update() {
+    this.emit('update', this.applicableActions);
+  }
 
-    getStatusBarActions() {
-        let actionsArray = Object.keys(this.applicableActions);
-        let statusBarActions = [];
+  _observeObjectPath() {
+    let actionCollection = this;
 
-        actionsArray.forEach(actionKey => {
-            let action = this.applicableActions[actionKey];
-
-            if (action.showInStatusBar && !action.isDisabled && !action.isHidden) {
-                statusBarActions.push(action);
-            }
-        });
-
-        return statusBarActions;
-    }
-
-    getActionsObject() {
-        return this.applicableActions;
-    }
+    function updateObject(oldObject, newObject) {
+      Object.assign(oldObject, newObject);
 
-    _update() {
-        this.emit('update', this.applicableActions);
+      actionCollection._updateActions();
     }
 
-    _observeObjectPath() {
-        let actionCollection = this;
-
-        function updateObject(oldObject, newObject) {
-            Object.assign(oldObject, newObject);
-
-            actionCollection._updateActions();
-        }
-
-        this.objectPath.forEach(object => {
-            if (object) {
-                let unsubscribe = this.openmct.objects.observe(object, '*', updateObject.bind(this, object));
-
-                this.objectUnsubscribes.push(unsubscribe);
-            }
-        });
-    }
-
-    _updateActions() {
-        let newApplicableActions = this.openmct.actions._applicableActions(this.objectPath, this.view);
-
-        this.applicableActions = this._mergeOldAndNewActions(this.applicableActions, newApplicableActions);
-        this._update();
-    }
-
-    _mergeOldAndNewActions(oldActions, newActions) {
-        let mergedActions = {};
-        Object.keys(newActions).forEach(key => {
-            if (oldActions[key]) {
-                mergedActions[key] = oldActions[key];
-            } else {
-                mergedActions[key] = newActions[key];
-            }
-        });
-
-        return mergedActions;
-    }
+    this.objectPath.forEach((object) => {
+      if (object) {
+        let unsubscribe = this.openmct.objects.observe(
+          object,
+          '*',
+          updateObject.bind(this, object)
+        );
+
+        this.objectUnsubscribes.push(unsubscribe);
+      }
+    });
+  }
+
+  _updateActions() {
+    let newApplicableActions = this.openmct.actions._applicableActions(this.objectPath, this.view);
+
+    this.applicableActions = this._mergeOldAndNewActions(
+      this.applicableActions,
+      newApplicableActions
+    );
+    this._update();
+  }
+
+  _mergeOldAndNewActions(oldActions, newActions) {
+    let mergedActions = {};
+    Object.keys(newActions).forEach((key) => {
+      if (oldActions[key]) {
+        mergedActions[key] = oldActions[key];
+      } else {
+        mergedActions[key] = newActions[key];
+      }
+    });
+
+    return mergedActions;
+  }
 }
 
 export default ActionCollection;
diff --git a/src/api/actions/ActionCollectionSpec.js b/src/api/actions/ActionCollectionSpec.js
index 6acbd2671a6..ec294e26207 100644
--- a/src/api/actions/ActionCollectionSpec.js
+++ b/src/api/actions/ActionCollectionSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,224 +20,215 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import ActionCollection from './ActionCollection';
-import { createOpenMct, resetApplicationState } from '../../utils/testing';
+import { createOpenMct, resetApplicationState } from '../../utils/testing.js';
+import ActionCollection from './ActionCollection.js';
 
 describe('The ActionCollection', () => {
-    let openmct;
-    let actionCollection;
-    let mockApplicableActions;
-    let mockObjectPath;
-    let mockView;
-    let mockIdentifierService;
-
-    beforeEach(() => {
-        openmct = createOpenMct();
-        openmct.$injector = jasmine.createSpyObj('$injector', ['get']);
-        mockIdentifierService = jasmine.createSpyObj(
-            'identifierService',
-            ['parse']
-        );
-        mockIdentifierService.parse.and.returnValue({
-            getSpace: () => {
-                return '';
-            }
-        });
-
-        openmct.$injector.get.and.returnValue(mockIdentifierService);
-        mockObjectPath = [
-            {
-                name: 'mock folder',
-                type: 'fake-folder',
-                identifier: {
-                    key: 'mock-folder',
-                    namespace: ''
-                }
-            },
-            {
-                name: 'mock parent folder',
-                type: 'fake-folder',
-                identifier: {
-                    key: 'mock-parent-folder',
-                    namespace: ''
-                }
-            }
-        ];
-        openmct.objects.addProvider('', jasmine.createSpyObj('mockMutableObjectProvider', [
-            'create',
-            'update'
-        ]));
-        mockView = {
-            getViewContext: () => {
-                return {
-                    onlyAppliesToTestCase: true
-                };
-            }
+  let openmct;
+  let actionCollection;
+  let mockApplicableActions;
+  let mockObjectPath;
+  let mockView;
+
+  beforeEach(() => {
+    openmct = createOpenMct();
+
+    mockObjectPath = [
+      {
+        name: 'mock folder',
+        type: 'fake-folder',
+        identifier: {
+          key: 'mock-folder',
+          namespace: ''
+        }
+      },
+      {
+        name: 'mock parent folder',
+        type: 'fake-folder',
+        identifier: {
+          key: 'mock-parent-folder',
+          namespace: ''
+        }
+      }
+    ];
+    openmct.objects.addProvider(
+      '',
+      jasmine.createSpyObj('mockMutableObjectProvider', ['create', 'update'])
+    );
+    mockView = {
+      getViewContext: () => {
+        return {
+          onlyAppliesToTestCase: true
         };
-        mockApplicableActions = {
-            'test-action-object-path': {
-                name: 'Test Action Object Path',
-                key: 'test-action-object-path',
-                cssClass: 'test-action-object-path',
-                description: 'This is a test action for object path',
-                group: 'action',
-                priority: 9,
-                appliesTo: (objectPath) => {
-                    if (objectPath.length) {
-                        return objectPath[0].type === 'fake-folder';
-                    }
-
-                    return false;
-                },
-                invoke: () => {
-                }
-            },
-            'test-action-view': {
-                name: 'Test Action View',
-                key: 'test-action-view',
-                cssClass: 'test-action-view',
-                description: 'This is a test action for view',
-                group: 'action',
-                priority: 9,
-                showInStatusBar: true,
-                appliesTo: (objectPath, view = {}) => {
-                    if (view.getViewContext) {
-                        let viewContext = view.getViewContext();
-
-                        return viewContext.onlyAppliesToTestCase;
-                    }
-
-                    return false;
-                },
-                invoke: () => {
-                }
-            }
-        };
-
-        actionCollection = new ActionCollection(mockApplicableActions, mockObjectPath, mockView, openmct);
-    });
-
-    afterEach(() => {
-        actionCollection.destroy();
-
-        return resetApplicationState(openmct);
-    });
-
-    describe("disable method invoked with action keys", () => {
-        it("marks those actions as isDisabled", () => {
-            let actionKey = 'test-action-object-path';
-            let actionsObject = actionCollection.getActionsObject();
-            let action = actionsObject[actionKey];
-
-            expect(action.isDisabled).toBeFalsy();
-
-            actionCollection.disable([actionKey]);
-            actionsObject = actionCollection.getActionsObject();
-            action = actionsObject[actionKey];
-
-            expect(action.isDisabled).toBeTrue();
-        });
+      }
+    };
+    mockApplicableActions = {
+      'test-action-object-path': {
+        name: 'Test Action Object Path',
+        key: 'test-action-object-path',
+        cssClass: 'test-action-object-path',
+        description: 'This is a test action for object path',
+        group: 'action',
+        priority: 9,
+        appliesTo: (objectPath) => {
+          if (objectPath.length) {
+            return objectPath[0].type === 'fake-folder';
+          }
+
+          return false;
+        },
+        invoke: () => {}
+      },
+      'test-action-view': {
+        name: 'Test Action View',
+        key: 'test-action-view',
+        cssClass: 'test-action-view',
+        description: 'This is a test action for view',
+        group: 'action',
+        priority: 9,
+        showInStatusBar: true,
+        appliesTo: (objectPath, view = {}) => {
+          if (view.getViewContext) {
+            let viewContext = view.getViewContext();
+
+            return viewContext.onlyAppliesToTestCase;
+          }
+
+          return false;
+        },
+        invoke: () => {}
+      }
+    };
+
+    actionCollection = new ActionCollection(
+      mockApplicableActions,
+      mockObjectPath,
+      mockView,
+      openmct
+    );
+  });
+
+  afterEach(() => {
+    actionCollection.destroy();
+
+    return resetApplicationState(openmct);
+  });
+
+  describe('disable method invoked with action keys', () => {
+    it('marks those actions as isDisabled', () => {
+      let actionKey = 'test-action-object-path';
+      let actionsObject = actionCollection.getActionsObject();
+      let action = actionsObject[actionKey];
+
+      expect(action.isDisabled).toBeFalsy();
+
+      actionCollection.disable([actionKey]);
+      actionsObject = actionCollection.getActionsObject();
+      action = actionsObject[actionKey];
+
+      expect(action.isDisabled).toBeTrue();
     });
+  });
 
-    describe("enable method invoked with action keys", () => {
-        it("marks the isDisabled property as false", () => {
-            let actionKey = 'test-action-object-path';
+  describe('enable method invoked with action keys', () => {
+    it('marks the isDisabled property as false', () => {
+      let actionKey = 'test-action-object-path';
 
-            actionCollection.disable([actionKey]);
+      actionCollection.disable([actionKey]);
 
-            let actionsObject = actionCollection.getActionsObject();
-            let action = actionsObject[actionKey];
+      let actionsObject = actionCollection.getActionsObject();
+      let action = actionsObject[actionKey];
 
-            expect(action.isDisabled).toBeTrue();
+      expect(action.isDisabled).toBeTrue();
 
-            actionCollection.enable([actionKey]);
-            actionsObject = actionCollection.getActionsObject();
-            action = actionsObject[actionKey];
+      actionCollection.enable([actionKey]);
+      actionsObject = actionCollection.getActionsObject();
+      action = actionsObject[actionKey];
 
-            expect(action.isDisabled).toBeFalse();
-        });
+      expect(action.isDisabled).toBeFalse();
     });
+  });
 
-    describe("hide method invoked with action keys", () => {
-        it("marks those actions as isHidden", () => {
-            let actionKey = 'test-action-object-path';
-            let actionsObject = actionCollection.getActionsObject();
-            let action = actionsObject[actionKey];
+  describe('hide method invoked with action keys', () => {
+    it('marks those actions as isHidden', () => {
+      let actionKey = 'test-action-object-path';
+      let actionsObject = actionCollection.getActionsObject();
+      let action = actionsObject[actionKey];
 
-            expect(action.isHidden).toBeFalsy();
+      expect(action.isHidden).toBeFalsy();
 
-            actionCollection.hide([actionKey]);
-            actionsObject = actionCollection.getActionsObject();
-            action = actionsObject[actionKey];
+      actionCollection.hide([actionKey]);
+      actionsObject = actionCollection.getActionsObject();
+      action = actionsObject[actionKey];
 
-            expect(action.isHidden).toBeTrue();
-        });
+      expect(action.isHidden).toBeTrue();
     });
+  });
 
-    describe("show method invoked with action keys", () => {
-        it("marks the isHidden property as false", () => {
-            let actionKey = 'test-action-object-path';
+  describe('show method invoked with action keys', () => {
+    it('marks the isHidden property as false', () => {
+      let actionKey = 'test-action-object-path';
 
-            actionCollection.hide([actionKey]);
+      actionCollection.hide([actionKey]);
 
-            let actionsObject = actionCollection.getActionsObject();
-            let action = actionsObject[actionKey];
+      let actionsObject = actionCollection.getActionsObject();
+      let action = actionsObject[actionKey];
 
-            expect(action.isHidden).toBeTrue();
+      expect(action.isHidden).toBeTrue();
 
-            actionCollection.show([actionKey]);
-            actionsObject = actionCollection.getActionsObject();
-            action = actionsObject[actionKey];
+      actionCollection.show([actionKey]);
+      actionsObject = actionCollection.getActionsObject();
+      action = actionsObject[actionKey];
 
-            expect(action.isHidden).toBeFalse();
-        });
+      expect(action.isHidden).toBeFalse();
     });
+  });
 
-    describe("getVisibleActions method", () => {
-        it("returns an array of non hidden actions", () => {
-            let action1Key = 'test-action-object-path';
-            let action2Key = 'test-action-view';
+  describe('getVisibleActions method', () => {
+    it('returns an array of non hidden actions', () => {
+      let action1Key = 'test-action-object-path';
+      let action2Key = 'test-action-view';
 
-            actionCollection.hide([action1Key]);
+      actionCollection.hide([action1Key]);
 
-            let visibleActions = actionCollection.getVisibleActions();
+      let visibleActions = actionCollection.getVisibleActions();
 
-            expect(Array.isArray(visibleActions)).toBeTrue();
-            expect(visibleActions.length).toEqual(1);
-            expect(visibleActions[0].key).toEqual(action2Key);
+      expect(Array.isArray(visibleActions)).toBeTrue();
+      expect(visibleActions.length).toEqual(1);
+      expect(visibleActions[0].key).toEqual(action2Key);
 
-            actionCollection.show([action1Key]);
-            visibleActions = actionCollection.getVisibleActions();
+      actionCollection.show([action1Key]);
+      visibleActions = actionCollection.getVisibleActions();
 
-            expect(visibleActions.length).toEqual(2);
-        });
+      expect(visibleActions.length).toEqual(2);
     });
+  });
 
-    describe("getStatusBarActions method", () => {
-        it("returns an array of non disabled, non hidden statusBar actions", () => {
-            let action2Key = 'test-action-view';
+  describe('getStatusBarActions method', () => {
+    it('returns an array of non disabled, non hidden statusBar actions', () => {
+      let action2Key = 'test-action-view';
 
-            let statusBarActions = actionCollection.getStatusBarActions();
+      let statusBarActions = actionCollection.getStatusBarActions();
 
-            expect(Array.isArray(statusBarActions)).toBeTrue();
-            expect(statusBarActions.length).toEqual(1);
-            expect(statusBarActions[0].key).toEqual(action2Key);
+      expect(Array.isArray(statusBarActions)).toBeTrue();
+      expect(statusBarActions.length).toEqual(1);
+      expect(statusBarActions[0].key).toEqual(action2Key);
 
-            actionCollection.disable([action2Key]);
-            statusBarActions = actionCollection.getStatusBarActions();
+      actionCollection.disable([action2Key]);
+      statusBarActions = actionCollection.getStatusBarActions();
 
-            expect(statusBarActions.length).toEqual(0);
+      expect(statusBarActions.length).toEqual(0);
 
-            actionCollection.enable([action2Key]);
-            statusBarActions = actionCollection.getStatusBarActions();
+      actionCollection.enable([action2Key]);
+      statusBarActions = actionCollection.getStatusBarActions();
 
-            expect(statusBarActions.length).toEqual(1);
-            expect(statusBarActions[0].key).toEqual(action2Key);
+      expect(statusBarActions.length).toEqual(1);
+      expect(statusBarActions[0].key).toEqual(action2Key);
 
-            actionCollection.hide([action2Key]);
-            statusBarActions = actionCollection.getStatusBarActions();
+      actionCollection.hide([action2Key]);
+      statusBarActions = actionCollection.getStatusBarActions();
 
-            expect(statusBarActions.length).toEqual(0);
-        });
+      expect(statusBarActions.length).toEqual(0);
     });
+  });
 });
diff --git a/src/api/actions/ActionsAPI.js b/src/api/actions/ActionsAPI.js
index d8383522a5a..fdb984a328c 100644
--- a/src/api/actions/ActionsAPI.js
+++ b/src/api/actions/ActionsAPI.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,128 +20,136 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 import EventEmitter from 'EventEmitter';
-import ActionCollection from './ActionCollection';
 import _ from 'lodash';
 
-class ActionsAPI extends EventEmitter {
-    constructor(openmct) {
-        super();
-
-        this._allActions = {};
-        this._actionCollections = new WeakMap();
-        this._openmct = openmct;
-
-        this._groupOrder = ['windowing', 'undefined', 'view', 'action', 'json'];
+import ActionCollection from './ActionCollection.js';
 
-        this.register = this.register.bind(this);
-        this.getActionsCollection = this.getActionsCollection.bind(this);
-        this._applicableActions = this._applicableActions.bind(this);
-        this._updateCachedActionCollections = this._updateCachedActionCollections.bind(this);
+class ActionsAPI extends EventEmitter {
+  constructor(openmct) {
+    super();
+
+    this._allActions = {};
+    this._actionCollections = new WeakMap();
+    this._openmct = openmct;
+
+    this._groupOrder = ['windowing', 'undefined', 'view', 'action', 'export', 'import'];
+
+    this.register = this.register.bind(this);
+    this.getActionsCollection = this.getActionsCollection.bind(this);
+    this._applicableActions = this._applicableActions.bind(this);
+    this._updateCachedActionCollections = this._updateCachedActionCollections.bind(this);
+  }
+
+  register(actionDefinition) {
+    this._allActions[actionDefinition.key] = actionDefinition;
+  }
+
+  getAction(key) {
+    return this._allActions[key];
+  }
+
+  getActionsCollection(objectPath, view) {
+    if (view) {
+      return (
+        this._getCachedActionCollection(objectPath, view) ||
+        this._newActionCollection(objectPath, view, true)
+      );
+    } else {
+      return this._newActionCollection(objectPath, view, true);
     }
-
-    register(actionDefinition) {
-        this._allActions[actionDefinition.key] = actionDefinition;
+  }
+
+  updateGroupOrder(groupArray) {
+    this._groupOrder = groupArray;
+  }
+
+  _getCachedActionCollection(objectPath, view) {
+    return this._actionCollections.get(view);
+  }
+
+  _newActionCollection(objectPath, view, skipEnvironmentObservers) {
+    let applicableActions = this._applicableActions(objectPath, view);
+
+    const actionCollection = new ActionCollection(
+      applicableActions,
+      objectPath,
+      view,
+      this._openmct,
+      skipEnvironmentObservers
+    );
+    if (view) {
+      this._cacheActionCollection(view, actionCollection);
     }
 
-    getAction(key) {
-        return this._allActions[key];
-    }
+    return actionCollection;
+  }
 
-    getActionsCollection(objectPath, view) {
-        if (view) {
-            return this._getCachedActionCollection(objectPath, view) || this._newActionCollection(objectPath, view, true);
-        } else {
-            return this._newActionCollection(objectPath, view, true);
-        }
-    }
+  _cacheActionCollection(view, actionCollection) {
+    this._actionCollections.set(view, actionCollection);
+    actionCollection.on('destroy', this._updateCachedActionCollections);
+  }
 
-    updateGroupOrder(groupArray) {
-        this._groupOrder = groupArray;
+  _updateCachedActionCollections(key) {
+    if (this._actionCollections.has(key)) {
+      let actionCollection = this._actionCollections.get(key);
+      actionCollection.off('destroy', this._updateCachedActionCollections);
+      delete actionCollection.applicableActions;
+      this._actionCollections.delete(key);
     }
+  }
 
-    _getCachedActionCollection(objectPath, view) {
-        let cachedActionCollection = this._actionCollections.get(view);
+  _applicableActions(objectPath, view) {
+    let actionsObject = {};
 
-        return cachedActionCollection;
-    }
+    let keys = Object.keys(this._allActions).filter((key) => {
+      let actionDefinition = this._allActions[key];
 
-    _newActionCollection(objectPath, view, skipEnvironmentObservers) {
-        let applicableActions = this._applicableActions(objectPath, view);
+      if (actionDefinition.appliesTo === undefined) {
+        return true;
+      } else {
+        return actionDefinition.appliesTo(objectPath, view);
+      }
+    });
 
-        const actionCollection = new ActionCollection(applicableActions, objectPath, view, this._openmct, skipEnvironmentObservers);
-        if (view) {
-            this._cacheActionCollection(view, actionCollection);
-        }
+    keys.forEach((key) => {
+      let action = _.clone(this._allActions[key]);
 
-        return actionCollection;
-    }
+      actionsObject[key] = action;
+    });
 
-    _cacheActionCollection(view, actionCollection) {
-        this._actionCollections.set(view, actionCollection);
-        actionCollection.on('destroy', this._updateCachedActionCollections);
-    }
+    return actionsObject;
+  }
 
-    _updateCachedActionCollections(key) {
-        if (this._actionCollections.has(key)) {
-            let actionCollection = this._actionCollections.get(key);
-            actionCollection.off('destroy', this._updateCachedActionCollections);
-
-            this._actionCollections.delete(key);
-        }
+  _groupAndSortActions(actionsArray = []) {
+    if (!Array.isArray(actionsArray) && typeof actionsArray === 'object') {
+      actionsArray = Object.keys(actionsArray).map((key) => actionsArray[key]);
     }
 
-    _applicableActions(objectPath, view) {
-        let actionsObject = {};
-
-        let keys = Object.keys(this._allActions).filter(key => {
-            let actionDefinition = this._allActions[key];
-
-            if (actionDefinition.appliesTo === undefined) {
-                return true;
-            } else {
-                return actionDefinition.appliesTo(objectPath, view);
-            }
-        });
-
-        keys.forEach(key => {
-            let action = _.clone(this._allActions[key]);
-
-            actionsObject[key] = action;
-        });
+    let actionsObject = {};
+    let groupedSortedActionsArray = [];
 
-        return actionsObject;
+    function sortDescending(a, b) {
+      return b.priority - a.priority;
     }
 
-    _groupAndSortActions(actionsArray) {
-        if (!Array.isArray(actionsArray) && typeof actionsArray === 'object') {
-            actionsArray = Object.keys(actionsArray).map(key => actionsArray[key]);
-        }
+    actionsArray.forEach((action) => {
+      if (actionsObject[action.group] === undefined) {
+        actionsObject[action.group] = [action];
+      } else {
+        actionsObject[action.group].push(action);
+      }
+    });
 
-        let actionsObject = {};
-        let groupedSortedActionsArray = [];
+    this._groupOrder.forEach((group) => {
+      let groupArray = actionsObject[group];
 
-        function sortDescending(a, b) {
-            return b.priority - a.priority;
-        }
+      if (groupArray) {
+        groupedSortedActionsArray.push(groupArray.sort(sortDescending));
+      }
+    });
 
-        actionsArray.forEach(action => {
-            if (actionsObject[action.group] === undefined) {
-                actionsObject[action.group] = [action];
-            } else {
-                actionsObject[action.group].push(action);
-            }
-        });
-
-        this._groupOrder.forEach(group => {
-            let groupArray = actionsObject[group];
-
-            if (groupArray) {
-                groupedSortedActionsArray.push(groupArray.sort(sortDescending));
-            }
-        });
-
-        return groupedSortedActionsArray;
-    }
+    return groupedSortedActionsArray;
+  }
 }
 
 export default ActionsAPI;
diff --git a/src/api/actions/ActionsAPISpec.js b/src/api/actions/ActionsAPISpec.js
index e293d6ba85e..b464fc8dc77 100644
--- a/src/api/actions/ActionsAPISpec.js
+++ b/src/api/actions/ActionsAPISpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,134 +20,132 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import ActionsAPI from './ActionsAPI';
-import { createOpenMct, resetApplicationState } from '../../utils/testing';
-import ActionCollection from './ActionCollection';
+import { createOpenMct, resetApplicationState } from '../../utils/testing.js';
+import ActionCollection from './ActionCollection.js';
+import ActionsAPI from './ActionsAPI.js';
 
 describe('The Actions API', () => {
-    let openmct;
-    let actionsAPI;
-    let mockAction;
-    let mockObjectPath;
-    let mockObjectPathAction;
-    let mockViewContext1;
-
-    beforeEach(() => {
-        openmct = createOpenMct();
-        actionsAPI = new ActionsAPI(openmct);
-        mockObjectPathAction = {
-            name: 'Test Action Object Path',
-            key: 'test-action-object-path',
-            cssClass: 'test-action-object-path',
-            description: 'This is a test action for object path',
-            group: 'action',
-            priority: 9,
-            appliesTo: (objectPath) => {
-                if (objectPath.length) {
-                    return objectPath[0].type === 'fake-folder';
-                }
-
-                return false;
-            },
-            invoke: () => {
-            }
-        };
-        mockAction = {
-            name: 'Test Action View',
-            key: 'test-action-view',
-            cssClass: 'test-action-view',
-            description: 'This is a test action for view',
-            group: 'action',
-            priority: 9,
-            appliesTo: (objectPath, view = {}) => {
-                if (view.getViewContext) {
-                    let viewContext = view.getViewContext();
-
-                    return viewContext.onlyAppliesToTestCase;
-                }
-
-                return false;
-            },
-            invoke: () => {
-            }
+  let openmct;
+  let actionsAPI;
+  let mockAction;
+  let mockObjectPath;
+  let mockObjectPathAction;
+  let mockViewContext1;
+
+  beforeEach(() => {
+    openmct = createOpenMct();
+    actionsAPI = new ActionsAPI(openmct);
+    mockObjectPathAction = {
+      name: 'Test Action Object Path',
+      key: 'test-action-object-path',
+      cssClass: 'test-action-object-path',
+      description: 'This is a test action for object path',
+      group: 'action',
+      priority: 9,
+      appliesTo: (objectPath) => {
+        if (objectPath.length) {
+          return objectPath[0].type === 'fake-folder';
+        }
+
+        return false;
+      },
+      invoke: () => {}
+    };
+    mockAction = {
+      name: 'Test Action View',
+      key: 'test-action-view',
+      cssClass: 'test-action-view',
+      description: 'This is a test action for view',
+      group: 'action',
+      priority: 9,
+      appliesTo: (objectPath, view = {}) => {
+        if (view.getViewContext) {
+          let viewContext = view.getViewContext();
+
+          return viewContext.onlyAppliesToTestCase;
+        }
+
+        return false;
+      },
+      invoke: () => {}
+    };
+    mockObjectPath = [
+      {
+        name: 'mock folder',
+        type: 'fake-folder',
+        identifier: {
+          key: 'mock-folder',
+          namespace: ''
+        }
+      },
+      {
+        name: 'mock parent folder',
+        type: 'fake-folder',
+        identifier: {
+          key: 'mock-parent-folder',
+          namespace: ''
+        }
+      }
+    ];
+    mockViewContext1 = {
+      getViewContext: () => {
+        return {
+          onlyAppliesToTestCase: true
         };
-        mockObjectPath = [
-            {
-                name: 'mock folder',
-                type: 'fake-folder',
-                identifier: {
-                    key: 'mock-folder',
-                    namespace: ''
-                }
-            },
-            {
-                name: 'mock parent folder',
-                type: 'fake-folder',
-                identifier: {
-                    key: 'mock-parent-folder',
-                    namespace: ''
-                }
-            }
-        ];
-        mockViewContext1 = {
-            getViewContext: () => {
-                return {
-                    onlyAppliesToTestCase: true
-                };
-            }
-        };
-    });
+      }
+    };
+  });
 
-    afterEach(() => {
-        return resetApplicationState(openmct);
-    });
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
 
-    describe("register method", () => {
-        it("adds action to ActionsAPI", () => {
-            actionsAPI.register(mockAction);
+  describe('register method', () => {
+    it('adds action to ActionsAPI', () => {
+      actionsAPI.register(mockAction);
 
-            let actionCollection = actionsAPI.getActionsCollection(mockObjectPath, mockViewContext1);
-            let action = actionCollection.getActionsObject()[mockAction.key];
+      let actionCollection = actionsAPI.getActionsCollection(mockObjectPath, mockViewContext1);
+      let action = actionCollection.getActionsObject()[mockAction.key];
 
-            expect(action.key).toEqual(mockAction.key);
-            expect(action.name).toEqual(mockAction.name);
-        });
+      expect(action.key).toEqual(mockAction.key);
+      expect(action.name).toEqual(mockAction.name);
     });
+  });
 
-    describe("get method", () => {
-        beforeEach(() => {
-            actionsAPI.register(mockAction);
-            actionsAPI.register(mockObjectPathAction);
-        });
+  describe('get method', () => {
+    beforeEach(() => {
+      actionsAPI.register(mockAction);
+      actionsAPI.register(mockObjectPathAction);
+    });
 
-        it("returns an ActionCollection when invoked with an objectPath only", () => {
-            let actionCollection = actionsAPI.getActionsCollection(mockObjectPath);
-            let instanceOfActionCollection = actionCollection instanceof ActionCollection;
+    it('returns an ActionCollection when invoked with an objectPath only', () => {
+      let actionCollection = actionsAPI.getActionsCollection(mockObjectPath);
+      let instanceOfActionCollection = actionCollection instanceof ActionCollection;
 
-            expect(instanceOfActionCollection).toBeTrue();
-        });
+      expect(instanceOfActionCollection).toBeTrue();
+    });
 
-        it("returns an ActionCollection when invoked with an objectPath and view", () => {
-            let actionCollection = actionsAPI.getActionsCollection(mockObjectPath, mockViewContext1);
-            let instanceOfActionCollection = actionCollection instanceof ActionCollection;
+    it('returns an ActionCollection when invoked with an objectPath and view', () => {
+      let actionCollection = actionsAPI.getActionsCollection(mockObjectPath, mockViewContext1);
+      let instanceOfActionCollection = actionCollection instanceof ActionCollection;
 
-            expect(instanceOfActionCollection).toBeTrue();
-        });
+      expect(instanceOfActionCollection).toBeTrue();
+    });
 
-        it("returns relevant actions when invoked with objectPath only", () => {
-            let actionCollection = actionsAPI.getActionsCollection(mockObjectPath);
-            let action = actionCollection.getActionsObject()[mockObjectPathAction.key];
+    it('returns relevant actions when invoked with objectPath only', () => {
+      let actionCollection = actionsAPI.getActionsCollection(mockObjectPath);
+      let action = actionCollection.getActionsObject()[mockObjectPathAction.key];
 
-            expect(action.key).toEqual(mockObjectPathAction.key);
-            expect(action.name).toEqual(mockObjectPathAction.name);
-        });
+      expect(action.key).toEqual(mockObjectPathAction.key);
+      expect(action.name).toEqual(mockObjectPathAction.name);
+    });
 
-        it("returns relevant actions when invoked with objectPath and view", () => {
-            let actionCollection = actionsAPI.getActionsCollection(mockObjectPath, mockViewContext1);
-            let action = actionCollection.getActionsObject()[mockAction.key];
+    it('returns relevant actions when invoked with objectPath and view', () => {
+      let actionCollection = actionsAPI.getActionsCollection(mockObjectPath, mockViewContext1);
+      let action = actionCollection.getActionsObject()[mockAction.key];
 
-            expect(action.key).toEqual(mockAction.key);
-            expect(action.name).toEqual(mockAction.name);
-        });
+      expect(action.key).toEqual(mockAction.key);
+      expect(action.name).toEqual(mockAction.name);
     });
+  });
 });
diff --git a/src/api/annotation/AnnotationAPI.js b/src/api/annotation/AnnotationAPI.js
new file mode 100644
index 00000000000..d72572f57d7
--- /dev/null
+++ b/src/api/annotation/AnnotationAPI.js
@@ -0,0 +1,514 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import EventEmitter from 'EventEmitter';
+import _ from 'lodash';
+import { v4 as uuid } from 'uuid';
+
+/**
+ * @readonly
+ * @enum {String} AnnotationType
+ * @property {String} NOTEBOOK The notebook annotation type
+ * @property {String} GEOSPATIAL The geospatial annotation type
+ * @property {String} PIXEL_SPATIAL The pixel-spatial annotation type
+ * @property {String} TEMPORAL The temporal annotation type
+ * @property {String} PLOT_SPATIAL The plot-spatial annotation type
+ */
+const ANNOTATION_TYPES = Object.freeze({
+  NOTEBOOK: 'NOTEBOOK',
+  GEOSPATIAL: 'GEOSPATIAL',
+  PIXEL_SPATIAL: 'PIXEL_SPATIAL',
+  TEMPORAL: 'TEMPORAL',
+  PLOT_SPATIAL: 'PLOT_SPATIAL'
+});
+
+const ANNOTATION_TYPE = 'annotation';
+
+const ANNOTATION_LAST_CREATED = 'annotationLastCreated';
+
+/**
+ * @typedef {Object} Tag
+ * @property {String} key a unique identifier for the tag
+ * @property {String} backgroundColor eg. "#cc0000"
+ * @property {String} foregroundColor eg. "#ffffff"
+ */
+
+/**
+ * @typedef {import('../objects/ObjectAPI').DomainObject} DomainObject
+ */
+
+/**
+ * @typedef {import('../objects/ObjectAPI').Identifier} Identifier
+ */
+
+/**
+ * @typedef {import('../../../openmct').OpenMCT} OpenMCT
+ */
+
+/**
+ * An interface for interacting with annotations of domain objects.
+ * An annotation of a domain object is an operator created object for the purposes
+ * of further describing data in plots, notebooks, maps, etc. For example, an annotation
+ * could be a tag on a plot notating an interesting set of points labeled SCIENCE. It could
+ * also be set of notebook entries the operator has tagged DRIVING when a robot monitored by OpenMCT
+ * about rationals behind why the robot has taken a certain path.
+ * Annotations are discoverable using search, and are typically rendered in OpenMCT views to bring attention
+ * to other users.
+ * @constructor
+ */
+export default class AnnotationAPI extends EventEmitter {
+  /** @type {Map<ANNOTATION_TYPES, Array<(a, b) => boolean >>} */
+  #targetComparatorMap;
+
+  /**
+   * @param {OpenMCT} openmct
+   */
+  constructor(openmct) {
+    super();
+    this.openmct = openmct;
+    this.availableTags = {};
+    this.namespaceToSaveAnnotations = '';
+    this.#targetComparatorMap = new Map();
+
+    this.ANNOTATION_TYPES = ANNOTATION_TYPES;
+    this.ANNOTATION_TYPE = ANNOTATION_TYPE;
+    this.ANNOTATION_LAST_CREATED = ANNOTATION_LAST_CREATED;
+
+    this.openmct.types.addType(ANNOTATION_TYPE, {
+      name: 'Annotation',
+      description:
+        'A user created note or comment about time ranges, pixel space, and geospatial features.',
+      creatable: false,
+      cssClass: 'icon-notebook',
+      initialize: function (domainObject) {
+        domainObject.targets = domainObject.targets || [];
+        domainObject._deleted = domainObject._deleted || false;
+        domainObject.originalContextPath = domainObject.originalContextPath || '';
+        domainObject.tags = domainObject.tags || [];
+        domainObject.contentText = domainObject.contentText || '';
+        domainObject.annotationType = domainObject.annotationType || 'plotspatial';
+      }
+    });
+  }
+  /**
+   * Creates an annotation on a given domain object (e.g., a plot) and a set of targets (e.g., telemetry objects)
+   * @typedef {Object} CreateAnnotationOptions
+   * @property {String} name a name for the new annotation (e.g., "Plot annnotation")
+   * @property {DomainObject} domainObject the domain object this annotation was created with
+   * @property {ANNOTATION_TYPES} annotationType the type of annotation to create (e.g., PLOT_SPATIAL)
+   * @property {Tag[]} tags tags to add to the annotation, e.g., SCIENCE for science related annotations
+   * @property {String} contentText Some text to add to the annotation, e.g. ("This annotation is about science")
+   * @property {Array<Object>} targets The targets ID keystrings and their specific properties.
+   * For plots, this will be a bounding box, e.g.: {keyString: "d8385009-789d-457b-acc7-d50ba2fd55ea", maxY: 100, minY: 0, maxX: 100, minX: 0}
+   * For notebooks, this will be an entry ID, e.g.: {entryId: "entry-ecb158f5-d23c-45e1-a704-649b382622ba"}
+   * @property {DomainObject>[]} targetDomainObjects the domain objects this annotation points to (e.g., telemetry objects for a plot)
+   */
+  /**
+   * @method create
+   * @param {CreateAnnotationOptions} options
+   * @returns {Promise<DomainObject>} a promise which will resolve when the domain object
+   *          has been created, or be rejected if it cannot be saved
+   */
+  async create({
+    name,
+    domainObject,
+    annotationType,
+    tags,
+    contentText,
+    targets,
+    targetDomainObjects
+  }) {
+    if (!Object.keys(this.ANNOTATION_TYPES).includes(annotationType)) {
+      throw new Error(`Unknown annotation type: ${annotationType}`);
+    }
+
+    if (!targets.length) {
+      throw new Error(`At least one target is required to create an annotation`);
+    }
+
+    if (targets.some((target) => !target.keyString)) {
+      throw new Error(`All targets require a keyString to create an annotation`);
+    }
+
+    if (!targetDomainObjects.length) {
+      throw new Error(`At least one targetDomainObject is required to create an annotation`);
+    }
+
+    const domainObjectKeyString = this.openmct.objects.makeKeyString(domainObject.identifier);
+    const originalPathObjects = await this.openmct.objects.getOriginalPath(domainObjectKeyString);
+    const originalContextPath = this.openmct.objects.getRelativePath(originalPathObjects);
+    const namespace = this.namespaceToSaveAnnotations;
+    const type = 'annotation';
+    const typeDefinition = this.openmct.types.get(type);
+    const definition = typeDefinition.definition;
+
+    const createdObject = {
+      name,
+      type,
+      identifier: {
+        key: uuid(),
+        namespace
+      },
+      tags,
+      _deleted: false,
+      annotationType,
+      contentText,
+      originalContextPath
+    };
+
+    if (definition.initialize) {
+      definition.initialize(createdObject);
+    }
+
+    createdObject.targets = targets;
+    createdObject.originalContextPath = originalContextPath;
+
+    const success = await this.openmct.objects.save(createdObject);
+    if (success) {
+      this.emit('annotationCreated', createdObject);
+      targetDomainObjects.forEach((targetDomainObject) => {
+        this.#updateAnnotationModified(targetDomainObject);
+      });
+
+      return createdObject;
+    } else {
+      throw new Error('Failed to create object');
+    }
+  }
+
+  #updateAnnotationModified(targetDomainObject) {
+    // As certain telemetry objects are immutable, we'll need to check here first
+    // to see if we can add the annotation last created property.
+    // TODO: This should be removed once we have a better way to handle immutable telemetry objects
+    if (targetDomainObject.isMutable) {
+      this.openmct.objects.mutate(targetDomainObject, this.ANNOTATION_LAST_CREATED, Date.now());
+    } else {
+      this.emit('targetDomainObjectAnnotated', targetDomainObject);
+    }
+  }
+
+  /**
+   * @method defineTag
+   * @param {String} key a unique identifier for the tag
+   * @param {Tag} tagsDefinition the definition of the tag to add
+   */
+  defineTag(tagKey, tagsDefinition) {
+    this.availableTags[tagKey] = tagsDefinition;
+  }
+
+  /**
+   * @method setNamespaceToSaveAnnotations
+   * @param {String} namespace the namespace to save new annotations to
+   */
+  setNamespaceToSaveAnnotations(namespace) {
+    this.namespaceToSaveAnnotations = namespace;
+  }
+
+  /**
+   * @method isAnnotation
+   * @param {DomainObject} domainObject the domainObject in question
+   * @returns {Boolean} Returns true if the domain object is an annotation
+   */
+  isAnnotation(domainObject) {
+    return domainObject && domainObject.type === ANNOTATION_TYPE;
+  }
+
+  /**
+   * @method getAvailableTags
+   * @returns {Tag[]} Returns an array of the available tags that have been loaded
+   */
+  getAvailableTags() {
+    if (this.availableTags) {
+      const rearrangedToArray = Object.keys(this.availableTags).map((tagKey) => {
+        return {
+          id: tagKey,
+          ...this.availableTags[tagKey]
+        };
+      });
+
+      return rearrangedToArray;
+    } else {
+      return [];
+    }
+  }
+
+  /**
+   * @method getAnnotations
+   * @param {Identifier} domainObjectIdentifier - The domain object identifier to use to search for annotations. For example, a telemetry object identifier.
+   * @param {AbortSignal} abortSignal - An abort signal to cancel the search
+   * @returns {DomainObject[]} Returns an array of annotations that match the search query
+   */
+  async getAnnotations(domainObjectIdentifier, abortSignal = null) {
+    const keyStringQuery = this.openmct.objects.makeKeyString(domainObjectIdentifier);
+    const searchResults = (
+      await Promise.all(
+        this.openmct.objects.search(
+          keyStringQuery,
+          abortSignal,
+          this.openmct.objects.SEARCH_TYPES.ANNOTATIONS
+        )
+      )
+    ).flat();
+
+    return searchResults;
+  }
+
+  /**
+   * @method deleteAnnotations
+   * @param {DomainObject[]} existingAnnotation - An array of annotations to delete (set _deleted to true)
+   */
+  deleteAnnotations(annotations) {
+    if (!annotations) {
+      throw new Error('Asked to delete null annotations! 🙅‍♂️');
+    }
+
+    annotations.forEach((annotation) => {
+      if (!annotation._deleted) {
+        this.openmct.objects.mutate(annotation, '_deleted', true);
+      }
+    });
+  }
+
+  /**
+   * @method deleteAnnotations
+   * @param {DomainObject} annotation - An annotation to undelete (set _deleted to false)
+   */
+  unDeleteAnnotation(annotation) {
+    if (!annotation) {
+      throw new Error('Asked to undelete null annotation! 🙅‍♂️');
+    }
+
+    this.openmct.objects.mutate(annotation, '_deleted', false);
+  }
+
+  getTagsFromAnnotations(annotations, filterDuplicates = true) {
+    if (!annotations) {
+      return [];
+    }
+
+    let tagsFromAnnotations = annotations.flatMap((annotation) => {
+      if (annotation._deleted) {
+        return [];
+      } else {
+        return annotation.tags;
+      }
+    });
+
+    if (filterDuplicates) {
+      tagsFromAnnotations = tagsFromAnnotations.filter((tag, index, tagArray) => {
+        return tagArray.indexOf(tag) === index;
+      });
+    }
+
+    const fullTagModels = this.#addTagMetaInformationToTags(tagsFromAnnotations);
+
+    return fullTagModels;
+  }
+
+  #addTagMetaInformationToTags(tags) {
+    // Convert to Set and back to Array to remove duplicates
+    const uniqueTags = [...new Set(tags)];
+
+    return uniqueTags.map((tagKey) => {
+      const tagModel = this.availableTags[tagKey];
+      tagModel.tagID = tagKey;
+
+      return tagModel;
+    });
+  }
+
+  #getMatchingTags(query) {
+    if (!query) {
+      return [];
+    }
+
+    const matchingTags = Object.keys(this.availableTags).filter((tagKey) => {
+      if (this.availableTags[tagKey] && this.availableTags[tagKey].label) {
+        return this.availableTags[tagKey].label.toLowerCase().includes(query.toLowerCase());
+      }
+
+      return false;
+    });
+
+    return matchingTags;
+  }
+
+  #addTagMetaInformationToResults(results, matchingTagKeys) {
+    const tagsAddedToResults = results.map((result) => {
+      const fullTagModels = this.#addTagMetaInformationToTags(result.tags);
+
+      return {
+        fullTagModels,
+        matchingTagKeys,
+        ...result
+      };
+    });
+
+    return tagsAddedToResults;
+  }
+
+  async #addTargetModelsToResults(results, abortSignal) {
+    const modelAddedToResults = await Promise.all(
+      results.map(async (result) => {
+        const targetModels = await Promise.all(
+          result.targets.map(async (target) => {
+            const targetID = target.keyString;
+            const targetModel = await this.openmct.objects.get(targetID, abortSignal);
+            const targetKeyString = this.openmct.objects.makeKeyString(targetModel.identifier);
+            const originalPathObjects = await this.openmct.objects.getOriginalPath(
+              targetKeyString,
+              [],
+              abortSignal
+            );
+
+            return {
+              originalPath: originalPathObjects,
+              ...targetModel
+            };
+          })
+        );
+
+        return {
+          targetModels,
+          ...result
+        };
+      })
+    );
+
+    return modelAddedToResults;
+  }
+
+  #combineSameTargets(results) {
+    const combinedResults = [];
+    results.forEach((currentAnnotation) => {
+      const existingAnnotation = combinedResults.find((annotationToFind) => {
+        const { annotationType, targets } = currentAnnotation;
+        return this.areAnnotationTargetsEqual(annotationType, targets, annotationToFind.targets);
+      });
+      if (!existingAnnotation) {
+        combinedResults.push(currentAnnotation);
+      } else {
+        existingAnnotation.tags.push(...currentAnnotation.tags);
+      }
+    });
+
+    return combinedResults;
+  }
+
+  /**
+   * @method #breakApartSeparateTargets
+   * @param {Array} results A set of search results that could have the multiple targets for the same result
+   * @returns {Array} The same set of results, but with each target separated out into its own result
+   */
+  #breakApartSeparateTargets(results) {
+    const separateResults = [];
+    results.forEach((result) => {
+      result.targets.forEach((target) => {
+        const targetID = target.keyString;
+        const separatedResult = {
+          ...result
+        };
+        separatedResult.targets = [target];
+        separatedResult.targetModels = result.targetModels.filter((targetModel) => {
+          const targetKeyString = this.openmct.objects.makeKeyString(targetModel.identifier);
+
+          return targetKeyString === targetID;
+        });
+        separateResults.push(separatedResult);
+      });
+    });
+
+    return separateResults;
+  }
+
+  /**
+   * @method searchForTags
+   * @param {String} query A query to match against tags. E.g., "dr" will match the tags "drilling" and "driving"
+   * @param {Object} [abortController] An optional abort method to stop the query
+   * @returns {Promise} returns a model of matching tags with their target domain objects attached
+   */
+  async searchForTags(query, abortSignal) {
+    const matchingTagKeys = this.#getMatchingTags(query);
+    if (!matchingTagKeys.length) {
+      return [];
+    }
+
+    const searchResults = (
+      await Promise.all(
+        this.openmct.objects.search(
+          matchingTagKeys,
+          abortSignal,
+          this.openmct.objects.SEARCH_TYPES.TAGS
+        )
+      )
+    ).flat();
+    const filteredDeletedResults = searchResults.filter((result) => {
+      return !result._deleted;
+    });
+    const combinedSameTargets = this.#combineSameTargets(filteredDeletedResults);
+    const appliedTagSearchResults = this.#addTagMetaInformationToResults(
+      combinedSameTargets,
+      matchingTagKeys
+    );
+    const appliedTargetsModels = await this.#addTargetModelsToResults(
+      appliedTagSearchResults,
+      abortSignal
+    );
+    const resultsWithValidPath = appliedTargetsModels.filter((result) => {
+      return this.openmct.objects.isReachable(result.targetModels?.[0]?.originalPath);
+    });
+    const breakApartSeparateTargets = this.#breakApartSeparateTargets(resultsWithValidPath);
+
+    return breakApartSeparateTargets;
+  }
+
+  /**
+   * Adds a comparator function for a given annotation type.
+   * The comparator functions will be used to determine if two annotations
+   * have the same target.
+   * @param {ANNOTATION_TYPES} annotationType
+   * @param {(t1, t2) => boolean} comparator
+   */
+  addTargetComparator(annotationType, comparator) {
+    const comparatorList = this.#targetComparatorMap.get(annotationType) ?? [];
+    comparatorList.push(comparator);
+    this.#targetComparatorMap.set(annotationType, comparatorList);
+  }
+
+  /**
+   * Compare two sets of targets to see if they are equal. First checks if
+   * any targets comparators evaluate to true, then falls back to a deep
+   * equality check.
+   * @param {ANNOTATION_TYPES} annotationType
+   * @param {*} targets
+   * @param {*} otherTargets
+   * @returns true if the targets are equal, false otherwise
+   */
+  areAnnotationTargetsEqual(annotationType, targets, otherTargets) {
+    const targetComparatorList = this.#targetComparatorMap.get(annotationType);
+    return (
+      (targetComparatorList?.length &&
+        targetComparatorList.some((targetComparator) => targetComparator(targets, otherTargets))) ||
+      _.isEqual(targets, otherTargets)
+    );
+  }
+}
diff --git a/src/api/annotation/AnnotationAPISpec.js b/src/api/annotation/AnnotationAPISpec.js
new file mode 100644
index 00000000000..fb602c04a89
--- /dev/null
+++ b/src/api/annotation/AnnotationAPISpec.js
@@ -0,0 +1,319 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import ExampleTagsPlugin from '../../../example/exampleTags/plugin.js';
+import { createOpenMct, resetApplicationState } from '../../utils/testing.js';
+
+describe('The Annotation API', () => {
+  let openmct;
+  let mockObjectProvider;
+  let mockImmutableObjectProvider;
+  let mockDomainObject;
+  let mockFolderObject;
+  let mockAnnotationObject;
+
+  beforeEach((done) => {
+    openmct = createOpenMct();
+    openmct.install(new ExampleTagsPlugin());
+    const availableTags = openmct.annotation.getAvailableTags();
+    mockFolderObject = {
+      type: 'root',
+      name: 'folderFoo',
+      location: '',
+      identifier: {
+        key: 'someParent',
+        namespace: 'fooNameSpace'
+      }
+    };
+    mockDomainObject = {
+      type: 'notebook',
+      name: 'fooRabbitNotebook',
+      location: 'fooNameSpace:someParent',
+      identifier: {
+        key: 'some-object',
+        namespace: 'fooNameSpace'
+      }
+    };
+    mockAnnotationObject = {
+      type: 'annotation',
+      name: 'Some Notebook Annotation',
+      annotationType: openmct.annotation.ANNOTATION_TYPES.NOTEBOOK,
+      tags: [availableTags[0].id, availableTags[1].id],
+      identifier: {
+        key: 'anAnnotationKey',
+        namespace: 'fooNameSpace'
+      },
+      targets: [
+        {
+          keyString: 'fooNameSpace:some-object',
+          entryId: 'fooBarEntry'
+        }
+      ]
+    };
+
+    mockObjectProvider = jasmine.createSpyObj('mock provider', ['create', 'update', 'get']);
+    // eslint-disable-next-line require-await
+    mockObjectProvider.get = async (identifier) => {
+      if (identifier.key === mockDomainObject.identifier.key) {
+        return mockDomainObject;
+      } else if (identifier.key === mockAnnotationObject.identifier.key) {
+        return mockAnnotationObject;
+      } else if (identifier.key === mockFolderObject.identifier.key) {
+        return mockFolderObject;
+      } else {
+        return null;
+      }
+    };
+
+    mockObjectProvider.create.and.returnValue(Promise.resolve(true));
+    mockObjectProvider.update.and.returnValue(Promise.resolve(true));
+
+    mockImmutableObjectProvider = jasmine.createSpyObj('mock immutable provider', ['get']);
+    // eslint-disable-next-line require-await
+    mockImmutableObjectProvider.get = async (identifier) => {
+      if (identifier.key === mockDomainObject.identifier.key) {
+        return mockDomainObject;
+      } else if (identifier.key === mockAnnotationObject.identifier.key) {
+        return mockAnnotationObject;
+      } else if (identifier.key === mockFolderObject.identifier.key) {
+        return mockFolderObject;
+      } else {
+        return null;
+      }
+    };
+
+    openmct.objects.addProvider('immutableProvider', mockImmutableObjectProvider);
+    openmct.objects.addProvider('fooNameSpace', mockObjectProvider);
+    openmct.on('start', done);
+    openmct.startHeadless();
+  });
+  afterEach(async () => {
+    await resetApplicationState(openmct);
+  });
+  it('is defined', () => {
+    expect(openmct.annotation).toBeDefined();
+  });
+
+  describe('Creation', () => {
+    it('can create annotations', async () => {
+      const annotationCreationArguments = {
+        name: 'Test Annotation',
+        domainObject: mockDomainObject,
+        annotationType: openmct.annotation.ANNOTATION_TYPES.NOTEBOOK,
+        tags: ['sometag'],
+        contentText: 'fooContext',
+        targetDomainObjects: [mockDomainObject],
+        targets: [{ keyString: 'fooTarget' }]
+      };
+      const annotationObject = await openmct.annotation.create(annotationCreationArguments);
+      expect(annotationObject).toBeDefined();
+      expect(annotationObject.type).toEqual('annotation');
+    });
+    it('can create annotations if domain object is immutable', async () => {
+      mockDomainObject.identifier.namespace = 'immutableProvider';
+      const annotationCreationArguments = {
+        name: 'Test Annotation',
+        domainObject: mockDomainObject,
+        annotationType: openmct.annotation.ANNOTATION_TYPES.NOTEBOOK,
+        tags: ['sometag'],
+        contentText: 'fooContext',
+        targetDomainObjects: [mockDomainObject],
+        targets: [{ keyString: 'fooTarget' }]
+      };
+      openmct.annotation.setNamespaceToSaveAnnotations('fooNameSpace');
+      const annotationObject = await openmct.annotation.create(annotationCreationArguments);
+      expect(annotationObject).toBeDefined();
+      expect(annotationObject.type).toEqual('annotation');
+    });
+    it('fails if annotation is an unknown type', async () => {
+      try {
+        await openmct.annotation.create(
+          'Garbage Annotation',
+          mockDomainObject,
+          'garbageAnnotation',
+          ['sometag'],
+          'fooContext',
+          { fooTarget: {} }
+        );
+      } catch (error) {
+        expect(error).toBeDefined();
+      }
+    });
+    it('fails if annotation if given an immutable namespace to save to', async () => {
+      try {
+        const annotationCreationArguments = {
+          name: 'Test Annotation',
+          domainObject: mockDomainObject,
+          annotationType: openmct.annotation.ANNOTATION_TYPES.NOTEBOOK,
+          tags: ['sometag'],
+          contentText: 'fooContext',
+          targetDomainObjects: [mockDomainObject],
+          targets: [{ keyString: 'fooTarget' }]
+        };
+        openmct.annotation.setNamespaceToSaveAnnotations('namespaceThatDoesNotExist');
+        await openmct.annotation.create(annotationCreationArguments);
+      } catch (error) {
+        expect(error).toBeDefined();
+      }
+    });
+    it('fails if annotation if given an undefined namespace to save to', async () => {
+      try {
+        const annotationCreationArguments = {
+          name: 'Test Annotation',
+          domainObject: mockDomainObject,
+          annotationType: openmct.annotation.ANNOTATION_TYPES.NOTEBOOK,
+          tags: ['sometag'],
+          contentText: 'fooContext',
+          targetDomainObjects: [mockDomainObject],
+          targets: [{ keyString: 'fooTarget' }]
+        };
+        openmct.annotation.setNamespaceToSaveAnnotations('immutableProvider');
+        await openmct.annotation.create(annotationCreationArguments);
+      } catch (error) {
+        expect(error).toBeDefined();
+      }
+    });
+  });
+
+  describe('Tagging', () => {
+    let tagCreationArguments;
+    beforeEach(() => {
+      tagCreationArguments = {
+        name: 'Test Annotation',
+        domainObject: mockDomainObject,
+        annotationType: openmct.annotation.ANNOTATION_TYPES.NOTEBOOK,
+        tags: ['aWonderfulTag'],
+        contentText: 'fooContext',
+        targets: [{ keyString: 'fooNameSpace:some-object', entryId: 'fooBarEntry' }],
+        targetDomainObjects: [mockDomainObject]
+      };
+    });
+    it('can create a tag', async () => {
+      const annotationObject = await openmct.annotation.create(tagCreationArguments);
+      expect(annotationObject).toBeDefined();
+      expect(annotationObject.type).toEqual('annotation');
+      expect(annotationObject.tags).toContain('aWonderfulTag');
+    });
+    it('can delete a tag', async () => {
+      const annotationObject = await openmct.annotation.create(tagCreationArguments);
+      expect(annotationObject).toBeDefined();
+      openmct.annotation.deleteAnnotations([annotationObject]);
+      expect(annotationObject._deleted).toBeTrue();
+    });
+    it('can remove all tags', async () => {
+      const annotationObject = await openmct.annotation.create(tagCreationArguments);
+      expect(annotationObject).toBeDefined();
+      expect(() => {
+        openmct.annotation.deleteAnnotations([annotationObject]);
+      }).not.toThrow();
+      expect(annotationObject._deleted).toBeTrue();
+    });
+    it('can add/delete/add a tag', async () => {
+      let annotationObject = await openmct.annotation.create(tagCreationArguments);
+      expect(annotationObject).toBeDefined();
+      expect(annotationObject.type).toEqual('annotation');
+      expect(annotationObject.tags).toContain('aWonderfulTag');
+      openmct.annotation.deleteAnnotations([annotationObject]);
+      expect(annotationObject._deleted).toBeTrue();
+      annotationObject = await openmct.annotation.create(tagCreationArguments);
+      expect(annotationObject).toBeDefined();
+      expect(annotationObject.type).toEqual('annotation');
+      expect(annotationObject.tags).toContain('aWonderfulTag');
+      expect(annotationObject._deleted).toBeFalse();
+    });
+  });
+
+  describe('Search', () => {
+    let sharedWorkerToRestore;
+    beforeEach(async () => {
+      // use local worker
+      sharedWorkerToRestore = openmct.objects.inMemorySearchProvider.worker;
+      openmct.objects.inMemorySearchProvider.worker = null;
+      await openmct.objects.inMemorySearchProvider.index(mockFolderObject);
+      await openmct.objects.inMemorySearchProvider.index(mockDomainObject);
+      await openmct.objects.inMemorySearchProvider.index(mockAnnotationObject);
+    });
+    afterEach(() => {
+      openmct.objects.inMemorySearchProvider.worker = sharedWorkerToRestore;
+    });
+    it('can search for tags', async () => {
+      const results = await openmct.annotation.searchForTags('S');
+      expect(results).toBeDefined();
+      expect(results.length).toEqual(1);
+    });
+    it('returns no tags for empty search', async () => {
+      const results = await openmct.annotation.searchForTags('q');
+      expect(results).toBeDefined();
+      expect(results.length).toEqual(0);
+    });
+  });
+
+  describe('Target Comparators', () => {
+    let targets;
+    let otherTargets;
+    let comparator;
+
+    beforeEach(() => {
+      targets = [
+        {
+          keyString: 'fooTarget',
+          foo: 42
+        }
+      ];
+      otherTargets = [
+        {
+          keyString: 'fooTarget',
+          bar: 42
+        }
+      ];
+      comparator = (t1, t2) => t1[0].foo === t2[0].bar;
+    });
+
+    it('can add a comparator function', () => {
+      const notebookAnnotationType = openmct.annotation.ANNOTATION_TYPES.NOTEBOOK;
+      expect(
+        openmct.annotation.areAnnotationTargetsEqual(notebookAnnotationType, targets, otherTargets)
+      ).toBeFalse(); // without a comparator, these should NOT be equal
+      // Register a comparator function for the notebook annotation type
+      openmct.annotation.addTargetComparator(notebookAnnotationType, comparator);
+      expect(
+        openmct.annotation.areAnnotationTargetsEqual(notebookAnnotationType, targets, otherTargets)
+      ).toBeTrue(); // the comparator should make these equal
+    });
+
+    it('falls back to deep equality check if no comparator functions', () => {
+      const annotationTypeWithoutComparator = openmct.annotation.ANNOTATION_TYPES.GEOSPATIAL;
+      const areEqual = openmct.annotation.areAnnotationTargetsEqual(
+        annotationTypeWithoutComparator,
+        targets,
+        targets
+      );
+      const areNotEqual = openmct.annotation.areAnnotationTargetsEqual(
+        annotationTypeWithoutComparator,
+        targets,
+        otherTargets
+      );
+      expect(areEqual).toBeTrue();
+      expect(areNotEqual).toBeFalse();
+    });
+  });
+});
diff --git a/src/api/api.js b/src/api/api.js
index 72332087f3d..c50865dbc9d 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,42 +20,38 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    './time/TimeAPI',
-    './objects/ObjectAPI',
-    './composition/CompositionAPI',
-    './types/TypeRegistry',
-    './telemetry/TelemetryAPI',
-    './indicators/IndicatorAPI',
-    './notifications/NotificationAPI',
-    './Editor',
-    './menu/MenuAPI',
-    './actions/ActionsAPI',
-    './status/StatusAPI'
-], function (
-    TimeAPI,
-    ObjectAPI,
-    CompositionAPI,
-    TypeRegistry,
-    TelemetryAPI,
-    IndicatorAPI,
-    NotificationAPI,
-    EditorAPI,
-    MenuAPI,
-    ActionsAPI,
-    StatusAPI
-) {
-    return {
-        TimeAPI: TimeAPI,
-        ObjectAPI: ObjectAPI,
-        CompositionAPI: CompositionAPI,
-        TypeRegistry: TypeRegistry,
-        TelemetryAPI: TelemetryAPI,
-        IndicatorAPI: IndicatorAPI,
-        NotificationAPI: NotificationAPI.default,
-        EditorAPI: EditorAPI,
-        MenuAPI: MenuAPI.default,
-        ActionsAPI: ActionsAPI.default,
-        StatusAPI: StatusAPI.default
-    };
-});
+import ActionsAPI from './actions/ActionsAPI.js';
+import AnnotationAPI from './annotation/AnnotationAPI.js';
+import CompositionAPI from './composition/CompositionAPI.js';
+import EditorAPI from './Editor.js';
+import FaultManagementAPI from './faultmanagement/FaultManagementAPI.js';
+import FormsAPI from './forms/FormsAPI.js';
+import IndicatorAPI from './indicators/IndicatorAPI.js';
+import MenuAPI from './menu/MenuAPI.js';
+import NotificationAPI from './notifications/NotificationAPI.js';
+import ObjectAPI from './objects/ObjectAPI.js';
+import PriorityAPI from './priority/PriorityAPI.js';
+import StatusAPI from './status/StatusAPI.js';
+import TelemetryAPI from './telemetry/TelemetryAPI.js';
+import TimeAPI from './time/TimeAPI.js';
+import TypeRegistry from './types/TypeRegistry.js';
+import UserAPI from './user/UserAPI.js';
+
+export default {
+  ActionsAPI,
+  CompositionAPI,
+  EditorAPI,
+  FaultManagementAPI,
+  FormsAPI,
+  IndicatorAPI,
+  MenuAPI,
+  NotificationAPI,
+  ObjectAPI,
+  PriorityAPI,
+  StatusAPI,
+  TelemetryAPI,
+  TimeAPI,
+  TypeRegistry,
+  UserAPI,
+  AnnotationAPI
+};
diff --git a/src/api/composition/CompositionAPI.js b/src/api/composition/CompositionAPI.js
index 2b9425a100a..3420e94c0f3 100644
--- a/src/api/composition/CompositionAPI.js
+++ b/src/api/composition/CompositionAPI.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,118 +20,124 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    'lodash',
-    'EventEmitter',
-    './DefaultCompositionProvider',
-    './CompositionCollection'
-], function (
-    _,
-    EventEmitter,
-    DefaultCompositionProvider,
-    CompositionCollection
-) {
-    /**
-     * An interface for interacting with the composition of domain objects.
-     * The composition of a domain object is the list of other domain objects
-     * it "contains" (for instance, that should be displayed beneath it
-     * in the tree.)
-     *
-     * @interface CompositionAPI
-     * @returns {module:openmct.CompositionCollection}
-     * @memberof module:openmct
-     */
-    function CompositionAPI(publicAPI) {
-        this.registry = [];
-        this.policies = [];
-        this.addProvider(new DefaultCompositionProvider(publicAPI, this));
-        this.publicAPI = publicAPI;
-    }
-
-    /**
-     * Add a composition provider.
-     *
-     * Plugins can add new composition providers to change the loading
-     * behavior for certain domain objects.
-     *
-     * @method addProvider
-     * @param {module:openmct.CompositionProvider} provider the provider to add
-     * @memberof module:openmct.CompositionAPI#
-     */
-    CompositionAPI.prototype.addProvider = function (provider) {
-        this.registry.unshift(provider);
-    };
+import CompositionCollection from './CompositionCollection.js';
+import DefaultCompositionProvider from './DefaultCompositionProvider.js';
 
-    /**
-     * Retrieve the composition (if any) of this domain object.
-     *
-     * @method get
-     * @returns {module:openmct.CompositionCollection}
-     * @memberof module:openmct.CompositionAPI#
-     */
-    CompositionAPI.prototype.get = function (domainObject) {
-        const provider = this.registry.find(p => {
-            return p.appliesTo(domainObject);
-        });
+/**
+ * @typedef {import('./CompositionProvider').default} CompositionProvider
+ */
 
-        if (!provider) {
-            return;
-        }
+/**
+ * @typedef {import('../objects/ObjectAPI').DomainObject} DomainObject
+ */
 
-        return new CompositionCollection(domainObject, provider, this.publicAPI);
-    };
+/**
+ * @typedef {import('../../../openmct').OpenMCT} OpenMCT
+ */
 
-    /**
-     * A composition policy is a function which either allows or disallows
-     * placing one object in another's composition.
-     *
-     * Open MCT's policy model requires consensus, so any one policy may
-     * reject composition by returning false. As such, policies should
-     * generally be written to return true in the default case.
-     *
-     * @callback CompositionPolicy
-     * @memberof module:openmct.CompositionAPI~
-     * @param {module:openmct.DomainObject} containingObject the object which
-     *        would act as a container
-     * @param {module:openmct.DomainObject} containedObject the object which
-     *        would be contained
-     * @returns {boolean} false if this composition should be disallowed
-     */
+/**
+ * An interface for interacting with the composition of domain objects.
+ * The composition of a domain object is the list of other domain objects
+ * it "contains" (for instance, that should be displayed beneath it
+ * in the tree.)
+ * @constructor
+ */
+export default class CompositionAPI {
+  /**
+   * @param {OpenMCT} publicAPI
+   */
+  constructor(publicAPI) {
+    /** @type {CompositionProvider[]} */
+    this.registry = [];
+    /** @type {CompositionPolicy[]} */
+    this.policies = [];
+    this.addProvider(new DefaultCompositionProvider(publicAPI, this));
+    /** @type {OpenMCT} */
+    this.publicAPI = publicAPI;
+  }
+  /**
+   * Add a composition provider.
+   *
+   * Plugins can add new composition providers to change the loading
+   * behavior for certain domain objects.
+   *
+   * @method addProvider
+   * @param {CompositionProvider} provider the provider to add
+   */
+  addProvider(provider) {
+    this.registry.unshift(provider);
+  }
+  /**
+   * Retrieve the composition (if any) of this domain object.
+   *
+   * @method get
+   * @param {DomainObject} domainObject
+   * @returns {CompositionCollection}
+   */
+  get(domainObject) {
+    const provider = this.registry.find((p) => {
+      return p.appliesTo(domainObject);
+    });
 
-    /**
-     * Add a composition policy. Composition policies may disallow domain
-     * objects from containing other domain objects.
-     *
-     * @method addPolicy
-     * @param {module:openmct.CompositionAPI~CompositionPolicy} policy
-     *        the policy to add
-     * @memberof module:openmct.CompositionAPI#
-     */
-    CompositionAPI.prototype.addPolicy = function (policy) {
-        this.policies.push(policy);
-    };
-
-    /**
-     * Check whether or not a domain object is allowed to contain another
-     * domain object.
-     *
-     * @private
-     * @method checkPolicy
-     * @param {module:openmct.DomainObject} containingObject the object which
-     *        would act as a container
-     * @param {module:openmct.DomainObject} containedObject the object which
-     *        would be contained
-     * @returns {boolean} false if this composition should be disallowed
+    if (!provider) {
+      return;
+    }
 
-     * @param {module:openmct.CompositionAPI~CompositionPolicy} policy
-     *        the policy to add
-     * @memberof module:openmct.CompositionAPI#
-     */
-    CompositionAPI.prototype.checkPolicy = function (container, containee) {
-        return this.policies.every(function (policy) {
-            return policy(container, containee);
-        });
-    };
+    return new CompositionCollection(domainObject, provider, this.publicAPI);
+  }
+  /**
+   * A composition policy is a function which either allows or disallows
+   * placing one object in another's composition.
+   *
+   * Open MCT's policy model requires consensus, so any one policy may
+   * reject composition by returning false. As such, policies should
+   * generally be written to return true in the default case.
+   *
+   * @callback CompositionPolicy
+   * @param {DomainObject} containingObject the object which
+   *        would act as a container
+   * @param {DomainObject} containedObject the object which
+   *        would be contained
+   * @returns {boolean} false if this composition should be disallowed
+   */
+  /**
+   * Add a composition policy. Composition policies may disallow domain
+   * objects from containing other domain objects.
+   *
+   * @method addPolicy
+   * @param {CompositionPolicy} policy
+   *        the policy to add
+   */
+  addPolicy(policy) {
+    this.policies.push(policy);
+  }
+  /**
+   * Check whether or not a domain object is allowed to contain another
+   * domain object.
+   *
+   * @private
+   * @method checkPolicy
+   * @param {DomainObject} container the object which
+   *        would act as a container
+   * @param {DomainObject} containee the object which
+   *        would be contained
+   * @returns {boolean} false if this composition should be disallowed
+   * @param {CompositionPolicy} policy
+   *        the policy to add
+   */
+  checkPolicy(container, containee) {
+    return this.policies.every(function (policy) {
+      return policy(container, containee);
+    });
+  }
 
-    return CompositionAPI;
-});
+  /**
+   * Check whether or not a domainObject supports composition
+   *
+   * @param {DomainObject} domainObject
+   * @returns {boolean} true if the domainObject supports composition
+   */
+  supportsComposition(domainObject) {
+    return this.get(domainObject) !== undefined;
+  }
+}
diff --git a/src/api/composition/CompositionAPISpec.js b/src/api/composition/CompositionAPISpec.js
index 2d0c1d47df7..b0ab7071196 100644
--- a/src/api/composition/CompositionAPISpec.js
+++ b/src/api/composition/CompositionAPISpec.js
@@ -1,319 +1,307 @@
-define([
-    './CompositionAPI',
-    './CompositionCollection'
-], function (
-    CompositionAPI,
-    CompositionCollection
-) {
-
-    describe('The Composition API', function () {
-        let publicAPI;
-        let compositionAPI;
-        let topicService;
-        let mutationTopic;
-
-        beforeEach(function () {
-
-            mutationTopic = jasmine.createSpyObj('mutationTopic', [
-                'listen'
-            ]);
-            topicService = jasmine.createSpy('topicService');
-            topicService.and.returnValue(mutationTopic);
-            publicAPI = {};
-            publicAPI.objects = jasmine.createSpyObj('ObjectAPI', [
-                'get',
-                'mutate',
-                'observe',
-                'areIdsEqual'
-            ]);
-
-            publicAPI.objects.areIdsEqual.and.callFake(function (id1, id2) {
-                return id1.namespace === id2.namespace && id1.key === id2.key;
-            });
-
-            publicAPI.composition = jasmine.createSpyObj('CompositionAPI', [
-                'checkPolicy'
-            ]);
-            publicAPI.composition.checkPolicy.and.returnValue(true);
-
-            publicAPI.objects.eventEmitter = jasmine.createSpyObj('eventemitter', [
-                'on'
-            ]);
-            publicAPI.objects.get.and.callFake(function (identifier) {
-                return Promise.resolve({identifier: identifier});
-            });
-            publicAPI.$injector = jasmine.createSpyObj('$injector', [
-                'get'
-            ]);
-            publicAPI.$injector.get.and.returnValue(topicService);
-            compositionAPI = new CompositionAPI(publicAPI);
-        });
+import { createOpenMct, resetApplicationState } from '../../utils/testing.js';
+import CompositionCollection from './CompositionCollection.js';
 
-        it('returns falsy if an object does not support composition', function () {
-            expect(compositionAPI.get({})).toBeFalsy();
-        });
+describe('The Composition API', function () {
+  let publicAPI;
+  let compositionAPI;
+
+  beforeEach(function (done) {
+    publicAPI = createOpenMct();
+    compositionAPI = publicAPI.composition;
+
+    const mockObjectProvider = jasmine.createSpyObj('mock provider', ['create', 'update', 'get']);
+
+    mockObjectProvider.create.and.returnValue(Promise.resolve(true));
+    mockObjectProvider.update.and.returnValue(Promise.resolve(true));
+    mockObjectProvider.get.and.callFake((identifier) => {
+      return Promise.resolve({ identifier });
+    });
+
+    publicAPI.objects.addProvider('test', mockObjectProvider);
+    publicAPI.objects.addProvider('custom', mockObjectProvider);
+
+    publicAPI.on('start', done);
+    publicAPI.startHeadless();
+  });
+
+  afterEach(() => {
+    return resetApplicationState(publicAPI);
+  });
+
+  it('returns falsy if an object does not support composition', function () {
+    expect(compositionAPI.get({})).toBeFalsy();
+  });
+
+  describe('default composition', function () {
+    let domainObject;
+    let composition;
+
+    beforeEach(function () {
+      domainObject = {
+        name: 'test folder',
+        identifier: {
+          namespace: 'test',
+          key: '1'
+        },
+        composition: [
+          {
+            namespace: 'test',
+            key: 'a'
+          },
+          {
+            namespace: 'test',
+            key: 'b'
+          },
+          {
+            namespace: 'test',
+            key: 'c'
+          }
+        ]
+      };
+      composition = compositionAPI.get(domainObject);
+    });
+
+    it('returns composition collection', function () {
+      expect(composition).toBeDefined();
+      expect(composition).toEqual(jasmine.any(CompositionCollection));
+    });
+
+    it('correctly reflects composability', function () {
+      expect(compositionAPI.supportsComposition(domainObject)).toBe(true);
+      delete domainObject.composition;
+      expect(compositionAPI.supportsComposition(domainObject)).toBe(false);
+    });
 
-        describe('default composition', function () {
-            let domainObject;
-            let composition;
-
-            beforeEach(function () {
-                domainObject = {
-                    name: 'test folder',
-                    identifier: {
-                        namespace: 'test',
-                        key: '1'
-                    },
-                    composition: [
-                        {
-                            namespace: 'test',
-                            key: 'a'
-                        },
-                        {
-                            namespace: 'test',
-                            key: 'b'
-                        },
-                        {
-                            namespace: 'test',
-                            key: 'c'
-                        }
-                    ]
-                };
-                composition = compositionAPI.get(domainObject);
-            });
-
-            it('returns composition collection', function () {
-                expect(composition).toBeDefined();
-                expect(composition).toEqual(jasmine.any(CompositionCollection));
-            });
-
-            it('loads composition from domain object', function () {
-                const listener = jasmine.createSpy('addListener');
-                composition.on('add', listener);
-
-                return composition.load().then(function () {
-                    expect(listener.calls.count()).toBe(3);
-                    expect(listener).toHaveBeenCalledWith({
-                        identifier: {
-                            namespace: 'test',
-                            key: 'a'
-                        }
-                    });
-                });
-            });
-            describe('supports reordering of composition', function () {
-                let listener;
-                beforeEach(function () {
-                    listener = jasmine.createSpy('reorderListener');
-                    composition.on('reorder', listener);
-
-                    return composition.load();
-                });
-                it('', function () {
-                    composition.reorder(1, 0);
-                    let newComposition =
-                        publicAPI.objects.mutate.calls.mostRecent().args[2];
-                    let reorderPlan = listener.calls.mostRecent().args[0][0];
-
-                    expect(reorderPlan.oldIndex).toBe(1);
-                    expect(reorderPlan.newIndex).toBe(0);
-                    expect(newComposition[0].key).toEqual('b');
-                    expect(newComposition[1].key).toEqual('a');
-                    expect(newComposition[2].key).toEqual('c');
-                });
-                it('', function () {
-                    composition.reorder(0, 2);
-                    let newComposition =
-                        publicAPI.objects.mutate.calls.mostRecent().args[2];
-                    let reorderPlan = listener.calls.mostRecent().args[0][0];
-
-                    expect(reorderPlan.oldIndex).toBe(0);
-                    expect(reorderPlan.newIndex).toBe(2);
-                    expect(newComposition[0].key).toEqual('b');
-                    expect(newComposition[1].key).toEqual('c');
-                    expect(newComposition[2].key).toEqual('a');
-                });
-            });
-            it('supports adding an object to composition', function () {
-                let addListener = jasmine.createSpy('addListener');
-                let mockChildObject = {
-                    identifier: {
-                        key: 'mock-key',
-                        namespace: ''
-                    }
-                };
-                composition.on('add', addListener);
-                composition.add(mockChildObject);
-
-                expect(domainObject.composition.length).toBe(4);
-                expect(domainObject.composition[3]).toEqual(mockChildObject.identifier);
-            });
+    it('loads composition from domain object', function () {
+      const listener = jasmine.createSpy('addListener');
+      composition.on('add', listener);
+
+      return composition.load().then(function () {
+        expect(listener.calls.count()).toBe(3);
+        expect(listener).toHaveBeenCalledWith({
+          identifier: {
+            namespace: 'test',
+            key: 'a'
+          }
         });
+      });
+    });
+    describe('supports reordering of composition', function () {
+      let listener;
+      beforeEach(function () {
+        listener = jasmine.createSpy('reorderListener');
+        spyOn(publicAPI.objects, 'mutate');
+        publicAPI.objects.mutate.and.callThrough();
+
+        composition.on('reorder', listener);
+
+        return composition.load();
+      });
+      it('', function () {
+        composition.reorder(1, 0);
+        let newComposition = publicAPI.objects.mutate.calls.mostRecent().args[2];
+        let reorderPlan = listener.calls.mostRecent().args[0][0];
+
+        expect(reorderPlan.oldIndex).toBe(1);
+        expect(reorderPlan.newIndex).toBe(0);
+        expect(newComposition[0].key).toEqual('b');
+        expect(newComposition[1].key).toEqual('a');
+        expect(newComposition[2].key).toEqual('c');
+      });
+      it('', function () {
+        composition.reorder(0, 2);
+        let newComposition = publicAPI.objects.mutate.calls.mostRecent().args[2];
+        let reorderPlan = listener.calls.mostRecent().args[0][0];
+
+        expect(reorderPlan.oldIndex).toBe(0);
+        expect(reorderPlan.newIndex).toBe(2);
+        expect(newComposition[0].key).toEqual('b');
+        expect(newComposition[1].key).toEqual('c');
+        expect(newComposition[2].key).toEqual('a');
+      });
+    });
+    it('supports adding an object to composition', function () {
+      let mockChildObject = {
+        identifier: {
+          key: 'mock-key',
+          namespace: ''
+        }
+      };
+
+      return new Promise((resolve) => {
+        composition.on('add', resolve);
+        composition.add(mockChildObject);
+      }).then(() => {
+        expect(domainObject.composition.length).toBe(4);
+        expect(domainObject.composition[3]).toEqual(mockChildObject.identifier);
+      });
+    });
+  });
+
+  describe('static custom composition', function () {
+    let customProvider;
+    let domainObject;
+    let composition;
+
+    beforeEach(function () {
+      // A simple custom provider, returns the same composition for
+      // all objects of a given type.
+      customProvider = {
+        appliesTo: function (object) {
+          return object.type === 'custom-object-type';
+        },
+        load: function (object) {
+          return Promise.resolve([
+            {
+              namespace: 'custom',
+              key: 'thing'
+            }
+          ]);
+        },
+        add: jasmine.createSpy('add'),
+        remove: jasmine.createSpy('remove')
+      };
+      domainObject = {
+        identifier: {
+          namespace: 'test',
+          key: '1'
+        },
+        type: 'custom-object-type'
+      };
+      compositionAPI.addProvider(customProvider);
+      composition = compositionAPI.get(domainObject);
+    });
+
+    it('supports listening and loading', function () {
+      const addListener = jasmine.createSpy('addListener');
+      composition.on('add', addListener);
 
-        describe('static custom composition', function () {
-            let customProvider;
-            let domainObject;
-            let composition;
-
-            beforeEach(function () {
-                // A simple custom provider, returns the same composition for
-                // all objects of a given type.
-                customProvider = {
-                    appliesTo: function (object) {
-                        return object.type === 'custom-object-type';
-                    },
-                    load: function (object) {
-                        return Promise.resolve([
-                            {
-                                namespace: 'custom',
-                                key: 'thing'
-                            }
-                        ]);
-                    },
-                    add: jasmine.createSpy('add'),
-                    remove: jasmine.createSpy('remove')
-                };
-                domainObject = {
-                    identifier: {
-                        namespace: 'test',
-                        key: '1'
-                    },
-                    type: 'custom-object-type'
-                };
-                compositionAPI.addProvider(customProvider);
-                composition = compositionAPI.get(domainObject);
-            });
-
-            it('supports listening and loading', function () {
-                const addListener = jasmine.createSpy('addListener');
-                composition.on('add', addListener);
-
-                return composition.load().then(function (children) {
-                    let listenObject;
-                    const loadedObject = children[0];
-
-                    expect(addListener).toHaveBeenCalled();
-
-                    listenObject = addListener.calls.mostRecent().args[0];
-                    expect(listenObject).toEqual(loadedObject);
-                    expect(loadedObject).toEqual({
-                        identifier: {
-                            namespace: 'custom',
-                            key: 'thing'
-                        }
-                    });
-                });
-            });
-            describe('Calling add or remove', function () {
-                let mockChildObject;
-
-                beforeEach(function () {
-                    mockChildObject = {
-                        identifier: {
-                            key: 'mock-key',
-                            namespace: ''
-                        }
-                    };
-                    composition.add(mockChildObject);
-                });
-
-                it('calls add on the provider', function () {
-                    expect(customProvider.add).toHaveBeenCalledWith(domainObject, mockChildObject.identifier);
-                });
-
-                it('calls remove on the provider', function () {
-                    composition.remove(mockChildObject);
-                    expect(customProvider.remove).toHaveBeenCalledWith(domainObject, mockChildObject.identifier);
-                });
-            });
+      return composition.load().then(function (children) {
+        let listenObject;
+        const loadedObject = children[0];
+
+        expect(addListener).toHaveBeenCalled();
+
+        listenObject = addListener.calls.mostRecent().args[0];
+        expect(listenObject).toEqual(loadedObject);
+        expect(loadedObject).toEqual({
+          identifier: {
+            namespace: 'custom',
+            key: 'thing'
+          }
         });
+      });
+    });
+    describe('Calling add or remove', function () {
+      let mockChildObject;
+
+      beforeEach(function () {
+        mockChildObject = {
+          identifier: {
+            key: 'mock-key',
+            namespace: ''
+          }
+        };
+        composition.add(mockChildObject);
+      });
+
+      it('calls add on the provider', function () {
+        expect(customProvider.add).toHaveBeenCalledWith(domainObject, mockChildObject.identifier);
+      });
+
+      it('calls remove on the provider', function () {
+        composition.remove(mockChildObject);
+        expect(customProvider.remove).toHaveBeenCalledWith(
+          domainObject,
+          mockChildObject.identifier
+        );
+      });
+    });
+  });
+
+  describe('dynamic custom composition', function () {
+    let customProvider;
+    let domainObject;
+    let composition;
+
+    beforeEach(function () {
+      // A dynamic provider, loads an empty composition and exposes
+      // listener functions.
+      customProvider = jasmine.createSpyObj('dynamicProvider', ['appliesTo', 'load', 'on', 'off']);
+
+      customProvider.appliesTo.and.returnValue('true');
+      customProvider.load.and.returnValue(Promise.resolve([]));
+
+      domainObject = {
+        identifier: {
+          namespace: 'test',
+          key: '1'
+        },
+        type: 'custom-object-type'
+      };
+      compositionAPI.addProvider(customProvider);
+      composition = compositionAPI.get(domainObject);
+    });
 
-        describe('dynamic custom composition', function () {
-            let customProvider;
-            let domainObject;
-            let composition;
-
-            beforeEach(function () {
-                // A dynamic provider, loads an empty composition and exposes
-                // listener functions.
-                customProvider = jasmine.createSpyObj('dynamicProvider', [
-                    'appliesTo',
-                    'load',
-                    'on',
-                    'off'
-                ]);
-
-                customProvider.appliesTo.and.returnValue('true');
-                customProvider.load.and.returnValue(Promise.resolve([]));
-
-                domainObject = {
-                    identifier: {
-                        namespace: 'test',
-                        key: '1'
-                    },
-                    type: 'custom-object-type'
-                };
-                compositionAPI.addProvider(customProvider);
-                composition = compositionAPI.get(domainObject);
-            });
-
-            it('supports listening and loading', function () {
-                const addListener = jasmine.createSpy('addListener');
-                const removeListener = jasmine.createSpy('removeListener');
-                const addPromise = new Promise(function (resolve) {
-                    addListener.and.callFake(resolve);
-                });
-                const removePromise = new Promise(function (resolve) {
-                    removeListener.and.callFake(resolve);
-                });
-
-                composition.on('add', addListener);
-                composition.on('remove', removeListener);
-
-                expect(customProvider.on).toHaveBeenCalledWith(
-                    domainObject,
-                    'add',
-                    jasmine.any(Function),
-                    jasmine.any(CompositionCollection)
-                );
-                expect(customProvider.on).toHaveBeenCalledWith(
-                    domainObject,
-                    'remove',
-                    jasmine.any(Function),
-                    jasmine.any(CompositionCollection)
-                );
-                const add = customProvider.on.calls.all()[0].args[2];
-                const remove = customProvider.on.calls.all()[1].args[2];
-
-                return composition.load()
-                    .then(function () {
-                        expect(addListener).not.toHaveBeenCalled();
-                        expect(removeListener).not.toHaveBeenCalled();
-                        add({
-                            namespace: 'custom',
-                            key: 'thing'
-                        });
-
-                        return addPromise;
-                    }).then(function () {
-                        expect(addListener).toHaveBeenCalledWith({
-                            identifier: {
-                                namespace: 'custom',
-                                key: 'thing'
-                            }
-                        });
-                        remove(addListener.calls.mostRecent().args[0]);
-
-                        return removePromise;
-                    }).then(function () {
-                        expect(removeListener).toHaveBeenCalledWith({
-                            identifier: {
-                                namespace: 'custom',
-                                key: 'thing'
-                            }
-                        });
-                    });
-            });
+    it('supports listening and loading', function () {
+      const addListener = jasmine.createSpy('addListener');
+      const removeListener = jasmine.createSpy('removeListener');
+      const addPromise = new Promise(function (resolve) {
+        addListener.and.callFake(resolve);
+      });
+      const removePromise = new Promise(function (resolve) {
+        removeListener.and.callFake(resolve);
+      });
+
+      composition.on('add', addListener);
+      composition.on('remove', removeListener);
+
+      expect(customProvider.on).toHaveBeenCalledWith(
+        domainObject,
+        'add',
+        jasmine.any(Function),
+        jasmine.any(CompositionCollection)
+      );
+      expect(customProvider.on).toHaveBeenCalledWith(
+        domainObject,
+        'remove',
+        jasmine.any(Function),
+        jasmine.any(CompositionCollection)
+      );
+      const add = customProvider.on.calls.all()[0].args[2];
+      const remove = customProvider.on.calls.all()[1].args[2];
+
+      return composition
+        .load()
+        .then(function () {
+          expect(addListener).not.toHaveBeenCalled();
+          expect(removeListener).not.toHaveBeenCalled();
+          add({
+            namespace: 'custom',
+            key: 'thing'
+          });
+
+          return addPromise;
+        })
+        .then(function () {
+          expect(addListener).toHaveBeenCalledWith({
+            identifier: {
+              namespace: 'custom',
+              key: 'thing'
+            }
+          });
+          remove(addListener.calls.mostRecent().args[0]);
+
+          return removePromise;
+        })
+        .then(function () {
+          expect(removeListener).toHaveBeenCalledWith({
+            identifier: {
+              namespace: 'custom',
+              key: 'thing'
+            }
+          });
         });
     });
+  });
 });
diff --git a/src/api/composition/CompositionCollection.js b/src/api/composition/CompositionCollection.js
index 5a013fbe30a..5e4e9deb9c5 100644
--- a/src/api/composition/CompositionCollection.js
+++ b/src/api/composition/CompositionCollection.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,317 +20,311 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    'lodash'
-], function (
-    _
-) {
-    /**
-     * A CompositionCollection represents the list of domain objects contained
-     * by another domain object. It provides methods for loading this
-     * list asynchronously, modifying this list, and listening for changes to
-     * this list.
-     *
-     * Usage:
-     * ```javascript
-     *  var myViewComposition = MCT.composition.get(myViewObject);
-     *  myViewComposition.on('add', addObjectToView);
-     *  myViewComposition.on('remove', removeObjectFromView);
-     *  myViewComposition.load(); // will trigger `add` for all loaded objects.
-     *  ```
-     *
-     * @interface CompositionCollection
-     * @param {module:openmct.DomainObject} domainObject the domain object
-     *        whose composition will be contained
-     * @param {module:openmct.CompositionProvider} provider the provider
-     *        to use to retrieve other domain objects
-     * @param {module:openmct.CompositionAPI} api the composition API, for
-     *        policy checks
-     * @memberof module:openmct
-     */
-    function CompositionCollection(domainObject, provider, publicAPI) {
-        this.domainObject = domainObject;
-        this.provider = provider;
-        this.publicAPI = publicAPI;
-        this.listeners = {
-            add: [],
-            remove: [],
-            load: [],
-            reorder: []
-        };
-        this.onProviderAdd = this.onProviderAdd.bind(this);
-        this.onProviderRemove = this.onProviderRemove.bind(this);
-        this.mutables = {};
-
-        if (this.domainObject.isMutable) {
-            this.returnMutables = true;
-            let unobserve = this.domainObject.$on('$_destroy', () => {
-                Object.values(this.mutables).forEach(mutable => {
-                    this.publicAPI.objects.destroyMutable(mutable);
-                });
-                unobserve();
-            });
-        }
-    }
-
-    /**
-     * Listen for changes to this composition.  Supports 'add', 'remove', and
-     * 'load' events.
-     *
-     * @param event event to listen for, either 'add', 'remove' or 'load'.
-     * @param callback to trigger when event occurs.
-     * @param [context] context to use when invoking callback, optional.
-     */
-    CompositionCollection.prototype.on = function (event, callback, context) {
-        if (!this.listeners[event]) {
-            throw new Error('Event not supported by composition: ' + event);
-        }
-
-        if (this.provider.on && this.provider.off) {
-            if (event === 'add') {
-                this.provider.on(
-                    this.domainObject,
-                    'add',
-                    this.onProviderAdd,
-                    this
-                );
-            }
-
-            if (event === 'remove') {
-                this.provider.on(
-                    this.domainObject,
-                    'remove',
-                    this.onProviderRemove,
-                    this
-                );
-            }
-
-            if (event === 'reorder') {
-                this.provider.on(
-                    this.domainObject,
-                    'reorder',
-                    this.onProviderReorder,
-                    this
-                );
-            }
-        }
-
-        this.listeners[event].push({
-            callback: callback,
-            context: context
-        });
+/**
+ * @typedef {import('../objects/ObjectAPI').DomainObject} DomainObject
+ */
+
+/**
+ * @typedef {import('./CompositionAPI').default} CompositionAPI
+ */
+
+/**
+ * @typedef {import('../../../openmct').OpenMCT} OpenMCT
+ */
+
+/**
+ * @typedef {object} ListenerMap
+ * @property {Array.<any>} add
+ * @property {Array.<any>} remove
+ * @property {Array.<any>} load
+ * @property {Array.<any>} reorder
+ */
+
+/**
+ * A CompositionCollection represents the list of domain objects contained
+ * by another domain object. It provides methods for loading this
+ * list asynchronously, modifying this list, and listening for changes to
+ * this list.
+ *
+ * Usage:
+ * ```javascript
+ *  var myViewComposition = MCT.composition.get(myViewObject);
+ *  myViewComposition.on('add', addObjectToView);
+ *  myViewComposition.on('remove', removeObjectFromView);
+ *  myViewComposition.load(); // will trigger `add` for all loaded objects.
+ *  ```
+ */
+export default class CompositionCollection {
+  domainObject;
+  #provider;
+  #publicAPI;
+  #listeners;
+  #mutables;
+  /**
+   * @constructor
+   * @param {DomainObject} domainObject the domain object
+   *        whose composition will be contained
+   * @param {import('./CompositionProvider').default} provider the provider
+   *        to use to retrieve other domain objects
+   * @param {OpenMCT} publicAPI the composition API, for
+   *        policy checks
+   */
+  constructor(domainObject, provider, publicAPI) {
+    this.domainObject = domainObject;
+    /** @type {import('./CompositionProvider').default} */
+    this.#provider = provider;
+    /** @type {OpenMCT} */
+    this.#publicAPI = publicAPI;
+    /** @type {ListenerMap} */
+    this.#listeners = {
+      add: [],
+      remove: [],
+      load: [],
+      reorder: []
     };
-
-    /**
-     * Remove a listener.  Must be called with same exact parameters as
-     * `off`.
-     *
-     * @param event
-     * @param callback
-     * @param [context]
-     */
-
-    CompositionCollection.prototype.off = function (event, callback, context) {
-        if (!this.listeners[event]) {
-            throw new Error('Event not supported by composition: ' + event);
-        }
-
-        const index = this.listeners[event].findIndex(l => {
-            return l.callback === callback && l.context === context;
+    this.onProviderAdd = this.#onProviderAdd.bind(this);
+    this.onProviderRemove = this.#onProviderRemove.bind(this);
+    this.#mutables = {};
+
+    if (this.domainObject.isMutable) {
+      this.returnMutables = true;
+      let unobserve = this.domainObject.$on('$_destroy', () => {
+        Object.values(this.#mutables).forEach((mutable) => {
+          this.#publicAPI.objects.destroyMutable(mutable);
         });
+        unobserve();
+      });
+    }
+  }
+  /**
+   * Listen for changes to this composition.  Supports 'add', 'remove', and
+   * 'load' events.
+   *
+   * @param {string} event event to listen for, either 'add', 'remove' or 'load'.
+   * @param {(...args: any[]) => void} callback to trigger when event occurs.
+   * @param {any} [context] to use when invoking callback, optional.
+   */
+  on(event, callback, context) {
+    if (!this.#listeners[event]) {
+      throw new Error('Event not supported by composition: ' + event);
+    }
 
-        if (index === -1) {
-            throw new Error('Tried to remove a listener that does not exist');
-        }
-
-        this.listeners[event].splice(index, 1);
-        if (this.listeners[event].length === 0) {
-            this._destroy();
-
-            // Remove provider listener if this is the last callback to
-            // be removed.
-            if (this.provider.off && this.provider.on) {
-                if (event === 'add') {
-                    this.provider.off(
-                        this.domainObject,
-                        'add',
-                        this.onProviderAdd,
-                        this
-                    );
-                } else if (event === 'remove') {
-                    this.provider.off(
-                        this.domainObject,
-                        'remove',
-                        this.onProviderRemove,
-                        this
-                    );
-                } else if (event === 'reorder') {
-                    this.provider.off(
-                        this.domainObject,
-                        'reorder',
-                        this.onProviderReorder,
-                        this
-                    );
-                }
-            }
-        }
-    };
-
-    /**
-     * Add a domain object to this composition.
-     *
-     * A call to [load]{@link module:openmct.CompositionCollection#load}
-     * must have resolved before using this method.
-     *
-     * @param {module:openmct.DomainObject} child the domain object to add
-     * @param {boolean} skipMutate true if the underlying provider should
-     *        not be updated
-     * @memberof module:openmct.CompositionCollection#
-     * @name add
-     */
-    CompositionCollection.prototype.add = function (child, skipMutate) {
-        if (!skipMutate) {
-            if (!this.publicAPI.composition.checkPolicy(this.domainObject, child)) {
-                throw `Object of type ${child.type} cannot be added to object of type ${this.domainObject.type}`;
-            }
-
-            this.provider.add(this.domainObject, child.identifier);
-        } else {
-            if (this.returnMutables && this.publicAPI.objects.supportsMutation(child.identifier)) {
-                let keyString = this.publicAPI.objects.makeKeyString(child.identifier);
-
-                child = this.publicAPI.objects._toMutable(child);
-                this.mutables[keyString] = child;
-            }
+    if (this.#provider.on && this.#provider.off) {
+      if (event === 'add') {
+        this.#provider.on(this.domainObject, 'add', this.onProviderAdd, this);
+      }
 
-            this.emit('add', child);
-        }
-    };
+      if (event === 'remove') {
+        this.#provider.on(this.domainObject, 'remove', this.onProviderRemove, this);
+      }
 
-    /**
-     * Load the domain objects in this composition.
-     *
-     * @returns {Promise.<Array.<module:openmct.DomainObject>>} a promise for
-     *          the domain objects in this composition
-     * @memberof {module:openmct.CompositionCollection#}
-     * @name load
-     */
-    CompositionCollection.prototype.load = function (abortSignal) {
-        this.cleanUpMutables();
-
-        return this.provider.load(this.domainObject)
-            .then(function (children) {
-                return Promise.all(children.map((c) => this.publicAPI.objects.get(c, abortSignal)));
-            }.bind(this))
-            .then(function (childObjects) {
-                childObjects.forEach(c => this.add(c, true));
+      if (event === 'reorder') {
+        this.#provider.on(this.domainObject, 'reorder', this.#onProviderReorder, this);
+      }
+    }
 
-                return childObjects;
-            }.bind(this))
-            .then(function (children) {
-                this.emit('load');
+    this.#listeners[event].push({
+      callback: callback,
+      context: context
+    });
+  }
+  /**
+   * Remove a listener.  Must be called with same exact parameters as
+   * `off`.
+   *
+   * @param {string} event
+   * @param {(...args: any[]) => void} callback
+   * @param {any} [context]
+   */
+  off(event, callback, context) {
+    if (!this.#listeners[event]) {
+      throw new Error('Event not supported by composition: ' + event);
+    }
 
-                return children;
-            }.bind(this));
-    };
+    const index = this.#listeners[event].findIndex((l) => {
+      return l.callback === callback && l.context === context;
+    });
 
-    /**
-     * Remove a domain object from this composition.
-     *
-     * A call to [load]{@link module:openmct.CompositionCollection#load}
-     * must have resolved before using this method.
-     *
-     * @param {module:openmct.DomainObject} child the domain object to remove
-     * @param {boolean} skipMutate true if the underlying provider should
-     *        not be updated
-     * @memberof module:openmct.CompositionCollection#
-     * @name remove
-     */
-    CompositionCollection.prototype.remove = function (child, skipMutate) {
-        if (!skipMutate) {
-            this.provider.remove(this.domainObject, child.identifier);
-        } else {
-            if (this.returnMutables) {
-                let keyString = this.publicAPI.objects.makeKeyString(child);
-                if (this.mutables[keyString] !== undefined && this.mutables[keyString].isMutable) {
-                    this.publicAPI.objects.destroyMutable(this.mutables[keyString]);
-                    delete this.mutables[keyString];
-                }
-            }
+    if (index === -1) {
+      throw new Error('Tried to remove a listener that does not exist');
+    }
 
-            this.emit('remove', child);
+    this.#listeners[event].splice(index, 1);
+    if (this.#listeners[event].length === 0) {
+      this._destroy();
+
+      // Remove provider listener if this is the last callback to
+      // be removed.
+      if (this.#provider.off && this.#provider.on) {
+        if (event === 'add') {
+          this.#provider.off(this.domainObject, 'add', this.onProviderAdd, this);
+        } else if (event === 'remove') {
+          this.#provider.off(this.domainObject, 'remove', this.onProviderRemove, this);
+        } else if (event === 'reorder') {
+          this.#provider.off(this.domainObject, 'reorder', this.#onProviderReorder, this);
         }
-    };
-
-    /**
-     * Reorder the domain objects in this composition.
-     *
-     * A call to [load]{@link module:openmct.CompositionCollection#load}
-     * must have resolved before using this method.
-     *
-     * @param {number} oldIndex
-     * @param {number} newIndex
-     * @memberof module:openmct.CompositionCollection#
-     * @name remove
-     */
-    CompositionCollection.prototype.reorder = function (oldIndex, newIndex, skipMutate) {
-        this.provider.reorder(this.domainObject, oldIndex, newIndex);
-    };
-
-    /**
-     * Handle reorder from provider.
-     * @private
-     */
-    CompositionCollection.prototype.onProviderReorder = function (reorderMap) {
-        this.emit('reorder', reorderMap);
-    };
-
-    /**
-     * Handle adds from provider.
-     * @private
-     */
-    CompositionCollection.prototype.onProviderAdd = function (childId) {
-        return this.publicAPI.objects.get(childId).then(function (child) {
-            this.add(child, true);
-
-            return child;
-        }.bind(this));
-    };
-
-    /**
-     * Handle removal from provider.
-     * @private
-     */
-    CompositionCollection.prototype.onProviderRemove = function (child) {
-        this.remove(child, true);
-    };
-
-    CompositionCollection.prototype._destroy = function () {
-        if (this.mutationListener) {
-            this.mutationListener();
-            delete this.mutationListener;
+      }
+    }
+  }
+  /**
+   * Add a domain object to this composition.
+   *
+   * A call to [load]{@link module:openmct.CompositionCollection#load}
+   * must have resolved before using this method.
+   *
+   * **TODO:** Remove `skipMutate` parameter.
+   *
+   * @param {DomainObject} child the domain object to add
+   * @param {boolean} skipMutate
+   * **Intended for internal use ONLY.**
+   * true if the underlying provider should not be updated.
+   */
+  add(child, skipMutate) {
+    if (!skipMutate) {
+      if (!this.#publicAPI.composition.checkPolicy(this.domainObject, child)) {
+        throw `Object of type ${child.type} cannot be added to object of type ${this.domainObject.type}`;
+      }
+
+      this.#provider.add(this.domainObject, child.identifier);
+    } else {
+      if (this.returnMutables && this.#publicAPI.objects.supportsMutation(child.identifier)) {
+        let keyString = this.#publicAPI.objects.makeKeyString(child.identifier);
+
+        child = this.#publicAPI.objects.toMutable(child);
+        this.#mutables[keyString] = child;
+      }
+
+      this.#emit('add', child);
+    }
+  }
+  /**
+   * Load the domain objects in this composition.
+   *
+   * @param {AbortSignal} abortSignal
+   * @returns {Promise.<Array.<DomainObject>>} a promise for
+   *          the domain objects in this composition
+   * @memberof {module:openmct.CompositionCollection#}
+   * @name load
+   */
+  async load(abortSignal) {
+    this.#cleanUpMutables();
+    const children = await this.#provider.load(this.domainObject);
+    const childObjects = await Promise.all(
+      children.map((c) => this.#publicAPI.objects.get(c, abortSignal))
+    );
+    childObjects.forEach((c) => this.add(c, true));
+    this.#emit('load');
+
+    return childObjects;
+  }
+  /**
+   * Remove a domain object from this composition.
+   *
+   * A call to [load]{@link module:openmct.CompositionCollection#load}
+   * must have resolved before using this method.
+   *
+   * **TODO:** Remove `skipMutate` parameter.
+   *
+   * @param {DomainObject} child the domain object to remove
+   * @param {boolean} skipMutate
+   * **Intended for internal use ONLY.**
+   * true if the underlying provider should not be updated.
+   * @name remove
+   */
+  remove(child, skipMutate) {
+    if (!skipMutate) {
+      this.#provider.remove(this.domainObject, child.identifier);
+    } else {
+      if (this.returnMutables) {
+        let keyString = this.#publicAPI.objects.makeKeyString(child);
+        if (this.#mutables[keyString] !== undefined && this.#mutables[keyString].isMutable) {
+          this.#publicAPI.objects.destroyMutable(this.#mutables[keyString]);
+          delete this.#mutables[keyString];
         }
-    };
+      }
 
-    /**
-     * Emit events.
-     * @private
-     */
-    CompositionCollection.prototype.emit = function (event, ...payload) {
-        this.listeners[event].forEach(function (l) {
-            if (l.context) {
-                l.callback.apply(l.context, payload);
-            } else {
-                l.callback(...payload);
-            }
-        });
-    };
-
-    CompositionCollection.prototype.cleanUpMutables = function () {
-        Object.values(this.mutables).forEach(mutable => {
-            this.publicAPI.objects.destroyMutable(mutable);
-        });
-    };
-
-    return CompositionCollection;
-});
+      this.#emit('remove', child);
+    }
+  }
+  /**
+   * Reorder the domain objects in this composition.
+   *
+   * A call to [load]{@link module:openmct.CompositionCollection#load}
+   * must have resolved before using this method.
+   *
+   * @param {number} oldIndex
+   * @param {number} newIndex
+   * @name remove
+   */
+  reorder(oldIndex, newIndex, _skipMutate) {
+    this.#provider.reorder(this.domainObject, oldIndex, newIndex);
+  }
+  /**
+   * Destroy mutationListener
+   */
+  _destroy() {
+    if (this.mutationListener) {
+      this.mutationListener();
+      delete this.mutationListener;
+    }
+  }
+  /**
+   * Handle reorder from provider.
+   * @private
+   * @param {object} reorderMap
+   */
+  #onProviderReorder(reorderMap) {
+    this.#emit('reorder', reorderMap);
+  }
+
+  /**
+   * Handle adds from provider.
+   * @private
+   * @param {import('../objects/ObjectAPI').Identifier} childId
+   * @returns {DomainObject}
+   */
+  #onProviderAdd(childId) {
+    return this.#publicAPI.objects.get(childId).then(
+      function (child) {
+        this.add(child, true);
+
+        return child;
+      }.bind(this)
+    );
+  }
+
+  /**
+   * Handle removal from provider.
+   * @param {DomainObject} child
+   */
+  #onProviderRemove(child) {
+    this.remove(child, true);
+  }
+
+  /**
+   * Emit events.
+   *
+   * @private
+   * @param {string} event
+   * @param {...args.<any>} payload
+   */
+  #emit(event, ...payload) {
+    this.#listeners[event].forEach(function (l) {
+      if (l.context) {
+        l.callback.apply(l.context, payload);
+      } else {
+        l.callback(...payload);
+      }
+    });
+  }
+
+  /**
+   * Destroy all mutables.
+   * @private
+   */
+  #cleanUpMutables() {
+    Object.values(this.#mutables).forEach((mutable) => {
+      this.#publicAPI.objects.destroyMutable(mutable);
+    });
+  }
+}
diff --git a/src/api/composition/CompositionProvider.js b/src/api/composition/CompositionProvider.js
new file mode 100644
index 00000000000..ec68648a687
--- /dev/null
+++ b/src/api/composition/CompositionProvider.js
@@ -0,0 +1,257 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import _ from 'lodash';
+
+import { makeKeyString, parseKeyString } from '../objects/object-utils.js';
+
+/**
+ * @typedef {import('../objects/ObjectAPI').DomainObject} DomainObject
+ */
+
+/**
+ * @typedef {import('../objects/ObjectAPI').Identifier} Identifier
+ */
+
+/**
+ * @typedef {import('./CompositionAPI').default} CompositionAPI
+ */
+
+/**
+ * @typedef {import('../../../openmct').OpenMCT} OpenMCT
+ */
+
+/**
+ * A CompositionProvider provides the underlying implementation of
+ * composition-related behavior for certain types of domain object.
+ *
+ * By default, a composition provider will not support composition
+ * modification.  You can add support for mutation of composition by
+ * defining `add` and/or `remove` methods.
+ *
+ * If the composition of an object can change over time-- perhaps via
+ * server updates or mutation via the add/remove methods, then one must
+ * trigger events as necessary.
+ *
+ */
+export default class CompositionProvider {
+  #publicAPI;
+  #listeningTo;
+
+  /**
+   * @param {OpenMCT} publicAPI
+   * @param {CompositionAPI} compositionAPI
+   */
+  constructor(publicAPI, compositionAPI) {
+    this.#publicAPI = publicAPI;
+    this.#listeningTo = {};
+
+    compositionAPI.addPolicy(this.#cannotContainItself.bind(this));
+    compositionAPI.addPolicy(this.#supportsComposition.bind(this));
+  }
+
+  get listeningTo() {
+    return this.#listeningTo;
+  }
+
+  get establishTopicListener() {
+    return this.#establishTopicListener.bind(this);
+  }
+
+  get publicAPI() {
+    return this.#publicAPI;
+  }
+
+  /**
+   * Check if this provider should be used to load composition for a
+   * particular domain object.
+   * @method appliesTo
+   * @param {import('../objects/ObjectAPI').DomainObject} domainObject the domain object
+   *        to check
+   * @returns {boolean} true if this provider can provide composition for a given domain object
+   */
+  appliesTo(domainObject) {
+    throw new Error('This method must be implemented by a subclass.');
+  }
+  /**
+   * Load any domain objects contained in the composition of this domain
+   * object.
+   * @param {DomainObject} domainObject the domain object
+   *        for which to load composition
+   * @returns {Promise<Identifier[]>} a promise for
+   *          the Identifiers in this composition
+   * @method load
+   */
+  load(domainObject) {
+    throw new Error('This method must be implemented by a subclass.');
+  }
+  /**
+   * Attach listeners for changes to the composition of a given domain object.
+   * Supports `add` and `remove` events.
+   *
+   * @param {DomainObject} domainObject to listen to
+   * @param {string} event the event to bind to, either `add` or `remove`.
+   * @param {Function} callback callback to invoke when event is triggered.
+   * @param {any} [context] to use when invoking callback.
+   */
+  on(domainObject, event, callback, context) {
+    throw new Error('This method must be implemented by a subclass.');
+  }
+  /**
+   * Remove a listener that was previously added for a given domain object.
+   * event name, callback, and context must be the same as when the listener
+   * was originally attached.
+   *
+   * @param {DomainObject} domainObject to remove listener for
+   * @param {string} event event to stop listening to: `add` or `remove`.
+   * @param {Function} callback callback to remove.
+   * @param {any} context of callback to remove.
+   */
+  off(domainObject, event, callback, context) {
+    throw new Error('This method must be implemented by a subclass.');
+  }
+  /**
+   * Remove a domain object from another domain object's composition.
+   *
+   * This method is optional; if not present, adding to a domain object's
+   * composition using this provider will be disallowed.
+   *
+   * @param {DomainObject} domainObject the domain object
+   *        which should have its composition modified
+   * @param {Identifier} childId the domain object to remove
+   * @method remove
+   */
+  remove(domainObject, childId) {
+    throw new Error('This method must be implemented by a subclass.');
+  }
+  /**
+   * Add a domain object to another domain object's composition.
+   *
+   * This method is optional; if not present, adding to a domain object's
+   * composition using this provider will be disallowed.
+   *
+   * @param {DomainObject} parent the domain object
+   *        which should have its composition modified
+   * @param {Identifier} childId the domain object to add
+   * @method add
+   */
+  add(parent, childId) {
+    throw new Error('This method must be implemented by a subclass.');
+  }
+
+  /**
+   * @param {DomainObject} parent
+   * @param {Identifier} childId
+   * @returns {boolean}
+   */
+  includes(parent, childId) {
+    throw new Error('This method must be implemented by a subclass.');
+  }
+
+  /**
+   * @param {DomainObject} domainObject
+   * @param {number} oldIndex
+   * @param {number} newIndex
+   * @returns
+   */
+  reorder(domainObject, oldIndex, newIndex) {
+    throw new Error('This method must be implemented by a subclass.');
+  }
+
+  /**
+   * Listens on general mutation topic, using injector to fetch to avoid
+   * circular dependencies.
+   * @private
+   */
+  #establishTopicListener() {
+    if (this.topicListener) {
+      return;
+    }
+
+    const onMutation = this.#onMutation.bind(this);
+    this.#publicAPI.objects.eventEmitter.on('mutation', onMutation);
+    this.topicListener = () => {
+      this.#publicAPI.objects.eventEmitter.off('mutation', onMutation);
+    };
+  }
+
+  /**
+   * @private
+   * @param {DomainObject} parent
+   * @param {DomainObject} child
+   * @returns {boolean}
+   */
+  #cannotContainItself(parent, child) {
+    return !(
+      parent.identifier.namespace === child.identifier.namespace &&
+      parent.identifier.key === child.identifier.key
+    );
+  }
+
+  /**
+   * @private
+   * @param {DomainObject} parent
+   * @returns {boolean}
+   */
+  #supportsComposition(parent, _child) {
+    return this.#publicAPI.composition.supportsComposition(parent);
+  }
+
+  /**
+   * Handles mutation events.  If there are active listeners for the mutated
+   * object, detects changes to composition and triggers necessary events.
+   *
+   * @private
+   * @param {DomainObject} oldDomainObject
+   */
+  #onMutation(newDomainObject, oldDomainObject) {
+    const id = makeKeyString(oldDomainObject.identifier);
+    const listeners = this.#listeningTo[id];
+
+    if (!listeners) {
+      return;
+    }
+
+    const oldComposition = oldDomainObject.composition.map(makeKeyString);
+    const newComposition = newDomainObject.composition.map(makeKeyString);
+
+    const added = _.difference(newComposition, oldComposition).map(parseKeyString);
+    const removed = _.difference(oldComposition, newComposition).map(parseKeyString);
+
+    function notify(value) {
+      return function (listener) {
+        if (listener.context) {
+          listener.callback.call(listener.context, value);
+        } else {
+          listener.callback(value);
+        }
+      };
+    }
+
+    added.forEach(function (addedChild) {
+      listeners.add.forEach(notify(addedChild));
+    });
+
+    removed.forEach(function (removedChild) {
+      listeners.remove.forEach(notify(removedChild));
+    });
+  }
+}
diff --git a/src/api/composition/DefaultCompositionProvider.js b/src/api/composition/DefaultCompositionProvider.js
index 13eb4f52bd2..05a6603505a 100644
--- a/src/api/composition/DefaultCompositionProvider.js
+++ b/src/api/composition/DefaultCompositionProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,295 +19,230 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+import { toRaw } from 'vue';
 
-define([
-    'lodash',
-    'objectUtils'
-], function (
-    _,
-    objectUtils
-) {
-    /**
-     * A CompositionProvider provides the underlying implementation of
-     * composition-related behavior for certain types of domain object.
-     *
-     * By default, a composition provider will not support composition
-     * modification.  You can add support for mutation of composition by
-     * defining `add` and/or `remove` methods.
-     *
-     * If the composition of an object can change over time-- perhaps via
-     * server updates or mutation via the add/remove methods, then one must
-     * trigger events as necessary.
-     *
-     * @interface CompositionProvider
-     * @memberof module:openmct
-     */
+import { makeKeyString } from '../objects/object-utils.js';
+import CompositionProvider from './CompositionProvider.js';
 
-    function DefaultCompositionProvider(publicAPI, compositionAPI) {
-        this.publicAPI = publicAPI;
-        this.listeningTo = {};
-        this.onMutation = this.onMutation.bind(this);
+/**
+ * @typedef {import('../objects/ObjectAPI').DomainObject} DomainObject
+ */
 
-        this.cannotContainItself = this.cannotContainItself.bind(this);
+/**
+ * @typedef {import('../objects/ObjectAPI').Identifier} Identifier
+ */
 
-        compositionAPI.addPolicy(this.cannotContainItself);
-    }
-
-    /**
-     * @private
-     */
-    DefaultCompositionProvider.prototype.cannotContainItself = function (parent, child) {
-        return !(parent.identifier.namespace === child.identifier.namespace
-            && parent.identifier.key === child.identifier.key);
-    };
-
-    /**
-     * Check if this provider should be used to load composition for a
-     * particular domain object.
-     * @param {module:openmct.DomainObject} domainObject the domain object
-     *        to check
-     * @returns {boolean} true if this provider can provide
-     *          composition for a given domain object
-     * @memberof module:openmct.CompositionProvider#
-     * @method appliesTo
-     */
-    DefaultCompositionProvider.prototype.appliesTo = function (domainObject) {
-        return Boolean(domainObject.composition);
-    };
-
-    /**
-     * Load any domain objects contained in the composition of this domain
-     * object.
-     * @param {module:openmct.DomainObject} domainObject the domain object
-     *        for which to load composition
-     * @returns {Promise.<Array.<module:openmct.Identifier>>} a promise for
-     *          the Identifiers in this composition
-     * @memberof module:openmct.CompositionProvider#
-     * @method load
-     */
-    DefaultCompositionProvider.prototype.load = function (domainObject) {
-        return Promise.all(domainObject.composition);
-    };
-
-    /**
-     * Attach listeners for changes to the composition of a given domain object.
-     * Supports `add` and `remove` events.
-     *
-     * @param {module:openmct.DomainObject} domainObject to listen to
-     * @param String event the event to bind to, either `add` or `remove`.
-     * @param Function callback callback to invoke when event is triggered.
-     * @param [context] context to use when invoking callback.
-     */
-    DefaultCompositionProvider.prototype.on = function (
-        domainObject,
-        event,
-        callback,
-        context
-    ) {
-        this.establishTopicListener();
-
-        const keyString = objectUtils.makeKeyString(domainObject.identifier);
-        let objectListeners = this.listeningTo[keyString];
+/**
+ * @typedef {import('./CompositionAPI').default} CompositionAPI
+ */
 
-        if (!objectListeners) {
-            objectListeners = this.listeningTo[keyString] = {
-                add: [],
-                remove: [],
-                reorder: [],
-                composition: [].slice.apply(domainObject.composition)
-            };
-        }
+/**
+ * @typedef {import('../../../openmct').OpenMCT} OpenMCT
+ */
 
-        objectListeners[event].push({
-            callback: callback,
-            context: context
-        });
-    };
+/**
+ * A CompositionProvider provides the underlying implementation of
+ * composition-related behavior for certain types of domain object.
+ *
+ * By default, a composition provider will not support composition
+ * modification.  You can add support for mutation of composition by
+ * defining `add` and/or `remove` methods.
+ *
+ * If the composition of an object can change over time-- perhaps via
+ * server updates or mutation via the add/remove methods, then one must
+ * trigger events as necessary.
+ * @extends CompositionProvider
+ */
+export default class DefaultCompositionProvider extends CompositionProvider {
+  /**
+   * Check if this provider should be used to load composition for a
+   * particular domain object.
+   * @override
+   * @param {DomainObject} domainObject the domain object
+   *        to check
+   * @returns {boolean} true if this provider can provide composition for a given domain object
+   */
+  appliesTo(domainObject) {
+    return Boolean(domainObject.composition);
+  }
+  /**
+   * Load any domain objects contained in the composition of this domain
+   * object.
+   * @override
+   * @param {DomainObject} domainObject the domain object
+   *        for which to load composition
+   * @returns {Promise<Identifier[]>} a promise for
+   *          the Identifiers in this composition
+   */
+  load(domainObject) {
+    return Promise.all(domainObject.composition);
+  }
+  /**
+   * Attach listeners for changes to the composition of a given domain object.
+   * Supports `add` and `remove` events.
+   *
+   * @override
+   * @param {DomainObject} domainObject to listen to
+   * @param {string} event the event to bind to, either `add` or `remove`.
+   * @param {Function} callback callback to invoke when event is triggered.
+   * @param {any} [context] to use when invoking callback.
+   */
+  on(domainObject, event, callback, context) {
+    this.establishTopicListener();
+
+    /** @type {string} */
+    const keyString = makeKeyString(domainObject.identifier);
+    let objectListeners = this.listeningTo[keyString];
+
+    if (!objectListeners) {
+      objectListeners = this.listeningTo[keyString] = {
+        add: [],
+        remove: [],
+        reorder: []
+      };
+    }
 
-    /**
-     * Remove a listener that was previously added for a given domain object.
-     * event name, callback, and context must be the same as when the listener
-     * was originally attached.
-     *
-     * @param {module:openmct.DomainObject} domainObject to remove listener for
-     * @param String event event to stop listening to: `add` or `remove`.
-     * @param Function callback callback to remove.
-     * @param [context] context of callback to remove.
-     */
-    DefaultCompositionProvider.prototype.off = function (
-        domainObject,
-        event,
-        callback,
-        context
+    objectListeners[event].push({
+      callback: callback,
+      context: context
+    });
+  }
+  /**
+   * Remove a listener that was previously added for a given domain object.
+   * event name, callback, and context must be the same as when the listener
+   * was originally attached.
+   *
+   * @override
+   * @param {DomainObject} domainObject to remove listener for
+   * @param {string} event event to stop listening to: `add` or `remove`.
+   * @param {Function} callback callback to remove.
+   * @param {any} context of callback to remove.
+   */
+  off(domainObject, event, callback, context) {
+    /** @type {string} */
+    const keyString = makeKeyString(domainObject.identifier);
+    const objectListeners = this.listeningTo[keyString];
+
+    const index = objectListeners[event].findIndex((l) => {
+      return l.callback === callback && l.context === context;
+    });
+
+    objectListeners[event].splice(index, 1);
+    if (
+      !objectListeners.add.length &&
+      !objectListeners.remove.length &&
+      !objectListeners.reorder.length
     ) {
-        const keyString = objectUtils.makeKeyString(domainObject.identifier);
-        const objectListeners = this.listeningTo[keyString];
-
-        const index = objectListeners[event].findIndex(l => {
-            return l.callback === callback && l.context === context;
+      delete this.listeningTo[keyString];
+    }
+  }
+  /**
+   * Remove a domain object from another domain object's composition.
+   *
+   * This method is optional; if not present, adding to a domain object's
+   * composition using this provider will be disallowed.
+   *
+   * @override
+   * @param {DomainObject} domainObject the domain object
+   *        which should have its composition modified
+   * @param {Identifier} childId the domain object to remove
+   * @method remove
+   */
+  remove(domainObject, childId) {
+    let composition = domainObject.composition.filter(function (child) {
+      return !(childId.namespace === child.namespace && childId.key === child.key);
+    });
+
+    this.publicAPI.objects.mutate(domainObject, 'composition', composition);
+  }
+  /**
+   * Add a domain object to another domain object's composition.
+   *
+   * This method is optional; if not present, adding to a domain object's
+   * composition using this provider will be disallowed.
+   *
+   * @override
+   * @param {DomainObject} parent the domain object
+   *        which should have its composition modified
+   * @param {Identifier} childId the domain object to add
+   * @method add
+   */
+  add(parent, childId) {
+    if (!this.includes(parent, childId)) {
+      const composition = structuredClone(toRaw(parent.composition));
+      composition.push(childId);
+      this.publicAPI.objects.mutate(parent, 'composition', composition);
+    }
+  }
+
+  /**
+   * @override
+   * @param {DomainObject} parent
+   * @param {Identifier} childId
+   * @returns {boolean}
+   */
+  includes(parent, childId) {
+    return parent.composition.some((composee) =>
+      this.publicAPI.objects.areIdsEqual(composee, childId)
+    );
+  }
+
+  /**
+   * @override
+   * @param {DomainObject} domainObject
+   * @param {number} oldIndex
+   * @param {number} newIndex
+   * @returns
+   */
+  reorder(domainObject, oldIndex, newIndex) {
+    let newComposition = domainObject.composition.slice();
+    let removeId = oldIndex > newIndex ? oldIndex + 1 : oldIndex;
+    let insertPosition = oldIndex < newIndex ? newIndex + 1 : newIndex;
+    //Insert object in new position
+    newComposition.splice(insertPosition, 0, domainObject.composition[oldIndex]);
+    newComposition.splice(removeId, 1);
+
+    let reorderPlan = [
+      {
+        oldIndex,
+        newIndex
+      }
+    ];
+
+    if (oldIndex > newIndex) {
+      for (let i = newIndex; i < oldIndex; i++) {
+        reorderPlan.push({
+          oldIndex: i,
+          newIndex: i + 1
         });
-
-        objectListeners[event].splice(index, 1);
-        if (!objectListeners.add.length && !objectListeners.remove.length && !objectListeners.reorder.length) {
-            delete this.listeningTo[keyString];
-        }
-    };
-
-    /**
-     * Remove a domain object from another domain object's composition.
-     *
-     * This method is optional; if not present, adding to a domain object's
-     * composition using this provider will be disallowed.
-     *
-     * @param {module:openmct.DomainObject} domainObject the domain object
-     *        which should have its composition modified
-     * @param {module:openmct.DomainObject} child the domain object to remove
-     * @memberof module:openmct.CompositionProvider#
-     * @method remove
-     */
-    DefaultCompositionProvider.prototype.remove = function (domainObject, childId) {
-        let composition = domainObject.composition.filter(function (child) {
-            return !(childId.namespace === child.namespace
-                && childId.key === child.key);
+      }
+    } else {
+      for (let i = oldIndex + 1; i <= newIndex; i++) {
+        reorderPlan.push({
+          oldIndex: i,
+          newIndex: i - 1
         });
+      }
+    }
 
-        this.publicAPI.objects.mutate(domainObject, 'composition', composition);
-    };
-
-    /**
-     * Add a domain object to another domain object's composition.
-     *
-     * This method is optional; if not present, adding to a domain object's
-     * composition using this provider will be disallowed.
-     *
-     * @param {module:openmct.DomainObject} domainObject the domain object
-     *        which should have its composition modified
-     * @param {module:openmct.DomainObject} child the domain object to add
-     * @memberof module:openmct.CompositionProvider#
-     * @method add
-     */
-    DefaultCompositionProvider.prototype.add = function (parent, childId) {
-        if (!this.includes(parent, childId)) {
-            parent.composition.push(childId);
-            this.publicAPI.objects.mutate(parent, 'composition', parent.composition);
-        }
-    };
-
-    /**
-     * @private
-     */
-    DefaultCompositionProvider.prototype.includes = function (parent, childId) {
-        return parent.composition.some(composee =>
-            this.publicAPI.objects.areIdsEqual(composee, childId));
-    };
-
-    DefaultCompositionProvider.prototype.reorder = function (domainObject, oldIndex, newIndex) {
-        let newComposition = domainObject.composition.slice();
-        let removeId = oldIndex > newIndex ? oldIndex + 1 : oldIndex;
-        let insertPosition = oldIndex < newIndex ? newIndex + 1 : newIndex;
-        //Insert object in new position
-        newComposition.splice(insertPosition, 0, domainObject.composition[oldIndex]);
-        newComposition.splice(removeId, 1);
-
-        let reorderPlan = [{
-            oldIndex,
-            newIndex
-        }];
-
-        if (oldIndex > newIndex) {
-            for (let i = newIndex; i < oldIndex; i++) {
-                reorderPlan.push({
-                    oldIndex: i,
-                    newIndex: i + 1
-                });
-            }
-        } else {
-            for (let i = oldIndex + 1; i <= newIndex; i++) {
-                reorderPlan.push({
-                    oldIndex: i,
-                    newIndex: i - 1
-                });
-            }
-        }
-
-        this.publicAPI.objects.mutate(domainObject, 'composition', newComposition);
-
-        let id = objectUtils.makeKeyString(domainObject.identifier);
-        const listeners = this.listeningTo[id];
-
-        if (!listeners) {
-            return;
-        }
-
-        listeners.reorder.forEach(notify);
-
-        function notify(listener) {
-            if (listener.context) {
-                listener.callback.call(listener.context, reorderPlan);
-            } else {
-                listener.callback(reorderPlan);
-            }
-        }
-    };
-
-    /**
-     * Listens on general mutation topic, using injector to fetch to avoid
-     * circular dependencies.
-     *
-     * @private
-     */
-    DefaultCompositionProvider.prototype.establishTopicListener = function () {
-        if (this.topicListener) {
-            return;
-        }
-
-        this.publicAPI.objects.eventEmitter.on('mutation', this.onMutation);
-        this.topicListener = () => {
-            this.publicAPI.objects.eventEmitter.off('mutation', this.onMutation);
-        };
-    };
-
-    /**
-     * Handles mutation events.  If there are active listeners for the mutated
-     * object, detects changes to composition and triggers necessary events.
-     *
-     * @private
-     */
-    DefaultCompositionProvider.prototype.onMutation = function (oldDomainObject) {
-        const id = objectUtils.makeKeyString(oldDomainObject.identifier);
-        const listeners = this.listeningTo[id];
-
-        if (!listeners) {
-            return;
-        }
-
-        const oldComposition = listeners.composition.map(objectUtils.makeKeyString);
-        const newComposition = oldDomainObject.composition.map(objectUtils.makeKeyString);
-
-        const added = _.difference(newComposition, oldComposition).map(objectUtils.parseKeyString);
-        const removed = _.difference(oldComposition, newComposition).map(objectUtils.parseKeyString);
-
-        function notify(value) {
-            return function (listener) {
-                if (listener.context) {
-                    listener.callback.call(listener.context, value);
-                } else {
-                    listener.callback(value);
-                }
-            };
-        }
+    this.publicAPI.objects.mutate(domainObject, 'composition', newComposition);
 
-        listeners.composition = newComposition.map(objectUtils.parseKeyString);
+    /** @type {string} */
+    let id = makeKeyString(domainObject.identifier);
+    const listeners = this.listeningTo[id];
 
-        added.forEach(function (addedChild) {
-            listeners.add.forEach(notify(addedChild));
-        });
-
-        removed.forEach(function (removedChild) {
-            listeners.remove.forEach(notify(removedChild));
-        });
+    if (!listeners) {
+      return;
+    }
 
-    };
+    listeners.reorder.forEach(notify);
 
-    return DefaultCompositionProvider;
-});
+    function notify(listener) {
+      if (listener.context) {
+        listener.callback.call(listener.context, reorderPlan);
+      } else {
+        listener.callback(reorderPlan);
+      }
+    }
+  }
+}
diff --git a/src/api/faultmanagement/FaultManagementAPI.js b/src/api/faultmanagement/FaultManagementAPI.js
new file mode 100644
index 00000000000..16ce14f0f07
--- /dev/null
+++ b/src/api/faultmanagement/FaultManagementAPI.js
@@ -0,0 +1,123 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+export default class FaultManagementAPI {
+  /**
+   * @param {import("openmct").OpenMCT} openmct
+   */
+  constructor(openmct) {
+    this.openmct = openmct;
+  }
+
+  /**
+   * @param {*} provider
+   */
+  addProvider(provider) {
+    this.provider = provider;
+  }
+
+  /**
+   * @returns {boolean}
+   */
+  supportsActions() {
+    return (
+      this.provider?.acknowledgeFault !== undefined && this.provider?.shelveFault !== undefined
+    );
+  }
+
+  /**
+   * @param {import("../objects/ObjectAPI").DomainObject} domainObject
+   * @returns {Promise.<FaultAPIResponse[]>}
+   */
+  request(domainObject) {
+    if (!this.provider?.supportsRequest(domainObject)) {
+      return Promise.reject();
+    }
+
+    return this.provider.request(domainObject);
+  }
+
+  /**
+   * @param {import("../objects/ObjectAPI").DomainObject} domainObject
+   * @param {Function} callback
+   * @returns {Function} unsubscribe
+   */
+  subscribe(domainObject, callback) {
+    if (!this.provider?.supportsSubscribe(domainObject)) {
+      return Promise.reject();
+    }
+
+    return this.provider.subscribe(domainObject, callback);
+  }
+
+  /**
+   * @param {Fault} fault
+   * @param {*} ackData
+   */
+  acknowledgeFault(fault, ackData) {
+    return this.provider.acknowledgeFault(fault, ackData);
+  }
+
+  /**
+   * @param {Fault} fault
+   * @param {*} shelveData
+   * @returns {Promise.<T>}
+   */
+  shelveFault(fault, shelveData) {
+    return this.provider.shelveFault(fault, shelveData);
+  }
+}
+
+/**
+ * @typedef {object} TriggerValueInfo
+ * @property {number} value
+ * @property {string} rangeCondition
+ * @property {string} monitoringResult
+ */
+
+/**
+ * @typedef {object} CurrentValueInfo
+ * @property {number} value
+ * @property {string} rangeCondition
+ * @property {string} monitoringResult
+ */
+
+/**
+ * @typedef {object} Fault
+ * @property {boolean} acknowledged
+ * @property {CurrentValueInfo} currentValueInfo
+ * @property {string} id
+ * @property {string} name
+ * @property {string} namespace
+ * @property {number} seqNum
+ * @property {string} severity
+ * @property {boolean} shelved
+ * @property {string} shortDescription
+ * @property {string} triggerTime
+ * @property {TriggerValueInfo} triggerValueInfo
+ */
+
+/**
+ * @typedef {object} FaultAPIResponse
+ * @property {string} type
+ * @property {Fault} fault
+ */
diff --git a/src/api/faultmanagement/FaultManagementAPISpec.js b/src/api/faultmanagement/FaultManagementAPISpec.js
new file mode 100644
index 00000000000..363733d5314
--- /dev/null
+++ b/src/api/faultmanagement/FaultManagementAPISpec.js
@@ -0,0 +1,142 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * License); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an AS IS BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createOpenMct, resetApplicationState } from '../../utils/testing.js';
+
+const faultName = 'super duper fault';
+const aFault = {
+  type: '',
+  fault: {
+    acknowledged: true,
+    currentValueInfo: {
+      value: 0,
+      rangeCondition: '',
+      monitoringResult: ''
+    },
+    id: '',
+    name: faultName,
+    namespace: '',
+    seqNum: 0,
+    severity: '',
+    shelved: true,
+    shortDescription: '',
+    triggerTime: '',
+    triggerValueInfo: {
+      value: 0,
+      rangeCondition: '',
+      monitoringResult: ''
+    }
+  }
+};
+const faultDomainObject = {
+  name: 'it is not your fault',
+  type: 'faultManagement',
+  identifier: {
+    key: 'nobodies',
+    namespace: 'fault'
+  }
+};
+const aComment = 'THIS is my fault.';
+const faultManagementProvider = {
+  request() {
+    return Promise.resolve([aFault]);
+  },
+  subscribe(domainObject, callback) {
+    return () => {};
+  },
+  supportsRequest(domainObject) {
+    return domainObject.type === 'faultManagement';
+  },
+  supportsSubscribe(domainObject) {
+    return domainObject.type === 'faultManagement';
+  },
+  acknowledgeFault(fault, { comment = '' }) {
+    return Promise.resolve({
+      success: true
+    });
+  },
+  shelveFault(fault, shelveData) {
+    return Promise.resolve({
+      success: true
+    });
+  }
+};
+
+describe('The Fault Management API', () => {
+  let openmct;
+
+  beforeEach(() => {
+    openmct = createOpenMct();
+    openmct.install(openmct.plugins.FaultManagement());
+    // openmct.install(openmct.plugins.example.ExampleFaultSource());
+    openmct.faults.addProvider(faultManagementProvider);
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  it('allows you to request a fault', async () => {
+    spyOn(faultManagementProvider, 'supportsRequest').and.callThrough();
+
+    let faultResponse = await openmct.faults.request(faultDomainObject);
+
+    expect(faultManagementProvider.supportsRequest).toHaveBeenCalledWith(faultDomainObject);
+    expect(faultResponse[0].fault.name).toEqual(faultName);
+  });
+
+  it('allows you to subscribe to a fault', () => {
+    spyOn(faultManagementProvider, 'subscribe').and.callThrough();
+    spyOn(faultManagementProvider, 'supportsSubscribe').and.callThrough();
+
+    let unsubscribe = openmct.faults.subscribe(faultDomainObject, () => {});
+
+    expect(unsubscribe).toEqual(jasmine.any(Function));
+    expect(faultManagementProvider.supportsSubscribe).toHaveBeenCalledWith(faultDomainObject);
+    expect(faultManagementProvider.subscribe).toHaveBeenCalledOnceWith(
+      faultDomainObject,
+      jasmine.any(Function)
+    );
+  });
+
+  it('will tell you if the fault management provider supports actions', () => {
+    expect(openmct.faults.supportsActions()).toBeTrue();
+  });
+
+  it('will allow you to acknowledge a fault', async () => {
+    spyOn(faultManagementProvider, 'acknowledgeFault').and.callThrough();
+
+    let ackResponse = await openmct.faults.acknowledgeFault(aFault, aComment);
+
+    expect(faultManagementProvider.acknowledgeFault).toHaveBeenCalledWith(aFault, aComment);
+    expect(ackResponse.success).toBeTrue();
+  });
+
+  it('will allow you to shelve a fault', async () => {
+    spyOn(faultManagementProvider, 'shelveFault').and.callThrough();
+
+    let shelveResponse = await openmct.faults.shelveFault(aFault, aComment);
+
+    expect(faultManagementProvider.shelveFault).toHaveBeenCalledWith(aFault, aComment);
+    expect(shelveResponse.success).toBeTrue();
+  });
+});
diff --git a/src/api/forms/FormController.js b/src/api/forms/FormController.js
new file mode 100644
index 00000000000..4c946573c95
--- /dev/null
+++ b/src/api/forms/FormController.js
@@ -0,0 +1,108 @@
+import mount from 'utils/mount';
+
+import AutoCompleteField from './components/controls/AutoCompleteField.vue';
+import CheckBoxField from './components/controls/CheckBoxField.vue';
+import ClockDisplayFormatField from './components/controls/ClockDisplayFormatField.vue';
+import Datetime from './components/controls/DatetimeField.vue';
+import FileInput from './components/controls/FileInput.vue';
+import Locator from './components/controls/LocatorField.vue';
+import NumberField from './components/controls/NumberField.vue';
+import SelectField from './components/controls/SelectField.vue';
+import TextAreaField from './components/controls/TextAreaField.vue';
+import TextField from './components/controls/TextField.vue';
+import ToggleSwitchField from './components/controls/ToggleSwitchField.vue';
+export const DEFAULT_CONTROLS_MAP = {
+  autocomplete: AutoCompleteField,
+  checkbox: CheckBoxField,
+  composite: ClockDisplayFormatField,
+  datetime: Datetime,
+  'file-input': FileInput,
+  locator: Locator,
+  numberfield: NumberField,
+  select: SelectField,
+  textarea: TextAreaField,
+  textfield: TextField,
+  toggleSwitch: ToggleSwitchField
+};
+
+export default class FormControl {
+  constructor(openmct) {
+    this.openmct = openmct;
+    this.controls = {};
+
+    this._addDefaultFormControls();
+  }
+
+  addControl(controlName, controlViewProvider) {
+    const control = this.controls[controlName];
+    if (control) {
+      console.warn(`Error: provided form control '${controlName}', already exists`);
+
+      return;
+    }
+
+    this.controls[controlName] = controlViewProvider;
+  }
+
+  getControl(controlName) {
+    const control = this.controls[controlName];
+    if (!control) {
+      console.error(`Error: form control '${controlName}', does not exist`);
+    }
+
+    return control;
+  }
+
+  /**
+   * @private
+   */
+  _addDefaultFormControls() {
+    Object.keys(DEFAULT_CONTROLS_MAP).forEach((control) => {
+      const controlViewProvider = this._getControlViewProvider(control);
+      this.addControl(control, controlViewProvider);
+    });
+  }
+
+  /**
+   * @private
+   */
+  _getControlViewProvider(control) {
+    const self = this;
+    let _destroy = null;
+
+    return {
+      show(element, model, onChange) {
+        const { vNode, destroy } = mount(
+          {
+            el: element,
+            components: {
+              FormControlComponent: DEFAULT_CONTROLS_MAP[control]
+            },
+            provide: {
+              openmct: self.openmct
+            },
+            data() {
+              return {
+                model,
+                onChange
+              };
+            },
+            template: `<FormControlComponent :model="model" @on-change="onChange"></FormControlComponent>`
+          },
+          {
+            element,
+            app: self.openmct.app
+          }
+        );
+        _destroy = destroy;
+
+        return vNode;
+      },
+      destroy() {
+        if (_destroy) {
+          _destroy();
+        }
+      }
+    };
+  }
+}
diff --git a/src/api/forms/FormsAPI.js b/src/api/forms/FormsAPI.js
new file mode 100644
index 00000000000..7d78fd0d2f8
--- /dev/null
+++ b/src/api/forms/FormsAPI.js
@@ -0,0 +1,211 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import _ from 'lodash';
+import mount from 'utils/mount';
+
+import FormProperties from './components/FormProperties.vue';
+import FormController from './FormController.js';
+
+export default class FormsAPI {
+  constructor(openmct) {
+    this.openmct = openmct;
+    this.formController = new FormController(openmct);
+  }
+
+  /**
+   * Control View Provider definition for a form control
+   * @typedef ControlViewProvider
+   * @property {function} show a function renders view in place of given element
+   *   This function accepts element, model and onChange function
+   *   element - html element (place holder) to render a row view
+   *   model - row data for rendering name, value etc for given row type
+   *   onChange - an onChange event callback function to keep track of any change in value
+   * @property {function} destroy a callback function when a vue component gets destroyed
+   */
+
+  /**
+   * Create a new form control definition with a formControlViewProvider
+   *      this formControlViewProvider is used inside form overlay to show/render a form row
+   *
+   * @public
+   * @param {String} controlName a form structure, array of section
+   * @param {ControlViewProvider} controlViewProvider
+   */
+  addNewFormControl(controlName, controlViewProvider) {
+    this.formController.addControl(controlName, controlViewProvider);
+  }
+
+  /**
+   * Get a ControlViewProvider for a given/stored form controlName
+   *
+   * @public
+   * @param {String} controlName a form structure, array of section
+   * @return {ControlViewProvider}
+   */
+  getFormControl(controlName) {
+    return this.formController.getControl(controlName);
+  }
+
+  /**
+   * Section definition for formStructure
+   * @typedef Section
+   * @property {object} name Name of the section to display on Form
+   * @property {string} cssClass class name for styling section
+   * @property {array<Row>} rows collection of rows inside a section
+   */
+
+  /**
+   * Row definition for Section
+   * @typedef Row
+   * @property {string} control represents type of row to render
+   *     eg:autocomplete,composite,datetime,file-input,locator,numberfield,select,textarea,textfield
+   * @property {string} cssClass class name for styling this row
+   * @property {module:openmct.DomainObject} domainObject object to be used by row
+   * @property {string} key id for this row
+   * @property {string} name Name of the row to display on Form
+   * @property {module:openmct.DomainObject} parent parent object to be used by row
+   * @property {boolean} required is this row mandatory
+   * @property {function} validate a function to validate this row on any changes
+   */
+
+  /**
+   * Show form inside an Overlay dialog with given form structure
+   * @public
+   * @param {Array<Section>} formStructure a form structure, array of section
+   * @param {Object} options
+   *      @property {function} onChange a callback function when any changes detected
+   */
+  showForm(formStructure, { onChange } = {}) {
+    let overlay;
+
+    const self = this;
+
+    const overlayEl = document.createElement('div');
+    overlayEl.classList.add('u-contents');
+
+    overlay = self.openmct.overlays.overlay({
+      element: overlayEl,
+      size: 'dialog'
+    });
+
+    let formSave;
+    let formCancel;
+    const promise = new Promise((resolve, reject) => {
+      formSave = resolve;
+      formCancel = reject;
+    });
+
+    this.showCustomForm(formStructure, {
+      element: overlayEl,
+      onChange
+    })
+      .then((response) => {
+        overlay.dismiss();
+        formSave(response);
+      })
+      .catch((response) => {
+        overlay.dismiss();
+        formCancel(response);
+      });
+
+    return promise;
+  }
+
+  /**
+   * Show form as a child of the element provided with given form structure
+   *
+   * @public
+   * @param {Array<Section>} formStructure a form structure, array of section
+   * @param {Object} options
+   *      @property {HTMLElement} element Parent Element to render a Form
+   *      @property {function} onChange a callback function when any changes detected
+   */
+  showCustomForm(formStructure, { element, onChange } = {}) {
+    if (element === undefined) {
+      throw Error('Required element parameter not provided');
+    }
+
+    const self = this;
+
+    const changes = {};
+    let formSave;
+    let formCancel;
+
+    const promise = new Promise((resolve, reject) => {
+      formSave = onFormAction(resolve);
+      formCancel = onFormAction(reject);
+    });
+
+    const { destroy } = mount(
+      {
+        components: { FormProperties },
+        provide: {
+          openmct: self.openmct
+        },
+        data() {
+          return {
+            formStructure,
+            onChange: onFormPropertyChange,
+            onCancel: formCancel,
+            onSave: formSave
+          };
+        },
+        template:
+          '<FormProperties :model="formStructure" @on-change="onChange" @on-cancel="onCancel" @on-save="onSave"></FormProperties>'
+      },
+      {
+        element,
+        app: self.openmct.app
+      }
+    );
+
+    function onFormPropertyChange(data) {
+      if (onChange) {
+        onChange(data);
+      }
+
+      if (data.model) {
+        const property = data.model.property;
+        let key = data.model.key;
+
+        if (property && property.length) {
+          key = property.join('.');
+        }
+
+        _.set(changes, key, data.value);
+      }
+    }
+
+    function onFormAction(callback) {
+      return () => {
+        destroy();
+
+        if (callback) {
+          callback(changes);
+        }
+      };
+    }
+
+    return promise;
+  }
+}
diff --git a/src/api/forms/FormsAPISpec.js b/src/api/forms/FormsAPISpec.js
new file mode 100644
index 00000000000..9d11e990a5b
--- /dev/null
+++ b/src/api/forms/FormsAPISpec.js
@@ -0,0 +1,157 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import { createOpenMct, resetApplicationState } from '../../utils/testing.js';
+
+describe('The Forms API', () => {
+  let openmct;
+  let element;
+
+  beforeEach((done) => {
+    element = document.createElement('div');
+    element.style.display = 'block';
+    element.style.width = '1920px';
+    element.style.height = '1080px';
+
+    openmct = createOpenMct();
+    openmct.on('start', done);
+
+    openmct.startHeadless(element);
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  it('openmct supports form API', () => {
+    expect(openmct.forms).not.toBe(null);
+  });
+
+  describe('check default form controls exists', () => {
+    it('autocomplete', () => {
+      const control = openmct.forms.getFormControl('autocomplete');
+      expect(control).not.toBe(null);
+    });
+
+    it('clock', () => {
+      const control = openmct.forms.getFormControl('composite');
+      expect(control).not.toBe(null);
+    });
+
+    it('datetime', () => {
+      const control = openmct.forms.getFormControl('datetime');
+      expect(control).not.toBe(null);
+    });
+
+    it('file-input', () => {
+      const control = openmct.forms.getFormControl('file-input');
+      expect(control).not.toBe(null);
+    });
+
+    it('locator', () => {
+      const control = openmct.forms.getFormControl('locator');
+      expect(control).not.toBe(null);
+    });
+
+    it('numberfield', () => {
+      const control = openmct.forms.getFormControl('numberfield');
+      expect(control).not.toBe(null);
+    });
+
+    it('select', () => {
+      const control = openmct.forms.getFormControl('select');
+      expect(control).not.toBe(null);
+    });
+
+    it('textarea', () => {
+      const control = openmct.forms.getFormControl('textarea');
+      expect(control).not.toBe(null);
+    });
+
+    it('textfield', () => {
+      const control = openmct.forms.getFormControl('textfield');
+      expect(control).not.toBe(null);
+    });
+  });
+
+  it('supports user defined form controls', () => {
+    const newFormControl = {
+      show: () => {
+        console.log('show new control');
+      },
+      destroy: () => {
+        console.log('destroy');
+      }
+    };
+    openmct.forms.addNewFormControl('newFormControl', newFormControl);
+    const control = openmct.forms.getFormControl('newFormControl');
+    expect(control).not.toBe(null);
+    expect(control.show).not.toBe(null);
+    expect(control.destroy).not.toBe(null);
+  });
+
+  describe('show form on UI', () => {
+    let formStructure;
+
+    beforeEach(() => {
+      formStructure = {
+        title: 'Test Show Form',
+        sections: [
+          {
+            rows: [
+              {
+                key: 'name',
+                control: 'textfield',
+                name: 'Title',
+                pattern: '\\S+',
+                required: false,
+                cssClass: 'l-input-lg',
+                value: 'Test Name'
+              }
+            ]
+          }
+        ]
+      };
+    });
+
+    it('when container element is provided', (done) => {
+      openmct.forms.showCustomForm(formStructure, { element }).catch(() => {
+        done();
+      });
+      const titleElement = element.querySelector('.c-overlay__dialog-title');
+      expect(titleElement.textContent).toBe(formStructure.title);
+
+      element.querySelector('.js-cancel-button').click();
+    });
+
+    it('when container element is not provided', (done) => {
+      openmct.forms.showForm(formStructure).catch(() => {
+        done();
+      });
+
+      const titleElement = document.querySelector('.c-overlay__dialog-title');
+      const title = titleElement.textContent;
+
+      expect(title).toBe(formStructure.title);
+      document.querySelector('.js-cancel-button').click();
+    });
+  });
+});
diff --git a/src/api/forms/components/FormProperties.vue b/src/api/forms/components/FormProperties.vue
new file mode 100644
index 00000000000..f4ac6b23af4
--- /dev/null
+++ b/src/api/forms/components/FormProperties.vue
@@ -0,0 +1,158 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-form js-form">
+    <div class="c-overlay__top-bar c-form__top-bar">
+      <div class="c-overlay__dialog-title js-form-title">{{ model.title }}</div>
+      <div v-if="hasRequiredFields" class="c-overlay__dialog-hint hint">
+        All fields marked <span class="req icon-asterisk"></span> are required.
+      </div>
+    </div>
+    <form name="mctForm" class="c-form__contents" autocomplete="off" @submit.prevent>
+      <div
+        v-for="section in formSections"
+        :key="section.id"
+        class="c-form__section"
+        :class="section.cssClass"
+      >
+        <h2 v-if="section.name" class="c-form__section-header">
+          {{ section.name }}
+        </h2>
+        <FormRow
+          v-for="(row, index) in section.rows"
+          :key="row.id"
+          :css-class="row.cssClass"
+          :first="index < 1"
+          :row="row"
+          @on-change="onChange"
+        />
+      </div>
+    </form>
+
+    <div class="mct-form__controls c-overlay__button-bar c-form__bottom-bar">
+      <button
+        tabindex="0"
+        :disabled="isInvalid"
+        class="c-button c-button--major"
+        aria-label="Save"
+        @click="onSave"
+      >
+        {{ submitLabel }}
+      </button>
+      <button
+        v-if="!shouldHideCancelButton"
+        tabindex="0"
+        class="c-button js-cancel-button"
+        aria-label="Cancel"
+        @click="onCancel"
+      >
+        {{ cancelLabel }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { v4 as uuid } from 'uuid';
+
+import FormRow from '@/api/forms/components/FormRow.vue';
+
+export default {
+  components: {
+    FormRow
+  },
+  inject: ['openmct'],
+  props: {
+    model: {
+      type: Object,
+      required: true
+    },
+    value: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  emits: ['on-change', 'on-save', 'on-cancel'],
+  data() {
+    return {
+      invalidProperties: {},
+      formSections: []
+    };
+  },
+  computed: {
+    hasRequiredFields() {
+      return this.model.sections.some((section) => section.rows.some((row) => row.required));
+    },
+    isInvalid() {
+      return Object.entries(this.invalidProperties).some(([key, value]) => {
+        return value;
+      });
+    },
+    submitLabel() {
+      if (this.model.buttons && this.model.buttons.submit && this.model.buttons.submit.label) {
+        return this.model.buttons.submit.label;
+      }
+
+      return 'OK';
+    },
+    cancelLabel() {
+      if (this.model.buttons && this.model.buttons.cancel && this.model.buttons.cancel.label) {
+        return this.model.buttons.submit.label;
+      }
+
+      return 'Cancel';
+    },
+    shouldHideCancelButton() {
+      return this.model.buttons?.cancel?.hide === true;
+    }
+  },
+  mounted() {
+    this.formSections = this.model.sections.map((section) => {
+      section.id = uuid();
+
+      section.rows = section.rows.map((row) => {
+        row.id = uuid();
+
+        return row;
+      });
+
+      return section;
+    });
+  },
+  methods: {
+    onChange(data) {
+      this.invalidProperties[data.model.key] = data.invalid;
+
+      this.$emit('on-change', data);
+    },
+    onCancel() {
+      this.$emit('on-cancel');
+    },
+    onSave() {
+      this.$emit('on-save');
+    }
+  }
+};
+</script>
diff --git a/src/api/forms/components/FormRow.vue b/src/api/forms/components/FormRow.vue
new file mode 100644
index 00000000000..ce1c88e403d
--- /dev/null
+++ b/src/api/forms/components/FormRow.vue
@@ -0,0 +1,132 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="form-row c-form__row" :class="[{ first: first }, cssClass]" @on-change="onChange">
+    <label class="c-form-row__label" :title="row.description" :for="`form-${row.key}`">
+      {{ row.name }}
+    </label>
+    <div class="c-form-row__state-indicator" :class="reqClass"></div>
+    <div v-if="row.control" ref="rowElement" class="c-form-row__controls"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FormRow',
+  components: {},
+  inject: ['openmct'],
+  props: {
+    cssClass: {
+      type: String,
+      default: '',
+      required: true
+    },
+    first: {
+      type: Boolean,
+      default: false,
+      required: true
+    },
+    row: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['on-change'],
+  data() {
+    return {
+      formControl: this.openmct.forms.getFormControl(this.row.control),
+      valid: undefined,
+      visited: false
+    };
+  },
+  computed: {
+    reqClass() {
+      let reqClass = 'req';
+
+      if (!this.row.required) {
+        return;
+      }
+
+      if (this.visited && this.valid !== undefined) {
+        if (this.valid === true) {
+          reqClass = 'valid';
+        } else {
+          reqClass = 'invalid';
+        }
+      }
+
+      return reqClass;
+    }
+  },
+  mounted() {
+    if (this.row.required) {
+      const data = {
+        model: this.row,
+        value: this.row.value
+      };
+
+      this.onChange(data, false);
+    }
+
+    this.formControl.show(this.$refs.rowElement, this.row, this.onChange);
+  },
+  unmounted() {
+    const destroy = this.formControl.destroy;
+    if (destroy) {
+      destroy();
+    }
+  },
+  methods: {
+    onChange(data, visited = true) {
+      this.visited = visited;
+      this.valid = this.validateRow(data);
+      data.invalid = !this.valid;
+
+      this.$emit('on-change', data);
+    },
+    validateRow(data) {
+      let valid = true;
+      if (this.row.required) {
+        valid = data.value !== undefined && data.value !== null && data.value !== '';
+      }
+
+      if (this.row.required && !valid) {
+        return false;
+      }
+
+      const pattern = data.model.pattern;
+      if (valid && pattern) {
+        const regex = new RegExp(pattern);
+        valid = regex.test(data.value);
+      }
+
+      const validate = data.model.validate;
+      if (valid && validate) {
+        valid = validate(data);
+      }
+
+      return Boolean(valid);
+    }
+  }
+};
+</script>
diff --git a/src/api/forms/components/controls/AutoCompleteField.vue b/src/api/forms/components/controls/AutoCompleteField.vue
new file mode 100644
index 00000000000..12224a8792c
--- /dev/null
+++ b/src/api/forms/components/controls/AutoCompleteField.vue
@@ -0,0 +1,263 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div ref="autoCompleteForm" class="form-control c-input--autocomplete js-autocomplete">
+    <div class="c-input--autocomplete__wrapper">
+      <input
+        ref="autoCompleteInput"
+        v-model="field"
+        class="c-input--autocomplete__input js-autocomplete__input"
+        type="text"
+        :placeholder="placeHolderText"
+        @click="inputClicked()"
+        @keydown="keyDown($event)"
+      />
+      <div
+        class="icon-arrow-down c-icon-button c-input--autocomplete__afford-arrow js-autocomplete__afford-arrow"
+        @click="arrowClicked()"
+      ></div>
+    </div>
+    <div
+      v-if="!hideOptions && filteredOptions.length > 0"
+      class="c-menu c-input--autocomplete__options js-autocomplete-options"
+      aria-label="Autocomplete Options"
+      @blur="hideOptions = true"
+    >
+      <ul>
+        <li
+          v-for="opt in filteredOptions"
+          :key="opt.optionId"
+          :class="[{ optionPreSelected: optionIndex === opt.optionId }, itemCssClass]"
+          :style="itemStyle(opt)"
+          @click="fillInputWithString(opt.name)"
+          @mouseover="optionMouseover(opt.optionId)"
+        >
+          {{ opt.name }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+const key = {
+  down: 40,
+  up: 38,
+  enter: 13
+};
+
+export default {
+  props: {
+    model: {
+      type: Object,
+      required: true,
+      default() {
+        return {};
+      }
+    },
+    placeHolderText: {
+      type: String,
+      default() {
+        return '';
+      }
+    },
+    itemCssClass: {
+      type: String,
+      required: false,
+      default() {
+        return '';
+      }
+    }
+  },
+  emits: ['on-change'],
+  data() {
+    return {
+      hideOptions: true,
+      showFilteredOptions: false,
+      optionIndex: 0,
+      field: this.model.value
+    };
+  },
+  computed: {
+    filteredOptions() {
+      const fullOptions = this.options || [];
+      if (this.showFilteredOptions) {
+        const optionsFiltered = fullOptions
+          .filter((option) => {
+            if (option.name && this.field) {
+              return option.name.toLowerCase().indexOf(this.field.toLowerCase()) >= 0;
+            }
+
+            return false;
+          })
+          .map((option, index) => {
+            return {
+              optionId: index,
+              name: option.name,
+              color: option.color
+            };
+          });
+
+        return optionsFiltered;
+      }
+
+      const optionsFiltered = fullOptions.map((option, index) => {
+        return {
+          optionId: index,
+          name: option.name,
+          color: option.color
+        };
+      });
+
+      return optionsFiltered;
+    }
+  },
+  watch: {
+    field(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        const data = {
+          model: this.model,
+          value: newValue
+        };
+
+        this.$emit('on-change', data);
+      }
+    },
+    hideOptions(newValue) {
+      if (!newValue) {
+        // adding a event listener when the hideOptions is false (dropdown is visible)
+        // handleoutsideclick can collapse the dropdown when clicked outside autocomplete
+        document.body.addEventListener('click', this.handleOutsideClick);
+      } else {
+        //removing event listener when hideOptions become true (dropdown is collapsed)
+        document.body.removeEventListener('click', this.handleOutsideClick);
+      }
+    }
+  },
+  mounted() {
+    this.autocompleteInputAndArrow = this.$refs.autoCompleteForm;
+    this.autocompleteInputElement = this.$refs.autoCompleteInput;
+    if (this.model.options && this.model.options.length && !this.model.options[0].name) {
+      // If options is only an array of string.
+      this.options = this.model.options.map((option) => {
+        return {
+          name: option
+        };
+      });
+    } else {
+      this.options = this.model.options;
+    }
+  },
+  unmounted() {
+    document.body.removeEventListener('click', this.handleOutsideClick);
+  },
+  methods: {
+    decrementOptionIndex() {
+      if (this.optionIndex === 0) {
+        this.optionIndex = this.filteredOptions.length;
+      }
+
+      this.optionIndex--;
+      this.scrollIntoView();
+    },
+    incrementOptionIndex() {
+      if (this.optionIndex === this.filteredOptions.length - 1) {
+        this.optionIndex = -1;
+      }
+
+      this.optionIndex++;
+      this.scrollIntoView();
+    },
+    fillInputWithString(string) {
+      this.hideOptions = true;
+      this.field = string;
+    },
+    showOptions() {
+      this.hideOptions = false;
+      this.optionIndex = 0;
+    },
+    keyDown($event) {
+      this.showFilteredOptions = true;
+      if (this.filteredOptions) {
+        let keyCode = $event.keyCode;
+        switch (keyCode) {
+          case key.down:
+            this.incrementOptionIndex();
+            break;
+          case key.up:
+            $event.preventDefault(); // Prevents cursor jumping back and forth
+            this.decrementOptionIndex();
+            break;
+          case key.enter:
+            if (this.filteredOptions[this.optionIndex]) {
+              this.fillInputWithString(this.filteredOptions[this.optionIndex].name);
+            }
+        }
+      }
+    },
+    inputClicked() {
+      this.autocompleteInputElement.select();
+      this.showOptions();
+    },
+    arrowClicked() {
+      // if the user clicked the arrow, we want
+      // to show them all the options
+      this.showFilteredOptions = false;
+      this.autocompleteInputElement.select();
+
+      if (!this.hideOptions && this.filteredOptions.length > 0) {
+        this.hideOptions = true;
+      } else {
+        this.showOptions();
+      }
+    },
+    handleOutsideClick(event) {
+      // if click event is detected outside autocomplete (both input & arrow) while the
+      // dropdown is visible, this will collapse the dropdown.
+      const clickedInsideAutocomplete = this.autocompleteInputAndArrow.contains(event.target);
+      if (!clickedInsideAutocomplete && !this.hideOptions) {
+        this.hideOptions = true;
+      }
+    },
+    optionMouseover(optionId) {
+      this.optionIndex = optionId;
+    },
+    scrollIntoView() {
+      setTimeout(() => {
+        const element = this.$el.querySelector('.optionPreSelected');
+        if (element) {
+          element.scrollIntoView({
+            behavior: 'smooth',
+            block: 'center',
+            inline: 'nearest'
+          });
+        }
+      });
+    },
+    itemStyle(option) {
+      if (option.color) {
+        return { '--optionIconColor': option.color };
+      }
+    }
+  }
+};
+</script>
diff --git a/src/api/forms/components/controls/CheckBoxField.vue b/src/api/forms/components/controls/CheckBoxField.vue
new file mode 100644
index 00000000000..8ff3da734f4
--- /dev/null
+++ b/src/api/forms/components/controls/CheckBoxField.vue
@@ -0,0 +1,48 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <span class="form-control shell">
+    <span class="field control" :class="model.cssClass">
+      <input type="checkbox" :checked="isChecked" @input="toggleCheckBox" />
+    </span>
+  </span>
+</template>
+
+<script>
+import toggleMixin from '../../toggle-check-box-mixin.js';
+
+export default {
+  mixins: [toggleMixin],
+  props: {
+    model: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      isChecked: this.model.value
+    };
+  }
+};
+</script>
diff --git a/src/api/forms/components/controls/ClockDisplayFormatField.vue b/src/api/forms/components/controls/ClockDisplayFormatField.vue
new file mode 100644
index 00000000000..1bd5249dd42
--- /dev/null
+++ b/src/api/forms/components/controls/ClockDisplayFormatField.vue
@@ -0,0 +1,63 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-form-control--clock-display-format-fields">
+    <SelectField v-for="item in items" :key="item.key" :model="item" @on-change="onChange" />
+  </div>
+</template>
+
+<script>
+import SelectField from '@/api/forms/components/controls/SelectField.vue';
+
+export default {
+  components: {
+    SelectField
+  },
+  props: {
+    model: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['on-change'],
+  data() {
+    return {
+      items: []
+    };
+  },
+  mounted() {
+    const values = this.model.value || [];
+    this.items = this.model.items.map((item, index) => {
+      item.value = values[index];
+      item.key = `${this.model.key}.${index}`;
+
+      return item;
+    });
+  },
+  methods: {
+    onChange(data) {
+      this.$emit('on-change', data);
+    }
+  }
+};
+</script>
diff --git a/src/api/forms/components/controls/CompositeContainer.vue b/src/api/forms/components/controls/CompositeContainer.vue
new file mode 100644
index 00000000000..0b2186a867e
--- /dev/null
+++ b/src/api/forms/components/controls/CompositeContainer.vue
@@ -0,0 +1,59 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <span>
+    <CompositeItem
+      v-for="(item, index) in model.items"
+      :key="item.name"
+      :first="index < 1"
+      :value="JSON.stringify(model.value[index])"
+      :item="item"
+      @on-change="onChange"
+    />
+  </span>
+</template>
+
+<script>
+import CompositeItem from '@/api/forms/components/controls/CompositeItem.vue';
+
+export default {
+  components: {
+    CompositeItem
+  },
+  props: {
+    model: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['on-change'],
+  mounted() {
+    this.model.items.forEach((item, index) => (item.key = `${this.model.key}.${index}`));
+  },
+  methods: {
+    onChange(data) {
+      this.$emit('on-change', data);
+    }
+  }
+};
+</script>
diff --git a/src/api/forms/components/controls/CompositeItem.vue b/src/api/forms/components/controls/CompositeItem.vue
new file mode 100644
index 00000000000..8bf0822f5f3
--- /dev/null
+++ b/src/api/forms/components/controls/CompositeItem.vue
@@ -0,0 +1,71 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div :class="compositeCssClass">
+    <FormRow :css-class="item.cssClass" :first="first" :row="row" @on-change="onChange" />
+    <span class="composite-control-label">
+      {{ item.name }}
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+    FormRow: () => import('@/api/forms/components/FormRow.vue')
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    first: {
+      type: Boolean,
+      required: true
+    },
+    value: {
+      type: String,
+      default() {
+        return '';
+      }
+    }
+  },
+  emits: ['on-change'],
+  computed: {
+    compositeCssClass() {
+      return `l-composite-control l-${this.item.control}`;
+    },
+    row() {
+      const row = this.item;
+      row.value = JSON.parse(this.value);
+
+      return row;
+    }
+  },
+  methods: {
+    onChange(data) {
+      this.$emit('on-change', data);
+    }
+  }
+};
+</script>
diff --git a/src/api/forms/components/controls/DatetimeField.vue b/src/api/forms/components/controls/DatetimeField.vue
new file mode 100644
index 00000000000..1be6ed352b5
--- /dev/null
+++ b/src/api/forms/components/controls/DatetimeField.vue
@@ -0,0 +1,164 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-form-control--datetime">
+    <div class="hint date">Date</div>
+    <div class="hint time sm">Hour</div>
+    <div class="hint time sm">Min</div>
+    <div class="hint time sm">Sec</div>
+    <div class="hint timezone">Timezone</div>
+    <form ref="dateTimeForm" prevent class="u-contents">
+      <input
+        v-model="date"
+        class="field control date"
+        :pattern="/\d{4}-\d{2}-\d{2}/"
+        :placeholder="format"
+        type="date"
+        name="date"
+        @change="onChange"
+      />
+      <input
+        v-model="hour"
+        class="field control hour c-input--sm"
+        :pattern="/\d+/"
+        type="number"
+        name="hour"
+        maxlength="10"
+        min="0"
+        max="23"
+        @change="onChange"
+      />
+      <input
+        v-model="min"
+        class="field control min c-input--sm"
+        :pattern="/\d+/"
+        type="number"
+        name="min"
+        maxlength="2"
+        min="0"
+        max="59"
+        @change="onChange"
+      />
+      <input
+        v-model="sec"
+        class="field control sec c-input--sm"
+        :pattern="/\d+/"
+        type="number"
+        name="sec"
+        maxlength="2"
+        min="0"
+        max="59"
+        @change="onChange"
+      />
+      <div class="field control hint timezone">UTC</div>
+    </form>
+  </div>
+</template>
+
+<script>
+const DATE_FORMAT = 'YYYY-MM-DD';
+
+export default {
+  props: {
+    model: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['on-change'],
+  data() {
+    return {
+      format: DATE_FORMAT,
+      date: '',
+      hour: 0,
+      min: 0,
+      sec: 0
+    };
+  },
+  mounted() {
+    this.formatDatetime();
+  },
+  methods: {
+    convertToDatetime(timestamp) {
+      const dateValue = new Date(timestamp);
+      const date = dateValue.toISOString().slice(0, 10);
+      const hour = dateValue.getUTCHours() || 0;
+      const min = dateValue.getUTCMinutes() || 0;
+      const sec = dateValue.getUTCSeconds() || 0;
+
+      return {
+        date,
+        hour,
+        min,
+        sec
+      };
+    },
+    convertToTimestamp() {
+      const date = new Date(this.date);
+      date.setUTCHours(this.hour || 0);
+      date.setUTCMinutes(this.min || 0);
+      date.setUTCSeconds(this.sec || 0);
+
+      return date.getTime();
+    },
+    formatDatetime(timestamp = this.model.value) {
+      if (!timestamp) {
+        this.resetValues();
+        return;
+      }
+
+      const datetime = this.convertToDatetime(timestamp);
+      this.setDatetime(datetime.date, datetime.hour, datetime.min, datetime.sec);
+    },
+    onChange() {
+      const timestamp = this.convertToTimestamp();
+      const model = this.model;
+      model.validate = () => this.validate(timestamp);
+
+      const data = {
+        model,
+        value: new Date(timestamp).toISOString()
+      };
+
+      this.$emit('on-change', data);
+    },
+    resetValues() {
+      this.setDatetime();
+    },
+    setDatetime(date = '', hour = 0, min = 0, sec = 0) {
+      this.date = date.toString();
+      this.hour = hour;
+      this.min = min;
+      this.sec = sec;
+    },
+    validate(timestamp) {
+      const valid = timestamp > 0 && this.$refs.dateTimeForm.checkValidity();
+      if (!valid) {
+        this.$refs.dateTimeForm.reportValidity();
+      }
+
+      return valid;
+    }
+  }
+};
+</script>
diff --git a/src/api/forms/components/controls/FileInput.vue b/src/api/forms/components/controls/FileInput.vue
new file mode 100644
index 00000000000..911fdb945a1
--- /dev/null
+++ b/src/api/forms/components/controls/FileInput.vue
@@ -0,0 +1,143 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <span class="form-control shell">
+    <span class="field control" :class="model.cssClass">
+      <input
+        id="fileElem"
+        ref="fileInput"
+        type="file"
+        :accept="acceptableFileTypes"
+        style="display: none"
+      />
+      <button id="fileSelect" class="c-button" @click="selectFile">
+        {{ name }}
+      </button>
+      <button
+        v-if="removable"
+        class="c-button icon-trash"
+        title="Remove file"
+        @click="removeFile"
+      ></button>
+    </span>
+  </span>
+</template>
+
+<script>
+export default {
+  inject: ['openmct'],
+  props: {
+    model: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['on-change'],
+  data() {
+    return {
+      fileInfo: undefined
+    };
+  },
+  computed: {
+    name() {
+      const fileInfo = this.fileInfo || this.model.value;
+
+      return (fileInfo && fileInfo.name) || this.model.text;
+    },
+    removable() {
+      return (this.fileInfo || this.model.value) && this.model.removable;
+    },
+    acceptableFileTypes() {
+      if (this.model.type) {
+        return this.model.type;
+      }
+
+      return 'application/json';
+    }
+  },
+  mounted() {
+    this.$refs.fileInput.addEventListener('change', this.handleFiles, false);
+  },
+  methods: {
+    handleFiles() {
+      const fileList = this.$refs.fileInput.files;
+      const file = fileList[0];
+
+      if (this.acceptableFileTypes === 'application/json') {
+        this.readFile(file);
+      } else {
+        this.handleRawFile(file);
+      }
+    },
+    readFile(file) {
+      const self = this;
+      const fileReader = new FileReader();
+      const fileInfo = {};
+      fileInfo.name = file.name;
+      fileReader.onload = function (event) {
+        fileInfo.body = event.target.result;
+        self.fileInfo = fileInfo;
+
+        const data = {
+          model: self.model,
+          value: fileInfo
+        };
+        self.$emit('on-change', data);
+      };
+
+      fileReader.onerror = function (error) {
+        console.error('fileReader error', error);
+      };
+
+      fileReader.readAsText(file);
+    },
+    handleRawFile(file) {
+      const fileInfo = {
+        name: file.name,
+        body: file
+      };
+
+      this.fileInfo = Object.assign({}, fileInfo);
+
+      const data = {
+        model: this.model,
+        value: fileInfo
+      };
+
+      this.$emit('on-change', data);
+    },
+    selectFile() {
+      this.$refs.fileInput.click();
+    },
+    removeFile() {
+      this.model.value = undefined;
+      this.fileInfo = undefined;
+      const data = {
+        model: this.model,
+        value: undefined
+      };
+      this.$emit('on-change', data);
+    }
+  }
+};
+</script>
diff --git a/src/api/forms/components/controls/LocatorField.vue b/src/api/forms/components/controls/LocatorField.vue
new file mode 100644
index 00000000000..544a31bd707
--- /dev/null
+++ b/src/api/forms/components/controls/LocatorField.vue
@@ -0,0 +1,57 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <mct-tree
+    :is-selector-tree="true"
+    :initial-selection="model.parent"
+    @tree-item-selection="handleItemSelection"
+  />
+</template>
+
+<script>
+import MctTree from '@/ui/layout/MctTree.vue';
+
+export default {
+  components: {
+    MctTree
+  },
+  inject: ['openmct'],
+  props: {
+    model: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['on-change'],
+  methods: {
+    handleItemSelection(item) {
+      const data = {
+        model: this.model,
+        value: item.objectPath
+      };
+
+      this.$emit('on-change', data);
+    }
+  }
+};
+</script>
diff --git a/src/api/forms/components/controls/NumberField.vue b/src/api/forms/components/controls/NumberField.vue
new file mode 100644
index 00000000000..187266fceda
--- /dev/null
+++ b/src/api/forms/components/controls/NumberField.vue
@@ -0,0 +1,69 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <span class="form-control shell">
+    <span class="field control" :class="model.cssClass">
+      <input
+        v-model="field"
+        :aria-label="model.name"
+        type="number"
+        :min="model.min"
+        :max="model.max"
+        :step="model.step"
+        @input="updateText()"
+      />
+    </span>
+  </span>
+</template>
+
+<script>
+import { throttle } from 'lodash';
+
+export default {
+  props: {
+    model: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['on-change'],
+  data() {
+    return {
+      field: this.model.value
+    };
+  },
+  mounted() {
+    this.updateText = throttle(this.updateText.bind(this), 200);
+  },
+  methods: {
+    updateText() {
+      const data = {
+        model: this.model,
+        value: this.field
+      };
+
+      this.$emit('on-change', data);
+    }
+  }
+};
+</script>
diff --git a/src/api/forms/components/controls/SelectField.vue b/src/api/forms/components/controls/SelectField.vue
new file mode 100644
index 00000000000..38c5f18fda8
--- /dev/null
+++ b/src/api/forms/components/controls/SelectField.vue
@@ -0,0 +1,64 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="form-control select-field">
+    <select
+      v-model="selected"
+      required="model.required"
+      name="mctControl"
+      :aria-label="model.ariaLabel || model.name"
+      @change="onChange($event)"
+    >
+      <option v-for="option in model.options" :key="option.name" :value="option.value">
+        {{ option.name }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    model: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['on-change'],
+  data() {
+    return {
+      selected: this.model.value
+    };
+  },
+  methods: {
+    onChange() {
+      const data = {
+        model: this.model,
+        value: this.selected
+      };
+
+      this.$emit('on-change', data);
+    }
+  }
+};
+</script>
diff --git a/src/api/forms/components/controls/TextAreaField.vue b/src/api/forms/components/controls/TextAreaField.vue
new file mode 100644
index 00000000000..98c93b9a5a7
--- /dev/null
+++ b/src/api/forms/components/controls/TextAreaField.vue
@@ -0,0 +1,68 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <span class="form-control shell">
+    <span class="field control" :class="model.cssClass">
+      <textarea
+        :id="`${model.key}-textarea`"
+        v-model="field"
+        type="text"
+        :size="model.size"
+        @input="updateText()"
+      >
+      </textarea>
+    </span>
+  </span>
+</template>
+
+<script>
+import { throttle } from 'lodash';
+
+export default {
+  props: {
+    model: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['on-change'],
+  data() {
+    return {
+      field: this.model.value
+    };
+  },
+  mounted() {
+    this.updateText = throttle(this.updateText.bind(this), 500);
+  },
+  methods: {
+    updateText() {
+      const data = {
+        model: this.model,
+        value: this.field
+      };
+
+      this.$emit('on-change', data);
+    }
+  }
+};
+</script>
diff --git a/src/api/forms/components/controls/TextField.vue b/src/api/forms/components/controls/TextField.vue
new file mode 100644
index 00000000000..4108cd6e929
--- /dev/null
+++ b/src/api/forms/components/controls/TextField.vue
@@ -0,0 +1,68 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <span class="form-control shell">
+    <span class="field control" :class="model.cssClass">
+      <input
+        :id="`form-${model.key}`"
+        v-model="field"
+        :name="model.key"
+        type="text"
+        :size="model.size"
+        @input="updateText()"
+      />
+    </span>
+  </span>
+</template>
+
+<script>
+import { throttle } from 'lodash';
+
+export default {
+  props: {
+    model: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['on-change'],
+  data() {
+    return {
+      field: this.model.value
+    };
+  },
+  mounted() {
+    this.updateText = throttle(this.updateText.bind(this), 500);
+  },
+  methods: {
+    updateText() {
+      const data = {
+        model: this.model,
+        value: this.field
+      };
+
+      this.$emit('on-change', data);
+    }
+  }
+};
+</script>
diff --git a/src/api/forms/components/controls/ToggleSwitchField.vue b/src/api/forms/components/controls/ToggleSwitchField.vue
new file mode 100644
index 00000000000..4ca3e9a64fe
--- /dev/null
+++ b/src/api/forms/components/controls/ToggleSwitchField.vue
@@ -0,0 +1,61 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <span class="form-control shell">
+    <span class="field control" :class="model.cssClass">
+      <ToggleSwitch
+        id="switchId"
+        :checked="isChecked"
+        :name="model.name"
+        @change="toggleCheckBox"
+      />
+    </span>
+  </span>
+</template>
+
+<script>
+import { v4 as uuid } from 'uuid';
+
+import ToggleSwitch from '@/ui/components/ToggleSwitch.vue';
+
+import toggleMixin from '../../toggle-check-box-mixin.js';
+
+export default {
+  components: {
+    ToggleSwitch
+  },
+  mixins: [toggleMixin],
+  props: {
+    model: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      switchId: `toggleSwitch-${uuid}`,
+      isChecked: this.model.value
+    };
+  }
+};
+</script>
diff --git a/src/api/forms/toggle-check-box-mixin.js b/src/api/forms/toggle-check-box-mixin.js
new file mode 100644
index 00000000000..bb3429bcba0
--- /dev/null
+++ b/src/api/forms/toggle-check-box-mixin.js
@@ -0,0 +1,20 @@
+export default {
+  emits: ['on-change'],
+  data() {
+    return {
+      isChecked: false
+    };
+  },
+  methods: {
+    toggleCheckBox(event) {
+      this.isChecked = !this.isChecked;
+
+      const data = {
+        model: this.model,
+        value: this.isChecked
+      };
+
+      this.$emit('on-change', data);
+    }
+  }
+};
diff --git a/src/api/indicators/IndicatorAPI.js b/src/api/indicators/IndicatorAPI.js
index c89b8cc5edb..e5a3e2f30ea 100644
--- a/src/api/indicators/IndicatorAPI.js
+++ b/src/api/indicators/IndicatorAPI.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,45 +19,83 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-define([
-    './SimpleIndicator',
-    'lodash'
-], function (
-    SimpleIndicator,
-    _
-) {
-    function IndicatorAPI(openmct) {
-        this.openmct = openmct;
-        this.indicatorObjects = [];
+
+import EventEmitter from 'EventEmitter';
+
+import vueWrapHtmlElement from '../../utils/vueWrapHtmlElement.js';
+import SimpleIndicator from './SimpleIndicator.js';
+
+class IndicatorAPI extends EventEmitter {
+  /** @type {import('../../../openmct.js').OpenMCT} */
+  openmct;
+  constructor(openmct) {
+    super();
+
+    this.openmct = openmct;
+    this.indicatorObjects = [];
+  }
+
+  getIndicatorObjectsByPriority() {
+    const sortedIndicators = this.indicatorObjects.sort((a, b) => b.priority - a.priority);
+
+    return sortedIndicators;
+  }
+
+  simpleIndicator() {
+    return new SimpleIndicator(this.openmct);
+  }
+
+  /**
+   * @typedef {import('vue').Component} VueComponent
+   */
+
+  /**
+   * @typedef {Object} Indicator
+   * @property {HTMLElement} [element]
+   * @property {VueComponent|Promise<VueComponent>} [vueComponent]
+   * @property {string} key
+   * @property {number} priority
+   */
+
+  /**
+   * Accepts an indicator object, which is a simple object
+   * with a two attributes: 'element' which has an HTMLElement
+   * as its value, and 'priority' with an integer that specifies its order in the layout.
+   * The lower the priority, the further to the right the element is placed.
+   * If undefined, the priority will be assigned -1.
+   *
+   * We provide .simpleIndicator() as a convenience function
+   * which will create a default Open MCT indicator that can
+   * be passed to .add(indicator). This indicator also exposes
+   * functions for changing its appearance to support customization
+   * and dynamic behavior.
+   *
+   * Eg.
+   * const myIndicator = openmct.indicators.simpleIndicator();
+   * openmct.indicators.add(myIndicator);
+   *
+   * myIndicator.text("Hello World!");
+   * myIndicator.iconClass("icon-info");
+   *
+   * If you would like to use a Vue component, you can pass it in
+   * directly as the 'vueComponent' attribute of the indicator object.
+   * This accepts a Vue component or a promise that resolves to a Vue component (for asynchronous
+   * rendering).
+   *
+   * @param {Indicator} indicator
+   */
+  add(indicator) {
+    if (!indicator.priority) {
+      indicator.priority = this.openmct.priority.DEFAULT;
     }
+    if (!indicator.vueComponent) {
+      indicator.vueComponent = vueWrapHtmlElement(indicator.element);
+    }
+
+    this.indicatorObjects.push(indicator);
+
+    this.emit('addIndicator', indicator);
+  }
+}
 
-    IndicatorAPI.prototype.simpleIndicator = function () {
-        return new SimpleIndicator(this.openmct);
-    };
-
-    /**
-     * Accepts an indicator object, which is a simple object
-     * with a single attribute, 'element' which has an HTMLElement
-     * as its value.
-     *
-     * We provide .simpleIndicator() as a convenience function
-     * which will create a default Open MCT indicator that can
-     * be passed to .add(indicator). This indicator also exposes
-     * functions for changing its appearance to support customization
-     * and dynamic behavior.
-     *
-     * Eg.
-     * var myIndicator = openmct.indicators.simpleIndicator();
-     * openmct.indicators.add(myIndicator);
-     *
-     * myIndicator.text("Hello World!");
-     * myIndicator.iconClass("icon-info");
-     *
-     */
-    IndicatorAPI.prototype.add = function (indicator) {
-        this.indicatorObjects.push(indicator);
-    };
-
-    return IndicatorAPI;
-
-});
+export default IndicatorAPI;
diff --git a/src/api/indicators/IndicatorAPISpec.js b/src/api/indicators/IndicatorAPISpec.js
index 6b05bc55b92..a41e08e6804 100644
--- a/src/api/indicators/IndicatorAPISpec.js
+++ b/src/api/indicators/IndicatorAPISpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,97 +19,102 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-
-define(
-    [
-        "../../MCT",
-        "../../../platform/commonUI/general/src/directives/MCTIndicators"
-    ],
-    function (
-        MCT,
-        MCTIndicators
-    ) {
-        xdescribe("The Indicator API", function () {
-            let openmct;
-            let directive;
-            let holderElement;
-
-            beforeEach(function () {
-                openmct = new MCT();
-                directive = new MCTIndicators(openmct);
-                holderElement = document.createElement('div');
-            });
-
-            describe("The simple indicator", function () {
-                let simpleIndicator;
-
-                beforeEach(function () {
-                    simpleIndicator = openmct.indicators.simpleIndicator();
-                    openmct.indicators.add(simpleIndicator);
-                    renderIndicators();
-                });
-
-                it("applies the set icon class", function () {
-                    simpleIndicator.iconClass('testIconClass');
-
-                    expect(getIconElement().classList.contains('testIconClass')).toBe(true);
-
-                    simpleIndicator.iconClass('anotherIconClass');
-                    expect(getIconElement().classList.contains('testIconClass')).toBe(false);
-                    expect(getIconElement().classList.contains('anotherIconClass')).toBe(true);
-                });
-
-                it("applies the set status class", function () {
-                    simpleIndicator.statusClass('testStatusClass');
-
-                    expect(getIconElement().classList.contains('testStatusClass')).toBe(true);
-                    simpleIndicator.statusClass('anotherStatusClass');
-                    expect(getIconElement().classList.contains('testStatusClass')).toBe(false);
-                    expect(getIconElement().classList.contains('anotherStatusClass')).toBe(true);
-                });
-
-                it("displays the set text", function () {
-                    simpleIndicator.text('some test text');
-                    expect(getTextElement().textContent.trim()).toEqual('some test text');
-                });
-
-                it("sets the indicator's title", function () {
-                    simpleIndicator.description('a test description');
-                    expect(getIndicatorElement().getAttribute('title')).toEqual('a test description');
-                });
-
-                it("Hides indicator icon if no text is set", function () {
-                    simpleIndicator.text('');
-                    expect(getIndicatorElement().classList.contains('hidden')).toBe(true);
-                });
-
-                function getIconElement() {
-                    return holderElement.querySelector('.ls-indicator');
-                }
-
-                function getIndicatorElement() {
-                    return holderElement.querySelector('.ls-indicator');
-                }
-
-                function getTextElement() {
-                    return holderElement.querySelector('.indicator-text');
-                }
-            });
-
-            it("Supports registration of a completely custom indicator", function () {
-                const customIndicator = document.createElement('div');
-                customIndicator.classList.add('customIndicator');
-                customIndicator.textContent = 'A custom indicator';
-
-                openmct.indicators.add({element: customIndicator});
-                renderIndicators();
-
-                expect(holderElement.querySelector('.customIndicator').textContent.trim()).toEqual('A custom indicator');
-            });
-
-            function renderIndicators() {
-                directive.link({}, holderElement);
-            }
-
-        });
-    });
+import { defineComponent } from 'vue';
+
+import { createOpenMct, resetApplicationState } from '../../utils/testing.js';
+import SimpleIndicator from './SimpleIndicator.js';
+
+describe('The Indicator API', () => {
+  let openmct;
+
+  beforeEach(() => {
+    openmct = createOpenMct();
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  function generateHTMLIndicator(className, label, priority) {
+    const element = document.createElement('div');
+    element.classList.add(className);
+    const textNode = document.createTextNode(label);
+    element.appendChild(textNode);
+    const testIndicator = {
+      element,
+      priority
+    };
+
+    return testIndicator;
+  }
+
+  function generateVueIndicator(priority) {
+    return {
+      vueComponent: defineComponent({
+        template: '<div class="test-indicator">This is a test indicator</div>'
+      }),
+      priority
+    };
+  }
+
+  it('can register an HTML indicator', () => {
+    const testIndicator = generateHTMLIndicator('test-indicator', 'This is a test indicator', 2);
+    openmct.indicators.add(testIndicator);
+    expect(openmct.indicators.indicatorObjects).toBeDefined();
+    // notifier indicator is installed by default
+    expect(openmct.indicators.indicatorObjects.length).toBe(2);
+  });
+
+  it('can register a Vue indicator', () => {
+    const testIndicator = generateVueIndicator(2);
+    openmct.indicators.add(testIndicator);
+    expect(openmct.indicators.indicatorObjects).toBeDefined();
+    // notifier indicator is installed by default
+    expect(openmct.indicators.indicatorObjects.length).toBe(2);
+  });
+
+  it('can order indicators based on priority', () => {
+    const testIndicator1 = generateHTMLIndicator(
+      'test-indicator-1',
+      'This is a test indicator',
+      openmct.priority.LOW
+    );
+    openmct.indicators.add(testIndicator1);
+
+    const testIndicator2 = generateHTMLIndicator(
+      'test-indicator-2',
+      'This is another test indicator',
+      openmct.priority.DEFAULT
+    );
+    openmct.indicators.add(testIndicator2);
+
+    const testIndicator3 = generateHTMLIndicator(
+      'test-indicator-3',
+      'This is yet another test indicator',
+      openmct.priority.LOW
+    );
+    openmct.indicators.add(testIndicator3);
+
+    const testIndicator4 = generateHTMLIndicator(
+      'test-indicator-4',
+      'This is yet another test indicator',
+      openmct.priority.HIGH
+    );
+    openmct.indicators.add(testIndicator4);
+
+    const testIndicator5 = generateVueIndicator(openmct.priority.DEFAULT);
+    openmct.indicators.add(testIndicator5);
+
+    expect(openmct.indicators.indicatorObjects.length).toBe(6);
+    const indicatorObjectsByPriority = openmct.indicators.getIndicatorObjectsByPriority();
+    expect(indicatorObjectsByPriority.length).toBe(6);
+    expect(indicatorObjectsByPriority[2].priority).toBe(openmct.priority.DEFAULT);
+  });
+
+  it('the simple indicator can be added', () => {
+    const simpleIndicator = new SimpleIndicator(openmct);
+    openmct.indicators.add(simpleIndicator);
+
+    expect(openmct.indicators.indicatorObjects.length).toBe(2);
+  });
+});
diff --git a/src/api/indicators/SimpleIndicator.js b/src/api/indicators/SimpleIndicator.js
index 5256f1b94e9..45d2af18d25 100644
--- a/src/api/indicators/SimpleIndicator.js
+++ b/src/api/indicators/SimpleIndicator.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,81 +20,103 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(['zepto', './res/indicator-template.html'],
-    function ($, indicatorTemplate) {
-        const DEFAULT_ICON_CLASS = 'icon-info';
-
-        function SimpleIndicator(openmct) {
-            this.openmct = openmct;
-            this.element = $(indicatorTemplate)[0];
-
-            this.textElement = this.element.querySelector('.js-indicator-text');
-
-            //Set defaults
-            this.text('New Indicator');
-            this.description('');
-            this.iconClass(DEFAULT_ICON_CLASS);
-            this.statusClass('');
-        }
-
-        SimpleIndicator.prototype.text = function (text) {
-            if (text !== undefined && text !== this.textValue) {
-                this.textValue = text;
-                this.textElement.innerText = text;
-
-                if (!text) {
-                    this.element.classList.add('hidden');
-                } else {
-                    this.element.classList.remove('hidden');
-                }
-            }
-
-            return this.textValue;
-        };
-
-        SimpleIndicator.prototype.description = function (description) {
-            if (description !== undefined && description !== this.descriptionValue) {
-                this.descriptionValue = description;
-                this.element.title = description;
-            }
-
-            return this.descriptionValue;
-        };
-
-        SimpleIndicator.prototype.iconClass = function (iconClass) {
-            if (iconClass !== undefined && iconClass !== this.iconClassValue) {
-                // element.classList is precious and throws errors if you try and add
-                // or remove empty strings
-                if (this.iconClassValue) {
-                    this.element.classList.remove(this.iconClassValue);
-                }
-
-                if (iconClass) {
-                    this.element.classList.add(iconClass);
-                }
-
-                this.iconClassValue = iconClass;
-            }
-
-            return this.iconClassValue;
-        };
-
-        SimpleIndicator.prototype.statusClass = function (statusClass) {
-            if (statusClass !== undefined && statusClass !== this.statusClassValue) {
-                if (this.statusClassValue) {
-                    this.element.classList.remove(this.statusClassValue);
-                }
-
-                if (statusClass) {
-                    this.element.classList.add(statusClass);
-                }
-
-                this.statusClassValue = statusClass;
-            }
-
-            return this.statusClassValue;
-        };
-
-        return SimpleIndicator;
+import EventEmitter from 'EventEmitter';
+
+import { convertTemplateToHTML } from '@/utils/template/templateHelpers';
+
+import indicatorTemplate from './res/indicator-template.html';
+
+const DEFAULT_ICON_CLASS = 'icon-info';
+
+class SimpleIndicator extends EventEmitter {
+  constructor(openmct) {
+    super();
+
+    this.openmct = openmct;
+    this.element = convertTemplateToHTML(indicatorTemplate)[0];
+    this.priority = openmct.priority.DEFAULT;
+
+    this.textElement = this.element.querySelector('.js-indicator-text');
+
+    //Set defaults
+    this.text('New Indicator');
+    this.description('');
+    this.iconClass(DEFAULT_ICON_CLASS);
+
+    this.click = this.click.bind(this);
+
+    this.element.addEventListener('click', this.click);
+    openmct.once('destroy', () => {
+      this.removeAllListeners();
+      this.element.removeEventListener('click', this.click);
+    });
+  }
+
+  text(text) {
+    if (text !== undefined && text !== this.textValue) {
+      this.textValue = text;
+      this.textElement.innerText = text;
+
+      if (!text) {
+        this.element.classList.add('hidden');
+      } else {
+        this.element.classList.remove('hidden');
+      }
+    }
+
+    return this.textValue;
+  }
+
+  description(description) {
+    if (description !== undefined && description !== this.descriptionValue) {
+      this.descriptionValue = description;
+      this.element.title = description;
     }
-);
+
+    return this.descriptionValue;
+  }
+
+  iconClass(iconClass) {
+    if (iconClass !== undefined && iconClass !== this.iconClassValue) {
+      // element.classList is precious and throws errors if you try and add
+      // or remove empty strings
+      if (this.iconClassValue) {
+        this.element.classList.remove(this.iconClassValue);
+      }
+
+      if (iconClass) {
+        this.element.classList.add(iconClass);
+      }
+
+      this.iconClassValue = iconClass;
+    }
+
+    return this.iconClassValue;
+  }
+
+  statusClass(statusClass) {
+    if (arguments.length === 1 && statusClass !== this.statusClassValue) {
+      if (this.statusClassValue) {
+        this.element.classList.remove(this.statusClassValue);
+      }
+
+      if (statusClass !== undefined) {
+        this.element.classList.add(statusClass);
+      }
+
+      this.statusClassValue = statusClass;
+    }
+
+    return this.statusClassValue;
+  }
+
+  click(event) {
+    this.emit('click', event);
+  }
+
+  getElement() {
+    return this.element;
+  }
+}
+
+export default SimpleIndicator;
diff --git a/src/api/indicators/res/indicator-template.html b/src/api/indicators/res/indicator-template.html
index fc0fb5dd9fa..a6fb54b7418 100644
--- a/src/api/indicators/res/indicator-template.html
+++ b/src/api/indicators/res/indicator-template.html
@@ -1,3 +1,3 @@
 <div class="c-indicator c-indicator--clickable c-indicator--simple" title="">
-    <span class="label js-indicator-text c-indicator__label"></span>
+  <span class="label js-indicator-text c-indicator__label"></span>
 </div>
diff --git a/src/api/menu/MenuAPI.js b/src/api/menu/MenuAPI.js
index 8a53c39d826..c66032229d3 100644
--- a/src/api/menu/MenuAPI.js
+++ b/src/api/menu/MenuAPI.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -48,83 +48,84 @@ import Menu, { MENU_PLACEMENT } from './menu.js';
  */
 
 class MenuAPI {
-    constructor(openmct) {
-        this.openmct = openmct;
-
-        this.menuPlacement = MENU_PLACEMENT;
-        this.showMenu = this.showMenu.bind(this);
-        this.showSuperMenu = this.showSuperMenu.bind(this);
-
-        this._clearMenuComponent = this._clearMenuComponent.bind(this);
-        this._showObjectMenu = this._showObjectMenu.bind(this);
-    }
-
-    /**
-     * Show popup menu
-     * @param {number} x x-coordinates for popup
-     * @param {number} y x-coordinates for popup
-     * @param {Array.<Action>|Array.<Array.<Action>>} actions collection of actions{@link Action} or collection of groups of actions {@link Action}
-     * @param {MenuOptions} [menuOptions] [Optional] The {@link MenuOptions} options for Menu
-     */
-    showMenu(x, y, items, menuOptions) {
-        this._createMenuComponent(x, y, items, menuOptions);
-
-        this.menuComponent.showMenu();
-    }
-
-    actionsToMenuItems(actions, objectPath, view) {
-        return actions.map(action => {
-            const isActionGroup = Array.isArray(action);
-            if (isActionGroup) {
-                action = this.actionsToMenuItems(action, objectPath, view);
-            } else {
-                action.onItemClicked = () => {
-                    action.invoke(objectPath, view);
-                };
-            }
-
-            return action;
-        });
-    }
-
-    /**
-     * Show popup menu with description of item on hover
-     * @param {number} x x-coordinates for popup
-     * @param {number} y x-coordinates for popup
-     * @param {Array.<Action>|Array.<Array.<Action>>} actions collection of actions {@link Action} or collection of groups of actions {@link Action}
-     * @param {MenuOptions} [menuOptions] [Optional] The {@link MenuOptions} options for Menu
-     */
-    showSuperMenu(x, y, actions, menuOptions) {
-        this._createMenuComponent(x, y, actions, menuOptions);
-
-        this.menuComponent.showSuperMenu();
+  constructor(openmct) {
+    this.openmct = openmct;
+
+    this.menuPlacement = MENU_PLACEMENT;
+    this.showMenu = this.showMenu.bind(this);
+    this.showSuperMenu = this.showSuperMenu.bind(this);
+
+    this._clearMenuComponent = this._clearMenuComponent.bind(this);
+    this._showObjectMenu = this._showObjectMenu.bind(this);
+  }
+
+  /**
+   * Show popup menu
+   * @param {number} x x-coordinates for popup
+   * @param {number} y x-coordinates for popup
+   * @param {Array.<Action>|Array.<Array.<Action>>} actions collection of actions{@link Action} or collection of groups of actions {@link Action}
+   * @param {MenuOptions} [menuOptions] [Optional] The {@link MenuOptions} options for Menu
+   */
+  showMenu(x, y, items, menuOptions) {
+    this._createMenuComponent(x, y, items, menuOptions);
+
+    this.menuComponent.showMenu();
+  }
+
+  actionsToMenuItems(actions, objectPath, view) {
+    return actions.map((action) => {
+      const isActionGroup = Array.isArray(action);
+      if (isActionGroup) {
+        action = this.actionsToMenuItems(action, objectPath, view);
+      } else {
+        action.onItemClicked = () => action.invoke(objectPath, view);
+      }
+
+      return action;
+    });
+  }
+
+  /**
+   * Show popup menu with description of item on hover
+   * @param {number} x x-coordinates for popup
+   * @param {number} y x-coordinates for popup
+   * @param {Array.<Action>|Array.<Array.<Action>>} actions collection of actions {@link Action} or collection of groups of actions {@link Action}
+   * @param {MenuOptions} [menuOptions] [Optional] The {@link MenuOptions} options for Menu
+   */
+  showSuperMenu(x, y, actions, menuOptions) {
+    this._createMenuComponent(x, y, actions, menuOptions);
+
+    this.menuComponent.showSuperMenu();
+  }
+
+  _clearMenuComponent() {
+    this.menuComponent = undefined;
+    delete this.menuComponent;
+  }
+
+  _createMenuComponent(x, y, actions, menuOptions = {}) {
+    if (this.menuComponent) {
+      this.menuComponent.dismiss();
     }
 
-    _clearMenuComponent() {
-        this.menuComponent = undefined;
-        delete this.menuComponent;
-    }
-
-    _createMenuComponent(x, y, actions, menuOptions = {}) {
-        if (this.menuComponent) {
-            this.menuComponent.dismiss();
-        }
-
-        let options = {
-            x,
-            y,
-            actions,
-            ...menuOptions
-        };
-
-        this.menuComponent = new Menu(options);
-        this.menuComponent.once('destroy', this._clearMenuComponent);
-    }
-
-    _showObjectMenu(objectPath, x, y, actionsToBeIncluded) {
-        let applicableActions = this.openmct.actions._groupedAndSortedObjectActions(objectPath, actionsToBeIncluded);
-
-        this.showMenu(x, y, applicableActions);
-    }
+    let options = {
+      x,
+      y,
+      actions,
+      ...menuOptions
+    };
+
+    this.menuComponent = new Menu(options);
+    this.menuComponent.once('destroy', this._clearMenuComponent);
+  }
+
+  _showObjectMenu(objectPath, x, y, actionsToBeIncluded) {
+    let applicableActions = this.openmct.actions._groupedAndSortedObjectActions(
+      objectPath,
+      actionsToBeIncluded
+    );
+
+    this.showMenu(x, y, applicableActions);
+  }
 }
 export default MenuAPI;
diff --git a/src/api/menu/MenuAPISpec.js b/src/api/menu/MenuAPISpec.js
index 354254b8b33..3d7639e738f 100644
--- a/src/api/menu/MenuAPISpec.js
+++ b/src/api/menu/MenuAPISpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,194 +20,213 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import MenuAPI from './MenuAPI';
-import Menu from './menu';
-import { createOpenMct, createMouseEvent, resetApplicationState } from '../../utils/testing';
-
-describe ('The Menu API', () => {
-    let openmct;
-    let element;
-    let menuAPI;
-    let actionsArray;
-    let x;
-    let y;
-    let result;
-    let onDestroy;
-
-    beforeEach((done) => {
-        const appHolder = document.createElement('div');
-        appHolder.style.display = 'block';
-        appHolder.style.width = '1920px';
-        appHolder.style.height = '1080px';
-
-        openmct = createOpenMct();
-
-        element = document.createElement('div');
-        element.style.display = 'block';
-        element.style.width = '1920px';
-        element.style.height = '1080px';
-
-        openmct.on('start', done);
-        openmct.startHeadless(appHolder);
-
-        menuAPI = new MenuAPI(openmct);
-        actionsArray = [
-            {
-                key: 'test-css-class-1',
-                name: 'Test Action 1',
-                cssClass: 'icon-clock',
-                description: 'This is a test action',
-                onItemClicked: () => {
-                    result = 'Test Action 1 Invoked';
-                }
-            },
-            {
-                key: 'test-css-class-2',
-                name: 'Test Action 2',
-                cssClass: 'icon-clock',
-                description: 'This is a test action',
-                onItemClicked: () => {
-                    result = 'Test Action 2 Invoked';
-                }
-            }
-        ];
-        x = 8;
-        y = 16;
+import { nextTick } from 'vue';
+
+import { createMouseEvent, createOpenMct, resetApplicationState } from '../../utils/testing.js';
+import Menu from './menu.js';
+import MenuAPI from './MenuAPI.js';
+
+describe('The Menu API', () => {
+  let openmct;
+  let appHolder;
+  let menuAPI;
+  let actionsArray;
+  let result;
+  let menuElement;
+
+  const x = 8;
+  const y = 16;
+
+  const menuOptions = {
+    onDestroy: () => {
+      console.log('default onDestroy');
+    }
+  };
+
+  beforeEach((done) => {
+    appHolder = document.createElement('div');
+    appHolder.style.display = 'block';
+    appHolder.style.width = '1920px';
+    appHolder.style.height = '1080px';
+
+    openmct = createOpenMct();
+
+    openmct.on('start', done);
+    openmct.startHeadless();
+
+    menuAPI = new MenuAPI(openmct);
+    actionsArray = [
+      {
+        key: 'test-css-class-1',
+        name: 'Test Action 1',
+        cssClass: 'icon-clock',
+        description: 'This is a test action 1',
+        onItemClicked: () => {
+          result = 'Test Action 1 Invoked';
+        }
+      },
+      {
+        key: 'test-css-class-2',
+        name: 'Test Action 2',
+        cssClass: 'icon-clock',
+        description: 'This is a test action 2',
+        onItemClicked: () => {
+          result = 'Test Action 2 Invoked';
+        }
+      }
+    ];
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  describe('showMenu method', () => {
+    beforeAll(() => {
+      spyOn(menuOptions, 'onDestroy').and.callThrough();
     });
 
-    afterEach(() => {
-        return resetApplicationState(openmct);
-    });
+    it('creates an instance of Menu when invoked', (done) => {
+      menuOptions.onDestroy = done;
+
+      menuAPI.showMenu(x, y, actionsArray, menuOptions);
 
-    describe("showMenu method", () => {
-        it("creates an instance of Menu when invoked", () => {
-            menuAPI.showMenu(x, y, actionsArray);
+      expect(menuAPI.menuComponent).toBeInstanceOf(Menu);
+      document.body.click();
+    });
 
-            expect(menuAPI.menuComponent).toBeInstanceOf(Menu);
-        });
+    describe('creates a menu component', () => {
+      it('with all the actions passed in', (done) => {
+        menuOptions.onDestroy = done;
 
-        describe("creates a menu component", () => {
-            let menuComponent;
-            let vueComponent;
+        menuAPI.showMenu(x, y, actionsArray, menuOptions);
+        menuElement = document.querySelector('.c-menu');
+        expect(menuElement).toBeDefined();
 
-            beforeEach(() => {
-                onDestroy = jasmine.createSpy('onDestroy');
+        const listItems = menuElement.children[0].children;
 
-                const menuOptions = {
-                    onDestroy
-                };
+        expect(listItems.length).toEqual(actionsArray.length);
+        document.body.click();
+      });
 
-                menuAPI.showMenu(x, y, actionsArray, menuOptions);
-                vueComponent = menuAPI.menuComponent.component;
-                menuComponent = document.querySelector(".c-menu");
+      it('with click-able menu items, that will invoke the correct callBack', (done) => {
+        menuOptions.onDestroy = done;
 
-                spyOn(vueComponent, '$destroy');
-            });
+        menuAPI.showMenu(x, y, actionsArray, menuOptions);
 
-            it("renders a menu component in the expected x and y coordinates", () => {
-                let boundingClientRect = menuComponent.getBoundingClientRect();
-                let left = boundingClientRect.left;
-                let top = boundingClientRect.top;
+        menuElement = document.querySelector('.c-menu');
+        const listItem1 = menuElement.children[0].children[0];
 
-                expect(left).toEqual(x);
-                expect(top).toEqual(y);
-            });
+        listItem1.click();
 
-            it("with all the actions passed in", () => {
-                expect(menuComponent).toBeDefined();
+        expect(result).toEqual('Test Action 1 Invoked');
+      });
 
-                let listItems = menuComponent.children[0].children;
+      it('dismisses the menu when action is clicked on', (done) => {
+        menuOptions.onDestroy = done;
 
-                expect(listItems.length).toEqual(actionsArray.length);
-            });
+        menuAPI.showMenu(x, y, actionsArray, menuOptions);
 
-            it("with click-able menu items, that will invoke the correct callBacks", () => {
-                let listItem1 = menuComponent.children[0].children[0];
+        menuElement = document.querySelector('.c-menu');
+        const listItem1 = menuElement.children[0].children[0];
+        listItem1.click();
 
-                listItem1.click();
+        menuElement = document.querySelector('.c-menu');
 
-                expect(result).toEqual("Test Action 1 Invoked");
-            });
+        expect(menuElement).toBeNull();
+      });
 
-            it("dismisses the menu when action is clicked on", () => {
-                let listItem1 = menuComponent.children[0].children[0];
+      it('invokes the destroy method when menu is dismissed', (done) => {
+        menuOptions.onDestroy = done;
 
-                listItem1.click();
+        spyOn(menuAPI, '_clearMenuComponent').and.callThrough();
 
-                let menu = document.querySelector('.c-menu');
+        menuAPI.showMenu(x, y, actionsArray, menuOptions);
 
-                expect(menu).toBeNull();
-            });
+        document.body.click();
 
-            it("invokes the destroy method when menu is dismissed", () => {
-                document.body.click();
+        expect(menuAPI._clearMenuComponent).toHaveBeenCalled();
+      });
 
-                expect(vueComponent.$destroy).toHaveBeenCalled();
-            });
+      it('invokes the onDestroy callback if passed in', (done) => {
+        let count = 0;
+        menuOptions.onDestroy = () => {
+          count++;
+          expect(count).toEqual(1);
+          done();
+        };
 
-            it("invokes the onDestroy callback if passed in", () => {
-                document.body.click();
+        menuAPI.showMenu(x, y, actionsArray, menuOptions);
 
-                expect(onDestroy).toHaveBeenCalled();
-            });
-        });
+        document.body.click();
+      });
     });
+  });
 
-    describe("superMenu method", () => {
-        it("creates a superMenu", () => {
-            menuAPI.showSuperMenu(x, y, actionsArray);
+  describe('superMenu method', () => {
+    it('creates a superMenu', (done) => {
+      menuOptions.onDestroy = done;
 
-            const superMenu = document.querySelector('.c-super-menu__menu');
+      menuAPI.showSuperMenu(x, y, actionsArray, menuOptions);
+      menuElement = document.querySelector('.c-super-menu__menu');
+
+      expect(menuElement).not.toBeNull();
+      document.body.click();
+    });
 
-            expect(superMenu).not.toBeNull();
-        });
+    it('Mouse over a superMenu shows correct description', (done) => {
+      menuOptions.onDestroy = done;
 
-        it("Mouse over a superMenu shows correct description", (done) => {
-            menuAPI.showSuperMenu(x, y, actionsArray);
+      menuAPI.showSuperMenu(x, y, actionsArray, menuOptions);
+      menuElement = document.querySelector('.c-super-menu__menu');
 
-            const superMenu = document.querySelector('.c-super-menu__menu');
-            const superMenuItem = superMenu.querySelector('li');
-            const mouseOverEvent = createMouseEvent('mouseover');
+      const superMenuItem = menuElement.querySelector('li');
+      const mouseOverEvent = createMouseEvent('mouseover');
 
-            superMenuItem.dispatchEvent(mouseOverEvent);
-            const itemDescription = document.querySelector('.l-item-description__description');
+      superMenuItem.dispatchEvent(mouseOverEvent);
+      const itemDescription = document.querySelector('.l-item-description__description');
 
-            setTimeout(() => {
-                expect(itemDescription.innerText).toEqual(actionsArray[0].description);
-                expect(superMenu).not.toBeNull();
-                done();
-            }, 300);
-        });
+      nextTick(() => {
+        expect(menuElement).not.toBeNull();
+        expect(itemDescription.innerText).toEqual(actionsArray[0].description);
+
+        document.body.click();
+      });
     });
+  });
+
+  describe('Menu Placements', () => {
+    it('default menu position BOTTOM_RIGHT', (done) => {
+      menuOptions.onDestroy = done;
 
-    describe("Menu Placements", () => {
-        it("default menu position BOTTOM_RIGHT", () => {
-            menuAPI.showMenu(x, y, actionsArray);
+      menuAPI.showMenu(x, y, actionsArray, menuOptions);
+      menuElement = document.querySelector('.c-menu');
 
-            const menu = document.querySelector('.c-menu');
+      const boundingClientRect = menuElement.getBoundingClientRect();
+      const left = boundingClientRect.left;
+      const top = boundingClientRect.top;
 
-            const boundingClientRect = menu.getBoundingClientRect();
-            const left = boundingClientRect.left;
-            const top = boundingClientRect.top;
+      expect(left).toEqual(x);
+      expect(top).toEqual(y);
+
+      document.body.click();
+    });
 
-            expect(left).toEqual(x);
-            expect(top).toEqual(y);
-        });
+    it('menu position BOTTOM_RIGHT', (done) => {
+      menuOptions.onDestroy = done;
+      menuOptions.placement = openmct.menus.menuPlacement.BOTTOM_RIGHT;
 
-        it("menu position BOTTOM_RIGHT", () => {
-            const menuOptions = {
-                placement: openmct.menus.menuPlacement.BOTTOM_RIGHT
-            };
+      menuAPI.showMenu(x, y, actionsArray, menuOptions);
+      menuElement = document.querySelector('.c-menu');
 
-            menuAPI.showMenu(x, y, actionsArray, menuOptions);
+      const boundingClientRect = menuElement.getBoundingClientRect();
+      const left = boundingClientRect.left;
+      const top = boundingClientRect.top;
 
-            const menu = document.querySelector('.c-menu');
-            const boundingClientRect = menu.getBoundingClientRect();
-            const left = boundingClientRect.left;
-            const top = boundingClientRect.top;
+      expect(left).toEqual(x);
+      expect(top).toEqual(y);
 
-            expect(left).toEqual(x);
-            expect(top).toEqual(y);
-        });
+      document.body.click();
     });
+  });
 });
diff --git a/src/api/menu/components/Menu.vue b/src/api/menu/components/Menu.vue
deleted file mode 100644
index 50021641d2d..00000000000
--- a/src/api/menu/components/Menu.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-<div class="c-menu"
-     :class="options.menuClass"
->
-    <ul v-if="options.actions.length && options.actions[0].length">
-        <template
-            v-for="(actionGroups, index) in options.actions"
-        >
-            <li
-                v-for="action in actionGroups"
-                :key="action.name"
-                :class="[action.cssClass, action.isDisabled ? 'disabled' : '']"
-                :title="action.description"
-                @click="action.onItemClicked"
-            >
-                {{ action.name }}
-            </li>
-            <div
-                v-if="index !== options.actions.length - 1"
-                :key="index"
-                class="c-menu__section-separator"
-            >
-            </div>
-            <li
-                v-if="actionGroups.length === 0"
-                :key="index"
-            >
-                No actions defined.
-            </li>
-        </template>
-    </ul>
-
-    <ul v-else>
-        <li
-            v-for="action in options.actions"
-            :key="action.name"
-            :class="action.cssClass"
-            :title="action.description"
-            @click="action.onItemClicked"
-        >
-            {{ action.name }}
-        </li>
-        <li v-if="options.actions.length === 0">
-            No actions defined.
-        </li>
-    </ul>
-</div>
-</template>
-
-<script>
-export default {
-    inject: ['options']
-};
-</script>
diff --git a/src/api/menu/components/MenuComponent.vue b/src/api/menu/components/MenuComponent.vue
new file mode 100644
index 00000000000..d7d334f58bc
--- /dev/null
+++ b/src/api/menu/components/MenuComponent.vue
@@ -0,0 +1,80 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div :aria-label="optionsLabel" class="c-menu" :class="options.menuClass" :style="styleObject">
+    <ul v-if="options.actions.length && options.actions[0].length" role="menu">
+      <template v-for="(actionGroups, index) in options.actions" :key="index">
+        <div role="group">
+          <li
+            v-for="action in actionGroups"
+            :key="action.name"
+            role="menuitem"
+            :aria-disabled="action.isDisabled"
+            :class="action.cssClass"
+            :aria-label="action.name"
+            :title="action.description"
+            @click="action.onItemClicked"
+          >
+            {{ action.name }}
+          </li>
+          <div
+            v-if="index !== options.actions.length - 1"
+            :key="index"
+            role="separator"
+            class="c-menu__section-separator"
+          ></div>
+          <li v-if="actionGroups.length === 0" :key="index">No actions defined.</li>
+        </div>
+      </template>
+    </ul>
+
+    <ul v-else role="menu">
+      <li
+        v-for="action in options.actions"
+        :key="action.name"
+        role="menuitem"
+        :aria-disabled="action.isDisabled"
+        :class="action.cssClass"
+        :aria-label="action.name"
+        :title="action.description"
+        @click="action.onItemClicked"
+      >
+        {{ action.name }}
+      </li>
+      <li v-if="options.actions.length === 0">No actions defined.</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import popupMenuMixin from '../mixins/popupMenuMixin.js';
+export default {
+  mixins: [popupMenuMixin],
+  inject: ['options'],
+  computed: {
+    optionsLabel() {
+      const label = this.options.label ? `${this.options.label} Menu` : 'Menu';
+      return label;
+    }
+  }
+};
+</script>
diff --git a/src/api/menu/components/SuperMenu.vue b/src/api/menu/components/SuperMenu.vue
index 25f9b51f2de..1bbdaf940e0 100644
--- a/src/api/menu/components/SuperMenu.vue
+++ b/src/api/menu/components/SuperMenu.vue
@@ -1,88 +1,116 @@
-<template>
-<div class="c-menu"
-     :class="[options.menuClass, 'c-super-menu']"
->
-    <ul v-if="options.actions.length && options.actions[0].length"
-        class="c-super-menu__menu"
-    >
-        <template
-            v-for="(actionGroups, index) in options.actions"
-        >
-            <li
-                v-for="action in actionGroups"
-                :key="action.name"
-                :class="[action.cssClass, action.isDisabled ? 'disabled' : '']"
-                :title="action.description"
-                @click="action.onItemClicked"
-                @mouseover="toggleItemDescription(action)"
-                @mouseleave="toggleItemDescription()"
-            >
-                {{ action.name }}
-            </li>
-            <div
-                v-if="index !== options.actions.length - 1"
-                :key="index"
-                class="c-menu__section-separator"
-            >
-            </div>
-            <li
-                v-if="actionGroups.length === 0"
-                :key="index"
-            >
-                No actions defined.
-            </li>
-        </template>
-    </ul>
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
 
-    <ul v-else
-        class="c-super-menu__menu"
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div
+    :aria-label="optionsLabel"
+    class="c-menu"
+    :class="[options.menuClass, 'c-super-menu']"
+    :style="styleObject"
+  >
+    <ul
+      v-if="options.actions.length && options.actions[0].length"
+      role="menu"
+      class="c-super-menu__menu"
     >
-        <li
-            v-for="action in options.actions"
+      <template v-for="(actionGroups, index) in options.actions" :key="index">
+        <div role="group">
+          <li
+            v-for="action in actionGroups"
             :key="action.name"
+            role="menuitem"
+            :aria-disabled="action.isDisabled"
             :class="action.cssClass"
             :title="action.description"
             @click="action.onItemClicked"
             @mouseover="toggleItemDescription(action)"
             @mouseleave="toggleItemDescription()"
-        >
+          >
             {{ action.name }}
-        </li>
-        <li v-if="options.actions.length === 0">
-            No actions defined.
-        </li>
+          </li>
+          <div
+            v-if="index !== options.actions.length - 1"
+            :key="index"
+            role="separator"
+            class="c-menu__section-separator"
+          ></div>
+          <li v-if="actionGroups.length === 0" :key="index">No actions defined.</li>
+        </div></template
+      >
+    </ul>
+
+    <ul v-else class="c-super-menu__menu" role="menu">
+      <li
+        v-for="action in options.actions"
+        :key="action.name"
+        role="menuitem"
+        :class="action.cssClass"
+        :aria-label="action.name"
+        :title="action.description"
+        @click="action.onItemClicked"
+        @mouseover="toggleItemDescription(action)"
+        @mouseleave="toggleItemDescription()"
+      >
+        {{ action.name }}
+      </li>
+      <li v-if="options.actions.length === 0">No actions defined.</li>
     </ul>
 
     <div class="c-super-menu__item-description">
-        <div :class="['l-item-description__icon', 'bg-' + hoveredItem.cssClass]"></div>
-        <div class="l-item-description__name">
-            {{ hoveredItem.name }}
-        </div>
-        <div class="l-item-description__description">
-            {{ hoveredItem.description }}
-        </div>
+      <div :class="['l-item-description__icon', 'bg-' + hoveredItem.cssClass]"></div>
+      <div class="l-item-description__name">
+        {{ hoveredItem.name }}
+      </div>
+      <div class="l-item-description__description">
+        {{ hoveredItem.description }}
+      </div>
     </div>
-</div>
+  </div>
 </template>
-
 <script>
+import popupMenuMixin from '../mixins/popupMenuMixin.js';
 export default {
-    inject: ['options'],
-    data: function () {
-        return {
-            hoveredItem: {}
-        };
-    },
-    methods: {
-        toggleItemDescription(action = {}) {
-            const hoveredItem = {
-                name: action.name,
-                description: action.description,
-                cssClass: action.cssClass
-            };
+  mixins: [popupMenuMixin],
+  inject: ['options'],
+  data: function () {
+    return {
+      hoveredItem: {}
+    };
+  },
+  computed: {
+    optionsLabel() {
+      const label = this.options.label ? `${this.options.label} Super Menu` : 'Super Menu';
+      return label;
+    }
+  },
+  methods: {
+    toggleItemDescription(action = {}) {
+      const hoveredItem = {
+        name: action.name,
+        description: action.description,
+        cssClass: action.cssClass
+      };
 
-            this.hoveredItem = Object.assign({}, this.hoveredItem, hoveredItem);
-        }
+      this.hoveredItem = Object.assign({}, this.hoveredItem, hoveredItem);
     }
+  }
 };
 </script>
diff --git a/src/api/menu/menu.js b/src/api/menu/menu.js
index 44c6fe6db36..f6c5fd3c473 100644
--- a/src/api/menu/menu.js
+++ b/src/api/menu/menu.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,170 +20,92 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 import EventEmitter from 'EventEmitter';
-import MenuComponent from './components/Menu.vue';
+import mount from 'utils/mount';
+import { h } from 'vue';
+
+import MenuComponent from './components/MenuComponent.vue';
 import SuperMenuComponent from './components/SuperMenu.vue';
-import Vue from 'vue';
 
 export const MENU_PLACEMENT = {
-    TOP: 'top',
-    TOP_LEFT: 'top-left',
-    TOP_RIGHT: 'top-right',
-    BOTTOM: 'bottom',
-    BOTTOM_LEFT: 'bottom-left',
-    BOTTOM_RIGHT: 'bottom-right',
-    LEFT: 'left',
-    RIGHT: 'right'
+  TOP: 'top',
+  TOP_LEFT: 'top-left',
+  TOP_RIGHT: 'top-right',
+  BOTTOM: 'bottom',
+  BOTTOM_LEFT: 'bottom-left',
+  BOTTOM_RIGHT: 'bottom-right',
+  LEFT: 'left',
+  RIGHT: 'right'
 };
 
 class Menu extends EventEmitter {
-    constructor(options) {
-        super();
-
-        this.options = options;
-        if (options.onDestroy) {
-            this.once('destroy', options.onDestroy);
-        }
-
-        this.dismiss = this.dismiss.bind(this);
-        this.show = this.show.bind(this);
-        this.showMenu = this.showMenu.bind(this);
-        this.showSuperMenu = this.showSuperMenu.bind(this);
-    }
-
-    dismiss() {
-        this.emit('destroy');
-        document.body.removeChild(this.component.$el);
-        document.removeEventListener('click', this.dismiss);
-        this.component.$destroy();
-    }
-
-    show() {
-        this.component.$mount();
-        document.body.appendChild(this.component.$el);
-
-        let position = this._calculatePopupPosition(this.component.$el);
-
-        this.component.$el.style.left = `${position.x}px`;
-        this.component.$el.style.top = `${position.y}px`;
-
-        document.addEventListener('click', this.dismiss);
-    }
-
-    showMenu() {
-        this.component = new Vue({
-            components: {
-                MenuComponent
-            },
-            provide: {
-                options: this.options
-            },
-            template: '<menu-component />'
-        });
-
-        this.show();
-    }
+  constructor(options) {
+    super();
 
-    showSuperMenu() {
-        this.component = new Vue({
-            components: {
-                SuperMenuComponent
-            },
-            provide: {
-                options: this.options
-            },
-            template: '<super-menu-component />'
-        });
-
-        this.show();
+    this.options = options;
+    if (options.onDestroy) {
+      this.once('destroy', options.onDestroy);
     }
 
-    /**
-     * @private
-     */
-    _calculatePopupPosition(menuElement) {
-        let menuDimensions = menuElement.getBoundingClientRect();
-
-        if (!this.options.placement) {
-            this.options.placement = MENU_PLACEMENT.BOTTOM_RIGHT;
-        }
+    this.dismiss = this.dismiss.bind(this);
+    this.show = this.show.bind(this);
+    this.showMenu = this.showMenu.bind(this);
+    this.showSuperMenu = this.showSuperMenu.bind(this);
+  }
 
-        const menuPosition = this._getMenuPositionBasedOnPlacement(menuDimensions);
-
-        return this._preventMenuOverflow(menuPosition, menuDimensions);
+  dismiss() {
+    if (this.destroy) {
+      this.destroy();
+      this.destroy = null;
     }
+    document.removeEventListener('click', this.dismiss);
+    this.emit('destroy');
+  }
 
-    /**
-     * @private
-     */
-    _getMenuPositionBasedOnPlacement(menuDimensions) {
-        let eventPosX = this.options.x;
-        let eventPosY = this.options.y;
-
-        // Adjust popup menu based on placement
-        switch (this.options.placement) {
-        case MENU_PLACEMENT.TOP:
-            eventPosX = this.options.x - Math.floor(menuDimensions.width / 2);
-            eventPosY = this.options.y - menuDimensions.height;
-            break;
-        case MENU_PLACEMENT.BOTTOM:
-            eventPosX = this.options.x - Math.floor(menuDimensions.width / 2);
-            break;
-        case MENU_PLACEMENT.LEFT:
-            eventPosX = this.options.x - menuDimensions.width;
-            eventPosY = this.options.y - Math.floor(menuDimensions.height / 2);
-            break;
-        case MENU_PLACEMENT.RIGHT:
-            eventPosY = this.options.y - Math.floor(menuDimensions.height / 2);
-            break;
-        case MENU_PLACEMENT.TOP_LEFT:
-            eventPosX = this.options.x - menuDimensions.width;
-            eventPosY = this.options.y - menuDimensions.height;
-            break;
-        case MENU_PLACEMENT.TOP_RIGHT:
-            eventPosY = this.options.y - menuDimensions.height;
-            break;
-        case MENU_PLACEMENT.BOTTOM_LEFT:
-            eventPosX = this.options.x - menuDimensions.width;
-            break;
-        case MENU_PLACEMENT.BOTTOM_RIGHT:
-            break;
-        }
-
-        return {
-            x: eventPosX,
-            y: eventPosY
-        };
+  showMenu() {
+    if (this.destroy) {
+      return;
     }
-
-    /**
-     * @private
-     */
-    _preventMenuOverflow(menuPosition, menuDimensions) {
-        let { x: eventPosX, y: eventPosY } = menuPosition;
-        let overflowX = (eventPosX + menuDimensions.width) - document.body.clientWidth;
-        let overflowY = (eventPosY + menuDimensions.height) - document.body.clientHeight;
-
-        if (overflowX > 0) {
-            eventPosX = eventPosX - overflowX;
-        }
-
-        if (overflowY > 0) {
-            eventPosY = eventPosY - overflowY;
-        }
-
-        if (eventPosX < 0) {
-            eventPosX = 0;
-        }
-
-        if (eventPosY < 0) {
-            eventPosY = 0;
-        }
-
+    const { vNode, destroy } = mount({
+      render() {
+        return h(MenuComponent);
+      },
+      provide: {
+        options: this.options
+      }
+    });
+
+    this.el = vNode.el;
+    this.destroy = destroy;
+
+    this.show();
+  }
+
+  showSuperMenu() {
+    const { vNode, destroy } = mount({
+      data() {
         return {
-            x: eventPosX,
-            y: eventPosY
+          top: '0px',
+          left: '0px'
         };
-    }
+      },
+      render() {
+        return h(SuperMenuComponent);
+      },
+      provide: {
+        options: this.options
+      }
+    });
+
+    this.el = vNode.el;
+    this.destroy = destroy;
+
+    this.show();
+  }
+
+  show() {
+    document.body.appendChild(this.el);
+    document.addEventListener('click', this.dismiss);
+  }
 }
 
 export default Menu;
diff --git a/src/api/menu/mixins/popupMenuMixin.js b/src/api/menu/mixins/popupMenuMixin.js
new file mode 100644
index 00000000000..1788c1a3620
--- /dev/null
+++ b/src/api/menu/mixins/popupMenuMixin.js
@@ -0,0 +1,111 @@
+import { MENU_PLACEMENT } from '../menu.js';
+export default {
+  methods: {
+    /**
+     * @private
+     */
+    _calculatePopupPosition(menuElement) {
+      let menuDimensions = menuElement.getBoundingClientRect();
+
+      if (!this.options.placement) {
+        this.options.placement = MENU_PLACEMENT.BOTTOM_RIGHT;
+      }
+
+      const menuPosition = this._getMenuPositionBasedOnPlacement(menuDimensions);
+
+      return this._preventMenuOverflow(menuPosition, menuDimensions);
+    },
+    /**
+     * @private
+     */
+    _getMenuPositionBasedOnPlacement(menuDimensions) {
+      let eventPosX = this.options.x;
+      let eventPosY = this.options.y;
+
+      // Adjust popup menu based on placement
+      switch (this.options.placement) {
+        case MENU_PLACEMENT.TOP:
+          eventPosX = this.options.x - Math.floor(menuDimensions.width / 2);
+          eventPosY = this.options.y - menuDimensions.height;
+          break;
+        case MENU_PLACEMENT.BOTTOM:
+          eventPosX = this.options.x - Math.floor(menuDimensions.width / 2);
+          break;
+        case MENU_PLACEMENT.LEFT:
+          eventPosX = this.options.x - menuDimensions.width;
+          eventPosY = this.options.y - Math.floor(menuDimensions.height / 2);
+          break;
+        case MENU_PLACEMENT.RIGHT:
+          eventPosY = this.options.y - Math.floor(menuDimensions.height / 2);
+          break;
+        case MENU_PLACEMENT.TOP_LEFT:
+          eventPosX = this.options.x - menuDimensions.width;
+          eventPosY = this.options.y - menuDimensions.height;
+          break;
+        case MENU_PLACEMENT.TOP_RIGHT:
+          eventPosY = this.options.y - menuDimensions.height;
+          break;
+        case MENU_PLACEMENT.BOTTOM_LEFT:
+          eventPosX = this.options.x - menuDimensions.width;
+          break;
+        case MENU_PLACEMENT.BOTTOM_RIGHT:
+          break;
+      }
+
+      return {
+        x: eventPosX,
+        y: eventPosY
+      };
+    },
+    /**
+     * @private
+     */
+    _preventMenuOverflow(menuPosition, menuDimensions) {
+      let { x: eventPosX, y: eventPosY } = menuPosition;
+      let overflowX = eventPosX + menuDimensions.width - document.body.clientWidth;
+      let overflowY = eventPosY + menuDimensions.height - document.body.clientHeight;
+
+      if (overflowX > 0) {
+        eventPosX = eventPosX - overflowX;
+      }
+
+      if (overflowY > 0) {
+        eventPosY = eventPosY - overflowY;
+      }
+
+      if (eventPosX < 0) {
+        eventPosX = 0;
+      }
+
+      if (eventPosY < 0) {
+        eventPosY = 0;
+      }
+
+      return {
+        x: eventPosX,
+        y: eventPosY
+      };
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      const position = this._calculatePopupPosition(this.$el);
+      this.top = position.y;
+      this.left = position.x;
+    });
+  },
+  data() {
+    return {
+      top: '0px',
+      left: '0px'
+    };
+  },
+  computed: {
+    styleObject() {
+      return {
+        top: `${this.top}px`,
+        left: `${this.left}px`
+      };
+    }
+  }
+};
diff --git a/src/api/notifications/NotificationAPI.js b/src/api/notifications/NotificationAPI.js
index b5a1dbd2ee2..6a8136c38c1 100644
--- a/src/api/notifications/NotificationAPI.js
+++ b/src/api/notifications/NotificationAPI.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -30,8 +30,33 @@
  *
  * @namespace platform/api/notifications
  */
+import EventEmitter from 'eventemitter3';
 import moment from 'moment';
-import EventEmitter from 'EventEmitter';
+
+/**
+ * @typedef {object} NotificationProperties
+ * @property {function} dismiss Dismiss the notification
+ * @property {NotificationModel} model The Notification model
+ * @property {(progressPerc: number, progressText: string) => void} [progress] Update the progress of the notification
+ */
+
+/**
+ * @typedef {EventEmitter & NotificationProperties} Notification
+ */
+
+/**
+ * @typedef {object} NotificationLink
+ * @property {function} onClick The function to be called when the link is clicked
+ * @property {string} cssClass A CSS class name to style the link
+ * @property {string} text The text to be displayed for the link
+ */
+
+/**
+ * @typedef {object} NotificationOptions
+ * @property {number} [autoDismissTimeout] Milliseconds to wait before automatically dismissing the notification
+ * @property {boolean} [minimized] Allows for a notification to be minimized into the indicator by default
+ * @property {NotificationLink} [link] A link for the notification
+ */
 
 /**
  * A representation of a banner notification. Banner notifications
@@ -40,13 +65,17 @@ import EventEmitter from 'EventEmitter';
  * dialogs so that the same information can be provided in a dialog
  * and then minimized to a banner notification if needed, or vice-versa.
  *
+ * @see DialogModel
  * @typedef {object} NotificationModel
  * @property {string} message The message to be displayed by the notification
- * @property {number | 'unknown'} [progress] The progres of some ongoing task. Should be a number between 0 and 100, or
+ * @property {number | 'unknown'} [progress] The progress of some ongoing task. Should be a number between 0 and 100, or
  * with the string literal 'unknown'.
  * @property {string} [progressText] A message conveying progress of some ongoing task.
-
- * @see DialogModel
+ * @property {string} [severity] The severity of the notification. Should be one of 'info', 'alert', or 'error'.
+ * @property {string} [timestamp] The time at which the notification was created. Should be a string in ISO 8601 format.
+ * @property {boolean} [minimized] Whether or not the notification has been minimized
+ * @property {boolean} [autoDismiss] Whether the notification should be automatically dismissed after a short period of time.
+ * @property {NotificationOptions} options The notification options
  */
 
 const DEFAULT_AUTO_DISMISS_TIMEOUT = 3000;
@@ -55,123 +84,126 @@ const MINIMIZE_ANIMATION_TIMEOUT = 300;
 /**
  * The notification service is responsible for informing the user of
  * events via the use of banner notifications.
- * @memberof ui/notification
- * @constructor */
-
+ */
 export default class NotificationAPI extends EventEmitter {
-    constructor() {
-        super();
-        this.notifications = [];
-        this.highest = { severity: "info" };
-
-        /*
-        * A context in which to hold the active notification and a
-        * handle to its timeout.
-        */
-        this.activeNotification = undefined;
-    }
+  constructor() {
+    super();
+    /** @type {Notification[]} */
+    this.notifications = [];
+    /** @type {{severity: "info" | "alert" | "error"}} */
+    this.highest = { severity: 'info' };
 
     /**
-     * Info notifications are low priority informational messages for the user. They will be auto-destroy after a brief
-     * period of time.
-     * @param {string} message The message to display to the user
-     * @param {Object} [options] object with following properties
-     *      autoDismissTimeout: {number} in miliseconds to automatically dismisses notification
-     *      link: {Object} Add a link to notifications for navigation
-     *              onClick: callback function
-     *              cssClass: css class name to add style on link
-     *              text: text to display for link
-     * @returns {InfoNotification}
+     * A context in which to hold the active notification and a
+     * handle to its timeout.
+     * @type {Notification | undefined}
      */
-    info(message, options = {}) {
-        let notificationModel = {
-            message: message,
-            autoDismiss: true,
-            severity: "info",
-            options
-        };
-
-        return this._notify(notificationModel);
+    this.activeNotification = undefined;
+  }
+
+  /**
+   * Info notifications are low priority informational messages for the user. They will be auto-destroy after a brief
+   * period of time.
+   * @param {string} message The message to display to the user
+   * @param {NotificationOptions} [options] The notification options
+   * @returns {Notification}
+   */
+  info(message, options = {}) {
+    /** @type {NotificationModel} */
+    const notificationModel = {
+      message: message,
+      autoDismiss: true,
+      severity: 'info',
+      options
+    };
+
+    return this._notify(notificationModel);
+  }
+
+  /**
+   * Present an alert to the user.
+   * @param {string} message The message to display to the user.
+   * @param {NotificationOptions} [options] object with following properties
+   *      autoDismissTimeout: {number} in milliseconds to automatically dismisses notification
+   *      link: {Object} Add a link to notifications for navigation
+   *              onClick: callback function
+   *              cssClass: css class name to add style on link
+   *              text: text to display for link
+   * @returns {Notification}
+   */
+  alert(message, options = {}) {
+    const notificationModel = {
+      message: message,
+      severity: 'alert',
+      options
+    };
+
+    return this._notify(notificationModel);
+  }
+
+  /**
+   * Present an error message to the user
+   * @param {string} message
+   * @param {Object} [options] object with following properties
+   *      autoDismissTimeout: {number} in milliseconds to automatically dismisses notification
+   *      link: {Object} Add a link to notifications for navigation
+   *              onClick: callback function
+   *              cssClass: css class name to add style on link
+   *              text: text to display for link
+   * @returns {Notification}
+   */
+  error(message, options = {}) {
+    let notificationModel = {
+      message: message,
+      severity: 'error',
+      options
+    };
+
+    return this._notify(notificationModel);
+  }
+
+  /**
+   * Create a new progress notification. These notifications will contain a progress bar.
+   * @param {string} message
+   * @param {number | null} progressPerc A value between 0 and 100, or null.
+   * @param {string} [progressText] Text description of progress (eg. "10 of 20 objects copied").
+   */
+  progress(message, progressPerc, progressText) {
+    let notificationModel = {
+      message: message,
+      progressPerc: progressPerc,
+      progressText: progressText,
+      severity: 'info',
+      options: {}
+    };
+
+    return this._notify(notificationModel);
+  }
+
+  dismissAllNotifications() {
+    this.notifications = [];
+    this.emit('dismiss-all');
+  }
+
+  /**
+   * Minimize a notification. The notification will still be available
+   * from the notification list. Typically notifications with a
+   * severity of 'info' should not be minimized, but rather
+   * dismissed.
+   *
+   * @private
+   * @param {Notification | undefined} notification
+   */
+  _minimize(notification) {
+    if (!notification) {
+      return;
     }
 
-    /**
-     * Present an alert to the user.
-     * @param {string} message The message to display to the user.
-     * @param {Object} [options] object with following properties
-     *      autoDismissTimeout: {number} in miliseconds to automatically dismisses notification
-     *      link: {Object} Add a link to notifications for navigation
-     *              onClick: callback function
-     *              cssClass: css class name to add style on link
-     *              text: text to display for link
-     * @returns {Notification}
-     */
-    alert(message, options = {}) {
-        let notificationModel = {
-            message: message,
-            severity: "alert",
-            options
-        };
-
-        return this._notify(notificationModel);
-    }
+    //Check this is a known notification
+    let index = this.notifications.indexOf(notification);
 
-    /**
-     * Present an error message to the user
-     * @param {string} message
-     * @param {Object} [options] object with following properties
-     *      autoDismissTimeout: {number} in miliseconds to automatically dismisses notification
-     *      link: {Object} Add a link to notifications for navigation
-     *              onClick: callback function
-     *              cssClass: css class name to add style on link
-     *              text: text to display for link
-     * @returns {Notification}
-     */
-    error(message, options = {}) {
-        let notificationModel = {
-            message: message,
-            severity: "error",
-            options
-        };
-
-        return this._notify(notificationModel);
-    }
-
-    /**
-     * Create a new progress notification. These notifications will contain a progress bar.
-     * @param {string} message
-     * @param {number | 'unknown'} progressPerc A value between 0 and 100, or the string 'unknown'.
-     * @param {string} [progressText] Text description of progress (eg. "10 of 20 objects copied").
-     */
-    progress(message, progressPerc, progressText) {
-        let notificationModel = {
-            message: message,
-            progressPerc: progressPerc,
-            progressText: progressText,
-            severity: "info"
-        };
-
-        return this._notify(notificationModel);
-    }
-
-    dismissAllNotifications() {
-        this.notifications = [];
-        this.emit('dismiss-all');
-    }
-
-    /**
-     * Minimize a notification. The notification will still be available
-     * from the notification list. Typically notifications with a
-     * severity of 'info' should not be minimized, but rather
-     * dismissed.
-     *
-     * @private
-     */
-    _minimize(notification) {
-        //Check this is a known notification
-        let index = this.notifications.indexOf(notification);
-
-        if (this.activeTimeout) {
-            /*
+    if (this.activeTimeout) {
+      /*
                 Method can be called manually (clicking dismiss) or
                 automatically from an auto-timeout. this.activeTimeout
                 acts as a semaphore to prevent race conditions. Cancel any
@@ -179,120 +211,127 @@ export default class NotificationAPI extends EventEmitter {
                 has shortcut an active auto-dismiss), and clear the
                 semaphore.
                 */
-            clearTimeout(this.activeTimeout);
-            delete this.activeTimeout;
-        }
-
-        if (index >= 0) {
-            notification.model.minimized = true;
-            notification.emit('minimized');
-            //Add a brief timeout before showing the next notification
-            // in order to allow the minimize animation to run through.
-            setTimeout(() => {
-                notification.emit('destroy');
-                this._setActiveNotification(this._selectNextNotification());
-            }, MINIMIZE_ANIMATION_TIMEOUT);
-        }
+      clearTimeout(this.activeTimeout);
+      delete this.activeTimeout;
     }
 
-    /**
-     * Completely removes a notification. This will dismiss it from the
-     * message banner and remove it from the list of notifications.
-     * Typically only notifications with a severity of info should be
-     * dismissed. If you're not sure whether to dismiss or minimize a
-     * notification, use {@link Notification#dismissOrMinimize}.
-     * dismiss
-     *
-     * @private
-     */
-    _dismiss(notification) {
-        //Check this is a known notification
-        let index = this.notifications.indexOf(notification);
-
-        if (this.activeTimeout) {
-            /* Method can be called manually (clicking dismiss) or
-                * automatically from an auto-timeout. this.activeTimeout
-                * acts as a semaphore to prevent race conditions. Cancel any
-                * timeout in progress (for the case where a manual dismiss
-                * has shortcut an active auto-dismiss), and clear the
-                * semaphore.
-                */
-
-            clearTimeout(this.activeTimeout);
-            delete this.activeTimeout;
-        }
-
-        if (index >= 0) {
-            this.notifications.splice(index, 1);
-        }
-
-        this._setActiveNotification(this._selectNextNotification());
-        this._setHighestSeverity();
+    if (index >= 0) {
+      notification.model.minimized = true;
+      notification.emit('minimized');
+      //Add a brief timeout before showing the next notification
+      // in order to allow the minimize animation to run through.
+      setTimeout(() => {
         notification.emit('destroy');
+        this._setActiveNotification(this._selectNextNotification());
+      }, MINIMIZE_ANIMATION_TIMEOUT);
     }
-
-    /**
-     * Depending on the severity of the notification will selectively
-     * dismiss or minimize where appropriate.
-     *
-     * @private
-     */
-    _dismissOrMinimize(notification) {
-        let model = notification.model;
-        if (model.severity === "info") {
-            this._dismiss(notification);
-        } else {
-            this._minimize(notification);
-        }
-    }
-
-    /**
-     * @private
-     */
-    _setHighestSeverity() {
-        let severity = {
-            "info": 1,
-            "alert": 2,
-            "error": 3
-        };
-        this.highest.severity = this.notifications.reduce((previous, notification) => {
-            if (severity[notification.model.severity] > severity[previous]) {
-                return notification.model.severity;
-            } else {
-                return previous;
-            }
-        }, "info");
+  }
+
+  /**
+   * Completely removes a notification. This will dismiss it from the
+   * message banner and remove it from the list of notifications.
+   * Typically only notifications with a severity of info should be
+   * dismissed. If you're not sure whether to dismiss or minimize a
+   * notification, use {@link Notification#dismissOrMinimize}.
+   * dismiss
+   *
+   * @private
+   * @param {Notification | undefined} notification
+   */
+  _dismiss(notification) {
+    if (!notification) {
+      return;
     }
 
-    /**
-     * Notifies the user of an event. If there is a banner notification
-     * already active, then it will be dismissed or minimized automatically,
-     * and the provided notification displayed in its place.
-     *
-     * @param {NotificationModel} notificationModel The notification to
-     * display
-     * @returns {Notification} the provided notification decorated with
-     * functions to {@link Notification#dismiss} or {@link Notification#minimize}
-     */
-    _notify(notificationModel) {
-        let notification;
-        let activeNotification = this.activeNotification;
+    //Check this is a known notification
+    let index = this.notifications.indexOf(notification);
 
-        notificationModel.severity = notificationModel.severity || "info";
-        notificationModel.timestamp = moment.utc().format('YYYY-MM-DD hh:mm:ss.ms');
+    if (this.activeTimeout) {
+      /* Method can be called manually (clicking dismiss) or
+       * automatically from an auto-timeout. this.activeTimeout
+       * acts as a semaphore to prevent race conditions. Cancel any
+       * timeout in progress (for the case where a manual dismiss
+       * has shortcut an active auto-dismiss), and clear the
+       * semaphore.
+       */
 
-        notification = this._createNotification(notificationModel);
+      clearTimeout(this.activeTimeout);
+      delete this.activeTimeout;
+    }
 
-        this.notifications.push(notification);
-        this._setHighestSeverity();
+    if (index >= 0) {
+      this.notifications.splice(index, 1);
+    }
 
-        /*
+    this._setActiveNotification(this._selectNextNotification());
+    this._setHighestSeverity();
+    notification.emit('destroy');
+  }
+
+  /**
+   * Depending on the severity of the notification will selectively
+   * dismiss or minimize where appropriate.
+   *
+   * @private
+   * @param {Notification | undefined} notification
+   */
+  _dismissOrMinimize(notification) {
+    let model = notification?.model;
+    if (model?.severity === 'info') {
+      this._dismiss(notification);
+    } else {
+      this._minimize(notification);
+    }
+  }
+
+  /**
+   * @private
+   */
+  _setHighestSeverity() {
+    let severity = {
+      info: 1,
+      alert: 2,
+      error: 3
+    };
+
+    this.highest.severity = this.notifications.reduce((previous, notification) => {
+      if (severity[notification.model.severity] > severity[previous]) {
+        return notification.model.severity;
+      } else {
+        return previous;
+      }
+    }, 'info');
+  }
+
+  /**
+   * Notifies the user of an event. If there is a banner notification
+   * already active, then it will be dismissed or minimized automatically,
+   * and the provided notification displayed in its place.
+   *
+   * @param {NotificationModel} notificationModel The notification to
+   * display
+   * @returns {Notification} the provided notification decorated with
+   * functions to {@link Notification#dismiss} or {@link Notification#minimize}
+   */
+  _notify(notificationModel) {
+    let notification;
+    let activeNotification = this.activeNotification;
+
+    notificationModel.severity = notificationModel.severity || 'info';
+    notificationModel.timestamp = moment.utc().format('YYYY-MM-DD hh:mm:ss.ms');
+
+    notification = this._createNotification(notificationModel);
+
+    this.notifications.push(notification);
+    this._setHighestSeverity();
+
+    /*
         Check if there is already an active (ie. visible) notification
             */
-        if (!this.activeNotification) {
-            this._setActiveNotification(notification);
-        } else if (!this.activeTimeout) {
-            /*
+    if (!this.activeNotification && !notification?.model?.options?.minimized) {
+      this._setActiveNotification(notification);
+    } else if (!this.activeTimeout) {
+      /*
                 If there is already an active notification, time it out. If it's
                 already got a timeout in progress (either because it has had
                 timeout forced because of a queue of messages, or it had an
@@ -302,80 +341,86 @@ export default class NotificationAPI extends EventEmitter {
                 This notification has been added to queue and will be
                 serviced as soon as possible.
                 */
-            this.activeTimeout = setTimeout(() => {
-                this._dismissOrMinimize(activeNotification);
-            }, DEFAULT_AUTO_DISMISS_TIMEOUT);
-        }
+      this.activeTimeout = setTimeout(() => {
+        this._dismissOrMinimize(activeNotification);
+      }, DEFAULT_AUTO_DISMISS_TIMEOUT);
+    }
 
-        return notification;
+    return notification;
+  }
+
+  /**
+   * @private
+   * @param {NotificationModel} notificationModel
+   * @returns {Notification}
+   */
+  _createNotification(notificationModel) {
+    /** @type {Notification} */
+    let notification = new EventEmitter();
+    notification.model = notificationModel;
+    notification.dismiss = () => {
+      this._dismiss(notification);
+    };
+
+    if (Object.prototype.hasOwnProperty.call(notificationModel, 'progressPerc')) {
+      notification.progress = (progressPerc, progressText) => {
+        notification.model.progressPerc = progressPerc;
+        notification.model.progressText = progressText;
+        notification.emit('progress', progressPerc, progressText);
+      };
     }
 
-    /**
-     * @private
-     */
-    _createNotification(notificationModel) {
-        let notification = new EventEmitter();
-        notification.model = notificationModel;
-        notification.dismiss = () => {
-            this._dismiss(notification);
-        };
-
-        if (Object.prototype.hasOwnProperty.call(notificationModel, 'progressPerc')) {
-            notification.progress = (progressPerc, progressText) => {
-                notification.model.progressPerc = progressPerc;
-                notification.model.progressText = progressText;
-                notification.emit('progress', progressPerc, progressText);
-            };
-        }
+    return notification;
+  }
 
-        return notification;
-    }
+  /**
+   * @private
+   * @param {Notification | undefined} notification
+   */
+  _setActiveNotification(notification) {
+    this.activeNotification = notification;
 
-    /**
-     * @private
-     */
-    _setActiveNotification(notification) {
-        this.activeNotification = notification;
-
-        if (!notification) {
-            delete this.activeTimeout;
-
-            return;
-        }
-
-        this.emit('notification', notification);
-
-        if (notification.model.autoDismiss || this._selectNextNotification()) {
-            const autoDismissTimeout = notification.model.options.autoDismissTimeout
-                || DEFAULT_AUTO_DISMISS_TIMEOUT;
-            this.activeTimeout = setTimeout(() => {
-                this._dismissOrMinimize(notification);
-            }, autoDismissTimeout);
-        } else {
-            delete this.activeTimeout;
-        }
+    if (!notification) {
+      delete this.activeTimeout;
+
+      return;
     }
 
-    /**
-     * Used internally by the NotificationService
-     *
-     * @private
-     */
-    _selectNextNotification() {
-        let notification;
-        let i = 0;
+    this.emit('notification', notification);
 
-        /*
+    if (notification.model.autoDismiss || this._selectNextNotification()) {
+      const autoDismissTimeout =
+        notification.model.options.autoDismissTimeout || DEFAULT_AUTO_DISMISS_TIMEOUT;
+      this.activeTimeout = setTimeout(() => {
+        this._dismissOrMinimize(notification);
+      }, autoDismissTimeout);
+    } else {
+      delete this.activeTimeout;
+    }
+  }
+
+  /**
+   * Used internally by the NotificationService
+   *
+   * @private
+   */
+  _selectNextNotification() {
+    let notification;
+    let i = 0;
+
+    /*
         Loop through the notifications queue and find the first one that
         has not already been minimized (manually or otherwise).
             */
-        for (; i < this.notifications.length; i++) {
-            notification = this.notifications[i];
-
-            if (!notification.model.minimized
-                && notification !== this.activeNotification) {
-                return notification;
-            }
-        }
+    for (; i < this.notifications.length; i++) {
+      notification = this.notifications[i];
+
+      const isNotificationMinimized =
+        notification.model.minimized || notification?.model?.options?.minimized;
+
+      if (!isNotificationMinimized && notification !== this.activeNotification) {
+        return notification;
+      }
     }
+  }
 }
diff --git a/src/api/notifications/NotificationAPISpec.js b/src/api/notifications/NotificationAPISpec.js
index 93c03f204fb..b97abd50131 100644
--- a/src/api/notifications/NotificationAPISpec.js
+++ b/src/api/notifications/NotificationAPISpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,135 +20,153 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import NotificationAPI from './NotificationAPI';
+import NotificationAPI from './NotificationAPI.js';
 
-describe('The Notifiation API', () => {
-    let notificationAPIInstance;
-    let defaultTimeout = 4000;
+describe('The Notification API', () => {
+  let notificationAPIInstance;
+  let defaultTimeout = 4000;
+
+  beforeAll(() => {
+    notificationAPIInstance = new NotificationAPI();
+  });
+
+  describe('the info method', () => {
+    let message = 'Example Notification Message';
+    let severity = 'info';
+    let notificationModel;
+
+    beforeAll(() => {
+      notificationModel = notificationAPIInstance.info(message).model;
+    });
+
+    afterAll(() => {
+      notificationAPIInstance.dismissAllNotifications();
+    });
+
+    it('shows a string message with info severity', () => {
+      expect(notificationModel.message).toEqual(message);
+      expect(notificationModel.severity).toEqual(severity);
+    });
+
+    it('auto dismisses the notification after a brief timeout', (done) => {
+      window.setTimeout(() => {
+        expect(notificationAPIInstance.notifications.length).toEqual(0);
+        done();
+      }, defaultTimeout);
+    });
+  });
+
+  describe('the alert method', () => {
+    let message = 'Example alert message';
+    let severity = 'alert';
+    let notificationModel;
+
+    beforeAll(() => {
+      notificationModel = notificationAPIInstance.alert(message).model;
+    });
+
+    afterAll(() => {
+      notificationAPIInstance.dismissAllNotifications();
+    });
+
+    it('shows a string message, with alert severity', () => {
+      expect(notificationModel.message).toEqual(message);
+      expect(notificationModel.severity).toEqual(severity);
+    });
+
+    it('does not auto dismiss the notification', (done) => {
+      window.setTimeout(() => {
+        expect(notificationAPIInstance.notifications.length).toEqual(1);
+        done();
+      }, defaultTimeout);
+    });
+  });
+
+  describe('the error method', () => {
+    let message = 'Example error message';
+    let severity = 'error';
+    let notificationModel;
+
+    beforeAll(() => {
+      notificationModel = notificationAPIInstance.error(message).model;
+    });
+
+    afterAll(() => {
+      notificationAPIInstance.dismissAllNotifications();
+    });
+
+    it('shows a string message, with severity error', () => {
+      expect(notificationModel.message).toEqual(message);
+      expect(notificationModel.severity).toEqual(severity);
+    });
+
+    it('does not auto dismiss the notification', (done) => {
+      window.setTimeout(() => {
+        expect(notificationAPIInstance.notifications.length).toEqual(1);
+        done();
+      }, defaultTimeout);
+    });
+  });
+
+  describe('the error method notification', () => {
+    let message = 'Minimized error message';
+
+    afterAll(() => {
+      notificationAPIInstance.dismissAllNotifications();
+    });
+
+    it('is not shown if configured to show minimized', (done) => {
+      notificationAPIInstance.activeNotification = undefined;
+      notificationAPIInstance.error(message, { minimized: true });
+      window.setTimeout(() => {
+        expect(notificationAPIInstance.notifications.length).toEqual(1);
+        expect(notificationAPIInstance.activeNotification).toEqual(undefined);
+        done();
+      }, defaultTimeout);
+    });
+  });
+
+  describe('the progress method', () => {
+    let title = 'This is a progress notification';
+    let message1 = 'Example progress message 1';
+    let message2 = 'Example progress message 2';
+    let percentage1 = 50;
+    let percentage2 = 99.9;
+    let severity = 'info';
+    let notification;
+    let updatedPercentage;
+    let updatedMessage;
 
     beforeAll(() => {
-        notificationAPIInstance = new NotificationAPI();
-    });
-
-    describe('the info method', () => {
-        let message = 'Example Notification Message';
-        let severity = 'info';
-        let notificationModel;
-
-        beforeAll(() => {
-            notificationModel = notificationAPIInstance.info(message).model;
-        });
-
-        afterAll(() => {
-            notificationAPIInstance.dismissAllNotifications();
-        });
-
-        it('shows a string message with info severity', () => {
-            expect(notificationModel.message).toEqual(message);
-            expect(notificationModel.severity).toEqual(severity);
-        });
-
-        it('auto dismisses the notification after a brief timeout', (done) => {
-            window.setTimeout(() => {
-                expect(notificationAPIInstance.notifications.length).toEqual(0);
-                done();
-            }, defaultTimeout);
-        });
-    });
-
-    describe('the alert method', () => {
-        let message = 'Example alert message';
-        let severity = 'alert';
-        let notificationModel;
-
-        beforeAll(() => {
-            notificationModel = notificationAPIInstance.alert(message).model;
-        });
-
-        afterAll(() => {
-            notificationAPIInstance.dismissAllNotifications();
-        });
-
-        it('shows a string message, with alert severity', () => {
-            expect(notificationModel.message).toEqual(message);
-            expect(notificationModel.severity).toEqual(severity);
-        });
-
-        it('does not auto dismiss the notification', (done) => {
-            window.setTimeout(() => {
-                expect(notificationAPIInstance.notifications.length).toEqual(1);
-                done();
-            }, defaultTimeout);
-        });
-    });
-
-    describe('the error method', () => {
-        let message = 'Example error message';
-        let severity = 'error';
-        let notificationModel;
-
-        beforeAll(() => {
-            notificationModel = notificationAPIInstance.error(message).model;
-        });
-
-        afterAll(() => {
-            notificationAPIInstance.dismissAllNotifications();
-        });
-
-        it('shows a string message, with severity error', () => {
-            expect(notificationModel.message).toEqual(message);
-            expect(notificationModel.severity).toEqual(severity);
-        });
-
-        it('does not auto dismiss the notification', (done) => {
-            window.setTimeout(() => {
-                expect(notificationAPIInstance.notifications.length).toEqual(1);
-                done();
-            }, defaultTimeout);
-        });
-    });
-
-    describe('the progress method', () => {
-        let title = 'This is a progress notification';
-        let message1 = 'Example progress message 1';
-        let message2 = 'Example progress message 2';
-        let percentage1 = 50;
-        let percentage2 = 99.9;
-        let severity = 'info';
-        let notification;
-        let updatedPercentage;
-        let updatedMessage;
-
-        beforeAll(() => {
-            notification = notificationAPIInstance.progress(title, percentage1, message1);
-            notification.on('progress', (percentage, text) => {
-                updatedPercentage = percentage;
-                updatedMessage = text;
-            });
-        });
-
-        afterAll(() => {
-            notificationAPIInstance.dismissAllNotifications();
-        });
-
-        it ('shows a notification with a message, progress message, percentage and info severity', () => {
-            expect(notification.model.message).toEqual(title);
-            expect(notification.model.severity).toEqual(severity);
-            expect(notification.model.progressText).toEqual(message1);
-            expect(notification.model.progressPerc).toEqual(percentage1);
-        });
-
-        it ('allows dynamically updating the progress attributes', () => {
-            notification.progress(percentage2, message2);
-
-            expect(updatedPercentage).toEqual(percentage2);
-            expect(updatedMessage).toEqual(message2);
-        });
-
-        it ('allows dynamically dismissing of progress notification', () => {
-            notification.dismiss();
-
-            expect(notificationAPIInstance.notifications.length).toEqual(0);
-        });
+      notification = notificationAPIInstance.progress(title, percentage1, message1);
+      notification.on('progress', (percentage, text) => {
+        updatedPercentage = percentage;
+        updatedMessage = text;
+      });
+    });
+
+    afterAll(() => {
+      notificationAPIInstance.dismissAllNotifications();
+    });
+
+    it('shows a notification with a message, progress message, percentage and info severity', () => {
+      expect(notification.model.message).toEqual(title);
+      expect(notification.model.severity).toEqual(severity);
+      expect(notification.model.progressText).toEqual(message1);
+      expect(notification.model.progressPerc).toEqual(percentage1);
+    });
+
+    it('allows dynamically updating the progress attributes', () => {
+      notification.progress(percentage2, message2);
+
+      expect(updatedPercentage).toEqual(percentage2);
+      expect(updatedMessage).toEqual(message2);
+    });
+
+    it('allows dynamically dismissing of progress notification', () => {
+      notification.dismiss();
+
+      expect(notificationAPIInstance.notifications.length).toEqual(0);
     });
+  });
 });
diff --git a/src/api/objects/ConflictError.js b/src/api/objects/ConflictError.js
new file mode 100644
index 00000000000..bf996e96e69
--- /dev/null
+++ b/src/api/objects/ConflictError.js
@@ -0,0 +1 @@
+export default class ConflictError extends Error {}
diff --git a/src/api/objects/InMemorySearchProvider.js b/src/api/objects/InMemorySearchProvider.js
new file mode 100644
index 00000000000..69161b76e42
--- /dev/null
+++ b/src/api/objects/InMemorySearchProvider.js
@@ -0,0 +1,586 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { v4 as uuid } from 'uuid';
+
+class InMemorySearchProvider {
+  /**
+   * A search service which searches through domain objects in
+   * the filetree without using external search implementations.
+   *
+   * @constructor
+   * @param {Object} openmct
+   */
+  constructor(openmct) {
+    /**
+     * Maximum number of concurrent index requests to allow.
+     */
+    this.MAX_CONCURRENT_REQUESTS = 100;
+    /**
+     * If max results is not specified in query, use this as default.
+     */
+    this.DEFAULT_MAX_RESULTS = 100;
+    this.openmct = openmct;
+    this.indexedIds = {};
+    this.indexedCompositions = {};
+    this.idsToIndex = [];
+    this.pendingIndex = {};
+    this.pendingRequests = 0;
+    this.worker = null;
+
+    /**
+     * If we don't have SharedWorkers available (e.g., iOS)
+     */
+    this.localIndexedDomainObjects = {};
+    this.localIndexedAnnotationsByDomainObject = {};
+    this.localIndexedAnnotationsByTag = {};
+
+    this.pendingQueries = {};
+    this.onWorkerMessage = this.onWorkerMessage.bind(this);
+    this.onWorkerMessageError = this.onWorkerMessageError.bind(this);
+    this.localSearchForObjects = this.localSearchForObjects.bind(this);
+    this.localSearchForAnnotations = this.localSearchForAnnotations.bind(this);
+    this.localSearchForTags = this.localSearchForTags.bind(this);
+    this.onAnnotationCreation = this.onAnnotationCreation.bind(this);
+    this.onCompositionAdded = this.onCompositionAdded.bind(this);
+    this.onCompositionRemoved = this.onCompositionRemoved.bind(this);
+    this.onerror = this.onWorkerError.bind(this);
+    this.startIndexing = this.startIndexing.bind(this);
+
+    this.openmct.on('start', this.startIndexing);
+    this.openmct.on('destroy', () => {
+      if (this.worker && this.worker.port) {
+        this.worker.onerror = null;
+        this.worker.port.onmessage = null;
+        this.worker.port.onmessageerror = null;
+        this.worker.port.close();
+      }
+
+      Object.keys(this.indexedCompositions).forEach((keyString) => {
+        const composition = this.indexedCompositions[keyString];
+        composition.off('add', this.onCompositionAdded);
+        composition.off('remove', this.onCompositionRemoved);
+      });
+
+      this.destroyObservers(this.indexedIds);
+      this.destroyObservers(this.indexedCompositions);
+    });
+  }
+
+  startIndexing() {
+    const rootObject = this.openmct.objects.rootProvider.rootObject;
+
+    this.searchTypes = this.openmct.objects.SEARCH_TYPES;
+
+    this.supportedSearchTypes = [
+      this.searchTypes.OBJECTS,
+      this.searchTypes.ANNOTATIONS,
+      this.searchTypes.TAGS
+    ];
+
+    this.scheduleForIndexing(rootObject.identifier);
+
+    this.indexAnnotations();
+
+    if (typeof SharedWorker !== 'undefined') {
+      this.worker = this.startSharedWorker();
+    } else {
+      // we must be on iOS
+    }
+
+    this.openmct.annotation.on('annotationCreated', this.onAnnotationCreation);
+  }
+
+  indexAnnotations() {
+    const theInMemorySearchProvider = this;
+    Object.values(this.openmct.objects.providers).forEach((objectProvider) => {
+      if (objectProvider.getAllObjects) {
+        const allObjects = objectProvider.getAllObjects();
+        if (allObjects) {
+          Object.values(allObjects).forEach((domainObject) => {
+            if (domainObject.type === 'annotation') {
+              theInMemorySearchProvider.scheduleForIndexing(domainObject.identifier);
+            }
+          });
+        }
+      }
+    });
+  }
+
+  /**
+   * @private
+   */
+  getIntermediateResponse() {
+    let intermediateResponse = {};
+    intermediateResponse.promise = new Promise(function (resolve, reject) {
+      intermediateResponse.resolve = resolve;
+      intermediateResponse.reject = reject;
+    });
+
+    return intermediateResponse;
+  }
+
+  search(query, searchType) {
+    const queryId = uuid();
+    const pendingQuery = this.getIntermediateResponse();
+    this.pendingQueries[queryId] = pendingQuery;
+    const searchOptions = {
+      queryId,
+      searchType,
+      query,
+      maxResults: this.DEFAULT_MAX_RESULTS
+    };
+
+    if (this.worker) {
+      this.#dispatchSearchToWorker(searchOptions);
+    } else {
+      this.#localQueryFallBack(searchOptions);
+    }
+
+    return pendingQuery.promise;
+  }
+
+  /**
+   * @private
+   */
+  #localQueryFallBack({ queryId, searchType, query, maxResults }) {
+    if (searchType === this.searchTypes.OBJECTS) {
+      return this.localSearchForObjects(queryId, query, maxResults);
+    } else if (searchType === this.searchTypes.ANNOTATIONS) {
+      return this.localSearchForAnnotations(queryId, query, maxResults);
+    } else if (searchType === this.searchTypes.TAGS) {
+      return this.localSearchForTags(queryId, query, maxResults);
+    } else {
+      throw new Error(`🤷‍♂️ Unknown search type passed: ${searchType}`);
+    }
+  }
+
+  supportsSearchType(searchType) {
+    return this.supportedSearchTypes.includes(searchType);
+  }
+
+  /**
+   * Handle messages from the worker.
+   * @private
+   */
+  async onWorkerMessage(event) {
+    const pendingQuery = this.pendingQueries[event.data.queryId];
+    const modelResults = {
+      total: event.data.total
+    };
+    modelResults.hits = await Promise.all(
+      event.data.results.map(async (hit) => {
+        if (hit && hit.keyString) {
+          const identifier = this.openmct.objects.parseKeyString(hit.keyString);
+          const domainObject = await this.openmct.objects.get(identifier);
+
+          return domainObject;
+        }
+      })
+    );
+
+    pendingQuery.resolve(modelResults);
+    delete this.pendingQueries[event.data.queryId];
+  }
+
+  /**
+   * Handle error messages from the worker.
+   * @private
+   */
+  onWorkerMessageError(event) {
+    console.error('⚙️ Error message from InMemorySearch worker ⚙️', event);
+  }
+
+  /**
+   * Handle errors from the worker.
+   * @private
+   */
+  onWorkerError(event) {
+    console.error('⚙️ Error with InMemorySearch worker ⚙️', event);
+  }
+
+  /**
+   * @private
+   */
+  startSharedWorker() {
+    // eslint-disable-next-line no-undef
+    const sharedWorkerURL = `${this.openmct.getAssetPath()}${__OPENMCT_ROOT_RELATIVE__}inMemorySearchWorker.js`;
+
+    const sharedWorker = new SharedWorker(sharedWorkerURL, 'InMemorySearch Shared Worker');
+    sharedWorker.onerror = this.onWorkerError;
+    sharedWorker.port.onmessage = this.onWorkerMessage;
+    sharedWorker.port.onmessageerror = this.onWorkerMessageError;
+    sharedWorker.port.start();
+
+    return sharedWorker;
+  }
+
+  /**
+   * Schedule an id to be indexed at a later date.  If there are less
+   * pending requests than the maximum allowed, this will kick off an indexing request.
+   * This is done only when indexing first begins and we need to index a lot of objects.
+   *
+   * @private
+   * @param {identifier} id to be indexed.
+   */
+  scheduleForIndexing(identifier) {
+    const keyString = this.openmct.objects.makeKeyString(identifier);
+    const objectProvider = this.openmct.objects.getProvider(identifier);
+
+    if (objectProvider === undefined || objectProvider.search === undefined) {
+      if (!this.indexedIds[keyString] && !this.pendingIndex[keyString]) {
+        this.pendingIndex[keyString] = true;
+        this.idsToIndex.push(keyString);
+      }
+    }
+
+    this.keepIndexing();
+  }
+
+  /**
+   * If there are less pending requests than concurrent requests, keep
+   * firing requests.
+   *
+   * @private
+   */
+  keepIndexing() {
+    while (this.pendingRequests < this.MAX_CONCURRENT_REQUESTS && this.idsToIndex.length) {
+      this.beginIndexRequest();
+    }
+  }
+
+  onAnnotationCreation(annotationObject) {
+    const objectProvider = this.openmct.objects.getProvider(annotationObject.identifier);
+    if (objectProvider === undefined || objectProvider.search === undefined) {
+      const provider = this;
+      provider.index(annotationObject);
+    }
+  }
+
+  onNameMutation(domainObject, name) {
+    const provider = this;
+
+    domainObject.name = name;
+    provider.index(domainObject);
+  }
+
+  onCompositionAdded(newDomainObjectToIndex) {
+    const provider = this;
+    // The object comes in as a mutable domain object, which has functions,
+    // which the index function cannot handle as it will eventually be serialized
+    // using structuredClone. Thus we're using JSON.parse/JSON.stringify to discard
+    // those functions.
+    const nonMutableDomainObject = JSON.parse(JSON.stringify(newDomainObjectToIndex));
+
+    const objectProvider = this.openmct.objects.getProvider(nonMutableDomainObject.identifier);
+    if (objectProvider === undefined || objectProvider.search === undefined) {
+      provider.index(nonMutableDomainObject);
+    }
+  }
+
+  onCompositionRemoved(domainObjectToRemoveIdentifier) {
+    const keyString = this.openmct.objects.makeKeyString(domainObjectToRemoveIdentifier);
+    if (this.indexedIds[keyString]) {
+      // we store the unobserve function in the indexedId map
+      this.indexedIds[keyString]();
+      delete this.indexedIds[keyString];
+    }
+
+    const composition = this.indexedCompositions[keyString];
+    if (composition) {
+      composition.off('add', this.onCompositionAdded);
+      composition.off('remove', this.onCompositionRemoved);
+      delete this.indexedCompositions[keyString];
+    }
+  }
+
+  /**
+   * Pass a domainObject to the worker to be indexed.
+   * If the object has composition, schedule those ids for later indexing.
+   * Watch for object changes and re-index object and children if so
+   *
+   * @private
+   * @param domainObject a domainObject
+   */
+  async index(domainObject) {
+    const provider = this;
+    const keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
+    const composition = this.openmct.composition.get(domainObject);
+
+    if (!this.indexedIds[keyString]) {
+      this.indexedIds[keyString] = this.openmct.objects.observe(
+        domainObject,
+        'name',
+        this.onNameMutation.bind(this, domainObject)
+      );
+      if (composition) {
+        composition.on('add', this.onCompositionAdded);
+        composition.on('remove', this.onCompositionRemoved);
+        this.indexedCompositions[keyString] = composition;
+      }
+    }
+
+    if (keyString !== 'ROOT') {
+      if (this.worker) {
+        this.worker.port.postMessage({
+          request: 'index',
+          model: domainObject,
+          keyString
+        });
+      } else {
+        this.localIndexItem(keyString, domainObject);
+      }
+    }
+
+    if (composition !== undefined) {
+      const children = await composition.load();
+
+      children.forEach((child) => provider.scheduleForIndexing(child.identifier));
+    }
+  }
+
+  /**
+   * Pulls an id from the indexing queue, loads it from the model service,
+   * and indexes it.  Upon completion, tells the provider to keep
+   * indexing.
+   *
+   * @private
+   */
+  async beginIndexRequest() {
+    const keyString = this.idsToIndex.shift();
+    const provider = this;
+
+    this.pendingRequests += 1;
+    const domainObject = await this.openmct.objects.get(keyString);
+    delete provider.pendingIndex[keyString];
+
+    try {
+      if (domainObject && domainObject.identifier) {
+        await provider.index(domainObject);
+      }
+    } catch (error) {
+      console.warn('Failed to index domain object ' + keyString, error);
+    }
+
+    setTimeout(function () {
+      provider.pendingRequests -= 1;
+      provider.keepIndexing();
+    }, 0);
+  }
+
+  /**
+   * Dispatch a search query to the worker and return a queryId.
+   *
+   * @private
+   * @returns {String} a unique query Id for the query.
+   */
+  #dispatchSearchToWorker({ queryId, searchType, query, maxResults }) {
+    const message = {
+      request: searchType.toString(),
+      input: query,
+      maxResults,
+      queryId
+    };
+    this.worker.port.postMessage(message);
+  }
+
+  localIndexTags(keyString, objectToIndex, model) {
+    // add new tags
+    model.tags.forEach((tagID) => {
+      if (!this.localIndexedAnnotationsByTag[tagID]) {
+        this.localIndexedAnnotationsByTag[tagID] = [];
+      }
+
+      const existsInIndex = this.localIndexedAnnotationsByTag[tagID].some((indexedObject) => {
+        return indexedObject.keyString === objectToIndex.keyString;
+      });
+
+      if (!existsInIndex) {
+        this.localIndexedAnnotationsByTag[tagID].push(objectToIndex);
+      }
+    });
+    const tagsToRemoveFromIndex = Object.keys(this.localIndexedAnnotationsByTag).filter(
+      (indexedTag) => {
+        return !model.tags.includes(indexedTag);
+      }
+    );
+    tagsToRemoveFromIndex.forEach((tagToRemoveFromIndex) => {
+      this.localIndexedAnnotationsByTag[tagToRemoveFromIndex] = this.localIndexedAnnotationsByTag[
+        tagToRemoveFromIndex
+      ].filter((indexedAnnotation) => {
+        const shouldKeep = indexedAnnotation.keyString !== keyString;
+
+        return shouldKeep;
+      });
+    });
+  }
+
+  localIndexAnnotation(objectToIndex, model) {
+    model.targets.forEach((target) => {
+      const targetID = target.keyString;
+      if (!this.localIndexedAnnotationsByDomainObject[targetID]) {
+        this.localIndexedAnnotationsByDomainObject[targetID] = [];
+      }
+
+      objectToIndex.targets = model.targets;
+      objectToIndex.tags = model.tags;
+      const existsInIndex = this.localIndexedAnnotationsByDomainObject[targetID].some(
+        (indexedObject) => {
+          return indexedObject.keyString === objectToIndex.keyString;
+        }
+      );
+
+      if (!existsInIndex) {
+        this.localIndexedAnnotationsByDomainObject[targetID].push(objectToIndex);
+      }
+    });
+  }
+
+  /**
+   * A local version of the same SharedWorker function
+   * if we don't have SharedWorkers available (e.g., iOS)
+   */
+  localIndexItem(keyString, model) {
+    const objectToIndex = {
+      type: model.type,
+      name: model.name,
+      keyString
+    };
+    if (model && model.type === 'annotation') {
+      if (model.targets) {
+        this.localIndexAnnotation(objectToIndex, model);
+      }
+
+      if (model.tags) {
+        this.localIndexTags(keyString, objectToIndex, model);
+      }
+    } else {
+      this.localIndexedDomainObjects[keyString] = objectToIndex;
+    }
+  }
+
+  /**
+   * A local version of the same SharedWorker function
+   * if we don't have SharedWorkers available (e.g., iOS)
+   *
+   * Gets search results from the indexedItems based on provided search
+   * input. Returns matching results from indexedItems
+   */
+  localSearchForObjects(queryId, searchInput, maxResults) {
+    // This results dictionary will have domain object ID keys which
+    // point to the value the domain object's score.
+    let results = [];
+    const input = searchInput.trim().toLowerCase();
+    const message = {
+      request: 'searchForObjects',
+      results: [],
+      total: 0,
+      queryId
+    };
+
+    results =
+      Object.values(this.localIndexedDomainObjects).filter((indexedItem) => {
+        return indexedItem.name.toLowerCase().includes(input);
+      }) || [];
+
+    message.total = results.length;
+    message.results = results.slice(0, maxResults);
+    const eventToReturn = {
+      data: message
+    };
+    this.onWorkerMessage(eventToReturn);
+  }
+
+  /**
+   * A local version of the same SharedWorker function
+   * if we don't have SharedWorkers available (e.g., iOS)
+   */
+  localSearchForAnnotations(queryId, searchInput, maxResults) {
+    // This results dictionary will have domain object ID keys which
+    // point to the value the domain object's score.
+    let results = [];
+    const message = {
+      request: 'searchForAnnotations',
+      results: [],
+      total: 0,
+      queryId
+    };
+
+    results = this.localIndexedAnnotationsByDomainObject[searchInput] || [];
+
+    message.total = results.length;
+    message.results = results.slice(0, maxResults);
+    const eventToReturn = {
+      data: message
+    };
+    this.onWorkerMessage(eventToReturn);
+  }
+
+  /**
+   * A local version of the same SharedWorker function
+   * if we don't have SharedWorkers available (e.g., iOS)
+   */
+  localSearchForTags(queryId, matchingTagKeys, maxResults) {
+    let results = [];
+    const message = {
+      request: 'searchForTags',
+      results: [],
+      total: 0,
+      queryId
+    };
+
+    if (matchingTagKeys) {
+      matchingTagKeys.forEach((matchingTag) => {
+        const matchingAnnotations = this.localIndexedAnnotationsByTag[matchingTag];
+        if (matchingAnnotations) {
+          matchingAnnotations.forEach((matchingAnnotation) => {
+            const existsInResults = results.some((indexedObject) => {
+              return matchingAnnotation.keyString === indexedObject.keyString;
+            });
+            if (!existsInResults) {
+              results.push(matchingAnnotation);
+            }
+          });
+        }
+      });
+    }
+
+    message.total = results.length;
+    message.results = results.slice(0, maxResults);
+    const eventToReturn = {
+      data: message
+    };
+    this.onWorkerMessage(eventToReturn);
+  }
+
+  destroyObservers(observers) {
+    Object.entries(observers).forEach(([keyString, unobserve]) => {
+      if (typeof unobserve === 'function') {
+        unobserve();
+      }
+
+      delete observers[keyString];
+    });
+  }
+}
+
+export default InMemorySearchProvider;
diff --git a/src/api/objects/InMemorySearchWorker.js b/src/api/objects/InMemorySearchWorker.js
new file mode 100644
index 00000000000..5be570acc95
--- /dev/null
+++ b/src/api/objects/InMemorySearchWorker.js
@@ -0,0 +1,204 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/**
+ * Module defining InMemorySearchWorker. Created by deeptailor on 10/03/2019.
+ */
+(function () {
+  // An object composed of domain object IDs and models
+  // {id: domainObject's ID, name: domainObject's name}
+  const indexedDomainObjects = {};
+  const indexedAnnotationsByDomainObject = {};
+  const indexedAnnotationsByTag = {};
+
+  self.onconnect = function (e) {
+    const port = e.ports[0];
+
+    port.onmessage = function (event) {
+      const requestType = event.data.request;
+      if (requestType === 'index') {
+        indexItem(event.data.keyString, event.data.model);
+      } else if (requestType === 'OBJECTS') {
+        port.postMessage(searchForObjects(event.data));
+      } else if (requestType === 'ANNOTATIONS') {
+        port.postMessage(searchForAnnotations(event.data));
+      } else if (requestType === 'TAGS') {
+        port.postMessage(searchForTags(event.data));
+      } else {
+        throw new Error(`Unknown request ${event.data.request}`);
+      }
+    };
+
+    port.start();
+  };
+
+  self.onerror = function (error) {
+    //do nothing
+    console.error('Error on feed', error);
+  };
+
+  function indexAnnotation(objectToIndex, model) {
+    model.targets.forEach((target) => {
+      const targetID = target.keyString;
+      if (!indexedAnnotationsByDomainObject[targetID]) {
+        indexedAnnotationsByDomainObject[targetID] = [];
+      }
+
+      objectToIndex.targets = model.targets;
+      objectToIndex.tags = model.tags;
+      const existsInIndex = indexedAnnotationsByDomainObject[targetID].some((indexedObject) => {
+        return indexedObject.keyString === objectToIndex.keyString;
+      });
+
+      if (!existsInIndex) {
+        indexedAnnotationsByDomainObject[targetID].push(objectToIndex);
+      }
+    });
+  }
+
+  function indexTags(keyString, objectToIndex, model) {
+    // add new tags
+    model.tags.forEach((tagID) => {
+      if (!indexedAnnotationsByTag[tagID]) {
+        indexedAnnotationsByTag[tagID] = [];
+      }
+
+      const existsInIndex = indexedAnnotationsByTag[tagID].some((indexedObject) => {
+        return indexedObject.keyString === objectToIndex.keyString;
+      });
+
+      if (!existsInIndex) {
+        indexedAnnotationsByTag[tagID].push(objectToIndex);
+      }
+    });
+    // remove old tags
+    const tagsToRemoveFromIndex = Object.keys(indexedAnnotationsByTag).filter((indexedTag) => {
+      return !model.tags.includes(indexedTag);
+    });
+    tagsToRemoveFromIndex.forEach((tagToRemoveFromIndex) => {
+      indexedAnnotationsByTag[tagToRemoveFromIndex] = indexedAnnotationsByTag[
+        tagToRemoveFromIndex
+      ].filter((indexedAnnotation) => {
+        const shouldKeep = indexedAnnotation.keyString !== keyString;
+
+        return shouldKeep;
+      });
+    });
+  }
+
+  function indexItem(keyString, model) {
+    const objectToIndex = {
+      type: model.type,
+      name: model.name,
+      keyString
+    };
+    if (model && model.type === 'annotation') {
+      if (model.targets) {
+        indexAnnotation(objectToIndex, model);
+      }
+
+      if (model.tags) {
+        indexTags(keyString, objectToIndex, model);
+      }
+    } else {
+      indexedDomainObjects[keyString] = objectToIndex;
+    }
+  }
+
+  /**
+   * Gets search results from the indexedItems based on provided search
+   *   input. Returns matching results from indexedItems
+   *
+   * @param data An object which contains:
+   *           * input: The original string which we are searching with
+   *           * maxResults: The maximum number of search results desired
+   *           * queryId: an id identifying this query, will be returned.
+   */
+  function searchForObjects(data) {
+    let results = [];
+    const input = data.input.trim().toLowerCase();
+    const message = {
+      request: 'searchForObjects',
+      results: [],
+      total: 0,
+      queryId: data.queryId
+    };
+
+    results =
+      Object.values(indexedDomainObjects).filter((indexedItem) => {
+        return indexedItem.name.toLowerCase().includes(input);
+      }) || [];
+
+    message.total = results.length;
+    message.results = results.slice(0, data.maxResults);
+
+    return message;
+  }
+
+  function searchForAnnotations(data) {
+    let results = [];
+    const message = {
+      request: 'searchForAnnotations',
+      results: [],
+      total: 0,
+      queryId: data.queryId
+    };
+
+    results = indexedAnnotationsByDomainObject[data.input] || [];
+
+    message.total = results.length;
+    message.results = results.slice(0, data.maxResults);
+
+    return message;
+  }
+
+  function searchForTags(data) {
+    let results = [];
+    const message = {
+      request: 'searchForTags',
+      results: [],
+      total: 0,
+      queryId: data.queryId
+    };
+
+    if (data.input) {
+      data.input.forEach((matchingTag) => {
+        const matchingAnnotations = indexedAnnotationsByTag[matchingTag];
+        if (matchingAnnotations) {
+          matchingAnnotations.forEach((matchingAnnotation) => {
+            const existsInResults = results.some((indexedObject) => {
+              return matchingAnnotation.keyString === indexedObject.keyString;
+            });
+            if (!existsInResults) {
+              results.push(matchingAnnotation);
+            }
+          });
+        }
+      });
+    }
+
+    message.total = results.length;
+    message.results = results.slice(0, data.maxResults);
+
+    return message;
+  }
+})();
diff --git a/src/api/objects/InterceptorRegistry.js b/src/api/objects/InterceptorRegistry.js
index 448082fd222..9f88d54456c 100644
--- a/src/api/objects/InterceptorRegistry.js
+++ b/src/api/objects/InterceptorRegistry.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,48 +19,56 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+const DEFAULT_INTERCEPTOR_PRIORITY = 0;
 export default class InterceptorRegistry {
-    /**
-     * A InterceptorRegistry maintains the definitions for different interceptors that may be invoked on domain objects.
-     * @interface InterceptorRegistry
-     * @memberof module:openmct
-     */
-    constructor() {
-        this.interceptors = [];
-    }
+  /**
+   * A InterceptorRegistry maintains the definitions for different interceptors that may be invoked on domain objects.
+   * @interface InterceptorRegistry
+   * @memberof module:openmct
+   */
+  constructor() {
+    this.interceptors = [];
+  }
 
-    /**
-     * @interface InterceptorDef
-     * @property {function} appliesTo function that determines if this interceptor should be called for the given identifier/object
-     * @property {function} invoke function that transforms the provided domain object and returns the transformed domain object
-     * @property {function} priority the priority for this interceptor. A higher number returned has more weight than a lower number
-     * @memberof module:openmct InterceptorRegistry#
-     */
+  /**
+   * @interface InterceptorDef
+   * @property {function} appliesTo function that determines if this interceptor should be called for the given identifier/object
+   * @property {function} invoke function that transforms the provided domain object and returns the transformed domain object
+   * @property {function} priority the priority for this interceptor. A higher number returned has more weight than a lower number
+   * @memberof module:openmct InterceptorRegistry#
+   */
 
-    /**
-     * Register a new object interceptor.
-     *
-     * @param {module:openmct.InterceptorDef} interceptorDef the interceptor to add
-     * @method addInterceptor
-     * @memberof module:openmct.InterceptorRegistry#
-     */
-    addInterceptor(interceptorDef) {
-        //TODO: sort by priority
-        this.interceptors.push(interceptorDef);
-    }
+  /**
+   * Register a new object interceptor.
+   *
+   * @param {module:openmct.InterceptorDef} interceptorDef the interceptor to add
+   * @method addInterceptor
+   * @memberof module:openmct.InterceptorRegistry#
+   */
+  addInterceptor(interceptorDef) {
+    this.interceptors.push(interceptorDef);
+  }
 
-    /**
-     * Retrieve all interceptors applicable to a domain object.
-     * @method getInterceptors
-     * @returns [module:openmct.InterceptorDef] the registered interceptors for this identifier/object
-     * @memberof module:openmct.InterceptorRegistry#
-     */
-    getInterceptors(identifier, object) {
-        return this.interceptors.filter(interceptor => {
-            return typeof interceptor.appliesTo === 'function'
-                && interceptor.appliesTo(identifier, object);
-        });
+  /**
+   * Retrieve all interceptors applicable to a domain object.
+   * @method getInterceptors
+   * @returns [module:openmct.InterceptorDef] the registered interceptors for this identifier/object
+   * @memberof module:openmct.InterceptorRegistry#
+   */
+  getInterceptors(identifier, object) {
+    function byPriority(interceptorA, interceptorB) {
+      let priorityA = interceptorA.priority ?? DEFAULT_INTERCEPTOR_PRIORITY;
+      let priorityB = interceptorB.priority ?? DEFAULT_INTERCEPTOR_PRIORITY;
+
+      return priorityB - priorityA;
     }
 
+    return this.interceptors
+      .filter((interceptor) => {
+        return (
+          typeof interceptor.appliesTo === 'function' && interceptor.appliesTo(identifier, object)
+        );
+      })
+      .sort(byPriority);
+  }
 }
-
diff --git a/src/api/objects/MutableDomainObject.js b/src/api/objects/MutableDomainObject.js
index 33ad26e16fc..80c46598ffc 100644
--- a/src/api/objects/MutableDomainObject.js
+++ b/src/api/objects/MutableDomainObject.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,9 +19,10 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import _ from 'lodash';
-import utils from './object-utils.js';
 import EventEmitter from 'EventEmitter';
+import _ from 'lodash';
+
+import { makeKeyString, refresh } from './object-utils.js';
 
 const ANY_OBJECT_EVENT = 'mutation';
 
@@ -40,113 +41,136 @@ const ANY_OBJECT_EVENT = 'mutation';
  * @memberof module:openmct
  */
 class MutableDomainObject {
-    constructor(eventEmitter) {
-        Object.defineProperties(this, {
-            _globalEventEmitter: {
-                value: eventEmitter,
-                // Property should not be serialized
-                enumerable: false
-            },
-            _instanceEventEmitter: {
-                value: new EventEmitter(),
-                // Property should not be serialized
-                enumerable: false
-            },
-            _observers: {
-                value: [],
-                // Property should not be serialized
-                enumerable: false
-            },
-            isMutable: {
-                value: true,
-                // Property should not be serialized
-                enumerable: false
-            }
-        });
+  constructor(eventEmitter) {
+    Object.defineProperties(this, {
+      _globalEventEmitter: {
+        value: eventEmitter,
+        // Property should not be serialized
+        enumerable: false
+      },
+      _instanceEventEmitter: {
+        value: new EventEmitter(),
+        // Property should not be serialized
+        enumerable: false
+      },
+      _observers: {
+        value: [],
+        // Property should not be serialized
+        enumerable: false
+      },
+      isMutable: {
+        value: true,
+        // Property should not be serialized
+        enumerable: false
+      }
+    });
+  }
+  $observe(path, callback) {
+    let fullPath = qualifiedEventName(this, path);
+    let eventOff = this._globalEventEmitter.off.bind(this._globalEventEmitter, fullPath, callback);
+
+    this._globalEventEmitter.on(fullPath, callback);
+    this._observers.push(eventOff);
+
+    return eventOff;
+  }
+  $set(path, value) {
+    const oldModel = JSON.parse(JSON.stringify(this));
+    const oldValue = _.get(oldModel, path);
+    MutableDomainObject.mutateObject(this, path, value);
+
+    //Emit secret synchronization event first, so that all objects are in sync before subsequent events fired.
+    this._globalEventEmitter.emit(qualifiedEventName(this, '$_synchronize_model'), this);
+
+    //Emit a general "any object" event
+    this._globalEventEmitter.emit(ANY_OBJECT_EVENT, this, oldModel);
+    //Emit wildcard event, with path so that callback knows what changed
+    this._globalEventEmitter.emit(
+      qualifiedEventName(this, '*'),
+      this,
+      path,
+      value,
+      oldModel,
+      oldValue
+    );
+
+    //Emit events specific to properties affected
+    let parentPropertiesList = path.split('.');
+    for (let index = parentPropertiesList.length; index > 0; index--) {
+      let pathToThisProperty = parentPropertiesList.slice(0, index);
+      let parentPropertyPath = parentPropertiesList.slice(0, index).join('.');
+      this._globalEventEmitter.emit(
+        qualifiedEventName(this, parentPropertyPath),
+        _.get(this, parentPropertyPath),
+        _.get(oldModel, parentPropertyPath)
+      );
+
+      const lastPathElement = parentPropertiesList[index - 1];
+      // Also emit an event for the array whose element has changed so developers do not need to listen to every element of the array.
+      if (lastPathElement.endsWith(']')) {
+        const arrayPathElement = lastPathElement.substring(0, lastPathElement.lastIndexOf('['));
+        pathToThisProperty[index - 1] = arrayPathElement;
+        const pathToArrayString = pathToThisProperty.join('.');
+        this._globalEventEmitter.emit(
+          qualifiedEventName(this, pathToArrayString),
+          _.get(this, pathToArrayString),
+          _.get(oldModel, pathToArrayString)
+        );
+      }
     }
-    $observe(path, callback) {
-        let fullPath = qualifiedEventName(this, path);
-        let eventOff =
-            this._globalEventEmitter.off.bind(this._globalEventEmitter, fullPath, callback);
 
-        this._globalEventEmitter.on(fullPath, callback);
-        this._observers.push(eventOff);
-
-        return eventOff;
-    }
-    $set(path, value) {
-        _.set(this, path, value);
-
-        if (path !== 'persisted' && path !== 'modified') {
-            _.set(this, 'modified', Date.now());
-        }
-
-        //Emit secret synchronization event first, so that all objects are in sync before subsequent events fired.
-        this._globalEventEmitter.emit(qualifiedEventName(this, '$_synchronize_model'), this);
-
-        //Emit a general "any object" event
-        this._globalEventEmitter.emit(ANY_OBJECT_EVENT, this);
-        //Emit wildcard event, with path so that callback knows what changed
-        this._globalEventEmitter.emit(qualifiedEventName(this, '*'), this, path, value);
-
-        //Emit events specific to properties affected
-        let parentPropertiesList = path.split('.');
-        for (let index = parentPropertiesList.length; index > 0; index--) {
-            let parentPropertyPath = parentPropertiesList.slice(0, index).join('.');
-            this._globalEventEmitter.emit(qualifiedEventName(this, parentPropertyPath), _.get(this, parentPropertyPath));
-        }
-
-        //TODO: Emit events for listeners of child properties when parent changes.
-        // Do it at observer time - also register observers for parent attribute path.
-    }
+    //TODO: Emit events for listeners of child properties when parent changes.
+    // Do it at observer time - also register observers for parent attribute path.
+  }
 
-    $refresh(model) {
-        //TODO: Currently we are updating the entire object.
-        // In the future we could update a specific property of the object using the 'path' parameter.
-        this._globalEventEmitter.emit(qualifiedEventName(this, '$_synchronize_model'), model);
+  $refresh(model) {
+    //TODO: Currently we are updating the entire object.
+    // In the future we could update a specific property of the object using the 'path' parameter.
+    this._globalEventEmitter.emit(qualifiedEventName(this, '$_synchronize_model'), model);
 
-        //Emit wildcard event, with path so that callback knows what changed
-        this._globalEventEmitter.emit(qualifiedEventName(this, '*'), this);
-    }
+    //Emit wildcard event, with path so that callback knows what changed
+    this._globalEventEmitter.emit(qualifiedEventName(this, '*'), this);
+  }
 
-    $on(event, callback) {
-        this._instanceEventEmitter.on(event, callback);
+  $on(event, callback) {
+    this._instanceEventEmitter.on(event, callback);
 
-        return () => this._instanceEventEmitter.off(event, callback);
+    return () => this._instanceEventEmitter.off(event, callback);
+  }
+  $destroy() {
+    while (this._observers.length > 0) {
+      const observer = this._observers.pop();
+      observer();
     }
-    $destroy() {
-        while (this._observers.length > 0) {
-            const observer = this._observers.pop();
-            observer();
-        }
 
-        this._instanceEventEmitter.emit('$_destroy');
-    }
+    this._instanceEventEmitter.emit('$_destroy');
+  }
 
-    static createMutable(object, mutationTopic) {
-        let mutable = Object.create(new MutableDomainObject(mutationTopic));
-        Object.assign(mutable, object);
+  static createMutable(object, mutationTopic) {
+    let mutable = Object.create(new MutableDomainObject(mutationTopic));
+    Object.assign(mutable, object);
 
-        mutable.$observe('$_synchronize_model', (updatedObject) => {
-            let clone = JSON.parse(JSON.stringify(updatedObject));
-            let deleted = _.difference(Object.keys(mutable), Object.keys(updatedObject));
-            deleted.forEach((propertyName) => delete mutable[propertyName]);
-            Object.assign(mutable, clone);
-        });
+    mutable.$observe('$_synchronize_model', (updatedObject) => {
+      let clone = JSON.parse(JSON.stringify(updatedObject));
+      refresh(mutable, clone);
+    });
 
-        return mutable;
-    }
+    return mutable;
+  }
 
-    static mutateObject(object, path, value) {
-        _.set(object, path, value);
-        _.set(object, 'modified', Date.now());
+  static mutateObject(object, path, value) {
+    if (path !== 'persisted') {
+      _.set(object, 'modified', Date.now());
     }
+
+    _.set(object, path, value);
+  }
 }
 
 function qualifiedEventName(object, eventName) {
-    let keystring = utils.makeKeyString(object.identifier);
+  let keystring = makeKeyString(object.identifier);
 
-    return [keystring, eventName].join(':');
+  return [keystring, eventName].join(':');
 }
 
 export default MutableDomainObject;
diff --git a/src/api/objects/ObjectAPI.js b/src/api/objects/ObjectAPI.js
index e3c20ee1049..3615f3c94cf 100644
--- a/src/api/objects/ObjectAPI.js
+++ b/src/api/objects/ObjectAPI.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,525 +20,876 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import utils from 'objectUtils';
-import MutableDomainObject from './MutableDomainObject';
-import RootRegistry from './RootRegistry';
-import RootObjectProvider from './RootObjectProvider';
 import EventEmitter from 'EventEmitter';
-import InterceptorRegistry from './InterceptorRegistry';
+import { identifierEquals, makeKeyString, parseKeyString, refresh } from 'objectUtils';
+
+import ConflictError from './ConflictError.js';
+import InMemorySearchProvider from './InMemorySearchProvider.js';
+import InterceptorRegistry from './InterceptorRegistry.js';
+import MutableDomainObject from './MutableDomainObject.js';
+import RootObjectProvider from './RootObjectProvider.js';
+import RootRegistry from './RootRegistry.js';
+import Transaction from './Transaction.js';
+
+/**
+ * Uniquely identifies a domain object.
+ *
+ * @typedef {object} Identifier
+ * @property {string} namespace the namespace to/from which this domain
+ *           object should be loaded/stored.
+ * @property {string} key a unique identifier for the domain object
+ *           within that namespace
+ * @memberof module:openmct.ObjectAPI~
+ */
+
+/**
+ * A domain object is an entity of relevance to a user's workflow, that
+ * should appear as a distinct and meaningful object within the user
+ * interface. Examples of domain objects are folders, telemetry sensors,
+ * and so forth.
+ *
+ * A few common properties are defined for domain objects. Beyond these,
+ * individual types of domain objects may add more as they see fit.
+ *
+ * @typedef {object} DomainObject
+ * @property {Identifier} identifier a key/namespace pair which
+ *           uniquely identifies this domain object
+ * @property {string} type the type of domain object
+ * @property {string} name the human-readable name for this domain object
+ * @property {string} [creator] the user name of the creator of this domain
+ *           object
+ * @property {number} [modified] the time, in milliseconds since the UNIX
+ *           epoch, at which this domain object was last modified
+ * @property {Identifier[]} [composition] if
+ *           present, this will be used by the default composition provider
+ *           to load domain objects
+ * @property {Object.<string, any>} [configuration] A key-value map containing configuration
+ *           settings for this domain object.
+ * @memberof module:openmct.ObjectAPI~
+ */
+
+/**
+ * @readonly
+ * @enum {string} SEARCH_TYPES
+ * @property {string} OBJECTS Search for objects
+ * @property {string} ANNOTATIONS Search for annotations
+ * @property {string} TAGS Search for tags
+ */
 
 /**
  * Utilities for loading, saving, and manipulating domain objects.
  * @interface ObjectAPI
  * @memberof module:openmct
  */
+export default class ObjectAPI {
+  #makeKeyString;
+  #parseKeyString;
+  #identifierEquals;
+  #refresh;
+  #openmct;
+
+  constructor(typeRegistry, openmct) {
+    this.#makeKeyString = makeKeyString;
+    this.#parseKeyString = parseKeyString;
+    this.#identifierEquals = identifierEquals;
+    this.#refresh = refresh;
+    this.#openmct = openmct;
 
-function ObjectAPI(typeRegistry, openmct) {
     this.typeRegistry = typeRegistry;
+    this.SEARCH_TYPES = Object.freeze({
+      OBJECTS: 'OBJECTS',
+      ANNOTATIONS: 'ANNOTATIONS',
+      TAGS: 'TAGS'
+    });
     this.eventEmitter = new EventEmitter();
     this.providers = {};
-    this.rootRegistry = new RootRegistry();
-    this.injectIdentifierService = function () {
-        this.identifierService = openmct.$injector.get("identifierService");
-    };
+    this.rootRegistry = new RootRegistry(openmct);
+    this.inMemorySearchProvider = new InMemorySearchProvider(openmct);
 
     this.rootProvider = new RootObjectProvider(this.rootRegistry);
     this.cache = {};
     this.interceptorRegistry = new InterceptorRegistry();
 
-    this.SYNCHRONIZED_OBJECT_TYPES = ['notebook', 'plan'];
-}
-
-/**
- * Set fallback provider, this is an internal API for legacy reasons.
- * @private
- */
-ObjectAPI.prototype.supersecretSetFallbackProvider = function (p) {
-    this.fallbackProvider = p;
-};
+    this.SYNCHRONIZED_OBJECT_TYPES = [
+      'notebook',
+      'restricted-notebook',
+      'plan',
+      'annotation',
+      'activity-states'
+    ];
 
-/**
- * @private
- */
-ObjectAPI.prototype.getIdentifierService = function () {
-    // Lazily acquire identifier service
-    if (!this.identifierService) {
-        this.injectIdentifierService();
-    }
-
-    return this.identifierService;
-};
-
-/**
- * Retrieve the provider for a given identifier.
- * @private
- */
-ObjectAPI.prototype.getProvider = function (identifier) {
-    //handles the '' vs 'mct' namespace issue
-    const keyString = utils.makeKeyString(identifier);
-    const identifierService = this.getIdentifierService();
-    const namespace = identifierService.parse(keyString).getSpace();
+    this.errors = {
+      Conflict: ConflictError
+    };
+  }
 
+  /**
+   * Retrieve the provider for a given identifier.
+   */
+  getProvider(identifier) {
     if (identifier.key === 'ROOT') {
-        return this.rootProvider;
+      return this.rootProvider;
     }
 
-    return this.providers[namespace] || this.fallbackProvider;
-};
-
-/**
- * Get the root-level object.
- * @returns {Promise.<DomainObject>} a promise for the root object
- */
-ObjectAPI.prototype.getRoot = function () {
+    return this.providers[identifier.namespace] || this.fallbackProvider;
+  }
+
+  /**
+   * Get an active transaction instance
+   * @returns {Transaction} a transaction object
+   */
+  getActiveTransaction() {
+    return this.transaction;
+  }
+
+  /**
+   * Get the root-level object.
+   * @returns {Promise.<DomainObject>} a promise for the root object
+   */
+  getRoot() {
     return this.rootProvider.get();
-};
-
-/**
- * Register a new object provider for a particular namespace.
- *
- * @param {string} namespace the namespace for which to provide objects
- * @param {module:openmct.ObjectProvider} provider the provider which
- *        will handle loading domain objects from this namespace
- * @memberof {module:openmct.ObjectAPI#}
- * @name addProvider
- */
-ObjectAPI.prototype.addProvider = function (namespace, provider) {
+  }
+
+  /**
+   * Register a new object provider for a particular namespace.
+   *
+   * @param {string} namespace the namespace for which to provide objects
+   * @param {module:openmct.ObjectProvider} provider the provider which
+   *        will handle loading domain objects from this namespace
+   * @memberof {module:openmct.ObjectAPI#}
+   * @name addProvider
+   */
+  addProvider(namespace, provider) {
     this.providers[namespace] = provider;
-};
-
-/**
- * Provides the ability to read, write, and delete domain objects.
- *
- * When registering a new object provider, all methods on this interface
- * are optional.
- *
- * @interface ObjectProvider
- * @memberof module:openmct
- */
-
-/**
- * Create the given domain object in the corresponding persistence store
- *
- * @method create
- * @memberof module:openmct.ObjectProvider#
- * @param {module:openmct.DomainObject} domainObject the domain object to
- *        create
- * @returns {Promise} a promise which will resolve when the domain object
- *          has been created, or be rejected if it cannot be saved
- */
-
-/**
- * Update this domain object in its persistence store
- *
- * @method update
- * @memberof module:openmct.ObjectProvider#
- * @param {module:openmct.DomainObject} domainObject the domain object to
- *        update
- * @returns {Promise} a promise which will resolve when the domain object
- *          has been updated, or be rejected if it cannot be saved
- */
+  }
+
+  /**
+   * Provides the ability to read, write, and delete domain objects.
+   *
+   * When registering a new object provider, all methods on this interface
+   * are optional.
+   *
+   * @interface ObjectProvider
+   * @memberof module:openmct
+   */
+
+  /**
+   * Create the given domain object in the corresponding persistence store
+   *
+   * @method create
+   * @memberof module:openmct.ObjectProvider#
+   * @param {module:openmct.DomainObject} domainObject the domain object to
+   *        create
+   * @returns {Promise} a promise which will resolve when the domain object
+   *          has been created, or be rejected if it cannot be saved
+   */
+
+  /**
+   * Update this domain object in its persistence store
+   *
+   * @method update
+   * @memberof module:openmct.ObjectProvider#
+   * @param {module:openmct.DomainObject} domainObject the domain object to
+   *        update
+   * @returns {Promise} a promise which will resolve when the domain object
+   *          has been updated, or be rejected if it cannot be saved
+   */
+
+  /**
+   * Delete this domain object.
+   *
+   * @method delete
+   * @memberof module:openmct.ObjectProvider#
+   * @param {module:openmct.DomainObject} domainObject the domain object to
+   *        delete
+   * @returns {Promise} a promise which will resolve when the domain object
+   *          has been deleted, or be rejected if it cannot be deleted
+   */
+
+  /**
+   * Get a domain object.
+   *
+   * @param {string} key the key for the domain object to load
+   * @param {AbortSignal} abortSignal (optional) signal to abort fetch requests
+   * @param {boolean} [forceRemote=false] defaults to false. If true, will skip cached and
+   *          dirty/in-transaction objects use and the provider.get method
+   * @returns {Promise<DomainObject>} a promise which will resolve when the domain object
+   *          has been saved, or be rejected if it cannot be saved
+   */
+  get(identifier, abortSignal, forceRemote = false) {
+    let keystring = this.#makeKeyString(identifier);
+
+    if (!forceRemote) {
+      if (this.cache[keystring] !== undefined) {
+        return this.cache[keystring];
+      }
 
-/**
- * Delete this domain object.
- *
- * @method delete
- * @memberof module:openmct.ObjectProvider#
- * @param {module:openmct.DomainObject} domainObject the domain object to
- *        delete
- * @returns {Promise} a promise which will resolve when the domain object
- *          has been deleted, or be rejected if it cannot be deleted
- */
+      identifier = parseKeyString(identifier);
 
-/**
- * Get a domain object.
- *
- * @method get
- * @memberof module:openmct.ObjectProvider#
- * @param {string} key the key for the domain object to load
- * @param {AbortController.signal} abortSignal (optional) signal to abort fetch requests
- * @returns {Promise} a promise which will resolve when the domain object
- *          has been saved, or be rejected if it cannot be saved
- */
-
-ObjectAPI.prototype.get = function (identifier, abortSignal) {
-    let keystring = this.makeKeyString(identifier);
+      if (this.isTransactionActive()) {
+        let dirtyObject = this.transaction.getDirtyObject(identifier);
 
-    if (this.cache[keystring] !== undefined) {
-        return this.cache[keystring];
+        if (dirtyObject) {
+          return Promise.resolve(dirtyObject);
+        }
+      }
     }
 
-    identifier = utils.parseKeyString(identifier);
     const provider = this.getProvider(identifier);
 
     if (!provider) {
-        throw new Error('No Provider Matched');
+      throw new Error(`No Provider Matched for keyString "${this.#makeKeyString(identifier)}"`);
     }
 
     if (!provider.get) {
-        throw new Error('Provider does not support get!');
+      throw new Error('Provider does not support get!');
     }
 
-    let objectPromise = provider.get(identifier, abortSignal).then(result => {
+    let objectPromise = provider
+      .get(identifier, abortSignal)
+      .then((domainObject) => {
         delete this.cache[keystring];
-        result = this.applyGetInterceptors(identifier, result);
+        if (!domainObject && abortSignal.aborted) {
+          // we've aborted the request
+          return;
+        }
+        domainObject = this.applyGetInterceptors(identifier, domainObject);
 
-        return result;
-    });
+        if (this.supportsMutation(identifier)) {
+          const mutableDomainObject = this.toMutable(domainObject);
+          mutableDomainObject.$refresh(domainObject);
+          this.destroyMutable(mutableDomainObject);
+        }
+
+        return domainObject;
+      })
+      .catch((error) => {
+        delete this.cache[keystring];
+
+        // suppress abort errors
+        if (error.name === 'AbortError') {
+          return;
+        }
+
+        console.warn(`Failed to retrieve ${keystring}:`, error);
+
+        return this.applyGetInterceptors(identifier);
+      });
 
     this.cache[keystring] = objectPromise;
 
     return objectPromise;
-};
+  }
+
+  /**
+   * Search for domain objects.
+   *
+   * Object providersSearches and combines results of each object provider search.
+   * Objects without search provided will have been indexed
+   * and will be searched using the fallback in-memory search.
+   * Search results are asynchronous and resolve in parallel.
+   *
+   * @method search
+   * @memberof module:openmct.ObjectAPI#
+   * @param {string} query the term to search for
+   * @param {AbortController.signal} abortSignal (optional) signal to cancel downstream fetch requests
+   * @param {string} searchType the type of search as defined by SEARCH_TYPES
+   * @returns {Array.<Promise.<module:openmct.DomainObject>>}
+   *          an array of promises returned from each object provider's search function
+   *          each resolving to domain objects matching provided search query and options.
+   */
+  search(query, abortSignal, searchType = this.SEARCH_TYPES.OBJECTS) {
+    if (!Object.keys(this.SEARCH_TYPES).includes(searchType.toUpperCase())) {
+      throw new Error(`Unknown search type: ${searchType}`);
+    }
 
-/**
- * Search for domain objects.
- *
- * Object providersSearches and combines results of each object provider search.
- * Objects without search provided will have been indexed
- * and will be searched using the fallback indexed search.
- * Search results are asynchronous and resolve in parallel.
- *
- * @method search
- * @memberof module:openmct.ObjectAPI#
- * @param {string} query the term to search for
- * @param {AbortController.signal} abortSignal (optional) signal to cancel downstream fetch requests
- * @returns {Array.<Promise.<module:openmct.DomainObject>>}
- *          an array of promises returned from each object provider's search function
- *          each resolving to domain objects matching provided search query and options.
- */
-ObjectAPI.prototype.search = function (query, abortSignal) {
     const searchPromises = Object.values(this.providers)
-        .filter(provider => provider.search !== undefined)
-        .map(provider => provider.search(query, abortSignal));
-
-    searchPromises.push(this.fallbackProvider.superSecretFallbackSearch(query, abortSignal)
-        .then(results => results.hits
-            .map(hit => {
-                let domainObject = utils.toNewFormat(hit.object.getModel(), hit.object.getId());
-                domainObject = this.applyGetInterceptors(domainObject.identifier, domainObject);
+      .filter((provider) => {
+        return provider.supportsSearchType !== undefined && provider.supportsSearchType(searchType);
+      })
+      .map((provider) => provider.search(query, abortSignal, searchType));
+    if (!this.inMemorySearchProvider.supportsSearchType(searchType)) {
+      throw new Error(`${searchType} not implemented in inMemorySearchProvider`);
+    }
 
-                return domainObject;
-            })));
+    searchPromises.push(
+      this.inMemorySearchProvider.search(query, searchType).then((results) =>
+        results.hits.map((hit) => {
+          return hit;
+        })
+      )
+    );
 
     return searchPromises;
-};
-
-/**
- * Will fetch object for the given identifier, returning a version of the object that will automatically keep
- * itself updated as it is mutated. Before using this function, you should ask yourself whether you really need it.
- * The platform will provide mutable objects to views automatically if the underlying object can be mutated. The
- * platform will manage the lifecycle of any mutable objects that it provides. If you use `getMutable` you are
- * committing to managing that lifecycle yourself. `.destroy` should be called when the object is no longer needed.
- *
- * @memberof {module:openmct.ObjectAPI#}
- * @returns {Promise.<MutableDomainObject>} a promise that will resolve with a MutableDomainObject if
- * the object can be mutated.
- */
-ObjectAPI.prototype.getMutable = function (identifier) {
+  }
+
+  /**
+   * Will fetch object for the given identifier, returning a version of the object that will automatically keep
+   * itself updated as it is mutated. Before using this function, you should ask yourself whether you really need it.
+   * The platform will provide mutable objects to views automatically if the underlying object can be mutated. The
+   * platform will manage the lifecycle of any mutable objects that it provides. If you use `getMutable` you are
+   * committing to managing that lifecycle yourself. `.destroy` should be called when the object is no longer needed.
+   *
+   * @memberof {module:openmct.ObjectAPI#}
+   * @returns {Promise.<MutableDomainObject>} a promise that will resolve with a MutableDomainObject if
+   * the object can be mutated.
+   */
+  getMutable(identifier) {
     if (!this.supportsMutation(identifier)) {
-        throw new Error(`Object "${this.makeKeyString(identifier)}" does not support mutation.`);
+      throw new Error(`Object "${this.#makeKeyString(identifier)}" does not support mutation.`);
     }
 
     return this.get(identifier).then((object) => {
-        return this._toMutable(object);
+      return this.toMutable(object);
     });
-};
-
-/**
- * This function is for cleaning up a mutable domain object when you're done with it.
- * You only need to use this if you retrieved the object using `getMutable()`. If the object was provided by the
- * platform (eg. passed into a `view()` function) then the platform is responsible for its lifecycle.
- * @param {MutableDomainObject} domainObject
- */
-ObjectAPI.prototype.destroyMutable = function (domainObject) {
+  }
+
+  /**
+   * This function is for cleaning up a mutable domain object when you're done with it.
+   * You only need to use this if you retrieved the object using `getMutable()`. If the object was provided by the
+   * platform (eg. passed into a `view()` function) then the platform is responsible for its lifecycle.
+   * @param {MutableDomainObject} domainObject
+   */
+  destroyMutable(domainObject) {
     if (domainObject.isMutable) {
-        return domainObject.$destroy();
+      return domainObject.$destroy();
     } else {
-        throw new Error("Attempted to destroy non-mutable domain object");
+      throw new Error('Attempted to destroy non-mutable domain object');
     }
-};
+  }
 
-ObjectAPI.prototype.delete = function () {
+  delete() {
     throw new Error('Delete not implemented');
-};
+  }
 
-ObjectAPI.prototype.isPersistable = function (idOrKeyString) {
-    let identifier = utils.parseKeyString(idOrKeyString);
+  isPersistable(idOrKeyString) {
+    let identifier = parseKeyString(idOrKeyString);
     let provider = this.getProvider(identifier);
+    if (provider?.isReadOnly) {
+      return !provider.isReadOnly();
+    }
 
-    return provider !== undefined
-        && provider.create !== undefined
-        && provider.update !== undefined;
-};
-
-/**
- * Save this domain object in its current state. EXPERIMENTAL
- *
- * @private
- * @memberof module:openmct.ObjectAPI#
- * @param {module:openmct.DomainObject} domainObject the domain object to
- *        save
- * @returns {Promise} a promise which will resolve when the domain object
- *          has been saved, or be rejected if it cannot be saved
- */
-ObjectAPI.prototype.save = function (domainObject) {
-    let provider = this.getProvider(domainObject.identifier);
-    let savedResolve;
+    return provider !== undefined && provider.create !== undefined && provider.update !== undefined;
+  }
+
+  isMissing(domainObject) {
+    let identifier = makeKeyString(domainObject.identifier);
+    let missingName = 'Missing: ' + identifier;
+
+    return domainObject.name === missingName;
+  }
+
+  /**
+   * Save this domain object in its current state.
+   *
+   * @memberof module:openmct.ObjectAPI#
+   * @param {module:openmct.DomainObject} domainObject the domain object to
+   *        save
+   * @returns {Promise} a promise which will resolve when the domain object
+   *          has been saved, or be rejected if it cannot be saved
+   */
+  async save(domainObject) {
+    const provider = this.getProvider(domainObject.identifier);
     let result;
+    let lastPersistedTime;
 
     if (!this.isPersistable(domainObject.identifier)) {
-        result = Promise.reject('Object provider does not support saving');
-    } else if (hasAlreadyBeenPersisted(domainObject)) {
-        result = Promise.resolve(true);
+      result = Promise.reject('Object provider does not support saving');
+    } else if (this.#hasAlreadyBeenPersisted(domainObject)) {
+      result = Promise.resolve(true);
     } else {
+      const username = await this.#getCurrentUsername();
+      const isNewObject = domainObject.persisted === undefined;
+      let savedResolve;
+      let savedReject;
+      let savedObjectPromise;
+
+      result = new Promise((resolve, reject) => {
+        savedResolve = resolve;
+        savedReject = reject;
+      });
+
+      this.#mutate(domainObject, 'modifiedBy', username);
+
+      if (isNewObject) {
+        this.#mutate(domainObject, 'createdBy', username);
+
+        const createdTime = Date.now();
+        this.#mutate(domainObject, 'created', createdTime);
+
+        const persistedTime = Date.now();
+        this.#mutate(domainObject, 'persisted', persistedTime);
+
+        savedObjectPromise = provider.create(domainObject);
+      } else {
+        lastPersistedTime = domainObject.persisted;
         const persistedTime = Date.now();
-        if (domainObject.persisted === undefined) {
-            result = new Promise((resolve) => {
-                savedResolve = resolve;
-            });
-            domainObject.persisted = persistedTime;
-            provider.create(domainObject).then((response) => {
-                this.mutate(domainObject, 'persisted', persistedTime);
-                savedResolve(response);
-            });
+        this.#mutate(domainObject, 'persisted', persistedTime);
+        savedObjectPromise = provider.update(domainObject);
+      }
+
+      if (savedObjectPromise) {
+        savedObjectPromise
+          .then((response) => {
+            savedResolve(response);
+          })
+          .catch((error) => {
+            if (!isNewObject) {
+              this.#mutate(domainObject, 'persisted', lastPersistedTime);
+            }
+
+            savedReject(error);
+          });
+      } else {
+        result = Promise.reject(
+          `[ObjectAPI][save] Object provider returned ${savedObjectPromise} when ${
+            isNewObject ? 'creating new' : 'updating'
+          } object.`
+        );
+      }
+    }
+
+    return result.catch(async (error) => {
+      if (error instanceof this.errors.Conflict) {
+        // Synchronized objects will resolve their own conflicts
+        if (this.SYNCHRONIZED_OBJECT_TYPES.includes(domainObject.type)) {
+          this.#openmct.notifications.info(
+            `Conflict detected while saving "${this.#makeKeyString(
+              domainObject.name
+            )}", attempting to resolve`
+          );
         } else {
-            domainObject.persisted = persistedTime;
-            this.mutate(domainObject, 'persisted', persistedTime);
-            result = provider.update(domainObject);
+          this.#openmct.notifications.error(
+            `Conflict detected while saving ${this.#makeKeyString(domainObject.identifier)}`
+          );
+
+          if (this.isTransactionActive()) {
+            this.endTransaction();
+          }
+
+          await this.#refresh(domainObject);
         }
-    }
+      }
 
-    return result;
-};
+      throw error;
+    });
+  }
 
-/**
- * Add a root-level object.
- * @param {module:openmct.ObjectAPI~Identifier|function} an array of
- *        identifiers for root level objects, or a function that returns a
- *        promise for an identifier or an array of root level objects.
- * @method addRoot
- * @memberof module:openmct.ObjectAPI#
- */
-ObjectAPI.prototype.addRoot = function (key) {
-    this.rootRegistry.addRoot(key);
-};
+  async #getCurrentUsername() {
+    const user = await this.#openmct.user.getCurrentUser();
+    let username;
 
-/**
- * Register an object interceptor that transforms a domain object requested via module:openmct.ObjectAPI.get
- * The domain object will be transformed after it is retrieved from the persistence store
- * The domain object will be transformed only if the interceptor is applicable to that domain object as defined by the InterceptorDef
- *
- * @param {module:openmct.InterceptorDef} interceptorDef the interceptor definition to add
- * @method addGetInterceptor
- * @memberof module:openmct.InterceptorRegistry#
- */
-ObjectAPI.prototype.addGetInterceptor = function (interceptorDef) {
+    if (user !== undefined) {
+      username = user.getName();
+    }
+
+    return username;
+  }
+
+  /**
+   * After entering into edit mode, creates a new instance of Transaction to keep track of changes in Objects
+   *
+   * @returns {Transaction} a new Transaction that was just created
+   */
+  startTransaction() {
+    if (this.isTransactionActive()) {
+      throw new Error('Unable to start new Transaction: Previous Transaction is active');
+    }
+
+    this.transaction = new Transaction(this);
+
+    return this.transaction;
+  }
+
+  /**
+   * Clear instance of Transaction
+   */
+  endTransaction() {
+    this.transaction = null;
+  }
+
+  /**
+   * Add a root-level object.
+   * @param {module:openmct.ObjectAPI~Identifier|array|function} identifier an identifier or
+   *        an array of identifiers for root level objects, or a function that returns a
+   *        promise for an identifier or an array of root level objects.
+   * @param {module:openmct.PriorityAPI~priority|Number} priority a number representing
+   *        this item(s) position in the root object's composition (example: order in object tree).
+   *        For arrays, they are treated as blocks.
+   * @method addRoot
+   * @memberof module:openmct.ObjectAPI#
+   */
+  addRoot(identifier, priority) {
+    this.rootRegistry.addRoot(identifier, priority);
+  }
+
+  /**
+   * Register an object interceptor that transforms a domain object requested via module:openmct.ObjectAPI.get
+   * The domain object will be transformed after it is retrieved from the persistence store
+   * The domain object will be transformed only if the interceptor is applicable to that domain object as defined by the InterceptorDef
+   *
+   * @param {module:openmct.InterceptorDef} interceptorDef the interceptor definition to add
+   * @method addGetInterceptor
+   * @memberof module:openmct.InterceptorRegistry#
+   */
+  addGetInterceptor(interceptorDef) {
     this.interceptorRegistry.addInterceptor(interceptorDef);
-};
+  }
 
-/**
- * Retrieve the interceptors for a given domain object.
- * @private
- */
-ObjectAPI.prototype.listGetInterceptors = function (identifier, object) {
+  /**
+   * Retrieve the interceptors for a given domain object.
+   * @private
+   */
+  #listGetInterceptors(identifier, object) {
     return this.interceptorRegistry.getInterceptors(identifier, object);
-};
-
-/**
- * Inovke interceptors if applicable for a given domain object.
- * @private
- */
-ObjectAPI.prototype.applyGetInterceptors = function (identifier, domainObject) {
-    const interceptors = this.listGetInterceptors(identifier, domainObject);
-    interceptors.forEach(interceptor => {
-        domainObject = interceptor.invoke(identifier, domainObject);
+  }
+
+  /**
+   * Invoke interceptors if applicable for a given domain object.
+   * @private
+   */
+  applyGetInterceptors(identifier, domainObject) {
+    const interceptors = this.#listGetInterceptors(identifier, domainObject);
+    interceptors.forEach((interceptor) => {
+      domainObject = interceptor.invoke(identifier, domainObject);
     });
 
     return domainObject;
-};
+  }
+
+  /**
+   * Return relative url path from a given object path
+   * eg: #/browse/mine/cb56f6bf-c900-43b7-b923-2e3b64b412db/6e89e858-77ce-46e4-a1ad-749240286497/....
+   * @param {Array} objectPath
+   * @returns {string} relative url for object
+   */
+  getRelativePath(objectPath) {
+    return objectPath
+      .map((p) => this.#makeKeyString(p.identifier))
+      .reverse()
+      .join('/');
+  }
+
+  /**
+   * Return path of telemetry objects in the object composition
+   * @param {object} identifier the identifier for the domain object to query for
+   * @param {object} [telemetryIdentifier] the specific identifier for the telemetry
+   *  to look for in the composition, uses first object in composition otherwise
+   * @returns {Array} path of telemetry object in object composition
+   */
+  async getTelemetryPath(identifier, telemetryIdentifier) {
+    const objectDetails = await this.get(identifier);
+    let telemetryPath = [];
+    if (objectDetails?.type === 'folder') {
+      return telemetryPath;
+    }
 
-/**
- * Modify a domain object.
- * @param {module:openmct.DomainObject} object the object to mutate
- * @param {string} path the property to modify
- * @param {*} value the new value for this property
- * @method mutate
- * @memberof module:openmct.ObjectAPI#
- */
-ObjectAPI.prototype.mutate = function (domainObject, path, value) {
+    let sourceTelemetry = null;
+    if (telemetryIdentifier && this.#identifierEquals(identifier, telemetryIdentifier)) {
+      sourceTelemetry = identifier;
+    } else if (objectDetails.composition) {
+      sourceTelemetry = objectDetails.composition[0];
+      if (telemetryIdentifier) {
+        sourceTelemetry = objectDetails.composition.find((telemetrySource) =>
+          this.#identifierEquals(telemetrySource, telemetryIdentifier)
+        );
+      }
+    }
+
+    const compositionElement = await this.get(sourceTelemetry);
+    if (!['yamcs.telemetry', 'generator', 'yamcs.aggregate'].includes(compositionElement.type)) {
+      return telemetryPath;
+    }
+
+    const telemetryPathObjects = await this.getOriginalPath(compositionElement.identifier);
+    telemetryPath = telemetryPathObjects
+      .reverse()
+      .filter((pathObject) => pathObject.type !== 'root')
+      .map((pathObject) => pathObject.name);
+
+    return telemetryPath;
+  }
+
+  /**
+   * Modify a domain object. Internal to ObjectAPI, won't call save after.
+   * @private
+   *
+   * @param {module:openmct.DomainObject} object the object to mutate
+   * @param {string} path the property to modify
+   * @param {*} value the new value for this property
+   * @method mutate
+   * @memberof module:openmct.ObjectAPI#
+   */
+  #mutate(domainObject, path, value) {
     if (!this.supportsMutation(domainObject.identifier)) {
-        throw `Error: Attempted to mutate immutable object ${domainObject.name}`;
+      throw `Error: Attempted to mutate immutable object ${domainObject.name}`;
     }
 
     if (domainObject.isMutable) {
-        domainObject.$set(path, value);
+      domainObject.$set(path, value);
     } else {
-        //Creating a temporary mutable domain object allows other mutable instances of the
-        //object to be kept in sync.
-        let mutableDomainObject = this._toMutable(domainObject);
+      //Creating a temporary mutable domain object allows other mutable instances of the
+      //object to be kept in sync.
+      let mutableDomainObject = this.toMutable(domainObject);
 
-        //Mutate original object
-        MutableDomainObject.mutateObject(domainObject, path, value);
+      //Mutate original object
+      MutableDomainObject.mutateObject(domainObject, path, value);
 
-        //Mutate temporary mutable object, in the process informing any other mutable instances
-        mutableDomainObject.$set(path, value);
+      //Mutate temporary mutable object, in the process informing any other mutable instances
+      mutableDomainObject.$set(path, value);
 
-        //Destroy temporary mutable object
-        this.destroyMutable(mutableDomainObject);
+      //Destroy temporary mutable object
+      this.destroyMutable(mutableDomainObject);
     }
-};
-
-/**
- * @private
- */
-ObjectAPI.prototype._toMutable = function (object) {
+  }
+
+  /**
+   * Modify a domain object and save.
+   * @param {module:openmct.DomainObject} object the object to mutate
+   * @param {string} path the property to modify
+   * @param {*} value the new value for this property
+   * @method mutate
+   * @memberof module:openmct.ObjectAPI#
+   */
+  mutate(domainObject, path, value) {
+    this.#mutate(domainObject, path, value);
+
+    if (this.isTransactionActive()) {
+      this.transaction.add(domainObject);
+    } else {
+      this.save(domainObject);
+    }
+  }
+
+  /**
+   * Create a mutable domain object from an existing domain object
+   * @param {module:openmct.DomainObject} domainObject the object to make mutable
+   * @returns {MutableDomainObject} a mutable domain object that will automatically sync
+   * @method toMutable
+   * @memberof module:openmct.ObjectAPI#
+   */
+  toMutable(domainObject) {
     let mutableObject;
 
-    if (object.isMutable) {
-        mutableObject = object;
+    if (domainObject.isMutable) {
+      mutableObject = domainObject;
     } else {
-        mutableObject = MutableDomainObject.createMutable(object, this.eventEmitter);
-
-        // Check if provider supports realtime updates
-        let identifier = utils.parseKeyString(mutableObject.identifier);
-        let provider = this.getProvider(identifier);
-
-        if (provider !== undefined
-            && provider.observe !== undefined
-            && this.SYNCHRONIZED_OBJECT_TYPES.includes(object.type)) {
-            let unobserve = provider.observe(identifier, (updatedModel) => {
-                if (updatedModel.persisted > mutableObject.modified) {
-                    //Don't replace with a stale model. This can happen on slow connections when multiple mutations happen
-                    //in rapid succession and intermediate persistence states are returned by the observe function.
-                    mutableObject.$refresh(updatedModel);
-                }
-            });
-            mutableObject.$on('$_destroy', () => {
-                unobserve();
-            });
-        }
+      mutableObject = MutableDomainObject.createMutable(domainObject, this.eventEmitter);
+
+      // Check if provider supports realtime updates
+      let identifier = parseKeyString(mutableObject.identifier);
+      let provider = this.getProvider(identifier);
+
+      if (
+        provider !== undefined &&
+        provider.observe !== undefined &&
+        this.SYNCHRONIZED_OBJECT_TYPES.includes(domainObject.type)
+      ) {
+        let unobserve = provider.observe(identifier, (updatedModel) => {
+          // modified can sometimes be undefined, so make it 0 in this case
+          const mutableObjectModification = mutableObject.modified ?? Number.MIN_SAFE_INTEGER;
+          if (updatedModel.persisted > mutableObjectModification) {
+            //Don't replace with a stale model. This can happen on slow connections when multiple mutations happen
+            //in rapid succession and intermediate persistence states are returned by the observe function.
+            updatedModel = this.applyGetInterceptors(identifier, updatedModel);
+            mutableObject.$refresh(updatedModel);
+          }
+        });
+        mutableObject.$on('$_destroy', () => {
+          unobserve();
+        });
+      }
     }
 
     return mutableObject;
-};
+  }
+
+  /**
+   * Updates a domain object based on its latest persisted state. Note that this will mutate the provided object.
+   * @param {module:openmct.DomainObject} domainObject an object to refresh from its persistence store
+   * @param {boolean} [forceRemote=false] defaults to false. If true, will skip cached and
+   *          dirty/in-transaction objects use and the provider.get method
+   * @returns {Promise} the provided object, updated to reflect the latest persisted state of the object.
+   */
+  async refresh(domainObject, forceRemote = false) {
+    const refreshedObject = await this.get(domainObject.identifier, null, forceRemote);
 
-/**
- * @param module:openmct.ObjectAPI~Identifier identifier An object identifier
- * @returns {boolean} true if the object can be mutated, otherwise returns false
- */
-ObjectAPI.prototype.supportsMutation = function (identifier) {
-    return this.isPersistable(identifier);
-};
+    if (domainObject.isMutable) {
+      domainObject.$refresh(refreshedObject);
+    } else {
+      refresh(domainObject, refreshedObject);
+    }
 
-/**
- * Observe changes to a domain object.
- * @param {module:openmct.DomainObject} object the object to observe
- * @param {string} path the property to observe
- * @param {Function} callback a callback to invoke when new values for
- *        this property are observed
- * @method observe
- * @memberof module:openmct.ObjectAPI#
- */
-ObjectAPI.prototype.observe = function (domainObject, path, callback) {
+    return domainObject;
+  }
+
+  /**
+   * @param module:openmct.ObjectAPI~Identifier identifier An object identifier
+   * @returns {boolean} true if the object can be mutated, otherwise returns false
+   */
+  supportsMutation(identifier) {
+    return this.isPersistable(identifier);
+  }
+
+  /**
+   * Observe changes to a domain object.
+   * @param {module:openmct.DomainObject} object the object to observe
+   * @param {string} path the property to observe
+   * @param {Function} callback a callback to invoke when new values for
+   *        this property are observed.
+   * @method observe
+   * @memberof module:openmct.ObjectAPI#
+   */
+  observe(domainObject, path, callback) {
     if (domainObject.isMutable) {
-        return domainObject.$observe(path, callback);
+      return domainObject.$observe(path, callback);
     } else {
-        let mutable = this._toMutable(domainObject);
-        mutable.$observe(path, callback);
+      let mutable = this.toMutable(domainObject);
+      mutable.$observe(path, callback);
 
-        return () => mutable.$destroy();
+      return () => mutable.$destroy();
+    }
+  }
+
+  /**
+   * @param {module:openmct.ObjectAPI~Identifier} identifier
+   * @returns {string} A string representation of the given identifier, including namespace and key
+   */
+  makeKeyString(identifier) {
+    return makeKeyString(identifier);
+  }
+
+  /**
+   * @param {string} keyString A string representation of the given identifier, that is, a namespace and key separated by a colon.
+   * @returns {module:openmct.ObjectAPI~Identifier} An identifier object
+   */
+  parseKeyString(keyString) {
+    return parseKeyString(keyString);
+  }
+
+  /**
+   * Given any number of identifiers, will return true if they are all equal, otherwise false.
+   * @param {module:openmct.ObjectAPI~Identifier[]} identifiers
+   */
+  areIdsEqual(...identifiers) {
+    const firstIdentifier = this.#parseKeyString(identifiers[0]);
+
+    return identifiers.map(this.#parseKeyString).every((identifier) => {
+      return (
+        identifier === firstIdentifier ||
+        (identifier.namespace === firstIdentifier.namespace &&
+          identifier.key === firstIdentifier.key)
+      );
+    });
+  }
+
+  /**
+   * Given an original path check if the path is reachable via root
+   * @param {Array<Object>} originalPath an array of path objects to check
+   * @returns {boolean} whether the domain object is reachable
+   */
+  isReachable(originalPath) {
+    if (originalPath && originalPath.length) {
+      return originalPath[originalPath.length - 1].type === 'root';
     }
-};
-
-/**
- * @param {module:openmct.ObjectAPI~Identifier} identifier
- * @returns {string} A string representation of the given identifier, including namespace and key
- */
-ObjectAPI.prototype.makeKeyString = function (identifier) {
-    return utils.makeKeyString(identifier);
-};
 
-/**
- * @param {string} keyString A string representation of the given identifier, that is, a namespace and key separated by a colon.
- * @returns {module:openmct.ObjectAPI~Identifier} An identifier object
- */
-ObjectAPI.prototype.parseKeyString = function (keyString) {
-    return utils.parseKeyString(keyString);
-};
+    return false;
+  }
 
-/**
- * Given any number of identifiers, will return true if they are all equal, otherwise false.
- * @param {module:openmct.ObjectAPI~Identifier[]} identifiers
- */
-ObjectAPI.prototype.areIdsEqual = function (...identifiers) {
-    return identifiers.map(utils.parseKeyString)
-        .every(identifier => {
-            return identifier === identifiers[0]
-                || (identifier.namespace === identifiers[0].namespace
-                    && identifier.key === identifiers[0].key);
-        });
-};
+  #pathContainsDomainObject(keyStringToCheck, path) {
+    if (!keyStringToCheck) {
+      return false;
+    }
 
-ObjectAPI.prototype.getOriginalPath = function (identifier, path = []) {
-    return this.get(identifier).then((domainObject) => {
-        path.push(domainObject);
-        let location = domainObject.location;
+    return path.some((pathElement) => {
+      const identifierToCheck = this.#parseKeyString(keyStringToCheck);
 
-        if (location) {
-            return this.getOriginalPath(utils.parseKeyString(location), path);
-        } else {
-            return path;
-        }
+      return this.areIdsEqual(identifierToCheck, pathElement.identifier);
     });
-};
+  }
+
+  /**
+   * Given an identifier, constructs the original path by walking up its parents
+   * @param {module:openmct.ObjectAPI~Identifier} identifier
+   * @param {Array<module:openmct.DomainObject>} path an array of path objects
+   * @param {AbortSignal} abortSignal (optional) signal to abort fetch requests
+   * @returns {Promise<Array<module:openmct.DomainObject>>} a promise containing an array of domain objects
+   */
+  async getOriginalPath(identifier, path = [], abortSignal = null) {
+    const domainObject = await this.get(identifier, abortSignal);
+    if (!domainObject) {
+      return [];
+    }
+    path.push(domainObject);
+    const { location } = domainObject;
+    if (location && !this.#pathContainsDomainObject(location, path)) {
+      // if we have a location, and we don't already have this in our constructed path,
+      // then keep walking up the path
+      return this.getOriginalPath(this.#parseKeyString(location), path, abortSignal);
+    } else {
+      return path;
+    }
+  }
+
+  /**
+   * Parse and construct an `objectPath` from a `navigationPath`.
+   *
+   * A `navigationPath` is a string of the form `"/browse/<keyString>/<keyString>/..."` that is used
+   * by the Open MCT router to navigate to a specific object.
+   *
+   * Throws an error if the `navigationPath` is malformed.
+   *
+   * @param {string} navigationPath
+   * @returns {DomainObject[]} objectPath
+   */
+  async getRelativeObjectPath(navigationPath) {
+    if (!navigationPath.startsWith('/browse/')) {
+      throw new Error(`Malformed navigation path: "${navigationPath}"`);
+    }
 
-ObjectAPI.prototype.isObjectPathToALink = function (domainObject, objectPath) {
-    return objectPath !== undefined
-        && objectPath.length > 1
-        && domainObject.location !== this.makeKeyString(objectPath[1].identifier);
-};
+    navigationPath = navigationPath.replace('/browse/', '');
 
-/**
- * Uniquely identifies a domain object.
- *
- * @typedef Identifier
- * @memberof module:openmct.ObjectAPI~
- * @property {string} namespace the namespace to/from which this domain
- *           object should be loaded/stored.
- * @property {string} key a unique identifier for the domain object
- *           within that namespace
- */
+    if (!navigationPath || navigationPath === '/') {
+      return [];
+    }
 
-/**
- * A domain object is an entity of relevance to a user's workflow, that
- * should appear as a distinct and meaningful object within the user
- * interface. Examples of domain objects are folders, telemetry sensors,
- * and so forth.
- *
- * A few common properties are defined for domain objects. Beyond these,
- * individual types of domain objects may add more as they see fit.
- *
- * @property {module:openmct.ObjectAPI~Identifier} identifier a key/namespace pair which
- *           uniquely identifies this domain object
- * @property {string} type the type of domain object
- * @property {string} name the human-readable name for this domain object
- * @property {string} [creator] the user name of the creator of this domain
- *           object
- * @property {number} [modified] the time, in milliseconds since the UNIX
- *           epoch, at which this domain object was last modified
- * @property {module:openmct.ObjectAPI~Identifier[]} [composition] if
- *           present, this will be used by the default composition provider
- *           to load domain objects
- * @typedef DomainObject
- * @memberof module:openmct
- */
+    // Remove any query params and split on '/'
+    const keyStrings = navigationPath.split('?')?.[0].split('/');
 
-function hasAlreadyBeenPersisted(domainObject) {
-    const result = domainObject.persisted !== undefined
-        && domainObject.persisted >= domainObject.modified;
+    if (keyStrings[0] !== 'ROOT') {
+      keyStrings.unshift('ROOT');
+    }
+
+    const objectPath = (
+      await Promise.all(
+        keyStrings.map((keyString) =>
+          this.supportsMutation(keyString)
+            ? this.getMutable(this.#parseKeyString(keyString))
+            : this.get(this.#parseKeyString(keyString))
+        )
+      )
+    ).reverse();
+
+    return objectPath;
+  }
+
+  isObjectPathToALink(domainObject, objectPath) {
+    return (
+      objectPath !== undefined &&
+      objectPath.length > 1 &&
+      domainObject.location !== this.#makeKeyString(objectPath[1].identifier)
+    );
+  }
+
+  isTransactionActive() {
+    return this.transaction !== undefined && this.transaction !== null;
+  }
+
+  #hasAlreadyBeenPersisted(domainObject) {
+    // modified can sometimes be undefined, so make it 0 in this case
+    const modified = domainObject.modified ?? Number.MIN_SAFE_INTEGER;
+    const result = domainObject.persisted !== undefined && domainObject.persisted >= modified;
 
     return result;
+  }
 }
-
-export default ObjectAPI;
diff --git a/src/api/objects/ObjectAPISearchSpec.js b/src/api/objects/ObjectAPISearchSpec.js
index 645c92aca11..74a1f73f2fb 100644
--- a/src/api/objects/ObjectAPISearchSpec.js
+++ b/src/api/objects/ObjectAPISearchSpec.js
@@ -1,6 +1,7 @@
-import ObjectAPI from './ObjectAPI.js';
+import { createOpenMct, resetApplicationState } from '../../utils/testing.js';
 
-describe("The Object API Search Function", () => {
+describe('The Object API Search Function', () => {
+  describe('The infrastructure', () => {
     const MOCK_PROVIDER_KEY = 'mockProvider';
     const ANOTHER_MOCK_PROVIDER_KEY = 'anotherMockProvider';
     const MOCK_PROVIDER_SEARCH_DELAY = 15000;
@@ -8,112 +9,215 @@ describe("The Object API Search Function", () => {
     const TOTAL_TIME_ELAPSED = 21000;
     const BASE_TIME = new Date(2021, 0, 1);
 
-    let objectAPI;
     let mockObjectProvider;
     let anotherMockObjectProvider;
-    let mockFallbackProvider;
-    let fallbackProviderSearchResults;
-    let resultsPromises;
-
-    beforeEach(() => {
-        jasmine.clock().install();
-        jasmine.clock().mockDate(BASE_TIME);
-
-        resultsPromises = [];
-        fallbackProviderSearchResults = {
-            hits: []
-        };
-
-        objectAPI = new ObjectAPI();
-
-        mockObjectProvider = jasmine.createSpyObj("mock object provider", [
-            "search"
-        ]);
-        anotherMockObjectProvider = jasmine.createSpyObj("another mock object provider", [
-            "search"
-        ]);
-        mockFallbackProvider = jasmine.createSpyObj("super secret fallback provider", [
-            "superSecretFallbackSearch"
-        ]);
-        objectAPI.addProvider('objects', mockObjectProvider);
-        objectAPI.addProvider('other-objects', anotherMockObjectProvider);
-        objectAPI.supersecretSetFallbackProvider(mockFallbackProvider);
-
-        mockObjectProvider.search.and.callFake(() => {
-            return new Promise(resolve => {
-                const mockProviderSearch = {
-                    name: MOCK_PROVIDER_KEY,
-                    start: new Date()
-                };
-
-                setTimeout(() => {
-                    mockProviderSearch.end = new Date();
-
-                    return resolve(mockProviderSearch);
-                }, MOCK_PROVIDER_SEARCH_DELAY);
-            });
+    let openmct;
+
+    beforeEach((done) => {
+      openmct = createOpenMct();
+
+      mockObjectProvider = jasmine.createSpyObj('mock object provider', [
+        'search',
+        'supportsSearchType'
+      ]);
+      anotherMockObjectProvider = jasmine.createSpyObj('another mock object provider', [
+        'search',
+        'supportsSearchType'
+      ]);
+      openmct.objects.addProvider('objects', mockObjectProvider);
+      openmct.objects.addProvider('other-objects', anotherMockObjectProvider);
+      mockObjectProvider.supportsSearchType.and.callFake(() => {
+        return true;
+      });
+      mockObjectProvider.search.and.callFake(() => {
+        return new Promise((resolve) => {
+          const mockProviderSearch = {
+            name: MOCK_PROVIDER_KEY,
+            start: new Date()
+          };
+
+          setTimeout(() => {
+            mockProviderSearch.end = new Date();
+
+            return resolve(mockProviderSearch);
+          }, MOCK_PROVIDER_SEARCH_DELAY);
         });
-        anotherMockObjectProvider.search.and.callFake(() => {
-            return new Promise(resolve => {
-                const anotherMockProviderSearch = {
-                    name: ANOTHER_MOCK_PROVIDER_KEY,
-                    start: new Date()
-                };
-
-                setTimeout(() => {
-                    anotherMockProviderSearch.end = new Date();
-
-                    return resolve(anotherMockProviderSearch);
-                }, ANOTHER_MOCK_PROVIDER_SEARCH_DELAY);
-            });
+      });
+      anotherMockObjectProvider.supportsSearchType.and.callFake(() => {
+        return true;
+      });
+      anotherMockObjectProvider.search.and.callFake(() => {
+        return new Promise((resolve) => {
+          const anotherMockProviderSearch = {
+            name: ANOTHER_MOCK_PROVIDER_KEY,
+            start: new Date()
+          };
+
+          setTimeout(() => {
+            anotherMockProviderSearch.end = new Date();
+
+            return resolve(anotherMockProviderSearch);
+          }, ANOTHER_MOCK_PROVIDER_SEARCH_DELAY);
         });
-        mockFallbackProvider.superSecretFallbackSearch.and.callFake(
-            () => new Promise(
-                resolve => setTimeout(
-                    () => resolve(fallbackProviderSearchResults),
-                    50
-                )
-            )
-        );
-
-        resultsPromises = objectAPI.search('foo');
-
-        jasmine.clock().tick(TOTAL_TIME_ELAPSED);
+      });
+      openmct.on('start', () => {
+        done();
+      });
+      openmct.startHeadless();
+    });
+    afterEach(async () => {
+      await resetApplicationState(openmct);
+    });
+    it("uses each objects given provider's search function", () => {
+      openmct.objects.search('foo');
+      expect(mockObjectProvider.search).toHaveBeenCalled();
+    });
+    it('provides each providers results as promises that resolve in parallel', async () => {
+      jasmine.clock().install();
+      jasmine.clock().mockDate(BASE_TIME);
+      const resultsPromises = openmct.objects.search('foo');
+      jasmine.clock().tick(TOTAL_TIME_ELAPSED);
+      const results = await Promise.all(resultsPromises);
+      const mockProviderResults = results.find((result) => result.name === MOCK_PROVIDER_KEY);
+      const anotherMockProviderResults = results.find(
+        (result) => result.name === ANOTHER_MOCK_PROVIDER_KEY
+      );
+      const mockProviderStart = mockProviderResults.start.getTime();
+      const mockProviderEnd = mockProviderResults.end.getTime();
+      const anotherMockProviderStart = anotherMockProviderResults.start.getTime();
+      const anotherMockProviderEnd = anotherMockProviderResults.end.getTime();
+      const searchElapsedTime =
+        Math.max(mockProviderEnd, anotherMockProviderEnd) -
+        Math.min(mockProviderEnd, anotherMockProviderEnd);
+
+      expect(mockProviderStart).toBeLessThan(anotherMockProviderEnd);
+      expect(anotherMockProviderStart).toBeLessThan(mockProviderEnd);
+      expect(searchElapsedTime).toBeLessThan(
+        MOCK_PROVIDER_SEARCH_DELAY + ANOTHER_MOCK_PROVIDER_SEARCH_DELAY
+      );
+
+      jasmine.clock().uninstall();
+    });
+  });
+
+  describe('The in-memory search indexer', () => {
+    let openmct;
+    let mockDomainObject1;
+    let mockIdentifier1;
+    let mockDomainObject2;
+    let mockIdentifier2;
+    let mockDomainObject3;
+    let mockIdentifier3;
+
+    beforeEach((done) => {
+      openmct = createOpenMct();
+      const defaultObjectProvider = openmct.objects.getProvider({
+        key: '',
+        namespace: ''
+      });
+      openmct.objects.addProvider('foo', defaultObjectProvider);
+      spyOn(openmct.objects.inMemorySearchProvider, 'search').and.callThrough();
+      spyOn(openmct.objects.inMemorySearchProvider, 'localSearchForObjects').and.callThrough();
+
+      openmct.on('start', async () => {
+        mockIdentifier1 = {
+          key: 'some-object',
+          namespace: 'foo'
+        };
+        mockDomainObject1 = {
+          type: 'clock',
+          name: 'fooRabbit',
+          identifier: mockIdentifier1
+        };
+        mockIdentifier2 = {
+          key: 'some-other-object',
+          namespace: 'foo'
+        };
+        mockDomainObject2 = {
+          type: 'clock',
+          name: 'fooBear',
+          identifier: mockIdentifier2
+        };
+        mockIdentifier3 = {
+          key: 'yet-another-object',
+          namespace: 'foo'
+        };
+        mockDomainObject3 = {
+          type: 'clock',
+          name: 'redBear',
+          identifier: mockIdentifier3
+        };
+        await openmct.objects.inMemorySearchProvider.index(mockDomainObject1);
+        await openmct.objects.inMemorySearchProvider.index(mockDomainObject2);
+        await openmct.objects.inMemorySearchProvider.index(mockDomainObject3);
+        done();
+      });
+      openmct.startHeadless();
     });
 
-    afterEach(() => {
-        jasmine.clock().uninstall();
+    afterEach(async () => {
+      await resetApplicationState(openmct);
     });
 
-    it("uses each objects given provider's search function", () => {
-        expect(mockObjectProvider.search).toHaveBeenCalled();
-        expect(anotherMockObjectProvider.search).toHaveBeenCalled();
+    it('can provide indexing without a provider', () => {
+      openmct.objects.search('foo');
+      expect(openmct.objects.inMemorySearchProvider.search).toHaveBeenCalled();
+    });
+
+    it('can do partial search', async () => {
+      const searchPromises = openmct.objects.search('foo');
+      const searchResults = await Promise.all(searchPromises);
+      expect(searchResults[0].length).toBe(2);
+    });
+
+    it('returns nothing when appropriate', async () => {
+      const searchPromises = openmct.objects.search('laser');
+      const searchResults = await Promise.all(searchPromises);
+      expect(searchResults[0].length).toBe(0);
     });
 
-    it("uses the fallback indexed search for objects without a search function provided", () => {
-        expect(mockFallbackProvider.superSecretFallbackSearch).toHaveBeenCalled();
+    it('returns exact matches', async () => {
+      const searchPromises = openmct.objects.search('redBear');
+      const searchResults = await Promise.all(searchPromises);
+      expect(searchResults[0].length).toBe(1);
     });
 
-    it("provides each providers results as promises that resolve in parallel", async () => {
-        const results = await Promise.all(resultsPromises);
-        const mockProviderResults = results.find(
-            result => result.name === MOCK_PROVIDER_KEY
-        );
-        const anotherMockProviderResults = results.find(
-            result => result.name === ANOTHER_MOCK_PROVIDER_KEY
-        );
-        const mockProviderStart = mockProviderResults.start.getTime();
-        const mockProviderEnd = mockProviderResults.end.getTime();
-        const anotherMockProviderStart = anotherMockProviderResults.start.getTime();
-        const anotherMockProviderEnd = anotherMockProviderResults.end.getTime();
-        const searchElapsedTime = Math.max(mockProviderEnd, anotherMockProviderEnd)
-            - Math.min(mockProviderEnd, anotherMockProviderEnd);
-
-        expect(mockProviderStart).toBeLessThan(anotherMockProviderEnd);
-        expect(anotherMockProviderStart).toBeLessThan(mockProviderEnd);
-        expect(searchElapsedTime).toBeLessThan(
-            MOCK_PROVIDER_SEARCH_DELAY
-            + ANOTHER_MOCK_PROVIDER_SEARCH_DELAY
-        );
+    describe('Without Shared Workers', () => {
+      let sharedWorkerToRestore;
+      beforeEach(async () => {
+        // use local worker
+        sharedWorkerToRestore = openmct.objects.inMemorySearchProvider.worker;
+        openmct.objects.inMemorySearchProvider.worker = null;
+        // reindex locally
+        await openmct.objects.inMemorySearchProvider.index(mockDomainObject1);
+        await openmct.objects.inMemorySearchProvider.index(mockDomainObject2);
+        await openmct.objects.inMemorySearchProvider.index(mockDomainObject3);
+      });
+      afterEach(() => {
+        openmct.objects.inMemorySearchProvider.worker = sharedWorkerToRestore;
+      });
+      it('calls local search', () => {
+        openmct.objects.search('foo');
+        expect(openmct.objects.inMemorySearchProvider.localSearchForObjects).toHaveBeenCalled();
+      });
+
+      it('can do partial search', async () => {
+        const searchPromises = openmct.objects.search('foo');
+        const searchResults = await Promise.all(searchPromises);
+        expect(searchResults[0].length).toBe(2);
+      });
+
+      it('returns nothing when appropriate', async () => {
+        const searchPromises = openmct.objects.search('laser');
+        const searchResults = await Promise.all(searchPromises);
+        expect(searchResults[0].length).toBe(0);
+      });
+
+      it('returns exact matches', async () => {
+        const searchPromises = openmct.objects.search('redBear');
+        const searchResults = await Promise.all(searchPromises);
+        expect(searchResults[0].length).toBe(1);
+      });
     });
+  });
 });
diff --git a/src/api/objects/ObjectAPISpec.js b/src/api/objects/ObjectAPISpec.js
index 697d61a58c3..249e29071e1 100644
--- a/src/api/objects/ObjectAPISpec.js
+++ b/src/api/objects/ObjectAPISpec.js
@@ -1,313 +1,603 @@
+import { createOpenMct, resetApplicationState } from '../../utils/testing.js';
 import ObjectAPI from './ObjectAPI.js';
 
-describe("The Object API", () => {
-    let objectAPI;
-    let typeRegistry;
-    let openmct = {};
-    let mockIdentifierService;
-    let mockDomainObject;
-    const TEST_NAMESPACE = "test-namespace";
-    const FIFTEEN_MINUTES = 15 * 60 * 1000;
-
-    beforeEach(() => {
-        typeRegistry = jasmine.createSpyObj('typeRegistry', [
-            'get'
-        ]);
-        openmct.$injector = jasmine.createSpyObj('$injector', ['get']);
-        mockIdentifierService = jasmine.createSpyObj(
-            'identifierService',
-            ['parse']
-        );
-        mockIdentifierService.parse.and.returnValue({
-            getSpace: () => {
-                return TEST_NAMESPACE;
-            }
+describe('The Object API', () => {
+  let objectAPI;
+  let typeRegistry;
+  let openmct = {};
+  let mockDomainObject;
+  const TEST_NAMESPACE = 'test-namespace';
+  const TEST_KEY = 'test-key';
+  const USERNAME = 'Joan Q Public';
+  const FIFTEEN_MINUTES = 15 * 60 * 1000;
+
+  beforeEach((done) => {
+    typeRegistry = jasmine.createSpyObj('typeRegistry', ['get']);
+    const userProvider = {
+      isLoggedIn() {
+        return true;
+      },
+      getCurrentUser() {
+        return Promise.resolve({
+          getName() {
+            return USERNAME;
+          }
         });
-
-        openmct.$injector.get.and.returnValue(mockIdentifierService);
-        objectAPI = new ObjectAPI(typeRegistry, openmct);
-        mockDomainObject = {
-            identifier: {
-                namespace: TEST_NAMESPACE,
-                key: "test-key"
-            },
-            name: "test object",
-            type: "test-type"
-        };
+      },
+      getPossibleRoles() {
+        return Promise.resolve([]);
+      }
+    };
+    openmct = createOpenMct();
+    openmct.user.setProvider(userProvider);
+    objectAPI = openmct.objects;
+
+    openmct.editor = {};
+    openmct.editor.isEditing = () => false;
+
+    mockDomainObject = {
+      identifier: {
+        namespace: TEST_NAMESPACE,
+        key: TEST_KEY
+      },
+      name: 'test object',
+      type: 'test-type'
+    };
+    openmct.on('start', () => {
+      done();
+    });
+    openmct.startHeadless();
+  });
+
+  afterEach(async () => {
+    await resetApplicationState(openmct);
+  });
+
+  describe('The save function', () => {
+    it('Rejects if no provider available', async () => {
+      let rejected = false;
+      objectAPI.providers = {};
+      objectAPI.fallbackProvider = null;
+
+      try {
+        await objectAPI.save(mockDomainObject);
+      } catch (error) {
+        rejected = true;
+      }
+
+      expect(rejected).toBe(true);
     });
-    describe("The save function", () => {
-        it("Rejects if no provider available", () => {
-            let rejected = false;
+    describe('when a provider is available', () => {
+      let mockProvider;
+      beforeEach(() => {
+        mockProvider = jasmine.createSpyObj('mock provider', ['create', 'update']);
+        mockProvider.create.and.returnValue(Promise.resolve(true));
+        mockProvider.update.and.returnValue(Promise.resolve(true));
+        objectAPI.addProvider(TEST_NAMESPACE, mockProvider);
+      });
+      it("Adds a 'created' timestamp to new objects", async () => {
+        await objectAPI.save(mockDomainObject);
+        expect(mockDomainObject.created).not.toBeUndefined();
+      });
+      it("Calls 'create' on provider if object is new", async () => {
+        await objectAPI.save(mockDomainObject);
+        expect(mockProvider.create).toHaveBeenCalled();
+        expect(mockProvider.update).not.toHaveBeenCalled();
+      });
+      it("Calls 'update' on provider if object is not new", async () => {
+        mockDomainObject.persisted = Date.now() - FIFTEEN_MINUTES;
+        mockDomainObject.modified = Date.now();
+
+        await objectAPI.save(mockDomainObject);
+        expect(mockProvider.create).not.toHaveBeenCalled();
+        expect(mockProvider.update).toHaveBeenCalled();
+      });
+      describe('the persisted timestamp for existing objects', () => {
+        let persistedTimestamp;
+        beforeEach(() => {
+          persistedTimestamp = Date.now() - FIFTEEN_MINUTES;
+          mockDomainObject.persisted = persistedTimestamp;
+          mockDomainObject.modified = Date.now();
+        });
 
-            return objectAPI.save(mockDomainObject)
-                .catch(() => rejected = true)
-                .then(() => expect(rejected).toBe(true));
+        it('is updated', async () => {
+          await objectAPI.save(mockDomainObject);
+          expect(mockDomainObject.persisted).toBeDefined();
+          expect(mockDomainObject.persisted > persistedTimestamp).toBe(true);
         });
-        describe("when a provider is available", () => {
-            let mockProvider;
-            beforeEach(() => {
-                mockProvider = jasmine.createSpyObj("mock provider", [
-                    "create",
-                    "update"
-                ]);
-                mockProvider.create.and.returnValue(Promise.resolve(true));
-                mockProvider.update.and.returnValue(Promise.resolve(true));
-                objectAPI.addProvider(TEST_NAMESPACE, mockProvider);
-            });
-            it("Calls 'create' on provider if object is new", () => {
-                objectAPI.save(mockDomainObject);
-                expect(mockProvider.create).toHaveBeenCalled();
-                expect(mockProvider.update).not.toHaveBeenCalled();
-            });
-            it("Calls 'update' on provider if object is not new", () => {
-                mockDomainObject.persisted = Date.now() - FIFTEEN_MINUTES;
-                mockDomainObject.modified = Date.now();
-
-                objectAPI.save(mockDomainObject);
-                expect(mockProvider.create).not.toHaveBeenCalled();
-                expect(mockProvider.update).toHaveBeenCalled();
-            });
-
-            it("Does not persist if the object is unchanged", () => {
-                mockDomainObject.persisted =
-                    mockDomainObject.modified = Date.now();
-
-                objectAPI.save(mockDomainObject);
-                expect(mockProvider.create).not.toHaveBeenCalled();
-                expect(mockProvider.update).not.toHaveBeenCalled();
-            });
+        it('is >= modified timestamp', async () => {
+          await objectAPI.save(mockDomainObject);
+          expect(mockDomainObject.persisted >= mockDomainObject.modified).toBe(true);
+        });
+      });
+      describe('the persisted timestamp for new objects', () => {
+        it('is updated', async () => {
+          await objectAPI.save(mockDomainObject);
+          expect(mockDomainObject.persisted).toBeDefined();
+        });
+        it('is >= modified timestamp', async () => {
+          await objectAPI.save(mockDomainObject);
+          expect(mockDomainObject.persisted >= mockDomainObject.modified).toBe(true);
+        });
+      });
+
+      it("Sets the current user for 'createdBy' on new objects", async () => {
+        await objectAPI.save(mockDomainObject);
+        expect(mockDomainObject.createdBy).toBe(USERNAME);
+      });
+      it("Sets the current user for 'modifiedBy' on existing objects", async () => {
+        mockDomainObject.persisted = Date.now() - FIFTEEN_MINUTES;
+        mockDomainObject.modified = Date.now();
+
+        await objectAPI.save(mockDomainObject);
+        expect(mockDomainObject.modifiedBy).toBe(USERNAME);
+      });
+
+      it('Does not persist if the object is unchanged', () => {
+        mockDomainObject.persisted = mockDomainObject.modified = Date.now();
+
+        objectAPI.save(mockDomainObject);
+        expect(mockProvider.create).not.toHaveBeenCalled();
+        expect(mockProvider.update).not.toHaveBeenCalled();
+      });
+
+      describe('Shows a notification on persistence conflict', () => {
+        beforeEach(() => {
+          openmct.notifications.error = jasmine.createSpy('error');
+        });
+
+        it('on create', () => {
+          mockProvider.create.and.returnValue(
+            Promise.reject(new openmct.objects.errors.Conflict('Test Conflict error'))
+          );
+
+          return objectAPI.save(mockDomainObject).catch(() => {
+            expect(openmct.notifications.error).toHaveBeenCalledWith(
+              `Conflict detected while saving ${TEST_NAMESPACE}:${TEST_KEY}`
+            );
+          });
         });
-    });
 
-    describe("The get function", () => {
-        describe("when a provider is available", () => {
-            let mockProvider;
-            let mockInterceptor;
-            let anotherMockInterceptor;
-            let notApplicableMockInterceptor;
-            beforeEach(() => {
-                mockProvider = jasmine.createSpyObj("mock provider", [
-                    "get"
-                ]);
-                mockProvider.get.and.returnValue(Promise.resolve(mockDomainObject));
-
-                mockInterceptor = jasmine.createSpyObj("mock interceptor", [
-                    "appliesTo",
-                    "invoke"
-                ]);
-                mockInterceptor.appliesTo.and.returnValue(true);
-                mockInterceptor.invoke.and.callFake((identifier, object) => {
-                    return Object.assign({
-                        changed: true
-                    }, object);
-                });
-
-                anotherMockInterceptor = jasmine.createSpyObj("another mock interceptor", [
-                    "appliesTo",
-                    "invoke"
-                ]);
-                anotherMockInterceptor.appliesTo.and.returnValue(true);
-                anotherMockInterceptor.invoke.and.callFake((identifier, object) => {
-                    return Object.assign({
-                        alsoChanged: true
-                    }, object);
-                });
-
-                notApplicableMockInterceptor = jasmine.createSpyObj("not applicable mock interceptor", [
-                    "appliesTo",
-                    "invoke"
-                ]);
-                notApplicableMockInterceptor.appliesTo.and.returnValue(false);
-                notApplicableMockInterceptor.invoke.and.callFake((identifier, object) => {
-                    return Object.assign({
-                        shouldNotBeChanged: true
-                    }, object);
-                });
-                objectAPI.addProvider(TEST_NAMESPACE, mockProvider);
-                objectAPI.addGetInterceptor(mockInterceptor);
-                objectAPI.addGetInterceptor(anotherMockInterceptor);
-                objectAPI.addGetInterceptor(notApplicableMockInterceptor);
-            });
-
-            it("Caches multiple requests for the same object", () => {
-                expect(mockProvider.get.calls.count()).toBe(0);
-                objectAPI.get(mockDomainObject.identifier);
-                expect(mockProvider.get.calls.count()).toBe(1);
-                objectAPI.get(mockDomainObject.identifier);
-                expect(mockProvider.get.calls.count()).toBe(1);
-            });
-
-            it("applies any applicable interceptors", () => {
-                expect(mockDomainObject.changed).toBeUndefined();
-                objectAPI.get(mockDomainObject.identifier).then((object) => {
-                    expect(object.changed).toBeTrue();
-                    expect(object.alsoChanged).toBeTrue();
-                    expect(object.shouldNotBeChanged).toBeUndefined();
-                });
-            });
+        it('on update', () => {
+          mockProvider.update.and.returnValue(
+            Promise.reject(new openmct.objects.errors.Conflict('Test Conflict error'))
+          );
+          mockDomainObject.persisted = Date.now() - FIFTEEN_MINUTES;
+          mockDomainObject.modified = Date.now();
+
+          return objectAPI.save(mockDomainObject).catch(() => {
+            expect(openmct.notifications.error).toHaveBeenCalledWith(
+              `Conflict detected while saving ${TEST_NAMESPACE}:${TEST_KEY}`
+            );
+          });
         });
+      });
     });
+  });
+
+  describe('The get function', () => {
+    describe('when a provider is available', () => {
+      let mockProvider;
+      let mockInterceptor;
+      let anotherMockInterceptor;
+      let notApplicableMockInterceptor;
+      beforeEach(() => {
+        mockProvider = jasmine.createSpyObj('mock provider', ['get']);
+        mockProvider.get.and.returnValue(Promise.resolve(mockDomainObject));
+
+        mockInterceptor = jasmine.createSpyObj('mock interceptor', ['appliesTo', 'invoke']);
+        mockInterceptor.appliesTo.and.returnValue(true);
+        mockInterceptor.invoke.and.callFake((identifier, object) => {
+          return Object.assign(
+            {
+              changed: true
+            },
+            object
+          );
+        });
 
-    describe("the mutation API", () => {
-        let testObject;
-        let updatedTestObject;
-        let mutable;
-        let mockProvider;
-        let callbacks = [];
-
-        beforeEach(function () {
-            objectAPI = new ObjectAPI(typeRegistry, openmct);
-            testObject = {
-                identifier: {
-                    namespace: TEST_NAMESPACE,
-                    key: 'test-key'
-                },
-                name: 'test object',
-                type: 'notebook',
-                otherAttribute: 'other-attribute-value',
-                modified: 0,
-                persisted: 0,
-                objectAttribute: {
-                    embeddedObject: {
-                        embeddedKey: 'embedded-value'
-                    }
-                }
-            };
-            updatedTestObject = Object.assign({
-                otherAttribute: 'changed-attribute-value'
-            }, testObject);
-            updatedTestObject.modified = 1;
-            updatedTestObject.persisted = 1;
-
-            mockProvider = jasmine.createSpyObj("mock provider", [
-                "get",
-                "create",
-                "update",
-                "observe",
-                "observeObjectChanges"
-            ]);
-            mockProvider.get.and.returnValue(Promise.resolve(testObject));
-            mockProvider.observeObjectChanges.and.callFake(() => {
-                callbacks[0](updatedTestObject);
-                callbacks.splice(0, 1);
-
-                return () => {};
-            });
-            mockProvider.observe.and.callFake((id, callback) => {
-                if (callbacks.length === 0) {
-                    callbacks.push(callback);
-                } else {
-                    callbacks[0] = callback;
-                }
-
-                return () => {};
-            });
-
-            objectAPI.addProvider(TEST_NAMESPACE, mockProvider);
-
-            return objectAPI.getMutable(testObject.identifier)
-                .then(object => {
-                    mutable = object;
-
-                    return mutable;
-                });
+        anotherMockInterceptor = jasmine.createSpyObj('another mock interceptor', [
+          'appliesTo',
+          'invoke'
+        ]);
+        anotherMockInterceptor.appliesTo.and.returnValue(true);
+        anotherMockInterceptor.invoke.and.callFake((identifier, object) => {
+          return Object.assign(
+            {
+              alsoChanged: true
+            },
+            object
+          );
         });
 
-        afterEach(() => {
-            mutable.$destroy();
+        notApplicableMockInterceptor = jasmine.createSpyObj('not applicable mock interceptor', [
+          'appliesTo',
+          'invoke'
+        ]);
+        notApplicableMockInterceptor.appliesTo.and.returnValue(false);
+        notApplicableMockInterceptor.invoke.and.callFake((identifier, object) => {
+          return Object.assign(
+            {
+              shouldNotBeChanged: true
+            },
+            object
+          );
         });
+        objectAPI.addProvider(TEST_NAMESPACE, mockProvider);
+        objectAPI.addGetInterceptor(mockInterceptor);
+        objectAPI.addGetInterceptor(anotherMockInterceptor);
+        objectAPI.addGetInterceptor(notApplicableMockInterceptor);
+      });
+
+      it('Caches multiple requests for the same object', () => {
+        const promises = [];
+        expect(mockProvider.get.calls.count()).toBe(0);
+        promises.push(objectAPI.get(mockDomainObject.identifier));
+        expect(mockProvider.get.calls.count()).toBe(1);
+        promises.push(objectAPI.get(mockDomainObject.identifier));
+        expect(mockProvider.get.calls.count()).toBe(1);
+
+        return Promise.all(promises);
+      });
+
+      it('applies any applicable interceptors', () => {
+        expect(mockDomainObject.changed).toBeUndefined();
+
+        return objectAPI.get(mockDomainObject.identifier).then((object) => {
+          expect(object.changed).toBeTrue();
+          expect(object.alsoChanged).toBeTrue();
+          expect(object.shouldNotBeChanged).toBeUndefined();
+        });
+      });
+
+      it('displays a notification in the event of an error', () => {
+        openmct.notifications.warn = jasmine.createSpy('warn');
+        mockProvider.get.and.returnValue(
+          Promise.reject({
+            name: 'Error',
+            status: 404,
+            statusText: 'Not Found'
+          })
+        );
 
-        it('mutates the original object', () => {
-            const MUTATED_NAME = 'mutated name';
-            objectAPI.mutate(testObject, 'name', MUTATED_NAME);
-            expect(testObject.name).toBe(MUTATED_NAME);
+        return objectAPI.get(mockDomainObject.identifier).catch(() => {
+          expect(openmct.notifications.warn).toHaveBeenCalledWith(
+            `Failed to retrieve object ${TEST_NAMESPACE}:${TEST_KEY}`
+          );
         });
+      });
+    });
+  });
+
+  describe('the mutation API', () => {
+    let testObject;
+    let updatedTestObject;
+    let mutable;
+    let mockProvider;
+    let callbacks = [];
+
+    beforeEach(function () {
+      objectAPI = new ObjectAPI(typeRegistry, openmct);
+      testObject = {
+        identifier: {
+          namespace: TEST_NAMESPACE,
+          key: TEST_KEY
+        },
+        name: 'test object',
+        type: 'notebook',
+        otherAttribute: 'other-attribute-value',
+        modified: 0,
+        persisted: 0,
+        objectAttribute: {
+          embeddedObject: {
+            embeddedKey: 'embedded-value'
+          }
+        }
+      };
+      updatedTestObject = Object.assign(
+        {
+          otherAttribute: 'changed-attribute-value'
+        },
+        testObject
+      );
+      updatedTestObject.modified = 1;
+      updatedTestObject.persisted = 1;
+
+      mockProvider = jasmine.createSpyObj('mock provider', [
+        'get',
+        'create',
+        'update',
+        'observe',
+        'observeObjectChanges'
+      ]);
+      mockProvider.get.and.returnValue(Promise.resolve(testObject));
+      mockProvider.create.and.returnValue(Promise.resolve(true));
+      mockProvider.update.and.returnValue(Promise.resolve(true));
+      mockProvider.observeObjectChanges.and.callFake(() => {
+        callbacks[0](updatedTestObject);
+        callbacks.splice(0, 1);
+
+        return () => {};
+      });
+      mockProvider.observe.and.callFake((id, callback) => {
+        if (callbacks.length === 0) {
+          callbacks.push(callback);
+        } else {
+          callbacks[0] = callback;
+        }
+
+        return () => {};
+      });
+
+      objectAPI.addProvider(TEST_NAMESPACE, mockProvider);
+
+      return objectAPI.getMutable(testObject.identifier).then((object) => {
+        mutable = object;
+
+        return mutable;
+      });
+    });
+
+    afterEach(() => {
+      mutable.$destroy();
+    });
+
+    it('mutates the original object', () => {
+      const MUTATED_NAME = 'mutated name';
+      objectAPI.mutate(testObject, 'name', MUTATED_NAME);
+      expect(testObject.name).toBe(MUTATED_NAME);
+    });
+
+    it('Provides a way of refreshing an object from the persistence store', () => {
+      const modifiedTestObject = JSON.parse(JSON.stringify(testObject));
+      const OTHER_ATTRIBUTE_VALUE = 'Modified value';
+      const NEW_ATTRIBUTE_VALUE = 'A new attribute';
+      modifiedTestObject.otherAttribute = OTHER_ATTRIBUTE_VALUE;
+      modifiedTestObject.newAttribute = NEW_ATTRIBUTE_VALUE;
+      delete modifiedTestObject.objectAttribute;
+
+      spyOn(objectAPI, 'get');
+      objectAPI.get.and.returnValue(Promise.resolve(modifiedTestObject));
 
-        describe ('uses a MutableDomainObject', () => {
-            it('and retains properties of original object ', function () {
-                expect(hasOwnProperty(mutable, 'identifier')).toBe(true);
-                expect(hasOwnProperty(mutable, 'otherAttribute')).toBe(true);
-                expect(mutable.identifier).toEqual(testObject.identifier);
-                expect(mutable.otherAttribute).toEqual(testObject.otherAttribute);
-            });
-
-            it('that is identical to original object when serialized', function () {
-                expect(JSON.stringify(mutable)).toEqual(JSON.stringify(testObject));
-            });
-
-            it('that observes for object changes', function () {
-                let mockListener = jasmine.createSpy('mockListener');
-                objectAPI.observe(testObject, '*', mockListener);
-                mockProvider.observeObjectChanges();
-                expect(mockListener).toHaveBeenCalled();
-            });
+      expect(objectAPI.get).not.toHaveBeenCalled();
+
+      return objectAPI.refresh(testObject).then(() => {
+        expect(objectAPI.get).toHaveBeenCalledWith(testObject.identifier, null, false);
+
+        expect(testObject.otherAttribute).toEqual(OTHER_ATTRIBUTE_VALUE);
+        expect(testObject.newAttribute).toEqual(NEW_ATTRIBUTE_VALUE);
+        expect(testObject.objectAttribute).not.toBeDefined();
+      });
+    });
+
+    describe('uses a MutableDomainObject', () => {
+      it('and retains properties of original object ', function () {
+        expect(hasOwnProperty(mutable, 'identifier')).toBe(true);
+        expect(hasOwnProperty(mutable, 'otherAttribute')).toBe(true);
+        expect(mutable.identifier).toEqual(testObject.identifier);
+        expect(mutable.otherAttribute).toEqual(testObject.otherAttribute);
+      });
+
+      it('that is identical to original object when serialized', function () {
+        expect(JSON.stringify(mutable)).toEqual(JSON.stringify(testObject));
+      });
+
+      it('that observes for object changes', function () {
+        let mockListener = jasmine.createSpy('mockListener');
+        objectAPI.observe(testObject, '*', mockListener);
+        mockProvider.observeObjectChanges();
+        expect(mockListener).toHaveBeenCalled();
+      });
+    });
+
+    describe('uses events', function () {
+      let testObjectDuplicate;
+      let mutableSecondInstance;
+
+      beforeEach(function () {
+        // Duplicate object to guarantee we are not sharing object instance, which would invalidate test
+        testObjectDuplicate = JSON.parse(JSON.stringify(testObject));
+        mutableSecondInstance = objectAPI.toMutable(testObjectDuplicate);
+      });
+
+      afterEach(() => {
+        mutableSecondInstance.$destroy();
+      });
+
+      it('to stay synchronized when mutated', function () {
+        objectAPI.mutate(mutable, 'otherAttribute', 'new-attribute-value');
+        expect(mutableSecondInstance.otherAttribute).toBe('new-attribute-value');
+      });
+
+      it('to indicate when a property changes', function () {
+        let mutationCallback = jasmine.createSpy('mutation-callback');
+        let unlisten;
+
+        return new Promise(function (resolve) {
+          mutationCallback.and.callFake(resolve);
+          unlisten = objectAPI.observe(mutableSecondInstance, 'otherAttribute', mutationCallback);
+          objectAPI.mutate(mutable, 'otherAttribute', 'some-new-value');
+        }).then(function () {
+          expect(mutationCallback).toHaveBeenCalledWith('some-new-value', 'other-attribute-value');
+          unlisten();
         });
+      });
+
+      it('to indicate when a child property has changed', function () {
+        let embeddedKeyCallback = jasmine.createSpy('embeddedKeyCallback');
+        let embeddedObjectCallback = jasmine.createSpy('embeddedObjectCallback');
+        let objectAttributeCallback = jasmine.createSpy('objectAttribute');
+        let listeners = [];
+
+        return new Promise(function (resolve) {
+          objectAttributeCallback.and.callFake(resolve);
+
+          listeners.push(
+            objectAPI.observe(
+              mutableSecondInstance,
+              'objectAttribute.embeddedObject.embeddedKey',
+              embeddedKeyCallback
+            )
+          );
+          listeners.push(
+            objectAPI.observe(
+              mutableSecondInstance,
+              'objectAttribute.embeddedObject',
+              embeddedObjectCallback
+            )
+          );
+          listeners.push(
+            objectAPI.observe(mutableSecondInstance, 'objectAttribute', objectAttributeCallback)
+          );
+
+          objectAPI.mutate(
+            mutable,
+            'objectAttribute.embeddedObject.embeddedKey',
+            'updated-embedded-value'
+          );
+        }).then(function () {
+          expect(embeddedKeyCallback).toHaveBeenCalledWith(
+            'updated-embedded-value',
+            'embedded-value'
+          );
+          expect(embeddedObjectCallback).toHaveBeenCalledWith(
+            {
+              embeddedKey: 'updated-embedded-value'
+            },
+            {
+              embeddedKey: 'embedded-value'
+            }
+          );
+          expect(objectAttributeCallback).toHaveBeenCalledWith(
+            {
+              embeddedObject: {
+                embeddedKey: 'updated-embedded-value'
+              }
+            },
+            {
+              embeddedObject: {
+                embeddedKey: 'embedded-value'
+              }
+            }
+          );
 
-        describe('uses events', function () {
-            let testObjectDuplicate;
-            let mutableSecondInstance;
-
-            beforeEach(function () {
-                // Duplicate object to guarantee we are not sharing object instance, which would invalidate test
-                testObjectDuplicate = JSON.parse(JSON.stringify(testObject));
-                mutableSecondInstance = objectAPI._toMutable(testObjectDuplicate);
-            });
-
-            afterEach(() => {
-                mutableSecondInstance.$destroy();
-            });
-
-            it('to stay synchronized when mutated', function () {
-                objectAPI.mutate(mutable, 'otherAttribute', 'new-attribute-value');
-                expect(mutableSecondInstance.otherAttribute).toBe('new-attribute-value');
-            });
-
-            it('to indicate when a property changes', function () {
-                let mutationCallback = jasmine.createSpy('mutation-callback');
-                let unlisten;
-
-                return new Promise(function (resolve) {
-                    mutationCallback.and.callFake(resolve);
-                    unlisten = objectAPI.observe(mutableSecondInstance, 'otherAttribute', mutationCallback);
-                    objectAPI.mutate(mutable, 'otherAttribute', 'some-new-value');
-                }).then(function () {
-                    expect(mutationCallback).toHaveBeenCalledWith('some-new-value');
-                    unlisten();
-                });
-            });
-
-            it('to indicate when a child property has changed', function () {
-                let embeddedKeyCallback = jasmine.createSpy('embeddedKeyCallback');
-                let embeddedObjectCallback = jasmine.createSpy('embeddedObjectCallback');
-                let objectAttributeCallback = jasmine.createSpy('objectAttribute');
-                let listeners = [];
-
-                return new Promise(function (resolve) {
-                    objectAttributeCallback.and.callFake(resolve);
-
-                    listeners.push(objectAPI.observe(mutableSecondInstance, 'objectAttribute.embeddedObject.embeddedKey', embeddedKeyCallback));
-                    listeners.push(objectAPI.observe(mutableSecondInstance, 'objectAttribute.embeddedObject', embeddedObjectCallback));
-                    listeners.push(objectAPI.observe(mutableSecondInstance, 'objectAttribute', objectAttributeCallback));
-
-                    objectAPI.mutate(mutable, 'objectAttribute.embeddedObject.embeddedKey', 'updated-embedded-value');
-                }).then(function () {
-                    expect(embeddedKeyCallback).toHaveBeenCalledWith('updated-embedded-value');
-                    expect(embeddedObjectCallback).toHaveBeenCalledWith({
-                        embeddedKey: 'updated-embedded-value'
-                    });
-                    expect(objectAttributeCallback).toHaveBeenCalledWith({
-                        embeddedObject: {
-                            embeddedKey: 'updated-embedded-value'
-                        }
-                    });
-
-                    listeners.forEach(listener => listener());
-                });
-            });
+          listeners.forEach((listener) => listener());
         });
+      });
+    });
+  });
+
+  describe('getOriginalPath', () => {
+    let mockGrandParentObject;
+    let mockParentObject;
+    let mockChildObject;
+
+    beforeEach(() => {
+      const mockObjectProvider = jasmine.createSpyObj('mock object provider', [
+        'create',
+        'update',
+        'get'
+      ]);
+
+      mockGrandParentObject = {
+        type: 'folder',
+        name: 'Grand Parent Folder',
+        location: 'fooNameSpace:child',
+        identifier: {
+          key: 'grandParent',
+          namespace: 'fooNameSpace'
+        }
+      };
+      mockParentObject = {
+        type: 'folder',
+        name: 'Parent Folder',
+        location: 'fooNameSpace:grandParent',
+        identifier: {
+          key: 'parent',
+          namespace: 'fooNameSpace'
+        }
+      };
+      mockChildObject = {
+        type: 'folder',
+        name: 'Child Folder',
+        location: 'fooNameSpace:parent',
+        identifier: {
+          key: 'child',
+          namespace: 'fooNameSpace'
+        }
+      };
+
+      // eslint-disable-next-line require-await
+      mockObjectProvider.get = async (identifier) => {
+        if (identifier.key === mockGrandParentObject.identifier.key) {
+          return mockGrandParentObject;
+        } else if (identifier.key === mockParentObject.identifier.key) {
+          return mockParentObject;
+        } else if (identifier.key === mockChildObject.identifier.key) {
+          return mockChildObject;
+        } else {
+          return null;
+        }
+      };
+
+      openmct.objects.addProvider('fooNameSpace', mockObjectProvider);
+
+      mockObjectProvider.create.and.returnValue(Promise.resolve(true));
+      mockObjectProvider.update.and.returnValue(Promise.resolve(true));
+
+      openmct.objects.addProvider('fooNameSpace', mockObjectProvider);
+    });
+
+    it('can construct paths even with cycles', async () => {
+      const objectPath = await objectAPI.getOriginalPath(mockChildObject.identifier);
+      expect(objectPath.length).toEqual(3);
+    });
+  });
+
+  describe('transactions', () => {
+    beforeEach(() => {
+      spyOn(openmct.editor, 'isEditing').and.returnValue(true);
+    });
+
+    it('there is no active transaction', () => {
+      expect(objectAPI.isTransactionActive()).toBe(false);
+    });
+
+    it('start a transaction', () => {
+      objectAPI.startTransaction();
+      expect(objectAPI.isTransactionActive()).toBe(true);
+    });
+
+    it('has active transaction', () => {
+      objectAPI.startTransaction();
+      const activeTransaction = objectAPI.getActiveTransaction();
+      expect(activeTransaction).not.toBe(null);
+    });
+
+    it('end a transaction', () => {
+      objectAPI.endTransaction();
+      expect(objectAPI.isTransactionActive()).toBe(false);
+    });
+
+    it('returns dirty object on get', (done) => {
+      spyOn(objectAPI, 'supportsMutation').and.returnValue(true);
+
+      objectAPI.startTransaction();
+      objectAPI.mutate(mockDomainObject, 'name', 'dirty object');
+
+      const dirtyObject = objectAPI.transaction.getDirtyObject(mockDomainObject.identifier);
+
+      objectAPI
+        .get(mockDomainObject.identifier)
+        .then((object) => {
+          const areEqual = JSON.stringify(object) === JSON.stringify(dirtyObject);
+          expect(areEqual).toBe(true);
+        })
+        .finally(done);
     });
+  });
 });
 
 function hasOwnProperty(object, property) {
-    return Object.prototype.hasOwnProperty.call(object, property);
+  return Object.prototype.hasOwnProperty.call(object, property);
 }
diff --git a/src/api/objects/RootObjectProvider.js b/src/api/objects/RootObjectProvider.js
index 89024a3a47c..91e3195cd31 100644
--- a/src/api/objects/RootObjectProvider.js
+++ b/src/api/objects/RootObjectProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,41 +21,41 @@
  *****************************************************************************/
 
 class RootObjectProvider {
-    constructor(rootRegistry) {
-        if (!RootObjectProvider.instance) {
-            this.rootRegistry = rootRegistry;
-            this.rootObject = {
-                identifier: {
-                    key: "ROOT",
-                    namespace: ""
-                },
-                name: 'Open MCT',
-                type: 'root',
-                composition: []
-            };
-            RootObjectProvider.instance = this;
-        } else if (rootRegistry) {
-            // if called twice, update instance rootRegistry
-            RootObjectProvider.instance.rootRegistry = rootRegistry;
-        }
-
-        return RootObjectProvider.instance; // eslint-disable-line no-constructor-return
+  constructor(rootRegistry) {
+    if (!RootObjectProvider.instance) {
+      this.rootRegistry = rootRegistry;
+      this.rootObject = {
+        identifier: {
+          key: 'ROOT',
+          namespace: ''
+        },
+        name: 'Open MCT',
+        type: 'root',
+        composition: []
+      };
+      RootObjectProvider.instance = this;
+    } else if (rootRegistry) {
+      // if called twice, update instance rootRegistry
+      RootObjectProvider.instance.rootRegistry = rootRegistry;
     }
 
-    updateName(name) {
-        this.rootObject.name = name;
-    }
+    return RootObjectProvider.instance; // eslint-disable-line no-constructor-return
+  }
 
-    async get() {
-        let roots = await this.rootRegistry.getRoots();
-        this.rootObject.composition = roots;
+  updateName(name) {
+    this.rootObject.name = name;
+  }
 
-        return this.rootObject;
-    }
+  async get() {
+    let roots = await this.rootRegistry.getRoots();
+    this.rootObject.composition = roots;
+
+    return this.rootObject;
+  }
 }
 
 function instance(rootRegistry) {
-    return new RootObjectProvider(rootRegistry);
+  return new RootObjectProvider(rootRegistry);
 }
 
 export default instance;
diff --git a/src/api/objects/RootRegistry.js b/src/api/objects/RootRegistry.js
index a2406c14f17..1f1b652bc49 100644
--- a/src/api/objects/RootRegistry.js
+++ b/src/api/objects/RootRegistry.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,39 +20,41 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    'lodash'
-], function (
-    _
-) {
+import { isIdentifier } from './object-utils.js';
 
-    function RootRegistry() {
-        this.providers = [];
-    }
+export default class RootRegistry {
+  constructor(openmct) {
+    this._rootItems = [];
+    this._openmct = openmct;
+  }
 
-    RootRegistry.prototype.getRoots = function () {
-        const promises = this.providers.map(function (provider) {
-            return provider();
-        });
+  getRoots() {
+    const sortedItems = this._rootItems.sort((a, b) => b.priority - a.priority);
+    const promises = sortedItems.map((rootItem) => rootItem.provider());
 
-        return Promise.all(promises)
-            .then(_.flatten);
-    };
+    return Promise.all(promises).then((rootItems) => rootItems.flat());
+  }
 
-    function isKey(key) {
-        return _.isObject(key) && _.has(key, 'key') && _.has(key, 'namespace');
+  addRoot(rootItem, priority) {
+    if (!this._isValid(rootItem)) {
+      return;
     }
 
-    RootRegistry.prototype.addRoot = function (key) {
-        if (isKey(key) || (Array.isArray(key) && key.every(isKey))) {
-            this.providers.push(function () {
-                return key;
-            });
-        } else if (typeof key === "function") {
-            this.providers.push(key);
-        }
-    };
+    this._rootItems.push({
+      priority: priority || this._openmct.priority.DEFAULT,
+      provider: typeof rootItem === 'function' ? rootItem : () => rootItem
+    });
+  }
+
+  _isValid(rootItem) {
+    if (isIdentifier(rootItem) || typeof rootItem === 'function') {
+      return true;
+    }
 
-    return RootRegistry;
+    if (Array.isArray(rootItem)) {
+      return rootItem.every(isIdentifier);
+    }
 
-});
+    return false;
+  }
+}
diff --git a/src/api/objects/Transaction.js b/src/api/objects/Transaction.js
new file mode 100644
index 00000000000..4a51b20b786
--- /dev/null
+++ b/src/api/objects/Transaction.js
@@ -0,0 +1,86 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+export default class Transaction {
+  constructor(objectAPI) {
+    this.dirtyObjects = {};
+    this.objectAPI = objectAPI;
+  }
+
+  add(object) {
+    const key = this.objectAPI.makeKeyString(object.identifier);
+
+    this.dirtyObjects[key] = object;
+  }
+
+  cancel() {
+    return this._clear();
+  }
+
+  commit() {
+    const promiseArray = [];
+    const save = this.objectAPI.save.bind(this.objectAPI);
+
+    Object.values(this.dirtyObjects).forEach((object) => {
+      promiseArray.push(this.createDirtyObjectPromise(object, save));
+    });
+
+    return Promise.all(promiseArray);
+  }
+
+  createDirtyObjectPromise(object, action, ...args) {
+    return new Promise((resolve, reject) => {
+      action(object, ...args)
+        .then((success) => {
+          const key = this.objectAPI.makeKeyString(object.identifier);
+
+          delete this.dirtyObjects[key];
+          resolve(success);
+        })
+        .catch(reject);
+    });
+  }
+
+  getDirtyObject(identifier) {
+    let dirtyObject;
+
+    Object.values(this.dirtyObjects).forEach((object) => {
+      const areIdsEqual = this.objectAPI.areIdsEqual(object.identifier, identifier);
+      if (areIdsEqual) {
+        dirtyObject = object;
+      }
+    });
+
+    return dirtyObject;
+  }
+
+  _clear() {
+    const promiseArray = [];
+    const action = (obj) => this.objectAPI.refresh(obj, true);
+
+    Object.values(this.dirtyObjects).forEach((object) => {
+      promiseArray.push(this.createDirtyObjectPromise(object, action));
+    });
+
+    return Promise.all(promiseArray);
+  }
+}
diff --git a/src/api/objects/TransactionSpec.js b/src/api/objects/TransactionSpec.js
new file mode 100644
index 00000000000..254641b9b34
--- /dev/null
+++ b/src/api/objects/TransactionSpec.js
@@ -0,0 +1,117 @@
+import { makeKeyString, parseKeyString } from 'objectUtils';
+
+import Transaction from './Transaction.js';
+
+let openmct = {};
+let objectAPI;
+let transaction;
+
+describe('Transaction Class', () => {
+  beforeEach(() => {
+    objectAPI = {
+      makeKeyString: (identifier) => makeKeyString(identifier),
+      save: () => Promise.resolve(true),
+      mutate: (object, prop, value) => {
+        object[prop] = value;
+
+        return object;
+      },
+      refresh: (object) => Promise.resolve(object),
+      areIdsEqual: (...identifiers) => {
+        return identifiers.map(parseKeyString).every((identifier) => {
+          return (
+            identifier === identifiers[0] ||
+            (identifier.namespace === identifiers[0].namespace &&
+              identifier.key === identifiers[0].key)
+          );
+        });
+      }
+    };
+
+    transaction = new Transaction(objectAPI);
+
+    openmct.editor = {
+      isEditing: () => true
+    };
+  });
+
+  it('has no dirty objects', () => {
+    expect(Object.keys(transaction.dirtyObjects).length).toEqual(0);
+  });
+
+  it('add(), adds object to dirtyObjects', () => {
+    const mockDomainObjects = createMockDomainObjects();
+    transaction.add(mockDomainObjects[0]);
+    expect(Object.keys(transaction.dirtyObjects).length).toEqual(1);
+  });
+
+  it('cancel(), clears all dirtyObjects', (done) => {
+    const mockDomainObjects = createMockDomainObjects(3);
+    mockDomainObjects.forEach(transaction.add.bind(transaction));
+
+    expect(Object.keys(transaction.dirtyObjects).length).toEqual(3);
+
+    transaction
+      .cancel()
+      .then((success) => {
+        expect(Object.keys(transaction.dirtyObjects).length).toEqual(0);
+      })
+      .finally(done);
+  });
+
+  it('commit(), saves all dirtyObjects', (done) => {
+    const mockDomainObjects = createMockDomainObjects(3);
+    mockDomainObjects.forEach(transaction.add.bind(transaction));
+
+    expect(Object.keys(transaction.dirtyObjects).length).toEqual(3);
+    spyOn(objectAPI, 'save').and.callThrough();
+
+    transaction
+      .commit()
+      .then((success) => {
+        expect(Object.keys(transaction.dirtyObjects).length).toEqual(0);
+        expect(objectAPI.save.calls.count()).toEqual(3);
+      })
+      .finally(done);
+  });
+
+  it('getDirtyObject(), returns correct dirtyObject', () => {
+    const mockDomainObjects = createMockDomainObjects();
+    transaction.add(mockDomainObjects[0]);
+
+    expect(Object.keys(transaction.dirtyObjects).length).toEqual(1);
+    const dirtyObject = transaction.getDirtyObject(mockDomainObjects[0].identifier);
+
+    expect(dirtyObject).toEqual(mockDomainObjects[0]);
+  });
+
+  it('getDirtyObject(), returns empty dirtyObject for no active transaction', () => {
+    const mockDomainObjects = createMockDomainObjects();
+
+    expect(Object.keys(transaction.dirtyObjects).length).toEqual(0);
+    const dirtyObject = transaction.getDirtyObject(mockDomainObjects[0].identifier);
+
+    expect(dirtyObject).toEqual(undefined);
+  });
+});
+
+function createMockDomainObjects(size = 1) {
+  const objects = [];
+
+  while (size > 0) {
+    const mockDomainObject = {
+      identifier: {
+        namespace: 'test-namespace',
+        key: `test-key-${size}`
+      },
+      name: `test object ${size}`,
+      type: 'test-type'
+    };
+
+    objects.push(mockDomainObject);
+
+    size--;
+  }
+
+  return objects;
+}
diff --git a/src/api/objects/object-utils.js b/src/api/objects/object-utils.js
index 722e06a079a..86ba2e88454 100644
--- a/src/api/objects/object-utils.js
+++ b/src/api/objects/object-utils.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,157 +20,152 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-
-], function (
-
-) {
-
-    /**
-     * Utility for checking if a thing is an Open MCT Identifier.
-     * @private
-     */
-    function isIdentifier(thing) {
-        return typeof thing === 'object'
-            && Object.prototype.hasOwnProperty.call(thing, 'key')
-            && Object.prototype.hasOwnProperty.call(thing, 'namespace');
-    }
-
-    /**
-     * Utility for checking if a thing is a key string.  Not perfect.
-     * @private
-     */
-    function isKeyString(thing) {
-        return typeof thing === 'string';
-    }
-
-    /**
-     * Convert a keyString into an Open MCT Identifier, ex:
-     * 'scratch:root' ==> {namespace: 'scratch', key: 'root'}
-     *
-     * Idempotent.
-     *
-     * @param keyString
-     * @returns identifier
-     */
-    function parseKeyString(keyString) {
-        if (isIdentifier(keyString)) {
-            return keyString;
-        }
-
-        let namespace = '';
-        let key = keyString;
-        for (let i = 0; i < key.length; i++) {
-            if (key[i] === "\\" && key[i + 1] === ":") {
-                i++; // skip escape character.
-            } else if (key[i] === ":") {
-                key = key.slice(i + 1);
-                break;
-            }
-
-            namespace += key[i];
-        }
-
-        if (keyString === namespace) {
-            namespace = '';
-        }
-
-        return {
-            namespace: namespace,
-            key: key
-        };
-    }
-
-    /**
-     * Convert an Open MCT Identifier into a keyString, ex:
-     * {namespace: 'scratch', key: 'root'} ==> 'scratch:root'
-     *
-     * Idempotent
-     *
-     * @param identifier
-     * @returns keyString
-     */
-    function makeKeyString(identifier) {
-        if (isKeyString(identifier)) {
-            return identifier;
-        }
-
-        if (!identifier.namespace) {
-            return identifier.key;
-        }
-
-        return [
-            identifier.namespace.replace(/:/g, '\\:'),
-            identifier.key
-        ].join(':');
-    }
-
-    /**
-     * Convert a new domain object into an old format model, removing the
-     * identifier and converting the composition array from Open MCT Identifiers
-     * to old format keyStrings.
-     *
-     * @param domainObject
-     * @returns oldFormatModel
-     */
-    function toOldFormat(model) {
-        model = JSON.parse(JSON.stringify(model));
-        delete model.identifier;
-        if (model.composition) {
-            model.composition = model.composition.map(makeKeyString);
-        }
-
-        return model;
+/**
+ * Utility for checking if a thing is an Open MCT Identifier.
+ * @private
+ */
+export function isIdentifier(thing) {
+  return (
+    typeof thing === 'object' &&
+    Object.prototype.hasOwnProperty.call(thing, 'key') &&
+    Object.prototype.hasOwnProperty.call(thing, 'namespace')
+  );
+}
+
+/**
+ * Utility for checking if a thing is a key string.  Not perfect.
+ * @private
+ */
+export function isKeyString(thing) {
+  return typeof thing === 'string';
+}
+
+/**
+ * Convert a keyString into an Open MCT Identifier, ex:
+ * 'scratch:root' ==> {namespace: 'scratch', key: 'root'}
+ *
+ * Idempotent.
+ *
+ * @param keyString
+ * @returns identifier
+ */
+export function parseKeyString(keyString) {
+  if (isIdentifier(keyString)) {
+    return keyString;
+  }
+
+  let namespace = '';
+  let key = keyString;
+  for (let i = 0; i < key.length; i++) {
+    if (key[i] === '\\' && key[i + 1] === ':') {
+      i++; // skip escape character.
+    } else if (key[i] === ':') {
+      key = key.slice(i + 1);
+      break;
     }
 
-    /**
-     * Convert an old format domain object model into a new format domain
-     * object.  Adds an identifier using the provided keyString, and converts
-     * the composition array to utilize Open MCT Identifiers.
-     *
-     * @param model
-     * @param keyString
-     * @returns domainObject
-     */
-    function toNewFormat(model, keyString) {
-        model = JSON.parse(JSON.stringify(model));
-        model.identifier = parseKeyString(keyString);
-        if (model.composition) {
-            model.composition = model.composition.map(parseKeyString);
-        }
-
-        return model;
-    }
+    namespace += key[i];
+  }
 
-    /**
-     * Compare two Open MCT Identifiers, returning true if they are equal.
-     *
-     * @param identifier
-     * @param otherIdentifier
-     * @returns Boolean true if identifiers are equal.
-     */
-    function identifierEquals(a, b) {
-        return a.key === b.key && a.namespace === b.namespace;
-    }
+  if (keyString === namespace) {
+    namespace = '';
+  }
 
-    /**
-     * Compare two domain objects, return true if they're the same object.
-     * Equality is determined by identifier.
-     *
-     * @param domainObject
-     * @param otherDomainOBject
-     * @returns Boolean true if objects are equal.
-     */
-    function objectEquals(a, b) {
-        return identifierEquals(a.identifier, b.identifier);
-    }
+  return {
+    namespace: namespace,
+    key: key
+  };
+}
 
-    return {
-        toOldFormat: toOldFormat,
-        toNewFormat: toNewFormat,
-        makeKeyString: makeKeyString,
-        parseKeyString: parseKeyString,
-        equals: objectEquals,
-        identifierEquals: identifierEquals
-    };
-});
+/**
+ * Convert an Open MCT Identifier into a keyString, ex:
+ * {namespace: 'scratch', key: 'root'} ==> 'scratch:root'
+ *
+ * Idempotent
+ *
+ * @param identifier
+ * @returns keyString
+ */
+export function makeKeyString(identifier) {
+  if (!identifier) {
+    throw new Error('Cannot make key string from null identifier');
+  }
+
+  if (isKeyString(identifier)) {
+    return identifier;
+  }
+
+  if (!identifier.namespace) {
+    return identifier.key;
+  }
+
+  return [identifier.namespace.replace(/\\/g, '\\\\').replace(/:/g, '\\:'), identifier.key].join(
+    ':'
+  );
+}
+
+/**
+ * Convert a new domain object into an old format model, removing the
+ * identifier and converting the composition array from Open MCT Identifiers
+ * to old format keyStrings.
+ *
+ * @param domainObject
+ * @returns oldFormatModel
+ */
+export function toOldFormat(model) {
+  model = JSON.parse(JSON.stringify(model));
+  delete model.identifier;
+  if (model.composition) {
+    model.composition = model.composition.map(makeKeyString);
+  }
+
+  return model;
+}
+
+/**
+ * Convert an old format domain object model into a new format domain
+ * object.  Adds an identifier using the provided keyString, and converts
+ * the composition array to utilize Open MCT Identifiers.
+ *
+ * @param model
+ * @param keyString
+ * @returns domainObject
+ */
+export function toNewFormat(model, keyString) {
+  model = JSON.parse(JSON.stringify(model));
+  model.identifier = parseKeyString(keyString);
+  if (model.composition) {
+    model.composition = model.composition.map(parseKeyString);
+  }
+
+  return model;
+}
+
+/**
+ * Compare two Open MCT Identifiers, returning true if they are equal.
+ *
+ * @param identifier
+ * @param otherIdentifier
+ * @returns Boolean true if identifiers are equal.
+ */
+export function identifierEquals(a, b) {
+  return a.key === b.key && a.namespace === b.namespace;
+}
+
+/**
+ * Compare two domain objects, return true if they're the same object.
+ * Equality is determined by identifier.
+ *
+ * @param domainObject
+ * @param otherDomainOBject
+ * @returns Boolean true if objects are equal.
+ */
+export function objectEquals(a, b) {
+  return identifierEquals(a.identifier, b.identifier);
+}
+
+export function refresh(oldObject, newObject) {
+  let deleted = _.difference(Object.keys(oldObject), Object.keys(newObject));
+  deleted.forEach((propertyName) => delete oldObject[propertyName]);
+  Object.assign(oldObject, newObject);
+}
diff --git a/src/api/objects/test/RootObjectProviderSpec.js b/src/api/objects/test/RootObjectProviderSpec.js
index c5909093c4a..2e82e3d6695 100644
--- a/src/api/objects/test/RootObjectProviderSpec.js
+++ b/src/api/objects/test/RootObjectProviderSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,33 +19,33 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import RootObjectProvider from '../RootObjectProvider';
+import RootObjectProvider from '../RootObjectProvider.js';
 
 describe('RootObjectProvider', function () {
-    const ROOT_NAME = 'Open MCT';
-    let rootObjectProvider;
-    let roots = ['some root'];
-    let rootRegistry = {
-        getRoots: () => {
-            return Promise.resolve(roots);
-        }
-    };
+  const ROOT_NAME = 'Open MCT';
+  let rootObjectProvider;
+  let roots = ['some root'];
+  let rootRegistry = {
+    getRoots: () => {
+      return Promise.resolve(roots);
+    }
+  };
 
-    beforeEach(function () {
-        rootObjectProvider = new RootObjectProvider(rootRegistry);
-    });
+  beforeEach(function () {
+    rootObjectProvider = new RootObjectProvider(rootRegistry);
+  });
 
-    it('supports fetching root', async () => {
-        let root = await rootObjectProvider.get();
+  it('supports fetching root', async () => {
+    let root = await rootObjectProvider.get();
 
-        expect(root).toEqual({
-            identifier: {
-                key: "ROOT",
-                namespace: ""
-            },
-            name: ROOT_NAME,
-            type: 'root',
-            composition: ['some root']
-        });
+    expect(root).toEqual({
+      identifier: {
+        key: 'ROOT',
+        namespace: ''
+      },
+      name: ROOT_NAME,
+      type: 'root',
+      composition: ['some root']
     });
+  });
 });
diff --git a/src/api/objects/test/RootRegistrySpec.js b/src/api/objects/test/RootRegistrySpec.js
index b10e955e9ce..10624d78a5b 100644
--- a/src/api/objects/test/RootRegistrySpec.js
+++ b/src/api/objects/test/RootRegistrySpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,83 +19,106 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-define([
-    '../RootRegistry'
-], function (
-    RootRegistry
-) {
-    describe('RootRegistry', function () {
-        let idA;
-        let idB;
-        let idC;
-        let registry;
-
-        beforeEach(function () {
-            idA = {
-                key: 'keyA',
-                namespace: 'something'
-            };
-            idB = {
-                key: 'keyB',
-                namespace: 'something'
-            };
-            idC = {
-                key: 'keyC',
-                namespace: 'something'
-            };
-            registry = new RootRegistry();
-        });
-
-        it('can register a root by key', function () {
-            registry.addRoot(idA);
-
-            return registry.getRoots()
-                .then(function (roots) {
-                    expect(roots).toEqual([idA]);
-                });
-        });
-
-        it('can register multiple roots by key', function () {
-            registry.addRoot([idA, idB]);
-
-            return registry.getRoots()
-                .then(function (roots) {
-                    expect(roots).toEqual([idA, idB]);
-                });
-        });
-
-        it('can register an asynchronous root ', function () {
-            registry.addRoot(function () {
-                return Promise.resolve(idA);
-            });
-
-            return registry.getRoots()
-                .then(function (roots) {
-                    expect(roots).toEqual([idA]);
-                });
-        });
-
-        it('can register multiple asynchronous roots', function () {
-            registry.addRoot(function () {
-                return Promise.resolve([idA, idB]);
-            });
-
-            return registry.getRoots()
-                .then(function (roots) {
-                    expect(roots).toEqual([idA, idB]);
-                });
-        });
-
-        it('can combine different types of registration', function () {
-            registry.addRoot([idA, idB]);
-            registry.addRoot(function () {
-                return Promise.resolve([idC]);
-            });
-
-            return registry.getRoots()
-                .then(function (roots) {
-                    expect(roots).toEqual([idA, idB, idC]);
-                });
-        });
+
+import { createOpenMct, resetApplicationState } from '../../../utils/testing.js';
+
+describe('RootRegistry', () => {
+  let openmct;
+  let idA;
+  let idB;
+  let idC;
+  let idD;
+
+  beforeEach((done) => {
+    openmct = createOpenMct();
+    idA = {
+      key: 'keyA',
+      namespace: 'something'
+    };
+    idB = {
+      key: 'keyB',
+      namespace: 'something'
+    };
+    idC = {
+      key: 'keyC',
+      namespace: 'something'
+    };
+    idD = {
+      key: 'keyD',
+      namespace: 'something'
+    };
+
+    openmct.on('start', done);
+    openmct.startHeadless();
+  });
+
+  afterEach(async () => {
+    await resetApplicationState(openmct);
+  });
+
+  it('can register a root by identifier', () => {
+    openmct.objects.addRoot(idA);
+
+    return openmct.objects.getRoot().then((rootObject) => {
+      expect(rootObject.composition).toEqual([idA]);
+    });
+  });
+
+  it('can register multiple roots by identifier', () => {
+    openmct.objects.addRoot([idA, idB]);
+
+    return openmct.objects.getRoot().then((rootObject) => {
+      expect(rootObject.composition).toEqual([idA, idB]);
+    });
+  });
+
+  it('can register an asynchronous root ', () => {
+    openmct.objects.addRoot(() => Promise.resolve(idA));
+
+    return openmct.objects.getRoot().then((rootObject) => {
+      expect(rootObject.composition).toEqual([idA]);
+    });
+  });
+
+  it('can register multiple asynchronous roots', () => {
+    openmct.objects.addRoot(() => Promise.resolve([idA, idB]));
+
+    return openmct.objects.getRoot().then((rootObject) => {
+      expect(rootObject.composition).toEqual([idA, idB]);
+    });
+  });
+
+  it('can combine different types of registration', () => {
+    openmct.objects.addRoot([idA, idB]);
+    openmct.objects.addRoot(() => Promise.resolve([idC]));
+
+    return openmct.objects.getRoot().then((rootObject) => {
+      expect(rootObject.composition).toEqual([idA, idB, idC]);
+    });
+  });
+
+  it('supports priority ordering for identifiers', () => {
+    openmct.objects.addRoot(idA, openmct.priority.LOW);
+    openmct.objects.addRoot(idB, openmct.priority.HIGH);
+    openmct.objects.addRoot(idC); // DEFAULT
+
+    return openmct.objects.getRoot().then((rootObject) => {
+      expect(rootObject.composition[0]).toEqual(idB);
+      expect(rootObject.composition[1]).toEqual(idC);
+      expect(rootObject.composition[2]).toEqual(idA);
+    });
+  });
+
+  it('supports priority ordering for different types of registration', () => {
+    openmct.objects.addRoot(() => Promise.resolve([idC]), openmct.priority.LOW);
+    openmct.objects.addRoot(idB, openmct.priority.HIGH);
+    openmct.objects.addRoot([idA, idD]); // default
+
+    return openmct.objects.getRoot().then((rootObject) => {
+      expect(rootObject.composition[0]).toEqual(idB);
+      expect(rootObject.composition[1]).toEqual(idA);
+      expect(rootObject.composition[2]).toEqual(idD);
+      expect(rootObject.composition[3]).toEqual(idC);
     });
+  });
 });
diff --git a/src/api/objects/test/object-utilsSpec.js b/src/api/objects/test/object-utilsSpec.js
index 25f6ad07e68..d17c03f5d89 100644
--- a/src/api/objects/test/object-utilsSpec.js
+++ b/src/api/objects/test/object-utilsSpec.js
@@ -1,152 +1,147 @@
-define([
-    'objectUtils'
-], function (
-    objectUtils
-) {
-    describe('objectUtils', function () {
+import { makeKeyString, parseKeyString, toNewFormat, toOldFormat } from 'objectUtils';
 
-        describe('keyString util', function () {
-            const EXPECTATIONS = {
-                'ROOT': {
-                    namespace: '',
-                    key: 'ROOT'
-                },
-                'mine': {
-                    namespace: '',
-                    key: 'mine'
-                },
-                'extended:something:with:colons': {
-                    key: 'something:with:colons',
-                    namespace: 'extended'
-                },
-                'https\\://some/url:resourceId': {
-                    key: 'resourceId',
-                    namespace: 'https://some/url'
-                },
-                'scratch:root': {
-                    namespace: 'scratch',
-                    key: 'root'
-                },
-                'thingy\\:thing:abc123': {
-                    namespace: 'thingy:thing',
-                    key: 'abc123'
-                }
-            };
+describe('objectUtils', function () {
+  describe('keyString util', function () {
+    const EXPECTATIONS = {
+      ROOT: {
+        namespace: '',
+        key: 'ROOT'
+      },
+      mine: {
+        namespace: '',
+        key: 'mine'
+      },
+      'extended:something:with:colons': {
+        key: 'something:with:colons',
+        namespace: 'extended'
+      },
+      'https\\://some/url:resourceId': {
+        key: 'resourceId',
+        namespace: 'https://some/url'
+      },
+      'scratch:root': {
+        namespace: 'scratch',
+        key: 'root'
+      },
+      'thingy\\:thing:abc123': {
+        namespace: 'thingy:thing',
+        key: 'abc123'
+      }
+    };
 
-            Object.keys(EXPECTATIONS).forEach(function (keyString) {
-                it('parses "' + keyString + '".', function () {
-                    expect(objectUtils.parseKeyString(keyString))
-                        .toEqual(EXPECTATIONS[keyString]);
-                });
+    Object.keys(EXPECTATIONS).forEach(function (keyString) {
+      it('parses "' + keyString + '".', function () {
+        expect(parseKeyString(keyString)).toEqual(EXPECTATIONS[keyString]);
+      });
 
-                it('parses and re-encodes "' + keyString + '"', function () {
-                    const identifier = objectUtils.parseKeyString(keyString);
-                    expect(objectUtils.makeKeyString(identifier))
-                        .toEqual(keyString);
-                });
+      it('parses and re-encodes "' + keyString + '"', function () {
+        const identifier = parseKeyString(keyString);
+        expect(makeKeyString(identifier)).toEqual(keyString);
+      });
 
-                it('is idempotent for "' + keyString + '".', function () {
-                    const identifier = objectUtils.parseKeyString(keyString);
-                    let again = objectUtils.parseKeyString(identifier);
-                    expect(identifier).toEqual(again);
-                    again = objectUtils.parseKeyString(again);
-                    again = objectUtils.parseKeyString(again);
-                    expect(identifier).toEqual(again);
+      it('is idempotent for "' + keyString + '".', function () {
+        const identifier = parseKeyString(keyString);
+        let again = parseKeyString(identifier);
+        expect(identifier).toEqual(again);
+        again = parseKeyString(again);
+        again = parseKeyString(again);
+        expect(identifier).toEqual(again);
 
-                    let againKeyString = objectUtils.makeKeyString(again);
-                    expect(againKeyString).toEqual(keyString);
-                    againKeyString = objectUtils.makeKeyString(againKeyString);
-                    againKeyString = objectUtils.makeKeyString(againKeyString);
-                    againKeyString = objectUtils.makeKeyString(againKeyString);
-                    expect(againKeyString).toEqual(keyString);
-                });
-            });
-        });
-
-        describe('old object conversions', function () {
-
-            it('translate ids', function () {
-                expect(objectUtils.toNewFormat({
-                    prop: 'someValue'
-                }, 'objId'))
-                    .toEqual({
-                        prop: 'someValue',
-                        identifier: {
-                            namespace: '',
-                            key: 'objId'
-                        }
-                    });
-            });
+        let againKeyString = makeKeyString(again);
+        expect(againKeyString).toEqual(keyString);
+        againKeyString = makeKeyString(againKeyString);
+        againKeyString = makeKeyString(againKeyString);
+        againKeyString = makeKeyString(againKeyString);
+        expect(againKeyString).toEqual(keyString);
+      });
+    });
+  });
 
-            it('translates composition', function () {
-                expect(objectUtils.toNewFormat({
-                    prop: 'someValue',
-                    composition: [
-                        'anotherObjectId',
-                        'scratch:anotherObjectId'
-                    ]
-                }, 'objId'))
-                    .toEqual({
-                        prop: 'someValue',
-                        composition: [
-                            {
-                                namespace: '',
-                                key: 'anotherObjectId'
-                            },
-                            {
-                                namespace: 'scratch',
-                                key: 'anotherObjectId'
-                            }
-                        ],
-                        identifier: {
-                            namespace: '',
-                            key: 'objId'
-                        }
-                    });
-            });
-        });
+  describe('old object conversions', function () {
+    it('translate ids', function () {
+      expect(
+        toNewFormat(
+          {
+            prop: 'someValue'
+          },
+          'objId'
+        )
+      ).toEqual({
+        prop: 'someValue',
+        identifier: {
+          namespace: '',
+          key: 'objId'
+        }
+      });
+    });
 
-        describe('new object conversions', function () {
+    it('translates composition', function () {
+      expect(
+        toNewFormat(
+          {
+            prop: 'someValue',
+            composition: ['anotherObjectId', 'scratch:anotherObjectId']
+          },
+          'objId'
+        )
+      ).toEqual({
+        prop: 'someValue',
+        composition: [
+          {
+            namespace: '',
+            key: 'anotherObjectId'
+          },
+          {
+            namespace: 'scratch',
+            key: 'anotherObjectId'
+          }
+        ],
+        identifier: {
+          namespace: '',
+          key: 'objId'
+        }
+      });
+    });
+  });
 
-            it('removes ids', function () {
-                expect(objectUtils.toOldFormat({
-                    prop: 'someValue',
-                    identifier: {
-                        namespace: '',
-                        key: 'objId'
-                    }
-                }))
-                    .toEqual({
-                        prop: 'someValue'
-                    });
-            });
+  describe('new object conversions', function () {
+    it('removes ids', function () {
+      expect(
+        toOldFormat({
+          prop: 'someValue',
+          identifier: {
+            namespace: '',
+            key: 'objId'
+          }
+        })
+      ).toEqual({
+        prop: 'someValue'
+      });
+    });
 
-            it('translates composition', function () {
-                expect(objectUtils.toOldFormat({
-                    prop: 'someValue',
-                    composition: [
-                        {
-                            namespace: '',
-                            key: 'anotherObjectId'
-                        },
-                        {
-                            namespace: 'scratch',
-                            key: 'anotherObjectId'
-                        }
-                    ],
-                    identifier: {
-                        namespace: '',
-                        key: 'objId'
-                    }
-                }))
-                    .toEqual({
-                        prop: 'someValue',
-                        composition: [
-                            'anotherObjectId',
-                            'scratch:anotherObjectId'
-                        ]
-                    });
-            });
-        });
+    it('translates composition', function () {
+      expect(
+        toOldFormat({
+          prop: 'someValue',
+          composition: [
+            {
+              namespace: '',
+              key: 'anotherObjectId'
+            },
+            {
+              namespace: 'scratch',
+              key: 'anotherObjectId'
+            }
+          ],
+          identifier: {
+            namespace: '',
+            key: 'objId'
+          }
+        })
+      ).toEqual({
+        prop: 'someValue',
+        composition: ['anotherObjectId', 'scratch:anotherObjectId']
+      });
     });
+  });
 });
diff --git a/src/api/overlays/Dialog.js b/src/api/overlays/Dialog.js
index 502446ec2e3..2bdc6891dae 100644
--- a/src/api/overlays/Dialog.js
+++ b/src/api/overlays/Dialog.js
@@ -1,35 +1,35 @@
+import mount from 'utils/mount';
+
 import DialogComponent from './components/DialogComponent.vue';
-import Overlay from './Overlay';
-import Vue from 'vue';
+import Overlay from './Overlay.js';
 
 class Dialog extends Overlay {
-    constructor({iconClass, message, title, hint, timestamp, ...options}) {
-
-        let component = new Vue({
-            components: {
-                DialogComponent: DialogComponent
-            },
-            provide: {
-                iconClass,
-                message,
-                title,
-                hint,
-                timestamp
-            },
-            template: '<dialog-component></dialog-component>'
-        }).$mount();
+  constructor({ iconClass, message, title, hint, timestamp, ...options }) {
+    const { vNode, destroy } = mount({
+      components: {
+        DialogComponent: DialogComponent
+      },
+      provide: {
+        iconClass,
+        message,
+        title,
+        hint,
+        timestamp
+      },
+      template: '<dialog-component></dialog-component>'
+    });
 
-        super({
-            element: component.$el,
-            size: 'fit',
-            dismissable: false,
-            ...options
-        });
+    super({
+      element: vNode.el,
+      size: 'fit',
+      dismissable: false,
+      ...options
+    });
 
-        this.once('destroy', () => {
-            component.$destroy();
-        });
-    }
+    this.once('destroy', () => {
+      destroy();
+    });
+  }
 }
 
 export default Dialog;
diff --git a/src/api/overlays/Overlay.js b/src/api/overlays/Overlay.js
index 46dafa9b4b1..8bdfc83835a 100644
--- a/src/api/overlays/Overlay.js
+++ b/src/api/overlays/Overlay.js
@@ -1,53 +1,81 @@
-import OverlayComponent from './components/OverlayComponent.vue';
 import EventEmitter from 'EventEmitter';
-import Vue from 'vue';
+import mount from 'utils/mount';
+
+import OverlayComponent from './components/OverlayComponent.vue';
 
 const cssClasses = {
-    large: 'l-overlay-large',
-    small: 'l-overlay-small',
-    fit: 'l-overlay-fit',
-    fullscreen: 'l-overlay-fullscreen'
+  large: 'l-overlay-large',
+  small: 'l-overlay-small',
+  fit: 'l-overlay-fit',
+  fullscreen: 'l-overlay-fullscreen',
+  dialog: 'l-overlay-dialog'
 };
 
 class Overlay extends EventEmitter {
-    constructor(options) {
-        super();
-
-        this.dismissable = options.dismissable !== false;
-        this.container = document.createElement('div');
-        this.container.classList.add('l-overlay-wrapper', cssClasses[options.size]);
-
-        this.component = new Vue({
-            provide: {
-                dismiss: this.dismiss.bind(this),
-                element: options.element,
-                buttons: options.buttons,
-                dismissable: this.dismissable
-            },
-            components: {
-                OverlayComponent: OverlayComponent
-            },
-            template: '<overlay-component></overlay-component>'
-        });
-
-        if (options.onDestroy) {
-            this.once('destroy', options.onDestroy);
-        }
-    }
+  constructor({
+    buttons,
+    autoHide = true,
+    dismissable = true,
+    element,
+    onDestroy,
+    onDismiss,
+    size
+  } = {}) {
+    super();
+
+    this.container = document.createElement('div');
+    this.container.classList.add('l-overlay-wrapper', cssClasses[size]);
+
+    this.autoHide = autoHide;
+    this.dismissable = dismissable !== false;
 
-    dismiss() {
-        this.emit('destroy');
-        document.body.removeChild(this.container);
-        this.component.$destroy();
+    const { destroy } = mount(
+      {
+        components: {
+          OverlayComponent
+        },
+        provide: {
+          dismiss: this.notifyAndDismiss.bind(this),
+          element,
+          buttons,
+          dismissable: this.dismissable
+        },
+        template: '<overlay-component></overlay-component>'
+      },
+      {
+        element: this.container
+      }
+    );
+
+    this.destroy = destroy;
+
+    if (onDestroy) {
+      this.once('destroy', onDestroy);
     }
 
-    /**
-     * @private
-     **/
-    show() {
-        document.body.appendChild(this.container);
-        this.container.appendChild(this.component.$mount().$el);
+    if (onDismiss) {
+      this.once('dismiss', onDismiss);
     }
+  }
+
+  dismiss() {
+    this.emit('destroy');
+    this.destroy();
+    this.container.remove();
+  }
+
+  //Ensures that any callers are notified that the overlay is dismissed
+  notifyAndDismiss() {
+    this.emit('dismiss');
+    this.dismiss();
+  }
+
+  /**
+   * @private
+   **/
+  show() {
+    document.body.appendChild(this.container);
+  }
 }
 
 export default Overlay;
diff --git a/src/api/overlays/OverlayAPI.js b/src/api/overlays/OverlayAPI.js
index 9c2b1fb28bc..762ad01077e 100644
--- a/src/api/overlays/OverlayAPI.js
+++ b/src/api/overlays/OverlayAPI.js
@@ -1,6 +1,29 @@
-import Overlay from './Overlay';
-import Dialog from './Dialog';
-import ProgressDialog from './ProgressDialog';
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import Dialog from './Dialog.js';
+import Overlay from './Overlay.js';
+import ProgressDialog from './ProgressDialog.js';
+import Selection from './Selection.js';
 
 /**
  * The OverlayAPI is responsible for pre-pending templates to
@@ -9,126 +32,137 @@ import ProgressDialog from './ProgressDialog';
  *
  * @memberof api/overlays
  * @constructor
-*/
+ */
 
 class OverlayAPI {
-    constructor() {
-        this.activeOverlays = [];
-
-        this.dismissLastOverlay = this.dismissLastOverlay.bind(this);
-
-        document.addEventListener('keyup', (event) => {
-            if (event.key === 'Escape') {
-                this.dismissLastOverlay();
-            }
-        });
-
+  constructor() {
+    this.activeOverlays = [];
+
+    this.dismissLastOverlay = this.dismissLastOverlay.bind(this);
+
+    document.addEventListener('keyup', (event) => {
+      if (event.key === 'Escape') {
+        this.dismissLastOverlay();
+      }
+    });
+  }
+
+  /**
+   * private
+   */
+  showOverlay(overlay) {
+    if (this.activeOverlays.length) {
+      const previousOverlay = this.activeOverlays[this.activeOverlays.length - 1];
+      if (previousOverlay.autoHide) {
+        previousOverlay.container.classList.add('invisible');
+      }
     }
 
-    /**
-     * private
-     */
-    showOverlay(overlay) {
-        if (this.activeOverlays.length) {
-            this.activeOverlays[this.activeOverlays.length - 1].container.classList.add('invisible');
-        }
-
-        this.activeOverlays.push(overlay);
+    this.activeOverlays.push(overlay);
 
-        overlay.once('destroy', () => {
-            this.activeOverlays.splice(this.activeOverlays.indexOf(overlay), 1);
+    overlay.once('destroy', () => {
+      this.activeOverlays.splice(this.activeOverlays.indexOf(overlay), 1);
 
-            if (this.activeOverlays.length) {
-                this.activeOverlays[this.activeOverlays.length - 1].container.classList.remove('invisible');
-            }
-        });
+      if (this.activeOverlays.length) {
+        this.activeOverlays[this.activeOverlays.length - 1].container.classList.remove('invisible');
+      }
+    });
 
-        overlay.show();
-    }
-
-    /**
-     * private
-     */
-    dismissLastOverlay() {
-        let lastOverlay = this.activeOverlays[this.activeOverlays.length - 1];
-        if (lastOverlay && lastOverlay.dismissable) {
-            lastOverlay.dismiss();
-        }
-    }
-
-    /**
-     * A description of option properties that can be passed into the overlay
-     * @typedef options
-        * @property {object} element DOMElement that is to be inserted/shown on the overlay
-        * @property {string} size prefered size of the overlay (large, small, fit)
-        * @property {array} buttons optional button objects with label and callback properties
-        * @property {function} onDestroy callback to be called when overlay is destroyed
-        * @property {boolean} dismissable allow user to dismiss overlay by using esc, and clicking away
-        * from overlay. Unless set to false, all overlays will be dismissable by default.
-    */
-    overlay(options) {
-        let overlay = new Overlay(options);
-
-        this.showOverlay(overlay);
-
-        return overlay;
-    }
-
-    /**
-     * Displays a blocking (modal) dialog. This dialog can be used for
-     * displaying messages that require the user's
-     * immediate attention.
-     * @param {model} options defines options for the dialog
-     * @returns {object} with an object with a dismiss function that can be called from the calling code
-     * to dismiss/destroy the dialog
-     *
-     * A description of the model options that may be passed to the
-     * dialog method. Note that the DialogModel described
-     * here is shared with the Notifications framework.
-     * @see NotificationService
-     *
-    * @typedef options
-        * @property {string} title the title to use for the dialog
-        * @property {string} iconClass class to apply to icon that is shown on dialog
-        * @property {string} message text that indicates a current message,
-        * @property {buttons[]} buttons a list of buttons with title and callback properties that will
-        * be added to the dialog.
-    */
-    dialog(options) {
-        let dialog = new Dialog(options);
-
-        this.showOverlay(dialog);
-
-        return dialog;
-    }
+    overlay.show();
+  }
 
-    /**
-     * Displays a blocking (modal) progress dialog. This dialog can be used for
-     * displaying messages that require the user's attention, and show progress
-     * @param {model} options defines options for the dialog
-     * @returns {object} with an object with a dismiss function that can be called from the calling code
-     * to dismiss/destroy the dialog and an updateProgress function that takes progressPercentage(Number 0-100)
-     * and progressText (string)
-     *
-     * A description of the model options that may be passed to the
-     * dialog method. Note that the DialogModel described
-     * here is shared with the Notifications framework.
-     * @see NotificationService
-     *
-    * @typedef options
-        * @property {number} progressPerc the initial progress value (0-100) or {string} 'unknown' for anonymous progress
-        * @property {string} progressText the initial text to be shown under the progress bar
-        * @property {buttons[]} buttons a list of buttons with title and callback properties that will
-        * be added to the dialog.
-    */
-    progressDialog(options) {
-        let progressDialog = new ProgressDialog(options);
-
-        this.showOverlay(progressDialog);
-
-        return progressDialog;
+  /**
+   * private
+   */
+  dismissLastOverlay() {
+    let lastOverlay = this.activeOverlays[this.activeOverlays.length - 1];
+    if (lastOverlay && lastOverlay.dismissable) {
+      lastOverlay.notifyAndDismiss();
     }
-
+  }
+
+  /**
+   * Creates and displays an overlay with the specified options.
+   *
+   * @typedef {Object} OverlayOptions
+   * @property {HTMLElement} element The DOM Element to be inserted or shown in the overlay.
+   * @property {'large'|'small'|'fit'} size The preferred size of the overlay.
+   * @property {Array<{label: string, callback: Function}>} [buttons] Optional array of button objects, each with 'label' and 'callback' properties.
+   * @property {Function} onDestroy Callback to be called when the overlay is destroyed.
+   * @property {boolean} [dismissable=true] Whether the overlay can be dismissed by pressing 'esc' or clicking outside of it. Defaults to true.
+   *
+   * @param {OverlayOptions} options - The configuration options for the overlay.
+   * @returns {Overlay} An instance of the Overlay class.
+   */
+  overlay(options) {
+    let overlay = new Overlay(options);
+
+    this.showOverlay(overlay);
+
+    return overlay;
+  }
+
+  /**
+   * Displays a blocking (modal) dialog. This dialog can be used for
+   * displaying messages that require the user's
+   * immediate attention.
+   * @param {model} options defines options for the dialog
+   * @returns {object} with an object with a dismiss function that can be called from the calling code
+   * to dismiss/destroy the dialog
+   *
+   * A description of the model options that may be passed to the
+   * dialog method. Note that the DialogModel described
+   * here is shared with the Notifications framework.
+   * @see NotificationService
+   *
+   * @typedef options
+   * @property {string} title the title to use for the dialog
+   * @property {string} iconClass class to apply to icon that is shown on dialog
+   * @property {string} message text that indicates a current message,
+   * @property {buttons[]} buttons a list of buttons with title and callback properties that will
+   * be added to the dialog.
+   */
+  dialog(options) {
+    let dialog = new Dialog(options);
+
+    this.showOverlay(dialog);
+
+    return dialog;
+  }
+
+  /**
+   * Displays a blocking (modal) progress dialog. This dialog can be used for
+   * displaying messages that require the user's attention, and show progress
+   * @param {model} options defines options for the dialog
+   * @returns {object} with an object with a dismiss function that can be called from the calling code
+   * to dismiss/destroy the dialog and an updateProgress function that takes progressPercentage(Number 0-100)
+   * and progressText (string)
+   *
+   * A description of the model options that may be passed to the
+   * dialog method. Note that the DialogModel described
+   * here is shared with the Notifications framework.
+   * @see NotificationService
+   *
+   * @typedef options
+   * @property {number | null} progressPerc the initial progress value (0-100) or null for anonymous progress
+   * @property {string} progressText the initial text to be shown under the progress bar
+   * @property {buttons[]} buttons a list of buttons with title and callback properties that will
+   * be added to the dialog.
+   */
+  progressDialog(options) {
+    let progressDialog = new ProgressDialog(options);
+
+    this.showOverlay(progressDialog);
+
+    return progressDialog;
+  }
+
+  selection(options) {
+    let selection = new Selection(options);
+    this.showOverlay(selection);
+
+    return selection;
+  }
 }
 
 export default OverlayAPI;
diff --git a/src/api/overlays/ProgressDialog.js b/src/api/overlays/ProgressDialog.js
index 937a15b1e2e..81831358726 100644
--- a/src/api/overlays/ProgressDialog.js
+++ b/src/api/overlays/ProgressDialog.js
@@ -1,49 +1,58 @@
+import mount from 'utils/mount';
+
 import ProgressDialogComponent from './components/ProgressDialogComponent.vue';
-import Overlay from './Overlay';
-import Vue from 'vue';
+import Overlay from './Overlay.js';
 
 let component;
-
 class ProgressDialog extends Overlay {
-    constructor({progressPerc, progressText, iconClass, message, title, hint, timestamp, ...options}) {
-        component = new Vue({
-            components: {
-                ProgressDialogComponent: ProgressDialogComponent
-            },
-            provide: {
-                iconClass,
-                message,
-                title,
-                hint,
-                timestamp
-            },
-            data() {
-                return {
-                    model: {
-                        progressPerc: progressPerc || 0,
-                        progressText
-                    }
-                };
-            },
-            template: '<progress-dialog-component :model="model"></progress-dialog-component>'
-        }).$mount();
+  constructor({
+    progressPerc,
+    progressText,
+    iconClass,
+    message,
+    title,
+    hint,
+    timestamp,
+    ...options
+  }) {
+    const { vNode, destroy } = mount({
+      components: {
+        ProgressDialogComponent
+      },
+      provide: {
+        iconClass,
+        message,
+        title,
+        hint,
+        timestamp
+      },
+      data() {
+        return {
+          progressPerc,
+          progressText
+        };
+      },
+      template:
+        '<progress-dialog-component :progress-perc="progressPerc" :progress-text="progressText"></progress-dialog-component>'
+    });
 
-        super({
-            element: component.$el,
-            size: 'fit',
-            dismissable: false,
-            ...options
-        });
+    component = vNode.componentInstance;
+    super({
+      element: vNode.el,
+      size: 'fit',
+      dismissable: false,
+      ...options
+    });
 
-        this.once('destroy', () => {
-            component.$destroy();
-        });
-    }
+    this.once('destroy', () => {
+      destroy();
+    });
+  }
 
-    updateProgress(progressPerc, progressText) {
-        component.model.progressPerc = progressPerc;
-        component.model.progressText = progressText;
-    }
+  updateProgress(progressPerc, progressText) {
+    component.$data.progressPerc = progressPerc;
+    component.$data.progressText = progressText;
+  }
 }
 
 export default ProgressDialog;
diff --git a/src/api/overlays/Selection.js b/src/api/overlays/Selection.js
new file mode 100644
index 00000000000..612d9aeefe7
--- /dev/null
+++ b/src/api/overlays/Selection.js
@@ -0,0 +1,70 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
+
+import SelectionComponent from './components/SelectionComponent.vue';
+import Overlay from './Overlay.js';
+
+class Selection extends Overlay {
+  constructor({
+    iconClass,
+    title,
+    message,
+    selectionOptions,
+    onChange,
+    currentSelection,
+    ...options
+  }) {
+    const { vNode, destroy } = mount({
+      components: {
+        SelectionComponent: SelectionComponent
+      },
+      provide: {
+        iconClass,
+        title,
+        message,
+        selectionOptions,
+        onChange,
+        currentSelection
+      },
+      template: '<selection-component></selection-component>'
+    });
+
+    const component = vNode.componentInstance;
+
+    super({
+      element: component.$el,
+      size: 'fit',
+      dismissable: false,
+      onChange,
+      currentSelection,
+      ...options
+    });
+
+    this.once('destroy', () => {
+      destroy();
+    });
+  }
+}
+
+export default Selection;
diff --git a/src/api/overlays/components/DialogComponent.vue b/src/api/overlays/components/DialogComponent.vue
index cfb969a0b4b..49fb83eb17e 100644
--- a/src/api/overlays/components/DialogComponent.vue
+++ b/src/api/overlays/components/DialogComponent.vue
@@ -1,40 +1,49 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div class="c-message">
+  <div class="c-message">
     <!--Uses flex-row -->
-    <div
-        class="c-message__icon"
-        :class="['u-icon-bg-color-' + iconClass]"
-    ></div>
+    <div class="c-message__icon" :class="['u-icon-bg-color-' + iconClass]"></div>
     <div class="c-message__text">
-        <!-- Uses flex-column -->
-        <div
-            v-if="title"
-            class="c-message__title"
-        >
-            {{ title }}
-        </div>
+      <!-- Uses flex-column -->
+      <div v-if="title" class="c-message__title">
+        {{ title }}
+      </div>
 
-        <div
-            v-if="hint"
-            class="c-message__hint"
-        >
-            {{ hint }}
-            <span v-if="timestamp">[{{ timestamp }}]</span>
-        </div>
+      <div v-if="hint" class="c-message__hint">
+        {{ hint }}
+        <span v-if="timestamp">[{{ timestamp }}]</span>
+      </div>
 
-        <div
-            v-if="message"
-            class="c-message__action-text"
-        >
-            {{ message }}
-        </div>
-        <slot></slot>
+      <div v-if="message" class="c-message__action-text">
+        {{ message }}
+      </div>
+      <slot></slot>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
 export default {
-    inject: ['iconClass', 'title', 'hint', 'timestamp', 'message']
+  inject: ['iconClass', 'title', 'hint', 'timestamp', 'message']
 };
 </script>
diff --git a/src/api/overlays/components/OverlayComponent.vue b/src/api/overlays/components/OverlayComponent.vue
index f06e1afcfdd..9c2dd0736ea 100644
--- a/src/api/overlays/components/OverlayComponent.vue
+++ b/src/api/overlays/components/OverlayComponent.vue
@@ -1,87 +1,109 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div class="c-overlay">
-    <div
-        class="c-overlay__blocker"
-        @click="destroy"
-    ></div>
+  <div class="c-overlay js-overlay">
+    <div class="c-overlay__blocker" @click="destroy"></div>
     <div class="c-overlay__outer">
-        <button
-            v-if="dismissable"
-            class="c-click-icon c-overlay__close-button icon-x"
-            @click="destroy"
-        ></button>
+      <button
+        v-if="dismissable"
+        aria-label="Close"
+        class="c-click-icon c-overlay__close-button icon-x"
+        @click.stop="destroy"
+      ></button>
+      <div class="c-overlay__content-wrapper">
         <div
-            ref="element"
-            class="c-overlay__contents"
-            tabindex="0"
+          ref="element"
+          class="c-overlay__contents js-notebook-snapshot-item-wrapper"
+          tabindex="0"
+          aria-modal="true"
+          aria-label="Overlay"
+          role="dialog"
         ></div>
-        <div
-            v-if="buttons"
-            class="c-overlay__button-bar"
-        >
-            <button
-                v-for="(button, index) in buttons"
-                ref="buttons"
-                :key="index"
-                class="c-button"
-                tabindex="0"
-                :class="{'c-button--major': focusIndex===index}"
-                @focus="focusIndex=index"
-                @click="buttonClickHandler(button.callback)"
-            >
-                {{ button.label }}
-            </button>
+        <div v-if="buttons" class="c-overlay__button-bar">
+          <button
+            v-for="(button, index) in buttons"
+            ref="buttons"
+            :key="index"
+            class="c-button js-overlay__button"
+            tabindex="0"
+            :class="{ 'c-button--major': focusIndex === index }"
+            @focus="focusIndex = index"
+            @click="buttonClickHandler(button.callback)"
+          >
+            {{ button.label }}
+          </button>
         </div>
+      </div>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
 export default {
-    inject: ['dismiss', 'element', 'buttons', 'dismissable'],
-    data: function () {
-        return {
-            focusIndex: -1
-        };
+  inject: ['dismiss', 'element', 'buttons', 'dismissable'],
+  emits: ['destroy'],
+  data: function () {
+    return {
+      focusIndex: -1
+    };
+  },
+  mounted() {
+    const element = this.$refs.element;
+    element.appendChild(this.element);
+    const elementForFocus = this.getElementForFocus() || element;
+    this.$nextTick(() => {
+      elementForFocus.focus();
+    });
+  },
+  methods: {
+    destroy() {
+      if (this.dismissable) {
+        this.dismiss();
+      }
     },
-    mounted() {
-        const element = this.$refs.element;
-        element.appendChild(this.element);
-        const elementForFocus = this.getElementForFocus() || element;
-        this.$nextTick(() => {
-            elementForFocus.focus();
-        });
+    buttonClickHandler(method) {
+      method();
+      this.$emit('destroy');
     },
-    methods: {
-        destroy: function () {
-            if (this.dismissable) {
-                this.dismiss();
-            }
-        },
-        buttonClickHandler: function (method) {
-            method();
-            this.$emit('destroy');
-        },
-        getElementForFocus: function () {
-            const defaultElement = this.$refs.element;
-            if (!this.$refs.buttons) {
-                return defaultElement;
-            }
+    getElementForFocus() {
+      const defaultElement = this.$refs.element;
+      if (!this.$refs.buttons) {
+        return defaultElement;
+      }
 
-            const focusButton = this.$refs.buttons.filter((button, index) => {
-                if (this.buttons[index].emphasis) {
-                    this.focusIndex = index;
-                }
+      const focusButton = this.$refs.buttons.filter((button, index) => {
+        if (this.buttons[index].emphasis) {
+          this.focusIndex = index;
+        }
 
-                return this.buttons[index].emphasis;
-            });
+        return this.buttons[index].emphasis;
+      });
 
-            if (!focusButton.length) {
-                return defaultElement;
-            }
+      if (!focusButton.length) {
+        return defaultElement;
+      }
 
-            return focusButton[0];
-        }
+      return focusButton[0];
     }
+  }
 };
 </script>
diff --git a/src/api/overlays/components/ProgressDialogComponent.vue b/src/api/overlays/components/ProgressDialogComponent.vue
index 405340e2202..f765a8b6232 100644
--- a/src/api/overlays/components/ProgressDialogComponent.vue
+++ b/src/api/overlays/components/ProgressDialogComponent.vue
@@ -1,7 +1,28 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<dialog-component>
-    <progress-component :model="model" />
-</dialog-component>
+  <DialogComponent>
+    <ProgressComponent :progress-perc="progressPerc" :progress-text="progressText" />
+  </DialogComponent>
 </template>
 
 <script>
@@ -9,16 +30,20 @@ import ProgressComponent from '../../../ui/components/ProgressBar.vue';
 import DialogComponent from './DialogComponent.vue';
 
 export default {
-    components: {
-        DialogComponent: DialogComponent,
-        ProgressComponent: ProgressComponent
+  components: {
+    DialogComponent,
+    ProgressComponent
+  },
+  inject: ['iconClass', 'title', 'hint', 'timestamp', 'message'],
+  props: {
+    progressPerc: {
+      type: Number,
+      default: 0
     },
-    inject: ['iconClass', 'title', 'hint', 'timestamp', 'message'],
-    props: {
-        model: {
-            type: Object,
-            required: true
-        }
+    progressText: {
+      type: String,
+      default: ''
     }
+  }
 };
 </script>
diff --git a/src/api/overlays/components/SelectionComponent.vue b/src/api/overlays/components/SelectionComponent.vue
new file mode 100644
index 00000000000..45ca72384c1
--- /dev/null
+++ b/src/api/overlays/components/SelectionComponent.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="c-message">
+    <!--Uses flex-row -->
+    <div class="c-message__icon" :class="['u-icon-bg-color-' + iconClass]"></div>
+    <div class="c-message__text">
+      <!-- Uses flex-column -->
+      <div v-if="title" class="c-message__title">
+        {{ title }}
+      </div>
+
+      <div v-if="message" class="c-message__action-text">
+        {{ message }}
+      </div>
+      <select @change="onChange">
+        <option
+          v-for="option in selectionOptions"
+          :key="option.key"
+          :value="option.key"
+          :selected="option.key === currentSelection"
+        >
+          {{ option.name }}
+        </option>
+      </select>
+
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  inject: ['iconClass', 'title', 'message', 'selectionOptions', 'currentSelection', 'onChange']
+};
+</script>
diff --git a/src/api/overlays/components/dialog-component.scss b/src/api/overlays/components/dialog-component.scss
index 71282ba08ae..08b41d8cacb 100644
--- a/src/api/overlays/components/dialog-component.scss
+++ b/src/api/overlays/components/dialog-component.scss
@@ -1,81 +1,81 @@
 @mixin legacyMessage() {
-    flex: 0 1 auto;
-    font-family: symbolsfont;
-    font-size: $messageIconD; // Singleton message in a dialog
-    margin-right: $interiorMarginLg;
+  flex: 0 1 auto;
+  font-family: symbolsfont;
+  font-size: $messageIconD; // Singleton message in a dialog
+  margin-right: $interiorMarginLg;
 }
 
 .c-message {
-    display: flex;
-    align-items: center;
-
-    > * + * {
-        margin-left: $interiorMarginLg;
-    }
+  display: flex;
+  align-items: center;
 
-    &__icon {
-        // Holds a background SVG graphic
-        $s: 80px;
-        flex: 0 0 auto;
-        min-width: $s;
-        min-height: $s;
-    }
+  > * + * {
+    margin-left: $interiorMarginLg;
+  }
 
-    &__text {
-        display: flex;
-        flex-direction: column;
-        flex: 1 1 auto;
+  &__icon {
+    // Holds a background SVG graphic
+    $s: 50px;
+    flex: 0 0 auto;
+    min-width: $s;
+    min-height: $s;
+  }
 
-        > * + * {
-            margin-top: $interiorMargin;
-        }
-    }
+  &__text {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
 
-    // __text elements
-    &__action-text {
-        font-size: 1.2em;
+    > * + * {
+      margin-top: $interiorMargin;
     }
+  }
 
-    &__title {
-        font-size: 1.5em;
-        font-weight: bold;
-    }
+  // __text elements
+  &__action-text {
+    font-size: 1.2em;
+  }
 
-    &--simple {
-        // Icon and text elements only
-        &:before {
-            font-size: 30px !important;
-        }
+  &__title {
+    font-size: 1.5em;
+    font-weight: bold;
+  }
 
-        [class*='__text'] {
-            font-size: 1.25em;
-        }
+  &--simple {
+    // Icon and text elements only
+    &:before {
+      font-size: 30px !important;
     }
 
-    /************************** LEGACY */
-    &.message-severity-info:before {
-        @include legacyMessage();
-        content: $glyph-icon-info;
-        color: $colorInfo;
+    [class*='__text'] {
+      font-size: 1.25em;
     }
+  }
 
-    &.message-severity-alert:before {
-        @include legacyMessage();
-        content: $glyph-icon-alert-rect;
-        color: $colorWarningLo;
-    }
+  /************************** LEGACY */
+  &.message-severity-info:before {
+    @include legacyMessage();
+    content: $glyph-icon-info;
+    color: $colorInfo;
+  }
 
-    &.message-severity-error:before {
-        @include legacyMessage();
-        content: $glyph-icon-alert-triangle;
-        color: $colorWarningHi;
-    }
+  &.message-severity-alert:before {
+    @include legacyMessage();
+    content: $glyph-icon-alert-rect;
+    color: $colorWarningLo;
+  }
+
+  &.message-severity-error:before {
+    @include legacyMessage();
+    content: $glyph-icon-alert-triangle;
+    color: $colorWarningHi;
+  }
 
-    // Messages in a list
-    .c-overlay__messages & {
-        padding: $interiorMarginLg;
-        &:before {
-            font-size: $messageListIconD;
-        }
+  // Messages in a list
+  .c-overlay__messages & {
+    padding: $interiorMarginLg;
+    &:before {
+      font-size: $messageListIconD;
     }
+  }
 }
diff --git a/src/api/overlays/components/overlay-component.scss b/src/api/overlays/components/overlay-component.scss
index 419d220487b..1ed0fd7ee17 100644
--- a/src/api/overlays/components/overlay-component.scss
+++ b/src/api/overlays/components/overlay-component.scss
@@ -1,154 +1,200 @@
-@mixin overlaySizing($marginTB: 5%, $marginLR: $marginTB, $width: auto, $height: auto) {
-    position: absolute;
-    top: $marginTB; right: $marginLR; bottom: $marginTB; left: $marginLR;
-    width: $width;
-    height: $height;
+@mixin overlaySizing($marginTB: auto, $marginLR: auto, $width: auto, $height: auto) {
+  position: absolute;
+  top: $marginTB;
+  right: $marginLR;
+  bottom: $marginTB;
+  left: $marginLR;
+  width: $width;
+  height: $height;
 }
 
 .l-overlay-wrapper {
-    // Created by overlayService.js, contains this template.
-    // Acts as an anchor for one or more overlays.
-    display: contents;
+  // Created by overlayService.js, contains this template.
+  // Acts as an anchor for one or more overlays.
+  display: contents;
 }
 
 .c-overlay {
+  @include abs();
+  z-index: 70;
+
+  &__blocker {
+    // Mobile-first: use the blocker to create a full look to dialogs
     @include abs();
-    z-index: 70;
+    background: $colorBodyBg;
+  }
 
-    &__blocker {
-        display: none; // Mobile-first
+  &__outer {
+    @include abs();
+    background: $colorBodyBg;
+    display: flex;
+    flex-direction: column;
+
+    body.mobile .l-overlay-fit & {
+      // Vertically center small dialogs in mobile
+      top: 50%;
+      bottom: auto;
+      transform: translateY(-50%);
     }
+  }
 
-    &__outer {
-        @include abs();
-        background: $colorBodyBg;
-        display: flex;
-        flex-direction: column;
-        padding: $overlayInnerMargin;
+  &__close-button {
+    $p: $interiorMargin + 2px;
+    font-size: 1.5em;
+    position: absolute;
+    top: $p;
+    right: $p;
+    z-index: 99;
+  }
+
+  &__content-wrapper {
+    display: flex;
+    height: 100%;
+    overflow: auto;
+    flex-direction: column;
+    gap: $interiorMargin;
+
+    body.desktop & {
+      overflow: hidden;
     }
 
-    &__close-button {
-        $p: $interiorMargin + 2px;
-        font-size: 1.5em;
-        position: absolute;
-        top: $p; right: $p;
-        z-index: 99;
+    .l-overlay-fit &,
+    .l-overlay-dialog & {
+      margin: $overlayInnerMargin;
     }
-
-    &__contents {
-        flex: 1 1 auto;
-        display: flex;
-        flex-direction: column;
-        outline: none;
-        overflow: auto;
+  }
+
+  &__contents {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    outline: none;
+    overflow: auto;
+    body.mobile & {
+      flex: none;
     }
+  }
 
-    &__top-bar {
-        flex: 0 0 auto;
-        flex-direction: column;
-        display: flex;
+  &__top-bar {
+    flex: 0 0 auto;
+    flex-direction: column;
+    display: flex;
 
-        > * {
-            flex: 0 0 auto;
-            margin-bottom: $interiorMargin;
-        }
+    > * {
+      flex: 0 0 auto;
+      margin-bottom: $interiorMargin;
     }
-
-    &__dialog-title {
-        @include ellipsize();
-        font-size: 1.5em;
-        line-height: 120%;
+  }
+
+  &__dialog-title {
+    @include ellipsize();
+    font-size: 1.5em;
+    line-height: 120%;
+  }
+
+  &__contents-main {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    height: 0; // Chrome 73 overflow bug fix
+    overflow: auto;
+    padding-right: $interiorMargin; // fend off scroll bar
+  }
+
+  &__button-bar {
+    flex: 0 0 auto;
+    display: flex;
+    justify-content: flex-end;
+    margin-top: $interiorMargin;
+    body.mobile & {
+      justify-content: flex-end;
+      padding-right: $interiorMargin;
     }
 
-    &__contents-main {
-        display: flex;
-        flex-direction: column;
-        flex: 1 1 auto;
-        height: 0; // Chrome 73 overflow bug fix
-        overflow: auto;
-        padding-right: $interiorMargin; // fend off scroll bar
+    > * + * {
+      margin-left: $interiorMargin;
     }
+  }
 
-    &__button-bar {
-        flex: 0 0 auto;
-        display: flex;
-        justify-content: flex-end;
-        margin-top: $interiorMargin;
-
-        > * + * {
-            margin-left: $interiorMargin;
-        }
-    }
-
-    .c-object-label__name {
-        filter: $objectLabelNameFilter;
-    }
+  .c-object-label__name {
+    color: $objectLabelNameColorFg;
+  }
 }
 
 body.desktop {
-    .c-overlay {
-        &__blocker {
-            @include abs();
-            background: $colorOvrBlocker;
-            cursor: pointer;
-            display: block;
-        }
+  .c-overlay {
+    &__blocker {
+      @include abs();
+      background: $colorOvrBlocker;
+      cursor: pointer;
+      display: block;
     }
+  }
+
+  // Overlay types, styling for desktop. Appended to .l-overlay-wrapper element.
+  .l-overlay-large,
+  .l-overlay-small,
+  .l-overlay-dialog,
+  .l-overlay-fit {
+    .c-overlay__outer {
+      border-radius: $overlayCr;
+      box-shadow: rgba(black, 0.5) 0 2px 25px;
+    }
+  }
+
+  .l-overlay-fullscreen {
+    // Used by About > Licenses display
+    .c-overlay__outer {
+      @include overlaySizing(
+        nth($overlayOuterMarginFullscreen, 1),
+        nth($overlayOuterMarginFullscreen, 2)
+      );
+    }
+  }
 
-    // Overlay types, styling for desktop. Appended to .l-overlay-wrapper element.
-    .l-overlay-large,
-    .l-overlay-small,
-    .l-overlay-fit {
-        .c-overlay__outer {
-            border-radius: $overlayCr;
-            box-shadow: rgba(black, 0.5) 0 2px 25px;
-        }
+  .l-overlay-large {
+    // Default
+    $pad: $interiorMarginLg;
+    $tbPad: floor($pad * 0.8);
+    $lrPad: $pad;
+    .c-overlay {
+      &__outer {
+        @include overlaySizing(nth($overlayOuterMarginLarge, 1), nth($overlayOuterMarginLarge, 2));
+        padding: $tbPad $lrPad;
+      }
+
+      &__close-button {
+        //top: $interiorMargin;
+        //right: $interiorMargin;
+      }
     }
 
-    .l-overlay-fullscreen {
-        // Used by About > Licenses display
-        .c-overlay__outer {
-            @include overlaySizing($overlayOuterMarginFullscreen);
-        }
+    .l-browse-bar {
+      margin-right: 50px; // Don't cover close button
+      margin-bottom: $interiorMargin;
     }
+  }
 
-    .l-overlay-large {
-        // Default
-        $pad: $interiorMarginLg;
-        $tbPad: floor($pad * 0.8);
-        $lrPad: $pad;
-        .c-overlay {
-            &__outer {
-                @include overlaySizing($overlayOuterMarginLarge);
-                padding: $tbPad $lrPad;
-            }
-
-            &__close-button {
-                //top: $interiorMargin;
-                //right: $interiorMargin;
-            }
-        }
-
-        .l-browse-bar {
-            margin-right: 50px; // Don't cover close button
-            margin-bottom: $interiorMargin;
-        }
+  .l-overlay-small {
+    .c-overlay__outer {
+      @include overlaySizing(nth($overlayOuterMarginSmall, 1), nth($overlayOuterMarginSmall, 2));
     }
+  }
 
-    .l-overlay-small {
-        .c-overlay__outer {
-            @include overlaySizing($overlayOuterMarginDialog);
-        }
+  .l-overlay-dialog {
+    .c-overlay__outer {
+      @include overlaySizing(nth($overlayOuterMarginDialog, 1), nth($overlayOuterMarginDialog, 2));
     }
+  }
 
-    .t-dialog-sm .l-overlay-small, // Legacy dialog support
+  .t-dialog-sm .l-overlay-small, // Legacy dialog support
     .l-overlay-fit {
-        .c-overlay__outer {
-            @include overlaySizing(auto);
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            min-width: 20%;
-        }
+    .c-overlay__outer {
+      @include overlaySizing(auto, auto);
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      min-width: 20%;
     }
+  }
 }
diff --git a/src/api/priority/PriorityAPI.js b/src/api/priority/PriorityAPI.js
new file mode 100644
index 00000000000..8d915b1e1ff
--- /dev/null
+++ b/src/api/priority/PriorityAPI.js
@@ -0,0 +1,28 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+const PRIORITIES = Object.freeze({
+  HIGH: 1000,
+  DEFAULT: 0,
+  LOW: -1000
+});
+export default PRIORITIES;
diff --git a/src/api/status/StatusAPI.js b/src/api/status/StatusAPI.js
index 0251f433864..ed4968d470e 100644
--- a/src/api/status/StatusAPI.js
+++ b/src/api/status/StatusAPI.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -23,45 +23,45 @@
 import EventEmitter from 'EventEmitter';
 
 export default class StatusAPI extends EventEmitter {
-    constructor(openmct) {
-        super();
+  constructor(openmct) {
+    super();
 
-        this._openmct = openmct;
-        this._statusCache = {};
+    this._openmct = openmct;
+    this._statusCache = {};
 
-        this.get = this.get.bind(this);
-        this.set = this.set.bind(this);
-        this.observe = this.observe.bind(this);
-    }
+    this.get = this.get.bind(this);
+    this.set = this.set.bind(this);
+    this.observe = this.observe.bind(this);
+  }
 
-    get(identifier) {
-        let keyString = this._openmct.objects.makeKeyString(identifier);
+  get(identifier) {
+    let keyString = this._openmct.objects.makeKeyString(identifier);
 
-        return this._statusCache[keyString];
-    }
+    return this._statusCache[keyString];
+  }
 
-    set(identifier, value) {
-        let keyString = this._openmct.objects.makeKeyString(identifier);
+  set(identifier, value) {
+    let keyString = this._openmct.objects.makeKeyString(identifier);
 
-        this._statusCache[keyString] = value;
-        this.emit(keyString, value);
-    }
+    this._statusCache[keyString] = value;
+    this.emit(keyString, value);
+  }
 
-    delete(identifier) {
-        let keyString = this._openmct.objects.makeKeyString(identifier);
+  delete(identifier) {
+    let keyString = this._openmct.objects.makeKeyString(identifier);
 
-        this._statusCache[keyString] = undefined;
-        this.emit(keyString, undefined);
-        delete this._statusCache[keyString];
-    }
+    this._statusCache[keyString] = undefined;
+    this.emit(keyString, undefined);
+    delete this._statusCache[keyString];
+  }
 
-    observe(identifier, callback) {
-        let key = this._openmct.objects.makeKeyString(identifier);
+  observe(identifier, callback) {
+    let key = this._openmct.objects.makeKeyString(identifier);
 
-        this.on(key, callback);
+    this.on(key, callback);
 
-        return () => {
-            this.off(key, callback);
-        };
-    }
+    return () => {
+      this.off(key, callback);
+    };
+  }
 }
diff --git a/src/api/status/StatusAPISpec.js b/src/api/status/StatusAPISpec.js
index f61968de893..e1766291fca 100644
--- a/src/api/status/StatusAPISpec.js
+++ b/src/api/status/StatusAPISpec.js
@@ -1,85 +1,84 @@
+import { createOpenMct, resetApplicationState } from '../../utils/testing.js';
 import StatusAPI from './StatusAPI.js';
-import { createOpenMct, resetApplicationState } from '../../utils/testing';
-
-describe("The Status API", () => {
-    let statusAPI;
-    let openmct;
-    let identifier;
-    let status;
-    let status2;
-    let callback;
-
-    beforeEach(() => {
-        openmct = createOpenMct();
-        statusAPI = new StatusAPI(openmct);
-        identifier = {
-            namespace: "test-namespace",
-            key: "test-key"
-        };
-        status = "test-status";
-        status2 = 'test-status-deux';
-        callback = jasmine.createSpy('callback', (statusUpdate) => statusUpdate);
-    });
 
-    afterEach(() => {
-        return resetApplicationState(openmct);
+describe('The Status API', () => {
+  let statusAPI;
+  let openmct;
+  let identifier;
+  let status;
+  let status2;
+  let callback;
+
+  beforeEach(() => {
+    openmct = createOpenMct();
+    statusAPI = new StatusAPI(openmct);
+    identifier = {
+      namespace: 'test-namespace',
+      key: 'test-key'
+    };
+    status = 'test-status';
+    status2 = 'test-status-deux';
+    callback = jasmine.createSpy('callback', (statusUpdate) => statusUpdate);
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  describe('set function', () => {
+    it('sets status for identifier', () => {
+      statusAPI.set(identifier, status);
+
+      let resultingStatus = statusAPI.get(identifier);
+
+      expect(resultingStatus).toEqual(status);
     });
+  });
 
-    describe("set function", () => {
-        it("sets status for identifier", () => {
-            statusAPI.set(identifier, status);
+  describe('get function', () => {
+    it('returns status for identifier', () => {
+      statusAPI.set(identifier, status2);
 
-            let resultingStatus = statusAPI.get(identifier);
+      let resultingStatus = statusAPI.get(identifier);
 
-            expect(resultingStatus).toEqual(status);
-        });
+      expect(resultingStatus).toEqual(status2);
     });
+  });
 
-    describe("get function", () => {
-        it("returns status for identifier", () => {
-            statusAPI.set(identifier, status2);
-
-            let resultingStatus = statusAPI.get(identifier);
-
-            expect(resultingStatus).toEqual(status2);
-        });
-    });
+  describe('delete function', () => {
+    it('deletes status for identifier', () => {
+      statusAPI.set(identifier, status);
 
-    describe("delete function", () => {
-        it("deletes status for identifier", () => {
-            statusAPI.set(identifier, status);
+      let resultingStatus = statusAPI.get(identifier);
+      expect(resultingStatus).toEqual(status);
 
-            let resultingStatus = statusAPI.get(identifier);
-            expect(resultingStatus).toEqual(status);
+      statusAPI.delete(identifier);
+      resultingStatus = statusAPI.get(identifier);
 
-            statusAPI.delete(identifier);
-            resultingStatus = statusAPI.get(identifier);
-
-            expect(resultingStatus).toBeUndefined();
-        });
+      expect(resultingStatus).toBeUndefined();
     });
+  });
 
-    describe("observe function", () => {
-
-        it("allows callbacks to be attached to status set and delete events", () => {
-            let unsubscribe = statusAPI.observe(identifier, callback);
-            statusAPI.set(identifier, status);
+  describe('observe function', () => {
+    it('allows callbacks to be attached to status set and delete events', () => {
+      let unsubscribe = statusAPI.observe(identifier, callback);
+      statusAPI.set(identifier, status);
 
-            expect(callback).toHaveBeenCalledWith(status);
+      expect(callback).toHaveBeenCalledWith(status);
 
-            statusAPI.delete(identifier);
+      statusAPI.delete(identifier);
 
-            expect(callback).toHaveBeenCalledWith(undefined);
-            unsubscribe();
-        });
+      expect(callback).toHaveBeenCalledWith(undefined);
+      unsubscribe();
+    });
 
-        it("returns a unsubscribe function", () => {
-            let unsubscribe = statusAPI.observe(identifier, callback);
-            unsubscribe();
+    it('returns a unsubscribe function', () => {
+      let unsubscribe = statusAPI.observe(identifier, callback);
+      unsubscribe();
 
-            statusAPI.set(identifier, status);
+      statusAPI.set(identifier, status);
 
-            expect(callback).toHaveBeenCalledTimes(0);
-        });
+      expect(callback).toHaveBeenCalledTimes(0);
     });
+  });
 });
diff --git a/src/api/telemetry/BatchingWebSocket.js b/src/api/telemetry/BatchingWebSocket.js
new file mode 100644
index 00000000000..204e6e9e707
--- /dev/null
+++ b/src/api/telemetry/BatchingWebSocket.js
@@ -0,0 +1,194 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import installWorker from './WebSocketWorker.js';
+const DEFAULT_RATE_MS = 1000;
+/**
+ * Describes the strategy to be used when batching WebSocket messages
+ *
+ * @typedef BatchingStrategy
+ * @property {Function} shouldBatchMessage a function that accepts a single
+ * argument - the raw message received from the websocket. Every message
+ * received will be evaluated against this function so it should be performant.
+ * Note also that this function is executed in a worker, so it must be
+ * completely self-contained with no external dependencies. The function
+ * should return `true` if the message should be batched, and `false` if not.
+ * @property {Function} getBatchIdFromMessage a function that accepts a
+ * single argument - the raw message received from the websocket. Only messages
+ * where `shouldBatchMessage` has evaluated to true will be passed into this
+ * function. The function should return a unique value on which to batch the
+ * messages. For example a telemetry, channel, or parameter identifier.
+ */
+/**
+ * Provides a reliable and convenient WebSocket abstraction layer that handles
+ * a lot of boilerplate common to managing WebSocket connections such as:
+ * - Establishing a WebSocket connection to a server
+ * - Reconnecting on error, with a fallback strategy
+ * - Queuing messages so that clients can send messages without concern for the current
+ * connection state of the WebSocket.
+ *
+ * The WebSocket that it manages is based in a dedicated worker so that network
+ * concerns are not handled on the main event loop. This allows for performant receipt
+ * and batching of messages without blocking either the UI or server.
+ *
+ * @memberof module:openmct.telemetry
+ */
+class BatchingWebSocket extends EventTarget {
+  #worker;
+  #openmct;
+  #showingRateLimitNotification;
+  #rate;
+
+  constructor(openmct) {
+    super();
+    // Install worker, register listeners etc.
+    const workerFunction = `(${installWorker.toString()})()`;
+    const workerBlob = new Blob([workerFunction]);
+    const workerUrl = URL.createObjectURL(workerBlob, { type: 'application/javascript' });
+    this.#worker = new Worker(workerUrl);
+    this.#openmct = openmct;
+    this.#showingRateLimitNotification = false;
+    this.#rate = DEFAULT_RATE_MS;
+
+    const routeMessageToHandler = this.#routeMessageToHandler.bind(this);
+    this.#worker.addEventListener('message', routeMessageToHandler);
+    openmct.on(
+      'destroy',
+      () => {
+        this.disconnect();
+        URL.revokeObjectURL(workerUrl);
+      },
+      { once: true }
+    );
+  }
+
+  /**
+   * Will establish a WebSocket connection to the provided url
+   * @param {string} url The URL to connect to
+   */
+  connect(url) {
+    this.#worker.postMessage({
+      type: 'connect',
+      url
+    });
+
+    this.#readyForNextBatch();
+  }
+
+  #readyForNextBatch() {
+    this.#worker.postMessage({
+      type: 'readyForNextBatch'
+    });
+  }
+
+  /**
+   * Send a message to the WebSocket.
+   * @param {any} message The message to send. Can be any type supported by WebSockets.
+   * See https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/send#data
+   */
+  sendMessage(message) {
+    this.#worker.postMessage({
+      type: 'message',
+      message
+    });
+  }
+
+  /**
+   * Set the strategy used to both decide which raw messages to batch, and how to group
+   * them.
+   * @param {BatchingStrategy} strategy The batching strategy to use when evaluating
+   * raw messages from the WebSocket.
+   */
+  setBatchingStrategy(strategy) {
+    const serializedStrategy = {
+      shouldBatchMessage: strategy.shouldBatchMessage.toString(),
+      getBatchIdFromMessage: strategy.getBatchIdFromMessage.toString()
+    };
+
+    this.#worker.postMessage({
+      type: 'setBatchingStrategy',
+      serializedStrategy
+    });
+  }
+
+  /**
+   * When using batching, sets the rate at which batches of messages are released.
+   * @param {Number} rate the amount of time to wait, in ms, between batches.
+   */
+  setRate(rate) {
+    this.#rate = rate;
+  }
+
+  /**
+   * @param {Number} maxBatchSize the maximum length of a batch of messages. For example,
+   * the maximum number of telemetry values to batch before dropping them
+   * Note that this is a fail-safe that is only invoked if performance drops to the
+   * point where Open MCT cannot keep up with the amount of telemetry it is receiving.
+   * In this event it will sacrifice the oldest telemetry in the batch in favor of the
+   * most recent telemetry. The user will be informed that telemetry has been dropped.
+   *
+   * This should be set appropriately for the expected data rate. eg. If telemetry
+   * is received at 10Hz for each telemetry point, then a minimal combination of batch
+   * size and rate is 10 and 1000 respectively. Ideally you would add some margin, so
+   * 15 would probably be a better batch size.
+   */
+  setMaxBatchSize(maxBatchSize) {
+    this.#worker.postMessage({
+      type: 'setMaxBatchSize',
+      maxBatchSize
+    });
+  }
+
+  /**
+   * Disconnect the associated WebSocket. Generally speaking there is no need to call
+   * this manually.
+   */
+  disconnect() {
+    this.#worker.postMessage({
+      type: 'disconnect'
+    });
+  }
+
+  #routeMessageToHandler(message) {
+    if (message.data.type === 'batch') {
+      if (message.data.batch.dropped === true && !this.#showingRateLimitNotification) {
+        const notification = this.#openmct.notifications.alert(
+          'Telemetry dropped due to client rate limiting.',
+          { hint: 'Refresh individual telemetry views to retrieve dropped telemetry if needed.' }
+        );
+        this.#showingRateLimitNotification = true;
+        notification.once('minimized', () => {
+          this.#showingRateLimitNotification = false;
+        });
+      }
+      this.dispatchEvent(new CustomEvent('batch', { detail: message.data.batch }));
+      setTimeout(() => {
+        this.#readyForNextBatch();
+      }, this.#rate);
+    } else if (message.data.type === 'message') {
+      this.dispatchEvent(new CustomEvent('message', { detail: message.data.message }));
+    } else {
+      throw new Error(`Unknown message type: ${message.data.type}`);
+    }
+  }
+}
+
+export default BatchingWebSocket;
diff --git a/src/api/telemetry/DefaultMetadataProvider.js b/src/api/telemetry/DefaultMetadataProvider.js
index ed1168a69a2..356b414dd93 100644
--- a/src/api/telemetry/DefaultMetadataProvider.js
+++ b/src/api/telemetry/DefaultMetadataProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open openmct, Copyright (c) 2014-2021, United States Government
+ * Open openmct, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,109 +20,105 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    'lodash'
-], function (
-    _
-) {
-
-    /**
-     * This is the default metadata provider; for any object with a "telemetry"
-     * property, this provider will return the value of that property as the
-     * telemetry metadata.
-     *
-     * This provider also implements legacy support for telemetry metadata
-     * defined on the type.  Telemetry metadata definitions on type will be
-     * depreciated in the future.
-     */
-    function DefaultMetadataProvider(openmct) {
-        this.openmct = openmct;
-    }
-
-    /**
-     * Applies to any domain object with a telemetry property, or whose type
-     * definition has a telemetry property.
-     */
-    DefaultMetadataProvider.prototype.supportsMetadata = function (domainObject) {
-        return Boolean(domainObject.telemetry) || Boolean(this.typeHasTelemetry(domainObject));
-    };
+import _ from 'lodash';
 
-    /**
-     * Retrieves valueMetadata from legacy metadata.
-     * @private
-     */
-    function valueMetadatasFromOldFormat(metadata) {
-        const valueMetadatas = [];
-
-        valueMetadatas.push({
-            key: 'name',
-            name: 'Name'
-        });
-
-        metadata.domains.forEach(function (domain, index) {
-            const valueMetadata = _.clone(domain);
-            valueMetadata.hints = {
-                domain: index + 1
-            };
-            valueMetadatas.push(valueMetadata);
-        });
-
-        metadata.ranges.forEach(function (range, index) {
-            const valueMetadata = _.clone(range);
-            valueMetadata.hints = {
-                range: index,
-                priority: index + metadata.domains.length + 1
-            };
-
-            if (valueMetadata.type === 'enum') {
-                valueMetadata.key = 'enum';
-                valueMetadata.hints.y -= 10;
-                valueMetadata.hints.range -= 10;
-                valueMetadata.enumerations =
-                    _.sortBy(valueMetadata.enumerations.map(function (e) {
-                        return {
-                            string: e.string,
-                            value: Number(e.value)
-                        };
-                    }), 'e.value');
-                valueMetadata.values = valueMetadata.enumerations.map(e => e.value);
-                valueMetadata.max = Math.max(valueMetadata.values);
-                valueMetadata.min = Math.min(valueMetadata.values);
-            }
-
-            valueMetadatas.push(valueMetadata);
-        });
-
-        return valueMetadatas;
+/**
+ * This is the default metadata provider; for any object with a "telemetry"
+ * property, this provider will return the value of that property as the
+ * telemetry metadata.
+ *
+ * This provider also implements legacy support for telemetry metadata
+ * defined on the type.  Telemetry metadata definitions on type will be
+ * depreciated in the future.
+ */
+export default class DefaultMetadataProvider {
+  constructor(openmct) {
+    this.openmct = openmct;
+  }
+
+  /**
+   * Applies to any domain object with a telemetry property, or whose type
+   * definition has a telemetry property.
+   */
+  supportsMetadata(domainObject) {
+    return Boolean(domainObject.telemetry) || Boolean(this.typeHasTelemetry(domainObject));
+  }
+
+  /**
+   * Returns telemetry metadata for a given domain object.
+   */
+  getMetadata(domainObject) {
+    const metadata = domainObject.telemetry || {};
+    if (this.typeHasTelemetry(domainObject)) {
+      const typeMetadata = this.openmct.types.get(domainObject.type).definition.telemetry;
+
+      Object.assign(metadata, typeMetadata);
+
+      if (!metadata.values) {
+        metadata.values = valueMetadatasFromOldFormat(metadata);
+      }
     }
 
-    /**
-     * Returns telemetry metadata for a given domain object.
-     */
-    DefaultMetadataProvider.prototype.getMetadata = function (domainObject) {
-        const metadata = domainObject.telemetry || {};
-        if (this.typeHasTelemetry(domainObject)) {
-            const typeMetadata = this.typeService.getType(domainObject.type).typeDef.telemetry;
-            Object.assign(metadata, typeMetadata);
-            if (!metadata.values) {
-                metadata.values = valueMetadatasFromOldFormat(metadata);
-            }
-        }
-
-        return metadata;
+    return metadata;
+  }
+
+  /**
+   * @private
+   */
+  typeHasTelemetry(domainObject) {
+    const type = this.openmct.types.get(domainObject.type);
+
+    return Boolean(type.definition.telemetry);
+  }
+}
+
+/**
+ * Retrieves valueMetadata from legacy metadata.
+ * @private
+ */
+function valueMetadatasFromOldFormat(metadata) {
+  const valueMetadatas = [];
+
+  valueMetadatas.push({
+    key: 'name',
+    name: 'Name'
+  });
+
+  metadata.domains.forEach(function (domain, index) {
+    const valueMetadata = _.clone(domain);
+    valueMetadata.hints = {
+      domain: index + 1
     };
-
-    /**
-     * @private
-     */
-    DefaultMetadataProvider.prototype.typeHasTelemetry = function (domainObject) {
-        if (!this.typeService) {
-            this.typeService = this.openmct.$injector.get('typeService');
-        }
-
-        return Boolean(this.typeService.getType(domainObject.type).typeDef.telemetry);
+    valueMetadatas.push(valueMetadata);
+  });
+
+  metadata.ranges.forEach(function (range, index) {
+    const valueMetadata = _.clone(range);
+    valueMetadata.hints = {
+      range: index,
+      priority: index + metadata.domains.length + 1
     };
 
-    return DefaultMetadataProvider;
+    if (valueMetadata.type === 'enum') {
+      valueMetadata.key = 'enum';
+      valueMetadata.hints.y -= 10;
+      valueMetadata.hints.range -= 10;
+      valueMetadata.enumerations = _.sortBy(
+        valueMetadata.enumerations.map(function (e) {
+          return {
+            string: e.string,
+            value: Number(e.value)
+          };
+        }),
+        'e.value'
+      );
+      valueMetadata.values = valueMetadata.enumerations.map((e) => e.value);
+      valueMetadata.max = Math.max(valueMetadata.values);
+      valueMetadata.min = Math.min(valueMetadata.values);
+    }
+
+    valueMetadatas.push(valueMetadata);
+  });
 
-});
+  return valueMetadatas;
+}
diff --git a/src/api/telemetry/TelemetryAPI.js b/src/api/telemetry/TelemetryAPI.js
index 1e9e84fb326..143f3fc32ed 100644
--- a/src/api/telemetry/TelemetryAPI.js
+++ b/src/api/telemetry/TelemetryAPI.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,576 +20,1041 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    '../../plugins/displayLayout/CustomStringFormatter',
-    './TelemetryMetadataManager',
-    './TelemetryValueFormatter',
-    './DefaultMetadataProvider',
-    'objectUtils',
-    'lodash'
-], function (
-    CustomStringFormatter,
-    TelemetryMetadataManager,
-    TelemetryValueFormatter,
-    DefaultMetadataProvider,
-    objectUtils,
-    _
-) {
-    /**
-     * A LimitEvaluator may be used to detect when telemetry values
-     * have exceeded nominal conditions.
-     *
-     * @interface LimitEvaluator
-     * @memberof module:openmct.TelemetryAPI~
-     */
-
-    /**
-     * Check for any limit violations associated with a telemetry datum.
-     * @method evaluate
-     * @param {*} datum the telemetry datum to evaluate
-     * @param {TelemetryProperty} the property to check for limit violations
-     * @memberof module:openmct.TelemetryAPI~LimitEvaluator
-     * @returns {module:openmct.TelemetryAPI~LimitViolation} metadata about
-     *          the limit violation, or undefined if a value is within limits
-     */
-
-    /**
-     * A violation of limits defined for a telemetry property.
-     * @typedef LimitViolation
-     * @memberof {module:openmct.TelemetryAPI~}
-     * @property {string} cssClass the class (or space-separated classes) to
-     *           apply to display elements for values which violate this limit
-     * @property {string} name the human-readable name for the limit violation
-     */
-
-    /**
-     * A TelemetryFormatter converts telemetry values for purposes of
-     * display as text.
-     *
-     * @interface TelemetryFormatter
-     * @memberof module:openmct.TelemetryAPI~
-     */
-
-    /**
-     * Retrieve the 'key' from the datum and format it accordingly to
-     * telemetry metadata in domain object.
-     *
-     * @method format
-     * @memberof module:openmct.TelemetryAPI~TelemetryFormatter#
-     */
-
-    /**
-     * Describes a property which would be found in a datum of telemetry
-     * associated with a particular domain object.
-     *
-     * @typedef TelemetryProperty
-     * @memberof module:openmct.TelemetryAPI~
-     * @property {string} key the name of the property in the datum which
-     *           contains this telemetry value
-     * @property {string} name the human-readable name for this property
-     * @property {string} [units] the units associated with this property
-     * @property {boolean} [temporal] true if this property is a timestamp, or
-     *           may be otherwise used to order telemetry in a time-like
-     *           fashion; default is false
-     * @property {boolean} [numeric] true if the values for this property
-     *           can be interpreted plainly as numbers; default is true
-     * @property {boolean} [enumerated] true if this property may have only
-     *           certain specific values; default is false
-     * @property {string} [values] for enumerated states, an ordered list
-     *           of possible values
-     */
-
-    /**
-     * Describes and bounds requests for telemetry data.
-     *
-     * @typedef TelemetryRequest
-     * @memberof module:openmct.TelemetryAPI~
-     * @property {string} sort the key of the property to sort by. This may
-     *           be prefixed with a "+" or a "-" sign to sort in ascending
-     *           or descending order respectively. If no prefix is present,
-     *           ascending order will be used.
-     * @property {*} start the lower bound for values of the sorting property
-     * @property {*} end the upper bound for values of the sorting property
-     * @property {string[]} strategies symbolic identifiers for strategies
-     *           (such as `minmax`) which may be recognized by providers;
-     *           these will be tried in order until an appropriate provider
-     *           is found
-     */
-
-    /**
-     * Provides telemetry data. To connect to new data sources, new
-     * TelemetryProvider implementations should be
-     * [registered]{@link module:openmct.TelemetryAPI#addProvider}.
-     *
-     * @interface TelemetryProvider
-     * @memberof module:openmct.TelemetryAPI~
-     */
-
-    /**
-     * An interface for retrieving telemetry data associated with a domain
-     * object.
-     *
-     * @interface TelemetryAPI
-     * @augments module:openmct.TelemetryAPI~TelemetryProvider
-     * @memberof module:openmct
-     */
-    function TelemetryAPI(openmct) {
-        this.openmct = openmct;
-        this.requestProviders = [];
-        this.subscriptionProviders = [];
-        this.metadataProviders = [new DefaultMetadataProvider(this.openmct)];
-        this.limitProviders = [];
-        this.metadataCache = new WeakMap();
-        this.formatMapCache = new WeakMap();
-        this.valueFormatterCache = new WeakMap();
-    }
-
-    /**
-     * Return Custom String Formatter
-     *
-     * @param {Object} valueMetadata valueMetadata for given telemetry object
-     * @param {string} format custom formatter string (eg: %.4f, &lts etc.)
-     * @returns {CustomStringFormatter}
-     */
-    TelemetryAPI.prototype.customStringFormatter = function (valueMetadata, format) {
-        return new CustomStringFormatter.default(this.openmct, valueMetadata, format);
-    };
+import { makeKeyString } from 'objectUtils';
 
-    /**
-     * Return true if the given domainObject is a telemetry object.  A telemetry
-     * object is any object which has telemetry metadata-- regardless of whether
-     * the telemetry object has an available telemetry provider.
-     *
-     * @param {module:openmct.DomainObject} domainObject
-     * @returns {boolean} true if the object is a telemetry object.
-     */
-    TelemetryAPI.prototype.isTelemetryObject = function (domainObject) {
-        return Boolean(this.findMetadataProvider(domainObject));
-    };
+import CustomStringFormatter from '../../plugins/displayLayout/CustomStringFormatter.js';
+import BatchingWebSocket from './BatchingWebSocket.js';
+import DefaultMetadataProvider from './DefaultMetadataProvider.js';
+import TelemetryCollection from './TelemetryCollection.js';
+import TelemetryMetadataManager from './TelemetryMetadataManager.js';
+import TelemetryRequestInterceptorRegistry from './TelemetryRequestInterceptor.js';
+import TelemetryValueFormatter from './TelemetryValueFormatter.js';
 
-    /**
-     * Check if this provider can supply telemetry data associated with
-     * this domain object.
-     *
-     * @method canProvideTelemetry
-     * @param {module:openmct.DomainObject} domainObject the object for
-     *        which telemetry would be provided
-     * @returns {boolean} true if telemetry can be provided
-     * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
-     */
-    TelemetryAPI.prototype.canProvideTelemetry = function (domainObject) {
-        console.warn(
-            'DEPRECATION WARNING: openmct.telemetry.canProvideTelemetry '
-            + 'will not be supported in future versions of Open MCT.  Please '
-            + 'use openmct.telemetry.isTelemetryObject instead.'
-        );
+/**
+ * @typedef {import('../time/TimeContext').TimeContext} TimeContext
+ */
 
-        return Boolean(this.findSubscriptionProvider(domainObject))
-               || Boolean(this.findRequestProvider(domainObject));
-    };
+/**
+ * Describes and bounds requests for telemetry data.
+ *
+ * @typedef TelemetryRequestOptions
+ * @property {String} [sort] the key of the property to sort by. This may
+ *           be prefixed with a "+" or a "-" sign to sort in ascending
+ *           or descending order respectively. If no prefix is present,
+ *           ascending order will be used.
+ * @property {Number} [start] the lower bound for values of the sorting property
+ * @property {Number} [end] the upper bound for values of the sorting property
+ * @property {String} [strategy] symbolic identifier for strategies
+ *           (such as `latest` or `minmax`) which may be recognized by providers;
+ *           these will be tried in order until an appropriate provider
+ *           is found
+ * @property {AbortController} [signal] an AbortController which can be used
+ *           to cancel a telemetry request
+ * @property {String} [domain] the domain key of the request
+ * @property {TimeContext} [timeContext] the time context to use for this request
+ * @memberof module:openmct.TelemetryAPI~
+ */
 
-    /**
-     * Register a telemetry provider with the telemetry service. This
-     * allows you to connect alternative telemetry sources.
-     * @method addProvider
-     * @memberof module:openmct.TelemetryAPI#
-     * @param {module:openmct.TelemetryAPI~TelemetryProvider} provider the new
-     *        telemetry provider
-     */
-    TelemetryAPI.prototype.addProvider = function (provider) {
-        if (provider.supportsRequest) {
-            this.requestProviders.unshift(provider);
-        }
+/**
+ * Describes and bounds requests for telemetry data.
+ *
+ * @typedef TelemetrySubscriptionOptions
+ * @property {String} [strategy] symbolic identifier directing providers on how
+ * to handle telemetry subscriptions. The default behavior is 'latest' which will
+ * always return a single telemetry value with each callback, and in the event
+ * of throttling will always prioritize the latest data, meaning intermediate
+ * data will be skipped. Alternatively, the `batch` strategy can be used, which
+ * will return all telemetry values since the last callback. This strategy is
+ * useful for cases where intermediate data is important, such as when
+ * rendering a telemetry plot or table. If `batch` is specified, the subscription
+ * callback will be invoked with an Array.
+ *
+ * @memberof module:openmct.TelemetryAPI~
+ */
 
-        if (provider.supportsSubscribe) {
-            this.subscriptionProviders.unshift(provider);
-        }
+const SUBSCRIBE_STRATEGY = {
+  LATEST: 'latest',
+  BATCH: 'batch'
+};
 
-        if (provider.supportsMetadata) {
-            this.metadataProviders.unshift(provider);
-        }
+/**
+ * Utilities for telemetry
+ * @interface TelemetryAPI
+ * @memberof module:openmct
+ */
+export default class TelemetryAPI {
+  #isGreedyLAD;
+  #subscribeCache;
 
-        if (provider.supportsLimits) {
-            this.limitProviders.unshift(provider);
-        }
-    };
+  get SUBSCRIBE_STRATEGY() {
+    return SUBSCRIBE_STRATEGY;
+  }
 
-    /**
-     * @private
-     */
-    TelemetryAPI.prototype.findSubscriptionProvider = function () {
-        const args = Array.prototype.slice.apply(arguments);
-        function supportsDomainObject(provider) {
-            return provider.supportsSubscribe.apply(provider, args);
-        }
+  constructor(openmct) {
+    this.openmct = openmct;
 
-        return this.subscriptionProviders.filter(supportsDomainObject)[0];
-    };
+    this.formatMapCache = new WeakMap();
+    this.formatters = new Map();
+    this.limitProviders = [];
+    this.stalenessProviders = [];
+    this.metadataCache = new WeakMap();
+    this.metadataProviders = [new DefaultMetadataProvider(this.openmct)];
+    this.noRequestProviderForAllObjects = false;
+    this.requestAbortControllers = new Set();
+    this.requestProviders = [];
+    this.subscriptionProviders = [];
+    this.valueFormatterCache = new WeakMap();
+    this.requestInterceptorRegistry = new TelemetryRequestInterceptorRegistry();
+    this.#isGreedyLAD = true;
+    this.BatchingWebSocket = BatchingWebSocket;
+    this.#subscribeCache = {};
+  }
 
-    /**
-     * @private
-     */
-    TelemetryAPI.prototype.findRequestProvider = function (domainObject) {
-        const args = Array.prototype.slice.apply(arguments);
-        function supportsDomainObject(provider) {
-            return provider.supportsRequest.apply(provider, args);
-        }
+  abortAllRequests() {
+    this.requestAbortControllers.forEach((controller) => controller.abort());
+    this.requestAbortControllers.clear();
+  }
 
-        return this.requestProviders.filter(supportsDomainObject)[0];
-    };
+  /**
+   * Return Custom String Formatter
+   *
+   * @param {Object} valueMetadata valueMetadata for given telemetry object
+   * @param {string} format custom formatter string (eg: %.4f, &lts etc.)
+   * @returns {CustomStringFormatter}
+   */
+  customStringFormatter(valueMetadata, format) {
+    return new CustomStringFormatter(this.openmct, valueMetadata, format);
+  }
 
-    /**
-     * @private
-     */
-    TelemetryAPI.prototype.findMetadataProvider = function (domainObject) {
-        return this.metadataProviders.filter(function (p) {
-            return p.supportsMetadata(domainObject);
-        })[0];
-    };
+  /**
+   * Return true if the given domainObject is a telemetry object.  A telemetry
+   * object is any object which has telemetry metadata-- regardless of whether
+   * the telemetry object has an available telemetry provider.
+   *
+   * @param {module:openmct.DomainObject} domainObject
+   * @returns {boolean} true if the object is a telemetry object.
+   */
+  isTelemetryObject(domainObject) {
+    return Boolean(this.#findMetadataProvider(domainObject));
+  }
 
-    /**
-     * @private
-     */
-    TelemetryAPI.prototype.findLimitEvaluator = function (domainObject) {
-        return this.limitProviders.filter(function (p) {
-            return p.supportsLimits(domainObject);
-        })[0];
-    };
+  /**
+   * Check if this provider can supply telemetry data associated with
+   * this domain object.
+   *
+   * @method canProvideTelemetry
+   * @param {module:openmct.DomainObject} domainObject the object for
+   *        which telemetry would be provided
+   * @returns {boolean} true if telemetry can be provided
+   * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
+   */
+  canProvideTelemetry(domainObject) {
+    return (
+      Boolean(this.findSubscriptionProvider(domainObject)) ||
+      Boolean(this.findRequestProvider(domainObject))
+    );
+  }
 
-    /**
-     * @private
-     */
-    TelemetryAPI.prototype.standardizeRequestOptions = function (options) {
-        if (!Object.prototype.hasOwnProperty.call(options, 'start')) {
-            options.start = this.openmct.time.bounds().start;
-        }
+  /**
+   * Register a telemetry provider with the telemetry service. This
+   * allows you to connect alternative telemetry sources.
+   * @method addProvider
+   * @memberof module:openmct.TelemetryAPI#
+   * @param {module:openmct.TelemetryAPI~TelemetryProvider} provider the new
+   *        telemetry provider
+   */
+  addProvider(provider) {
+    if (provider.supportsRequest) {
+      this.requestProviders.unshift(provider);
+    }
 
-        if (!Object.prototype.hasOwnProperty.call(options, 'end')) {
-            options.end = this.openmct.time.bounds().end;
-        }
+    if (provider.supportsSubscribe) {
+      this.subscriptionProviders.unshift(provider);
+    }
 
-        if (!Object.prototype.hasOwnProperty.call(options, 'domain')) {
-            options.domain = this.openmct.time.timeSystem().key;
-        }
-    };
+    if (provider.supportsMetadata) {
+      this.metadataProviders.unshift(provider);
+    }
 
-    /**
-     * Request historical telemetry for a domain object.
-     * The `options` argument allows you to specify filters
-     * (start, end, etc.), sort order, and strategies for retrieving
-     * telemetry (aggregation, latest available, etc.).
-     *
-     * @method request
-     * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
-     * @param {module:openmct.DomainObject} domainObject the object
-     *        which has associated telemetry
-     * @param {module:openmct.TelemetryAPI~TelemetryRequest} options
-     *        options for this historical request
-     * @returns {Promise.<object[]>} a promise for an array of
-     *          telemetry data
-     */
-    TelemetryAPI.prototype.request = function (domainObject) {
-        if (arguments.length === 1) {
-            arguments.length = 2;
-            arguments[1] = {};
-        }
+    if (provider.supportsLimits) {
+      this.limitProviders.unshift(provider);
+    }
 
-        this.standardizeRequestOptions(arguments[1]);
-        const provider = this.findRequestProvider.apply(this, arguments);
-        if (!provider) {
-            return Promise.reject('No provider found');
-        }
+    if (provider.supportsStaleness) {
+      this.stalenessProviders.unshift(provider);
+    }
+  }
 
-        return provider.request.apply(provider, arguments).catch((rejected) => {
-            this.openmct.notifications.error('Error requesting telemetry data, see console for details');
-            console.error(rejected);
+  /**
+   * Returns a telemetry subscription provider that supports
+   * a given domain object and options.
+   */
+  findSubscriptionProvider() {
+    const args = Array.prototype.slice.apply(arguments);
+    function supportsDomainObject(provider) {
+      return provider.supportsSubscribe.apply(provider, args);
+    }
 
-            return Promise.reject(rejected);
-        });
-    };
+    return this.subscriptionProviders.find(supportsDomainObject);
+  }
 
-    /**
-     * Subscribe to realtime telemetry for a specific domain object.
-     * The callback will be called whenever data is received from a
-     * realtime provider.
-     *
-     * @method subscribe
-     * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
-     * @param {module:openmct.DomainObject} domainObject the object
-     *        which has associated telemetry
-     * @param {Function} callback the callback to invoke with new data, as
-     *        it becomes available
-     * @returns {Function} a function which may be called to terminate
-     *          the subscription
-     */
-    TelemetryAPI.prototype.subscribe = function (domainObject, callback, options) {
-        const provider = this.findSubscriptionProvider(domainObject);
-
-        if (!this.subscribeCache) {
-            this.subscribeCache = {};
-        }
+  /**
+   * Returns a telemetry request provider that supports
+   * a given domain object and options.
+   */
+  findRequestProvider() {
+    const args = Array.prototype.slice.apply(arguments);
+    function supportsDomainObject(provider) {
+      return provider.supportsRequest.apply(provider, args);
+    }
 
-        const keyString = objectUtils.makeKeyString(domainObject.identifier);
-        let subscriber = this.subscribeCache[keyString];
-
-        if (!subscriber) {
-            subscriber = this.subscribeCache[keyString] = {
-                callbacks: [callback]
-            };
-            if (provider) {
-                subscriber.unsubscribe = provider
-                    .subscribe(domainObject, function (value) {
-                        subscriber.callbacks.forEach(function (cb) {
-                            cb(value);
-                        });
-                    }, options);
-            } else {
-                subscriber.unsubscribe = function () {};
-            }
-        } else {
-            subscriber.callbacks.push(callback);
-        }
+    return this.requestProviders.find(supportsDomainObject);
+  }
 
-        return function unsubscribe() {
-            subscriber.callbacks = subscriber.callbacks.filter(function (cb) {
-                return cb !== callback;
-            });
-            if (subscriber.callbacks.length === 0) {
-                subscriber.unsubscribe();
-                delete this.subscribeCache[keyString];
-            }
-        }.bind(this);
-    };
+  /**
+   * @private
+   */
+  #findMetadataProvider(domainObject) {
+    return this.metadataProviders.find((provider) => {
+      return provider.supportsMetadata(domainObject);
+    });
+  }
 
-    /**
-     * Get telemetry metadata for a given domain object.  Returns a telemetry
-     * metadata manager which provides methods for interrogating telemetry
-     * metadata.
-     *
-     * @returns {TelemetryMetadataManager}
-     */
-    TelemetryAPI.prototype.getMetadata = function (domainObject) {
-        if (!this.metadataCache.has(domainObject)) {
-            const metadataProvider = this.findMetadataProvider(domainObject);
-            if (!metadataProvider) {
-                return;
-            }
-
-            const metadata = metadataProvider.getMetadata(domainObject);
-
-            this.metadataCache.set(
-                domainObject,
-                new TelemetryMetadataManager(metadata)
-            );
-        }
+  /**
+   * @private
+   */
+  #findLimitEvaluator(domainObject) {
+    return this.limitProviders.find((provider) => {
+      return provider.supportsLimits(domainObject);
+    });
+  }
+
+  /**
+   * @param {TelemetryRequestOptions} options options for the telemetry request
+   * @returns {TelemetryRequestOptions} the options, with defaults filled in
+   */
+  standardizeRequestOptions(options = {}) {
+    if (!Object.hasOwn(options, 'start')) {
+      const bounds = options.timeContext?.getBounds();
+      if (bounds?.start) {
+        options.start = options.timeContext.getBounds().start;
+      } else {
+        options.start = this.openmct.time.getBounds().start;
+      }
+    }
+
+    if (!Object.hasOwn(options, 'end')) {
+      const bounds = options.timeContext?.getBounds();
+      if (bounds?.end) {
+        options.end = options.timeContext.getBounds().end;
+      } else {
+        options.end = this.openmct.time.getBounds().end;
+      }
+    }
+
+    if (!Object.hasOwn(options, 'domain')) {
+      options.domain = this.openmct.time.getTimeSystem().key;
+    }
+
+    return options;
+  }
 
-        return this.metadataCache.get(domainObject);
+  /**
+   * Register a request interceptor that transforms a request via module:openmct.TelemetryAPI.request
+   * The request will be modified when it is received and will be returned in it's modified state
+   * The request will be transformed only if the interceptor is applicable to that domain object as defined by the RequestInterceptorDef
+   *
+   * @param {module:openmct.RequestInterceptorDef} requestInterceptorDef the request interceptor definition to add
+   * @method addRequestInterceptor
+   * @memberof module:openmct.TelemetryRequestInterceptorRegistry#
+   */
+  addRequestInterceptor(requestInterceptorDef) {
+    this.requestInterceptorRegistry.addInterceptor(requestInterceptorDef);
+  }
+
+  /**
+   * Retrieve the request interceptors for a given domain object.
+   * @private
+   */
+  #getInterceptorsForRequest(identifier, request) {
+    return this.requestInterceptorRegistry.getInterceptors(identifier, request);
+  }
+
+  /**
+   * Invoke interceptors if applicable for a given domain object.
+   */
+  async applyRequestInterceptors(domainObject, request) {
+    const interceptors = this.#getInterceptorsForRequest(domainObject.identifier, request);
+
+    if (interceptors.length === 0) {
+      return request;
+    }
+
+    let modifiedRequest = { ...request };
+
+    for (let interceptor of interceptors) {
+      modifiedRequest = await interceptor.invoke(modifiedRequest);
+    }
+
+    return modifiedRequest;
+  }
+
+  /**
+   * Get or set greedy LAD. For strategy "latest" telemetry in
+   * realtime mode the start bound will be ignored if true and
+   * there is no new data to replace the existing data.
+   * defaults to true
+   *
+   * To turn off greedy LAD:
+   * openmct.telemetry.greedyLAD(false);
+   *
+   * @method greedyLAD
+   * @returns {boolean} if greedyLAD is active or not
+   * @memberof module:openmct.TelemetryAPI#
+   */
+  greedyLAD(isGreedy) {
+    if (arguments.length > 0) {
+      if (isGreedy !== true && isGreedy !== false) {
+        throw new Error('Error setting greedyLAD. Greedy LAD only accepts true or false values');
+      }
+
+      this.#isGreedyLAD = isGreedy;
+    }
+
+    return this.#isGreedyLAD;
+  }
+
+  /**
+   * Request telemetry collection for a domain object.
+   * The `options` argument allows you to specify filters
+   * (start, end, etc.), sort order, and strategies for retrieving
+   * telemetry (aggregation, latest available, etc.).
+   *
+   * @method requestCollection
+   * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
+   * @param {module:openmct.DomainObject} domainObject the object
+   *        which has associated telemetry
+   * @param {TelemetryRequestOptions} options
+   *        options for this telemetry collection request
+   * @returns {TelemetryCollection} a TelemetryCollection instance
+   */
+  requestCollection(domainObject, options = {}) {
+    return new TelemetryCollection(this.openmct, domainObject, options);
+  }
+
+  /**
+   * Request historical telemetry for a domain object.
+   * The `options` argument allows you to specify filters
+   * (start, end, etc.), sort order, time context, and strategies for retrieving
+   * telemetry (aggregation, latest available, etc.).
+   *
+   * @method request
+   * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
+   * @param {module:openmct.DomainObject} domainObject the object
+   *        which has associated telemetry
+   * @param {TelemetryRequestOptions} options
+   *        options for this historical request
+   * @returns {Promise.<object[]>} a promise for an array of
+   *          telemetry data
+   */
+  async request(domainObject) {
+    if (this.noRequestProviderForAllObjects || domainObject.type === 'unknown') {
+      return [];
+    }
+
+    if (arguments.length === 1) {
+      arguments.length = 2;
+      arguments[1] = {};
+    }
+
+    const abortController = new AbortController();
+    arguments[1].signal = abortController.signal;
+    this.requestAbortControllers.add(abortController);
+
+    this.standardizeRequestOptions(arguments[1]);
+
+    const provider = this.findRequestProvider.apply(this, arguments);
+    if (!provider) {
+      this.requestAbortControllers.delete(abortController);
+
+      return this.#handleMissingRequestProvider(domainObject);
+    }
+
+    arguments[1] = await this.applyRequestInterceptors(domainObject, arguments[1]);
+    try {
+      const telemetry = await provider.request(...arguments);
+
+      return telemetry;
+    } catch (error) {
+      if (error.name !== 'AbortError') {
+        this.openmct.notifications.error(
+          'Error requesting telemetry data, see console for details'
+        );
+        console.error(error);
+      }
+
+      throw new Error(error);
+    } finally {
+      this.requestAbortControllers.delete(abortController);
+    }
+  }
+
+  /**
+   * Subscribe to realtime telemetry for a specific domain object.
+   * The callback will be called whenever data is received from a
+   * realtime provider.
+   *
+   * @method subscribe
+   * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
+   * @param {module:openmct.DomainObject} domainObject the object
+   *        which has associated telemetry
+   * @param {TelemetrySubscriptionOptions} options configuration items for subscription
+   * @param {Function} callback the callback to invoke with new data, as
+   *        it becomes available
+   * @returns {Function} a function which may be called to terminate
+   *          the subscription
+   */
+  subscribe(domainObject, callback, options = { strategy: SUBSCRIBE_STRATEGY.LATEST }) {
+    const requestedStrategy = options.strategy || SUBSCRIBE_STRATEGY.LATEST;
+
+    if (domainObject.type === 'unknown') {
+      return () => {};
+    }
+
+    const provider = this.findSubscriptionProvider(domainObject, options);
+    const supportsBatching =
+      Boolean(provider?.supportsBatching) && provider?.supportsBatching(domainObject, options);
+
+    if (!this.#subscribeCache) {
+      this.#subscribeCache = {};
+    }
+
+    const keyString = makeKeyString(domainObject.identifier);
+    const supportedStrategy = supportsBatching ? requestedStrategy : SUBSCRIBE_STRATEGY.LATEST;
+    // Override the requested strategy with the strategy supported by the provider
+    const optionsWithSupportedStrategy = {
+      ...options,
+      strategy: supportedStrategy
     };
+    // If batching is supported, we need to cache a subscription for each strategy -
+    // latest and batched.
+    const cacheKey = `${keyString}:${supportedStrategy}`;
+    let subscriber = this.#subscribeCache[cacheKey];
+
+    if (!subscriber) {
+      subscriber = this.#subscribeCache[cacheKey] = {
+        latestCallbacks: [],
+        batchCallbacks: []
+      };
+      if (provider) {
+        subscriber.unsubscribe = provider.subscribe(
+          domainObject,
+          invokeCallbackWithRequestedStrategy,
+          optionsWithSupportedStrategy
+        );
+      } else {
+        subscriber.unsubscribe = function () {};
+      }
+    }
+
+    if (requestedStrategy === SUBSCRIBE_STRATEGY.BATCH) {
+      subscriber.batchCallbacks.push(callback);
+    } else {
+      subscriber.latestCallbacks.push(callback);
+    }
+
+    // Guarantees that view receive telemetry in the expected form
+    function invokeCallbackWithRequestedStrategy(data) {
+      invokeCallbacksWithArray(data, subscriber.batchCallbacks);
+      invokeCallbacksWithSingleValue(data, subscriber.latestCallbacks);
+    }
+
+    function invokeCallbacksWithArray(data, batchCallbacks) {
+      //
+      if (data === undefined || data === null || data.length === 0) {
+        throw new Error(
+          'Attempt to invoke telemetry subscription callback with no telemetry datum'
+        );
+      }
+
+      if (!Array.isArray(data)) {
+        data = [data];
+      }
 
-    /**
-     * Return an array of valueMetadatas that are common to all supplied
-     * telemetry objects and match the requested hints.
-     *
-     */
-    TelemetryAPI.prototype.commonValuesForHints = function (metadatas, hints) {
-        const options = metadatas.map(function (metadata) {
-            const values = metadata.valuesForHints(hints);
-
-            return _.keyBy(values, 'key');
-        }).reduce(function (a, b) {
-            const results = {};
-            Object.keys(a).forEach(function (key) {
-                if (Object.prototype.hasOwnProperty.call(b, key)) {
-                    results[key] = a[key];
-                }
+      batchCallbacks.forEach((cb) => {
+        cb(data);
+      });
+    }
+
+    function invokeCallbacksWithSingleValue(data, latestCallbacks) {
+      if (Array.isArray(data)) {
+        data = data[data.length - 1];
+      }
+
+      if (data === undefined || data === null) {
+        throw new Error(
+          'Attempt to invoke telemetry subscription callback with no telemetry datum'
+        );
+      }
+
+      latestCallbacks.forEach((cb) => {
+        cb(data);
+      });
+    }
+
+    return function unsubscribe() {
+      subscriber.latestCallbacks = subscriber.latestCallbacks.filter(function (cb) {
+        return cb !== callback;
+      });
+      subscriber.batchCallbacks = subscriber.batchCallbacks.filter(function (cb) {
+        return cb !== callback;
+      });
+
+      if (subscriber.latestCallbacks.length === 0 && subscriber.batchCallbacks.length === 0) {
+        subscriber.unsubscribe();
+        delete this.#subscribeCache[cacheKey];
+      }
+    }.bind(this);
+  }
+
+  /**
+   * Subscribe to staleness updates for a specific domain object.
+   * The callback will be called whenever staleness changes.
+   *
+   * @method subscribeToStaleness
+   * @memberof module:openmct.TelemetryAPI~StalenessProvider#
+   * @param {module:openmct.DomainObject} domainObject the object
+   *          to watch for staleness updates
+   * @param {Function} callback the callback to invoke with staleness data,
+   *  as it is received: ex.
+   *  {
+   *      isStale: <Boolean>,
+   *      timestamp: <timestamp>
+   *  }
+   * @returns {Function} a function which may be called to terminate
+   *          the subscription to staleness updates
+   */
+  subscribeToStaleness(domainObject, callback) {
+    const provider = this.#findStalenessProvider(domainObject);
+
+    if (!this.stalenessSubscriberCache) {
+      this.stalenessSubscriberCache = {};
+    }
+
+    const keyString = makeKeyString(domainObject.identifier);
+    let stalenessSubscriber = this.stalenessSubscriberCache[keyString];
+
+    if (!stalenessSubscriber) {
+      stalenessSubscriber = this.stalenessSubscriberCache[keyString] = {
+        callbacks: [callback]
+      };
+      if (provider) {
+        stalenessSubscriber.unsubscribe = provider.subscribeToStaleness(
+          domainObject,
+          (stalenessResponse) => {
+            stalenessSubscriber.callbacks.forEach((cb) => {
+              cb(stalenessResponse);
             });
+          }
+        );
+      } else {
+        stalenessSubscriber.unsubscribe = () => {};
+      }
+    } else {
+      stalenessSubscriber.callbacks.push(callback);
+    }
 
-            return results;
-        });
-        const sortKeys = hints.map(function (h) {
-            return 'hints.' + h;
+    return function unsubscribe() {
+      stalenessSubscriber.callbacks = stalenessSubscriber.callbacks.filter((cb) => {
+        return cb !== callback;
+      });
+      if (stalenessSubscriber.callbacks.length === 0) {
+        stalenessSubscriber.unsubscribe();
+        delete this.stalenessSubscriberCache[keyString];
+      }
+    }.bind(this);
+  }
+
+  /**
+   * Subscribe to run-time changes in configured telemetry limits for a specific domain object.
+   * The callback will be called whenever data is received from a
+   * limit provider.
+   *
+   * @method subscribeToLimits
+   * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
+   * @param {module:openmct.DomainObject} domainObject the object
+   *        which has associated limits
+   * @param {Function} callback the callback to invoke with new data, as
+   *        it becomes available
+   * @returns {Function} a function which may be called to terminate
+   *          the subscription
+   */
+  subscribeToLimits(domainObject, callback) {
+    if (domainObject.type === 'unknown') {
+      return () => {};
+    }
+
+    const provider = this.#findLimitEvaluator(domainObject);
+
+    if (!this.limitsSubscribeCache) {
+      this.limitsSubscribeCache = {};
+    }
+
+    const keyString = makeKeyString(domainObject.identifier);
+    let subscriber = this.limitsSubscribeCache[keyString];
+
+    if (!subscriber) {
+      subscriber = this.limitsSubscribeCache[keyString] = {
+        callbacks: [callback]
+      };
+      if (provider && provider.subscribeToLimits) {
+        subscriber.unsubscribe = provider.subscribeToLimits(domainObject, function (value) {
+          subscriber.callbacks.forEach(function (cb) {
+            cb(value);
+          });
         });
+      } else {
+        subscriber.unsubscribe = function () {};
+      }
+    } else {
+      subscriber.callbacks.push(callback);
+    }
 
-        return _.sortBy(options, sortKeys);
-    };
+    return function unsubscribe() {
+      subscriber.callbacks = subscriber.callbacks.filter(function (cb) {
+        return cb !== callback;
+      });
+      if (subscriber.callbacks.length === 0) {
+        subscriber.unsubscribe();
+        delete this.limitsSubscribeCache[keyString];
+      }
+    }.bind(this);
+  }
 
-    /**
-     * @private
-     */
-    TelemetryAPI.prototype.getFormatService = function () {
-        if (!this.formatService) {
-            this.formatService = this.openmct.$injector.get('formatService');
-        }
+  /**
+   * Request telemetry staleness for a domain object.
+   *
+   * @method isStale
+   * @memberof module:openmct.TelemetryAPI~StalenessProvider#
+   * @param {module:openmct.DomainObject} domainObject the object
+   *        which has associated telemetry staleness
+   * @returns {Promise.<StalenessResponseObject>} a promise for a StalenessResponseObject
+   *        or undefined if no provider exists
+   */
+  async isStale(domainObject) {
+    const provider = this.#findStalenessProvider(domainObject);
 
-        return this.formatService;
-    };
+    if (!provider) {
+      return;
+    }
 
-    /**
-     * Get a value formatter for a given valueMetadata.
-     *
-     * @returns {TelemetryValueFormatter}
-     */
-    TelemetryAPI.prototype.getValueFormatter = function (valueMetadata) {
-        if (!this.valueFormatterCache.has(valueMetadata)) {
-            this.valueFormatterCache.set(
-                valueMetadata,
-                new TelemetryValueFormatter(valueMetadata, this.getFormatService())
-            );
-        }
+    const abortController = new AbortController();
+    const options = { signal: abortController.signal };
+    this.requestAbortControllers.add(abortController);
 
-        return this.valueFormatterCache.get(valueMetadata);
-    };
+    try {
+      const staleness = await provider.isStale(domainObject, options);
 
-    /**
-     * Get a value formatter for a given key.
-     * @param {string} key
-     *
-     * @returns {Format}
-     */
-    TelemetryAPI.prototype.getFormatter = function (key) {
-        const formatMap = this.getFormatService().formatMap;
+      return staleness;
+    } finally {
+      this.requestAbortControllers.delete(abortController);
+    }
+  }
 
-        return formatMap[key];
-    };
+  /**
+   * @private
+   */
+  #findStalenessProvider(domainObject) {
+    return this.stalenessProviders.find((provider) => {
+      return provider.supportsStaleness(domainObject);
+    });
+  }
 
-    /**
-     * Get a format map of all value formatters for a given piece of telemetry
-     * metadata.
-     *
-     * @returns {Object<String, {TelemetryValueFormatter}>}
-     */
-    TelemetryAPI.prototype.getFormatMap = function (metadata) {
-        if (!this.formatMapCache.has(metadata)) {
-            const formatMap = metadata.values().reduce(function (map, valueMetadata) {
-                map[valueMetadata.key] = this.getValueFormatter(valueMetadata);
-
-                return map;
-            }.bind(this), {});
-            this.formatMapCache.set(metadata, formatMap);
-        }
+  /**
+   * Get telemetry metadata for a given domain object.  Returns a telemetry
+   * metadata manager which provides methods for interrogating telemetry
+   * metadata.
+   *
+   * @returns {TelemetryMetadataManager}
+   */
+  getMetadata(domainObject) {
+    if (!this.metadataCache.has(domainObject)) {
+      const metadataProvider = this.#findMetadataProvider(domainObject);
+      if (!metadataProvider) {
+        return;
+      }
 
-        return this.formatMapCache.get(metadata);
-    };
+      const metadata = metadataProvider.getMetadata(domainObject);
 
-    /**
-     * Register a new telemetry data formatter.
-     * @param {Format} format the
-     */
-    TelemetryAPI.prototype.addFormat = function (format) {
-        this.openmct.legacyExtension('formats', {
-            key: format.key,
-            implementation: function () {
-                return format;
-            }
-        });
-    };
+      this.metadataCache.set(domainObject, new TelemetryMetadataManager(metadata));
+    }
 
-    /**
-     * Get a limit evaluator for this domain object.
-     * Limit Evaluators help you evaluate limit and alarm status of individual
-     * telemetry datums for display purposes without having to interact directly
-     * with the Limit API.
-     *
-     * This method is optional.
-     * If a provider does not implement this method, it is presumed
-     * that no limits are defined for this domain object's telemetry.
-     *
-     * @param {module:openmct.DomainObject} domainObject the domain
-     *        object for which to evaluate limits
-     * @returns {module:openmct.TelemetryAPI~LimitEvaluator}
-     * @method limitEvaluator
-     * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
-     */
-    TelemetryAPI.prototype.limitEvaluator = function (domainObject) {
-        return this.getLimitEvaluator(domainObject);
-    };
+    return this.metadataCache.get(domainObject);
+  }
 
-    /**
-     * Get a limits for this domain object.
-     * Limits help you display limits and alarms of
-     * telemetry for display purposes without having to interact directly
-     * with the Limit API.
-     *
-     * This method is optional.
-     * If a provider does not implement this method, it is presumed
-     * that no limits are defined for this domain object's telemetry.
-     *
-     * @param {module:openmct.DomainObject} domainObject the domain
-     *        object for which to get limits
-     * @returns {module:openmct.TelemetryAPI~LimitEvaluator}
-     * @method limits
-     * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
-     */
-    TelemetryAPI.prototype.limitDefinition = function (domainObject) {
-        return this.getLimits(domainObject);
-    };
+  /**
+   * Get a value formatter for a given valueMetadata.
+   *
+   * @returns {TelemetryValueFormatter}
+   */
+  getValueFormatter(valueMetadata) {
+    if (!this.valueFormatterCache.has(valueMetadata)) {
+      this.valueFormatterCache.set(
+        valueMetadata,
+        new TelemetryValueFormatter(valueMetadata, this.formatters)
+      );
+    }
 
-    /**
-     * Get a limit evaluator for this domain object.
-     * Limit Evaluators help you evaluate limit and alarm status of individual
-     * telemetry datums for display purposes without having to interact directly
-     * with the Limit API.
-     *
-     * This method is optional.
-     * If a provider does not implement this method, it is presumed
-     * that no limits are defined for this domain object's telemetry.
-     *
-     * @param {module:openmct.DomainObject} domainObject the domain
-     *        object for which to evaluate limits
-     * @returns {module:openmct.TelemetryAPI~LimitEvaluator}
-     * @method limitEvaluator
-     * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
-     */
-    TelemetryAPI.prototype.getLimitEvaluator = function (domainObject) {
-        const provider = this.findLimitEvaluator(domainObject);
-        if (!provider) {
-            return {
-                evaluate: function () {}
-            };
-        }
+    return this.valueFormatterCache.get(valueMetadata);
+  }
 
-        return provider.getLimitEvaluator(domainObject);
-    };
+  /**
+   * Get a value formatter for a given key.
+   * @param {string} key
+   *
+   * @returns {Format}
+   */
+  getFormatter(key) {
+    return this.formatters.get(key);
+  }
+
+  /**
+   * Get a format map of all value formatters for a given piece of telemetry
+   * metadata.
+   *
+   * @returns {Object<String, {TelemetryValueFormatter}>}
+   */
+  getFormatMap(metadata) {
+    if (!metadata) {
+      return {};
+    }
 
-    /**
-     * Get a limit definitions for this domain object.
-     * Limit Definitions help you indicate limits and alarms of
-     * telemetry for display purposes without having to interact directly
-     * with the Limit API.
-     *
-     * This method is optional.
-     * If a provider does not implement this method, it is presumed
-     * that no limits are defined for this domain object's telemetry.
-     *
-     * @param {module:openmct.DomainObject} domainObject the domain
-     *        object for which to display limits
-     * @returns {module:openmct.TelemetryAPI~LimitEvaluator}
-     * @method limits returns a limits object of
-     * type {
-     *          level1: {
-     *              low: { key1: value1, key2: value2, color: <supportedColor> },
-     *              high: { key1: value1, key2: value2, color: <supportedColor> }
-     *          },
-     *          level2: {
-     *              low: { key1: value1, key2: value2 },
-     *              high: { key1: value1, key2: value2 }
-     *          }
-     *       }
-     *  supported colors are purple, red, orange, yellow and cyan
-     * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
-     */
-    TelemetryAPI.prototype.getLimits = function (domainObject) {
-        const provider = this.findLimitEvaluator(domainObject);
-        if (!provider || !provider.getLimits) {
-            return {
-                limits: function () {
-                    return Promise.resolve(undefined);
-                }
-            };
+    if (!this.formatMapCache.has(metadata)) {
+      const formatMap = metadata.values().reduce(
+        function (map, valueMetadata) {
+          map[valueMetadata.key] = this.getValueFormatter(valueMetadata);
+
+          return map;
+        }.bind(this),
+        {}
+      );
+      this.formatMapCache.set(metadata, formatMap);
+    }
+
+    return this.formatMapCache.get(metadata);
+  }
+
+  /**
+   * Error Handling: Missing Request provider
+   *
+   * @returns Promise
+   */
+  #handleMissingRequestProvider(domainObject) {
+    this.noRequestProviderForAllObjects = this.requestProviders.every((requestProvider) => {
+      const supportsRequest = requestProvider.supportsRequest.apply(requestProvider, arguments);
+      const hasRequestProvider =
+        Object.prototype.hasOwnProperty.call(requestProvider, 'request') &&
+        typeof requestProvider.request === 'function';
+
+      return supportsRequest && hasRequestProvider;
+    });
+
+    let message = '';
+    let detailMessage = '';
+    if (this.noRequestProviderForAllObjects) {
+      message = 'Missing request providers, see console for details';
+      detailMessage = 'Missing request provider for all request providers';
+    } else {
+      message = 'Missing request provider, see console for details';
+      const { name, identifier } = domainObject;
+      detailMessage = `Missing request provider for domainObject, name: ${name}, identifier: ${JSON.stringify(
+        identifier
+      )}`;
+    }
+
+    this.openmct.notifications.error(message);
+    console.warn(detailMessage);
+
+    return Promise.resolve([]);
+  }
+
+  /**
+   * Register a new telemetry data formatter.
+   * @param {Format} format the
+   */
+  addFormat(format) {
+    this.formatters.set(format.key, format);
+  }
+
+  /**
+   * Get a limit evaluator for this domain object.
+   * Limit Evaluators help you evaluate limit and alarm status of individual
+   * telemetry datums for display purposes without having to interact directly
+   * with the Limit API.
+   *
+   * This method is optional.
+   * If a provider does not implement this method, it is presumed
+   * that no limits are defined for this domain object's telemetry.
+   *
+   * @param {module:openmct.DomainObject} domainObject the domain
+   *        object for which to evaluate limits
+   * @returns {module:openmct.TelemetryAPI~LimitEvaluator}
+   * @method limitEvaluator
+   * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
+   */
+  limitEvaluator(domainObject) {
+    return this.getLimitEvaluator(domainObject);
+  }
+
+  /**
+   * Get a limits for this domain object.
+   * Limits help you display limits and alarms of
+   * telemetry for display purposes without having to interact directly
+   * with the Limit API.
+   *
+   * This method is optional.
+   * If a provider does not implement this method, it is presumed
+   * that no limits are defined for this domain object's telemetry.
+   *
+   * @param {module:openmct.DomainObject} domainObject the domain
+   *        object for which to get limits
+   * @returns {LimitsResponseObject}
+   * @method limits
+   * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
+   */
+  limitDefinition(domainObject) {
+    return this.getLimits(domainObject);
+  }
+
+  /**
+   * Get a limit evaluator for this domain object.
+   * Limit Evaluators help you evaluate limit and alarm status of individual
+   * telemetry datums for display purposes without having to interact directly
+   * with the Limit API.
+   *
+   * This method is optional.
+   * If a provider does not implement this method, it is presumed
+   * that no limits are defined for this domain object's telemetry.
+   *
+   * @param {module:openmct.DomainObject} domainObject the domain
+   *        object for which to evaluate limits
+   * @returns {module:openmct.TelemetryAPI~LimitEvaluator}
+   * @method limitEvaluator
+   * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
+   */
+  getLimitEvaluator(domainObject) {
+    const provider = this.#findLimitEvaluator(domainObject);
+    if (!provider) {
+      return {
+        evaluate: function () {}
+      };
+    }
+
+    return provider.getLimitEvaluator(domainObject);
+  }
+
+  /**
+   * Get a limit definitions for this domain object.
+   * Limit Definitions help you indicate limits and alarms of
+   * telemetry for display purposes without having to interact directly
+   * with the Limit API.
+   *
+   * This method is optional.
+   * If a provider does not implement this method, it is presumed
+   * that no limits are defined for this domain object's telemetry.
+   *
+   * @param {module:openmct.DomainObject} domainObject the domain
+   *        object for which to display limits
+   * @returns {LimitsResponseObject}
+   * @method limits returns a limits object of type {LimitsResponseObject}
+   *  supported colors are purple, red, orange, yellow and cyan
+   * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
+   */
+  getLimits(domainObject) {
+    const provider = this.#findLimitEvaluator(domainObject);
+
+    if (!provider || !provider.getLimits) {
+      return {
+        limits: function () {
+          return Promise.resolve(undefined);
         }
+      };
+    }
 
-        return provider.getLimits(domainObject);
-    };
+    const abortController = new AbortController();
+    const options = { signal: abortController.signal };
+    this.requestAbortControllers.add(abortController);
+
+    try {
+      return provider.getLimits(domainObject, options);
+    } catch (error) {
+      if (error.name !== 'AbortError') {
+        this.openmct.notifications.error(
+          'Error requesting telemetry data, see console for details'
+        );
+      }
+
+      throw new Error(error);
+    } finally {
+      this.requestAbortControllers.delete(abortController);
+    }
+  }
+}
+
+/**
+ * A LimitEvaluator may be used to detect when telemetry values
+ * have exceeded nominal conditions.
+ *
+ * @interface LimitEvaluator
+ * @memberof module:openmct.TelemetryAPI~
+ */
+
+/**
+ * Check for any limit violations associated with a telemetry datum.
+ * @method evaluate
+ * @param {*} datum the telemetry datum to evaluate
+ * @param {TelemetryProperty} the property to check for limit violations
+ * @memberof module:openmct.TelemetryAPI~LimitEvaluator
+ * @returns {LimitViolation} metadata about
+ *          the limit violation, or undefined if a value is within limits
+ */
+
+/**
+ * A violation of limits defined for a telemetry property.
+ * @typedef LimitViolation
+ * @memberof {module:openmct.TelemetryAPI~}
+ * @property {string} cssClass the class (or space-separated classes) to
+ *           apply to display elements for values which violate this limit
+ * @property {string} name the human-readable name for the limit violation
+ * @property {number} low a lower limit for violation
+ * @property {number} high a higher limit violation
+ */
+
+/**
+ * @typedef {object} LimitsResponseObject
+ * @memberof {module:openmct.TelemetryAPI~}
+ * @property {LimitDefinition} limitLevel the level name and it's limit definition
+ * @example {
+ *  [limitLevel]: {
+ *    low: {
+ *      color: lowColor,
+ *      value: lowValue
+ *    },
+ *    high: {
+ *      color: highColor,
+ *      value: highValue
+ *    }
+ *  }
+ * }
+ */
+
+/**
+ * Limit defined for a telemetry property.
+ * @typedef LimitDefinition
+ * @memberof {module:openmct.TelemetryAPI~}
+ * @property {LimitDefinitionValue} low a lower limit
+ * @property {LimitDefinitionValue} high a higher limit
+ */
+
+/**
+ * Limit definition for a Limit of a telemetry property.
+ * @typedef LimitDefinitionValue
+ * @memberof {module:openmct.TelemetryAPI~}
+ * @property {string} color color to represent this limit
+ * @property {Number} value the limit value
+ */
+
+/**
+ * A TelemetryFormatter converts telemetry values for purposes of
+ * display as text.
+ *
+ * @interface TelemetryFormatter
+ * @memberof module:openmct.TelemetryAPI~
+ */
+
+/**
+ * Retrieve the 'key' from the datum and format it accordingly to
+ * telemetry metadata in domain object.
+ *
+ * @method format
+ * @memberof module:openmct.TelemetryAPI~TelemetryFormatter#
+ */
+
+/**
+ * Describes a property which would be found in a datum of telemetry
+ * associated with a particular domain object.
+ *
+ * @typedef TelemetryProperty
+ * @memberof module:openmct.TelemetryAPI~
+ * @property {string} key the name of the property in the datum which
+ *           contains this telemetry value
+ * @property {string} name the human-readable name for this property
+ * @property {string} [units] the units associated with this property
+ * @property {boolean} [temporal] true if this property is a timestamp, or
+ *           may be otherwise used to order telemetry in a time-like
+ *           fashion; default is false
+ * @property {boolean} [numeric] true if the values for this property
+ *           can be interpreted plainly as numbers; default is true
+ * @property {boolean} [enumerated] true if this property may have only
+ *           certain specific values; default is false
+ * @property {string} [values] for enumerated states, an ordered list
+ *           of possible values
+ */
 
-    return TelemetryAPI;
-});
+/**
+ * Describes and bounds requests for telemetry data.
+ *
+ * @typedef TelemetryRequest
+ * @memberof module:openmct.TelemetryAPI~
+ * @property {string} sort the key of the property to sort by. This may
+ *           be prefixed with a "+" or a "-" sign to sort in ascending
+ *           or descending order respectively. If no prefix is present,
+ *           ascending order will be used.
+ * @property {*} start the lower bound for values of the sorting property
+ * @property {*} end the upper bound for values of the sorting property
+ * @property {string[]} strategies symbolic identifiers for strategies
+ *           (such as `minmax`) which may be recognized by providers;
+ *           these will be tried in order until an appropriate provider
+ *           is found
+ */
+
+/**
+ * Provides telemetry data. To connect to new data sources, new
+ * TelemetryProvider implementations should be
+ * [registered]{@link module:openmct.TelemetryAPI#addProvider}.
+ *
+ * @interface TelemetryProvider
+ * @memberof module:openmct.TelemetryAPI~
+ */
+
+/**
+ * Provides telemetry staleness data. To subscribe to telemetry stalenes,
+ * new StalenessProvider implementations should be
+ * [registered]{@link module:openmct.TelemetryAPI#addProvider}.
+ *
+ * @interface StalenessProvider
+ * @property {function} supportsStaleness receieves a domainObject and
+ *           returns a boolean to indicate it will provide staleness
+ * @property {function} subscribeToStaleness receieves a domainObject to
+ *           be subscribed to and a callback to invoke with a StalenessResponseObject
+ * @property {function} isStale an asynchronous method called with a domainObject
+ *           and an options object which currently has an abort signal, ex.
+ *           { signal: <AbortController.signal> }
+ *           this method should return a current StalenessResponseObject
+ * @memberof module:openmct.TelemetryAPI~
+ */
+
+/**
+ * @typedef {object} StalenessResponseObject
+ * @property {Boolean} isStale boolean representing the staleness state
+ * @property {Number} timestamp Unix timestamp in milliseconds
+ */
+
+/**
+ * An interface for retrieving telemetry data associated with a domain
+ * object.
+ *
+ * @interface TelemetryAPI
+ * @augments module:openmct.TelemetryAPI~TelemetryProvider
+ * @memberof module:openmct
+ */
diff --git a/src/api/telemetry/TelemetryAPISpec.js b/src/api/telemetry/TelemetryAPISpec.js
index 09d2fe35911..5cf221de516 100644
--- a/src/api/telemetry/TelemetryAPISpec.js
+++ b/src/api/telemetry/TelemetryAPISpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,545 +19,733 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+
+import TelemetryAPI from './TelemetryAPI.js';
+import TelemetryCollection from './TelemetryCollection.js';
+
+describe('Telemetry API', () => {
+  let openmct;
+  let telemetryAPI;
+
+  beforeEach(() => {
+    openmct = {
+      time: jasmine.createSpyObj('timeAPI', ['timeSystem', 'getTimeSystem', 'bounds', 'getBounds']),
+      types: jasmine.createSpyObj('typeRegistry', ['get'])
+    };
+
+    openmct.time.timeSystem.and.returnValue({ key: 'system' });
+    openmct.time.getTimeSystem.and.returnValue({ key: 'system' });
+    openmct.time.bounds.and.returnValue({
+      start: 0,
+      end: 1
+    });
+    openmct.time.getBounds.and.returnValue({
+      start: 0,
+      end: 1
+    });
+    telemetryAPI = new TelemetryAPI(openmct);
+  });
+
+  describe('telemetry providers', () => {
+    let telemetryProvider;
+    let domainObject;
+
+    beforeEach(() => {
+      telemetryProvider = jasmine.createSpyObj('telemetryProvider', [
+        'supportsSubscribe',
+        'subscribe',
+        'supportsRequest',
+        'request'
+      ]);
+      domainObject = {
+        identifier: {
+          key: 'a',
+          namespace: 'b'
+        },
+        type: 'sample-type'
+      };
+
+      openmct.notifications = {
+        error: () => {
+          console.log('sample error notification');
+        }
+      };
+    });
+
+    it('provides consistent results without providers', async () => {
+      const unsubscribe = telemetryAPI.subscribe(domainObject);
+
+      expect(unsubscribe).toEqual(jasmine.any(Function));
+
+      const data = await telemetryAPI.request(domainObject);
+      expect(data).toEqual([]);
+    });
+
+    it('skips providers that do not match', async () => {
+      telemetryProvider.supportsSubscribe.and.returnValue(false);
+      telemetryProvider.supportsRequest.and.returnValue(false);
+      telemetryProvider.request.and.returnValue(Promise.resolve([]));
+      telemetryAPI.addProvider(telemetryProvider);
+
+      const callback = jasmine.createSpy('callback');
+      const unsubscribe = telemetryAPI.subscribe(domainObject, callback);
+      expect(telemetryProvider.supportsSubscribe).toHaveBeenCalledWith(domainObject, {
+        strategy: 'latest'
+      });
+      expect(telemetryProvider.subscribe).not.toHaveBeenCalled();
+      expect(unsubscribe).toEqual(jasmine.any(Function));
+
+      await telemetryAPI.request(domainObject);
+      expect(telemetryProvider.supportsRequest).toHaveBeenCalledWith(
+        domainObject,
+        jasmine.any(Object)
+      );
+      expect(telemetryProvider.request).not.toHaveBeenCalled();
+    });
+
+    it('sends subscribe calls to matching providers', () => {
+      const unsubFunc = jasmine.createSpy('unsubscribe');
+      telemetryProvider.subscribe.and.returnValue(unsubFunc);
+      telemetryProvider.supportsSubscribe.and.returnValue(true);
+      telemetryAPI.addProvider(telemetryProvider);
+
+      const callback = jasmine.createSpy('callback');
+      const unsubscribe = telemetryAPI.subscribe(domainObject, callback);
+      expect(telemetryProvider.supportsSubscribe.calls.count()).toBe(1);
+      expect(telemetryProvider.supportsSubscribe).toHaveBeenCalledWith(domainObject, {
+        strategy: 'latest'
+      });
+      expect(telemetryProvider.subscribe.calls.count()).toBe(1);
+      expect(telemetryProvider.subscribe).toHaveBeenCalledWith(
+        domainObject,
+        jasmine.any(Function),
+        {
+          strategy: 'latest'
+        }
+      );
+
+      const notify = telemetryProvider.subscribe.calls.mostRecent().args[1];
+      notify('someValue');
+      expect(callback).toHaveBeenCalledWith('someValue');
+
+      expect(unsubscribe).toEqual(jasmine.any(Function));
+      expect(unsubFunc).not.toHaveBeenCalled();
+      unsubscribe();
+      expect(unsubFunc).toHaveBeenCalled();
+
+      notify('otherValue');
+      expect(callback).not.toHaveBeenCalledWith('otherValue');
+    });
+
+    it('subscribes once per object', () => {
+      const unsubFunc = jasmine.createSpy('unsubscribe');
+      telemetryProvider.subscribe.and.returnValue(unsubFunc);
+      telemetryProvider.supportsSubscribe.and.returnValue(true);
+      telemetryAPI.addProvider(telemetryProvider);
+
+      const callback = jasmine.createSpy('callback');
+      const callbacktwo = jasmine.createSpy('callback two');
+      const unsubscribe = telemetryAPI.subscribe(domainObject, callback);
+      const unsubscribetwo = telemetryAPI.subscribe(domainObject, callbacktwo);
+
+      expect(telemetryProvider.subscribe.calls.count()).toBe(1);
+
+      const notify = telemetryProvider.subscribe.calls.mostRecent().args[1];
+      notify('someValue');
+      expect(callback).toHaveBeenCalledWith('someValue');
+      expect(callbacktwo).toHaveBeenCalledWith('someValue');
+
+      unsubscribe();
+      expect(unsubFunc).not.toHaveBeenCalled();
+      notify('otherValue');
+      expect(callback).not.toHaveBeenCalledWith('otherValue');
+      expect(callbacktwo).toHaveBeenCalledWith('otherValue');
+
+      unsubscribetwo();
+      expect(unsubFunc).toHaveBeenCalled();
+      notify('anotherValue');
+      expect(callback).not.toHaveBeenCalledWith('anotherValue');
+      expect(callbacktwo).not.toHaveBeenCalledWith('anotherValue');
+    });
+
+    it('only deletes subscription cache when there are no more subscribers', () => {
+      const unsubFunc = jasmine.createSpy('unsubscribe');
+      telemetryProvider.subscribe.and.returnValue(unsubFunc);
+      telemetryProvider.supportsSubscribe.and.returnValue(true);
+      telemetryAPI.addProvider(telemetryProvider);
+
+      const callback = jasmine.createSpy('callback');
+      const callbacktwo = jasmine.createSpy('callback two');
+      const callbackThree = jasmine.createSpy('callback three');
+      const unsubscribe = telemetryAPI.subscribe(domainObject, callback);
+      const unsubscribeTwo = telemetryAPI.subscribe(domainObject, callbacktwo);
+
+      expect(telemetryProvider.subscribe.calls.count()).toBe(1);
+      unsubscribe();
+      const unsubscribeThree = telemetryAPI.subscribe(domainObject, callbackThree);
+      // Regression test for where subscription cache was deleted on each unsubscribe, resulting in
+      // superfluous additional subscriptions. If the subscription cache is being deleted on each unsubscribe,
+      // then a subsequent subscribe will result in a new subscription at the provider.
+      expect(telemetryProvider.subscribe.calls.count()).toBe(1);
+      unsubscribeTwo();
+      unsubscribeThree();
+    });
+
+    it('does subscribe/unsubscribe', () => {
+      const unsubFunc = jasmine.createSpy('unsubscribe');
+      telemetryProvider.subscribe.and.returnValue(unsubFunc);
+      telemetryProvider.supportsSubscribe.and.returnValue(true);
+      telemetryAPI.addProvider(telemetryProvider);
+
+      const callback = jasmine.createSpy('callback');
+      let unsubscribe = telemetryAPI.subscribe(domainObject, callback);
+      expect(telemetryProvider.subscribe.calls.count()).toBe(1);
+      unsubscribe();
+
+      unsubscribe = telemetryAPI.subscribe(domainObject, callback);
+      expect(telemetryProvider.subscribe.calls.count()).toBe(2);
+      unsubscribe();
+    });
+
+    it('subscribes for different object', () => {
+      const unsubFuncs = [];
+      const notifiers = [];
+      telemetryProvider.supportsSubscribe.and.returnValue(true);
+      telemetryProvider.subscribe.and.callFake(function (obj, cb) {
+        const unsubFunc = jasmine.createSpy('unsubscribe ' + unsubFuncs.length);
+        unsubFuncs.push(unsubFunc);
+        notifiers.push(cb);
+
+        return unsubFunc;
+      });
+      telemetryAPI.addProvider(telemetryProvider);
+
+      const otherDomainObject = JSON.parse(JSON.stringify(domainObject));
+      otherDomainObject.identifier.namespace = 'other';
+
+      const callback = jasmine.createSpy('callback');
+      const callbacktwo = jasmine.createSpy('callback two');
+
+      const unsubscribe = telemetryAPI.subscribe(domainObject, callback);
+      const unsubscribetwo = telemetryAPI.subscribe(otherDomainObject, callbacktwo);
+
+      expect(telemetryProvider.subscribe.calls.count()).toBe(2);
+
+      notifiers[0]('someValue');
+      expect(callback).toHaveBeenCalledWith('someValue');
+      expect(callbacktwo).not.toHaveBeenCalledWith('someValue');
+
+      notifiers[1]('anotherValue');
+      expect(callback).not.toHaveBeenCalledWith('anotherValue');
+      expect(callbacktwo).toHaveBeenCalledWith('anotherValue');
+
+      unsubscribe();
+      expect(unsubFuncs[0]).toHaveBeenCalled();
+      expect(unsubFuncs[1]).not.toHaveBeenCalled();
+
+      unsubscribetwo();
+      expect(unsubFuncs[1]).toHaveBeenCalled();
+    });
+
+    it('sends requests to matching providers', async () => {
+      const telemPromise = Promise.resolve([]);
+      telemetryProvider.supportsRequest.and.returnValue(true);
+      telemetryProvider.request.and.returnValue(telemPromise);
+      telemetryAPI.addProvider(telemetryProvider);
+
+      await telemetryAPI.request(domainObject);
+      expect(telemetryProvider.supportsRequest).toHaveBeenCalledWith(
+        domainObject,
+        jasmine.any(Object)
+      );
+      expect(telemetryProvider.request).toHaveBeenCalledWith(domainObject, jasmine.any(Object));
+    });
+
+    it('generates default request options', async () => {
+      telemetryProvider.supportsRequest.and.returnValue(true);
+      telemetryProvider.request.and.returnValue(Promise.resolve([]));
+      telemetryAPI.addProvider(telemetryProvider);
+
+      await telemetryAPI.request(domainObject);
+      const { signal } = new AbortController();
+      expect(telemetryProvider.supportsRequest).toHaveBeenCalledWith(jasmine.any(Object), {
+        signal,
+        start: 0,
+        end: 1,
+        domain: 'system'
+      });
+
+      expect(telemetryProvider.request).toHaveBeenCalledWith(jasmine.any(Object), {
+        signal,
+        start: 0,
+        end: 1,
+        domain: 'system'
+      });
+
+      telemetryProvider.supportsRequest.calls.reset();
+      telemetryProvider.request.calls.reset();
+
+      await telemetryAPI.request(domainObject, {});
+      expect(telemetryProvider.supportsRequest).toHaveBeenCalledWith(jasmine.any(Object), {
+        signal,
+        start: 0,
+        end: 1,
+        domain: 'system'
+      });
+
+      expect(telemetryProvider.request).toHaveBeenCalledWith(jasmine.any(Object), {
+        signal,
+        start: 0,
+        end: 1,
+        domain: 'system'
+      });
+    });
+
+    it('do not overwrite existing request options', async () => {
+      telemetryProvider.supportsRequest.and.returnValue(true);
+      telemetryProvider.request.and.returnValue(Promise.resolve([]));
+      telemetryAPI.addProvider(telemetryProvider);
+
+      await telemetryAPI.request(domainObject, {
+        start: 20,
+        end: 30,
+        domain: 'someDomain'
+      });
+      const { signal } = new AbortController();
+      expect(telemetryProvider.supportsRequest).toHaveBeenCalledWith(jasmine.any(Object), {
+        start: 20,
+        end: 30,
+        domain: 'someDomain',
+        signal
+      });
+
+      expect(telemetryProvider.request).toHaveBeenCalledWith(jasmine.any(Object), {
+        start: 20,
+        end: 30,
+        domain: 'someDomain',
+        signal
+      });
+    });
+    describe('telemetry batching support', () => {
+      let callbacks;
+      let unsubFunc;
+
+      beforeEach(() => {
+        callbacks = [];
+        unsubFunc = jasmine.createSpy('unsubscribe');
+        telemetryProvider.supportsBatching = jasmine.createSpy('supportsBatching');
+        telemetryProvider.supportsBatching.and.returnValue(true);
+        telemetryProvider.supportsSubscribe.and.returnValue(true);
+
+        telemetryProvider.subscribe.and.callFake(function (obj, cb, options) {
+          callbacks.push(cb);
+
+          return unsubFunc;
+        });
+
+        telemetryAPI.addProvider(telemetryProvider);
+      });
+
+      it('caches subscriptions for batched and latest telemetry subscriptions', () => {
+        const latestCallback1 = jasmine.createSpy('latestCallback1');
+        const unsubscribeFromLatest1 = telemetryAPI.subscribe(domainObject, latestCallback1, {
+          strategy: 'latest'
+        });
+        const latestCallback2 = jasmine.createSpy('latestCallback2');
+        const unsubscribeFromLatest2 = telemetryAPI.subscribe(domainObject, latestCallback2, {
+          strategy: 'latest'
+        });
 
-define([
-    './TelemetryAPI'
-], function (
-    TelemetryAPI
-) {
-    xdescribe('Telemetry API', function () {
-        let openmct;
-        let telemetryAPI;
-        let mockTypeService;
-
-        beforeEach(function () {
-            openmct = {
-                time: jasmine.createSpyObj('timeAPI', [
-                    'timeSystem',
-                    'bounds'
-                ]),
-                $injector: jasmine.createSpyObj('injector', [
-                    'get'
-                ])
-            };
-            mockTypeService = jasmine.createSpyObj('typeService', [
-                'getType'
-            ]);
-            openmct.$injector.get.and.returnValue(mockTypeService);
-            openmct.time.timeSystem.and.returnValue({key: 'system'});
-            openmct.time.bounds.and.returnValue({
-                start: 0,
-                end: 1
-            });
-            telemetryAPI = new TelemetryAPI(openmct);
+        //Expect a single cached subscription for latest telemetry
+        expect(telemetryProvider.subscribe.calls.count()).toBe(1);
 
+        const batchedCallback1 = jasmine.createSpy('batchedCallback1');
+        const unsubscribeFromBatched1 = telemetryAPI.subscribe(domainObject, batchedCallback1, {
+          strategy: 'batch'
         });
 
-        describe('telemetry providers', function () {
-            let telemetryProvider;
-            let domainObject;
-
-            beforeEach(function () {
-                telemetryProvider = jasmine.createSpyObj('telemetryProvider', [
-                    'supportsSubscribe',
-                    'subscribe',
-                    'supportsRequest',
-                    'request'
-                ]);
-                domainObject = {
-                    identifier: {
-                        key: 'a',
-                        namespace: 'b'
-                    },
-                    type: 'sample-type'
-                };
-            });
-
-            it('provides consistent results without providers', function () {
-                const unsubscribe = telemetryAPI.subscribe(domainObject);
-                expect(unsubscribe).toEqual(jasmine.any(Function));
-
-                const response = telemetryAPI.request(domainObject);
-                expect(response).toEqual(jasmine.any(Promise));
-            });
-
-            it('skips providers that do not match', function () {
-                telemetryProvider.supportsSubscribe.and.returnValue(false);
-                telemetryProvider.supportsRequest.and.returnValue(false);
-                telemetryAPI.addProvider(telemetryProvider);
-
-                const callback = jasmine.createSpy('callback');
-                const unsubscribe = telemetryAPI.subscribe(domainObject, callback);
-                expect(telemetryProvider.supportsSubscribe)
-                    .toHaveBeenCalledWith(domainObject);
-                expect(telemetryProvider.subscribe).not.toHaveBeenCalled();
-                expect(unsubscribe).toEqual(jasmine.any(Function));
-
-                const response = telemetryAPI.request(domainObject);
-                expect(telemetryProvider.supportsRequest)
-                    .toHaveBeenCalledWith(domainObject, jasmine.any(Object));
-                expect(telemetryProvider.request).not.toHaveBeenCalled();
-                expect(response).toEqual(jasmine.any(Promise));
-            });
-
-            it('sends subscribe calls to matching providers', function () {
-                const unsubFunc = jasmine.createSpy('unsubscribe');
-                telemetryProvider.subscribe.and.returnValue(unsubFunc);
-                telemetryProvider.supportsSubscribe.and.returnValue(true);
-                telemetryAPI.addProvider(telemetryProvider);
-
-                const callback = jasmine.createSpy('callback');
-                const unsubscribe = telemetryAPI.subscribe(domainObject, callback);
-                expect(telemetryProvider.supportsSubscribe.calls.count()).toBe(1);
-                expect(telemetryProvider.supportsSubscribe)
-                    .toHaveBeenCalledWith(domainObject);
-                expect(telemetryProvider.subscribe.calls.count()).toBe(1);
-                expect(telemetryProvider.subscribe)
-                    .toHaveBeenCalledWith(domainObject, jasmine.any(Function));
-
-                const notify = telemetryProvider.subscribe.calls.mostRecent().args[1];
-                notify('someValue');
-                expect(callback).toHaveBeenCalledWith('someValue');
-
-                expect(unsubscribe).toEqual(jasmine.any(Function));
-                expect(unsubFunc).not.toHaveBeenCalled();
-                unsubscribe();
-                expect(unsubFunc).toHaveBeenCalled();
-
-                notify('otherValue');
-                expect(callback).not.toHaveBeenCalledWith('otherValue');
-            });
-
-            it('subscribes once per object', function () {
-                const unsubFunc = jasmine.createSpy('unsubscribe');
-                telemetryProvider.subscribe.and.returnValue(unsubFunc);
-                telemetryProvider.supportsSubscribe.and.returnValue(true);
-                telemetryAPI.addProvider(telemetryProvider);
-
-                const callback = jasmine.createSpy('callback');
-                const callbacktwo = jasmine.createSpy('callback two');
-                const unsubscribe = telemetryAPI.subscribe(domainObject, callback);
-                const unsubscribetwo = telemetryAPI.subscribe(domainObject, callbacktwo);
-
-                expect(telemetryProvider.subscribe.calls.count()).toBe(1);
-
-                const notify = telemetryProvider.subscribe.calls.mostRecent().args[1];
-                notify('someValue');
-                expect(callback).toHaveBeenCalledWith('someValue');
-                expect(callbacktwo).toHaveBeenCalledWith('someValue');
-
-                unsubscribe();
-                expect(unsubFunc).not.toHaveBeenCalled();
-                notify('otherValue');
-                expect(callback).not.toHaveBeenCalledWith('otherValue');
-                expect(callbacktwo).toHaveBeenCalledWith('otherValue');
-
-                unsubscribetwo();
-                expect(unsubFunc).toHaveBeenCalled();
-                notify('anotherValue');
-                expect(callback).not.toHaveBeenCalledWith('anotherValue');
-                expect(callbacktwo).not.toHaveBeenCalledWith('anotherValue');
-            });
-
-            it('only deletes subscription cache when there are no more subscribers', function () {
-                const unsubFunc = jasmine.createSpy('unsubscribe');
-                telemetryProvider.subscribe.and.returnValue(unsubFunc);
-                telemetryProvider.supportsSubscribe.and.returnValue(true);
-                telemetryAPI.addProvider(telemetryProvider);
-
-                const callback = jasmine.createSpy('callback');
-                const callbacktwo = jasmine.createSpy('callback two');
-                const callbackThree = jasmine.createSpy('callback three');
-                const unsubscribe = telemetryAPI.subscribe(domainObject, callback);
-                const unsubscribeTwo = telemetryAPI.subscribe(domainObject, callbacktwo);
-
-                expect(telemetryProvider.subscribe.calls.count()).toBe(1);
-                unsubscribe();
-                const unsubscribeThree = telemetryAPI.subscribe(domainObject, callbackThree);
-                // Regression test for where subscription cache was deleted on each unsubscribe, resulting in
-                // superfluous additional subscriptions. If the subscription cache is being deleted on each unsubscribe,
-                // then a subsequent subscribe will result in a new subscription at the provider.
-                expect(telemetryProvider.subscribe.calls.count()).toBe(1);
-                unsubscribeTwo();
-                unsubscribeThree();
-            });
-
-            it('does subscribe/unsubscribe', function () {
-                const unsubFunc = jasmine.createSpy('unsubscribe');
-                telemetryProvider.subscribe.and.returnValue(unsubFunc);
-                telemetryProvider.supportsSubscribe.and.returnValue(true);
-                telemetryAPI.addProvider(telemetryProvider);
-
-                const callback = jasmine.createSpy('callback');
-                let unsubscribe = telemetryAPI.subscribe(domainObject, callback);
-                expect(telemetryProvider.subscribe.calls.count()).toBe(1);
-                unsubscribe();
-
-                unsubscribe = telemetryAPI.subscribe(domainObject, callback);
-                expect(telemetryProvider.subscribe.calls.count()).toBe(2);
-                unsubscribe();
-            });
-
-            it('subscribes for different object', function () {
-                const unsubFuncs = [];
-                const notifiers = [];
-                telemetryProvider.supportsSubscribe.and.returnValue(true);
-                telemetryProvider.subscribe.and.callFake(function (obj, cb) {
-                    const unsubFunc = jasmine.createSpy('unsubscribe ' + unsubFuncs.length);
-                    unsubFuncs.push(unsubFunc);
-                    notifiers.push(cb);
-
-                    return unsubFunc;
-                });
-                telemetryAPI.addProvider(telemetryProvider);
-
-                const otherDomainObject = JSON.parse(JSON.stringify(domainObject));
-                otherDomainObject.identifier.namespace = 'other';
-
-                const callback = jasmine.createSpy('callback');
-                const callbacktwo = jasmine.createSpy('callback two');
-
-                const unsubscribe = telemetryAPI.subscribe(domainObject, callback);
-                const unsubscribetwo = telemetryAPI.subscribe(otherDomainObject, callbacktwo);
-
-                expect(telemetryProvider.subscribe.calls.count()).toBe(2);
-
-                notifiers[0]('someValue');
-                expect(callback).toHaveBeenCalledWith('someValue');
-                expect(callbacktwo).not.toHaveBeenCalledWith('someValue');
-
-                notifiers[1]('anotherValue');
-                expect(callback).not.toHaveBeenCalledWith('anotherValue');
-                expect(callbacktwo).toHaveBeenCalledWith('anotherValue');
-
-                unsubscribe();
-                expect(unsubFuncs[0]).toHaveBeenCalled();
-                expect(unsubFuncs[1]).not.toHaveBeenCalled();
-
-                unsubscribetwo();
-                expect(unsubFuncs[1]).toHaveBeenCalled();
-            });
-
-            it('sends requests to matching providers', function () {
-                const telemPromise = Promise.resolve([]);
-                telemetryProvider.supportsRequest.and.returnValue(true);
-                telemetryProvider.request.and.returnValue(telemPromise);
-                telemetryAPI.addProvider(telemetryProvider);
-
-                const result = telemetryAPI.request(domainObject);
-                expect(result).toBe(telemPromise);
-                expect(telemetryProvider.supportsRequest).toHaveBeenCalledWith(
-                    domainObject,
-                    jasmine.any(Object)
-                );
-                expect(telemetryProvider.request).toHaveBeenCalledWith(
-                    domainObject,
-                    jasmine.any(Object)
-                );
-            });
-
-            it('generates default request options', function () {
-                telemetryProvider.supportsRequest.and.returnValue(true);
-                telemetryAPI.addProvider(telemetryProvider);
-
-                telemetryAPI.request(domainObject);
-                expect(telemetryProvider.supportsRequest).toHaveBeenCalledWith(
-                    jasmine.any(Object),
-                    {
-                        start: 0,
-                        end: 1,
-                        domain: 'system'
-                    }
-                );
-
-                expect(telemetryProvider.request).toHaveBeenCalledWith(
-                    jasmine.any(Object),
-                    {
-                        start: 0,
-                        end: 1,
-                        domain: 'system'
-                    }
-                );
-
-                telemetryProvider.supportsRequest.calls.reset();
-                telemetryProvider.request.calls.reset();
-
-                telemetryAPI.request(domainObject, {});
-                expect(telemetryProvider.supportsRequest).toHaveBeenCalledWith(
-                    jasmine.any(Object),
-                    {
-                        start: 0,
-                        end: 1,
-                        domain: 'system'
-                    }
-                );
-
-                expect(telemetryProvider.request).toHaveBeenCalledWith(
-                    jasmine.any(Object),
-                    {
-                        start: 0,
-                        end: 1,
-                        domain: 'system'
-                    }
-                );
-            });
-
-            it('does not overwrite existing request options', function () {
-                telemetryProvider.supportsRequest.and.returnValue(true);
-                telemetryAPI.addProvider(telemetryProvider);
-
-                telemetryAPI.request(domainObject, {
-                    start: 20,
-                    end: 30,
-                    domain: 'someDomain'
-                });
-
-                expect(telemetryProvider.supportsRequest).toHaveBeenCalledWith(
-                    jasmine.any(Object),
-                    {
-                        start: 20,
-                        end: 30,
-                        domain: 'someDomain'
-                    }
-                );
-
-                expect(telemetryProvider.request).toHaveBeenCalledWith(
-                    jasmine.any(Object),
-                    {
-                        start: 20,
-                        end: 30,
-                        domain: 'someDomain'
-                    }
-                );
-            });
+        const batchedCallback2 = jasmine.createSpy('batchedCallback2');
+        const unsubscribeFromBatched2 = telemetryAPI.subscribe(domainObject, batchedCallback2, {
+          strategy: 'batch'
         });
-        describe('metadata', function () {
-            let mockMetadata = {};
-            let mockObjectType = {
-                typeDef: {}
-            };
-            beforeEach(function () {
-                telemetryAPI.addProvider({
-                    key: 'mockMetadataProvider',
-                    supportsMetadata() {
-                        return true;
-                    },
-                    getMetadata() {
-                        return mockMetadata;
-                    }
-                });
-                mockTypeService.getType.and.returnValue(mockObjectType);
-            });
-            it('respects explicit priority', function () {
-                mockMetadata.values = [
-                    {
-                        key: "name",
-                        name: "Name",
-                        hints: {
-                            priority: 2
-                        }
-
-                    },
-                    {
-                        key: "timestamp",
-                        name: "Timestamp",
-                        hints: {
-                            priority: 1
-                        }
-                    },
-                    {
-                        key: "sin",
-                        name: "Sine",
-                        hints: {
-                            priority: 4
-                        }
-                    },
-                    {
-                        key: "cos",
-                        name: "Cosine",
-                        hints: {
-                            priority: 3
-                        }
-                    }
-                ];
-                let metadata = telemetryAPI.getMetadata({});
-                let values = metadata.values();
-
-                values.forEach((value, index) => {
-                    expect(value.hints.priority).toBe(index + 1);
-                });
-            });
-            it('if no explicit priority, defaults to order defined', function () {
-                mockMetadata.values = [
-                    {
-                        key: "name",
-                        name: "Name"
-
-                    },
-                    {
-                        key: "timestamp",
-                        name: "Timestamp"
-                    },
-                    {
-                        key: "sin",
-                        name: "Sine"
-                    },
-                    {
-                        key: "cos",
-                        name: "Cosine"
-                    }
-                ];
-                let metadata = telemetryAPI.getMetadata({});
-                let values = metadata.values();
-
-                values.forEach((value, index) => {
-                    expect(value.key).toBe(mockMetadata.values[index].key);
-                });
-            });
-            it('respects domain priority', function () {
-                mockMetadata.values = [
-                    {
-                        key: "name",
-                        name: "Name"
-
-                    },
-                    {
-                        key: "timestamp-utc",
-                        name: "Timestamp UTC",
-                        hints: {
-                            domain: 2
-                        }
-                    },
-                    {
-                        key: "timestamp-local",
-                        name: "Timestamp Local",
-                        hints: {
-                            domain: 1
-                        }
-                    },
-                    {
-                        key: "sin",
-                        name: "Sine",
-                        hints: {
-                            range: 2
-                        }
-                    },
-                    {
-                        key: "cos",
-                        name: "Cosine",
-                        hints: {
-                            range: 1
-                        }
-                    }
-                ];
-                let metadata = telemetryAPI.getMetadata({});
-                let values = metadata.valuesForHints(['domain']);
-
-                expect(values[0].key).toBe('timestamp-local');
-                expect(values[1].key).toBe('timestamp-utc');
-            });
-            it('respects range priority', function () {
-                mockMetadata.values = [
-                    {
-                        key: "name",
-                        name: "Name"
-
-                    },
-                    {
-                        key: "timestamp-utc",
-                        name: "Timestamp UTC",
-                        hints: {
-                            domain: 2
-                        }
-                    },
-                    {
-                        key: "timestamp-local",
-                        name: "Timestamp Local",
-                        hints: {
-                            domain: 1
-                        }
-                    },
-                    {
-                        key: "sin",
-                        name: "Sine",
-                        hints: {
-                            range: 2
-                        }
-                    },
-                    {
-                        key: "cos",
-                        name: "Cosine",
-                        hints: {
-                            range: 1
-                        }
-                    }
-                ];
-                let metadata = telemetryAPI.getMetadata({});
-                let values = metadata.valuesForHints(['range']);
-
-                expect(values[0].key).toBe('cos');
-                expect(values[1].key).toBe('sin');
-            });
-            it('respects priority and domain ordering', function () {
-                mockMetadata.values = [
-                    {
-                        key: "id",
-                        name: "ID",
-                        hints: {
-                            priority: 2
-                        }
-                    },
-                    {
-                        key: "name",
-                        name: "Name",
-                        hints: {
-                            priority: 1
-                        }
-
-                    },
-                    {
-                        key: "timestamp-utc",
-                        name: "Timestamp UTC",
-                        hints: {
-                            domain: 2,
-                            priority: 1
-                        }
-                    },
-                    {
-                        key: "timestamp-local",
-                        name: "Timestamp Local",
-                        hints: {
-                            domain: 1,
-                            priority: 2
-                        }
-                    },
-                    {
-                        key: "timestamp-pst",
-                        name: "Timestamp PST",
-                        hints: {
-                            domain: 3,
-                            priority: 2
-                        }
-                    },
-                    {
-                        key: "sin",
-                        name: "Sine"
-                    },
-                    {
-                        key: "cos",
-                        name: "Cosine"
-                    }
-                ];
-                let metadata = telemetryAPI.getMetadata({});
-                let values = metadata.valuesForHints(['priority', 'domain']);
-                [
-                    'timestamp-utc',
-                    'timestamp-local',
-                    'timestamp-pst'
-                ].forEach((key, index) => {
-                    expect(values[index].key).toBe(key);
-                });
-            });
+
+        //Expect a single cached subscription for each strategy telemetry
+        expect(telemetryProvider.subscribe.calls.count()).toBe(2);
+
+        unsubscribeFromLatest1();
+        unsubscribeFromLatest2();
+        unsubscribeFromBatched1();
+        unsubscribeFromBatched2();
+
+        expect(unsubFunc).toHaveBeenCalledTimes(2);
+      });
+      it('subscriptions with the latest strategy are always invoked with a single value', () => {
+        const latestCallback = jasmine.createSpy('latestCallback1');
+        telemetryAPI.subscribe(domainObject, latestCallback, {
+          strategy: 'latest'
+        });
+
+        const batchedValues = [1, 2, 3];
+        callbacks.forEach((cb) => {
+          cb(batchedValues);
+        });
+
+        expect(latestCallback).toHaveBeenCalledWith(3);
+
+        const singleValue = 1;
+        callbacks.forEach((cb) => {
+          cb(singleValue);
+        });
+
+        expect(latestCallback).toHaveBeenCalledWith(1);
+      });
+
+      it('subscriptions with the batch strategy are always invoked with an array', () => {
+        const batchedCallback = jasmine.createSpy('batchedCallback1');
+        const latestCallback = jasmine.createSpy('latestCallback1');
+        telemetryAPI.subscribe(domainObject, batchedCallback, {
+          strategy: 'batch'
         });
+        telemetryAPI.subscribe(domainObject, latestCallback, {
+          strategy: 'latest'
+        });
+
+        const batchedValues = [1, 2, 3];
+        callbacks.forEach((cb) => {
+          cb(batchedValues);
+        });
+
+        // Callbacks for the 'batch' strategy are always called with an array of values
+        expect(batchedCallback).toHaveBeenCalledWith(batchedValues);
+        // Callbacks for the 'latest' strategy are always called with a single value
+        expect(latestCallback).toHaveBeenCalledWith(3);
+
+        callbacks.forEach((cb) => {
+          cb(1);
+        });
+        // Callbacks for the 'batch' strategy are always called with an array of values, even if there is only one value
+        expect(batchedCallback).toHaveBeenCalledWith([1]);
+        // Callbacks for the 'latest' strategy are always called with a single value
+        expect(latestCallback).toHaveBeenCalledWith(1);
+      });
+
+      it('legacy providers are left unchanged, with a single subscription', () => {
+        delete telemetryProvider.supportsBatching;
+
+        const batchCallback = jasmine.createSpy('batchCallback');
+        telemetryAPI.subscribe(domainObject, batchCallback, {
+          strategy: 'batch'
+        });
+        expect(telemetryProvider.subscribe.calls.mostRecent().args[2].strategy).toBe('latest');
+
+        const latestCallback = jasmine.createSpy('latestCallback');
+        telemetryAPI.subscribe(domainObject, latestCallback, {
+          strategy: 'latest'
+        });
+
+        expect(telemetryProvider.subscribe.calls.mostRecent().args[2].strategy).toBe('latest');
+      });
+    });
+  });
+
+  describe('metadata', () => {
+    let mockMetadata = {};
+    let mockObjectType = {
+      definition: {}
+    };
+    beforeEach(() => {
+      telemetryAPI.addProvider({
+        key: 'mockMetadataProvider',
+        supportsMetadata() {
+          return true;
+        },
+        getMetadata() {
+          return mockMetadata;
+        }
+      });
+      openmct.types.get.and.returnValue(mockObjectType);
+    });
+
+    it('respects explicit priority', () => {
+      mockMetadata.values = [
+        {
+          key: 'name',
+          name: 'Name',
+          hints: {
+            priority: 2
+          }
+        },
+        {
+          key: 'timestamp',
+          name: 'Timestamp',
+          hints: {
+            priority: 1
+          }
+        },
+        {
+          key: 'sin',
+          name: 'Sine',
+          hints: {
+            priority: 4
+          }
+        },
+        {
+          key: 'cos',
+          name: 'Cosine',
+          hints: {
+            priority: 3
+          }
+        }
+      ];
+      let metadata = telemetryAPI.getMetadata({});
+      let values = metadata.values();
+
+      values.forEach((value, index) => {
+        expect(value.hints.priority).toBe(index + 1);
+      });
+    });
+    it('if no explicit priority, defaults to order defined', () => {
+      mockMetadata.values = [
+        {
+          key: 'name',
+          name: 'Name'
+        },
+        {
+          key: 'timestamp',
+          name: 'Timestamp'
+        },
+        {
+          key: 'sin',
+          name: 'Sine'
+        },
+        {
+          key: 'cos',
+          name: 'Cosine'
+        }
+      ];
+      let metadata = telemetryAPI.getMetadata({});
+      let values = metadata.values();
+
+      values.forEach((value, index) => {
+        expect(value.key).toBe(mockMetadata.values[index].key);
+      });
+    });
+    it('respects domain priority', () => {
+      mockMetadata.values = [
+        {
+          key: 'name',
+          name: 'Name'
+        },
+        {
+          key: 'timestamp-utc',
+          name: 'Timestamp UTC',
+          hints: {
+            domain: 2
+          }
+        },
+        {
+          key: 'timestamp-local',
+          name: 'Timestamp Local',
+          hints: {
+            domain: 1
+          }
+        },
+        {
+          key: 'sin',
+          name: 'Sine',
+          hints: {
+            range: 2
+          }
+        },
+        {
+          key: 'cos',
+          name: 'Cosine',
+          hints: {
+            range: 1
+          }
+        }
+      ];
+      let metadata = telemetryAPI.getMetadata({});
+      let values = metadata.valuesForHints(['domain']);
+
+      expect(values[0].key).toBe('timestamp-local');
+      expect(values[1].key).toBe('timestamp-utc');
+    });
+    it('respects range priority', () => {
+      mockMetadata.values = [
+        {
+          key: 'name',
+          name: 'Name'
+        },
+        {
+          key: 'timestamp-utc',
+          name: 'Timestamp UTC',
+          hints: {
+            domain: 2
+          }
+        },
+        {
+          key: 'timestamp-local',
+          name: 'Timestamp Local',
+          hints: {
+            domain: 1
+          }
+        },
+        {
+          key: 'sin',
+          name: 'Sine',
+          hints: {
+            range: 2
+          }
+        },
+        {
+          key: 'cos',
+          name: 'Cosine',
+          hints: {
+            range: 1
+          }
+        }
+      ];
+      let metadata = telemetryAPI.getMetadata({});
+      let values = metadata.valuesForHints(['range']);
+
+      expect(values[0].key).toBe('cos');
+      expect(values[1].key).toBe('sin');
+    });
+    it('respects priority and domain ordering', () => {
+      mockMetadata.values = [
+        {
+          key: 'id',
+          name: 'ID',
+          hints: {
+            priority: 2
+          }
+        },
+        {
+          key: 'name',
+          name: 'Name',
+          hints: {
+            priority: 1
+          }
+        },
+        {
+          key: 'timestamp-utc',
+          name: 'Timestamp UTC',
+          hints: {
+            domain: 2,
+            priority: 1
+          }
+        },
+        {
+          key: 'timestamp-local',
+          name: 'Timestamp Local',
+          hints: {
+            domain: 1,
+            priority: 2
+          }
+        },
+        {
+          key: 'timestamp-pst',
+          name: 'Timestamp PST',
+          hints: {
+            domain: 3,
+            priority: 2
+          }
+        },
+        {
+          key: 'sin',
+          name: 'Sine'
+        },
+        {
+          key: 'cos',
+          name: 'Cosine'
+        }
+      ];
+      let metadata = telemetryAPI.getMetadata({});
+      let values = metadata.valuesForHints(['priority', 'domain']);
+      ['timestamp-utc', 'timestamp-local', 'timestamp-pst'].forEach((key, index) => {
+        expect(values[index].key).toBe(key);
+      });
+    });
+  });
+
+  describe('telemetry collections', () => {
+    let domainObject;
+    let mockMetadata = {};
+    let mockObjectType = {
+      definition: {}
+    };
+
+    beforeEach(() => {
+      openmct.telemetry = telemetryAPI;
+      telemetryAPI.addProvider({
+        key: 'mockMetadataProvider',
+        supportsMetadata() {
+          return true;
+        },
+        getMetadata() {
+          return mockMetadata;
+        }
+      });
+      openmct.types.get.and.returnValue(mockObjectType);
+      domainObject = {
+        identifier: {
+          key: 'a',
+          namespace: 'b'
+        },
+        type: 'sample-type'
+      };
+    });
+
+    it('when requested, returns an instance of telemetry collection', () => {
+      const telemetryCollection = telemetryAPI.requestCollection(domainObject);
+
+      expect(telemetryCollection).toBeInstanceOf(TelemetryCollection);
+    });
+  });
+});
+
+describe('Telemetery', () => {
+  let openmct;
+  let telemetryProvider;
+  let telemetryAPI;
+  let watchedSignal;
+
+  beforeEach(() => {
+    openmct = createOpenMct();
+    openmct.install(openmct.plugins.MyItems());
+
+    telemetryAPI = openmct.telemetry;
+
+    telemetryProvider = {
+      request: (obj, options) => {
+        watchedSignal = options.signal;
+
+        return Promise.resolve();
+      }
+    };
+    spyOn(telemetryAPI, 'findRequestProvider').and.returnValue(telemetryProvider);
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  it('should not abort request without navigation', async () => {
+    telemetryAPI.addProvider(telemetryProvider);
+
+    await telemetryAPI.request({});
+    expect(watchedSignal.aborted).toBe(false);
+  });
+
+  it('should abort request on navigation', (done) => {
+    telemetryAPI.addProvider(telemetryProvider);
+
+    telemetryAPI.request({}).finally(() => {
+      expect(watchedSignal.aborted).toBe(true);
+      done();
     });
+    openmct.router.doPathChange('newPath', 'oldPath');
+  });
 });
diff --git a/src/api/telemetry/TelemetryCollection.js b/src/api/telemetry/TelemetryCollection.js
new file mode 100644
index 00000000000..4791a04ae00
--- /dev/null
+++ b/src/api/telemetry/TelemetryCollection.js
@@ -0,0 +1,550 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import EventEmitter from 'EventEmitter';
+import _ from 'lodash';
+
+import { TIME_CONTEXT_EVENTS } from '../time/constants.js';
+import { LOADED_ERROR, TIMESYSTEM_KEY_NOTIFICATION, TIMESYSTEM_KEY_WARNING } from './constants.js';
+
+/**
+ * @typedef {import('../objects/ObjectAPI').DomainObject} DomainObject
+ */
+
+/**
+ * @typedef {import('../time/TimeContext').TimeContext} TimeContext
+ */
+
+/**
+ * @typedef {import('./TelemetryAPI').TelemetryRequestOptions} TelemetryRequestOptions
+ */
+
+/**
+ * @typedef {import('../../../openmct').OpenMCT} OpenMCT
+ */
+
+/** Class representing a Telemetry Collection. */
+
+export default class TelemetryCollection extends EventEmitter {
+  /**
+   * Creates a Telemetry Collection
+   *
+   * @param  {OpenMCT} openmct - Open MCT
+   * @param  {DomainObject} domainObject - Domain Object to use for telemetry collection
+   * @param  {TelemetryRequestOptions} options - Any options passed in for request/subscribe
+   */
+  constructor(openmct, domainObject, options = {}) {
+    super();
+
+    this.loaded = false;
+    this.openmct = openmct;
+    this.domainObject = domainObject;
+    this.boundedTelemetry = [];
+    this.futureBuffer = [];
+    this.parseTime = undefined;
+    this.metadata = this.openmct.telemetry.getMetadata(domainObject);
+    if (!Object.hasOwn(options, 'timeContext')) {
+      options.timeContext = this.openmct.time;
+    }
+    this.options = options;
+    this.unsubscribe = undefined;
+    this.pageState = undefined;
+    this.lastBounds = undefined;
+    this.requestAbort = undefined;
+    this.isStrategyLatest = this.options.strategy === 'latest';
+    this.dataOutsideTimeBounds = false;
+    this.modeChanged = false;
+  }
+
+  /**
+   * This will start the requests for historical and realtime data,
+   * as well as setting up initial values and watchers
+   */
+  load() {
+    if (this.loaded) {
+      this._error(LOADED_ERROR);
+    }
+
+    this._setTimeSystem(this.options.timeContext.getTimeSystem());
+    this.lastBounds = this.options.timeContext.getBounds();
+    this._watchBounds();
+    this._watchTimeSystem();
+    this._watchTimeModeChange();
+
+    this._requestHistoricalTelemetry();
+    this._initiateSubscriptionTelemetry();
+
+    this.loaded = true;
+  }
+
+  /**
+   * can/should be called by the requester of the telemetry collection
+   * to remove any listeners
+   */
+  destroy() {
+    if (this.requestAbort) {
+      this.requestAbort.abort();
+    }
+
+    this._unwatchBounds();
+    this._unwatchTimeSystem();
+    this._unwatchTimeModeChange();
+    if (this.unsubscribe) {
+      this.unsubscribe();
+    }
+
+    this.removeAllListeners();
+  }
+
+  /**
+   * This will start the requests for historical and realtime data,
+   * as well as setting up initial values and watchers
+   */
+  getAll() {
+    return this.boundedTelemetry;
+  }
+
+  /**
+   * If a historical provider exists, then historical requests will be made
+   * @private
+   */
+  async _requestHistoricalTelemetry() {
+    let options = this.openmct.telemetry.standardizeRequestOptions({ ...this.options });
+    const historicalProvider = this.openmct.telemetry.findRequestProvider(
+      this.domainObject,
+      options
+    );
+
+    if (!historicalProvider) {
+      return;
+    }
+
+    let historicalData;
+
+    options.onPartialResponse = this._processNewTelemetry.bind(this);
+
+    try {
+      if (this.requestAbort) {
+        this.requestAbort.abort();
+      }
+
+      this.requestAbort = new AbortController();
+      options.signal = this.requestAbort.signal;
+      this.emit('requestStarted');
+      const modifiedOptions = await this.openmct.telemetry.applyRequestInterceptors(
+        this.domainObject,
+        options
+      );
+      historicalData = await historicalProvider.request(this.domainObject, modifiedOptions);
+    } catch (error) {
+      if (error.name !== 'AbortError') {
+        console.error('Error requesting telemetry data...');
+        this._error(error);
+      }
+    }
+
+    this.emit('requestEnded');
+    this.requestAbort = undefined;
+
+    if (!historicalData || !historicalData.length) {
+      return;
+    }
+
+    this._processNewTelemetry(historicalData);
+  }
+
+  /**
+   * This uses the built in subscription function from Telemetry API
+   * @private
+   */
+  _initiateSubscriptionTelemetry() {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+    }
+    const options = { ...this.options };
+    //We always want to receive all available values in telemetry tables.
+    options.strategy = this.openmct.telemetry.SUBSCRIBE_STRATEGY.BATCH;
+
+    this.unsubscribe = this.openmct.telemetry.subscribe(
+      this.domainObject,
+      (datum) => this._processNewTelemetry(datum),
+      options
+    );
+  }
+
+  /**
+   * Filter any new telemetry (add/page, historical, subscription) based on
+   * time bounds and dupes
+   *
+   * @param  {(Object|Object[])} telemetryData - telemetry data object or
+   * array of telemetry data objects
+   * @private
+   */
+  _processNewTelemetry(telemetryData) {
+    if (telemetryData === undefined) {
+      return;
+    }
+
+    let latestBoundedDatum = this.boundedTelemetry[this.boundedTelemetry.length - 1];
+    let data = Array.isArray(telemetryData) ? telemetryData : [telemetryData];
+    let parsedValue;
+    let beforeStartOfBounds;
+    let afterEndOfBounds;
+    let added = [];
+    let addedIndices = [];
+    let hasDataBeforeStartBound = false;
+    let size = this.options.size;
+    let enforceSize = size !== undefined && this.options.enforceSize;
+
+    // loop through, sort and dedupe
+    for (let datum of data) {
+      parsedValue = this.parseTime(datum);
+      beforeStartOfBounds = parsedValue < this.lastBounds.start;
+      afterEndOfBounds = parsedValue > this.lastBounds.end;
+
+      if (
+        !afterEndOfBounds &&
+        (!beforeStartOfBounds || (this.isStrategyLatest && this.openmct.telemetry.greedyLAD()))
+      ) {
+        let isDuplicate = false;
+        let startIndex = this._sortedIndex(datum);
+        let endIndex = undefined;
+
+        // dupe check
+        if (startIndex !== this.boundedTelemetry.length) {
+          endIndex = _.sortedLastIndexBy(this.boundedTelemetry, datum, (boundedDatum) =>
+            this.parseTime(boundedDatum)
+          );
+
+          if (endIndex > startIndex) {
+            let potentialDupes = this.boundedTelemetry.slice(startIndex, endIndex);
+            isDuplicate = potentialDupes.some(_.isEqual.bind(undefined, datum));
+          }
+        } else if (startIndex === this.boundedTelemetry.length) {
+          isDuplicate = _.isEqual(datum, this.boundedTelemetry[this.boundedTelemetry.length - 1]);
+        }
+
+        if (!isDuplicate) {
+          let index = endIndex || startIndex;
+
+          this.boundedTelemetry.splice(index, 0, datum);
+          addedIndices.push(index);
+          added.push(datum);
+
+          if (!hasDataBeforeStartBound && beforeStartOfBounds) {
+            hasDataBeforeStartBound = true;
+          }
+        }
+      } else if (afterEndOfBounds) {
+        this.futureBuffer.push(datum);
+      }
+    }
+
+    if (added.length) {
+      // if latest strategy is requested, we need to check if the value is the latest unemitted value
+      if (this.isStrategyLatest) {
+        this.boundedTelemetry = [this.boundedTelemetry[this.boundedTelemetry.length - 1]];
+
+        // if true, then this value has yet to be emitted
+        if (this.boundedTelemetry[0] !== latestBoundedDatum) {
+          if (hasDataBeforeStartBound) {
+            this._handleDataOutsideBounds();
+          } else {
+            this._handleDataInsideBounds();
+          }
+
+          this.emit('add', this.boundedTelemetry);
+        }
+      } else {
+        this.emit('add', added, addedIndices);
+
+        if (enforceSize && this.boundedTelemetry.length > size) {
+          const removeCount = this.boundedTelemetry.length - size;
+          const removed = this.boundedTelemetry.splice(0, removeCount);
+
+          this.emit('remove', removed);
+        }
+      }
+    }
+  }
+
+  /**
+   * Finds the correct insertion point for the given telemetry datum.
+   * Leverages lodash's `sortedIndexBy` function which implements a binary search.
+   * @private
+   */
+  _sortedIndex(datum) {
+    if (this.boundedTelemetry.length === 0) {
+      return 0;
+    }
+
+    let parsedValue = this.parseTime(datum);
+    let lastValue = this.parseTime(this.boundedTelemetry[this.boundedTelemetry.length - 1]);
+
+    if (parsedValue > lastValue || parsedValue === lastValue) {
+      return this.boundedTelemetry.length;
+    } else {
+      return _.sortedIndexBy(this.boundedTelemetry, datum, (boundedDatum) =>
+        this.parseTime(boundedDatum)
+      );
+    }
+  }
+
+  /**
+   * when the start time, end time, or both have been updated.
+   * data could be added OR removed here we update the current
+   * bounded telemetry
+   *
+   * @param  {TimeConductorBounds} bounds The newly updated bounds
+   * @param  {boolean} [tick] `true` if the bounds update was due to
+   * a "tick" event (ie. was an automatic update), false otherwise.
+   * @private
+   */
+  _bounds(bounds, isTick) {
+    if (this.modeChanged) {
+      this.modeChanged = false;
+      this._reset();
+      return;
+    }
+
+    let startChanged = this.lastBounds.start !== bounds.start;
+    let endChanged = this.lastBounds.end !== bounds.end;
+
+    this.lastBounds = bounds;
+
+    if (isTick) {
+      if (this.timeKey === undefined) {
+        return;
+      }
+
+      // need to check futureBuffer and need to check
+      // if anything has fallen out of bounds
+      let startIndex = 0;
+      let endIndex = 0;
+
+      let discarded = [];
+      let added = [];
+      let testDatum = {};
+
+      if (endChanged) {
+        testDatum[this.timeKey] = bounds.end;
+        // Calculate the new index of the last item in bounds
+        endIndex = _.sortedLastIndexBy(this.futureBuffer, testDatum, (datum) =>
+          this.parseTime(datum)
+        );
+        added = this.futureBuffer.splice(0, endIndex);
+      }
+
+      if (startChanged) {
+        testDatum[this.timeKey] = bounds.start;
+
+        // a little more complicated if not latest strategy
+        if (!this.isStrategyLatest) {
+          // Calculate the new index of the first item within the bounds
+          startIndex = _.sortedIndexBy(this.boundedTelemetry, testDatum, (datum) =>
+            this.parseTime(datum)
+          );
+          discarded = this.boundedTelemetry.splice(0, startIndex);
+        } else if (this.parseTime(testDatum) > this.parseTime(this.boundedTelemetry[0])) {
+          // if greedyLAD is active and there is no new data to replace, don't discard
+          const isGreedyLAD = this.openmct.telemetry.greedyLAD();
+          const shouldRemove = !isGreedyLAD || (isGreedyLAD && added.length > 0);
+
+          if (shouldRemove) {
+            discarded = this.boundedTelemetry;
+            this.boundedTelemetry = [];
+            // since it IS strategy latest, we can assume there will be at least 1 datum
+            // unless no data was returned in the first request, we need to account for that
+          } else if (this.boundedTelemetry.length === 1) {
+            this._handleDataOutsideBounds();
+          }
+        }
+      }
+
+      if (discarded.length > 0) {
+        this.emit('remove', discarded);
+      }
+
+      if (added.length > 0) {
+        if (!this.isStrategyLatest) {
+          this.boundedTelemetry = [...this.boundedTelemetry, ...added];
+        } else {
+          this._handleDataInsideBounds();
+
+          added = [added[added.length - 1]];
+          this.boundedTelemetry = added;
+        }
+
+        // Assumption is that added will be of length 1 here, so just send the last index of the boundedTelemetry in the add event
+        this.emit('add', added, [this.boundedTelemetry.length]);
+      }
+    } else {
+      // user bounds change, reset
+      this._reset();
+    }
+  }
+
+  _handleDataInsideBounds() {
+    if (this.dataOutsideTimeBounds) {
+      this.dataOutsideTimeBounds = false;
+      this.emit('dataInsideTimeBounds');
+    }
+  }
+
+  _handleDataOutsideBounds() {
+    if (!this.dataOutsideTimeBounds) {
+      this.dataOutsideTimeBounds = true;
+      this.emit('dataOutsideTimeBounds');
+    }
+  }
+
+  /**
+   * whenever the time system is updated need to update related values in
+   * the Telemetry Collection and reset the telemetry collection
+   *
+   * @param  {TimeSystem} timeSystem - the value of the currently applied
+   * Time System
+   * @private
+   */
+  _setTimeSystem(timeSystem) {
+    let domains = [];
+    let metadataValue = { format: timeSystem.key };
+
+    if (this.metadata) {
+      domains = this.metadata.valuesForHints(['domain']);
+      metadataValue = this.metadata.value(timeSystem.key) || { format: timeSystem.key };
+    }
+
+    let domain = domains.find((d) => d.key === timeSystem.key);
+
+    if (domain !== undefined) {
+      // timeKey is used to create a dummy datum used for sorting
+      this.timeKey = domain.source;
+    } else {
+      this.timeKey = undefined;
+
+      this._warn(TIMESYSTEM_KEY_WARNING);
+      this.openmct.notifications.alert(TIMESYSTEM_KEY_NOTIFICATION);
+    }
+
+    let valueFormatter = this.openmct.telemetry.getValueFormatter(metadataValue);
+
+    this.parseTime = (datum) => {
+      return valueFormatter.parse(datum);
+    };
+  }
+
+  _setTimeSystemAndFetchData(timeSystem) {
+    this._setTimeSystem(timeSystem);
+    this._reset();
+  }
+
+  _timeModeChanged() {
+    //We're need this so that when the bounds change comes in after this mode change, we can reset and request historic telemetry
+    this.modeChanged = true;
+  }
+
+  /**
+   * Reset the telemetry data of the collection, and re-request
+   * historical telemetry
+   * @private
+   *
+   * @todo handle subscriptions more granually
+   */
+  _reset() {
+    this.boundedTelemetry = [];
+    this.futureBuffer = [];
+
+    this.emit('clear');
+
+    this._requestHistoricalTelemetry();
+  }
+
+  /**
+   * adds the _bounds callback to the 'boundsChanged' timeAPI listener
+   * @private
+   */
+  _watchBounds() {
+    this.options.timeContext.on(TIME_CONTEXT_EVENTS.boundsChanged, this._bounds, this);
+  }
+
+  /**
+   * removes the _bounds callback from the 'boundsChanged' timeAPI listener
+   * @private
+   */
+  _unwatchBounds() {
+    this.options.timeContext.off(TIME_CONTEXT_EVENTS.boundsChanged, this._bounds, this);
+  }
+
+  /**
+   * adds the _timeModeChanged callback to the 'modeChanged' timeAPI listener
+   * @private
+   */
+  _watchTimeModeChange() {
+    this.options.timeContext.on(TIME_CONTEXT_EVENTS.modeChanged, this._timeModeChanged, this);
+  }
+
+  /**
+   * removes the _timeModeChanged callback from the 'modeChanged' timeAPI listener
+   * @private
+   */
+  _unwatchTimeModeChange() {
+    this.options.timeContext.off(TIME_CONTEXT_EVENTS.modeChanged, this._timeModeChanged, this);
+  }
+
+  /**
+   * adds the _setTimeSystemAndFetchData callback to the 'timeSystem' timeAPI listener
+   * @private
+   */
+  _watchTimeSystem() {
+    this.options.timeContext.on(
+      TIME_CONTEXT_EVENTS.timeSystemChanged,
+      this._setTimeSystemAndFetchData,
+      this
+    );
+  }
+
+  /**
+   * removes the _setTimeSystemAndFetchData callback from the 'timeSystem' timeAPI listener
+   * @private
+   */
+  _unwatchTimeSystem() {
+    this.options.timeContext.off(
+      TIME_CONTEXT_EVENTS.timeSystemChanged,
+      this._setTimeSystemAndFetchData,
+      this
+    );
+  }
+
+  /**
+   * will throw a new Error, for passed in message
+   * @param  {string} message Message describing the error
+   * @private
+   */
+  _error(message) {
+    throw new Error(message);
+  }
+
+  _warn(message) {
+    console.warn(message);
+  }
+}
diff --git a/src/api/telemetry/TelemetryCollectionSpec.js b/src/api/telemetry/TelemetryCollectionSpec.js
new file mode 100644
index 00000000000..95ae11d0372
--- /dev/null
+++ b/src/api/telemetry/TelemetryCollectionSpec.js
@@ -0,0 +1,99 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+
+import { TIMESYSTEM_KEY_WARNING } from './constants.js';
+
+describe('Telemetry Collection', () => {
+  let openmct;
+  let mockMetadataProvider;
+  let mockMetadata = {};
+  let domainObject;
+
+  beforeEach((done) => {
+    openmct = createOpenMct();
+    openmct.on('start', done);
+
+    domainObject = {
+      identifier: {
+        key: 'a',
+        namespace: 'b'
+      },
+      type: 'sample-type'
+    };
+
+    mockMetadataProvider = {
+      key: 'mockMetadataProvider',
+      supportsMetadata() {
+        return true;
+      },
+      getMetadata() {
+        return mockMetadata;
+      }
+    };
+
+    openmct.telemetry.addProvider(mockMetadataProvider);
+    openmct.startHeadless();
+  });
+
+  afterEach(() => {
+    return resetApplicationState();
+  });
+
+  it('Warns if telemetry metadata does not match the active timesystem', () => {
+    mockMetadata.values = [
+      {
+        key: 'foo',
+        name: 'Bar',
+        hints: {
+          domain: 1
+        }
+      }
+    ];
+
+    const telemetryCollection = openmct.telemetry.requestCollection(domainObject);
+    spyOn(telemetryCollection, '_warn');
+    telemetryCollection.load();
+
+    expect(telemetryCollection._warn).toHaveBeenCalledOnceWith(TIMESYSTEM_KEY_WARNING);
+  });
+
+  it('Does not warn if telemetry metadata matches the active timesystem', () => {
+    mockMetadata.values = [
+      {
+        key: 'utc',
+        name: 'Timestamp',
+        format: 'utc',
+        hints: {
+          domain: 1
+        }
+      }
+    ];
+
+    const telemetryCollection = openmct.telemetry.requestCollection(domainObject);
+    spyOn(telemetryCollection, '_warn');
+    telemetryCollection.load();
+
+    expect(telemetryCollection._warn).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/api/telemetry/TelemetryMetadataManager.js b/src/api/telemetry/TelemetryMetadataManager.js
index 7ff8a6dad73..6d9a7df0627 100644
--- a/src/api/telemetry/TelemetryMetadataManager.js
+++ b/src/api/telemetry/TelemetryMetadataManager.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,137 +20,141 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    'lodash'
-], function (
-    _
-) {
-
-    function applyReasonableDefaults(valueMetadata, index) {
-        valueMetadata.source = valueMetadata.source || valueMetadata.key;
-        valueMetadata.hints = valueMetadata.hints || {};
-
-        if (Object.prototype.hasOwnProperty.call(valueMetadata.hints, 'x')) {
-            console.warn(
-                'DEPRECATION WARNING: `x` hints should be replaced with '
-                + '`domain` hints moving forward.  '
-                + 'https://github.com/nasa/openmct/issues/1546'
-            );
-            if (!Object.prototype.hasOwnProperty.call(valueMetadata.hints, 'domain')) {
-                valueMetadata.hints.domain = valueMetadata.hints.x;
-            }
-
-            delete valueMetadata.hints.x;
-        }
-
-        if (Object.prototype.hasOwnProperty.call(valueMetadata.hints, 'y')) {
-            console.warn(
-                'DEPRECATION WARNING: `y` hints should be replaced with '
-                + '`range` hints moving forward.  '
-                + 'https://github.com/nasa/openmct/issues/1546'
-            );
-            if (!Object.prototype.hasOwnProperty.call(valueMetadata.hints, 'range')) {
-                valueMetadata.hints.range = valueMetadata.hints.y;
-            }
-
-            delete valueMetadata.hints.y;
-        }
-
-        if (valueMetadata.format === 'enum') {
-            if (!valueMetadata.values) {
-                valueMetadata.values = valueMetadata.enumerations.map(e => e.value);
-            }
-
-            if (!Object.prototype.hasOwnProperty.call(valueMetadata, 'max')) {
-                valueMetadata.max = Math.max(valueMetadata.values) + 1;
-            }
-
-            if (!Object.prototype.hasOwnProperty.call(valueMetadata, 'min')) {
-                valueMetadata.min = Math.min(valueMetadata.values) - 1;
-            }
-        }
-
-        if (!Object.prototype.hasOwnProperty.call(valueMetadata.hints, 'priority')) {
-            valueMetadata.hints.priority = index;
-        }
-
-        return valueMetadata;
-    }
+import _ from 'lodash';
 
-    /**
-     * Utility class for handling and inspecting telemetry metadata.  Applies
-     * reasonable defaults to simplify the task of providing metadata, while
-     * also providing methods for interrogating telemetry metadata.
-     */
-    function TelemetryMetadataManager(metadata) {
-        this.metadata = metadata;
+function applyReasonableDefaults(valueMetadata, index) {
+  valueMetadata.source = valueMetadata.source || valueMetadata.key;
+  valueMetadata.hints = valueMetadata.hints || {};
 
-        this.valueMetadatas = this.metadata.values ? this.metadata.values.map(applyReasonableDefaults) : [];
+  if (Object.prototype.hasOwnProperty.call(valueMetadata.hints, 'x')) {
+    if (!Object.prototype.hasOwnProperty.call(valueMetadata.hints, 'domain')) {
+      valueMetadata.hints.domain = valueMetadata.hints.x;
     }
 
-    /**
-     * Get value metadata for a single key.
-     */
-    TelemetryMetadataManager.prototype.value = function (key) {
-        return this.valueMetadatas.filter(function (metadata) {
-            return metadata.key === key;
-        })[0];
-    };
-
-    /**
-     * Returns all value metadatas, sorted by priority.
-     */
-    TelemetryMetadataManager.prototype.values = function () {
-        return this.valuesForHints(['priority']);
-    };
+    delete valueMetadata.hints.x;
+  }
 
-    /**
-     * Get an array of valueMetadatas that posess all hints requested.
-     * Array is sorted based on hint priority.
-     *
-     */
-    TelemetryMetadataManager.prototype.valuesForHints = function (
-        hints
-    ) {
-        function hasHint(hint) {
-            // eslint-disable-next-line no-invalid-this
-            return Object.prototype.hasOwnProperty.call(this.hints, hint);
-        }
-
-        function hasHints(metadata) {
-            return hints.every(hasHint, metadata);
-        }
-
-        const matchingMetadata = this.valueMetadatas.filter(hasHints);
-        let iteratees = hints.map(hint => {
-            return (metadata) => {
-                return metadata.hints[hint];
-            };
-        });
-
-        return _.sortBy(matchingMetadata, ...iteratees);
-    };
-
-    TelemetryMetadataManager.prototype.getFilterableValues = function () {
-        return this.valueMetadatas.filter(metadatum => metadatum.filters && metadatum.filters.length > 0);
-    };
+  if (Object.prototype.hasOwnProperty.call(valueMetadata.hints, 'y')) {
+    if (!Object.prototype.hasOwnProperty.call(valueMetadata.hints, 'range')) {
+      valueMetadata.hints.range = valueMetadata.hints.y;
+    }
 
-    TelemetryMetadataManager.prototype.getDefaultDisplayValue = function () {
-        let valueMetadata = this.valuesForHints(['range'])[0];
+    delete valueMetadata.hints.y;
+  }
 
-        if (valueMetadata === undefined) {
-            valueMetadata = this.values().filter(values => {
-                return !(values.hints.domain);
-            })[0];
-        }
+  if (valueMetadata.format === 'enum') {
+    if (!valueMetadata.values) {
+      valueMetadata.values = valueMetadata.enumerations.map((e) => e.value);
+    }
 
-        if (valueMetadata === undefined) {
-            valueMetadata = this.values()[0];
-        }
+    if (!Object.prototype.hasOwnProperty.call(valueMetadata, 'max')) {
+      valueMetadata.max = Math.max(valueMetadata.values) + 1;
+    }
 
-        return valueMetadata.key;
+    if (!Object.prototype.hasOwnProperty.call(valueMetadata, 'min')) {
+      valueMetadata.min = Math.min(valueMetadata.values) - 1;
+    }
+  }
+
+  if (!Object.prototype.hasOwnProperty.call(valueMetadata.hints, 'priority')) {
+    valueMetadata.hints.priority = index;
+  }
+
+  return valueMetadata;
+}
+
+/**
+ * Utility class for handling and inspecting telemetry metadata.  Applies
+ * reasonable defaults to simplify the task of providing metadata, while
+ * also providing methods for interrogating telemetry metadata.
+ */
+export default function TelemetryMetadataManager(metadata) {
+  this.metadata = metadata;
+
+  this.valueMetadatas = this.metadata.values
+    ? this.metadata.values.map(applyReasonableDefaults)
+    : [];
+}
+
+/**
+ * Get value metadata for a single key.
+ */
+TelemetryMetadataManager.prototype.value = function (key) {
+  return this.valueMetadatas.filter(function (metadata) {
+    return metadata.key === key;
+  })[0];
+};
+
+/**
+ * Returns all value metadatas, sorted by priority.
+ */
+TelemetryMetadataManager.prototype.values = function () {
+  return this.valuesForHints(['priority']);
+};
+
+/**
+ * Get an array of valueMetadatas that possess all hints requested.
+ * Array is sorted based on hint priority.
+ *
+ */
+TelemetryMetadataManager.prototype.valuesForHints = function (hints) {
+  function hasHint(hint) {
+    // eslint-disable-next-line no-invalid-this
+    return Object.prototype.hasOwnProperty.call(this.hints, hint);
+  }
+
+  function hasHints(metadata) {
+    return hints.every(hasHint, metadata);
+  }
+
+  const matchingMetadata = this.valueMetadatas.filter(hasHints);
+  let iteratees = hints.map((hint) => {
+    return (metadata) => {
+      return metadata.hints[hint];
     };
-
-    return TelemetryMetadataManager;
-
-});
+  });
+
+  return _.sortBy(matchingMetadata, ...iteratees);
+};
+
+/**
+ * check out of a given metadata has array values
+ */
+TelemetryMetadataManager.prototype.isArrayValue = function (metadata) {
+  const regex = /\[\]$/g;
+  if (!metadata.format && !metadata.formatString) {
+    return false;
+  }
+
+  return (metadata.format || metadata.formatString).match(regex) !== null;
+};
+
+TelemetryMetadataManager.prototype.getFilterableValues = function () {
+  return this.valueMetadatas.filter(
+    (metadatum) => metadatum.filters && metadatum.filters.length > 0
+  );
+};
+
+TelemetryMetadataManager.prototype.getUseToUpdateInPlaceValue = function () {
+  return this.valueMetadatas.find(this.isInPlaceUpdateValue);
+};
+
+TelemetryMetadataManager.prototype.isInPlaceUpdateValue = function (metadatum) {
+  return metadatum.useToUpdateInPlace === true;
+};
+
+TelemetryMetadataManager.prototype.getDefaultDisplayValue = function () {
+  let valueMetadata = this.valuesForHints(['range'])[0];
+
+  if (valueMetadata === undefined) {
+    valueMetadata = this.values().filter((values) => {
+      return !values.hints.domain;
+    })[0];
+  }
+
+  if (valueMetadata === undefined) {
+    valueMetadata = this.values()[0];
+  }
+
+  return valueMetadata;
+};
diff --git a/src/api/telemetry/TelemetryRequestInterceptor.js b/src/api/telemetry/TelemetryRequestInterceptor.js
new file mode 100644
index 00000000000..b80ea1f0afb
--- /dev/null
+++ b/src/api/telemetry/TelemetryRequestInterceptor.js
@@ -0,0 +1,67 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+export default class TelemetryRequestInterceptorRegistry {
+  /**
+   * A TelemetryRequestInterceptorRegistry maintains the definitions for different interceptors that may be invoked on telemetry
+   * requests.
+   * @interface TelemetryRequestInterceptorRegistry
+   * @memberof module:openmct
+   */
+  constructor() {
+    this.interceptors = [];
+  }
+
+  /**
+   * @interface TelemetryRequestInterceptorDef
+   * @property {function} appliesTo function that determines if this interceptor should be called for the given identifier/request
+   * @property {function} invoke function that transforms the provided request and returns the transformed request
+   * @property {function} priority the priority for this interceptor. A higher number returned has more weight than a lower number
+   * @memberof module:openmct TelemetryRequestInterceptorRegistry#
+   */
+
+  /**
+   * Register a new telemetry request interceptor.
+   *
+   * @param {module:openmct.RequestInterceptorDef} requestInterceptorDef the interceptor to add
+   * @method addInterceptor
+   * @memberof module:openmct.TelemetryRequestInterceptorRegistry#
+   */
+  addInterceptor(interceptorDef) {
+    //TODO: sort by priority
+    this.interceptors.push(interceptorDef);
+  }
+
+  /**
+   * Retrieve all interceptors applicable to a domain object/request.
+   * @method getInterceptors
+   * @returns [module:openmct.RequestInterceptorDef] the registered interceptors for this identifier/request
+   * @memberof module:openmct.TelemetryRequestInterceptorRegistry#
+   */
+  getInterceptors(identifier, request) {
+    return this.interceptors.filter((interceptor) => {
+      return (
+        typeof interceptor.appliesTo === 'function' && interceptor.appliesTo(identifier, request)
+      );
+    });
+  }
+}
diff --git a/src/api/telemetry/TelemetryValueFormatter.js b/src/api/telemetry/TelemetryValueFormatter.js
index e0ed726f8a7..4a2fbb2332e 100644
--- a/src/api/telemetry/TelemetryValueFormatter.js
+++ b/src/api/telemetry/TelemetryValueFormatter.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,113 +20,127 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    'lodash',
-    'printj'
-], function (
-    _,
-    printj
-) {
-
-    // TODO: needs reference to formatService;
-    function TelemetryValueFormatter(valueMetadata, formatService) {
-        const numberFormatter = {
-            parse: function (x) {
-                return Number(x);
-            },
-            format: function (x) {
-                return x;
-            },
-            validate: function (x) {
-                return true;
-            }
-        };
-
-        this.valueMetadata = valueMetadata;
-        try {
-            this.formatter = formatService
-                .getFormat(valueMetadata.format, valueMetadata);
-        } catch (e) {
-            // TODO: Better formatting
-            this.formatter = numberFormatter;
-        }
+import _ from 'lodash';
+import { sprintf } from 'printj';
 
-        if (valueMetadata.format === 'enum') {
-            this.formatter = {};
-            this.enumerations = valueMetadata.enumerations.reduce(function (vm, e) {
-                vm.byValue[e.value] = e.string;
-                vm.byString[e.string] = e.value;
-
-                return vm;
-            }, {
-                byValue: {},
-                byString: {}
-            });
-            this.formatter.format = function (value) {
-                if (Object.prototype.hasOwnProperty.call(this.enumerations.byValue, value)) {
-                    return this.enumerations.byValue[value];
-                }
-
-                return value;
-            }.bind(this);
-            this.formatter.parse = function (string) {
-                if (typeof string === "string") {
-                    if (Object.prototype.hasOwnProperty.call(this.enumerations.byString, string)) {
-                        return this.enumerations.byString[string];
-                    }
-                }
-
-                return Number(string);
-            }.bind(this);
-        }
+// TODO: needs reference to formatService;
+export default class TelemetryValueFormatter {
+  constructor(valueMetadata, formatMap) {
+    this.valueMetadata = valueMetadata;
+    this.formatMap = formatMap;
+    this.valueMetadataFormat = this.getNonArrayValue(valueMetadata.format);
 
-        // Check for formatString support once instead of per format call.
-        if (valueMetadata.formatString) {
-            const baseFormat = this.formatter.format;
-            const formatString = valueMetadata.formatString;
-            this.formatter.format = function (value) {
-                return printj.sprintf(formatString, baseFormat.call(this, value));
-            };
+    const numberFormatter = {
+      parse: (x) => Number(x),
+      format: (x) => x,
+      validate: (x) => true
+    };
+
+    // Is there an existing formatter for the format specified? If not, default to number format
+    this.formatter = formatMap.get(this.valueMetadataFormat) || numberFormatter;
+    if (this.valueMetadataFormat === 'enum') {
+      this.formatter = {};
+      this.enumerations = valueMetadata.enumerations.reduce(
+        function (vm, e) {
+          vm.byValue[e.value] = e.string;
+          vm.byString[e.string] = e.value;
+
+          return vm;
+        },
+        {
+          byValue: {},
+          byString: {}
+        }
+      );
+      this.formatter.format = (value) => {
+        if (Object.prototype.hasOwnProperty.call(this.enumerations.byValue, value)) {
+          return this.enumerations.byValue[value];
         }
 
-        if (valueMetadata.format === 'string') {
-            this.formatter.parse = function (value) {
-                if (value === undefined) {
-                    return '';
-                }
-
-                if (typeof value === 'string') {
-                    return value;
-                } else {
-                    return value.toString();
-                }
-            };
-
-            this.formatter.format = function (value) {
-                return value;
-            };
-
-            this.formatter.validate = function (value) {
-                return typeof value === 'string';
-            };
+        return value;
+      };
+      this.formatter.parse = (string) => {
+        if (typeof string === 'string') {
+          if (Object.prototype.hasOwnProperty.call(this.enumerations.byString, string)) {
+            return this.enumerations.byString[string];
+          }
         }
+
+        return Number(string);
+      };
     }
 
-    TelemetryValueFormatter.prototype.parse = function (datum) {
-        if (_.isObject(datum)) {
-            return this.formatter.parse(datum[this.valueMetadata.source]);
-        }
+    // Check for formatString support once instead of per format call.
+    if (valueMetadata.formatString) {
+      const baseFormat = this.formatter.format;
+      const formatString = this.getNonArrayValue(valueMetadata.formatString);
+      this.formatter.format = function (value) {
+        return sprintf(formatString, baseFormat.call(this, value));
+      };
+    }
 
-        return this.formatter.parse(datum);
-    };
+    if (this.valueMetadataFormat === 'string') {
+      this.formatter.parse = function (value) {
+        if (value === undefined) {
+          return '';
+        }
 
-    TelemetryValueFormatter.prototype.format = function (datum) {
-        if (_.isObject(datum)) {
-            return this.formatter.format(datum[this.valueMetadata.source]);
+        if (typeof value === 'string') {
+          return value;
+        } else {
+          return value.toString();
         }
+      };
 
-        return this.formatter.format(datum);
-    };
+      this.formatter.format = function (value) {
+        return value;
+      };
+
+      this.formatter.validate = function (value) {
+        return typeof value === 'string';
+      };
+    }
+  }
+
+  getNonArrayValue(value) {
+    //metadata format could have array formats ex. string[]/number[]
+    const arrayRegex = /\[\]$/g;
+    if (value && value.match(arrayRegex)) {
+      return value.replace(arrayRegex, '');
+    }
+
+    return value;
+  }
+
+  parse(datum) {
+    const isDatumArray = Array.isArray(datum);
+    if (_.isObject(datum)) {
+      const objectDatum = isDatumArray ? datum : datum[this.valueMetadata.source];
+      if (Array.isArray(objectDatum)) {
+        return objectDatum.map((item) => {
+          return this.formatter.parse(item);
+        });
+      } else {
+        return this.formatter.parse(objectDatum);
+      }
+    }
+
+    return this.formatter.parse(datum);
+  }
+
+  format(datum) {
+    const isDatumArray = Array.isArray(datum);
+    if (_.isObject(datum)) {
+      const objectDatum = isDatumArray ? datum : datum[this.valueMetadata.source];
+      if (Array.isArray(objectDatum)) {
+        return objectDatum.map((item) => {
+          return this.formatter.format(item);
+        });
+      } else {
+        return this.formatter.format(objectDatum);
+      }
+    }
 
-    return TelemetryValueFormatter;
-});
+    return this.formatter.format(datum);
+  }
+}
diff --git a/src/api/telemetry/WebSocketWorker.js b/src/api/telemetry/WebSocketWorker.js
new file mode 100644
index 00000000000..f09e7d12f7f
--- /dev/null
+++ b/src/api/telemetry/WebSocketWorker.js
@@ -0,0 +1,366 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* eslint-disable max-classes-per-file */
+export default function installWorker() {
+  const FALLBACK_AND_WAIT_MS = [1000, 5000, 5000, 10000, 10000, 30000];
+
+  /**
+   * @typedef {import('./BatchingWebSocket').BatchingStrategy} BatchingStrategy
+   */
+
+  /**
+   * Provides a WebSocket connection that is resilient to errors and dropouts.
+   * On an error or dropout, will automatically reconnect.
+   *
+   * Additionally, messages will be queued and sent only when WebSocket is
+   * connected meaning that client code does not need to check the state of
+   * the socket before sending.
+   */
+  class ResilientWebSocket extends EventTarget {
+    #webSocket;
+    #isConnected = false;
+    #isConnecting = false;
+    #messageQueue = [];
+    #reconnectTimeoutHandle;
+    #currentWaitIndex = 0;
+    #messageCallbacks = [];
+    #wsUrl;
+
+    /**
+     * Establish a new WebSocket connection to the given URL
+     * @param {String} url
+     */
+    connect(url) {
+      this.#wsUrl = url;
+      if (this.#isConnected) {
+        throw new Error('WebSocket already connected');
+      }
+
+      if (this.#isConnecting) {
+        throw new Error('WebSocket connection in progress');
+      }
+
+      this.#isConnecting = true;
+
+      this.#webSocket = new WebSocket(url);
+
+      const boundConnected = this.#connected.bind(this);
+      this.#webSocket.addEventListener('open', boundConnected);
+
+      const boundCleanUpAndReconnect = this.#cleanUpAndReconnect.bind(this);
+      this.#webSocket.addEventListener('error', boundCleanUpAndReconnect);
+      this.#webSocket.addEventListener('close', boundCleanUpAndReconnect);
+
+      const boundMessage = this.#message.bind(this);
+      this.#webSocket.addEventListener('message', boundMessage);
+
+      this.addEventListener(
+        'disconnected',
+        () => {
+          this.#webSocket.removeEventListener('open', boundConnected);
+          this.#webSocket.removeEventListener('error', boundCleanUpAndReconnect);
+          this.#webSocket.removeEventListener('close', boundCleanUpAndReconnect);
+        },
+        { once: true }
+      );
+    }
+
+    /**
+     * Register a callback to be invoked when a message is received on the WebSocket.
+     * This paradigm is used instead of the standard EventTarget or EventEmitter approach
+     * for performance reasons.
+     * @param {Function} callback The function to be invoked when a message is received
+     * @returns an unregister function
+     */
+    registerMessageCallback(callback) {
+      this.#messageCallbacks.push(callback);
+
+      return () => {
+        this.#messageCallbacks = this.#messageCallbacks.filter((cb) => cb !== callback);
+      };
+    }
+
+    #connected() {
+      console.debug('Websocket connected.');
+      this.#isConnected = true;
+      this.#isConnecting = false;
+      this.#currentWaitIndex = 0;
+
+      this.dispatchEvent(new Event('connected'));
+
+      this.#flushQueue();
+    }
+
+    #cleanUpAndReconnect() {
+      console.warn('Websocket closed. Attempting to reconnect...');
+      this.disconnect();
+      this.#reconnect();
+    }
+
+    #message(event) {
+      this.#messageCallbacks.forEach((callback) => callback(event.data));
+    }
+
+    disconnect() {
+      this.#isConnected = false;
+      this.#isConnecting = false;
+
+      // On WebSocket error, both error callback and close callback are invoked, resulting in
+      // this function being called twice, and websocket being destroyed and deallocated.
+      if (this.#webSocket !== undefined && this.#webSocket !== null) {
+        this.#webSocket.close();
+      }
+
+      this.dispatchEvent(new Event('disconnected'));
+      this.#webSocket = undefined;
+    }
+
+    #reconnect() {
+      if (this.#reconnectTimeoutHandle) {
+        return;
+      }
+
+      this.#reconnectTimeoutHandle = setTimeout(() => {
+        this.connect(this.#wsUrl);
+
+        this.#reconnectTimeoutHandle = undefined;
+      }, FALLBACK_AND_WAIT_MS[this.#currentWaitIndex]);
+
+      if (this.#currentWaitIndex < FALLBACK_AND_WAIT_MS.length - 1) {
+        this.#currentWaitIndex++;
+      }
+    }
+
+    enqueueMessage(message) {
+      this.#messageQueue.push(message);
+      this.#flushQueueIfReady();
+    }
+
+    #flushQueueIfReady() {
+      if (this.#isConnected) {
+        this.#flushQueue();
+      }
+    }
+
+    #flushQueue() {
+      while (this.#messageQueue.length > 0) {
+        if (!this.#isConnected) {
+          break;
+        }
+
+        const message = this.#messageQueue.shift();
+        this.#webSocket.send(message);
+      }
+    }
+  }
+
+  /**
+   * Handles messages over the worker interface, and
+   * sends corresponding WebSocket messages.
+   */
+  class WorkerToWebSocketMessageBroker {
+    #websocket;
+    #messageBatcher;
+
+    constructor(websocket, messageBatcher) {
+      this.#websocket = websocket;
+      this.#messageBatcher = messageBatcher;
+    }
+
+    routeMessageToHandler(message) {
+      const { type } = message.data;
+      switch (type) {
+        case 'connect':
+          this.connect(message);
+          break;
+        case 'disconnect':
+          this.disconnect(message);
+          break;
+        case 'message':
+          this.#websocket.enqueueMessage(message.data.message);
+          break;
+        case 'setBatchingStrategy':
+          this.setBatchingStrategy(message);
+          break;
+        case 'readyForNextBatch':
+          this.#messageBatcher.readyForNextBatch();
+          break;
+        case 'setMaxBatchSize':
+          this.#messageBatcher.setMaxBatchSize(message.data.maxBatchSize);
+          break;
+        default:
+          throw new Error(`Unknown message type: ${type}`);
+      }
+    }
+    connect(message) {
+      const { url } = message.data;
+      this.#websocket.connect(url);
+    }
+    disconnect() {
+      this.#websocket.disconnect();
+    }
+    setBatchingStrategy(message) {
+      const { serializedStrategy } = message.data;
+      const batchingStrategy = {
+        // eslint-disable-next-line no-new-func
+        shouldBatchMessage: new Function(`return ${serializedStrategy.shouldBatchMessage}`)(),
+        // eslint-disable-next-line no-new-func
+        getBatchIdFromMessage: new Function(`return ${serializedStrategy.getBatchIdFromMessage}`)()
+        // Will also include maximum batch length here
+      };
+      this.#messageBatcher.setBatchingStrategy(batchingStrategy);
+    }
+  }
+
+  /**
+   * Received messages from the WebSocket, and passes them along to the
+   * Worker interface and back to the main thread.
+   */
+  class WebSocketToWorkerMessageBroker {
+    #worker;
+    #messageBatcher;
+
+    constructor(messageBatcher, worker) {
+      this.#messageBatcher = messageBatcher;
+      this.#worker = worker;
+    }
+
+    routeMessageToHandler(data) {
+      //Implement batching here
+      if (this.#messageBatcher.shouldBatchMessage(data)) {
+        this.#messageBatcher.addMessageToBatch(data);
+      } else {
+        this.#worker.postMessage({
+          type: 'message',
+          message: data
+        });
+      }
+    }
+  }
+
+  /**
+   * Responsible for batching messages according to the defined batching strategy.
+   */
+  class MessageBatcher {
+    #batch;
+    #batchingStrategy;
+    #hasBatch = false;
+    #maxBatchSize;
+    #readyForNextBatch;
+    #worker;
+
+    constructor(worker) {
+      this.#maxBatchSize = 10;
+      this.#readyForNextBatch = false;
+      this.#worker = worker;
+      this.#resetBatch();
+    }
+    #resetBatch() {
+      this.#batch = {};
+      this.#hasBatch = false;
+    }
+    /**
+     * @param {BatchingStrategy} strategy
+     */
+    setBatchingStrategy(strategy) {
+      this.#batchingStrategy = strategy;
+    }
+    /**
+     * Applies the `shouldBatchMessage` function from the supplied batching strategy
+     * to each message to determine if it should be added to a batch. If not batched,
+     * the message is immediately sent over the worker to the main thread.
+     * @param {any} message the message received from the WebSocket. See the WebSocket
+     * documentation for more details -
+     * https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent/data
+     * @returns
+     */
+    shouldBatchMessage(message) {
+      return (
+        this.#batchingStrategy.shouldBatchMessage &&
+        this.#batchingStrategy.shouldBatchMessage(message)
+      );
+    }
+    /**
+     * Adds the given message to a batch. The batch group that the message is added
+     * to will be determined by the value returned by `getBatchIdFromMessage`.
+     * @param {any} message the message received from the WebSocket. See the WebSocket
+     * documentation for more details -
+     * https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent/data
+     */
+    addMessageToBatch(message) {
+      const batchId = this.#batchingStrategy.getBatchIdFromMessage(message);
+      let batch = this.#batch[batchId];
+      if (batch === undefined) {
+        batch = this.#batch[batchId] = [message];
+      } else {
+        batch.push(message);
+      }
+      if (batch.length > this.#maxBatchSize) {
+        batch.shift();
+        this.#batch.dropped = this.#batch.dropped || true;
+      }
+      if (this.#readyForNextBatch) {
+        this.#sendNextBatch();
+      } else {
+        this.#hasBatch = true;
+      }
+    }
+    setMaxBatchSize(maxBatchSize) {
+      this.#maxBatchSize = maxBatchSize;
+    }
+    /**
+     * Indicates that client code is ready to receive the next batch of
+     * messages. If a batch is available, it will be immediately sent.
+     * Otherwise a flag will be set to send the next batch as soon as
+     * any new data is available.
+     */
+    readyForNextBatch() {
+      if (this.#hasBatch) {
+        this.#sendNextBatch();
+      } else {
+        this.#readyForNextBatch = true;
+      }
+    }
+    #sendNextBatch() {
+      const batch = this.#batch;
+      this.#resetBatch();
+      this.#worker.postMessage({
+        type: 'batch',
+        batch
+      });
+      this.#readyForNextBatch = false;
+      this.#hasBatch = false;
+    }
+  }
+
+  const websocket = new ResilientWebSocket();
+  const messageBatcher = new MessageBatcher(self);
+  const workerBroker = new WorkerToWebSocketMessageBroker(websocket, messageBatcher);
+  const websocketBroker = new WebSocketToWorkerMessageBroker(messageBatcher, self);
+
+  self.addEventListener('message', (message) => {
+    workerBroker.routeMessageToHandler(message);
+  });
+  websocket.registerMessageCallback((data) => {
+    websocketBroker.routeMessageToHandler(data);
+  });
+}
diff --git a/src/api/telemetry/constants.js b/src/api/telemetry/constants.js
new file mode 100644
index 00000000000..92c325acf31
--- /dev/null
+++ b/src/api/telemetry/constants.js
@@ -0,0 +1,27 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+export const TIMESYSTEM_KEY_WARNING =
+  'All telemetry metadata must have a telemetry value with a key that matches the key of the active time system.';
+export const TIMESYSTEM_KEY_NOTIFICATION =
+  'Telemetry metadata does not match the active time system.';
+export const LOADED_ERROR = 'Telemetry Collection has already been loaded.';
diff --git a/src/api/time/GlobalTimeContext.js b/src/api/time/GlobalTimeContext.js
new file mode 100644
index 00000000000..9031989ebb7
--- /dev/null
+++ b/src/api/time/GlobalTimeContext.js
@@ -0,0 +1,106 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import TimeContext from './TimeContext.js';
+
+/**
+ * The GlobalContext handles getting and setting time of the openmct application in general.
+ * Views will use this context unless they specify an alternate/independent time context
+ */
+class GlobalTimeContext extends TimeContext {
+  constructor() {
+    super();
+
+    //The Time Of Interest
+    this.toi = undefined;
+  }
+
+  /**
+   * Get or set the start and end time of the time conductor. Basic validation
+   * of bounds is performed.
+   *
+   * @param {module:openmct.TimeAPI~TimeConductorBounds} newBounds
+   * @throws {Error} Validation error
+   * @fires module:openmct.TimeAPI~bounds
+   * @returns {module:openmct.TimeAPI~TimeConductorBounds}
+   * @memberof module:openmct.TimeAPI#
+   * @method bounds
+   */
+  bounds(newBounds) {
+    if (arguments.length > 0) {
+      super.bounds.call(this, ...arguments);
+      // If a bounds change results in a TOI outside of the current
+      // bounds, unset it
+      if (this.toi < newBounds.start || this.toi > newBounds.end) {
+        this.timeOfInterest(undefined);
+      }
+    }
+
+    //Return a copy to prevent direct mutation of time conductor bounds.
+    return JSON.parse(JSON.stringify(this.boundsVal));
+  }
+
+  /**
+   * Update bounds based on provided time and current offsets
+   * @private
+   * @param {number} timestamp A time from which bounds will be calculated
+   * using current offsets.
+   */
+  tick(timestamp) {
+    super.tick.call(this, ...arguments);
+
+    // If a bounds change results in a TOI outside of the current
+    // bounds, unset it
+    if (this.toi < this.boundsVal.start || this.toi > this.boundsVal.end) {
+      this.timeOfInterest(undefined);
+    }
+  }
+
+  /**
+   * Get or set the Time of Interest. The Time of Interest is a single point
+   * in time, and constitutes the temporal focus of application views. It can
+   * be manipulated by the user from the time conductor or from other views.
+   * The time of interest can effectively be unset by assigning a value of
+   * 'undefined'.
+   * @fires module:openmct.TimeAPI~timeOfInterest
+   * @param newTOI
+   * @returns {number} the current time of interest
+   * @memberof module:openmct.TimeAPI#
+   * @method timeOfInterest
+   */
+  timeOfInterest(newTOI) {
+    if (arguments.length > 0) {
+      this.toi = newTOI;
+      /**
+       * The Time of Interest has moved.
+       * @event timeOfInterest
+       * @memberof module:openmct.TimeAPI~
+       * @property {number} Current time of interest
+       */
+      this.emit('timeOfInterest', this.toi);
+    }
+
+    return this.toi;
+  }
+}
+
+export default GlobalTimeContext;
diff --git a/src/api/time/IndependentTimeContext.js b/src/api/time/IndependentTimeContext.js
new file mode 100644
index 00000000000..885a02c2153
--- /dev/null
+++ b/src/api/time/IndependentTimeContext.js
@@ -0,0 +1,448 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { MODES, REALTIME_MODE_KEY, TIME_CONTEXT_EVENTS } from './constants.js';
+import TimeContext from './TimeContext.js';
+
+/**
+ * The IndependentTimeContext handles getting and setting time of the openmct application in general.
+ * Views will use the GlobalTimeContext unless they specify an alternate/independent time context here.
+ */
+class IndependentTimeContext extends TimeContext {
+  constructor(openmct, globalTimeContext, objectPath) {
+    super();
+    this.openmct = openmct;
+    this.unlisteners = [];
+    this.globalTimeContext = globalTimeContext;
+    // We always start with the global time context.
+    // This upstream context will be undefined when an independent time context is added later.
+    this.upstreamTimeContext = this.globalTimeContext;
+    this.objectPath = objectPath;
+    this.refreshContext = this.refreshContext.bind(this);
+    this.resetContext = this.resetContext.bind(this);
+    this.removeIndependentContext = this.removeIndependentContext.bind(this);
+
+    this.refreshContext();
+
+    this.globalTimeContext.on('refreshContext', this.refreshContext);
+    this.globalTimeContext.on('removeOwnContext', this.removeIndependentContext);
+  }
+
+  bounds() {
+    if (this.upstreamTimeContext) {
+      return this.upstreamTimeContext.bounds(...arguments);
+    } else {
+      return super.bounds(...arguments);
+    }
+  }
+
+  getBounds() {
+    if (this.upstreamTimeContext) {
+      return this.upstreamTimeContext.getBounds();
+    } else {
+      return super.getBounds();
+    }
+  }
+
+  setBounds() {
+    if (this.upstreamTimeContext) {
+      return this.upstreamTimeContext.setBounds(...arguments);
+    } else {
+      return super.setBounds(...arguments);
+    }
+  }
+
+  tick() {
+    if (this.upstreamTimeContext) {
+      return this.upstreamTimeContext.tick(...arguments);
+    } else {
+      return super.tick(...arguments);
+    }
+  }
+
+  clockOffsets() {
+    if (this.upstreamTimeContext) {
+      return this.upstreamTimeContext.clockOffsets(...arguments);
+    } else {
+      return super.clockOffsets(...arguments);
+    }
+  }
+
+  getClockOffsets() {
+    if (this.upstreamTimeContext) {
+      return this.upstreamTimeContext.getClockOffsets();
+    } else {
+      return super.getClockOffsets();
+    }
+  }
+
+  setClockOffsets() {
+    if (this.upstreamTimeContext) {
+      return this.upstreamTimeContext.setClockOffsets(...arguments);
+    } else {
+      return super.setClockOffsets(...arguments);
+    }
+  }
+
+  timeOfInterest(newTOI) {
+    return this.globalTimeContext.timeOfInterest(...arguments);
+  }
+
+  timeSystem(timeSystemOrKey, bounds) {
+    return this.globalTimeContext.timeSystem(...arguments);
+  }
+
+  /**
+   * Get the time system of the TimeAPI.
+   * @returns {TimeSystem} The currently applied time system
+   * @memberof module:openmct.TimeAPI#
+   * @method getTimeSystem
+   */
+  getTimeSystem() {
+    return this.globalTimeContext.getTimeSystem();
+  }
+
+  /**
+   * Set the active clock. Tick source will be immediately subscribed to
+   * and ticking will begin. Offsets from 'now' must also be provided.
+   *
+   * @param {Clock || string} keyOrClock The clock to activate, or its key
+   * @param {ClockOffsets} offsets on each tick these will be used to calculate
+   * the start and end bounds. This maintains a sliding time window of a fixed
+   * width that automatically updates.
+   * @fires module:openmct.TimeAPI~clock
+   * @return {Clock} the currently active clock;
+   */
+  clock(keyOrClock, offsets) {
+    if (this.upstreamTimeContext) {
+      return this.upstreamTimeContext.clock(...arguments);
+    }
+
+    if (arguments.length === 2) {
+      let clock;
+
+      if (typeof keyOrClock === 'string') {
+        clock = this.globalTimeContext.clocks.get(keyOrClock);
+        if (clock === undefined) {
+          throw "Unknown clock '" + keyOrClock + "'. Has it been registered with 'addClock'?";
+        }
+      } else if (typeof keyOrClock === 'object') {
+        clock = keyOrClock;
+        if (!this.globalTimeContext.clocks.has(clock.key)) {
+          throw "Unknown clock '" + keyOrClock.key + "'. Has it been registered with 'addClock'?";
+        }
+      }
+
+      const previousClock = this.activeClock;
+      if (previousClock !== undefined) {
+        previousClock.off('tick', this.tick);
+      }
+
+      this.activeClock = clock;
+
+      /**
+       * The active clock has changed.
+       * @event clock
+       * @memberof module:openmct.TimeAPI~
+       * @property {Clock} clock The newly activated clock, or undefined
+       * if the system is no longer following a clock source
+       */
+      this.emit('clock', this.activeClock);
+      this.emit(TIME_CONTEXT_EVENTS.clockChanged, this.activeClock);
+
+      if (this.activeClock !== undefined) {
+        //set the mode here or isRealtime will be false even if we're in clock mode
+        this.setMode(REALTIME_MODE_KEY);
+
+        this.clockOffsets(offsets);
+        this.activeClock.on('tick', this.tick);
+      }
+    } else if (arguments.length === 1) {
+      throw 'When setting the clock, clock offsets must also be provided';
+    }
+
+    return this.activeClock;
+  }
+
+  /**
+   * Get the active clock.
+   * @return {Clock} the currently active clock;
+   */
+  getClock() {
+    if (this.upstreamTimeContext) {
+      return this.upstreamTimeContext.getClock();
+    }
+
+    return this.activeClock;
+  }
+
+  /**
+   * Set the active clock. Tick source will be immediately subscribed to
+   * and the currently ticking will begin.
+   * Offsets from 'now', if provided, will be used to set realtime mode offsets
+   *
+   * @param {Clock || string} keyOrClock The clock to activate, or its key
+   * @fires module:openmct.TimeAPI~clock
+   * @return {Clock} the currently active clock;
+   */
+  setClock(keyOrClock) {
+    if (this.upstreamTimeContext) {
+      return this.upstreamTimeContext.setClock(...arguments);
+    }
+
+    let clock;
+
+    if (typeof keyOrClock === 'string') {
+      clock = this.globalTimeContext.clocks.get(keyOrClock);
+      if (clock === undefined) {
+        throw `Unknown clock ${keyOrClock}. Has it been registered with 'addClock'?`;
+      }
+    } else if (typeof keyOrClock === 'object') {
+      clock = keyOrClock;
+      if (!this.globalTimeContext.clocks.has(clock.key)) {
+        throw `Unknown clock ${keyOrClock.key}. Has it been registered with 'addClock'?`;
+      }
+    }
+
+    const previousClock = this.activeClock;
+    if (previousClock) {
+      previousClock.off('tick', this.tick);
+    }
+
+    this.activeClock = clock;
+    this.activeClock.on('tick', this.tick);
+
+    /**
+     * The active clock has changed.
+     * @event clock
+     * @memberof module:openmct.TimeAPI~
+     * @property {Clock} clock The newly activated clock, or undefined
+     * if the system is no longer following a clock source
+     */
+    this.emit(TIME_CONTEXT_EVENTS.clockChanged, this.activeClock);
+
+    return this.activeClock;
+  }
+
+  /**
+   * Get the current mode.
+   * @return {Mode} the current mode;
+   */
+  getMode() {
+    if (this.upstreamTimeContext) {
+      return this.upstreamTimeContext.getMode();
+    }
+
+    return this.mode;
+  }
+
+  /**
+   * Set the mode to either fixed or realtime.
+   *
+   * @param {Mode} mode The mode to activate
+   * @param {TimeBounds | ClockOffsets} offsetsOrBounds A time window of a fixed width
+   * @fires module:openmct.TimeAPI~clock
+   * @return {Mode} the currently active mode;
+   */
+  setMode(mode, offsetsOrBounds) {
+    if (!mode) {
+      return;
+    }
+
+    if (this.upstreamTimeContext) {
+      return this.upstreamTimeContext.setMode(...arguments);
+    }
+
+    if (mode === MODES.realtime && this.activeClock === undefined) {
+      throw `Unknown clock. Has a clock been registered with 'addClock'?`;
+    }
+
+    if (mode !== this.mode) {
+      this.mode = mode;
+      /**
+       * The active mode has changed.
+       * @event modeChanged
+       * @memberof module:openmct.TimeAPI~
+       * @property {Mode} mode The newly activated mode
+       */
+      this.emit(TIME_CONTEXT_EVENTS.modeChanged, this.#copy(this.mode));
+    }
+
+    //We are also going to set bounds here
+    if (offsetsOrBounds !== undefined) {
+      if (this.mode === REALTIME_MODE_KEY) {
+        this.setClockOffsets(offsetsOrBounds);
+      } else {
+        this.setBounds(offsetsOrBounds);
+      }
+    }
+
+    return this.mode;
+  }
+
+  isRealTime() {
+    if (this.upstreamTimeContext) {
+      return this.upstreamTimeContext.isRealTime(...arguments);
+    } else {
+      return super.isRealTime(...arguments);
+    }
+  }
+
+  now() {
+    if (this.upstreamTimeContext) {
+      return this.upstreamTimeContext.now(...arguments);
+    } else {
+      return super.now(...arguments);
+    }
+  }
+
+  /**
+   * Causes this time context to follow another time context (either the global context, or another upstream time context)
+   * This allows views to have their own time context which points to the appropriate upstream context as necessary, achieving nesting.
+   */
+  followTimeContext() {
+    this.stopFollowingTimeContext();
+    if (this.upstreamTimeContext) {
+      Object.values(TIME_CONTEXT_EVENTS).forEach((eventName) => {
+        const thisTimeContext = this;
+        this.upstreamTimeContext.on(eventName, passthrough);
+        this.unlisteners.push(() => {
+          thisTimeContext.upstreamTimeContext.off(eventName, passthrough);
+        });
+        function passthrough() {
+          thisTimeContext.emit(eventName, ...arguments);
+        }
+      });
+    }
+  }
+
+  /**
+   * Stops following any upstream time context
+   */
+  stopFollowingTimeContext() {
+    this.unlisteners.forEach((unlisten) => unlisten());
+    this.unlisteners = [];
+  }
+
+  resetContext() {
+    if (this.upstreamTimeContext) {
+      this.stopFollowingTimeContext();
+      this.upstreamTimeContext = undefined;
+    }
+  }
+
+  /**
+   * Refresh the time context, following any upstream time contexts as necessary
+   */
+  refreshContext(viewKey) {
+    const key = this.openmct.objects.makeKeyString(this.objectPath[0].identifier);
+    if (viewKey && key === viewKey) {
+      return;
+    }
+
+    //this is necessary as the upstream context gets reassigned after this
+    this.stopFollowingTimeContext();
+
+    this.upstreamTimeContext = this.getUpstreamContext();
+    this.followTimeContext();
+
+    // Emit bounds so that views that are changing context get the upstream bounds
+    this.emit('bounds', this.bounds());
+    this.emit(TIME_CONTEXT_EVENTS.boundsChanged, this.getBounds());
+  }
+
+  hasOwnContext() {
+    return this.upstreamTimeContext === undefined;
+  }
+
+  getUpstreamContext() {
+    // If a view has an independent context, don't return an upstream context
+    // Be aware that when a new independent time context is created, we assign the global context as default
+    if (this.hasOwnContext()) {
+      return undefined;
+    }
+
+    let timeContext = this.globalTimeContext;
+    this.objectPath.some((item, index) => {
+      const key = this.openmct.objects.makeKeyString(item.identifier);
+      // we're only interested in parents, not self, so index > 0
+      const itemContext = this.globalTimeContext.independentContexts.get(key);
+      if (index > 0 && itemContext && itemContext.hasOwnContext()) {
+        //upstream time context
+        timeContext = itemContext;
+
+        return true;
+      }
+
+      return false;
+    });
+
+    return timeContext;
+  }
+
+  /**
+   * Set the time context of a view to follow any upstream time contexts as necessary (defaulting to the global context)
+   * This needs to be separate from refreshContext
+   */
+  removeIndependentContext(viewKey) {
+    const key = this.openmct.objects.makeKeyString(this.objectPath[0].identifier);
+    if (viewKey && key === viewKey) {
+      //this is necessary as the upstream context gets reassigned after this
+      this.stopFollowingTimeContext();
+      if (this.activeClock !== undefined) {
+        this.activeClock.off('tick', this.tick);
+      }
+
+      let timeContext = this.globalTimeContext;
+
+      this.objectPath.some((item, index) => {
+        const objectKey = this.openmct.objects.makeKeyString(item.identifier);
+        // we're only interested in any parents, not self, so index > 0
+        const itemContext = this.globalTimeContext.independentContexts.get(objectKey);
+        if (index > 0 && itemContext && itemContext.hasOwnContext()) {
+          //upstream time context
+          timeContext = itemContext;
+
+          return true;
+        }
+
+        return false;
+      });
+
+      this.upstreamTimeContext = timeContext;
+
+      this.followTimeContext();
+
+      // Emit bounds so that views that are changing context get the upstream bounds
+      this.emit('bounds', this.getBounds());
+      this.emit(TIME_CONTEXT_EVENTS.boundsChanged, this.getBounds());
+      // now that the view's context is set, tell others to check theirs in case they were following this view's context.
+      this.globalTimeContext.emit('refreshContext', viewKey);
+    }
+  }
+
+  #copy(object) {
+    return JSON.parse(JSON.stringify(object));
+  }
+}
+
+export default IndependentTimeContext;
diff --git a/src/api/time/TimeAPI.js b/src/api/time/TimeAPI.js
index 75f19ff6600..2ec9f63972f 100644
--- a/src/api/time/TimeAPI.js
+++ b/src/api/time/TimeAPI.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,446 +20,194 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(['EventEmitter'], function (EventEmitter) {
+import { FIXED_MODE_KEY, REALTIME_MODE_KEY } from '@/api/time/constants';
+import IndependentTimeContext from '@/api/time/IndependentTimeContext';
 
-    /**
-     * The public API for setting and querying the temporal state of the
-     * application. The concept of time is integral to Open MCT, and at least
-     * one {@link TimeSystem}, as well as some default time bounds must be
-     * registered and enabled via {@link TimeAPI.addTimeSystem} and
-     * {@link TimeAPI.timeSystem} respectively for Open MCT to work.
-     *
-     * Time-sensitive views will typically respond to changes to bounds or other
-     * properties of the time conductor and update the data displayed based on
-     * the temporal state of the application. The current time bounds are also
-     * used in queries for historical data.
-     *
-     * The TimeAPI extends the EventEmitter class. A number of events are
-     * fired when properties of the time conductor change, which are documented
-     * below.
-     *
-     * @interface
-     * @memberof module:openmct
-     */
-    function TimeAPI() {
-        EventEmitter.call(this);
-
-        //The Time System
-        this.system = undefined;
-        //The Time Of Interest
-        this.toi = undefined;
-
-        this.boundsVal = {
-            start: undefined,
-            end: undefined
-        };
-
-        this.timeSystems = new Map();
-        this.clocks = new Map();
-        this.activeClock = undefined;
-        this.offsets = undefined;
-
-        this.tick = this.tick.bind(this);
+import GlobalTimeContext from './GlobalTimeContext.js';
 
+/**
+ * The public API for setting and querying the temporal state of the
+ * application. The concept of time is integral to Open MCT, and at least
+ * one {@link TimeSystem}, as well as some default time bounds must be
+ * registered and enabled via {@link TimeAPI.addTimeSystem} and
+ * {@link TimeAPI.timeSystem} respectively for Open MCT to work.
+ *
+ * Time-sensitive views will typically respond to changes to bounds or other
+ * properties of the time conductor and update the data displayed based on
+ * the temporal state of the application. The current time bounds are also
+ * used in queries for historical data.
+ *
+ * The TimeAPI extends the GlobalTimeContext which in turn extends the TimeContext/EventEmitter class. A number of events are
+ * fired when properties of the time conductor change, which are documented
+ * below.
+ *
+ * @interface
+ * @memberof module:openmct
+ */
+class TimeAPI extends GlobalTimeContext {
+  constructor(openmct) {
+    super();
+    this.openmct = openmct;
+    this.independentContexts = new Map();
+  }
+
+  /**
+   * A TimeSystem provides meaning to the values returned by the TimeAPI. Open
+   * MCT supports multiple different types of time values, although all are
+   * intrinsically represented by numbers, the meaning of those numbers can
+   * differ depending on context.
+   *
+   * A default time system is provided by Open MCT in the form of the {@link UTCTimeSystem},
+   * which represents integer values as ms in the Unix epoch. An example of
+   * another time system might be "sols" for a Martian mission. TimeSystems do
+   * not address the issue of converting between time systems.
+   *
+   * @typedef {object} TimeSystem
+   * @property {string} key A unique identifier
+   * @property {string} name A human-readable descriptor
+   * @property {string} [cssClass] Specify a css class defining an icon for
+   * this time system. This will be visible next to the time system in the
+   * menu in the Time Conductor
+   * @property {string} timeFormat The key of a format to use when displaying
+   * discrete timestamps from this time system
+   * @property {string} [durationFormat] The key of a format to use when
+   * displaying a duration or relative span of time in this time system.
+   */
+
+  /**
+   * Register a new time system. Once registered it can activated using
+   * {@link TimeAPI.timeSystem}, and can be referenced via its key in [Time Conductor configuration](@link https://github.com/nasa/openmct/blob/master/API.md#time-conductor).
+   * @memberof module:openmct.TimeAPI#
+   * @param {TimeSystem} timeSystem A time system object.
+   */
+  addTimeSystem(timeSystem) {
+    this.timeSystems.set(timeSystem.key, timeSystem);
+  }
+
+  /**
+   * @returns {TimeSystem[]}
+   */
+  getAllTimeSystems() {
+    return Array.from(this.timeSystems.values());
+  }
+
+  /**
+   * Clocks provide a timing source that is used to
+   * automatically update the time bounds of the data displayed in Open MCT.
+   *
+   * @typedef {object} Clock
+   * @memberof openmct.timeAPI
+   * @property {string} key A unique identifier
+   * @property {string} name A human-readable name. The name will be used to
+   * represent this clock in the Time Conductor UI
+   * @property {string} description A longer description, ideally identifying
+   * what the clock ticks on.
+   * @property {function} currentValue Returns the last value generated by a tick, or a default value
+   * if no ticking has yet occurred
+   * @see {LocalClock}
+   */
+
+  /**
+   * Register a new Clock.
+   * @memberof module:openmct.TimeAPI#
+   * @param {Clock} clock
+   */
+  addClock(clock) {
+    this.clocks.set(clock.key, clock);
+  }
+
+  /**
+   * @memberof module:openmct.TimeAPI#
+   * @returns {Clock[]}
+   * @memberof module:openmct.TimeAPI#
+   */
+  getAllClocks() {
+    return Array.from(this.clocks.values());
+  }
+
+  /**
+   * Get or set an independent time context which follows the TimeAPI timeSystem,
+   * but with different offsets for a given domain object
+   * @param {key | string} key The identifier key of the domain object these offsets are set for
+   * @param {ClockOffsets | TimeBounds} value This maintains a sliding time window of a fixed width that automatically updates
+   * @param {key | string} clockKey the real time clock key currently in use
+   * @memberof module:openmct.TimeAPI#
+   * @method addIndependentTimeContext
+   */
+  addIndependentContext(key, value, clockKey) {
+    let timeContext = this.getIndependentContext(key);
+
+    //stop following upstream time context since the view has it's own
+    timeContext.resetContext();
+
+    if (clockKey) {
+      timeContext.setClock(clockKey);
+      timeContext.setMode(REALTIME_MODE_KEY, value);
+    } else {
+      timeContext.setMode(FIXED_MODE_KEY, value);
     }
 
-    TimeAPI.prototype = Object.create(EventEmitter.prototype);
-
-    /**
-     * A TimeSystem provides meaning to the values returned by the TimeAPI. Open
-     * MCT supports multiple different types of time values, although all are
-     * intrinsically represented by numbers, the meaning of those numbers can
-     * differ depending on context.
-     *
-     * A default time system is provided by Open MCT in the form of the {@link UTCTimeSystem},
-     * which represents integer values as ms in the Unix epoch. An example of
-     * another time system might be "sols" for a Martian mission. TimeSystems do
-     * not address the issue of converting between time systems.
-     *
-     * @typedef {object} TimeSystem
-     * @property {string} key A unique identifier
-     * @property {string} name A human-readable descriptor
-     * @property {string} [cssClass] Specify a css class defining an icon for
-     * this time system. This will be visible next to the time system in the
-     * menu in the Time Conductor
-     * @property {string} timeFormat The key of a format to use when displaying
-     * discrete timestamps from this time system
-     * @property {string} [durationFormat] The key of a format to use when
-     * displaying a duration or relative span of time in this time system.
-     */
-
-    /**
-     * Register a new time system. Once registered it can activated using
-     * {@link TimeAPI.timeSystem}, and can be referenced via its key in [Time Conductor configuration](@link https://github.com/nasa/openmct/blob/master/API.md#time-conductor).
-     * @memberof module:openmct.TimeAPI#
-     * @param {TimeSystem} timeSystem A time system object.
-     */
-    TimeAPI.prototype.addTimeSystem = function (timeSystem) {
-        this.timeSystems.set(timeSystem.key, timeSystem);
-    };
-
-    /**
-     * @returns {TimeSystem[]}
-     */
-    TimeAPI.prototype.getAllTimeSystems = function () {
-        return Array.from(this.timeSystems.values());
-    };
-
-    /**
-     * Clocks provide a timing source that is used to
-     * automatically update the time bounds of the data displayed in Open MCT.
-     *
-     * @typedef {object} Clock
-     * @memberof openmct.timeAPI
-     * @property {string} key A unique identifier
-     * @property {string} name A human-readable name. The name will be used to
-     * represent this clock in the Time Conductor UI
-     * @property {string} description A longer description, ideally identifying
-     * what the clock ticks on.
-     * @property {function} currentValue Returns the last value generated by a tick, or a default value
-     * if no ticking has yet occurred
-     * @see {LocalClock}
-     */
-
-    /**
-     * Register a new Clock.
-     * @memberof module:openmct.TimeAPI#
-     * @param {Clock} clock
-     */
-    TimeAPI.prototype.addClock = function (clock) {
-        this.clocks.set(clock.key, clock);
-    };
-
-    /**
-     * @memberof module:openmct.TimeAPI#
-     * @returns {Clock[]}
-     * @memberof module:openmct.TimeAPI#
-     */
-    TimeAPI.prototype.getAllClocks = function () {
-        return Array.from(this.clocks.values());
-    };
-
-    /**
-     * Validate the given bounds. This can be used for pre-validation of bounds,
-     * for example by views validating user inputs.
-     * @param {TimeBounds} bounds The start and end time of the conductor.
-     * @returns {string | true} A validation error, or true if valid
-     * @memberof module:openmct.TimeAPI#
-     * @method validateBounds
-     */
-    TimeAPI.prototype.validateBounds = function (bounds) {
-        if ((bounds.start === undefined)
-            || (bounds.end === undefined)
-            || isNaN(bounds.start)
-            || isNaN(bounds.end)
-        ) {
-            return "Start and end must be specified as integer values";
-        } else if (bounds.start > bounds.end) {
-            return "Specified start date exceeds end bound";
-        }
-
-        return true;
-    };
-
-    /**
-     * Validate the given offsets. This can be used for pre-validation of
-     * offsets, for example by views validating user inputs.
-     * @param {ClockOffsets} offsets The start and end offsets from a 'now' value.
-     * @returns {string | true} A validation error, or true if valid
-     * @memberof module:openmct.TimeAPI#
-     * @method validateBounds
-     */
-    TimeAPI.prototype.validateOffsets = function (offsets) {
-        if ((offsets.start === undefined)
-            || (offsets.end === undefined)
-            || isNaN(offsets.start)
-            || isNaN(offsets.end)
-        ) {
-            return "Start and end offsets must be specified as integer values";
-        } else if (offsets.start >= offsets.end) {
-            return "Specified start offset must be < end offset";
-        }
-
-        return true;
-    };
-
-    /**
-     * @typedef {Object} TimeBounds
-     * @property {number} start The start time displayed by the time conductor
-     * in ms since epoch. Epoch determined by currently active time system
-     * @property {number} end The end time displayed by the time conductor in ms
-     * since epoch.
-     * @memberof module:openmct.TimeAPI~
-     */
+    // Notify any nested views to update, pass in the viewKey so that particular view can skip getting an upstream context
+    this.emit('refreshContext', key);
 
-    /**
-     * Get or set the start and end time of the time conductor. Basic validation
-     * of bounds is performed.
-     *
-     * @param {module:openmct.TimeAPI~TimeConductorBounds} newBounds
-     * @throws {Error} Validation error
-     * @fires module:openmct.TimeAPI~bounds
-     * @returns {module:openmct.TimeAPI~TimeConductorBounds}
-     * @memberof module:openmct.TimeAPI#
-     * @method bounds
-     */
-    TimeAPI.prototype.bounds = function (newBounds) {
-        if (arguments.length > 0) {
-            const validationResult = this.validateBounds(newBounds);
-            if (validationResult !== true) {
-                throw new Error(validationResult);
-            }
-
-            //Create a copy to avoid direct mutation of conductor bounds
-            this.boundsVal = JSON.parse(JSON.stringify(newBounds));
-            /**
-             * The start time, end time, or both have been updated.
-             * @event bounds
-             * @memberof module:openmct.TimeAPI~
-             * @property {TimeConductorBounds} bounds The newly updated bounds
-             * @property {boolean} [tick] `true` if the bounds update was due to
-             * a "tick" event (ie. was an automatic update), false otherwise.
-             */
-            this.emit('bounds', this.boundsVal, false);
-
-            // If a bounds change results in a TOI outside of the current
-            // bounds, unset it
-            if (this.toi < newBounds.start || this.toi > newBounds.end) {
-                this.timeOfInterest(undefined);
-            }
-        }
-
-        //Return a copy to prevent direct mutation of time conductor bounds.
-        return JSON.parse(JSON.stringify(this.boundsVal));
+    return () => {
+      //follow any upstream time context
+      this.emit('removeOwnContext', key);
     };
+  }
+
+  /**
+   * Get the independent time context which follows the TimeAPI timeSystem,
+   * but with different offsets.
+   * @param {key | string} key The identifier key of the domain object these offsets
+   * @memberof module:openmct.TimeAPI#
+   * @method getIndependentTimeContext
+   */
+  getIndependentContext(key) {
+    return this.independentContexts.get(key);
+  }
+
+  /**
+   * Get the a timeContext for a view based on it's objectPath. If there is any object in the objectPath with an independent time context, it will be returned.
+   * Otherwise, the global time context will be returned.
+   * @param { Array } objectPath The view's objectPath
+   * @memberof module:openmct.TimeAPI#
+   * @method getContextForView
+   */
+  getContextForView(objectPath) {
+    if (!objectPath || !Array.isArray(objectPath)) {
+      throw new Error('No objectPath provided');
+    }
 
-    /**
-     * Get or set the time system of the TimeAPI.
-     * @param {TimeSystem | string} timeSystem
-     * @param {module:openmct.TimeAPI~TimeConductorBounds} bounds
-     * @fires module:openmct.TimeAPI~timeSystem
-     * @returns {TimeSystem} The currently applied time system
-     * @memberof module:openmct.TimeAPI#
-     * @method timeSystem
-     */
-    TimeAPI.prototype.timeSystem = function (timeSystemOrKey, bounds) {
-        if (arguments.length >= 1) {
-            if (arguments.length === 1 && !this.activeClock) {
-                throw new Error(
-                    "Must specify bounds when changing time system without "
-                    + "an active clock."
-                );
-            }
-
-            let timeSystem;
-
-            if (timeSystemOrKey === undefined) {
-                throw "Please provide a time system";
-            }
-
-            if (typeof timeSystemOrKey === 'string') {
-                timeSystem = this.timeSystems.get(timeSystemOrKey);
-
-                if (timeSystem === undefined) {
-                    throw "Unknown time system " + timeSystemOrKey + ". Has it been registered with 'addTimeSystem'?";
-                }
-            } else if (typeof timeSystemOrKey === 'object') {
-                timeSystem = timeSystemOrKey;
-
-                if (!this.timeSystems.has(timeSystem.key)) {
-                    throw "Unknown time system " + timeSystem.key + ". Has it been registered with 'addTimeSystem'?";
-                }
-            } else {
-                throw "Attempt to set invalid time system in Time API. Please provide a previously registered time system object or key";
-            }
-
-            this.system = timeSystem;
-
-            /**
-             * The time system used by the time
-             * conductor has changed. A change in Time System will always be
-             * followed by a bounds event specifying new query bounds.
-             *
-             * @event module:openmct.TimeAPI~timeSystem
-             * @property {TimeSystem} The value of the currently applied
-             * Time System
-             * */
-            this.emit('timeSystem', this.system);
-            if (bounds) {
-                this.bounds(bounds);
-            }
-
-        }
-
-        return this.system;
-    };
-
-    /**
-     * Get or set the Time of Interest. The Time of Interest is a single point
-     * in time, and constitutes the temporal focus of application views. It can
-     * be manipulated by the user from the time conductor or from other views.
-     * The time of interest can effectively be unset by assigning a value of
-     * 'undefined'.
-     * @fires module:openmct.TimeAPI~timeOfInterest
-     * @param newTOI
-     * @returns {number} the current time of interest
-     * @memberof module:openmct.TimeAPI#
-     * @method timeOfInterest
-     */
-    TimeAPI.prototype.timeOfInterest = function (newTOI) {
-        if (arguments.length > 0) {
-            this.toi = newTOI;
-            /**
-             * The Time of Interest has moved.
-             * @event timeOfInterest
-             * @memberof module:openmct.TimeAPI~
-             * @property {number} Current time of interest
-             */
-            this.emit('timeOfInterest', this.toi);
-        }
-
-        return this.toi;
-    };
-
-    /**
-     * Update bounds based on provided time and current offsets
-     * @private
-     * @param {number} timestamp A time from which boudns will be calculated
-     * using current offsets.
-     */
-    TimeAPI.prototype.tick = function (timestamp) {
-        const newBounds = {
-            start: timestamp + this.offsets.start,
-            end: timestamp + this.offsets.end
-        };
-
-        this.boundsVal = newBounds;
-        this.emit('bounds', this.boundsVal, true);
-
-        // If a bounds change results in a TOI outside of the current
-        // bounds, unset it
-        if (this.toi < newBounds.start || this.toi > newBounds.end) {
-            this.timeOfInterest(undefined);
-        }
-    };
-
-    /**
-     * Set the active clock. Tick source will be immediately subscribed to
-     * and ticking will begin. Offsets from 'now' must also be provided. A clock
-     * can be unset by calling {@link stopClock}.
-     *
-     * @param {Clock || string} The clock to activate, or its key
-     * @param {ClockOffsets} offsets on each tick these will be used to calculate
-     * the start and end bounds. This maintains a sliding time window of a fixed
-     * width that automatically updates.
-     * @fires module:openmct.TimeAPI~clock
-     * @return {Clock} the currently active clock;
-     */
-    TimeAPI.prototype.clock = function (keyOrClock, offsets) {
-        if (arguments.length === 2) {
-            let clock;
-
-            if (typeof keyOrClock === 'string') {
-                clock = this.clocks.get(keyOrClock);
-                if (clock === undefined) {
-                    throw "Unknown clock '" + keyOrClock + "'. Has it been registered with 'addClock'?";
-                }
-            } else if (typeof keyOrClock === 'object') {
-                clock = keyOrClock;
-                if (!this.clocks.has(clock.key)) {
-                    throw "Unknown clock '" + keyOrClock.key + "'. Has it been registered with 'addClock'?";
-                }
-            }
-
-            const previousClock = this.activeClock;
-            if (previousClock !== undefined) {
-                previousClock.off("tick", this.tick);
-            }
-
-            this.activeClock = clock;
-
-            /**
-             * The active clock has changed. Clock can be unset by calling {@link stopClock}
-             * @event clock
-             * @memberof module:openmct.TimeAPI~
-             * @property {Clock} clock The newly activated clock, or undefined
-             * if the system is no longer following a clock source
-             */
-            this.emit("clock", this.activeClock);
-
-            if (this.activeClock !== undefined) {
-                this.clockOffsets(offsets);
-                this.activeClock.on("tick", this.tick);
-            }
-
-        } else if (arguments.length === 1) {
-            throw "When setting the clock, clock offsets must also be provided";
-        }
-
-        return this.activeClock;
-    };
-
-    /**
-     * Clock offsets are used to calculate temporal bounds when the system is
-     * ticking on a clock source.
-     *
-     * @typedef {object} ClockOffsets
-     * @property {number} start A time span relative to the current value of the
-     * ticking clock, from which start bounds will be calculated. This value must
-     * be < 0. When a clock is active, bounds will be calculated automatically
-     * based on the value provided by the clock, and the defined clock offsets.
-     * @property {number} end A time span relative to the current value of the
-     * ticking clock, from which end bounds will be calculated. This value must
-     * be >= 0.
-     */
-    /**
-     * Get or set the currently applied clock offsets. If no parameter is provided,
-     * the current value will be returned. If provided, the new value will be
-     * used as the new clock offsets.
-     * @param {ClockOffsets} offsets
-     * @returns {ClockOffsets}
-     */
-    TimeAPI.prototype.clockOffsets = function (offsets) {
-        if (arguments.length > 0) {
-
-            const validationResult = this.validateOffsets(offsets);
-            if (validationResult !== true) {
-                throw new Error(validationResult);
-            }
-
-            this.offsets = offsets;
-
-            const currentValue = this.activeClock.currentValue();
-            const newBounds = {
-                start: currentValue + offsets.start,
-                end: currentValue + offsets.end
-            };
-
-            this.bounds(newBounds);
+    const viewKey =
+      objectPath.length && this.openmct.objects.makeKeyString(objectPath[0].identifier);
 
-            /**
-             * Event that is triggered when clock offsets change.
-             * @event clockOffsets
-             * @memberof module:openmct.TimeAPI~
-             * @property {ClockOffsets} clockOffsets The newly activated clock
-             * offsets.
-             */
-            this.emit("clockOffsets", offsets);
-        }
+    if (!viewKey) {
+      // Return the global time context
+      return this;
+    }
 
-        return this.offsets;
-    };
+    let viewTimeContext = this.getIndependentContext(viewKey);
+
+    if (!viewTimeContext) {
+      // If the context doesn't exist yet, create it.
+      viewTimeContext = new IndependentTimeContext(this.openmct, this, objectPath);
+      this.independentContexts.set(viewKey, viewTimeContext);
+    } else {
+      // If it already exists, compare the objectPath to see if it needs to be updated.
+      const currentPath = this.openmct.objects.getRelativePath(viewTimeContext.objectPath);
+      const newPath = this.openmct.objects.getRelativePath(objectPath);
+
+      if (currentPath !== newPath) {
+        // If the path has changed, update the context.
+        this.independentContexts.delete(viewKey);
+        viewTimeContext = new IndependentTimeContext(this.openmct, this, objectPath);
+        this.independentContexts.set(viewKey, viewTimeContext);
+      }
+    }
 
-    /**
-     * Stop the currently active clock from ticking, and unset it. This will
-     * revert all views to showing a static time frame defined by the current
-     * bounds.
-     */
-    TimeAPI.prototype.stopClock = function () {
-        if (this.activeClock) {
-            this.clock(undefined, undefined);
-        }
-    };
+    return viewTimeContext;
+  }
+}
 
-    return TimeAPI;
-});
+export default TimeAPI;
diff --git a/src/api/time/TimeAPISpec.js b/src/api/time/TimeAPISpec.js
index 303d30548c0..6aa327b8dac 100644
--- a/src/api/time/TimeAPISpec.js
+++ b/src/api/time/TimeAPISpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,241 +19,242 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+import { createOpenMct } from 'utils/testing';
 
-define(['./TimeAPI'], function (TimeAPI) {
-    describe("The Time API", function () {
-        let api;
-        let timeSystemKey;
-        let timeSystem;
-        let clockKey;
-        let clock;
-        let bounds;
-        let eventListener;
-        let toi;
-
-        beforeEach(function () {
-            api = new TimeAPI();
-            timeSystemKey = "timeSystemKey";
-            timeSystem = {key: timeSystemKey};
-            clockKey = "someClockKey";
-            clock = jasmine.createSpyObj("clock", [
-                "on",
-                "off",
-                "currentValue"
-            ]);
-            clock.currentValue.and.returnValue(100);
-            clock.key = clockKey;
-            bounds = {
-                start: 0,
-                end: 1
-            };
-            eventListener = jasmine.createSpy("eventListener");
-            toi = 111;
-        });
-
-        it("Supports setting and querying of time of interest", function () {
-            expect(api.timeOfInterest()).not.toBe(toi);
-            api.timeOfInterest(toi);
-            expect(api.timeOfInterest()).toBe(toi);
-        });
-
-        it("Allows setting of valid bounds", function () {
-            bounds = {
-                start: 0,
-                end: 1
-            };
-            expect(api.bounds()).not.toBe(bounds);
-            expect(api.bounds.bind(api, bounds)).not.toThrow();
-            expect(api.bounds()).toEqual(bounds);
-        });
-
-        it("Disallows setting of invalid bounds", function () {
-            bounds = {
-                start: 1,
-                end: 0
-            };
-            expect(api.bounds()).not.toEqual(bounds);
-            expect(api.bounds.bind(api, bounds)).toThrow();
-            expect(api.bounds()).not.toEqual(bounds);
-
-            bounds = {start: 1};
-            expect(api.bounds()).not.toEqual(bounds);
-            expect(api.bounds.bind(api, bounds)).toThrow();
-            expect(api.bounds()).not.toEqual(bounds);
-        });
-
-        it("Allows setting of previously registered time system with bounds", function () {
-            api.addTimeSystem(timeSystem);
-            expect(api.timeSystem()).not.toBe(timeSystem);
-            expect(function () {
-                api.timeSystem(timeSystem, bounds);
-            }).not.toThrow();
-            expect(api.timeSystem()).toBe(timeSystem);
-        });
-
-        it("Disallows setting of time system without bounds", function () {
-            api.addTimeSystem(timeSystem);
-            expect(api.timeSystem()).not.toBe(timeSystem);
-            expect(function () {
-                api.timeSystem(timeSystemKey);
-            }).toThrow();
-            expect(api.timeSystem()).not.toBe(timeSystem);
-        });
-
-        it("allows setting of timesystem without bounds with clock", function () {
-            api.addTimeSystem(timeSystem);
-            api.addClock(clock);
-            api.clock(clockKey, {
-                start: 0,
-                end: 1
-            });
-            expect(api.timeSystem()).not.toBe(timeSystem);
-            expect(function () {
-                api.timeSystem(timeSystemKey);
-            }).not.toThrow();
-            expect(api.timeSystem()).toBe(timeSystem);
-
-        });
-
-        it("Emits an event when time system changes", function () {
-            api.addTimeSystem(timeSystem);
-            expect(eventListener).not.toHaveBeenCalled();
-            api.on("timeSystem", eventListener);
-            api.timeSystem(timeSystemKey, bounds);
-            expect(eventListener).toHaveBeenCalledWith(timeSystem);
-        });
-
-        it("Emits an event when time of interest changes", function () {
-            expect(eventListener).not.toHaveBeenCalled();
-            api.on("timeOfInterest", eventListener);
-            api.timeOfInterest(toi);
-            expect(eventListener).toHaveBeenCalledWith(toi);
-        });
-
-        it("Emits an event when bounds change", function () {
-            expect(eventListener).not.toHaveBeenCalled();
-            api.on("bounds", eventListener);
-            api.bounds(bounds);
-            expect(eventListener).toHaveBeenCalledWith(bounds, false);
-        });
-
-        it("If bounds are set and TOI lies inside them, do not change TOI", function () {
-            api.timeOfInterest(6);
-            api.bounds({
-                start: 1,
-                end: 10
-            });
-            expect(api.timeOfInterest()).toEqual(6);
-        });
-
-        it("If bounds are set and TOI lies outside them, reset TOI", function () {
-            api.timeOfInterest(11);
-            api.bounds({
-                start: 1,
-                end: 10
-            });
-            expect(api.timeOfInterest()).toBeUndefined();
-        });
-
-        it("Maintains delta during tick", function () {
-        });
-
-        it("Allows registered time system to be activated", function () {
-        });
-
-        it("Allows a registered tick source to be activated", function () {
-            const mockTickSource = jasmine.createSpyObj("mockTickSource", [
-                "on",
-                "off",
-                "currentValue"
-            ]);
-            mockTickSource.key = 'mockTickSource';
-        });
-
-        describe(" when enabling a tick source", function () {
-            let mockTickSource;
-            let anotherMockTickSource;
-            const mockOffsets = {
-                start: 0,
-                end: 1
-            };
-
-            beforeEach(function () {
-                mockTickSource = jasmine.createSpyObj("clock", [
-                    "on",
-                    "off",
-                    "currentValue"
-                ]);
-                mockTickSource.currentValue.and.returnValue(10);
-                mockTickSource.key = "mts";
-
-                anotherMockTickSource = jasmine.createSpyObj("clock", [
-                    "on",
-                    "off",
-                    "currentValue"
-                ]);
-                anotherMockTickSource.key = "amts";
-                anotherMockTickSource.currentValue.and.returnValue(10);
-
-                api.addClock(mockTickSource);
-                api.addClock(anotherMockTickSource);
-            });
-
-            it("sets bounds based on current value", function () {
-                api.clock("mts", mockOffsets);
-                expect(api.bounds()).toEqual({
-                    start: 10,
-                    end: 11
-                });
-            });
-
-            it("a new tick listener is registered", function () {
-                api.clock("mts", mockOffsets);
-                expect(mockTickSource.on).toHaveBeenCalledWith("tick", jasmine.any(Function));
-            });
-
-            it("listener of existing tick source is reregistered", function () {
-                api.clock("mts", mockOffsets);
-                api.clock("amts", mockOffsets);
-                expect(mockTickSource.off).toHaveBeenCalledWith("tick", jasmine.any(Function));
-            });
-
-            it("Allows the active clock to be set and unset", function () {
-                expect(api.clock()).toBeUndefined();
-                api.clock("mts", mockOffsets);
-                expect(api.clock()).toBeDefined();
-                api.stopClock();
-                expect(api.clock()).toBeUndefined();
-            });
-
-        });
-
-        it("on tick, observes offsets, and indicates tick in bounds callback", function () {
-            const mockTickSource = jasmine.createSpyObj("clock", [
-                "on",
-                "off",
-                "currentValue"
-            ]);
-            mockTickSource.currentValue.and.returnValue(100);
-            let tickCallback;
-            const boundsCallback = jasmine.createSpy("boundsCallback");
-            const clockOffsets = {
-                start: -100,
-                end: 100
-            };
-            mockTickSource.key = "mts";
-
-            api.addClock(mockTickSource);
-            api.clock("mts", clockOffsets);
-
-            api.on("bounds", boundsCallback);
-
-            tickCallback = mockTickSource.on.calls.mostRecent().args[1];
-            tickCallback(1000);
-            expect(boundsCallback).toHaveBeenCalledWith({
-                start: 900,
-                end: 1100
-            }, true);
-        });
+import TimeAPI from './TimeAPI.js';
+
+describe('The Time API', function () {
+  let api;
+  let timeSystemKey;
+  let timeSystem;
+  let clockKey;
+  let clock;
+  let bounds;
+  let eventListener;
+  let toi;
+  let openmct;
+
+  beforeEach(function () {
+    openmct = createOpenMct();
+    api = new TimeAPI(openmct);
+    timeSystemKey = 'timeSystemKey';
+    timeSystem = { key: timeSystemKey };
+    clockKey = 'someClockKey';
+    clock = jasmine.createSpyObj('clock', ['on', 'off', 'currentValue']);
+    clock.currentValue.and.returnValue(100);
+    clock.key = clockKey;
+    bounds = {
+      start: 0,
+      end: 1
+    };
+    eventListener = jasmine.createSpy('eventListener');
+    toi = 111;
+  });
+
+  it('Supports setting and querying of time of interest', function () {
+    expect(api.timeOfInterest()).not.toBe(toi);
+    api.timeOfInterest(toi);
+    expect(api.timeOfInterest()).toBe(toi);
+  });
+
+  it('Allows setting of valid bounds', function () {
+    bounds = {
+      start: 0,
+      end: 1
+    };
+    expect(api.bounds()).not.toBe(bounds);
+    expect(api.bounds.bind(api, bounds)).not.toThrow();
+    expect(api.bounds()).toEqual(bounds);
+  });
+
+  it('Disallows setting of invalid bounds', function () {
+    bounds = {
+      start: 1,
+      end: 0
+    };
+    expect(api.bounds()).not.toEqual(bounds);
+    expect(api.bounds.bind(api, bounds)).toThrow();
+    expect(api.bounds()).not.toEqual(bounds);
+
+    bounds = { start: 1 };
+    expect(api.bounds()).not.toEqual(bounds);
+    expect(api.bounds.bind(api, bounds)).toThrow();
+    expect(api.bounds()).not.toEqual(bounds);
+  });
+
+  it('Allows setting of previously registered time system with bounds', function () {
+    api.addTimeSystem(timeSystem);
+    expect(api.timeSystem()).not.toBe(timeSystem);
+    expect(function () {
+      api.timeSystem(timeSystem, bounds);
+    }).not.toThrow();
+    expect(api.timeSystem()).toEqual(timeSystem);
+  });
+
+  it('Disallows setting of time system without bounds', function () {
+    api.addTimeSystem(timeSystem);
+    expect(api.timeSystem()).not.toBe(timeSystem);
+    expect(function () {
+      api.timeSystem(timeSystemKey);
+    }).toThrow();
+    expect(api.timeSystem()).not.toBe(timeSystem);
+  });
+
+  it('allows setting of timesystem without bounds with clock', function () {
+    api.addTimeSystem(timeSystem);
+    api.addClock(clock);
+    api.clock(clockKey, {
+      start: 0,
+      end: 1
+    });
+    expect(api.timeSystem()).not.toBe(timeSystem);
+    expect(function () {
+      api.timeSystem(timeSystemKey);
+    }).not.toThrow();
+    expect(api.timeSystem()).toEqual(timeSystem);
+  });
+
+  it('Emits an event when time system changes', function () {
+    api.addTimeSystem(timeSystem);
+    expect(eventListener).not.toHaveBeenCalled();
+    api.on('timeSystem', eventListener);
+    api.timeSystem(timeSystemKey, bounds);
+    expect(eventListener).toHaveBeenCalledWith(timeSystem);
+  });
+
+  it('Emits an event when time of interest changes', function () {
+    expect(eventListener).not.toHaveBeenCalled();
+    api.on('timeOfInterest', eventListener);
+    api.timeOfInterest(toi);
+    expect(eventListener).toHaveBeenCalledWith(toi);
+  });
+
+  it('Emits an event when bounds change', function () {
+    expect(eventListener).not.toHaveBeenCalled();
+    api.on('bounds', eventListener);
+    api.bounds(bounds);
+    expect(eventListener).toHaveBeenCalledWith(bounds, false);
+  });
+
+  it('If bounds are set and TOI lies inside them, do not change TOI', function () {
+    api.timeOfInterest(6);
+    api.bounds({
+      start: 1,
+      end: 10
+    });
+    expect(api.timeOfInterest()).toEqual(6);
+  });
+
+  it('If bounds are set and TOI lies outside them, reset TOI', function () {
+    api.timeOfInterest(11);
+    api.bounds({
+      start: 1,
+      end: 10
+    });
+    expect(api.timeOfInterest()).toBeUndefined();
+  });
+
+  it('Maintains delta during tick', function () {});
+
+  it('Allows registered time system to be activated', function () {});
+
+  it('Allows a registered tick source to be activated', function () {
+    const mockTickSource = jasmine.createSpyObj('mockTickSource', ['on', 'off', 'currentValue']);
+    mockTickSource.key = 'mockTickSource';
+  });
+
+  describe(' when enabling a tick source', function () {
+    let mockTickSource;
+    let anotherMockTickSource;
+    const mockOffsets = {
+      start: 0,
+      end: 1
+    };
+
+    beforeEach(function () {
+      mockTickSource = jasmine.createSpyObj('clock', ['on', 'off', 'currentValue']);
+      mockTickSource.currentValue.and.returnValue(10);
+      mockTickSource.key = 'mts';
+
+      anotherMockTickSource = jasmine.createSpyObj('clock', ['on', 'off', 'currentValue']);
+      anotherMockTickSource.key = 'amts';
+      anotherMockTickSource.currentValue.and.returnValue(10);
+
+      api.addClock(mockTickSource);
+      api.addClock(anotherMockTickSource);
+    });
+
+    it('sets bounds based on current value', function () {
+      api.clock('mts', mockOffsets);
+      expect(api.bounds()).toEqual({
+        start: 10,
+        end: 11
+      });
+    });
+
+    it('a new tick listener is registered', function () {
+      api.clock('mts', mockOffsets);
+      expect(mockTickSource.on).toHaveBeenCalledWith('tick', jasmine.any(Function));
+    });
+
+    it('listener of existing tick source is reregistered', function () {
+      api.clock('mts', mockOffsets);
+      api.clock('amts', mockOffsets);
+      expect(mockTickSource.off).toHaveBeenCalledWith('tick', jasmine.any(Function));
+    });
+
+    xit('Allows the active clock to be set and unset', function () {
+      expect(api.clock()).toBeUndefined();
+      api.clock('mts', mockOffsets);
+      expect(api.clock()).toBeDefined();
+      // api.stopClock();
+      // expect(api.clock()).toBeUndefined();
     });
+
+    it('Provides a default time context', () => {
+      const timeContext = api.getContextForView([]);
+      expect(timeContext).not.toBe(null);
+    });
+
+    it('Without a clock, is in fixed time mode', () => {
+      const timeContext = api.getContextForView([]);
+      expect(timeContext.isRealTime()).toBe(false);
+    });
+
+    it('Provided a clock, is in real-time mode', () => {
+      const timeContext = api.getContextForView([]);
+      timeContext.clock('mts', {
+        start: 0,
+        end: 1
+      });
+      expect(timeContext.isRealTime()).toBe(true);
+    });
+  });
+
+  it('on tick, observes offsets, and indicates tick in bounds callback', function () {
+    const mockTickSource = jasmine.createSpyObj('clock', ['on', 'off', 'currentValue']);
+    mockTickSource.currentValue.and.returnValue(100);
+    let tickCallback;
+    const boundsCallback = jasmine.createSpy('boundsCallback');
+    const clockOffsets = {
+      start: -100,
+      end: 100
+    };
+    mockTickSource.key = 'mts';
+
+    api.addClock(mockTickSource);
+    api.clock('mts', clockOffsets);
+
+    api.on('bounds', boundsCallback);
+
+    tickCallback = mockTickSource.on.calls.mostRecent().args[1];
+    tickCallback(1000);
+    expect(boundsCallback).toHaveBeenCalledWith(
+      {
+        start: 900,
+        end: 1100
+      },
+      true
+    );
+  });
 });
diff --git a/src/api/time/TimeContext.js b/src/api/time/TimeContext.js
new file mode 100644
index 00000000000..e6c15136e37
--- /dev/null
+++ b/src/api/time/TimeContext.js
@@ -0,0 +1,685 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import EventEmitter from 'EventEmitter';
+
+import { FIXED_MODE_KEY, MODES, REALTIME_MODE_KEY, TIME_CONTEXT_EVENTS } from './constants.js';
+
+class TimeContext extends EventEmitter {
+  constructor() {
+    super();
+
+    //The Time System
+    this.timeSystems = new Map();
+
+    this.system = undefined;
+
+    this.clocks = new Map();
+
+    this.boundsVal = {
+      start: undefined,
+      end: undefined
+    };
+
+    this.activeClock = undefined;
+    this.offsets = undefined;
+    this.mode = undefined;
+    this.warnCounts = {};
+
+    this.tick = this.tick.bind(this);
+  }
+
+  /**
+   * Get or set the time system of the TimeAPI.
+   * @param {TimeSystem | string} timeSystemOrKey
+   * @param {module:openmct.TimeAPI~TimeConductorBounds} bounds
+   * @fires module:openmct.TimeAPI~timeSystem
+   * @returns {TimeSystem} The currently applied time system
+   * @memberof module:openmct.TimeAPI#
+   * @method timeSystem
+   */
+  timeSystem(timeSystemOrKey, bounds) {
+    this.#warnMethodDeprecated('"timeSystem"', '"getTimeSystem" and "setTimeSystem"');
+
+    if (arguments.length >= 1) {
+      if (arguments.length === 1 && !this.activeClock) {
+        throw new Error('Must specify bounds when changing time system without an active clock.');
+      }
+
+      let timeSystem;
+
+      if (timeSystemOrKey === undefined) {
+        throw 'Please provide a time system';
+      }
+
+      if (typeof timeSystemOrKey === 'string') {
+        timeSystem = this.timeSystems.get(timeSystemOrKey);
+
+        if (timeSystem === undefined) {
+          throw (
+            'Unknown time system ' +
+            timeSystemOrKey +
+            ". Has it been registered with 'addTimeSystem'?"
+          );
+        }
+      } else if (typeof timeSystemOrKey === 'object') {
+        timeSystem = timeSystemOrKey;
+
+        if (!this.timeSystems.has(timeSystem.key)) {
+          throw (
+            'Unknown time system ' +
+            timeSystem.key +
+            ". Has it been registered with 'addTimeSystem'?"
+          );
+        }
+      } else {
+        throw 'Attempt to set invalid time system in Time API. Please provide a previously registered time system object or key';
+      }
+
+      this.system = this.#copy(timeSystem);
+
+      /**
+       * The time system used by the time
+       * conductor has changed. A change in Time System will always be
+       * followed by a bounds event specifying new query bounds.
+       *
+       * @event module:openmct.TimeAPI~timeSystem
+       * @property {TimeSystem} The value of the currently applied
+       * Time System
+       * */
+      const system = this.#copy(this.system);
+      this.emit('timeSystem', system);
+      this.emit(TIME_CONTEXT_EVENTS.timeSystemChanged, system);
+
+      if (bounds) {
+        this.bounds(bounds);
+      }
+    }
+
+    return this.system;
+  }
+
+  /**
+   * Clock offsets are used to calculate temporal bounds when the system is
+   * ticking on a clock source.
+   *
+   * @typedef {object} ValidationResult
+   * @property {boolean} valid Result of the validation - true or false.
+   * @property {string} message An error message if valid is false.
+   */
+  /**
+   * Validate the given bounds. This can be used for pre-validation of bounds,
+   * for example by views validating user inputs.
+   * @param {TimeBounds} bounds The start and end time of the conductor.
+   * @returns {ValidationResult} A validation error, or true if valid
+   * @memberof module:openmct.TimeAPI#
+   * @method validateBounds
+   */
+  validateBounds(bounds) {
+    if (
+      bounds.start === undefined ||
+      bounds.end === undefined ||
+      isNaN(bounds.start) ||
+      isNaN(bounds.end)
+    ) {
+      return {
+        valid: false,
+        message: 'Start and end must be specified as integer values'
+      };
+    } else if (bounds.start > bounds.end) {
+      return {
+        valid: false,
+        message: 'Specified start date exceeds end bound'
+      };
+    }
+
+    return {
+      valid: true,
+      message: ''
+    };
+  }
+
+  /**
+   * Get or set the start and end time of the time conductor. Basic validation
+   * of bounds is performed.
+   *
+   * @param {module:openmct.TimeAPI~TimeConductorBounds} newBounds
+   * @throws {Error} Validation error
+   * @fires module:openmct.TimeAPI~bounds
+   * @returns {module:openmct.TimeAPI~TimeConductorBounds}
+   * @memberof module:openmct.TimeAPI#
+   * @method bounds
+   */
+  bounds(newBounds) {
+    this.#warnMethodDeprecated('"bounds"', '"getBounds" and "setBounds"');
+
+    if (arguments.length > 0) {
+      const validationResult = this.validateBounds(newBounds);
+      if (validationResult.valid !== true) {
+        throw new Error(validationResult.message);
+      }
+
+      //Create a copy to avoid direct mutation of conductor bounds
+      this.boundsVal = this.#copy(newBounds);
+      /**
+       * The start time, end time, or both have been updated.
+       * @event bounds
+       * @memberof module:openmct.TimeAPI~
+       * @property {TimeConductorBounds} bounds The newly updated bounds
+       * @property {boolean} [tick] `true` if the bounds update was due to
+       * a "tick" event (ie. was an automatic update), false otherwise.
+       */
+      this.emit('bounds', this.boundsVal, false);
+      this.emit(TIME_CONTEXT_EVENTS.boundsChanged, this.boundsVal, false);
+    }
+
+    //Return a copy to prevent direct mutation of time conductor bounds.
+    return this.#copy(this.boundsVal);
+  }
+
+  /**
+   * Validate the given offsets. This can be used for pre-validation of
+   * offsets, for example by views validating user inputs.
+   * @param {ClockOffsets} offsets The start and end offsets from a 'now' value.
+   * @returns { ValidationResult } A validation error, and true/false if valid or not
+   * @memberof module:openmct.TimeAPI#
+   * @method validateOffsets
+   */
+  validateOffsets(offsets) {
+    if (
+      offsets.start === undefined ||
+      offsets.end === undefined ||
+      isNaN(offsets.start) ||
+      isNaN(offsets.end)
+    ) {
+      return {
+        valid: false,
+        message: 'Start and end offsets must be specified as integer values'
+      };
+    } else if (offsets.start >= offsets.end) {
+      return {
+        valid: false,
+        message: 'Specified start offset must be < end offset'
+      };
+    }
+
+    return {
+      valid: true,
+      message: ''
+    };
+  }
+
+  /**
+   * @typedef {Object} TimeBounds
+   * @property {number} start The start time displayed by the time conductor
+   * in ms since epoch. Epoch determined by currently active time system
+   * @property {number} end The end time displayed by the time conductor in ms
+   * since epoch.
+   * @memberof module:openmct.TimeAPI~
+   */
+
+  /**
+   * Clock offsets are used to calculate temporal bounds when the system is
+   * ticking on a clock source.
+   *
+   * @typedef {object} ClockOffsets
+   * @property {number} start A time span relative to the current value of the
+   * ticking clock, from which start bounds will be calculated. This value must
+   * be < 0. When a clock is active, bounds will be calculated automatically
+   * based on the value provided by the clock, and the defined clock offsets.
+   * @property {number} end A time span relative to the current value of the
+   * ticking clock, from which end bounds will be calculated. This value must
+   * be >= 0.
+   */
+  /**
+   * Get or set the currently applied clock offsets. If no parameter is provided,
+   * the current value will be returned. If provided, the new value will be
+   * used as the new clock offsets.
+   * @param {ClockOffsets} offsets
+   * @returns {ClockOffsets}
+   */
+  clockOffsets(offsets) {
+    this.#warnMethodDeprecated('"clockOffsets"', '"getClockOffsets" and "setClockOffsets"');
+
+    if (arguments.length > 0) {
+      const validationResult = this.validateOffsets(offsets);
+      if (validationResult.valid !== true) {
+        throw new Error(validationResult.message);
+      }
+
+      this.offsets = offsets;
+
+      const currentValue = this.activeClock.currentValue();
+      const newBounds = {
+        start: currentValue + offsets.start,
+        end: currentValue + offsets.end
+      };
+
+      this.bounds(newBounds);
+
+      /**
+       * Event that is triggered when clock offsets change.
+       * @event clockOffsets
+       * @memberof module:openmct.TimeAPI~
+       * @property {ClockOffsets} clockOffsets The newly activated clock
+       * offsets.
+       */
+      this.emit('clockOffsets', offsets);
+    }
+
+    return this.offsets;
+  }
+
+  /**
+   * Stop following the currently active clock. This will
+   * revert all views to showing a static time frame defined by the current
+   * bounds.
+   */
+  stopClock() {
+    this.#warnMethodDeprecated('"stopClock"');
+
+    this.setMode(FIXED_MODE_KEY);
+  }
+
+  /**
+   * Set the active clock. Tick source will be immediately subscribed to
+   * and ticking will begin. Offsets from 'now' must also be provided.
+   *
+   * @param {Clock || string} keyOrClock The clock to activate, or its key
+   * @param {ClockOffsets} offsets on each tick these will be used to calculate
+   * the start and end bounds. This maintains a sliding time window of a fixed
+   * width that automatically updates.
+   * @fires module:openmct.TimeAPI~clock
+   * @return {Clock} the currently active clock;
+   */
+  clock(keyOrClock, offsets) {
+    this.#warnMethodDeprecated('"clock"', '"getClock" and "setClock"');
+
+    if (arguments.length === 2) {
+      let clock;
+
+      if (typeof keyOrClock === 'string') {
+        clock = this.clocks.get(keyOrClock);
+        if (clock === undefined) {
+          throw "Unknown clock '" + keyOrClock + "'. Has it been registered with 'addClock'?";
+        }
+      } else if (typeof keyOrClock === 'object') {
+        clock = keyOrClock;
+        if (!this.clocks.has(clock.key)) {
+          throw "Unknown clock '" + keyOrClock.key + "'. Has it been registered with 'addClock'?";
+        }
+      }
+
+      const previousClock = this.activeClock;
+      if (previousClock !== undefined) {
+        previousClock.off('tick', this.tick);
+      }
+
+      this.activeClock = clock;
+
+      /**
+       * The active clock has changed.
+       * @event clock
+       * @memberof module:openmct.TimeAPI~
+       * @property {Clock} clock The newly activated clock, or undefined
+       * if the system is no longer following a clock source
+       */
+      this.emit('clock', this.activeClock);
+      this.emit(TIME_CONTEXT_EVENTS.clockChanged, this.activeClock);
+
+      if (this.activeClock !== undefined) {
+        //set the mode or isRealtime will be false even though we're in clock mode
+        this.setMode(REALTIME_MODE_KEY);
+
+        this.clockOffsets(offsets);
+        this.activeClock.on('tick', this.tick);
+      }
+    } else if (arguments.length === 1) {
+      throw 'When setting the clock, clock offsets must also be provided';
+    }
+
+    return this.isRealTime() ? this.activeClock : undefined;
+  }
+
+  /**
+   * Update bounds based on provided time and current offsets
+   * @param {number} timestamp A time from which bounds will be calculated
+   * using current offsets.
+   */
+  tick(timestamp) {
+    // always emit the timestamp
+    this.emit('tick', timestamp);
+
+    if (this.mode === REALTIME_MODE_KEY) {
+      const newBounds = {
+        start: timestamp + this.offsets.start,
+        end: timestamp + this.offsets.end
+      };
+
+      this.boundsVal = newBounds;
+      // "bounds" will be deprecated in a future release
+      this.emit('bounds', this.boundsVal, true);
+      this.emit(TIME_CONTEXT_EVENTS.boundsChanged, this.boundsVal, true);
+    }
+  }
+
+  /**
+   * Get the timestamp of the current clock
+   * @returns {number} current timestamp of current clock regardless of mode
+   * @memberof module:openmct.TimeAPI#
+   * @method now
+   */
+
+  now() {
+    return this.activeClock.currentValue();
+  }
+
+  /**
+   * Get the time system of the TimeAPI.
+   * @returns {TimeSystem} The currently applied time system
+   * @memberof module:openmct.TimeAPI#
+   * @method getTimeSystem
+   */
+  getTimeSystem() {
+    return this.system;
+  }
+
+  /**
+   * Set the time system of the TimeAPI.
+   * @param {TimeSystem | string} timeSystemOrKey
+   * @param {module:openmct.TimeAPI~TimeConductorBounds} bounds
+   * @fires module:openmct.TimeAPI~timeSystem
+   * @returns {TimeSystem} The currently applied time system
+   * @memberof module:openmct.TimeAPI#
+   * @method setTimeSystem
+   */
+  setTimeSystem(timeSystemOrKey, bounds) {
+    if (timeSystemOrKey === undefined) {
+      throw 'Please provide a time system';
+    }
+
+    let timeSystem;
+
+    if (typeof timeSystemOrKey === 'string') {
+      timeSystem = this.timeSystems.get(timeSystemOrKey);
+
+      if (timeSystem === undefined) {
+        throw `Unknown time system ${timeSystemOrKey}. Has it been registered with 'addTimeSystem'?`;
+      }
+    } else if (typeof timeSystemOrKey === 'object') {
+      timeSystem = timeSystemOrKey;
+
+      if (!this.timeSystems.has(timeSystem.key)) {
+        throw `Unknown time system ${timeSystemOrKey.key}. Has it been registered with 'addTimeSystem'?`;
+      }
+    } else {
+      throw 'Attempt to set invalid time system in Time API. Please provide a previously registered time system object or key';
+    }
+
+    this.system = this.#copy(timeSystem);
+    /**
+     * The time system used by the time
+     * conductor has changed. A change in Time System will always be
+     * followed by a bounds event specifying new query bounds.
+     *
+     * @event module:openmct.TimeAPI~timeSystem
+     * @property {TimeSystem} The value of the currently applied
+     * Time System
+     * */
+    this.emit(TIME_CONTEXT_EVENTS.timeSystemChanged, this.#copy(this.system));
+    this.emit('timeSystem', this.#copy(this.system));
+
+    if (bounds) {
+      this.setBounds(bounds);
+    }
+  }
+
+  /**
+   * Get the start and end time of the time conductor. Basic validation
+   * of bounds is performed.
+   * @returns {module:openmct.TimeAPI~TimeConductorBounds}
+   * @memberof module:openmct.TimeAPI#
+   * @method bounds
+   */
+  getBounds() {
+    //Return a copy to prevent direct mutation of time conductor bounds.
+    return this.#copy(this.boundsVal);
+  }
+
+  /**
+   * Set the start and end time of the time conductor. Basic validation
+   * of bounds is performed.
+   *
+   * @param {module:openmct.TimeAPI~TimeConductorBounds} newBounds
+   * @throws {Error} Validation error
+   * @fires module:openmct.TimeAPI~bounds
+   * @returns {module:openmct.TimeAPI~TimeConductorBounds}
+   * @memberof module:openmct.TimeAPI#
+   * @method bounds
+   */
+  setBounds(newBounds) {
+    const validationResult = this.validateBounds(newBounds);
+    if (validationResult.valid !== true) {
+      throw new Error(validationResult.message);
+    }
+
+    //Create a copy to avoid direct mutation of conductor bounds
+    this.boundsVal = this.#copy(newBounds);
+    /**
+     * The start time, end time, or both have been updated.
+     * @event bounds
+     * @memberof module:openmct.TimeAPI~
+     * @property {TimeConductorBounds} bounds The newly updated bounds
+     * @property {boolean} [tick] `true` if the bounds update was due to
+     * a "tick" event (i.e. was an automatic update), false otherwise.
+     */
+    this.emit(TIME_CONTEXT_EVENTS.boundsChanged, this.boundsVal, false);
+    this.emit('bounds', this.boundsVal, false);
+  }
+
+  /**
+   * Get the active clock.
+   * @return {Clock} the currently active clock;
+   */
+  getClock() {
+    return this.activeClock;
+  }
+
+  /**
+   * Set the active clock. Tick source will be immediately subscribed to
+   * and the currently ticking will begin.
+   * Offsets from 'now', if provided, will be used to set realtime mode offsets
+   *
+   * @param {Clock || string} keyOrClock The clock to activate, or its key
+   * @fires module:openmct.TimeAPI~clock
+   * @return {Clock} the currently active clock;
+   */
+  setClock(keyOrClock) {
+    let clock;
+
+    if (typeof keyOrClock === 'string') {
+      clock = this.clocks.get(keyOrClock);
+      if (clock === undefined) {
+        throw `Unknown clock ${keyOrClock}. Has it been registered with 'addClock'?`;
+      }
+    } else if (typeof keyOrClock === 'object') {
+      clock = keyOrClock;
+      if (!this.clocks.has(clock.key)) {
+        throw `Unknown clock ${keyOrClock.key}. Has it been registered with 'addClock'?`;
+      }
+    }
+
+    const previousClock = this.activeClock;
+    if (previousClock) {
+      previousClock.off('tick', this.tick);
+    }
+
+    this.activeClock = clock;
+    this.activeClock.on('tick', this.tick);
+
+    /**
+     * The active clock has changed.
+     * @event clock
+     * @memberof module:openmct.TimeAPI~
+     * @property {Clock} clock The newly activated clock, or undefined
+     * if the system is no longer following a clock source
+     */
+    this.emit(TIME_CONTEXT_EVENTS.clockChanged, this.activeClock);
+    this.emit('clock', this.activeClock);
+  }
+
+  /**
+   * Get the current mode.
+   * @return {Mode} the current mode;
+   */
+  getMode() {
+    return this.mode;
+  }
+
+  /**
+   * Set the mode to either fixed or realtime.
+   *
+   * @param {Mode} mode The mode to activate
+   * @param {TimeBounds | ClockOffsets} offsetsOrBounds A time window of a fixed width
+   * @fires module:openmct.TimeAPI~clock
+   * @return {Mode} the currently active mode;
+   */
+  setMode(mode, offsetsOrBounds) {
+    if (!mode) {
+      return;
+    }
+
+    if (mode === MODES.realtime && this.activeClock === undefined) {
+      throw `Unknown clock. Has a clock been registered with 'addClock'?`;
+    }
+
+    if (mode !== this.mode) {
+      this.mode = mode;
+      /**
+       * The active mode has changed.
+       * @event modeChanged
+       * @memberof module:openmct.TimeAPI~
+       * @property {Mode} mode The newly activated mode
+       */
+      this.emit(TIME_CONTEXT_EVENTS.modeChanged, this.#copy(this.mode));
+    }
+
+    if (offsetsOrBounds !== undefined) {
+      if (this.isRealTime()) {
+        this.setClockOffsets(offsetsOrBounds);
+      } else {
+        this.setBounds(offsetsOrBounds);
+      }
+    }
+  }
+
+  /**
+   * Checks if this time context is in realtime mode or not.
+   * @returns {boolean} true if this context is in real-time mode, false if not
+   */
+  isRealTime() {
+    return this.mode === MODES.realtime;
+  }
+
+  /**
+   * Checks if this time context is in fixed mode or not.
+   * @returns {boolean} true if this context is in fixed mode, false if not
+   */
+  isFixed() {
+    return this.mode === MODES.fixed;
+  }
+
+  /**
+   * Get the currently applied clock offsets.
+   * @returns {ClockOffsets}
+   */
+  getClockOffsets() {
+    return this.offsets;
+  }
+
+  /**
+   * Set the currently applied clock offsets. If no parameter is provided,
+   * the current value will be returned. If provided, the new value will be
+   * used as the new clock offsets.
+   * @param {ClockOffsets} offsets
+   * @returns {ClockOffsets}
+   */
+  setClockOffsets(offsets) {
+    const validationResult = this.validateOffsets(offsets);
+    if (validationResult.valid !== true) {
+      throw new Error(validationResult.message);
+    }
+
+    this.offsets = this.#copy(offsets);
+
+    const currentValue = this.activeClock.currentValue();
+    const newBounds = {
+      start: currentValue + offsets.start,
+      end: currentValue + offsets.end
+    };
+
+    this.setBounds(newBounds);
+
+    /**
+     * Event that is triggered when clock offsets change.
+     * @event clockOffsets
+     * @memberof module:openmct.TimeAPI~
+     * @property {ClockOffsets} clockOffsets The newly activated clock
+     * offsets.
+     */
+    this.emit(TIME_CONTEXT_EVENTS.clockOffsetsChanged, this.#copy(offsets));
+  }
+
+  #warnMethodDeprecated(method, newMethod) {
+    const MAX_CALLS = 1; // Only warn once per unique method and newMethod combination
+
+    const key = `${method}.${newMethod}`;
+    const currentWarnCount = this.warnCounts[key] || 0;
+
+    if (currentWarnCount >= MAX_CALLS) {
+      return; // Don't warn if already warned once
+    }
+
+    this.warnCounts[key] = currentWarnCount + 1;
+
+    let message = `[DEPRECATION WARNING]: The ${method} API method is deprecated and will be removed in a future version of Open MCT.`;
+
+    if (newMethod) {
+      message += ` Please use the ${newMethod} API method(s) instead.`;
+    }
+
+    // TODO: add docs and point to them in warning.
+    //  For more information and migration instructions, visit [link to documentation or migration guide].
+
+    console.warn(message);
+  }
+
+  #copy(object) {
+    return JSON.parse(JSON.stringify(object));
+  }
+}
+
+export default TimeContext;
+
+/**
+@typedef {{start: number, end: number}} Bounds
+*/
diff --git a/src/api/time/constants.js b/src/api/time/constants.js
new file mode 100644
index 00000000000..85182a574b7
--- /dev/null
+++ b/src/api/time/constants.js
@@ -0,0 +1,22 @@
+export const TIME_CONTEXT_EVENTS = {
+  //old API events - to be deprecated
+  bounds: 'bounds',
+  clock: 'clock',
+  timeSystem: 'timeSystem',
+  clockOffsets: 'clockOffsets',
+  //new API events
+  tick: 'tick',
+  modeChanged: 'modeChanged',
+  boundsChanged: 'boundsChanged',
+  clockChanged: 'clockChanged',
+  timeSystemChanged: 'timeSystemChanged',
+  clockOffsetsChanged: 'clockOffsetsChanged'
+};
+
+export const REALTIME_MODE_KEY = 'realtime';
+export const FIXED_MODE_KEY = 'fixed';
+
+export const MODES = {
+  [FIXED_MODE_KEY]: FIXED_MODE_KEY,
+  [REALTIME_MODE_KEY]: REALTIME_MODE_KEY
+};
diff --git a/src/api/time/independentTimeAPISpec.js b/src/api/time/independentTimeAPISpec.js
new file mode 100644
index 00000000000..e66f5fabf88
--- /dev/null
+++ b/src/api/time/independentTimeAPISpec.js
@@ -0,0 +1,262 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createOpenMct } from 'utils/testing';
+
+import TimeAPI from './TimeAPI.js';
+describe('The Independent Time API', function () {
+  let api;
+  let domainObjectKey;
+  let clockKey;
+  let clock;
+  let bounds;
+  let independentBounds;
+  let eventListener;
+  let openmct;
+
+  beforeEach(function () {
+    openmct = createOpenMct();
+    api = new TimeAPI(openmct);
+    clockKey = 'someClockKey';
+    clock = jasmine.createSpyObj('clock', ['on', 'off', 'currentValue']);
+    clock.currentValue.and.returnValue(100);
+    clock.key = clockKey;
+    api.addClock(clock);
+    domainObjectKey = 'test-key';
+    bounds = {
+      start: 0,
+      end: 1
+    };
+    api.bounds(bounds);
+    independentBounds = {
+      start: 10,
+      end: 11
+    };
+    eventListener = jasmine.createSpy('eventListener');
+  });
+
+  it('Creates an independent time context', () => {
+    let timeContext = api.getContextForView([
+      {
+        identifier: {
+          namespace: '',
+          key: domainObjectKey
+        }
+      }
+    ]);
+    let destroyTimeContext = api.addIndependentContext(domainObjectKey, independentBounds);
+    expect(timeContext.bounds()).toEqual(independentBounds);
+    destroyTimeContext();
+  });
+
+  it('Gets an independent time context given the objectPath', () => {
+    let timeContext = api.getContextForView([
+      { identifier: domainObjectKey },
+      {
+        identifier: {
+          namespace: '',
+          key: 'blah'
+        }
+      }
+    ]);
+    let destroyTimeContext = api.addIndependentContext(domainObjectKey, independentBounds);
+    expect(timeContext.bounds()).toEqual(independentBounds);
+    destroyTimeContext();
+  });
+
+  it('defaults to the global time context given the objectPath', () => {
+    let timeContext = api.getContextForView([
+      {
+        identifier: {
+          namespace: '',
+          key: 'blah'
+        }
+      }
+    ]);
+    expect(timeContext.bounds()).toEqual(bounds);
+  });
+
+  it('follows a parent time context given the objectPath', () => {
+    api.getContextForView([
+      {
+        identifier: {
+          namespace: '',
+          key: 'blah'
+        }
+      }
+    ]);
+    let destroyTimeContext = api.addIndependentContext('blah', independentBounds);
+    let timeContext = api.getContextForView([
+      {
+        identifier: {
+          namespace: '',
+          key: domainObjectKey
+        }
+      },
+      {
+        identifier: {
+          namespace: '',
+          key: 'blah'
+        }
+      }
+    ]);
+    expect(timeContext.bounds()).toEqual(independentBounds);
+    destroyTimeContext();
+    expect(timeContext.bounds()).toEqual(bounds);
+  });
+
+  it("uses an object's independent time context if the parent doesn't have one", () => {
+    const domainObjectKey2 = `${domainObjectKey}-2`;
+    const domainObjectKey3 = `${domainObjectKey}-3`;
+    let timeContext = api.getContextForView([
+      {
+        identifier: {
+          namespace: '',
+          key: domainObjectKey
+        }
+      }
+    ]);
+    let timeContext2 = api.getContextForView([
+      {
+        identifier: {
+          namespace: '',
+          key: domainObjectKey2
+        }
+      }
+    ]);
+    let timeContext3 = api.getContextForView([
+      {
+        identifier: {
+          namespace: '',
+          key: domainObjectKey3
+        }
+      }
+    ]);
+    // all bounds follow global time context
+    expect(timeContext.bounds()).toEqual(bounds);
+    expect(timeContext2.bounds()).toEqual(bounds);
+    expect(timeContext3.bounds()).toEqual(bounds);
+    // only first item has own context
+    let destroyTimeContext = api.addIndependentContext(domainObjectKey, independentBounds);
+    expect(timeContext.bounds()).toEqual(independentBounds);
+    expect(timeContext2.bounds()).toEqual(bounds);
+    expect(timeContext3.bounds()).toEqual(bounds);
+    // first and second item have own context
+    let destroyTimeContext2 = api.addIndependentContext(domainObjectKey2, independentBounds);
+    expect(timeContext.bounds()).toEqual(independentBounds);
+    expect(timeContext2.bounds()).toEqual(independentBounds);
+    expect(timeContext3.bounds()).toEqual(bounds);
+    // all items have own time context
+    let destroyTimeContext3 = api.addIndependentContext(domainObjectKey3, independentBounds);
+    expect(timeContext.bounds()).toEqual(independentBounds);
+    expect(timeContext2.bounds()).toEqual(independentBounds);
+    expect(timeContext3.bounds()).toEqual(independentBounds);
+    //remove own contexts one at a time - should revert to global time context
+    destroyTimeContext();
+    expect(timeContext.bounds()).toEqual(bounds);
+    expect(timeContext2.bounds()).toEqual(independentBounds);
+    expect(timeContext3.bounds()).toEqual(independentBounds);
+    destroyTimeContext2();
+    expect(timeContext.bounds()).toEqual(bounds);
+    expect(timeContext2.bounds()).toEqual(bounds);
+    expect(timeContext3.bounds()).toEqual(independentBounds);
+    destroyTimeContext3();
+    expect(timeContext.bounds()).toEqual(bounds);
+    expect(timeContext2.bounds()).toEqual(bounds);
+    expect(timeContext3.bounds()).toEqual(bounds);
+  });
+
+  it('Allows setting of valid bounds', function () {
+    bounds = {
+      start: 0,
+      end: 1
+    };
+    let timeContext = api.getContextForView([{ identifier: domainObjectKey }]);
+    let destroyTimeContext = api.addIndependentContext(domainObjectKey, independentBounds);
+    expect(timeContext.bounds()).not.toEqual(bounds);
+    timeContext.bounds(bounds);
+    expect(timeContext.bounds()).toEqual(bounds);
+    destroyTimeContext();
+  });
+
+  it('Disallows setting of invalid bounds', function () {
+    bounds = {
+      start: 1,
+      end: 0
+    };
+
+    let timeContext = api.getContextForView([{ identifier: domainObjectKey }]);
+    let destroyTimeContext = api.addIndependentContext(domainObjectKey, independentBounds);
+    expect(timeContext.bounds()).not.toBe(bounds);
+
+    expect(timeContext.bounds.bind(timeContext, bounds)).toThrow();
+    expect(timeContext.bounds()).not.toEqual(bounds);
+
+    bounds = { start: 1 };
+    expect(timeContext.bounds()).not.toEqual(bounds);
+    expect(timeContext.bounds.bind(timeContext, bounds)).toThrow();
+    expect(timeContext.bounds()).not.toEqual(bounds);
+    destroyTimeContext();
+  });
+
+  it('Emits an event when bounds change', function () {
+    let timeContext = api.getContextForView([{ identifier: domainObjectKey }]);
+    let destroyTimeContext = api.addIndependentContext(domainObjectKey, independentBounds);
+    expect(eventListener).not.toHaveBeenCalled();
+    timeContext.on('bounds', eventListener);
+    timeContext.bounds(bounds);
+    expect(eventListener).toHaveBeenCalledWith(bounds, false);
+    destroyTimeContext();
+  });
+
+  it('Emits an event when bounds change on the global context', function () {
+    let timeContext = api.getContextForView([{ identifier: domainObjectKey }]);
+    expect(eventListener).not.toHaveBeenCalled();
+    timeContext.on('bounds', eventListener);
+    timeContext.bounds(bounds);
+    expect(eventListener).toHaveBeenCalledWith(bounds, false);
+  });
+
+  describe(' when using real time clock', function () {
+    const mockOffsets = {
+      start: 10,
+      end: 11
+    };
+
+    it('Emits an event when bounds change based on current value', function () {
+      let timeContext = api.getContextForView([{ identifier: domainObjectKey }]);
+      let destroyTimeContext = api.addIndependentContext(domainObjectKey, independentBounds);
+      expect(eventListener).not.toHaveBeenCalled();
+      timeContext.clock('someClockKey', mockOffsets);
+      timeContext.on('bounds', eventListener);
+      timeContext.tick(10);
+      expect(eventListener).toHaveBeenCalledWith(
+        {
+          start: 20,
+          end: 21
+        },
+        true
+      );
+      destroyTimeContext();
+    });
+  });
+});
diff --git a/src/api/tooltips/ToolTip.js b/src/api/tooltips/ToolTip.js
new file mode 100644
index 00000000000..5162d21c39d
--- /dev/null
+++ b/src/api/tooltips/ToolTip.js
@@ -0,0 +1,73 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import EventEmitter from 'EventEmitter';
+import mount from 'utils/mount';
+
+import TooltipComponent from './components/TooltipComponent.vue';
+
+class Tooltip extends EventEmitter {
+  constructor(
+    { toolTipText, toolTipLocation, parentElement } = {
+      tooltipText: '',
+      toolTipLocation: 'below',
+      parentElement: null
+    }
+  ) {
+    super();
+
+    const { vNode, destroy } = mount({
+      components: {
+        TooltipComponent: TooltipComponent
+      },
+      provide: {
+        toolTipText,
+        toolTipLocation,
+        parentElement
+      },
+      template: '<tooltip-component toolTipText="toolTipText"></tooltip-component>'
+    });
+
+    this.component = vNode.componentInstance;
+    this._destroy = destroy;
+
+    this.isActive = null;
+  }
+
+  destroy() {
+    if (!this.isActive) {
+      return;
+    }
+    this._destroy();
+    this.isActive = false;
+  }
+
+  /**
+   * @private
+   **/
+  show() {
+    document.body.appendChild(this.component.$el);
+    this.isActive = true;
+  }
+}
+
+export default Tooltip;
diff --git a/src/api/tooltips/ToolTipAPI.js b/src/api/tooltips/ToolTipAPI.js
new file mode 100644
index 00000000000..32d147800aa
--- /dev/null
+++ b/src/api/tooltips/ToolTipAPI.js
@@ -0,0 +1,99 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import Tooltip from './ToolTip.js';
+
+/**
+ * @readonly
+ * @enum {String} TooltipLocation
+ * @property {String} ABOVE The string for locating tooltips above an element
+ * @property {String} BELOW The string for locating tooltips below an element
+ * @property {String} RIGHT The pixel-spatial annotation type
+ * @property {String} LEFT The temporal annotation type
+ * @property {String} CENTER The plot-spatial annotation type
+ */
+const TOOLTIP_LOCATIONS = Object.freeze({
+  ABOVE: 'above',
+  BELOW: 'below',
+  RIGHT: 'right',
+  LEFT: 'left',
+  CENTER: 'center'
+});
+
+/**
+ * The TooltipAPI is responsible for adding custom tooltips to
+ * the desired elements on the screen
+ *
+ * @memberof api/tooltips
+ * @constructor
+ */
+
+class TooltipAPI {
+  constructor() {
+    this.activeToolTips = [];
+    this.TOOLTIP_LOCATIONS = TOOLTIP_LOCATIONS;
+  }
+
+  /**
+   * @private for platform-internal use
+   */
+  showTooltip(tooltip) {
+    this.removeAllTooltips();
+    this.activeToolTips.push(tooltip);
+    tooltip.show();
+  }
+
+  /**
+   * API method to allow for removing all tooltips
+   */
+  removeAllTooltips() {
+    if (!this.activeToolTips?.length) {
+      return;
+    }
+    for (let i = this.activeToolTips.length - 1; i > -1; i--) {
+      this.activeToolTips[i].destroy();
+      this.activeToolTips.splice(i, 1);
+    }
+  }
+
+  /**
+   * A description of option properties that can be passed into the tooltip
+   * @typedef {Object} TooltipOptions
+   * @property {string} tooltipText text to show in the tooltip
+   * @property {TOOLTIP_LOCATIONS} tooltipLocation location to show the tooltip relative to the parentElement
+   * @property {HTMLElement} parentElement reference to the DOM node we're adding the tooltip to
+   */
+
+  /**
+   * Tooltips take an options object that consists of the string, tooltipLocation, and parentElement
+   * @param {TooltipOptions} options
+   */
+  tooltip(options) {
+    let tooltip = new Tooltip(options);
+
+    this.showTooltip(tooltip);
+
+    return tooltip;
+  }
+}
+
+export default TooltipAPI;
diff --git a/src/api/tooltips/components/TooltipComponent.vue b/src/api/tooltips/components/TooltipComponent.vue
new file mode 100644
index 00000000000..48c1c74dcf5
--- /dev/null
+++ b/src/api/tooltips/components/TooltipComponent.vue
@@ -0,0 +1,61 @@
+<!--
+Open MCT, Copyright (c) 2014-2024, United States Government
+as represented by the Administrator of the National Aeronautics and Space
+Administration. All rights reserved.
+
+Open MCT is licensed under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations
+under the License.
+
+Open MCT includes source code licensed under additional open source
+licenses. See the Open Source Licenses file (LICENSES.md) included with
+this source code distribution or the Licensing information page available
+at runtime from the About dialog for additional information.
+-->
+<template>
+  <div ref="tooltip-wrapper" class="c-menu c-tooltip-wrapper" :style="toolTipLocationStyle">
+    <div class="c-tooltip">
+      {{ toolTipText }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  inject: ['toolTipText', 'toolTipLocation', 'parentElement'],
+  computed: {
+    toolTipCoordinates() {
+      return this.parentElement.getBoundingClientRect();
+    },
+    toolTipLocationStyle() {
+      const { top, left, height, width } = this.toolTipCoordinates;
+      let toolTipLocationStyle = {};
+
+      if (this.toolTipLocation === 'above') {
+        toolTipLocationStyle = { top: `${top - 5}px`, left: `${left}px` };
+      }
+      if (this.toolTipLocation === 'below') {
+        toolTipLocationStyle = { top: `${top + height}px`, left: `${left}px` };
+      }
+      if (this.toolTipLocation === 'right') {
+        toolTipLocationStyle = { top: `${top}px`, left: `${left + width}px` };
+      }
+      if (this.toolTipLocation === 'left') {
+        toolTipLocationStyle = { top: `${top}px`, left: `${left - width}px` };
+      }
+      if (this.toolTipLocation === 'center') {
+        toolTipLocationStyle = { top: `${top + height / 2}px`, left: `${left + width / 2}px` };
+      }
+
+      return toolTipLocationStyle;
+    }
+  }
+};
+</script>
diff --git a/src/api/tooltips/components/tooltip-component.scss b/src/api/tooltips/components/tooltip-component.scss
new file mode 100644
index 00000000000..fa9a57bd004
--- /dev/null
+++ b/src/api/tooltips/components/tooltip-component.scss
@@ -0,0 +1,11 @@
+.c-tooltip-wrapper {
+  max-width: 200px;
+  height: auto;
+  width: auto;
+  padding: $interiorMargin;
+  overflow-wrap: break-word;
+}
+
+.c-tooltip {
+  font-style: italic;
+}
diff --git a/src/api/tooltips/tooltipMixins.js b/src/api/tooltips/tooltipMixins.js
new file mode 100644
index 00000000000..5833d4c6fae
--- /dev/null
+++ b/src/api/tooltips/tooltipMixins.js
@@ -0,0 +1,72 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+const tooltipHelpers = {
+  methods: {
+    async getTelemetryPathString(telemetryIdentifier) {
+      let telemetryPathString = '';
+      if (!this.domainObject?.identifier) {
+        return;
+      }
+      const telemetryPath = await this.openmct.objects.getTelemetryPath(
+        this.domainObject.identifier,
+        telemetryIdentifier
+      );
+      if (telemetryPath.length) {
+        telemetryPathString = telemetryPath.join(' / ');
+      }
+      return telemetryPathString;
+    },
+    async getObjectPath(objectIdentifier) {
+      if (!objectIdentifier && !this.domainObject) {
+        return;
+      }
+      const domainObjectIdentifier = objectIdentifier || this.domainObject.identifier;
+      const objectPathList = await this.openmct.objects.getOriginalPath(domainObjectIdentifier);
+      objectPathList.pop();
+      return objectPathList
+        .map((pathItem) => pathItem.name)
+        .reverse()
+        .join(' / ');
+    },
+    buildToolTip(tooltipText, tooltipLocation, elementRef) {
+      if (!tooltipText || tooltipText.length < 1) {
+        return;
+      }
+      let parentElement = this.$refs[elementRef];
+      if (Array.isArray(parentElement)) {
+        parentElement = parentElement[0];
+      }
+      this.tooltip = this.openmct.tooltips.tooltip({
+        toolTipText: tooltipText,
+        toolTipLocation: tooltipLocation,
+        parentElement: parentElement
+      });
+    },
+    hideToolTip() {
+      this.tooltip?.destroy();
+      this.tooltip = null;
+    }
+  }
+};
+
+export default tooltipHelpers;
diff --git a/src/api/types/Type.js b/src/api/types/Type.js
index 55d4e7b12c1..4f74d2bbb99 100644
--- a/src/api/types/Type.js
+++ b/src/api/types/Type.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,82 +20,102 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(function () {
-
-    /**
-     * A Type describes a kind of domain object that may appear or be
-     * created within Open MCT.
-     *
-     * @param {module:opemct.TypeRegistry~TypeDefinition} definition
-     * @class Type
-     * @memberof module:openmct
-     */
-    function Type(definition) {
-        this.definition = definition;
-        if (definition.key) {
-            this.key = definition.key;
-        }
+/**
+ * A Type describes a kind of domain object that may appear or be
+ * created within Open MCT.
+ *
+ * @param {module:openmct.TypeRegistry~TypeDefinition} definition
+ * @class Type
+ * @memberof module:openmct
+ */
+export default class Type {
+  constructor(definition) {
+    this.definition = definition;
+    if (definition.key) {
+      this.key = definition.key;
     }
+  }
+  /**
+   * Create a type definition from a legacy definition.
+   */
+  static definitionFromLegacyDefinition(legacyDefinition) {
+    let definition = {};
+    definition.name = legacyDefinition.name;
+    definition.cssClass = legacyDefinition.cssClass;
+    definition.description = legacyDefinition.description;
+    definition.form = legacyDefinition.properties;
+    if (legacyDefinition.telemetry !== undefined) {
+      let telemetry = {
+        values: []
+      };
 
-    /**
-     * Check if a domain object is an instance of this type.
-     * @param domainObject
-     * @returns {boolean} true if the domain object is of this type
-     * @memberof module:openmct.Type#
-     * @method check
-     */
-    Type.prototype.check = function (domainObject) {
-        // Depends on assignment from MCT.
-        return domainObject.type === this.key;
-    };
+      if (legacyDefinition.telemetry.domains !== undefined) {
+        legacyDefinition.telemetry.domains.forEach((domain, index) => {
+          domain.hints = {
+            domain: index
+          };
+          telemetry.values.push(domain);
+        });
+      }
 
-    /**
-     * Get a definition for this type that can be registered using the
-     * legacy bundle format.
-     * @private
-     */
-    Type.prototype.toLegacyDefinition = function () {
-        const def = {};
-        def.name = this.definition.name;
-        def.cssClass = this.definition.cssClass;
-        def.description = this.definition.description;
-        def.properties = this.definition.form;
+      if (legacyDefinition.telemetry.ranges !== undefined) {
+        legacyDefinition.telemetry.ranges.forEach((range, index) => {
+          range.hints = {
+            range: index
+          };
+          telemetry.values.push(range);
+        });
+      }
 
-        if (this.definition.initialize) {
-            def.model = {};
-            this.definition.initialize(def.model);
-        }
+      definition.telemetry = telemetry;
+    }
 
-        if (this.definition.creatable) {
-            def.features = ['creation'];
+    if (legacyDefinition.model) {
+      definition.initialize = function (model) {
+        for (let [k, v] of Object.entries(legacyDefinition.model)) {
+          model[k] = JSON.parse(JSON.stringify(v));
         }
+      };
+    }
 
-        return def;
-    };
+    if (legacyDefinition.features && legacyDefinition.features.includes('creation')) {
+      definition.creatable = true;
+    }
 
-    /**
-     * Create a type definition from a legacy definition.
-     */
-    Type.definitionFromLegacyDefinition = function (legacyDefinition) {
-        let definition = {};
-        definition.name = legacyDefinition.name;
-        definition.cssClass = legacyDefinition.cssClass;
-        definition.description = legacyDefinition.description;
-        definition.form = legacyDefinition.properties;
-        if (legacyDefinition.model) {
-            definition.initialize = function (model) {
-                for (let [k, v] of Object.entries(legacyDefinition.model)) {
-                    model[k] = JSON.parse(JSON.stringify(v));
-                }
-            };
-        }
+    return definition;
+  }
+  /**
+   * Check if a domain object is an instance of this type.
+   * @param domainObject
+   * @returns {boolean} true if the domain object is of this type
+   * @memberof module:openmct.Type#
+   * @method check
+   */
+  check(domainObject) {
+    // Depends on assignment from MCT.
+    return domainObject.type === this.key;
+  }
+  /**
+   * Get a definition for this type that can be registered using the
+   * legacy bundle format.
+   * @private
+   */
+  toLegacyDefinition() {
+    const def = {};
+    def.name = this.definition.name;
+    def.cssClass = this.definition.cssClass;
+    def.description = this.definition.description;
+    def.properties = this.definition.form;
 
-        if (legacyDefinition.features && legacyDefinition.features.includes("creation")) {
-            definition.creatable = true;
-        }
+    if (this.definition.initialize) {
+      def.model = {};
+      this.definition.initialize(def.model);
+    }
 
-        return definition;
-    };
+    if (this.definition.creatable) {
+      def.features = ['creation'];
+    }
 
-    return Type;
-});
+    return def;
+  }
+}
diff --git a/src/api/types/TypeRegistry.js b/src/api/types/TypeRegistry.js
index f7e5feca914..7a3786e00bf 100644
--- a/src/api/types/TypeRegistry.js
+++ b/src/api/types/TypeRegistry.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,93 +19,87 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+import Type from './Type.js';
 
-define(['./Type'], function (Type) {
-    /**
-     * @typedef TypeDefinition
-     * @memberof module:openmct.TypeRegistry~
-     * @property {string} label the name for this type of object
-     * @property {string} description a longer-form description of this type
-     * @property {function (object)} [initialize] a function which initializes
-     *           the model for new domain objects of this type
-     * @property {boolean} [creatable] true if users should be allowed to
-     *           create this type (default: false)
-     * @property {string} [cssClass] the CSS class to apply for icons
-     */
-
-    /**
-     * A TypeRegistry maintains the definitions for different types
-     * that domain objects may have.
-     * @interface TypeRegistry
-     * @memberof module:openmct
-     */
-    function TypeRegistry() {
-        this.types = {};
-    }
-
-    /**
-     * Register a new object type.
-     *
-     * @param {string} typeKey a string identifier for this type
-     * @param {module:openmct.Type} type the type to add
-     * @method addType
-     * @memberof module:openmct.TypeRegistry#
-     */
-    TypeRegistry.prototype.addType = function (typeKey, typeDef) {
-        this.standardizeType(typeDef);
-        this.types[typeKey] = new Type(typeDef);
-    };
-
-    /**
-     * Takes a typeDef, standardizes it, and logs warnings about unsupported
-     * usage.
-     * @private
-     */
-    TypeRegistry.prototype.standardizeType = function (typeDef) {
-        if (Object.prototype.hasOwnProperty.call(typeDef, 'label')) {
-            console.warn(
-                'DEPRECATION WARNING typeDef: ' + typeDef.label + '.  '
-                + '`label` is deprecated in type definitions.  Please use '
-                + '`name` instead.  This will cause errors in a future version '
-                + 'of Open MCT.  For more information, see '
-                + 'https://github.com/nasa/openmct/issues/1568');
-            if (!typeDef.name) {
-                typeDef.name = typeDef.label;
-            }
-
-            delete typeDef.label;
-        }
-    };
-
-    /**
-     * List keys for all registered types.
-     * @method listKeys
-     * @memberof module:openmct.TypeRegistry#
-     * @returns {string[]} all registered type keys
-     */
-    TypeRegistry.prototype.listKeys = function () {
-        return Object.keys(this.types);
-    };
+const UNKNOWN_TYPE = new Type({
+  key: 'unknown',
+  name: 'Unknown Type',
+  cssClass: 'icon-object-unknown'
+});
 
-    /**
-     * Retrieve a registered type by its key.
-     * @method get
-     * @param {string} typeKey the key for this type
-     * @memberof module:openmct.TypeRegistry#
-     * @returns {module:openmct.Type} the registered type
-     */
-    TypeRegistry.prototype.get = function (typeKey) {
-        return this.types[typeKey];
-    };
+/**
+ * @typedef TypeDefinition
+ * @memberof module:openmct.TypeRegistry~
+ * @property {string} label the name for this type of object
+ * @property {string} description a longer-form description of this type
+ * @property {function (object)} [initialize] a function which initializes
+ *           the model for new domain objects of this type
+ * @property {boolean} [creatable] true if users should be allowed to
+ *           create this type (default: false)
+ * @property {string} [cssClass] the CSS class to apply for icons
+ */
 
-    TypeRegistry.prototype.importLegacyTypes = function (types) {
-        types.filter((t) => !this.get(t.key))
-            .forEach((type) => {
-                let def = Type.definitionFromLegacyDefinition(type);
-                this.addType(type.key, def);
-            });
-    };
-
-    return TypeRegistry;
-});
+/**
+ * A TypeRegistry maintains the definitions for different types
+ * that domain objects may have.
+ * @interface TypeRegistry
+ * @memberof module:openmct
+ */
+export default class TypeRegistry {
+  constructor() {
+    this.types = {};
+  }
+  /**
+   * Register a new object type.
+   *
+   * @param {string} typeKey a string identifier for this type
+   * @param {module:openmct.Type} type the type to add
+   * @method addType
+   * @memberof module:openmct.TypeRegistry#
+   */
+  addType(typeKey, typeDef) {
+    this.standardizeType(typeDef);
+    this.types[typeKey] = new Type(typeDef);
+  }
+  /**
+   * Takes a typeDef, standardizes it, and logs warnings about unsupported
+   * usage.
+   * @private
+   */
+  standardizeType(typeDef) {
+    if (Object.prototype.hasOwnProperty.call(typeDef, 'label')) {
+      if (!typeDef.name) {
+        typeDef.name = typeDef.label;
+      }
 
+      delete typeDef.label;
+    }
+  }
+  /**
+   * List keys for all registered types.
+   * @method listKeys
+   * @memberof module:openmct.TypeRegistry#
+   * @returns {string[]} all registered type keys
+   */
+  listKeys() {
+    return Object.keys(this.types);
+  }
+  /**
+   * Retrieve a registered type by its key.
+   * @method get
+   * @param {string} typeKey the key for this type
+   * @memberof module:openmct.TypeRegistry#
+   * @returns {module:openmct.Type} the registered type
+   */
+  get(typeKey) {
+    return this.types[typeKey] || UNKNOWN_TYPE;
+  }
+  importLegacyTypes(types) {
+    types
+      .filter((t) => this.get(t.key) === UNKNOWN_TYPE)
+      .forEach((type) => {
+        let def = Type.definitionFromLegacyDefinition(type);
+        this.addType(type.key, def);
+      });
+  }
+}
diff --git a/src/api/types/TypeRegistrySpec.js b/src/api/types/TypeRegistrySpec.js
index e7148bd29a9..8e8d9afdaef 100644
--- a/src/api/types/TypeRegistrySpec.js
+++ b/src/api/types/TypeRegistrySpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,36 +20,36 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(['./TypeRegistry', './Type'], function (TypeRegistry, Type) {
-    describe('The Type API', function () {
-        let typeRegistryInstance;
+import TypeRegistry from './TypeRegistry.js';
 
-        beforeEach(function () {
-            typeRegistryInstance = new TypeRegistry ();
-            typeRegistryInstance.addType('testType', {
-                name: 'Test Type',
-                description: 'This is a test type.',
-                creatable: true
-            });
-        });
+describe('The Type API', function () {
+  let typeRegistryInstance;
 
-        it('types can be standardized', function () {
-            typeRegistryInstance.addType('standardizationTestType', {
-                label: 'Test Type',
-                description: 'This is a test type.',
-                creatable: true
-            });
-            typeRegistryInstance.standardizeType(typeRegistryInstance.types.standardizationTestType);
-            expect(typeRegistryInstance.get('standardizationTestType').definition.label).toBeUndefined();
-            expect(typeRegistryInstance.get('standardizationTestType').definition.name).toBe('Test Type');
-        });
-
-        it('new types are registered successfully and can be retrieved', function () {
-            expect(typeRegistryInstance.get('testType').definition.name).toBe('Test Type');
-        });
+  beforeEach(function () {
+    typeRegistryInstance = new TypeRegistry();
+    typeRegistryInstance.addType('testType', {
+      name: 'Test Type',
+      description: 'This is a test type.',
+      creatable: true
+    });
+  });
 
-        it('type registry contains new keys', function () {
-            expect(typeRegistryInstance.listKeys ()).toContain('testType');
-        });
+  it('types can be standardized', function () {
+    typeRegistryInstance.addType('standardizationTestType', {
+      label: 'Test Type',
+      description: 'This is a test type.',
+      creatable: true
     });
+    typeRegistryInstance.standardizeType(typeRegistryInstance.types.standardizationTestType);
+    expect(typeRegistryInstance.get('standardizationTestType').definition.label).toBeUndefined();
+    expect(typeRegistryInstance.get('standardizationTestType').definition.name).toBe('Test Type');
+  });
+
+  it('new types are registered successfully and can be retrieved', function () {
+    expect(typeRegistryInstance.get('testType').definition.name).toBe('Test Type');
+  });
+
+  it('type registry contains new keys', function () {
+    expect(typeRegistryInstance.listKeys()).toContain('testType');
+  });
 });
diff --git a/src/api/user/ActiveRoleSynchronizer.js b/src/api/user/ActiveRoleSynchronizer.js
new file mode 100644
index 00000000000..e390fc0db35
--- /dev/null
+++ b/src/api/user/ActiveRoleSynchronizer.js
@@ -0,0 +1,37 @@
+import { ACTIVE_ROLE_BROADCAST_CHANNEL_NAME } from './constants.js';
+
+class ActiveRoleSynchronizer {
+  #roleChannel;
+
+  constructor(openmct) {
+    this.openmct = openmct;
+    this.#roleChannel = new BroadcastChannel(ACTIVE_ROLE_BROADCAST_CHANNEL_NAME);
+    this.setActiveRoleFromChannelMessage = this.setActiveRoleFromChannelMessage.bind(this);
+
+    this.subscribeToRoleChanges(this.setActiveRoleFromChannelMessage);
+  }
+  subscribeToRoleChanges(callback) {
+    this.#roleChannel.addEventListener('message', callback);
+  }
+  unsubscribeFromRoleChanges(callback) {
+    this.#roleChannel.removeEventListener('message', callback);
+  }
+
+  setActiveRoleFromChannelMessage(event) {
+    const role = event.data;
+    this.openmct.user.setActiveRole(role);
+  }
+  broadcastNewRole(role) {
+    if (!this.#roleChannel.name) {
+      return false;
+    }
+
+    this.#roleChannel.postMessage(role);
+  }
+  destroy() {
+    this.unsubscribeFromRoleChanges(this.setActiveRoleFromChannelMessage);
+    this.#roleChannel.close();
+  }
+}
+
+export default ActiveRoleSynchronizer;
diff --git a/src/api/user/StatusAPI.js b/src/api/user/StatusAPI.js
new file mode 100644
index 00000000000..3f8476608a3
--- /dev/null
+++ b/src/api/user/StatusAPI.js
@@ -0,0 +1,386 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import EventEmitter from 'EventEmitter';
+
+export default class StatusAPI extends EventEmitter {
+  #userAPI;
+  #openmct;
+
+  constructor(userAPI, openmct) {
+    super();
+    this.#userAPI = userAPI;
+    this.#openmct = openmct;
+
+    this.onProviderStatusChange = this.onProviderStatusChange.bind(this);
+    this.onProviderPollQuestionChange = this.onProviderPollQuestionChange.bind(this);
+    this.onMissionActionStatusChange = this.onMissionActionStatusChange.bind(this);
+    this.listenToStatusEvents = this.listenToStatusEvents.bind(this);
+
+    this.#openmct.once('destroy', () => {
+      const provider = this.#userAPI.getProvider();
+
+      if (typeof provider?.off === 'function') {
+        provider.off('statusChange', this.onProviderStatusChange);
+        provider.off('pollQuestionChange', this.onProviderPollQuestionChange);
+        provider.off('missionActionStatusChange', this.onMissionActionStatusChange);
+      }
+    });
+
+    this.#userAPI.on('providerAdded', this.listenToStatusEvents);
+  }
+
+  /**
+   * Fetch the currently defined operator status poll question. When presented with a status poll question, all operators will reply with their current status.
+   * @returns {Promise<PollQuestion>}
+   */
+  getPollQuestion() {
+    const provider = this.#userAPI.getProvider();
+
+    if (provider.getPollQuestion) {
+      return provider.getPollQuestion();
+    } else {
+      this.#userAPI.error('User provider does not support polling questions');
+    }
+  }
+
+  /**
+   * Set a poll question for operators to respond to. When presented with a status poll question, all operators will reply with their current status.
+   * @param {String} questionText - The text of the question
+   * @returns {Promise<Boolean>} true if operation was successful, otherwise false.
+   */
+  async setPollQuestion(questionText) {
+    const canSetPollQuestion = await this.canSetPollQuestion();
+
+    if (canSetPollQuestion) {
+      const provider = this.#userAPI.getProvider();
+
+      const result = await provider.setPollQuestion(questionText);
+
+      try {
+        await this.resetAllStatuses();
+      } catch (error) {
+        console.warn('Poll question set but unable to clear operator statuses.');
+        console.error(error);
+      }
+
+      return result;
+    } else {
+      this.#userAPI.error('User provider does not support setting polling question');
+    }
+  }
+
+  /**
+   * Can the currently logged in user set the operator status poll question.
+   * @returns {Promise<Boolean>}
+   */
+  canSetPollQuestion() {
+    const provider = this.#userAPI.getProvider();
+
+    if (provider.canSetPollQuestion) {
+      return provider.canSetPollQuestion();
+    } else {
+      return Promise.resolve(false);
+    }
+  }
+
+  /**
+   * Can the currently logged in user set the mission status.
+   * @returns {Promise<Boolean>} true if the currently logged in user can set the mission status, false otherwise.
+   */
+  canSetMissionStatus() {
+    const provider = this.#userAPI.getProvider();
+
+    if (provider.canSetMissionStatus) {
+      return provider.canSetMissionStatus();
+    } else {
+      return Promise.resolve(false);
+    }
+  }
+
+  /**
+   * Fetch the current status for the given mission action
+   * @param {MissionAction} action
+   * @returns {string}
+   */
+  getStatusForMissionAction(action) {
+    const provider = this.#userAPI.getProvider();
+
+    if (provider.getStatusForMissionAction) {
+      return provider.getStatusForMissionAction(action);
+    } else {
+      this.#userAPI.error('User provider does not support getting mission action status');
+    }
+  }
+
+  /**
+   * Fetch the list of possible mission status options (GO, NO-GO, etc.)
+   * @returns {Promise<MissionStatusOption[]>} the complete list of possible mission statuses
+   */
+  async getPossibleMissionActionStatuses() {
+    const provider = this.#userAPI.getProvider();
+
+    if (provider.getPossibleMissionActionStatuses) {
+      const possibleOptions = await provider.getPossibleMissionActionStatuses();
+
+      return possibleOptions;
+    } else {
+      this.#userAPI.error('User provider does not support mission status options');
+    }
+  }
+
+  /**
+   * Fetch the list of possible mission actions
+   * @returns {Promise<string[]>} the list of possible mission actions
+   */
+  async getPossibleMissionActions() {
+    const provider = this.#userAPI.getProvider();
+
+    if (provider.getPossibleMissionActions) {
+      const possibleActions = await provider.getPossibleMissionActions();
+
+      return possibleActions;
+    } else {
+      this.#userAPI.error('User provider does not support mission statuses');
+    }
+  }
+
+  /**
+   * @returns {Promise<Array<Status>>} the complete list of possible states that an operator can reply to a poll question with.
+   */
+  async getPossibleStatuses() {
+    const provider = this.#userAPI.getProvider();
+
+    if (provider.getPossibleStatuses) {
+      const possibleStatuses = (await provider.getPossibleStatuses()) || [];
+
+      return possibleStatuses.map((status) => status);
+    } else {
+      this.#userAPI.error('User provider cannot provide statuses');
+    }
+  }
+
+  /**
+   * @param {import("./UserAPI").Role} role The role to fetch the current status for.
+   * @returns {Promise<Status>} the current status of the provided role
+   */
+  async getStatusForRole(role) {
+    const provider = this.#userAPI.getProvider();
+
+    if (provider.getStatusForRole) {
+      const status = await provider.getStatusForRole(role);
+
+      return status;
+    } else {
+      this.#userAPI.error('User provider does not support role status');
+    }
+  }
+
+  /**
+   * @param {import("./UserAPI").Role} role
+   * @returns {Promise<Boolean>} true if the configured UserProvider can provide status for the given role
+   * @see StatusUserProvider
+   */
+  canProvideStatusForRole(role) {
+    const provider = this.#userAPI.getProvider();
+
+    if (provider.canProvideStatusForRole) {
+      return Promise.resolve(provider.canProvideStatusForRole(role));
+    } else {
+      return Promise.resolve(false);
+    }
+  }
+
+  /**
+   * @param {import("./UserAPI").Role} role The role to set the status for.
+   * @param {Status} status The status to set for the provided role
+   * @returns {Promise<Boolean>} true if operation was successful, otherwise false.
+   */
+  setStatusForRole(status) {
+    const provider = this.#userAPI.getProvider();
+
+    if (provider.setStatusForRole) {
+      const activeRole = this.#userAPI.getActiveRole();
+      if (!provider.canProvideStatusForRole(activeRole)) {
+        return false;
+      }
+
+      return provider.setStatusForRole(activeRole, status);
+    } else {
+      this.#userAPI.error('User provider does not support setting role status');
+    }
+  }
+
+  /**
+   * @param {MissionAction} action
+   * @param {MissionStatusOption} status
+   * @returns {Promise<Boolean>} true if operation was successful, otherwise false.
+   */
+  setStatusForMissionAction(action, status) {
+    const provider = this.#userAPI.getProvider();
+
+    if (provider.setStatusForMissionAction) {
+      return provider.setStatusForMissionAction(action, status);
+    } else {
+      this.#userAPI.error('User provider does not support setting mission role status');
+    }
+  }
+
+  /**
+   * Resets the status of the provided role back to its default status.
+   * @param {import("./UserAPI").Role} role The role to set the status for.
+   * @returns {Promise<Boolean>} true if operation was successful, otherwise false.
+   */
+  async resetStatusForRole(role) {
+    const provider = this.#userAPI.getProvider();
+    const defaultStatus = await this.getDefaultStatusForRole(role);
+
+    if (provider.setStatusForRole) {
+      return provider.setStatusForRole(role, defaultStatus);
+    } else {
+      this.#userAPI.error('User provider does not support resetting role status');
+    }
+  }
+
+  /**
+   * Resets the status of all operators to their default status
+   * @returns {Promise<Boolean>} true if operation was successful, otherwise false.
+   */
+  async resetAllStatuses() {
+    const allStatusRoles = await this.getAllStatusRoles();
+
+    return Promise.all(allStatusRoles.map((role) => this.resetStatusForRole(role)));
+  }
+
+  /**
+   * The default status. This is the status that will be used before the user has selected any status.
+   * @param {import("./UserAPI").Role} role
+   * @returns {Promise<Status>} the default operator status if no other has been set.
+   */
+  async getDefaultStatusForRole(role) {
+    const provider = this.#userAPI.getProvider();
+    const defaultStatus = await provider.getDefaultStatusForRole(role);
+
+    return defaultStatus;
+  }
+
+  /**
+   * All possible status roles. A status role is a user role that can provide status. In some systems
+   * this may be all user roles, but there may be cases where some users are not are not polled
+   * for status if they do not have a real-time operational role.
+   *
+   * @returns {Promise<Array<import("./UserAPI").Role>>} the default operator status if no other has been set.
+   */
+  getAllStatusRoles() {
+    const provider = this.#userAPI.getProvider();
+
+    if (provider.getAllStatusRoles) {
+      return provider.getAllStatusRoles();
+    } else {
+      this.#userAPI.error('User provider cannot provide all status roles');
+    }
+  }
+
+  /**
+   * @returns {Promise<Boolean>} true if the configured UserProvider can provide status for the currently logged in user, false otherwise.
+   * @see StatusUserProvider
+   */
+  async canProvideStatusForCurrentUser() {
+    const provider = this.#userAPI.getProvider();
+
+    if (!provider) {
+      return false;
+    }
+    const activeStatusRole = await this.#userAPI.getActiveRole();
+    const canProvideStatus = await this.canProvideStatusForRole(activeStatusRole);
+
+    return canProvideStatus;
+  }
+
+  /**
+   * Private internal function that cannot be made #private because it needs to be registered as a callback to the user provider
+   * @private
+   */
+  listenToStatusEvents(provider) {
+    if (typeof provider.on === 'function') {
+      provider.on('statusChange', this.onProviderStatusChange);
+      provider.on('pollQuestionChange', this.onProviderPollQuestionChange);
+      provider.on('missionActionStatusChange', this.onMissionActionStatusChange);
+    }
+  }
+
+  /**
+   * @private
+   */
+  onProviderStatusChange(newStatus) {
+    this.emit('statusChange', newStatus);
+  }
+
+  /**
+   * @private
+   */
+  onProviderPollQuestionChange(pollQuestion) {
+    this.emit('pollQuestionChange', pollQuestion);
+  }
+
+  /**
+   * @private
+   */
+  onMissionActionStatusChange({ action, status }) {
+    this.emit('missionActionStatusChange', { action, status });
+  }
+}
+
+/**
+ * @typedef {import('./UserProvider')} UserProvider
+ */
+
+/**
+ * @typedef {import('./StatusUserProvider')} StatusUserProvider
+ */
+
+/**
+ * The PollQuestion type
+ * @typedef {Object} PollQuestion
+ * @property {String} question - The question to be presented to users
+ * @property {Number} timestamp - The time that the poll question was set.
+ */
+
+/**
+ * The MissionStatus type
+ * @typedef {Object} MissionStatusOption
+ * @extends {Status}
+ * @property {String} color A color to be used when displaying the mission status
+ */
+
+/**
+ * @typedef {Object} MissionAction
+ * @property {String} key A unique identifier for this action
+ * @property {String} label A human readable label for this action
+ */
+
+/**
+ * The Status type
+ * @typedef {Object} Status
+ * @property {String} key - A unique identifier for this status
+ * @property {String} label - A human readable label for this status
+ * @property {Number} timestamp - The time that the status was set.
+ */
diff --git a/src/api/user/StatusUserProvider.js b/src/api/user/StatusUserProvider.js
new file mode 100644
index 00000000000..73a901a4401
--- /dev/null
+++ b/src/api/user/StatusUserProvider.js
@@ -0,0 +1,80 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import UserProvider from './UserProvider.js';
+
+export default class StatusUserProvider extends UserProvider {
+  /**
+   * @param {('statusChange'|'pollQuestionChange'|'missionActionStatusChange')} event the name of the event to listen to
+   * @param {Function} callback a function to invoke when this event occurs
+   */
+  on(event, callback) {}
+  /**
+   * @param {('statusChange'|'pollQuestionChange'|'missionActionStatusChange')} event the name of the event to stop listen to
+   * @param {Function} callback the callback function used to register the listener
+   */
+  off(event, callback) {}
+  /**
+   * @returns {import("./StatusAPI").PollQuestion} the current status poll question
+   */
+  async getPollQuestion() {}
+  /**
+   * @param {import("./StatusAPI").PollQuestion} pollQuestion a new poll question to set
+   * @returns {Promise<Boolean>} true if operation was successful, otherwise false
+   */
+  async setPollQuestion(pollQuestion) {}
+  /**
+   * @returns {Promise<Boolean>} true if the current user can set the poll question, otherwise false
+   */
+  async canSetPollQuestion() {}
+  /**
+   * @returns {Promise<Array<import("./StatusAPI").Status>>} a list of the possible statuses that an operator can be in
+   */
+  async getPossibleStatuses() {}
+  /**
+   * @param {import("./UserAPI").Role} role
+   * @returns {Promise<import("./StatusAPI").Status}
+   */
+  async getStatusForRole(role) {}
+  /**
+   * @param {import("./UserAPI").Role} role
+   * @returns {Promise<import("./StatusAPI").Status}
+   */
+  async getDefaultStatusForRole(role) {}
+  /**
+   * @param {import("./UserAPI").Role} role
+   * @param {*} status
+   * @returns {Promise<Boolean>} true if operation was successful, otherwise false.
+   */
+  async setStatusForRole(role, status) {}
+  /**
+   * @param {import("./UserAPI").Role} role
+   * @returns {Promise<Boolean} true if the user provider can provide status for the given role
+   */
+  async canProvideStatusForRole(role) {}
+  /**
+   * @returns {Promise<Array<import("./UserAPI").Role>>} a list of all available status roles, if user permissions allow it.
+   */
+  async getAllStatusRoles() {}
+  /**
+   * @returns {Promise<import("./UserAPI").Role>} the active status role for the currently logged in user
+   */
+}
diff --git a/src/api/user/StoragePersistance.js b/src/api/user/StoragePersistance.js
new file mode 100644
index 00000000000..9ed6af25c86
--- /dev/null
+++ b/src/api/user/StoragePersistance.js
@@ -0,0 +1,37 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { ACTIVE_ROLE_LOCAL_STORAGE_KEY } from './constants.js';
+
+class StoragePersistance {
+  getActiveRole() {
+    return localStorage.getItem(ACTIVE_ROLE_LOCAL_STORAGE_KEY);
+  }
+  setActiveRole(role) {
+    return localStorage.setItem(ACTIVE_ROLE_LOCAL_STORAGE_KEY, role);
+  }
+  clearActiveRole() {
+    return localStorage.removeItem(ACTIVE_ROLE_LOCAL_STORAGE_KEY);
+  }
+}
+
+export default new StoragePersistance();
diff --git a/src/api/user/User.js b/src/api/user/User.js
new file mode 100644
index 00000000000..0632e6df660
--- /dev/null
+++ b/src/api/user/User.js
@@ -0,0 +1,39 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+export default class User {
+  constructor(id, name) {
+    this.id = id;
+    this.name = name;
+
+    this.getId = this.getId.bind(this);
+    this.getName = this.getName.bind(this);
+  }
+
+  getId() {
+    return this.id;
+  }
+
+  getName() {
+    return this.name;
+  }
+}
diff --git a/src/api/user/UserAPI.js b/src/api/user/UserAPI.js
new file mode 100644
index 00000000000..28cd457693b
--- /dev/null
+++ b/src/api/user/UserAPI.js
@@ -0,0 +1,220 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import EventEmitter from 'EventEmitter';
+
+import { MULTIPLE_PROVIDER_ERROR, NO_PROVIDER_ERROR } from './constants.js';
+import StatusAPI from './StatusAPI.js';
+import StoragePersistance from './StoragePersistance.js';
+import User from './User.js';
+
+class UserAPI extends EventEmitter {
+  /**
+   * @param {OpenMCT} openmct
+   * @param {UserAPIConfiguration} config
+   */
+  constructor(openmct, config) {
+    super();
+
+    this._openmct = openmct;
+    this._provider = undefined;
+
+    this.User = User;
+    this.status = new StatusAPI(this, openmct, config);
+  }
+
+  /**
+   * Set the user provider for the user API. This allows you
+   *  to specify ONE user provider to be used with Open MCT.
+   * @method setProvider
+   * @memberof module:openmct.UserAPI#
+   * @param {module:openmct.UserAPI~UserProvider} provider the new
+   *        user provider
+   */
+  setProvider(provider) {
+    if (this.hasProvider()) {
+      this.error(MULTIPLE_PROVIDER_ERROR);
+    }
+
+    this._provider = provider;
+    this.emit('providerAdded', this._provider);
+  }
+
+  getProvider() {
+    return this._provider;
+  }
+
+  /**
+   * Return true if the user provider has been set.
+   *
+   * @memberof module:openmct.UserAPI#
+   * @returns {boolean} true if the user provider exists
+   */
+  hasProvider() {
+    return this._provider !== undefined;
+  }
+
+  /**
+   * If a user provider is set, it will return a copy of a user object from
+   * the provider. If the user is not logged in, it will return undefined;
+   *
+   * @memberof module:openmct.UserAPI#
+   * @returns {Function|Promise} user provider 'getCurrentUser' method
+   * @throws Will throw an error if no user provider is set
+   */
+  getCurrentUser() {
+    if (!this.hasProvider()) {
+      return Promise.resolve(undefined);
+    } else {
+      return this._provider.getCurrentUser();
+    }
+  }
+  /**
+   *  If a user provider is set, it will return an array of possible roles
+   *  that can be selected by the current user
+   *  @memberof module:openmct.UserAPI#
+   *  @returns {Array}
+   *  @throws Will throw an error if no user provider is set
+   */
+
+  getPossibleRoles() {
+    if (!this.hasProvider()) {
+      this.error(NO_PROVIDER_ERROR);
+    }
+    return this._provider.getPossibleRoles();
+  }
+  /**
+   * If a user provider is set, it will return the active role or null
+   * @memberof module:openmct.UserAPI#
+   * @returns {string|null}
+   */
+  getActiveRole() {
+    if (!this.hasProvider()) {
+      return null;
+    }
+
+    // get from session storage
+    const sessionStorageValue = StoragePersistance.getActiveRole();
+
+    return sessionStorageValue;
+  }
+  /**
+   * Set the active role in session storage
+   * @memberof module:openmct.UserAPI#
+   * @returns {undefined}
+   */
+  setActiveRole(role) {
+    if (!role) {
+      StoragePersistance.clearActiveRole();
+    } else {
+      StoragePersistance.setActiveRole(role);
+    }
+    this.emit('roleChanged', role);
+  }
+
+  /**
+   * Will return if a role can provide a operator status response
+   * @memberof module:openmct.UserApi#
+   * @returns {Boolean}
+   */
+  canProvideStatusForRole() {
+    if (!this.hasProvider()) {
+      return null;
+    }
+    const activeRole = this.getActiveRole();
+
+    return this._provider.canProvideStatusForRole?.(activeRole);
+  }
+
+  /**
+   * If a user provider is set, it will return the user provider's
+   * 'isLoggedIn' method
+   *
+   * @memberof module:openmct.UserAPI#
+   * @returns {Function|Boolean} user provider 'isLoggedIn' method
+   * @throws Will throw an error if no user provider is set
+   */
+  isLoggedIn() {
+    if (!this.hasProvider()) {
+      return false;
+    }
+
+    return this._provider.isLoggedIn();
+  }
+
+  /**
+   * If a user provider is set, it will return a call to it's
+   * 'hasRole' method
+   *
+   * @memberof module:openmct.UserAPI#
+   * @returns {Function|Boolean} user provider 'isLoggedIn' method
+   * @param {string} roleId id of role to check for
+   * @throws Will throw an error if no user provider is set
+   */
+  hasRole(roleId) {
+    this.noProviderCheck();
+
+    return this._provider.hasRole(roleId);
+  }
+
+  /**
+   * Checks if a provider is set and if not, will throw error
+   *
+   * @private
+   * @throws Will throw an error if no user provider is set
+   */
+  noProviderCheck() {
+    if (!this.hasProvider()) {
+      this.error(NO_PROVIDER_ERROR);
+    }
+  }
+
+  /**
+   * Utility function for throwing errors
+   *
+   * @private
+   * @param {string} error description of error
+   * @throws Will throw error passed in
+   */
+  error(error) {
+    throw new Error(error);
+  }
+}
+
+export default UserAPI;
+/**
+ * @typedef {String} Role
+ */
+/**
+ * @typedef {Object} OpenMCT
+ */
+/**
+ * @typedef {{statusStyles: Object.<string, StatusStyleDefinition>}} UserAPIConfiguration
+ */
+/**
+ * @typedef {Object} StatusStyleDefinition
+ * @property {String} iconClass The icon class to apply to the status indicator when this status is active "icon-circle-slash",
+ * @property {String} iconClassPoll The icon class to apply to the poll question indicator when this style is active eg. "icon-status-poll-question-mark"
+ * @property {String} statusClass The class to apply to the indicator when this status is active eg. "s-status-error"
+ * @property {String} statusBgColor The background color to apply in the status summary section of the poll question popup for this status eg."#9900cc"
+ * @property {String} statusFgColor The foreground color to apply in the status summary section of the poll question popup for this status eg. "#fff"
+ */
diff --git a/src/api/user/UserAPISpec.js b/src/api/user/UserAPISpec.js
new file mode 100644
index 00000000000..5af049dd3d9
--- /dev/null
+++ b/src/api/user/UserAPISpec.js
@@ -0,0 +1,65 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import ExampleUserProvider from '../../../example/exampleUser/ExampleUserProvider.js';
+import { createOpenMct, resetApplicationState } from '../../utils/testing.js';
+import { MULTIPLE_PROVIDER_ERROR } from './constants.js';
+
+describe('The User API', () => {
+  let openmct;
+
+  beforeEach(() => {
+    openmct = createOpenMct();
+  });
+
+  afterEach(() => {
+    const activeOverlays = openmct.overlays.activeOverlays;
+    activeOverlays.forEach((overlay) => overlay.dismiss());
+
+    return resetApplicationState(openmct);
+  });
+
+  describe('with regard to user providers', () => {
+    it('allows you to specify a user provider', () => {
+      openmct.user.on('providerAdded', (provider) => {
+        expect(provider).toBeInstanceOf(ExampleUserProvider);
+      });
+      openmct.user.setProvider(new ExampleUserProvider(openmct));
+    });
+
+    it('prevents more than one user provider from being set', () => {
+      openmct.user.setProvider(new ExampleUserProvider(openmct));
+
+      expect(() => {
+        openmct.user.setProvider({});
+      }).toThrow(new Error(MULTIPLE_PROVIDER_ERROR));
+    });
+
+    it('provides a check for an existing user provider', () => {
+      expect(openmct.user.hasProvider()).toBeFalse();
+
+      openmct.user.setProvider(new ExampleUserProvider(openmct));
+
+      expect(openmct.user.hasProvider()).toBeTrue();
+    });
+  });
+});
diff --git a/src/api/user/UserProvider.js b/src/api/user/UserProvider.js
new file mode 100644
index 00000000000..45ba7f72a15
--- /dev/null
+++ b/src/api/user/UserProvider.js
@@ -0,0 +1,36 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+export default class UserProvider {
+  /**
+   * @returns {Promise<User>} A promise that resolves with the currently logged in user
+   */
+  getCurrentUser() {}
+  /**
+   * @returns {Boolean} true if a user is currently logged in, otherwise false
+   */
+  isLoggedIn() {}
+  /**
+   * @param {String} role
+   * @returns {Promise<Boolean>} true if the current user has the given role
+   */
+  hasRole(role) {}
+}
diff --git a/src/api/user/UserStatusAPISpec.js b/src/api/user/UserStatusAPISpec.js
new file mode 100644
index 00000000000..7fe2736ff90
--- /dev/null
+++ b/src/api/user/UserStatusAPISpec.js
@@ -0,0 +1,105 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createOpenMct, resetApplicationState } from '../../utils/testing.js';
+
+describe('The User Status API', () => {
+  let openmct;
+  let userProvider;
+  let mockUser;
+
+  beforeEach(() => {
+    userProvider = jasmine.createSpyObj('userProvider', [
+      'setPollQuestion',
+      'getPollQuestion',
+      'getCurrentUser',
+      'getPossibleRoles',
+      'getPossibleStatuses',
+      'getAllStatusRoles',
+      'canSetPollQuestion',
+      'isLoggedIn',
+      'on'
+    ]);
+    openmct = createOpenMct();
+    mockUser = new openmct.user.User('test-user', 'A test user');
+    userProvider.getCurrentUser.and.returnValue(Promise.resolve(mockUser));
+    userProvider.getPossibleStatuses.and.returnValue(Promise.resolve([]));
+    userProvider.getPossibleRoles.and.returnValue(Promise.resolve([]));
+    userProvider.getAllStatusRoles.and.returnValue(Promise.resolve([]));
+    userProvider.canSetPollQuestion.and.returnValue(Promise.resolve(false));
+    userProvider.isLoggedIn.and.returnValue(true);
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  describe('the poll question', () => {
+    it('can be set via a user status provider if supported', () => {
+      openmct.user.setProvider(userProvider);
+      userProvider.canSetPollQuestion.and.returnValue(Promise.resolve(true));
+
+      return openmct.user.status.setPollQuestion('This is a poll question').then(() => {
+        expect(userProvider.setPollQuestion).toHaveBeenCalledWith('This is a poll question');
+      });
+    });
+    // fit('emits an event when the poll question changes', () => {
+    //     const pollQuestionChangeCallback = jasmine.createSpy('pollQuestionChangeCallback');
+    //     let pollQuestionListener;
+
+    //     userProvider.canSetPollQuestion.and.returnValue(Promise.resolve(true));
+    //     userProvider.on.and.callFake((eventName, listener) => {
+    //         if (eventName === 'pollQuestionChange') {
+    //             pollQuestionListener = listener;
+    //         }
+    //     });
+
+    //     openmct.user.on('pollQuestionChange', pollQuestionChangeCallback);
+
+    //     openmct.user.setProvider(userProvider);
+
+    //     return openmct.user.status.setPollQuestion('This is a poll question').then(() => {
+    //         expect(pollQuestionListener).toBeDefined();
+    //         pollQuestionListener();
+    //         expect(pollQuestionChangeCallback).toHaveBeenCalled();
+
+    //         const pollQuestion = pollQuestionChangeCallback.calls.mostRecent().args[0];
+    //         expect(pollQuestion.question).toBe('This is a poll question');
+
+    //         openmct.user.off('pollQuestionChange', pollQuestionChangeCallback);
+    //     });
+    // });
+    it('cannot be set if the user is not permitted', () => {
+      openmct.user.setProvider(userProvider);
+      userProvider.canSetPollQuestion.and.returnValue(Promise.resolve(false));
+
+      return openmct.user.status
+        .setPollQuestion('This is a poll question')
+        .catch((error) => {
+          expect(error).toBeInstanceOf(Error);
+        })
+        .finally(() => {
+          expect(userProvider.setPollQuestion).not.toHaveBeenCalled();
+        });
+    });
+  });
+});
diff --git a/src/api/user/constants.js b/src/api/user/constants.js
new file mode 100644
index 00000000000..4c9c227dcb3
--- /dev/null
+++ b/src/api/user/constants.js
@@ -0,0 +1,27 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+export const MULTIPLE_PROVIDER_ERROR = 'Only one user provider may be set at a time.';
+export const NO_PROVIDER_ERROR = 'No user provider has been set.';
+
+export const ACTIVE_ROLE_LOCAL_STORAGE_KEY = 'ACTIVE_USER_ROLE';
+export const ACTIVE_ROLE_BROADCAST_CHANNEL_NAME = 'ActiveRoleChannel';
diff --git a/src/end.frag b/src/end.frag
deleted file mode 100644
index 9746cce6b89..00000000000
--- a/src/end.frag
+++ /dev/null
@@ -1,2 +0,0 @@
-    return require('openmct');
-}));
diff --git a/src/exporters/CSVExporter.js b/src/exporters/CSVExporter.js
index 3453d3ab245..e4e0d04b407 100644
--- a/src/exporters/CSVExporter.js
+++ b/src/exporters/CSVExporter.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,17 +21,16 @@
  *****************************************************************************/
 
 import CSV from 'comma-separated-values';
-import {saveAs} from 'file-saver/FileSaver';
+import { saveAs } from 'file-saver';
 
 class CSVExporter {
-    export(rows, options) {
-        let headers = (options && options.headers)
-            || (Object.keys((rows[0] || {})).sort());
-        let filename = (options && options.filename) || "export.csv";
-        let csvText = new CSV(rows, { header: headers }).encode();
-        let blob = new Blob([csvText], { type: "text/csv" });
-        saveAs(blob, filename);
-    }
+  export(rows, options) {
+    let headers = (options && options.headers) || Object.keys(rows[0] || {}).sort();
+    let filename = (options && options.filename) || 'export.csv';
+    let csvText = new CSV(rows, { header: headers }).encode();
+    let blob = new Blob([csvText], { type: 'text/csv' });
+    saveAs(blob, filename);
+  }
 }
 
 export default CSVExporter;
diff --git a/src/exporters/ImageExporter.js b/src/exporters/ImageExporter.js
index 1fea59e1683..cda39bc80e5 100644
--- a/src/exporters/ImageExporter.js
+++ b/src/exporters/ImageExporter.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -26,160 +26,169 @@
  */
 
 function replaceDotsWithUnderscores(filename) {
-    const regex = /\./gi;
+  const regex = /\./gi;
 
-    return filename.replace(regex, '_');
+  return filename.replace(regex, '_');
 }
 
-import {saveAs} from 'file-saver/FileSaver';
+import { saveAs } from 'file-saver';
 import html2canvas from 'html2canvas';
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 
 class ImageExporter {
-    constructor(openmct) {
-        this.openmct = openmct;
-    }
-    /**
-        * Converts an HTML element into a PNG or JPG Blob.
-        * @private
-        * @param {node} element that will be converted to an image
-        * @param {object} options Image options.
-        * @returns {promise}
-        */
-    renderElement(element, { imageType, className, thumbnailSize }) {
-        const self = this;
-        const overlays = this.openmct.overlays;
-        const dialog = overlays.dialog({
-            iconClass: 'info',
-            message: 'Caputuring an image',
-            buttons: [
-                {
-                    label: 'Cancel',
-                    emphasis: true,
-                    callback: function () {
-                        dialog.dismiss();
-                    }
-                }
-            ]
-        });
-
-        let mimeType = 'image/png';
-        if (imageType === 'jpg') {
-            mimeType = 'image/jpeg';
-        }
-
-        let exportId = undefined;
-        let oldId = undefined;
-        if (className) {
-            const newUUID = uuid();
-            exportId = `$export-element-${newUUID}`;
-            oldId = element.id;
-            element.id = exportId;
-        }
-
-        return html2canvas(element, {
-            onclone: function (document) {
-                if (className) {
-                    const clonedElement = document.getElementById(exportId);
-                    clonedElement.classList.add(className);
-                }
-
-                element.id = oldId;
-            },
-            removeContainer: true // Set to false to debug what html2canvas renders
-        }).then(function (canvas) {
+  constructor(openmct) {
+    this.openmct = openmct;
+  }
+  /**
+   * Converts an HTML element into a PNG or JPG Blob.
+   * @private
+   * @param {node} element that will be converted to an image
+   * @param {object} options Image options.
+   * @returns {promise}
+   */
+  renderElement(element, { imageType, className, thumbnailSize }) {
+    const self = this;
+    const overlays = this.openmct.overlays;
+    const dialog = overlays.dialog({
+      iconClass: 'info',
+      message: 'Capturing image, please wait...',
+      buttons: [
+        {
+          label: 'Cancel',
+          emphasis: true,
+          callback: function () {
             dialog.dismiss();
+          }
+        }
+      ]
+    });
 
-            return new Promise(function (resolve, reject) {
-                if (thumbnailSize) {
-                    const thumbnail = self.getThumbnail(canvas, mimeType, thumbnailSize);
-
-                    return canvas.toBlob(blob => resolve({
-                        blob,
-                        thumbnail
-                    }), mimeType);
-                }
-
-                return canvas.toBlob(blob => resolve({ blob }), mimeType);
-            });
-        }, function (error) {
-            console.log('error capturing image', error);
-            dialog.dismiss();
-            const errorDialog = overlays.dialog({
-                iconClass: 'error',
-                message: 'Image was not captured successfully!',
-                buttons: [
-                    {
-                        label: "OK",
-                        emphasis: true,
-                        callback: function () {
-                            errorDialog.dismiss();
-                        }
-                    }
-                ]
-            });
-        });
+    let mimeType = 'image/png';
+    if (imageType === 'jpg') {
+      mimeType = 'image/jpeg';
     }
 
-    getThumbnail(canvas, mimeType, size) {
-        const thumbnailCanvas = document.createElement('canvas');
-        thumbnailCanvas.setAttribute('width', size.width);
-        thumbnailCanvas.setAttribute('height', size.height);
-        const ctx = thumbnailCanvas.getContext('2d');
-        ctx.globalCompositeOperation = "copy";
-        ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, size.width, size.height);
-
-        return thumbnailCanvas.toDataURL(mimeType);
+    let exportId = undefined;
+    let oldId = undefined;
+    if (className) {
+      const newUUID = uuid();
+      exportId = `$export-element-${newUUID}`;
+      oldId = element.id;
+      element.id = exportId;
     }
 
-    /**
-     * Takes a screenshot of a DOM node and exports to JPG.
-     * @param {node} element to be exported
-     * @param {string} filename the exported image
-     * @param {string} className to be added to element before capturing (optional)
-     * @returns {promise}
-     */
-    async exportJPG(element, filename, className) {
-        const processedFilename = replaceDotsWithUnderscores(filename);
-
-        const img = await this.renderElement(element, {
-            imageType: 'jpg',
-            className
-        });
-        saveAs(img.blob, processedFilename);
-    }
+    return html2canvas(element, {
+      useCORS: true,
+      allowTaint: true,
+      logging: false,
+      onclone: function (document) {
+        if (className) {
+          const clonedElement = document.getElementById(exportId);
+          clonedElement.classList.add(className);
+        }
 
-    /**
-     * Takes a screenshot of a DOM node and exports to PNG.
-     * @param {node} element to be exported
-     * @param {string} filename the exported image
-     * @param {string} className to be added to element before capturing (optional)
-     * @returns {promise}
-     */
-    async exportPNG(element, filename, className) {
-        const processedFilename = replaceDotsWithUnderscores(filename);
-
-        const img = await this.renderElement(element, {
-            imageType: 'png',
-            className
+        element.id = oldId;
+      },
+      removeContainer: true // Set to false to debug what html2canvas renders
+    })
+      .then((canvas) => {
+        dialog.dismiss();
+
+        return new Promise(function (resolve, reject) {
+          if (thumbnailSize) {
+            const thumbnail = self.getThumbnail(canvas, mimeType, thumbnailSize);
+
+            return canvas.toBlob(
+              (blob) =>
+                resolve({
+                  blob,
+                  thumbnail
+                }),
+              mimeType
+            );
+          }
+
+          return canvas.toBlob((blob) => resolve({ blob }), mimeType);
         });
-        saveAs(img.blob, processedFilename);
-    }
-
-    /**
-     * Takes a screenshot of a DOM node in PNG format.
-     * @param {node} element to be exported
-     * @param {string} filename the exported image
-     * @returns {promise}
-     */
-
-    exportPNGtoSRC(element, options) {
-        return this.renderElement(element, {
-            imageType: 'png',
-            ...options
+      })
+      .catch((error) => {
+        dialog.dismiss();
+
+        console.error('error capturing image', error);
+        const errorDialog = overlays.dialog({
+          iconClass: 'error',
+          message: 'Image was not captured successfully!',
+          buttons: [
+            {
+              label: 'OK',
+              emphasis: true,
+              callback: function () {
+                errorDialog.dismiss();
+              }
+            }
+          ]
         });
-    }
+      });
+  }
+
+  getThumbnail(canvas, mimeType, size) {
+    const thumbnailCanvas = document.createElement('canvas');
+    thumbnailCanvas.setAttribute('width', size.width);
+    thumbnailCanvas.setAttribute('height', size.height);
+    const ctx = thumbnailCanvas.getContext('2d');
+    ctx.globalCompositeOperation = 'copy';
+    ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, size.width, size.height);
+
+    return thumbnailCanvas.toDataURL(mimeType);
+  }
+
+  /**
+   * Takes a screenshot of a DOM node and exports to JPG.
+   * @param {node} element to be exported
+   * @param {string} filename the exported image
+   * @param {string} className to be added to element before capturing (optional)
+   * @returns {promise}
+   */
+  async exportJPG(element, filename, className) {
+    const processedFilename = replaceDotsWithUnderscores(filename);
+
+    const img = await this.renderElement(element, {
+      imageType: 'jpg',
+      className
+    });
+    saveAs(img.blob, processedFilename);
+  }
+
+  /**
+   * Takes a screenshot of a DOM node and exports to PNG.
+   * @param {node} element to be exported
+   * @param {string} filename the exported image
+   * @param {string} className to be added to element before capturing (optional)
+   * @returns {promise}
+   */
+  async exportPNG(element, filename, className) {
+    const processedFilename = replaceDotsWithUnderscores(filename);
+
+    const img = await this.renderElement(element, {
+      imageType: 'png',
+      className
+    });
+    saveAs(img.blob, processedFilename);
+  }
+
+  /**
+   * Takes a screenshot of a DOM node in PNG format.
+   * @param {node} element to be exported
+   * @param {string} filename the exported image
+   * @returns {promise}
+   */
+
+  exportPNGtoSRC(element, options) {
+    return this.renderElement(element, {
+      imageType: 'png',
+      ...options
+    });
+  }
 }
 
 export default ImageExporter;
-
diff --git a/src/exporters/ImageExporterSpec.js b/src/exporters/ImageExporterSpec.js
index bb00cfd4a54..99a40e35c73 100644
--- a/src/exporters/ImageExporterSpec.js
+++ b/src/exporters/ImageExporterSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,39 +20,39 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import ImageExporter from './ImageExporter';
-import { createOpenMct, resetApplicationState } from '../utils/testing';
+import { createOpenMct, resetApplicationState } from '../utils/testing.js';
+import ImageExporter from './ImageExporter.js';
 
 describe('The Image Exporter', () => {
-    let openmct;
-    let imageExporter;
+  let openmct;
+  let imageExporter;
 
-    beforeEach(() => {
-        openmct = createOpenMct();
-    });
+  beforeEach(() => {
+    openmct = createOpenMct();
+  });
 
-    afterEach(() => {
-        return resetApplicationState(openmct);
-    });
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
 
-    describe("basic instatation", () => {
-        it("can be instatiated", () => {
-            imageExporter = new ImageExporter(openmct);
+  describe('basic instantiation', () => {
+    it('can be instantiated', () => {
+      imageExporter = new ImageExporter(openmct);
 
-            expect(imageExporter).not.toEqual(null);
-        });
-        it("can render an element to a blob", async () => {
-            const mockHeadElement = document.createElement("h1");
-            const mockTextNode = document.createTextNode('foo bar');
-            mockHeadElement.appendChild(mockTextNode);
-            document.body.appendChild(mockHeadElement);
-            imageExporter = new ImageExporter(openmct);
-            const returnedBlob = await imageExporter.renderElement(document.body, {
-                imageType: 'png'
-            });
-            expect(returnedBlob).not.toEqual(null);
-            expect(returnedBlob.blob).not.toEqual(null);
-            expect(returnedBlob.blob).toBeInstanceOf(Blob);
-        });
+      expect(imageExporter).not.toEqual(null);
+    });
+    it('can render an element to a blob', async () => {
+      const mockHeadElement = document.createElement('h1');
+      const mockTextNode = document.createTextNode('foo bar');
+      mockHeadElement.appendChild(mockTextNode);
+      document.body.appendChild(mockHeadElement);
+      imageExporter = new ImageExporter(openmct);
+      const returnedBlob = await imageExporter.renderElement(document.body, {
+        imageType: 'png'
+      });
+      expect(returnedBlob).not.toEqual(null);
+      expect(returnedBlob.blob).not.toEqual(null);
+      expect(returnedBlob.blob).toBeInstanceOf(Blob);
     });
+  });
 });
diff --git a/src/exporters/JSONExporter.js b/src/exporters/JSONExporter.js
new file mode 100644
index 00000000000..2811d31ca54
--- /dev/null
+++ b/src/exporters/JSONExporter.js
@@ -0,0 +1,34 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { saveAs } from 'file-saver';
+
+class JSONExporter {
+  export(obj, options) {
+    let filename = (options && options.filename) || 'test-export.json';
+    let jsonText = JSON.stringify(obj);
+    let blob = new Blob([jsonText], { type: 'application/json' });
+    saveAs(blob, filename);
+  }
+}
+
+export default JSONExporter;
diff --git a/src/installDefaultBundles.js b/src/installDefaultBundles.js
deleted file mode 100644
index 7803f7fa70c..00000000000
--- a/src/installDefaultBundles.js
+++ /dev/null
@@ -1,116 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-const DEFAULTS = [
-    'src/adapter',
-    'platform/framework',
-    'platform/core',
-    'platform/representation',
-    'platform/commonUI/about',
-    'platform/commonUI/browse',
-    'platform/commonUI/edit',
-    'platform/commonUI/dialog',
-    'platform/commonUI/formats',
-    'platform/commonUI/general',
-    'platform/commonUI/inspect',
-    'platform/commonUI/mobile',
-    'platform/commonUI/notification',
-    'platform/containment',
-    'platform/execution',
-    'platform/exporters',
-    'platform/telemetry',
-    'platform/features/clock',
-    'platform/forms',
-    'platform/identity',
-    'platform/persistence/aggregator',
-    'platform/persistence/queue',
-    'platform/policy',
-    'platform/entanglement',
-    'platform/search',
-    'platform/status',
-    'platform/commonUI/regions'
-];
-
-define([
-    '../src/adapter/bundle',
-    '../example/eventGenerator/bundle',
-    '../example/export/bundle',
-    '../example/forms/bundle',
-    '../example/identity/bundle',
-    '../example/mobile/bundle',
-    '../example/msl/bundle',
-    '../example/notifications/bundle',
-    '../example/persistence/bundle',
-    '../example/policy/bundle',
-    '../example/profiling/bundle',
-    '../example/scratchpad/bundle',
-    '../example/styleguide/bundle',
-    '../platform/commonUI/about/bundle',
-    '../platform/commonUI/browse/bundle',
-    '../platform/commonUI/dialog/bundle',
-    '../platform/commonUI/edit/bundle',
-    '../platform/commonUI/formats/bundle',
-    '../platform/commonUI/general/bundle',
-    '../platform/commonUI/inspect/bundle',
-    '../platform/commonUI/mobile/bundle',
-    '../platform/commonUI/notification/bundle',
-    '../platform/commonUI/regions/bundle',
-    '../platform/containment/bundle',
-    '../platform/core/bundle',
-    '../platform/entanglement/bundle',
-    '../platform/execution/bundle',
-    '../platform/exporters/bundle',
-    '../platform/features/clock/bundle',
-    '../platform/features/my-items/bundle',
-    '../platform/features/static-markup/bundle',
-    '../platform/forms/bundle',
-    '../platform/framework/bundle',
-    '../platform/framework/src/load/Bundle',
-    '../platform/identity/bundle',
-    '../platform/persistence/aggregator/bundle',
-    '../platform/persistence/elastic/bundle',
-    '../platform/persistence/local/bundle',
-    '../platform/persistence/queue/bundle',
-    '../platform/policy/bundle',
-    '../platform/representation/bundle',
-    '../platform/search/bundle',
-    '../platform/status/bundle',
-    '../platform/telemetry/bundle'
-], function () {
-    const LEGACY_BUNDLES = Array.from(arguments);
-
-    return function installDefaultBundles(bundleRegistry) {
-        registerLegacyBundles(LEGACY_BUNDLES);
-        enableDefaultBundles();
-
-        function registerLegacyBundles(bundles) {
-            bundles.forEach((bundle, i) => {
-                bundleRegistry.register(bundle.name, bundle.definition);
-            });
-        }
-
-        function enableDefaultBundles() {
-            DEFAULTS.forEach(function (bundlePath) {
-                bundleRegistry.enable(bundlePath);
-            });
-        }
-    };
-});
diff --git a/src/legacyRegistry.js b/src/legacyRegistry.js
deleted file mode 100644
index 7d247e5c9f9..00000000000
--- a/src/legacyRegistry.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(['./BundleRegistry'], function (BundleRegistry) {
-    return new BundleRegistry();
-});
diff --git a/src/legacyRegistrySpec.js b/src/legacyRegistrySpec.js
deleted file mode 100644
index 64707fc6424..00000000000
--- a/src/legacyRegistrySpec.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    './legacyRegistry',
-    './BundleRegistry'
-], function (legacyRegistry, BundleRegistry) {
-
-    describe("legacyRegistry", function () {
-        it("is a BundleRegistry", function () {
-            expect(legacyRegistry instanceof BundleRegistry).toBe(true);
-        });
-    });
-});
diff --git a/src/plugins/CouchDBSearchFolder/plugin.js b/src/plugins/CouchDBSearchFolder/plugin.js
index 02aed49d9f7..aa0bad48edf 100644
--- a/src/plugins/CouchDBSearchFolder/plugin.js
+++ b/src/plugins/CouchDBSearchFolder/plugin.js
@@ -1,37 +1,44 @@
 export default function (folderName, couchPlugin, searchFilter) {
-    return function install(openmct) {
-        const couchProvider = couchPlugin.couchProvider;
+  const DEFAULT_NAME = 'CouchDB Documents';
 
-        openmct.objects.addRoot({
-            namespace: 'couch-search',
-            key: 'couch-search'
-        });
+  return function install(openmct) {
+    const couchProvider = couchPlugin.couchProvider;
+    //replace any non-letter/non-number with a hyphen
+    const couchSearchId = (folderName || DEFAULT_NAME).replace(/[^a-zA-Z0-9]/g, '-');
+    const couchSearchName = `couch-search-${couchSearchId}`;
 
-        openmct.objects.addProvider('couch-search', {
-            get(identifier) {
-                if (identifier.key !== 'couch-search') {
-                    return undefined;
-                } else {
-                    return Promise.resolve({
-                        identifier,
-                        type: 'folder',
-                        name: folderName || "CouchDB Documents"
-                    });
-                }
-            }
-        });
+    openmct.objects.addRoot({
+      namespace: couchSearchName,
+      key: couchSearchName
+    });
 
-        openmct.composition.addProvider({
-            appliesTo(domainObject) {
-                return domainObject.identifier.namespace === 'couch-search'
-                    && domainObject.identifier.key === 'couch-search';
-            },
-            load() {
-                return couchProvider.getObjectsByFilter(searchFilter).then(objects => {
-                    return objects.map(object => object.identifier);
-                });
-            }
-        });
-    };
+    openmct.objects.addProvider(couchSearchName, {
+      get(identifier) {
+        if (identifier.key !== couchSearchName) {
+          return undefined;
+        } else {
+          return Promise.resolve({
+            identifier,
+            type: 'folder',
+            name: folderName || DEFAULT_NAME,
+            location: 'ROOT'
+          });
+        }
+      }
+    });
 
+    openmct.composition.addProvider({
+      appliesTo(domainObject) {
+        return (
+          domainObject.identifier.namespace === couchSearchName &&
+          domainObject.identifier.key === couchSearchName
+        );
+      },
+      load() {
+        return couchProvider.getObjectsByFilter(searchFilter).then((objects) => {
+          return objects.map((object) => object.identifier);
+        });
+      }
+    });
+  };
 }
diff --git a/src/plugins/CouchDBSearchFolder/pluginSpec.js b/src/plugins/CouchDBSearchFolder/pluginSpec.js
index 15eff8801f3..21d2ee9339c 100644
--- a/src/plugins/CouchDBSearchFolder/pluginSpec.js
+++ b/src/plugins/CouchDBSearchFolder/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,72 +20,83 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import {createOpenMct, resetApplicationState} from "utils/testing";
-import CouchDBSearchFolderPlugin from './plugin';
+import { createOpenMct, resetApplicationState } from 'utils/testing';
 
-describe('the plugin', function () {
-    let identifier = {
-        namespace: 'couch-search',
-        key: "couch-search"
-    };
-    let testPath = '/test/db';
-    let openmct;
-    let composition;
-
-    beforeEach((done) => {
-
-        openmct = createOpenMct();
+import CouchDBSearchFolderPlugin from './plugin.js';
 
-        let couchPlugin = openmct.plugins.CouchDB(testPath);
-        openmct.install(couchPlugin);
+describe('the plugin', function () {
+  let identifier = {
+    namespace: 'couch-search-CouchDB-Documents',
+    key: 'couch-search-CouchDB-Documents'
+  };
+  let testPath = '/test/db';
+  let openmct;
+  let composition;
 
-        openmct.install(new CouchDBSearchFolderPlugin('CouchDB Documents', couchPlugin, {
-            "selector": {
-                "model": {
-                    "type": "plan"
-                }
-            }
-        }));
+  beforeEach(() => {
+    openmct = createOpenMct();
 
-        openmct.on('start', done);
-        openmct.startHeadless();
+    let couchPlugin = openmct.plugins.CouchDB(testPath);
+    openmct.install(couchPlugin);
+    openmct.install(
+      new CouchDBSearchFolderPlugin('CouchDB Documents', couchPlugin, {
+        selector: {
+          model: {
+            type: 'plan'
+          }
+        }
+      })
+    );
 
-        composition = openmct.composition.get({identifier});
+    spyOn(couchPlugin.couchProvider, 'getObjectsByFilter').and.returnValue(
+      Promise.resolve([
+        {
+          identifier: {
+            key: '1',
+            namespace: 'mct'
+          }
+        },
+        {
+          identifier: {
+            key: '2',
+            namespace: 'mct'
+          }
+        }
+      ])
+    );
 
-        spyOn(couchPlugin.couchProvider, 'getObjectsByFilter').and.returnValue(Promise.resolve([
-            {
-                identifier: {
-                    key: "1",
-                    namespace: "mct"
-                }
-            },
-            {
-                identifier: {
-                    key: "2",
-                    namespace: "mct"
-                }
-            }
-        ]));
+    spyOn(couchPlugin.couchProvider, 'get').and.callFake((id) => {
+      return Promise.resolve({
+        identifier: id
+      });
     });
 
-    afterEach(() => {
-        return resetApplicationState(openmct);
+    return new Promise((resolve) => {
+      openmct.once('start', resolve);
+      openmct.startHeadless();
+    }).then(() => {
+      composition = openmct.composition.get({ identifier });
     });
+  });
 
-    it('provides a folder to hold plans', () => {
-        return openmct.objects.get(identifier).then((object) => {
-            expect(object).toEqual({
-                identifier,
-                type: 'folder',
-                name: "CouchDB Documents"
-            });
-        });
-    });
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
 
-    it('provides composition for couch search folders', () => {
-        return composition.load().then((objects) => {
-            expect(objects.length).toEqual(2);
-        });
+  it('provides a folder to hold plans', () => {
+    return openmct.objects.get(identifier).then((object) => {
+      expect(object).toEqual({
+        identifier,
+        type: 'folder',
+        name: 'CouchDB Documents',
+        location: 'ROOT'
+      });
     });
+  });
 
+  it('provides composition for couch search folders', () => {
+    return composition.load().then((objects) => {
+      expect(objects.length).toEqual(2);
+    });
+  });
 });
diff --git a/src/plugins/DeviceClassifier/plugin.js b/src/plugins/DeviceClassifier/plugin.js
new file mode 100644
index 00000000000..10597bf7031
--- /dev/null
+++ b/src/plugins/DeviceClassifier/plugin.js
@@ -0,0 +1,32 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import Agent from '../../utils/agent/Agent.js';
+import DeviceClassifier from './src/DeviceClassifier.js';
+
+export default () => {
+  return (openmct) => {
+    openmct.on('start', () => {
+      const agent = new Agent(window);
+      DeviceClassifier(agent, window.document);
+    });
+  };
+};
diff --git a/src/plugins/DeviceClassifier/src/DeviceClassifier.js b/src/plugins/DeviceClassifier/src/DeviceClassifier.js
new file mode 100644
index 00000000000..69b4021ac84
--- /dev/null
+++ b/src/plugins/DeviceClassifier/src/DeviceClassifier.js
@@ -0,0 +1,71 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/**
+ * Runs at application startup and adds a subset of the following
+ * CSS classes to the body of the document, depending on device
+ * attributes:
+ *
+ * * `mobile`: Phones or tablets.
+ * * `phone`: Phones specifically.
+ * * `tablet`: Tablets specifically.
+ * * `desktop`: Non-mobile devices.
+ * * `portrait`: Devices in a portrait-style orientation.
+ * * `landscape`: Devices in a landscape-style orientation.
+ * * `touch`: Device supports touch events.
+ *
+ * @param {utils/agent/Agent} agent
+ *        the service used to examine the user agent
+ * @param document the HTML DOM document object
+ * @constructor
+ */
+import DeviceMatchers from './DeviceMatchers.js';
+
+export default (agent, document) => {
+  const body = document.body;
+
+  Object.keys(DeviceMatchers).forEach((key, index, array) => {
+    if (DeviceMatchers[key](agent)) {
+      body.classList.add(key);
+    }
+  });
+
+  if (agent.isMobile()) {
+    const mediaQuery = window.matchMedia('(orientation: landscape)');
+    function eventHandler(event) {
+      if (event.matches) {
+        body.classList.remove('portrait');
+        body.classList.add('landscape');
+      } else {
+        body.classList.remove('landscape');
+        body.classList.add('portrait');
+      }
+    }
+
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener(`change`, eventHandler);
+    } else {
+      // Deprecated 'MediaQueryList' API, <Safari 14, IE, <Edge 16
+      mediaQuery.addListener(eventHandler);
+    }
+  }
+};
diff --git a/src/plugins/DeviceClassifier/src/DeviceClassifierSpec.js b/src/plugins/DeviceClassifier/src/DeviceClassifierSpec.js
new file mode 100644
index 00000000000..65341a0d50f
--- /dev/null
+++ b/src/plugins/DeviceClassifier/src/DeviceClassifierSpec.js
@@ -0,0 +1,89 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import DeviceClassifier from './DeviceClassifier.js';
+import DeviceMatchers from './DeviceMatchers.js';
+
+const AGENT_METHODS = ['isMobile', 'isPhone', 'isTablet', 'isPortrait', 'isLandscape', 'isTouch'];
+const TEST_PERMUTATIONS = [
+  ['isMobile', 'isPhone', 'isTouch', 'isPortrait'],
+  ['isMobile', 'isPhone', 'isTouch', 'isLandscape'],
+  ['isMobile', 'isTablet', 'isTouch', 'isPortrait'],
+  ['isMobile', 'isTablet', 'isTouch', 'isLandscape'],
+  ['isTouch'],
+  []
+];
+
+describe('DeviceClassifier', function () {
+  let mockAgent;
+  let mockDocument;
+  let mockClassList;
+
+  beforeEach(function () {
+    mockAgent = jasmine.createSpyObj('agent', AGENT_METHODS);
+
+    mockClassList = jasmine.createSpyObj('classList', ['add']);
+
+    mockDocument = jasmine.createSpyObj('document', {}, { body: { classList: mockClassList } });
+
+    AGENT_METHODS.forEach(function (m) {
+      mockAgent[m].and.returnValue(false);
+    });
+  });
+
+  TEST_PERMUTATIONS.forEach(function (trueMethods) {
+    const summary =
+      trueMethods.length === 0
+        ? 'device has no detected characteristics'
+        : 'device ' + trueMethods.join(', ');
+
+    describe('when ' + summary, function () {
+      beforeEach(function () {
+        trueMethods.forEach(function (m) {
+          mockAgent[m].and.returnValue(true);
+        });
+
+        // eslint-disable-next-line no-new
+        DeviceClassifier(mockAgent, mockDocument);
+      });
+
+      it('adds classes for matching, detected characteristics', function () {
+        Object.keys(DeviceMatchers)
+          .filter(function (m) {
+            return DeviceMatchers[m](mockAgent);
+          })
+          .forEach(function (key) {
+            expect(mockDocument.body.classList.add).toHaveBeenCalledWith(key);
+          });
+      });
+
+      it('does not add classes for non-matching characteristics', function () {
+        Object.keys(DeviceMatchers)
+          .filter(function (m) {
+            return !DeviceMatchers[m](mockAgent);
+          })
+          .forEach(function (key) {
+            expect(mockDocument.body.classList.add).not.toHaveBeenCalledWith(key);
+          });
+      });
+    });
+  });
+});
diff --git a/src/plugins/DeviceClassifier/src/DeviceMatchers.js b/src/plugins/DeviceClassifier/src/DeviceMatchers.js
new file mode 100644
index 00000000000..fe9f100275f
--- /dev/null
+++ b/src/plugins/DeviceClassifier/src/DeviceMatchers.js
@@ -0,0 +1,57 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/**
+ * An object containing key-value pairs, where keys are symbolic of
+ * device attributes, and values are functions that take the
+ * `agent` as inputs and return boolean values indicating
+ * whether or not the current device has these attributes.
+ *
+ * For internal use by the mobile support bundle.
+ *
+ * @memberof src/plugins/DeviceClassifier
+ * @private
+ */
+
+export default {
+  mobile: function (agent) {
+    return agent.isMobile();
+  },
+  phone: function (agent) {
+    return agent.isPhone();
+  },
+  tablet: function (agent) {
+    return agent.isTablet();
+  },
+  desktop: function (agent) {
+    return !agent.isMobile();
+  },
+  portrait: function (agent) {
+    return agent.isPortrait();
+  },
+  landscape: function (agent) {
+    return agent.isLandscape();
+  },
+  touch: function (agent) {
+    return agent.isTouch();
+  }
+};
diff --git a/src/plugins/DeviceClassifier/src/DeviceMatchersSpec.js b/src/plugins/DeviceClassifier/src/DeviceMatchersSpec.js
new file mode 100644
index 00000000000..3cd676ac661
--- /dev/null
+++ b/src/plugins/DeviceClassifier/src/DeviceMatchersSpec.js
@@ -0,0 +1,59 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import DeviceMatchers from './DeviceMatchers.js';
+
+describe('DeviceMatchers', function () {
+  let mockAgent;
+
+  beforeEach(function () {
+    mockAgent = jasmine.createSpyObj('agent', [
+      'isMobile',
+      'isPhone',
+      'isTablet',
+      'isPortrait',
+      'isLandscape',
+      'isTouch'
+    ]);
+  });
+
+  it('detects when a device is a desktop device', function () {
+    mockAgent.isMobile.and.returnValue(false);
+    expect(DeviceMatchers.desktop(mockAgent)).toBe(true);
+    mockAgent.isMobile.and.returnValue(true);
+    expect(DeviceMatchers.desktop(mockAgent)).toBe(false);
+  });
+
+  function method(deviceType) {
+    return 'is' + deviceType[0].toUpperCase() + deviceType.slice(1);
+  }
+
+  ['mobile', 'phone', 'tablet', 'landscape', 'portrait', 'landscape', 'touch'].forEach(
+    function (deviceType) {
+      it('detects when a device is a ' + deviceType + ' device', function () {
+        mockAgent[method(deviceType)].and.returnValue(true);
+        expect(DeviceMatchers[deviceType](mockAgent)).toBe(true);
+        mockAgent[method(deviceType)].and.returnValue(false);
+        expect(DeviceMatchers[deviceType](mockAgent)).toBe(false);
+      });
+    }
+  );
+});
diff --git a/src/plugins/ISOTimeFormat/ISOTimeFormat.js b/src/plugins/ISOTimeFormat/ISOTimeFormat.js
index 44bab4a8ad2..e05895d86f4 100644
--- a/src/plugins/ISOTimeFormat/ISOTimeFormat.js
+++ b/src/plugins/ISOTimeFormat/ISOTimeFormat.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,27 +21,27 @@
  *****************************************************************************/
 
 export default class ISOTimeFormat {
-    constructor() {
-        this.key = 'iso';
-    }
+  constructor() {
+    this.key = 'iso';
+  }
 
-    format(value) {
-        if (value !== undefined) {
-            return new Date(value).toISOString();
-        } else {
-            return value;
-        }
+  format(value) {
+    if (value !== undefined) {
+      return new Date(value).toISOString();
+    } else {
+      return value;
     }
+  }
 
-    parse(text) {
-        if (typeof text === 'number' || text === undefined) {
-            return text;
-        }
-
-        return Date.parse(text);
+  parse(text) {
+    if (typeof text === 'number' || text === undefined) {
+      return text;
     }
 
-    validate(text) {
-        return !isNaN(Date.parse(text));
-    }
+    return Date.parse(text);
+  }
+
+  validate(text) {
+    return !isNaN(Date.parse(text));
+  }
 }
diff --git a/src/plugins/ISOTimeFormat/plugin.js b/src/plugins/ISOTimeFormat/plugin.js
index e12d86d39c0..fc9d8532169 100644
--- a/src/plugins/ISOTimeFormat/plugin.js
+++ b/src/plugins/ISOTimeFormat/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,10 +20,10 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import ISOTimeFormat from './ISOTimeFormat';
+import ISOTimeFormat from './ISOTimeFormat.js';
 
 export default function () {
-    return function install(openmct) {
-        openmct.telemetry.addFormat(new ISOTimeFormat());
-    };
+  return function install(openmct) {
+    openmct.telemetry.addFormat(new ISOTimeFormat());
+  };
 }
diff --git a/src/plugins/ISOTimeFormat/pluginSpec.js b/src/plugins/ISOTimeFormat/pluginSpec.js
index 329d6f7d2c6..d189e4d9842 100644
--- a/src/plugins/ISOTimeFormat/pluginSpec.js
+++ b/src/plugins/ISOTimeFormat/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -22,34 +22,33 @@
 
 import ISOTimeFormat from './ISOTimeFormat.js';
 
-describe("the plugin", () => {
-    const ISO_KEY = 'iso';
-    const JUNK = "junk";
-    const MOON_LANDING_TIMESTAMP = -14256000000;
-    const MOON_LANDING_DATESTRING = '1969-07-20T00:00:00.000Z';
-    let isoFormatter;
+describe('the plugin', () => {
+  const ISO_KEY = 'iso';
+  const JUNK = 'junk';
+  const MOON_LANDING_TIMESTAMP = -14256000000;
+  const MOON_LANDING_DATESTRING = '1969-07-20T00:00:00.000Z';
+  let isoFormatter;
 
-    beforeEach(() => {
-        isoFormatter = new ISOTimeFormat();
-    });
-
-    describe("creates a new ISO based formatter", function () {
+  beforeEach(() => {
+    isoFormatter = new ISOTimeFormat();
+  });
 
-        it("with the key 'iso'", () => {
-            expect(isoFormatter.key).toBe(ISO_KEY);
-        });
+  describe('creates a new ISO based formatter', function () {
+    it("with the key 'iso'", () => {
+      expect(isoFormatter.key).toBe(ISO_KEY);
+    });
 
-        it("that will format a timestamp in ISO standard format", () => {
-            expect(isoFormatter.format(MOON_LANDING_TIMESTAMP)).toBe(MOON_LANDING_DATESTRING);
-        });
+    it('that will format a timestamp in ISO standard format', () => {
+      expect(isoFormatter.format(MOON_LANDING_TIMESTAMP)).toBe(MOON_LANDING_DATESTRING);
+    });
 
-        it("that will parse an ISO Date String into milliseconds", () => {
-            expect(isoFormatter.parse(MOON_LANDING_DATESTRING)).toBe(MOON_LANDING_TIMESTAMP);
-        });
+    it('that will parse an ISO Date String into milliseconds', () => {
+      expect(isoFormatter.parse(MOON_LANDING_DATESTRING)).toBe(MOON_LANDING_TIMESTAMP);
+    });
 
-        it("that will validate correctly", () => {
-            expect(isoFormatter.validate(MOON_LANDING_DATESTRING)).toBe(true);
-            expect(isoFormatter.validate(JUNK)).toBe(false);
-        });
+    it('that will validate correctly', () => {
+      expect(isoFormatter.validate(MOON_LANDING_DATESTRING)).toBe(true);
+      expect(isoFormatter.validate(JUNK)).toBe(false);
     });
+  });
 });
diff --git a/src/plugins/LADTable/LADTableCompositionPolicy.js b/src/plugins/LADTable/LADTableCompositionPolicy.js
index d98fa2608d5..f07b6010c49 100644
--- a/src/plugins/LADTable/LADTableCompositionPolicy.js
+++ b/src/plugins/LADTable/LADTableCompositionPolicy.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,13 +21,13 @@
  *****************************************************************************/
 
 export default function ladTableCompositionPolicy(openmct) {
-    return function (parent, child) {
-        if (parent.type === 'LadTable') {
-            return openmct.telemetry.isTelemetryObject(child);
-        } else if (parent.type === 'LadTableSet') {
-            return child.type === 'LadTable';
-        }
+  return function (parent, child) {
+    if (parent.type === 'LadTable') {
+      return openmct.telemetry.isTelemetryObject(child);
+    } else if (parent.type === 'LadTableSet') {
+      return child.type === 'LadTable';
+    }
 
-        return true;
-    };
+    return true;
+  };
 }
diff --git a/src/plugins/LADTable/LADTableConfiguration.js b/src/plugins/LADTable/LADTableConfiguration.js
new file mode 100644
index 00000000000..b6bb1b2dd44
--- /dev/null
+++ b/src/plugins/LADTable/LADTableConfiguration.js
@@ -0,0 +1,64 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import EventEmitter from 'EventEmitter';
+import { markRaw } from 'vue';
+export default class LADTableConfiguration extends EventEmitter {
+  constructor(domainObject, openmct) {
+    super();
+
+    this.domainObject = domainObject;
+
+    // Prevent Vue from making this a Proxy, otherwise
+    // it cannot access any private methods (like #mutate()).
+    this.openmct = markRaw(openmct);
+
+    this.objectMutated = this.objectMutated.bind(this);
+    this.unlistenFromMutation = openmct.objects.observe(
+      domainObject,
+      'configuration',
+      this.objectMutated
+    );
+  }
+
+  getConfiguration() {
+    const configuration = this.domainObject.configuration || {};
+    configuration.hiddenColumns = configuration.hiddenColumns || {};
+    configuration.isFixedLayout = configuration.isFixedLayout ?? true;
+
+    return configuration;
+  }
+
+  updateConfiguration(configuration) {
+    this.openmct.objects.mutate(this.domainObject, 'configuration', configuration);
+  }
+
+  objectMutated(configuration) {
+    if (configuration !== undefined) {
+      this.emit('change', configuration);
+    }
+  }
+
+  destroy() {
+    this.unlistenFromMutation();
+  }
+}
diff --git a/src/plugins/LADTable/LADTableConfigurationViewProvider.js b/src/plugins/LADTable/LADTableConfigurationViewProvider.js
new file mode 100644
index 00000000000..143079d17e1
--- /dev/null
+++ b/src/plugins/LADTable/LADTableConfigurationViewProvider.js
@@ -0,0 +1,74 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
+
+import LadTableConfiguration from './components/LadTableConfiguration.vue';
+
+export default function LADTableConfigurationViewProvider(openmct) {
+  return {
+    key: 'lad-table-configuration',
+    name: 'LAD Table Configuration',
+    canView(selection) {
+      if (selection.length !== 1 || selection[0].length === 0) {
+        return false;
+      }
+
+      const object = selection[0][0].context.item;
+
+      return object?.type === 'LadTable' || object?.type === 'LadTableSet';
+    },
+    view(selection) {
+      let _destroy = null;
+
+      return {
+        show(element) {
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                LadTableConfiguration
+              },
+              provide: {
+                openmct
+              },
+              template: '<LadTableConfiguration />'
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+        },
+        priority() {
+          return 1;
+        },
+        destroy() {
+          if (_destroy) {
+            _destroy();
+          }
+        }
+      };
+    }
+  };
+}
diff --git a/src/plugins/LADTable/LADTableSetViewProvider.js b/src/plugins/LADTable/LADTableSetViewProvider.js
index 2fec17fd73a..747a7e522f8 100644
--- a/src/plugins/LADTable/LADTableSetViewProvider.js
+++ b/src/plugins/LADTable/LADTableSetViewProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,24 +20,24 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import LadTableSetView from './LadTableSetView';
+import LadTableSetView from './LadTableSetView.js';
 
 export default function LADTableSetViewProvider(openmct) {
-    return {
-        key: 'LadTableSet',
-        name: 'LAD Table Set',
-        cssClass: 'icon-tabular-lad-set',
-        canView: function (domainObject) {
-            return domainObject.type === 'LadTableSet';
-        },
-        canEdit: function (domainObject) {
-            return domainObject.type === 'LadTableSet';
-        },
-        view: function (domainObject, objectPath) {
-            return new LadTableSetView(openmct, domainObject, objectPath);
-        },
-        priority: function () {
-            return 1;
-        }
-    };
+  return {
+    key: 'LadTableSet',
+    name: 'LAD Table Set',
+    cssClass: 'icon-tabular-lad-set',
+    canView: function (domainObject) {
+      return domainObject.type === 'LadTableSet';
+    },
+    canEdit: function (domainObject) {
+      return domainObject.type === 'LadTableSet';
+    },
+    view: function (domainObject, objectPath) {
+      return new LadTableSetView(openmct, domainObject, objectPath);
+    },
+    priority: function () {
+      return 1;
+    }
+  };
 }
diff --git a/src/plugins/LADTable/LADTableView.js b/src/plugins/LADTable/LADTableView.js
index e7dd15b2099..6f56d39d143 100644
--- a/src/plugins/LADTable/LADTableView.js
+++ b/src/plugins/LADTable/LADTableView.js
@@ -1,45 +1,84 @@
-import LadTable from './components/LADTable.vue';
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
 
-import Vue from 'vue';
+import mount from 'utils/mount';
+
+import LadTable from './components/LadTable.vue';
+import LADTableConfiguration from './LADTableConfiguration.js';
 
 export default class LADTableView {
-    constructor(openmct, domainObject, objectPath) {
-        this.openmct = openmct;
-        this.domainObject = domainObject;
-        this.objectPath = objectPath;
-        this.component = undefined;
-    }
+  constructor(openmct, domainObject, objectPath) {
+    this.openmct = openmct;
+    this.domainObject = domainObject;
+    this.objectPath = objectPath;
+    this.component = null;
+    this._destroy = null;
+  }
 
-    show(element) {
-        this.component = new Vue({
-            el: element,
-            components: {
-                LadTable
-            },
-            provide: {
-                openmct: this.openmct,
-                currentView: this
-            },
-            data: () => {
-                return {
-                    domainObject: this.domainObject,
-                    objectPath: this.objectPath
-                };
-            },
-            template: '<lad-table ref="ladTable" :domain-object="domainObject" :object-path="objectPath"></lad-table>'
-        });
-    }
+  show(element, isEditing, { renderWhenVisible }) {
+    let ladTableConfiguration = new LADTableConfiguration(this.domainObject, this.openmct);
 
-    getViewContext() {
-        if (!this.component) {
-            return {};
-        }
+    const { vNode, destroy } = mount(
+      {
+        el: element,
+        components: {
+          LadTable
+        },
+        provide: {
+          openmct: this.openmct,
+          currentView: this,
+          ladTableConfiguration,
+          renderWhenVisible
+        },
+        data: () => {
+          return {
+            domainObject: this.domainObject,
+            objectPath: this.objectPath
+          };
+        },
+        template:
+          '<lad-table ref="ladTable" :domain-object="domainObject" :object-path="objectPath"></lad-table>'
+      },
+      {
+        app: this.openmct.app,
+        element
+      }
+    );
+    this.component = vNode.componentInstance;
+    this._destroy = destroy;
+  }
 
-        return this.component.$refs.ladTable.getViewContext();
+  getViewContext() {
+    if (!this.component) {
+      return {};
     }
 
-    destroy(element) {
-        this.component.$destroy();
-        this.component = undefined;
+    return this.component.$refs.ladTable.getViewContext();
+  }
+
+  destroy() {
+    if (this._destroy) {
+      this._destroy();
     }
+    this.component = null;
+  }
 }
diff --git a/src/plugins/LADTable/LADTableViewProvider.js b/src/plugins/LADTable/LADTableViewProvider.js
index dfccce7e763..2ec824fe3f7 100644
--- a/src/plugins/LADTable/LADTableViewProvider.js
+++ b/src/plugins/LADTable/LADTableViewProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,29 +20,34 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import LADTableView from './LADTableView';
+import LADTableView from './LADTableView.js';
 
 export default class LADTableViewProvider {
-    constructor(openmct) {
-        this.openmct = openmct;
-        this.name = 'LAD Table';
-        this.key = 'LadTable';
-        this.cssClass = 'icon-tabular-lad';
-    }
+  constructor(openmct) {
+    this.openmct = openmct;
+    this.name = 'LAD Table';
+    this.key = 'LadTable';
+    this.cssClass = 'icon-tabular-lad';
+  }
 
-    canView(domainObject) {
-        return domainObject.type === 'LadTable';
-    }
+  canView(domainObject) {
+    const supportsComposition = this.openmct.composition.supportsComposition(domainObject);
+    const providesTelemetry = this.openmct.telemetry.isTelemetryObject(domainObject);
+    const isLadTable = domainObject.type === 'LadTable';
+    const isConditionSet = domainObject.type === 'conditionSet';
 
-    canEdit(domainObject) {
-        return domainObject.type === 'LadTable';
-    }
+    return !isConditionSet && (isLadTable || (providesTelemetry && supportsComposition));
+  }
 
-    view(domainObject, objectPath) {
-        return new LADTableView(this.openmct, domainObject, objectPath);
-    }
+  canEdit(domainObject) {
+    return domainObject.type === 'LadTable';
+  }
 
-    priority(domainObject) {
-        return 1;
-    }
+  view(domainObject, objectPath) {
+    return new LADTableView(this.openmct, domainObject, objectPath);
+  }
+
+  priority(domainObject) {
+    return this.openmct.priority.HIGH;
+  }
 }
diff --git a/src/plugins/LADTable/LadTableSetView.js b/src/plugins/LADTable/LadTableSetView.js
index 7a8d13a5f6b..2e8d0a73543 100644
--- a/src/plugins/LADTable/LadTableSetView.js
+++ b/src/plugins/LADTable/LadTableSetView.js
@@ -1,45 +1,82 @@
-import LadTableSet from './components/LadTableSet.vue';
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
 
-import Vue from 'vue';
+import LadTableSet from './components/LadTableSet.vue';
+import LADTableConfiguration from './LADTableConfiguration.js';
 
 export default class LadTableSetView {
-    constructor(openmct, domainObject, objectPath) {
-        this.openmct = openmct;
-        this.domainObject = domainObject;
-        this.objectPath = objectPath;
-        this.component = undefined;
-    }
+  constructor(openmct, domainObject, objectPath) {
+    this.openmct = openmct;
+    this.domainObject = domainObject;
+    this.objectPath = objectPath;
+    this._destroy = null;
+    this.component = null;
+  }
 
-    show(element) {
-        this.component = new Vue({
-            el: element,
-            components: {
-                LadTableSet
-            },
-            provide: {
-                openmct: this.openmct,
-                objectPath: this.objectPath,
-                currentView: this
-            },
-            data: () => {
-                return {
-                    domainObject: this.domainObject
-                };
-            },
-            template: '<lad-table-set ref="ladTableSet" :domain-object="domainObject"></lad-table-set>'
-        });
-    }
+  show(element, isEditing, { renderWhenVisible }) {
+    let ladTableConfiguration = new LADTableConfiguration(this.domainObject, this.openmct);
 
-    getViewContext() {
-        if (!this.component) {
-            return {};
-        }
+    const { vNode, destroy } = mount(
+      {
+        el: element,
+        components: {
+          LadTableSet
+        },
+        provide: {
+          openmct: this.openmct,
+          objectPath: this.objectPath,
+          currentView: this,
+          ladTableConfiguration,
+          renderWhenVisible
+        },
+        data: () => {
+          return {
+            domainObject: this.domainObject
+          };
+        },
+        template: '<lad-table-set ref="ladTableSet" :domain-object="domainObject"></lad-table-set>'
+      },
+      {
+        app: this.openmct.app,
+        element
+      }
+    );
+    this._destroy = destroy;
+    this.component = vNode.componentInstance;
+  }
 
-        return this.component.$refs.ladTableSet.getViewContext();
+  getViewContext() {
+    if (!this.component) {
+      return {};
     }
 
-    destroy(element) {
-        this.component.$destroy();
-        this.component = undefined;
+    return this.component.$refs.ladTableSet.getViewContext();
+  }
+
+  destroy() {
+    if (this._destroy) {
+      this._destroy();
     }
+  }
 }
diff --git a/src/plugins/LADTable/ViewActions.js b/src/plugins/LADTable/ViewActions.js
new file mode 100644
index 00000000000..a34ba430f59
--- /dev/null
+++ b/src/plugins/LADTable/ViewActions.js
@@ -0,0 +1,60 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+const expandColumns = {
+  name: 'Expand Columns',
+  key: 'lad-expand-columns',
+  description: 'Increase column widths to fit currently available data.',
+  cssClass: 'icon-arrows-right-left labeled',
+  invoke: (objectPath, view) => {
+    view.getViewContext().toggleFixedLayout();
+  },
+  showInStatusBar: true,
+  group: 'view'
+};
+
+const autosizeColumns = {
+  name: 'Autosize Columns',
+  key: 'lad-autosize-columns',
+  description: 'Automatically size columns to fit the table into the available space.',
+  cssClass: 'icon-expand labeled',
+  invoke: (objectPath, view) => {
+    view.getViewContext().toggleFixedLayout();
+  },
+  showInStatusBar: true,
+  group: 'view'
+};
+
+const viewActions = [expandColumns, autosizeColumns];
+
+viewActions.forEach((action) => {
+  action.appliesTo = (objectPath, view = {}) => {
+    const viewContext = view.getViewContext && view.getViewContext();
+    if (!viewContext) {
+      return false;
+    }
+
+    return viewContext.type === 'lad-table';
+  };
+});
+
+export default viewActions;
diff --git a/src/plugins/LADTable/components/LADRow.vue b/src/plugins/LADTable/components/LADRow.vue
deleted file mode 100644
index 6778a3c6da7..00000000000
--- a/src/plugins/LADTable/components/LADRow.vue
+++ /dev/null
@@ -1,218 +0,0 @@
-
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-<template>
-<tr
-    class="js-lad-table__body__row"
-    @contextmenu.prevent="showContextMenu"
->
-    <td class="js-first-data">{{ domainObject.name }}</td>
-    <td class="js-second-data">{{ formattedTimestamp }}</td>
-    <td
-        class="js-third-data"
-        :class="valueClass"
-    >{{ value }}</td>
-    <td
-        v-if="hasUnits"
-        class="js-units"
-    >
-        {{ unit }}
-    </td>
-</tr>
-</template>
-
-<script>
-
-const CONTEXT_MENU_ACTIONS = [
-    'viewDatumAction',
-    'viewHistoricalData',
-    'remove'
-];
-
-export default {
-    inject: ['openmct', 'currentView'],
-    props: {
-        domainObject: {
-            type: Object,
-            required: true
-        },
-        pathToTable: {
-            type: Array,
-            required: true
-        },
-        hasUnits: {
-            type: Boolean,
-            requred: true
-        }
-    },
-    data() {
-        return {
-            timestamp: undefined,
-            value: '---',
-            valueClass: '',
-            unit: ''
-        };
-    },
-    computed: {
-        formattedTimestamp() {
-            return this.timestamp !== undefined ? this.getFormattedTimestamp(this.timestamp) : '---';
-        },
-        objectPath() {
-            return [this.domainObject, ...this.pathToTable];
-        }
-    },
-    mounted() {
-        this.metadata = this.openmct.telemetry.getMetadata(this.domainObject);
-        this.formats = this.openmct.telemetry.getFormatMap(this.metadata);
-        this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-        this.bounds = this.openmct.time.bounds();
-
-        this.limitEvaluator = this.openmct
-            .telemetry
-            .limitEvaluator(this.domainObject);
-
-        this.openmct.time.on('timeSystem', this.updateTimeSystem);
-        this.openmct.time.on('bounds', this.updateBounds);
-
-        this.timestampKey = this.openmct.time.timeSystem().key;
-
-        this.valueMetadata = this
-            .metadata
-            .valuesForHints(['range'])[0];
-
-        this.valueKey = this.valueMetadata.key;
-
-        this.unsubscribe = this.openmct
-            .telemetry
-            .subscribe(this.domainObject, this.updateValues);
-
-        this.requestHistory();
-
-        if (this.hasUnits) {
-            this.setUnit();
-        }
-    },
-    destroyed() {
-        this.unsubscribe();
-        this.openmct.time.off('timeSystem', this.updateTimeSystem);
-        this.openmct.time.off('bounds', this.updateBounds);
-    },
-    methods: {
-        updateValues(datum) {
-            let newTimestamp = this.getParsedTimestamp(datum);
-            let limit;
-
-            if (this.shouldUpdate(newTimestamp)) {
-                this.datum = datum;
-                this.timestamp = newTimestamp;
-                this.value = this.formats[this.valueKey].format(datum);
-                limit = this.limitEvaluator.evaluate(datum, this.valueMetadata);
-                if (limit) {
-                    this.valueClass = limit.cssClass;
-                } else {
-                    this.valueClass = '';
-                }
-            }
-        },
-        shouldUpdate(newTimestamp) {
-            let newTimestampInBounds = this.inBounds(newTimestamp);
-            let noExistingTimestamp = this.timestamp === undefined;
-            let newTimestampIsLatest = newTimestamp > this.timestamp;
-
-            return newTimestampInBounds
-                && (noExistingTimestamp || newTimestampIsLatest);
-        },
-        requestHistory() {
-            this.openmct
-                .telemetry
-                .request(this.domainObject, {
-                    start: this.bounds.start,
-                    end: this.bounds.end,
-                    size: 1,
-                    strategy: 'latest'
-                })
-                .then((array) => this.updateValues(array[array.length - 1]));
-        },
-        updateBounds(bounds, isTick) {
-            this.bounds = bounds;
-            if (!isTick) {
-                this.resetValues();
-                this.requestHistory();
-            }
-        },
-        inBounds(timestamp) {
-            return timestamp >= this.bounds.start && timestamp <= this.bounds.end;
-        },
-        updateTimeSystem(timeSystem) {
-            this.resetValues();
-            this.timestampKey = timeSystem.key;
-        },
-        updateViewContext() {
-            this.$emit('rowContextClick', {
-                viewHistoricalData: true,
-                viewDatumAction: true,
-                getDatum: () => {
-                    return this.datum;
-                }
-            });
-        },
-        showContextMenu(event) {
-            this.updateViewContext();
-
-            const actions = CONTEXT_MENU_ACTIONS.map(key => this.openmct.actions.getAction(key));
-            const menuItems = this.openmct.menus.actionsToMenuItems(actions, this.objectPath, this.currentView);
-            if (menuItems.length) {
-                this.openmct.menus.showMenu(event.x, event.y, menuItems);
-            }
-        },
-        resetValues() {
-            this.value = '---';
-            this.timestamp = undefined;
-            this.valueClass = '';
-        },
-        getParsedTimestamp(timestamp) {
-            if (this.timeSystemFormat()) {
-                return this.formats[this.timestampKey].parse(timestamp);
-            }
-        },
-        getFormattedTimestamp(timestamp) {
-            if (this.timeSystemFormat()) {
-                return this.formats[this.timestampKey].format(timestamp);
-            }
-        },
-        timeSystemFormat() {
-            if (this.formats[this.timestampKey]) {
-                return true;
-            } else {
-                console.warn(`No formatter for ${this.timestampKey} time system for ${this.domainObject.name}.`);
-
-                return false;
-            }
-        },
-        setUnit() {
-            this.unit = this.valueMetadata.unit || '';
-        }
-    }
-};
-</script>
-
diff --git a/src/plugins/LADTable/components/LADTable.vue b/src/plugins/LADTable/components/LADTable.vue
deleted file mode 100644
index 764d2b50a2a..00000000000
--- a/src/plugins/LADTable/components/LADTable.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-<template>
-<div class="c-lad-table-wrapper u-style-receiver js-style-receiver">
-    <table class="c-table c-lad-table">
-        <thead>
-            <tr>
-                <th>Name</th>
-                <th>Timestamp</th>
-                <th>Value</th>
-                <th v-if="hasUnits">Unit</th>
-            </tr>
-        </thead>
-        <tbody>
-            <lad-row
-                v-for="ladRow in items"
-                :key="ladRow.key"
-                :domain-object="ladRow.domainObject"
-                :path-to-table="objectPath"
-                :has-units="hasUnits"
-                @rowContextClick="updateViewContext"
-            />
-        </tbody>
-    </table>
-</div>
-</template>
-
-<script>
-import LadRow from './LADRow.vue';
-
-export default {
-    components: {
-        LadRow
-    },
-    inject: ['openmct', 'currentView'],
-    props: {
-        domainObject: {
-            type: Object,
-            required: true
-        },
-        objectPath: {
-            type: Array,
-            required: true
-        }
-    },
-    data() {
-        return {
-            items: [],
-            viewContext: {}
-        };
-    },
-    computed: {
-        hasUnits() {
-            let itemsWithUnits = this.items.filter((item) => {
-                let metadata = this.openmct.telemetry.getMetadata(item.domainObject);
-
-                return this.metadataHasUnits(metadata.valueMetadatas);
-
-            });
-
-            return itemsWithUnits.length !== 0;
-        }
-    },
-    mounted() {
-        this.composition = this.openmct.composition.get(this.domainObject);
-        this.composition.on('add', this.addItem);
-        this.composition.on('remove', this.removeItem);
-        this.composition.on('reorder', this.reorder);
-        this.composition.load();
-    },
-    destroyed() {
-        this.composition.off('add', this.addItem);
-        this.composition.off('remove', this.removeItem);
-        this.composition.off('reorder', this.reorder);
-    },
-    methods: {
-        addItem(domainObject) {
-            let item = {};
-            item.domainObject = domainObject;
-            item.key = this.openmct.objects.makeKeyString(domainObject.identifier);
-
-            this.items.push(item);
-        },
-        removeItem(identifier) {
-            let index = this.items.findIndex(item => this.openmct.objects.makeKeyString(identifier) === item.key);
-
-            this.items.splice(index, 1);
-        },
-        reorder(reorderPlan) {
-            let oldItems = this.items.slice();
-            reorderPlan.forEach((reorderEvent) => {
-                this.$set(this.items, reorderEvent.newIndex, oldItems[reorderEvent.oldIndex]);
-            });
-        },
-        metadataHasUnits(valueMetadatas) {
-            let metadataWithUnits = valueMetadatas.filter(metadatum => metadatum.unit);
-
-            return metadataWithUnits.length > 0;
-        },
-        updateViewContext(rowContext) {
-            this.viewContext.row = rowContext;
-        },
-        getViewContext() {
-            return this.viewContext;
-        }
-    }
-};
-</script>
diff --git a/src/plugins/LADTable/components/LadRow.vue b/src/plugins/LADTable/components/LadRow.vue
new file mode 100644
index 00000000000..ea7e525435b
--- /dev/null
+++ b/src/plugins/LADTable/components/LadRow.vue
@@ -0,0 +1,324 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <tr
+    ref="tableRow"
+    class="js-lad-table__body__row c-table__selectable-row"
+    @click="clickedRow"
+    @contextmenu.prevent="showContextMenu"
+  >
+    <td
+      ref="tableCell"
+      class="js-first-data"
+      @mouseover.ctrl="showToolTip"
+      @mouseleave="hideToolTip"
+    >
+      {{ domainObject.name }}
+    </td>
+    <td v-if="showTimestamp" aria-label="lad timestamp" class="js-second-data">
+      {{ formattedTimestamp }}
+    </td>
+    <td aria-label="lad value" class="js-third-data" :class="valueClasses">{{ value }}</td>
+    <td v-if="hasUnits" class="js-units">
+      {{ unit }}
+    </td>
+    <td v-if="showType" aria-label="lad type" class="js-type-data">{{ typeLabel }}</td>
+    <td
+      v-for="limit in formattedLimitValues"
+      :key="limit.key"
+      aria-label="lad limit value"
+      class="js-limit-data"
+    >
+      {{ limit.value }}
+    </td>
+  </tr>
+</template>
+
+<script>
+const CONTEXT_MENU_ACTIONS = ['viewDatumAction', 'viewHistoricalData', 'remove'];
+const BLANK_VALUE = '---';
+
+import identifierToString from '/src/tools/url.js';
+import PreviewAction from '@/ui/preview/PreviewAction.js';
+
+import tooltipHelpers from '../../../api/tooltips/tooltipMixins.js';
+
+export default {
+  mixins: [tooltipHelpers],
+  inject: ['openmct', 'currentView', 'renderWhenVisible'],
+  props: {
+    domainObject: {
+      type: Object,
+      required: true
+    },
+    pathToTable: {
+      type: Array,
+      required: true
+    },
+    hasUnits: {
+      type: Boolean,
+      required: true
+    },
+    isStale: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    configuration: {
+      type: Object,
+      required: true
+    },
+    limitDefinition: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    limitColumnNames: {
+      // for ordering
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ['row-context-click'],
+  data() {
+    return {
+      datum: undefined,
+      timestamp: undefined,
+      timestampKey: undefined,
+      valueKey: null,
+      composition: [],
+      unit: ''
+    };
+  },
+  computed: {
+    value() {
+      if (!this.datum || this.isAggregate) {
+        return BLANK_VALUE;
+      }
+
+      return this.formats[this.valueKey].format(this.datum);
+    },
+    formattedLimitValues() {
+      if (!this.valueKey) {
+        return [];
+      }
+      return this.limitColumnNames.map((column) => {
+        if (this.limitDefinition?.[column.key]) {
+          const highValue = this.limitDefinition[column.key].high[this.valueKey];
+          const lowValue = this.limitDefinition[column.key].low[this.valueKey];
+          return {
+            key: column.key,
+            value: `${lowValue} → ${highValue}`
+          };
+        } else {
+          return {
+            key: column.key,
+            value: BLANK_VALUE
+          };
+        }
+      });
+    },
+    typeLabel() {
+      if (this.isAggregate) {
+        return 'Aggregate';
+      }
+
+      return 'Telemetry';
+    },
+    isAggregate() {
+      return this.composition && this.composition.length > 0;
+    },
+    valueClasses() {
+      let classes = [];
+
+      if (this.isStale) {
+        classes.push('is-stale');
+      }
+
+      if (this.datum) {
+        const limit = this.limitEvaluator.evaluate(this.datum, this.valueMetadata);
+
+        if (limit) {
+          classes.push(limit.cssClass);
+        }
+      }
+
+      return classes;
+    },
+    formattedTimestamp() {
+      if (!this.timestamp || this.isAggregate) {
+        return BLANK_VALUE;
+      }
+
+      return this.timeSystemFormat.format(this.timestamp);
+    },
+    timeSystemFormat() {
+      if (!this.formats[this.timestampKey]) {
+        console.warn(
+          `No formatter for ${this.timestampKey} time system for ${this.domainObject.name}.`
+        );
+      }
+
+      return this.formats[this.timestampKey];
+    },
+    objectPath() {
+      return [this.domainObject, ...this.pathToTable];
+    },
+    showTimestamp() {
+      return !this.configuration?.hiddenColumns?.timestamp;
+    },
+    showType() {
+      return !this.configuration?.hiddenColumns?.type;
+    }
+  },
+  async mounted() {
+    this.metadata = this.openmct.telemetry.getMetadata(this.domainObject);
+    this.formats = this.openmct.telemetry.getFormatMap(this.metadata);
+    this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+    const compositionCollection = this.openmct.composition.get(this.domainObject);
+    if (compositionCollection) {
+      this.composition = await compositionCollection.load();
+    }
+
+    this.timeContext = this.openmct.time.getContextForView(this.objectPath);
+
+    this.limitEvaluator = this.openmct.telemetry.limitEvaluator(this.domainObject);
+
+    this.openmct.time.on('timeSystem', this.updateTimeSystem);
+
+    this.timestampKey = this.openmct.time.timeSystem().key;
+
+    this.valueMetadata = undefined;
+
+    if (this.metadata) {
+      this.valueMetadata =
+        this.metadata.valuesForHints(['range'])[0] || this.firstNonDomainAttribute(this.metadata);
+    }
+
+    this.valueKey = this.valueMetadata ? this.valueMetadata.key : undefined;
+
+    this.telemetryCollection = this.openmct.telemetry.requestCollection(this.domainObject, {
+      size: 1,
+      strategy: 'latest',
+      timeContext: this.timeContext
+    });
+    this.telemetryCollection.on('add', this.setLatestValues);
+    this.telemetryCollection.on('clear', this.resetValues);
+    this.telemetryCollection.load();
+
+    if (this.hasUnits) {
+      this.setUnit();
+    }
+
+    this.previewAction = new PreviewAction(this.openmct);
+    this.previewAction.on('isVisible', this.togglePreviewState);
+  },
+  unmounted() {
+    this.openmct.time.off('timeSystem', this.updateTimeSystem);
+    this.telemetryCollection.off('add', this.setLatestValues);
+    this.telemetryCollection.off('clear', this.resetValues);
+    this.previewAction.off('isVisible', this.togglePreviewState);
+
+    this.telemetryCollection.destroy();
+  },
+  methods: {
+    updateView() {
+      if (!this.updatingView) {
+        this.updatingView = this.renderWhenVisible(() => {
+          this.timestamp = this.getParsedTimestamp(this.latestDatum);
+          this.datum = this.latestDatum;
+          this.updatingView = false;
+        });
+      }
+    },
+    clickedRow(event) {
+      if (this.openmct.editor.isEditing()) {
+        event.preventDefault();
+        this.preview(this.objectPath);
+      } else {
+        const resultUrl = identifierToString(this.openmct, this.objectPath);
+        this.openmct.router.navigate(resultUrl);
+      }
+    },
+    preview(objectPath) {
+      if (this.previewAction.appliesTo(objectPath)) {
+        this.previewAction.invoke(objectPath);
+      }
+    },
+    setLatestValues(data) {
+      this.latestDatum = data[data.length - 1];
+      this.updateView();
+    },
+    updateTimeSystem(timeSystem) {
+      this.timestampKey = timeSystem.key;
+    },
+    updateViewContext() {
+      this.$emit('row-context-click', {
+        viewHistoricalData: true,
+        viewDatumAction: true,
+        getDatum: () => {
+          return this.datum;
+        }
+      });
+    },
+    showContextMenu(event) {
+      this.updateViewContext();
+
+      const actions = CONTEXT_MENU_ACTIONS.map((key) => this.openmct.actions.getAction(key));
+      const menuItems = this.openmct.menus.actionsToMenuItems(
+        actions,
+        this.objectPath,
+        this.currentView
+      );
+      if (menuItems.length) {
+        this.openmct.menus.showMenu(event.x, event.y, menuItems);
+      }
+    },
+    resetValues() {
+      this.timestamp = undefined;
+      this.datum = undefined;
+    },
+    getParsedTimestamp(timestamp) {
+      if (this.timeSystemFormat) {
+        return this.timeSystemFormat.parse(timestamp);
+      }
+    },
+    setUnit() {
+      this.unit = this.valueMetadata ? this.valueMetadata.unit : '';
+    },
+    firstNonDomainAttribute(metadata) {
+      return metadata
+        .values()
+        .find((metadatum) => metadatum.hints.domain === undefined && metadatum.key !== 'name');
+    },
+    async showToolTip() {
+      const { BELOW } = this.openmct.tooltips.TOOLTIP_LOCATIONS;
+      this.buildToolTip(await this.getObjectPath(), BELOW, 'tableCell');
+    }
+  }
+};
+</script>
diff --git a/src/plugins/LADTable/components/LadTable.vue b/src/plugins/LADTable/components/LadTable.vue
new file mode 100644
index 00000000000..bc602e5ab43
--- /dev/null
+++ b/src/plugins/LADTable/components/LadTable.vue
@@ -0,0 +1,233 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-lad-table-wrapper u-style-receiver js-style-receiver" :class="staleClass">
+    <table class="c-table c-lad-table" :class="applyLayoutClass">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th v-if="showTimestamp">Timestamp</th>
+          <th>Value</th>
+          <th v-if="hasUnits">Units</th>
+          <th v-if="showType">Type</th>
+          <th v-for="limitColumn in limitColumnNames" :key="limitColumn.key">
+            {{ limitColumn.label }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <lad-row
+          v-for="ladRow in items"
+          :key="ladRow.key"
+          :domain-object="ladRow.domainObject"
+          :limit-definition="ladRow.limitDefinition"
+          :limit-column-names="limitColumnNames"
+          :path-to-table="objectPath"
+          :has-units="hasUnits"
+          :is-stale="staleObjects.includes(ladRow.key)"
+          :configuration="configuration"
+          @row-context-click="updateViewContext"
+        />
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { nextTick, toRaw } from 'vue';
+
+import stalenessMixin from '@/ui/mixins/staleness-mixin';
+
+import LadRow from './LadRow.vue';
+
+export default {
+  components: {
+    LadRow
+  },
+  mixins: [stalenessMixin],
+  inject: ['openmct', 'currentView', 'ladTableConfiguration'],
+  props: {
+    domainObject: {
+      type: Object,
+      required: true
+    },
+    objectPath: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      items: [],
+      viewContext: {},
+      configuration: this.ladTableConfiguration.getConfiguration()
+    };
+  },
+  computed: {
+    hasUnits() {
+      let itemsWithUnits = this.items.filter((item) => {
+        let metadata = this.openmct.telemetry.getMetadata(item.domainObject);
+        const valueMetadatas = metadata ? metadata.valueMetadatas : [];
+
+        return this.metadataHasUnits(valueMetadatas);
+      });
+
+      return itemsWithUnits.length !== 0 && !this.configuration?.hiddenColumns?.units;
+    },
+    limitColumnNames() {
+      const limitDefinitions = [];
+
+      this.items.forEach((item) => {
+        if (item.limitDefinition) {
+          const limits = Object.keys(item.limitDefinition);
+          limits.forEach((limit) => {
+            const limitAlreadyAdded = limitDefinitions.some((limitDef) => limitDef.key === limit);
+            const limitHidden = this.configuration?.hiddenColumns?.[limit];
+            if (!limitAlreadyAdded && !limitHidden) {
+              limitDefinitions.push({ label: `Limit ${limit}`, key: limit });
+            }
+          });
+        }
+      });
+      return limitDefinitions;
+    },
+    showTimestamp() {
+      return !this.configuration?.hiddenColumns?.timestamp;
+    },
+    showType() {
+      return !this.configuration?.hiddenColumns?.type;
+    },
+    staleClass() {
+      return this.isStale ? 'is-stale' : '';
+    },
+    applyLayoutClass() {
+      if (this.configuration.isFixedLayout) {
+        return 'fixed-layout';
+      }
+
+      return '';
+    }
+  },
+  watch: {
+    configuration: {
+      handler(newVal) {
+        if (this.viewActionsCollection) {
+          if (newVal.isFixedLayout) {
+            this.viewActionsCollection.show(['lad-expand-columns']);
+            this.viewActionsCollection.hide(['lad-autosize-columns']);
+          } else {
+            this.viewActionsCollection.show(['lad-autosize-columns']);
+            this.viewActionsCollection.hide(['lad-expand-columns']);
+          }
+        }
+      },
+      deep: true
+    }
+  },
+  async mounted() {
+    this.ladTableConfiguration.on('change', this.handleConfigurationChange);
+    this.composition = this.openmct.composition.get(this.domainObject);
+    this.composition.on('add', this.addItem);
+    this.composition.on('remove', this.removeItem);
+    this.composition.on('reorder', this.reorder);
+    this.composition.load();
+    await nextTick();
+    this.viewActionsCollection = this.openmct.actions.getActionsCollection(
+      this.objectPath,
+      this.currentView
+    );
+    this.setupClockChangedEvent((domainObject) => {
+      this.triggerUnsubscribeFromStaleness(domainObject);
+      this.subscribeToStaleness(domainObject);
+    });
+
+    this.initializeViewActions();
+  },
+  unmounted() {
+    this.ladTableConfiguration.off('change', this.handleConfigurationChange);
+
+    this.composition.off('add', this.addItem);
+    this.composition.off('remove', this.removeItem);
+    this.composition.off('reorder', this.reorder);
+  },
+  methods: {
+    async addItem(domainObject) {
+      let item = {};
+      item.domainObject = domainObject;
+      item.key = this.openmct.objects.makeKeyString(domainObject.identifier);
+      item.limitDefinition = await this.openmct.telemetry.limitDefinition(domainObject).limits();
+
+      this.items.push(item);
+      this.subscribeToStaleness(domainObject);
+    },
+    removeItem(identifier) {
+      const keystring = this.openmct.objects.makeKeyString(identifier);
+
+      const index = this.items.findIndex((item) => keystring === item.key);
+      this.items.splice(index, 1);
+
+      const domainObject = this.openmct.objects.get(keystring);
+      this.triggerUnsubscribeFromStaleness(domainObject);
+    },
+    reorder(reorderPlan) {
+      const oldItems = this.items.slice();
+      reorderPlan.forEach((reorderEvent) => {
+        this.items[reorderEvent.newIndex] = oldItems[reorderEvent.oldIndex];
+      });
+    },
+    metadataHasUnits(valueMetadatas) {
+      const metadataWithUnits = valueMetadatas.filter((metadatum) => metadatum.unit);
+
+      return metadataWithUnits.length > 0;
+    },
+    handleConfigurationChange(configuration) {
+      this.configuration = configuration;
+    },
+    updateViewContext(rowContext) {
+      this.viewContext.row = rowContext;
+    },
+    getViewContext() {
+      return {
+        ...this.viewContext,
+        type: 'lad-table',
+        toggleFixedLayout: this.toggleFixedLayout
+      };
+    },
+    toggleFixedLayout() {
+      const config = structuredClone(toRaw(this.configuration));
+
+      config.isFixedLayout = !this.configuration.isFixedLayout;
+      this.ladTableConfiguration.updateConfiguration(config);
+    },
+    initializeViewActions() {
+      if (this.configuration.isFixedLayout) {
+        this.viewActionsCollection.show(['lad-expand-columns']);
+        this.viewActionsCollection.hide(['lad-autosize-columns']);
+      } else {
+        this.viewActionsCollection.hide(['lad-expand-columns']);
+        this.viewActionsCollection.show(['lad-autosize-columns']);
+      }
+    }
+  }
+};
+</script>
diff --git a/src/plugins/LADTable/components/LadTableConfiguration.vue b/src/plugins/LADTable/components/LadTableConfiguration.vue
new file mode 100644
index 00000000000..2c44f6e23b5
--- /dev/null
+++ b/src/plugins/LADTable/components/LadTableConfiguration.vue
@@ -0,0 +1,183 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-inspect-properties">
+    <template v-if="isEditing">
+      <div class="c-inspect-properties__header">Table Column Visibility</div>
+      <ul class="c-inspect-properties__section">
+        <li v-for="(title, key) in headers" :key="key" class="c-inspect-properties__row">
+          <div class="c-inspect-properties__label" title="Show or hide column">
+            <label :for="key + 'ColumnControl'">{{ title }}</label>
+          </div>
+          <div class="c-inspect-properties__value">
+            <input
+              :id="key + 'ColumnControl'"
+              type="checkbox"
+              :checked="configuration.hiddenColumns[key] !== true"
+              @change="toggleColumn(key)"
+            />
+          </div>
+        </li>
+      </ul>
+    </template>
+    <template v-else>
+      <div class="c-inspect-properties__header">LAD Table Configuration</div>
+      <div class="c-inspect-properties__row--span-all">Only available in edit mode.</div>
+    </template>
+  </div>
+</template>
+
+<script>
+import LADTableConfiguration from '../LADTableConfiguration.js';
+
+export default {
+  inject: ['openmct'],
+  data() {
+    const selection = this.openmct.selection.get();
+    const domainObject = selection[0][0].context.item;
+    const ladTableConfiguration = new LADTableConfiguration(domainObject, this.openmct);
+
+    return {
+      ladTableConfiguration,
+      isEditing: this.openmct.editor.isEditing(),
+      configuration: ladTableConfiguration.getConfiguration(),
+      items: [],
+      ladTableObjects: []
+    };
+  },
+  computed: {
+    headers() {
+      const fullHeaders = {
+        timestamp: 'Timestamp',
+        type: 'Type'
+      };
+      // check hasUnits and limitColumnName and add then to fullHeaders
+      this.items.forEach((item) => {
+        if (item.hasUnits) {
+          fullHeaders.units = 'Units';
+        }
+        if (item.limitDefinition) {
+          const limits = Object.keys(item.limitDefinition);
+          limits.forEach((limit) => {
+            fullHeaders[limit] = limit;
+          });
+        }
+      });
+      return fullHeaders;
+    }
+  },
+  mounted() {
+    this.openmct.editor.on('isEditing', this.toggleEdit);
+    this.composition = this.openmct.composition.get(this.ladTableConfiguration.domainObject);
+
+    if (this.ladTableConfiguration.domainObject.type === 'LadTable') {
+      this.composition.on('add', this.addItem);
+      this.composition.on('remove', this.removeItem);
+    } else {
+      this.compositions = [];
+      this.composition.on('add', this.addLadTable);
+      this.composition.on('remove', this.removeLadTable);
+    }
+
+    this.composition.load();
+  },
+  unmounted() {
+    this.ladTableConfiguration.destroy();
+    this.openmct.editor.off('isEditing', this.toggleEdit);
+
+    if (this.ladTableConfiguration.domainObject.type === 'LadTable') {
+      this.composition.off('add', this.addItem);
+      this.composition.off('remove', this.removeItem);
+    } else {
+      this.composition.off('add', this.addLadTable);
+      this.composition.off('remove', this.removeLadTable);
+      this.compositions.forEach((c) => {
+        c.composition.off('add', c.addCallback);
+        c.composition.off('remove', c.removeCallback);
+      });
+    }
+  },
+  methods: {
+    async addItem(domainObject) {
+      const item = {};
+      item.domainObject = domainObject;
+      item.key = this.openmct.objects.makeKeyString(domainObject.identifier);
+      item.limitDefinition = await this.openmct.telemetry.limitDefinition(domainObject).limits();
+
+      const metadata = this.openmct.telemetry.getMetadata(domainObject);
+      const valueMetadatas = metadata ? metadata.valueMetadatas : [];
+      const metadataWithUnits = valueMetadatas.filter((metadatum) => metadatum.unit);
+
+      item.hasUnits = metadataWithUnits.length > 0;
+
+      this.items.push(item);
+    },
+    removeItem(identifier) {
+      const keystring = this.openmct.objects.makeKeyString(identifier);
+      const index = this.items.findIndex((item) => keystring === item.key);
+
+      this.items.splice(index, 1);
+    },
+    addLadTable(domainObject) {
+      let ladTable = {};
+      ladTable.domainObject = domainObject;
+      ladTable.key = this.openmct.objects.makeKeyString(domainObject.identifier);
+
+      if (!this.ladTelemetryObjects) {
+        this.ladTelemetryObjects = {};
+      }
+      this.ladTelemetryObjects[ladTable.key] = [];
+      this.ladTableObjects.push(ladTable);
+
+      const composition = this.openmct.composition.get(ladTable.domainObject);
+
+      composition.load();
+
+      this.compositions.push({
+        composition
+      });
+    },
+    removeLadTable(identifier) {
+      const index = this.ladTableObjects.findIndex(
+        (ladTable) => this.openmct.objects.makeKeyString(identifier) === ladTable.key
+      );
+      const ladTable = this.ladTableObjects[index];
+
+      delete this.ladTelemetryObjects[ladTable.key];
+      this.ladTableObjects.splice(index, 1);
+    },
+    combineKeys(ladKey, telemetryObjectKey) {
+      return `${ladKey}-${telemetryObjectKey}`;
+    },
+    toggleColumn(key) {
+      const isHidden = this.configuration.hiddenColumns[key] === true;
+
+      this.configuration.hiddenColumns[key] = !isHidden;
+      this.ladTableConfiguration.updateConfiguration(this.configuration);
+    },
+    toggleEdit(isEditing) {
+      this.isEditing = isEditing;
+    }
+  }
+};
+</script>
diff --git a/src/plugins/LADTable/components/LadTableSet.vue b/src/plugins/LADTable/components/LadTableSet.vue
index 8d208cdc0aa..675bdd62f11 100644
--- a/src/plugins/LADTable/components/LadTableSet.vue
+++ b/src/plugins/LADTable/components/LadTableSet.vue
@@ -1,180 +1,240 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 
 <template>
-<table class="c-table c-lad-table">
-    <thead>
+  <div class="c-lad-table-wrapper u-style-receiver js-style-receiver" :class="staleClass">
+    <table class="c-table c-lad-table">
+      <thead>
         <tr>
-            <th>Name</th>
-            <th>Timestamp</th>
-            <th>Value</th>
-            <th v-if="hasUnits">Unit</th>
+          <th>Name</th>
+          <th v-if="showTimestamp">Timestamp</th>
+          <th>Value</th>
+          <th v-if="showType">Type</th>
+          <th v-if="hasUnits">Units</th>
         </tr>
-    </thead>
-    <tbody>
-        <template
-            v-for="ladTable in ladTableObjects"
-        >
-            <tr
-                :key="ladTable.key"
-                class="c-table__group-header js-lad-table-set__table-headers"
-            >
-                <td colspan="10">
-                    {{ ladTable.domainObject.name }}
-                </td>
-            </tr>
-            <lad-row
-                v-for="ladRow in ladTelemetryObjects[ladTable.key]"
-                :key="ladRow.key"
-                :domain-object="ladRow.domainObject"
-                :path-to-table="ladTable.objectPath"
-                :has-units="hasUnits"
-                @rowContextClick="updateViewContext"
-            />
+      </thead>
+      <tbody>
+        <template v-for="ladTable in ladTableObjects" :key="ladTable.key">
+          <tr class="c-table__group-header js-lad-table-set__table-headers">
+            <td colspan="10">
+              {{ ladTable.domainObject.name }}
+            </td>
+          </tr>
+          <lad-row
+            v-for="ladRow in ladTelemetryObjects[ladTable.key]"
+            :key="combineKeys(ladTable.key, ladRow.key)"
+            :domain-object="ladRow.domainObject"
+            :path-to-table="ladTable.objectPath"
+            :has-units="hasUnits"
+            :is-stale="staleObjects.includes(ladRow.key)"
+            :configuration="configuration"
+            @row-context-click="updateViewContext"
+          />
         </template>
-    </tbody>
-</table>
+      </tbody>
+    </table>
+  </div>
 </template>
 
 <script>
-import LadRow from './LADRow.vue';
+import { toRaw } from 'vue';
+
+import stalenessMixin from '@/ui/mixins/staleness-mixin';
+
+import LadRow from './LadRow.vue';
 
 export default {
-    components: {
-        LadRow
+  components: {
+    LadRow
+  },
+  mixins: [stalenessMixin],
+  inject: ['openmct', 'objectPath', 'currentView', 'ladTableConfiguration'],
+  props: {
+    domainObject: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      ladTableObjects: [],
+      ladTelemetryObjects: {},
+      viewContext: {},
+      configuration: this.ladTableConfiguration.getConfiguration(),
+      subscribedObjects: {}
+    };
+  },
+  computed: {
+    hasUnits() {
+      const ladTables = Object.values(this.ladTelemetryObjects);
+      let showUnits = false;
+
+      for (let ladTable of ladTables) {
+        for (let telemetryObject of ladTable) {
+          let metadata = this.openmct.telemetry.getMetadata(telemetryObject.domainObject);
+
+          if (metadata) {
+            for (let metadatum of metadata.valueMetadatas) {
+              if (metadatum.unit) {
+                showUnits = true;
+              }
+            }
+          }
+        }
+      }
+
+      return showUnits && !this.configuration?.hiddenColumns?.units;
+    },
+    showTimestamp() {
+      return !this.configuration?.hiddenColumns?.timestamp;
     },
-    inject: ['openmct', 'objectPath', 'currentView'],
-    props: {
-        domainObject: {
-            type: Object,
-            required: true
+    showType() {
+      return !this.configuration?.hiddenColumns?.type;
+    },
+    staleClass() {
+      return this.isStale ? 'is-stale' : '';
+    }
+  },
+  created() {
+    this.compositions = [];
+  },
+  mounted() {
+    this.ladTableConfiguration.on('change', this.handleConfigurationChange);
+    this.composition = this.openmct.composition.get(this.domainObject);
+    this.composition.on('add', this.addLadTable);
+    this.composition.on('remove', this.removeLadTable);
+    this.composition.on('reorder', this.reorderLadTables);
+    this.composition.load();
+    this.setupClockChangedEvent((domainObject) => {
+      this.triggerUnsubscribeFromStaleness(domainObject);
+      this.subscribeToStaleness(domainObject);
+    });
+  },
+  unmounted() {
+    this.ladTableConfiguration.off('change', this.handleConfigurationChange);
+    this.composition.off('add', this.addLadTable);
+    this.composition.off('remove', this.removeLadTable);
+    this.composition.off('reorder', this.reorderLadTables);
+    this.compositions.forEach((c) => {
+      c.composition.off('add', c.addCallback);
+      c.composition.off('remove', c.removeCallback);
+    });
+  },
+  methods: {
+    addLadTable(domainObject) {
+      let ladTable = {};
+      ladTable.domainObject = domainObject;
+      ladTable.key = this.openmct.objects.makeKeyString(domainObject.identifier);
+      ladTable.objectPath = [domainObject, ...this.objectPath];
+
+      this.ladTelemetryObjects[ladTable.key] = [];
+      this.ladTableObjects.push(ladTable);
+
+      let composition = this.openmct.composition.get(ladTable.domainObject);
+      let addCallback = this.addTelemetryObject(ladTable);
+      let removeCallback = this.removeTelemetryObject(ladTable);
+
+      composition.on('add', addCallback);
+      composition.on('remove', removeCallback);
+      composition.load();
+
+      this.compositions.push({
+        composition,
+        addCallback,
+        removeCallback
+      });
+    },
+    combineKeys(ladKey, telemetryObjectKey) {
+      return `${ladKey}-${telemetryObjectKey}`;
+    },
+    removeLadTable(identifier) {
+      let index = this.ladTableObjects.findIndex(
+        (ladTable) => this.openmct.objects.makeKeyString(identifier) === ladTable.key
+      );
+      let ladTable = this.ladTableObjects[index];
+
+      ladTable?.domainObject?.composition.forEach((telemetryObject) => {
+        const telemetryKey = this.openmct.objects.makeKeyString(telemetryObject);
+        if (!this.subscribedObjects?.[telemetryKey]) {
+          return;
+        }
+        let subscribedObject = toRaw(this.subscribedObjects[telemetryKey]);
+        if (subscribedObject?.count > 1) {
+          subscribedObject.count -= 1;
+        } else if (subscribedObject?.count === 1) {
+          this.triggerUnsubscribeFromStaleness(subscribedObject.domainObject);
+          delete this.subscribedObjects[telemetryKey];
         }
+      });
+
+      delete this.ladTelemetryObjects[ladTable.key];
+      this.ladTableObjects.splice(index, 1);
     },
-    data() {
-        return {
-            ladTableObjects: [],
-            ladTelemetryObjects: {},
-            compositions: [],
-            viewContext: {}
-        };
+    reorderLadTables(reorderPlan) {
+      let oldComposition = this.ladTableObjects.slice();
+      reorderPlan.forEach((reorderEvent) => {
+        this.ladTableObjects[reorderEvent.newIndex] = oldComposition[reorderEvent.oldIndex];
+      });
     },
-    computed: {
-        hasUnits() {
-            let ladTables = Object.values(this.ladTelemetryObjects);
-            for (let ladTable of ladTables) {
-                for (let telemetryObject of ladTable) {
-                    let metadata = this.openmct.telemetry.getMetadata(telemetryObject.domainObject);
-                    for (let metadatum of metadata.valueMetadatas) {
-                        if (metadatum.unit) {
-                            return true;
-                        }
-                    }
-                }
-            }
+    addTelemetryObject(ladTable) {
+      return (domainObject) => {
+        let telemetryObject = {};
+        telemetryObject.key = this.openmct.objects.makeKeyString(domainObject.identifier);
+        telemetryObject.domainObject = domainObject;
+
+        const telemetryObjects = this.ladTelemetryObjects[ladTable.key];
+        telemetryObjects.push(telemetryObject);
+
+        this.ladTelemetryObjects[ladTable.key] = telemetryObjects;
 
-            return false;
+        if (!this.subscribedObjects[telemetryObject?.key]) {
+          this.subscribeToStaleness(domainObject);
+          this.subscribedObjects[telemetryObject?.key] = { count: 1, domainObject };
+        } else if (this.subscribedObjects?.[telemetryObject?.key]?.count) {
+          this.subscribedObjects[telemetryObject?.key].count += 1;
         }
+      };
     },
-    mounted() {
-        this.composition = this.openmct.composition.get(this.domainObject);
-        this.composition.on('add', this.addLadTable);
-        this.composition.on('remove', this.removeLadTable);
-        this.composition.on('reorder', this.reorderLadTables);
-        this.composition.load();
+    removeTelemetryObject(ladTable) {
+      return (identifier) => {
+        const keystring = this.openmct.objects.makeKeyString(identifier);
+        const telemetryObjects = this.ladTelemetryObjects[ladTable.key];
+        let index = telemetryObjects.findIndex(
+          (telemetryObject) => keystring === telemetryObject.key
+        );
+
+        telemetryObjects.splice(index, 1);
+        this.ladTelemetryObjects[ladTable.key] = telemetryObjects;
+      };
     },
-    destroyed() {
-        this.composition.off('add', this.addLadTable);
-        this.composition.off('remove', this.removeLadTable);
-        this.composition.off('reorder', this.reorderLadTables);
-        this.compositions.forEach(c => {
-            c.composition.off('add', c.addCallback);
-            c.composition.off('remove', c.removeCallback);
-        });
+    handleConfigurationChange(configuration) {
+      this.configuration = configuration;
     },
-    methods: {
-        addLadTable(domainObject) {
-            let ladTable = {};
-            ladTable.domainObject = domainObject;
-            ladTable.key = this.openmct.objects.makeKeyString(domainObject.identifier);
-            ladTable.objectPath = [domainObject, ...this.objectPath];
-
-            this.$set(this.ladTelemetryObjects, ladTable.key, []);
-            this.ladTableObjects.push(ladTable);
-
-            let composition = this.openmct.composition.get(ladTable.domainObject);
-            let addCallback = this.addTelemetryObject(ladTable);
-            let removeCallback = this.removeTelemetryObject(ladTable);
-
-            composition.on('add', addCallback);
-            composition.on('remove', removeCallback);
-            composition.load();
-
-            this.compositions.push({
-                composition,
-                addCallback,
-                removeCallback
-            });
-        },
-        removeLadTable(identifier) {
-            let index = this.ladTableObjects.findIndex(ladTable => this.openmct.objects.makeKeyString(identifier) === ladTable.key);
-            let ladTable = this.ladTableObjects[index];
-
-            this.$delete(this.ladTelemetryObjects, ladTable.key);
-            this.ladTableObjects.splice(index, 1);
-        },
-        reorderLadTables(reorderPlan) {
-            let oldComposition = this.ladTableObjects.slice();
-            reorderPlan.forEach(reorderEvent => {
-                this.$set(this.ladTableObjects, reorderEvent.newIndex, oldComposition[reorderEvent.oldIndex]);
-            });
-        },
-        addTelemetryObject(ladTable) {
-            return (domainObject) => {
-                let telemetryObject = {};
-                telemetryObject.key = this.openmct.objects.makeKeyString(domainObject.identifier);
-                telemetryObject.domainObject = domainObject;
-
-                let telemetryObjects = this.ladTelemetryObjects[ladTable.key];
-                telemetryObjects.push(telemetryObject);
-
-                this.$set(this.ladTelemetryObjects, ladTable.key, telemetryObjects);
-            };
-        },
-        removeTelemetryObject(ladTable) {
-            return (identifier) => {
-                let telemetryObjects = this.ladTelemetryObjects[ladTable.key];
-                let index = telemetryObjects.findIndex(telemetryObject => this.openmct.objects.makeKeyString(identifier) === telemetryObject.key);
-
-                telemetryObjects.splice(index, 1);
-
-                this.$set(this.ladTelemetryObjects, ladTable.key, telemetryObjects);
-            };
-        },
-        updateViewContext(rowContext) {
-            this.viewContext.row = rowContext;
-        },
-        getViewContext() {
-            return this.viewContext;
-        }
+    updateViewContext(rowContext) {
+      this.viewContext.row = rowContext;
+    },
+    getViewContext() {
+      return this.viewContext;
     }
+  }
 };
 </script>
diff --git a/src/plugins/LADTable/plugin.js b/src/plugins/LADTable/plugin.js
index 53586346034..8df5c07ae4f 100644
--- a/src/plugins/LADTable/plugin.js
+++ b/src/plugins/LADTable/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,36 +19,43 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import LADTableViewProvider from './LADTableViewProvider';
-import LADTableSetViewProvider from './LADTableSetViewProvider';
-import ladTableCompositionPolicy from './LADTableCompositionPolicy';
+import ladTableCompositionPolicy from './LADTableCompositionPolicy.js';
+import LADTableConfigurationViewProvider from './LADTableConfigurationViewProvider.js';
+import LADTableSetViewProvider from './LADTableSetViewProvider.js';
+import LADTableViewProvider from './LADTableViewProvider.js';
+import LADTableViewActions from './ViewActions.js';
 
 export default function plugin() {
-    return function install(openmct) {
+  return function install(openmct) {
+    openmct.objectViews.addProvider(new LADTableViewProvider(openmct));
+    openmct.objectViews.addProvider(new LADTableSetViewProvider(openmct));
+    openmct.inspectorViews.addProvider(new LADTableConfigurationViewProvider(openmct));
 
-        openmct.objectViews.addProvider(new LADTableViewProvider(openmct));
-        openmct.objectViews.addProvider(new LADTableSetViewProvider(openmct));
+    openmct.types.addType('LadTable', {
+      name: 'LAD Table',
+      creatable: true,
+      description:
+        'Display the current value for one or more telemetry end points in a fixed table. Each row is a telemetry end point.',
+      cssClass: 'icon-tabular-lad',
+      initialize(domainObject) {
+        domainObject.composition = [];
+      }
+    });
 
-        openmct.types.addType('LadTable', {
-            name: "LAD Table",
-            creatable: true,
-            description: "A Latest Available Data tabular view in which each row displays the values for one or more contained telemetry objects.",
-            cssClass: 'icon-tabular-lad',
-            initialize(domainObject) {
-                domainObject.composition = [];
-            }
-        });
+    openmct.types.addType('LadTableSet', {
+      name: 'LAD Table Set',
+      creatable: true,
+      description: 'Group LAD Tables together into a single view with sub-headers.',
+      cssClass: 'icon-tabular-lad-set',
+      initialize(domainObject) {
+        domainObject.composition = [];
+      }
+    });
 
-        openmct.types.addType('LadTableSet', {
-            name: "LAD Table Set",
-            creatable: true,
-            description: "A Latest Available Data tabular view in which each row displays the values for one or more contained telemetry objects.",
-            cssClass: 'icon-tabular-lad-set',
-            initialize(domainObject) {
-                domainObject.composition = [];
-            }
-        });
+    openmct.composition.addPolicy(ladTableCompositionPolicy(openmct));
 
-        openmct.composition.addPolicy(ladTableCompositionPolicy(openmct));
-    };
+    LADTableViewActions.forEach((action) => {
+      openmct.actions.register(action);
+    });
+  };
 }
diff --git a/src/plugins/LADTable/pluginSpec.js b/src/plugins/LADTable/pluginSpec.js
index 329eeb54523..22dc6fd1677 100644
--- a/src/plugins/LADTable/pluginSpec.js
+++ b/src/plugins/LADTable/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,15 +19,18 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import LadPlugin from './plugin.js';
-import Vue from 'vue';
 import {
-    createOpenMct,
-    getMockObjects,
-    getMockTelemetry,
-    getLatestTelemetry,
-    resetApplicationState
+  createOpenMct,
+  getLatestTelemetry,
+  getMockObjects,
+  getMockTelemetry,
+  renderWhenVisible,
+  resetApplicationState,
+  spyOnBuiltins
 } from 'utils/testing';
+import { nextTick } from 'vue';
+
+import LadPlugin from './plugin.js';
 
 const TABLE_BODY_ROWS = '.js-lad-table__body__row';
 const TABLE_BODY_FIRST_ROW = TABLE_BODY_ROWS + ':first-child';
@@ -37,341 +40,402 @@ const TABLE_BODY_FIRST_ROW_THIRD_DATA = TABLE_BODY_FIRST_ROW + ' .js-third-data'
 const LAD_SET_TABLE_HEADERS = '.js-lad-table-set__table-headers';
 
 function utcTimeFormat(value) {
-    return new Date(value).toISOString().replace('T', ' ');
+  return new Date(value).toISOString().replace('T', ' ');
 }
 
-describe("The LAD Table", () => {
-    const ladTableKey = 'LadTable';
-
-    let openmct;
-    let ladPlugin;
-    let parent;
-    let child;
-    let telemetryCount = 3;
-    let timeFormat = 'utc';
-    let mockTelemetry = getMockTelemetry({
-        count: telemetryCount,
-        format: timeFormat
-    });
-    let mockObj = getMockObjects({
-        objectKeyStrings: ['ladTable', 'telemetry'],
-        format: timeFormat
-    });
-    let bounds = {
-        start: 0,
-        end: 4
+describe('The LAD Table', () => {
+  const ladTableKey = 'LadTable';
+
+  let openmct;
+  let ladPlugin;
+  let historicalProvider;
+  let parent;
+  let child;
+  let telemetryCount = 3;
+  let timeFormat = 'utc';
+  let mockTelemetry = getMockTelemetry({
+    count: telemetryCount,
+    format: timeFormat
+  });
+  let mockObj = getMockObjects({
+    objectKeyStrings: ['ladTable', 'telemetry'],
+    format: timeFormat
+  });
+  let bounds = {
+    start: 0,
+    end: 4
+  };
+
+  // add telemetry object as composition in lad table
+  mockObj.ladTable.composition.push(mockObj.telemetry.identifier);
+
+  // this setups up the app
+  beforeEach((done) => {
+    openmct = createOpenMct();
+
+    parent = document.createElement('div');
+    child = document.createElement('div');
+    parent.appendChild(child);
+
+    openmct.router.isNavigatedObject = jasmine.createSpy().and.returnValue(false);
+    spyOn(openmct.telemetry, 'request').and.returnValue(Promise.resolve([]));
+
+    ladPlugin = new LadPlugin();
+    openmct.install(ladPlugin);
+
+    spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve({}));
+
+    historicalProvider = {
+      request: () => {
+        return Promise.resolve([]);
+      }
     };
+    spyOn(openmct.telemetry, 'findRequestProvider').and.returnValue(historicalProvider);
 
-    // add telemetry object as composition in lad table
-    mockObj.ladTable.composition.push(mockObj.telemetry.identifier);
+    openmct.time.bounds({
+      start: bounds.start,
+      end: bounds.end
+    });
 
-    // this setups up the app
-    beforeEach((done) => {
-        openmct = createOpenMct();
+    openmct.on('start', done);
+    openmct.startHeadless();
+  });
 
-        parent = document.createElement('div');
-        child = document.createElement('div');
-        parent.appendChild(child);
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
 
-        spyOn(openmct.telemetry, 'request').and.returnValue(Promise.resolve([]));
+  it('should provide a table view only for lad table objects', () => {
+    let applicableViews = openmct.objectViews.get(mockObj.ladTable, []);
 
-        ladPlugin = new LadPlugin();
-        openmct.install(ladPlugin);
+    let ladTableView = applicableViews.find((viewProvider) => viewProvider.key === ladTableKey);
 
-        spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve({}));
+    expect(applicableViews.length).toEqual(1);
+    expect(ladTableView).toBeDefined();
+  });
 
-        openmct.time.bounds({
-            start: bounds.start,
-            end: bounds.end
-        });
+  describe('composition', () => {
+    let ladTableCompositionCollection;
 
-        openmct.on('start', done);
-        openmct.startHeadless();
-    });
+    beforeEach(() => {
+      ladTableCompositionCollection = openmct.composition.get(mockObj.ladTable);
 
-    afterEach(() => {
-        return resetApplicationState(openmct);
+      return ladTableCompositionCollection.load();
     });
 
-    it("should provide a table view only for lad table objects", () => {
-        let applicableViews = openmct.objectViews.get(mockObj.ladTable, []);
-
-        let ladTableView = applicableViews.find(
-            (viewProvider) => viewProvider.key === ladTableKey
-        );
+    it('should accept telemetry producing objects', () => {
+      expect(() => {
+        ladTableCompositionCollection.add(mockObj.telemetry);
+      }).not.toThrow();
+    });
 
-        expect(applicableViews.length).toEqual(1);
-        expect(ladTableView).toBeDefined();
+    it('should reject non-telemetry producing objects', () => {
+      expect(() => {
+        ladTableCompositionCollection.add(mockObj.ladTable);
+      }).toThrow();
+    });
+  });
+
+  describe('table view', () => {
+    let applicableViews;
+    let ladTableViewProvider;
+    let ladTableView;
+    let anotherTelemetryObj = getMockObjects({
+      objectKeyStrings: ['telemetry'],
+      overwrite: {
+        telemetry: {
+          name: 'New Telemetry Object',
+          identifier: {
+            namespace: '',
+            key: 'another-telemetry-object'
+          }
+        }
+      }
+    }).telemetry;
+
+    const aggregateTelemetryObj = getMockObjects({
+      objectKeyStrings: ['telemetry'],
+      overwrite: {
+        telemetry: {
+          name: 'Aggregate Telemetry Object',
+          identifier: {
+            namespace: '',
+            key: 'aggregate-telemetry-object'
+          }
+        }
+      }
+    }).telemetry;
+
+    // add another aggregate telemetry object as composition in lad table to test multi rows
+    aggregateTelemetryObj.composition = [anotherTelemetryObj.identifier];
+    mockObj.ladTable.composition.push(aggregateTelemetryObj.identifier);
+
+    beforeEach(async () => {
+      let telemetryRequestResolve;
+      let telemetryObjectResolve;
+      let anotherTelemetryObjectResolve;
+      let aggregateTelemetryObjectResolve;
+      const telemetryRequestPromise = new Promise((resolve) => {
+        telemetryRequestResolve = resolve;
+      });
+      const telemetryObjectPromise = new Promise((resolve) => {
+        telemetryObjectResolve = resolve;
+      });
+      const anotherTelemetryObjectPromise = new Promise((resolve) => {
+        anotherTelemetryObjectResolve = resolve;
+      });
+
+      const aggregateTelemetryObjectPromise = new Promise((resolve) => {
+        aggregateTelemetryObjectResolve = resolve;
+      });
+
+      spyOnBuiltins(['requestAnimationFrame']);
+      window.requestAnimationFrame.and.callFake((callBack) => {
+        callBack();
+      });
+
+      historicalProvider.request = () => {
+        telemetryRequestResolve(mockTelemetry);
+
+        return telemetryRequestPromise;
+      };
+
+      openmct.objects.get.and.callFake((obj) => {
+        if (obj.key === 'telemetry-object') {
+          telemetryObjectResolve(mockObj.telemetry);
+
+          return telemetryObjectPromise;
+        } else if (obj.key === 'another-telemetry-object') {
+          anotherTelemetryObjectResolve(anotherTelemetryObj);
+
+          return anotherTelemetryObjectPromise;
+        } else {
+          aggregateTelemetryObjectResolve(aggregateTelemetryObj);
+
+          return aggregateTelemetryObjectPromise;
+        }
+      });
+
+      openmct.time.bounds({
+        start: bounds.start,
+        end: bounds.end
+      });
+
+      applicableViews = openmct.objectViews.get(mockObj.ladTable, []);
+      ladTableViewProvider = applicableViews.find(
+        (viewProvider) => viewProvider.key === ladTableKey
+      );
+      ladTableView = ladTableViewProvider.view(mockObj.ladTable, [mockObj.ladTable]);
+      ladTableView.show(child, true, { renderWhenVisible });
+
+      await Promise.all([
+        telemetryRequestPromise,
+        telemetryObjectPromise,
+        anotherTelemetryObjectPromise,
+        aggregateTelemetryObjectResolve
+      ]);
+      await nextTick();
     });
 
-    describe('composition', () => {
-        let ladTableCompositionCollection;
+    it('should show one row per object in the composition', () => {
+      const rowCount = parent.querySelectorAll(TABLE_BODY_ROWS).length;
+      expect(rowCount).toBe(mockObj.ladTable.composition.length);
+    });
 
-        beforeEach(() => {
-            ladTableCompositionCollection = openmct.composition.get(mockObj.ladTable);
+    it('should show the most recent datum from the telemetry producing object', async () => {
+      const latestDatum = getLatestTelemetry(mockTelemetry, { timeFormat });
+      const expectedDate = utcTimeFormat(latestDatum[timeFormat]);
+      await nextTick();
+      const latestDate = parent.querySelector(TABLE_BODY_FIRST_ROW_SECOND_DATA).innerText;
+      expect(latestDate).toBe(expectedDate);
+      const dataType = parent
+        .querySelector(TABLE_BODY_ROWS)
+        .querySelector('.js-type-data').innerText;
+      expect(dataType).toBe('Telemetry');
+    });
 
-            return ladTableCompositionCollection.load();
-        });
+    it('should show aggregate telemetry type with blank data', async () => {
+      await nextTick();
+      const latestData = parent
+        .querySelectorAll(TABLE_BODY_ROWS)[1]
+        .querySelectorAll('td')[2].innerText;
+      expect(latestData).toBe('---');
+      const dataType = parent
+        .querySelectorAll(TABLE_BODY_ROWS)[1]
+        .querySelector('.js-type-data').innerText;
+      expect(dataType).toBe('Aggregate');
+    });
 
-        it("should accept telemetry producing objects", () => {
-            expect(() => {
-                ladTableCompositionCollection.add(mockObj.telemetry);
-            }).not.toThrow();
-        });
+    it('should show the name provided for the the telemetry producing object', () => {
+      const rowName = parent.querySelector(TABLE_BODY_FIRST_ROW_FIRST_DATA).innerText.trim();
 
-        it("should reject non-telemtry producing objects", () => {
-            expect(() => {
-                ladTableCompositionCollection.add(mockObj.ladTable);
-            }).toThrow();
-        });
+      const expectedName = mockObj.telemetry.name;
+      expect(rowName).toBe(expectedName);
     });
 
-    describe("table view", () => {
-        let applicableViews;
-        let ladTableViewProvider;
-        let ladTableView;
-        let anotherTelemetryObj = getMockObjects({
-            objectKeyStrings: ['telemetry'],
-            overwrite: {
-                telemetry: {
-                    name: "New Telemetry Object",
-                    identifier: {
-                        namespace: "",
-                        key: "another-telemetry-object"
-                    }
-                }
-            }
-        }).telemetry;
-
-        // add another telemetry object as composition in lad table to test multi rows
-        mockObj.ladTable.composition.push(anotherTelemetryObj.identifier);
-
-        beforeEach(async () => {
-            let telemetryRequestResolve;
-            let telemetryObjectResolve;
-            let anotherTelemetryObjectResolve;
-            let telemetryRequestPromise = new Promise((resolve) => {
-                telemetryRequestResolve = resolve;
-            });
-            let telemetryObjectPromise = new Promise((resolve) => {
-                telemetryObjectResolve = resolve;
-            });
-            let anotherTelemetryObjectPromise = new Promise((resolve) => {
-                anotherTelemetryObjectResolve = resolve;
-            });
-
-            openmct.telemetry.request.and.callFake(() => {
-                telemetryRequestResolve(mockTelemetry);
-
-                return telemetryRequestPromise;
-            });
-            openmct.objects.get.and.callFake((obj) => {
-                if (obj.key === 'telemetry-object') {
-                    telemetryObjectResolve(mockObj.telemetry);
-
-                    return telemetryObjectPromise;
-                } else {
-                    anotherTelemetryObjectResolve(anotherTelemetryObj);
-
-                    return anotherTelemetryObjectPromise;
-                }
-            });
-
-            openmct.time.bounds({
-                start: bounds.start,
-                end: bounds.end
-            });
-
-            applicableViews = openmct.objectViews.get(mockObj.ladTable, []);
-            ladTableViewProvider = applicableViews.find((viewProvider) => viewProvider.key === ladTableKey);
-            ladTableView = ladTableViewProvider.view(mockObj.ladTable, [mockObj.ladTable]);
-            ladTableView.show(child, true);
-
-            await Promise.all([telemetryRequestPromise, telemetryObjectPromise, anotherTelemetryObjectPromise]);
-            await Vue.nextTick();
-        });
-
-        it("should show one row per object in the composition", () => {
-            const rowCount = parent.querySelectorAll(TABLE_BODY_ROWS).length;
-            expect(rowCount).toBe(mockObj.ladTable.composition.length);
-        });
-
-        it("should show the most recent datum from the telemetry producing object", async () => {
-            const latestDatum = getLatestTelemetry(mockTelemetry, { timeFormat });
-            const expectedDate = utcTimeFormat(latestDatum[timeFormat]);
-            await Vue.nextTick();
-            const latestDate = parent.querySelector(TABLE_BODY_FIRST_ROW_SECOND_DATA).innerText;
-            expect(latestDate).toBe(expectedDate);
-        });
-
-        it("should show the name provided for the the telemetry producing object", () => {
-            const rowName = parent.querySelector(TABLE_BODY_FIRST_ROW_FIRST_DATA).innerText;
-
-            const expectedName = mockObj.telemetry.name;
-            expect(rowName).toBe(expectedName);
-        });
-
-        it("should show the correct values for the datum based on domain and range hints", async () => {
-            const range = mockObj.telemetry.telemetry.values.find((val) => {
-                return val.hints && val.hints.range !== undefined;
-            }).key;
-            const domain = mockObj.telemetry.telemetry.values.find((val) => {
-                return val.hints && val.hints.domain !== undefined;
-            }).key;
-            const mostRecentTelemetry = getLatestTelemetry(mockTelemetry, { timeFormat });
-            const rangeValue = mostRecentTelemetry[range];
-            const domainValue = utcTimeFormat(mostRecentTelemetry[domain]);
-            await Vue.nextTick();
-            const actualDomainValue = parent.querySelector(TABLE_BODY_FIRST_ROW_SECOND_DATA).innerText;
-            const actualRangeValue = parent.querySelector(TABLE_BODY_FIRST_ROW_THIRD_DATA).innerText;
-            expect(actualRangeValue).toBe(rangeValue);
-            expect(actualDomainValue).toBe(domainValue);
-        });
+    it('should show the correct values for the datum based on domain and range hints', async () => {
+      const range = mockObj.telemetry.telemetry.values.find((val) => {
+        return val.hints && val.hints.range !== undefined;
+      }).key;
+      const domain = mockObj.telemetry.telemetry.values.find((val) => {
+        return val.hints && val.hints.domain !== undefined;
+      }).key;
+      const mostRecentTelemetry = getLatestTelemetry(mockTelemetry, { timeFormat });
+      const rangeValue = mostRecentTelemetry[range];
+      const domainValue = utcTimeFormat(mostRecentTelemetry[domain]);
+      await nextTick();
+      const actualDomainValue = parent.querySelector(TABLE_BODY_FIRST_ROW_SECOND_DATA).innerText;
+      const actualRangeValue = parent.querySelector(TABLE_BODY_FIRST_ROW_THIRD_DATA).innerText;
+      expect(actualRangeValue).toBe(rangeValue);
+      expect(actualDomainValue).toBe(domainValue);
     });
+  });
 });
 
-describe("The LAD Table Set", () => {
-    const ladTableSetKey = 'LadTableSet';
+describe('The LAD Table Set', () => {
+  const ladTableSetKey = 'LadTableSet';
 
-    let openmct;
-    let ladPlugin;
-    let parent;
-    let child;
+  let openmct;
+  let ladPlugin;
+  let parent;
+  let child;
 
-    let mockObj = getMockObjects({
-        objectKeyStrings: ['ladTable', 'ladTableSet', 'telemetry']
-    });
-
-    let bounds = {
-        start: 0,
-        end: 4
-    };
+  let mockObj = getMockObjects({
+    objectKeyStrings: ['ladTable', 'ladTableSet', 'telemetry']
+  });
 
-    // add mock telemetry to lad table and lad table to lad table set (composition)
-    mockObj.ladTable.composition.push(mockObj.telemetry.identifier);
-    mockObj.ladTableSet.composition.push(mockObj.ladTable.identifier);
+  let bounds = {
+    start: 0,
+    end: 4
+  };
 
-    beforeEach((done) => {
-        openmct = createOpenMct();
+  // add mock telemetry to lad table and lad table to lad table set (composition)
+  mockObj.ladTable.composition.push(mockObj.telemetry.identifier);
+  mockObj.ladTableSet.composition.push(mockObj.ladTable.identifier);
 
-        parent = document.createElement('div');
-        child = document.createElement('div');
-        parent.appendChild(child);
+  beforeEach((done) => {
+    openmct = createOpenMct();
 
-        ladPlugin = new LadPlugin();
-        openmct.install(ladPlugin);
+    parent = document.createElement('div');
+    child = document.createElement('div');
+    parent.appendChild(child);
 
-        openmct.time.bounds({
-            start: bounds.start,
-            end: bounds.end
-        });
+    ladPlugin = new LadPlugin();
+    openmct.install(ladPlugin);
 
-        openmct.on('start', done);
-        openmct.startHeadless();
+    openmct.time.bounds({
+      start: bounds.start,
+      end: bounds.end
     });
 
-    afterEach(() => {
-        openmct.time.timeSystem('utc', {
-            start: 0,
-            end: 1
-        });
+    openmct.on('start', done);
+    openmct.startHeadless();
+  });
 
-        return resetApplicationState(openmct);
+  afterEach(() => {
+    openmct.time.timeSystem('utc', {
+      start: 0,
+      end: 1
     });
 
-    it("should provide a lad table set view only for lad table set objects", () => {
-        spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve({}));
+    return resetApplicationState(openmct);
+  });
 
-        let applicableViews = openmct.objectViews.get(mockObj.ladTableSet, []);
+  it('should provide a lad table set view only for lad table set objects', () => {
+    spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve({}));
 
-        let ladTableSetView = applicableViews.find(
-            (viewProvider) => viewProvider.key === ladTableSetKey
-        );
+    let applicableViews = openmct.objectViews.get(mockObj.ladTableSet, []);
 
-        expect(applicableViews.length).toEqual(1);
-        expect(ladTableSetView).toBeDefined();
-    });
+    let ladTableSetView = applicableViews.find(
+      (viewProvider) => viewProvider.key === ladTableSetKey
+    );
+
+    expect(applicableViews.length).toEqual(1);
+    expect(ladTableSetView).toBeDefined();
+  });
+
+  describe('composition', () => {
+    let ladTableSetCompositionCollection;
 
-    describe('composition', () => {
-        let ladTableSetCompositionCollection;
+    beforeEach(() => {
+      spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve({}));
 
-        beforeEach(() => {
-            spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve({}));
+      ladTableSetCompositionCollection = openmct.composition.get(mockObj.ladTableSet);
 
-            ladTableSetCompositionCollection = openmct.composition.get(mockObj.ladTableSet);
+      return ladTableSetCompositionCollection.load();
+    });
 
-            return ladTableSetCompositionCollection.load();
-        });
+    it('should accept lad table objects', () => {
+      expect(() => {
+        ladTableSetCompositionCollection.add(mockObj.ladTable);
+      }).not.toThrow();
+    });
 
-        it("should accept lad table objects", () => {
-            expect(() => {
-                ladTableSetCompositionCollection.add(mockObj.ladTable);
-            }).not.toThrow();
-        });
+    it('should reject non lad table objects', () => {
+      expect(() => {
+        ladTableSetCompositionCollection.add(mockObj.telemetry);
+      }).toThrow();
+    });
+  });
+
+  describe('table view', () => {
+    let applicableViews;
+    let ladTableSetViewProvider;
+    let ladTableSetView;
+
+    let otherObj = getMockObjects({
+      objectKeyStrings: ['ladTable'],
+      overwrite: {
+        ladTable: {
+          name: 'New LAD Table Object',
+          identifier: {
+            namespace: '',
+            key: 'another-lad-object'
+          }
+        }
+      }
+    });
 
-        it("should reject non lad table objects", () => {
-            expect(() => {
-                ladTableSetCompositionCollection.add(mockObj.telemetry);
-            }).toThrow();
-        });
+    // add another lad table (with telemetry object) object to the lad table set for multi row test
+    otherObj.ladTable.composition.push(mockObj.telemetry.identifier);
+    mockObj.ladTableSet.composition.push(otherObj.ladTable.identifier);
+
+    beforeEach(() => {
+      spyOn(openmct.telemetry, 'request').and.returnValue(Promise.resolve([]));
+
+      spyOn(openmct.objects, 'get').and.callFake((obj) => {
+        if (obj.key === 'lad-object') {
+          return Promise.resolve(mockObj.ladTable);
+        } else if (obj.key === 'another-lad-object') {
+          return Promise.resolve(otherObj.ladTable);
+        } else if (obj.key === 'telemetry-object') {
+          return Promise.resolve(mockObj.telemetry);
+        }
+      });
+
+      openmct.time.bounds({
+        start: bounds.start,
+        end: bounds.end
+      });
+
+      applicableViews = openmct.objectViews.get(mockObj.ladTableSet, []);
+      ladTableSetViewProvider = applicableViews.find(
+        (viewProvider) => viewProvider.key === ladTableSetKey
+      );
+      ladTableSetView = ladTableSetViewProvider.view(mockObj.ladTableSet, [mockObj.ladTableSet]);
+      ladTableSetView.show(child, false, { renderWhenVisible });
+
+      return nextTick();
     });
 
-    describe("table view", () => {
-        let applicableViews;
-        let ladTableSetViewProvider;
-        let ladTableSetView;
-
-        let otherObj = getMockObjects({
-            objectKeyStrings: ['ladTable'],
-            overwrite: {
-                ladTable: {
-                    name: "New LAD Table Object",
-                    identifier: {
-                        namespace: "",
-                        key: "another-lad-object"
-                    }
-                }
-            }
-        });
-
-        // add another lad table (with telemetry object) object to the lad table set for multi row test
-        otherObj.ladTable.composition.push(mockObj.telemetry.identifier);
-        mockObj.ladTableSet.composition.push(otherObj.ladTable.identifier);
-
-        beforeEach(() => {
-            spyOn(openmct.telemetry, 'request').and.returnValue(Promise.resolve([]));
-
-            spyOn(openmct.objects, 'get').and.callFake((obj) => {
-                if (obj.key === 'lad-object') {
-                    return Promise.resolve(mockObj.ladTable);
-                } else if (obj.key === 'another-lad-object') {
-                    return Promise.resolve(otherObj.ladTable);
-                } else if (obj.key === 'telemetry-object') {
-                    return Promise.resolve(mockObj.telemetry);
-                }
-            });
-
-            openmct.time.bounds({
-                start: bounds.start,
-                end: bounds.end
-            });
-
-            applicableViews = openmct.objectViews.get(mockObj.ladTableSet, []);
-            ladTableSetViewProvider = applicableViews.find((viewProvider) => viewProvider.key === ladTableSetKey);
-            ladTableSetView = ladTableSetViewProvider.view(mockObj.ladTableSet, [mockObj.ladTableSet]);
-            ladTableSetView.show(child);
-
-            return Vue.nextTick();
-        });
-
-        it("should show one row per lad table object in the composition", () => {
-            const ladTableSetCompositionCollection = openmct.composition.get(mockObj.ladTableSet);
-
-            return ladTableSetCompositionCollection.load().then(() => {
-                const rowCount = parent.querySelectorAll(LAD_SET_TABLE_HEADERS).length;
-
-                expect(rowCount).toBe(mockObj.ladTableSet.composition.length);
-            });
-        });
+    it('should show one row per lad table object in the composition', () => {
+      const ladTableSetCompositionCollection = openmct.composition.get(mockObj.ladTableSet);
+
+      return ladTableSetCompositionCollection.load().then(() => {
+        const rowCount = parent.querySelectorAll(LAD_SET_TABLE_HEADERS).length;
+
+        expect(rowCount).toBe(mockObj.ladTableSet.composition.length);
+      });
     });
+  });
 });
diff --git a/src/plugins/URLIndicatorPlugin/URLIndicator.js b/src/plugins/URLIndicatorPlugin/URLIndicator.js
index 9c560bd57f6..f90a2ca6f7c 100644
--- a/src/plugins/URLIndicatorPlugin/URLIndicator.js
+++ b/src/plugins/URLIndicatorPlugin/URLIndicator.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,90 +20,92 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(
-    ['zepto'],
-    function ($) {
+// Set of connection states; changing among these states will be
+// reflected in the indicator's appearance.
+// CONNECTED: Everything nominal, expect to be able to read/write.
+// DISCONNECTED: HTTP failed; maybe misconfigured, disconnected.
+// PENDING: Still trying to connect, and haven't failed yet.
+const CONNECTED = {
+  statusClass: 's-status-on'
+};
+const PENDING = {
+  statusClass: 's-status-warning-lo'
+};
+const DISCONNECTED = {
+  statusClass: 's-status-warning-hi'
+};
+export default function URLIndicator(options, simpleIndicator) {
+  this.bindMethods();
+  this.count = 0;
 
-        // Set of connection states; changing among these states will be
-        // reflected in the indicator's appearance.
-        // CONNECTED: Everything nominal, expect to be able to read/write.
-        // DISCONNECTED: HTTP failed; maybe misconfigured, disconnected.
-        // PENDING: Still trying to connect, and haven't failed yet.
-        const CONNECTED = {
-            statusClass: "s-status-on"
-        };
-        const PENDING = {
-            statusClass: "s-status-warning-lo"
-        };
-        const DISCONNECTED = {
-            statusClass: "s-status-warning-hi"
-        };
-        function URLIndicator(options, simpleIndicator) {
-            this.bindMethods();
-            this.count = 0;
+  this.indicator = simpleIndicator;
+  this.setDefaultsFromOptions(options);
+  this.setIndicatorToState(PENDING);
 
-            this.indicator = simpleIndicator;
-            this.setDefaultsFromOptions(options);
-            this.setIndicatorToState(PENDING);
+  this.fetchUrl();
+  setInterval(this.fetchUrl, this.interval);
+}
 
-            this.fetchUrl();
-            setInterval(this.fetchUrl, this.interval);
-        }
+URLIndicator.prototype.setIndicatorToState = function (state) {
+  switch (state) {
+    case CONNECTED: {
+      this.indicator.text(this.label + ' is connected');
+      this.indicator.description(
+        this.label + ' is online, checking status every ' + this.interval + ' milliseconds.'
+      );
+      break;
+    }
 
-        URLIndicator.prototype.setIndicatorToState = function (state) {
-            switch (state) {
-            case CONNECTED: {
-                this.indicator.text(this.label + " is connected");
-                this.indicator.description(this.label + " is online, checking status every " + this.interval + " milliseconds.");
-                break;
-            }
+    case PENDING: {
+      this.indicator.text('Checking status of ' + this.label + ' please stand by...');
+      this.indicator.description('Checking status of ' + this.label + ' please stand by...');
+      break;
+    }
 
-            case PENDING: {
-                this.indicator.text("Checking status of " + this.label + " please stand by...");
-                this.indicator.description("Checking status of " + this.label + " please stand by...");
-                break;
-            }
+    case DISCONNECTED: {
+      this.indicator.text(this.label + ' is offline');
+      this.indicator.description(
+        this.label + ' is offline, checking status every ' + this.interval + ' milliseconds'
+      );
+      break;
+    }
+  }
 
-            case DISCONNECTED: {
-                this.indicator.text(this.label + " is offline");
-                this.indicator.description(this.label + " is offline, checking status every " + this.interval + " milliseconds");
-                break;
-            }
-            }
+  this.indicator.statusClass(state.statusClass);
+};
 
-            this.indicator.statusClass(state.statusClass);
-        };
-
-        URLIndicator.prototype.fetchUrl = function () {
-            $.ajax({
-                type: 'GET',
-                url: this.URLpath,
-                success: this.handleSuccess,
-                error: this.handleError
-            });
-        };
-
-        URLIndicator.prototype.handleError = function (e) {
-            this.setIndicatorToState(DISCONNECTED);
-        };
+URLIndicator.prototype.fetchUrl = function () {
+  fetch(this.URLpath)
+    .then((response) => {
+      if (response.ok) {
+        this.handleSuccess();
+      } else {
+        this.handleError();
+      }
+    })
+    .catch((error) => {
+      this.handleError();
+    });
+};
 
-        URLIndicator.prototype.handleSuccess = function () {
-            this.setIndicatorToState(CONNECTED);
-        };
+URLIndicator.prototype.handleError = function (e) {
+  this.setIndicatorToState(DISCONNECTED);
+};
 
-        URLIndicator.prototype.setDefaultsFromOptions = function (options) {
-            this.URLpath = options.url;
-            this.label = options.label || options.url;
-            this.interval = options.interval || 10000;
-            this.indicator.iconClass(options.iconClass || 'icon-chain-links');
-        };
+URLIndicator.prototype.handleSuccess = function () {
+  this.setIndicatorToState(CONNECTED);
+};
 
-        URLIndicator.prototype.bindMethods = function () {
-            this.fetchUrl = this.fetchUrl.bind(this);
-            this.handleSuccess = this.handleSuccess.bind(this);
-            this.handleError = this.handleError.bind(this);
-            this.setIndicatorToState = this.setIndicatorToState.bind(this);
-        };
+URLIndicator.prototype.setDefaultsFromOptions = function (options) {
+  this.URLpath = options.url;
+  this.label = options.label || options.url;
+  this.interval = options.interval || 10000;
+  this.indicator.iconClass(options.iconClass || 'icon-chain-links');
+};
 
-        return URLIndicator;
-    });
+URLIndicator.prototype.bindMethods = function () {
+  this.fetchUrl = this.fetchUrl.bind(this);
+  this.handleSuccess = this.handleSuccess.bind(this);
+  this.handleError = this.handleError.bind(this);
+  this.setIndicatorToState = this.setIndicatorToState.bind(this);
+};
diff --git a/src/plugins/URLIndicatorPlugin/URLIndicatorPlugin.js b/src/plugins/URLIndicatorPlugin/URLIndicatorPlugin.js
index 930a2b96980..bbb0f563bf2 100644
--- a/src/plugins/URLIndicatorPlugin/URLIndicatorPlugin.js
+++ b/src/plugins/URLIndicatorPlugin/URLIndicatorPlugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,17 +19,15 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-define(['./URLIndicator'],
-    function URLIndicatorPlugin(URLIndicator) {
-        return function (opts) {
-            return function install(openmct) {
-                const simpleIndicator = openmct.indicators.simpleIndicator();
-                const urlIndicator = new URLIndicator(opts, simpleIndicator);
+import URLIndicator from './URLIndicator.js';
 
-                openmct.indicators.add(simpleIndicator);
+export default function URLIndicatorPlugin(opts) {
+  return function install(openmct) {
+    const simpleIndicator = openmct.indicators.simpleIndicator();
+    const urlIndicator = new URLIndicator(opts, simpleIndicator);
 
-                return urlIndicator;
-            };
-        };
-    }
-);
+    openmct.indicators.add(simpleIndicator);
+
+    return urlIndicator;
+  };
+}
diff --git a/src/plugins/URLIndicatorPlugin/URLIndicatorSpec.js b/src/plugins/URLIndicatorPlugin/URLIndicatorSpec.js
index 0c45938f580..7c435ee544b 100644
--- a/src/plugins/URLIndicatorPlugin/URLIndicatorSpec.js
+++ b/src/plugins/URLIndicatorPlugin/URLIndicatorSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,121 +20,115 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(
-    [
-        "utils/testing",
-        "./URLIndicator",
-        "./URLIndicatorPlugin",
-        "../../MCT",
-        "zepto"
-    ],
-    function (
-        testingUtils,
-        URLIndicator,
-        URLIndicatorPlugin,
-        MCT,
-        $
-    ) {
-        const defaultAjaxFunction = $.ajax;
-
-        describe("The URLIndicator", function () {
-            let openmct;
-            let indicatorElement;
-            let pluginOptions;
-            let ajaxOptions;
-            let urlIndicator; // eslint-disable-line
-
-            beforeEach(function () {
-                jasmine.clock().install();
-                openmct = new testingUtils.createOpenMct();
-                spyOn(openmct.indicators, 'add');
-                spyOn($, 'ajax');
-                $.ajax.and.callFake(function (options) {
-                    ajaxOptions = options;
-                });
-            });
-
-            afterEach(function () {
-                $.ajax = defaultAjaxFunction;
-                jasmine.clock().uninstall();
-
-                return testingUtils.resetApplicationState(openmct);
-            });
-
-            describe("on initialization", function () {
-                describe("with default options", function () {
-                    beforeEach(function () {
-                        pluginOptions = {
-                            url: "someURL"
-                        };
-                        urlIndicator = URLIndicatorPlugin(pluginOptions)(openmct);
-                        indicatorElement = openmct.indicators.add.calls.mostRecent().args[0].element;
-                    });
-
-                    it("has a default icon class if none supplied", function () {
-                        expect(indicatorElement.classList.contains('icon-chain-links')).toBe(true);
-                    });
-
-                    it("defaults to the URL if no label supplied", function () {
-                        expect(indicatorElement.textContent.indexOf(pluginOptions.url) >= 0).toBe(true);
-                    });
-                });
-
-                describe("with custom options", function () {
-                    beforeEach(function () {
-                        pluginOptions = {
-                            url: "customURL",
-                            interval: 1814,
-                            iconClass: "iconClass-checked",
-                            label: "custom label"
-                        };
-                        urlIndicator = URLIndicatorPlugin(pluginOptions)(openmct);
-                        indicatorElement = openmct.indicators.add.calls.mostRecent().args[0].element;
-                    });
-
-                    it("uses the custom iconClass", function () {
-                        expect(indicatorElement.classList.contains('iconClass-checked')).toBe(true);
-                    });
-                    it("uses custom interval", function () {
-                        expect($.ajax.calls.count()).toEqual(1);
-                        jasmine.clock().tick(1);
-                        expect($.ajax.calls.count()).toEqual(1);
-                        jasmine.clock().tick(pluginOptions.interval + 1);
-                        expect($.ajax.calls.count()).toEqual(2);
-                    });
-                    it("uses custom label if supplied in initialization", function () {
-                        expect(indicatorElement.textContent.indexOf(pluginOptions.label) >= 0).toBe(true);
-                    });
-                });
-            });
-
-            describe("when running", function () {
-                beforeEach(function () {
-                    pluginOptions = {
-                        url: "someURL",
-                        interval: 100
-                    };
-                    urlIndicator = URLIndicatorPlugin(pluginOptions)(openmct);
-                    indicatorElement = openmct.indicators.add.calls.mostRecent().args[0].element;
-                });
-
-                it("requests the provided URL", function () {
-                    jasmine.clock().tick(pluginOptions.interval + 1);
-                    expect(ajaxOptions.url).toEqual(pluginOptions.url);
-                });
-
-                it("indicates success if connection is nominal", function () {
-                    jasmine.clock().tick(pluginOptions.interval + 1);
-                    ajaxOptions.success();
-                    expect(indicatorElement.classList.contains('s-status-on')).toBe(true);
-                });
-
-                it("indicates an error when the server cannot be reached", function () {
-                    jasmine.clock().tick(pluginOptions.interval + 1);
-                    ajaxOptions.error();
-                    expect(indicatorElement.classList.contains('s-status-warning-hi')).toBe(true);
-                });
-            });
-        });
+import * as testingUtils from 'utils/testing';
+
+import URLIndicatorPlugin from './URLIndicatorPlugin.js';
+
+describe('The URLIndicator', function () {
+  let openmct;
+  let indicatorElement;
+  let pluginOptions;
+  let urlIndicator; // eslint-disable-line
+  let fetchSpy;
+
+  beforeEach(function () {
+    jasmine.clock().install();
+    openmct = new testingUtils.createOpenMct();
+    spyOn(openmct.indicators, 'add');
+    fetchSpy = spyOn(window, 'fetch').and.callFake(() =>
+      Promise.resolve({
+        ok: true
+      })
+    );
+  });
+
+  afterEach(function () {
+    if (window.fetch.restore) {
+      window.fetch.restore();
     }
-);
+
+    jasmine.clock().uninstall();
+
+    return testingUtils.resetApplicationState(openmct);
+  });
+
+  describe('on initialization', function () {
+    describe('with default options', function () {
+      beforeEach(function () {
+        pluginOptions = {
+          url: 'someURL'
+        };
+        urlIndicator = URLIndicatorPlugin(pluginOptions)(openmct);
+        indicatorElement = openmct.indicators.add.calls.mostRecent().args[0].element;
+      });
+
+      it('has a default icon class if none supplied', function () {
+        expect(indicatorElement.classList.contains('icon-chain-links')).toBe(true);
+      });
+
+      it('defaults to the URL if no label supplied', function () {
+        expect(indicatorElement.textContent.indexOf(pluginOptions.url) >= 0).toBe(true);
+      });
+    });
+
+    describe('with custom options', function () {
+      beforeEach(function () {
+        pluginOptions = {
+          url: 'customURL',
+          interval: 1814,
+          iconClass: 'iconClass-checked',
+          label: 'custom label'
+        };
+        urlIndicator = URLIndicatorPlugin(pluginOptions)(openmct);
+        indicatorElement = openmct.indicators.add.calls.mostRecent().args[0].element;
+      });
+
+      it('uses the custom iconClass', function () {
+        expect(indicatorElement.classList.contains('iconClass-checked')).toBe(true);
+      });
+      it('uses custom interval', function () {
+        expect(window.fetch).toHaveBeenCalledTimes(1);
+        jasmine.clock().tick(1);
+        expect(window.fetch).toHaveBeenCalledTimes(1);
+        jasmine.clock().tick(pluginOptions.interval + 1);
+        expect(window.fetch).toHaveBeenCalledTimes(2);
+      });
+      it('uses custom label if supplied in initialization', function () {
+        expect(indicatorElement.textContent.indexOf(pluginOptions.label) >= 0).toBe(true);
+      });
+    });
+  });
+
+  describe('when running', function () {
+    beforeEach(function () {
+      pluginOptions = {
+        url: 'someURL',
+        interval: 100
+      };
+      urlIndicator = URLIndicatorPlugin(pluginOptions)(openmct);
+      indicatorElement = openmct.indicators.add.calls.mostRecent().args[0].element;
+    });
+
+    it('requests the provided URL', function () {
+      jasmine.clock().tick(pluginOptions.interval + 1);
+      expect(window.fetch).toHaveBeenCalledWith(pluginOptions.url);
+    });
+
+    it('indicates success if connection is nominal', async function () {
+      jasmine.clock().tick(pluginOptions.interval + 1);
+      await urlIndicator.fetchUrl();
+      expect(indicatorElement.classList.contains('s-status-on')).toBe(true);
+    });
+
+    it('indicates an error when the server cannot be reached', async function () {
+      fetchSpy.and.callFake(() =>
+        Promise.resolve({
+          ok: false
+        })
+      );
+      jasmine.clock().tick(pluginOptions.interval + 1);
+      await urlIndicator.fetchUrl();
+      expect(indicatorElement.classList.contains('s-status-warning-hi')).toBe(true);
+    });
+  });
+});
diff --git a/src/plugins/URLTimeSettingsSynchronizer/URLTimeSettingsSynchronizer.js b/src/plugins/URLTimeSettingsSynchronizer/URLTimeSettingsSynchronizer.js
index 1d63be713f5..79dbcd2f6e7 100644
--- a/src/plugins/URLTimeSettingsSynchronizer/URLTimeSettingsSynchronizer.js
+++ b/src/plugins/URLTimeSettingsSynchronizer/URLTimeSettingsSynchronizer.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,215 +20,229 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const TIME_EVENTS = ['timeSystem', 'clock', 'clockOffsets'];
+import {
+  FIXED_MODE_KEY,
+  REALTIME_MODE_KEY,
+  TIME_CONTEXT_EVENTS
+} from '../../api/time/constants.js';
+
 const SEARCH_MODE = 'tc.mode';
 const SEARCH_TIME_SYSTEM = 'tc.timeSystem';
 const SEARCH_START_BOUND = 'tc.startBound';
 const SEARCH_END_BOUND = 'tc.endBound';
 const SEARCH_START_DELTA = 'tc.startDelta';
 const SEARCH_END_DELTA = 'tc.endDelta';
-const MODE_FIXED = 'fixed';
+const TIME_EVENTS = [
+  TIME_CONTEXT_EVENTS.timeSystemChanged,
+  TIME_CONTEXT_EVENTS.modeChanged,
+  TIME_CONTEXT_EVENTS.clockChanged,
+  TIME_CONTEXT_EVENTS.clockOffsetsChanged
+];
 
 export default class URLTimeSettingsSynchronizer {
-    constructor(openmct) {
-        this.openmct = openmct;
-        this.isUrlUpdateInProgress = false;
-
-        this.initialize = this.initialize.bind(this);
-        this.destroy = this.destroy.bind(this);
-        this.updateTimeSettings = this.updateTimeSettings.bind(this);
-        this.setUrlFromTimeApi = this.setUrlFromTimeApi.bind(this);
-        this.updateBounds = this.updateBounds.bind(this);
-
-        openmct.on('start', this.initialize);
-        openmct.on('destroy', this.destroy);
-    }
-
-    initialize() {
-        this.updateTimeSettings();
-        this.openmct.router.on('change:params', this.updateTimeSettings);
-
-        TIME_EVENTS.forEach(event => {
-            this.openmct.time.on(event, this.setUrlFromTimeApi);
-        });
-        this.openmct.time.on('bounds', this.updateBounds);
-    }
-
-    destroy() {
-        this.openmct.router.off('change:params', this.updateTimeSettings);
-
-        this.openmct.off('start', this.initialize);
-        this.openmct.off('destroy', this.destroy);
-
-        TIME_EVENTS.forEach(event => {
-            this.openmct.time.off(event, this.setUrlFromTimeApi);
-        });
-        this.openmct.time.off('bounds', this.updateBounds);
+  constructor(openmct) {
+    this.openmct = openmct;
+    this.isUrlUpdateInProgress = false;
+
+    this.initialize = this.initialize.bind(this);
+    this.destroy = this.destroy.bind(this);
+    this.updateTimeSettings = this.updateTimeSettings.bind(this);
+    this.setUrlFromTimeApi = this.setUrlFromTimeApi.bind(this);
+    this.updateBounds = this.updateBounds.bind(this);
+
+    openmct.on('start', this.initialize);
+    openmct.on('destroy', this.destroy);
+  }
+
+  initialize() {
+    this.updateTimeSettings();
+    this.openmct.router.on('change:params', this.updateTimeSettings);
+
+    TIME_EVENTS.forEach((event) => {
+      this.openmct.time.on(event, this.setUrlFromTimeApi);
+    });
+    this.openmct.time.on('bounds', this.updateBounds);
+  }
+
+  destroy() {
+    this.openmct.router.off('change:params', this.updateTimeSettings);
+
+    this.openmct.off('start', this.initialize);
+    this.openmct.off('destroy', this.destroy);
+
+    TIME_EVENTS.forEach((event) => {
+      this.openmct.time.off(event, this.setUrlFromTimeApi);
+    });
+    this.openmct.time.off('bounds', this.updateBounds);
+  }
+
+  updateTimeSettings() {
+    const timeParameters = this.parseParametersFromUrl();
+
+    if (this.areTimeParametersValid(timeParameters)) {
+      this.setTimeApiFromUrl(timeParameters);
+      this.openmct.router.setLocationFromUrl();
+    } else {
+      this.setUrlFromTimeApi();
     }
-
-    updateTimeSettings() {
-        let timeParameters = this.parseParametersFromUrl();
-
-        if (this.areTimeParametersValid(timeParameters)) {
-            this.setTimeApiFromUrl(timeParameters);
-            this.openmct.router.setLocationFromUrl();
-        } else {
-            this.setUrlFromTimeApi();
-        }
+  }
+
+  parseParametersFromUrl() {
+    const searchParams = this.openmct.router.getAllSearchParams();
+    const mode = searchParams.get(SEARCH_MODE);
+    const timeSystem = searchParams.get(SEARCH_TIME_SYSTEM);
+    const startBound = parseInt(searchParams.get(SEARCH_START_BOUND), 10);
+    const endBound = parseInt(searchParams.get(SEARCH_END_BOUND), 10);
+    const bounds = {
+      start: startBound,
+      end: endBound
+    };
+    const startOffset = parseInt(searchParams.get(SEARCH_START_DELTA), 10);
+    const endOffset = parseInt(searchParams.get(SEARCH_END_DELTA), 10);
+    const clockOffsets = {
+      start: 0 - startOffset,
+      end: endOffset
+    };
+
+    return {
+      mode,
+      timeSystem,
+      bounds,
+      clockOffsets
+    };
+  }
+
+  setTimeApiFromUrl(timeParameters) {
+    const timeSystem = this.openmct.time.getTimeSystem();
+
+    if (timeParameters.mode === FIXED_MODE_KEY) {
+      // should update timesystem
+      if (timeSystem.key !== timeParameters.timeSystem) {
+        this.openmct.time.setTimeSystem(timeParameters.timeSystem, timeParameters.bounds);
+      }
+      if (!this.areStartAndEndEqual(this.openmct.time.getBounds(), timeParameters.bounds)) {
+        this.openmct.time.setMode(FIXED_MODE_KEY, timeParameters.bounds);
+      } else {
+        this.openmct.time.setMode(FIXED_MODE_KEY);
+      }
+    } else {
+      const clock = this.openmct.time.getClock();
+
+      if (clock?.key !== timeParameters.mode) {
+        this.openmct.time.setClock(timeParameters.mode);
+      }
+
+      if (
+        !this.areStartAndEndEqual(this.openmct.time.getClockOffsets(), timeParameters.clockOffsets)
+      ) {
+        this.openmct.time.setMode(REALTIME_MODE_KEY, timeParameters.clockOffsets);
+      } else {
+        this.openmct.time.setMode(REALTIME_MODE_KEY);
+      }
+
+      if (timeSystem?.key !== timeParameters.timeSystem) {
+        this.openmct.time.setTimeSystem(timeParameters.timeSystem);
+      }
     }
+  }
 
-    parseParametersFromUrl() {
-        let searchParams = this.openmct.router.getAllSearchParams();
-
-        let mode = searchParams.get(SEARCH_MODE);
-        let timeSystem = searchParams.get(SEARCH_TIME_SYSTEM);
-
-        let startBound = parseInt(searchParams.get(SEARCH_START_BOUND), 10);
-        let endBound = parseInt(searchParams.get(SEARCH_END_BOUND), 10);
-        let bounds = {
-            start: startBound,
-            end: endBound
-        };
-
-        let startOffset = parseInt(searchParams.get(SEARCH_START_DELTA), 10);
-        let endOffset = parseInt(searchParams.get(SEARCH_END_DELTA), 10);
-        let clockOffsets = {
-            start: 0 - startOffset,
-            end: endOffset
-        };
-
-        return {
-            mode,
-            timeSystem,
-            bounds,
-            clockOffsets
-        };
+  updateBounds(bounds, isTick) {
+    if (!isTick) {
+      this.setUrlFromTimeApi();
     }
-
-    setTimeApiFromUrl(timeParameters) {
-        if (timeParameters.mode === 'fixed') {
-            if (this.openmct.time.timeSystem().key !== timeParameters.timeSystem) {
-                this.openmct.time.timeSystem(
-                    timeParameters.timeSystem,
-                    timeParameters.bounds
-                );
-            } else if (!this.areStartAndEndEqual(this.openmct.time.bounds(), timeParameters.bounds)) {
-                this.openmct.time.bounds(timeParameters.bounds);
-            }
-
-            if (this.openmct.time.clock()) {
-                this.openmct.time.stopClock();
-            }
-        } else {
-            if (!this.openmct.time.clock()
-                || this.openmct.time.clock().key !== timeParameters.mode) {
-                this.openmct.time.clock(timeParameters.mode, timeParameters.clockOffsets);
-            } else if (!this.areStartAndEndEqual(this.openmct.time.clockOffsets(), timeParameters.clockOffsets)) {
-                this.openmct.time.clockOffsets(timeParameters.clockOffsets);
-            }
-
-            if (!this.openmct.time.timeSystem()
-                || this.openmct.time.timeSystem().key !== timeParameters.timeSystem) {
-                this.openmct.time.timeSystem(timeParameters.timeSystem);
-            }
-        }
+  }
+
+  setUrlFromTimeApi() {
+    const searchParams = this.openmct.router.getAllSearchParams();
+    const clock = this.openmct.time.getClock();
+    const mode = this.openmct.time.getMode();
+    const bounds = this.openmct.time.getBounds();
+    const clockOffsets = this.openmct.time.getClockOffsets();
+
+    if (mode === FIXED_MODE_KEY) {
+      searchParams.set(SEARCH_MODE, FIXED_MODE_KEY);
+      searchParams.set(SEARCH_START_BOUND, bounds.start);
+      searchParams.set(SEARCH_END_BOUND, bounds.end);
+
+      searchParams.delete(SEARCH_START_DELTA);
+      searchParams.delete(SEARCH_END_DELTA);
+    } else {
+      searchParams.set(SEARCH_MODE, clock.key);
+
+      if (clockOffsets !== undefined) {
+        searchParams.set(SEARCH_START_DELTA, 0 - clockOffsets.start);
+        searchParams.set(SEARCH_END_DELTA, clockOffsets.end);
+      } else {
+        searchParams.delete(SEARCH_START_DELTA);
+        searchParams.delete(SEARCH_END_DELTA);
+      }
+
+      searchParams.delete(SEARCH_START_BOUND);
+      searchParams.delete(SEARCH_END_BOUND);
     }
 
-    updateBounds(bounds, isTick) {
-        if (!isTick) {
-            this.setUrlFromTimeApi();
-        }
+    searchParams.set(SEARCH_TIME_SYSTEM, this.openmct.time.getTimeSystem().key);
+    this.openmct.router.updateParams(searchParams);
+  }
+
+  areTimeParametersValid(timeParameters) {
+    let isValid = false;
+
+    if (
+      this.isModeValid(timeParameters.mode) &&
+      this.isTimeSystemValid(timeParameters.timeSystem)
+    ) {
+      if (timeParameters.mode === FIXED_MODE_KEY) {
+        isValid = this.areStartAndEndValid(timeParameters.bounds);
+      } else {
+        isValid = this.areStartAndEndValid(timeParameters.clockOffsets);
+      }
     }
 
-    setUrlFromTimeApi() {
-        let searchParams = this.openmct.router.getAllSearchParams();
-        let clock = this.openmct.time.clock();
-        let bounds = this.openmct.time.bounds();
-        let clockOffsets = this.openmct.time.clockOffsets();
-
-        if (clock === undefined) {
-            searchParams.set(SEARCH_MODE, MODE_FIXED);
-            searchParams.set(SEARCH_START_BOUND, bounds.start);
-            searchParams.set(SEARCH_END_BOUND, bounds.end);
-
-            searchParams.delete(SEARCH_START_DELTA);
-            searchParams.delete(SEARCH_END_DELTA);
-        } else {
-            searchParams.set(SEARCH_MODE, clock.key);
-
-            if (clockOffsets !== undefined) {
-                searchParams.set(SEARCH_START_DELTA, 0 - clockOffsets.start);
-                searchParams.set(SEARCH_END_DELTA, clockOffsets.end);
-            } else {
-                searchParams.delete(SEARCH_START_DELTA);
-                searchParams.delete(SEARCH_END_DELTA);
-            }
-
-            searchParams.delete(SEARCH_START_BOUND);
-            searchParams.delete(SEARCH_END_BOUND);
-        }
-
-        searchParams.set(SEARCH_TIME_SYSTEM, this.openmct.time.timeSystem().key);
-        this.openmct.router.setAllSearchParams(searchParams);
+    return isValid;
+  }
+
+  areStartAndEndValid(bounds) {
+    return (
+      bounds !== undefined &&
+      bounds.start !== undefined &&
+      bounds.start !== null &&
+      bounds.end !== undefined &&
+      bounds.start !== null &&
+      !isNaN(bounds.start) &&
+      !isNaN(bounds.end)
+    );
+  }
+
+  isTimeSystemValid(timeSystem) {
+    let isValid = timeSystem !== undefined;
+
+    if (isValid) {
+      const timeSystemObject = this.openmct.time.timeSystems.get(timeSystem);
+      isValid = timeSystemObject !== undefined;
     }
 
-    areTimeParametersValid(timeParameters) {
-        let isValid = false;
-
-        if (this.isModeValid(timeParameters.mode)
-            && this.isTimeSystemValid(timeParameters.timeSystem)) {
+    return isValid;
+  }
 
-            if (timeParameters.mode === 'fixed') {
-                isValid = this.areStartAndEndValid(timeParameters.bounds);
-            } else {
-                isValid = this.areStartAndEndValid(timeParameters.clockOffsets);
-            }
-        }
+  isModeValid(mode) {
+    let isValid = false;
 
-        return isValid;
+    if (mode !== undefined && mode !== null) {
+      isValid = true;
     }
 
-    areStartAndEndValid(bounds) {
-        return bounds !== undefined
-            && bounds.start !== undefined
-            && bounds.start !== null
-            && bounds.end !== undefined
-            && bounds.start !== null
-            && !isNaN(bounds.start)
-            && !isNaN(bounds.end);
-    }
-
-    isTimeSystemValid(timeSystem) {
-        let isValid = timeSystem !== undefined;
-        if (isValid) {
-            let timeSystemObject = this.openmct.time.timeSystems.get(timeSystem);
-            isValid = timeSystemObject !== undefined;
-        }
-
-        return isValid;
+    if (
+      isValid &&
+      (mode.toLowerCase() === FIXED_MODE_KEY || this.openmct.time.clocks.get(mode) !== undefined)
+    ) {
+      isValid = true;
     }
 
-    isModeValid(mode) {
-        let isValid = false;
+    return isValid;
+  }
 
-        if (mode !== undefined
-            && mode !== null) {
-            isValid = true;
-        }
-
-        if (isValid) {
-            if (mode.toLowerCase() === MODE_FIXED) {
-                isValid = true;
-            } else {
-                isValid = this.openmct.time.clocks.get(mode) !== undefined;
-            }
-        }
-
-        return isValid;
-    }
-
-    areStartAndEndEqual(firstBounds, secondBounds) {
-        return firstBounds.start === secondBounds.start
-            && firstBounds.end === secondBounds.end;
-    }
+  areStartAndEndEqual(firstBounds, secondBounds) {
+    return firstBounds?.start === secondBounds.start && firstBounds?.end === secondBounds.end;
+  }
 }
diff --git a/src/plugins/URLTimeSettingsSynchronizer/plugin.js b/src/plugins/URLTimeSettingsSynchronizer/plugin.js
index 0dd888563b3..6116b7080df 100644
--- a/src/plugins/URLTimeSettingsSynchronizer/plugin.js
+++ b/src/plugins/URLTimeSettingsSynchronizer/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,10 +19,10 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import URLTimeSettingsSynchronizer from "./URLTimeSettingsSynchronizer.js";
+import URLTimeSettingsSynchronizer from './URLTimeSettingsSynchronizer.js';
 
 export default function () {
-    return function install(openmct) {
-        return new URLTimeSettingsSynchronizer(openmct);
-    };
+  return function install(openmct) {
+    return new URLTimeSettingsSynchronizer(openmct);
+  };
 }
diff --git a/src/plugins/URLTimeSettingsSynchronizer/pluginSpec.js b/src/plugins/URLTimeSettingsSynchronizer/pluginSpec.js
index 32435acb66b..f220e0abefd 100644
--- a/src/plugins/URLTimeSettingsSynchronizer/pluginSpec.js
+++ b/src/plugins/URLTimeSettingsSynchronizer/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,124 +19,112 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import {
-    createOpenMct,
-    resetApplicationState
-} from 'utils/testing';
-
-describe("The URLTimeSettingsSynchronizer", () => {
-    let appHolder;
-    let openmct;
-    let resolveFunction;
-    let oldHash;
-
-    beforeEach((done) => {
-        openmct = createOpenMct();
-        openmct.install(openmct.plugins.MyItems());
-        openmct.install(openmct.plugins.LocalTimeSystem());
-        openmct.install(openmct.plugins.UTCTimeSystem());
-
-        openmct.on('start', done);
-
-        appHolder = document.createElement("div");
-        openmct.start(appHolder);
-    });
-
-    afterEach(() => {
-        openmct.time.stopClock();
-        openmct.router.removeListener('change:hash', resolveFunction);
-
-        appHolder = undefined;
-        openmct = undefined;
-        resolveFunction = undefined;
-
-        return resetApplicationState(openmct);
-    });
-
-    it("initial clock is set to fixed is reflected in URL", (done) => {
-        resolveFunction = () => {
-            oldHash = window.location.hash;
-            expect(window.location.hash.includes('tc.mode=fixed')).toBe(true);
-
-            openmct.router.removeListener('change:hash', resolveFunction);
-            done();
-        };
-
-        openmct.router.on('change:hash', resolveFunction);
-    });
-
-    it("when the clock is set via the time API, it is reflected in the URL", (done) => {
-        let success;
-
-        resolveFunction = () => {
-            openmct.time.clock('local', {
-                start: -2000,
-                end: 200
-            });
-
-            const hasStartDelta = window.location.hash.includes('tc.startDelta=2000');
-            const hasEndDelta = window.location.hash.includes('tc.endDelta=200');
-            const hasLocalClock = window.location.hash.includes('tc.mode=local');
-            success = hasStartDelta && hasEndDelta && hasLocalClock;
-            if (success) {
-                expect(success).toBe(true);
-
-                openmct.router.removeListener('change:hash', resolveFunction);
-                done();
-            }
-        };
-
-        openmct.router.on('change:hash', resolveFunction);
-    });
-
-    it("when the clock mode is set to local, it is reflected in the URL", (done) => {
-        let success;
-
-        resolveFunction = () => {
-            let hash = window.location.hash;
-            hash = hash.replace('tc.mode=fixed', 'tc.mode=local');
-            window.location.hash = hash;
-
-            success = window.location.hash.includes('tc.mode=local');
-            if (success) {
-                expect(success).toBe(true);
-                done();
-            }
-        };
-
-        openmct.router.on('change:hash', resolveFunction);
-    });
-
-    it("when the clock mode is set to local, it is reflected in the URL", (done) => {
-        let success;
-
-        resolveFunction = () => {
-            let hash = window.location.hash;
-
-            hash = hash.replace('tc.mode=fixed', 'tc.mode=local');
-            window.location.hash = hash;
-            success = window.location.hash.includes('tc.mode=local');
-            if (success) {
-                expect(success).toBe(true);
-                done();
-            }
-        };
-
-        openmct.router.on('change:hash', resolveFunction);
-    });
-
-    it("reset hash", (done) => {
-        let success;
-
-        window.location.hash = oldHash;
-        resolveFunction = () => {
-            success = window.location.hash === oldHash;
-            if (success) {
-                expect(success).toBe(true);
-                done();
-            }
-        };
-
-        openmct.router.on('change:hash', resolveFunction);
-    });
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+
+xdescribe('The URLTimeSettingsSynchronizer', () => {
+  let appHolder;
+  let openmct;
+  let resolveFunction;
+  let oldHash;
+
+  beforeEach((done) => {
+    openmct = createOpenMct();
+    openmct.install(openmct.plugins.MyItems());
+    openmct.install(openmct.plugins.LocalTimeSystem());
+    openmct.install(openmct.plugins.UTCTimeSystem());
+
+    openmct.on('start', done);
+
+    appHolder = document.createElement('div');
+    openmct.start(appHolder);
+  });
+
+  afterEach(() => {
+    openmct.router.removeListener('change:hash', resolveFunction);
+
+    appHolder = undefined;
+    openmct = undefined;
+    resolveFunction = undefined;
+
+    return resetApplicationState(openmct);
+  });
+
+  it('initial clock is set to fixed is reflected in URL', (done) => {
+    resolveFunction = () => {
+      oldHash = window.location.hash;
+      expect(window.location.hash).toContain('tc.mode=fixed');
+
+      openmct.router.removeListener('change:hash', resolveFunction);
+      done();
+    };
+
+    // We have a debounce set to 300ms on setHash, so if we don't flush,
+    // the above resolve function sometimes doesn't fire due to a race condition.
+    openmct.router.setHash.flush();
+    openmct.router.on('change:hash', resolveFunction);
+  });
+
+  it('when the clock is set via the time API, it is reflected in the URL', (done) => {
+    resolveFunction = () => {
+      openmct.time.clock('local', {
+        start: -2000,
+        end: 200
+      });
+      openmct.router.setHash.flush();
+      const urlHash = window.location.hash;
+      expect(urlHash).toContain('tc.startDelta=2000');
+      expect(urlHash).toContain('tc.endDelta=200');
+      expect(urlHash).toContain('tc.mode=local');
+      openmct.router.removeListener('change:hash', resolveFunction);
+      done();
+    };
+
+    // We have a debounce set to 300ms on setHash, so if we don't flush,
+    // the above resolve function sometimes doesn't fire due to a race condition.
+    openmct.router.setHash.flush();
+    openmct.router.on('change:hash', resolveFunction);
+  });
+
+  it('when the clock mode is set to local, it is reflected in the URL', (done) => {
+    resolveFunction = () => {
+      let hash = window.location.hash;
+      hash = hash.replace('tc.mode=fixed', 'tc.mode=local');
+      window.location.hash = hash;
+
+      expect(window.location.hash).toContain('tc.mode=local');
+      done();
+    };
+
+    // We have a debounce set to 300ms on setHash, so if we don't flush,
+    // the above resolve function sometimes doesn't fire due to a race condition.
+    openmct.router.setHash.flush();
+    openmct.router.on('change:hash', resolveFunction);
+  });
+
+  it('when the clock mode is set to local, it is reflected in the URL', (done) => {
+    resolveFunction = () => {
+      let hash = window.location.hash;
+
+      hash = hash.replace('tc.mode=fixed', 'tc.mode=local');
+      window.location.hash = hash;
+      expect(window.location.hash).toContain('tc.mode=local');
+      done();
+    };
+
+    // We have a debounce set to 300ms on setHash, so if we don't flush,
+    // the above resolve function sometimes doesn't fire due to a race condition.
+    openmct.router.setHash.flush();
+    openmct.router.on('change:hash', resolveFunction);
+  });
+
+  // disabling due to test flakiness
+  xit('reset hash', (done) => {
+    window.location.hash = oldHash;
+    resolveFunction = () => {
+      expect(window.location.hash).toBe(oldHash);
+      done();
+    };
+
+    openmct.router.on('change:hash', resolveFunction);
+  });
 });
diff --git a/src/plugins/activityStates/activityStatesInterceptor.js b/src/plugins/activityStates/activityStatesInterceptor.js
new file mode 100644
index 00000000000..0ac425b0745
--- /dev/null
+++ b/src/plugins/activityStates/activityStatesInterceptor.js
@@ -0,0 +1,68 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { ACTIVITY_STATES_KEY } from './createActivityStatesIdentifier.js';
+
+/**
+ * @typedef {object} ActivityStatesInterceptorOptions
+ * @property {import('../../api/objects/ObjectAPI').Identifier} identifier the {namespace, key} to use for the activity states object.
+ * @property {string} name The name of the activity states model.
+ * @property {number} priority the priority of the interceptor. By default, it is low.
+ */
+
+/**
+ * Creates an activity states object in the persistence store. This is used to save plan activity states.
+ * This will only get invoked when an attempt is made to save the state for an activity and no activity states object exists in the store.
+ * @param {import('../../../openmct').OpenMCT} openmct
+ * @param {ActivityStatesInterceptorOptions} options
+ * @returns {object}
+ */
+const ACTIVITY_STATES_TYPE = 'activity-states';
+
+function activityStatesInterceptor(openmct, options) {
+  const { identifier, name, priority = openmct.priority.LOW } = options;
+  const activityStatesModel = {
+    identifier,
+    name,
+    type: ACTIVITY_STATES_TYPE,
+    activities: {},
+    location: null
+  };
+
+  return {
+    appliesTo: (identifierObject) => {
+      return identifierObject.key === ACTIVITY_STATES_KEY;
+    },
+    invoke: (identifierObject, object) => {
+      if (!object || openmct.objects.isMissing(object)) {
+        openmct.objects.save(activityStatesModel);
+
+        return activityStatesModel;
+      }
+
+      return object;
+    },
+    priority
+  };
+}
+
+export default activityStatesInterceptor;
diff --git a/src/plugins/activityStates/createActivityStatesIdentifier.js b/src/plugins/activityStates/createActivityStatesIdentifier.js
new file mode 100644
index 00000000000..76ab1d2cb71
--- /dev/null
+++ b/src/plugins/activityStates/createActivityStatesIdentifier.js
@@ -0,0 +1,30 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+export const ACTIVITY_STATES_KEY = 'activity-states';
+
+export function createActivityStatesIdentifier(namespace = '') {
+  return {
+    key: ACTIVITY_STATES_KEY,
+    namespace
+  };
+}
diff --git a/src/plugins/activityStates/pluginSpec.js b/src/plugins/activityStates/pluginSpec.js
new file mode 100644
index 00000000000..009259eaf2b
--- /dev/null
+++ b/src/plugins/activityStates/pluginSpec.js
@@ -0,0 +1,89 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+
+import {
+  ACTIVITY_STATES_KEY,
+  createActivityStatesIdentifier
+} from './createActivityStatesIdentifier.js';
+
+const MISSING_NAME = `Missing: ${ACTIVITY_STATES_KEY}`;
+const DEFAULT_NAME = 'Activity States';
+const activityStatesIdentifier = createActivityStatesIdentifier();
+
+describe('the plugin', () => {
+  let openmct;
+  let missingObj = {
+    identifier: activityStatesIdentifier,
+    type: 'unknown',
+    name: MISSING_NAME
+  };
+
+  describe('with no arguments passed in', () => {
+    beforeEach((done) => {
+      openmct = createOpenMct();
+      openmct.install(openmct.plugins.PlanLayout());
+
+      openmct.on('start', done);
+      openmct.startHeadless();
+    });
+
+    afterEach(() => {
+      return resetApplicationState(openmct);
+    });
+
+    it('when installed, adds "Activity States"', async () => {
+      const activityStatesObject = await openmct.objects.get(activityStatesIdentifier);
+      expect(activityStatesObject.name).toBe(DEFAULT_NAME);
+      expect(activityStatesObject).toBeDefined();
+    });
+
+    describe('adds an interceptor that returns a "Activity States" model for', () => {
+      let activityStatesObject;
+      let mockNotFoundProvider;
+      let activeProvider;
+
+      beforeEach(async () => {
+        mockNotFoundProvider = {
+          get: () => Promise.reject(new Error('Not found')),
+          create: () => Promise.resolve(missingObj),
+          update: () => Promise.resolve(missingObj)
+        };
+
+        activeProvider = mockNotFoundProvider;
+        spyOn(openmct.objects, 'getProvider').and.returnValue(activeProvider);
+        activityStatesObject = await openmct.objects.get(activityStatesIdentifier);
+      });
+
+      it('missing objects', () => {
+        let idsMatch = openmct.objects.areIdsEqual(
+          activityStatesObject.identifier,
+          activityStatesIdentifier
+        );
+
+        expect(activityStatesObject).toBeDefined();
+        expect(idsMatch).toBeTrue();
+      });
+    });
+  });
+});
diff --git a/src/plugins/autoflow/AutoflowTabularConstants.js b/src/plugins/autoflow/AutoflowTabularConstants.js
index 53f00dfe80a..f3ab699c8a6 100644
--- a/src/plugins/autoflow/AutoflowTabularConstants.js
+++ b/src/plugins/autoflow/AutoflowTabularConstants.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,15 +20,13 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([], function () {
-    /**
-     * Constant values used by the Autoflow Tabular View.
-     */
-    return {
-        ROW_HEIGHT: 16,
-        SLIDER_HEIGHT: 10,
-        INITIAL_COLUMN_WIDTH: 225,
-        MAX_COLUMN_WIDTH: 525,
-        COLUMN_WIDTH_STEP: 25
-    };
-});
+/**
+ * Constant values used by the Autoflow Tabular View.
+ */
+export default {
+  ROW_HEIGHT: 16,
+  SLIDER_HEIGHT: 10,
+  INITIAL_COLUMN_WIDTH: 225,
+  MAX_COLUMN_WIDTH: 525,
+  COLUMN_WIDTH_STEP: 25
+};
diff --git a/src/plugins/autoflow/AutoflowTabularController.js b/src/plugins/autoflow/AutoflowTabularController.js
index cf762d7803f..5a3a43939c7 100644
--- a/src/plugins/autoflow/AutoflowTabularController.js
+++ b/src/plugins/autoflow/AutoflowTabularController.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,102 +20,102 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    './AutoflowTabularRowController'
-], function (AutoflowTabularRowController) {
-    /**
-     * Controller for an Autoflow Tabular View. Subscribes to telemetry
-     * associated with children of the domain object and passes that
-     * information on to the view.
-     *
-     * @param {DomainObject} domainObject the object being viewed
-     * @param {*} data the view data
-     * @param openmct a reference to the openmct application
-     */
-    function AutoflowTabularController(domainObject, data, openmct) {
-        this.composition = openmct.composition.get(domainObject);
-        this.data = data;
-        this.openmct = openmct;
+import AutoflowTabularRowController from './AutoflowTabularRowController.js';
 
-        this.rows = {};
-        this.controllers = {};
-
-        this.addRow = this.addRow.bind(this);
-        this.removeRow = this.removeRow.bind(this);
-    }
+/**
+ * Controller for an Autoflow Tabular View. Subscribes to telemetry
+ * associated with children of the domain object and passes that
+ * information on to the view.
+ *
+ * @param {DomainObject} domainObject the object being viewed
+ * @param {*} data the view data
+ * @param openmct a reference to the openmct application
+ */
+export default function AutoflowTabularController(domainObject, data, openmct) {
+  this.composition = openmct.composition.get(domainObject);
+  this.data = data;
+  this.openmct = openmct;
 
-    /**
-     * Set the "Last Updated" value to be displayed.
-     * @param {String} value the value to display
-     * @private
-     */
-    AutoflowTabularController.prototype.trackLastUpdated = function (value) {
-        this.data.updated = value;
-    };
+  this.rows = {};
+  this.controllers = {};
 
-    /**
-     * Respond to an `add` event from composition by adding a new row.
-     * @private
-     */
-    AutoflowTabularController.prototype.addRow = function (childObject) {
-        const identifier = childObject.identifier;
-        const id = [identifier.namespace, identifier.key].join(":");
+  this.addRow = this.addRow.bind(this);
+  this.removeRow = this.removeRow.bind(this);
+}
 
-        if (!this.rows[id]) {
-            this.rows[id] = {
-                classes: "",
-                name: childObject.name,
-                value: undefined
-            };
-            this.controllers[id] = new AutoflowTabularRowController(
-                childObject,
-                this.rows[id],
-                this.openmct,
-                this.trackLastUpdated.bind(this)
-            );
-            this.controllers[id].activate();
-            this.data.items.push(this.rows[id]);
-        }
-    };
+/**
+ * Set the "Last Updated" value to be displayed.
+ * @param {String} value the value to display
+ * @private
+ */
+AutoflowTabularController.prototype.trackLastUpdated = function (value) {
+  this.data.updated = value;
+};
 
-    /**
-     * Respond to an `remove` event from composition by removing any
-     * related row.
-     * @private
-     */
-    AutoflowTabularController.prototype.removeRow = function (identifier) {
-        const id = [identifier.namespace, identifier.key].join(":");
+/**
+ * Respond to an `add` event from composition by adding a new row.
+ * @private
+ */
+AutoflowTabularController.prototype.addRow = function (childObject) {
+  const identifier = childObject.identifier;
+  const id = [identifier.namespace, identifier.key].join(':');
 
-        if (this.rows[id]) {
-            this.data.items = this.data.items.filter(function (item) {
-                return item !== this.rows[id];
-            }.bind(this));
-            this.controllers[id].destroy();
-            delete this.controllers[id];
-            delete this.rows[id];
-        }
+  if (!this.rows[id]) {
+    this.rows[id] = {
+      classes: '',
+      name: childObject.name,
+      value: undefined
     };
+    this.controllers[id] = new AutoflowTabularRowController(
+      childObject,
+      this.rows[id],
+      this.openmct,
+      this.trackLastUpdated.bind(this)
+    );
+    this.controllers[id].activate();
+    this.data.items.push(this.rows[id]);
+  }
+};
 
-    /**
-     * Activate this controller; begin listening for changes.
-     */
-    AutoflowTabularController.prototype.activate = function () {
-        this.composition.on('add', this.addRow);
-        this.composition.on('remove', this.removeRow);
-        this.composition.load();
-    };
+/**
+ * Respond to an `remove` event from composition by removing any
+ * related row.
+ * @private
+ */
+AutoflowTabularController.prototype.removeRow = function (identifier) {
+  const id = [identifier.namespace, identifier.key].join(':');
 
-    /**
-     * Destroy this controller; detach any associated resources.
-     */
-    AutoflowTabularController.prototype.destroy = function () {
-        Object.keys(this.controllers).forEach(function (id) {
-            this.controllers[id].destroy();
-        }.bind(this));
-        this.controllers = {};
-        this.composition.off('add', this.addRow);
-        this.composition.off('remove', this.removeRow);
-    };
+  if (this.rows[id]) {
+    this.data.items = this.data.items.filter(
+      function (item) {
+        return item !== this.rows[id];
+      }.bind(this)
+    );
+    this.controllers[id].destroy();
+    delete this.controllers[id];
+    delete this.rows[id];
+  }
+};
+
+/**
+ * Activate this controller; begin listening for changes.
+ */
+AutoflowTabularController.prototype.activate = function () {
+  this.composition.on('add', this.addRow);
+  this.composition.on('remove', this.removeRow);
+  this.composition.load();
+};
 
-    return AutoflowTabularController;
-});
+/**
+ * Destroy this controller; detach any associated resources.
+ */
+AutoflowTabularController.prototype.destroy = function () {
+  Object.keys(this.controllers).forEach(
+    function (id) {
+      this.controllers[id].destroy();
+    }.bind(this)
+  );
+  this.controllers = {};
+  this.composition.off('add', this.addRow);
+  this.composition.off('remove', this.removeRow);
+};
diff --git a/src/plugins/autoflow/AutoflowTabularPlugin.js b/src/plugins/autoflow/AutoflowTabularPlugin.js
index 4a39d7b4731..45e95e89564 100644
--- a/src/plugins/autoflow/AutoflowTabularPlugin.js
+++ b/src/plugins/autoflow/AutoflowTabularPlugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,32 +20,23 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    './AutoflowTabularView'
-], function (
-    AutoflowTabularView
-) {
-    return function (options) {
-        return function (openmct) {
-            const views = (openmct.mainViews || openmct.objectViews);
+import AutoflowTabularView from './AutoflowTabularView.js';
 
-            views.addProvider({
-                name: "Autoflow Tabular",
-                key: "autoflow",
-                cssClass: "icon-packet",
-                description: "A tabular view of packet contents.",
-                canView: function (d) {
-                    return !options || (options.type === d.type);
-                },
-                view: function (domainObject) {
-                    return new AutoflowTabularView(
-                        domainObject,
-                        openmct,
-                        document
-                    );
-                }
-            });
-        };
-    };
-});
+export default function (options) {
+  return function (openmct) {
+    const views = openmct.mainViews || openmct.objectViews;
 
+    views.addProvider({
+      name: 'Autoflow Tabular',
+      key: 'autoflow',
+      cssClass: 'icon-packet',
+      description: 'A tabular view of packet contents.',
+      canView: function (d) {
+        return !options || options.type === d.type;
+      },
+      view: function (domainObject) {
+        return new AutoflowTabularView(domainObject, openmct);
+      }
+    });
+  };
+}
diff --git a/src/plugins/autoflow/AutoflowTabularPluginSpec.js b/src/plugins/autoflow/AutoflowTabularPluginSpec.js
index f04cd51d706..2e6d0c53916 100644
--- a/src/plugins/autoflow/AutoflowTabularPluginSpec.js
+++ b/src/plugins/autoflow/AutoflowTabularPluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,355 +19,348 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import AutoflowTabularPlugin from './AutoflowTabularPlugin';
-import AutoflowTabularConstants from './AutoflowTabularConstants';
-import $ from 'zepto';
-import DOMObserver from './dom-observer';
-import {
-    createOpenMct,
-    resetApplicationState,
-    spyOnBuiltins
-} from 'utils/testing';
-import Vue from 'vue';
+import { createOpenMct, resetApplicationState, spyOnBuiltins } from 'utils/testing';
+import { nextTick } from 'vue';
+
+import AutoflowTabularConstants from './AutoflowTabularConstants.js';
+import AutoflowTabularPlugin from './AutoflowTabularPlugin.js';
+import DOMObserver from './dom-observer.js';
 
 // TODO lots of its without expects
-xdescribe("AutoflowTabularPlugin", () => {
-    let testType;
-    let testObject;
-    let mockmct;
+xdescribe('AutoflowTabularPlugin', () => {
+  let testType;
+  let testObject;
+  let mockmct;
+
+  beforeEach(() => {
+    testType = 'some-type';
+    testObject = { type: testType };
+    mockmct = createOpenMct();
+    spyOn(mockmct.composition, 'get');
+    spyOn(mockmct.objectViews, 'addProvider');
+    spyOn(mockmct.telemetry, 'getMetadata');
+    spyOn(mockmct.telemetry, 'getValueFormatter');
+    spyOn(mockmct.telemetry, 'limitEvaluator');
+    spyOn(mockmct.telemetry, 'request');
+    spyOn(mockmct.telemetry, 'subscribe');
+
+    const plugin = new AutoflowTabularPlugin({ type: testType });
+    plugin(mockmct);
+  });
+
+  afterEach(() => {
+    return resetApplicationState(mockmct);
+  });
+
+  it('installs a view provider', () => {
+    expect(mockmct.objectViews.addProvider).toHaveBeenCalled();
+  });
+
+  describe('installs a view provider which', () => {
+    let provider;
 
     beforeEach(() => {
-        testType = "some-type";
-        testObject = { type: testType };
-        mockmct = createOpenMct();
-        spyOn(mockmct.composition, 'get');
-        spyOn(mockmct.objectViews, 'addProvider');
-        spyOn(mockmct.telemetry, 'getMetadata');
-        spyOn(mockmct.telemetry, 'getValueFormatter');
-        spyOn(mockmct.telemetry, 'limitEvaluator');
-        spyOn(mockmct.telemetry, 'request');
-        spyOn(mockmct.telemetry, 'subscribe');
-
-        const plugin = new AutoflowTabularPlugin({ type: testType });
-        plugin(mockmct);
+      provider = mockmct.objectViews.addProvider.calls.mostRecent().args[0];
     });
 
-    afterEach(() => {
-        return resetApplicationState(mockmct);
+    it('applies its view to the type from options', () => {
+      expect(provider.canView(testObject, [])).toBe(true);
     });
 
-    it("installs a view provider", () => {
-        expect(mockmct.objectViews.addProvider).toHaveBeenCalled();
+    it('does not apply to other types', () => {
+      expect(provider.canView({ type: 'foo' }, [])).toBe(false);
     });
 
-    describe("installs a view provider which", () => {
-        let provider;
+    describe('provides a view which', () => {
+      let testKeys;
+      let testChildren;
+      let testContainer;
+      let testHistories;
+      let mockComposition;
+      let mockMetadata;
+      let mockEvaluator;
+      let mockUnsubscribes;
+      let callbacks;
+      let view;
+      let domObserver;
+
+      function waitsForChange() {
+        return new Promise(function (resolve) {
+          window.requestAnimationFrame(resolve);
+        });
+      }
+
+      function emitEvent(mockEmitter, type, event) {
+        mockEmitter.on.calls.all().forEach((call) => {
+          if (call.args[0] === type) {
+            call.args[1](event);
+          }
+        });
+      }
+
+      beforeEach(() => {
+        callbacks = {};
+
+        spyOnBuiltins(['requestAnimationFrame']);
+        window.requestAnimationFrame.and.callFake((callBack) => {
+          callBack();
+        });
+
+        testObject = { type: 'some-type' };
+        testKeys = ['abc', 'def', 'xyz'];
+        testChildren = testKeys.map((key) => {
+          return {
+            identifier: {
+              namespace: 'test',
+              key: key
+            },
+            name: 'Object ' + key
+          };
+        });
+        testContainer = document.createElement('div');
+        domObserver = new DOMObserver(testContainer);
+
+        testHistories = testKeys.reduce((histories, key, index) => {
+          histories[key] = {
+            key: key,
+            range: index + 10,
+            domain: key + index
+          };
+
+          return histories;
+        }, {});
+
+        mockComposition = jasmine.createSpyObj('composition', ['load', 'on', 'off']);
+        mockMetadata = jasmine.createSpyObj('metadata', ['valuesForHints']);
+
+        mockEvaluator = jasmine.createSpyObj('evaluator', ['evaluate']);
+        mockUnsubscribes = testKeys.reduce((map, key) => {
+          map[key] = jasmine.createSpy('unsubscribe-' + key);
+
+          return map;
+        }, {});
 
-        beforeEach(() => {
-            provider =
-                mockmct.objectViews.addProvider.calls.mostRecent().args[0];
+        mockmct.composition.get.and.returnValue(mockComposition);
+        mockComposition.load.and.callFake(() => {
+          testChildren.forEach(emitEvent.bind(null, mockComposition, 'add'));
+
+          return Promise.resolve(testChildren);
+        });
+
+        mockmct.telemetry.getMetadata.and.returnValue(mockMetadata);
+        mockmct.telemetry.getValueFormatter.and.callFake((metadatum) => {
+          const mockFormatter = jasmine.createSpyObj('formatter', ['format']);
+          mockFormatter.format.and.callFake((datum) => {
+            return datum[metadatum.hint];
+          });
+
+          return mockFormatter;
         });
+        mockmct.telemetry.limitEvaluator.and.returnValue(mockEvaluator);
+        mockmct.telemetry.subscribe.and.callFake((obj, callback) => {
+          const key = obj.identifier.key;
+          callbacks[key] = callback;
 
-        it("applies its view to the type from options", () => {
-            expect(provider.canView(testObject, [])).toBe(true);
+          return mockUnsubscribes[key];
+        });
+        mockmct.telemetry.request.and.callFake((obj, request) => {
+          const key = obj.identifier.key;
+
+          return Promise.resolve([testHistories[key]]);
+        });
+        mockMetadata.valuesForHints.and.callFake((hints) => {
+          return [{ hint: hints[0] }];
         });
 
-        it("does not apply to other types", () => {
-            expect(provider.canView({ type: 'foo' }, [])).toBe(false);
+        view = provider.view(testObject, [testObject]);
+        view.show(testContainer);
+
+        return nextTick();
+      });
+
+      afterEach(() => {
+        domObserver.destroy();
+      });
+
+      it('populates its container', () => {
+        expect(testContainer.children.length > 0).toBe(true);
+      });
+
+      describe('when rows have been populated', () => {
+        function rowsMatch() {
+          const rows = testContainer.querySelectorAll('.l-autoflow-row').length;
+
+          return rows === testChildren.length;
+        }
+
+        it('shows one row per child object', () => {
+          return domObserver.when(rowsMatch);
         });
 
-        describe("provides a view which", () => {
-            let testKeys;
-            let testChildren;
-            let testContainer;
-            let testHistories;
-            let mockComposition;
-            let mockMetadata;
-            let mockEvaluator;
-            let mockUnsubscribes;
-            let callbacks;
-            let view;
-            let domObserver;
-
-            function waitsForChange() {
-                return new Promise(function (resolve) {
-                    window.requestAnimationFrame(resolve);
-                });
-            }
-
-            function emitEvent(mockEmitter, type, event) {
-                mockEmitter.on.calls.all().forEach((call) => {
-                    if (call.args[0] === type) {
-                        call.args[1](event);
-                    }
-                });
-            }
-
-            beforeEach(() => {
-                callbacks = {};
-
-                spyOnBuiltins(['requestAnimationFrame']);
-                window.requestAnimationFrame.and.callFake((callBack) => {
-                    callBack();
-                });
-
-                testObject = { type: 'some-type' };
-                testKeys = ['abc', 'def', 'xyz'];
-                testChildren = testKeys.map((key) => {
-                    return {
-                        identifier: {
-                            namespace: "test",
-                            key: key
-                        },
-                        name: "Object " + key
-                    };
-                });
-                testContainer = $('<div>')[0];
-                domObserver = new DOMObserver(testContainer);
-
-                testHistories = testKeys.reduce((histories, key, index) => {
-                    histories[key] = {
-                        key: key,
-                        range: index + 10,
-                        domain: key + index
-                    };
-
-                    return histories;
-                }, {});
-
-                mockComposition =
-                    jasmine.createSpyObj('composition', ['load', 'on', 'off']);
-                mockMetadata =
-                    jasmine.createSpyObj('metadata', ['valuesForHints']);
-
-                mockEvaluator = jasmine.createSpyObj('evaluator', ['evaluate']);
-                mockUnsubscribes = testKeys.reduce((map, key) => {
-                    map[key] = jasmine.createSpy('unsubscribe-' + key);
-
-                    return map;
-                }, {});
-
-                mockmct.composition.get.and.returnValue(mockComposition);
-                mockComposition.load.and.callFake(() => {
-                    testChildren.forEach(emitEvent.bind(null, mockComposition, 'add'));
-
-                    return Promise.resolve(testChildren);
-                });
-
-                mockmct.telemetry.getMetadata.and.returnValue(mockMetadata);
-                mockmct.telemetry.getValueFormatter.and.callFake((metadatum) => {
-                    const mockFormatter = jasmine.createSpyObj('formatter', ['format']);
-                    mockFormatter.format.and.callFake((datum) => {
-                        return datum[metadatum.hint];
-                    });
-
-                    return mockFormatter;
-                });
-                mockmct.telemetry.limitEvaluator.and.returnValue(mockEvaluator);
-                mockmct.telemetry.subscribe.and.callFake((obj, callback) => {
-                    const key = obj.identifier.key;
-                    callbacks[key] = callback;
-
-                    return mockUnsubscribes[key];
-                });
-                mockmct.telemetry.request.and.callFake((obj, request) => {
-                    const key = obj.identifier.key;
-
-                    return Promise.resolve([testHistories[key]]);
-                });
-                mockMetadata.valuesForHints.and.callFake((hints) => {
-                    return [{ hint: hints[0] }];
-                });
-
-                view = provider.view(testObject);
-                view.show(testContainer);
-
-                return Vue.nextTick();
-            });
-
-            afterEach(() => {
-                domObserver.destroy();
-            });
-
-            it("populates its container", () => {
-                expect(testContainer.children.length > 0).toBe(true);
-            });
-
-            describe("when rows have been populated", () => {
-                function rowsMatch() {
-                    const rows = $(testContainer).find(".l-autoflow-row").length;
-
-                    return rows === testChildren.length;
-                }
-
-                it("shows one row per child object", () => {
-                    return domObserver.when(rowsMatch);
-                });
-
-                // it("adds rows on composition change", () => {
-                //     const child = {
-                //         identifier: {
-                //             namespace: "test",
-                //             key: "123"
-                //         },
-                //         name: "Object 123"
-                //     };
-                //     testChildren.push(child);
-                //     emitEvent(mockComposition, 'add', child);
-
-                //     return domObserver.when(rowsMatch);
-                // });
-
-                it("removes rows on composition change", () => {
-                    const child = testChildren.pop();
-                    emitEvent(mockComposition, 'remove', child.identifier);
-
-                    return domObserver.when(rowsMatch);
-                });
-            });
-
-            it("removes subscriptions when destroyed", () => {
-                testKeys.forEach((key) => {
-                    expect(mockUnsubscribes[key]).not.toHaveBeenCalled();
-                });
-                view.destroy();
-                testKeys.forEach((key) => {
-                    expect(mockUnsubscribes[key]).toHaveBeenCalled();
-                });
-            });
-
-            it("provides a button to change column width", () => {
-                const initialWidth = AutoflowTabularConstants.INITIAL_COLUMN_WIDTH;
-                const nextWidth =
-                    initialWidth + AutoflowTabularConstants.COLUMN_WIDTH_STEP;
-
-                expect($(testContainer).find('.l-autoflow-col').css('width'))
-                    .toEqual(initialWidth + 'px');
-
-                $(testContainer).find('.change-column-width').click();
-
-                function widthHasChanged() {
-                    const width = $(testContainer).find('.l-autoflow-col').css('width');
-
-                    return width !== initialWidth + 'px';
-                }
-
-                return domObserver.when(widthHasChanged)
-                    .then(() => {
-                        expect($(testContainer).find('.l-autoflow-col').css('width'))
-                            .toEqual(nextWidth + 'px');
-                    });
-            });
-
-            it("subscribes to all child objects", () => {
-                testKeys.forEach((key) => {
-                    expect(callbacks[key]).toEqual(jasmine.any(Function));
-                });
-            });
-
-            it("displays historical telemetry", () => {
-                function rowTextDefined() {
-                    return $(testContainer).find(".l-autoflow-item").filter(".r").text() !== "";
-                }
-
-                return domObserver.when(rowTextDefined).then(() => {
-                    testKeys.forEach((key, index) => {
-                        const datum = testHistories[key];
-                        const $cell = $(testContainer).find(".l-autoflow-row").eq(index).find(".r");
-                        expect($cell.text()).toEqual(String(datum.range));
-                    });
-                });
-            });
-
-            it("displays incoming telemetry", () => {
-                const testData = testKeys.map((key, index) => {
-                    return {
-                        key: key,
-                        range: index * 100,
-                        domain: key + index
-                    };
-                });
-
-                testData.forEach((datum) => {
-                    callbacks[datum.key](datum);
-                });
-
-                return waitsForChange().then(() => {
-                    testData.forEach((datum, index) => {
-                        const $cell = $(testContainer).find(".l-autoflow-row").eq(index).find(".r");
-                        expect($cell.text()).toEqual(String(datum.range));
-                    });
-                });
-            });
-
-            it("updates classes for limit violations", () => {
-                const testClass = "some-limit-violation";
-                mockEvaluator.evaluate.and.returnValue({ cssClass: testClass });
-                testKeys.forEach((key) => {
-                    callbacks[key]({
-                        range: 'foo',
-                        domain: 'bar'
-                    });
-                });
-
-                return waitsForChange().then(() => {
-                    testKeys.forEach((datum, index) => {
-                        const $cell = $(testContainer).find(".l-autoflow-row").eq(index).find(".r");
-                        expect($cell.hasClass(testClass)).toBe(true);
-                    });
-                });
-            });
-
-            it("automatically flows to new columns", () => {
-                const rowHeight = AutoflowTabularConstants.ROW_HEIGHT;
-                const sliderHeight = AutoflowTabularConstants.SLIDER_HEIGHT;
-                const count = testKeys.length;
-                const $container = $(testContainer);
-                let promiseChain = Promise.resolve();
-
-                function columnsHaveAutoflowed() {
-                    const itemsHeight = $container.find('.l-autoflow-items').height();
-                    const availableHeight = itemsHeight - sliderHeight;
-                    const availableRows = Math.max(Math.floor(availableHeight / rowHeight), 1);
-                    const columns = Math.ceil(count / availableRows);
-
-                    return $container.find('.l-autoflow-col').length === columns;
-                }
-
-                $container.find('.abs').css({
-                    position: 'absolute',
-                    left: '0px',
-                    right: '0px',
-                    top: '0px',
-                    bottom: '0px'
-                });
-                $container.css({ position: 'absolute' });
-
-                $container.appendTo(document.body);
-
-                function setHeight(height) {
-                    $container.css('height', height + 'px');
-
-                    return domObserver.when(columnsHaveAutoflowed);
-                }
-
-                for (let height = 0; height < rowHeight * count * 2; height += rowHeight / 2) {
-                    // eslint-disable-next-line no-invalid-this
-                    promiseChain = promiseChain.then(setHeight.bind(this, height));
-                }
-
-                return promiseChain.then(() => {
-                    $container.remove();
-                });
-            });
-
-            it("loads composition exactly once", () => {
-                const testObj = testChildren.pop();
-                emitEvent(mockComposition, 'remove', testObj.identifier);
-                testChildren.push(testObj);
-                emitEvent(mockComposition, 'add', testObj);
-                expect(mockComposition.load.calls.count()).toEqual(1);
-            });
+        // it("adds rows on composition change", () => {
+        //     const child = {
+        //         identifier: {
+        //             namespace: "test",
+        //             key: "123"
+        //         },
+        //         name: "Object 123"
+        //     };
+        //     testChildren.push(child);
+        //     emitEvent(mockComposition, 'add', child);
+
+        //     return domObserver.when(rowsMatch);
+        // });
+
+        it('removes rows on composition change', () => {
+          const child = testChildren.pop();
+          emitEvent(mockComposition, 'remove', child.identifier);
+
+          return domObserver.when(rowsMatch);
+        });
+      });
+
+      it('removes subscriptions when destroyed', () => {
+        testKeys.forEach((key) => {
+          expect(mockUnsubscribes[key]).not.toHaveBeenCalled();
+        });
+        view.destroy();
+        testKeys.forEach((key) => {
+          expect(mockUnsubscribes[key]).toHaveBeenCalled();
+        });
+      });
+
+      it('provides a button to change column width', () => {
+        const initialWidth = AutoflowTabularConstants.INITIAL_COLUMN_WIDTH;
+        const nextWidth = initialWidth + AutoflowTabularConstants.COLUMN_WIDTH_STEP;
+
+        expect(testContainer.querySelector('.l-autoflow-col').css('width')).toEqual(
+          initialWidth + 'px'
+        );
+
+        testContainer.querySelector('.change-column-width').click();
+
+        function widthHasChanged() {
+          const width = testContainer.querySelector('.l-autoflow-col').css('width');
+
+          return width !== initialWidth + 'px';
+        }
+
+        return domObserver.when(widthHasChanged).then(() => {
+          expect(testContainer.querySelector('.l-autoflow-col').css('width')).toEqual(
+            nextWidth + 'px'
+          );
+        });
+      });
+
+      it('subscribes to all child objects', () => {
+        testKeys.forEach((key) => {
+          expect(callbacks[key]).toEqual(jasmine.any(Function));
+        });
+      });
+
+      it('displays historical telemetry', () => {
+        function rowTextDefined() {
+          return testContainer.querySelector('.l-autoflow-item').filter('.r').text() !== '';
+        }
+
+        return domObserver.when(rowTextDefined).then(() => {
+          testKeys.forEach((key, index) => {
+            const datum = testHistories[key];
+            const $cell = testContainer.querySelector('.l-autoflow-row').eq(index).find('.r');
+            expect($cell.text()).toEqual(String(datum.range));
+          });
+        });
+      });
+
+      it('displays incoming telemetry', () => {
+        const testData = testKeys.map((key, index) => {
+          return {
+            key: key,
+            range: index * 100,
+            domain: key + index
+          };
+        });
+
+        testData.forEach((datum) => {
+          callbacks[datum.key](datum);
+        });
+
+        return waitsForChange().then(() => {
+          testData.forEach((datum, index) => {
+            const $cell = testContainer.querySelector('.l-autoflow-row').eq(index).find('.r');
+            expect($cell.text()).toEqual(String(datum.range));
+          });
+        });
+      });
+
+      it('updates classes for limit violations', () => {
+        const testClass = 'some-limit-violation';
+        mockEvaluator.evaluate.and.returnValue({ cssClass: testClass });
+        testKeys.forEach((key) => {
+          callbacks[key]({
+            range: 'foo',
+            domain: 'bar'
+          });
+        });
+
+        return waitsForChange().then(() => {
+          testKeys.forEach((datum, index) => {
+            const $cell = testContainer.querySelector('.l-autoflow-row').eq(index).find('.r');
+            expect($cell.hasClass(testClass)).toBe(true);
+          });
+        });
+      });
+
+      it('automatically flows to new columns', () => {
+        const rowHeight = AutoflowTabularConstants.ROW_HEIGHT;
+        const sliderHeight = AutoflowTabularConstants.SLIDER_HEIGHT;
+        const count = testKeys.length;
+        const $container = testContainer;
+        let promiseChain = Promise.resolve();
+
+        function columnsHaveAutoflowed() {
+          const itemsHeight = $container.querySelector('.l-autoflow-items').height();
+          const availableHeight = itemsHeight - sliderHeight;
+          const availableRows = Math.max(Math.floor(availableHeight / rowHeight), 1);
+          const columns = Math.ceil(count / availableRows);
+
+          return $container.querySelector('.l-autoflow-col').length === columns;
+        }
+
+        $container.find('.abs').css({
+          position: 'absolute',
+          left: '0px',
+          right: '0px',
+          top: '0px',
+          bottom: '0px'
+        });
+        $container.css({ position: 'absolute' });
+
+        $container.appendTo(document.body);
+
+        function setHeight(height) {
+          $container.css('height', height + 'px');
+
+          return domObserver.when(columnsHaveAutoflowed);
+        }
+
+        for (let height = 0; height < rowHeight * count * 2; height += rowHeight / 2) {
+          // eslint-disable-next-line no-invalid-this
+          promiseChain = promiseChain.then(setHeight.bind(this, height));
+        }
+
+        return promiseChain.then(() => {
+          $container.remove();
         });
+      });
+
+      it('loads composition exactly once', () => {
+        const testObj = testChildren.pop();
+        emitEvent(mockComposition, 'remove', testObj.identifier);
+        testChildren.push(testObj);
+        emitEvent(mockComposition, 'add', testObj);
+        expect(mockComposition.load.calls.count()).toEqual(1);
+      });
     });
+  });
 });
diff --git a/src/plugins/autoflow/AutoflowTabularRowController.js b/src/plugins/autoflow/AutoflowTabularRowController.js
index 5c11af8894b..3ae2be65284 100644
--- a/src/plugins/autoflow/AutoflowTabularRowController.js
+++ b/src/plugins/autoflow/AutoflowTabularRowController.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,75 +20,72 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([], function () {
-    /**
-     * Controller for individual rows of an Autoflow Tabular View.
-     * Subscribes to telemetry and updates row data.
-     *
-     * @param {DomainObject} domainObject the object being viewed
-     * @param {*} data the view data
-     * @param openmct a reference to the openmct application
-     * @param {Function} callback a callback to invoke with "last updated" timestamps
-     */
-    function AutoflowTabularRowController(domainObject, data, openmct, callback) {
-        this.domainObject = domainObject;
-        this.data = data;
-        this.openmct = openmct;
-        this.callback = callback;
-
-        this.metadata = this.openmct.telemetry.getMetadata(this.domainObject);
-        this.ranges = this.metadata.valuesForHints(['range']);
-        this.domains = this.metadata.valuesForHints(['domain']);
-        this.rangeFormatter =
-            this.openmct.telemetry.getValueFormatter(this.ranges[0]);
-        this.domainFormatter =
-            this.openmct.telemetry.getValueFormatter(this.domains[0]);
-        this.evaluator =
-            this.openmct.telemetry.limitEvaluator(this.domainObject);
+/**
+ * Controller for individual rows of an Autoflow Tabular View.
+ * Subscribes to telemetry and updates row data.
+ *
+ * @param {DomainObject} domainObject the object being viewed
+ * @param {*} data the view data
+ * @param openmct a reference to the openmct application
+ * @param {Function} callback a callback to invoke with "last updated" timestamps
+ */
+export default function AutoflowTabularRowController(domainObject, data, openmct, callback) {
+  this.domainObject = domainObject;
+  this.data = data;
+  this.openmct = openmct;
+  this.callback = callback;
 
-        this.initialized = false;
-    }
+  this.metadata = this.openmct.telemetry.getMetadata(this.domainObject);
+  this.ranges = this.metadata.valuesForHints(['range']);
+  this.domains = this.metadata.valuesForHints(['domain']);
+  this.rangeFormatter = this.openmct.telemetry.getValueFormatter(this.ranges[0]);
+  this.domainFormatter = this.openmct.telemetry.getValueFormatter(this.domains[0]);
+  this.evaluator = this.openmct.telemetry.limitEvaluator(this.domainObject);
 
-    /**
-     * Update row to reflect incoming telemetry data.
-     * @private
-     */
-    AutoflowTabularRowController.prototype.updateRowData = function (datum) {
-        const violations = this.evaluator.evaluate(datum, this.ranges[0]);
+  this.initialized = false;
+}
 
-        this.initialized = true;
-        this.data.classes = violations ? violations.cssClass : "";
-        this.data.value = this.rangeFormatter.format(datum);
-        this.callback(this.domainFormatter.format(datum));
-    };
+/**
+ * Update row to reflect incoming telemetry data.
+ * @private
+ */
+AutoflowTabularRowController.prototype.updateRowData = function (datum) {
+  const violations = this.evaluator.evaluate(datum, this.ranges[0]);
 
-    /**
-     * Activate this controller; begin listening for changes.
-     */
-    AutoflowTabularRowController.prototype.activate = function () {
-        this.unsubscribe = this.openmct.telemetry.subscribe(
-            this.domainObject,
-            this.updateRowData.bind(this)
-        );
+  this.initialized = true;
+  this.data.classes = violations ? violations.cssClass : '';
+  this.data.value = this.rangeFormatter.format(datum);
+  this.callback(this.domainFormatter.format(datum));
+};
 
-        this.openmct.telemetry.request(
-            this.domainObject,
-            { size: 1 }
-        ).then(function (history) {
-            if (!this.initialized && history.length > 0) {
-                this.updateRowData(history[history.length - 1]);
-            }
-        }.bind(this));
-    };
+/**
+ * Activate this controller; begin listening for changes.
+ */
+AutoflowTabularRowController.prototype.activate = function () {
+  this.unsubscribe = this.openmct.telemetry.subscribe(
+    this.domainObject,
+    this.updateRowData.bind(this)
+  );
 
-    /**
-     * Destroy this controller; detach any associated resources.
-     */
-    AutoflowTabularRowController.prototype.destroy = function () {
-        if (this.unsubscribe) {
-            this.unsubscribe();
-        }
-    };
+  const options = {
+    size: 1,
+    strategy: 'latest',
+    timeContext: this.openmct.time.getContextForView([])
+  };
+  this.openmct.telemetry.request(this.domainObject, options).then(
+    function (history) {
+      if (!this.initialized && history.length > 0) {
+        this.updateRowData(history[history.length - 1]);
+      }
+    }.bind(this)
+  );
+};
 
-    return AutoflowTabularRowController;
-});
+/**
+ * Destroy this controller; detach any associated resources.
+ */
+AutoflowTabularRowController.prototype.destroy = function () {
+  if (this.unsubscribe) {
+    this.unsubscribe();
+  }
+};
diff --git a/src/plugins/autoflow/AutoflowTabularView.js b/src/plugins/autoflow/AutoflowTabularView.js
index 6dd9734d5c2..d6457c0fbce 100644
--- a/src/plugins/autoflow/AutoflowTabularView.js
+++ b/src/plugins/autoflow/AutoflowTabularView.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,106 +20,92 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    './AutoflowTabularController',
-    './AutoflowTabularConstants',
-    './VueView',
-    './autoflow-tabular.html'
-], function (
-    AutoflowTabularController,
-    AutoflowTabularConstants,
-    VueView,
-    autoflowTemplate
-) {
-    const ROW_HEIGHT = AutoflowTabularConstants.ROW_HEIGHT;
-    const SLIDER_HEIGHT = AutoflowTabularConstants.SLIDER_HEIGHT;
-    const INITIAL_COLUMN_WIDTH = AutoflowTabularConstants.INITIAL_COLUMN_WIDTH;
-    const MAX_COLUMN_WIDTH = AutoflowTabularConstants.MAX_COLUMN_WIDTH;
-    const COLUMN_WIDTH_STEP = AutoflowTabularConstants.COLUMN_WIDTH_STEP;
+import autoflowTemplate from './autoflow-tabular.html';
+import AutoflowTabularConstants from './AutoflowTabularConstants.js';
+import AutoflowTabularController from './AutoflowTabularController.js';
+import VueView from './VueView.js';
 
-    /**
-     * Implements the Autoflow Tabular view of a domain object.
-     */
-    function AutoflowTabularView(domainObject, openmct) {
-        const data = {
-            items: [],
-            columns: [],
-            width: INITIAL_COLUMN_WIDTH,
-            filter: "",
-            updated: "No updates",
-            rowCount: 1
-        };
-        const controller =
-            new AutoflowTabularController(domainObject, data, openmct);
-        let interval;
+const ROW_HEIGHT = AutoflowTabularConstants.ROW_HEIGHT;
+const SLIDER_HEIGHT = AutoflowTabularConstants.SLIDER_HEIGHT;
+const INITIAL_COLUMN_WIDTH = AutoflowTabularConstants.INITIAL_COLUMN_WIDTH;
+const MAX_COLUMN_WIDTH = AutoflowTabularConstants.MAX_COLUMN_WIDTH;
+const COLUMN_WIDTH_STEP = AutoflowTabularConstants.COLUMN_WIDTH_STEP;
 
-        VueView.call(this, {
-            data: data,
-            methods: {
-                increaseColumnWidth: function () {
-                    data.width += COLUMN_WIDTH_STEP;
-                    data.width = data.width > MAX_COLUMN_WIDTH
-                        ? INITIAL_COLUMN_WIDTH : data.width;
-                },
-                reflow: function () {
-                    let column = [];
-                    let index = 0;
-                    const filteredItems =
-                        data.items.filter(function (item) {
-                            return item.name.toLowerCase()
-                                .indexOf(data.filter.toLowerCase()) !== -1;
-                        });
+/**
+ * Implements the Autoflow Tabular view of a domain object.
+ */
+export default function AutoflowTabularView(domainObject, openmct) {
+  const data = {
+    items: [],
+    columns: [],
+    width: INITIAL_COLUMN_WIDTH,
+    filter: '',
+    updated: 'No updates',
+    rowCount: 1
+  };
+  const controller = new AutoflowTabularController(domainObject, data, openmct);
+  let interval;
 
-                    data.columns = [];
+  VueView.call(this, {
+    data: data,
+    methods: {
+      increaseColumnWidth: function () {
+        data.width += COLUMN_WIDTH_STEP;
+        data.width = data.width > MAX_COLUMN_WIDTH ? INITIAL_COLUMN_WIDTH : data.width;
+      },
+      reflow: function () {
+        let column = [];
+        let index = 0;
+        const filteredItems = data.items.filter(function (item) {
+          return item.name.toLowerCase().indexOf(data.filter.toLowerCase()) !== -1;
+        });
 
-                    while (index < filteredItems.length) {
-                        if (column.length >= data.rowCount) {
-                            data.columns.push(column);
-                            column = [];
-                        }
+        data.columns = [];
 
-                        column.push(filteredItems[index]);
-                        index += 1;
-                    }
+        while (index < filteredItems.length) {
+          if (column.length >= data.rowCount) {
+            data.columns.push(column);
+            column = [];
+          }
 
-                    if (column.length > 0) {
-                        data.columns.push(column);
-                    }
-                }
-            },
-            watch: {
-                filter: 'reflow',
-                items: 'reflow',
-                rowCount: 'reflow'
-            },
-            template: autoflowTemplate,
-            destroyed: function () {
-                controller.destroy();
+          column.push(filteredItems[index]);
+          index += 1;
+        }
 
-                if (interval) {
-                    clearInterval(interval);
-                    interval = undefined;
-                }
-            },
-            mounted: function () {
-                controller.activate();
+        if (column.length > 0) {
+          data.columns.push(column);
+        }
+      }
+    },
+    watch: {
+      filter: 'reflow',
+      items: 'reflow',
+      rowCount: 'reflow'
+    },
+    template: autoflowTemplate,
+    unmounted: function () {
+      controller.destroy();
 
-                const updateRowHeight = function () {
-                    const tabularArea = this.$refs.autoflowItems;
-                    const height = tabularArea ? tabularArea.clientHeight : 0;
-                    const available = height - SLIDER_HEIGHT;
-                    const rows = Math.max(1, Math.floor(available / ROW_HEIGHT));
-                    data.rowCount = rows;
-                }.bind(this);
+      if (interval) {
+        clearInterval(interval);
+        interval = undefined;
+      }
+    },
+    mounted: function () {
+      controller.activate();
 
-                interval = setInterval(updateRowHeight, 50);
-                this.$nextTick(updateRowHeight);
-            }
-        });
-    }
+      const updateRowHeight = function () {
+        const tabularArea = this.$refs.autoflowItems;
+        const height = tabularArea ? tabularArea.clientHeight : 0;
+        const available = height - SLIDER_HEIGHT;
+        const rows = Math.max(1, Math.floor(available / ROW_HEIGHT));
+        data.rowCount = rows;
+      }.bind(this);
 
-    AutoflowTabularView.prototype = Object.create(VueView.prototype);
-
-    return AutoflowTabularView;
-});
+      interval = setInterval(updateRowHeight, 50);
+      this.$nextTick(updateRowHeight);
+    }
+  });
+}
 
+AutoflowTabularView.prototype = Object.create(VueView.prototype);
diff --git a/src/plugins/autoflow/VueView.js b/src/plugins/autoflow/VueView.js
index 481a4c20eef..be6de438724 100644
--- a/src/plugins/autoflow/VueView.js
+++ b/src/plugins/autoflow/VueView.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,15 +20,17 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(['vue'], function (Vue) {
-    function VueView(options) {
-        const vm = new Vue(options);
-        this.show = function (container) {
-            container.appendChild(vm.$mount().$el);
-        };
-
-        this.destroy = vm.$destroy.bind(vm);
+import mount from 'utils/mount';
+export default function () {
+  class VueView {
+    constructor(options) {
+      const { vNode, destroy } = mount(options);
+      this.show = function (container) {
+        container.appendChild(vNode.el);
+      };
+      this.destroy = destroy;
     }
+  }
 
-    return VueView;
-});
+  return VueView;
+}
diff --git a/src/plugins/autoflow/autoflow-tabular.html b/src/plugins/autoflow/autoflow-tabular.html
index d98f4c5a7e2..e3f1ad2f5f0 100644
--- a/src/plugins/autoflow/autoflow-tabular.html
+++ b/src/plugins/autoflow/autoflow-tabular.html
@@ -1,5 +1,5 @@
 <!--
- Open MCT, Copyright (c) 2014-2021, United States Government
+ Open MCT, Copyright (c) 2014-2024, United States Government
  as represented by the Administrator of the National Aeronautics and Space
  Administration. All rights reserved.
 
@@ -20,23 +20,31 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="items-holder abs contents autoflow obj-value-format">
-    <div class="abs l-flex-row holder t-autoflow-header l-autoflow-header">
-        <span class="t-filter l-filter">
-            <input type="search" class="t-filter-input" v-model="filter"/>
-            <a v-if="filter !== ''" v-on:click="filter = ''" class="clear-icon icon-x-in-circle"></a>
-        </span>
+  <div class="abs l-flex-row holder t-autoflow-header l-autoflow-header">
+    <span class="t-filter l-filter">
+      <input type="search" class="t-filter-input" v-model="filter" />
+      <a v-if="filter !== ''" v-on:click="filter = ''" class="clear-icon icon-x-in-circle"></a>
+    </span>
 
-        <div class="flex-elem grows t-last-update" title="Last Update">{{updated}}</div>
-        <a title="Change column width"
-           v-on:click="increaseColumnWidth()"
-           class="s-button flex-elem icon-arrows-right-left change-column-width"></a>
-    </div>
-    <div class="abs t-autoflow-items l-autoflow-items" ref="autoflowItems">
-        <ul v-for="column in columns" class="l-autoflow-col" :style="{ width: width + 'px' }">
-            <li v-for="row in column" class="l-autoflow-row" >
-                <span :title="row.value" :data-value="row.value" :class="'l-autoflow-item r l-obj-val-format ' + row.classes">{{row.value}}</span>
-                <span :title="row.name" class="l-autoflow-item l">{{row.name}}</span>
-            </li>
-        </ul>
-    </div>
+    <div class="flex-elem grows t-last-update" title="Last Update">{{updated}}</div>
+    <a
+      title="Change column width"
+      v-on:click="increaseColumnWidth()"
+      class="s-button flex-elem icon-arrows-right-left change-column-width"
+    ></a>
+  </div>
+  <div class="abs t-autoflow-items l-autoflow-items" ref="autoflowItems">
+    <ul v-for="column in columns" class="l-autoflow-col" :style="{ width: width + 'px' }">
+      <li v-for="row in column" class="l-autoflow-row">
+        <span
+          :aria-label="row.value"
+          :title="row.value"
+          :data-value="row.value"
+          :class="'l-autoflow-item r l-obj-val-format ' + row.classes"
+          >{{row.value}}</span
+        >
+        <span :aria-label="row.name" :title="row.name" class="l-autoflow-item l">{{row.name}}</span>
+      </li>
+    </ul>
+  </div>
 </div>
diff --git a/src/plugins/autoflow/dom-observer.js b/src/plugins/autoflow/dom-observer.js
index 35eb571a338..5ee6808026f 100644
--- a/src/plugins/autoflow/dom-observer.js
+++ b/src/plugins/autoflow/dom-observer.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,40 +20,40 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([], function () {
-    function DOMObserver(element) {
-        this.element = element;
-        this.observers = [];
-    }
+export default function DOMObserver(element) {
+  this.element = element;
+  this.observers = [];
+}
 
-    DOMObserver.prototype.when = function (latchFunction) {
-        return new Promise(function (resolve, reject) {
-            //Test latch function at least once
-            if (latchFunction()) {
-                resolve();
-            } else {
-                //Latch condition not true yet, create observer on DOM and test again on change.
-                const config = {
-                    attributes: true,
-                    childList: true,
-                    subtree: true
-                };
-                const observer = new MutationObserver(function () {
-                    if (latchFunction()) {
-                        resolve();
-                    }
-                });
-                observer.observe(this.element, config);
-                this.observers.push(observer);
-            }
-        }.bind(this));
-    };
+DOMObserver.prototype.when = function (latchFunction) {
+  return new Promise(
+    function (resolve, reject) {
+      //Test latch function at least once
+      if (latchFunction()) {
+        resolve();
+      } else {
+        //Latch condition not true yet, create observer on DOM and test again on change.
+        const config = {
+          attributes: true,
+          childList: true,
+          subtree: true
+        };
+        const observer = new MutationObserver(function () {
+          if (latchFunction()) {
+            resolve();
+          }
+        });
+        observer.observe(this.element, config);
+        this.observers.push(observer);
+      }
+    }.bind(this)
+  );
+};
 
-    DOMObserver.prototype.destroy = function () {
-        this.observers.forEach(function (observer) {
-            observer.disconnect();
-        }.bind(this));
-    };
-
-    return DOMObserver;
-});
+DOMObserver.prototype.destroy = function () {
+  this.observers.forEach(
+    function (observer) {
+      observer.disconnect();
+    }.bind(this)
+  );
+};
diff --git a/src/plugins/buildInfo/plugin.js b/src/plugins/buildInfo/plugin.js
deleted file mode 100644
index 25d067e5f79..00000000000
--- a/src/plugins/buildInfo/plugin.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-], function (
-) {
-    return function (buildInfo) {
-        return function (openmct) {
-            const aliases = { timestamp: "Built" };
-            const descriptions = {
-                timestamp: "The date on which this version of Open MCT was built.",
-                revision: "A unique revision identifier for the client sources.",
-                branch: "The name of the branch that was used during the build."
-            };
-
-            Object.keys(buildInfo).forEach(function (key) {
-                openmct.legacyExtension("versions", {
-                    key: key,
-                    name: aliases[key] || (key.charAt(0).toUpperCase() + key.substring(1)),
-                    value: buildInfo[key],
-                    description: descriptions[key]
-                });
-            });
-        };
-    };
-});
diff --git a/src/plugins/buildInfo/pluginSpec.js b/src/plugins/buildInfo/pluginSpec.js
deleted file mode 100644
index 6d09090c4fd..00000000000
--- a/src/plugins/buildInfo/pluginSpec.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    './plugin'
-], function (plugin) {
-    describe("The buildInfo plugin", function () {
-        let mockmct;
-        let testInfo;
-
-        beforeEach(function () {
-            mockmct = jasmine.createSpyObj('openmct', ['legacyExtension']);
-            testInfo = {
-                foo: 123,
-                bar: "baz"
-            };
-            plugin(testInfo)(mockmct);
-        });
-
-        it("registers versions extensions", function () {
-            Object.keys(testInfo).forEach(function (key) {
-                expect(mockmct.legacyExtension).toHaveBeenCalledWith(
-                    "versions",
-                    {
-                        key: key,
-                        name: jasmine.any(String),
-                        value: testInfo[key],
-                        description: undefined
-                    }
-                );
-            });
-        });
-    });
-});
diff --git a/src/plugins/charts/bar/BarGraphCompositionPolicy.js b/src/plugins/charts/bar/BarGraphCompositionPolicy.js
new file mode 100644
index 00000000000..c0b7657a102
--- /dev/null
+++ b/src/plugins/charts/bar/BarGraphCompositionPolicy.js
@@ -0,0 +1,53 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { BAR_GRAPH_KEY } from './BarGraphConstants.js';
+
+export default function BarGraphCompositionPolicy(openmct) {
+  function hasRange(metadata) {
+    const rangeValues = metadata.valuesForHints(['range']);
+
+    return rangeValues && rangeValues.length > 0;
+  }
+
+  function hasBarGraphTelemetry(domainObject) {
+    if (!openmct.telemetry.isTelemetryObject(domainObject)) {
+      return false;
+    }
+
+    let metadata = openmct.telemetry.getMetadata(domainObject);
+
+    return metadata.values().length > 0 && hasRange(metadata);
+  }
+
+  return {
+    allow: function (parent, child) {
+      if (parent.type === BAR_GRAPH_KEY) {
+        if (child.type === 'conditionSet' || !hasBarGraphTelemetry(child)) {
+          return false;
+        }
+      }
+
+      return true;
+    }
+  };
+}
diff --git a/src/plugins/charts/bar/BarGraphConstants.js b/src/plugins/charts/bar/BarGraphConstants.js
new file mode 100644
index 00000000000..bdd88a7ce34
--- /dev/null
+++ b/src/plugins/charts/bar/BarGraphConstants.js
@@ -0,0 +1,3 @@
+export const BAR_GRAPH_VIEW = 'bar-graph.view';
+export const BAR_GRAPH_KEY = 'telemetry.plot.bar-graph';
+export const BAR_GRAPH_INSPECTOR_KEY = 'telemetry.plot.bar-graph.inspector';
diff --git a/src/plugins/charts/bar/BarGraphPlot.vue b/src/plugins/charts/bar/BarGraphPlot.vue
new file mode 100644
index 00000000000..3c726f1bd98
--- /dev/null
+++ b/src/plugins/charts/bar/BarGraphPlot.vue
@@ -0,0 +1,307 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div ref="plotWrapper" class="has-local-controls" :class="{ 's-unsynced': isZoomed }">
+    <div v-if="isZoomed" class="l-state-indicators">
+      <span
+        class="l-state-indicators__alert-no-lad t-object-alert t-alert-unsynced icon-alert-triangle"
+        title="This plot is not currently displaying the latest data. Reset pan/zoom to view latest data."
+      ></span>
+    </div>
+    <div ref="plot" class="c-bar-chart" @plotly_relayout="zoom"></div>
+    <div
+      v-if="false"
+      ref="localControl"
+      class="gl-plot__local-controls h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover"
+    >
+      <button
+        v-if="data.length"
+        class="c-button icon-reset"
+        :disabled="!isZoomed"
+        title="Reset pan/zoom"
+        @click="reset()"
+      ></button>
+    </div>
+  </div>
+</template>
+<script>
+import Plotly from 'plotly-basic';
+
+const MULTI_AXES_X_PADDING_PERCENT = {
+  LEFT: 8,
+  RIGHT: 94
+};
+
+export default {
+  inject: ['openmct', 'domainObject'],
+  props: {
+    data: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    plotAxisTitle: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  emits: ['subscribe', 'unsubscribe'],
+  data() {
+    return {
+      isZoomed: false,
+      primaryYAxisRange: {
+        min: '',
+        max: ''
+      },
+      xAxisRange: {
+        min: '',
+        max: ''
+      }
+    };
+  },
+  watch: {
+    data: {
+      immediate: false,
+      handler: 'updateData'
+    }
+  },
+  created() {
+    this.registerListeners();
+  },
+  mounted() {
+    this.plotResizeObserver.observe(this.$refs.plotWrapper);
+    Plotly.newPlot(this.$refs.plot, Array.from(this.data), this.getLayout(), {
+      responsive: true,
+      displayModeBar: false
+    });
+  },
+  beforeUnmount() {
+    if (this.plotResizeObserver) {
+      this.plotResizeObserver.unobserve(this.$refs.plotWrapper);
+      this.plotResizeObserver.disconnect();
+      clearTimeout(this.resizeTimer);
+    }
+
+    if (this.removeBarColorListener) {
+      this.removeBarColorListener();
+    }
+
+    Plotly.purge(this.$refs.plot);
+  },
+  methods: {
+    getAxisMinMax(axis) {
+      const min = axis.autoSize ? '' : axis.min;
+      const max = axis.autoSize ? '' : axis.max;
+
+      return {
+        min,
+        max
+      };
+    },
+    getLayout() {
+      const yAxesMeta = this.getYAxisMeta();
+      const primaryYaxis = this.getYaxisLayout(yAxesMeta['1']);
+      const xAxisDomain = this.getXAxisDomain(yAxesMeta);
+
+      return {
+        autosize: true,
+        showlegend: false,
+        textposition: 'auto',
+        font: {
+          family: 'Helvetica Neue, Helvetica, Arial, sans-serif',
+          size: '12px',
+          color: '#666'
+        },
+        xaxis: {
+          domain: xAxisDomain,
+          range: [this.xAxisRange.min, this.xAxisRange.max],
+          title: this.plotAxisTitle.xAxisTitle,
+          automargin: true,
+          fixedrange: true
+        },
+        yaxis: primaryYaxis,
+        margin: {
+          l: 5,
+          r: 5,
+          t: 5,
+          b: 0
+        },
+        paper_bgcolor: 'transparent',
+        plot_bgcolor: 'transparent'
+      };
+    },
+    getYAxisMeta() {
+      const yAxisMeta = {};
+
+      this.data.forEach((datum) => {
+        const yAxisMetadata = datum.yAxisMetadata;
+        const range = '1';
+        const side = 'left';
+        const name = '';
+        const unit = yAxisMetadata.units;
+
+        yAxisMeta[range] = {
+          range,
+          side,
+          name,
+          unit
+        };
+      });
+
+      return yAxisMeta;
+    },
+    getXAxisDomain(yAxisMeta) {
+      let leftPaddingPerc = 0;
+      let rightPaddingPerc = 100;
+      let rightSide =
+        yAxisMeta && Object.values(yAxisMeta).filter((axisMeta) => axisMeta.side === 'right');
+      let leftSide =
+        yAxisMeta && Object.values(yAxisMeta).filter((axisMeta) => axisMeta.side === 'left');
+      if (yAxisMeta && rightSide.length > 1) {
+        rightPaddingPerc = MULTI_AXES_X_PADDING_PERCENT.RIGHT;
+      }
+
+      if (yAxisMeta && leftSide.length > 1) {
+        leftPaddingPerc = MULTI_AXES_X_PADDING_PERCENT.LEFT;
+      }
+
+      return [leftPaddingPerc / 100, rightPaddingPerc / 100];
+    },
+    getYaxisLayout(yAxisMeta) {
+      if (!yAxisMeta) {
+        return {};
+      }
+
+      const { name, range, side = 'left', unit } = yAxisMeta;
+      const title = `${name} ${unit ? '(' + unit + ')' : ''}`;
+      const yaxis = {
+        automargin: true,
+        fixedrange: true,
+        title
+      };
+
+      let yAxistype = this.primaryYAxisRange;
+      if (range === '1') {
+        yaxis.range = [yAxistype.min, yAxistype.max];
+
+        return yaxis;
+      }
+
+      yaxis.range = [yAxistype.min, yAxistype.max];
+      yaxis.anchor = side.toLowerCase() === 'left' ? 'free' : 'x';
+      yaxis.showline = side.toLowerCase() === 'left';
+      yaxis.side = side.toLowerCase();
+      yaxis.overlaying = 'y';
+      yaxis.position = 0.01;
+
+      return yaxis;
+    },
+    registerListeners() {
+      this.removeBarColorListener = this.openmct.objects.observe(
+        this.domainObject,
+        'configuration.barStyles',
+        this.barColorChanged
+      );
+      this.resizeTimer = false;
+      if (window.ResizeObserver) {
+        this.plotResizeObserver = new ResizeObserver(() => {
+          // debounce and trigger window resize so that plotly can resize the plot
+          clearTimeout(this.resizeTimer);
+          this.resizeTimer = setTimeout(() => {
+            window.dispatchEvent(new Event('resize'));
+          }, 250);
+        });
+      }
+    },
+    reset() {
+      this.updatePlot();
+
+      this.isZoomed = false;
+      this.$emit('subscribe');
+    },
+    barColorChanged() {
+      const colors = [];
+      const indices = [];
+      this.data.forEach((item, index) => {
+        const key = item.key;
+        const colorExists =
+          this.domainObject.configuration.barStyles.series[key] &&
+          this.domainObject.configuration.barStyles.series[key].color;
+        indices.push(index);
+        if (colorExists) {
+          colors.push(this.domainObject.configuration.barStyles.series[key].color);
+        } else {
+          colors.push(item.marker.color);
+        }
+      });
+      const plotUpdate = {
+        'marker.color': colors
+      };
+      Plotly.restyle(this.$refs.plot, plotUpdate, indices);
+    },
+    updateData() {
+      this.updatePlot();
+    },
+    updateLocalControlPosition() {
+      const localControl = this.$refs.localControl;
+      localControl.style.display = 'none';
+
+      const plot = this.$refs.plot;
+      const bgLayer = this.$el.querySelector('.bglayer');
+
+      const plotBoundingRect = plot.getBoundingClientRect();
+      const bgLayerBoundingRect = bgLayer.getBoundingClientRect();
+
+      const top = bgLayerBoundingRect.top - plotBoundingRect.top + 5;
+      const left = bgLayerBoundingRect.left - plotBoundingRect.left + 5;
+
+      localControl.style.top = `${top}px`;
+      localControl.style.left = `${left}px`;
+      localControl.style.display = 'block';
+    },
+    updatePlot() {
+      if (!this.$refs || !this.$refs.plot) {
+        return;
+      }
+
+      Plotly.react(this.$refs.plot, Array.from(this.data), this.getLayout());
+    },
+    zoom(eventData) {
+      const autorange = eventData['xaxis.autorange'];
+      const { autosize } = eventData;
+
+      if (autosize || autorange) {
+        this.isZoomed = false;
+        this.reset();
+
+        return;
+      }
+
+      this.isZoomed = true;
+      this.$emit('unsubscribe');
+    }
+  }
+};
+</script>
diff --git a/src/plugins/charts/bar/BarGraphView.vue b/src/plugins/charts/bar/BarGraphView.vue
new file mode 100644
index 00000000000..d065a4461b8
--- /dev/null
+++ b/src/plugins/charts/bar/BarGraphView.vue
@@ -0,0 +1,435 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <BarGraph
+    ref="barGraph"
+    class="c-plot c-bar-chart-view"
+    :data="trace"
+    :plot-axis-title="plotAxisTitle"
+    @subscribe="subscribeToAll"
+    @unsubscribe="removeAllSubscriptions"
+  />
+</template>
+
+<script>
+import _ from 'lodash';
+
+import BarGraph from './BarGraphPlot.vue';
+
+export default {
+  components: {
+    BarGraph
+  },
+  inject: ['openmct', 'domainObject', 'path'],
+  data() {
+    this.telemetryObjects = {};
+    this.telemetryObjectFormats = {};
+    this.subscriptions = [];
+    this.composition = {};
+
+    return {
+      trace: []
+    };
+  },
+  computed: {
+    plotAxisTitle() {
+      const { xAxisMetadata = {}, yAxisMetadata = {} } = this.trace[0] || {};
+      const xAxisUnit = xAxisMetadata.units ? `(${xAxisMetadata.units})` : '';
+      const yAxisUnit = yAxisMetadata.units ? `(${yAxisMetadata.units})` : '';
+
+      return {
+        xAxisTitle: `${xAxisMetadata.name || ''} ${xAxisUnit}`,
+        yAxisTitle: `${yAxisMetadata.name || ''} ${yAxisUnit}`
+      };
+    }
+  },
+  mounted() {
+    this.refreshData = this.refreshData.bind(this);
+    this.setTimeContext();
+
+    this.loadComposition();
+    this.unobserveAxes = this.openmct.objects.observe(
+      this.domainObject,
+      'configuration.axes',
+      this.refreshData
+    );
+    this.unobserveInterpolation = this.openmct.objects.observe(
+      this.domainObject,
+      'configuration.useInterpolation',
+      this.refreshData
+    );
+    this.unobserveBar = this.openmct.objects.observe(
+      this.domainObject,
+      'configuration.useBar',
+      this.refreshData
+    );
+  },
+  beforeUnmount() {
+    this.stopFollowingTimeContext();
+
+    this.removeAllSubscriptions();
+
+    if (!this.composition) {
+      return;
+    }
+
+    this.composition.off('add', this.addToComposition);
+    this.composition.off('remove', this.removeTelemetryObject);
+    if (this.unobserveAxes) {
+      this.unobserveAxes();
+    }
+
+    if (this.unobserveInterpolation) {
+      this.unobserveInterpolation();
+    }
+
+    if (this.unobserveBar) {
+      this.unobserveBar();
+    }
+  },
+  methods: {
+    setTimeContext() {
+      this.stopFollowingTimeContext();
+
+      this.timeContext = this.openmct.time.getContextForView(this.path);
+      this.followTimeContext();
+    },
+    followTimeContext() {
+      this.timeContext.on('bounds', this.refreshData);
+    },
+    stopFollowingTimeContext() {
+      if (this.timeContext) {
+        this.timeContext.off('bounds', this.refreshData);
+      }
+    },
+    addToComposition(telemetryObject) {
+      if (Object.values(this.telemetryObjects).length > 0) {
+        this.confirmRemoval(telemetryObject);
+      } else {
+        this.addTelemetryObject(telemetryObject);
+      }
+    },
+    confirmRemoval(telemetryObject) {
+      const dialog = this.openmct.overlays.dialog({
+        iconClass: 'alert',
+        message: 'This action will replace the current telemetry source. Do you want to continue?',
+        buttons: [
+          {
+            label: 'Ok',
+            emphasis: true,
+            callback: () => {
+              const oldTelemetryObject = Object.values(this.telemetryObjects)[0];
+              this.removeFromComposition(oldTelemetryObject);
+              this.removeTelemetryObject(oldTelemetryObject.identifier);
+              this.addTelemetryObject(telemetryObject);
+              dialog.dismiss();
+            }
+          },
+          {
+            label: 'Cancel',
+            callback: () => {
+              this.removeFromComposition(telemetryObject);
+              dialog.dismiss();
+            }
+          }
+        ]
+      });
+    },
+    removeFromComposition(telemetryObject) {
+      this.composition.remove(telemetryObject);
+    },
+    addTelemetryObject(telemetryObject) {
+      // grab information we need from the added telemetry object
+      const key = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+      this.telemetryObjects[key] = telemetryObject;
+      const metadata = this.openmct.telemetry.getMetadata(telemetryObject);
+      this.telemetryObjectFormats[key] = this.openmct.telemetry.getFormatMap(metadata);
+      const telemetryObjectPath = [telemetryObject, ...this.path];
+      const telemetryIsAlias = this.openmct.objects.isObjectPathToALink(
+        telemetryObject,
+        telemetryObjectPath
+      );
+
+      // make an update object that's a clone of the existing styles object so we preserve existing choices
+      let stylesUpdate = {};
+      if (this.domainObject.configuration.barStyles.series[key]) {
+        stylesUpdate = _.clone(this.domainObject.configuration.barStyles.series[key]);
+      }
+
+      stylesUpdate.name = telemetryObject.name;
+      stylesUpdate.type = telemetryObject.type;
+      stylesUpdate.isAlias = telemetryIsAlias;
+
+      // if something has changed, mutate and notify listeners
+      if (!_.isEqual(stylesUpdate, this.domainObject.configuration.barStyles.series[key])) {
+        this.openmct.objects.mutate(
+          this.domainObject,
+          `configuration.barStyles.series["${key}"]`,
+          stylesUpdate
+        );
+      }
+
+      // ask for the current telemetry data, then subscribe for changes
+      this.requestDataFor(telemetryObject);
+      this.subscribeToObject(telemetryObject);
+    },
+    setTrace(key, name, axisMetadata, xValues, yValues) {
+      let trace = {
+        key,
+        name: name,
+        x: xValues,
+        y: yValues,
+        xAxisMetadata: {},
+        yAxisMetadata: axisMetadata.yAxisMetadata,
+        type: this.domainObject.configuration.useBar ? 'bar' : 'scatter',
+        mode: 'lines',
+        line: {
+          shape: this.domainObject.configuration.useInterpolation
+        },
+        marker: {
+          color: this.domainObject.configuration.barStyles.series[key].color
+        },
+        hoverinfo: this.domainObject.configuration.useBar ? 'skip' : 'x+y'
+      };
+      this.addTrace(trace, key);
+    },
+    addTrace(trace, key) {
+      if (!this.trace.length) {
+        this.trace = this.trace.concat([trace]);
+
+        return;
+      }
+
+      let isInTrace = false;
+      const newTrace = this.trace.map((currentTrace, index) => {
+        if (currentTrace.key !== key) {
+          return currentTrace;
+        }
+
+        isInTrace = true;
+
+        return trace;
+      });
+
+      this.trace = isInTrace ? newTrace : newTrace.concat([trace]);
+    },
+    getAxisMetadata(telemetryObject) {
+      const metadata = this.openmct.telemetry.getMetadata(telemetryObject);
+      if (!metadata) {
+        return {};
+      }
+
+      const yAxisMetadata = metadata.valuesForHints(['range'])[0];
+      //Exclude 'name' and 'time' based metadata specifically, from the x-Axis values by using range hints only
+      const xAxisMetadata = metadata.valuesForHints(['range']).map((metaDatum) => {
+        metaDatum.isArrayValue = metadata.isArrayValue(metaDatum);
+
+        return metaDatum;
+      });
+
+      return {
+        xAxisMetadata,
+        yAxisMetadata
+      };
+    },
+    getOptions() {
+      const { start, end } = this.timeContext.bounds();
+
+      return {
+        end,
+        start
+      };
+    },
+    loadComposition() {
+      this.composition = this.openmct.composition.get(this.domainObject);
+
+      this.composition.on('add', this.addToComposition);
+      this.composition.on('remove', this.removeTelemetryObject);
+      this.composition.load();
+    },
+    refreshData(bounds, isTick) {
+      if (!isTick) {
+        const telemetryObjects = Object.values(this.telemetryObjects);
+        telemetryObjects.forEach((telemetryObject) => {
+          //clear existing data
+          const key = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+          const axisMetadata = this.getAxisMetadata(telemetryObject);
+          this.setTrace(key, telemetryObject.name, axisMetadata, [], []);
+          //request new data
+          this.requestDataFor(telemetryObject);
+          this.subscribeToObject(telemetryObject);
+        });
+      }
+    },
+    removeAllSubscriptions() {
+      this.subscriptions.forEach((subscription) => subscription.unsubscribe());
+      this.subscriptions = [];
+    },
+    removeSubscription(key) {
+      const found = this.subscriptions.findIndex((subscription) => subscription.key === key);
+      if (found > -1) {
+        this.subscriptions[found].unsubscribe();
+        this.subscriptions.splice(found, 1);
+      }
+    },
+    removeTelemetryObject(identifier) {
+      const key = this.openmct.objects.makeKeyString(identifier);
+      if (this.telemetryObjects[key]) {
+        delete this.telemetryObjects[key];
+      }
+
+      if (this.telemetryObjectFormats && this.telemetryObjectFormats[key]) {
+        delete this.telemetryObjectFormats[key];
+      }
+
+      if (this.domainObject.configuration.barStyles.series[key]) {
+        delete this.domainObject.configuration.barStyles.series[key];
+        this.openmct.objects.mutate(
+          this.domainObject,
+          `configuration.barStyles.series["${key}"]`,
+          undefined
+        );
+      }
+
+      this.removeSubscription(key);
+
+      this.trace = this.trace.filter((t) => t.key !== key);
+    },
+    addDataToGraph(telemetryObject, data, axisMetadata) {
+      const key = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+
+      if (data.message) {
+        this.openmct.notifications.alert(data.message);
+      }
+
+      if (!this.isDataInTimeRange(data, key, telemetryObject)) {
+        return;
+      }
+
+      if (
+        this.domainObject.configuration.axes.xKey === undefined ||
+        this.domainObject.configuration.axes.yKey === undefined
+      ) {
+        return;
+      }
+
+      let xValues = [];
+      let yValues = [];
+      let xAxisMetadata = axisMetadata.xAxisMetadata.find(
+        (metadata) => metadata.key === this.domainObject.configuration.axes.xKey
+      );
+      if (xAxisMetadata && xAxisMetadata.isArrayValue) {
+        //populate x and y values
+        let metadataKey = this.domainObject.configuration.axes.xKey;
+        if (data[metadataKey] !== undefined) {
+          xValues = this.parse(key, metadataKey, data);
+        }
+
+        metadataKey = this.domainObject.configuration.axes.yKey;
+        if (data[metadataKey] !== undefined) {
+          yValues = this.parse(key, metadataKey, data);
+        }
+      } else {
+        //populate X and Y values for plotly
+        axisMetadata.xAxisMetadata
+          .filter((metadataObj) => !metadataObj.isArrayValue)
+          .forEach((metadata) => {
+            if (!xAxisMetadata) {
+              //Assign the first metadata to use for any formatting
+              xAxisMetadata = metadata;
+            }
+
+            xValues.push(metadata.name);
+            if (data[metadata.key]) {
+              const parsedValue = this.parse(key, metadata.key, data);
+              yValues.push(parsedValue);
+            } else {
+              yValues.push(null);
+            }
+          });
+      }
+
+      this.setTrace(key, telemetryObject.name, axisMetadata, xValues, yValues);
+    },
+    isDataInTimeRange(datum, key, telemetryObject) {
+      const timeSystemKey = this.timeContext.timeSystem().key;
+      const metadata = this.openmct.telemetry.getMetadata(telemetryObject);
+      let metadataValue = metadata.value(timeSystemKey) || { key: timeSystemKey };
+
+      let currentTimestamp = this.parse(key, metadataValue.key, datum);
+
+      return currentTimestamp && this.timeContext.bounds().end >= currentTimestamp;
+    },
+    format(telemetryObjectKey, metadataKey, data) {
+      const formats = this.telemetryObjectFormats[telemetryObjectKey];
+
+      return formats[metadataKey].format(data);
+    },
+    parse(telemetryObjectKey, metadataKey, datum) {
+      if (!datum) {
+        return;
+      }
+
+      const formats = this.telemetryObjectFormats[telemetryObjectKey];
+
+      return formats[metadataKey].parse(datum);
+    },
+    requestDataFor(telemetryObject) {
+      const axisMetadata = this.getAxisMetadata(telemetryObject);
+      const options = this.getOptions();
+      this.openmct.telemetry
+        .request(telemetryObject, options)
+        .then((data) => {
+          data.forEach((datum) => {
+            this.addDataToGraph(telemetryObject, datum, axisMetadata);
+          });
+        })
+        .catch((error) => {
+          console.warn(`Error fetching data`, error);
+        });
+    },
+    subscribeToObject(telemetryObject) {
+      const key = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+
+      this.removeSubscription(key);
+
+      const options = this.getOptions();
+      const axisMetadata = this.getAxisMetadata(telemetryObject);
+      const unsubscribe = this.openmct.telemetry.subscribe(
+        telemetryObject,
+        (data) => this.addDataToGraph(telemetryObject, data, axisMetadata),
+        options
+      );
+
+      this.subscriptions.push({
+        key,
+        unsubscribe
+      });
+    },
+    subscribeToAll() {
+      const telemetryObjects = Object.values(this.telemetryObjects);
+      telemetryObjects.forEach(this.subscribeToObject);
+    }
+  }
+};
+</script>
diff --git a/src/plugins/charts/bar/BarGraphViewProvider.js b/src/plugins/charts/bar/BarGraphViewProvider.js
new file mode 100644
index 00000000000..bbb930ac9ea
--- /dev/null
+++ b/src/plugins/charts/bar/BarGraphViewProvider.js
@@ -0,0 +1,91 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
+
+import { BAR_GRAPH_KEY, BAR_GRAPH_VIEW } from './BarGraphConstants.js';
+import BarGraphView from './BarGraphView.vue';
+
+export default function BarGraphViewProvider(openmct) {
+  function isCompactView(objectPath) {
+    let isChildOfTimeStrip = objectPath.find((object) => object.type === 'time-strip');
+
+    return isChildOfTimeStrip && !openmct.router.isNavigatedObject(objectPath);
+  }
+
+  return {
+    key: BAR_GRAPH_VIEW,
+    name: 'Bar Graph',
+    cssClass: 'icon-telemetry',
+    canView(domainObject, objectPath) {
+      return domainObject && domainObject.type === BAR_GRAPH_KEY;
+    },
+
+    canEdit(domainObject, objectPath) {
+      return domainObject && domainObject.type === BAR_GRAPH_KEY;
+    },
+
+    view(domainObject, objectPath) {
+      let _destroy = null;
+      let component = null;
+
+      return {
+        show(element) {
+          let isCompact = isCompactView(objectPath);
+
+          const { vNode, destroy } = mount(
+            {
+              components: {
+                BarGraphView
+              },
+              provide: {
+                openmct,
+                domainObject,
+                path: objectPath
+              },
+              data() {
+                return {
+                  options: {
+                    compact: isCompact
+                  }
+                };
+              },
+              template: '<bar-graph-view ref="graphComponent" :options="options"></bar-graph-view>'
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+          component = vNode.componentInstance;
+        },
+        destroy() {
+          _destroy();
+        },
+        onClearData() {
+          component.$refs.graphComponent.refreshData();
+        }
+      };
+    }
+  };
+}
diff --git a/src/plugins/charts/bar/inspector/BarGraphInspectorViewProvider.js b/src/plugins/charts/bar/inspector/BarGraphInspectorViewProvider.js
new file mode 100644
index 00000000000..b081aaa1590
--- /dev/null
+++ b/src/plugins/charts/bar/inspector/BarGraphInspectorViewProvider.js
@@ -0,0 +1,54 @@
+import mount from 'utils/mount';
+
+import { BAR_GRAPH_INSPECTOR_KEY, BAR_GRAPH_KEY } from '../BarGraphConstants.js';
+import BarGraphOptions from './BarGraphOptions.vue';
+
+export default function BarGraphInspectorViewProvider(openmct) {
+  return {
+    key: BAR_GRAPH_INSPECTOR_KEY,
+    name: 'Config',
+    canView: function (selection) {
+      if (selection.length === 0 || selection[0].length === 0) {
+        return false;
+      }
+
+      let object = selection[0][0].context.item;
+
+      return object && object.type === BAR_GRAPH_KEY;
+    },
+    view: function (selection) {
+      let _destroy = null;
+
+      return {
+        show: function (element) {
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                BarGraphOptions
+              },
+              provide: {
+                openmct,
+                domainObject: selection[0][0].context.item
+              },
+              template: '<bar-graph-options></bar-graph-options>'
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+        },
+        priority: function () {
+          return openmct.priority.HIGH + 1;
+        },
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
+        }
+      };
+    }
+  };
+}
diff --git a/src/plugins/charts/bar/inspector/BarGraphOptions.vue b/src/plugins/charts/bar/inspector/BarGraphOptions.vue
new file mode 100644
index 00000000000..8772824d1ed
--- /dev/null
+++ b/src/plugins/charts/bar/inspector/BarGraphOptions.vue
@@ -0,0 +1,387 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="c-bar-graph-options js-bar-plot-option">
+    <ul class="c-tree">
+      <h2 title="Display properties for this object">Bar Graph Series</h2>
+      <li>
+        <series-options
+          v-for="series in plotSeries"
+          :key="series.keyString"
+          :item="series"
+          :color-palette="colorPalette"
+        />
+      </li>
+    </ul>
+    <div class="grid-properties">
+      <ul class="l-inspector-part">
+        <h2 title="Y axis settings for this object">Axes</h2>
+        <li class="grid-row">
+          <div class="grid-cell label" title="X axis selection.">X Axis</div>
+          <div v-if="isEditing" class="grid-cell value">
+            <select v-model="xKey" @change="updateForm('xKey')">
+              <option
+                v-for="option in xKeyOptions"
+                :key="`xKey-${option.value}`"
+                :value="option.value"
+                :selected="option.value === xKey"
+              >
+                {{ option.name }}
+              </option>
+            </select>
+          </div>
+          <div v-else class="grid-cell value">{{ xKeyLabel }}</div>
+        </li>
+        <li v-if="yKey !== ''" class="grid-row">
+          <div class="grid-cell label" title="Y axis selection.">Y Axis</div>
+          <div v-if="isEditing" class="grid-cell value">
+            <select v-model="yKey" @change="updateForm('yKey')">
+              <option
+                v-for="option in yKeyOptions"
+                :key="`yKey-${option.value}`"
+                :value="option.value"
+                :selected="option.value === yKey"
+              >
+                {{ option.name }}
+              </option>
+            </select>
+          </div>
+          <div v-else class="grid-cell value">{{ yKeyLabel }}</div>
+        </li>
+      </ul>
+    </div>
+    <div class="grid-properties">
+      <ul class="l-inspector-part">
+        <h2 title="Settings for plot">Settings</h2>
+        <li class="grid-row">
+          <div v-if="isEditing" class="grid-cell label" title="Display style for the plot">
+            Display Style
+          </div>
+          <div v-if="isEditing" class="grid-cell value">
+            <select v-model="useBar" @change="updateBar">
+              <option :value="true">Bar</option>
+              <option :value="false">Line</option>
+            </select>
+          </div>
+          <div v-if="!isEditing" class="grid-cell label" title="Display style for plot">
+            Display Style
+          </div>
+          <div v-if="!isEditing" class="grid-cell value">
+            {{
+              {
+                true: 'Bar',
+                false: 'Line'
+              }[useBar]
+            }}
+          </div>
+        </li>
+        <li v-if="!useBar" class="grid-row">
+          <div
+            v-if="isEditing"
+            class="grid-cell label"
+            title="The rendering method to join lines for this series."
+          >
+            Line Method
+          </div>
+          <div v-if="isEditing" class="grid-cell value">
+            <select v-model="useInterpolation" @change="updateInterpolation">
+              <option value="linear">Linear interpolate</option>
+              <option value="hv">Step after</option>
+            </select>
+          </div>
+          <div
+            v-if="!isEditing"
+            class="grid-cell label"
+            title="The rendering method to join lines for this series."
+          >
+            Line Method
+          </div>
+          <div v-if="!isEditing" class="grid-cell value">
+            {{
+              {
+                linear: 'Linear interpolation',
+                hv: 'Step After'
+              }[useInterpolation]
+            }}
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import ColorPalette from '@/ui/color/ColorPalette';
+
+import SeriesOptions from './SeriesOptions.vue';
+
+export default {
+  components: {
+    SeriesOptions
+  },
+  inject: ['openmct', 'domainObject'],
+  data() {
+    return {
+      xKey: this.domainObject.configuration.axes.xKey,
+      yKey: this.domainObject.configuration.axes.yKey,
+      xKeyLabel: '',
+      yKeyLabel: '',
+      plotSeries: [],
+      yKeyOptions: [],
+      xKeyOptions: [],
+      isEditing: this.openmct.editor.isEditing(),
+      colorPalette: this.colorPalette,
+      useInterpolation: this.domainObject.configuration.useInterpolation,
+      useBar: this.domainObject.configuration.useBar
+    };
+  },
+  computed: {
+    canEdit() {
+      return this.isEditing && !this.domainObject.locked;
+    }
+  },
+  beforeMount() {
+    this.colorPalette = new ColorPalette();
+  },
+  mounted() {
+    this.openmct.editor.on('isEditing', this.setEditState);
+    this.composition = this.openmct.composition.get(this.domainObject);
+    this.registerListeners();
+    this.composition.load();
+  },
+  beforeUnmount() {
+    this.openmct.editor.off('isEditing', this.setEditState);
+    this.stopListening();
+  },
+  methods: {
+    setEditState(isEditing) {
+      this.isEditing = isEditing;
+    },
+    registerListeners() {
+      this.composition.on('add', this.addSeries);
+      this.composition.on('remove', this.removeSeries);
+      this.unobserve = this.openmct.objects.observe(
+        this.domainObject,
+        'configuration.axes',
+        this.setKeysAndSetupOptions
+      );
+    },
+    stopListening() {
+      this.composition.off('add', this.addSeries);
+      this.composition.off('remove', this.removeSeries);
+      if (this.unobserve) {
+        this.unobserve();
+      }
+    },
+    addSeries(series, index) {
+      this.plotSeries.push(series);
+      this.setupOptions();
+    },
+    removeSeries(seriesIdentifier) {
+      const index = this.plotSeries.findIndex((plotSeries) =>
+        this.openmct.objects.areIdsEqual(seriesIdentifier, plotSeries.identifier)
+      );
+      if (index >= 0) {
+        this.plotSeries.splice(index, 1);
+        this.setupOptions();
+      }
+    },
+    setKeysAndSetupOptions() {
+      this.xKey = this.domainObject.configuration.axes.xKey;
+      this.yKey = this.domainObject.configuration.axes.yKey;
+      this.setupOptions();
+    },
+    setupOptions() {
+      this.xKeyOptions = [];
+      this.yKeyOptions = [];
+      if (this.plotSeries.length <= 0) {
+        return;
+      }
+
+      let update = false;
+      const series = this.plotSeries[0];
+      const metadata = this.openmct.telemetry.getMetadata(series);
+      const metadataRangeValues = metadata.valuesForHints(['range']).map((metaDatum) => {
+        metaDatum.isArrayValue = metadata.isArrayValue(metaDatum);
+
+        return metaDatum;
+      });
+      const metadataArrayValues = metadataRangeValues.filter(
+        (metadataObj) => metadataObj.isArrayValue
+      );
+      const metadataValues = metadataRangeValues.filter((metadataObj) => !metadataObj.isArrayValue);
+      metadataArrayValues.forEach((metadataValue) => {
+        this.xKeyOptions.push({
+          name: metadataValue.name || metadataValue.key,
+          value: metadataValue.key,
+          isArrayValue: metadataValue.isArrayValue
+        });
+        this.yKeyOptions.push({
+          name: metadataValue.name || metadataValue.key,
+          value: metadataValue.key,
+          isArrayValue: metadataValue.isArrayValue
+        });
+      });
+
+      //Metadata values that are not array values will be grouped together as x-axis only option.
+      // Here, the y-axis is not relevant.
+      if (metadataValues.length) {
+        this.xKeyOptions.push(
+          metadataValues.reduce(
+            (previousValue, currentValue) => {
+              return {
+                name: previousValue?.name
+                  ? `${previousValue.name}, ${currentValue.name}`
+                  : `${currentValue.name}`,
+                value: currentValue.key,
+                isArrayValue: currentValue.isArrayValue
+              };
+            },
+            { name: '' }
+          )
+        );
+      }
+
+      let xKeyOptionIndex;
+      let yKeyOptionIndex;
+
+      if (this.domainObject.configuration.axes.xKey) {
+        xKeyOptionIndex = this.xKeyOptions.findIndex(
+          (option) => option.value === this.domainObject.configuration.axes.xKey
+        );
+        if (xKeyOptionIndex > -1) {
+          this.xKey = this.xKeyOptions[xKeyOptionIndex].value;
+          this.xKeyLabel = this.xKeyOptions[xKeyOptionIndex].name;
+        }
+      } else {
+        if (this.xKey === undefined) {
+          update = true;
+          xKeyOptionIndex = 0;
+          this.xKey = this.xKeyOptions[xKeyOptionIndex].value;
+          this.xKeyLabel = this.xKeyOptions[xKeyOptionIndex].name;
+        }
+      }
+
+      if (metadataRangeValues.length > 1) {
+        if (
+          this.domainObject.configuration.axes.yKey &&
+          this.domainObject.configuration.axes.yKey !== 'none'
+        ) {
+          yKeyOptionIndex = this.yKeyOptions.findIndex(
+            (option) => option.value === this.domainObject.configuration.axes.yKey
+          );
+          if (yKeyOptionIndex > -1 && yKeyOptionIndex !== xKeyOptionIndex) {
+            this.yKey = this.yKeyOptions[yKeyOptionIndex].value;
+            this.yKeyLabel = this.yKeyOptions[yKeyOptionIndex].name;
+          }
+        } else {
+          if (this.yKey === undefined) {
+            if (metadataValues.length && metadataArrayValues.length === 0) {
+              update = true;
+              this.yKey = 'none';
+            } else {
+              yKeyOptionIndex = this.yKeyOptions.findIndex(
+                (option, index) => index !== xKeyOptionIndex
+              );
+              if (yKeyOptionIndex > -1) {
+                update = true;
+                this.yKey = this.yKeyOptions[yKeyOptionIndex].value;
+                this.yKeyLabel = this.yKeyOptions[yKeyOptionIndex].name;
+              }
+            }
+          }
+        }
+
+        this.yKeyOptions = this.yKeyOptions.map((option, index) => {
+          if (index === xKeyOptionIndex) {
+            option.name = `${option.name} (swap)`;
+            option.swap = yKeyOptionIndex;
+          } else {
+            option.name = option.name.replace(' (swap)', '');
+            option.swap = undefined;
+          }
+
+          return option;
+        });
+      } else if (
+        this.xKey !== undefined &&
+        this.domainObject.configuration.axes.yKey === undefined
+      ) {
+        this.domainObject.configuration.axes.yKey = 'none';
+      }
+
+      this.xKeyOptions = this.xKeyOptions.map((option, index) => {
+        if (index === yKeyOptionIndex) {
+          option.name = `${option.name} (swap)`;
+          option.swap = xKeyOptionIndex;
+        } else {
+          option.name = option.name.replace(' (swap)', '');
+          option.swap = undefined;
+        }
+
+        return option;
+      });
+
+      if (update === true) {
+        this.saveConfiguration();
+      }
+    },
+    updateForm(property) {
+      if (property === 'xKey') {
+        const xKeyOption = this.xKeyOptions.find((option) => option.value === this.xKey);
+        if (xKeyOption.swap !== undefined) {
+          //swap
+          this.yKey = this.xKeyOptions[xKeyOption.swap].value;
+        } else if (!xKeyOption.isArrayValue) {
+          this.yKey = 'none';
+        } else {
+          this.yKey = undefined;
+        }
+      } else if (property === 'yKey') {
+        const yKeyOption = this.yKeyOptions.find((option) => option.value === this.yKey);
+        if (yKeyOption.swap !== undefined) {
+          //swap
+          this.xKey = this.yKeyOptions[yKeyOption.swap].value;
+        }
+      }
+
+      this.saveConfiguration();
+    },
+    saveConfiguration() {
+      this.openmct.objects.mutate(this.domainObject, `configuration.axes`, {
+        xKey: this.xKey,
+        yKey: this.yKey
+      });
+    },
+    updateInterpolation(event) {
+      this.openmct.objects.mutate(
+        this.domainObject,
+        `configuration.useInterpolation`,
+        this.useInterpolation
+      );
+    },
+    updateBar(event) {
+      this.openmct.objects.mutate(this.domainObject, `configuration.useBar`, this.useBar);
+    }
+  }
+};
+</script>
diff --git a/src/plugins/charts/bar/inspector/SeriesOptions.vue b/src/plugins/charts/bar/inspector/SeriesOptions.vue
new file mode 100644
index 00000000000..06b02d52b8d
--- /dev/null
+++ b/src/plugins/charts/bar/inspector/SeriesOptions.vue
@@ -0,0 +1,161 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <ul>
+    <li class="c-tree__item menus-to-left" :class="aliasCss">
+      <span
+        class="c-disclosure-triangle is-enabled flex-elem"
+        :class="expandedCssClass"
+        @click="expanded = !expanded"
+      >
+      </span>
+
+      <div class="c-object-label">
+        <div :class="[seriesCss]"></div>
+        <div class="c-object-label__name">{{ name }}</div>
+      </div>
+    </li>
+    <ul class="grid-properties">
+      <li class="grid-row">
+        <ColorSwatch
+          v-if="expanded"
+          :current-color="currentColor"
+          title="Manually set the color for this bar graph series."
+          edit-title="Manually set the color for this bar graph series."
+          view-title="The color for this bar graph series."
+          short-label="Color"
+          @color-set="setColor"
+        />
+      </li>
+    </ul>
+  </ul>
+</template>
+
+<script>
+import Color from '@/ui/color/Color';
+import ColorSwatch from '@/ui/color/ColorSwatch.vue';
+
+export default {
+  components: {
+    ColorSwatch
+  },
+  inject: ['openmct', 'domainObject'],
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    colorPalette: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      currentColor: undefined,
+      name: '',
+      type: '',
+      isAlias: false,
+      expanded: false
+    };
+  },
+  computed: {
+    expandedCssClass() {
+      return this.expanded ? 'c-disclosure-triangle--expanded' : '';
+    },
+    seriesCss() {
+      const type = this.openmct.types.get(this.type);
+      if (type && type.definition && type.definition.cssClass) {
+        return `c-object-label__type-icon ${type.definition.cssClass}`;
+      }
+
+      return 'c-object-label__type-icon';
+    },
+    aliasCss() {
+      let cssClass = '';
+      if (this.isAlias) {
+        cssClass = 'is-alias';
+      }
+
+      return cssClass;
+    }
+  },
+  watch: {
+    item: {
+      handler() {
+        this.initColorAndName();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.initColorAndName();
+    this.removeBarStylesListener = this.openmct.objects.observe(
+      this.domainObject,
+      `configuration.barStyles.series["${this.key}"]`,
+      this.initColorAndName
+    );
+  },
+  beforeUnmount() {
+    if (this.removeBarStylesListener) {
+      this.removeBarStylesListener();
+    }
+  },
+  methods: {
+    initColorAndName() {
+      this.key = this.openmct.objects.makeKeyString(this.item.identifier);
+      // this is called before the plot is initialized
+      if (!this.domainObject.configuration.barStyles.series[this.key]) {
+        const color = this.colorPalette.getNextColor().asHexString();
+        this.domainObject.configuration.barStyles.series[this.key] = {
+          color,
+          type: '',
+          name: '',
+          isAlias: false
+        };
+      } else if (!this.domainObject.configuration.barStyles.series[this.key].color) {
+        this.domainObject.configuration.barStyles.series[this.key].color = this.colorPalette
+          .getNextColor()
+          .asHexString();
+      }
+
+      this.currentColor = this.domainObject.configuration.barStyles.series[this.key].color;
+      this.name = this.domainObject.configuration.barStyles.series[this.key].name;
+      this.type = this.domainObject.configuration.barStyles.series[this.key].type;
+      this.isAlias = this.domainObject.configuration.barStyles.series[this.key].isAlias;
+
+      let colorHexString = this.currentColor;
+      const colorObject = Color.fromHexString(colorHexString);
+
+      this.colorPalette.remove(colorObject);
+    },
+    setColor(chosenColor) {
+      this.currentColor = chosenColor.asHexString();
+      this.openmct.objects.mutate(
+        this.domainObject,
+        `configuration.barStyles.series["${this.key}"].color`,
+        this.currentColor
+      );
+    }
+  }
+};
+</script>
diff --git a/src/plugins/charts/bar/plugin.js b/src/plugins/charts/bar/plugin.js
new file mode 100644
index 00000000000..40208bd75f8
--- /dev/null
+++ b/src/plugins/charts/bar/plugin.js
@@ -0,0 +1,53 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import BarGraphCompositionPolicy from './BarGraphCompositionPolicy.js';
+import { BAR_GRAPH_KEY } from './BarGraphConstants.js';
+import BarGraphViewProvider from './BarGraphViewProvider.js';
+import BarGraphInspectorViewProvider from './inspector/BarGraphInspectorViewProvider.js';
+
+export default function () {
+  return function install(openmct) {
+    openmct.types.addType(BAR_GRAPH_KEY, {
+      key: BAR_GRAPH_KEY,
+      name: 'Graph',
+      cssClass: 'icon-bar-chart',
+      description: 'Visualize data as a bar or line graph.',
+      creatable: true,
+      initialize: function (domainObject) {
+        domainObject.composition = [];
+        domainObject.configuration = {
+          barStyles: { series: {} },
+          axes: {},
+          useInterpolation: 'linear',
+          useBar: true
+        };
+      },
+      priority: 891
+    });
+
+    openmct.objectViews.addProvider(new BarGraphViewProvider(openmct));
+
+    openmct.inspectorViews.addProvider(new BarGraphInspectorViewProvider(openmct));
+
+    openmct.composition.addPolicy(new BarGraphCompositionPolicy(openmct).allow);
+  };
+}
diff --git a/src/plugins/charts/bar/pluginSpec.js b/src/plugins/charts/bar/pluginSpec.js
new file mode 100644
index 00000000000..e25a3e30237
--- /dev/null
+++ b/src/plugins/charts/bar/pluginSpec.js
@@ -0,0 +1,599 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+// import BarGraph from './BarGraphPlot.vue';
+import EventEmitter from 'EventEmitter';
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+import { nextTick } from 'vue';
+
+import { BAR_GRAPH_INSPECTOR_KEY, BAR_GRAPH_KEY, BAR_GRAPH_VIEW } from './BarGraphConstants.js';
+import BarGraphPlugin from './plugin.js';
+
+describe('the plugin', function () {
+  let element;
+  let child;
+  let openmct;
+  let telemetryPromise;
+  let telemetryPromiseResolve;
+  let mockObjectPath;
+
+  beforeEach((done) => {
+    mockObjectPath = [
+      {
+        name: 'mock folder',
+        type: 'fake-folder',
+        identifier: {
+          key: 'mock-folder',
+          namespace: ''
+        }
+      },
+      {
+        name: 'mock parent folder',
+        type: 'time-strip',
+        identifier: {
+          key: 'mock-parent-folder',
+          namespace: ''
+        }
+      }
+    ];
+    const testTelemetry = [
+      {
+        utc: 1,
+        'some-key': ['1.3222'],
+        'some-other-key': [1]
+      },
+      {
+        utc: 2,
+        'some-key': ['2.555'],
+        'some-other-key': [2]
+      },
+      {
+        utc: 3,
+        'some-key': ['3.888'],
+        'some-other-key': [3]
+      }
+    ];
+
+    openmct = createOpenMct();
+
+    telemetryPromise = new Promise((resolve) => {
+      telemetryPromiseResolve = resolve;
+    });
+
+    spyOn(openmct.telemetry, 'request').and.callFake(() => {
+      telemetryPromiseResolve(testTelemetry);
+
+      return telemetryPromise;
+    });
+
+    openmct.install(new BarGraphPlugin());
+
+    element = document.createElement('div');
+    element.style.width = '640px';
+    element.style.height = '480px';
+    child = document.createElement('div');
+    child.style.width = '640px';
+    child.style.height = '480px';
+    element.appendChild(child);
+    document.body.appendChild(element);
+
+    spyOn(window, 'ResizeObserver').and.returnValue({
+      observe() {},
+      unobserve() {},
+      disconnect() {}
+    });
+
+    openmct.time.timeSystem('utc', {
+      start: 0,
+      end: 4
+    });
+
+    openmct.types.addType('test-object', {
+      creatable: true
+    });
+
+    openmct.on('start', done);
+    openmct.startHeadless();
+  });
+
+  afterEach((done) => {
+    openmct.time.timeSystem('utc', {
+      start: 0,
+      end: 1
+    });
+    resetApplicationState(openmct).then(done).catch(done);
+  });
+
+  describe('The bar graph view', () => {
+    let barGraphObject;
+    // eslint-disable-next-line no-unused-vars
+    let mockComposition;
+
+    beforeEach(async () => {
+      barGraphObject = {
+        identifier: {
+          namespace: '',
+          key: 'test-plot'
+        },
+        configuration: {
+          barStyles: {
+            series: {}
+          },
+          axes: {},
+          useInterpolation: 'linear',
+          useBar: true
+        },
+        type: 'telemetry.plot.bar-graph',
+        name: 'Test Bar Graph'
+      };
+
+      mockComposition = new EventEmitter();
+      mockComposition.load = () => {
+        return [];
+      };
+
+      spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
+
+      await nextTick();
+    });
+
+    it('provides a bar graph view', () => {
+      const applicableViews = openmct.objectViews.get(barGraphObject, mockObjectPath);
+      const plotViewProvider = applicableViews.find(
+        (viewProvider) => viewProvider.key === BAR_GRAPH_VIEW
+      );
+      expect(plotViewProvider).toBeDefined();
+    });
+
+    xit('Renders plotly bar graph', () => {
+      let barChartElement = element.querySelectorAll('.plotly');
+      expect(barChartElement.length).toBe(1);
+    });
+
+    it('Handles dots in telemetry id', () => {
+      const dotFullTelemetryObject = {
+        identifier: {
+          namespace: 'someNamespace',
+          key: '~OpenMCT~outer.test-object.foo.bar'
+        },
+        type: 'test-dotful-object',
+        name: 'A Dotful Object',
+        telemetry: {
+          values: [
+            {
+              key: 'utc',
+              format: 'utc',
+              name: 'Time',
+              hints: {
+                domain: 1
+              }
+            },
+            {
+              key: 'some-key.foo.name.45',
+              name: 'Some dotful attribute',
+              hints: {
+                range: 1
+              }
+            },
+            {
+              key: 'some-other-key.bar.344.rad',
+              name: 'Another dotful attribute',
+              hints: {
+                range: 2
+              }
+            }
+          ]
+        }
+      };
+
+      const applicableViews = openmct.objectViews.get(barGraphObject, mockObjectPath);
+      const plotViewProvider = applicableViews.find(
+        (viewProvider) => viewProvider.key === BAR_GRAPH_VIEW
+      );
+      const barGraphView = plotViewProvider.view(barGraphObject, [barGraphObject]);
+      barGraphView.show(child, true);
+      mockComposition.emit('add', dotFullTelemetryObject);
+      expect(
+        barGraphObject.configuration.barStyles.series[
+          'someNamespace:~OpenMCT~outer.test-object.foo.bar'
+        ].name
+      ).toEqual('A Dotful Object');
+    });
+  });
+
+  describe('The spectral plot view for telemetry objects with array values', () => {
+    let barGraphObject;
+    // eslint-disable-next-line no-unused-vars
+    let mockComposition;
+
+    beforeEach(async () => {
+      barGraphObject = {
+        identifier: {
+          namespace: '',
+          key: 'test-plot'
+        },
+        configuration: {
+          barStyles: {
+            series: {}
+          },
+          axes: {
+            xKey: 'some-key',
+            yKey: 'some-other-key'
+          },
+          useInterpolation: 'linear',
+          useBar: false
+        },
+        type: 'telemetry.plot.bar-graph',
+        name: 'Test Bar Graph'
+      };
+
+      mockComposition = new EventEmitter();
+      mockComposition.load = () => {
+        return [];
+      };
+
+      spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
+
+      await nextTick();
+    });
+
+    it('Renders spectral plots', async () => {
+      const dotFullTelemetryObject = {
+        identifier: {
+          namespace: 'someNamespace',
+          key: '~OpenMCT~outer.test-object.foo.bar'
+        },
+        type: 'test-dotful-object',
+        name: 'A Dotful Object',
+        telemetry: {
+          values: [
+            {
+              key: 'utc',
+              format: 'utc',
+              name: 'Time',
+              hints: {
+                domain: 1
+              }
+            },
+            {
+              key: 'some-key',
+              name: 'Some attribute',
+              formatString: '%0.2f[]',
+              hints: {
+                range: 1
+              },
+              source: 'some-key'
+            },
+            {
+              key: 'some-other-key',
+              name: 'Another attribute',
+              format: 'number[]',
+              hints: {
+                range: 2
+              },
+              source: 'some-other-key'
+            }
+          ]
+        }
+      };
+
+      const applicableViews = openmct.objectViews.get(barGraphObject, mockObjectPath);
+      const plotViewProvider = applicableViews.find(
+        (viewProvider) => viewProvider.key === BAR_GRAPH_VIEW
+      );
+      const barGraphView = plotViewProvider.view(barGraphObject, [barGraphObject]);
+      barGraphView.show(child, true);
+      mockComposition.emit('add', dotFullTelemetryObject);
+
+      await nextTick();
+      await nextTick();
+
+      const plotElement = element.querySelector('.cartesianlayer .scatterlayer .trace .lines');
+      expect(plotElement).not.toBeNull();
+    });
+  });
+
+  describe('the bar graph objects', () => {
+    const mockObject = {
+      name: 'A very nice bar graph',
+      key: BAR_GRAPH_KEY,
+      creatable: true
+    };
+
+    it('defines a bar graph object type with the correct key', () => {
+      const objectDef = openmct.types.get(BAR_GRAPH_KEY).definition;
+      expect(objectDef.key).toEqual(mockObject.key);
+    });
+
+    it('is creatable', () => {
+      const objectDef = openmct.types.get(BAR_GRAPH_KEY).definition;
+      expect(objectDef.creatable).toEqual(mockObject.creatable);
+    });
+  });
+
+  describe('The bar graph composition policy', () => {
+    it('allows composition for telemetry that contain at least one range', () => {
+      const parent = {
+        composition: [],
+        configuration: {},
+        name: 'Some Bar Graph',
+        type: 'telemetry.plot.bar-graph',
+        location: 'mine',
+        modified: 1631005183584,
+        persisted: 1631005183502,
+        identifier: {
+          namespace: '',
+          key: 'b78e7e23-f2b8-4776-b1f0-3ff778f5c8a9'
+        }
+      };
+      const testTelemetryObject = {
+        identifier: {
+          namespace: '',
+          key: 'test-object'
+        },
+        type: 'test-object',
+        name: 'Test Object',
+        telemetry: {
+          values: [
+            {
+              key: 'some-key',
+              source: 'some-key',
+              name: 'Some attribute',
+              format: 'enum',
+              enumerations: [
+                {
+                  value: 0,
+                  string: 'OFF'
+                },
+                {
+                  value: 1,
+                  string: 'ON'
+                }
+              ],
+              hints: {
+                range: 1
+              }
+            }
+          ]
+        }
+      };
+      const composition = openmct.composition.get(parent);
+      expect(() => {
+        composition.add(testTelemetryObject);
+      }).not.toThrow();
+      expect(parent.composition.length).toBe(1);
+    });
+
+    it("disallows composition for telemetry that don't contain any range hints", () => {
+      const parent = {
+        composition: [],
+        configuration: {},
+        name: 'Some Bar Graph',
+        type: 'telemetry.plot.bar-graph',
+        location: 'mine',
+        modified: 1631005183584,
+        persisted: 1631005183502,
+        identifier: {
+          namespace: '',
+          key: 'b78e7e23-f2b8-4776-b1f0-3ff778f5c8a9'
+        }
+      };
+      const testTelemetryObject = {
+        identifier: {
+          namespace: '',
+          key: 'test-object'
+        },
+        type: 'test-object',
+        name: 'Test Object',
+        telemetry: {
+          values: [
+            {
+              key: 'some-key',
+              name: 'Some attribute'
+            },
+            {
+              key: 'some-other-key',
+              name: 'Another attribute'
+            }
+          ]
+        }
+      };
+      const composition = openmct.composition.get(parent);
+      expect(() => {
+        composition.add(testTelemetryObject);
+      }).toThrow();
+      expect(parent.composition.length).toBe(0);
+    });
+    it('disallows composition for condition sets', () => {
+      const parent = {
+        composition: [],
+        configuration: {},
+        name: 'Some Bar Graph',
+        type: 'telemetry.plot.bar-graph',
+        location: 'mine',
+        modified: 1631005183584,
+        persisted: 1631005183502,
+        identifier: {
+          namespace: '',
+          key: 'b78e7e23-f2b8-4776-b1f0-3ff778f5c8a9'
+        }
+      };
+      const testTelemetryObject = {
+        identifier: {
+          namespace: '',
+          key: 'test-object'
+        },
+        type: 'conditionSet',
+        name: 'Test Object',
+        telemetry: {
+          values: [
+            {
+              key: 'some-key',
+              name: 'Some attribute',
+              format: 'enum',
+              hints: {
+                domain: 1
+              }
+            },
+            {
+              key: 'some-other-key',
+              name: 'Another attribute',
+              hints: {
+                range: 1
+              }
+            }
+          ]
+        }
+      };
+      const composition = openmct.composition.get(parent);
+      expect(() => {
+        composition.add(testTelemetryObject);
+      }).toThrow();
+      expect(parent.composition.length).toBe(0);
+    });
+  });
+  describe('the inspector view', () => {
+    let mockComposition;
+    let testDomainObject;
+    let selection;
+    let plotInspectorView;
+    let viewContainer;
+    let optionsElement;
+    beforeEach(async () => {
+      testDomainObject = {
+        identifier: {
+          namespace: '',
+          key: '~Some~foo.bar'
+        },
+        type: 'test-object',
+        name: 'Test Object',
+        telemetry: {
+          values: [
+            {
+              key: 'utc',
+              format: 'utc',
+              name: 'Time',
+              hints: {
+                domain: 1
+              }
+            },
+            {
+              key: 'some-key',
+              name: 'Some attribute',
+              hints: {
+                range: 1
+              }
+            },
+            {
+              key: 'some-other-key',
+              name: 'Another attribute',
+              hints: {
+                range: 2
+              }
+            }
+          ]
+        }
+      };
+
+      selection = [
+        [
+          {
+            context: {
+              item: {
+                id: 'test-object',
+                identifier: {
+                  key: 'test-object',
+                  namespace: ''
+                },
+                type: 'telemetry.plot.bar-graph',
+                configuration: {
+                  barStyles: {
+                    series: {
+                      '~Some~foo.bar': {
+                        name: 'A telemetry object',
+                        type: 'some-type',
+                        isAlias: true
+                      }
+                    }
+                  },
+                  axes: {},
+                  useInterpolation: 'linear',
+                  useBar: true
+                },
+                composition: [
+                  {
+                    identifier: {
+                      key: '~Some~foo.bar'
+                    }
+                  }
+                ]
+              }
+            }
+          },
+          {
+            context: {
+              item: {
+                type: 'time-strip',
+                identifier: {
+                  key: 'some-other-key',
+                  namespace: ''
+                }
+              }
+            }
+          }
+        ]
+      ];
+
+      mockComposition = new EventEmitter();
+      mockComposition.load = () => {
+        mockComposition.emit('add', testDomainObject);
+
+        return [testDomainObject];
+      };
+
+      spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
+
+      viewContainer = document.createElement('div');
+      child.append(viewContainer);
+
+      const applicableViews = openmct.inspectorViews.get(selection);
+      plotInspectorView = applicableViews.filter((view) => view.key === BAR_GRAPH_INSPECTOR_KEY)[0];
+      plotInspectorView.show(viewContainer);
+
+      await nextTick();
+      optionsElement = element.querySelector('.c-bar-graph-options');
+    });
+
+    afterEach(() => {
+      plotInspectorView.destroy();
+    });
+
+    it('it renders the options', () => {
+      expect(optionsElement).toBeDefined();
+    });
+
+    it('shows the name', () => {
+      const seriesEl = optionsElement.querySelector('.c-object-label__name');
+      expect(seriesEl.innerHTML).toEqual('A telemetry object');
+    });
+  });
+});
diff --git a/src/plugins/charts/scatter/ScatterPlotCompositionPolicy.js b/src/plugins/charts/scatter/ScatterPlotCompositionPolicy.js
new file mode 100644
index 00000000000..b0e4ab19c64
--- /dev/null
+++ b/src/plugins/charts/scatter/ScatterPlotCompositionPolicy.js
@@ -0,0 +1,57 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { SCATTER_PLOT_KEY } from './scatterPlotConstants.js';
+
+export default function ScatterPlotCompositionPolicy(openmct) {
+  function hasRange(metadata) {
+    const rangeValues = metadata.valuesForHints(['range']).map((value) => {
+      return value.source;
+    });
+
+    const uniqueRangeValues = new Set(rangeValues);
+
+    return uniqueRangeValues && uniqueRangeValues.size > 1;
+  }
+
+  function hasScatterPlotTelemetry(domainObject) {
+    if (!openmct.telemetry.isTelemetryObject(domainObject)) {
+      return false;
+    }
+
+    let metadata = openmct.telemetry.getMetadata(domainObject);
+
+    return metadata.values().length > 0 && hasRange(metadata);
+  }
+
+  return {
+    allow: function (parent, child) {
+      if (parent.type === SCATTER_PLOT_KEY) {
+        if (child.type === 'conditionSet' || !hasScatterPlotTelemetry(child)) {
+          return false;
+        }
+      }
+
+      return true;
+    }
+  };
+}
diff --git a/src/plugins/charts/scatter/ScatterPlotForm.vue b/src/plugins/charts/scatter/ScatterPlotForm.vue
new file mode 100644
index 00000000000..93aac1a15c5
--- /dev/null
+++ b/src/plugins/charts/scatter/ScatterPlotForm.vue
@@ -0,0 +1,127 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <span class="form-control">
+    <span class="field control" :class="model.cssClass">
+      <div class="c-form--sub-grid">
+        <div class="c-form__row">
+          <span class="req-indicator" :class="{ req: isRequired }"> </span>
+          <label>Minimum X axis value</label>
+          <input
+            ref="domainMin"
+            v-model.number="domainMin"
+            data-field-name="domainMin"
+            type="number"
+            @input="onChange('domainMin')"
+          />
+        </div>
+
+        <div class="c-form__row">
+          <span class="req-indicator" :class="{ req: isRequired }"> </span>
+          <label>Maximum X axis value</label>
+          <input
+            ref="domainMax"
+            v-model.number="domainMax"
+            data-field-name="domainMax"
+            type="number"
+            @input="onChange('domainMax')"
+          />
+        </div>
+
+        <div class="c-form__row">
+          <span class="req-indicator" :class="{ req: isRequired }"> </span>
+          <label>Minimum Y axis value</label>
+          <input
+            ref="rangeMin"
+            v-model.number="rangeMin"
+            data-field-name="rangeMin"
+            type="number"
+            @input="onChange('rangeMin')"
+          />
+        </div>
+
+        <div class="c-form__row">
+          <span class="req-indicator" :class="{ req: isRequired }"> </span>
+          <label>Maximum Y axis value</label>
+          <input
+            ref="rangeMax"
+            v-model.number="rangeMax"
+            data-field-name="rangeMax"
+            type="number"
+            @input="onChange('rangeMax')"
+          />
+        </div>
+      </div>
+    </span>
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    model: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['on-change'],
+  data() {
+    return {
+      rangeMax: this.model.value.rangeMax,
+      rangeMin: this.model.value.rangeMin,
+      domainMax: this.model.value.domainMax,
+      domainMin: this.model.value.domainMin
+    };
+  },
+  computed: {
+    isRequired() {
+      return [this.rangeMax, this.rangeMin, this.domainMin, this.domainMax].some(
+        (value) => value !== undefined && value !== ''
+      );
+    }
+  },
+  methods: {
+    onChange(property) {
+      if (this[property] === '') {
+        this[property] = undefined;
+      }
+
+      const data = {
+        model: this.model,
+        value: {
+          rangeMax: this.rangeMax,
+          rangeMin: this.rangeMin,
+          domainMax: this.domainMax,
+          domainMin: this.domainMin
+        }
+      };
+
+      if (property) {
+        this.model.validate(data);
+      }
+
+      this.$emit('on-change', data);
+    }
+  }
+};
+</script>
diff --git a/src/plugins/charts/scatter/ScatterPlotView.vue b/src/plugins/charts/scatter/ScatterPlotView.vue
new file mode 100644
index 00000000000..5431acf2f93
--- /dev/null
+++ b/src/plugins/charts/scatter/ScatterPlotView.vue
@@ -0,0 +1,371 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <ScatterPlotWithUnderlay
+    class="c-plot c-scatter-chart-view"
+    :data="trace"
+    :plot-axis-title="plotAxisTitle"
+    @subscribe="subscribeToAll"
+    @unsubscribe="removeAllSubscriptions"
+  />
+</template>
+
+<script>
+import _ from 'lodash';
+
+import ScatterPlotWithUnderlay from './ScatterPlotWithUnderlay.vue';
+
+export default {
+  components: {
+    ScatterPlotWithUnderlay
+  },
+  inject: ['openmct', 'domainObject', 'path'],
+  data() {
+    this.telemetryObjects = {};
+    this.telemetryObjectFormats = {};
+    this.valuesByTimestamp = {};
+    this.subscriptions = [];
+
+    return {
+      trace: []
+    };
+  },
+  computed: {
+    plotAxisTitle() {
+      const { xAxisMetadata = {}, yAxisMetadata = {} } = this.trace[0] || {};
+      const xAxisUnit = xAxisMetadata.units ? `(${xAxisMetadata.units})` : '';
+      const yAxisUnit = yAxisMetadata.units ? `(${yAxisMetadata.units})` : '';
+
+      return {
+        xAxisTitle: `${xAxisMetadata.name || ''} ${xAxisUnit}`,
+        yAxisTitle: `${yAxisMetadata.name || ''} ${yAxisUnit}`
+      };
+    }
+  },
+  mounted() {
+    this.setTimeContext();
+    this.loadComposition();
+    this.reloadTelemetry = this.reloadTelemetry.bind(this);
+    this.reloadTelemetry = _.debounce(this.reloadTelemetry, 500);
+    this.unobserve = this.openmct.objects.observe(
+      this.domainObject,
+      'configuration.axes',
+      this.reloadTelemetry
+    );
+    this.unobserveUnderlayRanges = this.openmct.objects.observe(
+      this.domainObject,
+      'configuration.ranges',
+      this.reloadTelemetry
+    );
+  },
+  beforeUnmount() {
+    this.stopFollowingTimeContext();
+
+    if (!this.composition) {
+      return;
+    }
+
+    this.removeAllSubscriptions();
+
+    this.composition.off('add', this.addToComposition);
+    this.composition.off('remove', this.removeTelemetryObject);
+    if (this.unobserve) {
+      this.unobserve();
+    }
+
+    if (this.unobserveUnderlayRanges) {
+      this.unobserveUnderlayRanges();
+    }
+  },
+  methods: {
+    setTimeContext() {
+      this.stopFollowingTimeContext();
+
+      this.timeContext = this.openmct.time.getContextForView(this.path);
+      this.followTimeContext();
+    },
+    followTimeContext() {
+      this.timeContext.on('bounds', this.reloadTelemetryOnBoundsChange);
+    },
+    stopFollowingTimeContext() {
+      if (this.timeContext) {
+        this.timeContext.off('bounds', this.reloadTelemetryOnBoundsChange);
+      }
+    },
+    addToComposition(telemetryObject) {
+      if (Object.values(this.telemetryObjects).length > 0) {
+        this.confirmRemoval(telemetryObject);
+      } else {
+        this.addTelemetryObject(telemetryObject);
+      }
+    },
+    removeFromComposition(telemetryObject) {
+      this.composition.remove(telemetryObject);
+    },
+    addTelemetryObject(telemetryObject) {
+      // grab information we need from the added telemetry object
+      const key = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+      this.telemetryObjects[key] = telemetryObject;
+      const metadata = this.openmct.telemetry.getMetadata(telemetryObject);
+      this.telemetryObjectFormats[key] = this.openmct.telemetry.getFormatMap(metadata);
+      this.getDataForTelemetry(key);
+    },
+    confirmRemoval(telemetryObject) {
+      const dialog = this.openmct.overlays.dialog({
+        iconClass: 'alert',
+        message: 'This action will replace the current telemetry source. Do you want to continue?',
+        buttons: [
+          {
+            label: 'Ok',
+            emphasis: true,
+            callback: () => {
+              const oldTelemetryObject = Object.values(this.telemetryObjects)[0];
+              this.removeFromComposition(oldTelemetryObject);
+              this.removeTelemetryObject(oldTelemetryObject.identifier);
+              this.valuesByTimestamp = {};
+              this.addTelemetryObject(telemetryObject);
+              dialog.dismiss();
+            }
+          },
+          {
+            label: 'Cancel',
+            callback: () => {
+              this.removeFromComposition(telemetryObject);
+              dialog.dismiss();
+            }
+          }
+        ]
+      });
+    },
+    getTelemetryProcessor(keyString) {
+      return (telemetry) => {
+        //Check that telemetry object has not been removed since telemetry was requested.
+        const telemetryObject = this.telemetryObjects[keyString];
+        if (!telemetryObject) {
+          return;
+        }
+
+        telemetry.forEach((datum) => {
+          this.addDataToGraph(telemetryObject, datum);
+        });
+        this.updateTrace(telemetryObject);
+      };
+    },
+    getAxisMetadata(telemetryObject) {
+      const metadata = this.openmct.telemetry.getMetadata(telemetryObject);
+      if (!metadata) {
+        return {};
+      }
+
+      return metadata.valuesForHints(['range']);
+    },
+    loadComposition() {
+      this.composition = this.openmct.composition.get(this.domainObject);
+      this.composition.on('add', this.addToComposition);
+      this.composition.on('remove', this.removeTelemetryObject);
+      this.composition.load();
+    },
+    reloadTelemetryOnBoundsChange(bounds, isTick) {
+      if (!isTick) {
+        this.reloadTelemetry();
+      }
+    },
+    reloadTelemetry() {
+      this.valuesByTimestamp = {};
+
+      Object.keys(this.telemetryObjects).forEach((key) => {
+        this.getDataForTelemetry(key);
+      });
+    },
+    getDataForTelemetry(key) {
+      const telemetryObject = this.telemetryObjects[key];
+      if (!telemetryObject) {
+        return;
+      }
+
+      const telemetryProcessor = this.getTelemetryProcessor(key);
+      const options = this.getOptions();
+      this.openmct.telemetry.request(telemetryObject, options).then(telemetryProcessor);
+      this.subscribeToObject(telemetryObject);
+    },
+    removeTelemetryObject(identifier) {
+      const key = this.openmct.objects.makeKeyString(identifier);
+      if (this.telemetryObjects[key]) {
+        delete this.telemetryObjects[key];
+      }
+
+      if (this.telemetryObjectFormats && this.telemetryObjectFormats[key]) {
+        delete this.telemetryObjectFormats[key];
+      }
+
+      this.removeSubscription(key);
+    },
+    addDataToGraph(telemetryObject, data) {
+      const key = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+
+      if (data.message) {
+        this.openmct.notifications.alert(data.message);
+      }
+
+      if (
+        !this.domainObject.configuration.axes.xKey ||
+        !this.domainObject.configuration.axes.yKey
+      ) {
+        return;
+      }
+
+      const timestamp = this.getTimestampForDatum(data, key, telemetryObject);
+      let valueForTimestamp = this.valuesByTimestamp[timestamp] || {};
+
+      //populate x values
+      let metadataKey = this.domainObject.configuration.axes.xKey;
+      if (data[metadataKey] !== undefined) {
+        valueForTimestamp.x = this.format(key, metadataKey, data);
+      }
+
+      metadataKey = this.domainObject.configuration.axes.yKey;
+      if (data[metadataKey] !== undefined) {
+        valueForTimestamp.y = this.format(key, metadataKey, data);
+      }
+
+      this.valuesByTimestamp[timestamp] = valueForTimestamp;
+    },
+    updateTrace(telemetryObject) {
+      const xAndyValues = Object.values(this.valuesByTimestamp);
+      const xValues = xAndyValues.map((value) => value.x);
+      const yValues = xAndyValues.map((value) => value.y);
+      const axisMetadata = this.getAxisMetadata(telemetryObject);
+      const xAxisMetadata = axisMetadata.find(
+        (metadata) => metadata.source === this.domainObject.configuration.axes.xKey
+      );
+      let yAxisMetadata = {};
+      if (this.domainObject.configuration.axes.yKey) {
+        yAxisMetadata = axisMetadata.find(
+          (metadata) => metadata.source === this.domainObject.configuration.axes.yKey
+        );
+      }
+
+      let trace = {
+        key: this.openmct.objects.makeKeyString(this.domainObject.identifier),
+        name: this.domainObject.name,
+        x: xValues,
+        y: yValues,
+        text: yValues.map(String),
+        xAxisMetadata: xAxisMetadata,
+        yAxisMetadata: yAxisMetadata,
+        type: 'scatter',
+        mode: 'markers',
+        marker: {
+          color: this.domainObject.configuration.styles.color
+        },
+        hoverinfo: 'x+y'
+      };
+
+      if (
+        this.domainObject.configuration.ranges !== undefined &&
+        this.domainObject.configuration.ranges.domainMin !== undefined &&
+        this.domainObject.configuration.ranges.domainMax !== undefined
+      ) {
+        trace.xaxis = {
+          min: this.domainObject.configuration.ranges.domainMin,
+          max: this.domainObject.configuration.ranges.domainMax
+        };
+      }
+
+      if (
+        this.domainObject.configuration.ranges !== undefined &&
+        this.domainObject.configuration.ranges.rangeMin !== undefined &&
+        this.domainObject.configuration.ranges.rangeMax !== undefined
+      ) {
+        trace.yaxis = {
+          min: this.domainObject.configuration.ranges.rangeMin,
+          max: this.domainObject.configuration.ranges.rangeMax
+        };
+      }
+
+      this.trace = [trace];
+    },
+    getTimestampForDatum(datum, key, telemetryObject) {
+      const timeSystemKey = this.timeContext.timeSystem().key;
+      const metadata = this.openmct.telemetry.getMetadata(telemetryObject);
+      let metadataValue = metadata.value(timeSystemKey) || { format: timeSystemKey };
+
+      return this.parse(key, metadataValue.source, datum);
+    },
+    format(telemetryObjectKey, metadataKey, data) {
+      const formats = this.telemetryObjectFormats[telemetryObjectKey];
+
+      return formats[metadataKey].format(data);
+    },
+    parse(telemetryObjectKey, metadataKey, datum) {
+      if (!datum) {
+        return;
+      }
+
+      const formats = this.telemetryObjectFormats[telemetryObjectKey];
+
+      return formats[metadataKey].parse(datum);
+    },
+    getOptions() {
+      const { start, end } = this.timeContext.bounds();
+
+      return {
+        end,
+        start
+      };
+    },
+    subscribeToObject(telemetryObject) {
+      const key = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+
+      this.removeSubscription(key);
+
+      const options = this.getOptions();
+      const unsubscribe = this.openmct.telemetry.subscribe(
+        telemetryObject,
+        (data) => this.addDataToGraph(telemetryObject, data),
+        options
+      );
+
+      this.subscriptions.push({
+        key,
+        unsubscribe
+      });
+    },
+    subscribeToAll() {
+      const telemetryObjects = Object.values(this.telemetryObjects);
+      telemetryObjects.forEach(this.subscribeToObject);
+    },
+    removeAllSubscriptions() {
+      this.subscriptions.forEach((subscription) => subscription.unsubscribe());
+      this.subscriptions = [];
+    },
+    removeSubscription(key) {
+      const found = this.subscriptions.findIndex((subscription) => subscription.key === key);
+      if (found > -1) {
+        this.subscriptions[found].unsubscribe();
+        this.subscriptions.splice(found, 1);
+      }
+    }
+  }
+};
+</script>
diff --git a/src/plugins/charts/scatter/ScatterPlotViewProvider.js b/src/plugins/charts/scatter/ScatterPlotViewProvider.js
new file mode 100644
index 00000000000..fe467e951ff
--- /dev/null
+++ b/src/plugins/charts/scatter/ScatterPlotViewProvider.js
@@ -0,0 +1,88 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
+
+import { SCATTER_PLOT_KEY, SCATTER_PLOT_VIEW, TIME_STRIP_KEY } from './scatterPlotConstants.js';
+import ScatterPlotView from './ScatterPlotView.vue';
+
+export default function ScatterPlotViewProvider(openmct) {
+  function isCompactView(objectPath) {
+    let isChildOfTimeStrip = objectPath.find((object) => object.type === TIME_STRIP_KEY);
+
+    return isChildOfTimeStrip && !openmct.router.isNavigatedObject(objectPath);
+  }
+
+  return {
+    key: SCATTER_PLOT_VIEW,
+    name: 'Scatter Plot',
+    cssClass: 'icon-telemetry',
+    canView(domainObject, objectPath) {
+      return domainObject && domainObject.type === SCATTER_PLOT_KEY;
+    },
+
+    canEdit(domainObject, objectPath) {
+      return domainObject && domainObject.type === SCATTER_PLOT_KEY;
+    },
+
+    view: function (domainObject, objectPath) {
+      let _destroy = null;
+
+      return {
+        show: function (element) {
+          const isCompact = isCompactView(objectPath);
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                ScatterPlotView
+              },
+              provide: {
+                openmct,
+                domainObject,
+                path: objectPath
+              },
+              data() {
+                return {
+                  options: {
+                    compact: isCompact
+                  }
+                };
+              },
+              template: '<scatter-plot-view :options="options"></scatter-plot-view>'
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+        },
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
+        }
+      };
+    }
+  };
+}
diff --git a/src/plugins/charts/scatter/ScatterPlotWithUnderlay.vue b/src/plugins/charts/scatter/ScatterPlotWithUnderlay.vue
new file mode 100644
index 00000000000..66b56ac06d1
--- /dev/null
+++ b/src/plugins/charts/scatter/ScatterPlotWithUnderlay.vue
@@ -0,0 +1,437 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div ref="plotWrapper" class="has-local-controls" :class="{ 's-unsynced': isZoomed }">
+    <div v-if="isZoomed" class="l-state-indicators">
+      <span
+        class="l-state-indicators__alert-no-lad t-object-alert t-alert-unsynced icon-alert-triangle"
+        title="This plot is not currently displaying the latest data. Reset pan/zoom to view latest data."
+      ></span>
+    </div>
+    <div ref="plot" class="c-scatter-chart"></div>
+    <div
+      ref="localControl"
+      class="gl-plot__local-controls h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover"
+    >
+      <button
+        v-if="data.length"
+        class="c-button icon-reset"
+        :disabled="!isZoomed"
+        title="Reset pan/zoom"
+        @click="reset()"
+      ></button>
+    </div>
+  </div>
+</template>
+<script>
+import Plotly from 'plotly-basic';
+
+const MULTI_AXES_X_PADDING_PERCENT = {
+  LEFT: 8,
+  RIGHT: 94
+};
+
+import { getValidatedData } from '@/plugins/plan/util';
+
+const PATH_COLORS = ['blue', 'red', 'green'];
+const MARKER_COLOR = 'white';
+
+export default {
+  inject: ['openmct', 'domainObject'],
+  props: {
+    data: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    plotAxisTitle: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  emits: ['subscribe', 'unsubscribe'],
+  data() {
+    return {
+      isZoomed: false,
+      yAxisRange: {
+        min: '',
+        max: ''
+      },
+      xAxisRange: {
+        min: '',
+        max: ''
+      }
+    };
+  },
+  watch: {
+    data: {
+      immediate: false,
+      handler() {
+        this.updateData();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.getUnderlayPlotData();
+
+    Plotly.newPlot(
+      this.$refs.plot,
+      Array.from(this.data.concat(this.getShapes(this.shapesData))),
+      this.getLayout(),
+      {
+        responsive: true,
+        displayModeBar: false
+      }
+    );
+    this.registerListeners();
+
+    this.$refs.plot.on('plotly_relayout', this.zoom);
+  },
+  beforeUnmount() {
+    if (this.$refs.plot && this.$refs.plot.off) {
+      this.$refs.plot.off('plotly_relayout', this.zoom);
+    }
+
+    if (this.plotResizeObserver) {
+      this.plotResizeObserver.disconnect();
+      clearTimeout(this.resizeTimer);
+    }
+
+    if (this.unlistenUnderlay) {
+      this.unlistenUnderlay();
+    }
+
+    if (this.unlistenUnderlayRanges) {
+      this.unlistenUnderlayRanges();
+    }
+
+    if (this.unobserveColorChanges) {
+      this.unobserveColorChanges();
+    }
+
+    Plotly.purge(this.$refs.plot);
+  },
+  methods: {
+    getUnderlayPlotData() {
+      if (this.domainObject.selectFile) {
+        this.shapesData = getValidatedData(this.domainObject);
+      } else {
+        this.shapesData = [];
+      }
+    },
+    observeForUnderlayPlotChanges() {
+      this.getUnderlayPlotData();
+      this.updateData();
+    },
+    getAxisMinMax() {
+      if (!this.data.length) {
+        return;
+      }
+
+      // For now, use x and y axes min, max values only if an underlay is available
+      if (this.shapesData.length && this.data[0].xaxis) {
+        this.xAxisRange = this.data[0].xaxis;
+      }
+
+      if (this.shapesData.length && this.data[0].yaxis) {
+        this.yAxisRange = this.data[0].yaxis;
+      }
+    },
+    getLayout() {
+      this.getAxisMinMax();
+
+      const yAxesMeta = this.getYAxisMeta();
+      const primaryYaxis = this.getYaxisLayout(yAxesMeta['1']);
+      const xAxisDomain = this.getXAxisDomain(yAxesMeta);
+
+      const shapes = this.shapesData.map((shapeData, index) => {
+        if (
+          !shapeData.x ||
+          !shapeData.y ||
+          !shapeData.x.length ||
+          !shapeData.y.length ||
+          shapeData.x.length !== shapeData.y.length
+        ) {
+          return '';
+        }
+
+        let path = `M ${shapeData.x[0]},${shapeData.y[0]}`;
+        shapeData.x.forEach((point, shapeIndex) => {
+          if (shapeIndex > 0) {
+            path = `${path} L${point},${shapeData.y[shapeIndex]}`;
+          }
+        });
+
+        return {
+          path,
+          type: 'path',
+          line: {
+            color: PATH_COLORS[index]
+          },
+          opacity: 0.5
+        };
+      });
+
+      return {
+        autosize: true,
+        showlegend: false,
+        textposition: 'auto',
+        font: {
+          family: 'Helvetica Neue, Helvetica, Arial, sans-serif',
+          size: '12px',
+          color: '#666'
+        },
+        xaxis: {
+          domain: xAxisDomain,
+          range: [this.xAxisRange.min, this.xAxisRange.max],
+          title: this.plotAxisTitle.xAxisTitle,
+          automargin: true
+        },
+        yaxis: primaryYaxis,
+        margin: {
+          l: 5,
+          r: 5,
+          t: 5,
+          b: 0
+        },
+        paper_bgcolor: 'transparent',
+        plot_bgcolor: 'transparent',
+        shapes,
+        layer: 'below'
+      };
+    },
+    getYAxisMeta() {
+      const yAxisMeta = {};
+
+      this.data.forEach((datum) => {
+        const yAxisMetadata = datum.yAxisMetadata;
+        const range = '1';
+        const side = 'left';
+        const name = yAxisMetadata.name;
+        const unit = yAxisMetadata.units;
+
+        yAxisMeta[range] = {
+          range,
+          side,
+          name,
+          unit
+        };
+      });
+
+      return yAxisMeta;
+    },
+    getXAxisDomain(yAxisMeta) {
+      let leftPaddingPerc = 0;
+      let rightPaddingPerc = 100;
+      let rightSide =
+        yAxisMeta && Object.values(yAxisMeta).filter((axisMeta) => axisMeta.side === 'right');
+      let leftSide =
+        yAxisMeta && Object.values(yAxisMeta).filter((axisMeta) => axisMeta.side === 'left');
+      if (yAxisMeta && rightSide.length > 1) {
+        rightPaddingPerc = MULTI_AXES_X_PADDING_PERCENT.RIGHT;
+      }
+
+      if (yAxisMeta && leftSide.length > 1) {
+        leftPaddingPerc = MULTI_AXES_X_PADDING_PERCENT.LEFT;
+      }
+
+      return [leftPaddingPerc / 100, rightPaddingPerc / 100];
+    },
+    getYaxisLayout(yAxisMeta) {
+      if (!yAxisMeta) {
+        return {};
+      }
+
+      const { name, range, side = 'left', unit } = yAxisMeta;
+      const title = `${name} ${unit ? '(' + unit + ')' : ''}`;
+      const yaxis = {
+        automargin: true,
+        title
+      };
+
+      let yRange = this.yAxisRange;
+      if (range === '1') {
+        yaxis.range = [yRange.min, yRange.max];
+
+        return yaxis;
+      }
+
+      yaxis.range = [yRange.min, yRange.max];
+      yaxis.anchor = side.toLowerCase() === 'left' ? 'free' : 'x';
+      yaxis.showline = side.toLowerCase() === 'left';
+      yaxis.side = side.toLowerCase();
+      yaxis.overlaying = 'y';
+      yaxis.position = 0.01;
+
+      return yaxis;
+    },
+    registerListeners() {
+      this.unobserveColorChanges = this.openmct.objects.observe(
+        this.domainObject,
+        'configuration.styles.color',
+        this.updateColors
+      );
+      this.unlistenUnderlay = this.openmct.objects.observe(
+        this.domainObject,
+        'selectFile',
+        this.observeForUnderlayPlotChanges
+      );
+      this.unlistenUnderlayRanges = this.openmct.objects.observe(
+        this.domainObject,
+        'configuration.ranges',
+        this.updateData
+      );
+      this.resizeTimer = false;
+      if (window.ResizeObserver) {
+        this.plotResizeObserver = new ResizeObserver(() => {
+          // debounce and trigger window resize so that plotly can resize the plot
+          clearTimeout(this.resizeTimer);
+          this.resizeTimer = setTimeout(() => {
+            window.dispatchEvent(new Event('resize'));
+          }, 250);
+        });
+        this.plotResizeObserver.observe(this.$refs.plotWrapper);
+      }
+    },
+    updateColors() {
+      const colors = [];
+      const indices = [];
+      this.data.forEach((item, index) => {
+        const colorExists = this.domainObject.configuration.styles.color;
+        indices.push(index);
+        if (colorExists) {
+          colors.push(this.domainObject.configuration.styles.color);
+        } else {
+          colors.push(item.marker.color);
+        }
+      });
+      const plotUpdate = {
+        'marker.color': colors
+      };
+
+      Plotly.restyle(this.$refs.plot, plotUpdate, indices);
+    },
+    reset() {
+      this.isZoomed = false;
+
+      this.updatePlot();
+      this.$emit('subscribe');
+    },
+    updateData() {
+      this.updatePlot();
+    },
+    updateLocalControlPosition() {
+      const localControl = this.$refs.localControl;
+      localControl.style.display = 'none';
+
+      const plot = this.$refs.plot;
+      const bgLayer = this.$el.querySelector('.bglayer');
+
+      const plotBoundingRect = plot.getBoundingClientRect();
+      const bgLayerBoundingRect = bgLayer.getBoundingClientRect();
+
+      const top = bgLayerBoundingRect.top - plotBoundingRect.top + 5;
+      const left = bgLayerBoundingRect.left - plotBoundingRect.left + 5;
+
+      localControl.style.top = `${top}px`;
+      localControl.style.left = `${left}px`;
+      localControl.style.display = 'block';
+    },
+    updatePlot() {
+      if (!this.$refs || !this.$refs.plot || this.isZoomed) {
+        return;
+      }
+
+      Plotly.react(
+        this.$refs.plot,
+        Array.from(this.data.concat(this.getShapes(this.shapesData))),
+        this.getLayout()
+      );
+    },
+    zoom(eventData) {
+      const autorange = eventData['xaxis.autorange'];
+      const { autosize } = eventData;
+
+      if (autosize || autorange) {
+        return;
+      }
+
+      this.isZoomed = true;
+      this.$emit('unsubscribe');
+    },
+    getShapes() {
+      let markerData = {
+        x: [],
+        y: []
+      };
+      const shapes = this.shapesData.map((shapeData, index) => {
+        if (
+          !shapeData.x ||
+          !shapeData.y ||
+          !shapeData.x.length ||
+          !shapeData.y.length ||
+          shapeData.x.length !== shapeData.y.length
+        ) {
+          return '';
+        }
+
+        let text = [];
+        shapeData.x.forEach((point) => {
+          text.push(`${parseFloat(point).toPrecision(2)}`);
+        });
+
+        markerData.x = markerData.x.concat(shapeData.x);
+        markerData.y = markerData.y.concat(shapeData.y);
+
+        return {
+          x: shapeData.x,
+          y: shapeData.y,
+          mode: 'text',
+          text,
+          textfont: {
+            family: 'Helvetica Neue, Helvetica, Arial, sans-serif',
+            size: '12px',
+            color: PATH_COLORS[index]
+          },
+          opacity: 0.5
+        };
+      });
+
+      shapes.push({
+        x: markerData.x,
+        y: markerData.y,
+        mode: 'markers',
+        marker: {
+          size: 6,
+          color: MARKER_COLOR
+        }
+      });
+
+      return shapes;
+    }
+  }
+};
+</script>
diff --git a/src/plugins/charts/scatter/inspector/PlotOptions.vue b/src/plugins/charts/scatter/inspector/PlotOptions.vue
new file mode 100644
index 00000000000..2a3a036ff73
--- /dev/null
+++ b/src/plugins/charts/scatter/inspector/PlotOptions.vue
@@ -0,0 +1,64 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div>
+    <div v-if="canEdit">
+      <plot-options-edit />
+    </div>
+    <div v-else>
+      <plot-options-browse />
+    </div>
+  </div>
+</template>
+
+<script>
+import PlotOptionsBrowse from './PlotOptionsBrowse.vue';
+import PlotOptionsEdit from './PlotOptionsEdit.vue';
+export default {
+  components: {
+    PlotOptionsBrowse,
+    PlotOptionsEdit
+  },
+  inject: ['openmct', 'domainObject'],
+  data() {
+    return {
+      isEditing: this.openmct.editor.isEditing()
+    };
+  },
+  computed: {
+    canEdit() {
+      return this.isEditing && !this.domainObject.locked;
+    }
+  },
+  mounted() {
+    this.openmct.editor.on('isEditing', this.setEditState);
+  },
+  beforeUnmount() {
+    this.openmct.editor.off('isEditing', this.setEditState);
+  },
+  methods: {
+    setEditState(isEditing) {
+      this.isEditing = isEditing;
+    }
+  }
+};
+</script>
diff --git a/src/plugins/charts/scatter/inspector/PlotOptionsBrowse.vue b/src/plugins/charts/scatter/inspector/PlotOptionsBrowse.vue
new file mode 100644
index 00000000000..1a01dabe795
--- /dev/null
+++ b/src/plugins/charts/scatter/inspector/PlotOptionsBrowse.vue
@@ -0,0 +1,162 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="js-plot-options-browse grid-properties">
+    <ul class="l-inspector-part">
+      <h2 title="Object view settings">Settings</h2>
+      <li class="grid-row">
+        <div class="grid-cell label" title="X axis selection">X Axis</div>
+        <div class="grid-cell value">{{ xKeyLabel }}</div>
+      </li>
+      <li class="grid-row">
+        <div class="grid-cell label" title="Y axis selection">Y Axis</div>
+        <div class="grid-cell value">{{ yKeyLabel }}</div>
+      </li>
+      <ColorSwatch
+        :current-color="currentColor"
+        edit-title="Manually set the color for this plot"
+        view-title="The marker color for this plot"
+        short-label="Color"
+      />
+    </ul>
+  </div>
+</template>
+
+<script>
+import Color from '../../../../ui/color/Color.js';
+import ColorPalette from '../../../../ui/color/ColorPalette.js';
+import ColorSwatch from '../../../../ui/color/ColorSwatch.vue';
+
+export default {
+  components: { ColorSwatch },
+  inject: ['openmct', 'domainObject'],
+  data() {
+    return {
+      xKeyLabel: '',
+      yKeyLabel: '',
+      currentColor: undefined
+    };
+  },
+  mounted() {
+    this.plotSeries = [];
+    this.colorPalette = new ColorPalette();
+    this.initColor();
+    this.composition = this.openmct.composition.get(this.domainObject);
+    this.registerListeners();
+    this.composition.load();
+  },
+  beforeUnmount() {
+    this.stopListening();
+  },
+  methods: {
+    initColor() {
+      // this is called before the plot is initialized
+      if (
+        !this.domainObject.configuration.styles ||
+        !this.domainObject.configuration.styles.color
+      ) {
+        const color = this.colorPalette.getNextColor().asHexString();
+        this.domainObject.configuration.styles = {
+          color
+        };
+      }
+
+      this.currentColor = this.domainObject.configuration.styles.color;
+      const colorObject = Color.fromHexString(this.currentColor);
+
+      this.colorPalette.remove(colorObject);
+    },
+    registerListeners() {
+      this.composition.on('add', this.addSeries);
+      this.composition.on('remove', this.removeSeries);
+      this.unobserve = this.openmct.objects.observe(
+        this.domainObject,
+        'configuration.axes',
+        this.setAxesLabels
+      );
+    },
+    stopListening() {
+      this.composition.off('add', this.addSeries);
+      this.composition.off('remove', this.removeSeries);
+      if (this.unobserve) {
+        this.unobserve();
+      }
+    },
+    addSeries(series, index) {
+      this.plotSeries.push(series);
+      this.setAxesLabels();
+    },
+    removeSeries(seriesKey) {
+      const seriesIndex = this.plotSeries.findIndex((plotSeries) =>
+        this.openmct.objects.areIdsEqual(seriesKey, plotSeries.identifier)
+      );
+
+      const foundSeries = seriesIndex > -1;
+      if (foundSeries) {
+        this.plotSeries.splice(seriesIndex, 1);
+        this.setAxesLabels();
+      }
+    },
+    setAxesLabels() {
+      let xKeyOptions = [];
+      let yKeyOptions = [];
+      if (this.plotSeries.length <= 0) {
+        return;
+      }
+
+      const series = this.plotSeries[0];
+      const metadataValues = this.openmct.telemetry.getMetadata(series).valuesForHints(['range']);
+
+      metadataValues.forEach((metadataValue) => {
+        xKeyOptions.push({
+          name: metadataValue.name || metadataValue.key,
+          value: metadataValue.source || metadataValue.key
+        });
+        yKeyOptions.push({
+          name: metadataValue.name || metadataValue.key,
+          value: metadataValue.source || metadataValue.key
+        });
+      });
+      let xKeyOptionIndex;
+      let yKeyOptionIndex;
+
+      if (this.domainObject.configuration.axes.xKey) {
+        xKeyOptionIndex = xKeyOptions.findIndex(
+          (option) => option.value === this.domainObject.configuration.axes.xKey
+        );
+        if (xKeyOptionIndex > -1) {
+          this.xKeyLabel = xKeyOptions[xKeyOptionIndex].name;
+        }
+      }
+
+      if (metadataValues.length > 1 && this.domainObject.configuration.axes.yKey) {
+        yKeyOptionIndex = yKeyOptions.findIndex(
+          (option) => option.value === this.domainObject.configuration.axes.yKey
+        );
+        if (yKeyOptionIndex > -1) {
+          this.yKeyLabel = yKeyOptions[yKeyOptionIndex].name;
+        }
+      }
+    }
+  }
+};
+</script>
diff --git a/src/plugins/charts/scatter/inspector/PlotOptionsEdit.vue b/src/plugins/charts/scatter/inspector/PlotOptionsEdit.vue
new file mode 100644
index 00000000000..8b311773682
--- /dev/null
+++ b/src/plugins/charts/scatter/inspector/PlotOptionsEdit.vue
@@ -0,0 +1,265 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="js-plot-options-edit grid-properties">
+    <ul class="l-inspector-part">
+      <h2 title="Object view settings">Settings</h2>
+      <li class="grid-row">
+        <div class="grid-cell label" title="X axis selection.">X Axis</div>
+        <div class="grid-cell value">
+          <select v-model="xKey" @change="updateForm('xKey')">
+            <option
+              v-for="option in xKeyOptions"
+              :key="`xKey-${option.value}`"
+              :value="option.value"
+              :selected="option.value == xKey"
+            >
+              {{ option.name }}
+            </option>
+          </select>
+        </div>
+      </li>
+      <li class="grid-row">
+        <div class="grid-cell label" title="Y axis selection.">Y Axis</div>
+        <div class="grid-cell value">
+          <select v-model="yKey" @change="updateForm('yKey')">
+            <option
+              v-for="option in yKeyOptions"
+              :key="`yKey-${option.value}`"
+              :value="option.value"
+              :selected="option.value == yKey"
+            >
+              {{ option.name }}
+            </option>
+          </select>
+        </div>
+      </li>
+      <ColorSwatch
+        :current-color="currentColor"
+        title="Manually set the line and marker color for this plot."
+        edit-title="Manually set the line and marker color for this plot."
+        view-title="The line and marker color for this plot."
+        short-label="Color"
+        @color-set="setColor"
+      />
+    </ul>
+  </div>
+</template>
+<script>
+import Color from '../../../../ui/color/Color.js';
+import ColorPalette from '../../../../ui/color/ColorPalette.js';
+import ColorSwatch from '../../../../ui/color/ColorSwatch.vue';
+
+export default {
+  components: { ColorSwatch },
+  inject: ['openmct', 'domainObject'],
+  data() {
+    return {
+      xKey: undefined,
+      yKey: undefined,
+      xKeyOptions: [],
+      yKeyOptions: [],
+      currentColor: undefined
+    };
+  },
+  mounted() {
+    this.plotSeries = [];
+    this.colorPalette = new ColorPalette();
+    this.initColor();
+    this.composition = this.openmct.composition.get(this.domainObject);
+    this.registerListeners();
+    this.composition.load();
+  },
+  beforeUnmount() {
+    this.stopListening();
+  },
+  methods: {
+    initColor() {
+      // this is called before the plot is initialized
+      if (
+        !this.domainObject.configuration.styles ||
+        !this.domainObject.configuration.styles.color
+      ) {
+        const color = this.colorPalette.getNextColor().asHexString();
+        this.domainObject.configuration.styles = {
+          color
+        };
+      }
+
+      this.currentColor = this.domainObject.configuration.styles.color;
+      const colorObject = Color.fromHexString(this.currentColor);
+
+      this.colorPalette.remove(colorObject);
+    },
+    setColor(chosenColor) {
+      this.currentColor = chosenColor.asHexString();
+      this.openmct.objects.mutate(
+        this.domainObject,
+        `configuration.styles.color`,
+        this.currentColor
+      );
+    },
+    registerListeners() {
+      this.composition.on('add', this.addSeries);
+      this.composition.on('remove', this.removeSeries);
+      this.unobserve = this.openmct.objects.observe(
+        this.domainObject,
+        'configuration.axes',
+        this.setupOptions
+      );
+    },
+    stopListening() {
+      this.composition.off('add', this.addSeries);
+      this.composition.off('remove', this.removeSeries);
+      if (this.unobserve) {
+        this.unobserve();
+      }
+    },
+    addSeries(series, index) {
+      this.plotSeries.push(series);
+      this.setupOptions();
+    },
+    removeSeries(seriesIdentifier) {
+      const index = this.plotSeries.findIndex((plotSeries) =>
+        this.openmct.objects.areIdsEqual(seriesIdentifier, plotSeries.identifier)
+      );
+      if (index >= 0) {
+        this.plotSeries.splice(index, 1);
+        this.setupOptions();
+      }
+    },
+    setupOptions() {
+      this.xKeyOptions = [];
+      this.yKeyOptions = [];
+      if (this.plotSeries.length <= 0) {
+        return;
+      }
+
+      let update = false;
+      const series = this.plotSeries[0];
+      const metadataValues = this.openmct.telemetry.getMetadata(series).valuesForHints(['range']);
+      metadataValues.forEach((metadataValue) => {
+        this.xKeyOptions.push({
+          name: metadataValue.name || metadataValue.key,
+          value: metadataValue.source || metadataValue.key
+        });
+        this.yKeyOptions.push({
+          name: metadataValue.name || metadataValue.key,
+          value: metadataValue.source || metadataValue.key
+        });
+      });
+
+      let xKeyOptionIndex;
+      let yKeyOptionIndex;
+
+      if (this.domainObject.configuration.axes.xKey) {
+        xKeyOptionIndex = this.xKeyOptions.findIndex(
+          (option) => option.value === this.domainObject.configuration.axes.xKey
+        );
+        if (xKeyOptionIndex > -1) {
+          this.xKey = this.xKeyOptions[xKeyOptionIndex].value;
+        } else {
+          this.xKey = undefined;
+        }
+      }
+
+      if (this.xKey === undefined) {
+        update = true;
+        xKeyOptionIndex = 0;
+        this.xKey = this.xKeyOptions[xKeyOptionIndex].value;
+      }
+
+      if (metadataValues.length > 1) {
+        if (this.domainObject.configuration.axes.yKey) {
+          yKeyOptionIndex = this.yKeyOptions.findIndex(
+            (option) => option.value === this.domainObject.configuration.axes.yKey
+          );
+          if (yKeyOptionIndex > -1 && yKeyOptionIndex !== xKeyOptionIndex) {
+            this.yKey = this.yKeyOptions[yKeyOptionIndex].value;
+          } else {
+            this.yKey = undefined;
+          }
+        }
+
+        if (this.yKey === undefined) {
+          update = true;
+          yKeyOptionIndex = this.yKeyOptions.findIndex(
+            (option, index) => index !== xKeyOptionIndex
+          );
+          this.yKey = this.yKeyOptions[yKeyOptionIndex].value;
+        }
+
+        this.yKeyOptions = this.yKeyOptions.map((option, index) => {
+          if (index === xKeyOptionIndex) {
+            option.name = `${option.name} (swap)`;
+            option.swap = yKeyOptionIndex;
+          } else {
+            option.name = option.name.replace(' (swap)', '');
+            option.swap = undefined;
+          }
+
+          return option;
+        });
+      }
+
+      this.xKeyOptions = this.xKeyOptions.map((option, index) => {
+        if (index === yKeyOptionIndex) {
+          option.name = `${option.name} (swap)`;
+          option.swap = xKeyOptionIndex;
+        } else {
+          option.name = option.name.replace(' (swap)', '');
+          option.swap = undefined;
+        }
+
+        return option;
+      });
+
+      if (update === true) {
+        this.saveConfiguration();
+      }
+    },
+    updateForm(property) {
+      if (property === 'xKey') {
+        const xKeyOption = this.xKeyOptions.find((option) => option.value === this.xKey);
+        if (xKeyOption.swap !== undefined) {
+          //swap
+          this.yKey = this.xKeyOptions[xKeyOption.swap].value;
+        }
+      } else if (property === 'yKey') {
+        const yKeyOption = this.yKeyOptions.find((option) => option.value === this.yKey);
+        if (yKeyOption.swap !== undefined) {
+          //swap
+          this.xKey = this.yKeyOptions[yKeyOption.swap].value;
+        }
+      }
+
+      this.saveConfiguration();
+    },
+    saveConfiguration() {
+      this.openmct.objects.mutate(this.domainObject, `configuration.axes`, {
+        xKey: this.xKey,
+        yKey: this.yKey
+      });
+    }
+  }
+};
+</script>
diff --git a/src/plugins/charts/scatter/inspector/ScatterPlotInspectorViewProvider.js b/src/plugins/charts/scatter/inspector/ScatterPlotInspectorViewProvider.js
new file mode 100644
index 00000000000..a88ffee33a4
--- /dev/null
+++ b/src/plugins/charts/scatter/inspector/ScatterPlotInspectorViewProvider.js
@@ -0,0 +1,53 @@
+import mount from 'utils/mount';
+
+import { SCATTER_PLOT_INSPECTOR_KEY, SCATTER_PLOT_KEY } from '../scatterPlotConstants.js';
+import PlotOptions from './PlotOptions.vue';
+
+export default function ScatterPlotInspectorViewProvider(openmct) {
+  return {
+    key: SCATTER_PLOT_INSPECTOR_KEY,
+    name: 'Config',
+    canView: function (selection) {
+      if (selection.length === 0 || selection[0].length === 0) {
+        return false;
+      }
+
+      let object = selection[0][0].context.item;
+
+      return object && object.type === SCATTER_PLOT_KEY;
+    },
+    view: function (selection) {
+      let _destroy = null;
+      return {
+        show: function (element) {
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                PlotOptions
+              },
+              provide: {
+                openmct,
+                domainObject: selection[0][0].context.item
+              },
+              template: '<plot-options></plot-options>'
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+        },
+        priority: function () {
+          return openmct.priority.HIGH + 1;
+        },
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
+        }
+      };
+    }
+  };
+}
diff --git a/src/plugins/charts/scatter/plugin.js b/src/plugins/charts/scatter/plugin.js
new file mode 100644
index 00000000000..16198a250f1
--- /dev/null
+++ b/src/plugins/charts/scatter/plugin.js
@@ -0,0 +1,137 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import mount from 'utils/mount';
+
+import ScatterPlotInspectorViewProvider from './inspector/ScatterPlotInspectorViewProvider.js';
+import ScatterPlotCompositionPolicy from './ScatterPlotCompositionPolicy.js';
+import { SCATTER_PLOT_KEY } from './scatterPlotConstants.js';
+import ScatterPlotForm from './ScatterPlotForm.vue';
+import ScatterPlotViewProvider from './ScatterPlotViewProvider.js';
+
+export default function () {
+  return function install(openmct) {
+    openmct.forms.addNewFormControl(
+      'scatter-plot-form-control',
+      getScatterPlotFormControl(openmct)
+    );
+
+    openmct.types.addType(SCATTER_PLOT_KEY, {
+      key: SCATTER_PLOT_KEY,
+      name: 'Scatter Plot',
+      cssClass: 'icon-plot-scatter',
+      description: 'View data as a scatter plot.',
+      creatable: true,
+      initialize: function (domainObject) {
+        domainObject.composition = [];
+        domainObject.configuration = {
+          styles: {},
+          axes: {},
+          ranges: {}
+        };
+      },
+      form: [
+        {
+          name: 'Underlay data (JSON file)',
+          key: 'selectFile',
+          control: 'file-input',
+          text: 'Select File...',
+          type: 'application/json',
+          removable: true,
+          hideFromInspector: true,
+          property: ['selectFile']
+        },
+        {
+          name: 'Underlay ranges',
+          control: 'scatter-plot-form-control',
+          cssClass: 'l-input',
+          key: 'scatterPlotForm',
+          required: false,
+          hideFromInspector: false,
+          property: ['configuration', 'ranges'],
+          validate: ({ value }, callback) => {
+            const { rangeMin, rangeMax, domainMin, domainMax } = value;
+            const valid = {
+              rangeMin,
+              rangeMax,
+              domainMin,
+              domainMax
+            };
+
+            if (callback) {
+              callback(valid);
+            }
+
+            const values = Object.values(valid);
+            const hasAllValues = values.every((rangeValue) => rangeValue !== undefined);
+            const hasNoValues = values.every((rangeValue) => rangeValue === undefined);
+
+            return hasAllValues || hasNoValues;
+          }
+        }
+      ],
+      priority: 891
+    });
+
+    openmct.objectViews.addProvider(new ScatterPlotViewProvider(openmct));
+
+    openmct.inspectorViews.addProvider(new ScatterPlotInspectorViewProvider(openmct));
+
+    openmct.composition.addPolicy(new ScatterPlotCompositionPolicy(openmct).allow);
+  };
+
+  function getScatterPlotFormControl(openmct) {
+    let destroyComponent;
+
+    return {
+      show(element, model, onChange) {
+        const { vNode, destroy } = mount(
+          {
+            el: element,
+            components: {
+              ScatterPlotForm
+            },
+            provide: {
+              openmct
+            },
+            data() {
+              return {
+                model,
+                onChange
+              };
+            },
+            template: `<scatter-plot-form :model="model" @on-change="onChange"></scatter-plot-form>`
+          },
+          {
+            app: openmct.app,
+            element
+          }
+        );
+        destroyComponent = destroy;
+
+        return vNode;
+      },
+      destroy() {
+        destroyComponent();
+      }
+    };
+  }
+}
diff --git a/src/plugins/charts/scatter/pluginSpec.js b/src/plugins/charts/scatter/pluginSpec.js
new file mode 100644
index 00000000000..ffa7e46cc41
--- /dev/null
+++ b/src/plugins/charts/scatter/pluginSpec.js
@@ -0,0 +1,421 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import EventEmitter from 'EventEmitter';
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+import { nextTick } from 'vue';
+
+import ScatterPlotPlugin from './plugin.js';
+import { SCATTER_PLOT_KEY, SCATTER_PLOT_VIEW } from './scatterPlotConstants.js';
+
+describe('the plugin', function () {
+  let element;
+  let child;
+  let openmct;
+  let telemetryPromise;
+  let telemetryPromiseResolve;
+  let mockObjectPath;
+
+  beforeEach((done) => {
+    mockObjectPath = [
+      {
+        name: 'mock folder',
+        type: 'fake-folder',
+        identifier: {
+          key: 'mock-folder',
+          namespace: ''
+        }
+      }
+    ];
+    const testTelemetry = [
+      {
+        utc: 1,
+        'some-key': 'some-value 1',
+        'some-other-key': 'some-other-value 1'
+      },
+      {
+        utc: 2,
+        'some-key': 'some-value 2',
+        'some-other-key': 'some-other-value 2'
+      },
+      {
+        utc: 3,
+        'some-key': 'some-value 3',
+        'some-other-key': 'some-other-value 3'
+      }
+    ];
+
+    openmct = createOpenMct();
+
+    telemetryPromise = new Promise((resolve) => {
+      telemetryPromiseResolve = resolve;
+    });
+
+    spyOn(openmct.telemetry, 'request').and.callFake(() => {
+      telemetryPromiseResolve(testTelemetry);
+
+      return telemetryPromise;
+    });
+
+    openmct.install(new ScatterPlotPlugin());
+
+    element = document.createElement('div');
+    element.style.width = '640px';
+    element.style.height = '480px';
+    child = document.createElement('div');
+    child.style.width = '640px';
+    child.style.height = '480px';
+    element.appendChild(child);
+    document.body.appendChild(element);
+
+    spyOn(window, 'ResizeObserver').and.returnValue({
+      observe() {},
+      unobserve() {},
+      disconnect() {}
+    });
+
+    openmct.time.timeSystem('utc', {
+      start: 0,
+      end: 4
+    });
+
+    openmct.types.addType('test-object', {
+      creatable: true
+    });
+
+    openmct.on('start', done);
+    openmct.startHeadless();
+  });
+
+  afterEach((done) => {
+    openmct.time.timeSystem('utc', {
+      start: 0,
+      end: 1
+    });
+    resetApplicationState(openmct).then(done).catch(done);
+  });
+
+  describe('The scatter plot view', () => {
+    let testDomainObject;
+    let scatterPlotObject;
+    // eslint-disable-next-line no-unused-vars
+    let mockComposition;
+
+    beforeEach(async () => {
+      scatterPlotObject = {
+        identifier: {
+          namespace: '',
+          key: 'test-plot'
+        },
+        type: 'telemetry.plot.scatter-plot',
+        name: 'Test Scatter Plot',
+        configuration: {
+          axes: {},
+          styles: {}
+        }
+      };
+
+      testDomainObject = {
+        identifier: {
+          namespace: '',
+          key: 'test-object'
+        },
+        type: 'test-object',
+        name: 'Test Object',
+        telemetry: {
+          values: [
+            {
+              key: 'utc',
+              format: 'utc',
+              name: 'Time',
+              hints: {
+                domain: 1
+              }
+            },
+            {
+              key: 'some-key',
+              name: 'Some attribute',
+              hints: {
+                range: 1
+              }
+            },
+            {
+              key: 'some-other-key',
+              name: 'Another attribute',
+              hints: {
+                range: 2
+              }
+            }
+          ]
+        }
+      };
+
+      mockComposition = new EventEmitter();
+      mockComposition.load = () => {
+        mockComposition.emit('add', testDomainObject);
+
+        return [testDomainObject];
+      };
+
+      spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
+
+      await nextTick();
+    });
+
+    it('provides a scatter plot view', () => {
+      const applicableViews = openmct.objectViews.get(scatterPlotObject, mockObjectPath);
+      const plotViewProvider = applicableViews.find(
+        (viewProvider) => viewProvider.key === SCATTER_PLOT_VIEW
+      );
+      expect(plotViewProvider).toBeDefined();
+    });
+
+    xit('Renders plotly scatter plot', () => {
+      let scatterPlotElement = element.querySelectorAll('.plotly');
+      expect(scatterPlotElement.length).toBe(1);
+    });
+  });
+
+  describe('the scatter plot objects', () => {
+    const mockObject = {
+      name: 'A very nice scatter plot',
+      key: SCATTER_PLOT_KEY,
+      creatable: true
+    };
+
+    it('defines a scatter plot object type with the correct key', () => {
+      const objectDef = openmct.types.get(SCATTER_PLOT_KEY).definition;
+      expect(objectDef.key).toEqual(mockObject.key);
+    });
+
+    it('is creatable', () => {
+      const objectDef = openmct.types.get(SCATTER_PLOT_KEY).definition;
+      expect(objectDef.creatable).toEqual(mockObject.creatable);
+    });
+  });
+
+  describe('The scatter plot composition policy', () => {
+    it('allows composition for telemetry that contain at least 2 ranges', () => {
+      const parent = {
+        composition: [],
+        configuration: {
+          axes: {},
+          styles: {}
+        },
+        name: 'Some Scatter Plot',
+        type: 'telemetry.plot.scatter-plot',
+        location: 'mine',
+        modified: 1631005183584,
+        persisted: 1631005183502,
+        identifier: {
+          namespace: '',
+          key: 'b78e7e23-f2b8-4776-b1f0-3ff778f5c8a9'
+        }
+      };
+      const testTelemetryObject = {
+        identifier: {
+          namespace: '',
+          key: 'test-object'
+        },
+        type: 'test-object',
+        name: 'Test Object',
+        telemetry: {
+          values: [
+            {
+              key: 'some-key',
+              name: 'Some attribute',
+              hints: {
+                domain: 1
+              }
+            },
+            {
+              key: 'some-other-key',
+              name: 'Another attribute',
+              hints: {
+                range: 1
+              }
+            },
+            {
+              key: 'some-other-key2',
+              name: 'Another attribute2',
+              hints: {
+                range: 2
+              }
+            }
+          ]
+        }
+      };
+      const composition = openmct.composition.get(parent);
+      expect(() => {
+        composition.add(testTelemetryObject);
+      }).not.toThrow();
+      expect(parent.composition.length).toBe(1);
+    });
+
+    it("disallows composition for telemetry that don't contain at least 2 range hints", () => {
+      const parent = {
+        composition: [],
+        configuration: {
+          axes: {},
+          styles: {}
+        },
+        name: 'Some Scatter Plot',
+        type: 'telemetry.plot.scatter-plot',
+        location: 'mine',
+        modified: 1631005183584,
+        persisted: 1631005183502,
+        identifier: {
+          namespace: '',
+          key: 'b78e7e23-f2b8-4776-b1f0-3ff778f5c8a9'
+        }
+      };
+      const testTelemetryObject = {
+        identifier: {
+          namespace: '',
+          key: 'test-object'
+        },
+        type: 'test-object',
+        name: 'Test Object',
+        telemetry: {
+          values: [
+            {
+              key: 'some-key',
+              name: 'Some attribute',
+              hints: {
+                domain: 1
+              }
+            },
+            {
+              key: 'some-other-key',
+              name: 'Another attribute',
+              hints: {
+                range: 1
+              }
+            }
+          ]
+        }
+      };
+      const composition = openmct.composition.get(parent);
+      expect(() => {
+        composition.add(testTelemetryObject);
+      }).toThrow();
+      expect(parent.composition.length).toBe(0);
+    });
+  });
+  describe('the inspector view', () => {
+    let mockComposition;
+    let testDomainObject;
+    let selection;
+    let plotInspectorView;
+    let viewContainer;
+    let optionsElement;
+    beforeEach(async () => {
+      testDomainObject = {
+        identifier: {
+          namespace: '',
+          key: 'test-object'
+        },
+        type: 'test-object',
+        name: 'Test Object',
+        telemetry: {
+          values: [
+            {
+              key: 'utc',
+              format: 'utc',
+              name: 'Time',
+              hints: {
+                domain: 1
+              }
+            },
+            {
+              key: 'some-key',
+              name: 'Some attribute',
+              hints: {
+                range: 1
+              }
+            },
+            {
+              key: 'some-other-key',
+              name: 'Another attribute',
+              hints: {
+                range: 2
+              }
+            }
+          ]
+        }
+      };
+
+      selection = [
+        [
+          {
+            context: {
+              item: {
+                id: 'test-object',
+                identifier: {
+                  key: 'test-object',
+                  namespace: ''
+                },
+                type: 'telemetry.plot.scatter-plot',
+                configuration: {
+                  axes: {},
+                  styles: {}
+                },
+                composition: [
+                  {
+                    key: '~Some~foo.scatter'
+                  }
+                ]
+              }
+            }
+          }
+        ]
+      ];
+
+      mockComposition = new EventEmitter();
+      mockComposition.load = () => {
+        mockComposition.emit('add', testDomainObject);
+
+        return [testDomainObject];
+      };
+
+      spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
+
+      viewContainer = document.createElement('div');
+      child.append(viewContainer);
+
+      const applicableViews = openmct.inspectorViews.get(selection);
+      plotInspectorView = applicableViews[0];
+      plotInspectorView.show(viewContainer);
+
+      await nextTick();
+      optionsElement = element.querySelector('.c-scatter-plot-options');
+    });
+
+    afterEach(() => {
+      plotInspectorView.destroy();
+    });
+
+    it('it renders the options', () => {
+      expect(optionsElement).toBeDefined();
+    });
+  });
+});
diff --git a/src/plugins/charts/scatter/scatterPlotConstants.js b/src/plugins/charts/scatter/scatterPlotConstants.js
new file mode 100644
index 00000000000..e458be37c6c
--- /dev/null
+++ b/src/plugins/charts/scatter/scatterPlotConstants.js
@@ -0,0 +1,4 @@
+export const SCATTER_PLOT_VIEW = 'scatter-plot.view';
+export const SCATTER_PLOT_KEY = 'telemetry.plot.scatter-plot';
+export const SCATTER_PLOT_INSPECTOR_KEY = 'telemetry.plot.scatter-plot.inspector';
+export const TIME_STRIP_KEY = 'time-strip';
diff --git a/src/plugins/clearData/ClearDataAction.js b/src/plugins/clearData/ClearDataAction.js
new file mode 100644
index 00000000000..137cbd06571
--- /dev/null
+++ b/src/plugins/clearData/ClearDataAction.js
@@ -0,0 +1,78 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+function inSelectionPath(openmct, domainObject) {
+  const domainObjectIdentifier = domainObject.identifier;
+
+  return openmct.selection.get().some((selectionPath) => {
+    return selectionPath.some((objectInPath) => {
+      const objectInPathIdentifier = objectInPath.context.item.identifier;
+
+      return openmct.objects.areIdsEqual(objectInPathIdentifier, domainObjectIdentifier);
+    });
+  });
+}
+
+export default class ClearDataAction {
+  constructor(openmct, appliesToObjects) {
+    this.name = 'Clear Data for Object';
+    this.key = 'clear-data-action';
+    this.description = 'Clears current data for object, unsubscribes and resubscribes to data';
+    this.cssClass = 'icon-clear-data';
+
+    this._openmct = openmct;
+    this._appliesToObjects = appliesToObjects;
+  }
+  invoke(objectPath) {
+    let domainObject = null;
+    if (objectPath) {
+      domainObject = objectPath[0];
+    }
+
+    this._openmct.objectViews.emit('clearData', domainObject);
+  }
+  appliesTo(objectPath) {
+    if (!objectPath) {
+      return false;
+    }
+
+    const contextualDomainObject = objectPath[0];
+    // first check to see if this action applies to this sort of object at all
+    const appliesToThisObject = this._appliesToObjects.some((type) => {
+      return contextualDomainObject.type === type;
+    });
+    if (!appliesToThisObject) {
+      // we've selected something not applicable
+      return false;
+    }
+
+    const objectInSelectionPath = inSelectionPath(this._openmct, contextualDomainObject);
+    if (objectInSelectionPath) {
+      return true;
+    } else {
+      // if this it doesn't match up, check to see if we're in a composition (i.e., layout)
+      const routerPath = this._openmct.router.path[0];
+
+      return routerPath.type === 'layout';
+    }
+  }
+}
diff --git a/src/plugins/clearData/clearDataAction.js b/src/plugins/clearData/clearDataAction.js
deleted file mode 100644
index 7eb61a494cf..00000000000
--- a/src/plugins/clearData/clearDataAction.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-export default class ClearDataAction {
-    constructor(openmct, appliesToObjects) {
-        this.name = 'Clear Data for Object';
-        this.key = 'clear-data-action';
-        this.description = 'Clears current data for object, unsubscribes and resubscribes to data';
-        this.cssClass = 'icon-clear-data';
-
-        this._openmct = openmct;
-        this._appliesToObjects = appliesToObjects;
-    }
-    invoke(objectPath) {
-        this._openmct.objectViews.emit('clearData', objectPath[0]);
-    }
-    appliesTo(objectPath) {
-        let contextualDomainObject = objectPath[0];
-
-        return this._appliesToObjects.filter(type => contextualDomainObject.type === type).length;
-    }
-}
diff --git a/src/plugins/clearData/components/GlobalClearIndicator.vue b/src/plugins/clearData/components/GlobalClearIndicator.vue
new file mode 100644
index 00000000000..71b73ddaeb9
--- /dev/null
+++ b/src/plugins/clearData/components/GlobalClearIndicator.vue
@@ -0,0 +1,42 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div
+    aria-label="Global Clear Indicator"
+    class="c-indicator c-indicator--clickable icon-clear-data s-status-caution"
+  >
+    <span class="label c-indicator__label">
+      <button @click="globalClearEmit">Clear Data</button>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  inject: ['openmct'],
+  methods: {
+    globalClearEmit() {
+      this.openmct.objectViews.emit('clearData');
+    }
+  }
+};
+</script>
diff --git a/src/plugins/clearData/components/globalClearIndicator.vue b/src/plugins/clearData/components/globalClearIndicator.vue
deleted file mode 100644
index d159969aeb6..00000000000
--- a/src/plugins/clearData/components/globalClearIndicator.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-<div class="c-indicator c-indicator--clickable icon-clear-data s-status-caution">
-    <span class="label c-indicator__label">
-        <button @click="globalClearEmit">Clear Data</button>
-    </span>
-</div>
-</template>
-
-<script>
-export default {
-    inject: ['openmct'],
-    methods: {
-        globalClearEmit() {
-            this.openmct.objectViews.emit('clearData');
-        }
-    }
-};
-</script>
diff --git a/src/plugins/clearData/plugin.js b/src/plugins/clearData/plugin.js
index 8febcd47f51..e4039b6ec55 100644
--- a/src/plugins/clearData/plugin.js
+++ b/src/plugins/clearData/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,41 +19,25 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+import ClearDataAction from './ClearDataAction.js';
+import GlobalClearIndicator from './components/GlobalClearIndicator.vue';
 
-define([
-    './components/globalClearIndicator.vue',
-    './clearDataAction',
-    'vue'
-], function (
-    GlobaClearIndicator,
-    ClearDataAction,
-    Vue
-) {
-    return function plugin(appliesToObjects, options = {indicator: true}) {
-        let installIndicator = options.indicator;
+export default function plugin(appliesToObjects, options = { indicator: true }) {
+  let installIndicator = options.indicator;
 
-        appliesToObjects = appliesToObjects || [];
+  appliesToObjects = appliesToObjects || [];
 
-        return function install(openmct) {
-            if (installIndicator) {
-                let component = new Vue ({
-                    components: {
-                        GlobalClearIndicator: GlobaClearIndicator.default
-                    },
-                    provide: {
-                        openmct
-                    },
-                    template: '<GlobalClearIndicator></GlobalClearIndicator>'
-                });
+  return function install(openmct) {
+    if (installIndicator) {
+      let indicator = {
+        vueComponent: GlobalClearIndicator,
+        key: 'global-clear-indicator',
+        priority: openmct.priority.DEFAULT
+      };
 
-                let indicator = {
-                    element: component.$mount().$el
-                };
+      openmct.indicators.add(indicator);
+    }
 
-                openmct.indicators.add(indicator);
-            }
-
-            openmct.actions.register(new ClearDataAction.default(openmct, appliesToObjects));
-        };
-    };
-});
+    openmct.actions.register(new ClearDataAction(openmct, appliesToObjects));
+  };
+}
diff --git a/src/plugins/clearData/pluginSpec.js b/src/plugins/clearData/pluginSpec.js
new file mode 100644
index 00000000000..2daf196bccd
--- /dev/null
+++ b/src/plugins/clearData/pluginSpec.js
@@ -0,0 +1,233 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createMouseEvent, createOpenMct, resetApplicationState } from 'utils/testing';
+
+import ClearDataPlugin from './plugin.js';
+
+describe('The Clear Data Plugin:', () => {
+  let clearDataPlugin;
+
+  describe('The clear data action:', () => {
+    let openmct;
+    let selection;
+    let mockObjectPath;
+    let clearDataAction;
+    let testViewObject;
+    beforeEach((done) => {
+      openmct = createOpenMct();
+
+      clearDataPlugin = new ClearDataPlugin(
+        ['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked'],
+        { indicator: true }
+      );
+      openmct.install(clearDataPlugin);
+
+      clearDataAction = openmct.actions.getAction('clear-data-action');
+      testViewObject = [
+        {
+          identifier: {
+            key: 'foo-table',
+            namespace: ''
+          },
+          type: 'table'
+        }
+      ];
+      openmct.router.path = testViewObject;
+      mockObjectPath = [
+        {
+          name: 'Mock Table',
+          type: 'table',
+          identifier: {
+            key: 'foo-table',
+            namespace: ''
+          }
+        }
+      ];
+      selection = [
+        {
+          context: {
+            item: mockObjectPath[0]
+          }
+        }
+      ];
+
+      openmct.selection.select(selection);
+
+      openmct.on('start', done);
+      openmct.startHeadless();
+    });
+
+    afterEach(() => {
+      openmct.router.path = null;
+
+      return resetApplicationState(openmct);
+    });
+    it('is installed', () => {
+      expect(clearDataAction).toBeDefined();
+    });
+
+    it('is applicable on applicable objects', () => {
+      const gatheredActions = openmct.actions.getActionsCollection(mockObjectPath);
+      expect(gatheredActions.applicableActions['clear-data-action']).toBeDefined();
+    });
+
+    it('is not applicable on inapplicable objects', () => {
+      testViewObject = [
+        {
+          identifier: {
+            key: 'foo-widget',
+            namespace: ''
+          },
+          type: 'widget'
+        }
+      ];
+      mockObjectPath = [
+        {
+          name: 'Mock Widget',
+          type: 'widget',
+          identifier: {
+            key: 'foo-widget',
+            namespace: ''
+          }
+        }
+      ];
+      selection = [
+        {
+          context: {
+            item: mockObjectPath[0]
+          }
+        }
+      ];
+      openmct.selection.select(selection);
+      const gatheredActions = openmct.actions.getActionsCollection(mockObjectPath);
+      expect(gatheredActions.applicableActions['clear-data-action']).toBeUndefined();
+    });
+
+    it('is not applicable if object not in the selection path and not a layout', () => {
+      selection = [
+        {
+          context: {
+            item: {
+              name: 'Some Random Widget',
+              type: 'not-in-path-widget',
+              identifier: {
+                key: 'something-else-widget',
+                namespace: ''
+              }
+            }
+          }
+        }
+      ];
+      openmct.selection.select(selection);
+      const gatheredActions = openmct.actions.getActionsCollection(mockObjectPath);
+      expect(gatheredActions.applicableActions['clear-data-action']).toBeUndefined();
+    });
+
+    it('is applicable if object not in the selection path and is a layout', () => {
+      selection = [
+        {
+          context: {
+            item: {
+              name: 'Some Random Widget',
+              type: 'not-in-path-widget',
+              identifier: {
+                key: 'something-else-widget',
+                namespace: ''
+              }
+            }
+          }
+        }
+      ];
+
+      openmct.selection.select(selection);
+
+      testViewObject = [
+        {
+          identifier: {
+            key: 'foo-layout',
+            namespace: ''
+          },
+          type: 'layout'
+        }
+      ];
+      openmct.router.path = testViewObject;
+      const gatheredActions = openmct.actions.getActionsCollection(mockObjectPath);
+      expect(gatheredActions.applicableActions['clear-data-action']).toBeDefined();
+    });
+
+    it('fires an event upon invocation', (done) => {
+      openmct.objectViews.on('clearData', (domainObject) => {
+        expect(domainObject).toEqual(testViewObject[0]);
+        done();
+      });
+      clearDataAction.invoke(testViewObject);
+    });
+  });
+
+  describe('The clear data indicator:', () => {
+    let openmct;
+    let appHolder;
+
+    beforeEach((done) => {
+      openmct = createOpenMct();
+
+      clearDataPlugin = new ClearDataPlugin(
+        ['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked', 'example.imagery'],
+        {
+          indicator: true
+        }
+      );
+      openmct.install(clearDataPlugin);
+      appHolder = document.createElement('div');
+      document.body.appendChild(appHolder);
+      openmct.on('start', done);
+      openmct.start(appHolder);
+    });
+
+    it('installs', () => {
+      const globalClearIndicator = openmct.indicators.indicatorObjects.find(
+        (indicator) => indicator.key === 'global-clear-indicator'
+      ).vueComponent;
+      expect(globalClearIndicator).toBeDefined();
+    });
+
+    it('renders its major elements', () => {
+      const indicatorClass = appHolder.querySelector('.c-indicator');
+      const iconClass = appHolder.querySelector('.icon-clear-data');
+      const indicatorLabel = appHolder.querySelector('.c-indicator__label');
+      const buttonElement = indicatorLabel.querySelector('button');
+      const hasMajorElements = Boolean(indicatorClass && iconClass && buttonElement);
+
+      expect(hasMajorElements).toBe(true);
+      expect(buttonElement.innerText).toEqual('Clear Data');
+    });
+
+    it('clicking the button fires the global clear', (done) => {
+      const indicatorLabel = appHolder.querySelector('.c-indicator__label');
+      const buttonElement = indicatorLabel.querySelector('button');
+      const clickEvent = createMouseEvent('click');
+      openmct.objectViews.on('clearData', done);
+      buttonElement.dispatchEvent(clickEvent);
+    });
+  });
+});
diff --git a/src/plugins/clearData/test/clearDataActionSpec.js b/src/plugins/clearData/test/clearDataActionSpec.js
deleted file mode 100644
index 95d372d4c82..00000000000
--- a/src/plugins/clearData/test/clearDataActionSpec.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-import ClearDataActionPlugin from '../plugin.js';
-import ClearDataAction from '../clearDataAction.js';
-
-describe('When the Clear Data Plugin is installed,', function () {
-    const mockObjectViews = jasmine.createSpyObj('objectViews', ['emit']);
-    const mockIndicatorProvider = jasmine.createSpyObj('indicators', ['add']);
-    const mockActionsProvider = jasmine.createSpyObj('actions', ['register']);
-
-    const openmct = {
-        objectViews: mockObjectViews,
-        indicators: mockIndicatorProvider,
-        actions: mockActionsProvider,
-        install: function (plugin) {
-            plugin(this);
-        }
-    };
-
-    const mockObjectPath = [
-        {name: 'mockObject1'},
-        {name: 'mockObject2'}
-    ];
-
-    it('Global Clear Indicator is installed', function () {
-        openmct.install(ClearDataActionPlugin([]));
-
-        expect(mockIndicatorProvider.add).toHaveBeenCalled();
-    });
-
-    it('Clear Data context menu action is installed', function () {
-        openmct.install(ClearDataActionPlugin([]));
-
-        expect(mockActionsProvider.register).toHaveBeenCalled();
-    });
-
-    it('clear data action emits a clearData event when invoked', function () {
-        let action = new ClearDataAction(openmct);
-
-        action.invoke(mockObjectPath);
-
-        expect(mockObjectViews.emit).toHaveBeenCalledWith('clearData', mockObjectPath[0]);
-    });
-});
diff --git a/src/plugins/clock/ClockViewProvider.js b/src/plugins/clock/ClockViewProvider.js
new file mode 100644
index 00000000000..8d62e976e64
--- /dev/null
+++ b/src/plugins/clock/ClockViewProvider.js
@@ -0,0 +1,68 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
+
+import Clock from './components/ClockComponent.vue';
+
+export default function ClockViewProvider(openmct) {
+  return {
+    key: 'clock.view',
+    name: 'Clock',
+    cssClass: 'icon-clock',
+    canView(domainObject) {
+      return domainObject.type === 'clock';
+    },
+
+    view: function (domainObject) {
+      let _destroy = null;
+
+      return {
+        show: function (element) {
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                Clock
+              },
+              provide: {
+                openmct,
+                domainObject
+              },
+              template: '<clock />'
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+        },
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
+        }
+      };
+    }
+  };
+}
diff --git a/src/plugins/clock/components/ClockComponent.vue b/src/plugins/clock/components/ClockComponent.vue
new file mode 100644
index 00000000000..8d2787f00ac
--- /dev/null
+++ b/src/plugins/clock/components/ClockComponent.vue
@@ -0,0 +1,113 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="u-contents">
+    <div
+      role="status"
+      aria-live="polite"
+      aria-atomic="true"
+      aria-label="Clock"
+      class="c-clock l-time-display u-style-receiver js-style-receiver"
+    >
+      <div class="c-clock__timezone">
+        {{ timeZoneAbbr }}
+      </div>
+      <div class="c-clock__value">
+        {{ timeTextValue }}
+      </div>
+      <div class="c-clock__ampm">
+        {{ timeAmPm }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment';
+import momentTimezone from 'moment-timezone';
+import raf from 'utils/raf';
+
+export default {
+  inject: ['openmct', 'domainObject'],
+  data() {
+    return {
+      configuration: this.domainObject.configuration,
+      lastTimestamp: this.openmct.time.now()
+    };
+  },
+  computed: {
+    baseFormat() {
+      return this.configuration.baseFormat;
+    },
+    use24() {
+      return this.configuration.use24 === 'clock24';
+    },
+    timezone() {
+      return this.configuration.timezone;
+    },
+    timeFormat() {
+      return this.use24 ? this.baseFormat.replace('hh', 'HH') : this.baseFormat;
+    },
+    zoneName() {
+      return momentTimezone.tz.names().includes(this.timezone) ? this.timezone : 'UTC';
+    },
+    momentTime() {
+      return this.zoneName
+        ? moment.utc(this.lastTimestamp).tz(this.zoneName)
+        : moment.utc(this.lastTimestamp);
+    },
+    timeZoneAbbr() {
+      return this.momentTime.zoneAbbr();
+    },
+    timeTextValue() {
+      return this.timeFormat && this.momentTime.format(this.timeFormat);
+    },
+    timeAmPm() {
+      return this.use24 ? '' : this.momentTime.format('A');
+    }
+  },
+  mounted() {
+    this.unobserve = this.openmct.objects.observe(
+      this.domainObject,
+      'configuration',
+      (configuration) => {
+        this.configuration = configuration;
+      }
+    );
+    this.tick = raf(this.tick);
+    this.openmct.time.on('tick', this.tick);
+  },
+  beforeUnmount() {
+    if (this.unobserve) {
+      this.unobserve();
+    }
+
+    this.openmct.time.off('tick', this.tick);
+  },
+  methods: {
+    tick(timestamp) {
+      this.lastTimestamp = timestamp;
+    }
+  }
+};
+</script>
diff --git a/src/plugins/clock/components/ClockIndicator.vue b/src/plugins/clock/components/ClockIndicator.vue
new file mode 100644
index 00000000000..2342679da3a
--- /dev/null
+++ b/src/plugins/clock/components/ClockIndicator.vue
@@ -0,0 +1,73 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div
+    aria-label="Clock Indicator"
+    class="c-indicator t-indicator-clock icon-clock no-minify c-indicator--not-clickable"
+    role="complementary"
+  >
+    <span class="label c-indicator__label">
+      {{ timeTextValue }}
+    </span>
+  </div>
+</template>
+
+<script>
+import moment from 'moment';
+import raf from 'utils/raf';
+
+export default {
+  inject: ['openmct'],
+  props: {
+    indicatorFormat: {
+      type: String,
+      default: 'YYYY/MM/DD HH:mm:ss'
+    }
+  },
+  data() {
+    return {
+      timestamp: this.openmct.time.getClock() ? this.openmct.time.now() : undefined
+    };
+  },
+  computed: {
+    timeTextValue() {
+      return `${moment.utc(this.timestamp).format(this.indicatorFormat)} ${
+        this.openmct.time.getTimeSystem().name
+      }`;
+    }
+  },
+  mounted() {
+    this.tick = raf(this.tick);
+    this.openmct.time.on('tick', this.tick);
+    this.tick(this.timestamp);
+  },
+  beforeUnmount() {
+    this.openmct.time.off('tick', this.tick);
+  },
+  methods: {
+    tick(timestamp) {
+      this.timestamp = timestamp;
+    }
+  }
+};
+</script>
diff --git a/src/plugins/clock/plugin.js b/src/plugins/clock/plugin.js
new file mode 100644
index 00000000000..18e30b7f6d1
--- /dev/null
+++ b/src/plugins/clock/plugin.js
@@ -0,0 +1,129 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import momentTimezone from 'moment-timezone';
+
+import ClockViewProvider from './ClockViewProvider.js';
+import ClockIndicator from './components/ClockIndicator.vue';
+
+export default function ClockPlugin(options) {
+  return function install(openmct) {
+    openmct.types.addType('clock', {
+      name: 'Clock',
+      description:
+        'A digital clock that uses system time and supports a variety of display formats and timezones.',
+      creatable: true,
+      cssClass: 'icon-clock',
+      initialize: function (domainObject) {
+        domainObject.configuration = {
+          baseFormat: 'YYYY/MM/DD hh:mm:ss',
+          use24: 'clock12',
+          timezone: 'UTC'
+        };
+      },
+      form: [
+        {
+          key: 'displayFormat',
+          name: 'Display Format',
+          control: 'select',
+          options: [
+            {
+              value: 'YYYY/MM/DD hh:mm:ss',
+              name: 'YYYY/MM/DD hh:mm:ss'
+            },
+            {
+              value: 'YYYY/DDD hh:mm:ss',
+              name: 'YYYY/DDD hh:mm:ss'
+            },
+            {
+              value: 'hh:mm:ss',
+              name: 'hh:mm:ss'
+            }
+          ],
+          cssClass: 'l-inline',
+          property: ['configuration', 'baseFormat']
+        },
+        {
+          ariaLabel: '12 or 24 hour clock',
+          control: 'select',
+          options: [
+            {
+              value: 'clock12',
+              name: '12hr'
+            },
+            {
+              value: 'clock24',
+              name: '24hr'
+            }
+          ],
+          cssClass: 'l-inline',
+          property: ['configuration', 'use24']
+        },
+        {
+          key: 'timezone',
+          name: 'Timezone',
+          control: 'autocomplete',
+          cssClass: 'c-clock__timezone-selection c-menu--no-icon',
+          options: momentTimezone.tz.names(),
+          property: ['configuration', 'timezone']
+        }
+      ]
+    });
+    openmct.objectViews.addProvider(new ClockViewProvider(openmct));
+
+    if (options?.enableClockIndicator === true) {
+      const indicator = {
+        vueComponent: ClockIndicator,
+        key: 'clock-indicator',
+        priority: openmct.priority.LOW
+      };
+      openmct.indicators.add(indicator);
+    }
+
+    openmct.objects.addGetInterceptor({
+      appliesTo: (identifier, domainObject) => {
+        return domainObject && domainObject.type === 'clock';
+      },
+      invoke: (identifier, domainObject) => {
+        if (domainObject.configuration) {
+          return domainObject;
+        }
+
+        if (domainObject.clockFormat && domainObject.timezone) {
+          const baseFormat = domainObject.clockFormat[0];
+          const use24 = domainObject.clockFormat[1];
+          const timezone = domainObject.timezone;
+
+          domainObject.configuration = {
+            baseFormat,
+            use24,
+            timezone
+          };
+
+          openmct.objects.mutate(domainObject, 'configuration', domainObject.configuration);
+        }
+
+        return domainObject;
+      }
+    });
+  };
+}
diff --git a/src/plugins/clock/pluginSpec.js b/src/plugins/clock/pluginSpec.js
new file mode 100644
index 00000000000..bd70e0b276b
--- /dev/null
+++ b/src/plugins/clock/pluginSpec.js
@@ -0,0 +1,245 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import EventEmitter from 'EventEmitter';
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+import { nextTick } from 'vue';
+
+import clockPlugin from './plugin.js';
+
+describe('Clock plugin:', () => {
+  let openmct;
+  let clockDefinition;
+  let element;
+  let child;
+  let appHolder;
+
+  let clockDomainObject;
+
+  function setupClock(enableClockIndicator) {
+    return new Promise((resolve, reject) => {
+      clockDomainObject = {
+        identifier: {
+          key: 'clock',
+          namespace: 'test-namespace'
+        },
+        type: 'clock'
+      };
+
+      appHolder = document.createElement('div');
+      appHolder.style.width = '640px';
+      appHolder.style.height = '480px';
+      document.body.appendChild(appHolder);
+
+      openmct = createOpenMct();
+
+      element = document.createElement('div');
+      child = document.createElement('div');
+      element.appendChild(child);
+
+      openmct.install(clockPlugin({ enableClockIndicator }));
+
+      clockDefinition = openmct.types.get('clock').definition;
+      clockDefinition.initialize(clockDomainObject);
+
+      openmct.on('start', resolve);
+      openmct.start(appHolder);
+    });
+  }
+
+  describe('Clock view:', () => {
+    let clockViewProvider;
+    let clockView;
+    let clockViewObject;
+    let mutableClockObject;
+    let mockComposition;
+
+    beforeEach(async () => {
+      await setupClock(true);
+
+      clockViewObject = {
+        ...clockDomainObject,
+        id: 'test-object',
+        name: 'Clock',
+        configuration: {
+          baseFormat: 'YYYY/MM/DD hh:mm:ss',
+          use24: 'clock12',
+          timezone: 'UTC'
+        }
+      };
+
+      mockComposition = new EventEmitter();
+      // eslint-disable-next-line require-await
+      mockComposition.load = async () => {
+        return [];
+      };
+
+      spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
+      spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve(clockViewObject));
+      spyOn(openmct.objects, 'save').and.returnValue(Promise.resolve(true));
+      spyOn(openmct.objects, 'supportsMutation').and.returnValue(true);
+
+      const applicableViews = openmct.objectViews.get(clockViewObject, [clockViewObject]);
+      clockViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'clock.view');
+
+      mutableClockObject = await openmct.objects.getMutable(clockViewObject.identifier);
+
+      clockView = clockViewProvider.view(mutableClockObject);
+      clockView.show(child);
+
+      await nextTick();
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+    });
+
+    afterEach(() => {
+      clockView.destroy();
+      openmct.objects.destroyMutable(mutableClockObject);
+      if (appHolder) {
+        appHolder.remove();
+      }
+
+      return resetApplicationState(openmct);
+    });
+
+    it('has name as Clock', () => {
+      expect(clockDefinition.name).toEqual('Clock');
+    });
+
+    it('is creatable', () => {
+      expect(clockDefinition.creatable).toEqual(true);
+    });
+
+    it('provides clock view', () => {
+      expect(clockViewProvider).toBeDefined();
+    });
+
+    it('renders clock element', () => {
+      const clockElement = element.querySelectorAll('.c-clock');
+      expect(clockElement.length).toBe(1);
+    });
+
+    it('renders major elements', () => {
+      const clockElement = element.querySelector('.c-clock');
+      const timezone = clockElement.querySelector('.c-clock__timezone');
+      const time = clockElement.querySelector('.c-clock__value');
+      const amPm = clockElement.querySelector('.c-clock__ampm');
+      const hasMajorElements = Boolean(timezone && time && amPm);
+
+      expect(hasMajorElements).toBe(true);
+    });
+
+    it('renders time in UTC', () => {
+      const clockElement = element.querySelector('.c-clock');
+      const timezone = clockElement.querySelector('.c-clock__timezone').textContent.trim();
+
+      expect(timezone).toBe('UTC');
+    });
+
+    it('updates the 24 hour option in the configuration', (done) => {
+      expect(clockDomainObject.configuration.use24).toBe('clock12');
+      const new24Option = 'clock24';
+
+      openmct.objects.observe(clockViewObject, 'configuration', (changedDomainObject) => {
+        expect(changedDomainObject.use24).toBe(new24Option);
+        done();
+      });
+
+      openmct.objects.mutate(clockViewObject, 'configuration.use24', new24Option);
+    });
+
+    it('updates the timezone option in the configuration', (done) => {
+      expect(clockDomainObject.configuration.timezone).toBe('UTC');
+      const newZone = 'CST6CDT';
+
+      openmct.objects.observe(clockViewObject, 'configuration', (changedDomainObject) => {
+        expect(changedDomainObject.timezone).toBe(newZone);
+        done();
+      });
+
+      openmct.objects.mutate(clockViewObject, 'configuration.timezone', newZone);
+    });
+
+    it('updates the time format option in the configuration', (done) => {
+      expect(clockDomainObject.configuration.baseFormat).toBe('YYYY/MM/DD hh:mm:ss');
+      const newFormat = 'hh:mm:ss';
+
+      openmct.objects.observe(clockViewObject, 'configuration', (changedDomainObject) => {
+        expect(changedDomainObject.baseFormat).toBe(newFormat);
+        done();
+      });
+
+      openmct.objects.mutate(clockViewObject, 'configuration.baseFormat', newFormat);
+    });
+  });
+
+  describe('Clock Indicator view:', () => {
+    let clockIndicator;
+
+    afterEach(() => {
+      clockIndicator = undefined;
+      if (appHolder) {
+        appHolder.remove();
+      }
+
+      return resetApplicationState(openmct);
+    });
+
+    it("doesn't exist", async () => {
+      await setupClock(false);
+
+      clockIndicator = openmct.indicators.indicatorObjects.find(
+        (indicator) => indicator.key === 'clock-indicator'
+      );
+
+      const clockIndicatorMissing = clockIndicator === null || clockIndicator === undefined;
+      expect(clockIndicatorMissing).toBe(true);
+    });
+
+    it('exists', async () => {
+      await setupClock(true);
+
+      clockIndicator = openmct.indicators.indicatorObjects.find(
+        (indicator) => indicator.key === 'clock-indicator'
+      ).vueComponent;
+
+      const hasClockIndicator = clockIndicator !== null && clockIndicator !== undefined;
+      expect(hasClockIndicator).toBe(true);
+    });
+
+    it('contains text', async () => {
+      await setupClock(true);
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+
+      clockIndicator = openmct.indicators.indicatorObjects.find(
+        (indicator) => indicator.key === 'clock-indicator'
+      ).vueComponent;
+      const hasClockIndicator = clockIndicator !== null && clockIndicator !== undefined;
+      expect(hasClockIndicator).toBe(true);
+      const clockIndicatorText = appHolder
+        .querySelector('.t-indicator-clock .c-indicator__label')
+        .textContent.trim();
+      const textIncludesUTC = clockIndicatorText.includes('UTC');
+
+      expect(textIncludesUTC).toBe(true);
+    });
+  });
+});
diff --git a/src/plugins/condition/Condition.js b/src/plugins/condition/Condition.js
index 2b780db7a52..3b4999fe6bf 100644
--- a/src/plugins/condition/Condition.js
+++ b/src/plugins/condition/Condition.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,305 +21,322 @@
  *****************************************************************************/
 
 import EventEmitter from 'EventEmitter';
-import uuid from 'uuid';
-import TelemetryCriterion from "./criterion/TelemetryCriterion";
-import { evaluateResults } from './utils/evaluator';
-import { getLatestTimestamp } from './utils/time';
-import AllTelemetryCriterion from "./criterion/AllTelemetryCriterion";
-import {TRIGGER_CONJUNCTION, TRIGGER_LABEL} from "./utils/constants";
+import { v4 as uuid } from 'uuid';
+
+import AllTelemetryCriterion from './criterion/AllTelemetryCriterion.js';
+import TelemetryCriterion from './criterion/TelemetryCriterion.js';
+import { TRIGGER_CONJUNCTION, TRIGGER_LABEL } from './utils/constants.js';
+import { evaluateResults } from './utils/evaluator.js';
+import { getLatestTimestamp } from './utils/time.js';
 
 /*
-* conditionConfiguration = {
-*   id: uuid,
-*   trigger: 'any'/'all'/'not','xor',
-*   criteria: [
-*       {
-*           telemetry: '',
-*           operation: '',
-*           input: [],
-*           metadata: ''
-*       }
-*   ]
-* }
-*/
+ * conditionConfiguration = {
+ *   id: uuid,
+ *   trigger: 'any'/'all'/'not','xor',
+ *   criteria: [
+ *       {
+ *           telemetry: '',
+ *           operation: '',
+ *           input: [],
+ *           metadata: ''
+ *       }
+ *   ]
+ * }
+ */
 export default class Condition extends EventEmitter {
-
-    /**
-     * Manages criteria and emits the result of - true or false - based on criteria evaluated.
-     * @constructor
-     * @param conditionConfiguration: {id: uuid,trigger: enum, criteria: Array of {id: uuid, operation: enum, input: Array, metaDataKey: string, key: {domainObject.identifier} }
-     * @param openmct
-     * @param conditionManager
-     */
-    constructor(conditionConfiguration, openmct, conditionManager) {
-        super();
-
-        this.openmct = openmct;
-        this.conditionManager = conditionManager;
-        this.id = conditionConfiguration.id;
-        this.criteria = [];
-        this.result = undefined;
-        this.timeSystems = this.openmct.time.getAllTimeSystems();
-        if (conditionConfiguration.configuration.criteria) {
-            this.createCriteria(conditionConfiguration.configuration.criteria);
-        }
-
-        this.trigger = conditionConfiguration.configuration.trigger;
-        this.description = '';
-    }
-
-    updateResult(datum) {
-        if (!datum || !datum.id) {
-            console.log('no data received');
-
-            return;
-        }
-
-        // if all the criteria in this condition have no telemetry, we want to force the condition result to evaluate
-        if (this.hasNoTelemetry() || this.isTelemetryUsed(datum.id)) {
-
-            this.criteria.forEach(criterion => {
-                if (this.isAnyOrAllTelemetry(criterion)) {
-                    criterion.updateResult(datum, this.conditionManager.telemetryObjects);
-                } else {
-                    if (criterion.usesTelemetry(datum.id)) {
-                        criterion.updateResult(datum);
-                    }
-                }
-            });
-
-            this.result = evaluateResults(this.criteria.map(criterion => criterion.result), this.trigger);
-        }
+  /**
+   * Manages criteria and emits the result of - true or false - based on criteria evaluated.
+   * @constructor
+   * @param conditionConfiguration: {id: uuid,trigger: enum, criteria: Array of {id: uuid, operation: enum, input: Array, metaDataKey: string, key: {domainObject.identifier} }
+   * @param openmct
+   * @param conditionManager
+   */
+  constructor(conditionConfiguration, openmct, conditionManager) {
+    super();
+
+    this.openmct = openmct;
+    this.conditionManager = conditionManager;
+    this.id = conditionConfiguration.id;
+    this.criteria = [];
+    this.result = undefined;
+    this.timeSystems = this.openmct.time.getAllTimeSystems();
+    if (conditionConfiguration.configuration.criteria) {
+      this.createCriteria(conditionConfiguration.configuration.criteria);
     }
 
-    isAnyOrAllTelemetry(criterion) {
-        return (criterion.telemetry && (criterion.telemetry === 'all' || criterion.telemetry === 'any'));
-    }
-
-    hasNoTelemetry() {
-        return this.criteria.every((criterion) => {
-            return !this.isAnyOrAllTelemetry(criterion) && criterion.telemetry === '';
-        });
-    }
+    this.trigger = conditionConfiguration.configuration.trigger;
+    this.summary = '';
+    this.handleCriterionUpdated = this.handleCriterionUpdated.bind(this);
+    this.handleOldTelemetryCriterion = this.handleOldTelemetryCriterion.bind(this);
+    this.handleTelemetryStaleness = this.handleTelemetryStaleness.bind(this);
+  }
 
-    isTelemetryUsed(id) {
-        return this.criteria.some(criterion => {
-            return this.isAnyOrAllTelemetry(criterion) || criterion.usesTelemetry(id);
-        });
-    }
+  updateResult(datum) {
+    if (!datum || !datum.id) {
+      console.log('no data received');
 
-    update(conditionConfiguration) {
-        this.updateTrigger(conditionConfiguration.configuration.trigger);
-        this.updateCriteria(conditionConfiguration.configuration.criteria);
+      return;
     }
 
-    updateTrigger(trigger) {
-        if (this.trigger !== trigger) {
-            this.trigger = trigger;
+    // if all the criteria in this condition have no telemetry, we want to force the condition result to evaluate
+    if (this.hasNoTelemetry() || this.isTelemetryUsed(datum.id)) {
+      this.criteria.forEach((criterion) => {
+        if (this.isAnyOrAllTelemetry(criterion)) {
+          criterion.updateResult(datum, this.conditionManager.telemetryObjects);
+        } else {
+          if (criterion.usesTelemetry(datum.id)) {
+            criterion.updateResult(datum);
+          }
         }
-    }
+      });
 
-    generateCriterion(criterionConfiguration) {
-        return {
-            id: criterionConfiguration.id || uuid(),
-            telemetry: criterionConfiguration.telemetry || '',
-            telemetryObjects: this.conditionManager.telemetryObjects,
-            operation: criterionConfiguration.operation || '',
-            input: criterionConfiguration.input === undefined ? [] : criterionConfiguration.input,
-            metadata: criterionConfiguration.metadata || ''
-        };
+      this.result = evaluateResults(
+        this.criteria.map((criterion) => criterion.result),
+        this.trigger
+      );
     }
-
-    createCriteria(criterionConfigurations) {
-        criterionConfigurations.forEach((criterionConfiguration) => {
-            this.addCriterion(criterionConfiguration);
-        });
-        this.updateDescription();
+  }
+
+  isAnyOrAllTelemetry(criterion) {
+    return criterion.telemetry && (criterion.telemetry === 'all' || criterion.telemetry === 'any');
+  }
+
+  hasNoTelemetry() {
+    return this.criteria.every((criterion) => {
+      return !this.isAnyOrAllTelemetry(criterion) && criterion.telemetry === '';
+    });
+  }
+
+  isTelemetryUsed(id) {
+    return this.criteria.some((criterion) => {
+      return this.isAnyOrAllTelemetry(criterion) || criterion.usesTelemetry(id);
+    });
+  }
+
+  update(conditionConfiguration) {
+    this.updateTrigger(conditionConfiguration.configuration.trigger);
+    this.updateCriteria(conditionConfiguration.configuration.criteria);
+  }
+
+  updateTrigger(trigger) {
+    if (this.trigger !== trigger) {
+      this.trigger = trigger;
     }
-
-    updateCriteria(criterionConfigurations) {
-        this.destroyCriteria();
-        this.createCriteria(criterionConfigurations);
+  }
+
+  generateCriterion(criterionConfiguration) {
+    return {
+      id: criterionConfiguration.id || uuid(),
+      telemetry: criterionConfiguration.telemetry || '',
+      telemetryObjects: this.conditionManager.telemetryObjects,
+      operation: criterionConfiguration.operation || '',
+      input: criterionConfiguration.input === undefined ? [] : criterionConfiguration.input,
+      metadata: criterionConfiguration.metadata || ''
+    };
+  }
+
+  createCriteria(criterionConfigurations) {
+    criterionConfigurations.forEach((criterionConfiguration) => {
+      this.addCriterion(criterionConfiguration);
+    });
+  }
+
+  updateCriteria(criterionConfigurations) {
+    this.destroyCriteria();
+    this.createCriteria(criterionConfigurations);
+  }
+
+  updateTelemetryObjects() {
+    this.criteria.forEach((criterion) => {
+      criterion.updateTelemetryObjects(this.conditionManager.telemetryObjects);
+    });
+  }
+
+  /**
+   *  adds criterion to the condition.
+   */
+  addCriterion(criterionConfiguration) {
+    let criterion;
+    let criterionConfigurationWithId = this.generateCriterion(criterionConfiguration || null);
+    if (
+      criterionConfiguration.telemetry &&
+      (criterionConfiguration.telemetry === 'any' || criterionConfiguration.telemetry === 'all')
+    ) {
+      criterion = new AllTelemetryCriterion(criterionConfigurationWithId, this.openmct);
+    } else {
+      criterion = new TelemetryCriterion(criterionConfigurationWithId, this.openmct);
     }
 
-    updateTelemetryObjects() {
-        this.criteria.forEach((criterion) => {
-            criterion.updateTelemetryObjects(this.conditionManager.telemetryObjects);
-        });
-        this.updateDescription();
+    criterion.on('criterionUpdated', (obj) => this.handleCriterionUpdated(obj));
+    criterion.on('telemetryIsOld', (obj) => this.handleOldTelemetryCriterion(obj));
+    criterion.on('telemetryStaleness', () => this.handleTelemetryStaleness());
+    if (!this.criteria) {
+      this.criteria = [];
     }
 
-    /**
-     *  adds criterion to the condition.
-     */
-    addCriterion(criterionConfiguration) {
-        let criterion;
-        let criterionConfigurationWithId = this.generateCriterion(criterionConfiguration || null);
-        if (criterionConfiguration.telemetry && (criterionConfiguration.telemetry === 'any' || criterionConfiguration.telemetry === 'all')) {
-            criterion = new AllTelemetryCriterion(criterionConfigurationWithId, this.openmct);
-        } else {
-            criterion = new TelemetryCriterion(criterionConfigurationWithId, this.openmct);
-        }
+    this.criteria.push(criterion);
 
-        criterion.on('criterionUpdated', (obj) => this.handleCriterionUpdated(obj));
-        criterion.on('telemetryIsStale', (obj) => this.handleStaleCriterion(obj));
-        if (!this.criteria) {
-            this.criteria = [];
-        }
+    return criterionConfigurationWithId.id;
+  }
 
-        this.criteria.push(criterion);
+  findCriterion(id) {
+    let criterion;
 
-        return criterionConfigurationWithId.id;
+    for (let i = 0, ii = this.criteria.length; i < ii; i++) {
+      if (this.criteria[i].id === id) {
+        criterion = {
+          item: this.criteria[i],
+          index: i
+        };
+      }
     }
 
-    findCriterion(id) {
-        let criterion;
-
-        for (let i = 0, ii = this.criteria.length; i < ii; i++) {
-            if (this.criteria[i].id === id) {
-                criterion = {
-                    item: this.criteria[i],
-                    index: i
-                };
-            }
-        }
-
-        return criterion;
+    return criterion;
+  }
+
+  updateCriterion(id, criterionConfiguration) {
+    let found = this.findCriterion(id);
+    if (found) {
+      const newCriterionConfiguration = this.generateCriterion(criterionConfiguration);
+      let newCriterion = new TelemetryCriterion(newCriterionConfiguration, this.openmct);
+      newCriterion.on('criterionUpdated', this.handleCriterionUpdated);
+      newCriterion.on('telemetryIsOld', this.handleOldTelemetryCriterion);
+      newCriterion.on('telemetryStaleness', this.handleTelemetryStaleness);
+
+      let criterion = found.item;
+      criterion.unsubscribe();
+      criterion.off('criterionUpdated', this.handleCriterionUpdated);
+      criterion.off('telemetryIsOld', this.handleOldTelemetryCriterion);
+      newCriterion.off('telemetryStaleness', this.handleTelemetryStaleness);
+      this.criteria.splice(found.index, 1, newCriterion);
     }
-
-    updateCriterion(id, criterionConfiguration) {
-        let found = this.findCriterion(id);
-        if (found) {
-            const newCriterionConfiguration = this.generateCriterion(criterionConfiguration);
-            let newCriterion = new TelemetryCriterion(newCriterionConfiguration, this.openmct);
-            newCriterion.on('criterionUpdated', (obj) => this.handleCriterionUpdated(obj));
-            newCriterion.on('telemetryIsStale', (obj) => this.handleStaleCriterion(obj));
-
-            let criterion = found.item;
-            criterion.unsubscribe();
-            criterion.off('criterionUpdated', (obj) => this.handleCriterionUpdated(obj));
-            criterion.off('telemetryIsStale', (obj) => this.handleStaleCriterion(obj));
-            this.criteria.splice(found.index, 1, newCriterion);
-            this.updateDescription();
-        }
+  }
+
+  destroyCriterion(id) {
+    let found = this.findCriterion(id);
+    if (found) {
+      let criterion = found.item;
+      criterion.off('criterionUpdated', this.handleCriterionUpdated);
+      criterion.off('telemetryIsOld', this.handleOldTelemetryCriterion);
+      criterion.off('telemetryStaleness', this.handleTelemetryStaleness);
+      criterion.destroy();
+      this.criteria.splice(found.index, 1);
+
+      return true;
     }
 
-    destroyCriterion(id) {
-        let found = this.findCriterion(id);
-        if (found) {
-            let criterion = found.item;
-            criterion.off('criterionUpdated', (obj) => {
-                this.handleCriterionUpdated(obj);
-            });
-            criterion.off('telemetryIsStale', (obj) => {
-                this.handleStaleCriterion(obj);
-            });
-            criterion.destroy();
-            this.criteria.splice(found.index, 1);
-            this.updateDescription();
-
-            return true;
-        }
+    return false;
+  }
 
-        return false;
+  handleCriterionUpdated(criterion) {
+    let found = this.findCriterion(criterion.id);
+    if (found) {
+      this.criteria[found.index] = criterion.data;
     }
-
-    handleCriterionUpdated(criterion) {
-        let found = this.findCriterion(criterion.id);
-        if (found) {
-            this.criteria[found.index] = criterion.data;
-            this.updateDescription();
-        }
+  }
+
+  handleOldTelemetryCriterion(updatedCriterion) {
+    this.result = evaluateResults(
+      this.criteria.map((criterion) => criterion.result),
+      this.trigger
+    );
+    let latestTimestamp = {};
+    latestTimestamp = getLatestTimestamp(
+      latestTimestamp,
+      updatedCriterion.data,
+      this.timeSystems,
+      this.openmct.time.timeSystem()
+    );
+    this.conditionManager.updateCurrentCondition(latestTimestamp);
+  }
+
+  handleTelemetryStaleness() {
+    this.result = evaluateResults(
+      this.criteria.map((criterion) => criterion.result),
+      this.trigger
+    );
+    this.conditionManager.updateCurrentCondition();
+  }
+
+  updateDescription() {
+    const triggerDescription = this.getTriggerDescription();
+    let description = '';
+    this.criteria.forEach((criterion, index) => {
+      if (!index) {
+        description = `Match if ${triggerDescription.prefix}`;
+      }
+
+      description = `${description} ${criterion.getDescription()} ${
+        index < this.criteria.length - 1 ? triggerDescription.conjunction : ''
+      }`;
+    });
+    this.summary = description;
+  }
+
+  getTriggerDescription() {
+    if (this.trigger) {
+      return {
+        conjunction: TRIGGER_CONJUNCTION[this.trigger],
+        prefix: `${TRIGGER_LABEL[this.trigger]}: `
+      };
+    } else {
+      return {
+        conjunction: '',
+        prefix: ''
+      };
     }
+  }
+
+  requestLADConditionResult(options) {
+    let latestTimestamp;
+    let criteriaResults = {};
+    const criteriaRequests = this.criteria.map((criterion) =>
+      criterion.requestLAD(this.conditionManager.telemetryObjects, options)
+    );
+
+    return Promise.all(criteriaRequests).then((results) => {
+      results.forEach((resultObj) => {
+        const {
+          id,
+          data,
+          data: { result }
+        } = resultObj;
+        if (this.findCriterion(id)) {
+          criteriaResults[id] = Boolean(result);
+        }
 
-    handleStaleCriterion(updatedCriterion) {
-        this.result = evaluateResults(this.criteria.map(criterion => criterion.result), this.trigger);
-        let latestTimestamp = {};
         latestTimestamp = getLatestTimestamp(
-            latestTimestamp,
-            updatedCriterion.data,
-            this.timeSystems,
-            this.openmct.time.timeSystem()
+          latestTimestamp,
+          data,
+          this.timeSystems,
+          this.openmct.time.timeSystem()
         );
-        this.conditionManager.updateCurrentCondition(latestTimestamp);
-    }
-
-    updateDescription() {
-        const triggerDescription = this.getTriggerDescription();
-        let description = '';
-        this.criteria.forEach((criterion, index) => {
-            if (!index) {
-                description = `Match if ${triggerDescription.prefix}`;
-            }
-
-            description = `${description} ${criterion.getDescription()} ${(index < this.criteria.length - 1) ? triggerDescription.conjunction : ''}`;
-        });
-        this.description = description;
-        this.conditionManager.updateConditionDescription(this);
+      });
+
+      return {
+        id: this.id,
+        data: Object.assign({}, latestTimestamp, {
+          result: evaluateResults(Object.values(criteriaResults), this.trigger)
+        })
+      };
+    });
+  }
+
+  getCriteria() {
+    return this.criteria;
+  }
+
+  destroyCriteria() {
+    let success = true;
+    //looping through the array backwards since destroyCriterion modifies the criteria array
+    for (let i = this.criteria.length - 1; i >= 0; i--) {
+      success = success && this.destroyCriterion(this.criteria[i].id);
     }
 
-    getTriggerDescription() {
-        if (this.trigger) {
-            return {
-                conjunction: TRIGGER_CONJUNCTION[this.trigger],
-                prefix: `${TRIGGER_LABEL[this.trigger]}: `
-            };
-        } else {
-            return {
-                conjunction: '',
-                prefix: ''
-            };
-        }
-    }
-
-    requestLADConditionResult(options) {
-        let latestTimestamp;
-        let criteriaResults = {};
-        const criteriaRequests = this.criteria
-            .map(criterion => criterion.requestLAD(this.conditionManager.telemetryObjects, options));
-
-        return Promise.all(criteriaRequests)
-            .then(results => {
-                results.forEach(resultObj => {
-                    const { id, data, data: { result } } = resultObj;
-                    if (this.findCriterion(id)) {
-                        criteriaResults[id] = Boolean(result);
-                    }
-
-                    latestTimestamp = getLatestTimestamp(
-                        latestTimestamp,
-                        data,
-                        this.timeSystems,
-                        this.openmct.time.timeSystem()
-                    );
-                });
-
-                return {
-                    id: this.id,
-                    data: Object.assign(
-                        {},
-                        latestTimestamp,
-                        { result: evaluateResults(Object.values(criteriaResults), this.trigger) }
-                    )
-                };
-            });
-    }
-
-    getCriteria() {
-        return this.criteria;
-    }
-
-    destroyCriteria() {
-        let success = true;
-        //looping through the array backwards since destroyCriterion modifies the criteria array
-        for (let i = this.criteria.length - 1; i >= 0; i--) {
-            success = success && this.destroyCriterion(this.criteria[i].id);
-        }
+    return success;
+  }
 
-        return success;
-    }
-
-    destroy() {
-        this.destroyCriteria();
-    }
+  destroy() {
+    this.destroyCriteria();
+  }
 }
diff --git a/src/plugins/condition/ConditionManager.js b/src/plugins/condition/ConditionManager.js
index c762770c58e..39c2f4e6f0f 100644
--- a/src/plugins/condition/ConditionManager.js
+++ b/src/plugins/condition/ConditionManager.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,424 +20,495 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import Condition from "./Condition";
-import { getLatestTimestamp } from './utils/time';
-import uuid from "uuid";
 import EventEmitter from 'EventEmitter';
+import { v4 as uuid } from 'uuid';
 
-export default class ConditionManager extends EventEmitter {
-    constructor(conditionSetDomainObject, openmct) {
-        super();
-        this.openmct = openmct;
-        this.conditionSetDomainObject = conditionSetDomainObject;
-        this.timeSystems = this.openmct.time.getAllTimeSystems();
-        this.composition = this.openmct.composition.get(conditionSetDomainObject);
-        this.composition.on('add', this.subscribeToTelemetry, this);
-        this.composition.on('remove', this.unsubscribeFromTelemetry, this);
-
-        this.shouldEvaluateNewTelemetry = this.shouldEvaluateNewTelemetry.bind(this);
-
-        this.compositionLoad = this.composition.load();
-        this.subscriptions = {};
-        this.telemetryObjects = {};
-        this.testData = {
-            conditionTestInputs: this.conditionSetDomainObject.configuration.conditionTestData,
-            applied: false
-        };
-        this.initialize();
-
-        this.stopObservingForChanges = this.openmct.objects.observe(this.conditionSetDomainObject, '*', (newDomainObject) => {
-            this.conditionSetDomainObject = newDomainObject;
-        });
+import Condition from './Condition.js';
+import { getLatestTimestamp } from './utils/time.js';
 
+export default class ConditionManager extends EventEmitter {
+  constructor(conditionSetDomainObject, openmct) {
+    super();
+    this.openmct = openmct;
+    this.conditionSetDomainObject = conditionSetDomainObject;
+    this.timeSystems = this.openmct.time.getAllTimeSystems();
+    this.composition = this.openmct.composition.get(conditionSetDomainObject);
+    this.composition.on('add', this.subscribeToTelemetry, this);
+    this.composition.on('remove', this.unsubscribeFromTelemetry, this);
+
+    this.shouldEvaluateNewTelemetry = this.shouldEvaluateNewTelemetry.bind(this);
+
+    this.compositionLoad = this.composition.load();
+    this.subscriptions = {};
+    this.telemetryObjects = {};
+    this.testData = {
+      conditionTestInputs: this.conditionSetDomainObject.configuration.conditionTestData,
+      applied: false
+    };
+    this.initialize();
+
+    this.stopObservingForChanges = this.openmct.objects.observe(
+      this.conditionSetDomainObject,
+      '*',
+      (newDomainObject) => {
+        this.conditionSetDomainObject = newDomainObject;
+      }
+    );
+  }
+
+  subscribeToTelemetry(endpoint) {
+    const id = this.openmct.objects.makeKeyString(endpoint.identifier);
+    if (this.subscriptions[id]) {
+      console.log('subscription already exists');
+
+      return;
     }
 
-    subscribeToTelemetry(endpoint) {
-        const id = this.openmct.objects.makeKeyString(endpoint.identifier);
-        if (this.subscriptions[id]) {
-            console.log('subscription already exists');
+    const metadata = this.openmct.telemetry.getMetadata(endpoint);
 
-            return;
-        }
+    this.telemetryObjects[id] = Object.assign({}, endpoint, {
+      telemetryMetaData: metadata ? metadata.valueMetadatas : []
+    });
+    this.subscriptions[id] = this.openmct.telemetry.subscribe(
+      endpoint,
+      this.telemetryReceived.bind(this, endpoint)
+    );
+    this.updateConditionTelemetryObjects();
+  }
 
-        const metadata = this.openmct.telemetry.getMetadata(endpoint);
+  unsubscribeFromTelemetry(endpointIdentifier) {
+    const id = this.openmct.objects.makeKeyString(endpointIdentifier);
+    if (!this.subscriptions[id]) {
+      console.log('no subscription to remove');
 
-        this.telemetryObjects[id] = Object.assign({}, endpoint, {telemetryMetaData: metadata ? metadata.valueMetadatas : []});
-        this.subscriptions[id] = this.openmct.telemetry.subscribe(
-            endpoint,
-            this.telemetryReceived.bind(this, endpoint)
-        );
-        this.updateConditionTelemetryObjects();
+      return;
     }
 
-    unsubscribeFromTelemetry(endpointIdentifier) {
-        const id = this.openmct.objects.makeKeyString(endpointIdentifier);
-        if (!this.subscriptions[id]) {
-            console.log('no subscription to remove');
-
-            return;
-        }
-
-        this.subscriptions[id]();
-        delete this.subscriptions[id];
-        delete this.telemetryObjects[id];
-        this.removeConditionTelemetryObjects();
-
-        //force re-computation of condition set result as we might be in a state where
-        // there is no telemetry datum coming in for a while or at all.
-        let latestTimestamp = getLatestTimestamp(
-            {},
-            {},
-            this.timeSystems,
-            this.openmct.time.timeSystem()
-        );
-        this.updateConditionResults({id: id});
-        this.updateCurrentCondition(latestTimestamp);
+    this.subscriptions[id]();
+    delete this.subscriptions[id];
+    delete this.telemetryObjects[id];
+    this.removeConditionTelemetryObjects();
+
+    //force re-computation of condition set result as we might be in a state where
+    // there is no telemetry datum coming in for a while or at all.
+    let latestTimestamp = getLatestTimestamp(
+      {},
+      {},
+      this.timeSystems,
+      this.openmct.time.timeSystem()
+    );
+    this.updateConditionResults({ id: id });
+    this.updateCurrentCondition(latestTimestamp);
+
+    if (Object.keys(this.telemetryObjects).length === 0) {
+      // no telemetry objects
+      this.emit('noTelemetryObjects');
     }
-
-    initialize() {
-        this.conditions = [];
-        if (this.conditionSetDomainObject.configuration.conditionCollection.length) {
-            this.conditionSetDomainObject.configuration.conditionCollection.forEach((conditionConfiguration, index) => {
-                this.initCondition(conditionConfiguration, index);
-            });
+  }
+
+  initialize() {
+    this.conditions = [];
+    if (this.conditionSetDomainObject.configuration.conditionCollection.length) {
+      this.conditionSetDomainObject.configuration.conditionCollection.forEach(
+        (conditionConfiguration, index) => {
+          this.initCondition(conditionConfiguration, index);
         }
+      );
     }
 
-    updateConditionTelemetryObjects() {
-        this.conditions.forEach((condition) => condition.updateTelemetryObjects());
+    if (Object.keys(this.telemetryObjects).length === 0) {
+      // no telemetry objects
+      this.emit('noTelemetryObjects');
     }
-
-    removeConditionTelemetryObjects() {
-        let conditionsChanged = false;
-        this.conditionSetDomainObject.configuration.conditionCollection.forEach((conditionConfiguration, conditionIndex) => {
-            let conditionChanged = false;
-            conditionConfiguration.configuration.criteria.forEach((criterion, index) => {
-                const isAnyAllTelemetry = criterion.telemetry && (criterion.telemetry === 'any' || criterion.telemetry === 'all');
-                if (!isAnyAllTelemetry) {
-                    const found = Object.values(this.telemetryObjects).find((telemetryObject) => {
-                        return this.openmct.objects.areIdsEqual(telemetryObject.identifier, criterion.telemetry);
-                    });
-                    if (!found) {
-                        criterion.telemetry = '';
-                        criterion.metadata = '';
-                        criterion.input = [];
-                        criterion.operation = '';
-                        conditionChanged = true;
-                    }
-                } else {
-                    conditionChanged = true;
-                }
+  }
+
+  updateConditionTelemetryObjects() {
+    this.conditions.forEach((condition) => {
+      condition.updateTelemetryObjects();
+      let index = this.conditionSetDomainObject.configuration.conditionCollection.findIndex(
+        (item) => item.id === condition.id
+      );
+      if (index > -1) {
+        //Only assign the summary, don't mutate the domain object
+        this.conditionSetDomainObject.configuration.conditionCollection[index].summary =
+          this.updateConditionDescription(condition);
+      }
+    });
+  }
+
+  removeConditionTelemetryObjects() {
+    let conditionsChanged = false;
+    this.conditionSetDomainObject.configuration.conditionCollection.forEach(
+      (conditionConfiguration, conditionIndex) => {
+        let conditionChanged = false;
+        conditionConfiguration.configuration.criteria.forEach((criterion, index) => {
+          const isAnyAllTelemetry =
+            criterion.telemetry && (criterion.telemetry === 'any' || criterion.telemetry === 'all');
+          if (!isAnyAllTelemetry) {
+            const found = Object.values(this.telemetryObjects).find((telemetryObject) => {
+              return this.openmct.objects.areIdsEqual(
+                telemetryObject.identifier,
+                criterion.telemetry
+              );
             });
-            if (conditionChanged) {
-                this.updateCondition(conditionConfiguration, conditionIndex);
-                conditionsChanged = true;
+            if (!found) {
+              criterion.telemetry = '';
+              criterion.metadata = '';
+              criterion.input = [];
+              criterion.operation = '';
+              conditionChanged = true;
             }
+          } else {
+            conditionChanged = true;
+          }
         });
-        if (conditionsChanged) {
-            this.persistConditions();
+        if (conditionChanged) {
+          this.updateCondition(conditionConfiguration, conditionIndex);
+          conditionsChanged = true;
         }
+      }
+    );
+    if (conditionsChanged) {
+      this.persistConditions();
     }
+  }
 
-    updateCondition(conditionConfiguration) {
-        let condition = this.findConditionById(conditionConfiguration.id);
-        if (condition) {
-            condition.update(conditionConfiguration);
-        }
-
-        let index = this.conditionSetDomainObject.configuration.conditionCollection.findIndex(item => item.id === conditionConfiguration.id);
-        if (index > -1) {
-            this.conditionSetDomainObject.configuration.conditionCollection[index] = conditionConfiguration;
-            this.persistConditions();
-        }
-    }
+  updateConditionDescription(condition) {
+    condition.updateDescription();
 
-    updateConditionDescription(condition) {
-        const found = this.conditionSetDomainObject.configuration.conditionCollection.find(conditionConfiguration => (conditionConfiguration.id === condition.id));
-        if (found.summary !== condition.description) {
-            found.summary = condition.description;
-            this.persistConditions();
-        }
-    }
+    return condition.summary;
+  }
 
-    initCondition(conditionConfiguration, index) {
-        let condition = new Condition(conditionConfiguration, this.openmct, this);
-        if (index !== undefined) {
-            this.conditions.splice(index + 1, 0, condition);
-        } else {
-            this.conditions.unshift(condition);
-        }
+  updateCondition(conditionConfiguration) {
+    let condition = this.findConditionById(conditionConfiguration.id);
+    if (condition) {
+      condition.update(conditionConfiguration);
+      conditionConfiguration.summary = this.updateConditionDescription(condition);
     }
 
-    createCondition(conditionConfiguration) {
-        let conditionObj;
-        if (conditionConfiguration) {
-            conditionObj = {
-                ...conditionConfiguration,
-                id: uuid(),
-                configuration: {
-                    ...conditionConfiguration.configuration,
-                    name: `Copy of ${conditionConfiguration.configuration.name}`
-                }
-            };
-        } else {
-            conditionObj = {
-                id: uuid(),
-                configuration: {
-                    name: 'Unnamed Condition',
-                    output: 'false',
-                    trigger: 'all',
-                    criteria: [{
-                        id: uuid(),
-                        telemetry: '',
-                        operation: '',
-                        input: [],
-                        metadata: ''
-                    }]
-                },
-                summary: ''
-            };
-        }
-
-        return conditionObj;
+    let index = this.conditionSetDomainObject.configuration.conditionCollection.findIndex(
+      (item) => item.id === conditionConfiguration.id
+    );
+    if (index > -1) {
+      this.conditionSetDomainObject.configuration.conditionCollection[index] =
+        conditionConfiguration;
+      this.persistConditions();
     }
+  }
 
-    addCondition() {
-        this.createAndSaveCondition();
-    }
+  initCondition(conditionConfiguration, index) {
+    let condition = new Condition(conditionConfiguration, this.openmct, this);
+    conditionConfiguration.summary = this.updateConditionDescription(condition);
 
-    cloneCondition(conditionConfiguration, index) {
-        let clonedConfig = JSON.parse(JSON.stringify(conditionConfiguration));
-        clonedConfig.configuration.criteria.forEach((criterion) => criterion.id = uuid());
-        this.createAndSaveCondition(index, clonedConfig);
+    if (index !== undefined) {
+      this.conditions.splice(index + 1, 0, condition);
+    } else {
+      this.conditions.unshift(condition);
     }
-
-    createAndSaveCondition(index, conditionConfiguration) {
-        const newCondition = this.createCondition(conditionConfiguration);
-        if (index !== undefined) {
-            this.conditionSetDomainObject.configuration.conditionCollection.splice(index + 1, 0, newCondition);
-        } else {
-            this.conditionSetDomainObject.configuration.conditionCollection.unshift(newCondition);
+  }
+
+  createCondition(conditionConfiguration) {
+    let conditionObj;
+    if (conditionConfiguration) {
+      conditionObj = {
+        ...conditionConfiguration,
+        id: uuid(),
+        configuration: {
+          ...conditionConfiguration.configuration,
+          name: `Copy of ${conditionConfiguration.configuration.name}`
         }
+      };
+    } else {
+      conditionObj = {
+        id: uuid(),
+        configuration: {
+          name: 'Unnamed Condition',
+          output: 'false',
+          trigger: 'all',
+          criteria: [
+            {
+              id: uuid(),
+              telemetry: '',
+              operation: '',
+              input: [],
+              metadata: ''
+            }
+          ]
+        },
+        summary: ''
+      };
+    }
 
-        this.initCondition(newCondition, index);
-        this.persistConditions();
+    return conditionObj;
+  }
+
+  addCondition() {
+    this.createAndSaveCondition();
+  }
+
+  cloneCondition(conditionConfiguration, index) {
+    let clonedConfig = JSON.parse(JSON.stringify(conditionConfiguration));
+    clonedConfig.configuration.criteria.forEach((criterion) => (criterion.id = uuid()));
+    this.createAndSaveCondition(index, clonedConfig);
+  }
+
+  createAndSaveCondition(index, conditionConfiguration) {
+    const newCondition = this.createCondition(conditionConfiguration);
+    if (index !== undefined) {
+      this.conditionSetDomainObject.configuration.conditionCollection.splice(
+        index + 1,
+        0,
+        newCondition
+      );
+    } else {
+      this.conditionSetDomainObject.configuration.conditionCollection.unshift(newCondition);
     }
 
-    removeCondition(id) {
-        let index = this.conditions.findIndex(item => item.id === id);
-        if (index > -1) {
-            this.conditions[index].destroy();
-            this.conditions.splice(index, 1);
-        }
+    this.initCondition(newCondition, index);
+    this.persistConditions();
+  }
 
-        let conditionCollectionIndex = this.conditionSetDomainObject.configuration.conditionCollection.findIndex(item => item.id === id);
-        if (conditionCollectionIndex > -1) {
-            this.conditionSetDomainObject.configuration.conditionCollection.splice(conditionCollectionIndex, 1);
-            this.persistConditions();
-        }
+  removeCondition(id) {
+    let index = this.conditions.findIndex((item) => item.id === id);
+    if (index > -1) {
+      this.conditions[index].destroy();
+      this.conditions.splice(index, 1);
     }
 
-    findConditionById(id) {
-        return this.conditions.find(condition => condition.id === id);
+    let conditionCollectionIndex =
+      this.conditionSetDomainObject.configuration.conditionCollection.findIndex(
+        (item) => item.id === id
+      );
+    if (conditionCollectionIndex > -1) {
+      this.conditionSetDomainObject.configuration.conditionCollection.splice(
+        conditionCollectionIndex,
+        1
+      );
+      this.persistConditions();
     }
-
-    reorderConditions(reorderPlan) {
-        let oldConditions = Array.from(this.conditionSetDomainObject.configuration.conditionCollection);
-        let newCollection = [];
-        reorderPlan.forEach((reorderEvent) => {
-            let item = oldConditions[reorderEvent.oldIndex];
-            newCollection.push(item);
-        });
-        this.conditionSetDomainObject.configuration.conditionCollection = newCollection;
-        this.persistConditions();
+  }
+
+  findConditionById(id) {
+    return this.conditions.find((condition) => condition.id === id);
+  }
+
+  reorderConditions(reorderPlan) {
+    let oldConditions = Array.from(this.conditionSetDomainObject.configuration.conditionCollection);
+    let newCollection = [];
+    reorderPlan.forEach((reorderEvent) => {
+      let item = oldConditions[reorderEvent.oldIndex];
+      newCollection.push(item);
+    });
+    this.conditionSetDomainObject.configuration.conditionCollection = newCollection;
+    this.persistConditions();
+  }
+
+  getCurrentCondition() {
+    const conditionCollection = this.conditionSetDomainObject.configuration.conditionCollection;
+    let currentCondition = conditionCollection[conditionCollection.length - 1];
+
+    for (let i = 0; i < conditionCollection.length - 1; i++) {
+      const condition = this.findConditionById(conditionCollection[i].id);
+      if (condition.result) {
+        //first condition to be true wins
+        currentCondition = conditionCollection[i];
+        break;
+      }
     }
 
-    getCurrentCondition() {
-        const conditionCollection = this.conditionSetDomainObject.configuration.conditionCollection;
-        let currentCondition = conditionCollection[conditionCollection.length - 1];
+    return currentCondition;
+  }
 
-        for (let i = 0; i < conditionCollection.length - 1; i++) {
-            const condition = this.findConditionById(conditionCollection[i].id);
-            if (condition.result) {
-                //first condition to be true wins
-                currentCondition = conditionCollection[i];
-                break;
-            }
-        }
+  getCurrentConditionLAD(conditionResults) {
+    const conditionCollection = this.conditionSetDomainObject.configuration.conditionCollection;
+    let currentCondition = conditionCollection[conditionCollection.length - 1];
 
-        return currentCondition;
+    for (let i = 0; i < conditionCollection.length - 1; i++) {
+      if (conditionResults[conditionCollection[i].id]) {
+        //first condition to be true wins
+        currentCondition = conditionCollection[i];
+        break;
+      }
     }
 
-    getCurrentConditionLAD(conditionResults) {
-        const conditionCollection = this.conditionSetDomainObject.configuration.conditionCollection;
-        let currentCondition = conditionCollection[conditionCollection.length - 1];
+    return currentCondition;
+  }
 
-        for (let i = 0; i < conditionCollection.length - 1; i++) {
-            if (conditionResults[conditionCollection[i].id]) {
-                //first condition to be true wins
-                currentCondition = conditionCollection[i];
-                break;
-            }
-        }
-
-        return currentCondition;
+  requestLADConditionSetOutput(options) {
+    if (!this.conditions.length) {
+      return Promise.resolve([]);
     }
 
-    requestLADConditionSetOutput(options) {
-        if (!this.conditions.length) {
-            return Promise.resolve([]);
-        }
-
-        return this.compositionLoad.then(() => {
-            let latestTimestamp;
-            let conditionResults = {};
-            const conditionRequests = this.conditions
-                .map(condition => condition.requestLADConditionResult(options));
-
-            return Promise.all(conditionRequests)
-                .then((results) => {
-                    results.forEach(resultObj => {
-                        const { id, data, data: { result } } = resultObj;
-                        if (this.findConditionById(id)) {
-                            conditionResults[id] = Boolean(result);
-                        }
-
-                        latestTimestamp = getLatestTimestamp(
-                            latestTimestamp,
-                            data,
-                            this.timeSystems,
-                            this.openmct.time.timeSystem()
-                        );
-                    });
-
-                    if (!Object.values(latestTimestamp).some(timeSystem => timeSystem)) {
-                        return [];
-                    }
-
-                    const currentCondition = this.getCurrentConditionLAD(conditionResults);
-                    const currentOutput = Object.assign(
-                        {
-                            output: currentCondition.configuration.output,
-                            id: this.conditionSetDomainObject.identifier,
-                            conditionId: currentCondition.id
-                        },
-                        latestTimestamp
-                    );
-
-                    return [currentOutput];
-                });
+    return this.compositionLoad.then(() => {
+      let latestTimestamp;
+      let conditionResults = {};
+      let nextLegOptions = { ...options };
+      delete nextLegOptions.onPartialResponse;
+
+      const conditionRequests = this.conditions.map((condition) =>
+        condition.requestLADConditionResult(nextLegOptions)
+      );
+
+      return Promise.all(conditionRequests).then((results) => {
+        results.forEach((resultObj) => {
+          const {
+            id,
+            data,
+            data: { result }
+          } = resultObj;
+          if (this.findConditionById(id)) {
+            conditionResults[id] = Boolean(result);
+          }
+
+          latestTimestamp = getLatestTimestamp(
+            latestTimestamp,
+            data,
+            this.timeSystems,
+            this.openmct.time.timeSystem()
+          );
         });
-    }
-
-    isTelemetryUsed(endpoint) {
-        const id = this.openmct.objects.makeKeyString(endpoint.identifier);
 
-        for (let condition of this.conditions) {
-            if (condition.isTelemetryUsed(id)) {
-                return true;
-            }
+        if (!Object.values(latestTimestamp).some((timeSystem) => timeSystem)) {
+          return [];
         }
 
-        return false;
-    }
+        const currentCondition = this.getCurrentConditionLAD(conditionResults);
+        const currentOutput = Object.assign(
+          {
+            output: currentCondition.configuration.output,
+            id: this.conditionSetDomainObject.identifier,
+            conditionId: currentCondition.id
+          },
+          latestTimestamp
+        );
 
-    shouldEvaluateNewTelemetry(currentTimestamp) {
-        return this.openmct.time.bounds().end >= currentTimestamp;
-    }
+        return [currentOutput];
+      });
+    });
+  }
 
-    telemetryReceived(endpoint, datum) {
-        if (!this.isTelemetryUsed(endpoint)) {
-            return;
-        }
+  isTelemetryUsed(endpoint) {
+    const id = this.openmct.objects.makeKeyString(endpoint.identifier);
 
-        const normalizedDatum = this.createNormalizedDatum(datum, endpoint);
-        const timeSystemKey = this.openmct.time.timeSystem().key;
-        let timestamp = {};
-        const currentTimestamp = normalizedDatum[timeSystemKey];
-        timestamp[timeSystemKey] = currentTimestamp;
-        if (this.shouldEvaluateNewTelemetry(currentTimestamp)) {
-            this.updateConditionResults(normalizedDatum);
-            this.updateCurrentCondition(timestamp);
-        }
+    for (let condition of this.conditions) {
+      if (condition.isTelemetryUsed(id)) {
+        return true;
+      }
     }
 
-    updateConditionResults(normalizedDatum) {
-        //We want to stop when the first condition evaluates to true.
-        this.conditions.some((condition) => {
-            condition.updateResult(normalizedDatum);
+    return false;
+  }
 
-            return condition.result === true;
-        });
-    }
+  shouldEvaluateNewTelemetry(currentTimestamp) {
+    return this.openmct.time.getBounds().end >= currentTimestamp;
+  }
 
-    updateCurrentCondition(timestamp) {
-        const currentCondition = this.getCurrentCondition();
-
-        this.emit('conditionSetResultUpdated',
-            Object.assign(
-                {
-                    output: currentCondition.configuration.output,
-                    id: this.conditionSetDomainObject.identifier,
-                    conditionId: currentCondition.id
-                },
-                timestamp
-            )
-        );
+  telemetryReceived(endpoint, datum) {
+    if (!this.isTelemetryUsed(endpoint)) {
+      return;
     }
 
-    getTestData(metadatum) {
-        let data = undefined;
-        if (this.testData.applied) {
-            const found = this.testData.conditionTestInputs.find((testInput) => (testInput.metadata === metadatum.source));
-            if (found) {
-                data = found.value;
-            }
-        }
-
-        return data;
+    const normalizedDatum = this.createNormalizedDatum(datum, endpoint);
+    const timeSystemKey = this.openmct.time.timeSystem().key;
+    let timestamp = {};
+    const currentTimestamp = normalizedDatum[timeSystemKey];
+    timestamp[timeSystemKey] = currentTimestamp;
+    if (this.shouldEvaluateNewTelemetry(currentTimestamp)) {
+      this.updateConditionResults(normalizedDatum);
+      this.updateCurrentCondition(timestamp);
     }
-
-    createNormalizedDatum(telemetryDatum, endpoint) {
-        const id = this.openmct.objects.makeKeyString(endpoint.identifier);
-        const metadata = this.openmct.telemetry.getMetadata(endpoint).valueMetadatas;
-
-        const normalizedDatum = Object.values(metadata).reduce((datum, metadatum) => {
-            const testValue = this.getTestData(metadatum);
-            const formatter = this.openmct.telemetry.getValueFormatter(metadatum);
-            datum[metadatum.key] = testValue !== undefined ? formatter.parse(testValue) : formatter.parse(telemetryDatum[metadatum.source]);
-
-            return datum;
-        }, {});
-
-        normalizedDatum.id = id;
-
-        return normalizedDatum;
+  }
+
+  updateConditionResults(normalizedDatum) {
+    //We want to stop when the first condition evaluates to true.
+    this.conditions.some((condition) => {
+      condition.updateResult(normalizedDatum);
+
+      return condition.result === true;
+    });
+  }
+
+  updateCurrentCondition(timestamp) {
+    const currentCondition = this.getCurrentCondition();
+
+    this.emit(
+      'conditionSetResultUpdated',
+      Object.assign(
+        {
+          output: currentCondition.configuration.output,
+          id: this.conditionSetDomainObject.identifier,
+          conditionId: currentCondition.id
+        },
+        timestamp
+      )
+    );
+  }
+
+  getTestData(metadatum) {
+    let data = undefined;
+    if (this.testData.applied) {
+      const found = this.testData.conditionTestInputs.find(
+        (testInput) => testInput.metadata === metadatum.source
+      );
+      if (found) {
+        data = found.value;
+      }
     }
 
-    updateTestData(testData) {
-        if (!_.isEqual(testData, this.testData)) {
-            this.testData = testData;
-            this.openmct.objects.mutate(this.conditionSetDomainObject, 'configuration.conditionTestData', this.testData.conditionTestInputs);
-        }
+    return data;
+  }
+
+  createNormalizedDatum(telemetryDatum, endpoint) {
+    const id = this.openmct.objects.makeKeyString(endpoint.identifier);
+    const metadata = this.openmct.telemetry.getMetadata(endpoint).valueMetadatas;
+
+    const normalizedDatum = Object.values(metadata).reduce((datum, metadatum) => {
+      const testValue = this.getTestData(metadatum);
+      const formatter = this.openmct.telemetry.getValueFormatter(metadatum);
+      datum[metadatum.key] =
+        testValue !== undefined
+          ? formatter.parse(testValue)
+          : formatter.parse(telemetryDatum[metadatum.source]);
+
+      return datum;
+    }, {});
+
+    normalizedDatum.id = id;
+
+    return normalizedDatum;
+  }
+
+  updateTestData(testData) {
+    if (!_.isEqual(testData, this.testData)) {
+      this.testData = testData;
+      this.openmct.objects.mutate(
+        this.conditionSetDomainObject,
+        'configuration.conditionTestData',
+        this.testData.conditionTestInputs
+      );
     }
-
-    persistConditions() {
-        this.openmct.objects.mutate(this.conditionSetDomainObject, 'configuration.conditionCollection', this.conditionSetDomainObject.configuration.conditionCollection);
+  }
+
+  persistConditions() {
+    this.openmct.objects.mutate(
+      this.conditionSetDomainObject,
+      'configuration.conditionCollection',
+      this.conditionSetDomainObject.configuration.conditionCollection
+    );
+  }
+
+  destroy() {
+    this.composition.off('add', this.subscribeToTelemetry, this);
+    this.composition.off('remove', this.unsubscribeFromTelemetry, this);
+    Object.values(this.subscriptions).forEach((unsubscribe) => unsubscribe());
+    delete this.subscriptions;
+
+    if (this.stopObservingForChanges) {
+      this.stopObservingForChanges();
     }
 
-    destroy() {
-        this.composition.off('add', this.subscribeToTelemetry, this);
-        this.composition.off('remove', this.unsubscribeFromTelemetry, this);
-        Object.values(this.subscriptions).forEach(unsubscribe => unsubscribe());
-        delete this.subscriptions;
-
-        if (this.stopObservingForChanges) {
-            this.stopObservingForChanges();
-        }
-
-        this.conditions.forEach((condition) => {
-            condition.destroy();
-        });
-    }
+    this.conditions.forEach((condition) => {
+      condition.destroy();
+    });
+  }
 }
diff --git a/src/plugins/condition/ConditionManagerSpec.js b/src/plugins/condition/ConditionManagerSpec.js
index 66c88b83db5..f62132f415e 100644
--- a/src/plugins/condition/ConditionManagerSpec.js
+++ b/src/plugins/condition/ConditionManagerSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,196 +20,209 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import ConditionManager from './ConditionManager';
+import ConditionManager from './ConditionManager.js';
 
 describe('ConditionManager', () => {
-
-    let conditionMgr;
-    let mockListener;
-    let openmct = {};
-    let mockDefaultCondition = {
-        isDefault: true,
-        id: '1234-5678',
-        configuration: {
-            criteria: []
-        }
-    };
-    let mockCondition1 = {
-        id: '2345-6789',
-        configuration: {
-            criteria: []
-        }
-    };
-    let updatedMockCondition1 = {
-        id: '2345-6789',
-        configuration: {
-            trigger: 'xor',
-            criteria: []
-        }
-    };
-    let mockCondition2 = {
-        id: '3456-7890',
-        configuration: {
-            criteria: []
-        }
-    };
-    let conditionSetDomainObject = {
-        identifier: {
-            namespace: "",
-            key: "600a7372-8d48-4dc4-98b6-548611b1ff7e"
-        },
-        type: "conditionSet",
-        location: "mine",
-        configuration: {
-            conditionCollection: [
-                mockCondition1,
-                mockCondition2,
-                mockDefaultCondition
-            ]
-        }
-    };
-    let mockComposition;
-    let loader;
-    let mockTimeSystems;
-
-    function mockAngularComponents() {
-        let mockInjector = jasmine.createSpyObj('$injector', ['get']);
-
-        let mockInstantiate = jasmine.createSpy('mockInstantiate');
-        mockInstantiate.and.returnValue(mockInstantiate);
-
-        let mockDomainObject = {
-            useCapability: function () {
-                return mockDefaultCondition;
-            }
-        };
-        mockInstantiate.and.callFake(function () {
-            return mockDomainObject;
-        });
-        mockInjector.get.and.callFake(function (service) {
-            return {
-                'instantiate': mockInstantiate
-            }[service];
-        });
-
-        openmct.$injector = mockInjector;
+  let conditionMgr;
+  let mockListener;
+  let openmct = {};
+  let mockDefaultCondition = {
+    isDefault: true,
+    id: '1234-5678',
+    configuration: {
+      criteria: []
+    }
+  };
+  let mockCondition1 = {
+    id: '2345-6789',
+    configuration: {
+      criteria: []
+    }
+  };
+  let updatedMockCondition1 = {
+    id: '2345-6789',
+    configuration: {
+      trigger: 'xor',
+      criteria: []
+    }
+  };
+  let mockCondition2 = {
+    id: '3456-7890',
+    configuration: {
+      criteria: []
     }
+  };
+  let conditionSetDomainObject = {
+    identifier: {
+      namespace: '',
+      key: '600a7372-8d48-4dc4-98b6-548611b1ff7e'
+    },
+    type: 'conditionSet',
+    location: 'mine',
+    configuration: {
+      conditionCollection: [mockCondition1, mockCondition2, mockDefaultCondition]
+    }
+  };
+  let mockComposition;
+  let loader;
+  let mockTimeSystems;
 
-    beforeEach(function () {
-
-        mockAngularComponents();
-        mockListener = jasmine.createSpy('mockListener');
-        loader = {};
-        loader.promise = new Promise(function (resolve, reject) {
-            loader.resolve = resolve;
-            loader.reject = reject;
-        });
-
-        mockComposition = jasmine.createSpyObj('compositionCollection', [
-            'load',
-            'on',
-            'off'
-        ]);
-        mockComposition.load.and.callFake(() => {
-            setTimeout(() => {
-                loader.resolve();
-            });
-
-            return loader.promise;
-        });
-        mockComposition.on('add', mockListener);
-        mockComposition.on('remove', mockListener);
-        openmct.composition = jasmine.createSpyObj('compositionAPI', [
-            'get'
-        ]);
-        openmct.composition.get.and.returnValue(mockComposition);
-
-        openmct.objects = jasmine.createSpyObj('objects', ['get', 'makeKeyString', 'observe', 'mutate']);
-        openmct.objects.get.and.returnValues(new Promise(function (resolve, reject) {
-            resolve(conditionSetDomainObject);
-        }), new Promise(function (resolve, reject) {
-            resolve(mockCondition1);
-        }), new Promise(function (resolve, reject) {
-            resolve(mockCondition2);
-        }), new Promise(function (resolve, reject) {
-            resolve(mockDefaultCondition);
-        }));
-        openmct.objects.makeKeyString.and.returnValue(conditionSetDomainObject.identifier.key);
-        openmct.objects.observe.and.returnValue(function () {});
-        openmct.objects.mutate.and.returnValue(function () {});
-
-        mockTimeSystems = {
-            key: 'utc'
-        };
-        openmct.time = jasmine.createSpyObj('time', ['getAllTimeSystems']);
-        openmct.time.getAllTimeSystems.and.returnValue([mockTimeSystems]);
-
-        conditionMgr = new ConditionManager(conditionSetDomainObject, openmct);
-
-        conditionMgr.on('conditionSetResultUpdated', mockListener);
-        conditionMgr.on('telemetryReceived', mockListener);
-    });
+  function mockAngularComponents() {
+    let mockInjector = jasmine.createSpyObj('$injector', ['get']);
 
-    it('creates a conditionCollection with a default condition', function () {
-        expect(conditionMgr.conditionSetDomainObject.configuration.conditionCollection.length).toEqual(3);
-        let defaultConditionId = conditionMgr.conditions[2].id;
-        expect(defaultConditionId).toEqual(mockDefaultCondition.id);
-    });
+    let mockInstantiate = jasmine.createSpy('mockInstantiate');
+    mockInstantiate.and.returnValue(mockInstantiate);
 
-    it('reorders a conditionCollection', function () {
-        let reorderPlan = [{
-            oldIndex: 1,
-            newIndex: 0
-        },
-        {
-            oldIndex: 0,
-            newIndex: 1
-        },
-        {
-            oldIndex: 2,
-            newIndex: 2
-        }];
-        conditionMgr.reorderConditions(reorderPlan);
-        expect(conditionMgr.conditionSetDomainObject.configuration.conditionCollection.length).toEqual(3);
-        expect(conditionMgr.conditionSetDomainObject.configuration.conditionCollection[0].id).toEqual(mockCondition2.id);
-        expect(conditionMgr.conditionSetDomainObject.configuration.conditionCollection[1].id).toEqual(mockCondition1.id);
+    let mockDomainObject = {
+      useCapability: function () {
+        return mockDefaultCondition;
+      }
+    };
+    mockInstantiate.and.callFake(function () {
+      return mockDomainObject;
     });
-
-    it('updates the right condition after reorder', function () {
-        let reorderPlan = [{
-            oldIndex: 1,
-            newIndex: 0
-        },
-        {
-            oldIndex: 0,
-            newIndex: 1
-        },
-        {
-            oldIndex: 2,
-            newIndex: 2
-        }];
-        conditionMgr.reorderConditions(reorderPlan);
-        conditionMgr.updateCondition(updatedMockCondition1);
-        expect(conditionMgr.conditions[1].trigger).toEqual(updatedMockCondition1.configuration.trigger);
+    mockInjector.get.and.callFake(function (service) {
+      return {
+        instantiate: mockInstantiate
+      }[service];
     });
 
-    it('removes the right condition after reorder', function () {
-        let reorderPlan = [{
-            oldIndex: 1,
-            newIndex: 0
-        },
-        {
-            oldIndex: 0,
-            newIndex: 1
-        },
-        {
-            oldIndex: 2,
-            newIndex: 2
-        }];
-        conditionMgr.reorderConditions(reorderPlan);
-        conditionMgr.removeCondition(mockCondition1.id);
-        expect(conditionMgr.conditions.length).toEqual(2);
-        expect(conditionMgr.conditionSetDomainObject.configuration.conditionCollection[0].id).toEqual(mockCondition2.id);
+    openmct.$injector = mockInjector;
+  }
+
+  beforeEach(function () {
+    mockAngularComponents();
+    mockListener = jasmine.createSpy('mockListener');
+    loader = {};
+    loader.promise = new Promise(function (resolve, reject) {
+      loader.resolve = resolve;
+      loader.reject = reject;
     });
 
+    mockComposition = jasmine.createSpyObj('compositionCollection', ['load', 'on', 'off']);
+    mockComposition.load.and.callFake(() => {
+      setTimeout(() => {
+        loader.resolve();
+      });
+
+      return loader.promise;
+    });
+    mockComposition.on('add', mockListener);
+    mockComposition.on('remove', mockListener);
+    openmct.composition = jasmine.createSpyObj('compositionAPI', ['get']);
+    openmct.composition.get.and.returnValue(mockComposition);
+
+    openmct.objects = jasmine.createSpyObj('objects', [
+      'get',
+      'makeKeyString',
+      'observe',
+      'mutate'
+    ]);
+    openmct.objects.get.and.returnValues(
+      new Promise(function (resolve, reject) {
+        resolve(conditionSetDomainObject);
+      }),
+      new Promise(function (resolve, reject) {
+        resolve(mockCondition1);
+      }),
+      new Promise(function (resolve, reject) {
+        resolve(mockCondition2);
+      }),
+      new Promise(function (resolve, reject) {
+        resolve(mockDefaultCondition);
+      })
+    );
+    openmct.objects.makeKeyString.and.returnValue(conditionSetDomainObject.identifier.key);
+    openmct.objects.observe.and.returnValue(function () {});
+    openmct.objects.mutate.and.returnValue(function () {});
+
+    mockTimeSystems = {
+      key: 'utc'
+    };
+    openmct.time = jasmine.createSpyObj('time', ['getAllTimeSystems']);
+    openmct.time.getAllTimeSystems.and.returnValue([mockTimeSystems]);
+
+    conditionMgr = new ConditionManager(conditionSetDomainObject, openmct);
+
+    conditionMgr.on('conditionSetResultUpdated', mockListener);
+    conditionMgr.on('telemetryReceived', mockListener);
+  });
+
+  it('creates a conditionCollection with a default condition', function () {
+    expect(conditionMgr.conditionSetDomainObject.configuration.conditionCollection.length).toEqual(
+      3
+    );
+    let defaultConditionId = conditionMgr.conditions[2].id;
+    expect(defaultConditionId).toEqual(mockDefaultCondition.id);
+  });
+
+  it('reorders a conditionCollection', function () {
+    let reorderPlan = [
+      {
+        oldIndex: 1,
+        newIndex: 0
+      },
+      {
+        oldIndex: 0,
+        newIndex: 1
+      },
+      {
+        oldIndex: 2,
+        newIndex: 2
+      }
+    ];
+    conditionMgr.reorderConditions(reorderPlan);
+    expect(conditionMgr.conditionSetDomainObject.configuration.conditionCollection.length).toEqual(
+      3
+    );
+    expect(conditionMgr.conditionSetDomainObject.configuration.conditionCollection[0].id).toEqual(
+      mockCondition2.id
+    );
+    expect(conditionMgr.conditionSetDomainObject.configuration.conditionCollection[1].id).toEqual(
+      mockCondition1.id
+    );
+  });
+
+  it('updates the right condition after reorder', function () {
+    let reorderPlan = [
+      {
+        oldIndex: 1,
+        newIndex: 0
+      },
+      {
+        oldIndex: 0,
+        newIndex: 1
+      },
+      {
+        oldIndex: 2,
+        newIndex: 2
+      }
+    ];
+    conditionMgr.reorderConditions(reorderPlan);
+    conditionMgr.updateCondition(updatedMockCondition1);
+    expect(conditionMgr.conditions[1].trigger).toEqual(updatedMockCondition1.configuration.trigger);
+  });
+
+  it('removes the right condition after reorder', function () {
+    let reorderPlan = [
+      {
+        oldIndex: 1,
+        newIndex: 0
+      },
+      {
+        oldIndex: 0,
+        newIndex: 1
+      },
+      {
+        oldIndex: 2,
+        newIndex: 2
+      }
+    ];
+    conditionMgr.reorderConditions(reorderPlan);
+    conditionMgr.removeCondition(mockCondition1.id);
+    expect(conditionMgr.conditions.length).toEqual(2);
+    expect(conditionMgr.conditionSetDomainObject.configuration.conditionCollection[0].id).toEqual(
+      mockCondition2.id
+    );
+  });
 });
diff --git a/src/plugins/condition/ConditionSetCompositionPolicy.js b/src/plugins/condition/ConditionSetCompositionPolicy.js
index d2b6b17c833..d75141c6902 100644
--- a/src/plugins/condition/ConditionSetCompositionPolicy.js
+++ b/src/plugins/condition/ConditionSetCompositionPolicy.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,13 +21,13 @@
  *****************************************************************************/
 
 export default function ConditionSetCompositionPolicy(openmct) {
-    return {
-        allow: function (parent, child) {
-            if (parent.type === 'conditionSet' && !openmct.telemetry.isTelemetryObject(child)) {
-                return false;
-            }
+  return {
+    allow: function (parent, child) {
+      if (parent.type === 'conditionSet' && !openmct.telemetry.isTelemetryObject(child)) {
+        return false;
+      }
 
-            return true;
-        }
-    };
+      return true;
+    }
+  };
 }
diff --git a/src/plugins/condition/ConditionSetCompositionPolicySpec.js b/src/plugins/condition/ConditionSetCompositionPolicySpec.js
index 7d1cda93833..e998a744c05 100644
--- a/src/plugins/condition/ConditionSetCompositionPolicySpec.js
+++ b/src/plugins/condition/ConditionSetCompositionPolicySpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,69 +20,70 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import ConditionSetCompositionPolicy from './ConditionSetCompositionPolicy';
+import ConditionSetCompositionPolicy from './ConditionSetCompositionPolicy.js';
 
 describe('ConditionSetCompositionPolicy', () => {
+  let policy;
+  let testTelemetryObject;
+  let openmct = {};
+  let parentDomainObject;
 
-    let policy;
-    let testTelemetryObject;
-    let openmct = {};
-    let parentDomainObject;
-
-    beforeAll(function () {
-        testTelemetryObject = {
-            identifier: {
-                namespace: "",
-                key: "test-object"
-            },
-            type: "test-object",
-            name: "Test Object",
-            telemetry: {
-                values: [{
-                    key: "some-key",
-                    name: "Some attribute",
-                    hints: {
-                        domain: 1
-                    }
-                }, {
-                    key: "some-other-key",
-                    name: "Another attribute",
-                    hints: {
-                        range: 1
-                    }
-                }]
+  beforeAll(function () {
+    testTelemetryObject = {
+      identifier: {
+        namespace: '',
+        key: 'test-object'
+      },
+      type: 'test-object',
+      name: 'Test Object',
+      telemetry: {
+        values: [
+          {
+            key: 'some-key',
+            name: 'Some attribute',
+            hints: {
+              domain: 1
             }
-        };
-        openmct.objects = jasmine.createSpyObj('objects', ['get', 'makeKeyString']);
-        openmct.objects.get.and.returnValue(testTelemetryObject);
-        openmct.objects.makeKeyString.and.returnValue(testTelemetryObject.identifier.key);
-        openmct.telemetry = jasmine.createSpyObj('telemetry', ['isTelemetryObject']);
-        policy = new ConditionSetCompositionPolicy(openmct);
-        parentDomainObject = {};
-    });
-
-    it('returns true for object types that are not conditionSets', function () {
-        parentDomainObject.type = 'random';
-        openmct.telemetry.isTelemetryObject.and.returnValue(false);
-        expect(policy.allow(parentDomainObject, {})).toBe(true);
-    });
+          },
+          {
+            key: 'some-other-key',
+            name: 'Another attribute',
+            hints: {
+              range: 1
+            }
+          }
+        ]
+      }
+    };
+    openmct.objects = jasmine.createSpyObj('objects', ['get', 'makeKeyString']);
+    openmct.objects.get.and.returnValue(testTelemetryObject);
+    openmct.objects.makeKeyString.and.returnValue(testTelemetryObject.identifier.key);
+    openmct.telemetry = jasmine.createSpyObj('telemetry', ['isTelemetryObject']);
+    policy = new ConditionSetCompositionPolicy(openmct);
+    parentDomainObject = {};
+  });
 
-    it('returns false for object types that are not telemetry objects when parent is a conditionSet', function () {
-        parentDomainObject.type = 'conditionSet';
-        openmct.telemetry.isTelemetryObject.and.returnValue(false);
-        expect(policy.allow(parentDomainObject, {})).toBe(false);
-    });
+  it('returns true for object types that are not conditionSets', function () {
+    parentDomainObject.type = 'random';
+    openmct.telemetry.isTelemetryObject.and.returnValue(false);
+    expect(policy.allow(parentDomainObject, {})).toBe(true);
+  });
 
-    it('returns true for object types that are telemetry objects when parent is a conditionSet', function () {
-        parentDomainObject.type = 'conditionSet';
-        openmct.telemetry.isTelemetryObject.and.returnValue(true);
-        expect(policy.allow(parentDomainObject, testTelemetryObject)).toBe(true);
-    });
+  it('returns false for object types that are not telemetry objects when parent is a conditionSet', function () {
+    parentDomainObject.type = 'conditionSet';
+    openmct.telemetry.isTelemetryObject.and.returnValue(false);
+    expect(policy.allow(parentDomainObject, {})).toBe(false);
+  });
 
-    it('returns true for object types that are telemetry objects when parent is not a conditionSet', function () {
-        parentDomainObject.type = 'random';
-        openmct.telemetry.isTelemetryObject.and.returnValue(true);
-        expect(policy.allow(parentDomainObject, testTelemetryObject)).toBe(true);
-    });
+  it('returns true for object types that are telemetry objects when parent is a conditionSet', function () {
+    parentDomainObject.type = 'conditionSet';
+    openmct.telemetry.isTelemetryObject.and.returnValue(true);
+    expect(policy.allow(parentDomainObject, testTelemetryObject)).toBe(true);
+  });
 
+  it('returns true for object types that are telemetry objects when parent is not a conditionSet', function () {
+    parentDomainObject.type = 'random';
+    openmct.telemetry.isTelemetryObject.and.returnValue(true);
+    expect(policy.allow(parentDomainObject, testTelemetryObject)).toBe(true);
+  });
 });
diff --git a/src/plugins/condition/ConditionSetMetadataProvider.js b/src/plugins/condition/ConditionSetMetadataProvider.js
index d46aae15aa4..0d3190d49b2 100644
--- a/src/plugins/condition/ConditionSetMetadataProvider.js
+++ b/src/plugins/condition/ConditionSetMetadataProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,57 +21,56 @@
  *****************************************************************************/
 
 export default class ConditionSetMetadataProvider {
-    constructor(openmct) {
-        this.openmct = openmct;
-    }
+  constructor(openmct) {
+    this.openmct = openmct;
+  }
 
-    supportsMetadata(domainObject) {
-        return domainObject.type === 'conditionSet';
-    }
+  supportsMetadata(domainObject) {
+    return domainObject.type === 'conditionSet';
+  }
 
-    getDomains(domainObject) {
-        return this.openmct.time.getAllTimeSystems().map(function (ts, i) {
-            return {
-                key: ts.key,
-                name: ts.name,
-                format: ts.timeFormat,
-                hints: {
-                    domain: i
-                }
-            };
-        });
-    }
+  getDomains(domainObject) {
+    return this.openmct.time.getAllTimeSystems().map(function (ts, i) {
+      return {
+        key: ts.key,
+        name: ts.name,
+        format: ts.timeFormat,
+        hints: {
+          domain: i
+        }
+      };
+    });
+  }
 
-    getMetadata(domainObject) {
-        const enumerations = domainObject.configuration.conditionCollection
-            .map((condition, index) => {
-                return {
-                    string: condition.configuration.output,
-                    value: index
-                };
-            });
+  getMetadata(domainObject) {
+    const enumerations = domainObject.configuration.conditionCollection.map((condition, index) => {
+      return {
+        string: condition.configuration.output,
+        value: index
+      };
+    });
 
-        return {
-            values: this.getDomains().concat([
-                {
-                    key: "state",
-                    source: "output",
-                    name: "State",
-                    format: "enum",
-                    enumerations: enumerations,
-                    hints: {
-                        range: 1
-                    }
-                },
-                {
-                    key: "output",
-                    name: "Value",
-                    format: "string",
-                    hints: {
-                        range: 2
-                    }
-                }
-            ])
-        };
-    }
+    return {
+      values: this.getDomains().concat([
+        {
+          key: 'state',
+          source: 'output',
+          name: 'State',
+          format: 'enum',
+          enumerations: enumerations,
+          hints: {
+            range: 1
+          }
+        },
+        {
+          key: 'output',
+          name: 'Value',
+          format: 'string',
+          hints: {
+            range: 2
+          }
+        }
+      ])
+    };
+  }
 }
diff --git a/src/plugins/condition/ConditionSetTelemetryProvider.js b/src/plugins/condition/ConditionSetTelemetryProvider.js
index 55ace6e805c..3b93aace475 100644
--- a/src/plugins/condition/ConditionSetTelemetryProvider.js
+++ b/src/plugins/condition/ConditionSetTelemetryProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,69 +20,71 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import ConditionManager from './ConditionManager';
+import ConditionManager from './ConditionManager.js';
 
 export default class ConditionSetTelemetryProvider {
-    constructor(openmct) {
-        this.openmct = openmct;
-        this.conditionManagerPool = {};
-    }
-
-    isTelemetryObject(domainObject) {
-        return domainObject.type === 'conditionSet';
-    }
+  constructor(openmct) {
+    this.openmct = openmct;
+    this.conditionManagerPool = {};
+  }
 
-    supportsRequest(domainObject) {
-        return domainObject.type === 'conditionSet';
-    }
+  isTelemetryObject(domainObject) {
+    return domainObject.type === 'conditionSet';
+  }
 
-    supportsSubscribe(domainObject) {
-        return domainObject.type === 'conditionSet';
-    }
+  supportsRequest(domainObject) {
+    return domainObject.type === 'conditionSet';
+  }
 
-    request(domainObject, options) {
-        let conditionManager = this.getConditionManager(domainObject);
+  supportsSubscribe(domainObject) {
+    return domainObject.type === 'conditionSet';
+  }
 
-        return conditionManager.requestLADConditionSetOutput(options)
-            .then(latestOutput => {
-                return latestOutput;
-            });
-    }
+  request(domainObject, options) {
+    let conditionManager = this.getConditionManager(domainObject);
 
-    subscribe(domainObject, callback) {
-        let conditionManager = this.getConditionManager(domainObject);
+    return conditionManager.requestLADConditionSetOutput(options).then((latestOutput) => {
+      return latestOutput;
+    });
+  }
 
-        conditionManager.on('conditionSetResultUpdated', (data) => {
-            callback(data);
-        });
+  subscribe(domainObject, callback) {
+    let conditionManager = this.getConditionManager(domainObject);
 
-        return this.destroyConditionManager.bind(this, this.openmct.objects.makeKeyString(domainObject.identifier));
-    }
+    conditionManager.on('conditionSetResultUpdated', (data) => {
+      callback(data);
+    });
 
-    /**
-     * returns conditionManager instance for corresponding domain object
-     * creates the instance if it is not yet created
-     * @private
-     */
-    getConditionManager(domainObject) {
-        const id = this.openmct.objects.makeKeyString(domainObject.identifier);
+    return this.destroyConditionManager.bind(
+      this,
+      this.openmct.objects.makeKeyString(domainObject.identifier)
+    );
+  }
 
-        if (!this.conditionManagerPool[id]) {
-            this.conditionManagerPool[id] = new ConditionManager(domainObject, this.openmct);
-        }
+  /**
+   * returns conditionManager instance for corresponding domain object
+   * creates the instance if it is not yet created
+   * @private
+   */
+  getConditionManager(domainObject) {
+    const id = this.openmct.objects.makeKeyString(domainObject.identifier);
 
-        return this.conditionManagerPool[id];
+    if (!this.conditionManagerPool[id]) {
+      this.conditionManagerPool[id] = new ConditionManager(domainObject, this.openmct);
     }
 
-    /**
-     * cleans up and destroys conditionManager instance for corresponding domain object id
-     * can be called manually for views that only request but do not subscribe to data
-     */
-    destroyConditionManager(id) {
-        if (this.conditionManagerPool[id]) {
-            this.conditionManagerPool[id].off('conditionSetResultUpdated');
-            this.conditionManagerPool[id].destroy();
-            delete this.conditionManagerPool[id];
-        }
+    return this.conditionManagerPool[id];
+  }
+
+  /**
+   * cleans up and destroys conditionManager instance for corresponding domain object id
+   * can be called manually for views that only request but do not subscribe to data
+   */
+  destroyConditionManager(id) {
+    if (this.conditionManagerPool[id]) {
+      this.conditionManagerPool[id].off('conditionSetResultUpdated');
+      this.conditionManagerPool[id].destroy();
+      delete this.conditionManagerPool[id];
     }
+  }
 }
diff --git a/src/plugins/condition/ConditionSetViewPolicy.js b/src/plugins/condition/ConditionSetViewPolicy.js
deleted file mode 100644
index 55df5629b9e..00000000000
--- a/src/plugins/condition/ConditionSetViewPolicy.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-function ConditionSetViewPolicy() {
-}
-
-ConditionSetViewPolicy.prototype.allow = function (view, domainObject) {
-    if (domainObject.getModel().type === 'conditionSet') {
-        return view.key === 'conditionSet.view';
-    }
-
-    return true;
-};
-
-export default ConditionSetViewPolicy;
diff --git a/src/plugins/condition/ConditionSetViewProvider.js b/src/plugins/condition/ConditionSetViewProvider.js
index 68d83918fa2..70232dc05c4 100644
--- a/src/plugins/condition/ConditionSetViewProvider.js
+++ b/src/plugins/condition/ConditionSetViewProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,66 +20,81 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import mount from 'utils/mount';
+
 import ConditionSet from './components/ConditionSet.vue';
-import Vue from 'vue';
 
 const DEFAULT_VIEW_PRIORITY = 100;
 
 export default class ConditionSetViewProvider {
-    constructor(openmct) {
-        this.openmct = openmct;
-        this.name = 'Conditions View';
-        this.key = 'conditionSet.view';
-        this.cssClass = 'icon-conditional';
-    }
+  constructor(openmct) {
+    this.openmct = openmct;
+    this.name = 'Conditions View';
+    this.key = 'conditionSet.view';
+    this.cssClass = 'icon-conditional';
+  }
 
-    canView(domainObject) {
-        return domainObject.type === 'conditionSet';
-    }
+  canView(domainObject, objectPath) {
+    const isConditionSet = domainObject.type === 'conditionSet';
 
-    canEdit(domainObject) {
-        return domainObject.type === 'conditionSet';
-    }
+    return isConditionSet && this.openmct.router.isNavigatedObject(objectPath);
+  }
+
+  canEdit(domainObject, objectPath) {
+    const isConditionSet = domainObject.type === 'conditionSet';
 
-    view(domainObject, objectPath) {
-        let component;
-        const openmct = this.openmct;
+    return isConditionSet && this.openmct.router.isNavigatedObject(objectPath);
+  }
 
-        return {
-            show: (container, isEditing) => {
-                component = new Vue({
-                    el: container,
-                    components: {
-                        ConditionSet
-                    },
-                    provide: {
-                        openmct,
-                        domainObject,
-                        objectPath
-                    },
-                    data() {
-                        return {
-                            isEditing
-                        };
-                    },
-                    template: '<condition-set :isEditing="isEditing"></condition-set>'
-                });
+  view(domainObject, objectPath) {
+    let _destroy = null;
+    let component = null;
+
+    return {
+      show: (container, isEditing) => {
+        const { vNode, destroy } = mount(
+          {
+            el: container,
+            components: {
+              ConditionSet
             },
-            onEditModeChange: (isEditing) => {
-                component.isEditing = isEditing;
+            provide: {
+              openmct: this.openmct,
+              domainObject,
+              objectPath
             },
-            destroy: () => {
-                component.$destroy();
-                component = undefined;
-            }
-        };
-    }
-
-    priority(domainObject) {
-        if (domainObject.type === 'conditionSet') {
-            return Number.MAX_VALUE;
-        } else {
-            return DEFAULT_VIEW_PRIORITY;
+            data() {
+              return {
+                isEditing
+              };
+            },
+            template: '<condition-set :isEditing="isEditing"></condition-set>'
+          },
+          {
+            app: this.openmct.app,
+            element: container
+          }
+        );
+        _destroy = destroy;
+        component = vNode.componentInstance;
+      },
+      onEditModeChange: (isEditing) => {
+        component.isEditing = isEditing;
+      },
+      destroy: () => {
+        if (_destroy) {
+          _destroy();
         }
+        component = null;
+      }
+    };
+  }
+
+  priority(domainObject) {
+    if (domainObject.type === 'conditionSet') {
+      return Number.MAX_VALUE;
+    } else {
+      return DEFAULT_VIEW_PRIORITY;
     }
+  }
 }
diff --git a/src/plugins/condition/ConditionSpec.js b/src/plugins/condition/ConditionSpec.js
index 749c6993971..223d80724fb 100644
--- a/src/plugins/condition/ConditionSpec.js
+++ b/src/plugins/condition/ConditionSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,9 +20,9 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import Condition from "./Condition";
-import {TRIGGER} from "./utils/constants";
-import TelemetryCriterion from "./criterion/TelemetryCriterion";
+import Condition from './Condition.js';
+import TelemetryCriterion from './criterion/TelemetryCriterion.js';
+import { TRIGGER } from './utils/constants.js';
 
 let openmct = {};
 let testConditionDefinition;
@@ -32,153 +32,161 @@ let conditionManager;
 let mockTelemetryReceived;
 let mockTimeSystems;
 
-describe("The condition", function () {
-
-    beforeEach (() => {
-        conditionManager = jasmine.createSpyObj('conditionManager',
-            ['on', 'updateConditionDescription']
-        );
-        mockTelemetryReceived = jasmine.createSpy('listener');
-        conditionManager.on('telemetryReceived', mockTelemetryReceived);
-        conditionManager.updateConditionDescription.and.returnValue(function () {});
-
-        testTelemetryObject = {
-            identifier: {
-                namespace: "",
-                key: "test-object"
-            },
-            type: "test-object",
-            name: "Test Object",
-            telemetry: {
-                valueMetadatas: [{
-                    key: "some-key",
-                    name: "Some attribute",
-                    hints: {
-                        range: 2
-                    }
-                },
-                {
-                    key: "utc",
-                    name: "Time",
-                    format: "utc",
-                    hints: {
-                        domain: 1
-                    }
-                }, {
-                    key: "testSource",
-                    source: "value",
-                    name: "Test",
-                    format: "string"
-                }]
+describe('The condition', function () {
+  beforeEach(() => {
+    conditionManager = jasmine.createSpyObj('conditionManager', [
+      'on',
+      'updateConditionDescription'
+    ]);
+    mockTelemetryReceived = jasmine.createSpy('listener');
+    conditionManager.on('telemetryReceived', mockTelemetryReceived);
+    conditionManager.updateConditionDescription.and.returnValue(function () {});
+
+    testTelemetryObject = {
+      identifier: {
+        namespace: '',
+        key: 'test-object'
+      },
+      type: 'test-object',
+      name: 'Test Object',
+      telemetry: {
+        valueMetadatas: [
+          {
+            key: 'some-key',
+            name: 'Some attribute',
+            hints: {
+              range: 2
             }
-        };
-        conditionManager.telemetryObjects = {
-            "test-object": testTelemetryObject
-        };
-        openmct.objects = jasmine.createSpyObj('objects', ['get', 'makeKeyString']);
-        openmct.objects.get.and.returnValue(new Promise(function (resolve, reject) {
-            resolve(testTelemetryObject);
-        })); openmct.objects.makeKeyString.and.returnValue(testTelemetryObject.identifier.key);
-        openmct.telemetry = jasmine.createSpyObj('telemetry', ['isTelemetryObject', 'subscribe', 'getMetadata']);
-        openmct.telemetry.isTelemetryObject.and.returnValue(true);
-        openmct.telemetry.subscribe.and.returnValue(function () {});
-        openmct.telemetry.getMetadata.and.returnValue(testTelemetryObject.telemetry);
-
-        mockTimeSystems = {
-            key: 'utc'
-        };
-        openmct.time = jasmine.createSpyObj('time', ['getAllTimeSystems']);
-        openmct.time.getAllTimeSystems.and.returnValue([mockTimeSystems]);
-
-        testConditionDefinition = {
-            id: '123-456',
-            configuration: {
-                name: 'mock condition',
-                output: 'mock output',
-                trigger: TRIGGER.ANY,
-                criteria: [
-                    {
-                        id: '1234-5678-9999-0000',
-                        operation: 'equalTo',
-                        input: ['0'],
-                        metadata: 'value',
-                        telemetry: testTelemetryObject.identifier
-                    }
-                ]
+          },
+          {
+            key: 'utc',
+            name: 'Time',
+            format: 'utc',
+            hints: {
+              domain: 1
             }
-        };
-
-        conditionObj = new Condition(
-            testConditionDefinition,
-            openmct,
-            conditionManager
-        );
-    });
-
-    it("generates criteria with the correct properties", function () {
-        const testCriterion = testConditionDefinition.configuration.criteria[0];
-        let criterion = conditionObj.generateCriterion(testCriterion);
-        expect(criterion.id).toBeDefined();
-        expect(criterion.operation).toEqual(testCriterion.operation);
-        expect(criterion.input).toEqual(testCriterion.input);
-        expect(criterion.metadata).toEqual(testCriterion.metadata);
-        expect(criterion.telemetry).toEqual(testCriterion.telemetry);
+          },
+          {
+            key: 'testSource',
+            source: 'value',
+            name: 'Test',
+            format: 'string'
+          }
+        ]
+      }
+    };
+    conditionManager.telemetryObjects = {
+      'test-object': testTelemetryObject
+    };
+    openmct.objects = jasmine.createSpyObj('objects', ['get', 'makeKeyString']);
+    openmct.objects.get.and.returnValue(
+      new Promise(function (resolve, reject) {
+        resolve(testTelemetryObject);
+      })
+    );
+    openmct.objects.makeKeyString.and.returnValue(testTelemetryObject.identifier.key);
+    openmct.telemetry = jasmine.createSpyObj('telemetry', [
+      'isTelemetryObject',
+      'subscribe',
+      'getMetadata'
+    ]);
+    openmct.telemetry.isTelemetryObject.and.returnValue(true);
+    openmct.telemetry.subscribe.and.returnValue(function () {});
+    openmct.telemetry.getMetadata.and.returnValue(testTelemetryObject.telemetry);
+
+    mockTimeSystems = {
+      key: 'utc'
+    };
+    openmct.time = jasmine.createSpyObj('time', ['getAllTimeSystems', 'on', 'off']);
+    openmct.time.getAllTimeSystems.and.returnValue([mockTimeSystems]);
+    openmct.time.on.and.returnValue(() => {});
+    openmct.time.off.and.returnValue(() => {});
+
+    testConditionDefinition = {
+      id: '123-456',
+      configuration: {
+        name: 'mock condition',
+        output: 'mock output',
+        trigger: TRIGGER.ANY,
+        criteria: [
+          {
+            id: '1234-5678-9999-0000',
+            operation: 'equalTo',
+            input: ['0'],
+            metadata: 'value',
+            telemetry: testTelemetryObject.identifier
+          }
+        ]
+      }
+    };
+
+    conditionObj = new Condition(testConditionDefinition, openmct, conditionManager);
+  });
+
+  it('generates criteria with the correct properties', function () {
+    const testCriterion = testConditionDefinition.configuration.criteria[0];
+    let criterion = conditionObj.generateCriterion(testCriterion);
+    expect(criterion.id).toBeDefined();
+    expect(criterion.operation).toEqual(testCriterion.operation);
+    expect(criterion.input).toEqual(testCriterion.input);
+    expect(criterion.metadata).toEqual(testCriterion.metadata);
+    expect(criterion.telemetry).toEqual(testCriterion.telemetry);
+  });
+
+  it('initializes with an id', function () {
+    expect(conditionObj.id).toBeDefined();
+  });
+
+  it('initializes with criteria from the condition definition', function () {
+    expect(conditionObj.criteria.length).toEqual(1);
+    let criterion = conditionObj.criteria[0];
+    expect(criterion instanceof TelemetryCriterion).toBeTrue();
+    expect(criterion.operator).toEqual(testConditionDefinition.configuration.criteria[0].operator);
+    expect(criterion.input).toEqual(testConditionDefinition.configuration.criteria[0].input);
+    expect(criterion.metadata).toEqual(testConditionDefinition.configuration.criteria[0].metadata);
+  });
+
+  it('initializes with the trigger from the condition definition', function () {
+    expect(conditionObj.trigger).toEqual(testConditionDefinition.configuration.trigger);
+  });
+
+  it('destroys all criteria for a condition', function () {
+    const result = conditionObj.destroyCriteria();
+    expect(result).toBeTrue();
+    expect(conditionObj.criteria.length).toEqual(0);
+  });
+
+  it('gets the result of a condition when new telemetry data is received', function () {
+    conditionObj.updateResult({
+      value: '0',
+      utc: 'Hi',
+      id: testTelemetryObject.identifier.key
     });
-
-    it("initializes with an id", function () {
-        expect(conditionObj.id).toBeDefined();
+    expect(conditionObj.result).toBeTrue();
+  });
+
+  it('gets the result of a condition when new telemetry data is received', function () {
+    conditionObj.updateResult({
+      value: '1',
+      utc: 'Hi',
+      id: testTelemetryObject.identifier.key
     });
-
-    it("initializes with criteria from the condition definition", function () {
-        expect(conditionObj.criteria.length).toEqual(1);
-        let criterion = conditionObj.criteria[0];
-        expect(criterion instanceof TelemetryCriterion).toBeTrue();
-        expect(criterion.operator).toEqual(testConditionDefinition.configuration.criteria[0].operator);
-        expect(criterion.input).toEqual(testConditionDefinition.configuration.criteria[0].input);
-        expect(criterion.metadata).toEqual(testConditionDefinition.configuration.criteria[0].metadata);
-    });
-
-    it("initializes with the trigger from the condition definition", function () {
-        expect(conditionObj.trigger).toEqual(testConditionDefinition.configuration.trigger);
-    });
-
-    it("destroys all criteria for a condition", function () {
-        const result = conditionObj.destroyCriteria();
-        expect(result).toBeTrue();
-        expect(conditionObj.criteria.length).toEqual(0);
-    });
-
-    it("gets the result of a condition when new telemetry data is received", function () {
-        conditionObj.updateResult({
-            value: '0',
-            utc: 'Hi',
-            id: testTelemetryObject.identifier.key
-        });
-        expect(conditionObj.result).toBeTrue();
-    });
-
-    it("gets the result of a condition when new telemetry data is received", function () {
-        conditionObj.updateResult({
-            value: '1',
-            utc: 'Hi',
-            id: testTelemetryObject.identifier.key
-        });
-        expect(conditionObj.result).toBeFalse();
+    expect(conditionObj.result).toBeFalse();
+  });
+
+  it('keeps the old result new telemetry data is not used by it', function () {
+    conditionObj.updateResult({
+      value: '0',
+      utc: 'Hi',
+      id: testTelemetryObject.identifier.key
     });
+    expect(conditionObj.result).toBeTrue();
 
-    it("keeps the old result new telemetry data is not used by it", function () {
-        conditionObj.updateResult({
-            value: '0',
-            utc: 'Hi',
-            id: testTelemetryObject.identifier.key
-        });
-        expect(conditionObj.result).toBeTrue();
-
-        conditionObj.updateResult({
-            value: '1',
-            utc: 'Hi',
-            id: '1234'
-        });
-        expect(conditionObj.result).toBeTrue();
+    conditionObj.updateResult({
+      value: '1',
+      utc: 'Hi',
+      id: '1234'
     });
+    expect(conditionObj.result).toBeTrue();
+  });
 });
diff --git a/src/plugins/condition/StyleRuleManager.js b/src/plugins/condition/StyleRuleManager.js
index a1ab1b6d4c2..5751c6a4156 100644
--- a/src/plugins/condition/StyleRuleManager.js
+++ b/src/plugins/condition/StyleRuleManager.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -23,174 +23,203 @@
 import EventEmitter from 'EventEmitter';
 
 export default class StyleRuleManager extends EventEmitter {
-    constructor(styleConfiguration, openmct, callback, suppressSubscriptionOnEdit) {
-        super();
-        this.openmct = openmct;
-        this.callback = callback;
-        this.refreshData = this.refreshData.bind(this);
-        this.toggleSubscription = this.toggleSubscription.bind(this);
-        if (suppressSubscriptionOnEdit) {
-            this.openmct.editor.on('isEditing', this.toggleSubscription);
-            this.isEditing = this.openmct.editor.editing;
-        }
-
-        if (styleConfiguration) {
-            this.initialize(styleConfiguration);
-            if (styleConfiguration.conditionSetIdentifier) {
-                this.openmct.time.on("bounds", this.refreshData);
-                this.subscribeToConditionSet();
-            } else {
-                this.applyStaticStyle();
-            }
-        }
+  constructor(styleConfiguration, openmct, callback, suppressSubscriptionOnEdit) {
+    super();
+    this.openmct = openmct;
+    this.callback = callback;
+    this.refreshData = this.refreshData.bind(this);
+    this.toggleSubscription = this.toggleSubscription.bind(this);
+    if (suppressSubscriptionOnEdit) {
+      this.openmct.editor.on('isEditing', this.toggleSubscription);
+      this.isEditing = this.openmct.editor.editing;
     }
 
-    toggleSubscription(isEditing) {
-        this.isEditing = isEditing;
-        if (this.isEditing) {
-            if (this.stopProvidingTelemetry) {
-                this.stopProvidingTelemetry();
-                delete this.stopProvidingTelemetry;
-            }
-
-            if (this.conditionSetIdentifier) {
-                this.applySelectedConditionStyle();
-            }
-        } else if (this.conditionSetIdentifier) {
-            this.subscribeToConditionSet();
-        }
+    if (styleConfiguration) {
+      // We don't set the selectedConditionId here because we want condition set computation to happen before we apply any selected style
+      const styleConfigurationWithNoSelection = Object.assign(styleConfiguration, {
+        selectedConditionId: ''
+      });
+      this.initialize(styleConfigurationWithNoSelection);
+      if (styleConfiguration.conditionSetIdentifier) {
+        this.openmct.time.on('bounds', this.refreshData);
+        this.subscribeToConditionSet();
+      } else {
+        this.applyStaticStyle();
+      }
     }
-
-    initialize(styleConfiguration) {
-        this.conditionSetIdentifier = styleConfiguration.conditionSetIdentifier;
-        this.staticStyle = styleConfiguration.staticStyle;
-        this.selectedConditionId = styleConfiguration.selectedConditionId;
-        this.defaultConditionId = styleConfiguration.defaultConditionId;
-        this.updateConditionStylesMap(styleConfiguration.styles || []);
+  }
+
+  toggleSubscription(isEditing) {
+    this.isEditing = isEditing;
+    if (this.isEditing) {
+      if (this.stopProvidingTelemetry) {
+        this.stopProvidingTelemetry();
+        delete this.stopProvidingTelemetry;
+      }
+
+      if (this.conditionSetIdentifier) {
+        this.applySelectedConditionStyle();
+      }
+    } else if (this.conditionSetIdentifier) {
+      //reset the selected style and let the condition set output determine what it should be
+      this.selectedConditionId = undefined;
+      this.currentStyle = undefined;
+      this.updateDomainObjectStyle();
+      this.subscribeToConditionSet();
+    }
+  }
+
+  initialize(styleConfiguration) {
+    this.conditionSetIdentifier = styleConfiguration.conditionSetIdentifier;
+    this.selectedConditionId = styleConfiguration.selectedConditionId;
+    this.staticStyle = styleConfiguration.staticStyle;
+    this.defaultConditionId = styleConfiguration.defaultConditionId;
+    this.updateConditionStylesMap(styleConfiguration.styles || []);
+  }
+
+  subscribeToConditionSet() {
+    if (this.stopProvidingTelemetry) {
+      this.stopProvidingTelemetry();
+      delete this.stopProvidingTelemetry;
     }
 
-    subscribeToConditionSet() {
-        if (this.stopProvidingTelemetry) {
-            this.stopProvidingTelemetry();
-            delete this.stopProvidingTelemetry;
+    this.openmct.objects.get(this.conditionSetIdentifier).then((conditionSetDomainObject) => {
+      this.openmct.telemetry.request(conditionSetDomainObject).then((output) => {
+        if (
+          output &&
+          output.length &&
+          this.conditionSetIdentifier &&
+          this.openmct.objects.areIdsEqual(
+            conditionSetDomainObject.identifier,
+            this.conditionSetIdentifier
+          )
+        ) {
+          this.handleConditionSetResultUpdated(output[0]);
         }
-
-        this.openmct.objects.get(this.conditionSetIdentifier).then((conditionSetDomainObject) => {
-            this.openmct.telemetry.request(conditionSetDomainObject)
-                .then(output => {
-                    if (output && output.length) {
-                        this.handleConditionSetResultUpdated(output[0]);
-                    }
-                });
-            this.stopProvidingTelemetry = this.openmct.telemetry.subscribe(conditionSetDomainObject, this.handleConditionSetResultUpdated.bind(this));
+      });
+      if (
+        this.conditionSetIdentifier &&
+        this.openmct.objects.areIdsEqual(
+          conditionSetDomainObject.identifier,
+          this.conditionSetIdentifier
+        )
+      ) {
+        this.stopProvidingTelemetry = this.openmct.telemetry.subscribe(
+          conditionSetDomainObject,
+          this.handleConditionSetResultUpdated.bind(this)
+        );
+      }
+    });
+  }
+
+  refreshData(bounds, isTick) {
+    if (!isTick) {
+      let options = {
+        start: bounds.start,
+        end: bounds.end,
+        size: 1,
+        strategy: 'latest'
+      };
+      this.openmct.objects.get(this.conditionSetIdentifier).then((conditionSetDomainObject) => {
+        this.openmct.telemetry.request(conditionSetDomainObject, options).then((output) => {
+          if (output && output.length) {
+            this.handleConditionSetResultUpdated(output[0]);
+          }
         });
+      });
     }
-
-    refreshData(bounds, isTick) {
-        if (!isTick) {
-            let options = {
-                start: bounds.start,
-                end: bounds.end,
-                size: 1,
-                strategy: 'latest'
-            };
-            this.openmct.objects.get(this.conditionSetIdentifier).then((conditionSetDomainObject) => {
-                this.openmct.telemetry.request(conditionSetDomainObject, options)
-                    .then(output => {
-                        if (output && output.length) {
-                            this.handleConditionSetResultUpdated(output[0]);
-                        }
-                    });
-            });
+  }
+
+  updateObjectStyleConfig(styleConfiguration) {
+    if (!styleConfiguration || !styleConfiguration.conditionSetIdentifier) {
+      this.initialize(styleConfiguration || {});
+      this.applyStaticStyle();
+      this.destroy(true);
+    } else {
+      let isNewConditionSet =
+        !this.conditionSetIdentifier ||
+        !this.openmct.objects.areIdsEqual(
+          this.conditionSetIdentifier,
+          styleConfiguration.conditionSetIdentifier
+        );
+      this.initialize(styleConfiguration);
+      if (this.isEditing) {
+        this.applySelectedConditionStyle();
+      } else {
+        //Only resubscribe if the conditionSet has changed.
+        if (isNewConditionSet) {
+          this.subscribeToConditionSet();
         }
+      }
     }
-
-    updateObjectStyleConfig(styleConfiguration) {
-        if (!styleConfiguration || !styleConfiguration.conditionSetIdentifier) {
-            this.initialize(styleConfiguration || {});
-            this.applyStaticStyle();
-            this.destroy();
-        } else {
-            let isNewConditionSet = !this.conditionSetIdentifier
-                                    || !this.openmct.objects.areIdsEqual(this.conditionSetIdentifier, styleConfiguration.conditionSetIdentifier);
-            this.initialize(styleConfiguration);
-            if (this.isEditing) {
-                this.applySelectedConditionStyle();
-            } else {
-                //Only resubscribe if the conditionSet has changed.
-                if (isNewConditionSet) {
-                    this.subscribeToConditionSet();
-                }
-            }
-        }
+  }
+
+  updateConditionStylesMap(conditionStyles) {
+    let conditionStyleMap = {};
+    conditionStyles.forEach((conditionStyle) => {
+      if (conditionStyle.conditionId) {
+        conditionStyleMap[conditionStyle.conditionId] = conditionStyle.style;
+      } else {
+        conditionStyleMap.static = conditionStyle.style;
+      }
+    });
+    this.conditionalStyleMap = conditionStyleMap;
+  }
+
+  handleConditionSetResultUpdated(resultData) {
+    let foundStyle = this.conditionalStyleMap[resultData.conditionId];
+    if (foundStyle) {
+      if (foundStyle !== this.currentStyle) {
+        this.currentStyle = foundStyle;
+      }
+
+      this.updateDomainObjectStyle();
+    } else {
+      this.applyStaticStyle();
     }
+  }
 
-    updateConditionStylesMap(conditionStyles) {
-        let conditionStyleMap = {};
-        conditionStyles.forEach((conditionStyle) => {
-            if (conditionStyle.conditionId) {
-                conditionStyleMap[conditionStyle.conditionId] = conditionStyle.style;
-            } else {
-                conditionStyleMap.static = conditionStyle.style;
-            }
-        });
-        this.conditionalStyleMap = conditionStyleMap;
+  updateDomainObjectStyle() {
+    if (this.callback) {
+      this.callback(Object.assign({}, this.currentStyle));
     }
-
-    handleConditionSetResultUpdated(resultData) {
-        let foundStyle = this.conditionalStyleMap[resultData.conditionId];
-        if (foundStyle) {
-            if (foundStyle !== this.currentStyle) {
-                this.currentStyle = foundStyle;
-            }
-
-            this.updateDomainObjectStyle();
-        } else {
-            this.applyStaticStyle();
-        }
-    }
-
-    updateDomainObjectStyle() {
-        if (this.callback) {
-            this.callback(Object.assign({}, this.currentStyle));
-        }
+  }
+
+  applySelectedConditionStyle() {
+    const conditionId = this.selectedConditionId || this.defaultConditionId;
+    if (!conditionId) {
+      this.applyStaticStyle();
+    } else if (this.conditionalStyleMap[conditionId]) {
+      this.currentStyle = this.conditionalStyleMap[conditionId];
+      this.updateDomainObjectStyle();
     }
-
-    applySelectedConditionStyle() {
-        const conditionId = this.selectedConditionId || this.defaultConditionId;
-        if (!conditionId) {
-            this.applyStaticStyle();
-        } else if (this.conditionalStyleMap[conditionId]) {
-            this.currentStyle = this.conditionalStyleMap[conditionId];
-            this.updateDomainObjectStyle();
-        }
+  }
+
+  applyStaticStyle() {
+    if (this.staticStyle) {
+      this.currentStyle = this.staticStyle.style;
+    } else {
+      if (this.currentStyle) {
+        Object.keys(this.currentStyle).forEach((key) => {
+          this.currentStyle[key] = '__no_value';
+        });
+      }
     }
 
-    applyStaticStyle() {
-        if (this.staticStyle) {
-            this.currentStyle = this.staticStyle.style;
-        } else {
-            if (this.currentStyle) {
-                Object.keys(this.currentStyle).forEach(key => {
-                    this.currentStyle[key] = '__no_value';
-                });
-            }
-        }
+    this.updateDomainObjectStyle();
+  }
 
-        this.updateDomainObjectStyle();
+  destroy(skipEventListeners) {
+    if (this.stopProvidingTelemetry) {
+      this.stopProvidingTelemetry();
+      delete this.stopProvidingTelemetry;
     }
 
-    destroy() {
-        if (this.stopProvidingTelemetry) {
-
-            this.stopProvidingTelemetry();
-            delete this.stopProvidingTelemetry;
-        }
-
-        this.openmct.time.off("bounds", this.refreshData);
-        this.openmct.editor.off('isEditing', this.toggleSubscription);
-
-        this.conditionSetIdentifier = undefined;
+    if (!skipEventListeners) {
+      this.openmct.time.off('bounds', this.refreshData);
+      this.openmct.editor.off('isEditing', this.toggleSubscription);
     }
 
+    this.conditionSetIdentifier = undefined;
+  }
 }
diff --git a/src/plugins/condition/components/Condition.vue b/src/plugins/condition/components/Condition.vue
deleted file mode 100644
index 2d2dda3d194..00000000000
--- a/src/plugins/condition/components/Condition.vue
+++ /dev/null
@@ -1,392 +0,0 @@
-/*****************************************************************************
-* Open MCT, Copyright (c) 2014-2021, United States Government
-* as represented by the Administrator of the National Aeronautics and Space
-* Administration. All rights reserved.
-*
-* Open MCT is licensed under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-* http://www.apache.org/licenses/LICENSE-2.0.
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-* License for the specific language governing permissions and limitations
-* under the License.
-*
-* Open MCT includes source code licensed under additional open source
-* licenses. See the Open Source Licenses file (LICENSES.md) included with
-* this source code distribution or the Licensing information page available
-* at runtime from the About dialog for additional information.
-*****************************************************************************/
-
-<template>
-<div class="c-condition-h"
-     :class="{ 'is-drag-target': draggingOver }"
-     @dragover.prevent
-     @drop.prevent="dropCondition($event, conditionIndex)"
-     @dragenter="dragEnter($event, conditionIndex)"
-     @dragleave="dragLeave($event, conditionIndex)"
->
-    <div class="c-condition-h__drop-target"></div>
-    <div v-if="isEditing"
-         :class="{'is-current': condition.id === currentConditionId}"
-         class="c-condition c-condition--edit"
-    >
-        <!-- Edit view -->
-        <div class="c-condition__header">
-            <span class="c-condition__drag-grippy c-grippy c-grippy--vertical-drag"
-                  title="Drag to reorder conditions"
-                  :class="[{ 'is-enabled': !condition.isDefault }, { 'hide-nice': condition.isDefault }]"
-                  :draggable="!condition.isDefault"
-                  @dragstart="dragStart"
-                  @dragend="dragEnd"
-            ></span>
-
-            <span class="c-condition__disclosure c-disclosure-triangle c-tree__item__view-control is-enabled"
-                  :class="{ 'c-disclosure-triangle--expanded': expanded }"
-                  @click="expanded = !expanded"
-            ></span>
-
-            <span class="c-condition__name">{{ condition.configuration.name }}</span>
-            <span class="c-condition__summary">
-                <template v-if="!condition.isDefault && !canEvaluateCriteria">
-                    Define criteria
-                </template>
-                <span v-else>
-                    <condition-description :show-label="false"
-                                           :condition="condition"
-                    />
-                </span>
-            </span>
-
-            <div class="c-condition__buttons">
-                <button v-if="!condition.isDefault"
-                        class="c-click-icon c-condition__duplicate-button icon-duplicate"
-                        title="Duplicate this condition"
-                        @click="cloneCondition"
-                ></button>
-
-                <button v-if="!condition.isDefault"
-                        class="c-click-icon c-condition__delete-button icon-trash"
-                        title="Delete this condition"
-                        @click="removeCondition"
-                ></button>
-            </div>
-        </div>
-        <div v-if="expanded"
-             class="c-condition__definition c-cdef"
-        >
-            <span class="c-cdef__separator c-row-separator"></span>
-            <span class="c-cdef__label">Condition Name</span>
-            <span class="c-cdef__controls">
-                <input v-model="condition.configuration.name"
-                       class="t-condition-input__name"
-                       type="text"
-                       @change="persist"
-                >
-            </span>
-
-            <span class="c-cdef__label">Output</span>
-            <span class="c-cdef__controls">
-                <span class="c-cdef__control">
-                    <select v-model="selectedOutputSelection"
-                            @change="setOutputValue"
-                    >
-                        <option v-for="option in outputOptions"
-                                :key="option"
-                                :value="option"
-                        >
-                            {{ initCap(option) }}
-                        </option>
-                    </select>
-                </span>
-                <span class="c-cdef__control">
-                    <input v-if="selectedOutputSelection === outputOptions[2]"
-                           v-model="condition.configuration.output"
-                           class="t-condition-name-input"
-                           type="text"
-                           @change="persist"
-                    >
-                </span>
-            </span>
-
-            <div v-if="!condition.isDefault"
-                 class="c-cdef__match-and-criteria"
-            >
-                <span class="c-cdef__separator c-row-separator"></span>
-                <span class="c-cdef__label">Match</span>
-                <span class="c-cdef__controls">
-                    <select v-model="condition.configuration.trigger"
-                            @change="persist"
-                    >
-                        <option v-for="option in triggers"
-                                :key="option.value"
-                                :value="option.value"
-                        > {{ option.label }}</option>
-                    </select>
-                </span>
-
-                <template v-if="telemetry.length || condition.configuration.criteria.length">
-                    <div v-for="(criterion, index) in condition.configuration.criteria"
-                         :key="criterion.id"
-                         class="c-cdef__criteria"
-                    >
-                        <Criterion :telemetry="telemetry"
-                                   :criterion="criterion"
-                                   :index="index"
-                                   :trigger="condition.configuration.trigger"
-                                   :is-default="condition.configuration.criteria.length === 1"
-                                   @persist="persist"
-                        />
-                        <div class="c-cdef__criteria__buttons">
-                            <button class="c-click-icon c-cdef__criteria-duplicate-button icon-duplicate"
-                                    title="Duplicate this criteria"
-                                    @click="cloneCriterion(index)"
-                            ></button>
-                            <button v-if="!(condition.configuration.criteria.length === 1)"
-                                    class="c-click-icon c-cdef__criteria-duplicate-button icon-trash"
-                                    title="Delete this criteria"
-                                    @click="removeCriterion(index)"
-                            ></button>
-                        </div>
-                    </div>
-                </template>
-                <div class="c-cdef__separator c-row-separator"></div>
-                <div class="c-cdef__controls"
-                     :disabled="!telemetry.length"
-                >
-                    <button
-                        class="c-cdef__add-criteria-button c-button c-button--labeled icon-plus"
-                        @click="addCriteria"
-                    >
-                        <span class="c-button__label">Add Criteria</span>
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div v-else
-         class="c-condition c-condition--browse"
-         :class="{'is-current': condition.id === currentConditionId}"
-    >
-        <!-- Browse view -->
-        <div class="c-condition__header">
-            <span class="c-condition__name">
-                {{ condition.configuration.name }}
-            </span>
-            <span class="c-condition__output">
-                Output: {{ condition.configuration.output }}
-            </span>
-        </div>
-        <div class="c-condition__summary">
-            <condition-description :show-label="false"
-                                   :condition="condition"
-            />
-        </div>
-    </div>
-</div>
-</template>
-
-<script>
-import Criterion from './Criterion.vue';
-import ConditionDescription from "./ConditionDescription.vue";
-import { TRIGGER, TRIGGER_LABEL } from "@/plugins/condition/utils/constants";
-import uuid from 'uuid';
-
-export default {
-    components: {
-        Criterion,
-        ConditionDescription
-    },
-    inject: ['openmct'],
-    props: {
-        currentConditionId: {
-            type: String,
-            default: ''
-        },
-        condition: {
-            type: Object,
-            required: true
-        },
-        conditionIndex: {
-            type: Number,
-            required: true
-        },
-        isEditing: {
-            type: Boolean,
-            required: true,
-            default: false
-        },
-        telemetry: {
-            type: Array,
-            required: true,
-            default: () => []
-        },
-        isDragging: {
-            type: Boolean,
-            default: false
-        },
-        moveIndex: {
-            type: Number,
-            default: 0
-        }
-    },
-    data() {
-        return {
-            currentCriteria: this.currentCriteria,
-            expanded: true,
-            trigger: 'all',
-            selectedOutputSelection: '',
-            outputOptions: ['false', 'true', 'string'],
-            criterionIndex: 0,
-            draggingOver: false,
-            isDefault: this.condition.isDefault
-        };
-    },
-    computed: {
-        triggers() {
-            const keys = Object.keys(TRIGGER);
-            const triggerOptions = [];
-            keys.forEach((trigger) => {
-                triggerOptions.push({
-                    value: TRIGGER[trigger],
-                    label: `when ${TRIGGER_LABEL[TRIGGER[trigger]]}`
-                });
-            });
-
-            return triggerOptions;
-        },
-        canEvaluateCriteria: function () {
-            let criteria = this.condition.configuration.criteria;
-            if (criteria.length) {
-                let lastCriterion = criteria[criteria.length - 1];
-                if (lastCriterion.telemetry
-                    && lastCriterion.operation
-                    && (lastCriterion.input.length
-                        || lastCriterion.operation === 'isDefined'
-                        || lastCriterion.operation === 'isUndefined')) {
-                    return true;
-                }
-            }
-
-            return false;
-        }
-    },
-    destroyed() {
-        this.destroy();
-    },
-    mounted() {
-        this.setOutputSelection();
-    },
-    methods: {
-        setOutputSelection() {
-            let conditionOutput = this.condition.configuration.output;
-            if (conditionOutput) {
-                if (conditionOutput !== 'false' && conditionOutput !== 'true') {
-                    this.selectedOutputSelection = 'string';
-                } else {
-                    this.selectedOutputSelection = conditionOutput;
-                }
-            }
-        },
-        setOutputValue() {
-            if (this.selectedOutputSelection === 'string') {
-                this.condition.configuration.output = '';
-            } else {
-                this.condition.configuration.output = this.selectedOutputSelection;
-            }
-
-            this.persist();
-        },
-        addCriteria() {
-            const criteriaObject = {
-                id: uuid(),
-                telemetry: '',
-                operation: '',
-                input: '',
-                metadata: ''
-            };
-            this.condition.configuration.criteria.push(criteriaObject);
-        },
-        dragStart(event) {
-            event.dataTransfer.clearData();
-            event.dataTransfer.setData('dragging', event.target); // required for FF to initiate drag
-            event.dataTransfer.effectAllowed = "copyMove";
-            event.dataTransfer.setDragImage(event.target.closest('.c-condition-h'), 0, 0);
-            this.$emit('setMoveIndex', this.conditionIndex);
-        },
-        dragEnd() {
-            this.dragStarted = false;
-            this.$emit('dragComplete');
-        },
-        dropCondition(event, targetIndex) {
-            if (!this.isDragging) {
-                return;
-            }
-
-            if (targetIndex > this.moveIndex) {
-                targetIndex--;
-            } // for 'downward' move
-
-            if (this.isValidTarget(targetIndex)) {
-                this.dragElement = undefined;
-                this.draggingOver = false;
-                this.$emit('dropCondition', targetIndex);
-            }
-        },
-        dragEnter(event, targetIndex) {
-            if (!this.isDragging) {
-                return;
-            }
-
-            if (targetIndex > this.moveIndex) {
-                targetIndex--;
-            } // for 'downward' move
-
-            if (this.isValidTarget(targetIndex)) {
-                this.dragElement = event.target.parentElement;
-                this.draggingOver = true;
-            }
-        },
-        dragLeave(event) {
-            if (event.target.parentElement === this.dragElement) {
-                this.draggingOver = false;
-                this.dragElement = undefined;
-            }
-        },
-        isValidTarget(targetIndex) {
-            return this.moveIndex !== targetIndex;
-        },
-        destroy() {
-        },
-        removeCondition() {
-            this.$emit('removeCondition', this.condition.id);
-        },
-        cloneCondition() {
-            this.$emit('cloneCondition', {
-                condition: this.condition,
-                index: this.conditionIndex
-            });
-        },
-        removeCriterion(index) {
-            this.condition.configuration.criteria.splice(index, 1);
-            this.persist();
-        },
-        cloneCriterion(index) {
-            const clonedCriterion = JSON.parse(JSON.stringify(this.condition.configuration.criteria[index]));
-            clonedCriterion.id = uuid();
-            this.condition.configuration.criteria.splice(index + 1, 0, clonedCriterion);
-            this.persist();
-        },
-        persist() {
-            this.$emit('updateCondition', {
-                condition: this.condition
-            });
-        },
-        initCap(str) {
-            return str.charAt(0).toUpperCase() + str.slice(1);
-        }
-    }
-};
-</script>
diff --git a/src/plugins/condition/components/ConditionCollection.vue b/src/plugins/condition/components/ConditionCollection.vue
index 63d7b9bef2f..d4bb58d88f7 100644
--- a/src/plugins/condition/components/ConditionCollection.vue
+++ b/src/plugins/condition/components/ConditionCollection.vue
@@ -1,242 +1,287 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 
 <template>
-<section id="conditionCollection"
-         :class="{ 'is-expanded': expanded }"
->
+  <section id="conditionCollection" :class="{ 'is-expanded': expanded }">
     <div class="c-cs__header c-section__header">
-        <span
-            class="c-disclosure-triangle c-tree__item__view-control is-enabled"
-            :class="{ 'c-disclosure-triangle--expanded': expanded }"
-            @click="expanded = !expanded"
-        ></span>
-        <div class="c-cs__header-label c-section__label">Conditions</div>
+      <span
+        class="c-disclosure-triangle c-tree__item__view-control is-enabled"
+        :class="{ 'c-disclosure-triangle--expanded': expanded }"
+        @click="expanded = !expanded"
+      ></span>
+      <div class="c-cs__header-label c-section__label">Conditions</div>
     </div>
-    <div v-if="expanded"
-         class="c-cs__content"
-    >
-        <div v-show="isEditing"
-             class="hint"
-             :class="{ 's-status-icon-warning-lo': !telemetryObjs.length }"
+    <div v-if="expanded" class="c-cs__content">
+      <div
+        v-show="isEditing"
+        class="hint"
+        :class="{ 's-status-icon-warning-lo': !telemetryObjs.length }"
+      >
+        <template v-if="!telemetryObjs.length"
+          >Drag telemetry into this Condition Set to configure Conditions and add
+          criteria.</template
         >
-            <template v-if="!telemetryObjs.length">Drag telemetry into this Condition Set to configure Conditions and add criteria.</template>
-            <template v-else>The first condition to match is the one that is applied. Drag conditions to reorder.</template>
-        </div>
-
-        <button
-            v-show="isEditing"
-            id="addCondition"
-            class="c-button c-button--major icon-plus labeled"
-            @click="addCondition"
+        <template v-else
+          >The first condition to match is the one that is applied. Drag conditions to
+          reorder.</template
         >
-            <span class="c-cs-button__label">Add Condition</span>
-        </button>
+      </div>
 
-        <div class="c-cs__conditions-h"
-             :class="{ 'is-active-dragging': isDragging }"
-        >
-            <Condition v-for="(condition, index) in conditionCollection"
-                       :key="condition.id"
-                       :condition="condition"
-                       :current-condition-id="currentConditionId"
-                       :condition-index="index"
-                       :telemetry="telemetryObjs"
-                       :is-editing="isEditing"
-                       :move-index="moveIndex"
-                       :is-dragging="isDragging"
-                       @updateCondition="updateCondition"
-                       @removeCondition="removeCondition"
-                       @cloneCondition="cloneCondition"
-                       @setMoveIndex="setMoveIndex"
-                       @dragComplete="dragComplete"
-                       @dropCondition="dropCondition"
-            />
-        </div>
+      <button
+        v-show="isEditing"
+        id="addCondition"
+        class="c-button c-button--major icon-plus labeled"
+        @click="addCondition"
+      >
+        <span class="c-cs-button__label">Add Condition</span>
+      </button>
+
+      <div class="c-cs__conditions-h" :class="{ 'is-active-dragging': isDragging }">
+        <Condition
+          v-for="(condition, index) in conditionCollection"
+          :key="condition.id"
+          :condition="condition"
+          :current-condition-id="currentConditionId"
+          :condition-index="index"
+          :telemetry="telemetryObjs"
+          :is-editing="isEditing"
+          :move-index="moveIndex"
+          :is-dragging="isDragging"
+          @update-condition="updateCondition"
+          @remove-condition="removeCondition"
+          @clone-condition="cloneCondition"
+          @set-move-index="setMoveIndex"
+          @drag-complete="dragComplete"
+          @drop-condition="dropCondition"
+        />
+      </div>
     </div>
-</section>
+  </section>
 </template>
 
 <script>
-import Condition from './Condition.vue';
-import ConditionManager from '../ConditionManager';
+import stalenessMixin from '@/ui/mixins/staleness-mixin';
+
+import ConditionManager from '../ConditionManager.js';
+import Condition from './ConditionItem.vue';
 
 export default {
-    components: {
-        Condition
-    },
-    inject: ['openmct', 'domainObject'],
-    props: {
-        isEditing: Boolean,
-        testData: {
-            type: Object,
-            required: true,
-            default: () => {
-                return {
-                    applied: false,
-                    conditionTestInputs: []
-                };
-            }
-        }
-    },
-    data() {
+  components: {
+    Condition
+  },
+  mixins: [stalenessMixin],
+  inject: ['openmct', 'domainObject'],
+  props: {
+    isEditing: Boolean,
+    testData: {
+      type: Object,
+      required: true,
+      default: () => {
         return {
-            expanded: true,
-            conditionCollection: [],
-            conditionResults: {},
-            conditions: [],
-            telemetryObjs: [],
-            moveIndex: undefined,
-            isDragging: false,
-            defaultOutput: undefined,
-            dragCounter: 0,
-            currentConditionId: ''
+          applied: false,
+          conditionTestInputs: []
         };
+      }
+    }
+  },
+  emits: [
+    'condition-set-result-updated',
+    'no-telemetry-objects',
+    'telemetry-updated',
+    'telemetry-staleness'
+  ],
+  data() {
+    return {
+      expanded: true,
+      conditionCollection: [],
+      conditionResults: {},
+      conditions: [],
+      telemetryObjs: [],
+      moveIndex: undefined,
+      isDragging: false,
+      dragCounter: 0,
+      currentConditionId: ''
+    };
+  },
+  watch: {
+    testData: {
+      handler() {
+        this.updateTestData();
+      },
+      deep: true
+    }
+  },
+  unmounted() {
+    this.composition.off('add', this.addTelemetryObject);
+    this.composition.off('remove', this.removeTelemetryObject);
+    if (this.conditionManager) {
+      this.conditionManager.off('conditionSetResultUpdated', this.handleConditionSetResultUpdated);
+      this.conditionManager.off('noTelemetryObjects', this.emitNoTelemetryObjectEvent);
+      this.conditionManager.destroy();
+    }
+
+    if (this.stopObservingForChanges) {
+      this.stopObservingForChanges();
+    }
+  },
+  mounted() {
+    this.composition = this.openmct.composition.get(this.domainObject);
+    this.composition.on('add', this.addTelemetryObject);
+    this.composition.on('remove', this.removeTelemetryObject);
+    this.composition.load();
+    this.conditionCollection = this.domainObject.configuration.conditionCollection;
+    this.observeForChanges();
+    this.conditionManager = new ConditionManager(this.domainObject, this.openmct);
+    this.conditionManager.on('conditionSetResultUpdated', this.handleConditionSetResultUpdated);
+    this.conditionManager.on('noTelemetryObjects', this.emitNoTelemetryObjectEvent);
+    this.setupClockChangedEvent((domainObject) => {
+      this.triggerUnsubscribeFromStaleness(domainObject, () => {
+        this.emitStaleness({
+          keyString: domainObject.identifier,
+          stalenessResponse: { isStale: false }
+        });
+      });
+      this.subscribeToStaleness(domainObject, (stalenessResponse) => {
+        this.emitStaleness({
+          keyString: domainObject.identifier,
+          stalenessResponse: stalenessResponse
+        });
+      });
+    });
+  },
+  methods: {
+    handleConditionSetResultUpdated(data) {
+      this.currentConditionId = data.conditionId;
+      this.$emit('condition-set-result-updated', data);
     },
-    watch: {
-        defaultOutput(newOutput, oldOutput) {
-            this.$emit('updateDefaultOutput', newOutput);
-        },
-        testData: {
-            handler() {
-                this.updateTestData();
-            },
-            deep: true
-        }
+    emitNoTelemetryObjectEvent(data) {
+      this.currentConditionId = '';
+      this.$emit('no-telemetry-objects');
     },
-    destroyed() {
-        this.composition.off('add', this.addTelemetryObject);
-        this.composition.off('remove', this.removeTelemetryObject);
-        if (this.conditionManager) {
-            this.conditionManager.off('conditionSetResultUpdated', this.handleConditionSetResultUpdated);
-            this.conditionManager.destroy();
+    observeForChanges() {
+      this.stopObservingForChanges = this.openmct.objects.observe(
+        this.domainObject,
+        'configuration.conditionCollection',
+        (newConditionCollection) => {
+          //this forces children to re-render
+          this.conditionCollection = newConditionCollection.map((condition) => condition);
         }
+      );
+    },
+    setMoveIndex(index) {
+      this.moveIndex = index;
+      this.isDragging = true;
+    },
+    dropCondition(targetIndex) {
+      const oldIndexArr = Object.keys(this.conditionCollection);
+      const newIndexArr = this.rearrangeIndices(oldIndexArr, this.moveIndex, targetIndex);
+      const reorderPlan = [];
 
-        if (this.stopObservingForChanges) {
-            this.stopObservingForChanges();
-        }
+      for (let i = 0; i < oldIndexArr.length; i++) {
+        reorderPlan.push({
+          oldIndex: Number(newIndexArr[i]),
+          newIndex: i
+        });
+      }
+
+      this.reorder(reorderPlan);
     },
-    mounted() {
-        this.composition = this.openmct.composition.get(this.domainObject);
-        this.composition.on('add', this.addTelemetryObject);
-        this.composition.on('remove', this.removeTelemetryObject);
-        this.composition.load();
-        this.conditionCollection = this.domainObject.configuration.conditionCollection;
-        this.observeForChanges();
-        this.conditionManager = new ConditionManager(this.domainObject, this.openmct);
-        this.conditionManager.on('conditionSetResultUpdated', this.handleConditionSetResultUpdated);
-        this.updateDefaultCondition();
+    dragComplete() {
+      this.isDragging = false;
     },
-    methods: {
-        handleConditionSetResultUpdated(data) {
-            this.currentConditionId = data.conditionId;
-            this.$emit('conditionSetResultUpdated', data);
-        },
-        observeForChanges() {
-            this.stopObservingForChanges = this.openmct.objects.observe(this.domainObject, 'configuration.conditionCollection', (newConditionCollection) => {
-                //this forces children to re-render
-                this.conditionCollection = newConditionCollection.map(condition => condition);
-                this.updateDefaultCondition();
-            });
-        },
-        updateDefaultCondition() {
-            const defaultCondition = this.domainObject.configuration.conditionCollection
-                .find(conditionConfiguration => conditionConfiguration.isDefault);
-            this.defaultOutput = defaultCondition.configuration.output;
-        },
-        setMoveIndex(index) {
-            this.moveIndex = index;
-            this.isDragging = true;
-        },
-        dropCondition(targetIndex) {
-            const oldIndexArr = Object.keys(this.conditionCollection);
-            const newIndexArr = this.rearrangeIndices(oldIndexArr, this.moveIndex, targetIndex);
-            const reorderPlan = [];
-
-            for (let i = 0; i < oldIndexArr.length; i++) {
-                reorderPlan.push({
-                    oldIndex: Number(newIndexArr[i]),
-                    newIndex: i
-                });
-            }
-
-            this.reorder(reorderPlan);
-        },
-        dragComplete() {
-            this.isDragging = false;
-        },
-        rearrangeIndices(arr, old_index, new_index) {
-            while (old_index < 0) {
-                old_index += arr.length;
-            }
-
-            while (new_index < 0) {
-                new_index += arr.length;
-            }
-
-            if (new_index >= arr.length) {
-                let k = new_index - arr.length;
-                while ((k--) + 1) {
-                    arr.push(undefined);
-                }
-            }
-
-            arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
-
-            return arr;
-        },
-        addTelemetryObject(domainObject) {
-            this.telemetryObjs.push(domainObject);
-            this.$emit('telemetryUpdated', this.telemetryObjs);
-        },
-        removeTelemetryObject(identifier) {
-            let index = this.telemetryObjs.findIndex(obj => {
-                let objId = this.openmct.objects.makeKeyString(obj.identifier);
-                let id = this.openmct.objects.makeKeyString(identifier);
-
-                return objId === id;
-            });
-            if (index > -1) {
-                this.telemetryObjs.splice(index, 1);
-            }
-        },
-        addCondition() {
-            this.conditionManager.addCondition();
-        },
-        updateCondition(data) {
-            this.conditionManager.updateCondition(data.condition);
-        },
-        removeCondition(id) {
-            this.conditionManager.removeCondition(id);
-        },
-        reorder(reorderPlan) {
-            this.conditionManager.reorderConditions(reorderPlan);
-        },
-        cloneCondition(data) {
-            this.conditionManager.cloneCondition(data.condition, data.index);
-        },
-        updateTestData() {
-            this.conditionManager.updateTestData(this.testData);
+    rearrangeIndices(arr, old_index, new_index) {
+      while (old_index < 0) {
+        old_index += arr.length;
+      }
+
+      while (new_index < 0) {
+        new_index += arr.length;
+      }
+
+      if (new_index >= arr.length) {
+        let k = new_index - arr.length;
+        while (k-- + 1) {
+          arr.push(undefined);
         }
+      }
+
+      arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
+
+      return arr;
+    },
+    addTelemetryObject(domainObject) {
+      const keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
+
+      this.telemetryObjs.push(domainObject);
+      this.$emit('telemetry-updated', this.telemetryObjs);
+
+      this.subscribeToStaleness(domainObject, (stalenessResponse) => {
+        this.emitStaleness({
+          keyString,
+          stalenessResponse: stalenessResponse
+        });
+      });
+    },
+    removeTelemetryObject(identifier) {
+      const keyString = this.openmct.objects.makeKeyString(identifier);
+      const index = this.telemetryObjs.findIndex((obj) => {
+        let objId = this.openmct.objects.makeKeyString(obj.identifier);
+
+        return objId === keyString;
+      });
+
+      const domainObject = this.telemetryObjs[index];
+      this.triggerUnsubscribeFromStaleness(domainObject, () => {
+        this.emitStaleness({
+          keyString,
+          stalenessResponse: { isStale: false }
+        });
+      });
+
+      if (index > -1) {
+        this.telemetryObjs.splice(index, 1);
+      }
+    },
+    emitStaleness(stalenessObject) {
+      this.$emit('telemetry-staleness', stalenessObject);
+    },
+    addCondition() {
+      this.conditionManager.addCondition();
+    },
+    updateCondition(data) {
+      this.conditionManager.updateCondition(data.condition);
+    },
+    removeCondition(id) {
+      this.conditionManager.removeCondition(id);
+    },
+    reorder(reorderPlan) {
+      this.conditionManager.reorderConditions(reorderPlan);
+    },
+    cloneCondition(data) {
+      this.conditionManager.cloneCondition(data.condition, data.index);
+    },
+    updateTestData() {
+      this.conditionManager.updateTestData(this.testData);
     }
+  }
 };
 </script>
diff --git a/src/plugins/condition/components/ConditionDescription.vue b/src/plugins/condition/components/ConditionDescription.vue
index 55aafb2c09a..88725c756ff 100644
--- a/src/plugins/condition/components/ConditionDescription.vue
+++ b/src/plugins/condition/components/ConditionDescription.vue
@@ -1,68 +1,59 @@
-/*****************************************************************************
-* Open MCT, Copyright (c) 2014-2021, United States Government
-* as represented by the Administrator of the National Aeronautics and Space
-* Administration. All rights reserved.
-*
-* Open MCT is licensed under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-* http://www.apache.org/licenses/LICENSE-2.0.
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-* License for the specific language governing permissions and limitations
-* under the License.
-*
-* Open MCT includes source code licensed under additional open source
-* licenses. See the Open Source Licenses file (LICENSES.md) included with
-* this source code distribution or the Licensing information page available
-* at runtime from the About dialog for additional information.
-*****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 
 <template>
-<div class="c-style__condition-desc">
-    <span v-if="showLabel && condition"
-          class="c-style__condition-desc__name c-condition__name"
-    >
-        {{ condition.configuration.name }}
+  <div class="c-style__condition-desc">
+    <span v-if="showLabel && condition" class="c-style__condition-desc__name c-condition__name">
+      {{ condition.configuration.name }}
     </span>
-    <span v-if="!condition.isDefault"
-          class="c-style__condition-desc__text"
-    >
-        {{ description }}
+    <span v-if="!condition.isDefault" class="c-style__condition-desc__text">
+      {{ description }}
     </span>
-    <span v-else
-          class="c-style__condition-desc__text"
-    >
-        Match if no other condition is matched
+    <span v-else class="c-style__condition-desc__text">
+      Match if no other condition is matched
     </span>
-</div>
+  </div>
 </template>
 
 <script>
-
 export default {
-    name: 'ConditionDescription',
-    inject: [
-        'openmct'
-    ],
-    props: {
-        showLabel: {
-            type: Boolean,
-            default: false
-        },
-        condition: {
-            type: Object,
-            default() {
-                return undefined;
-            }
-        }
+  name: 'ConditionDescription',
+  inject: ['openmct'],
+  props: {
+    showLabel: {
+      type: Boolean,
+      default: false
     },
-    computed: {
-        description() {
-            return this.condition ? this.condition.summary : '';
-        }
+    condition: {
+      type: Object,
+      default() {
+        return undefined;
+      }
+    }
+  },
+  computed: {
+    description() {
+      return this.condition ? this.condition.summary : '';
     }
+  }
 };
 </script>
diff --git a/src/plugins/condition/components/ConditionError.vue b/src/plugins/condition/components/ConditionError.vue
index b54ee4a946f..cdc214bda00 100644
--- a/src/plugins/condition/components/ConditionError.vue
+++ b/src/plugins/condition/components/ConditionError.vue
@@ -1,80 +1,78 @@
-/*****************************************************************************
-* Open MCT, Copyright (c) 2014-2021, United States Government
-* as represented by the Administrator of the National Aeronautics and Space
-* Administration. All rights reserved.
-*
-* Open MCT is licensed under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-* http://www.apache.org/licenses/LICENSE-2.0.
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-* License for the specific language governing permissions and limitations
-* under the License.
-*
-* Open MCT includes source code licensed under additional open source
-* licenses. See the Open Source Licenses file (LICENSES.md) included with
-* this source code distribution or the Licensing information page available
-* at runtime from the About dialog for additional information.
-*****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 
 <template>
-<div v-if="conditionErrors.length"
-     class="c-condition__errors"
->
-    <div v-for="(error, index) in conditionErrors"
-         :key="index"
-         class="u-alert u-alert--block u-alert--with-icon"
-    >{{ error.message.errorText }} {{ error.additionalInfo }}
+  <div v-if="conditionErrors.length" class="c-condition__errors">
+    <div
+      v-for="(error, index) in conditionErrors"
+      :key="index"
+      class="u-alert u-alert--block u-alert--with-icon"
+    >
+      {{ error.message.errorText }} {{ error.additionalInfo }}
     </div>
-</div>
+  </div>
 </template>
 
 <script>
-
-import { ERROR } from "@/plugins/condition/utils/constants";
+import { ERROR } from '@/plugins/condition/utils/constants';
 
 export default {
-    name: 'ConditionError',
-    inject: [
-        'openmct'
-    ],
-    props: {
-        condition: {
-            type: Object,
-            default() {
-                return undefined;
-            }
-        }
-    },
-    data() {
-        return {
-            conditionErrors: []
-        };
-    },
-    mounted() {
-        this.getConditionErrors();
+  name: 'ConditionError',
+  inject: ['openmct'],
+  props: {
+    condition: {
+      type: Object,
+      default() {
+        return undefined;
+      }
+    }
+  },
+  data() {
+    return {
+      conditionErrors: []
+    };
+  },
+  mounted() {
+    this.getConditionErrors();
+  },
+  methods: {
+    getConditionErrors() {
+      if (this.condition) {
+        this.condition.configuration.criteria.forEach((criterion, index) => {
+          this.getCriterionErrors(criterion, index);
+        });
+      }
     },
-    methods: {
-        getConditionErrors() {
-            if (this.condition) {
-                this.condition.configuration.criteria.forEach((criterion, index) => {
-                    this.getCriterionErrors(criterion, index);
-                });
-            }
-        },
-        getCriterionErrors(criterion, index) {
-            //It is sufficient to check for absence of telemetry here since the condition manager ensures that telemetry for a criterion is set if it exists
-            const isInvalidTelemetry = !criterion.telemetry && (criterion.telemetry !== 'all' && criterion.telemetry !== 'any');
-            if (isInvalidTelemetry) {
-                this.conditionErrors.push({
-                    message: ERROR.TELEMETRY_NOT_FOUND,
-                    additionalInfo: ''
-                });
-            }
-        }
+    getCriterionErrors(criterion, index) {
+      //It is sufficient to check for absence of telemetry here since the condition manager ensures that telemetry for a criterion is set if it exists
+      const isInvalidTelemetry =
+        !criterion.telemetry && criterion.telemetry !== 'all' && criterion.telemetry !== 'any';
+      if (isInvalidTelemetry) {
+        this.conditionErrors.push({
+          message: ERROR.TELEMETRY_NOT_FOUND,
+          additionalInfo: ''
+        });
+      }
     }
+  }
 };
 </script>
diff --git a/src/plugins/condition/components/ConditionItem.vue b/src/plugins/condition/components/ConditionItem.vue
new file mode 100644
index 00000000000..23c7115f534
--- /dev/null
+++ b/src/plugins/condition/components/ConditionItem.vue
@@ -0,0 +1,400 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div
+    class="c-condition-h"
+    :class="{ 'is-drag-target': draggingOver }"
+    @dragover.prevent
+    @drop.prevent="dropCondition($event, conditionIndex)"
+    @dragenter="dragEnter($event, conditionIndex)"
+    @dragleave="dragLeave($event, conditionIndex)"
+  >
+    <div class="c-condition-h__drop-target"></div>
+    <div
+      v-if="isEditing"
+      :class="{ 'is-current': condition.id === currentConditionId }"
+      class="c-condition c-condition--edit"
+    >
+      <!-- Edit view -->
+      <div class="c-condition__header">
+        <span
+          class="c-condition__drag-grippy c-grippy c-grippy--vertical-drag"
+          title="Drag to reorder conditions"
+          :class="[{ 'is-enabled': !condition.isDefault }, { 'hide-nice': condition.isDefault }]"
+          :draggable="!condition.isDefault"
+          @dragstart="dragStart"
+          @dragend="dragEnd"
+        ></span>
+
+        <span
+          class="c-condition__disclosure c-disclosure-triangle c-tree__item__view-control is-enabled"
+          :class="{ 'c-disclosure-triangle--expanded': expanded }"
+          @click="expanded = !expanded"
+        ></span>
+
+        <span class="c-condition__name">{{ condition.configuration.name }}</span>
+        <span class="c-condition__summary">
+          <template v-if="!condition.isDefault && !canEvaluateCriteria"> Define criteria </template>
+          <span v-else>
+            <condition-description :show-label="false" :condition="condition" />
+          </span>
+        </span>
+
+        <div class="c-condition__buttons">
+          <button
+            v-if="!condition.isDefault"
+            class="c-click-icon c-condition__duplicate-button icon-duplicate"
+            title="Duplicate this condition"
+            @click="cloneCondition"
+          ></button>
+
+          <button
+            v-if="!condition.isDefault"
+            class="c-click-icon c-condition__delete-button icon-trash"
+            title="Delete this condition"
+            @click="removeCondition"
+          ></button>
+        </div>
+      </div>
+      <div v-if="expanded" class="c-condition__definition c-cdef">
+        <span class="c-cdef__separator c-row-separator"></span>
+        <span class="c-cdef__label">Condition Name</span>
+        <span class="c-cdef__controls">
+          <input
+            v-model="condition.configuration.name"
+            class="t-condition-input__name"
+            type="text"
+            @change="persist"
+          />
+        </span>
+
+        <span class="c-cdef__label">Output</span>
+        <span class="c-cdef__controls">
+          <span class="c-cdef__control">
+            <select v-model="selectedOutputSelection" @change="setOutputValue">
+              <option v-for="option in outputOptions" :key="option" :value="option">
+                {{ initCap(option) }}
+              </option>
+            </select>
+          </span>
+          <span class="c-cdef__control">
+            <input
+              v-if="selectedOutputSelection === outputOptions[2]"
+              v-model="condition.configuration.output"
+              class="t-condition-name-input"
+              type="text"
+              @change="persist"
+            />
+          </span>
+        </span>
+
+        <div v-if="!condition.isDefault" class="c-cdef__match-and-criteria">
+          <span class="c-cdef__separator c-row-separator"></span>
+          <span class="c-cdef__label">Match</span>
+          <span class="c-cdef__controls">
+            <select
+              v-model="condition.configuration.trigger"
+              aria-label="Condition Trigger"
+              @change="persist"
+            >
+              <option v-for="option in triggers" :key="option.value" :value="option.value">
+                {{ option.label }}
+              </option>
+            </select>
+          </span>
+
+          <template v-if="telemetry.length || condition.configuration.criteria.length">
+            <div
+              v-for="(criterion, index) in condition.configuration.criteria"
+              :key="criterion.id"
+              class="c-cdef__criteria"
+            >
+              <Criterion
+                :telemetry="telemetry"
+                :criterion="criterion"
+                :index="index"
+                :trigger="condition.configuration.trigger"
+                :is-default="condition.configuration.criteria.length === 1"
+                @persist="persist"
+              />
+              <div class="c-cdef__criteria__buttons">
+                <button
+                  class="c-click-icon c-cdef__criteria-duplicate-button icon-duplicate"
+                  title="Duplicate this criteria"
+                  @click="cloneCriterion(index)"
+                ></button>
+                <button
+                  v-if="!(condition.configuration.criteria.length === 1)"
+                  class="c-click-icon c-cdef__criteria-duplicate-button icon-trash"
+                  title="Delete this criteria"
+                  @click="removeCriterion(index)"
+                ></button>
+              </div>
+            </div>
+          </template>
+          <div class="c-cdef__separator c-row-separator"></div>
+          <div class="c-cdef__controls" :disabled="!telemetry.length">
+            <button
+              class="c-cdef__add-criteria-button c-button c-button--labeled icon-plus"
+              @click="addCriteria"
+            >
+              <span class="c-button__label">Add Criteria</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      v-else
+      class="c-condition c-condition--browse"
+      :class="{ 'is-current': condition.id === currentConditionId }"
+    >
+      <!-- Browse view -->
+      <div class="c-condition__header">
+        <span class="c-condition__name">
+          {{ condition.configuration.name }}
+        </span>
+        <span class="c-condition__output"> Output: {{ condition.configuration.output }} </span>
+      </div>
+      <div class="c-condition__summary">
+        <condition-description :show-label="false" :condition="condition" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { v4 as uuid } from 'uuid';
+
+import { TRIGGER, TRIGGER_LABEL } from '@/plugins/condition/utils/constants';
+
+import ConditionDescription from './ConditionDescription.vue';
+import Criterion from './CriterionItem.vue';
+
+export default {
+  components: {
+    Criterion,
+    ConditionDescription
+  },
+  inject: ['openmct'],
+  props: {
+    currentConditionId: {
+      type: String,
+      default: ''
+    },
+    condition: {
+      type: Object,
+      required: true
+    },
+    conditionIndex: {
+      type: Number,
+      required: true
+    },
+    isEditing: {
+      type: Boolean,
+      required: true,
+      default: false
+    },
+    telemetry: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    isDragging: {
+      type: Boolean,
+      default: false
+    },
+    moveIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+  emits: [
+    'set-move-index',
+    'drag-complete',
+    'drop-condition',
+    'remove-condition',
+    'clone-condition',
+    'update-condition'
+  ],
+  data() {
+    return {
+      currentCriteria: this.currentCriteria,
+      expanded: true,
+      trigger: 'all',
+      selectedOutputSelection: '',
+      outputOptions: ['false', 'true', 'string'],
+      criterionIndex: 0,
+      draggingOver: false,
+      isDefault: this.condition.isDefault
+    };
+  },
+  computed: {
+    triggers() {
+      const keys = Object.keys(TRIGGER);
+      const triggerOptions = [];
+      keys.forEach((trigger) => {
+        triggerOptions.push({
+          value: TRIGGER[trigger],
+          label: `when ${TRIGGER_LABEL[TRIGGER[trigger]]}`
+        });
+      });
+
+      return triggerOptions;
+    },
+    canEvaluateCriteria: function () {
+      let criteria = this.condition.configuration.criteria;
+      if (criteria.length) {
+        let lastCriterion = criteria[criteria.length - 1];
+        if (
+          lastCriterion.telemetry &&
+          lastCriterion.operation &&
+          (lastCriterion.input.length ||
+            lastCriterion.operation === 'isDefined' ||
+            lastCriterion.operation === 'isUndefined')
+        ) {
+          return true;
+        }
+      }
+
+      return false;
+    }
+  },
+  unmounted() {
+    this.destroy();
+  },
+  mounted() {
+    this.setOutputSelection();
+  },
+  methods: {
+    setOutputSelection() {
+      let conditionOutput = this.condition.configuration.output;
+      if (conditionOutput) {
+        if (conditionOutput !== 'false' && conditionOutput !== 'true') {
+          this.selectedOutputSelection = 'string';
+        } else {
+          this.selectedOutputSelection = conditionOutput;
+        }
+      }
+    },
+    setOutputValue() {
+      if (this.selectedOutputSelection === 'string') {
+        this.condition.configuration.output = '';
+      } else {
+        this.condition.configuration.output = this.selectedOutputSelection;
+      }
+
+      this.persist();
+    },
+    addCriteria() {
+      const criteriaObject = {
+        id: uuid(),
+        telemetry: '',
+        operation: '',
+        input: '',
+        metadata: ''
+      };
+      this.condition.configuration.criteria.push(criteriaObject);
+    },
+    dragStart(event) {
+      event.dataTransfer.clearData();
+      event.dataTransfer.setData('dragging', event.target); // required for FF to initiate drag
+      event.dataTransfer.effectAllowed = 'copyMove';
+      event.dataTransfer.setDragImage(event.target.closest('.c-condition-h'), 0, 0);
+      this.$emit('set-move-index', this.conditionIndex);
+    },
+    dragEnd() {
+      this.dragStarted = false;
+      this.$emit('drag-complete');
+    },
+    dropCondition(event, targetIndex) {
+      if (!this.isDragging) {
+        return;
+      }
+
+      if (targetIndex > this.moveIndex) {
+        targetIndex--;
+      } // for 'downward' move
+
+      if (this.isValidTarget(targetIndex)) {
+        this.dragElement = undefined;
+        this.draggingOver = false;
+        this.$emit('drop-condition', targetIndex);
+      }
+    },
+    dragEnter(event, targetIndex) {
+      if (!this.isDragging) {
+        return;
+      }
+
+      if (targetIndex > this.moveIndex) {
+        targetIndex--;
+      } // for 'downward' move
+
+      if (this.isValidTarget(targetIndex)) {
+        this.dragElement = event.target.parentElement;
+        this.draggingOver = true;
+      }
+    },
+    dragLeave(event) {
+      if (event.target.parentElement === this.dragElement) {
+        this.draggingOver = false;
+        this.dragElement = undefined;
+      }
+    },
+    isValidTarget(targetIndex) {
+      return this.moveIndex !== targetIndex;
+    },
+    destroy() {},
+    removeCondition() {
+      this.$emit('remove-condition', this.condition.id);
+    },
+    cloneCondition() {
+      this.$emit('clone-condition', {
+        condition: this.condition,
+        index: this.conditionIndex
+      });
+    },
+    removeCriterion(index) {
+      this.condition.configuration.criteria.splice(index, 1);
+      this.persist();
+    },
+    cloneCriterion(index) {
+      const clonedCriterion = JSON.parse(
+        JSON.stringify(this.condition.configuration.criteria[index])
+      );
+      clonedCriterion.id = uuid();
+      this.condition.configuration.criteria.splice(index + 1, 0, clonedCriterion);
+      this.persist();
+    },
+    persist() {
+      this.$emit('update-condition', {
+        condition: this.condition
+      });
+    },
+    initCap(str) {
+      return str.charAt(0).toUpperCase() + str.slice(1);
+    }
+  }
+};
+</script>
diff --git a/src/plugins/condition/components/ConditionSet.vue b/src/plugins/condition/components/ConditionSet.vue
index f819a182397..eb78af46055 100644
--- a/src/plugins/condition/components/ConditionSet.vue
+++ b/src/plugins/condition/components/ConditionSet.vue
@@ -1,100 +1,105 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 
 <template>
-<div class="c-cs">
+  <div class="c-cs" :class="{ 'is-stale': isStale }">
     <section class="c-cs__current-output c-section">
-        <div class="c-cs__content c-cs__current-output-value">
-            <span class="c-cs__current-output-value__label">Current Output</span>
-            <span class="c-cs__current-output-value__value">
-                <template v-if="currentConditionOutput">
-                    {{ currentConditionOutput }}
-                </template>
-                <template v-else>
-                    {{ defaultConditionOutput }}
-                </template>
-            </span>
-        </div>
+      <div class="c-cs__content c-cs__current-output-value">
+        <span class="c-cs__current-output-value__label">Current Output</span>
+        <span class="c-cs__current-output-value__value" aria-label="Current Output Value">
+          <template v-if="currentConditionOutput">
+            {{ currentConditionOutput }}
+          </template>
+          <template v-else> --- </template>
+        </span>
+      </div>
     </section>
     <div class="c-cs__test-data-and-conditions-w">
-        <TestData class="c-cs__test-data"
-                  :is-editing="isEditing"
-                  :test-data="testData"
-                  :telemetry="telemetryObjs"
-                  @updateTestData="updateTestData"
-        />
-        <ConditionCollection class="c-cs__conditions"
-                             :is-editing="isEditing"
-                             :test-data="testData"
-                             @conditionSetResultUpdated="updateCurrentOutput"
-                             @updateDefaultOutput="updateDefaultOutput"
-                             @telemetryUpdated="updateTelemetry"
-        />
+      <TestData
+        class="c-cs__test-data"
+        :is-editing="isEditing"
+        :test-data="testData"
+        :telemetry="telemetryObjs"
+        @update-test-data="updateTestData"
+      />
+      <ConditionCollection
+        class="c-cs__conditions"
+        :is-editing="isEditing"
+        :test-data="testData"
+        @condition-set-result-updated="updateCurrentOutput"
+        @no-telemetry-objects="updateCurrentOutput('---')"
+        @telemetry-updated="updateTelemetry"
+        @telemetry-staleness="handleStaleness"
+      />
     </div>
-</div>
+  </div>
 </template>
 
 <script>
-import TestData from './TestData.vue';
+import stalenessMixin from '@/ui/mixins/staleness-mixin';
+
 import ConditionCollection from './ConditionCollection.vue';
+import TestData from './TestData.vue';
 
 export default {
-    components: {
-        TestData,
-        ConditionCollection
+  components: {
+    TestData,
+    ConditionCollection
+  },
+  mixins: [stalenessMixin],
+  inject: ['openmct', 'domainObject'],
+  props: {
+    isEditing: Boolean
+  },
+  data() {
+    return {
+      currentConditionOutput: '',
+      telemetryObjs: [],
+      testData: {}
+    };
+  },
+  mounted() {
+    this.conditionSetIdentifier = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+    this.testData = {
+      applied: false,
+      conditionTestInputs: this.domainObject.configuration.conditionTestData || []
+    };
+  },
+  methods: {
+    updateCurrentOutput(currentConditionResult) {
+      this.currentConditionOutput = currentConditionResult.output;
     },
-    inject: ["openmct", "domainObject"],
-    props: {
-        isEditing: Boolean
+    updateDefaultOutput(output) {
+      this.currentConditionOutput = output;
     },
-    data() {
-        return {
-            currentConditionOutput: '',
-            defaultConditionOutput: '',
-            telemetryObjs: [],
-            testData: {}
-        };
+    updateTelemetry(telemetryObjs) {
+      this.telemetryObjs = telemetryObjs;
     },
-    mounted() {
-        this.conditionSetIdentifier = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-        this.testData = {
-            applied: false,
-            conditionTestInputs: this.domainObject.configuration.conditionTestData || []
-        };
+    updateTestData(testData) {
+      this.testData = testData;
     },
-    methods: {
-        updateCurrentOutput(currentConditionResult) {
-            this.currentConditionOutput = currentConditionResult.output;
-        },
-        updateDefaultOutput(output) {
-            this.currentConditionOutput = output;
-        },
-        updateTelemetry(telemetryObjs) {
-            this.telemetryObjs = telemetryObjs;
-        },
-        updateTestData(testData) {
-            this.testData = testData;
-        }
+    handleStaleness({ keyString, stalenessResponse }) {
+      this.addOrRemoveStaleObject(keyString, stalenessResponse);
     }
+  }
 };
 </script>
-
diff --git a/src/plugins/condition/components/Criterion.vue b/src/plugins/condition/components/Criterion.vue
deleted file mode 100644
index f38fdf3dbcf..00000000000
--- a/src/plugins/condition/components/Criterion.vue
+++ /dev/null
@@ -1,311 +0,0 @@
-/*****************************************************************************
-* Open MCT, Copyright (c) 2014-2021, United States Government
-* as represented by the Administrator of the National Aeronautics and Space
-* Administration. All rights reserved.
-*
-* Open MCT is licensed under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-* http://www.apache.org/licenses/LICENSE-2.0.
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-* License for the specific language governing permissions and limitations
-* under the License.
-*
-* Open MCT includes source code licensed under additional open source
-* licenses. See the Open Source Licenses file (LICENSES.md) included with
-* this source code distribution or the Licensing information page available
-* at runtime from the About dialog for additional information.
-*****************************************************************************/
-
-<template>
-<div class="u-contents">
-    <div class="c-cdef__separator c-row-separator"></div>
-    <span class="c-cdef__label">{{ setRowLabel }}</span>
-    <span class="c-cdef__controls">
-        <span class="c-cdef__control">
-            <select ref="telemetrySelect"
-                    v-model="criterion.telemetry"
-                    @change="updateMetadataOptions"
-            >
-                <option value="">- Select Telemetry -</option>
-                <option value="all">all telemetry</option>
-                <option value="any">any telemetry</option>
-                <option v-for="telemetryOption in telemetry"
-                        :key="telemetryOption.identifier.key"
-                        :value="telemetryOption.identifier"
-                >
-                    {{ telemetryOption.name }}
-                </option>
-            </select>
-        </span>
-        <span v-if="criterion.telemetry"
-              class="c-cdef__control"
-        >
-            <select ref="metadataSelect"
-                    v-model="criterion.metadata"
-                    @change="updateOperations"
-            >
-                <option value="">- Select Field -</option>
-                <option v-for="option in telemetryMetadataOptions"
-                        :key="option.key"
-                        :value="option.key"
-                >
-                    {{ option.name }}
-                </option>
-                <option value="dataReceived">any data received</option>
-            </select>
-        </span>
-        <span v-if="criterion.telemetry && criterion.metadata"
-              class="c-cdef__control"
-        >
-            <select v-model="criterion.operation"
-                    @change="updateInputVisibilityAndValues"
-            >
-                <option value="">- Select Comparison -</option>
-                <option v-for="option in filteredOps"
-                        :key="option.name"
-                        :value="option.name"
-                >
-                    {{ option.text }}
-                </option>
-            </select>
-            <template v-if="!enumerations.length">
-                <span v-for="(item, inputIndex) in inputCount"
-                      :key="inputIndex"
-                      class="c-cdef__control__inputs"
-                >
-                    <input v-model="criterion.input[inputIndex]"
-                           class="c-cdef__control__input"
-                           :type="setInputType"
-                           @change="persist"
-                    >
-                    <span v-if="inputIndex < inputCount-1">and</span>
-                </span>
-                <span v-if="criterion.metadata === 'dataReceived'">seconds</span>
-            </template>
-            <span v-else>
-                <span v-if="inputCount && criterion.operation"
-                      class="c-cdef__control"
-                >
-                    <select v-model="criterion.input[0]"
-                            @change="persist"
-                    >
-                        <option v-for="option in enumerations"
-                                :key="option.string"
-                                :value="option.value.toString()"
-                        >
-                            {{ option.string }}
-                        </option>
-                    </select>
-                </span>
-            </span>
-        </span>
-    </span>
-</div>
-</template>
-
-<script>
-import { OPERATIONS, INPUT_TYPES } from '../utils/operations';
-import {TRIGGER_CONJUNCTION} from "../utils/constants";
-
-export default {
-    inject: ['openmct'],
-    props: {
-        criterion: {
-            type: Object,
-            required: true
-        },
-        telemetry: {
-            type: Array,
-            required: true,
-            default: () => []
-        },
-        index: {
-            type: Number,
-            required: true
-        },
-        trigger: {
-            type: String,
-            required: true
-        }
-    },
-    data() {
-        return {
-            telemetryMetadataOptions: [],
-            operations: OPERATIONS,
-            inputCount: 0,
-            rowLabel: '',
-            operationFormat: '',
-            enumerations: [],
-            inputTypes: INPUT_TYPES
-        };
-    },
-    computed: {
-        setRowLabel: function () {
-            let operator = TRIGGER_CONJUNCTION[this.trigger];
-
-            return (this.index !== 0 ? operator : '') + ' when';
-        },
-        filteredOps: function () {
-            if (this.criterion.metadata === 'dataReceived') {
-                return this.operations.filter(op => op.name === 'isStale');
-            } else {
-                return this.operations.filter(op => op.appliesTo.indexOf(this.operationFormat) !== -1);
-            }
-        },
-        setInputType: function () {
-            let type = '';
-            for (let i = 0; i < this.filteredOps.length; i++) {
-                if (this.criterion.operation === this.filteredOps[i].name) {
-                    if (this.filteredOps[i].appliesTo.length) {
-                        type = this.inputTypes[this.filteredOps[i].appliesTo[0]];
-                    } else {
-                        type = 'text';
-                    }
-
-                    break;
-                }
-            }
-
-            return type;
-        }
-    },
-    watch: {
-        telemetry: {
-            handler(newTelemetry, oldTelemetry) {
-                this.checkTelemetry();
-            },
-            deep: true
-        }
-    },
-    mounted() {
-        this.updateMetadataOptions();
-    },
-    methods: {
-        checkTelemetry() {
-            if (this.criterion.telemetry) {
-                const isAnyAllTelemetry = this.criterion.telemetry === 'any' || this.criterion.telemetry === 'all';
-                const telemetryForCriterionExists = this.telemetry.find((telemetryObj) => this.openmct.objects.areIdsEqual(this.criterion.telemetry, telemetryObj.identifier));
-                if (!isAnyAllTelemetry
-                    && !telemetryForCriterionExists) {
-                    //telemetry being used was removed. So reset this criterion.
-                    this.criterion.telemetry = '';
-                    this.criterion.metadata = '';
-                    this.criterion.input = [];
-                    this.criterion.operation = '';
-                    this.persist();
-                } else {
-                    this.updateMetadataOptions();
-                }
-            }
-        },
-        updateOperationFormat() {
-            this.enumerations = [];
-            let foundMetadata = this.telemetryMetadataOptions.find((value) => {
-                return value.key === this.criterion.metadata;
-            });
-            if (foundMetadata) {
-                if (foundMetadata.enumerations !== undefined) {
-                    this.operationFormat = 'enum';
-                    this.enumerations = foundMetadata.enumerations;
-                } else if (foundMetadata.format === 'string' || foundMetadata.format === 'number') {
-                    this.operationFormat = foundMetadata.format;
-                } else if (Object.prototype.hasOwnProperty.call(foundMetadata.hints, 'range')) {
-                    this.operationFormat = 'number';
-                } else if (Object.prototype.hasOwnProperty.call(foundMetadata.hints, 'domain')) {
-                    this.operationFormat = 'number';
-                } else if (foundMetadata.key === 'name') {
-                    this.operationFormat = 'string';
-                } else {
-                    this.operationFormat = 'number';
-                }
-            } else if (this.criterion.metadata === 'dataReceived') {
-                this.operationFormat = 'number';
-            }
-
-            this.updateInputVisibilityAndValues();
-        },
-        updateMetadataOptions(ev) {
-            if (ev) {
-                this.clearDependentFields(ev.target);
-                this.persist();
-            }
-
-            if (this.criterion.telemetry) {
-                let telemetryObjects = this.telemetry;
-                if (this.criterion.telemetry !== 'all' && this.criterion.telemetry !== 'any') {
-                    const found = this.telemetry.find(telemetryObj => (this.openmct.objects.areIdsEqual(telemetryObj.identifier, this.criterion.telemetry)));
-                    telemetryObjects = found ? [found] : [];
-                }
-
-                this.telemetryMetadataOptions = [];
-                telemetryObjects.forEach(telemetryObject => {
-                    let telemetryMetadata = this.openmct.telemetry.getMetadata(telemetryObject);
-                    this.addMetaDataOptions(telemetryMetadata.values());
-                });
-                this.updateOperations();
-            }
-        },
-        addMetaDataOptions(options) {
-            if (!this.telemetryMetadataOptions) {
-                this.telemetryMetadataOptions = options;
-            }
-
-            options.forEach((option) => {
-                const found = this.telemetryMetadataOptions.find((metadataOption) => {
-                    return (metadataOption.key && (metadataOption.key === option.key)) && (metadataOption.name && (metadataOption.name === option.name));
-                });
-                if (!found) {
-                    this.telemetryMetadataOptions.push(option);
-                }
-            });
-        },
-        updateOperations(ev) {
-            this.updateOperationFormat();
-            if (ev) {
-                this.clearDependentFields(ev.target);
-                this.persist();
-            }
-        },
-        updateInputVisibilityAndValues(ev) {
-            if (ev) {
-                this.clearDependentFields();
-                this.persist();
-            }
-
-            for (let i = 0; i < this.filteredOps.length; i++) {
-                if (this.criterion.operation === this.filteredOps[i].name) {
-                    this.inputCount = this.filteredOps[i].inputCount;
-                }
-            }
-
-            if (!this.inputCount) {
-                this.criterion.input = [];
-            }
-        },
-        clearDependentFields(el) {
-            if (el === this.$refs.telemetrySelect) {
-                this.criterion.metadata = '';
-            } else if (el === this.$refs.metadataSelect) {
-                if (!this.filteredOps.find(operation => operation.name === this.criterion.operation)) {
-                    this.criterion.operation = '';
-                    this.criterion.input = this.enumerations.length ? [this.enumerations[0].value.toString()] : [];
-                    this.inputCount = 0;
-                }
-            } else {
-                if (this.enumerations.length && !this.criterion.input.length) {
-                    this.criterion.input = [this.enumerations[0].value.toString()];
-                }
-
-                this.inputCount = 0;
-            }
-        },
-        persist() {
-            this.$emit('persist', this.criterion);
-        }
-    }
-};
-</script>
diff --git a/src/plugins/condition/components/CriterionItem.vue b/src/plugins/condition/components/CriterionItem.vue
new file mode 100644
index 00000000000..a632d675a1a
--- /dev/null
+++ b/src/plugins/condition/components/CriterionItem.vue
@@ -0,0 +1,328 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="u-contents">
+    <div class="c-cdef__separator c-row-separator"></div>
+    <span class="c-cdef__label">{{ setRowLabel }}</span>
+    <span class="c-cdef__controls">
+      <span class="c-cdef__control">
+        <select
+          ref="telemetrySelect"
+          v-model="criterion.telemetry"
+          aria-label="Criterion Telemetry Selection"
+          @change="updateMetadataOptions"
+        >
+          <option value="">- Select Telemetry -</option>
+          <option value="all">all telemetry</option>
+          <option value="any">any telemetry</option>
+          <option
+            v-for="telemetryOption in telemetry"
+            :key="telemetryOption.identifier.key"
+            :value="telemetryOption.identifier"
+          >
+            {{ telemetryOption.name }}
+          </option>
+        </select>
+      </span>
+      <span v-if="criterion.telemetry" class="c-cdef__control">
+        <select
+          ref="metadataSelect"
+          v-model="criterion.metadata"
+          aria-label="Criterion Metadata Selection"
+          @change="updateOperations"
+        >
+          <option value="">- Select Field -</option>
+          <option v-for="option in telemetryMetadataOptions" :key="option.key" :value="option.key">
+            {{ option.name }}
+          </option>
+          <option value="dataReceived">any data received</option>
+        </select>
+      </span>
+      <span v-if="criterion.telemetry && criterion.metadata" class="c-cdef__control">
+        <select
+          v-model="criterion.operation"
+          aria-label="Criterion Comparison Selection"
+          @change="updateInputVisibilityAndValues"
+        >
+          <option value="">- Select Comparison -</option>
+          <option v-for="option in filteredOps" :key="option.name" :value="option.name">
+            {{ option.text }}
+          </option>
+        </select>
+        <template v-if="!enumerations.length">
+          <span
+            v-for="(item, inputIndex) in inputCount"
+            :key="inputIndex"
+            class="c-cdef__control__inputs"
+          >
+            <input
+              v-model="criterion.input[inputIndex]"
+              class="c-cdef__control__input"
+              aria-label="Criterion Input"
+              :type="setInputType"
+              @change="persist"
+            />
+            <span v-if="inputIndex < inputCount - 1">and</span>
+          </span>
+          <span
+            v-if="criterion.metadata === 'dataReceived' && criterion.operation.name === IS_OLD_KEY"
+            >seconds</span
+          >
+        </template>
+        <span v-else>
+          <span v-if="inputCount && criterion.operation" class="c-cdef__control">
+            <select
+              v-model="criterion.input[0]"
+              aria-label="Criterion Else Selection"
+              @change="persist"
+            >
+              <option
+                v-for="option in enumerations"
+                :key="option.string"
+                :value="option.value.toString()"
+              >
+                {{ option.string }}
+              </option>
+            </select>
+          </span>
+        </span>
+      </span>
+    </span>
+  </div>
+</template>
+
+<script>
+import { IS_OLD_KEY, IS_STALE_KEY, TRIGGER_CONJUNCTION } from '../utils/constants.js';
+import { INPUT_TYPES, OPERATIONS } from '../utils/operations.js';
+
+export default {
+  inject: ['openmct'],
+  props: {
+    criterion: {
+      type: Object,
+      required: true
+    },
+    telemetry: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    index: {
+      type: Number,
+      required: true
+    },
+    trigger: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['persist'],
+  data() {
+    return {
+      telemetryMetadataOptions: [],
+      operations: OPERATIONS,
+      inputCount: 0,
+      rowLabel: '',
+      operationFormat: '',
+      enumerations: [],
+      inputTypes: INPUT_TYPES,
+      IS_OLD_KEY
+    };
+  },
+  computed: {
+    setRowLabel: function () {
+      let operator = TRIGGER_CONJUNCTION[this.trigger];
+
+      return (this.index !== 0 ? operator : '') + ' when';
+    },
+    filteredOps: function () {
+      if (this.criterion.metadata === 'dataReceived') {
+        return this.operations.filter((op) => op.name === IS_OLD_KEY || op.name === IS_STALE_KEY);
+      } else {
+        return this.operations.filter((op) => op.appliesTo.indexOf(this.operationFormat) !== -1);
+      }
+    },
+    setInputType: function () {
+      let type = '';
+      for (let i = 0; i < this.filteredOps.length; i++) {
+        if (this.criterion.operation === this.filteredOps[i].name) {
+          if (this.filteredOps[i].appliesTo.length) {
+            type = this.inputTypes[this.filteredOps[i].appliesTo[0]];
+          } else {
+            type = 'text';
+          }
+
+          break;
+        }
+      }
+
+      return type;
+    }
+  },
+  watch: {
+    telemetry: {
+      handler(newTelemetry, oldTelemetry) {
+        this.checkTelemetry();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.updateMetadataOptions();
+  },
+  methods: {
+    checkTelemetry() {
+      if (this.criterion.telemetry) {
+        const isAnyAllTelemetry =
+          this.criterion.telemetry === 'any' || this.criterion.telemetry === 'all';
+        const telemetryForCriterionExists = this.telemetry.find((telemetryObj) =>
+          this.openmct.objects.areIdsEqual(this.criterion.telemetry, telemetryObj.identifier)
+        );
+        if (!isAnyAllTelemetry && !telemetryForCriterionExists) {
+          //telemetry being used was removed. So reset this criterion.
+          this.criterion.telemetry = '';
+          this.criterion.metadata = '';
+          this.criterion.input = [];
+          this.criterion.operation = '';
+          this.persist();
+        } else {
+          this.updateMetadataOptions();
+        }
+      }
+    },
+    updateOperationFormat() {
+      this.enumerations = [];
+      let foundMetadata = this.telemetryMetadataOptions.find((value) => {
+        return value.key === this.criterion.metadata;
+      });
+      if (foundMetadata) {
+        if (foundMetadata.enumerations !== undefined) {
+          this.operationFormat = 'enum';
+          this.enumerations = foundMetadata.enumerations;
+        } else if (foundMetadata.format === 'string' || foundMetadata.format === 'number') {
+          this.operationFormat = foundMetadata.format;
+        } else if (Object.prototype.hasOwnProperty.call(foundMetadata.hints, 'range')) {
+          this.operationFormat = 'number';
+        } else if (Object.prototype.hasOwnProperty.call(foundMetadata.hints, 'domain')) {
+          this.operationFormat = 'number';
+        } else if (foundMetadata.key === 'name') {
+          this.operationFormat = 'string';
+        } else {
+          this.operationFormat = 'number';
+        }
+      } else if (this.criterion.metadata === 'dataReceived') {
+        this.operationFormat = 'number';
+      }
+
+      this.updateInputVisibilityAndValues();
+    },
+    updateMetadataOptions(ev) {
+      if (ev) {
+        this.clearDependentFields(ev.target);
+        this.persist();
+      }
+
+      if (this.criterion.telemetry) {
+        let telemetryObjects = this.telemetry;
+        if (this.criterion.telemetry !== 'all' && this.criterion.telemetry !== 'any') {
+          const found = this.telemetry.find((telemetryObj) =>
+            this.openmct.objects.areIdsEqual(telemetryObj.identifier, this.criterion.telemetry)
+          );
+          telemetryObjects = found ? [found] : [];
+        }
+
+        this.telemetryMetadataOptions = [];
+        telemetryObjects.forEach((telemetryObject) => {
+          let telemetryMetadata = this.openmct.telemetry.getMetadata(telemetryObject);
+          this.addMetaDataOptions(telemetryMetadata ? telemetryMetadata.values() : []);
+        });
+        this.updateOperations();
+      }
+    },
+    addMetaDataOptions(options) {
+      if (!this.telemetryMetadataOptions) {
+        this.telemetryMetadataOptions = options;
+      }
+
+      options.forEach((option) => {
+        const found = this.telemetryMetadataOptions.find((metadataOption) => {
+          return (
+            metadataOption.key &&
+            metadataOption.key === option.key &&
+            metadataOption.name &&
+            metadataOption.name === option.name
+          );
+        });
+        if (!found) {
+          this.telemetryMetadataOptions.push(option);
+        }
+      });
+    },
+    updateOperations(ev) {
+      this.updateOperationFormat();
+      if (ev) {
+        this.clearDependentFields(ev.target);
+        this.persist();
+      }
+    },
+    updateInputVisibilityAndValues(ev) {
+      if (ev) {
+        this.clearDependentFields();
+        this.persist();
+      }
+
+      for (let i = 0; i < this.filteredOps.length; i++) {
+        if (this.criterion.operation === this.filteredOps[i].name) {
+          this.inputCount = this.filteredOps[i].inputCount;
+        }
+      }
+
+      if (!this.inputCount) {
+        this.criterion.input = [];
+      }
+    },
+    clearDependentFields(el) {
+      if (el === this.$refs.telemetrySelect) {
+        this.criterion.metadata = '';
+      } else if (el === this.$refs.metadataSelect) {
+        if (!this.filteredOps.find((operation) => operation.name === this.criterion.operation)) {
+          this.criterion.operation = '';
+          this.criterion.input = this.enumerations.length
+            ? [this.enumerations[0].value.toString()]
+            : [];
+          this.inputCount = 0;
+        }
+      } else {
+        if (this.enumerations.length && !this.criterion.input.length) {
+          this.criterion.input = [this.enumerations[0].value.toString()];
+        }
+
+        this.inputCount = 0;
+      }
+    },
+    persist() {
+      this.$emit('persist', this.criterion);
+    }
+  }
+};
+</script>
diff --git a/src/plugins/condition/components/TestData.vue b/src/plugins/condition/components/TestData.vue
index aef62418966..7f538a4432d 100644
--- a/src/plugins/condition/components/TestData.vue
+++ b/src/plugins/condition/components/TestData.vue
@@ -1,239 +1,245 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 
 <template>
-<section v-show="isEditing"
-         id="test-data"
-         :class="{ 'is-expanded': expanded }"
->
+  <section v-show="isEditing" id="test-data" :class="{ 'is-expanded': expanded }">
     <div class="c-cs__header c-section__header">
-        <span
-            class="c-disclosure-triangle c-tree__item__view-control is-enabled"
-            :class="{ 'c-disclosure-triangle--expanded': expanded }"
-            @click="expanded = !expanded"
-        ></span>
-        <div class="c-cs__header-label c-section__label">Test Data</div>
+      <span
+        class="c-disclosure-triangle c-tree__item__view-control is-enabled"
+        :class="{ 'c-disclosure-triangle--expanded': expanded }"
+        @click="expanded = !expanded"
+      ></span>
+      <div class="c-cs__header-label c-section__label">Test Data</div>
     </div>
-    <div v-if="expanded"
-         class="c-cs__content"
-    >
-        <div class="c-cs__test-data__controls c-cdef__controls"
-             :disabled="!telemetry.length"
+    <div v-if="expanded" class="c-cs__content">
+      <div :class="['c-cs__test-data__controls c-cdef__controls', { disabled: !telemetry.length }]">
+        <label class="c-toggle-switch">
+          <input type="checkbox" :checked="isApplied" @change="applyTestData" />
+          <span class="c-toggle-switch__slider" aria-label="Apply Test Data"></span>
+          <span class="c-toggle-switch__label">Apply Test Data</span>
+        </label>
+      </div>
+      <div class="c-cs-tests">
+        <span
+          v-for="(testInput, tIndex) in testInputs"
+          :key="tIndex"
+          class="c-test-datum c-cs-test"
         >
-            <label class="c-toggle-switch">
-                <input
-                    type="checkbox"
-                    :checked="isApplied"
-                    @change="applyTestData"
+          <span class="c-cs-test__label">Set</span>
+          <span class="c-cs-test__controls">
+            <span class="c-cdef__control">
+              <select
+                v-model="testInput.telemetry"
+                aria-label="Test Data Telemetry Selection"
+                @change="updateMetadata(testInput)"
+              >
+                <option value="">- Select Telemetry -</option>
+                <option
+                  v-for="(telemetryOption, index) in telemetry"
+                  :key="index"
+                  :value="telemetryOption.identifier"
                 >
-                <span class="c-toggle-switch__slider"></span>
-                <span class="c-toggle-switch__label">Apply Test Data</span>
-            </label>
-        </div>
-        <div class="c-cs-tests">
-            <span v-for="(testInput, tIndex) in testInputs"
-                  :key="tIndex"
-                  class="c-test-datum c-cs-test"
-            >
-                <span class="c-cs-test__label">Set</span>
-                <span class="c-cs-test__controls">
-                    <span class="c-cdef__control">
-                        <select v-model="testInput.telemetry"
-                                @change="updateMetadata(testInput)"
-                        >
-                            <option value="">- Select Telemetry -</option>
-                            <option v-for="(telemetryOption, index) in telemetry"
-                                    :key="index"
-                                    :value="telemetryOption.identifier"
-                            >
-                                {{ telemetryOption.name }}
-                            </option>
-                        </select>
-                    </span>
-                    <span v-if="testInput.telemetry"
-                          class="c-cdef__control"
-                    >
-                        <select v-model="testInput.metadata"
-                                @change="updateTestData"
-                        >
-                            <option value="">- Select Field -</option>
-                            <option v-for="(option, index) in telemetryMetadataOptions[getId(testInput.telemetry)]"
-                                    :key="index"
-                                    :value="option.key"
-                            >
-                                {{ option.name }}
-                            </option>
-                        </select>
-                    </span>
-                    <span v-if="testInput.metadata"
-                          class="c-cdef__control__inputs"
-                    >
-                        <input v-model="testInput.value"
-                               placeholder="Enter test input"
-                               type="text"
-                               class="c-cdef__control__input"
-                               @change="updateTestData"
-                        >
-                    </span>
-                </span>
-                <div class="c-cs-test__buttons">
-                    <button class="c-click-icon c-test-data__duplicate-button icon-duplicate"
-                            title="Duplicate this test datum"
-                            @click="addTestInput(testInput)"
-                    ></button>
-                    <button class="c-click-icon c-test-data__delete-button icon-trash"
-                            title="Delete this test datum"
-                            @click="removeTestInput(tIndex)"
-                    ></button>
-                </div>
+                  {{ telemetryOption.name }}
+                </option>
+              </select>
             </span>
-        </div>
-        <button
-            v-show="isEditing"
-            id="addTestDatum"
-            class="c-button c-button--major icon-plus labeled"
-            @click="addTestInput"
-        >
-            <span class="c-cs-button__label">Add Test Datum</span>
-        </button>
+            <span v-if="testInput.telemetry" class="c-cdef__control">
+              <select
+                v-model="testInput.metadata"
+                aria-label="Test Data Metadata Selection"
+                @change="updateTestData"
+              >
+                <option value="">- Select Field -</option>
+                <option
+                  v-for="(option, index) in telemetryMetadataOptions[getId(testInput.telemetry)]"
+                  :key="index"
+                  :value="option.key"
+                >
+                  {{ option.name }}
+                </option>
+              </select>
+            </span>
+            <span v-if="testInput.metadata" class="c-cdef__control__inputs">
+              <input
+                v-model="testInput.value"
+                placeholder="Enter test input"
+                type="text"
+                class="c-cdef__control__input"
+                aria-label="Test Data Input"
+                @change="updateTestData"
+              />
+            </span>
+          </span>
+          <div class="c-cs-test__buttons">
+            <button
+              class="c-click-icon c-test-data__duplicate-button icon-duplicate"
+              title="Duplicate this test datum"
+              @click="addTestInput(testInput)"
+            ></button>
+            <button
+              class="c-click-icon c-test-data__delete-button icon-trash"
+              title="Delete this test datum"
+              @click="removeTestInput(tIndex)"
+            ></button>
+          </div>
+        </span>
+      </div>
+      <button
+        v-show="isEditing"
+        id="addTestDatum"
+        class="c-button c-button--major icon-plus labeled"
+        @click="addTestInput"
+      >
+        <span class="c-cs-button__label">Add Test Datum</span>
+      </button>
     </div>
-</section>
+  </section>
 </template>
 
 <script>
 export default {
-    inject: ['openmct'],
-    props: {
-        isEditing: Boolean,
-        telemetry: {
-            type: Array,
-            required: true,
-            default: () => []
-        },
-        testData: {
-            type: Object,
-            required: true,
-            default: () => {
-                return {
-                    applied: false,
-                    conditionTestInputs: []
-                };
-            }
-        }
+  inject: ['openmct'],
+  props: {
+    isEditing: Boolean,
+    telemetry: {
+      type: Array,
+      required: true,
+      default: () => []
     },
-    data() {
+    testData: {
+      type: Object,
+      required: true,
+      default: () => {
         return {
-            expanded: true,
-            isApplied: false,
-            testInputs: [],
-            telemetryMetadataOptions: {}
+          applied: false,
+          conditionTestInputs: []
         };
-    },
-    watch: {
-        isEditing(editing) {
-            if (!editing) {
-                this.resetApplied();
-            }
-        },
-        telemetry: {
-            handler() {
-                this.initializeMetadata();
-            },
-            deep: true
-        },
-        testData: {
-            handler() {
-                this.initialize();
-            },
-            deep: true
-        }
-    },
-    beforeDestroy() {
+      }
+    }
+  },
+  emits: ['update-test-data'],
+  data() {
+    return {
+      expanded: true,
+      isApplied: false,
+      testInputs: [],
+      telemetryMetadataOptions: {}
+    };
+  },
+  watch: {
+    isEditing(editing) {
+      if (!editing) {
         this.resetApplied();
+      }
     },
-    mounted() {
-        this.initialize();
+    telemetry: {
+      handler() {
         this.initializeMetadata();
+      },
+      deep: true
     },
-    methods: {
-        applyTestData() {
-            this.isApplied = !this.isApplied;
-            this.updateTestData();
-        },
-        initialize() {
-            if (this.testData && this.testData.conditionTestInputs) {
-                this.testInputs = this.testData.conditionTestInputs;
-            }
-
-            if (!this.testInputs.length) {
-                this.addTestInput();
-            }
-        },
-        initializeMetadata() {
-            this.telemetry.forEach((telemetryObject) => {
-                const id = this.openmct.objects.makeKeyString(telemetryObject.identifier);
-                let telemetryMetadata = this.openmct.telemetry.getMetadata(telemetryObject);
-                this.telemetryMetadataOptions[id] = telemetryMetadata.values().slice();
-            });
-        },
-        addTestInput(testInput) {
-            this.testInputs.push(Object.assign({
-                telemetry: '',
-                metadata: '',
-                input: ''
-            }, testInput));
-        },
-        removeTestInput(index) {
-            this.testInputs.splice(index, 1);
-            this.updateTestData();
-        },
-        getId(identifier) {
-            if (identifier) {
-                return this.openmct.objects.makeKeyString(identifier);
-            }
+    testData: {
+      handler() {
+        this.initialize();
+      },
+      deep: true
+    }
+  },
+  beforeUnmount() {
+    this.resetApplied();
+  },
+  mounted() {
+    this.initialize();
+    this.initializeMetadata();
+  },
+  methods: {
+    applyTestData() {
+      this.isApplied = !this.isApplied;
+      this.updateTestData();
+    },
+    initialize() {
+      if (this.testData && this.testData.conditionTestInputs) {
+        this.testInputs = this.testData.conditionTestInputs;
+      }
 
-            return [];
-        },
-        updateMetadata(testInput) {
-            if (testInput.telemetry) {
-                const id = this.openmct.objects.makeKeyString(testInput.telemetry);
-                if (this.telemetryMetadataOptions[id]) {
-                    return;
-                }
+      if (!this.testInputs.length) {
+        this.addTestInput();
+      }
+    },
+    initializeMetadata() {
+      this.telemetry.forEach((telemetryObject) => {
+        const id = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+        let telemetryMetadata = this.openmct.telemetry.getMetadata(telemetryObject);
+        if (telemetryMetadata) {
+          this.telemetryMetadataOptions[id] = telemetryMetadata.values().slice();
+        } else {
+          this.telemetryMetadataOptions[id] = [];
+        }
+      });
+    },
+    addTestInput(testInput) {
+      this.testInputs.push(
+        Object.assign(
+          {
+            telemetry: '',
+            metadata: '',
+            input: ''
+          },
+          testInput
+        )
+      );
+    },
+    removeTestInput(index) {
+      this.testInputs.splice(index, 1);
+      this.updateTestData();
+    },
+    getId(identifier) {
+      if (identifier) {
+        return this.openmct.objects.makeKeyString(identifier);
+      }
 
-                let telemetryMetadata = this.openmct.telemetry.getMetadata(testInput);
-                this.telemetryMetadataOptions[id] = telemetryMetadata.values().slice();
-            }
-        },
-        resetApplied() {
-            this.isApplied = false;
-            this.updateTestData();
-        },
-        updateTestData() {
-            this.$emit('updateTestData', {
-                applied: this.isApplied,
-                conditionTestInputs: this.testInputs
-            });
+      return [];
+    },
+    updateMetadata(testInput) {
+      if (testInput.telemetry) {
+        const id = this.openmct.objects.makeKeyString(testInput.telemetry);
+        if (this.telemetryMetadataOptions[id]) {
+          return;
         }
+
+        let telemetryMetadata = this.openmct.telemetry.getMetadata(testInput);
+        this.telemetryMetadataOptions[id] = telemetryMetadata.values().slice();
+      }
+    },
+    resetApplied() {
+      this.isApplied = false;
+      this.updateTestData();
+    },
+    updateTestData() {
+      this.$emit('update-test-data', {
+        applied: this.isApplied,
+        conditionTestInputs: this.testInputs
+      });
     }
+  }
 };
 </script>
diff --git a/src/plugins/condition/components/conditionals.scss b/src/plugins/condition/components/conditionals.scss
index f51ab904f1b..10ea1169aab 100644
--- a/src/plugins/condition/components/conditionals.scss
+++ b/src/plugins/condition/components/conditionals.scss
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,299 +21,303 @@
  *****************************************************************************/
 /***************************** DRAGGING */
 .is-active-dragging {
-    .c-condition-h__drop-target {
-        height: 3px;
-        margin-bottom: $interiorMarginSm;
-    }
+  .c-condition-h__drop-target {
+    height: 3px;
+    margin-bottom: $interiorMarginSm;
+  }
 }
 
 .c-condition-h {
-    &__drop-target {
-        border-radius: $controlCr;
-        height: 0;
-        min-height: 0;
-        transition: background-color, height;
-        transition-duration: 150ms;
-    }
+  &__drop-target {
+    border-radius: $controlCr;
+    height: 0;
+    min-height: 0;
+    transition: background-color, height;
+    transition-duration: 150ms;
+  }
 
-    &.is-drag-target {
-        .c-condition > * {
-            pointer-events: none; // Keeps the JS drop handler from being intercepted by internal elements
-        }
+  &.is-drag-target {
+    .c-condition > * {
+      pointer-events: none; // Keeps the JS drop handler from being intercepted by internal elements
+    }
 
-        .c-condition-h__drop-target {
-            background-color: rgba($colorKey, 0.7);
-        }
+    .c-condition-h__drop-target {
+      background-color: rgba($colorKey, 0.7);
     }
+  }
 }
 
 .c-cs {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  height: 100%;
+  overflow: hidden;
+
+  &.is-stale {
+    @include isStaleHolder();
+  }
+
+  /************************** CONDITION SET LAYOUT */
+  &__current-output {
+    flex: 0 0 auto;
+  }
+
+  &__test-data-and-conditions-w {
     display: flex;
     flex-direction: column;
     flex: 1 1 auto;
     height: 100%;
     overflow: hidden;
+  }
 
-    /************************** CONDITION SET LAYOUT */
-    &__current-output {
-        flex: 0 0 auto;
-    }
+  &__test-data,
+  &__conditions {
+    flex: 0 0 auto;
+    overflow: hidden;
+  }
 
-    &__test-data-and-conditions-w {
-        display: flex;
-        flex-direction: column;
-        flex: 1 1 auto;
-        height: 100%;
-        overflow: hidden;
-    }
+  &__test-data {
+    flex: 0 0 auto;
+    max-height: 50%;
 
-    &__test-data,
-    &__conditions {
-        flex: 0 0 auto;
-        overflow: hidden;
+    &.is-expanded {
+      margin-bottom: $interiorMargin * 4;
     }
+  }
 
-    &__test-data {
-        flex: 0 0 auto;
-        max-height: 50%;
+  &__conditions {
+    flex: 1 1 auto;
 
-        &.is-expanded {
-            margin-bottom: $interiorMargin * 4;
-        }
+    > * + * {
+      margin-top: $interiorMarginSm;
     }
+  }
 
-    &__conditions {
-        flex: 1 1 auto;
+  &__content {
+    display: flex;
+    flex-direction: column;
+    flex: 0 1 auto;
+    overflow: hidden;
 
-        > * + * {
-            margin-top: $interiorMarginSm;
-        }
+    > * {
+      flex: 0 0 auto;
+      overflow: hidden;
+      + * {
+        margin-top: $interiorMarginSm;
+      }
     }
 
-    &__content {
-        display: flex;
-        flex-direction: column;
-        flex: 0 1 auto;
-        overflow: hidden;
-
-        > * {
-            flex: 0 0 auto;
-            overflow: hidden;
-            + * {
-                margin-top: $interiorMarginSm;
-            }
-        }
-
-        .c-button {
-            align-self: start;
-        }
+    .c-button {
+      align-self: start;
     }
+  }
 
-    .is-editing & {
-        // Add some space to kick away from blue editing border indication
-        padding: $interiorMargin;
-    }
+  .is-editing & {
+    // Add some space to kick away from blue editing border indication
+    padding: $interiorMargin;
+  }
+
+  section {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  &__conditions-h {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    overflow: auto;
+    padding-right: $interiorMarginSm;
 
-    section {
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
+    > * + * {
+      margin-top: $interiorMarginSm;
     }
+  }
+
+  .hint {
+    padding: $interiorMarginSm;
+  }
 
-    &__conditions-h {
-        display: flex;
-        flex-direction: column;
-        flex: 1 1 auto;
-        overflow: auto;
-        padding-right: $interiorMarginSm;
+  /************************** SPECIFIC ITEMS */
+  &__current-output-value {
+    flex-direction: row;
+    align-items: baseline;
+    padding: 0 $interiorMargin $interiorMarginLg $interiorMargin;
 
-        > * + * {
-            margin-top: $interiorMarginSm;
-        }
+    > * {
+      padding: $interiorMargin 0; // Must do this to align label and value
     }
 
-    .hint {
-        padding: $interiorMarginSm;
+    &__label {
+      color: $colorInspectorSectionHeaderFg;
+      opacity: 0.9;
+      text-transform: uppercase;
     }
 
-    /************************** SPECIFIC ITEMS */
-    &__current-output-value {
-        flex-direction: row;
-        align-items: baseline;
-        padding: 0 $interiorMargin $interiorMarginLg $interiorMargin;
-
-        > * {
-            padding: $interiorMargin 0; // Must do this to align label and value
-        }
-
-        &__label {
-            color: $colorInspectorSectionHeaderFg;
-            opacity: 0.9;
-            text-transform: uppercase;
-        }
-
-        &__value {
-            $p: $interiorMargin * 3;
-            font-size: 1.25em;
-            margin-left: $interiorMargin;
-            padding-left: $p;
-            padding-right: $p;
-            background: rgba(black, 0.2);
-            border-radius: 5px;
-        }
+    &__value {
+      $p: $interiorMargin * 3;
+      font-size: 1.25em;
+      margin-left: $interiorMargin;
+      padding-left: $p;
+      padding-right: $p;
+      background: rgba(black, 0.2);
+      border-radius: 5px;
     }
+  }
 }
 
 /***************************** CONDITIONS AND TEST DATUM ELEMENTS */
 .c-condition,
 .c-test-datum {
-    @include discreteItem();
-    display: flex;
-    padding: $interiorMargin;
-    line-height: 170%; // Aligns text with controls like selects
+  @include discreteItem();
+  display: flex;
+  padding: $interiorMargin;
+  line-height: 170%; // Aligns text with controls like selects
 }
 
 .c-cdef,
 .c-cs-test {
-    &__controls {
-        display: flex;
-        flex: 1 1 auto;
-        flex-wrap: wrap;
-
-        > * > * {
-            margin-right: $interiorMarginSm;
-        }
-    }
+  &__controls {
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
 
-    &__buttons {
-        white-space: nowrap;
+    > * > * {
+      margin-right: $interiorMarginSm;
     }
+  }
+
+  &__buttons {
+    white-space: nowrap;
+  }
 }
 
 .c-condition {
-    border: 1px solid transparent;
-    flex-direction: column;
-    min-width: 400px;
-
-    > * + * {
-        margin-top: $interiorMarginSm;
-    }
-    &--browse {
-        .c-condition__summary {
-            border-top: 1px solid $colorInteriorBorder;
-            padding-top: $interiorMargin;
-        }
-    }
+  border: 1px solid transparent;
+  flex-direction: column;
+  min-width: 400px;
+
+  > * + * {
+    margin-top: $interiorMarginSm;
+  }
+  &--browse {
+    .c-condition__summary {
+      border-top: 1px solid $colorInteriorBorder;
+      padding-top: $interiorMargin;
+    }
+  }
+
+  /***************************** HEADER */
+  &__header {
+    $h: 22px;
+    display: flex;
+    align-items: start;
+    align-content: stretch;
+    overflow: hidden;
+    min-height: $h;
+    line-height: $h;
 
-    /***************************** HEADER */
-    &__header {
-        $h: 22px;
-        display: flex;
-        align-items: start;
-        align-content: stretch;
-        overflow: hidden;
-        min-height: $h;
-        line-height: $h;
-
-        > * {
-            flex: 0 0 auto;
-            + * {
-                margin-left: $interiorMarginSm;
-            }
-        }
+    > * {
+      flex: 0 0 auto;
+      + * {
+        margin-left: $interiorMarginSm;
+      }
     }
+  }
 
-    &__drag-grippy {
-        transform: translateY(50%);
-    }
+  &__drag-grippy {
+    transform: translateY(50%);
+  }
 
-    &__name {
-        font-weight: bold;
-        align-self: baseline; // Fixes bold line-height offset problem
-    }
+  &__name {
+    font-weight: bold;
+    align-self: baseline; // Fixes bold line-height offset problem
+  }
 
-    &__output,
-    &__summary {
-        flex: 1 1 auto;
-    }
+  &__output,
+  &__summary {
+    flex: 1 1 auto;
+  }
 
-    &.is-current {
-        $c: $colorBodyFg;
-        border-color: rgba($c, 0.2);
-        background: rgba($c, 0.2);
-    }
+  &.is-current {
+    $c: $colorBodyFg;
+    border-color: rgba($c, 0.2);
+    background: rgba($c, 0.2);
+  }
 }
 
 /***************************** CONDITION DEFINITION, EDITING */
 .c-cdef {
-    display: grid;
-    grid-row-gap: $interiorMarginSm;
-    grid-column-gap: $interiorMargin;
-    grid-auto-columns: min-content 1fr max-content;
-    align-items: start;
-    min-width: 150px;
-    margin-left: 29px;
-    overflow: hidden;
-
-    &__criteria,
-    &__match-and-criteria {
-        display: contents;
-    }
-
-    &__label {
-        grid-column: 1;
-        text-align: right;
-        white-space: nowrap;
-    }
-
-    &__separator {
-        grid-column: 1 / span 3;
-    }
-
-    &__controls {
-        align-items: flex-start;
-        grid-column: 2;
-
-        > * > * {
-            margin-right: $interiorMarginSm;
-        }
-    }
-
-    &__buttons {
-        grid-column: 3;
-    }
+  display: grid;
+  grid-row-gap: $interiorMarginSm;
+  grid-column-gap: $interiorMargin;
+  grid-auto-columns: min-content 1fr max-content;
+  align-items: start;
+  min-width: 150px;
+  margin-left: 29px;
+  overflow: hidden;
+
+  &__criteria,
+  &__match-and-criteria {
+    display: contents;
+  }
+
+  &__label {
+    grid-column: 1;
+    text-align: right;
+    white-space: nowrap;
+  }
+
+  &__separator {
+    grid-column: 1 / span 3;
+  }
+
+  &__controls {
+    align-items: flex-start;
+    grid-column: 2;
+
+    > * > * {
+      margin-right: $interiorMarginSm;
+    }
+  }
+
+  &__buttons {
+    grid-column: 3;
+  }
 }
 
 .c-c__drag-ghost {
-    width: 100%;
-    min-height: $interiorMarginSm;
-
-    &.dragging {
-        min-height: 5em;
-        background-color: lightblue;
-        border-radius: 2px;
-    }
+  width: 100%;
+  min-height: $interiorMarginSm;
+
+  &.dragging {
+    min-height: 5em;
+    background-color: lightblue;
+    border-radius: 2px;
+  }
 }
 
 /***************************** TEST DATA */
 .c-cs__test-data {
-    &__controls {
-        flex: 0 0 auto;
-    }
+  &__controls {
+    flex: 0 0 auto;
+  }
 }
 
 .c-cs-tests {
-    flex: 0 1 auto;
-    overflow: auto;
-    padding-right: $interiorMarginSm;
+  flex: 0 1 auto;
+  overflow: auto;
+  padding-right: $interiorMarginSm;
 
-    > * + * {
-        margin-top: $interiorMarginSm;
-    }
+  > * + * {
+    margin-top: $interiorMarginSm;
+  }
 }
 
 .c-cs-test {
-    > * + * {
-        margin-left: $interiorMargin;
-    }
+  > * + * {
+    margin-left: $interiorMargin;
+  }
 }
diff --git a/src/plugins/condition/components/inspector/ConditionSetDialogTreeItem.vue b/src/plugins/condition/components/inspector/ConditionSetDialogTreeItem.vue
deleted file mode 100644
index 9f11298e486..00000000000
--- a/src/plugins/condition/components/inspector/ConditionSetDialogTreeItem.vue
+++ /dev/null
@@ -1,190 +0,0 @@
-/*****************************************************************************
-* Open MCT, Copyright (c) 2014-2021, United States Government
-* as represented by the Administrator of the National Aeronautics and Space
-* Administration. All rights reserved.
-*
-* Open MCT is licensed under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-* http://www.apache.org/licenses/LICENSE-2.0.
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-* License for the specific language governing permissions and limitations
-* under the License.
-*
-* Open MCT includes source code licensed under additional open source
-* licenses. See the Open Source Licenses file (LICENSES.md) included with
-* this source code distribution or the Licensing information page available
-* at runtime from the About dialog for additional information.
-*****************************************************************************/
-
-<template>
-<li class="c-tree__item-h">
-    <div
-        class="c-tree__item"
-        :class="{ 'is-alias': isAlias, 'is-navigated-object': navigated }"
-        @click="handleItemSelected(node.object, node)"
-    >
-        <view-control
-            v-model="expanded"
-            class="c-tree__item__view-control"
-            :enabled="hasChildren"
-        />
-        <div class="c-tree__item__label c-object-label">
-            <div
-                class="c-tree__item__type-icon c-object-label__type-icon"
-                :class="typeClass"
-            ></div>
-            <div class="c-tree__item__name c-object-label__name">{{ node.object.name }}</div>
-        </div>
-    </div>
-    <ul
-        v-if="expanded && !isLoading"
-        class="c-tree"
-    >
-        <li
-            v-if="isLoading && !loaded"
-            class="c-tree__item-h"
-        >
-            <div class="c-tree__item loading">
-                <span class="c-tree__item__label">Loading...</span>
-            </div>
-        </li>
-        <condition-set-dialog-tree-item
-            v-for="child in children"
-            :key="child.id"
-            :node="child"
-            :selected-item="selectedItem"
-            :handle-item-selected="handleItemSelected"
-        />
-    </ul>
-</li>
-</template>
-
-<script>
-import viewControl from '@/ui/components/viewControl.vue';
-
-export default {
-    name: 'ConditionSetDialogTreeItem',
-    components: {
-        viewControl
-    },
-    inject: ['openmct'],
-    props: {
-        node: {
-            type: Object,
-            required: true
-        },
-        selectedItem: {
-            type: Object,
-            default() {
-                return undefined;
-            }
-        },
-        handleItemSelected: {
-            type: Function,
-            default() {
-                return (item) => {};
-            }
-        }
-    },
-    data() {
-        return {
-            hasChildren: false,
-            isLoading: false,
-            loaded: false,
-            children: [],
-            expanded: false
-        };
-    },
-    computed: {
-        navigated() {
-            const itemId = this.selectedItem && this.selectedItem.itemId;
-            const isSelectedObject = itemId && this.openmct.objects.areIdsEqual(this.node.object.identifier, itemId);
-            if (isSelectedObject && this.node.objectPath && this.node.objectPath.length > 1) {
-                const isParent = this.openmct.objects.areIdsEqual(this.node.objectPath[1].identifier, this.selectedItem.parentId);
-
-                return isSelectedObject && isParent;
-            }
-
-            return isSelectedObject;
-        },
-        isAlias() {
-            let parent = this.node.objectPath[1];
-            if (!parent) {
-                return false;
-            }
-
-            let parentKeyString = this.openmct.objects.makeKeyString(parent.identifier);
-
-            return parentKeyString !== this.node.object.location;
-        },
-        typeClass() {
-            let type = this.openmct.types.get(this.node.object.type);
-            if (!type) {
-                return 'icon-object-unknown';
-            }
-
-            return type.definition.cssClass;
-        }
-    },
-    watch: {
-        expanded() {
-            if (!this.hasChildren) {
-                return;
-            }
-
-            if (!this.loaded && !this.isLoading) {
-                this.composition = this.openmct.composition.get(this.domainObject);
-                this.composition.on('add', this.addChild);
-                this.composition.on('remove', this.removeChild);
-                this.composition.load().then(this.finishLoading);
-                this.isLoading = true;
-            }
-        }
-    },
-    mounted() {
-        this.domainObject = this.node.object;
-        let removeListener = this.openmct.objects.observe(this.domainObject, '*', (newObject) => {
-            this.domainObject = newObject;
-        });
-
-        this.$once('hook:destroyed', removeListener);
-        if (this.openmct.composition.get(this.node.object)) {
-            this.hasChildren = true;
-        }
-
-    },
-    beforeDestroy() {
-        this.expanded = false;
-    },
-    destroyed() {
-        if (this.composition) {
-            this.composition.off('add', this.addChild);
-            this.composition.off('remove', this.removeChild);
-            delete this.composition;
-        }
-    },
-    methods: {
-        addChild(child) {
-            this.children.push({
-                id: this.openmct.objects.makeKeyString(child.identifier),
-                object: child,
-                objectPath: [child].concat(this.node.objectPath),
-                navigateToParent: this.navigateToPath
-            });
-        },
-        removeChild(identifier) {
-            let removeId = this.openmct.objects.makeKeyString(identifier);
-            this.children = this.children
-                .filter(c => c.id !== removeId);
-        },
-        finishLoading() {
-            this.isLoading = false;
-            this.loaded = true;
-        }
-    }
-};
-</script>
diff --git a/src/plugins/condition/components/inspector/ConditionSetSelectorDialog.vue b/src/plugins/condition/components/inspector/ConditionSetSelectorDialog.vue
deleted file mode 100644
index a0947a2de44..00000000000
--- a/src/plugins/condition/components/inspector/ConditionSetSelectorDialog.vue
+++ /dev/null
@@ -1,192 +0,0 @@
-/*****************************************************************************
-* Open MCT, Copyright (c) 2014-2021, United States Government
-* as represented by the Administrator of the National Aeronautics and Space
-* Administration. All rights reserved.
-*
-* Open MCT is licensed under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-* http://www.apache.org/licenses/LICENSE-2.0.
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-* License for the specific language governing permissions and limitations
-* under the License.
-*
-* Open MCT includes source code licensed under additional open source
-* licenses. See the Open Source Licenses file (LICENSES.md) included with
-* this source code distribution or the Licensing information page available
-* at runtime from the About dialog for additional information.
-*****************************************************************************/
-
-<template>
-<div class="u-contents">
-    <div class="c-overlay__top-bar">
-        <div class="c-overlay__dialog-title">Select Condition Set</div>
-    </div>
-    <div class="c-overlay__contents-main c-selector c-tree-and-search">
-        <div class="c-tree-and-search__search">
-            <search ref="shell-search"
-                    class="c-search"
-                    :value="searchValue"
-                    @input="searchTree"
-                    @clear="searchTree"
-            />
-        </div>
-
-        <!-- loading -->
-        <div v-if="isLoading"
-             class="c-tree-and-search__loading loading"
-        ></div>
-        <!-- end loading -->
-
-        <div v-if="shouldDisplayNoResultsText"
-             class="c-tree-and-search__no-results"
-        >
-            No results found
-        </div>
-
-        <!-- main tree -->
-        <ul v-if="!isLoading"
-            v-show="!searchValue"
-            class="c-tree-and-search__tree c-tree"
-        >
-            <condition-set-dialog-tree-item
-                v-for="treeItem in allTreeItems"
-                :key="treeItem.id"
-                :node="treeItem"
-                :selected-item="selectedItem"
-                :handle-item-selected="handleItemSelection"
-            />
-        </ul>
-        <!-- end main tree -->
-
-        <!-- search tree -->
-        <ul v-if="searchValue && !isLoading"
-            class="c-tree-and-search__tree c-tree"
-        >
-            <condition-set-dialog-tree-item
-                v-for="treeItem in filteredTreeItems"
-                :key="treeItem.id"
-                :node="treeItem"
-                :selected-item="selectedItem"
-                :handle-item-selected="handleItemSelection"
-            />
-        </ul>
-        <!-- end search tree -->
-    </div>
-</div>
-</template>
-
-<script>
-import debounce from 'lodash/debounce';
-import search from '@/ui/components/search.vue';
-import ConditionSetDialogTreeItem from './ConditionSetDialogTreeItem.vue';
-
-export default {
-    name: 'ConditionSetSelectorDialog',
-    components: {
-        search,
-        ConditionSetDialogTreeItem
-    },
-    inject: ['openmct'],
-    data() {
-        return {
-            expanded: false,
-            searchValue: '',
-            allTreeItems: [],
-            filteredTreeItems: [],
-            isLoading: false,
-            selectedItem: undefined
-        };
-    },
-    computed: {
-        shouldDisplayNoResultsText() {
-            if (this.isLoading) {
-                return false;
-            }
-
-            return this.allTreeItems.length === 0
-                || (this.searchValue && this.filteredTreeItems.length === 0);
-        }
-    },
-    created() {
-        this.getDebouncedFilteredChildren = debounce(this.getFilteredChildren, 400);
-    },
-    mounted() {
-        this.getAllChildren();
-    },
-    methods: {
-        getAllChildren() {
-            this.isLoading = true;
-            this.openmct.objects.get('ROOT')
-                .then(root => {
-                    return this.openmct.composition.get(root).load();
-                })
-                .then(children => {
-                    this.isLoading = false;
-                    this.allTreeItems = children.map(c => {
-                        return {
-                            id: this.openmct.objects.makeKeyString(c.identifier),
-                            object: c,
-                            objectPath: [c],
-                            navigateToParent: '/browse'
-                        };
-                    });
-                });
-        },
-        getFilteredChildren() {
-            // clear any previous search results
-            this.filteredTreeItems = [];
-
-            const promises = this.openmct.objects.search(this.searchValue)
-                .map(promise => promise
-                    .then(results => this.aggregateFilteredChildren(results)));
-
-            Promise.all(promises).then(() => {
-                this.isLoading = false;
-            });
-        },
-        async aggregateFilteredChildren(results) {
-            for (const object of results) {
-                const objectPath = await this.openmct.objects.getOriginalPath(object.identifier);
-
-                const navigateToParent = '/browse/'
-                    + objectPath.slice(1)
-                        .map(parent => this.openmct.objects.makeKeyString(parent.identifier))
-                        .join('/');
-
-                const filteredChild = {
-                    id: this.openmct.objects.makeKeyString(object.identifier),
-                    object,
-                    objectPath,
-                    navigateToParent
-                };
-
-                this.filteredTreeItems.push(filteredChild);
-            }
-        },
-        searchTree(value) {
-            this.searchValue = value;
-            this.isLoading = true;
-
-            if (this.searchValue !== '') {
-                this.getDebouncedFilteredChildren();
-            } else {
-                this.isLoading = false;
-            }
-        },
-        handleItemSelection(item, node) {
-            if (item && item.type === 'conditionSet') {
-                const parentId = (node.objectPath && node.objectPath.length > 1) ? node.objectPath[1].identifier : undefined;
-                this.selectedItem = {
-                    itemId: item.identifier,
-                    parentId
-                };
-                this.$emit('conditionSetSelected', item);
-            }
-        }
-    }
-};
-</script>
diff --git a/src/plugins/condition/components/inspector/ConditionalStylesView.vue b/src/plugins/condition/components/inspector/ConditionalStylesView.vue
index 3a01dcf3d1e..e69de29bb2d 100644
--- a/src/plugins/condition/components/inspector/ConditionalStylesView.vue
+++ b/src/plugins/condition/components/inspector/ConditionalStylesView.vue
@@ -1,477 +0,0 @@
-/*****************************************************************************
-* Open MCT, Copyright (c) 2014-2021, United States Government
-* as represented by the Administrator of the National Aeronautics and Space
-* Administration. All rights reserved.
-*
-* Open MCT is licensed under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-* http://www.apache.org/licenses/LICENSE-2.0.
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-* License for the specific language governing permissions and limitations
-* under the License.
-*
-* Open MCT includes source code licensed under additional open source
-* licenses. See the Open Source Licenses file (LICENSES.md) included with
-* this source code distribution or the Licensing information page available
-* at runtime from the About dialog for additional information.
-*****************************************************************************/
-
-<template>
-<div class="c-inspector__styles c-inspect-styles">
-    <template v-if="!conditionSetDomainObject">
-        <div class="c-inspect-styles__header">
-            Object Style
-        </div>
-        <div class="c-inspect-styles__content">
-            <div v-if="staticStyle"
-                 class="c-inspect-styles__style"
-            >
-                <style-editor class="c-inspect-styles__editor"
-                              :style-item="staticStyle"
-                              :is-editing="isEditing"
-                              @persist="updateStaticStyle"
-                />
-            </div>
-            <button
-                id="addConditionSet"
-                class="c-button c-button--major c-toggle-styling-button labeled"
-                @click="addConditionSet"
-            >
-                <span class="c-cs-button__label">Use Conditional Styling...</span>
-            </button>
-        </div>
-    </template>
-    <template v-else>
-        <div class="c-inspect-styles__header">
-            Conditional Object Styles
-        </div>
-        <div class="c-inspect-styles__content c-inspect-styles__condition-set">
-            <a v-if="conditionSetDomainObject"
-               class="c-object-label icon-conditional"
-               @click="navigateOrPreview"
-            >
-                <span class="c-object-label__name">{{ conditionSetDomainObject.name }}</span>
-            </a>
-            <template v-if="isEditing">
-                <button
-                    id="changeConditionSet"
-                    class="c-button labeled"
-                    @click="addConditionSet"
-                >
-                    <span class="c-button__label">Change...</span>
-                </button>
-
-                <button class="c-click-icon icon-x"
-                        title="Remove conditional styles"
-                        @click="removeConditionSet"
-                ></button>
-            </template>
-        </div>
-
-        <div v-if="conditionsLoaded"
-             class="c-inspect-styles__conditions"
-        >
-            <div v-for="(conditionStyle, index) in conditionalStyles"
-                 :key="index"
-                 class="c-inspect-styles__condition"
-                 :class="{'is-current': conditionStyle.conditionId === selectedConditionId}"
-                 @click="applySelectedConditionStyle(conditionStyle.conditionId)"
-            >
-                <condition-error :show-label="true"
-                                 :condition="getCondition(conditionStyle.conditionId)"
-                />
-                <condition-description :show-label="true"
-                                       :condition="getCondition(conditionStyle.conditionId)"
-                />
-                <style-editor class="c-inspect-styles__editor"
-                              :style-item="conditionStyle"
-                              :is-editing="isEditing"
-                              @persist="updateConditionalStyle"
-                />
-            </div>
-        </div>
-    </template>
-</div>
-</template>
-
-<script>
-
-import StyleEditor from "./StyleEditor.vue";
-import ConditionSetSelectorDialog from "./ConditionSetSelectorDialog.vue";
-import ConditionDescription from "@/plugins/condition/components/ConditionDescription.vue";
-import ConditionError from "@/plugins/condition/components/ConditionError.vue";
-import Vue from 'vue';
-import PreviewAction from "@/ui/preview/PreviewAction.js";
-import {getApplicableStylesForItem} from "@/plugins/condition/utils/styleUtils";
-import isEmpty from 'lodash/isEmpty';
-
-export default {
-    name: 'ConditionalStylesView',
-    components: {
-        ConditionDescription,
-        ConditionError,
-        StyleEditor
-    },
-    inject: [
-        'openmct',
-        'selection'
-    ],
-    data() {
-        return {
-            conditionalStyles: [],
-            staticStyle: undefined,
-            conditionSetDomainObject: undefined,
-            isEditing: this.openmct.editor.isEditing(),
-            conditions: undefined,
-            conditionsLoaded: false,
-            navigateToPath: '',
-            selectedConditionId: ''
-        };
-    },
-    destroyed() {
-        this.removeListeners();
-    },
-    mounted() {
-        this.itemId = '';
-        this.getDomainObjectFromSelection();
-        this.previewAction = new PreviewAction(this.openmct);
-        if (this.domainObject.configuration && this.domainObject.configuration.objectStyles) {
-            let objectStyles = this.itemId ? this.domainObject.configuration.objectStyles[this.itemId] : this.domainObject.configuration.objectStyles;
-            this.initializeStaticStyle(objectStyles);
-            if (objectStyles && objectStyles.conditionSetIdentifier) {
-                this.openmct.objects.get(objectStyles.conditionSetIdentifier).then(this.initialize);
-                this.conditionalStyles = objectStyles.styles;
-            }
-        } else {
-            this.initializeStaticStyle();
-        }
-
-        this.openmct.editor.on('isEditing', this.setEditState);
-    },
-    methods: {
-        isItemType(type, item) {
-            return item && (item.type === type);
-        },
-        getDomainObjectFromSelection() {
-            let layoutItem;
-            let domainObject;
-
-            if (this.selection[0].length > 1) {
-                //If there are more than 1 items in the this.selection[0] list, the first one could either be a sub domain object OR a layout drawing control.
-                //The second item in the this.selection[0] list is the container object (usually a layout)
-                layoutItem = this.selection[0][0].context.layoutItem;
-                const item = this.selection[0][0].context.item;
-                this.canHide = true;
-                if (item
-                    && (!layoutItem || (this.isItemType('subobject-view', layoutItem)))) {
-                    domainObject = item;
-                } else {
-                    domainObject = this.selection[0][1].context.item;
-                    if (layoutItem) {
-                        this.itemId = layoutItem.id;
-                    }
-                }
-            } else {
-                domainObject = this.selection[0][0].context.item;
-            }
-
-            this.domainObject = domainObject;
-            this.initialStyles = getApplicableStylesForItem(domainObject, layoutItem);
-            this.$nextTick(() => {
-                this.removeListeners();
-                if (this.domainObject) {
-                    this.stopObserving = this.openmct.objects.observe(this.domainObject, '*', newDomainObject => this.domainObject = newDomainObject);
-                    this.stopObservingItems = this.openmct.objects.observe(this.domainObject, 'configuration.items', this.updateDomainObjectItemStyles);
-                }
-            });
-        },
-        removeListeners() {
-            if (this.stopObserving) {
-                this.stopObserving();
-            }
-
-            if (this.stopObservingItems) {
-                this.stopObservingItems();
-            }
-
-            if (this.stopProvidingTelemetry) {
-                this.stopProvidingTelemetry();
-                delete this.stopProvidingTelemetry;
-            }
-        },
-        initialize(conditionSetDomainObject) {
-            //If there are new conditions in the conditionSet we need to set those styles to default
-            this.conditionSetDomainObject = conditionSetDomainObject;
-            this.enableConditionSetNav();
-            this.initializeConditionalStyles();
-        },
-        setEditState(isEditing) {
-            this.isEditing = isEditing;
-            if (this.isEditing) {
-                if (this.stopProvidingTelemetry) {
-                    this.stopProvidingTelemetry();
-                    delete this.stopProvidingTelemetry;
-                }
-            } else {
-                this.subscribeToConditionSet();
-            }
-        },
-        addConditionSet() {
-            let conditionSetDomainObject;
-            let self = this;
-
-            function handleItemSelection(item) {
-                if (item) {
-                    conditionSetDomainObject = item;
-                }
-            }
-
-            function dismissDialog(overlay, initialize) {
-                overlay.dismiss();
-                if (initialize && conditionSetDomainObject) {
-                    self.conditionSetDomainObject = conditionSetDomainObject;
-                    self.conditionalStyles = [];
-                    self.initializeConditionalStyles();
-                }
-            }
-
-            let vm = new Vue({
-                provide: {
-                    openmct: this.openmct
-                },
-                components: {ConditionSetSelectorDialog},
-                data() {
-                    return {
-                        handleItemSelection
-                    };
-                },
-                template: '<condition-set-selector-dialog @conditionSetSelected="handleItemSelection"></condition-set-selector-dialog>'
-            }).$mount();
-
-            let overlay = this.openmct.overlays.overlay({
-                element: vm.$el,
-                size: 'small',
-                buttons: [
-                    {
-                        label: 'OK',
-                        emphasis: 'true',
-                        callback: () => dismissDialog(overlay, true)
-                    },
-                    {
-                        label: 'Cancel',
-                        callback: () => dismissDialog(overlay, false)
-                    }
-                ],
-                onDestroy: () => vm.$destroy()
-            });
-        },
-        enableConditionSetNav() {
-            this.openmct.objects.getOriginalPath(this.conditionSetDomainObject.identifier).then(
-                (objectPath) => {
-                    this.objectPath = objectPath;
-                    this.navigateToPath = '#/browse/' + this.objectPath
-                        .map(o => o && this.openmct.objects.makeKeyString(o.identifier))
-                        .reverse()
-                        .join('/');
-                }
-            );
-        },
-        navigateOrPreview(event) {
-            // If editing, display condition set in Preview overlay; otherwise nav to it while browsing
-            if (this.openmct.editor.isEditing()) {
-                event.preventDefault();
-                this.previewAction.invoke(this.objectPath);
-            } else {
-                this.openmct.router.navigate(this.navigateToPath);
-            }
-        },
-        removeConditionSet() {
-            this.conditionSetDomainObject = undefined;
-            this.conditionalStyles = [];
-            let domainObjectStyles = (this.domainObject.configuration && this.domainObject.configuration.objectStyles) || {};
-            if (this.itemId) {
-                domainObjectStyles[this.itemId].conditionSetIdentifier = undefined;
-                domainObjectStyles[this.itemId].selectedConditionId = undefined;
-                domainObjectStyles[this.itemId].defaultConditionId = undefined;
-                delete domainObjectStyles[this.itemId].conditionSetIdentifier;
-                domainObjectStyles[this.itemId].styles = undefined;
-                delete domainObjectStyles[this.itemId].styles;
-                if (isEmpty(domainObjectStyles[this.itemId])) {
-                    delete domainObjectStyles[this.itemId];
-                }
-            } else {
-                domainObjectStyles.conditionSetIdentifier = undefined;
-                domainObjectStyles.selectedConditionId = undefined;
-                domainObjectStyles.defaultConditionId = undefined;
-                delete domainObjectStyles.conditionSetIdentifier;
-                domainObjectStyles.styles = undefined;
-                delete domainObjectStyles.styles;
-            }
-
-            if (isEmpty(domainObjectStyles)) {
-                domainObjectStyles = undefined;
-            }
-
-            this.persist(domainObjectStyles);
-            if (this.stopProvidingTelemetry) {
-                this.stopProvidingTelemetry();
-                delete this.stopProvidingTelemetry;
-            }
-        },
-        updateDomainObjectItemStyles(newItems) {
-            //check that all items that have been styles still exist. Otherwise delete those styles
-            let domainObjectStyles = (this.domainObject.configuration && this.domainObject.configuration.objectStyles) || {};
-            let itemsToRemove = [];
-            let keys = Object.keys(domainObjectStyles);
-            //TODO: Need an easier way to find which properties are itemIds
-            keys.forEach((key) => {
-                const keyIsItemId = (key !== 'styles')
-                    && (key !== 'staticStyle')
-                    && (key !== 'defaultConditionId')
-                    && (key !== 'selectedConditionId')
-                    && (key !== 'conditionSetIdentifier');
-                if (keyIsItemId) {
-                    if (!(newItems.find(item => item.id === key))) {
-                        itemsToRemove.push(key);
-                    }
-                }
-            });
-            if (itemsToRemove.length) {
-                this.removeItemStyles(itemsToRemove, domainObjectStyles);
-            }
-        },
-        removeItemStyles(itemIds, domainObjectStyles) {
-            itemIds.forEach(itemId => {
-                if (domainObjectStyles[itemId]) {
-                    domainObjectStyles[itemId] = undefined;
-                    delete domainObjectStyles[this.itemId];
-                }
-            });
-            if (isEmpty(domainObjectStyles)) {
-                domainObjectStyles = undefined;
-            }
-
-            this.persist(domainObjectStyles);
-        },
-        initializeConditionalStyles() {
-            if (!this.conditions) {
-                this.conditions = {};
-            }
-
-            let conditionalStyles = [];
-            this.conditionSetDomainObject.configuration.conditionCollection.forEach((conditionConfiguration, index) => {
-                if (conditionConfiguration.isDefault) {
-                    this.selectedConditionId = conditionConfiguration.id;
-                }
-
-                this.conditions[conditionConfiguration.id] = conditionConfiguration;
-                let foundStyle = this.findStyleByConditionId(conditionConfiguration.id);
-                if (foundStyle) {
-                    foundStyle.style = Object.assign((this.canHide ? { isStyleInvisible: '' } : {}), this.initialStyles, foundStyle.style);
-                    conditionalStyles.push(foundStyle);
-                } else {
-                    conditionalStyles.splice(index, 0, {
-                        conditionId: conditionConfiguration.id,
-                        style: Object.assign((this.canHide ? { isStyleInvisible: '' } : {}), this.initialStyles)
-                    });
-                }
-            });
-            //we're doing this so that we remove styles for any conditions that have been removed from the condition set
-            this.conditionalStyles = conditionalStyles;
-            this.conditionsLoaded = true;
-            this.persist(this.getDomainObjectConditionalStyle(this.selectedConditionId));
-            if (!this.isEditing) {
-                this.subscribeToConditionSet();
-            }
-        },
-        subscribeToConditionSet() {
-            if (this.stopProvidingTelemetry) {
-                this.stopProvidingTelemetry();
-                delete this.stopProvidingTelemetry;
-            }
-
-            if (this.conditionSetDomainObject) {
-                this.openmct.telemetry.request(this.conditionSetDomainObject)
-                    .then(output => {
-                        if (output && output.length) {
-                            this.handleConditionSetResultUpdated(output[0]);
-                        }
-                    });
-                this.stopProvidingTelemetry = this.openmct.telemetry.subscribe(this.conditionSetDomainObject, this.handleConditionSetResultUpdated.bind(this));
-            }
-        },
-        handleConditionSetResultUpdated(resultData) {
-            this.selectedConditionId = resultData ? resultData.conditionId : '';
-        },
-        initializeStaticStyle(objectStyles) {
-            let staticStyle = objectStyles && objectStyles.staticStyle;
-            if (staticStyle) {
-                this.staticStyle = {
-                    style: Object.assign({}, this.initialStyles, staticStyle.style)
-                };
-            } else {
-                this.staticStyle = {
-                    style: Object.assign({}, this.initialStyles)
-                };
-            }
-        },
-        findStyleByConditionId(id) {
-            return this.conditionalStyles.find(conditionalStyle => conditionalStyle.conditionId === id);
-        },
-        updateStaticStyle(staticStyle) {
-            this.staticStyle = staticStyle;
-            this.persist(this.getDomainObjectConditionalStyle());
-        },
-        updateConditionalStyle(conditionStyle) {
-            let found = this.findStyleByConditionId(conditionStyle.conditionId);
-            if (found) {
-                found.style = conditionStyle.style;
-                this.selectedConditionId = found.conditionId;
-                this.persist(this.getDomainObjectConditionalStyle());
-            }
-        },
-        getDomainObjectConditionalStyle(defaultConditionId) {
-            let objectStyle = {
-                styles: this.conditionalStyles,
-                staticStyle: this.staticStyle,
-                selectedConditionId: this.selectedConditionId
-            };
-            if (defaultConditionId) {
-                objectStyle.defaultConditionId = defaultConditionId;
-            }
-
-            if (this.conditionSetDomainObject) {
-                objectStyle.conditionSetIdentifier = this.conditionSetDomainObject.identifier;
-            }
-
-            let domainObjectStyles = (this.domainObject.configuration && this.domainObject.configuration.objectStyles) || {};
-
-            if (this.itemId) {
-                domainObjectStyles[this.itemId] = objectStyle;
-            } else {
-                //we're deconstructing here to ensure that if an item within a domainObject already had a style we don't lose it
-                domainObjectStyles = {
-                    ...domainObjectStyles,
-                    ...objectStyle
-                };
-            }
-
-            return domainObjectStyles;
-        },
-        getCondition(id) {
-            return this.conditions ? this.conditions[id] : {};
-        },
-        applySelectedConditionStyle(conditionId) {
-            this.selectedConditionId = conditionId;
-            this.persist(this.getDomainObjectConditionalStyle());
-        },
-        persist(style) {
-            this.openmct.objects.mutate(this.domainObject, 'configuration.objectStyles', style);
-        }
-    }
-};
-</script>
diff --git a/src/plugins/condition/components/inspector/MultiSelectStylesView.vue b/src/plugins/condition/components/inspector/MultiSelectStylesView.vue
deleted file mode 100644
index d1628fe7d53..00000000000
--- a/src/plugins/condition/components/inspector/MultiSelectStylesView.vue
+++ /dev/null
@@ -1,280 +0,0 @@
-/*****************************************************************************
-* Open MCT, Copyright (c) 2014-2021, United States Government
-* as represented by the Administrator of the National Aeronautics and Space
-* Administration. All rights reserved.
-*
-* Open MCT is licensed under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-* http://www.apache.org/licenses/LICENSE-2.0.
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-* License for the specific language governing permissions and limitations
-* under the License.
-*
-* Open MCT includes source code licensed under additional open source
-* licenses. See the Open Source Licenses file (LICENSES.md) included with
-* this source code distribution or the Licensing information page available
-* at runtime from the About dialog for additional information.
-*****************************************************************************/
-
-<template>
-<div class="c-inspector__styles c-inspect-styles">
-    <div class="c-inspect-styles__header">
-        Object Style
-    </div>
-    <div class="c-inspect-styles__content">
-        <div v-if="isStaticAndConditionalStyles"
-             class="c-inspect-styles__mixed-static-and-conditional u-alert u-alert--block u-alert--with-icon"
-        >
-            Your selection includes one or more items that use Conditional Styling. Applying a static style below will replace any Conditional Styling with the new choice.
-        </div>
-        <div v-if="staticStyle"
-             class="c-inspect-styles__style"
-        >
-            <style-editor class="c-inspect-styles__editor"
-                          :style-item="staticStyle"
-                          :is-editing="isEditing"
-                          :mixed-styles="mixedStyles"
-                          @persist="updateStaticStyle"
-            />
-        </div>
-    </div>
-</div>
-</template>
-
-<script>
-
-import StyleEditor from "./StyleEditor.vue";
-import PreviewAction from "@/ui/preview/PreviewAction.js";
-import { getApplicableStylesForItem, getConsolidatedStyleValues, getConditionalStyleForItem } from "@/plugins/condition/utils/styleUtils";
-import isEmpty from 'lodash/isEmpty';
-
-export default {
-    name: 'MultiSelectStylesView',
-    components: {
-        StyleEditor
-    },
-    inject: [
-        'openmct',
-        'selection'
-    ],
-    data() {
-        return {
-            staticStyle: undefined,
-            isEditing: this.openmct.editor.isEditing(),
-            mixedStyles: [],
-            isStaticAndConditionalStyles: false
-        };
-    },
-    destroyed() {
-        this.removeListeners();
-    },
-    mounted() {
-        this.items = [];
-        this.previewAction = new PreviewAction(this.openmct);
-        this.getObjectsAndItemsFromSelection();
-        this.initializeStaticStyle();
-        this.openmct.editor.on('isEditing', this.setEditState);
-    },
-    methods: {
-        isItemType(type, item) {
-            return item && (item.type === type);
-        },
-        hasConditionalStyles(domainObject, id) {
-            return getConditionalStyleForItem(domainObject, id) !== undefined;
-        },
-        getObjectsAndItemsFromSelection() {
-            let domainObject;
-            let subObjects = [];
-
-            //multiple selection
-            let itemInitialStyles = [];
-            let itemStyle;
-            this.selection.forEach((selectionItem) => {
-                const item = selectionItem[0].context.item;
-                const layoutItem = selectionItem[0].context.layoutItem;
-                if (item && this.isItemType('subobject-view', layoutItem)) {
-                    subObjects.push(item);
-                    itemStyle = getApplicableStylesForItem(item);
-                    if (!this.isStaticAndConditionalStyles) {
-                        this.isStaticAndConditionalStyles = this.hasConditionalStyles(item);
-                    }
-                } else {
-                    domainObject = selectionItem[1].context.item;
-                    itemStyle = getApplicableStylesForItem(domainObject, layoutItem || item);
-                    this.items.push({
-                        id: layoutItem.id,
-                        applicableStyles: itemStyle
-                    });
-                    if (!this.isStaticAndConditionalStyles) {
-                        this.isStaticAndConditionalStyles = this.hasConditionalStyles(domainObject, layoutItem.id);
-                    }
-                }
-
-                itemInitialStyles.push(itemStyle);
-            });
-            const {styles, mixedStyles} = getConsolidatedStyleValues(itemInitialStyles);
-            this.initialStyles = styles;
-            this.mixedStyles = mixedStyles;
-
-            this.domainObject = domainObject;
-            this.removeListeners();
-            if (this.domainObject) {
-                this.stopObserving = this.openmct.objects.observe(this.domainObject, '*', newDomainObject => this.domainObject = newDomainObject);
-                this.stopObservingItems = this.openmct.objects.observe(this.domainObject, 'configuration.items', this.updateDomainObjectItemStyles);
-            }
-
-            subObjects.forEach(this.registerListener);
-        },
-        updateDomainObjectItemStyles(newItems) {
-            //check that all items that have been styles still exist. Otherwise delete those styles
-            let keys = Object.keys(this.domainObject.configuration.objectStyles || {});
-            keys.forEach((key) => {
-                if ((key !== 'styles')
-                    && (key !== 'staticStyle')
-                    && (key !== 'conditionSetIdentifier')) {
-                    if (!(newItems.find(item => item.id === key))) {
-                        this.removeItemStyles(key);
-                    }
-                }
-            });
-        },
-        registerListener(domainObject) {
-            let id = this.openmct.objects.makeKeyString(domainObject.identifier);
-
-            if (!this.domainObjectsById) {
-                this.domainObjectsById = {};
-            }
-
-            if (!this.domainObjectsById[id]) {
-                this.domainObjectsById[id] = domainObject;
-                this.observeObject(domainObject, id);
-            }
-        },
-        observeObject(domainObject, id) {
-            let unobserveObject = this.openmct.objects.observe(domainObject, '*', function (newObject) {
-                this.domainObjectsById[id] = JSON.parse(JSON.stringify(newObject));
-            }.bind(this));
-            this.unObserveObjects.push(unobserveObject);
-        },
-        removeListeners() {
-            if (this.stopObserving) {
-                this.stopObserving();
-            }
-
-            if (this.stopObservingItems) {
-                this.stopObservingItems();
-            }
-
-            if (this.unObserveObjects) {
-                this.unObserveObjects.forEach((unObserveObject) => {
-                    unObserveObject();
-                });
-            }
-
-            this.unObserveObjects = [];
-        },
-        removeItemStyles(itemId) {
-            let domainObjectStyles = (this.domainObject.configuration && this.domainObject.configuration.objectStyles) || {};
-            if (itemId && domainObjectStyles[itemId]) {
-                domainObjectStyles[itemId] = undefined;
-                delete domainObjectStyles[this.itemId];
-
-                if (isEmpty(domainObjectStyles)) {
-                    domainObjectStyles = undefined;
-                }
-
-                this.persist(this.domainObject, domainObjectStyles);
-            }
-        },
-        removeConditionalStyles(domainObjectStyles, itemId) {
-            if (itemId) {
-                domainObjectStyles[itemId].conditionSetIdentifier = undefined;
-                delete domainObjectStyles[itemId].conditionSetIdentifier;
-                domainObjectStyles[itemId].styles = undefined;
-                delete domainObjectStyles[itemId].styles;
-            } else {
-                domainObjectStyles.conditionSetIdentifier = undefined;
-                delete domainObjectStyles.conditionSetIdentifier;
-                domainObjectStyles.styles = undefined;
-                delete domainObjectStyles.styles;
-            }
-        },
-        setEditState(isEditing) {
-            this.isEditing = isEditing;
-        },
-        initializeStaticStyle() {
-            this.staticStyle = {
-                style: Object.assign({}, this.initialStyles)
-            };
-        },
-        updateStaticStyle(staticStyle, property) {
-            //update the static style for each of the layoutItems as well as each sub object item
-            this.staticStyle = staticStyle;
-            this.persist(this.domainObject, this.getDomainObjectStyle(this.domainObject, property, this.items));
-            if (this.domainObjectsById) {
-                const keys = Object.keys(this.domainObjectsById);
-                keys.forEach(key => {
-                    let domainObject = this.domainObjectsById[key];
-                    this.persist(domainObject, this.getDomainObjectStyle(domainObject, property));
-                });
-            }
-
-            this.isStaticAndConditionalStyles = false;
-            let foundIndex = this.mixedStyles.indexOf(property);
-            if (foundIndex > -1) {
-                this.mixedStyles.splice(foundIndex, 1);
-            }
-        },
-        getDomainObjectStyle(domainObject, property, items) {
-            let domainObjectStyles = (domainObject.configuration && domainObject.configuration.objectStyles) || {};
-
-            if (items) {
-                items.forEach(item => {
-                    let itemStaticStyle = {};
-                    if (domainObjectStyles[item.id] && domainObjectStyles[item.id].staticStyle) {
-                        itemStaticStyle = domainObjectStyles[item.id].staticStyle.style;
-                    }
-
-                    Object.keys(item.applicableStyles).forEach(key => {
-                        if (property === key) {
-                            itemStaticStyle[key] = this.staticStyle.style[key];
-                        }
-                    });
-                    if (this.isStaticAndConditionalStyles) {
-                        this.removeConditionalStyles(domainObjectStyles, item.id);
-                    }
-
-                    if (isEmpty(itemStaticStyle)) {
-                        itemStaticStyle = undefined;
-                        domainObjectStyles[item.id] = undefined;
-                    } else {
-                        domainObjectStyles[item.id] = Object.assign({}, { staticStyle: { style: itemStaticStyle } });
-                    }
-                });
-            } else {
-                if (!domainObjectStyles.staticStyle) {
-                    domainObjectStyles.staticStyle = {
-                        style: {}
-                    };
-                }
-
-                if (this.isStaticAndConditionalStyles) {
-                    this.removeConditionalStyles(domainObjectStyles);
-                }
-
-                domainObjectStyles.staticStyle.style[property] = this.staticStyle.style[property];
-            }
-
-            return domainObjectStyles;
-        },
-
-        persist(domainObject, style) {
-            this.openmct.objects.mutate(domainObject, 'configuration.objectStyles', style);
-        }
-    }
-};
-</script>
diff --git a/src/plugins/condition/components/inspector/StyleEditor.vue b/src/plugins/condition/components/inspector/StyleEditor.vue
index af1c29f1bfe..c6a182fd86f 100644
--- a/src/plugins/condition/components/inspector/StyleEditor.vue
+++ b/src/plugins/condition/components/inspector/StyleEditor.vue
@@ -1,245 +1,258 @@
-/*****************************************************************************
-* Open MCT, Copyright (c) 2014-2021, United States Government
-* as represented by the Administrator of the National Aeronautics and Space
-* Administration. All rights reserved.
-*
-* Open MCT is licensed under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-* http://www.apache.org/licenses/LICENSE-2.0.
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-* License for the specific language governing permissions and limitations
-* under the License.
-*
-* Open MCT includes source code licensed under additional open source
-* licenses. See the Open Source Licenses file (LICENSES.md) included with
-* this source code distribution or the Licensing information page available
-* at runtime from the About dialog for additional information.
-*****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 
 <template>
-<div class="c-style has-local-controls c-toolbar">
+  <div class="c-style has-local-controls c-toolbar">
     <div class="c-style__controls">
-        <div :class="[
-                 { 'is-style-invisible': styleItem.style && styleItem.style.isStyleInvisible },
-                 { 'c-style-thumb--mixed': mixedStyles.indexOf('backgroundColor') > -1 }
-             ]"
-             :style="[styleItem.style.imageUrl ? { backgroundImage:'url(' + styleItem.style.imageUrl + ')'} : itemStyle ]"
-             class="c-style-thumb"
+      <div
+        :class="[
+          { 'is-style-invisible': styleItem.style && styleItem.style.isStyleInvisible },
+          { 'c-style-thumb--mixed': mixedStyles.indexOf('backgroundColor') > -1 }
+        ]"
+        :style="[
+          styleItem.style.imageUrl
+            ? { backgroundImage: 'url(' + styleItem.style.imageUrl + ')' }
+            : itemStyle
+        ]"
+        class="c-style-thumb"
+      >
+        <span
+          class="c-style-thumb__text"
+          :class="{ 'hide-nice': !hasProperty(styleItem.style.color) }"
         >
-            <span class="c-style-thumb__text"
-                  :class="{ 'hide-nice': !hasProperty(styleItem.style.color) }"
-            >
-                ABC
-            </span>
-        </div>
+          ABC
+        </span>
+      </div>
 
-        <toolbar-color-picker v-if="hasProperty(styleItem.style.border)"
-                              class="c-style__toolbar-button--border-color u-menu-to--center"
-                              :options="borderColorOption"
-                              @change="updateStyleValue"
-        />
-        <toolbar-color-picker v-if="hasProperty(styleItem.style.backgroundColor)"
-                              class="c-style__toolbar-button--background-color u-menu-to--center"
-                              :options="backgroundColorOption"
-                              @change="updateStyleValue"
-        />
-        <toolbar-color-picker v-if="hasProperty(styleItem.style.color)"
-                              class="c-style__toolbar-button--color u-menu-to--center"
-                              :options="colorOption"
-                              @change="updateStyleValue"
-        />
-        <toolbar-button v-if="hasProperty(styleItem.style.imageUrl)"
-                        class="c-style__toolbar-button--image-url"
-                        :options="imageUrlOption"
-                        @change="updateStyleValue"
-        />
-        <toolbar-toggle-button v-if="hasProperty(styleItem.style.isStyleInvisible)"
-                               class="c-style__toolbar-button--toggle-visible"
-                               :options="isStyleInvisibleOption"
-                               @change="updateStyleValue"
-        />
+      <toolbar-color-picker
+        v-if="hasProperty(styleItem.style.border)"
+        class="c-style__toolbar-button--border-color u-menu-to--center"
+        :options="borderColorOption"
+        @change="updateStyleValue"
+      />
+      <toolbar-color-picker
+        v-if="hasProperty(styleItem.style.backgroundColor)"
+        class="c-style__toolbar-button--background-color u-menu-to--center"
+        :options="backgroundColorOption"
+        @change="updateStyleValue"
+      />
+      <toolbar-color-picker
+        v-if="hasProperty(styleItem.style.color)"
+        class="c-style__toolbar-button--color u-menu-to--center"
+        :options="colorOption"
+        @change="updateStyleValue"
+      />
+      <toolbar-button
+        v-if="hasProperty(styleItem.style.imageUrl)"
+        class="c-style__toolbar-button--image-url"
+        :options="imageUrlOption"
+        @change="updateStyleValue"
+      />
+      <toolbar-toggle-button
+        v-if="hasProperty(styleItem.style.isStyleInvisible)"
+        class="c-style__toolbar-button--toggle-visible"
+        :options="isStyleInvisibleOption"
+        @change="updateStyleValue"
+      />
     </div>
 
     <!-- Save Styles -->
-    <toolbar-button v-if="canSaveStyle"
-                    class="c-style__toolbar-button--save c-local-controls--show-on-hover c-icon-button c-icon-button--major"
-                    :options="saveOptions"
-                    @click="saveItemStyle()"
+    <toolbar-button
+      v-if="canSaveStyle"
+      ref="saveStyleButton"
+      class="c-style__toolbar-button--save c-local-controls--show-on-hover c-icon-button c-icon-button--major"
+      :options="saveOptions"
+      @click="saveItemStyle()"
     />
-</div>
+  </div>
 </template>
 
 <script>
-
-import ToolbarColorPicker from "@/ui/toolbar/components/toolbar-color-picker.vue";
-import ToolbarButton from "@/ui/toolbar/components/toolbar-button.vue";
-import ToolbarToggleButton from "@/ui/toolbar/components/toolbar-toggle-button.vue";
-import {STYLE_CONSTANTS} from "@/plugins/condition/utils/constants";
-import {getStylesWithoutNoneValue} from "@/plugins/condition/utils/styleUtils";
+import { STYLE_CONSTANTS } from '@/plugins/condition/utils/constants';
+import { getStylesWithoutNoneValue } from '@/plugins/condition/utils/styleUtils';
+import ToolbarButton from '@/ui/toolbar/components/ToolbarButton.vue';
+import ToolbarColorPicker from '@/ui/toolbar/components/ToolbarColorPicker.vue';
+import ToolbarToggleButton from '@/ui/toolbar/components/ToolbarToggleButton.vue';
 
 export default {
-    name: 'StyleEditor',
-    components: {
-        ToolbarButton,
-        ToolbarColorPicker,
-        ToolbarToggleButton
+  name: 'StyleEditor',
+  components: {
+    ToolbarButton,
+    ToolbarColorPicker,
+    ToolbarToggleButton
+  },
+  inject: ['openmct'],
+  props: {
+    isEditing: {
+      type: Boolean,
+      required: true
     },
-    inject: ['openmct'],
-    props: {
-        isEditing: {
-            type: Boolean,
-            required: true
-        },
-        mixedStyles: {
-            type: Array,
-            default() {
-                return [];
-            }
-        },
-        nonSpecificFontProperties: {
-            type: Array,
-            required: true
-        },
-        styleItem: {
-            type: Object,
-            required: true
-        }
+    mixedStyles: {
+      type: Array,
+      default() {
+        return [];
+      }
     },
-    computed: {
-        itemStyle() {
-            return getStylesWithoutNoneValue(this.styleItem.style);
-        },
-        borderColorOption() {
-            let value = this.styleItem.style.border.replace('1px solid ', '');
+    nonSpecificFontProperties: {
+      type: Array,
+      required: true
+    },
+    styleItem: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['persist', 'save-style'],
+  computed: {
+    itemStyle() {
+      return getStylesWithoutNoneValue(this.styleItem.style);
+    },
+    borderColorOption() {
+      let value = this.styleItem.style.border.replace('1px solid ', '');
 
-            return {
-                icon: 'icon-line-horz',
-                title: STYLE_CONSTANTS.borderColorTitle,
-                value: this.normalizeValueForSwatch(value),
-                property: 'border',
-                isEditing: this.isEditing,
-                nonSpecific: this.mixedStyles.indexOf('border') > -1
-            };
-        },
-        backgroundColorOption() {
-            let value = this.styleItem.style.backgroundColor;
+      return {
+        icon: 'icon-line-horz',
+        title: STYLE_CONSTANTS.borderColorTitle,
+        value: this.normalizeValueForSwatch(value),
+        property: 'border',
+        isEditing: this.isEditing,
+        nonSpecific: this.mixedStyles.indexOf('border') > -1
+      };
+    },
+    backgroundColorOption() {
+      let value = this.styleItem.style.backgroundColor;
 
-            return {
-                icon: 'icon-paint-bucket',
-                title: STYLE_CONSTANTS.backgroundColorTitle,
-                value: this.normalizeValueForSwatch(value),
-                property: 'backgroundColor',
-                isEditing: this.isEditing,
-                nonSpecific: this.mixedStyles.indexOf('backgroundColor') > -1
-            };
-        },
-        colorOption() {
-            let value = this.styleItem.style.color;
+      return {
+        icon: 'icon-paint-bucket',
+        title: STYLE_CONSTANTS.backgroundColorTitle,
+        value: this.normalizeValueForSwatch(value),
+        property: 'backgroundColor',
+        isEditing: this.isEditing,
+        nonSpecific: this.mixedStyles.indexOf('backgroundColor') > -1
+      };
+    },
+    colorOption() {
+      let value = this.styleItem.style.color;
 
-            return {
-                icon: 'icon-font',
-                title: STYLE_CONSTANTS.textColorTitle,
-                value: this.normalizeValueForSwatch(value),
-                property: 'color',
-                isEditing: this.isEditing,
-                nonSpecific: this.mixedStyles.indexOf('color') > -1
-            };
-        },
-        imageUrlOption() {
-            return {
-                icon: 'icon-image',
-                title: STYLE_CONSTANTS.imagePropertiesTitle,
-                dialog: {
-                    name: "Image Properties",
-                    sections: [
-                        {
-                            rows: [
-                                {
-                                    key: "url",
-                                    control: "textfield",
-                                    name: "Image URL",
-                                    "cssClass": "l-input-lg"
-                                }
-                            ]
-                        }
-                    ]
-                },
-                property: 'imageUrl',
-                formKeys: ['url'],
-                value: {url: this.styleItem.style.imageUrl},
-                isEditing: this.isEditing,
-                nonSpecific: this.mixedStyles.indexOf('imageUrl') > -1
-            };
-        },
-        isStyleInvisibleOption() {
-            return {
-                value: this.styleItem.style.isStyleInvisible,
-                property: 'isStyleInvisible',
-                isEditing: this.isEditing,
-                options: [
-                    {
-                        value: '',
-                        icon: 'icon-eye-disabled',
-                        title: STYLE_CONSTANTS.visibilityHidden
-                    },
-                    {
-                        value: STYLE_CONSTANTS.isStyleInvisible,
-                        icon: 'icon-eye-open',
-                        title: STYLE_CONSTANTS.visibilityVisible
-                    }
-                ]
-            };
-        },
-        saveOptions() {
-            return {
-                icon: 'icon-save',
-                title: 'Save style',
-                isEditing: this.isEditing
-            };
-        },
-        canSaveStyle() {
-            return this.isEditing && !this.mixedStyles.length && !this.nonSpecificFontProperties.length;
-        }
+      return {
+        icon: 'icon-font',
+        title: STYLE_CONSTANTS.textColorTitle,
+        value: this.normalizeValueForSwatch(value),
+        property: 'color',
+        isEditing: this.isEditing,
+        nonSpecific: this.mixedStyles.indexOf('color') > -1
+      };
     },
-    methods: {
-        hasProperty(property) {
-            return property !== undefined;
-        },
-        normalizeValueForSwatch(value) {
-            if (value && value.indexOf('__no_value') > -1) {
-                return value.replace('__no_value', 'transparent');
+    imageUrlOption() {
+      return {
+        icon: 'icon-image',
+        title: STYLE_CONSTANTS.imagePropertiesTitle,
+        dialog: {
+          name: 'Image Properties',
+          sections: [
+            {
+              rows: [
+                {
+                  key: 'url',
+                  control: 'textfield',
+                  name: 'Image URL',
+                  cssClass: 'l-input-lg'
+                }
+              ]
             }
-
-            return value;
+          ]
         },
-        normalizeValueForStyle(value) {
-            if (value && value === 'transparent') {
-                return '__no_value';
-            }
+        property: 'imageUrl',
+        formKeys: ['url'],
+        value: { url: this.styleItem.style.imageUrl },
+        isEditing: this.isEditing,
+        nonSpecific: this.mixedStyles.indexOf('imageUrl') > -1
+      };
+    },
+    isStyleInvisibleOption() {
+      return {
+        value: this.styleItem.style.isStyleInvisible,
+        property: 'isStyleInvisible',
+        isEditing: this.isEditing,
+        options: [
+          {
+            value: '',
+            icon: 'icon-eye-disabled',
+            title: STYLE_CONSTANTS.visibilityHidden
+          },
+          {
+            value: STYLE_CONSTANTS.isStyleInvisible,
+            icon: 'icon-eye-open',
+            title: STYLE_CONSTANTS.visibilityVisible
+          }
+        ]
+      };
+    },
+    saveOptions() {
+      return {
+        icon: 'icon-save',
+        title: 'Save style',
+        isEditing: this.isEditing
+      };
+    },
+    canSaveStyle() {
+      return this.isEditing && !this.mixedStyles.length && !this.nonSpecificFontProperties.length;
+    }
+  },
+  methods: {
+    hasProperty(property) {
+      return property !== undefined;
+    },
+    normalizeValueForSwatch(value) {
+      if (value && value.indexOf('__no_value') > -1) {
+        return value.replace('__no_value', 'transparent');
+      }
 
-            return value;
-        },
-        updateStyleValue(value, item) {
-            value = this.normalizeValueForStyle(value);
-            if (item.property === 'border') {
-                value = '1px solid ' + value;
-            }
+      return value;
+    },
+    normalizeValueForStyle(value) {
+      if (value && value === 'transparent') {
+        return '__no_value';
+      }
 
-            if (value && (value.url !== undefined)) {
-                this.styleItem.style[item.property] = value.url;
-            } else {
-                this.styleItem.style[item.property] = value;
-            }
+      return value;
+    },
+    updateStyleValue(value, item) {
+      value = this.normalizeValueForStyle(value);
+      if (item.property === 'border') {
+        value = '1px solid ' + value;
+      }
 
-            this.$emit('persist', this.styleItem, item.property);
-        },
-        saveItemStyle() {
-            this.$emit('save-style', this.itemStyle);
-        }
+      if (value && value.url !== undefined) {
+        this.styleItem.style[item.property] = value.url;
+      } else {
+        this.styleItem.style[item.property] = value;
+      }
+
+      this.$emit('persist', this.styleItem, item.property);
+    },
+    saveItemStyle() {
+      this.$emit('save-style', this.itemStyle);
     }
+  }
 };
 </script>
diff --git a/src/plugins/condition/components/inspector/StylesView.vue b/src/plugins/condition/components/inspector/StylesView.vue
index 53788ddd090..47db2f6ac41 100644
--- a/src/plugins/condition/components/inspector/StylesView.vue
+++ b/src/plugins/condition/components/inspector/StylesView.vue
@@ -1,870 +1,953 @@
-/*****************************************************************************
-* Open MCT, Copyright (c) 2014-2021, United States Government
-* as represented by the Administrator of the National Aeronautics and Space
-* Administration. All rights reserved.
-*
-* Open MCT is licensed under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-* http://www.apache.org/licenses/LICENSE-2.0.
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-* License for the specific language governing permissions and limitations
-* under the License.
-*
-* Open MCT includes source code licensed under additional open source
-* licenses. See the Open Source Licenses file (LICENSES.md) included with
-* this source code distribution or the Licensing information page available
-* at runtime from the About dialog for additional information.
-*****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 
 <template>
-<div class="c-inspector__styles c-inspect-styles">
-    <div v-if="isStaticAndConditionalStyles"
-         class="c-inspect-styles__mixed-static-and-conditional u-alert u-alert--block u-alert--with-icon"
+  <div class="c-inspector__styles c-inspect-styles">
+    <div
+      v-if="isStaticAndConditionalStyles"
+      class="c-inspect-styles__mixed-static-and-conditional u-alert u-alert--block u-alert--with-icon"
     >
-        Your selection includes one or more items that use Conditional Styling. Applying a static style below will replace any Conditional Styling with the new choice.
+      Your selection includes one or more items that use Conditional Styling. Applying a static
+      style below will replace any Conditional Styling with the new choice.
     </div>
     <template v-if="!conditionSetDomainObject">
-        <div class="c-inspect-styles__header">
-            Object Style
-        </div>
-        <FontStyleEditor
-            v-if="canStyleFont"
-            :font-style="consolidatedFontStyle"
-            @set-font-property="setFontProperty"
-        />
-        <div class="c-inspect-styles__content">
-            <div v-if="staticStyle"
-                 class="c-inspect-styles__style"
-            >
-                <style-editor class="c-inspect-styles__editor"
-                              :style-item="staticStyle"
-                              :is-editing="allowEditing"
-                              :mixed-styles="mixedStyles"
-                              :non-specific-font-properties="nonSpecificFontProperties"
-                              @persist="updateStaticStyle"
-                              @save-style="saveStyle"
-                />
-            </div>
-            <button
-                v-if="allowEditing"
-                id="addConditionSet"
-                class="c-button c-button--major c-toggle-styling-button labeled"
-                @click="addConditionSet"
-            >
-                <span class="c-cs-button__label">Use Conditional Styling...</span>
-            </button>
+      <FontStyleEditor
+        v-if="canStyleFont"
+        :font-style="consolidatedFontStyle"
+        @set-font-property="setFontProperty"
+      />
+      <div class="c-inspect-styles__content">
+        <div v-if="staticStyle" class="c-inspect-styles__style">
+          <StyleEditor
+            ref="styleEditor"
+            class="c-inspect-styles__editor"
+            :style-item="staticStyle"
+            :is-editing="allowEditing"
+            :mixed-styles="mixedStyles"
+            :non-specific-font-properties="nonSpecificFontProperties"
+            @persist="updateStaticStyle"
+            @save-style="saveStyle"
+          />
         </div>
+        <button
+          v-if="allowEditing"
+          id="addConditionSet"
+          class="c-button c-button--major c-toggle-styling-button labeled"
+          @click="addConditionSet"
+        >
+          <span class="c-cs-button__label">Use Conditional Styling...</span>
+        </button>
+      </div>
     </template>
     <template v-else>
-        <div class="c-inspect-styles__header">
-            Conditional Object Styles
-        </div>
-        <div class="c-inspect-styles__content c-inspect-styles__condition-set">
-            <a v-if="conditionSetDomainObject"
-               class="c-object-label"
-               @click="navigateOrPreview"
-            >
-                <span class="c-object-label__type-icon icon-conditional"></span>
-                <span class="c-object-label__name">{{ conditionSetDomainObject.name }}</span>
-            </a>
-            <template v-if="allowEditing">
-                <button
-                    id="changeConditionSet"
-                    class="c-button labeled"
-                    @click="addConditionSet"
-                >
-                    <span class="c-button__label">Change...</span>
-                </button>
-
-                <button class="c-click-icon icon-x"
-                        title="Remove conditional styles"
-                        @click="removeConditionSet"
-                ></button>
-            </template>
-        </div>
-
-        <FontStyleEditor
-            v-if="canStyleFont"
-            :font-style="consolidatedFontStyle"
-            @set-font-property="setFontProperty"
-        />
-
-        <div v-if="conditionsLoaded"
-             class="c-inspect-styles__conditions"
+      <div class="c-inspect-styles__content c-inspect-styles__condition-set c-inspect-styles__elem">
+        <a v-if="conditionSetDomainObject" class="c-object-label" @click="navigateOrPreview">
+          <span class="c-object-label__type-icon icon-conditional"></span>
+          <span class="c-object-label__name">{{ conditionSetDomainObject.name }}</span>
+        </a>
+        <template v-if="allowEditing">
+          <button id="changeConditionSet" class="c-button labeled" @click="addConditionSet">
+            <span class="c-button__label">Change...</span>
+          </button>
+
+          <button
+            class="c-click-icon icon-x"
+            title="Remove conditional styles"
+            @click="removeConditionSet"
+          ></button>
+        </template>
+      </div>
+
+      <div
+        v-if="isConditionWidget && allowEditing"
+        class="c-inspect-styles__elem c-inspect-styles__output-label-toggle"
+      >
+        <label class="c-toggle-switch">
+          <input
+            type="checkbox"
+            :checked="useConditionSetOutputAsLabel"
+            @change="updateConditionSetOutputLabel"
+          />
+          <span class="c-toggle-switch__slider"></span>
+          <span class="c-toggle-switch__label">Use Condition Set output as label</span>
+        </label>
+      </div>
+      <div v-if="isConditionWidget && !allowEditing" class="c-inspect-styles__elem">
+        <span class="c-toggle-switch__label"
+          >Condition Set output as label: <span v-if="useConditionSetOutputAsLabel"> Yes</span
+          ><span v-else> No</span>
+        </span>
+      </div>
+
+      <FontStyleEditor
+        v-if="canStyleFont"
+        :font-style="consolidatedFontStyle"
+        @set-font-property="setFontProperty"
+      />
+
+      <div v-if="conditionsLoaded" class="c-inspect-styles__conditions">
+        <div
+          v-for="(conditionStyle, index) in conditionalStyles"
+          :key="index"
+          class="c-inspect-styles__condition"
+          :class="{ 'is-current': conditionStyle.conditionId === selectedConditionId }"
+          @click="applySelectedConditionStyle(conditionStyle.conditionId)"
         >
-            <div v-for="(conditionStyle, index) in conditionalStyles"
-                 :key="index"
-                 class="c-inspect-styles__condition"
-                 :class="{'is-current': conditionStyle.conditionId === selectedConditionId}"
-                 @click="applySelectedConditionStyle(conditionStyle.conditionId)"
-            >
-                <condition-error :show-label="true"
-                                 :condition="getCondition(conditionStyle.conditionId)"
-                />
-                <condition-description :show-label="true"
-                                       :condition="getCondition(conditionStyle.conditionId)"
-                />
-                <style-editor class="c-inspect-styles__editor"
-                              :style-item="conditionStyle"
-                              :non-specific-font-properties="nonSpecificFontProperties"
-                              :is-editing="allowEditing"
-                              @persist="updateConditionalStyle"
-                              @save-style="saveStyle"
-                />
-            </div>
+          <condition-error
+            :show-label="true"
+            :condition="getCondition(conditionStyle.conditionId)"
+          />
+          <condition-description
+            :show-label="true"
+            :condition="getCondition(conditionStyle.conditionId)"
+          />
+          <StyleEditor
+            class="c-inspect-styles__editor"
+            :style-item="conditionStyle"
+            :non-specific-font-properties="nonSpecificFontProperties"
+            :is-editing="allowEditing"
+            @persist="updateConditionalStyle"
+            @save-style="saveStyle"
+          />
         </div>
+      </div>
     </template>
-</div>
+  </div>
 </template>
 
 <script>
-
-import FontStyleEditor from '@/ui/inspector/styles/FontStyleEditor.vue';
-import StyleEditor from "./StyleEditor.vue";
-import PreviewAction from "@/ui/preview/PreviewAction.js";
-import { getApplicableStylesForItem, getConsolidatedStyleValues, getConditionSetIdentifierForItem } from "@/plugins/condition/utils/styleUtils";
-import ConditionSetSelectorDialog from "@/plugins/condition/components/inspector/ConditionSetSelectorDialog.vue";
-import ConditionError from "@/plugins/condition/components/ConditionError.vue";
-import ConditionDescription from "@/plugins/condition/components/ConditionDescription.vue";
-import Vue from 'vue';
+import ConditionDescription from '@/plugins/condition/components/ConditionDescription.vue';
+import ConditionError from '@/plugins/condition/components/ConditionError.vue';
+import {
+  getApplicableStylesForItem,
+  getConditionSetIdentifierForItem,
+  getConsolidatedStyleValues
+} from '@/plugins/condition/utils/styleUtils';
+import PreviewAction from '@/ui/preview/PreviewAction.js';
+
+import FontStyleEditor from '../../../inspectorViews/styles/FontStyleEditor.vue';
+import StyleEditor from './StyleEditor.vue';
 
 const NON_SPECIFIC = '??';
-const NON_STYLEABLE_CONTAINER_TYPES = [
-    'layout',
-    'flexible-layout',
-    'tabs'
-];
-const NON_STYLEABLE_LAYOUT_ITEM_TYPES = [
-    'line-view',
-    'box-view',
-    'image-view'
-];
+const NON_STYLEABLE_CONTAINER_TYPES = ['layout', 'flexible-layout', 'tabs'];
+const NON_STYLEABLE_LAYOUT_ITEM_TYPES = ['line-view', 'box-view', 'ellipse-view', 'image-view'];
 
 export default {
-    name: 'StylesView',
-    components: {
-        FontStyleEditor,
-        StyleEditor,
-        ConditionError,
-        ConditionDescription
-    },
-    inject: [
-        'openmct',
-        'selection',
-        'stylesManager'
-    ],
-    data() {
-        return {
-            staticStyle: undefined,
-            isEditing: this.openmct.editor.isEditing(),
-            mixedStyles: [],
-            isStaticAndConditionalStyles: false,
-            conditionalStyles: [],
-            conditionSetDomainObject: undefined,
-            conditions: undefined,
-            conditionsLoaded: false,
-            navigateToPath: '',
-            selectedConditionId: '',
-            items: [],
-            domainObject: undefined,
-            consolidatedFontStyle: {}
-        };
+  name: 'StylesView',
+  components: {
+    FontStyleEditor,
+    StyleEditor,
+    ConditionError,
+    ConditionDescription
+  },
+  inject: ['openmct', 'selection', 'stylesManager'],
+  data() {
+    return {
+      staticStyle: undefined,
+      isEditing: this.openmct.editor.isEditing(),
+      mixedStyles: [],
+      isStaticAndConditionalStyles: false,
+      conditionalStyles: [],
+      conditionSetDomainObject: undefined,
+      conditions: undefined,
+      conditionsLoaded: false,
+      navigateToPath: '',
+      selectedConditionId: '',
+      items: [],
+      domainObject: undefined,
+      consolidatedFontStyle: {},
+      useConditionSetOutputAsLabel: false
+    };
+  },
+  computed: {
+    locked() {
+      return this.selection.some((selectionPath) => {
+        const self = selectionPath[0].context.item;
+        const parent = selectionPath.length > 1 ? selectionPath[1].context.item : undefined;
+
+        return (self && self.locked) || (parent && parent.locked);
+      });
     },
-    computed: {
-        locked() {
-            return this.selection.some(selectionPath => {
-                const self = selectionPath[0].context.item;
-                const parent = selectionPath.length > 1 ? selectionPath[1].context.item : undefined;
-
-                return (self && self.locked) || (parent && parent.locked);
-            });
-        },
-        allowEditing() {
-            return this.isEditing && !this.locked;
-        },
-        styleableFontItems() {
-            return this.selection.filter(selectionPath => {
-                const item = selectionPath[0].context.item;
-                const itemType = item && item.type;
-                const layoutItem = selectionPath[0].context.layoutItem;
-                const layoutItemType = layoutItem && layoutItem.type;
-
-                if (itemType && NON_STYLEABLE_CONTAINER_TYPES.includes(itemType)) {
-                    return false;
-                }
-
-                if (layoutItemType && NON_STYLEABLE_LAYOUT_ITEM_TYPES.includes(layoutItemType)) {
-                    return false;
-                }
-
-                return true;
-            });
-        },
-        computedconsolidatedFontStyle() {
-            let consolidatedFontStyle;
-            const styles = [];
-
-            this.styleableFontItems.forEach(styleable => {
-                const fontStyle = this.getFontStyle(styleable[0]);
-
-                styles.push(fontStyle);
-            });
-
-            if (styles.length) {
-                const hasConsolidatedFontSize = styles.length && styles.every((fontStyle, i, arr) => fontStyle.fontSize === arr[0].fontSize);
-                const hasConsolidatedFont = styles.length && styles.every((fontStyle, i, arr) => fontStyle.font === arr[0].font);
+    allowEditing() {
+      return this.isEditing && !this.locked;
+    },
+    isConditionWidget() {
+      const hasConditionWidgetObjects =
+        this.domainObjectsById &&
+        Object.values(this.domainObjectsById).some((object) => object.type === 'conditionWidget');
+
+      return (
+        hasConditionWidgetObjects ||
+        (this.domainObject && this.domainObject.type === 'conditionWidget')
+      );
+    },
+    styleableFontItems() {
+      return this.selection.filter((selectionPath) => {
+        const item = selectionPath[0].context.item;
+        const itemType = item && item.type;
+        const layoutItem = selectionPath[0].context.layoutItem;
+        const layoutItemType = layoutItem && layoutItem.type;
+
+        if (itemType && NON_STYLEABLE_CONTAINER_TYPES.includes(itemType)) {
+          return false;
+        }
 
-                consolidatedFontStyle = {
-                    fontSize: hasConsolidatedFontSize ? styles[0].fontSize : NON_SPECIFIC,
-                    font: hasConsolidatedFont ? styles[0].font : NON_SPECIFIC
-                };
-            }
+        if (layoutItemType && NON_STYLEABLE_LAYOUT_ITEM_TYPES.includes(layoutItemType)) {
+          return false;
+        }
 
-            return consolidatedFontStyle;
-        },
-        nonSpecificFontProperties() {
-            if (!this.consolidatedFontStyle) {
-                return [];
-            }
+        return true;
+      });
+    },
+    nonSpecificFontProperties() {
+      if (!this.consolidatedFontStyle) {
+        return [];
+      }
+
+      return Object.keys(this.consolidatedFontStyle).filter(
+        (property) => this.consolidatedFontStyle[property] === NON_SPECIFIC
+      );
+    },
+    canStyleFont() {
+      return this.styleableFontItems.length && this.allowEditing;
+    }
+  },
+  unmounted() {
+    this.removeListeners();
+    this.openmct.editor.off('isEditing', this.setEditState);
+    this.stylesManager.off('styleSelected', this.applyStyleToSelection);
+  },
+  mounted() {
+    this.previewAction = new PreviewAction(this.openmct);
+    this.isMultipleSelection = this.selection.length > 1;
+    this.getObjectsAndItemsFromSelection();
+    this.useConditionSetOutputAsLabel = this.getConfigurationForLabel();
+
+    if (!this.isMultipleSelection) {
+      let objectStyles = this.getObjectStyles();
+      this.initializeStaticStyle(objectStyles);
+      if (objectStyles && objectStyles.conditionSetIdentifier) {
+        this.openmct.objects.get(objectStyles.conditionSetIdentifier).then(this.initialize);
+        this.conditionalStyles = objectStyles.styles;
+      }
+    } else {
+      this.initializeStaticStyle();
+    }
 
-            return Object.keys(this.consolidatedFontStyle).filter(property => this.consolidatedFontStyle[property] === NON_SPECIFIC);
-        },
-        canStyleFont() {
-            return this.styleableFontItems.length && this.allowEditing;
+    this.setConsolidatedFontStyle();
+
+    this.openmct.editor.on('isEditing', this.setEditState);
+    this.stylesManager.on('styleSelected', this.applyStyleToSelection);
+  },
+  methods: {
+    getConfigurationForLabel() {
+      const childObjectUsesLabels = Object.values(this.domainObjectsById || {}).some(
+        (object) => object.configuration && object.configuration.useConditionSetOutputAsLabel
+      );
+      const domainObjectUsesLabels =
+        this.domainObject &&
+        this.domainObject.configuration &&
+        this.domainObject.configuration.useConditionSetOutputAsLabel;
+
+      return childObjectUsesLabels || domainObjectUsesLabels;
+    },
+    getObjectStyles() {
+      let objectStyles;
+      if (this.domainObjectsById) {
+        const domainObject = Object.values(this.domainObjectsById)[0];
+        if (domainObject.configuration && domainObject.configuration.objectStyles) {
+          objectStyles = domainObject.configuration.objectStyles;
+        }
+      } else if (this.items.length) {
+        const itemId = this.items[0].id;
+        if (
+          this.domainObject &&
+          this.domainObject.configuration &&
+          this.domainObject.configuration.objectStyles &&
+          this.domainObject.configuration.objectStyles[itemId]
+        ) {
+          objectStyles = this.domainObject.configuration.objectStyles[itemId];
         }
+      } else if (
+        this.domainObject &&
+        this.domainObject.configuration &&
+        this.domainObject.configuration.objectStyles
+      ) {
+        objectStyles = this.domainObject.configuration.objectStyles;
+      }
+
+      return objectStyles;
     },
-    destroyed() {
-        this.removeListeners();
-        this.openmct.editor.off('isEditing', this.setEditState);
-        this.stylesManager.off('styleSelected', this.applyStyleToSelection);
-    },
-    mounted() {
-        this.previewAction = new PreviewAction(this.openmct);
-        this.isMultipleSelection = this.selection.length > 1;
-        this.getObjectsAndItemsFromSelection();
-        if (!this.isMultipleSelection) {
-            let objectStyles = this.getObjectStyles();
-            this.initializeStaticStyle(objectStyles);
-            if (objectStyles && objectStyles.conditionSetIdentifier) {
-                this.openmct.objects.get(objectStyles.conditionSetIdentifier).then(this.initialize);
-                this.conditionalStyles = objectStyles.styles;
-            }
-        } else {
-            this.initializeStaticStyle();
+    setEditState(isEditing) {
+      this.isEditing = isEditing;
+      if (this.isEditing) {
+        if (this.stopProvidingTelemetry) {
+          this.stopProvidingTelemetry();
+          delete this.stopProvidingTelemetry;
         }
+      } else {
+        //reset the selectedConditionID so that the condition set computation can drive it.
+        this.applySelectedConditionStyle('');
+        this.subscribeToConditionSet();
+      }
+    },
+    enableConditionSetNav() {
+      this.openmct.objects
+        .getOriginalPath(this.conditionSetDomainObject.identifier)
+        .then((objectPath) => {
+          this.objectPath = objectPath;
+          this.navigateToPath = '#/browse/' + this.openmct.objects.getRelativePath(this.objectPath);
+        });
+    },
+    navigateOrPreview(event) {
+      // If editing, display condition set in Preview overlay; otherwise nav to it while browsing
+      if (this.openmct.editor.isEditing()) {
+        event.preventDefault();
+        this.previewAction.invoke(this.objectPath);
+      } else {
+        this.openmct.router.navigate(this.navigateToPath);
+      }
+    },
+    isItemType(type, item) {
+      return item && item.type === type;
+    },
+    canPersistObject(item) {
+      return this.openmct.objects.isPersistable(item.identifier);
+    },
+    hasConditionalStyle(domainObject, layoutItem) {
+      const id = layoutItem ? layoutItem.id : undefined;
 
-        this.setConsolidatedFontStyle();
-
-        this.openmct.editor.on('isEditing', this.setEditState);
-        this.stylesManager.on('styleSelected', this.applyStyleToSelection);
-    },
-    methods: {
-        getObjectStyles() {
-            let objectStyles;
-            if (this.domainObjectsById) {
-                const domainObject = Object.values(this.domainObjectsById)[0];
-                if (domainObject.configuration && domainObject.configuration.objectStyles) {
-                    objectStyles = domainObject.configuration.objectStyles;
-                }
-            } else if (this.items.length) {
-                const itemId = this.items[0].id;
-                if (this.domainObject && this.domainObject.configuration && this.domainObject.configuration.objectStyles && this.domainObject.configuration.objectStyles[itemId]) {
-                    objectStyles = this.domainObject.configuration.objectStyles[itemId];
-                }
-            } else if (this.domainObject && this.domainObject.configuration && this.domainObject.configuration.objectStyles) {
-                objectStyles = this.domainObject.configuration.objectStyles;
-            }
-
-            return objectStyles;
-        },
-        setEditState(isEditing) {
-            this.isEditing = isEditing;
-            if (this.isEditing) {
-                if (this.stopProvidingTelemetry) {
-                    this.stopProvidingTelemetry();
-                    delete this.stopProvidingTelemetry;
-                }
-            } else {
-                this.subscribeToConditionSet();
-            }
-        },
-        enableConditionSetNav() {
-            this.openmct.objects.getOriginalPath(this.conditionSetDomainObject.identifier).then(
-                (objectPath) => {
-                    this.objectPath = objectPath;
-                    this.navigateToPath = '#/browse/' + this.objectPath
-                        .map(o => o && this.openmct.objects.makeKeyString(o.identifier))
-                        .reverse()
-                        .join('/');
-                }
-            );
-        },
-        navigateOrPreview(event) {
-            // If editing, display condition set in Preview overlay; otherwise nav to it while browsing
-            if (this.openmct.editor.isEditing()) {
-                event.preventDefault();
-                this.previewAction.invoke(this.objectPath);
-            } else {
-                this.openmct.router.navigate(this.navigateToPath);
-            }
-        },
-        isItemType(type, item) {
-            return item && (item.type === type);
-        },
-        canPersistObject(item) {
-            // for now the only way to tell if an object can be persisted is if it is creatable.
-            let creatable = false;
-            if (item) {
-                const type = this.openmct.types.get(item.type);
-                if (type && type.definition) {
-                    creatable = (type.definition.creatable === true);
-                }
-            }
-
-            return creatable;
-        },
-        hasConditionalStyle(domainObject, layoutItem) {
-            const id = layoutItem ? layoutItem.id : undefined;
-
-            return getConditionSetIdentifierForItem(domainObject, id) !== undefined;
-        },
-        getObjectsAndItemsFromSelection() {
-            let domainObject;
-            let subObjects = [];
-            let itemsWithConditionalStyles = 0;
-
-            //multiple selection
-            let itemInitialStyles = [];
-            let itemStyle;
-            this.selection.forEach((selectionItem) => {
-                const item = selectionItem[0].context.item;
-                const layoutItem = selectionItem[0].context.layoutItem;
-                const isChildItem = selectionItem.length > 1;
-
-                if (!item && !layoutItem) {
-                    // cases where selection is used for table cells
-                    return;
-                }
-
-                if (!isChildItem) {
-                    domainObject = item;
-                    itemStyle = getApplicableStylesForItem(item);
-                    if (this.hasConditionalStyle(item)) {
-                        itemsWithConditionalStyles += 1;
-                    }
-                } else {
-                    this.canHide = true;
-                    domainObject = selectionItem[1].context.item;
-                    if (item && !layoutItem || (this.isItemType('subobject-view', layoutItem) && this.canPersistObject(item))) {
-                        subObjects.push(item);
-                        itemStyle = getApplicableStylesForItem(item);
-                        if (this.hasConditionalStyle(item)) {
-                            itemsWithConditionalStyles += 1;
-                        }
-                    } else {
-                        itemStyle = getApplicableStylesForItem(domainObject, layoutItem || item);
-                        this.items.push({
-                            id: layoutItem.id,
-                            applicableStyles: itemStyle
-                        });
-                        if (this.hasConditionalStyle(item, layoutItem)) {
-                            itemsWithConditionalStyles += 1;
-                        }
-                    }
-                }
-
-                itemInitialStyles.push(itemStyle);
-            });
-            this.isStaticAndConditionalStyles = this.isMultipleSelection && itemsWithConditionalStyles;
-            const {styles, mixedStyles} = getConsolidatedStyleValues(itemInitialStyles);
-            this.initialStyles = styles;
-            this.mixedStyles = mixedStyles;
-            // main layout
-            this.domainObject = domainObject;
-            this.removeListeners();
-            if (this.domainObject) {
-                this.stopObserving = this.openmct.objects.observe(this.domainObject, '*', newDomainObject => this.domainObject = newDomainObject);
-                this.stopObservingItems = this.openmct.objects.observe(this.domainObject, 'configuration.items', this.updateDomainObjectItemStyles);
-            }
-
-            subObjects.forEach(this.registerListener);
-        },
-        updateDomainObjectItemStyles(newItems) {
-            let keys = Object.keys(this.domainObject.configuration.objectStyles || {});
-            keys.forEach((key) => {
-                if (this.isKeyItemId(key)) {
-                    if (!(newItems.find(item => item.id === key))) {
-                        this.removeItemStyles(key);
-                    }
-                }
-            });
-        },
-        isKeyItemId(key) {
-            return (key !== 'styles')
-                && (key !== 'staticStyle')
-                && (key !== 'fontStyle')
-                && (key !== 'defaultConditionId')
-                && (key !== 'selectedConditionId')
-                && (key !== 'conditionSetIdentifier');
-        },
-        registerListener(domainObject) {
-            let id = this.openmct.objects.makeKeyString(domainObject.identifier);
-
-            if (!this.domainObjectsById) {
-                this.domainObjectsById = {};
-            }
-
-            if (!this.domainObjectsById[id]) {
-                this.domainObjectsById[id] = domainObject;
-                this.observeObject(domainObject, id);
-            }
-        },
-        observeObject(domainObject, id) {
-            let unobserveObject = this.openmct.objects.observe(domainObject, '*', (newObject) => {
-                this.domainObjectsById[id] = JSON.parse(JSON.stringify(newObject));
-            });
-            this.unObserveObjects.push(unobserveObject);
-        },
-        removeListeners() {
-            if (this.stopObserving) {
-                this.stopObserving();
-            }
-
-            if (this.stopObservingItems) {
-                this.stopObservingItems();
-            }
-
-            if (this.stopProvidingTelemetry) {
-                this.stopProvidingTelemetry();
-                delete this.stopProvidingTelemetry;
-            }
-
-            if (this.unObserveObjects) {
-                this.unObserveObjects.forEach((unObserveObject) => {
-                    unObserveObject();
-                });
-            }
-
-            this.unObserveObjects = [];
-        },
-        subscribeToConditionSet() {
-            if (this.stopProvidingTelemetry) {
-                this.stopProvidingTelemetry();
-                delete this.stopProvidingTelemetry;
-            }
-
-            if (this.conditionSetDomainObject) {
-                this.openmct.telemetry.request(this.conditionSetDomainObject)
-                    .then(output => {
-                        if (output && output.length) {
-                            this.handleConditionSetResultUpdated(output[0]);
-                        }
-                    });
-                this.stopProvidingTelemetry = this.openmct.telemetry.subscribe(this.conditionSetDomainObject, this.handleConditionSetResultUpdated.bind(this));
-            }
-        },
-        handleConditionSetResultUpdated(resultData) {
-            this.selectedConditionId = resultData ? resultData.conditionId : '';
-        },
-        initialize(conditionSetDomainObject) {
-            //If there are new conditions in the conditionSet we need to set those styles to default
-            this.conditionSetDomainObject = conditionSetDomainObject;
-            this.enableConditionSetNav();
-            this.initializeConditionalStyles();
-        },
-        initializeConditionalStyles() {
-            if (!this.conditions) {
-                this.conditions = {};
-            }
+      return getConditionSetIdentifierForItem(domainObject, id) !== undefined;
+    },
+    getObjectsAndItemsFromSelection() {
+      let domainObject;
+      let subObjects = [];
+      let itemsWithConditionalStyles = 0;
+
+      //multiple selection
+      let itemInitialStyles = [];
+      let itemStyle;
+      this.selection.forEach((selectionItem) => {
+        const item = selectionItem[0].context.item;
+        const layoutItem = selectionItem[0].context.layoutItem;
+        const isChildItem = selectionItem.length > 1;
+
+        if (!item && !layoutItem) {
+          // cases where selection is used for table cells
+          return;
+        }
 
-            let conditionalStyles = [];
-            this.conditionSetDomainObject.configuration.conditionCollection.forEach((conditionConfiguration, index) => {
-                if (conditionConfiguration.isDefault) {
-                    this.selectedConditionId = conditionConfiguration.id;
-                }
-
-                this.conditions[conditionConfiguration.id] = conditionConfiguration;
-                let foundStyle = this.findStyleByConditionId(conditionConfiguration.id);
-                if (foundStyle) {
-                    foundStyle.style = Object.assign((this.canHide ? { isStyleInvisible: '' } : {}), this.initialStyles, foundStyle.style);
-                    conditionalStyles.push(foundStyle);
-                } else {
-                    conditionalStyles.splice(index, 0, {
-                        conditionId: conditionConfiguration.id,
-                        style: Object.assign((this.canHide ? { isStyleInvisible: '' } : {}), this.initialStyles)
-                    });
-                }
+        if (!isChildItem) {
+          domainObject = item;
+          itemStyle = getApplicableStylesForItem(item);
+          if (this.hasConditionalStyle(item)) {
+            itemsWithConditionalStyles += 1;
+          }
+        } else {
+          this.canHide = true;
+          domainObject = selectionItem[1].context.item;
+          if (
+            (item && !layoutItem) ||
+            (this.isItemType('subobject-view', layoutItem) && this.canPersistObject(item))
+          ) {
+            subObjects.push(item);
+            itemStyle = getApplicableStylesForItem(item);
+            if (this.hasConditionalStyle(item)) {
+              itemsWithConditionalStyles += 1;
+            }
+          } else {
+            itemStyle = getApplicableStylesForItem(domainObject, layoutItem || item);
+            this.items.push({
+              id: layoutItem.id,
+              applicableStyles: itemStyle
             });
-            //we're doing this so that we remove styles for any conditions that have been removed from the condition set
-            this.conditionalStyles = conditionalStyles;
-            this.conditionsLoaded = true;
-            this.getAndPersistStyles(null, this.selectedConditionId);
-            if (!this.isEditing) {
-                this.subscribeToConditionSet();
-            }
-        },
-        //TODO: Double check how this works for single styles
-        initializeStaticStyle(objectStyles) {
-            let staticStyle = objectStyles && objectStyles.staticStyle;
-            if (staticStyle) {
-                this.staticStyle = {
-                    style: Object.assign({}, this.initialStyles, staticStyle.style)
-                };
-            } else {
-                this.staticStyle = {
-                    style: Object.assign({}, this.initialStyles)
-                };
-            }
-        },
-        removeItemStyles(itemId) {
-            let domainObjectStyles = (this.domainObject.configuration && this.domainObject.configuration.objectStyles) || {};
-            if (itemId && domainObjectStyles[itemId]) {
-                delete domainObjectStyles[itemId];
-
-                if (Object.keys(domainObjectStyles).length <= 0) {
-                    domainObjectStyles = undefined;
-                }
-
-                this.persist(this.domainObject, domainObjectStyles);
-            }
-        },
-        findStyleByConditionId(id) {
-            return this.conditionalStyles.find(conditionalStyle => conditionalStyle.conditionId === id);
-        },
-        getCondition(id) {
-            return this.conditions ? this.conditions[id] : {};
-        },
-        addConditionSet() {
-            let conditionSetDomainObject;
-            let self = this;
-            function handleItemSelection(item) {
-                if (item) {
-                    conditionSetDomainObject = item;
-                }
+            if (this.hasConditionalStyle(item, layoutItem)) {
+              itemsWithConditionalStyles += 1;
             }
+          }
+        }
 
-            function dismissDialog(overlay, initialize) {
-                overlay.dismiss();
+        itemInitialStyles.push(itemStyle);
+      });
+      this.isStaticAndConditionalStyles = this.isMultipleSelection && itemsWithConditionalStyles;
+      const { styles, mixedStyles } = getConsolidatedStyleValues(itemInitialStyles);
+      this.initialStyles = styles;
+      this.mixedStyles = mixedStyles;
+      // main layout
+      this.domainObject = domainObject;
+      this.removeListeners();
+      if (this.domainObject) {
+        this.stopObserving = this.openmct.objects.observe(
+          this.domainObject,
+          '*',
+          (newDomainObject) => (this.domainObject = newDomainObject)
+        );
+        this.stopObservingItems = this.openmct.objects.observe(
+          this.domainObject,
+          'configuration.items',
+          this.updateDomainObjectItemStyles
+        );
+      }
+
+      subObjects.forEach(this.registerListener);
+    },
+    updateDomainObjectItemStyles(newItems) {
+      let keys = Object.keys(this.domainObject.configuration.objectStyles || {});
+      keys.forEach((key) => {
+        if (this.isKeyItemId(key)) {
+          if (!newItems.find((item) => item.id === key)) {
+            this.removeItemStyles(key);
+          }
+        }
+      });
+    },
+    isKeyItemId(key) {
+      return (
+        key !== 'styles' &&
+        key !== 'staticStyle' &&
+        key !== 'fontStyle' &&
+        key !== 'defaultConditionId' &&
+        key !== 'selectedConditionId' &&
+        key !== 'conditionSetIdentifier'
+      );
+    },
+    registerListener(domainObject) {
+      let id = this.openmct.objects.makeKeyString(domainObject.identifier);
 
-                if (initialize && conditionSetDomainObject) {
-                    self.conditionSetDomainObject = conditionSetDomainObject;
-                    self.conditionalStyles = [];
-                    self.initializeConditionalStyles();
-                }
-            }
+      if (!this.domainObjectsById) {
+        this.domainObjectsById = {};
+      }
 
-            let vm = new Vue({
-                provide: {
-                    openmct: this.openmct
-                },
-                components: {ConditionSetSelectorDialog},
-                data() {
-                    return {
-                        handleItemSelection
-                    };
-                },
-                template: '<condition-set-selector-dialog @conditionSetSelected="handleItemSelection"></condition-set-selector-dialog>'
-            }).$mount();
-
-            let overlay = this.openmct.overlays.overlay({
-                element: vm.$el,
-                size: 'small',
-                buttons: [
-                    {
-                        label: 'OK',
-                        emphasis: 'true',
-                        callback: () => dismissDialog(overlay, true)
-                    },
-                    {
-                        label: 'Cancel',
-                        callback: () => dismissDialog(overlay, false)
-                    }
-                ],
-                onDestroy: () => vm.$destroy()
+      if (!this.domainObjectsById[id]) {
+        this.domainObjectsById[id] = domainObject;
+        this.observeObject(domainObject, id);
+      }
+    },
+    observeObject(domainObject, id) {
+      let unobserveObject = this.openmct.objects.observe(domainObject, '*', (newObject) => {
+        this.domainObjectsById[id] = JSON.parse(JSON.stringify(newObject));
+      });
+      this.unObserveObjects.push(unobserveObject);
+    },
+    removeListeners() {
+      if (this.stopObserving) {
+        this.stopObserving();
+      }
+
+      if (this.stopObservingItems) {
+        this.stopObservingItems();
+      }
+
+      if (this.stopProvidingTelemetry) {
+        this.stopProvidingTelemetry();
+        delete this.stopProvidingTelemetry;
+      }
+
+      if (this.unObserveObjects) {
+        this.unObserveObjects.forEach((unObserveObject) => {
+          unObserveObject();
+        });
+      }
+
+      this.unObserveObjects = [];
+    },
+    subscribeToConditionSet() {
+      if (this.stopProvidingTelemetry) {
+        this.stopProvidingTelemetry();
+        delete this.stopProvidingTelemetry;
+      }
+
+      if (this.conditionSetDomainObject) {
+        this.openmct.telemetry.request(this.conditionSetDomainObject).then((output) => {
+          if (output && output.length) {
+            this.handleConditionSetResultUpdated(output[0]);
+          }
+        });
+        this.stopProvidingTelemetry = this.openmct.telemetry.subscribe(
+          this.conditionSetDomainObject,
+          this.handleConditionSetResultUpdated.bind(this)
+        );
+      }
+    },
+    handleConditionSetResultUpdated(resultData) {
+      this.selectedConditionId = resultData ? resultData.conditionId : '';
+    },
+    initialize(conditionSetDomainObject) {
+      //If there are new conditions in the conditionSet we need to set those styles to default
+      this.conditionSetDomainObject = conditionSetDomainObject;
+      this.enableConditionSetNav();
+      this.initializeConditionalStyles();
+    },
+    initializeConditionalStyles() {
+      if (!this.conditions) {
+        this.conditions = {};
+      }
+
+      let conditionalStyles = [];
+      this.conditionSetDomainObject.configuration.conditionCollection.forEach(
+        (conditionConfiguration, index) => {
+          if (conditionConfiguration.isDefault) {
+            this.selectedConditionId = conditionConfiguration.id;
+          }
+
+          this.conditions[conditionConfiguration.id] = conditionConfiguration;
+          let foundStyle = this.findStyleByConditionId(conditionConfiguration.id);
+          let output = { output: conditionConfiguration.configuration.output };
+          if (foundStyle) {
+            foundStyle.style = Object.assign(
+              this.canHide ? { isStyleInvisible: '' } : {},
+              this.initialStyles,
+              foundStyle.style,
+              output
+            );
+            conditionalStyles.push(foundStyle);
+          } else {
+            conditionalStyles.splice(index, 0, {
+              conditionId: conditionConfiguration.id,
+              style: Object.assign(
+                this.canHide ? { isStyleInvisible: '' } : {},
+                this.initialStyles,
+                output
+              )
             });
-        },
-        removeConditionSet() {
-            this.conditionSetDomainObject = undefined;
-            this.conditionalStyles = [];
-            let domainObjectStyles = (this.domainObject.configuration && this.domainObject.configuration.objectStyles) || {};
-            if (this.domainObjectsById) {
-                const domainObjects = Object.values(this.domainObjectsById);
-                domainObjects.forEach(domainObject => {
-                    let objectStyles = (domainObject.configuration && domainObject.configuration.objectStyles) || {};
-                    this.removeConditionalStyles(objectStyles);
-                    if (objectStyles && Object.keys(objectStyles).length <= 0) {
-                        objectStyles = undefined;
-                    }
-
-                    this.persist(domainObject, objectStyles);
-                });
-            }
-
-            if (this.items.length) {
-                this.items.forEach((item) => {
-                    const itemId = item.id;
-                    this.removeConditionalStyles(domainObjectStyles, itemId);
-                    if (domainObjectStyles[itemId] && Object.keys(domainObjectStyles[itemId]).length <= 0) {
-                        delete domainObjectStyles[itemId];
-                    }
-                });
-            } else {
-                this.removeConditionalStyles(domainObjectStyles);
-            }
-
-            if (domainObjectStyles && Object.keys(domainObjectStyles).length <= 0) {
-                domainObjectStyles = undefined;
-            }
-
-            this.persist(this.domainObject, domainObjectStyles);
-
-            if (this.stopProvidingTelemetry) {
-                this.stopProvidingTelemetry();
-                delete this.stopProvidingTelemetry;
-            }
-        },
-        removeConditionalStyles(domainObjectStyles, itemId) {
-            if (itemId && domainObjectStyles[itemId]) {
-                domainObjectStyles[itemId].conditionSetIdentifier = undefined;
-                delete domainObjectStyles[itemId].conditionSetIdentifier;
-                domainObjectStyles[itemId].selectedConditionId = undefined;
-                domainObjectStyles[itemId].defaultConditionId = undefined;
-                domainObjectStyles[itemId].styles = undefined;
-                delete domainObjectStyles[itemId].styles;
-            } else {
-                domainObjectStyles.conditionSetIdentifier = undefined;
-                delete domainObjectStyles.conditionSetIdentifier;
-                domainObjectStyles.selectedConditionId = undefined;
-                domainObjectStyles.defaultConditionId = undefined;
-                domainObjectStyles.styles = undefined;
-                delete domainObjectStyles.styles;
-            }
-        },
-        updateStaticStyle(staticStyle, property) {
-            //update the static style for each of the layoutItems as well as each sub object item
-            this.staticStyle = staticStyle;
-            this.removeConditionSet();
-            this.getAndPersistStyles(property);
-        },
-        updateConditionalStyle(conditionStyle, property) {
-            let foundStyle = this.findStyleByConditionId(conditionStyle.conditionId);
-            if (foundStyle) {
-                foundStyle.style = conditionStyle.style;
-                this.selectedConditionId = foundStyle.conditionId;
-                this.getAndPersistStyles(property);
-            }
-        },
-        getAndPersistStyles(property, defaultConditionId) {
-            this.persist(this.domainObject, this.getDomainObjectStyle(this.domainObject, property, this.items, defaultConditionId));
-            if (this.domainObjectsById) {
-                const domainObjects = Object.values(this.domainObjectsById);
-                domainObjects.forEach(domainObject => {
-                    this.persist(domainObject, this.getDomainObjectStyle(domainObject, property, null, defaultConditionId));
-                });
-            }
-
-            if (!this.items.length && !this.domainObjectsById) {
-                this.persist(this.domainObject, this.getDomainObjectStyle(this.domainObject, property, null, defaultConditionId));
-            }
-
-            this.isStaticAndConditionalStyles = false;
-            if (property) {
-                let foundIndex = this.mixedStyles.indexOf(property);
-                if (foundIndex > -1) {
-                    this.mixedStyles.splice(foundIndex, 1);
-                }
-            }
-        },
-        getDomainObjectStyle(domainObject, property, items, defaultConditionId) {
-            let objectStyle = {
-                styles: this.conditionalStyles,
-                staticStyle: this.staticStyle,
-                selectedConditionId: this.selectedConditionId
-            };
-            if (defaultConditionId) {
-                objectStyle.defaultConditionId = defaultConditionId;
-            }
-
-            if (this.conditionSetDomainObject) {
-                objectStyle.conditionSetIdentifier = this.conditionSetDomainObject.identifier;
-            }
+          }
+        }
+      );
+      //we're doing this so that we remove styles for any conditions that have been removed from the condition set
+      this.conditionalStyles = conditionalStyles;
+      this.conditionsLoaded = true;
+      this.getAndPersistStyles(null, this.selectedConditionId);
+      if (!this.isEditing) {
+        this.subscribeToConditionSet();
+      }
+    },
+    //TODO: Double check how this works for single styles
+    initializeStaticStyle(objectStyles) {
+      let staticStyle = objectStyles && objectStyles.staticStyle;
+      if (staticStyle) {
+        this.staticStyle = {
+          style: Object.assign({}, this.initialStyles, staticStyle.style)
+        };
+      } else {
+        this.staticStyle = {
+          style: Object.assign({}, this.initialStyles)
+        };
+      }
+    },
+    removeItemStyles(itemId) {
+      let domainObjectStyles =
+        (this.domainObject.configuration && this.domainObject.configuration.objectStyles) || {};
+      if (itemId && domainObjectStyles[itemId]) {
+        delete domainObjectStyles[itemId];
+
+        if (Object.keys(domainObjectStyles).length <= 0) {
+          domainObjectStyles = undefined;
+        }
 
-            let domainObjectStyles = (domainObject.configuration && domainObject.configuration.objectStyles) || {};
-
-            if (items) {
-                items.forEach(item => {
-                    let itemStaticStyle = {};
-                    let itemConditionalStyle = { styles: []};
-                    if (!this.conditionSetDomainObject) {
-                        if (domainObjectStyles[item.id] && domainObjectStyles[item.id].staticStyle) {
-                            itemStaticStyle = Object.assign({}, domainObjectStyles[item.id].staticStyle.style);
-                        }
-
-                        if (item.applicableStyles[property] !== undefined) {
-                            itemStaticStyle[property] = this.staticStyle.style[property];
-                        }
-
-                        if (Object.keys(itemStaticStyle).length <= 0) {
-                            itemStaticStyle = undefined;
-                        }
-
-                        domainObjectStyles[item.id] = { staticStyle: { style: itemStaticStyle } };
-                    } else {
-                        objectStyle.styles.forEach((conditionalStyle, index) => {
-                            let style = {};
-                            Object.keys(item.applicableStyles).concat(['isStyleInvisible']).forEach(key => {
-                                style[key] = conditionalStyle.style[key];
-                            });
-                            itemConditionalStyle.styles.push({
-                                ...conditionalStyle,
-                                style
-                            });
-                        });
-                        domainObjectStyles[item.id] = {
-                            ...domainObjectStyles[item.id],
-                            ...objectStyle,
-                            ...itemConditionalStyle
-                        };
-                    }
+        this.persist(this.domainObject, domainObjectStyles);
+      }
+    },
+    findStyleByConditionId(id) {
+      return this.conditionalStyles.find((conditionalStyle) => conditionalStyle.conditionId === id);
+    },
+    getCondition(id) {
+      return this.conditions ? this.conditions[id] : {};
+    },
+    addConditionSet() {
+      const conditionWidgetParent = this.openmct.router.path[1];
+      const formStructure = {
+        title: 'Select Condition Set',
+        sections: [
+          {
+            name: 'Location',
+            cssClass: 'grows',
+            rows: [
+              {
+                key: 'location',
+                name: 'Condition Set',
+                cssClass: 'grows',
+                control: 'locator',
+                required: true,
+                parent: conditionWidgetParent,
+                validate: (data) => data.value[0].type === 'conditionSet'
+              }
+            ]
+          }
+        ]
+      };
+
+      this.openmct.forms.showForm(formStructure).then((data) => {
+        this.conditionSetDomainObject = data.location[0];
+        this.conditionalStyles = [];
+        this.initializeConditionalStyles();
+      });
+    },
+    removeConditionSet() {
+      this.conditionSetDomainObject = undefined;
+      this.conditionalStyles = [];
+      let domainObjectStyles =
+        (this.domainObject.configuration && this.domainObject.configuration.objectStyles) || {};
+      if (this.domainObjectsById) {
+        const domainObjects = Object.values(this.domainObjectsById);
+        domainObjects.forEach((domainObject) => {
+          let objectStyles =
+            (domainObject.configuration && domainObject.configuration.objectStyles) || {};
+          this.removeConditionalStyles(objectStyles);
+          if (objectStyles && Object.keys(objectStyles).length <= 0) {
+            objectStyles = undefined;
+          }
+
+          this.persist(domainObject, objectStyles);
+        });
+      }
+
+      if (this.items.length) {
+        this.items.forEach((item) => {
+          const itemId = item.id;
+          this.removeConditionalStyles(domainObjectStyles, itemId);
+          if (domainObjectStyles[itemId] && Object.keys(domainObjectStyles[itemId]).length <= 0) {
+            delete domainObjectStyles[itemId];
+          }
+        });
+      } else {
+        this.removeConditionalStyles(domainObjectStyles);
+      }
+
+      if (domainObjectStyles && Object.keys(domainObjectStyles).length <= 0) {
+        domainObjectStyles = undefined;
+      }
+
+      this.persist(this.domainObject, domainObjectStyles);
+
+      if (this.stopProvidingTelemetry) {
+        this.stopProvidingTelemetry();
+        delete this.stopProvidingTelemetry;
+      }
+    },
+    removeConditionalStyles(domainObjectStyles, itemId) {
+      if (itemId && domainObjectStyles[itemId]) {
+        domainObjectStyles[itemId].conditionSetIdentifier = undefined;
+        delete domainObjectStyles[itemId].conditionSetIdentifier;
+        domainObjectStyles[itemId].selectedConditionId = undefined;
+        domainObjectStyles[itemId].defaultConditionId = undefined;
+        domainObjectStyles[itemId].styles = undefined;
+        delete domainObjectStyles[itemId].styles;
+      } else {
+        domainObjectStyles.conditionSetIdentifier = undefined;
+        delete domainObjectStyles.conditionSetIdentifier;
+        domainObjectStyles.selectedConditionId = undefined;
+        domainObjectStyles.defaultConditionId = undefined;
+        domainObjectStyles.styles = undefined;
+        delete domainObjectStyles.styles;
+      }
+    },
+    updateStaticStyle(staticStyle, property) {
+      //update the static style for each of the layoutItems as well as each sub object item
+      this.staticStyle = staticStyle;
+      this.removeConditionSet();
+      this.getAndPersistStyles(property);
+    },
+    updateConditionalStyle(conditionStyle, property) {
+      let foundStyle = this.findStyleByConditionId(conditionStyle.conditionId);
+      if (foundStyle) {
+        foundStyle.style = conditionStyle.style;
+        this.selectedConditionId = foundStyle.conditionId;
+        this.getAndPersistStyles(property);
+      }
+    },
+    getAndPersistStyles(property, defaultConditionId) {
+      this.persist(
+        this.domainObject,
+        this.getDomainObjectStyle(this.domainObject, property, this.items, defaultConditionId)
+      );
+      if (this.domainObjectsById) {
+        const domainObjects = Object.values(this.domainObjectsById);
+        domainObjects.forEach((domainObject) => {
+          this.persist(
+            domainObject,
+            this.getDomainObjectStyle(domainObject, property, null, defaultConditionId)
+          );
+        });
+      }
+
+      if (!this.items.length && !this.domainObjectsById) {
+        this.persist(
+          this.domainObject,
+          this.getDomainObjectStyle(this.domainObject, property, null, defaultConditionId)
+        );
+      }
+
+      this.isStaticAndConditionalStyles = false;
+      if (property) {
+        let foundIndex = this.mixedStyles.indexOf(property);
+        if (foundIndex > -1) {
+          this.mixedStyles.splice(foundIndex, 1);
+        }
+      }
+    },
+    getDomainObjectStyle(domainObject, property, items, defaultConditionId) {
+      let objectStyle = {
+        styles: this.conditionalStyles,
+        staticStyle: this.staticStyle,
+        selectedConditionId: this.selectedConditionId
+      };
+      if (defaultConditionId) {
+        objectStyle.defaultConditionId = defaultConditionId;
+      }
+
+      if (this.conditionSetDomainObject) {
+        objectStyle.conditionSetIdentifier = this.conditionSetDomainObject.identifier;
+      }
+
+      let domainObjectStyles =
+        (domainObject.configuration && domainObject.configuration.objectStyles) || {};
+
+      if (items) {
+        items.forEach((item) => {
+          let itemStaticStyle = {};
+          let itemConditionalStyle = { styles: [] };
+          if (!this.conditionSetDomainObject) {
+            if (domainObjectStyles[item.id] && domainObjectStyles[item.id].staticStyle) {
+              itemStaticStyle = Object.assign({}, domainObjectStyles[item.id].staticStyle.style);
+            }
+
+            if (item.applicableStyles[property] !== undefined) {
+              itemStaticStyle[property] = this.staticStyle.style[property];
+            }
+
+            if (Object.keys(itemStaticStyle).length <= 0) {
+              itemStaticStyle = undefined;
+            }
+
+            domainObjectStyles[item.id] = { staticStyle: { style: itemStaticStyle } };
+          } else {
+            objectStyle.styles.forEach((conditionalStyle, index) => {
+              let style = {};
+              if (domainObject.configuration.useConditionSetOutputAsLabel) {
+                style.output = conditionalStyle.style.output;
+              } else {
+                style.output = '';
+              }
+
+              Object.keys(item.applicableStyles)
+                .concat(['isStyleInvisible'])
+                .forEach((key) => {
+                  style[key] = conditionalStyle.style[key];
                 });
-            } else {
-                domainObjectStyles = {
-                    ...domainObjectStyles,
-                    ...objectStyle
-                };
-            }
-
-            return domainObjectStyles;
-        },
-        applySelectedConditionStyle(conditionId) {
-            this.selectedConditionId = conditionId;
-            this.getAndPersistStyles();
-        },
-        persist(domainObject, style) {
-            this.openmct.objects.mutate(domainObject, 'configuration.objectStyles', style);
-        },
-        applyStyleToSelection(style) {
-            if (!this.allowEditing) {
-                return;
-            }
-
-            this.updateSelectionFontStyle(style);
-            this.updateSelectionStyle(style);
-        },
-        updateSelectionFontStyle(style) {
-            const fontSizeProperty = {
-                fontSize: style.fontSize
-            };
-            const fontProperty = {
-                font: style.font
+              itemConditionalStyle.styles.push({
+                ...conditionalStyle,
+                style
+              });
+            });
+            domainObjectStyles[item.id] = {
+              ...domainObjectStyles[item.id],
+              ...objectStyle,
+              ...itemConditionalStyle
             };
+          }
+        });
+      } else {
+        if (domainObject.configuration.useConditionSetOutputAsLabel !== true) {
+          let objectConditionStyle = JSON.parse(JSON.stringify(objectStyle));
+          objectConditionStyle.styles.forEach((conditionalStyle) => {
+            conditionalStyle.style.output = '';
+          });
+          domainObjectStyles = {
+            ...domainObjectStyles,
+            ...objectConditionStyle
+          };
+        } else {
+          domainObjectStyles = {
+            ...domainObjectStyles,
+            ...objectStyle
+          };
+        }
+      }
 
-            this.setFontProperty(fontSizeProperty);
-            this.setFontProperty(fontProperty);
-        },
-        updateSelectionStyle(style) {
-            const foundStyle = this.findStyleByConditionId(this.selectedConditionId);
-
-            if (foundStyle && !this.isStaticAndConditionalStyles) {
-                Object.entries(style).forEach(([property, value]) => {
-                    if (foundStyle.style[property] !== undefined && foundStyle.style[property] !== value) {
-                        foundStyle.style[property] = value;
-                    }
-                });
-                this.getAndPersistStyles();
-            } else {
-                this.removeConditionSet();
-                Object.entries(style).forEach(([property, value]) => {
-                    if (this.staticStyle.style[property] !== undefined && this.staticStyle.style[property] !== value) {
-                        this.staticStyle.style[property] = value;
-                        this.getAndPersistStyles(property);
-                    }
-                });
-            }
-        },
-        saveStyle(style) {
-            const styleToSave = {
-                ...style,
-                ...this.consolidatedFontStyle
-            };
+      return domainObjectStyles;
+    },
+    applySelectedConditionStyle(conditionId) {
+      this.selectedConditionId = conditionId;
+      this.getAndPersistStyles();
+    },
+    persistLabelConfiguration() {
+      if (this.domainObjectsById) {
+        Object.values(this.domainObjectsById).forEach((object) => {
+          this.openmct.objects.mutate(
+            object,
+            'configuration.useConditionSetOutputAsLabel',
+            this.useConditionSetOutputAsLabel
+          );
+        });
+      } else {
+        this.openmct.objects.mutate(
+          this.domainObject,
+          'configuration.useConditionSetOutputAsLabel',
+          this.useConditionSetOutputAsLabel
+        );
+      }
+
+      this.getAndPersistStyles();
+    },
+    persist(domainObject, style) {
+      this.openmct.objects.mutate(domainObject, 'configuration.objectStyles', style);
+    },
+    applyStyleToSelection(style) {
+      if (!this.allowEditing) {
+        return;
+      }
 
-            this.stylesManager.save(styleToSave);
-        },
-        setConsolidatedFontStyle() {
-            const styles = [];
+      this.updateSelectionFontStyle(style);
+      this.updateSelectionStyle(style);
+    },
+    updateSelectionFontStyle(style) {
+      const fontSizeProperty = {
+        fontSize: style.fontSize
+      };
+      const fontProperty = {
+        font: style.font
+      };
+
+      this.setFontProperty(fontSizeProperty);
+      this.setFontProperty(fontProperty);
+    },
+    updateSelectionStyle(style) {
+      const foundStyle = this.findStyleByConditionId(this.selectedConditionId);
+
+      if (foundStyle && !this.isStaticAndConditionalStyles) {
+        Object.entries(style).forEach(([property, value]) => {
+          if (foundStyle.style[property] !== undefined && foundStyle.style[property] !== value) {
+            foundStyle.style[property] = value;
+          }
+        });
+        this.getAndPersistStyles();
+      } else {
+        this.removeConditionSet();
+        Object.entries(style).forEach(([property, value]) => {
+          if (
+            this.staticStyle.style[property] !== undefined &&
+            this.staticStyle.style[property] !== value
+          ) {
+            this.staticStyle.style[property] = value;
+            this.getAndPersistStyles(property);
+          }
+        });
+      }
+    },
+    saveStyle(style) {
+      const styleToSave = {
+        ...style,
+        ...this.consolidatedFontStyle
+      };
 
-            this.styleableFontItems.forEach(styleable => {
-                const fontStyle = this.getFontStyle(styleable[0]);
+      this.stylesManager.save(styleToSave);
+    },
+    setConsolidatedFontStyle() {
+      const styles = [];
 
-                styles.push(fontStyle);
-            });
+      this.styleableFontItems.forEach((styleable) => {
+        const fontStyle = this.getFontStyle(styleable[0]);
 
-            if (styles.length) {
-                const hasConsolidatedFontSize = styles.length && styles.every((fontStyle, i, arr) => fontStyle.fontSize === arr[0].fontSize);
-                const hasConsolidatedFont = styles.length && styles.every((fontStyle, i, arr) => fontStyle.font === arr[0].font);
+        styles.push(fontStyle);
+      });
 
-                const fontSize = hasConsolidatedFontSize ? styles[0].fontSize : NON_SPECIFIC;
-                const font = hasConsolidatedFont ? styles[0].font : NON_SPECIFIC;
+      if (styles.length) {
+        const hasConsolidatedFontSize =
+          styles.length &&
+          styles.every((fontStyle, i, arr) => fontStyle.fontSize === arr[0].fontSize);
+        const hasConsolidatedFont =
+          styles.length && styles.every((fontStyle, i, arr) => fontStyle.font === arr[0].font);
 
-                this.$set(this.consolidatedFontStyle, 'fontSize', fontSize);
-                this.$set(this.consolidatedFontStyle, 'font', font);
-            }
-        },
-        getFontStyle(selectionPath) {
-            const item = selectionPath.context.item;
-            const layoutItem = selectionPath.context.layoutItem;
-            let fontStyle = item && item.configuration && item.configuration.fontStyle;
-
-            // support for legacy where font styling in layouts only
-            if (!fontStyle) {
-                fontStyle = {
-                    fontSize: layoutItem && layoutItem.fontSize || 'default',
-                    font: layoutItem && layoutItem.font || 'default'
-                };
-            }
+        const fontSize = hasConsolidatedFontSize ? styles[0].fontSize : NON_SPECIFIC;
+        const font = hasConsolidatedFont ? styles[0].font : NON_SPECIFIC;
 
-            return fontStyle;
-        },
-        setFontProperty(fontStyleObject) {
-            let layoutDomainObject;
-            const [property, value] = Object.entries(fontStyleObject)[0];
-
-            this.styleableFontItems.forEach(styleable => {
-                if (!this.isLayoutObject(styleable)) {
-                    const fontStyle = this.getFontStyle(styleable[0]);
-                    fontStyle[property] = value;
-
-                    this.openmct.objects.mutate(styleable[0].context.item, 'configuration.fontStyle', fontStyle);
-                } else {
-                    // all layoutItems in this context will share same parent layout
-                    if (!layoutDomainObject) {
-                        layoutDomainObject = styleable[1].context.item;
-                    }
-
-                    // save layout item font style to parent layout configuration
-                    const layoutItemIndex = styleable[0].context.index;
-                    const layoutItemConfiguration = layoutDomainObject.configuration.items[layoutItemIndex];
-
-                    layoutItemConfiguration[property] = value;
-                }
-            });
+        this.consolidatedFontStyle.fontSize = fontSize;
+        this.consolidatedFontStyle.font = font;
+      }
+    },
+    getFontStyle(selectionPath) {
+      const item = selectionPath.context.item;
+      const layoutItem = selectionPath.context.layoutItem;
+      let fontStyle = item && item.configuration && item.configuration.fontStyle;
+
+      // support for legacy where font styling in layouts only
+      if (!fontStyle) {
+        fontStyle = {
+          fontSize: (layoutItem && layoutItem.fontSize) || 'default',
+          font: (layoutItem && layoutItem.font) || 'default'
+        };
+      }
 
-            if (layoutDomainObject) {
-                this.openmct.objects.mutate(layoutDomainObject, 'configuration.items', layoutDomainObject.configuration.items);
-            }
+      return fontStyle;
+    },
+    setFontProperty(fontStyleObject) {
+      let layoutDomainObject;
+      const [property, value] = Object.entries(fontStyleObject)[0];
+
+      this.styleableFontItems.forEach((styleable) => {
+        if (!this.isLayoutObject(styleable)) {
+          const fontStyle = this.getFontStyle(styleable[0]);
+          fontStyle[property] = value;
+
+          this.openmct.objects.mutate(
+            styleable[0].context.item,
+            'configuration.fontStyle',
+            fontStyle
+          );
+        } else {
+          // all layoutItems in this context will share same parent layout
+          if (!layoutDomainObject) {
+            layoutDomainObject = styleable[1].context.item;
+          }
 
-            // sync vue component on font update
-            this.$set(this.consolidatedFontStyle, property, value);
-        },
-        isLayoutObject(selectionPath) {
-            const layoutItemType = selectionPath[0].context.layoutItem && selectionPath[0].context.layoutItem.type;
+          // save layout item font style to parent layout configuration
+          const layoutItemIndex = styleable[0].context.index;
+          const layoutItemConfiguration = layoutDomainObject.configuration.items[layoutItemIndex];
 
-            return layoutItemType && layoutItemType !== 'subobject-view';
+          layoutItemConfiguration[property] = value;
         }
+      });
+
+      if (layoutDomainObject) {
+        this.openmct.objects.mutate(
+          layoutDomainObject,
+          'configuration.items',
+          layoutDomainObject.configuration.items
+        );
+      }
+
+      // sync vue component on font update
+      this.consolidatedFontStyle[property] = value;
+    },
+    isLayoutObject(selectionPath) {
+      const layoutItemType =
+        selectionPath[0].context.layoutItem && selectionPath[0].context.layoutItem.type;
+
+      return layoutItemType && layoutItemType !== 'subobject-view';
+    },
+    updateConditionSetOutputLabel(event) {
+      this.useConditionSetOutputAsLabel = event.target.checked === true;
+      this.persistLabelConfiguration();
     }
+  }
 };
 </script>
diff --git a/src/plugins/condition/components/inspector/conditional-styles.scss b/src/plugins/condition/components/inspector/conditional-styles.scss
index 9679bdddd62..7a4b1e43883 100644
--- a/src/plugins/condition/components/inspector/conditional-styles.scss
+++ b/src/plugins/condition/components/inspector/conditional-styles.scss
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -22,133 +22,134 @@
 
 /********************************************* INSPECTOR STYLES TAB */
 .c-inspect-styles {
+  > * + * {
+    margin-top: $interiorMargin;
+  }
+
+  &__content,
+  &__conditions,
+  &__condition {
     > * + * {
-        margin-top: $interiorMargin;
+      margin-top: $interiorMargin;
     }
+  }
 
-    &__content,
-    &__conditions,
-    &__condition {
-        > * + * {
-            margin-top: $interiorMargin;
-        }
-    }
+  &__content {
+    display: flex;
+    flex-direction: column;
+  }
 
-    &__content {
-        display: flex;
-        flex-direction: column;
-    }
+  &__elem {
+    border-bottom: 1px solid $colorInteriorBorder;
+    padding-bottom: $interiorMargin;
+  }
 
-    &__condition-set {
-        align-items: baseline;
-        border-bottom: 1px solid $colorInteriorBorder;
-        display: flex;
-        flex-direction: row;
-        padding-bottom: $interiorMargin;
+  &__condition-set {
+    align-items: baseline;
+    display: flex;
+    flex-direction: row;
 
-        .c-object-label {
-            flex: 1 1 auto;
-        }
-
-        .c-button {
-            flex: 0 0 auto;
-        }
+    .c-object-label {
+      flex: 1 1 auto;
     }
 
-    &__style {
-        padding-bottom: $interiorMargin;
+    .c-button {
+      flex: 0 0 auto;
     }
+  }
+
+  &__style {
+    padding-bottom: $interiorMargin;
+  }
 
-    &__condition {
-        padding: $interiorMargin;
+  &__condition {
+    padding: $interiorMargin;
+  }
+
+  &__condition {
+    @include discreteItem();
+    border: 1px solid transparent;
+    pointer-events: none; // Prevent selecting when the object isn't being edited
+
+    &.is-current {
+      $c: $colorBodyFg;
+      border-color: rgba($c, 0.2);
+      background: rgba($c, 0.2);
     }
 
-    &__condition {
-        @include discreteItem();
-        border: 1px solid transparent;
-        pointer-events: none; // Prevent selecting when the object isn't being edited
-
-        &.is-current {
-            $c: $colorBodyFg;
-            border-color: rgba($c, 0.2);
-            background: rgba($c, 0.2);
-        }
-
-        .is-editing & {
-            cursor: pointer;
-            pointer-events: initial;
-            transition: $transOut;
-
-            &:hover {
-                background: rgba($colorBodyFg, 0.1);
-                transition: $transIn;
-            }
-
-            &.is-current {
-                $c: $editUIColorBg;
-                border-color: $c;
-                background: rgba($c, 0.1);
-            }
-        }
+    .is-editing & {
+      cursor: pointer;
+      pointer-events: initial;
+
+      &:hover {
+        background: rgba($colorBodyFg, 0.1);
+      }
+
+      &.is-current {
+        $c: $editUIColorBg;
+        border-color: $c;
+        background: rgba($c, 0.1);
+      }
     }
+  }
 
-    .c-style {
-        padding: 2px; // Allow a bit of room for thumb box-shadow
+  .c-style {
+    padding: 2px; // Allow a bit of room for thumb box-shadow
 
-        &__condition-desc {
-            @include ellipsize();
-        }
+    &__condition-desc {
+      @include ellipsize();
     }
+  }
 }
 
 .c-inspect-styles__style {
-    .is-editing & {
-        border-bottom: 1px solid $colorInteriorBorder;
-    }
+  .is-editing & {
+    border-bottom: 1px solid $colorInteriorBorder;
+  }
 }
 
 .l-shell:not(.is-editing) .c-inspect-styles {
-    .c-toolbar {
-        // Disabled-look toolbar when not editing
-        pointer-events: none;
-        cursor: inherit;
-
-        // Hide control buttons, like image URL
-        [class*='--image-url'] {
-            display: none;
-        }
-
-        // Make buttons look disabled by knocking back icon, not swatch element
-        .c-icon-button {
-            &:before {
-                opacity: $controlDisabledOpacity;
-            }
-        }
+  .c-toolbar {
+    // Disabled-look toolbar when not editing
+    pointer-events: none;
+    cursor: inherit;
+
+    // Hide control buttons, like image URL
+    [class*='--image-url'] {
+      display: none;
     }
+
+    // Make buttons look disabled by knocking back icon, not swatch element
+    .c-icon-button {
+      &:before {
+        opacity: $controlDisabledOpacity;
+      }
+    }
+  }
 }
 
 .c-toggle-styling-button {
-    display: none;
+  display: none;
 
-    .is-editing & {
-        display: block;
-        align-self: flex-end;
-    }
+  .is-editing & {
+    display: block;
+    align-self: flex-end;
+  }
 }
 
 .is-style-invisible {
-    display: none !important;
-
-    .is-editing & {
-        display: block !important;
-        opacity: 0.2;
-    }
-
-    &.c-style-thumb {
-        display: block !important;
-        background-color: transparent !important;
-        border-color: transparent !important;
-        @include bgCheckerboard($size: 10px, $imp: true);
-        opacity: 1;
-    }
+  display: none !important;
+
+  .is-editing & {
+    display: block !important;
+    opacity: 0.2;
+  }
+
+  &.c-style-thumb {
+    display: block !important;
+    background-color: transparent !important;
+    border-color: transparent !important;
+    @include bgCheckerboard($size: 10px, $imp: true);
+    opacity: 1;
+  }
 }
diff --git a/src/plugins/condition/criterion/AllTelemetryCriterion.js b/src/plugins/condition/criterion/AllTelemetryCriterion.js
index 85504190f4a..5e8573ea7ee 100644
--- a/src/plugins/condition/criterion/AllTelemetryCriterion.js
+++ b/src/plugins/condition/criterion/AllTelemetryCriterion.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,215 +20,280 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import TelemetryCriterion from './TelemetryCriterion';
-import { evaluateResults } from "../utils/evaluator";
-import {getLatestTimestamp, subscribeForStaleness} from '../utils/time';
-import { getOperatorText } from "@/plugins/condition/utils/operations";
+import { getOperatorText } from '@/plugins/condition/utils/operations';
+import StalenessUtils from '@/utils/staleness';
 
-export default class AllTelemetryCriterion extends TelemetryCriterion {
+import { evaluateResults } from '../utils/evaluator.js';
+import { checkIfOld, getLatestTimestamp } from '../utils/time.js';
+import TelemetryCriterion from './TelemetryCriterion.js';
 
-    /**
-     * Subscribes/Unsubscribes to telemetry and emits the result
-     * of operations performed on the telemetry data returned and a given input value.
-     * @constructor
-     * @param telemetryDomainObjectDefinition {id: uuid, operation: enum, input: Array, metadata: string, key: {domainObject.identifier} }
-     * @param openmct
-     */
-
-    initialize() {
-        this.telemetryObjects = { ...this.telemetryDomainObjectDefinition.telemetryObjects };
-        this.telemetryDataCache = {};
-        if (this.isValid() && this.isStalenessCheck() && this.isValidInput()) {
-            this.subscribeForStaleData(this.telemetryObjects || {});
-        }
+export default class AllTelemetryCriterion extends TelemetryCriterion {
+  /**
+   * Subscribes/Unsubscribes to telemetry and emits the result
+   * of operations performed on the telemetry data returned and a given input value.
+   * @constructor
+   * @param telemetryDomainObjectDefinition {id: uuid, operation: enum, input: Array, metadata: string, key: {domainObject.identifier} }
+   * @param openmct
+   */
+
+  initialize() {
+    this.telemetryObjects = { ...this.telemetryDomainObjectDefinition.telemetryObjects };
+    this.telemetryDataCache = {};
+
+    if (this.isValid() && this.isOldCheck() && this.isValidInput()) {
+      this.checkForOldData(this.telemetryObjects || {});
     }
 
-    subscribeForStaleData(telemetryObjects) {
-
-        if (!this.stalenessSubscription) {
-            this.stalenessSubscription = {};
-        }
-
-        Object.values(telemetryObjects).forEach((telemetryObject) => {
-            const id = this.openmct.objects.makeKeyString(telemetryObject.identifier);
-            if (!this.stalenessSubscription[id]) {
-                this.stalenessSubscription[id] = subscribeForStaleness((data) => {
-                    this.handleStaleTelemetry(id, data);
-                }, this.input[0] * 1000);
-            }
-        });
+    if (this.isValid() && this.isStalenessCheck()) {
+      this.subscribeToStaleness(this.telemetryObjects || {});
     }
+  }
 
-    handleStaleTelemetry(id, data) {
-        if (this.telemetryDataCache) {
-            this.telemetryDataCache[id] = true;
-            this.result = evaluateResults(Object.values(this.telemetryDataCache), this.telemetry);
-        }
-
-        this.emitEvent('telemetryIsStale', data);
+  checkForOldData(telemetryObjects) {
+    if (!this.ageCheck) {
+      this.ageCheck = {};
     }
 
-    isValid() {
-        return (this.telemetry === 'any' || this.telemetry === 'all') && this.metadata && this.operation;
+    Object.values(telemetryObjects).forEach((telemetryObject) => {
+      const id = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+      if (!this.ageCheck[id]) {
+        this.ageCheck[id] = checkIfOld((data) => {
+          this.handleOldTelemetry(id, data);
+        }, this.input[0] * 1000);
+      }
+    });
+  }
+
+  handleOldTelemetry(id, data) {
+    if (this.telemetryDataCache) {
+      this.telemetryDataCache[id] = true;
+      this.result = evaluateResults(Object.values(this.telemetryDataCache), this.telemetry);
     }
 
-    updateTelemetryObjects(telemetryObjects) {
-        this.telemetryObjects = { ...telemetryObjects };
-        this.removeTelemetryDataCache();
-        if (this.isValid() && this.isStalenessCheck() && this.isValidInput()) {
-            this.subscribeForStaleData(this.telemetryObjects || {});
-        }
+    this.emitEvent('telemetryIsOld', data);
+  }
+
+  subscribeToStaleness(telemetryObjects) {
+    if (!this.stalenessSubscription) {
+      this.stalenessSubscription = {};
     }
 
-    removeTelemetryDataCache() {
-        const telemetryCacheIds = Object.keys(this.telemetryDataCache);
-        Object.values(this.telemetryObjects).forEach(telemetryObject => {
-            const id = this.openmct.objects.makeKeyString(telemetryObject.identifier);
-            const foundIndex = telemetryCacheIds.indexOf(id);
-            if (foundIndex > -1) {
-                telemetryCacheIds.splice(foundIndex, 1);
-            }
-        });
-        telemetryCacheIds.forEach(id => {
-            delete (this.telemetryDataCache[id]);
-            delete (this.stalenessSubscription[id]);
+    Object.values(telemetryObjects).forEach((telemetryObject) => {
+      const id = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+      if (!this.stalenessSubscription[id]) {
+        this.stalenessSubscription[id] = {};
+        this.stalenessSubscription[id].stalenessUtils = new StalenessUtils(
+          this.openmct,
+          telemetryObject
+        );
+        this.openmct.telemetry.isStale(telemetryObject).then((stalenessResponse) => {
+          if (stalenessResponse !== undefined) {
+            this.handleStaleTelemetry(id, stalenessResponse);
+          }
         });
+        this.stalenessSubscription[id].unsubscribe = this.openmct.telemetry.subscribeToStaleness(
+          telemetryObject,
+          (stalenessResponse) => {
+            this.handleStaleTelemetry(id, stalenessResponse);
+          }
+        );
+      }
+    });
+  }
+
+  handleStaleTelemetry(id, stalenessResponse) {
+    if (this.telemetryDataCache) {
+      if (this.stalenessSubscription[id].stalenessUtils.shouldUpdateStaleness(stalenessResponse)) {
+        this.telemetryDataCache[id] = stalenessResponse.isStale;
+        this.result = evaluateResults(Object.values(this.telemetryDataCache), this.telemetry);
+
+        this.emitEvent('telemetryStaleness');
+      }
     }
+  }
 
-    formatData(data, telemetryObjects) {
-        if (data) {
-            this.telemetryDataCache[data.id] = this.computeResult(data);
-        }
+  isValid() {
+    return (
+      (this.telemetry === 'any' || this.telemetry === 'all') && this.metadata && this.operation
+    );
+  }
 
-        let keys = Object.keys(telemetryObjects);
-        keys.forEach((key) => {
-            let telemetryObject = telemetryObjects[key];
-            const id = this.openmct.objects.makeKeyString(telemetryObject.identifier);
-            if (this.telemetryDataCache[id] === undefined) {
-                this.telemetryDataCache[id] = false;
-            }
-        });
+  updateTelemetryObjects(telemetryObjects) {
+    this.telemetryObjects = { ...telemetryObjects };
+    this.removeTelemetryDataCache();
 
-        const datum = {
-            result: evaluateResults(Object.values(this.telemetryDataCache), this.telemetry)
-        };
+    if (this.isValid() && this.isOldCheck() && this.isValidInput()) {
+      this.checkForOldData(this.telemetryObjects || {});
+    }
 
-        if (data) {
-            this.openmct.time.getAllTimeSystems().forEach(timeSystem => {
-                datum[timeSystem.key] = data[timeSystem.key];
-            });
-        }
+    if (this.isValid() && this.isStalenessCheck()) {
+      this.subscribeToStaleness(this.telemetryObjects || {});
+    }
+  }
+
+  removeTelemetryDataCache() {
+    const telemetryCacheIds = Object.keys(this.telemetryDataCache);
+    Object.values(this.telemetryObjects).forEach((telemetryObject) => {
+      const id = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+      const foundIndex = telemetryCacheIds.indexOf(id);
+      if (foundIndex > -1) {
+        telemetryCacheIds.splice(foundIndex, 1);
+      }
+    });
+    telemetryCacheIds.forEach((id) => {
+      delete this.telemetryDataCache[id];
+      delete this.ageCheck[id];
+      this.stalenessSubscription[id].unsubscribe();
+      this.stalenessSubscription[id].stalenessUtils.destroy();
+      delete this.stalenessSubscription[id];
+    });
+  }
+
+  formatData(data, telemetryObjects) {
+    if (data) {
+      this.telemetryDataCache[data.id] = this.computeResult(data);
+    }
 
-        return datum;
+    let keys = Object.keys(telemetryObjects);
+    keys.forEach((key) => {
+      let telemetryObject = telemetryObjects[key];
+      const id = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+      if (this.telemetryDataCache[id] === undefined) {
+        this.telemetryDataCache[id] = false;
+      }
+    });
+
+    const datum = {
+      result: evaluateResults(Object.values(this.telemetryDataCache), this.telemetry)
+    };
+
+    if (data) {
+      this.openmct.time.getAllTimeSystems().forEach((timeSystem) => {
+        datum[timeSystem.key] = data[timeSystem.key];
+      });
     }
 
-    updateResult(data, telemetryObjects) {
-        const validatedData = this.isValid() ? data : {};
+    return datum;
+  }
 
-        if (validatedData) {
-            if (this.isStalenessCheck()) {
-                if (this.stalenessSubscription && this.stalenessSubscription[validatedData.id]) {
-                    this.stalenessSubscription[validatedData.id].update(validatedData);
-                }
+  updateResult(data, telemetryObjects) {
+    const validatedData = this.isValid() ? data : {};
 
-                this.telemetryDataCache[validatedData.id] = false;
-            } else {
-                this.telemetryDataCache[validatedData.id] = this.computeResult(validatedData);
-            }
+    if (validatedData && !this.isStalenessCheck()) {
+      if (this.isOldCheck()) {
+        if (this.ageCheck?.[validatedData.id]) {
+          this.ageCheck[validatedData.id].update(validatedData);
         }
 
-        Object.values(telemetryObjects).forEach(telemetryObject => {
-            const id = this.openmct.objects.makeKeyString(telemetryObject.identifier);
-            if (this.telemetryDataCache[id] === undefined) {
-                this.telemetryDataCache[id] = false;
-            }
-        });
+        this.telemetryDataCache[validatedData.id] = false;
+      } else {
+        this.telemetryDataCache[validatedData.id] = this.computeResult(validatedData);
+      }
+    }
 
-        this.result = evaluateResults(Object.values(this.telemetryDataCache), this.telemetry);
+    Object.values(telemetryObjects).forEach((telemetryObject) => {
+      const id = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+      if (this.telemetryDataCache[id] === undefined) {
+        this.telemetryDataCache[id] = false;
+      }
+    });
+
+    this.result = evaluateResults(Object.values(this.telemetryDataCache), this.telemetry);
+  }
+
+  requestLAD(telemetryObjects, requestOptions) {
+    //We pass in the global time context here
+    let options = {
+      strategy: 'latest',
+      size: 1,
+      timeContext: this.openmct.time.getContextForView([])
+    };
+
+    if (requestOptions !== undefined) {
+      options = Object.assign(options, requestOptions);
     }
 
-    requestLAD(telemetryObjects, requestOptions) {
-        let options = {
-            strategy: 'latest',
-            size: 1
-        };
+    if (!this.isValid()) {
+      return this.formatData({}, telemetryObjects);
+    }
 
-        if (requestOptions !== undefined) {
-            options = Object.assign(options, requestOptions);
+    let keys = Object.keys(Object.assign({}, telemetryObjects));
+    const telemetryRequests = keys.map((key) =>
+      this.openmct.telemetry.request(telemetryObjects[key], options)
+    );
+
+    let telemetryDataCache = {};
+
+    return Promise.all(telemetryRequests).then((telemetryRequestsResults) => {
+      let latestTimestamp;
+      const timeSystems = this.openmct.time.getAllTimeSystems();
+      const timeSystem = this.openmct.time.timeSystem();
+
+      telemetryRequestsResults.forEach((results, index) => {
+        const latestDatum =
+          Array.isArray(results) && results.length ? results[results.length - 1] : {};
+        const datumId = keys[index];
+        const normalizedDatum = this.createNormalizedDatum(latestDatum, telemetryObjects[datumId]);
+
+        telemetryDataCache[datumId] = this.computeResult(normalizedDatum);
+
+        latestTimestamp = getLatestTimestamp(
+          latestTimestamp,
+          normalizedDatum,
+          timeSystems,
+          timeSystem
+        );
+      });
+
+      const datum = {
+        result: evaluateResults(Object.values(telemetryDataCache), this.telemetry),
+        ...latestTimestamp
+      };
+
+      return {
+        id: this.id,
+        data: datum
+      };
+    });
+  }
+
+  getDescription() {
+    const telemetryDescription = this.telemetry === 'all' ? 'all telemetry' : 'any telemetry';
+    let metadataValue = this.metadata === 'dataReceived' ? '' : this.metadata;
+    let inputValue = this.input;
+    if (this.metadata) {
+      const telemetryObjects = Object.values(this.telemetryObjects);
+      for (let i = 0; i < telemetryObjects.length; i++) {
+        const telemetryObject = telemetryObjects[i];
+        const metadataObject = this.getMetaDataObject(telemetryObject, this.metadata);
+        if (metadataObject) {
+          metadataValue = this.getMetadataValueFromMetaData(metadataObject) || this.metadata;
+          inputValue = this.getInputValueFromMetaData(metadataObject, this.input) || this.input;
+          break;
         }
+      }
+    }
 
-        if (!this.isValid()) {
-            return this.formatData({}, telemetryObjects);
-        }
+    return `${telemetryDescription} ${metadataValue} ${getOperatorText(
+      this.operation,
+      inputValue
+    )}`;
+  }
 
-        let keys = Object.keys(Object.assign({}, telemetryObjects));
-        const telemetryRequests = keys
-            .map(key => this.openmct.telemetry.request(
-                telemetryObjects[key],
-                options
-            ));
-
-        let telemetryDataCache = {};
-
-        return Promise.all(telemetryRequests)
-            .then(telemetryRequestsResults => {
-                let latestTimestamp;
-                const timeSystems = this.openmct.time.getAllTimeSystems();
-                const timeSystem = this.openmct.time.timeSystem();
-
-                telemetryRequestsResults.forEach((results, index) => {
-                    const latestDatum = results.length ? results[results.length - 1] : {};
-                    const datumId = keys[index];
-                    const normalizedDatum = this.createNormalizedDatum(latestDatum, telemetryObjects[datumId]);
-
-                    telemetryDataCache[datumId] = this.computeResult(normalizedDatum);
-
-                    latestTimestamp = getLatestTimestamp(
-                        latestTimestamp,
-                        normalizedDatum,
-                        timeSystems,
-                        timeSystem
-                    );
-                });
-
-                const datum = {
-                    result: evaluateResults(Object.values(telemetryDataCache), this.telemetry),
-                    ...latestTimestamp
-                };
-
-                return {
-                    id: this.id,
-                    data: datum
-                };
-            });
-    }
-
-    getDescription() {
-        const telemetryDescription = this.telemetry === 'all' ? 'all telemetry' : 'any telemetry';
-        let metadataValue = (this.metadata === 'dataReceived' ? '' : this.metadata);
-        let inputValue = this.input;
-        if (this.metadata) {
-            const telemetryObjects = Object.values(this.telemetryObjects);
-            for (let i = 0; i < telemetryObjects.length; i++) {
-                const telemetryObject = telemetryObjects[i];
-                const metadataObject = this.getMetaDataObject(telemetryObject, this.metadata);
-                if (metadataObject) {
-                    metadataValue = this.getMetadataValueFromMetaData(metadataObject) || this.metadata;
-                    inputValue = this.getInputValueFromMetaData(metadataObject, this.input) || this.input;
-                    break;
-                }
-            }
-        }
+  destroy() {
+    delete this.telemetryObjects;
+    delete this.telemetryDataCache;
 
-        return `${telemetryDescription} ${metadataValue} ${getOperatorText(this.operation, inputValue)}`;
+    if (this.ageCheck) {
+      Object.values(this.ageCheck).forEach((subscription) => subscription.clear);
+      delete this.ageCheck;
     }
 
-    destroy() {
-        delete this.telemetryObjects;
-        delete this.telemetryDataCache;
-        if (this.stalenessSubscription) {
-            Object.values(this.stalenessSubscription).forEach((subscription) => subscription.clear);
-            delete this.stalenessSubscription;
-        }
+    if (this.stalenessSubscription) {
+      Object.values(this.stalenessSubscription).forEach((subscription) => {
+        subscription.unsubscribe();
+        subscription.stalenessUtils.destroy();
+      });
     }
+  }
 }
diff --git a/src/plugins/condition/criterion/TelemetryCriterion.js b/src/plugins/condition/criterion/TelemetryCriterion.js
index f05383454db..28e94e36215 100644
--- a/src/plugins/condition/criterion/TelemetryCriterion.js
+++ b/src/plugins/condition/criterion/TelemetryCriterion.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,246 +21,332 @@
  *****************************************************************************/
 
 import EventEmitter from 'EventEmitter';
-import { OPERATIONS, getOperatorText } from '../utils/operations';
-import { subscribeForStaleness } from "../utils/time";
 
-export default class TelemetryCriterion extends EventEmitter {
+import StalenessUtils from '@/utils/staleness';
+
+import { IS_OLD_KEY, IS_STALE_KEY } from '../utils/constants.js';
+import { getOperatorText, OPERATIONS } from '../utils/operations.js';
+import { checkIfOld } from '../utils/time.js';
 
-    /**
-     * Subscribes/Unsubscribes to telemetry and emits the result
-     * of operations performed on the telemetry data returned and a given input value.
-     * @constructor
-     * @param telemetryDomainObjectDefinition {id: uuid, operation: enum, input: Array, metadata: string, key: {domainObject.identifier} }
-     * @param openmct
-     */
-    constructor(telemetryDomainObjectDefinition, openmct) {
-        super();
-
-        this.openmct = openmct;
-        this.telemetryDomainObjectDefinition = telemetryDomainObjectDefinition;
-        this.id = telemetryDomainObjectDefinition.id;
-        this.telemetry = telemetryDomainObjectDefinition.telemetry;
-        this.operation = telemetryDomainObjectDefinition.operation;
-        this.input = telemetryDomainObjectDefinition.input;
-        this.metadata = telemetryDomainObjectDefinition.metadata;
-        this.result = undefined;
-        this.stalenessSubscription = undefined;
-
-        this.initialize();
-        this.emitEvent('criterionUpdated', this);
+export default class TelemetryCriterion extends EventEmitter {
+  /**
+   * Subscribes/Unsubscribes to telemetry and emits the result
+   * of operations performed on the telemetry data returned and a given input value.
+   * @constructor
+   * @param telemetryDomainObjectDefinition {id: uuid, operation: enum, input: Array, metadata: string, key: {domainObject.identifier} }
+   * @param openmct
+   */
+  constructor(telemetryDomainObjectDefinition, openmct) {
+    super();
+
+    this.openmct = openmct;
+    this.telemetryDomainObjectDefinition = telemetryDomainObjectDefinition;
+    this.id = telemetryDomainObjectDefinition.id;
+    this.telemetry = telemetryDomainObjectDefinition.telemetry;
+    this.operation = telemetryDomainObjectDefinition.operation;
+    this.input = telemetryDomainObjectDefinition.input;
+    this.metadata = telemetryDomainObjectDefinition.metadata;
+    this.result = undefined;
+    this.ageCheck = undefined;
+    this.unsubscribeFromStaleness = undefined;
+
+    this.initialize();
+    this.emitEvent('criterionUpdated', this);
+
+    this.openmct.time.on('clockChanged', this.subscribeToStaleness);
+  }
+
+  initialize() {
+    this.telemetryObjectIdAsString = '';
+    if (![undefined, null, ''].includes(this.telemetryDomainObjectDefinition?.telemetry)) {
+      this.telemetryObjectIdAsString = this.openmct.objects.makeKeyString(
+        this.telemetryDomainObjectDefinition.telemetry
+      );
     }
 
-    initialize() {
-        this.telemetryObjectIdAsString = this.openmct.objects.makeKeyString(this.telemetryDomainObjectDefinition.telemetry);
-        this.updateTelemetryObjects(this.telemetryDomainObjectDefinition.telemetryObjects);
-        if (this.isValid() && this.isStalenessCheck() && this.isValidInput()) {
-            this.subscribeForStaleData();
-        }
+    this.updateTelemetryObjects(this.telemetryDomainObjectDefinition.telemetryObjects);
+
+    if (this.isValid() && this.isOldCheck() && this.isValidInput()) {
+      this.checkForOldData();
     }
 
-    usesTelemetry(id) {
-        return this.telemetryObjectIdAsString && (this.telemetryObjectIdAsString === id);
+    if (this.isValid() && this.isStalenessCheck()) {
+      this.subscribeToStaleness();
     }
+  }
 
-    subscribeForStaleData() {
-        if (this.stalenessSubscription) {
-            this.stalenessSubscription.clear();
-        }
+  usesTelemetry(id) {
+    return this.telemetryObjectIdAsString && this.telemetryObjectIdAsString === id;
+  }
 
-        this.stalenessSubscription = subscribeForStaleness(this.handleStaleTelemetry.bind(this), this.input[0] * 1000);
+  checkForOldData() {
+    if (this.ageCheck) {
+      this.ageCheck.clear();
     }
 
-    handleStaleTelemetry(data) {
-        this.result = true;
-        this.emitEvent('telemetryIsStale', data);
-    }
+    this.ageCheck = checkIfOld(this.handleOldTelemetry.bind(this), this.input[0] * 1000);
+  }
+
+  handleOldTelemetry(data) {
+    this.result = true;
+    this.emitEvent('telemetryIsOld', data);
+  }
 
-    isValid() {
-        return this.telemetryObject && this.metadata && this.operation;
+  subscribeToStaleness() {
+    if (this.unsubscribeFromStaleness) {
+      this.unsubscribeFromStaleness();
     }
 
-    isStalenessCheck() {
-        return this.metadata && this.metadata === 'dataReceived';
+    if (!this.telemetryObject) {
+      return;
     }
 
-    isValidInput() {
-        return this.input instanceof Array && this.input.length;
+    if (!this.stalenessUtils) {
+      this.stalenessUtils = new StalenessUtils(this.openmct, this.telemetryObject);
     }
 
-    updateTelemetryObjects(telemetryObjects) {
-        this.telemetryObject = telemetryObjects[this.telemetryObjectIdAsString];
-        if (this.isValid() && this.isStalenessCheck() && this.isValidInput()) {
-            this.subscribeForStaleData();
-        }
+    this.openmct.telemetry.isStale(this.telemetryObject).then(this.handleStaleTelemetry.bind(this));
+    this.unsubscribeFromStaleness = this.openmct.telemetry.subscribeToStaleness(
+      this.telemetryObject,
+      this.handleStaleTelemetry.bind(this)
+    );
+  }
+
+  handleStaleTelemetry(stalenessResponse) {
+    if (
+      stalenessResponse !== undefined &&
+      this.stalenessUtils.shouldUpdateStaleness(stalenessResponse)
+    ) {
+      this.result = stalenessResponse.isStale;
+      this.emitEvent('telemetryStaleness');
     }
+  }
+
+  isValid() {
+    return this.telemetryObject && this.metadata && this.operation;
+  }
 
-    createNormalizedDatum(telemetryDatum, endpoint) {
-        const id = this.openmct.objects.makeKeyString(endpoint.identifier);
-        const metadata = this.openmct.telemetry.getMetadata(endpoint).valueMetadatas;
+  isOldCheck() {
+    return this.metadata && this.metadata === 'dataReceived' && this.operation === IS_OLD_KEY;
+  }
 
-        const normalizedDatum = Object.values(metadata).reduce((datum, metadatum) => {
-            const formatter = this.openmct.telemetry.getValueFormatter(metadatum);
-            datum[metadatum.key] = formatter.parse(telemetryDatum[metadatum.source]);
+  isStalenessCheck() {
+    return this.metadata && this.metadata === 'dataReceived' && this.operation === IS_STALE_KEY;
+  }
 
-            return datum;
-        }, {});
+  isValidInput() {
+    return this.input instanceof Array && this.input.length;
+  }
 
-        normalizedDatum.id = id;
+  updateTelemetryObjects(telemetryObjects) {
+    this.telemetryObject = telemetryObjects[this.telemetryObjectIdAsString];
 
-        return normalizedDatum;
+    if (this.isValid() && this.isOldCheck() && this.isValidInput()) {
+      this.checkForOldData();
     }
 
-    formatData(data) {
-        const datum = {
-            result: this.computeResult(data)
-        };
+    if (this.isValid() && this.isStalenessCheck()) {
+      this.subscribeToStaleness();
+    }
+  }
 
-        if (data) {
-            this.openmct.time.getAllTimeSystems().forEach(timeSystem => {
-                datum[timeSystem.key] = data[timeSystem.key];
-            });
-        }
+  createNormalizedDatum(telemetryDatum, endpoint) {
+    const id = this.openmct.objects.makeKeyString(endpoint.identifier);
+    const metadata = this.openmct.telemetry.getMetadata(endpoint).valueMetadatas;
 
-        return datum;
-    }
+    const normalizedDatum = Object.values(metadata).reduce((datum, metadatum) => {
+      const formatter = this.openmct.telemetry.getValueFormatter(metadatum);
+      datum[metadatum.key] = formatter.parse(telemetryDatum[metadatum.source]);
 
-    updateResult(data) {
-        const validatedData = this.isValid() ? data : {};
-        if (this.isStalenessCheck()) {
-            if (this.stalenessSubscription) {
-                this.stalenessSubscription.update(validatedData);
-            }
+      return datum;
+    }, {});
 
-            this.result = false;
-        } else {
-            this.result = this.computeResult(validatedData);
-        }
+    normalizedDatum.id = id;
+
+    return normalizedDatum;
+  }
+
+  formatData(data) {
+    const datum = {
+      result: this.computeResult(data)
+    };
+
+    if (data) {
+      this.openmct.time.getAllTimeSystems().forEach((timeSystem) => {
+        datum[timeSystem.key] = data[timeSystem.key];
+      });
     }
 
-    requestLAD(telemetryObjects, requestOptions) {
-        let options = {
-            strategy: 'latest',
-            size: 1
-        };
+    return datum;
+  }
 
-        if (requestOptions !== undefined) {
-            options = Object.assign(options, requestOptions);
-        }
+  updateResult(data) {
+    const validatedData = this.isValid() ? data : {};
 
-        if (!this.isValid()) {
-            return {
-                id: this.id,
-                data: this.formatData({})
-            };
+    if (!this.isStalenessCheck()) {
+      if (this.isOldCheck()) {
+        if (this.ageCheck) {
+          this.ageCheck.update(validatedData);
         }
 
-        let telemetryObject = this.telemetryObject;
-
-        return this.openmct.telemetry.request(
-            this.telemetryObject,
-            options
-        ).then(results => {
-            const latestDatum = results.length ? results[results.length - 1] : {};
-            const normalizedDatum = this.createNormalizedDatum(latestDatum, telemetryObject);
+        this.result = false;
+      } else {
+        this.result = this.computeResult(validatedData);
+      }
+    }
+  }
+
+  requestLAD(telemetryObjects, requestOptions) {
+    //We pass in the global time context here
+    let options = {
+      strategy: 'latest',
+      size: 1,
+      timeContext: this.openmct.time.getContextForView([])
+    };
+
+    if (requestOptions !== undefined) {
+      options = Object.assign(options, requestOptions);
+    }
 
-            return {
-                id: this.id,
-                data: this.formatData(normalizedDatum)
-            };
-        });
+    if (!this.isValid()) {
+      return {
+        id: this.id,
+        data: this.formatData({})
+      };
     }
 
-    findOperation(operation) {
-        for (let i = 0, ii = OPERATIONS.length; i < ii; i++) {
-            if (operation === OPERATIONS[i].name) {
-                return OPERATIONS[i].operation;
-            }
-        }
+    let telemetryObject = this.telemetryObject;
 
-        return null;
-    }
+    return this.openmct.telemetry
+      .request(this.telemetryObject, options)
+      .then((results) => {
+        const latestDatum = results.length ? results[results.length - 1] : {};
+        const normalizedDatum = this.createNormalizedDatum(latestDatum, telemetryObject);
 
-    computeResult(data) {
-        let result = false;
-        if (data) {
-            let comparator = this.findOperation(this.operation);
-            let params = [];
-            params.push(data[this.metadata]);
-            if (this.isValidInput()) {
-                this.input.forEach(input => params.push(input));
-            }
-
-            if (typeof comparator === 'function') {
-                result = Boolean(comparator(params));
-            }
-        }
+        return {
+          id: this.id,
+          data: this.formatData(normalizedDatum)
+        };
+      })
+      .catch((error) => {
+        return {
+          id: this.id,
+          data: this.formatData()
+        };
+      });
+  }
+
+  findOperation(operation) {
+    for (let i = 0, ii = OPERATIONS.length; i < ii; i++) {
+      if (operation === OPERATIONS[i].name) {
+        return OPERATIONS[i].operation;
+      }
+    }
 
-        return result;
+    return null;
+  }
+
+  computeResult(data) {
+    let result = false;
+    if (data) {
+      let comparator = this.findOperation(this.operation);
+      let params = [];
+      params.push(data[this.metadata]);
+      if (this.isValidInput()) {
+        this.input.forEach((input) => params.push(input));
+      }
+
+      if (typeof comparator === 'function') {
+        result = Boolean(comparator(params));
+      }
     }
 
-    emitEvent(eventName, data) {
-        this.emit(eventName, {
-            id: this.id,
-            data: data
-        });
+    return result;
+  }
+
+  emitEvent(eventName, data) {
+    this.emit(eventName, {
+      id: this.id,
+      data: data
+    });
+  }
+
+  getMetaDataObject(telemetryObject, metadata) {
+    let metadataObject;
+    if (metadata) {
+      const telemetryMetadata = this.openmct.telemetry.getMetadata(telemetryObject);
+      if (telemetryMetadata) {
+        metadataObject = telemetryMetadata.valueMetadatas.find(
+          (valueMetadata) => valueMetadata.key === metadata
+        );
+      }
     }
 
-    getMetaDataObject(telemetryObject, metadata) {
-        let metadataObject;
-        if (metadata) {
-            const telemetryMetadata = this.openmct.telemetry.getMetadata(telemetryObject);
-            if (telemetryMetadata) {
-                metadataObject = telemetryMetadata.valueMetadatas.find((valueMetadata) => valueMetadata.key === metadata);
-            }
+    return metadataObject;
+  }
+
+  getInputValueFromMetaData(metadataObject, input) {
+    let inputValue;
+    if (metadataObject) {
+      if (metadataObject.enumerations && input.length) {
+        const enumeration = metadataObject.enumerations.find(
+          (item) => item.value.toString() === input[0].toString()
+        );
+        if (enumeration !== undefined && enumeration.string) {
+          inputValue = [enumeration.string];
         }
-
-        return metadataObject;
+      }
     }
 
-    getInputValueFromMetaData(metadataObject, input) {
-        let inputValue;
-        if (metadataObject) {
-            if (metadataObject.enumerations && input.length) {
-                const enumeration = metadataObject.enumerations.find((item) => item.value.toString() === input[0].toString());
-                if (enumeration !== undefined && enumeration.string) {
-                    inputValue = [enumeration.string];
-                }
-            }
-        }
+    return inputValue;
+  }
 
-        return inputValue;
+  getMetadataValueFromMetaData(metadataObject) {
+    let metadataValue;
+    if (metadataObject) {
+      if (metadataObject.name) {
+        metadataValue = metadataObject.name;
+      }
     }
 
-    getMetadataValueFromMetaData(metadataObject) {
-        let metadataValue;
-        if (metadataObject) {
-            if (metadataObject.name) {
-                metadataValue = metadataObject.name;
-            }
-        }
+    return metadataValue;
+  }
+
+  getDescription(criterion, index) {
+    let description;
+    if (!this.telemetry || !this.telemetryObject || this.telemetryObject.type === 'unknown') {
+      description = `Unknown ${this.metadata} ${getOperatorText(this.operation, this.input)}`;
+    } else {
+      const metadataObject = this.getMetaDataObject(this.telemetryObject, this.metadata);
+      const metadataValue =
+        this.getMetadataValueFromMetaData(metadataObject) ||
+        (this.metadata === 'dataReceived' ? '' : this.metadata);
+      const inputValue = this.getInputValueFromMetaData(metadataObject, this.input) || this.input;
+      description = `${this.telemetryObject.name} ${metadataValue} ${getOperatorText(
+        this.operation,
+        inputValue
+      )}`;
+    }
 
-        return metadataValue;
+    return description;
+  }
+
+  destroy() {
+    delete this.telemetryObject;
+    delete this.telemetryObjectIdAsString;
+
+    if (this.ageCheck) {
+      delete this.ageCheck;
     }
 
-    getDescription(criterion, index) {
-        let description;
-        if (!this.telemetry || !this.telemetryObject || (this.telemetryObject.type === 'unknown')) {
-            description = `Unknown ${this.metadata} ${getOperatorText(this.operation, this.input)}`;
-        } else {
-            const metadataObject = this.getMetaDataObject(this.telemetryObject, this.metadata);
-            const metadataValue = this.getMetadataValueFromMetaData(metadataObject) || (this.metadata === 'dataReceived' ? '' : this.metadata);
-            const inputValue = this.getInputValueFromMetaData(metadataObject, this.input) || this.input;
-            description = `${this.telemetryObject.name} ${metadataValue} ${getOperatorText(this.operation, inputValue)}`;
-        }
+    this.openmct.time.off('clockChanged', this.subscribeToStaleness);
 
-        return description;
+    if (this.stalenessUtils) {
+      this.stalenessUtils.destroy();
     }
 
-    destroy() {
-        delete this.telemetryObject;
-        delete this.telemetryObjectIdAsString;
-        if (this.stalenessSubscription) {
-            delete this.stalenessSubscription;
-        }
+    if (this.unsubscribeFromStaleness) {
+      this.unsubscribeFromStaleness();
     }
+  }
 }
diff --git a/src/plugins/condition/criterion/TelemetryCriterionSpec.js b/src/plugins/condition/criterion/TelemetryCriterionSpec.js
index 7fbfa2f0ac0..d25dc291347 100644
--- a/src/plugins/condition/criterion/TelemetryCriterionSpec.js
+++ b/src/plugins/condition/criterion/TelemetryCriterionSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,8 +20,9 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import TelemetryCriterion from "./TelemetryCriterion";
-import { getMockTelemetry } from "utils/testing";
+import { getMockTelemetry } from 'utils/testing';
+
+import TelemetryCriterion from './TelemetryCriterion.js';
 
 let openmct = {};
 let mockListener;
@@ -30,118 +31,132 @@ let testTelemetryObject;
 let telemetryCriterion;
 let mockTelemetry = getMockTelemetry();
 
-describe("The telemetry criterion", function () {
-
-    beforeEach (() => {
-        testTelemetryObject = {
-            identifier: {
-                namespace: "",
-                key: "test-object"
-            },
-            type: "test-object",
-            name: "Test Object",
-            telemetry: {
-                valueMetadatas: [{
-                    key: "value",
-                    name: "Value",
-                    hints: {
-                        range: 2
-                    }
-                },
-                {
-                    key: "utc",
-                    name: "Time",
-                    format: "utc",
-                    hints: {
-                        domain: 1
-                    }
-                }, {
-                    key: "testSource",
-                    source: "value",
-                    name: "Test",
-                    format: "string"
-                }]
+describe('The telemetry criterion', function () {
+  beforeEach(() => {
+    testTelemetryObject = {
+      identifier: {
+        namespace: '',
+        key: 'test-object'
+      },
+      type: 'test-object',
+      name: 'Test Object',
+      telemetry: {
+        valueMetadatas: [
+          {
+            key: 'value',
+            name: 'Value',
+            hints: {
+              range: 2
             }
-        };
-        openmct.objects = jasmine.createSpyObj('objects', ['get', 'makeKeyString']);
-        openmct.objects.makeKeyString.and.returnValue(testTelemetryObject.identifier.key);
-        openmct.telemetry = jasmine.createSpyObj('telemetry', ['isTelemetryObject', "subscribe", "getMetadata", "getValueFormatter", "request"]);
-        openmct.telemetry.isTelemetryObject.and.returnValue(true);
-        openmct.telemetry.subscribe.and.returnValue(function () {});
-        openmct.telemetry.getValueFormatter.and.returnValue({
-            parse: function (value) {
-                return value;
+          },
+          {
+            key: 'utc',
+            name: 'Time',
+            format: 'utc',
+            hints: {
+              domain: 1
             }
-        });
-        openmct.telemetry.getMetadata.and.returnValue(testTelemetryObject.telemetry);
-
-        openmct.time = jasmine.createSpyObj('timeAPI',
-            ['timeSystem', 'bounds', 'getAllTimeSystems']
-        );
-        openmct.time.timeSystem.and.returnValue({key: 'system'});
-        openmct.time.bounds.and.returnValue({
-            start: 0,
-            end: 1
-        });
-        openmct.time.getAllTimeSystems.and.returnValue([{key: 'system'}]);
+          },
+          {
+            key: 'testSource',
+            source: 'value',
+            name: 'Test',
+            format: 'string'
+          }
+        ]
+      }
+    };
+    openmct.objects = jasmine.createSpyObj('objects', ['get', 'makeKeyString']);
+    openmct.objects.makeKeyString.and.returnValue(testTelemetryObject.identifier.key);
+    openmct.telemetry = jasmine.createSpyObj('telemetry', [
+      'isTelemetryObject',
+      'subscribe',
+      'getMetadata',
+      'getValueFormatter',
+      'request'
+    ]);
+    openmct.telemetry.isTelemetryObject.and.returnValue(true);
+    openmct.telemetry.subscribe.and.returnValue(function () {});
+    openmct.telemetry.getValueFormatter.and.returnValue({
+      parse: function (value) {
+        return value;
+      }
+    });
+    openmct.telemetry.getMetadata.and.returnValue(testTelemetryObject.telemetry);
 
-        testCriterionDefinition = {
-            id: 'test-criterion-id',
-            telemetry: openmct.objects.makeKeyString(testTelemetryObject.identifier),
-            operation: 'textContains',
-            metadata: 'value',
-            input: ['Hell'],
-            telemetryObjects: {[testTelemetryObject.identifier.key]: testTelemetryObject}
-        };
+    openmct.time = jasmine.createSpyObj('timeAPI', [
+      'timeSystem',
+      'bounds',
+      'getAllTimeSystems',
+      'getContextForView',
+      'on',
+      'off'
+    ]);
+    openmct.time.timeSystem.and.returnValue({ key: 'system' });
+    openmct.time.bounds.and.returnValue({
+      start: 0,
+      end: 1
+    });
+    openmct.time.getAllTimeSystems.and.returnValue([{ key: 'system' }]);
+    openmct.time.getContextForView.and.returnValue({});
+    openmct.time.on.and.returnValue(() => {});
+    openmct.time.off.and.returnValue(() => {});
 
-        mockListener = jasmine.createSpy('listener');
+    testCriterionDefinition = {
+      id: 'test-criterion-id',
+      telemetry: openmct.objects.makeKeyString(testTelemetryObject.identifier),
+      operation: 'textContains',
+      metadata: 'value',
+      input: ['Hell'],
+      telemetryObjects: { [testTelemetryObject.identifier.key]: testTelemetryObject }
+    };
 
-        telemetryCriterion = new TelemetryCriterion(
-            testCriterionDefinition,
-            openmct
-        );
+    mockListener = jasmine.createSpy('listener');
 
-        telemetryCriterion.on('criterionResultUpdated', mockListener);
+    telemetryCriterion = new TelemetryCriterion(testCriterionDefinition, openmct);
 
-    });
+    telemetryCriterion.on('criterionResultUpdated', mockListener);
+  });
 
-    it("initializes with a telemetry objectId as string", function () {
-        expect(telemetryCriterion.telemetryObjectIdAsString).toEqual(testTelemetryObject.identifier.key);
-    });
+  it('initializes with a telemetry objectId as string', function () {
+    expect(telemetryCriterion.telemetryObjectIdAsString).toEqual(
+      testTelemetryObject.identifier.key
+    );
+  });
 
-    it("returns a result on new data from relevant telemetry providers", function () {
-        telemetryCriterion.updateResult({
-            value: 'Hello',
-            utc: 'Hi',
-            id: testTelemetryObject.identifier.key
-        });
-        expect(telemetryCriterion.result).toBeTrue();
+  it('returns a result on new data from relevant telemetry providers', function () {
+    telemetryCriterion.updateResult({
+      value: 'Hello',
+      utc: 'Hi',
+      id: testTelemetryObject.identifier.key
     });
+    expect(telemetryCriterion.result).toBeTrue();
+  });
 
-    describe('the LAD request', () => {
-        beforeEach(() => {
-            let telemetryRequestResolve;
-            let telemetryRequestPromise = new Promise((resolve) => {
-                telemetryRequestResolve = resolve;
-            });
-            openmct.telemetry.request.and.callFake(() => {
-                setTimeout(() => {
-                    telemetryRequestResolve(mockTelemetry);
-                }, 100);
+  describe('the LAD request', () => {
+    beforeEach(() => {
+      let telemetryRequestResolve;
+      let telemetryRequestPromise = new Promise((resolve) => {
+        telemetryRequestResolve = resolve;
+      });
+      openmct.telemetry.request.and.callFake(() => {
+        setTimeout(() => {
+          telemetryRequestResolve(mockTelemetry);
+        }, 100);
 
-                return telemetryRequestPromise;
-            });
-        });
+        return telemetryRequestPromise;
+      });
+    });
 
-        it("returns results for slow LAD requests", function () {
-            const criteriaRequest = telemetryCriterion.requestLAD();
-            telemetryCriterion.destroy();
-            expect(telemetryCriterion.telemetryObject).toBeUndefined();
-            setTimeout(() => {
-                criteriaRequest.then((result) => {
-                    expect(result).toBeDefined();
-                });
-            }, 300);
+    it('returns results for slow LAD requests', function () {
+      const criteriaRequest = telemetryCriterion.requestLAD();
+      telemetryCriterion.destroy();
+      expect(telemetryCriterion.telemetryObject).toBeUndefined();
+      setTimeout(() => {
+        criteriaRequest.then((result) => {
+          expect(result).toBeDefined();
         });
+      }, 300);
     });
+  });
 });
diff --git a/src/plugins/condition/plugin.js b/src/plugins/condition/plugin.js
index bf3b99bf162..365386ef68d 100644
--- a/src/plugins/condition/plugin.js
+++ b/src/plugins/condition/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,50 +19,47 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+import { v4 as uuid } from 'uuid';
+
+import ConditionSetCompositionPolicy from './ConditionSetCompositionPolicy.js';
+import ConditionSetMetadataProvider from './ConditionSetMetadataProvider.js';
+import ConditionSetTelemetryProvider from './ConditionSetTelemetryProvider.js';
 import ConditionSetViewProvider from './ConditionSetViewProvider.js';
-import ConditionSetCompositionPolicy from "./ConditionSetCompositionPolicy";
-import ConditionSetMetadataProvider from './ConditionSetMetadataProvider';
-import ConditionSetTelemetryProvider from './ConditionSetTelemetryProvider';
-import ConditionSetViewPolicy from './ConditionSetViewPolicy';
-import uuid from "uuid";
 
 export default function ConditionPlugin() {
-
-    return function install(openmct) {
-
-        openmct.types.addType('conditionSet', {
-            name: 'Condition Set',
-            key: 'conditionSet',
-            description: 'Monitor and evaluate telemetry values in real-time with a wide variety of criteria. Use to control the styling of many objects in Open MCT.',
-            creatable: true,
-            cssClass: 'icon-conditional',
-            initialize: function (domainObject) {
-                domainObject.configuration = {
-                    conditionTestData: [],
-                    conditionCollection: [{
-                        isDefault: true,
-                        id: uuid(),
-                        configuration: {
-                            name: 'Default',
-                            output: 'Default',
-                            trigger: 'all',
-                            criteria: []
-                        },
-                        summary: 'Default condition'
-                    }]
-                };
-                domainObject.composition = [];
-                domainObject.telemetry = {};
+  return function install(openmct) {
+    openmct.types.addType('conditionSet', {
+      name: 'Condition Set',
+      key: 'conditionSet',
+      description:
+        'Monitor and evaluate telemetry values in real-time with a wide variety of criteria. Use to control the styling of many objects in Open MCT.',
+      creatable: true,
+      cssClass: 'icon-conditional',
+      initialize: function (domainObject) {
+        domainObject.configuration = {
+          conditionTestData: [],
+          conditionCollection: [
+            {
+              isDefault: true,
+              id: uuid(),
+              configuration: {
+                name: 'Default',
+                output: 'Default',
+                trigger: 'all',
+                criteria: []
+              },
+              summary: 'Default condition'
             }
-        });
-        openmct.legacyExtension('policies', {
-            category: 'view',
-            implementation: ConditionSetViewPolicy
-        });
-        openmct.composition.addPolicy(new ConditionSetCompositionPolicy(openmct).allow);
-        openmct.telemetry.addProvider(new ConditionSetMetadataProvider(openmct));
-        openmct.telemetry.addProvider(new ConditionSetTelemetryProvider(openmct));
-        openmct.objectViews.addProvider(new ConditionSetViewProvider(openmct));
-
-    };
+          ]
+        };
+        domainObject.composition = [];
+        domainObject.telemetry = {};
+      }
+    });
+    let compositionPolicy = new ConditionSetCompositionPolicy(openmct);
+    openmct.composition.addPolicy(compositionPolicy.allow.bind(compositionPolicy));
+    openmct.telemetry.addProvider(new ConditionSetMetadataProvider(openmct));
+    openmct.telemetry.addProvider(new ConditionSetTelemetryProvider(openmct));
+    openmct.objectViews.addProvider(new ConditionSetViewProvider(openmct));
+  };
 }
diff --git a/src/plugins/condition/pluginSpec.js b/src/plugins/condition/pluginSpec.js
index e3418352a01..4b82306c94f 100644
--- a/src/plugins/condition/pluginSpec.js
+++ b/src/plugins/condition/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,696 +20,978 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import { createOpenMct, resetApplicationState } from "utils/testing";
-import ConditionPlugin from "./plugin";
-import stylesManager from '@/ui/inspector/styles/StylesManager';
-import StylesView from "./components/inspector/StylesView.vue";
-import Vue from 'vue';
-import {getApplicableStylesForItem} from "./utils/styleUtils";
-import ConditionManager from "@/plugins/condition/ConditionManager";
+import mount from 'utils/mount';
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+import { nextTick } from 'vue';
+
+import ConditionManager from '@/plugins/condition/ConditionManager';
+
+import stylesManager from '../inspectorViews/styles/StylesManager.js';
+import StylesView from './components/inspector/StylesView.vue';
+import ConditionPlugin from './plugin.js';
+import StyleRuleManager from './StyleRuleManager.js';
+import { IS_OLD_KEY } from './utils/constants.js';
+import { getApplicableStylesForItem } from './utils/styleUtils.js';
 
 describe('the plugin', function () {
-    let conditionSetDefinition;
-    let mockConditionSetDomainObject;
-    let mockListener;
-    let element;
-    let child;
-    let openmct;
-    let testTelemetryObject;
-
-    beforeEach((done) => {
-        testTelemetryObject = {
-            identifier: {
-                namespace: "",
-                key: "test-object"
-            },
-            type: "test-object",
-            name: "Test Object",
-            telemetry: {
-                values: [{
-                    key: "some-key2",
-                    source: "some-key2",
-                    name: "Some attribute",
-                    hints: {
-                        range: 2
-                    }
-                },
-                {
-                    key: "utc",
-                    name: "Time",
-                    format: "utc",
-                    hints: {
-                        domain: 1
-                    }
-                }, {
-                    key: "testSource",
-                    source: "value",
-                    name: "Test",
-                    format: "string"
-                },
-                {
-                    key: "some-key",
-                    source: "some-key",
-                    hints: {
-                        domain: 1
-                    }
-                }]
+  let conditionSetDefinition;
+  let mockConditionSetDomainObject;
+  let mockListener;
+  let element;
+  let child;
+  let openmct;
+  let testTelemetryObject;
+
+  beforeEach((done) => {
+    testTelemetryObject = {
+      identifier: {
+        namespace: '',
+        key: 'test-object'
+      },
+      type: 'test-object',
+      name: 'Test Object',
+      telemetry: {
+        values: [
+          {
+            key: 'some-key2',
+            source: 'some-key2',
+            name: 'Some attribute',
+            hints: {
+              range: 2
+            }
+          },
+          {
+            key: 'utc',
+            name: 'Time',
+            format: 'utc',
+            hints: {
+              domain: 1
             }
-        };
+          },
+          {
+            key: 'testSource',
+            source: 'value',
+            name: 'Test',
+            format: 'string'
+          },
+          {
+            key: 'some-key',
+            source: 'some-key',
+            hints: {
+              domain: 1
+            }
+          }
+        ]
+      }
+    };
 
-        openmct = createOpenMct();
-        openmct.install(new ConditionPlugin());
+    openmct = createOpenMct();
+    openmct.install(new ConditionPlugin());
 
-        conditionSetDefinition = openmct.types.get('conditionSet').definition;
+    conditionSetDefinition = openmct.types.get('conditionSet').definition;
 
-        element = document.createElement('div');
-        child = document.createElement('div');
-        element.appendChild(child);
+    element = document.createElement('div');
+    child = document.createElement('div');
+    element.appendChild(child);
 
-        mockConditionSetDomainObject = {
-            identifier: {
-                key: 'testConditionSetKey',
-                namespace: ''
-            },
-            type: 'conditionSet'
-        };
+    mockConditionSetDomainObject = {
+      identifier: {
+        key: 'testConditionSetKey',
+        namespace: ''
+      },
+      type: 'conditionSet'
+    };
 
-        mockListener = jasmine.createSpy('mockListener');
+    mockListener = jasmine.createSpy('mockListener');
 
-        conditionSetDefinition.initialize(mockConditionSetDomainObject);
+    openmct.router.isNavigatedObject = jasmine.createSpy().and.returnValue(true);
 
-        openmct.on('start', done);
-        openmct.startHeadless();
-    });
+    conditionSetDefinition.initialize(mockConditionSetDomainObject);
 
-    afterEach(() => {
-        return resetApplicationState(openmct);
-    });
+    spyOn(openmct.objects, 'save').and.returnValue(Promise.resolve(true));
 
-    let mockConditionSetObject = {
-        name: 'Condition Set',
-        key: 'conditionSet',
-        creatable: true
-    };
+    openmct.on('start', done);
+    openmct.startHeadless();
+  });
 
-    it('defines a conditionSet object type with the correct key', () => {
-        expect(conditionSetDefinition.key).toEqual(mockConditionSetObject.key);
-    });
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
 
-    describe('the conditionSet object', () => {
+  let mockConditionSetObject = {
+    name: 'Condition Set',
+    key: 'conditionSet',
+    creatable: true
+  };
 
-        it('is creatable', () => {
-            expect(conditionSetDefinition.creatable).toEqual(mockConditionSetObject.creatable);
-        });
+  it('defines a conditionSet object type with the correct key', () => {
+    expect(conditionSetDefinition.key).toEqual(mockConditionSetObject.key);
+  });
 
-        it('initializes with an empty composition list', () => {
-            expect(mockConditionSetDomainObject.composition instanceof Array).toBeTrue();
-            expect(mockConditionSetDomainObject.composition.length).toEqual(0);
-        });
+  describe('the conditionSet object', () => {
+    it('is creatable', () => {
+      expect(conditionSetDefinition.creatable).toEqual(mockConditionSetObject.creatable);
+    });
 
-        it('provides a view', () => {
-            const testViewObject = {
-                id: "test-object",
-                type: "conditionSet",
-                configuration: {
-                    conditionCollection: []
+    it('initializes with an empty composition list', () => {
+      expect(mockConditionSetDomainObject.composition instanceof Array).toBeTrue();
+      expect(mockConditionSetDomainObject.composition.length).toEqual(0);
+    });
+  });
+
+  describe('the condition set usage for condition widgets', () => {
+    let conditionWidgetItem;
+    let selection;
+    let component;
+    let _destroy;
+    let styleViewComponentObject;
+    const conditionSetDomainObject = {
+      configuration: {
+        conditionTestData: [
+          {
+            telemetry: '',
+            metadata: '',
+            input: ''
+          }
+        ],
+        conditionCollection: [
+          {
+            id: '39584410-cbf9-499e-96dc-76f27e69885d',
+            configuration: {
+              name: 'Unnamed Condition',
+              output: 'Sine > 0',
+              trigger: 'all',
+              criteria: [
+                {
+                  id: '85fbb2f7-7595-42bd-9767-a932266c5225',
+                  telemetry: {
+                    namespace: '',
+                    key: 'be0ba97f-b510-4f40-a18d-4ff121d5ea1a'
+                  },
+                  operation: 'greaterThan',
+                  input: ['0'],
+                  metadata: 'sin'
+                },
+                {
+                  id: '35400132-63b0-425c-ac30-8197df7d5862',
+                  telemetry: 'any',
+                  operation: 'enumValueIs',
+                  input: ['0'],
+                  metadata: 'state'
                 }
-            };
+              ]
+            },
+            summary:
+              'Match if all criteria are met: Sine Wave Generator Sine > 0 and any telemetry State is OFF '
+          },
+          {
+            isDefault: true,
+            id: '2532d90a-e0d6-4935-b546-3123522da2de',
+            configuration: {
+              name: 'Default',
+              output: 'Default',
+              trigger: 'all',
+              criteria: []
+            },
+            summary: ''
+          }
+        ]
+      },
+      composition: [
+        {
+          namespace: '',
+          key: 'be0ba97f-b510-4f40-a18d-4ff121d5ea1a'
+        },
+        {
+          namespace: '',
+          key: '077ffa67-e78f-4e99-80e0-522ac33a3888'
+        }
+      ],
+      telemetry: {},
+      name: 'Condition Set',
+      type: 'conditionSet',
+      identifier: {
+        namespace: '',
+        key: '863012c1-f6ca-4ab0-aed7-fd43d5e4cd12'
+      }
+    };
 
-            const applicableViews = openmct.objectViews.get(testViewObject, []);
-            let conditionSetView = applicableViews.find((viewProvider) => viewProvider.key === 'conditionSet.view');
-            expect(conditionSetView).toBeDefined();
-        });
+    beforeEach(() => {
+      conditionWidgetItem = {
+        label: 'Condition Widget',
+        conditionalLabel: '',
+        configuration: {},
+        name: 'Condition Widget',
+        type: 'conditionWidget',
+        identifier: {
+          namespace: '',
+          key: 'c5e636c1-6771-4c9c-b933-8665cab189b3'
+        }
+      };
+      selection = [
+        [
+          {
+            context: {
+              item: conditionWidgetItem,
+              supportsMultiSelect: false
+            }
+          }
+        ]
+      ];
+      let viewContainer = document.createElement('div');
+      child.append(viewContainer);
+      const { vNode, destroy } = mount({
+        components: {
+          StylesView
+        },
+        provide: {
+          openmct: openmct,
+          selection: selection,
+          stylesManager
+        },
+        template: '<styles-view ref="root"/>'
+      });
+
+      component = vNode.componentInstance;
+      _destroy = destroy;
+
+      return nextTick().then(() => {
+        styleViewComponentObject = component.$refs.root;
+        styleViewComponentObject.setEditState(true);
+      });
+    });
 
+    afterEach(() => {
+      _destroy();
     });
 
-    describe('the condition set usage for multiple display layout items', () => {
-        let displayLayoutItem;
-        let lineLayoutItem;
-        let boxLayoutItem;
-        let notCreatableObjectItem;
-        let notCreatableObject;
-        let selection;
-        let component;
-        let styleViewComponentObject;
-        const conditionSetDomainObject = {
-            "configuration": {
-                "conditionTestData": [
-                    {
-                        "telemetry": "",
-                        "metadata": "",
-                        "input": ""
-                    }
-                ],
-                "conditionCollection": [
-                    {
-                        "id": "39584410-cbf9-499e-96dc-76f27e69885d",
-                        "configuration": {
-                            "name": "Unnamed Condition",
-                            "output": "Sine > 0",
-                            "trigger": "all",
-                            "criteria": [
-                                {
-                                    "id": "85fbb2f7-7595-42bd-9767-a932266c5225",
-                                    "telemetry": {
-                                        "namespace": "",
-                                        "key": "be0ba97f-b510-4f40-a18d-4ff121d5ea1a"
-                                    },
-                                    "operation": "greaterThan",
-                                    "input": [
-                                        "0"
-                                    ],
-                                    "metadata": "sin"
-                                },
-                                {
-                                    "id": "35400132-63b0-425c-ac30-8197df7d5862",
-                                    "telemetry": "any",
-                                    "operation": "enumValueIs",
-                                    "input": [
-                                        "0"
-                                    ],
-                                    "metadata": "state"
-                                }
-                            ]
-                        },
-                        "summary": "Match if all criteria are met: Sine Wave Generator Sine > 0 and any telemetry State is OFF "
-                    },
-                    {
-                        "isDefault": true,
-                        "id": "2532d90a-e0d6-4935-b546-3123522da2de",
-                        "configuration": {
-                            "name": "Default",
-                            "output": "Default",
-                            "trigger": "all",
-                            "criteria": [
-                            ]
-                        },
-                        "summary": ""
-                    }
-                ]
-            },
-            "composition": [
+    it('does not include the output label when the flag is disabled', () => {
+      styleViewComponentObject.conditionSetDomainObject = conditionSetDomainObject;
+      styleViewComponentObject.conditionalStyles = [];
+      styleViewComponentObject.initializeConditionalStyles();
+      expect(styleViewComponentObject.conditionalStyles.length).toBe(2);
+
+      return nextTick().then(() => {
+        const hasNoOutput =
+          styleViewComponentObject.domainObject.configuration.objectStyles.styles.every((style) => {
+            return style.style.output === '' || style.style.output === undefined;
+          });
+
+        expect(hasNoOutput).toBeTrue();
+      });
+    });
+
+    it('includes the output label when the flag is enabled', () => {
+      styleViewComponentObject.conditionSetDomainObject = conditionSetDomainObject;
+      styleViewComponentObject.conditionalStyles = [];
+      styleViewComponentObject.initializeConditionalStyles();
+      expect(styleViewComponentObject.conditionalStyles.length).toBe(2);
+
+      styleViewComponentObject.useConditionSetOutputAsLabel = true;
+      styleViewComponentObject.persistLabelConfiguration();
+
+      return nextTick().then(() => {
+        const outputs = styleViewComponentObject.domainObject.configuration.objectStyles.styles.map(
+          (style) => {
+            return style.style.output;
+          }
+        );
+        expect(outputs.join(',')).toEqual('Sine > 0,Default');
+      });
+    });
+  });
+
+  describe('the condition set usage for multiple display layout items', () => {
+    let displayLayoutItem;
+    let lineLayoutItem;
+    let boxLayoutItem;
+    let notCreatableObjectItem;
+    let notCreatableObject;
+    let selection;
+    let component;
+    let styleViewComponentObject;
+    let _destroy;
+    const conditionSetDomainObject = {
+      configuration: {
+        conditionTestData: [
+          {
+            telemetry: '',
+            metadata: '',
+            input: ''
+          }
+        ],
+        conditionCollection: [
+          {
+            id: '39584410-cbf9-499e-96dc-76f27e69885d',
+            configuration: {
+              name: 'Unnamed Condition',
+              output: 'Sine > 0',
+              trigger: 'all',
+              criteria: [
                 {
-                    "namespace": "",
-                    "key": "be0ba97f-b510-4f40-a18d-4ff121d5ea1a"
+                  id: '85fbb2f7-7595-42bd-9767-a932266c5225',
+                  telemetry: {
+                    namespace: '',
+                    key: 'be0ba97f-b510-4f40-a18d-4ff121d5ea1a'
+                  },
+                  operation: 'greaterThan',
+                  input: ['0'],
+                  metadata: 'sin'
                 },
                 {
-                    "namespace": "",
-                    "key": "077ffa67-e78f-4e99-80e0-522ac33a3888"
+                  id: '35400132-63b0-425c-ac30-8197df7d5862',
+                  telemetry: 'any',
+                  operation: 'enumValueIs',
+                  input: ['0'],
+                  metadata: 'state'
                 }
-            ],
-            "telemetry": {
+              ]
             },
-            "name": "Condition Set",
-            "type": "conditionSet",
-            "identifier": {
-                "namespace": "",
-                "key": "863012c1-f6ca-4ab0-aed7-fd43d5e4cd12"
-            }
+            summary:
+              'Match if all criteria are met: Sine Wave Generator Sine > 0 and any telemetry State is OFF '
+          },
+          {
+            isDefault: true,
+            id: '2532d90a-e0d6-4935-b546-3123522da2de',
+            configuration: {
+              name: 'Default',
+              output: 'Default',
+              trigger: 'all',
+              criteria: []
+            },
+            summary: ''
+          }
+        ]
+      },
+      composition: [
+        {
+          namespace: '',
+          key: 'be0ba97f-b510-4f40-a18d-4ff121d5ea1a'
+        },
+        {
+          namespace: '',
+          key: '077ffa67-e78f-4e99-80e0-522ac33a3888'
+        }
+      ],
+      telemetry: {},
+      name: 'Condition Set',
+      type: 'conditionSet',
+      identifier: {
+        namespace: '',
+        key: '863012c1-f6ca-4ab0-aed7-fd43d5e4cd12'
+      }
+    };
+    const staticStyle = {
+      style: {
+        backgroundColor: '#666666',
+        border: '1px solid #00ffff'
+      }
+    };
+    const conditionalStyle = {
+      conditionId: '39584410-cbf9-499e-96dc-76f27e69885d',
+      style: {
+        isStyleInvisible: '',
+        backgroundColor: '#666666',
+        border: '1px solid #ffff00'
+      }
+    };
 
-        };
-        const staticStyle = {
-            "style": {
-                "backgroundColor": "#717171",
-                "border": "1px solid #00ffff"
+    beforeEach(() => {
+      displayLayoutItem = {
+        composition: [],
+        configuration: {
+          items: [
+            {
+              fill: '#666666',
+              stroke: '',
+              x: 1,
+              y: 1,
+              width: 10,
+              height: 5,
+              type: 'box-view',
+              id: '89b88746-d325-487b-aec4-11b79afff9e8'
+            },
+            {
+              fill: '#666666',
+              stroke: '',
+              x: 1,
+              y: 1,
+              width: 10,
+              height: 5,
+              type: 'ellipse-view',
+              id: '19b88746-d325-487b-aec4-11b79afff9z8'
+            },
+            {
+              x: 18,
+              y: 9,
+              x2: 23,
+              y2: 4,
+              stroke: '#666666',
+              type: 'line-view',
+              id: '57d49a28-7863-43bd-9593-6570758916f0'
+            },
+            {
+              width: 32,
+              height: 18,
+              x: 36,
+              y: 8,
+              identifier: {
+                key: '~TEST~image',
+                namespace: 'test-space'
+              },
+              hasFrame: true,
+              type: 'subobject-view',
+              id: '6d9fe81b-a3ce-4e59-b404-a4a0be1a5d85'
             }
-        };
-        const conditionalStyle = {
-            "conditionId": "39584410-cbf9-499e-96dc-76f27e69885d",
-            "style": {
-                "isStyleInvisible": "",
-                "backgroundColor": "#717171",
-                "border": "1px solid #ffff00"
+          ],
+          layoutGrid: [10, 10]
+        },
+        name: 'Display Layout',
+        type: 'layout',
+        identifier: {
+          namespace: '',
+          key: 'c5e636c1-6771-4c9c-b933-8665cab189b3'
+        }
+      };
+      lineLayoutItem = {
+        x: 18,
+        y: 9,
+        x2: 23,
+        y2: 4,
+        stroke: '#666666',
+        type: 'line-view',
+        id: '57d49a28-7863-43bd-9593-6570758916f0'
+      };
+      boxLayoutItem = {
+        fill: '#666666',
+        stroke: '',
+        x: 1,
+        y: 1,
+        width: 10,
+        height: 5,
+        type: 'box-view',
+        id: '89b88746-d325-487b-aec4-11b79afff9e8'
+      };
+      notCreatableObjectItem = {
+        width: 32,
+        height: 18,
+        x: 36,
+        y: 8,
+        identifier: {
+          key: '~TEST~image',
+          namespace: 'test-space'
+        },
+        hasFrame: true,
+        type: 'subobject-view',
+        id: '6d9fe81b-a3ce-4e59-b404-a4a0be1a5d85'
+      };
+      notCreatableObject = {
+        identifier: {
+          key: '~TEST~image',
+          namespace: 'test-space'
+        },
+        name: 'test~image',
+        location: 'test-space:~TEST',
+        type: 'test.image',
+        telemetry: {
+          values: [
+            {
+              key: 'value',
+              name: 'Value',
+              hints: {
+                image: 1,
+                priority: 0
+              },
+              format: 'image',
+              source: 'value'
+            },
+            {
+              key: 'utc',
+              source: 'timestamp',
+              name: 'Timestamp',
+              format: 'iso',
+              hints: {
+                domain: 1,
+                priority: 1
+              }
             }
-        };
-
-        beforeEach(() => {
-            displayLayoutItem = {
-                "composition": [
-                ],
-                "configuration": {
-                    "items": [
-                        {
-                            "fill": "#717171",
-                            "stroke": "",
-                            "x": 1,
-                            "y": 1,
-                            "width": 10,
-                            "height": 5,
-                            "type": "box-view",
-                            "id": "89b88746-d325-487b-aec4-11b79afff9e8"
-                        },
-                        {
-                            "x": 18,
-                            "y": 9,
-                            "x2": 23,
-                            "y2": 4,
-                            "stroke": "#717171",
-                            "type": "line-view",
-                            "id": "57d49a28-7863-43bd-9593-6570758916f0"
-                        },
-                        {
-                            "width": 32,
-                            "height": 18,
-                            "x": 36,
-                            "y": 8,
-                            "identifier": {
-                                "key": "~TEST~image",
-                                "namespace": "test-space"
-                            },
-                            "hasFrame": true,
-                            "type": "subobject-view",
-                            "id": "6d9fe81b-a3ce-4e59-b404-a4a0be1a5d85"
-                        }
-                    ],
-                    "layoutGrid": [
-                        10,
-                        10
-                    ]
-                },
-                "name": "Display Layout",
-                "type": "layout",
-                "identifier": {
-                    "namespace": "",
-                    "key": "c5e636c1-6771-4c9c-b933-8665cab189b3"
-                }
-            };
-            lineLayoutItem = {
-                "x": 18,
-                "y": 9,
-                "x2": 23,
-                "y2": 4,
-                "stroke": "#717171",
-                "type": "line-view",
-                "id": "57d49a28-7863-43bd-9593-6570758916f0"
-            };
-            boxLayoutItem = {
-                "fill": "#717171",
-                "stroke": "",
-                "x": 1,
-                "y": 1,
-                "width": 10,
-                "height": 5,
-                "type": "box-view",
-                "id": "89b88746-d325-487b-aec4-11b79afff9e8"
-            };
-            notCreatableObjectItem = {
-                "width": 32,
-                "height": 18,
-                "x": 36,
-                "y": 8,
-                "identifier": {
-                    "key": "~TEST~image",
-                    "namespace": "test-space"
-                },
-                "hasFrame": true,
-                "type": "subobject-view",
-                "id": "6d9fe81b-a3ce-4e59-b404-a4a0be1a5d85"
-            };
-            notCreatableObject = {
-                "identifier": {
-                    "key": "~TEST~image",
-                    "namespace": "test-space"
-                },
-                "name": "test~image",
-                "location": "test-space:~TEST",
-                "type": "test.image",
-                "telemetry": {
-                    "values": [
-                        {
-                            "key": "value",
-                            "name": "Value",
-                            "hints": {
-                                "image": 1,
-                                "priority": 0
-                            },
-                            "format": "image",
-                            "source": "value"
-                        },
-                        {
-                            "key": "utc",
-                            "source": "timestamp",
-                            "name": "Timestamp",
-                            "format": "iso",
-                            "hints": {
-                                "domain": 1,
-                                "priority": 1
-                            }
-                        }
-                    ]
-                }
-            };
-            selection = [
-                [{
-                    context: {
-                        "layoutItem": lineLayoutItem,
-                        "index": 1
-                    }
-                },
-                {
-                    context: {
-                        "item": displayLayoutItem,
-                        "supportsMultiSelect": true
-                    }
-                }],
-                [{
-                    context: {
-                        "layoutItem": boxLayoutItem,
-                        "index": 0
-                    }
-                },
-                {
-                    context: {
-                        item: displayLayoutItem,
-                        "supportsMultiSelect": true
-                    }
-                }],
-                [{
-                    context: {
-                        "item": notCreatableObject,
-                        "layoutItem": notCreatableObjectItem,
-                        "index": 2
-                    }
-                },
-                {
-                    context: {
-                        item: displayLayoutItem,
-                        "supportsMultiSelect": true
-                    }
-                }]
-            ];
-            let viewContainer = document.createElement('div');
-            child.append(viewContainer);
-            component = new Vue({
-                el: viewContainer,
-                components: {
-                    StylesView
-                },
-                provide: {
-                    openmct: openmct,
-                    selection: selection,
-                    stylesManager
-                },
-                template: '<styles-view/>'
-            });
+          ]
+        }
+      };
+      selection = [
+        [
+          {
+            context: {
+              layoutItem: lineLayoutItem,
+              index: 1
+            }
+          },
+          {
+            context: {
+              item: displayLayoutItem,
+              supportsMultiSelect: true
+            }
+          }
+        ],
+        [
+          {
+            context: {
+              layoutItem: boxLayoutItem,
+              index: 0
+            }
+          },
+          {
+            context: {
+              item: displayLayoutItem,
+              supportsMultiSelect: true
+            }
+          }
+        ],
+        [
+          {
+            context: {
+              item: notCreatableObject,
+              layoutItem: notCreatableObjectItem,
+              index: 2
+            }
+          },
+          {
+            context: {
+              item: displayLayoutItem,
+              supportsMultiSelect: true
+            }
+          }
+        ]
+      ];
+      let viewContainer = document.createElement('div');
+      child.append(viewContainer);
+      const { vNode, destroy } = mount({
+        components: {
+          StylesView
+        },
+        provide: {
+          openmct: openmct,
+          selection: selection,
+          stylesManager
+        },
+        template: '<styles-view ref="root"/>'
+      });
+
+      component = vNode.componentInstance;
+      _destroy = destroy;
+
+      return nextTick().then(() => {
+        styleViewComponentObject = component.$refs.root;
+        styleViewComponentObject.setEditState(true);
+      });
+    });
 
-            return Vue.nextTick().then(() => {
-                styleViewComponentObject = component.$root.$children[0];
-                styleViewComponentObject.setEditState(true);
-            });
-        });
+    afterEach(() => {
+      _destroy();
+    });
+
+    it('initializes the items in the view', () => {
+      expect(styleViewComponentObject.items.length).toBe(3);
+    });
+
+    it('initializes conditional styles', () => {
+      styleViewComponentObject.conditionSetDomainObject = conditionSetDomainObject;
+      styleViewComponentObject.conditionalStyles = [];
+      styleViewComponentObject.initializeConditionalStyles();
+      expect(styleViewComponentObject.conditionalStyles.length).toBe(2);
+    });
+
+    it('updates applicable conditional styles', () => {
+      styleViewComponentObject.conditionSetDomainObject = conditionSetDomainObject;
+      styleViewComponentObject.conditionalStyles = [];
+      styleViewComponentObject.initializeConditionalStyles();
+      expect(styleViewComponentObject.conditionalStyles.length).toBe(2);
+      styleViewComponentObject.updateConditionalStyle(conditionalStyle, 'border');
+
+      return nextTick().then(() => {
+        expect(styleViewComponentObject.domainObject.configuration.objectStyles).toBeDefined();
+        [boxLayoutItem, lineLayoutItem, notCreatableObjectItem].forEach((item) => {
+          const itemStyles =
+            styleViewComponentObject.domainObject.configuration.objectStyles[item.id].styles;
+          expect(itemStyles.length).toBe(2);
+          const foundStyle = itemStyles.find((style) => {
+            return style.conditionId === conditionalStyle.conditionId;
+          });
+          expect(foundStyle).toBeDefined();
+          const applicableStyles = getApplicableStylesForItem(
+            styleViewComponentObject.domainObject,
+            item
+          );
+          const applicableStylesKeys = Object.keys(applicableStyles).concat(['isStyleInvisible']);
+          Object.keys(foundStyle.style).forEach((key) => {
+            if (key === 'output') {
+              return;
+            }
 
-        it('initializes the items in the view', () => {
-            expect(styleViewComponentObject.items.length).toBe(3);
+            expect(applicableStylesKeys.indexOf(key)).toBeGreaterThan(-1);
+            expect(foundStyle.style[key]).toEqual(conditionalStyle.style[key]);
+          });
         });
+      });
+    });
 
-        it('initializes conditional styles', () => {
-            styleViewComponentObject.conditionSetDomainObject = conditionSetDomainObject;
-            styleViewComponentObject.conditionalStyles = [];
-            styleViewComponentObject.initializeConditionalStyles();
-            expect(styleViewComponentObject.conditionalStyles.length).toBe(2);
+    it('updates applicable static styles', () => {
+      styleViewComponentObject.updateStaticStyle(staticStyle, 'border');
+
+      return nextTick().then(() => {
+        expect(styleViewComponentObject.domainObject.configuration.objectStyles).toBeDefined();
+        [boxLayoutItem, lineLayoutItem, notCreatableObjectItem].forEach((item) => {
+          const itemStyle =
+            styleViewComponentObject.domainObject.configuration.objectStyles[item.id].staticStyle;
+          expect(itemStyle).toBeDefined();
+          const applicableStyles = getApplicableStylesForItem(
+            styleViewComponentObject.domainObject,
+            item
+          );
+          const applicableStylesKeys = Object.keys(applicableStyles).concat(['isStyleInvisible']);
+          Object.keys(itemStyle.style).forEach((key) => {
+            expect(applicableStylesKeys.indexOf(key)).toBeGreaterThan(-1);
+            expect(itemStyle.style[key]).toEqual(staticStyle.style[key]);
+          });
         });
+      });
+    });
+  });
+
+  describe('the condition check if old', () => {
+    let conditionSetDomainObject;
+
+    beforeEach(() => {
+      conditionSetDomainObject = {
+        configuration: {
+          conditionTestData: [
+            {
+              telemetry: '',
+              metadata: '',
+              input: ''
+            }
+          ],
+          conditionCollection: [
+            {
+              id: '39584410-cbf9-499e-96dc-76f27e69885d',
+              configuration: {
+                name: 'Unnamed Condition',
+                output: 'Any old telemetry',
+                trigger: 'all',
+                criteria: [
+                  {
+                    id: '35400132-63b0-425c-ac30-8197df7d5862',
+                    telemetry: 'any',
+                    operation: IS_OLD_KEY,
+                    input: ['0.2'],
+                    metadata: 'dataReceived'
+                  }
+                ]
+              },
+              summary: 'Match if all criteria are met: Any telemetry is old after 5 seconds'
+            },
+            {
+              isDefault: true,
+              id: '2532d90a-e0d6-4935-b546-3123522da2de',
+              configuration: {
+                name: 'Default',
+                output: 'Default',
+                trigger: 'all',
+                criteria: []
+              },
+              summary: ''
+            }
+          ]
+        },
+        composition: [
+          {
+            namespace: '',
+            key: 'test-object'
+          }
+        ],
+        telemetry: {},
+        name: 'Condition Set',
+        type: 'conditionSet',
+        identifier: {
+          namespace: '',
+          key: 'cf4456a9-296a-4e6b-b182-62ed29cd15b9'
+        }
+      };
+    });
 
-        it('updates applicable conditional styles', () => {
-            styleViewComponentObject.conditionSetDomainObject = conditionSetDomainObject;
-            styleViewComponentObject.conditionalStyles = [];
-            styleViewComponentObject.initializeConditionalStyles();
-            expect(styleViewComponentObject.conditionalStyles.length).toBe(2);
-            styleViewComponentObject.updateConditionalStyle(conditionalStyle, 'border');
-
-            return Vue.nextTick().then(() => {
-                expect(styleViewComponentObject.domainObject.configuration.objectStyles).toBeDefined();
-                [boxLayoutItem, lineLayoutItem, notCreatableObjectItem].forEach((item) => {
-                    const itemStyles = styleViewComponentObject.domainObject.configuration.objectStyles[item.id].styles;
-                    expect(itemStyles.length).toBe(2);
-                    const foundStyle = itemStyles.find((style) => {
-                        return style.conditionId === conditionalStyle.conditionId;
-                    });
-                    expect(foundStyle).toBeDefined();
-                    const applicableStyles = getApplicableStylesForItem(styleViewComponentObject.domainObject, item);
-                    const applicableStylesKeys = Object.keys(applicableStyles).concat(['isStyleInvisible']);
-                    Object.keys(foundStyle.style).forEach((key) => {
-                        expect(applicableStylesKeys.indexOf(key)).toBeGreaterThan(-1);
-                        expect(foundStyle.style[key]).toEqual(conditionalStyle.style[key]);
-                    });
-                });
-            });
+    it('should evaluate as old when telemetry is not received in the allotted time', (done) => {
+      let conditionMgr = new ConditionManager(conditionSetDomainObject, openmct);
+      conditionMgr.on('conditionSetResultUpdated', mockListener);
+      conditionMgr.telemetryObjects = {
+        'test-object': testTelemetryObject
+      };
+      conditionMgr.updateConditionTelemetryObjects();
+      setTimeout(() => {
+        expect(mockListener).toHaveBeenCalledWith({
+          output: 'Any old telemetry',
+          id: {
+            namespace: '',
+            key: 'cf4456a9-296a-4e6b-b182-62ed29cd15b9'
+          },
+          conditionId: '39584410-cbf9-499e-96dc-76f27e69885d',
+          utc: undefined
         });
+        done();
+      }, 400);
+    });
 
-        it('updates applicable static styles', () => {
-            styleViewComponentObject.updateStaticStyle(staticStyle, 'border');
-
-            return Vue.nextTick().then(() => {
-                expect(styleViewComponentObject.domainObject.configuration.objectStyles).toBeDefined();
-                [boxLayoutItem, lineLayoutItem, notCreatableObjectItem].forEach((item) => {
-                    const itemStyle = styleViewComponentObject.domainObject.configuration.objectStyles[item.id].staticStyle;
-                    expect(itemStyle).toBeDefined();
-                    const applicableStyles = getApplicableStylesForItem(styleViewComponentObject.domainObject, item);
-                    const applicableStylesKeys = Object.keys(applicableStyles).concat(['isStyleInvisible']);
-                    Object.keys(itemStyle.style).forEach((key) => {
-                        expect(applicableStylesKeys.indexOf(key)).toBeGreaterThan(-1);
-                        expect(itemStyle.style[key]).toEqual(staticStyle.style[key]);
-                    });
-                });
-            });
+    it('should not evaluate as old when telemetry is received in the allotted time', (done) => {
+      const date = 1;
+      conditionSetDomainObject.configuration.conditionCollection[0].configuration.criteria[0].input =
+        ['0.4'];
+      let conditionMgr = new ConditionManager(conditionSetDomainObject, openmct);
+      conditionMgr.on('conditionSetResultUpdated', mockListener);
+      conditionMgr.telemetryObjects = {
+        'test-object': testTelemetryObject
+      };
+      conditionMgr.updateConditionTelemetryObjects();
+      conditionMgr.telemetryReceived(testTelemetryObject, {
+        utc: date
+      });
+      setTimeout(() => {
+        expect(mockListener).toHaveBeenCalledWith({
+          output: 'Default',
+          id: {
+            namespace: '',
+            key: 'cf4456a9-296a-4e6b-b182-62ed29cd15b9'
+          },
+          conditionId: '2532d90a-e0d6-4935-b546-3123522da2de',
+          utc: date
         });
+        done();
+      }, 300);
+    });
+  });
+
+  describe('the condition evaluation', () => {
+    let conditionSetDomainObject;
+
+    beforeEach(() => {
+      conditionSetDomainObject = {
+        configuration: {
+          conditionTestData: [
+            {
+              telemetry: '',
+              metadata: '',
+              input: ''
+            }
+          ],
+          conditionCollection: [
+            {
+              id: '39584410-cbf9-499e-96dc-76f27e69885f',
+              configuration: {
+                name: 'Unnamed Condition0',
+                output: 'Any telemetry less than 0',
+                trigger: 'all',
+                criteria: [
+                  {
+                    id: '35400132-63b0-425c-ac30-8197df7d5864',
+                    telemetry: 'any',
+                    operation: 'lessThan',
+                    input: ['0'],
+                    metadata: 'some-key'
+                  }
+                ]
+              },
+              summary: 'Match if all criteria are met: Any telemetry value is less than 0'
+            },
+            {
+              id: '39584410-cbf9-499e-96dc-76f27e69885d',
+              configuration: {
+                name: 'Unnamed Condition',
+                output: 'Any telemetry greater than 0',
+                trigger: 'all',
+                criteria: [
+                  {
+                    id: '35400132-63b0-425c-ac30-8197df7d5862',
+                    telemetry: 'any',
+                    operation: 'greaterThan',
+                    input: ['0'],
+                    metadata: 'some-key'
+                  }
+                ]
+              },
+              summary: 'Match if all criteria are met: Any telemetry value is greater than 0'
+            },
+            {
+              id: '39584410-cbf9-499e-96dc-76f27e69885e',
+              configuration: {
+                name: 'Unnamed Condition1',
+                output: 'Any telemetry greater than 1',
+                trigger: 'all',
+                criteria: [
+                  {
+                    id: '35400132-63b0-425c-ac30-8197df7d5863',
+                    telemetry: 'any',
+                    operation: 'greaterThan',
+                    input: ['1'],
+                    metadata: 'some-key'
+                  }
+                ]
+              },
+              summary: 'Match if all criteria are met: Any telemetry value is greater than 1'
+            },
+            {
+              isDefault: true,
+              id: '2532d90a-e0d6-4935-b546-3123522da2de',
+              configuration: {
+                name: 'Default',
+                output: 'Default',
+                trigger: 'all',
+                criteria: []
+              },
+              summary: ''
+            }
+          ]
+        },
+        composition: [
+          {
+            namespace: '',
+            key: 'test-object'
+          }
+        ],
+        telemetry: {},
+        name: 'Condition Set',
+        type: 'conditionSet',
+        identifier: {
+          namespace: '',
+          key: 'cf4456a9-296a-4e6b-b182-62ed29cd15b9'
+        }
+      };
+    });
 
+    it('should stop evaluating conditions when a condition evaluates to true', () => {
+      const date = Date.now();
+      let conditionMgr = new ConditionManager(conditionSetDomainObject, openmct);
+      conditionMgr.on('conditionSetResultUpdated', mockListener);
+      conditionMgr.telemetryObjects = {
+        'test-object': testTelemetryObject
+      };
+      conditionMgr.updateConditionTelemetryObjects();
+      conditionMgr.telemetryReceived(testTelemetryObject, {
+        'some-key': 2,
+        utc: date
+      });
+      let result = conditionMgr.conditions.map((condition) => condition.result);
+      expect(result[2]).toBeUndefined();
     });
+  });
+
+  describe('canView of ConditionSetViewProvider', () => {
+    let conditionSetView;
+    const testViewObject = {
+      id: 'test-object',
+      type: 'conditionSet',
+      configuration: {
+        conditionCollection: []
+      }
+    };
 
-    describe('the condition check for staleness', () => {
-        let conditionSetDomainObject;
-
-        beforeEach(() => {
-            conditionSetDomainObject = {
-                "configuration": {
-                    "conditionTestData": [
-                        {
-                            "telemetry": "",
-                            "metadata": "",
-                            "input": ""
-                        }
-                    ],
-                    "conditionCollection": [
-                        {
-                            "id": "39584410-cbf9-499e-96dc-76f27e69885d",
-                            "configuration": {
-                                "name": "Unnamed Condition",
-                                "output": "Any stale telemetry",
-                                "trigger": "all",
-                                "criteria": [
-                                    {
-                                        "id": "35400132-63b0-425c-ac30-8197df7d5862",
-                                        "telemetry": "any",
-                                        "operation": "isStale",
-                                        "input": [
-                                            "0.2"
-                                        ],
-                                        "metadata": "dataReceived"
-                                    }
-                                ]
-                            },
-                            "summary": "Match if all criteria are met: Any telemetry is stale after 5 seconds"
-                        },
-                        {
-                            "isDefault": true,
-                            "id": "2532d90a-e0d6-4935-b546-3123522da2de",
-                            "configuration": {
-                                "name": "Default",
-                                "output": "Default",
-                                "trigger": "all",
-                                "criteria": [
-                                ]
-                            },
-                            "summary": ""
-                        }
-                    ]
-                },
-                "composition": [
-                    {
-                        "namespace": "",
-                        "key": "test-object"
-                    }
-                ],
-                "telemetry": {
-                },
-                "name": "Condition Set",
-                "type": "conditionSet",
-                "identifier": {
-                    "namespace": "",
-                    "key": "cf4456a9-296a-4e6b-b182-62ed29cd15b9"
-                }
+    beforeEach(() => {
+      const applicableViews = openmct.objectViews.get(testViewObject, []);
+      conditionSetView = applicableViews.find(
+        (viewProvider) => viewProvider.key === 'conditionSet.view'
+      );
+    });
 
-            };
-        });
+    it('provides a view', () => {
+      expect(conditionSetView).toBeDefined();
+    });
 
-        it('should evaluate as stale when telemetry is not received in the allotted time', (done) => {
-            let conditionMgr = new ConditionManager(conditionSetDomainObject, openmct);
-            conditionMgr.on('conditionSetResultUpdated', mockListener);
-            conditionMgr.telemetryObjects = {
-                "test-object": testTelemetryObject
-            };
-            conditionMgr.updateConditionTelemetryObjects();
-            setTimeout(() => {
-                expect(mockListener).toHaveBeenCalledWith({
-                    output: 'Any stale telemetry',
-                    id: {
-                        namespace: '',
-                        key: 'cf4456a9-296a-4e6b-b182-62ed29cd15b9'
-                    },
-                    conditionId: '39584410-cbf9-499e-96dc-76f27e69885d',
-                    utc: undefined
-                });
-                done();
-            }, 400);
-        });
+    it('returns true for type `conditionSet` and is a navigated Object', () => {
+      openmct.router.isNavigatedObject = jasmine.createSpy().and.returnValue(true);
 
-        it('should not evaluate as stale when telemetry is received in the allotted time', (done) => {
-            const date = 1;
-            conditionSetDomainObject.configuration.conditionCollection[0].configuration.criteria[0].input = ["0.4"];
-            let conditionMgr = new ConditionManager(conditionSetDomainObject, openmct);
-            conditionMgr.on('conditionSetResultUpdated', mockListener);
-            conditionMgr.telemetryObjects = {
-                "test-object": testTelemetryObject
-            };
-            conditionMgr.updateConditionTelemetryObjects();
-            conditionMgr.telemetryReceived(testTelemetryObject, {
-                utc: date
-            });
-            setTimeout(() => {
-                expect(mockListener).toHaveBeenCalledWith({
-                    output: 'Default',
-                    id: {
-                        namespace: '',
-                        key: 'cf4456a9-296a-4e6b-b182-62ed29cd15b9'
-                    },
-                    conditionId: '2532d90a-e0d6-4935-b546-3123522da2de',
-                    utc: date
-                });
-                done();
-            }, 300);
-        });
+      const isCanView = conditionSetView.canView(testViewObject, []);
+
+      expect(isCanView).toBe(true);
     });
 
-    describe('the condition evaluation', () => {
-        let conditionSetDomainObject;
-
-        beforeEach(() => {
-            conditionSetDomainObject = {
-                "configuration": {
-                    "conditionTestData": [
-                        {
-                            "telemetry": "",
-                            "metadata": "",
-                            "input": ""
-                        }
-                    ],
-                    "conditionCollection": [
-                        {
-                            "id": "39584410-cbf9-499e-96dc-76f27e69885f",
-                            "configuration": {
-                                "name": "Unnamed Condition0",
-                                "output": "Any telemetry less than 0",
-                                "trigger": "all",
-                                "criteria": [
-                                    {
-                                        "id": "35400132-63b0-425c-ac30-8197df7d5864",
-                                        "telemetry": "any",
-                                        "operation": "lessThan",
-                                        "input": [
-                                            "0"
-                                        ],
-                                        "metadata": "some-key"
-                                    }
-                                ]
-                            },
-                            "summary": "Match if all criteria are met: Any telemetry value is less than 0"
-                        },
-                        {
-                            "id": "39584410-cbf9-499e-96dc-76f27e69885d",
-                            "configuration": {
-                                "name": "Unnamed Condition",
-                                "output": "Any telemetry greater than 0",
-                                "trigger": "all",
-                                "criteria": [
-                                    {
-                                        "id": "35400132-63b0-425c-ac30-8197df7d5862",
-                                        "telemetry": "any",
-                                        "operation": "greaterThan",
-                                        "input": [
-                                            "0"
-                                        ],
-                                        "metadata": "some-key"
-                                    }
-                                ]
-                            },
-                            "summary": "Match if all criteria are met: Any telemetry value is greater than 0"
-                        },
-                        {
-                            "id": "39584410-cbf9-499e-96dc-76f27e69885e",
-                            "configuration": {
-                                "name": "Unnamed Condition1",
-                                "output": "Any telemetry greater than 1",
-                                "trigger": "all",
-                                "criteria": [
-                                    {
-                                        "id": "35400132-63b0-425c-ac30-8197df7d5863",
-                                        "telemetry": "any",
-                                        "operation": "greaterThan",
-                                        "input": [
-                                            "1"
-                                        ],
-                                        "metadata": "some-key"
-                                    }
-                                ]
-                            },
-                            "summary": "Match if all criteria are met: Any telemetry value is greater than 1"
-                        },
-                        {
-                            "isDefault": true,
-                            "id": "2532d90a-e0d6-4935-b546-3123522da2de",
-                            "configuration": {
-                                "name": "Default",
-                                "output": "Default",
-                                "trigger": "all",
-                                "criteria": [
-                                ]
-                            },
-                            "summary": ""
-                        }
-                    ]
-                },
-                "composition": [
-                    {
-                        "namespace": "",
-                        "key": "test-object"
-                    }
-                ],
-                "telemetry": {
-                },
-                "name": "Condition Set",
-                "type": "conditionSet",
-                "identifier": {
-                    "namespace": "",
-                    "key": "cf4456a9-296a-4e6b-b182-62ed29cd15b9"
-                }
+    it('returns false for type `conditionSet` and is not a navigated Object', () => {
+      openmct.router.isNavigatedObject = jasmine.createSpy().and.returnValue(false);
 
-            };
-        });
+      const isCanView = conditionSetView.canView(testViewObject, []);
 
-        it('should stop evaluating conditions when a condition evaluates to true', () => {
-            const date = Date.now();
-            let conditionMgr = new ConditionManager(conditionSetDomainObject, openmct);
-            conditionMgr.on('conditionSetResultUpdated', mockListener);
-            conditionMgr.telemetryObjects = {
-                "test-object": testTelemetryObject
-            };
-            conditionMgr.updateConditionTelemetryObjects();
-            conditionMgr.telemetryReceived(testTelemetryObject, {
-                "some-key": 2,
-                utc: date
-            });
-            let result = conditionMgr.conditions.map(condition => condition.result);
-            expect(result[2]).toBeUndefined();
-        });
+      expect(isCanView).toBe(false);
+    });
+
+    it('returns false for type `notConditionSet` and is a navigated Object', () => {
+      openmct.router.isNavigatedObject = jasmine.createSpy().and.returnValue(true);
+      testViewObject.type = 'notConditionSet';
+      const isCanView = conditionSetView.canView(testViewObject, []);
+
+      expect(isCanView).toBe(false);
+    });
+  });
+
+  describe('The Style Rule Manager', () => {
+    it('should subscribe to the conditionSet after the editor saves', async () => {
+      const stylesObject = {
+        styles: [
+          {
+            conditionId: 'a8bf7d1a-c1bb-4fc7-936a-62056a51b5cd',
+            style: {
+              backgroundColor: '#38761d',
+              border: '',
+              color: '#073763',
+              isStyleInvisible: ''
+            }
+          },
+          {
+            conditionId: '0558fa77-9bdc-4142-9f9a-7a28fe95182e',
+            style: {
+              backgroundColor: '#980000',
+              border: '',
+              color: '#ff9900',
+              isStyleInvisible: ''
+            }
+          }
+        ],
+        staticStyle: {
+          style: {
+            backgroundColor: '',
+            border: '',
+            color: ''
+          }
+        },
+        selectedConditionId: '0558fa77-9bdc-4142-9f9a-7a28fe95182e',
+        defaultConditionId: '0558fa77-9bdc-4142-9f9a-7a28fe95182e',
+        conditionSetIdentifier: {
+          namespace: '',
+          key: '035c589c-d98f-429e-8b89-d76bd8d22b29'
+        }
+      };
+      openmct.$injector = jasmine.createSpyObj('$injector', ['get']);
+      // const mockTransactionService = jasmine.createSpyObj(
+      //     'transactionService',
+      //     ['commit']
+      // );
+      openmct.telemetry = jasmine.createSpyObj('telemetry', [
+        'isTelemetryObject',
+        'subscribe',
+        'getMetadata',
+        'getValueFormatter',
+        'request'
+      ]);
+      openmct.telemetry.isTelemetryObject.and.returnValue(true);
+      openmct.telemetry.subscribe.and.returnValue(function () {});
+      openmct.telemetry.getValueFormatter.and.returnValue({
+        parse: function (value) {
+          return value;
+        }
+      });
+      openmct.telemetry.getMetadata.and.returnValue(testTelemetryObject.telemetry);
+      openmct.telemetry.request.and.returnValue(Promise.resolve([]));
+
+      const styleRuleManger = new StyleRuleManager(stylesObject, openmct, null, true);
+      spyOn(styleRuleManger, 'subscribeToConditionSet');
+      openmct.editor.edit();
+      await openmct.editor.save();
+      expect(styleRuleManger.subscribeToConditionSet).toHaveBeenCalledTimes(1);
     });
+  });
 });
diff --git a/src/plugins/condition/utils/constants.js b/src/plugins/condition/utils/constants.js
index 8f4cb5d640c..1609dc80fc5 100644
--- a/src/plugins/condition/utils/constants.js
+++ b/src/plugins/condition/utils/constants.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,41 +21,44 @@
  *****************************************************************************/
 
 export const TRIGGER = {
-    ANY: 'any',
-    ALL: 'all',
-    NOT: 'not',
-    XOR: 'xor'
+  ANY: 'any',
+  ALL: 'all',
+  NOT: 'not',
+  XOR: 'xor'
 };
 
 export const TRIGGER_LABEL = {
-    'any': 'any criteria are met',
-    'all': 'all criteria are met',
-    'not': 'no criteria are met',
-    'xor': 'only one criterion is met'
+  any: 'any criteria are met',
+  all: 'all criteria are met',
+  not: 'no criteria are met',
+  xor: 'only one criterion is met'
 };
 
 export const TRIGGER_CONJUNCTION = {
-    'any': 'or',
-    'all': 'and',
-    'not': 'and',
-    'xor': 'or'
+  any: 'or',
+  all: 'and',
+  not: 'and',
+  xor: 'or'
 };
 
 export const STYLE_CONSTANTS = {
-    isStyleInvisible: 'is-style-invisible',
-    borderColorTitle: 'Set border color',
-    textColorTitle: 'Set text color',
-    backgroundColorTitle: 'Set background color',
-    imagePropertiesTitle: 'Edit image properties',
-    visibilityHidden: 'Hidden',
-    visibilityVisible: 'Visible'
+  isStyleInvisible: 'is-style-invisible',
+  borderColorTitle: 'Set border color',
+  textColorTitle: 'Set text color',
+  backgroundColorTitle: 'Set background color',
+  imagePropertiesTitle: 'Edit image properties',
+  visibilityHidden: 'Hidden',
+  visibilityVisible: 'Visible'
 };
 
 export const ERROR = {
-    'TELEMETRY_NOT_FOUND': {
-        errorText: 'Telemetry not found for criterion'
-    },
-    'CONDITION_NOT_FOUND': {
-        errorText: 'Condition not found'
-    }
+  TELEMETRY_NOT_FOUND: {
+    errorText: 'Telemetry not found for criterion'
+  },
+  CONDITION_NOT_FOUND: {
+    errorText: 'Condition not found'
+  }
 };
+
+export const IS_OLD_KEY = 'isStale';
+export const IS_STALE_KEY = 'isStale.new';
diff --git a/src/plugins/condition/utils/evaluator.js b/src/plugins/condition/utils/evaluator.js
index 34914358f56..312c4b7c4f6 100644
--- a/src/plugins/condition/utils/evaluator.js
+++ b/src/plugins/condition/utils/evaluator.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,51 +19,51 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import { TRIGGER } from "./constants";
+import { TRIGGER } from './constants.js';
 
 export function evaluateResults(results, trigger) {
-    if (trigger && trigger === TRIGGER.XOR) {
-        return matchExact(results, 1);
-    } else if (trigger && trigger === TRIGGER.NOT) {
-        return matchExact(results, 0);
-    } else if (trigger && trigger === TRIGGER.ALL) {
-        return matchAll(results);
-    } else {
-        return matchAny(results);
-    }
+  if (trigger && trigger === TRIGGER.XOR) {
+    return matchExact(results, 1);
+  } else if (trigger && trigger === TRIGGER.NOT) {
+    return matchExact(results, 0);
+  } else if (trigger && trigger === TRIGGER.ALL) {
+    return matchAll(results);
+  } else {
+    return matchAny(results);
+  }
 }
 
 function matchAll(results) {
-    for (let result of results) {
-        if (result !== true) {
-            return false;
-        }
+  for (let result of results) {
+    if (result !== true) {
+      return false;
     }
+  }
 
-    return true;
+  return true;
 }
 
 function matchAny(results) {
-    for (let result of results) {
-        if (result === true) {
-            return true;
-        }
+  for (let result of results) {
+    if (result === true) {
+      return true;
     }
+  }
 
-    return false;
+  return false;
 }
 
 function matchExact(results, target) {
-    let matches = 0;
-    for (let result of results) {
-        if (result === true) {
-            matches++;
-        }
+  let matches = 0;
+  for (let result of results) {
+    if (result === true) {
+      matches++;
+    }
 
-        if (matches > target) {
-            return false;
-        }
+    if (matches > target) {
+      return false;
     }
+  }
 
-    return matches === target;
+  return matches === target;
 }
diff --git a/src/plugins/condition/utils/evaluatorSpec.js b/src/plugins/condition/utils/evaluatorSpec.js
index c3bf8d8a7e0..e2b015af0ec 100644
--- a/src/plugins/condition/utils/evaluatorSpec.js
+++ b/src/plugins/condition/utils/evaluatorSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,185 +20,195 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import { evaluateResults } from './evaluator';
-import { TRIGGER } from './constants';
+import { TRIGGER } from './constants.js';
+import { evaluateResults } from './evaluator.js';
 
 describe('evaluate results', () => {
-    // const allTrue = [true, true, true, true, true];
-    // const oneTrue = [false, false, false, false, true];
-    // const multipleTrue = [false, true, false, true, false];
-    // const noneTrue = [false, false, false, false, false];
-    // const allTrueWithUndefined = [true, true, true, undefined, true];
-    // const oneTrueWithUndefined = [undefined, undefined, undefined, undefined, true];
-    // const multipleTrueWithUndefined = [true, undefined, true, undefined, true];
-    // const allUndefined = [undefined, undefined, undefined, undefined, undefined];
-    // const singleTrue = [true];
-    // const singleFalse = [false];
-    // const singleUndefined = [undefined];
-    // const empty = [];
+  // const allTrue = [true, true, true, true, true];
+  // const oneTrue = [false, false, false, false, true];
+  // const multipleTrue = [false, true, false, true, false];
+  // const noneTrue = [false, false, false, false, false];
+  // const allTrueWithUndefined = [true, true, true, undefined, true];
+  // const oneTrueWithUndefined = [undefined, undefined, undefined, undefined, true];
+  // const multipleTrueWithUndefined = [true, undefined, true, undefined, true];
+  // const allUndefined = [undefined, undefined, undefined, undefined, undefined];
+  // const singleTrue = [true];
+  // const singleFalse = [false];
+  // const singleUndefined = [undefined];
+  // const empty = [];
 
-    const tests = [
-        {
-            name: 'allTrue',
-            values: [true, true, true, true, true],
-            any: true,
-            all: true,
-            not: false,
-            xor: false
-        }, {
-            name: 'oneTrue',
-            values: [false, false, false, false, true],
-            any: true,
-            all: false,
-            not: false,
-            xor: true
-        }, {
-            name: 'multipleTrue',
-            values: [false, true, false, true, false],
-            any: true,
-            all: false,
-            not: false,
-            xor: false
-        }, {
-            name: 'noneTrue',
-            values: [false, false, false, false, false],
-            any: false,
-            all: false,
-            not: true,
-            xor: false
-        }, {
-            name: 'allTrueWithUndefined',
-            values: [true, true, true, undefined, true],
-            any: true,
-            all: false,
-            not: false,
-            xor: false
-        }, {
-            name: 'oneTrueWithUndefined',
-            values: [undefined, undefined, undefined, undefined, true],
-            any: true,
-            all: false,
-            not: false,
-            xor: true
-        }, {
-            name: 'multipleTrueWithUndefined',
-            values: [true, undefined, true, undefined, true],
-            any: true,
-            all: false,
-            not: false,
-            xor: false
-        }, {
-            name: 'allUndefined',
-            values: [undefined, undefined, undefined, undefined, undefined],
-            any: false,
-            all: false,
-            not: true,
-            xor: false
-        }, {
-            name: 'singleTrue',
-            values: [true],
-            any: true,
-            all: true,
-            not: false,
-            xor: true
-        }, {
-            name: 'singleFalse',
-            values: [false],
-            any: false,
-            all: false,
-            not: true,
-            xor: false
-        }, {
-            name: 'singleUndefined',
-            values: [undefined],
-            any: false,
-            all: false,
-            not: true,
-            xor: false
-        }
-        // , {
-        //     name: 'empty',
-        //     values: [],
-        //     any: false,
-        //     all: false,
-        //     not: true,
-        //     xor: false
-        // }
-    ];
+  const tests = [
+    {
+      name: 'allTrue',
+      values: [true, true, true, true, true],
+      any: true,
+      all: true,
+      not: false,
+      xor: false
+    },
+    {
+      name: 'oneTrue',
+      values: [false, false, false, false, true],
+      any: true,
+      all: false,
+      not: false,
+      xor: true
+    },
+    {
+      name: 'multipleTrue',
+      values: [false, true, false, true, false],
+      any: true,
+      all: false,
+      not: false,
+      xor: false
+    },
+    {
+      name: 'noneTrue',
+      values: [false, false, false, false, false],
+      any: false,
+      all: false,
+      not: true,
+      xor: false
+    },
+    {
+      name: 'allTrueWithUndefined',
+      values: [true, true, true, undefined, true],
+      any: true,
+      all: false,
+      not: false,
+      xor: false
+    },
+    {
+      name: 'oneTrueWithUndefined',
+      values: [undefined, undefined, undefined, undefined, true],
+      any: true,
+      all: false,
+      not: false,
+      xor: true
+    },
+    {
+      name: 'multipleTrueWithUndefined',
+      values: [true, undefined, true, undefined, true],
+      any: true,
+      all: false,
+      not: false,
+      xor: false
+    },
+    {
+      name: 'allUndefined',
+      values: [undefined, undefined, undefined, undefined, undefined],
+      any: false,
+      all: false,
+      not: true,
+      xor: false
+    },
+    {
+      name: 'singleTrue',
+      values: [true],
+      any: true,
+      all: true,
+      not: false,
+      xor: true
+    },
+    {
+      name: 'singleFalse',
+      values: [false],
+      any: false,
+      all: false,
+      not: true,
+      xor: false
+    },
+    {
+      name: 'singleUndefined',
+      values: [undefined],
+      any: false,
+      all: false,
+      not: true,
+      xor: false
+    }
+    // , {
+    //     name: 'empty',
+    //     values: [],
+    //     any: false,
+    //     all: false,
+    //     not: true,
+    //     xor: false
+    // }
+  ];
 
-    describe(`based on trigger ${TRIGGER.ANY}`, () => {
-        it('should evaluate to expected result', () => {
-            tests.forEach(test => {
-                const result = evaluateResults(test.values, TRIGGER.ANY);
-                expect(result).toEqual(test[TRIGGER.ANY]);
-            });
-        });
+  describe(`based on trigger ${TRIGGER.ANY}`, () => {
+    it('should evaluate to expected result', () => {
+      tests.forEach((test) => {
+        const result = evaluateResults(test.values, TRIGGER.ANY);
+        expect(result).toEqual(test[TRIGGER.ANY]);
+      });
     });
+  });
 
-    describe(`based on trigger ${TRIGGER.ALL}`, () => {
-        it('should evaluate to expected result', () => {
-            tests.forEach(test => {
-                const result = evaluateResults(test.values, TRIGGER.ALL);
-                expect(result).toEqual(test[TRIGGER.ALL]);
-            });
-        });
+  describe(`based on trigger ${TRIGGER.ALL}`, () => {
+    it('should evaluate to expected result', () => {
+      tests.forEach((test) => {
+        const result = evaluateResults(test.values, TRIGGER.ALL);
+        expect(result).toEqual(test[TRIGGER.ALL]);
+      });
     });
+  });
 
-    describe(`based on trigger ${TRIGGER.NOT}`, () => {
-        it('should evaluate to expected result', () => {
-            tests.forEach(test => {
-                const result = evaluateResults(test.values, TRIGGER.NOT);
-                expect(result).toEqual(test[TRIGGER.NOT]);
-            });
-        });
+  describe(`based on trigger ${TRIGGER.NOT}`, () => {
+    it('should evaluate to expected result', () => {
+      tests.forEach((test) => {
+        const result = evaluateResults(test.values, TRIGGER.NOT);
+        expect(result).toEqual(test[TRIGGER.NOT]);
+      });
     });
+  });
 
-    describe(`based on trigger ${TRIGGER.XOR}`, () => {
-        it('should evaluate to expected result', () => {
-            tests.forEach(test => {
-                const result = evaluateResults(test.values, TRIGGER.XOR);
-                expect(result).toEqual(test[TRIGGER.XOR]);
-            });
-        });
+  describe(`based on trigger ${TRIGGER.XOR}`, () => {
+    it('should evaluate to expected result', () => {
+      tests.forEach((test) => {
+        const result = evaluateResults(test.values, TRIGGER.XOR);
+        expect(result).toEqual(test[TRIGGER.XOR]);
+      });
     });
+  });
 
-    // it('should evaluate to true if trigger is NOT', () => {
-    //     const results = {
-    //         result: false,
-    //         result1: false,
-    //         result2: false
-    //     };
-    //     const result = computeConditionByLimit(results, 0);
-    //     expect(result).toBeTrue();
-    // });
+  // it('should evaluate to true if trigger is NOT', () => {
+  //     const results = {
+  //         result: false,
+  //         result1: false,
+  //         result2: false
+  //     };
+  //     const result = computeConditionByLimit(results, 0);
+  //     expect(result).toBeTrue();
+  // });
 
-    // it('should evaluate to false if trigger is NOT', () => {
-    //     const results = {
-    //         result: true,
-    //         result1: false,
-    //         result2: false
-    //     };
-    //     const result = computeConditionByLimit(results, 0);
-    //     expect(result).toBeFalse();
-    // });
+  // it('should evaluate to false if trigger is NOT', () => {
+  //     const results = {
+  //         result: true,
+  //         result1: false,
+  //         result2: false
+  //     };
+  //     const result = computeConditionByLimit(results, 0);
+  //     expect(result).toBeFalse();
+  // });
 
-    // it('should evaluate to true if trigger is XOR', () => {
-    //     const results = {
-    //         result: false,
-    //         result1: true,
-    //         result2: false
-    //     };
-    //     const result = computeConditionByLimit(results, 1);
-    //     expect(result).toBeTrue();
-    // });
+  // it('should evaluate to true if trigger is XOR', () => {
+  //     const results = {
+  //         result: false,
+  //         result1: true,
+  //         result2: false
+  //     };
+  //     const result = computeConditionByLimit(results, 1);
+  //     expect(result).toBeTrue();
+  // });
 
-    // it('should evaluate to false if trigger is XOR', () => {
-    //     const results = {
-    //         result: false,
-    //         result1: true,
-    //         result2: true
-    //     };
-    //     const result = computeConditionByLimit(results, 1);
-    //     expect(result).toBeFalse();
-    // });
+  // it('should evaluate to false if trigger is XOR', () => {
+  //     const results = {
+  //         result: false,
+  //         result1: true,
+  //         result2: true
+  //     };
+  //     const result = computeConditionByLimit(results, 1);
+  //     expect(result).toBeFalse();
+  // });
 });
diff --git a/src/plugins/condition/utils/operations.js b/src/plugins/condition/utils/operations.js
index 947c7e4776e..5de8cea56f6 100644
--- a/src/plugins/condition/utils/operations.js
+++ b/src/plugins/condition/utils/operations.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,301 +20,317 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import { IS_OLD_KEY, IS_STALE_KEY } from './constants.js';
+
 function convertToNumbers(input) {
-    let numberInputs = [];
-    input.forEach(inputValue => numberInputs.push(Number(inputValue)));
+  let numberInputs = [];
+  input.forEach((inputValue) => numberInputs.push(Number(inputValue)));
 
-    return numberInputs;
+  return numberInputs;
 }
 
 function convertToStrings(input) {
-    let stringInputs = [];
-    input.forEach(inputValue => stringInputs.push(inputValue !== undefined ? inputValue.toString() : ''));
+  let stringInputs = [];
+  input.forEach((inputValue) =>
+    stringInputs.push(inputValue !== undefined ? inputValue.toString() : '')
+  );
 
-    return stringInputs;
+  return stringInputs;
 }
 
 function joinValues(values, length) {
-    return values.slice(0, length).join(', ');
+  return values.slice(0, length).join(', ');
 }
 
 export const OPERATIONS = [
-    {
-        name: 'equalTo',
-        operation: function (input) {
-            return Number(input[0]) === Number(input[1]);
-        },
-        text: 'is equal to',
-        appliesTo: ['number'],
-        inputCount: 1,
-        getDescription: function (values) {
-            return ' is ' + joinValues(values, 1);
-        }
+  {
+    name: 'equalTo',
+    operation: function (input) {
+      return Number(input[0]) === Number(input[1]);
     },
-    {
-        name: 'notEqualTo',
-        operation: function (input) {
-            return Number(input[0]) !== Number(input[1]);
-        },
-        text: 'is not equal to',
-        appliesTo: ['number'],
-        inputCount: 1,
-        getDescription: function (values) {
-            return ' is not ' + joinValues(values, 1);
-        }
+    text: 'is equal to',
+    appliesTo: ['number'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' is ' + joinValues(values, 1);
+    }
+  },
+  {
+    name: 'notEqualTo',
+    operation: function (input) {
+      return Number(input[0]) !== Number(input[1]);
     },
-    {
-        name: 'greaterThan',
-        operation: function (input) {
-            return Number(input[0]) > Number(input[1]);
-        },
-        text: 'is greater than',
-        appliesTo: ['number'],
-        inputCount: 1,
-        getDescription: function (values) {
-            return ' > ' + joinValues(values, 1);
-        }
+    text: 'is not equal to',
+    appliesTo: ['number'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' is not ' + joinValues(values, 1);
+    }
+  },
+  {
+    name: 'greaterThan',
+    operation: function (input) {
+      return Number(input[0]) > Number(input[1]);
     },
-    {
-        name: 'lessThan',
-        operation: function (input) {
-            return Number(input[0]) < Number(input[1]);
-        },
-        text: 'is less than',
-        appliesTo: ['number'],
-        inputCount: 1,
-        getDescription: function (values) {
-            return ' < ' + joinValues(values, 1);
-        }
+    text: 'is greater than',
+    appliesTo: ['number'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' > ' + joinValues(values, 1);
+    }
+  },
+  {
+    name: 'lessThan',
+    operation: function (input) {
+      return Number(input[0]) < Number(input[1]);
     },
-    {
-        name: 'greaterThanOrEq',
-        operation: function (input) {
-            return Number(input[0]) >= Number(input[1]);
-        },
-        text: 'is greater than or equal to',
-        appliesTo: ['number'],
-        inputCount: 1,
-        getDescription: function (values) {
-            return ' >= ' + joinValues(values, 1);
-        }
+    text: 'is less than',
+    appliesTo: ['number'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' < ' + joinValues(values, 1);
+    }
+  },
+  {
+    name: 'greaterThanOrEq',
+    operation: function (input) {
+      return Number(input[0]) >= Number(input[1]);
     },
-    {
-        name: 'lessThanOrEq',
-        operation: function (input) {
-            return Number(input[0]) <= Number(input[1]);
-        },
-        text: 'is less than or equal to',
-        appliesTo: ['number'],
-        inputCount: 1,
-        getDescription: function (values) {
-            return ' <= ' + joinValues(values, 1);
-        }
+    text: 'is greater than or equal to',
+    appliesTo: ['number'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' >= ' + joinValues(values, 1);
+    }
+  },
+  {
+    name: 'lessThanOrEq',
+    operation: function (input) {
+      return Number(input[0]) <= Number(input[1]);
     },
-    {
-        name: 'between',
-        operation: function (input) {
-            let numberInputs = convertToNumbers(input);
-            let larger = Math.max(...numberInputs.slice(1, 3));
-            let smaller = Math.min(...numberInputs.slice(1, 3));
+    text: 'is less than or equal to',
+    appliesTo: ['number'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' <= ' + joinValues(values, 1);
+    }
+  },
+  {
+    name: 'between',
+    operation: function (input) {
+      let numberInputs = convertToNumbers(input);
+      let larger = Math.max(...numberInputs.slice(1, 3));
+      let smaller = Math.min(...numberInputs.slice(1, 3));
 
-            return (numberInputs[0] > smaller) && (numberInputs[0] < larger);
-        },
-        text: 'is between',
-        appliesTo: ['number'],
-        inputCount: 2,
-        getDescription: function (values) {
-            return ' is between ' + values[0] + ' and ' + values[1];
-        }
+      return numberInputs[0] > smaller && numberInputs[0] < larger;
     },
-    {
-        name: 'notBetween',
-        operation: function (input) {
-            let numberInputs = convertToNumbers(input);
-            let larger = Math.max(...numberInputs.slice(1, 3));
-            let smaller = Math.min(...numberInputs.slice(1, 3));
+    text: 'is between',
+    appliesTo: ['number'],
+    inputCount: 2,
+    getDescription: function (values) {
+      return ' is between ' + values[0] + ' and ' + values[1];
+    }
+  },
+  {
+    name: 'notBetween',
+    operation: function (input) {
+      let numberInputs = convertToNumbers(input);
+      let larger = Math.max(...numberInputs.slice(1, 3));
+      let smaller = Math.min(...numberInputs.slice(1, 3));
 
-            return (numberInputs[0] < smaller) || (numberInputs[0] > larger);
-        },
-        text: 'is not between',
-        appliesTo: ['number'],
-        inputCount: 2,
-        getDescription: function (values) {
-            return ' is not between ' + values[0] + ' and ' + values[1];
-        }
+      return numberInputs[0] < smaller || numberInputs[0] > larger;
     },
-    {
-        name: 'textContains',
-        operation: function (input) {
-            return input[0] && input[1] && input[0].includes(input[1]);
-        },
-        text: 'text contains',
-        appliesTo: ['string'],
-        inputCount: 1,
-        getDescription: function (values) {
-            return ' contains ' + joinValues(values, 1);
-        }
+    text: 'is not between',
+    appliesTo: ['number'],
+    inputCount: 2,
+    getDescription: function (values) {
+      return ' is not between ' + values[0] + ' and ' + values[1];
+    }
+  },
+  {
+    name: 'textContains',
+    operation: function (input) {
+      return input[0] && input[1] && input[0].includes(input[1]);
     },
-    {
-        name: 'textDoesNotContain',
-        operation: function (input) {
-            return input[0] && input[1] && !input[0].includes(input[1]);
-        },
-        text: 'text does not contain',
-        appliesTo: ['string'],
-        inputCount: 1,
-        getDescription: function (values) {
-            return ' does not contain ' + joinValues(values, 1);
-        }
+    text: 'text contains',
+    appliesTo: ['string'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' contains ' + joinValues(values, 1);
+    }
+  },
+  {
+    name: 'textDoesNotContain',
+    operation: function (input) {
+      return input[0] && input[1] && !input[0].includes(input[1]);
     },
-    {
-        name: 'textStartsWith',
-        operation: function (input) {
-            return input[0].startsWith(input[1]);
-        },
-        text: 'text starts with',
-        appliesTo: ['string'],
-        inputCount: 1,
-        getDescription: function (values) {
-            return ' starts with ' + joinValues(values, 1);
-        }
+    text: 'text does not contain',
+    appliesTo: ['string'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' does not contain ' + joinValues(values, 1);
+    }
+  },
+  {
+    name: 'textStartsWith',
+    operation: function (input) {
+      return input[0].startsWith(input[1]);
     },
-    {
-        name: 'textEndsWith',
-        operation: function (input) {
-            return input[0].endsWith(input[1]);
-        },
-        text: 'text ends with',
-        appliesTo: ['string'],
-        inputCount: 1,
-        getDescription: function (values) {
-            return ' ends with ' + joinValues(values, 1);
-        }
+    text: 'text starts with',
+    appliesTo: ['string'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' starts with ' + joinValues(values, 1);
+    }
+  },
+  {
+    name: 'textEndsWith',
+    operation: function (input) {
+      return input[0].endsWith(input[1]);
     },
-    {
-        name: 'textIsExactly',
-        operation: function (input) {
-            return input[0] === input[1];
-        },
-        text: 'text is exactly',
-        appliesTo: ['string'],
-        inputCount: 1,
-        getDescription: function (values) {
-            return ' is exactly ' + joinValues(values, 1);
-        }
+    text: 'text ends with',
+    appliesTo: ['string'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' ends with ' + joinValues(values, 1);
+    }
+  },
+  {
+    name: 'textIsExactly',
+    operation: function (input) {
+      return input[0] === input[1];
     },
-    {
-        name: 'isUndefined',
-        operation: function (input) {
-            return typeof input[0] === 'undefined';
-        },
-        text: 'is undefined',
-        appliesTo: ['string', 'number', 'enum'],
-        inputCount: 0,
-        getDescription: function () {
-            return ' is undefined';
-        }
+    text: 'text is exactly',
+    appliesTo: ['string'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' is exactly ' + joinValues(values, 1);
+    }
+  },
+  {
+    name: 'isUndefined',
+    operation: function (input) {
+      return typeof input[0] === 'undefined';
     },
-    {
-        name: 'isDefined',
-        operation: function (input) {
-            return typeof input[0] !== 'undefined';
-        },
-        text: 'is defined',
-        appliesTo: ['string', 'number', 'enum'],
-        inputCount: 0,
-        getDescription: function () {
-            return ' is defined';
-        }
+    text: 'is undefined',
+    appliesTo: ['string', 'number', 'enum'],
+    inputCount: 0,
+    getDescription: function () {
+      return ' is undefined';
+    }
+  },
+  {
+    name: 'isDefined',
+    operation: function (input) {
+      return typeof input[0] !== 'undefined';
     },
-    {
-        name: 'enumValueIs',
-        operation: function (input) {
-            let stringInputs = convertToStrings(input);
+    text: 'is defined',
+    appliesTo: ['string', 'number', 'enum'],
+    inputCount: 0,
+    getDescription: function () {
+      return ' is defined';
+    }
+  },
+  {
+    name: 'enumValueIs',
+    operation: function (input) {
+      let stringInputs = convertToStrings(input);
 
-            return stringInputs[0] === stringInputs[1];
-        },
-        text: 'is',
-        appliesTo: ['enum'],
-        inputCount: 1,
-        getDescription: function (values) {
-            return ' is ' + joinValues(values, 1);
-        }
+      return stringInputs[0] === stringInputs[1];
     },
-    {
-        name: 'enumValueIsNot',
-        operation: function (input) {
-            let stringInputs = convertToStrings(input);
+    text: 'is',
+    appliesTo: ['enum'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' is ' + joinValues(values, 1);
+    }
+  },
+  {
+    name: 'enumValueIsNot',
+    operation: function (input) {
+      let stringInputs = convertToStrings(input);
 
-            return stringInputs[0] !== stringInputs[1];
-        },
-        text: 'is not',
-        appliesTo: ['enum'],
-        inputCount: 1,
-        getDescription: function (values) {
-            return ' is not ' + joinValues(values, 1);
-        }
+      return stringInputs[0] !== stringInputs[1];
     },
-    {
-        name: 'isOneOf',
-        operation: function (input) {
-            const lhsValue = input[0] !== undefined ? input[0].toString() : '';
-            if (input[1]) {
-                const values = input[1].split(',');
+    text: 'is not',
+    appliesTo: ['enum'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' is not ' + joinValues(values, 1);
+    }
+  },
+  {
+    name: 'isOneOf',
+    operation: function (input) {
+      const lhsValue = input[0] !== undefined ? input[0].toString() : '';
+      if (input[1]) {
+        const values = input[1].split(',');
 
-                return values.some((value) => lhsValue === value.toString().trim());
-            }
+        return values.some((value) => lhsValue === value.toString().trim());
+      }
 
-            return false;
-        },
-        text: 'is one of',
-        appliesTo: ["string", "number"],
-        inputCount: 1,
-        getDescription: function (values) {
-            return ' is one of ' + values[0];
-        }
+      return false;
     },
-    {
-        name: 'isNotOneOf',
-        operation: function (input) {
-            const lhsValue = input[0] !== undefined ? input[0].toString() : '';
-            if (input[1]) {
-                const values = input[1].split(',');
-                const found = values.some((value) => lhsValue === value.toString().trim());
+    text: 'is one of',
+    appliesTo: ['string', 'number'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' is one of ' + values[0];
+    }
+  },
+  {
+    name: 'isNotOneOf',
+    operation: function (input) {
+      const lhsValue = input[0] !== undefined ? input[0].toString() : '';
+      if (input[1]) {
+        const values = input[1].split(',');
+        const found = values.some((value) => lhsValue === value.toString().trim());
 
-                return !found;
-            }
+        return !found;
+      }
 
-            return false;
-        },
-        text: 'is not one of',
-        appliesTo: ["string", "number"],
-        inputCount: 1,
-        getDescription: function (values) {
-            return ' is not one of ' + values[0];
-        }
+      return false;
+    },
+    text: 'is not one of',
+    appliesTo: ['string', 'number'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' is not one of ' + values[0];
+    }
+  },
+  {
+    name: IS_OLD_KEY,
+    operation: function () {
+      return false;
+    },
+    text: 'is older than',
+    appliesTo: ['number'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ` is older than ${values[0] || ''} seconds`;
+    }
+  },
+  {
+    name: IS_STALE_KEY,
+    operation: function () {
+      return false;
     },
-    {
-        name: 'isStale',
-        operation: function () {
-            return false;
-        },
-        text: 'is older than',
-        appliesTo: ["number"],
-        inputCount: 1,
-        getDescription: function (values) {
-            return ` is older than ${values[0] || ''} seconds`;
-        }
+    text: 'is stale',
+    appliesTo: ['number'],
+    inputCount: 0,
+    getDescription: function () {
+      return ' is stale';
     }
+  }
 ];
 
 export const INPUT_TYPES = {
-    'string': 'text',
-    'number': 'number'
+  string: 'text',
+  number: 'number'
 };
 
 export function getOperatorText(operationName, values) {
-    const found = OPERATIONS.find((operation) => operation.name === operationName);
+  const found = OPERATIONS.find((operation) => operation.name === operationName);
 
-    return found ? found.getDescription(values) : '';
+  return found?.getDescription(values) ?? '';
 }
diff --git a/src/plugins/condition/utils/operationsSpec.js b/src/plugins/condition/utils/operationsSpec.js
index 03363585765..1785db75c0b 100644
--- a/src/plugins/condition/utils/operationsSpec.js
+++ b/src/plugins/condition/utils/operationsSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import { OPERATIONS } from "./operations";
+import { OPERATIONS } from './operations.js';
 let isOneOfOperation = OPERATIONS.find((operation) => operation.name === 'isOneOf');
 let isNotOneOfOperation = OPERATIONS.find((operation) => operation.name === 'isNotOneOf');
 let isBetween = OPERATIONS.find((operation) => operation.name === 'between');
@@ -29,114 +29,113 @@ let enumIsOperation = OPERATIONS.find((operation) => operation.name === 'enumVal
 let enumIsNotOperation = OPERATIONS.find((operation) => operation.name === 'enumValueIsNot');
 
 describe('operations', function () {
-
-    it('should evaluate isOneOf to true for number inputs', () => {
-        const inputs = [45, "5,6,45,8"];
-        expect(Boolean(isOneOfOperation.operation(inputs))).toBeTrue();
-    });
-
-    it('should evaluate isOneOf to true for string inputs', () => {
-        const inputs = ["45", " 45, 645, 4,8 "];
-        expect(Boolean(isOneOfOperation.operation(inputs))).toBeTrue();
-    });
-
-    it('should evaluate isNotOneOf to true for number inputs', () => {
-        const inputs = [45, "5,6,4,8"];
-        expect(Boolean(isNotOneOfOperation.operation(inputs))).toBeTrue();
-    });
-
-    it('should evaluate isNotOneOf to true for string inputs', () => {
-        const inputs = ["45", " 5,645, 4,8 "];
-        expect(Boolean(isNotOneOfOperation.operation(inputs))).toBeTrue();
-    });
-
-    it('should evaluate isOneOf to false for number inputs', () => {
-        const inputs = [4, "5, 6, 7, 8"];
-        expect(Boolean(isOneOfOperation.operation(inputs))).toBeFalse();
-    });
-
-    it('should evaluate isOneOf to false for string inputs', () => {
-        const inputs = ["4", "5,645 ,7,8"];
-        expect(Boolean(isOneOfOperation.operation(inputs))).toBeFalse();
-    });
-
-    it('should evaluate isNotOneOf to false for number inputs', () => {
-        const inputs = [4, "5,4, 7,8"];
-        expect(Boolean(isNotOneOfOperation.operation(inputs))).toBeFalse();
-    });
-
-    it('should evaluate isNotOneOf to false for string inputs', () => {
-        const inputs = ["4", "5,46,4,8"];
-        expect(Boolean(isNotOneOfOperation.operation(inputs))).toBeFalse();
-    });
-
-    it('should evaluate isBetween to true', () => {
-        const inputs = ["4", "3", "89"];
-        expect(Boolean(isBetween.operation(inputs))).toBeTrue();
-    });
-
-    it('should evaluate isNotBetween to true', () => {
-        const inputs = ["45", "100", "89"];
-        expect(Boolean(isNotBetween.operation(inputs))).toBeTrue();
-    });
-
-    it('should evaluate isBetween to false', () => {
-        const inputs = ["4", "100", "89"];
-        expect(Boolean(isBetween.operation(inputs))).toBeFalse();
-    });
-
-    it('should evaluate isNotBetween to false', () => {
-        const inputs = ["45", "30", "50"];
-        expect(Boolean(isNotBetween.operation(inputs))).toBeFalse();
-    });
-
-    it('should evaluate enumValueIs to true for number inputs', () => {
-        const inputs = [1, "1"];
-        expect(Boolean(enumIsOperation.operation(inputs))).toBeTrue();
-    });
-
-    it('should evaluate enumValueIs to true for string inputs', () => {
-        const inputs = ["45", "45"];
-        expect(Boolean(enumIsOperation.operation(inputs))).toBeTrue();
-    });
-
-    it('should evaluate enumValueIsNot to true for number inputs', () => {
-        const inputs = [45, "46"];
-        expect(Boolean(enumIsNotOperation.operation(inputs))).toBeTrue();
-    });
-
-    it('should evaluate enumValueIsNot to true for string inputs', () => {
-        const inputs = ["45", "46"];
-        expect(Boolean(enumIsNotOperation.operation(inputs))).toBeTrue();
-    });
-
-    it('should evaluate enumValueIs to false for number inputs', () => {
-        const inputs = [1, "2"];
-        expect(Boolean(enumIsOperation.operation(inputs))).toBeFalse();
-    });
-
-    it('should evaluate enumValueIs to false for string inputs', () => {
-        const inputs = ["45", "46"];
-        expect(Boolean(enumIsOperation.operation(inputs))).toBeFalse();
-    });
-
-    it('should evaluate enumValueIsNot to false for number inputs', () => {
-        const inputs = [45, "45"];
-        expect(Boolean(enumIsNotOperation.operation(inputs))).toBeFalse();
-    });
-
-    it('should evaluate enumValueIsNot to false for string inputs', () => {
-        const inputs = ["45", "45"];
-        expect(Boolean(enumIsNotOperation.operation(inputs))).toBeFalse();
-    });
-
-    it('should evaluate enumValueIs to false for undefined input', () => {
-        const inputs = [undefined, "45"];
-        expect(Boolean(enumIsOperation.operation(inputs))).toBeFalse();
-    });
-
-    it('should evaluate enumValueIsNot to true for undefined input', () => {
-        const inputs = [undefined, "45"];
-        expect(Boolean(enumIsNotOperation.operation(inputs))).toBeTrue();
-    });
+  it('should evaluate isOneOf to true for number inputs', () => {
+    const inputs = [45, '5,6,45,8'];
+    expect(Boolean(isOneOfOperation.operation(inputs))).toBeTrue();
+  });
+
+  it('should evaluate isOneOf to true for string inputs', () => {
+    const inputs = ['45', ' 45, 645, 4,8 '];
+    expect(Boolean(isOneOfOperation.operation(inputs))).toBeTrue();
+  });
+
+  it('should evaluate isNotOneOf to true for number inputs', () => {
+    const inputs = [45, '5,6,4,8'];
+    expect(Boolean(isNotOneOfOperation.operation(inputs))).toBeTrue();
+  });
+
+  it('should evaluate isNotOneOf to true for string inputs', () => {
+    const inputs = ['45', ' 5,645, 4,8 '];
+    expect(Boolean(isNotOneOfOperation.operation(inputs))).toBeTrue();
+  });
+
+  it('should evaluate isOneOf to false for number inputs', () => {
+    const inputs = [4, '5, 6, 7, 8'];
+    expect(Boolean(isOneOfOperation.operation(inputs))).toBeFalse();
+  });
+
+  it('should evaluate isOneOf to false for string inputs', () => {
+    const inputs = ['4', '5,645 ,7,8'];
+    expect(Boolean(isOneOfOperation.operation(inputs))).toBeFalse();
+  });
+
+  it('should evaluate isNotOneOf to false for number inputs', () => {
+    const inputs = [4, '5,4, 7,8'];
+    expect(Boolean(isNotOneOfOperation.operation(inputs))).toBeFalse();
+  });
+
+  it('should evaluate isNotOneOf to false for string inputs', () => {
+    const inputs = ['4', '5,46,4,8'];
+    expect(Boolean(isNotOneOfOperation.operation(inputs))).toBeFalse();
+  });
+
+  it('should evaluate isBetween to true', () => {
+    const inputs = ['4', '3', '89'];
+    expect(Boolean(isBetween.operation(inputs))).toBeTrue();
+  });
+
+  it('should evaluate isNotBetween to true', () => {
+    const inputs = ['45', '100', '89'];
+    expect(Boolean(isNotBetween.operation(inputs))).toBeTrue();
+  });
+
+  it('should evaluate isBetween to false', () => {
+    const inputs = ['4', '100', '89'];
+    expect(Boolean(isBetween.operation(inputs))).toBeFalse();
+  });
+
+  it('should evaluate isNotBetween to false', () => {
+    const inputs = ['45', '30', '50'];
+    expect(Boolean(isNotBetween.operation(inputs))).toBeFalse();
+  });
+
+  it('should evaluate enumValueIs to true for number inputs', () => {
+    const inputs = [1, '1'];
+    expect(Boolean(enumIsOperation.operation(inputs))).toBeTrue();
+  });
+
+  it('should evaluate enumValueIs to true for string inputs', () => {
+    const inputs = ['45', '45'];
+    expect(Boolean(enumIsOperation.operation(inputs))).toBeTrue();
+  });
+
+  it('should evaluate enumValueIsNot to true for number inputs', () => {
+    const inputs = [45, '46'];
+    expect(Boolean(enumIsNotOperation.operation(inputs))).toBeTrue();
+  });
+
+  it('should evaluate enumValueIsNot to true for string inputs', () => {
+    const inputs = ['45', '46'];
+    expect(Boolean(enumIsNotOperation.operation(inputs))).toBeTrue();
+  });
+
+  it('should evaluate enumValueIs to false for number inputs', () => {
+    const inputs = [1, '2'];
+    expect(Boolean(enumIsOperation.operation(inputs))).toBeFalse();
+  });
+
+  it('should evaluate enumValueIs to false for string inputs', () => {
+    const inputs = ['45', '46'];
+    expect(Boolean(enumIsOperation.operation(inputs))).toBeFalse();
+  });
+
+  it('should evaluate enumValueIsNot to false for number inputs', () => {
+    const inputs = [45, '45'];
+    expect(Boolean(enumIsNotOperation.operation(inputs))).toBeFalse();
+  });
+
+  it('should evaluate enumValueIsNot to false for string inputs', () => {
+    const inputs = ['45', '45'];
+    expect(Boolean(enumIsNotOperation.operation(inputs))).toBeFalse();
+  });
+
+  it('should evaluate enumValueIs to false for undefined input', () => {
+    const inputs = [undefined, '45'];
+    expect(Boolean(enumIsOperation.operation(inputs))).toBeFalse();
+  });
+
+  it('should evaluate enumValueIsNot to true for undefined input', () => {
+    const inputs = [undefined, '45'];
+    expect(Boolean(enumIsNotOperation.operation(inputs))).toBeTrue();
+  });
 });
diff --git a/src/plugins/condition/utils/styleUtils.js b/src/plugins/condition/utils/styleUtils.js
index 8581cf3f153..8d4983d9bcf 100644
--- a/src/plugins/condition/utils/styleUtils.js
+++ b/src/plugins/condition/utils/styleUtils.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,175 +19,184 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import isEmpty from 'lodash/isEmpty';
+import isEmpty from 'lodash/isEmpty.js';
 
 const NONE_VALUE = '__no_value';
 
 const styleProps = {
-    backgroundColor: {
-        svgProperty: 'fill',
-        noneValue: NONE_VALUE,
-        applicableForType: type => {
-            return !type ? true : (type === 'text-view'
-                                      || type === 'telemetry-view'
-                                      || type === 'box-view'
-                                      || type === 'subobject-view');
-        }
-    },
-    border: {
-        svgProperty: 'stroke',
-        noneValue: NONE_VALUE,
-        applicableForType: type => {
-            return !type ? true : (type === 'text-view'
-                                            || type === 'telemetry-view'
-                                            || type === 'box-view'
-                                            || type === 'image-view'
-                                            || type === 'line-view'
-                                            || type === 'subobject-view');
-        }
-    },
-    color: {
-        svgProperty: 'color',
-        noneValue: NONE_VALUE,
-        applicableForType: type => {
-            return !type ? true : (type === 'text-view'
-                                    || type === 'telemetry-view'
-                                    || type === 'subobject-view');
-        }
-    },
-    imageUrl: {
-        svgProperty: 'url',
-        noneValue: '',
-        applicableForType: type => {
-            return !type ? false : type === 'image-view';
-        }
+  backgroundColor: {
+    svgProperty: 'fill',
+    noneValue: NONE_VALUE,
+    applicableForType: (type) => {
+      return !type
+        ? true
+        : type === 'text-view' ||
+            type === 'telemetry-view' ||
+            type === 'box-view' ||
+            type === 'ellipse-view' ||
+            type === 'subobject-view';
     }
+  },
+  border: {
+    svgProperty: 'stroke',
+    noneValue: NONE_VALUE,
+    applicableForType: (type) => {
+      return !type
+        ? true
+        : type === 'text-view' ||
+            type === 'telemetry-view' ||
+            type === 'box-view' ||
+            type === 'ellipse-view' ||
+            type === 'image-view' ||
+            type === 'line-view' ||
+            type === 'subobject-view';
+    }
+  },
+  color: {
+    svgProperty: 'color',
+    noneValue: NONE_VALUE,
+    applicableForType: (type) => {
+      return !type
+        ? true
+        : type === 'text-view' || type === 'telemetry-view' || type === 'subobject-view';
+    }
+  },
+  imageUrl: {
+    svgProperty: 'url',
+    noneValue: '',
+    applicableForType: (type) => {
+      return !type ? false : type === 'image-view';
+    }
+  }
 };
 
 function aggregateStyleValues(accumulator, currentStyle) {
-    const styleKeys = Object.keys(currentStyle);
-    const properties = Object.keys(styleProps);
-    properties.forEach((property) => {
-        if (!accumulator[property]) {
-            accumulator[property] = [];
-        }
-
-        const found = styleKeys.find(key => key === property);
-        if (found) {
-            accumulator[property].push(currentStyle[found]);
-        }
-    });
-
-    return accumulator;
+  const styleKeys = Object.keys(currentStyle);
+  const properties = Object.keys(styleProps);
+  properties.forEach((property) => {
+    if (!accumulator[property]) {
+      accumulator[property] = [];
+    }
+
+    const found = styleKeys.find((key) => key === property);
+    if (found) {
+      accumulator[property].push(currentStyle[found]);
+    }
+  });
+
+  return accumulator;
 }
 
 function getStaticStyleForItem(domainObject, id) {
-    let domainObjectStyles = domainObject && domainObject.configuration && domainObject.configuration.objectStyles;
-    if (domainObjectStyles) {
-        if (id) {
-            if (domainObjectStyles[id] && domainObjectStyles[id].staticStyle) {
-                return domainObjectStyles[id].staticStyle.style;
-            }
-        } else if (domainObjectStyles.staticStyle) {
-            return domainObjectStyles.staticStyle.style;
-        }
+  let domainObjectStyles =
+    domainObject && domainObject.configuration && domainObject.configuration.objectStyles;
+  if (domainObjectStyles) {
+    if (id) {
+      if (domainObjectStyles[id] && domainObjectStyles[id].staticStyle) {
+        return domainObjectStyles[id].staticStyle.style;
+      }
+    } else if (domainObjectStyles.staticStyle) {
+      return domainObjectStyles.staticStyle.style;
     }
+  }
 }
 
 // Returns a union of styles used by multiple items.
 // Styles that are common to all items but don't have the same value are added to the mixedStyles list
 export function getConsolidatedStyleValues(multipleItemStyles) {
-    let aggregatedStyleValues = multipleItemStyles.reduce(aggregateStyleValues, {});
-
-    let styleValues = {};
-    let mixedStyles = [];
-    const properties = Object.keys(styleProps);
-    properties.forEach((property) => {
-        const values = aggregatedStyleValues[property];
-        if (values && values.length) {
-            if (values.every(value => value === values[0])) {
-                styleValues[property] = values[0];
-            } else {
-                styleValues[property] = '';
-                mixedStyles.push(property);
-            }
-        }
-    });
-
-    return {
-        styles: styleValues,
-        mixedStyles
-    };
+  let aggregatedStyleValues = multipleItemStyles.reduce(aggregateStyleValues, {});
+
+  let styleValues = {};
+  let mixedStyles = [];
+  const properties = Object.keys(styleProps);
+  properties.forEach((property) => {
+    const values = aggregatedStyleValues[property];
+    if (values && values.length) {
+      if (values.every((value) => value === values[0])) {
+        styleValues[property] = values[0];
+      } else {
+        styleValues[property] = '';
+        mixedStyles.push(property);
+      }
+    }
+  });
+
+  return {
+    styles: styleValues,
+    mixedStyles
+  };
 }
 
 export function getConditionalStyleForItem(domainObject, id) {
-    let domainObjectStyles = domainObject && domainObject.configuration && domainObject.configuration.objectStyles;
-    if (domainObjectStyles) {
-        if (id) {
-            if (domainObjectStyles[id] && domainObjectStyles[id].conditionSetIdentifier) {
-                return domainObjectStyles[id].styles;
-            }
-        } else if (domainObjectStyles.conditionSetIdentifier) {
-            return domainObjectStyles.styles;
-        }
+  let domainObjectStyles =
+    domainObject && domainObject.configuration && domainObject.configuration.objectStyles;
+  if (domainObjectStyles) {
+    if (id) {
+      if (domainObjectStyles[id] && domainObjectStyles[id].conditionSetIdentifier) {
+        return domainObjectStyles[id].styles;
+      }
+    } else if (domainObjectStyles.conditionSetIdentifier) {
+      return domainObjectStyles.styles;
     }
+  }
 }
 
 export function getConditionSetIdentifierForItem(domainObject, id) {
-    let domainObjectStyles = domainObject && domainObject.configuration && domainObject.configuration.objectStyles;
-    if (domainObjectStyles) {
-        if (id) {
-            if (domainObjectStyles[id] && domainObjectStyles[id].conditionSetIdentifier) {
-                return domainObjectStyles[id].conditionSetIdentifier;
-            }
-        } else if (domainObjectStyles.conditionSetIdentifier) {
-            return domainObjectStyles.conditionSetIdentifier;
-        }
+  let domainObjectStyles =
+    domainObject && domainObject.configuration && domainObject.configuration.objectStyles;
+  if (domainObjectStyles) {
+    if (id) {
+      if (domainObjectStyles[id] && domainObjectStyles[id].conditionSetIdentifier) {
+        return domainObjectStyles[id].conditionSetIdentifier;
+      }
+    } else if (domainObjectStyles.conditionSetIdentifier) {
+      return domainObjectStyles.conditionSetIdentifier;
     }
+  }
 }
 
 //Returns either existing static styles or uses SVG defaults if available
 export function getApplicableStylesForItem(domainObject, item) {
-    const type = item && item.type;
-    const id = item && item.id;
-    let style = {};
-
-    let staticStyle = getStaticStyleForItem(domainObject, id);
-
-    const properties = Object.keys(styleProps);
-    properties.forEach(property => {
-        const styleProp = styleProps[property];
-        if (styleProp.applicableForType(type)) {
-            let defaultValue;
-            if (staticStyle) {
-                defaultValue = staticStyle[property];
-            } else if (item) {
-                defaultValue = item[styleProp.svgProperty];
-            }
-
-            style[property] = defaultValue === undefined ? styleProp.noneValue : defaultValue;
-        }
-    });
-
-    return style;
+  const type = item && item.type;
+  const id = item && item.id;
+  let style = {};
+
+  let staticStyle = getStaticStyleForItem(domainObject, id);
+
+  const properties = Object.keys(styleProps);
+  properties.forEach((property) => {
+    const styleProp = styleProps[property];
+    if (styleProp.applicableForType(type)) {
+      let defaultValue;
+      if (staticStyle) {
+        defaultValue = staticStyle[property];
+      } else if (item) {
+        defaultValue = item[styleProp.svgProperty];
+      }
+
+      style[property] = defaultValue === undefined ? styleProp.noneValue : defaultValue;
+    }
+  });
+
+  return style;
 }
 
 export function getStylesWithoutNoneValue(style) {
-    if (isEmpty(style) || !style) {
-        return;
+  if (isEmpty(style) || !style) {
+    return;
+  }
+
+  let styleObj = {};
+  const keys = Object.keys(style);
+  keys.forEach((key) => {
+    if (typeof style[key] === 'string') {
+      if (style[key].indexOf('__no_value') > -1) {
+        style[key] = '';
+      } else {
+        styleObj[key] = style[key];
+      }
     }
+  });
 
-    let styleObj = {};
-    const keys = Object.keys(style);
-    keys.forEach(key => {
-        if ((typeof style[key] === 'string')) {
-            if (style[key].indexOf('__no_value') > -1) {
-                style[key] = '';
-            } else {
-                styleObj[key] = style[key];
-            }
-        }
-    });
-
-    return styleObj;
+  return styleObj;
 }
diff --git a/src/plugins/condition/utils/time.js b/src/plugins/condition/utils/time.js
index 296c0ccd465..e8842a43e0f 100644
--- a/src/plugins/condition/utils/time.js
+++ b/src/plugins/condition/utils/time.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,57 +21,57 @@
  *****************************************************************************/
 
 function updateLatestTimeStamp(timestamp, timeSystems) {
-    let latest = {};
+  let latest = {};
 
-    timeSystems.forEach(timeSystem => {
-        latest[timeSystem.key] = timestamp[timeSystem.key];
-    });
+  timeSystems.forEach((timeSystem) => {
+    latest[timeSystem.key] = timestamp[timeSystem.key];
+  });
 
-    return latest;
+  return latest;
 }
 
 export function getLatestTimestamp(
-    currentTimestamp,
-    compareTimestamp,
-    timeSystems,
-    currentTimeSystem
+  currentTimestamp,
+  compareTimestamp,
+  timeSystems,
+  currentTimeSystem
 ) {
-    let latest = { ...currentTimestamp };
-    const compare = { ...compareTimestamp };
-    const key = currentTimeSystem.key;
+  let latest = { ...currentTimestamp };
+  const compare = { ...compareTimestamp };
+  const key = currentTimeSystem.key;
 
-    if (!latest || !latest[key]) {
-        latest = updateLatestTimeStamp(compare, timeSystems);
-    }
+  if (!latest || !latest[key]) {
+    latest = updateLatestTimeStamp(compare, timeSystems);
+  }
 
-    if (compare[key] > latest[key]) {
-        latest = updateLatestTimeStamp(compare, timeSystems);
-    }
+  if (compare[key] > latest[key]) {
+    latest = updateLatestTimeStamp(compare, timeSystems);
+  }
 
-    return latest;
+  return latest;
 }
 
-export function subscribeForStaleness(callback, timeout) {
-    let stalenessTimer = setTimeout(() => {
-        clearTimeout(stalenessTimer);
-        callback();
-    }, timeout);
+export function checkIfOld(callback, timeout) {
+  let oldCheckTimer = setTimeout(() => {
+    clearTimeout(oldCheckTimer);
+    callback();
+  }, timeout);
 
-    return {
-        update: (data) => {
-            if (stalenessTimer) {
-                clearTimeout(stalenessTimer);
-            }
+  return {
+    update: (data) => {
+      if (oldCheckTimer) {
+        clearTimeout(oldCheckTimer);
+      }
 
-            stalenessTimer = setTimeout(() => {
-                clearTimeout(stalenessTimer);
-                callback(data);
-            }, timeout);
-        },
-        clear: () => {
-            if (stalenessTimer) {
-                clearTimeout(stalenessTimer);
-            }
-        }
-    };
+      oldCheckTimer = setTimeout(() => {
+        clearTimeout(oldCheckTimer);
+        callback(data);
+      }, timeout);
+    },
+    clear: () => {
+      if (oldCheckTimer) {
+        clearTimeout(oldCheckTimer);
+      }
+    }
+  };
 }
diff --git a/src/plugins/condition/utils/timeSpec.js b/src/plugins/condition/utils/timeSpec.js
index 3435f2c4690..ef6a55ed698 100644
--- a/src/plugins/condition/utils/timeSpec.js
+++ b/src/plugins/condition/utils/timeSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,47 +19,46 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import { subscribeForStaleness } from "./time";
+import { checkIfOld } from './time.js';
 
 describe('time related utils', () => {
-    let subscription;
-    let mockListener;
+  let subscription;
+  let mockListener;
 
-    beforeEach(() => {
-        mockListener = jasmine.createSpy('listener');
-        subscription = subscribeForStaleness(mockListener, 100);
-    });
+  beforeEach(() => {
+    mockListener = jasmine.createSpy('listener');
+    subscription = checkIfOld(mockListener, 100);
+  });
 
-    describe('subscribe for staleness', () => {
-        it('should call listeners when stale', (done) => {
-            setTimeout(() => {
-                expect(mockListener).toHaveBeenCalled();
-                done();
-            }, 200);
-        });
+  describe('check if old', () => {
+    it('should call listeners when old', (done) => {
+      setTimeout(() => {
+        expect(mockListener).toHaveBeenCalled();
+        done();
+      }, 200);
+    });
 
-        it('should update the subscription', (done) => {
-            function updated() {
-                setTimeout(() => {
-                    expect(mockListener).not.toHaveBeenCalled();
-                    done();
-                }, 50);
-            }
+    it('should update the subscription', (done) => {
+      function updated() {
+        setTimeout(() => {
+          expect(mockListener).not.toHaveBeenCalled();
+          done();
+        }, 50);
+      }
 
-            setTimeout(() => {
-                subscription.update();
-                updated();
-            }, 50);
-        });
+      setTimeout(() => {
+        subscription.update();
+        updated();
+      }, 50);
+    });
 
-        it('should clear the subscription', (done) => {
-            subscription.clear();
+    it('should clear the subscription', (done) => {
+      subscription.clear();
 
-            setTimeout(() => {
-                expect(mockListener).not.toHaveBeenCalled();
-                done();
-            }, 200);
-        });
+      setTimeout(() => {
+        expect(mockListener).not.toHaveBeenCalled();
+        done();
+      }, 200);
     });
-
+  });
 });
diff --git a/src/plugins/conditionWidget/ConditionWidgetViewProvider.js b/src/plugins/conditionWidget/ConditionWidgetViewProvider.js
index 3b1a2c4a7de..0f244567c9f 100644
--- a/src/plugins/conditionWidget/ConditionWidgetViewProvider.js
+++ b/src/plugins/conditionWidget/ConditionWidgetViewProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,45 +20,54 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import mount from 'utils/mount';
+
 import ConditionWidgetComponent from './components/ConditionWidget.vue';
-import Vue from 'vue';
 
 export default function ConditionWidget(openmct) {
-    return {
-        key: 'conditionWidget',
-        name: 'Condition Widget',
-        cssClass: 'icon-condition-widget',
-        canView: function (domainObject) {
-            return domainObject.type === 'conditionWidget';
-        },
-        canEdit: function (domainObject) {
-            return domainObject.type === 'conditionWidget';
-        },
-        view: function (domainObject) {
-            let component;
+  return {
+    key: 'conditionWidget',
+    name: 'Condition Widget',
+    cssClass: 'icon-condition-widget',
+    canView: function (domainObject) {
+      return domainObject.type === 'conditionWidget';
+    },
+    canEdit: function (domainObject) {
+      return domainObject.type === 'conditionWidget';
+    },
+    view: function (domainObject) {
+      let _destroy = null;
 
-            return {
-                show: function (element) {
-                    component = new Vue({
-                        el: element,
-                        components: {
-                            ConditionWidgetComponent: ConditionWidgetComponent
-                        },
-                        provide: {
-                            openmct,
-                            domainObject
-                        },
-                        template: '<condition-widget-component></condition-widget-component>'
-                    });
-                },
-                destroy: function (element) {
-                    component.$destroy();
-                    component = undefined;
-                }
-            };
+      return {
+        show: function (element) {
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                ConditionWidgetComponent: ConditionWidgetComponent
+              },
+              provide: {
+                openmct,
+                domainObject
+              },
+              template: '<condition-widget-component></condition-widget-component>'
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
         },
-        priority: function () {
-            return 1;
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
         }
-    };
+      };
+    },
+    priority: function () {
+      return 1;
+    }
+  };
 }
diff --git a/src/plugins/conditionWidget/components/ConditionWidget.vue b/src/plugins/conditionWidget/components/ConditionWidget.vue
index 16ae496174d..1d07e629b8e 100644
--- a/src/plugins/conditionWidget/components/ConditionWidget.vue
+++ b/src/plugins/conditionWidget/components/ConditionWidget.vue
@@ -1,61 +1,134 @@
-/*****************************************************************************
-* Open MCT, Copyright (c) 2014-2021, United States Government
-* as represented by the Administrator of the National Aeronautics and Space
-* Administration. All rights reserved.
-*
-* Open MCT is licensed under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-* http://www.apache.org/licenses/LICENSE-2.0.
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-* License for the specific language governing permissions and limitations
-* under the License.
-*
-* Open MCT includes source code licensed under additional open source
-* licenses. See the Open Source Licenses file (LICENSES.md) included with
-* this source code distribution or the Licensing information page available
-* at runtime from the About dialog for additional information.
-*****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 
 <template>
-<component :is="urlDefined ? 'a' : 'span'"
-           class="c-condition-widget u-style-receiver js-style-receiver"
-           :href="urlDefined ? internalDomainObject.url : null"
->
-    <div class="c-condition-widget__label">
-        {{ internalDomainObject.label }}
-    </div>
-</component>
+  <div
+    ref="conditionWidgetElement"
+    class="c-condition-widget u-style-receiver js-style-receiver"
+    @mouseover.ctrl="showToolTip"
+    @mouseleave="hideToolTip"
+  >
+    <component :is="urlDefined ? 'a' : 'div'" class="c-condition-widget__label-wrapper" :href="url">
+      <div class="c-condition-widget__label">{{ label }}</div>
+    </component>
+  </div>
 </template>
 
 <script>
+import { sanitizeUrl } from '@braintree/sanitize-url';
+
+import tooltipHelpers from '../../../api/tooltips/tooltipMixins.js';
+
 export default {
-    inject: ['openmct', 'domainObject'],
-    data: function () {
-        return {
-            internalDomainObject: this.domainObject
-        };
+  mixins: [tooltipHelpers],
+  inject: ['openmct', 'domainObject'],
+  data: function () {
+    return {
+      conditionalLabel: ''
+    };
+  },
+  computed: {
+    urlDefined() {
+      return this.domainObject.url?.length > 0;
     },
-    computed: {
-        urlDefined() {
-            return this.internalDomainObject.url && this.internalDomainObject.url.length > 0;
-        }
+    url() {
+      return this.urlDefined ? sanitizeUrl(this.domainObject.url) : null;
     },
-    mounted() {
-        this.unlisten = this.openmct.objects.observe(this.internalDomainObject, '*', this.updateInternalDomainObject);
+    useConditionSetOutputAsLabel() {
+      return (
+        this.conditionSetIdentifier && this.domainObject.configuration.useConditionSetOutputAsLabel
+      );
     },
-    beforeDestroy() {
-        if (this.unlisten) {
-            this.unlisten();
-        }
+    conditionSetIdentifier() {
+      return this.domainObject.configuration?.objectStyles?.conditionSetIdentifier;
     },
-    methods: {
-        updateInternalDomainObject(domainObject) {
-            this.internalDomainObject = domainObject;
+    label() {
+      return this.useConditionSetOutputAsLabel ? this.conditionalLabel : this.domainObject.label;
+    }
+  },
+  watch: {
+    conditionSetIdentifier: {
+      handler(newValue, oldValue) {
+        if (!oldValue || !newValue || !this.openmct.objects.areIdsEqual(newValue, oldValue)) {
+          return;
         }
+
+        this.listenToConditionSetChanges();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    if (this.domainObject) {
+      this.listenToConditionSetChanges();
+    }
+  },
+  unmounted() {
+    this.stopListeningToConditionSetChanges();
+  },
+  methods: {
+    async listenToConditionSetChanges() {
+      if (!this.conditionSetIdentifier) {
+        return;
+      }
+
+      const conditionSetDomainObject = await this.openmct.objects.get(this.conditionSetIdentifier);
+      this.stopListeningToConditionSetChanges();
+
+      if (!conditionSetDomainObject) {
+        this.openmct.notifications.alert('Unable to find condition set');
+      }
+
+      this.telemetryCollection = this.openmct.telemetry.requestCollection(
+        conditionSetDomainObject,
+        {
+          size: 1,
+          strategy: 'latest'
+        }
+      );
+
+      this.telemetryCollection.on('add', this.updateConditionLabel, this);
+      this.telemetryCollection.load();
+    },
+    stopListeningToConditionSetChanges() {
+      if (this.telemetryCollection) {
+        this.telemetryCollection.off('add', this.updateConditionLabel, this);
+        this.telemetryCollection.destroy();
+        this.telemetryCollection = null;
+      }
+    },
+    updateConditionLabel([latestDatum]) {
+      if (!this.conditionSetIdentifier) {
+        this.stopListeningToConditionSetChanges();
+
+        return;
+      }
+
+      this.conditionalLabel = latestDatum.output || '';
+    },
+    async showToolTip() {
+      const { BELOW } = this.openmct.tooltips.TOOLTIP_LOCATIONS;
+      this.buildToolTip(await this.getObjectPath(), BELOW, 'conditionWidgetElement');
     }
+  }
 };
 </script>
diff --git a/src/plugins/conditionWidget/components/condition-widget.scss b/src/plugins/conditionWidget/components/condition-widget.scss
index 2c94b13593f..18062169018 100644
--- a/src/plugins/conditionWidget/components/condition-widget.scss
+++ b/src/plugins/conditionWidget/components/condition-widget.scss
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,40 +21,59 @@
  *****************************************************************************/
 
 .c-condition-widget {
-    $shdwSize: 3px;
-    @include userSelectNone();
-    background-color: rgba($colorBodyFg, 0.1); // Give a little presence if the user hasn't defined a fill color
-    border-radius: $basicCr;
-    border: 1px solid transparent;
-    display: inline-block;
-    padding: $interiorMarginLg $interiorMarginLg * 2;
+  $shdwSize: 3px;
+  @include userSelectNone();
+  background-color: rgba(
+    $colorBodyFg,
+    0.1
+  ); // Give a little presence if the user hasn't defined a fill color
+  border-radius: $basicCr;
+  border: 1px solid transparent;
+  display: block;
+  max-width: max-content;
+
+  a {
+    display: block;
+    color: inherit;
+  }
 }
 
-a.c-condition-widget {
-    // Widget is conditionally made into a <a> when URL property has been defined
-    cursor: pointer !important;
-    pointer-events: inherit;
+.c-condition-widget__label {
+  // Either a <div> or an <a> tag
+  padding: $interiorMargin $interiorMargin * 1.5;
+  text-align: center;
+  white-space: normal;
 }
 
 // Make Condition Widget expand when in a hidden frame Layout context
 // For both static and Flexible Layouts
-.c-so-view--no-frame > .c-so-view__object-view > .c-condition-widget {
+.c-so-view--conditionWidget.c-so-view--no-frame {
+  .c-condition-widget {
     @include abs();
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
+    max-width: unset;
+
+    &__label-wrapper {
+      @include abs();
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .c-so-view__frame-controls {
+    display: none;
+  }
 }
 
 // Add some margin when a Condition Widget is in a Flexible Layout
 .c-fl .c-so-view--no-frame .c-condition-widget {
-    @include abs(1px);
+  @include abs(1px);
 }
 
 // When the widget is in the main view, center it in the space
-.l-shell__main-container > .c-condition-widget {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+.l-shell__main-container > * > .c-condition-widget {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
diff --git a/src/plugins/conditionWidget/plugin.js b/src/plugins/conditionWidget/plugin.js
index 9b9440aed54..0a22610f2b6 100644
--- a/src/plugins/conditionWidget/plugin.js
+++ b/src/plugins/conditionWidget/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -23,36 +23,39 @@
 import ConditionWidgetViewProvider from './ConditionWidgetViewProvider.js';
 
 export default function plugin() {
-    return function install(openmct) {
-        openmct.objectViews.addProvider(new ConditionWidgetViewProvider(openmct));
+  return function install(openmct) {
+    openmct.objectViews.addProvider(new ConditionWidgetViewProvider(openmct));
 
-        openmct.types.addType('conditionWidget', {
-            name: "Condition Widget",
-            description: "A button that can be used on its own, or dynamically styled with a Condition Set.",
-            creatable: true,
-            cssClass: 'icon-condition-widget',
-            initialize(domainObject) {
-                domainObject.label = 'Condition Widget';
-            },
-            form: [
-                {
-                    "key": "label",
-                    "name": "Label",
-                    "control": "textfield",
-                    property: [
-                        "label"
-                    ],
-                    "required": true,
-                    "cssClass": "l-input"
-                },
-                {
-                    "key": "url",
-                    "name": "URL",
-                    "control": "textfield",
-                    "required": false,
-                    "cssClass": "l-input-lg"
-                }
-            ]
-        });
-    };
+    openmct.types.addType('conditionWidget', {
+      key: 'conditionWidget',
+      name: 'Condition Widget',
+      description:
+        'A button that can be used on its own, or dynamically styled with a Condition Set.',
+      creatable: true,
+      cssClass: 'icon-condition-widget',
+      initialize(domainObject) {
+        domainObject.configuration = {};
+        domainObject.label = 'Condition Widget';
+        domainObject.conditionalLabel = '';
+        domainObject.url = '';
+      },
+      form: [
+        {
+          key: 'label',
+          name: 'Label',
+          control: 'textfield',
+          property: ['label'],
+          required: true,
+          cssClass: 'l-input'
+        },
+        {
+          key: 'url',
+          name: 'URL',
+          control: 'textfield',
+          required: false,
+          cssClass: 'l-input-lg'
+        }
+      ]
+    });
+  };
 }
diff --git a/src/plugins/conditionWidget/pluginSpec.js b/src/plugins/conditionWidget/pluginSpec.js
new file mode 100644
index 00000000000..a4b2bfedb55
--- /dev/null
+++ b/src/plugins/conditionWidget/pluginSpec.js
@@ -0,0 +1,203 @@
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+import { nextTick } from 'vue';
+
+import ConditionWidgetPlugin from './plugin.js';
+
+describe('the plugin', function () {
+  const CONDITION_WIDGET_KEY = 'conditionWidget';
+  let objectDef;
+  let element;
+  let child;
+  let openmct;
+  let mockConditionObjectDefinition;
+  let mockConditionObject;
+  let mockConditionObjectPath;
+
+  beforeEach((done) => {
+    mockConditionObjectPath = [
+      {
+        name: 'mock folder',
+        type: 'fake-folder',
+        identifier: {
+          key: 'mock-folder',
+          namespace: ''
+        }
+      },
+      {
+        name: 'mock parent folder',
+        type: 'conditionWidget',
+        identifier: {
+          key: 'mock-parent-folder',
+          namespace: ''
+        }
+      }
+    ];
+
+    mockConditionObjectDefinition = {
+      name: 'Condition Widget',
+      key: 'conditionWidget',
+      creatable: true
+    };
+
+    mockConditionObject = {
+      conditionWidget: {
+        identifier: {
+          namespace: '',
+          key: 'condition-widget-object'
+        },
+        url: 'https://nasa.github.io/openmct/',
+        label: 'Foo Widget',
+        type: 'conditionWidget',
+        composition: []
+      },
+      telemetry: {
+        identifier: {
+          namespace: '',
+          key: 'telemetry-object'
+        },
+        type: 'test-telemetry-object',
+        name: 'Test Telemetry Object',
+        telemetry: {
+          values: [
+            {
+              key: 'name',
+              name: 'Name',
+              format: 'string'
+            },
+            {
+              key: 'utc',
+              name: 'Time',
+              format: 'utc',
+              hints: {
+                domain: 1
+              }
+            },
+            {
+              name: 'Some attribute 1',
+              key: 'some-key-1',
+              hints: {
+                range: 1
+              }
+            },
+            {
+              name: 'Some attribute 2',
+              key: 'some-key-2'
+            }
+          ]
+        }
+      }
+    };
+
+    const timeSystem = {
+      timeSystemKey: 'utc',
+      bounds: {
+        start: 1597160002854,
+        end: 1597181232854
+      }
+    };
+
+    openmct = createOpenMct(timeSystem);
+    openmct.install(new ConditionWidgetPlugin());
+
+    objectDef = openmct.types.get('conditionWidget').definition;
+
+    element = document.createElement('div');
+    element.style.width = '640px';
+    element.style.height = '480px';
+    child = document.createElement('div');
+    child.style.width = '640px';
+    child.style.height = '480px';
+    element.appendChild(child);
+
+    openmct.on('start', done);
+    openmct.startHeadless();
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  it('defines a conditionWidget object type with the correct key', () => {
+    expect(objectDef.key).toEqual(mockConditionObjectDefinition.key);
+  });
+
+  describe('the conditionWidget object', () => {
+    it('is creatable', () => {
+      expect(objectDef.creatable).toEqual(mockConditionObjectDefinition.creatable);
+    });
+  });
+
+  describe('the view', () => {
+    let conditionWidgetView;
+    let testViewObject;
+
+    beforeEach(() => {
+      testViewObject = {
+        id: 'test-object',
+        identifier: {
+          key: 'test-object',
+          namespace: ''
+        },
+        type: 'conditionWidget'
+      };
+
+      const applicableViews = openmct.objectViews.get(testViewObject, mockConditionObjectPath);
+      conditionWidgetView = applicableViews.find(
+        (viewProvider) => viewProvider.key === 'conditionWidget'
+      );
+      let view = conditionWidgetView.view(testViewObject, element);
+      view.show(child, true);
+
+      return nextTick();
+    });
+
+    it('provides a view', () => {
+      expect(conditionWidgetView).toBeDefined();
+    });
+  });
+
+  it('should have a view provider for condition widget objects', () => {
+    const applicableViews = openmct.objectViews.get(mockConditionObject[CONDITION_WIDGET_KEY], []);
+
+    const conditionWidgetViewProvider = applicableViews.find(
+      (viewProvider) => viewProvider.key === CONDITION_WIDGET_KEY
+    );
+
+    expect(applicableViews.length).toEqual(1);
+    expect(conditionWidgetViewProvider).toBeDefined();
+  });
+
+  it('should render a view with a URL and label', async () => {
+    const urlParent = document.createElement('div');
+    const urlChild = document.createElement('div');
+    urlParent.appendChild(urlChild);
+
+    const applicableViews = openmct.objectViews.get(mockConditionObject[CONDITION_WIDGET_KEY], []);
+
+    const conditionWidgetViewProvider = applicableViews.find(
+      (viewProvider) => viewProvider.key === CONDITION_WIDGET_KEY
+    );
+
+    const conditionWidgetView = conditionWidgetViewProvider.view(
+      mockConditionObject[CONDITION_WIDGET_KEY],
+      [mockConditionObject[CONDITION_WIDGET_KEY]]
+    );
+    conditionWidgetView.show(urlChild);
+
+    await nextTick();
+
+    const domainUrl = mockConditionObject[CONDITION_WIDGET_KEY].url;
+    expect(urlParent.innerHTML).toContain(
+      `<a class="c-condition-widget__label-wrapper" href="${domainUrl}"`
+    );
+
+    const conditionWidgetRender = urlParent.querySelector('.c-condition-widget');
+    expect(conditionWidgetRender).toBeDefined();
+    expect(conditionWidgetRender.innerHTML).toContain('<div class="c-condition-widget__label">');
+
+    const conditionWidgetLabel = conditionWidgetRender.querySelector('.c-condition-widget__label');
+    expect(conditionWidgetLabel).toBeDefined();
+    const domainLabel = mockConditionObject[CONDITION_WIDGET_KEY].label;
+    expect(conditionWidgetLabel.textContent).toContain(domainLabel);
+  });
+});
diff --git a/src/plugins/defaultRootName/plugin.js b/src/plugins/defaultRootName/plugin.js
index a8edf2eeb4b..0b1e7d85427 100644
--- a/src/plugins/defaultRootName/plugin.js
+++ b/src/plugins/defaultRootName/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -22,8 +22,8 @@
 import RootObjectProvider from '../../api/objects/RootObjectProvider.js';
 
 export default function (name) {
-    return function (openmct) {
-        let rootObjectProvider = new RootObjectProvider();
-        rootObjectProvider.updateName(name);
-    };
+  return function (openmct) {
+    let rootObjectProvider = new RootObjectProvider();
+    rootObjectProvider.updateName(name);
+  };
 }
diff --git a/src/plugins/defaultRootName/pluginSpec.js b/src/plugins/defaultRootName/pluginSpec.js
index 420c4baf9e7..225627c8346 100644
--- a/src/plugins/defaultRootName/pluginSpec.js
+++ b/src/plugins/defaultRootName/pluginSpec.js
@@ -1,15 +1,15 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
  * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
+ * 'License'); you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  * http://www.apache.org/licenses/LICENSE-2.0.
  *
  * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * distributed under the License is distributed on an 'AS IS' BASIS, WITHOUT
  * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  * License for the specific language governing permissions and limitations
  * under the License.
@@ -19,81 +19,54 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import {
-    createOpenMct,
-    resetApplicationState
-} from 'utils/testing';
+import { createOpenMct, resetApplicationState } from 'utils/testing';
 
-xdescribe("the plugin", () => {
-    let openmct;
-    let compositionAPI;
-    let newFolderAction;
-    let mockObjectPath;
-    let mockDialogService;
-    let mockComposition;
-    let mockPromise;
-    let newFolderName = 'New Folder';
+const OLD_ROOT_NAME = 'Open MCT';
+const NEW_ROOT_NAME = 'not_a_root';
 
-    beforeEach((done) => {
-        openmct = createOpenMct();
+let openmct;
 
-        openmct.on('start', done);
-        openmct.startHeadless();
+describe('the DefaultRootNamePlugin', () => {
+  describe('without DefaultRootNamePlugin', () => {
+    beforeEach((done) => {
+      openmct = createOpenMct();
 
-        newFolderAction = openmct.contextMenu._allActions.filter(action => {
-            return action.key === 'newFolder';
-        })[0];
+      openmct.on('start', done);
+      openmct.startHeadless();
     });
 
     afterEach(() => {
-        return resetApplicationState(openmct);
-    });
-
-    it('installs the new folder action', () => {
-        expect(newFolderAction).toBeDefined();
+      return resetApplicationState(openmct);
     });
 
-    describe('when invoked', () => {
-
-        beforeEach((done) => {
-            compositionAPI = openmct.composition;
-            mockObjectPath = [{
-                name: 'mock folder',
-                type: 'folder',
-                identifier: {
-                    key: 'mock-folder',
-                    namespace: ''
-                }
-            }];
-            mockPromise = {
-                then: (callback) => {
-                    callback({name: newFolderName});
-                    done();
-                }
-            };
-
-            mockDialogService = jasmine.createSpyObj('dialogService', ['getUserInput']);
-            mockComposition = jasmine.createSpyObj('composition', ['add']);
+    it('does not changes root name', (done) => {
+      openmct.objects.getRoot().then((object) => {
+        expect(object.name).toEqual(OLD_ROOT_NAME);
 
-            mockDialogService.getUserInput.and.returnValue(mockPromise);
+        done();
+      });
+    });
+  });
 
-            spyOn(openmct.$injector, 'get').and.returnValue(mockDialogService);
-            spyOn(compositionAPI, 'get').and.returnValue(mockComposition);
-            spyOn(openmct.objects, 'mutate');
+  describe('with DefaultRootNamePlugin', () => {
+    beforeEach((done) => {
+      openmct = createOpenMct();
 
-            newFolderAction.invoke(mockObjectPath);
-        });
+      openmct.install(openmct.plugins.DefaultRootName(NEW_ROOT_NAME));
+      openmct.on('start', done);
+      openmct.startHeadless();
+    });
 
-        it('gets user input for folder name', () => {
-            expect(mockDialogService.getUserInput).toHaveBeenCalled();
-        });
+    afterEach(() => {
+      return resetApplicationState(openmct);
+    });
 
-        it('creates a new folder object', () => {
-            expect(openmct.objects.mutate).toHaveBeenCalled();
-        });
+    it('changes root name', (done) => {
+      openmct.objects.getRoot().then((object) => {
+        expect(object.name).toEqual(NEW_ROOT_NAME);
 
-        it('adds new folder object to parent composition', () => {
-            expect(mockComposition.add).toHaveBeenCalled();
-        });
+        done();
+      });
     });
+  });
 });
diff --git a/src/plugins/displayLayout/AlphanumericFormatViewProvider.js b/src/plugins/displayLayout/AlphanumericFormatViewProvider.js
index b96f272c3c1..0a35317a712 100644
--- a/src/plugins/displayLayout/AlphanumericFormatViewProvider.js
+++ b/src/plugins/displayLayout/AlphanumericFormatViewProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,78 +20,90 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import AlphanumericFormat from './components/AlphanumericFormat.vue';
+import mount from 'utils/mount';
 
-import Vue from 'vue';
+import AlphanumericFormat from './components/AlphanumericFormat.vue';
 
 class AlphanumericFormatView {
-    constructor(openmct, domainObject, objectPath) {
-        this.openmct = openmct;
-        this.domainObject = domainObject;
-        this.objectPath = objectPath;
-        this.component = undefined;
-    }
+  constructor(openmct, domainObject, objectPath) {
+    this.openmct = openmct;
+    this.domainObject = domainObject;
+    this.objectPath = objectPath;
+    this._destroy = null;
+    this.component = null;
+  }
+
+  show(element) {
+    const { vNode, destroy } = mount(
+      {
+        el: element,
+        components: {
+          AlphanumericFormat
+        },
+        provide: {
+          openmct: this.openmct,
+          objectPath: this.objectPath,
+          currentView: this
+        },
+        template: '<AlphanumericFormat ref="alphanumericFormat" />'
+      },
+      {
+        app: this.openmct.app,
+        element
+      }
+    );
+    this.component = vNode.componentInstance;
+    this._destroy = destroy;
+  }
 
-    show(element) {
-        this.component = new Vue({
-            el: element,
-            name: 'AlphanumericFormat',
-            components: {
-                AlphanumericFormat
-            },
-            provide: {
-                openmct: this.openmct,
-                objectPath: this.objectPath,
-                currentView: this
-            },
-            template: '<alphanumeric-format ref="alphanumericFormat"></alphanumeric-format>'
-        });
+  getViewContext() {
+    if (this.component) {
+      return {};
     }
 
-    getViewContext() {
-        if (this.component) {
-            return {};
-        }
+    return this.component.$refs.alphanumericFormat.getViewContext();
+  }
 
-        return this.component.$refs.alphanumericFormat.getViewContext();
-    }
+  priority() {
+    return 1;
+  }
 
-    destroy() {
-        this.component.$destroy();
-        this.component = undefined;
+  destroy() {
+    if (this._destroy) {
+      this._destroy();
     }
+  }
 }
 
 export default function AlphanumericFormatViewProvider(openmct, options) {
-    function isTelemetryObject(selectionPath) {
-        let selectedObject = selectionPath[0].context.item;
-        let parentObject = selectionPath[1].context.item;
-        let selectedLayoutItem = selectionPath[0].context.layoutItem;
+  function isTelemetryObject(selectionPath) {
+    let selectedObject = selectionPath[0].context.item;
+    let parentObject = selectionPath[1].context.item;
+    let selectedLayoutItem = selectionPath[0].context.layoutItem;
 
-        return parentObject
-            && parentObject.type === 'layout'
-            && selectedObject
-            && selectedLayoutItem
-            && selectedLayoutItem.type === 'telemetry-view'
-            && openmct.telemetry.isTelemetryObject(selectedObject)
-            && !options.showAsView.includes(selectedObject.type);
-    }
+    return (
+      parentObject &&
+      parentObject.type === 'layout' &&
+      selectedObject &&
+      selectedLayoutItem &&
+      selectedLayoutItem.type === 'telemetry-view' &&
+      openmct.telemetry.isTelemetryObject(selectedObject) &&
+      !options.showAsView.includes(selectedObject.type)
+    );
+  }
 
-    return {
-        key: 'alphanumeric-format',
-        name: 'Alphanumeric Format',
-        canView: function (selection) {
-            if (selection.length === 0 || selection[0].length === 1) {
-                return false;
-            }
+  return {
+    key: 'alphanumeric-format',
+    name: 'Format',
+    canView: function (selection) {
+      if (selection.length === 0 || selection[0].length === 1) {
+        return false;
+      }
 
-            return selection.every(isTelemetryObject);
-        },
-        view: function (domainObject, objectPath) {
-            return new AlphanumericFormatView(openmct, domainObject, objectPath);
-        },
-        priority: function () {
-            return 1;
-        }
-    };
+      return selection.every(isTelemetryObject);
+    },
+    view: function (domainObject, objectPath) {
+      return new AlphanumericFormatView(openmct, domainObject, objectPath);
+    }
+  };
 }
diff --git a/src/plugins/displayLayout/CustomStringFormatter.js b/src/plugins/displayLayout/CustomStringFormatter.js
index 445cfd1edf9..f25e7041fdb 100644
--- a/src/plugins/displayLayout/CustomStringFormatter.js
+++ b/src/plugins/displayLayout/CustomStringFormatter.js
@@ -1,38 +1,38 @@
-import printj from 'printj';
+import { sprintf } from 'printj';
 
 export default class CustomStringFormatter {
-    constructor(openmct, valueMetadata, itemFormat) {
-        this.openmct = openmct;
+  constructor(openmct, valueMetadata, itemFormat) {
+    this.openmct = openmct;
 
-        this.itemFormat = itemFormat;
-        this.valueMetadata = valueMetadata;
-    }
+    this.itemFormat = itemFormat;
+    this.valueMetadata = valueMetadata;
+  }
 
-    format(datum) {
-        if (!this.itemFormat) {
-            return;
-        }
+  format(datum) {
+    if (!this.itemFormat) {
+      return;
+    }
 
-        if (!this.itemFormat.startsWith('&')) {
-            return printj.sprintf(this.itemFormat, datum[this.valueMetadata.key]);
-        }
+    if (!this.itemFormat.startsWith('&')) {
+      return sprintf(this.itemFormat, datum[this.valueMetadata.key]);
+    }
 
-        try {
-            const key = this.itemFormat.slice(1);
-            const customFormatter = this.openmct.telemetry.getFormatter(key);
-            if (!customFormatter) {
-                throw new Error('Custom Formatter not found');
-            }
+    try {
+      const key = this.itemFormat.slice(1);
+      const customFormatter = this.openmct.telemetry.getFormatter(key);
+      if (!customFormatter) {
+        throw new Error('Custom Formatter not found');
+      }
 
-            return customFormatter.format(datum[this.valueMetadata.key]);
-        } catch (e) {
-            console.error(e);
+      return customFormatter.format(datum[this.valueMetadata.key]);
+    } catch (e) {
+      console.error(e);
 
-            return datum[this.valueMetadata.key];
-        }
+      return datum[this.valueMetadata.key];
     }
+  }
 
-    setFormat(itemFormat) {
-        this.itemFormat = itemFormat;
-    }
+  setFormat(itemFormat) {
+    this.itemFormat = itemFormat;
+  }
 }
diff --git a/src/plugins/displayLayout/CustomStringFormatterSpec.js b/src/plugins/displayLayout/CustomStringFormatterSpec.js
index bd19078fb97..a346d6b0f3d 100644
--- a/src/plugins/displayLayout/CustomStringFormatterSpec.js
+++ b/src/plugins/displayLayout/CustomStringFormatterSpec.js
@@ -1,82 +1,82 @@
-import CustomStringFormatter from './CustomStringFormatter';
 import { createOpenMct, resetApplicationState } from 'utils/testing';
 
+import CustomStringFormatter from './CustomStringFormatter.js';
+
 const CUSTOM_FORMATS = [
-    {
-        key: 'sclk',
-        format: (value) => 2 * value
-    },
-    {
-        key: 'lts',
-        format: (value) => 3 * value
-    }
+  {
+    key: 'sclk',
+    format: (value) => 2 * value
+  },
+  {
+    key: 'lts',
+    format: (value) => 3 * value
+  }
 ];
 
 const valueMetadata = {
-    key: "sin",
-    name: "Sine",
-    unit: "Hz",
-    formatString: "%0.2f",
-    hints: {
-        range: 1,
-        priority: 3
-    },
-    source: "sin"
+  key: 'sin',
+  name: 'Sine',
+  unit: 'Hz',
+  formatString: '%0.2f',
+  hints: {
+    range: 1,
+    priority: 3
+  },
+  source: 'sin'
 };
 
 const datum = {
-    name: "1 Sine Wave Generator",
-    utc: 1603930354000,
-    yesterday: 1603843954000,
-    sin: 0.587785209686822,
-    cos: -0.8090170253297632
+  name: '1 Sine Wave Generator',
+  utc: 1603930354000,
+  yesterday: 1603843954000,
+  sin: 0.587785209686822,
+  cos: -0.8090170253297632
 };
 
 describe('CustomStringFormatter', function () {
-    let element;
-    let child;
-    let openmct;
-    let customStringFormatter;
-
-    beforeEach((done) => {
-        openmct = createOpenMct();
-
-        element = document.createElement('div');
-        child = document.createElement('div');
-        element.appendChild(child);
-        CUSTOM_FORMATS.forEach(openmct.telemetry.addFormat.bind({openmct}));
-        openmct.on('start', done);
-        openmct.startHeadless();
+  let element;
+  let child;
+  let openmct;
+  let customStringFormatter;
 
-        spyOn(openmct.telemetry, 'getFormatter');
-        openmct.telemetry.getFormatter.and.callFake((key) => CUSTOM_FORMATS.find(d => d.key === key));
+  beforeEach((done) => {
+    openmct = createOpenMct();
 
-        customStringFormatter = new CustomStringFormatter(openmct, valueMetadata);
+    element = document.createElement('div');
+    child = document.createElement('div');
+    element.appendChild(child);
+    CUSTOM_FORMATS.forEach((formatter) => {
+      openmct.telemetry.addFormat(formatter);
     });
+    openmct.on('start', done);
+    openmct.startHeadless();
 
-    afterEach(() => {
-        return resetApplicationState(openmct);
-    });
+    customStringFormatter = new CustomStringFormatter(openmct, valueMetadata);
+  });
 
-    it('adds custom format sclk', () => {
-        const format = openmct.telemetry.getFormatter('sclk');
-        expect(format.key).toEqual('sclk');
-    });
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
 
-    it('adds custom format lts', () => {
-        const format = openmct.telemetry.getFormatter('lts');
-        expect(format.key).toEqual('lts');
-    });
+  it('adds custom format sclk', () => {
+    const format = openmct.telemetry.getFormatter('sclk');
+    expect(format.key).toEqual('sclk');
+  });
 
-    it('returns correct value for custom format sclk', () => {
-        customStringFormatter.setFormat('&sclk');
-        const value = customStringFormatter.format(datum, valueMetadata);
-        expect(datum.sin * 2).toEqual(value);
-    });
+  it('adds custom format lts', () => {
+    const format = openmct.telemetry.getFormatter('lts');
+    expect(format.key).toEqual('lts');
+  });
 
-    it('returns correct value for custom format lts', () => {
-        customStringFormatter.setFormat('&lts');
-        const value = customStringFormatter.format(datum, valueMetadata);
-        expect(datum.sin * 3).toEqual(value);
-    });
+  it('returns correct value for custom format sclk', () => {
+    customStringFormatter.setFormat('&sclk');
+    const value = customStringFormatter.format(datum, valueMetadata);
+    expect(datum.sin * 2).toEqual(value);
+  });
+
+  it('returns correct value for custom format lts', () => {
+    customStringFormatter.setFormat('&lts');
+    const value = customStringFormatter.format(datum, valueMetadata);
+    expect(datum.sin * 3).toEqual(value);
+  });
 });
diff --git a/src/plugins/displayLayout/DisplayLayoutToolbar.js b/src/plugins/displayLayout/DisplayLayoutToolbar.js
index cb204bf7245..dc1a882a238 100644
--- a/src/plugins/displayLayout/DisplayLayoutToolbar.js
+++ b/src/plugins/displayLayout/DisplayLayoutToolbar.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,802 +20,901 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(['lodash'], function (_) {
-    function DisplayLayoutToolbar(openmct) {
-        return {
-            name: "Display Layout Toolbar",
-            key: "layout",
-            description: "A toolbar for objects inside a display layout.",
-            forSelection: function (selection) {
-                if (!selection || selection.length === 0) {
-                    return false;
-                }
-
-                let selectionPath = selection[0];
-                let selectedObject = selectionPath[0];
-                let selectedParent = selectionPath[1];
-
-                // Apply the layout toolbar if the selected object is inside a layout, or the main layout is selected.
-                return (selectedParent && selectedParent.context.item && selectedParent.context.item.type === 'layout')
-                    || (selectedObject.context.item && selectedObject.context.item.type === 'layout');
+import _ from 'lodash';
+
+const CONTEXT_ACTION = 'contextAction';
+const CONTEXT_ACTIONS = Object.freeze({
+  ADD_ELEMENT: 'addElement',
+  REMOVE_ITEM: 'removeItem',
+  DUPLICATE_ITEM: 'duplicateItem',
+  ORDER_ITEM: 'orderItem',
+  SWITCH_VIEW_TYPE: 'switchViewType',
+  MERGE_MULTIPLE_TELEMETRY_VIEWS: 'mergeMultipleTelemetryViews',
+  MERGE_MULTIPLE_OVERLAY_PLOTS: 'mergeMultipleOverlayPlots',
+  TOGGLE_GRID: 'toggleGrid'
+});
+
+const DIALOG_FORM = {
+  text: {
+    title: 'Text Element Properties',
+    sections: [
+      {
+        rows: [
+          {
+            key: 'text',
+            control: 'textfield',
+            name: 'Text',
+            required: true,
+            cssClass: 'l-input-lg'
+          }
+        ]
+      }
+    ]
+  },
+  image: {
+    title: 'Image Properties',
+    sections: [
+      {
+        rows: [
+          {
+            key: 'url',
+            control: 'textfield',
+            name: 'Image URL',
+            cssClass: 'l-input-lg',
+            required: true
+          }
+        ]
+      }
+    ]
+  }
+};
+const VIEW_TYPES = {
+  'telemetry-view': {
+    value: 'telemetry-view',
+    name: 'Alphanumeric',
+    class: 'icon-alphanumeric'
+  },
+  'telemetry.plot.overlay': {
+    value: 'telemetry.plot.overlay',
+    name: 'Overlay Plot',
+    class: 'icon-plot-overlay'
+  },
+  'telemetry.plot.stacked': {
+    value: 'telemetry.plot.stacked',
+    name: 'Stacked Plot',
+    class: 'icon-plot-stacked'
+  },
+  table: {
+    value: 'table',
+    name: 'Table',
+    class: 'icon-tabular-scrolling'
+  }
+};
+const APPLICABLE_VIEWS = {
+  'telemetry-view': [
+    VIEW_TYPES['telemetry.plot.overlay'],
+    VIEW_TYPES['telemetry.plot.stacked'],
+    VIEW_TYPES.table
+  ],
+  'telemetry.plot.overlay': [
+    VIEW_TYPES['telemetry.plot.stacked'],
+    VIEW_TYPES.table,
+    VIEW_TYPES['telemetry-view']
+  ],
+  'telemetry.plot.stacked': [
+    VIEW_TYPES['telemetry.plot.overlay'],
+    VIEW_TYPES.table,
+    VIEW_TYPES['telemetry-view']
+  ],
+  table: [
+    VIEW_TYPES['telemetry.plot.overlay'],
+    VIEW_TYPES['telemetry.plot.stacked'],
+    VIEW_TYPES['telemetry-view']
+  ],
+  'telemetry-view-multi': [
+    VIEW_TYPES['telemetry.plot.overlay'],
+    VIEW_TYPES['telemetry.plot.stacked'],
+    VIEW_TYPES.table
+  ],
+  'telemetry.plot.overlay-multi': [VIEW_TYPES['telemetry.plot.stacked']]
+};
+
+export default class DisplayLayoutToolbar {
+  #openmct;
+
+  constructor(openmct) {
+    this.#openmct = openmct;
+    this.name = 'Display Layout Toolbar';
+    this.key = 'layout';
+    this.description = 'A toolbar for objects inside a display layout.';
+  }
+
+  forSelection(selection) {
+    if (!selection || selection.length === 0) {
+      return false;
+    }
+
+    let selectionPath = selection[0];
+    let selectedObject = selectionPath[0];
+    let selectedParent = selectionPath[1];
+
+    // Apply the layout toolbar if the selected object is inside a layout, or the main layout is selected.
+    return (
+      (selectedParent &&
+        selectedParent.context.item &&
+        selectedParent.context.item.type === 'layout') ||
+      (selectedObject.context.item && selectedObject.context.item.type === 'layout')
+    );
+  }
+
+  #getPath(selectionPath) {
+    return `configuration.items[${selectionPath[0].context.index}]`;
+  }
+
+  #getAllOfType(selection, specificType) {
+    return selection.filter((selectionPath) => {
+      let type = selectionPath[0].context.layoutItem.type;
+
+      return type === specificType;
+    });
+  }
+
+  #getAllTypes(selection) {
+    return selection.filter((selectionPath) => {
+      let type = selectionPath[0].context.layoutItem.type;
+
+      return (
+        type === 'text-view' ||
+        type === 'telemetry-view' ||
+        type === 'box-view' ||
+        type === 'ellipse-view' ||
+        type === 'image-view' ||
+        type === 'line-view' ||
+        type === 'subobject-view'
+      );
+    });
+  }
+
+  #getAddButton(selection, selectionPath) {
+    if (selection.length === 1) {
+      selectionPath = selectionPath || selection[0];
+      const domainObject = selectionPath[0].context.item;
+      const keyString = this.#openmct.objects.makeKeyString(domainObject.identifier);
+
+      return {
+        control: 'menu',
+        domainObject,
+        method: (option) => {
+          let name = option.name.toLowerCase();
+          let form = DIALOG_FORM[name];
+          if (form) {
+            this.#showForm(form, name, selection);
+          } else {
+            this.#openmct.objectViews.emit(
+              `${CONTEXT_ACTION}:${keyString}`,
+              CONTEXT_ACTIONS.ADD_ELEMENT,
+              name,
+              selection
+            );
+          }
+        },
+        key: 'add',
+        icon: 'icon-plus',
+        label: 'Add Drawing Object',
+        options: [
+          {
+            name: 'Box',
+            class: 'icon-box-round-corners'
+          },
+          {
+            name: 'Ellipse',
+            class: 'icon-circle'
+          },
+          {
+            name: 'Line',
+            class: 'icon-line-horz'
+          },
+          {
+            name: 'Text',
+            class: 'icon-font'
+          },
+          {
+            name: 'Image',
+            class: 'icon-image'
+          }
+        ]
+      };
+    }
+  }
+
+  #getToggleFrameButton(selectedParent, selection) {
+    return {
+      control: 'toggle-button',
+      domainObject: selectedParent,
+      applicableSelectedItems: selection.filter(
+        (selectionPath) => selectionPath[0].context.layoutItem.type === 'subobject-view'
+      ),
+      property: (selectionPath) => {
+        return this.#getPath(selectionPath) + '.hasFrame';
+      },
+      options: [
+        {
+          value: false,
+          icon: 'icon-frame-hide',
+          title: 'Frame visible',
+          label: 'Hide frame'
+        },
+        {
+          value: true,
+          icon: 'icon-frame-show',
+          title: 'Frame hidden',
+          label: 'Show frame'
+        }
+      ]
+    };
+  }
+
+  #getRemoveButton(selectedParent, selectionPath, selection) {
+    const domainObject = selectedParent;
+    const keyString = this.#openmct.objects.makeKeyString(domainObject.identifier);
+    return {
+      control: 'button',
+      domainObject,
+      icon: 'icon-trash',
+      title: 'Delete the selected object',
+      method: () => {
+        let prompt = this.#openmct.overlays.dialog({
+          iconClass: 'alert',
+          message: `Warning! This action will remove this item from the Display Layout. Do you want to continue?`,
+          buttons: [
+            {
+              label: 'OK',
+              emphasis: 'true',
+              callback: () => {
+                this.#openmct.objectViews.emit(
+                  `${CONTEXT_ACTION}:${keyString}`,
+                  CONTEXT_ACTIONS.REMOVE_ITEM,
+                  this.#getAllTypes(selection),
+                  selection
+                );
+                prompt.dismiss();
+              }
             },
-            toolbar: function (selectedObjects) {
-                const DIALOG_FORM = {
-                    'text': {
-                        name: "Text Element Properties",
-                        sections: [
-                            {
-                                rows: [
-                                    {
-                                        key: "text",
-                                        control: "textfield",
-                                        name: "Text",
-                                        required: true
-                                    }
-                                ]
-                            }
-                        ]
-                    },
-                    'image': {
-                        name: "Image Properties",
-                        sections: [
-                            {
-                                rows: [
-                                    {
-                                        key: "url",
-                                        control: "textfield",
-                                        name: "Image URL",
-                                        "cssClass": "l-input-lg",
-                                        required: true
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                };
-                const VIEW_TYPES = {
-                    'telemetry-view': {
-                        value: 'telemetry-view',
-                        name: 'Alphanumeric',
-                        class: 'icon-alphanumeric'
-                    },
-                    'telemetry.plot.overlay': {
-                        value: 'telemetry.plot.overlay',
-                        name: 'Overlay Plot',
-                        class: "icon-plot-overlay"
-                    },
-                    'telemetry.plot.stacked': {
-                        value: "telemetry.plot.stacked",
-                        name: "Stacked Plot",
-                        class: "icon-plot-stacked"
-                    },
-                    'table': {
-                        value: 'table',
-                        name: 'Table',
-                        class: 'icon-tabular-realtime'
-                    }
-                };
-                const APPLICABLE_VIEWS = {
-                    'telemetry-view': [
-                        VIEW_TYPES['telemetry.plot.overlay'],
-                        VIEW_TYPES['telemetry.plot.stacked'],
-                        VIEW_TYPES.table
-                    ],
-                    'telemetry.plot.overlay': [
-                        VIEW_TYPES['telemetry.plot.stacked'],
-                        VIEW_TYPES.table,
-                        VIEW_TYPES['telemetry-view']
-                    ],
-                    'telemetry.plot.stacked': [
-                        VIEW_TYPES['telemetry.plot.overlay'],
-                        VIEW_TYPES.table,
-                        VIEW_TYPES['telemetry-view']
-                    ],
-                    'table': [
-                        VIEW_TYPES['telemetry.plot.overlay'],
-                        VIEW_TYPES['telemetry.plot.stacked'],
-                        VIEW_TYPES['telemetry-view']
-                    ],
-                    'telemetry-view-multi': [
-                        VIEW_TYPES['telemetry.plot.overlay'],
-                        VIEW_TYPES['telemetry.plot.stacked'],
-                        VIEW_TYPES.table
-                    ],
-                    'telemetry.plot.overlay-multi': [
-                        VIEW_TYPES['telemetry.plot.stacked']
-                    ]
-                };
-
-                function getUserInput(form) {
-                    return openmct.$injector.get('dialogService').getUserInput(form, {});
-                }
-
-                function getPath(selectionPath) {
-                    return `configuration.items[${selectionPath[0].context.index}]`;
-                }
-
-                function getAllOfType(selection, specificType) {
-                    return selection.filter(selectionPath => {
-                        let type = selectionPath[0].context.layoutItem.type;
-
-                        return type === specificType;
-                    });
-                }
-
-                function getAllTypes(selection) {
-                    return selection.filter(selectionPath => {
-                        let type = selectionPath[0].context.layoutItem.type;
-
-                        return type === 'text-view'
-                            || type === 'telemetry-view'
-                            || type === 'box-view'
-                            || type === 'image-view'
-                            || type === 'line-view'
-                            || type === 'subobject-view';
-                    });
-                }
-
-                function getAddButton(selection, selectionPath) {
-                    if (selection.length === 1) {
-                        selectionPath = selectionPath || selection[0];
-
-                        return {
-                            control: "menu",
-                            domainObject: selectionPath[0].context.item,
-                            method: function (option) {
-                                let name = option.name.toLowerCase();
-                                let form = DIALOG_FORM[name];
-                                if (form) {
-                                    getUserInput(form)
-                                        .then(element => selectionPath[0].context.addElement(name, element));
-                                } else {
-                                    selectionPath[0].context.addElement(name);
-                                }
-                            },
-                            key: "add",
-                            icon: "icon-plus",
-                            label: "Add",
-                            options: [
-                                {
-                                    "name": "Box",
-                                    "class": "icon-box-round-corners"
-                                },
-                                {
-                                    "name": "Line",
-                                    "class": "icon-line-horz"
-                                },
-                                {
-                                    "name": "Text",
-                                    "class": "icon-font"
-                                },
-                                {
-                                    "name": "Image",
-                                    "class": "icon-image"
-                                }
-                            ]
-                        };
-                    }
-                }
-
-                function getToggleFrameButton(selectedParent, selection) {
-                    return {
-                        control: "toggle-button",
-                        domainObject: selectedParent,
-                        applicableSelectedItems: selection.filter(selectionPath =>
-                            selectionPath[0].context.layoutItem.type === 'subobject-view'
-                        ),
-                        property: function (selectionPath) {
-                            return getPath(selectionPath) + ".hasFrame";
-                        },
-                        options: [
-                            {
-                                value: false,
-                                icon: 'icon-frame-show',
-                                title: "Frame visible"
-                            },
-                            {
-                                value: true,
-                                icon: 'icon-frame-hide',
-                                title: "Frame hidden"
-                            }
-                        ]
-                    };
-                }
-
-                function getRemoveButton(selectedParent, selectionPath, selection) {
-                    return {
-                        control: "button",
-                        domainObject: selectedParent,
-                        icon: "icon-trash",
-                        title: "Delete the selected object",
-                        method: function () {
-                            let removeItem = selectionPath[1].context.removeItem;
-                            let prompt = openmct.overlays.dialog({
-                                iconClass: 'alert',
-                                message: `Warning! This action will remove this item from the Display Layout. Do you want to continue?`,
-                                buttons: [
-                                    {
-                                        label: 'OK',
-                                        emphasis: 'true',
-                                        callback: function () {
-                                            removeItem(getAllTypes(selection));
-                                            prompt.dismiss();
-                                        }
-                                    },
-                                    {
-                                        label: 'Cancel',
-                                        callback: function () {
-                                            prompt.dismiss();
-                                        }
-                                    }
-                                ]
-                            });
-                        }
-                    };
-                }
-
-                function getStackOrder(selectedParent, selectionPath) {
-                    return {
-                        control: "menu",
-                        domainObject: selectedParent,
-                        icon: "icon-layers",
-                        title: "Move the selected object above or below other objects",
-                        options: [
-                            {
-                                name: "Move to Top",
-                                value: "top",
-                                class: "icon-arrow-double-up"
-                            },
-                            {
-                                name: "Move Up",
-                                value: "up",
-                                class: "icon-arrow-up"
-                            },
-                            {
-                                name: "Move Down",
-                                value: "down",
-                                class: "icon-arrow-down"
-                            },
-                            {
-                                name: "Move to Bottom",
-                                value: "bottom",
-                                class: "icon-arrow-double-down"
-                            }
-                        ],
-                        method: function (option) {
-                            selectionPath[1].context.orderItem(option.value, getAllTypes(selectedObjects));
-                        }
-                    };
-                }
-
-                function getXInput(selectedParent, selection) {
-                    if (selection.length === 1) {
-                        return {
-                            control: "input",
-                            type: "number",
-                            domainObject: selectedParent,
-                            applicableSelectedItems: getAllTypes(selection),
-                            property: function (selectionPath) {
-                                return getPath(selectionPath) + ".x";
-                            },
-                            label: "X:",
-                            title: "X position"
-                        };
-                    }
-                }
-
-                function getYInput(selectedParent, selection) {
-                    if (selection.length === 1) {
-                        return {
-                            control: "input",
-                            type: "number",
-                            domainObject: selectedParent,
-                            applicableSelectedItems: getAllTypes(selection),
-                            property: function (selectionPath) {
-                                return getPath(selectionPath) + ".y";
-                            },
-                            label: "Y:",
-                            title: "Y position"
-                        };
-                    }
-                }
-
-                function getWidthInput(selectedParent, selection) {
-                    if (selection.length === 1) {
-                        return {
-                            control: 'input',
-                            type: 'number',
-                            domainObject: selectedParent,
-                            applicableSelectedItems: getAllTypes(selection),
-                            property: function (selectionPath) {
-                                return getPath(selectionPath) + ".width";
-                            },
-                            label: 'W:',
-                            title: 'Resize object width'
-                        };
-                    }
-                }
-
-                function getHeightInput(selectedParent, selection) {
-                    if (selection.length === 1) {
-                        return {
-                            control: 'input',
-                            type: 'number',
-                            domainObject: selectedParent,
-                            applicableSelectedItems: getAllTypes(selection),
-                            property: function (selectionPath) {
-                                return getPath(selectionPath) + ".height";
-                            },
-                            label: 'H:',
-                            title: 'Resize object height'
-                        };
-                    }
-                }
-
-                function getX2Input(selectedParent, selection) {
-                    if (selection.length === 1) {
-                        return {
-                            control: "input",
-                            type: "number",
-                            domainObject: selectedParent,
-                            applicableSelectedItems: selection.filter(selectionPath => {
-                                return selectionPath[0].context.layoutItem.type === 'line-view';
-                            }),
-                            property: function (selectionPath) {
-                                return getPath(selectionPath) + ".x2";
-                            },
-                            label: "X2:",
-                            title: "X2 position"
-                        };
-                    }
-                }
-
-                function getY2Input(selectedParent, selection) {
-                    if (selection.length === 1) {
-                        return {
-                            control: "input",
-                            type: "number",
-                            domainObject: selectedParent,
-                            applicableSelectedItems: selection.filter(selectionPath => {
-                                return selectionPath[0].context.layoutItem.type === 'line-view';
-                            }),
-                            property: function (selectionPath) {
-                                return getPath(selectionPath) + ".y2";
-                            },
-                            label: "Y2:",
-                            title: "Y2 position"
-                        };
-                    }
-                }
-
-                function getTextButton(selectedParent, selection) {
-                    return {
-                        control: "button",
-                        domainObject: selectedParent,
-                        applicableSelectedItems: selection.filter(selectionPath => {
-                            return selectionPath[0].context.layoutItem.type === 'text-view';
-                        }),
-                        property: function (selectionPath) {
-                            return getPath(selectionPath);
-                        },
-                        icon: "icon-pencil",
-                        title: "Edit text properties",
-                        dialog: DIALOG_FORM.text
-                    };
-                }
-
-                function getTelemetryValueMenu(selectionPath, selection) {
-                    if (selection.length === 1) {
-                        return {
-                            control: "select-menu",
-                            domainObject: selectionPath[1].context.item,
-                            applicableSelectedItems: selection.filter(path => {
-                                return path[0].context.layoutItem.type === 'telemetry-view';
-                            }),
-                            property: function (path) {
-                                return getPath(path) + ".value";
-                            },
-                            title: "Set value",
-                            options: openmct.telemetry.getMetadata(selectionPath[0].context.item).values().map(value => {
-                                return {
-                                    name: value.name,
-                                    value: value.key
-                                };
-                            })
-                        };
-                    }
-                }
-
-                function getDisplayModeMenu(selectedParent, selection) {
-                    if (selection.length === 1) {
-                        return {
-                            control: "select-menu",
-                            domainObject: selectedParent,
-                            applicableSelectedItems: selection.filter(selectionPath => {
-                                return selectionPath[0].context.layoutItem.type === 'telemetry-view';
-                            }),
-                            property: function (selectionPath) {
-                                return getPath(selectionPath) + ".displayMode";
-                            },
-                            title: "Set display mode",
-                            options: [
-                                {
-                                    name: 'Label + Value',
-                                    value: 'all'
-                                },
-                                {
-                                    name: "Label only",
-                                    value: "label"
-                                },
-                                {
-                                    name: "Value only",
-                                    value: "value"
-                                }
-                            ]
-                        };
-                    }
-                }
-
-                function getDuplicateButton(selectedParent, selectionPath, selection) {
-                    return {
-                        control: "button",
-                        domainObject: selectedParent,
-                        icon: "icon-duplicate",
-                        title: "Duplicate the selected object",
-                        method: function () {
-                            let duplicateItem = selectionPath[1].context.duplicateItem;
-
-                            duplicateItem(selection);
-                        }
-                    };
-                }
-
-                function getPropertyFromPath(object, path) {
-                    let splitPath = path.split('.');
-                    let property = Object.assign({}, object);
-
-                    while (splitPath.length && property) {
-                        property = property[splitPath.shift()];
-                    }
-
-                    return property;
-                }
-
-                function areAllViews(type, path, selection) {
-                    let allTelemetry = true;
-
-                    selection.forEach(selectedItem => {
-                        let selectedItemContext = selectedItem[0].context;
-
-                        if (getPropertyFromPath(selectedItemContext, path) !== type) {
-                            allTelemetry = false;
-                        }
-                    });
-
-                    return allTelemetry;
-                }
-
-                function getToggleUnitsButton(selectedParent, selection) {
-                    let applicableItems = getAllOfType(selection, 'telemetry-view');
-                    applicableItems = unitsOnly(applicableItems);
-                    if (!applicableItems.length) {
-                        return;
-                    }
-
-                    return {
-                        control: "toggle-button",
-                        domainObject: selectedParent,
-                        applicableSelectedItems: applicableItems,
-                        property: function (selectionPath) {
-                            return getPath(selectionPath) + '.showUnits';
-                        },
-                        options: [
-                            {
-                                value: true,
-                                icon: 'icon-eye-open',
-                                title: "Show units"
-                            },
-                            {
-                                value: false,
-                                icon: 'icon-eye-disabled',
-                                title: "Hide units"
-                            }
-                        ]
-                    };
-                }
-
-                function unitsOnly(items) {
-                    let results = items.filter((item) => {
-                        let currentItem = item[0];
-                        let metadata = openmct.telemetry.getMetadata(currentItem.context.item);
-                        if (!metadata) {
-                            return false;
-                        }
-
-                        let hasUnits = metadata
-                            .valueMetadatas
-                            .filter((metadatum) => metadatum.unit)
-                            .length;
-
-                        return hasUnits > 0;
-                    });
-
-                    return results;
-                }
-
-                function getViewSwitcherMenu(selectedParent, selectionPath, selection) {
-                    if (selection.length === 1) {
-                        let displayLayoutContext = selectionPath[1].context;
-                        let selectedItemContext = selectionPath[0].context;
-                        let selectedItemType = selectedItemContext.item.type;
-
-                        if (selectedItemContext.layoutItem.type === 'telemetry-view') {
-                            selectedItemType = 'telemetry-view';
-                        }
-
-                        let viewOptions = APPLICABLE_VIEWS[selectedItemType];
-
-                        if (viewOptions) {
-                            return {
-                                control: "menu",
-                                domainObject: selectedParent,
-                                icon: "icon-object",
-                                title: "Switch the way this telemetry is displayed",
-                                options: viewOptions,
-                                method: function (option) {
-                                    displayLayoutContext.switchViewType(selectedItemContext, option.value, selection);
-                                }
-                            };
-                        }
-                    } else if (selection.length > 1) {
-                        if (areAllViews('telemetry-view', 'layoutItem.type', selection)) {
-                            let displayLayoutContext = selectionPath[1].context;
-
-                            return {
-                                control: "menu",
-                                domainObject: selectedParent,
-                                icon: "icon-object",
-                                title: "Merge into a telemetry table or plot",
-                                options: APPLICABLE_VIEWS['telemetry-view-multi'],
-                                method: function (option) {
-                                    displayLayoutContext.mergeMultipleTelemetryViews(selection, option.value);
-                                }
-                            };
-                        } else if (areAllViews('telemetry.plot.overlay', 'item.type', selection)) {
-                            let displayLayoutContext = selectionPath[1].context;
-
-                            return {
-                                control: "menu",
-                                domainObject: selectedParent,
-                                icon: "icon-object",
-                                title: "Merge into a stacked plot",
-                                options: APPLICABLE_VIEWS['telemetry.plot.overlay-multi'],
-                                method: function (option) {
-                                    displayLayoutContext.mergeMultipleOverlayPlots(selection, option.value);
-                                }
-                            };
-                        }
-                    }
-                }
-
-                function getToggleGridButton(selection, selectionPath) {
-                    const ICON_GRID_SHOW = 'icon-grid-on';
-                    const ICON_GRID_HIDE = 'icon-grid-off';
-
-                    let displayLayoutContext;
-
-                    if (selection.length === 1 && selectionPath === undefined) {
-                        displayLayoutContext = selection[0][0].context;
-                    } else {
-                        displayLayoutContext = selectionPath[1].context;
-                    }
-
-                    return {
-                        control: "button",
-                        domainObject: displayLayoutContext.item,
-                        icon: ICON_GRID_SHOW,
-                        method: function () {
-                            displayLayoutContext.toggleGrid();
-
-                            this.icon = this.icon === ICON_GRID_SHOW
-                                ? ICON_GRID_HIDE
-                                : ICON_GRID_SHOW;
-                        },
-                        secondary: true
-                    };
-                }
-
-                function getSeparator() {
-                    return {
-                        control: "separator"
-                    };
-                }
-
-                function isMainLayoutSelected(selectionPath) {
-                    let selectedObject = selectionPath[0].context.item;
-
-                    return selectedObject && selectedObject.type === 'layout'
-                        && !selectionPath[0].context.layoutItem;
-                }
-
-                if (isMainLayoutSelected(selectedObjects[0])) {
-                    return [
-                        getToggleGridButton(selectedObjects),
-                        getAddButton(selectedObjects)];
-                }
-
-                let toolbar = {
-                    'add-menu': [],
-                    'text': [],
-                    'url': [],
-                    'viewSwitcher': [],
-                    'toggle-frame': [],
-                    'display-mode': [],
-                    'telemetry-value': [],
-                    'style': [],
-                    'position': [],
-                    'duplicate': [],
-                    'unit-toggle': [],
-                    'remove': [],
-                    'toggle-grid': []
-                };
-
-                selectedObjects.forEach(selectionPath => {
-                    let selectedParent = selectionPath[1].context.item;
-                    let layoutItem = selectionPath[0].context.layoutItem;
-
-                    if (!layoutItem || selectedParent.locked) {
-                        return;
-                    }
-
-                    if (layoutItem.type === 'subobject-view') {
-                        if (toolbar['add-menu'].length === 0 && selectionPath[0].context.item.type === 'layout') {
-                            toolbar['add-menu'] = [getAddButton(selectedObjects, selectionPath)];
-                        }
-
-                        if (toolbar['toggle-frame'].length === 0) {
-                            toolbar['toggle-frame'] = [getToggleFrameButton(selectedParent, selectedObjects)];
-                        }
-
-                        if (toolbar.position.length === 0) {
-                            toolbar.position = [
-                                getStackOrder(selectedParent, selectionPath),
-                                getXInput(selectedParent, selectedObjects),
-                                getYInput(selectedParent, selectedObjects),
-                                getHeightInput(selectedParent, selectedObjects),
-                                getWidthInput(selectedParent, selectedObjects)
-                            ];
-                        }
-
-                        if (toolbar.remove.length === 0) {
-                            toolbar.remove = [getRemoveButton(selectedParent, selectionPath, selectedObjects)];
-                        }
-
-                        if (toolbar.viewSwitcher.length === 0) {
-                            toolbar.viewSwitcher = [getViewSwitcherMenu(selectedParent, selectionPath, selectedObjects)];
-                        }
-                    } else if (layoutItem.type === 'telemetry-view') {
-                        if (toolbar['display-mode'].length === 0) {
-                            toolbar['display-mode'] = [getDisplayModeMenu(selectedParent, selectedObjects)];
-                        }
-
-                        if (toolbar['telemetry-value'].length === 0) {
-                            toolbar['telemetry-value'] = [getTelemetryValueMenu(selectionPath, selectedObjects)];
-                        }
-
-                        if (toolbar.position.length === 0) {
-                            toolbar.position = [
-                                getStackOrder(selectedParent, selectionPath),
-                                getXInput(selectedParent, selectedObjects),
-                                getYInput(selectedParent, selectedObjects),
-                                getHeightInput(selectedParent, selectedObjects),
-                                getWidthInput(selectedParent, selectedObjects)
-                            ];
-                        }
-
-                        if (toolbar.remove.length === 0) {
-                            toolbar.remove = [getRemoveButton(selectedParent, selectionPath, selectedObjects)];
-                        }
-
-                        if (toolbar.viewSwitcher.length === 0) {
-                            toolbar.viewSwitcher = [getViewSwitcherMenu(selectedParent, selectionPath, selectedObjects)];
-                        }
-
-                        if (toolbar['unit-toggle'].length === 0) {
-                            let toggleUnitsButton = getToggleUnitsButton(selectedParent, selectedObjects);
-                            if (toggleUnitsButton) {
-                                toolbar['unit-toggle'] = [toggleUnitsButton];
-                            }
-                        }
-                    } else if (layoutItem.type === 'text-view') {
-                        if (toolbar.position.length === 0) {
-                            toolbar.position = [
-                                getStackOrder(selectedParent, selectionPath),
-                                getXInput(selectedParent, selectedObjects),
-                                getYInput(selectedParent, selectedObjects),
-                                getHeightInput(selectedParent, selectedObjects),
-                                getWidthInput(selectedParent, selectedObjects)
-                            ];
-                        }
-
-                        if (toolbar.text.length === 0) {
-                            toolbar.text = [getTextButton(selectedParent, selectedObjects)];
-                        }
-
-                        if (toolbar.remove.length === 0) {
-                            toolbar.remove = [getRemoveButton(selectedParent, selectionPath, selectedObjects)];
-                        }
-                    } else if (layoutItem.type === 'box-view') {
-                        if (toolbar.position.length === 0) {
-                            toolbar.position = [
-                                getStackOrder(selectedParent, selectionPath),
-                                getXInput(selectedParent, selectedObjects),
-                                getYInput(selectedParent, selectedObjects),
-                                getHeightInput(selectedParent, selectedObjects),
-                                getWidthInput(selectedParent, selectedObjects)
-                            ];
-                        }
-
-                        if (toolbar.remove.length === 0) {
-                            toolbar.remove = [getRemoveButton(selectedParent, selectionPath, selectedObjects)];
-                        }
-                    } else if (layoutItem.type === 'image-view') {
-                        if (toolbar.position.length === 0) {
-                            toolbar.position = [
-                                getStackOrder(selectedParent, selectionPath),
-                                getXInput(selectedParent, selectedObjects),
-                                getYInput(selectedParent, selectedObjects),
-                                getHeightInput(selectedParent, selectedObjects),
-                                getWidthInput(selectedParent, selectedObjects)
-                            ];
-                        }
-
-                        if (toolbar.remove.length === 0) {
-                            toolbar.remove = [getRemoveButton(selectedParent, selectionPath, selectedObjects)];
-                        }
-                    } else if (layoutItem.type === 'line-view') {
-                        if (toolbar.position.length === 0) {
-                            toolbar.position = [
-                                getStackOrder(selectedParent, selectionPath),
-                                getXInput(selectedParent, selectedObjects),
-                                getYInput(selectedParent, selectedObjects),
-                                getX2Input(selectedParent, selectedObjects),
-                                getY2Input(selectedParent, selectedObjects)
-                            ];
-                        }
-
-                        if (toolbar.remove.length === 0) {
-                            toolbar.remove = [getRemoveButton(selectedParent, selectionPath, selectedObjects)];
-                        }
-                    }
-
-                    if (toolbar.duplicate.length === 0) {
-                        toolbar.duplicate = [getDuplicateButton(selectedParent, selectionPath, selectedObjects)];
-                    }
-
-                    if (toolbar['toggle-grid'].length === 0) {
-                        toolbar['toggle-grid'] = [getToggleGridButton(selectedObjects, selectionPath)];
-                    }
-                });
-
-                let toolbarArray = Object.values(toolbar);
-
-                return _.flatten(toolbarArray.reduce((accumulator, group, index) => {
-                    group = group.filter(control => control !== undefined);
-
-                    if (group.length > 0) {
-                        accumulator.push(group);
-
-                        if (index < toolbarArray.length - 1) {
-                            accumulator.push(getSeparator());
-                        }
-                    }
-
-                    return accumulator;
-                }, []));
+            {
+              label: 'Cancel',
+              callback: function () {
+                prompt.dismiss();
+              }
             }
+          ]
+        });
+      }
+    };
+  }
+
+  #getStackOrder(selectedParent, selectionPath, selectedObjects) {
+    const domainObject = selectedParent;
+    const keyString = this.#openmct.objects.makeKeyString(domainObject.identifier);
+    return {
+      control: 'menu',
+      domainObject,
+      icon: 'icon-layers',
+      title: 'Move the selected object above or below other objects',
+      options: [
+        {
+          name: 'Move to Top',
+          value: 'top',
+          class: 'icon-arrow-double-up'
+        },
+        {
+          name: 'Move Up',
+          value: 'up',
+          class: 'icon-arrow-up'
+        },
+        {
+          name: 'Move Down',
+          value: 'down',
+          class: 'icon-arrow-down'
+        },
+        {
+          name: 'Move to Bottom',
+          value: 'bottom',
+          class: 'icon-arrow-double-down'
+        }
+      ],
+      method: (option) => {
+        this.#openmct.objectViews.emit(
+          `${CONTEXT_ACTION}:${keyString}`,
+          CONTEXT_ACTIONS.ORDER_ITEM,
+          option.value,
+          this.#getAllTypes(selectedObjects)
+        );
+      }
+    };
+  }
+
+  #getXInput(selectedParent, selection) {
+    if (selection.length === 1) {
+      return {
+        control: 'input',
+        type: 'number',
+        domainObject: selectedParent,
+        applicableSelectedItems: this.#getAllTypes(selection),
+        property: (selectionPath) => {
+          return this.#getPath(selectionPath) + '.x';
+        },
+        label: 'X:',
+        title: 'X position'
+      };
+    }
+  }
+
+  #getYInput(selectedParent, selection) {
+    if (selection.length === 1) {
+      return {
+        control: 'input',
+        type: 'number',
+        domainObject: selectedParent,
+        applicableSelectedItems: this.#getAllTypes(selection),
+        property: (selectionPath) => {
+          return this.#getPath(selectionPath) + '.y';
+        },
+        label: 'Y:',
+        title: 'Y position'
+      };
+    }
+  }
+
+  #getWidthInput(selectedParent, selection) {
+    if (selection.length === 1) {
+      return {
+        control: 'input',
+        type: 'number',
+        domainObject: selectedParent,
+        applicableSelectedItems: this.#getAllTypes(selection),
+        property: (selectionPath) => {
+          return this.#getPath(selectionPath) + '.width';
+        },
+        label: 'W:',
+        title: 'Resize object width'
+      };
+    }
+  }
+
+  #getHeightInput(selectedParent, selection) {
+    if (selection.length === 1) {
+      return {
+        control: 'input',
+        type: 'number',
+        domainObject: selectedParent,
+        applicableSelectedItems: this.#getAllTypes(selection),
+        property: (selectionPath) => {
+          return this.#getPath(selectionPath) + '.height';
+        },
+        label: 'H:',
+        title: 'Resize object height'
+      };
+    }
+  }
+
+  #getX2Input(selectedParent, selection) {
+    if (selection.length === 1) {
+      return {
+        control: 'input',
+        type: 'number',
+        domainObject: selectedParent,
+        applicableSelectedItems: selection.filter((selectionPath) => {
+          return selectionPath[0].context.layoutItem.type === 'line-view';
+        }),
+        property: (selectionPath) => {
+          return this.#getPath(selectionPath) + '.x2';
+        },
+        label: 'X2:',
+        title: 'X2 position'
+      };
+    }
+  }
+
+  #getY2Input(selectedParent, selection) {
+    if (selection.length === 1) {
+      return {
+        control: 'input',
+        type: 'number',
+        domainObject: selectedParent,
+        applicableSelectedItems: selection.filter((selectionPath) => {
+          return selectionPath[0].context.layoutItem.type === 'line-view';
+        }),
+        property: (selectionPath) => {
+          return this.#getPath(selectionPath) + '.y2';
+        },
+        label: 'Y2:',
+        title: 'Y2 position'
+      };
+    }
+  }
+
+  #getTextButton(selectedParent, selection) {
+    return {
+      control: 'button',
+      domainObject: selectedParent,
+      applicableSelectedItems: selection.filter((selectionPath) => {
+        return selectionPath[0].context.layoutItem.type === 'text-view';
+      }),
+      property: (selectionPath) => {
+        return this.#getPath(selectionPath);
+      },
+      icon: 'icon-pencil',
+      title: 'Edit text properties',
+      label: 'Edit text',
+      dialog: DIALOG_FORM.text
+    };
+  }
+
+  #getTelemetryValueMenu(selectionPath, selection) {
+    if (selection.length === 1) {
+      return {
+        control: 'select-menu',
+        domainObject: selectionPath[1].context.item,
+        applicableSelectedItems: selection.filter((path) => {
+          return path[0].context.layoutItem.type === 'telemetry-view';
+        }),
+        property: (path) => {
+          return this.#getPath(path) + '.value';
+        },
+        title: 'Set value',
+        options: this.#openmct.telemetry
+          .getMetadata(selectionPath[0].context.item)
+          .values()
+          .map((value) => {
+            return {
+              name: value.name,
+              value: value.key
+            };
+          })
+      };
+    }
+  }
+
+  #getDisplayModeMenu(selectedParent, selection) {
+    if (selection.length === 1) {
+      return {
+        control: 'select-menu',
+        domainObject: selectedParent,
+        applicableSelectedItems: selection.filter((selectionPath) => {
+          return selectionPath[0].context.layoutItem.type === 'telemetry-view';
+        }),
+        property: (selectionPath) => {
+          return this.#getPath(selectionPath) + '.displayMode';
+        },
+        title: 'Set display mode',
+        options: [
+          {
+            name: 'Label + Value',
+            value: 'all'
+          },
+          {
+            name: 'Label only',
+            value: 'label'
+          },
+          {
+            name: 'Value only',
+            value: 'value'
+          }
+        ]
+      };
+    }
+  }
+
+  #getDuplicateButton(selectedParent, selectionPath, selection) {
+    const domainObject = selectedParent;
+    const keyString = this.#openmct.objects.makeKeyString(domainObject.identifier);
+    return {
+      control: 'button',
+      domainObject,
+      icon: 'icon-duplicate',
+      title: 'Duplicate the selected object',
+      method: () => {
+        this.#openmct.objectViews.emit(
+          `${CONTEXT_ACTION}:${keyString}`,
+          CONTEXT_ACTIONS.DUPLICATE_ITEM,
+          selection
+        );
+      }
+    };
+  }
+
+  #getPropertyFromPath(object, path) {
+    let splitPath = path.split('.');
+    let property = Object.assign({}, object);
+
+    while (splitPath.length && property) {
+      property = property[splitPath.shift()];
+    }
+
+    return property;
+  }
+
+  #areAllViews(type, path, selection) {
+    let allTelemetry = true;
+
+    selection.forEach((selectedItem) => {
+      let selectedItemContext = selectedItem[0].context;
+
+      if (this.#getPropertyFromPath(selectedItemContext, path) !== type) {
+        allTelemetry = false;
+      }
+    });
+
+    return allTelemetry;
+  }
+
+  #getToggleUnitsButton(selectedParent, selection) {
+    let applicableItems = this.#getAllOfType(selection, 'telemetry-view');
+    applicableItems = this.#unitsOnly(applicableItems);
+    if (!applicableItems.length) {
+      return;
+    }
+
+    return {
+      control: 'toggle-button',
+      domainObject: selectedParent,
+      applicableSelectedItems: applicableItems,
+      property: (selectionPath) => {
+        return this.#getPath(selectionPath) + '.showUnits';
+      },
+      options: [
+        {
+          value: true,
+          icon: 'icon-eye-open',
+          title: 'Show units',
+          label: 'Show units'
+        },
+        {
+          value: false,
+          icon: 'icon-eye-disabled',
+          title: 'Hide units',
+          label: 'Hide units'
+        }
+      ]
+    };
+  }
+
+  #unitsOnly(items) {
+    let results = items.filter((item) => {
+      let currentItem = item[0];
+      let metadata = this.#openmct.telemetry.getMetadata(currentItem.context.item);
+      if (!metadata) {
+        return false;
+      }
+
+      let hasUnits = metadata.valueMetadatas.filter((metadatum) => metadatum.unit).length;
+
+      return hasUnits > 0;
+    });
+
+    return results;
+  }
+
+  #getViewSwitcherMenu(selectedParent, selectionPath, selection) {
+    if (selection.length === 1) {
+      let selectedItemContext = selectionPath[0].context;
+      let selectedItemType = selectedItemContext.item.type;
+
+      if (selectedItemContext.layoutItem.type === 'telemetry-view') {
+        selectedItemType = 'telemetry-view';
+      }
+
+      let viewOptions = APPLICABLE_VIEWS[selectedItemType];
+
+      if (viewOptions) {
+        const domainObject = selectedParent;
+        const keyString = this.#openmct.objects.makeKeyString(domainObject.identifier);
+        return {
+          control: 'menu',
+          domainObject,
+          icon: 'icon-object',
+          title: 'Switch the way this telemetry is displayed',
+          label: 'View type',
+          options: viewOptions,
+          method: (option) => {
+            this.#openmct.objectViews.emit(
+              `${CONTEXT_ACTION}:${keyString}`,
+              CONTEXT_ACTIONS.SWITCH_VIEW_TYPE,
+              selectedItemContext,
+              option.value,
+              selection
+            );
+          }
+        };
+      }
+    } else if (selection.length > 1) {
+      const domainObject = selectedParent;
+      const keyString = this.#openmct.objects.makeKeyString(domainObject.identifier);
+      if (this.#areAllViews('telemetry-view', 'layoutItem.type', selection)) {
+        return {
+          control: 'menu',
+          domainObject,
+          icon: 'icon-object',
+          title: 'Merge into a telemetry table or plot',
+          label: 'View type',
+          options: APPLICABLE_VIEWS['telemetry-view-multi'],
+          method: (option) => {
+            this.#openmct.objectViews.emit(
+              `${CONTEXT_ACTION}:${keyString}`,
+              CONTEXT_ACTIONS.MERGE_MULTIPLE_TELEMETRY_VIEWS,
+              selection,
+              option.value
+            );
+          }
         };
+      } else if (this.#areAllViews('telemetry.plot.overlay', 'item.type', selection)) {
+        return {
+          control: 'menu',
+          domainObject,
+          icon: 'icon-object',
+          title: 'Merge into a stacked plot',
+          options: APPLICABLE_VIEWS['telemetry.plot.overlay-multi'],
+          method: (option) => {
+            this.#openmct.objectViews.emit(
+              `${CONTEXT_ACTION}:${keyString}`,
+              CONTEXT_ACTIONS.MERGE_MULTIPLE_OVERLAY_PLOTS,
+              selection,
+              option.value
+            );
+          }
+        };
+      }
     }
+  }
 
-    return DisplayLayoutToolbar;
-});
+  #getToggleGridButton(selection, selectionPath) {
+    const ICON_GRID_SHOW = 'icon-grid-on';
+    const ICON_GRID_HIDE = 'icon-grid-off';
+
+    let displayLayoutContext;
+
+    if (selection.length === 1 && selectionPath === undefined) {
+      displayLayoutContext = selection[0][0].context;
+    } else {
+      displayLayoutContext = selectionPath[1].context;
+    }
+
+    const domainObject = displayLayoutContext.item;
+    const keyString = this.#openmct.objects.makeKeyString(domainObject.identifier);
+
+    return {
+      control: 'button',
+      domainObject,
+      icon: ICON_GRID_SHOW,
+      method: () => {
+        this.#openmct.objectViews.emit(
+          `${CONTEXT_ACTION}:${keyString}`,
+          CONTEXT_ACTIONS.TOGGLE_GRID
+        );
+
+        this.icon = this.icon === ICON_GRID_SHOW ? ICON_GRID_HIDE : ICON_GRID_SHOW;
+      },
+      secondary: true
+    };
+  }
+
+  #getSeparator() {
+    return {
+      control: 'separator'
+    };
+  }
+
+  #isMainLayoutSelected(selectionPath) {
+    let selectedObject = selectionPath[0].context.item;
+
+    return (
+      selectedObject && selectedObject.type === 'layout' && !selectionPath[0].context.layoutItem
+    );
+  }
+
+  #showForm(formStructure, name, selection) {
+    const domainObject = selection[0][0].context.item;
+    const keyString = this.#openmct.objects.makeKeyString(domainObject.identifier);
+    this.#openmct.forms.showForm(formStructure).then((changes) => {
+      this.#openmct.objectViews.emit(
+        `${CONTEXT_ACTION}:${keyString}`,
+        CONTEXT_ACTIONS.ADD_ELEMENT,
+        name,
+        changes,
+        selection
+      );
+    });
+  }
+
+  toolbar(selectedObjects) {
+    if (this.#isMainLayoutSelected(selectedObjects[0])) {
+      return [this.#getToggleGridButton(selectedObjects), this.#getAddButton(selectedObjects)];
+    }
+
+    let toolbar = {
+      'add-menu': [],
+      text: [],
+      url: [],
+      viewSwitcher: [],
+      'toggle-frame': [],
+      'display-mode': [],
+      'telemetry-value': [],
+      style: [],
+      'unit-toggle': [],
+      position: [],
+      duplicate: [],
+      remove: [],
+      'toggle-grid': []
+    };
+
+    selectedObjects.forEach((selectionPath) => {
+      let selectedParent = selectionPath[1].context.item;
+      let layoutItem = selectionPath[0].context.layoutItem;
+
+      if (!layoutItem || selectedParent.locked) {
+        return;
+      }
+
+      if (layoutItem.type === 'subobject-view') {
+        if (toolbar['add-menu'].length === 0 && selectionPath[0].context.item.type === 'layout') {
+          toolbar['add-menu'] = [this.#getAddButton(selectedObjects, selectionPath)];
+        }
+
+        if (toolbar['toggle-frame'].length === 0) {
+          toolbar['toggle-frame'] = [this.#getToggleFrameButton(selectedParent, selectedObjects)];
+        }
+
+        if (toolbar.position.length === 0) {
+          toolbar.position = [
+            this.#getStackOrder(selectedParent, selectionPath, selectedObjects),
+            this.#getSeparator(),
+            this.#getXInput(selectedParent, selectedObjects),
+            this.#getYInput(selectedParent, selectedObjects),
+            this.#getHeightInput(selectedParent, selectedObjects),
+            this.#getWidthInput(selectedParent, selectedObjects)
+          ];
+        }
+
+        if (toolbar.remove.length === 0) {
+          toolbar.remove = [this.#getRemoveButton(selectedParent, selectionPath, selectedObjects)];
+        }
+
+        if (toolbar.viewSwitcher.length === 0) {
+          toolbar.viewSwitcher = [
+            this.#getViewSwitcherMenu(selectedParent, selectionPath, selectedObjects)
+          ];
+        }
+      } else if (layoutItem.type === 'telemetry-view') {
+        if (toolbar['display-mode'].length === 0) {
+          toolbar['display-mode'] = [this.#getDisplayModeMenu(selectedParent, selectedObjects)];
+        }
+
+        if (toolbar['telemetry-value'].length === 0) {
+          toolbar['telemetry-value'] = [
+            this.#getTelemetryValueMenu(selectionPath, selectedObjects)
+          ];
+        }
+
+        if (toolbar['unit-toggle'].length === 0) {
+          let toggleUnitsButton = this.#getToggleUnitsButton(selectedParent, selectedObjects);
+          if (toggleUnitsButton) {
+            toolbar['unit-toggle'] = [toggleUnitsButton];
+          }
+        }
+
+        if (toolbar.position.length === 0) {
+          toolbar.position = [
+            this.#getStackOrder(selectedParent, selectionPath, selectedObjects),
+            this.#getSeparator(),
+            this.#getXInput(selectedParent, selectedObjects),
+            this.#getYInput(selectedParent, selectedObjects),
+            this.#getHeightInput(selectedParent, selectedObjects),
+            this.#getWidthInput(selectedParent, selectedObjects)
+          ];
+        }
+
+        if (toolbar.remove.length === 0) {
+          toolbar.remove = [this.#getRemoveButton(selectedParent, selectionPath, selectedObjects)];
+        }
+
+        if (toolbar.viewSwitcher.length === 0) {
+          toolbar.viewSwitcher = [
+            this.#getViewSwitcherMenu(selectedParent, selectionPath, selectedObjects)
+          ];
+        }
+      } else if (layoutItem.type === 'text-view') {
+        if (toolbar.position.length === 0) {
+          toolbar.position = [
+            this.#getStackOrder(selectedParent, selectionPath, selectedObjects),
+            this.#getSeparator(),
+            this.#getXInput(selectedParent, selectedObjects),
+            this.#getYInput(selectedParent, selectedObjects),
+            this.#getHeightInput(selectedParent, selectedObjects),
+            this.#getWidthInput(selectedParent, selectedObjects)
+          ];
+        }
+
+        if (toolbar.text.length === 0) {
+          toolbar.text = [this.#getTextButton(selectedParent, selectedObjects)];
+        }
+
+        if (toolbar.remove.length === 0) {
+          toolbar.remove = [this.#getRemoveButton(selectedParent, selectionPath, selectedObjects)];
+        }
+      } else if (layoutItem.type === 'box-view' || layoutItem.type === 'ellipse-view') {
+        if (toolbar.position.length === 0) {
+          toolbar.position = [
+            this.#getStackOrder(selectedParent, selectionPath, selectedObjects),
+            this.#getSeparator(),
+            this.#getXInput(selectedParent, selectedObjects),
+            this.#getYInput(selectedParent, selectedObjects),
+            this.#getHeightInput(selectedParent, selectedObjects),
+            this.#getWidthInput(selectedParent, selectedObjects)
+          ];
+        }
+
+        if (toolbar.remove.length === 0) {
+          toolbar.remove = [this.#getRemoveButton(selectedParent, selectionPath, selectedObjects)];
+        }
+      } else if (layoutItem.type === 'image-view') {
+        if (toolbar.position.length === 0) {
+          toolbar.position = [
+            this.#getStackOrder(selectedParent, selectionPath, selectedObjects),
+            this.#getSeparator(),
+            this.#getXInput(selectedParent, selectedObjects),
+            this.#getYInput(selectedParent, selectedObjects),
+            this.#getHeightInput(selectedParent, selectedObjects),
+            this.#getWidthInput(selectedParent, selectedObjects)
+          ];
+        }
+
+        if (toolbar.remove.length === 0) {
+          toolbar.remove = [this.#getRemoveButton(selectedParent, selectionPath, selectedObjects)];
+        }
+      } else if (layoutItem.type === 'line-view') {
+        if (toolbar.position.length === 0) {
+          toolbar.position = [
+            this.#getStackOrder(selectedParent, selectionPath),
+            this.#getSeparator(),
+            this.#getXInput(selectedParent, selectedObjects),
+            this.#getYInput(selectedParent, selectedObjects),
+            this.#getX2Input(selectedParent, selectedObjects),
+            this.#getY2Input(selectedParent, selectedObjects)
+          ];
+        }
+
+        if (toolbar.remove.length === 0) {
+          toolbar.remove = [this.#getRemoveButton(selectedParent, selectionPath, selectedObjects)];
+        }
+      }
+
+      if (toolbar.duplicate.length === 0) {
+        toolbar.duplicate = [
+          this.#getDuplicateButton(selectedParent, selectionPath, selectedObjects)
+        ];
+      }
+
+      if (toolbar['toggle-grid'].length === 0) {
+        toolbar['toggle-grid'] = [this.#getToggleGridButton(selectedObjects, selectionPath)];
+      }
+    });
+
+    let toolbarArray = Object.values(toolbar);
+
+    return _.flatten(
+      toolbarArray.reduce((accumulator, group, index) => {
+        group = group.filter((control) => control !== undefined);
+
+        if (group.length > 0) {
+          accumulator.push(group);
+
+          if (index < toolbarArray.length - 1) {
+            accumulator.push(this.#getSeparator());
+          }
+        }
+
+        return accumulator;
+      }, [])
+    );
+  }
+}
diff --git a/src/plugins/displayLayout/DisplayLayoutType.js b/src/plugins/displayLayout/DisplayLayoutType.js
index 7a3ce87704c..b0d28126bd0 100644
--- a/src/plugins/displayLayout/DisplayLayoutType.js
+++ b/src/plugins/displayLayout/DisplayLayoutType.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,68 +20,49 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(function () {
-    function DisplayLayoutType() {
-        return {
-            name: "Display Layout",
-            creatable: true,
-            description: 'Assemble other objects and components together into a reusable screen layout. Simply drag in the objects you want, position and size them. Save your design and view or edit it at any time.',
-            cssClass: 'icon-layout',
-            initialize(domainObject) {
-                domainObject.composition = [];
-                domainObject.configuration = {
-                    items: [],
-                    layoutGrid: [10, 10]
-                };
-            },
-            form: [
-                {
-                    name: "Horizontal grid (px)",
-                    control: "numberfield",
-                    cssClass: "l-input-sm l-numeric",
-                    property: [
-                        "configuration",
-                        "layoutGrid",
-                        0
-                    ],
-                    required: true
-                },
-                {
-                    name: "Vertical grid (px)",
-                    control: "numberfield",
-                    cssClass: "l-input-sm l-numeric",
-                    property: [
-                        "configuration",
-                        "layoutGrid",
-                        1
-                    ],
-                    required: true
-                },
-                {
-                    name: "Horizontal size (px)",
-                    control: "numberfield",
-                    cssClass: "l-input-sm l-numeric",
-                    property: [
-                        "configuration",
-                        "layoutDimensions",
-                        0
-                    ],
-                    required: false
-                },
-                {
-                    name: "Vertical size (px)",
-                    control: "numberfield",
-                    cssClass: "l-input-sm l-numeric",
-                    property: [
-                        "configuration",
-                        "layoutDimensions",
-                        1
-                    ],
-                    required: false
-                }
-            ]
-        };
-    }
-
-    return DisplayLayoutType;
-});
+export default function DisplayLayoutType() {
+  return {
+    name: 'Display Layout',
+    creatable: true,
+    description:
+      'Assemble other objects and components together into a reusable screen layout. Simply drag in the objects you want, position and size them. Save your design and view or edit it at any time.',
+    cssClass: 'icon-layout',
+    initialize(domainObject) {
+      domainObject.composition = [];
+      domainObject.configuration = {
+        items: [],
+        layoutGrid: [10, 10]
+      };
+    },
+    form: [
+      {
+        name: 'Horizontal grid (px)',
+        control: 'numberfield',
+        cssClass: 'l-input-sm l-numeric',
+        property: ['configuration', 'layoutGrid', 0],
+        required: true
+      },
+      {
+        name: 'Vertical grid (px)',
+        control: 'numberfield',
+        cssClass: 'l-input-sm l-numeric',
+        property: ['configuration', 'layoutGrid', 1],
+        required: true
+      },
+      {
+        name: 'Horizontal size (px)',
+        control: 'numberfield',
+        cssClass: 'l-input-sm l-numeric',
+        property: ['configuration', 'layoutDimensions', 0],
+        required: false
+      },
+      {
+        name: 'Vertical size (px)',
+        control: 'numberfield',
+        cssClass: 'l-input-sm l-numeric',
+        property: ['configuration', 'layoutDimensions', 1],
+        required: false
+      }
+    ]
+  };
+}
diff --git a/src/plugins/displayLayout/DrawingObjectTypes.js b/src/plugins/displayLayout/DrawingObjectTypes.js
new file mode 100644
index 00000000000..60956bab9a5
--- /dev/null
+++ b/src/plugins/displayLayout/DrawingObjectTypes.js
@@ -0,0 +1,34 @@
+const displayLayoutDrawingObjectTypes = {
+  'box-view': {
+    name: 'Box',
+    creatable: false,
+    description: 'A rectangle shape.',
+    cssClass: 'icon-box-round-corners'
+  },
+  'ellipse-view': {
+    name: 'Ellipse',
+    creatable: false,
+    description: 'A ellipse shape.',
+    cssClass: 'icon-circle'
+  },
+  'line-view': {
+    name: 'Line',
+    creatable: false,
+    description: 'A line.',
+    cssClass: 'icon-line-horz'
+  },
+  'text-view': {
+    name: 'Text',
+    creatable: false,
+    description: 'An editable text box.',
+    cssClass: 'icon-font'
+  },
+  'image-view': {
+    name: 'Image',
+    creatable: false,
+    description: 'An image.',
+    cssClass: 'icon-image'
+  }
+};
+
+export default displayLayoutDrawingObjectTypes;
diff --git a/src/plugins/displayLayout/LayoutDrag.js b/src/plugins/displayLayout/LayoutDrag.js
index ab8a9640d22..9bec4932cdb 100644
--- a/src/plugins/displayLayout/LayoutDrag.js
+++ b/src/plugins/displayLayout/LayoutDrag.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,107 +20,89 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(
-    [],
-    function () {
-
-        /**
-         * Handles drag interactions on frames in layouts. This will
-         * provides new positions/dimensions for frames based on
-         * relative pixel positions provided; these will take into account
-         * the grid size (in a snap-to sense) and will enforce some minimums
-         * on both position and dimensions.
-         *
-         * The provided position and dimensions factors will determine
-         * whether this is a move or a resize, and what type of resize it
-         * will be. For instance, a position factor of [1, 1]
-         * will move a frame along with the mouse as the drag
-         * proceeds, while a dimension factor of [0, 0] will leave
-         * dimensions unchanged. Combining these in different
-         * ways results in different handles; a position factor of
-         * [1, 0] and a dimensions factor of [-1, 0] will implement
-         * a left-edge resize, as the horizontal position will move
-         * with the mouse while the horizontal dimensions shrink in
-         * kind (and vertical properties remain unmodified.)
-         *
-         * @param {object} rawPosition the initial position/dimensions
-         *                 of the frame being interacted with
-         * @param {number[]} posFactor the position factor
-         * @param {number[]} dimFactor the dimensions factor
-         * @param {number[]} the size of each grid element, in pixels
-         * @constructor
-         * @memberof platform/features/layout
-         */
-        function LayoutDrag(rawPosition, posFactor, dimFactor, gridSize) {
-            this.rawPosition = rawPosition;
-            this.posFactor = posFactor;
-            this.dimFactor = dimFactor;
-            this.gridSize = gridSize;
-        }
-
-        // Convert a delta from pixel coordinates to grid coordinates,
-        // rounding to whole-number grid coordinates.
-        function toGridDelta(gridSize, pixelDelta) {
-            return pixelDelta.map(function (v, i) {
-                return Math.round(v / gridSize[i]);
-            });
-        }
-
-        // Utility function to perform element-by-element multiplication
-        function multiply(array, factors) {
-            return array.map(function (v, i) {
-                return v * factors[i];
-            });
-        }
+/**
+ * Handles drag interactions on frames in layouts. This will
+ * provides new positions/dimensions for frames based on
+ * relative pixel positions provided; these will take into account
+ * the grid size (in a snap-to sense) and will enforce some minimums
+ * on both position and dimensions.
+ *
+ * The provided position and dimensions factors will determine
+ * whether this is a move or a resize, and what type of resize it
+ * will be. For instance, a position factor of [1, 1]
+ * will move a frame along with the mouse as the drag
+ * proceeds, while a dimension factor of [0, 0] will leave
+ * dimensions unchanged. Combining these in different
+ * ways results in different handles; a position factor of
+ * [1, 0] and a dimensions factor of [-1, 0] will implement
+ * a left-edge resize, as the horizontal position will move
+ * with the mouse while the horizontal dimensions shrink in
+ * kind (and vertical properties remain unmodified.)
+ *
+ * @param {object} rawPosition the initial position/dimensions
+ *                 of the frame being interacted with
+ * @param {number[]} posFactor the position factor
+ * @param {number[]} dimFactor the dimensions factor
+ * @param {number[]} the size of each grid element, in pixels
+ * @constructor
+ * @memberof platform/features/layout
+ */
+export default function LayoutDrag(rawPosition, posFactor, dimFactor, gridSize) {
+  this.rawPosition = rawPosition;
+  this.posFactor = posFactor;
+  this.dimFactor = dimFactor;
+  this.gridSize = gridSize;
+}
 
-        // Utility function to perform element-by-element addition
-        function add(array, other) {
-            return array.map(function (v, i) {
-                return v + other[i];
-            });
-        }
+// Convert a delta from pixel coordinates to grid coordinates,
+// rounding to whole-number grid coordinates.
+function toGridDelta(gridSize, pixelDelta) {
+  return pixelDelta.map(function (v, i) {
+    return Math.round(v / gridSize[i]);
+  });
+}
 
-        // Utility function to perform element-by-element max-choosing
-        function max(array, other) {
-            return array.map(function (v, i) {
-                return Math.max(v, other[i]);
-            });
-        }
+// Utility function to perform element-by-element multiplication
+function multiply(array, factors) {
+  return array.map(function (v, i) {
+    return v * factors[i];
+  });
+}
 
-        /**
-         * Get a new position object in grid coordinates, with
-         * position and dimensions both offset appropriately
-         * according to the factors supplied in the constructor.
-         * @param {number[]} pixelDelta the offset from the
-         *        original position, in pixels
-         */
-        LayoutDrag.prototype.getAdjustedPositionAndDimensions = function (pixelDelta) {
-            const gridDelta = toGridDelta(this.gridSize, pixelDelta);
+// Utility function to perform element-by-element addition
+function add(array, other) {
+  return array.map(function (v, i) {
+    return v + other[i];
+  });
+}
 
-            return {
-                position: max(add(
-                    this.rawPosition.position,
-                    multiply(gridDelta, this.posFactor)
-                ), [0, 0]),
-                dimensions: max(add(
-                    this.rawPosition.dimensions,
-                    multiply(gridDelta, this.dimFactor)
-                ), [1, 1])
-            };
-        };
+// Utility function to perform element-by-element max-choosing
+function max(array, other) {
+  return array.map(function (v, i) {
+    return Math.max(v, other[i]);
+  });
+}
 
-        LayoutDrag.prototype.getAdjustedPosition = function (pixelDelta) {
-            const gridDelta = toGridDelta(this.gridSize, pixelDelta);
+/**
+ * Get a new position object in grid coordinates, with
+ * position and dimensions both offset appropriately
+ * according to the factors supplied in the constructor.
+ * @param {number[]} pixelDelta the offset from the
+ *        original position, in pixels
+ */
+LayoutDrag.prototype.getAdjustedPositionAndDimensions = function (pixelDelta) {
+  const gridDelta = toGridDelta(this.gridSize, pixelDelta);
 
-            return {
-                position: max(add(
-                    this.rawPosition.position,
-                    multiply(gridDelta, this.posFactor)
-                ), [0, 0])
-            };
-        };
+  return {
+    position: max(add(this.rawPosition.position, multiply(gridDelta, this.posFactor)), [0, 0]),
+    dimensions: max(add(this.rawPosition.dimensions, multiply(gridDelta, this.dimFactor)), [1, 1])
+  };
+};
 
-        return LayoutDrag;
+LayoutDrag.prototype.getAdjustedPosition = function (pixelDelta) {
+  const gridDelta = toGridDelta(this.gridSize, pixelDelta);
 
-    }
-);
+  return {
+    position: max(add(this.rawPosition.position, multiply(gridDelta, this.posFactor)), [0, 0])
+  };
+};
diff --git a/src/plugins/displayLayout/actions/CopyToClipboardAction.js b/src/plugins/displayLayout/actions/CopyToClipboardAction.js
index 5fdaf810377..c9e708dbcfb 100644
--- a/src/plugins/displayLayout/actions/CopyToClipboardAction.js
+++ b/src/plugins/displayLayout/actions/CopyToClipboardAction.js
@@ -1,38 +1,38 @@
 import clipboard from '@/utils/clipboard';
 
 export default class CopyToClipboardAction {
-    constructor(openmct) {
-        this.openmct = openmct;
+  constructor(openmct) {
+    this.openmct = openmct;
 
-        this.cssClass = 'icon-duplicate';
-        this.description = 'Copy value to clipboard';
-        this.group = "action";
-        this.key = 'copyToClipboard';
-        this.name = 'Copy to Clipboard';
-        this.priority = 1;
-    }
-
-    invoke(objectPath, view = {}) {
-        const viewContext = view.getViewContext && view.getViewContext();
-        const formattedValue = viewContext.row.formattedValueForCopy();
+    this.cssClass = 'icon-duplicate';
+    this.description = 'Copy value to clipboard';
+    this.group = 'action';
+    this.key = 'copyToClipboard';
+    this.name = 'Copy to Clipboard';
+    this.priority = 1;
+  }
 
-        clipboard.updateClipboard(formattedValue)
-            .then(() => {
-                this.openmct.notifications.info(`Success : copied '${formattedValue}' to clipboard `);
-            })
-            .catch(() => {
-                this.openmct.notifications.error(`Failed : to copy '${formattedValue}' to clipboard `);
-            });
-    }
+  invoke(objectPath, view = {}) {
+    const viewContext = view.getViewContext && view.getViewContext();
+    const formattedValue = viewContext.row.formattedValueForCopy();
 
-    appliesTo(objectPath, view = {}) {
-        const viewContext = view.getViewContext && view.getViewContext();
-        const row = viewContext && viewContext.row;
-        if (!row) {
-            return false;
-        }
+    clipboard
+      .updateClipboard(formattedValue)
+      .then(() => {
+        this.openmct.notifications.info(`Success : copied '${formattedValue}' to clipboard `);
+      })
+      .catch(() => {
+        this.openmct.notifications.error(`Failed : to copy '${formattedValue}' to clipboard `);
+      });
+  }
 
-        return row.formattedValueForCopy
-            && typeof row.formattedValueForCopy === 'function';
+  appliesTo(objectPath, view = {}) {
+    const viewContext = view.getViewContext && view.getViewContext();
+    const row = viewContext && viewContext.row;
+    if (!row) {
+      return false;
     }
+
+    return row.formattedValueForCopy && typeof row.formattedValueForCopy === 'function';
+  }
 }
diff --git a/src/plugins/displayLayout/components/AlphanumericFormat.vue b/src/plugins/displayLayout/components/AlphanumericFormat.vue
index f6b592ce908..27ab7b28485 100644
--- a/src/plugins/displayLayout/components/AlphanumericFormat.vue
+++ b/src/plugins/displayLayout/components/AlphanumericFormat.vue
@@ -1,105 +1,99 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 
 <template>
-<div
-    v-if="isEditing"
-    class="c-inspect-properties"
->
-    <div class="c-inspect-properties__header">
-        Alphanumeric Format
-    </div>
+  <div class="c-inspect-properties">
     <ul class="c-inspect-properties__section">
-        <li class="c-inspect-properties__row">
-            <div
-                class="c-inspect-properties__label"
-                title="Printf formatting for the selected telemetry"
-            >
-                <label for="telemetryPrintfFormat">Format</label>
-            </div>
-            <div class="c-inspect-properties__value">
-                <input
-                    id="telemetryPrintfFormat"
-                    type="text"
-                    :value="telemetryFormat"
-                    :placeholder="nonMixedFormat ? '' : 'Mixed'"
-                    @change="formatTelemetry"
-                >
-            </div>
-        </li>
+      <li class="c-inspect-properties__row">
+        <div
+          class="c-inspect-properties__label"
+          title="Printf formatting for the selected telemetry"
+        >
+          <label for="telemetryPrintfFormat">Format</label>
+        </div>
+        <div class="c-inspect-properties__value">
+          <input
+            id="telemetryPrintfFormat"
+            type="text"
+            :disabled="!isEditing"
+            :value="telemetryFormat"
+            :placeholder="nonMixedFormat ? '' : 'Mixed'"
+            @change="formatTelemetry"
+          />
+        </div>
+      </li>
     </ul>
-</div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'AlphanumericFormat',
-    inject: ['openmct', 'objectPath'],
-    data() {
-        return {
-            isEditing: this.openmct.editor.isEditing(),
-            telemetryFormat: undefined,
-            nonMixedFormat: false
-        };
+  name: 'AlphanumericFormat',
+  inject: ['openmct', 'objectPath'],
+  data() {
+    return {
+      isEditing: this.openmct.editor.isEditing(),
+      telemetryFormat: undefined,
+      nonMixedFormat: false
+    };
+  },
+  mounted() {
+    this.openmct.editor.on('isEditing', this.toggleEdit);
+    this.openmct.selection.on('change', this.handleSelection);
+    this.handleSelection(this.openmct.selection.get());
+  },
+  unmounted() {
+    this.openmct.editor.off('isEditing', this.toggleEdit);
+    this.openmct.selection.off('change', this.handleSelection);
+  },
+  methods: {
+    toggleEdit(isEditing) {
+      this.isEditing = isEditing;
     },
-    mounted() {
-        this.openmct.editor.on('isEditing', this.toggleEdit);
-        this.openmct.selection.on('change', this.handleSelection);
-        this.handleSelection(this.openmct.selection.get());
+    formatTelemetry(event) {
+      const newFormat = event.currentTarget.value;
+      this.openmct.selection.get().forEach((selectionPath) => {
+        selectionPath[0].context.updateTelemetryFormat(newFormat);
+      });
+      this.telemetryFormat = newFormat;
     },
-    destroyed() {
-        this.openmct.editor.off('isEditing', this.toggleEdit);
-        this.openmct.selection.off('change', this.handleSelection);
-    },
-    methods: {
-        toggleEdit(isEditing) {
-            this.isEditing = isEditing;
-        },
-        formatTelemetry(event) {
-            let newFormat = event.currentTarget.value;
-            this.openmct.selection.get().forEach(selectionPath => {
-                selectionPath[0].context.updateTelemetryFormat(newFormat);
-            });
-            this.telemetryFormat = newFormat;
-        },
-        handleSelection(selection) {
-            if (selection.length === 0 || selection[0].length < 2) {
-                return;
-            }
+    handleSelection(selection) {
+      if (selection.length === 0 || selection[0].length < 2) {
+        return;
+      }
 
-            let layoutItem = selection[0][0].context.layoutItem;
+      let layoutItem = selection[0][0].context.layoutItem;
 
-            if (!layoutItem) {
-                return;
-            }
+      if (!layoutItem) {
+        return;
+      }
 
-            let format = layoutItem.format;
-            this.nonMixedFormat = selection.every(selectionPath => {
-                return selectionPath[0].context.layoutItem.format === format;
-            });
+      let format = layoutItem.format;
+      this.nonMixedFormat = selection.every((selectionPath) => {
+        return selectionPath[0].context.layoutItem.format === format;
+      });
 
-            this.telemetryFormat = this.nonMixedFormat ? format : '';
-        }
+      this.telemetryFormat = this.nonMixedFormat ? format : '';
     }
+  }
 };
-
 </script>
diff --git a/src/plugins/displayLayout/components/BoxView.vue b/src/plugins/displayLayout/components/BoxView.vue
index 4bebc382aed..d7d36b0cacd 100644
--- a/src/plugins/displayLayout/components/BoxView.vue
+++ b/src/plugins/displayLayout/components/BoxView.vue
@@ -1,122 +1,138 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 
 <template>
-<layout-frame
+  <layout-frame
     :item="item"
     :grid-size="gridSize"
     :is-editing="isEditing"
-    @move="(gridDelta) => $emit('move', gridDelta)"
-    @endMove="() => $emit('endMove')"
->
-    <div
+    @move="move"
+    @end-move="endMove"
+  >
+    <template #content>
+      <div
         class="c-box-view u-style-receiver js-style-receiver"
         :class="[styleClass]"
         :style="style"
-    ></div>
-</layout-frame>
+        role="application"
+        aria-roledescription="draggable box"
+        aria-label="Box"
+      ></div>
+    </template>
+  </layout-frame>
 </template>
 
 <script>
+import conditionalStylesMixin from '../mixins/objectStyles-mixin.js';
 import LayoutFrame from './LayoutFrame.vue';
-import conditionalStylesMixin from '../mixins/objectStyles-mixin';
 
 export default {
-    makeDefinition() {
-        return {
-            fill: '#717171',
-            stroke: '',
-            x: 1,
-            y: 1,
-            width: 10,
-            height: 5
-        };
-    },
-    components: {
-        LayoutFrame
+  makeDefinition() {
+    return {
+      fill: '#666666',
+      stroke: '',
+      x: 1,
+      y: 1,
+      width: 10,
+      height: 5
+    };
+  },
+  components: {
+    LayoutFrame
+  },
+  mixins: [conditionalStylesMixin],
+  inject: ['openmct'],
+  props: {
+    item: {
+      type: Object,
+      required: true
     },
-    mixins: [conditionalStylesMixin],
-    inject: ['openmct'],
-    props: {
-        item: {
-            type: Object,
-            required: true
-        },
-        gridSize: {
-            type: Array,
-            required: true,
-            validator: (arr) => arr && arr.length === 2
-                && arr.every(el => typeof el === 'number')
-        },
-        index: {
-            type: Number,
-            required: true
-        },
-        initSelect: Boolean,
-        isEditing: {
-            type: Boolean,
-            required: true
-        }
+    gridSize: {
+      type: Array,
+      required: true,
+      validator: (arr) => arr && arr.length === 2 && arr.every((el) => typeof el === 'number')
     },
-    computed: {
-        style() {
-            if (this.itemStyle) {
-                return this.itemStyle;
-            } else {
-                return {
-                    backgroundColor: this.item.fill,
-                    border: this.item.stroke ? '1px solid ' + this.item.stroke : ''
-                };
-            }
-        }
+    index: {
+      type: Number,
+      required: true
     },
-    watch: {
-        index(newIndex) {
-            if (!this.context) {
-                return;
-            }
-
-            this.context.index = newIndex;
-        },
-        item(newItem) {
-            if (!this.context) {
-                return;
-            }
+    initSelect: Boolean,
+    isEditing: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: ['move', 'end-move'],
+  computed: {
+    style() {
+      if (this.itemStyle) {
+        return this.itemStyle;
+      } else {
+        return {
+          backgroundColor: this.item.fill,
+          border: this.item.stroke ? '1px solid ' + this.item.stroke : ''
+        };
+      }
+    }
+  },
+  watch: {
+    index(newIndex) {
+      if (!this.context) {
+        return;
+      }
 
-            this.context.layoutItem = newItem;
-        }
+      this.context.index = newIndex;
     },
-    mounted() {
-        this.context = {
-            layoutItem: this.item,
-            index: this.index
-        };
-        this.removeSelectable = this.openmct.selection.selectable(
-            this.$el, this.context, this.initSelect);
+    item(newItem) {
+      if (!this.context) {
+        return;
+      }
+
+      this.context.layoutItem = newItem;
+    }
+  },
+  mounted() {
+    this.context = {
+      layoutItem: this.item,
+      index: this.index
+    };
+    this.removeSelectable = this.openmct.selection.selectable(
+      this.$el,
+      this.context,
+      this.initSelect
+    );
+  },
+  beforeUnmount() {
+    if (this.removeSelectable) {
+      this.removeSelectable();
+    }
+  },
+  methods: {
+    move(gridDelta) {
+      this.$emit('move', gridDelta);
     },
-    destroyed() {
-        if (this.removeSelectable) {
-            this.removeSelectable();
-        }
+    endMove() {
+      this.$emit('end-move');
     }
+  }
 };
 </script>
diff --git a/src/plugins/displayLayout/components/DisplayLayout.vue b/src/plugins/displayLayout/components/DisplayLayout.vue
index 6f063504077..ecddbe32688 100644
--- a/src/plugins/displayLayout/components/DisplayLayout.vue
+++ b/src/plugins/displayLayout/components/DisplayLayout.vue
@@ -1,126 +1,133 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 
 <template>
-<div
+  <div
     class="l-layout u-style-receiver js-style-receiver"
     :class="{
-        'is-multi-selected': selectedLayoutItems.length > 1,
-        'allow-editing': isEditing
+      'is-multi-selected': selectedLayoutItems.length > 1,
+      'allow-editing': isEditing
     }"
+    :aria-label="`${domainObject.name} Layout`"
     @dragover="handleDragOver"
     @click.capture="bypassSelection"
     @drop="handleDrop"
->
+  >
     <display-layout-grid
-        v-if="isEditing"
-        :grid-size="gridSize"
-        :show-grid="showGrid"
+      v-if="isEditing"
+      :grid-size="gridSize"
+      :show-grid="showGrid"
+      :grid-dimensions="gridDimensions"
+      :aria-label="`${domainObject.name} Layout Grid`"
+      :aria-hidden="showGrid ? 'false' : 'true'"
     />
     <div
-        v-if="shouldDisplayLayoutDimensions"
-        class="l-layout__dimensions"
-        :style="layoutDimensionsStyle"
+      v-if="shouldDisplayLayoutDimensions"
+      class="l-layout__dimensions"
+      :style="layoutDimensionsStyle"
     >
-        <div class="l-layout__dimensions-vals">
-            {{ layoutDimensions[0] }},{{ layoutDimensions[1] }}
-        </div>
+      <div class="l-layout__dimensions-vals">
+        {{ layoutDimensions[0] }},{{ layoutDimensions[1] }}
+      </div>
     </div>
     <component
-        :is="item.type"
-        v-for="(item, index) in layoutItems"
-        :key="item.id"
-        :ref="`layout-item-${item.id}`"
-        :item="item"
-        :grid-size="gridSize"
-        :init-select="initSelectIndex === index"
-        :index="index"
-        :multi-select="selectedLayoutItems.length > 1"
-        :is-editing="isEditing"
-        @contextClick="updateViewContext"
-        @move="move"
-        @endMove="endMove"
-        @endLineResize="endLineResize"
-        @formatChanged="updateTelemetryFormat"
+      :is="item.type"
+      v-for="(item, index) in layoutItems"
+      :key="item.id"
+      :ref="`layout-item-${item.id}`"
+      :item="item"
+      :grid-size="gridSize"
+      :init-select="initSelectIndex === index"
+      :index="index"
+      :multi-select="selectedLayoutItems.length > 1 || null"
+      :is-editing="isEditing"
+      @context-click="updateViewContext"
+      @move="move"
+      @end-move="endMove"
+      @end-line-resize="endLineResize"
+      @format-changed="updateTelemetryFormat"
     />
     <edit-marquee
-        v-if="showMarquee"
-        :grid-size="gridSize"
-        :selected-layout-items="selectedLayoutItems"
-        @endResize="endResize"
+      v-if="showMarquee"
+      :grid-size="gridSize"
+      :selected-layout-items="selectedLayoutItems"
+      @end-resize="endResize"
     />
-</div>
+  </div>
 </template>
 
 <script>
-import uuid from 'uuid';
+import _ from 'lodash';
+import { v4 as uuid } from 'uuid';
+
+import BoxView from './BoxView.vue';
+import DisplayLayoutGrid from './DisplayLayoutGrid.vue';
+import EditMarquee from './EditMarquee.vue';
+import EllipseView from './EllipseView.vue';
+import ImageView from './ImageView.vue';
+import LineView from './LineView.vue';
 import SubobjectView from './SubobjectView.vue';
 import TelemetryView from './TelemetryView.vue';
-import BoxView from './BoxView.vue';
 import TextView from './TextView.vue';
-import LineView from './LineView.vue';
-import ImageView from './ImageView.vue';
-import EditMarquee from './EditMarquee.vue';
-import DisplayLayoutGrid from './DisplayLayoutGrid.vue';
-import _ from 'lodash';
 
 const TELEMETRY_IDENTIFIER_FUNCTIONS = {
-    'table': (domainObject) => {
-        return Promise.resolve(domainObject.composition);
-    },
-    'telemetry.plot.overlay': (domainObject) => {
-        return Promise.resolve(domainObject.composition);
-    },
-    'telemetry.plot.stacked': (domainObject, openmct) => {
-        let composition = openmct.composition.get(domainObject);
-
-        return composition.load().then((objects) => {
-            let identifiers = [];
-            objects.forEach(object => {
-                if (object.type === 'telemetry.plot.overlay') {
-                    identifiers.push(...object.composition);
-                } else {
-                    identifiers.push(object.identifier);
-                }
-            });
+  table: (domainObject) => {
+    return Promise.resolve(domainObject.composition);
+  },
+  'telemetry.plot.overlay': (domainObject) => {
+    return Promise.resolve(domainObject.composition);
+  },
+  'telemetry.plot.stacked': (domainObject, openmct) => {
+    let composition = openmct.composition.get(domainObject);
+
+    return composition.load().then((objects) => {
+      let identifiers = [];
+      objects.forEach((object) => {
+        if (object.type === 'telemetry.plot.overlay') {
+          identifiers.push(...object.composition);
+        } else {
+          identifiers.push(object.identifier);
+        }
+      });
 
-            return Promise.resolve(identifiers);
-        });
-    }
+      return Promise.resolve(identifiers);
+    });
+  }
 };
 
 const ITEM_TYPE_VIEW_MAP = {
-    'subobject-view': SubobjectView,
-    'telemetry-view': TelemetryView,
-    'box-view': BoxView,
-    'line-view': LineView,
-    'text-view': TextView,
-    'image-view': ImageView
+  'subobject-view': SubobjectView,
+  'telemetry-view': TelemetryView,
+  'box-view': BoxView,
+  'ellipse-view': EllipseView,
+  'line-view': LineView,
+  'text-view': TextView,
+  'image-view': ImageView
 };
 const ORDERS = {
-    top: Number.POSITIVE_INFINITY,
-    up: 1,
-    down: -1,
-    bottom: Number.NEGATIVE_INFINITY
+  top: Number.POSITIVE_INFINITY,
+  up: 1,
+  down: -1,
+  bottom: Number.NEGATIVE_INFINITY
 };
 const DRAG_OBJECT_TRANSFER_PREFIX = 'openmct/domain-object/';
 const DUPLICATE_OFFSET = 3;
@@ -130,704 +137,831 @@ components['edit-marquee'] = EditMarquee;
 components['display-layout-grid'] = DisplayLayoutGrid;
 
 function getItemDefinition(itemType, ...options) {
-    let itemView = ITEM_TYPE_VIEW_MAP[itemType];
+  let itemView = ITEM_TYPE_VIEW_MAP[itemType];
 
-    if (!itemView) {
-        throw `Invalid itemType: ${itemType}`;
-    }
+  if (!itemView) {
+    throw `Invalid itemType: ${itemType}`;
+  }
 
-    return itemView.makeDefinition(...options);
+  return itemView.makeDefinition(...options);
 }
 
 export default {
-    components: components,
-    inject: ['openmct', 'objectPath', 'options', 'objectUtils', 'currentView'],
-    props: {
-        domainObject: {
-            type: Object,
-            required: true
-        },
-        isEditing: {
-            type: Boolean,
-            required: true
-        }
+  components: components,
+  inject: ['openmct', 'objectPath', 'options', 'currentView'],
+  props: {
+    domainObject: {
+      type: Object,
+      required: true
     },
-    data() {
-        return {
-            initSelectIndex: undefined,
-            selection: [],
-            showGrid: true,
-            viewContext: {}
-        };
-    },
-    computed: {
-        gridSize() {
-            return this.domainObject.configuration.layoutGrid;
-        },
-        layoutItems() {
-            return this.domainObject.configuration.items;
-        },
-        selectedLayoutItems() {
-            return this.layoutItems.filter(item => {
-                return this.itemIsInCurrentSelection(item);
-            });
-        },
-        layoutDimensions() {
-            return this.domainObject.configuration.layoutDimensions;
-        },
-        shouldDisplayLayoutDimensions() {
-            return this.layoutDimensions
-                && this.layoutDimensions[0] > 0
-                && this.layoutDimensions[1] > 0;
-        },
-        layoutDimensionsStyle() {
-            const width = `${this.layoutDimensions[0]}px`;
-            const height = `${this.layoutDimensions[1]}px`;
-
-            return {
-                width,
-                height
-            };
-        },
-        showMarquee() {
-            let selectionPath = this.selection[0];
-            let singleSelectedLine = this.selection.length === 1
-                    && selectionPath[0].context.layoutItem && selectionPath[0].context.layoutItem.type === 'line-view';
-
-            return this.isEditing && selectionPath && selectionPath.length > 1 && !singleSelectedLine;
-        }
+    isEditing: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      initSelectIndex: undefined,
+      selection: [],
+      showGrid: true,
+      viewContext: {},
+      gridDimensions: [0, 0],
+      layoutItems: this.domainObject.configuration.items || []
+    };
+  },
+  computed: {
+    gridSize() {
+      return this.domainObject.configuration.layoutGrid.map(Number);
     },
-    watch: {
-        isEditing(value) {
-            if (value) {
-                this.showGrid = value;
-            }
-        }
+    selectedLayoutItems() {
+      return this.layoutItems.filter((item) => {
+        return this.itemIsInCurrentSelection(item);
+      });
     },
-    mounted() {
-        this.openmct.selection.on('change', this.setSelection);
-        this.initializeItems();
-        this.composition = this.openmct.composition.get(this.domainObject);
-        this.composition.on('add', this.addChild);
-        this.composition.on('remove', this.removeChild);
-        this.composition.load();
-    },
-    destroyed: function () {
-        this.openmct.selection.off('change', this.setSelection);
-        this.composition.off('add', this.addChild);
-        this.composition.off('remove', this.removeChild);
-    },
-    methods: {
-        addElement(itemType, element) {
-            this.addItem(itemType + '-view', element);
-        },
-        setSelection(selection) {
-            this.selection = selection;
-        },
-        itemIsInCurrentSelection(item) {
-            return this.selection.some(selectionPath =>
-                selectionPath[0].context.layoutItem && selectionPath[0].context.layoutItem.id === item.id);
-        },
-        bypassSelection($event) {
-            if (this.dragInProgress) {
-                if ($event) {
-                    $event.stopImmediatePropagation();
-                }
-
-                this.dragInProgress = false;
-
-                return;
-            }
-        },
-        endLineResize(item, updates) {
-            this.dragInProgress = true;
-            let index = this.layoutItems.indexOf(item);
-            Object.assign(item, updates);
-            this.mutate(`configuration.items[${index}]`, item);
-        },
-        endResize(scaleWidth, scaleHeight, marqueeStart, marqueeOffset) {
-            this.dragInProgress = true;
-            this.layoutItems.forEach(item => {
-                if (this.itemIsInCurrentSelection(item)) {
-                    let itemXInMarqueeSpace = item.x - marqueeStart.x;
-                    let itemXInMarqueeSpaceAfterScale = Math.round(itemXInMarqueeSpace * scaleWidth);
-                    item.x = itemXInMarqueeSpaceAfterScale + marqueeOffset.x + marqueeStart.x;
-
-                    let itemYInMarqueeSpace = item.y - marqueeStart.y;
-                    let itemYInMarqueeSpaceAfterScale = Math.round(itemYInMarqueeSpace * scaleHeight);
-                    item.y = itemYInMarqueeSpaceAfterScale + marqueeOffset.y + marqueeStart.y;
-
-                    if (item.x2) {
-                        let itemX2InMarqueeSpace = item.x2 - marqueeStart.x;
-                        let itemX2InMarqueeSpaceAfterScale = Math.round(itemX2InMarqueeSpace * scaleWidth);
-                        item.x2 = itemX2InMarqueeSpaceAfterScale + marqueeOffset.x + marqueeStart.x;
-                    } else {
-                        item.width = Math.round(item.width * scaleWidth);
-                    }
-
-                    if (item.y2) {
-                        let itemY2InMarqueeSpace = item.y2 - marqueeStart.y;
-                        let itemY2InMarqueeSpaceAfterScale = Math.round(itemY2InMarqueeSpace * scaleHeight);
-                        item.y2 = itemY2InMarqueeSpaceAfterScale + marqueeOffset.y + marqueeStart.y;
-                    } else {
-                        item.height = Math.round(item.height * scaleHeight);
-                    }
-                }
-            });
-            this.mutate("configuration.items", this.layoutItems);
-        },
-        move(gridDelta) {
-            this.dragInProgress = true;
-
-            if (!this.initialPositions) {
-                this.initialPositions = {};
-                _.cloneDeep(this.selectedLayoutItems).forEach(selectedItem => {
-                    if (selectedItem.type === 'line-view') {
-                        this.initialPositions[selectedItem.id] = [selectedItem.x, selectedItem.y, selectedItem.x2, selectedItem.y2];
-                        this.startingMinX2 = this.startingMinX2 !== undefined ? Math.min(this.startingMinX2, selectedItem.x2) : selectedItem.x2;
-                        this.startingMinY2 = this.startingMinY2 !== undefined ? Math.min(this.startingMinY2, selectedItem.y2) : selectedItem.y2;
-                    } else {
-                        this.initialPositions[selectedItem.id] = [selectedItem.x, selectedItem.y];
-                    }
-
-                    this.startingMinX = this.startingMinX !== undefined ? Math.min(this.startingMinX, selectedItem.x) : selectedItem.x;
-                    this.startingMinY = this.startingMinY !== undefined ? Math.min(this.startingMinY, selectedItem.y) : selectedItem.y;
-                });
-            }
-
-            this.layoutItems.forEach(item => {
-                if (this.initialPositions[item.id]) {
-                    this.updateItemPosition(item, gridDelta);
-                }
-            });
-        },
-        updateItemPosition(item, gridDelta) {
-            let startingPosition = this.initialPositions[item.id];
-            let [startingX, startingY, startingX2, startingY2] = startingPosition;
-
-            if (this.startingMinX + gridDelta[0] >= 0) {
-                if (item.x2 !== undefined) {
-                    if (this.startingMinX2 + gridDelta[0] >= 0) {
-                        item.x = startingX + gridDelta[0];
-                    }
-                } else {
-                    item.x = startingX + gridDelta[0];
-                }
-            }
-
-            if (this.startingMinY + gridDelta[1] >= 0) {
-                if (item.y2 !== undefined) {
-                    if (this.startingMinY2 + gridDelta[1] >= 0) {
-                        item.y = startingY + gridDelta[1];
-                    }
-                } else {
-                    item.y = startingY + gridDelta[1];
-                }
-            }
+    layoutDimensions() {
+      return this.domainObject.configuration.layoutDimensions;
+    },
+    shouldDisplayLayoutDimensions() {
+      return this.layoutDimensions && this.layoutDimensions[0] > 0 && this.layoutDimensions[1] > 0;
+    },
+    layoutDimensionsStyle() {
+      const width = `${this.layoutDimensions[0]}px`;
+      const height = `${this.layoutDimensions[1]}px`;
+
+      return {
+        width,
+        height
+      };
+    },
+    showMarquee() {
+      let selectionPath = this.selection[0];
+      let singleSelectedLine =
+        this.selection.length === 1 &&
+        selectionPath[0].context.layoutItem &&
+        selectionPath[0].context.layoutItem.type === 'line-view';
+
+      return this.isEditing && selectionPath && selectionPath.length > 1 && !singleSelectedLine;
+    }
+  },
+  watch: {
+    isEditing(value) {
+      if (value) {
+        this.showGrid = value;
+      }
+    },
+    layoutItems: {
+      handler(value) {
+        this.updateGrid();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.openmct.selection.on('change', this.setSelection);
+    this.initializeItems();
+    this.composition = this.openmct.composition.get(this.domainObject);
+    this.composition.on('add', this.addChild);
+    this.composition.on('remove', this.removeChild);
+    this.composition.load();
+    this.gridDimensions = [this.$el.offsetWidth, this.$el.scrollHeight];
+
+    this.unObserveItems = this.openmct.objects.observe(
+      this.domainObject,
+      'configuration.items',
+      (items) => {
+        this.layoutItems = [...items];
+      }
+    );
+
+    this.watchDisplayResize();
+  },
+  beforeUnmount() {
+    if (this.unObserveItems) {
+      this.unObserveItems();
+    }
+    this.unwatchDisplayResize();
+    this.openmct.selection.off('change', this.setSelection);
+    this.composition.off('add', this.addChild);
+    this.composition.off('remove', this.removeChild);
+  },
+  methods: {
+    updateGrid() {
+      let wMax = this.$el.clientWidth / this.gridSize[0];
+      let hMax = this.$el.clientHeight / this.gridSize[1];
+      this.layoutItems.forEach((item) => {
+        if (item.x + item.width > wMax) {
+          wMax = item.x + item.width + 2;
+        }
 
-            if (item.x2 !== undefined && this.startingMinX2 + gridDelta[0] >= 0 && this.startingMinX + gridDelta[0] >= 0) {
-                item.x2 = startingX2 + gridDelta[0];
-            }
+        if (item.y + item.height > hMax) {
+          hMax = item.y + item.height + 2;
+        }
+      });
+      this.gridDimensions = [wMax * this.gridSize[0], hMax * this.gridSize[1]];
+    },
+    clearSelection() {
+      this.$el.click();
+    },
+    watchDisplayResize() {
+      this.unwatchDisplayResize();
+      this.resizeObserver = new ResizeObserver(this.updateGrid);
 
-            if (item.y2 !== undefined && this.startingMinY2 + gridDelta[1] >= 0 && this.startingMinY + gridDelta[1] >= 0) {
-                item.y2 = startingY2 + gridDelta[1];
-            }
-        },
-        endMove() {
-            this.mutate('configuration.items', this.layoutItems);
-            this.initialPositions = undefined;
-            this.startingMinX = undefined;
-            this.startingMinY = undefined;
-            this.startingMinX2 = undefined;
-            this.startingMinY2 = undefined;
-        },
-        mutate(path, value) {
-            this.openmct.objects.mutate(this.domainObject, path, value);
-        },
-        handleDrop($event) {
-            if (!$event.dataTransfer.types.includes('openmct/domain-object-path')) {
-                return;
-            }
+      this.resizeObserver.observe(this.$el);
+    },
+    unwatchDisplayResize() {
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+      }
+    },
+    addElement(itemType, element) {
+      this.addItem(itemType + '-view', element);
+    },
+    setSelection(selection) {
+      this.selection = [...selection];
+    },
+    itemIsInCurrentSelection(item) {
+      return this.selection.some(
+        (selectionPath) =>
+          selectionPath[0].context.layoutItem && selectionPath[0].context.layoutItem.id === item.id
+      );
+    },
+    bypassSelection($event) {
+      if (this.dragInProgress) {
+        if ($event) {
+          $event.stopImmediatePropagation();
+        }
 
-            $event.preventDefault();
+        this.dragInProgress = false;
 
-            let domainObject = JSON.parse($event.dataTransfer.getData('openmct/domain-object-path'))[0];
-            let elementRect = this.$el.getBoundingClientRect();
-            let droppedObjectPosition = [
-                Math.floor(($event.pageX - elementRect.left) / this.gridSize[0]),
-                Math.floor(($event.pageY - elementRect.top) / this.gridSize[1])
+        return;
+      }
+    },
+    endLineResize(item, updates) {
+      this.dragInProgress = true;
+      let index = this.layoutItems.indexOf(item);
+      Object.assign(item, updates);
+      this.mutate(`configuration.items[${index}]`, item);
+    },
+    endResize(scaleWidth, scaleHeight, marqueeStart, marqueeOffset) {
+      this.dragInProgress = true;
+      this.layoutItems.forEach((item) => {
+        if (this.itemIsInCurrentSelection(item)) {
+          let itemXInMarqueeSpace = item.x - marqueeStart.x;
+          let itemXInMarqueeSpaceAfterScale = Math.round(itemXInMarqueeSpace * scaleWidth);
+          item.x = itemXInMarqueeSpaceAfterScale + marqueeOffset.x + marqueeStart.x;
+
+          let itemYInMarqueeSpace = item.y - marqueeStart.y;
+          let itemYInMarqueeSpaceAfterScale = Math.round(itemYInMarqueeSpace * scaleHeight);
+          item.y = itemYInMarqueeSpaceAfterScale + marqueeOffset.y + marqueeStart.y;
+
+          if (item.x2) {
+            let itemX2InMarqueeSpace = item.x2 - marqueeStart.x;
+            let itemX2InMarqueeSpaceAfterScale = Math.round(itemX2InMarqueeSpace * scaleWidth);
+            item.x2 = itemX2InMarqueeSpaceAfterScale + marqueeOffset.x + marqueeStart.x;
+          } else {
+            item.width = Math.round(item.width * scaleWidth);
+          }
+
+          if (item.y2) {
+            let itemY2InMarqueeSpace = item.y2 - marqueeStart.y;
+            let itemY2InMarqueeSpaceAfterScale = Math.round(itemY2InMarqueeSpace * scaleHeight);
+            item.y2 = itemY2InMarqueeSpaceAfterScale + marqueeOffset.y + marqueeStart.y;
+          } else {
+            item.height = Math.round(item.height * scaleHeight);
+          }
+        }
+      });
+      this.mutate('configuration.items', this.layoutItems);
+    },
+    move(gridDelta) {
+      this.dragInProgress = true;
+
+      if (!this.initialPositions) {
+        this.initialPositions = {};
+        _.cloneDeep(this.selectedLayoutItems).forEach((selectedItem) => {
+          if (selectedItem.type === 'line-view') {
+            this.initialPositions[selectedItem.id] = [
+              selectedItem.x,
+              selectedItem.y,
+              selectedItem.x2,
+              selectedItem.y2
             ];
+            this.startingMinX2 =
+              this.startingMinX2 !== undefined
+                ? Math.min(this.startingMinX2, selectedItem.x2)
+                : selectedItem.x2;
+            this.startingMinY2 =
+              this.startingMinY2 !== undefined
+                ? Math.min(this.startingMinY2, selectedItem.y2)
+                : selectedItem.y2;
+          } else {
+            this.initialPositions[selectedItem.id] = [selectedItem.x, selectedItem.y];
+          }
+
+          this.startingMinX =
+            this.startingMinX !== undefined
+              ? Math.min(this.startingMinX, selectedItem.x)
+              : selectedItem.x;
+          this.startingMinY =
+            this.startingMinY !== undefined
+              ? Math.min(this.startingMinY, selectedItem.y)
+              : selectedItem.y;
+        });
+      }
 
-            if (this.isTelemetry(domainObject)) {
-                this.addItem('telemetry-view', domainObject, droppedObjectPosition);
-            } else {
-                let keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
-
-                if (!this.objectViewMap[keyString]) {
-                    this.addItem('subobject-view', domainObject, droppedObjectPosition);
-                } else {
-                    let prompt = this.openmct.overlays.dialog({
-                        iconClass: 'alert',
-                        message: "This item is already in layout and will not be added again.",
-                        buttons: [
-                            {
-                                label: 'OK',
-                                callback: function () {
-                                    prompt.dismiss();
-                                }
-                            }
-                        ]
-                    });
-                }
-            }
-        },
-        containsObject(identifier) {
-            return _.get(this.domainObject, 'composition')
-                .some(childId => this.openmct.objects.areIdsEqual(childId, identifier));
-        },
-        handleDragOver($event) {
-            if (this.domainObject.locked) {
-                return;
-            }
-
-            // Get the ID of the dragged object
-            let draggedKeyString = $event.dataTransfer.types
-                .filter(type => type.startsWith(DRAG_OBJECT_TRANSFER_PREFIX))
-                .map(type => type.substring(DRAG_OBJECT_TRANSFER_PREFIX.length))[0];
-
-            // If the layout already contains the given object, then shortcut the default dragover behavior and
-            // potentially allow drop. Display layouts allow drag drop of duplicate telemetry objects.
-            if (this.containsObject(draggedKeyString)) {
-                $event.preventDefault();
-            }
-        },
-        isTelemetry(domainObject) {
-            if (this.openmct.telemetry.isTelemetryObject(domainObject)
-                    && !this.options.showAsView.includes(domainObject.type)) {
-                return true;
-            } else {
-                return false;
-            }
-        },
-        addItem(itemType, ...options) {
-            let item = getItemDefinition(itemType, this.openmct, this.gridSize, ...options);
-            item.type = itemType;
-            item.id = uuid();
-            this.trackItem(item);
-            this.layoutItems.push(item);
-            this.openmct.objects.mutate(this.domainObject, "configuration.items", this.layoutItems);
-            this.initSelectIndex = this.layoutItems.length - 1;
-        },
-        trackItem(item) {
-            if (!item.identifier) {
-                return;
-            }
-
-            let keyString = this.openmct.objects.makeKeyString(item.identifier);
-
-            if (item.type === "telemetry-view") {
-                let count = this.telemetryViewMap[keyString] || 0;
-                this.telemetryViewMap[keyString] = ++count;
-            } else if (item.type === "subobject-view") {
-                let count = this.objectViewMap[keyString] || 0;
-                this.objectViewMap[keyString] = ++count;
-            }
-        },
-        removeItem(selectedItems) {
-            let indices = [];
-            this.initSelectIndex = -1;
-            selectedItems.forEach(selectedItem => {
-                indices.push(selectedItem[0].context.index);
-                this.untrackItem(selectedItem[0].context.layoutItem);
-            });
-            _.pullAt(this.layoutItems, indices);
-            this.mutate("configuration.items", this.layoutItems);
-            this.$el.click();
-        },
-        untrackItem(item) {
-            if (!item.identifier) {
-                return;
-            }
-
-            let keyString = this.openmct.objects.makeKeyString(item.identifier);
-            let telemetryViewCount = this.telemetryViewMap[keyString];
-            let objectViewCount = this.objectViewMap[keyString];
-
-            if (item.type === 'telemetry-view') {
-                telemetryViewCount = --this.telemetryViewMap[keyString];
-
-                if (telemetryViewCount === 0) {
-                    delete this.telemetryViewMap[keyString];
-                }
-            } else if (item.type === 'subobject-view') {
-                objectViewCount = --this.objectViewMap[keyString];
-
-                if (objectViewCount === 0) {
-                    delete this.objectViewMap[keyString];
+      this.layoutItems.forEach((item) => {
+        if (this.initialPositions[item.id]) {
+          this.updateItemPosition(item, gridDelta);
+        }
+      });
+    },
+    updateItemPosition(item, gridDelta) {
+      let startingPosition = this.initialPositions[item.id];
+      let [startingX, startingY, startingX2, startingY2] = startingPosition;
+
+      if (this.startingMinX + gridDelta[0] >= 0) {
+        if (item.x2 !== undefined) {
+          if (this.startingMinX2 + gridDelta[0] >= 0) {
+            item.x = startingX + gridDelta[0];
+          }
+        } else {
+          item.x = startingX + gridDelta[0];
+        }
+      }
+
+      if (this.startingMinY + gridDelta[1] >= 0) {
+        if (item.y2 !== undefined) {
+          if (this.startingMinY2 + gridDelta[1] >= 0) {
+            item.y = startingY + gridDelta[1];
+          }
+        } else {
+          item.y = startingY + gridDelta[1];
+        }
+      }
+
+      if (
+        item.x2 !== undefined &&
+        this.startingMinX2 + gridDelta[0] >= 0 &&
+        this.startingMinX + gridDelta[0] >= 0
+      ) {
+        item.x2 = startingX2 + gridDelta[0];
+      }
+
+      if (
+        item.y2 !== undefined &&
+        this.startingMinY2 + gridDelta[1] >= 0 &&
+        this.startingMinY + gridDelta[1] >= 0
+      ) {
+        item.y2 = startingY2 + gridDelta[1];
+      }
+    },
+    endMove() {
+      this.mutate('configuration.items', this.layoutItems);
+      this.initialPositions = undefined;
+      this.startingMinX = undefined;
+      this.startingMinY = undefined;
+      this.startingMinX2 = undefined;
+      this.startingMinY2 = undefined;
+    },
+    mutate(path, value) {
+      this.openmct.objects.mutate(this.domainObject, path, value);
+    },
+    handleDrop($event) {
+      if (!$event.dataTransfer.types.includes('openmct/domain-object-path')) {
+        return;
+      }
+
+      $event.preventDefault();
+
+      let domainObject = JSON.parse($event.dataTransfer.getData('openmct/domain-object-path'))[0];
+      let elementRect = this.$el.getBoundingClientRect();
+      let droppedObjectPosition = [
+        Math.floor(($event.pageX - elementRect.left) / this.gridSize[0]),
+        Math.floor(($event.pageY - elementRect.top) / this.gridSize[1])
+      ];
+
+      if (this.isTelemetry(domainObject)) {
+        this.addItem('telemetry-view', domainObject, droppedObjectPosition);
+      } else {
+        let keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
+
+        if (!this.objectViewMap[keyString]) {
+          this.addItem('subobject-view', domainObject, droppedObjectPosition);
+        } else {
+          let prompt = this.openmct.overlays.dialog({
+            iconClass: 'alert',
+            message: 'This item is already in layout and will not be added again.',
+            buttons: [
+              {
+                label: 'OK',
+                callback: function () {
+                  prompt.dismiss();
                 }
-            }
+              }
+            ]
+          });
+        }
+      }
+    },
+    containsObject(identifier) {
+      if ('composition' in this.domainObject) {
+        return this.domainObject.composition.some((childId) =>
+          this.openmct.objects.areIdsEqual(childId, identifier)
+        );
+      }
+
+      return false;
+    },
+    handleDragOver($event) {
+      if (this.domainObject.locked) {
+        return;
+      }
+
+      // Get the ID of the dragged object
+      let draggedKeyString = $event.dataTransfer.types
+        .filter((type) => type.startsWith(DRAG_OBJECT_TRANSFER_PREFIX))
+        .map((type) => type.substring(DRAG_OBJECT_TRANSFER_PREFIX.length))[0];
+
+      // If the layout already contains the given object, then shortcut the default dragover behavior and
+      // potentially allow drop. Display layouts allow drag drop of duplicate telemetry objects.
+      if (this.containsObject(draggedKeyString)) {
+        $event.preventDefault();
+      }
+    },
+    isTelemetry(domainObject) {
+      if (
+        this.openmct.telemetry.isTelemetryObject(domainObject) &&
+        !this.options.showAsView.includes(domainObject.type)
+      ) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    addItem(itemType, ...options) {
+      let item = getItemDefinition(itemType, this.openmct, this.gridSize, ...options);
+      item.type = itemType;
+      item.id = uuid();
+      this.trackItem(item);
+      this.layoutItems.push(item);
+      this.openmct.objects.mutate(this.domainObject, 'configuration.items', this.layoutItems);
+      this.initSelectIndex = this.layoutItems.length - 1;
+    },
+    trackItem(item) {
+      if (!item.identifier) {
+        return;
+      }
+
+      let keyString = this.openmct.objects.makeKeyString(item.identifier);
+
+      if (item.type === 'telemetry-view') {
+        let count = this.telemetryViewMap[keyString] || 0;
+        this.telemetryViewMap[keyString] = ++count;
+      } else if (item.type === 'subobject-view') {
+        let count = this.objectViewMap[keyString] || 0;
+        this.objectViewMap[keyString] = ++count;
+      }
+    },
+    removeItem(selectedItems) {
+      let indices = [];
+      this.initSelectIndex = -1;
+      selectedItems.forEach((selectedItem) => {
+        indices.push(selectedItem[0].context.index);
+        this.untrackItem(selectedItem[0].context.layoutItem);
+      });
+      _.pullAt(this.layoutItems, indices);
+      this.mutate('configuration.items', this.layoutItems);
+      this.clearSelection();
+    },
+    untrackItem(item) {
+      if (!item.identifier) {
+        return;
+      }
 
-            if (!telemetryViewCount && !objectViewCount) {
-                this.removeFromComposition(keyString);
-            }
-        },
-        removeFromComposition(keyString) {
-            let composition = _.get(this.domainObject, 'composition');
-            composition = composition.filter(identifier => {
-                return this.openmct.objects.makeKeyString(identifier) !== keyString;
-            });
-            this.mutate("composition", composition);
-        },
-        initializeItems() {
-            this.telemetryViewMap = {};
-            this.objectViewMap = {};
-            this.layoutItems.forEach(this.trackItem);
-        },
-        isItemAlreadyTracked(child) {
-            let found = false;
-            let keyString = this.openmct.objects.makeKeyString(child.identifier);
-
-            this.layoutItems.forEach(item => {
-                if (item.identifier) {
-                    let itemKeyString = this.openmct.objects.makeKeyString(item.identifier);
-
-                    if (itemKeyString === keyString) {
-                        found = true;
-
-                        return;
-                    }
-                }
-            });
+      let keyString = this.openmct.objects.makeKeyString(item.identifier);
+      let telemetryViewCount = this.telemetryViewMap[keyString];
+      let objectViewCount = this.objectViewMap[keyString];
 
-            if (found) {
-                return true;
-            } else if (this.isTelemetry(child)) {
-                return this.telemetryViewMap[keyString] && this.objectViewMap[keyString];
-            } else {
-                return this.objectViewMap[keyString];
-            }
-        },
-        addChild(child) {
-            if (this.isItemAlreadyTracked(child)) {
-                return;
-            }
+      if (item.type === 'telemetry-view') {
+        telemetryViewCount = --this.telemetryViewMap[keyString];
 
-            let type;
+        if (telemetryViewCount === 0) {
+          delete this.telemetryViewMap[keyString];
+        }
+      } else if (item.type === 'subobject-view') {
+        objectViewCount = --this.objectViewMap[keyString];
 
-            if (this.isTelemetry(child)) {
-                type = 'telemetry-view';
-            } else {
-                type = 'subobject-view';
-            }
+        if (objectViewCount === 0) {
+          delete this.objectViewMap[keyString];
+        }
+      }
 
-            this.addItem(type, child);
-        },
-        removeChild(identifier) {
-            let keyString = this.openmct.objects.makeKeyString(identifier);
-
-            if (this.objectViewMap[keyString]) {
-                delete this.objectViewMap[keyString];
-                this.removeFromConfiguration(keyString);
-            } else if (this.telemetryViewMap[keyString]) {
-                delete this.telemetryViewMap[keyString];
-                this.removeFromConfiguration(keyString);
-            }
-        },
-        removeFromConfiguration(keyString) {
-            let layoutItems = this.layoutItems.filter(item => {
-                if (!item.identifier) {
-                    return true;
-                } else {
-                    return this.openmct.objects.makeKeyString(item.identifier) !== keyString;
-                }
-            });
-            this.mutate("configuration.items", layoutItems);
-            this.$el.click();
-        },
-        orderItem(position, selectedItems) {
-            let delta = ORDERS[position];
-            let indices = [];
-            let items = [];
-
-            Object.assign(items, this.layoutItems);
-            this.selectedLayoutItems.forEach(selectedItem => {
-                indices.push(this.layoutItems.indexOf(selectedItem));
-            });
-            indices.sort((a, b) => a - b);
+      if (!telemetryViewCount && !objectViewCount) {
+        this.removeFromComposition(item);
+      }
+    },
+    removeFromComposition(item) {
+      this.composition.remove(item);
+    },
+    initializeItems() {
+      this.telemetryViewMap = {};
+      this.objectViewMap = {};
+
+      let removedItems = [];
+      this.layoutItems.forEach((item) => {
+        if (item.identifier) {
+          if (this.containsObject(item.identifier)) {
+            this.trackItem(item);
+          } else {
+            removedItems.push(this.openmct.objects.makeKeyString(item.identifier));
+          }
+        }
+      });
 
-            if (position === 'top' || position === 'up') {
-                indices.reverse();
-            }
+      this.startTransaction();
+      removedItems.forEach(this.removeFromConfiguration);
 
-            if (position === 'top' || position === 'bottom') {
-                this.moveToTopOrBottom(position, indices, items, delta);
-            } else {
-                this.moveUpOrDown(position, indices, items, delta);
-            }
+      return this.endTransaction();
+    },
+    isItemAlreadyTracked(child) {
+      let found = false;
+      let keyString = this.openmct.objects.makeKeyString(child.identifier);
 
-            this.mutate('configuration.items', this.layoutItems);
-        },
-        moveUpOrDown(position, indices, items, delta) {
-            let previousItemIndex = -1;
-            let newIndex = -1;
-
-            indices.forEach((itemIndex, index) => {
-                let isAdjacentItemSelected = position === 'up'
-                    ? itemIndex + 1 === previousItemIndex
-                    : itemIndex - 1 === previousItemIndex;
-
-                if (index > 0 && isAdjacentItemSelected) {
-                    if (position === 'up') {
-                        newIndex -= 1;
-                    } else {
-                        newIndex += 1;
-                    }
-                } else {
-                    newIndex = Math.max(Math.min(itemIndex + delta, this.layoutItems.length - 1), 0);
-                }
+      this.layoutItems.forEach((item) => {
+        if (item.identifier) {
+          let itemKeyString = this.openmct.objects.makeKeyString(item.identifier);
 
-                previousItemIndex = itemIndex;
-                this.updateItemOrder(newIndex, itemIndex, items);
-            });
-        },
-        moveToTopOrBottom(position, indices, items, delta) {
-            let newIndex = -1;
-
-            indices.forEach((itemIndex, index) => {
-                if (index === 0) {
-                    newIndex = Math.max(Math.min(itemIndex + delta, this.layoutItems.length - 1), 0);
-                } else {
-                    if (position === 'top') {
-                        newIndex -= 1;
-                    } else {
-                        newIndex += 1;
-                    }
-                }
+          if (itemKeyString === keyString) {
+            found = true;
 
-                this.updateItemOrder(newIndex, itemIndex, items);
-            });
-        },
-        updateItemOrder(newIndex, itemIndex, items) {
-            if (newIndex !== itemIndex) {
-                this.layoutItems.splice(itemIndex, 1);
-                this.layoutItems.splice(newIndex, 0, items[itemIndex]);
-            }
-        },
-        updateTelemetryFormat(item, format) {
-            let index = this.layoutItems.findIndex((layoutItem) => {
-                return layoutItem.id === item.id;
-            });
+            return;
+          }
+        }
+      });
+
+      if (found) {
+        return true;
+      } else if (this.isTelemetry(child)) {
+        return this.telemetryViewMap[keyString] && this.objectViewMap[keyString];
+      } else {
+        return this.objectViewMap[keyString];
+      }
+    },
+    addChild(child) {
+      if (this.isItemAlreadyTracked(child)) {
+        return;
+      }
 
-            item.format = format;
-            this.mutate(`configuration.items[${index}]`, item);
-        },
-        createNewDomainObject(domainObject, composition, viewType, nameExtension, model) {
-            let identifier = {
-                key: uuid(),
-                namespace: this.domainObject.identifier.namespace
-            };
-            let type = this.openmct.types.get(viewType);
-            let parentKeyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-            let objectName = nameExtension ? `${domainObject.name}-${nameExtension}` : domainObject.name;
-            let object = {};
-
-            if (model) {
-                object = _.cloneDeep(model);
-            } else {
-                object.type = viewType;
-                type.definition.initialize(object);
-                object.composition.push(...composition);
-            }
+      let type;
 
-            if (object.modified || object.persisted) {
-                object.modified = undefined;
-                object.persisted = undefined;
-                delete object.modified;
-                delete object.persisted;
-            }
+      if (this.isTelemetry(child)) {
+        type = 'telemetry-view';
+      } else {
+        type = 'subobject-view';
+      }
 
-            object.name = objectName;
-            object.identifier = identifier;
-            object.location = parentKeyString;
+      this.addItem(type, child);
+    },
+    removeChild(identifier) {
+      let keyString = this.openmct.objects.makeKeyString(identifier);
+
+      if (this.objectViewMap[keyString]) {
+        delete this.objectViewMap[keyString];
+        this.removeFromConfiguration(keyString);
+      } else if (this.telemetryViewMap[keyString]) {
+        delete this.telemetryViewMap[keyString];
+        this.removeFromConfiguration(keyString);
+      }
+    },
+    removeFromConfiguration(keyString) {
+      let layoutItems = this.layoutItems.filter((item) => {
+        if (!item.identifier) {
+          return true;
+        } else {
+          return this.openmct.objects.makeKeyString(item.identifier) !== keyString;
+        }
+      });
+      this.layoutItems = [...layoutItems];
+      this.mutate('configuration.items', layoutItems);
+      this.clearSelection();
+    },
+    orderItem(position, selectedItems) {
+      let delta = ORDERS[position];
+      let indices = [];
+      let items = [];
+
+      Object.assign(items, this.layoutItems);
+      this.selectedLayoutItems.forEach((selectedItem) => {
+        indices.push(this.layoutItems.indexOf(selectedItem));
+      });
+      indices.sort((a, b) => a - b);
+
+      if (position === 'top' || position === 'up') {
+        indices.reverse();
+      }
+
+      if (position === 'top' || position === 'bottom') {
+        this.moveToTopOrBottom(position, indices, items, delta);
+      } else {
+        this.moveUpOrDown(position, indices, items, delta);
+      }
+
+      this.mutate('configuration.items', this.layoutItems);
+    },
+    moveUpOrDown(position, indices, items, delta) {
+      let previousItemIndex = -1;
+      let newIndex = -1;
+
+      indices.forEach((itemIndex, index) => {
+        let isAdjacentItemSelected =
+          position === 'up'
+            ? itemIndex + 1 === previousItemIndex
+            : itemIndex - 1 === previousItemIndex;
+
+        if (index > 0 && isAdjacentItemSelected) {
+          if (position === 'up') {
+            newIndex -= 1;
+          } else {
+            newIndex += 1;
+          }
+        } else {
+          newIndex = Math.max(Math.min(itemIndex + delta, this.layoutItems.length - 1), 0);
+        }
 
-            let savedResolve;
-            this.openmct.objects.save(object).then(() => {
-                savedResolve(object);
-            });
+        previousItemIndex = itemIndex;
+        this.updateItemOrder(newIndex, itemIndex, items);
+      });
+    },
+    moveToTopOrBottom(position, indices, items, delta) {
+      let newIndex = -1;
+
+      indices.forEach((itemIndex, index) => {
+        if (index === 0) {
+          newIndex = Math.max(Math.min(itemIndex + delta, this.layoutItems.length - 1), 0);
+        } else {
+          if (position === 'top') {
+            newIndex -= 1;
+          } else {
+            newIndex += 1;
+          }
+        }
 
-            return new Promise((resolve) => {
-                savedResolve = resolve;
-            });
-        },
-        convertToTelemetryView(identifier, position) {
-            this.openmct.objects.get(identifier).then((domainObject) => {
-                this.composition.add(domainObject);
-                this.addItem('telemetry-view', domainObject, position);
-            });
-        },
-        dispatchMultipleSelection(selectItemsArray) {
-            let event = new MouseEvent('click', {
-                bubbles: true,
-                shiftKey: true,
-                cancelable: true,
-                view: window
-            });
+        this.updateItemOrder(newIndex, itemIndex, items);
+      });
+    },
+    updateItemOrder(newIndex, itemIndex, items) {
+      if (newIndex !== itemIndex) {
+        this.layoutItems.splice(itemIndex, 1);
+        this.layoutItems.splice(newIndex, 0, items[itemIndex]);
+      }
+    },
+    updateTelemetryFormat(item, format) {
+      let index = this.layoutItems.findIndex((layoutItem) => {
+        return layoutItem.id === item.id;
+      });
 
-            selectItemsArray.forEach((id) => {
-                let refId = `layout-item-${id}`;
-                let component = this.$refs[refId] && this.$refs[refId][0];
+      item.format = format;
+      this.mutate(`configuration.items[${index}]`, item);
+    },
+    createNewDomainObject(domainObject, composition, viewType, nameExtension, model) {
+      let identifier = {
+        key: uuid(),
+        namespace: this.domainObject.identifier.namespace
+      };
+      let type = this.openmct.types.get(viewType);
+      let parentKeyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+      let objectName = nameExtension ? `${domainObject.name}-${nameExtension}` : domainObject.name;
+      let object = {};
+
+      if (model) {
+        object = _.cloneDeep(model);
+      } else {
+        object.type = viewType;
+        type.definition.initialize(object);
+        object.composition.push(...composition);
+      }
+
+      if (object.modified || object.persisted) {
+        object.modified = undefined;
+        object.persisted = undefined;
+        delete object.modified;
+        delete object.persisted;
+      }
+
+      object.name = objectName;
+      object.identifier = identifier;
+      object.location = parentKeyString;
+
+      let savedResolve;
+      this.openmct.objects.save(object).then(() => {
+        savedResolve(object);
+      });
+
+      return new Promise((resolve) => {
+        savedResolve = resolve;
+      });
+    },
+    convertToTelemetryView(identifier, position) {
+      this.openmct.objects.get(identifier).then((domainObject) => {
+        this.composition.add(domainObject);
+        this.addItem('telemetry-view', domainObject, position);
+      });
+    },
+    dispatchMultipleSelection(selectItemsArray) {
+      let event = new MouseEvent('click', {
+        bubbles: true,
+        shiftKey: true,
+        cancelable: true,
+        view: window
+      });
+
+      selectItemsArray.forEach((id) => {
+        let refId = `layout-item-${id}`;
+        let component = this.$refs[refId] && this.$refs[refId][0];
+
+        if (component) {
+          component.immediatelySelect = event;
+          component.$el.dispatchEvent(event);
+        }
+      });
+    },
+    duplicateItem(selectedItems) {
+      let objectStyles = this.domainObject.configuration.objectStyles || {};
+      let selectItemsArray = [];
+      let newDomainObjectsArray = [];
 
-                if (component) {
-                    component.immediatelySelect = event;
-                    component.$el.dispatchEvent(event);
-                }
-            });
-        },
-        duplicateItem(selectedItems) {
-            let objectStyles = this.domainObject.configuration.objectStyles || {};
-            let selectItemsArray = [];
-            let newDomainObjectsArray = [];
+      selectedItems.forEach((selectedItem) => {
+        let layoutItem = selectedItem[0].context.layoutItem;
+        let domainObject = selectedItem[0].context.item;
+        let layoutItemStyle = objectStyles[layoutItem.id];
+        let copy = _.cloneDeep(layoutItem);
 
-            selectedItems.forEach(selectedItem => {
-                let layoutItem = selectedItem[0].context.layoutItem;
-                let domainObject = selectedItem[0].context.item;
-                let layoutItemStyle = objectStyles[layoutItem.id];
-                let copy = _.cloneDeep(layoutItem);
+        copy.id = uuid();
+        selectItemsArray.push(copy.id);
 
-                copy.id = uuid();
-                selectItemsArray.push(copy.id);
+        let offsetKeys = ['x', 'y'];
 
-                let offsetKeys = ['x', 'y'];
+        if (copy.type === 'line-view') {
+          offsetKeys = offsetKeys.concat(['x2', 'y2']);
+        }
 
-                if (copy.type === 'line-view') {
-                    offsetKeys = offsetKeys.concat(['x2', 'y2']);
-                }
+        if (copy.type === 'subobject-view') {
+          this.createNewDomainObject(
+            domainObject,
+            domainObject.composition,
+            domainObject.type,
+            'duplicate',
+            domainObject
+          ).then((newDomainObject) => {
+            newDomainObjectsArray.push(newDomainObject);
+            copy.identifier = newDomainObject.identifier;
+          });
+        }
 
-                if (copy.type === 'subobject-view') {
-                    this.createNewDomainObject(domainObject, domainObject.composition, domainObject.type, 'duplicate', domainObject).then((newDomainObject) => {
-                        newDomainObjectsArray.push(newDomainObject);
-                        copy.identifier = newDomainObject.identifier;
-                    });
-                }
+        offsetKeys.forEach((key) => {
+          copy[key] += DUPLICATE_OFFSET;
+        });
 
-                offsetKeys.forEach(key => {
-                    copy[key] += DUPLICATE_OFFSET;
-                });
+        if (layoutItemStyle) {
+          objectStyles[copy.id] = layoutItemStyle;
+        }
 
-                if (layoutItemStyle) {
-                    objectStyles[copy.id] = layoutItemStyle;
-                }
+        this.trackItem(copy);
+        this.layoutItems.push(copy);
+      });
 
-                this.trackItem(copy);
-                this.layoutItems.push(copy);
-            });
+      this.$nextTick(() => {
+        this.openmct.objects.mutate(this.domainObject, 'configuration.items', this.layoutItems);
+        this.openmct.objects.mutate(this.domainObject, 'configuration.objectStyles', objectStyles);
+        this.clearSelection();
 
-            this.$nextTick(() => {
-                this.openmct.objects.mutate(this.domainObject, "configuration.items", this.layoutItems);
-                this.openmct.objects.mutate(this.domainObject, "configuration.objectStyles", objectStyles);
-                this.$el.click(); //clear selection;
+        newDomainObjectsArray.forEach((domainObject) => {
+          this.composition.add(domainObject);
+        });
+        this.dispatchMultipleSelection(selectItemsArray);
+      });
+    },
+    mergeMultipleTelemetryViews(selection, viewType) {
+      let identifiers = selection.map((selectedItem) => {
+        return selectedItem[0].context.layoutItem.identifier;
+      });
+      let firstDomainObject = selection[0][0].context.item;
+      let firstLayoutItem = selection[0][0].context.layoutItem;
+      let position = [firstLayoutItem.x, firstLayoutItem.y];
+      let mockDomainObject = {
+        name: 'Merged Telemetry Views',
+        identifier: firstDomainObject.identifier
+      };
+      this.createNewDomainObject(mockDomainObject, identifiers, viewType).then(
+        (newDomainObject) => {
+          this.composition.add(newDomainObject);
+          this.addItem('subobject-view', newDomainObject, position);
+          this.removeItem(selection);
+          this.initSelectIndex = this.layoutItems.length - 1;
+        }
+      );
+    },
+    mergeMultipleOverlayPlots(selection, viewType) {
+      let overlayPlots = selection.map((selectedItem) => selectedItem[0].context.item);
+      let overlayPlotIdentifiers = overlayPlots.map((overlayPlot) => overlayPlot.identifier);
+      let firstOverlayPlot = overlayPlots[0];
+      let firstLayoutItem = selection[0][0].context.layoutItem;
+      let position = [firstLayoutItem.x, firstLayoutItem.y];
+      let mockDomainObject = {
+        name: 'Merged Overlay Plots',
+        identifier: firstOverlayPlot.identifier
+      };
+      this.createNewDomainObject(mockDomainObject, overlayPlotIdentifiers, viewType).then(
+        (newDomainObject) => {
+          let newDomainObjectKeyString = this.openmct.objects.makeKeyString(
+            newDomainObject.identifier
+          );
+          let domainObjectKeyString = this.openmct.objects.makeKeyString(
+            this.domainObject.identifier
+          );
+
+          this.composition.add(newDomainObject);
+          this.addItem('subobject-view', newDomainObject, position);
+
+          overlayPlots.forEach((overlayPlot) => {
+            if (overlayPlot.location === domainObjectKeyString) {
+              this.openmct.objects.mutate(overlayPlot, 'location', newDomainObjectKeyString);
+            }
+          });
 
-                newDomainObjectsArray.forEach(domainObject => {
-                    this.composition.add(domainObject);
-                });
-                this.dispatchMultipleSelection(selectItemsArray);
-            });
-        },
-        mergeMultipleTelemetryViews(selection, viewType) {
-            let identifiers = selection.map(selectedItem => {
-                return selectedItem[0].context.layoutItem.identifier;
-            });
-            let firstDomainObject = selection[0][0].context.item;
-            let firstLayoutItem = selection[0][0].context.layoutItem;
-            let position = [firstLayoutItem.x, firstLayoutItem.y];
-            let mockDomainObject = {
-                name: 'Merged Telemetry Views',
-                identifier: firstDomainObject.identifier
-            };
-            this.createNewDomainObject(mockDomainObject, identifiers, viewType).then((newDomainObject) => {
-                this.composition.add(newDomainObject);
-                this.addItem('subobject-view', newDomainObject, position);
-                this.removeItem(selection);
-                this.initSelectIndex = this.layoutItems.length - 1;
+          this.removeItem(selection);
+          this.initSelectIndex = this.layoutItems.length - 1;
+        }
+      );
+    },
+    getTelemetryIdentifiers(domainObject) {
+      let method = TELEMETRY_IDENTIFIER_FUNCTIONS[domainObject.type];
+
+      if (method) {
+        return method(domainObject, this.openmct);
+      } else {
+        throw 'No method identified for domainObject type';
+      }
+    },
+    switchViewType(context, viewType, selection) {
+      let domainObject = context.item;
+      let layoutItem = context.layoutItem;
+      let position = [layoutItem.x, layoutItem.y];
+      let layoutType = 'subobject-view';
+
+      if (layoutItem.type === 'telemetry-view') {
+        this.createNewDomainObject(domainObject, [domainObject.identifier], viewType).then(
+          (newDomainObject) => {
+            this.composition.add(newDomainObject);
+            this.addItem(layoutType, newDomainObject, position);
+          }
+        );
+      } else {
+        this.getTelemetryIdentifiers(domainObject).then((identifiers) => {
+          if (viewType === 'telemetry-view') {
+            identifiers.forEach((identifier, index) => {
+              let positionX = position[0] + index * DUPLICATE_OFFSET;
+              let positionY = position[1] + index * DUPLICATE_OFFSET;
+
+              this.convertToTelemetryView(identifier, [positionX, positionY]);
             });
-        },
-        mergeMultipleOverlayPlots(selection, viewType) {
-            let overlayPlots = selection.map(selectedItem => selectedItem[0].context.item);
-            let overlayPlotIdentifiers = overlayPlots.map(overlayPlot => overlayPlot.identifier);
-            let firstOverlayPlot = overlayPlots[0];
-            let firstLayoutItem = selection[0][0].context.layoutItem;
-            let position = [firstLayoutItem.x, firstLayoutItem.y];
-            let mockDomainObject = {
-                name: 'Merged Overlay Plots',
-                identifier: firstOverlayPlot.identifier
-            };
-            this.createNewDomainObject(mockDomainObject, overlayPlotIdentifiers, viewType).then((newDomainObject) => {
-                let newDomainObjectKeyString = this.openmct.objects.makeKeyString(newDomainObject.identifier);
-                let domainObjectKeyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-
+          } else {
+            this.createNewDomainObject(domainObject, identifiers, viewType).then(
+              (newDomainObject) => {
                 this.composition.add(newDomainObject);
-                this.addItem('subobject-view', newDomainObject, position);
-
-                overlayPlots.forEach(overlayPlot => {
-                    if (overlayPlot.location === domainObjectKeyString) {
-                        this.openmct.objects.mutate(overlayPlot, 'location', newDomainObjectKeyString);
-                    }
-                });
-
-                this.removeItem(selection);
-                this.initSelectIndex = this.layoutItems.length - 1;
-            });
-        },
-        getTelemetryIdentifiers(domainObject) {
-            let method = TELEMETRY_IDENTIFIER_FUNCTIONS[domainObject.type];
-
-            if (method) {
-                return method(domainObject, this.openmct);
-            } else {
-                throw 'No method identified for domainObject type';
-            }
-        },
-        switchViewType(context, viewType, selection) {
-            let domainObject = context.item;
-            let layoutItem = context.layoutItem;
-            let position = [layoutItem.x, layoutItem.y];
-            let layoutType = 'subobject-view';
-
-            if (layoutItem.type === 'telemetry-view') {
-                this.createNewDomainObject(domainObject, [domainObject.identifier], viewType).then((newDomainObject) => {
-                    this.composition.add(newDomainObject);
-                    this.addItem(layoutType, newDomainObject, position);
-                });
-            } else {
-                this.getTelemetryIdentifiers(domainObject).then((identifiers) => {
-                    if (viewType === 'telemetry-view') {
-                        identifiers.forEach((identifier, index) => {
-                            let positionX = position[0] + (index * DUPLICATE_OFFSET);
-                            let positionY = position[1] + (index * DUPLICATE_OFFSET);
-
-                            this.convertToTelemetryView(identifier, [positionX, positionY]);
-                        });
-                    } else {
-                        this.createNewDomainObject(domainObject, identifiers, viewType).then((newDomainObject) => {
-                            this.composition.add(newDomainObject);
-                            this.addItem(layoutType, newDomainObject, position);
-                        });
-                    }
-                });
-            }
+                this.addItem(layoutType, newDomainObject, position);
+              }
+            );
+          }
+        });
+      }
 
-            this.removeItem(selection);
-            this.initSelectIndex = this.layoutItems.length - 1; //restore selection
-        },
-        toggleGrid() {
-            this.showGrid = !this.showGrid;
-        },
-        updateViewContext(viewContext) {
-            this.viewContext.row = viewContext;
-        },
-        getViewContext() {
-            return this.viewContext;
-        }
+      this.removeItem(selection);
+      this.initSelectIndex = this.layoutItems.length - 1; //restore selection
+    },
+    startTransaction() {
+      if (!this.openmct.objects.isTransactionActive()) {
+        this.transaction = this.openmct.objects.startTransaction();
+      }
+    },
+    async endTransaction() {
+      if (!this.transaction) {
+        return;
+      }
+
+      await this.transaction.commit();
+      this.openmct.objects.endTransaction();
+      this.transaction = null;
+    },
+    toggleGrid() {
+      this.showGrid = !this.showGrid;
+    },
+    updateViewContext(viewContext) {
+      this.viewContext.row = viewContext;
+    },
+    getViewContext() {
+      return this.viewContext;
     }
+  }
 };
 </script>
diff --git a/src/plugins/displayLayout/components/DisplayLayoutGrid.vue b/src/plugins/displayLayout/components/DisplayLayoutGrid.vue
index e6127277cd5..85ac2b18e05 100644
--- a/src/plugins/displayLayout/components/DisplayLayoutGrid.vue
+++ b/src/plugins/displayLayout/components/DisplayLayoutGrid.vue
@@ -1,34 +1,75 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div
+  <div
     class="l-layout__grid-holder"
     :class="{ 'c-grid': showGrid }"
->
+    role="grid"
+    :aria-label="'Layout Grid'"
+    :aria-hidden="showGrid ? 'false' : 'true'"
+    :aria-live="showGrid ? 'polite' : 'off'"
+  >
     <div
-        v-if="gridSize[0] >= 3"
-        class="c-grid__x l-grid l-grid-x"
-        :style="[{ backgroundSize: gridSize[0] + 'px 100%' }]"
+      v-if="gridSize[0] >= 3"
+      class="c-grid__x l-grid l-grid-x"
+      :style="[
+        {
+          backgroundSize: gridSize[0] + 'px 100%',
+          width: gridDimensions[0] + 'px',
+          height: gridDimensions[1] + 'px'
+        }
+      ]"
     ></div>
     <div
-        v-if="gridSize[1] >= 3"
-        class="c-grid__y l-grid l-grid-y"
-        :style="[{ backgroundSize: '100%' + gridSize[1] + 'px' }]"
+      v-if="gridSize[1] >= 3"
+      class="c-grid__y l-grid l-grid-y"
+      :style="[
+        {
+          backgroundSize: '100%' + gridSize[1] + 'px',
+          width: gridDimensions[0] + 'px',
+          height: gridDimensions[1] + 'px'
+        }
+      ]"
     ></div>
-</div>
+  </div>
 </template>
 
 <script>
 export default {
-    props: {
-        gridSize: {
-            type: Array,
-            required: true,
-            validator: (arr) => arr && arr.length === 2
-                && arr.every(el => typeof el === 'number')
-        },
-        showGrid: {
-            type: Boolean,
-            required: true
-        }
+  props: {
+    gridSize: {
+      type: Array,
+      required: true,
+      validator: (arr) => arr && arr.length === 2 && arr.every((el) => typeof el === 'number')
+    },
+    showGrid: {
+      type: Boolean,
+      required: true
+    },
+    gridDimensions: {
+      type: Array,
+      required: true,
+      validator: (arr) => arr && arr.length === 2 && arr.every((el) => typeof el === 'number')
     }
+  }
 };
 </script>
diff --git a/src/plugins/displayLayout/components/EditMarquee.vue b/src/plugins/displayLayout/components/EditMarquee.vue
index 301c148cfc8..1eebebf8f1c 100644
--- a/src/plugins/displayLayout/components/EditMarquee.vue
+++ b/src/plugins/displayLayout/components/EditMarquee.vue
@@ -1,191 +1,195 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 
 <template>
-<!-- Resize handles -->
-<div
-    class="c-frame-edit"
-    :style="marqueeStyle"
->
+  <!-- Resize handles -->
+  <div class="c-frame-edit" :style="marqueeStyle">
     <div
-        class="c-frame-edit__handle c-frame-edit__handle--nw"
-        @mousedown="startResize([1,1], [-1,-1], $event)"
+      class="c-frame-edit__handle c-frame-edit__handle--nw"
+      @mousedown.left="startResize([1, 1], [-1, -1], $event)"
     ></div>
     <div
-        class="c-frame-edit__handle c-frame-edit__handle--ne"
-        @mousedown="startResize([0,1], [1,-1], $event)"
+      class="c-frame-edit__handle c-frame-edit__handle--ne"
+      @mousedown.left="startResize([0, 1], [1, -1], $event)"
     ></div>
     <div
-        class="c-frame-edit__handle c-frame-edit__handle--sw"
-        @mousedown="startResize([1,0], [-1,1], $event)"
+      class="c-frame-edit__handle c-frame-edit__handle--sw"
+      @mousedown.left="startResize([1, 0], [-1, 1], $event)"
     ></div>
     <div
-        class="c-frame-edit__handle c-frame-edit__handle--se"
-        @mousedown="startResize([0,0], [1,1], $event)"
+      class="c-frame-edit__handle c-frame-edit__handle--se"
+      @mousedown.left="startResize([0, 0], [1, 1], $event)"
     ></div>
-</div>
+  </div>
 </template>
 
 <script>
-import LayoutDrag from './../LayoutDrag';
+import LayoutDrag from './../LayoutDrag.js';
 
 export default {
-    inject: ['openmct'],
-    props: {
-        selectedLayoutItems: {
-            type: Array,
-            default: undefined
-        },
-        gridSize: {
-            type: Array,
-            required: true,
-            validator: (arr) => arr && arr.length === 2
-                && arr.every(el => typeof el === 'number')
-        }
+  inject: ['openmct'],
+  props: {
+    selectedLayoutItems: {
+      type: Array,
+      default: undefined
     },
-    data() {
-        return {
-            dragPosition: undefined
-        };
-    },
-    computed: {
-        marqueePosition() {
-            let x = Number.POSITIVE_INFINITY;
-            let y = Number.POSITIVE_INFINITY;
-            let width = Number.NEGATIVE_INFINITY;
-            let height = Number.NEGATIVE_INFINITY;
+    gridSize: {
+      type: Array,
+      required: true,
+      validator: (arr) => arr && arr.length === 2 && arr.every((el) => typeof el === 'number')
+    }
+  },
+  emits: ['end-resize'],
+  data() {
+    return {
+      dragPosition: undefined
+    };
+  },
+  computed: {
+    marqueePosition() {
+      let x = Number.POSITIVE_INFINITY;
+      let y = Number.POSITIVE_INFINITY;
+      let width = Number.NEGATIVE_INFINITY;
+      let height = Number.NEGATIVE_INFINITY;
 
-            this.selectedLayoutItems.forEach(item => {
-                if (item.x2 !== undefined) {
-                    let lineWidth = Math.abs(item.x - item.x2);
-                    let lineMinX = Math.min(item.x, item.x2);
-                    x = Math.min(lineMinX, x);
-                    width = Math.max(lineWidth + lineMinX, width);
-                } else {
-                    x = Math.min(item.x, x);
-                    width = Math.max(item.width + item.x, width);
-                }
+      this.selectedLayoutItems.forEach((item) => {
+        if (item.x2 !== undefined) {
+          let lineWidth = Math.abs(item.x - item.x2);
+          let lineMinX = Math.min(item.x, item.x2);
+          x = Math.min(lineMinX, x);
+          width = Math.max(lineWidth + lineMinX, width);
+        } else {
+          x = Math.min(item.x, x);
+          width = Math.max(item.width + item.x, width);
+        }
 
-                if (item.y2 !== undefined) {
-                    let lineHeight = Math.abs(item.y - item.y2);
-                    let lineMinY = Math.min(item.y, item.y2);
-                    y = Math.min(lineMinY, y);
-                    height = Math.max(lineHeight + lineMinY, height);
-                } else {
-                    y = Math.min(item.y, y);
-                    height = Math.max(item.height + item.y, height);
-                }
-            });
+        if (item.y2 !== undefined) {
+          let lineHeight = Math.abs(item.y - item.y2);
+          let lineMinY = Math.min(item.y, item.y2);
+          y = Math.min(lineMinY, y);
+          height = Math.max(lineHeight + lineMinY, height);
+        } else {
+          y = Math.min(item.y, y);
+          height = Math.max(item.height + item.y, height);
+        }
+      });
 
-            if (this.dragPosition) {
-                [x, y] = this.dragPosition.position;
-                [width, height] = this.dragPosition.dimensions;
-            } else {
-                width = width - x;
-                height = height - y;
-            }
+      if (this.dragPosition) {
+        [x, y] = this.dragPosition.position;
+        [width, height] = this.dragPosition.dimensions;
+      } else {
+        width = width - x;
+        height = height - y;
+      }
 
-            return {
-                x: x,
-                y: y,
-                width: width,
-                height: height
-            };
-        },
-        marqueeStyle() {
-            return {
-                left: (this.gridSize[0] * this.marqueePosition.x) + 'px',
-                top: (this.gridSize[1] * this.marqueePosition.y) + 'px',
-                width: (this.gridSize[0] * this.marqueePosition.width) + 'px',
-                height: (this.gridSize[1] * this.marqueePosition.height) + 'px'
-            };
-        }
+      return {
+        x: x,
+        y: y,
+        width: width,
+        height: height
+      };
+    },
+    marqueeStyle() {
+      return {
+        left: this.gridSize[0] * this.marqueePosition.x + 'px',
+        top: this.gridSize[1] * this.marqueePosition.y + 'px',
+        width: this.gridSize[0] * this.marqueePosition.width + 'px',
+        height: this.gridSize[1] * this.marqueePosition.height + 'px'
+      };
+    }
+  },
+  methods: {
+    updatePosition(event) {
+      let currentPosition = [event.pageX, event.pageY];
+      this.initialPosition = this.initialPosition || currentPosition;
+      this.delta = currentPosition.map(
+        function (value, index) {
+          return value - this.initialPosition[index];
+        }.bind(this)
+      );
     },
-    methods: {
-        updatePosition(event) {
-            let currentPosition = [event.pageX, event.pageY];
-            this.initialPosition = this.initialPosition || currentPosition;
-            this.delta = currentPosition.map(function (value, index) {
-                return value - this.initialPosition[index];
-            }.bind(this));
-        },
-        startResize(posFactor, dimFactor, event) {
-            document.body.addEventListener('mousemove', this.continueResize);
-            document.body.addEventListener('mouseup', this.endResize);
-            this.marqueeStartPosition = {
-                position: [this.marqueePosition.x, this.marqueePosition.y],
-                dimensions: [this.marqueePosition.width, this.marqueePosition.height]
-            };
-            this.updatePosition(event);
-            this.activeDrag = new LayoutDrag(this.marqueeStartPosition, posFactor, dimFactor, this.gridSize);
-            event.preventDefault();
-        },
-        continueResize(event) {
-            event.preventDefault();
-            this.updatePosition(event);
-            this.dragPosition = this.activeDrag.getAdjustedPositionAndDimensions(this.delta);
-        },
-        endResize(event) {
-            document.body.removeEventListener('mousemove', this.continueResize);
-            document.body.removeEventListener('mouseup', this.endResize);
-            this.continueResize(event);
+    startResize(posFactor, dimFactor, event) {
+      document.body.addEventListener('mousemove', this.continueResize);
+      document.body.addEventListener('mouseup', this.endResize);
+      this.marqueeStartPosition = {
+        position: [this.marqueePosition.x, this.marqueePosition.y],
+        dimensions: [this.marqueePosition.width, this.marqueePosition.height]
+      };
+      this.updatePosition(event);
+      this.activeDrag = new LayoutDrag(
+        this.marqueeStartPosition,
+        posFactor,
+        dimFactor,
+        this.gridSize
+      );
+      event.preventDefault();
+    },
+    continueResize(event) {
+      event.preventDefault();
+      this.updatePosition(event);
+      this.dragPosition = this.activeDrag.getAdjustedPositionAndDimensions(this.delta);
+    },
+    endResize(event) {
+      document.body.removeEventListener('mousemove', this.continueResize);
+      document.body.removeEventListener('mouseup', this.endResize);
+      this.continueResize(event);
 
-            let marqueeStartWidth = this.marqueeStartPosition.dimensions[0];
-            let marqueeStartHeight = this.marqueeStartPosition.dimensions[1];
-            let marqueeStartX = this.marqueeStartPosition.position[0];
-            let marqueeStartY = this.marqueeStartPosition.position[1];
+      let marqueeStartWidth = this.marqueeStartPosition.dimensions[0];
+      let marqueeStartHeight = this.marqueeStartPosition.dimensions[1];
+      let marqueeStartX = this.marqueeStartPosition.position[0];
+      let marqueeStartY = this.marqueeStartPosition.position[1];
 
-            let marqueeEndX = this.dragPosition.position[0];
-            let marqueeEndY = this.dragPosition.position[1];
-            let marqueeEndWidth = this.dragPosition.dimensions[0];
-            let marqueeEndHeight = this.dragPosition.dimensions[1];
+      let marqueeEndX = this.dragPosition.position[0];
+      let marqueeEndY = this.dragPosition.position[1];
+      let marqueeEndWidth = this.dragPosition.dimensions[0];
+      let marqueeEndHeight = this.dragPosition.dimensions[1];
 
-            let scaleWidth = marqueeEndWidth / marqueeStartWidth;
-            let scaleHeight = marqueeEndHeight / marqueeStartHeight;
+      let scaleWidth = marqueeEndWidth / marqueeStartWidth;
+      let scaleHeight = marqueeEndHeight / marqueeStartHeight;
 
-            let marqueeStart = {
-                x: marqueeStartX,
-                y: marqueeStartY,
-                height: marqueeStartWidth,
-                width: marqueeStartHeight
-            };
-            let marqueeEnd = {
-                x: marqueeEndX,
-                y: marqueeEndY,
-                width: marqueeEndWidth,
-                height: marqueeEndHeight
-            };
-            let marqueeOffset = {
-                x: marqueeEnd.x - marqueeStart.x,
-                y: marqueeEnd.y - marqueeStart.y
-            };
+      let marqueeStart = {
+        x: marqueeStartX,
+        y: marqueeStartY,
+        height: marqueeStartWidth,
+        width: marqueeStartHeight
+      };
+      let marqueeEnd = {
+        x: marqueeEndX,
+        y: marqueeEndY,
+        width: marqueeEndWidth,
+        height: marqueeEndHeight
+      };
+      let marqueeOffset = {
+        x: marqueeEnd.x - marqueeStart.x,
+        y: marqueeEnd.y - marqueeStart.y
+      };
 
-            this.$emit('endResize', scaleWidth, scaleHeight, marqueeStart, marqueeOffset);
-            this.dragPosition = undefined;
-            this.initialPosition = undefined;
-            this.marqueeStartPosition = undefined;
-            this.delta = undefined;
-            event.preventDefault();
-        }
+      this.$emit('end-resize', scaleWidth, scaleHeight, marqueeStart, marqueeOffset);
+      this.dragPosition = undefined;
+      this.initialPosition = undefined;
+      this.marqueeStartPosition = undefined;
+      this.delta = undefined;
+      event.preventDefault();
     }
+  }
 };
 </script>
diff --git a/src/plugins/displayLayout/components/EllipseView.vue b/src/plugins/displayLayout/components/EllipseView.vue
new file mode 100644
index 00000000000..a8938a26d6f
--- /dev/null
+++ b/src/plugins/displayLayout/components/EllipseView.vue
@@ -0,0 +1,138 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <layout-frame
+    :item="item"
+    :grid-size="gridSize"
+    :is-editing="isEditing"
+    @move="move"
+    @end-move="endMove"
+  >
+    <template #content>
+      <div
+        class="c-ellipse-view u-style-receiver js-style-receiver"
+        :class="[styleClass]"
+        :style="style"
+        role="application"
+        aria-roledescription="draggable ellipse"
+        aria-label="Ellipse"
+      ></div>
+    </template>
+  </layout-frame>
+</template>
+
+<script>
+import conditionalStylesMixin from '../mixins/objectStyles-mixin.js';
+import LayoutFrame from './LayoutFrame.vue';
+
+export default {
+  makeDefinition() {
+    return {
+      fill: '#666666',
+      stroke: '',
+      x: 1,
+      y: 1,
+      width: 10,
+      height: 10
+    };
+  },
+  components: {
+    LayoutFrame
+  },
+  mixins: [conditionalStylesMixin],
+  inject: ['openmct'],
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    gridSize: {
+      type: Array,
+      required: true,
+      validator: (arr) => arr && arr.length === 2 && arr.every((el) => typeof el === 'number')
+    },
+    index: {
+      type: Number,
+      required: true
+    },
+    initSelect: Boolean,
+    isEditing: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: ['move', 'end-move'],
+  computed: {
+    style() {
+      if (this.itemStyle) {
+        return this.itemStyle;
+      } else {
+        return {
+          backgroundColor: this.item.fill,
+          border: this.item.stroke ? '1px solid ' + this.item.stroke : ''
+        };
+      }
+    }
+  },
+  watch: {
+    index(newIndex) {
+      if (!this.context) {
+        return;
+      }
+
+      this.context.index = newIndex;
+    },
+    item(newItem) {
+      if (!this.context) {
+        return;
+      }
+
+      this.context.layoutItem = newItem;
+    }
+  },
+  mounted() {
+    this.context = {
+      layoutItem: this.item,
+      index: this.index
+    };
+    this.removeSelectable = this.openmct.selection.selectable(
+      this.$el,
+      this.context,
+      this.initSelect
+    );
+  },
+  beforeUnmount() {
+    if (this.removeSelectable) {
+      this.removeSelectable();
+    }
+  },
+  methods: {
+    move(gridDelta) {
+      this.$emit('move', gridDelta);
+    },
+    endMove() {
+      this.$emit('end-move');
+    }
+  }
+};
+</script>
diff --git a/src/plugins/displayLayout/components/ImageView.vue b/src/plugins/displayLayout/components/ImageView.vue
index cf6c4efe4cf..a00bf600496 100644
--- a/src/plugins/displayLayout/components/ImageView.vue
+++ b/src/plugins/displayLayout/components/ImageView.vue
@@ -1,129 +1,138 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 
 <template>
-<layout-frame
+  <layout-frame
     :item="item"
     :grid-size="gridSize"
     :is-editing="isEditing"
-    @move="(gridDelta) => $emit('move', gridDelta)"
-    @endMove="() => $emit('endMove')"
->
-    <div
-        class="c-image-view"
-        :class="[styleClass]"
-        :style="style"
-    ></div>
-</layout-frame>
+    @move="move"
+    @end-move="endMove"
+  >
+    <template #content>
+      <div class="c-image-view" :style="style"></div>
+    </template>
+  </layout-frame>
 </template>
 
 <script>
+import conditionalStylesMixin from '../mixins/objectStyles-mixin.js';
 import LayoutFrame from './LayoutFrame.vue';
-import conditionalStylesMixin from "../mixins/objectStyles-mixin";
 
 export default {
-    makeDefinition(openmct, gridSize, element) {
-        return {
-            stroke: 'transparent',
-            x: 1,
-            y: 1,
-            width: 10,
-            height: 5,
-            url: element.url
-        };
+  makeDefinition(openmct, gridSize, element) {
+    return {
+      stroke: 'transparent',
+      x: 1,
+      y: 1,
+      width: 10,
+      height: 5,
+      url: element.url
+    };
+  },
+  components: {
+    LayoutFrame
+  },
+  mixins: [conditionalStylesMixin],
+  inject: ['openmct'],
+  props: {
+    item: {
+      type: Object,
+      required: true
     },
-    components: {
-        LayoutFrame
+    gridSize: {
+      type: Array,
+      required: true,
+      validator: (arr) => arr && arr.length === 2 && arr.every((el) => typeof el === 'number')
     },
-    mixins: [conditionalStylesMixin],
-    inject: ['openmct'],
-    props: {
-        item: {
-            type: Object,
-            required: true
-        },
-        gridSize: {
-            type: Array,
-            required: true,
-            validator: (arr) => arr && arr.length === 2
-                && arr.every(el => typeof el === 'number')
-        },
-        index: {
-            type: Number,
-            required: true
-        },
-        initSelect: Boolean,
-        isEditing: {
-            type: Boolean,
-            required: true
-        }
+    index: {
+      type: Number,
+      required: true
     },
-    computed: {
-        style() {
-            let backgroundImage = 'url(' + this.item.url + ')';
-            let border = '1px solid ' + this.item.stroke;
-
-            if (this.itemStyle) {
-                if (this.itemStyle.imageUrl !== undefined) {
-                    backgroundImage = 'url(' + this.itemStyle.imageUrl + ')';
-                }
-
-                border = this.itemStyle.border;
-            }
+    initSelect: Boolean,
+    isEditing: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: ['move', 'end-move'],
+  computed: {
+    style() {
+      let backgroundImage = 'url(' + this.item.url + ')';
+      let border = '1px solid ' + this.item.stroke;
 
-            return {
-                backgroundImage,
-                border
-            };
+      if (this.itemStyle) {
+        if (this.itemStyle.imageUrl !== undefined) {
+          backgroundImage = 'url(' + this.itemStyle.imageUrl + ')';
         }
-    },
-    watch: {
-        index(newIndex) {
-            if (!this.context) {
-                return;
-            }
 
-            this.context.index = newIndex;
-        },
-        item(newItem) {
-            if (!this.context) {
-                return;
-            }
+        border = this.itemStyle.border;
+      }
 
-            this.context.layoutItem = newItem;
-        }
+      return {
+        backgroundImage,
+        border
+      };
+    }
+  },
+  watch: {
+    index(newIndex) {
+      if (!this.context) {
+        return;
+      }
+
+      this.context.index = newIndex;
     },
-    mounted() {
-        this.context = {
-            layoutItem: this.item,
-            index: this.index
-        };
-        this.removeSelectable = this.openmct.selection.selectable(
-            this.$el, this.context, this.initSelect);
+    item(newItem) {
+      if (!this.context) {
+        return;
+      }
+
+      this.context.layoutItem = newItem;
+    }
+  },
+  mounted() {
+    this.context = {
+      layoutItem: this.item,
+      index: this.index
+    };
+    this.removeSelectable = this.openmct.selection.selectable(
+      this.$el,
+      this.context,
+      this.initSelect
+    );
+  },
+  beforeUnmount() {
+    if (this.removeSelectable) {
+      this.removeSelectable();
+    }
+  },
+  methods: {
+    move(gridDelta) {
+      this.$emit('move', gridDelta);
     },
-    destroyed() {
-        if (this.removeSelectable) {
-            this.removeSelectable();
-        }
+    endMove() {
+      this.$emit('end-move');
     }
+  }
 };
 </script>
diff --git a/src/plugins/displayLayout/components/LayoutFrame.vue b/src/plugins/displayLayout/components/LayoutFrame.vue
index 9880628eecc..f9f2a3a63a3 100644
--- a/src/plugins/displayLayout/components/LayoutFrame.vue
+++ b/src/plugins/displayLayout/components/LayoutFrame.vue
@@ -1,133 +1,148 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 
 <template>
-<div
+  <div
     class="l-layout__frame c-frame"
     :class="{
-        'no-frame': !item.hasFrame,
-        'u-inspectable': inspectable,
-        'is-in-small-container': size.width < 600 || size.height < 600
+      'no-frame': !item.hasFrame,
+      'u-inspectable': inspectable
     }"
     :style="style"
->
-    <slot></slot>
+  >
+    <slot name="content"></slot>
     <div
-        class="c-frame__move-bar"
-        @mousedown="isEditing ? startMove([1,1], [0,0], $event) : null"
+      class="c-frame__move-bar"
+      :aria-label="`Move ${typeName} Frame`"
+      @mousedown.left="startMove($event)"
     ></div>
-</div>
+  </div>
 </template>
 
 <script>
-import LayoutDrag from './../LayoutDrag';
 import _ from 'lodash';
 
+import DRAWING_OBJECT_TYPES from '../DrawingObjectTypes.js';
+import LayoutDrag from './../LayoutDrag.js';
+
 export default {
-    inject: ['openmct'],
-    props: {
-        item: {
-            type: Object,
-            required: true
-        },
-        gridSize: {
-            type: Array,
-            required: true,
-            validator: (arr) => arr && arr.length === 2
-                && arr.every(el => typeof el === 'number')
-        },
-        isEditing: {
-            type: Boolean,
-            required: true
-        }
+  inject: ['openmct'],
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    gridSize: {
+      type: Array,
+      required: true,
+      validator: (arr) => arr && arr.length === 2 && arr.every((el) => typeof el === 'number')
+    },
+    isEditing: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: ['move', 'end-move'],
+  computed: {
+    typeName() {
+      const { type } = this.item;
+      if (DRAWING_OBJECT_TYPES[type]) {
+        return DRAWING_OBJECT_TYPES[type].name;
+      }
+      return 'Sub-object';
     },
-    computed: {
-        size() {
-            let {width, height} = this.item;
+    size() {
+      let { width, height } = this.item;
 
-            return {
-                width: (this.gridSize[0] * width),
-                height: (this.gridSize[1] * height)
-            };
-        },
-        style() {
-            let {x, y, width, height} = this.item;
+      return {
+        width: this.gridSize[0] * width,
+        height: this.gridSize[1] * height
+      };
+    },
+    style() {
+      let { x, y, width, height } = this.item;
 
-            return {
-                left: (this.gridSize[0] * x) + 'px',
-                top: (this.gridSize[1] * y) + 'px',
-                width: (this.gridSize[0] * width) + 'px',
-                height: (this.gridSize[1] * height) + 'px',
-                minWidth: (this.gridSize[0] * width) + 'px',
-                minHeight: (this.gridSize[1] * height) + 'px'
-            };
-        },
-        inspectable() {
-            return this.item.type === 'subobject-view' || this.item.type === 'telemetry-view';
-        }
+      return {
+        left: this.gridSize[0] * x + 'px',
+        top: this.gridSize[1] * y + 'px',
+        width: this.gridSize[0] * width + 'px',
+        height: this.gridSize[1] * height + 'px',
+        minWidth: this.gridSize[0] * width + 'px',
+        minHeight: this.gridSize[1] * height + 'px'
+      };
+    },
+    inspectable() {
+      return this.item.type === 'subobject-view' || this.item.type === 'telemetry-view';
+    }
+  },
+  methods: {
+    updatePosition(event) {
+      let currentPosition = [event.pageX, event.pageY];
+      this.initialPosition = this.initialPosition || currentPosition;
+      this.delta = currentPosition.map(
+        function (value, index) {
+          return value - this.initialPosition[index];
+        }.bind(this)
+      );
     },
-    methods: {
-        updatePosition(event) {
-            let currentPosition = [event.pageX, event.pageY];
-            this.initialPosition = this.initialPosition || currentPosition;
-            this.delta = currentPosition.map(function (value, index) {
-                return value - this.initialPosition[index];
-            }.bind(this));
-        },
-        startMove(posFactor, dimFactor, event) {
-            document.body.addEventListener('mousemove', this.continueMove);
-            document.body.addEventListener('mouseup', this.endMove);
-            this.dragPosition = {
-                position: [this.item.x, this.item.y]
-            };
-            this.updatePosition(event);
-            this.activeDrag = new LayoutDrag(this.dragPosition, posFactor, dimFactor, this.gridSize);
-            event.preventDefault();
-        },
-        continueMove(event) {
-            event.preventDefault();
-            this.updatePosition(event);
-            let newPosition = this.activeDrag.getAdjustedPosition(this.delta);
+    startMove(event, posFactor = [1, 1], dimFactor = [0, 0]) {
+      if (!this.isEditing) {
+        return;
+      }
 
-            if (!_.isEqual(newPosition, this.dragPosition)) {
-                this.dragPosition = newPosition;
-                this.$emit('move', this.toGridDelta(this.delta));
-            }
-        },
-        endMove(event) {
-            document.body.removeEventListener('mousemove', this.continueMove);
-            document.body.removeEventListener('mouseup', this.endMove);
-            this.continueMove(event);
-            this.$emit('endMove');
-            this.dragPosition = undefined;
-            this.initialPosition = undefined;
-            this.delta = undefined;
-            event.preventDefault();
-        },
-        toGridDelta(pixelDelta) {
-            return pixelDelta.map((v, i) => {
-                return Math.round(v / this.gridSize[i]);
-            });
-        }
+      document.body.addEventListener('mousemove', this.continueMove);
+      document.body.addEventListener('mouseup', this.endMove);
+      this.dragPosition = {
+        position: [this.item.x, this.item.y]
+      };
+      this.updatePosition(event);
+      this.activeDrag = new LayoutDrag(this.dragPosition, posFactor, dimFactor, this.gridSize);
+      event.preventDefault();
+    },
+    continueMove(event) {
+      event.preventDefault();
+      this.updatePosition(event);
+      let newPosition = this.activeDrag.getAdjustedPosition(this.delta);
+
+      if (!_.isEqual(newPosition, this.dragPosition)) {
+        this.dragPosition = newPosition;
+        this.$emit('move', this.toGridDelta(this.delta));
+      }
+    },
+    endMove(event) {
+      document.body.removeEventListener('mousemove', this.continueMove);
+      document.body.removeEventListener('mouseup', this.endMove);
+      this.continueMove(event);
+      this.$emit('end-move');
+      this.dragPosition = undefined;
+      this.initialPosition = undefined;
+      this.delta = undefined;
+      event.preventDefault();
+    },
+    toGridDelta(pixelDelta) {
+      return pixelDelta.map((v, i) => {
+        return Math.round(v / this.gridSize[i]);
+      });
     }
+  }
 };
 </script>
diff --git a/src/plugins/displayLayout/components/LineView.vue b/src/plugins/displayLayout/components/LineView.vue
index 8c587e0d7e9..622ec487b84 100644
--- a/src/plugins/displayLayout/components/LineView.vue
+++ b/src/plugins/displayLayout/components/LineView.vue
@@ -1,376 +1,380 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 
 <template>
-<div
+  <div
     class="l-layout__frame c-frame no-frame c-line-view"
     :class="[styleClass]"
     :style="style"
->
-    <svg
-        width="100%"
-        height="100%"
-    >
-        <line
-            class="c-line-view__hover-indicator"
-            v-bind="linePosition"
-            vector-effect="non-scaling-stroke"
-        />
-        <line
-            class="c-line-view__line"
-            v-bind="linePosition"
-            :stroke="stroke"
-            vector-effect="non-scaling-stroke"
-        />
+    aria-role="application"
+    aria-roledescription="draggable line"
+    aria-label="Line"
+  >
+    <svg width="100%" height="100%">
+      <line
+        v-bind="linePosition"
+        class="c-line-view__hover-indicator"
+        vector-effect="non-scaling-stroke"
+      />
+      <line
+        v-bind="linePosition"
+        class="c-line-view__line"
+        :stroke="stroke"
+        vector-effect="non-scaling-stroke"
+      />
     </svg>
 
-    <div
-        class="c-frame__move-bar"
-        @mousedown="startDrag($event)"
-    ></div>
-    <div
-        v-if="showFrameEdit"
-        class="c-frame-edit"
-    >
-        <div
-            class="c-frame-edit__handle"
-            :class="startHandleClass"
-            @mousedown="startDrag($event, 'start')"
-        >
-        </div>
-        <div
-            class="c-frame-edit__handle"
-            :class="endHandleClass"
-            @mousedown="startDrag($event, 'end')"
-        ></div>
+    <div class="c-frame__move-bar" @mousedown.left="startDrag($event)"></div>
+    <div v-if="showFrameEdit" class="c-frame-edit">
+      <div
+        class="c-frame-edit__handle"
+        :class="startHandleClass"
+        @mousedown="startDrag($event, 'start')"
+      ></div>
+      <div
+        class="c-frame-edit__handle"
+        :class="endHandleClass"
+        @mousedown="startDrag($event, 'end')"
+      ></div>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
-
-import conditionalStylesMixin from "../mixins/objectStyles-mixin";
 import _ from 'lodash';
 
+import conditionalStylesMixin from '../mixins/objectStyles-mixin.js';
+
 const START_HANDLE_QUADRANTS = {
-    1: 'c-frame-edit__handle--sw',
-    2: 'c-frame-edit__handle--se',
-    3: 'c-frame-edit__handle--ne',
-    4: 'c-frame-edit__handle--nw',
-    5: 'c-frame-edit__handle--nw',
-    6: 'c-frame-edit__handle--ne'
+  1: 'c-frame-edit__handle--sw',
+  2: 'c-frame-edit__handle--se',
+  3: 'c-frame-edit__handle--ne',
+  4: 'c-frame-edit__handle--nw',
+  5: 'c-frame-edit__handle--nw',
+  6: 'c-frame-edit__handle--ne'
 };
 
 const END_HANDLE_QUADRANTS = {
-    1: 'c-frame-edit__handle--ne',
-    2: 'c-frame-edit__handle--nw',
-    3: 'c-frame-edit__handle--sw',
-    4: 'c-frame-edit__handle--se',
-    5: 'c-frame-edit__handle--sw',
-    6: 'c-frame-edit__handle--nw'
+  1: 'c-frame-edit__handle--ne',
+  2: 'c-frame-edit__handle--nw',
+  3: 'c-frame-edit__handle--sw',
+  4: 'c-frame-edit__handle--se',
+  5: 'c-frame-edit__handle--sw',
+  6: 'c-frame-edit__handle--nw'
 };
 
 export default {
-    makeDefinition() {
-        return {
-            x: 5,
-            y: 10,
-            x2: 10,
-            y2: 5,
-            stroke: '#717171'
-        };
+  makeDefinition() {
+    return {
+      x: 5,
+      y: 10,
+      x2: 10,
+      y2: 5,
+      stroke: '#666666'
+    };
+  },
+  mixins: [conditionalStylesMixin],
+  inject: ['openmct'],
+  props: {
+    item: {
+      type: Object,
+      required: true
     },
-    mixins: [conditionalStylesMixin],
-    inject: ['openmct'],
-    props: {
-        item: {
-            type: Object,
-            required: true
-        },
-        gridSize: {
-            type: Array,
-            required: true,
-            validator: (arr) => arr && arr.length === 2
-                && arr.every(el => typeof el === 'number')
-        },
-        initSelect: Boolean,
-        index: {
-            type: Number,
-            required: true
-        },
-        multiSelect: Boolean
+    gridSize: {
+      type: Array,
+      required: true,
+      validator: (arr) => arr && arr.length === 2 && arr.every((el) => typeof el === 'number')
     },
-    data() {
-        return {
-            dragPosition: undefined,
-            dragging: undefined,
-            selection: []
-        };
+    initSelect: Boolean,
+    index: {
+      type: Number,
+      required: true
     },
-    computed: {
-        showFrameEdit() {
-            let layoutItem = this.selection.length > 0 && this.selection[0][0].context.layoutItem;
-
-            return !this.multiSelect && layoutItem && layoutItem.id === this.item.id;
-        },
-        position() {
-            let {x, y, x2, y2} = this.item;
-            if (this.dragging && this.dragPosition) {
-                ({x, y, x2, y2} = this.dragPosition);
-            }
+    multiSelect: Boolean,
+    isEditing: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: ['move', 'end-move', 'end-line-resize'],
+  data() {
+    return {
+      dragPosition: undefined,
+      dragging: undefined,
+      selection: []
+    };
+  },
+  computed: {
+    showFrameEdit() {
+      let layoutItem = this.selection.length > 0 && this.selection[0][0].context.layoutItem;
 
-            return {
-                x,
-                y,
-                x2,
-                y2
-            };
-        },
-        stroke() {
-            if (this.itemStyle) {
-                if (this.itemStyle.border) {
-                    return this.itemStyle.border.replace('1px solid ', '');
-                }
+      return this.isEditing && !this.multiSelect && layoutItem && layoutItem.id === this.item.id;
+    },
+    position() {
+      let { x, y, x2, y2 } = this.item;
+      if (this.dragging && this.dragPosition) {
+        ({ x, y, x2, y2 } = this.dragPosition);
+      }
 
-                return '';
-            } else {
-                return this.item.stroke;
-            }
-        },
-        style() {
-            let {x, y, x2, y2} = this.position;
-            let width = Math.max(this.gridSize[0] * Math.abs(x - x2), 1);
-            let height = Math.max(this.gridSize[1] * Math.abs(y - y2), 1);
-            let left = this.gridSize[0] * Math.min(x, x2);
-            let top = this.gridSize[1] * Math.min(y, y2);
+      return {
+        x,
+        y,
+        x2,
+        y2
+      };
+    },
+    stroke() {
+      if (this.itemStyle) {
+        if (this.itemStyle.border) {
+          return this.itemStyle.border.replace('1px solid ', '');
+        }
 
-            return {
-                left: `${left}px`,
-                top: `${top}px`,
-                width: `${width}px`,
-                height: `${height}px`
-            };
-        },
-        startHandleClass() {
-            return START_HANDLE_QUADRANTS[this.vectorQuadrant];
-        },
-        endHandleClass() {
-            return END_HANDLE_QUADRANTS[this.vectorQuadrant];
-        },
-        vectorQuadrant() {
-            let {x, y, x2, y2} = this.position;
-            if (x2 === x) {
-                return 5; // Vertical line
-            }
+        return '';
+      } else {
+        return this.item.stroke;
+      }
+    },
+    style() {
+      let { x, y, x2, y2 } = this.position;
+      let width = Math.max(this.gridSize[0] * Math.abs(x - x2), 1);
+      let height = Math.max(this.gridSize[1] * Math.abs(y - y2), 1);
+      let left = this.gridSize[0] * Math.min(x, x2);
+      let top = this.gridSize[1] * Math.min(y, y2);
 
-            if (y2 === y) {
-                return 6; // Horizontal line
-            }
+      return {
+        left: `${left}px`,
+        top: `${top}px`,
+        width: `${width}px`,
+        height: `${height}px`
+      };
+    },
+    startHandleClass() {
+      return START_HANDLE_QUADRANTS[this.vectorQuadrant];
+    },
+    endHandleClass() {
+      return END_HANDLE_QUADRANTS[this.vectorQuadrant];
+    },
+    vectorQuadrant() {
+      let { x, y, x2, y2 } = this.position;
+      if (x2 === x) {
+        return 5; // Vertical line
+      }
 
-            if (x2 > x) {
-                if (y2 < y) {
-                    return 1;
-                }
+      if (y2 === y) {
+        return 6; // Horizontal line
+      }
 
-                return 4;
-            }
+      if (x2 > x) {
+        if (y2 < y) {
+          return 1;
+        }
 
-            if (y2 < y) {
-                return 2;
-            }
+        return 4;
+      }
 
-            return 3;
-        },
-        linePosition() {
-            let pos = {};
-            switch (this.vectorQuadrant) {
-            case 1:
-            case 3:
-                // slopes up
-                pos = {
-                    x1: '0%',
-                    y1: '100%',
-                    x2: '100%',
-                    y2: '0%'
-                };
-                break;
-            case 5:
-                // vertical
-                pos = {
-                    x1: '0%',
-                    y1: '0%',
-                    x2: '0%',
-                    y2: '100%'
-                };
-                break;
-            case 6:
-                // horizontal
-                pos = {
-                    x1: '0%',
-                    y1: '0%',
-                    x2: '100%',
-                    y2: '0%'
-                };
-                break;
-            default:
-                // slopes down
-                pos = {
-                    x1: '0%',
-                    y1: '0%',
-                    x2: '100%',
-                    y2: '100%'
-                };
-                break;
-            }
+      if (y2 < y) {
+        return 2;
+      }
 
-            return pos;
-        }
+      return 3;
     },
-    watch: {
-        index(newIndex) {
-            if (!this.context) {
-                return;
-            }
+    linePosition() {
+      let pos = {};
+      switch (this.vectorQuadrant) {
+        case 1:
+        case 3:
+          // slopes up
+          pos = {
+            x1: '0%',
+            y1: '100%',
+            x2: '100%',
+            y2: '0%'
+          };
+          break;
+        case 5:
+          // vertical
+          pos = {
+            x1: '0%',
+            y1: '0%',
+            x2: '0%',
+            y2: '100%'
+          };
+          break;
+        case 6:
+          // horizontal
+          pos = {
+            x1: '0%',
+            y1: '0%',
+            x2: '100%',
+            y2: '0%'
+          };
+          break;
+        default:
+          // slopes down
+          pos = {
+            x1: '0%',
+            y1: '0%',
+            x2: '100%',
+            y2: '100%'
+          };
+          break;
+      }
 
-            this.context.index = newIndex;
-        },
-        item(newItem) {
-            if (!this.context) {
-                return;
-            }
+      return pos;
+    }
+  },
+  watch: {
+    index(newIndex) {
+      if (!this.context) {
+        return;
+      }
 
-            this.context.layoutItem = newItem;
-        }
-    },
-    mounted() {
-        this.openmct.selection.on('change', this.setSelection);
-        this.context = {
-            layoutItem: this.item,
-            index: this.index
-        };
-        this.removeSelectable = this.openmct.selection.selectable(this.$el, this.context, this.initSelect);
+      this.context.index = newIndex;
     },
-    destroyed() {
-        if (this.removeSelectable) {
-            this.removeSelectable();
+    item(newItem) {
+      if (!this.context) {
+        return;
+      }
+
+      this.context.layoutItem = newItem;
+    }
+  },
+  mounted() {
+    this.openmct.selection.on('change', this.setSelection);
+    this.context = {
+      layoutItem: this.item,
+      index: this.index
+    };
+    this.removeSelectable = this.openmct.selection.selectable(
+      this.$el,
+      this.context,
+      this.initSelect
+    );
+  },
+  unmounted() {
+    if (this.removeSelectable) {
+      this.removeSelectable();
+    }
+
+    this.openmct.selection.off('change', this.setSelection);
+  },
+  methods: {
+    startDrag(event, position) {
+      this.dragging = position;
+      document.body.addEventListener('mousemove', this.continueDrag);
+      document.body.addEventListener('mouseup', this.endDrag);
+      this.startPosition = [event.pageX, event.pageY];
+      let { x, y, x2, y2 } = this.item;
+      this.dragPosition = {
+        x,
+        y,
+        x2,
+        y2
+      };
+      if (x === x2 || y === y2) {
+        if (y > y2 || x < x2) {
+          if (this.dragging === 'start') {
+            this.dragging = 'end';
+          } else if (this.dragging === 'end') {
+            this.dragging = 'start';
+          }
         }
+      }
 
-        this.openmct.selection.off('change', this.setSelection);
+      event.preventDefault();
     },
-    methods: {
-        startDrag(event, position) {
-            this.dragging = position;
-            document.body.addEventListener('mousemove', this.continueDrag);
-            document.body.addEventListener('mouseup', this.endDrag);
-            this.startPosition = [event.pageX, event.pageY];
-            let {x, y, x2, y2} = this.item;
-            this.dragPosition = {
-                x,
-                y,
-                x2,
-                y2
-            };
-            if (x === x2 || y === y2) {
-                if (y > y2 || x < x2) {
-                    if (this.dragging === 'start') {
-                        this.dragging = 'end';
-                    } else if (this.dragging === 'end') {
-                        this.dragging = 'start';
-                    }
-                }
-            }
+    continueDrag(event) {
+      event.preventDefault();
+      let pxDeltaX = this.startPosition[0] - event.pageX;
+      let pxDeltaY = this.startPosition[1] - event.pageY;
+      let newPosition = this.calculateDragPosition(pxDeltaX, pxDeltaY);
 
-            event.preventDefault();
-        },
-        continueDrag(event) {
-            event.preventDefault();
-            let pxDeltaX = this.startPosition[0] - event.pageX;
-            let pxDeltaY = this.startPosition[1] - event.pageY;
-            let newPosition = this.calculateDragPosition(pxDeltaX, pxDeltaY);
-
-            if (!this.dragging) {
-                if (!_.isEqual(newPosition, this.dragPosition)) {
-                    let gridDelta = [event.pageX - this.startPosition[0], event.pageY - this.startPosition[1]];
-                    this.dragPosition = newPosition;
-                    this.$emit('move', this.toGridDelta(gridDelta));
-                }
-            } else {
-                this.dragPosition = newPosition;
-            }
-        },
-        endDrag(event) {
-            document.body.removeEventListener('mousemove', this.continueDrag);
-            document.body.removeEventListener('mouseup', this.endDrag);
-            let {x, y, x2, y2} = this.dragPosition;
-            if (!this.dragging) {
-                this.$emit('endMove');
-            } else {
-                this.$emit('endLineResize', this.item, {
-                    x,
-                    y,
-                    x2,
-                    y2
-                });
-            }
+      if (!this.dragging) {
+        if (!_.isEqual(newPosition, this.dragPosition)) {
+          let gridDelta = [
+            event.pageX - this.startPosition[0],
+            event.pageY - this.startPosition[1]
+          ];
+          this.dragPosition = newPosition;
+          this.$emit('move', this.toGridDelta(gridDelta));
+        }
+      } else {
+        this.dragPosition = newPosition;
+      }
+    },
+    endDrag(event) {
+      document.body.removeEventListener('mousemove', this.continueDrag);
+      document.body.removeEventListener('mouseup', this.endDrag);
+      let { x, y, x2, y2 } = this.dragPosition;
+      if (!this.dragging) {
+        this.$emit('end-move');
+      } else {
+        this.$emit('end-line-resize', this.item, {
+          x,
+          y,
+          x2,
+          y2
+        });
+      }
 
-            this.dragPosition = undefined;
-            this.dragging = undefined;
-            event.preventDefault();
-        },
-        calculateDragPosition(pxDeltaX, pxDeltaY) {
-            let gridDeltaX = Math.round(pxDeltaX / this.gridSize[0]);
-            let gridDeltaY = Math.round(pxDeltaY / this.gridSize[1]);
-            let {x, y, x2, y2} = this.item;
-            let dragPosition = {
-                x,
-                y,
-                x2,
-                y2
-            };
+      this.dragPosition = undefined;
+      this.dragging = undefined;
+      event.preventDefault();
+    },
+    calculateDragPosition(pxDeltaX, pxDeltaY) {
+      let gridDeltaX = Math.round(pxDeltaX / this.gridSize[0]);
+      let gridDeltaY = Math.round(pxDeltaY / this.gridSize[1]);
+      let { x, y, x2, y2 } = this.item;
+      let dragPosition = {
+        x,
+        y,
+        x2,
+        y2
+      };
 
-            if (this.dragging === 'start') {
-                dragPosition.x -= gridDeltaX;
-                dragPosition.y -= gridDeltaY;
-            } else if (this.dragging === 'end') {
-                dragPosition.x2 -= gridDeltaX;
-                dragPosition.y2 -= gridDeltaY;
-            } else {
-                // dragging entire line.
-                dragPosition.x -= gridDeltaX;
-                dragPosition.y -= gridDeltaY;
-                dragPosition.x2 -= gridDeltaX;
-                dragPosition.y2 -= gridDeltaY;
-            }
+      if (this.dragging === 'start') {
+        dragPosition.x -= gridDeltaX;
+        dragPosition.y -= gridDeltaY;
+      } else if (this.dragging === 'end') {
+        dragPosition.x2 -= gridDeltaX;
+        dragPosition.y2 -= gridDeltaY;
+      } else {
+        // dragging entire line.
+        dragPosition.x -= gridDeltaX;
+        dragPosition.y -= gridDeltaY;
+        dragPosition.x2 -= gridDeltaX;
+        dragPosition.y2 -= gridDeltaY;
+      }
 
-            return dragPosition;
-        },
-        setSelection(selection) {
-            this.selection = selection;
-        },
-        toGridDelta(pixelDelta) {
-            return pixelDelta.map((v, i) => {
-                return Math.round(v / this.gridSize[i]);
-            });
-        }
+      return dragPosition;
+    },
+    setSelection(selection) {
+      this.selection = selection;
+    },
+    toGridDelta(pixelDelta) {
+      return pixelDelta.map((v, i) => {
+        return Math.round(v / this.gridSize[i]);
+      });
     }
+  }
 };
 </script>
diff --git a/src/plugins/displayLayout/components/SubobjectView.vue b/src/plugins/displayLayout/components/SubobjectView.vue
index 3644dbd7657..143c68e6e73 100644
--- a/src/plugins/displayLayout/components/SubobjectView.vue
+++ b/src/plugins/displayLayout/components/SubobjectView.vue
@@ -1,34 +1,34 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<layout-frame
+  <layout-frame
     :item="item"
     :grid-size="gridSize"
-    :title="domainObject && domainObject.name"
     :is-editing="isEditing"
-    @move="(gridDelta) => $emit('move', gridDelta)"
-    @endMove="() => $emit('endMove')"
->
-    <object-frame
+    @move="move"
+    @end-move="endMove"
+  >
+    <template #content>
+      <ObjectFrame
         v-if="domainObject"
         ref="objectFrame"
         :domain-object="domainObject"
@@ -37,8 +37,9 @@
         :show-edit-view="false"
         :layout-font-size="item.fontSize"
         :layout-font="item.font"
-    />
-</layout-frame>
+      />
+    </template>
+  </layout-frame>
 </template>
 
 <script>
@@ -51,126 +52,131 @@ const DEFAULT_POSITION = [1, 1];
 const DEFAULT_HIDDEN_FRAME_TYPES = ['hyperlink', 'summary-widget', 'conditionWidget'];
 
 function getDefaultDimensions(gridSize) {
-    return MINIMUM_FRAME_SIZE.map((min, index) => {
-        return Math.max(
-            Math.ceil(min / gridSize[index]),
-            DEFAULT_DIMENSIONS[index]
-        );
-    });
+  return MINIMUM_FRAME_SIZE.map((min, index) => {
+    return Math.max(Math.ceil(min / gridSize[index]), DEFAULT_DIMENSIONS[index]);
+  });
 }
 
 function hasFrameByDefault(type) {
-    return DEFAULT_HIDDEN_FRAME_TYPES.indexOf(type) === -1;
+  return DEFAULT_HIDDEN_FRAME_TYPES.indexOf(type) === -1;
 }
 
 export default {
-    makeDefinition(openmct, gridSize, domainObject, position, viewKey) {
-        let defaultDimensions = getDefaultDimensions(gridSize);
-        position = position || DEFAULT_POSITION;
+  makeDefinition(openmct, gridSize, domainObject, position, viewKey) {
+    let defaultDimensions = getDefaultDimensions(gridSize);
+    position = position || DEFAULT_POSITION;
 
-        return {
-            width: defaultDimensions[0],
-            height: defaultDimensions[1],
-            x: position[0],
-            y: position[1],
-            identifier: domainObject.identifier,
-            hasFrame: hasFrameByDefault(domainObject.type),
-            fontSize: 'default',
-            font: 'default',
-            viewKey
-        };
+    return {
+      width: defaultDimensions[0],
+      height: defaultDimensions[1],
+      x: position[0],
+      y: position[1],
+      identifier: domainObject.identifier,
+      hasFrame: hasFrameByDefault(domainObject.type),
+      fontSize: 'default',
+      font: 'default',
+      viewKey
+    };
+  },
+  components: {
+    ObjectFrame,
+    LayoutFrame
+  },
+  inject: ['openmct', 'objectPath'],
+  props: {
+    item: {
+      type: Object,
+      required: true
     },
-    components: {
-        ObjectFrame,
-        LayoutFrame
+    gridSize: {
+      type: Array,
+      required: true,
+      validator: (arr) => arr && arr.length === 2 && arr.every((el) => typeof el === 'number')
     },
-    inject: ['openmct', 'objectPath'],
-    props: {
-        item: {
-            type: Object,
-            required: true
-        },
-        gridSize: {
-            type: Array,
-            required: true,
-            validator: (arr) => arr && arr.length === 2
-                && arr.every(el => typeof el === 'number')
-        },
-        initSelect: Boolean,
-        index: {
-            type: Number,
-            required: true
-        },
-        isEditing: {
-            type: Boolean,
-            required: true
-        }
+    initSelect: Boolean,
+    index: {
+      type: Number,
+      required: true
     },
-    data() {
-        return {
-            domainObject: undefined,
-            currentObjectPath: [],
-            mutablePromise: undefined
-        };
+    isEditing: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: ['move', 'end-move'],
+  data() {
+    return {
+      domainObject: undefined,
+      currentObjectPath: []
+    };
+  },
+  watch: {
+    index(newIndex) {
+      if (!this.context) {
+        return;
+      }
+
+      this.context.index = newIndex;
     },
-    watch: {
-        index(newIndex) {
-            if (!this.context) {
-                return;
-            }
+    item(newItem) {
+      if (!this.context) {
+        return;
+      }
+
+      this.context.layoutItem = newItem;
+    }
+  },
+  mounted() {
+    if (this.openmct.objects.supportsMutation(this.item.identifier)) {
+      this.mutablePromise = this.openmct.objects
+        .getMutable(this.item.identifier)
+        .then(this.setObject);
+    } else {
+      this.openmct.objects.get(this.item.identifier).then(this.setObject);
+    }
+  },
+  beforeUnmount() {
+    if (this.removeSelectable) {
+      this.removeSelectable();
+    }
 
-            this.context.index = newIndex;
-        },
-        item(newItem) {
-            if (!this.context) {
-                return;
-            }
+    if (this.mutablePromise) {
+      this.mutablePromise.then(() => {
+        this.openmct.objects.destroyMutable(this.domainObject);
+      });
+    } else if (this?.domainObject?.isMutable) {
+      this.openmct.objects.destroyMutable(this.domainObject);
+    }
+  },
+  methods: {
+    setObject(domainObject) {
+      this.domainObject = domainObject;
+      this.mutablePromise = undefined;
+      this.currentObjectPath = [this.domainObject].concat(this.objectPath.slice());
+      this.$nextTick(() => {
+        let reference = this.$refs.objectFrame;
 
-            this.context.layoutItem = newItem;
+        if (reference) {
+          let childContext = this.$refs.objectFrame.getSelectionContext();
+          childContext.item = domainObject;
+          childContext.layoutItem = this.item;
+          childContext.index = this.index;
+          this.context = childContext;
+          this.removeSelectable = this.openmct.selection.selectable(
+            this.$el,
+            this.context,
+            this.immediatelySelect || this.initSelect
+          );
+          delete this.immediatelySelect;
         }
+      });
     },
-    mounted() {
-        if (this.openmct.objects.supportsMutation(this.item.identifier)) {
-            this.mutablePromise = this.openmct.objects.getMutable(this.item.identifier)
-                .then(this.setObject);
-        } else {
-            this.openmct.objects.get(this.item.identifier)
-                .then(this.setObject);
-        }
+    move(gridDelta) {
+      this.$emit('move', gridDelta);
     },
-    beforeDestroy() {
-        if (this.removeSelectable) {
-            this.removeSelectable();
-        }
-
-        if (this.mutablePromise) {
-            this.mutablePromise.then(() => {
-                this.openmct.objects.destroyMutable(this.domainObject);
-            });
-        } else if (this.domainObject.isMutable) {
-            this.openmct.objects.destroyMutable(this.domainObject);
-        }
-    },
-    methods: {
-        setObject(domainObject) {
-            this.domainObject = domainObject;
-            this.mutablePromise = undefined;
-            this.currentObjectPath = [this.domainObject].concat(this.objectPath.slice());
-            this.$nextTick(() => {
-                let reference = this.$refs.objectFrame;
-
-                if (reference) {
-                    let childContext = this.$refs.objectFrame.getSelectionContext();
-                    childContext.item = domainObject;
-                    childContext.layoutItem = this.item;
-                    childContext.index = this.index;
-                    this.context = childContext;
-                    this.removeSelectable = this.openmct.selection.selectable(
-                        this.$el, this.context, this.immediatelySelect || this.initSelect);
-                    delete this.immediatelySelect;
-                }
-            });
-        }
+    endMove() {
+      this.$emit('end-move');
     }
+  }
 };
 </script>
diff --git a/src/plugins/displayLayout/components/TelemetryView.vue b/src/plugins/displayLayout/components/TelemetryView.vue
index 736aeba11b7..744aa408bef 100644
--- a/src/plugins/displayLayout/components/TelemetryView.vue
+++ b/src/plugins/displayLayout/components/TelemetryView.vue
@@ -1,370 +1,416 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 
 <template>
-<layout-frame
+  <layout-frame
     :item="item"
     :grid-size="gridSize"
     :is-editing="isEditing"
-    @move="(gridDelta) => $emit('move', gridDelta)"
-    @endMove="() => $emit('endMove')"
->
-    <div
+    @move="move"
+    @end-move="endMove"
+  >
+    <template #content>
+      <div
         v-if="domainObject"
+        ref="telemetryViewWrapper"
         class="c-telemetry-view u-style-receiver"
-        :class="[statusClass]"
+        :class="[itemClasses]"
         :style="styleObject"
         :data-font-size="item.fontSize"
         :data-font="item.font"
         @contextmenu.prevent="showContextMenu"
-    >
-        <div class="is-status__indicator"
-             :title="`This item is ${status}`"
-        ></div>
+        @mouseover.ctrl="showToolTip"
+        @mouseleave="hideToolTip"
+      >
         <div
-            v-if="showLabel"
-            class="c-telemetry-view__label"
-        >
-            <div class="c-telemetry-view__label-text">
-                {{ domainObject.name }}
-            </div>
+          class="is-status__indicator"
+          :aria-label="`This item is ${status}`"
+          :title="`This item is ${status}`"
+        ></div>
+        <div v-if="showLabel" class="c-telemetry-view__label">
+          <div class="c-telemetry-view__label-text">
+            {{ domainObject.name }}
+          </div>
         </div>
 
         <div
-            v-if="showValue"
-            :title="fieldName"
-            class="c-telemetry-view__value"
-            :class="[telemetryClass]"
+          v-if="showValue"
+          :aria-label="fieldName"
+          :title="fieldName"
+          class="c-telemetry-view__value"
+          :class="[telemetryClass]"
         >
-            <div class="c-telemetry-view__value-text">
-                {{ telemetryValue }}
-                <span
-                    v-if="unit && item.showUnits"
-                    class="c-telemetry-view__value-text__unit"
-                >
-                    {{ unit }}
-                </span>
-            </div>
+          <div class="c-telemetry-view__value-text">
+            {{ telemetryValue }}
+            <span v-if="unit && item.showUnits" class="c-telemetry-view__value-text__unit">
+              {{ unit }}
+            </span>
+          </div>
         </div>
-    </div>
-</layout-frame>
+      </div>
+    </template>
+  </layout-frame>
 </template>
 
 <script>
+import {
+  getDefaultNotebook,
+  getNotebookSectionAndPage
+} from '@/plugins/notebook/utils/notebook-storage.js';
+import stalenessMixin from '@/ui/mixins/staleness-mixin';
+
+import tooltipHelpers from '../../../api/tooltips/tooltipMixins.js';
+import conditionalStylesMixin from '../mixins/objectStyles-mixin.js';
 import LayoutFrame from './LayoutFrame.vue';
-import conditionalStylesMixin from "../mixins/objectStyles-mixin";
-import { getDefaultNotebook } from '@/plugins/notebook/utils/notebook-storage.js';
 
 const DEFAULT_TELEMETRY_DIMENSIONS = [10, 5];
 const DEFAULT_POSITION = [1, 1];
 const CONTEXT_MENU_ACTIONS = ['copyToClipboard', 'copyToNotebook', 'viewHistoricalData'];
 
 export default {
-    makeDefinition(openmct, gridSize, domainObject, position) {
-        let metadata = openmct.telemetry.getMetadata(domainObject);
-        position = position || DEFAULT_POSITION;
-
-        return {
-            identifier: domainObject.identifier,
-            x: position[0],
-            y: position[1],
-            width: DEFAULT_TELEMETRY_DIMENSIONS[0],
-            height: DEFAULT_TELEMETRY_DIMENSIONS[1],
-            displayMode: 'all',
-            value: metadata.getDefaultDisplayValue(),
-            stroke: "",
-            fill: "",
-            color: "",
-            fontSize: 'default',
-            font: 'default'
-        };
-    },
-    components: {
-        LayoutFrame
+  makeDefinition(openmct, gridSize, domainObject, position) {
+    let metadata = openmct.telemetry.getMetadata(domainObject);
+    position = position || DEFAULT_POSITION;
+
+    return {
+      identifier: domainObject.identifier,
+      x: position[0],
+      y: position[1],
+      width: DEFAULT_TELEMETRY_DIMENSIONS[0],
+      height: DEFAULT_TELEMETRY_DIMENSIONS[1],
+      displayMode: 'all',
+      value: metadata.getDefaultDisplayValue()?.key,
+      stroke: '',
+      fill: '',
+      color: '',
+      fontSize: 'default',
+      font: 'default'
+    };
+  },
+  components: {
+    LayoutFrame
+  },
+  mixins: [conditionalStylesMixin, stalenessMixin, tooltipHelpers],
+  inject: ['openmct', 'objectPath', 'currentView', 'renderWhenVisible'],
+  props: {
+    item: {
+      type: Object,
+      required: true
     },
-    mixins: [conditionalStylesMixin],
-    inject: ['openmct', 'objectPath', 'currentView'],
-    props: {
-        item: {
-            type: Object,
-            required: true
-        },
-        gridSize: {
-            type: Array,
-            required: true,
-            validator: (arr) => arr && arr.length === 2
-                && arr.every(el => typeof el === 'number')
-        },
-        initSelect: Boolean,
-        index: {
-            type: Number,
-            required: true
-        },
-        isEditing: {
-            type: Boolean,
-            required: true
-        }
+    gridSize: {
+      type: Array,
+      required: true,
+      validator: (arr) => arr && arr.length === 2 && arr.every((el) => typeof el === 'number')
     },
-    data() {
-        return {
-            currentObjectPath: undefined,
-            datum: undefined,
-            domainObject: undefined,
-            formats: undefined,
-            viewKey: `alphanumeric-format-${Math.random()}`,
-            status: '',
-            mutablePromise: undefined
-        };
+    initSelect: Boolean,
+    index: {
+      type: Number,
+      required: true
     },
-    computed: {
-        statusClass() {
-            return (this.status) ? `is-status--${this.status}` : '';
-        },
-        showLabel() {
-            let displayMode = this.item.displayMode;
+    isEditing: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: ['move', 'end-move', 'format-changed', 'context-click'],
+  data() {
+    return {
+      currentObjectPath: undefined,
+      datum: undefined,
+      domainObject: undefined,
+      formats: undefined,
+      viewKey: `alphanumeric-format-${Math.random()}`,
+      status: '',
+      mutablePromise: undefined
+    };
+  },
+  computed: {
+    itemClasses() {
+      let classes = [];
 
-            return displayMode === 'all' || displayMode === 'label';
-        },
-        showValue() {
-            let displayMode = this.item.displayMode;
+      if (this.status) {
+        classes.push(`is-status--${this.status}`);
+      }
 
-            return displayMode === 'all' || displayMode === 'value';
-        },
-        unit() {
-            let value = this.item.value;
-            let unit = this.metadata.value(value).unit;
+      if (this.isStale) {
+        classes.push('is-stale');
+      }
 
-            return unit;
-        },
-        styleObject() {
-            let size;
-            //for legacy size support
-            if (!this.item.fontSize) {
-                size = this.item.size;
-            }
-
-            return Object.assign({}, {
-                size
-            }, this.itemStyle);
-        },
-        fieldName() {
-            return this.valueMetadata && this.valueMetadata.name;
-        },
-        valueMetadata() {
-            return this.datum && this.metadata.value(this.item.value);
-        },
-        formatter() {
-            if (this.item.format) {
-                return this.customStringformatter;
-            }
+      return classes;
+    },
+    showLabel() {
+      let displayMode = this.item.displayMode;
 
-            return this.formats[this.item.value];
-        },
-        telemetryValue() {
-            if (!this.datum) {
-                return;
-            }
+      return displayMode === 'all' || displayMode === 'label';
+    },
+    showValue() {
+      let displayMode = this.item.displayMode;
+
+      return displayMode === 'all' || displayMode === 'value';
+    },
+    unit() {
+      let value = this.item.value;
+      let unit = this.metadata ? this.metadata.value(value).unit : '';
+
+      return unit;
+    },
+    styleObject() {
+      let size;
+      //for legacy size support
+      if (!this.item.fontSize) {
+        size = this.item.size;
+      }
 
-            return this.formatter && this.formatter.format(this.datum);
+      return Object.assign(
+        {},
+        {
+          size
         },
-        telemetryClass() {
-            if (!this.datum) {
-                return;
-            }
+        this.itemStyle
+      );
+    },
+    fieldName() {
+      return this.valueMetadata && this.valueMetadata.name;
+    },
+    valueMetadata() {
+      return this.datum && this.metadata.value(this.item.value);
+    },
+    formatter() {
+      if (this.item.format) {
+        return this.customStringformatter;
+      }
 
-            let alarm = this.limitEvaluator && this.limitEvaluator.evaluate(this.datum, this.valueMetadata);
+      return this.formats[this.item.value];
+    },
+    telemetryValue() {
+      if (!this.datum) {
+        return '---';
+      }
 
-            return alarm && alarm.cssClass;
-        }
+      return this.formatter && this.formatter.format(this.datum);
     },
-    watch: {
-        index(newIndex) {
-            if (!this.context) {
-                return;
-            }
+    telemetryClass() {
+      if (!this.datum) {
+        return;
+      }
 
-            this.context.index = newIndex;
-        },
-        item(newItem) {
-            if (!this.context) {
-                return;
-            }
+      let alarm =
+        this.limitEvaluator && this.limitEvaluator.evaluate(this.datum, this.valueMetadata);
 
-            this.context.layoutItem = newItem;
-        }
+      return alarm && alarm.cssClass;
+    }
+  },
+  watch: {
+    index(newIndex) {
+      if (!this.context) {
+        return;
+      }
+
+      this.context.index = newIndex;
     },
-    mounted() {
-        if (this.openmct.objects.supportsMutation(this.item.identifier)) {
-            this.mutablePromise = this.openmct.objects.getMutable(this.item.identifier)
-                .then(this.setObject);
-        } else {
-            this.openmct.objects.get(this.item.identifier)
-                .then(this.setObject);
-        }
+    item(newItem) {
+      if (!this.context) {
+        return;
+      }
+
+      this.context.layoutItem = newItem;
+    }
+  },
+  mounted() {
+    this.getAndSetObject();
+
+    this.status = this.openmct.status.get(this.item.identifier);
+    this.removeStatusListener = this.openmct.status.observe(this.item.identifier, this.setStatus);
+
+    this.setupClockChangedEvent((domainObject) => {
+      this.triggerUnsubscribeFromStaleness(domainObject);
+      this.subscribeToStaleness(domainObject);
+    });
+  },
+  async beforeUnmount() {
+    this.removeStatusListener();
+
+    if (this.removeSelectable) {
+      this.removeSelectable();
+    }
 
-        this.openmct.time.on("bounds", this.refreshData);
+    if (this.telemetryCollection) {
+      this.telemetryCollection.off('add', this.setLatestValues);
+      this.telemetryCollection.off('clear', this.refreshData);
 
-        this.status = this.openmct.status.get(this.item.identifier);
-        this.removeStatusListener = this.openmct.status.observe(this.item.identifier, this.setStatus);
+      this.telemetryCollection.destroy();
+    }
+
+    if (this.mutablePromise) {
+      await this.mutablePromise();
+      this.openmct.objects.destroyMutable(this.domainObject);
+    } else if (this?.domainObject?.isMutable) {
+      this.openmct.objects.destroyMutable(this.domainObject);
+    }
+  },
+  methods: {
+    async getAndSetObject() {
+      let foundObject = null;
+      if (this.openmct.objects.supportsMutation(this.item.identifier)) {
+        this.mutablePromise = this.openmct.objects.getMutable(this.item.identifier);
+        foundObject = await this.mutablePromise;
+      } else {
+        foundObject = await this.openmct.objects.get(this.item.identifier);
+      }
+      this.setObject(foundObject);
+      await this.$nextTick();
     },
-    beforeDestroy() {
-        this.removeSubscription();
-        this.removeStatusListener();
+    formattedValueForCopy() {
+      const timeFormatterKey = this.openmct.time.timeSystem().key;
+      const timeFormatter = this.formats[timeFormatterKey];
+      const unit = this.unit ? ` ${this.unit}` : '';
 
-        if (this.removeSelectable) {
-            this.removeSelectable();
-        }
+      return `At ${timeFormatter.format(this.datum)} ${this.domainObject.name} had a value of ${
+        this.telemetryValue
+      }${unit}`;
+    },
+    setLatestValues(data) {
+      this.latestDatum = data[data.length - 1];
+      this.updateView();
+    },
+    updateView() {
+      if (!this.updatingView) {
+        this.updatingView = this.renderWhenVisible(() => {
+          this.datum = this.latestDatum;
+          this.updatingView = false;
+        });
+      }
+    },
+    refreshData(bounds, isTick) {
+      if (!isTick) {
+        this.latestDatum = undefined;
+        this.updateView();
+      }
+    },
+    setObject(domainObject) {
+      this.domainObject = domainObject;
+      this.mutablePromise = undefined;
+      this.keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
+      this.metadata = this.openmct.telemetry.getMetadata(this.domainObject);
+      this.limitEvaluator = this.openmct.telemetry.limitEvaluator(this.domainObject);
+      this.formats = this.openmct.telemetry.getFormatMap(this.metadata);
 
-        this.openmct.time.off("bounds", this.refreshData);
+      this.timeContext = this.openmct.time.getContextForView(this.objectPath);
 
-        if (this.mutablePromise) {
-            this.mutablePromise.then(() => {
-                this.openmct.objects.destroyMutable(this.domainObject);
-            });
-        } else if (this.domainObject.isMutable) {
-            this.openmct.objects.destroyMutable(this.domainObject);
-        }
+      const valueMetadata = this.metadata ? this.metadata.value(this.item.value) : {};
+      this.customStringformatter = this.openmct.telemetry.customStringFormatter(
+        valueMetadata,
+        this.item.format
+      );
+
+      this.telemetryCollection = this.openmct.telemetry.requestCollection(this.domainObject, {
+        size: 1,
+        strategy: 'latest',
+        timeContext: this.timeContext
+      });
+      this.telemetryCollection.on('add', this.setLatestValues);
+      this.telemetryCollection.on('clear', this.refreshData);
+      this.telemetryCollection.load();
+
+      this.currentObjectPath = this.objectPath.slice();
+      this.currentObjectPath.unshift(this.domainObject);
+
+      this.context = {
+        item: domainObject,
+        layoutItem: this.item,
+        index: this.index,
+        updateTelemetryFormat: this.updateTelemetryFormat,
+        toggleUnits: this.toggleUnits,
+        showUnits: this.showUnits
+      };
+      this.removeSelectable = this.openmct.selection.selectable(
+        this.$el,
+        this.context,
+        this.immediatelySelect || this.initSelect
+      );
+      delete this.immediatelySelect;
+      this.subscribeToStaleness(this.domainObject);
     },
-    methods: {
-        formattedValueForCopy() {
-            const timeFormatterKey = this.openmct.time.timeSystem().key;
-            const timeFormatter = this.formats[timeFormatterKey];
-            const unit = this.unit ? ` ${this.unit}` : '';
+    updateTelemetryFormat(format) {
+      this.customStringformatter.setFormat(format);
 
-            return `At ${timeFormatter.format(this.datum)} ${this.domainObject.name} had a value of ${this.telemetryValue}${unit}`;
-        },
-        requestHistoricalData() {
-            let bounds = this.openmct.time.bounds();
-            let options = {
-                start: bounds.start,
-                end: bounds.end,
-                size: 1,
-                strategy: 'latest'
-            };
-            this.openmct.telemetry.request(this.domainObject, options)
-                .then(data => {
-                    if (data.length > 0) {
-                        this.updateView(data[data.length - 1]);
-                    }
-                });
-        },
-        subscribeToObject() {
-            this.subscription = this.openmct.telemetry.subscribe(this.domainObject, function (datum) {
-                const key = this.openmct.time.timeSystem().key;
-                const datumTimeStamp = datum[key];
-                if (this.openmct.time.clock() !== undefined
-                    || (datumTimeStamp
-                        && (this.openmct.time.bounds().end >= datumTimeStamp))
-                ) {
-                    this.updateView(datum);
-                }
-            }.bind(this));
-        },
-        updateView(datum) {
-            this.datum = datum;
-        },
-        removeSubscription() {
-            if (this.subscription) {
-                this.subscription();
-                this.subscription = undefined;
-            }
-        },
-        refreshData(bounds, isTick) {
-            if (!isTick) {
-                this.datum = undefined;
-                this.requestHistoricalData(this.domainObject);
-            }
-        },
-        setObject(domainObject) {
-            this.domainObject = domainObject;
-            this.mutablePromise = undefined;
-            this.keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
-            this.metadata = this.openmct.telemetry.getMetadata(this.domainObject);
-            this.limitEvaluator = this.openmct.telemetry.limitEvaluator(this.domainObject);
-            this.formats = this.openmct.telemetry.getFormatMap(this.metadata);
-
-            const valueMetadata = this.metadata.value(this.item.value);
-            this.customStringformatter = this.openmct.telemetry.customStringFormatter(valueMetadata, this.item.format);
-
-            this.requestHistoricalData();
-            this.subscribeToObject();
-
-            this.currentObjectPath = this.objectPath.slice();
-            this.currentObjectPath.unshift(this.domainObject);
-
-            this.context = {
-                item: domainObject,
-                layoutItem: this.item,
-                index: this.index,
-                updateTelemetryFormat: this.updateTelemetryFormat,
-                toggleUnits: this.toggleUnits,
-                showUnits: this.showUnits
-            };
-            this.removeSelectable = this.openmct.selection.selectable(
-                this.$el, this.context, this.immediatelySelect || this.initSelect);
-            delete this.immediatelySelect;
-        },
-        updateTelemetryFormat(format) {
-            this.customStringformatter.setFormat(format);
+      this.$emit('format-changed', this.item, format);
+    },
+    updateViewContext() {
+      this.$emit('context-click', {
+        viewHistoricalData: true,
+        formattedValueForCopy: this.formattedValueForCopy
+      });
+    },
+    async getContextMenuActions() {
+      const defaultNotebook = getDefaultNotebook();
 
-            this.$emit('formatChanged', this.item, format);
-        },
-        updateViewContext() {
-            this.$emit('contextClick', {
-                viewHistoricalData: true,
-                formattedValueForCopy: this.formattedValueForCopy
-            });
-        },
-        async getContextMenuActions() {
-            const defaultNotebook = getDefaultNotebook();
-            const domainObject = defaultNotebook && await this.openmct.objects.get(defaultNotebook.notebookMeta.identifier);
-
-            let defaultNotebookName;
-            if (defaultNotebook) {
-                const defaultPath = domainObject && `${domainObject.name} - ${defaultNotebook.section.name} - ${defaultNotebook.page.name}`;
-                defaultNotebookName = `Copy to Notebook ${defaultPath}`;
-            }
-
-            return CONTEXT_MENU_ACTIONS
-                .map(actionKey => {
-                    const action = this.openmct.actions.getAction(actionKey);
-                    if (action.key === 'copyToNotebook') {
-                        action.name = defaultNotebookName;
-                    }
-
-                    return action;
-                })
-                .filter(action => action.name !== undefined);
-        },
-        async showContextMenu(event) {
-            this.updateViewContext();
-            const contextMenuActions = await this.getContextMenuActions();
-            const menuItems = this.openmct.menus.actionsToMenuItems(contextMenuActions, this.currentObjectPath, this.currentView);
-            this.openmct.menus.showMenu(event.x, event.y, menuItems);
-        },
-        setStatus(status) {
-            this.status = status;
+      let defaultNotebookName;
+      if (defaultNotebook) {
+        const domainObject = await this.openmct.objects.get(defaultNotebook.identifier);
+        const { section, page } = getNotebookSectionAndPage(
+          domainObject,
+          defaultNotebook.defaultSectionId,
+          defaultNotebook.defaultPageId
+        );
+        if (section && page) {
+          const defaultPath =
+            domainObject && `${domainObject.name} - ${section.name} - ${page.name}`;
+          defaultNotebookName = `Copy to Notebook ${defaultPath}`;
         }
+      }
+
+      return CONTEXT_MENU_ACTIONS.map((actionKey) => {
+        const action = this.openmct.actions.getAction(actionKey);
+        if (action.key === 'copyToNotebook') {
+          action.name = defaultNotebookName;
+        }
+
+        return action;
+      }).filter((action) => action.name !== undefined);
+    },
+    async showContextMenu(event) {
+      this.updateViewContext();
+      const contextMenuActions = await this.getContextMenuActions();
+      const menuItems = this.openmct.menus.actionsToMenuItems(
+        contextMenuActions,
+        this.currentObjectPath,
+        this.currentView
+      );
+      this.openmct.menus.showMenu(event.x, event.y, menuItems);
+    },
+    setStatus(status) {
+      this.status = status;
+    },
+    async showToolTip() {
+      const { BELOW } = this.openmct.tooltips.TOOLTIP_LOCATIONS;
+      this.buildToolTip(await this.getObjectPath(), BELOW, 'telemetryViewWrapper');
+    },
+    move(gridDelta) {
+      this.$emit('move', gridDelta);
+    },
+    endMove() {
+      this.$emit('end-move');
     }
+  }
 };
-
 </script>
diff --git a/src/plugins/displayLayout/components/TextView.vue b/src/plugins/displayLayout/components/TextView.vue
index b3e683c20fb..548ae940421 100644
--- a/src/plugins/displayLayout/components/TextView.vue
+++ b/src/plugins/displayLayout/components/TextView.vue
@@ -1,131 +1,150 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 
 <template>
-<layout-frame
+  <layout-frame
     :item="item"
     :grid-size="gridSize"
     :is-editing="isEditing"
-    @move="(gridDelta) => $emit('move', gridDelta)"
-    @endMove="() => $emit('endMove')"
->
-    <div
+    @move="move"
+    @end-move="endMove"
+  >
+    <template #content>
+      <div
         class="c-text-view u-style-receiver js-style-receiver"
         :data-font-size="item.fontSize"
         :data-font="item.font"
         :class="[styleClass]"
         :style="style"
-    >
+        role="application"
+        aria-roledescription="draggable text"
+        aria-label="Text"
+      >
         <div class="c-text-view__text">{{ item.text }}</div>
-    </div>
-</layout-frame>
+      </div>
+    </template>
+  </layout-frame>
 </template>
 
 <script>
+import conditionalStylesMixin from '../mixins/objectStyles-mixin.js';
 import LayoutFrame from './LayoutFrame.vue';
-import conditionalStylesMixin from "../mixins/objectStyles-mixin";
 
 export default {
-    makeDefinition(openmct, gridSize, element) {
-        return {
-            fill: '',
-            stroke: '',
-            color: '',
-            x: 1,
-            y: 1,
-            width: 10,
-            height: 5,
-            text: element.text,
-            fontSize: 'default',
-            font: 'default'
-        };
+  makeDefinition(openmct, gridSize, element) {
+    return {
+      fill: '',
+      stroke: '',
+      color: '',
+      x: 1,
+      y: 1,
+      width: 10,
+      height: 5,
+      text: element.text,
+      fontSize: 'default',
+      font: 'default'
+    };
+  },
+  components: {
+    LayoutFrame
+  },
+  mixins: [conditionalStylesMixin],
+  inject: ['openmct'],
+  props: {
+    item: {
+      type: Object,
+      required: true
     },
-    components: {
-        LayoutFrame
+    gridSize: {
+      type: Array,
+      required: true,
+      validator: (arr) => arr && arr.length === 2 && arr.every((el) => typeof el === 'number')
     },
-    mixins: [conditionalStylesMixin],
-    inject: ['openmct'],
-    props: {
-        item: {
-            type: Object,
-            required: true
-        },
-        gridSize: {
-            type: Array,
-            required: true,
-            validator: (arr) => arr && arr.length === 2
-                && arr.every(el => typeof el === 'number')
-        },
-        index: {
-            type: Number,
-            required: true
-        },
-        initSelect: Boolean,
-        isEditing: {
-            type: Boolean,
-            required: true
-        }
+    index: {
+      type: Number,
+      required: true
     },
-    computed: {
-        style() {
-            let size;
-            //legacy size support
-            if (!this.item.fontSize) {
-                size = this.item.size;
-            }
-
-            return Object.assign({
-                size
-            }, this.itemStyle);
-        }
-    },
-    watch: {
-        index(newIndex) {
-            if (!this.context) {
-                return;
-            }
+    initSelect: Boolean,
+    isEditing: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: ['move', 'end-move'],
+  computed: {
+    style() {
+      let size;
+      //legacy size support
+      if (!this.item.fontSize) {
+        size = this.item.size;
+      }
 
-            this.context.index = newIndex;
+      return Object.assign(
+        {
+          size
         },
-        item(newItem) {
-            if (!this.context) {
-                return;
-            }
+        this.itemStyle
+      );
+    }
+  },
+  watch: {
+    index(newIndex) {
+      if (!this.context) {
+        return;
+      }
 
-            this.context.layoutItem = newItem;
-        }
+      this.context.index = newIndex;
     },
-    mounted() {
-        this.context = {
-            layoutItem: this.item,
-            index: this.index
-        };
-        this.removeSelectable = this.openmct.selection.selectable(
-            this.$el, this.context, this.initSelect);
+    item(newItem) {
+      if (!this.context) {
+        return;
+      }
+
+      this.context.layoutItem = newItem;
+    }
+  },
+  mounted() {
+    this.context = {
+      layoutItem: this.item,
+      index: this.index
+    };
+    this.removeSelectable = this.openmct.selection.selectable(
+      this.$el,
+      this.context,
+      this.initSelect
+    );
+  },
+  beforeUnmount() {
+    if (this.removeSelectable) {
+      this.removeSelectable();
+    }
+  },
+  methods: {
+    move(gridDelta) {
+      this.$emit('move', gridDelta);
     },
-    destroyed() {
-        if (this.removeSelectable) {
-            this.removeSelectable();
-        }
+    endMove() {
+      this.$emit('end-move');
     }
+  }
 };
 </script>
diff --git a/src/plugins/displayLayout/components/box-and-line-views.scss b/src/plugins/displayLayout/components/box-and-line-views.scss
index fd11906d27f..5b0c4dda5bf 100644
--- a/src/plugins/displayLayout/components/box-and-line-views.scss
+++ b/src/plugins/displayLayout/components/box-and-line-views.scss
@@ -1,60 +1,66 @@
-.c-box-view {
-    border-width: $drawingObjBorderW !important;
-    display: flex;
-    align-items: stretch;
+.c-box-view,
+.c-ellipse-view {
+  border-width: $drawingObjBorderW !important;
+  display: flex;
+  align-items: stretch;
 
-    .c-frame & {
-        @include abs();
-    }
+  .c-frame & {
+    @include abs();
+  }
+}
+
+.c-ellipse-view {
+  border-radius: 50%;
 }
 
 .c-line-view {
-    &.c-frame {
-        box-shadow: none !important;
-    }
+  &.c-frame {
+    box-shadow: none !important;
+  }
 
-    .c-frame-edit {
-        border: none;
-    }
+  .c-frame-edit {
+    border: none;
+  }
 
-    .c-handle-info {
-        background: rgba(#999, 0.2);
-        padding: 2px;
-        position: absolute;
-        top: 5px; left: 5px;
-        white-space: nowrap;
-    }
+  .c-handle-info {
+    background: rgba(#999, 0.2);
+    padding: 2px;
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    white-space: nowrap;
+  }
 
-    svg {
-        // Prevent clipping when line is horizontal and vertical
-        min-height: 1px;
-        min-width: 1px;
-        // Must use !important to counteract setting in normalize.min.css
-        overflow: visible;
-    }
+  svg {
+    // Prevent clipping when line is horizontal and vertical
+    min-height: 1px;
+    min-width: 1px;
+    // Must use !important to counteract setting in normalize.min.css
+    overflow: visible;
+  }
 
-    &__line {
-        stroke-linecap: round;
-        stroke-width: $drawingObjBorderW;
-    }
+  &__line {
+    stroke-linecap: round;
+    stroke-width: $drawingObjBorderW;
+  }
 
-    &__hover-indicator {
-        display: none;
-        opacity: 0.5;
-        stroke: $editFrameColorHov;
-        stroke-width: $drawingObjBorderW + 4;
-    }
+  &__hover-indicator {
+    display: none;
+    opacity: 0.5;
+    stroke: $editFrameColorHov;
+    stroke-width: $drawingObjBorderW + 4;
+  }
+
+  .is-editing & {
+    // Needed to allow line to be moved
+    $w: 4px;
+    min-width: $w;
+    min-height: $w;
 
-    .is-editing & {
-        // Needed to allow line to be moved
-        $w: 4px;
-        min-width: $w;
-        min-height: $w;
-
-        &:hover {
-            [class*='__hover-indicator'] {
-                display: inline;
-            }
-        }
+    &:hover {
+      [class*='__hover-indicator'] {
+        display: inline;
+      }
     }
+  }
 }
diff --git a/src/plugins/displayLayout/components/display-layout.scss b/src/plugins/displayLayout/components/display-layout.scss
index 93366d54925..07bf6c00189 100644
--- a/src/plugins/displayLayout/components/display-layout.scss
+++ b/src/plugins/displayLayout/components/display-layout.scss
@@ -1,96 +1,94 @@
-@mixin displayMarquee($c) {
-    > .c-frame-edit {
-        // All other frames
-        //@include test($c, 0.4);
-        display: block;
-    }
-    > .c-frame > .c-frame-edit {
-        // Line object frame
-        //@include test($c, 0.4);
-        display: block;
-    }
+@mixin displayMarquee() {
+  > .c-frame-edit {
+    // All other frames
+    //@include test($c, 0.4);
+    display: block;
+  }
+  > .c-frame > .c-frame-edit {
+    // Line object frame
+    //@include test($c, 0.4);
+    display: block;
+  }
+}
+
+@mixin displayGrid() {
+  background: $editUIGridColorBg;
+
+  > [class*='__dimensions'] {
+    display: block;
+  }
+
+  > [class*='grid-holder'] {
+    display: block;
+  }
 }
 
 .l-layout {
-    @include abs();
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
+  @include abs();
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
 
-    &__grid-holder,
-    &__dimensions {
-        display: none;
-    }
+  &__grid-holder,
+  &__dimensions {
+    display: none;
+  }
 
-    &__dimensions {
-        $b: 1px dashed $editDimensionsColor;
-        border-right: $b;
-        border-bottom: $b;
-        pointer-events: none;
-        position: absolute;
+  &__dimensions {
+    $b: 1px dashed $editDimensionsColor;
+    border-right: $b;
+    border-bottom: $b;
+    pointer-events: none;
+    position: absolute;
 
-        &-vals {
-            $p: 2px;
-            color: $editDimensionsColor;
-            display: inline-block;
-            font-style: italic;
-            position: absolute;
-            bottom: $p; right: $p;
-            opacity: 0.7;
-        }
+    &-vals {
+      $p: 2px;
+      color: $editDimensionsColor;
+      display: inline-block;
+      font-style: italic;
+      position: absolute;
+      bottom: $p;
+      right: $p;
+      opacity: 0.7;
     }
+  }
 
-    &__frame {
-        position: absolute;
-    }
+  &__frame {
+    position: absolute;
+  }
 }
 
 .is-editing {
-    .l-shell__main-container {
-        &[s-selected],
-        &[s-selected-parent] {
-            // Display grid and allow edit marquee to display in main layout holder when editing
-            > .l-layout {
-                background: $editUIGridColorBg;
-
-                > [class*="__dimensions"] {
-                    display: block;
-                }
-
-                > [class*="__grid-holder"] {
-                    display: block;
-                }
-            }
-        }
+  .l-shell__main-container {
+    [s-selected],
+    [s-selected-parent] {
+      // Display grid in main layout holder when editing
+      > .l-layout {
+        @include displayGrid();
+      }
     }
+  }
 
-    .l-layout__frame {
-        &[s-selected]:not([multi-select="true"]),
-        &[s-selected-parent] {
-            // Display grid and allow edit marquee to display in nested layouts when editing
-            > * > * > .l-layout.allow-editing {
-                box-shadow: inset $editUIGridColorFg 0 0 2px 1px;
-
-                > [class*="__dimensions"] {
-                    display: block;
-                }
-
-                > [class*='grid-holder'] {
-                    display: block;
-                }
-            }
-        }
+  .l-layout__frame {
+    &[s-selected-parent] {
+      // Display grid in nested layouts when editing
+      > * > * > * > .l-layout.allow-editing {
+        box-shadow: inset $editUIGridColorFg 0 0 2px 1px;
+      
+        @include displayGrid();
+      }
     }
+  }
 
-    /*********************** EDIT MARQUEE CONTROL */
-    *[s-selected-parent] {
-        > .l-layout {
-            // When main shell layout is the parent
-            @include displayMarquee(deeppink);
-        }
-        > * > * > * {
-            // When a sub-layout is the parent
-            @include displayMarquee(blue);
-        }
+  /*********************** EDIT MARQUEE CONTROL */
+  *[s-selected-parent] {
+    > .l-layout {
+      // When main shell layout is the parent
+      @include displayMarquee();
+    }
+    > * > * > * > * {
+      // When a sub-layout is the parent
+      @include displayMarquee();
     }
+  }
 }
diff --git a/src/plugins/displayLayout/components/edit-marquee.scss b/src/plugins/displayLayout/components/edit-marquee.scss
index 1c7da0ddf97..00ec1aeba78 100644
--- a/src/plugins/displayLayout/components/edit-marquee.scss
+++ b/src/plugins/displayLayout/components/edit-marquee.scss
@@ -1,54 +1,62 @@
 .c-frame-edit {
-    // In Layouts, this is the editing rect and handles
-    display: none; // Set to display: block in DisplayLayout.vue
-    pointer-events: none;
-    @include abs();
-    border: $editMarqueeBorder;
-
-    &__handle {
-        $d: 6px;
-        $o: floor($d * -0.5);
-        background: $editFrameColorHandleFg;
-        box-shadow: $editFrameColorHandleBg 0 0 0 2px;
-        pointer-events: all;
-        position: absolute;
-        width: $d; height: $d;
-        top: auto; right: auto; bottom: auto; left: auto;
-
-        &:before {
-            // Extended hit area
-            @include abs(-10px);
-            content: '';
-            display: block;
-            z-index: 0;
-        }
-
-        &:hover {
-            background: $editUIColor;
-        }
-
-        &--nwse {
-            cursor: nwse-resize;
-        }
-
-        &--nw {
-            cursor: nw-resize;
-            left: $o; top: $o;
-        }
-
-        &--ne {
-            cursor: ne-resize;
-            right: $o; top: $o;
-        }
-
-        &--se {
-            cursor: se-resize;
-            right: $o; bottom: $o;
-        }
-
-        &--sw {
-            cursor: sw-resize;
-            left: $o; bottom: $o;
-        }
+  // In Layouts, this is the editing rect and handles
+  display: none; // Set to display: block in display-layout.scss
+  pointer-events: none;
+  @include abs();
+  border: $editMarqueeBorder;
+
+  &__handle {
+    $d: 6px;
+    $o: floor($d * -0.5);
+    background: $editFrameColorHandleFg;
+    box-shadow: $editFrameColorHandleBg 0 0 0 2px;
+    pointer-events: all;
+    position: absolute;
+    width: $d;
+    height: $d;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+
+    &:before {
+      // Extended hit area
+      @include abs(-10px);
+      content: '';
+      display: block;
+      z-index: 0;
     }
+
+    &:hover {
+      background: $editUIColor;
+    }
+
+    &--nwse {
+      cursor: nwse-resize;
+    }
+
+    &--nw {
+      cursor: nw-resize;
+      left: $o;
+      top: $o;
+    }
+
+    &--ne {
+      cursor: ne-resize;
+      right: $o;
+      top: $o;
+    }
+
+    &--se {
+      cursor: se-resize;
+      right: $o;
+      bottom: $o;
+    }
+
+    &--sw {
+      cursor: sw-resize;
+      left: $o;
+      bottom: $o;
+    }
+  }
 }
diff --git a/src/plugins/displayLayout/components/image-view.scss b/src/plugins/displayLayout/components/image-view.scss
index a2c4c97ddae..e1e4354b674 100644
--- a/src/plugins/displayLayout/components/image-view.scss
+++ b/src/plugins/displayLayout/components/image-view.scss
@@ -1,10 +1,10 @@
 .c-image-view {
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
 
-    .c-frame & {
-        @include abs();
-        border: 1px solid transparent;
-    }
+  .c-frame & {
+    @include abs();
+    border: 1px solid transparent;
+  }
 }
diff --git a/src/plugins/displayLayout/components/layout-frame.scss b/src/plugins/displayLayout/components/layout-frame.scss
index 0dbc10f877c..a6fbc562e9b 100644
--- a/src/plugins/displayLayout/components/layout-frame.scss
+++ b/src/plugins/displayLayout/components/layout-frame.scss
@@ -1,144 +1,135 @@
+@use 'sass:math';
+
 /******************* FRAME */
 .c-frame {
-    display: flex;
-    flex-direction: column;
-
-    // Whatever is placed into the slot, make it fill the entirety of the space, obeying padding
-    > *:first-child {
-        flex: 1 1 auto;
-    }
+  display: flex;
+  flex-direction: column;
 
-    &.is-in-small-container {
-        //background: rgba(blue, 0.1);
-    }
+  // Whatever is placed into the slot, make it fill the entirety of the space, obeying padding
+  > *:first-child {
+    flex: 1 1 auto;
+  }
 }
 
 .c-frame__move-bar {
-    display: none;
+  display: none;
 }
 
 .is-editing {
-    /******************* STYLES FOR C-FRAME WHILE EDITING */
-    .c-frame {
-        border: 1px solid rgba($editFrameColorHov, 0.3);
-
-        &:not([s-selected]) {
-            &:hover {
-                border: $editFrameBorderHov;
-            }
-        }
+  /******************* STYLES FOR C-FRAME WHILE EDITING */
+  .c-frame {
+    border: 1px solid rgba($editFrameColorHov, 0.3);
+
+    &:not([s-selected]) {
+      &:hover {
+        border: $editFrameBorderHov;
+      }
+    }
 
-        &[s-selected] {
-            // All frames selected while editing
-            border: $editFrameSelectedBorder;
-            box-shadow: $editFrameSelectedShdw;
+    &[s-selected] {
+      // All frames selected while editing
+      box-shadow: $editFrameSelectedShdw;
 
-            .c-frame__move-bar {
-                cursor: move;
-            }
-        }
+      .c-frame__move-bar {
+        cursor: move;
+      }
     }
+  }
 
-    /******************* DEFAULT STYLES FOR -EDIT__MOVE */
-    // All object types
-    .c-frame__move-bar {
-        @include abs();
-        display: block;
-    }
+  /******************* DEFAULT STYLES FOR -EDIT__MOVE */
+  // All object types
+  .c-frame__move-bar {
+    @include abs();
+    display: block;
+  }
 
-    // Has-complex-content objects
-    .c-so-view.has-complex-content {
-        transition: $transOut;
-        transition-delay: $moveBarOutDelay;
+  // Has-complex-content objects
+  .c-so-view.has-complex-content {
+    @include transition($prop: transform, $dur: $transOutTime, $delay: $moveBarOutDelay);
 
-        > .c-so-view__local-controls {
-            transition: transform 250ms ease-in-out;
-            transition-delay: $moveBarOutDelay;
-        }
+    > .c-so-view__local-controls {
+      @include transition($prop: transform, $dur: 250ms, $delay: $moveBarOutDelay);
+    }
 
-        + .c-frame__move-bar {
-            display: none;
+    + .c-frame__move-bar {
+      display: none;
+    }
+  }
+
+  .l-layout {
+    /******************* 0 - 1 ITEM SELECTED */
+    &:not(.is-multi-selected) {
+      > .l-layout__frame {
+        > .c-so-view.has-complex-content {
+          > .c-so-view__local-controls {
+            @include transition($prop: transform, $dur: $transOutTime, $delay: $moveBarOutDelay);
+          }
+
+          + .c-frame__move-bar {
+            @include transition($prop: height, $delay: $moveBarOutDelay);
+            @include userSelectNone();
+            background: $editFrameMovebarColorBg;
+            box-shadow: rgba(black, 0.3) 0 2px;
+            bottom: auto;
+            display: block;
+            height: 0; // Height is set on hover below
+            opacity: 0.9;
+            max-height: 100%;
+            overflow: hidden;
+            text-align: center;
+            z-index: 10;
+
+            &:before {
+              // Grippy
+              $h: 4px;
+              $tbOffset: math.div($editFrameMovebarH - $h, 2);
+              $lrOffset: 25%;
+              @include grippy($editFrameMovebarColorFg);
+              content: '';
+              display: none;
+              position: absolute;
+              top: $tbOffset;
+              right: $lrOffset;
+              bottom: $tbOffset;
+              left: $lrOffset;
+            }
+          }
         }
 
-    }
+        &:hover {
+          > .c-so-view.has-complex-content {
+            transition: $transInTransform;
+            transition-delay: 0s;
 
-    .l-layout {
-        /******************* 0 - 1 ITEM SELECTED */
-        &:not(.is-multi-selected) {
-            > .l-layout__frame {
-                > .c-so-view.has-complex-content {
-                    > .c-so-view__local-controls {
-                        transition: transform $transOutTime ease-in-out;
-                        transition-delay: $moveBarOutDelay;
-                    }
-
-                    + .c-frame__move-bar {
-                        transition: $transOut;
-                        transition-delay: $moveBarOutDelay;
-                        @include userSelectNone();
-                        background: $editFrameMovebarColorBg;
-                        box-shadow: rgba(black, 0.2) 0 1px;
-                        bottom: auto;
-                        display: block;
-                        height: 0; // Height is set on hover below
-                        opacity: 0.8;
-                        max-height: 100%;
-                        overflow: hidden;
-                        text-align: center;
-
-                        &:before {
-                            // Grippy
-                            $h: 4px;
-                            $tbOffset: ($editFrameMovebarH - $h) / 2;
-                            $lrOffset: 25%;
-                            @include grippy($editFrameMovebarColorFg);
-                            content: '';
-                            display: none;
-                            position: absolute;
-                            top: $tbOffset;
-                            right: $lrOffset;
-                            bottom: $tbOffset;
-                            left: $lrOffset;
-                        }
-                    }
-                }
-
-                &:hover {
-                    > .c-so-view.has-complex-content {
-                        transition: $transIn;
-                        transition-delay: 0s;
-                        padding-top: $editFrameMovebarH + $interiorMarginSm;
-
-                        > .c-so-view__local-controls {
-                            transform: translateY($editFrameMovebarH);
-                            transition: transform $transInTime ease-in-out;
-                            transition-delay: 0s;
-                        }
-
-                        + .c-frame__move-bar {
-                            transition: $transIn;
-                            transition-delay: 0s;
-                            height: $editFrameMovebarH;
-                        }
-                    }
-                }
+            > .c-so-view__local-controls {
+              transform: translateY($editFrameMovebarH);
+              @include transition(height, $transOutTime);
+              transition-delay: 0s;
             }
-            > .l-layout__frame[s-selected] {
-                > .c-so-view.has-complex-content {
-                    + .c-frame__move-bar:before {
-                        display: block;
-                    }
-                }
+
+            + .c-frame__move-bar {
+              @include transition(height);
+              height: $editFrameMovebarH;
             }
+          }
+        }
+      }
+      > .l-layout__frame[s-selected] {
+        > .c-so-view.has-complex-content {
+          + .c-frame__move-bar:before {
+            display: block;
+          }
         }
+      }
+    }
 
-        /******************* > 1 ITEMS SELECTED */
-        &.is-multi-selected {
-            .l-layout__frame[s-selected] {
-                > .c-so-view.has-complex-content + .c-frame__move-bar {
-                    display: block;
-                }
-            }
+    /******************* > 1 ITEMS SELECTED */
+    &.is-multi-selected {
+      .l-layout__frame[s-selected] {
+        > .c-so-view.has-complex-content + .c-frame__move-bar {
+          display: block;
         }
+      }
     }
+  }
 }
diff --git a/src/plugins/displayLayout/components/telemetry-view.scss b/src/plugins/displayLayout/components/telemetry-view.scss
index 0dbfc75ac68..e1ffcca9fda 100644
--- a/src/plugins/displayLayout/components/telemetry-view.scss
+++ b/src/plugins/displayLayout/components/telemetry-view.scss
@@ -1,42 +1,48 @@
 .c-telemetry-view {
+  display: flex;
+  align-items: stretch;
+
+  > * {
+    // Label and value holders
+    flex: 1 1 50%;
     display: flex;
-    align-items: stretch;
+    flex-direction: row;
+    align-items: center;
+    overflow: hidden;
+    padding: $interiorMargin;
 
     > * {
-        // Label and value holders
-        flex: 1 1 auto;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        overflow: hidden;
-        padding: $interiorMargin;
-
-        > * {
-            // Text elements
-            @include ellipsize();
-        }
+      // Text elements
+      @include ellipsize();
     }
+  }
 
-    > * + * {
-        margin-left: $interiorMargin;
-    }
+  &__value {
+    @include isLimit();
+  }
 
-    &__value {
-        @include isLimit();
-    }
+  &__label {
+    margin-right: $interiorMargin;
+  }
 
-    .c-frame & {
-        @include abs();
-        border: 1px solid transparent;
+  &.is-stale {
+    .c-telemetry-view__value {
+      @include isStaleElement();
     }
+  }
 
-    .is-status__indicator {
-        position: absolute;
-        top: 0;
-        left: 0;
-    }
+  .c-frame & {
+    @include abs();
+    border: 1px solid transparent;
+  }
 
-    &[class*='is-status'] {
-        border: $borderMissing;
-    }
+  .is-status__indicator {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &[class*='is-status'] {
+    border: $borderMissing;
+  }
 }
diff --git a/src/plugins/displayLayout/components/text-view.scss b/src/plugins/displayLayout/components/text-view.scss
index 0ea717e7ddc..043035b5b68 100644
--- a/src/plugins/displayLayout/components/text-view.scss
+++ b/src/plugins/displayLayout/components/text-view.scss
@@ -1,11 +1,11 @@
 .c-text-view {
-    display: flex;
-    align-items: center; // Vertically center text
-    overflow: hidden;
-    padding: $interiorMargin;
+  display: flex;
+  align-items: center; // Vertically center text
+  overflow: hidden;
+  padding: $interiorMargin;
 
-    .c-frame & {
-        @include abs();
-        border: 1px solid transparent;
-    }
+  .c-frame & {
+    @include abs();
+    border: 1px solid transparent;
+  }
 }
diff --git a/src/plugins/displayLayout/mixins/objectStyles-mixin.js b/src/plugins/displayLayout/mixins/objectStyles-mixin.js
index 76323f81b31..34c44b87b57 100644
--- a/src/plugins/displayLayout/mixins/objectStyles-mixin.js
+++ b/src/plugins/displayLayout/mixins/objectStyles-mixin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,60 +20,75 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import StyleRuleManager from "@/plugins/condition/StyleRuleManager";
-import {getStylesWithoutNoneValue} from "@/plugins/condition/utils/styleUtils";
+import StyleRuleManager from '@/plugins/condition/StyleRuleManager';
+import { getStylesWithoutNoneValue } from '@/plugins/condition/utils/styleUtils';
 
 export default {
-    inject: ['openmct'],
-    data() {
-        return {
-            objectStyle: undefined,
-            itemStyle: undefined,
-            styleClass: ''
-        };
-    },
-    mounted() {
-        this.parentDomainObject = this.$parent.domainObject;
-        this.itemId = this.item.id;
-        this.objectStyle = this.getObjectStyleForItem(this.parentDomainObject.configuration.objectStyles);
-        this.initObjectStyles();
-    },
-    destroyed() {
-        if (this.stopListeningObjectStyles) {
-            this.stopListeningObjectStyles();
-        }
+  inject: ['openmct'],
+  data() {
+    return {
+      objectStyle: undefined,
+      itemStyle: undefined,
+      styleClass: ''
+    };
+  },
+  mounted() {
+    this.parentDomainObject = this.$parent.domainObject;
+    this.itemId = this.item.id;
+    this.objectStyle = this.getObjectStyleForItem(
+      this.parentDomainObject.configuration.objectStyles
+    );
+    this.initObjectStyles();
+  },
+  beforeUnmount() {
+    if (this.stopListeningObjectStyles) {
+      this.stopListeningObjectStyles();
+    }
+
+    if (this.styleRuleManager) {
+      this.styleRuleManager.destroy();
+    }
+  },
+  methods: {
+    getObjectStyleForItem(objectStyle) {
+      if (objectStyle) {
+        return objectStyle[this.itemId] ? Object.assign({}, objectStyle[this.itemId]) : undefined;
+      } else {
+        return undefined;
+      }
     },
-    methods: {
-        getObjectStyleForItem(objectStyle) {
-            if (objectStyle) {
-                return objectStyle[this.itemId] ? Object.assign({}, objectStyle[this.itemId]) : undefined;
-            } else {
-                return undefined;
-            }
-        },
-        initObjectStyles() {
-            if (!this.styleRuleManager) {
-                this.styleRuleManager = new StyleRuleManager(this.objectStyle, this.openmct, this.updateStyle.bind(this), true);
-            } else {
-                this.styleRuleManager.updateObjectStyleConfig(this.objectStyle);
-            }
+    initObjectStyles() {
+      if (!this.styleRuleManager) {
+        this.styleRuleManager = new StyleRuleManager(
+          this.objectStyle,
+          this.openmct,
+          this.updateStyle.bind(this),
+          true
+        );
+      } else {
+        this.styleRuleManager.updateObjectStyleConfig(this.objectStyle);
+      }
 
-            if (this.stopListeningObjectStyles) {
-                this.stopListeningObjectStyles();
-            }
+      if (this.stopListeningObjectStyles) {
+        this.stopListeningObjectStyles();
+      }
 
-            this.stopListeningObjectStyles = this.openmct.objects.observe(this.parentDomainObject, 'configuration.objectStyles', (newObjectStyle) => {
-                //Updating object styles in the inspector view will trigger this so that the changes are reflected immediately
-                let newItemObjectStyle = this.getObjectStyleForItem(newObjectStyle);
-                if (this.objectStyle !== newItemObjectStyle) {
-                    this.objectStyle = newItemObjectStyle;
-                    this.styleRuleManager.updateObjectStyleConfig(this.objectStyle);
-                }
-            });
-        },
-        updateStyle(style) {
-            this.itemStyle = getStylesWithoutNoneValue(style);
-            this.styleClass = this.itemStyle && this.itemStyle.isStyleInvisible;
+      this.stopListeningObjectStyles = this.openmct.objects.observe(
+        this.parentDomainObject,
+        'configuration.objectStyles',
+        (newObjectStyle) => {
+          //Updating object styles in the inspector view will trigger this so that the changes are reflected immediately
+          let newItemObjectStyle = this.getObjectStyleForItem(newObjectStyle);
+          if (this.objectStyle !== newItemObjectStyle) {
+            this.objectStyle = newItemObjectStyle;
+            this.styleRuleManager.updateObjectStyleConfig(this.objectStyle);
+          }
         }
+      );
+    },
+    updateStyle(style) {
+      this.itemStyle = getStylesWithoutNoneValue(style);
+      this.styleClass = this.itemStyle && this.itemStyle.isStyleInvisible;
     }
+  }
 };
diff --git a/src/plugins/displayLayout/plugin.js b/src/plugins/displayLayout/plugin.js
index b66f181a536..67ba40bd613 100644
--- a/src/plugins/displayLayout/plugin.js
+++ b/src/plugins/displayLayout/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,111 +20,124 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import mount from 'utils/mount';
+
+import CopyToClipboardAction from './actions/CopyToClipboardAction.js';
 import AlphaNumericFormatViewProvider from './AlphanumericFormatViewProvider.js';
-import CopyToClipboardAction from './actions/CopyToClipboardAction';
 import DisplayLayout from './components/DisplayLayout.vue';
 import DisplayLayoutToolbar from './DisplayLayoutToolbar.js';
 import DisplayLayoutType from './DisplayLayoutType.js';
-
-import objectUtils from 'objectUtils';
-
-import Vue from 'vue';
+import DisplayLayoutDrawingObjectTypes from './DrawingObjectTypes.js';
 
 class DisplayLayoutView {
-    constructor(openmct, domainObject, objectPath, options) {
-        this.openmct = openmct;
-        this.domainObject = domainObject;
-        this.objectPath = objectPath;
-        this.options = options;
+  constructor(openmct, domainObject, objectPath, options) {
+    this.openmct = openmct;
+    this.domainObject = domainObject;
+    this.objectPath = objectPath;
+    this.options = options;
 
-        this.component = undefined;
-    }
+    this.component = null;
+  }
+
+  show(container, isEditing, { renderWhenVisible }) {
+    const { vNode, destroy } = mount(
+      {
+        el: container,
+        components: {
+          DisplayLayout
+        },
+        provide: {
+          openmct: this.openmct,
+          objectPath: this.objectPath,
+          options: this.options,
+          currentView: this,
+          renderWhenVisible
+        },
+        data: () => {
+          return {
+            domainObject: this.domainObject,
+            isEditing
+          };
+        },
+        template:
+          '<display-layout ref="displayLayout" :domain-object="domainObject" :is-editing="isEditing"></display-layout>'
+      },
+      {
+        app: this.openmct.app,
+        element: container
+      }
+    );
+    this._destroy = destroy;
+    this.component = vNode.componentInstance;
+  }
 
-    show(container, isEditing) {
-        this.component = new Vue({
-            el: container,
-            components: {
-                DisplayLayout
-            },
-            provide: {
-                openmct: this.openmct,
-                objectPath: this.objectPath,
-                options: this.options,
-                objectUtils,
-                currentView: this
-            },
-            data: () => {
-                return {
-                    domainObject: this.domainObject,
-                    isEditing
-                };
-            },
-            template: '<display-layout ref="displayLayout" :domain-object="domainObject" :is-editing="isEditing"></display-layout>'
-        });
+  getViewContext() {
+    if (!this.component) {
+      return {};
     }
 
-    getViewContext() {
-        if (!this.component) {
-            return {};
-        }
+    return this.component.$refs.displayLayout.getViewContext();
+  }
 
-        return this.component.$refs.displayLayout.getViewContext();
-    }
+  getSelectionContext() {
+    return {
+      item: this.domainObject,
+      supportsMultiSelect: true
+    };
+  }
 
-    getSelectionContext() {
-        return {
-            item: this.domainObject,
-            supportsMultiSelect: true,
-            addElement: this.component && this.component.$refs.displayLayout.addElement,
-            removeItem: this.component && this.component.$refs.displayLayout.removeItem,
-            orderItem: this.component && this.component.$refs.displayLayout.orderItem,
-            duplicateItem: this.component && this.component.$refs.displayLayout.duplicateItem,
-            switchViewType: this.component && this.component.$refs.displayLayout.switchViewType,
-            mergeMultipleTelemetryViews: this.component && this.component.$refs.displayLayout.mergeMultipleTelemetryViews,
-            mergeMultipleOverlayPlots: this.component && this.component.$refs.displayLayout.mergeMultipleOverlayPlots,
-            toggleGrid: this.component && this.component.$refs.displayLayout.toggleGrid
-        };
+  contextAction(action, ...rest) {
+    if (this?.component.$refs.displayLayout[action]) {
+      this.component.$refs.displayLayout[action](...rest);
     }
+  }
 
-    onEditModeChange(isEditing) {
-        this.component.isEditing = isEditing;
-    }
+  onEditModeChange(isEditing) {
+    this.component.isEditing = isEditing;
+  }
 
-    destroy() {
-        this.component.$destroy();
-        this.component = undefined;
+  destroy() {
+    if (this._destroy) {
+      this._destroy();
+      this.component = null;
     }
+  }
 }
 
 export default function DisplayLayoutPlugin(options) {
-    return function (openmct) {
-        openmct.actions.register(new CopyToClipboardAction(openmct));
+  return function (openmct) {
+    openmct.actions.register(new CopyToClipboardAction(openmct));
 
-        openmct.objectViews.addProvider({
-            key: 'layout.view',
-            canView: function (domainObject) {
-                return domainObject.type === 'layout';
-            },
-            canEdit: function (domainObject) {
-                return domainObject.type === 'layout';
-            },
-            view: function (domainObject, objectPath) {
-                return new DisplayLayoutView(openmct, domainObject, objectPath, options);
-            },
-            priority() {
-                return 100;
-            }
-        });
-        openmct.types.addType('layout', DisplayLayoutType());
-        openmct.toolbars.addProvider(new DisplayLayoutToolbar(openmct, options));
-        openmct.inspectorViews.addProvider(new AlphaNumericFormatViewProvider(openmct, options));
-        openmct.composition.addPolicy((parent, child) => {
-            if (parent.type === 'layout' && child.type === 'folder') {
-                return false;
-            } else {
-                return true;
-            }
-        });
-        DisplayLayoutPlugin._installed = true;
-    };
+    openmct.objectViews.addProvider({
+      key: 'layout.view',
+      canView: function (domainObject) {
+        return domainObject.type === 'layout';
+      },
+      canEdit: function (domainObject) {
+        return domainObject.type === 'layout';
+      },
+      view: function (domainObject, objectPath) {
+        return new DisplayLayoutView(openmct, domainObject, objectPath, options);
+      },
+      priority() {
+        return 100;
+      }
+    });
+    openmct.types.addType('layout', DisplayLayoutType());
+    openmct.toolbars.addProvider(new DisplayLayoutToolbar(openmct));
+    openmct.inspectorViews.addProvider(new AlphaNumericFormatViewProvider(openmct, options));
+    openmct.composition.addPolicy((parent, child) => {
+      if (parent.type === 'layout' && child.type === 'folder') {
+        return false;
+      } else {
+        return true;
+      }
+    });
+
+    for (const [type, definition] of Object.entries(DisplayLayoutDrawingObjectTypes)) {
+      openmct.types.addType(type, definition);
+    }
+
+    DisplayLayoutPlugin._installed = true;
+  };
 }
diff --git a/src/plugins/displayLayout/pluginSpec.js b/src/plugins/displayLayout/pluginSpec.js
index 43c2e10c506..2c9402abacf 100644
--- a/src/plugins/displayLayout/pluginSpec.js
+++ b/src/plugins/displayLayout/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,328 +20,413 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import { createOpenMct, resetApplicationState } from 'utils/testing';
-import DisplayLayoutPlugin from './plugin';
+import { createOpenMct, renderWhenVisible, resetApplicationState } from 'utils/testing';
+import { nextTick } from 'vue';
+
+import DisplayLayoutPlugin from './plugin.js';
 
 describe('the plugin', function () {
-    let element;
-    let child;
-    let openmct;
-    let displayLayoutDefinition;
+  let element;
+  let child;
+  let openmct;
+  let displayLayoutDefinition;
 
-    beforeEach((done) => {
-        openmct = createOpenMct();
-        openmct.install(new DisplayLayoutPlugin({
-            showAsView: []
-        }));
-        displayLayoutDefinition = openmct.types.get('layout');
+  beforeEach((done) => {
+    openmct = createOpenMct();
+    openmct.install(
+      new DisplayLayoutPlugin({
+        showAsView: []
+      })
+    );
+    displayLayoutDefinition = openmct.types.get('layout');
 
-        element = document.createElement('div');
-        child = document.createElement('div');
-        element.appendChild(child);
+    element = document.createElement('div');
+    child = document.createElement('div');
+    element.appendChild(child);
 
-        openmct.on('start', done);
-        openmct.startHeadless();
-    });
+    openmct.on('start', done);
+    openmct.start(child);
+  });
 
-    afterEach(() => {
-        return resetApplicationState(openmct);
-    });
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
 
-    it('defines a display layout object type with the correct key', () => {
-        expect(displayLayoutDefinition.definition.name).toEqual('Display Layout');
-    });
+  it('defines a display layout object type with the correct key', () => {
+    expect(displayLayoutDefinition.definition.name).toEqual('Display Layout');
+  });
 
-    it('provides a view', () => {
-        const testViewObject = {
-            id: 'test-object',
-            type: 'layout',
-            configuration: {
-                items: [
-                    {
+  it('provides a view', () => {
+    const testViewObject = {
+      id: 'test-object',
+      type: 'layout',
+      configuration: {
+        items: [
+          {
+            identifier: {
+              namespace: '',
+              key: '55122607-e65e-44d5-9c9d-9c31a914ca89'
+            },
+            x: 8,
+            y: 3,
+            width: 10,
+            height: 5,
+            displayMode: 'all',
+            value: 'sin',
+            stroke: '',
+            fill: '',
+            color: '',
+            size: '13px',
+            type: 'telemetry-view',
+            id: 'deb9f839-80ad-4ccf-a152-5c763ceb7d7e'
+          }
+        ],
+        layoutGrid: [10, 10]
+      }
+    };
 
-                        'identifier': {
-                            'namespace': '',
-                            'key': '55122607-e65e-44d5-9c9d-9c31a914ca89'
-                        },
-                        'x': 8,
-                        'y': 3,
-                        'width': 10,
-                        'height': 5,
-                        'displayMode': 'all',
-                        'value': 'sin',
-                        'stroke': '',
-                        'fill': '',
-                        'color': '',
-                        'size': '13px',
-                        'type': 'telemetry-view',
-                        'id': 'deb9f839-80ad-4ccf-a152-5c763ceb7d7e'
+    const applicableViews = openmct.objectViews.get(testViewObject, []);
+    let displayLayoutViewProvider = applicableViews.find(
+      (viewProvider) => viewProvider.key === 'layout.view'
+    );
+    expect(displayLayoutViewProvider).toBeDefined();
+  });
 
-                    }
-                ],
-                layoutGrid: [10, 10]
-            }
-        };
+  it('renders a display layout view without errors', () => {
+    const testViewObject = {
+      identifier: {
+        namespace: 'test-namespace',
+        key: 'test-key'
+      },
+      type: 'layout',
+      configuration: {
+        items: [],
+        layoutGrid: [10, 10]
+      },
+      composition: []
+    };
 
-        const applicableViews = openmct.objectViews.get(testViewObject, []);
-        let displayLayoutViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'layout.view');
-        expect(displayLayoutViewProvider).toBeDefined();
-    });
+    const applicableViews = openmct.objectViews.get(testViewObject, [testViewObject]);
+    let displayLayoutViewProvider = applicableViews.find(
+      (viewProvider) => viewProvider.key === 'layout.view'
+    );
+    let view = displayLayoutViewProvider.view(testViewObject, [testViewObject]);
+    let error;
 
-    describe('the alpha numeric format view', () => {
-        let displayLayoutItem;
-        let telemetryItem;
-        let selection;
+    try {
+      view.show(child, false, { renderWhenVisible });
+    } catch (e) {
+      error = e;
+    }
 
-        beforeEach(() => {
-            displayLayoutItem = {
-                'composition': [
-                ],
-                'configuration': {
-                    'items': [
-                        {
+    expect(error).toBeUndefined();
+  });
 
-                            'identifier': {
-                                'namespace': '',
-                                'key': '55122607-e65e-44d5-9c9d-9c31a914ca89'
-                            },
-                            'x': 8,
-                            'y': 3,
-                            'width': 10,
-                            'height': 5,
-                            'displayMode': 'all',
-                            'value': 'sin',
-                            'stroke': '',
-                            'fill': '',
-                            'color': '',
-                            'size': '13px',
-                            'type': 'telemetry-view',
-                            'id': 'deb9f839-80ad-4ccf-a152-5c763ceb7d7e'
+  describe('on load', () => {
+    let displayLayoutItem;
+    let item;
 
-                        }
-                    ],
-                    'layoutGrid': [
-                        10,
-                        10
-                    ]
-                },
-                'name': 'Display Layout',
-                'type': 'layout',
-                'identifier': {
-                    'namespace': '',
-                    'key': 'c5e636c1-6771-4c9c-b933-8665cab189b3'
-                }
-            };
-            telemetryItem = {
-                'telemetry': {
-                    'period': 5,
-                    'amplitude': 5,
-                    'offset': 5,
-                    'dataRateInHz': 5,
-                    'phase': 5,
-                    'randomness': 0
-                },
-                'name': 'Sine Wave Generator',
-                'type': 'generator',
-                'modified': 1592851063871,
-                'location': 'mine',
-                'persisted': 1592851063871,
-                'id': '55122607-e65e-44d5-9c9d-9c31a914ca89',
-                'identifier': {
-                    'namespace': '',
-                    'key': '55122607-e65e-44d5-9c9d-9c31a914ca89'
-                }
-            };
-            selection = [
-                [{
-                    context: {
-                        'layoutItem': displayLayoutItem.configuration.items[0],
-                        'item': telemetryItem,
-                        'index': 1
-                    }
-                },
-                {
-                    context: {
-                        'item': displayLayoutItem,
-                        'supportsMultiSelect': true
-                    }
-                }]
-            ];
-        });
+    beforeEach((done) => {
+      item = {
+        width: 32,
+        height: 18,
+        x: 78,
+        y: 8,
+        identifier: {
+          namespace: '',
+          key: 'bdeb91ab-3a7e-4a71-9dd2-39d73644e136'
+        },
+        hasFrame: true,
+        type: 'line-view', // so no telemetry functionality is triggered, just want to test the sync
+        id: 'c0ff485a-344c-4e70-8d83-a9d9998a69fc'
+      };
+      displayLayoutItem = {
+        composition: [
+          // no item in composition, but item in configuration items
+        ],
+        configuration: {
+          items: [item],
+          layoutGrid: [10, 10]
+        },
+        name: 'Display Layout',
+        type: 'layout',
+        identifier: {
+          namespace: '',
+          key: 'c5e636c1-6771-4c9c-b933-8665cab189b3'
+        }
+      };
+
+      const applicableViews = openmct.objectViews.get(displayLayoutItem, []);
+      const displayLayoutViewProvider = applicableViews.find(
+        (viewProvider) => viewProvider.key === 'layout.view'
+      );
+      const view = displayLayoutViewProvider.view(displayLayoutItem, displayLayoutItem);
+      view.show(child, false, { renderWhenVisible });
 
-        it('provides an alphanumeric format view', () => {
-            const displayLayoutAlphaNumFormatView = openmct.inspectorViews.get(selection);
-            expect(displayLayoutAlphaNumFormatView.length).toBeDefined();
-        });
+      nextTick(done);
     });
 
-    describe('the toolbar', () => {
-        let displayLayoutItem;
-        let selection;
+    it('will sync composition and layout items', () => {
+      expect(displayLayoutItem.configuration.items.length).toBe(0);
+    });
+  });
 
-        beforeEach(() => {
-            displayLayoutItem = {
-                'composition': [
-                ],
-                'configuration': {
-                    'items': [
-                        {
-                            'fill': '#717171',
-                            'stroke': '',
-                            'x': 1,
-                            'y': 1,
-                            'width': 10,
-                            'height': 5,
-                            'type': 'box-view',
-                            'id': '89b88746-d325-487b-aec4-11b79afff9e8'
-                        },
-                        {
-                            'x': 18,
-                            'y': 9,
-                            'x2': 23,
-                            'y2': 4,
-                            'stroke': '#717171',
-                            'type': 'line-view',
-                            'id': '57d49a28-7863-43bd-9593-6570758916f0'
-                        },
-                        {
+  describe('the alpha numeric format view', () => {
+    let displayLayoutItem;
+    let telemetryItem;
+    let selection;
 
-                            'identifier': {
-                                'namespace': '',
-                                'key': '55122607-e65e-44d5-9c9d-9c31a914ca89'
-                            },
-                            'x': 8,
-                            'y': 3,
-                            'width': 10,
-                            'height': 5,
-                            'displayMode': 'all',
-                            'value': 'sin',
-                            'stroke': '',
-                            'fill': '',
-                            'color': '',
-                            'size': '13px',
-                            'type': 'telemetry-view',
-                            'id': 'deb9f839-80ad-4ccf-a152-5c763ceb7d7e'
+    beforeEach(() => {
+      displayLayoutItem = {
+        composition: [],
+        configuration: {
+          items: [
+            {
+              identifier: {
+                namespace: '',
+                key: '55122607-e65e-44d5-9c9d-9c31a914ca89'
+              },
+              x: 8,
+              y: 3,
+              width: 10,
+              height: 5,
+              displayMode: 'all',
+              value: 'sin',
+              stroke: '',
+              fill: '',
+              color: '',
+              size: '13px',
+              type: 'telemetry-view',
+              id: 'deb9f839-80ad-4ccf-a152-5c763ceb7d7e'
+            }
+          ],
+          layoutGrid: [10, 10]
+        },
+        name: 'Display Layout',
+        type: 'layout',
+        identifier: {
+          namespace: '',
+          key: 'c5e636c1-6771-4c9c-b933-8665cab189b3'
+        }
+      };
+      telemetryItem = {
+        telemetry: {
+          period: 5,
+          amplitude: 5,
+          offset: 5,
+          dataRateInHz: 5,
+          phase: 5,
+          randomness: 0
+        },
+        name: 'Sine Wave Generator',
+        type: 'generator',
+        modified: 1592851063871,
+        location: 'mine',
+        persisted: 1592851063871,
+        id: '55122607-e65e-44d5-9c9d-9c31a914ca89',
+        identifier: {
+          namespace: '',
+          key: '55122607-e65e-44d5-9c9d-9c31a914ca89'
+        }
+      };
+      selection = [
+        [
+          {
+            context: {
+              layoutItem: displayLayoutItem.configuration.items[0],
+              item: telemetryItem,
+              index: 1
+            }
+          },
+          {
+            context: {
+              item: displayLayoutItem,
+              supportsMultiSelect: true
+            }
+          }
+        ]
+      ];
+    });
 
-                        },
-                        {
+    it('provides an alphanumeric format view', () => {
+      const displayLayoutAlphaNumFormatView = openmct.inspectorViews.get(selection);
+      expect(displayLayoutAlphaNumFormatView.length).toBeDefined();
+    });
+  });
 
-                            'width': 32,
-                            'height': 18,
-                            'x': 78,
-                            'y': 8,
-                            'identifier': {
-                                'namespace': '',
-                                'key': 'bdeb91ab-3a7e-4a71-9dd2-39d73644e136'
-                            },
-                            'hasFrame': true,
-                            'type': 'subobject-view',
-                            'id': 'c0ff485a-344c-4e70-8d83-a9d9998a69fc'
+  describe('the toolbar', () => {
+    let displayLayoutItem;
+    let selection;
 
-                        }
-                    ],
-                    'layoutGrid': [
-                        10,
-                        10
-                    ]
-                },
-                'name': 'Display Layout',
-                'type': 'layout',
-                'identifier': {
-                    'namespace': '',
-                    'key': 'c5e636c1-6771-4c9c-b933-8665cab189b3'
-                }
-            };
-            selection = [
-                [{
-                    context: {
-                        'layoutItem': displayLayoutItem.configuration.items[1],
-                        'index': 1
-                    }
-                },
-                {
-                    context: {
-                        'item': displayLayoutItem,
-                        'supportsMultiSelect': true
-                    }
-                }],
-                [{
-                    context: {
-                        'layoutItem': displayLayoutItem.configuration.items[0],
-                        'index': 0
-                    }
-                },
-                {
-                    context: {
-                        item: displayLayoutItem,
-                        'supportsMultiSelect': true
-                    }
-                }],
-                [{
-                    context: {
-                        'layoutItem': displayLayoutItem.configuration.items[2],
-                        'item': displayLayoutItem.configuration.items[2],
-                        'index': 2
+    beforeEach(() => {
+      displayLayoutItem = {
+        composition: [],
+        configuration: {
+          items: [
+            {
+              fill: '#666666',
+              stroke: '',
+              x: 1,
+              y: 1,
+              width: 10,
+              height: 5,
+              type: 'box-view',
+              id: '89b88746-d325-487b-aec4-11b79afff9e8'
+            },
+            {
+              fill: '#666666',
+              stroke: '',
+              x: 1,
+              y: 1,
+              width: 10,
+              height: 10,
+              type: 'ellipse-view',
+              id: '19b88746-d325-487b-aec4-11b79afff9z8'
+            },
+            {
+              x: 18,
+              y: 9,
+              x2: 23,
+              y2: 4,
+              stroke: '#666666',
+              type: 'line-view',
+              id: '57d49a28-7863-43bd-9593-6570758916f0'
+            },
+            {
+              identifier: {
+                namespace: '',
+                key: '55122607-e65e-44d5-9c9d-9c31a914ca89'
+              },
+              x: 8,
+              y: 3,
+              width: 10,
+              height: 5,
+              displayMode: 'all',
+              value: 'sin',
+              stroke: '',
+              fill: '',
+              color: '',
+              size: '13px',
+              type: 'telemetry-view',
+              id: 'deb9f839-80ad-4ccf-a152-5c763ceb7d7e'
+            },
+            {
+              width: 32,
+              height: 18,
+              x: 78,
+              y: 8,
+              identifier: {
+                namespace: '',
+                key: 'bdeb91ab-3a7e-4a71-9dd2-39d73644e136'
+              },
+              hasFrame: true,
+              type: 'subobject-view',
+              id: 'c0ff485a-344c-4e70-8d83-a9d9998a69fc'
+            }
+          ],
+          layoutGrid: [10, 10]
+        },
+        name: 'Display Layout',
+        type: 'layout',
+        identifier: {
+          namespace: '',
+          key: 'c5e636c1-6771-4c9c-b933-8665cab189b3'
+        }
+      };
+      selection = [
+        [
+          {
+            context: {
+              layoutItem: displayLayoutItem.configuration.items[1],
+              index: 1
+            }
+          },
+          {
+            context: {
+              item: displayLayoutItem,
+              supportsMultiSelect: true
+            }
+          }
+        ],
+        [
+          {
+            context: {
+              layoutItem: displayLayoutItem.configuration.items[0],
+              index: 0
+            }
+          },
+          {
+            context: {
+              item: displayLayoutItem,
+              supportsMultiSelect: true
+            }
+          }
+        ],
+        [
+          {
+            context: {
+              layoutItem: displayLayoutItem.configuration.items[2],
+              item: displayLayoutItem.configuration.items[2],
+              index: 2
+            }
+          },
+          {
+            context: {
+              item: displayLayoutItem,
+              supportsMultiSelect: true
+            }
+          }
+        ],
+        [
+          {
+            context: {
+              item: {
+                composition: [
+                  {
+                    namespace: '',
+                    key: '55122607-e65e-44d5-9c9d-9c31a914ca89'
+                  }
+                ],
+                configuration: {
+                  series: [
+                    {
+                      identifier: {
+                        namespace: '',
+                        key: '55122607-e65e-44d5-9c9d-9c31a914ca89'
+                      }
                     }
+                  ],
+                  yAxis: {},
+                  xAxis: {}
                 },
-                {
-                    context: {
-                        item: displayLayoutItem,
-                        'supportsMultiSelect': true
-                    }
-                }],
-                [{
-                    context: {
-                        'item': {
-
-                            'composition': [
-                                {
-                                    'namespace': '',
-                                    'key': '55122607-e65e-44d5-9c9d-9c31a914ca89'
-                                }
-                            ],
-                            'configuration': {
-                                'series': [
-                                    {
-                                        'identifier': {
-                                            'namespace': '',
-                                            'key': '55122607-e65e-44d5-9c9d-9c31a914ca89'
-                                        }
-                                    }
-                                ],
-                                'yAxis': {
-                                },
-                                'xAxis': {
-                                }
-                            },
-                            'name': 'Unnamed Overlay Plot',
-                            'type': 'telemetry.plot.overlay',
-                            'modified': 1594142141929,
-                            'location': 'mine',
-                            'identifier': {
-                                'namespace': '',
-                                'key': 'bdeb91ab-3a7e-4a71-9dd2-39d73644e136'
-                            },
-                            'persisted': 1594142141929
-
-                        },
-                        'layoutItem': displayLayoutItem.configuration.items[3],
-                        'index': 3
-                    }
+                name: 'Unnamed Overlay Plot',
+                type: 'telemetry.plot.overlay',
+                modified: 1594142141929,
+                location: 'mine',
+                identifier: {
+                  namespace: '',
+                  key: 'bdeb91ab-3a7e-4a71-9dd2-39d73644e136'
                 },
-                {
-                    context: {
-                        item: displayLayoutItem,
-                        'supportsMultiSelect': true
-                    }
-                }]
-            ];
-        });
+                persisted: 1594142141929
+              },
+              layoutItem: displayLayoutItem.configuration.items[3],
+              index: 3
+            }
+          },
+          {
+            context: {
+              item: displayLayoutItem,
+              supportsMultiSelect: true
+            }
+          }
+        ]
+      ];
+    });
 
-        it('provides controls including separators', () => {
-            const displayLayoutToolbar = openmct.toolbars.get(selection);
+    it('provides controls including separators', () => {
+      const displayLayoutToolbar = openmct.toolbars.get(selection);
 
-            expect(displayLayoutToolbar.length).toBe(9);
-        });
+      expect(displayLayoutToolbar.length).toBe(8);
     });
+  });
 });
diff --git a/src/plugins/duplicate/DuplicateAction.js b/src/plugins/duplicate/DuplicateAction.js
index 6e9d2875bb1..2461e46b25e 100644
--- a/src/plugins/duplicate/DuplicateAction.js
+++ b/src/plugins/duplicate/DuplicateAction.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,150 +19,153 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import DuplicateTask from './DuplicateTask';
+import DuplicateTask from './DuplicateTask.js';
 
 export default class DuplicateAction {
-    constructor(openmct) {
-        this.name = 'Duplicate';
-        this.key = 'duplicate';
-        this.description = 'Duplicate this object.';
-        this.cssClass = "icon-duplicate";
-        this.group = "action";
-        this.priority = 7;
-
-        this.openmct = openmct;
+  constructor(openmct) {
+    this.name = 'Duplicate';
+    this.key = 'duplicate';
+    this.description = 'Duplicate this object.';
+    this.cssClass = 'icon-duplicate';
+    this.group = 'action';
+    this.priority = 7;
+
+    this.openmct = openmct;
+    this.transaction = null;
+  }
+
+  invoke(objectPath) {
+    this.object = objectPath[0];
+    this.parent = objectPath[1];
+
+    this.showForm(this.object, this.parent);
+  }
+
+  inNavigationPath() {
+    return this.openmct.router.path.some((objectInPath) =>
+      this.openmct.objects.areIdsEqual(objectInPath.identifier, this.object.identifier)
+    );
+  }
+
+  async onSave(changes) {
+    this.startTransaction();
+
+    let inNavigationPath = this.inNavigationPath();
+    if (inNavigationPath && this.openmct.editor.isEditing()) {
+      this.openmct.editor.save();
     }
 
-    async invoke(objectPath) {
-        let duplicationTask = new DuplicateTask(this.openmct);
-        let originalObject = objectPath[0];
-        let parent = objectPath[1];
-        let userInput;
-
-        try {
-            userInput = await this.getUserInput(originalObject, parent);
-        } catch (error) {
-            // user most likely canceled
-            return;
-        }
-
-        let newParent = userInput.location;
-        let inNavigationPath = this.inNavigationPath(originalObject);
-
-        // legacy check
-        if (this.isLegacyDomainObject(newParent)) {
-            newParent = await this.convertFromLegacy(newParent);
-        }
-
-        // if editing, save
-        if (inNavigationPath && this.openmct.editor.isEditing()) {
-            this.openmct.editor.save();
-        }
-
-        // duplicate
-        let newObject = await duplicationTask.duplicate(originalObject, newParent);
-        this.updateNameCheck(newObject, userInput.name);
-
-        return;
-    }
-
-    async getUserInput(originalObject, parent) {
-        let dialogService = this.openmct.$injector.get('dialogService');
-        let dialogForm = this.getDialogForm(originalObject, parent);
-        let formState = {
-            name: originalObject.name
-        };
-        let userInput = await dialogService.getUserInput(dialogForm, formState);
-
-        return userInput;
-    }
-
-    updateNameCheck(object, name) {
-        if (object.name !== name) {
-            object.name = name;
-            this.openmct.objects.save(object);
-        }
+    let duplicationTask = new DuplicateTask(this.openmct);
+    if (changes.name && changes.name !== this.object.name) {
+      duplicationTask.changeName(changes.name);
     }
 
-    inNavigationPath(object) {
-        return this.openmct.router.path
-            .some(objectInPath => this.openmct.objects.areIdsEqual(objectInPath.identifier, object.identifier));
-    }
-
-    getDialogForm(object, parent) {
-        return {
-            name: "Duplicate Item",
-            sections: [
-                {
-                    rows: [
-                        {
-                            key: "name",
-                            control: "textfield",
-                            name: "Name",
-                            pattern: "\\S+",
-                            required: true,
-                            cssClass: "l-input-lg"
-                        },
-                        {
-                            name: "Location",
-                            cssClass: "grows",
-                            control: "locator",
-                            validate: this.validate(object, parent),
-                            key: 'location'
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-
-    validate(object, currentParent) {
-        return (parentCandidate) => {
-            let currentParentKeystring = this.openmct.objects.makeKeyString(currentParent.identifier);
-            let parentCandidateKeystring = this.openmct.objects.makeKeyString(parentCandidate.getId());
-            let objectKeystring = this.openmct.objects.makeKeyString(object.identifier);
-
-            if (!parentCandidate || !currentParentKeystring) {
-                return false;
-            }
-
-            if (parentCandidateKeystring === objectKeystring) {
-                return false;
+    const parentDomainObjectpath = changes.location || [this.parent];
+    const parent = parentDomainObjectpath[0];
+
+    await duplicationTask.duplicate(this.object, parent);
+
+    return this.saveTransaction();
+  }
+
+  showForm(domainObject, parentDomainObject) {
+    const formStructure = {
+      title: 'Duplicate Item',
+      sections: [
+        {
+          rows: [
+            {
+              key: 'name',
+              control: 'textfield',
+              name: 'Title',
+              pattern: '\\S+',
+              required: true,
+              cssClass: 'l-input-lg',
+              value: domainObject.name
+            },
+            {
+              name: 'Location',
+              cssClass: 'grows',
+              control: 'locator',
+              required: true,
+              parent: parentDomainObject,
+              validate: this.validate(parentDomainObject),
+              key: 'location'
             }
-
-            return this.openmct.composition.checkPolicy(
-                parentCandidate.useCapability('adapter'),
-                object
-            );
-        };
+          ]
+        }
+      ]
+    };
+
+    this.openmct.forms.showForm(formStructure).then(this.onSave.bind(this));
+  }
+
+  validate(currentParent) {
+    return (data) => {
+      const parentCandidate = data.value[0];
+
+      let currentParentKeystring = this.openmct.objects.makeKeyString(currentParent.identifier);
+      let parentCandidateKeystring = this.openmct.objects.makeKeyString(parentCandidate.identifier);
+      let objectKeystring = this.openmct.objects.makeKeyString(this.object.identifier);
+
+      if (!this.openmct.objects.isPersistable(parentCandidate.identifier)) {
+        return false;
+      }
+
+      if (!parentCandidateKeystring || !currentParentKeystring) {
+        return false;
+      }
+
+      if (parentCandidateKeystring === objectKeystring) {
+        return false;
+      }
+
+      const parentCandidateComposition = parentCandidate.composition;
+      if (
+        parentCandidateComposition &&
+        parentCandidateComposition.indexOf(objectKeystring) !== -1
+      ) {
+        return false;
+      }
+
+      return parentCandidate && this.openmct.composition.checkPolicy(parentCandidate, this.object);
+    };
+  }
+
+  appliesTo(objectPath) {
+    const parent = objectPath[1];
+    const parentType = parent && this.openmct.types.get(parent.type);
+    const child = objectPath[0];
+    const childType = child && this.openmct.types.get(child.type);
+    const locked = child.locked ? child.locked : parent && parent.locked;
+    const isPersistable = this.openmct.objects.isPersistable(child.identifier);
+
+    if (locked || !isPersistable) {
+      return false;
     }
 
-    isLegacyDomainObject(domainObject) {
-        return domainObject.getCapability !== undefined;
+    return (
+      childType &&
+      childType.definition.creatable &&
+      parentType &&
+      parentType.definition.creatable &&
+      Array.isArray(parent.composition)
+    );
+  }
+
+  startTransaction() {
+    if (!this.openmct.objects.isTransactionActive()) {
+      this.transaction = this.openmct.objects.startTransaction();
     }
+  }
 
-    async convertFromLegacy(legacyDomainObject) {
-        let objectContext = legacyDomainObject.getCapability('context');
-        let domainObject = await this.openmct.objects.get(objectContext.domainObject.id);
-
-        return domainObject;
+  async saveTransaction() {
+    if (!this.transaction) {
+      return;
     }
 
-    appliesTo(objectPath) {
-        let parent = objectPath[1];
-        let parentType = parent && this.openmct.types.get(parent.type);
-        let child = objectPath[0];
-        let childType = child && this.openmct.types.get(child.type);
-        let locked = child.locked ? child.locked : parent && parent.locked;
-
-        if (locked) {
-            return false;
-        }
-
-        return childType
-            && childType.definition.creatable
-            && parentType
-            && parentType.definition.creatable
-            && Array.isArray(parent.composition);
-    }
+    await this.transaction.commit();
+    this.openmct.objects.endTransaction();
+    this.transaction = null;
+  }
 }
diff --git a/src/plugins/duplicate/DuplicateTask.js b/src/plugins/duplicate/DuplicateTask.js
index 8477500e524..15913c4f9aa 100644
--- a/src/plugins/duplicate/DuplicateTask.js
+++ b/src/plugins/duplicate/DuplicateTask.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 
 /**
  * This class encapsulates the process of  duplicating/copying a domain object
@@ -34,240 +34,256 @@ import uuid from 'uuid';
  * @constructor
  */
 export default class DuplicateTask {
-
-    constructor(openmct) {
-        this.domainObject = undefined;
-        this.parent = undefined;
-        this.firstClone = undefined;
-        this.filter = undefined;
-        this.persisted = 0;
-        this.clones = [];
-        this.idMap = {};
-
-        this.openmct = openmct;
+  constructor(openmct) {
+    this.domainObject = undefined;
+    this.parent = undefined;
+    this.firstClone = undefined;
+    this.filter = undefined;
+    this.persisted = 0;
+    this.clones = [];
+    this.idMap = {};
+    this.name = undefined;
+
+    this.openmct = openmct;
+  }
+
+  changeName(name) {
+    this.name = name;
+  }
+
+  /**
+   * Execute the duplicate/copy task with the objects provided.
+   * @returns {promise} Which will resolve with a clone of the object
+   * once complete.
+   */
+  async duplicate(domainObject, parent, filter) {
+    this.domainObject = domainObject;
+    this.parent = parent;
+    this.namespace = parent.identifier.namespace;
+    this.filter = filter || this.isCreatable;
+
+    await this.buildDuplicationPlan();
+    await this.persistObjects();
+    await this.addClonesToParent();
+
+    return this.firstClone;
+  }
+
+  /**
+   * Will build a graph of an object and all of its child objects in
+   * memory
+   * @private
+   * @param domainObject The original object to be copied
+   * @param parent The parent of the original object to be copied
+   * @returns {Promise} resolved with an array of clones of the models
+   * of the object tree being copied. Duplicating is done in a bottom-up
+   * fashion, so that the last member in the array is a clone of the model
+   * object being copied. The clones are all full composed with
+   * references to their own children.
+   */
+  async buildDuplicationPlan() {
+    let domainObjectClone = await this.duplicateObject(this.domainObject);
+    if (domainObjectClone !== this.domainObject) {
+      domainObjectClone.location = this.getKeyString(this.parent);
     }
 
-    /**
-     * Execute the duplicate/copy task with the objects provided.
-     * @returns {promise} Which will resolve with a clone of the object
-     * once complete.
-     */
-    async duplicate(domainObject, parent, filter) {
-        this.domainObject = domainObject;
-        this.parent = parent;
-        this.namespace = parent.identifier.namespace;
-        this.filter = filter || this.isCreatable;
-
-        await this.buildDuplicationPlan();
-        await this.persistObjects();
-        await this.addClonesToParent();
-
-        return this.firstClone;
+    if (this.name) {
+      domainObjectClone.name = this.name;
     }
 
-    /**
-     * Will build a graph of an object and all of its child objects in
-     * memory
-     * @private
-     * @param domainObject The original object to be copied
-     * @param parent The parent of the original object to be copied
-     * @returns {Promise} resolved with an array of clones of the models
-     * of the object tree being copied. Duplicating is done in a bottom-up
-     * fashion, so that the last member in the array is a clone of the model
-     * object being copied. The clones are all full composed with
-     * references to their own children.
-     */
-    async buildDuplicationPlan() {
-        let domainObjectClone = await this.duplicateObject(this.domainObject);
-
-        if (domainObjectClone !== this.domainObject) {
-            domainObjectClone.location = this.getKeyString(this.parent);
-        }
-
-        this.firstClone = domainObjectClone;
-
-        return;
+    this.firstClone = domainObjectClone;
+
+    return;
+  }
+
+  /**
+   * Will persist a list of {@link objectClones}. It will persist all
+   * simultaneously, irrespective of order in the list. This may
+   * result in automatic request batching by the browser.
+   */
+  async persistObjects() {
+    let initialCount = this.clones.length;
+    let dialog = this.openmct.overlays.progressDialog({
+      progressPerc: 0,
+      message: `Duplicating ${initialCount} objects.`,
+      iconClass: 'info',
+      title: 'Duplicating'
+    });
+
+    let clonesDone = Promise.all(
+      this.clones.map((clone) => {
+        let percentPersisted = Math.ceil(100 * (++this.persisted / initialCount));
+        let message = `Duplicating ${initialCount - this.persisted} objects.`;
+
+        dialog.updateProgress(percentPersisted, message);
+
+        return this.openmct.objects.save(clone);
+      })
+    );
+
+    await clonesDone;
+
+    dialog.dismiss();
+    this.openmct.notifications.info(`Duplicated ${this.persisted} objects.`);
+
+    return;
+  }
+
+  /**
+   * Will add a list of clones to the specified parent's composition
+   */
+  async addClonesToParent() {
+    let parentComposition = this.openmct.composition.get(this.parent);
+    await parentComposition.load();
+    parentComposition.add(this.firstClone);
+
+    return;
+  }
+
+  /**
+   * A recursive function that will perform a bottom-up duplicate of
+   * the object tree with originalObject at the root. Recurses to
+   * the farthest leaf, then works its way back up again,
+   * cloning objects, and composing them with their child clones
+   * as it goes
+   * @private
+   * @returns {DomainObject} If the type of the original object allows for
+   * duplication, then a duplicate of the object, otherwise the object
+   * itself (to allow linking to non duplicatable objects).
+   */
+  async duplicateObject(originalObject) {
+    // Check if the creatable (or other passed in filter).
+    if (this.filter(originalObject)) {
+      let clone = this.cloneObjectModel(originalObject);
+      let composeesCollection = this.openmct.composition.get(originalObject);
+      let composees;
+
+      if (composeesCollection) {
+        composees = await composeesCollection.load();
+      }
+
+      return this.duplicateComposees(clone, composees);
     }
 
-    /**
-     * Will persist a list of {@link objectClones}. It will persist all
-     * simultaneously, irrespective of order in the list. This may
-     * result in automatic request batching by the browser.
-     */
-    async persistObjects() {
-        let initialCount = this.clones.length;
-        let dialog = this.openmct.overlays.progressDialog({
-            progressPerc: 0,
-            message: `Duplicating ${initialCount} objects.`,
-            iconClass: 'info',
-            title: 'Duplicating'
+    // Not creatable, creating a link, no need to iterate children
+    return originalObject;
+  }
+
+  /**
+   * Given an array of objects composed by a parent, clone them, then
+   * add them to the parent.
+   * @private
+   * @returns {*}
+   */
+  async duplicateComposees(clonedParent, composees = []) {
+    let idMappings = [];
+    let allComposeesDuplicated = composees.reduce(async (previousPromise, nextComposee) => {
+      await previousPromise;
+
+      let clonedComposee = await this.duplicateObject(nextComposee);
+
+      if (clonedComposee) {
+        idMappings.push({
+          newId: clonedComposee.identifier,
+          oldId: nextComposee.identifier
         });
-
-        let clonesDone = Promise.all(this.clones.map((clone) => {
-            let percentPersisted = Math.ceil(100 * (++this.persisted / initialCount));
-            let message = `Duplicating ${initialCount - this.persisted} objects.`;
-
-            dialog.updateProgress(percentPersisted, message);
-
-            return this.openmct.objects.save(clone);
-        }));
-
-        await clonesDone;
-
-        dialog.dismiss();
-        this.openmct.notifications.info(`Duplicated ${this.persisted} objects.`);
-
-        return;
-    }
-
-    /**
-     * Will add a list of clones to the specified parent's composition
-     */
-    async addClonesToParent() {
-        let parentComposition = this.openmct.composition.get(this.parent);
-        await parentComposition.load();
-        parentComposition.add(this.firstClone);
-
-        return;
-    }
-
-    /**
-     * A recursive function that will perform a bottom-up duplicate of
-     * the object tree with originalObject at the root. Recurses to
-     * the farthest leaf, then works its way back up again,
-     * cloning objects, and composing them with their child clones
-     * as it goes
-     * @private
-     * @returns {DomainObject} If the type of the original object allows for
-     * duplication, then a duplicate of the object, otherwise the object
-     * itself (to allow linking to non duplicatable objects).
-     */
-    async duplicateObject(originalObject) {
-        // Check if the creatable (or other passed in filter).
-        if (this.filter(originalObject)) {
-            let clone = this.cloneObjectModel(originalObject);
-            let composeesCollection = this.openmct.composition.get(originalObject);
-            let composees;
-
-            if (composeesCollection) {
-                composees = await composeesCollection.load();
-            }
-
-            return this.duplicateComposees(clone, composees);
+        this.composeChild(clonedComposee, clonedParent, clonedComposee !== nextComposee);
+      }
+
+      return;
+    }, Promise.resolve());
+
+    await allComposeesDuplicated;
+
+    clonedParent = this.rewriteIdentifiers(clonedParent, idMappings);
+    this.clones.push(clonedParent);
+
+    return clonedParent;
+  }
+
+  /**
+   * Update identifiers in a cloned object model (or part of
+   * a cloned object model) to reflect new identifiers after
+   * duplicating.
+   * @private
+   */
+  rewriteIdentifiers(clonedParent, childIdMappings) {
+    for (let { newId, oldId } of childIdMappings) {
+      let newIdKeyString = this.openmct.objects.makeKeyString(newId);
+      let oldIdKeyString = this.openmct.objects.makeKeyString(oldId);
+
+      // regex replace keystrings
+      clonedParent = JSON.stringify(clonedParent).replace(
+        new RegExp(oldIdKeyString, 'g'),
+        newIdKeyString
+      );
+
+      // parse reviver to replace identifiers
+      clonedParent = JSON.parse(clonedParent, (key, value) => {
+        if (
+          value !== null &&
+          value !== undefined &&
+          Object.prototype.hasOwnProperty.call(value, 'key') &&
+          Object.prototype.hasOwnProperty.call(value, 'namespace') &&
+          value.key === oldId.key &&
+          value.namespace === oldId.namespace
+        ) {
+          return newId;
+        } else {
+          return value;
         }
-
-        // Not creatable, creating a link, no need to iterate children
-        return originalObject;
+      });
     }
 
-    /**
-     * Given an array of objects composed by a parent, clone them, then
-     * add them to the parent.
-     * @private
-     * @returns {*}
-     */
-    async duplicateComposees(clonedParent, composees = []) {
-        let idMappings = [];
-        let allComposeesDuplicated = composees.reduce(async (previousPromise, nextComposee) => {
-            await previousPromise;
-
-            let clonedComposee = await this.duplicateObject(nextComposee);
+    return clonedParent;
+  }
 
-            if (clonedComposee) {
-                idMappings.push({
-                    newId: clonedComposee.identifier,
-                    oldId: nextComposee.identifier
-                });
-                this.composeChild(clonedComposee, clonedParent, clonedComposee !== nextComposee);
-            }
+  composeChild(child, parent, setLocation) {
+    parent.composition.push(child.identifier);
 
-            return;
-        }, Promise.resolve());
-
-        await allComposeesDuplicated;
-
-        clonedParent = this.rewriteIdentifiers(clonedParent, idMappings);
-        this.clones.push(clonedParent);
-
-        return clonedParent;
+    //If a location is not specified, set it.
+    if (setLocation && child.location === undefined) {
+      let parentKeyString = this.getKeyString(parent);
+      child.location = parentKeyString;
     }
-
-    /**
-     * Update identifiers in a cloned object model (or part of
-     * a cloned object model) to reflect new identifiers after
-     * duplicating.
-     * @private
-     */
-    rewriteIdentifiers(clonedParent, childIdMappings) {
-        for (let { newId, oldId } of childIdMappings) {
-            let newIdKeyString = this.openmct.objects.makeKeyString(newId);
-            let oldIdKeyString = this.openmct.objects.makeKeyString(oldId);
-
-            // regex replace keystrings
-            clonedParent = JSON.stringify(clonedParent).replace(new RegExp(oldIdKeyString, 'g'), newIdKeyString);
-
-            // parse reviver to replace identifiers
-            clonedParent = JSON.parse(clonedParent, (key, value) => {
-                if (Object.prototype.hasOwnProperty.call(value, 'key')
-                    && Object.prototype.hasOwnProperty.call(value, 'namespace')
-                    && value.key === oldId.key
-                    && value.namespace === oldId.namespace) {
-                    return newId;
-                } else {
-                    return value;
-                }
-            });
-        }
-
-        return clonedParent;
-    }
-
-    composeChild(child, parent, setLocation) {
-        parent.composition.push(child.identifier);
-
-        //If a location is not specified, set it.
-        if (setLocation && child.location === undefined) {
-            let parentKeyString = this.getKeyString(parent);
-            child.location = parentKeyString;
-        }
+  }
+
+  getTypeDefinition(domainObject, definition) {
+    let typeDefinitions = this.openmct.types.get(domainObject.type).definition;
+
+    return typeDefinitions[definition] || false;
+  }
+
+  cloneObjectModel(domainObject) {
+    let clone = JSON.parse(JSON.stringify(domainObject));
+    let identifier = {
+      key: uuid(),
+      namespace: this.namespace // set to NEW parent's namespace
+    };
+
+    if (clone.modified || clone.persisted || clone.location) {
+      clone.modified = undefined;
+      clone.persisted = undefined;
+      clone.location = undefined;
+      delete clone.modified;
+      delete clone.persisted;
+      delete clone.location;
     }
 
-    getTypeDefinition(domainObject, definition) {
-        let typeDefinitions = this.openmct.types.get(domainObject.type).definition;
-
-        return typeDefinitions[definition] || false;
+    if (clone.composition) {
+      clone.composition = [];
     }
 
-    cloneObjectModel(domainObject) {
-        let clone = JSON.parse(JSON.stringify(domainObject));
-        let identifier = {
-            key: uuid(),
-            namespace: this.namespace // set to NEW parent's namespace
-        };
-
-        if (clone.modified || clone.persisted || clone.location) {
-            clone.modified = undefined;
-            clone.persisted = undefined;
-            clone.location = undefined;
-            delete clone.modified;
-            delete clone.persisted;
-            delete clone.location;
-        }
+    clone.identifier = identifier;
 
-        if (clone.composition) {
-            clone.composition = [];
-        }
+    return clone;
+  }
 
-        clone.identifier = identifier;
+  getKeyString(domainObject) {
+    return this.openmct.objects.makeKeyString(domainObject.identifier);
+  }
 
-        return clone;
-    }
-
-    getKeyString(domainObject) {
-        return this.openmct.objects.makeKeyString(domainObject.identifier);
-    }
-
-    isCreatable(domainObject) {
-        return this.getTypeDefinition(domainObject, 'creatable');
-    }
+  isCreatable(domainObject) {
+    return this.getTypeDefinition(domainObject, 'creatable');
+  }
 }
diff --git a/src/plugins/duplicate/plugin.js b/src/plugins/duplicate/plugin.js
index 0f07cc579ac..38b56920c12 100644
--- a/src/plugins/duplicate/plugin.js
+++ b/src/plugins/duplicate/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2019, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,10 +19,10 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import DuplicateAction from "./DuplicateAction";
+import DuplicateAction from './DuplicateAction.js';
 
 export default function () {
-    return function (openmct) {
-        openmct.actions.register(new DuplicateAction(openmct));
-    };
+  return function (openmct) {
+    openmct.actions.register(new DuplicateAction(openmct));
+  };
 }
diff --git a/src/plugins/duplicate/pluginSpec.js b/src/plugins/duplicate/pluginSpec.js
index cb61144977d..ad649dd8ccd 100644
--- a/src/plugins/duplicate/pluginSpec.js
+++ b/src/plugins/duplicate/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,140 +19,137 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import DuplicateActionPlugin from './plugin.js';
-import DuplicateAction from './DuplicateAction.js';
-import DuplicateTask from './DuplicateTask.js';
-import {
-    createOpenMct,
-    resetApplicationState,
-    getMockObjects
-} from 'utils/testing';
-
-describe("The Duplicate Action plugin", () => {
-
-    let openmct;
-    let duplicateTask;
-    let childObject;
-    let parentObject;
-    let anotherParentObject;
-
-    // this setups up the app
-    beforeEach((done) => {
-        openmct = createOpenMct();
-
-        childObject = getMockObjects({
-            objectKeyStrings: ['folder'],
-            overwrite: {
-                folder: {
-                    name: "Child Folder",
-                    identifier: {
-                        namespace: "",
-                        key: "child-folder-object"
-                    }
-                }
-            }
-        }).folder;
-        parentObject = getMockObjects({
-            objectKeyStrings: ['folder'],
-            overwrite: {
-                folder: {
-                    name: "Parent Folder",
-                    type: "folder",
-                    composition: [childObject.identifier]
-                }
-            }
-        }).folder;
-        anotherParentObject = getMockObjects({
-            objectKeyStrings: ['folder'],
-            overwrite: {
-                folder: {
-                    name: "Another Parent Folder"
-                }
-            }
-        }).folder;
-
-        let objectGet = openmct.objects.get.bind(openmct.objects);
-        spyOn(openmct.objects, 'get').and.callFake((identifier) => {
-            let obj = [childObject, parentObject, anotherParentObject].find((ob) => ob.identifier.key === identifier.key);
+import { createOpenMct, getMockObjects, resetApplicationState } from 'utils/testing';
 
-            if (!obj) {
-                // not one of the mocked objs, callthrough basically
-                return objectGet(identifier);
-            }
+import DuplicateTask from './DuplicateTask.js';
+import DuplicateActionPlugin from './plugin.js';
 
-            return Promise.resolve(obj);
-        });
-
-        spyOn(openmct.composition, 'get').and.callFake((domainObject) => {
-            return {
-                load: async () => {
-                    let obj = [childObject, parentObject, anotherParentObject].find((ob) => ob.identifier.key === domainObject.identifier.key);
-                    let children = [];
-
-                    if (obj) {
-                        for (let i = 0; i < obj.composition.length; i++) {
-                            children.push(await openmct.objects.get(obj.composition[i]));
-                        }
-                    }
-
-                    return Promise.resolve(children);
-                },
-                add: (child) => {
-                    domainObject.composition.push(child.identifier);
-                }
-            };
-        });
-
-        // already installed by default, but never hurts, just adds to context menu
-        openmct.install(DuplicateActionPlugin());
-        openmct.types.addType('folder', {creatable: true});
-
-        openmct.on('start', done);
-        openmct.startHeadless();
+describe('The Duplicate Action plugin', () => {
+  let openmct;
+  let duplicateTask;
+  let childObject;
+  let parentObject;
+  let anotherParentObject;
+
+  // this setups up the app
+  beforeEach((done) => {
+    openmct = createOpenMct();
+
+    childObject = getMockObjects({
+      objectKeyStrings: ['folder'],
+      overwrite: {
+        folder: {
+          name: 'Child Folder',
+          identifier: {
+            namespace: '',
+            key: 'child-folder-object'
+          }
+        }
+      }
+    }).folder;
+
+    parentObject = getMockObjects({
+      objectKeyStrings: ['folder'],
+      overwrite: {
+        folder: {
+          name: 'Parent Folder',
+          type: 'folder',
+          composition: [childObject.identifier]
+        }
+      }
+    }).folder;
+
+    anotherParentObject = getMockObjects({
+      objectKeyStrings: ['folder'],
+      overwrite: {
+        folder: {
+          name: 'Another Parent Folder'
+        }
+      }
+    }).folder;
+
+    let objectGet = openmct.objects.get.bind(openmct.objects);
+    spyOn(openmct.objects, 'get').and.callFake((identifier) => {
+      let obj = [childObject, parentObject, anotherParentObject].find(
+        (ob) => ob.identifier.key === identifier.key
+      );
+
+      if (!obj) {
+        // not one of the mocked objs, callthrough basically
+        return objectGet(identifier);
+      }
+
+      return Promise.resolve(obj);
     });
 
-    afterEach(() => {
-        return resetApplicationState(openmct);
+    spyOn(openmct.composition, 'get').and.callFake((domainObject) => {
+      return {
+        load: async () => {
+          let obj = [childObject, parentObject, anotherParentObject].find(
+            (ob) => ob.identifier.key === domainObject.identifier.key
+          );
+          let children = [];
+
+          if (obj) {
+            for (let i = 0; i < obj.composition.length; i++) {
+              children.push(await openmct.objects.get(obj.composition[i]));
+            }
+          }
+
+          return Promise.resolve(children);
+        },
+        add: (child) => {
+          domainObject.composition.push(child.identifier);
+        }
+      };
     });
 
-    it("should be defined", () => {
-        expect(DuplicateActionPlugin).toBeDefined();
-    });
+    // already installed by default, but never hurts, just adds to context menu
+    openmct.install(DuplicateActionPlugin());
+    openmct.types.addType('folder', { creatable: true });
 
-    describe("when moving an object to a new parent", () => {
+    openmct.on('start', done);
+    openmct.startHeadless();
+  });
 
-        beforeEach(async () => {
-            duplicateTask = new DuplicateTask(openmct);
-            await duplicateTask.duplicate(parentObject, anotherParentObject);
-        });
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
 
-        it("the duplicate child object's name (when not changing) should be the same as the original object", async () => {
-            let duplicatedObjectIdentifier = anotherParentObject.composition[0];
-            let duplicatedObject = await openmct.objects.get(duplicatedObjectIdentifier);
-            let duplicateObjectName = duplicatedObject.name;
+  it('should be defined', () => {
+    expect(DuplicateActionPlugin).toBeDefined();
+  });
 
-            expect(duplicateObjectName).toEqual(parentObject.name);
-        });
+  describe('when moving an object to a new parent', () => {
+    beforeEach(async () => {
+      duplicateTask = new DuplicateTask(openmct);
+      await duplicateTask.duplicate(parentObject, anotherParentObject);
+    });
 
-        it("the duplicate child object's identifier should be new", () => {
-            let duplicatedObjectIdentifier = anotherParentObject.composition[0];
+    it("the duplicate child object's name (when not changing) should be the same as the original object", async () => {
+      let duplicatedObjectIdentifier = anotherParentObject.composition[0];
+      let duplicatedObject = await openmct.objects.get(duplicatedObjectIdentifier);
+      let duplicateObjectName = duplicatedObject.name;
 
-            expect(duplicatedObjectIdentifier.key).not.toEqual(parentObject.identifier.key);
-        });
+      expect(duplicateObjectName).toEqual(parentObject.name);
     });
 
-    describe("when a new name is provided for the duplicated object", () => {
-        it("the name is updated", () => {
-            const NEW_NAME = 'New Name';
-            let childName;
+    it("the duplicate child object's identifier should be new", () => {
+      let duplicatedObjectIdentifier = anotherParentObject.composition[0];
 
-            duplicateTask = new DuplicateAction(openmct);
-            duplicateTask.updateNameCheck(parentObject, NEW_NAME);
+      expect(duplicatedObjectIdentifier.key).not.toEqual(parentObject.identifier.key);
+    });
+  });
 
-            childName = parentObject.name;
+  describe('when a new name is provided for the duplicated object', () => {
+    it('the name is updated', async () => {
+      const NEW_NAME = 'New Name';
 
-            expect(childName).toEqual(NEW_NAME);
-        });
-    });
+      duplicateTask = new DuplicateTask(openmct);
+      duplicateTask.changeName(NEW_NAME);
+      const child = await duplicateTask.duplicate(childObject, anotherParentObject);
 
+      expect(child.name).toEqual(NEW_NAME);
+    });
+  });
 });
diff --git a/src/plugins/exportAsJSONAction/ExportAsJSONAction.js b/src/plugins/exportAsJSONAction/ExportAsJSONAction.js
new file mode 100644
index 00000000000..7935259e189
--- /dev/null
+++ b/src/plugins/exportAsJSONAction/ExportAsJSONAction.js
@@ -0,0 +1,412 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import { v4 as uuid } from 'uuid';
+
+import JSONExporter from '/src/exporters/JSONExporter.js';
+
+export default class ExportAsJSONAction {
+  #openmct;
+
+  /**
+   * @param {import('../../../openmct').OpenMCT} openmct The Open MCT API
+   */
+  constructor(openmct) {
+    this.#openmct = openmct;
+
+    // Bind public methods
+    this.invoke = this.invoke.bind(this);
+    this.appliesTo = this.appliesTo.bind(this);
+    // FIXME: This should be private but is used in tests
+    this.saveAs = this.saveAs.bind(this);
+
+    this.name = 'Export as JSON';
+    this.key = 'export.JSON';
+    this.description = '';
+    this.cssClass = 'icon-export';
+    this.group = 'export';
+    this.priority = 1;
+
+    this.tree = null;
+    this.calls = null;
+    this.idMap = null;
+    this.dialog = null;
+    this.progressPerc = 0;
+    this.exportedCount = 0;
+    this.totalToExport = 0;
+
+    this.JSONExportService = new JSONExporter();
+  }
+
+  // Public
+  /**
+   *
+   * @param {object} objectPath
+   * @returns {boolean}
+   */
+  appliesTo(objectPath) {
+    let domainObject = objectPath[0];
+
+    return this.#isCreatableAndPersistable(domainObject);
+  }
+  /**
+   *
+   * @param {import('../../api/objects/ObjectAPI').DomainObject[]} objectPath
+   */
+  invoke(objectPath) {
+    this.tree = {};
+    this.calls = 0;
+    this.idMap = {};
+
+    const root = objectPath[0];
+    this.root = this.#copy(root);
+
+    const rootId = this.#getKeystring(this.root);
+    this.tree[rootId] = this.root;
+
+    this.dialog = this.#openmct.overlays.progressDialog({
+      message:
+        'Do not navigate away from this page or close this browser tab while this message is displayed.',
+      iconClass: 'info',
+      title: 'Exporting'
+    });
+    this.dialog.show();
+    this.#write(this.root)
+      .then(() => {
+        this.exportedCount++;
+        this.#updateProgress();
+      })
+      .catch((error) => {
+        this.dialog.dismiss();
+        this.dialog = null;
+        this.#resetCounts();
+        this.#openmct.notifications.error({
+          title: 'Export as JSON failed',
+          message: error.message
+        });
+      });
+  }
+
+  /**
+   * @private
+   * @param {import('../../api/objects/ObjectAPI').DomainObject} parent
+   */
+  async #write(parent) {
+    this.totalToExport++;
+    this.calls++;
+
+    //conditional object styles are not saved on the composition, so we need to check for them
+    const conditionSetIdentifier = this.#getConditionSetIdentifier(parent);
+    const hasItemConditionSetIdentifiers = this.#hasItemConditionSetIdentifiers(parent);
+    const composition = this.#openmct.composition.get(parent);
+
+    if (composition) {
+      const children = await composition.load();
+      const exportPromises = children.map((child) => this.#exportObject(child, parent));
+
+      await Promise.all(exportPromises);
+    }
+
+    if (!conditionSetIdentifier && !hasItemConditionSetIdentifiers) {
+      this.#decrementCallsAndSave();
+    } else {
+      let conditionSetObjects = [];
+
+      // conditionSetIdentifiers directly in objectStyles object
+      if (conditionSetIdentifier) {
+        const conditionSetObject = this.#openmct.objects.get(conditionSetIdentifier);
+        conditionSetObjects.push(conditionSetObject);
+      }
+
+      // conditionSetIdentifiers stored on item ids in the objectStyles object
+      if (hasItemConditionSetIdentifiers) {
+        const itemConditionSetIdentifiers = this.#getItemConditionSetIdentifiers(parent);
+        const itemConditionSetObjects = itemConditionSetIdentifiers.map((id) =>
+          this.#openmct.objects.get(id)
+        );
+        conditionSetObjects = conditionSetObjects.concat(itemConditionSetObjects);
+
+        for (const itemConditionSetIdentifier of itemConditionSetIdentifiers) {
+          conditionSetObjects.push(this.#openmct.objects.get(itemConditionSetIdentifier));
+        }
+      }
+
+      if (conditionSetObjects.length > 0) {
+        const resolvedConditionSetObjects = await Promise.all(conditionSetObjects);
+        const exportConditionSetPromises = resolvedConditionSetObjects.map((obj) =>
+          this.#exportObject(obj, parent)
+        );
+        await Promise.all(exportConditionSetPromises);
+      }
+
+      this.#decrementCallsAndSave();
+    }
+  }
+
+  #updateProgress() {
+    this.progressPerc = Math.ceil((100 * this.exportedCount) / this.totalToExport);
+    this.dialog?.updateProgress(
+      this.progressPerc,
+      `Exporting ${this.exportedCount} / ${this.totalToExport} objects.`
+    );
+  }
+
+  #exportObject(child, parent) {
+    const originalKeyString = this.#getKeystring(child);
+    const createable = this.#isCreatableAndPersistable(child);
+    const isNotInfinite = !Object.prototype.hasOwnProperty.call(this.tree, originalKeyString);
+
+    if (createable && isNotInfinite) {
+      // for external or linked objects we generate new keys, if they don't exist already
+      if (this.#isLinkedObject(child, parent)) {
+        child = this.#rewriteLink(child, parent);
+      } else {
+        this.tree[originalKeyString] = child;
+      }
+
+      this.#write(child).then(() => {
+        this.exportedCount++;
+        this.#updateProgress();
+      });
+    }
+  }
+
+  /**
+   * @private
+   * @param {object} child
+   * @param {object} parent
+   * @returns {object}
+   */
+  #rewriteLink(child, parent) {
+    const originalKeyString = this.#getKeystring(child);
+    const parentKeyString = this.#getKeystring(parent);
+    const conditionSetIdentifier = this.#getConditionSetIdentifier(parent);
+    const hasItemConditionSetIdentifiers = this.#hasItemConditionSetIdentifiers(parent);
+    const existingMappedKeyString = this.idMap[originalKeyString];
+    let copy;
+
+    if (!existingMappedKeyString) {
+      copy = this.#copy(child);
+      copy.identifier.key = uuid();
+
+      if (!conditionSetIdentifier && !hasItemConditionSetIdentifiers) {
+        copy.location = parentKeyString;
+      }
+
+      let newKeyString = this.#getKeystring(copy);
+      this.idMap[originalKeyString] = newKeyString;
+      this.tree[newKeyString] = copy;
+    } else {
+      copy = this.tree[existingMappedKeyString];
+    }
+
+    if (conditionSetIdentifier || hasItemConditionSetIdentifiers) {
+      // update objectStyle object
+      if (conditionSetIdentifier) {
+        const directObjectStylesIdentifier = this.#openmct.objects.areIdsEqual(
+          parent.configuration.objectStyles.conditionSetIdentifier,
+          child.identifier
+        );
+
+        if (directObjectStylesIdentifier) {
+          parent.configuration.objectStyles.conditionSetIdentifier = copy.identifier;
+          this.tree[parentKeyString].configuration.objectStyles.conditionSetIdentifier =
+            copy.identifier;
+        }
+      }
+
+      // update per item id on objectStyle object
+      if (hasItemConditionSetIdentifiers) {
+        for (const itemId in parent.configuration.objectStyles) {
+          if (parent.configuration.objectStyles[itemId]) {
+            const itemConditionSetIdentifier =
+              parent.configuration.objectStyles[itemId].conditionSetIdentifier;
+
+            if (
+              itemConditionSetIdentifier &&
+              this.#openmct.objects.areIdsEqual(itemConditionSetIdentifier, child.identifier)
+            ) {
+              parent.configuration.objectStyles[itemId].conditionSetIdentifier = copy.identifier;
+              this.tree[parentKeyString].configuration.objectStyles[itemId].conditionSetIdentifier =
+                copy.identifier;
+            }
+          }
+        }
+      }
+    } else {
+      // just update parent
+      const index = parent.composition.findIndex((identifier) => {
+        return this.#openmct.objects.areIdsEqual(child.identifier, identifier);
+      });
+
+      parent.composition[index] = copy.identifier;
+      this.tree[parentKeyString].composition[index] = copy.identifier;
+    }
+
+    return copy;
+  }
+
+  /**
+   * @private
+   * @param {object} domainObject
+   * @returns {string} A string representation of the given identifier, including namespace and key
+   */
+  #getKeystring(domainObject) {
+    return this.#openmct.objects.makeKeyString(domainObject.identifier);
+  }
+
+  /**
+   * @private
+   * @param {object} domainObject
+   * @returns {boolean}
+   */
+  #isCreatableAndPersistable(domainObject) {
+    const type = this.#openmct.types.get(domainObject.type);
+    const isPersistable = this.#openmct.objects.isPersistable(domainObject.identifier);
+
+    return type && type.definition.creatable && isPersistable;
+  }
+
+  /**
+   * @private
+   * @param {object} child
+   * @param {object} parent
+   * @returns {boolean}
+   */
+  #isLinkedObject(child, parent) {
+    const rootKeyString = this.#getKeystring(this.root);
+    const childKeyString = this.#getKeystring(child);
+    const parentKeyString = this.#getKeystring(parent);
+
+    return (
+      (child.location !== parentKeyString &&
+        !Object.keys(this.tree).includes(child.location) &&
+        childKeyString !== rootKeyString) ||
+      this.idMap[childKeyString] !== undefined
+    );
+  }
+
+  #getConditionSetIdentifier(object) {
+    return object.configuration?.objectStyles?.conditionSetIdentifier;
+  }
+
+  #hasItemConditionSetIdentifiers(parent) {
+    const objectStyles = parent.configuration?.objectStyles;
+
+    for (const itemId in objectStyles) {
+      if (Object.prototype.hasOwnProperty.call(objectStyles[itemId], 'conditionSetIdentifier')) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  #getItemConditionSetIdentifiers(parent) {
+    const objectStyles = parent.configuration?.objectStyles;
+    let identifiers = new Set();
+
+    if (objectStyles) {
+      Object.keys(objectStyles).forEach((itemId) => {
+        if (objectStyles[itemId].conditionSetIdentifier) {
+          identifiers.add(objectStyles[itemId].conditionSetIdentifier);
+        }
+      });
+    }
+
+    return Array.from(identifiers);
+  }
+
+  #resetCounts() {
+    this.totalToExport = 0;
+    this.exportedCount = 0;
+  }
+
+  /**
+   * @private
+   */
+  #rewriteReferences() {
+    const oldKeyStrings = Object.keys(this.idMap);
+    let treeString = JSON.stringify(this.tree);
+
+    oldKeyStrings.forEach((oldKeyString) => {
+      // this will cover keyStrings, identifiers and identifiers created
+      // by hand that may be structured differently from those created with 'makeKeyString'
+      const newKeyString = this.idMap[oldKeyString];
+      const newIdentifier = JSON.stringify(this.#openmct.objects.parseKeyString(newKeyString));
+      const oldIdentifier = this.#openmct.objects.parseKeyString(oldKeyString);
+      const oldIdentifierNamespaceFirst = JSON.stringify(oldIdentifier);
+      const oldIdentifierKeyFirst = JSON.stringify({
+        key: oldIdentifier.key,
+        namespace: oldIdentifier.namespace
+      });
+
+      // replace keyStrings
+      treeString = treeString.split(oldKeyString).join(newKeyString);
+
+      // check for namespace first identifiers, replace if necessary
+      if (treeString.includes(oldIdentifierNamespaceFirst)) {
+        treeString = treeString.split(oldIdentifierNamespaceFirst).join(newIdentifier);
+      }
+
+      // check for key first identifiers, replace if necessary
+      if (treeString.includes(oldIdentifierKeyFirst)) {
+        treeString = treeString.split(oldIdentifierKeyFirst).join(newIdentifier);
+      }
+    });
+    this.tree = JSON.parse(treeString);
+  }
+  /**
+   * @private
+   * @param {object} completedTree
+   */
+  saveAs(completedTree) {
+    this.JSONExportService.export(completedTree, { filename: this.root.name + '.json' });
+  }
+  /**
+   * @private
+   * @returns {object}
+   */
+  #wrapTree() {
+    return {
+      openmct: this.tree,
+      rootId: this.#getKeystring(this.root)
+    };
+  }
+
+  #decrementCallsAndSave() {
+    this.calls--;
+    this.#updateProgress();
+    if (this.calls === 0) {
+      this.#rewriteReferences();
+      this.dialog.dismiss();
+
+      this.#resetCounts();
+      this.saveAs(this.#wrapTree());
+
+      this.dialog = null;
+    }
+  }
+
+  #copy(object) {
+    return JSON.parse(JSON.stringify(object));
+  }
+}
diff --git a/src/plugins/exportAsJSONAction/ExportAsJSONActionSpec.js b/src/plugins/exportAsJSONAction/ExportAsJSONActionSpec.js
new file mode 100644
index 00000000000..6b12619fced
--- /dev/null
+++ b/src/plugins/exportAsJSONAction/ExportAsJSONActionSpec.js
@@ -0,0 +1,389 @@
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+
+describe('Export as JSON plugin', () => {
+  const ACTION_KEY = 'export.JSON';
+
+  let openmct;
+  let domainObject;
+  let exportAsJSONAction;
+
+  beforeEach((done) => {
+    openmct = createOpenMct();
+
+    openmct.on('start', done);
+    openmct.startHeadless();
+
+    exportAsJSONAction = openmct.actions.getAction(ACTION_KEY);
+  });
+
+  afterEach(() => resetApplicationState(openmct));
+
+  it('Export as JSON action exist', () => {
+    expect(exportAsJSONAction.key).toEqual(ACTION_KEY);
+  });
+
+  it('ExportAsJSONAction applies to folder', () => {
+    domainObject = {
+      identifier: {
+        key: 'export-testing',
+        namespace: ''
+      },
+      composition: [],
+      location: 'mine',
+      modified: 1640115501237,
+      name: 'Unnamed Folder',
+      persisted: 1640115501237,
+      type: 'folder'
+    };
+
+    expect(exportAsJSONAction.appliesTo([domainObject])).toEqual(true);
+  });
+
+  it('ExportAsJSONAction applies to telemetry.plot.overlay', () => {
+    domainObject = {
+      identifier: {
+        key: 'export-testing',
+        namespace: ''
+      },
+      composition: [],
+      location: 'mine',
+      modified: 1640115501237,
+      name: 'Unnamed Plot',
+      persisted: 1640115501237,
+      type: 'telemetry.plot.overlay'
+    };
+
+    expect(exportAsJSONAction.appliesTo([domainObject])).toEqual(true);
+  });
+
+  it('ExportAsJSONAction applies to telemetry.plot.stacked', () => {
+    domainObject = {
+      identifier: {
+        key: 'export-testing',
+        namespace: ''
+      },
+      composition: [],
+      location: 'mine',
+      modified: 1640115501237,
+      name: 'Unnamed Plot',
+      persisted: 1640115501237,
+      type: 'telemetry.plot.stacked'
+    };
+
+    expect(exportAsJSONAction.appliesTo([domainObject])).toEqual(true);
+  });
+
+  it('ExportAsJSONAction does not apply to non-persistable objects', () => {
+    domainObject = {
+      identifier: {
+        key: 'export-testing',
+        namespace: ''
+      },
+      composition: [],
+      location: 'mine',
+      modified: 1640115501237,
+      name: 'Non Editable Folder',
+      persisted: 1640115501237,
+      type: 'folder'
+    };
+
+    spyOn(openmct.objects, 'getProvider').and.callFake(() => {
+      return { get: () => domainObject };
+    });
+
+    expect(exportAsJSONAction.appliesTo([domainObject])).toEqual(false);
+  });
+
+  it('ExportAsJSONAction exports object from tree', (done) => {
+    const parent = {
+      composition: [
+        {
+          key: 'child',
+          namespace: ''
+        }
+      ],
+      identifier: {
+        key: 'parent',
+        namespace: ''
+      },
+      name: 'Parent',
+      type: 'folder',
+      modified: 1503598129176,
+      location: 'mine',
+      persisted: 1503598129176
+    };
+
+    const child = {
+      composition: [],
+      identifier: {
+        key: 'child',
+        namespace: ''
+      },
+      name: 'Child',
+      type: 'folder',
+      modified: 1503598132428,
+      location: 'parent',
+      persisted: 1503598132428
+    };
+
+    spyOn(openmct.composition, 'get').and.callFake((object) => {
+      return {
+        load: () => {
+          if (object.name === 'Parent') {
+            return Promise.resolve([child]);
+          }
+
+          return Promise.resolve([]);
+        }
+      };
+    });
+
+    spyOn(exportAsJSONAction, 'saveAs').and.callFake((completedTree) => {
+      expect(Object.keys(completedTree).length).toBe(2);
+      expect(Object.prototype.hasOwnProperty.call(completedTree, 'openmct')).toBeTruthy();
+      expect(Object.prototype.hasOwnProperty.call(completedTree, 'rootId')).toBeTruthy();
+      expect(Object.prototype.hasOwnProperty.call(completedTree.openmct, 'parent')).toBeTruthy();
+      expect(Object.prototype.hasOwnProperty.call(completedTree.openmct, 'child')).toBeTruthy();
+
+      done();
+    });
+
+    exportAsJSONAction.invoke([parent]);
+  });
+
+  it('ExportAsJSONAction skips non-creatable objects from tree', (done) => {
+    const parent = {
+      composition: [
+        {
+          key: 'child',
+          namespace: ''
+        }
+      ],
+      identifier: {
+        key: 'parent',
+        namespace: ''
+      },
+      name: 'Parent of Non Editable Child Folder',
+      type: 'folder',
+      modified: 1503598129176,
+      location: 'mine',
+      persisted: 1503598129176
+    };
+
+    const child = {
+      composition: [],
+      identifier: {
+        key: 'child',
+        namespace: ''
+      },
+      name: 'Non Editable Child Folder',
+      type: 'noneditable.folder',
+      modified: 1503598132428,
+      location: 'parent',
+      persisted: 1503598132428
+    };
+
+    spyOn(openmct.composition, 'get').and.callFake((object) => {
+      return {
+        load: () => {
+          if (object.identifier.key === 'parent') {
+            return Promise.resolve([child]);
+          }
+
+          return Promise.resolve([]);
+        }
+      };
+    });
+
+    spyOn(exportAsJSONAction, 'saveAs').and.callFake((completedTree) => {
+      expect(Object.keys(completedTree).length).toBe(2);
+      expect(Object.prototype.hasOwnProperty.call(completedTree, 'openmct')).toBeTruthy();
+      expect(Object.prototype.hasOwnProperty.call(completedTree, 'rootId')).toBeTruthy();
+      expect(Object.prototype.hasOwnProperty.call(completedTree.openmct, 'parent')).toBeTruthy();
+      expect(Object.prototype.hasOwnProperty.call(completedTree.openmct, 'child')).not.toBeTruthy();
+
+      done();
+    });
+
+    exportAsJSONAction.invoke([parent]);
+  });
+
+  it('can export self-containing objects', (done) => {
+    const parent = {
+      composition: [
+        {
+          key: 'infiniteChild',
+          namespace: ''
+        }
+      ],
+      identifier: {
+        key: 'infiniteParent',
+        namespace: ''
+      },
+      name: 'parent',
+      type: 'folder',
+      modified: 1503598129176,
+      location: 'mine',
+      persisted: 1503598129176
+    };
+
+    const child = {
+      composition: [
+        {
+          key: 'infiniteParent',
+          namespace: ''
+        }
+      ],
+      identifier: {
+        key: 'infiniteChild',
+        namespace: ''
+      },
+      name: 'child',
+      type: 'folder',
+      modified: 1503598132428,
+      location: 'infiniteParent',
+      persisted: 1503598132428
+    };
+
+    spyOn(openmct.composition, 'get').and.callFake((object) => {
+      return {
+        load: () => {
+          if (object.name === 'parent') {
+            return Promise.resolve([child]);
+          }
+
+          return Promise.resolve([]);
+        }
+      };
+    });
+
+    spyOn(exportAsJSONAction, 'saveAs').and.callFake((completedTree) => {
+      expect(Object.keys(completedTree).length).toBe(2);
+      expect(Object.prototype.hasOwnProperty.call(completedTree, 'openmct')).toBeTruthy();
+      expect(Object.prototype.hasOwnProperty.call(completedTree, 'rootId')).toBeTruthy();
+      expect(
+        Object.prototype.hasOwnProperty.call(completedTree.openmct, 'infiniteParent')
+      ).toBeTruthy();
+      expect(
+        Object.prototype.hasOwnProperty.call(completedTree.openmct, 'infiniteChild')
+      ).toBeTruthy();
+
+      done();
+    });
+
+    exportAsJSONAction.invoke([parent]);
+  });
+
+  it('exports links to external objects as new objects', function (done) {
+    const parent = {
+      composition: [
+        {
+          key: 'child',
+          namespace: ''
+        }
+      ],
+      identifier: {
+        key: 'parent',
+        namespace: ''
+      },
+      name: 'Parent',
+      type: 'folder',
+      modified: 1503598129176,
+      location: 'mine',
+      persisted: 1503598129176
+    };
+
+    const child = {
+      composition: [],
+      identifier: {
+        key: 'child',
+        namespace: ''
+      },
+      name: 'Child',
+      type: 'folder',
+      modified: 1503598132428,
+      location: 'outsideOfTree',
+      persisted: 1503598132428
+    };
+
+    spyOn(openmct.composition, 'get').and.callFake((object) => {
+      return {
+        load: () => {
+          if (object.name === 'Parent') {
+            return Promise.resolve([child]);
+          }
+
+          return Promise.resolve([]);
+        }
+      };
+    });
+
+    spyOn(exportAsJSONAction, 'saveAs').and.callFake((completedTree) => {
+      expect(Object.keys(completedTree).length).toBe(2);
+      expect(Object.prototype.hasOwnProperty.call(completedTree, 'openmct')).toBeTruthy();
+      expect(Object.prototype.hasOwnProperty.call(completedTree, 'rootId')).toBeTruthy();
+      expect(Object.prototype.hasOwnProperty.call(completedTree.openmct, 'parent')).toBeTruthy();
+
+      // parent and child objects as part of openmct but child with new id/key
+      expect(Object.prototype.hasOwnProperty.call(completedTree.openmct, 'child')).not.toBeTruthy();
+      expect(Object.keys(completedTree.openmct).length).toBe(2);
+
+      done();
+    });
+
+    exportAsJSONAction.invoke([parent]);
+  });
+
+  it('ExportAsJSONAction exports object references from tree', (done) => {
+    const parent = {
+      composition: [],
+      configuration: {
+        objectStyles: {
+          conditionSetIdentifier: {
+            key: 'child',
+            namespace: ''
+          }
+        }
+      },
+      identifier: {
+        key: 'parent',
+        namespace: ''
+      },
+      name: 'Parent',
+      type: 'folder',
+      modified: 1503598129176,
+      location: 'mine',
+      persisted: 1503598129176
+    };
+
+    const child = {
+      composition: [],
+      identifier: {
+        key: 'child',
+        namespace: ''
+      },
+      name: 'Child',
+      type: 'folder',
+      modified: 1503598132428,
+      location: null,
+      persisted: 1503598132428
+    };
+
+    spyOn(openmct.objects, 'get').and.callFake((object) => {
+      return Promise.resolve(child);
+    });
+
+    spyOn(exportAsJSONAction, 'saveAs').and.callFake((completedTree) => {
+      expect(Object.keys(completedTree).length).toBe(2);
+      const conditionSetId = Object.keys(completedTree.openmct)[1];
+      expect(Object.prototype.hasOwnProperty.call(completedTree, 'openmct')).toBeTruthy();
+      expect(Object.prototype.hasOwnProperty.call(completedTree, 'rootId')).toBeTruthy();
+      expect(Object.prototype.hasOwnProperty.call(completedTree.openmct, 'parent')).toBeTruthy();
+      expect(completedTree.openmct[conditionSetId].name).toBe('Child');
+
+      done();
+    });
+
+    exportAsJSONAction.invoke([parent]);
+  });
+});
diff --git a/src/plugins/exportAsJSONAction/plugin.js b/src/plugins/exportAsJSONAction/plugin.js
new file mode 100644
index 00000000000..8115642c6b8
--- /dev/null
+++ b/src/plugins/exportAsJSONAction/plugin.js
@@ -0,0 +1,28 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import ExportAsJSONAction from './ExportAsJSONAction.js';
+
+export default function () {
+  return function (openmct) {
+    openmct.actions.register(new ExportAsJSONAction(openmct));
+  };
+}
diff --git a/src/plugins/faultManagement/FaultManagementInspector.vue b/src/plugins/faultManagement/FaultManagementInspector.vue
new file mode 100644
index 00000000000..707aaec6d33
--- /dev/null
+++ b/src/plugins/faultManagement/FaultManagementInspector.vue
@@ -0,0 +1,122 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div v-if="isShowDetails" class="c-inspector__properties c-inspect-properties">
+    <div class="c-inspect-properties__header">Fault Details</div>
+    <ul class="c-inspect-properties__section">
+      <DetailText :detail="sourceDetails" />
+      <DetailText :detail="occurredDetails" />
+      <DetailText :detail="criticalityDetails" />
+      <DetailText :detail="descriptionDetails" />
+    </ul>
+
+    <div class="c-inspect-properties__header">Telemetry</div>
+    <ul class="c-inspect-properties__section">
+      <DetailText :detail="systemDetails" />
+      <DetailText :detail="tripValueDetails" />
+      <DetailText :detail="currentValueDetails" />
+    </ul>
+  </div>
+</template>
+
+<script>
+import DetailText from '../inspectorViews/properties/DetailText.vue';
+
+export default {
+  name: 'FaultManagementInspector',
+  components: {
+    DetailText
+  },
+  inject: ['openmct'],
+  data() {
+    return {
+      isShowDetails: false
+    };
+  },
+  computed: {
+    criticalityDetails() {
+      return {
+        name: 'Criticality',
+        value: this.selectedFault?.severity
+      };
+    },
+    currentValueDetails() {
+      return {
+        name: 'Live value',
+        value: this.selectedFault?.currentValueInfo?.value
+      };
+    },
+    descriptionDetails() {
+      return {
+        name: 'Description',
+        value: this.selectedFault?.shortDescription
+      };
+    },
+    occurredDetails() {
+      return {
+        name: 'Occurred',
+        value: this.selectedFault?.triggerTime
+      };
+    },
+    sourceDetails() {
+      return {
+        name: 'Source',
+        value: this.selectedFault?.name
+      };
+    },
+    systemDetails() {
+      return {
+        name: 'System',
+        value: this.selectedFault?.namespace
+      };
+    },
+    tripValueDetails() {
+      return {
+        name: 'Trip Value',
+        value: this.selectedFault?.triggerValueInfo?.value
+      };
+    }
+  },
+  mounted() {
+    this.updateSelectedFaults();
+  },
+  methods: {
+    updateSelectedFaults() {
+      const selection = this.openmct.selection.get();
+      this.isShowDetails = false;
+
+      if (selection.length === 0 || selection[0].length < 2) {
+        return;
+      }
+
+      const selectedFaults = selection[0][1].context.selectedFaults;
+      if (selectedFaults.length !== 1) {
+        return;
+      }
+
+      this.isShowDetails = true;
+      this.selectedFault = selectedFaults[0];
+    }
+  }
+};
+</script>
diff --git a/src/plugins/faultManagement/FaultManagementInspectorViewProvider.js b/src/plugins/faultManagement/FaultManagementInspectorViewProvider.js
new file mode 100644
index 00000000000..4e5902925a0
--- /dev/null
+++ b/src/plugins/faultManagement/FaultManagementInspectorViewProvider.js
@@ -0,0 +1,76 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
+
+import { FAULT_MANAGEMENT_INSPECTOR, FAULT_MANAGEMENT_TYPE } from './constants.js';
+import FaultManagementInspector from './FaultManagementInspector.vue';
+
+export default function FaultManagementInspectorViewProvider(openmct) {
+  return {
+    openmct: openmct,
+    key: FAULT_MANAGEMENT_INSPECTOR,
+    name: 'Config',
+    canView: (selection) => {
+      if (selection.length !== 1 || selection[0].length === 0) {
+        return false;
+      }
+
+      let object = selection[0][0].context.item;
+
+      return object && object.type === FAULT_MANAGEMENT_TYPE;
+    },
+    view: (selection) => {
+      let _destroy = null;
+
+      return {
+        show: function (element) {
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                FaultManagementInspector
+              },
+              provide: {
+                openmct
+              },
+              template: '<FaultManagementInspector></FaultManagementInspector>'
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+        },
+        priority: function () {
+          return openmct.priority.HIGH + 1;
+        },
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
+        }
+      };
+    }
+  };
+}
diff --git a/src/plugins/faultManagement/FaultManagementListHeader.vue b/src/plugins/faultManagement/FaultManagementListHeader.vue
new file mode 100644
index 00000000000..cc40af58a61
--- /dev/null
+++ b/src/plugins/faultManagement/FaultManagementListHeader.vue
@@ -0,0 +1,104 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-fault-mgmt-item-header c-fault-mgmt__list-header c-fault-mgmt__list">
+    <div class="c-fault-mgmt-item-header c-fault-mgmt__checkbox">
+      <input type="checkbox" :checked="isSelectAll" @input="selectAll" />
+    </div>
+    <div
+      class="c-fault-mgmt-item-header c-fault-mgmt__list-header-results c-fault-mgmt__list-severity"
+    >
+      {{ totalFaultsCount }} Results
+    </div>
+    <div class="c-fault-mgmt__list-header-content">
+      <div class="c-fault-mgmt__list-content-right">
+        <div class="c-fault-mgmt-item-header c-fault-mgmt__list-header-tripVal">Trip Value</div>
+        <div class="c-fault-mgmt-item-header c-fault-mgmt__list-header-liveVal">Live Value</div>
+        <div class="c-fault-mgmt-item-header c-fault-mgmt__list-header-trigTime">Trigger Time</div>
+      </div>
+    </div>
+    <div class="c-fault-mgmt-item-header c-fault-mgmt__list-header-action-wrapper">
+      <div class="c-fault-mgmt__list-header-sortButton c-fault-mgmt__list-action-button">
+        <SelectField
+          class="c-fault-mgmt-viewButton"
+          title="Sort By"
+          :model="model"
+          @on-change="onChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SelectField from '@/api/forms/components/controls/SelectField.vue';
+
+import { SORT_ITEMS } from './constants.js';
+
+export default {
+  components: {
+    SelectField
+  },
+  inject: ['openmct', 'domainObject'],
+  props: {
+    selectedFaults: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    totalFaultsCount: {
+      type: Number,
+      default() {
+        return 0;
+      }
+    }
+  },
+  emits: ['sort-changed', 'select-all'],
+  data() {
+    return {
+      model: {}
+    };
+  },
+  computed: {
+    isSelectAll() {
+      return this.totalFaultsCount > 0 && this.selectedFaults.length === this.totalFaultsCount;
+    }
+  },
+  beforeMount() {
+    const options = Object.values(SORT_ITEMS);
+    this.model = {
+      options,
+      value: options[0].value
+    };
+  },
+  methods: {
+    onChange(data) {
+      this.$emit('sort-changed', data);
+    },
+    selectAll(e) {
+      this.$emit('select-all', e.target.checked);
+    }
+  }
+};
+</script>
diff --git a/src/plugins/faultManagement/FaultManagementListItem.vue b/src/plugins/faultManagement/FaultManagementListItem.vue
new file mode 100644
index 00000000000..8a70b45cc7b
--- /dev/null
+++ b/src/plugins/faultManagement/FaultManagementListItem.vue
@@ -0,0 +1,208 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-fault-mgmt__list data-selectable" :class="classesFromState">
+    <div class="c-fault-mgmt-item c-fault-mgmt__list-checkbox">
+      <input type="checkbox" :checked="isSelected" @input="toggleSelected" />
+    </div>
+    <div class="c-fault-mgmt-item">
+      <div
+        class="c-fault-mgmt__list-severity"
+        :aria-label="fault.severity"
+        :title="fault.severity"
+        :class="['is-severity-' + severity]"
+      ></div>
+    </div>
+    <div class="c-fault-mgmt-item c-fault-mgmt__list-content">
+      <div class="c-fault-mgmt-item c-fault-mgmt__list-pathname">
+        <div class="c-fault-mgmt__list-path">{{ fault.namespace }}</div>
+        <div class="c-fault-mgmt__list-faultname">{{ fault.name }}</div>
+      </div>
+      <div class="c-fault-mgmt__list-content-right">
+        <div class="c-fault-mgmt-item c-fault-mgmt__list-trigVal">
+          <div class="c-fault-mgmt-item__value" :class="tripValueClassname" title="Trip Value">
+            {{ fault.triggerValueInfo.value }}
+          </div>
+        </div>
+        <div class="c-fault-mgmt-item c-fault-mgmt__list-curVal">
+          <div class="c-fault-mgmt-item__value" :class="liveValueClassname" title="Live Value">
+            {{ fault.currentValueInfo.value }}
+          </div>
+        </div>
+        <div class="c-fault-mgmt-item c-fault-mgmt__list-trigTime">
+          <div class="c-fault-mgmt-item__value" title="Last Trigger Time">
+            {{ fault.triggerTime }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="c-fault-mgmt-item c-fault-mgmt__list-action-wrapper">
+      <button
+        class="c-fault-mgmt__list-action-button l-browse-bar__actions c-icon-button icon-3-dots"
+        title="Disposition Actions"
+        @click="showActionMenu"
+      ></button>
+    </div>
+  </div>
+</template>
+<script>
+const RANGE_CONDITION_CLASS = {
+  LOW: 'is-limit--lwr',
+  HIGH: 'is-limit--upr'
+};
+
+const SEVERITY_CLASS = {
+  CRITICAL: 'is-limit--red',
+  WARNING: 'is-limit--yellow',
+  WATCH: 'is-limit--cyan'
+};
+
+export default {
+  inject: ['openmct', 'domainObject'],
+  props: {
+    fault: {
+      type: Object,
+      required: true
+    },
+    isSelected: {
+      type: Boolean,
+      default: () => {
+        return false;
+      }
+    }
+  },
+  emits: ['acknowledge-selected', 'shelve-selected', 'toggle-selected'],
+  computed: {
+    classesFromState() {
+      const exclusiveStates = [
+        {
+          className: 'is-shelved',
+          test: () => this.fault.shelved
+        },
+        {
+          className: 'is-unacknowledged',
+          test: () => !this.fault.acknowledged && !this.fault.shelved
+        },
+        {
+          className: 'is-acknowledged',
+          test: () => this.fault.acknowledged && !this.fault.shelved
+        }
+      ];
+
+      const classes = [];
+
+      if (this.isSelected) {
+        classes.push('is-selected');
+      }
+
+      const matchingState = exclusiveStates.find((stateDefinition) => stateDefinition.test());
+
+      if (matchingState !== undefined) {
+        classes.push(matchingState.className);
+      }
+
+      return classes;
+    },
+    liveValueClassname() {
+      const currentValueInfo = this.fault?.currentValueInfo;
+      if (!currentValueInfo || currentValueInfo.monitoringResult === 'IN_LIMITS') {
+        return '';
+      }
+
+      let classname = RANGE_CONDITION_CLASS[currentValueInfo.rangeCondition] || '';
+      classname += ' ';
+      classname += SEVERITY_CLASS[currentValueInfo.monitoringResult] || '';
+
+      return classname.trim();
+    },
+    name() {
+      return `${this.fault?.name}/${this.fault?.namespace}`;
+    },
+    severity() {
+      return this.fault?.severity?.toLowerCase();
+    },
+    triggerTime() {
+      return this.fault?.triggerTime;
+    },
+    triggerValue() {
+      return this.fault?.triggerValueInfo?.value;
+    },
+    tripValueClassname() {
+      const triggerValueInfo = this.fault?.triggerValueInfo;
+      if (!triggerValueInfo || triggerValueInfo.monitoringResult === 'IN_LIMITS') {
+        return '';
+      }
+
+      let classname = RANGE_CONDITION_CLASS[triggerValueInfo.rangeCondition] || '';
+      classname += ' ';
+      classname += SEVERITY_CLASS[triggerValueInfo.monitoringResult] || '';
+
+      return classname.trim();
+    }
+  },
+  methods: {
+    showActionMenu(event) {
+      event.stopPropagation();
+
+      const menuItems = [
+        {
+          cssClass: 'icon-check',
+          isDisabled: this.fault.acknowledged,
+          name: 'Acknowledge',
+          description: '',
+          onItemClicked: (e) => {
+            this.$emit('acknowledge-selected', [this.fault]);
+          }
+        },
+        {
+          cssClass: 'icon-timer',
+          name: 'Shelve',
+          description: '',
+          onItemClicked: () => {
+            this.$emit('shelve-selected', [this.fault], { shelved: true });
+          }
+        },
+        {
+          cssClass: 'icon-timer',
+          isDisabled: Boolean(!this.fault.shelved),
+          name: 'Unshelve',
+          description: '',
+          onItemClicked: () => {
+            this.$emit('shelve-selected', [this.fault], { shelved: false });
+          }
+        }
+      ];
+
+      this.openmct.menus.showMenu(event.x, event.y, menuItems);
+    },
+    toggleSelected(event) {
+      const faultData = {
+        fault: this.fault,
+        selected: event.target.checked
+      };
+
+      this.$emit('toggle-selected', faultData);
+    }
+  }
+};
+</script>
diff --git a/src/plugins/faultManagement/FaultManagementListView.vue b/src/plugins/faultManagement/FaultManagementListView.vue
new file mode 100644
index 00000000000..182e4f2c44c
--- /dev/null
+++ b/src/plugins/faultManagement/FaultManagementListView.vue
@@ -0,0 +1,307 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-faults-list-view">
+    <FaultManagementSearch
+      :search-term="searchTerm"
+      @filter-changed="updateFilter"
+      @update-search-term="updateSearchTerm"
+    />
+
+    <FaultManagementToolbar
+      v-if="showToolbar"
+      :selected-faults="selectedFaults"
+      @acknowledge-selected="toggleAcknowledgeSelected"
+      @shelve-selected="toggleShelveSelected"
+    />
+
+    <div class="c-faults-list-view-header-item-container-wrapper">
+      <div class="c-faults-list-view-header-item-container">
+        <FaultManagementListHeader
+          class="header"
+          :selected-faults="Object.values(selectedFaults)"
+          :total-faults-count="filteredFaultsList.length"
+          @select-all="selectAll"
+          @sort-changed="sortChanged"
+        />
+
+        <div class="c-faults-list-view-item-body">
+          <template v-if="filteredFaultsList.length > 0">
+            <FaultManagementListItem
+              v-for="fault of filteredFaultsList"
+              :key="fault.id"
+              :fault="fault"
+              :is-selected="isSelected(fault)"
+              @toggle-selected="toggleSelected"
+              @acknowledge-selected="toggleAcknowledgeSelected"
+              @shelve-selected="toggleShelveSelected"
+            />
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { FAULT_MANAGEMENT_SHELVE_DURATIONS_IN_MS, FILTER_ITEMS, SORT_ITEMS } from './constants.js';
+import FaultManagementListHeader from './FaultManagementListHeader.vue';
+import FaultManagementListItem from './FaultManagementListItem.vue';
+import FaultManagementSearch from './FaultManagementSearch.vue';
+import FaultManagementToolbar from './FaultManagementToolbar.vue';
+
+const SEARCH_KEYS = [
+  'id',
+  'triggerValueInfo',
+  'currentValueInfo',
+  'triggerTime',
+  'severity',
+  'name',
+  'shortDescription',
+  'namespace'
+];
+
+export default {
+  components: {
+    FaultManagementListHeader,
+    FaultManagementListItem,
+    FaultManagementSearch,
+    FaultManagementToolbar
+  },
+  inject: ['openmct', 'domainObject'],
+  props: {
+    faultsList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      filterIndex: 0,
+      searchTerm: '',
+      selectedFaults: {},
+      sortBy: Object.values(SORT_ITEMS)[0].value
+    };
+  },
+  computed: {
+    filteredFaultsList() {
+      const filterName = FILTER_ITEMS[this.filterIndex];
+      let list = this.faultsList;
+
+      // Exclude shelved alarms from all views except the Shelved view
+      if (filterName !== 'Shelved') {
+        list = list.filter((fault) => fault.shelved !== true);
+      }
+
+      if (filterName === 'Acknowledged') {
+        list = list.filter((fault) => fault.acknowledged);
+      } else if (filterName === 'Unacknowledged') {
+        list = list.filter((fault) => !fault.acknowledged);
+      } else if (filterName === 'Shelved') {
+        list = list.filter((fault) => fault.shelved);
+      }
+
+      if (this.searchTerm.length > 0) {
+        list = list.filter(this.filterUsingSearchTerm);
+      }
+
+      list.sort(SORT_ITEMS[this.sortBy].sortFunction);
+
+      return list;
+    },
+    showToolbar() {
+      return this.openmct.faults.supportsActions();
+    }
+  },
+  methods: {
+    filterUsingSearchTerm(fault) {
+      if (!fault) {
+        return false;
+      }
+
+      let match = false;
+
+      SEARCH_KEYS.forEach((key) => {
+        if (fault[key]?.toString().toLowerCase().includes(this.searchTerm)) {
+          match = true;
+        }
+      });
+
+      return match;
+    },
+    isSelected(fault) {
+      return Boolean(this.selectedFaults[fault.id]);
+    },
+    selectAll(toggle = false) {
+      this.faultsList.forEach((fault) => {
+        const faultData = {
+          fault,
+          selected: toggle
+        };
+        this.toggleSelected(faultData);
+      });
+    },
+    sortChanged(sort) {
+      this.sortBy = sort.value;
+    },
+    toggleSelected({ fault, selected = false }) {
+      if (selected) {
+        this.selectedFaults[fault.id] = fault;
+      } else {
+        delete this.selectedFaults[fault.id];
+      }
+
+      const selectedFaults = Object.values(this.selectedFaults);
+      this.openmct.selection.select(
+        [
+          {
+            element: this.$el,
+            context: {
+              item: this.openmct.router.path[0]
+            }
+          },
+          {
+            element: this.$el,
+            context: {
+              selectedFaults
+            }
+          }
+        ],
+        false
+      );
+    },
+    toggleAcknowledgeSelected(faults = Object.values(this.selectedFaults)) {
+      let title = '';
+      if (faults.length > 1) {
+        title = `Acknowledge ${faults.length} selected faults`;
+      } else {
+        title = `Acknowledge fault: ${faults[0].name}`;
+      }
+
+      const formStructure = {
+        title,
+        sections: [
+          {
+            rows: [
+              {
+                key: 'comment',
+                control: 'textarea',
+                name: 'Optional comment',
+                pattern: '\\S+',
+                required: false,
+                cssClass: 'l-input-lg',
+                value: ''
+              }
+            ]
+          }
+        ],
+        buttons: {
+          submit: {
+            label: 'Acknowledge'
+          }
+        }
+      };
+
+      this.openmct.forms.showForm(formStructure).then((data) => {
+        Object.values(faults).forEach((selectedFault) => {
+          this.openmct.faults.acknowledgeFault(selectedFault, data);
+        });
+      });
+
+      this.selectedFaults = {};
+    },
+    async toggleShelveSelected(faults = Object.values(this.selectedFaults), shelveData = {}) {
+      const { shelved = true } = shelveData;
+      if (shelved) {
+        let title =
+          faults.length > 1
+            ? `Shelve ${faults.length} selected faults`
+            : `Shelve fault: ${faults[0].name}`;
+        const formStructure = {
+          title,
+          sections: [
+            {
+              rows: [
+                {
+                  key: 'comment',
+                  control: 'textarea',
+                  name: 'Optional comment',
+                  pattern: '\\S+',
+                  required: false,
+                  cssClass: 'l-input-lg',
+                  value: ''
+                },
+                {
+                  key: 'shelveDuration',
+                  control: 'select',
+                  name: 'Shelve duration',
+                  options: FAULT_MANAGEMENT_SHELVE_DURATIONS_IN_MS,
+                  required: false,
+                  cssClass: 'l-input-lg',
+                  value: FAULT_MANAGEMENT_SHELVE_DURATIONS_IN_MS[0].value
+                }
+              ]
+            }
+          ],
+          buttons: {
+            submit: {
+              label: 'Shelve'
+            }
+          }
+        };
+
+        let data;
+        try {
+          data = await this.openmct.forms.showForm(formStructure);
+        } catch (e) {
+          return;
+        }
+
+        shelveData.comment = data.comment || '';
+        shelveData.shelveDuration =
+          data.shelveDuration !== undefined
+            ? data.shelveDuration
+            : FAULT_MANAGEMENT_SHELVE_DURATIONS_IN_MS[0].value;
+      } else {
+        shelveData = {
+          shelved: false
+        };
+      }
+
+      Object.values(faults).forEach((selectedFault) => {
+        this.openmct.faults.shelveFault(selectedFault, shelveData);
+      });
+
+      this.selectedFaults = {};
+    },
+    updateFilter(filter) {
+      this.selectAll();
+
+      this.filterIndex = filter.model.options.findIndex((option) => option.value === filter.value);
+    },
+    updateSearchTerm(term = '') {
+      this.searchTerm = term.toLowerCase();
+    }
+  }
+};
+</script>
diff --git a/src/plugins/faultManagement/FaultManagementObjectProvider.js b/src/plugins/faultManagement/FaultManagementObjectProvider.js
new file mode 100644
index 00000000000..1c7fa566139
--- /dev/null
+++ b/src/plugins/faultManagement/FaultManagementObjectProvider.js
@@ -0,0 +1,60 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import {
+  FAULT_MANAGEMENT_NAMESPACE,
+  FAULT_MANAGEMENT_TYPE,
+  FAULT_MANAGEMENT_VIEW
+} from './constants.js';
+
+export default class FaultManagementObjectProvider {
+  constructor(openmct) {
+    this.openmct = openmct;
+    this.namespace = FAULT_MANAGEMENT_NAMESPACE;
+    this.key = FAULT_MANAGEMENT_VIEW;
+    this.objects = {};
+
+    this.createFaultManagementRootObject();
+  }
+
+  createFaultManagementRootObject() {
+    this.rootObject = {
+      identifier: {
+        key: this.key,
+        namespace: this.namespace
+      },
+      name: 'Fault Management',
+      type: FAULT_MANAGEMENT_TYPE,
+      location: 'ROOT'
+    };
+
+    this.openmct.objects.addRoot(this.rootObject.identifier);
+  }
+
+  get(identifier) {
+    if (identifier.key === FAULT_MANAGEMENT_VIEW) {
+      return Promise.resolve(this.rootObject);
+    }
+
+    return Promise.reject();
+  }
+}
diff --git a/src/plugins/faultManagement/FaultManagementPlugin.js b/src/plugins/faultManagement/FaultManagementPlugin.js
new file mode 100644
index 00000000000..c84da63c83a
--- /dev/null
+++ b/src/plugins/faultManagement/FaultManagementPlugin.js
@@ -0,0 +1,44 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { FAULT_MANAGEMENT_NAMESPACE, FAULT_MANAGEMENT_TYPE } from './constants.js';
+import FaultManagementInspectorViewProvider from './FaultManagementInspectorViewProvider.js';
+import FaultManagementObjectProvider from './FaultManagementObjectProvider.js';
+import FaultManagementViewProvider from './FaultManagementViewProvider.js';
+
+export default function FaultManagementPlugin() {
+  return function (openmct) {
+    openmct.types.addType(FAULT_MANAGEMENT_TYPE, {
+      name: 'Fault Management',
+      creatable: false,
+      description: 'Fault Management View',
+      cssClass: 'icon-bell'
+    });
+
+    openmct.objectViews.addProvider(new FaultManagementViewProvider(openmct));
+    openmct.inspectorViews.addProvider(new FaultManagementInspectorViewProvider(openmct));
+    openmct.objects.addProvider(
+      FAULT_MANAGEMENT_NAMESPACE,
+      new FaultManagementObjectProvider(openmct)
+    );
+  };
+}
diff --git a/src/plugins/faultManagement/FaultManagementSearch.vue b/src/plugins/faultManagement/FaultManagementSearch.vue
new file mode 100644
index 00000000000..358c6c203d2
--- /dev/null
+++ b/src/plugins/faultManagement/FaultManagementSearch.vue
@@ -0,0 +1,90 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-fault-mgmt__search-row">
+    <Search
+      class="c-fault-mgmt-search"
+      :value="searchTerm"
+      @input="updateSearchTerm"
+      @clear="updateSearchTerm"
+    />
+
+    <SelectField
+      class="c-fault-mgmt-viewButton"
+      title="View Filter"
+      :model="model"
+      @on-change="onChange"
+    />
+  </div>
+</template>
+
+<script>
+import SelectField from '@/api/forms/components/controls/SelectField.vue';
+import Search from '@/ui/components/SearchComponent.vue';
+
+import { FILTER_ITEMS } from './constants.js';
+
+export default {
+  components: {
+    SelectField,
+    Search
+  },
+  inject: ['openmct', 'domainObject'],
+  props: {
+    searchTerm: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['filter-changed', 'update-search-term'],
+  data() {
+    return {
+      items: []
+    };
+  },
+  computed: {
+    model() {
+      return {
+        options: this.items,
+        value: this.items[0] ? this.items[0].value : FILTER_ITEMS[0].toLowerCase()
+      };
+    }
+  },
+  mounted() {
+    this.items = FILTER_ITEMS.map((item) => {
+      return {
+        name: item,
+        value: item.toLowerCase()
+      };
+    });
+  },
+  methods: {
+    onChange(data) {
+      this.$emit('filter-changed', data);
+    },
+    updateSearchTerm(searchTerm) {
+      this.$emit('update-search-term', searchTerm);
+    }
+  }
+};
+</script>
diff --git a/src/plugins/faultManagement/FaultManagementToolbar.vue b/src/plugins/faultManagement/FaultManagementToolbar.vue
new file mode 100644
index 00000000000..8d2005c4327
--- /dev/null
+++ b/src/plugins/faultManagement/FaultManagementToolbar.vue
@@ -0,0 +1,93 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-fault-mgmt__toolbar">
+    <button
+      class="c-icon-button icon-check"
+      title="Acknowledge selected faults"
+      :disabled="disableAcknowledge"
+      @click="acknowledgeSelected"
+    >
+      <div title="Acknowledge selected faults" class="c-icon-button__label">Acknowledge</div>
+    </button>
+
+    <button
+      class="c-icon-button icon-timer"
+      title="Shelve selected faults"
+      :disabled="disableShelve"
+      @click="shelveSelected"
+    >
+      <div title="Shelve selected items" class="c-icon-button__label">Shelve</div>
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  inject: ['openmct', 'domainObject'],
+  props: {
+    selectedFaults: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  emits: ['acknowledge-selected', 'shelve-selected'],
+  data() {
+    return {
+      disableAcknowledge: true,
+      disableShelve: true
+    };
+  },
+  watch: {
+    selectedFaults(newSelectedFaults) {
+      const selectedfaults = Object.values(newSelectedFaults);
+
+      let disableAcknowledge = true;
+      let disableShelve = true;
+
+      selectedfaults.forEach((fault) => {
+        if (!fault.shelved) {
+          disableShelve = false;
+        }
+
+        if (!fault.acknowledged) {
+          disableAcknowledge = false;
+        }
+      });
+
+      this.disableAcknowledge = disableAcknowledge;
+      this.disableShelve = disableShelve;
+    }
+  },
+  methods: {
+    acknowledgeSelected() {
+      this.$emit('acknowledge-selected');
+    },
+    shelveSelected() {
+      this.$emit('shelve-selected');
+    }
+  }
+};
+</script>
diff --git a/src/plugins/faultManagement/FaultManagementView.vue b/src/plugins/faultManagement/FaultManagementView.vue
new file mode 100644
index 00000000000..0eeba1a9bda
--- /dev/null
+++ b/src/plugins/faultManagement/FaultManagementView.vue
@@ -0,0 +1,72 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <FaultManagementListView :faults-list="faultsList" />
+</template>
+
+<script>
+import { FAULT_MANAGEMENT_ALARMS, FAULT_MANAGEMENT_GLOBAL_ALARMS } from './constants.js';
+import FaultManagementListView from './FaultManagementListView.vue';
+
+export default {
+  components: {
+    FaultManagementListView
+  },
+  inject: ['openmct', 'domainObject'],
+  data() {
+    return {
+      faultsList: []
+    };
+  },
+  mounted() {
+    this.unsubscribe = this.openmct.faults.subscribe(this.domainObject, this.updateFault);
+  },
+  beforeUnmount() {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+    }
+  },
+  methods: {
+    updateFault({ fault, type }) {
+      if (type === FAULT_MANAGEMENT_GLOBAL_ALARMS) {
+        this.updateFaultList();
+      } else if (type === FAULT_MANAGEMENT_ALARMS) {
+        this.faultsList.forEach((faultValue, i) => {
+          if (fault.id === faultValue.id) {
+            this.faultsList[i] = fault;
+          }
+        });
+      }
+    },
+    updateFaultList() {
+      this.openmct.faults.request(this.domainObject).then((faultsData) => {
+        if (faultsData?.length > 0) {
+          this.faultsList = faultsData.map((fd) => fd.fault);
+        } else {
+          this.faultsList = [];
+        }
+      });
+    }
+  }
+};
+</script>
diff --git a/src/plugins/faultManagement/FaultManagementViewProvider.js b/src/plugins/faultManagement/FaultManagementViewProvider.js
new file mode 100644
index 00000000000..0f2debd274a
--- /dev/null
+++ b/src/plugins/faultManagement/FaultManagementViewProvider.js
@@ -0,0 +1,74 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
+
+import { FAULT_MANAGEMENT_TYPE, FAULT_MANAGEMENT_VIEW } from './constants.js';
+import FaultManagementView from './FaultManagementView.vue';
+
+export default class FaultManagementViewProvider {
+  constructor(openmct) {
+    this.openmct = openmct;
+    this.key = FAULT_MANAGEMENT_VIEW;
+  }
+
+  canView(domainObject) {
+    return domainObject.type === FAULT_MANAGEMENT_TYPE;
+  }
+
+  canEdit(domainObject) {
+    return false;
+  }
+
+  view(domainObject) {
+    const openmct = this.openmct;
+    let _destroy = null;
+
+    return {
+      show: (element) => {
+        const { destroy } = mount(
+          {
+            el: element,
+            components: {
+              FaultManagementView
+            },
+            provide: {
+              openmct,
+              domainObject
+            },
+            template: '<FaultManagementView></FaultManagementView>'
+          },
+          {
+            app: openmct.app,
+            element
+          }
+        );
+        _destroy = destroy;
+      },
+      destroy: () => {
+        if (_destroy) {
+          _destroy();
+        }
+      }
+    };
+  }
+}
diff --git a/src/plugins/faultManagement/constants.js b/src/plugins/faultManagement/constants.js
new file mode 100644
index 00000000000..583c6607b5b
--- /dev/null
+++ b/src/plugins/faultManagement/constants.js
@@ -0,0 +1,117 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+const FAULT_SEVERITY = {
+  CRITICAL: {
+    name: 'CRITICAL',
+    value: 'critical',
+    priority: 0
+  },
+  WARNING: {
+    name: 'WARNING',
+    value: 'warning',
+    priority: 1
+  },
+  WATCH: {
+    name: 'WATCH',
+    value: 'watch',
+    priority: 2
+  }
+};
+
+export const FAULT_MANAGEMENT_TYPE = 'faultManagement';
+export const FAULT_MANAGEMENT_INSPECTOR = 'faultManagementInspector';
+export const FAULT_MANAGEMENT_ALARMS = 'alarms';
+export const FAULT_MANAGEMENT_GLOBAL_ALARMS = 'global-alarm-status';
+export const FAULT_MANAGEMENT_SHELVE_DURATIONS_IN_MS = [
+  {
+    name: '5 Minutes',
+    value: 300000
+  },
+  {
+    name: '10 Minutes',
+    value: 600000
+  },
+  {
+    name: '15 Minutes',
+    value: 900000
+  },
+  {
+    name: 'Indefinite',
+    value: 0
+  }
+];
+export const FAULT_MANAGEMENT_VIEW = 'faultManagement.view';
+export const FAULT_MANAGEMENT_NAMESPACE = 'faults.taxonomy';
+export const FILTER_ITEMS = ['Standard View', 'Acknowledged', 'Unacknowledged', 'Shelved'];
+export const SORT_ITEMS = {
+  'newest-first': {
+    name: 'Newest First',
+    value: 'newest-first',
+    sortFunction: (a, b) => {
+      if (b.triggerTime > a.triggerTime) {
+        return 1;
+      }
+
+      if (a.triggerTime > b.triggerTime) {
+        return -1;
+      }
+
+      return 0;
+    }
+  },
+  'oldest-first': {
+    name: 'Oldest First',
+    value: 'oldest-first',
+    sortFunction: (a, b) => {
+      if (a.triggerTime > b.triggerTime) {
+        return 1;
+      }
+
+      if (a.triggerTime < b.triggerTime) {
+        return -1;
+      }
+
+      return 0;
+    }
+  },
+  severity: {
+    name: 'Severity',
+    value: 'severity',
+    sortFunction: (a, b) => {
+      const diff = FAULT_SEVERITY[a.severity].priority - FAULT_SEVERITY[b.severity].priority;
+      if (diff !== 0) {
+        return diff;
+      }
+
+      if (b.triggerTime > a.triggerTime) {
+        return 1;
+      }
+
+      if (a.triggerTime > b.triggerTime) {
+        return -1;
+      }
+
+      return 0;
+    }
+  }
+};
diff --git a/src/plugins/faultManagement/fault-manager.scss b/src/plugins/faultManagement/fault-manager.scss
new file mode 100644
index 00000000000..7463771eb2f
--- /dev/null
+++ b/src/plugins/faultManagement/fault-manager.scss
@@ -0,0 +1,267 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+$colorFaultItemFg: $colorBodyFg;
+$colorFaultItemFgEmphasis: $colorBodyFgEm;
+$colorFaultItemBg: pullForward($colorBodyBg, 5%);
+
+/*********************************************** SEARCH  */
+.c-fault-mgmt__search-row {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  > * + * {
+    margin-left: 10px;
+    float: right;
+  }
+}
+
+.c-fault-mgmt-search {
+  width: 95%;
+}
+
+/*********************************************** TOOLBAR */
+.c-fault-mgmt__toolbar {
+  display: flex;
+  justify-content: center;
+  flex: 0 0 auto;
+  > * + * {
+    margin-left: $interiorMargin;
+  }
+}
+
+/*********************************************** LIST VIEW */
+.c-faults-list-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  > * + * {
+    margin-top: $interiorMargin;
+  }
+}
+
+.c-faults-list-view-header-item-container {
+  display: grid;
+  width: 100%;
+  grid-template-columns: max-content max-content repeat(5, minmax(max-content, 20%)) max-content;
+  grid-row-gap: $interiorMargin;
+
+  &-wrapper {
+    flex: 1 1 auto;
+    padding-right: $interiorMargin; // Fend of from scrollbar
+    overflow-y: auto;
+  }
+
+  .--width-less-than-600 & {
+    grid-template-columns: max-content max-content 1fr 1fr max-content;
+  }
+}
+
+.c-faults-list-view-item-body {
+  display: contents;
+}
+
+/*********************************************** LIST */
+.c-fault-mgmt__list {
+  display: contents;
+  color: $colorFaultItemFg;
+
+  &-checkbox {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+
+  &-severity {
+    font-size: 2em;
+
+    &.is-severity-critical {
+      @include glyphBefore($glyph-icon-alert-triangle);
+      color: $colorStatusError;
+    }
+
+    &.is-severity-warning {
+      @include glyphBefore($glyph-icon-alert-rect);
+      color: $colorStatusAlert;
+    }
+
+    &.is-severity-watch {
+      @include glyphBefore($glyph-icon-info);
+      color: $colorCommand;
+    }
+  }
+
+  &-content {
+    display: contents;
+
+    .--width-less-than-600 & {
+      display: flex;
+      flex-wrap: wrap;
+      grid-column: span 2;
+    }
+  }
+
+  &-pathname {
+    padding-right: $interiorMarginLg;
+    overflow-wrap: anywhere;
+    min-width: 100px;
+  }
+  &-path {
+    font-size: 0.85em;
+    margin-left: $interiorMargin;
+  }
+
+  &-faultname {
+    font-size: 1.3em;
+    margin-left: $interiorMargin;
+  }
+
+  &-content-right {
+    display: contents;
+  }
+
+  &-trigTime {
+    grid-column: 6 / span 2;
+  }
+
+  &-action-wrapper {
+    text-align: right;
+    flex: 0 0 auto;
+    align-items: stretch;
+  }
+
+  &-action-button {
+    flex: 0 0 auto;
+    margin-left: auto;
+    text-align: right;
+  }
+
+  // STATES
+  &.is-unacknowledged {
+    color: $colorFaultItemFgEmphasis;
+    .c-fault-mgmt__list-severity {
+      @include pulse($animName: severityAnim, $dur: 200ms);
+    }
+  }
+
+  &.is-acknowledged,
+  &.is-shelved {
+    .c-fault-mgmt__list-severity {
+      &:before {
+        opacity: 60%;
+        //font-size: 1.5em;
+      }
+
+      &:after {
+        color: $colorFaultItemFgEmphasis;
+        display: block;
+        font-family: symbolsfont;
+        position: absolute;
+        //text-shadow: black 0 0 2px;
+        right: -3px;
+        bottom: -3px;
+        transform-origin: right bottom;
+        transform: scale(0.6);
+      }
+    }
+  }
+
+  &.is-shelved {
+    .c-fault-mgmt__list-pathname {
+      font-style: italic;
+    }
+  }
+
+  &.is-acknowledged .c-fault-mgmt__list-severity:after {
+    content: $glyph-icon-check;
+  }
+
+  &.is-shelved .c-fault-mgmt__list-severity:after {
+    content: $glyph-icon-timer;
+  }
+}
+
+/*********************************************** LIST HEADER */
+.c-fault-mgmt__list-header {
+  display: contents;
+  border-radius: $controlCr;
+  align-items: center;
+
+  * {
+    margin: 0px;
+    border-radius: 0px;
+  }
+
+  .--width-less-than-600 & {
+    .c-fault-mgmt__list-content-right {
+      display: none;
+    }
+  }
+
+  &-content {
+    display: contents;
+  }
+
+  &-results {
+    grid-column: 2 / span 2;
+    font-size: 1em;
+    height: auto;
+  }
+
+  &-action-wrapper {
+    grid-column: 7 / span 2;
+
+    .--width-less-than-600 & {
+      grid-column: 4 / span 2;
+    }
+  }
+}
+
+/*********************************************** GRID ITEM */
+.c-fault-mgmt-item {
+  $p: $interiorMargin;
+  padding: $p;
+  background: $colorFaultItemBg;
+  white-space: nowrap;
+
+  &-header {
+    $c: $colorBodyBg;
+    background: $c;
+    border-bottom: 5px solid $c; // Creates illusion of "space" beneath header
+    min-height: 30px; // Needed to align cells
+    padding: $p;
+    position: sticky;
+    top: 0;
+    z-index: 2;
+  }
+
+  &__value {
+    @include isLimit();
+    background: rgba($colorBodyFg, 0.1);
+    padding: $p;
+    border-radius: $controlCr;
+    display: inline-flex;
+  }
+
+  .is-selected & {
+    background: $colorSelectedBg;
+  }
+}
diff --git a/src/plugins/faultManagement/pluginSpec.js b/src/plugins/faultManagement/pluginSpec.js
new file mode 100644
index 00000000000..e1870b794c7
--- /dev/null
+++ b/src/plugins/faultManagement/pluginSpec.js
@@ -0,0 +1,107 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createOpenMct, resetApplicationState } from '../../utils/testing.js';
+import {
+  FAULT_MANAGEMENT_INSPECTOR,
+  FAULT_MANAGEMENT_NAMESPACE,
+  FAULT_MANAGEMENT_TYPE,
+  FAULT_MANAGEMENT_VIEW
+} from './constants.js';
+
+describe('The Fault Management Plugin', () => {
+  let openmct;
+  const faultDomainObject = {
+    name: 'it is not your fault',
+    type: FAULT_MANAGEMENT_TYPE,
+    identifier: {
+      key: 'nobodies',
+      namespace: 'fault'
+    }
+  };
+
+  beforeEach(() => {
+    openmct = createOpenMct();
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  it('is not installed by default', () => {
+    const typeDef = openmct.types.get(FAULT_MANAGEMENT_TYPE).definition;
+
+    expect(typeDef.name).toBe('Unknown Type');
+  });
+
+  it('can be installed', () => {
+    openmct.install(openmct.plugins.FaultManagement());
+    const typeDef = openmct.types.get(FAULT_MANAGEMENT_TYPE).definition;
+
+    expect(typeDef.name).toBe('Fault Management');
+  });
+
+  describe('once it is installed', () => {
+    beforeEach(() => {
+      openmct.install(openmct.plugins.FaultManagement());
+    });
+
+    it('provides a view for fault management types', () => {
+      const applicableViews = openmct.objectViews.get(faultDomainObject, []);
+      const faultManagementView = applicableViews.find(
+        (viewProvider) => viewProvider.key === FAULT_MANAGEMENT_VIEW
+      );
+
+      expect(applicableViews.length).toEqual(1);
+      expect(faultManagementView).toBeDefined();
+    });
+
+    it('provides an inspector view for fault management types', () => {
+      const faultDomainObjectSelection = [
+        [
+          {
+            context: {
+              item: faultDomainObject
+            }
+          }
+        ]
+      ];
+      const applicableInspectorViews = openmct.inspectorViews.get(faultDomainObjectSelection);
+      const faultManagementInspectorView = applicableInspectorViews.filter(
+        (view) => view.key === FAULT_MANAGEMENT_INSPECTOR
+      );
+
+      expect(faultManagementInspectorView.length).toEqual(1);
+    });
+
+    it('creates a root object for fault management', async () => {
+      const root = await openmct.objects.getRoot();
+      const rootCompositionCollection = openmct.composition.get(root);
+      const rootComposition = await rootCompositionCollection.load();
+      const faultObject = rootComposition.find(
+        (obj) => obj.identifier.namespace === FAULT_MANAGEMENT_NAMESPACE
+      );
+
+      expect(faultObject).toBeDefined();
+    });
+  });
+});
diff --git a/src/plugins/filters/FiltersInspectorViewProvider.js b/src/plugins/filters/FiltersInspectorViewProvider.js
index f6fcd7de422..ef98a017b4c 100644
--- a/src/plugins/filters/FiltersInspectorViewProvider.js
+++ b/src/plugins/filters/FiltersInspectorViewProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,56 +20,71 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    './components/FiltersView.vue',
-    'vue'
-], function (
-    FiltersView,
-    Vue
-) {
+import mount from 'utils/mount';
 
-    function FiltersInspectorViewProvider(openmct, supportedObjectTypesArray) {
-        return {
-            key: 'filters-inspector',
-            name: 'Filters Inspector View',
-            canView: function (selection) {
-                if (selection.length === 0 || selection[0].length === 0) {
-                    return false;
-                }
+import FiltersView from './components/FiltersView.vue';
 
-                let object = selection[0][0].context.item;
+const FILTERS_INSPECTOR_KEY = 'filters-inspector';
+export default class FiltersInspectorViewProvider {
+  constructor(openmct, supportedObjectTypesArray) {
+    this.openmct = openmct;
+    this.supportedObjectTypesArray = supportedObjectTypesArray;
+    this.key = FILTERS_INSPECTOR_KEY;
+    this.name = 'Filters';
+  }
+  canView(selection) {
+    const domainObject = selection?.[0]?.[0]?.context?.item;
 
-                return object && supportedObjectTypesArray.some(type => object.type === type);
-            },
-            view: function (selection) {
-                let component;
+    return (
+      domainObject && this.supportedObjectTypesArray.some((type) => domainObject.type === type)
+    );
+  }
+  view(selection) {
+    let openmct = this.openmct;
+    let _destroy = null;
+
+    const domainObject = selection?.[0]?.[0]?.context?.item;
 
-                return {
-                    show: function (element) {
-                        component = new Vue({
-                            el: element,
-                            components: {
-                                FiltersView: FiltersView.default
-                            },
-                            provide: {
-                                openmct
-                            },
-                            template: '<filters-view></filters-view>'
-                        });
-                    },
-                    destroy: function () {
-                        if (component) {
-                            component.$destroy();
-                            component = undefined;
-                        }
-                    }
-                };
+    return {
+      show: function (element) {
+        const { destroy } = mount(
+          {
+            el: element,
+            components: {
+              FiltersView
             },
-            priority: function () {
-                return 1;
-            }
-        };
-    }
+            provide: {
+              openmct: openmct
+            },
+            template: '<filters-view></filters-view>'
+          },
+          {
+            app: openmct.app,
+            element
+          }
+        );
+        _destroy = destroy;
+      },
+      showTab: function (isEditing) {
+        if (isEditing) {
+          return true;
+        }
+
+        const metadata = openmct.telemetry.getMetadata(domainObject);
+        const metadataWithFilters = metadata
+          ? metadata.valueMetadatas.filter((value) => value.filters)
+          : [];
 
-    return FiltersInspectorViewProvider;
-});
+        return metadataWithFilters.length;
+      },
+      priority: function () {
+        return openmct.priority.DEFAULT;
+      },
+      destroy: function () {
+        if (_destroy) {
+          _destroy();
+        }
+      }
+    };
+  }
+}
diff --git a/src/plugins/filters/README.md b/src/plugins/filters/README.md
new file mode 100644
index 00000000000..321fa30432a
--- /dev/null
+++ b/src/plugins/filters/README.md
@@ -0,0 +1,53 @@
+
+# Server side filtering in Open MCT
+
+## Introduction
+
+In Open MCT, filters can be constructed to filter out telemetry data on the server side. This is useful for reducing the amount of data that needs to be sent to the client. For example, in [Open MCT for MCWS](https://github.com/NASA-AMMOS/openmct-mcws/blob/e8846d325cc3f659d8ad58d1d24efaafbe2b6bb7/src/constants.js#L115), they can be used to filter realtime data from recorded data. In the [Open MCT YAMCS plugin](https://github.com/akhenry/openmct-yamcs/blob/9c4ed03e23848db3215fdb6a988ba34b445a3989/src/providers/events.js#L44), we can use them to filter incoming event data by severity.
+
+## Installing the filter plugin
+
+You'll need to install the filter plugin first. For example:
+
+```js
+openmct.install(openmct.plugins.Filters(['telemetry.plot.overlay', 'table']));
+```
+
+will install the filters plugin and have it apply to overlay plots and tables. You can see an example of this in the [Open MCT YAMCS plugin](https://github.com/akhenry/openmct-yamcs/blob/9c4ed03e23848db3215fdb6a988ba34b445a3989/example/index.js#L58).
+
+## Defining a filter
+
+To define a filter, you'll need to add a new `filter` property to the domain object's `telemetry` metadata underneath the `values` array. For example, if you have a domain object with a `telemetry` metadata that looks like this:
+
+```js
+{
+    key: 'fruit',
+    name: 'Types of fruit',
+    filters: [{
+        singleSelectionThreshold: true,
+        comparator: 'equals',
+        possibleValues: [
+            { name: 'Apple', value: 'apple' },
+            { name: 'Banana', value: 'banana' },
+            { name: 'Orange', value: 'orange' }
+        ]
+    }]
+}
+```
+
+This will define a filter that allows an operator to choose one (due to `singleSelectionThreshold` being `true`) of the three possible values. The `comparator` property defines how the filter will be applied to the telemetry data.
+Setting `singleSelectionThreshold` to `false` will render the `possibleValues` as a series of checkboxes. Removing the `possibleValues` property will render the filter as a text box, allowing the operator to enter a value to filter on.
+
+Note that how the filter is interpreted is ultimately decided by the individual telemetry providers.
+
+## Implementing a filter in a telemetry provider
+
+Implementing a filter requires two parts:
+
+- First, one needs to add the filter implementation to the [subscribe](https://github.com/nasa/openmct/blob/5df7971438acb9e8b933edda2aed432b1b8bb27d/src/api/telemetry/TelemetryAPI.js#L366) method in your telemetry provider. The filter will be passed to you in the `options` argument. You can either add the filter to your telemetry subscription request, or filter manually as new messages appears. An example of the latter is [shown in the YAMCS plugin for Open MCT](https://github.com/akhenry/openmct-yamcs/blob/9c4ed03e23848db3215fdb6a988ba34b445a3989/src/providers/events.js#L95).
+
+- Second, one needs to add the filter implementation to the [request](https://github.com/nasa/openmct/blob/5df7971438acb9e8b933edda2aed432b1b8bb27d/src/api/telemetry/TelemetryAPI.js#L318) method in your telemetry provider. The filter again will be passed to you in the `options` argument. You can either add the filter to your telemetry request, or filter manually after the request is made. An example of the former is [shown in the YAMCS plugin for Open MCT](https://github.com/akhenry/openmct-yamcs/blob/9c4ed03e23848db3215fdb6a988ba34b445a3989/src/providers/historical-telemetry-provider.js#L171).
+
+## Using filters
+
+If you installed the plugin to have it apply to `table`, create a Telemetry Table in Open MCT and drag your telemetry object that contains the filter to it. Then click "Edit", and notice the "Filter" tab in the inspector. It allows operator to either select a "Global Filter", or a regular filter. The "Global Filter" will apply for all telemetry objects in the table, while the regular filter will only apply to the telemetry object that it is defined on.
\ No newline at end of file
diff --git a/src/plugins/filters/components/FilterField.vue b/src/plugins/filters/components/FilterField.vue
index 8d8aeb61180..7d0b29c5a22 100644
--- a/src/plugins/filters/components/FilterField.vue
+++ b/src/plugins/filters/components/FilterField.vue
@@ -1,131 +1,191 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div class="c-inspect-properties__section c-filter-settings">
+  <div class="c-inspect-properties__section c-filter-settings">
     <li
-        v-for="(filter, index) in filterField.filters"
-        :key="index"
-        class="c-inspect-properties__row c-filter-settings__setting"
+      v-for="(filter, index) in filterField.filters"
+      :key="index"
+      class="c-inspect-properties__row c-filter-settings__setting"
     >
-        <div
-            class="c-inspect-properties__label label"
+      <div class="c-inspect-properties__label label" :disabled="useGlobal">
+        {{ filterField.name }} =
+      </div>
+      <div class="c-inspect-properties__value value">
+        <!-- EDITING -->
+        <!-- String input, editing -->
+        <template v-if="!filter.possibleValues && isEditing">
+          <input
+            :id="`${filter}filterControl`"
+            class="c-input--flex"
+            type="text"
+            :aria-label="label"
+            :disabled="useGlobal"
+            :value="persistedValue(filter.comparator)"
+            @change="updateFilterValueFromString($event, filter.comparator)"
+          />
+        </template>
+
+        <!-- Dropdown, editing -->
+        <template v-if="filter.possibleValues && filter.singleSelectionThreshold && isEditing">
+          <select
+            name="setSelectionThreshold"
+            :aria-label="label"
             :disabled="useGlobal"
-        >
-            {{ filterField.name }} =
-        </div>
-        <div class="c-inspect-properties__value value">
-            <!-- EDITING -->
-            <!-- String input, editing -->
-            <template v-if="!filter.possibleValues && isEditing">
-                <input
-                    :id="`${filter}filterControl`"
-                    class="c-input--flex"
-                    type="text"
-                    :disabled="useGlobal"
-                    :value="persistedValue(filter)"
-                    @change="updateFilterValue($event, filter)"
-                >
-            </template>
+            @change="updateFilterValueFromDropdown($event, filter.comparator, $event.target.value)"
+          >
+            <option key="NONE" value="NONE" selected="isSelected(filter.comparator, option.value)">
+              None
+            </option>
+            <option
+              v-for="option in filter.possibleValues"
+              :key="option.label"
+              :value="option.value"
+              :selected="isSelected(filter.comparator, option.value)"
+            >
+              {{ option.label }}
+            </option>
+          </select>
+        </template>
 
-            <!-- Checkbox list, editing -->
-            <template v-if="filter.possibleValues && isEditing">
-                <div
-                    v-for="option in filter.possibleValues"
-                    :key="option.value"
-                    class="c-checkbox-list__row"
-                >
-                    <input
-                        :id="`${option.value}filterControl`"
-                        class="c-checkbox-list__input"
-                        type="checkbox"
-                        :disabled="useGlobal"
-                        :checked="isChecked(filter.comparator, option.value)"
-                        @change="updateFilterValue($event, filter.comparator, option.value)"
-                    >
-                    <span class="c-checkbox-list__value">
-                        {{ option.label }}
-                    </span>
-                </div>
-            </template>
+        <!-- Checkbox list, editing -->
+        <template v-if="filter.possibleValues && isEditing && !filter.singleSelectionThreshold">
+          <div
+            v-for="option in filter.possibleValues"
+            :key="option.value"
+            class="c-checkbox-list__row"
+          >
+            <input
+              :id="`${option.value}filterControl`"
+              class="c-checkbox-list__input"
+              type="checkbox"
+              :aria-label="label"
+              :disabled="useGlobal"
+              :checked="isSelected(filter.comparator, option.value)"
+              @change="updateFilterValueFromCheckbox($event, filter.comparator, option.value)"
+            />
+            <span class="c-checkbox-list__value">
+              {{ option.label }}
+            </span>
+          </div>
+        </template>
 
-            <!-- BROWSING -->
-            <!-- String input, NOT editing -->
-            <template v-if="!filter.possibleValues && !isEditing">
-                {{ persistedValue(filter) }}
-            </template>
+        <!-- BROWSING -->
+        <!-- String input, NOT editing -->
+        <template v-if="!filter.possibleValues && !isEditing">
+          {{ persistedValue(filter) }}
+        </template>
 
-            <!-- Checkbox list, NOT editing -->
-            <template v-if="filter.possibleValues && !isEditing">
-                <span v-if="persistedFilters[filter.comparator]">
-                    {{ getFilterLabels(filter) }}
-                </span>
-            </template>
-        </div>
+        <!-- Checkbox list, NOT editing -->
+        <template v-if="filter.possibleValues && !isEditing">
+          <span v-if="persistedFilters[filter.comparator]">
+            {{ getFilterLabels(filter) }}
+          </span>
+        </template>
+      </div>
     </li>
-</div>
+  </div>
 </template>
 
 <script>
 export default {
-    inject: [
-        'openmct'
-    ],
-    props: {
-        filterField: {
-            type: Object,
-            required: true
-        },
-        useGlobal: Boolean,
-        persistedFilters: {
-            type: Object,
-            default: () => {
-                return {};
-            }
-        }
+  inject: ['openmct'],
+  props: {
+    filterField: {
+      type: Object,
+      required: true
+    },
+    label: {
+      type: String,
+      required: true
+    },
+    useGlobal: Boolean,
+    persistedFilters: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  emits: [
+    'filter-text-value-changed',
+    'filter-selected',
+    'clear-filters',
+    'filter-single-selected'
+  ],
+  data() {
+    return {
+      isEditing: this.openmct.editor.isEditing()
+    };
+  },
+  mounted() {
+    this.openmct.editor.on('isEditing', this.toggleIsEditing);
+  },
+  beforeUnmount() {
+    this.openmct.editor.off('isEditing', this.toggleIsEditing);
+  },
+  methods: {
+    toggleIsEditing(isEditing) {
+      this.isEditing = isEditing;
+    },
+    isSelected(comparator, value) {
+      if (this.persistedFilters[comparator] && this.persistedFilters[comparator].includes(value)) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    persistedValue(comparator) {
+      return this.persistedFilters && this.persistedFilters[comparator];
     },
-    data() {
-        return {
-            isEditing: this.openmct.editor.isEditing()
-        };
+    updateFilterValueFromString(event, comparator) {
+      this.$emit('filter-text-value-changed', this.filterField.key, comparator, event.target.value);
     },
-    mounted() {
-        this.openmct.editor.on('isEditing', this.toggleIsEditing);
+    updateFilterValueFromCheckbox(event, comparator, value) {
+      this.$emit('filter-selected', this.filterField.key, comparator, value, event.target.checked);
     },
-    beforeDestroy() {
-        this.openmct.editor.off('isEditing', this.toggleIsEditing);
+    updateFilterValueFromDropdown(event, comparator, value) {
+      if (value === 'NONE') {
+        this.$emit('clear-filters', this.filterField.key);
+      } else {
+        this.$emit('filter-single-selected', this.filterField.key, comparator, value);
+      }
     },
-    methods: {
-        toggleIsEditing(isEditing) {
-            this.isEditing = isEditing;
-        },
-        isChecked(comparator, value) {
-            if (this.persistedFilters[comparator] && this.persistedFilters[comparator].includes(value)) {
-                return true;
-            } else {
-                return false;
-            }
-        },
-        persistedValue(comparator) {
-            return this.persistedFilters && this.persistedFilters[comparator];
-        },
-        updateFilterValue(event, comparator, value) {
-            if (value !== undefined) {
-                this.$emit('filterSelected', this.filterField.key, comparator, value, event.target.checked);
-            } else {
-                this.$emit('filterTextValueChanged', this.filterField.key, comparator, event.target.value);
-            }
-        },
-        getFilterLabels(filter) {
-            return this.persistedFilters[filter.comparator].reduce((accum, filterValue) => {
-                accum.push(filter.possibleValues.reduce((label, possibleValue) => {
-                    if (filterValue === possibleValue.value) {
-                        label = possibleValue.label;
-                    }
+    getFilterLabels(filter) {
+      return this.persistedFilters[filter.comparator]
+        .reduce((accum, filterValue) => {
+          accum.push(
+            filter.possibleValues.reduce((label, possibleValue) => {
+              if (filterValue === possibleValue.value) {
+                label = possibleValue.label;
+              }
 
-                    return label;
-                }, ''));
+              return label;
+            }, '')
+          );
 
-                return accum;
-            }, []).join(', ');
-        }
+          return accum;
+        }, [])
+        .join(', ');
     }
+  }
 };
 </script>
diff --git a/src/plugins/filters/components/FilterObject.vue b/src/plugins/filters/components/FilterObject.vue
index 0661b78bdd5..aee8cf29736 100644
--- a/src/plugins/filters/components/FilterObject.vue
+++ b/src/plugins/filters/components/FilterObject.vue
@@ -1,168 +1,193 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<li class="c-tree__item-h">
-    <div
-        class="c-tree__item menus-to-left"
-        @click="toggleExpanded"
-    >
-        <div
-            class="c-filter-tree-item__filter-indicator"
-            :class="{'icon-filter': hasActiveFilters }"
-        ></div>
-        <span
-            class="c-disclosure-triangle is-enabled flex-elem"
-            :class="{'c-disclosure-triangle--expanded': expanded}"
-        ></span>
-        <div class="c-tree__item__label c-object-label">
-            <div class="c-object-label">
-                <div
-                    class="c-object-label__type-icon"
-                    :class="objectCssClass"
-                ></div>
-                <div class="c-object-label__name flex-elem grows">
-                    {{ filterObject.name }}
-                </div>
-            </div>
+  <li class="c-tree__item-h">
+    <div class="c-tree__item menus-to-left" @click="toggleExpanded">
+      <div
+        class="c-filter-tree-item__filter-indicator"
+        :class="{ 'icon-filter': hasActiveFilters }"
+      ></div>
+      <span
+        class="c-disclosure-triangle is-enabled flex-elem"
+        :class="{ 'c-disclosure-triangle--expanded': expanded }"
+      ></span>
+      <div class="c-tree__item__label c-object-label">
+        <div class="c-object-label">
+          <div class="c-object-label__type-icon" :class="objectCssClass"></div>
+          <div class="c-object-label__name flex-elem grows">
+            {{ filterObject.name }}
+          </div>
         </div>
+      </div>
     </div>
 
     <div v-if="expanded">
-        <ul class="c-inspect-properties">
-            <div
-                v-if="!isEditing && persistedFilters.useGlobal"
-                class="c-inspect-properties__label span-all"
-            >
-                Uses global filter
-            </div>
+      <ul class="c-inspect-properties">
+        <div
+          v-if="!isEditing && persistedFilters.useGlobal"
+          class="c-inspect-properties__label span-all"
+        >
+          Uses global filter
+        </div>
 
-            <div
-                v-if="isEditing"
-                class="c-inspect-properties__label span-all"
-            >
-                <toggle-switch
-                    :id="keyString"
-                    :checked="persistedFilters.useGlobal"
-                    @change="useGlobalFilter"
-                />
-                Use global filter
-            </div>
-            <filter-field
-                v-for="metadatum in activeFilters"
-                :key="metadatum.key"
-                :filter-field="metadatum"
-                :use-global="persistedFilters.useGlobal"
-                :persisted-filters="updatedFilters[metadatum.key]"
-                @filterSelected="updateFiltersWithSelectedValue"
-                @filterTextValueChanged="updateFiltersWithTextValue"
-            />
-        </ul>
+        <div v-if="isEditing" class="c-inspect-properties__label span-all">
+          <toggle-switch
+            :id="keyString"
+            :checked="persistedFilters.useGlobal"
+            @change="useGlobalFilter"
+          />
+          Use global filter
+        </div>
+        <filter-field
+          v-for="metadatum in activeFilters"
+          :key="metadatum.key"
+          :filter-field="metadatum"
+          :use-global="persistedFilters.useGlobal"
+          :persisted-filters="updatedFilters[metadatum.key]"
+          label="Specific Filter"
+          @filter-selected="updateMultipleFiltersWithSelectedValue"
+          @filter-text-value-changed="updateFiltersWithTextValue"
+          @filter-single-selected="updateSingleSelection"
+          @clear-filters="clearFilters"
+        />
+      </ul>
     </div>
-</li>
+  </li>
 </template>
 
 <script>
-import FilterField from './FilterField.vue';
-import ToggleSwitch from '../../../ui/components/ToggleSwitch.vue';
 import isEmpty from 'lodash/isEmpty';
 
+import ToggleSwitch from '../../../ui/components/ToggleSwitch.vue';
+import FilterField from './FilterField.vue';
+
 export default {
-    components: {
-        FilterField,
-        ToggleSwitch
+  components: {
+    FilterField,
+    ToggleSwitch
+  },
+  inject: ['openmct'],
+  props: {
+    filterObject: {
+      type: Object,
+      required: true
     },
-    inject: ['openmct'],
-    props: {
-        filterObject: {
-            type: Object,
-            required: true
-        },
-        persistedFilters: {
-            type: Object,
-            default: () => {
-                return {};
-            }
-        }
+    persistedFilters: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  emits: ['update-filters'],
+  data() {
+    return {
+      expanded: false,
+      objectCssClass: undefined,
+      updatedFilters: JSON.parse(JSON.stringify(this.persistedFilters)),
+      isEditing: this.openmct.editor.isEditing()
+    };
+  },
+  computed: {
+    // do not show filter fields if using global filter
+    // if editing however, show all filter fields
+    activeFilters() {
+      if (!this.isEditing && this.persistedFilters.useGlobal) {
+        return [];
+      }
+
+      return this.filterObject.metadataWithFilters;
     },
-    data() {
-        return {
-            expanded: false,
-            objectCssClass: undefined,
-            updatedFilters: JSON.parse(JSON.stringify(this.persistedFilters)),
-            isEditing: this.openmct.editor.isEditing()
-        };
+    hasActiveFilters() {
+      // Should be true when the user has entered any filter values.
+      return Object.values(this.persistedFilters).some((comparator) => {
+        return typeof comparator === 'object' && !isEmpty(comparator);
+      });
+    }
+  },
+  watch: {
+    persistedFilters: {
+      handler: function checkFilters(newpersistedFilters) {
+        this.updatedFilters = JSON.parse(JSON.stringify(newpersistedFilters));
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    let type = this.openmct.types.get(this.filterObject.domainObject.type) || {};
+    this.keyString = this.openmct.objects.makeKeyString(this.filterObject.domainObject.identifier);
+    this.objectCssClass = type.definition.cssClass;
+    this.openmct.editor.on('isEditing', this.toggleIsEditing);
+  },
+  beforeUnmount() {
+    this.openmct.editor.off('isEditing', this.toggleIsEditing);
+  },
+  methods: {
+    toggleExpanded() {
+      this.expanded = !this.expanded;
     },
-    computed: {
-        // do not show filter fields if using global filter
-        // if editing however, show all filter fields
-        activeFilters() {
-            if (!this.isEditing && this.persistedFilters.useGlobal) {
-                return [];
-            }
+    updateMultipleFiltersWithSelectedValue(key, comparator, valueName, value) {
+      let filterValue = this.updatedFilters[key];
 
-            return this.filterObject.metadataWithFilters;
-        },
-        hasActiveFilters() {
-            // Should be true when the user has entered any filter values.
-            return Object.values(this.persistedFilters).some(comparator => {
-                return (typeof (comparator) === 'object' && !isEmpty(comparator));
-            });
+      if (filterValue[comparator]) {
+        if (value === true) {
+          filterValue[comparator].push(valueName);
+        } else {
+          if (filterValue[comparator].length === 1) {
+            this.updatedFilters[key] = {};
+          } else {
+            filterValue[comparator] = filterValue[comparator].filter((v) => v !== valueName);
+          }
         }
+      } else {
+        this.updatedFilters[key][comparator] = [valueName];
+      }
+
+      this.$emit('update-filters', this.keyString, this.updatedFilters);
     },
-    watch: {
-        persistedFilters: {
-            handler: function checkFilters(newpersistedFilters) {
-                this.updatedFilters = JSON.parse(JSON.stringify(newpersistedFilters));
-            },
-            deep: true
-        }
+    clearFilters(key) {
+      this.updatedFilters[key] = {};
+      this.$emit('update-filters', this.keyString, this.updatedFilters);
     },
-    mounted() {
-        let type = this.openmct.types.get(this.filterObject.domainObject.type) || {};
-        this.keyString = this.openmct.objects.makeKeyString(this.filterObject.domainObject.identifier);
-        this.objectCssClass = type.definition.cssClass;
-        this.openmct.editor.on('isEditing', this.toggleIsEditing);
+    updateFiltersWithTextValue(key, comparator, value) {
+      if (value.trim() === '') {
+        this.updatedFilters[key] = {};
+      } else {
+        this.updatedFilters[key][comparator] = value;
+      }
+
+      this.$emit('update-filters', this.keyString, this.updatedFilters);
     },
-    beforeDestroy() {
-        this.openmct.editor.off('isEditing', this.toggleIsEditing);
+    updateSingleSelection(key, comparator, value) {
+      this.updatedFilters[key][comparator] = [value];
+      this.$emit('update-filters', this.keyString, this.updatedFilters);
     },
-    methods: {
-        toggleExpanded() {
-            this.expanded = !this.expanded;
-        },
-        updateFiltersWithSelectedValue(key, comparator, valueName, value) {
-            let filterValue = this.updatedFilters[key];
-
-            if (filterValue[comparator]) {
-                if (value === true) {
-                    filterValue[comparator].push(valueName);
-                } else {
-                    if (filterValue[comparator].length === 1) {
-                        this.$set(this.updatedFilters, key, {});
-                    } else {
-                        filterValue[comparator] = filterValue[comparator].filter(v => v !== valueName);
-                    }
-                }
-            } else {
-                this.$set(this.updatedFilters[key], comparator, [valueName]);
-            }
-
-            this.$emit('updateFilters', this.keyString, this.updatedFilters);
-        },
-        updateFiltersWithTextValue(key, comparator, value) {
-            if (value.trim() === '') {
-                this.$set(this.updatedFilters, key, {});
-            } else {
-                this.$set(this.updatedFilters[key], comparator, value);
-            }
-
-            this.$emit('updateFilters', this.keyString, this.updatedFilters);
-        },
-        useGlobalFilter(checked) {
-            this.updatedFilters.useGlobal = checked;
-            this.$emit('updateFilters', this.keyString, this.updatedFilters, checked);
-        },
-        toggleIsEditing(isEditing) {
-            this.isEditing = isEditing;
-        }
+    useGlobalFilter(checked) {
+      this.updatedFilters.useGlobal = checked;
+      this.$emit('update-filters', this.keyString, this.updatedFilters, checked);
+    },
+    toggleIsEditing(isEditing) {
+      this.isEditing = isEditing;
     }
+  }
 };
 </script>
diff --git a/src/plugins/filters/components/FiltersView.vue b/src/plugins/filters/components/FiltersView.vue
index 0c99dce13aa..3ead1a02daa 100644
--- a/src/plugins/filters/components/FiltersView.vue
+++ b/src/plugins/filters/components/FiltersView.vue
@@ -1,243 +1,283 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<ul
-    v-if="Object.keys(children).length"
-    class="c-tree c-filter-tree"
->
+  <ul v-if="Object.keys(children).length" class="c-tree c-filter-tree">
     <h2>Data Filters</h2>
-    <div
-        v-if="hasActiveFilters"
-        class="c-filter-indication"
-    >
-        {{ label }}
+    <div v-if="hasActiveFilters" class="c-filter-indication">
+      {{ label }}
     </div>
     <global-filters
-        :global-filters="globalFilters"
-        :global-metadata="globalMetadata"
-        @persistGlobalFilters="persistGlobalFilters"
+      :global-filters="globalFilters"
+      :global-metadata="globalMetadata"
+      @persist-global-filters="persistGlobalFilters"
     />
     <filter-object
-        v-for="(child, key) in children"
-        :key="key"
-        :filter-object="child"
-        :persisted-filters="persistedFilters[key]"
-        @updateFilters="persistFilters"
+      v-for="(child, key) in children"
+      :key="key"
+      :filter-object="child"
+      :persisted-filters="persistedFilters[key]"
+      @update-filters="persistFilters"
     />
-</ul>
+  </ul>
 </template>
 
 <script>
+import _ from 'lodash';
+import { toRaw } from 'vue';
+
 import FilterObject from './FilterObject.vue';
 import GlobalFilters from './GlobalFilters.vue';
-import _ from 'lodash';
 
 const FILTER_VIEW_TITLE = 'Filters applied';
 const FILTER_VIEW_TITLE_MIXED = 'Mixed filters applied';
 const USE_GLOBAL = 'useGlobal';
 
 export default {
-    components: {
-        FilterObject,
-        GlobalFilters
+  components: {
+    FilterObject,
+    GlobalFilters
+  },
+  inject: ['openmct'],
+  data() {
+    let providedObject = this.openmct.selection.get()[0][0].context.item;
+    let configuration = providedObject.configuration;
+
+    return {
+      persistedFilters: (configuration && configuration.filters) || {},
+      globalFilters: (configuration && configuration.globalFilters) || {},
+      globalMetadata: {},
+      providedObject,
+      children: {}
+    };
+  },
+  computed: {
+    hasActiveFilters() {
+      // Should be true when the user has entered any filter values.
+      return Object.values(this.persistedFilters).some((filters) => {
+        return Object.values(filters).some((comparator) => {
+          return typeof comparator === 'object' && !_.isEmpty(comparator);
+        });
+      });
     },
-    inject: [
-        'openmct'
-    ],
-    data() {
-        let providedObject = this.openmct.selection.get()[0][0].context.item;
-        let configuration = providedObject.configuration;
-
-        return {
-            persistedFilters: (configuration && configuration.filters) || {},
-            globalFilters: (configuration && configuration.globalFilters) || {},
-            globalMetadata: {},
-            providedObject,
-            children: {}
-        };
+    hasMixedFilters() {
+      // Should be true when filter values are mixed.
+      let filtersToCompare = _.omit(this.persistedFilters[Object.keys(this.persistedFilters)[0]], [
+        USE_GLOBAL
+      ]);
+
+      return Object.values(this.persistedFilters).some((filters) => {
+        return !_.isEqual(filtersToCompare, _.omit(filters, [USE_GLOBAL]));
+      });
     },
-    computed: {
-        hasActiveFilters() {
-            // Should be true when the user has entered any filter values.
-            return Object.values(this.persistedFilters).some(filters => {
-                return Object.values(filters).some(comparator => {
-                    return (typeof (comparator) === 'object' && !_.isEmpty(comparator));
-                });
-            });
-        },
-        hasMixedFilters() {
-            // Should be true when filter values are mixed.
-            let filtersToCompare = _.omit(this.persistedFilters[Object.keys(this.persistedFilters)[0]], [USE_GLOBAL]);
-
-            return Object.values(this.persistedFilters).some(filters => {
-                return !_.isEqual(filtersToCompare, _.omit(filters, [USE_GLOBAL]));
-            });
-        },
-        label() {
-            if (this.hasActiveFilters) {
-                if (this.hasMixedFilters) {
-                    return FILTER_VIEW_TITLE_MIXED;
-                } else {
-                    return FILTER_VIEW_TITLE;
-                }
+    label() {
+      if (this.hasActiveFilters) {
+        if (this.hasMixedFilters) {
+          return FILTER_VIEW_TITLE_MIXED;
+        } else {
+          return FILTER_VIEW_TITLE;
+        }
+      }
+
+      return '';
+    }
+  },
+  mounted() {
+    this.composition = this.openmct.composition.get(this.providedObject);
+    this.composition.on('add', this.addChildren);
+    this.composition.on('remove', this.removeChildren);
+    this.composition.load();
+    this.unobserve = this.openmct.objects.observe(
+      this.providedObject,
+      'configuration.filters',
+      this.updatePersistedFilters
+    );
+    this.unobserveGlobalFilters = this.openmct.objects.observe(
+      this.providedObject,
+      'configuration.globalFilters',
+      this.updateGlobalFilters
+    );
+  },
+  beforeUnmount() {
+    this.composition.off('add', this.addChildren);
+    this.composition.off('remove', this.removeChildren);
+    this.unobserve();
+    this.unobserveGlobalFilters();
+  },
+  methods: {
+    addChildren(domainObject) {
+      let keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
+      let metadata = this.openmct.telemetry.getMetadata(domainObject);
+      let metadataWithFilters = metadata
+        ? metadata.valueMetadatas.filter((value) => value.filters)
+        : [];
+      let hasFiltersWithKeyString = this.persistedFilters[keyString] !== undefined;
+      let mutateFilters = false;
+      let childObject = {
+        name: domainObject.name,
+        domainObject: domainObject,
+        metadataWithFilters
+      };
+
+      if (metadataWithFilters.length) {
+        this.children[keyString] = childObject;
+
+        metadataWithFilters.forEach((metadatum) => {
+          if (!this.globalFilters[metadatum.key]) {
+            this.globalFilters[metadatum.key] = {};
+          }
+
+          if (!this.globalMetadata[metadatum.key]) {
+            this.globalMetadata[metadatum.key] = metadatum;
+          }
+
+          if (!hasFiltersWithKeyString) {
+            if (!this.persistedFilters[keyString]) {
+              this.persistedFilters[keyString] = {};
+              this.persistedFilters[keyString].useGlobal = true;
+              mutateFilters = true;
             }
 
-            return '';
-        }
-    },
-    mounted() {
-        this.composition = this.openmct.composition.get(this.providedObject);
-        this.composition.on('add', this.addChildren);
-        this.composition.on('remove', this.removeChildren);
-        this.composition.load();
-        this.unobserve = this.openmct.objects.observe(this.providedObject, 'configuration.filters', this.updatePersistedFilters);
-        this.unobserveGlobalFilters = this.openmct.objects.observe(this.providedObject, 'configuration.globalFilters', this.updateGlobalFilters);
+            this.persistedFilters[keyString][metadatum.key] = this.globalFilters[metadatum.key];
+          }
+        });
+      }
+
+      if (mutateFilters) {
+        this.mutateConfigurationFilters();
+      }
     },
-    beforeDestroy() {
-        this.composition.off('add', this.addChildren);
-        this.composition.off('remove', this.removeChildren);
-        this.unobserve();
-        this.unobserveGlobalFilters();
+    removeChildren(identifier) {
+      let keyString = this.openmct.objects.makeKeyString(identifier);
+      let globalFiltersToRemove = this.getGlobalFiltersToRemove(keyString);
+
+      if (globalFiltersToRemove.length > 0) {
+        globalFiltersToRemove.forEach((key) => {
+          delete this.globalFilters[key];
+          delete this.globalMetadata[key];
+        });
+        this.mutateConfigurationGlobalFilters();
+      }
+
+      delete this.children[keyString];
+      delete this.persistedFilters[keyString];
+      this.mutateConfigurationFilters();
     },
-    methods: {
-        addChildren(domainObject) {
-            let keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
-            let metadata = this.openmct.telemetry.getMetadata(domainObject);
-            let metadataWithFilters = metadata.valueMetadatas.filter(value => value.filters);
-            let hasFiltersWithKeyString = this.persistedFilters[keyString] !== undefined;
-            let mutateFilters = false;
-            let childObject = {
-                name: domainObject.name,
-                domainObject: domainObject,
-                metadataWithFilters
-            };
-
-            if (metadataWithFilters.length) {
-                this.$set(this.children, keyString, childObject);
-
-                metadataWithFilters.forEach(metadatum => {
-                    if (!this.globalFilters[metadatum.key]) {
-                        this.$set(this.globalFilters, metadatum.key, {});
-                    }
-
-                    if (!this.globalMetadata[metadatum.key]) {
-                        this.$set(this.globalMetadata, metadatum.key, metadatum);
-                    }
-
-                    if (!hasFiltersWithKeyString) {
-                        if (!this.persistedFilters[keyString]) {
-                            this.$set(this.persistedFilters, keyString, {});
-                            this.$set(this.persistedFilters[keyString], 'useGlobal', true);
-                            mutateFilters = true;
-                        }
-
-                        this.$set(this.persistedFilters[keyString], metadatum.key, this.globalFilters[metadatum.key]);
-                    }
-                });
-            }
+    getGlobalFiltersToRemove(keyString) {
+      let filtersToRemove = new Set();
+      const child = this.children[keyString];
+      if (child && child.metadataWithFilters) {
+        const metadataWithFilters = child.metadataWithFilters;
+        metadataWithFilters.forEach((metadatum) => {
+          let keepFilter = false;
+          Object.keys(this.children).forEach((childKeyString) => {
+            if (childKeyString !== keyString) {
+              let filterMatched = this.children[childKeyString].metadataWithFilters.some(
+                (childMetadatum) => childMetadatum.key === metadatum.key
+              );
 
-            if (mutateFilters) {
-                this.mutateConfigurationFilters();
-            }
-        },
-        removeChildren(identifier) {
-            let keyString = this.openmct.objects.makeKeyString(identifier);
-            let globalFiltersToRemove = this.getGlobalFiltersToRemove(keyString);
-
-            if (globalFiltersToRemove.length > 0) {
-                globalFiltersToRemove.forEach(key => {
-                    this.$delete(this.globalFilters, key);
-                    this.$delete(this.globalMetadata, key);
-                });
-                this.mutateConfigurationGlobalFilters();
-            }
+              if (filterMatched) {
+                keepFilter = true;
 
-            this.$delete(this.children, keyString);
-            this.$delete(this.persistedFilters, keyString);
-            this.mutateConfigurationFilters();
-        },
-        getGlobalFiltersToRemove(keyString) {
-            let filtersToRemove = new Set();
-            const child = this.children[keyString];
-            if (child && child.metadataWithFilters) {
-                const metadataWithFilters = child.metadataWithFilters;
-                metadataWithFilters.forEach(metadatum => {
-                    let keepFilter = false;
-                    Object.keys(this.children).forEach(childKeyString => {
-                        if (childKeyString !== keyString) {
-                            let filterMatched = this.children[childKeyString].metadataWithFilters.some(childMetadatum => childMetadatum.key === metadatum.key);
-
-                            if (filterMatched) {
-                                keepFilter = true;
-
-                                return;
-                            }
-                        }
-                    });
-
-                    if (!keepFilter) {
-                        filtersToRemove.add(metadatum.key);
-                    }
-                });
+                return;
+              }
             }
+          });
 
-            return Array.from(filtersToRemove);
-        },
-        persistFilters(keyString, updatedFilters, useGlobalValues) {
-            this.persistedFilters[keyString] = updatedFilters;
-
-            if (useGlobalValues) {
-                Object.keys(this.persistedFilters[keyString]).forEach(key => {
-                    if (typeof (this.persistedFilters[keyString][key]) === 'object') {
-                        this.persistedFilters[keyString][key] = this.globalFilters[key];
-                    }
-                });
-            }
+          if (!keepFilter) {
+            filtersToRemove.add(metadatum.key);
+          }
+        });
+      }
 
-            this.mutateConfigurationFilters();
-        },
-        updatePersistedFilters(filters) {
-            this.persistedFilters = filters;
-        },
-        persistGlobalFilters(key, filters) {
-            this.globalFilters[key] = filters[key];
-            this.mutateConfigurationGlobalFilters();
-            let mutateFilters = false;
-
-            Object.keys(this.children).forEach(keyString => {
-                if (this.persistedFilters[keyString].useGlobal !== false && this.containsField(keyString, key)) {
-                    if (!this.persistedFilters[keyString][key]) {
-                        this.$set(this.persistedFilters[keyString], key, {});
-                    }
-
-                    this.$set(this.persistedFilters[keyString], key, filters[key]);
-                    mutateFilters = true;
-                }
-            });
-
-            if (mutateFilters) {
-                this.mutateConfigurationFilters();
-            }
-        },
-        updateGlobalFilters(filters) {
-            this.globalFilters = filters;
-        },
-        containsField(keyString, field) {
-            let hasField = false;
-            this.children[keyString].metadataWithFilters.forEach(metadatum => {
-                if (metadatum.key === field) {
-                    hasField = true;
-
-                    return;
-                }
-            });
-
-            return hasField;
-        },
-        mutateConfigurationFilters() {
-            this.openmct.objects.mutate(this.providedObject, 'configuration.filters', this.persistedFilters);
-        },
-        mutateConfigurationGlobalFilters() {
-            this.openmct.objects.mutate(this.providedObject, 'configuration.globalFilters', this.globalFilters);
+      return Array.from(filtersToRemove);
+    },
+    persistFilters(keyString, updatedFilters, useGlobalValues) {
+      this.persistedFilters[keyString] = updatedFilters;
+
+      if (useGlobalValues) {
+        Object.keys(this.persistedFilters[keyString]).forEach((key) => {
+          if (typeof this.persistedFilters[keyString][key] === 'object') {
+            this.persistedFilters[keyString][key] = this.globalFilters[key];
+          }
+        });
+      }
+
+      this.mutateConfigurationFilters();
+    },
+    updatePersistedFilters(filters) {
+      this.persistedFilters = filters;
+    },
+    persistGlobalFilters(key, filters) {
+      this.globalFilters[key] = filters[key];
+      this.mutateConfigurationGlobalFilters();
+      let mutateFilters = false;
+
+      Object.keys(this.children).forEach((keyString) => {
+        if (
+          this.persistedFilters[keyString].useGlobal !== false &&
+          this.containsField(keyString, key)
+        ) {
+          if (!this.persistedFilters[keyString][key]) {
+            this.persistedFilters[keyString][key] = {};
+          }
+
+          this.persistedFilters[keyString][key] = filters[key];
+          mutateFilters = true;
+        }
+      });
+
+      if (mutateFilters) {
+        this.mutateConfigurationFilters();
+      }
+    },
+    updateGlobalFilters(filters) {
+      this.globalFilters = filters;
+    },
+    containsField(keyString, field) {
+      let hasField = false;
+      this.children[keyString].metadataWithFilters.forEach((metadatum) => {
+        if (metadatum.key === field) {
+          hasField = true;
+
+          return;
         }
+      });
+
+      return hasField;
+    },
+    mutateConfigurationFilters() {
+      this.openmct.objects.mutate(
+        this.providedObject,
+        'configuration.filters',
+        toRaw(this.persistedFilters)
+      );
+    },
+    mutateConfigurationGlobalFilters() {
+      this.openmct.objects.mutate(
+        this.providedObject,
+        'configuration.globalFilters',
+        toRaw(this.globalFilters)
+      );
     }
+  }
 };
 </script>
diff --git a/src/plugins/filters/components/GlobalFilters.vue b/src/plugins/filters/components/GlobalFilters.vue
index 8c51f3ee740..d64c24e7f7f 100644
--- a/src/plugins/filters/components/GlobalFilters.vue
+++ b/src/plugins/filters/components/GlobalFilters.vue
@@ -1,117 +1,142 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<li class="c-tree__item-h">
-    <div
-        class="c-tree__item menus-to-left"
-        @click="toggleExpanded"
-    >
-        <div
-            class="c-filter-tree-item__filter-indicator"
-            :class="{'icon-filter': hasActiveGlobalFilters }"
-        ></div>
-        <span
-            class="c-disclosure-triangle is-enabled flex-elem"
-            :class="{'c-disclosure-triangle--expanded': expanded}"
-        ></span>
-        <div class="c-tree__item__label c-object-label">
-            <div class="c-object-label">
-                <div class="c-object-label__type-icon icon-gear"></div>
-                <div class="c-object-label__name flex-elem grows">
-                    Global Filtering
-                </div>
-            </div>
+  <li class="c-tree__item-h">
+    <div class="c-tree__item menus-to-left" @click="toggleExpanded">
+      <div
+        class="c-filter-tree-item__filter-indicator"
+        :class="{ 'icon-filter': hasActiveGlobalFilters }"
+      ></div>
+      <span
+        class="c-disclosure-triangle is-enabled flex-elem"
+        :class="{ 'c-disclosure-triangle--expanded': expanded }"
+      ></span>
+      <div class="c-tree__item__label c-object-label">
+        <div class="c-object-label">
+          <div class="c-object-label__type-icon icon-gear"></div>
+          <div class="c-object-label__name flex-elem grows">Global Filtering</div>
         </div>
+      </div>
     </div>
-    <ul
-        v-if="expanded"
-        class="c-inspect-properties"
-    >
-        <filter-field
-            v-for="metadatum in globalMetadata"
-            :key="metadatum.key"
-            :filter-field="metadatum"
-            :persisted-filters="updatedFilters[metadatum.key]"
-            @filterSelected="updateFiltersWithSelectedValue"
-            @filterTextValueChanged="updateFiltersWithTextValue"
-        />
+    <ul v-if="expanded" class="c-inspect-properties">
+      <filter-field
+        v-for="metadatum in globalMetadata"
+        :key="metadatum.key"
+        :filter-field="metadatum"
+        :persisted-filters="updatedFilters[metadatum.key]"
+        label="Global Filter"
+        @filter-selected="updateFiltersWithSelectedValue"
+        @filter-text-value-changed="updateFiltersWithTextValue"
+        @filter-single-selected="updateSingleSelection"
+        @clear-filters="clearFilters"
+      />
     </ul>
-</li>
+  </li>
 </template>
 
 <script>
 import FilterField from './FilterField.vue';
 
 export default {
-    components: {
-        FilterField
+  components: {
+    FilterField
+  },
+  inject: ['openmct'],
+  props: {
+    globalMetadata: {
+      type: Object,
+      required: true
     },
-    inject: ['openmct'],
-    props: {
-        globalMetadata: {
-            type: Object,
-            required: true
-        },
-        globalFilters: {
-            type: Object,
-            default: () => {
-                return {};
-            }
-        }
+    globalFilters: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  emits: ['persist-global-filters'],
+  data() {
+    return {
+      expanded: false,
+      updatedFilters: JSON.parse(JSON.stringify(this.globalFilters))
+    };
+  },
+  computed: {
+    hasActiveGlobalFilters() {
+      return Object.values(this.globalFilters).some((field) => {
+        return Object.values(field).some((comparator) => {
+          return comparator && (comparator !== '' || comparator.length > 0);
+        });
+      });
+    }
+  },
+  watch: {
+    globalFilters: {
+      handler: function checkFilters(newGlobalFilters) {
+        this.updatedFilters = JSON.parse(JSON.stringify(newGlobalFilters));
+      },
+      deep: true
+    }
+  },
+  methods: {
+    toggleExpanded() {
+      this.expanded = !this.expanded;
     },
-    data() {
-        return {
-            expanded: false,
-            updatedFilters: JSON.parse(JSON.stringify(this.globalFilters))
-        };
+    clearFilters(key) {
+      this.updatedFilters[key] = {};
+      this.$emit('persist-global-filters', key, this.updatedFilters);
     },
-    computed: {
-        hasActiveGlobalFilters() {
-            return Object.values(this.globalFilters).some(field => {
-                return Object.values(field).some(comparator => {
-                    return (comparator && (comparator !== '' || comparator.length > 0));
-                });
-            });
+    updateFiltersWithSelectedValue(key, comparator, valueName, value) {
+      let filterValue = this.updatedFilters[key];
+
+      if (filterValue[comparator]) {
+        if (value === true) {
+          filterValue[comparator].push(valueName);
+        } else {
+          if (filterValue[comparator].length === 1) {
+            this.updatedFilters[key] = {};
+          } else {
+            filterValue[comparator] = filterValue[comparator].filter((v) => v !== valueName);
+          }
         }
+      } else {
+        this.updatedFilters[key][comparator] = [valueName];
+      }
+
+      this.$emit('persist-global-filters', key, this.updatedFilters);
     },
-    watch: {
-        globalFilters: {
-            handler: function checkFilters(newGlobalFilters) {
-                this.updatedFilters = JSON.parse(JSON.stringify(newGlobalFilters));
-            },
-            deep: true
-        }
+    updateSingleSelection(key, comparator, value) {
+      this.updatedFilters[key][comparator] = [value];
+      this.$emit('persist-global-filters', key, this.updatedFilters);
     },
-    methods: {
-        toggleExpanded() {
-            this.expanded = !this.expanded;
-        },
-        updateFiltersWithSelectedValue(key, comparator, valueName, value) {
-            let filterValue = this.updatedFilters[key];
+    updateFiltersWithTextValue(key, comparator, value) {
+      if (value.trim() === '') {
+        this.updatedFilters[key] = {};
+      } else {
+        this.updatedFilters[key][comparator] = value;
+      }
 
-            if (filterValue[comparator]) {
-                if (value === true) {
-                    filterValue[comparator].push(valueName);
-                } else {
-                    if (filterValue[comparator].length === 1) {
-                        this.$set(this.updatedFilters, key, {});
-                    } else {
-                        filterValue[comparator] = filterValue[comparator].filter(v => v !== valueName);
-                    }
-                }
-            } else {
-                this.$set(this.updatedFilters[key], comparator, [valueName]);
-            }
-
-            this.$emit('persistGlobalFilters', key, this.updatedFilters);
-        },
-        updateFiltersWithTextValue(key, comparator, value) {
-            if (value.trim() === '') {
-                this.$set(this.updatedFilters, key, {});
-            } else {
-                this.$set(this.updatedFilters[key], comparator, value);
-            }
-
-            this.$emit('persistGlobalFilters', key, this.updatedFilters);
-        }
+      this.$emit('persist-global-filters', key, this.updatedFilters);
     }
+  }
 };
 </script>
diff --git a/src/plugins/filters/components/filters-view.scss b/src/plugins/filters/components/filters-view.scss
index 261c269bdb9..40b32bc4d95 100644
--- a/src/plugins/filters/components/filters-view.scss
+++ b/src/plugins/filters/components/filters-view.scss
@@ -1,15 +1,15 @@
 .c-inspector {
-    .c-filter-indication {
-        border-radius: $smallCr;
-        font-size: inherit;
-        padding: $interiorMarginSm $interiorMargin;
-        text-transform: inherit;
-    }
-    .c-filter-tree {
-        // Filters UI uses a tree-based structure
-        .c-inspect-properties {
-            // Add extra margin to account for filter-indicator
-            margin-left: 38px;
-        }
+  .c-filter-indication {
+    border-radius: $smallCr;
+    font-size: inherit;
+    padding: $interiorMarginSm $interiorMargin;
+    text-transform: inherit;
+  }
+  .c-filter-tree {
+    // Filters UI uses a tree-based structure
+    .c-inspect-properties {
+      // Add extra margin to account for filter-indicator
+      margin-left: 38px;
     }
+  }
 }
diff --git a/src/plugins/filters/components/global-filters.scss b/src/plugins/filters/components/global-filters.scss
index 8839eae53a6..3e1335665d5 100644
--- a/src/plugins/filters/components/global-filters.scss
+++ b/src/plugins/filters/components/global-filters.scss
@@ -1,34 +1,34 @@
 .c-filter-indication {
-    // Appears as a block element beneath tables
-    @include userSelectNone();
-    background: $colorFilterBg;
-    color: $colorFilterFg;
+  // Appears as a block element beneath tables
+  @include userSelectNone();
+  background: $colorFilterBg;
+  color: $colorFilterFg;
 
-    &:before {
-        font-family: symbolsfont-12px;
-        content: $glyph-icon-filter;
-        margin-right: $interiorMarginSm;
-    }
+  &:before {
+    font-family: symbolsfont-12px;
+    content: $glyph-icon-filter;
+    margin-right: $interiorMarginSm;
+  }
 
-    &--mixed {
-        .c-filter-indication__mixed {
-            font-style: italic;
-        }
+  &--mixed {
+    .c-filter-indication__mixed {
+      font-style: italic;
     }
+  }
 
-    &__label {
-        + .c-filter-indication__label {
-            &:before {
-                content: ', ';
-            }
-        }
+  &__label {
+    + .c-filter-indication__label {
+      &:before {
+        content: ', ';
+      }
     }
+  }
 }
 
 .c-filter-tree-item {
-    &__filter-indicator {
-        color: $colorFilter;
-        width: 1.2em; // Set width explicitly for layout reasons: will either have class icon-filter, or none.
-        flex: 0 0 auto;
-    }
+  &__filter-indicator {
+    color: $colorFilter;
+    width: 1.2em; // Set width explicitly for layout reasons: will either have class icon-filter, or none.
+    flex: 0 0 auto;
+  }
 }
diff --git a/src/plugins/filters/plugin.js b/src/plugins/filters/plugin.js
index 29cfd83a96d..3c8dd46efb1 100644
--- a/src/plugins/filters/plugin.js
+++ b/src/plugins/filters/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,14 +20,12 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    './FiltersInspectorViewProvider'
-], function (
-    FiltersInspectorViewProvider
-) {
-    return function plugin(supportedObjectTypesArray) {
-        return function install(openmct) {
-            openmct.inspectorViews.addProvider(new FiltersInspectorViewProvider(openmct, supportedObjectTypesArray));
-        };
-    };
-});
+import FiltersInspectorViewProvider from './FiltersInspectorViewProvider.js';
+
+export default function plugin(supportedObjectTypesArray) {
+  return function install(openmct) {
+    openmct.inspectorViews.addProvider(
+      new FiltersInspectorViewProvider(openmct, supportedObjectTypesArray)
+    );
+  };
+}
diff --git a/src/plugins/flexibleLayout/components/ContainerComponent.vue b/src/plugins/flexibleLayout/components/ContainerComponent.vue
new file mode 100644
index 00000000000..a0d03acc466
--- /dev/null
+++ b/src/plugins/flexibleLayout/components/ContainerComponent.vue
@@ -0,0 +1,223 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div
+    class="c-fl-container"
+    :style="[{ 'flex-basis': sizeString }]"
+    :class="{ 'is-empty': !frames.length }"
+    role="grid"
+  >
+    <div
+      v-show="isEditing"
+      class="c-fl-container__header"
+      draggable="true"
+      role="columnheader"
+      :aria-label="`Container Handle ${index + 1}`"
+      @dragstart="startContainerDrag"
+    >
+      <span class="c-fl-container__size-indicator">{{ sizeString }}</span>
+    </div>
+
+    <drop-hint
+      class="c-fl-frame__drop-hint"
+      :index="-1"
+      :allow-drop="allowDrop"
+      @object-drop-to="moveOrCreateNewFrame"
+    />
+
+    <div role="row" class="c-fl-container__frames-holder">
+      <template v-for="(frame, i) in frames" :key="frame.id">
+        <frame-component
+          class="c-fl-container__frame"
+          :frame="frame"
+          :index="i"
+          role="gridcell"
+          :aria-label="`Container Frame ${index}`"
+          :container-index="index"
+          :is-editing="isEditing"
+          :object-path="objectPath"
+        />
+
+        <drop-hint
+          class="c-fl-frame__drop-hint"
+          :index="i"
+          :allow-drop="allowDrop"
+          @object-drop-to="moveOrCreateNewFrame"
+        />
+
+        <resize-handle
+          v-if="i !== frames.length - 1"
+          :index="i"
+          :drag-orientation="rowsLayout ? 'horizontal' : 'vertical'"
+          :is-editing="isEditing"
+          @init-move="startFrameResizing"
+          @move="frameResizing"
+          @end-move="endFrameResizing"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import DropHint from './DropHint.vue';
+import FrameComponent from './FrameComponent.vue';
+import ResizeHandle from './ResizeHandle.vue';
+
+const MIN_FRAME_SIZE = 5;
+
+export default {
+  components: {
+    FrameComponent,
+    ResizeHandle,
+    DropHint
+  },
+  inject: ['openmct'],
+  props: {
+    container: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    },
+    rowsLayout: Boolean,
+    isEditing: {
+      type: Boolean,
+      default: false
+    },
+    locked: {
+      type: Boolean,
+      default: false
+    },
+    objectPath: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: ['new-frame', 'move-frame', 'persist'],
+  computed: {
+    frames() {
+      return this.container.frames;
+    },
+    sizeString() {
+      return `${Math.round(this.container.size)}%`;
+    }
+  },
+  mounted() {
+    let context = {
+      item: this.$parent.domainObject,
+      type: 'container',
+      containerId: this.container.id
+    };
+
+    this.unsubscribeSelection = this.openmct.selection.selectable(this.$el, context, false);
+  },
+  beforeUnmount() {
+    this.unsubscribeSelection();
+  },
+  methods: {
+    allowDrop(event, index) {
+      if (this.locked) {
+        return false;
+      }
+
+      if (event.dataTransfer.types.includes('openmct/domain-object-path')) {
+        return true;
+      }
+
+      let frameId = event.dataTransfer.getData('frameid');
+      let containerIndex = Number(event.dataTransfer.getData('containerIndex'));
+
+      if (!frameId) {
+        return false;
+      }
+
+      if (containerIndex === this.index) {
+        let frame = this.container.frames.filter((f) => f.id === frameId)[0];
+        let framePos = this.container.frames.indexOf(frame);
+
+        if (index === -1) {
+          return framePos !== 0;
+        } else {
+          return framePos !== index && framePos - 1 !== index;
+        }
+      } else {
+        return true;
+      }
+    },
+    moveOrCreateNewFrame(insertIndex, event) {
+      if (event.dataTransfer.types.includes('openmct/domain-object-path')) {
+        this.$emit('new-frame', this.index, insertIndex);
+
+        return;
+      }
+
+      // move frame.
+      let frameId = event.dataTransfer.getData('frameid');
+      let containerIndex = Number(event.dataTransfer.getData('containerIndex'));
+      this.$emit('move-frame', this.index, insertIndex, frameId, containerIndex);
+    },
+    startFrameResizing(index) {
+      let beforeFrame = this.frames[index];
+      let afterFrame = this.frames[index + 1];
+
+      this.maxMoveSize = beforeFrame.size + afterFrame.size;
+    },
+    frameResizing(index, delta, event) {
+      let percentageMoved = Math.round((delta / this.getElSize()) * 100);
+      let beforeFrame = this.frames[index];
+      let afterFrame = this.frames[index + 1];
+
+      beforeFrame.size = this.getFrameSize(beforeFrame.size + percentageMoved);
+      afterFrame.size = this.getFrameSize(afterFrame.size - percentageMoved);
+    },
+    endFrameResizing(index, event) {
+      this.persist();
+    },
+    getElSize() {
+      if (this.rowsLayout) {
+        return this.$el.offsetWidth;
+      } else {
+        return this.$el.offsetHeight;
+      }
+    },
+    getFrameSize(size) {
+      if (size < MIN_FRAME_SIZE) {
+        return MIN_FRAME_SIZE;
+      } else if (size > this.maxMoveSize - MIN_FRAME_SIZE) {
+        return this.maxMoveSize - MIN_FRAME_SIZE;
+      } else {
+        return size;
+      }
+    },
+    persist() {
+      this.$emit('persist', this.index);
+    },
+    startContainerDrag(event) {
+      event.dataTransfer.setData('containerid', this.container.id);
+    }
+  }
+};
+</script>
diff --git a/src/plugins/flexibleLayout/components/DropHint.vue b/src/plugins/flexibleLayout/components/DropHint.vue
new file mode 100644
index 00000000000..b43479ead15
--- /dev/null
+++ b/src/plugins/flexibleLayout/components/DropHint.vue
@@ -0,0 +1,84 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div v-show="isValidTarget">
+    <div
+      class="c-drop-hint c-drop-hint--always-show"
+      :class="{ 'is-mouse-over': isMouseOver }"
+      @dragover.prevent
+      @dragenter="dragenter"
+      @dragleave="dragleave"
+      @drop="dropHandler"
+    ></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    index: {
+      type: Number,
+      required: true
+    },
+    allowDrop: {
+      type: Function,
+      required: true
+    }
+  },
+  emits: ['object-drop-to'],
+  data() {
+    return {
+      isMouseOver: false,
+      isValidTarget: false
+    };
+  },
+  mounted() {
+    document.addEventListener('dragstart', this.dragstart);
+    document.addEventListener('dragend', this.dragend);
+    document.addEventListener('drop', this.dragend);
+  },
+  unmounted() {
+    document.removeEventListener('dragstart', this.dragstart);
+    document.removeEventListener('dragend', this.dragend);
+    document.removeEventListener('drop', this.dragend);
+  },
+  methods: {
+    dragenter() {
+      this.isMouseOver = true;
+    },
+    dragleave() {
+      this.isMouseOver = false;
+    },
+    dropHandler(event) {
+      this.$emit('object-drop-to', this.index, event);
+      this.isValidTarget = false;
+    },
+    dragstart(event) {
+      this.isValidTarget = this.allowDrop(event, this.index);
+    },
+    dragend() {
+      this.isValidTarget = false;
+    }
+  }
+};
+</script>
diff --git a/src/plugins/flexibleLayout/components/FlexibleLayout.vue b/src/plugins/flexibleLayout/components/FlexibleLayout.vue
new file mode 100644
index 00000000000..7d198ac906d
--- /dev/null
+++ b/src/plugins/flexibleLayout/components/FlexibleLayout.vue
@@ -0,0 +1,411 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-fl">
+    <div id="js-fl-drag-ghost" class="c-fl__drag-ghost"></div>
+
+    <div v-if="allContainersAreEmpty" class="c-fl__empty">
+      <span class="c-fl__empty-message">This Flexible Layout is currently empty</span>
+    </div>
+
+    <div
+      class="c-fl__container-holder u-style-receiver js-style-receiver"
+      :class="{
+        'c-fl--rows': rowsLayout === true
+      }"
+      :aria-label="`Flexible Layout ${rowsLayout ? 'Row' : 'Column'}`"
+    >
+      <template v-for="(container, index) in containers" :key="`component-${container.id}`">
+        <drop-hint
+          v-if="index === 0 && containers.length > 1"
+          class="c-fl-frame__drop-hint"
+          :index="-1"
+          :allow-drop="allowContainerDrop"
+          @object-drop-to="moveContainer"
+        />
+
+        <container-component
+          class="c-fl__container"
+          :index="index"
+          :container="container"
+          :rows-layout="rowsLayout"
+          :is-editing="isEditing"
+          :locked="domainObject.locked"
+          :object-path="objectPath"
+          @move-frame="moveFrame"
+          @new-frame="setFrameLocation"
+          @persist="persist"
+        />
+
+        <resize-handle
+          v-if="index !== containers.length - 1"
+          :index="index"
+          :drag-orientation="rowsLayout ? 'vertical' : 'horizontal'"
+          :is-editing="isEditing"
+          @init-move="startContainerResizing"
+          @move="containerResizing"
+          @end-move="endContainerResizing"
+        />
+
+        <drop-hint
+          v-if="containers.length > 1"
+          class="c-fl-frame__drop-hint"
+          :index="index"
+          :allow-drop="allowContainerDrop"
+          @object-drop-to="moveContainer"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import Container from '../utils/container.js';
+import Frame from '../utils/frame.js';
+import ContainerComponent from './ContainerComponent.vue';
+import DropHint from './DropHint.vue';
+import ResizeHandle from './ResizeHandle.vue';
+
+const MIN_CONTAINER_SIZE = 5;
+
+// Resize items so that newItem fits proportionally (newItem must be an element
+// of items).  If newItem does not have a size or is sized at 100%, newItem will
+// have size set to 1/n * 100, where n is the total number of items.
+function sizeItems(items, newItem) {
+  if (items.length === 1) {
+    newItem.size = 100;
+  } else {
+    if (!newItem.size || newItem.size === 100) {
+      newItem.size = Math.round(100 / items.length);
+    }
+
+    let oldItems = items.filter((item) => item !== newItem);
+    // Resize oldItems to fit inside remaining space;
+    let remainder = 100 - newItem.size;
+    oldItems.forEach((item) => {
+      item.size = Math.round((item.size * remainder) / 100);
+    });
+    // Ensure items add up to 100 in case of rounding error.
+    let total = items.reduce((t, item) => t + item.size, 0);
+    let excess = Math.round(100 - total);
+    oldItems[oldItems.length - 1].size += excess;
+  }
+}
+
+// Scales items proportionally so total is equal to 100.  Assumes that an item
+// was removed from array.
+function sizeToFill(items) {
+  if (items.length === 0) {
+    return;
+  }
+
+  let oldTotal = items.reduce((total, item) => total + item.size, 0);
+  items.forEach((item) => {
+    item.size = Math.round((item.size * 100) / oldTotal);
+  });
+  // Ensure items add up to 100 in case of rounding error.
+  let total = items.reduce((t, item) => t + item.size, 0);
+  let excess = Math.round(100 - total);
+  items[items.length - 1].size += excess;
+}
+
+export default {
+  components: {
+    ContainerComponent,
+    ResizeHandle,
+    DropHint
+  },
+  inject: ['openmct', 'objectPath', 'domainObject'],
+  props: {
+    isEditing: Boolean
+  },
+  data() {
+    return {
+      newFrameLocation: [],
+      identifierMap: {},
+      containers: this.domainObject.configuration.containers,
+      rowsLayout: this.domainObject.configuration.rowsLayout
+    };
+  },
+  computed: {
+    layoutDirectionStr() {
+      if (this.rowsLayout) {
+        return 'Rows';
+      } else {
+        return 'Columns';
+      }
+    },
+    allContainersAreEmpty() {
+      return this.containers.every((container) => container.frames.length === 0);
+    }
+  },
+  created() {
+    this.buildIdentifierMap();
+    this.composition = this.openmct.composition.get(this.domainObject);
+    this.composition.on('remove', this.removeChildObject);
+    this.composition.on('add', this.addFrame);
+    this.composition.load();
+    this.unObserveContainers = this.openmct.objects.observe(
+      this.domainObject,
+      'configuration.containers',
+      (containers) => {
+        this.containers = containers;
+      }
+    );
+    this.unObserveRowsLayout = this.openmct.objects.observe(
+      this.domainObject,
+      'configuration.rowsLayout',
+      (rowsLayout) => {
+        this.rowsLayout = rowsLayout;
+      }
+    );
+  },
+  beforeUnmount() {
+    this.composition.off('remove', this.removeChildObject);
+    this.composition.off('add', this.addFrame);
+
+    if (this.unObserveContainers) {
+      this.unObserveContainers();
+    }
+
+    if (this.unObserveRowsLayout) {
+      this.unObserveRowsLayout();
+    }
+  },
+  methods: {
+    containsObject(identifier) {
+      if ('composition' in this.domainObject) {
+        return this.domainObject.composition.some((childId) =>
+          this.openmct.objects.areIdsEqual(childId, identifier)
+        );
+      }
+
+      return false;
+    },
+    buildIdentifierMap() {
+      this.containers.forEach((container) => {
+        container.frames.forEach((frame) => {
+          if (!this.containsObject(frame.domainObjectIdentifier)) {
+            this.removeChildObject(frame.domainObjectIdentifier);
+
+            return;
+          }
+
+          const keystring = this.openmct.objects.makeKeyString(frame.domainObjectIdentifier);
+          this.identifierMap[keystring] = true;
+        });
+      });
+    },
+    addContainer() {
+      let container = new Container();
+      this.containers.push(container);
+      sizeItems(this.containers, container);
+      this.persist();
+    },
+    deleteContainer(containerId) {
+      let container = this.containers.filter((c) => c.id === containerId)[0];
+      let containerIndex = this.containers.indexOf(container);
+
+      // remove associated domainObjects from composition
+      container.frames.forEach((f) => {
+        this.removeFromComposition(f.domainObjectIdentifier);
+      });
+
+      this.containers.splice(containerIndex, 1);
+
+      // add a container when there are no containers in the FL,
+      // to prevent user from not being able to add a frame via
+      // drag and drop.
+      if (this.containers.length === 0) {
+        this.containers.push(new Container(100));
+      }
+
+      sizeToFill(this.containers);
+      this.setSelectionToParent();
+      this.persist();
+    },
+    moveFrame(toContainerIndex, toFrameIndex, frameId, fromContainerIndex) {
+      let toContainer = this.containers[toContainerIndex];
+      let fromContainer = this.containers[fromContainerIndex];
+      let frame = fromContainer.frames.filter((f) => f.id === frameId)[0];
+      let fromIndex = fromContainer.frames.indexOf(frame);
+      fromContainer.frames.splice(fromIndex, 1);
+      sizeToFill(fromContainer.frames);
+      toContainer.frames.splice(toFrameIndex + 1, 0, frame);
+      sizeItems(toContainer.frames, frame);
+      this.persist();
+    },
+    setFrameLocation(containerIndex, insertFrameIndex) {
+      this.newFrameLocation = [containerIndex, insertFrameIndex];
+    },
+    addFrame(domainObject) {
+      let keystring = this.openmct.objects.makeKeyString(domainObject.identifier);
+
+      if (!this.identifierMap[keystring]) {
+        let containerIndex = this.newFrameLocation.length ? this.newFrameLocation[0] : 0;
+        let container = this.containers[containerIndex];
+        let frameIndex = this.newFrameLocation.length
+          ? this.newFrameLocation[1]
+          : container.frames.length;
+        let frame = new Frame(domainObject.identifier);
+
+        container.frames.splice(frameIndex + 1, 0, frame);
+        sizeItems(container.frames, frame);
+
+        this.newFrameLocation = [];
+        this.persist(containerIndex);
+        this.identifierMap[keystring] = true;
+      }
+    },
+    deleteFrame(frameId) {
+      let container = this.containers.filter((c) => c.frames.some((f) => f.id === frameId))[0];
+      let frame = container.frames.filter((f) => f.id === frameId)[0];
+
+      this.removeFromComposition(frame.domainObjectIdentifier);
+
+      this.$nextTick().then(() => {
+        sizeToFill(container.frames);
+        this.setSelectionToParent();
+      });
+    },
+    removeFromComposition(identifier) {
+      this.composition.remove({ identifier });
+    },
+    setSelectionToParent() {
+      this.$el.click();
+    },
+    allowContainerDrop(event, index) {
+      if (!event.dataTransfer.types.includes('containerid')) {
+        return false;
+      }
+
+      if (!this.isEditing) {
+        return false;
+      }
+
+      let containerId = event.dataTransfer.getData('containerid');
+      let container = this.containers.filter((c) => c.id === containerId)[0];
+      let containerPos = this.containers.indexOf(container);
+
+      if (index === -1) {
+        return containerPos !== 0;
+      } else {
+        return containerPos !== index && containerPos - 1 !== index;
+      }
+    },
+    persist(index) {
+      this.startTransaction();
+      if (index) {
+        this.openmct.objects.mutate(
+          this.domainObject,
+          `configuration.containers[${index}]`,
+          this.containers[index]
+        );
+      } else {
+        this.openmct.objects.mutate(this.domainObject, 'configuration.containers', this.containers);
+      }
+
+      return this.endTransaction();
+    },
+    startContainerResizing(index) {
+      let beforeContainer = this.containers[index];
+      let afterContainer = this.containers[index + 1];
+
+      this.maxMoveSize = beforeContainer.size + afterContainer.size;
+    },
+    containerResizing(index, delta, event) {
+      let percentageMoved = Math.round((delta / this.getElSize()) * 100);
+      let beforeContainer = this.containers[index];
+      let afterContainer = this.containers[index + 1];
+
+      beforeContainer.size = this.getContainerSize(beforeContainer.size + percentageMoved);
+      afterContainer.size = this.getContainerSize(afterContainer.size - percentageMoved);
+    },
+    endContainerResizing(event) {
+      this.persist();
+    },
+    getElSize() {
+      if (this.rowsLayout) {
+        return this.$el.offsetHeight;
+      } else {
+        return this.$el.offsetWidth;
+      }
+    },
+    getContainerSize(size) {
+      if (size < MIN_CONTAINER_SIZE) {
+        return MIN_CONTAINER_SIZE;
+      } else if (size > this.maxMoveSize - MIN_CONTAINER_SIZE) {
+        return this.maxMoveSize - MIN_CONTAINER_SIZE;
+      } else {
+        return size;
+      }
+    },
+    updateDomainObject(newDomainObject) {
+      this.domainObject = newDomainObject;
+    },
+    moveContainer(toIndex, event) {
+      let containerId = event.dataTransfer.getData('containerid');
+      let container = this.containers.filter((c) => c.id === containerId)[0];
+      let fromIndex = this.containers.indexOf(container);
+      this.containers.splice(fromIndex, 1);
+      if (fromIndex > toIndex) {
+        this.containers.splice(toIndex + 1, 0, container);
+      } else {
+        this.containers.splice(toIndex, 0, container);
+      }
+
+      this.persist();
+    },
+    removeChildObject(identifier) {
+      let removeIdentifier = this.openmct.objects.makeKeyString(identifier);
+
+      this.identifierMap[removeIdentifier] = undefined;
+      delete this.identifierMap[removeIdentifier];
+
+      this.containers.forEach((container) => {
+        container.frames = container.frames.filter((frame) => {
+          let frameIdentifier = this.openmct.objects.makeKeyString(frame.domainObjectIdentifier);
+
+          return removeIdentifier !== frameIdentifier;
+        });
+      });
+
+      this.persist();
+    },
+    startTransaction() {
+      if (!this.openmct.objects.isTransactionActive()) {
+        this.transaction = this.openmct.objects.startTransaction();
+      }
+    },
+    async endTransaction() {
+      if (!this.transaction) {
+        return;
+      }
+
+      await this.transaction.commit();
+      this.openmct.objects.endTransaction();
+      this.transaction = null;
+    }
+  }
+};
+</script>
diff --git a/src/plugins/flexibleLayout/components/FrameComponent.vue b/src/plugins/flexibleLayout/components/FrameComponent.vue
new file mode 100644
index 00000000000..6936b27a577
--- /dev/null
+++ b/src/plugins/flexibleLayout/components/FrameComponent.vue
@@ -0,0 +1,182 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div
+    class="c-fl-frame"
+    :style="{
+      'flex-basis': `${frame.size}%`
+    }"
+  >
+    <div
+      ref="frame"
+      class="c-frame c-fl-frame__drag-wrapper is-selectable u-inspectable is-moveable"
+      :draggable="draggable"
+      :aria-label="frameLabel"
+      role="group"
+      @dragstart="initDrag"
+    >
+      <object-frame
+        v-if="domainObject"
+        ref="objectFrame"
+        :domain-object="domainObject"
+        :object-path="currentObjectPath"
+        :has-frame="hasFrame"
+        :show-edit-view="false"
+      />
+
+      <div
+        v-if="isEditing"
+        v-show="frame.size && frame.size < 100"
+        class="c-fl-frame__size-indicator"
+      >
+        {{ frame.size }}%
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ObjectFrame from '../../../ui/components/ObjectFrame.vue';
+
+export default {
+  components: {
+    ObjectFrame
+  },
+  inject: ['openmct'],
+  props: {
+    frame: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    },
+    containerIndex: {
+      type: Number,
+      required: true
+    },
+    isEditing: {
+      type: Boolean,
+      default: false
+    },
+    objectPath: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      domainObject: undefined,
+      currentObjectPath: undefined
+    };
+  },
+  computed: {
+    hasFrame() {
+      return !this.frame.noFrame;
+    },
+    draggable() {
+      return this.isEditing;
+    },
+    frameLabel() {
+      return `${this.domainObject?.name} Frame` || 'Frame';
+    }
+  },
+  mounted() {
+    if (this.frame.domainObjectIdentifier) {
+      if (this.openmct.objects.supportsMutation(this.frame.domainObjectIdentifier)) {
+        this.domainObjectPromise = this.openmct.objects.getMutable(
+          this.frame.domainObjectIdentifier
+        );
+      } else {
+        this.domainObjectPromise = this.openmct.objects.get(this.frame.domainObjectIdentifier);
+      }
+
+      this.domainObjectPromise.then((object) => {
+        this.setDomainObject(object);
+      });
+    }
+
+    this.dragGhost = document.getElementById('js-fl-drag-ghost');
+  },
+  beforeUnmount() {
+    if (this.domainObjectPromise) {
+      this.domainObjectPromise.then(() => {
+        if (this?.domainObject?.isMutable) {
+          this.openmct.objects.destroyMutable(this.domainObject);
+        }
+      });
+    } else if (this?.domainObject?.isMutable) {
+      this.openmct.objects.destroyMutable(this.domainObject);
+    }
+
+    if (this.unsubscribeSelection) {
+      this.unsubscribeSelection();
+    }
+  },
+  methods: {
+    setDomainObject(object) {
+      this.domainObject = object;
+      this.currentObjectPath = [object].concat(this.objectPath);
+      this.setSelection();
+    },
+    setSelection() {
+      this.$nextTick(() => {
+        if (this.$refs && this.$refs.objectFrame) {
+          let childContext = this.$refs.objectFrame.getSelectionContext();
+          childContext.item = this.domainObject;
+          childContext.type = 'frame';
+          childContext.frameId = this.frame.id;
+          if (this.unsubscribeSelection) {
+            this.unsubscribeSelection();
+          }
+          this.unsubscribeSelection = this.openmct.selection.selectable(
+            this.$refs.frame,
+            childContext,
+            false
+          );
+        }
+      });
+    },
+    initDrag(event) {
+      let type = this.openmct.types.get(this.domainObject.type);
+      let iconClass = type.definition ? type.definition.cssClass : 'icon-object-unknown';
+
+      if (this.dragGhost) {
+        let originalClassName = this.dragGhost.classList[0];
+        this.dragGhost.className = '';
+        this.dragGhost.classList.add(originalClassName, iconClass);
+        this.dragGhost.textContent = '';
+        const span = document.createElement('span');
+        span.textContent = this.domainObject.name;
+        this.dragGhost.appendChild(span);
+
+        event.dataTransfer.setDragImage(this.dragGhost, 0, 0);
+      }
+
+      event.dataTransfer.setData('frameid', this.frame.id);
+      event.dataTransfer.setData('containerIndex', this.containerIndex);
+    }
+  }
+};
+</script>
diff --git a/src/plugins/flexibleLayout/components/ResizeHandle.vue b/src/plugins/flexibleLayout/components/ResizeHandle.vue
new file mode 100644
index 00000000000..97b23268563
--- /dev/null
+++ b/src/plugins/flexibleLayout/components/ResizeHandle.vue
@@ -0,0 +1,111 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div
+    v-show="isEditing && !isDragging"
+    class="c-fl-frame__resize-handle"
+    :class="[dragOrientation]"
+    :aria-grabbed="isGrabbed"
+    @mousedown="mousedown"
+  ></div>
+</template>
+
+<script>
+export default {
+  props: {
+    dragOrientation: {
+      type: String,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    },
+    isEditing: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['move', 'init-move', 'end-move'],
+  data() {
+    return {
+      initialPos: 0,
+      isDragging: false,
+      isGrabbed: false
+    };
+  },
+  mounted() {
+    document.addEventListener('dragstart', this.setDragging);
+    document.addEventListener('dragend', this.unsetDragging);
+    document.addEventListener('drop', this.unsetDragging);
+  },
+  beforeUnmount() {
+    document.removeEventListener('dragstart', this.setDragging);
+    document.removeEventListener('dragend', this.unsetDragging);
+    document.removeEventListener('drop', this.unsetDragging);
+  },
+  methods: {
+    mousedown(event) {
+      event.preventDefault();
+
+      this.isGrabbed = true;
+      this.$emit('init-move', this.index);
+
+      document.body.addEventListener('mousemove', this.mousemove);
+      document.body.addEventListener('mouseup', this.mouseup);
+    },
+    mousemove(event) {
+      event.preventDefault();
+
+      let elSize;
+      let mousePos;
+      let delta;
+
+      if (this.dragOrientation === 'horizontal') {
+        elSize = this.$el.getBoundingClientRect().x;
+        mousePos = event.clientX;
+      } else {
+        elSize = this.$el.getBoundingClientRect().y;
+        mousePos = event.clientY;
+      }
+
+      delta = mousePos - elSize;
+
+      this.$emit('move', this.index, delta, event);
+    },
+    mouseup(event) {
+      this.isGrabbed = false;
+      this.$emit('end-move', event);
+
+      document.body.removeEventListener('mousemove', this.mousemove);
+      document.body.removeEventListener('mouseup', this.mouseup);
+    },
+    setDragging(event) {
+      this.isDragging = true;
+    },
+    unsetDragging(event) {
+      this.isDragging = false;
+    }
+  }
+};
+</script>
diff --git a/src/plugins/flexibleLayout/components/container.vue b/src/plugins/flexibleLayout/components/container.vue
deleted file mode 100644
index ff51918f1f0..00000000000
--- a/src/plugins/flexibleLayout/components/container.vue
+++ /dev/null
@@ -1,233 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-<template>
-<div
-    class="c-fl-container"
-    :style="[{'flex-basis': sizeString}]"
-    :class="{'is-empty': !frames.length}"
->
-    <div
-        v-show="isEditing"
-        class="c-fl-container__header"
-        draggable="true"
-        @dragstart="startContainerDrag"
-    >
-        <span class="c-fl-container__size-indicator">{{ sizeString }}</span>
-    </div>
-
-    <drop-hint
-        class="c-fl-frame__drop-hint"
-        :index="-1"
-        :allow-drop="allowDrop"
-        @object-drop-to="moveOrCreateNewFrame"
-    />
-
-    <div class="c-fl-container__frames-holder">
-        <template
-            v-for="(frame, i) in frames"
-        >
-            <frame-component
-                :key="frame.id"
-                class="c-fl-container__frame"
-                :frame="frame"
-                :index="i"
-                :container-index="index"
-                :is-editing="isEditing"
-                :object-path="objectPath"
-            />
-
-            <drop-hint
-                :key="i"
-                class="c-fl-frame__drop-hint"
-                :index="i"
-                :allow-drop="allowDrop"
-                @object-drop-to="moveOrCreateNewFrame"
-            />
-
-            <resize-handle
-                v-if="(i !== frames.length - 1)"
-                :key="i"
-                :index="i"
-                :orientation="rowsLayout ? 'horizontal' : 'vertical'"
-                :is-editing="isEditing"
-                @init-move="startFrameResizing"
-                @move="frameResizing"
-                @end-move="endFrameResizing"
-            />
-        </template>
-    </div>
-</div>
-</template>
-
-<script>
-import FrameComponent from './frame.vue';
-import ResizeHandle from './resizeHandle.vue';
-import DropHint from './dropHint.vue';
-
-const MIN_FRAME_SIZE = 5;
-
-export default {
-    components: {
-        FrameComponent,
-        ResizeHandle,
-        DropHint
-    },
-    inject: ['openmct'],
-    props: {
-        container: {
-            type: Object,
-            required: true
-        },
-        index: {
-            type: Number,
-            required: true
-        },
-        rowsLayout: Boolean,
-        isEditing: {
-            type: Boolean,
-            default: false
-        },
-        locked: {
-            type: Boolean,
-            default: false
-        },
-        objectPath: {
-            type: Array,
-            required: true
-        }
-    },
-    computed: {
-        frames() {
-            return this.container.frames;
-        },
-        sizeString() {
-            return `${Math.round(this.container.size)}%`;
-        }
-    },
-    mounted() {
-        let context = {
-            item: this.$parent.domainObject,
-            addContainer: this.addContainer,
-            type: 'container',
-            containerId: this.container.id
-        };
-
-        this.unsubscribeSelection = this.openmct.selection.selectable(this.$el, context, false);
-    },
-    beforeDestroy() {
-        this.unsubscribeSelection();
-    },
-    methods: {
-        allowDrop(event, index) {
-            if (this.locked) {
-                return false;
-            }
-
-            if (event.dataTransfer.types.includes('openmct/domain-object-path')) {
-                return true;
-            }
-
-            let frameId = event.dataTransfer.getData('frameid');
-            let containerIndex = Number(event.dataTransfer.getData('containerIndex'));
-
-            if (!frameId) {
-                return false;
-            }
-
-            if (containerIndex === this.index) {
-                let frame = this.container.frames.filter((f) => f.id === frameId)[0];
-                let framePos = this.container.frames.indexOf(frame);
-
-                if (index === -1) {
-                    return framePos !== 0;
-                } else {
-                    return framePos !== index && (framePos - 1) !== index;
-                }
-            } else {
-                return true;
-            }
-        },
-        moveOrCreateNewFrame(insertIndex, event) {
-            if (event.dataTransfer.types.includes('openmct/domain-object-path')) {
-                this.$emit(
-                    'new-frame',
-                    this.index,
-                    insertIndex
-                );
-
-                return;
-            }
-
-            // move frame.
-            let frameId = event.dataTransfer.getData('frameid');
-            let containerIndex = Number(event.dataTransfer.getData('containerIndex'));
-            this.$emit(
-                'move-frame',
-                this.index,
-                insertIndex,
-                frameId,
-                containerIndex
-            );
-        },
-        startFrameResizing(index) {
-            let beforeFrame = this.frames[index];
-            let afterFrame = this.frames[index + 1];
-
-            this.maxMoveSize = beforeFrame.size + afterFrame.size;
-        },
-        frameResizing(index, delta, event) {
-            let percentageMoved = Math.round(delta / this.getElSize() * 100);
-            let beforeFrame = this.frames[index];
-            let afterFrame = this.frames[index + 1];
-
-            beforeFrame.size = this.getFrameSize(beforeFrame.size + percentageMoved);
-            afterFrame.size = this.getFrameSize(afterFrame.size - percentageMoved);
-        },
-        endFrameResizing(index, event) {
-            this.persist();
-        },
-        getElSize() {
-            if (this.rowsLayout) {
-                return this.$el.offsetWidth;
-            } else {
-                return this.$el.offsetHeight;
-            }
-        },
-        getFrameSize(size) {
-            if (size < MIN_FRAME_SIZE) {
-                return MIN_FRAME_SIZE;
-            } else if (size > (this.maxMoveSize - MIN_FRAME_SIZE)) {
-                return (this.maxMoveSize - MIN_FRAME_SIZE);
-            } else {
-                return size;
-            }
-        },
-        persist() {
-            this.$emit('persist', this.index);
-        },
-        startContainerDrag(event) {
-            event.dataTransfer.setData('containerid', this.container.id);
-        }
-    }
-};
-</script>
diff --git a/src/plugins/flexibleLayout/components/dropHint.vue b/src/plugins/flexibleLayout/components/dropHint.vue
deleted file mode 100644
index 87858975cb2..00000000000
--- a/src/plugins/flexibleLayout/components/dropHint.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-<template>
-<div v-show="isValidTarget">
-    <div
-        class="c-drop-hint c-drop-hint--always-show"
-        :class="{'is-mouse-over': isMouseOver}"
-        @dragover.prevent
-        @dragenter="dragenter"
-        @dragleave="dragleave"
-        @drop="dropHandler"
-    ></div>
-</div>
-</template>
-
-<script>
-export default {
-    props: {
-        index: {
-            type: Number,
-            required: true
-        },
-        allowDrop: {
-            type: Function,
-            required: true
-        }
-    },
-    data() {
-        return {
-            isMouseOver: false,
-            isValidTarget: false
-        };
-    },
-    mounted() {
-        document.addEventListener('dragstart', this.dragstart);
-        document.addEventListener('dragend', this.dragend);
-        document.addEventListener('drop', this.dragend);
-    },
-    destroyed() {
-        document.removeEventListener('dragstart', this.dragstart);
-        document.removeEventListener('dragend', this.dragend);
-        document.removeEventListener('drop', this.dragend);
-    },
-    methods: {
-        dragenter() {
-            this.isMouseOver = true;
-        },
-        dragleave() {
-            this.isMouseOver = false;
-        },
-        dropHandler(event) {
-            this.$emit('object-drop-to', this.index, event);
-            this.isValidTarget = false;
-        },
-        dragstart(event) {
-            this.isValidTarget = this.allowDrop(event, this.index);
-        },
-        dragend() {
-            this.isValidTarget = false;
-        }
-    }
-};
-</script>
diff --git a/src/plugins/flexibleLayout/components/flexible-layout.scss b/src/plugins/flexibleLayout/components/flexible-layout.scss
index c496422ed1c..70544729041 100644
--- a/src/plugins/flexibleLayout/components/flexible-layout.scss
+++ b/src/plugins/flexibleLayout/components/flexible-layout.scss
@@ -1,316 +1,329 @@
+@use 'sass:math';
+
 @mixin containerGrippy($headerSize, $dir) {
-    position: absolute;
-    $h: 6px;
-    $minorOffset: ($headerSize - $h) / 2;
-    $majorOffset: 35%;
-    content: '';
-    display: block;
-    position: absolute;
-    @include grippy($c: $editFrameSelectedMovebarColorFg, $dir: $dir);
-    @if $dir == 'x' {
-        top: $minorOffset; right: $majorOffset; bottom: $minorOffset; left: $majorOffset;
-    } @else {
-        top: $majorOffset; right: $minorOffset; bottom: $majorOffset; left: $minorOffset;
-    }
+  position: absolute;
+  $h: 6px;
+  $minorOffset: math.div($headerSize - $h, 2);
+  $majorOffset: 35%;
+  content: '';
+  display: block;
+  position: absolute;
+  @include grippy($c: $editFrameSelectedMovebarColorFg, $dir: $dir);
+  @if $dir == 'x' {
+    top: $minorOffset;
+    right: $majorOffset;
+    bottom: $minorOffset;
+    left: $majorOffset;
+  } @else {
+    top: $majorOffset;
+    right: $minorOffset;
+    bottom: $majorOffset;
+    left: $minorOffset;
+  }
 }
 
 .c-fl {
-    @include abs();
+  @include abs();
+  display: flex;
+
+  .temp-toolbar {
+    flex: 0 0 auto;
+  }
+
+  &__container-holder {
     display: flex;
+    flex: 1 1 100%; // Must be 100% to work
+    overflow: auto;
 
-    .temp-toolbar {
-        flex: 0 0 auto;
+    // Columns by default
+    flex-direction: row;
+    > * + * {
+      margin-left: 1px;
     }
 
-    &__container-holder {
-        display: flex;
-        flex: 1 1 100%; // Must be 100% to work
-        overflow: auto;
-
-        // Columns by default
-        flex-direction: row;
-        > * + * { margin-left: 1px; }
-
-        &[class*='--rows'] {
-            flex-direction: column;
-            > * + * {
-                margin-left: 0;
-                margin-top: 1px;
-            }
-        }
+    &[class*='--rows'] {
+      flex-direction: column;
+      > * + * {
+        margin-left: 0;
+        margin-top: 1px;
+      }
     }
+  }
 
-    &__empty {
-        @include abs();
-        background: rgba($colorBodyFg, 0.1);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-
-        > * {
-            font-style: italic;
-            opacity: 0.5;
-        }
+  &__empty {
+    @include abs();
+    background: rgba($colorBodyFg, 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+
+    > * {
+      font-style: italic;
+      opacity: 0.5;
     }
+  }
 
-    &__drag-ghost{
-        background: $colorItemTreeHoverBg;
-        color: $colorItemTreeHoverFg;
-        border-radius: $basicCr;
-        display: flex;
-        align-items: center;
-        padding: $interiorMarginLg $interiorMarginLg * 2;
-        position: absolute;
-        top: -10000px;
-        z-index: 2;
+  &__drag-ghost {
+    background: $colorItemTreeHoverBg;
+    color: $colorItemTreeHoverFg;
+    border-radius: $basicCr;
+    display: flex;
+    align-items: center;
+    padding: $interiorMarginLg $interiorMarginLg * 2;
+    position: absolute;
+    top: -10000px;
+    z-index: 2;
 
-        &:before {
-            color: $colorKey;
-            margin-right: $interiorMarginSm;
-        }
+    &:before {
+      color: $colorKey;
+      margin-right: $interiorMarginSm;
     }
+  }
 }
 
 .c-fl-container {
-    /***************************************************** CONTAINERS */
-    $headerSize: 16px;
-
+  /***************************************************** CONTAINERS */
+  $headerSize: 16px;
+
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+
+  // flex-basis is set with inline style in code, controls size
+  flex-grow: 1;
+  flex-shrink: 1;
+
+  &__header {
+    // Only displayed when editing, controlled via JS
+    background: $editFrameMovebarColorBg;
+    color: $editFrameMovebarColorFg;
+    cursor: move;
     display: flex;
-    flex-direction: column;
-    overflow: auto;
+    align-items: center;
+    flex: 0 0 $headerSize;
 
-    // flex-basis is set with inline style in code, controls size
-    flex-grow: 1;
-    flex-shrink: 1;
+    &:before {
+      // Drag grippy
+      @include containerGrippy($headerSize, 'x');
+      opacity: 0.5;
+    }
+  }
 
-    &__header {
-        // Only displayed when editing, controlled via JS
-        background: $editFrameMovebarColorBg;
-        color: $editFrameMovebarColorFg;
-        cursor: move;
-        display: flex;
-        align-items: center;
-        flex: 0 0 $headerSize;
+  &__size-indicator {
+    position: absolute;
+    display: inline-block;
+    right: $interiorMargin;
+  }
+
+  &__frames-holder {
+    display: flex;
+    flex: 1 1 100%; // Must be 100% to work
+    flex-direction: column; // Default
+    align-content: stretch;
+    align-items: stretch;
+    overflow: hidden; // This sucks, but doing in the short-term
+  }
+
+  .is-editing & {
+    &:hover {
+      .c-fl-container__header {
+        background: $editFrameHovMovebarColorBg;
+        color: $editFrameHovMovebarColorFg;
 
         &:before {
-            // Drag grippy
-            @include containerGrippy($headerSize, 'x');
-            opacity: 0.5;
+          opacity: 0.75;
         }
+      }
     }
 
-    &__size-indicator {
-        position: absolute;
-        display: inline-block;
-        right: $interiorMargin;
-    }
-
-    &__frames-holder {
-        display: flex;
-        flex: 1 1 100%; // Must be 100% to work
-        flex-direction: column; // Default
-        align-content: stretch;
-        align-items: stretch;
-        overflow: hidden; // This sucks, but doing in the short-term
-    }
+    &[s-selected] {
+      border: $editFrameSelectedBorder;
 
-    .is-editing & {
-        &:hover {
-            .c-fl-container__header {
-                background: $editFrameHovMovebarColorBg;
-                color: $editFrameHovMovebarColorFg;
-
-                &:before {
-                    opacity: .75;
-                }
-            }
-        }
-
-        &[s-selected] {
-            border: $editFrameSelectedBorder;
-
-            .c-fl-container__header {
-                background:$editFrameSelectedMovebarColorBg;
-                color: $editFrameSelectedMovebarColorFg;
-                &:before {
-                    // Grippy
-                    opacity: 1;
-                }
-            }
+      .c-fl-container__header {
+        background: $editFrameSelectedMovebarColorBg;
+        color: $editFrameSelectedMovebarColorFg;
+        &:before {
+          // Grippy
+          opacity: 1;
         }
+      }
     }
 
-    /****** THEIR FRAMES */
-    // Frames get styled here because this is particular to their presence in this layout type
-    .c-fl-frame {
-        @include browserPrefix(margin-collapse, collapse);
+    [s-selected].c-fl-frame__drag-wrapper {
+      border: $editFrameSelectedBorder;
     }
+  }
 
-    /****** ROWS LAYOUT */
-    .c-fl--rows & {
-        // Layout is rows
-        flex-direction: row;
+  /****** THEIR FRAMES */
+  // Frames get styled here because this is particular to their presence in this layout type
+  .c-fl-frame {
+    @include browserPrefix(margin-collapse, collapse);
+  }
 
-        &__header {
-            flex-basis: $headerSize;
-            overflow: hidden;
+  /****** ROWS LAYOUT */
+  .c-fl--rows & {
+    // Layout is rows
+    flex-direction: row;
 
-            &:before {
-                // Grippy
-                @include containerGrippy($headerSize, 'y');
-            }
-        }
+    &__header {
+      flex-basis: $headerSize;
+      overflow: hidden;
 
-        &__size-indicator {
-            right: 0;
-            top: $interiorMargin;
-            transform-origin: top right;
-            transform: rotate(-90deg) translateY(-100%);
-        }
+      &:before {
+        // Grippy
+        @include containerGrippy($headerSize, 'y');
+      }
+    }
 
-        &__frames-holder {
-            flex-direction: row;
-        }
+    &__size-indicator {
+      right: 0;
+      top: $interiorMargin;
+      transform-origin: top right;
+      transform: rotate(-90deg) translateY(-100%);
     }
+
+    &__frames-holder {
+      flex-direction: row;
+    }
+  }
 }
 
 .c-fl-frame {
-    /***************************************************** CONTAINER FRAMES */
-    $sizeIndicatorM: 16px;
-    $dropHintSize: 15px;
+  /***************************************************** CONTAINER FRAMES */
+  $sizeIndicatorM: 16px;
+  $dropHintSize: 15px;
 
-    display: flex;
-    flex: 1 1;
-    flex-direction: column;
-    overflow: hidden; // Needed to allow frames to collapse when sized down
+  display: flex;
+  flex: 1 1;
+  flex-direction: column;
+  overflow: hidden; // Needed to allow frames to collapse when sized down
 
-    &__drag-wrapper {
-        flex: 1 1 auto;
-        overflow: auto;
+  &__drag-wrapper {
+    flex: 1 1 auto;
+    overflow: auto;
 
-        .is-editing & {
-            > * {
-                pointer-events: none;
-            }
-        }
+    .is-editing & {
+      > * {
+        pointer-events: none;
+      }
     }
-
-    &__header {
-        flex: 0 0 auto;
-        margin-bottom: $interiorMargin;
+  }
+
+  &__header {
+    flex: 0 0 auto;
+    margin-bottom: $interiorMargin;
+  }
+
+  &__size-indicator {
+    $size: 35px;
+
+    @include ellipsize();
+    background: $colorBtnBg;
+    border-top-left-radius: $controlCr;
+    color: $colorBtnFg;
+    display: inline-block;
+    padding: $interiorMarginSm 0;
+    position: absolute;
+    pointer-events: none;
+    text-align: center;
+    width: $size;
+
+    // Changed when layout is different, see below
+    border-top-right-radius: $controlCr;
+    bottom: 1px;
+    right: $sizeIndicatorM;
+  }
+
+  &__drop-hint {
+    flex: 0 0 $dropHintSize;
+    .c-drop-hint {
+      border-radius: $smallCr;
     }
+  }
 
-    &__size-indicator {
-        $size: 35px;
-
-        @include ellipsize();
-        background: $colorBtnBg;
-        border-top-left-radius: $controlCr;
-        color: $colorBtnFg;
-        display: inline-block;
-        padding: $interiorMarginSm 0;
-        position: absolute;
-        pointer-events: none;
-        text-align: center;
-        width: $size;
+  &__resize-handle {
+    $size: 2px;
+    $margin: 3px;
+    $marginHov: 0;
+    $grippyThickness: $size + 6;
+    $grippyLen: $grippyThickness * 2;
 
-        // Changed when layout is different, see below
-        border-top-right-radius: $controlCr;
-        bottom: 1px;
-        right: $sizeIndicatorM;
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 ($margin * 2) + $size;
+
+    &:before {
+      // The visible resize line
+      background-color: $editUIColor;
+      content: '';
+      display: block;
+      flex: 1 1 auto;
+      min-height: $size;
+      min-width: $size;
     }
 
-    &__drop-hint {
-        flex: 0 0 $dropHintSize;
-        .c-drop-hint {
-            border-radius: $smallCr;
-        }
+    &.vertical {
+      padding: $margin $size;
+      &:hover {
+        cursor: row-resize;
+      }
     }
 
-    &__resize-handle {
-        $size: 2px;
-        $margin: 3px;
-        $marginHov: 0;
-        $grippyThickness: $size + 6;
-        $grippyLen: $grippyThickness * 2;
-
-        display: flex;
-        flex-direction: column;
-        flex: 0 0 ($margin * 2) + $size;
-        transition: $transOut;
-
-        &:before {
-            // The visible resize line
-            background: $editUIColor;
-            content: '';
-            display: block;
-            flex: 1 1 auto;
-            min-height: $size; min-width: $size;
-        }
-
-        &.vertical {
-            padding: $margin $size;
-            &:hover{
-                cursor: row-resize;
-            }
-        }
-
-        &.horizontal {
-            padding: $size $margin;
-            &:hover{
-                cursor: col-resize;
-            }
-        }
+    &.horizontal {
+      padding: $size $margin;
+      &:hover {
+        cursor: col-resize;
+      }
+    }
 
-        &:hover {
-            transition: $transOut;
-            &:before {
-                // The visible resize line
-                background: $editUIColorHov;
-            }
-        }
+    &:hover {
+      &:before {
+        // The visible resize line
+        background-color: $editUIColorHov;
+      }
     }
+  }
 
-    // Hide the resize-handles in first and last c-fl-frame elements
-    &:first-child,
-    &:last-child {
-        .c-fl-frame__resize-handle {
-            display: none;
-        }
+  // Hide the resize-handles in first and last c-fl-frame elements
+  &:first-child,
+  &:last-child {
+    .c-fl-frame__resize-handle {
+      display: none;
     }
+  }
 
-    .c-fl--rows & {
-        flex-direction: row;
+  .c-fl--rows & {
+    flex-direction: row;
 
-        &__size-indicator {
-            border-bottom-left-radius: $controlCr;
-            border-top-right-radius: 0;
-            bottom: $sizeIndicatorM;
-            right: 1px;
-        }
+    &__size-indicator {
+      border-bottom-left-radius: $controlCr;
+      border-top-right-radius: 0;
+      bottom: $sizeIndicatorM;
+      right: 1px;
     }
+  }
 
-    &--first-in-container {
-        border: none;
-        flex: 0 0 0;
-        .c-fl-frame__drag-wrapper {
-            display: none;
-        }
+  &--first-in-container {
+    border: none;
+    flex: 0 0 0;
+    .c-fl-frame__drag-wrapper {
+      display: none;
+    }
 
-        &.is-dragging {
-            flex-basis: $dropHintSize;
-        }
+    &.is-dragging {
+      flex-basis: $dropHintSize;
     }
+  }
 
-    .is-empty & {
-        &.c-fl-frame--first-in-container {
-            flex: 1 1 auto;
-        }
+  .is-empty & {
+    &.c-fl-frame--first-in-container {
+      flex: 1 1 auto;
+    }
 
-        &__drop-hint {
-            flex: 1 0 100%;
-            margin: 0;
-        }
+    &__drop-hint {
+      flex: 1 0 100%;
+      margin: 0;
     }
+  }
 }
diff --git a/src/plugins/flexibleLayout/components/flexibleLayout.vue b/src/plugins/flexibleLayout/components/flexibleLayout.vue
deleted file mode 100644
index 72e21ae4875..00000000000
--- a/src/plugins/flexibleLayout/components/flexibleLayout.vue
+++ /dev/null
@@ -1,368 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-<template>
-<div class="c-fl">
-    <div
-        id="js-fl-drag-ghost"
-        class="c-fl__drag-ghost"
-    ></div>
-
-    <div
-        v-if="allContainersAreEmpty"
-        class="c-fl__empty"
-    >
-        <span class="c-fl__empty-message">This Flexible Layout is currently empty</span>
-    </div>
-
-    <div
-        class="c-fl__container-holder"
-        :class="{
-            'c-fl--rows': rowsLayout === true
-        }"
-    >
-        <template v-for="(container, index) in containers">
-            <drop-hint
-                v-if="index === 0 && containers.length > 1"
-                :key="index"
-                class="c-fl-frame__drop-hint"
-                :index="-1"
-                :allow-drop="allowContainerDrop"
-                @object-drop-to="moveContainer"
-            />
-
-            <container-component
-                :key="container.id"
-                class="c-fl__container"
-                :index="index"
-                :container="container"
-                :rows-layout="rowsLayout"
-                :is-editing="isEditing"
-                :locked="domainObject.locked"
-                :object-path="objectPath"
-                @move-frame="moveFrame"
-                @new-frame="setFrameLocation"
-                @persist="persist"
-            />
-
-            <resize-handle
-                v-if="index !== (containers.length - 1)"
-                :key="index"
-                :index="index"
-                :orientation="rowsLayout ? 'vertical' : 'horizontal'"
-                :is-editing="isEditing"
-                @init-move="startContainerResizing"
-                @move="containerResizing"
-                @end-move="endContainerResizing"
-            />
-
-            <drop-hint
-                v-if="containers.length > 1"
-                :key="index"
-                class="c-fl-frame__drop-hint"
-                :index="index"
-                :allow-drop="allowContainerDrop"
-                @object-drop-to="moveContainer"
-            />
-        </template>
-    </div>
-</div>
-</template>
-
-<script>
-import ContainerComponent from './container.vue';
-import Container from '../utils/container';
-import Frame from '../utils/frame';
-import ResizeHandle from './resizeHandle.vue';
-import DropHint from './dropHint.vue';
-
-const MIN_CONTAINER_SIZE = 5;
-
-// Resize items so that newItem fits proportionally (newItem must be an element
-// of items).  If newItem does not have a size or is sized at 100%, newItem will
-// have size set to 1/n * 100, where n is the total number of items.
-function sizeItems(items, newItem) {
-    if (items.length === 1) {
-        newItem.size = 100;
-    } else {
-        if (!newItem.size || newItem.size === 100) {
-            newItem.size = Math.round(100 / items.length);
-        }
-
-        let oldItems = items.filter(item => item !== newItem);
-        // Resize oldItems to fit inside remaining space;
-        let remainder = 100 - newItem.size;
-        oldItems.forEach((item) => {
-            item.size = Math.round(item.size * remainder / 100);
-        });
-        // Ensure items add up to 100 in case of rounding error.
-        let total = items.reduce((t, item) => t + item.size, 0);
-        let excess = Math.round(100 - total);
-        oldItems[oldItems.length - 1].size += excess;
-    }
-}
-
-// Scales items proportionally so total is equal to 100.  Assumes that an item
-// was removed from array.
-function sizeToFill(items) {
-    if (items.length === 0) {
-        return;
-    }
-
-    let oldTotal = items.reduce((total, item) => total + item.size, 0);
-    items.forEach((item) => {
-        item.size = Math.round(item.size * 100 / oldTotal);
-    });
-    // Ensure items add up to 100 in case of rounding error.
-    let total = items.reduce((t, item) => t + item.size, 0);
-    let excess = Math.round(100 - total);
-    items[items.length - 1].size += excess;
-}
-
-export default {
-    components: {
-        ContainerComponent,
-        ResizeHandle,
-        DropHint
-    },
-    inject: ['openmct', 'objectPath', 'layoutObject'],
-    props: {
-        isEditing: Boolean
-    },
-    data() {
-        return {
-            domainObject: this.layoutObject,
-            newFrameLocation: [],
-            identifierMap: {}
-        };
-    },
-    computed: {
-        layoutDirectionStr() {
-            if (this.rowsLayout) {
-                return 'Rows';
-            } else {
-                return 'Columns';
-            }
-        },
-        containers() {
-            return this.domainObject.configuration.containers;
-        },
-        rowsLayout() {
-            return this.domainObject.configuration.rowsLayout;
-        },
-        allContainersAreEmpty() {
-            return this.containers.every(container => container.frames.length === 0);
-        }
-    },
-    mounted() {
-        this.buildIdentifierMap();
-        this.composition = this.openmct.composition.get(this.domainObject);
-        this.composition.on('remove', this.removeChildObject);
-        this.composition.on('add', this.addFrame);
-        this.composition.load();
-    },
-    beforeDestroy() {
-        this.composition.off('remove', this.removeChildObject);
-        this.composition.off('add', this.addFrame);
-    },
-    methods: {
-        buildIdentifierMap() {
-            this.containers.forEach(container => {
-                container.frames.forEach(frame => {
-                    let keystring = this.openmct.objects.makeKeyString(frame.domainObjectIdentifier);
-                    this.identifierMap[keystring] = true;
-                });
-            });
-        },
-        addContainer() {
-            let container = new Container();
-            this.containers.push(container);
-            sizeItems(this.containers, container);
-            this.persist();
-        },
-        deleteContainer(containerId) {
-            let container = this.containers.filter(c => c.id === containerId)[0];
-            let containerIndex = this.containers.indexOf(container);
-
-            /*
-                remove associated domainObjects from composition
-            */
-            container.frames.forEach(f => {
-                this.removeFromComposition(f.domainObjectIdentifier);
-            });
-
-            this.containers.splice(containerIndex, 1);
-
-            /*
-                add a container when there are no containers in the FL,
-                to prevent user from not being able to add a frame via
-                drag and drop.
-            */
-            if (this.containers.length === 0) {
-                this.containers.push(new Container(100));
-            }
-
-            sizeToFill(this.containers);
-            this.setSelectionToParent();
-            this.persist();
-        },
-        moveFrame(toContainerIndex, toFrameIndex, frameId, fromContainerIndex) {
-            let toContainer = this.containers[toContainerIndex];
-            let fromContainer = this.containers[fromContainerIndex];
-            let frame = fromContainer.frames.filter(f => f.id === frameId)[0];
-            let fromIndex = fromContainer.frames.indexOf(frame);
-            fromContainer.frames.splice(fromIndex, 1);
-            sizeToFill(fromContainer.frames);
-            toContainer.frames.splice(toFrameIndex + 1, 0, frame);
-            sizeItems(toContainer.frames, frame);
-            this.persist();
-        },
-        setFrameLocation(containerIndex, insertFrameIndex) {
-            this.newFrameLocation = [containerIndex, insertFrameIndex];
-        },
-        addFrame(domainObject) {
-            let keystring = this.openmct.objects.makeKeyString(domainObject.identifier);
-
-            if (!this.identifierMap[keystring]) {
-                let containerIndex = this.newFrameLocation.length ? this.newFrameLocation[0] : 0;
-                let container = this.containers[containerIndex];
-                let frameIndex = this.newFrameLocation.length ? this.newFrameLocation[1] : container.frames.length;
-                let frame = new Frame(domainObject.identifier);
-
-                container.frames.splice(frameIndex + 1, 0, frame);
-                sizeItems(container.frames, frame);
-
-                this.newFrameLocation = [];
-                this.persist(containerIndex);
-                this.identifierMap[keystring] = true;
-            }
-        },
-        deleteFrame(frameId) {
-            let container = this.containers
-                .filter(c => c.frames.some(f => f.id === frameId))[0];
-            let frame = container
-                .frames
-                .filter((f => f.id === frameId))[0];
-
-            this.removeFromComposition(frame.domainObjectIdentifier);
-
-            this.$nextTick().then(() => {
-                sizeToFill(container.frames);
-                this.setSelectionToParent();
-            });
-        },
-        removeFromComposition(identifier) {
-            this.composition.remove({identifier});
-        },
-        setSelectionToParent() {
-            this.$el.click();
-        },
-        allowContainerDrop(event, index) {
-            if (!event.dataTransfer.types.includes('containerid')) {
-                return false;
-            }
-
-            let containerId = event.dataTransfer.getData('containerid');
-            let container = this.containers.filter((c) => c.id === containerId)[0];
-            let containerPos = this.containers.indexOf(container);
-
-            if (index === -1) {
-                return containerPos !== 0;
-            } else {
-                return containerPos !== index && (containerPos - 1) !== index;
-            }
-        },
-        persist(index) {
-            if (index) {
-                this.openmct.objects.mutate(this.domainObject, `configuration.containers[${index}]`, this.containers[index]);
-            } else {
-                this.openmct.objects.mutate(this.domainObject, 'configuration.containers', this.containers);
-            }
-        },
-        startContainerResizing(index) {
-            let beforeContainer = this.containers[index];
-            let afterContainer = this.containers[index + 1];
-
-            this.maxMoveSize = beforeContainer.size + afterContainer.size;
-        },
-        containerResizing(index, delta, event) {
-            let percentageMoved = Math.round(delta / this.getElSize() * 100);
-            let beforeContainer = this.containers[index];
-            let afterContainer = this.containers[index + 1];
-
-            beforeContainer.size = this.getContainerSize(beforeContainer.size + percentageMoved);
-            afterContainer.size = this.getContainerSize(afterContainer.size - percentageMoved);
-        },
-        endContainerResizing(event) {
-            this.persist();
-        },
-        getElSize() {
-            if (this.rowsLayout) {
-                return this.$el.offsetHeight;
-            } else {
-                return this.$el.offsetWidth;
-            }
-        },
-        getContainerSize(size) {
-            if (size < MIN_CONTAINER_SIZE) {
-                return MIN_CONTAINER_SIZE;
-            } else if (size > (this.maxMoveSize - MIN_CONTAINER_SIZE)) {
-                return (this.maxMoveSize - MIN_CONTAINER_SIZE);
-            } else {
-                return size;
-            }
-        },
-        updateDomainObject(newDomainObject) {
-            this.domainObject = newDomainObject;
-        },
-        moveContainer(toIndex, event) {
-            let containerId = event.dataTransfer.getData('containerid');
-            let container = this.containers.filter(c => c.id === containerId)[0];
-            let fromIndex = this.containers.indexOf(container);
-            this.containers.splice(fromIndex, 1);
-            if (fromIndex > toIndex) {
-                this.containers.splice(toIndex + 1, 0, container);
-            } else {
-                this.containers.splice(toIndex, 0, container);
-            }
-
-            this.persist();
-        },
-        removeChildObject(identifier) {
-            let removeIdentifier = this.openmct.objects.makeKeyString(identifier);
-
-            this.identifierMap[removeIdentifier] = undefined;
-            delete this.identifierMap[removeIdentifier];
-
-            this.containers.forEach(container => {
-                container.frames = container.frames.filter(frame => {
-                    let frameIdentifier = this.openmct.objects.makeKeyString(frame.domainObjectIdentifier);
-
-                    return removeIdentifier !== frameIdentifier;
-                });
-            });
-
-            this.persist();
-        }
-    }
-};
-</script>
diff --git a/src/plugins/flexibleLayout/components/frame.vue b/src/plugins/flexibleLayout/components/frame.vue
deleted file mode 100644
index 4ab902405a6..00000000000
--- a/src/plugins/flexibleLayout/components/frame.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-<template>
-<div
-    class="c-fl-frame"
-    :style="{
-        'flex-basis': `${frame.size}%`
-    }"
->
-    <div
-        ref="frame"
-        class="c-frame c-fl-frame__drag-wrapper is-selectable u-inspectable is-moveable"
-        draggable="true"
-        @dragstart="initDrag"
-    >
-        <object-frame
-            v-if="domainObject"
-            ref="objectFrame"
-            :domain-object="domainObject"
-            :object-path="currentObjectPath"
-            :has-frame="hasFrame"
-            :show-edit-view="false"
-        />
-
-        <div
-            v-if="isEditing"
-            v-show="frame.size && frame.size < 100"
-            class="c-fl-frame__size-indicator"
-        >
-            {{ frame.size }}%
-        </div>
-    </div>
-</div>
-</template>
-
-<script>
-import ObjectFrame from '../../../ui/components/ObjectFrame.vue';
-
-export default {
-    components: {
-        ObjectFrame
-    },
-    inject: ['openmct'],
-    props: {
-        frame: {
-            type: Object,
-            required: true
-        },
-        index: {
-            type: Number,
-            required: true
-        },
-        containerIndex: {
-            type: Number,
-            required: true
-        },
-        isEditing: {
-            type: Boolean,
-            default: false
-        },
-        objectPath: {
-            type: Array,
-            required: true
-        }
-    },
-    data() {
-        return {
-            domainObject: undefined,
-            currentObjectPath: undefined
-        };
-    },
-    computed: {
-        hasFrame() {
-            return !this.frame.noFrame;
-        }
-    },
-    mounted() {
-        if (this.frame.domainObjectIdentifier) {
-            this.openmct.objects.get(this.frame.domainObjectIdentifier).then((object) => {
-                this.setDomainObject(object);
-            });
-        }
-
-        this.dragGhost = document.getElementById('js-fl-drag-ghost');
-    },
-    beforeDestroy() {
-        if (this.unsubscribeSelection) {
-            this.unsubscribeSelection();
-        }
-    },
-    methods: {
-        setDomainObject(object) {
-            this.domainObject = object;
-            this.currentObjectPath = [object].concat(this.objectPath);
-            this.setSelection();
-        },
-        setSelection() {
-            this.$nextTick(() => {
-                if (this.$refs && this.$refs.objectFrame) {
-                    let childContext = this.$refs.objectFrame.getSelectionContext();
-                    childContext.item = this.domainObject;
-                    childContext.type = 'frame';
-                    childContext.frameId = this.frame.id;
-                    this.unsubscribeSelection = this.openmct.selection.selectable(
-                        this.$refs.frame, childContext, false);
-                }
-            });
-        },
-        initDrag(event) {
-            let type = this.openmct.types.get(this.domainObject.type);
-            let iconClass = type.definition ? type.definition.cssClass : 'icon-object-unknown';
-
-            if (this.dragGhost) {
-                let originalClassName = this.dragGhost.classList[0];
-                this.dragGhost.className = '';
-                this.dragGhost.classList.add(originalClassName, iconClass);
-
-                this.dragGhost.innerHTML = `<span>${this.domainObject.name}</span>`;
-                event.dataTransfer.setDragImage(this.dragGhost, 0, 0);
-            }
-
-            event.dataTransfer.setData('frameid', this.frame.id);
-            event.dataTransfer.setData('containerIndex', this.containerIndex);
-        }
-    }
-};
-</script>
diff --git a/src/plugins/flexibleLayout/components/resizeHandle.vue b/src/plugins/flexibleLayout/components/resizeHandle.vue
deleted file mode 100644
index 4ab7a3999b5..00000000000
--- a/src/plugins/flexibleLayout/components/resizeHandle.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-<template>
-<div
-    v-show="isEditing && !isDragging"
-    class="c-fl-frame__resize-handle"
-    :class="[orientation]"
-    @mousedown="mousedown"
-></div>
-</template>
-
-<script>
-export default {
-    props: {
-        orientation: {
-            type: String,
-            required: true
-        },
-        index: {
-            type: Number,
-            required: true
-        },
-        isEditing: {
-            type: Boolean,
-            default: false
-        }
-    },
-    data() {
-        return {
-            initialPos: 0,
-            isDragging: false
-        };
-    },
-    mounted() {
-        document.addEventListener('dragstart', this.setDragging);
-        document.addEventListener('dragend', this.unsetDragging);
-        document.addEventListener('drop', this.unsetDragging);
-    },
-    destroyed() {
-        document.removeEventListener('dragstart', this.setDragging);
-        document.removeEventListener('dragend', this.unsetDragging);
-        document.removeEventListener('drop', this.unsetDragging);
-    },
-    methods: {
-        mousedown(event) {
-            event.preventDefault();
-
-            this.$emit('init-move', this.index);
-
-            document.body.addEventListener('mousemove', this.mousemove);
-            document.body.addEventListener('mouseup', this.mouseup);
-        },
-        mousemove(event) {
-            event.preventDefault();
-
-            let elSize;
-            let mousePos;
-            let delta;
-
-            if (this.orientation === 'horizontal') {
-                elSize = this.$el.getBoundingClientRect().x;
-                mousePos = event.clientX;
-            } else {
-                elSize = this.$el.getBoundingClientRect().y;
-                mousePos = event.clientY;
-            }
-
-            delta = mousePos - elSize;
-
-            this.$emit('move', this.index, delta, event);
-        },
-        mouseup(event) {
-            this.$emit('end-move', event);
-
-            document.body.removeEventListener('mousemove', this.mousemove);
-            document.body.removeEventListener('mouseup', this.mouseup);
-        },
-        setDragging(event) {
-            this.isDragging = true;
-        },
-        unsetDragging(event) {
-            this.isDragging = false;
-        }
-    }
-};
-</script>
diff --git a/src/plugins/flexibleLayout/flexibleLayoutViewProvider.js b/src/plugins/flexibleLayout/flexibleLayoutViewProvider.js
index d9bb15560cb..1f646e29faa 100644
--- a/src/plugins/flexibleLayout/flexibleLayoutViewProvider.js
+++ b/src/plugins/flexibleLayout/flexibleLayoutViewProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,70 +20,84 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    './components/flexibleLayout.vue',
-    'vue'
-], function (
-    FlexibleLayoutComponent,
-    Vue
-) {
-    function FlexibleLayoutViewProvider(openmct) {
-        return {
-            key: 'flexible-layout',
-            name: 'FlexibleLayout',
-            cssClass: 'icon-layout-view',
-            canView: function (domainObject) {
-                return domainObject.type === 'flexible-layout';
+import mount from 'utils/mount';
+
+import FlexibleLayoutComponent from './components/FlexibleLayout.vue';
+
+const FLEXIBLE_LAYOUT_KEY = 'flexible-layout';
+export default class FlexibleLayoutViewProvider {
+  constructor(openmct) {
+    this.openmct = openmct;
+    this.key = FLEXIBLE_LAYOUT_KEY;
+    this.name = 'Flexible Layout';
+    this.cssClass = 'icon-layout-view';
+    this.destroy = null;
+  }
+
+  canView(domainObject) {
+    return domainObject.type === FLEXIBLE_LAYOUT_KEY;
+  }
+
+  canEdit(domainObject) {
+    return domainObject.type === FLEXIBLE_LAYOUT_KEY;
+  }
+
+  view(domainObject, objectPath) {
+    let openmct = this.openmct;
+    let _destroy = null;
+    let component = null;
+
+    return {
+      show(element, isEditing) {
+        const { vNode, destroy } = mount(
+          {
+            components: {
+              FlexibleLayoutComponent
             },
-            canEdit: function (domainObject) {
-                return domainObject.type === 'flexible-layout';
+            provide: {
+              openmct,
+              objectPath,
+              domainObject
             },
-            view: function (domainObject, objectPath) {
-                let component;
-
-                return {
-                    show: function (element, isEditing) {
-                        component = new Vue({
-                            el: element,
-                            components: {
-                                FlexibleLayoutComponent: FlexibleLayoutComponent.default
-                            },
-                            provide: {
-                                openmct,
-                                objectPath,
-                                layoutObject: domainObject
-                            },
-                            data() {
-                                return {
-                                    isEditing: isEditing
-                                };
-                            },
-                            template: '<flexible-layout-component ref="flexibleLayout" :isEditing="isEditing"></flexible-layout-component>'
-                        });
-                    },
-                    getSelectionContext: function () {
-                        return {
-                            item: domainObject,
-                            addContainer: component.$refs.flexibleLayout.addContainer,
-                            deleteContainer: component.$refs.flexibleLayout.deleteContainer,
-                            deleteFrame: component.$refs.flexibleLayout.deleteFrame,
-                            type: 'flexible-layout'
-                        };
-                    },
-                    onEditModeChange: function (isEditing) {
-                        component.isEditing = isEditing;
-                    },
-                    destroy: function (element) {
-                        component.$destroy();
-                        component = undefined;
-                    }
-                };
+            data() {
+              return {
+                isEditing: isEditing
+              };
             },
-            priority: function () {
-                return 1;
-            }
+            template:
+              '<flexible-layout-component ref="flexibleLayout" :isEditing="isEditing"></flexible-layout-component>'
+          },
+          {
+            app: openmct.app,
+            element
+          }
+        );
+        component = vNode.componentInstance;
+        _destroy = destroy;
+      },
+      getSelectionContext() {
+        return {
+          item: domainObject,
+          type: 'flexible-layout'
         };
-    }
-
-    return FlexibleLayoutViewProvider;
-});
+      },
+      contextAction(action, ...args) {
+        if (component?.$refs?.flexibleLayout?.[action]) {
+          component.$refs.flexibleLayout[action](...args);
+        }
+      },
+      onEditModeChange(isEditing) {
+        component.isEditing = isEditing;
+      },
+      destroy() {
+        if (_destroy) {
+          _destroy();
+          component = null;
+        }
+      }
+    };
+  }
+  priority() {
+    return 1;
+  }
+}
diff --git a/src/plugins/flexibleLayout/plugin.js b/src/plugins/flexibleLayout/plugin.js
index 6c2e0e5ecb5..ab482480183 100644
--- a/src/plugins/flexibleLayout/plugin.js
+++ b/src/plugins/flexibleLayout/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,37 +20,31 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    './flexibleLayoutViewProvider',
-    './utils/container',
-    './toolbarProvider'
-], function (
-    FlexibleLayoutViewProvider,
-    Container,
-    ToolBarProvider
-) {
-    return function plugin() {
+import FlexibleLayoutViewProvider from './flexibleLayoutViewProvider.js';
+import ToolBarProvider from './toolbarProvider.js';
+import Container from './utils/container.js';
 
-        return function install(openmct) {
-            openmct.objectViews.addProvider(new FlexibleLayoutViewProvider(openmct));
+export default function plugin() {
+  return function install(openmct) {
+    openmct.objectViews.addProvider(new FlexibleLayoutViewProvider(openmct));
 
-            openmct.types.addType('flexible-layout', {
-                name: "Flexible Layout",
-                creatable: true,
-                description: "A fluid, flexible layout canvas that can display multiple objects in rows or columns.",
-                cssClass: 'icon-flexible-layout',
-                initialize: function (domainObject) {
-                    domainObject.configuration = {
-                        containers: [new Container.default(50), new Container.default(50)],
-                        rowsLayout: false
-                    };
-                    domainObject.composition = [];
-                }
-            });
+    openmct.types.addType('flexible-layout', {
+      name: 'Flexible Layout',
+      creatable: true,
+      description:
+        'A fluid, flexible layout canvas that can display multiple objects in rows or columns.',
+      cssClass: 'icon-flexible-layout',
+      initialize: function (domainObject) {
+        domainObject.configuration = {
+          containers: [new Container(50), new Container(50)],
+          rowsLayout: false
+        };
+        domainObject.composition = [];
+      }
+    });
 
-            let toolbar = ToolBarProvider.default(openmct);
+    let toolbar = ToolBarProvider(openmct);
 
-            openmct.toolbars.addProvider(toolbar);
-        };
-    };
-});
+    openmct.toolbars.addProvider(toolbar);
+  };
+}
diff --git a/src/plugins/flexibleLayout/pluginSpec.js b/src/plugins/flexibleLayout/pluginSpec.js
index 6b5c19ee715..4fcacd21c1a 100644
--- a/src/plugins/flexibleLayout/pluginSpec.js
+++ b/src/plugins/flexibleLayout/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,178 +20,212 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import EventEmitter from 'EventEmitter';
 import { createOpenMct, resetApplicationState } from 'utils/testing';
-import FlexibleLayout from './plugin';
+import { nextTick } from 'vue';
 
-describe('the plugin', function () {
-    let element;
-    let child;
-    let openmct;
-    let flexibleLayoutDefinition;
-    const testViewObject = {
-        id: 'test-object',
-        type: 'flexible-layout',
-        configuration: {
-            rowsLayout: false,
-            containers: [
-                {
-                    'id': 'deb9f839-80ad-4ccf-a152-5c763ceb7d7e',
-                    frames: [],
-                    size: 50
-
-                },
-                {
-                    'id': 'deb9f839-80ad-4ccf-a152-5c763ceb7d7f',
-                    frames: [],
-                    size: 50
+import FlexibleLayout from './plugin.js';
 
-                }
-            ]
+describe('the plugin', function () {
+  let element;
+  let child;
+  let openmct;
+  let flexibleLayoutDefinition;
+  let mockComposition;
+
+  const testViewObject = {
+    identifier: {
+      namespace: '',
+      key: 'test-object'
+    },
+    id: 'test-object',
+    type: 'flexible-layout',
+    configuration: {
+      rowsLayout: false,
+      containers: [
+        {
+          id: 'deb9f839-80ad-4ccf-a152-5c763ceb7d7e',
+          frames: [],
+          size: 50
         },
-        composition: []
-    };
-
-    beforeEach((done) => {
-        openmct = createOpenMct();
-        openmct.install(new FlexibleLayout());
-        flexibleLayoutDefinition = openmct.types.get('flexible-layout');
-
-        element = document.createElement('div');
-        child = document.createElement('div');
-        element.appendChild(child);
-
-        openmct.on('start', done);
-        openmct.startHeadless();
-    });
-
-    afterEach(() => {
-        return resetApplicationState(openmct);
+        {
+          id: 'deb9f839-80ad-4ccf-a152-5c763ceb7d7f',
+          frames: [],
+          size: 50
+        }
+      ]
+    },
+    composition: []
+  };
+
+  beforeEach((done) => {
+    openmct = createOpenMct();
+    openmct.install(new FlexibleLayout());
+    flexibleLayoutDefinition = openmct.types.get('flexible-layout');
+
+    element = document.createElement('div');
+    child = document.createElement('div');
+    element.appendChild(child);
+
+    openmct.on('start', done);
+    openmct.start(child);
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  it('defines a flexible layout object type with the correct key', () => {
+    expect(flexibleLayoutDefinition.definition.name).toEqual('Flexible Layout');
+  });
+
+  describe('the view', function () {
+    let flexibleLayoutViewProvider;
+
+    beforeEach(() => {
+      mockComposition = new EventEmitter();
+      // eslint-disable-next-line require-await
+      mockComposition.load = async () => {
+        return [];
+      };
+
+      spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
+
+      const applicableViews = openmct.objectViews.get(testViewObject, [testViewObject]);
+      flexibleLayoutViewProvider = applicableViews.find(
+        (viewProvider) => viewProvider.key === 'flexible-layout'
+      );
     });
 
-    it('defines a flexible layout object type with the correct key', () => {
-        expect(flexibleLayoutDefinition.definition.name).toEqual('Flexible Layout');
+    it('provides a view', () => {
+      expect(flexibleLayoutViewProvider).toBeDefined();
     });
 
-    describe('the view', function () {
-        let flexibleLayoutViewProvider;
+    it('renders a view', async () => {
+      const flexibleView = flexibleLayoutViewProvider.view(testViewObject, [testViewObject]);
+      flexibleView.show(child, false);
 
-        beforeEach(() => {
-            const applicableViews = openmct.objectViews.get(testViewObject, []);
-            flexibleLayoutViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'flexible-layout');
-        });
+      await nextTick();
+      const flexTitle = child.querySelector('.c-fl');
 
-        it('provides a view', () => {
-            expect(flexibleLayoutViewProvider).toBeDefined();
-        });
+      expect(flexTitle).not.toBeNull();
     });
-
-    describe('the toolbar', () => {
-        let flexibleLayoutItem;
-        let flexibleLayoutToolbar;
-        let telemetryItem;
-        let selection;
-
-        beforeEach(() => {
-            flexibleLayoutItem = {
-                id: 'test-object',
-                type: 'flexible-layout',
-                configuration: {
-                    rowsLayout: true,
-                    containers: [
-                        {
-                            'id': 'deb9f839-80ad-4ccf-a152-5c763ceb7d7e',
-                            frames: [{
-                                id: "329bf482-d0dc-486a-aae0-6176276bd315",
-                                'domainObjectIdentifier': {
-                                    'namespace': '',
-                                    'key': '55122607-e65e-44d5-9c9d-9c31a914ca89'
-                                },
-                                size: 100,
-                                noFrame: false
-                            }],
-                            size: 61
-
-                        },
-                        {
-                            'id': 'deb9f839-80ad-4ccf-a152-5c763ceb7d7f',
-                            frames: [{
-                                id: "329bf482-d0dc-486a-aae0-6176276bd316",
-                                'domainObjectIdentifier': {
-                                    'namespace': '',
-                                    'key': '55122607-e65e-44d5-9c9d-9c31a914ca90'
-                                },
-                                size: 100,
-                                noFrame: false
-                            }],
-                            size: 39
-
-                        }
-                    ]
-                },
-                composition: [
-                    {
-                        'identifier': {
-                            'namespace': '',
-                            'key': '55122607-e65e-44d5-9c9d-9c31a914ca89'
-                        }
-                    },
-                    {
-                        'identifier': {
-                            'namespace': '',
-                            'key': '55122607-e65e-44d5-9c9d-9c31a914ca90'
-                        }
-                    }
-                ]
-            };
-            telemetryItem = {
-                'telemetry': {
-                    'period': 5,
-                    'amplitude': 5,
-                    'offset': 5,
-                    'dataRateInHz': 5,
-                    'phase': 5,
-                    'randomness': 0
-                },
-                'name': 'Sine Wave Generator',
-                'type': 'generator',
-                'modified': 1592851063871,
-                'location': 'mine',
-                'persisted': 1592851063871,
-                'id': '55122607-e65e-44d5-9c9d-9c31a914ca89',
-                'identifier': {
-                    'namespace': '',
-                    'key': '55122607-e65e-44d5-9c9d-9c31a914ca89'
-                }
-            };
-            selection = [
-                [{
-                    context: {
-                        frameId: "329bf482-d0dc-486a-aae0-6176276bd315",
-                        item: telemetryItem,
-                        type: "frame"
-                    }
-                },
+  });
+
+  describe('the toolbar', () => {
+    let flexibleLayoutItem;
+    let flexibleLayoutToolbar;
+    let telemetryItem;
+    let selection;
+
+    beforeEach(() => {
+      flexibleLayoutItem = {
+        identifier: {
+          namespace: '',
+          key: 'test-object'
+        },
+        id: 'test-object',
+        type: 'flexible-layout',
+        configuration: {
+          rowsLayout: true,
+          containers: [
+            {
+              id: 'deb9f839-80ad-4ccf-a152-5c763ceb7d7e',
+              frames: [
                 {
-                    context: {
-                        containerId: "deb9f839-80ad-4ccf-a152-5c763ceb7d7e",
-                        'item': flexibleLayoutItem,
-                        type: "container"
-                    }
-                },
+                  id: '329bf482-d0dc-486a-aae0-6176276bd315',
+                  domainObjectIdentifier: {
+                    namespace: '',
+                    key: '55122607-e65e-44d5-9c9d-9c31a914ca89'
+                  },
+                  size: 100,
+                  noFrame: false
+                }
+              ],
+              size: 61
+            },
+            {
+              id: 'deb9f839-80ad-4ccf-a152-5c763ceb7d7f',
+              frames: [
                 {
-                    context: {
-                        item: flexibleLayoutItem,
-                        type: "flexible-layout"
-                    }
-
-                }]
-            ];
-
-            flexibleLayoutToolbar = openmct.toolbars.get(selection);
-        });
+                  id: '329bf482-d0dc-486a-aae0-6176276bd316',
+                  domainObjectIdentifier: {
+                    namespace: '',
+                    key: '55122607-e65e-44d5-9c9d-9c31a914ca90'
+                  },
+                  size: 100,
+                  noFrame: false
+                }
+              ],
+              size: 39
+            }
+          ]
+        },
+        composition: [
+          {
+            identifier: {
+              namespace: '',
+              key: '55122607-e65e-44d5-9c9d-9c31a914ca89'
+            }
+          },
+          {
+            identifier: {
+              namespace: '',
+              key: '55122607-e65e-44d5-9c9d-9c31a914ca90'
+            }
+          }
+        ]
+      };
+      telemetryItem = {
+        telemetry: {
+          period: 5,
+          amplitude: 5,
+          offset: 5,
+          dataRateInHz: 5,
+          phase: 5,
+          randomness: 0
+        },
+        name: 'Sine Wave Generator',
+        type: 'generator',
+        modified: 1592851063871,
+        location: 'mine',
+        persisted: 1592851063871,
+        id: '55122607-e65e-44d5-9c9d-9c31a914ca89',
+        identifier: {
+          namespace: '',
+          key: '55122607-e65e-44d5-9c9d-9c31a914ca89'
+        }
+      };
+      selection = [
+        [
+          {
+            context: {
+              frameId: '329bf482-d0dc-486a-aae0-6176276bd315',
+              item: telemetryItem,
+              type: 'frame'
+            }
+          },
+          {
+            context: {
+              containerId: 'deb9f839-80ad-4ccf-a152-5c763ceb7d7e',
+              item: flexibleLayoutItem,
+              type: 'container'
+            }
+          },
+          {
+            context: {
+              item: flexibleLayoutItem,
+              type: 'flexible-layout'
+            }
+          }
+        ]
+      ];
+
+      flexibleLayoutToolbar = openmct.toolbars.get(selection);
+    });
 
-        it('provides controls including separators', () => {
-            expect(flexibleLayoutToolbar.length).toBe(6);
-        });
+    it('provides controls including separators', () => {
+      expect(flexibleLayoutToolbar.length).toBe(6);
     });
+  });
 });
diff --git a/src/plugins/flexibleLayout/toolbarProvider.js b/src/plugins/flexibleLayout/toolbarProvider.js
index 27d00ac1edb..ee2cc4a3e69 100644
--- a/src/plugins/flexibleLayout/toolbarProvider.js
+++ b/src/plugins/flexibleLayout/toolbarProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,206 +21,226 @@
  *****************************************************************************/
 
 function ToolbarProvider(openmct) {
+  return {
+    name: 'Flexible Layout Toolbar',
+    key: 'flex-layout',
+    description: 'A toolbar for objects inside a Flexible Layout.',
+    forSelection: function (selection) {
+      let context = selection[0][0].context;
+
+      return (
+        context &&
+        context.type &&
+        (context.type === 'flexible-layout' ||
+          context.type === 'container' ||
+          context.type === 'frame')
+      );
+    },
+    toolbar: function (selection) {
+      let selectionPath = selection[0];
+      let primary = selectionPath[0];
+      let secondary = selectionPath[1];
+      let tertiary = selectionPath[2];
+      let deleteFrame;
+      let toggleContainer;
+      let deleteContainer;
+      let addContainer;
+      let toggleFrame;
+      const primaryKeyString =
+        primary?.context?.item?.identifier &&
+        openmct.objects.makeKeyString(primary.context.item.identifier);
+      const tertiaryKeyString =
+        tertiary?.context?.item?.identifier &&
+        openmct.objects.makeKeyString(tertiary.context.item.identifier);
+
+      toggleContainer = {
+        control: 'toggle-button',
+        key: 'toggle-layout',
+        domainObject: primary.context.item,
+        property: 'configuration.rowsLayout',
+        options: [
+          {
+            value: true,
+            icon: 'icon-columns',
+            title: 'Columns layout'
+          },
+          {
+            value: false,
+            icon: 'icon-rows',
+            title: 'Rows layout'
+          }
+        ]
+      };
+
+      function getSeparator() {
+        return {
+          control: 'separator'
+        };
+      }
+
+      if (primary.context.type === 'frame') {
+        if (secondary.context.item.locked) {
+          return [];
+        }
 
-    return {
-        name: "Flexible Layout Toolbar",
-        key: "flex-layout",
-        description: "A toolbar for objects inside a Flexible Layout.",
-        forSelection: function (selection) {
-            let context = selection[0][0].context;
-
-            return (context && context.type
-                && (context.type === 'flexible-layout' || context.type === 'container' || context.type === 'frame'));
-        },
-        toolbar: function (selection) {
-            let selectionPath = selection[0];
-            let primary = selectionPath[0];
-            let secondary = selectionPath[1];
-            let tertiary = selectionPath[2];
-            let deleteFrame;
-            let toggleContainer;
-            let deleteContainer;
-            let addContainer;
-            let toggleFrame;
-
-            toggleContainer = {
-                control: 'toggle-button',
-                key: 'toggle-layout',
-                domainObject: primary.context.item,
-                property: 'configuration.rowsLayout',
-                options: [
-                    {
-                        value: true,
-                        icon: 'icon-columns',
-                        title: 'Columns layout'
-                    },
-                    {
-                        value: false,
-                        icon: 'icon-rows',
-                        title: 'Rows layout'
-                    }
-                ]
-            };
-
-            function getSeparator() {
-                return {
-                    control: "separator"
-                };
-            }
-
-            if (primary.context.type === 'frame') {
-                if (secondary.context.item.locked) {
-                    return [];
-                }
-
-                let frameId = primary.context.frameId;
-                let layoutObject = tertiary.context.item;
-                let containers = layoutObject
-                    .configuration
-                    .containers;
-                let container = containers
-                    .filter(c => c.frames.some(f => f.id === frameId))[0];
-                let containerIndex = containers.indexOf(container);
-                let frame = container && container
-                    .frames
-                    .filter((f => f.id === frameId))[0];
-                let frameIndex = container && container.frames.indexOf(frame);
-
-                deleteFrame = {
-                    control: "button",
-                    domainObject: primary.context.item,
-                    method: function () {
-                        let deleteFrameAction = tertiary.context.deleteFrame;
-
-                        let prompt = openmct.overlays.dialog({
-                            iconClass: 'alert',
-                            message: `This action will remove this frame from this Flexible Layout. Do you want to continue?`,
-                            buttons: [
-                                {
-                                    label: 'OK',
-                                    emphasis: 'true',
-                                    callback: function () {
-                                        deleteFrameAction(primary.context.frameId);
-                                        prompt.dismiss();
-                                    }
-                                },
-                                {
-                                    label: 'Cancel',
-                                    callback: function () {
-                                        prompt.dismiss();
-                                    }
-                                }
-                            ]
-                        });
-                    },
-                    key: "remove",
-                    icon: "icon-trash",
-                    title: "Remove Frame"
-                };
-                toggleFrame = {
-                    control: "toggle-button",
-                    domainObject: secondary.context.item,
-                    property: `configuration.containers[${containerIndex}].frames[${frameIndex}].noFrame`,
-                    options: [
-                        {
-                            value: false,
-                            icon: 'icon-frame-hide',
-                            title: "Frame hidden"
-                        },
-                        {
-                            value: true,
-                            icon: 'icon-frame-show',
-                            title: "Frame visible"
-                        }
-                    ]
-                };
-                addContainer = {
-                    control: "button",
-                    domainObject: tertiary.context.item,
-                    method: tertiary.context.addContainer,
-                    key: "add",
-                    icon: "icon-plus-in-rect",
-                    title: 'Add Container'
-                };
-
-                toggleContainer.domainObject = secondary.context.item;
-
-            } else if (primary.context.type === 'container') {
-                if (primary.context.item.locked) {
-                    return [];
-                }
-
-                deleteContainer = {
-                    control: "button",
-                    domainObject: primary.context.item,
-                    method: function () {
-                        let removeContainer = secondary.context.deleteContainer;
-                        let containerId = primary.context.containerId;
-
-                        let prompt = openmct.overlays.dialog({
-                            iconClass: 'alert',
-                            message: 'This action will permanently delete this container from this Flexible Layout',
-                            buttons: [
-                                {
-                                    label: 'OK',
-                                    emphasis: 'true',
-                                    callback: function () {
-                                        removeContainer(containerId);
-                                        prompt.dismiss();
-                                    }
-                                },
-                                {
-                                    label: 'Cancel',
-                                    callback: function () {
-                                        prompt.dismiss();
-                                    }
-                                }
-                            ]
-                        });
-                    },
-                    key: "remove",
-                    icon: "icon-trash",
-                    title: "Remove Container"
-                };
-
-                addContainer = {
-                    control: "button",
-                    domainObject: secondary.context.item,
-                    method: secondary.context.addContainer,
-                    key: "add",
-                    icon: "icon-plus-in-rect",
-                    title: 'Add Container'
-                };
-
-            } else if (primary.context.type === 'flexible-layout') {
-                if (primary.context.item.locked) {
-                    return [];
+        let frameId = primary.context.frameId;
+        let layoutObject = tertiary.context.item;
+        let containers = layoutObject.configuration.containers;
+        let container = containers.filter((c) => c.frames.some((f) => f.id === frameId))[0];
+        let containerIndex = containers.indexOf(container);
+        let frame = container && container.frames.filter((f) => f.id === frameId)[0];
+        let frameIndex = container && container.frames.indexOf(frame);
+        deleteFrame = {
+          control: 'button',
+          domainObject: primary.context.item,
+          method: function () {
+            let prompt = openmct.overlays.dialog({
+              iconClass: 'alert',
+              message: `This action will remove this frame from this Flexible Layout. Do you want to continue?`,
+              buttons: [
+                {
+                  label: 'OK',
+                  emphasis: 'true',
+                  callback: function () {
+                    openmct.objectViews.emit(
+                      `contextAction:${tertiaryKeyString}`,
+                      'deleteFrame',
+                      primary.context.frameId
+                    );
+                    prompt.dismiss();
+                  }
+                },
+                {
+                  label: 'Cancel',
+                  callback: function () {
+                    prompt.dismiss();
+                  }
                 }
-
-                addContainer = {
-                    control: "button",
-                    domainObject: primary.context.item,
-                    method: primary.context.addContainer,
-                    key: "add",
-                    icon: "icon-plus-in-rect",
-                    title: 'Add Container'
-                };
-
+              ]
+            });
+          },
+          key: 'remove',
+          icon: 'icon-trash',
+          title: 'Remove Frame'
+        };
+        toggleFrame = {
+          control: 'toggle-button',
+          domainObject: secondary.context.item,
+          property: `configuration.containers[${containerIndex}].frames[${frameIndex}].noFrame`,
+          options: [
+            {
+              value: false,
+              icon: 'icon-frame-hide',
+              title: 'Frame hidden'
+            },
+            {
+              value: true,
+              icon: 'icon-frame-show',
+              title: 'Frame visible'
             }
+          ]
+        };
+
+        addContainer = {
+          control: 'button',
+          domainObject: tertiary.context.item,
+          method: function (...args) {
+            openmct.objectViews.emit(`contextAction:${tertiaryKeyString}`, 'addContainer', ...args);
+          },
+          key: 'add',
+          icon: 'icon-plus-in-rect',
+          title: 'Add Container'
+        };
+
+        toggleContainer.domainObject = secondary.context.item;
+      } else if (primary.context.type === 'container') {
+        if (primary.context.item.locked) {
+          return [];
+        }
 
-            let toolbar = [
-                toggleContainer,
-                addContainer,
-                toggleFrame ? getSeparator() : undefined,
-                toggleFrame,
-                deleteFrame || deleteContainer ? getSeparator() : undefined,
-                deleteFrame,
-                deleteContainer
-            ];
-
-            return toolbar.filter(button => button !== undefined);
+        deleteContainer = {
+          control: 'button',
+          domainObject: primary.context.item,
+          method: function () {
+            let containerId = primary.context.containerId;
+
+            let prompt = openmct.overlays.dialog({
+              iconClass: 'alert',
+              message:
+                'This action will permanently delete this container from this Flexible Layout. Do you want to continue?',
+              buttons: [
+                {
+                  label: 'OK',
+                  emphasis: 'true',
+                  callback: function () {
+                    openmct.objectViews.emit(
+                      `contextAction:${primaryKeyString}`,
+                      'deleteContainer',
+                      containerId
+                    );
+                    prompt.dismiss();
+                  }
+                },
+                {
+                  label: 'Cancel',
+                  callback: function () {
+                    prompt.dismiss();
+                  }
+                }
+              ]
+            });
+          },
+          key: 'remove',
+          icon: 'icon-trash',
+          title: 'Remove Container'
+        };
+
+        const domainObject = secondary.context.item;
+        const keyString = openmct.objects.makeKeyString(domainObject.identifier);
+
+        addContainer = {
+          control: 'button',
+          domainObject,
+          method: function (...args) {
+            openmct.objectViews.emit(`contextAction:${keyString}`, 'addContainer', ...args);
+          },
+          key: 'add',
+          icon: 'icon-plus-in-rect',
+          title: 'Add Container'
+        };
+      } else if (primary.context.type === 'flexible-layout') {
+        if (primary.context.item.locked) {
+          return [];
         }
-    };
+
+        const domainObject = primary.context.item;
+        const keyString = openmct.objects.makeKeyString(domainObject.identifier);
+
+        addContainer = {
+          control: 'button',
+          domainObject,
+          method: function (...args) {
+            openmct.objectViews.emit(`contextAction:${keyString}`, 'addContainer', ...args);
+          },
+          key: 'add',
+          icon: 'icon-plus-in-rect',
+          title: 'Add Container'
+        };
+      }
+
+      let toolbar = [
+        toggleContainer,
+        addContainer,
+        toggleFrame ? getSeparator() : undefined,
+        toggleFrame,
+        deleteFrame || deleteContainer ? getSeparator() : undefined,
+        deleteFrame,
+        deleteContainer
+      ];
+
+      return toolbar.filter((button) => button !== undefined);
+    }
+  };
 }
 
 export default ToolbarProvider;
diff --git a/src/plugins/flexibleLayout/utils/container.js b/src/plugins/flexibleLayout/utils/container.js
index 9ee51b22552..c4889cb8857 100644
--- a/src/plugins/flexibleLayout/utils/container.js
+++ b/src/plugins/flexibleLayout/utils/container.js
@@ -1,11 +1,11 @@
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 
 class Container {
-    constructor(size) {
-        this.id = uuid();
-        this.frames = [];
-        this.size = size;
-    }
+  constructor(size) {
+    this.id = uuid();
+    this.frames = [];
+    this.size = size;
+  }
 }
 
 export default Container;
diff --git a/src/plugins/flexibleLayout/utils/frame.js b/src/plugins/flexibleLayout/utils/frame.js
index a444a20eabf..f7736aa199c 100644
--- a/src/plugins/flexibleLayout/utils/frame.js
+++ b/src/plugins/flexibleLayout/utils/frame.js
@@ -1,13 +1,13 @@
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 
 class Frame {
-    constructor(domainObjectIdentifier, size) {
-        this.id = uuid();
-        this.domainObjectIdentifier = domainObjectIdentifier;
-        this.size = size;
+  constructor(domainObjectIdentifier, size) {
+    this.id = uuid();
+    this.domainObjectIdentifier = domainObjectIdentifier;
+    this.size = size;
 
-        this.noFrame = false;
-    }
+    this.noFrame = false;
+  }
 }
 
 export default Frame;
diff --git a/src/plugins/folderView/FolderGridView.js b/src/plugins/folderView/FolderGridView.js
index 75ee447b99a..9bd60512abd 100644
--- a/src/plugins/folderView/FolderGridView.js
+++ b/src/plugins/folderView/FolderGridView.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,54 +19,52 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+import mount from 'utils/mount';
 
-define([
-    './components/GridView.vue',
-    './constants.js',
-    'vue'
-], function (
-    GridViewComponent,
-    constants,
-    Vue
-) {
-    function FolderGridView(openmct) {
-        const ALLOWED_FOLDER_TYPES = constants.ALLOWED_FOLDER_TYPES;
+import GridViewComponent from './components/GridView.vue';
+import { ALLOWED_FOLDER_TYPES } from './constants.js';
 
-        return {
-            key: 'grid',
-            name: 'Grid View',
-            cssClass: 'icon-thumbs-strip',
-            canView: function (domainObject) {
-                return ALLOWED_FOLDER_TYPES.includes(domainObject.type);
-            },
-            view: function (domainObject) {
-                let component;
+export default class FolderGridView {
+  constructor(openmct) {
+    this.openmct = openmct;
+    this.key = 'grid';
+    this.name = 'Grid View';
+    this.cssClass = 'icon-thumbs-strip';
+  }
+  canView(domainObject) {
+    return ALLOWED_FOLDER_TYPES.includes(domainObject.type);
+  }
 
-                return {
-                    show: function (element) {
-                        component = new Vue({
-                            el: element,
-                            components: {
-                                gridViewComponent: GridViewComponent.default
-                            },
-                            provide: {
-                                openmct,
-                                domainObject
-                            },
-                            template: '<grid-view-component></grid-view-component>'
-                        });
-                    },
-                    destroy: function (element) {
-                        component.$destroy();
-                        component = undefined;
-                    }
-                };
+  view(domainObject) {
+    return {
+      show: (element) => {
+        const { destroy } = mount(
+          {
+            components: {
+              GridViewComponent
+            },
+            provide: {
+              openmct: this.openmct,
+              domainObject
             },
-            priority: function () {
-                return 1;
-            }
-        };
-    }
+            template: '<GridViewComponent></GridViewComponent>'
+          },
+          {
+            app: this.openmct.app,
+            element
+          }
+        );
+        this._destroy = destroy;
+      },
+      destroy: () => {
+        if (this._destroy) {
+          this._destroy();
+        }
+      }
+    };
+  }
 
-    return FolderGridView;
-});
+  priority() {
+    return 1;
+  }
+}
diff --git a/src/plugins/folderView/FolderListView.js b/src/plugins/folderView/FolderListView.js
index b4d9bd5d27e..2488964033c 100644
--- a/src/plugins/folderView/FolderListView.js
+++ b/src/plugins/folderView/FolderListView.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,57 +19,55 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+import Moment from 'moment';
+import mount from 'utils/mount';
 
-define([
-    './components/ListView.vue',
-    './constants.js',
-    'vue',
-    'moment'
-], function (
-    ListViewComponent,
-    constants,
-    Vue,
-    Moment
-) {
-    function FolderListView(openmct) {
-        const ALLOWED_FOLDER_TYPES = constants.ALLOWED_FOLDER_TYPES;
+import ListViewComponent from './components/ListView.vue';
+import { ALLOWED_FOLDER_TYPES } from './constants.js';
 
-        return {
-            key: 'list-view',
-            name: 'List View',
-            cssClass: 'icon-list-view',
-            canView: function (domainObject) {
-                return ALLOWED_FOLDER_TYPES.includes(domainObject.type);
-            },
-            view: function (domainObject) {
-                let component;
+export default class FolderListView {
+  constructor(openmct) {
+    this.openmct = openmct;
+    this.key = 'list-view';
+    this.name = 'List View';
+    this.cssClass = 'icon-list-view';
+  }
 
-                return {
-                    show: function (element) {
-                        component = new Vue({
-                            el: element,
-                            components: {
-                                listViewComponent: ListViewComponent.default
-                            },
-                            provide: {
-                                openmct,
-                                domainObject,
-                                Moment
-                            },
-                            template: '<list-view-component></list-view-component>'
-                        });
-                    },
-                    destroy: function (element) {
-                        component.$destroy();
-                        component = undefined;
-                    }
-                };
-            },
-            priority: function () {
-                return 1;
-            }
-        };
-    }
+  canView(domainObject) {
+    return ALLOWED_FOLDER_TYPES.includes(domainObject.type);
+  }
 
-    return FolderListView;
-});
+  view(domainObject) {
+    return {
+      show: (element) => {
+        const { destroy } = mount(
+          {
+            el: element,
+            components: {
+              ListViewComponent
+            },
+            provide: {
+              openmct: this.openmct,
+              domainObject,
+              Moment
+            },
+            template: '<ListViewComponent></ListViewComponent>'
+          },
+          {
+            app: this.openmct.app,
+            element
+          }
+        );
+        this._destroy = destroy;
+      },
+      destroy: () => {
+        if (this._destroy) {
+          this._destroy();
+        }
+      }
+    };
+  }
+  priority() {
+    return 1;
+  }
+}
diff --git a/src/plugins/folderView/components/GridItem.vue b/src/plugins/folderView/components/GridItem.vue
index ef8101df6c4..67d78a07eb9 100644
--- a/src/plugins/folderView/components/GridItem.vue
+++ b/src/plugins/folderView/components/GridItem.vue
@@ -1,65 +1,86 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<a
-    class="l-grid-view__item c-grid-item"
-    :class="[{
+  <a
+    ref="root"
+    class="l-grid-view__item c-grid-item js-folder-child"
+    :class="[
+      {
         'is-alias': item.isAlias === true,
-        'c-grid-item--unknown': item.type.cssClass === undefined || item.type.cssClass.indexOf('unknown') !== -1
-    }, statusClass]"
-    @click="navigate"
->
+        'c-grid-item--unknown':
+          item.type.cssClass === undefined || item.type.cssClass.indexOf('unknown') !== -1
+      },
+      statusClass
+    ]"
+    @click="navigate($event)"
+  >
     <div
-        class="c-grid-item__type-icon"
-        :class="(item.type.cssClass != undefined) ? 'bg-' + item.type.cssClass : 'bg-icon-object-unknown'"
-    >
-    </div>
+      class="c-grid-item__type-icon"
+      :class="
+        item.type.cssClass != undefined ? 'bg-' + item.type.cssClass : 'bg-icon-object-unknown'
+      "
+    ></div>
     <div class="c-grid-item__details">
-        <!-- Name and metadata -->
-        <div
-            class="c-grid-item__name"
-            :title="item.model.name"
-        >{{ item.model.name }}</div>
-        <div
-            class="c-grid-item__metadata"
-            :title="item.type.name"
-        >
-            <span class="c-grid-item__metadata__type">{{ item.type.name }}</span>
-        </div>
+      <!-- Name and metadata -->
+      <div class="c-grid-item__name" :title="item.model.name">{{ item.model.name }}</div>
+      <div class="c-grid-item__metadata" :aria-label="item.type.name" :title="item.type.name">
+        <span class="c-grid-item__metadata__type">{{ item.type.name }}</span>
+      </div>
     </div>
     <div class="c-grid-item__controls">
-        <div class="is-status__indicator"
-             :title="`This item is ${status}`"
-        ></div>
-        <div
-            class="icon-people"
-            title="Shared"
-        ></div>
-        <button
-            class="c-icon-button icon-info c-info-button"
-            title="More Info"
-        ></button>
-        <div class="icon-pointer-right c-pointer-icon"></div>
+      <div
+        class="is-status__indicator"
+        :aria-label="`This item is ${status}`"
+        :title="`This item is ${status}`"
+      ></div>
+      <div class="icon-people" title="Shared"></div>
+      <button
+        class="c-icon-button icon-info c-info-button"
+        aria-label="More Info"
+        title="More Info"
+      ></button>
+      <div class="icon-pointer-right c-pointer-icon"></div>
     </div>
-</a>
+  </a>
 </template>
 
 <script>
-import contextMenuGesture from '../../../ui/mixins/context-menu-gesture';
-import objectLink from '../../../ui/mixins/object-link';
-import statusListener from './status-listener';
+import contextMenuGesture from '../../../ui/mixins/context-menu-gesture.js';
+import objectLink from '../../../ui/mixins/object-link.js';
+import statusListener from './status-listener.js';
 
 export default {
-    mixins: [contextMenuGesture, objectLink, statusListener],
-    inject: ['openmct'],
-    props: {
-        item: {
-            type: Object,
-            required: true
-        }
-    },
-    methods: {
-        navigate() {
-            this.openmct.router.navigate(this.objectLink);
-        }
+  mixins: [contextMenuGesture, objectLink, statusListener],
+  inject: ['openmct'],
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    navigate(_event) {
+      this.openmct.router.navigate(this.objectLink);
     }
+  }
 };
 </script>
diff --git a/src/plugins/folderView/components/GridView.vue b/src/plugins/folderView/components/GridView.vue
index 36b6e20bb74..96804590d79 100644
--- a/src/plugins/folderView/components/GridView.vue
+++ b/src/plugins/folderView/components/GridView.vue
@@ -1,22 +1,43 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div class="l-grid-view">
+  <div class="l-grid-view" role="grid" :aria-label="`${domainObject.name} Grid View`">
     <grid-item
-        v-for="(item, index) in items"
-        :key="index"
-        :item="item"
-        :object-path="item.objectPath"
+      v-for="(item, index) in items"
+      :key="index"
+      :item="item"
+      :object-path="item.objectPath"
+      role="gridcell"
     />
-</div>
+  </div>
 </template>
 
 <script>
-
-import compositionLoader from './composition-loader';
+import compositionLoader from './composition-loader.js';
 import GridItem from './GridItem.vue';
 
 export default {
-    components: {GridItem},
-    mixins: [compositionLoader],
-    inject: ['openmct']
+  components: { GridItem },
+  mixins: [compositionLoader],
+  inject: ['openmct', 'domainObject']
 };
 </script>
diff --git a/src/plugins/folderView/components/ListItem.vue b/src/plugins/folderView/components/ListItem.vue
index c803a2069b3..c9332487a91 100644
--- a/src/plugins/folderView/components/ListItem.vue
+++ b/src/plugins/folderView/components/ListItem.vue
@@ -1,64 +1,83 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<tr
-    class="c-list-item"
+  <tr
+    ref="root"
+    class="c-list-item js-folder-child"
     :class="{
-        'is-alias': item.isAlias === true
+      'is-alias': item.isAlias === true
     }"
     @click="navigate"
->
+  >
     <td class="c-list-item__name">
-        <a
-            ref="objectLink"
-            class="c-object-label"
-            :class="[statusClass]"
-            @click="navigate"
+      <a ref="objectLink" class="c-object-label" :class="[statusClass]" @click="navigate">
+        <div
+          class="c-object-label__type-icon c-list-item__name__type-icon"
+          :class="item.type.cssClass"
         >
-            <div
-                class="c-object-label__type-icon c-list-item__name__type-icon"
-                :class="item.type.cssClass"
-            >
-                <span class="is-status__indicator"
-                      :title="`This item is ${status}`"
-                ></span>
-            </div>
-            <div class="c-object-label__name c-list-item__name__name">{{ item.model.name }}</div>
-        </a>
+          <span
+            class="is-status__indicator"
+            :aria-label="`This item is ${status}`"
+            :title="`This item is ${status}`"
+          ></span>
+        </div>
+        <div class="c-object-label__name c-list-item__name__name">{{ item.model.name }}</div>
+      </a>
     </td>
     <td class="c-list-item__type">
-        {{ item.type.name }}
+      {{ item.type.name }}
     </td>
     <td class="c-list-item__date-created">
-        {{ formatTime(item.model.persisted, 'YYYY-MM-DD HH:mm:ss:SSS') }}Z
+      {{ formatTime(item.model.persisted, 'YYYY-MM-DD HH:mm:ss:SSS') }}Z
     </td>
     <td class="c-list-item__date-updated">
-        {{ formatTime(item.model.modified, 'YYYY-MM-DD HH:mm:ss:SSS') }}Z
+      {{ formatTime(item.model.modified, 'YYYY-MM-DD HH:mm:ss:SSS') }}Z
     </td>
-</tr>
+  </tr>
 </template>
 
 <script>
-
 import moment from 'moment';
-import contextMenuGesture from '../../../ui/mixins/context-menu-gesture';
-import objectLink from '../../../ui/mixins/object-link';
-import statusListener from './status-listener';
+
+import contextMenuGesture from '../../../ui/mixins/context-menu-gesture.js';
+import objectLink from '../../../ui/mixins/object-link.js';
+import statusListener from './status-listener.js';
 
 export default {
-    mixins: [contextMenuGesture, objectLink, statusListener],
-    inject: ['openmct'],
-    props: {
-        item: {
-            type: Object,
-            required: true
-        }
+  mixins: [contextMenuGesture, objectLink, statusListener],
+  inject: ['openmct'],
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    formatTime(timestamp, format) {
+      return moment(timestamp).format(format);
     },
-    methods: {
-        formatTime(timestamp, format) {
-            return moment(timestamp).format(format);
-        },
-        navigate() {
-            this.openmct.router.navigate(this.objectLink);
-        }
+    navigate() {
+      this.openmct.router.navigate(this.objectLink);
     }
+  }
 };
 </script>
diff --git a/src/plugins/folderView/components/ListView.vue b/src/plugins/folderView/components/ListView.vue
index 3a1b22dd89d..b6f8f0f9f11 100644
--- a/src/plugins/folderView/components/ListView.vue
+++ b/src/plugins/folderView/components/ListView.vue
@@ -1,122 +1,143 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div class="c-table c-table--sortable c-list-view">
+  <div
+    class="c-table c-table--sortable c-list-view c-list-view--sticky-header c-list-view--selectable"
+  >
     <table class="c-table__body">
-        <thead class="c-table__header">
-            <tr>
-                <th
-                    class="is-sortable"
-                    :class="{
-                        'is-sorting': sortBy === 'model.name',
-                        'asc': ascending,
-                        'desc': !ascending
-                    }"
-                    @click="sort('model.name', true)"
-                >
-                    Name
-                </th>
-                <th
-                    class="is-sortable"
-                    :class="{
-                        'is-sorting': sortBy === 'type.name',
-                        'asc': ascending,
-                        'desc': !ascending
-                    }"
-                    @click="sort('type.name', true)"
-                >
-                    Type
-                </th>
-                <th
-                    class="is-sortable"
-                    :class="{
-                        'is-sorting': sortBy === 'model.persisted',
-                        'asc': ascending,
-                        'desc': !ascending
-                    }"
-                    @click="sort('model.persisted', false)"
-                >
-                    Created Date
-                </th>
-                <th
-                    class="is-sortable"
-                    :class="{
-                        'is-sorting': sortBy === 'model.modified',
-                        'asc': ascending,
-                        'desc': !ascending
-                    }"
-                    @click="sort('model.modified', false)"
-                >
-                    Updated Date
-                </th>
-            </tr>
-        </thead>
-        <tbody>
-            <list-item
-                v-for="item in sortedItems"
-                :key="item.objectKeyString"
-                :item="item"
-                :object-path="item.objectPath"
-            />
-        </tbody>
+      <thead class="c-table__header">
+        <tr>
+          <th
+            class="is-sortable"
+            :class="{
+              'is-sorting': sortBy === 'model.name',
+              asc: ascending,
+              desc: !ascending
+            }"
+            @click="sort('model.name', true)"
+          >
+            Name
+          </th>
+          <th
+            class="is-sortable"
+            :class="{
+              'is-sorting': sortBy === 'type.name',
+              asc: ascending,
+              desc: !ascending
+            }"
+            @click="sort('type.name', true)"
+          >
+            Type
+          </th>
+          <th
+            class="is-sortable"
+            :class="{
+              'is-sorting': sortBy === 'model.persisted',
+              asc: ascending,
+              desc: !ascending
+            }"
+            @click="sort('model.persisted', false)"
+          >
+            Created Date
+          </th>
+          <th
+            class="is-sortable"
+            :class="{
+              'is-sorting': sortBy === 'model.modified',
+              asc: ascending,
+              desc: !ascending
+            }"
+            @click="sort('model.modified', false)"
+          >
+            Updated Date
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <list-item
+          v-for="item in sortedItems"
+          :key="item.objectKeyString"
+          :item="item"
+          :object-path="item.objectPath"
+        />
+      </tbody>
     </table>
-</div>
+  </div>
 </template>
 
 <script>
-import compositionLoader from './composition-loader';
-import ListItem from './ListItem.vue';
 import _ from 'lodash';
 
+import compositionLoader from './composition-loader.js';
+import ListItem from './ListItem.vue';
+
 export default {
-    components: {ListItem},
-    mixins: [compositionLoader],
-    inject: ['domainObject', 'openmct'],
-    data() {
-        let sortBy = 'model.name';
-        let ascending = true;
-        let persistedSortOrder = window.localStorage.getItem('openmct-listview-sort-order');
+  components: { ListItem },
+  mixins: [compositionLoader],
+  inject: ['domainObject', 'openmct'],
+  data() {
+    let sortBy = 'model.name';
+    let ascending = true;
+    let persistedSortOrder = window.localStorage.getItem('openmct-listview-sort-order');
 
-        if (persistedSortOrder) {
-            let parsed = JSON.parse(persistedSortOrder);
+    if (persistedSortOrder) {
+      let parsed = JSON.parse(persistedSortOrder);
 
-            sortBy = parsed.sortBy;
-            ascending = parsed.ascending;
-        }
+      sortBy = parsed.sortBy;
+      ascending = parsed.ascending;
+    }
 
-        return {
-            sortBy,
-            ascending
-        };
-    },
-    computed: {
-        sortedItems() {
-            let sortedItems = _.sortBy(this.items, this.sortBy);
-            if (!this.ascending) {
-                sortedItems = sortedItems.reverse();
-            }
+    return {
+      sortBy,
+      ascending
+    };
+  },
+  computed: {
+    sortedItems() {
+      let sortedItems = _.sortBy(this.items, this.sortBy);
+      if (!this.ascending) {
+        sortedItems = sortedItems.reverse();
+      }
 
-            return sortedItems;
-        }
-    },
-    methods: {
-        sort(field, defaultDirection) {
-            if (this.sortBy === field) {
-                this.ascending = !this.ascending;
-            } else {
-                this.sortBy = field;
-                this.ascending = defaultDirection;
-            }
+      return sortedItems;
+    }
+  },
+  methods: {
+    sort(field, defaultDirection) {
+      if (this.sortBy === field) {
+        this.ascending = !this.ascending;
+      } else {
+        this.sortBy = field;
+        this.ascending = defaultDirection;
+      }
 
-            window.localStorage
-                .setItem(
-                    'openmct-listview-sort-order',
-                    JSON.stringify(
-                        {
-                            sortBy: this.sortBy,
-                            ascending: this.ascending
-                        }
-                    )
-                );
-        }
+      window.localStorage.setItem(
+        'openmct-listview-sort-order',
+        JSON.stringify({
+          sortBy: this.sortBy,
+          ascending: this.ascending
+        })
+      );
     }
+  }
 };
 </script>
diff --git a/src/plugins/folderView/components/composition-loader.js b/src/plugins/folderView/components/composition-loader.js
index 33aab1a6588..b918f97f839 100644
--- a/src/plugins/folderView/components/composition-loader.js
+++ b/src/plugins/folderView/components/composition-loader.js
@@ -1,53 +1,53 @@
 const unknownObjectType = {
-    definition: {
-        cssClass: 'icon-object-unknown',
-        name: 'Unknown Type'
-    }
+  definition: {
+    cssClass: 'icon-object-unknown',
+    name: 'Unknown Type'
+  }
 };
 
 export default {
-    inject: ['openmct', 'domainObject'],
-    data() {
-        return {
-            items: []
-        };
-    },
-    mounted() {
-        this.composition = this.openmct.composition.get(this.domainObject);
-        this.keystring = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-        if (!this.composition) {
-            return;
-        }
-
-        this.composition.on('add', this.add);
-        this.composition.on('remove', this.remove);
-        this.composition.load();
-    },
-    destroyed() {
-        if (!this.composition) {
-            return;
-        }
+  inject: ['openmct', 'domainObject'],
+  data() {
+    return {
+      items: []
+    };
+  },
+  mounted() {
+    this.composition = this.openmct.composition.get(this.domainObject);
+    this.keystring = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+    if (!this.composition) {
+      return;
+    }
 
-        this.composition.off('add', this.add);
-        this.composition.off('remove', this.remove);
+    this.composition.on('add', this.add);
+    this.composition.on('remove', this.remove);
+    this.composition.load();
+  },
+  beforeUnmount() {
+    if (!this.composition) {
+      return;
+    }
+    this.composition.off('add', this.add);
+    this.composition.off('remove', this.remove);
+  },
+  methods: {
+    add(child, index, anything) {
+      const type = this.openmct.types.get(child.type) || unknownObjectType;
+      this.items.push({
+        model: child,
+        type: type.definition,
+        isAlias: this.keystring !== child.location,
+        objectPath: [child].concat(this.openmct.router.path),
+        objectKeyString: this.openmct.objects.makeKeyString(child.identifier)
+      });
     },
-    methods: {
-        add(child, index, anything) {
-            const type = this.openmct.types.get(child.type) || unknownObjectType;
-            this.items.push({
-                model: child,
-                type: type.definition,
-                isAlias: this.keystring !== child.location,
-                objectPath: [child].concat(this.openmct.router.path),
-                objectKeyString: this.openmct.objects.makeKeyString(child.identifier)
-            });
-        },
-        remove(identifier) {
-            this.items = this.items
-                .filter((i) => {
-                    return i.model.identifier.key !== identifier.key
-                        || i.model.identifier.namespace !== identifier.namespace;
-                });
-        }
+    remove(identifier) {
+      this.items = this.items.filter((i) => {
+        return (
+          i.model.identifier.key !== identifier.key ||
+          i.model.identifier.namespace !== identifier.namespace
+        );
+      });
     }
+  }
 };
diff --git a/src/plugins/folderView/components/grid-view.scss b/src/plugins/folderView/components/grid-view.scss
index 65c019a19e4..95c9abf4109 100644
--- a/src/plugins/folderView/components/grid-view.scss
+++ b/src/plugins/folderView/components/grid-view.scss
@@ -1,171 +1,196 @@
+@use 'sass:math';
+
 /******************************* GRID VIEW */
 .l-grid-view {
-    display: flex;
-    flex-flow: column nowrap;
-    overflow: auto;
-
-    &__item {
-        flex: 0 0 auto;
-        + .l-grid-view__item { margin-top: $interiorMargin; }
+  display: flex;
+  flex-flow: column nowrap;
+  overflow: auto;
+  height: 100%;
+
+  &__item {
+    flex: 0 0 auto;
+    + .l-grid-view__item {
+      margin-top: $interiorMargin;
     }
+  }
 
-    body.desktop & {
-        flex-flow: row wrap;
-        align-content: flex-start;
+  body.desktop & {
+    flex-flow: row wrap;
+    align-content: flex-start;
 
-        &__item {
-            height: $gridItemDesk;
-            width: $gridItemDesk;
-            margin: 0 $interiorMargin $interiorMargin 0;
-        }
+    &__item {
+      height: $gridItemDesk;
+      width: $gridItemDesk;
+      margin: 0 $interiorMargin $interiorMargin 0;
     }
+  }
 
-    body.mobile & {
-        flex: 1 0 auto;
-    }
+  body.mobile & {
+    flex: 1 0 auto;
+  }
 
-    [class*='l-overlay'] & {
-        // When this view is in an overlay, prevent navigation
-        pointer-events: none;
-    }
+  [class*='l-overlay'] & {
+    // When this view is in an overlay, prevent navigation
+    pointer-events: none;
+  }
 }
 
 /******************************* GRID ITEMS */
 .c-grid-item {
-    // Mobile-first
-    @include button($bg: $colorItemBg, $fg: $colorItemFg);
-    cursor: pointer;
-    display: flex;
-    padding: $interiorMarginLg;
-
-    &__type-icon {
-        filter: $colorKeyFilter;
-        flex: 0 0 $gridItemMobile;
-        font-size: floor($gridItemMobile / 2);
-        margin-right: $interiorMarginLg;
+  // Mobile-first
+  @include button($bg: $colorItemBg, $fg: $colorItemFg);
+  @include cControlHov();
+  cursor: pointer;
+  display: flex;
+  padding: $interiorMarginLg;
+
+  &__type-icon {
+    filter: $colorKeyFilter;
+    flex: 0 0 $gridItemMobile;
+    font-size: floor(math.div($gridItemMobile, 2));
+    margin-right: $interiorMarginLg;
+  }
+
+  &.is-alias {
+    // Object is an alias to an original.
+    [class*='__type-icon'] {
+      @include isAlias();
     }
+  }
 
-    &.is-alias {
-        // Object is an alias to an original.
-        [class*='__type-icon'] {
-            @include isAlias();
-        }
+  &.is-status--notebook-default {
+    .is-status__indicator {
+      display: block;
+
+      &:before {
+        color: $colorFilter;
+        content: $glyph-icon-notebook-page;
+        font-family: symbolsfont;
+      }
     }
+  }
 
-    &.is-status--notebook-default {
-        .is-status__indicator {
-            display: block;
+  &.is-status--current {
+    .is-status__indicator {
+      display: block;
 
-            &:before {
-                color: $colorFilter;
-                content: $glyph-icon-notebook-page;
-                font-family: symbolsfont;
-            }
-        }
+      &:before {
+        color: $colorFilter;
+        content: $glyph-icon-asterisk;
+        font-family: symbolsfont;
+      }
     }
+  }
 
-    &[class*='is-status--missing'],
-    &[class*='is-status--suspect']{
-        [class*='__type-icon'],
-        [class*='__details'] {
-            opacity: $opacityMissing;
-        }
-    }
+  &.is-status--draft {
+    .is-status__indicator {
+      display: block;
 
-    &__details {
-        display: flex;
-        flex-flow: column nowrap;
-        flex: 1 1 auto;
+      &:before {
+        color: $colorStatusAlert;
+        content: $glyph-icon-draft;
+        font-family: symbolsfont;
+      }
     }
+  }
 
-    &__name {
-        @include ellipsize();
-        color: $colorItemFg;
-        font-size: 1.2em;
-        font-weight: 400;
-        margin-bottom: $interiorMarginSm;
+  &[class*='is-status--missing'],
+  &[class*='is-status--suspect'] {
+    [class*='__type-icon'],
+    [class*='__details'] {
+      opacity: $opacityMissing;
     }
+  }
 
-    &__metadata {
-        color: $colorItemFgDetails;
-        font-size: 0.9em;
-
-        body.mobile & {
-            [class*='__item-count'] {
-                &:before {
-                    content: ' - ';
-                }
-            }
-        }
-    }
+  &__details {
+    display: flex;
+    flex-flow: column nowrap;
+    flex: 1 1 auto;
+  }
 
-    &__controls {
-        color: $colorItemFgDetails;
-        flex: 0 0 64px;
-        font-size: 1.2em;
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-
-        > * + * {
-            margin-left: $interiorMargin;
+  &__name {
+    @include ellipsize();
+    color: $colorItemFg;
+    font-size: 1.2em;
+    font-weight: 400;
+    margin-bottom: $interiorMarginSm;
+  }
+
+  &__metadata {
+    color: $colorItemFgDetails;
+    //font-size: 0.9em;
+
+    body.mobile & {
+      [class*='__item-count'] {
+        &:before {
+          content: ' - ';
         }
+      }
     }
+  }
 
-    body.desktop & {
-        $transOutMs: 300ms;
-        flex-flow: column nowrap;
-        transition: $transOutMs ease-in-out;
+  &__controls {
+    color: $colorItemFgDetails;
+    flex: 0 0 64px;
+    font-size: 1.2em;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
 
-        &:hover {
-            filter: $filterItemHoverFg;
-            transition: $transIn;
+    > * + * {
+      margin-left: $interiorMargin;
+    }
+  }
 
-            .c-grid-item__type-icon {
-                transform: scale(1.1);
-                transition: $transInBounce;
-            }
-        }
+  body.desktop & {
+    $transOutMs: 300ms;
+    flex-flow: column nowrap;
 
-        > * {
-            margin: 0; // Reset from mobile
-        }
+    &:hover {
+      .c-grid-item__type-icon {
+        transform: scale(1.1);
+      }
+    }
 
-        &__controls {
-            align-items: baseline;
-            flex: 0 0 auto;
-            order: 1;
-            .c-info-button,
-            .c-pointer-icon { display: none; }
-        }
+    > * {
+      margin: 0; // Reset from mobile
+    }
 
-        &__type-icon {
-            flex: 1 1 auto;
-            font-size: floor($gridItemDesk / 3);
-            margin: $interiorMargin 22.5% $interiorMargin * 3 22.5%;
-            order: 2;
-            transform-origin: center;
-            transition: all $transOutMs ease-in-out;
-        }
+    &__controls {
+      align-items: baseline;
+      flex: 0 0 auto;
+      order: 1;
+      .c-info-button,
+      .c-pointer-icon {
+        display: none;
+      }
+    }
 
-        &__details {
-            flex: 0 0 auto;
-            justify-content: flex-end;
-            order: 3;
-        }
+    &__type-icon {
+      flex: 1 1 auto;
+      font-size: floor(math.div($gridItemDesk, 3));
+      margin: $interiorMargin 22.5% $interiorMargin * 3 22.5%;
+      order: 2;
+    }
 
-        &__metadata {
-            display: flex;
+    &__details {
+      flex: 0 0 auto;
+      justify-content: flex-end;
+      order: 3;
+    }
 
-            &__type {
-                flex: 1 1 auto;
-                @include ellipsize();
-            }
+    &__metadata {
+      display: flex;
 
-            &__item-count {
-                opacity: 0.7;
-                flex: 0 0 auto;
-            }
-        }
+      &__type {
+        flex: 1 1 auto;
+        @include ellipsize();
+      }
+
+      &__item-count {
+        opacity: 0.7;
+        flex: 0 0 auto;
+      }
     }
+  }
 }
diff --git a/src/plugins/folderView/components/list-item.scss b/src/plugins/folderView/components/list-item.scss
index 8e99c4a64e1..d824ec2d7b8 100644
--- a/src/plugins/folderView/components/list-item.scss
+++ b/src/plugins/folderView/components/list-item.scss
@@ -1,30 +1,32 @@
 /******************************* LIST ITEM */
 .c-list-item {
-    &__name__type-icon {
-        color: $colorItemTreeIcon;
-    }
+  color: $colorItemFgDetails;
 
-    &__name__name {
-        @include ellipsize();
+  &__name__type-icon {
+    color: $colorItemTreeIcon;
+  }
 
-        a & {
-            color: $colorItemFg;
-        }
-    }
+  &__name__name {
+    @include ellipsize();
 
-    &:not(.c-list-item__name) {
-        color: $colorItemFgDetails;
+    a & {
+      // .c-list-item_name a element
+      color: $colorItemFg;
     }
+  }
 
-    &.is-alias {
-        // Object is an alias to an original.
-        [class*='__type-icon'] {
-            @include isAlias();
-        }
-    }
+  &:not(.c-list-item__name) {
+  }
 
-    [class*='l-overlay'] & {
-        // When this view is in an overlay, prevent navigation
-        pointer-events: none;
+  &.is-alias {
+    // Object is an alias to an original.
+    [class*='__type-icon'] {
+      @include isAlias();
     }
+  }
+
+  [class*='l-overlay'] & {
+    // When this view is in an overlay, prevent navigation
+    pointer-events: none;
+  }
 }
diff --git a/src/plugins/folderView/components/list-view.scss b/src/plugins/folderView/components/list-view.scss
deleted file mode 100644
index 8b73cf3c7c6..00000000000
--- a/src/plugins/folderView/components/list-view.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-/******************************* LIST VIEW */
-.c-list-view {
-    overflow-x: auto !important;
-    overflow-y: auto;
-
-    tbody tr {
-        background: $colorListItemBg;
-        transition: $transOut;
-    }
-
-    body.desktop & {
-        tbody tr {
-            cursor: pointer;
-
-            &:hover {
-                background: $colorListItemBgHov;
-                filter: $filterHov;
-                transition: $transIn;
-            }
-        }
-    }
-
-    td {
-        $p: floor($interiorMargin * 1.5);
-        @include ellipsize();
-        line-height: 120%; // Needed for icon alignment
-        max-width: 0;
-        padding-top: $p;
-        padding-bottom: $p;
-        width: 25%;
-    }
-}
diff --git a/src/plugins/folderView/components/status-listener.js b/src/plugins/folderView/components/status-listener.js
index 7ee7eee8d45..932f86a0d0a 100644
--- a/src/plugins/folderView/components/status-listener.js
+++ b/src/plugins/folderView/components/status-listener.js
@@ -1,33 +1,33 @@
 export default {
-    inject: ['openmct'],
-    props: {
-        item: {
-            type: Object,
-            required: true
-        }
-    },
-    computed: {
-        statusClass() {
-            return (this.status) ? `is-status--${this.status}` : '';
-        }
-    },
-    data() {
-        return {
-            status: ''
-        };
-    },
-    methods: {
-        setStatus(status) {
-            this.status = status;
-        }
-    },
-    mounted() {
-        let identifier = this.item.model.identifier;
-
-        this.status = this.openmct.status.get(identifier);
-        this.removeStatusListener = this.openmct.status.observe(identifier, this.setStatus);
-    },
-    destroyed() {
-        this.removeStatusListener();
+  inject: ['openmct'],
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    statusClass() {
+      return this.status ? `is-status--${this.status}` : '';
     }
+  },
+  data() {
+    return {
+      status: ''
+    };
+  },
+  methods: {
+    setStatus(status) {
+      this.status = status;
+    }
+  },
+  mounted() {
+    let identifier = this.item.model.identifier;
+
+    this.status = this.openmct.status.get(identifier);
+    this.removeStatusListener = this.openmct.status.observe(identifier, this.setStatus);
+  },
+  unmounted() {
+    this.removeStatusListener();
+  }
 };
diff --git a/src/plugins/folderView/constants.js b/src/plugins/folderView/constants.js
index 99c1427e111..a90aa45f207 100644
--- a/src/plugins/folderView/constants.js
+++ b/src/plugins/folderView/constants.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
diff --git a/src/plugins/folderView/plugin.js b/src/plugins/folderView/plugin.js
index d335da724ff..6b46f3d6def 100644
--- a/src/plugins/folderView/plugin.js
+++ b/src/plugins/folderView/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,18 +19,24 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+import FolderGridView from './FolderGridView.js';
+import FolderListView from './FolderListView.js';
 
-define([
-    './FolderGridView',
-    './FolderListView'
-], function (
-    FolderGridView,
-    FolderListView
-) {
-    return function plugin() {
-        return function install(openmct) {
-            openmct.objectViews.addProvider(new FolderGridView(openmct));
-            openmct.objectViews.addProvider(new FolderListView(openmct));
-        };
-    };
-});
+export default function () {
+  return function install(openmct) {
+    openmct.types.addType('folder', {
+      name: 'Folder',
+      key: 'folder',
+      description:
+        "Create folders to organize other objects or links to objects without the ability to edit it's properties.",
+      cssClass: 'icon-folder',
+      creatable: true,
+      initialize: function (domainObject) {
+        domainObject.composition = [];
+      }
+    });
+
+    openmct.objectViews.addProvider(new FolderGridView(openmct));
+    openmct.objectViews.addProvider(new FolderListView(openmct));
+  };
+}
diff --git a/src/plugins/folderView/pluginSpec.js b/src/plugins/folderView/pluginSpec.js
new file mode 100644
index 00000000000..d081ca03834
--- /dev/null
+++ b/src/plugins/folderView/pluginSpec.js
@@ -0,0 +1,157 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+import { nextTick } from 'vue';
+
+import FolderPlugin from './plugin.js';
+
+describe('The folder plugin', () => {
+  let openmct;
+  let folderPlugin;
+
+  beforeEach((done) => {
+    openmct = createOpenMct();
+    folderPlugin = new FolderPlugin();
+    openmct.install(folderPlugin);
+
+    openmct.on('start', done);
+    openmct.startHeadless();
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  describe('the folder object type', () => {
+    let folderType;
+
+    beforeEach(() => {
+      folderType = openmct.types.get('folder');
+    });
+
+    it('is installed by the plugin', () => {
+      expect(folderType).toBeDefined();
+    });
+
+    it('is user creatable', () => {
+      expect(folderType.definition.creatable).toBe(true);
+    });
+  });
+
+  describe('the folder grid view', () => {
+    let gridViewProvider;
+    let listViewProvider;
+    let folderObject;
+    let addCallback;
+    let parentDiv;
+    let childDiv;
+
+    beforeEach(() => {
+      parentDiv = document.createElement('div');
+      childDiv = document.createElement('div');
+      parentDiv.appendChild(childDiv);
+
+      folderObject = {
+        identifier: {
+          namespace: 'test-namespace',
+          key: 'folder-object'
+        },
+        name: 'A folder!',
+        type: 'folder',
+        composition: [
+          {
+            namespace: 'test-namespace',
+            key: 'child-object-1'
+          },
+          {
+            namespace: 'test-namespace',
+            key: 'child-object-2'
+          },
+          {
+            namespace: 'test-namespace',
+            key: 'child-object-3'
+          },
+          {
+            namespace: 'test-namespace',
+            key: 'child-object-4'
+          }
+        ]
+      };
+
+      gridViewProvider = openmct.objectViews
+        .get(folderObject, [folderObject])
+        .find((view) => view.key === 'grid');
+      listViewProvider = openmct.objectViews
+        .get(folderObject, [folderObject])
+        .find((view) => view.key === 'list-view');
+
+      const fakeCompositionCollection = jasmine.createSpyObj('compositionCollection', [
+        'on',
+        'load'
+      ]);
+      fakeCompositionCollection.on.and.callFake((eventName, callback) => {
+        if (eventName === 'add') {
+          addCallback = callback;
+        }
+      });
+      fakeCompositionCollection.load.and.callFake(() => {
+        folderObject.composition.forEach((identifier) => {
+          addCallback({
+            identifier,
+            type: 'folder'
+          });
+        });
+      });
+      spyOn(openmct.composition, 'get').and.returnValue(fakeCompositionCollection);
+    });
+
+    describe('the grid view', () => {
+      it('is installed by the plugin and is applicable to the folder type', () => {
+        expect(gridViewProvider).toBeDefined();
+      });
+      it("renders each item contained in the folder's composition", async () => {
+        let folderView = gridViewProvider.view(folderObject, [folderObject]);
+        folderView.show(childDiv, true);
+
+        await nextTick();
+
+        let children = parentDiv.getElementsByClassName('js-folder-child');
+        expect(children.length).toBe(folderObject.composition.length);
+      });
+    });
+
+    describe('the list view', () => {
+      it('installs a list view for the folder type', () => {
+        expect(listViewProvider).toBeDefined();
+      });
+      it("renders each item contained in the folder's composition", async () => {
+        let folderView = listViewProvider.view(folderObject, [folderObject]);
+        folderView.show(childDiv, true);
+
+        await nextTick();
+
+        let children = parentDiv.getElementsByClassName('js-folder-child');
+        expect(children.length).toBe(folderObject.composition.length);
+      });
+    });
+  });
+});
diff --git a/src/plugins/formActions/CreateAction.js b/src/plugins/formActions/CreateAction.js
new file mode 100644
index 00000000000..fcc3fae7909
--- /dev/null
+++ b/src/plugins/formActions/CreateAction.js
@@ -0,0 +1,193 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * 'License'); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import _ from 'lodash';
+import { v4 as uuid } from 'uuid';
+
+import CreateWizard from './CreateWizard.js';
+import PropertiesAction from './PropertiesAction.js';
+
+export default class CreateAction extends PropertiesAction {
+  #transaction;
+
+  constructor(openmct, type, parentDomainObject) {
+    super(openmct);
+
+    this.type = type;
+    this.parentDomainObject = parentDomainObject;
+    this.#transaction = null;
+  }
+
+  invoke() {
+    this._showCreateForm(this.type);
+  }
+
+  /**
+   * @private
+   */
+  async _onSave(changes) {
+    let parentDomainObjectPath;
+
+    Object.entries(changes).forEach(([key, value]) => {
+      if (key === 'location') {
+        parentDomainObjectPath = value;
+
+        return;
+      }
+
+      const existingValue = this.domainObject[key];
+      if (!(existingValue instanceof Array) && typeof existingValue === 'object') {
+        value = _.merge(existingValue, value);
+      }
+
+      _.set(this.domainObject, key, value);
+    });
+
+    const parentDomainObject = this.openmct.objects.toMutable(parentDomainObjectPath[0]);
+
+    this.domainObject.modified = Date.now();
+    this.domainObject.location = this.openmct.objects.makeKeyString(parentDomainObject.identifier);
+    this.domainObject.identifier.namespace = parentDomainObject.identifier.namespace;
+
+    // Show saving progress dialog
+    let dialog = this.openmct.overlays.progressDialog({
+      progressPerc: null,
+      message:
+        'Do not navigate away from this page or close this browser tab while this message is displayed.',
+      iconClass: 'info',
+      title: 'Saving'
+    });
+
+    try {
+      await this.openmct.objects.save(this.domainObject);
+      const compositionCollection = await this.openmct.composition.get(parentDomainObject);
+      compositionCollection.add(this.domainObject);
+      await this.saveTransaction();
+
+      this._navigateAndEdit(this.domainObject, parentDomainObjectPath);
+
+      this.openmct.notifications.info('Save successful');
+    } catch (err) {
+      console.error(err);
+      this.openmct.notifications.error(`Error saving objects: ${err}`);
+    } finally {
+      this.openmct.objects.destroyMutable(parentDomainObject);
+      dialog.dismiss();
+    }
+  }
+
+  /**
+   * @private
+   */
+  _onCancel() {
+    this.#transaction.cancel().then(() => {
+      this.openmct.objects.endTransaction();
+      this.#transaction = null;
+    });
+  }
+
+  /**
+   * @private
+   */
+  async _navigateAndEdit(domainObject, parentDomainObjectpath) {
+    let objectPath;
+    let self = this;
+    if (parentDomainObjectpath) {
+      objectPath = parentDomainObjectpath && [domainObject].concat(parentDomainObjectpath);
+    } else {
+      objectPath = await this.openmct.objects.getOriginalPath(domainObject.identifier);
+    }
+
+    const url =
+      '#/browse/' +
+      objectPath
+        .map((object) => object && this.openmct.objects.makeKeyString(object.identifier))
+        .reverse()
+        .join('/');
+
+    function editObject() {
+      const objectView = self.openmct.objectViews.get(domainObject, objectPath)[0];
+      const canEdit =
+        objectView && objectView.canEdit && objectView.canEdit(domainObject, objectPath);
+
+      if (canEdit) {
+        self.openmct.editor.edit();
+      }
+    }
+
+    this.openmct.router.once('afterNavigation', editObject);
+
+    this.openmct.router.navigate(url);
+  }
+
+  /**
+   * @private
+   */
+  _showCreateForm(type) {
+    const typeDefinition = this.openmct.types.get(type);
+    const definition = typeDefinition.definition;
+    const domainObject = {
+      name: `Unnamed ${definition.name}`,
+      type,
+      identifier: {
+        key: uuid(),
+        namespace: this.parentDomainObject.identifier.namespace
+      }
+    };
+
+    this.domainObject = this.openmct.objects.toMutable(domainObject);
+
+    if (definition.initialize) {
+      definition.initialize(this.domainObject);
+    }
+
+    const createWizard = new CreateWizard(this.openmct, this.domainObject, this.parentDomainObject);
+    const formStructure = createWizard.getFormStructure(true);
+    formStructure.title = 'Create a New ' + definition.name;
+
+    this.startTransaction();
+
+    this.openmct.forms
+      .showForm(formStructure)
+      .then(this._onSave.bind(this))
+      .catch(this._onCancel.bind(this))
+      .finally(() => {
+        this.openmct.objects.destroyMutable(this.domainObject);
+      });
+  }
+
+  startTransaction() {
+    if (!this.openmct.objects.isTransactionActive()) {
+      this.#transaction = this.openmct.objects.startTransaction();
+    }
+  }
+
+  async saveTransaction() {
+    if (!this.#transaction) {
+      return;
+    }
+
+    await this.#transaction.commit();
+    this.openmct.objects.endTransaction();
+    this.#transaction = null;
+  }
+}
diff --git a/src/plugins/formActions/CreateActionSpec.js b/src/plugins/formActions/CreateActionSpec.js
new file mode 100644
index 00000000000..c4741030994
--- /dev/null
+++ b/src/plugins/formActions/CreateActionSpec.js
@@ -0,0 +1,123 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import { debounce } from 'lodash';
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+
+import CreateAction from './CreateAction.js';
+
+let parentObject;
+let parentObjectPath;
+let unObserve;
+
+describe('The create action plugin', () => {
+  let openmct;
+
+  const TYPES = [
+    'clock',
+    'conditionWidget',
+    'conditionWidget',
+    'example.imagery',
+    'example.state-generator',
+    'flexible-layout',
+    'folder',
+    'generator',
+    'hyperlink',
+    'LadTable',
+    'LadTableSet',
+    'layout',
+    'mmgis',
+    'notebook',
+    'plan',
+    'table',
+    'tabs',
+    'telemetry-mean',
+    'telemetry.plot.bar-graph',
+    'telemetry.plot.overlay',
+    'telemetry.plot.stacked',
+    'time-strip',
+    'timer',
+    'webpage'
+  ];
+
+  beforeEach((done) => {
+    openmct = createOpenMct();
+
+    openmct.on('start', done);
+    openmct.startHeadless();
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  describe('creates new objects for a', () => {
+    beforeEach(() => {
+      parentObject = {
+        name: 'mock folder',
+        type: 'folder',
+        identifier: {
+          key: 'mock-folder',
+          namespace: ''
+        },
+        composition: []
+      };
+      parentObjectPath = [parentObject];
+
+      spyOn(openmct.objects, 'save');
+      openmct.objects.save.and.callThrough();
+      spyOn(openmct.forms, 'showForm');
+      openmct.forms.showForm.and.callFake((formStructure) => {
+        return Promise.resolve({
+          name: 'test',
+          notes: 'test notes',
+          location: parentObjectPath
+        });
+      });
+    });
+
+    afterEach(() => {
+      parentObject = null;
+      unObserve();
+    });
+
+    TYPES.forEach((type) => {
+      it(`type ${type}`, (done) => {
+        function callback(newObject) {
+          const composition = newObject.composition;
+
+          openmct.objects.get(composition[0]).then((object) => {
+            expect(object.type).toEqual(type);
+            expect(object.location).toEqual(openmct.objects.makeKeyString(parentObject.identifier));
+
+            done();
+          });
+        }
+
+        const deBouncedCallback = debounce(callback, 300);
+        unObserve = openmct.objects.observe(parentObject, '*', deBouncedCallback);
+
+        const createAction = new CreateAction(openmct, type, parentObject);
+        createAction.invoke();
+      });
+    });
+  });
+});
diff --git a/src/plugins/formActions/CreateWizard.js b/src/plugins/formActions/CreateWizard.js
new file mode 100644
index 00000000000..4b8252e18cf
--- /dev/null
+++ b/src/plugins/formActions/CreateWizard.js
@@ -0,0 +1,145 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * 'License'); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+export default class CreateWizard {
+  constructor(openmct, domainObject, parent) {
+    this.openmct = openmct;
+
+    this.domainObject = domainObject;
+    this.type = openmct.types.get(domainObject.type);
+
+    this.model = domainObject;
+    this.parent = parent;
+    this.properties = this.type.definition.form || [];
+  }
+
+  addNotes(sections) {
+    const row = {
+      control: 'textarea',
+      cssClass: 'l-input-lg',
+      key: 'notes',
+      name: 'Notes',
+      required: false,
+      value: this.domainObject.notes
+    };
+
+    sections.forEach((section) => {
+      if (section.name !== 'Properties') {
+        return;
+      }
+
+      section.rows.unshift(row);
+    });
+  }
+
+  addTitle(sections) {
+    const row = {
+      control: 'textfield',
+      cssClass: 'l-input-lg',
+      key: 'name',
+      name: 'Title',
+      pattern: `\\S+`,
+      required: true,
+      value: this.domainObject.name
+    };
+
+    sections.forEach((section) => {
+      if (section.name !== 'Properties') {
+        return;
+      }
+
+      section.rows.unshift(row);
+    });
+  }
+
+  /**
+   * Get the form model for this wizard; this is a description
+   * that will be rendered to an HTML form. See the
+   * platform/forms bundle
+   * @param {boolean} includeLocation if true, a 'location' section
+   * will be included that will allow the user to select the location
+   * of the newly created object, otherwise the .location property of
+   * the model will be used.
+   */
+  getFormStructure(includeLocation) {
+    let sections = [];
+    let domainObject = this.domainObject;
+    let self = this;
+
+    sections.push({
+      name: 'Properties',
+      rows: this.properties
+        .map((property) => {
+          const row = JSON.parse(JSON.stringify(property));
+          row.value = this.getValue(row);
+          if (property.validate) {
+            row.validate = property.validate;
+          }
+
+          return row;
+        })
+        .filter((row) => row && row.control)
+    });
+
+    this.addNotes(sections);
+    this.addTitle(sections);
+
+    // Ensure there is always a 'save in' section
+    if (includeLocation) {
+      function validateLocation(data) {
+        const policyCheck = self.openmct.composition.checkPolicy(data.value[0], domainObject);
+        const parentIsPersistable = self.openmct.objects.isPersistable(data.value[0].identifier);
+
+        return policyCheck && parentIsPersistable;
+      }
+
+      sections.push({
+        name: 'Location',
+        cssClass: 'grows',
+        rows: [
+          {
+            name: 'Save In',
+            cssClass: 'grows',
+            control: 'locator',
+            domainObject,
+            required: true,
+            parent: this.parent,
+            validate: validateLocation.bind(this),
+            key: 'location'
+          }
+        ]
+      });
+    }
+
+    return {
+      sections
+    };
+  }
+
+  getValue(row) {
+    if (row.property) {
+      return row.property.reduce((acc, property) => acc && acc[property], this.domainObject);
+    } else {
+      return this.domainObject[row.key];
+    }
+  }
+}
diff --git a/src/plugins/formActions/EditPropertiesAction.js b/src/plugins/formActions/EditPropertiesAction.js
new file mode 100644
index 00000000000..69a829a5a65
--- /dev/null
+++ b/src/plugins/formActions/EditPropertiesAction.js
@@ -0,0 +1,102 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * 'License'); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import _ from 'lodash';
+
+import CreateWizard from './CreateWizard.js';
+import PropertiesAction from './PropertiesAction.js';
+
+export default class EditPropertiesAction extends PropertiesAction {
+  constructor(openmct) {
+    super(openmct);
+
+    this.name = 'Edit Properties...';
+    this.key = 'properties';
+    this.description = 'Edit properties of this object.';
+    this.cssClass = 'major icon-pencil';
+    this.hideInDefaultMenu = true;
+    this.group = 'action';
+    this.priority = 10;
+    this.formProperties = {};
+  }
+
+  appliesTo(objectPath) {
+    const object = objectPath[0];
+    const definition = this._getTypeDefinition(object.type);
+    const persistable = this.openmct.objects.isPersistable(object.identifier);
+
+    return persistable && definition && definition.creatable;
+  }
+
+  invoke(objectPath) {
+    return this._showEditForm(objectPath);
+  }
+
+  /**
+   * @private
+   */
+  async _onSave(changes) {
+    if (!this.openmct.objects.isTransactionActive()) {
+      this.openmct.objects.startTransaction();
+    }
+
+    try {
+      Object.entries(changes).forEach(([key, value]) => {
+        const existingValue = this.domainObject[key];
+        if (!Array.isArray(existingValue) && typeof existingValue === 'object') {
+          value = _.merge(existingValue, value);
+        }
+
+        this.openmct.objects.mutate(this.domainObject, key, value);
+      });
+      const transaction = this.openmct.objects.getActiveTransaction();
+      await transaction.commit();
+      this.openmct.objects.endTransaction();
+    } catch (error) {
+      this.openmct.notifications.error('Error saving objects');
+      console.error(error);
+    }
+  }
+
+  /**
+   * @private
+   */
+  _onCancel() {
+    //noop
+  }
+
+  /**
+   * @private
+   */
+  _showEditForm(objectPath) {
+    this.domainObject = objectPath[0];
+
+    const createWizard = new CreateWizard(this.openmct, this.domainObject, objectPath[1]);
+    const formStructure = createWizard.getFormStructure(false);
+    formStructure.title = 'Edit ' + this.domainObject.name;
+
+    return this.openmct.forms
+      .showForm(formStructure)
+      .then(this._onSave.bind(this))
+      .catch(this._onCancel.bind(this));
+  }
+}
diff --git a/src/plugins/formActions/PropertiesAction.js b/src/plugins/formActions/PropertiesAction.js
new file mode 100644
index 00000000000..113898e2ff3
--- /dev/null
+++ b/src/plugins/formActions/PropertiesAction.js
@@ -0,0 +1,35 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * 'License'); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+export default class PropertiesAction {
+  constructor(openmct) {
+    this.openmct = openmct;
+  }
+
+  /**
+   * @private
+   */
+  _getTypeDefinition(type) {
+    const TypeDefinition = this.openmct.types.get(type);
+
+    return TypeDefinition.definition;
+  }
+}
diff --git a/src/plugins/formActions/plugin.js b/src/plugins/formActions/plugin.js
new file mode 100644
index 00000000000..99c6751b092
--- /dev/null
+++ b/src/plugins/formActions/plugin.js
@@ -0,0 +1,29 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import EditPropertiesAction from './EditPropertiesAction.js';
+
+export default function () {
+  return function (openmct) {
+    openmct.actions.register(new EditPropertiesAction(openmct));
+  };
+}
diff --git a/src/plugins/formActions/pluginSpec.js b/src/plugins/formActions/pluginSpec.js
new file mode 100644
index 00000000000..10b8ad61727
--- /dev/null
+++ b/src/plugins/formActions/pluginSpec.js
@@ -0,0 +1,210 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import { debounce } from 'lodash';
+import { createMouseEvent, createOpenMct, resetApplicationState } from 'utils/testing';
+import { nextTick } from 'vue';
+
+describe('EditPropertiesAction plugin', () => {
+  let editPropertiesAction;
+  let openmct;
+  let element;
+
+  beforeEach((done) => {
+    element = document.createElement('div');
+    element.style.display = 'block';
+    element.style.width = '1920px';
+    element.style.height = '1080px';
+
+    openmct = createOpenMct();
+    openmct.on('start', done);
+    openmct.startHeadless(element);
+
+    editPropertiesAction = openmct.actions.getAction('properties');
+  });
+
+  afterEach(() => {
+    editPropertiesAction = null;
+
+    return resetApplicationState(openmct);
+  });
+
+  it('editPropertiesAction exists', () => {
+    expect(editPropertiesAction.key).toEqual('properties');
+  });
+
+  it('edit properties action applies to only persistable objects', () => {
+    spyOn(openmct.objects, 'isPersistable').and.returnValue(true);
+
+    const domainObject = {
+      name: 'mock folder',
+      type: 'folder',
+      identifier: {
+        key: 'mock-folder',
+        namespace: ''
+      },
+      composition: []
+    };
+    const isApplicableTo = editPropertiesAction.appliesTo([domainObject]);
+    expect(isApplicableTo).toBe(true);
+  });
+
+  it('edit properties action does not apply to non persistable objects', () => {
+    spyOn(openmct.objects, 'isPersistable').and.returnValue(false);
+
+    const domainObject = {
+      name: 'mock folder',
+      type: 'folder',
+      identifier: {
+        key: 'mock-folder',
+        namespace: ''
+      },
+      composition: []
+    };
+    const isApplicableTo = editPropertiesAction.appliesTo([domainObject]);
+    expect(isApplicableTo).toBe(false);
+  });
+
+  it('edit properties action when invoked shows form', (done) => {
+    const domainObject = {
+      name: 'mock folder',
+      notes: 'mock notes',
+      type: 'folder',
+      identifier: {
+        key: 'mock-folder',
+        namespace: ''
+      },
+      modified: 1643065068597,
+      persisted: 1643065068600,
+      composition: []
+    };
+
+    editPropertiesAction
+      .invoke([domainObject])
+      .then(() => {
+        done();
+      })
+      .catch(() => {
+        done();
+      });
+
+    nextTick(() => {
+      const form = document.querySelector('.js-form');
+      const title = form.querySelector('input');
+      expect(title.value).toEqual(domainObject.name);
+
+      const notes = form.querySelector('textArea');
+      expect(notes.value).toEqual(domainObject.notes);
+
+      const buttons = form.querySelectorAll('button');
+      expect(buttons[0].textContent.trim()).toEqual('OK');
+      expect(buttons[1].textContent.trim()).toEqual('Cancel');
+
+      const clickEvent = createMouseEvent('click');
+      buttons[1].dispatchEvent(clickEvent);
+    });
+  });
+
+  it('edit properties action saves changes', (done) => {
+    const oldName = 'mock folder';
+    const newName = 'renamed mock folder';
+    const domainObject = {
+      name: oldName,
+      notes: 'mock notes',
+      type: 'folder',
+      identifier: {
+        key: 'mock-folder',
+        namespace: ''
+      },
+      modified: 1643065068597,
+      persisted: 1643065068600,
+      composition: []
+    };
+    let unObserve;
+
+    function callback(newObject) {
+      expect(newObject.name).not.toEqual(oldName);
+      expect(newObject.name).toEqual(newName);
+
+      unObserve();
+      done();
+    }
+
+    const deBouncedCallback = debounce(callback, 300);
+    unObserve = openmct.objects.observe(domainObject, '*', deBouncedCallback);
+
+    editPropertiesAction.invoke([domainObject]);
+
+    nextTick(() => {
+      const form = document.querySelector('.js-form');
+      const title = form.querySelector('input');
+      const notes = form.querySelector('textArea');
+
+      const buttons = form.querySelectorAll('button');
+      expect(buttons[0].textContent.trim()).toEqual('OK');
+      expect(buttons[1].textContent.trim()).toEqual('Cancel');
+
+      expect(title.value).toEqual(domainObject.name);
+      expect(notes.value).toEqual(domainObject.notes);
+
+      // change input field value and dispatch event for it
+      title.focus();
+      title.value = newName;
+      title.dispatchEvent(new Event('input'));
+      title.blur();
+
+      const clickEvent = createMouseEvent('click');
+      buttons[0].dispatchEvent(clickEvent);
+    });
+  });
+
+  it('edit properties action discards changes', (done) => {
+    const name = 'mock folder';
+    const domainObject = {
+      name,
+      notes: 'mock notes',
+      type: 'folder',
+      identifier: {
+        key: 'mock-folder',
+        namespace: ''
+      },
+      modified: 1643065068597,
+      persisted: 1643065068600,
+      composition: []
+    };
+
+    editPropertiesAction
+      .invoke([domainObject])
+      .then(() => {
+        expect(domainObject.name).toEqual(name);
+        done();
+      })
+      .catch(() => {
+        expect(domainObject.name).toEqual(name);
+        done();
+      });
+
+    const form = document.querySelector('.js-form');
+    const buttons = form.querySelectorAll('button');
+    const clickEvent = createMouseEvent('click');
+    buttons[1].dispatchEvent(clickEvent);
+  });
+});
diff --git a/src/plugins/gauge/GaugeCompositionPolicy.js b/src/plugins/gauge/GaugeCompositionPolicy.js
new file mode 100644
index 00000000000..d334c4f62c5
--- /dev/null
+++ b/src/plugins/gauge/GaugeCompositionPolicy.js
@@ -0,0 +1,51 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+export default function GaugeCompositionPolicy(openmct) {
+  function hasNumericTelemetry(domainObject) {
+    const hasTelemetry = openmct.telemetry.isTelemetryObject(domainObject);
+    if (!hasTelemetry) {
+      return false;
+    }
+
+    const metadata = openmct.telemetry.getMetadata(domainObject);
+
+    return metadata.values().length > 0 && hasDomainAndRange(metadata);
+  }
+
+  function hasDomainAndRange(metadata) {
+    return (
+      metadata.valuesForHints(['range']).length > 0 &&
+      metadata.valuesForHints(['domain']).length > 0
+    );
+  }
+
+  return {
+    allow: function (parent, child) {
+      if (parent.type === 'gauge') {
+        return hasNumericTelemetry(child);
+      }
+
+      return true;
+    }
+  };
+}
diff --git a/src/plugins/gauge/GaugePlugin.js b/src/plugins/gauge/GaugePlugin.js
new file mode 100644
index 00000000000..23fab150038
--- /dev/null
+++ b/src/plugins/gauge/GaugePlugin.js
@@ -0,0 +1,208 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
+
+import GaugeFormController from './components/GaugeFormController.vue';
+import GaugeCompositionPolicy from './GaugeCompositionPolicy.js';
+import GaugeViewProvider from './GaugeViewProvider.js';
+
+export const GAUGE_TYPES = [
+  ['Filled Dial', 'dial-filled'],
+  ['Needle Dial', 'dial-needle'],
+  ['Vertical Meter', 'meter-vertical'],
+  ['Vertical Meter Inverted', 'meter-vertical-inverted'],
+  ['Horizontal Meter', 'meter-horizontal']
+];
+
+export default function () {
+  return function install(openmct) {
+    openmct.objectViews.addProvider(new GaugeViewProvider(openmct));
+
+    openmct.forms.addNewFormControl('gauge-controller', getGaugeFormController(openmct));
+    openmct.types.addType('gauge', {
+      name: 'Gauge',
+      creatable: true,
+      description:
+        "Graphically visualize a telemetry element's current value between a minimum and maximum.",
+      cssClass: 'icon-gauge',
+      initialize(domainObject) {
+        domainObject.composition = [];
+        domainObject.configuration = {
+          gaugeController: {
+            gaugeType: GAUGE_TYPES[0][1],
+            isDisplayMinMax: true,
+            isDisplayCurVal: true,
+            isDisplayUnits: true,
+            isUseTelemetryLimits: true,
+            limitLow: 10,
+            limitHigh: 90,
+            max: 100,
+            min: 0,
+            precision: 2
+          }
+        };
+      },
+      form: [
+        {
+          name: 'Gauge type',
+          options: GAUGE_TYPES.map((type) => {
+            return {
+              name: type[0],
+              value: type[1]
+            };
+          }),
+          control: 'select',
+          cssClass: 'l-input-sm',
+          key: 'gaugeController',
+          property: ['configuration', 'gaugeController', 'gaugeType']
+        },
+        {
+          name: 'Display current value',
+          control: 'toggleSwitch',
+          cssClass: 'l-input',
+          key: 'isDisplayCurVal',
+          property: ['configuration', 'gaugeController', 'isDisplayCurVal']
+        },
+        {
+          name: 'Display units',
+          control: 'toggleSwitch',
+          cssClass: 'l-input',
+          key: 'isDisplayUnits',
+          property: ['configuration', 'gaugeController', 'isDisplayUnits']
+        },
+        {
+          name: 'Display range values',
+          control: 'toggleSwitch',
+          cssClass: 'l-input',
+          key: 'isDisplayMinMax',
+          property: ['configuration', 'gaugeController', 'isDisplayMinMax']
+        },
+        {
+          name: 'Float precision',
+          control: 'numberfield',
+          cssClass: 'l-input-sm',
+          key: 'precision',
+          property: ['configuration', 'gaugeController', 'precision']
+        },
+        {
+          name: 'Value ranges and limits',
+          control: 'gauge-controller',
+          cssClass: 'l-input',
+          key: 'gaugeController',
+          required: false,
+          hideFromInspector: true,
+          property: ['configuration', 'gaugeController'],
+          validate: ({ value }, callback) => {
+            if (value.isUseTelemetryLimits) {
+              return true;
+            }
+
+            const { min, max, limitLow, limitHigh } = value;
+            const valid = {
+              min: true,
+              max: true,
+              limitLow: true,
+              limitHigh: true
+            };
+
+            if (min === '') {
+              valid.min = false;
+            }
+
+            if (max === '') {
+              valid.max = false;
+            }
+
+            if (max < min) {
+              valid.min = false;
+              valid.max = false;
+            }
+
+            if (limitLow !== '') {
+              valid.limitLow = min <= limitLow && limitLow < max;
+            }
+
+            if (limitHigh !== '') {
+              valid.limitHigh = min < limitHigh && limitHigh <= max;
+            }
+
+            if (
+              valid.limitLow &&
+              valid.limitHigh &&
+              limitLow !== '' &&
+              limitHigh !== '' &&
+              limitLow > limitHigh
+            ) {
+              valid.limitLow = false;
+              valid.limitHigh = false;
+            }
+
+            if (callback) {
+              callback(valid);
+            }
+
+            return valid.min && valid.max && valid.limitLow && valid.limitHigh;
+          }
+        }
+      ]
+    });
+    openmct.composition.addPolicy(new GaugeCompositionPolicy(openmct).allow);
+  };
+
+  function getGaugeFormController(openmct) {
+    let destroyComponent;
+
+    return {
+      show(element, model, onChange) {
+        const { vNode, destroy } = mount(
+          {
+            el: element,
+            components: {
+              GaugeFormController
+            },
+            provide: {
+              openmct
+            },
+            data() {
+              return {
+                model,
+                onChange
+              };
+            },
+            template: `<GaugeFormController :model="model" @on-change="onChange"></GaugeFormController>`
+          },
+          {
+            app: openmct.app,
+            element
+          }
+        );
+        destroyComponent = destroy;
+
+        return vNode.componentInstance;
+      },
+      destroy() {
+        destroyComponent();
+      }
+    };
+  }
+}
diff --git a/src/plugins/gauge/GaugePluginSpec.js b/src/plugins/gauge/GaugePluginSpec.js
new file mode 100644
index 00000000000..3df52ea83aa
--- /dev/null
+++ b/src/plugins/gauge/GaugePluginSpec.js
@@ -0,0 +1,827 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * 'License'); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import { debounce } from 'lodash';
+import { createOpenMct, renderWhenVisible, resetApplicationState } from 'utils/testing';
+import { nextTick } from 'vue';
+
+let gaugeDomainObject = {
+  identifier: {
+    key: 'gauge',
+    namespace: 'test-namespace'
+  },
+  type: 'gauge',
+  composition: []
+};
+
+describe('Gauge plugin', () => {
+  let openmct;
+  let child;
+  let gaugeHolder;
+
+  beforeEach((done) => {
+    gaugeHolder = document.createElement('div');
+    gaugeHolder.style.display = 'block';
+    gaugeHolder.style.width = '1920px';
+    gaugeHolder.style.height = '1080px';
+
+    child = document.createElement('div');
+    gaugeHolder.appendChild(child);
+
+    openmct = createOpenMct();
+    openmct.on('start', done);
+
+    openmct.install(openmct.plugins.Gauge());
+
+    openmct.startHeadless();
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  it('Plugin installed by default', () => {
+    const GaugeType = openmct.types.get('gauge');
+
+    expect(GaugeType).not.toBeNull();
+    expect(GaugeType.definition.name).toEqual('Gauge');
+  });
+
+  it('Gauge plugin is creatable', () => {
+    const GaugeType = openmct.types.get('gauge');
+
+    expect(GaugeType.definition.creatable).toBeTrue();
+  });
+
+  it('Gauge plugin is creatable', () => {
+    const GaugeType = openmct.types.get('gauge');
+
+    expect(GaugeType.definition.creatable).toBeTrue();
+  });
+
+  it('Gauge form controller', () => {
+    const gaugeController = openmct.forms.getFormControl('gauge-controller');
+    expect(gaugeController).toBeDefined();
+  });
+
+  describe('Gauge with Filled Dial', () => {
+    let gaugeViewProvider;
+    let gaugeView;
+    let gaugeViewObject;
+    let mutablegaugeObject;
+    let randomValue;
+
+    const minValue = -1;
+    const maxValue = 1;
+
+    beforeEach(() => {
+      randomValue = Math.random();
+      gaugeViewObject = {
+        ...gaugeDomainObject,
+        configuration: {
+          gaugeController: {
+            gaugeType: 'dial-filled',
+            isDisplayMinMax: true,
+            isDisplayCurVal: true,
+            isDisplayUnits: true,
+            isUseTelemetryLimits: false,
+            limitLow: -0.9,
+            limitHigh: 0.9,
+            max: maxValue,
+            min: minValue,
+            precision: 2
+          }
+        },
+        composition: [
+          {
+            namespace: 'test-namespace',
+            key: 'test-object'
+          }
+        ],
+        id: 'test-object',
+        name: 'gauge'
+      };
+
+      const testObjectProvider = jasmine.createSpyObj('testObjectProvider', [
+        'get',
+        'create',
+        'update',
+        'observe'
+      ]);
+
+      openmct.editor = {};
+      openmct.editor.isEditing = () => false;
+
+      const applicableViews = openmct.objectViews.get(gaugeViewObject, [gaugeViewObject]);
+      gaugeViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'gauge');
+
+      testObjectProvider.get.and.returnValue(Promise.resolve(gaugeViewObject));
+      testObjectProvider.create.and.returnValue(Promise.resolve(gaugeViewObject));
+      openmct.objects.addProvider('test-namespace', testObjectProvider);
+      testObjectProvider.observe.and.returnValue(() => {});
+      testObjectProvider.create.and.returnValue(Promise.resolve(true));
+      testObjectProvider.update.and.returnValue(Promise.resolve(true));
+
+      spyOn(openmct.telemetry, 'getMetadata').and.returnValue({
+        valuesForHints: () => {
+          return [
+            {
+              source: 'sin'
+            }
+          ];
+        },
+        value: () => 1
+      });
+      spyOn(openmct.telemetry, 'getValueFormatter').and.returnValue({
+        parse: () => {
+          return 2000;
+        }
+      });
+      spyOn(openmct.telemetry, 'getFormatMap').and.returnValue({
+        sin: {
+          format: (datum) => {
+            return randomValue;
+          }
+        }
+      });
+      spyOn(openmct.telemetry, 'getLimits').and.returnValue({ limits: () => Promise.resolve() });
+      spyOn(openmct.telemetry, 'request').and.returnValue(Promise.resolve([randomValue]));
+      spyOn(openmct.time, 'bounds').and.returnValue({
+        start: 1000,
+        end: 5000
+      });
+
+      return openmct.objects.getMutable(gaugeViewObject.identifier).then((mutableObject) => {
+        mutablegaugeObject = mutableObject;
+        gaugeView = gaugeViewProvider.view(mutablegaugeObject, [mutablegaugeObject]);
+        gaugeView.show(child, false, { renderWhenVisible });
+
+        return nextTick();
+      });
+    });
+
+    afterEach(() => {
+      gaugeView.destroy();
+
+      return resetApplicationState(openmct);
+    });
+
+    it('provides gauge view', () => {
+      expect(gaugeViewProvider).toBeDefined();
+    });
+
+    it('renders gauge element', () => {
+      const gaugeElement = gaugeHolder.querySelectorAll('.js-gauge-wrapper');
+      expect(gaugeElement.length).toBe(1);
+    });
+
+    it('renders major elements', () => {
+      const wrapperElement = gaugeHolder.querySelector('.js-gauge-wrapper');
+      const rangeElement = gaugeHolder.querySelector('.js-gauge-dial-range');
+      const valueElement = gaugeHolder.querySelector('.js-dial-current-value');
+
+      const hasMajorElements = Boolean(wrapperElement && rangeElement && valueElement);
+
+      expect(hasMajorElements).toBe(true);
+    });
+
+    it('renders correct min max values', () => {
+      expect(gaugeHolder.querySelector('.js-gauge-dial-range').textContent).toMatch(
+        new RegExp(`\\s*${minValue}\\s*${maxValue}\\s*`)
+      );
+    });
+
+    it('renders correct current value', (done) => {
+      function WatchUpdateValue() {
+        const textElement = gaugeHolder.querySelector('.js-dial-current-value');
+        expect(
+          Number(textElement.textContent).toFixed(
+            gaugeViewObject.configuration.gaugeController.precision
+          )
+        ).toBe(randomValue.toFixed(gaugeViewObject.configuration.gaugeController.precision));
+        done();
+      }
+
+      const debouncedWatchUpdate = debounce(WatchUpdateValue, 200);
+      nextTick(debouncedWatchUpdate);
+    });
+  });
+
+  describe('Gauge with Needle Dial', () => {
+    let gaugeViewProvider;
+    let gaugeView;
+    let gaugeViewObject;
+    let mutablegaugeObject;
+    let randomValue;
+
+    const minValue = -1;
+    const maxValue = 1;
+    beforeEach(() => {
+      randomValue = Math.random();
+      gaugeViewObject = {
+        ...gaugeDomainObject,
+        configuration: {
+          gaugeController: {
+            gaugeType: 'dial-needle',
+            isDisplayMinMax: true,
+            isDisplayCurVal: true,
+            isDisplayUnits: true,
+            isUseTelemetryLimits: false,
+            limitLow: -0.9,
+            limitHigh: 0.9,
+            max: maxValue,
+            min: minValue,
+            precision: 2
+          }
+        },
+        composition: [
+          {
+            namespace: 'test-namespace',
+            key: 'test-object'
+          }
+        ],
+        id: 'test-object',
+        name: 'gauge'
+      };
+
+      const testObjectProvider = jasmine.createSpyObj('testObjectProvider', [
+        'get',
+        'create',
+        'update',
+        'observe'
+      ]);
+
+      openmct.editor = {};
+      openmct.editor.isEditing = () => false;
+
+      const applicableViews = openmct.objectViews.get(gaugeViewObject, [gaugeViewObject]);
+      gaugeViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'gauge');
+
+      testObjectProvider.get.and.returnValue(Promise.resolve(gaugeViewObject));
+      testObjectProvider.create.and.returnValue(Promise.resolve(gaugeViewObject));
+      openmct.objects.addProvider('test-namespace', testObjectProvider);
+      testObjectProvider.observe.and.returnValue(() => {});
+      testObjectProvider.create.and.returnValue(Promise.resolve(true));
+      testObjectProvider.update.and.returnValue(Promise.resolve(true));
+
+      spyOn(openmct.telemetry, 'getMetadata').and.returnValue({
+        valuesForHints: () => {
+          return [
+            {
+              source: 'sin'
+            }
+          ];
+        },
+        value: () => 1
+      });
+      spyOn(openmct.telemetry, 'getValueFormatter').and.returnValue({
+        parse: () => {
+          return 2000;
+        }
+      });
+      spyOn(openmct.telemetry, 'getFormatMap').and.returnValue({
+        sin: {
+          format: (datum) => {
+            return randomValue;
+          }
+        }
+      });
+      spyOn(openmct.telemetry, 'getLimits').and.returnValue({ limits: () => Promise.resolve() });
+      spyOn(openmct.telemetry, 'request').and.returnValue(Promise.resolve([randomValue]));
+      spyOn(openmct.time, 'bounds').and.returnValue({
+        start: 1000,
+        end: 5000
+      });
+
+      return openmct.objects.getMutable(gaugeViewObject.identifier).then((mutableObject) => {
+        mutablegaugeObject = mutableObject;
+        gaugeView = gaugeViewProvider.view(mutablegaugeObject, [mutablegaugeObject]);
+        gaugeView.show(child, false, { renderWhenVisible });
+
+        return nextTick();
+      });
+    });
+
+    afterEach(() => {
+      gaugeView.destroy();
+
+      return resetApplicationState(openmct);
+    });
+
+    it('provides gauge view', () => {
+      expect(gaugeViewProvider).toBeDefined();
+    });
+
+    it('renders gauge element', () => {
+      const gaugeElement = gaugeHolder.querySelectorAll('.js-gauge-wrapper');
+      expect(gaugeElement.length).toBe(1);
+    });
+
+    it('renders major elements', () => {
+      const wrapperElement = gaugeHolder.querySelector('.js-gauge-wrapper');
+      const rangeElement = gaugeHolder.querySelector('.js-gauge-dial-range');
+      const valueElement = gaugeHolder.querySelector('.js-dial-current-value');
+
+      const hasMajorElements = Boolean(wrapperElement && rangeElement && valueElement);
+
+      expect(hasMajorElements).toBe(true);
+    });
+
+    it('renders correct min max values', () => {
+      expect(gaugeHolder.querySelector('.js-gauge-dial-range').textContent).toMatch(
+        new RegExp(`\\s*${minValue}\\s*${maxValue}\\s*`)
+      );
+    });
+
+    it('renders correct current value', (done) => {
+      function WatchUpdateValue() {
+        const textElement = gaugeHolder.querySelector('.js-dial-current-value');
+        expect(
+          Number(textElement.textContent).toFixed(
+            gaugeViewObject.configuration.gaugeController.precision
+          )
+        ).toBe(randomValue.toFixed(gaugeViewObject.configuration.gaugeController.precision));
+        done();
+      }
+
+      const debouncedWatchUpdate = debounce(WatchUpdateValue, 200);
+      nextTick(debouncedWatchUpdate);
+    });
+  });
+
+  describe('Gauge with Vertical Meter', () => {
+    let gaugeViewProvider;
+    let gaugeView;
+    let gaugeViewObject;
+    let mutablegaugeObject;
+    let randomValue;
+
+    const minValue = -1;
+    const maxValue = 1;
+    beforeEach(() => {
+      randomValue = Math.random();
+      gaugeViewObject = {
+        ...gaugeDomainObject,
+        configuration: {
+          gaugeController: {
+            gaugeType: 'meter-vertical',
+            isDisplayMinMax: true,
+            isDisplayCurVal: true,
+            isDisplayUnits: true,
+            isUseTelemetryLimits: false,
+            limitLow: -0.9,
+            limitHigh: 0.9,
+            max: maxValue,
+            min: minValue,
+            precision: 2
+          }
+        },
+        composition: [
+          {
+            namespace: 'test-namespace',
+            key: 'test-object'
+          }
+        ],
+        id: 'test-object',
+        name: 'gauge'
+      };
+
+      const testObjectProvider = jasmine.createSpyObj('testObjectProvider', [
+        'get',
+        'create',
+        'update',
+        'observe'
+      ]);
+
+      openmct.editor = {};
+      openmct.editor.isEditing = () => false;
+
+      const applicableViews = openmct.objectViews.get(gaugeViewObject, [gaugeViewObject]);
+      gaugeViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'gauge');
+
+      testObjectProvider.get.and.returnValue(Promise.resolve(gaugeViewObject));
+      testObjectProvider.create.and.returnValue(Promise.resolve(gaugeViewObject));
+      openmct.objects.addProvider('test-namespace', testObjectProvider);
+      testObjectProvider.observe.and.returnValue(() => {});
+      testObjectProvider.create.and.returnValue(Promise.resolve(true));
+      testObjectProvider.update.and.returnValue(Promise.resolve(true));
+
+      spyOn(openmct.telemetry, 'getMetadata').and.returnValue({
+        valuesForHints: () => {
+          return [
+            {
+              source: 'sin'
+            }
+          ];
+        },
+        value: () => 1
+      });
+      spyOn(openmct.telemetry, 'getValueFormatter').and.returnValue({
+        parse: () => {
+          return 2000;
+        }
+      });
+      spyOn(openmct.telemetry, 'getFormatMap').and.returnValue({
+        sin: {
+          format: (datum) => {
+            return randomValue;
+          }
+        }
+      });
+      spyOn(openmct.telemetry, 'getLimits').and.returnValue({ limits: () => Promise.resolve() });
+      spyOn(openmct.telemetry, 'request').and.returnValue(Promise.resolve([randomValue]));
+      spyOn(openmct.time, 'bounds').and.returnValue({
+        start: 1000,
+        end: 5000
+      });
+
+      return openmct.objects.getMutable(gaugeViewObject.identifier).then((mutableObject) => {
+        mutablegaugeObject = mutableObject;
+        gaugeView = gaugeViewProvider.view(mutablegaugeObject, [mutablegaugeObject]);
+        gaugeView.show(child, false, { renderWhenVisible });
+
+        return nextTick();
+      });
+    });
+
+    afterEach(() => {
+      gaugeView.destroy();
+
+      return resetApplicationState(openmct);
+    });
+
+    it('provides gauge view', () => {
+      expect(gaugeViewProvider).toBeDefined();
+    });
+
+    it('renders gauge element', () => {
+      const gaugeElement = gaugeHolder.querySelectorAll('.js-gauge-wrapper');
+      expect(gaugeElement.length).toBe(1);
+    });
+
+    it('renders major elements', () => {
+      const wrapperElement = gaugeHolder.querySelector('.js-gauge-wrapper');
+      const rangeElement = gaugeHolder.querySelector('.js-gauge-meter-range');
+      const valueElement = gaugeHolder.querySelector('.js-gauge-current-value');
+
+      const hasMajorElements = Boolean(wrapperElement && rangeElement && valueElement);
+
+      expect(hasMajorElements).toBe(true);
+    });
+
+    it('renders correct min max values', () => {
+      expect(gaugeHolder.querySelector('.js-gauge-meter-range').textContent).toMatch(
+        new RegExp(`\\s*${maxValue}\\s*${minValue}\\s*`)
+      );
+    });
+
+    it('renders correct current value', (done) => {
+      function WatchUpdateValue() {
+        const textElement = gaugeHolder.querySelector('.js-gauge-current-value');
+        expect(
+          Number(textElement.textContent).toFixed(
+            gaugeViewObject.configuration.gaugeController.precision
+          )
+        ).toBe(randomValue.toFixed(gaugeViewObject.configuration.gaugeController.precision));
+        done();
+      }
+
+      const debouncedWatchUpdate = debounce(WatchUpdateValue, 200);
+      nextTick(debouncedWatchUpdate);
+    });
+  });
+
+  describe('Gauge with Vertical Meter Inverted', () => {
+    let gaugeViewProvider;
+    let gaugeView;
+    let gaugeViewObject;
+    let mutablegaugeObject;
+
+    beforeEach(() => {
+      gaugeViewObject = {
+        ...gaugeDomainObject,
+        configuration: {
+          gaugeController: {
+            gaugeType: 'meter-vertical',
+            isDisplayMinMax: true,
+            isDisplayCurVal: true,
+            isDisplayUnits: true,
+            isUseTelemetryLimits: false,
+            limitLow: -0.9,
+            limitHigh: 0.9,
+            max: 1,
+            min: -1,
+            precision: 2
+          }
+        },
+        id: 'test-object',
+        name: 'gauge'
+      };
+
+      const testObjectProvider = jasmine.createSpyObj('testObjectProvider', [
+        'get',
+        'create',
+        'update',
+        'observe'
+      ]);
+
+      openmct.editor = {};
+      openmct.editor.isEditing = () => false;
+
+      const applicableViews = openmct.objectViews.get(gaugeViewObject, [gaugeViewObject]);
+      gaugeViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'gauge');
+
+      testObjectProvider.get.and.returnValue(Promise.resolve(gaugeViewObject));
+      testObjectProvider.create.and.returnValue(Promise.resolve(gaugeViewObject));
+      openmct.objects.addProvider('test-namespace', testObjectProvider);
+      testObjectProvider.observe.and.returnValue(() => {});
+      testObjectProvider.create.and.returnValue(Promise.resolve(true));
+      testObjectProvider.update.and.returnValue(Promise.resolve(true));
+
+      return openmct.objects.getMutable(gaugeViewObject.identifier).then((mutableObject) => {
+        mutablegaugeObject = mutableObject;
+
+        gaugeView = gaugeViewProvider.view(mutablegaugeObject, [mutablegaugeObject]);
+        gaugeView.show(child, false, { renderWhenVisible });
+
+        return nextTick();
+      });
+    });
+
+    afterEach(() => {
+      gaugeView.destroy();
+
+      return resetApplicationState(openmct);
+    });
+
+    it('provides gauge view', () => {
+      expect(gaugeViewProvider).toBeDefined();
+    });
+
+    it('renders gauge element', () => {
+      const gaugeElement = gaugeHolder.querySelectorAll('.js-gauge-wrapper');
+      expect(gaugeElement.length).toBe(1);
+    });
+
+    it('renders major elements', () => {
+      const wrapperElement = gaugeHolder.querySelector('.js-gauge-wrapper');
+      const rangeElement = gaugeHolder.querySelector('.js-gauge-meter-range');
+      const valueElement = gaugeHolder.querySelector('.js-gauge-current-value');
+
+      const hasMajorElements = Boolean(wrapperElement && rangeElement && valueElement);
+
+      expect(hasMajorElements).toBe(true);
+    });
+  });
+
+  describe('Gauge with Horizontal Meter', () => {
+    let gaugeViewProvider;
+    let gaugeView;
+    let gaugeViewObject;
+    let mutablegaugeObject;
+
+    beforeEach(() => {
+      gaugeViewObject = {
+        ...gaugeDomainObject,
+        configuration: {
+          gaugeController: {
+            gaugeType: 'meter-vertical',
+            isDisplayMinMax: true,
+            isDisplayCurVal: true,
+            isDisplayUnits: true,
+            isUseTelemetryLimits: false,
+            limitLow: -0.9,
+            limitHigh: 0.9,
+            max: 1,
+            min: -1,
+            precision: 2
+          }
+        },
+        id: 'test-object',
+        name: 'gauge'
+      };
+
+      const testObjectProvider = jasmine.createSpyObj('testObjectProvider', [
+        'get',
+        'create',
+        'update',
+        'observe'
+      ]);
+
+      openmct.editor = {};
+      openmct.editor.isEditing = () => false;
+
+      const applicableViews = openmct.objectViews.get(gaugeViewObject, [gaugeViewObject]);
+      gaugeViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'gauge');
+
+      testObjectProvider.get.and.returnValue(Promise.resolve(gaugeViewObject));
+      testObjectProvider.create.and.returnValue(Promise.resolve(gaugeViewObject));
+      openmct.objects.addProvider('test-namespace', testObjectProvider);
+      testObjectProvider.observe.and.returnValue(() => {});
+      testObjectProvider.create.and.returnValue(Promise.resolve(true));
+      testObjectProvider.update.and.returnValue(Promise.resolve(true));
+
+      return openmct.objects.getMutable(gaugeViewObject.identifier).then((mutableObject) => {
+        mutablegaugeObject = mutableObject;
+
+        gaugeView = gaugeViewProvider.view(mutablegaugeObject, [mutablegaugeObject]);
+        gaugeView.show(child, false, { renderWhenVisible });
+
+        return nextTick();
+      });
+    });
+
+    afterEach(() => {
+      gaugeView.destroy();
+
+      return resetApplicationState(openmct);
+    });
+
+    it('provides gauge view', () => {
+      expect(gaugeViewProvider).toBeDefined();
+    });
+
+    it('renders gauge element', () => {
+      const gaugeElement = gaugeHolder.querySelectorAll('.js-gauge-wrapper');
+      expect(gaugeElement.length).toBe(1);
+    });
+
+    it('renders major elements', () => {
+      const wrapperElement = gaugeHolder.querySelector('.js-gauge-wrapper');
+      const rangeElement = gaugeHolder.querySelector('.c-gauge__range');
+      const curveElement = gaugeHolder.querySelector('.c-meter');
+
+      const hasMajorElements = Boolean(wrapperElement && rangeElement && curveElement);
+
+      expect(hasMajorElements).toBe(true);
+    });
+  });
+
+  describe('Gauge with Filled Dial with Use Telemetry Limits', () => {
+    let gaugeViewProvider;
+    let gaugeView;
+    let gaugeViewObject;
+    let mutablegaugeObject;
+    let randomValue;
+
+    beforeEach(() => {
+      randomValue = Math.random();
+
+      gaugeViewObject = {
+        ...gaugeDomainObject,
+        configuration: {
+          gaugeController: {
+            gaugeType: 'dial-filled',
+            isDisplayMinMax: true,
+            isDisplayCurVal: true,
+            isDisplayUnits: true,
+            isUseTelemetryLimits: true,
+            limitLow: 10,
+            limitHigh: 90,
+            max: 100,
+            min: 0,
+            precision: 2
+          }
+        },
+        composition: [
+          {
+            namespace: 'test-namespace',
+            key: 'test-object'
+          }
+        ],
+        id: 'test-object',
+        name: 'gauge'
+      };
+
+      const testObjectProvider = jasmine.createSpyObj('testObjectProvider', [
+        'get',
+        'create',
+        'update',
+        'observe'
+      ]);
+
+      openmct.editor = {};
+      openmct.editor.isEditing = () => false;
+
+      const applicableViews = openmct.objectViews.get(gaugeViewObject, [gaugeViewObject]);
+      gaugeViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'gauge');
+
+      testObjectProvider.get.and.returnValue(Promise.resolve(gaugeViewObject));
+      testObjectProvider.create.and.returnValue(Promise.resolve(gaugeViewObject));
+      openmct.objects.addProvider('test-namespace', testObjectProvider);
+      testObjectProvider.observe.and.returnValue(() => {});
+      testObjectProvider.create.and.returnValue(Promise.resolve(true));
+      testObjectProvider.update.and.returnValue(Promise.resolve(true));
+
+      spyOn(openmct.telemetry, 'getMetadata').and.returnValue({
+        valuesForHints: () => {
+          return [
+            {
+              source: 'sin'
+            }
+          ];
+        },
+        value: () => 1
+      });
+      spyOn(openmct.telemetry, 'getValueFormatter').and.returnValue({
+        parse: () => {
+          return 2000;
+        }
+      });
+      spyOn(openmct.telemetry, 'getFormatMap').and.returnValue({
+        sin: {
+          format: (datum) => {
+            return randomValue;
+          }
+        }
+      });
+      spyOn(openmct.telemetry, 'getLimits').and.returnValue({
+        limits: () =>
+          Promise.resolve({
+            CRITICAL: {
+              high: 0.99,
+              low: -0.99
+            }
+          })
+      });
+      spyOn(openmct.telemetry, 'request').and.returnValue(Promise.resolve([randomValue]));
+      spyOn(openmct.time, 'bounds').and.returnValue({
+        start: 1000,
+        end: 5000
+      });
+
+      return openmct.objects.getMutable(gaugeViewObject.identifier).then((mutableObject) => {
+        mutablegaugeObject = mutableObject;
+        gaugeView = gaugeViewProvider.view(mutablegaugeObject, [mutablegaugeObject]);
+        gaugeView.show(child, false, { renderWhenVisible });
+
+        return nextTick();
+      });
+    });
+
+    afterEach(() => {
+      gaugeView.destroy();
+
+      return resetApplicationState(openmct);
+    });
+
+    it('provides gauge view', () => {
+      expect(gaugeViewProvider).toBeDefined();
+    });
+
+    it('renders gauge element', () => {
+      const gaugeElement = gaugeHolder.querySelectorAll('.js-gauge-wrapper');
+      expect(gaugeElement.length).toBe(1);
+    });
+
+    it('renders major elements', () => {
+      const wrapperElement = gaugeHolder.querySelector('.js-gauge-wrapper');
+      const rangeElement = gaugeHolder.querySelector('.js-gauge-dial-range');
+      const valueElement = gaugeHolder.querySelector('.js-dial-current-value');
+
+      const hasMajorElements = Boolean(wrapperElement && rangeElement && valueElement);
+
+      expect(hasMajorElements).toBe(true);
+    });
+
+    it('renders correct min max values', () => {
+      const { min, max } = gaugeViewObject.configuration.gaugeController;
+      expect(gaugeHolder.querySelector('.js-gauge-dial-range').textContent).toMatch(
+        new RegExp(`\\s*${min}\\s*${max}\\s*`)
+      );
+    });
+
+    it('renders correct current value', (done) => {
+      function WatchUpdateValue() {
+        const textElement = gaugeHolder.querySelector('.js-dial-current-value');
+        expect(
+          Number(textElement.textContent).toFixed(
+            gaugeViewObject.configuration.gaugeController.precision
+          )
+        ).toBe(randomValue.toFixed(gaugeViewObject.configuration.gaugeController.precision));
+        done();
+      }
+
+      const debouncedWatchUpdate = debounce(WatchUpdateValue, 200);
+      nextTick(debouncedWatchUpdate);
+    });
+  });
+});
diff --git a/src/plugins/gauge/GaugeViewProvider.js b/src/plugins/gauge/GaugeViewProvider.js
new file mode 100644
index 00000000000..ce1b3750938
--- /dev/null
+++ b/src/plugins/gauge/GaugeViewProvider.js
@@ -0,0 +1,77 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
+
+import GaugeComponent from './components/GaugeComponent.vue';
+
+export default function GaugeViewProvider(openmct) {
+  return {
+    key: 'gauge',
+    name: 'Gauge',
+    cssClass: 'icon-gauge',
+    canView: function (domainObject) {
+      return domainObject.type === 'gauge';
+    },
+    canEdit: function (domainObject) {
+      if (domainObject.type === 'gauge') {
+        return true;
+      }
+    },
+    view: function (domainObject) {
+      let _destroy = null;
+
+      return {
+        show: function (element, isEditing, { renderWhenVisible }) {
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                GaugeComponent
+              },
+              provide: {
+                openmct,
+                domainObject,
+                composition: openmct.composition.get(domainObject),
+                renderWhenVisible
+              },
+              template: '<gauge-component></gauge-component>'
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+        },
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
+        }
+      };
+    },
+    priority: function () {
+      return 1;
+    }
+  };
+}
diff --git a/src/plugins/gauge/components/GaugeComponent.vue b/src/plugins/gauge/components/GaugeComponent.vue
new file mode 100644
index 00000000000..9edf4a3860f
--- /dev/null
+++ b/src/plugins/gauge/components/GaugeComponent.vue
@@ -0,0 +1,761 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div
+    ref="gaugeWrapper"
+    class="c-gauge__wrapper js-gauge-wrapper"
+    :class="gaugeClasses"
+    :aria-label="gaugeTitle"
+    :title="gaugeTitle"
+  >
+    <template v-if="typeDial">
+      <svg
+        ref="gauge"
+        class="c-gauge c-dial"
+        viewBox="0 0 10 10"
+        @mouseover.ctrl="showToolTip"
+        @mouseleave="hideToolTip"
+      >
+        <g class="c-dial__masks">
+          <mask id="gaugeValueMask">
+            <path
+              d="M1.8926 8.1074C1.09734 7.31215 0.605469 6.21352 0.605469 5C0.605469 2.57297 2.57297 0.605469 5 0.605469C7.42703 0.605469 9.39453 2.57297 9.39453 5C9.39453 6.21352 8.90266 7.31215 8.1074 8.1074L7.14066 7.14066C7.6885 6.59281 8.02734 5.83598 8.02734 5C8.02734 3.32804 6.67196 1.97266 5 1.97266C3.32804 1.97266 1.97266 3.32804 1.97266 5C1.97266 5.83598 2.3115 6.59281 2.85934 7.14066L1.8926 8.1074Z"
+              fill="white"
+            />
+          </mask>
+          <mask id="gaugeBgMask">
+            <path
+              d="M8.53553 8.53553C9.44036 7.63071 10 6.38071 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5C0 6.38071 0.559644 7.63071 1.46447 8.53553L2.85934 7.14066C2.3115 6.59281 1.97266 5.83598 1.97266 5C1.97266 3.32804 3.32804 1.97266 5 1.97266C6.67196 1.97266 8.02734 3.32804 8.02734 5C8.02734 5.83598 7.6885 6.59281 7.14066 7.14066L8.53553 8.53553Z"
+              fill="white"
+            />
+          </mask>
+        </g>
+
+        <g class="c-dial__graphics" mask="url(#gaugeBgMask)">
+          <rect class="c-dial__bg" x="0" y="0" width="10" height="10" />
+          <g
+            v-if="isDialLowLimit"
+            class="c-dial__limit-low"
+            :style="`transform: rotate(${dialLowLimitDeg}deg)`"
+          >
+            <rect
+              v-if="isDialLowLimitLow"
+              class="c-dial__low-limit__low"
+              x="5"
+              y="5"
+              width="5"
+              height="5"
+            />
+            <rect
+              v-if="isDialLowLimitMid"
+              class="c-dial__low-limit__mid"
+              x="5"
+              y="0"
+              width="5"
+              height="5"
+            />
+            <rect
+              v-if="isDialLowLimitHigh"
+              class="c-dial__low-limit__high"
+              x="0"
+              y="0"
+              width="5"
+              height="5"
+            />
+          </g>
+          <g
+            v-if="isDialHighLimit"
+            class="c-dial__limit-high"
+            :style="`transform: rotate(${dialHighLimitDeg}deg)`"
+          >
+            <rect
+              v-if="isDialHighLimitLow"
+              class="c-dial__high-limit__low"
+              x="0"
+              y="5"
+              width="5"
+              height="5"
+            />
+            <rect
+              v-if="isDialHighLimitMid"
+              class="c-dial__high-limit__mid"
+              x="0"
+              y="0"
+              width="5"
+              height="5"
+            />
+            <rect
+              v-if="isDialHighLimitHigh"
+              class="c-dial__high-limit__high"
+              x="5"
+              y="0"
+              width="5"
+              height="5"
+            />
+          </g>
+        </g>
+
+        <g class="c-dial__graphics" mask="url(#gaugeValueMask)">
+          <g
+            v-if="typeFilledDial"
+            class="c-dial__filled-value"
+            :style="`transform: rotate(${degValueFilledDial}deg)`"
+          >
+            <rect
+              v-if="isDialFilledValueLow"
+              class="c-dial__filled-value__low"
+              x="5"
+              y="5"
+              width="5"
+              height="5"
+            />
+            <rect
+              v-if="isDialFilledValueMid"
+              class="c-dial__filled-value__mid"
+              x="5"
+              y="0"
+              width="5"
+              height="5"
+            />
+            <rect
+              v-if="isDialFilledValueHigh"
+              class="c-dial__filled-value__high"
+              x="0"
+              y="0"
+              width="5"
+              height="5"
+            />
+          </g>
+          <g
+            v-if="valueInBounds && typeNeedleDial"
+            class="c-dial__needle-value"
+            :style="`transform: rotate(${degValue}deg)`"
+          >
+            <path
+              d="M4.90234 9.39453L5.09766 9.39453L5.30146 8.20874C6.93993 8.05674 8.22265 6.67817 8.22266 5C8.22266 3.22018 6.77982 1.77734 5 1.77734C3.22018 1.77734 1.77734 3.22018 1.77734 5C1.77734 6.67817 3.06007 8.05674 4.69854 8.20874L4.90234 9.39453Z"
+            />
+          </g>
+          <path
+            id="dialTextPath"
+            class="c-dial__range-msg-path"
+            d="M8.3501 5.0001C8.3501 6.85025 6.85025 8.3501 5.0001 8.3501C3.14994 8.3501 1.6501 6.85025 1.6501 5.0001C1.6501 3.14994 3.14994 1.6501 5.0001 1.6501C6.85025 1.6501 8.3501 3.14994 8.3501 5.0001Z"
+            fill="none"
+            style="transform-origin: center; transform: rotate(182deg)"
+          />
+        </g>
+        <g class="c-dial__text">
+          <text
+            v-if="displayUnits"
+            x="50%"
+            y="70%"
+            text-anchor="middle"
+            class="c-gauge__units"
+            font-size="8%"
+          >
+            {{ units }}
+          </text>
+
+          <g
+            v-if="displayMinMax"
+            class="c-dial__range-text js-gauge-dial-range"
+            :font-size="rangeFontSize"
+          >
+            <text transform="translate(1.5 8.7) rotate(-45)" dominant-baseline="hanging">
+              {{ rangeLow }}
+            </text>
+            <text
+              transform="translate(8.4 8.7) rotate(45)"
+              dominant-baseline="hanging"
+              text-anchor="end"
+            >
+              {{ rangeHigh }}
+            </text>
+          </g>
+        </g>
+
+        <svg
+          v-if="!valueInBounds && valueExpected"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+          xml:space="preserve"
+          class="c-dial__value-oor-indicator"
+          x="45%"
+          y="80%"
+          width="1"
+          height="1"
+        >
+          <path
+            d="M448 0H64C28.7.1.1 28.7 0 64v384c.1 35.3 28.7 63.9 64 64h384c35.3-.1 63.9-28.7 64-64V64c-.1-35.3-28.7-63.9-64-64zM288 448h-64v-64h64v64zm10.9-192L280 352h-48l-18.9-96V64H299v192h-.1z"
+          />
+        </svg>
+
+        <svg
+          class="c-gauge__current-value-text-wrapper"
+          :viewBox="curValViewBox"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <rect class="svg-viewbox-debug" x="0" y="0" width="100%" height="100%" />
+          <text
+            class="c-dial__current-value-text js-dial-current-value"
+            font-size="3.5"
+            lengthAdjust="spacing"
+            text-anchor="middle"
+            dominant-baseline="middle"
+            x="50%"
+            y="50%"
+          >
+            <template v-if="displayCurVal">
+              <tspan>{{ curVal }}</tspan>
+            </template>
+          </text>
+        </svg>
+      </svg>
+    </template>
+
+    <template v-if="typeMeter">
+      <div class="c-meter" @mouseover.ctrl="showToolTip" @mouseleave="hideToolTip">
+        <div v-if="displayMinMax" class="c-gauge__range c-meter__range js-gauge-meter-range">
+          <div class="c-meter__range__high">{{ rangeHigh }}</div>
+          <div class="c-meter__range__low">{{ rangeLow }}</div>
+        </div>
+        <div class="c-meter__bg">
+          <div v-if="!valueInBounds && valueExpected" class="c-meter__value-oor-indicator">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 512 512"
+              :preserveAspectRatio="meterOutOfRangeIndicatorAspectRatio"
+            >
+              <path
+                d="M448 0H64C28.7.1.1 28.7 0 64v384c.1 35.3 28.7 63.9 64 64h384c35.3-.1 63.9-28.7 64-64V64c-.1-35.3-28.7-63.9-64-64zM288 448h-64v-64h64v64zm10.9-192L280 352h-48l-18.9-96V64H299v192h-.1z"
+              />
+            </svg>
+          </div>
+
+          <template v-if="typeMeterVertical">
+            <div
+              v-if="valueExpected"
+              class="c-meter__value"
+              :class="{ 'c-meter__value-needle': typeNeedleMeter }"
+              :style="`transform: translateY(${meterValueToPerc}%)`"
+            ></div>
+
+            <div
+              v-if="isMeterLimitHigh"
+              class="c-meter__limit-high"
+              :style="`height: ${meterHighLimitPerc}%`"
+            ></div>
+
+            <div
+              v-if="isMeterLimitLow"
+              class="c-meter__limit-low"
+              :style="`height: ${meterLowLimitPerc}%`"
+            ></div>
+          </template>
+
+          <template v-if="typeMeterHorizontal">
+            <div
+              v-if="valueExpected"
+              class="c-meter__value"
+              :class="{ 'c-meter__value-needle': typeNeedleMeter }"
+              :style="`transform: translateX(${meterValueToPerc * -1}%)`"
+            ></div>
+
+            <div
+              v-if="isMeterLimitHigh"
+              class="c-meter__limit-high"
+              :style="`width: ${meterHighLimitPerc}%`"
+            ></div>
+
+            <div
+              v-if="isMeterLimitLow"
+              class="c-meter__limit-low"
+              :style="`width: ${meterLowLimitPerc}%`"
+            ></div>
+          </template>
+
+          <svg
+            class="c-gauge__current-value-text-wrapper"
+            :viewBox="curValViewBox"
+            preserveAspectRatio="xMidYMid meet"
+          >
+            <rect class="svg-viewbox-debug" x="0" y="0" width="100%" height="100%" />
+            <text
+              class="c-meter__current-value-text js-gauge-current-value"
+              font-size="4"
+              lengthAdjust="spacing"
+              text-anchor="middle"
+              :dominant-baseline="meterTextBaseline"
+              x="50%"
+              y="50%"
+            >
+              <template v-if="displayCurVal">
+                <tspan>{{ curVal }}</tspan>
+                <tspan
+                  v-if="typeMeterHorizontal && displayUnits"
+                  class="c-gauge__units"
+                  font-size="80%"
+                >
+                  {{ units }}
+                </tspan>
+                <tspan
+                  v-if="typeMeterVertical && displayUnits"
+                  x="50%"
+                  dy="3.5"
+                  class="c-gauge__units"
+                  font-size="80%"
+                >
+                  {{ units }}
+                </tspan>
+              </template>
+            </text>
+          </svg>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import stalenessMixin from '@/ui/mixins/staleness-mixin';
+
+import tooltipHelpers from '../../../api/tooltips/tooltipMixins.js';
+import { DIAL_VALUE_DEG_OFFSET, getLimitDegree } from '../gauge-limit-util.js';
+
+const LIMIT_PADDING_IN_PERCENT = 10;
+const DEFAULT_CURRENT_VALUE = '--';
+
+export default {
+  mixins: [stalenessMixin, tooltipHelpers],
+  inject: ['openmct', 'domainObject', 'composition', 'renderWhenVisible'],
+  data() {
+    let gaugeController = this.domainObject.configuration.gaugeController;
+
+    return {
+      curVal: DEFAULT_CURRENT_VALUE,
+      digits: 3,
+      precision: gaugeController.precision,
+      displayMinMax: gaugeController.isDisplayMinMax,
+      displayCurVal: gaugeController.isDisplayCurVal,
+      displayUnits: gaugeController.isDisplayUnits,
+      limitHigh: gaugeController.limitHigh,
+      limitLow: gaugeController.limitLow,
+      rangeHigh: gaugeController.max,
+      rangeLow: gaugeController.min,
+      gaugeType: gaugeController.gaugeType,
+      showUnits: gaugeController.showUnits,
+      activeTimeSystem: this.openmct.time.timeSystem(),
+      units: ''
+    };
+  },
+  computed: {
+    degValue() {
+      return this.percentToDegrees(this.valToPercent(this.curVal));
+    },
+    degValueFilledDial() {
+      if (this.curVal > this.rangeHigh) {
+        return this.percentToDegrees(100);
+      }
+
+      return this.percentToDegrees(this.valToPercent(this.curVal));
+    },
+    dialHighLimitDeg() {
+      return this.percentToDegrees(this.valToPercent(this.limitHigh));
+    },
+    dialLowLimitDeg() {
+      return this.percentToDegrees(this.valToPercent(this.limitLow));
+    },
+    meterOutOfRangeIndicatorAspectRatio() {
+      return this.typeMeterVertical ? 'xMidYMax meet' : 'xMinYMid meet';
+    },
+    meterTextBaseline() {
+      return this.typeMeterVertical ? 'auto' : 'middle';
+    },
+    curValViewBox() {
+      const DIGITS_RATIO = 3;
+      const VIEWBOX_STR = '0 0 X 10';
+
+      return VIEWBOX_STR.replace('X', this.digits * DIGITS_RATIO);
+    },
+    gaugeClasses() {
+      let classes = [`c-gauge--${this.gaugeType}`];
+
+      if (this.isStale) {
+        classes.push('is-stale');
+      }
+
+      return classes;
+    },
+    rangeFontSize() {
+      const CHAR_THRESHOLD = 3;
+      const START_PERC = 8.5;
+      const REDUCE_PERC = 0.8;
+      const RANGE_CHARS_MAX =
+        this.rangeLow && this.rangeHigh
+          ? Math.max(this.rangeLow.toString().length, this.rangeHigh.toString().length)
+          : CHAR_THRESHOLD;
+
+      return this.fontSizeFromChars(RANGE_CHARS_MAX, CHAR_THRESHOLD, START_PERC, REDUCE_PERC);
+    },
+    isDialLowLimit() {
+      return (
+        this.limitLow.toString().length > 0 && this.dialLowLimitDeg < getLimitDegree('low', 'max')
+      );
+    },
+    isDialLowLimitLow() {
+      return this.dialLowLimitDeg >= getLimitDegree('low', 'q1');
+    },
+    isDialLowLimitMid() {
+      return this.dialLowLimitDeg >= getLimitDegree('low', 'q2');
+    },
+    isDialLowLimitHigh() {
+      return this.dialLowLimitDeg >= getLimitDegree('low', 'q3');
+    },
+    isDialHighLimit() {
+      return (
+        this.limitHigh.toString().length > 0 &&
+        this.dialHighLimitDeg < getLimitDegree('high', 'max')
+      );
+    },
+    isDialHighLimitLow() {
+      return this.dialHighLimitDeg <= getLimitDegree('high', 'max');
+    },
+    isDialHighLimitMid() {
+      return this.dialHighLimitDeg <= getLimitDegree('high', 'q2');
+    },
+    isDialHighLimitHigh() {
+      return this.dialHighLimitDeg <= getLimitDegree('high', 'q3');
+    },
+    isDialFilledValueLow() {
+      return this.degValue >= getLimitDegree('low', 'q1');
+    },
+    isDialFilledValueMid() {
+      return this.degValue >= getLimitDegree('low', 'q2');
+    },
+    isDialFilledValueHigh() {
+      return this.degValue >= getLimitDegree('low', 'q3');
+    },
+    isMeterLimitHigh() {
+      return this.limitHigh.toString().length > 0 && this.meterHighLimitPerc > 0;
+    },
+    isMeterLimitLow() {
+      return this.limitLow.toString().length > 0 && this.meterLowLimitPerc > 0;
+    },
+    gaugeTitle() {
+      return this.valueInBounds
+        ? 'Gauge'
+        : 'Value is currently out of range and cannot be graphically displayed';
+    },
+    typeDial() {
+      return this.matchGaugeType('dial');
+    },
+    typeFilledDial() {
+      return this.matchGaugeType('dial-filled');
+    },
+    typeNeedleDial() {
+      return this.matchGaugeType('dial-needle');
+    },
+    typeMeter() {
+      return this.matchGaugeType('meter');
+    },
+    typeMeterHorizontal() {
+      return this.matchGaugeType('horizontal');
+    },
+    typeMeterVertical() {
+      return this.matchGaugeType('vertical');
+    },
+    typeMeterInverted() {
+      return this.matchGaugeType('inverted');
+    },
+    typeFilledMeter() {
+      return true; // Stubbing in for future capability
+    },
+    typeNeedleMeter() {
+      return false; // Stubbing in for future capability
+    },
+    meterValueToPerc() {
+      const meterDirection = this.typeMeterInverted ? -1 : 1;
+
+      if (this.typeFilledMeter) {
+        // Filled meter is a filled rectangle that is transformed along a vertical or horizontal axis
+        // So never move it below the low range more than 100%, or above the high range more than 0%
+        if (this.curVal <= this.rangeLow) {
+          return meterDirection * 100;
+        }
+
+        if (this.curVal >= this.rangeHigh) {
+          return 0;
+        }
+      }
+
+      return this.valToPercentMeter(this.curVal) * meterDirection;
+    },
+    meterHighLimitPerc() {
+      return this.valToPercentMeter(this.limitHigh);
+    },
+    meterLowLimitPerc() {
+      return 100 - this.valToPercentMeter(this.limitLow);
+    },
+    valueExpected() {
+      if (this.curVal === undefined || Object.is(this.curVal, 'null')) {
+        return false;
+      }
+
+      return this.curVal.toString().indexOf(DEFAULT_CURRENT_VALUE) === -1;
+    },
+    valueInBounds() {
+      return this.curVal >= this.rangeLow && this.curVal <= this.rangeHigh;
+    },
+    timeFormatter() {
+      const timeSystem = this.activeTimeSystem;
+      const metadataValue = this.metadata.value(timeSystem.key) || { format: timeSystem.key };
+
+      return this.openmct.telemetry.getValueFormatter(metadataValue);
+    }
+  },
+  watch: {
+    curVal(newCurValue) {
+      if (this.digits < newCurValue.toString().length) {
+        this.digits = newCurValue.toString().length;
+      }
+    }
+  },
+  mounted() {
+    this.composition.on('add', this.addedToComposition);
+    this.composition.on('remove', this.removeTelemetryObject);
+
+    this.composition.load();
+
+    this.openmct.time.on('bounds', this.refreshData);
+    this.openmct.time.on('timeSystem', this.setTimeSystem);
+
+    this.setupClockChangedEvent((domainObject) => {
+      this.triggerUnsubscribeFromStaleness(domainObject);
+      this.subscribeToStaleness(domainObject);
+    });
+  },
+  unmounted() {
+    this.composition.off('add', this.addedToComposition);
+    this.composition.off('remove', this.removeTelemetryObject);
+
+    if (this.unsubscribe) {
+      this.unsubscribe();
+    }
+
+    this.openmct.time.off('bounds', this.refreshData);
+    this.openmct.time.off('timeSystem', this.setTimeSystem);
+  },
+  methods: {
+    getLimitDegree: getLimitDegree,
+    addTelemetryObjectAndSubscribe(domainObject) {
+      this.telemetryObject = domainObject;
+      this.request();
+      this.subscribe();
+
+      this.subscribeToStaleness(domainObject);
+    },
+    addedToComposition(domainObject) {
+      if (this.telemetryObject) {
+        this.confirmRemoval(domainObject);
+      } else {
+        this.addTelemetryObjectAndSubscribe(domainObject);
+      }
+    },
+    confirmRemoval(domainObject) {
+      const dialog = this.openmct.overlays.dialog({
+        iconClass: 'alert',
+        message: 'This action will replace the current telemetry source. Do you want to continue?',
+        buttons: [
+          {
+            label: 'Ok',
+            emphasis: true,
+            callback: () => {
+              this.removeFromComposition();
+              this.removeTelemetryObject();
+              this.addTelemetryObjectAndSubscribe(domainObject);
+              dialog.dismiss();
+            }
+          },
+          {
+            label: 'Cancel',
+            callback: () => {
+              this.removeFromComposition(domainObject);
+              dialog.dismiss();
+            }
+          }
+        ]
+      });
+    },
+    fontSizeFromChars(charNum, charThreshold, startPerc, reducePerc) {
+      const fs =
+        charNum <= charThreshold ? startPerc : startPerc - (charNum - charThreshold) * reducePerc;
+
+      return fs.toString() + '%';
+    },
+    matchGaugeType(str) {
+      return this.gaugeType.indexOf(str) !== -1;
+    },
+    percentToDegrees(vPercent) {
+      return this.round((vPercent / 100) * 270 + DIAL_VALUE_DEG_OFFSET, 2);
+    },
+    removeFromComposition(telemetryObject = this.telemetryObject) {
+      this.composition.remove(telemetryObject);
+    },
+    refreshData(bounds, isTick) {
+      if (!isTick) {
+        this.request();
+      }
+    },
+    removeTelemetryObject() {
+      if (this.unsubscribe) {
+        this.unsubscribe();
+        this.unsubscribe = null;
+      }
+
+      this.triggerUnsubscribeFromStaleness(this.domainObject);
+
+      this.curVal = DEFAULT_CURRENT_VALUE;
+      this.formats = null;
+      this.limitHigh = '';
+      this.limitLow = '';
+      this.metadata = null;
+      this.rangeHigh = null;
+      this.rangeLow = null;
+      this.valueKey = null;
+    },
+    request(domainObject = this.telemetryObject) {
+      this.metadata = this.openmct.telemetry.getMetadata(domainObject);
+      this.formats = this.openmct.telemetry.getFormatMap(this.metadata);
+      const LimitEvaluator = this.openmct.telemetry.getLimits(domainObject);
+      LimitEvaluator.limits().then(this.updateLimits);
+
+      this.valueKey = this.metadata.valuesForHints(['range'])[0].source;
+
+      const options = {
+        strategy: 'latest',
+        timeContext: this.openmct.time.getContextForView([])
+      };
+      this.openmct.telemetry.request(domainObject, options).then((values) => {
+        const length = values.length;
+        this.updateValue(values[length - 1]);
+      });
+
+      this.units = this.metadata.value(this.valueKey).unit || '';
+    },
+    round(val, decimals = this.precision) {
+      let precision = Math.pow(10, decimals);
+
+      return Math.round(val * precision) / precision;
+    },
+    setTimeSystem(timeSystem) {
+      this.activeTimeSystem = timeSystem;
+    },
+    subscribe(domainObject = this.telemetryObject) {
+      this.unsubscribe = this.openmct.telemetry.subscribe(
+        domainObject,
+        this.updateValue.bind(this)
+      );
+    },
+    updateLimits(telemetryLimit) {
+      if (
+        !telemetryLimit ||
+        !this.domainObject.configuration.gaugeController.isUseTelemetryLimits
+      ) {
+        return;
+      }
+
+      let limits = {
+        high: 0,
+        low: 0
+      };
+      if (telemetryLimit.CRITICAL) {
+        limits = telemetryLimit.CRITICAL;
+      } else if (telemetryLimit.DISTRESS) {
+        limits = telemetryLimit.DISTRESS;
+      } else if (telemetryLimit.SEVERE) {
+        limits = telemetryLimit.SEVERE;
+      } else if (telemetryLimit.WARNING) {
+        limits = telemetryLimit.WARNING;
+      } else if (telemetryLimit.WATCH) {
+        limits = telemetryLimit.WATCH;
+      } else {
+        this.openmct.notifications.error(
+          'No limits definition for given telemetry, hiding low and high limits'
+        );
+        this.displayMinMax = false;
+        this.limitHigh = '';
+        this.limitLow = '';
+
+        return;
+      }
+
+      this.limitHigh = this.round(limits.high[this.valueKey]);
+      this.limitLow = this.round(limits.low[this.valueKey]);
+      this.rangeHigh = this.round(
+        this.limitHigh + (this.limitHigh * LIMIT_PADDING_IN_PERCENT) / 100
+      );
+      this.rangeLow = this.round(
+        this.limitLow - Math.abs((this.limitLow * LIMIT_PADDING_IN_PERCENT) / 100)
+      );
+
+      this.displayMinMax = this.domainObject.configuration.gaugeController.isDisplayMinMax;
+    },
+    updateValue(datum) {
+      this.datum = datum;
+
+      if (this.isRendering) {
+        return;
+      }
+
+      const { start, end } = this.openmct.time.bounds();
+      const parsedValue = this.timeFormatter.parse(this.datum);
+
+      const beforeStartOfBounds = parsedValue < start;
+      const afterEndOfBounds = parsedValue > end;
+      if (afterEndOfBounds || beforeStartOfBounds) {
+        return;
+      }
+
+      this.isRendering = this.renderWhenVisible(() => {
+        this.isRendering = false;
+
+        this.curVal = this.round(this.formats[this.valueKey].format(this.datum), this.precision);
+      });
+    },
+    valToPercent(vValue) {
+      // Used by dial
+      if (vValue >= this.rangeHigh && this.typeFilledDial) {
+        // For filled dial, clip values over the high range to prevent over-rotation
+        return 100;
+      }
+
+      return ((vValue - this.rangeLow) / (this.rangeHigh - this.rangeLow)) * 100;
+    },
+    valToPercentMeter(vValue) {
+      return this.round(((this.rangeHigh - vValue) / (this.rangeHigh - this.rangeLow)) * 100, 2);
+    },
+    async showToolTip() {
+      const { CENTER } = this.openmct.tooltips.TOOLTIP_LOCATIONS;
+      this.buildToolTip(await this.getTelemetryPathString(), CENTER, 'gauge');
+    }
+  }
+};
+</script>
diff --git a/src/plugins/gauge/components/GaugeFormController.vue b/src/plugins/gauge/components/GaugeFormController.vue
new file mode 100644
index 00000000000..1fa205cb12a
--- /dev/null
+++ b/src/plugins/gauge/components/GaugeFormController.vue
@@ -0,0 +1,158 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <span class="form-control">
+    <span class="field control" :class="model.cssClass">
+      <ToggleSwitch
+        :id="'gaugeToggle'"
+        :checked="isUseTelemetryLimits"
+        label="Use telemetry limits for minimum and maximum ranges"
+        @change="toggleUseTelemetryLimits"
+      />
+
+      <div v-if="!isUseTelemetryLimits" class="c-form--sub-grid">
+        <div class="c-form__row">
+          <span class="req-indicator req"> </span>
+          <label>Minimum value</label>
+          <input
+            ref="min"
+            v-model.number="min"
+            data-field-name="min"
+            type="number"
+            @input="onChange"
+          />
+        </div>
+
+        <div class="c-form__row">
+          <span class="req-indicator"> </span>
+          <label>Low limit</label>
+          <input
+            ref="limitLow"
+            v-model.number="limitLow"
+            data-field-name="limitLow"
+            type="number"
+            @input="onChange"
+          />
+        </div>
+
+        <div class="c-form__row">
+          <span class="req-indicator"> </span>
+          <label>High limit</label>
+          <input
+            ref="limitHigh"
+            v-model.number="limitHigh"
+            data-field-name="limitHigh"
+            type="number"
+            @input="onChange"
+          />
+        </div>
+
+        <div class="c-form__row">
+          <span class="req-indicator req"> </span>
+          <label>Maximum value</label>
+          <input
+            ref="max"
+            v-model.number="max"
+            data-field-name="max"
+            type="number"
+            @input="onChange"
+          />
+        </div>
+      </div>
+    </span>
+  </span>
+</template>
+
+<script>
+import ToggleSwitch from '@/ui/components/ToggleSwitch.vue';
+
+export default {
+  components: {
+    ToggleSwitch
+  },
+  inject: ['openmct'],
+  props: {
+    model: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['on-change'],
+  data() {
+    this.changes = {};
+
+    return {
+      isUseTelemetryLimits: this.model.value.isUseTelemetryLimits,
+      limitHigh: this.model.value.limitHigh,
+      limitLow: this.model.value.limitLow,
+      max: this.model.value.max,
+      min: this.model.value.min
+    };
+  },
+  methods: {
+    onChange(event) {
+      let data = {
+        model: {}
+      };
+
+      if (event) {
+        const target = event.target;
+        const property = target.dataset.fieldName;
+        data.model.property = Array.from(this.model.property).concat([property]);
+        data.value = this[property];
+        const targetIndicator = target.parentElement.querySelector('.req-indicator');
+        if (targetIndicator.classList.contains('req')) {
+          targetIndicator.classList.add('visited');
+        }
+
+        this.model.validate(data, (valid) => {
+          Object.entries(valid).forEach(([key, isValid]) => {
+            const element = this.$refs[key];
+            const reqIndicatorElement = element.parentElement.querySelector('.req-indicator');
+            reqIndicatorElement.classList.toggle('invalid', !isValid);
+
+            if (
+              reqIndicatorElement.classList.contains('req') &&
+              (!isValid || reqIndicatorElement.classList.contains('visited'))
+            ) {
+              reqIndicatorElement.classList.toggle('valid', isValid);
+            }
+          });
+        });
+      }
+
+      this.$emit('on-change', data);
+    },
+    toggleUseTelemetryLimits() {
+      this.isUseTelemetryLimits = !this.isUseTelemetryLimits;
+      const data = {
+        model: {
+          property: Array.from(this.model.property).concat(['isUseTelemetryLimits'])
+        },
+        value: this.isUseTelemetryLimits
+      };
+      this.$emit('on-change', data);
+    }
+  }
+};
+</script>
diff --git a/src/plugins/gauge/gauge-limit-util.js b/src/plugins/gauge/gauge-limit-util.js
new file mode 100644
index 00000000000..28467c45eff
--- /dev/null
+++ b/src/plugins/gauge/gauge-limit-util.js
@@ -0,0 +1,36 @@
+const GAUGE_LIMITS = {
+  q1: 0,
+  q2: 90,
+  q3: 180,
+  q4: 270
+};
+
+export const DIAL_VALUE_DEG_OFFSET = 45;
+
+// type: low, high
+// quadrant: low, mid, high, max
+export function getLimitDegree(type, quadrant) {
+  if (quadrant === 'max') {
+    return GAUGE_LIMITS.q4 + DIAL_VALUE_DEG_OFFSET;
+  }
+
+  return type === 'low' ? getLowLimitDegree(quadrant) : getHighLimitDegree(quadrant);
+}
+
+function getLowLimitDegree(quadrant) {
+  return GAUGE_LIMITS[quadrant] + DIAL_VALUE_DEG_OFFSET;
+}
+
+function getHighLimitDegree(quadrant) {
+  if (quadrant === 'q1') {
+    return GAUGE_LIMITS.q4 + DIAL_VALUE_DEG_OFFSET;
+  }
+
+  if (quadrant === 'q2') {
+    return GAUGE_LIMITS.q3 + DIAL_VALUE_DEG_OFFSET;
+  }
+
+  if (quadrant === 'q3') {
+    return GAUGE_LIMITS.q2 + DIAL_VALUE_DEG_OFFSET;
+  }
+}
diff --git a/src/plugins/gauge/gauge.scss b/src/plugins/gauge/gauge.scss
new file mode 100644
index 00000000000..ad08cfd4c52
--- /dev/null
+++ b/src/plugins/gauge/gauge.scss
@@ -0,0 +1,335 @@
+$meterNeedlePerc: 1%;
+$meterNeedleMinPx: 4px;
+$meterNeedleMaxPx: 20px;
+$meterNeedleBorderRadius: 5px;
+
+.is-object-type-gauge {
+  overflow: hidden;
+}
+
+.req-indicator {
+  width: 20px;
+
+  &.invalid,
+  &.invalid.req {
+    @include validationState($glyph-icon-x, $colorFormInvalid);
+  }
+  &.valid,
+  &.valid.req {
+    @include validationState($glyph-icon-check, $colorFormValid);
+  }
+  &.req {
+    @include validationState($glyph-icon-asterisk, $colorFormRequired);
+  }
+}
+
+.c-gauge {
+  // Both dial and meter types
+  overflow: hidden;
+
+  &__range,
+  &__units,
+  &__units text {
+    $c: $colorGaugeRange;
+    color: $c;
+    fill: $c;
+  }
+
+  &__wrapper {
+    @include abs();
+    overflow: hidden;
+
+    &.is-stale {
+      @include isStaleHolder();
+
+      [class*='__current-value-text'] {
+        fill: $colorTelemStale;
+        font-style: italic;
+      }
+    }
+  }
+
+  &__current-value-text-wrapper {
+    // SVG
+    position: absolute;
+    height: 100%;
+    width: 100%;
+  }
+}
+
+.c-dial__value-oor-indicator,
+.c-meter__value-oor-indicator {
+  fill: $colorGaugeRange;
+  opacity: 0.5;
+}
+
+/********************************************** DIAL GAUGE */
+.c-dial {
+  max-height: 100%;
+  max-width: 100%;
+  display: block;
+  margin: auto; // Centers SVG in container while allowing scaling
+
+  &__bg {
+    fill: $colorGaugeBg;
+  }
+  &__limit-high rect {
+    fill: $colorGaugeLimitHigh;
+  }
+  &__limit-low rect {
+    fill: $colorGaugeLimitLow;
+  }
+  &__filled-value,
+  &__range-msg-text {
+    fill: $colorGaugeValue;
+  }
+  &__needle-value {
+    fill: $colorGaugeValue;
+  }
+  &__current-value-text {
+    fill: $colorGaugeTextValue;
+    font-family: $heroFont;
+  }
+
+  &__units-text,
+  &__range-text {
+    fill: $colorGaugeRange;
+  }
+
+  &__graphics g {
+    transform-origin: center;
+  }
+}
+
+/********************************************** METER GAUGE */
+.c-meter {
+  // Common styles for c-meter
+  $meterOutOfRangeIndicatorMaxSize: 50%;
+  @include abs();
+  display: flex;
+
+  &__range {
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: space-between;
+  }
+
+  &__bg {
+    background: $colorGaugeBg;
+    border-radius: $basicCr;
+    flex: 1 1 auto;
+    overflow: hidden;
+  }
+
+  &__value {
+    // Filled area
+    position: absolute;
+    background: $colorGaugeValue;
+    z-index: 1;
+  }
+
+  &__value-needle {
+    background: none !important;
+    &:before {
+      @include abs();
+      content: '';
+      display: block;
+      background: $colorGaugeValue;
+    }
+  }
+
+  &__value-oor-indicator {
+    $mxPx: 50px;
+    $wh: 50%;
+    position: absolute;
+    height: $wh;
+    width: $wh;
+    max-height: $mxPx;
+    max-width: $mxPx;
+
+    svg {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      max-height: 100%;
+      max-width: 100%;
+    }
+  }
+
+  &__current-value-text {
+    fill: $colorGaugeTextValue;
+    font-family: $heroFont;
+  }
+
+  .c-gauge__curval {
+    fill: $colorGaugeMeterTextValue !important;
+  }
+
+  [class*='limit'] {
+    position: absolute;
+  }
+
+  &__limit-high {
+    background: $colorGaugeLimitHigh;
+  }
+
+  &__limit-low {
+    background: $colorGaugeLimitLow;
+  }
+}
+
+.c-meter {
+  .c-gauge--meter-vertical &,
+  .c-gauge--meter-vertical-inverted & {
+    &__range {
+      flex-direction: column;
+      min-width: min-content;
+      margin-right: $interiorMarginSm;
+      text-align: right;
+    }
+
+    &__value {
+      // Filled area
+      $lrM: $marginGaugeMeterValue;
+      left: $lrM;
+      right: $lrM;
+      top: 0;
+      bottom: 0;
+    }
+
+    &__value-needle {
+      right: 0;
+
+      &:before {
+        border-bottom-left-radius: $meterNeedleBorderRadius;
+        border-top-left-radius: $meterNeedleBorderRadius;
+        height: $meterNeedlePerc;
+        min-height: $meterNeedleMinPx;
+        max-height: $meterNeedleMaxPx;
+      }
+    }
+
+    [class*='limit'] {
+      left: 0;
+      right: 0;
+    }
+
+    .c-meter__value-oor-indicator {
+      bottom: 10%;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .c-gauge--meter-vertical & {
+    &__limit-low {
+      bottom: 0;
+    }
+
+    &__limit-high {
+      top: 0;
+    }
+
+    &__value-needle {
+      &:before {
+        bottom: auto;
+        transform: translateY(-50%);
+      }
+    }
+  }
+
+  .c-gauge--meter-vertical-inverted & {
+    &__limit-low {
+      top: 0;
+    }
+
+    &__limit-high {
+      bottom: 0;
+    }
+
+    &__range__low {
+      order: 1;
+    }
+
+    &__range__high {
+      order: 2;
+    }
+
+    &__value-needle {
+      &:before {
+        top: auto;
+        transform: translateY(50%);
+      }
+    }
+  }
+
+  .c-gauge--meter-horizontal & {
+    flex-direction: column;
+
+    &__range {
+      flex-direction: row;
+      min-height: min-content;
+      margin-top: $interiorMarginSm;
+      order: 2;
+
+      &__high {
+        order: 2;
+      }
+
+      &__low {
+        order: 1;
+      }
+    }
+
+    &__bg {
+      order: 1;
+    }
+
+    &__value {
+      // Filled area
+      $m: $marginGaugeMeterValue;
+      top: $m;
+      bottom: $m;
+      left: 0;
+      right: 0;
+    }
+
+    &__value-needle {
+      top: 0;
+
+      &:before {
+        border-bottom-left-radius: $meterNeedleBorderRadius;
+        border-bottom-right-radius: $meterNeedleBorderRadius;
+        left: auto;
+        width: $meterNeedlePerc;
+        min-width: $meterNeedleMinPx;
+        max-width: $meterNeedleMaxPx;
+        transform: translateX(50%);
+      }
+    }
+
+    [class*='limit'] {
+      top: 0;
+      bottom: 0;
+    }
+
+    &__limit-low {
+      left: 0;
+    }
+
+    &__limit-high {
+      right: 0;
+    }
+
+    .c-meter__value-oor-indicator {
+      // Horizontal meter
+      left: 2%;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+}
+.svg-viewbox-debug {
+  fill: rgba(deeppink, 0.5);
+  display: none;
+}
diff --git a/src/plugins/goToOriginalAction/goToOriginalAction.js b/src/plugins/goToOriginalAction/goToOriginalAction.js
index 1eb156f33ed..d7387a7cf0e 100644
--- a/src/plugins/goToOriginalAction/goToOriginalAction.js
+++ b/src/plugins/goToOriginalAction/goToOriginalAction.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,36 +21,44 @@
  *****************************************************************************/
 
 export default class GoToOriginalAction {
-    constructor(openmct) {
-        this.name = 'Go To Original';
-        this.key = 'goToOriginal';
-        this.description = 'Go to the original unlinked instance of this object';
-        this.group = 'action';
-        this.priority = 4;
+  constructor(openmct) {
+    this.name = 'Go To Original';
+    this.key = 'goToOriginal';
+    this.description = 'Go to the original unlinked instance of this object';
+    this.group = 'action';
+    this.priority = 4;
 
-        this._openmct = openmct;
-    }
-    invoke(objectPath) {
-        this._openmct.objects.getOriginalPath(objectPath[0].identifier)
-            .then((originalPath) => {
-                let url = '#/browse/' + originalPath
-                    .map(function (o) {
-                        return o && this._openmct.objects.makeKeyString(o.identifier);
-                    }.bind(this))
-                    .reverse()
-                    .slice(1)
-                    .join('/');
+    this._openmct = openmct;
+  }
+  invoke(objectPath) {
+    this._openmct.objects.getOriginalPath(objectPath[0].identifier).then((originalPath) => {
+      let url =
+        '#/browse/' +
+        originalPath
+          .map(
+            function (o) {
+              return o && this._openmct.objects.makeKeyString(o.identifier);
+            }.bind(this)
+          )
+          .reverse()
+          .slice(1)
+          .join('/');
 
-                this._openmct.router.navigate(url);
-            });
+      this._openmct.router.navigate(url);
+    });
+  }
+  appliesTo(objectPath) {
+    if (this._openmct.editor.isEditing()) {
+      return false;
     }
-    appliesTo(objectPath) {
-        let parentKeystring = objectPath[1] && this._openmct.objects.makeKeyString(objectPath[1].identifier);
 
-        if (!parentKeystring) {
-            return false;
-        }
+    let parentKeystring =
+      objectPath[1] && this._openmct.objects.makeKeyString(objectPath[1].identifier);
 
-        return (parentKeystring !== objectPath[0].location);
+    if (!parentKeystring) {
+      return false;
     }
+
+    return parentKeystring !== objectPath[0].location;
+  }
 }
diff --git a/src/plugins/goToOriginalAction/plugin.js b/src/plugins/goToOriginalAction/plugin.js
index 19decac2ad0..fde169f001d 100644
--- a/src/plugins/goToOriginalAction/plugin.js
+++ b/src/plugins/goToOriginalAction/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,10 +19,10 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import GoToOriginalAction from './goToOriginalAction';
+import GoToOriginalAction from './goToOriginalAction.js';
 
 export default function () {
-    return function (openmct) {
-        openmct.actions.register(new GoToOriginalAction(openmct));
-    };
+  return function (openmct) {
+    openmct.actions.register(new GoToOriginalAction(openmct));
+  };
 }
diff --git a/src/plugins/goToOriginalAction/pluginSpec.js b/src/plugins/goToOriginalAction/pluginSpec.js
index 6bd428e2e66..c1cb5c58f06 100644
--- a/src/plugins/goToOriginalAction/pluginSpec.js
+++ b/src/plugins/goToOriginalAction/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,182 +19,174 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import {
-    createOpenMct,
-    resetApplicationState
-} from 'utils/testing';
-
-describe("the goToOriginalAction plugin", () => {
-    let openmct;
-    let goToOriginalAction;
-    let mockRootFolder;
-    let mockSubFolder;
-    let mockSubSubFolder;
-    let mockObject;
-    let mockObjectPath;
-    let hash;
-
-    beforeEach((done) => {
-        openmct = createOpenMct();
-
-        openmct.on('start', done);
-        openmct.startHeadless();
-
-        goToOriginalAction = openmct.actions._allActions.goToOriginal;
-    });
+import { createOpenMct, resetApplicationState } from 'utils/testing';
 
-    afterEach(() => {
-        return resetApplicationState(openmct);
-    });
+describe('the goToOriginalAction plugin', () => {
+  let openmct;
+  let goToOriginalAction;
+  let mockRootFolder;
+  let mockSubFolder;
+  let mockSubSubFolder;
+  let mockObject;
+  let mockObjectPath;
+  let hash;
+
+  beforeEach((done) => {
+    openmct = createOpenMct();
+
+    openmct.on('start', done);
+    openmct.startHeadless();
+
+    goToOriginalAction = openmct.actions._allActions.goToOriginal;
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  it('installs the go to folder action', () => {
+    expect(goToOriginalAction).toBeDefined();
+  });
+
+  describe('when invoked', () => {
+    beforeEach(() => {
+      mockRootFolder = getMockObject('mock-root');
+      mockSubFolder = getMockObject('mock-sub');
+      mockSubSubFolder = getMockObject('mock-sub-sub');
+      mockObject = getMockObject('mock-table');
+
+      mockObjectPath = [mockObject, mockSubSubFolder, mockSubFolder, mockRootFolder];
 
-    it('installs the go to folder action', () => {
-        expect(goToOriginalAction).toBeDefined();
+      spyOn(openmct.objects, 'get').and.callFake((identifier) => {
+        const mockedObject = getMockObject(identifier);
+
+        return Promise.resolve(mockedObject);
+      });
+
+      spyOn(openmct.router, 'navigate').and.callFake((navigateTo) => {
+        hash = navigateTo;
+      });
+
+      return goToOriginalAction.invoke(mockObjectPath);
     });
 
-    describe('when invoked', () => {
-        beforeEach(() => {
-            mockRootFolder = getMockObject('mock-root');
-            mockSubFolder = getMockObject('mock-sub');
-            mockSubSubFolder = getMockObject('mock-sub-sub');
-            mockObject = getMockObject('mock-table');
-
-            mockObjectPath = [
-                mockObject,
-                mockSubSubFolder,
-                mockSubFolder,
-                mockRootFolder
-            ];
-
-            spyOn(openmct.objects, 'get').and.callFake(identifier => {
-                const mockedObject = getMockObject(identifier);
-
-                return Promise.resolve(mockedObject);
-            });
-
-            spyOn(openmct.router, 'navigate').and.callFake(navigateTo => {
-                hash = navigateTo;
-            });
-
-            return goToOriginalAction.invoke(mockObjectPath);
-        });
-
-        it('goes to the original location', () => {
-            const originalLocationHash = '#/browse/mock-root/mock-table';
-
-            return waitForNavigation(() => {
-                return hash === originalLocationHash;
-            }).then(() => {
-                expect(hash).toEqual(originalLocationHash);
-            });
-        });
+    it('goes to the original location', () => {
+      const originalLocationHash = '#/browse/mock-root/mock-table';
+
+      return waitForNavigation(() => {
+        return hash === originalLocationHash;
+      }).then(() => {
+        expect(hash).toEqual(originalLocationHash);
+      });
     });
+  });
 
-    function waitForNavigation(navigated) {
-        return new Promise((resolve, reject) => {
-            const start = Date.now();
-
-            checkNavigated();
-
-            function checkNavigated() {
-                const elapsed = Date.now() - start;
-
-                if (navigated()) {
-                    resolve();
-                } else if (elapsed >= jasmine.DEFAULT_TIMEOUT_INTERVAL - 1000) {
-                    reject("didn't navigate in time");
-                } else {
-                    setTimeout(checkNavigated);
-                }
-            }
-        });
-    }
-
-    function getMockObject(key) {
-        const id = typeof key === 'string' ? key : key.key;
-
-        const mockMCTObjects = {
-            "ROOT": {
-                "composition": [
-                    {
-                        "namespace": "",
-                        "key": "mock-root"
-                    }
-                ],
-                "identifier": {
-                    "namespace": "",
-                    "key": "mock-root"
-                }
-            },
-            "mock-root": {
-                "composition": [
-                    {
-                        "namespace": "",
-                        "key": "mock-sub"
-                    },
-                    {
-                        "namespace": "",
-                        "key": "mock-table"
-                    }
-                ],
-                "name": "root",
-                "type": "folder",
-                "id": "mock-root",
-                "location": "ROOT",
-                "identifier": {
-                    "namespace": "",
-                    "key": "mock-root"
-                }
-            },
-            "mock-sub": {
-                "composition": [
-                    {
-                        "namespace": "",
-                        "key": "mock-sub-sub"
-                    },
-                    {
-                        "namespace": "",
-                        "key": "mock-table"
-                    }
-                ],
-                "name": "sub",
-                "type": "folder",
-                "location": "mock-root",
-                "identifier": {
-                    "namespace": "",
-                    "key": "mock-sub"
-                }
-            },
-            "mock-table": {
-                "composition": [],
-                "configuration": {
-                    "columnWidths": {},
-                    "hiddenColumns": {}
-                },
-                "name": "table",
-                "type": "table",
-                "location": "mock-root",
-                "identifier": {
-                    "namespace": "",
-                    "key": "mock-table"
-                }
-            },
-            "mock-sub-sub": {
-                "composition": [
-                    {
-                        "namespace": "",
-                        "key": "mock-table"
-                    }
-                ],
-                "name": "sub sub",
-                "type": "folder",
-                "location": "mock-sub",
-                "identifier": {
-                    "namespace": "",
-                    "key": "mock-sub-sub"
-                }
-            }
-        };
-
-        return mockMCTObjects[id];
-    }
+  function waitForNavigation(navigated) {
+    return new Promise((resolve, reject) => {
+      const start = Date.now();
+
+      checkNavigated();
+
+      function checkNavigated() {
+        const elapsed = Date.now() - start;
+
+        if (navigated()) {
+          resolve();
+        } else if (elapsed >= jasmine.DEFAULT_TIMEOUT_INTERVAL - 1000) {
+          reject("didn't navigate in time");
+        } else {
+          setTimeout(checkNavigated);
+        }
+      }
+    });
+  }
+
+  function getMockObject(key) {
+    const id = typeof key === 'string' ? key : key.key;
+
+    const mockMCTObjects = {
+      ROOT: {
+        composition: [
+          {
+            namespace: '',
+            key: 'mock-root'
+          }
+        ],
+        identifier: {
+          namespace: '',
+          key: 'mock-root'
+        }
+      },
+      'mock-root': {
+        composition: [
+          {
+            namespace: '',
+            key: 'mock-sub'
+          },
+          {
+            namespace: '',
+            key: 'mock-table'
+          }
+        ],
+        name: 'root',
+        type: 'folder',
+        id: 'mock-root',
+        location: 'ROOT',
+        identifier: {
+          namespace: '',
+          key: 'mock-root'
+        }
+      },
+      'mock-sub': {
+        composition: [
+          {
+            namespace: '',
+            key: 'mock-sub-sub'
+          },
+          {
+            namespace: '',
+            key: 'mock-table'
+          }
+        ],
+        name: 'sub',
+        type: 'folder',
+        location: 'mock-root',
+        identifier: {
+          namespace: '',
+          key: 'mock-sub'
+        }
+      },
+      'mock-table': {
+        composition: [],
+        configuration: {
+          columnWidths: {},
+          hiddenColumns: {}
+        },
+        name: 'table',
+        type: 'table',
+        location: 'mock-root',
+        identifier: {
+          namespace: '',
+          key: 'mock-table'
+        }
+      },
+      'mock-sub-sub': {
+        composition: [
+          {
+            namespace: '',
+            key: 'mock-table'
+          }
+        ],
+        name: 'sub sub',
+        type: 'folder',
+        location: 'mock-sub',
+        identifier: {
+          namespace: '',
+          key: 'mock-sub-sub'
+        }
+      }
+    };
+
+    return mockMCTObjects[id];
+  }
 });
diff --git a/src/plugins/hyperlink/HyperlinkLayout.vue b/src/plugins/hyperlink/HyperlinkLayout.vue
index 65ec22e5881..1f0a55b79d0 100644
--- a/src/plugins/hyperlink/HyperlinkLayout.vue
+++ b/src/plugins/hyperlink/HyperlinkLayout.vue
@@ -1,51 +1,54 @@
-/*****************************************************************************
-* Open MCT, Copyright (c) 2014-2021, United States Government
-* as represented by the Administrator of the National Aeronautics and Space
-* Administration. All rights reserved.
-*
-* Open MCT is licensed under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-* http://www.apache.org/licenses/LICENSE-2.0.
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-* License for the specific language governing permissions and limitations
-* under the License.
-*
-* Open MCT includes source code licensed under additional open source
-* licenses. See the Open Source Licenses file (LICENSES.md) included with
-* this source code distribution or the Licensing information page available
-* at runtime from the About dialog for additional information.
-*****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
 
-<template>
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
 
-<a class="c-hyperlink"
-   :class="{
-       'c-hyperlink--button' : isButton
-   }"
-   :target="domainObject.linkTarget"
-   :href="domainObject.url"
->
-    <span class="c-hyperlink__label">{{ domainObject.displayText }}</span>
-</a>
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 
+<template>
+  <a
+    class="c-hyperlink"
+    :class="{
+      'c-hyperlink--button': isButton
+    }"
+    :target="domainObject.linkTarget"
+    :href="url"
+  >
+    <span class="c-hyperlink__label">{{ domainObject.displayText }}</span>
+  </a>
 </template>
 
 <script>
+import { sanitizeUrl } from '@braintree/sanitize-url';
 
 export default {
-    inject: ['domainObject'],
-    computed: {
-        isButton() {
-            if (this.domainObject.displayFormat === "link") {
-                return false;
-            }
+  inject: ['domainObject'],
+  computed: {
+    isButton() {
+      if (this.domainObject.displayFormat === 'link') {
+        return false;
+      }
 
-            return true;
-        }
+      return true;
+    },
+    url() {
+      return sanitizeUrl(this.domainObject.url);
     }
+  }
 };
 </script>
diff --git a/src/plugins/hyperlink/HyperlinkProvider.js b/src/plugins/hyperlink/HyperlinkProvider.js
index d5450a0e55a..a793ce2d9b6 100644
--- a/src/plugins/hyperlink/HyperlinkProvider.js
+++ b/src/plugins/hyperlink/HyperlinkProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,44 +20,48 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import mount from 'utils/mount';
+
 import HyperlinkLayout from './HyperlinkLayout.vue';
-import Vue from 'vue';
 
 export default function HyperlinkProvider(openmct) {
+  return {
+    key: 'hyperlink.view',
+    name: 'Hyperlink',
+    cssClass: 'icon-chain-links',
+    canView(domainObject) {
+      return domainObject.type === 'hyperlink';
+    },
 
-    return {
-        key: 'hyperlink.view',
-        name: 'Hyperlink',
-        cssClass: 'icon-chain-links',
-        canView(domainObject) {
-            return domainObject.type === 'hyperlink';
-        },
+    view: function (domainObject) {
+      let _destroy = null;
 
-        canEdit(domainObject) {
-            return domainObject.type === 'hyperlink';
+      return {
+        show: function (element) {
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                HyperlinkLayout
+              },
+              provide: {
+                domainObject
+              },
+              template: '<hyperlink-layout></hyperlink-layout>'
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
         },
-
-        view: function (domainObject) {
-            let component;
-
-            return {
-                show: function (element) {
-                    component = new Vue({
-                        el: element,
-                        components: {
-                            HyperlinkLayout
-                        },
-                        provide: {
-                            domainObject
-                        },
-                        template: '<hyperlink-layout></hyperlink-layout>'
-                    });
-                },
-                destroy: function () {
-                    component.$destroy();
-                    component = undefined;
-                }
-            };
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
         }
-    };
+      };
+    }
+  };
 }
diff --git a/src/plugins/hyperlink/plugin.js b/src/plugins/hyperlink/plugin.js
index d89bf8ecdbc..a52328b4044 100644
--- a/src/plugins/hyperlink/plugin.js
+++ b/src/plugins/hyperlink/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,70 +20,69 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import HyperlinkProvider from './HyperlinkProvider';
+import HyperlinkProvider from './HyperlinkProvider.js';
 
 export default function () {
-    return function install(openmct) {
-        openmct.types.addType('hyperlink', {
-            name: 'Hyperlink',
-            key: 'hyperlink',
-            description: 'A hyperlink to redirect to a different link',
-            creatable: true,
-            cssClass: 'icon-chain-links',
-            initialize: function (domainObject) {
-                domainObject.displayFormat = "link";
-                domainObject.linkTarget = "_self";
+  return function install(openmct) {
+    openmct.types.addType('hyperlink', {
+      name: 'Hyperlink',
+      key: 'hyperlink',
+      description: 'A text element or button that links to any URL including Open MCT views.',
+      creatable: true,
+      cssClass: 'icon-chain-links',
+      initialize: function (domainObject) {
+        domainObject.displayFormat = 'link';
+        domainObject.linkTarget = '_self';
+      },
+      form: [
+        {
+          key: 'url',
+          name: 'URL',
+          control: 'textfield',
+          required: true,
+          cssClass: 'l-input-lg'
+        },
+        {
+          key: 'displayText',
+          name: 'Text to Display',
+          control: 'textfield',
+          required: true,
+          cssClass: 'l-input-lg'
+        },
+        {
+          key: 'displayFormat',
+          name: 'Display Format',
+          control: 'select',
+          options: [
+            {
+              name: 'Link',
+              value: 'link'
             },
-            form: [
-                {
-                    "key": "url",
-                    "name": "URL",
-                    "control": "textfield",
-                    "required": true,
-                    "cssClass": "l-input-lg"
-                },
-                {
-                    "key": "displayText",
-                    "name": "Text to Display",
-                    "control": "textfield",
-                    "required": true,
-                    "cssClass": "l-input-lg"
-                },
-                {
-                    "key": "displayFormat",
-                    "name": "Display Format",
-                    "control": "select",
-                    "options": [
-                        {
-                            "name": "Link",
-                            "value": "link"
-                        },
-                        {
-                            "name": "Button",
-                            "value": "button"
-                        }
-                    ],
-                    "cssClass": "l-inline"
-                },
-                {
-                    "key": "linkTarget",
-                    "name": "Tab to Open Hyperlink",
-                    "control": "select",
-                    "options": [
-                        {
-                            "name": "Open in this tab",
-                            "value": "_self"
-                        },
-                        {
-                            "name": "Open in a new tab",
-                            "value": "_blank"
-                        }
-                    ],
-                    "cssClass": "l-inline"
-
-                }
-            ]
-        });
-        openmct.objectViews.addProvider(new HyperlinkProvider(openmct));
-    };
+            {
+              name: 'Button',
+              value: 'button'
+            }
+          ],
+          cssClass: 'l-inline'
+        },
+        {
+          key: 'linkTarget',
+          name: 'Tab to Open Hyperlink',
+          control: 'select',
+          options: [
+            {
+              name: 'Open in this tab',
+              value: '_self'
+            },
+            {
+              name: 'Open in a new tab',
+              value: '_blank'
+            }
+          ],
+          cssClass: 'l-inline'
+        }
+      ]
+    });
+    openmct.objectViews.addProvider(new HyperlinkProvider(openmct));
+  };
 }
diff --git a/src/plugins/hyperlink/pluginSpec.js b/src/plugins/hyperlink/pluginSpec.js
index e7e5475a621..277545c9f4b 100644
--- a/src/plugins/hyperlink/pluginSpec.js
+++ b/src/plugins/hyperlink/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,111 +20,113 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import { createOpenMct, resetApplicationState } from "utils/testing";
-import HyperlinkPlugin from "./plugin";
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+
+import HyperlinkPlugin from './plugin.js';
 
 function getView(openmct, domainObj, objectPath) {
-    const applicableViews = openmct.objectViews.get(domainObj, objectPath);
-    const hyperLinkView = applicableViews.find((viewProvider) => viewProvider.key === 'hyperlink.view');
+  const applicableViews = openmct.objectViews.get(domainObj, objectPath);
+  const hyperLinkView = applicableViews.find(
+    (viewProvider) => viewProvider.key === 'hyperlink.view'
+  );
 
-    return hyperLinkView.view(domainObj);
+  return hyperLinkView.view(domainObj, [domainObj]);
 }
 
 function destroyView(view) {
-    return view.destroy();
+  return view.destroy();
 }
 
-describe("The controller for hyperlinks", function () {
-    let mockDomainObject;
-    let mockObjectPath;
-    let openmct;
-    let element;
-    let child;
-    let view;
-
-    beforeEach((done) => {
-        mockObjectPath = [
-            {
-                name: 'mock hyperlink',
-                type: 'hyperlink',
-                identifier: {
-                    key: 'mock-hyperlink',
-                    namespace: ''
-                }
-            }
-        ];
-
-        mockDomainObject = {
-            displayFormat: "",
-            linkTarget: "",
-            name: "Unnamed HyperLink",
-            type: "hyperlink",
-            location: "f69c21ac-24ef-450c-8e2f-3d527087d285",
-            modified: 1627483839783,
-            url: "123",
-            displayText: "123",
-            persisted: 1627483839783,
-            id: "3d9c243d-dffb-446b-8474-d9931a99d679",
-            identifier: {
-                namespace: "",
-                key: "3d9c243d-dffb-446b-8474-d9931a99d679"
-            }
-        };
-
-        openmct = createOpenMct();
-        openmct.install(new HyperlinkPlugin());
-
-        element = document.createElement('div');
-        element.style.width = '640px';
-        element.style.height = '480px';
-        child = document.createElement('div');
-        child.style.width = '640px';
-        child.style.height = '480px';
-        element.appendChild(child);
-
-        openmct.on('start', done);
-        openmct.startHeadless();
-
-    });
-
-    afterEach(() => {
-        destroyView(view);
-
-        return resetApplicationState(openmct);
-    });
-    it("knows when it should open a new tab", () => {
-        mockDomainObject.displayFormat = "link";
-        mockDomainObject.linkTarget = "_blank";
-
-        view = getView(openmct, mockDomainObject, mockObjectPath);
-        view.show(child, true);
-
-        expect(element.querySelector('.c-hyperlink').target).toBe('_blank');
-    });
-    it("knows when it should open in the same tab", function () {
-        mockDomainObject.displayFormat = "button";
-        mockDomainObject.linkTarget = "_self";
-
-        view = getView(openmct, mockDomainObject, mockObjectPath);
-        view.show(child, true);
-
-        expect(element.querySelector('.c-hyperlink').target).toBe('_self');
-    });
-
-    it("knows when it is a button", function () {
-        mockDomainObject.displayFormat = "button";
-
-        view = getView(openmct, mockDomainObject, mockObjectPath);
-        view.show(child, true);
-
-        expect(element.querySelector('.c-hyperlink--button')).toBeDefined();
-    });
-    it("knows when it is a link", function () {
-        mockDomainObject.displayFormat = "link";
-
-        view = getView(openmct, mockDomainObject, mockObjectPath);
-        view.show(child, true);
-
-        expect(element.querySelector('.c-hyperlink')).not.toHaveClass('c-hyperlink--button');
-    });
+describe('The controller for hyperlinks', function () {
+  let mockDomainObject;
+  let mockObjectPath;
+  let openmct;
+  let element;
+  let child;
+  let view;
+
+  beforeEach((done) => {
+    mockObjectPath = [
+      {
+        name: 'mock hyperlink',
+        type: 'hyperlink',
+        identifier: {
+          key: 'mock-hyperlink',
+          namespace: ''
+        }
+      }
+    ];
+
+    mockDomainObject = {
+      displayFormat: '',
+      linkTarget: '',
+      name: 'Unnamed HyperLink',
+      type: 'hyperlink',
+      location: 'f69c21ac-24ef-450c-8e2f-3d527087d285',
+      modified: 1627483839783,
+      url: '123',
+      displayText: '123',
+      persisted: 1627483839783,
+      id: '3d9c243d-dffb-446b-8474-d9931a99d679',
+      identifier: {
+        namespace: '',
+        key: '3d9c243d-dffb-446b-8474-d9931a99d679'
+      }
+    };
+
+    openmct = createOpenMct();
+    openmct.install(new HyperlinkPlugin());
+
+    element = document.createElement('div');
+    element.style.width = '640px';
+    element.style.height = '480px';
+    child = document.createElement('div');
+    child.style.width = '640px';
+    child.style.height = '480px';
+    element.appendChild(child);
+
+    openmct.on('start', done);
+    openmct.startHeadless();
+  });
+
+  afterEach(() => {
+    destroyView(view);
+
+    return resetApplicationState(openmct);
+  });
+  it('knows when it should open a new tab', () => {
+    mockDomainObject.displayFormat = 'link';
+    mockDomainObject.linkTarget = '_blank';
+
+    view = getView(openmct, mockDomainObject, mockObjectPath);
+    view.show(child, true);
+
+    expect(element.querySelector('.c-hyperlink').target).toBe('_blank');
+  });
+  it('knows when it should open in the same tab', function () {
+    mockDomainObject.displayFormat = 'button';
+    mockDomainObject.linkTarget = '_self';
+
+    view = getView(openmct, mockDomainObject, mockObjectPath);
+    view.show(child, true);
+
+    expect(element.querySelector('.c-hyperlink').target).toBe('_self');
+  });
+
+  it('knows when it is a button', function () {
+    mockDomainObject.displayFormat = 'button';
+
+    view = getView(openmct, mockDomainObject, mockObjectPath);
+    view.show(child, true);
+
+    expect(element.querySelector('.c-hyperlink--button')).toBeDefined();
+  });
+  it('knows when it is a link', function () {
+    mockDomainObject.displayFormat = 'link';
+
+    view = getView(openmct, mockDomainObject, mockObjectPath);
+    view.show(child, true);
+
+    expect(element.querySelector('.c-hyperlink')).not.toHaveClass('c-hyperlink--button');
+  });
 });
diff --git a/src/plugins/imagery/ImageryTimestripViewProvider.js b/src/plugins/imagery/ImageryTimestripViewProvider.js
new file mode 100644
index 00000000000..142bd8e9795
--- /dev/null
+++ b/src/plugins/imagery/ImageryTimestripViewProvider.js
@@ -0,0 +1,91 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import mount from 'utils/mount';
+
+import ImageryTimeView from './components/ImageryTimeView.vue';
+
+export default function ImageryTimestripViewProvider(openmct) {
+  const type = 'example.imagery.time-strip.view';
+
+  function hasImageTelemetry(domainObject) {
+    const metadata = openmct.telemetry.getMetadata(domainObject);
+    if (!metadata) {
+      return false;
+    }
+
+    return metadata.valuesForHints(['image']).length > 0;
+  }
+
+  return {
+    key: type,
+    name: 'Imagery Timestrip View',
+    cssClass: 'icon-image',
+    canView: function (domainObject, objectPath) {
+      let isChildOfTimeStrip = objectPath.find((object) => object.type === 'time-strip');
+
+      return (
+        hasImageTelemetry(domainObject) &&
+        isChildOfTimeStrip &&
+        !openmct.router.isNavigatedObject(objectPath)
+      );
+    },
+    view: function (domainObject, objectPath) {
+      let _destroy = null;
+      let component = null;
+
+      return {
+        show: function (element) {
+          const { vNode, destroy } = mount(
+            {
+              el: element,
+              components: {
+                ImageryTimeView
+              },
+              provide: {
+                openmct: openmct,
+                domainObject: domainObject,
+                objectPath: objectPath
+              },
+              template: '<imagery-time-view ref="root"></imagery-time-view>'
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+          component = vNode.componentInstance;
+        },
+
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
+        },
+
+        getComponent() {
+          return component;
+        }
+      };
+    }
+  };
+}
diff --git a/src/plugins/imagery/ImageryView.js b/src/plugins/imagery/ImageryView.js
index 12699177bdd..96d8b42f6a6 100644
--- a/src/plugins/imagery/ImageryView.js
+++ b/src/plugins/imagery/ImageryView.js
@@ -1,37 +1,96 @@
-import ImageryViewLayout from './components/ImageryViewLayout.vue';
+import mount from 'utils/mount';
 
-import Vue from 'vue';
+import ImageryViewComponent from './components/ImageryView.vue';
 
+const DEFAULT_IMAGE_FRESHNESS_OPTIONS = {
+  fadeOutDelayTime: '0s',
+  fadeOutDurationTime: '30s'
+};
 export default class ImageryView {
-    constructor(openmct, domainObject, objectPath) {
-        this.openmct = openmct;
-        this.domainObject = domainObject;
-        this.objectPath = objectPath;
-        this.component = undefined;
+  constructor(openmct, domainObject, objectPath, options) {
+    this.openmct = openmct;
+    this.domainObject = domainObject;
+    this.objectPath = objectPath;
+    this.options = options;
+    this.component = null;
+    this._destroy = null;
+  }
+
+  show(element, isEditing, viewOptions) {
+    let alternateObjectPath;
+    let focusedImageTimestamp;
+    if (viewOptions) {
+      focusedImageTimestamp = viewOptions.timestamp;
+      alternateObjectPath = viewOptions.objectPath;
     }
 
-    show(element) {
-        this.component = new Vue({
-            el: element,
-            components: {
-                ImageryViewLayout
-            },
-            provide: {
-                openmct: this.openmct,
-                domainObject: this.domainObject,
-                objectPath: this.objectPath,
-                currentView: this
-            },
-            template: '<imagery-view-layout ref="ImageryLayout"></imagery-view-layout>'
-        });
+    const { vNode, destroy } = mount(
+      {
+        el: element,
+        components: {
+          'imagery-view': ImageryViewComponent
+        },
+        provide: {
+          openmct: this.openmct,
+          domainObject: this.domainObject,
+          objectPath: alternateObjectPath || this.objectPath,
+          imageFreshnessOptions: this.options?.imageFreshness || DEFAULT_IMAGE_FRESHNESS_OPTIONS,
+          showCompassHUD: this.options?.showCompassHUD,
+          currentView: this
+        },
+        data() {
+          return {
+            focusedImageTimestamp
+          };
+        },
+        template:
+          '<imagery-view :focused-image-timestamp="focusedImageTimestamp" @update:focusedImageTimestamp="value => focusedImageTimestamp = value" ref="ImageryContainer"></imagery-view>'
+      },
+      {
+        app: this.openmct.app,
+        element
+      }
+    );
+    this.component = vNode.componentInstance;
+    this._destroy = destroy;
+  }
+
+  getViewContext() {
+    if (!this.component) {
+      return {};
     }
 
-    destroy() {
-        this.component.$destroy();
-        this.component = undefined;
+    return this.component.$refs.ImageryContainer;
+  }
+
+  pause() {
+    const imageContext = this.getViewContext();
+    // persist previous pause value to return to after unpausing
+    this.previouslyPaused = imageContext.isPaused;
+    imageContext.thumbnailClicked(imageContext.focusedImageIndex);
+  }
+  unpause() {
+    const pausedStateBefore = this.previouslyPaused;
+    this.previouslyPaused = undefined; // clear value
+    const imageContext = this.getViewContext();
+    imageContext.paused(pausedStateBefore);
+  }
+
+  onPreviewModeChange({ isPreviewing } = {}) {
+    if (isPreviewing) {
+      this.pause();
+    } else {
+      this.unpause();
     }
+  }
 
-    _getInstance() {
-        return this.component;
+  destroy() {
+    if (this._destroy) {
+      this._destroy();
     }
+  }
+
+  _getInstance() {
+    return this.component;
+  }
 }
diff --git a/src/plugins/imagery/ImageryViewProvider.js b/src/plugins/imagery/ImageryViewProvider.js
index 77e698fb5cc..767e03c61be 100644
--- a/src/plugins/imagery/ImageryViewProvider.js
+++ b/src/plugins/imagery/ImageryViewProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,29 +19,34 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import ImageryView from './ImageryView';
+import ImageryView from './ImageryView.js';
 
-export default function ImageryViewProvider(openmct) {
-    const type = 'example.imagery';
+export default function ImageryViewProvider(openmct, options) {
+  const type = 'example.imagery';
 
-    function hasImageTelemetry(domainObject) {
-        const metadata = openmct.telemetry.getMetadata(domainObject);
-        if (!metadata) {
-            return false;
-        }
-
-        return metadata.valuesForHints(['image']).length > 0;
+  function hasImageTelemetry(domainObject) {
+    const metadata = openmct.telemetry.getMetadata(domainObject);
+    if (!metadata) {
+      return false;
     }
 
-    return {
-        key: type,
-        name: 'Imagery Layout',
-        cssClass: 'icon-image',
-        canView: function (domainObject) {
-            return hasImageTelemetry(domainObject);
-        },
-        view: function (domainObject, objectPath) {
-            return new ImageryView(openmct, domainObject, objectPath);
-        }
-    };
+    return metadata.valuesForHints(['image']).length > 0;
+  }
+
+  return {
+    key: type,
+    name: 'Imagery Layout',
+    cssClass: 'icon-image',
+    canView: function (domainObject, objectPath) {
+      let isChildOfTimeStrip = objectPath.find((object) => object.type === 'time-strip');
+
+      return (
+        hasImageTelemetry(domainObject) &&
+        (!isChildOfTimeStrip || openmct.router.isNavigatedObject(objectPath))
+      );
+    },
+    view: function (domainObject, objectPath) {
+      return new ImageryView(openmct, domainObject, objectPath, options);
+    }
+  };
 }
diff --git a/src/plugins/imagery/actions/OpenImageInNewTabAction.js b/src/plugins/imagery/actions/OpenImageInNewTabAction.js
new file mode 100644
index 00000000000..aa7d1525aa6
--- /dev/null
+++ b/src/plugins/imagery/actions/OpenImageInNewTabAction.js
@@ -0,0 +1,46 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+export default class OpenImageInNewTabAction {
+  constructor(openmct) {
+    this.openmct = openmct;
+
+    this.cssClass = 'icon-new-window';
+    this.description = 'Open the image in a new tab';
+    this.group = 'action';
+    this.key = 'openImageInNewTab';
+    this.name = 'Open Image in New Tab';
+    this.priority = 1;
+  }
+
+  invoke(objectPath, view) {
+    const viewContext = (view.getViewContext && view.getViewContext()) || {};
+    window.open(viewContext.imageUrl, '_blank').focus();
+  }
+
+  appliesTo(objectPath, view = {}) {
+    const viewContext = (view.getViewContext && view.getViewContext()) || {};
+    if (!viewContext.imageUrl) {
+      return false;
+    }
+  }
+}
diff --git a/src/plugins/imagery/actions/SaveImageAsAction.js b/src/plugins/imagery/actions/SaveImageAsAction.js
new file mode 100644
index 00000000000..fd228ea7df3
--- /dev/null
+++ b/src/plugins/imagery/actions/SaveImageAsAction.js
@@ -0,0 +1,67 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+export default class SaveImageAction {
+  constructor(openmct) {
+    this.openmct = openmct;
+
+    this.cssClass = 'icon-save-as';
+    this.description = 'Save image to file';
+    this.group = 'action';
+    this.key = 'saveImageAs';
+    this.name = 'Save Image As';
+    this.priority = 1;
+  }
+
+  async invoke(objectPath, view) {
+    const viewContext = (view.getViewContext && view.getViewContext()) || {};
+    try {
+      const filename =
+        viewContext.imageUrl.split('/').pop().split('#')[0].split('?')[0] || 'downloaded-image.png';
+      const response = await fetch(viewContext.imageUrl);
+      const blob = await response.blob();
+      const blobUrl = URL.createObjectURL(blob);
+
+      // Create a temporary anchor element and trigger the download
+      const a = document.createElement('a');
+      a.href = blobUrl;
+      a.download = filename; // Set the filename for the download
+
+      // Append anchor to body, trigger click, then remove it from the DOM
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+
+      // Revoke the blob URL after the download
+      URL.revokeObjectURL(blobUrl);
+    } catch (error) {
+      console.error('Could not download the image.', error);
+    }
+  }
+
+  appliesTo(objectPath, view = {}) {
+    const viewContext = (view.getViewContext && view.getViewContext()) || {};
+    if (!viewContext.imageUrl) {
+      return false;
+    }
+  }
+}
diff --git a/src/plugins/imagery/components/AnnotationsCanvas.vue b/src/plugins/imagery/components/AnnotationsCanvas.vue
new file mode 100644
index 00000000000..b22c13610b2
--- /dev/null
+++ b/src/plugins/imagery/components/AnnotationsCanvas.vue
@@ -0,0 +1,505 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <canvas
+    ref="canvas"
+    class="c-image-canvas"
+    style="width: 100%; height: 100%"
+    @mousedown="clearSelectedAnnotations"
+    @mousemove="trackAnnotationDrag"
+    @click="selectOrCreateAnnotation"
+    @contextmenu="showContextMenu"
+  ></canvas>
+</template>
+
+<script>
+import Flatbush from 'flatbush';
+import isEqual from 'lodash/isEqual';
+import { toRaw } from 'vue';
+
+import TagEditorClassNames from '../../inspectorViews/annotations/tags/TagEditorClassNames.js';
+
+const EXISTING_ANNOTATION_STROKE_STYLE = '#D79078';
+const EXISTING_ANNOTATION_FILL_STYLE = 'rgba(202, 202, 142, 0.2)';
+const SELECTED_ANNOTATION_STROKE_COLOR = '#BD8ECC';
+const SELECTED_ANNOTATION_FILL_STYLE = 'rgba(199, 87, 231, 0.2)';
+
+const CONTEXT_MENU_ACTIONS = ['openImageInNewTab', 'saveImageAs'];
+
+export default {
+  inject: ['openmct', 'domainObject', 'objectPath', 'currentView'],
+  props: {
+    image: {
+      type: Object,
+      required: true
+    },
+    imageryAnnotations: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ['annotation-marquee-started', 'annotations-changed', 'annotation-marquee-finished'],
+  data() {
+    return {
+      dragging: false,
+      mouseDown: false,
+      newAnnotationRectangle: {},
+      keyString: null,
+      context: null,
+      canvas: null,
+      selectedAnnotations: [],
+      indexToAnnotationMap: {}
+    };
+  },
+  computed: {
+    annotationsIndex() {
+      if (this.imageryAnnotations.length) {
+        // create a flatbush index for the annotations
+        const builtAnnotationsIndex = new Flatbush(this.imageryAnnotations.length);
+        this.imageryAnnotations.forEach((annotation) => {
+          const annotationRectangle = annotation.targets.find(
+            (target) => target.keyString === this.keyString
+          )?.rectangle;
+          const annotationRectangleForPixelDepth =
+            this.transformRectangleToPixelDense(annotationRectangle);
+          const { x, y, x2, y2 } = this.transformAnnotationRectangleToFlatbushRectangle(
+            annotationRectangleForPixelDepth
+          );
+          const indexNumber = builtAnnotationsIndex.add(x, y, x2, y2);
+          this.indexToAnnotationMap[indexNumber] = annotation;
+        });
+        builtAnnotationsIndex.finish();
+
+        return builtAnnotationsIndex;
+      } else {
+        return null;
+      }
+    }
+  },
+  watch: {
+    imageryAnnotations: {
+      handler() {
+        this.drawAnnotations();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.canvas = this.$refs.canvas;
+    this.context = this.canvas.getContext('2d');
+
+    // adjust canvas size for retina displays
+    const pixelScale = window.devicePixelRatio;
+    this.canvas.width = Math.floor(this.canvas.width * pixelScale);
+    this.canvas.height = Math.floor(this.canvas.height * pixelScale);
+
+    this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+    this.openmct.selection.on('change', this.updateSelection);
+    this.drawAnnotations();
+  },
+  beforeUnmount() {
+    this.openmct.selection.off('change', this.updateSelection);
+    document.body.removeEventListener('click', this.cancelSelection);
+  },
+  methods: {
+    onAnnotationChange(updatedAnnotations) {
+      updatedAnnotations.forEach((updatedAnnotation) => {
+        // Try to find the annotation in the existing selected annotations
+        const existingIndex = this.selectedAnnotations.findIndex((annotation) =>
+          this.openmct.objects.areIdsEqual(annotation.identifier, updatedAnnotation.identifier)
+        );
+
+        // If found, update it
+        if (existingIndex > -1) {
+          this.selectedAnnotations[existingIndex] = updatedAnnotation;
+        } else {
+          // If not found, add it
+          this.selectedAnnotations.push(updatedAnnotation);
+        }
+      });
+      this.$emit('annotations-changed', this.selectedAnnotations);
+    },
+    transformAnnotationRectangleToFlatbushRectangle(annotationRectangle) {
+      let { x, y, width, height } = annotationRectangle;
+      let x2 = x + width;
+      let y2 = y + height;
+
+      // if height or width are negative, we need to adjust the x and y
+      if (width < 0) {
+        x2 = x;
+        x = x + width;
+      }
+      if (height < 0) {
+        y2 = y;
+        y = y + height;
+      }
+
+      return { x, y, x2, y2 };
+    },
+    updateSelection(selection) {
+      const selectionContext = selection?.[0]?.[0]?.context?.item;
+      const selectionType = selection?.[0]?.[0]?.context?.type;
+      const validSelectionTypes = ['clicked-on-image-selection'];
+
+      if (!validSelectionTypes.includes(selectionType)) {
+        // wrong type of selection
+        return;
+      }
+
+      if (
+        selectionContext &&
+        this.openmct.objects.areIdsEqual(selectionContext.identifier, this.domainObject.identifier)
+      ) {
+        return;
+      }
+
+      const incomingSelectedAnnotations = selection?.[0]?.[0]?.context?.annotations;
+
+      this.prepareExistingAnnotationSelection(incomingSelectedAnnotations);
+    },
+    prepareExistingAnnotationSelection(annotations) {
+      const targetDetails = [];
+      annotations.forEach((annotation) => {
+        annotation.targets.forEach((target) => {
+          // only add targetDetails if we haven't added it before
+          const targetAlreadyAdded = targetDetails.some((targetDetail) => {
+            return isEqual(targetDetail, toRaw(target));
+          });
+          if (!targetAlreadyAdded) {
+            targetDetails.push(toRaw(target));
+          }
+        });
+      });
+      this.selectedAnnotations = annotations;
+      this.drawAnnotations();
+
+      return {
+        targetDomainObjects: [this.domainObject],
+        targetDetails
+      };
+    },
+    clearSelectedAnnotations() {
+      if (!this.openmct.annotation.getAvailableTags().length) {
+        // don't bother with new annotations if there are no tags
+        return;
+      }
+
+      this.mouseDown = true;
+      this.selectedAnnotations = [];
+    },
+    /**
+     * Given a rectangle, returns a rectangle that conforms to the pixel density of the device
+     * @param {Object} rectangle without pixel density applied
+     * @returns {Object} transformed rectangle with pixel density applied
+     */
+    transformRectangleToPixelDense(rectangle) {
+      const pixelScale = window.devicePixelRatio;
+      const transformedRectangle = {
+        x: rectangle.x * pixelScale,
+        y: rectangle.y * pixelScale,
+        width: rectangle.width * pixelScale,
+        height: rectangle.height * pixelScale
+      };
+      return transformedRectangle;
+    },
+    /**
+     * Given a rectangle, returns a rectangle that is independent of the pixel density of the device
+     * @param {Object} rectangle with pixel density applied
+     * @returns {Object} transformed rectangle without pixel density applied
+     */
+    transformRectangleFromPixelDense(rectangle) {
+      const pixelScale = window.devicePixelRatio;
+      const transformedRectangle = {
+        x: rectangle.x / pixelScale,
+        y: rectangle.y / pixelScale,
+        width: rectangle.width / pixelScale,
+        height: rectangle.height / pixelScale
+      };
+      return transformedRectangle;
+    },
+    drawRectInCanvas(rectangle, fillStyle, strokeStyle) {
+      this.context.beginPath();
+      this.context.lineWidth = 1;
+      this.context.fillStyle = fillStyle;
+      this.context.strokeStyle = strokeStyle;
+      this.context.rect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
+      this.context.fill();
+      this.context.stroke();
+    },
+    trackAnnotationDrag(event) {
+      if (this.mouseDown && !this.dragging && event.shiftKey && event.altKey) {
+        this.startAnnotationDrag(event);
+      } else if (this.dragging) {
+        const boundingRect = this.canvas.getBoundingClientRect();
+        const scaleX = this.canvas.width / boundingRect.width;
+        const scaleY = this.canvas.height / boundingRect.height;
+        this.newAnnotationRectangle = {
+          x: this.newAnnotationRectangle.x,
+          y: this.newAnnotationRectangle.y,
+          width: (event.clientX - boundingRect.left) * scaleX - this.newAnnotationRectangle.x,
+          height: (event.clientY - boundingRect.top) * scaleY - this.newAnnotationRectangle.y
+        };
+        this.drawAnnotations();
+        this.drawRectInCanvas(
+          this.newAnnotationRectangle,
+          SELECTED_ANNOTATION_FILL_STYLE,
+          SELECTED_ANNOTATION_STROKE_COLOR
+        );
+      }
+    },
+    clearCanvas() {
+      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    },
+    selectImageView() {
+      // should show ImageView itself if we have no annotations to display
+      const selection = this.createPathSelection();
+      this.openmct.selection.select(selection, true);
+    },
+    createSelection(annotation) {
+      const selection = this.createPathSelection();
+      selection[0].context = annotation;
+
+      return selection;
+    },
+    selectImageAnnotations({ targetDetails, targetDomainObjects, annotations }) {
+      const annotationContext = {
+        type: 'clicked-on-image-selection',
+        targetDetails,
+        targetDomainObjects,
+        annotations,
+        annotationType: this.openmct.annotation.ANNOTATION_TYPES.PIXEL_SPATIAL,
+        onAnnotationChange: this.onAnnotationChange
+      };
+      const selection = this.createPathSelection();
+      if (
+        selection.length &&
+        this.openmct.objects.areIdsEqual(
+          selection[0].context.item.identifier,
+          this.domainObject.identifier
+        )
+      ) {
+        selection[0].context = {
+          ...selection[0].context,
+          ...annotationContext
+        };
+      } else {
+        selection.unshift({
+          element: this.$el,
+          context: {
+            item: this.domainObject,
+            ...annotationContext
+          }
+        });
+      }
+
+      this.openmct.selection.select(selection, true);
+
+      document.body.addEventListener('click', this.cancelSelection);
+    },
+    cancelSelection(event) {
+      if (this.$refs.canvas) {
+        const clickedInsideCanvas = this.$refs.canvas.contains(event.target);
+        // unfortunate side effect from possibly being detached from the DOM when
+        // adding/deleting tags, so closest() won't work
+        const clickedTagEditor = Object.values(TagEditorClassNames).some((className) => {
+          return event.target.classList.contains(className);
+        });
+        const clickedInsideInspector = event.target.closest('.js-inspector') !== null;
+        if (!clickedInsideCanvas && !clickedTagEditor && !clickedInsideInspector) {
+          this.newAnnotationRectangle = {};
+          this.selectedAnnotations = [];
+          this.drawAnnotations();
+        }
+      }
+    },
+    createNewAnnotation() {
+      this.dragging = false;
+      this.selectedAnnotations = [];
+      this.selectedAnnotations = [];
+      this.$emit('annotation-marquee-finished');
+
+      const rectangleFromCanvas = {
+        x: this.newAnnotationRectangle.x,
+        y: this.newAnnotationRectangle.y,
+        width: this.newAnnotationRectangle.width,
+        height: this.newAnnotationRectangle.height
+      };
+      const rectangleWithoutPixelScale = this.transformRectangleFromPixelDense(rectangleFromCanvas);
+      const targetDetails = [
+        {
+          rectangle: rectangleWithoutPixelScale,
+          time: this.image.time,
+          keyString: this.keyString
+        }
+      ];
+      this.selectImageAnnotations({
+        targetDetails,
+        targetDomainObjects: [this.domainObject],
+        annotations: []
+      });
+    },
+    attemptToSelectExistingAnnotation(event) {
+      this.dragging = false;
+      this.$emit('annotation-marquee-finished');
+      // use flatbush to find annotations that are close to the click
+      const boundingRect = this.canvas.getBoundingClientRect();
+      const scaleX = this.canvas.width / boundingRect.width;
+      const scaleY = this.canvas.height / boundingRect.height;
+      const x = (event.clientX - boundingRect.left) * scaleX;
+      const y = (event.clientY - boundingRect.top) * scaleY;
+      if (this.annotationsIndex) {
+        let nearbyAnnotations = [];
+        const resultIndicies = this.annotationsIndex.search(x, y, x, y);
+        resultIndicies.forEach((resultIndex) => {
+          const foundAnnotation = this.indexToAnnotationMap[resultIndex];
+          nearbyAnnotations.push(foundAnnotation);
+        });
+        //if everything has been deleted, don't bother with the selection
+        const allAnnotationsDeleted = nearbyAnnotations.every((annotation) => annotation._deleted);
+        if (allAnnotationsDeleted) {
+          nearbyAnnotations = [];
+        }
+        const { targetDomainObjects, targetDetails } =
+          this.prepareExistingAnnotationSelection(nearbyAnnotations);
+        this.selectImageAnnotations({
+          targetDetails,
+          targetDomainObjects,
+          annotations: nearbyAnnotations
+        });
+      } else {
+        // nothing selected
+        this.drawAnnotations();
+      }
+    },
+    selectOrCreateAnnotation(event) {
+      event.stopPropagation();
+      this.mouseDown = false;
+      if (
+        !this.dragging ||
+        (!this.newAnnotationRectangle.width && !this.newAnnotationRectangle.height)
+      ) {
+        this.newAnnotationRectangle = {};
+        this.attemptToSelectExistingAnnotation(event);
+      } else {
+        this.createNewAnnotation();
+      }
+    },
+    createPathSelection() {
+      let selection = [];
+      selection.unshift({
+        element: this.$el,
+        context: {
+          item: this.domainObject
+        }
+      });
+      this.objectPath.forEach((pathObject, index) => {
+        selection.push({
+          element: this.openmct.layout.$refs.browseObject.$el,
+          context: {
+            item: pathObject
+          }
+        });
+      });
+
+      return selection;
+    },
+    startAnnotationDrag(event) {
+      this.$emit('annotation-marquee-started');
+      this.newAnnotationRectangle = {};
+      const boundingRect = this.canvas.getBoundingClientRect();
+      const scaleX = this.canvas.width / boundingRect.width;
+      const scaleY = this.canvas.height / boundingRect.height;
+      this.newAnnotationRectangle = {
+        x: (event.clientX - boundingRect.left) * scaleX,
+        y: (event.clientY - boundingRect.top) * scaleY
+      };
+      this.dragging = true;
+    },
+    isSelectedAnnotation(annotation) {
+      const someSelectedAnnotationExists = this.selectedAnnotations.some((selectedAnnotation) => {
+        return this.openmct.objects.areIdsEqual(
+          selectedAnnotation.identifier,
+          annotation.identifier
+        );
+      });
+
+      return someSelectedAnnotationExists;
+    },
+    drawAnnotations() {
+      this.clearCanvas();
+      let drawnRectangles = [];
+      this.imageryAnnotations.forEach((annotation) => {
+        if (annotation._deleted) {
+          return;
+        }
+        const annotationRectangle = annotation.targets.find(
+          (target) => target.keyString === this.keyString
+        )?.rectangle;
+
+        // Check if the rectangle has already been drawn
+        const hasBeenDrawn = drawnRectangles.some(
+          (drawnRect) =>
+            drawnRect.x === annotationRectangle.x &&
+            drawnRect.y === annotationRectangle.y &&
+            drawnRect.width === annotationRectangle.width &&
+            drawnRect.height === annotationRectangle.height
+        );
+        if (!hasBeenDrawn) {
+          const rectangleForPixelDensity = this.transformRectangleToPixelDense(annotationRectangle);
+          if (this.isSelectedAnnotation(annotation)) {
+            this.drawRectInCanvas(
+              rectangleForPixelDensity,
+              SELECTED_ANNOTATION_FILL_STYLE,
+              SELECTED_ANNOTATION_STROKE_COLOR
+            );
+          } else {
+            this.drawRectInCanvas(
+              rectangleForPixelDensity,
+              EXISTING_ANNOTATION_FILL_STYLE,
+              EXISTING_ANNOTATION_STROKE_STYLE
+            );
+          }
+          drawnRectangles.push(annotationRectangle);
+        }
+      });
+    },
+    showContextMenu: function (event) {
+      event.preventDefault();
+
+      let objectPath = this.objectPath;
+
+      const actions = CONTEXT_MENU_ACTIONS.map((key) => this.openmct.actions.getAction(key));
+      const menuItems = this.openmct.menus.actionsToMenuItems(
+        actions,
+        objectPath,
+        this.currentView
+      );
+      if (menuItems.length) {
+        this.openmct.menus.showMenu(event.x, event.y, menuItems);
+      }
+    }
+  }
+};
+</script>
diff --git a/src/plugins/imagery/components/Compass/Compass.vue b/src/plugins/imagery/components/Compass/Compass.vue
deleted file mode 100644
index 18b5353d207..00000000000
--- a/src/plugins/imagery/components/Compass/Compass.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-<template>
-<div
-    class="c-compass"
-    :style="`width: 100%; height: 100%`"
->
-    <CompassHUD
-        v-if="hasCameraFieldOfView"
-        :sun-heading="sunHeading"
-        :camera-angle-of-view="cameraAngleOfView"
-        :camera-pan="cameraPan"
-    />
-    <CompassRose
-        v-if="hasCameraFieldOfView"
-        :camera-angle-of-view="cameraAngleOfView"
-        :camera-pan="cameraPan"
-        :compass-rose-sizing-classes="compassRoseSizingClasses"
-        :heading="heading"
-        :sized-image-dimensions="sizedImageDimensions"
-        :sun-heading="sunHeading"
-    />
-</div>
-</template>
-
-<script>
-import CompassHUD from './CompassHUD.vue';
-import CompassRose from './CompassRose.vue';
-
-const CAMERA_ANGLE_OF_VIEW = 70;
-
-export default {
-    components: {
-        CompassHUD,
-        CompassRose
-    },
-    props: {
-        compassRoseSizingClasses: {
-            type: String,
-            required: true
-        },
-        image: {
-            type: Object,
-            required: true
-        },
-        sizedImageDimensions: {
-            type: Object,
-            required: true
-        }
-    },
-    computed: {
-        hasCameraFieldOfView() {
-            return this.cameraPan !== undefined && this.cameraAngleOfView > 0;
-        },
-        // horizontal rotation from north in degrees
-        heading() {
-            return this.image.heading;
-        },
-        // horizontal rotation from north in degrees
-        sunHeading() {
-            return this.image.sunOrientation;
-        },
-        // horizontal rotation from north in degrees
-        cameraPan() {
-            return this.image.cameraPan;
-        },
-        cameraAngleOfView() {
-            return CAMERA_ANGLE_OF_VIEW;
-        }
-    },
-    methods: {
-        toggleLockCompass() {
-            this.$emit('toggle-lock-compass');
-        }
-    }
-};
-</script>
diff --git a/src/plugins/imagery/components/Compass/CompassComponent.vue b/src/plugins/imagery/components/Compass/CompassComponent.vue
new file mode 100644
index 00000000000..df32cd6069c
--- /dev/null
+++ b/src/plugins/imagery/components/Compass/CompassComponent.vue
@@ -0,0 +1,108 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-compass" :style="`width: 100%; height: 100%`">
+    <compass-hud
+      v-if="showCompassHUD"
+      :camera-angle-of-view="cameraAngleOfView"
+      :heading="heading"
+      :camera-azimuth="cameraAzimuth"
+      :transformations="transformations"
+      :has-gimble="hasGimble"
+      :normalized-camera-azimuth="normalizedCameraAzimuth"
+      :sun-heading="sunHeading"
+    />
+    <CompassRose
+      :camera-angle-of-view="cameraAngleOfView"
+      :heading="heading"
+      :camera-azimuth="cameraAzimuth"
+      :transformations="transformations"
+      :has-gimble="hasGimble"
+      :normalized-camera-azimuth="normalizedCameraAzimuth"
+      :sun-heading="sunHeading"
+      :sized-image-dimensions="sizedImageDimensions"
+    />
+  </div>
+</template>
+
+<script>
+import CompassHud from './CompassHud.vue';
+import CompassRose from './CompassRose.vue';
+import { rotate } from './utils.js';
+
+export default {
+  components: {
+    CompassHud,
+    CompassRose
+  },
+  inject: ['showCompassHUD'],
+  props: {
+    image: {
+      type: Object,
+      required: true
+    },
+    sizedImageDimensions: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['toggle-lock-compass'],
+  computed: {
+    hasGimble() {
+      return this.cameraAzimuth !== undefined;
+    },
+    // compass ordinal orientation of camera
+    normalizedCameraAzimuth() {
+      return this.hasGimble
+        ? rotate(this.cameraAzimuth)
+        : rotate(this.heading, -this.transformations.rotation || 0);
+    },
+    // horizontal rotation from north in degrees
+    heading() {
+      return this.image.heading;
+    },
+    hasHeading() {
+      return this.heading !== undefined;
+    },
+    // horizontal rotation from north in degrees
+    sunHeading() {
+      return this.image.sunOrientation;
+    },
+    // horizontal rotation from north in degrees
+    cameraAzimuth() {
+      return this.image.cameraPan;
+    },
+    cameraAngleOfView() {
+      return this.transformations.cameraAngleOfView;
+    },
+    transformations() {
+      return this.image.transformations;
+    }
+  },
+  methods: {
+    toggleLockCompass() {
+      this.$emit('toggle-lock-compass');
+    }
+  }
+};
+</script>
diff --git a/src/plugins/imagery/components/Compass/CompassHUD.vue b/src/plugins/imagery/components/Compass/CompassHUD.vue
deleted file mode 100644
index c3920c0bd7b..00000000000
--- a/src/plugins/imagery/components/Compass/CompassHUD.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-<template>
-<div
-    class="c-compass__hud c-hud"
->
-    <div
-        v-for="point in visibleCompassPoints"
-        :key="point.direction"
-        :class="point.class"
-        :style="point.style"
-    >
-        {{ point.direction }}
-    </div>
-    <div
-        v-if="isSunInRange"
-        ref="sun"
-        class="c-hud__sun"
-        :style="sunPositionStyle"
-    ></div>
-    <div class="c-hud__range"></div>
-</div>
-</template>
-
-<script>
-import {
-    rotate,
-    inRange,
-    percentOfRange
-} from './utils';
-
-const COMPASS_POINTS = [
-    {
-        direction: 'N',
-        class: 'c-hud__dir',
-        degrees: 0
-    },
-    {
-        direction: 'NE',
-        class: 'c-hud__dir--sub',
-        degrees: 45
-    },
-    {
-        direction: 'E',
-        class: 'c-hud__dir',
-        degrees: 90
-    },
-    {
-        direction: 'SE',
-        class: 'c-hud__dir--sub',
-        degrees: 135
-    },
-    {
-        direction: 'S',
-        class: 'c-hud__dir',
-        degrees: 180
-    },
-    {
-        direction: 'SW',
-        class: 'c-hud__dir--sub',
-        degrees: 225
-    },
-    {
-        direction: 'W',
-        class: 'c-hud__dir',
-        degrees: 270
-    },
-    {
-        direction: 'NW',
-        class: 'c-hud__dir--sub',
-        degrees: 315
-    }
-];
-
-export default {
-    props: {
-        sunHeading: {
-            type: Number,
-            default: undefined
-        },
-        cameraAngleOfView: {
-            type: Number,
-            default: undefined
-        },
-        cameraPan: {
-            type: Number,
-            required: true
-        }
-    },
-    computed: {
-        visibleCompassPoints() {
-            return COMPASS_POINTS
-                .filter(point => inRange(point.degrees, this.visibleRange))
-                .map(point => {
-                    const percentage = percentOfRange(point.degrees, this.visibleRange);
-                    point.style = Object.assign(
-                        { left: `${ percentage * 100 }%` }
-                    );
-
-                    return point;
-                });
-        },
-        isSunInRange() {
-            return inRange(this.sunHeading, this.visibleRange);
-        },
-        sunPositionStyle() {
-            const percentage = percentOfRange(this.sunHeading, this.visibleRange);
-
-            return {
-                left: `${ percentage * 100 }%`
-            };
-        },
-        visibleRange() {
-            return [
-                rotate(this.cameraPan, -this.cameraAngleOfView / 2),
-                rotate(this.cameraPan, this.cameraAngleOfView / 2)
-            ];
-        }
-    }
-};
-</script>
diff --git a/src/plugins/imagery/components/Compass/CompassHud.vue b/src/plugins/imagery/components/Compass/CompassHud.vue
new file mode 100644
index 00000000000..7b9a97dce4b
--- /dev/null
+++ b/src/plugins/imagery/components/Compass/CompassHud.vue
@@ -0,0 +1,147 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-compass__hud c-hud">
+    <div
+      v-for="point in visibleCompassPoints"
+      :key="point.direction"
+      :class="point.class"
+      :style="point.style"
+    >
+      {{ point.direction }}
+    </div>
+    <div v-if="isSunInRange" ref="sun" class="c-hud__sun" :style="sunPositionStyle"></div>
+    <div class="c-hud__range"></div>
+  </div>
+</template>
+
+<script>
+import { inRange, percentOfRange, rotate } from './utils.js';
+
+const COMPASS_POINTS = [
+  {
+    direction: 'N',
+    class: 'c-hud__dir',
+    degrees: 0
+  },
+  {
+    direction: 'NE',
+    class: 'c-hud__dir--sub',
+    degrees: 45
+  },
+  {
+    direction: 'E',
+    class: 'c-hud__dir',
+    degrees: 90
+  },
+  {
+    direction: 'SE',
+    class: 'c-hud__dir--sub',
+    degrees: 135
+  },
+  {
+    direction: 'S',
+    class: 'c-hud__dir',
+    degrees: 180
+  },
+  {
+    direction: 'SW',
+    class: 'c-hud__dir--sub',
+    degrees: 225
+  },
+  {
+    direction: 'W',
+    class: 'c-hud__dir',
+    degrees: 270
+  },
+  {
+    direction: 'NW',
+    class: 'c-hud__dir--sub',
+    degrees: 315
+  }
+];
+
+export default {
+  props: {
+    cameraAngleOfView: {
+      type: Number,
+      required: true
+    },
+    heading: {
+      type: Number,
+      required: true
+    },
+    cameraAzimuth: {
+      type: Number,
+      default: undefined
+    },
+    transformations: {
+      type: Object,
+      required: true
+    },
+    hasGimble: {
+      type: Boolean,
+      required: true
+    },
+    normalizedCameraAzimuth: {
+      type: Number,
+      required: true
+    },
+    sunHeading: {
+      type: Number,
+      default: undefined
+    }
+  },
+  computed: {
+    visibleCompassPoints() {
+      return COMPASS_POINTS.filter((point) => inRange(point.degrees, this.visibleRange)).map(
+        (point) => {
+          const percentage = percentOfRange(point.degrees, this.visibleRange);
+          point.style = Object.assign({ left: `${percentage * 100}%` });
+
+          return point;
+        }
+      );
+    },
+    isSunInRange() {
+      return inRange(this.sunHeading, this.visibleRange);
+    },
+    sunPositionStyle() {
+      const percentage = percentOfRange(this.sunHeading, this.visibleRange);
+
+      return {
+        left: `${percentage * 100}%`
+      };
+    },
+    cameraRotation() {
+      return this.transformations?.rotation;
+    },
+    visibleRange() {
+      return [
+        rotate(this.normalizedCameraAzimuth, -this.cameraAngleOfView / 2),
+        rotate(this.normalizedCameraAzimuth, this.cameraAngleOfView / 2)
+      ];
+    }
+  }
+};
+</script>
diff --git a/src/plugins/imagery/components/Compass/CompassRose.vue b/src/plugins/imagery/components/Compass/CompassRose.vue
index 3f61d6cf553..55f8366025f 100644
--- a/src/plugins/imagery/components/Compass/CompassRose.vue
+++ b/src/plugins/imagery/components/Compass/CompassRose.vue
@@ -1,331 +1,346 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 
 <template>
-<div ref="compassRoseWrapper"
-     class="w-direction-rose"
-     :class="compassRoseSizingClasses"
-     @click="toggleLockCompass"
->
-    <svg ref="compassRoseSvg"
-         class="c-compass-rose-svg"
-         viewBox="0 0 100 100"
-    >
-        <mask id="mask0"
-              mask-type="alpha"
-              maskUnits="userSpaceOnUse"
-              x="0"
-              y="0"
-              width="100"
-              height="100"
-        >
-            <circle cx="50"
-                    cy="50"
-                    r="50"
-                    fill="black"
-            />
-        </mask>
-        <g class="c-cr__compass-wrapper">
-            <g class="c-cr__compass-main"
-               mask="url(#mask0)"
-            >
-                <!-- Background and clipped elements -->
-                <rect class="c-cr__bg"
-                      width="100"
-                      height="100"
-                      fill="black"
-                />
-                <rect class="c-cr__edge"
-                      width="100"
-                      height="100"
-                      fill="url(#paint0_radial)"
+  <div
+    ref="compassRoseWrapper"
+    class="w-direction-rose"
+    :class="compassRoseSizingClasses"
+    @click="toggleLockCompass"
+  >
+    <svg ref="compassRoseSvg" class="c-compass-rose-svg" viewBox="0 0 100 100">
+      <mask
+        id="mask0"
+        mask-type="alpha"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="100"
+        height="100"
+      >
+        <circle cx="50" cy="50" r="50" fill="black" />
+      </mask>
+      <g class="c-cr__compass-wrapper">
+        <g class="c-cr__compass-main" mask="url(#mask0)">
+          <!-- Background and clipped elements -->
+          <rect class="c-cr__bg" width="100" height="100" fill="black" />
+          <rect class="c-cr__edge" width="100" height="100" fill="url(#gradient_edge)" />
+          <rect
+            v-if="hasSunHeading"
+            class="c-cr__sun"
+            width="100"
+            height="100"
+            fill="url(#gradient_sun)"
+            :style="sunHeadingStyle"
+          />
+
+          <mask
+            id="mask2"
+            class="c-cr__cam-fov-l-mask"
+            mask-type="alpha"
+            maskUnits="userSpaceOnUse"
+            x="0"
+            y="0"
+            width="50"
+            height="100"
+          >
+            <rect width="51" height="100" />
+          </mask>
+          <mask
+            id="mask1"
+            class="c-cr__cam-fov-r-mask"
+            mask-type="alpha"
+            maskUnits="userSpaceOnUse"
+            x="50"
+            y="0"
+            width="50"
+            height="100"
+          >
+            <rect x="49" width="51" height="100" />
+          </mask>
+          <g class="c-cr-cam-and-body" :style="cameraHeadingStyle">
+            <!-- Equipment (spacecraft) body holder. Transforms relative to the camera position. -->
+            <g v-if="hasHeading" class="cr-vrover" :style="camAngleAndPositionStyle">
+              <!-- Equipment body. Rotates relative to the camera pan value for cameras that gimble. -->
+              <path
+                class="cr-vrover__body"
+                :style="gimbledCameraPanStyle"
+                x
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M5 0C2.23858 0 0 2.23858 0 5V95C0 97.7614 2.23858 100 5 100H95C97.7614 100 100 97.7614 100 95V5C100 2.23858 97.7614 0 95 0H5ZM85 59L50 24L15 59H33V75H67.0455V59H85Z"
+              />
+            </g>
+
+            <!-- Camera FOV -->
+            <g class="c-cr__cam-fov">
+              <g mask="url(#mask2)">
+                <rect
+                  class="c-cr__cam-fov-r"
+                  x="49"
+                  width="51"
+                  height="100"
+                  :style="cameraFOVStyleRightHalf"
                 />
-                <rect v-if="hasSunHeading"
-                      class="c-cr__sun"
-                      width="100"
-                      height="100"
-                      fill="url(#paint1_radial)"
-                      :style="sunHeadingStyle"
+              </g>
+              <g mask="url(#mask1)">
+                <rect
+                  class="c-cr__cam-fov-l"
+                  width="51"
+                  height="100"
+                  :style="cameraFOVStyleLeftHalf"
                 />
-
-                <!-- Camera FOV -->
-                <mask id="mask2"
-                      class="c-cr__cam-fov-l-mask"
-                      mask-type="alpha"
-                      maskUnits="userSpaceOnUse"
-                      x="0"
-                      y="0"
-                      width="50"
-                      height="100"
-                >
-                    <rect width="51"
-                          height="100"
-                    />
-                </mask>
-                <mask id="mask1"
-                      class="c-cr__cam-fov-r-mask"
-                      mask-type="alpha"
-                      maskUnits="userSpaceOnUse"
-                      x="50"
-                      y="0"
-                      width="50"
-                      height="100"
-                >
-                    <rect x="49"
-                          width="51"
-                          height="100"
-                    />
-                </mask>
-                <g class="c-cr__cam-fov"
-                   :style="cameraPanStyle"
-                >
-                    <g mask="url(#mask2)">
-                        <rect class="c-cr__cam-fov-r"
-                              x="49"
-                              width="51"
-                              height="100"
-                              :style="cameraFOVStyleRightHalf"
-                        />
-                    </g>
-                    <g mask="url(#mask1)">
-                        <rect class="c-cr__cam-fov-l"
-                              width="51"
-                              height="100"
-                              :style="cameraFOVStyleLeftHalf"
-                        />
-                    </g>
-                </g>
+              </g>
+              <polygon class="c-cr__cam" points="0,0 100,0 70,40 70,100 30,100 30,40" />
             </g>
+          </g>
+        </g>
 
-            <!-- Spacecraft body -->
-            <path v-if="hasHeading"
-                  class="c-cr__spacecraft-body"
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
-                  d="M37 49C35.3431 49 34 50.3431 34 52V82C34 83.6569 35.3431 85 37 85H63C64.6569 85 66 83.6569 66 82V52C66 50.3431 64.6569 49 63 49H37ZM50 52L58 60H55V67H45V60H42L50 52Z"
-                  :style="headingStyle"
+        <!-- NSEW and ticks -->
+        <g class="c-cr__nsew" :style="compassDialStyle">
+          <g class="c-cr__ticks-major">
+            <path d="M50 3L43 10H57L50 3Z" />
+            <path d="M4 51V49H10V51H4Z" class="--hide-min" />
+            <path d="M49 96V90H51V96H49Z" class="--hide-min" />
+            <path d="M90 49V51H96V49H90Z" class="--hide-min" />
+          </g>
+          <g class="c-cr__ticks-minor --hide-small">
+            <path d="M4 51V49H10V51H4Z" />
+            <path d="M90 51V49H96V51H90Z" />
+            <path d="M51 96H49V90H51V96Z" />
+            <path d="M51 10L49 10V4L51 4V10Z" />
+          </g>
+          <g class="c-cr__nsew-text">
+            <path
+              :style="cardinalTextRotateW"
+              class="c-cr__nsew-w --hide-small"
+              d="M56.7418 45.004H54.1378L52.7238 52.312H52.6958L51.2258 45.004H48.7758L47.3058 52.312H47.2778L45.8638 45.004H43.2598L45.9618 55H48.6078L49.9798 48.112H50.0078L51.3798 55H53.9838L56.7418 45.004Z"
             />
-
-            <!-- NSEW and ticks -->
-            <g class="c-cr__nsew"
-               :style="compassRoseStyle"
-            >
-                <g class="c-cr__ticks-major">
-                    <path d="M50 3L43 10H57L50 3Z" />
-                    <path d="M4 51V49H10V51H4Z"
-                          class="--hide-min"
-                    />
-                    <path d="M49 96V90H51V96H49Z"
-                          class="--hide-min"
-                    />
-                    <path d="M90 49V51H96V49H90Z"
-                          class="--hide-min"
-                    />
-                </g>
-                <g class="c-cr__ticks-minor --hide-small">
-                    <path d="M4 51V49H10V51H4Z" />
-                    <path d="M90 51V49H96V51H90Z" />
-                    <path d="M51 96H49V90H51V96Z" />
-                    <path d="M51 10L49 10V4L51 4V10Z" />
-                </g>
-                <g class="c-cr__nsew-text">
-                    <path :style="cardinalTextRotateW"
-                          class="c-cr__nsew-w --hide-small"
-                          d="M56.7418 45.004H54.1378L52.7238 52.312H52.6958L51.2258 45.004H48.7758L47.3058 52.312H47.2778L45.8638 45.004H43.2598L45.9618 55H48.6078L49.9798 48.112H50.0078L51.3798 55H53.9838L56.7418 45.004Z"
-                    />
-                    <path :style="cardinalTextRotateE"
-                          class="c-cr__nsew-e --hide-small"
-                          d="M46.104 55H54.21V52.76H48.708V50.856H53.608V48.84H48.708V47.09H54.07V45.004H46.104V55Z"
-                    />
-                    <path :style="cardinalTextRotateS"
-                          class="c-cr__nsew-s --hide-small"
-                          d="M45.6531 51.64C45.6671 54.202 47.6971 55.21 49.9931 55.21C52.1911 55.21 54.3471 54.398 54.3471 51.864C54.3471 50.058 52.8911 49.386 51.4491 48.98C49.9931 48.574 48.5511 48.434 48.5511 47.664C48.5511 47.006 49.2511 46.81 49.8111 46.81C50.6091 46.81 51.4631 47.104 51.4211 48.014H54.0251C54.0111 45.76 52.0091 44.794 50.0211 44.794C48.1451 44.794 45.9471 45.648 45.9471 47.832C45.9471 49.666 47.4451 50.31 48.8731 50.716C50.3151 51.122 51.7431 51.29 51.7431 52.172C51.7431 52.914 50.9311 53.194 50.1471 53.194C49.0411 53.194 48.3131 52.816 48.2571 51.64H45.6531Z"
-                    />
-                    <path :style="cardinalTextRotateN"
-                          class="c-cr__nsew-n"
-                          d="M42.5935 60H46.7935V49.32H46.8415L52.7935 60H57.3775V42.864H53.1775V53.424H53.1295L47.1775 42.864H42.5935V60Z"
-                    />
-                </g>
-            </g>
+            <path
+              :style="cardinalTextRotateE"
+              class="c-cr__nsew-e --hide-small"
+              d="M46.104 55H54.21V52.76H48.708V50.856H53.608V48.84H48.708V47.09H54.07V45.004H46.104V55Z"
+            />
+            <path
+              :style="cardinalTextRotateS"
+              class="c-cr__nsew-s --hide-small"
+              d="M45.6531 51.64C45.6671 54.202 47.6971 55.21 49.9931 55.21C52.1911 55.21 54.3471 54.398 54.3471 51.864C54.3471 50.058 52.8911 49.386 51.4491 48.98C49.9931 48.574 48.5511 48.434 48.5511 47.664C48.5511 47.006 49.2511 46.81 49.8111 46.81C50.6091 46.81 51.4631 47.104 51.4211 48.014H54.0251C54.0111 45.76 52.0091 44.794 50.0211 44.794C48.1451 44.794 45.9471 45.648 45.9471 47.832C45.9471 49.666 47.4451 50.31 48.8731 50.716C50.3151 51.122 51.7431 51.29 51.7431 52.172C51.7431 52.914 50.9311 53.194 50.1471 53.194C49.0411 53.194 48.3131 52.816 48.2571 51.64H45.6531Z"
+            />
+            <path
+              :style="cardinalTextRotateN"
+              class="c-cr__nsew-n"
+              d="M42.5935 60H46.7935V49.32H46.8415L52.7935 60H57.3775V42.864H53.1775V53.424H53.1295L47.1775 42.864H42.5935V60Z"
+            />
+          </g>
         </g>
-        <defs>
-            <radialGradient id="paint0_radial"
-                            cx="0"
-                            cy="0"
-                            r="1"
-                            gradientUnits="userSpaceOnUse"
-                            gradientTransform="translate(50 50) rotate(90) scale(50)"
-            >
-                <stop offset="0.751387"
-                      stop-opacity="0"
-                />
-                <stop offset="1"
-                      stop-color="white"
-                />
-            </radialGradient>
-            <radialGradient id="paint1_radial"
-                            cx="0"
-                            cy="0"
-                            r="1"
-                            gradientUnits="userSpaceOnUse"
-                            gradientTransform="translate(50 -7) rotate(-90) scale(18.5)"
-            >
-                <stop offset="0.716377"
-                      stop-color="#FFCC00"
-                />
-                <stop offset="1"
-                      stop-color="#FF9900"
-                      stop-opacity="0"
-                />
-            </radialGradient>
-        </defs>
+      </g>
+      <defs>
+        <radialGradient
+          id="gradient_edge"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(50 50) rotate(90) scale(50)"
+        >
+          <stop offset="0.6" stop-opacity="0" />
+          <stop offset="1" stop-color="white" />
+        </radialGradient>
+        <radialGradient
+          id="gradient_sun"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(50 -7) rotate(-90) scale(18.5)"
+        >
+          <stop offset="0.7" stop-color="#FFCC00" />
+          <stop offset="0.7" stop-color="#FFCC00" stop-opacity="0.6" />
+          <stop offset="1" stop-color="#FF6600" stop-opacity="0" />
+        </radialGradient>
+      </defs>
     </svg>
-</div>
+  </div>
 </template>
 
 <script>
-import { rotate } from './utils';
 import { throttle } from 'lodash';
 
+import { rotate } from './utils.js';
+
 export default {
-    props: {
-        compassRoseSizingClasses: {
-            type: String,
-            required: true
-        },
-        heading: {
-            type: Number,
-            required: true,
-            default() {
-                return 0;
-            }
-        },
-        sunHeading: {
-            type: Number,
-            default: undefined
-        },
-        cameraAngleOfView: {
-            type: Number,
-            default: undefined
-        },
-        cameraPan: {
-            type: Number,
-            required: true,
-            default() {
-                return 0;
-            }
-        },
-        sizedImageDimensions: {
-            type: Object,
-            required: true
-        }
+  props: {
+    cameraAngleOfView: {
+      type: Number,
+      required: true
+    },
+    heading: {
+      type: Number,
+      required: true
     },
-    data() {
-        return {
-            lockCompass: true
-        };
+    cameraAzimuth: {
+      type: Number,
+      default: undefined
     },
-    computed: {
-        compassRoseStyle() {
-            return { transform: `rotate(${ this.north }deg)` };
-        },
-        north() {
-            return this.lockCompass ? rotate(-this.cameraPan) : 0;
-        },
-        cardinalTextRotateN() {
-            return { transform: `translateY(-27%) rotate(${ -this.north }deg)` };
-        },
-        cardinalTextRotateS() {
-            return { transform: `translateY(30%) rotate(${ -this.north }deg)` };
-        },
-        cardinalTextRotateE() {
-            return { transform: `translateX(30%) rotate(${ -this.north }deg)` };
-        },
-        cardinalTextRotateW() {
-            return { transform: `translateX(-30%) rotate(${ -this.north }deg)` };
-        },
-        hasHeading() {
-            return this.heading !== undefined;
-        },
-        headingStyle() {
-            const rotation = rotate(this.north, this.heading);
+    transformations: {
+      type: Object,
+      required: true
+    },
+    hasGimble: {
+      type: Boolean,
+      required: true
+    },
+    normalizedCameraAzimuth: {
+      type: Number,
+      required: true
+    },
+    sunHeading: {
+      type: Number,
+      default: undefined
+    },
+    sizedImageDimensions: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      lockCompass: true
+    };
+  },
+  computed: {
+    camAngleAndPositionStyle() {
+      const translateX = this.transformations?.translateX;
+      const translateY = this.transformations?.translateY;
+      const rotation = this.transformations?.rotation;
+      const scale = this.transformations?.scale;
+
+      return {
+        transform: `translate(${translateX}%, ${translateY}%) rotate(${rotation}deg) scale(${scale})`
+      };
+    },
+    gimbledCameraPanStyle() {
+      if (!this.hasGimble) {
+        return;
+      }
+
+      const gimbledCameraPan = rotate(this.normalizedCameraAzimuth, -this.heading);
+
+      return {
+        transform: `rotate(${-gimbledCameraPan}deg)`
+      };
+    },
+    compassDialStyle() {
+      return { transform: `rotate(${this.north}deg)` };
+    },
+    north() {
+      return this.lockCompass ? rotate(-this.normalizedCameraAzimuth) : 0;
+    },
+    cardinalTextRotateN() {
+      return { transform: `translateY(-27%) rotate(${-this.north}deg)` };
+    },
+    cardinalTextRotateS() {
+      return { transform: `translateY(30%) rotate(${-this.north}deg)` };
+    },
+    cardinalTextRotateE() {
+      return { transform: `translateX(30%) rotate(${-this.north}deg)` };
+    },
+    cardinalTextRotateW() {
+      return { transform: `translateX(-30%) rotate(${-this.north}deg)` };
+    },
+    hasHeading() {
+      return this.heading !== undefined;
+    },
+    hasSunHeading() {
+      return this.sunHeading !== undefined;
+    },
+    sunHeadingStyle() {
+      const rotation = rotate(this.north, this.sunHeading);
 
-            return {
-                transform: `rotate(${ rotation }deg)`
-            };
-        },
-        hasSunHeading() {
-            return this.sunHeading !== undefined;
-        },
-        sunHeadingStyle() {
-            const rotation = rotate(this.north, this.sunHeading);
+      return {
+        transform: `rotate(${rotation}deg)`
+      };
+    },
+    cameraHeadingStyle() {
+      const rotation = rotate(this.north, this.normalizedCameraAzimuth);
 
-            return {
-                transform: `rotate(${ rotation }deg)`
-            };
-        },
-        cameraPanStyle() {
-            const rotation = rotate(this.north, this.cameraPan);
+      return {
+        transform: `rotate(${rotation}deg)`
+      };
+    },
+    // left half of camera field of view
+    // rotated counter-clockwise from camera pan angle
+    cameraFOVStyleLeftHalf() {
+      return {
+        transform: `rotate(${this.cameraAngleOfView / 2}deg)`
+      };
+    },
+    // right half of camera field of view
+    // rotated clockwise from camera pan angle
+    cameraFOVStyleRightHalf() {
+      return {
+        transform: `rotate(${-this.cameraAngleOfView / 2}deg)`
+      };
+    },
+    compassRoseSizingClasses() {
+      let compassRoseSizingClasses = '';
+      if (this.sizedImageWidth < 300) {
+        compassRoseSizingClasses = '--rose-small --rose-min';
+      } else if (this.sizedImageWidth < 500) {
+        compassRoseSizingClasses = '--rose-small';
+      } else if (this.sizedImageWidth > 1000) {
+        compassRoseSizingClasses = '--rose-max';
+      }
 
-            return {
-                transform: `rotate(${ rotation }deg)`
-            };
-        },
-        // left half of camera field of view
-        // rotated counter-clockwise from camera pan angle
-        cameraFOVStyleLeftHalf() {
-            return {
-                transform: `rotate(${ this.cameraAngleOfView / 2 }deg)`
-            };
-        },
-        // right half of camera field of view
-        // rotated clockwise from camera pan angle
-        cameraFOVStyleRightHalf() {
-            return {
-                transform: `rotate(${ -this.cameraAngleOfView / 2 }deg)`
-            };
-        }
+      return compassRoseSizingClasses;
     },
-    watch: {
-        sizedImageDimensions() {
-            this.debounceResizeSvg();
-        }
+    sizedImageWidth() {
+      return this.sizedImageDimensions.width;
     },
-    mounted() {
-        this.debounceResizeSvg = throttle(this.resizeSvg, 100);
+    sizedImageHeight() {
+      return this.sizedImageDimensions.height;
+    }
+  },
+  watch: {
+    sizedImageDimensions() {
+      this.debounceResizeSvg();
+    }
+  },
+  mounted() {
+    this.debounceResizeSvg = throttle(this.resizeSvg, 100);
 
-        this.$nextTick(() => {
-            this.debounceResizeSvg();
-        });
+    this.$nextTick(() => {
+      this.debounceResizeSvg();
+    });
+  },
+  methods: {
+    resizeSvg() {
+      const svg = this.$refs.compassRoseSvg;
+      svg.setAttribute('width', this.$refs.compassRoseWrapper.clientWidth);
+      svg.setAttribute('height', this.$refs.compassRoseWrapper.clientHeight);
     },
-    methods: {
-        resizeSvg() {
-            const svg = this.$refs.compassRoseSvg;
-            svg.setAttribute('width', this.$refs.compassRoseWrapper.clientWidth);
-            svg.setAttribute('height', this.$refs.compassRoseWrapper.clientHeight);
-        },
-        toggleLockCompass() {
-            this.lockCompass = !this.lockCompass;
-        }
+    toggleLockCompass() {
+      this.lockCompass = !this.lockCompass;
     }
+  }
 };
 </script>
diff --git a/src/plugins/imagery/components/Compass/compass.scss b/src/plugins/imagery/components/Compass/compass.scss
index dba4106d2bb..368c1062ab7 100644
--- a/src/plugins/imagery/components/Compass/compass.scss
+++ b/src/plugins/imagery/components/Compass/compass.scss
@@ -1,168 +1,194 @@
 /***************************** THEME/UI CONSTANTS AND MIXINS */
-$interfaceKeyColor: #00B9C5;
+$interfaceKeyColor: #fff;
 $elemBg: rgba(black, 0.7);
 
 @mixin sun($position: 'circle closest-side') {
-    $color: #ff9900;
-    $gradEdgePerc: 60%;
-    background: radial-gradient(#{$position}, $color, $color $gradEdgePerc, rgba($color, 0.4) $gradEdgePerc + 5%, transparent);
-
+  $color: #ff9900;
+  $gradEdgePerc: 60%;
+  background: radial-gradient(
+    #{$position},
+    $color,
+    $color $gradEdgePerc,
+    rgba($color, 0.4) $gradEdgePerc + 5%,
+    transparent
+  );
 }
 
 .c-compass {
-    pointer-events: none; // This allows the image element to receive a browser-level context click
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 1;
-    @include userSelectNone;
+  pointer-events: none; // This allows the image element to receive a browser-level context click
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 3;
+  @include userSelectNone;
 }
 
 /***************************** COMPASS HUD */
 .c-hud {
-    // To be placed within a imagery view, in the bounding box of the image
-    $m: 1px;
-    $padTB: 2px;
-    $padLR: $padTB;
-    color: $interfaceKeyColor;
-    font-size: 0.8em;
+  // To be placed within a imagery view, in the bounding box of the image
+  $m: 1px;
+  $padTB: 2px;
+  $padLR: $padTB;
+  color: $interfaceKeyColor;
+  font-size: 0.8em;
+  position: absolute;
+  top: $m;
+  right: $m;
+  left: $m;
+  height: 18px;
+
+  svg,
+  div {
     position: absolute;
-    top: $m;
-    right: $m;
-    left: $m;
-    height: 18px;
+  }
 
-    svg, div {
-        position: absolute;
-    }
+  &__display {
+    height: 30px;
+    pointer-events: all;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+  }
+
+  &__range {
+    border: 1px solid $interfaceKeyColor;
+    border-top-color: transparent;
+    position: absolute;
+    top: 50%;
+    right: $padLR;
+    bottom: $padTB;
+    left: $padLR;
+  }
+
+  [class*='__dir'] {
+    // NSEW
+    display: inline-block;
+    font-weight: bold;
+    text-shadow: 0 1px 2px black;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+  }
+
+  [class*='__dir--sub'] {
+    font-weight: normal;
+    opacity: 0.5;
+  }
+
+  &__sun {
+    $s: 10px;
+    @include sun('circle farthest-side at bottom');
+    bottom: $padTB + 2px;
+    height: $s;
+    width: $s * 2;
+    opacity: 0.8;
+    transform: translateX(-50%);
+    z-index: 1;
+  }
+}
 
-    &__display {
-        height: 30px;
-        pointer-events: all;
-        position: absolute;
-        top: 0;
-        right: 0;
-        left: 0;
+/***************************** COMPASS SVG */
+.c-compass-rose-svg {
+  $color: $interfaceKeyColor;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  g,
+  path,
+  rect {
+    // In an SVG, rotation occurs about the center of the SVG, not the element
+    transform-origin: center;
+  }
+
+  .c-cr {
+    &__bg {
+      fill: #000;
+      opacity: 0.8;
     }
 
-    &__range {
-        border: 1px solid $interfaceKeyColor;
-        border-top-color: transparent;
-        position: absolute;
-        top: 50%;
-        right: $padLR;
-        bottom: $padTB;
-        left: $padLR;
+    &__edge {
+      opacity: 0.2;
     }
 
-    [class*="__dir"] {
-        // NSEW
-        display: inline-block;
-        font-weight: bold;
-        text-shadow: 0 1px 2px black;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        z-index: 2;
+    &__sun {
+      opacity: 0.7;
     }
 
-    [class*="__dir--sub"] {
-        font-weight: normal;
-        opacity: 0.5;
+    &__cam {
+      fill: $interfaceKeyColor;
+      transform-origin: center;
+      transform: scale(0.15);
     }
 
-    &__sun {
-        $s: 10px;
-        @include sun('circle farthest-side at bottom');
-        bottom: $padTB + 2px;
-        height: $s;
-        width: $s*2;
-        opacity: 0.8;
-        transform: translateX(-50%);
-        z-index: 1;
+    &__cam-fov-l,
+    &__cam-fov-r {
+      // Cam FOV indication
+      opacity: 0.2;
+      fill: #fff;
     }
-}
 
-/***************************** COMPASS SVG */
-.c-compass-rose-svg {
-    $color: $interfaceKeyColor;
-    position: absolute;
-    top: 0; left: 0;
+    &__nsew-text,
+    &__ticks-major,
+    &__ticks-minor {
+      fill: $color;
+    }
 
-    g, path, rect {
-        // In an SVG, rotation occurs about the center of the SVG, not the element
-        transform-origin: center;
+    &__ticks-minor {
+      opacity: 0.5;
+      transform: rotate(45deg);
     }
 
-    .c-cr {
-        &__bg {
-            fill: #000;
-            opacity: 0.8;
-        }
-
-        &__edge {
-            opacity: 0.1;
-        }
-
-        &__sun {
-            opacity: 0.7;
-        }
-
-        &__cam-fov-l,
-        &__cam-fov-r {
-            // Cam FOV indication
-            opacity: 0.2;
-            fill: #fff;
-        }
-
-        &__nsew-text,
-        &__spacecraft-body,
-        &__ticks-major,
-        &__ticks-minor {
-            fill: $color;
-        }
-
-        &__ticks-minor {
-            opacity: 0.5;
-            transform: rotate(45deg);
-        }
-
-        &__spacecraft-body {
-            opacity: 0.3;
-        }
+    &__spacecraft-body {
+      opacity: 0.3;
     }
+  }
 }
 
 /***************************** DIRECTION ROSE */
 .w-direction-rose {
-    $s: 10%;
-    $m: 2%;
-    cursor: pointer;
-    pointer-events: all;
-    position: absolute;
-    bottom: $m;
-    left: $m;
+  $s: 10%;
+  $m: 2%;
+  cursor: pointer;
+  pointer-events: all;
+  position: absolute;
+  bottom: $m;
+  left: $m;
+  width: $s;
+  padding-top: $s;
+  z-index: 2;
+
+  &.--rose-min {
+    $s: 30px;
     width: $s;
     padding-top: $s;
-    z-index: 2;
-
-    &.--rose-min {
-        $s: 30px;
-        width: $s;
-        padding-top: $s;
-        .--hide-min {
-            display: none;
-        }
+    .--hide-min {
+      display: none;
     }
+  }
 
-    &.--rose-small {
-        .--hide-small {
-            display: none;
-        }
+  &.--rose-small {
+    .--hide-small {
+      display: none;
     }
+  }
 
-    &.--rose-max {
-        $s: 100px;
-        width: $s;
-        padding-top: $s;
-    }
+  &.--rose-max {
+    $s: 100px;
+    width: $s;
+    padding-top: $s;
+  }
+}
+
+/************************** ROVER */
+.cr-vrover {
+  $scale: 0.4;
+  transform-origin: center;
+
+  &__body {
+    fill: $interfaceKeyColor;
+    opacity: 0.3;
+    transform-origin: center 7% !important; // Places rotation center at mast position
+  }
 }
diff --git a/src/plugins/imagery/components/Compass/pluginSpec.js b/src/plugins/imagery/components/Compass/pluginSpec.js
index 50eaf62646c..9c4e3766c9b 100644
--- a/src/plugins/imagery/components/Compass/pluginSpec.js
+++ b/src/plugins/imagery/components/Compass/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,66 +19,72 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import Compass from './Compass.vue';
-import Vue from 'vue';
+import mount from 'utils/mount';
+
+import Compass from './CompassComponent.vue';
 
 const COMPASS_ROSE_CLASS = '.c-direction-rose';
 const COMPASS_HUD_CLASS = '.c-compass__hud';
 
-describe("The Compass component", () => {
-    let app;
-    let instance;
+describe('The Compass component', () => {
+  let _destroy;
+  let instance;
 
-    beforeEach(() => {
-        let imageDatum = {
-            heading: 100,
-            roll: 90,
-            pitch: 90,
-            cameraTilt: 100,
-            cameraPan: 90,
-            sunAngle: 30
-        };
-        let propsData = {
-            containerWidth: 600,
-            containerHeight: 600,
-            naturalAspectRatio: 0.9,
-            image: imageDatum
-        };
+  beforeEach(() => {
+    let imageDatum = {
+      heading: 100,
+      roll: 90,
+      pitch: 90,
+      cameraTilt: 100,
+      cameraAzimuth: 90,
+      sunAngle: 30,
+      transformations: {
+        translateX: 0,
+        translateY: 18,
+        rotation: 0,
+        scale: 0.3,
+        cameraAngleOfView: 70
+      }
+    };
+    let propsData = {
+      naturalAspectRatio: 0.9,
+      image: imageDatum,
+      sizedImageDimensions: {
+        width: 100,
+        height: 100
+      }
+    };
 
-        app = new Vue({
-            components: { Compass },
-            data() {
-                return propsData;
-            },
-            template: `<Compass
-                :container-width="containerWidth"
-                :container-height="containerHeight"
+    const { vNode, destroy } = mount({
+      components: { Compass },
+      data() {
+        return propsData;
+      },
+      template: `<Compass
+                :image="image"
                 :natural-aspect-ratio="naturalAspectRatio"
-                :image="image" />`
-        });
-        instance = app.$mount();
-
-    });
-
-    afterAll(() => {
-        app.$destroy();
+                :sized-image-dimensions="sizedImageDimensions"
+            />`
     });
+    _destroy = destroy;
+    instance = vNode.componentInstance;
+  });
 
-    describe("when a heading value exists on the image", () => {
+  afterAll(() => {
+    _destroy();
+  });
 
-        it("should display a compass rose", () => {
-            let compassRoseElement = instance.$el.querySelector(COMPASS_ROSE_CLASS
-            );
+  describe('when a heading value and cameraAngleOfView exists on the image', () => {
+    it('should display a compass rose', () => {
+      let compassRoseElement = instance.$el.querySelector(COMPASS_ROSE_CLASS);
 
-            expect(compassRoseElement).toBeDefined();
-        });
-
-        it("should display a compass HUD", () => {
-            let compassHUDElement = instance.$el.querySelector(COMPASS_HUD_CLASS);
+      expect(compassRoseElement).toBeDefined();
+    });
 
-            expect(compassHUDElement).toBeDefined();
-        });
+    it('should display a compass HUD', () => {
+      let compassHUDElement = instance.$el.querySelector(COMPASS_HUD_CLASS);
 
+      expect(compassHUDElement).toBeDefined();
     });
-
+  });
 });
diff --git a/src/plugins/imagery/components/Compass/utils.js b/src/plugins/imagery/components/Compass/utils.js
index 2d6a0a8a652..562108620ac 100644
--- a/src/plugins/imagery/components/Compass/utils.js
+++ b/src/plugins/imagery/components/Compass/utils.js
@@ -8,37 +8,37 @@
  * @returns {number} normalized sum of all rotations - [0, 360) degrees
  */
 export function rotate(...rotations) {
-    const rotation = rotations.reduce((a, b) => a + b, 0);
+  const rotation = rotations.reduce((a, b) => a + b, 0);
 
-    return normalizeCompassDirection(rotation);
+  return normalizeCompassDirection(rotation);
 }
 
 export function inRange(degrees, [min, max]) {
-    const point = rotate(degrees);
+  const point = rotate(degrees);
 
-    return min > max
-        ? (point >= min && point < 360) || (point <= max && point >= 0)
-        : point >= min && point <= max;
+  return min > max
+    ? (point >= min && point < 360) || (point <= max && point >= 0)
+    : point >= min && point <= max;
 }
 
 export function percentOfRange(degrees, [min, max]) {
-    let distance = rotate(degrees);
-    let minRange = min;
-    let maxRange = max;
+  let distance = rotate(degrees);
+  let minRange = min;
+  let maxRange = max;
 
-    if (min > max) {
-        if (distance < max) {
-            distance += 360;
-        }
-
-        maxRange += 360;
+  if (min > max) {
+    if (distance < max) {
+      distance += 360;
     }
 
-    return (distance - minRange) / (maxRange - minRange);
+    maxRange += 360;
+  }
+
+  return (distance - minRange) / (maxRange - minRange);
 }
 
 function normalizeCompassDirection(degrees) {
-    const base = degrees % 360;
+  const base = degrees % 360;
 
-    return base >= 0 ? base : 360 + base;
+  return base >= 0 ? base : 360 + base;
 }
diff --git a/src/plugins/imagery/components/FilterSettings.vue b/src/plugins/imagery/components/FilterSettings.vue
new file mode 100644
index 00000000000..9e0785c951c
--- /dev/null
+++ b/src/plugins/imagery/components/FilterSettings.vue
@@ -0,0 +1,94 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div
+    class="c-control-menu c-menu--to-left c-menu--has-close-btn c-image-controls c-image-controls--filters"
+    @click="handleClose"
+  >
+    <div class="c-image-controls__controls" @click="$event.stopPropagation()">
+      <span class="c-image-controls__sliders">
+        <div class="c-image-controls__slider-wrapper icon-brightness">
+          <input
+            v-model="filters.brightness"
+            type="range"
+            min="0"
+            max="500"
+            draggable="true"
+            @dragstart.stop.prevent
+            @change="notifyFiltersChanged"
+            @input="notifyFiltersChanged"
+          />
+        </div>
+        <div class="c-image-controls__slider-wrapper icon-contrast">
+          <input
+            v-model="filters.contrast"
+            type="range"
+            min="0"
+            max="500"
+            draggable="true"
+            @dragstart.stop.prevent
+            @change="notifyFiltersChanged"
+            @input="notifyFiltersChanged"
+          />
+        </div>
+      </span>
+      <span class="c-image-controls__reset-btn">
+        <a class="s-icon-button icon-reset t-btn-reset" @click="resetFilters"></a>
+      </span>
+    </div>
+
+    <button class="c-click-icon icon-x t-btn-close c-switcher-menu__close-button"></button>
+  </div>
+</template>
+
+<script>
+export default {
+  inject: ['openmct'],
+  emits: ['filter-changed'],
+  data() {
+    return {
+      filters: {
+        brightness: 100,
+        contrast: 100
+      }
+    };
+  },
+  methods: {
+    handleClose(e) {
+      const closeButton = e.target.classList.contains('c-switcher-menu__close-button');
+      if (!closeButton) {
+        e.stopPropagation();
+      }
+    },
+    notifyFiltersChanged() {
+      this.$emit('filter-changed', this.filters);
+    },
+    resetFilters() {
+      this.filters = {
+        brightness: 100,
+        contrast: 100
+      };
+      this.notifyFiltersChanged();
+    }
+  }
+};
+</script>
diff --git a/src/plugins/imagery/components/ImageControls.vue b/src/plugins/imagery/components/ImageControls.vue
new file mode 100644
index 00000000000..35c8b4b7602
--- /dev/null
+++ b/src/plugins/imagery/components/ImageControls.vue
@@ -0,0 +1,291 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div
+    class="h-local-controls h-local-controls--overlay-content h-local-controls--menus-aligned c-local-controls--show-on-hover"
+    role="toolbar"
+    aria-label="Image controls"
+  >
+    <imagery-view-menu-switcher
+      :icon-class="'icon-brightness'"
+      :aria-label="'Brightness and contrast'"
+      :title="'Brightness and contrast'"
+    >
+      <filter-settings @filter-changed="updateFilterValues" />
+    </imagery-view-menu-switcher>
+
+    <imagery-view-menu-switcher
+      v-if="layers.length"
+      icon-class="icon-layers"
+      aria-label="Layers"
+      title="Layers"
+    >
+      <layer-settings :layers="layers" @toggle-layer-visibility="toggleLayerVisibility" />
+    </imagery-view-menu-switcher>
+
+    <zoom-settings
+      class="--hide-if-less-than-220"
+      :pan-zoom-locked="panZoomLocked"
+      :zoom-factor="zoomFactor"
+      @zoom-out="zoomOut"
+      @zoom-in="zoomIn"
+      @toggle-zoom-lock="toggleZoomLock"
+      @handle-reset-image="handleResetImage"
+    />
+
+    <imagery-view-menu-switcher
+      class="--show-if-less-than-220"
+      :icon-class="'icon-magnify'"
+      :aria-label="'Zoom settings'"
+      :title="'Zoom settings'"
+    >
+      <zoom-settings
+        :pan-zoom-locked="panZoomLocked"
+        :class="'c-control-menu c-menu--has-close-btn'"
+        :zoom-factor="zoomFactor"
+        :is-menu="true"
+        @zoom-out="zoomOut"
+        @zoom-in="zoomIn"
+        @toggle-zoom-lock="toggleZoomLock"
+        @handle-reset-image="handleResetImage"
+      />
+    </imagery-view-menu-switcher>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+
+import FilterSettings from './FilterSettings.vue';
+import ImageryViewMenuSwitcher from './ImageryViewMenuSwitcher.vue';
+import LayerSettings from './LayerSettings.vue';
+import ZoomSettings from './ZoomSettings.vue';
+
+const DEFAULT_FILTER_VALUES = {
+  brightness: '100',
+  contrast: '100'
+};
+
+const ZOOM_LIMITS_MAX_DEFAULT = 20;
+const ZOOM_LIMITS_MIN_DEFAULT = 1;
+const ZOOM_STEP = 1;
+const ZOOM_WHEEL_SENSITIVITY_REDUCTION = 0.01;
+
+export default {
+  components: {
+    FilterSettings,
+    LayerSettings,
+    ImageryViewMenuSwitcher,
+    ZoomSettings
+  },
+  inject: ['openmct', 'domainObject'],
+  props: {
+    layers: {
+      type: Array,
+      required: true
+    },
+    zoomFactor: {
+      type: Number,
+      required: true
+    },
+    imageUrl: {
+      type: String,
+      default: () => {
+        return '';
+      }
+    }
+  },
+  emits: [
+    'cursors-updated',
+    'reset-image',
+    'pan-zoom-updated',
+    'filters-updated',
+    'start-pan',
+    'toggle-layer-visibility'
+  ],
+  data() {
+    return {
+      altPressed: false,
+      shiftPressed: false,
+      metaPressed: false,
+      panZoomLocked: false,
+      wheelZooming: false,
+      filters: {
+        brightness: 100,
+        contrast: 100
+      }
+    };
+  },
+  computed: {
+    cursorStates() {
+      const isPannable = this.altPressed && this.zoomFactor > 1;
+      const showCursorZoomIn = this.metaPressed && !this.shiftPressed;
+      const showCursorZoomOut = this.metaPressed && this.shiftPressed;
+      const modifierKeyPressed = Boolean(this.metaPressed || this.shiftPressed || this.altPressed);
+
+      return {
+        isPannable,
+        showCursorZoomIn,
+        showCursorZoomOut,
+        modifierKeyPressed
+      };
+    }
+  },
+  watch: {
+    imageUrl(newUrl, oldUrl) {
+      // reset image pan/zoom if newUrl only if not locked
+      if (newUrl && !this.panZoomLocked) {
+        this.handleResetImage();
+      }
+    },
+    cursorStates(states) {
+      this.$emit('cursors-updated', states);
+    }
+  },
+  mounted() {
+    document.addEventListener('keydown', this.handleKeyDown);
+    document.addEventListener('keyup', this.handleKeyUp);
+    this.clearWheelZoom = _.debounce(this.clearWheelZoom, 600);
+  },
+  beforeUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
+    document.removeEventListener('keyup', this.handleKeyUp);
+  },
+  methods: {
+    handleResetImage() {
+      this.$emit('reset-image');
+    },
+    handleUpdatePanZoom(options) {
+      this.$emit('pan-zoom-updated', options);
+    },
+    toggleZoomLock() {
+      this.panZoomLocked = !this.panZoomLocked;
+    },
+    notifyFiltersChanged() {
+      this.$emit('filters-updated', this.filters);
+    },
+    handleResetFilters() {
+      this.filters = { ...DEFAULT_FILTER_VALUES };
+      this.notifyFiltersChanged();
+    },
+    limitZoomRange(factor) {
+      return Math.min(Math.max(ZOOM_LIMITS_MIN_DEFAULT, factor), ZOOM_LIMITS_MAX_DEFAULT);
+    },
+    // used to increment the zoom without knowledge of current level
+    processZoom(increment, userCoordX, userCoordY) {
+      const newFactor = this.limitZoomRange(this.zoomFactor + increment);
+      this.zoomImage(newFactor, userCoordX, userCoordY);
+    },
+    zoomImage(newScaleFactor, screenClientX, screenClientY) {
+      if (!(newScaleFactor || Number.isInteger(newScaleFactor))) {
+        console.error('Scale factor provided is invalid');
+
+        return;
+      }
+
+      if (newScaleFactor > ZOOM_LIMITS_MAX_DEFAULT) {
+        newScaleFactor = ZOOM_LIMITS_MAX_DEFAULT;
+      }
+
+      if (newScaleFactor <= 0 || newScaleFactor <= ZOOM_LIMITS_MIN_DEFAULT) {
+        return this.handleResetImage();
+      }
+
+      this.handleUpdatePanZoom({
+        newScaleFactor,
+        screenClientX,
+        screenClientY
+      });
+    },
+    wheelZoom(e) {
+      // only use x,y coordinates on scrolling in
+      if (this.wheelZooming === false && e.deltaY > 0) {
+        this.wheelZooming = true;
+        // grab first x,y coordinates
+        this.processZoom(e.deltaY * ZOOM_WHEEL_SENSITIVITY_REDUCTION, e.clientX, e.clientY);
+      } else {
+        // ignore subsequent event x,y so scroll drift doesn't occur
+        this.processZoom(e.deltaY * ZOOM_WHEEL_SENSITIVITY_REDUCTION);
+      }
+
+      // debounced method that will only fire after the scroll series is complete
+      this.clearWheelZoom();
+    },
+    /* debounced method so that wheelZooming state will
+     ** remain true through a zoom event series
+     */
+    clearWheelZoom() {
+      this.wheelZooming = false;
+    },
+    handleKeyDown(event) {
+      if (event.key === 'Alt') {
+        this.altPressed = true;
+      }
+
+      if (event.metaKey) {
+        this.metaPressed = true;
+      }
+
+      if (event.shiftKey) {
+        this.shiftPressed = true;
+      }
+    },
+    handleKeyUp(event) {
+      if (event.key === 'Alt') {
+        this.altPressed = false;
+      }
+
+      this.shiftPressed = false;
+      if (!event.metaKey) {
+        this.metaPressed = false;
+      }
+    },
+    zoomIn() {
+      this.processZoom(ZOOM_STEP);
+    },
+    zoomOut() {
+      this.processZoom(-ZOOM_STEP);
+    },
+    // attached to onClick listener in ImageryView
+    handlePanZoomClick(e) {
+      if (this.altPressed) {
+        return this.$emit('start-pan', e);
+      }
+
+      if (!(this.metaPressed && e.button === 0)) {
+        return;
+      }
+
+      const newScaleFactor = this.zoomFactor + (this.shiftPressed ? -ZOOM_STEP : ZOOM_STEP);
+      this.zoomImage(newScaleFactor, e.clientX, e.clientY);
+    },
+    toggleLayerVisibility(index) {
+      this.$emit('toggle-layer-visibility', index);
+    },
+    updateFilterValues(filters) {
+      this.filters = filters;
+      this.notifyFiltersChanged();
+    }
+  }
+};
+</script>
diff --git a/src/plugins/imagery/components/ImageThumbnail.vue b/src/plugins/imagery/components/ImageThumbnail.vue
new file mode 100644
index 00000000000..30ce08007d2
--- /dev/null
+++ b/src/plugins/imagery/components/ImageThumbnail.vue
@@ -0,0 +1,164 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div
+    class="c-imagery__thumb c-thumb"
+    :class="{
+      active: active,
+      selected: selected,
+      'real-time': realTime
+    }"
+    :aria-label="image.formattedTime"
+    :title="image.formattedTime"
+    @click="handleClick"
+  >
+    <a class="c-thumb__image-wrapper" href="" :download="image.imageDownloadName" @click.prevent>
+      <img
+        ref="img"
+        class="c-thumb__image"
+        :src="`${image.thumbnailUrl || image.url}`"
+        fetchpriority="low"
+        @load="imageLoadCompleted"
+      />
+      <i
+        v-show="showAnnotationIndicator"
+        class="c-thumb__annotation-indicator icon-status-poll-edit"
+      >
+      </i>
+    </a>
+    <div v-if="viewableArea" class="c-thumb__viewable-area" :style="viewableAreaStyle"></div>
+    <div class="c-thumb__timestamp">{{ image.formattedTime }}</div>
+  </div>
+</template>
+
+<script>
+const THUMB_PADDING = 4;
+const BORDER_WIDTH = 2;
+
+export default {
+  props: {
+    image: {
+      type: Object,
+      required: true
+    },
+    active: {
+      type: Boolean,
+      required: true
+    },
+    selected: {
+      type: Boolean,
+      required: true
+    },
+    realTime: {
+      type: Boolean,
+      required: true
+    },
+    imageryAnnotations: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    viewableArea: {
+      type: Object,
+      default: function () {
+        return null;
+      }
+    }
+  },
+  emits: ['click'],
+  data() {
+    return {
+      imgWidth: 0,
+      imgHeight: 0
+    };
+  },
+  computed: {
+    viewableAreaStyle() {
+      if (!this.viewableArea || !this.imgWidth || !this.imgHeight) {
+        return null;
+      }
+
+      const { widthRatio, heightRatio, xOffsetRatio, yOffsetRatio } = this.viewableArea;
+      const imgWidth = this.imgWidth;
+      const imgHeight = this.imgHeight;
+
+      let translateX = imgWidth * xOffsetRatio;
+      let translateY = imgHeight * yOffsetRatio;
+      let width = imgWidth * widthRatio;
+      let height = imgHeight * heightRatio;
+
+      if (translateX < 0) {
+        width += translateX;
+        translateX = 0;
+      }
+
+      if (translateX + width > imgWidth) {
+        width = imgWidth - translateX;
+      }
+
+      if (translateX + 2 * BORDER_WIDTH > imgWidth) {
+        translateX = imgWidth - 2 * BORDER_WIDTH;
+      }
+
+      if (translateY < 0) {
+        height += translateY;
+        translateY = 0;
+      }
+
+      if (translateY + height > imgHeight) {
+        height = imgHeight - translateY;
+      }
+
+      if (translateY + 2 * BORDER_WIDTH > imgHeight) {
+        translateY = imgHeight - 2 * BORDER_WIDTH;
+      }
+
+      return {
+        transform: `translate(${translateX + THUMB_PADDING}px, ${translateY + THUMB_PADDING}px)`,
+        width: `${width}px`,
+        height: `${height}px`
+      };
+    },
+    showAnnotationIndicator() {
+      return this.imageryAnnotations.some((annotation) => {
+        return !annotation._deleted;
+      });
+    }
+  },
+  methods: {
+    handleClick(event) {
+      this.$emit('click', event);
+    },
+    imageLoadCompleted() {
+      if (!this.$refs.img) {
+        return;
+      }
+
+      const { width: imgWidth, height: imgHeight } = this.$refs.img;
+      this.imgWidth = imgWidth;
+      this.imgHeight = imgHeight;
+    }
+  }
+};
+</script>
diff --git a/src/plugins/imagery/components/ImageryTimeView.vue b/src/plugins/imagery/components/ImageryTimeView.vue
new file mode 100644
index 00000000000..f3fe87249da
--- /dev/null
+++ b/src/plugins/imagery/components/ImageryTimeView.vue
@@ -0,0 +1,415 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div ref="imagery" class="c-imagery-tsv c-timeline-holder">
+    <div ref="imageryHolder" class="c-imagery-tsv__contents u-contents"></div>
+  </div>
+</template>
+
+<script>
+import { scaleLinear, scaleUtc } from 'd3-scale';
+import _ from 'lodash';
+import mount from 'utils/mount';
+
+import SwimLane from '@/ui/components/swim-lane/SwimLane.vue';
+import PreviewAction from '@/ui/preview/PreviewAction';
+
+import imageryData from '../../imagery/mixins/imageryData.js';
+
+const PADDING = 1;
+const ROW_HEIGHT = 100;
+const IMAGE_SIZE = 85;
+const IMAGE_WIDTH_THRESHOLD = 25;
+const CONTAINER_CLASS = 'c-imagery-tsv-container';
+const NO_ITEMS_CLASS = 'c-imagery-tsv__no-items';
+const IMAGE_WRAPPER_CLASS = 'c-imagery-tsv__image-wrapper';
+const ID_PREFIX = 'wrapper-';
+
+export default {
+  mixins: [imageryData],
+  inject: ['openmct', 'domainObject', 'objectPath'],
+  data() {
+    let timeSystem = this.openmct.time.timeSystem();
+    this.metadata = {};
+    this.requestCount = 0;
+
+    return {
+      viewBounds: undefined,
+      height: 0,
+      durationFormatter: undefined,
+      imageHistory: [],
+      timeSystem: timeSystem,
+      keyString: undefined
+    };
+  },
+  watch: {
+    imageHistory: {
+      handler(newHistory, oldHistory) {
+        this.updatePlotImagery();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.previewAction = new PreviewAction(this.openmct);
+
+    this.canvas = this.$refs.imagery.appendChild(document.createElement('canvas'));
+    this.canvas.height = 0;
+    this.canvasContext = this.canvas.getContext('2d');
+    this.setDimensions();
+
+    this.setScaleAndPlotImagery = this.setScaleAndPlotImagery.bind(this);
+    this.updateViewBounds = this.updateViewBounds.bind(this);
+    this.setTimeContext = this.setTimeContext.bind(this);
+    this.setTimeContext();
+
+    this.updateViewBounds();
+
+    this.resize = _.debounce(this.resize, 400);
+    this.imageryStripResizeObserver = new ResizeObserver(this.resize);
+    this.imageryStripResizeObserver.observe(this.$refs.imagery);
+
+    this.unlisten = this.openmct.objects.observe(this.domainObject, '*', this.observeForChanges);
+  },
+  beforeUnmount() {
+    if (this.imageryStripResizeObserver) {
+      this.imageryStripResizeObserver.disconnect();
+    }
+
+    this.stopFollowingTimeContext();
+    if (this.unlisten) {
+      this.unlisten();
+    }
+    if (this.destroyImageryContainer) {
+      this.destroyImageryContainer();
+    }
+  },
+  methods: {
+    setTimeContext() {
+      this.stopFollowingTimeContext();
+      this.timeContext = this.openmct.time.getContextForView(this.objectPath);
+      this.timeContext.on('timeSystem', this.setScaleAndPlotImagery);
+      this.timeContext.on('bounds', this.updateViewBounds);
+    },
+    stopFollowingTimeContext() {
+      if (this.timeContext) {
+        this.timeContext.off('timeSystem', this.setScaleAndPlotImagery);
+        this.timeContext.off('bounds', this.updateViewBounds);
+      }
+    },
+    expand(imageTimestamp) {
+      const path = this.objectPath[0];
+      this.previewAction.invoke([path], {
+        timestamp: imageTimestamp,
+        objectPath: this.objectPath
+      });
+    },
+    observeForChanges(mutatedObject) {
+      this.updateViewBounds();
+    },
+    resize() {
+      let clientWidth = this.getClientWidth();
+      if (clientWidth !== this.width) {
+        this.setDimensions();
+        this.updateViewBounds();
+      }
+    },
+    getClientWidth() {
+      let clientWidth = this.$refs.imagery.clientWidth;
+
+      if (!clientWidth) {
+        //this is a hack - need a better way to find the parent of this component
+        let parent = this.openmct.layout.$refs.browseObject.$el;
+        if (parent) {
+          clientWidth = parent.getBoundingClientRect().width;
+        }
+      }
+
+      return clientWidth;
+    },
+    updateViewBounds(bounds, isTick) {
+      this.viewBounds = this.timeContext.bounds();
+
+      if (this.timeSystem === undefined) {
+        this.timeSystem = this.timeContext.timeSystem();
+      }
+
+      this.setScaleAndPlotImagery(this.timeSystem, !isTick);
+    },
+    setScaleAndPlotImagery(timeSystem, clearAllImagery) {
+      if (timeSystem !== undefined) {
+        this.timeSystem = timeSystem;
+        this.timeFormatter = this.getFormatter(this.timeSystem.key);
+      }
+
+      this.setScale(this.timeSystem);
+      this.updatePlotImagery(clearAllImagery);
+    },
+    getFormatter(key) {
+      const metadata = this.openmct.telemetry.getMetadata(this.domainObject);
+
+      let metadataValue = metadata.value(key) || { format: key };
+      let valueFormatter = this.openmct.telemetry.getValueFormatter(metadataValue);
+
+      return valueFormatter;
+    },
+    updatePlotImagery(clearAllImagery) {
+      this.clearPreviousImagery(clearAllImagery);
+      if (this.xScale) {
+        this.drawImagery();
+      }
+    },
+    clearPreviousImagery(clearAllImagery) {
+      //TODO: Only clear items that are out of bounds
+      let noItemsEl = this.$el.querySelectorAll(`.${NO_ITEMS_CLASS}`);
+      noItemsEl.forEach((item) => {
+        item.remove();
+      });
+      let imagery = this.$el.querySelectorAll(`.${IMAGE_WRAPPER_CLASS}`);
+      imagery.forEach((imageElm) => {
+        if (clearAllImagery) {
+          imageElm.remove();
+        } else {
+          const id = imageElm.getAttributeNS(null, 'id');
+          if (id) {
+            const timestamp = id.replace(ID_PREFIX, '');
+            if (
+              !this.isImageryInBounds({
+                time: timestamp
+              })
+            ) {
+              imageElm.remove();
+            }
+          }
+        }
+      });
+    },
+    setDimensions() {
+      const imageryHolder = this.$refs.imagery;
+      this.width = this.getClientWidth();
+
+      this.height = Math.round(imageryHolder.getBoundingClientRect().height);
+    },
+    setScale(timeSystem) {
+      if (!this.width) {
+        return;
+      }
+
+      if (timeSystem === undefined) {
+        timeSystem = this.timeContext.timeSystem();
+      }
+
+      if (timeSystem.isUTCBased) {
+        this.xScale = scaleUtc();
+        this.xScale.domain([new Date(this.viewBounds.start), new Date(this.viewBounds.end)]);
+      } else {
+        this.xScale = scaleLinear();
+        this.xScale.domain([this.viewBounds.start, this.viewBounds.end]);
+      }
+
+      this.xScale.range([PADDING, this.width - PADDING * 2]);
+    },
+    isImageryInBounds(imageObj) {
+      return imageObj.time <= this.viewBounds.end && imageObj.time >= this.viewBounds.start;
+    },
+    getImageryContainer() {
+      let containerHeight = 100;
+      let containerWidth = this.imageHistory.length ? this.width : 200;
+      let imageryContainer;
+
+      let existingContainer = this.$el.querySelector(`.${CONTAINER_CLASS}`);
+      if (existingContainer) {
+        imageryContainer = existingContainer;
+        imageryContainer.style.maxWidth = `${containerWidth}px`;
+      } else {
+        if (this.destroyImageryContainer) {
+          this.destroyImageryContainer();
+        }
+        const { vNode, destroy } = mount(
+          {
+            components: {
+              SwimLane
+            },
+            provide: {
+              openmct: this.openmct
+            },
+            data() {
+              return {
+                isNested: true
+              };
+            },
+            template: `<swim-lane :is-nested="isNested" :hide-label="true"><template v-slot:object><div class="c-imagery-tsv-container"></div></template></swim-lane>`
+          },
+          {
+            app: this.openmct.app
+          }
+        );
+
+        this.destroyImageryContainer = destroy;
+        const component = vNode.componentInstance;
+        this.$refs.imageryHolder.appendChild(component.$el);
+
+        imageryContainer = component.$el.querySelector(`.${CONTAINER_CLASS}`);
+        imageryContainer.style.maxWidth = `${containerWidth}px`;
+        imageryContainer.style.height = `${containerHeight}px`;
+      }
+
+      return imageryContainer;
+    },
+    isImageryWidthAcceptable() {
+      // We're calculating if there is enough space between images to show the thumbnails.
+      // This algorithm could probably be enhanced to check the x co-ordinate distance between 2 consecutive images, but
+      // we will go with this for now assuming imagery is not sorted by asc time so it's difficult to calculate.
+      // TODO: Use telemetry.requestCollection to get sorted telemetry
+      const currentStart = this.viewBounds.start;
+      const currentEnd = this.viewBounds.end;
+      const rectX = this.xScale(currentStart);
+      const rectY = this.xScale(currentEnd);
+      const imageContainerWidth = this.imageHistory.length
+        ? (rectY - rectX) / this.imageHistory.length
+        : 0;
+
+      return imageContainerWidth < IMAGE_WIDTH_THRESHOLD;
+    },
+    drawImagery() {
+      let imageryContainer = this.getImageryContainer();
+      const showImagePlaceholders = this.isImageryWidthAcceptable();
+      let index = 0;
+      if (this.imageHistory.length) {
+        this.imageHistory.forEach((currentImageObject) => {
+          if (this.isImageryInBounds(currentImageObject)) {
+            this.plotImagery(currentImageObject, showImagePlaceholders, imageryContainer, index);
+            index = index + 1;
+          }
+        });
+      } else {
+        this.plotNoItems(imageryContainer);
+      }
+    },
+    plotNoItems(containerElement) {
+      let textElement = document.createElement('text');
+      textElement.classList.add(NO_ITEMS_CLASS);
+      textElement.innerHTML = 'No images within timeframe';
+
+      containerElement.appendChild(textElement);
+    },
+    setNSAttributesForElement(element, attributes) {
+      if (!element) {
+        return;
+      }
+
+      Object.keys(attributes).forEach((key) => {
+        element.setAttributeNS(null, key, attributes[key]);
+      });
+    },
+    setStyles(element, styles) {
+      if (!element) {
+        return;
+      }
+
+      Object.keys(styles).forEach((key) => {
+        element.style[key] = styles[key];
+      });
+    },
+    getImageWrapper(item) {
+      const id = `${ID_PREFIX}${item.time}`;
+
+      return this.$el.querySelector(`.c-imagery-tsv__contents div[id=${id}]`);
+    },
+    plotImagery(item, showImagePlaceholders, containerElement, index) {
+      let existingImageWrapper = this.getImageWrapper(item);
+      //imageWrapper wraps the vertical tick and the image
+      if (existingImageWrapper) {
+        this.updateExistingImageWrapper(existingImageWrapper, item, showImagePlaceholders);
+      } else {
+        let imageWrapper = this.createImageWrapper(index, item, showImagePlaceholders);
+        containerElement.appendChild(imageWrapper);
+      }
+    },
+    setImageDisplay(imageElement, showImagePlaceholders) {
+      if (showImagePlaceholders) {
+        imageElement.style.display = 'none';
+      } else {
+        imageElement.style.display = 'block';
+      }
+    },
+    updateExistingImageWrapper(existingImageWrapper, image, showImagePlaceholders) {
+      //Update the x co-ordinates of the image wrapper and the url of image
+      //this is to avoid tearing down all elements completely and re-drawing them
+      this.setNSAttributesForElement(existingImageWrapper, {
+        'data-show-image-placeholders': showImagePlaceholders
+      });
+      existingImageWrapper.style.left = `${this.xScale(image.time)}px`;
+
+      let imageElement = existingImageWrapper.querySelector('img');
+      this.setNSAttributesForElement(imageElement, {
+        src: image.thumbnailUrl || image.url
+      });
+      this.setImageDisplay(imageElement, showImagePlaceholders);
+    },
+    createImageWrapper(index, image, showImagePlaceholders) {
+      const id = `${ID_PREFIX}${image.time}`;
+      let imageWrapper = document.createElement('div');
+      imageWrapper.classList.add(IMAGE_WRAPPER_CLASS);
+      imageWrapper.style.left = `${this.xScale(image.time)}px`;
+      this.setNSAttributesForElement(imageWrapper, {
+        id,
+        'data-show-image-placeholders': showImagePlaceholders
+      });
+      //create image vertical tick indicator
+      let imageTickElement = document.createElement('div');
+      imageTickElement.classList.add('c-imagery-tsv__image-handle');
+      imageTickElement.style.width = '2px';
+      imageTickElement.style.height = `${String(ROW_HEIGHT - 10)}px`;
+      imageWrapper.appendChild(imageTickElement);
+
+      //create placeholder - this will also hold the actual image
+      let imagePlaceholder = document.createElement('div');
+      imagePlaceholder.classList.add('c-imagery-tsv__image-placeholder');
+      imagePlaceholder.style.width = `${IMAGE_SIZE}px`;
+      imagePlaceholder.style.height = `${IMAGE_SIZE}px`;
+      imageWrapper.appendChild(imagePlaceholder);
+
+      //create image element
+      let imageElement = document.createElement('img');
+      this.setNSAttributesForElement(imageElement, {
+        src: image.thumbnailUrl || image.url
+      });
+      imageElement.style.width = `${IMAGE_SIZE}px`;
+      imageElement.style.height = `${IMAGE_SIZE}px`;
+      this.setImageDisplay(imageElement, showImagePlaceholders);
+
+      //handle mousedown event to show the image in a large view
+      imageWrapper.addEventListener('mousedown', (e) => {
+        if (e.button === 0) {
+          this.expand(image.time);
+        }
+      });
+
+      imagePlaceholder.appendChild(imageElement);
+
+      return imageWrapper;
+    }
+  }
+};
+</script>
diff --git a/src/plugins/imagery/components/ImageryView.vue b/src/plugins/imagery/components/ImageryView.vue
new file mode 100644
index 00000000000..543ef0875e1
--- /dev/null
+++ b/src/plugins/imagery/components/ImageryView.vue
@@ -0,0 +1,1422 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div
+    tabindex="0"
+    class="c-imagery"
+    @keyup="arrowUpHandler"
+    @keydown.prevent="arrowDownHandler"
+    @mouseover="focusElement"
+  >
+    <div
+      class="c-imagery__main-image-wrapper has-local-controls"
+      :class="imageWrapperStyle"
+      @mousedown="handlePanZoomClick"
+    >
+      <ImageControls
+        v-show="!annotationsBeingMarqueed"
+        ref="imageControls"
+        :zoom-factor="zoomFactor"
+        :image-url="imageUrl"
+        :layers="layers"
+        @reset-image="resetImage"
+        @pan-zoom-updated="handlePanZoomUpdate"
+        @filters-updated="setFilters"
+        @cursors-updated="setCursorStates"
+        @start-pan="startPan"
+        @toggle-layer-visibility="toggleLayerVisibility"
+      />
+      <div
+        ref="imageBG"
+        class="c-imagery__main-image__bg"
+        aria-label="Background Image"
+        role="button"
+      >
+        <div v-if="zoomFactor > 1" class="c-imagery__hints">
+          {{ formatImageAltText }}
+        </div>
+        <div
+          ref="focusedImageWrapper"
+          role="button"
+          class="image-wrapper"
+          aria-label="Image Wrapper"
+          :style="{
+            width: `${sizedImageWidth}px`,
+            height: `${sizedImageHeight}px`
+          }"
+          @mousedown="handlePanZoomClick"
+          @dblclick="expand"
+        >
+          <div
+            v-for="(layer, index) in visibleLayers"
+            :key="index"
+            class="layer-image s-image-layer c-imagery__layer-image js-layer-image"
+            :style="getVisibleLayerStyles(layer)"
+          ></div>
+          <img
+            ref="focusedImage"
+            aria-label="Focused Image"
+            class="c-imagery__main-image__image js-imageryView-image"
+            :src="imageUrl"
+            :draggable="!isSelectable"
+            :style="{
+              filter: `brightness(${filters.brightness}%) contrast(${filters.contrast}%)`
+            }"
+            :data-openmct-image-timestamp="time"
+            :data-openmct-object-keystring="keyString"
+            fetchpriority="low"
+          />
+          <div
+            v-if="imageUrl"
+            ref="focusedImageElement"
+            class="c-imagery__main-image__background-image"
+            :draggable="!isSelectable"
+            :style="focusImageStyles"
+          ></div>
+          <Compass
+            v-if="shouldDisplayCompass"
+            :image="focusedImage"
+            :sized-image-dimensions="sizedImageDimensions"
+          />
+          <AnnotationsCanvas
+            v-if="shouldDisplayAnnotations"
+            :image="focusedImage"
+            :imagery-annotations="imageryAnnotations[focusedImage.time]"
+            @annotation-marquee-started="pauseAndHideImageControls"
+            @annotation-marquee-finished="revealImageControls"
+            @annotations-changed="loadAnnotations"
+          />
+        </div>
+      </div>
+
+      <button
+        class="c-local-controls c-local-controls--show-on-hover c-imagery__prev-next-button c-nav c-nav--prev"
+        title="Previous image"
+        :disabled="isPrevDisabled"
+        @click="prevImage()"
+      ></button>
+
+      <button
+        class="c-local-controls c-local-controls--show-on-hover c-imagery__prev-next-button c-nav c-nav--next"
+        title="Next image"
+        :disabled="isNextDisabled"
+        @click="nextImage()"
+      ></button>
+
+      <div class="c-imagery__control-bar">
+        <div class="c-imagery__time">
+          <div class="c-imagery__timestamp u-style-receiver js-style-receiver">{{ time }}</div>
+
+          <!-- image fresh -->
+          <div
+            v-if="canTrackDuration"
+            :style="{
+              'animation-delay': imageFreshnessOptions.fadeOutDelayTime,
+              'animation-duration': imageFreshnessOptions.fadeOutDurationTime
+            }"
+            :class="{ 'c-imagery--new': isImageNew && !refreshCSS }"
+            class="c-imagery__age icon-timer"
+          >
+            {{ formattedDuration }}
+          </div>
+
+          <!-- spacecraft position fresh -->
+          <div
+            v-if="relatedTelemetry.hasRelatedTelemetry && isSpacecraftPositionFresh"
+            class="c-imagery__age icon-check c-imagery--new no-animation"
+          >
+            ROV
+          </div>
+
+          <!-- camera position fresh -->
+          <div
+            v-if="relatedTelemetry.hasRelatedTelemetry && isCameraPositionFresh"
+            class="c-imagery__age icon-check c-imagery--new no-animation"
+          >
+            CAM
+          </div>
+        </div>
+        <div class="h-local-controls">
+          <button
+            v-if="!isFixed"
+            class="c-button icon-pause pause-play"
+            :class="{ 'is-paused': isPaused }"
+            @click="handlePauseButton(!isPaused)"
+          ></button>
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="displayThumbnails"
+      class="c-imagery__thumbs-wrapper"
+      :class="[
+        { 'is-paused': isPaused && !isFixed },
+        { 'is-autoscroll-off': !resizingWindow && !autoScroll && !isPaused },
+        { 'is-small-thumbs': displayThumbnailsSmall },
+        { hide: !displayThumbnails }
+      ]"
+    >
+      <div
+        ref="thumbsWrapper"
+        class="c-imagery__thumbs-scroll-area"
+        :class="[
+          {
+            'animate-scroll': animateThumbScroll
+          }
+        ]"
+        @scroll="handleScroll"
+      >
+        <ImageThumbnail
+          v-for="(image, index) in imageHistory"
+          :key="`${image.thumbnailUrl || image.url}-${image.time}-${index}`"
+          :image="image"
+          :active="focusedImageIndex === index"
+          :imagery-annotations="imageryAnnotations[image.time]"
+          :selected="focusedImageIndex === index && isPaused"
+          :real-time="!isFixed"
+          :viewable-area="focusedImageIndex === index ? viewableArea : null"
+          @click="thumbnailClicked(index)"
+        />
+      </div>
+
+      <button
+        class="c-imagery__auto-scroll-resume-button c-icon-button icon-play"
+        title="Resume automatic scrolling of image thumbnails"
+        @click="scrollToRight"
+      ></button>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import moment from 'moment';
+import { nextTick } from 'vue';
+
+import { TIME_CONTEXT_EVENTS } from '../../../api/time/constants.js';
+import imageryData from '../../imagery/mixins/imageryData.js';
+import eventHelpers from '../lib/eventHelpers.js';
+import AnnotationsCanvas from './AnnotationsCanvas.vue';
+import Compass from './Compass/CompassComponent.vue';
+import ImageControls from './ImageControls.vue';
+import ImageThumbnail from './ImageThumbnail.vue';
+import RelatedTelemetry from './RelatedTelemetry/RelatedTelemetry.js';
+
+const REFRESH_CSS_MS = 500;
+const DURATION_TRACK_MS = 1000;
+const ARROW_DOWN_DELAY_CHECK_MS = 400;
+const ARROW_SCROLL_RATE_MS = 100;
+const THUMBNAIL_CLICKED = true;
+
+const ONE_MINUTE = 60 * 1000;
+const FIVE_MINUTES = 5 * ONE_MINUTE;
+const ONE_HOUR = ONE_MINUTE * 60;
+const EIGHT_HOURS = 8 * ONE_HOUR;
+const TWENTYFOUR_HOURS = EIGHT_HOURS * 3;
+
+const ARROW_RIGHT = 39;
+const ARROW_LEFT = 37;
+
+const SCROLL_LATENCY = 250;
+
+const ZOOM_SCALE_DEFAULT = 1;
+const SHOW_THUMBS_THRESHOLD_HEIGHT = 200;
+const SHOW_THUMBS_FULLSIZE_THRESHOLD_HEIGHT = 600;
+
+const IMAGE_CONTAINER_BORDER_WIDTH = 1;
+
+const DEFAULT_IMAGE_PAN_ALT_TEXT = 'Alt drag to pan';
+const LINUX_IMAGE_PAN_ALT_TEXT = `Shift+${DEFAULT_IMAGE_PAN_ALT_TEXT}`;
+
+export default {
+  name: 'ImageryView',
+  components: {
+    Compass,
+    ImageControls,
+    ImageThumbnail,
+    AnnotationsCanvas
+  },
+  mixins: [imageryData],
+  inject: [
+    'openmct',
+    'domainObject',
+    'objectPath',
+    'currentView',
+    'imageFreshnessOptions',
+    'showCompassHUD'
+  ],
+  props: {
+    focusedImageTimestamp: {
+      type: Number,
+      default() {
+        return undefined;
+      }
+    }
+  },
+  emits: ['update:focused-image-timestamp'],
+  data() {
+    let timeSystem = this.openmct.time.getTimeSystem();
+    this.metadata = {};
+    this.requestCount = 0;
+
+    return {
+      timeFormat: '',
+      layers: [],
+      visibleLayers: [],
+      durationFormatter: undefined,
+      imageHistory: [],
+      bounds: {},
+      timeSystem: timeSystem,
+      keyString: undefined,
+      autoScroll: true,
+      thumbnailClick: THUMBNAIL_CLICKED,
+      isPaused: false,
+      isFixed: false,
+      canTrackDuration: false,
+      refreshCSS: false,
+      focusedImageIndex: undefined,
+      focusedImageRelatedTelemetry: {},
+      numericDuration: undefined,
+      relatedTelemetry: {},
+      latestRelatedTelemetry: {},
+      focusedImageNaturalAspectRatio: undefined,
+      imageContainerWidth: undefined,
+      imageContainerHeight: undefined,
+      sizedImageWidth: 0,
+      sizedImageHeight: 0,
+      viewHeight: 0,
+      lockCompass: true,
+      resizingWindow: false,
+      zoomFactor: ZOOM_SCALE_DEFAULT,
+      filters: {
+        brightness: 100,
+        contrast: 100
+      },
+      cursorStates: {
+        isPannable: false,
+        showCursorZoomIn: false,
+        showCursorZoomOut: false,
+        modifierKeyPressed: false
+      },
+      imageTranslateX: 0,
+      imageTranslateY: 0,
+      imageViewportWidth: 0,
+      imageViewportHeight: 0,
+      pan: undefined,
+      animateZoom: true,
+      imagePanned: false,
+      forceShowThumbnails: false,
+      animateThumbScroll: false,
+      imageryAnnotations: {},
+      annotationsBeingMarqueed: false
+    };
+  },
+  computed: {
+    displayThumbnails() {
+      return this.forceShowThumbnails || this.viewHeight >= SHOW_THUMBS_THRESHOLD_HEIGHT;
+    },
+    displayThumbnailsSmall() {
+      return (
+        this.viewHeight > SHOW_THUMBS_THRESHOLD_HEIGHT &&
+        this.viewHeight <= SHOW_THUMBS_FULLSIZE_THRESHOLD_HEIGHT
+      );
+    },
+    focusImageStyles() {
+      return {
+        filter: `brightness(${this.filters.brightness}%) contrast(${this.filters.contrast}%)`,
+        backgroundImage: `${
+          this.imageUrl
+            ? `url(${this.imageUrl}),
+                            repeating-linear-gradient(
+                                45deg,
+                                transparent,
+                                transparent 4px,
+                                rgba(125,125,125,.2) 4px,
+                                rgba(125,125,125,.2) 8px
+                            )`
+            : ''
+        }`,
+        transform: `scale(${this.zoomFactor}) translate(${this.imageTranslateX / 2}px, ${
+          this.imageTranslateY / 2
+        }px)`,
+        transition: `${!this.pan && this.animateZoom ? 'transform 250ms ease-in' : 'initial'}`,
+        width: `${this.sizedImageWidth}px`,
+        height: `${this.sizedImageHeight}px`
+      };
+    },
+    time() {
+      return this.formatTime(this.focusedImage);
+    },
+    imageUrl() {
+      return this.formatImageUrl(this.focusedImage);
+    },
+    imageWrapperStyle() {
+      return {
+        cursorZoomIn: this.cursorStates.showCursorZoomIn,
+        cursorZoomOut: this.cursorStates.showCursorZoomOut,
+        pannable: this.cursorStates.isPannable,
+        paused: this.isPaused && !this.isFixed,
+        unsynced: this.isPaused && !this.isFixed,
+        stale: false
+      };
+    },
+    isImageNew() {
+      let cutoff = FIVE_MINUTES;
+      if (this.imageFreshnessOptions) {
+        const { fadeOutDelayTime, fadeOutDurationTime } = this.imageFreshnessOptions;
+        // convert css duration to IS8601 format for parsing
+        const isoFormattedDuration = 'PT' + fadeOutDurationTime.toUpperCase();
+        const isoFormattedDelay = 'PT' + fadeOutDelayTime.toUpperCase();
+        const parsedDuration = moment.duration(isoFormattedDuration).asMilliseconds();
+        const parsedDelay = moment.duration(isoFormattedDelay).asMilliseconds();
+        cutoff = parsedDuration + parsedDelay;
+      }
+
+      let age = this.numericDuration;
+
+      return age < cutoff && !this.refreshCSS;
+    },
+    isNextDisabled() {
+      let disabled = false;
+
+      if (
+        this.focusedImageIndex === -1 ||
+        this.focusedImageIndex === this.imageHistory.length - 1
+      ) {
+        disabled = true;
+      }
+
+      return disabled;
+    },
+    isPrevDisabled() {
+      let disabled = false;
+
+      if (this.focusedImageIndex === 0 || this.imageHistory.length < 2) {
+        disabled = true;
+      }
+
+      return disabled;
+    },
+    isComposedInLayout() {
+      return (
+        this.currentView?.objectPath &&
+        !this.openmct.router.isNavigatedObject(this.currentView.objectPath)
+      );
+    },
+    focusedImage() {
+      return this.imageHistory[this.focusedImageIndex];
+    },
+    parsedSelectedTime() {
+      return this.parseTime(this.focusedImage);
+    },
+    formattedDuration() {
+      let result = 'N/A';
+      let negativeAge = -1;
+      if (!Number.isInteger(this.numericDuration)) {
+        return result;
+      }
+
+      if (this.numericDuration > TWENTYFOUR_HOURS) {
+        negativeAge *= this.numericDuration / TWENTYFOUR_HOURS;
+        result = moment.duration(negativeAge, 'days').humanize(true);
+      } else if (this.numericDuration > EIGHT_HOURS) {
+        negativeAge *= this.numericDuration / ONE_HOUR;
+        result = moment.duration(negativeAge, 'hours').humanize(true);
+      } else if (this.durationFormatter) {
+        result = this.durationFormatter.format(this.numericDuration);
+      }
+
+      return result;
+    },
+    shouldDisplayAnnotations() {
+      const imageHeightAndWidth = this.sizedImageHeight !== 0 && this.sizedImageWidth !== 0;
+      const display =
+        this.focusedImage !== undefined &&
+        this.focusedImageNaturalAspectRatio !== undefined &&
+        this.imageContainerWidth !== undefined &&
+        this.imageContainerHeight !== undefined &&
+        imageHeightAndWidth &&
+        this.zoomFactor === 1 &&
+        this.imagePanned !== true;
+
+      return display;
+    },
+    shouldDisplayCompass() {
+      const imageHeightAndWidth = this.sizedImageHeight !== 0 && this.sizedImageWidth !== 0;
+      const display =
+        this.focusedImage !== undefined &&
+        this.focusedImageNaturalAspectRatio !== undefined &&
+        this.imageContainerWidth !== undefined &&
+        this.imageContainerHeight !== undefined &&
+        imageHeightAndWidth &&
+        this.zoomFactor === 1 &&
+        this.imagePanned !== true;
+      const hasHeading = this.focusedImage?.heading !== undefined;
+      const hasCameraAngleOfView = this.focusedImage?.transformations?.cameraAngleOfView > 0;
+
+      return display && hasCameraAngleOfView && hasHeading;
+    },
+    isSpacecraftPositionFresh() {
+      let isFresh = undefined;
+      let latest = this.latestRelatedTelemetry;
+      let focused = this.focusedImageRelatedTelemetry;
+
+      if (this.relatedTelemetry.hasRelatedTelemetry) {
+        isFresh = true;
+        for (let key of this.spacecraftPositionKeys) {
+          if (this.relatedTelemetry[key] && latest[key] && focused[key]) {
+            isFresh =
+              isFresh &&
+              Boolean(this.relatedTelemetry[key].comparisonFunction(latest[key], focused[key]));
+          } else {
+            isFresh = false;
+          }
+        }
+      }
+
+      return isFresh;
+    },
+    isSpacecraftOrientationFresh() {
+      let isFresh = undefined;
+      let latest = this.latestRelatedTelemetry;
+      let focused = this.focusedImageRelatedTelemetry;
+
+      if (this.relatedTelemetry.hasRelatedTelemetry) {
+        isFresh = true;
+        for (let key of this.spacecraftOrientationKeys) {
+          if (this.relatedTelemetry[key] && latest[key] && focused[key]) {
+            isFresh =
+              isFresh &&
+              Boolean(this.relatedTelemetry[key].comparisonFunction(latest[key], focused[key]));
+          } else {
+            isFresh = false;
+          }
+        }
+      }
+
+      return isFresh;
+    },
+    isCameraPositionFresh() {
+      let isFresh = undefined;
+      let latest = this.latestRelatedTelemetry;
+      let focused = this.focusedImageRelatedTelemetry;
+
+      if (this.relatedTelemetry.hasRelatedTelemetry) {
+        isFresh = true;
+
+        // camera freshness relies on spacecraft position freshness
+        if (this.isSpacecraftPositionFresh && this.isSpacecraftOrientationFresh) {
+          for (let key of this.cameraKeys) {
+            if (this.relatedTelemetry[key] && latest[key] && focused[key]) {
+              isFresh =
+                isFresh &&
+                Boolean(this.relatedTelemetry[key].comparisonFunction(latest[key], focused[key]));
+            } else {
+              isFresh = false;
+            }
+          }
+        } else {
+          isFresh = false;
+        }
+      }
+
+      return isFresh;
+    },
+    isSelectable() {
+      return true;
+    },
+    sizedImageDimensions() {
+      return {
+        width: this.sizedImageWidth,
+        height: this.sizedImageHeight
+      };
+    },
+    formatImageAltText() {
+      const regexLinux = /Linux/;
+      const navigator = window.navigator.userAgent;
+
+      if (regexLinux.test(navigator)) {
+        return LINUX_IMAGE_PAN_ALT_TEXT;
+      }
+
+      return DEFAULT_IMAGE_PAN_ALT_TEXT;
+    },
+    viewableArea() {
+      if (this.zoomFactor === 1) {
+        return null;
+      }
+
+      const imageWidth = this.sizedImageWidth * this.zoomFactor;
+      const imageHeight = this.sizedImageHeight * this.zoomFactor;
+      const xOffset = (imageWidth - this.imageViewportWidth) / 2;
+      const yOffset = (imageHeight - this.imageViewportHeight) / 2;
+
+      return {
+        widthRatio: this.imageViewportWidth / imageWidth,
+        heightRatio: this.imageViewportHeight / imageHeight,
+        xOffsetRatio: (xOffset - this.imageTranslateX * this.zoomFactor) / imageWidth,
+        yOffsetRatio: (yOffset - this.imageTranslateY * this.zoomFactor) / imageHeight
+      };
+    }
+  },
+  watch: {
+    imageHistory: {
+      async handler(newHistory, oldHistory) {
+        const newSize = newHistory.length;
+        let imageIndex = newSize > 0 ? newSize - 1 : undefined;
+        if (this.focusedImageTimestamp !== undefined) {
+          const foundImageIndex = newHistory.findIndex(
+            (img) => img.time === this.focusedImageTimestamp
+          );
+          if (foundImageIndex > -1) {
+            imageIndex = foundImageIndex;
+          }
+        }
+
+        this.setFocusedImage(imageIndex);
+        this.nextImageIndex = imageIndex;
+
+        if (this.previousFocusedImage && newHistory.length) {
+          const matchIndex = this.matchIndexOfPreviousImage(this.previousFocusedImage, newHistory);
+
+          if (matchIndex > -1) {
+            this.setFocusedImage(matchIndex);
+          } else {
+            this.paused();
+          }
+        }
+
+        if (!this.isPaused) {
+          this.setFocusedImage(imageIndex);
+        }
+
+        await this.scrollHandler();
+        if (oldHistory?.length > 0) {
+          this.animateThumbScroll = true;
+        }
+      },
+      deep: true
+    },
+    focusedImage: {
+      handler(newImage, oldImage) {
+        const newTime = newImage?.time;
+        const oldTime = oldImage?.time;
+        const newUrl = newImage?.url;
+        const oldUrl = oldImage?.url;
+
+        // Skip if it's all falsy
+        if (!newTime && !oldTime && !newUrl && !oldUrl) {
+          return;
+        }
+
+        // Skip if it's the same image
+        if (newTime === oldTime && newUrl === oldUrl) {
+          return;
+        }
+
+        // Update image duration and reset age CSS
+        this.trackDuration();
+        this.resetAgeCSS();
+
+        // Reset image dimensions and calculate new dimensions
+        // on new image load
+        this.getImageNaturalDimensions();
+
+        // Get the related telemetry for the new image
+        this.updateRelatedTelemetryForFocusedImage();
+      }
+    },
+    bounds() {
+      this.scrollHandler();
+    },
+    isFixed(newValue) {
+      const isRealTime = !newValue;
+      // if realtime unpause which will focus on latest image
+      if (isRealTime) {
+        this.paused(false);
+      }
+    }
+  },
+  created() {
+    this.abortController = new AbortController();
+  },
+  async mounted() {
+    eventHelpers.extend(this);
+    this.focusedImageWrapper = this.$refs.focusedImageWrapper;
+    this.focusedImageElement = this.$refs.focusedImageElement;
+
+    //We only need to use this till the user focuses an image manually
+    if (this.focusedImageTimestamp !== undefined) {
+      this.isPaused = true;
+    }
+
+    this.setTimeContext();
+
+    // related telemetry keys
+    this.spacecraftPositionKeys = ['positionX', 'positionY', 'positionZ'];
+    this.spacecraftOrientationKeys = ['heading'];
+    this.cameraKeys = ['cameraPan', 'cameraTilt'];
+    this.sunKeys = ['sunOrientation'];
+    this.transformationsKeys = ['transformations'];
+
+    // related telemetry
+    await this.initializeRelatedTelemetry();
+    await this.updateRelatedTelemetryForFocusedImage();
+    this.trackLatestRelatedTelemetry();
+
+    // for scrolling through images quickly and resizing the object view
+    this.updateRelatedTelemetryForFocusedImage = _.debounce(
+      this.updateRelatedTelemetryForFocusedImage,
+      400
+    );
+
+    // for resizing the object view
+    this.resizeImageContainer = _.debounce(this.resizeImageContainer, 400, { leading: true });
+
+    if (this.$refs.imageBG) {
+      this.imageContainerResizeObserver = new ResizeObserver(this.resizeImageContainer);
+      this.imageContainerResizeObserver.observe(this.$refs.imageBG);
+    }
+
+    // For adjusting scroll bar size and position when resizing thumbs wrapper
+    this.handleScroll = _.debounce(this.handleScroll, SCROLL_LATENCY);
+    this.handleThumbWindowResizeEnded = _.debounce(
+      this.handleThumbWindowResizeEnded,
+      SCROLL_LATENCY
+    );
+    this.handleThumbWindowResizeStart = _.debounce(
+      this.handleThumbWindowResizeStart,
+      SCROLL_LATENCY
+    );
+    this.scrollToFocused = _.debounce(this.scrollToFocused, 400);
+
+    if (this.$refs.thumbsWrapper) {
+      this.thumbWrapperResizeObserver = new ResizeObserver(this.handleThumbWindowResizeStart);
+      this.thumbWrapperResizeObserver.observe(this.$refs.thumbsWrapper);
+    }
+
+    this.listenTo(this.focusedImageWrapper, 'wheel', this.wheelZoom, this);
+    this.loadVisibleLayers();
+    this.loadAnnotations();
+
+    this.openmct.selection.on('change', this.updateSelection);
+  },
+  beforeUnmount() {
+    this.abortController.abort();
+    this.persistVisibleLayers();
+    this.stopFollowingTimeContext();
+
+    if (this.thumbWrapperResizeObserver) {
+      this.thumbWrapperResizeObserver.disconnect();
+    }
+
+    if (this.imageContainerResizeObserver) {
+      this.imageContainerResizeObserver.disconnect();
+    }
+
+    if (this.relatedTelemetry.hasRelatedTelemetry) {
+      this.relatedTelemetry.destroy();
+    }
+
+    // unsubscribe from related telemetry
+    if (this.relatedTelemetry.hasRelatedTelemetry) {
+      for (let key of this.relatedTelemetry.keys) {
+        if (this.relatedTelemetry[key] && this.relatedTelemetry[key].unsubscribe) {
+          this.relatedTelemetry[key].unsubscribe();
+        }
+      }
+    }
+
+    // remove all eventListeners
+    this.stopListening();
+
+    Object.keys(this.imageryAnnotations).forEach((time) => {
+      const imageAnnotationsForTime = this.imageryAnnotations[time];
+      imageAnnotationsForTime.forEach((imageAnnotation) => {
+        this.openmct.objects.destroyMutable(imageAnnotation);
+      });
+    });
+
+    this.openmct.selection.off('change', this.updateSelection);
+  },
+  methods: {
+    calculateViewHeight() {
+      this.viewHeight = this.$el.clientHeight;
+    },
+    getVisibleLayerStyles(layer) {
+      return {
+        backgroundImage: `url(${layer.source})`,
+        transform: `scale(${this.zoomFactor}) translate(${this.imageTranslateX / 2}px, ${
+          this.imageTranslateY / 2
+        }px)`,
+        transition: `${!this.pan && this.animateZoom ? 'transform 250ms ease-in' : 'initial'}`
+      };
+    },
+    pauseAndHideImageControls() {
+      this.annotationsBeingMarqueed = true;
+      this.handlePauseButton(true);
+    },
+    revealImageControls() {
+      this.annotationsBeingMarqueed = false;
+    },
+    setTimeContext() {
+      this.stopFollowingTimeContext();
+      this.timeContext = this.openmct.time.getContextForView(this.objectPath);
+      //listen
+      this.timeContext.on('timeSystem', this.setModeAndTrackDuration);
+      this.timeContext.on(TIME_CONTEXT_EVENTS.clockChanged, this.setModeAndTrackDuration);
+      this.timeContext.on(TIME_CONTEXT_EVENTS.modeChanged, this.setModeAndTrackDuration);
+      this.setModeAndTrackDuration();
+    },
+    stopFollowingTimeContext() {
+      if (this.timeContext) {
+        this.timeContext.off('timeSystem', this.setModeAndTrackDuration);
+        this.timeContext.off(TIME_CONTEXT_EVENTS.clockChanged, this.setModeAndTrackDuration);
+        this.timeContext.off(TIME_CONTEXT_EVENTS.modeChanged, this.setModeAndTrackDuration);
+      }
+    },
+    setModeAndTrackDuration() {
+      this.setIsFixed();
+      this.setCanTrackDuration();
+      this.trackDuration();
+    },
+    setIsFixed() {
+      this.isFixed = this.timeContext.isRealTime() === false;
+    },
+    setCanTrackDuration() {
+      let isRealTime = this.timeContext.isRealTime();
+      this.canTrackDuration = isRealTime && this.timeSystem.isUTCBased;
+    },
+    updateSelection(selection) {
+      const selectionType = selection?.[0]?.[0]?.context?.type;
+      const validSelectionTypes = ['annotation-search-result'];
+
+      if (!validSelectionTypes.includes(selectionType)) {
+        // wrong type of selection
+        return;
+      }
+    },
+    expand() {
+      // check for modifier keys so it doesn't interfere with the layout
+      if (this.cursorStates.modifierKeyPressed) {
+        return;
+      }
+
+      const actionCollection = this.openmct.actions.getActionsCollection(
+        this.objectPath,
+        this.currentView
+      );
+      const visibleActions = actionCollection.getVisibleActions();
+      const viewLargeAction = visibleActions?.find((action) => action.key === 'large.view');
+
+      if (viewLargeAction?.appliesTo(this.objectPath, this.currentView)) {
+        viewLargeAction.invoke(this.objectPath, this.currentView);
+      }
+    },
+    async initializeRelatedTelemetry() {
+      this.relatedTelemetry = new RelatedTelemetry(
+        this.openmct,
+        this.domainObject,
+        [
+          ...this.spacecraftPositionKeys,
+          ...this.spacecraftOrientationKeys,
+          ...this.cameraKeys,
+          ...this.sunKeys,
+          ...this.transformationsKeys
+        ],
+        this.timeContext
+      );
+
+      if (this.relatedTelemetry.hasRelatedTelemetry) {
+        await this.relatedTelemetry.load();
+      }
+    },
+    async getMostRecentRelatedTelemetry(key, targetDatum) {
+      if (!this.relatedTelemetry.hasRelatedTelemetry) {
+        throw new Error(`${this.domainObject.name} does not have any related telemetry`);
+      }
+
+      if (!this.relatedTelemetry[key]) {
+        throw new Error(`${key} does not exist on related telemetry`);
+      }
+
+      let mostRecent;
+      let valueKey = this.relatedTelemetry[key].historical.valueKey;
+      let valuesOnTelemetry = this.relatedTelemetry[key].hasTelemetryOnDatum;
+
+      if (valuesOnTelemetry) {
+        mostRecent = targetDatum[valueKey];
+
+        if (mostRecent) {
+          return mostRecent;
+        } else {
+          console.warn(
+            `Related Telemetry for ${key} does NOT exist on this telemetry datum as configuration implied.`
+          );
+
+          return;
+        }
+      }
+
+      mostRecent = await this.relatedTelemetry[key].requestLatestFor(targetDatum);
+
+      return mostRecent[valueKey];
+    },
+    loadVisibleLayers() {
+      const layersMetadata = this.imageMetadataValue.layers;
+      if (!layersMetadata) {
+        return;
+      }
+
+      this.layers = layersMetadata;
+      if (this.domainObject.configuration) {
+        const persistedLayers = this.domainObject.configuration.layers;
+        if (!persistedLayers) {
+          this.layers.forEach((layer) => (layer.visible = false));
+          return;
+        }
+
+        layersMetadata.forEach((layer) => {
+          const persistedLayer = persistedLayers.find((object) => object.name === layer.name);
+          if (persistedLayer) {
+            layer.visible = persistedLayer.visible === true;
+          }
+        });
+        this.visibleLayers = this.layers.filter((layer) => layer.visible);
+      } else {
+        this.visibleLayers = [];
+        this.layers.forEach((layer) => {
+          layer.visible = false;
+        });
+      }
+    },
+    async loadAnnotations(existingAnnotations) {
+      if (!this.openmct.annotation.getAvailableTags().length) {
+        // don't bother loading annotations if there are no tags
+        return;
+      }
+      let foundAnnotations = existingAnnotations;
+      if (!foundAnnotations) {
+        // attempt to load
+        foundAnnotations = await this.openmct.annotation.getAnnotations(
+          this.domainObject.identifier,
+          this.abortController.signal
+        );
+      }
+      foundAnnotations.forEach((foundAnnotation) => {
+        const targetId = Object.keys(foundAnnotation.targets)[0];
+        const timeForAnnotation = foundAnnotation.targets[targetId].time;
+        if (!this.imageryAnnotations[timeForAnnotation]) {
+          this.imageryAnnotations[timeForAnnotation] = [];
+        }
+
+        const annotationExtant = this.imageryAnnotations[timeForAnnotation].some(
+          (existingAnnotation) => {
+            return this.openmct.objects.areIdsEqual(
+              existingAnnotation.identifier,
+              foundAnnotation.identifier
+            );
+          }
+        );
+        if (!annotationExtant) {
+          const annotationArray = this.imageryAnnotations[timeForAnnotation];
+          const mutableAnnotation = this.openmct.objects.toMutable(foundAnnotation);
+          annotationArray.push(mutableAnnotation);
+        }
+      });
+    },
+    persistVisibleLayers() {
+      if (
+        this.domainObject.configuration &&
+        this.openmct.objects.supportsMutation(this.domainObject.identifier)
+      ) {
+        this.openmct.objects.mutate(this.domainObject, 'configuration.layers', this.layers);
+      }
+
+      this.visibleLayers = [];
+      this.layers = [];
+    },
+    // will subscribe to data for this key if not already done
+    subscribeToDataForKey(key) {
+      if (this.relatedTelemetry[key].isSubscribed) {
+        return;
+      }
+
+      if (this.relatedTelemetry[key].realtimeDomainObject) {
+        this.relatedTelemetry[key].unsubscribe = this.openmct.telemetry.subscribe(
+          this.relatedTelemetry[key].realtimeDomainObject,
+          (datum) => {
+            this.relatedTelemetry[key].listeners.forEach((callback) => {
+              callback(datum);
+            });
+          }
+        );
+
+        this.relatedTelemetry[key].isSubscribed = true;
+      }
+    },
+    async updateRelatedTelemetryForFocusedImage() {
+      if (!this.relatedTelemetry.hasRelatedTelemetry || !this.focusedImage) {
+        return;
+      }
+
+      // set data ON image telemetry as well as in focusedImageRelatedTelemetry
+      for (let key of this.relatedTelemetry.keys) {
+        if (
+          this.relatedTelemetry[key] &&
+          this.relatedTelemetry[key].historical &&
+          this.relatedTelemetry[key].requestLatestFor
+        ) {
+          let valuesOnTelemetry = this.relatedTelemetry[key].hasTelemetryOnDatum;
+          let value = await this.getMostRecentRelatedTelemetry(key, this.focusedImage);
+
+          if (!valuesOnTelemetry) {
+            this.imageHistory[this.focusedImageIndex][key] = value; // manually add to telemetry
+          }
+
+          this.focusedImageRelatedTelemetry[key] = value;
+        }
+      }
+
+      // set configuration for compass
+      this.transformationsKeys.forEach((key) => {
+        const transformations = this.relatedTelemetry[key];
+
+        if (transformations !== undefined) {
+          this.imageHistory[this.focusedImageIndex][key] = transformations;
+        }
+      });
+    },
+    trackLatestRelatedTelemetry() {
+      [
+        ...this.spacecraftPositionKeys,
+        ...this.spacecraftOrientationKeys,
+        ...this.cameraKeys,
+        ...this.sunKeys
+      ].forEach((key) => {
+        if (this.relatedTelemetry[key] && this.relatedTelemetry[key].subscribe) {
+          this.relatedTelemetry[key].subscribe((datum) => {
+            let valueKey = this.relatedTelemetry[key].realtime.valueKey;
+            this.latestRelatedTelemetry[key] = datum[valueKey];
+          });
+        }
+      });
+    },
+    focusElement() {
+      if (this.isComposedInLayout) {
+        return false;
+      }
+
+      this.$el.focus();
+    },
+
+    handleScroll() {
+      const thumbsWrapper = this.$refs.thumbsWrapper;
+      if (!thumbsWrapper || this.resizingWindow) {
+        return;
+      }
+
+      const { scrollLeft, scrollWidth, clientWidth } = thumbsWrapper;
+      const disableScroll = scrollWidth > Math.ceil(scrollLeft + clientWidth);
+      this.autoScroll = !disableScroll;
+    },
+    handlePauseButton(newState) {
+      this.paused(newState);
+      if (newState) {
+        // need to set the focused index or the paused focus will drift
+        this.thumbnailClicked(this.focusedImageIndex);
+      }
+    },
+    paused(state) {
+      this.isPaused = Boolean(state);
+
+      if (!state) {
+        this.previousFocusedImage = null;
+        this.setFocusedImage(this.nextImageIndex);
+        this.autoScroll = true;
+        this.scrollHandler();
+      }
+    },
+    scrollToFocused() {
+      const thumbsWrapper = this.$refs.thumbsWrapper;
+      if (!thumbsWrapper) {
+        return;
+      }
+
+      let domThumb = thumbsWrapper.children[this.focusedImageIndex];
+      if (!domThumb) {
+        return;
+      }
+
+      // separate scrollTo function had to be implemented since scrollIntoView
+      // caused undesirable behavior in layouts
+      // and could not simply be scoped to the parent element
+      if (this.isComposedInLayout) {
+        const wrapperWidth = this.$refs.thumbsWrapper.clientWidth ?? 0;
+        this.$refs.thumbsWrapper.scrollLeft =
+          domThumb.offsetLeft - (wrapperWidth - domThumb.clientWidth) / 2;
+
+        return;
+      }
+
+      domThumb.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'center'
+      });
+    },
+    async scrollToRight() {
+      const scrollWidth = this.$refs?.thumbsWrapper?.scrollWidth ?? 0;
+      if (!scrollWidth) {
+        return;
+      }
+
+      await nextTick();
+      if (this.$refs.thumbsWrapper) {
+        this.$refs.thumbsWrapper.scrollLeft = scrollWidth;
+      }
+    },
+    scrollHandler() {
+      if (this.isPaused) {
+        return this.scrollToFocused();
+      } else if (this.autoScroll) {
+        return this.scrollToRight();
+      }
+    },
+    matchIndexOfPreviousImage(previous, imageHistory) {
+      // match logic uses a composite of url and time to account
+      // for example imagery not having fully unique urls
+      return imageHistory.findIndex((x) => x.url === previous.url && x.time === previous.time);
+    },
+    thumbnailClicked(index) {
+      this.setFocusedImage(index);
+      this.paused(true);
+
+      this.setPreviousFocusedImage(index);
+    },
+    setPreviousFocusedImage(index) {
+      this.$emit('update:focused-image-timestamp', undefined);
+      this.previousFocusedImage = this.imageHistory[index]
+        ? JSON.parse(JSON.stringify(this.imageHistory[index]))
+        : undefined;
+    },
+    setFocusedImage(index) {
+      if (!(Number.isInteger(index) && index > -1)) {
+        return;
+      }
+
+      this.focusedImageIndex = index;
+    },
+    trackDuration() {
+      if (this.canTrackDuration) {
+        this.stopDurationTracking();
+        this.updateDuration();
+        this.durationTracker = window.setInterval(this.updateDuration, DURATION_TRACK_MS);
+      } else {
+        this.stopDurationTracking();
+      }
+    },
+    stopDurationTracking() {
+      window.clearInterval(this.durationTracker);
+    },
+    updateDuration() {
+      let currentTime = this.timeContext.isRealTime() ? this.timeContext.now() : undefined;
+      if (currentTime === undefined) {
+        this.numericDuration = currentTime;
+      } else if (Number.isInteger(this.parsedSelectedTime)) {
+        this.numericDuration = currentTime - this.parsedSelectedTime;
+      } else {
+        this.numericDuration = undefined;
+      }
+    },
+    resetAgeCSS() {
+      this.refreshCSS = true;
+      // unable to make this work with nextTick
+      setTimeout(() => {
+        this.refreshCSS = false;
+      }, REFRESH_CSS_MS);
+    },
+    nextImage() {
+      if (this.isNextDisabled) {
+        return;
+      }
+
+      let index = this.focusedImageIndex;
+
+      this.thumbnailClicked(++index);
+      if (index === this.imageHistory.length - 1) {
+        this.paused(false);
+      }
+    },
+    prevImage() {
+      if (this.isPrevDisabled) {
+        return;
+      }
+
+      let index = this.focusedImageIndex;
+
+      if (index === this.imageHistory.length - 1) {
+        this.thumbnailClicked(this.imageHistory.length - 2);
+      } else {
+        this.thumbnailClicked(--index);
+      }
+    },
+    resetImage() {
+      this.imagePanned = false;
+      this.zoomFactor = ZOOM_SCALE_DEFAULT;
+      this.imageTranslateX = 0;
+      this.imageTranslateY = 0;
+    },
+    handlePanZoomUpdate({ newScaleFactor, screenClientX, screenClientY }) {
+      if (!(screenClientX || screenClientY)) {
+        return this.updatePanZoom(newScaleFactor, 0, 0);
+      }
+
+      // handle mouse events
+      const imageRect = this.focusedImageWrapper.getBoundingClientRect();
+      const imageContainerX = screenClientX - imageRect.left;
+      const imageContainerY = screenClientY - imageRect.top;
+      const offsetFromCenterX = imageRect.width / 2 - imageContainerX;
+      const offsetFromCenterY = imageRect.height / 2 - imageContainerY;
+
+      this.updatePanZoom(newScaleFactor, offsetFromCenterX, offsetFromCenterY);
+    },
+    updatePanZoom(newScaleFactor, offsetFromCenterX, offsetFromCenterY) {
+      const currentScale = this.zoomFactor;
+      const previousTranslateX = this.imageTranslateX;
+      const previousTranslateY = this.imageTranslateY;
+
+      const offsetXInOriginalScale = offsetFromCenterX / currentScale;
+      const offsetYInOriginalScale = offsetFromCenterY / currentScale;
+      const translateX = offsetXInOriginalScale + previousTranslateX;
+      const translateY = offsetYInOriginalScale + previousTranslateY;
+      this.imageTranslateX = translateX;
+      this.imageTranslateY = translateY;
+      this.zoomFactor = newScaleFactor;
+    },
+    handlePanZoomClick(e) {
+      this.$refs.imageControls?.handlePanZoomClick(e);
+    },
+    arrowDownHandler(event) {
+      let key = event.keyCode;
+
+      if (this.isLeftOrRightArrowKey(key)) {
+        this.arrowDown = true;
+        window.clearTimeout(this.arrowDownDelayTimeout);
+        this.arrowDownDelayTimeout = window.setTimeout(() => {
+          this.arrowKeyScroll(this.directionByKey(key));
+        }, ARROW_DOWN_DELAY_CHECK_MS);
+      }
+    },
+    arrowUpHandler(event) {
+      let key = event.keyCode;
+
+      window.clearTimeout(this.arrowDownDelayTimeout);
+
+      if (this.isLeftOrRightArrowKey(key)) {
+        this.arrowDown = false;
+        let direction = this.directionByKey(key);
+        this[direction + 'Image']();
+      }
+    },
+    arrowKeyScroll(direction) {
+      if (this.arrowDown) {
+        this.arrowKeyScrolling = true;
+        this[direction + 'Image']();
+        setTimeout(() => {
+          this.arrowKeyScroll(direction);
+        }, ARROW_SCROLL_RATE_MS);
+      } else {
+        window.clearTimeout(this.arrowDownDelayTimeout);
+        this.arrowKeyScrolling = false;
+        this.scrollToFocused();
+      }
+    },
+    directionByKey(keyCode) {
+      let direction;
+
+      if (keyCode === ARROW_LEFT) {
+        direction = 'prev';
+      }
+
+      if (keyCode === ARROW_RIGHT) {
+        direction = 'next';
+      }
+
+      return direction;
+    },
+    isLeftOrRightArrowKey(keyCode) {
+      return [ARROW_RIGHT, ARROW_LEFT].includes(keyCode);
+    },
+    getImageNaturalDimensions() {
+      this.focusedImageNaturalAspectRatio = undefined;
+
+      const img = this.$refs.focusedImage;
+      if (!img) {
+        return;
+      }
+
+      // TODO - should probably cache this
+      img.addEventListener(
+        'load',
+        () => {
+          this.setSizedImageDimensions();
+        },
+        { once: true }
+      );
+    },
+    resizeImageContainer() {
+      if (!this.$refs.imageBG) {
+        return;
+      }
+
+      if (this.$refs.imageBG.clientWidth !== this.imageContainerWidth) {
+        this.imageContainerWidth = this.$refs.imageBG.clientWidth;
+      }
+
+      if (this.$refs.imageBG.clientHeight !== this.imageContainerHeight) {
+        this.imageContainerHeight = this.$refs.imageBG.clientHeight;
+      }
+
+      this.setSizedImageDimensions();
+      this.setImageViewport();
+      this.calculateViewHeight();
+      this.scrollHandler();
+    },
+    setSizedImageDimensions() {
+      if (!this.$refs.focusedImage) {
+        return;
+      }
+      this.focusedImageNaturalAspectRatio =
+        this.$refs.focusedImage.naturalWidth / this.$refs.focusedImage.naturalHeight;
+      if (
+        this.imageContainerWidth / this.imageContainerHeight >
+        this.focusedImageNaturalAspectRatio
+      ) {
+        // container is wider than image
+        this.sizedImageWidth = this.imageContainerHeight * this.focusedImageNaturalAspectRatio;
+        this.sizedImageHeight = this.imageContainerHeight;
+      } else {
+        // container is taller than image
+        this.sizedImageWidth = this.imageContainerWidth;
+        this.sizedImageHeight = this.imageContainerWidth / this.focusedImageNaturalAspectRatio;
+      }
+    },
+    setImageViewport() {
+      if (this.imageContainerHeight > this.sizedImageHeight + IMAGE_CONTAINER_BORDER_WIDTH) {
+        // container is taller than wrapper
+        this.imageViewportWidth = this.sizedImageWidth;
+        this.imageViewportHeight = this.sizedImageHeight;
+      } else {
+        // container is wider than wrapper
+        this.imageViewportWidth = this.imageContainerWidth;
+        this.imageViewportHeight = this.imageContainerHeight;
+      }
+    },
+    handleThumbWindowResizeStart() {
+      if (!this.autoScroll) {
+        return;
+      }
+
+      // To hide resume button while scrolling
+      this.resizingWindow = true;
+      this.handleThumbWindowResizeEnded();
+    },
+    handleThumbWindowResizeEnded() {
+      this.scrollHandler();
+
+      this.calculateViewHeight();
+
+      this.$nextTick(() => {
+        this.resizingWindow = false;
+      });
+    },
+    clearWheelZoom() {
+      this.$refs.imageControls.clearWheelZoom();
+    },
+    wheelZoom(e) {
+      e.preventDefault();
+      this.$refs.imageControls.wheelZoom(e);
+    },
+    startPan(e) {
+      e.preventDefault();
+      if (!this.pan && this.zoomFactor > 1) {
+        this.animateZoom = false;
+        this.imagePanned = true;
+        this.pan = {
+          x: e.clientX,
+          y: e.clientY
+        };
+        this.listenTo(window, 'mouseup', this.onMouseUp, this);
+        this.listenTo(window, 'mousemove', this.trackMousePosition, this);
+      }
+
+      return false;
+    },
+    trackMousePosition(e) {
+      if (!e.altKey) {
+        return this.onMouseUp(e);
+      }
+
+      this.updatePan(e);
+      e.preventDefault();
+    },
+    updatePan(e) {
+      if (!this.pan) {
+        return;
+      }
+
+      const dX = e.clientX - this.pan.x;
+      const dY = e.clientY - this.pan.y;
+      this.pan = {
+        x: e.clientX,
+        y: e.clientY
+      };
+      this.updatePanZoom(this.zoomFactor, dX, dY);
+    },
+    endPan() {
+      this.pan = undefined;
+      this.animateZoom = true;
+    },
+    onMouseUp(event) {
+      this.stopListening(window, 'mouseup', this.onMouseUp, this);
+      this.stopListening(window, 'mousemove', this.trackMousePosition, this);
+
+      if (this.pan) {
+        return this.endPan(event);
+      }
+    },
+    setFilters(filtersObj) {
+      this.filters = filtersObj;
+    },
+    setCursorStates(states) {
+      this.cursorStates = states;
+    },
+    toggleLayerVisibility(index) {
+      let isVisible = this.layers[index].visible === true;
+      this.layers[index].visible = !isVisible;
+      this.visibleLayers = this.layers.filter((layer) => layer.visible);
+    }
+  }
+};
+</script>
diff --git a/src/plugins/imagery/components/ImageryViewLayout.vue b/src/plugins/imagery/components/ImageryViewLayout.vue
deleted file mode 100644
index e7e316814ae..00000000000
--- a/src/plugins/imagery/components/ImageryViewLayout.vue
+++ /dev/null
@@ -1,907 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-<template>
-<div
-    tabindex="0"
-    class="c-imagery"
-    @keyup="arrowUpHandler"
-    @keydown="arrowDownHandler"
-    @mouseover="focusElement"
->
-    <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 c-image-controls__controls">
-            <span class="c-image-controls__sliders"
-                  draggable="true"
-                  @dragstart="startDrag"
-            >
-                <div class="c-image-controls__slider-wrapper icon-brightness">
-                    <input v-model="filters.brightness"
-                           type="range"
-                           min="0"
-                           max="500"
-                    >
-                </div>
-                <div class="c-image-controls__slider-wrapper icon-contrast">
-                    <input v-model="filters.contrast"
-                           type="range"
-                           min="0"
-                           max="500"
-                    >
-                </div>
-            </span>
-            <span class="t-reset-btn-holder c-imagery__lc__reset-btn c-image-controls__btn-reset">
-                <a class="s-icon-button icon-reset t-btn-reset"
-                   @click="filters={brightness: 100, contrast: 100}"
-                ></a>
-            </span>
-        </div>
-        <div ref="imageBG"
-             class="c-imagery__main-image__bg"
-             :class="{'paused unnsynced': isPaused,'stale':false }"
-             @click="expand"
-        >
-            <div class="image-wrapper"
-                 :style="{
-                     'width': `${sizedImageDimensions.width}px`,
-                     'height': `${sizedImageDimensions.height}px`
-                 }"
-            >
-                <img ref="focusedImage"
-                     class="c-imagery__main-image__image js-imageryView-image"
-                     :src="imageUrl"
-                     :style="{
-                         'filter': `brightness(${filters.brightness}%) contrast(${filters.contrast}%)`
-                     }"
-                     :data-openmct-image-timestamp="time"
-                     :data-openmct-object-keystring="keyString"
-                >
-                <Compass
-                    v-if="shouldDisplayCompass"
-                    :compass-rose-sizing-classes="compassRoseSizingClasses"
-                    :image="focusedImage"
-                    :natural-aspect-ratio="focusedImageNaturalAspectRatio"
-                    :sized-image-dimensions="sizedImageDimensions"
-                />
-            </div>
-        </div>
-        <div class="c-local-controls c-local-controls--show-on-hover c-imagery__prev-next-buttons">
-            <button class="c-nav c-nav--prev"
-                    title="Previous image"
-                    :disabled="isPrevDisabled"
-                    @click="prevImage()"
-            ></button>
-            <button class="c-nav c-nav--next"
-                    title="Next image"
-                    :disabled="isNextDisabled"
-                    @click="nextImage()"
-            ></button>
-        </div>
-
-        <div class="c-imagery__control-bar">
-            <div class="c-imagery__time">
-                <div class="c-imagery__timestamp u-style-receiver js-style-receiver">{{ time }}</div>
-
-                <!-- image fresh -->
-                <div
-                    v-if="canTrackDuration"
-                    :class="{'c-imagery--new': isImageNew && !refreshCSS}"
-                    class="c-imagery__age icon-timer"
-                >{{ formattedDuration }}</div>
-
-                <!-- spacecraft position fresh -->
-                <div
-                    v-if="relatedTelemetry.hasRelatedTelemetry && isSpacecraftPositionFresh"
-                    class="c-imagery__age icon-check c-imagery--new"
-                >POS</div>
-
-                <!-- camera position fresh -->
-                <div
-                    v-if="relatedTelemetry.hasRelatedTelemetry && isCameraPositionFresh"
-                    class="c-imagery__age icon-check c-imagery--new"
-                >CAM</div>
-            </div>
-            <div class="h-local-controls">
-                <button
-                    class="c-button icon-pause pause-play"
-                    :class="{'is-paused': isPaused}"
-                    @click="paused(!isPaused, 'button')"
-                ></button>
-            </div>
-        </div>
-    </div>
-    <div
-        class="c-imagery__thumbs-wrapper"
-        :class="[
-            { 'is-paused': isPaused },
-            { 'is-autoscroll-off': !resizingWindow && !autoScroll && !isPaused }
-        ]"
-    >
-        <div
-            ref="thumbsWrapper"
-            class="c-imagery__thumbs-scroll-area"
-            @scroll="handleScroll"
-        >
-            <div v-for="(image, index) in imageHistory"
-                 :key="image.url + image.time"
-                 class="c-imagery__thumb c-thumb"
-                 :class="{ selected: focusedImageIndex === index && isPaused }"
-                 @click="setFocusedImage(index, thumbnailClick)"
-            >
-                <a href=""
-                   :download="image.imageDownloadName"
-                   @click.prevent
-                >
-                    <img class="c-thumb__image"
-                         :src="image.url"
-                    >
-                </a>
-                <div class="c-thumb__timestamp">{{ image.formattedTime }}</div>
-            </div>
-        </div>
-
-        <button
-            class="c-imagery__auto-scroll-resume-button c-icon-button icon-play"
-            title="Resume automatic scrolling of image thumbnails"
-            @click="scrollToRight('reset')"
-        ></button>
-    </div>
-</div>
-</template>
-
-<script>
-import _ from 'lodash';
-import moment from 'moment';
-
-import RelatedTelemetry from './RelatedTelemetry/RelatedTelemetry';
-import Compass from './Compass/Compass.vue';
-
-const DEFAULT_DURATION_FORMATTER = 'duration';
-const REFRESH_CSS_MS = 500;
-const DURATION_TRACK_MS = 1000;
-const ARROW_DOWN_DELAY_CHECK_MS = 400;
-const ARROW_SCROLL_RATE_MS = 100;
-const THUMBNAIL_CLICKED = true;
-
-const ONE_MINUTE = 60 * 1000;
-const FIVE_MINUTES = 5 * ONE_MINUTE;
-const ONE_HOUR = ONE_MINUTE * 60;
-const EIGHT_HOURS = 8 * ONE_HOUR;
-const TWENTYFOUR_HOURS = EIGHT_HOURS * 3;
-
-const ARROW_RIGHT = 39;
-const ARROW_LEFT = 37;
-
-const SCROLL_LATENCY = 250;
-
-export default {
-    components: {
-        Compass
-    },
-    inject: ['openmct', 'domainObject', 'objectPath', 'currentView'],
-    data() {
-        let timeSystem = this.openmct.time.timeSystem();
-
-        return {
-            autoScroll: true,
-            durationFormatter: undefined,
-            filters: {
-                brightness: 100,
-                contrast: 100
-            },
-            imageHistory: [],
-            thumbnailClick: THUMBNAIL_CLICKED,
-            isPaused: false,
-            metadata: {},
-            requestCount: 0,
-            timeSystem: timeSystem,
-            timeFormatter: undefined,
-            refreshCSS: false,
-            keyString: undefined,
-            focusedImageIndex: undefined,
-            focusedImageRelatedTelemetry: {},
-            numericDuration: undefined,
-            metadataEndpoints: {},
-            relatedTelemetry: {},
-            latestRelatedTelemetry: {},
-            focusedImageNaturalAspectRatio: undefined,
-            imageContainerWidth: undefined,
-            imageContainerHeight: undefined,
-            lockCompass: true,
-            resizingWindow: false
-        };
-    },
-    computed: {
-        compassRoseSizingClasses() {
-            let compassRoseSizingClasses = '';
-            if (this.sizedImageDimensions.width < 300) {
-                compassRoseSizingClasses = '--rose-small --rose-min';
-            } else if (this.sizedImageDimensions.width < 500) {
-                compassRoseSizingClasses = '--rose-small';
-            } else if (this.sizedImageDimensions.width > 1000) {
-                compassRoseSizingClasses = '--rose-max';
-            }
-
-            return compassRoseSizingClasses;
-        },
-        time() {
-            return this.formatTime(this.focusedImage);
-        },
-        imageUrl() {
-            return this.formatImageUrl(this.focusedImage);
-        },
-        isImageNew() {
-            let cutoff = FIVE_MINUTES;
-            let age = this.numericDuration;
-
-            return age < cutoff && !this.refreshCSS;
-        },
-        canTrackDuration() {
-            return this.openmct.time.clock() && this.timeSystem.isUTCBased;
-        },
-        focusedImageDownloadName() {
-            return this.getImageDownloadName(this.focusedImage);
-        },
-        isNextDisabled() {
-            let disabled = false;
-
-            if (this.focusedImageIndex === -1 || this.focusedImageIndex === this.imageHistory.length - 1) {
-                disabled = true;
-            }
-
-            return disabled;
-        },
-        isPrevDisabled() {
-            let disabled = false;
-
-            if (this.focusedImageIndex === 0 || this.imageHistory.length < 2) {
-                disabled = true;
-            }
-
-            return disabled;
-        },
-        focusedImage() {
-            return this.imageHistory[this.focusedImageIndex];
-        },
-        parsedSelectedTime() {
-            return this.parseTime(this.focusedImage);
-        },
-        formattedDuration() {
-            let result = 'N/A';
-            let negativeAge = -1;
-
-            if (this.numericDuration > TWENTYFOUR_HOURS) {
-                negativeAge *= (this.numericDuration / TWENTYFOUR_HOURS);
-                result = moment.duration(negativeAge, 'days').humanize(true);
-            } else if (this.numericDuration > EIGHT_HOURS) {
-                negativeAge *= (this.numericDuration / ONE_HOUR);
-                result = moment.duration(negativeAge, 'hours').humanize(true);
-            } else if (this.durationFormatter) {
-                result = this.durationFormatter.format(this.numericDuration);
-            }
-
-            return result;
-        },
-        shouldDisplayCompass() {
-            return this.focusedImage !== undefined
-                && this.focusedImageNaturalAspectRatio !== undefined
-                && this.imageContainerWidth !== undefined
-                && this.imageContainerHeight !== undefined;
-        },
-        isSpacecraftPositionFresh() {
-            let isFresh = undefined;
-            let latest = this.latestRelatedTelemetry;
-            let focused = this.focusedImageRelatedTelemetry;
-
-            if (this.relatedTelemetry.hasRelatedTelemetry) {
-                isFresh = true;
-                for (let key of this.spacecraftPositionKeys) {
-                    if (this.relatedTelemetry[key] && latest[key] && focused[key]) {
-                        isFresh = isFresh && Boolean(this.relatedTelemetry[key].comparisonFunction(latest[key], focused[key]));
-                    } else {
-                        isFresh = false;
-                    }
-                }
-            }
-
-            return isFresh;
-        },
-        isSpacecraftOrientationFresh() {
-            let isFresh = undefined;
-            let latest = this.latestRelatedTelemetry;
-            let focused = this.focusedImageRelatedTelemetry;
-
-            if (this.relatedTelemetry.hasRelatedTelemetry) {
-                isFresh = true;
-                for (let key of this.spacecraftOrientationKeys) {
-                    if (this.relatedTelemetry[key] && latest[key] && focused[key]) {
-                        isFresh = isFresh && Boolean(this.relatedTelemetry[key].comparisonFunction(latest[key], focused[key]));
-                    } else {
-                        isFresh = false;
-                    }
-                }
-            }
-
-            return isFresh;
-        },
-        isCameraPositionFresh() {
-            let isFresh = undefined;
-            let latest = this.latestRelatedTelemetry;
-            let focused = this.focusedImageRelatedTelemetry;
-
-            if (this.relatedTelemetry.hasRelatedTelemetry) {
-                isFresh = true;
-
-                // camera freshness relies on spacecraft position freshness
-                if (this.isSpacecraftPositionFresh && this.isSpacecraftOrientationFresh) {
-                    for (let key of this.cameraKeys) {
-                        if (this.relatedTelemetry[key] && latest[key] && focused[key]) {
-                            isFresh = isFresh && Boolean(this.relatedTelemetry[key].comparisonFunction(latest[key], focused[key]));
-                        } else {
-                            isFresh = false;
-                        }
-                    }
-                } else {
-                    isFresh = false;
-                }
-            }
-
-            return isFresh;
-        },
-        sizedImageDimensions() {
-            let sizedImageDimensions = {};
-            if ((this.imageContainerWidth / this.imageContainerHeight) > this.focusedImageNaturalAspectRatio) {
-                // container is wider than image
-                sizedImageDimensions.width = this.imageContainerHeight * this.focusedImageNaturalAspectRatio;
-                sizedImageDimensions.height = this.imageContainerHeight;
-            } else {
-                // container is taller than image
-                sizedImageDimensions.width = this.imageContainerWidth;
-                sizedImageDimensions.height = this.imageContainerWidth * this.focusedImageNaturalAspectRatio;
-            }
-
-            return sizedImageDimensions;
-        }
-    },
-    watch: {
-        focusedImageIndex() {
-            this.trackDuration();
-            this.resetAgeCSS();
-            this.updateRelatedTelemetryForFocusedImage();
-            this.getImageNaturalDimensions();
-        }
-    },
-    async mounted() {
-        // listen
-        this.openmct.time.on('bounds', this.boundsChange);
-        this.openmct.time.on('timeSystem', this.timeSystemChange);
-        this.openmct.time.on('clock', this.clockChange);
-
-        // set
-        this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-        this.metadata = this.openmct.telemetry.getMetadata(this.domainObject);
-        this.imageHints = { ...this.metadata.valuesForHints(['image'])[0] };
-        this.durationFormatter = this.getFormatter(this.timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER);
-        this.imageFormatter = this.openmct.telemetry.getValueFormatter(this.imageHints);
-        this.imageDownloadNameHints = { ...this.metadata.valuesForHints(['imageDownloadName'])[0]};
-
-        // related telemetry keys
-        this.spacecraftPositionKeys = ['positionX', 'positionY', 'positionZ'];
-        this.spacecraftOrientationKeys = ['heading'];
-        this.cameraKeys = ['cameraPan', 'cameraTilt'];
-        this.sunKeys = ['sunOrientation'];
-
-        // initialize
-        this.timeKey = this.timeSystem.key;
-        this.timeFormatter = this.getFormatter(this.timeKey);
-
-        // kickoff
-        this.subscribe();
-        this.requestHistory();
-
-        // related telemetry
-        await this.initializeRelatedTelemetry();
-        this.updateRelatedTelemetryForFocusedImage();
-        this.trackLatestRelatedTelemetry();
-
-        // for scrolling through images quickly and resizing the object view
-        _.debounce(this.updateRelatedTelemetryForFocusedImage, 400);
-        _.debounce(this.resizeImageContainer, 400);
-
-        this.imageContainerResizeObserver = new ResizeObserver(this.resizeImageContainer);
-        this.imageContainerResizeObserver.observe(this.$refs.imageBG);
-
-        // For adjusting scroll bar size and position when resizing thumbs wrapper
-        this.handleScroll = _.debounce(this.handleScroll, SCROLL_LATENCY);
-        this.handleThumbWindowResizeEnded = _.debounce(this.handleThumbWindowResizeEnded, SCROLL_LATENCY);
-
-        this.thumbWrapperResizeObserver = new ResizeObserver(this.handleThumbWindowResizeStart);
-        this.thumbWrapperResizeObserver.observe(this.$refs.thumbsWrapper);
-    },
-    beforeDestroy() {
-        if (this.unsubscribe) {
-            this.unsubscribe();
-            delete this.unsubscribe;
-        }
-
-        if (this.imageContainerResizeObserver) {
-            this.imageContainerResizeObserver.disconnect();
-        }
-
-        if (this.thumbWrapperResizeObserver) {
-            this.thumbWrapperResizeObserver.disconnect();
-        }
-
-        if (this.relatedTelemetry.hasRelatedTelemetry) {
-            this.relatedTelemetry.destroy();
-        }
-
-        this.stopDurationTracking();
-        this.openmct.time.off('bounds', this.boundsChange);
-        this.openmct.time.off('timeSystem', this.timeSystemChange);
-        this.openmct.time.off('clock', this.clockChange);
-
-        // unsubscribe from related telemetry
-        if (this.relatedTelemetry.hasRelatedTelemetry) {
-            for (let key of this.relatedTelemetry.keys) {
-                if (this.relatedTelemetry[key] && this.relatedTelemetry[key].unsubscribe) {
-                    this.relatedTelemetry[key].unsubscribe();
-                }
-            }
-        }
-    },
-    methods: {
-        expand() {
-            const actionCollection = this.openmct.actions.getActionsCollection(this.objectPath, this.currentView);
-            const visibleActions = actionCollection.getVisibleActions();
-            const viewLargeAction = visibleActions
-                && visibleActions.find(action => action.key === 'large.view');
-
-            if (viewLargeAction && viewLargeAction.appliesTo(this.objectPath, this.currentView)) {
-                viewLargeAction.onItemClicked();
-            }
-        },
-        async initializeRelatedTelemetry() {
-            this.relatedTelemetry = new RelatedTelemetry(
-                this.openmct,
-                this.domainObject,
-                [...this.spacecraftPositionKeys, ...this.spacecraftOrientationKeys, ...this.cameraKeys, ...this.sunKeys]
-            );
-
-            if (this.relatedTelemetry.hasRelatedTelemetry) {
-                await this.relatedTelemetry.load();
-            }
-        },
-        async getMostRecentRelatedTelemetry(key, targetDatum) {
-            if (!this.relatedTelemetry.hasRelatedTelemetry) {
-                throw new Error(`${this.domainObject.name} does not have any related telemetry`);
-            }
-
-            if (!this.relatedTelemetry[key]) {
-                throw new Error(`${key} does not exist on related telemetry`);
-            }
-
-            let mostRecent;
-            let valueKey = this.relatedTelemetry[key].historical.valueKey;
-            let valuesOnTelemetry = this.relatedTelemetry[key].hasTelemetryOnDatum;
-
-            if (valuesOnTelemetry) {
-                mostRecent = targetDatum[valueKey];
-
-                if (mostRecent) {
-                    return mostRecent;
-                } else {
-                    console.warn(`Related Telemetry for ${key} does NOT exist on this telemetry datum as configuration implied.`);
-
-                    return;
-                }
-            }
-
-            mostRecent = await this.relatedTelemetry[key].requestLatestFor(targetDatum);
-
-            return mostRecent[valueKey];
-        },
-        // will subscribe to data for this key if not already done
-        subscribeToDataForKey(key) {
-            if (this.relatedTelemetry[key].isSubscribed) {
-                return;
-            }
-
-            if (this.relatedTelemetry[key].realtimeDomainObject) {
-                this.relatedTelemetry[key].unsubscribe = this.openmct.telemetry.subscribe(
-                    this.relatedTelemetry[key].realtimeDomainObject, datum => {
-                        this.relatedTelemetry[key].listeners.forEach(callback => {
-                            callback(datum);
-                        });
-
-                    }
-                );
-
-                this.relatedTelemetry[key].isSubscribed = true;
-            }
-        },
-        async updateRelatedTelemetryForFocusedImage() {
-            if (!this.relatedTelemetry.hasRelatedTelemetry || !this.focusedImage) {
-                return;
-            }
-
-            // set data ON image telemetry as well as in focusedImageRelatedTelemetry
-            for (let key of this.relatedTelemetry.keys) {
-                if (
-                    this.relatedTelemetry[key]
-                    && this.relatedTelemetry[key].historical
-                    && this.relatedTelemetry[key].requestLatestFor
-
-                ) {
-                    let valuesOnTelemetry = this.relatedTelemetry[key].hasTelemetryOnDatum;
-                    let value = await this.getMostRecentRelatedTelemetry(key, this.focusedImage);
-
-                    if (!valuesOnTelemetry) {
-                        this.$set(this.imageHistory[this.focusedImageIndex], key, value); // manually add to telemetry
-                    }
-
-                    this.$set(this.focusedImageRelatedTelemetry, key, value);
-                }
-            }
-        },
-        trackLatestRelatedTelemetry() {
-            [...this.spacecraftPositionKeys, ...this.spacecraftOrientationKeys, ...this.cameraKeys, ...this.sunKeys].forEach(key => {
-                if (this.relatedTelemetry[key] && this.relatedTelemetry[key].subscribe) {
-                    this.relatedTelemetry[key].subscribe((datum) => {
-                        let valueKey = this.relatedTelemetry[key].realtime.valueKey;
-                        this.$set(this.latestRelatedTelemetry, key, datum[valueKey]);
-                    });
-                }
-            });
-        },
-        focusElement() {
-            this.$el.focus();
-        },
-        datumIsNotValid(datum) {
-            if (this.imageHistory.length === 0) {
-                return false;
-            }
-
-            const datumURL = this.formatImageUrl(datum);
-            const lastHistoryURL = this.formatImageUrl(this.imageHistory.slice(-1)[0]);
-
-            // datum is not valid if it matches the last datum in history,
-            // or it is before the last datum in the history
-            const datumTimeCheck = this.parseTime(datum);
-            const historyTimeCheck = this.parseTime(this.imageHistory.slice(-1)[0]);
-            const matchesLast = (datumTimeCheck === historyTimeCheck) && (datumURL === lastHistoryURL);
-            const isStale = datumTimeCheck < historyTimeCheck;
-
-            return matchesLast || isStale;
-        },
-        formatImageUrl(datum) {
-            if (!datum) {
-                return;
-            }
-
-            return this.imageFormatter.format(datum);
-        },
-        formatTime(datum) {
-            if (!datum) {
-                return;
-            }
-
-            let dateTimeStr = this.timeFormatter.format(datum);
-
-            // Replace ISO "T" with a space to allow wrapping
-            return dateTimeStr.replace("T", " ");
-        },
-        getImageDownloadName(datum) {
-            let imageDownloadName = '';
-            if (datum) {
-                const key = this.imageDownloadNameHints.key;
-                imageDownloadName = datum[key];
-            }
-
-            return imageDownloadName;
-        },
-        parseTime(datum) {
-            if (!datum) {
-                return;
-            }
-
-            return this.timeFormatter.parse(datum);
-        },
-        handleScroll() {
-            const thumbsWrapper = this.$refs.thumbsWrapper;
-            if (!thumbsWrapper || this.resizingWindow) {
-                return;
-            }
-
-            const { scrollLeft, scrollWidth, clientWidth } = thumbsWrapper;
-            const disableScroll = scrollWidth > Math.ceil(scrollLeft + clientWidth);
-            this.autoScroll = !disableScroll;
-        },
-        paused(state, type) {
-            this.isPaused = state;
-
-            if (type === 'button') {
-                this.setFocusedImage(this.imageHistory.length - 1);
-            }
-
-            if (this.nextImageIndex) {
-                this.setFocusedImage(this.nextImageIndex);
-                delete this.nextImageIndex;
-            }
-
-            this.autoScroll = true;
-            this.scrollToRight();
-        },
-        scrollToFocused() {
-            const thumbsWrapper = this.$refs.thumbsWrapper;
-            if (!thumbsWrapper) {
-                return;
-            }
-
-            let domThumb = thumbsWrapper.children[this.focusedImageIndex];
-
-            if (domThumb) {
-                domThumb.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'center'
-                });
-            }
-        },
-        scrollToRight(type) {
-            if (type !== 'reset' && (this.isPaused || !this.$refs.thumbsWrapper || !this.autoScroll)) {
-                return;
-            }
-
-            const scrollWidth = this.$refs.thumbsWrapper.scrollWidth || 0;
-            if (!scrollWidth) {
-                return;
-            }
-
-            this.$nextTick(() => {
-                this.$refs.thumbsWrapper.scrollLeft = scrollWidth;
-            });
-        },
-        setFocusedImage(index, thumbnailClick = false) {
-            if (this.isPaused && !thumbnailClick) {
-                this.nextImageIndex = index;
-
-                return;
-            }
-
-            this.focusedImageIndex = index;
-
-            if (thumbnailClick && !this.isPaused) {
-                this.paused(true);
-            }
-        },
-        boundsChange(bounds, isTick) {
-            if (!isTick) {
-                this.requestHistory();
-            }
-        },
-        async requestHistory() {
-            let bounds = this.openmct.time.bounds();
-            this.requestCount++;
-            const requestId = this.requestCount;
-            this.imageHistory = [];
-
-            let data = await this.openmct.telemetry
-                .request(this.domainObject, bounds) || [];
-
-            if (this.requestCount === requestId) {
-                data.forEach((datum, index) => {
-                    this.updateHistory(datum, index === data.length - 1);
-                });
-            }
-        },
-        timeSystemChange(system) {
-            this.timeSystem = this.openmct.time.timeSystem();
-            this.timeKey = this.timeSystem.key;
-            this.timeFormatter = this.getFormatter(this.timeKey);
-            this.durationFormatter = this.getFormatter(this.timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER);
-            this.trackDuration();
-        },
-        clockChange(clock) {
-            this.trackDuration();
-        },
-        subscribe() {
-            this.unsubscribe = this.openmct.telemetry
-                .subscribe(this.domainObject, (datum) => {
-                    let parsedTimestamp = this.parseTime(datum);
-                    let bounds = this.openmct.time.bounds();
-
-                    if (parsedTimestamp >= bounds.start && parsedTimestamp <= bounds.end) {
-                        this.updateHistory(datum);
-                    }
-                });
-        },
-        updateHistory(datum, setFocused = true) {
-            if (this.datumIsNotValid(datum)) {
-                return;
-            }
-
-            let image = { ...datum };
-            image.formattedTime = this.formatTime(datum);
-            image.url = this.formatImageUrl(datum);
-            image.time = datum[this.timeKey];
-            image.imageDownloadName = this.getImageDownloadName(datum);
-
-            this.imageHistory.push(image);
-            if (setFocused) {
-                this.setFocusedImage(this.imageHistory.length - 1);
-                this.scrollToRight();
-            }
-        },
-        getFormatter(key) {
-            let metadataValue = this.metadata.value(key) || { format: key };
-            let valueFormatter = this.openmct.telemetry.getValueFormatter(metadataValue);
-
-            return valueFormatter;
-        },
-        trackDuration() {
-            if (this.canTrackDuration) {
-                this.stopDurationTracking();
-                this.updateDuration();
-                this.durationTracker = window.setInterval(
-                    this.updateDuration, DURATION_TRACK_MS
-                );
-            } else {
-                this.stopDurationTracking();
-            }
-        },
-        stopDurationTracking() {
-            window.clearInterval(this.durationTracker);
-        },
-        updateDuration() {
-            let currentTime = this.openmct.time.clock() && this.openmct.time.clock().currentValue();
-            this.numericDuration = currentTime - this.parsedSelectedTime;
-        },
-        resetAgeCSS() {
-            this.refreshCSS = true;
-            // unable to make this work with nextTick
-            setTimeout(() => {
-                this.refreshCSS = false;
-            }, REFRESH_CSS_MS);
-        },
-        nextImage() {
-            if (this.isNextDisabled) {
-                return;
-            }
-
-            let index = this.focusedImageIndex;
-
-            this.setFocusedImage(++index, THUMBNAIL_CLICKED);
-            if (index === this.imageHistory.length - 1) {
-                this.paused(false);
-            }
-        },
-        prevImage() {
-            if (this.isPrevDisabled) {
-                return;
-            }
-
-            let index = this.focusedImageIndex;
-
-            if (index === this.imageHistory.length - 1) {
-                this.setFocusedImage(this.imageHistory.length - 2, THUMBNAIL_CLICKED);
-            } else {
-                this.setFocusedImage(--index, THUMBNAIL_CLICKED);
-            }
-        },
-        startDrag(e) {
-            e.preventDefault();
-            e.stopPropagation();
-        },
-        arrowDownHandler(event) {
-            let key = event.keyCode;
-
-            if (this.isLeftOrRightArrowKey(key)) {
-                this.arrowDown = true;
-                window.clearTimeout(this.arrowDownDelayTimeout);
-                this.arrowDownDelayTimeout = window.setTimeout(() => {
-                    this.arrowKeyScroll(this.directionByKey(key));
-                }, ARROW_DOWN_DELAY_CHECK_MS);
-            }
-        },
-        arrowUpHandler(event) {
-            let key = event.keyCode;
-
-            window.clearTimeout(this.arrowDownDelayTimeout);
-
-            if (this.isLeftOrRightArrowKey(key)) {
-                this.arrowDown = false;
-                let direction = this.directionByKey(key);
-                this[direction + 'Image']();
-            }
-        },
-        arrowKeyScroll(direction) {
-            if (this.arrowDown) {
-                this.arrowKeyScrolling = true;
-                this[direction + 'Image']();
-                setTimeout(() => {
-                    this.arrowKeyScroll(direction);
-                }, ARROW_SCROLL_RATE_MS);
-            } else {
-                window.clearTimeout(this.arrowDownDelayTimeout);
-                this.arrowKeyScrolling = false;
-                this.scrollToFocused();
-            }
-        },
-        directionByKey(keyCode) {
-            let direction;
-
-            if (keyCode === ARROW_LEFT) {
-                direction = 'prev';
-            }
-
-            if (keyCode === ARROW_RIGHT) {
-                direction = 'next';
-            }
-
-            return direction;
-        },
-        isLeftOrRightArrowKey(keyCode) {
-            return [ARROW_RIGHT, ARROW_LEFT].includes(keyCode);
-        },
-        getImageNaturalDimensions() {
-            this.focusedImageNaturalAspectRatio = undefined;
-
-            const img = this.$refs.focusedImage;
-            if (!img) {
-                return;
-            }
-
-            // TODO - should probably cache this
-            img.addEventListener('load', () => {
-                this.focusedImageNaturalAspectRatio = img.naturalWidth / img.naturalHeight;
-            }, { once: true });
-        },
-        resizeImageContainer() {
-            if (this.$refs.imageBG.clientWidth !== this.imageContainerWidth) {
-                this.imageContainerWidth = this.$refs.imageBG.clientWidth;
-            }
-
-            if (this.$refs.imageBG.clientHeight !== this.imageContainerHeight) {
-                this.imageContainerHeight = this.$refs.imageBG.clientHeight;
-            }
-        },
-        handleThumbWindowResizeStart() {
-            if (!this.autoScroll) {
-                return;
-            }
-
-            // To hide resume button while scrolling
-            this.resizingWindow = true;
-            this.handleThumbWindowResizeEnded();
-        },
-        handleThumbWindowResizeEnded() {
-            if (!this.isPaused) {
-                this.scrollToRight('reset');
-            }
-
-            this.$nextTick(() => {
-                this.resizingWindow = false;
-            });
-        }
-    }
-};
-</script>
diff --git a/src/plugins/imagery/components/ImageryViewMenuSwitcher.vue b/src/plugins/imagery/components/ImageryViewMenuSwitcher.vue
new file mode 100644
index 00000000000..01b0181c869
--- /dev/null
+++ b/src/plugins/imagery/components/ImageryViewMenuSwitcher.vue
@@ -0,0 +1,82 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="c-switcher-menu">
+    <button
+      :id="id"
+      class="c-button c-button--menu c-switcher-menu__button"
+      :class="iconClass"
+      :aria-label="title"
+      :title="title"
+      @click="toggleMenu"
+    />
+    <div v-show="showMenu" class="c-switcher-menu__content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import { v4 as uuid } from 'uuid';
+
+export default {
+  inject: ['openmct'],
+  props: {
+    iconClass: {
+      type: String,
+      default() {
+        return '';
+      }
+    },
+    title: {
+      type: String,
+      default() {
+        return '';
+      }
+    }
+  },
+  data() {
+    return {
+      id: uuid(),
+      showMenu: false
+    };
+  },
+  mounted() {
+    document.addEventListener('click', this.hideMenu);
+  },
+  unmounted() {
+    document.removeEventListener('click', this.hideMenu);
+  },
+  methods: {
+    toggleMenu() {
+      this.showMenu = !this.showMenu;
+    },
+    hideMenu(e) {
+      if (this.id === e.target.id) {
+        return;
+      }
+
+      this.showMenu = false;
+    }
+  }
+};
+</script>
diff --git a/src/plugins/imagery/components/LayerSettings.vue b/src/plugins/imagery/components/LayerSettings.vue
new file mode 100644
index 00000000000..9f60881d15a
--- /dev/null
+++ b/src/plugins/imagery/components/LayerSettings.vue
@@ -0,0 +1,70 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div
+    class="c-control-menu c-menu--to-left c-menu--has-close-btn c-image-controls"
+    @click="handleClose"
+  >
+    <div class="c-checkbox-list js-checkbox-menu c-menu--to-left c-menu--has-close-btn">
+      <ul @click="$event.stopPropagation()">
+        <li v-for="(layer, index) in layers" :key="index">
+          <label>
+            <input
+              :checked="layer.visible"
+              type="checkbox"
+              @change="toggleLayerVisibility(index)"
+            />
+            {{ layer.name }}
+          </label>
+        </li>
+      </ul>
+    </div>
+
+    <button class="c-click-icon icon-x t-btn-close c-switcher-menu__close-button"></button>
+  </div>
+</template>
+
+<script>
+export default {
+  inject: ['openmct'],
+  props: {
+    layers: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ['toggle-layer-visibility'],
+  methods: {
+    handleClose(e) {
+      const closeButton = e.target.classList.contains('c-switcher-menu__close-button');
+      if (!closeButton) {
+        e.stopPropagation();
+      }
+    },
+    toggleLayerVisibility(index) {
+      this.$emit('toggle-layer-visibility', index);
+    }
+  }
+};
+</script>
diff --git a/src/plugins/imagery/components/RelatedTelemetry/RelatedTelemetry.js b/src/plugins/imagery/components/RelatedTelemetry/RelatedTelemetry.js
index b4393044c8b..ccba3b59b57 100644
--- a/src/plugins/imagery/components/RelatedTelemetry/RelatedTelemetry.js
+++ b/src/plugins/imagery/components/RelatedTelemetry/RelatedTelemetry.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,144 +21,174 @@
  *****************************************************************************/
 
 function copyRelatedMetadata(metadata) {
-    let compare = metadata.comparisonFunction;
-    let copiedMetadata = JSON.parse(JSON.stringify(metadata));
-    copiedMetadata.comparisonFunction = compare;
+  let compare = metadata.comparisonFunction;
+  let copiedMetadata = JSON.parse(JSON.stringify(metadata));
+  copiedMetadata.comparisonFunction = compare;
 
-    return copiedMetadata;
+  return copiedMetadata;
 }
 
+import IndependentTimeContext from '@/api/time/IndependentTimeContext';
 export default class RelatedTelemetry {
+  constructor(openmct, domainObject, telemetryKeys, timeContext) {
+    this._openmct = openmct;
+    this._domainObject = domainObject;
+    this.timeContext = timeContext;
 
-    constructor(openmct, domainObject, telemetryKeys) {
-        this._openmct = openmct;
-        this._domainObject = domainObject;
+    let metadata = this._openmct.telemetry.getMetadata(this._domainObject);
+    let imageHints = metadata.valuesForHints(['image'])[0];
 
-        let metadata = this._openmct.telemetry.getMetadata(this._domainObject);
-        let imageHints = metadata.valuesForHints(['image'])[0];
+    this.hasRelatedTelemetry = imageHints.relatedTelemetry !== undefined;
 
-        this.hasRelatedTelemetry = imageHints.relatedTelemetry !== undefined;
+    if (this.hasRelatedTelemetry) {
+      this.keys = telemetryKeys;
 
-        if (this.hasRelatedTelemetry) {
-            this.keys = telemetryKeys;
+      this._timeFormatter = undefined;
+      this._timeSystemChange(this.timeContext.timeSystem());
 
-            this._timeFormatter = undefined;
-            this._timeSystemChange(this._openmct.time.timeSystem());
+      // grab related telemetry metadata
+      for (let key of this.keys) {
+        if (imageHints.relatedTelemetry[key]) {
+          this[key] = copyRelatedMetadata(imageHints.relatedTelemetry[key]);
+        }
+      }
 
-            // grab related telemetry metadata
-            for (let key of this.keys) {
-                if (imageHints.relatedTelemetry[key]) {
-                    this[key] = copyRelatedMetadata(imageHints.relatedTelemetry[key]);
-                }
-            }
+      this.load = this.load.bind(this);
+      this._parseTime = this._parseTime.bind(this);
+      this._timeSystemChange = this._timeSystemChange.bind(this);
+      this.destroy = this.destroy.bind(this);
 
-            this.load = this.load.bind(this);
-            this._parseTime = this._parseTime.bind(this);
-            this._timeSystemChange = this._timeSystemChange.bind(this);
-            this.destroy = this.destroy.bind(this);
+      this.timeContext.on('timeSystem', this._timeSystemChange);
+    }
+  }
 
-            this._openmct.time.on('timeSystem', this._timeSystemChange);
-        }
+  async load() {
+    if (!this.hasRelatedTelemetry) {
+      throw new Error(
+        'This domain object does not have related telemetry, use "hasRelatedTelemetry" to check before loading.'
+      );
     }
 
-    async load() {
-        if (!this.hasRelatedTelemetry) {
-            throw new Error('This domain object does not have related telemetry, use "hasRelatedTelemetry" to check before loading.');
+    await Promise.all(
+      this.keys.map(async (key) => {
+        if (this[key]) {
+          if (this[key].historical) {
+            await this._initializeHistorical(key);
+          }
+
+          if (
+            this[key].realtime &&
+            this[key].realtime.telemetryObjectId &&
+            this[key].realtime.telemetryObjectId !== ''
+          ) {
+            await this._initializeRealtime(key);
+          }
         }
+      })
+    );
+  }
+
+  async _initializeHistorical(key) {
+    if (!this[key].historical.telemetryObjectId) {
+      this[key].historical.hasTelemetryOnDatum = true;
+    } else if (this[key].historical.telemetryObjectId !== '') {
+      this[key].historicalDomainObject = await this._openmct.objects.get(
+        this[key].historical.telemetryObjectId
+      );
+
+      this[key].requestLatestFor = async (datum) => {
+        // We need to create a throwaway time context and pass it along
+        // as a request option. We do this to "trick" the Time API
+        // into thinking we are in fixed time mode in order to bypass this logic:
+        // https://github.com/akhenry/openmct-yamcs/blob/1060d42ebe43bf346dac0f6a8068cb288ade4ba4/src/providers/historical-telemetry-provider.js#L59
+        // Context: https://github.com/akhenry/openmct-yamcs/pull/217
+        const ephemeralContext = new IndependentTimeContext(this._openmct, this._openmct.time, [
+          this[key].historicalDomainObject
+        ]);
+
+        // Stop following the global context, stop the clock,
+        // and set bounds.
+        ephemeralContext.resetContext();
+        const newBounds = {
+          start: this.timeContext.bounds().start,
+          end: this._parseTime(datum)
+        };
+        ephemeralContext.bounds(newBounds);
 
-        await Promise.all(
-            this.keys.map(async (key) => {
-                if (this[key]) {
-                    if (this[key].historical) {
-                        await this._initializeHistorical(key);
-                    }
-
-                    if (this[key].realtime && this[key].realtime.telemetryObjectId && this[key].realtime.telemetryObjectId !== '') {
-                        await this._intializeRealtime(key);
-                    }
-                }
-            })
+        const options = {
+          start: newBounds.start,
+          end: newBounds.end,
+          timeContext: ephemeralContext,
+          strategy: 'latest'
+        };
+        let results = await this._openmct.telemetry.request(
+          this[key].historicalDomainObject,
+          options
         );
-    }
 
-    async _initializeHistorical(key) {
-        if (!this[key].historical.telemetryObjectId) {
-            this[key].historical.hasTelemetryOnDatum = true;
-        } else if (this[key].historical.telemetryObjectId !== '') {
-            this[key].historicalDomainObject = await this._openmct.objects.get(this[key].historical.telemetryObjectId);
-
-            this[key].requestLatestFor = async (datum) => {
-                const options = {
-                    start: this._openmct.time.bounds().start,
-                    end: this._parseTime(datum),
-                    strategy: 'latest'
-                };
-                let results = await this._openmct.telemetry
-                    .request(this[key].historicalDomainObject, options);
-
-                return results[results.length - 1];
-            };
-        }
+        return results[results.length - 1];
+      };
     }
-
-    async _intializeRealtime(key) {
-        this[key].realtimeDomainObject = await this._openmct.objects.get(this[key].realtime.telemetryObjectId);
-        this[key].listeners = [];
-        this[key].subscribe = (callback) => {
-
-            if (!this[key].isSubscribed) {
-                this._subscribeToDataForKey(key);
-            }
-
-            if (!this[key].listeners.includes(callback)) {
-                this[key].listeners.push(callback);
-
-                return () => {
-                    this[key].listeners.remove(callback);
-                };
-            } else {
-                return () => {};
-            }
+  }
+
+  async _initializeRealtime(key) {
+    this[key].realtimeDomainObject = await this._openmct.objects.get(
+      this[key].realtime.telemetryObjectId
+    );
+    this[key].listeners = [];
+    this[key].subscribe = (callback) => {
+      if (!this[key].isSubscribed) {
+        this._subscribeToDataForKey(key);
+      }
+
+      if (!this[key].listeners.includes(callback)) {
+        this[key].listeners.push(callback);
+
+        return () => {
+          this[key].listeners.remove(callback);
         };
+      } else {
+        return () => {};
+      }
+    };
+  }
+
+  _subscribeToDataForKey(key) {
+    if (this[key].isSubscribed) {
+      return;
     }
 
-    _subscribeToDataForKey(key) {
-        if (this[key].isSubscribed) {
-            return;
+    if (this[key].realtimeDomainObject) {
+      this[key].unsubscribe = this._openmct.telemetry.subscribe(
+        this[key].realtimeDomainObject,
+        (datum) => {
+          this[key].listeners.forEach((callback) => {
+            callback(datum);
+          });
         }
+      );
 
-        if (this[key].realtimeDomainObject) {
-            this[key].unsubscribe = this._openmct.telemetry.subscribe(
-                this[key].realtimeDomainObject, datum => {
-                    this[key].listeners.forEach(callback => {
-                        callback(datum);
-                    });
-
-                }
-            );
-
-            this[key].isSubscribed = true;
-        }
-    }
-
-    _parseTime(datum) {
-        return this._timeFormatter.parse(datum);
+      this[key].isSubscribed = true;
     }
-
-    _timeSystemChange(system) {
-        let key = system.key;
-        let metadata = this._openmct.telemetry.getMetadata(this._domainObject);
-        let metadataValue = metadata.value(key) || { format: key };
-        this._timeFormatter = this._openmct.telemetry.getValueFormatter(metadataValue);
+  }
+
+  _parseTime(datum) {
+    return this._timeFormatter.parse(datum);
+  }
+
+  _timeSystemChange(system) {
+    let key = system.key;
+    let metadata = this._openmct.telemetry.getMetadata(this._domainObject);
+    let metadataValue = metadata.value(key) || { format: key };
+    this._timeFormatter = this._openmct.telemetry.getValueFormatter(metadataValue);
+  }
+
+  destroy() {
+    this.timeContext.off('timeSystem', this._timeSystemChange);
+    for (let key of this.keys) {
+      if (this[key] && this[key].unsubscribe) {
+        this[key].unsubscribe();
+      }
     }
-
-    destroy() {
-        this._openmct.time.off('timeSystem', this._timeSystemChange);
-        for (let key of this.keys) {
-            if (this[key] && this[key].unsubscribe) {
-                this[key].unsubscribe();
-            }
-        }
-    }
-
+  }
 }
diff --git a/src/plugins/imagery/components/ZoomSettings.vue b/src/plugins/imagery/components/ZoomSettings.vue
new file mode 100644
index 00000000000..1309a48830d
--- /dev/null
+++ b/src/plugins/imagery/components/ZoomSettings.vue
@@ -0,0 +1,103 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="c-image-controls__controls-wrapper" @click="handleClose">
+    <div class="c-image-controls__control c-image-controls__zoom">
+      <div class="c-button-set c-button-set--strip-h">
+        <button
+          class="c-button t-btn-zoom-out icon-minus"
+          title="Zoom out"
+          @click="zoomOut"
+        ></button>
+
+        <button class="c-button t-btn-zoom-in icon-plus" title="Zoom in" @click="zoomIn"></button>
+
+        <button
+          class="c-button t-btn-zoom-lock"
+          title="Lock current zoom and pan across all images"
+          :class="{ 'icon-unlocked': !panZoomLocked, 'icon-lock': panZoomLocked }"
+          @click="toggleZoomLock"
+        ></button>
+
+        <button
+          class="c-button icon-reset t-btn-zoom-reset"
+          title="Remove zoom and pan"
+          @click="handleResetImage"
+        ></button>
+      </div>
+      <div class="c-image-controls__zoom-factor">x{{ formattedZoomFactor }}</div>
+    </div>
+    <button
+      v-if="isMenu"
+      class="c-click-icon icon-x t-btn-close c-switcher-menu__close-button"
+    ></button>
+  </div>
+</template>
+
+<script>
+export default {
+  inject: ['openmct'],
+  props: {
+    zoomFactor: {
+      type: Number,
+      required: true
+    },
+    panZoomLocked: {
+      type: Boolean,
+      required: true
+    },
+    isMenu: {
+      type: Boolean,
+      required: false
+    }
+  },
+  emits: ['handle-reset-image', 'toggle-zoom-lock', 'zoom-in', 'zoom-out'],
+  data() {
+    return {};
+  },
+  computed: {
+    formattedZoomFactor() {
+      return Number.parseFloat(this.zoomFactor).toPrecision(2);
+    }
+  },
+  methods: {
+    handleClose(e) {
+      const closeButton = e.target.classList.contains('c-switcher-menu__close-button');
+      if (!closeButton) {
+        e.stopPropagation();
+      }
+    },
+    handleResetImage() {
+      this.$emit('handle-reset-image');
+    },
+    toggleZoomLock() {
+      this.$emit('toggle-zoom-lock');
+    },
+    zoomIn() {
+      this.$emit('zoom-in');
+    },
+    zoomOut() {
+      this.$emit('zoom-out');
+    }
+  }
+};
+</script>
diff --git a/src/plugins/imagery/components/imagery-view-layout.scss b/src/plugins/imagery/components/imagery-view-layout.scss
deleted file mode 100644
index 532ee33d4f3..00000000000
--- a/src/plugins/imagery/components/imagery-view-layout.scss
+++ /dev/null
@@ -1,314 +0,0 @@
-.c-imagery {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
-
-    &:focus {
-        outline: none;
-    }
-
-    > * + * {
-        margin-top: $interiorMargin;
-    }
-
-    &__main-image-wrapper {
-        display: flex;
-        flex-direction: column;
-        flex: 1 1 auto;
-    }
-
-    &__main-image {
-        &__bg {
-            background-color: $colorPlotBg;
-            border: 1px solid transparent;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex: 1 1 auto;
-            height: 0;
-
-            &.unnsynced{
-                @include sUnsynced();
-            }
-        }
-
-        &__image {
-            height: 100%;
-            width: 100%;
-        }
-    }
-
-    &__control-bar,
-    &__time {
-        display: flex;
-        align-items: baseline;
-
-        > * + * {
-            margin-left: $interiorMarginSm;
-        }
-
-    }
-
-    &__control-bar {
-        margin-top: 2px;
-        padding: $interiorMarginSm 0;
-        justify-content: space-between;
-
-    }
-
-    &__time {
-        flex: 0 1 auto;
-        overflow: hidden;
-    }
-
-    &__timestamp,
-    &__age {
-        @include ellipsize();
-        flex: 0 1 auto;
-    }
-
-    &__timestamp {
-        flex-shrink: 10;
-    }
-
-    &__age {
-        border-radius: $smallCr;
-        display: flex;
-        flex-shrink: 0;
-        align-items: center;
-        padding: 2px $interiorMarginSm;
-
-        &:before {
-            font-size: 0.9em;
-            opacity: 0.5;
-            margin-right: $interiorMarginSm;
-        }
-    }
-
-    &--new {
-        // New imagery
-        $bgColor: $colorOk;
-        color: $colorOkFg;
-        background: rgba($bgColor, 0.5);
-        @include flash($animName: flashImageAge, $iter: 2, $dur: 250ms, $valStart: rgba($colorOk, 0.7), $valEnd: rgba($colorOk, 0));
-    }
-
-    &__thumbs-wrapper {
-        display: flex; // Uses row layout
-
-        &.is-autoscroll-off {
-            background: $colorInteriorBorder;
-            [class*='__auto-scroll-resume-button'] {
-                display: block;
-            }
-        }
-
-        &.is-paused {
-            background: rgba($colorPausedBg, 0.4);
-        }
-    }
-
-    &__thumbs-scroll-area {
-        flex: 0 1 auto;
-        display: flex;
-        flex-direction: row;
-        height: 135px;
-        overflow-x: auto;
-        overflow-y: hidden;
-        margin-bottom: 1px;
-        padding-bottom: $interiorMarginSm;
-
-        .c-thumb:last-child {
-            // Hilite the lastest thumb
-            background: $colorBodyFg;
-            color: $colorBodyBg;
-        }
-    }
-
-    &__auto-scroll-resume-button {
-        display: none; // Set to block when __thumbs-wrapper has .is-autoscroll-off
-        flex: 0 0 auto;
-        font-size: 0.8em;
-        margin: $interiorMarginSm;
-    }
-}
-
-/*************************************** 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-scroll-area {
-        //  When Imagery is in a layout, hide the thumbs area
-        display: none;
-    }
-}
-
-/*************************************** IMAGERY LOCAL CONTROLS*/
-.c-imagery {
-    .h-local-controls--overlay-content {
-        position: absolute;
-        left: $interiorMargin; top: $interiorMargin;
-        z-index: 2;
-        background: $colorLocalControlOvrBg;
-        border-radius: $basicCr;
-        max-width: 200px;
-        min-width: 70px;
-        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;
-            }
-        }
-
-        .s-status-taking-snapshot & {
-            display: none;
-        }
-    }
-
-    &__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;
-            }
-        }
-    }
-}
-
-.c-image-controls {
-    // Brightness/contrast
-
-    &__controls {
-        // Sliders and reset element
-        display: flex;
-        align-items: center;
-        margin-right: $interiorMargin; // Need some extra space due to proximity to close button
-    }
-
-    &__sliders {
-        display: flex;
-        flex: 1 1 auto;
-        flex-direction: column;
-
-        > * + * {
-            margin-top: 11px;
-        }
-    }
-
-    &__slider-wrapper {
-        // A wrapper is needed to add the type icon to left of each range input
-        display: flex;
-        align-items: center;
-
-        &:before {
-            color: rgba($colorMenuFg, 0.5);
-            margin-right: $interiorMarginSm;
-        }
-
-        input[type='range'] {
-            width: 100px;
-        }
-    }
-
-    &__btn-reset {
-        flex: 0 0 auto;
-    }
-}
-
-/*************************************** BUTTONS */
-.c-button.pause-play {
-    // Pause icon set by default in markup
-    justify-self: end;
-
-    &.is-paused {
-        background: $colorPausedBg !important;
-        color: $colorPausedFg;
-
-        &:before {
-            content: $glyph-icon-play;
-        }
-    }
-
-    .s-status-taking-snapshot & {
-        display: none;
-    }
-}
-
-.c-imagery__prev-next-buttons {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    pointer-events: none;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-75%);
-
-    .c-nav {
-        pointer-events: all;
-    }
-
-    .s-status-taking-snapshot & {
-        display: none;
-    }
-}
-
-.c-nav {
-    @include cArrowButtonBase($colorBg: rgba($colorLocalControlOvrBg, 0.1), $colorFg: $colorBtnBg);
-    @include cArrowButtonSizing($dimOuter: 48px);
-    border-radius: $controlCr;
-
-    .is-in-small-container & {
-        @include cArrowButtonSizing($dimOuter: 32px);
-    }
-}
diff --git a/src/plugins/imagery/components/imagery-view.scss b/src/plugins/imagery/components/imagery-view.scss
new file mode 100644
index 00000000000..09e8cb7d819
--- /dev/null
+++ b/src/plugins/imagery/components/imagery-view.scss
@@ -0,0 +1,557 @@
+@use 'sass:math';
+
+@keyframes fade-out {
+  from {
+    background-color: rgba($colorOk, 0.5);
+  }
+  to {
+    background-color: rgba($colorOk, 0);
+    color: inherit;
+  }
+}
+
+.c-imagery {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+
+  &:focus {
+    outline: none;
+  }
+
+  > * + * {
+    margin-top: $interiorMargin;
+  }
+
+  &__main-image-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+
+    &.unsynced {
+      @include sUnsynced();
+    }
+
+    &.cursor-zoom-in {
+      cursor: zoom-in;
+    }
+
+    &.cursor-zoom-out {
+      cursor: zoom-out;
+    }
+
+    &.pannable {
+      @include cursorGrab();
+    }
+  }
+
+  .image-wrapper {
+    overflow: visible clip;
+    background-image: repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 4px,
+      rgba(125, 125, 125, 0.2) 4px,
+      rgba(125, 125, 125, 0.2) 8px
+    );
+  }
+
+  .image-wrapper {
+    overflow: visible clip;
+    background-image: repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 4px,
+      rgba(125, 125, 125, 0.2) 4px,
+      rgba(125, 125, 125, 0.2) 8px
+    );
+  }
+
+  &__main-image {
+    &__bg {
+      background-color: $colorPlotBg;
+      border: 1px solid transparent;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: 1 1 auto;
+      height: 0;
+      overflow: hidden;
+    }
+    &__background-image {
+      // Actually does the image display
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      height: 100%; //fallback value
+    }
+    &__image {
+      // Present to allow Save As... image
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      opacity: 0;
+    }
+
+    &__image-save-proxy {
+      height: 100%;
+      width: 100%;
+      z-index: 10;
+    }
+  }
+
+  &__hints {
+    $m: $interiorMargin;
+    background: rgba(black, 0.2);
+    border-radius: $smallCr;
+    padding: 2px $interiorMargin;
+    pointer-events: none;
+    position: absolute;
+    right: $m;
+    top: $m;
+    opacity: 0.9;
+    z-index: 2;
+  }
+
+  &__control-bar,
+  &__time {
+    display: flex;
+    align-items: baseline;
+
+    > * + * {
+      margin-left: $interiorMarginSm;
+    }
+  }
+
+  &__control-bar {
+    margin-top: 2px;
+    padding: $interiorMarginSm 0;
+    justify-content: space-between;
+  }
+
+  &__time {
+    flex: 0 1 auto;
+    overflow: hidden;
+  }
+
+  &__timestamp,
+  &__age {
+    @include ellipsize();
+    flex: 0 1 auto;
+  }
+
+  &__timestamp {
+    flex-shrink: 10;
+  }
+
+  &__age {
+    border-radius: $smallCr;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    padding: 2px $interiorMarginSm;
+
+    &:before {
+      font-size: 0.9em;
+      opacity: 0.5;
+      margin-right: $interiorMarginSm;
+    }
+  }
+
+  &--new {
+    // New imagery
+    $bgColor: $colorOk;
+    color: $colorOkFg;
+    background-color: rgba($bgColor, 0.5);
+    animation-name: fade-out;
+    animation-timing-function: ease-in;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
+    &.no-animation {
+      animation: none;
+    }
+  }
+
+  &__layer-image {
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  &__thumbs-wrapper {
+    display: flex; // Uses row layout
+    justify-content: flex-end;
+
+    &.is-autoscroll-off {
+      background: $colorInteriorBorder;
+      [class*='__auto-scroll-resume-button'] {
+        display: block;
+      }
+    }
+
+    &.is-paused {
+      background: rgba($colorPausedBg, 0.4);
+    }
+  }
+
+  &__thumbs-scroll-area {
+    flex: 0 1 auto;
+    display: flex;
+    flex-direction: row;
+    height: 145px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    margin-bottom: 1px;
+    padding-bottom: $interiorMarginSm;
+    &.animate-scroll {
+      scroll-behavior: smooth;
+    }
+  }
+
+  &__auto-scroll-resume-button {
+    display: none; // Set to block when __thumbs-wrapper has .is-autoscroll-off
+    flex: 0 0 auto;
+    font-size: 0.8em;
+    margin: $interiorMarginSm;
+  }
+
+  .c-control-menu {
+    // Controls on left of flex column layout, close btn on right
+    @include menuOuter();
+
+    border-radius: $controlCr;
+    display: flex;
+    align-items: flex-start;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: $interiorMargin;
+    width: max-content;
+
+    > * + * {
+      margin-left: $interiorMargin;
+    }
+  }
+
+  .c-switcher-menu {
+    display: contents;
+
+    &__content {
+      // Menu panel
+      top: 28px;
+      position: absolute;
+
+      .c-so-view & {
+        top: 25px;
+      }
+    }
+  }
+}
+
+.--width-less-than-220 .--show-if-less-than-220.c-switcher-menu {
+  display: contents !important;
+}
+
+.s-image-layer {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  opacity: 1;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+/*************************************** THUMBS */
+.c-thumb {
+  $w: $imageThumbsD;
+  display: flex;
+  flex-direction: column;
+  padding: 4px;
+  min-width: $w;
+  width: $w;
+
+  &.active {
+    background: $colorSelectedBg;
+    color: $colorSelectedFg;
+  }
+  &:hover {
+    background: $colorThumbHoverBg;
+  }
+  &.selected {
+    // fixed time - selected bg will match active bg color
+    background: $colorSelectedBg;
+    color: $colorSelectedFg;
+    &.real-time {
+      // real time - bg orange when selected
+      background: $colorPausedBg !important;
+      color: $colorPausedFg !important;
+    }
+  }
+
+  &__image {
+    background-color: rgba($colorBodyFg, 0.2);
+    width: 100%;
+  }
+
+  &__annotation-indicator {
+    color: $colorClickIconButton;
+    position: absolute;
+    top: 6px;
+    right: 8px;
+  }
+
+  &__timestamp {
+    flex: 0 0 auto;
+    padding: 2px 3px;
+  }
+
+  &__viewable-area {
+    position: absolute;
+    border: 2px yellow solid;
+    left: 0;
+    top: 0;
+  }
+}
+
+.is-small-thumbs {
+  .c-imagery__thumbs-scroll-area {
+    height: 60px; // Allow room for scrollbar
+  }
+
+  .c-thumb {
+    $w: math.div($imageThumbsD, 2);
+    min-width: $w;
+    width: $w;
+
+    &__timestamp {
+      display: none;
+    }
+  }
+}
+
+/*************************************** IMAGERY LOCAL CONTROLS*/
+.c-imagery {
+  .h-local-controls--overlay-content {
+    display: flex;
+    flex-direction: row;
+    position: absolute;
+    left: $interiorMargin;
+    top: $interiorMargin;
+    z-index: 10;
+    background: $colorLocalControlOvrBg;
+    border-radius: $basicCr;
+    align-items: center;
+    padding: $interiorMargin $interiorMargin;
+
+    .s-status-taking-snapshot & {
+      display: none;
+    }
+  }
+  [class*='--menus-aligned'] {
+    > * + * {
+      button {
+        margin-left: $interiorMarginSm;
+      }
+    }
+  }
+}
+
+.c-image-controls {
+  &__controls-wrapper {
+    // Wraps __controls and __close-btn
+    display: flex;
+  }
+
+  &__controls {
+    display: flex;
+    align-items: stretch;
+
+    > * + * {
+      margin-top: $interiorMargin;
+    }
+
+    [class*='c-button'] {
+      flex: 0 0 auto;
+    }
+  }
+
+  &__control,
+  &__input {
+    display: flex;
+    align-items: center;
+
+    &:before {
+      color: rgba($colorMenuFg, 0.5);
+      margin-right: $interiorMarginSm;
+    }
+  }
+
+  &__zoom {
+    > * + * {
+      margin-left: $interiorMargin;
+    } // Is this used?
+  }
+
+  &--filters {
+    // Styles specific to the brightness and contrast controls
+    .c-image-controls {
+      &__controls {
+        width: 80px; // About the minimum this element can be; cannot size based on % due to markup structure
+      }
+
+      &__sliders {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+        width: 100%;
+
+        > * + * {
+          margin-top: 11px;
+        }
+
+        input[type='range'] {
+          display: block;
+          width: 100%;
+        }
+      }
+
+      &__slider-wrapper {
+        display: flex;
+        align-items: center;
+
+        &:before {
+          margin-right: $interiorMargin;
+        }
+      }
+
+      &__reset-btn {
+        // Span that holds bracket graphics and button
+        $bc: $scrollbarTrackColorBg;
+        flex: 0 0 auto;
+
+        &: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;
+        }
+
+        .c-icon-link {
+          color: $colorBtnFg;
+        }
+      }
+    }
+  }
+}
+
+/*************************************** BUTTONS */
+.c-button.pause-play {
+  // Pause icon set by default in markup
+  justify-self: end;
+
+  &.is-paused {
+    background: $colorPausedBg !important;
+    color: $colorPausedFg;
+
+    &:before {
+      content: $glyph-icon-play;
+    }
+  }
+
+  .s-status-taking-snapshot & {
+    display: none;
+  }
+}
+
+.c-imagery__prev-next-button {
+  pointer-events: all;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-75%); // 75% due to transform: rotation approach to the button
+
+  &.c-nav {
+    position: absolute;
+
+    &--prev {
+      left: 0;
+    }
+    &--next {
+      right: 0;
+    }
+  }
+
+  .s-status-taking-snapshot & {
+    display: none;
+  }
+}
+
+.c-nav {
+  @include cArrowButtonBase($colorBg: rgba($colorLocalControlOvrBg, 0.1), $colorFg: $colorBtnBg);
+  @include cArrowButtonSizing($dimOuter: 48px);
+  border-radius: $controlCr;
+
+  .--width-less-than-600 & {
+    @include cArrowButtonSizing($dimOuter: 32px);
+  }
+}
+
+/*************************************** IMAGERY IN TIMESTRIP VIEWS */
+.c-imagery-tsv {
+  div.c-imagery-tsv__image-wrapper {
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    display: flex;
+    z-index: 1;
+    margin-top: 5px;
+
+    img {
+      align-self: flex-end;
+    }
+    &:hover {
+      z-index: 2;
+
+      [class*='__image-handle'] {
+        background-color: $colorBodyFg;
+      }
+
+      img {
+        display: block !important;
+      }
+    }
+  }
+
+  &__no-items {
+    fill: $colorBodyFg !important;
+  }
+
+  &__image-handle {
+    background-color: rgba($colorBodyFg, 0.5);
+  }
+
+  &__image-placeholder {
+    background-color: pushBack($colorBodyBg, 0.3);
+    display: block;
+    align-self: flex-end;
+  }
+}
+
+.c-image-canvas {
+  pointer-events: auto; // This allows the image element to receive a browser-level context click
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
diff --git a/src/plugins/imagery/layers/example-imagery-layer-16x9.png b/src/plugins/imagery/layers/example-imagery-layer-16x9.png
new file mode 100644
index 00000000000..877a0e6038b
Binary files /dev/null and b/src/plugins/imagery/layers/example-imagery-layer-16x9.png differ
diff --git a/src/plugins/imagery/layers/example-imagery-layer-safe.png b/src/plugins/imagery/layers/example-imagery-layer-safe.png
new file mode 100644
index 00000000000..f99907f299a
Binary files /dev/null and b/src/plugins/imagery/layers/example-imagery-layer-safe.png differ
diff --git a/src/plugins/imagery/layers/example-imagery-layer-scale.png b/src/plugins/imagery/layers/example-imagery-layer-scale.png
new file mode 100644
index 00000000000..7f5f41211b3
Binary files /dev/null and b/src/plugins/imagery/layers/example-imagery-layer-scale.png differ
diff --git a/src/plugins/imagery/lib/eventHelpers.js b/src/plugins/imagery/lib/eventHelpers.js
new file mode 100644
index 00000000000..c4de691650e
--- /dev/null
+++ b/src/plugins/imagery/lib/eventHelpers.js
@@ -0,0 +1,97 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+const helperFunctions = {
+  listenTo: function (object, event, callback, context) {
+    if (!this._listeningTo) {
+      this._listeningTo = [];
+    }
+
+    const listener = {
+      object: object,
+      event: event,
+      callback: callback,
+      context: context,
+      _cb: context ? callback.bind(context) : callback
+    };
+    if (object.$watch && event.indexOf('change:') === 0) {
+      const scopePath = event.replace('change:', '');
+      listener.unlisten = object.$watch(scopePath, listener._cb, true);
+    } else if (object.$on) {
+      listener.unlisten = object.$on(event, listener._cb);
+    } else if (object.addEventListener) {
+      object.addEventListener(event, listener._cb);
+    } else {
+      object.on(event, listener._cb);
+    }
+
+    this._listeningTo.push(listener);
+  },
+
+  stopListening: function (object, event, callback, context) {
+    if (!this._listeningTo) {
+      this._listeningTo = [];
+    }
+
+    this._listeningTo
+      .filter(function (listener) {
+        if (object && object !== listener.object) {
+          return false;
+        }
+
+        if (event && event !== listener.event) {
+          return false;
+        }
+
+        if (callback && callback !== listener.callback) {
+          return false;
+        }
+
+        if (context && context !== listener.context) {
+          return false;
+        }
+
+        return true;
+      })
+      .map(function (listener) {
+        if (listener.unlisten) {
+          listener.unlisten();
+        } else if (listener.object.removeEventListener) {
+          listener.object.removeEventListener(listener.event, listener._cb);
+        } else {
+          listener.object.off(listener.event, listener._cb);
+        }
+
+        return listener;
+      })
+      .forEach(function (listener) {
+        this._listeningTo.splice(this._listeningTo.indexOf(listener), 1);
+      }, this);
+  },
+
+  extend: function (object) {
+    object.listenTo = helperFunctions.listenTo;
+    object.stopListening = helperFunctions.stopListening;
+  }
+};
+
+export default helperFunctions;
diff --git a/src/plugins/imagery/mixins/imageryData.js b/src/plugins/imagery/mixins/imageryData.js
new file mode 100644
index 00000000000..0242b66748f
--- /dev/null
+++ b/src/plugins/imagery/mixins/imageryData.js
@@ -0,0 +1,204 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+const DEFAULT_DURATION_FORMATTER = 'duration';
+const IMAGE_HINT_KEY = 'image';
+const IMAGE_THUMBNAIL_HINT_KEY = 'thumbnail';
+const IMAGE_DOWNLOAD_NAME_HINT_KEY = 'imageDownloadName';
+import { TIME_CONTEXT_EVENTS } from '../../../api/time/constants.js';
+
+export default {
+  inject: ['openmct', 'domainObject', 'objectPath'],
+  mounted() {
+    // listen
+    this.boundsChanged = this.boundsChanged.bind(this);
+    this.timeSystemChanged = this.timeSystemChanged.bind(this);
+    this.setDataTimeContext = this.setDataTimeContext.bind(this);
+    this.openmct.objectViews.on('clearData', this.dataCleared);
+
+    // Get metadata and formatters
+    this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+    this.metadata = this.openmct.telemetry.getMetadata(this.domainObject);
+
+    this.imageMetadataValue = { ...this.metadata.valuesForHints([IMAGE_HINT_KEY])[0] };
+    this.imageFormatter = this.getFormatter(this.imageMetadataValue.key);
+
+    this.imageThumbnailMetadataValue = {
+      ...this.metadata.valuesForHints([IMAGE_THUMBNAIL_HINT_KEY])[0]
+    };
+    this.imageThumbnailFormatter = this.imageThumbnailMetadataValue.key
+      ? this.getFormatter(this.imageThumbnailMetadataValue.key)
+      : null;
+
+    this.durationFormatter = this.getFormatter(
+      this.timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
+    );
+    this.imageDownloadNameMetadataValue = {
+      ...this.metadata.valuesForHints([IMAGE_DOWNLOAD_NAME_HINT_KEY])[0]
+    };
+
+    // initialize
+    this.timeKey = this.timeSystem.key;
+    this.timeFormatter = this.getFormatter(this.timeKey);
+    this.setDataTimeContext();
+    this.loadTelemetry();
+  },
+  beforeUnmount() {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+      delete this.unsubscribe;
+    }
+
+    this.stopFollowingDataTimeContext();
+    this.openmct.objectViews.off('clearData', this.dataCleared);
+
+    this.telemetryCollection.off('add', this.dataAdded);
+    this.telemetryCollection.off('remove', this.dataRemoved);
+    this.telemetryCollection.off('clear', this.dataCleared);
+
+    this.telemetryCollection.destroy();
+  },
+  methods: {
+    dataAdded(addedItems, addedItemIndices) {
+      const normalizedDataToAdd = addedItems.map((datum) => this.normalizeDatum(datum));
+      let newImageHistory = this.imageHistory.slice();
+      normalizedDataToAdd.forEach((datum, index) => {
+        newImageHistory.splice(addedItemIndices[index] ?? -1, 0, datum);
+      });
+      //Assign just once so imageHistory watchers don't get called too often
+      this.imageHistory = newImageHistory;
+    },
+    dataCleared() {
+      this.imageHistory = [];
+    },
+    dataRemoved(dataToRemove) {
+      this.imageHistory = this.imageHistory.filter((existingDatum) => {
+        const shouldKeep = dataToRemove.some((datumToRemove) => {
+          const existingDatumTimestamp = this.parseTime(existingDatum);
+          const datumToRemoveTimestamp = this.parseTime(datumToRemove);
+
+          return existingDatumTimestamp !== datumToRemoveTimestamp;
+        });
+
+        return shouldKeep;
+      });
+    },
+    setDataTimeContext() {
+      this.stopFollowingDataTimeContext();
+      this.timeContext = this.openmct.time.getContextForView(this.objectPath);
+      this.timeContext.on(TIME_CONTEXT_EVENTS.boundsChanged, this.boundsChanged);
+      this.timeContext.on(TIME_CONTEXT_EVENTS.timeSystemChanged, this.timeSystemChanged);
+    },
+    stopFollowingDataTimeContext() {
+      if (this.timeContext) {
+        this.timeContext.off(TIME_CONTEXT_EVENTS.boundsChanged, this.boundsChanged);
+        this.timeContext.off(TIME_CONTEXT_EVENTS.timeSystemChanged, this.timeSystemChanged);
+      }
+    },
+    formatImageUrl(datum) {
+      if (!datum) {
+        return;
+      }
+
+      return this.imageFormatter.format(datum);
+    },
+    formatImageThumbnailUrl(datum) {
+      if (!datum || !this.imageThumbnailFormatter) {
+        return;
+      }
+
+      return this.imageThumbnailFormatter.format(datum);
+    },
+    formatTime(datum) {
+      if (!datum) {
+        return;
+      }
+
+      const dateTimeStr = this.timeFormatter.format(datum);
+
+      // Replace ISO "T" with a space to allow wrapping
+      return dateTimeStr.replace('T', ' ');
+    },
+    getImageDownloadName(datum) {
+      let imageDownloadName = '';
+      if (datum) {
+        const key = this.imageDownloadNameMetadataValue.key;
+        imageDownloadName = datum[key];
+      }
+
+      return imageDownloadName;
+    },
+    parseTime(datum) {
+      if (!datum) {
+        return;
+      }
+
+      return this.timeFormatter.parse(datum);
+    },
+    loadTelemetry() {
+      this.telemetryCollection = this.openmct.telemetry.requestCollection(this.domainObject, {
+        timeContext: this.timeContext
+      });
+      this.telemetryCollection.on('add', this.dataAdded);
+      this.telemetryCollection.on('remove', this.dataRemoved);
+      this.telemetryCollection.on('clear', this.dataCleared);
+      this.telemetryCollection.load();
+    },
+    boundsChanged(bounds, isTick) {
+      if (isTick) {
+        return;
+      }
+
+      this.bounds = bounds; // setting bounds for ImageryView watcher
+    },
+    timeSystemChanged() {
+      this.timeSystem = this.timeContext.timeSystem();
+      this.timeKey = this.timeSystem.key;
+      this.timeFormatter = this.getFormatter(this.timeKey);
+      this.durationFormatter = this.getFormatter(
+        this.timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
+      );
+    },
+    normalizeDatum(datum) {
+      const formattedTime = this.formatTime(datum);
+      const url = this.formatImageUrl(datum);
+      const thumbnailUrl = this.formatImageThumbnailUrl(datum);
+      const time = this.parseTime(formattedTime);
+      const imageDownloadName = this.getImageDownloadName(datum);
+
+      return {
+        ...datum,
+        formattedTime,
+        url,
+        thumbnailUrl,
+        time,
+        imageDownloadName
+      };
+    },
+    getFormatter(key) {
+      const metadataValue = this.metadata.value(key) || { format: key };
+      const valueFormatter = this.openmct.telemetry.getValueFormatter(metadataValue);
+
+      return valueFormatter;
+    }
+  }
+};
diff --git a/src/plugins/imagery/plugin.js b/src/plugins/imagery/plugin.js
index 3f2cfeb3548..2b59ae3152b 100644
--- a/src/plugins/imagery/plugin.js
+++ b/src/plugins/imagery/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,11 +20,16 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import ImageryViewProvider from './ImageryViewProvider';
+import OpenImageInNewTabAction from './actions/OpenImageInNewTabAction.js';
+import SaveImageAsAction from './actions/SaveImageAsAction.js';
+import ImageryTimestripViewProvider from './ImageryTimestripViewProvider.js';
+import ImageryViewProvider from './ImageryViewProvider.js';
 
-export default function () {
-    return function install(openmct) {
-        openmct.objectViews.addProvider(new ImageryViewProvider(openmct));
-    };
+export default function (options) {
+  return function install(openmct) {
+    openmct.objectViews.addProvider(new ImageryViewProvider(openmct, options));
+    openmct.objectViews.addProvider(new ImageryTimestripViewProvider(openmct));
+    openmct.actions.register(new OpenImageInNewTabAction(openmct));
+    openmct.actions.register(new SaveImageAsAction(openmct));
+  };
 }
-
diff --git a/src/plugins/imagery/pluginSpec.js b/src/plugins/imagery/pluginSpec.js
index 36410d3cd5b..df048fc5b48 100644
--- a/src/plugins/imagery/pluginSpec.js
+++ b/src/plugins/imagery/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,366 +20,676 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import Vue from 'vue';
 import {
-    createOpenMct,
-    resetApplicationState,
-    simulateKeyEvent
+  createMouseEvent,
+  createOpenMct,
+  resetApplicationState,
+  simulateKeyEvent
 } from 'utils/testing';
+import { nextTick } from 'vue';
 
 const ONE_MINUTE = 1000 * 60;
 const TEN_MINUTES = ONE_MINUTE * 10;
 const MAIN_IMAGE_CLASS = '.js-imageryView-image';
 const NEW_IMAGE_CLASS = '.c-imagery__age.c-imagery--new';
 const REFRESH_CSS_MS = 500;
-const TOLERANCE = 0.50;
 
-function comparisonFunction(valueOne, valueTwo) {
-    let larger = valueOne;
-    let smaller = valueTwo;
-
-    if (larger < smaller) {
-        larger = valueTwo;
-        smaller = valueOne;
-    }
-
-    return (larger - smaller) < TOLERANCE;
+function formatThumbnail(url) {
+  return url.replace('logo-openmct.svg', 'logo-nasa.svg');
 }
 
 function getImageInfo(doc) {
-    let imageElement = doc.querySelectorAll(MAIN_IMAGE_CLASS)[0];
-    let timestamp = imageElement.dataset.openmctImageTimestamp;
-    let identifier = imageElement.dataset.openmctObjectKeystring;
-    let url = imageElement.src;
-
-    return {
-        timestamp,
-        identifier,
-        url
-    };
+  let imageElement = doc.querySelectorAll(MAIN_IMAGE_CLASS)[0];
+  let timestamp = imageElement.dataset.openmctImageTimestamp;
+  let identifier = imageElement.dataset.openmctObjectKeystring;
+  let url = imageElement.src;
+
+  return {
+    timestamp,
+    identifier,
+    url
+  };
 }
 
 function isNew(doc) {
-    let newIcon = doc.querySelectorAll(NEW_IMAGE_CLASS);
+  let newIcon = doc.querySelectorAll(NEW_IMAGE_CLASS);
 
-    return newIcon.length !== 0;
+  return newIcon.length !== 0;
 }
 
 function generateTelemetry(start, count) {
-    let telemetry = [];
-
-    for (let i = 1, l = count + 1; i < l; i++) {
-        let stringRep = i + 'minute';
-        let logo = 'images/logo-openmct.svg';
-
-        telemetry.push({
-            "name": stringRep + " Imagery",
-            "utc": start + (i * ONE_MINUTE),
-            "url": location.host + '/' + logo + '?time=' + stringRep,
-            "timeId": stringRep,
-            "value": 100
-        });
-    }
+  let telemetry = [];
+  for (let i = 1, l = count + 1; i < l; i++) {
+    let stringRep = i + 'minute';
+    let logo = 'images/logo-openmct.svg';
+
+    telemetry.push({
+      name: stringRep + ' Imagery',
+      utc: start + i * ONE_MINUTE,
+      url: location.host + '/' + logo + '?time=' + stringRep,
+      timeId: stringRep,
+      value: 100
+    });
+  }
 
-    return telemetry;
+  return telemetry;
 }
 
-describe("The Imagery View Layout", () => {
-    const imageryKey = 'example.imagery';
-    const START = Date.now();
-    const COUNT = 10;
+describe('The Imagery View Layouts', () => {
+  const imageryKey = 'example.imagery';
+  const imageryForTimeStripKey = 'example.imagery.time-strip.view';
+  const START = Date.now();
+  const COUNT = 10;
+
+  // let resolveFunction;
+  let originalRouterPath;
+  let telemetryPromise;
+  let telemetryPromiseResolve;
+  let cleanupFirst;
+
+  let openmct;
+  let parent;
+  let child;
+  let historicalProvider;
+  let imageTelemetry = generateTelemetry(START - TEN_MINUTES, COUNT);
+  let imageryObject = {
+    identifier: {
+      namespace: '',
+      key: 'imageryId'
+    },
+    name: 'Example Imagery',
+    type: 'example.imagery',
+    location: 'parentId',
+    modified: 0,
+    persisted: 0,
+    configuration: {
+      layers: [
+        {
+          name: '16:9',
+          visible: true
+        }
+      ]
+    },
+    telemetry: {
+      values: [
+        {
+          name: 'Image',
+          key: 'url',
+          format: 'image',
+          layers: [
+            {
+              source: location.host + '/images/bg-splash.jpg',
+              name: '16:9'
+            }
+          ],
+          hints: {
+            image: 1,
+            priority: 3
+          },
+          source: 'url'
+        },
+        {
+          name: 'Image Thumbnail',
+          key: 'thumbnail-url',
+          format: 'thumbnail',
+          hints: {
+            thumbnail: 1,
+            priority: 3
+          },
+          source: 'url'
+        },
+        {
+          name: 'Name',
+          key: 'name',
+          source: 'name',
+          hints: {
+            priority: 0
+          }
+        },
+        {
+          name: 'Time',
+          key: 'utc',
+          format: 'utc',
+          hints: {
+            domain: 2,
+            priority: 1
+          },
+          source: 'utc'
+        },
+        {
+          name: 'Local Time',
+          key: 'local',
+          format: 'local-format',
+          hints: {
+            domain: 1,
+            priority: 2
+          },
+          source: 'local'
+        }
+      ]
+    }
+  };
+
+  // this setups up the app
+  beforeEach((done) => {
+    cleanupFirst = [];
+
+    openmct = createOpenMct();
 
-    let resolveFunction;
+    telemetryPromise = new Promise((resolve) => {
+      telemetryPromiseResolve = resolve;
+    });
+
+    historicalProvider = {
+      request: () => {
+        return Promise.resolve(imageTelemetry);
+      }
+    };
+    spyOn(openmct.telemetry, 'findRequestProvider').and.returnValue(historicalProvider);
+
+    spyOn(openmct.telemetry, 'request').and.callFake(() => {
+      telemetryPromiseResolve(imageTelemetry);
+
+      return telemetryPromise;
+    });
 
-    let openmct;
-    let appHolder;
-    let parent;
-    let child;
-    let imageTelemetry = generateTelemetry(START - TEN_MINUTES, COUNT);
-    let imageryObject = {
+    parent = document.createElement('div');
+    parent.style.width = '640px';
+    parent.style.height = '480px';
+
+    child = document.createElement('div');
+    child.style.width = '640px';
+    child.style.height = '480px';
+
+    parent.appendChild(child);
+    document.body.appendChild(parent);
+
+    spyOn(window, 'ResizeObserver').and.returnValue({
+      observe() {},
+      disconnect() {}
+    });
+
+    spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve(imageryObject));
+
+    originalRouterPath = openmct.router.path;
+
+    openmct.telemetry.addFormat({
+      key: 'thumbnail',
+      format: formatThumbnail
+    });
+
+    openmct.on('start', done);
+    openmct.startHeadless();
+  });
+
+  afterEach((done) => {
+    openmct.router.path = originalRouterPath;
+
+    // Needs to be in a timeout because plots use a bunch of setTimeouts, some of which can resolve during or after
+    // teardown, which causes problems
+    // This is hacky, we should find a better approach here.
+    setTimeout(() => {
+      //Cleanup code that needs to happen before dom elements start being destroyed
+      cleanupFirst.forEach((cleanup) => cleanup());
+      cleanupFirst = [];
+      document.body.removeChild(parent);
+
+      resetApplicationState(openmct).then(done).catch(done);
+    });
+  });
+
+  it('should provide an imagery time strip view when in a time strip', () => {
+    openmct.router.path = [
+      {
         identifier: {
-            namespace: "",
-            key: "imageryId"
+          key: 'test-timestrip',
+          namespace: ''
         },
-        name: "Example Imagery",
-        type: "example.imagery",
-        location: "parentId",
-        modified: 0,
-        persisted: 0,
-        telemetry: {
-            values: [
-                {
-                    "name": "Image",
-                    "key": "url",
-                    "format": "image",
-                    "hints": {
-                        "image": 1,
-                        "priority": 3
-                    },
-                    "source": "url",
-                    "relatedTelemetry": {
-                        "heading": {
-                            "comparisonFunction": comparisonFunction,
-                            "historical": {
-                                "telemetryObjectId": "heading",
-                                "valueKey": "value"
-                            }
-                        },
-                        "roll": {
-                            "comparisonFunction": comparisonFunction,
-                            "historical": {
-                                "telemetryObjectId": "roll",
-                                "valueKey": "value"
-                            }
-                        },
-                        "pitch": {
-                            "comparisonFunction": comparisonFunction,
-                            "historical": {
-                                "telemetryObjectId": "pitch",
-                                "valueKey": "value"
-                            }
-                        },
-                        "cameraPan": {
-                            "comparisonFunction": comparisonFunction,
-                            "historical": {
-                                "telemetryObjectId": "cameraPan",
-                                "valueKey": "value"
-                            }
-                        },
-                        "cameraTilt": {
-                            "comparisonFunction": comparisonFunction,
-                            "historical": {
-                                "telemetryObjectId": "cameraTilt",
-                                "valueKey": "value"
-                            }
-                        },
-                        "sunOrientation": {
-                            "comparisonFunction": comparisonFunction,
-                            "historical": {
-                                "telemetryObjectId": "sunOrientation",
-                                "valueKey": "value"
-                            }
-                        }
-                    }
-                },
-                {
-                    "name": "Name",
-                    "key": "name",
-                    "source": "name",
-                    "hints": {
-                        "priority": 0
-                    }
-                },
-                {
-                    "name": "Time",
-                    "key": "utc",
-                    "format": "utc",
-                    "hints": {
-                        "domain": 2,
-                        "priority": 1
-                    },
-                    "source": "utc"
-                },
-                {
-                    "name": "Local Time",
-                    "key": "local",
-                    "format": "local-format",
-                    "hints": {
-                        "domain": 1,
-                        "priority": 2
-                    },
-                    "source": "local"
-                }
-            ]
-        }
-    };
+        type: 'time-strip'
+      }
+    ];
 
-    // this setups up the app
-    beforeEach((done) => {
-        appHolder = document.createElement('div');
-        appHolder.style.width = '640px';
-        appHolder.style.height = '480px';
+    let applicableViews = openmct.objectViews.get(imageryObject, [
+      imageryObject,
+      {
+        identifier: {
+          key: 'test-timestrip',
+          namespace: ''
+        },
+        type: 'time-strip'
+      }
+    ]);
+    let imageryView = applicableViews.find(
+      (viewProvider) => viewProvider.key === imageryForTimeStripKey
+    );
+
+    expect(imageryView).toBeDefined();
+  });
+
+  it('should provide an imagery view only for imagery producing objects', () => {
+    let applicableViews = openmct.objectViews.get(imageryObject, [imageryObject]);
+    let imageryView = applicableViews.find((viewProvider) => viewProvider.key === imageryKey);
+
+    expect(imageryView).toBeDefined();
+  });
+
+  it('should not provide an imagery view when in a time strip', () => {
+    openmct.router.path = [
+      {
+        identifier: {
+          key: 'test-timestrip',
+          namespace: ''
+        },
+        type: 'time-strip'
+      }
+    ];
 
-        openmct = createOpenMct();
+    let applicableViews = openmct.objectViews.get(imageryObject, [
+      imageryObject,
+      {
+        identifier: {
+          key: 'test-timestrip',
+          namespace: ''
+        },
+        type: 'time-strip'
+      }
+    ]);
+    let imageryView = applicableViews.find((viewProvider) => viewProvider.key === imageryKey);
+
+    expect(imageryView).toBeUndefined();
+  });
+
+  it('should provide an imagery view when navigated to in the composition of a time strip', () => {
+    openmct.router.path = [imageryObject];
 
-        openmct.install(openmct.plugins.MyItems());
-        openmct.install(openmct.plugins.LocalTimeSystem());
-        openmct.install(openmct.plugins.UTCTimeSystem());
+    let applicableViews = openmct.objectViews.get(imageryObject, [
+      imageryObject,
+      {
+        identifier: {
+          key: 'test-timestrip',
+          namespace: ''
+        },
+        type: 'time-strip'
+      }
+    ]);
+    let imageryView = applicableViews.find((viewProvider) => viewProvider.key === imageryKey);
 
-        parent = document.createElement('div');
-        child = document.createElement('div');
-        parent.appendChild(child);
+    expect(imageryView).toBeDefined();
+  });
 
-        // document.querySelector('body').append(parent);
+  describe('imagery view', () => {
+    let applicableViews;
+    let imageryViewProvider;
+    let imageryView;
 
-        spyOn(window, 'ResizeObserver').and.returnValue({
-            observe() {},
-            disconnect() {}
-        });
+    beforeEach(() => {
+      openmct.time.timeSystem('utc', {
+        start: START - 5 * ONE_MINUTE,
+        end: START + 5 * ONE_MINUTE
+      });
 
-        spyOn(openmct.telemetry, 'request').and.returnValue(Promise.resolve([]));
-        spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve({}));
+      applicableViews = openmct.objectViews.get(imageryObject, [imageryObject]);
+      imageryViewProvider = applicableViews.find((viewProvider) => viewProvider.key === imageryKey);
+      imageryView = imageryViewProvider.view(imageryObject, [imageryObject]);
+      imageryView.show(child);
 
-        openmct.on('start', done);
-        openmct.start(appHolder);
+      imageryView._getInstance().$refs.ImageryContainer.forceShowThumbnails = true;
+
+      return nextTick();
     });
 
-    afterEach(() => {
-        openmct.time.timeSystem('utc', {
-            start: 0,
-            end: 1
-        });
+    it('on mount should show the the most recent image', async () => {
+      //Looks like we need nextTick here so that computed properties settle down
+      await nextTick();
+      await nextTick();
+      await nextTick();
+      const imageInfo = getImageInfo(parent);
+      expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 1].timeId)).not.toEqual(-1);
+    });
 
-        return resetApplicationState(openmct);
+    it('on mount should show any image layers', async () => {
+      //Looks like we need nextTick here so that computed properties settle down
+      await nextTick();
+      await nextTick();
+      const layerEls = parent.querySelectorAll('.js-layer-image');
+      expect(layerEls.length).toEqual(1);
     });
 
-    it("should provide an imagery view only for imagery producing objects", () => {
-        let applicableViews = openmct.objectViews.get(imageryObject, []);
-        let imageryView = applicableViews.find(
-            viewProvider => viewProvider.key === imageryKey
-        );
+    it('should show the clicked thumbnail as the main image', async () => {
+      //Looks like we need nextTick here so that computed properties settle down
+      await nextTick();
+      await nextTick();
+      const thumbnailUrl = formatThumbnail(imageTelemetry[5].url);
+      parent.querySelectorAll(`img[src='${thumbnailUrl}']`)[0].click();
+      await nextTick();
+      const imageInfo = getImageInfo(parent);
 
-        expect(imageryView).toBeDefined();
+      expect(imageInfo.url.indexOf(imageTelemetry[5].timeId)).not.toEqual(-1);
     });
 
-    describe("imagery view", () => {
-        let applicableViews;
-        let imageryViewProvider;
-        let imageryView;
+    xit('should show that an image is new', (done) => {
+      openmct.time.clock('local', {
+        start: -1000,
+        end: 1000
+      });
+
+      nextTick(() => {
+        // used in code, need to wait to the 500ms here too
+        setTimeout(() => {
+          const imageIsNew = isNew(parent);
+          expect(imageIsNew).toBeTrue();
+          done();
+        }, REFRESH_CSS_MS);
+      });
+    });
 
-        beforeEach(async () => {
-            let telemetryRequestResolve;
-            let telemetryRequestPromise = new Promise((resolve) => {
-                telemetryRequestResolve = resolve;
-            });
+    it('should show that an image is not new', async () => {
+      await nextTick();
+      await nextTick();
+      const target = formatThumbnail(imageTelemetry[4].url);
+      parent.querySelectorAll(`img[src='${target}']`)[0].click();
 
-            openmct.telemetry.request.and.callFake(() => {
-                telemetryRequestResolve(imageTelemetry);
+      await nextTick();
+      const imageIsNew = isNew(parent);
 
-                return telemetryRequestPromise;
-            });
+      expect(imageIsNew).toBeFalse();
+    });
 
-            applicableViews = openmct.objectViews.get(imageryObject, []);
-            imageryViewProvider = applicableViews.find(viewProvider => viewProvider.key === imageryKey);
-            imageryView = imageryViewProvider.view(imageryObject);
-            imageryView.show(child);
+    it('should navigate via arrow keys', async () => {
+      await nextTick();
+      await nextTick();
+      const keyOpts = {
+        element: parent.querySelector('.c-imagery'),
+        key: 'ArrowLeft',
+        keyCode: 37,
+        type: 'keyup'
+      };
+
+      simulateKeyEvent(keyOpts);
+
+      await nextTick();
+      const imageInfo = getImageInfo(parent);
+      expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 2].timeId)).not.toEqual(-1);
+    });
 
-            await telemetryRequestPromise;
+    it('should navigate via numerous arrow keys', async () => {
+      await nextTick();
+      await nextTick();
+      const element = parent.querySelector('.c-imagery');
+      const type = 'keyup';
+      const leftKeyOpts = {
+        element,
+        type,
+        key: 'ArrowLeft',
+        keyCode: 37
+      };
+      const rightKeyOpts = {
+        element,
+        type,
+        key: 'ArrowRight',
+        keyCode: 39
+      };
+
+      // left thrice
+      simulateKeyEvent(leftKeyOpts);
+      simulateKeyEvent(leftKeyOpts);
+      simulateKeyEvent(leftKeyOpts);
+      // right once
+      simulateKeyEvent(rightKeyOpts);
+
+      await nextTick();
+      const imageInfo = getImageInfo(parent);
+      expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 3].timeId)).not.toEqual(-1);
+    });
+    it('shows an auto scroll button when scroll to left', (done) => {
+      nextTick(() => {
+        // to mock what a scroll would do
+        imageryView._getInstance().$refs.ImageryContainer.autoScroll = false;
+        nextTick(() => {
+          let autoScrollButton = parent.querySelector('.c-imagery__auto-scroll-resume-button');
+          expect(autoScrollButton).toBeTruthy();
+          done();
         });
+      });
+    });
+    it('scrollToRight is called when clicking on auto scroll button', async () => {
+      await nextTick();
+      // use spyon to spy the scroll function
+      spyOn(imageryView._getInstance().$refs.ImageryContainer, 'scrollHandler');
+      imageryView._getInstance().$refs.ImageryContainer.autoScroll = false;
+      await nextTick();
+      parent.querySelector('.c-imagery__auto-scroll-resume-button').click();
+      expect(imageryView._getInstance().$refs.ImageryContainer.scrollHandler);
+    });
+    xit('should change the image zoom factor when using the zoom buttons', async () => {
+      await nextTick();
+      let imageSizeBefore;
+      let imageSizeAfter;
+
+      // test clicking the zoom in button
+      imageSizeBefore = parent
+        .querySelector('.c-imagery_main-image_background-image')
+        .getBoundingClientRect();
+      parent.querySelector('.t-btn-zoom-in').click();
+      await nextTick();
+      imageSizeAfter = parent
+        .querySelector('.c-imagery_main-image_background-image')
+        .getBoundingClientRect();
+      expect(imageSizeAfter.height).toBeGreaterThan(imageSizeBefore.height);
+      expect(imageSizeAfter.width).toBeGreaterThan(imageSizeBefore.width);
+      // test clicking the zoom out button
+      imageSizeBefore = parent
+        .querySelector('.c-imagery_main-image_background-image')
+        .getBoundingClientRect();
+      parent.querySelector('.t-btn-zoom-out').click();
+      await nextTick();
+      imageSizeAfter = parent
+        .querySelector('.c-imagery_main-image_background-image')
+        .getBoundingClientRect();
+      expect(imageSizeAfter.height).toBeLessThan(imageSizeBefore.height);
+      expect(imageSizeAfter.width).toBeLessThan(imageSizeBefore.width);
+    });
+    xit('should reset the zoom factor on the image when clicking the zoom button', async (done) => {
+      await nextTick();
+      // test clicking the zoom reset button
+      // zoom in to scale up the image dimensions
+      parent.querySelector('.t-btn-zoom-in').click();
+      await nextTick();
+      let imageSizeBefore = parent
+        .querySelector('.c-imagery_main-image_background-image')
+        .getBoundingClientRect();
+      await nextTick();
+      parent.querySelector('.t-btn-zoom-reset').click();
+      let imageSizeAfter = parent
+        .querySelector('.c-imagery_main-image_background-image')
+        .getBoundingClientRect();
+      expect(imageSizeAfter.height).toBeLessThan(imageSizeBefore.height);
+      expect(imageSizeAfter.width).toBeLessThan(imageSizeBefore.width);
+      done();
+    });
 
-        afterEach(() => {
-            openmct.time.stopClock();
-            openmct.router.removeListener('change:hash', resolveFunction);
+    it('should display the viewable area when zoom factor is greater than 1', async () => {
+      await nextTick();
+      await nextTick();
+      expect(parent.querySelectorAll('.c-thumb__viewable-area').length).toBe(0);
 
-            imageryView.destroy();
-        });
+      parent.querySelector('.t-btn-zoom-in').click();
+      await nextTick();
+      expect(parent.querySelectorAll('.c-thumb__viewable-area').length).toBe(1);
 
-        it("on mount should show the the most recent image", () => {
-            const imageInfo = getImageInfo(parent);
+      parent.querySelector('.t-btn-zoom-reset').click();
+      await nextTick();
+      expect(parent.querySelectorAll('.c-thumb__viewable-area').length).toBe(0);
+    });
 
-            expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 1].timeId)).not.toEqual(-1);
-        });
+    it('should reset the brightness and contrast when clicking the reset button', async () => {
+      const viewInstance = imageryView._getInstance();
+      await nextTick();
 
-        xit("should show the clicked thumbnail as the main image", (done) => {
-            const target = imageTelemetry[5].url;
-            parent.querySelectorAll(`img[src='${target}']`)[0].click();
-            Vue.nextTick(() => {
-                const imageInfo = getImageInfo(parent);
+      // Save the original brightness and contrast values
+      const origBrightness = viewInstance.$refs.ImageryContainer.filters.brightness;
+      const origContrast = viewInstance.$refs.ImageryContainer.filters.contrast;
 
-                expect(imageInfo.url.indexOf(imageTelemetry[5].timeId)).not.toEqual(-1);
-                done();
-            });
-        });
+      // Change them to something else (default: 100)
+      viewInstance.$refs.ImageryContainer.setFilters({
+        brightness: 200,
+        contrast: 200
+      });
+      await nextTick();
 
-        xit("should show that an image is new", (done) => {
-            Vue.nextTick(() => {
-                // used in code, need to wait to the 500ms here too
-                setTimeout(() => {
-                    const imageIsNew = isNew(parent);
-                    expect(imageIsNew).toBeTrue();
-                    done();
-                }, REFRESH_CSS_MS);
-            });
-        });
+      // Verify that the values actually changed
+      expect(viewInstance.$refs.ImageryContainer.filters.brightness).toBe(200);
+      expect(viewInstance.$refs.ImageryContainer.filters.contrast).toBe(200);
 
-        xit("should show that an image is not new", (done) => {
-            const target = imageTelemetry[2].url;
-            parent.querySelectorAll(`img[src='${target}']`)[0].click();
+      // Click the reset button
+      parent.querySelector('.t-btn-reset').click();
+      await nextTick();
 
-            Vue.nextTick(() => {
-                // used in code, need to wait to the 500ms here too
-                setTimeout(() => {
-                    const imageIsNew = isNew(parent);
+      // Verify that the values were reset
+      expect(viewInstance.$refs.ImageryContainer.filters.brightness).toBe(origBrightness);
+      expect(viewInstance.$refs.ImageryContainer.filters.contrast).toBe(origContrast);
+    });
+  });
+
+  describe('imagery time strip view', () => {
+    let applicableViews;
+    let imageryTimestripViewProvider;
+    let imageryTimeView;
+    let componentView;
+
+    beforeEach(() => {
+      openmct.time.timeSystem('utc', {
+        start: START - 5 * ONE_MINUTE,
+        end: START + 5 * ONE_MINUTE
+      });
+
+      const mockClock = jasmine.createSpyObj('clock', ['on', 'off', 'currentValue']);
+      mockClock.key = 'mockClock';
+      mockClock.currentValue.and.returnValue(1);
+
+      openmct.time.addClock(mockClock);
+      openmct.time.clock('mockClock', {
+        start: START - 5 * ONE_MINUTE,
+        end: START + 5 * ONE_MINUTE
+      });
+
+      openmct.router.path = [
+        {
+          identifier: {
+            key: 'test-timestrip',
+            namespace: ''
+          },
+          type: 'time-strip'
+        }
+      ];
+
+      applicableViews = openmct.objectViews.get(imageryObject, [
+        imageryObject,
+        {
+          identifier: {
+            key: 'test-timestrip',
+            namespace: ''
+          },
+          type: 'time-strip'
+        }
+      ]);
+      imageryTimestripViewProvider = applicableViews.find(
+        (viewProvider) => viewProvider.key === imageryForTimeStripKey
+      );
+      imageryTimeView = imageryTimestripViewProvider.view(imageryObject, [
+        imageryObject,
+        {
+          identifier: {
+            key: 'test-timestrip',
+            namespace: ''
+          },
+          type: 'time-strip'
+        }
+      ]);
+      imageryTimeView.show(child);
 
-                    expect(imageIsNew).toBeFalse();
-                    done();
-                }, REFRESH_CSS_MS);
-            });
-        });
+      componentView = imageryTimeView.getComponent().$refs.root;
+      spyOn(componentView.previewAction, 'invoke').and.callThrough();
 
-        xit("should navigate via arrow keys", (done) => {
-            let keyOpts = {
-                element: parent.querySelector('.c-imagery'),
-                key: 'ArrowLeft',
-                keyCode: 37,
-                type: 'keyup'
-            };
+      return nextTick();
+    });
 
-            simulateKeyEvent(keyOpts);
+    afterEach(() => {
+      openmct.time.setClock('local');
+    });
 
-            Vue.nextTick(() => {
-                const imageInfo = getImageInfo(parent);
+    it('on mount should show imagery within the given bounds', async () => {
+      await nextTick();
+      await nextTick();
+      const imageElements = parent.querySelectorAll('.c-imagery-tsv__image-wrapper');
+      expect(imageElements.length).toEqual(5);
+    });
 
-                expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 2].timeId)).not.toEqual(-1);
-                done();
-            });
-        });
+    it('should show the clicked thumbnail as the preview image', async () => {
+      await nextTick();
+      await nextTick();
+      const mouseDownEvent = createMouseEvent('mousedown');
+      let imageWrapper = parent.querySelectorAll(`.c-imagery-tsv__image-wrapper`);
+      imageWrapper[2].dispatchEvent(mouseDownEvent);
+      await nextTick();
+      const timestamp = imageWrapper[2].id.replace('wrapper-', '');
+      const mockInvoke = componentView.previewAction.invoke;
+      // Make sure the function was called
+      expect(mockInvoke).toHaveBeenCalled();
+
+      // Get the arguments of the first call
+      const firstArg = mockInvoke.calls.mostRecent().args[0];
+      const secondArg = mockInvoke.calls.mostRecent().args[1];
+
+      // Compare the first argument
+      expect(firstArg).toEqual([componentView.objectPath[0]]);
+
+      // Compare the "timestamp" property of the second argument
+      expect(secondArg.timestamp).toEqual(Number(timestamp));
+
+      // Compare the "objectPath" property of the second argument
+      expect(secondArg.objectPath).toEqual(componentView.objectPath);
+    });
 
-        it("should navigate via numerous arrow keys", (done) => {
-            let element = parent.querySelector('.c-imagery');
-            let type = 'keyup';
-            let leftKeyOpts = {
-                element,
-                type,
-                key: 'ArrowLeft',
-                keyCode: 37
-            };
-            let rightKeyOpts = {
-                element,
-                type,
-                key: 'ArrowRight',
-                keyCode: 39
-            };
-
-            // left thrice
-            simulateKeyEvent(leftKeyOpts);
-            simulateKeyEvent(leftKeyOpts);
-            simulateKeyEvent(leftKeyOpts);
-            // right once
-            simulateKeyEvent(rightKeyOpts);
-
-            Vue.nextTick(() => {
-                const imageInfo = getImageInfo(parent);
-
-                expect(imageInfo.url.indexOf(imageTelemetry[COUNT - 3].timeId)).not.toEqual(-1);
-                done();
-            });
-        });
-        it ('shows an auto scroll button when scroll to left', async () => {
-            // to mock what a scroll would do
-            imageryView._getInstance().$refs.ImageryLayout.autoScroll = false;
-            await Vue.nextTick();
-            let autoScrollButton = parent.querySelector('.c-imagery__auto-scroll-resume-button');
-            expect(autoScrollButton).toBeTruthy();
-        });
-        it ('scrollToRight is called when clicking on auto scroll button', async () => {
-            // use spyon to spy the scroll function
-            spyOn(imageryView._getInstance().$refs.ImageryLayout, 'scrollToRight');
-            imageryView._getInstance().$refs.ImageryLayout.autoScroll = false;
-            await Vue.nextTick();
-            parent.querySelector('.c-imagery__auto-scroll-resume-button').click();
-            expect(imageryView._getInstance().$refs.ImageryLayout.scrollToRight).toHaveBeenCalledWith('reset');
+    it('should remove images when clock advances', async () => {
+      openmct.time.tick(ONE_MINUTE * 2);
+      await nextTick();
+      await nextTick();
+      const imageElements = parent.querySelectorAll('.c-imagery-tsv__image-wrapper');
+      expect(imageElements.length).toEqual(4);
+    });
 
-        });
+    it('should remove images when start bounds shorten', async () => {
+      openmct.time.timeSystem('utc', {
+        start: START,
+        end: START + 5 * ONE_MINUTE
+      });
+      await nextTick();
+      await nextTick();
+      const imageElements = parent.querySelectorAll('.c-imagery-tsv__image-wrapper');
+      expect(imageElements.length).toEqual(1);
+    });
+
+    it('should remove images when end bounds shorten', async () => {
+      openmct.time.timeSystem('utc', {
+        start: START - 5 * ONE_MINUTE,
+        end: START - 2 * ONE_MINUTE
+      });
+      await nextTick();
+      await nextTick();
+      const imageElements = parent.querySelectorAll('.c-imagery-tsv__image-wrapper');
+      expect(imageElements.length).toEqual(4);
+    });
+
+    it('should remove images when both bounds shorten', async () => {
+      openmct.time.timeSystem('utc', {
+        start: START - 2 * ONE_MINUTE,
+        end: START + 2 * ONE_MINUTE
+      });
+      await nextTick();
+      await nextTick();
+      const imageElements = parent.querySelectorAll('.c-imagery-tsv__image-wrapper');
+      expect(imageElements.length).toEqual(3);
     });
+  });
 });
diff --git a/src/plugins/importFromJSONAction/ImportFromJSONAction.js b/src/plugins/importFromJSONAction/ImportFromJSONAction.js
new file mode 100644
index 00000000000..9003fbe5ebc
--- /dev/null
+++ b/src/plugins/importFromJSONAction/ImportFromJSONAction.js
@@ -0,0 +1,305 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { parseKeyString } from 'objectUtils';
+import { filter__proto__ } from 'utils/sanitization';
+import { v4 as uuid } from 'uuid';
+
+export default class ImportAsJSONAction {
+  constructor(openmct) {
+    this.name = 'Import from JSON';
+    this.key = 'import.JSON';
+    this.description = '';
+    this.cssClass = 'icon-import';
+    this.group = 'import';
+    this.priority = 2;
+
+    this.openmct = openmct;
+  }
+
+  // Public
+  /**
+   *
+   * @param {object} objectPath
+   * @returns {boolean}
+   */
+  appliesTo(objectPath) {
+    const domainObject = objectPath[0];
+    const locked = domainObject && domainObject.locked;
+    const persistable = this.openmct.objects.isPersistable(domainObject.identifier);
+    const TypeDefinition = this.openmct.types.get(domainObject.type);
+    const definition = TypeDefinition.definition;
+    const creatable = definition && definition.creatable;
+
+    if (locked || !persistable || !creatable) {
+      return false;
+    }
+
+    return domainObject !== undefined && this.openmct.composition.get(domainObject);
+  }
+  /**
+   *
+   * @param {object} objectPath
+   */
+  invoke(objectPath) {
+    this._showForm(objectPath[0]);
+  }
+  /**
+   *
+   * @param {object} object
+   * @param {object} changes
+   */
+
+  onSave(object, changes) {
+    const selectFile = changes.selectFile;
+    const jsonTree = selectFile.body;
+    const objectTree = JSON.parse(jsonTree, filter__proto__);
+
+    this._importObjectTree(object, objectTree);
+  }
+
+  /**
+   * @private
+   * @param {object} parent
+   * @param {object} tree
+   * @param {object} seen
+   * @param {Array} objectsToCreate tracks objects from import json that will need to be created
+   */
+  _deepInstantiate(parent, tree, seen, objectsToCreate) {
+    const objectIdentifiers = this._getObjectReferenceIds(parent);
+
+    if (objectIdentifiers.length) {
+      const parentId = this.openmct.objects.makeKeyString(parent.identifier);
+      seen.push(parentId);
+
+      for (const childId of objectIdentifiers) {
+        const keystring = this.openmct.objects.makeKeyString(childId);
+        if (!tree[keystring] || seen.includes(keystring)) {
+          continue;
+        }
+
+        const newModel = tree[keystring];
+        delete newModel.persisted;
+
+        objectsToCreate.push(newModel);
+
+        // make sure there weren't any errors saving
+        if (newModel) {
+          this._deepInstantiate(newModel, tree, seen, objectsToCreate);
+        }
+      }
+    }
+  }
+
+  /**
+   * @private
+   * @param {object} parent
+   * @returns [identifiers]
+   */
+  _getObjectReferenceIds(parent) {
+    let objectIdentifiers = [];
+    let itemObjectReferences = [];
+    const objectStyles = parent?.configuration?.objectStyles;
+    const parentComposition = this.openmct.composition.get(parent);
+
+    if (parentComposition) {
+      objectIdentifiers = Array.from(parent.composition);
+    }
+
+    //conditional object styles are not saved on the composition, so we need to check for them
+    if (objectStyles) {
+      const parentObjectReference = objectStyles.conditionSetIdentifier;
+
+      if (parentObjectReference) {
+        objectIdentifiers.push(parentObjectReference);
+      }
+
+      function hasConditionSetIdentifier(item) {
+        return Boolean(item.conditionSetIdentifier);
+      }
+
+      itemObjectReferences = Object.values(objectStyles)
+        .filter(hasConditionSetIdentifier)
+        .map((item) => item.conditionSetIdentifier);
+    }
+
+    return Array.from(new Set([...objectIdentifiers, ...itemObjectReferences]));
+  }
+  /**
+   * @private
+   * @param {object} tree
+   * @param {string} namespace
+   * @returns {object}
+   */
+  _generateNewIdentifiers(tree, namespace) {
+    // For each domain object in the file, generate new ID, replace in tree
+    Object.keys(tree.openmct).forEach((domainObjectId) => {
+      const newId = {
+        namespace,
+        key: uuid()
+      };
+
+      const oldId = parseKeyString(domainObjectId);
+
+      tree = this._rewriteId(oldId, newId, tree);
+    }, this);
+
+    return tree;
+  }
+  /**
+   * @private
+   * @param {object} domainObject
+   * @param {object} objTree
+   */
+  async _importObjectTree(domainObject, objTree) {
+    const objectsToCreate = [];
+    const namespace = domainObject.identifier.namespace;
+    const tree = this._generateNewIdentifiers(objTree, namespace);
+    const rootId = tree.rootId;
+
+    const rootObj = tree.openmct[rootId];
+    delete rootObj.persisted;
+    objectsToCreate.push(rootObj);
+    if (this.openmct.composition.checkPolicy(domainObject, rootObj)) {
+      this._deepInstantiate(rootObj, tree.openmct, [], objectsToCreate);
+
+      try {
+        await Promise.all(objectsToCreate.map(this._instantiate, this));
+      } catch (error) {
+        this.openmct.notifications.error('Error saving objects');
+
+        throw error;
+      }
+
+      const compositionCollection = this.openmct.composition.get(domainObject);
+      let domainObjectKeyString = this.openmct.objects.makeKeyString(domainObject.identifier);
+      this.openmct.objects.mutate(rootObj, 'location', domainObjectKeyString);
+      compositionCollection.add(rootObj);
+    } else {
+      const dialog = this.openmct.overlays.dialog({
+        iconClass: 'alert',
+        message: "We're sorry, but you cannot import that object type into this object.",
+        buttons: [
+          {
+            label: 'Ok',
+            emphasis: true,
+            callback: function () {
+              dialog.dismiss();
+            }
+          }
+        ]
+      });
+    }
+  }
+  /**
+   * @private
+   * @param {object} model
+   * @returns {object}
+   */
+  _instantiate(model) {
+    return this.openmct.objects.save(model);
+  }
+  /**
+   * @private
+   * @param {object} oldId
+   * @param {object} newId
+   * @param {object} tree
+   * @returns {object}
+   */
+  _rewriteId(oldId, newId, tree) {
+    let newIdKeyString = this.openmct.objects.makeKeyString(newId);
+    let oldIdKeyString = this.openmct.objects.makeKeyString(oldId);
+    tree = JSON.stringify(tree).replace(new RegExp(oldIdKeyString, 'g'), newIdKeyString);
+
+    return JSON.parse(tree, (key, value) => {
+      if (
+        value !== undefined &&
+        value !== null &&
+        Object.prototype.hasOwnProperty.call(value, 'key') &&
+        Object.prototype.hasOwnProperty.call(value, 'namespace') &&
+        value.key === oldId.key &&
+        value.namespace === oldId.namespace
+      ) {
+        return newId;
+      } else {
+        return value;
+      }
+    });
+  }
+  /**
+   * @private
+   * @param {object} domainObject
+   */
+  _showForm(domainObject) {
+    const formStructure = {
+      title: this.name,
+      sections: [
+        {
+          rows: [
+            {
+              name: 'Select File',
+              key: 'selectFile',
+              control: 'file-input',
+              required: true,
+              text: 'Select File...',
+              validate: this._validateJSON,
+              type: 'application/json'
+            }
+          ]
+        }
+      ]
+    };
+
+    this.openmct.forms.showForm(formStructure).then((changes) => {
+      let onSave = this.onSave.bind(this);
+      onSave(domainObject, changes);
+    });
+  }
+  /**
+   * @private
+   * @param {object} data
+   * @returns {boolean}
+   */
+  _validateJSON(data) {
+    const value = data.value;
+    const objectTree = value && value.body;
+    let json;
+    let success = true;
+    try {
+      json = JSON.parse(objectTree);
+    } catch (e) {
+      success = false;
+    }
+
+    if (success && (!json.openmct || !json.rootId)) {
+      success = false;
+    }
+
+    if (!success) {
+      this.openmct.notifications.error(
+        'Invalid File: The selected file was either invalid JSON or was not formatted properly for import into Open MCT.'
+      );
+    }
+
+    return success;
+  }
+}
diff --git a/src/plugins/importFromJSONAction/ImportFromJSONActionSpec.js b/src/plugins/importFromJSONAction/ImportFromJSONActionSpec.js
new file mode 100644
index 00000000000..e9995ea6bf1
--- /dev/null
+++ b/src/plugins/importFromJSONAction/ImportFromJSONActionSpec.js
@@ -0,0 +1,145 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+
+let openmct;
+let importFromJSONAction;
+let folderObject;
+let unObserve;
+
+describe('The import JSON action', function () {
+  beforeEach((done) => {
+    openmct = createOpenMct();
+
+    openmct.on('start', done);
+    openmct.startHeadless();
+
+    importFromJSONAction = openmct.actions.getAction('import.JSON');
+    folderObject = {
+      composition: [],
+      name: 'Unnamed Folder',
+      type: 'folder',
+      location: '9f6c9dae-51c3-401d-92f1-c812de942922',
+      modified: 1637021471624,
+      persisted: 1637021471624,
+      id: '84438cda-a071-48d1-b9bf-d77bd53e59ba',
+      identifier: {
+        namespace: '',
+        key: '84438cda-a071-48d1-b9bf-d77bd53e59ba'
+      }
+    };
+  });
+
+  afterEach(() => {
+    importFromJSONAction = undefined;
+    folderObject = undefined;
+    unObserve?.();
+    unObserve = undefined;
+
+    return resetApplicationState(openmct);
+  });
+
+  it('has import as JSON action', () => {
+    expect(importFromJSONAction).toBeDefined();
+  });
+
+  it('applies to return true for objects with composition', function () {
+    const objectPath = [folderObject];
+
+    spyOn(openmct.composition, 'get').and.returnValue(true);
+
+    expect(importFromJSONAction.appliesTo(objectPath)).toBe(true);
+  });
+
+  it('applies to return false for objects without composition', function () {
+    const domainObject = {
+      telemetry: {
+        period: 10,
+        amplitude: 1,
+        offset: 0,
+        dataRateInHz: 1,
+        phase: 0,
+        randomness: 0
+      },
+      name: 'Unnamed Sine Wave Generator',
+      type: 'generator',
+      location: '84438cda-a071-48d1-b9bf-d77bd53e59ba',
+      modified: 1637021471172,
+      identifier: {
+        namespace: '',
+        key: 'c102b6e1-3c81-4618-926a-56cc310925f6'
+      },
+      persisted: 1637021471172
+    };
+
+    const objectPath = [domainObject];
+
+    spyOn(openmct.types, 'get').and.returnValue({});
+    spyOn(openmct.composition, 'get').and.returnValue(false);
+
+    expect(importFromJSONAction.appliesTo(objectPath)).toBe(false);
+  });
+
+  it('calls showForm on invoke ', function () {
+    const objectPath = [folderObject];
+
+    spyOn(openmct.forms, 'showForm').and.returnValue(Promise.resolve({}));
+    spyOn(importFromJSONAction, 'onSave').and.returnValue(Promise.resolve({}));
+    importFromJSONAction.invoke(objectPath);
+
+    expect(openmct.forms.showForm).toHaveBeenCalled();
+  });
+
+  it('protects against prototype pollution', (done) => {
+    spyOn(console, 'warn');
+    spyOn(openmct.forms, 'showForm').and.callFake(returnResponseWithPrototypePollution);
+
+    unObserve = openmct.objects.observe(folderObject, '*', callback);
+
+    importFromJSONAction.invoke([folderObject]);
+
+    function callback(newObject) {
+      const hasPollutedProto =
+        Object.prototype.hasOwnProperty.call(newObject, '__proto__') ||
+        Object.prototype.hasOwnProperty.call(Object.getPrototypeOf(newObject), 'toString');
+
+      // warning from openmct.objects.get
+      expect(console.warn).not.toHaveBeenCalled();
+      expect(hasPollutedProto).toBeFalse();
+
+      done();
+    }
+
+    function returnResponseWithPrototypePollution() {
+      const pollutedResponse = {
+        selectFile: {
+          name: 'imported object',
+          // eslint-disable-next-line prettier/prettier
+          body: "{\"openmct\":{\"c28d230d-e909-4a3e-9840-d9ef469dda70\":{\"identifier\":{\"key\":\"c28d230d-e909-4a3e-9840-d9ef469dda70\",\"namespace\":\"\"},\"name\":\"Unnamed Overlay Plot\",\"type\":\"telemetry.plot.overlay\",\"composition\":[],\"configuration\":{\"series\":[]},\"modified\":1695837546833,\"location\":\"mine\",\"created\":1695837546833,\"persisted\":1695837546833,\"__proto__\":{\"toString\":\"foobar\"}}},\"rootId\":\"c28d230d-e909-4a3e-9840-d9ef469dda70\"}"
+        }
+      };
+
+      return Promise.resolve(pollutedResponse);
+    }
+  });
+});
diff --git a/src/plugins/importFromJSONAction/plugin.js b/src/plugins/importFromJSONAction/plugin.js
new file mode 100644
index 00000000000..4694c8371c3
--- /dev/null
+++ b/src/plugins/importFromJSONAction/plugin.js
@@ -0,0 +1,28 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import ImportFromJSONAction from './ImportFromJSONAction.js';
+
+export default function () {
+  return function (openmct) {
+    openmct.actions.register(new ImportFromJSONAction(openmct));
+  };
+}
diff --git a/src/plugins/inspectorDataVisualization/DataVisualization.vue b/src/plugins/inspectorDataVisualization/DataVisualization.vue
new file mode 100644
index 00000000000..161e34e5dbd
--- /dev/null
+++ b/src/plugins/inspectorDataVisualization/DataVisualization.vue
@@ -0,0 +1,190 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div
+    class="c-data-visualization-inspect-properties c-inspector__data-pivot c-data-visualization-inspector__flex-column"
+  >
+    <div class="c-inspect-properties">
+      <div class="c-inspect-properties__header">Data Visualization</div>
+    </div>
+
+    <div v-if="isLoading" class="c-inspector__data-pivot-placeholder">Loading...</div>
+
+    <div v-else-if="hasDataRanges">
+      <div
+        v-if="selectedDataRange !== undefined && hasDescription"
+        class="c-inspector__data-pivot-coordinates-wrapper"
+      >
+        <span
+          class="c-tree__item__type-icon c-object-label__type-icon"
+          :class="description.icon"
+        ></span>
+        <span class="c-inspector__data-pivot-coordinates">
+          {{ description.text }}
+        </span>
+      </div>
+
+      <select v-model="selectedDataRangeIndex" class="c-inspector__data-pivot-range-selector">
+        <option
+          v-for="(dataRange, index) in descendingDataRanges"
+          :key="index"
+          :value="index"
+          :selected="selectedDataRangeIndex === index"
+        >
+          {{ displayDataRange(dataRange) }}
+        </option>
+      </select>
+    </div>
+
+    <div
+      v-else-if="dataRanges && dataRanges.length === 0"
+      class="c-inspector__data-pivot-placeholder"
+    >
+      No data for the current {{ description.name }}
+    </div>
+
+    <div v-else-if="hasPlaceholderText" class="c-inspector__data-pivot-placeholder">
+      {{ placeholderText }}
+    </div>
+
+    <template v-if="selectedBounds !== undefined">
+      <NumericDataInspectorView
+        :bounds="selectedBounds"
+        :telemetry-keys="plotTelemetryKeys"
+        :no-numeric-data-text="noNumericDataText"
+      />
+      <ImageryInspectorView
+        v-if="hasImagery"
+        :bounds="selectedBounds"
+        :telemetry-keys="imageryTelemetryKeys"
+      />
+    </template>
+  </div>
+</template>
+<script>
+import ImageryInspectorView from './ImageryInspectorView.vue';
+import NumericDataInspectorView from './NumericDataInspectorView.vue';
+
+const TIMESTAMP_VIEW_BUFFER = 30 * 1000;
+const timestampBufferText = `${TIMESTAMP_VIEW_BUFFER / 1000} seconds`;
+
+export default {
+  components: {
+    NumericDataInspectorView,
+    ImageryInspectorView
+  },
+  inject: ['timeFormatter', 'placeholderText', 'plotOptions', 'imageryOptions'],
+  props: {
+    description: {
+      type: Object,
+      default: () => {}
+    },
+    dataRanges: {
+      type: Array,
+      default: () => undefined
+    },
+    plotTelemetryKeys: {
+      type: Array,
+      default: () => []
+    },
+    isLoading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      selectedDataRangeIndex: 0
+    };
+  },
+  computed: {
+    hasPlaceholderText() {
+      return this.placeholderText.length > 0;
+    },
+    descendingDataRanges() {
+      return this.dataRanges?.slice().reverse();
+    },
+    hasDescription() {
+      return this.description?.text?.length > 0;
+    },
+    hasDataRanges() {
+      return this.dataRanges?.length > 0;
+    },
+    selectedDataRange() {
+      if (!this.hasDataRanges || this.selectedDataRangeIndex === undefined) {
+        return;
+      }
+
+      return this.descendingDataRanges[this.selectedDataRangeIndex];
+    },
+    selectedBounds() {
+      if (this.selectedDataRange === undefined) {
+        return;
+      }
+
+      const { start, end } = this.selectedDataRange.bounds;
+
+      if (start === end) {
+        return {
+          start: start - TIMESTAMP_VIEW_BUFFER,
+          end: end + TIMESTAMP_VIEW_BUFFER
+        };
+      }
+
+      return this.selectedDataRange.bounds;
+    },
+    imageryTelemetryKeys() {
+      return this.imageryOptions?.telemetryKeys;
+    },
+    hasImagery() {
+      return this.imageryTelemetryKeys?.length;
+    },
+    noNumericDataText() {
+      return this.plotOptions?.noNumericDataText;
+    }
+  },
+  methods: {
+    shortDate(date) {
+      return date.slice(0, date.indexOf('.')).replace('T', ' ');
+    },
+    displayDataRange(dataRange) {
+      const startTime = dataRange.bounds.start;
+      const endTime = dataRange.bounds.end;
+      if (startTime === endTime) {
+        return `${this.shortDate(this.timeFormatter.format(startTime))} +/- ${timestampBufferText}`;
+      }
+      return `${this.shortDate(this.timeFormatter.format(startTime))} - ${this.shortDate(
+        this.timeFormatter.format(endTime)
+      )}`;
+    },
+    isSelectedDataRange(dataRange, index) {
+      const selectedDataRange = this.descendingDataRanges[index];
+
+      return (
+        dataRange.bounds.start === selectedDataRange.bounds.start &&
+        dataRange.bounds.end === selectedDataRange.bounds.end
+      );
+    }
+  }
+};
+</script>
diff --git a/src/plugins/inspectorDataVisualization/ImageryInspectorView.vue b/src/plugins/inspectorDataVisualization/ImageryInspectorView.vue
new file mode 100644
index 00000000000..219ba7c736b
--- /dev/null
+++ b/src/plugins/inspectorDataVisualization/ImageryInspectorView.vue
@@ -0,0 +1,127 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div
+    v-if="camerasWithImagesInBounds.length > 0"
+    class="c-inspect-properties c-inspector__imagery-view"
+  >
+    <div class="c-inspect-properties__header">Imagery View</div>
+    <div
+      v-for="(camera, index) in camerasWithImagesInBounds"
+      :key="index"
+      class="c-imagery-view__camera-image-set"
+    >
+      <TelemetryFrame :bounds="bounds" :telemetry-object="camera">
+        <div class="c-imagery-view__camera-image-list">
+          <span
+            v-for="(cameraImage, imageIndex) in camera.imagesInBounds"
+            :key="imageIndex"
+            class="c-imagery-view__camera-image"
+          >
+            <img :src="cameraImage.value" />
+            <span class="c-imagery-view__camera-image-timestamp">
+              {{ cameraImage.timestamp }}
+            </span>
+          </span>
+        </div>
+      </TelemetryFrame>
+    </div>
+  </div>
+</template>
+
+<script>
+import TelemetryFrame from './TelemetryFrame.vue';
+
+export default {
+  components: {
+    TelemetryFrame
+  },
+  inject: ['openmct'],
+  props: {
+    bounds: {
+      type: Object,
+      default: () => {}
+    },
+    telemetryKeys: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      camerasWithImagesInBounds: []
+    };
+  },
+  watch: {
+    bounds() {
+      this.getCameraImagesInBounds();
+    }
+  },
+  mounted() {
+    this.getCameraImagesInBounds();
+  },
+  methods: {
+    async getCameraImagesInBounds() {
+      this.camerasWithImagesInBounds = [];
+      this.cameraImagesList = [];
+      const { start, end } = this.bounds;
+      const cameraObjectPromises = [];
+      this.telemetryKeys.forEach((telemetryKey) => {
+        const cameraPromise = this.openmct.objects.get(telemetryKey);
+        cameraObjectPromises.push(cameraPromise);
+      });
+      const cameraObjects = await Promise.all(cameraObjectPromises);
+
+      const cameraTelemetryPromises = [];
+      cameraObjects.forEach((cameraObject) => {
+        const cameraTelemetryPromise = this.openmct.telemetry.request(cameraObject, {
+          start,
+          end
+        });
+        cameraTelemetryPromises.push(cameraTelemetryPromise);
+      });
+      const cameraImages = await Promise.all(cameraTelemetryPromises);
+
+      cameraObjects.forEach((cameraObject, index) => {
+        cameraObject.images = cameraImages[index];
+      });
+
+      cameraObjects.forEach((cameraObject) => {
+        if (cameraObject.images.length > 0) {
+          const imagesInBounds = cameraObject.images.filter((imageDetails) => {
+            if (!imageDetails.timestamp) {
+              return false;
+            }
+            const timestamp = Date.parse(imageDetails.timestamp);
+            return timestamp >= start && timestamp <= end;
+          });
+          if (imagesInBounds.length > 0) {
+            cameraObject.imagesInBounds = imagesInBounds;
+            this.camerasWithImagesInBounds.push(cameraObject);
+          }
+        }
+      });
+    }
+  }
+};
+</script>
diff --git a/src/plugins/inspectorDataVisualization/InspectorDataVisualizationComponent.vue b/src/plugins/inspectorDataVisualization/InspectorDataVisualizationComponent.vue
new file mode 100644
index 00000000000..67bc870101d
--- /dev/null
+++ b/src/plugins/inspectorDataVisualization/InspectorDataVisualizationComponent.vue
@@ -0,0 +1,65 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div
+    class="c-inspector__properties c-data-visualization-inspector__properties c-data-visualization-inspector__flex-column"
+  >
+    <DataVisualization
+      :data-ranges="dataRanges"
+      :plot-telemetry-keys="plotTelemetryKeys"
+      :description="description"
+      :is-loading="isLoading"
+    />
+  </div>
+</template>
+
+<script>
+import DataVisualization from './DataVisualization.vue';
+
+export default {
+  components: {
+    DataVisualization
+  },
+  inject: ['openmct', 'domainObject'],
+  props: {
+    context: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    dataRanges() {
+      return this.context.dataRanges;
+    },
+    plotTelemetryKeys() {
+      return this.context.telemetryKeys;
+    },
+    description() {
+      return this.context.description;
+    },
+    isLoading() {
+      return Boolean(this.context.loading);
+    }
+  }
+};
+</script>
diff --git a/src/plugins/inspectorDataVisualization/InspectorDataVisualizationViewProvider.js b/src/plugins/inspectorDataVisualization/InspectorDataVisualizationViewProvider.js
new file mode 100644
index 00000000000..b24d6c56d7c
--- /dev/null
+++ b/src/plugins/inspectorDataVisualization/InspectorDataVisualizationViewProvider.js
@@ -0,0 +1,95 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
+
+import InspectorDataVisualizationComponent from './InspectorDataVisualizationComponent.vue';
+
+export default function InspectorDataVisualizationViewProvider(openmct, configuration) {
+  const {
+    type = 'mmgis',
+    name = 'Data Visualization',
+    placeholderText = '',
+    plotOptions,
+    imageryOptions
+  } = configuration;
+
+  return {
+    key: 'inspectorDataVisualizationView',
+    name,
+
+    canView(selection) {
+      const domainObject = selection?.[0]?.[0]?.context?.item;
+
+      return domainObject?.type === type;
+    },
+
+    view(selection) {
+      let _destroy = null;
+
+      const context = selection[0][0].context;
+      const domainObject = context.item;
+      const dataVisualizationContext = context?.dataVisualization ?? {};
+      const timeFormatter =
+        openmct.telemetry.getFormatter('iso') || openmct.telemetry.getFormatter('utc');
+
+      return {
+        show(element) {
+          const { destroy } = mount(
+            {
+              components: {
+                InspectorDataVisualization: InspectorDataVisualizationComponent
+              },
+              provide: {
+                openmct,
+                domainObject,
+                timeFormatter,
+                placeholderText,
+                plotOptions,
+                imageryOptions
+              },
+              data() {
+                return {
+                  context: dataVisualizationContext
+                };
+              },
+              template: `<InspectorDataVisualization :context="context" />`
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+        },
+        destroy() {
+          if (_destroy) {
+            _destroy();
+          }
+        },
+        priority() {
+          return openmct.priority.HIGH;
+        }
+      };
+    }
+  };
+}
diff --git a/src/plugins/inspectorDataVisualization/NumericDataInspectorView.vue b/src/plugins/inspectorDataVisualization/NumericDataInspectorView.vue
new file mode 100644
index 00000000000..049e5fbb6ab
--- /dev/null
+++ b/src/plugins/inspectorDataVisualization/NumericDataInspectorView.vue
@@ -0,0 +1,179 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-inspector__numeric-data">
+    <div class="c-inspect-properties">
+      <div class="c-inspect-properties__header">Numeric Data</div>
+    </div>
+    <div ref="numericDataView"></div>
+
+    <div v-if="!hasNumericData">
+      {{ noNumericDataText }}
+    </div>
+  </div>
+</template>
+<script>
+import mount from 'utils/mount';
+
+import VisibilityObserver from '../../utils/visibility/VisibilityObserver.js';
+import Plot from '../plot/PlotView.vue';
+import TelemetryFrame from './TelemetryFrame.vue';
+
+export default {
+  inject: ['openmct', 'domainObject', 'timeFormatter'],
+  props: {
+    bounds: {
+      type: Object,
+      required: true
+    },
+    telemetryKeys: {
+      type: Array,
+      default: () => []
+    },
+    noNumericDataText: {
+      type: String,
+      default: 'No Numeric Data to display.'
+    }
+  },
+  data() {
+    return {
+      plotObjects: []
+    };
+  },
+  computed: {
+    hasNumericData() {
+      return this.plotObjects.length > 0;
+    }
+  },
+  watch: {
+    telemetryKeys: {
+      handler() {
+        this.renderNumericData();
+      },
+      deep: true
+    },
+    bounds: {
+      handler() {
+        this.renderNumericData();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.renderNumericData();
+  },
+  beforeUnmount() {
+    this.clearPlots();
+  },
+  methods: {
+    renderNumericData() {
+      this.clearPlots();
+
+      this.unregisterTimeContextList = [];
+      this.componentsList = [];
+      this.elementsList = [];
+      this.visibilityObservers = [];
+
+      this.telemetryKeys.forEach(async (telemetryKey) => {
+        const plotObject = await this.openmct.objects.get(telemetryKey);
+
+        this.plotObjects.push(plotObject);
+        this.unregisterTimeContextList.push(this.setIndependentTimeContextForComponent(plotObject));
+        this.renderPlot(plotObject);
+      });
+    },
+    setIndependentTimeContextForComponent(plotObject) {
+      const keyString = this.openmct.objects.makeKeyString(plotObject.identifier);
+
+      // get an independent time context for object
+      this.openmct.time.getContextForView([plotObject]);
+      // set the time context of the object to the selected time range
+      return this.openmct.time.addIndependentContext(keyString, this.bounds);
+    },
+    renderPlot(plotObject) {
+      const wrapper = document.createElement('div');
+      const visibilityObserver = new VisibilityObserver(wrapper, this.openmct.element);
+
+      const { destroy } = mount(
+        {
+          components: {
+            TelemetryFrame,
+            Plot
+          },
+          provide: {
+            openmct: this.openmct,
+            path: [plotObject],
+            renderWhenVisible: visibilityObserver.renderWhenVisible
+          },
+          data() {
+            return {
+              plotObject,
+              bounds: this.bounds
+            };
+          },
+          template: `<TelemetryFrame
+                      :bounds="bounds"
+                      :telemetry-object="plotObject"
+                    >
+                      <Plot />
+                    </TelemetryFrame>`
+        },
+        {
+          app: this.openmct.app,
+          element: wrapper
+        }
+      );
+
+      this.componentsList.push(destroy);
+      this.elementsList.push(wrapper);
+      this.visibilityObservers.push(visibilityObserver);
+      this.$refs.numericDataView.append(wrapper);
+    },
+    clearPlots() {
+      if (this.componentsList?.length) {
+        this.componentsList.forEach((destroy) => destroy());
+        delete this.componentsList;
+      }
+
+      if (this.elementsList?.length) {
+        this.elementsList.forEach((element) => element.remove());
+        delete this.elementsList;
+      }
+
+      if (this.visibilityObservers?.length) {
+        this.visibilityObservers.forEach((visibilityObserver) => visibilityObserver.destroy());
+        delete this.visibilityObservers;
+      }
+
+      if (this.plotObjects?.length) {
+        this.plotObjects = [];
+      }
+
+      if (this.unregisterTimeContextList?.length) {
+        this.unregisterTimeContextList.forEach((unregisterTimeContext) => unregisterTimeContext());
+        delete this.unregisterTimeContextList;
+      }
+    }
+  }
+};
+</script>
diff --git a/src/plugins/inspectorDataVisualization/TelemetryFrame.vue b/src/plugins/inspectorDataVisualization/TelemetryFrame.vue
new file mode 100644
index 00000000000..da3a230647b
--- /dev/null
+++ b/src/plugins/inspectorDataVisualization/TelemetryFrame.vue
@@ -0,0 +1,123 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-telemetry-frame">
+    <div class="c-telemetry-frame__title-bar">
+      <span class="c-telemetry-frame__title">
+        <span class="c-telemetry-frame__title-icon icon-telemetry"></span>
+        <span class="title-text">{{ telemetryObject.name }}</span>
+      </span>
+      <button
+        ref="menu-button"
+        title="More actions"
+        aria-label="More actions"
+        class="l-browse-bar__actions c-icon-button icon-3-dots"
+        @click="toggleMenu"
+      ></button>
+    </div>
+    <div
+      v-if="showMenu"
+      class="c-menu c-menu__inspector-telemetry-options"
+      aria-label="Telemetry Options"
+      @blur="showMenu = false"
+    >
+      <ul>
+        <li
+          v-if="telemetryObject.type === 'yamcs.telemetry'"
+          role="menuitem"
+          title="View Full Screen"
+          class="icon-eye-open"
+          @click="previewTelemetry"
+        >
+          View Full Screen
+        </li>
+        <li
+          role="menuitem"
+          title="Open in a new browser tab"
+          class="icon-new-window"
+          @click="openInNewTab"
+        >
+          Open In New Tab
+        </li>
+      </ul>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  inject: ['openmct'],
+  provide() {
+    return {
+      domainObject: this.telemetryObject
+    };
+  },
+  props: {
+    bounds: {
+      type: Object,
+      default: () => {}
+    },
+    telemetryObject: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      showMenu: false
+    };
+  },
+  methods: {
+    toggleMenu() {
+      this.showMenu = !this.showMenu;
+    },
+    async getTelemetryPath() {
+      const telemetryObjectKeyString = this.openmct.objects.makeKeyString(
+        this.telemetryObject.identifier
+      );
+
+      const telemetryPath = await this.openmct.objects.getOriginalPath(telemetryObjectKeyString);
+      return telemetryPath;
+    },
+    async openInNewTab() {
+      const telemetryPath = await this.getTelemetryPath();
+      const sourceTelemObject = telemetryPath[0];
+      const timeBounds = this.bounds;
+      const urlParams = {
+        'tc.startBound': timeBounds?.start,
+        'tc.endBound': timeBounds?.end,
+        'tc.mode': 'fixed'
+      };
+      const newTabAction = this.openmct.actions.getAction('newTab');
+      newTabAction.invoke([sourceTelemObject], urlParams);
+      this.showMenu = false;
+    },
+    previewTelemetry() {
+      const previewAction = this.openmct.actions.getAction('preview');
+      previewAction.invoke([this.telemetryObject]);
+      this.showMenu = false;
+    }
+  }
+};
+</script>
diff --git a/src/plugins/inspectorDataVisualization/inspector-data-visualization.scss b/src/plugins/inspectorDataVisualization/inspector-data-visualization.scss
new file mode 100644
index 00000000000..ccd2ea1a18b
--- /dev/null
+++ b/src/plugins/inspectorDataVisualization/inspector-data-visualization.scss
@@ -0,0 +1,128 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+ //InspectorDataVisualizationComponent
+ .c-data-visualization-inspector__flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.c-data-visualization-inspector__flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.c-data-visualization-inspect-properties + .c-data-visualization-inspect-properties {
+  margin-top: 10px;
+}
+
+// DataVisualization
+.c-inspector__data-pivot-placeholder {
+  margin-top: 8px;
+}
+
+.c-inspector__data-pivot-coordinates-wrapper {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.c-inspector__data-pivot-coordinates {
+  margin-left: 6px;
+  text-transform: capitalize;
+}
+
+.c-inspector__data-pivot-range-selector {
+  margin: 10px auto;
+  height: 25px;
+  max-width: 100%;
+}
+
+.c-inspector__imagery-view {
+  margin-top: 10px;
+}
+
+.c-imagery-view__camera-image-set {
+  grid-column: 1/3;
+}
+
+.c-imagery-view__camera-image-list {
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 10px;
+  grid-auto-columns: min-content;
+  overflow: auto;
+  white-space: nowrap;
+  margin-top: 5px;
+}
+
+.c-imagery-view__camera-image {
+  display: inline-block;
+}
+
+.c-imagery-view__camera-image img {
+  width: 70px;
+  height: 70px;
+}
+
+.c-imagery-view__camera-image-timestamp {
+  white-space: break-spaces;
+}
+
+// Telemetry Frame
+.c-telemetry-frame {
+  margin: 8px 0px;
+
+  &__title-bar {
+    display: flex;
+    align-items: center;
+    margin: 6px 0px;
+  }
+  
+  &__title {
+    flex: 1;
+    font-size: 1.2em;
+  }
+  
+  &__title-icon {
+    margin-right: 4px;
+  }
+}
+
+.c-telemetry-frame .c-menu {
+  position: absolute;
+  right: 0px;
+}
+
+.c-inspector__data-pivot .c-plot {
+  position: relative;
+  min-height: 150px;
+  max-height: 200px;
+}
+
+.c-inspector__data-pivot .c-plot .c-plot--stacked-container {
+  min-height: 150px;
+}
+
+.c-inspector__numeric-data .c-inspect-properties__header {
+  margin-bottom: 10px;
+}
diff --git a/src/plugins/inspectorDataVisualization/plugin.js b/src/plugins/inspectorDataVisualization/plugin.js
new file mode 100644
index 00000000000..e276ff8b508
--- /dev/null
+++ b/src/plugins/inspectorDataVisualization/plugin.js
@@ -0,0 +1,31 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import InspectorDataVisualizationViewProvider from './InspectorDataVisualizationViewProvider.js';
+
+export default function (options) {
+  return function (openmct) {
+    openmct.inspectorViews.addProvider(
+      new InspectorDataVisualizationViewProvider(openmct, options)
+    );
+  };
+}
diff --git a/src/plugins/inspectorViews/annotations/AnnotationsInspectorView.vue b/src/plugins/inspectorViews/annotations/AnnotationsInspectorView.vue
new file mode 100644
index 00000000000..5918298083a
--- /dev/null
+++ b/src/plugins/inspectorViews/annotations/AnnotationsInspectorView.vue
@@ -0,0 +1,223 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-inspector__properties c-inspect-properties" aria-label="Tags Inspector">
+    <div class="c-inspect-properties__header">Tags</div>
+    <div v-if="shouldShowTagsEditor" class="c-inspect-properties__section">
+      <TagEditor
+        :targets="targetDetails"
+        :target-domain-objects="targetDomainObjects"
+        :domain-object="domainObject"
+        :annotations="loadedAnnotations"
+        :annotation-type="annotationType"
+        :on-tag-change="onAnnotationChange"
+      />
+    </div>
+    <div v-else class="c-inspect-properties__row--span-all">
+      {{ noTagsMessage }}
+    </div>
+  </div>
+</template>
+
+<script>
+import TagEditor from './tags/TagEditor.vue';
+
+export default {
+  components: {
+    TagEditor
+  },
+  inject: ['openmct'],
+  data() {
+    return {
+      selection: null,
+      lastLocalAnnotationCreations: {},
+      unobserveEntries: {},
+      loadedAnnotations: []
+    };
+  },
+  computed: {
+    hasAnnotations() {
+      return Boolean(this.loadedAnnotations && this.loadedAnnotations.length);
+    },
+    nonTagAnnotations() {
+      if (!this.loadedAnnotations) {
+        return [];
+      }
+
+      return this.loadedAnnotations.filter((annotation) => {
+        return !annotation.tags;
+      });
+    },
+    tagAnnotations() {
+      if (!this.loadedAnnotations) {
+        return [];
+      }
+
+      return this.loadedAnnotations.filter((annotation) => {
+        return !annotation.tags;
+      });
+    },
+    multiSelection() {
+      return this.selection && this.selection.length > 1;
+    },
+    noAnnotationsMessage() {
+      return this.multiSelection
+        ? 'No annotations to display for multiple items'
+        : 'No annotations to display for this item';
+    },
+    noTagsMessage() {
+      return this.multiSelection
+        ? 'No tags to display for multiple items'
+        : 'No tags to display for this item';
+    },
+    domainObject() {
+      return this?.selection?.[0]?.[0]?.context?.item;
+    },
+    targetDetails() {
+      return this?.selection?.[0]?.[0]?.context?.targetDetails ?? [];
+    },
+    shouldShowTagsEditor() {
+      const showingTagsEditor = this.targetDetails?.length > 0;
+
+      if (showingTagsEditor) {
+        return true;
+      }
+
+      return false;
+    },
+    targetDomainObjects() {
+      return this?.selection?.[0]?.[0]?.context?.targetDomainObjects ?? [];
+    },
+    selectedAnnotations() {
+      return this?.selection?.[0]?.[0]?.context?.annotations;
+    },
+    annotationType() {
+      return this?.selection?.[0]?.[0]?.context?.annotationType;
+    },
+    annotationFilter() {
+      return this?.selection?.[0]?.[0]?.context?.annotationFilter;
+    },
+    onAnnotationChange() {
+      return this?.selection?.[0]?.[0]?.context?.onAnnotationChange;
+    }
+  },
+  async mounted() {
+    this.abortController = null;
+    this.openmct.annotation.on('targetDomainObjectAnnotated', this.loadAnnotationForTargetObject);
+    this.openmct.selection.on('change', this.updateSelection);
+    await this.updateSelection(this.openmct.selection.get());
+  },
+  beforeUnmount() {
+    this.openmct.annotation.off('targetDomainObjectAnnotated', this.loadAnnotationForTargetObject);
+    this.openmct.selection.off('change', this.updateSelection);
+    const unobserveEntryFunctions = Object.values(this.unobserveEntries);
+    unobserveEntryFunctions.forEach((unobserveEntry) => {
+      unobserveEntry();
+    });
+  },
+  methods: {
+    loadNewAnnotations(annotationsToLoad) {
+      if (!annotationsToLoad || !annotationsToLoad.length) {
+        this.loadedAnnotations.splice(0);
+
+        return;
+      }
+
+      const sortedAnnotations = annotationsToLoad.sort((annotationA, annotationB) => {
+        return annotationB.modified - annotationA.modified;
+      });
+
+      const mutableAnnotations = sortedAnnotations.map((annotation) => {
+        return this.openmct.objects.toMutable(annotation);
+      });
+
+      if (sortedAnnotations.length < this.loadedAnnotations.length) {
+        this.loadedAnnotations = this.loadedAnnotations.slice(0, mutableAnnotations.length);
+      }
+
+      for (let index = 0; index < mutableAnnotations.length; index += 1) {
+        this.loadedAnnotations[index] = mutableAnnotations[index];
+      }
+    },
+    updateSelection(selection) {
+      const unobserveEntryFunctions = Object.values(this.unobserveEntries);
+      unobserveEntryFunctions.forEach((unobserveEntry) => {
+        unobserveEntry();
+      });
+      this.unobserveEntries = {};
+
+      this.selection = selection;
+      this.targetDomainObjects.forEach((targetObject) => {
+        const targetKey = targetObject.keyString;
+        this.lastLocalAnnotationCreations[targetKey] = targetObject?.annotationLastCreated ?? 0;
+        if (!this.unobserveEntries[targetKey]) {
+          this.unobserveEntries[targetKey] = this.openmct.objects.observe(
+            targetObject,
+            '*',
+            this.targetObjectChanged
+          );
+        }
+      });
+      this.loadNewAnnotations(this.selectedAnnotations);
+    },
+    async targetObjectChanged(target) {
+      const targetID = this.openmct.objects.makeKeyString(target.identifier);
+      const lastLocalAnnotationCreation = this.lastLocalAnnotationCreations[targetID] ?? 0;
+      if (lastLocalAnnotationCreation < target.annotationLastCreated) {
+        this.lastLocalAnnotationCreations[targetID] = target.annotationLastCreated;
+        await this.loadAnnotationForTargetObject(target);
+      }
+    },
+    async loadAnnotationForTargetObject(target) {
+      // If the user changes targets while annotations are loading,
+      // abort the previous request.
+      if (this.abortController !== null) {
+        this.abortController.abort();
+      }
+
+      this.abortController = new AbortController();
+
+      try {
+        const allAnnotationsForTarget = await this.openmct.annotation.getAnnotations(
+          target.identifier,
+          this.abortController.signal
+        );
+        const filteredAnnotationsForSelection = allAnnotationsForTarget.filter((annotation) =>
+          this.openmct.annotation.areAnnotationTargetsEqual(
+            this.annotationType,
+            this.targetDetails,
+            annotation.targets
+          )
+        );
+        this.loadNewAnnotations(filteredAnnotationsForSelection);
+      } catch (err) {
+        if (err.name !== 'AbortError') {
+          throw err;
+        }
+      } finally {
+        this.abortController = null;
+      }
+    }
+  }
+};
+</script>
diff --git a/src/plugins/inspectorViews/annotations/AnnotationsViewProvider.js b/src/plugins/inspectorViews/annotations/AnnotationsViewProvider.js
new file mode 100644
index 00000000000..bfc477d7c7b
--- /dev/null
+++ b/src/plugins/inspectorViews/annotations/AnnotationsViewProvider.js
@@ -0,0 +1,77 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
+
+import Annotations from './AnnotationsInspectorView.vue';
+
+export default function AnnotationsViewProvider(openmct) {
+  return {
+    key: 'annotationsView',
+    name: 'Annotations',
+    canView: function (selection) {
+      const availableTags = openmct.annotation.getAvailableTags();
+
+      if (availableTags.length < 1) {
+        return false;
+      }
+
+      return selection.length;
+    },
+    view: function (selection) {
+      let _destroy = null;
+
+      const domainObject = selection?.[0]?.[0]?.context?.item;
+
+      return {
+        show: function (element) {
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                Annotations
+              },
+              provide: {
+                openmct,
+                domainObject
+              },
+              template: `<Annotations />`
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+        },
+        priority: function () {
+          return openmct.priority.DEFAULT;
+        },
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
+        }
+      };
+    }
+  };
+}
diff --git a/src/plugins/inspectorViews/annotations/tags/TagEditor.vue b/src/plugins/inspectorViews/annotations/tags/TagEditor.vue
new file mode 100644
index 00000000000..805be5d7914
--- /dev/null
+++ b/src/plugins/inspectorViews/annotations/tags/TagEditor.vue
@@ -0,0 +1,238 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div ref="TagEditor" class="c-tag-applier">
+    <TagSelection
+      v-for="(addedTag, index) in addedTags"
+      :key="index"
+      :class="{ 'w-tag-wrapper--tag-selector': addedTag.newTag }"
+      :selected-tag="addedTag.newTag ? null : addedTag"
+      :new-tag="addedTag.newTag"
+      :added-tags="addedTags"
+      @tag-removed="tagRemoved"
+      @tag-added="tagAdded"
+    />
+    <button
+      v-show="!userAddingTag && !maxTagsAdded"
+      class="c-tag-applier__add-btn c-icon-button c-icon-button--major icon-plus"
+      :class="TagEditorClassNames.ADD_TAG_BUTTON"
+      title="Add new tag"
+      @click="addTag"
+    >
+      <div class="c-icon-button__label c-tag-btn__label" :class="TagEditorClassNames.ADD_TAG_LABEL">
+        Add Tag
+      </div>
+    </button>
+  </div>
+</template>
+
+<script>
+import { toRaw } from 'vue';
+
+import TagEditorClassNames from './TagEditorClassNames.js';
+import TagSelection from './TagSelection.vue';
+
+export default {
+  components: {
+    TagSelection
+  },
+  inject: ['openmct'],
+  props: {
+    annotations: {
+      type: Array,
+      required: true
+    },
+    annotationType: {
+      type: String,
+      required: false,
+      default: null
+    },
+    domainObject: {
+      type: Object,
+      required: true,
+      default: null
+    },
+    targets: {
+      type: Array,
+      required: true,
+      default: null
+    },
+    targetDomainObjects: {
+      type: Array,
+      required: true,
+      default: null
+    },
+    onTagChange: {
+      type: Function,
+      required: false,
+      default: null
+    }
+  },
+  emits: ['tags-updated'],
+  data() {
+    return {
+      addedTags: [],
+      userAddingTag: false,
+      TagEditorClassNames: TagEditorClassNames
+    };
+  },
+  computed: {
+    availableTags() {
+      return this.openmct.annotation.getAvailableTags();
+    },
+    maxTagsAdded() {
+      const availableTags = this.openmct.annotation.getAvailableTags();
+
+      return !(
+        availableTags &&
+        availableTags.length &&
+        this.addedTags.length < availableTags.length
+      );
+    }
+  },
+  watch: {
+    annotations: {
+      handler() {
+        this.annotationsChanged();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.annotationsChanged();
+  },
+  unmounted() {
+    document.body.removeEventListener('click', this.tagCanceled);
+  },
+  methods: {
+    annotationsChanged() {
+      if (this.annotations) {
+        this.tagsChanged();
+      }
+    },
+    annotationDeletionListener(changedAnnotation) {
+      const matchingAnnotation = this.annotations.find((possibleMatchingAnnotation) => {
+        return this.openmct.objects.areIdsEqual(
+          possibleMatchingAnnotation.identifier,
+          changedAnnotation.identifier
+        );
+      });
+      if (matchingAnnotation) {
+        matchingAnnotation._deleted = changedAnnotation._deleted;
+        this.userAddingTag = false;
+        this.tagsChanged();
+      }
+    },
+    tagsChanged() {
+      // gather tags from annotations
+      const tagsFromAnnotations = this.annotations
+        .flatMap((annotation) => {
+          if (annotation._deleted) {
+            return [];
+          } else {
+            return annotation.tags;
+          }
+        })
+        .filter((tag, index, array) => {
+          return array.indexOf(tag) === index;
+        });
+
+      if (tagsFromAnnotations.length !== this.addedTags.length) {
+        this.addedTags = this.addedTags.slice(0, tagsFromAnnotations.length);
+      }
+
+      for (let index = 0; index < tagsFromAnnotations.length; index += 1) {
+        this.addedTags[index] = tagsFromAnnotations[index];
+      }
+    },
+    addTag() {
+      const newTagValue = {
+        newTag: true
+      };
+      this.addedTags.push(newTagValue);
+      this.userAddingTag = true;
+      document.body.addEventListener('click', this.tagCanceled);
+    },
+    async tagRemoved(tagToRemove) {
+      // Soft delete annotations that match tag instead (that aren't already deleted)
+      const annotationsToDelete = this.annotations.filter((annotation) => {
+        return annotation.tags.includes(tagToRemove) && !annotation._deleted;
+      });
+      if (annotationsToDelete) {
+        await this.openmct.annotation.deleteAnnotations(annotationsToDelete);
+        this.$emit('tags-updated', annotationsToDelete);
+        if (this.onTagChange) {
+          this.userAddingTag = false;
+          this.onTagChange(this.annotations);
+        }
+      }
+    },
+    tagCanceled(event) {
+      if (this.$refs.TagEditor) {
+        const clickedInsideTagEditor = this.$refs.TagEditor.contains(event.target);
+        if (!clickedInsideTagEditor) {
+          // Hide TagSelection and show "Add Tag" button
+          this.userAddingTag = false;
+          this.tagsChanged();
+        }
+      }
+    },
+    async tagAdded(newTag) {
+      // Either undelete an annotation, or create one (1) new annotation
+      let existingAnnotation = this.annotations.find((annotation) => {
+        return annotation.tags.includes(newTag);
+      });
+
+      if (!existingAnnotation) {
+        const contentText = `${this.annotationType} tag`;
+
+        // need to get raw version of target domain objects for comparisons to work
+        const rawTargetDomainObjects = this.targetDomainObjects.map((targetDomainObject) => {
+          return toRaw(targetDomainObject);
+        });
+        const annotationCreationArguments = {
+          name: contentText,
+          existingAnnotation,
+          contentText: contentText,
+          targets: toRaw(this.targets),
+          targetDomainObjects: rawTargetDomainObjects,
+          domainObject: toRaw(this.domainObject),
+          annotationType: toRaw(this.annotationType),
+          tags: [newTag]
+        };
+        existingAnnotation = await this.openmct.annotation.create(annotationCreationArguments);
+      } else if (existingAnnotation._deleted) {
+        this.openmct.annotation.unDeleteAnnotation(existingAnnotation);
+      }
+
+      this.userAddingTag = false;
+      document.body.removeEventListener('click', this.tagCanceled);
+
+      this.$emit('tags-updated', existingAnnotation);
+      if (this.onTagChange) {
+        this.onTagChange([existingAnnotation]);
+      }
+    }
+  }
+};
+</script>
diff --git a/src/plugins/inspectorViews/annotations/tags/TagEditorClassNames.js b/src/plugins/inspectorViews/annotations/tags/TagEditorClassNames.js
new file mode 100644
index 00000000000..3fe4a93abec
--- /dev/null
+++ b/src/plugins/inspectorViews/annotations/tags/TagEditorClassNames.js
@@ -0,0 +1,9 @@
+const TagEditorClassNames = Object.freeze({
+  REMOVE_TAG: 'js-remove-tag',
+  AUTOCOMPLETE_INPUT: 'js-autocomplete__input',
+  ADD_TAG_BUTTON: 'js-add-tag-button',
+  ADD_TAG_LABEL: 'js-add-tag-label',
+  TAG_OPTION: 'js-tag-option'
+});
+
+export default TagEditorClassNames;
diff --git a/src/plugins/inspectorViews/annotations/tags/TagSelection.vue b/src/plugins/inspectorViews/annotations/tags/TagSelection.vue
new file mode 100644
index 00000000000..c137e2b938e
--- /dev/null
+++ b/src/plugins/inspectorViews/annotations/tags/TagSelection.vue
@@ -0,0 +1,165 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="w-tag-wrapper has-tag-applier">
+    <template v-if="newTag">
+      <AutoCompleteField
+        v-if="newTag"
+        ref="tagSelection"
+        :model="availableTagModel"
+        :place-holder-text="'Type to select tag'"
+        class="c-tag-selection"
+        :item-css-class="`icon-circle ${TagEditorClassNames.TAG_OPTION}`"
+        @on-change="tagSelected"
+      />
+    </template>
+    <template v-else>
+      <div
+        class="c-tag"
+        :class="{ 'c-tag-edit': !readOnly }"
+        :style="{ background: selectedBackgroundColor, color: selectedForegroundColor }"
+      >
+        <button
+          v-show="!readOnly"
+          class="c-completed-tag-deletion c-tag__remove-btn icon-x-in-circle"
+          :class="TagEditorClassNames.REMOVE_TAG"
+          :style="{ textShadow: selectedBackgroundColor + ' 0 0 4px' }"
+          :aria-label="`Remove tag ${selectedTagLabel}`"
+          @click="removeTag"
+        ></button>
+        <div class="c-tag__label" aria-label="Tag">{{ selectedTagLabel }}</div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import AutoCompleteField from '../../../../api/forms/components/controls/AutoCompleteField.vue';
+import TagEditorClassNames from './TagEditorClassNames.js';
+
+export default {
+  components: {
+    AutoCompleteField
+  },
+  inject: ['openmct'],
+  props: {
+    addedTags: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    selectedTag: {
+      type: String,
+      default() {
+        return '';
+      }
+    },
+    newTag: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    readOnly: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    }
+  },
+  emits: ['tag-removed', 'tag-added'],
+  data() {
+    return { TagEditorClassNames: TagEditorClassNames };
+  },
+  computed: {
+    availableTagModel() {
+      const availableTags = this.openmct.annotation
+        .getAvailableTags()
+        .filter((tag) => {
+          return !this.addedTags.includes(tag.id);
+        })
+        .map((tag) => {
+          return {
+            name: tag.label,
+            color: tag.backgroundColor,
+            id: tag.id
+          };
+        });
+
+      return {
+        options: availableTags
+      };
+    },
+    selectedBackgroundColor() {
+      const selectedTag = this.getAvailableTagByID(this.selectedTag);
+      if (selectedTag) {
+        return selectedTag.backgroundColor;
+      } else {
+        // missing available tag color, use default
+        return '#00000';
+      }
+    },
+    selectedForegroundColor() {
+      const selectedTag = this.getAvailableTagByID(this.selectedTag);
+      if (selectedTag) {
+        return selectedTag.foregroundColor;
+      } else {
+        // missing available tag color, use default
+        return '#FFFFF';
+      }
+    },
+    selectedTagLabel() {
+      const selectedTag = this.getAvailableTagByID(this.selectedTag);
+      if (selectedTag) {
+        return selectedTag.label;
+      } else {
+        // missing available tag color, use default
+        return '¡UNKNOWN!';
+      }
+    }
+  },
+  methods: {
+    getAvailableTagByID(tagID) {
+      return this.openmct.annotation.getAvailableTags().find((tag) => {
+        return tag.id === tagID;
+      });
+    },
+    removeTag() {
+      this.$emit('tag-removed', this.selectedTag);
+    },
+    tagSelected(autoField) {
+      const tagAdded = autoField.model.options.find((option) => {
+        if (option.name === autoField.value) {
+          return true;
+        }
+
+        return false;
+      });
+      if (tagAdded) {
+        this.$emit('tag-added', tagAdded.id);
+      }
+    }
+  }
+};
+</script>
diff --git a/src/plugins/inspectorViews/annotations/tags/tags.scss b/src/plugins/inspectorViews/annotations/tags/tags.scss
new file mode 100644
index 00000000000..1310bd63022
--- /dev/null
+++ b/src/plugins/inspectorViews/annotations/tags/tags.scss
@@ -0,0 +1,183 @@
+@mixin tagHolder() {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+
+  > * {
+    $m: $interiorMarginSm;
+
+    margin: 0 $m $m 0;
+  }
+}
+
+/******************************* TAGS */
+.c-tag {
+  /* merge conflict in 5247
+    border-radius: 10px; //TODO: convert to theme constant
+    display: inline-flex;
+    padding: 1px 10px; //TODO: convert to theme constant
+
+    > * + * {
+        margin-left: $interiorMargin;
+    }
+
+    &__remove-btn {
+        color: inherit !important;
+        display: none;
+        opacity: 0;
+        overflow: hidden;
+        padding: 1px !important;
+        @include transition(opacity);
+        width: 0;
+ */
+  border-radius: $tagBorderRadius;
+  display: inline-flex;
+  overflow: hidden;
+  padding: 1px 6px; //TODO: convert to theme constant
+  transition: $transIn;
+
+  &__remove-btn {
+    color: inherit !important;
+    opacity: 0;
+    padding: 0; // Overrides default <button> padding
+    position: absolute;
+    right: 2px;
+    transition: $transIn;
+    width: 0;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  /* SEARCH RESULTS */
+  &.--is-not-search-match {
+    opacity: 0.5;
+  }
+}
+
+.c-tag-holder {
+  @include tagHolder;
+}
+
+.w-tag-wrapper {
+  $m: $interiorMarginSm;
+
+  margin: 0 $m $m 0;
+}
+
+/******************************* TAGS IN INSPECTOR / TAG SELECTION & APPLICATION */
+.c-tag-applier {
+  /* merge conflict in fix-repaint-5247
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+
+    > * + * {
+        margin-left: $interiorMargin;
+    }
+
+    &__add-btn {
+        &:before {
+            font-size: 0.9em;
+        }
+    }
+
+    .c-tag {
+        flex-direction: row;
+        align-items: center;
+        padding-right: 3px !important;
+
+        &__remove-btn {
+            display: block;
+        }
+*/
+  $tagApplierPadding: 3px 6px;
+  @include tagHolder;
+  grid-column: 1 / 3;
+
+  &__tags {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  &__add-btn {
+    border-radius: $tagBorderRadius;
+    padding: 3px 10px 3px 4px;
+
+    &:before {
+      font-size: 0.9em;
+    }
+  }
+
+  .c-tag {
+    flex-direction: row;
+    align-items: center;
+    padding: $tagApplierPadding;
+
+    > * + * {
+      margin-left: $interiorMarginSm;
+    }
+  }
+
+  .c-tag-selection {
+    .c-input--autocomplete__input {
+      min-height: auto !important;
+      padding: $tagApplierPadding;
+    }
+  }
+
+  .c-tag-btn__label {
+    overflow: visible !important;
+  }
+
+  /******************************* HOVERS */
+  .has-tag-applier {
+    /* merge conflict in fix-repaint-5247
+    $p: opacity, width;
+    // Apply this class to all components that should trigger tag removal btn on hover
+    .c-tag__remove-btn {
+        @include transition($prop: $p, $dur: $transOutTime);
+    }
+
+    &:hover {
+        .c-tag__remove-btn {
+            width: 1.1em;
+            opacity: 0.7;
+        }
+    }
+}
+*/
+    // Apply this class to all components that should trigger tag removal btn on hover
+    &:hover {
+      .c-tag {
+        @include userSelectNone();
+        transition: $transOut;
+      }
+      .c-tag__label {
+        opacity: 0.7;
+      }
+      .c-tag__remove-btn {
+        width: 1.3em;
+        opacity: 0.8;
+        padding: 2px !important;
+        transition: $transOut;
+        right: 5%;
+        text-align: center;
+        z-index: 2;
+
+        &:hover {
+          opacity: 1;
+
+          & ~ * {
+            // This sibling selector further dims the label
+            // to make the remove button stand out
+            opacity: 0.4;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/plugins/inspectorViews/elements/ElementItem.vue b/src/plugins/inspectorViews/elements/ElementItem.vue
new file mode 100644
index 00000000000..6c7e7fe44a6
--- /dev/null
+++ b/src/plugins/inspectorViews/elements/ElementItem.vue
@@ -0,0 +1,119 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <li
+    draggable="true"
+    :aria-label="`${elementObject.name} Element Item`"
+    :aria-grabbed="hover"
+    @dragstart="emitDragStartEvent"
+    @dragenter="onDragenter"
+    @dragover.prevent
+    @dragleave="onDragleave"
+    @drop="emitDropEvent"
+  >
+    <div
+      class="c-tree__item c-elements-pool__item js-elements-pool__item"
+      :class="{
+        'is-context-clicked': contextClickActive,
+        hover: hover,
+        'is-alias': isAlias
+      }"
+    >
+      <span class="c-elements-pool__grippy c-grippy c-grippy--vertical-drag"></span>
+      <object-label
+        :domain-object="elementObject"
+        :object-path="[elementObject, domainObject]"
+        @context-click-active="setContextClickState"
+      />
+    </div>
+  </li>
+</template>
+
+<script>
+import ObjectLabel from '../../../ui/components/ObjectLabel.vue';
+
+export default {
+  components: {
+    ObjectLabel
+  },
+  inject: ['openmct', 'domainObject'],
+  props: {
+    index: {
+      type: Number,
+      required: true,
+      default: () => {
+        return 0;
+      }
+    },
+    elementObject: {
+      type: Object,
+      required: true,
+      default: () => {
+        return {};
+      }
+    },
+    allowDrop: {
+      type: Boolean
+    }
+  },
+  emits: ['drop-custom', 'dragstart-custom'],
+  data() {
+    return {
+      contextClickActive: false,
+      hover: false
+    };
+  },
+  computed: {
+    isAlias() {
+      return (
+        this.elementObject.location !==
+        this.openmct.objects.makeKeyString(this.domainObject.identifier)
+      );
+    }
+  },
+  methods: {
+    emitDropEvent(event) {
+      this.$emit('drop-custom', event);
+      this.hover = false;
+    },
+    emitDragStartEvent(event) {
+      this.$emit('dragstart-custom', this.index);
+    },
+    onDragenter(event) {
+      if (this.allowDrop) {
+        this.hover = true;
+        this.dragElement = event.target.parentElement;
+      }
+    },
+    onDragleave(event) {
+      if (event.target.parentElement === this.dragElement) {
+        this.hover = false;
+        delete this.dragElement;
+      }
+    },
+    setContextClickState(state) {
+      this.contextClickActive = state;
+    }
+  }
+};
+</script>
diff --git a/src/plugins/inspectorViews/elements/ElementItemGroup.vue b/src/plugins/inspectorViews/elements/ElementItemGroup.vue
new file mode 100644
index 00000000000..2713a4535ec
--- /dev/null
+++ b/src/plugins/inspectorViews/elements/ElementItemGroup.vue
@@ -0,0 +1,98 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div
+    class="c-elements-pool__group"
+    :class="{
+      hover: hover
+    }"
+    :allow-drop="allowDrop"
+    @dragover.prevent
+    @dragenter="onDragEnter"
+    @dragleave.stop="onDragLeave"
+    @drop="emitDrop"
+  >
+    <ul>
+      <div>
+        <span class="c-elements-pool__grippy c-grippy c-grippy--vertical-drag"></span>
+        <div class="c-tree__item__type-icon c-object-label__type-icon">
+          <span class="is-status__indicator"></span>
+        </div>
+        <div
+          class="c-tree__item__name c-object-label__name"
+          :aria-label="`Element Item Group ${label}`"
+        >
+          {{ label }}
+        </div>
+      </div>
+      <slot></slot>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    parentObject: {
+      type: Object,
+      required: true,
+      default: () => {
+        return {};
+      }
+    },
+    label: {
+      type: String,
+      required: true,
+      default: () => {
+        return '';
+      }
+    },
+    allowDrop: {
+      type: Boolean
+    }
+  },
+  emits: ['drop-group'],
+  data() {
+    return {
+      dragCounter: 0
+    };
+  },
+  computed: {
+    hover() {
+      return this.dragCounter > 0;
+    }
+  },
+  methods: {
+    emitDrop(event) {
+      this.dragCounter = 0;
+      this.$emit('drop-group', event);
+    },
+    onDragEnter(event) {
+      this.dragCounter++;
+    },
+    onDragLeave(event) {
+      this.dragCounter--;
+    }
+  }
+};
+</script>
diff --git a/src/plugins/inspectorViews/elements/ElementsPool.vue b/src/plugins/inspectorViews/elements/ElementsPool.vue
new file mode 100644
index 00000000000..30f105ea73a
--- /dev/null
+++ b/src/plugins/inspectorViews/elements/ElementsPool.vue
@@ -0,0 +1,165 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-elements-pool">
+    <Search
+      class="c-elements-pool__search"
+      :value="currentSearch"
+      @input="applySearch"
+      @clear="applySearch"
+    />
+    <div class="c-elements-pool__elements">
+      <ul
+        v-if="elements.length > 0"
+        id="inspector-elements-tree"
+        class="c-tree c-elements-pool__tree"
+      >
+        <element-item
+          v-for="(element, index) in elements"
+          :key="element.identifier.key"
+          :index="index"
+          :element-object="element"
+          :allow-drop="allowDrop"
+          @dragstart-custom="moveFrom(index)"
+          @drop-custom="moveTo(index)"
+        />
+        <li class="js-last-place" @drop="moveToIndex(elements.length)"></li>
+      </ul>
+      <div v-if="elements.length === 0">No contained elements</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+
+import Search from '../../../ui/components/SearchComponent.vue';
+import ElementItem from './ElementItem.vue';
+
+export default {
+  components: {
+    Search,
+    ElementItem
+  },
+  inject: ['openmct', 'domainObject'],
+  data() {
+    return {
+      elements: [],
+      isEditing: this.openmct.editor.isEditing(),
+      currentSearch: '',
+      selection: [],
+      contextClickTracker: {},
+      allowDrop: false
+    };
+  },
+  mounted() {
+    let selection = this.openmct.selection.get();
+    if (selection && selection.length > 0) {
+      this.showSelection(selection);
+    }
+
+    this.openmct.selection.on('change', this.showSelection);
+    this.openmct.editor.on('isEditing', this.setEditState);
+  },
+  unmounted() {
+    this.openmct.editor.off('isEditing', this.setEditState);
+    this.openmct.selection.off('change', this.showSelection);
+
+    if (this.compositionUnlistener) {
+      this.compositionUnlistener();
+    }
+  },
+  methods: {
+    setEditState(isEditing) {
+      this.isEditing = isEditing;
+      this.showSelection(this.openmct.selection.get());
+    },
+    showSelection(selection) {
+      if (_.isEqual(this.selection, selection)) {
+        return;
+      }
+
+      this.selection = selection;
+      this.elements = [];
+      this.elementsCache = {};
+      this.listeners = [];
+
+      if (this.compositionUnlistener) {
+        this.compositionUnlistener();
+      }
+
+      if (this.domainObject) {
+        this.composition = this.openmct.composition.get(this.domainObject);
+
+        if (this.composition) {
+          this.composition.load();
+
+          this.composition.on('add', this.addElement);
+          this.composition.on('remove', this.removeElement);
+          this.composition.on('reorder', this.reorderElements);
+
+          this.compositionUnlistener = () => {
+            this.composition.off('add', this.addElement);
+            this.composition.off('remove', this.removeElement);
+            this.composition.off('reorder', this.reorderElements);
+            delete this.compositionUnlistener;
+          };
+        }
+      }
+    },
+    addElement(element) {
+      let keyString = this.openmct.objects.makeKeyString(element.identifier);
+      this.elementsCache[keyString] = JSON.parse(JSON.stringify(element));
+      this.applySearch(this.currentSearch);
+    },
+    reorderElements() {
+      this.applySearch(this.currentSearch);
+    },
+    removeElement(identifier) {
+      let keyString = this.openmct.objects.makeKeyString(identifier);
+      delete this.elementsCache[keyString];
+      this.applySearch(this.currentSearch);
+    },
+    applySearch(input) {
+      this.currentSearch = input;
+      this.elements = this.domainObject.composition
+        .map((id) => this.elementsCache[this.openmct.objects.makeKeyString(id)])
+        .filter((element) => {
+          return (
+            element !== undefined && element.name.toLowerCase().search(this.currentSearch) !== -1
+          );
+        });
+    },
+    moveTo(moveToIndex) {
+      if (this.allowDrop) {
+        this.composition.reorder(this.moveFromIndex, moveToIndex);
+        this.allowDrop = false;
+      }
+    },
+    moveFrom(index) {
+      this.allowDrop = true;
+      this.moveFromIndex = index;
+    }
+  }
+};
+</script>
diff --git a/src/plugins/inspectorViews/elements/ElementsViewProvider.js b/src/plugins/inspectorViews/elements/ElementsViewProvider.js
new file mode 100644
index 00000000000..ce9748861a3
--- /dev/null
+++ b/src/plugins/inspectorViews/elements/ElementsViewProvider.js
@@ -0,0 +1,78 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
+
+import ElementsPool from './ElementsPool.vue';
+
+export default function ElementsViewProvider(openmct) {
+  return {
+    key: 'elementsView',
+    name: 'Elements',
+    canView: function (selection) {
+      const hasValidSelection = selection?.length;
+      const isOverlayPlot = selection?.[0]?.[0]?.context?.item?.type === 'telemetry.plot.overlay';
+
+      return hasValidSelection && !isOverlayPlot;
+    },
+    view: function (selection) {
+      let _destroy = null;
+      const domainObject = selection?.[0]?.[0]?.context?.item;
+
+      return {
+        show: function (element) {
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                ElementsPool
+              },
+              provide: {
+                openmct,
+                domainObject
+              },
+              template: `<ElementsPool />`
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+        },
+        showTab: function (isEditing) {
+          const hasComposition = Boolean(domainObject && openmct.composition.get(domainObject));
+
+          return hasComposition && isEditing;
+        },
+        priority: function () {
+          return openmct.priority.DEFAULT;
+        },
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
+        }
+      };
+    }
+  };
+}
diff --git a/src/plugins/inspectorViews/elements/PlotElementsPool.vue b/src/plugins/inspectorViews/elements/PlotElementsPool.vue
new file mode 100644
index 00000000000..79f6a0da211
--- /dev/null
+++ b/src/plugins/inspectorViews/elements/PlotElementsPool.vue
@@ -0,0 +1,329 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-elements-pool is-object-type-telemetry-plot-overlay">
+    <Search
+      class="c-elements-pool__search"
+      :value="currentSearch"
+      @input="applySearch"
+      @clear="applySearch"
+    />
+    <div class="c-elements-pool__elements">
+      <ul
+        v-show="hasElements"
+        id="inspector-elements-tree"
+        class="c-tree c-elements-pool__tree js-elements-pool__tree"
+      >
+        <div class="c-elements-pool__instructions">
+          Select and drag an element to move it into a different axis.
+        </div>
+        <element-item-group
+          v-for="(yAxis, index) in yAxes"
+          :key="`element-group-yaxis-${yAxis.id}`"
+          :parent-object="parentObject"
+          :allow-drop="allowDrop"
+          :label="`Y Axis ${yAxis.id}`"
+          @drop-group="moveTo($event, 0, yAxis.id)"
+        >
+          <li class="js-first-place" @drop="moveTo($event, 0, yAxis.id)"></li>
+          <element-item
+            v-for="(element, elemIndex) in yAxis.elements"
+            :key="element.identifier.key"
+            :index="elemIndex"
+            :element-object="element"
+            :parent-object="parentObject"
+            :allow-drop="allowDrop"
+            @dragstart-custom="moveFrom($event, yAxis.id)"
+            @drop-custom="moveTo($event, index, yAxis.id)"
+          />
+          <li
+            v-if="yAxis.elements.length > 0"
+            class="js-last-place"
+            @drop="moveTo($event, yAxis.elements.length, yAxis.id)"
+          ></li>
+        </element-item-group>
+      </ul>
+      <div v-show="!hasElements">No contained elements</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+
+import Search from '../../../ui/components/SearchComponent.vue';
+import configStore from '../../plot/configuration/ConfigStore.js';
+import ElementItem from './ElementItem.vue';
+import ElementItemGroup from './ElementItemGroup.vue';
+
+const Y_AXIS_1 = 1;
+
+export default {
+  components: {
+    Search,
+    ElementItemGroup,
+    ElementItem
+  },
+  inject: ['openmct'],
+  data() {
+    return {
+      yAxes: [],
+      isEditing: this.openmct.editor.isEditing(),
+      parentObject: undefined,
+      currentSearch: '',
+      selection: [],
+      contextClickTracker: {},
+      allowDrop: false
+    };
+  },
+  computed: {
+    hasElements() {
+      for (const yAxis of this.yAxes) {
+        if (yAxis.elements.length > 0) {
+          return true;
+        }
+      }
+
+      return false;
+    }
+  },
+  mounted() {
+    const selection = this.openmct.selection.get();
+    if (selection && selection.length > 0) {
+      this.showSelection(selection);
+    }
+
+    this.openmct.selection.on('change', this.showSelection);
+    this.openmct.editor.on('isEditing', this.setEditState);
+  },
+  unmounted() {
+    this.openmct.editor.off('isEditing', this.setEditState);
+    this.openmct.selection.off('change', this.showSelection);
+
+    this.unlistenComposition();
+  },
+  methods: {
+    setEditState(isEditing) {
+      this.isEditing = isEditing;
+      this.showSelection(this.openmct.selection.get());
+    },
+    showSelection(selection) {
+      if (_.isEqual(this.selection, selection)) {
+        return;
+      }
+
+      this.selection = selection;
+      this.elementsCache = {};
+      this.listeners = [];
+      this.parentObject = selection && selection[0] && selection[0][0].context.item;
+
+      this.unlistenComposition();
+
+      if (this.parentObject && this.parentObject.type === 'telemetry.plot.overlay') {
+        this.setYAxisIds();
+        this.composition = this.openmct.composition.get(this.parentObject);
+
+        if (this.composition) {
+          this.composition.load();
+          this.registerCompositionListeners();
+        }
+      }
+    },
+    unlistenComposition() {
+      if (this.compositionUnlistener) {
+        this.compositionUnlistener();
+      }
+    },
+    registerCompositionListeners() {
+      this.composition.on('add', this.addElement);
+      this.composition.on('remove', this.removeElement);
+      this.composition.on('reorder', this.reorderElements);
+
+      this.compositionUnlistener = () => {
+        this.composition.off('add', this.addElement);
+        this.composition.off('remove', this.removeElement);
+        this.composition.off('reorder', this.reorderElements);
+        delete this.compositionUnlistener;
+      };
+    },
+    setYAxisIds() {
+      const configId = this.openmct.objects.makeKeyString(this.parentObject.identifier);
+      this.config = configStore.get(configId);
+      // Clear the yAxes array and repopulate it with the current YAxis elements
+      this.yAxes.splice(0);
+      this.yAxes.push({
+        id: this.config.yAxis.id,
+        elements: this.parentObject.configuration.series.filter(
+          (series) => series.yAxisId === this.config.yAxis.id
+        )
+      });
+      if (this.config.additionalYAxes) {
+        this.config.additionalYAxes.forEach((yAxis) => {
+          this.yAxes.push({
+            id: yAxis.id,
+            elements: this.parentObject.configuration.series.filter(
+              (series) => series.yAxisId === yAxis.id
+            )
+          });
+        });
+      }
+    },
+    addElement(element) {
+      // Get the index of the corresponding element in the series list
+      const seriesIndex = this.parentObject.configuration.series.findIndex((series) =>
+        this.openmct.objects.areIdsEqual(series.identifier, element.identifier)
+      );
+      const keyString = this.openmct.objects.makeKeyString(element.identifier);
+
+      const wasDraggedOntoPlot =
+        this.parentObject.configuration.series[seriesIndex].yAxisId === undefined;
+      const yAxisId = wasDraggedOntoPlot
+        ? Y_AXIS_1
+        : this.parentObject.configuration.series[seriesIndex].yAxisId;
+
+      if (wasDraggedOntoPlot) {
+        const insertIndex = this.yAxes[0].elements.length;
+        // Insert the element at the end of the first YAxis bucket
+        this.composition.reorder(seriesIndex, insertIndex);
+      }
+
+      // Store the element in the cache and set its yAxisId
+      this.elementsCache[keyString] = element;
+      if (this.elementsCache[keyString].yAxisId !== yAxisId) {
+        // Mutate the YAxisId on the domainObject itself
+        this.updateCacheAndMutate(element, yAxisId);
+      }
+
+      this.applySearch(this.currentSearch);
+    },
+    reorderElements() {
+      this.applySearch(this.currentSearch);
+    },
+    removeElement(identifier) {
+      const keyString = this.openmct.objects.makeKeyString(identifier);
+      delete this.elementsCache[keyString];
+      this.applySearch(this.currentSearch);
+    },
+    applySearch(input) {
+      this.currentSearch = input;
+      this.yAxes.forEach((yAxis) => {
+        yAxis.elements = this.filterForSearchAndAxis(input, yAxis.id);
+      });
+    },
+    filterForSearchAndAxis(input, yAxisId) {
+      return this.parentObject.composition
+        .map((id) => this.elementsCache[this.openmct.objects.makeKeyString(id)])
+        .filter((element) => {
+          return (
+            element !== undefined &&
+            element.name.toLowerCase().search(input) !== -1 &&
+            element.yAxisId === yAxisId
+          );
+        });
+    },
+    moveFrom(elementIndex, groupIndex) {
+      this.allowDrop = true;
+      this.moveFromIndex = elementIndex;
+      this.moveFromYAxisId = groupIndex;
+    },
+    moveTo(event, moveToIndex, moveToYAxisId) {
+      // FIXME: If the user starts the drag by clicking outside of the <object-label/> element,
+      // domain object information will not be set on the dataTransfer data. To prevent errors,
+      // we simply short-circuit here if the data is not set.
+      const serializedDomainObject = event.dataTransfer.getData('openmct/composable-domain-object');
+      if (!serializedDomainObject) {
+        return;
+      }
+
+      const domainObject = JSON.parse(serializedDomainObject);
+      this.updateCacheAndMutate(domainObject, moveToYAxisId);
+
+      const moveFromIndex = this.moveFromIndex;
+
+      this.moveAndReorderElement(moveFromIndex, moveToIndex, moveToYAxisId);
+    },
+    updateCacheAndMutate(domainObject, yAxisId) {
+      const keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
+      const index = this.parentObject.configuration.series.findIndex(
+        (series) => series.identifier.key === domainObject.identifier.key
+      );
+
+      // Handle the case of dragging an element directly into the Elements Pool
+      if (!this.elementsCache[keyString]) {
+        // Update the series list locally so our CompositionAdd handler can
+        // take care of the rest.
+        this.parentObject.configuration.series.push({
+          identifier: domainObject.identifier,
+          yAxisId
+        });
+        this.composition.add(domainObject);
+        this.elementsCache[keyString] = domainObject;
+      }
+
+      this.elementsCache[keyString].yAxisId = yAxisId;
+      const shouldMutate = this.parentObject.configuration.series?.[index]?.yAxisId !== yAxisId;
+      if (shouldMutate) {
+        this.openmct.objects.mutate(
+          this.parentObject,
+          `configuration.series[${index}].yAxisId`,
+          yAxisId
+        );
+      }
+    },
+    moveAndReorderElement(moveFromIndex, moveToIndex, moveToYAxisId) {
+      if (!this.allowDrop) {
+        return;
+      }
+
+      // Find the corresponding indexes of the from/to yAxes in the yAxes list
+      const moveFromYAxisIndex = this.yAxes.findIndex((yAxis) => yAxis.id === this.moveFromYAxisId);
+      const moveToYAxisIndex = this.yAxes.findIndex((yAxis) => yAxis.id === moveToYAxisId);
+
+      // Calculate the actual indexes of the elements in the composition array
+      // based on which bucket and index they are being moved from/to.
+      // Then, trigger a composition reorder.
+      for (let yAxisId = 0; yAxisId < moveFromYAxisIndex; yAxisId++) {
+        const lesserYAxisBucketLength = this.yAxes[yAxisId].elements.length;
+        // Add the lengths of preceding buckets to calculate the actual 'from' index
+        moveFromIndex = moveFromIndex + lesserYAxisBucketLength;
+      }
+
+      for (let yAxisId = 0; yAxisId < moveToYAxisIndex; yAxisId++) {
+        const greaterYAxisBucketLength = this.yAxes[yAxisId].elements.length;
+        // Add the lengths of subsequent buckets to calculate the actual 'to' index
+        moveToIndex = moveToIndex + greaterYAxisBucketLength;
+      }
+
+      // Adjust the index by 1 if we're moving from one bucket to another
+      if (this.moveFromYAxisId !== moveToYAxisId && moveToIndex > 0) {
+        moveToIndex--;
+      }
+
+      // Reorder the composition array according to the calculated indexes
+      this.composition.reorder(moveFromIndex, moveToIndex);
+
+      this.allowDrop = false;
+    }
+  }
+};
+</script>
diff --git a/src/plugins/inspectorViews/elements/PlotElementsViewProvider.js b/src/plugins/inspectorViews/elements/PlotElementsViewProvider.js
new file mode 100644
index 00000000000..25aba33e174
--- /dev/null
+++ b/src/plugins/inspectorViews/elements/PlotElementsViewProvider.js
@@ -0,0 +1,76 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
+
+import PlotElementsPool from './PlotElementsPool.vue';
+
+export default function PlotElementsViewProvider(openmct) {
+  return {
+    key: 'plotElementsView',
+    name: 'Elements',
+    canView: function (selection) {
+      return selection?.[0]?.[0]?.context?.item?.type === 'telemetry.plot.overlay';
+    },
+    view: function (selection) {
+      let _destroy = null;
+
+      const domainObject = selection?.[0]?.[0]?.context?.item;
+
+      return {
+        show: function (element) {
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                PlotElementsPool
+              },
+              provide: {
+                openmct,
+                domainObject
+              },
+              template: `<PlotElementsPool />`
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+        },
+        showTab: function (isEditing) {
+          const hasComposition = Boolean(domainObject && openmct.composition.get(domainObject));
+
+          return hasComposition && isEditing;
+        },
+        priority: function () {
+          return openmct.priority.DEFAULT;
+        },
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
+        }
+      };
+    }
+  };
+}
diff --git a/src/plugins/inspectorViews/elements/elements.scss b/src/plugins/inspectorViews/elements/elements.scss
new file mode 100644
index 00000000000..72f3c5b933a
--- /dev/null
+++ b/src/plugins/inspectorViews/elements/elements.scss
@@ -0,0 +1,76 @@
+.c-elements-pool {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  flex: 1 1 auto !important;
+  > * + * {
+    margin-top: $interiorMargin;
+  }
+
+  &.is-object-type-telemetry-plot-overlay {
+    .c-grippy {
+      display: none;
+    }
+    .c-object-label {
+      &:before {
+        // Grippy
+        content: '';
+        @include grippy($colorItemTreeVC, $dir: 'Y');
+        $d: 9px;
+        width: $d;
+        height: $d;
+        display: block;
+        margin-right: $interiorMargin;
+      }
+    }
+  }
+
+  &__item {
+    &.is-alias {
+      // Object is an alias to an original.
+      [class*='__type-icon'] {
+        @include isAlias();
+      }
+    }
+  }
+
+  &__search {
+    flex: 0 0 auto;
+  }
+
+  &__group {
+    flex: 1 1 auto;
+    margin-top: $interiorMarginLg;
+  }
+
+  &__elements {
+    flex: 1 1 auto;
+    overflow: auto;
+  }
+
+  &__instructions {
+    display: flex;
+    font-style: italic;
+  }
+
+  .c-grippy {
+    $d: 9px;
+    flex: 0 0 auto;
+    margin-right: $interiorMarginSm;
+    transform: translateY(-2px);
+    width: $d;
+    height: $d;
+  }
+
+  &.is-context-clicked {
+    box-shadow: inset $colorItemTreeSelectedBg 0 0 0 1px;
+  }
+
+  .hover {
+    background-color: $colorItemTreeSelectedBg;
+  }
+}
+
+.js-last-place {
+  height: 10px;
+}
diff --git a/src/plugins/inspectorViews/plugin.js b/src/plugins/inspectorViews/plugin.js
new file mode 100644
index 00000000000..a2e125edb16
--- /dev/null
+++ b/src/plugins/inspectorViews/plugin.js
@@ -0,0 +1,37 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import AnnotationsViewProvider from './annotations/AnnotationsViewProvider.js';
+import ElementsViewProvider from './elements/ElementsViewProvider.js';
+import PlotElementsViewProvider from './elements/PlotElementsViewProvider.js';
+import PropertiesViewProvider from './properties/PropertiesViewProvider.js';
+import StylesInspectorViewProvider from './styles/StylesInspectorViewProvider.js';
+
+export default function InspectorViewsPlugin() {
+  return function install(openmct) {
+    openmct.inspectorViews.addProvider(new PropertiesViewProvider(openmct));
+    openmct.inspectorViews.addProvider(new ElementsViewProvider(openmct));
+    openmct.inspectorViews.addProvider(new PlotElementsViewProvider(openmct));
+    openmct.inspectorViews.addProvider(new StylesInspectorViewProvider(openmct));
+    openmct.inspectorViews.addProvider(new AnnotationsViewProvider(openmct));
+  };
+}
diff --git a/src/plugins/inspectorViews/properties/DetailText.vue b/src/plugins/inspectorViews/properties/DetailText.vue
new file mode 100644
index 00000000000..2f9c0571183
--- /dev/null
+++ b/src/plugins/inspectorViews/properties/DetailText.vue
@@ -0,0 +1,43 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <li class="c-inspect-properties__row" :aria-label="`${detail.name} inspector properties`">
+    <div class="c-inspect-properties__label" aria-label="inspector property name">
+      {{ detail.name }}
+    </div>
+    <div class="c-inspect-properties__value" aria-label="inspector property value">
+      {{ detail.value }}
+    </div>
+  </li>
+</template>
+
+<script>
+export default {
+  props: {
+    detail: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
diff --git a/src/plugins/inspectorViews/properties/LocationComponent.vue b/src/plugins/inspectorViews/properties/LocationComponent.vue
new file mode 100644
index 00000000000..87a0702384b
--- /dev/null
+++ b/src/plugins/inspectorViews/properties/LocationComponent.vue
@@ -0,0 +1,147 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-inspect-properties c-inspect-properties--location">
+    <div class="c-inspect-properties__header" title="The location of this linked object.">
+      Original Location
+    </div>
+    <ul class="c-inspect-properties__section">
+      <li class="c-inspect-properties__row">
+        <ul class="c-inspect-properties__value c-location">
+          <li
+            v-for="pathObject in orderedPathBreadCrumb"
+            :key="pathObject.key"
+            class="c-location__item"
+          >
+            <object-label
+              :domain-object="pathObject.domainObject"
+              :object-path="pathObject.objectPath"
+            />
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ObjectLabel from '../../../ui/components/ObjectLabel.vue';
+
+export default {
+  components: {
+    ObjectLabel
+  },
+  inject: ['openmct'],
+  props: {
+    domainObject: {
+      type: Object,
+      default: undefined
+    },
+    parentDomainObject: {
+      type: Object,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      pathBreadCrumb: []
+    };
+  },
+  computed: {
+    orderedPathBreadCrumb() {
+      return this.pathBreadCrumb.slice().reverse();
+    }
+  },
+  async mounted() {
+    this.nameChangeListeners = {};
+    await this.createPathBreadCrumb();
+  },
+  unmounted() {
+    Object.values(this.nameChangeListeners).forEach((unlisten) => {
+      unlisten();
+    });
+  },
+  methods: {
+    updateObjectPathName(keyString, newName) {
+      this.pathBreadCrumb = this.pathBreadCrumb.map((pathObject) => {
+        if (this.openmct.objects.makeKeyString(pathObject.domainObject.identifier) === keyString) {
+          return {
+            ...pathObject,
+            domainObject: { ...pathObject.domainObject, name: newName }
+          };
+        }
+        return pathObject;
+      });
+    },
+    removeNameListenerFor(domainObject) {
+      const keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
+      if (this.nameChangeListeners[keyString]) {
+        this.nameChangeListeners[keyString]();
+        delete this.nameChangeListeners[keyString];
+      }
+    },
+    addNameListenerFor(domainObject) {
+      const keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
+      if (!this.nameChangeListeners[keyString]) {
+        this.nameChangeListeners[keyString] = this.openmct.objects.observe(
+          domainObject,
+          'name',
+          this.updateObjectPathName.bind(this, keyString)
+        );
+      }
+    },
+    async createPathBreadCrumb() {
+      if (!this.domainObject && this.parentDomainObject) {
+        this.setPathBreadCrumb([this.parentDomainObject]);
+      } else {
+        const keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+        const originalPath = await this.openmct.objects.getOriginalPath(keyString);
+        const originalPathWithoutSelf = originalPath.slice(1, -1);
+
+        this.setPathBreadCrumb(originalPathWithoutSelf);
+      }
+    },
+    setPathBreadCrumb(path) {
+      const pathBreadCrumb = path.map((domainObject, index, pathArray) => {
+        const key = this.openmct.objects.makeKeyString(domainObject.identifier);
+
+        return {
+          domainObject,
+          key,
+          objectPath: pathArray.slice(index)
+        };
+      });
+
+      this.pathBreadCrumb.forEach((pathObject) => {
+        this.removeNameListenerFor(pathObject.domainObject);
+      });
+
+      this.pathBreadCrumb = pathBreadCrumb;
+
+      this.pathBreadCrumb.forEach((pathObject) => {
+        this.addNameListenerFor(pathObject.domainObject);
+      });
+    }
+  }
+};
+</script>
diff --git a/src/plugins/inspectorViews/properties/PropertiesComponent.vue b/src/plugins/inspectorViews/properties/PropertiesComponent.vue
new file mode 100644
index 00000000000..0e4c82b51f2
--- /dev/null
+++ b/src/plugins/inspectorViews/properties/PropertiesComponent.vue
@@ -0,0 +1,253 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div>
+    <div class="c-inspector__properties c-inspect-properties">
+      <div class="c-inspect-properties__header">Details</div>
+      <ul v-if="hasDetails" class="c-inspect-properties__section">
+        <Component
+          :is="getComponent(detail)"
+          v-for="detail in details"
+          :key="detail.name"
+          :detail="detail"
+        />
+      </ul>
+      <div v-else class="c-inspect-properties__row--span-all">
+        {{ noDetailsMessage }}
+      </div>
+    </div>
+
+    <Location
+      v-if="hasLocation"
+      :domain-object="domainObject"
+      :parent-domain-object="parentDomainObject"
+    />
+  </div>
+</template>
+
+<script>
+import Moment from 'moment';
+
+import DetailText from './DetailText.vue';
+import Location from './LocationComponent.vue';
+
+export default {
+  components: {
+    DetailText,
+    Location
+  },
+  inject: ['openmct'],
+  data() {
+    return {
+      selection: []
+    };
+  },
+  computed: {
+    details() {
+      return this.customDetails ?? this.domainObjectDetails;
+    },
+    customDetails() {
+      return this.context?.details;
+    },
+    domainObject() {
+      return this.context?.item;
+    },
+    parentDomainObject() {
+      return this.selection?.[0]?.[1]?.context?.item;
+    },
+    type() {
+      if (this.domainObject === undefined) {
+        return;
+      }
+
+      return this.openmct.types.get(this.domainObject.type);
+    },
+    domainObjectDetails() {
+      if (this.domainObject === undefined) {
+        return;
+      }
+
+      const UNKNOWN_USER = 'Unknown';
+      const title = this.domainObject.name;
+      const typeName = this.type ? this.type.definition.name : `Unknown: ${this.domainObject.type}`;
+      const createdTimestamp = this.domainObject.created;
+      const createdBy = this.domainObject.createdBy ? this.domainObject.createdBy : UNKNOWN_USER;
+      const modifiedBy = this.domainObject.modifiedBy ? this.domainObject.modifiedBy : UNKNOWN_USER;
+      const modifiedTimestamp = this.domainObject.modified
+        ? this.domainObject.modified
+        : this.domainObject.created;
+      const notes = this.domainObject.notes;
+      const version = this.domainObject.version;
+
+      const details = [
+        {
+          name: 'Title',
+          value: title
+        },
+        {
+          name: 'Type',
+          value: typeName
+        },
+        {
+          name: 'Created By',
+          value: createdBy
+        },
+        {
+          name: 'Modified By',
+          value: modifiedBy
+        }
+      ];
+
+      if (notes) {
+        details.push({
+          name: 'Notes',
+          value: notes
+        });
+      }
+
+      if (createdTimestamp !== undefined) {
+        const formattedCreatedTimestamp =
+          Moment.utc(createdTimestamp).format('YYYY-MM-DD[\n]HH:mm:ss') + ' UTC';
+
+        details.push({
+          name: 'Created',
+          value: formattedCreatedTimestamp
+        });
+      }
+
+      if (modifiedTimestamp !== undefined) {
+        const formattedModifiedTimestamp =
+          Moment.utc(modifiedTimestamp).format('YYYY-MM-DD[\n]HH:mm:ss') + ' UTC';
+
+        details.push({
+          name: 'Modified',
+          value: formattedModifiedTimestamp
+        });
+      }
+
+      if (version) {
+        details.push({
+          name: 'Version',
+          value: version
+        });
+      }
+
+      return [...details, ...this.typeProperties];
+    },
+    context() {
+      return this.selection?.[0]?.[0]?.context;
+    },
+    hasDetails() {
+      return Boolean(this.details?.length && !this.multiSelection);
+    },
+    multiSelection() {
+      return this.selection && this.selection.length > 1;
+    },
+    noDetailsMessage() {
+      return this.multiSelection
+        ? 'No properties to display for multiple items'
+        : 'No properties to display for this item';
+    },
+    typeProperties() {
+      if (!this.type) {
+        return [];
+      }
+
+      let definition = this.type.definition;
+      if (!definition.form || definition.form.length === 0) {
+        return [];
+      }
+
+      return definition.form
+        .filter((field) => !field.hideFromInspector)
+        .map((field) => {
+          let path = field.property;
+          if (typeof path === 'string') {
+            path = [path];
+          }
+
+          if (field.control === 'file-input') {
+            path = [...path, 'name'];
+          }
+
+          return {
+            name: field.name,
+            path
+          };
+        })
+        .filter((field) => Array.isArray(field.path))
+        .map((field) => {
+          return {
+            name: field.name,
+            value: field.path.reduce((object, key) => {
+              if (object === undefined) {
+                return object;
+              }
+
+              return object[key];
+            }, this.domainObject)
+          };
+        });
+    },
+    hasLocation() {
+      const domainObject = this.selection?.[0]?.[0]?.context?.item;
+      const isRootObject = domainObject?.location === 'ROOT';
+      const hasSingleSelection = this.selection?.length === 1;
+
+      return hasSingleSelection && !isRootObject;
+    }
+  },
+  mounted() {
+    this.openmct.selection.on('change', this.updateSelection);
+    this.updateSelection(this.openmct.selection.get());
+  },
+  beforeUnmount() {
+    this.openmct.selection.off('change', this.updateSelection);
+  },
+  methods: {
+    getComponent(detail) {
+      const component = detail.component ? detail.component : 'text';
+
+      return `detail-${component}`;
+    },
+    updateSelection(selection) {
+      this.removeListener();
+      this.selection.splice(0, this.selection.length, ...selection);
+      if (this.domainObject) {
+        this.addListener();
+      }
+    },
+    removeListener() {
+      if (this.nameListener) {
+        this.nameListener();
+        this.nameListener = null;
+      }
+    },
+    addListener() {
+      this.nameListener = this.openmct.objects.observe(this.context?.item, 'name', (newValue) => {
+        this.context.item = { ...this.context?.item, name: newValue };
+      });
+    }
+  }
+};
+</script>
diff --git a/src/plugins/inspectorViews/properties/PropertiesViewProvider.js b/src/plugins/inspectorViews/properties/PropertiesViewProvider.js
new file mode 100644
index 00000000000..72f4c8adbd0
--- /dev/null
+++ b/src/plugins/inspectorViews/properties/PropertiesViewProvider.js
@@ -0,0 +1,69 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
+
+import Properties from './PropertiesComponent.vue';
+
+export default function PropertiesViewProvider(openmct) {
+  return {
+    key: 'propertiesView',
+    name: 'Properties',
+    glyph: 'icon-info',
+    canView: function (selection) {
+      return selection.length > 0;
+    },
+    view: function (selection) {
+      let _destroy = null;
+
+      return {
+        show: function (element) {
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                Properties
+              },
+              provide: {
+                openmct
+              },
+              template: `<Properties />`
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+        },
+        priority: function () {
+          return openmct.priority.DEFAULT;
+        },
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
+        }
+      };
+    }
+  };
+}
diff --git a/src/plugins/inspectorViews/properties/location.scss b/src/plugins/inspectorViews/properties/location.scss
new file mode 100644
index 00000000000..5400e2e4675
--- /dev/null
+++ b/src/plugins/inspectorViews/properties/location.scss
@@ -0,0 +1,49 @@
+.c-path,
+.c-location {
+  // Path is two or more items, not clickable
+  // Location used in Inspector and search results, is clickable
+  display: flex;
+
+  &__item {
+    display: flex;
+    font-size: 11px;
+    align-items: center;
+    min-width: 0;
+
+    &:not(:last-child) {
+      &:after {
+        // Right-pointing arrow
+        color: $colorBodyFgSubtle;
+        content: $glyph-icon-arrow-right;
+        font-family: symbolsfont;
+        font-size: 0.7em;
+        margin-left: $interiorMarginSm;
+      }
+    }
+  }
+}
+
+.c-location {
+  flex-wrap: wrap;
+
+  &__item {
+    $m: 1px;
+    cursor: pointer;
+    margin: 0 $m $m 0;
+
+    .c-object-label {
+      border-radius: $smallCr;
+      padding: 2px 3px;
+
+      &__type-icon {
+        width: auto;
+        font-size: 1em;
+        min-width: auto;
+      }
+
+      @include hover() {
+        background: $colorItemTreeHoverBg;
+      }
+    }
+  }
+}
diff --git a/src/plugins/inspectorViews/styles/FontStyleEditor.vue b/src/plugins/inspectorViews/styles/FontStyleEditor.vue
new file mode 100644
index 00000000000..687dccea396
--- /dev/null
+++ b/src/plugins/inspectorViews/styles/FontStyleEditor.vue
@@ -0,0 +1,121 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="c-toolbar">
+    <div ref="fontSizeMenu" class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
+      <button
+        class="c-icon-button c-button--menu icon-font-size"
+        aria-label="Set Font Size"
+        @click.prevent.stop="showFontSizeMenu"
+      >
+        <span class="c-button__label">{{ fontSizeLabel }}</span>
+      </button>
+    </div>
+    <div ref="fontMenu" class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
+      <button
+        class="c-icon-button c-button--menu icon-font"
+        aria-label="Set Font Type"
+        @click.prevent.stop="showFontMenu"
+      >
+        <span class="c-button__label">{{ fontTypeLabel }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { FONT_SIZES, FONTS } from './constants.js';
+
+export default {
+  inject: ['openmct'],
+  props: {
+    fontStyle: {
+      type: Object,
+      required: true,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  emits: ['set-font-property'],
+  computed: {
+    fontTypeLabel() {
+      const fontType = FONTS.find((f) => f.value === this.fontStyle.font);
+      if (!fontType) {
+        return '??';
+      }
+
+      return fontType.name || fontType.value || FONTS[0].name;
+    },
+    fontSizeLabel() {
+      const fontSize = FONT_SIZES.find((f) => f.value === this.fontStyle.fontSize);
+      if (!fontSize) {
+        return '??';
+      }
+
+      return fontSize.name || fontSize.value || FONT_SIZES[0].name;
+    },
+    fontMenu() {
+      return FONTS.map((font) => {
+        return {
+          cssClass: font.cssClass || '',
+          name: font.name,
+          description: font.name,
+          onItemClicked: () => this.setFont(font.value)
+        };
+      });
+    },
+    fontSizeMenu() {
+      return FONT_SIZES.map((fontSize) => {
+        return {
+          cssClass: fontSize.cssClass || '',
+          name: fontSize.name,
+          description: fontSize.name,
+          onItemClicked: () => this.setFontSize(fontSize.value)
+        };
+      });
+    }
+  },
+  methods: {
+    setFont(font) {
+      this.$emit('set-font-property', { font });
+    },
+    setFontSize(fontSize) {
+      this.$emit('set-font-property', { fontSize });
+    },
+    showFontMenu() {
+      const elementBoundingClientRect = this.$refs.fontMenu.getBoundingClientRect();
+      const x = elementBoundingClientRect.x;
+      const y = elementBoundingClientRect.bottom;
+
+      this.openmct.menus.showMenu(x, y, this.fontMenu);
+    },
+    showFontSizeMenu() {
+      const elementBoundingClientRect = this.$refs.fontSizeMenu.getBoundingClientRect();
+      const x = elementBoundingClientRect.x;
+      const y = elementBoundingClientRect.bottom;
+
+      this.openmct.menus.showMenu(x, y, this.fontSizeMenu);
+    }
+  }
+};
+</script>
diff --git a/src/plugins/inspectorViews/styles/SavedStyleSelector.vue b/src/plugins/inspectorViews/styles/SavedStyleSelector.vue
new file mode 100644
index 00000000000..25227365d55
--- /dev/null
+++ b/src/plugins/inspectorViews/styles/SavedStyleSelector.vue
@@ -0,0 +1,182 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div>
+    <div class="c-style c-style--saved has-local-controls c-toolbar">
+      <div
+        class="c-style__controls"
+        :aria-label="description"
+        :title="description"
+        @click="selectStyle()"
+      >
+        <div class="c-style-thumb" :style="thumbStyle">
+          <span
+            class="c-style-thumb__text u-style-receiver js-style-receiver"
+            :class="{ 'hide-nice': !hasProperty(savedStyle.color) }"
+            :data-font="savedStyle.font"
+          >
+            {{ thumbLabel }}
+          </span>
+        </div>
+        <div
+          class="c-icon-button c-icon-button--disabled c-icon-button--swatched icon-line-horz"
+          title="Border color"
+        >
+          <div
+            class="c-swatch"
+            :style="{
+              background: borderColor
+            }"
+          ></div>
+        </div>
+        <div
+          class="c-icon-button c-icon-button--disabled c-icon-button--swatched icon-paint-bucket"
+          title="Background color"
+        >
+          <div class="c-swatch" :style="{ background: savedStyle.backgroundColor }"></div>
+        </div>
+        <div
+          class="c-icon-button c-icon-button--disabled c-icon-button--swatched icon-font"
+          title="Text color"
+        >
+          <div class="c-swatch" :style="{ background: savedStyle.color }"></div>
+        </div>
+      </div>
+
+      <div v-if="canDeleteStyle" class="c-style__button-delete c-local-controls--show-on-hover">
+        <div
+          class="c-icon-button icon-trash"
+          title="Delete this saved style"
+          @click.stop="deleteStyle()"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SavedStyleSelector',
+  inject: ['openmct', 'stylesManager'],
+  props: {
+    isEditing: {
+      type: Boolean,
+      required: true
+    },
+    savedStyle: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['delete-style'],
+  data() {
+    return {
+      expanded: false
+    };
+  },
+  computed: {
+    borderColor() {
+      return this.savedStyle.border.substring(this.savedStyle.border.indexOf('#'));
+    },
+    thumbStyle() {
+      return {
+        border: this.savedStyle.border,
+        backgroundColor: this.savedStyle.backgroundColor,
+        color: this.savedStyle.color
+      };
+    },
+    thumbLabel() {
+      return this.savedStyle.fontSize !== 'default' ? `${this.savedStyle.fontSize}px` : 'ABC';
+    },
+    description() {
+      const fill = `Fill: ${this.savedStyle.backgroundColor || 'none'}`;
+      const border = `Border: ${this.savedStyle.border || 'none'}`;
+      const color = `Text Color: ${this.savedStyle.color || 'default'}`;
+      const fontSize = this.savedStyle.fontSize ? `Font Size: ${this.savedStyle.fontSize}` : '';
+      const font = this.savedStyle.font ? `Font Style: ${this.savedStyle.font}` : '';
+
+      // Note: lack of indention in the return string is deliberate, it affects how the text is rendered
+      return `Click to apply this style:
+${fill}
+${border}
+${color}
+${fontSize}
+${font}`;
+    },
+    canDeleteStyle() {
+      return this.isEditing;
+    }
+  },
+  methods: {
+    selectStyle() {
+      if (this.isEditing) {
+        this.stylesManager.select(this.savedStyle);
+      }
+    },
+    deleteStyle() {
+      this.showDeleteStyleDialog()
+        .then(() => {
+          this.$emit('delete-style');
+        })
+        .catch(() => {});
+    },
+    showDeleteStyleDialog(style) {
+      const message = `
+                This will delete this saved style.
+                This action will not effect styling that has already been applied.
+                Do you want to continue?
+            `;
+
+      return new Promise((resolve, reject) => {
+        let dialog = this.openmct.overlays.dialog({
+          title: 'Delete Saved Style',
+          iconClass: 'alert',
+          message: message,
+          buttons: [
+            {
+              label: 'OK',
+              callback: () => {
+                dialog.dismiss();
+                resolve();
+              }
+            },
+            {
+              label: 'Cancel',
+              callback: () => {
+                dialog.dismiss();
+                reject();
+              }
+            }
+          ]
+        });
+      });
+    },
+    hasProperty(property) {
+      return property !== undefined;
+    },
+    toggleExpanded() {
+      this.expanded = !this.expanded;
+    }
+  }
+};
+</script>
diff --git a/src/plugins/inspectorViews/styles/SavedStylesInspectorView.vue b/src/plugins/inspectorViews/styles/SavedStylesInspectorView.vue
new file mode 100644
index 00000000000..cbd8379b24e
--- /dev/null
+++ b/src/plugins/inspectorViews/styles/SavedStylesInspectorView.vue
@@ -0,0 +1,84 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="u-contents"></div>
+</template>
+
+<script>
+import mount from 'utils/mount';
+
+import SavedStylesView from './SavedStylesView.vue';
+
+export default {
+  inject: ['openmct', 'stylesManager'],
+  data() {
+    return {
+      selection: [],
+      destroy: null
+    };
+  },
+  mounted() {
+    this.openmct.selection.on('change', this.updateSelection);
+    this.updateSelection(this.openmct.selection.get());
+  },
+  unmounted() {
+    this.openmct.selection.off('change', this.updateSelection);
+    if (this.destroy) {
+      this.destroy();
+      this.$el.innerHTML = '';
+    }
+  },
+  methods: {
+    updateSelection(selection) {
+      if (selection.length > 0 && selection[0].length > 0) {
+        if (this.destroy) {
+          this.destroy();
+          this.$el.innerHTML = '';
+        }
+
+        let viewContainer = document.createElement('div');
+        this.$el.append(viewContainer);
+        const { destroy } = mount(
+          {
+            el: viewContainer,
+            components: {
+              SavedStylesView
+            },
+            provide: {
+              openmct: this.openmct,
+              selection: selection,
+              stylesManager: this.stylesManager
+            },
+            template: '<saved-styles-view />'
+          },
+          {
+            app: this.openmct.app,
+            element: viewContainer
+          }
+        );
+        this.destroy = destroy;
+      }
+    }
+  }
+};
+</script>
diff --git a/src/plugins/inspectorViews/styles/SavedStylesView.vue b/src/plugins/inspectorViews/styles/SavedStylesView.vue
new file mode 100644
index 00000000000..33591c35323
--- /dev/null
+++ b/src/plugins/inspectorViews/styles/SavedStylesView.vue
@@ -0,0 +1,125 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-inspector__saved-styles c-inspect-styles">
+    <div class="c-inspect-styles__content">
+      <div class="c-inspect-styles__saved-styles">
+        <saved-style-selector
+          v-for="(savedStyle, index) in savedStyles"
+          :key="index"
+          class="c-inspect-styles__saved-style"
+          :is-editing="isEditing"
+          :saved-style="savedStyle"
+          @delete-style="deleteStyle(index)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SavedStyleSelector from './SavedStyleSelector.vue';
+
+export default {
+  name: 'SavedStylesView',
+  components: {
+    SavedStyleSelector
+  },
+  inject: ['openmct', 'selection', 'stylesManager'],
+  data() {
+    return {
+      isEditing: this.openmct.editor.isEditing(),
+      savedStyles: undefined
+    };
+  },
+  mounted() {
+    this.openmct.editor.on('isEditing', this.setIsEditing);
+    this.stylesManager.on('stylesUpdated', this.setStyles);
+    this.stylesManager.on('limitReached', this.showLimitReachedDialog);
+    this.stylesManager.on('persistError', this.showPersistErrorDialog);
+
+    this.loadStyles();
+  },
+  unmounted() {
+    this.openmct.editor.off('isEditing', this.setIsEditing);
+    this.stylesManager.off('stylesUpdated', this.setStyles);
+    this.stylesManager.off('limitReached', this.showLimitReachedDialog);
+    this.stylesManager.off('persistError', this.showPersistErrorDialog);
+  },
+  methods: {
+    setIsEditing(isEditing) {
+      this.isEditing = isEditing;
+    },
+    loadStyles() {
+      const styles = this.stylesManager.load();
+
+      this.setStyles(styles);
+    },
+    setStyles(styles) {
+      this.savedStyles = styles;
+    },
+    showLimitReachedDialog(limit) {
+      const message = `
+                You have reached the limit on the number of saved styles.
+                Please delete one or more saved styles and try again.
+            `;
+
+      let dialog = this.openmct.overlays.dialog({
+        title: 'Saved Styles Limit',
+        iconClass: 'alert',
+        message: message,
+        buttons: [
+          {
+            label: 'OK',
+            callback: () => {
+              dialog.dismiss();
+            }
+          }
+        ]
+      });
+    },
+    showPersistErrorDialog() {
+      const message = `
+                Problem encountered saving styles.
+                Try again or delete one or more styles before trying again.
+            `;
+      let dialog = this.openmct.overlays.dialog({
+        title: 'Error Saving Style',
+        iconClass: 'error',
+        message: message,
+        buttons: [
+          {
+            label: 'OK',
+            callback: () => {
+              dialog.dismiss();
+            }
+          }
+        ]
+      });
+    },
+    deleteStyle(index) {
+      this.stylesManager.delete(index);
+    }
+  }
+};
+</script>
diff --git a/src/plugins/inspectorViews/styles/StylesInspectorView.vue b/src/plugins/inspectorViews/styles/StylesInspectorView.vue
new file mode 100644
index 00000000000..d3304c1d4ab
--- /dev/null
+++ b/src/plugins/inspectorViews/styles/StylesInspectorView.vue
@@ -0,0 +1,68 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <multipane type="vertical">
+    <pane class="c-inspector__styles">
+      <div class="u-contents">
+        <StylesView />
+      </div>
+    </pane>
+    <pane v-if="isEditing" class="c-inspector__saved-styles" handle="before" label="Saved Styles">
+      <SavedStylesInspectorView />
+    </pane>
+  </multipane>
+</template>
+
+<script>
+import StylesView from '@/plugins/condition/components/inspector/StylesView.vue';
+
+import Multipane from '../../../ui/layout/MultipaneContainer.vue';
+import Pane from '../../../ui/layout/PaneContainer.vue';
+import SavedStylesInspectorView from './SavedStylesInspectorView.vue';
+
+export default {
+  components: {
+    Multipane,
+    Pane,
+    StylesView,
+    SavedStylesInspectorView
+  },
+  inject: ['openmct'],
+  data() {
+    return {
+      isEditing: this.openmct.editor.isEditing()
+    };
+  },
+  mounted() {
+    this.openmct.editor.on('isEditing', this.setEditMode);
+  },
+  beforeUnmount() {
+    this.openmct.editor.off('isEditing', this.setEditMode);
+  },
+  methods: {
+    setEditMode(isEditing) {
+      this.isEditing = isEditing;
+    }
+  }
+};
+</script>
diff --git a/src/plugins/inspectorViews/styles/StylesInspectorViewProvider.js b/src/plugins/inspectorViews/styles/StylesInspectorViewProvider.js
new file mode 100644
index 00000000000..52d79afdd4e
--- /dev/null
+++ b/src/plugins/inspectorViews/styles/StylesInspectorViewProvider.js
@@ -0,0 +1,105 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
+
+import StylesInspectorView from './StylesInspectorView.vue';
+import stylesManager from './StylesManager.js';
+
+const NON_STYLABLE_TYPES = ['folder', 'webPage', 'conditionSet', 'summary-widget', 'hyperlink'];
+
+function isLayoutObject(selection, objectType) {
+  //we allow conditionSets to be styled if they're part of a layout
+  return (
+    selection.length > 1 &&
+    (objectType === 'conditionSet' || NON_STYLABLE_TYPES.indexOf(objectType) < 0)
+  );
+}
+
+function isCreatableObject(object, type) {
+  return NON_STYLABLE_TYPES.indexOf(object.type) < 0 && type.definition.creatable;
+}
+
+export default function StylesInspectorViewProvider(openmct) {
+  return {
+    key: 'stylesInspectorView',
+    name: 'Styles',
+    glyph: 'icon-paint-bucket',
+    canView: function (selection) {
+      const objectSelection = selection?.[0];
+      const objectContext = objectSelection?.[0]?.context;
+      const layoutItem = objectContext?.layoutItem;
+      const domainObject = objectContext?.item;
+      const isFlexibleLayoutContainer =
+        domainObject?.type === 'flexible-layout' && objectContext.type === 'container';
+
+      if (layoutItem) {
+        return true;
+      }
+
+      if (!domainObject || isFlexibleLayoutContainer) {
+        return false;
+      }
+
+      const type = openmct.types.get(domainObject.type);
+
+      return (
+        isLayoutObject(objectSelection, domainObject.type) || isCreatableObject(domainObject, type)
+      );
+    },
+    view: function (selection) {
+      let _destroy = null;
+
+      return {
+        show: function (element) {
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                StylesInspectorView
+              },
+              provide: {
+                openmct,
+                stylesManager,
+                selection
+              },
+              template: `<StylesInspectorView />`
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+        },
+        priority: function () {
+          return openmct.priority.DEFAULT;
+        },
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
+        }
+      };
+    }
+  };
+}
diff --git a/src/plugins/inspectorViews/styles/StylesManager.js b/src/plugins/inspectorViews/styles/StylesManager.js
new file mode 100644
index 00000000000..b23ea95cf4c
--- /dev/null
+++ b/src/plugins/inspectorViews/styles/StylesManager.js
@@ -0,0 +1,128 @@
+import EventEmitter from 'EventEmitter';
+
+const LOCAL_STORAGE_KEY = 'mct-saved-styles';
+const LIMIT = 20;
+
+/**
+ * @typedef {Object} Style
+ * @property {*} property
+ */
+class StylesManager extends EventEmitter {
+  load() {
+    let styles = window.localStorage.getItem(LOCAL_STORAGE_KEY);
+    styles = styles ? JSON.parse(styles) : [];
+
+    return styles;
+  }
+
+  save(style) {
+    const normalizedStyle = this.normalizeStyle(style);
+    const styles = this.load();
+
+    if (!this.isSaveLimitReached(styles)) {
+      styles.unshift(normalizedStyle);
+
+      if (this.persist(styles)) {
+        this.emit('stylesUpdated', styles);
+      }
+    }
+  }
+
+  delete(index) {
+    const styles = this.load();
+    styles.splice(index, 1);
+
+    if (this.persist(styles)) {
+      this.emit('stylesUpdated', styles);
+    }
+  }
+
+  select(style) {
+    this.emit('styleSelected', style);
+  }
+
+  /**
+   * @private
+   */
+  normalizeStyle(style) {
+    const normalizedStyle = this.getBaseStyleObject();
+
+    Object.keys(normalizedStyle).forEach((property) => {
+      const value = style[property];
+      if (value !== undefined) {
+        normalizedStyle[property] = value;
+      }
+    });
+
+    return normalizedStyle;
+  }
+
+  /**
+   * @private
+   */
+  getBaseStyleObject() {
+    return {
+      backgroundColor: '',
+      border: '',
+      color: '',
+      fontSize: 'default',
+      font: 'default'
+    };
+  }
+
+  /**
+   * @private
+   */
+  isSaveLimitReached(styles) {
+    if (styles.length >= LIMIT) {
+      this.emit('limitReached');
+
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * @private
+   */
+  isExistingStyle(style, styles) {
+    return styles.some((existingStyle) => this.isEqual(style, existingStyle));
+  }
+
+  /**
+   * @private
+   */
+  persist(styles) {
+    try {
+      window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(styles));
+
+      return true;
+    } catch (e) {
+      this.emit('persistError');
+    }
+
+    return false;
+  }
+
+  /**
+   * @private
+   */
+  isEqual(style1, style2) {
+    const keys = Object.keys(Object.assign({}, style1, style2));
+    const different = keys.some(
+      (key) =>
+        (!style1[key] && style2[key]) ||
+        (style1[key] && !style2[key]) ||
+        style1[key] !== style2[key]
+    );
+
+    return !different;
+  }
+}
+
+const stylesManager = new StylesManager();
+// breaks on adding listener later
+// Object.freeze(stylesManager);
+
+export default stylesManager;
diff --git a/src/plugins/inspectorViews/styles/constants.js b/src/plugins/inspectorViews/styles/constants.js
new file mode 100644
index 00000000000..150241a742e
--- /dev/null
+++ b/src/plugins/inspectorViews/styles/constants.js
@@ -0,0 +1,109 @@
+export const FONT_SIZES = [
+  {
+    name: 'Default',
+    value: 'default'
+  },
+  {
+    name: '8px',
+    value: '8'
+  },
+  {
+    name: '9px',
+    value: '9'
+  },
+  {
+    name: '10px',
+    value: '10'
+  },
+  {
+    name: '11px',
+    value: '11'
+  },
+  {
+    name: '12px',
+    value: '12'
+  },
+  {
+    name: '13px',
+    value: '13'
+  },
+  {
+    name: '14px',
+    value: '14'
+  },
+  {
+    name: '16px',
+    value: '16'
+  },
+  {
+    name: '18px',
+    value: '18'
+  },
+  {
+    name: '20px',
+    value: '20'
+  },
+  {
+    name: '24px',
+    value: '24'
+  },
+  {
+    name: '28px',
+    value: '28'
+  },
+  {
+    name: '32px',
+    value: '32'
+  },
+  {
+    name: '36px',
+    value: '36'
+  },
+  {
+    name: '42px',
+    value: '42'
+  },
+  {
+    name: '48px',
+    value: '48'
+  },
+  {
+    name: '72px',
+    value: '72'
+  },
+  {
+    name: '96px',
+    value: '96'
+  },
+  {
+    name: '128px',
+    value: '128'
+  }
+];
+
+export const FONTS = [
+  {
+    name: 'Default',
+    value: 'default'
+  },
+  {
+    name: 'Bold',
+    value: 'default-bold'
+  },
+  {
+    name: 'Narrow',
+    value: 'narrow'
+  },
+  {
+    name: 'Narrow Bold',
+    value: 'narrow-bold'
+  },
+  {
+    name: 'Monospace',
+    value: 'monospace'
+  },
+  {
+    name: 'Monospace Bold',
+    value: 'monospace-bold'
+  }
+];
diff --git a/src/plugins/interceptors/missingObjectInterceptor.js b/src/plugins/interceptors/missingObjectInterceptor.js
index 8cc7cc3f5cb..60d3aefe197 100644
--- a/src/plugins/interceptors/missingObjectInterceptor.js
+++ b/src/plugins/interceptors/missingObjectInterceptor.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,20 +21,23 @@
  *****************************************************************************/
 
 export default function MissingObjectInterceptor(openmct) {
-    openmct.objects.addGetInterceptor({
-        appliesTo: (identifier, domainObject) => {
-            return identifier.key !== 'mine';
-        },
-        invoke: (identifier, object) => {
-            if (object === undefined) {
-                return {
-                    identifier,
-                    type: 'unknown',
-                    name: 'Missing: ' + openmct.objects.makeKeyString(identifier)
-                };
-            }
+  openmct.objects.addGetInterceptor({
+    appliesTo: (identifier, domainObject) => {
+      return true;
+    },
+    invoke: (identifier, object) => {
+      if (object === undefined) {
+        const keyString = openmct.objects.makeKeyString(identifier);
+        openmct.notifications.error(`Failed to retrieve object ${keyString}`, { minimized: true });
 
-            return object;
-        }
-    });
+        return {
+          identifier,
+          type: 'unknown',
+          name: 'Missing: ' + keyString
+        };
+      }
+
+      return object;
+    }
+  });
 }
diff --git a/src/plugins/interceptors/myItemsInterceptor.js b/src/plugins/interceptors/myItemsInterceptor.js
deleted file mode 100644
index fb241589a62..00000000000
--- a/src/plugins/interceptors/myItemsInterceptor.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-export default function MyItemsInterceptor(openmct) {
-
-    openmct.objects.addGetInterceptor({
-        appliesTo: (identifier, domainObject) => {
-            return identifier.key === 'mine';
-        },
-        invoke: (identifier, object) => {
-            if (object === undefined) {
-                return {
-                    identifier,
-                    "name": "My Items",
-                    "type": "folder",
-                    "composition": [],
-                    "location": "ROOT"
-                };
-            }
-
-            return object;
-        }
-    });
-}
diff --git a/src/plugins/interceptors/plugin.js b/src/plugins/interceptors/plugin.js
index 44601009416..2e05dddba11 100644
--- a/src/plugins/interceptors/plugin.js
+++ b/src/plugins/interceptors/plugin.js
@@ -1,9 +1,7 @@
-import missingObjectInterceptor from "./missingObjectInterceptor";
-import myItemsInterceptor from "./myItemsInterceptor";
+import missingObjectInterceptor from './missingObjectInterceptor.js';
 
 export default function plugin() {
-    return function install(openmct) {
-        myItemsInterceptor(openmct);
-        missingObjectInterceptor(openmct);
-    };
+  return function install(openmct) {
+    missingObjectInterceptor(openmct);
+  };
 }
diff --git a/src/plugins/interceptors/pluginSpec.js b/src/plugins/interceptors/pluginSpec.js
index c5c6bfea727..7b1b963321f 100644
--- a/src/plugins/interceptors/pluginSpec.js
+++ b/src/plugins/interceptors/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,77 +20,58 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import { createOpenMct, resetApplicationState } from "utils/testing";
-import InterceptorPlugin from "./plugin";
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+
+import InterceptorPlugin from './plugin.js';
 
 describe('the plugin', function () {
-    let element;
-    let child;
-    let openmct;
-    const TEST_NAMESPACE = 'test';
+  let element;
+  let child;
+  let openmct;
+  const TEST_NAMESPACE = 'test';
 
-    beforeEach((done) => {
-        openmct = createOpenMct();
-        openmct.install(new InterceptorPlugin(openmct));
+  beforeEach((done) => {
+    openmct = createOpenMct();
+    openmct.install(new InterceptorPlugin(openmct));
 
-        element = document.createElement('div');
-        element.style.width = '640px';
-        element.style.height = '480px';
-        child = document.createElement('div');
-        child.style.width = '640px';
-        child.style.height = '480px';
-        element.appendChild(child);
+    element = document.createElement('div');
+    element.style.width = '640px';
+    element.style.height = '480px';
+    child = document.createElement('div');
+    child.style.width = '640px';
+    child.style.height = '480px';
+    element.appendChild(child);
 
-        openmct.on('start', done);
-        openmct.startHeadless();
-    });
+    openmct.on('start', done);
+    openmct.startHeadless();
+  });
 
-    afterEach(() => {
-        return resetApplicationState(openmct);
-    });
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
 
-    describe('the missingObjectInterceptor', () => {
-        let mockProvider;
-
-        beforeEach(() => {
-            mockProvider = jasmine.createSpyObj("mock provider", [
-                "get"
-            ]);
-            mockProvider.get.and.returnValue(Promise.resolve(undefined));
-            openmct.objects.addProvider(TEST_NAMESPACE, mockProvider);
-        });
+  describe('the missingObjectInterceptor', () => {
+    let mockProvider;
 
-        it('returns missing objects', () => {
-            const identifier = {
-                namespace: TEST_NAMESPACE,
-                key: 'hello'
-            };
-
-            return openmct.objects.get(identifier).then((testObject) => {
-                expect(testObject).toEqual({
-                    identifier,
-                    type: 'unknown',
-                    name: 'Missing: test:hello'
-                });
-            });
-        });
+    beforeEach(() => {
+      mockProvider = jasmine.createSpyObj('mock provider', ['get']);
+      mockProvider.get.and.returnValue(Promise.resolve(undefined));
+      openmct.objects.addProvider(TEST_NAMESPACE, mockProvider);
+    });
 
-        it('returns the My items object if not found', () => {
-            const identifier = {
-                namespace: TEST_NAMESPACE,
-                key: 'mine'
-            };
+    it('returns missing objects', () => {
+      const identifier = {
+        namespace: TEST_NAMESPACE,
+        key: 'hello'
+      };
 
-            return openmct.objects.get(identifier).then((testObject) => {
-                expect(testObject).toEqual({
-                    identifier,
-                    "name": "My Items",
-                    "type": "folder",
-                    "composition": [],
-                    "location": "ROOT"
-                });
-            });
+      return openmct.objects.get(identifier).then((testObject) => {
+        expect(testObject).toEqual({
+          identifier,
+          type: 'unknown',
+          name: 'Missing: test:hello'
         });
-
+      });
     });
+  });
 });
diff --git a/src/plugins/latestDataClock/LADClock.js b/src/plugins/latestDataClock/LADClock.js
index e43f5f5f0fd..7490d3f901e 100644
--- a/src/plugins/latestDataClock/LADClock.js
+++ b/src/plugins/latestDataClock/LADClock.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,24 +20,24 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(['../../../src/plugins/utcTimeSystem/LocalClock'], function (LocalClock) {
-    /**
-     * A {@link Clock} that mocks a "latest available data" type tick source.
-     * This is for testing purposes only, and behaves identically to a local clock.
-     * It DOES NOT tick on receipt of data.
-     * @constructor
-     */
-    function LADClock(period) {
-        LocalClock.call(this, period);
+import LocalClock from '../../../src/plugins/utcTimeSystem/LocalClock.js';
 
-        this.key = 'test-lad';
-        this.mode = 'lad';
-        this.cssClass = 'icon-suitcase';
-        this.name = 'Latest available data';
-        this.description = "Updates when when new data is available";
-    }
+class LADClock extends LocalClock {
+  /**
+   * A {@link Clock} that mocks a "latest available data" type tick source.
+   * This is for testing purposes only, and behaves identically to a local clock.
+   * It DOES NOT tick on receipt of data.
+   * @constructor
+   */
+  constructor(period) {
+    super(period);
 
-    LADClock.prototype = Object.create(LocalClock.prototype);
+    this.key = 'test-lad';
+    this.mode = 'lad';
+    this.cssClass = 'icon-suitcase';
+    this.name = 'Latest available data';
+    this.description = 'Updates when new data is available';
+  }
+}
 
-    return LADClock;
-});
+export default LADClock;
diff --git a/src/plugins/latestDataClock/plugin.js b/src/plugins/latestDataClock/plugin.js
index a1f8f71a76e..2219d6b3d40 100644
--- a/src/plugins/latestDataClock/plugin.js
+++ b/src/plugins/latestDataClock/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,14 +20,10 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    "./LADClock"
-], function (
-    LADClock
-) {
-    return function () {
-        return function (openmct) {
-            openmct.time.addClock(new LADClock());
-        };
-    };
-});
+import LADClock from './LADClock.js';
+
+export default function () {
+  return function (openmct) {
+    openmct.time.addClock(new LADClock());
+  };
+}
diff --git a/src/plugins/licenses/Licenses.vue b/src/plugins/licenses/Licenses.vue
deleted file mode 100644
index 5b8212b7859..00000000000
--- a/src/plugins/licenses/Licenses.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-/*****************************************************************************
-* Open MCT, Copyright (c) 2014-2021, United States Government
-* as represented by the Administrator of the National Aeronautics and Space
-* Administration. All rights reserved.
-*
-* Open MCT is licensed under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-* http://www.apache.org/licenses/LICENSE-2.0.
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-* License for the specific language governing permissions and limitations
-* under the License.
-*
-* Open MCT includes source code licensed under additional open source
-* licenses. See the Open Source Licenses file (LICENSES.md) included with
-* this source code distribution or the Licensing information page available
-* at runtime from the About dialog for additional information.
-*****************************************************************************/
-<template>
-<div class="c-about c-about--licenses">
-    <h1>Open MCT Third Party Licenses</h1>
-    <p>This software includes components released under the following licenses:</p>
-    <div
-        v-for="(pkg, key) in packages"
-        :key="key"
-        class="c-license"
-    >
-        <h2 class="c-license__name">
-            {{ key }}
-        </h2>
-        <div class="c-license__details">
-            <span class="c-license__author"><em>Author</em> {{ pkg.publisher }}</span> |
-            <span class="c-license__license"><em>License(s)</em> {{ pkg.licenses }}</span> |
-            <span class="c-license__repo"><em>Repository</em> <a
-                :href="pkg.repository"
-                target="_blank"
-            >{{ pkg.repository }}</a></span>
-        </div>
-        <div class="c-license__text">
-            <p>{{ pkg.licenseText }}</p>
-        </div>
-    </div>
-</div>
-</template>
-<style lang="sass">
-</style>
-<script>
-import packages from './third-party-licenses.json';
-
-export default {
-    data() {
-        return {
-            packages: packages
-        };
-    }
-};
-</script>
diff --git a/src/plugins/licenses/LicensesComponent.vue b/src/plugins/licenses/LicensesComponent.vue
new file mode 100644
index 00000000000..48287d3d6f3
--- /dev/null
+++ b/src/plugins/licenses/LicensesComponent.vue
@@ -0,0 +1,55 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="c-about c-about--licenses">
+    <h1>Open MCT Third Party Licenses</h1>
+    <p>This software includes components released under the following licenses:</p>
+    <div v-for="(pkg, key) in packages" :key="key" class="c-license">
+      <h2 class="c-license__name">
+        {{ key }}
+      </h2>
+      <div class="c-license__details">
+        <span class="c-license__author"><em>Author</em> {{ pkg.publisher }}</span> |
+        <span class="c-license__license"><em>License(s)</em> {{ pkg.licenses }}</span> |
+        <span class="c-license__repo"
+          ><em>Repository</em>
+          <a :href="pkg.repository" target="_blank">{{ pkg.repository }}</a></span
+        >
+      </div>
+      <div class="c-license__text">
+        <p>{{ pkg.licenseText }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import packages from './third-party-licenses.json';
+
+export default {
+  data() {
+    return {
+      packages: packages
+    };
+  }
+};
+</script>
diff --git a/src/plugins/licenses/plugin.js b/src/plugins/licenses/plugin.js
index 7b9e9149c35..2ef12a179d9 100644
--- a/src/plugins/licenses/plugin.js
+++ b/src/plugins/licenses/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,20 +19,21 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import Licenses from './Licenses.vue';
-import Vue from 'vue';
+import mount from 'utils/mount';
+
+import Licenses from './LicensesComponent.vue';
 
 export default function () {
-    return function install(openmct) {
-        openmct.router.route(/^\/licenses$/, () => {
-            let licensesVm = new Vue(Licenses).$mount();
+  return function install(openmct) {
+    openmct.router.route(/^\/licenses$/, () => {
+      const { vNode, destroy } = mount(Licenses, { app: openmct.app });
 
-            openmct.overlays.overlay({
-                element: licensesVm.$el,
-                size: 'fullscreen',
-                dismissable: false,
-                onDestroy: () => licensesVm.$destroy()
-            });
-        });
-    };
+      openmct.overlays.overlay({
+        element: vNode.el,
+        size: 'fullscreen',
+        dismissable: false,
+        onDestroy: destroy
+      });
+    });
+  };
 }
diff --git a/src/plugins/licenses/third-party-licenses.json b/src/plugins/licenses/third-party-licenses.json
index 184024eb41b..54fbcf95858 100644
--- a/src/plugins/licenses/third-party-licenses.json
+++ b/src/plugins/licenses/third-party-licenses.json
@@ -256,13 +256,5 @@
     "licenseFile": "/Users/akhenry/Code/licenses/node_modules/vue/LICENSE",
     "licenseText": "The MIT License (MIT)\n\nCopyright (c) 2013-present, Yuxi (Evan) You\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.",
     "copyright": "Copyright (c) 2013-present, Yuxi (Evan) You"
-  },
-  "zepto@1.2.0": {
-    "licenses": "MIT",
-    "repository": "https://github.com/madrobby/zepto",
-    "path": "/Users/akhenry/Code/licenses/node_modules/zepto",
-    "licenseFile": "/Users/akhenry/Code/licenses/node_modules/zepto/README.md",
-    "licenseText": "Copyright (c) 2010-2018 Thomas Fuchs\nhttp://zeptojs.com/\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n\"Software\"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\nLIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE."
   }
 }
-
diff --git a/src/plugins/linkAction/LinkAction.js b/src/plugins/linkAction/LinkAction.js
new file mode 100644
index 00000000000..b26933ea51e
--- /dev/null
+++ b/src/plugins/linkAction/LinkAction.js
@@ -0,0 +1,156 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+export default class LinkAction {
+  constructor(openmct) {
+    this.name = 'Create Link';
+    this.key = 'link';
+    this.description = 'Create Link to object in another location.';
+    this.cssClass = 'icon-link';
+    this.group = 'action';
+    this.priority = 7;
+
+    this.openmct = openmct;
+    this.transaction = null;
+  }
+
+  appliesTo(objectPath) {
+    return true; // link away!
+  }
+
+  invoke(objectPath) {
+    this.object = objectPath[0];
+    this.parent = objectPath[1];
+    this.showForm(this.object, this.parent);
+  }
+
+  inNavigationPath() {
+    return this.openmct.router.path.some((objectInPath) =>
+      this.openmct.objects.areIdsEqual(objectInPath.identifier, this.object.identifier)
+    );
+  }
+
+  onSave(changes) {
+    this.startTransaction();
+
+    const inNavigationPath = this.inNavigationPath();
+    if (inNavigationPath && this.openmct.editor.isEditing()) {
+      this.openmct.editor.save();
+    }
+
+    const parentDomainObjectpath = changes.location || [this.parent];
+    const parent = parentDomainObjectpath[0];
+
+    this.linkInNewParent(this.object, parent);
+
+    return this.saveTransaction();
+  }
+
+  linkInNewParent(child, newParent) {
+    let compositionCollection = this.openmct.composition.get(newParent);
+
+    compositionCollection.add(child);
+  }
+
+  showForm(domainObject, parentDomainObject) {
+    const formStructure = {
+      title: `Link "${domainObject.name}" to a New Location`,
+      sections: [
+        {
+          rows: [
+            {
+              name: 'Location',
+              cssClass: 'grows',
+              control: 'locator',
+              parent: parentDomainObject,
+              required: true,
+              validate: this.validate(parentDomainObject),
+              key: 'location'
+            }
+          ]
+        }
+      ]
+    };
+    this.openmct.forms.showForm(formStructure).then(this.onSave.bind(this));
+  }
+
+  validate(currentParent) {
+    return (data) => {
+      // default current parent to ROOT, if it's null, then it's a root level item
+      if (!currentParent) {
+        currentParent = {
+          identifier: {
+            key: 'ROOT',
+            namespace: ''
+          }
+        };
+      }
+
+      const parentCandidatePath = data.value;
+      const parentCandidate = parentCandidatePath[0];
+      const objectKeystring = this.openmct.objects.makeKeyString(this.object.identifier);
+
+      if (!this.openmct.objects.isPersistable(parentCandidate.identifier)) {
+        return false;
+      }
+
+      // check if moving to same place
+      if (this.openmct.objects.areIdsEqual(parentCandidate.identifier, currentParent.identifier)) {
+        return false;
+      }
+
+      // check if moving to a child
+      if (
+        parentCandidatePath.some((candidatePath) => {
+          return this.openmct.objects.areIdsEqual(candidatePath.identifier, this.object.identifier);
+        })
+      ) {
+        return false;
+      }
+
+      const parentCandidateComposition = parentCandidate.composition;
+      if (
+        parentCandidateComposition &&
+        parentCandidateComposition.indexOf(objectKeystring) !== -1
+      ) {
+        return false;
+      }
+
+      return parentCandidate && this.openmct.composition.checkPolicy(parentCandidate, this.object);
+    };
+  }
+  startTransaction() {
+    if (!this.openmct.objects.isTransactionActive()) {
+      this.transaction = this.openmct.objects.startTransaction();
+    }
+  }
+
+  async saveTransaction() {
+    if (!this.transaction) {
+      return;
+    }
+
+    await this.transaction.commit();
+    this.openmct.objects.endTransaction();
+    this.transaction = null;
+  }
+}
diff --git a/src/plugins/linkAction/plugin.js b/src/plugins/linkAction/plugin.js
new file mode 100644
index 00000000000..fb1f533e36f
--- /dev/null
+++ b/src/plugins/linkAction/plugin.js
@@ -0,0 +1,28 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import LinkAction from './LinkAction.js';
+
+export default function () {
+  return function (openmct) {
+    openmct.actions.register(new LinkAction(openmct));
+  };
+}
diff --git a/src/plugins/linkAction/pluginSpec.js b/src/plugins/linkAction/pluginSpec.js
new file mode 100644
index 00000000000..7ed5713c268
--- /dev/null
+++ b/src/plugins/linkAction/pluginSpec.js
@@ -0,0 +1,122 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import { createOpenMct, getMockObjects, resetApplicationState } from 'utils/testing';
+
+import LinkAction from './LinkAction.js';
+import LinkActionPlugin from './plugin.js';
+
+describe('The Link Action plugin', () => {
+  let openmct;
+  let linkAction;
+  let childObject;
+  let parentObject;
+  let anotherParentObject;
+  const ORIGINAL_PARENT_ID = 'original-parent-object';
+  const LINK_ACITON_KEY = 'link';
+  const LINK_ACITON_NAME = 'Create Link';
+
+  beforeEach((done) => {
+    const appHolder = document.createElement('div');
+    appHolder.style.width = '640px';
+    appHolder.style.height = '480px';
+
+    openmct = createOpenMct();
+
+    childObject = getMockObjects({
+      objectKeyStrings: ['folder'],
+      overwrite: {
+        folder: {
+          name: 'Child Folder',
+          location: ORIGINAL_PARENT_ID,
+          identifier: {
+            namespace: '',
+            key: 'child-folder-object'
+          }
+        }
+      }
+    }).folder;
+
+    parentObject = getMockObjects({
+      objectKeyStrings: ['folder'],
+      overwrite: {
+        folder: {
+          name: 'Parent Folder',
+          identifier: {
+            namespace: '',
+            key: 'original-parent-object'
+          },
+          composition: [childObject.identifier]
+        }
+      }
+    }).folder;
+
+    anotherParentObject = getMockObjects({
+      objectKeyStrings: ['folder'],
+      overwrite: {
+        folder: {
+          name: 'Another Parent Folder'
+        }
+      }
+    }).folder;
+
+    openmct.router.path = [childObject]; // preview action uses this in it's applyTo method
+
+    openmct.install(LinkActionPlugin());
+
+    openmct.on('start', done);
+    openmct.startHeadless(appHolder);
+  });
+
+  afterEach(() => {
+    resetApplicationState(openmct);
+  });
+
+  it('should be defined', () => {
+    expect(LinkActionPlugin).toBeDefined();
+  });
+
+  it('should make the link action available for an appropriate domainObject', () => {
+    const actionCollection = openmct.actions.getActionsCollection([childObject]);
+    const visibleActions = actionCollection.getVisibleActions();
+    linkAction = visibleActions.find((a) => a.key === LINK_ACITON_KEY);
+
+    expect(linkAction.name).toEqual(LINK_ACITON_NAME);
+  });
+
+  describe('when linking an object in a new parent', () => {
+    beforeEach(() => {
+      linkAction = new LinkAction(openmct);
+      linkAction.linkInNewParent(childObject, anotherParentObject);
+    });
+
+    it("the child object's identifier should be in the new parent's composition and location set to original parent", () => {
+      let newParentChild = anotherParentObject.composition[0];
+      expect(newParentChild).toEqual(childObject.identifier);
+      expect(childObject.location).toEqual(ORIGINAL_PARENT_ID);
+    });
+
+    it("the child object's identifier should remain in the original parent's composition", () => {
+      let oldParentCompositionChild = parentObject.composition[0];
+      expect(oldParentCompositionChild).toEqual(childObject.identifier);
+    });
+  });
+});
diff --git a/src/plugins/localStorage/LocalStorageObjectProvider.js b/src/plugins/localStorage/LocalStorageObjectProvider.js
new file mode 100644
index 00000000000..ca6f60dd8b9
--- /dev/null
+++ b/src/plugins/localStorage/LocalStorageObjectProvider.js
@@ -0,0 +1,110 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { filter__proto__ } from '../../utils/sanitization.js';
+
+export default class LocalStorageObjectProvider {
+  constructor(spaceKey = 'mct') {
+    this.localStorage = window.localStorage;
+    this.spaceKey = spaceKey;
+    this.initializeSpace(spaceKey);
+  }
+
+  get(identifier) {
+    if (this.getSpaceAsObject()[identifier.key] !== undefined) {
+      const persistedModel = this.getSpaceAsObject()[identifier.key];
+      const domainObject = {
+        identifier,
+        ...persistedModel
+      };
+
+      return Promise.resolve(domainObject);
+    } else {
+      return Promise.resolve(undefined);
+    }
+  }
+
+  getAllObjects() {
+    return this.getSpaceAsObject();
+  }
+
+  create(object) {
+    return this.persistObject(object);
+  }
+
+  update(object) {
+    return this.persistObject(object);
+  }
+
+  /**
+   * @private
+   */
+  persistObject(domainObject) {
+    let space = this.getSpaceAsObject();
+    space[domainObject.identifier.key] = domainObject;
+
+    this.persistSpace(space);
+
+    return Promise.resolve(true);
+  }
+
+  /**
+   * @private
+   */
+  persistSpace(space) {
+    this.localStorage.setItem(this.spaceKey, JSON.stringify(space));
+  }
+
+  isReadOnly() {
+    return false;
+  }
+
+  /**
+   * @private
+   */
+  getSpace() {
+    return this.localStorage.getItem(this.spaceKey);
+  }
+
+  /**
+   * @private
+   */
+  getSpaceAsObject() {
+    return JSON.parse(this.getSpace(), filter__proto__);
+  }
+
+  /**
+   * @private
+   */
+  initializeSpace() {
+    if (this.isEmpty()) {
+      this.localStorage.setItem(this.spaceKey, JSON.stringify({}));
+    }
+  }
+
+  /**
+   * @private
+   */
+  isEmpty() {
+    return this.getSpace() === null;
+  }
+}
diff --git a/src/plugins/localStorage/plugin.js b/src/plugins/localStorage/plugin.js
new file mode 100644
index 00000000000..4d28a2ec974
--- /dev/null
+++ b/src/plugins/localStorage/plugin.js
@@ -0,0 +1,29 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import LocalStorageObjectProvider from './LocalStorageObjectProvider.js';
+
+export default function (namespace = '', storageSpace = 'mct') {
+  return function (openmct) {
+    openmct.objects.addProvider(namespace, new LocalStorageObjectProvider(storageSpace));
+  };
+}
diff --git a/src/plugins/localStorage/pluginSpec.js b/src/plugins/localStorage/pluginSpec.js
new file mode 100644
index 00000000000..9ad22924d4a
--- /dev/null
+++ b/src/plugins/localStorage/pluginSpec.js
@@ -0,0 +1,114 @@
+/* eslint-disable no-invalid-this */
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+
+describe('The local storage plugin', () => {
+  let space;
+  let openmct;
+
+  beforeEach(() => {
+    space = `test-${Date.now()}`;
+    openmct = createOpenMct();
+
+    openmct.install(openmct.plugins.LocalStorage('', space));
+  });
+
+  it('initializes localstorage if not already initialized', () => {
+    const ls = getLocalStorage();
+    expect(ls[space]).toBeDefined();
+  });
+
+  it('successfully persists an object to localstorage', async () => {
+    const domainObject = {
+      identifier: {
+        namespace: '',
+        key: 'test-key'
+      },
+      name: 'A test object'
+    };
+    let spaceAsObject = getSpaceAsObject();
+    expect(spaceAsObject['test-key']).not.toBeDefined();
+
+    await openmct.objects.save(domainObject);
+
+    spaceAsObject = getSpaceAsObject();
+    expect(spaceAsObject['test-key']).toBeDefined();
+  });
+
+  it('successfully retrieves an object from localstorage', async () => {
+    const domainObject = {
+      identifier: {
+        namespace: '',
+        key: 'test-key'
+      },
+      name: 'A test object',
+      anotherProperty: Date.now()
+    };
+    await openmct.objects.save(domainObject);
+
+    let testObject = await openmct.objects.get(domainObject.identifier);
+
+    expect(testObject.name).toEqual(domainObject.name);
+    expect(testObject.anotherProperty).toEqual(domainObject.anotherProperty);
+  });
+
+  it('prevents prototype pollution from manipulated localstorage', async () => {
+    spyOn(console, 'warn');
+
+    const identifier = {
+      namespace: '',
+      key: 'test-key'
+    };
+
+    const pollutedSpaceString = `{"test-key":{"__proto__":{"toString":"foobar"},"type":"folder","name":"A test object","identifier":{"namespace":"","key":"test-key"}}}`;
+    getLocalStorage()[space] = pollutedSpaceString;
+
+    let testObject = await openmct.objects.get(identifier);
+
+    const hasPollutedProto =
+      Object.prototype.hasOwnProperty.call(testObject, '__proto__') ||
+      Object.getPrototypeOf(testObject) !== Object.getPrototypeOf({});
+
+    // warning from openmct.objects.get
+    expect(console.warn).not.toHaveBeenCalled();
+    expect(hasPollutedProto).toBeFalse();
+  });
+
+  afterEach(() => {
+    resetApplicationState(openmct);
+    resetLocalStorage();
+  });
+
+  function resetLocalStorage() {
+    delete window.localStorage[space];
+  }
+
+  function getLocalStorage() {
+    return window.localStorage;
+  }
+
+  function getSpaceAsObject() {
+    return JSON.parse(getLocalStorage()[space]);
+  }
+});
diff --git a/src/plugins/localTimeSystem/LocalTimeFormat.js b/src/plugins/localTimeSystem/LocalTimeFormat.js
index 719dc7c42c0..50d2ad49328 100644
--- a/src/plugins/localTimeSystem/LocalTimeFormat.js
+++ b/src/plugins/localTimeSystem/LocalTimeFormat.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,57 +20,47 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    'moment'
-], function (
-    moment
-) {
-    const DATE_FORMAT = "YYYY-MM-DD h:mm:ss.SSS a";
+import moment from 'moment';
 
-    const DATE_FORMATS = [
-        DATE_FORMAT,
-        "YYYY-MM-DD h:mm:ss a",
-        "YYYY-MM-DD h:mm a",
-        "YYYY-MM-DD"
-    ];
+const DATE_FORMAT = 'YYYY-MM-DD h:mm:ss.SSS a';
 
-    /**
-     * @typedef Scale
-     * @property {number} min the minimum scale value, in ms
-     * @property {number} max the maximum scale value, in ms
-     */
+const DATE_FORMATS = [DATE_FORMAT, 'YYYY-MM-DD h:mm:ss a', 'YYYY-MM-DD h:mm a', 'YYYY-MM-DD'];
 
-    /**
-     * Formatter for UTC timestamps. Interprets numeric values as
-     * milliseconds since the start of 1970.
-     *
-     * @implements {Format}
-     * @constructor
-     * @memberof platform/commonUI/formats
-     */
-    function LocalTimeFormat() {
-    }
+/**
+ * @typedef Scale
+ * @property {number} min the minimum scale value, in ms
+ * @property {number} max the maximum scale value, in ms
+ */
 
-    /**
-     *
-     * @param value
-     * @returns {string} the formatted date
-     */
-    LocalTimeFormat.prototype.format = function (value, scale) {
-        return moment(value).format(DATE_FORMAT);
-    };
+/**
+ * Formatter for UTC timestamps. Interprets numeric values as
+ * milliseconds since the start of 1970.
+ *
+ * @implements {Format}
+ * @constructor
+ * @memberof platform/commonUI/formats
+ */
+export default function LocalTimeFormat() {
+  this.key = 'local-format';
+}
 
-    LocalTimeFormat.prototype.parse = function (text) {
-        if (typeof text === 'number') {
-            return text;
-        }
+/**
+ *
+ * @param value
+ * @returns {string} the formatted date
+ */
+LocalTimeFormat.prototype.format = function (value, scale) {
+  return moment(value).format(DATE_FORMAT);
+};
 
-        return moment(text, DATE_FORMATS).valueOf();
-    };
+LocalTimeFormat.prototype.parse = function (text) {
+  if (typeof text === 'number') {
+    return text;
+  }
 
-    LocalTimeFormat.prototype.validate = function (text) {
-        return moment(text, DATE_FORMATS).isValid();
-    };
+  return moment(text, DATE_FORMATS).valueOf();
+};
 
-    return LocalTimeFormat;
-});
+LocalTimeFormat.prototype.validate = function (text) {
+  return moment(text, DATE_FORMATS).isValid();
+};
diff --git a/src/plugins/localTimeSystem/LocalTimeSystem.js b/src/plugins/localTimeSystem/LocalTimeSystem.js
index 3f08d07fe4a..5c92c32cb7c 100644
--- a/src/plugins/localTimeSystem/LocalTimeSystem.js
+++ b/src/plugins/localTimeSystem/LocalTimeSystem.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,29 +20,25 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([], function () {
-
+/**
+ * This time system supports UTC dates and provides a ticking clock source.
+ * @implements TimeSystem
+ * @constructor
+ */
+export default class LocalTimeSystem {
+  constructor() {
     /**
-     * This time system supports UTC dates and provides a ticking clock source.
-     * @implements TimeSystem
-     * @constructor
+     * Some metadata, which will be used to identify the time system in
+     * the UI
+     * @type {{key: string, name: string, glyph: string}}
      */
-    function LocalTimeSystem() {
-
-        /**
-         * Some metadata, which will be used to identify the time system in
-         * the UI
-         * @type {{key: string, name: string, glyph: string}}
-         */
-        this.key = 'local';
-        this.name = 'Local';
-        this.cssClass = 'icon-clock';
-
-        this.timeFormat = 'local-format';
-        this.durationFormat = 'duration';
+    this.key = 'local';
+    this.name = 'Local';
+    this.cssClass = 'icon-clock';
 
-        this.isUTCBased = true;
-    }
+    this.timeFormat = 'local-format';
+    this.durationFormat = 'duration';
 
-    return LocalTimeSystem;
-});
+    this.isUTCBased = true;
+  }
+}
diff --git a/src/plugins/localTimeSystem/plugin.js b/src/plugins/localTimeSystem/plugin.js
index bac85a0ac61..2c23bd38111 100644
--- a/src/plugins/localTimeSystem/plugin.js
+++ b/src/plugins/localTimeSystem/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,21 +20,12 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    "./LocalTimeSystem",
-    "./LocalTimeFormat"
-], function (
-    LocalTimeSystem,
-    LocalTimeFormat
-) {
-    return function () {
-        return function (openmct) {
-            openmct.time.addTimeSystem(new LocalTimeSystem());
+import LocalTimeFormat from './LocalTimeFormat.js';
+import LocalTimeSystem from './LocalTimeSystem.js';
 
-            openmct.legacyExtension('formats', {
-                key: 'local-format',
-                implementation: LocalTimeFormat
-            });
-        };
-    };
-});
+export default function () {
+  return function (openmct) {
+    openmct.time.addTimeSystem(new LocalTimeSystem());
+    openmct.telemetry.addFormat(new LocalTimeFormat());
+  };
+}
diff --git a/src/plugins/localTimeSystem/pluginSpec.js b/src/plugins/localTimeSystem/pluginSpec.js
index bcea2429762..af27504d55e 100644
--- a/src/plugins/localTimeSystem/pluginSpec.js
+++ b/src/plugins/localTimeSystem/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,95 +20,88 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import {
-    createOpenMct,
-    resetApplicationState
-} from 'utils/testing';
+import { createOpenMct, resetApplicationState } from 'utils/testing';
 
-describe("The local time", () => {
-    const LOCAL_FORMAT_KEY = 'local-format';
-    const LOCAL_SYSTEM_KEY = 'local';
-    const JUNK = "junk";
-    const TIMESTAMP = -14256000000;
-    const DATESTRING = '1969-07-20 12:00:00.000 am';
-    let openmct;
+describe('The local time', () => {
+  const LOCAL_FORMAT_KEY = 'local-format';
+  const LOCAL_SYSTEM_KEY = 'local';
+  const JUNK = 'junk';
+  const TIMESTAMP = -14256000000;
+  const DATESTRING = '1969-07-20 12:00:00.000 am';
+  let openmct;
 
-    beforeEach((done) => {
+  beforeEach((done) => {
+    openmct = createOpenMct();
 
-        openmct = createOpenMct();
+    openmct.install(openmct.plugins.LocalTimeSystem());
 
-        openmct.install(openmct.plugins.LocalTimeSystem());
+    openmct.on('start', done);
+    openmct.startHeadless();
+  });
 
-        openmct.on('start', done);
-        openmct.startHeadless();
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
 
-    });
+  describe('system', function () {
+    let localTimeSystem;
 
-    afterEach(() => {
-        return resetApplicationState(openmct);
+    beforeEach(() => {
+      localTimeSystem = openmct.time.timeSystem(LOCAL_SYSTEM_KEY, {
+        start: 0,
+        end: 1
+      });
     });
 
-    describe("system", function () {
-
-        let localTimeSystem;
-
-        beforeEach(() => {
-            localTimeSystem = openmct.time.timeSystem(LOCAL_SYSTEM_KEY, {
-                start: 0,
-                end: 1
-            });
-        });
+    it('is installed', () => {
+      let timeSystems = openmct.time.getAllTimeSystems();
+      let local = timeSystems.find((ts) => ts.key === LOCAL_SYSTEM_KEY);
 
-        it("is installed", () => {
-            let timeSystems = openmct.time.getAllTimeSystems();
-            let local = timeSystems.find(ts => ts.key === LOCAL_SYSTEM_KEY);
-
-            expect(local).not.toEqual(-1);
-        });
-
-        it("can be set to be the main time system", () => {
-            expect(openmct.time.timeSystem().key).toBe(LOCAL_SYSTEM_KEY);
-        });
+      expect(local).not.toEqual(-1);
+    });
 
-        it("uses the local-format time format", () => {
-            expect(localTimeSystem.timeFormat).toBe(LOCAL_FORMAT_KEY);
-        });
+    it('can be set to be the main time system', () => {
+      expect(openmct.time.timeSystem().key).toBe(LOCAL_SYSTEM_KEY);
+    });
 
-        it("is UTC based", () => {
-            expect(localTimeSystem.isUTCBased).toBe(true);
-        });
+    it('uses the local-format time format', () => {
+      expect(localTimeSystem.timeFormat).toBe(LOCAL_FORMAT_KEY);
+    });
 
-        it("defines expected metadata", () => {
-            expect(localTimeSystem.key).toBe(LOCAL_SYSTEM_KEY);
-            expect(localTimeSystem.name).toBeDefined();
-            expect(localTimeSystem.cssClass).toBeDefined();
-            expect(localTimeSystem.durationFormat).toBeDefined();
-        });
+    it('is UTC based', () => {
+      expect(localTimeSystem.isUTCBased).toBe(true);
     });
 
-    describe("formatter can be obtained from the telemetry API and", () => {
+    it('defines expected metadata', () => {
+      expect(localTimeSystem.key).toBe(LOCAL_SYSTEM_KEY);
+      expect(localTimeSystem.name).toBeDefined();
+      expect(localTimeSystem.cssClass).toBeDefined();
+      expect(localTimeSystem.durationFormat).toBeDefined();
+    });
+  });
 
-        let localTimeFormatter;
-        let dateString;
-        let timeStamp;
+  describe('formatter can be obtained from the telemetry API and', () => {
+    let localTimeFormatter;
+    let dateString;
+    let timeStamp;
 
-        beforeEach(() => {
-            localTimeFormatter = openmct.telemetry.getFormatter(LOCAL_FORMAT_KEY);
-            dateString = localTimeFormatter.format(TIMESTAMP);
-            timeStamp = localTimeFormatter.parse(DATESTRING);
-        });
+    beforeEach(() => {
+      localTimeFormatter = openmct.telemetry.getFormatter(LOCAL_FORMAT_KEY);
+      dateString = localTimeFormatter.format(TIMESTAMP);
+      timeStamp = localTimeFormatter.parse(DATESTRING);
+    });
 
-        it("will format a timestamp in local time format", () => {
-            expect(localTimeFormatter.format(TIMESTAMP)).toBe(dateString);
-        });
+    it('will format a timestamp in local time format', () => {
+      expect(localTimeFormatter.format(TIMESTAMP)).toBe(dateString);
+    });
 
-        it("will parse an local time Date String into milliseconds", () => {
-            expect(localTimeFormatter.parse(DATESTRING)).toBe(timeStamp);
-        });
+    it('will parse an local time Date String into milliseconds', () => {
+      expect(localTimeFormatter.parse(DATESTRING)).toBe(timeStamp);
+    });
 
-        it("will validate correctly", () => {
-            expect(localTimeFormatter.validate(DATESTRING)).toBe(true);
-            expect(localTimeFormatter.validate(JUNK)).toBe(false);
-        });
+    it('will validate correctly', () => {
+      expect(localTimeFormatter.validate(DATESTRING)).toBe(true);
+      expect(localTimeFormatter.validate(JUNK)).toBe(false);
     });
+  });
 });
diff --git a/src/plugins/move/MoveAction.js b/src/plugins/move/MoveAction.js
index df8cf5fda46..d78a5c9f436 100644
--- a/src/plugins/move/MoveAction.js
+++ b/src/plugins/move/MoveAction.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,157 +20,199 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 export default class MoveAction {
-    constructor(openmct) {
-        this.name = 'Move';
-        this.key = 'move';
-        this.description = 'Move this object from its containing object to another object.';
-        this.cssClass = "icon-move";
-        this.group = "action";
-        this.priority = 7;
-
-        this.openmct = openmct;
+  constructor(openmct) {
+    this.name = 'Move';
+    this.key = 'move';
+    this.description = 'Move this object from its containing object to another object.';
+    this.cssClass = 'icon-move';
+    this.group = 'action';
+    this.priority = 7;
+
+    this.openmct = openmct;
+    this.transaction = null;
+  }
+
+  invoke(objectPath) {
+    this.object = objectPath[0];
+    this.oldParent = objectPath[1];
+
+    this.showForm(this.object, this.oldParent);
+  }
+
+  inNavigationPath() {
+    return this.openmct.router.path.some((objectInPath) =>
+      this.openmct.objects.areIdsEqual(objectInPath.identifier, this.object.identifier)
+    );
+  }
+
+  navigateTo(objectPath) {
+    const urlPath = objectPath
+      .reverse()
+      .map((object) => this.openmct.objects.makeKeyString(object.identifier))
+      .join('/');
+
+    this.openmct.router.navigate('#/browse/' + urlPath);
+  }
+
+  addToNewParent(child, newParent) {
+    const newParentKeyString = this.openmct.objects.makeKeyString(newParent.identifier);
+    const compositionCollection = this.openmct.composition.get(newParent);
+
+    this.openmct.objects.mutate(child, 'location', newParentKeyString);
+    compositionCollection.add(child);
+  }
+
+  async onSave(changes) {
+    this.startTransaction();
+
+    const inNavigationPath = this.inNavigationPath(this.object);
+    const parentDomainObjectpath = changes.location || [this.parent];
+    const parent = parentDomainObjectpath[0];
+
+    if (this.openmct.objects.areIdsEqual(parent.identifier, this.oldParent.identifier)) {
+      this.openmct.notifications.error(`Error: new location cant not be same as old`);
+
+      return;
     }
 
-    async invoke(objectPath) {
-        let object = objectPath[0];
-        let inNavigationPath = this.inNavigationPath(object);
-        let oldParent = objectPath[1];
-        let dialogService = this.openmct.$injector.get('dialogService');
-        let dialogForm = this.getDialogForm(object, oldParent);
-        let userInput;
-
-        try {
-            userInput = await dialogService.getUserInput(dialogForm, { name: object.name });
-        } catch (err) {
-            // user canceled, most likely
-            return;
-        }
-
-        // if we need to update name
-        if (object.name !== userInput.name) {
-            this.openmct.objects.mutate(object, 'name', userInput.name);
-        }
-
-        let parentContext = userInput.location.getCapability('context');
-        let newParent = await this.openmct.objects.get(parentContext.domainObject.id);
-
-        if (inNavigationPath && this.openmct.editor.isEditing()) {
-            this.openmct.editor.save();
-        }
-
-        this.addToNewParent(object, newParent);
-        this.removeFromOldParent(oldParent, object);
-
-        if (inNavigationPath) {
-            let newObjectPath = await this.openmct.objects.getOriginalPath(object.identifier);
-            let root = await this.openmct.objects.getRoot();
-            let rootChildCount = root.composition.length;
-
-            // if not multiple root children, remove root from path
-            if (rootChildCount < 2) {
-                newObjectPath.pop(); // remove ROOT
-            }
-
-            this.navigateTo(newObjectPath);
-        }
+    if (changes.name && changes.name !== this.object.name) {
+      this.object.name = changes.name;
     }
 
-    inNavigationPath(object) {
-        return this.openmct.router.path
-            .some(objectInPath => this.openmct.objects.areIdsEqual(objectInPath.identifier, object.identifier));
-    }
+    this.addToNewParent(this.object, parent);
+    this.removeFromOldParent(this.object);
 
-    navigateTo(objectPath) {
-        let urlPath = objectPath.reverse()
-            .map(object => this.openmct.objects.makeKeyString(object.identifier))
-            .join("/");
+    await this.saveTransaction();
 
-        window.location.href = '#/browse/' + urlPath;
+    if (!inNavigationPath) {
+      return;
     }
 
-    addToNewParent(child, newParent) {
-        let newParentKeyString = this.openmct.objects.makeKeyString(newParent.identifier);
-        let compositionCollection = this.openmct.composition.get(newParent);
-
-        this.openmct.objects.mutate(child, 'location', newParentKeyString);
-        compositionCollection.add(child);
+    let newObjectPath;
+
+    if (parentDomainObjectpath) {
+      newObjectPath = parentDomainObjectpath && [this.object].concat(parentDomainObjectpath);
+    } else {
+      const root = await this.openmct.objects.getRoot();
+      const rootCompositionCollection = this.openmct.composition.get(root);
+      const rootComposition = await rootCompositionCollection.load();
+      const rootChildCount = rootComposition.length;
+      newObjectPath = await this.openmct.objects.getOriginalPath(this.object.identifier);
+
+      // if not multiple root children, remove root from path
+      if (rootChildCount < 2) {
+        newObjectPath.pop(); // remove ROOT
+      }
     }
 
-    removeFromOldParent(parent, child) {
-        let compositionCollection = this.openmct.composition.get(parent);
-
-        compositionCollection.remove(child);
-    }
-
-    getDialogForm(object, parent) {
-        return {
-            name: "Move Item",
-            sections: [
-                {
-                    rows: [
-                        {
-                            key: "name",
-                            control: "textfield",
-                            name: "Name",
-                            pattern: "\\S+",
-                            required: true,
-                            cssClass: "l-input-lg"
-                        },
-                        {
-                            name: "Location",
-                            control: "locator",
-                            validate: this.validate(object, parent),
-                            key: 'location'
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-
-    validate(object, currentParent) {
-        return (parentCandidate) => {
-            let currentParentKeystring = this.openmct.objects.makeKeyString(currentParent.identifier);
-            let parentCandidateKeystring = this.openmct.objects.makeKeyString(parentCandidate.getId());
-            let objectKeystring = this.openmct.objects.makeKeyString(object.identifier);
-
-            if (!parentCandidateKeystring || !currentParentKeystring) {
-                return false;
-            }
-
-            if (parentCandidateKeystring === currentParentKeystring) {
-                return false;
-            }
-
-            if (parentCandidateKeystring === objectKeystring) {
-                return false;
+    this.navigateTo(newObjectPath);
+  }
+
+  removeFromOldParent(child) {
+    const compositionCollection = this.openmct.composition.get(this.oldParent);
+    compositionCollection.remove(child);
+  }
+
+  showForm(domainObject, parentDomainObject) {
+    const formStructure = {
+      title: 'Move Item',
+      sections: [
+        {
+          rows: [
+            {
+              key: 'name',
+              control: 'textfield',
+              name: 'Title',
+              pattern: '\\S+',
+              required: true,
+              cssClass: 'l-input-lg',
+              value: domainObject.name
+            },
+            {
+              name: 'Location',
+              cssClass: 'grows',
+              control: 'locator',
+              parent: parentDomainObject,
+              required: true,
+              validate: this.validate(parentDomainObject),
+              key: 'location'
             }
-
-            if (parentCandidate.getModel().composition.indexOf(objectKeystring) !== -1) {
-                return false;
-            }
-
-            return this.openmct.composition.checkPolicy(
-                parentCandidate.useCapability('adapter'),
-                object
-            );
-        };
+          ]
+        }
+      ]
+    };
+
+    this.openmct.forms.showForm(formStructure).then(this.onSave.bind(this));
+  }
+
+  validate(currentParent) {
+    return (data) => {
+      const parentCandidatePath = data.value;
+      const parentCandidate = parentCandidatePath[0];
+
+      // check if moving to same place
+      if (this.openmct.objects.areIdsEqual(parentCandidate.identifier, currentParent.identifier)) {
+        return false;
+      }
+
+      // check if moving to a child
+      if (
+        parentCandidatePath.some((candidatePath) => {
+          return this.openmct.objects.areIdsEqual(candidatePath.identifier, this.object.identifier);
+        })
+      ) {
+        return false;
+      }
+
+      if (!this.openmct.objects.isPersistable(parentCandidate.identifier)) {
+        return false;
+      }
+
+      const objectKeystring = this.openmct.objects.makeKeyString(this.object.identifier);
+      const parentCandidateComposition = parentCandidate.composition;
+
+      if (
+        parentCandidateComposition &&
+        parentCandidateComposition.indexOf(objectKeystring) !== -1
+      ) {
+        return false;
+      }
+
+      return parentCandidate && this.openmct.composition.checkPolicy(parentCandidate, this.object);
+    };
+  }
+
+  appliesTo(objectPath) {
+    const parent = objectPath[1];
+    const parentType = parent && this.openmct.types.get(parent.type);
+    const child = objectPath[0];
+    const childType = child && this.openmct.types.get(child.type);
+    const isPersistable = this.openmct.objects.isPersistable(child.identifier);
+
+    if (parent?.locked || !isPersistable) {
+      return false;
     }
 
-    appliesTo(objectPath) {
-        let parent = objectPath[1];
-        let parentType = parent && this.openmct.types.get(parent.type);
-        let child = objectPath[0];
-        let childType = child && this.openmct.types.get(child.type);
+    return (
+      parentType?.definition.creatable &&
+      childType?.definition.creatable &&
+      Array.isArray(parent.composition)
+    );
+  }
 
-        if (child.locked || (parent && parent.locked)) {
-            return false;
-        }
+  startTransaction() {
+    if (!this.openmct.objects.isTransactionActive()) {
+      this.transaction = this.openmct.objects.startTransaction();
+    }
+  }
 
-        return parentType
-            && parentType.definition.creatable
-            && childType
-            && childType.definition.creatable
-            && Array.isArray(parent.composition);
+  async saveTransaction() {
+    if (!this.transaction) {
+      return;
     }
+
+    await this.transaction.commit();
+    this.openmct.objects.endTransaction();
+    this.transaction = null;
+  }
 }
diff --git a/src/plugins/move/plugin.js b/src/plugins/move/plugin.js
index 9f50d55e360..e77a0344bc0 100644
--- a/src/plugins/move/plugin.js
+++ b/src/plugins/move/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,10 +19,10 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import MoveAction from "./MoveAction";
+import MoveAction from './MoveAction.js';
 
 export default function () {
-    return function (openmct) {
-        openmct.actions.register(new MoveAction(openmct));
-    };
+  return function (openmct) {
+    openmct.actions.register(new MoveAction(openmct));
+  };
 }
diff --git a/src/plugins/move/pluginSpec.js b/src/plugins/move/pluginSpec.js
index cee1745c253..d6452d677fa 100644
--- a/src/plugins/move/pluginSpec.js
+++ b/src/plugins/move/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,84 +19,134 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import {
-    createOpenMct,
-    resetApplicationState,
-    getMockObjects
-} from 'utils/testing';
+import { createOpenMct, getMockObjects, resetApplicationState } from 'utils/testing';
 
-describe("The Move Action plugin", () => {
+describe('The Move Action plugin', () => {
+  let openmct;
+  let moveAction;
+  let childObject;
+  let parentObject;
+  let anotherParentObject;
 
-    let openmct;
-    let moveAction;
-    let childObject;
-    let parentObject;
-    let anotherParentObject;
+  // this setups up the app
+  beforeEach((done) => {
+    openmct = createOpenMct();
 
-    // this setups up the app
-    beforeEach((done) => {
-        openmct = createOpenMct();
-
-        childObject = getMockObjects({
-            objectKeyStrings: ['folder'],
-            overwrite: {
-                folder: {
-                    name: "Child Folder",
-                    identifier: {
-                        namespace: "",
-                        key: "child-folder-object"
-                    }
-                }
-            }
-        }).folder;
-        parentObject = getMockObjects({
-            objectKeyStrings: ['folder'],
-            overwrite: {
-                folder: {
-                    name: "Parent Folder",
-                    composition: [childObject.identifier]
-                }
-            }
-        }).folder;
-        anotherParentObject = getMockObjects({
-            objectKeyStrings: ['folder'],
-            overwrite: {
-                folder: {
-                    name: "Another Parent Folder"
-                }
-            }
-        }).folder;
-
-        openmct.on('start', done);
-        openmct.startHeadless();
-
-        moveAction = openmct.actions._allActions.move;
+    childObject = getMockObjects({
+      objectKeyStrings: ['folder'],
+      overwrite: {
+        folder: {
+          name: 'Child Folder',
+          identifier: {
+            namespace: '',
+            key: 'child-folder-object'
+          },
+          location: 'parent-folder-object'
+        }
+      }
+    }).folder;
+
+    parentObject = getMockObjects({
+      objectKeyStrings: ['folder'],
+      overwrite: {
+        folder: {
+          name: 'Parent Folder',
+          composition: [childObject.identifier],
+          identifier: {
+            namespace: '',
+            key: 'parent-folder-object'
+          }
+        }
+      }
+    }).folder;
+
+    anotherParentObject = getMockObjects({
+      objectKeyStrings: ['folder'],
+      overwrite: {
+        folder: {
+          name: 'Another Parent Folder',
+          identifier: {
+            namespace: '',
+            key: 'another-parent-folder-object'
+          }
+        }
+      }
+    }).folder;
+
+    openmct.on('start', done);
+    openmct.startHeadless();
+
+    moveAction = openmct.actions._allActions.move;
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  it('should be defined', () => {
+    expect(moveAction).toBeDefined();
+  });
+
+  describe('when determining the object is applicable', () => {
+    beforeEach(() => {
+      spyOn(moveAction, 'appliesTo').and.callThrough();
     });
 
-    afterEach(() => {
-        return resetApplicationState(openmct);
+    it('should be true when the parent is creatable and has composition', () => {
+      let applies = moveAction.appliesTo([childObject, parentObject]);
+      expect(applies).toBe(true);
     });
 
-    it("should be defined", () => {
-        expect(moveAction).toBeDefined();
+    it('should be true when the child is locked and not an alias', () => {
+      childObject.locked = true;
+      let applies = moveAction.appliesTo([childObject, parentObject]);
+      expect(applies).toBe(true);
     });
 
-    describe("when moving an object to a new parent and removing from the old parent", () => {
+    it('should still be true when the child is locked and is an alias', () => {
+      childObject.locked = true;
+      childObject.location = 'another-parent-folder-object';
+      let applies = moveAction.appliesTo([childObject, parentObject]);
+      expect(applies).toBe(true);
+    });
+  });
 
-        beforeEach(() => {
-            moveAction.addToNewParent(childObject, anotherParentObject);
-            moveAction.removeFromOldParent(parentObject, childObject);
-        });
+  describe('when moving an object to a new parent and removing from the old parent', () => {
+    let unObserve;
+    beforeEach((done) => {
+      openmct.router.path = [];
 
-        it("the child object's identifier should be in the new parent's composition", () => {
-            let newParentChild = anotherParentObject.composition[0];
-            expect(newParentChild).toEqual(childObject.identifier);
+      spyOn(openmct.objects, 'save');
+      openmct.objects.save.and.callThrough();
+      spyOn(openmct.forms, 'showForm');
+      openmct.forms.showForm.and.callFake((formStructure) => {
+        return Promise.resolve({
+          name: 'test',
+          location: [anotherParentObject]
         });
+      });
 
-        it("the child object's identifier should be removed from the old parent's composition", () => {
-            let oldParentComposition = parentObject.composition;
-            expect(oldParentComposition.length).toEqual(0);
-        });
+      unObserve = openmct.objects.observe(parentObject, '*', (newObject) => {
+        done();
+      });
+
+      moveAction.inNavigationPath = () => false;
+
+      moveAction.invoke([childObject, parentObject]);
+    });
+
+    afterEach(() => {
+      unObserve();
     });
 
+    it("the child object's identifier should be in the new parent's composition", () => {
+      let newParentChild = anotherParentObject.composition[0];
+      expect(newParentChild).toEqual(childObject.identifier);
+    });
+
+    it("the child object's identifier should be removed from the old parent's composition", () => {
+      let oldParentComposition = parentObject.composition;
+      expect(oldParentComposition.length).toEqual(0);
+    });
+  });
 });
diff --git a/src/plugins/myItems/README.md b/src/plugins/myItems/README.md
new file mode 100644
index 00000000000..e3582a3369b
--- /dev/null
+++ b/src/plugins/myItems/README.md
@@ -0,0 +1,26 @@
+# My Items plugin
+Defines top-level folder named "My Items" to store user-created items. Enabled by default, this can be disabled in a read-only deployment with no user-editable objects.
+
+## Installation
+```js
+openmct.install(openmct.plugins.MyItems());
+```
+
+## Options
+When installing, the plugin can take several options:
+
+- `name`: The label of the root object. Defaults to "My Items"
+  - Example: `'Apple Items'`
+
+- `namespace`: The namespace to create the root object in. Defaults to the empty string `''`
+  - Example: `'apple-namespace'`
+
+- `priority`: The optional priority to install this plugin. Defaults to `openmct.priority.LOW`
+  - Example: `'openmct.priority.LOW'`
+
+E.g., to install with a custom name and namespace, you could use:
+
+
+```js
+openmct.install(openmct.plugins.MyItems('Apple Items', 'apple-namespace'));
+```
\ No newline at end of file
diff --git a/src/plugins/myItems/createMyItemsIdentifier.js b/src/plugins/myItems/createMyItemsIdentifier.js
new file mode 100644
index 00000000000..16c1093b379
--- /dev/null
+++ b/src/plugins/myItems/createMyItemsIdentifier.js
@@ -0,0 +1,8 @@
+export const MY_ITEMS_KEY = 'mine';
+
+export function createMyItemsIdentifier(namespace = '') {
+  return {
+    key: MY_ITEMS_KEY,
+    namespace
+  };
+}
diff --git a/src/plugins/myItems/myItemsInterceptor.js b/src/plugins/myItems/myItemsInterceptor.js
new file mode 100644
index 00000000000..d1efca1ed6c
--- /dev/null
+++ b/src/plugins/myItems/myItemsInterceptor.js
@@ -0,0 +1,52 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+function myItemsInterceptor({ openmct, identifierObject, name }) {
+  const myItemsModel = {
+    identifier: identifierObject,
+    name,
+    type: 'folder',
+    composition: [],
+    location: 'ROOT'
+  };
+
+  return {
+    appliesTo: (identifier) => {
+      return (
+        identifier.key === myItemsModel.identifier.key &&
+        identifier.namespace === myItemsModel.identifier.namespace
+      );
+    },
+    invoke: (identifier, object) => {
+      if (!object || openmct.objects.isMissing(object)) {
+        openmct.objects.save(myItemsModel);
+
+        return myItemsModel;
+      }
+
+      return object;
+    },
+    priority: openmct.priority.HIGH
+  };
+}
+
+export default myItemsInterceptor;
diff --git a/src/plugins/myItems/plugin.js b/src/plugins/myItems/plugin.js
new file mode 100644
index 00000000000..44bed8f23e0
--- /dev/null
+++ b/src/plugins/myItems/plugin.js
@@ -0,0 +1,43 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createMyItemsIdentifier } from './createMyItemsIdentifier.js';
+import myItemsInterceptor from './myItemsInterceptor.js';
+
+const MY_ITEMS_DEFAULT_NAME = 'My Items';
+
+export default function MyItemsPlugin(
+  name = MY_ITEMS_DEFAULT_NAME,
+  namespace = '',
+  priority = undefined
+) {
+  return function install(openmct) {
+    const identifierObject = createMyItemsIdentifier(namespace);
+
+    if (priority === undefined) {
+      priority = openmct.priority.LOW;
+    }
+
+    openmct.objects.addGetInterceptor(myItemsInterceptor({ openmct, identifierObject, name }));
+    openmct.objects.addRoot(identifierObject, priority);
+  };
+}
diff --git a/src/plugins/myItems/pluginSpec.js b/src/plugins/myItems/pluginSpec.js
new file mode 100644
index 00000000000..14e1fe16551
--- /dev/null
+++ b/src/plugins/myItems/pluginSpec.js
@@ -0,0 +1,113 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+
+import { createMyItemsIdentifier, MY_ITEMS_KEY } from './createMyItemsIdentifier.js';
+
+const MISSING_NAME = `Missing: ${MY_ITEMS_KEY}`;
+const DEFAULT_NAME = 'My Items';
+const FANCY_NAME = 'Fancy Items';
+const myItemsIdentifier = createMyItemsIdentifier();
+
+describe('the plugin', () => {
+  let openmct;
+  let missingObj = {
+    identifier: myItemsIdentifier,
+    type: 'unknown',
+    name: MISSING_NAME
+  };
+
+  describe('with no arguments passed in', () => {
+    beforeEach((done) => {
+      openmct = createOpenMct();
+      openmct.install(openmct.plugins.MyItems());
+
+      openmct.on('start', done);
+      openmct.startHeadless();
+    });
+
+    afterEach(() => {
+      return resetApplicationState(openmct);
+    });
+
+    it('when installed, adds "My Items" to the root', async () => {
+      const root = await openmct.objects.get('ROOT');
+      const rootCompositionCollection = openmct.composition.get(root);
+      const rootComposition = await rootCompositionCollection.load();
+      let myItems = rootComposition.filter((domainObject) => {
+        return openmct.objects.areIdsEqual(domainObject.identifier, myItemsIdentifier);
+      })[0];
+
+      expect(myItems.name).toBe(DEFAULT_NAME);
+      expect(myItems).toBeDefined();
+    });
+
+    describe('adds an interceptor that returns a "My Items" model for', () => {
+      let myItemsObject;
+      let mockNotFoundProvider;
+      let activeProvider;
+
+      beforeEach(async () => {
+        mockNotFoundProvider = {
+          get: () => Promise.reject(new Error('Not found')),
+          create: () => Promise.resolve(missingObj),
+          update: () => Promise.resolve(missingObj)
+        };
+
+        activeProvider = mockNotFoundProvider;
+        spyOn(openmct.objects, 'getProvider').and.returnValue(activeProvider);
+        myItemsObject = await openmct.objects.get(myItemsIdentifier);
+      });
+
+      it('missing objects', () => {
+        let idsMatch = openmct.objects.areIdsEqual(myItemsObject.identifier, myItemsIdentifier);
+
+        expect(myItemsObject).toBeDefined();
+        expect(idsMatch).toBeTrue();
+      });
+    });
+  });
+
+  describe('with a name argument passed in', () => {
+    beforeEach((done) => {
+      openmct = createOpenMct();
+      openmct.install(openmct.plugins.MyItems(FANCY_NAME));
+
+      spyOn(openmct.objects, 'isMissing').and.returnValue(true);
+
+      openmct.on('start', done);
+      openmct.startHeadless();
+    });
+
+    afterEach(() => {
+      return resetApplicationState(openmct);
+    });
+
+    it('when installed, uses the passed in name', async () => {
+      let myItems = await openmct.objects.get(myItemsIdentifier);
+
+      expect(myItems.name).toBe(FANCY_NAME);
+      expect(myItems).toBeDefined();
+    });
+  });
+});
diff --git a/src/plugins/newFolderAction/newFolderAction.js b/src/plugins/newFolderAction/newFolderAction.js
index 04309813721..22152b12d0a 100644
--- a/src/plugins/newFolderAction/newFolderAction.js
+++ b/src/plugins/newFolderAction/newFolderAction.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,71 +19,31 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-
-import uuid from 'uuid';
+import CreateAction from '@/plugins/formActions/CreateAction';
 
 export default class NewFolderAction {
-    constructor(openmct) {
-        this.name = 'Add New Folder';
-        this.key = 'newFolder';
-        this.description = 'Create a new folder';
-        this.cssClass = 'icon-folder-new';
-        this.group = "action";
-        this.priority = 9;
-
-        this._openmct = openmct;
-        this._dialogForm = {
-            name: "Add New Folder",
-            sections: [
-                {
-                    rows: [
-                        {
-                            key: "name",
-                            control: "textfield",
-                            name: "Folder Name",
-                            pattern: "\\S+",
-                            required: true,
-                            cssClass: "l-input-lg"
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-    invoke(objectPath) {
-        let domainObject = objectPath[0];
-        let parentKeystring = this._openmct.objects.makeKeyString(domainObject.identifier);
-        let composition = this._openmct.composition.get(domainObject);
-        let dialogService = this._openmct.$injector.get('dialogService');
-        let folderType = this._openmct.types.get('folder');
-
-        dialogService.getUserInput(this._dialogForm, {name: 'Unnamed Folder'}).then((userInput) => {
-            let name = userInput.name;
-
-            let identifier = {
-                key: uuid(),
-                namespace: domainObject.identifier.namespace
-            };
-
-            let objectModel = {
-                identifier,
-                type: 'folder',
-                location: parentKeystring
-            };
-
-            folderType.definition.initialize(objectModel);
-            objectModel.name = name || 'New Folder';
-            objectModel.modified = Date.now();
-
-            this._openmct.objects.save(objectModel).then(() => {
-                composition.add(objectModel);
-            });
-
-        });
-    }
-    appliesTo(objectPath) {
-        let domainObject = objectPath[0];
-
-        return domainObject.type === 'folder';
-    }
+  constructor(openmct) {
+    this.type = 'folder';
+    this.name = 'Add New Folder';
+    this.key = 'newFolder';
+    this.description = 'Create a new folder';
+    this.cssClass = 'icon-folder-new';
+    this.group = 'action';
+    this.priority = 9;
+
+    this._openmct = openmct;
+  }
+
+  invoke(objectPath) {
+    const parentDomainObject = objectPath[0];
+    const createAction = new CreateAction(this._openmct, this.type, parentDomainObject);
+    createAction.invoke();
+  }
+
+  appliesTo(objectPath) {
+    let domainObject = objectPath[0];
+    let isPersistable = this._openmct.objects.isPersistable(domainObject.identifier);
+
+    return domainObject.type === this.type && isPersistable;
+  }
 }
diff --git a/src/plugins/newFolderAction/plugin.js b/src/plugins/newFolderAction/plugin.js
index 355c6ace366..2d97fbe9ed6 100644
--- a/src/plugins/newFolderAction/plugin.js
+++ b/src/plugins/newFolderAction/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,10 +19,10 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import NewFolderAction from './newFolderAction';
+import NewFolderAction from './newFolderAction.js';
 
 export default function () {
-    return function (openmct) {
-        openmct.actions.register(new NewFolderAction(openmct));
-    };
+  return function (openmct) {
+    openmct.actions.register(new NewFolderAction(openmct));
+  };
 }
diff --git a/src/plugins/newFolderAction/pluginSpec.js b/src/plugins/newFolderAction/pluginSpec.js
index 923a5f7b51f..b75fccb608c 100644
--- a/src/plugins/newFolderAction/pluginSpec.js
+++ b/src/plugins/newFolderAction/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,79 +19,97 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import {
-    createOpenMct,
-    resetApplicationState
-} from 'utils/testing';
-
-describe("the plugin", () => {
-    let openmct;
-    let compositionAPI;
-    let newFolderAction;
-    let mockObjectPath;
-    let mockDialogService;
-    let mockComposition;
-    let mockPromise;
-    let newFolderName = 'New Folder';
+import { createOpenMct, resetApplicationState } from 'utils/testing';
 
+describe('the plugin', () => {
+  let openmct;
+  let newFolderAction;
+
+  beforeEach((done) => {
+    openmct = createOpenMct();
+
+    openmct.on('start', done);
+    openmct.startHeadless();
+
+    newFolderAction = openmct.actions._allActions.newFolder;
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  it('installs the new folder action', () => {
+    expect(newFolderAction).toBeDefined();
+  });
+
+  describe('when invoked', () => {
+    let parentObject;
+    let parentObjectPath;
+    let changedParentObject;
+    let unobserve;
     beforeEach((done) => {
-        openmct = createOpenMct();
+      parentObject = {
+        name: 'mock folder',
+        type: 'folder',
+        identifier: {
+          key: 'mock-folder',
+          namespace: ''
+        },
+        composition: []
+      };
+      parentObjectPath = [parentObject];
 
-        openmct.on('start', done);
-        openmct.startHeadless();
+      spyOn(openmct.objects, 'save');
+      openmct.objects.save.and.callThrough();
 
-        newFolderAction = openmct.actions._allActions.newFolder;
-    });
+      spyOn(openmct.forms, 'showForm');
+      openmct.forms.showForm.and.callFake((formStructure) => {
+        return Promise.resolve({
+          name: 'test',
+          notes: 'test notes',
+          location: parentObjectPath
+        });
+      });
+
+      unobserve = openmct.objects.observe(parentObject, '*', (newObject) => {
+        changedParentObject = newObject;
 
+        done();
+      });
+
+      newFolderAction.invoke(parentObjectPath);
+    });
     afterEach(() => {
-        return resetApplicationState(openmct);
+      unobserve();
     });
 
-    it('installs the new folder action', () => {
-        expect(newFolderAction).toBeDefined();
+    it('creates a new folder object', () => {
+      expect(openmct.objects.save).toHaveBeenCalled();
     });
 
-    describe('when invoked', () => {
-
-        beforeEach((done) => {
-            compositionAPI = openmct.composition;
-            mockObjectPath = [{
-                name: 'mock folder',
-                type: 'folder',
-                identifier: {
-                    key: 'mock-folder',
-                    namespace: ''
-                }
-            }];
-            mockPromise = {
-                then: (callback) => {
-                    callback({name: newFolderName});
-                    done();
-                }
-            };
-
-            mockDialogService = jasmine.createSpyObj('dialogService', ['getUserInput']);
-            mockComposition = jasmine.createSpyObj('composition', ['add']);
-
-            mockDialogService.getUserInput.and.returnValue(mockPromise);
-
-            spyOn(openmct.$injector, 'get').and.returnValue(mockDialogService);
-            spyOn(compositionAPI, 'get').and.returnValue(mockComposition);
-            spyOn(openmct.objects, 'save').and.returnValue(Promise.resolve(true));
-
-            return newFolderAction.invoke(mockObjectPath);
-        });
+    it('adds new folder object to parent composition', () => {
+      const composition = changedParentObject.composition;
 
-        it('gets user input for folder name', () => {
-            expect(mockDialogService.getUserInput).toHaveBeenCalled();
-        });
+      expect(composition.length).toBe(1);
+    });
 
-        it('creates a new folder object', () => {
-            expect(openmct.objects.save).toHaveBeenCalled();
-        });
+    it('checks if the domainObject is persistable', () => {
+      const mockObjectPath = [
+        {
+          name: 'mock folder',
+          type: 'folder',
+          identifier: {
+            key: 'mock-folder',
+            namespace: ''
+          }
+        }
+      ];
 
-        it('adds new folder object to parent composition', () => {
-            expect(mockComposition.add).toHaveBeenCalled();
-        });
+      spyOn(openmct.objects, 'isPersistable').and.returnValue(true);
+
+      newFolderAction.appliesTo(mockObjectPath);
+
+      expect(openmct.objects.isPersistable).toHaveBeenCalled();
     });
+  });
 });
diff --git a/src/plugins/nonEditableFolder/plugin.js b/src/plugins/nonEditableFolder/plugin.js
deleted file mode 100644
index 46212b8ec5a..00000000000
--- a/src/plugins/nonEditableFolder/plugin.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-export default function () {
-    return function (openmct) {
-        openmct.types.addType("noneditable.folder", {
-            name: "Non-Editable Folder",
-            key: "noneditable.folder",
-            description: "Create folders to organize other objects or links to objects without the ability to edit it's properties.",
-            cssClass: "icon-folder",
-            creatable: false
-        });
-    };
-}
diff --git a/src/plugins/nonEditableFolder/pluginSpec.js b/src/plugins/nonEditableFolder/pluginSpec.js
deleted file mode 100644
index bded713c87d..00000000000
--- a/src/plugins/nonEditableFolder/pluginSpec.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-import {
-    createOpenMct,
-    resetApplicationState
-} from 'utils/testing';
-
-describe("the plugin", () => {
-    const NON_EDITABLE_FOLDER_KEY = 'noneditable.folder';
-    let openmct;
-
-    beforeEach((done) => {
-        openmct = createOpenMct();
-        openmct.install(openmct.plugins.NonEditableFolder());
-
-        openmct.on('start', done);
-        openmct.startHeadless();
-    });
-
-    afterEach(() => {
-        return resetApplicationState(openmct);
-    });
-
-    it('adds the new non-editable folder type', () => {
-        const type = openmct.types.get(NON_EDITABLE_FOLDER_KEY);
-
-        expect(type).toBeDefined();
-        expect(type.definition.creatable).toBeFalse();
-    });
-
-});
diff --git a/src/plugins/notebook/NotebookType.js b/src/plugins/notebook/NotebookType.js
new file mode 100644
index 00000000000..375c22af8af
--- /dev/null
+++ b/src/plugins/notebook/NotebookType.js
@@ -0,0 +1,79 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { IMAGE_MIGRATION_VER } from '../notebook/utils/notebook-migration.js';
+
+export default class NotebookType {
+  constructor(name, description, icon) {
+    this.name = name;
+    this.description = description;
+    this.cssClass = icon;
+    this.creatable = true;
+    this.form = [
+      {
+        key: 'defaultSort',
+        name: 'Entry Sorting',
+        control: 'select',
+        options: [
+          {
+            name: 'Newest First',
+            value: 'newest'
+          },
+          {
+            name: 'Oldest First',
+            value: 'oldest'
+          }
+        ],
+        cssClass: 'l-inline',
+        property: ['configuration', 'defaultSort']
+      },
+      {
+        key: 'sectionTitle',
+        name: 'Section Title',
+        control: 'textfield',
+        cssClass: 'l-inline',
+        required: true,
+        property: ['configuration', 'sectionTitle']
+      },
+      {
+        key: 'pageTitle',
+        name: 'Page Title',
+        control: 'textfield',
+        cssClass: 'l-inline',
+        required: true,
+        property: ['configuration', 'pageTitle']
+      }
+    ];
+  }
+
+  initialize(domainObject) {
+    domainObject.configuration = {
+      defaultSort: 'oldest',
+      entries: {},
+      imageMigrationVer: IMAGE_MIGRATION_VER,
+      pageTitle: 'Page',
+      sections: [],
+      sectionTitle: 'Section',
+      type: 'General'
+    };
+  }
+}
diff --git a/src/plugins/notebook/NotebookViewProvider.js b/src/plugins/notebook/NotebookViewProvider.js
new file mode 100644
index 00000000000..d5bdb1b7ab3
--- /dev/null
+++ b/src/plugins/notebook/NotebookViewProvider.js
@@ -0,0 +1,86 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
+
+import Agent from '@/utils/agent/Agent';
+
+import Notebook from './components/NotebookComponent.vue';
+
+export default class NotebookViewProvider {
+  constructor(openmct, name, key, type, cssClass, snapshotContainer, entryUrlWhitelist) {
+    this.openmct = openmct;
+    this.key = key;
+    this.name = `${name} View`;
+    this.type = type;
+    this.cssClass = cssClass;
+    this.snapshotContainer = snapshotContainer;
+    this.entryUrlWhitelist = entryUrlWhitelist;
+  }
+
+  canView(domainObject) {
+    return domainObject.type === this.type;
+  }
+
+  view(domainObject) {
+    let openmct = this.openmct;
+    let snapshotContainer = this.snapshotContainer;
+    let agent = new Agent(window);
+    let entryUrlWhitelist = this.entryUrlWhitelist;
+    let _destroy = null;
+
+    return {
+      show(container) {
+        const { destroy } = mount(
+          {
+            el: container,
+            components: {
+              Notebook
+            },
+            provide: {
+              openmct,
+              snapshotContainer,
+              agent,
+              entryUrlWhitelist
+            },
+            data() {
+              return {
+                domainObject
+              };
+            },
+            template: '<Notebook :domain-object="domainObject"></Notebook>'
+          },
+          {
+            app: openmct.app,
+            element: container
+          }
+        );
+        _destroy = destroy;
+      },
+      destroy() {
+        if (_destroy) {
+          _destroy();
+        }
+      }
+    };
+  }
+}
diff --git a/src/plugins/notebook/actions/CopyToNotebookAction.js b/src/plugins/notebook/actions/CopyToNotebookAction.js
index e2bdc9d5d8e..383a431559f 100644
--- a/src/plugins/notebook/actions/CopyToNotebookAction.js
+++ b/src/plugins/notebook/actions/CopyToNotebookAction.js
@@ -1,44 +1,51 @@
-import { getDefaultNotebook } from '../utils/notebook-storage';
-import { addNotebookEntry } from '../utils/notebook-entries';
+import { addNotebookEntry } from '../utils/notebook-entries.js';
+import { getDefaultNotebook, getNotebookSectionAndPage } from '../utils/notebook-storage.js';
 
 export default class CopyToNotebookAction {
-    constructor(openmct) {
-        this.openmct = openmct;
-
-        this.cssClass = 'icon-duplicate';
-        this.description = 'Copy value to notebook as an entry';
-        this.group = "action";
-        this.key = 'copyToNotebook';
-        this.name = 'Copy to Notebook';
-        this.priority = 1;
+  constructor(openmct) {
+    this.openmct = openmct;
+
+    this.cssClass = 'icon-duplicate';
+    this.description = 'Copy value to notebook as an entry';
+    this.group = 'action';
+    this.key = 'copyToNotebook';
+    this.name = 'Copy to Notebook';
+    this.priority = 1;
+  }
+
+  copyToNotebook(entryText) {
+    const notebookStorage = getDefaultNotebook();
+    this.openmct.objects.get(notebookStorage.identifier).then((domainObject) => {
+      addNotebookEntry(this.openmct, domainObject, notebookStorage, null, entryText);
+
+      const { section, page } = getNotebookSectionAndPage(
+        domainObject,
+        notebookStorage.defaultSectionId,
+        notebookStorage.defaultPageId
+      );
+      if (!section || !page) {
+        return;
+      }
+
+      const defaultPath = `${domainObject.name} - ${section.name} - ${page.name}`;
+      const msg = `Saved to Notebook ${defaultPath}`;
+      this.openmct.notifications.info(msg);
+    });
+  }
+
+  invoke(objectPath, view) {
+    const formattedValueForCopy = view.getViewContext().row.formattedValueForCopy;
+
+    this.copyToNotebook(formattedValueForCopy());
+  }
+
+  appliesTo(objectPath, view = {}) {
+    const viewContext = view.getViewContext && view.getViewContext();
+    const row = viewContext && viewContext.row;
+    if (!row) {
+      return;
     }
 
-    copyToNotebook(entryText) {
-        const notebookStorage = getDefaultNotebook();
-        this.openmct.objects.get(notebookStorage.notebookMeta.identifier)
-            .then(domainObject => {
-                addNotebookEntry(this.openmct, domainObject, notebookStorage, null, entryText);
-
-                const defaultPath = `${domainObject.name} - ${notebookStorage.section.name} - ${notebookStorage.page.name}`;
-                const msg = `Saved to Notebook ${defaultPath}`;
-                this.openmct.notifications.info(msg);
-            });
-    }
-
-    invoke(objectPath, view) {
-        const formattedValueForCopy = view.getViewContext().row.formattedValueForCopy;
-
-        this.copyToNotebook(formattedValueForCopy());
-    }
-
-    appliesTo(objectPath, view = {}) {
-        const viewContext = view.getViewContext && view.getViewContext();
-        const row = viewContext && viewContext.row;
-        if (!row) {
-            return;
-        }
-
-        return row.formattedValueForCopy
-            && typeof row.formattedValueForCopy === 'function';
-    }
+    return row.formattedValueForCopy && typeof row.formattedValueForCopy === 'function';
+  }
 }
diff --git a/src/plugins/notebook/actions/ExportNotebookAsTextAction.js b/src/plugins/notebook/actions/ExportNotebookAsTextAction.js
new file mode 100644
index 00000000000..31e6ef939f5
--- /dev/null
+++ b/src/plugins/notebook/actions/ExportNotebookAsTextAction.js
@@ -0,0 +1,181 @@
+import { saveAs } from 'file-saver';
+import Moment from 'moment';
+
+import { NOTEBOOK_TYPE, RESTRICTED_NOTEBOOK_TYPE } from '../notebook-constants.js';
+const UNKNOWN_USER = 'Unknown';
+const UNKNOWN_TIME = 'Unknown';
+const ALLOWED_TYPES = [NOTEBOOK_TYPE, RESTRICTED_NOTEBOOK_TYPE];
+
+export default class ExportNotebookAsTextAction {
+  constructor(openmct) {
+    this.openmct = openmct;
+
+    this.cssClass = 'icon-export';
+    this.description = 'Exports notebook contents as a text file';
+    this.group = 'export';
+    this.key = 'exportNotebookAsText';
+    this.name = 'Export Notebook as Text';
+  }
+
+  invoke(objectPath) {
+    this.showForm(objectPath);
+  }
+
+  getTagName(tagId, availableTags) {
+    const foundTag = availableTags.find((tag) => tag.id === tagId);
+    if (foundTag) {
+      return foundTag.label;
+    } else {
+      return tagId;
+    }
+  }
+
+  getTagsForEntry(entry, domainObjectKeyString, annotations) {
+    const foundTags = [];
+    annotations.forEach((annotation) => {
+      const target = annotation.targets.find(
+        (annotationTarget) => annotationTarget.keyString === domainObjectKeyString
+      );
+      if (target?.entryId === entry.id) {
+        annotation.tags.forEach((tag) => {
+          if (!foundTags.includes(tag)) {
+            foundTags.push(tag);
+          }
+        });
+      }
+    });
+
+    return foundTags;
+  }
+
+  formatTimeStamp(timestamp) {
+    if (timestamp) {
+      return `${Moment.utc(timestamp).format('YYYY-MM-DD HH:mm:ss')} UTC`;
+    } else {
+      return UNKNOWN_TIME;
+    }
+  }
+
+  appliesTo(objectPath) {
+    const domainObject = objectPath[0];
+
+    return ALLOWED_TYPES.includes(domainObject.type);
+  }
+
+  async onSave(changes, objectPath) {
+    const availableTags = this.openmct.annotation.getAvailableTags();
+    const identifier = objectPath[0].identifier;
+    const domainObject = await this.openmct.objects.get(identifier);
+    let foundAnnotations = [];
+    // only load annotations if there are tags
+    if (availableTags.length) {
+      foundAnnotations = await this.openmct.annotation.getAnnotations(domainObject.identifier);
+    }
+
+    let notebookAsText = `# ${domainObject.name}\n\n`;
+
+    if (changes.exportMetaData) {
+      const createdTimestamp = domainObject.created;
+      const createdBy = this.getUserName(domainObject.createdBy);
+      const modifiedBy = this.getUserName(domainObject.modifiedBy);
+      const modifiedTimestamp = domainObject.modified ?? domainObject.created;
+      notebookAsText += `Created on ${this.formatTimeStamp(
+        createdTimestamp
+      )} by user ${createdBy}\n\n`;
+      notebookAsText += `Updated on ${this.formatTimeStamp(
+        modifiedTimestamp
+      )} by user ${modifiedBy}\n\n`;
+    }
+
+    const notebookSections = domainObject.configuration.sections;
+    const notebookEntries = domainObject.configuration.entries;
+
+    notebookSections.forEach((section) => {
+      notebookAsText += `## ${section.name}\n\n`;
+
+      const notebookPages = section.pages;
+
+      notebookPages.forEach((page) => {
+        notebookAsText += `### ${page.name}\n\n`;
+
+        const notebookPageEntries = notebookEntries[section.id]?.[page.id];
+        if (!notebookPageEntries) {
+          // blank page
+          return;
+        }
+
+        notebookPageEntries.forEach((entry) => {
+          if (changes.exportMetaData) {
+            const createdTimestamp = entry.createdOn;
+            const createdBy = this.getUserName(entry.createdBy);
+            const createdByRole = entry.createdByRole;
+            const modifiedBy = this.getUserName(entry.modifiedBy);
+            const modifiedByRole = entry.modifiedByRole;
+            const modifiedTimestamp = entry.modified ?? entry.created;
+            notebookAsText += `Created on ${this.formatTimeStamp(
+              createdTimestamp
+            )} by user ${createdBy}${createdByRole ? `: ${createdByRole}` : ''}\n\n`;
+            notebookAsText += `Updated on ${this.formatTimeStamp(
+              modifiedTimestamp
+            )} by user ${modifiedBy}${modifiedByRole ? `: ${modifiedByRole}` : ''}\n\n`;
+          }
+
+          if (changes.exportTags) {
+            const domainObjectKeyString = this.openmct.objects.makeKeyString(
+              domainObject.identifier
+            );
+            const tags = this.getTagsForEntry(entry, domainObjectKeyString, foundAnnotations);
+            const tagNames = tags.map((tag) => this.getTagName(tag, availableTags));
+            if (tagNames) {
+              notebookAsText += `Tags: ${tagNames.join(', ')}\n\n`;
+            }
+          }
+
+          notebookAsText += `${entry.text}\n\n`;
+        });
+      });
+    });
+
+    const blob = new Blob([notebookAsText], { type: 'text/markdown' });
+    const fileName = domainObject.name + '.md';
+    saveAs(blob, fileName);
+  }
+
+  getUserName(userId) {
+    if (userId && userId.length) {
+      return userId;
+    }
+
+    return UNKNOWN_USER;
+  }
+
+  async showForm(objectPath) {
+    const formStructure = {
+      title: 'Export Notebook Text',
+      sections: [
+        {
+          rows: [
+            {
+              key: 'exportMetaData',
+              control: 'toggleSwitch',
+              name: 'Include Metadata (created/modified, etc.)',
+              required: true,
+              value: false
+            },
+            {
+              name: 'Include Tags',
+              control: 'toggleSwitch',
+              required: true,
+              key: 'exportTags',
+              value: false
+            }
+          ]
+        }
+      ]
+    };
+
+    const changes = await this.openmct.forms.showForm(formStructure);
+
+    return this.onSave(changes, objectPath);
+  }
+}
diff --git a/src/plugins/notebook/components/MenuItems.vue b/src/plugins/notebook/components/MenuItems.vue
deleted file mode 100644
index 28f1c8f9b04..00000000000
--- a/src/plugins/notebook/components/MenuItems.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-<div class="c-menu">
-    <ul>
-        <li
-            v-for="(item, index) in popupMenuItems"
-            :key="index"
-            :class="item.cssClass"
-            :title="item.name"
-            @click="item.callback"
-        >
-            {{ item.name }}
-        </li>
-    </ul>
-</div>
-</template>
-
-<script>
-export default {
-    inject: ['popupMenuItems']
-};
-</script>
diff --git a/src/plugins/notebook/components/Notebook.vue b/src/plugins/notebook/components/Notebook.vue
deleted file mode 100644
index 6d42d7ae7a0..00000000000
--- a/src/plugins/notebook/components/Notebook.vue
+++ /dev/null
@@ -1,736 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-<template>
-<div class="c-notebook">
-    <div class="c-notebook__head">
-        <Search class="c-notebook__search"
-                :value="search"
-                @input="search = $event"
-                @clear="resetSearch()"
-        />
-    </div>
-    <SearchResults v-if="search.length"
-                   ref="searchResults"
-                   :domain-object="domainObject"
-                   :results="searchResults"
-                   @changeSectionPage="changeSelectedSection"
-                   @updateEntries="updateEntries"
-    />
-    <div v-if="!search.length"
-         class="c-notebook__body"
-    >
-        <Sidebar ref="sidebar"
-                 class="c-notebook__nav c-sidebar c-drawer c-drawer--align-left"
-                 :class="[{'is-expanded': showNav}, {'c-drawer--push': !sidebarCoversEntries}, {'c-drawer--overlays': sidebarCoversEntries}]"
-                 :default-page-id="defaultPageId"
-                 :selected-page-id="selectedPageId"
-                 :default-section-id="defaultSectionId"
-                 :selected-section-id="selectedSectionId"
-                 :domain-object="domainObject"
-                 :page-title="domainObject.configuration.pageTitle"
-                 :section-title="domainObject.configuration.sectionTitle"
-                 :sections="sections"
-                 :sidebar-covers-entries="sidebarCoversEntries"
-                 @pagesChanged="pagesChanged"
-                 @selectPage="selectPage"
-                 @sectionsChanged="sectionsChanged"
-                 @selectSection="selectSection"
-                 @toggleNav="toggleNav"
-        />
-        <div class="c-notebook__page-view">
-            <div class="c-notebook__page-view__header">
-                <button class="c-notebook__toggle-nav-button c-icon-button c-icon-button--major icon-menu-hamburger"
-                        @click="toggleNav"
-                ></button>
-                <div class="c-notebook__page-view__path c-path">
-                    <span class="c-notebook__path__section c-path__item">
-                        {{ selectedSection ? selectedSection.name : '' }}
-                    </span>
-                    <span class="c-notebook__path__page c-path__item">
-                        {{ selectedPage ? selectedPage.name : '' }}
-                    </span>
-                </div>
-                <div class="c-notebook__page-view__controls">
-                    <select v-model="showTime"
-                            class="c-notebook__controls__time"
-                    >
-                        <option value="0"
-                                :selected="showTime === 0"
-                        >
-                            Show all
-                        </option>
-                        <option value="1"
-                                :selected="showTime === 1"
-                        >Last hour</option>
-                        <option value="8"
-                                :selected="showTime === 8"
-                        >Last 8 hours</option>
-                        <option value="24"
-                                :selected="showTime === 24"
-                        >Last 24 hours</option>
-                    </select>
-                    <select v-model="defaultSort"
-                            class="c-notebook__controls__time"
-                    >
-                        <option value="newest"
-                                :selected="defaultSort === 'newest'"
-                        >Newest first</option>
-                        <option value="oldest"
-                                :selected="defaultSort === 'oldest'"
-                        >Oldest first</option>
-                    </select>
-                </div>
-            </div>
-            <div class="c-notebook__drag-area icon-plus"
-                 @click="newEntry()"
-                 @dragover="dragOver"
-                 @drop.capture="dropCapture"
-                 @drop="dropOnEntry($event)"
-            >
-                <span class="c-notebook__drag-area__label">
-                    To start a new entry, click here or drag and drop any object
-                </span>
-            </div>
-            <div v-if="selectedSection && selectedPage"
-                 ref="notebookEntries"
-                 class="c-notebook__entries"
-            >
-                <NotebookEntry v-for="entry in filteredAndSortedEntries"
-                               :key="entry.id"
-                               :entry="entry"
-                               :domain-object="domainObject"
-                               :selected-page="selectedPage"
-                               :selected-section="selectedSection"
-                               :read-only="false"
-                               @deleteEntry="deleteEntry"
-                               @updateEntry="updateEntry"
-                />
-            </div>
-        </div>
-    </div>
-</div>
-</template>
-
-<script>
-import NotebookEntry from './NotebookEntry.vue';
-import Search from '@/ui/components/search.vue';
-import SearchResults from './SearchResults.vue';
-import Sidebar from './Sidebar.vue';
-import { clearDefaultNotebook, getDefaultNotebook, setDefaultNotebook, setDefaultNotebookSection, setDefaultNotebookPage } from '../utils/notebook-storage';
-import { addNotebookEntry, createNewEmbed, getEntryPosById, getNotebookEntries, mutateObject } from '../utils/notebook-entries';
-import { NOTEBOOK_VIEW_TYPE } from '../notebook-constants';
-import objectUtils from 'objectUtils';
-
-import { debounce } from 'lodash';
-import objectLink from '../../../ui/mixins/object-link';
-
-function objectCopy(obj) {
-    return JSON.parse(JSON.stringify(obj));
-}
-
-export default {
-    components: {
-        NotebookEntry,
-        Search,
-        SearchResults,
-        Sidebar
-    },
-    inject: ['openmct', 'snapshotContainer'],
-    props: {
-        domainObject: {
-            type: Object,
-            required: true
-        }
-    },
-    data() {
-        return {
-            selectedSectionId: this.getDefaultSectionId(),
-            selectedPageId: this.getDefaultPageId(),
-            defaultSort: this.domainObject.configuration.defaultSort,
-            focusEntryId: null,
-            search: '',
-            searchResults: [],
-            showTime: 0,
-            showNav: false,
-            sidebarCoversEntries: false
-        };
-    },
-    computed: {
-        defaultPageId() {
-            return this.getDefaultPageId();
-        },
-        defaultSectionId() {
-            return this.getDefaultSectionId();
-        },
-        filteredAndSortedEntries() {
-            const filterTime = Date.now();
-            const pageEntries = getNotebookEntries(this.domainObject, this.selectedSection, this.selectedPage) || [];
-
-            const hours = parseInt(this.showTime, 10);
-            const filteredPageEntriesByTime = hours
-                ? pageEntries.filter(entry => (filterTime - entry.createdOn) <= hours * 60 * 60 * 1000)
-                : pageEntries;
-
-            return this.defaultSort === 'oldest'
-                ? filteredPageEntriesByTime
-                : [...filteredPageEntriesByTime].reverse();
-        },
-        pages() {
-            return this.getPages() || [];
-        },
-        sections() {
-            return this.getSections();
-        },
-        selectedPage() {
-            const pages = this.getPages();
-            const selectedPage = pages.find(page => page.id === this.selectedPageId);
-
-            if (selectedPage) {
-                return selectedPage;
-            }
-
-            if (!selectedPage && !pages.length) {
-                return undefined;
-            }
-
-            return pages[0];
-        },
-        selectedSection() {
-            if (!this.sections.length) {
-                return null;
-            }
-
-            return this.sections.find(section => section.id === this.selectedSectionId);
-        }
-    },
-    watch: {
-        search() {
-            this.getSearchResults();
-        }
-    },
-    beforeMount() {
-        this.getSearchResults = debounce(this.getSearchResults, 500);
-        this.syncUrlWithPageAndSection = debounce(this.syncUrlWithPageAndSection, 100);
-    },
-    mounted() {
-        this.formatSidebar();
-        this.setSectionAndPageFromUrl();
-
-        window.addEventListener('orientationchange', this.formatSidebar);
-        window.addEventListener('hashchange', this.setSectionAndPageFromUrl);
-    },
-    beforeDestroy() {
-        if (this.unlisten) {
-            this.unlisten();
-        }
-
-        window.removeEventListener('orientationchange', this.formatSidebar);
-        window.removeEventListener('hashchange', this.setSectionAndPageFromUrl);
-    },
-    updated: function () {
-        this.$nextTick(() => {
-            this.focusOnEntryId();
-        });
-    },
-    methods: {
-        changeSectionPage(newParams, oldParams, changedParams) {
-            if (newParams.view !== NOTEBOOK_VIEW_TYPE) {
-                return;
-            }
-
-            let pageId = newParams.pageId;
-            let sectionId = newParams.sectionId;
-
-            if (!pageId && !sectionId) {
-                return;
-            }
-
-            this.sections.forEach(section => {
-                section.isSelected = Boolean(section.id === sectionId);
-
-                if (section.isSelected) {
-                    section.pages.forEach(page => {
-                        page.isSelected = Boolean(page.id === pageId);
-                    });
-                }
-            });
-        },
-        changeSelectedSection({ sectionId, pageId }) {
-            const sections = this.sections.map(s => {
-                s.isSelected = false;
-
-                if (s.id === sectionId) {
-                    s.isSelected = true;
-                }
-
-                s.pages.forEach((p, i) => {
-                    p.isSelected = false;
-
-                    if (pageId && pageId === p.id) {
-                        p.isSelected = true;
-                    }
-
-                    if (!pageId && i === 0) {
-                        p.isSelected = true;
-                    }
-                });
-
-                return s;
-            });
-
-            this.sectionsChanged({ sections });
-            this.resetSearch();
-        },
-        setSectionAndPageFromUrl() {
-            let sectionId = this.getSectionIdFromUrl() || this.selectedSectionId;
-            let pageId = this.getPageIdFromUrl() || this.selectedPageId;
-
-            this.selectSection(sectionId);
-            this.selectPage(pageId);
-        },
-        createNotebookStorageObject() {
-            const notebookMeta = {
-                name: this.domainObject.name,
-                identifier: this.domainObject.identifier,
-                link: this.getLinktoNotebook()
-            };
-            const page = this.selectedPage;
-            const section = this.selectedSection;
-
-            return {
-                notebookMeta,
-                page,
-                section
-            };
-        },
-        deleteEntry(entryId) {
-            const entryPos = getEntryPosById(entryId, this.domainObject, this.selectedSection, this.selectedPage);
-            if (entryPos === -1) {
-                this.openmct.notifications.alert('Warning: unable to delete entry');
-                console.error(`unable to delete entry ${entryId} from section ${this.selectedSection}, page ${this.selectedPage}`);
-
-                return;
-            }
-
-            const dialog = this.openmct.overlays.dialog({
-                iconClass: 'alert',
-                message: 'This action will permanently delete this entry. Do you wish to continue?',
-                buttons: [
-                    {
-                        label: "Ok",
-                        emphasis: true,
-                        callback: () => {
-                            const entries = getNotebookEntries(this.domainObject, this.selectedSection, this.selectedPage);
-                            entries.splice(entryPos, 1);
-                            this.updateEntries(entries);
-                            dialog.dismiss();
-                        }
-                    },
-                    {
-                        label: "Cancel",
-                        callback: () => dialog.dismiss()
-                    }
-                ]
-            });
-        },
-        dragOver(event) {
-            event.preventDefault();
-            event.dataTransfer.dropEffect = "copy";
-        },
-        dropCapture(event) {
-            const isEditing = this.openmct.editor.isEditing();
-            if (isEditing) {
-                this.openmct.editor.cancel();
-            }
-        },
-        dropOnEntry(event) {
-            event.preventDefault();
-            event.stopImmediatePropagation();
-
-            const snapshotId = event.dataTransfer.getData('openmct/snapshot/id');
-            if (snapshotId.length) {
-                const snapshot = this.snapshotContainer.getSnapshot(snapshotId);
-                this.newEntry(snapshot);
-                this.snapshotContainer.removeSnapshot(snapshotId);
-
-                return;
-            }
-
-            const data = event.dataTransfer.getData('openmct/domain-object-path');
-            const objectPath = JSON.parse(data);
-            const bounds = this.openmct.time.bounds();
-            const snapshotMeta = {
-                bounds,
-                link: null,
-                objectPath,
-                openmct: this.openmct
-            };
-            const embed = createNewEmbed(snapshotMeta);
-            this.newEntry(embed);
-        },
-        focusOnEntryId() {
-            if (!this.focusEntryId) {
-                return;
-            }
-
-            const element = this.$refs.notebookEntries.querySelector(`#${this.focusEntryId}`);
-
-            if (!element) {
-                return;
-            }
-
-            element.focus();
-            this.focusEntryId = null;
-        },
-        formatSidebar() {
-            /*
-                Determine if the sidebar should slide over content, or compress it
-                Slide over checks:
-                - phone (all orientations)
-                - tablet portrait
-                - in a layout frame (within .c-so-view)
-            */
-            const classList = document.querySelector('body').classList;
-            const isPhone = Array.from(classList).includes('phone');
-            const isTablet = Array.from(classList).includes('tablet');
-            const isPortrait = window.screen.orientation.type.includes('portrait');
-            const isInLayout = Boolean(this.$el.closest('.c-so-view'));
-            const sidebarCoversEntries = (isPhone || (isTablet && isPortrait) || isInLayout);
-            this.sidebarCoversEntries = sidebarCoversEntries;
-        },
-        getDefaultPageId() {
-            let defaultPageId;
-
-            if (this.isDefaultNotebook()) {
-                defaultPageId = getDefaultNotebook().page.id;
-            } else {
-                const firstSection = this.getSections()[0];
-                defaultPageId = firstSection && firstSection.pages[0].id;
-            }
-
-            return defaultPageId;
-        },
-        isDefaultNotebook() {
-            const defaultNotebook = getDefaultNotebook();
-            const defaultNotebookIdentifier = defaultNotebook && defaultNotebook.notebookMeta.identifier;
-
-            return defaultNotebookIdentifier !== null
-                && this.openmct.objects.areIdsEqual(defaultNotebookIdentifier, this.domainObject.identifier);
-        },
-        getDefaultSectionId() {
-            let defaultSectionId;
-
-            if (this.isDefaultNotebook()) {
-                defaultSectionId = getDefaultNotebook().section.id;
-            } else {
-                const firstSection = this.getSections()[0];
-                defaultSectionId = firstSection && firstSection.id;
-            }
-
-            return defaultSectionId;
-        },
-        getDefaultNotebookObject() {
-            const oldNotebookStorage = getDefaultNotebook();
-            if (!oldNotebookStorage) {
-                return null;
-            }
-
-            return this.openmct.objects.get(oldNotebookStorage.notebookMeta.identifier);
-        },
-        getLinktoNotebook() {
-            const objectPath = this.openmct.router.path;
-            const link = objectLink.computed.objectLink.call({
-                objectPath,
-                openmct: this.openmct
-            });
-
-            const selectedSection = this.selectedSection;
-            const selectedPage = this.selectedPage;
-            const sectionId = selectedSection ? selectedSection.id : '';
-            const pageId = selectedPage ? selectedPage.id : '';
-
-            return `${link}?sectionId=${sectionId}&pageId=${pageId}`;
-        },
-        getPage(section, id) {
-            return section.pages.find(p => p.id === id);
-        },
-        getSection(id) {
-            return this.sections.find(s => s.id === id);
-        },
-        getSections() {
-            return this.domainObject.configuration.sections || [];
-        },
-        getSearchResults() {
-            if (!this.search.length) {
-                return [];
-            }
-
-            const output = [];
-            const sections = this.domainObject.configuration.sections;
-            const entries = this.domainObject.configuration.entries;
-            const searchTextLower = this.search.toLowerCase();
-            const originalSearchText = this.search;
-            let sectionTrackPageHit;
-            let pageTrackEntryHit;
-            let sectionTrackEntryHit;
-
-            sections.forEach(section => {
-                const pages = section.pages;
-                let resultMetadata = {
-                    originalSearchText,
-                    sectionHit: section.name && section.name.toLowerCase().includes(searchTextLower)
-                };
-                sectionTrackPageHit = false;
-                sectionTrackEntryHit = false;
-
-                pages.forEach(page => {
-                    resultMetadata.pageHit = page.name && page.name.toLowerCase().includes(searchTextLower);
-                    pageTrackEntryHit = false;
-
-                    if (resultMetadata.pageHit) {
-                        sectionTrackPageHit = true;
-                    }
-
-                    // check for no entries first
-                    if (entries[section.id] && entries[section.id][page.id]) {
-                        const pageEntries = entries[section.id][page.id];
-
-                        pageEntries.forEach(entry => {
-                            const entryHit = entry.text && entry.text.toLowerCase().includes(searchTextLower);
-
-                            // any entry hit goes in, it's the most unique of the hits
-                            if (entryHit) {
-                                resultMetadata.entryHit = entryHit;
-                                pageTrackEntryHit = true;
-                                sectionTrackEntryHit = true;
-
-                                output.push(objectCopy({
-                                    metadata: resultMetadata,
-                                    section,
-                                    page,
-                                    entry
-                                }));
-                            }
-                        });
-                    }
-
-                    // all entries checked, now in pages,
-                    // if page hit, but not in results, need to add
-                    if (resultMetadata.pageHit && !pageTrackEntryHit) {
-                        resultMetadata.entryHit = false;
-
-                        output.push(objectCopy({
-                            metadata: resultMetadata,
-                            section,
-                            page
-                        }));
-                    }
-
-                });
-
-                // all pages checked, now in sections,
-                // if section hit, but not in results, need to add and default page
-                if (resultMetadata.sectionHit && !sectionTrackPageHit && !sectionTrackEntryHit) {
-                    resultMetadata.entryHit = false;
-                    resultMetadata.pageHit = false;
-
-                    output.push(objectCopy({
-                        metadata: resultMetadata,
-                        section,
-                        page: pages[0]
-                    }));
-                }
-
-            });
-
-            this.searchResults = output;
-        },
-        getPages() {
-            const selectedSection = this.selectedSection;
-            if (!selectedSection || !selectedSection.pages.length) {
-                return [];
-            }
-
-            return selectedSection.pages;
-        },
-        newEntry(embed = null) {
-            this.resetSearch();
-            const notebookStorage = this.createNotebookStorageObject();
-            this.updateDefaultNotebook(notebookStorage);
-            const id = addNotebookEntry(this.openmct, this.domainObject, notebookStorage, embed);
-            this.focusEntryId = id;
-        },
-        orientationChange() {
-            this.formatSidebar();
-        },
-        pagesChanged({ pages = [], id = null}) {
-            const selectedSection = this.selectedSection;
-            if (!selectedSection) {
-                return;
-            }
-
-            selectedSection.pages = pages;
-            const sections = this.sections.map(section => {
-                if (section.id === selectedSection.id) {
-                    section = selectedSection;
-                }
-
-                return section;
-            });
-
-            this.sectionsChanged({ sections });
-        },
-        removeDefaultClass(domainObject) {
-            if (!domainObject) {
-                return;
-            }
-
-            this.openmct.status.delete(domainObject.identifier);
-        },
-        resetSearch() {
-            this.search = '';
-            this.searchResults = [];
-        },
-        toggleNav() {
-            this.showNav = !this.showNav;
-        },
-        async updateDefaultNotebook(notebookStorage) {
-            const defaultNotebookObject = await this.getDefaultNotebookObject();
-            if (!defaultNotebookObject) {
-                setDefaultNotebook(this.openmct, notebookStorage, this.domainObject);
-            } else if (objectUtils.makeKeyString(defaultNotebookObject.identifier) !== objectUtils.makeKeyString(notebookStorage.notebookMeta.identifier)) {
-                this.removeDefaultClass(defaultNotebookObject);
-                setDefaultNotebook(this.openmct, notebookStorage, this.domainObject);
-            }
-
-            if (this.defaultSectionId && this.defaultSectionId.length === 0 || this.defaultSectionId !== notebookStorage.section.id) {
-                this.defaultSectionId = notebookStorage.section.id;
-                setDefaultNotebookSection(notebookStorage.section);
-            }
-
-            if (this.defaultPageId && this.defaultPageId.length === 0 || this.defaultPageId !== notebookStorage.page.id) {
-                this.defaultPageId = notebookStorage.page.id;
-                setDefaultNotebookPage(notebookStorage.page);
-            }
-        },
-        updateDefaultNotebookPage(pages, id) {
-            if (!id) {
-                return;
-            }
-
-            const notebookStorage = getDefaultNotebook();
-            if (!notebookStorage
-                    || notebookStorage.notebookMeta.identifier.key !== this.domainObject.identifier.key) {
-                return;
-            }
-
-            const defaultNotebookPage = notebookStorage.page;
-            const page = pages.find(p => p.id === id);
-            if (!page && defaultNotebookPage.id === id) {
-                this.defaultSectionId = null;
-                this.defaultPageId = null;
-                this.removeDefaultClass(this.domainObject);
-                clearDefaultNotebook();
-
-                return;
-            }
-
-            if (id !== defaultNotebookPage.id) {
-                return;
-            }
-
-            setDefaultNotebookPage(page);
-        },
-        updateDefaultNotebookSection(sections, id) {
-            if (!id) {
-                return;
-            }
-
-            const notebookStorage = getDefaultNotebook();
-            if (!notebookStorage
-                    || notebookStorage.notebookMeta.identifier.key !== this.domainObject.identifier.key) {
-                return;
-            }
-
-            const defaultNotebookSection = notebookStorage.section;
-            const section = sections.find(s => s.id === id);
-            if (!section && defaultNotebookSection.id === id) {
-                this.defaultSectionId = null;
-                this.defaultPageId = null;
-                this.removeDefaultClass(this.domainObject);
-                clearDefaultNotebook();
-
-                return;
-            }
-
-            if (id !== defaultNotebookSection.id) {
-                return;
-            }
-
-            setDefaultNotebookSection(section);
-        },
-        updateEntry(entry) {
-            const entries = getNotebookEntries(this.domainObject, this.selectedSection, this.selectedPage);
-            const entryPos = getEntryPosById(entry.id, this.domainObject, this.selectedSection, this.selectedPage);
-            entries[entryPos] = entry;
-
-            this.updateEntries(entries);
-        },
-        updateEntries(entries) {
-            const configuration = this.domainObject.configuration;
-            const notebookEntries = configuration.entries || {};
-            notebookEntries[this.selectedSection.id][this.selectedPage.id] = entries;
-
-            mutateObject(this.openmct, this.domainObject, 'configuration.entries', notebookEntries);
-        },
-        getPageIdFromUrl() {
-            return this.openmct.router.getParams().pageId;
-        },
-        getSectionIdFromUrl() {
-            return this.openmct.router.getParams().sectionId;
-        },
-        syncUrlWithPageAndSection() {
-            this.openmct.router.updateParams({
-                pageId: this.selectedPageId,
-                sectionId: this.selectedSectionId
-            });
-        },
-        sectionsChanged({ sections, id = null }) {
-            mutateObject(this.openmct, this.domainObject, 'configuration.sections', sections);
-            this.updateDefaultNotebookSection(sections, id);
-        },
-        selectPage(pageId) {
-            this.selectedPageId = pageId;
-            this.syncUrlWithPageAndSection();
-        },
-        selectSection(sectionId) {
-            this.selectedSectionId = sectionId;
-
-            const defaultPageId = this.selectedSection.pages[0].id;
-            this.selectPage(defaultPageId);
-
-            this.syncUrlWithPageAndSection();
-        }
-    }
-};
-</script>
diff --git a/src/plugins/notebook/components/NotebookComponent.vue b/src/plugins/notebook/components/NotebookComponent.vue
new file mode 100644
index 00000000000..4c2d7a4c024
--- /dev/null
+++ b/src/plugins/notebook/components/NotebookComponent.vue
@@ -0,0 +1,1079 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="c-notebook" :class="[{ 'c-notebook--restricted': isRestricted }]">
+    <div class="c-notebook__head">
+      <Search
+        class="c-notebook__search"
+        :value="search"
+        @input="search = $event"
+        @clear="resetSearch()"
+      />
+    </div>
+    <SearchResults
+      v-if="search.length"
+      ref="searchResults"
+      :domain-object="domainObject"
+      :results="searchResults"
+      @cancel-edit="cancelTransaction"
+      @editing-entry="startTransaction"
+      @change-section-page="changeSelectedSection"
+      @update-entries="updateEntries"
+    />
+    <div v-if="!search.length" class="c-notebook__body">
+      <Sidebar
+        ref="sidebar"
+        class="c-notebook__nav c-sidebar c-drawer c-drawer--align-left"
+        :class="sidebarClasses"
+        :default-page-id="defaultPageId"
+        :selected-page-id="getSelectedPageId()"
+        :default-section-id="defaultSectionId"
+        :selected-section-id="getSelectedSectionId()"
+        :domain-object="domainObject"
+        :page-title="domainObject.configuration.pageTitle"
+        :section-title="domainObject.configuration.sectionTitle"
+        :sections="sections"
+        :sidebar-covers-entries="sidebarCoversEntries"
+        @default-page-deleted="cleanupDefaultNotebook"
+        @default-section-deleted="cleanupDefaultNotebook"
+        @pages-changed="pagesChanged"
+        @select-page="selectPage"
+        @sections-changed="sectionsChanged"
+        @select-section="selectSection"
+        @toggle-nav="toggleNav"
+      />
+      <div
+        class="c-notebook__page-view"
+        :class="{
+          'c-notebook--page-locked': selectedPage?.isLocked,
+          'c-notebook--page-unlocked': !selectedPage?.isLocked
+        }"
+      >
+        <div class="c-notebook__page-view__header">
+          <button
+            class="c-notebook__toggle-nav-button c-icon-button c-icon-button--major icon-menu-hamburger"
+            @click="toggleNav"
+          ></button>
+          <div class="c-notebook__page-view__path c-path">
+            <span class="c-notebook__path__section c-path__item">
+              {{ selectedSection ? selectedSection.name : '' }}
+            </span>
+            <span class="c-notebook__path__page c-path__item">
+              {{ selectedPage ? selectedPage.name : '' }}
+            </span>
+          </div>
+          <div class="c-notebook__page-view__controls">
+            <select v-model="showTime" class="c-notebook__controls__time">
+              <option value="0" :selected="showTime === 0">Show all</option>
+              <option value="1" :selected="showTime === 1">Last hour</option>
+              <option value="8" :selected="showTime === 8">Last 8 hours</option>
+              <option value="24" :selected="showTime === 24">Last 24 hours</option>
+            </select>
+            <select v-model="defaultSort" class="c-notebook__controls__time">
+              <option value="newest" :selected="defaultSort === 'newest'">Newest first</option>
+              <option value="oldest" :selected="defaultSort === 'oldest'">Oldest first</option>
+            </select>
+          </div>
+        </div>
+        <div
+          v-if="selectedPage && !selectedPage.isLocked"
+          :aria-disabled="activeTransaction"
+          class="c-notebook__drag-area icon-plus"
+          @click="newEntry(null, $event)"
+          @dragover="dragOver"
+          @drop.capture="dropCapture"
+          @drop="dropOnEntry($event)"
+        >
+          <span class="c-notebook__drag-area__label">
+            To start a new entry, click here or drag and drop any object
+          </span>
+        </div>
+        <progress-bar
+          v-if="savingTransaction"
+          class="c-telemetry-table__progress-bar"
+          :model="{ progressPerc: null }"
+        />
+        <div v-if="selectedPage && selectedPage.isLocked" class="c-notebook__page-locked-message">
+          <div class="icon-lock"></div>
+          <div class="c-notebook__page-locked-message-text">
+            This page has been committed and cannot be modified or removed
+          </div>
+        </div>
+        <div
+          v-if="selectedSection && selectedPage"
+          ref="notebookEntries"
+          class="c-notebook__entries"
+          aria-label="Notebook Entries"
+        >
+          <NotebookEntry
+            v-for="entry in filteredAndSortedEntries"
+            :key="entry.id"
+            :entry="entry"
+            :domain-object="domainObject"
+            :notebook-annotations="notebookAnnotations[entry.id]"
+            :selected-page="selectedPage"
+            :selected-section="selectedSection"
+            :read-only="false"
+            :is-locked="selectedPage.isLocked"
+            :selected-entry-id="selectedEntryId"
+            @cancel-edit="cancelTransaction"
+            @editing-entry="startTransaction"
+            @delete-entry="deleteEntry"
+            @update-entry="updateEntry"
+            @update-annotations="loadAnnotations"
+            @entry-selection="entrySelection(entry)"
+          />
+        </div>
+        <div
+          v-if="isRestricted && filteredAndSortedEntries?.length > 0 && !selectedPage.isLocked"
+          class="c-notebook__commit-entries-control"
+        >
+          <button
+            class="c-button commit-button icon-lock"
+            title="Commit entries and lock this page from further changes"
+            @click="lockPage()"
+          >
+            <span class="c-button__label">Commit Entries</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { debounce } from 'lodash';
+
+import Search from '@/ui/components/SearchComponent.vue';
+
+import ProgressBar from '../../../ui/components/ProgressBar.vue';
+import objectLink from '../../../ui/mixins/object-link.js';
+import { isNotebookViewType, RESTRICTED_NOTEBOOK_TYPE } from '../notebook-constants.js';
+import {
+  addNotebookEntry,
+  createNewEmbed,
+  createNewImageEmbed,
+  getEntryPosById,
+  getNotebookEntries,
+  mutateObject,
+  selectEntry
+} from '../utils/notebook-entries.js';
+import {
+  saveNotebookImageDomainObject,
+  updateNamespaceOfDomainObject
+} from '../utils/notebook-image.js';
+import {
+  clearDefaultNotebook,
+  getDefaultNotebook,
+  setDefaultNotebook,
+  setDefaultNotebookPageId,
+  setDefaultNotebookSectionId
+} from '../utils/notebook-storage.js';
+import NotebookEntry from './NotebookEntry.vue';
+import SearchResults from './SearchResults.vue';
+import Sidebar from './SidebarComponent.vue';
+function objectCopy(obj) {
+  return JSON.parse(JSON.stringify(obj));
+}
+
+export default {
+  components: {
+    NotebookEntry,
+    Search,
+    SearchResults,
+    Sidebar,
+    ProgressBar
+  },
+  inject: ['agent', 'openmct', 'snapshotContainer'],
+  props: {
+    domainObject: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      defaultPageId: this.getDefaultPageId(),
+      defaultSectionId: this.getDefaultSectionId(),
+      selectedSectionId: this.getSelectedSectionId(),
+      selectedPageId: this.getSelectedPageId(),
+      defaultSort: this.domainObject.configuration.defaultSort,
+      focusEntryId: null,
+      isRestricted: this.domainObject.type === RESTRICTED_NOTEBOOK_TYPE,
+      search: '',
+      searchResults: [],
+      lastLocalAnnotationCreation: 0,
+      showTime: this.domainObject.configuration.showTime || 0,
+      showNav: false,
+      sidebarCoversEntries: false,
+      filteredAndSortedEntries: [],
+      notebookAnnotations: {},
+      selectedEntryId: undefined,
+      activeTransaction: false,
+      savingTransaction: false,
+      sections: this.domainObject.configuration.sections || []
+    };
+  },
+  computed: {
+    pages() {
+      return this.getPages() || [];
+    },
+    selectedPage() {
+      const pages = this.getPages();
+      if (!pages.length) {
+        return undefined;
+      }
+
+      const selectedPage = pages.find((page) => page.id === this.selectedPageId);
+      if (selectedPage) {
+        return selectedPage;
+      }
+
+      const defaultPage = pages.find((page) => page.id === this.defaultPageId);
+      if (defaultPage) {
+        return defaultPage;
+      }
+
+      return this.pages[0];
+    },
+    selectedSection() {
+      if (!this.sections.length) {
+        return undefined;
+      }
+
+      const selectedSection = this.sections.find(
+        (section) => section.id === this.selectedSectionId
+      );
+      if (selectedSection) {
+        return selectedSection;
+      }
+
+      const defaultSection = this.sections.find((section) => section.id === this.defaultSectionId);
+      if (defaultSection) {
+        return defaultSection;
+      }
+
+      return this.sections[0];
+    },
+    sidebarClasses() {
+      let sidebarClasses = [];
+      if (this.showNav) {
+        sidebarClasses.push('is-expanded');
+      }
+
+      if (this.sidebarCoversEntries) {
+        sidebarClasses.push('c-drawer--overlays');
+      } else {
+        sidebarClasses.push('c-drawer--push');
+      }
+
+      return sidebarClasses;
+    }
+  },
+  watch: {
+    search() {
+      this.getSearchResults();
+    },
+    defaultSort() {
+      mutateObject(this.openmct, this.domainObject, 'configuration.defaultSort', this.defaultSort);
+      this.filterAndSortEntries();
+    },
+    showTime() {
+      mutateObject(this.openmct, this.domainObject, 'configuration.showTime', this.showTime);
+    },
+    notebookAnnotations: {
+      handler() {
+        this.filterAndSortEntries();
+      },
+      deep: true
+    }
+  },
+  beforeMount() {
+    this.getSearchResults = debounce(this.getSearchResults, 500);
+    this.syncUrlWithPageAndSection = debounce(this.syncUrlWithPageAndSection, 100);
+  },
+  async created() {
+    this.transaction = null;
+    this.abortController = new AbortController();
+    try {
+      await this.loadAnnotations();
+    } catch (err) {
+      if (err.name !== 'AbortError') {
+        throw err;
+      }
+    }
+  },
+  mounted() {
+    this.formatSidebar();
+    this.setSectionAndPageFromUrl();
+
+    this.openmct.selection.on('change', this.updateSelection);
+
+    window.addEventListener('orientationchange', this.formatSidebar);
+    window.addEventListener('hashchange', this.setSectionAndPageFromUrl);
+    this.filterAndSortEntries();
+    this.unobserveEntries = this.openmct.objects.observe(
+      this.domainObject,
+      '*',
+      this.filterAndSortEntries
+    );
+  },
+  beforeUnmount() {
+    this.abortController.abort();
+    if (this.unlisten) {
+      this.unlisten();
+    }
+
+    if (this.unobserveEntries) {
+      this.unobserveEntries();
+    }
+
+    Object.keys(this.notebookAnnotations).forEach((entryID) => {
+      const notebookAnnotationsForEntry = this.notebookAnnotations[entryID];
+      notebookAnnotationsForEntry.forEach((notebookAnnotation) => {
+        this.openmct.objects.destroyMutable(notebookAnnotation);
+      });
+    });
+
+    window.removeEventListener('orientationchange', this.formatSidebar);
+    window.removeEventListener('hashchange', this.setSectionAndPageFromUrl);
+    this.openmct.selection.off('change', this.updateSelection);
+  },
+  updated: function () {
+    this.$nextTick(() => {
+      this.focusOnEntryId();
+    });
+  },
+  methods: {
+    changeSectionPage(newParams, oldParams, changedParams) {
+      if (isNotebookViewType(newParams.view)) {
+        return;
+      }
+
+      let pageId = newParams.pageId;
+      let sectionId = newParams.sectionId;
+
+      if (!pageId && !sectionId) {
+        return;
+      }
+
+      this.sections.forEach((section) => {
+        section.isSelected = Boolean(section.id === sectionId);
+
+        if (section.isSelected) {
+          section.pages.forEach((page) => {
+            page.isSelected = Boolean(page.id === pageId);
+          });
+        }
+      });
+    },
+    updateSelection(selection) {
+      const keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+
+      if (selection?.[0]?.[0]?.context?.targetDetails?.[keyString]?.entryId === undefined) {
+        this.selectedEntryId = undefined;
+      }
+    },
+    async loadAnnotations() {
+      if (!this.openmct.annotation.getAvailableTags().length) {
+        // don't bother loading annotations if there are no tags
+        return;
+      }
+
+      this.lastLocalAnnotationCreation = this.domainObject.annotationLastCreated ?? 0;
+
+      const foundAnnotations = await this.openmct.annotation.getAnnotations(
+        this.domainObject.identifier,
+        this.abortController.signal
+      );
+
+      foundAnnotations.forEach((foundAnnotation) => {
+        const target = foundAnnotation.targets?.[0];
+        const entryId = target.entryId;
+        if (!this.notebookAnnotations[entryId]) {
+          this.notebookAnnotations[entryId] = [];
+        }
+
+        const annotationExtant = this.notebookAnnotations[entryId].some((existingAnnotation) => {
+          return this.openmct.objects.areIdsEqual(
+            existingAnnotation.identifier,
+            foundAnnotation.identifier
+          );
+        });
+        if (!annotationExtant) {
+          const annotationArray = this.notebookAnnotations[entryId];
+          const mutableAnnotation = this.openmct.objects.toMutable(foundAnnotation);
+          annotationArray.push(mutableAnnotation);
+        }
+      });
+    },
+    filterAndSortEntries() {
+      const filterTime = this.openmct.time.now();
+      const pageEntries =
+        getNotebookEntries(this.domainObject, this.selectedSection, this.selectedPage) || [];
+      const hours = parseInt(this.showTime, 10);
+      const filteredPageEntriesByTime = hours
+        ? pageEntries.filter((entry) => filterTime - entry.createdOn <= hours * 60 * 60 * 1000)
+        : pageEntries;
+
+      this.filteredAndSortedEntries =
+        this.defaultSort === 'oldest'
+          ? filteredPageEntriesByTime
+          : [...filteredPageEntriesByTime].reverse();
+
+      if (this.lastLocalAnnotationCreation < this.domainObject.annotationLastCreated) {
+        this.loadAnnotations().catch((err) => {
+          if (err.name !== 'AbortError') {
+            throw err;
+          }
+        });
+      }
+    },
+    changeSelectedSection({ sectionId, pageId }) {
+      const sections = this.sections.map((s) => {
+        s.isSelected = false;
+
+        if (s.id === sectionId) {
+          s.isSelected = true;
+        }
+
+        s.pages.forEach((p, i) => {
+          p.isSelected = false;
+
+          if (pageId && pageId === p.id) {
+            p.isSelected = true;
+          }
+
+          if (!pageId && i === 0) {
+            p.isSelected = true;
+          }
+        });
+
+        return s;
+      });
+
+      this.sectionsChanged({ sections });
+      this.resetSearch();
+    },
+    cleanupDefaultNotebook() {
+      this.defaultPageId = undefined;
+      this.defaultSectionId = undefined;
+      this.removeDefaultClass(this.domainObject.identifier);
+      clearDefaultNotebook();
+    },
+    lockPage() {
+      let prompt = this.openmct.overlays.dialog({
+        iconClass: 'alert',
+        message:
+          'This action will lock this page and disallow any new entries, or editing of existing entries. Do you want to continue?',
+        buttons: [
+          {
+            label: 'Lock Page',
+            callback: () => {
+              this.selectedPage.isLocked = true;
+
+              // cant be default if it's locked
+              if (this.selectedPage.id === this.defaultPageId) {
+                this.cleanupDefaultNotebook();
+              }
+
+              if (!this.selectedSection.isLocked) {
+                this.selectedSection.isLocked = true;
+              }
+
+              mutateObject(
+                this.openmct,
+                this.domainObject,
+                'configuration.sections',
+                this.sections
+              );
+
+              if (!this.domainObject.locked) {
+                mutateObject(this.openmct, this.domainObject, 'locked', true);
+              }
+
+              prompt.dismiss();
+            }
+          },
+          {
+            label: 'Cancel',
+            callback: () => {
+              prompt.dismiss();
+            }
+          }
+        ]
+      });
+    },
+    setSectionAndPageFromUrl() {
+      let sectionId =
+        this.getSectionIdFromUrl() || this.getDefaultSectionId() || this.getSelectedSectionId();
+      let pageId = this.getPageIdFromUrl() || this.getDefaultPageId() || this.getSelectedPageId();
+
+      this.selectSection(sectionId);
+      this.selectPage(pageId);
+    },
+    createNotebookStorageObject() {
+      const page = this.selectedPage;
+      const section = this.selectedSection;
+
+      return {
+        name: this.domainObject.name,
+        identifier: this.domainObject.identifier,
+        link: this.getLinktoNotebook(),
+        defaultSectionId: section.id,
+        defaultPageId: page.id
+      };
+    },
+    deleteEntry(entryId) {
+      const entryPos = getEntryPosById(
+        entryId,
+        this.domainObject,
+        this.selectedSection,
+        this.selectedPage
+      );
+      if (entryPos === -1) {
+        this.openmct.notifications.alert('Warning: unable to delete entry');
+        console.error(
+          `unable to delete entry ${entryId} from section ${this.selectedSection}, page ${this.selectedPage}`
+        );
+
+        this.cancelTransaction();
+
+        return;
+      }
+
+      const dialog = this.openmct.overlays.dialog({
+        iconClass: 'alert',
+        message: 'This action will permanently delete this entry. Do you wish to continue?',
+        buttons: [
+          {
+            label: 'Ok',
+            emphasis: true,
+            callback: () => {
+              const entries = getNotebookEntries(
+                this.domainObject,
+                this.selectedSection,
+                this.selectedPage
+              );
+              if (entries) {
+                entries.splice(entryPos, 1);
+                this.updateEntries(entries);
+                this.filterAndSortEntries();
+                this.removeAnnotations(entryId);
+              } else {
+                this.cancelTransaction();
+              }
+
+              dialog.dismiss();
+            }
+          },
+          {
+            label: 'Cancel',
+            callback: () => {
+              dialog.dismiss();
+            }
+          }
+        ]
+      });
+    },
+    removeAnnotations(entryId) {
+      if (this.notebookAnnotations[entryId]) {
+        this.openmct.annotation.deleteAnnotations(this.notebookAnnotations[entryId]);
+      }
+    },
+    checkEntryPos(entry) {
+      const entryPos = getEntryPosById(
+        entry.id,
+        this.domainObject,
+        this.selectedSection,
+        this.selectedPage
+      );
+      if (entryPos === -1) {
+        this.openmct.notifications.alert('Warning: unable to tag entry');
+        console.error(
+          `unable to tag entry ${entry} from section ${this.selectedSection}, page ${this.selectedPage}`
+        );
+
+        return false;
+      }
+
+      return true;
+    },
+    dragOver(event) {
+      event.preventDefault();
+      event.dataTransfer.dropEffect = 'copy';
+    },
+    dropCapture(event) {
+      const isEditing = this.openmct.editor.isEditing();
+      if (isEditing) {
+        this.openmct.editor.cancel();
+      }
+    },
+    async dropOnEntry(dropEvent) {
+      dropEvent.preventDefault();
+      dropEvent.stopImmediatePropagation();
+
+      const dataTransferFiles = Array.from(dropEvent.dataTransfer.files);
+      const localImageDropped = dataTransferFiles.some((file) => file.type.includes('image'));
+      const snapshotId = dropEvent.dataTransfer.getData('openmct/snapshot/id');
+      const domainObjectData = dropEvent.dataTransfer.getData('openmct/domain-object-path');
+      const imageUrl = dropEvent.dataTransfer.getData('URL');
+      if (localImageDropped) {
+        // local image(s) dropped from disk (file)
+        const embeds = [];
+        await Promise.all(
+          dataTransferFiles.map(async (file) => {
+            if (file.type.includes('image')) {
+              const imageData = file;
+              const imageEmbed = await createNewImageEmbed(
+                imageData,
+                this.openmct,
+                imageData?.name
+              );
+              embeds.push(imageEmbed);
+            }
+          })
+        );
+        this.newEntry(embeds);
+      } else if (imageUrl) {
+        // remote image dropped (URL)
+        try {
+          const response = await fetch(imageUrl);
+          const imageData = await response.blob();
+          const imageEmbed = await createNewImageEmbed(imageData, this.openmct);
+          this.newEntry([imageEmbed]);
+        } catch (error) {
+          this.openmct.notifications.alert(`Unable to add image: ${error.message} `);
+          console.error(`Problem embedding remote image`, error);
+        }
+      } else if (snapshotId.length) {
+        // snapshot object
+        const snapshot = this.snapshotContainer.getSnapshot(snapshotId);
+        this.newEntry([snapshot.embedObject]);
+        this.snapshotContainer.removeSnapshot(snapshotId);
+
+        const namespace = this.domainObject.identifier.namespace;
+        const notebookImageDomainObject = updateNamespaceOfDomainObject(
+          snapshot.notebookImageDomainObject,
+          namespace
+        );
+        saveNotebookImageDomainObject(this.openmct, notebookImageDomainObject);
+      } else if (domainObjectData) {
+        // plain domain object
+        const objectPath = JSON.parse(domainObjectData);
+        const bounds = this.openmct.time.bounds();
+        const snapshotMeta = {
+          bounds,
+          link: null,
+          objectPath,
+          openmct: this.openmct
+        };
+        const embed = await createNewEmbed(snapshotMeta);
+        this.newEntry([embed]);
+      } else {
+        this.openmct.notifications.error(
+          `Unknown object(s) dropped and cannot embed. Try again with an image or domain object.`
+        );
+        console.warn(
+          `Unknown object(s) dropped and cannot embed. Try again with an image or domain object.`
+        );
+        return;
+      }
+    },
+    focusOnEntryId() {
+      if (!this.focusEntryId) {
+        return;
+      }
+
+      const element = this.$refs.notebookEntries.querySelector(`#${this.focusEntryId}`);
+
+      if (!element) {
+        return;
+      }
+
+      element.focus();
+      this.focusEntryId = null;
+    },
+    formatSidebar() {
+      /*
+                Determine if the sidebar should slide over content, or compress it
+                Slide over checks:
+                - phone (all orientations)
+                - tablet portrait
+                - in a layout frame (within .c-so-view)
+            */
+      const isPhone = this.agent.isPhone();
+      const isTablet = this.agent.isTablet();
+      const isPortrait = this.agent.isPortrait();
+      const isInLayout = Boolean(this.$el.closest('.c-so-view'));
+      const sidebarCoversEntries = isPhone || (isTablet && isPortrait) || isInLayout;
+      this.sidebarCoversEntries = sidebarCoversEntries;
+    },
+    getDefaultPageId() {
+      return this.isDefaultNotebook() ? getDefaultNotebook().defaultPageId : undefined;
+    },
+    isDefaultNotebook() {
+      const defaultNotebook = getDefaultNotebook();
+      const defaultNotebookIdentifier = defaultNotebook && defaultNotebook.identifier;
+
+      return (
+        defaultNotebookIdentifier !== null &&
+        this.openmct.objects.areIdsEqual(defaultNotebookIdentifier, this.domainObject.identifier)
+      );
+    },
+    getDefaultSectionId() {
+      return this.isDefaultNotebook() ? getDefaultNotebook().defaultSectionId : undefined;
+    },
+    getLinktoNotebook() {
+      const objectPath = this.openmct.router.path;
+      const link = objectLink.computed.objectLink.call({
+        objectPath,
+        openmct: this.openmct
+      });
+
+      const selectedSection = this.selectedSection;
+      const selectedPage = this.selectedPage;
+      const sectionId = selectedSection ? selectedSection.id : '';
+      const pageId = selectedPage ? selectedPage.id : '';
+
+      return `${link}?sectionId=${sectionId}&pageId=${pageId}`;
+    },
+    getPage(section, id) {
+      return section.pages.find((p) => p.id === id);
+    },
+    getSection(id) {
+      return this.sections.find((s) => s.id === id);
+    },
+    getSearchResults() {
+      if (!this.search.length) {
+        return [];
+      }
+
+      const output = [];
+      const sections = this.domainObject.configuration.sections;
+      const entries = this.domainObject.configuration.entries;
+      const searchTextLower = this.search.toLowerCase();
+      const originalSearchText = this.search;
+      let sectionTrackPageHit;
+      let pageTrackEntryHit;
+      let sectionTrackEntryHit;
+
+      sections.forEach((section) => {
+        const pages = section.pages;
+        let resultMetadata = {
+          originalSearchText,
+          sectionHit: section.name && section.name.toLowerCase().includes(searchTextLower)
+        };
+        sectionTrackPageHit = false;
+        sectionTrackEntryHit = false;
+
+        pages.forEach((page) => {
+          resultMetadata.pageHit = page.name && page.name.toLowerCase().includes(searchTextLower);
+          pageTrackEntryHit = false;
+
+          if (resultMetadata.pageHit) {
+            sectionTrackPageHit = true;
+          }
+
+          // check for no entries first
+          if (entries[section.id] && entries[section.id][page.id]) {
+            const pageEntries = entries[section.id][page.id];
+
+            pageEntries.forEach((entry) => {
+              const entryHit = entry.text && entry.text.toLowerCase().includes(searchTextLower);
+
+              // any entry hit goes in, it's the most unique of the hits
+              if (entryHit) {
+                resultMetadata.entryHit = entryHit;
+                pageTrackEntryHit = true;
+                sectionTrackEntryHit = true;
+
+                output.push(
+                  objectCopy({
+                    metadata: resultMetadata,
+                    section,
+                    page,
+                    entry
+                  })
+                );
+              }
+            });
+          }
+
+          // all entries checked, now in pages,
+          // if page hit, but not in results, need to add
+          if (resultMetadata.pageHit && !pageTrackEntryHit) {
+            resultMetadata.entryHit = false;
+
+            output.push(
+              objectCopy({
+                metadata: resultMetadata,
+                section,
+                page
+              })
+            );
+          }
+        });
+
+        // all pages checked, now in sections,
+        // if section hit, but not in results, need to add and default page
+        if (resultMetadata.sectionHit && !sectionTrackPageHit && !sectionTrackEntryHit) {
+          resultMetadata.entryHit = false;
+          resultMetadata.pageHit = false;
+
+          output.push(
+            objectCopy({
+              metadata: resultMetadata,
+              section,
+              page: pages[0]
+            })
+          );
+        }
+      });
+
+      this.searchResults = output;
+    },
+    getPages() {
+      if (!this.selectedSection || !this.selectedSection.pages.length) {
+        return [];
+      }
+
+      return this.selectedSection.pages;
+    },
+    getSelectedPageId() {
+      return this.selectedPage?.id;
+    },
+    getSelectedSectionId() {
+      return this.selectedSection?.id;
+    },
+    async newEntry(embeds, event) {
+      this.startTransaction();
+      this.resetSearch();
+      const notebookStorage = this.createNotebookStorageObject();
+      this.updateDefaultNotebook(notebookStorage);
+      const id = await addNotebookEntry(this.openmct, this.domainObject, notebookStorage, embeds);
+
+      const element = this.$refs.notebookEntries.querySelector(`#${id}`);
+      const entryAnnotations = this.notebookAnnotations[id] ?? {};
+      selectEntry({
+        element,
+        entryId: id,
+        domainObject: this.domainObject,
+        openmct: this.openmct,
+        notebookAnnotations: entryAnnotations
+      });
+      if (event) {
+        event.stopPropagation();
+      }
+
+      this.filterAndSortEntries();
+      this.focusEntryId = id;
+      this.selectedEntryId = id;
+
+      // put entry into edit mode
+      this.$nextTick(() => {
+        element.dispatchEvent(new Event('click'));
+      });
+    },
+    orientationChange() {
+      this.formatSidebar();
+    },
+    pagesChanged({ pages = [], id = null }) {
+      const selectedSection = this.selectedSection;
+      if (!selectedSection) {
+        return;
+      }
+
+      selectedSection.pages = pages;
+      const sections = this.sections.map((section) => {
+        if (section.id === selectedSection.id) {
+          section = selectedSection;
+        }
+
+        return section;
+      });
+
+      this.sectionsChanged({ sections });
+    },
+    removeDefaultClass(identifier) {
+      this.openmct.status.delete(identifier);
+    },
+    resetSearch() {
+      this.search = '';
+      this.searchResults = [];
+    },
+    toggleNav() {
+      this.showNav = !this.showNav;
+    },
+    updateDefaultNotebook(updatedNotebookStorageObject) {
+      if (!this.isDefaultNotebook()) {
+        const persistedNotebookStorageObject = getDefaultNotebook();
+        if (
+          persistedNotebookStorageObject &&
+          persistedNotebookStorageObject.identifier !== undefined
+        ) {
+          this.removeDefaultClass(persistedNotebookStorageObject.identifier);
+        }
+
+        setDefaultNotebook(this.openmct, updatedNotebookStorageObject, this.domainObject);
+      }
+
+      if (this.defaultSectionId !== updatedNotebookStorageObject.defaultSectionId) {
+        setDefaultNotebookSectionId(updatedNotebookStorageObject.defaultSectionId);
+        this.defaultSectionId = updatedNotebookStorageObject.defaultSectionId;
+      }
+
+      if (this.defaultPageId !== updatedNotebookStorageObject.defaultPageId) {
+        setDefaultNotebookPageId(updatedNotebookStorageObject.defaultPageId);
+        this.defaultPageId = updatedNotebookStorageObject.defaultPageId;
+      }
+    },
+    updateDefaultNotebookSection(sections, id) {
+      if (!id) {
+        return;
+      }
+
+      const notebookStorage = getDefaultNotebook();
+      if (!notebookStorage || notebookStorage.identifier.key !== this.domainObject.identifier.key) {
+        return;
+      }
+
+      const defaultNotebookSectionId = notebookStorage.defaultSectionId;
+      if (defaultNotebookSectionId === id) {
+        const section = sections.find((s) => s.id === id);
+        if (!section) {
+          this.removeDefaultClass(this.domainObject.identifier);
+          clearDefaultNotebook();
+
+          return;
+        }
+      }
+
+      if (id !== defaultNotebookSectionId) {
+        return;
+      }
+
+      setDefaultNotebookSectionId(defaultNotebookSectionId);
+    },
+    updateEntry(entry) {
+      const entries = getNotebookEntries(
+        this.domainObject,
+        this.selectedSection,
+        this.selectedPage
+      );
+      const entryPos = getEntryPosById(
+        entry.id,
+        this.domainObject,
+        this.selectedSection,
+        this.selectedPage
+      );
+      entries[entryPos] = entry;
+
+      this.updateEntries(entries);
+    },
+    updateEntries(entries) {
+      const configuration = this.domainObject.configuration;
+      const notebookEntries = configuration.entries || {};
+      notebookEntries[this.selectedSection.id][this.selectedPage.id] = entries;
+
+      mutateObject(this.openmct, this.domainObject, 'configuration.entries', notebookEntries);
+
+      this.saveTransaction();
+    },
+    getPageIdFromUrl() {
+      return this.openmct.router.getParams().pageId;
+    },
+    getSectionIdFromUrl() {
+      return this.openmct.router.getParams().sectionId;
+    },
+    syncUrlWithPageAndSection() {
+      this.openmct.router.updateParams({
+        pageId: this.selectedPageId,
+        sectionId: this.selectedSectionId
+      });
+    },
+    sectionsChanged({ sections, id = undefined }) {
+      this.sections = [...sections];
+      this.startTransaction();
+      mutateObject(this.openmct, this.domainObject, 'configuration.sections', sections);
+      this.saveTransaction();
+      this.updateDefaultNotebookSection(sections, id);
+    },
+    selectPage(pageId) {
+      if (!pageId) {
+        return;
+      }
+
+      this.selectedPageId = pageId;
+      this.syncUrlWithPageAndSection();
+      this.filterAndSortEntries();
+    },
+    selectSection(sectionId) {
+      if (!sectionId) {
+        return;
+      }
+
+      this.selectedSectionId = sectionId;
+
+      const pageId = this.selectedSection.pages[0].id;
+      this.selectPage(pageId);
+
+      this.syncUrlWithPageAndSection();
+      this.filterAndSortEntries();
+    },
+    startTransaction() {
+      if (!this.openmct.objects.isTransactionActive()) {
+        this.activeTransaction = true;
+        this.transaction = this.openmct.objects.startTransaction();
+      }
+    },
+    async saveTransaction() {
+      if (this.transaction !== null) {
+        this.savingTransaction = true;
+        try {
+          await this.transaction.commit();
+        } finally {
+          this.endTransaction();
+        }
+      }
+    },
+    async cancelTransaction() {
+      if (this.transaction !== null) {
+        try {
+          await this.transaction.cancel();
+        } finally {
+          this.endTransaction();
+        }
+      }
+    },
+    entrySelection(entry) {
+      this.selectedEntryId = entry.id;
+    },
+    endTransaction() {
+      this.openmct.objects.endTransaction();
+      this.transaction = null;
+      this.savingTransaction = false;
+      this.activeTransaction = false;
+    }
+  }
+};
+</script>
diff --git a/src/plugins/notebook/components/NotebookEmbed.vue b/src/plugins/notebook/components/NotebookEmbed.vue
index 6011a0d544e..9fb4d061644 100644
--- a/src/plugins/notebook/components/NotebookEmbed.vue
+++ b/src/plugins/notebook/components/NotebookEmbed.vue
@@ -1,267 +1,444 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div class="c-snapshot c-ne__embed">
-    <div v-if="embed.snapshot"
-         class="c-ne__embed__snap-thumb"
-         @click="openSnapshot()"
-    >
-        <img :src="thumbnailImage">
+  <div
+    ref="notebookEmbed"
+    class="c-snapshot c-ne__embed"
+    @mouseover.ctrl="showToolTip"
+    @mouseleave="hideToolTip"
+  >
+    <div v-if="embed.snapshot" class="c-ne__embed__snap-thumb" @click="openSnapshot()">
+      <img :src="thumbnailImage" :alt="`${embed.name} thumbnail`" />
     </div>
     <div class="c-ne__embed__info">
-        <div class="c-ne__embed__name">
-            <a class="c-ne__embed__link"
-               :class="embed.cssClass"
-               @click="changeLocation"
-            >{{ embed.name }}</a>
-            <PopupMenu :popup-menu-items="popupMenuItems" />
-        </div>
-        <div v-if="embed.snapshot"
-             class="c-ne__embed__time"
-        >
-            {{ createdOn }}
-        </div>
+      <div class="c-ne__embed__name">
+        <a class="c-ne__embed__link" :class="embed.cssClass" @click="navigateToItemInTime">
+          {{ embed.name }}
+        </a>
+        <button
+          class="c-ne__embed__actions c-icon-button icon-3-dots"
+          title="More actions"
+          aria-label="More actions"
+          @click.prevent.stop="showMenuItems($event)"
+        ></button>
+      </div>
+      <div class="c-ne__embed__time">
+        {{ createdOn }}
+      </div>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
 import Moment from 'moment';
-import PreviewAction from '../../../ui/preview/PreviewAction';
-import RemoveDialog from '../utils/removeDialog';
-import PainterroInstance from '../utils/painterroInstance';
-import SnapshotTemplate from './snapshot-template.html';
+import mount from 'utils/mount';
 
-import { updateNotebookImageDomainObject } from '../utils/notebook-image';
-import ImageExporter from '../../../exporters/ImageExporter';
+import objectPathToUrl from '@/tools/url';
 
-import PopupMenu from './PopupMenu.vue';
-import Vue from 'vue';
+import tooltipHelpers from '../../../api/tooltips/tooltipMixins.js';
+import ImageExporter from '../../../exporters/ImageExporter.js';
+import PreviewAction from '../../../ui/preview/PreviewAction.js';
+import { updateNotebookImageDomainObject } from '../utils/notebook-image.js';
+import PainterroInstance from '../utils/painterroInstance.js';
+import RemoveDialog from '../utils/removeDialog.js';
+import SnapshotTemplate from './snapshot-template.html';
 
 export default {
-    components: {
-        PopupMenu
+  mixins: [tooltipHelpers],
+  inject: ['openmct', 'snapshotContainer'],
+  props: {
+    embed: {
+      type: Object,
+      default() {
+        return {};
+      }
     },
-    inject: ['openmct'],
-    props: {
-        embed: {
-            type: Object,
-            default() {
-                return {};
-            }
-        },
-        removeActionString: {
-            type: String,
-            default() {
-                return 'Remove This Embed';
-            }
-        }
+    isLocked: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    isSnapshotContainer: {
+      type: Boolean,
+      default() {
+        return false;
+      }
     },
-    data() {
-        return {
-            popupMenuItems: []
+    removeActionString: {
+      type: String,
+      default() {
+        return 'Remove This Embed';
+      }
+    }
+  },
+  emits: ['update-embed', 'remove-embed'],
+  data() {
+    return {
+      menuActions: []
+    };
+  },
+  computed: {
+    createdOn() {
+      return this.formatTime(this.embed.createdOn, 'YYYY-MM-DD HH:mm:ss');
+    },
+    thumbnailImage() {
+      return this.embed.snapshot.thumbnailImage
+        ? this.embed.snapshot.thumbnailImage.src
+        : this.embed.snapshot.src;
+    }
+  },
+  watch: {
+    isLocked(value) {
+      if (value === true) {
+        const index = this.menuActions.findIndex((item) => item.id === 'removeEmbed');
+        this.menuActions.splice(index, 1);
+      }
+    }
+  },
+  async mounted() {
+    this.objectPath = [];
+    await this.setEmbedObjectPath();
+    this.addMenuActions();
+    this.imageExporter = new ImageExporter(this.openmct);
+  },
+  methods: {
+    showMenuItems(event) {
+      const x = event.x;
+      const y = event.y;
+
+      const menuOptions = {
+        menuClass: 'c-ne__embed__actions-menu',
+        placement: this.openmct.menus.menuPlacement.TOP_RIGHT
+      };
+
+      this.openmct.menus.showSuperMenu(x, y, this.menuActions, menuOptions);
+    },
+    addMenuActions() {
+      if (this.embed.snapshot) {
+        const viewSnapshot = {
+          id: 'viewSnapshot',
+          cssClass: 'icon-camera',
+          name: 'View Snapshot',
+          description: 'View the snapshot image taken in the form of a jpeg.',
+          onItemClicked: () => this.openSnapshot()
+        };
+
+        this.menuActions.splice(0, this.menuActions.length, viewSnapshot);
+      }
+
+      if (this.embed.domainObject) {
+        const navigateToItem = {
+          id: 'navigateToItem',
+          cssClass: this.embed.cssClass,
+          name: 'Navigate to Item',
+          description: 'Navigate to the item with the current time settings.',
+          onItemClicked: () => this.navigateToItem()
         };
+
+        const navigateToItemInTime = {
+          id: 'navigateToItemInTime',
+          cssClass: this.embed.cssClass,
+          name: 'Navigate to Item in Time',
+          description: 'Navigate to the item in its time frame when captured.',
+          onItemClicked: () => this.navigateToItemInTime()
+        };
+
+        const quickView = {
+          id: 'quickView',
+          cssClass: 'icon-eye-open',
+          name: 'Quick View',
+          description: 'Full screen overlay view of the item.',
+          onItemClicked: () => this.previewEmbed()
+        };
+
+        this.menuActions.push(...[quickView, navigateToItem, navigateToItemInTime]);
+      }
+
+      if (!this.isLocked) {
+        const removeEmbed = {
+          id: 'removeEmbed',
+          cssClass: 'icon-trash',
+          name: this.removeActionString,
+          description: 'Permanently delete this embed from this Notebook entry.',
+          onItemClicked: this.getRemoveDialog.bind(this)
+        };
+
+        this.menuActions.push(removeEmbed);
+      }
+    },
+    async setEmbedObjectPath() {
+      if (!this.embed.domainObject) {
+        return;
+      }
+      this.objectPath = await this.openmct.objects.getOriginalPath(
+        this.embed.domainObject.identifier
+      );
+
+      if (
+        this.objectPath.length > 0 &&
+        this.objectPath[this.objectPath.length - 1].type === 'root'
+      ) {
+        this.objectPath.pop();
+      }
     },
-    computed: {
-        createdOn() {
-            return this.formatTime(this.embed.createdOn, 'YYYY-MM-DD HH:mm:ss');
+    annotateSnapshot() {
+      const { vNode, destroy } = mount(
+        {
+          template: '<div id="snap-annotation"></div>'
         },
-        thumbnailImage() {
-            return this.embed.snapshot.thumbnailImage
-                ? this.embed.snapshot.thumbnailImage.src
-                : this.embed.snapshot.src;
+        {
+          app: this.openmct.app
         }
+      );
+
+      const painterroInstance = new PainterroInstance(vNode.el, this.openmct);
+      const annotateOverlay = this.openmct.overlays.overlay({
+        element: vNode.el,
+        size: 'large',
+        dismissable: false,
+        buttons: [
+          {
+            label: 'Cancel',
+            callback: () => {
+              painterroInstance.dismiss();
+              annotateOverlay.dismiss();
+            }
+          },
+          {
+            label: 'Save',
+            emphasis: true,
+            callback: () => {
+              painterroInstance.save((snapshotObject) => {
+                annotateOverlay.dismiss();
+                this.snapshotOverlay.dismiss();
+                this.updateSnapshot(snapshotObject);
+                this.openSnapshotOverlay(snapshotObject.fullSizeImage.src);
+              });
+            }
+          }
+        ],
+        onDestroy: destroy
+      });
+
+      painterroInstance.initialize();
+
+      const fullSizeImageObjectIdentifier = this.embed.snapshot.fullSizeImageObjectIdentifier;
+      if (!fullSizeImageObjectIdentifier) {
+        // legacy image data stored in embed
+        painterroInstance.show(this.embed.snapshot.src);
+
+        return;
+      }
+
+      if (this.isSnapshotContainer) {
+        const snapshot = this.snapshotContainer.getSnapshot(this.embed.id);
+        const fullSizeImageURL = snapshot.notebookImageDomainObject.configuration.fullSizeImageURL;
+        painterroInstance.show(fullSizeImageURL);
+
+        return;
+      }
+
+      this.openmct.objects.get(fullSizeImageObjectIdentifier).then((object) => {
+        painterroInstance.show(object.configuration.fullSizeImageURL);
+      });
     },
-    mounted() {
-        this.addPopupMenuItems();
-        this.imageExporter = new ImageExporter(this.openmct);
+    navigateToItem() {
+      const url = objectPathToUrl(this.openmct, this.objectPath);
+      this.openmct.router.navigate(url);
     },
-    methods: {
-        addPopupMenuItems() {
-            const removeEmbed = {
-                cssClass: 'icon-trash',
-                name: this.removeActionString,
-                callback: this.getRemoveDialog.bind(this)
-            };
-            const preview = {
-                cssClass: 'icon-eye-open',
-                name: 'Preview',
-                callback: this.previewEmbed.bind(this)
-            };
+    navigateToItemInTime() {
+      if (!this.embed.historicLink) {
+        // no historic link available
 
-            this.popupMenuItems = [removeEmbed, preview];
-        },
-        annotateSnapshot() {
-            const annotateVue = new Vue({
-                template: '<div id="snap-annotation"></div>'
-            }).$mount();
-
-            const painterroInstance = new PainterroInstance(annotateVue.$el);
-            const annotateOverlay = this.openmct.overlays.overlay({
-                element: annotateVue.$el,
-                size: 'large',
-                dismissable: false,
-                buttons: [
-                    {
-                        label: 'Cancel',
-                        callback: () => {
-                            painterroInstance.dismiss();
-                            annotateOverlay.dismiss();
-                        }
-                    },
-                    {
-                        label: 'Save',
-                        emphasis: true,
-                        callback: () => {
-                            painterroInstance.save((snapshotObject) => {
-                                annotateOverlay.dismiss();
-                                this.snapshotOverlay.dismiss();
-                                this.updateSnapshot(snapshotObject);
-                                this.openSnapshotOverlay(snapshotObject.fullSizeImage.src);
-                            });
-                        }
-                    }
-                ],
-                onDestroy: () => {
-                    annotateVue.$destroy(true);
-                }
-            });
-
-            painterroInstance.intialize();
-
-            const fullSizeImageObjectIdentifier = this.embed.snapshot.fullSizeImageObjectIdentifier;
-            if (!fullSizeImageObjectIdentifier) {
-                // legacy image data stored in embed
-                painterroInstance.show(this.embed.snapshot.src);
-
-                return;
-            }
+        return;
+      }
+      const hash = this.embed.historicLink;
 
-            this.openmct.objects.get(fullSizeImageObjectIdentifier)
-                .then(object => {
-                    painterroInstance.show(object.configuration.fullSizeImageURL);
-                });
-        },
-        changeLocation() {
-            const hash = this.embed.historicLink;
-
-            const bounds = this.openmct.time.bounds();
-            const isTimeBoundChanged = this.embed.bounds.start !== bounds.start
-                || this.embed.bounds.end !== bounds.end;
-            const isFixedTimespanMode = !this.openmct.time.clock();
-
-            this.openmct.time.stopClock();
-            let message = '';
-            if (isTimeBoundChanged) {
-                this.openmct.time.bounds({
-                    start: this.embed.bounds.start,
-                    end: this.embed.bounds.end
-                });
-                message = 'Time bound values changed';
-            }
+      const bounds = this.openmct.time.bounds();
+      const isTimeBoundChanged =
+        this.embed.bounds.start !== bounds.start || this.embed.bounds.end !== bounds.end;
+      const isFixedTimespanMode = !this.openmct.time.clock();
 
-            if (!isFixedTimespanMode) {
-                message = 'Time bound values changed to fixed timespan mode';
-            }
+      let message = '';
+      if (isTimeBoundChanged) {
+        this.openmct.time.bounds({
+          start: this.embed.bounds.start,
+          end: this.embed.bounds.end
+        });
+        message = 'Time bound values changed';
+      }
 
-            if (message.length) {
-                this.openmct.notifications.alert(message);
-            }
+      if (!isFixedTimespanMode) {
+        message = 'Time bound values changed to fixed timespan mode';
+      }
 
-            const relativeHash = hash.slice(hash.indexOf('#'));
-            const url = new URL(relativeHash, `${location.protocol}//${location.host}${location.pathname}`);
-            this.openmct.router.navigate(url.hash);
-        },
-        formatTime(unixTime, timeFormat) {
-            return Moment.utc(unixTime).format(timeFormat);
-        },
-        getRemoveDialog() {
-            const options = {
-                name: this.removeActionString,
-                callback: this.removeEmbed.bind(this)
+      if (message.length) {
+        this.openmct.notifications.alert(message);
+      }
+
+      if (this.openmct.editor.isEditing()) {
+        this.previewEmbed();
+      } else {
+        const relativeHash = hash.slice(hash.indexOf('#'));
+        const url = new URL(
+          relativeHash,
+          `${location.protocol}//${location.host}${location.pathname}`
+        );
+        this.openmct.router.navigate(url.hash);
+      }
+    },
+    formatTime(unixTime, timeFormat) {
+      return Moment.utc(unixTime).format(timeFormat);
+    },
+    getRemoveDialog() {
+      const options = {
+        name: this.removeActionString,
+        callback: this.removeEmbed.bind(this)
+      };
+      const removeDialog = new RemoveDialog(this.openmct, options);
+      removeDialog.show();
+    },
+    openSnapshot() {
+      const fullSizeImageObjectIdentifier = this.embed.snapshot.fullSizeImageObjectIdentifier;
+      if (!fullSizeImageObjectIdentifier) {
+        // legacy image data stored in embed
+        this.openSnapshotOverlay(this.embed.snapshot.src);
+
+        return;
+      }
+
+      if (this.isSnapshotContainer) {
+        const snapshot = this.snapshotContainer.getSnapshot(this.embed.id);
+        const fullSizeImageURL = snapshot.notebookImageDomainObject.configuration.fullSizeImageURL;
+        this.openSnapshotOverlay(fullSizeImageURL);
+
+        return;
+      }
+
+      this.openmct.objects.get(fullSizeImageObjectIdentifier).then((object) => {
+        this.openSnapshotOverlay(object.configuration.fullSizeImageURL);
+      });
+    },
+    openSnapshotOverlay(src) {
+      const self = this;
+
+      const { vNode, destroy } = mount(
+        {
+          data: () => {
+            return {
+              createdOn: this.createdOn,
+              name: this.embed.name,
+              cssClass: this.embed.cssClass,
+              src
             };
-            const removeDialog = new RemoveDialog(this.openmct, options);
-            removeDialog.show();
+          },
+          methods: {
+            formatTime: self.formatTime,
+            annotateSnapshot: self.annotateSnapshot,
+            exportImage: self.exportImage
+          },
+          template: SnapshotTemplate
         },
-        openSnapshot() {
-            const fullSizeImageObjectIdentifier = this.embed.snapshot.fullSizeImageObjectIdentifier;
-            if (!fullSizeImageObjectIdentifier) {
-                // legacy image data stored in embed
-                this.openSnapshotOverlay(this.embed.snapshot.src);
+        {
+          app: this.openmct.app
+        }
+      );
 
-                return;
+      this.snapshot = vNode.componentInstance;
+      this.snapshotOverlay = this.openmct.overlays.overlay({
+        element: vNode.el,
+        onDestroy: destroy,
+        size: 'large',
+        autoHide: false,
+        dismissable: true,
+        buttons: [
+          {
+            label: 'Done',
+            emphasis: true,
+            callback: () => {
+              this.snapshotOverlay.dismiss();
             }
+          }
+        ]
+      });
+    },
+    exportImage(type) {
+      let element = this.snapshot.$refs['snapshot-image'];
 
-            this.openmct.objects.get(fullSizeImageObjectIdentifier)
-                .then(object => {
-                    this.openSnapshotOverlay(object.configuration.fullSizeImageURL);
-                });
-        },
-        openSnapshotOverlay(src) {
-            const self = this;
-
-            this.snapshot = new Vue({
-                data: () => {
-                    return {
-                        createdOn: this.createdOn,
-                        name: this.embed.name,
-                        cssClass: this.embed.cssClass,
-                        src
-                    };
-                },
-                methods: {
-                    formatTime: self.formatTime,
-                    annotateSnapshot: self.annotateSnapshot,
-                    exportImage: self.exportImage
-                },
-                template: SnapshotTemplate
-            }).$mount();
-
-            this.snapshotOverlay = this.openmct.overlays.overlay({
-                element: this.snapshot.$el,
-                onDestroy: () => this.snapshot.$destroy(true),
-                size: 'large',
-                dismissable: true,
-                buttons: [
-                    {
-                        label: 'Done',
-                        emphasis: true,
-                        callback: () => {
-                            this.snapshotOverlay.dismiss();
-                        }
-                    }
-                ]
-            });
-        },
-        exportImage(type) {
-            let element = this.snapshot.$refs['snapshot-image'];
+      if (type === 'png') {
+        this.imageExporter.exportPNG(element, this.embed.name);
+      } else {
+        this.imageExporter.exportJPG(element, this.embed.name);
+      }
+    },
+    previewEmbed() {
+      const self = this;
+      const previewAction = new PreviewAction(self.openmct);
+      this.openmct.objects
+        .get(self.embed.domainObject.identifier)
+        .then((domainObject) => previewAction.invoke([domainObject]));
+    },
+    removeEmbed(success) {
+      if (!success) {
+        return;
+      }
 
-            if (type === 'png') {
-                this.imageExporter.exportPNG(element, this.embed.name);
-            } else {
-                this.imageExporter.exportJPG(element, this.embed.name);
-            }
-        },
-        previewEmbed() {
-            const self = this;
-            const previewAction = new PreviewAction(self.openmct);
-            this.openmct.objects.get(self.embed.domainObject.identifier)
-                .then(domainObject => previewAction.invoke([domainObject]));
-        },
-        removeEmbed(success) {
-            if (!success) {
-                return;
-            }
+      this.$emit('remove-embed', this.embed.id);
+    },
+    updateEmbed(embed) {
+      this.$emit('update-embed', embed);
+    },
+    updateSnapshot(snapshotObject) {
+      this.embed.snapshot.thumbnailImage = snapshotObject.thumbnailImage;
 
-            this.$emit('removeEmbed', this.embed.id);
-        },
-        updateEmbed(embed) {
-            this.$emit('updateEmbed', embed);
-        },
-        updateSnapshot(snapshotObject) {
-            this.embed.snapshot.thumbnailImage = snapshotObject.thumbnailImage;
+      this.updateNotebookImageDomainObjectSnapshot(snapshotObject);
+      this.updateEmbed(this.embed);
+    },
+    updateNotebookImageDomainObjectSnapshot(snapshotObject) {
+      if (this.isSnapshotContainer) {
+        const snapshot = this.snapshotContainer.getSnapshot(this.embed.id);
 
-            updateNotebookImageDomainObject(this.openmct, this.embed.snapshot.fullSizeImageObjectIdentifier, snapshotObject.fullSizeImage);
-            this.updateEmbed(this.embed);
-        }
+        snapshot.embedObject.snapshot.thumbnailImage = snapshotObject.thumbnailImage;
+        snapshot.notebookImageDomainObject.configuration.fullSizeImageURL =
+          snapshotObject.fullSizeImage.src;
+
+        this.snapshotContainer.updateSnapshot(snapshot);
+      } else {
+        updateNotebookImageDomainObject(
+          this.openmct,
+          this.embed.snapshot.fullSizeImageObjectIdentifier,
+          snapshotObject.fullSizeImage
+        );
+      }
+    },
+    async showToolTip() {
+      const { BELOW } = this.openmct.tooltips.TOOLTIP_LOCATIONS;
+      this.buildToolTip(
+        await this.getObjectPath(this.embed.domainObject.identifier),
+        BELOW,
+        'notebookEmbed'
+      );
     }
+  }
 };
 </script>
diff --git a/src/plugins/notebook/components/NotebookEntry.vue b/src/plugins/notebook/components/NotebookEntry.vue
index 14a647dda7f..9e43528d46b 100644
--- a/src/plugins/notebook/components/NotebookEntry.vue
+++ b/src/plugins/notebook/components/NotebookEntry.vue
@@ -1,282 +1,659 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
+<!-- eslint-disable vue/no-v-html -->
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 
 <template>
-<div class="c-notebook__entry c-ne has-local-controls"
-     @dragover="changeCursor"
-     @drop.capture="cancelEditMode"
-     @drop.prevent="dropOnEntry"
->
+  <div
+    ref="entry"
+    class="c-notebook__entry c-ne has-local-controls"
+    aria-label="Notebook Entry"
+    :class="{ locked: isLocked, 'is-selected': isSelectedEntry, 'is-editing': editMode }"
+    @dragover="changeCursor"
+    @drop.capture="cancelEditMode"
+    @drop.prevent="dropOnEntry"
+    @click="selectAndEmitEntry($event, entry)"
+    @paste="addImageFromPaste"
+  >
     <div class="c-ne__time-and-content">
-        <div class="c-ne__time">
-            <span>{{ createdOnDate }}</span>
-            <span>{{ createdOnTime }}</span>
+      <div class="c-ne__time-and-creator-and-delete">
+        <div class="c-ne__time-and-creator">
+          <span class="c-ne__created-date">{{ createdOnDate }}</span>
+          <span class="c-ne__created-time">{{ createdOnTime }}</span>
+          <span v-if="entry.createdBy" class="c-ne__creator">
+            <span class="icon-person"></span>
+            {{
+              entry.createdByRole ? `${entry.createdBy}: ${entry.createdByRole}` : entry.createdBy
+            }}
+          </span>
         </div>
-        <div class="c-ne__content">
-            <template v-if="readOnly && result">
-                <div
-                    :id="entry.id"
-                    class="c-ne__text highlight"
-                    tabindex="0"
-                >
-                    <TextHighlight
-                        :text="entryText"
-                        :highlight="highlightText"
-                        :highlight-class="'search-highlight'"
-                    />
-                </div>
-            </template>
-            <template v-else>
-                <div
-                    :id="entry.id"
-                    class="c-ne__text c-ne__input"
-                    tabindex="0"
-                    contenteditable
-                    @blur="updateEntryValue($event)"
-                    @keydown.enter.exact.prevent
-                    @keyup.enter.exact.prevent="forceBlur($event)"
-                    v-text="entry.text"
-                >
-                </div>
-            </template>
-            <div class="c-snapshots c-ne__embeds">
-                <NotebookEmbed v-for="embed in entry.embeds"
-                               :key="embed.id"
-                               :embed="embed"
-                               @removeEmbed="removeEmbed"
-                               @updateEmbed="updateEmbed"
-                />
-            </div>
+        <span v-if="!readOnly && !isLocked" class="c-ne__local-controls--hidden">
+          <button
+            class="c-ne__remove c-icon-button c-icon-button--major icon-trash"
+            title="Delete this entry"
+            tabindex="-1"
+            @click.stop.prevent="deleteEntry"
+          ></button>
+        </span>
+      </div>
+      <div class="c-ne__content">
+        <template v-if="readOnly && result">
+          <div :id="entry.id" class="c-ne__text highlight" tabindex="0">
+            <TextHighlight
+              :text="convertMarkDownToHtml(entry.text)"
+              :highlight="highlightText"
+              :highlight-class="'search-highlight'"
+            />
+          </div>
+        </template>
+        <template v-else-if="!isLocked">
+          <div
+            v-if="!editMode"
+            v-bind.prop="formattedText"
+            :id="entry.id"
+            tabindex="-1"
+            aria-label="Notebook Entry Display"
+            class="c-ne__text"
+            @mouseover="checkEditability($event)"
+            @click="editingEntry($event)"
+          ></div>
+          <textarea
+            v-else
+            :id="entry.id"
+            ref="entryInput"
+            v-model="entry.text"
+            class="c-ne__input"
+            aria-label="Notebook Entry Input"
+            tabindex="-1"
+            @mouseleave="canEdit = true"
+            @blur="updateEntryValue($event)"
+          ></textarea>
+          <div v-if="editMode" class="c-ne__save-button">
+            <button class="c-button c-button--major icon-check"></button>
+          </div>
+        </template>
+
+        <template v-else>
+          <div
+            v-bind.prop="formattedText"
+            :id="entry.id"
+            class="c-ne__text"
+            contenteditable="false"
+            tabindex="0"
+          ></div>
+        </template>
+
+        <div class="c-ne__tags c-tag-holder">
+          <div
+            v-for="(tag, index) in entryTags"
+            :key="index"
+            class="c-tag"
+            :style="{ backgroundColor: tag.backgroundColor, color: tag.foregroundColor }"
+          >
+            {{ tag.label }}
+          </div>
         </div>
+
+        <div :class="{ 'c-scrollcontainer': enableEmbedsWrapperScroll }">
+          <div ref="embedsWrapper" class="c-snapshots c-ne__embeds-wrapper">
+            <NotebookEmbed
+              v-for="embed in entry.embeds"
+              ref="embeds"
+              :key="embed.id"
+              :embed="embed"
+              :is-locked="isLocked"
+              @remove-embed="removeEmbed"
+              @update-embed="updateEmbed"
+            />
+          </div>
+        </div>
+      </div>
     </div>
-    <div v-if="!readOnly"
-         class="c-ne__local-controls--hidden"
-    >
-        <button class="c-icon-button c-icon-button--major icon-trash"
-                title="Delete this entry"
-                tabindex="-1"
-                @click="deleteEntry"
-        >
-        </button>
-    </div>
-    <div v-if="readOnly"
-         class="c-ne__section-and-page"
-    >
-        <a
-            class="c-click-link"
-            :class="{ 'search-highlight': result.metadata.sectionHit }"
-            @click="navigateToSection()"
-        >
-            {{ result.section.name }}
-        </a>
-        <span class="icon-arrow-right"></span>
-        <a
-            class="c-click-link"
-            :class="{ 'search-highlight': result.metadata.pageHit }"
-            @click="navigateToPage()"
-        >
-            {{ result.page.name }}
-        </a>
+    <div v-if="readOnly" class="c-ne__section-and-page">
+      <a
+        class="c-click-link"
+        :class="{ 'search-highlight': result.metadata.sectionHit }"
+        @click="navigateToSection()"
+      >
+        {{ result.section.name }}
+      </a>
+      <span class="icon-arrow-right"></span>
+      <a
+        class="c-click-link"
+        :class="{ 'search-highlight': result.metadata.pageHit }"
+        @click="navigateToPage()"
+      >
+        {{ result.page.name }}
+      </a>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
-import NotebookEmbed from './NotebookEmbed.vue';
-import { createNewEmbed } from '../utils/notebook-entries';
+import _ from 'lodash';
+import { Marked } from 'marked';
 import Moment from 'moment';
+import sanitizeHtml from 'sanitize-html';
+
 import TextHighlight from '../../../utils/textHighlight/TextHighlight.vue';
+import { createNewEmbed, createNewImageEmbed, selectEntry } from '../utils/notebook-entries.js';
+import {
+  saveNotebookImageDomainObject,
+  updateNamespaceOfDomainObject
+} from '../utils/notebook-image.js';
+import NotebookEmbed from './NotebookEmbed.vue';
+
+const SANITIZATION_SCHEMA = {
+  allowedTags: [
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'blockquote',
+    'p',
+    'a',
+    'ul',
+    'ol',
+    'li',
+    'b',
+    'i',
+    'strong',
+    'em',
+    's',
+    'strike',
+    'code',
+    'hr',
+    'br',
+    'div',
+    'table',
+    'thead',
+    'caption',
+    'tbody',
+    'tr',
+    'th',
+    'td',
+    'pre',
+    'del',
+    'ins',
+    'mark',
+    'abbr'
+  ],
+  allowedAttributes: {
+    a: ['href', 'target', 'class', 'title'],
+    code: ['class'],
+    abbr: ['title']
+  }
+};
+
+const UNKNOWN_USER = 'Unknown';
 
 export default {
-    components: {
-        NotebookEmbed,
-        TextHighlight
-    },
-    inject: ['openmct', 'snapshotContainer'],
-    props: {
-        domainObject: {
-            type: Object,
-            default() {
-                return {};
-            }
-        },
-        entry: {
-            type: Object,
-            default() {
-                return {};
-            }
-        },
-        result: {
-            type: Object,
-            default() {
-                return {};
-            }
-        },
-        selectedPage: {
-            type: Object,
-            default() {
-                return {};
-            }
-        },
-        selectedSection: {
-            type: Object,
-            default() {
-                return {};
-            }
-        },
-        readOnly: {
-            type: Boolean,
-            default() {
-                return true;
+  components: {
+    NotebookEmbed,
+    TextHighlight
+  },
+  inject: ['openmct', 'snapshotContainer', 'entryUrlWhitelist'],
+  props: {
+    domainObject: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    notebookAnnotations: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    entry: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    result: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    selectedPage: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    selectedSection: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    readOnly: {
+      type: Boolean,
+      default() {
+        return true;
+      }
+    },
+    isLocked: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    selectedEntryId: {
+      type: String,
+      default() {
+        return '';
+      }
+    }
+  },
+  emits: [
+    'delete-entry',
+    'change-section-page',
+    'update-entry',
+    'editing-entry',
+    'entry-selection',
+    'update-annotations'
+  ],
+  data() {
+    return {
+      editMode: false,
+      canEdit: true,
+      enableEmbedsWrapperScroll: false,
+      urlWhitelist: []
+    };
+  },
+  computed: {
+    createdOnDate() {
+      return this.formatTime(this.entry.createdOn, 'YYYY-MM-DD');
+    },
+    createdOnTime() {
+      return this.formatTime(this.entry.createdOn, 'HH:mm:ss');
+    },
+    formattedText() {
+      const text = this.entry.text;
+
+      if (this.editMode) {
+        return { innerText: text };
+      }
+
+      const markDownHtml = this.convertMarkDownToHtml(text);
+
+      return { innerHTML: markDownHtml };
+    },
+    isSelectedEntry() {
+      return this.selectedEntryId === this.entry.id;
+    },
+    entryTags() {
+      const tagsFromAnnotations = this.openmct.annotation.getTagsFromAnnotations(
+        this.notebookAnnotations
+      );
+
+      return tagsFromAnnotations;
+    },
+    entryText() {
+      let text = this.entry.text;
+
+      if (!this.result.metadata.entryHit) {
+        text = `[ no result for '${this.result.metadata.originalSearchText}' in entry ]`;
+      }
+
+      return text;
+    },
+    highlightText() {
+      let text = '';
+
+      if (this.result.metadata.entryHit) {
+        text = this.result.metadata.originalSearchText;
+      }
+
+      return text;
+    }
+  },
+  watch: {
+    editMode() {
+      this.$nextTick(() => {
+        // waiting for textarea to be rendered
+        this.$refs.entryInput?.focus();
+        this.adjustTextareaHeight();
+      });
+    }
+  },
+  beforeMount() {
+    this.marked = new Marked();
+    this.renderer = new this.marked.Renderer();
+  },
+  mounted() {
+    const originalLinkRenderer = this.renderer.link;
+    this.renderer.link = this.validateLink.bind(this, originalLinkRenderer);
+
+    this.manageEmbedLayout = _.debounce(this.manageEmbedLayout, 400);
+
+    if (this.$refs.embedsWrapper) {
+      this.embedsWrapperResizeObserver = new ResizeObserver(this.manageEmbedLayout);
+      this.embedsWrapperResizeObserver.observe(this.$refs.embedsWrapper);
+    }
+
+    this.manageEmbedLayout();
+    this.dropOnEntry = this.dropOnEntry.bind(this);
+    if (this.entryUrlWhitelist?.length > 0) {
+      this.urlWhitelist = this.entryUrlWhitelist;
+    }
+  },
+  beforeUnmount() {
+    if (this.embedsWrapperResizeObserver) {
+      this.embedsWrapperResizeObserver.disconnect();
+    }
+  },
+  methods: {
+    async addNewEmbed(objectPath) {
+      const bounds = this.openmct.time.bounds();
+      const snapshotMeta = {
+        bounds,
+        link: null,
+        objectPath,
+        openmct: this.openmct
+      };
+      const newEmbed = await createNewEmbed(snapshotMeta);
+      if (!this.entry.embeds) {
+        this.entry.embeds = [];
+      }
+      this.entry.embeds.push(newEmbed);
+
+      this.manageEmbedLayout();
+    },
+    async addImageFromPaste(event) {
+      const clipboardItems = Array.from(
+        (event.clipboardData || event.originalEvent.clipboardData).items
+      );
+      const hasImage = clipboardItems.some(
+        (clipboardItem) => clipboardItem.type.includes('image') && clipboardItem.kind === 'file'
+      );
+      // If the clipboard contained an image, prevent the paste event from reaching the textarea.
+      if (hasImage) {
+        event.preventDefault();
+      }
+      await Promise.all(
+        Array.from(clipboardItems).map(async (clipboardItem) => {
+          const isImage = clipboardItem.type.includes('image') && clipboardItem.kind === 'file';
+          if (isImage) {
+            const imageFile = clipboardItem.getAsFile();
+            const imageEmbed = await createNewImageEmbed(imageFile, this.openmct, imageFile?.name);
+            if (!this.entry.embeds) {
+              this.entry.embeds = [];
             }
+            this.entry.embeds.push(imageEmbed);
+          }
+        })
+      );
+      this.manageEmbedLayout();
+      this.timestampAndUpdate();
+    },
+    convertMarkDownToHtml(text = '') {
+      let markDownHtml = this.marked.parse(text, {
+        breaks: true,
+        renderer: this.renderer
+      });
+      markDownHtml = sanitizeHtml(markDownHtml, SANITIZATION_SCHEMA);
+      return markDownHtml;
+    },
+    adjustTextareaHeight() {
+      if (this.$refs.entryInput) {
+        this.$refs.entryInput.style.height = 'auto';
+        this.$refs.entryInput.style.height = `${this.$refs?.entryInput.scrollHeight}px`;
+        this.$refs.entryInput.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      }
+    },
+    validateLink(originalLinkRenderer, href, title, text) {
+      try {
+        const domain = new URL(href).hostname;
+        const urlIsWhitelisted = this.urlWhitelist.some((partialDomain) => {
+          return domain.endsWith(partialDomain);
+        });
+        if (!urlIsWhitelisted) {
+          return text;
         }
+        const linkHtml = originalLinkRenderer.call(this.renderer, href, title, text);
+        const linkHtmlWithTarget = linkHtml.replace(
+          /^<a /,
+          '<a class="c-hyperlink" target="_blank"'
+        );
+        return linkHtmlWithTarget;
+      } catch (error) {
+        // had error parsing this URL, just return the text
+        return text;
+      }
     },
-    computed: {
-        createdOnDate() {
-            return this.formatTime(this.entry.createdOn, 'YYYY-MM-DD');
-        },
-        createdOnTime() {
-            return this.formatTime(this.entry.createdOn, 'HH:mm:ss');
-        },
-        entryText() {
-            let text = this.entry.text;
-
-            if (!this.result.metadata.entryHit) {
-                text = `[ no result for '${this.result.metadata.originalSearchText}' in entry ]`;
-            }
+    cancelEditMode(event) {
+      const isEditing = this.openmct.editor.isEditing();
+      if (isEditing) {
+        this.openmct.editor.cancel();
+      }
+    },
+    changeCursor(event) {
+      event.preventDefault();
 
-            return text;
-        },
-        highlightText() {
-            let text = '';
+      if (!this.isLocked) {
+        event.dataTransfer.dropEffect = 'copy';
+      } else {
+        event.dataTransfer.dropEffect = 'none';
+        event.dataTransfer.effectAllowed = 'none';
+      }
+    },
+    checkEditability($event) {
+      if ($event.target.nodeName === 'A') {
+        this.canEdit = false;
+      }
+    },
+    deleteEntry() {
+      this.$emit('delete-entry', this.entry.id);
+    },
+    manageEmbedLayout() {
+      if (this.$refs.embeds) {
+        const embedsWrapperLength = this.$refs.embedsWrapper.clientWidth;
+        const embedsTotalWidth = this.$refs.embeds.reduce((total, embed) => {
+          return embed.$el.clientWidth + total;
+        }, 0);
 
-            if (this.result.metadata.entryHit) {
-                text = this.result.metadata.originalSearchText;
+        this.enableEmbedsWrapperScroll = embedsTotalWidth > embedsWrapperLength;
+      }
+    },
+    async dropOnEntry(dropEvent) {
+      dropEvent.stopImmediatePropagation();
+      const dataTransferFiles = Array.from(dropEvent.dataTransfer.files);
+
+      const localImageDropped = dataTransferFiles.some((file) => file.type.includes('image'));
+      const snapshotId = dropEvent.dataTransfer.getData('openmct/snapshot/id');
+      const domainObjectData = dropEvent.dataTransfer.getData('openmct/domain-object-path');
+      const imageUrl = dropEvent.dataTransfer.getData('URL');
+      if (localImageDropped) {
+        // local image(s) dropped from disk (file)
+        await Promise.all(
+          dataTransferFiles.map(async (file) => {
+            if (file.type.includes('image')) {
+              const imageData = file;
+              const imageEmbed = await createNewImageEmbed(
+                imageData,
+                this.openmct,
+                imageData?.name
+              );
+              if (!this.entry.embeds) {
+                this.entry.embeds = [];
+              }
+              this.entry.embeds.push(imageEmbed);
             }
+          })
+        );
+        this.manageEmbedLayout();
+      } else if (imageUrl) {
+        try {
+          // remote image dropped (URL)
+          const response = await fetch(imageUrl);
+          const imageData = await response.blob();
+          const imageEmbed = await createNewImageEmbed(imageData, this.openmct);
+          if (!this.entry.embeds) {
+            this.entry.embeds = [];
+          }
+          this.entry.embeds.push(imageEmbed);
+          this.manageEmbedLayout();
+        } catch (error) {
+          this.openmct.notifications.error(`Unable to add image: ${error.message} `);
+          console.error(`Problem embedding remote image`, error);
+        }
+      } else if (snapshotId.length) {
+        // snapshot object
+        const snapshot = this.snapshotContainer.getSnapshot(snapshotId);
+        if (!this.entry.embeds) {
+          this.entry.embeds = [];
+        }
+        this.entry.embeds.push(snapshot.embedObject);
+        this.snapshotContainer.removeSnapshot(snapshotId);
+
+        const namespace = this.domainObject.identifier.namespace;
+        const notebookImageDomainObject = updateNamespaceOfDomainObject(
+          snapshot.notebookImageDomainObject,
+          namespace
+        );
+        saveNotebookImageDomainObject(this.openmct, notebookImageDomainObject);
+      } else if (domainObjectData) {
+        // plain domain object
+        const objectPath = JSON.parse(domainObjectData);
+        await this.addNewEmbed(objectPath);
+      } else {
+        this.openmct.notifications.error(
+          `Unknown object(s) dropped and cannot embed. Try again with an image or domain object.`
+        );
+        console.warn(
+          `Unknown object(s) dropped and cannot embed. Try again with an image or domain object.`
+        );
+        return;
+      }
 
-            return text;
+      this.timestampAndUpdate();
+    },
+    findPositionInArray(array, id) {
+      let position = -1;
+      array.some((item, index) => {
+        const found = item.id === id;
+        if (found) {
+          position = index;
         }
+
+        return found;
+      });
+
+      return position;
     },
-    mounted() {
-        this.dropOnEntry = this.dropOnEntry.bind(this);
-    },
-    methods: {
-        addNewEmbed(objectPath) {
-            const bounds = this.openmct.time.bounds();
-            const snapshotMeta = {
-                bounds,
-                link: null,
-                objectPath,
-                openmct: this.openmct
-            };
-            const newEmbed = createNewEmbed(snapshotMeta);
-            this.entry.embeds.push(newEmbed);
-        },
-        cancelEditMode(event) {
-            const isEditing = this.openmct.editor.isEditing();
-            if (isEditing) {
-                this.openmct.editor.cancel();
-            }
-        },
-        changeCursor() {
-            event.preventDefault();
-            event.dataTransfer.dropEffect = "copy";
-        },
-        deleteEntry() {
-            this.$emit('deleteEntry', this.entry.id);
-        },
-        dropOnEntry($event) {
-            event.stopImmediatePropagation();
-
-            const snapshotId = $event.dataTransfer.getData('openmct/snapshot/id');
-            if (snapshotId.length) {
-                const snapshot = this.snapshotContainer.getSnapshot(snapshotId);
-                this.snapshotContainer.removeSnapshot(snapshotId);
-                this.entry.embeds.push(snapshot);
-            } else {
-                const data = $event.dataTransfer.getData('openmct/domain-object-path');
-                const objectPath = JSON.parse(data);
-                this.addNewEmbed(objectPath);
-            }
+    formatTime(unixTime, timeFormat) {
+      return Moment.utc(unixTime).format(timeFormat);
+    },
+    navigateToPage() {
+      this.$emit('change-section-page', {
+        sectionId: this.result.section.id,
+        pageId: this.result.page.id
+      });
+    },
+    navigateToSection() {
+      this.$emit('change-section-page', {
+        sectionId: this.result.section.id,
+        pageId: null
+      });
+    },
+    removeEmbed(id) {
+      const embedPosition = this.findPositionInArray(this.entry.embeds, id);
+      // TODO: remove notebook snapshot object using object remove API
+      this.entry.embeds.splice(embedPosition, 1);
 
-            this.$emit('updateEntry', this.entry);
-        },
-        findPositionInArray(array, id) {
-            let position = -1;
-            array.some((item, index) => {
-                const found = item.id === id;
-                if (found) {
-                    position = index;
-                }
-
-                return found;
-            });
-
-            return position;
-        },
-        forceBlur(event) {
-            event.target.blur();
-        },
-        formatTime(unixTime, timeFormat) {
-            return Moment.utc(unixTime).format(timeFormat);
-        },
-        navigateToPage() {
-            this.$emit('changeSectionPage', {
-                sectionId: this.result.section.id,
-                pageId: this.result.page.id
-            });
-        },
-        navigateToSection() {
-            this.$emit('changeSectionPage', {
-                sectionId: this.result.section.id,
-                pageId: null
-            });
-        },
-        removeEmbed(id) {
-            const embedPosition = this.findPositionInArray(this.entry.embeds, id);
-            // TODO: remove notebook snapshot object using object remove API
-            this.entry.embeds.splice(embedPosition, 1);
-
-            this.$emit('updateEntry', this.entry);
-        },
-        updateEmbed(newEmbed) {
-            this.entry.embeds.some(e => {
-                const found = (e.id === newEmbed.id);
-                if (found) {
-                    e = newEmbed;
-                }
-
-                return found;
-            });
-
-            this.$emit('updateEntry', this.entry);
-        },
-        updateEntryValue($event) {
-            const value = $event.target.innerText;
-            if (value !== this.entry.text && value.match(/\S/)) {
-                this.entry.text = value;
-                this.$emit('updateEntry', this.entry);
-            }
+      this.timestampAndUpdate();
+
+      this.manageEmbedLayout();
+    },
+    updateEmbed(newEmbed) {
+      this.entry.embeds.some((e) => {
+        const found = e.id === newEmbed.id;
+        if (found) {
+          e = newEmbed;
         }
+
+        return found;
+      });
+
+      this.timestampAndUpdate();
+    },
+    async timestampAndUpdate() {
+      const [user, activeRole] = await Promise.all([
+        this.openmct.user.getCurrentUser(),
+        this.openmct.user.getActiveRole?.()
+      ]);
+      if (user === undefined) {
+        this.entry.modifiedBy = UNKNOWN_USER;
+      } else {
+        this.entry.modifiedBy = user.getName();
+        if (activeRole) {
+          this.entry.modifiedByRole = activeRole;
+        }
+      }
+
+      this.entry.modified = this.openmct.time.now();
+
+      this.$emit('update-entry', this.entry);
+    },
+    editingEntry(event) {
+      this.selectAndEmitEntry(event, this.entry);
+      if (this.isSelectedEntry) {
+        // selected and click, so we're ready to edit
+        this.selectAndEmitEntry(event, this.entry);
+        this.editMode = true;
+        this.adjustTextareaHeight();
+        this.$emit('editing-entry');
+      }
+    },
+    updateEntryValue($event) {
+      this.editMode = false;
+      const rawEntryValue = $event.target.value;
+      const sanitizeInput = sanitizeHtml(rawEntryValue, { allowedAttributes: [], allowedTags: [] });
+      // change &gt back to > for markdown to do blockquotes
+      const restoredQuoteBrackets = sanitizeInput.replace(/&gt;/g, '>');
+      this.entry.text = restoredQuoteBrackets;
+      this.timestampAndUpdate();
+    },
+    updateAnnotations(newAnnotations) {
+      this.$emit('update-annotations', newAnnotations);
+    },
+    selectAndEmitEntry(event, entry) {
+      selectEntry({
+        element: this.$refs.entry,
+        entryId: entry.id,
+        domainObject: this.domainObject,
+        openmct: this.openmct,
+        onAnnotationChange: this.updateAnnotations,
+        notebookAnnotations: this.notebookAnnotations
+      });
+      event.stopPropagation();
+      this.$emit('entry-selection', this.entry);
     }
+  }
 };
 </script>
diff --git a/src/plugins/notebook/components/NotebookMenuSwitcher.vue b/src/plugins/notebook/components/NotebookMenuSwitcher.vue
index 77cdff065a7..99d1384c675 100644
--- a/src/plugins/notebook/components/NotebookMenuSwitcher.vue
+++ b/src/plugins/notebook/components/NotebookMenuSwitcher.vue
@@ -1,131 +1,140 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
+  <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
     <button
-        class="c-icon-button c-button--menu icon-camera"
-        title="Take a Notebook Snapshot"
-        @click.stop.prevent="showMenu"
+      class="c-icon-button c-button--menu icon-camera"
+      aria-label="Take a Notebook Snapshot"
+      title="Take a Notebook Snapshot"
+      @click.stop.prevent="showMenu"
     >
-        <span
-            title="Take Notebook Snapshot"
-            class="c-icon-button__label"
-        >
-            Snapshot
-        </span>
+      <span title="Take Notebook Snapshot" class="c-icon-button__label"> Snapshot </span>
     </button>
-</div>
+  </div>
 </template>
 
 <script>
-import Snapshot from '../snapshot';
-import { getDefaultNotebook, validateNotebookStorageObject } from '../utils/notebook-storage';
-import { NOTEBOOK_DEFAULT, NOTEBOOK_SNAPSHOT } from '../notebook-constants';
+import { NOTEBOOK_DEFAULT, NOTEBOOK_SNAPSHOT } from '../notebook-constants.js';
+import Snapshot from '../snapshot.js';
+import { getMenuItems } from '../utils/notebook-snapshot-menu.js';
+import { getDefaultNotebook, validateNotebookStorageObject } from '../utils/notebook-storage.js';
 
 export default {
-    inject: ['openmct'],
-    props: {
-        domainObject: {
-            type: Object,
-            default() {
-                return {};
-            }
-        },
-        ignoreLink: {
-            type: Boolean,
-            default() {
-                return false;
-            }
-        },
-        objectPath: {
-            type: Array,
-            default() {
-                return null;
-            }
-        }
+  inject: ['openmct'],
+  props: {
+    currentView: {
+      type: Object,
+      default() {
+        return {};
+      }
     },
-    data() {
-        return {
-            notebookSnapshot: undefined,
-            notebookTypes: []
-        };
+    domainObject: {
+      type: Object,
+      default() {
+        return {};
+      }
     },
-    mounted() {
-        validateNotebookStorageObject();
-        this.getDefaultNotebookObject();
-
-        this.notebookSnapshot = new Snapshot(this.openmct);
-        this.setDefaultNotebookStatus();
+    isPreview: {
+      type: Boolean,
+      default() {
+        return false;
+      }
     },
-    methods: {
-        async getDefaultNotebookObject() {
-            const defaultNotebook = getDefaultNotebook();
-            const defaultNotebookObject = defaultNotebook && await this.openmct.objects.get(defaultNotebook.notebookMeta.identifier);
-
-            return defaultNotebookObject;
-        },
-        async showMenu(event) {
-            const notebookTypes = [];
-            const elementBoundingClientRect = this.$el.getBoundingClientRect();
-            const x = elementBoundingClientRect.x;
-            const y = elementBoundingClientRect.y + elementBoundingClientRect.height;
-
-            const defaultNotebookObject = await this.getDefaultNotebookObject();
-            if (defaultNotebookObject) {
-                const name = defaultNotebookObject.name;
-
-                const defaultNotebook = getDefaultNotebook();
-                const sectionName = defaultNotebook.section.name;
-                const pageName = defaultNotebook.page.name;
-                const defaultPath = `${name} - ${sectionName} - ${pageName}`;
+    objectPath: {
+      type: Array,
+      default() {
+        return null;
+      }
+    }
+  },
+  data() {
+    return {
+      notebookSnapshot: undefined,
+      notebookTypes: []
+    };
+  },
+  mounted() {
+    validateNotebookStorageObject();
 
-                notebookTypes.push({
-                    cssClass: 'icon-notebook',
-                    name: `Save to Notebook ${defaultPath}`,
-                    onItemClicked: () => {
-                        return this.snapshot(NOTEBOOK_DEFAULT);
-                    }
-                });
-            }
+    this.notebookSnapshot = new Snapshot(this.openmct);
+    this.setDefaultNotebookStatus();
+  },
+  methods: {
+    getPreviewObjectLink() {
+      const relativePath = this.openmct.objects.getRelativePath(this.objectPath);
+      const urlParams = this.openmct.router.getParams();
+      urlParams.view = this.currentView.key;
 
-            notebookTypes.push({
-                cssClass: 'icon-camera',
-                name: 'Save to Notebook Snapshots',
-                onItemClicked: () => {
-                    return this.snapshot(NOTEBOOK_SNAPSHOT);
-                }
-            });
+      const urlParamsString = Object.entries(urlParams)
+        .map(([key, value]) => `${key}=${value}`)
+        .join('&');
 
-            this.openmct.menus.showMenu(x, y, notebookTypes);
+      return `#/browse/${relativePath}?${urlParamsString}`;
+    },
+    async showMenu(event) {
+      const menuItemOptions = {
+        default: {
+          cssClass: 'icon-notebook',
+          name: `Save to Notebook`,
+          onItemClicked: () => this.snapshot(NOTEBOOK_DEFAULT, event.target)
         },
-        snapshot(notebookType) {
-            this.$nextTick(() => {
-                const element = document.querySelector('.c-overlay__contents')
-                    || document.getElementsByClassName('l-shell__main-container')[0];
-
-                const bounds = this.openmct.time.bounds();
-                const link = !this.ignoreLink
-                    ? window.location.hash
-                    : null;
-
-                const objectPath = this.objectPath || this.openmct.router.path;
-                const snapshotMeta = {
-                    bounds,
-                    link,
-                    objectPath,
-                    openmct: this.openmct
-                };
+        snapshot: {
+          cssClass: 'icon-camera',
+          name: 'Save to Notebook Snapshots',
+          onItemClicked: () => this.snapshot(NOTEBOOK_SNAPSHOT, event.target)
+        }
+      };
 
-                this.notebookSnapshot.capture(snapshotMeta, notebookType, element);
-            });
-        },
-        setDefaultNotebookStatus() {
-            let defaultNotebookObject = getDefaultNotebook();
+      const notebookTypes = await getMenuItems(this.openmct, menuItemOptions);
+      const elementBoundingClientRect = this.$el.getBoundingClientRect();
+      const x = elementBoundingClientRect.x;
+      const y = elementBoundingClientRect.y + elementBoundingClientRect.height;
+      this.openmct.menus.showMenu(x, y, notebookTypes);
+    },
+    snapshot(notebookType, target) {
+      this.$nextTick(() => {
+        const wrapper =
+          (target && target.closest('.js-notebook-snapshot-item-wrapper')) || document;
+        const element = wrapper.querySelector('.js-notebook-snapshot-item');
+        const objectPath = this.objectPath || this.openmct.router.path;
+        const link = this.isPreview ? this.getPreviewObjectLink() : window.location.hash;
+        const snapshotMeta = {
+          bounds: this.openmct.time.bounds(),
+          link,
+          objectPath,
+          openmct: this.openmct
+        };
 
-            if (defaultNotebookObject && defaultNotebookObject.notebookMeta) {
-                let notebookIdentifier = defaultNotebookObject.notebookMeta.identifier;
+        this.notebookSnapshot.capture(snapshotMeta, notebookType, element);
+      });
+    },
+    setDefaultNotebookStatus() {
+      let defaultNotebookObject = getDefaultNotebook();
+      if (defaultNotebookObject) {
+        let notebookIdentifier = defaultNotebookObject.identifier;
 
-                this.openmct.status.set(notebookIdentifier, 'notebook-default');
-            }
-        }
+        this.openmct.status.set(notebookIdentifier, 'notebook-default');
+      }
     }
+  }
 };
 </script>
diff --git a/src/plugins/notebook/components/NotebookSnapshotContainer.vue b/src/plugins/notebook/components/NotebookSnapshotContainer.vue
index 37f6454a6ee..6d3d8f5e053 100644
--- a/src/plugins/notebook/components/NotebookSnapshotContainer.vue
+++ b/src/plugins/notebook/components/NotebookSnapshotContainer.vue
@@ -1,130 +1,141 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div class="c-snapshots-h">
+  <div class="c-snapshots-h">
     <div class="l-browse-bar">
-        <div class="l-browse-bar__start">
-            <div class="l-browse-bar__object-name--w">
-                <div class="l-browse-bar__object-name c-object-label">
-                    <div class="c-object-label__type-icon icon-camera"></div>
-                    <div class="c-object-label__name">
-                        Notebook Snapshots
-                    </div>
-                    <div v-if="snapshots.length"
-                         class="l-browse-bar__object-details"
-                    >{{ snapshots.length }} of {{ getNotebookSnapshotMaxCount() }}
-                    </div>
-                </div>
-                <PopupMenu v-if="snapshots.length > 0"
-                           :popup-menu-items="popupMenuItems"
-                />
+      <div class="l-browse-bar__start">
+        <div class="l-browse-bar__object-name--w c-snapshots-h__title">
+          <div class="l-browse-bar__object-name c-object-label">
+            <div class="c-object-label__type-icon icon-camera"></div>
+            <div class="c-object-label__name">Notebook Snapshots</div>
+            <div v-if="snapshots.length" class="l-browse-bar__object-details">
+              {{ snapshots.length }} of {{ getNotebookSnapshotMaxCount() }}
             </div>
-
+          </div>
+          <PopupMenu v-if="snapshots.length > 0" :popup-menu-items="popupMenuItems" />
         </div>
-        <div class="l-browse-bar__end">
-            <button class="c-click-icon c-click-icon--major icon-x"
-                    @click="close"
-            ></button>
-        </div>
-    </div><!-- closes l-browse-bar -->
+      </div>
+      <div class="l-browse-bar__end">
+        <button class="c-click-icon c-click-icon--major icon-x" @click="close"></button>
+      </div>
+    </div>
+    <!-- closes l-browse-bar -->
     <div class="c-snapshots">
-        <span v-for="snapshot in snapshots"
-              :key="snapshot.id"
-              draggable="true"
-              @dragstart="startEmbedDrag(snapshot, $event)"
-        >
-            <NotebookEmbed ref="notebookEmbed"
-                           :key="snapshot.id"
-                           :embed="snapshot"
-                           :remove-action-string="'Delete Snapshot'"
-                           @updateEmbed="updateSnapshot"
-                           @removeEmbed="removeSnapshot"
-            />
-        </span>
-        <div v-if="!snapshots.length > 0"
-             class="hint"
-        >
-            There are no Notebook Snapshots currently.
-        </div>
+      <span
+        v-for="snapshot in snapshots"
+        :key="snapshot.embedObject.id"
+        draggable="true"
+        @dragstart="startEmbedDrag(snapshot, $event)"
+      >
+        <NotebookEmbed
+          ref="notebookEmbed"
+          :key="snapshot.embedObject.id"
+          :embed="snapshot.embedObject"
+          :is-snapshot-container="true"
+          :remove-action-string="'Delete Snapshot'"
+          @remove-embed="removeSnapshot"
+        />
+      </span>
+      <div v-if="!snapshots.length > 0" class="hint">
+        There are no Notebook Snapshots currently.
+      </div>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
+import { EVENT_SNAPSHOTS_UPDATED } from '../notebook-constants.js';
+import { NOTEBOOK_SNAPSHOT_MAX_COUNT } from '../snapshot-container.js';
+import RemoveDialog from '../utils/removeDialog.js';
 import NotebookEmbed from './NotebookEmbed.vue';
 import PopupMenu from './PopupMenu.vue';
-import RemoveDialog from '../utils/removeDialog';
-import { NOTEBOOK_SNAPSHOT_MAX_COUNT } from '../snapshot-container';
-import { EVENT_SNAPSHOTS_UPDATED } from '../notebook-constants';
 
 export default {
-    components: {
-        NotebookEmbed,
-        PopupMenu
+  components: {
+    NotebookEmbed,
+    PopupMenu
+  },
+  inject: ['openmct', 'snapshotContainer'],
+  props: {
+    toggleSnapshot: {
+      type: Function,
+      default() {
+        return () => {};
+      }
+    }
+  },
+  data() {
+    return {
+      popupMenuItems: [],
+      removeActionString: 'Delete all snapshots',
+      snapshots: []
+    };
+  },
+  mounted() {
+    this.addPopupMenuItems();
+    this.snapshotContainer.on(EVENT_SNAPSHOTS_UPDATED, this.snapshotsUpdated);
+    this.snapshots = this.snapshotContainer.getSnapshots();
+  },
+  methods: {
+    addPopupMenuItems() {
+      const removeSnapshot = {
+        cssClass: 'icon-trash',
+        name: this.removeActionString,
+        onItemClicked: this.getRemoveDialog.bind(this)
+      };
+
+      this.popupMenuItems = [removeSnapshot];
     },
-    inject: ['openmct', 'snapshotContainer'],
-    props: {
-        toggleSnapshot: {
-            type: Function,
-            default() {
-                return () => {};
-            }
-        }
+    close() {
+      this.toggleSnapshot();
     },
-    data() {
-        return {
-            popupMenuItems: [],
-            removeActionString: 'Delete all snapshots',
-            snapshots: []
-        };
+    getNotebookSnapshotMaxCount() {
+      return NOTEBOOK_SNAPSHOT_MAX_COUNT;
     },
-    mounted() {
-        this.addPopupMenuItems();
-        this.snapshotContainer.on(EVENT_SNAPSHOTS_UPDATED, this.snapshotsUpdated);
-        this.snapshots = this.snapshotContainer.getSnapshots();
+    getRemoveDialog() {
+      const options = {
+        name: this.removeActionString,
+        callback: this.removeAllSnapshots.bind(this)
+      };
+      const removeDialog = new RemoveDialog(this.openmct, options);
+      removeDialog.show();
     },
-    methods: {
-        addPopupMenuItems() {
-            const removeSnapshot = {
-                cssClass: 'icon-trash',
-                name: this.removeActionString,
-                callback: this.getRemoveDialog.bind(this)
-            };
-
-            this.popupMenuItems = [removeSnapshot];
-        },
-        close() {
-            this.toggleSnapshot();
-        },
-        getNotebookSnapshotMaxCount() {
-            return NOTEBOOK_SNAPSHOT_MAX_COUNT;
-        },
-        getRemoveDialog() {
-            const options = {
-                name: this.removeActionString,
-                callback: this.removeAllSnapshots.bind(this)
-            };
-            const removeDialog = new RemoveDialog(this.openmct, options);
-            removeDialog.show();
-        },
-        removeAllSnapshots(success) {
-            if (!success) {
-                return;
-            }
+    removeAllSnapshots(success) {
+      if (!success) {
+        return;
+      }
 
-            this.snapshotContainer.removeAllSnapshots();
-        },
-        removeSnapshot(id) {
-            this.snapshotContainer.removeSnapshot(id);
-        },
-        snapshotsUpdated() {
-            this.snapshots = this.snapshotContainer.getSnapshots();
-        },
-        startEmbedDrag(snapshot, event) {
-            event.dataTransfer.setData('text/plain', snapshot.id);
-            event.dataTransfer.setData('openmct/snapshot/id', snapshot.id);
-        },
-        updateSnapshot(snapshot) {
-            this.snapshotContainer.updateSnapshot(snapshot);
-        }
+      this.snapshotContainer.removeAllSnapshots();
+    },
+    removeSnapshot(id) {
+      this.snapshotContainer.removeSnapshot(id);
+    },
+    snapshotsUpdated() {
+      this.snapshots = this.snapshotContainer.getSnapshots();
+    },
+    startEmbedDrag(snapshot, event) {
+      event.dataTransfer.setData('text/plain', snapshot.embedObject.id);
+      event.dataTransfer.setData('openmct/snapshot/id', snapshot.embedObject.id);
     }
+  }
 };
 </script>
diff --git a/src/plugins/notebook/components/NotebookSnapshotIndicator.vue b/src/plugins/notebook/components/NotebookSnapshotIndicator.vue
index ee07777ac34..d0c83887897 100644
--- a/src/plugins/notebook/components/NotebookSnapshotIndicator.vue
+++ b/src/plugins/notebook/components/NotebookSnapshotIndicator.vue
@@ -1,98 +1,139 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div class="c-indicator c-indicator--clickable icon-camera"
-     :class="[
-         { 's-status-off': snapshotCount === 0 },
-         { 's-status-on': snapshotCount > 0 },
-         { 's-status-caution': snapshotCount === snapshotMaxCount },
-         { 'has-new-snapshot': flashIndicator }
-     ]"
->
-    <span class="label c-indicator__label">
+  <aside aria-label="Snapshot Indicator">
+    <div
+      class="c-indicator c-indicator--clickable icon-camera"
+      :class="[
+        { 's-status-off': snapshotCount === 0 },
+        { 's-status-on': snapshotCount > 0 },
+        { 's-status-caution': snapshotCount === snapshotMaxCount },
+        { 'has-new-snapshot': flashIndicator }
+      ]"
+    >
+      <span class="label c-indicator__label">
         {{ indicatorTitle }}
-        <button @click="toggleSnapshot">
-            {{ expanded ? 'Hide' : 'Show' }}
+        <button
+          :aria-label="expanded ? 'Hide Snapshots' : 'Show Snapshots'"
+          @click="toggleSnapshot"
+        >
+          {{ expanded ? 'Hide' : 'Show' }}
         </button>
-    </span>
-    <span class="c-indicator__count">{{ snapshotCount }}</span>
-</div>
+      </span>
+      <span class="c-indicator__count">{{ snapshotCount }}</span>
+    </div>
+  </aside>
 </template>
 
 <script>
+import mount from 'utils/mount';
+
+import { EVENT_SNAPSHOTS_UPDATED } from '../notebook-constants.js';
+import { getSnapshotContainer } from '../plugin.js';
+import { NOTEBOOK_SNAPSHOT_MAX_COUNT } from '../snapshot-container.js';
 import SnapshotContainerComponent from './NotebookSnapshotContainer.vue';
-import { EVENT_SNAPSHOTS_UPDATED } from '../notebook-constants';
-import { NOTEBOOK_SNAPSHOT_MAX_COUNT } from '../snapshot-container';
-import Vue from 'vue';
 
 export default {
-    inject: ['openmct', 'snapshotContainer'],
-    data() {
-        return {
-            expanded: false,
-            indicatorTitle: '',
-            snapshotCount: 0,
-            snapshotMaxCount: NOTEBOOK_SNAPSHOT_MAX_COUNT,
-            flashIndicator: false
-        };
+  inject: ['openmct'],
+  data() {
+    return {
+      expanded: false,
+      indicatorTitle: '',
+      snapshotCount: 0,
+      snapshotMaxCount: NOTEBOOK_SNAPSHOT_MAX_COUNT,
+      flashIndicator: false
+    };
+  },
+  created() {
+    this.snapshotContainer = getSnapshotContainer(this.openmct);
+  },
+  mounted() {
+    this.snapshotContainer.on(EVENT_SNAPSHOTS_UPDATED, this.snapshotsUpdated);
+    this.updateSnapshotIndicatorTitle();
+  },
+  methods: {
+    notifyNewSnapshot() {
+      this.flashIndicator = true;
+      setTimeout(this.removeNotify, 15000);
     },
-    mounted() {
-        this.snapshotContainer.on(EVENT_SNAPSHOTS_UPDATED, this.snapshotsUpdated);
-        this.updateSnapshotIndicatorTitle();
+    removeNotify() {
+      this.flashIndicator = false;
     },
-    methods: {
-        notifyNewSnapshot() {
-            this.flashIndicator = true;
-            setTimeout(this.removeNotify, 15000);
-        },
-        removeNotify() {
-            this.flashIndicator = false;
-        },
-        snapshotsUpdated() {
-            if (this.snapshotContainer.getSnapshots().length > this.snapshotCount) {
-                this.notifyNewSnapshot();
-            }
+    snapshotsUpdated() {
+      if (this.snapshotContainer.getSnapshots().length > this.snapshotCount) {
+        this.notifyNewSnapshot();
+      }
 
-            this.updateSnapshotIndicatorTitle();
-        },
-        toggleSnapshot() {
-            this.expanded = !this.expanded;
+      this.updateSnapshotIndicatorTitle();
+    },
+    toggleSnapshot() {
+      this.expanded = !this.expanded;
 
-            const drawerElement = document.querySelector('.l-shell__drawer');
-            drawerElement.classList.toggle('is-expanded');
+      const drawerElement = document.querySelector('.l-shell__drawer');
+      drawerElement.classList.toggle('is-expanded');
 
-            this.updateSnapshotContainer();
-        },
-        updateSnapshotContainer() {
-            const { openmct, snapshotContainer } = this;
-            const toggleSnapshot = this.toggleSnapshot.bind(this);
-            const drawerElement = document.querySelector('.l-shell__drawer');
-            drawerElement.innerHTML = '<div></div>';
-            const divElement = document.querySelector('.l-shell__drawer div');
+      this.updateSnapshotContainer();
+    },
+    updateSnapshotContainer() {
+      const { openmct, snapshotContainer } = this;
+      const toggleSnapshot = this.toggleSnapshot.bind(this);
+      const drawerElement = document.querySelector('.l-shell__drawer');
+      drawerElement.innerHTML = '<div></div>';
+      const divElement = document.querySelector('.l-shell__drawer div');
 
-            this.component = new Vue({
-                el: divElement,
-                components: {
-                    SnapshotContainerComponent
-                },
-                provide: {
-                    openmct,
-                    snapshotContainer
-                },
-                data() {
-                    return {
-                        toggleSnapshot
-                    };
-                },
-                template: '<SnapshotContainerComponent :toggleSnapshot="toggleSnapshot"></SnapshotContainerComponent>'
-            }).$mount();
+      if (this.destroySnapshotContainer) {
+        this.destroySnapshotContainer();
+      }
+      const { destroy } = mount(
+        {
+          el: divElement,
+          components: {
+            SnapshotContainerComponent
+          },
+          provide: {
+            openmct,
+            snapshotContainer
+          },
+          data() {
+            return {
+              toggleSnapshot
+            };
+          },
+          template:
+            '<SnapshotContainerComponent :toggleSnapshot="toggleSnapshot"></SnapshotContainerComponent>'
         },
-        updateSnapshotIndicatorTitle() {
-            const snapshotCount = this.snapshotContainer.getSnapshots().length;
-            this.snapshotCount = snapshotCount;
-            const snapshotTitleSuffix = snapshotCount === 1
-                ? 'Snapshot'
-                : 'Snapshots';
-            this.indicatorTitle = `${snapshotCount} ${snapshotTitleSuffix}`;
+        {
+          app: openmct.app,
+          element: divElement
         }
+      );
+      this.destroySnapshotContainer = destroy;
+    },
+    updateSnapshotIndicatorTitle() {
+      const snapshotCount = this.snapshotContainer.getSnapshots().length;
+      this.snapshotCount = snapshotCount;
+      const snapshotTitleSuffix = snapshotCount === 1 ? 'Snapshot' : 'Snapshots';
+      this.indicatorTitle = `${snapshotCount} ${snapshotTitleSuffix}`;
     }
+  }
 };
 </script>
diff --git a/src/plugins/notebook/components/PageCollection.vue b/src/plugins/notebook/components/PageCollection.vue
index 79d72d718a5..ef054840412 100644
--- a/src/plugins/notebook/components/PageCollection.vue
+++ b/src/plugins/notebook/components/PageCollection.vue
@@ -1,136 +1,160 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<ul class="c-list">
-    <li v-for="page in pages"
-        :key="page.id"
-        class="c-list__item-h"
-    >
-        <Page ref="pageComponent"
-              :default-page-id="defaultPageId"
-              :selected-page-id="selectedPageId"
-              :page="page"
-              :page-title="pageTitle"
-              @deletePage="deletePage"
-              @renamePage="updatePage"
-              @selectPage="selectPage"
-        />
+  <ul class="c-list c-notebook__pages">
+    <li v-for="page in pages" :key="page.id" class="c-list__item-h">
+      <Page
+        ref="pageComponent"
+        :default-page-id="defaultPageId"
+        :selected-page-id="selectedPageId"
+        :page="page"
+        :page-title="pageTitle"
+        @delete-page="deletePage"
+        @rename-page="updatePage"
+        @select-page="selectPage"
+      />
     </li>
-</ul>
+  </ul>
 </template>
 
 <script>
-import { deleteNotebookEntries } from '../utils/notebook-entries';
-import { getDefaultNotebook } from '../utils/notebook-storage';
+import { deleteNotebookEntries } from '../utils/notebook-entries.js';
+import { getDefaultNotebook } from '../utils/notebook-storage.js';
 import Page from './PageComponent.vue';
 
 export default {
-    components: {
-        Page
+  components: {
+    Page
+  },
+  inject: ['openmct'],
+  props: {
+    defaultPageId: {
+      type: String,
+      default() {
+        return '';
+      }
     },
-    inject: ['openmct'],
-    props: {
-        defaultPageId: {
-            type: String,
-            default() {
-                return '';
-            }
-        },
-        selectedPageId: {
-            type: String,
-            required: true
-        },
-        domainObject: {
-            type: Object,
-            required: true
-        },
-        pages: {
-            type: Array,
-            required: true,
-            default() {
-                return [];
-            }
-        },
-        sections: {
-            type: Array,
-            required: true,
-            default() {
-                return [];
-            }
-        },
-        pageTitle: {
-            type: String,
-            default() {
-                return '';
-            }
-        },
-        sidebarCoversEntries: {
-            type: Boolean,
-            default() {
-                return false;
-            }
-        }
+    selectedPageId: {
+      type: String,
+      required: true
+    },
+    domainObject: {
+      type: Object,
+      required: true
+    },
+    pages: {
+      type: Array,
+      required: true,
+      default() {
+        return [];
+      }
+    },
+    sections: {
+      type: Array,
+      required: true,
+      default() {
+        return [];
+      }
     },
-    watch: {
-        pages() {
-            if (!this.containsPage(this.selectedPageId)) {
-                this.selectPage(this.pages[0].id);
-            }
+    pageTitle: {
+      type: String,
+      default() {
+        return '';
+      }
+    },
+    sidebarCoversEntries: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    }
+  },
+  emits: ['default-page-deleted', 'update-page', 'select-page', 'toggle-nav'],
+  watch: {
+    pages: {
+      handler(val, oldVal) {
+        if (!this.containsPage(this.selectedPageId)) {
+          this.selectPage(this.pages[0].id);
         }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    containsPage(pageId) {
+      return this.pages.some((page) => page.id === pageId);
     },
-    methods: {
-        containsPage(pageId) {
-            return this.pages.some(page => page.id === pageId);
-        },
-        deletePage(id) {
-            const selectedSection = this.sections.find(s => s.isSelected);
-            const page = this.pages.find(p => p.id === id);
-            deleteNotebookEntries(this.openmct, this.domainObject, selectedSection, page);
+    deletePage(id) {
+      const selectedSection = this.sections.find((s) => s.isSelected);
+      const page = this.pages.find((p) => p.id === id);
+      deleteNotebookEntries(this.openmct, this.domainObject, selectedSection, page);
 
-            const selectedPage = this.pages.find(p => p.isSelected);
-            const defaultNotebook = getDefaultNotebook();
-            const defaultpage = defaultNotebook && defaultNotebook.page;
-            const isPageSelected = selectedPage && selectedPage.id === id;
-            const isPageDefault = defaultpage && defaultpage.id === id;
-            const pages = this.pages.filter(s => s.id !== id);
-            let selectedPageId;
+      const selectedPage = this.pages.find((p) => p.isSelected);
+      const defaultNotebook = getDefaultNotebook();
+      const defaultPageId = defaultNotebook && defaultNotebook.defaultPageId;
+      const isPageSelected = selectedPage && selectedPage.id === id;
+      const isPageDefault = defaultPageId === id;
+      const pages = this.pages.filter((s) => s.id !== id);
+      let selectedPageId;
 
-            if (isPageSelected && defaultpage) {
-                pages.forEach(s => {
-                    s.isSelected = false;
-                    if (defaultpage && defaultpage.id === s.id) {
-                        selectedPageId = s.id;
-                    }
-                });
-            }
+      if (isPageSelected && defaultPageId) {
+        pages.forEach((s) => {
+          s.isSelected = false;
+          if (defaultPageId === s.id) {
+            selectedPageId = s.id;
+          }
+        });
+      }
 
-            if (pages.length && isPageSelected && (!defaultpage || isPageDefault)) {
-                selectedPageId = pages[0].id;
-            }
+      if (isPageDefault) {
+        this.$emit('default-page-deleted');
+      }
 
-            this.$emit('updatePage', {
-                pages,
-                id
-            });
-            this.$emit('selectPage', selectedPageId);
-        },
-        selectPage(id) {
-            this.$emit('selectPage', id);
+      if (pages.length && isPageSelected && (!defaultPageId || isPageDefault)) {
+        selectedPageId = pages[0].id;
+      }
 
-            // Add test here for whether or not to toggle the nav
-            if (this.sidebarCoversEntries) {
-                this.$emit('toggleNav');
-            }
-        },
-        updatePage(newPage) {
-            const id = newPage.id;
-            const pages = this.pages.map(page =>
-                page.id === id
-                    ? newPage
-                    : page);
-            this.$emit('updatePage', {
-                pages,
-                id
-            });
-        }
+      this.$emit('update-page', {
+        pages,
+        id
+      });
+      this.$emit('select-page', selectedPageId);
+    },
+    selectPage(id) {
+      this.$emit('select-page', id);
+
+      // Add test here for whether or not to toggle the nav
+      if (this.sidebarCoversEntries) {
+        this.$emit('toggle-nav');
+      }
+    },
+    updatePage(newPage) {
+      const id = newPage.id;
+      const pages = this.pages.map((page) => (page.id === id ? newPage : page));
+      this.$emit('update-page', {
+        pages,
+        id
+      });
     }
+  }
 };
 </script>
diff --git a/src/plugins/notebook/components/PageComponent.vue b/src/plugins/notebook/components/PageComponent.vue
index ed87bc2eb64..baa8fb2a927 100644
--- a/src/plugins/notebook/components/PageComponent.vue
+++ b/src/plugins/notebook/components/PageComponent.vue
@@ -1,135 +1,182 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div class="c-list__item js-list__item"
-     :class="[{ 'is-selected': isSelected, 'is-notebook-default' : (defaultPageId === page.id) }]"
-     :data-id="page.id"
-     @click="selectPage"
->
-    <span class="c-list__item__name js-list__item__name"
-          :data-id="page.id"
-          @keydown.enter="updateName"
-          @blur="updateName"
-    >{{ page.name.length ? page.name : `Unnamed ${pageTitle}` }}</span>
-    <PopupMenu :popup-menu-items="popupMenuItems" />
-</div>
+  <div
+    class="c-list__item js-list__item"
+    :class="[
+      {
+        'is-selected': isSelected,
+        'is-notebook-default': defaultPageId === page.id,
+        'icon-lock': page.isLocked
+      }
+    ]"
+    :data-id="page.id"
+    @click="selectPage"
+  >
+    <template v-if="!page.isLocked">
+      <div
+        class="c-list__item__name js-list__item__name"
+        :class="[{ 'c-input-inline': isSelected }]"
+        :data-id="page.id"
+        :contenteditable="isSelected"
+        @keydown.escape="updateName"
+        @keydown.enter="updateName"
+        @blur="updateName"
+      >
+        {{ pageName }}
+      </div>
+      <PopupMenu :popup-menu-items="popupMenuItems" />
+    </template>
+    <template v-else>
+      <div
+        class="c-list__item__name js-list__item__name"
+        :data-id="page.id"
+        :contenteditable="false"
+      >
+        {{ pageName }}
+      </div>
+    </template>
+  </div>
 </template>
 
 <script>
+import { KEY_ENTER, KEY_ESCAPE } from '../utils/notebook-key-code.js';
+import RemoveDialog from '../utils/removeDialog.js';
 import PopupMenu from './PopupMenu.vue';
-import RemoveDialog from '../utils/removeDialog';
 
 export default {
-    components: {
-        PopupMenu
-    },
-    inject: ['openmct'],
-    props: {
-        defaultPageId: {
-            type: String,
-            default() {
-                return '';
-            }
-        },
-        selectedPageId: {
-            type: String,
-            required: true
-        },
-        page: {
-            type: Object,
-            required: true
-        },
-        pageTitle: {
-            type: String,
-            default() {
-                return '';
-            }
-        }
+  components: {
+    PopupMenu
+  },
+  inject: ['openmct'],
+  props: {
+    defaultPageId: {
+      type: String,
+      default() {
+        return '';
+      }
     },
-    data() {
-        return {
-            popupMenuItems: [],
-            removeActionString: `Delete ${this.pageTitle}`
-        };
+    selectedPageId: {
+      type: String,
+      required: true
     },
-    computed: {
-        isSelected() {
-            return this.selectedPageId === this.page.id;
-        }
+    page: {
+      type: Object,
+      required: true
     },
-    watch: {
-        page(newPage) {
-            this.toggleContentEditable(newPage);
-        }
+    pageTitle: {
+      type: String,
+      default() {
+        return '';
+      }
+    }
+  },
+  emits: ['delete-page', 'select-page', 'rename-page'],
+  data() {
+    return {
+      popupMenuItems: [],
+      removeActionString: `Delete ${this.pageTitle}`
+    };
+  },
+  computed: {
+    isSelected() {
+      return this.selectedPageId === this.page.id;
     },
-    mounted() {
-        this.addPopupMenuItems();
-        this.toggleContentEditable();
+    pageName() {
+      return this.page.name.length ? this.page.name : `Unnamed ${this.pageTitle}`;
+    }
+  },
+  mounted() {
+    this.addPopupMenuItems();
+  },
+  methods: {
+    addPopupMenuItems() {
+      const removePage = {
+        cssClass: 'icon-trash',
+        name: this.removeActionString,
+        onItemClicked: this.getRemoveDialog.bind(this)
+      };
+
+      this.popupMenuItems = [removePage];
     },
-    methods: {
-        addPopupMenuItems() {
-            const removePage = {
-                cssClass: 'icon-trash',
-                name: this.removeActionString,
-                callback: this.getRemoveDialog.bind(this)
-            };
+    deletePage(success) {
+      if (!success) {
+        return;
+      }
 
-            this.popupMenuItems = [removePage];
-        },
-        deletePage(success) {
-            if (!success) {
-                return;
-            }
+      this.$emit('delete-page', this.page.id);
+    },
+    getRemoveDialog() {
+      const message =
+        'Other users may be editing entries in this page, and deleting it is permanent. Do you want to continue?';
+      const options = {
+        name: this.removeActionString,
+        callback: this.deletePage.bind(this),
+        message
+      };
+      const removeDialog = new RemoveDialog(this.openmct, options);
+      removeDialog.show();
+    },
+    selectPage(event) {
+      const {
+        target: {
+          dataset: { id }
+        }
+      } = event;
 
-            this.$emit('deletePage', this.page.id);
-        },
-        getRemoveDialog() {
-            const message = 'Other users may be editing entries in this page, and deleting it is permanent. Do you want to continue?';
-            const options = {
-                name: this.removeActionString,
-                callback: this.deletePage.bind(this),
-                message
-            };
-            const removeDialog = new RemoveDialog(this.openmct, options);
-            removeDialog.show();
-        },
-        selectPage(event) {
-            const target = event.target;
-            const page = target.closest('.js-list__item');
-            const input = page.querySelector('.js-list__item__name');
+      if (this.isSelected || !id) {
+        return;
+      }
 
-            if (page.className.indexOf('is-selected') > -1) {
-                input.contentEditable = true;
-                input.classList.add('c-input-inline');
+      this.$emit('select-page', id);
+    },
+    renamePage(target) {
+      if (!target) {
+        return;
+      }
 
-                return;
-            }
+      target.textContent = target.textContent
+        ? target.textContent.trim()
+        : `Unnamed ${this.pageTitle}`;
 
-            const id = target.dataset.id;
-            if (!id) {
-                return;
-            }
+      if (this.page.name === target.textContent) {
+        return;
+      }
 
-            this.$emit('selectPage', id);
-        },
-        toggleContentEditable(page = this.page) {
-            const pageTitle = this.$el.querySelector('span');
-            pageTitle.contentEditable = page.isSelected;
-        },
-        updateName(event) {
-            const target = event.target;
-            const name = target.textContent.toString();
-            target.contentEditable = false;
-            target.classList.remove('c-input-inline');
+      this.$emit('rename-page', Object.assign(this.page, { name: target.textContent }));
+    },
+    updateName(event) {
+      const { target, keyCode, type } = event;
 
-            if (this.page.name === name) {
-                return;
-            }
+      if (keyCode === KEY_ESCAPE) {
+        target.textContent = this.page.name;
+      } else if (keyCode === KEY_ENTER || type === 'blur') {
+        this.renamePage(target);
+      }
 
-            if (name === '') {
-                return;
-            }
+      target.scrollLeft = '0';
 
-            this.$emit('renamePage', Object.assign(this.page, { name }));
-        }
+      target.blur();
     }
+  }
 };
 </script>
diff --git a/src/plugins/notebook/components/PopupMenu.vue b/src/plugins/notebook/components/PopupMenu.vue
index 3fb392432cf..2a19a96be0b 100644
--- a/src/plugins/notebook/components/PopupMenu.vue
+++ b/src/plugins/notebook/components/PopupMenu.vue
@@ -1,93 +1,53 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<button
+  <button
     class="c-popup-menu-button c-disclosure-button"
-    title="popup menu"
-    @click="showMenuItems"
->
-</button>
+    title="Open context menu"
+    @click.stop="showMenuItems($event)"
+  ></button>
 </template>
 
 <script>
-import MenuItems from './MenuItems.vue';
-import Vue from 'vue';
-
 export default {
-    inject: ['openmct'],
-    props: {
-        domainObject: {
-            type: Object,
-            default() {
-                return {};
-            }
-        },
-        popupMenuItems: {
-            type: Array,
-            default() {
-                return [];
-            }
-        }
-    },
-    data() {
-        return {
-            menuItems: null
-        };
-    },
-    mounted() {
+  inject: ['openmct'],
+  props: {
+    domainObject: {
+      type: Object,
+      default() {
+        return {};
+      }
     },
-    methods: {
-        calculateMenuPosition(event, element) {
-            let eventPosX = event.clientX;
-            let eventPosY = event.clientY;
-
-            let menuDimensions = element.getBoundingClientRect();
-            let overflowX = (eventPosX + menuDimensions.width) - document.body.clientWidth;
-            let overflowY = (eventPosY + menuDimensions.height) - document.body.clientHeight;
-
-            if (overflowX > 0) {
-                eventPosX = eventPosX - overflowX;
-            }
-
-            if (overflowY > 0) {
-                eventPosY = eventPosY - overflowY;
-            }
-
-            return {
-                x: eventPosX,
-                y: eventPosY
-            };
-        },
-        hideMenuItems() {
-            document.body.removeChild(this.menuItems.$el);
-            this.menuItems.$destroy();
-            this.menuItems = null;
-            document.removeEventListener('click', this.hideMenuItems);
-
-            return;
-        },
-        showMenuItems($event) {
-            const menuItems = new Vue({
-                components: {
-                    MenuItems
-                },
-                provide: {
-                    popupMenuItems: this.popupMenuItems
-                },
-                template: '<MenuItems />'
-            });
-            this.menuItems = menuItems;
-
-            menuItems.$mount();
-            const element = this.menuItems.$el;
-            document.body.appendChild(element);
-
-            const position = this.calculateMenuPosition($event, element);
-            element.style.left = `${position.x}px`;
-            element.style.top = `${position.y}px`;
-
-            setTimeout(() => {
-                document.addEventListener('click', this.hideMenuItems);
-            }, 0);
-        }
+    popupMenuItems: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  methods: {
+    showMenuItems($event) {
+      this.openmct.menus.showMenu($event.x, $event.y, this.popupMenuItems);
     }
+  }
 };
 </script>
diff --git a/src/plugins/notebook/components/SearchResults.vue b/src/plugins/notebook/components/SearchResults.vue
index 626bbb2311a..fbeb48a5883 100644
--- a/src/plugins/notebook/components/SearchResults.vue
+++ b/src/plugins/notebook/components/SearchResults.vue
@@ -1,73 +1,84 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 
 <template>
-<div class="c-notebook__search-results">
+  <div class="c-notebook__search-results">
     <div class="c-notebook__search-results__header">Search Results ({{ results.length }})</div>
     <div class="c-notebook__entries">
-        <NotebookEntry v-for="(result, index) in results"
-                       :key="index"
-                       :domain-object="domainObject"
-                       :result="result"
-                       :entry="result.entry"
-                       :read-only="true"
-                       :selected-page="result.page"
-                       :selected-section="result.section"
-                       @changeSectionPage="changeSectionPage"
-                       @updateEntries="updateEntries"
-        />
+      <NotebookEntry
+        v-for="(result, index) in results"
+        :key="index"
+        :domain-object="domainObject"
+        :result="result"
+        :entry="result.entry"
+        :read-only="true"
+        :selected-page="result.page"
+        :selected-section="result.section"
+        :is-locked="result.page.isLocked"
+        @editing-entry="editingEntry"
+        @cancel-edit="cancelEdit"
+        @change-section-page="changeSectionPage"
+        @update-entries="updateEntries"
+      />
     </div>
-</div>
+  </div>
 </template>
 
 <script>
 import NotebookEntry from './NotebookEntry.vue';
 
 export default {
-    components: {
-        NotebookEntry
+  components: {
+    NotebookEntry
+  },
+  inject: ['openmct', 'snapshotContainer'],
+  props: {
+    domainObject: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    results: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ['editing-entry', 'cancel-edit', 'change-section-page', 'update-entries'],
+  methods: {
+    editingEntry() {
+      this.$emit('editing-entry');
+    },
+    cancelEdit() {
+      this.$emit('cancel-edit');
     },
-    inject: ['openmct', 'snapshotContainer'],
-    props: {
-        domainObject: {
-            type: Object,
-            default() {
-                return {};
-            }
-        },
-        results: {
-            type: Array,
-            default() {
-                return [];
-            }
-        }
+    changeSectionPage(data) {
+      this.$emit('change-section-page', data);
     },
-    methods: {
-        changeSectionPage(data) {
-            this.$emit('changeSectionPage', data);
-        },
-        updateEntries(entries) {
-            this.$emit('updateEntries', entries);
-        }
+    updateEntries(entries) {
+      this.$emit('update-entries', entries);
     }
+  }
 };
 </script>
diff --git a/src/plugins/notebook/components/SectionCollection.vue b/src/plugins/notebook/components/SectionCollection.vue
index a8df17b1f04..69f5149c80e 100644
--- a/src/plugins/notebook/components/SectionCollection.vue
+++ b/src/plugins/notebook/components/SectionCollection.vue
@@ -1,117 +1,141 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<ul class="c-list">
-    <li v-for="section in sections"
-        :key="section.id"
-        class="c-list__item-h"
-    >
-        <NotebookSection ref="sectionComponent"
-                         :default-section-id="defaultSectionId"
-                         :selected-section-id="selectedSectionId"
-                         :section="section"
-                         :section-title="sectionTitle"
-                         @deleteSection="deleteSection"
-                         @renameSection="updateSection"
-                         @selectSection="selectSection"
-        />
+  <ul class="c-list c-notebook__sections">
+    <li v-for="section in sections" :key="section.id" class="c-list__item-h">
+      <NotebookSection
+        ref="sectionComponent"
+        :default-section-id="defaultSectionId"
+        :selected-section-id="selectedSectionId"
+        :section="section"
+        :section-title="sectionTitle"
+        @delete-section="deleteSection"
+        @rename-section="updateSection"
+        @select-section="selectSection"
+      />
     </li>
-</ul>
+  </ul>
 </template>
 
 <script>
-import { deleteNotebookEntries } from '../utils/notebook-entries';
-import { getDefaultNotebook } from '../utils/notebook-storage';
+import { deleteNotebookEntries } from '../utils/notebook-entries.js';
+import { getDefaultNotebook } from '../utils/notebook-storage.js';
 import SectionComponent from './SectionComponent.vue';
 
 export default {
-    components: {
-        NotebookSection: SectionComponent
+  components: {
+    NotebookSection: SectionComponent
+  },
+  inject: ['openmct'],
+  props: {
+    defaultSectionId: {
+      type: String,
+      default() {
+        return '';
+      }
     },
-    inject: ['openmct'],
-    props: {
-        defaultSectionId: {
-            type: String,
-            default() {
-                return '';
-            }
-        },
-        selectedSectionId: {
-            type: String,
-            required: true
-        },
-        domainObject: {
-            type: Object,
-            default() {
-                return {};
-            }
-        },
-        sections: {
-            type: Array,
-            required: true,
-            default() {
-                return [];
-            }
-        },
-        sectionTitle: {
-            type: String,
-            default() {
-                return '';
-            }
-        }
+    selectedSectionId: {
+      type: String,
+      required: true
+    },
+    domainObject: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    sections: {
+      type: Array,
+      required: true,
+      default() {
+        return [];
+      }
     },
-    watch: {
-        sections() {
-            if (!this.containsSection(this.selectedSectionId)) {
-                this.selectSection(this.sections[0].id);
-            }
+    sectionTitle: {
+      type: String,
+      default() {
+        return '';
+      }
+    }
+  },
+  emits: ['select-section', 'default-section-deleted', 'update-section'],
+  watch: {
+    sections: {
+      handler(val, oldVal) {
+        if (!this.containsSection(this.selectedSectionId)) {
+          this.selectSection(this.sections[0].id);
         }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    containsSection(sectionId) {
+      return this.sections.some((section) => section.id === sectionId);
     },
-    methods: {
-        containsSection(sectionId) {
-            return this.sections.some(section => section.id === sectionId);
-        },
-        deleteSection(id) {
-            const section = this.sections.find(s => s.id === id);
-            deleteNotebookEntries(this.openmct, this.domainObject, section);
+    deleteSection(id) {
+      const section = this.sections.find((s) => s.id === id);
+      deleteNotebookEntries(this.openmct, this.domainObject, section);
 
-            const selectedSection = this.sections.find(s => s.id === this.selectedSectionId);
-            const defaultNotebook = getDefaultNotebook();
-            const defaultSection = defaultNotebook && defaultNotebook.section;
-            const isSectionSelected = selectedSection && selectedSection.id === id;
-            const isSectionDefault = defaultSection && defaultSection.id === id;
-            const sections = this.sections.filter(s => s.id !== id);
+      const selectedSection = this.sections.find((s) => s.id === this.selectedSectionId);
+      const defaultNotebook = getDefaultNotebook();
+      const defaultSectionId = defaultNotebook && defaultNotebook.defaultSectionId;
+      const isSectionSelected = selectedSection && selectedSection.id === id;
+      const isSectionDefault = defaultSectionId === id;
+      const sections = this.sections.filter((s) => s.id !== id);
 
-            if (isSectionSelected && defaultSection) {
-                sections.forEach(s => {
-                    s.isSelected = false;
-                    if (defaultSection && defaultSection.id === s.id) {
-                        s.isSelected = true;
-                    }
-                });
-            }
+      if (isSectionSelected && defaultSectionId) {
+        sections.forEach((s) => {
+          s.isSelected = false;
+          if (defaultSectionId === s.id) {
+            s.isSelected = true;
+          }
+        });
+      }
 
-            if (sections.length && isSectionSelected && (!defaultSection || isSectionDefault)) {
-                sections[0].isSelected = true;
-            }
+      if (isSectionDefault) {
+        this.$emit('default-section-deleted');
+      }
 
-            this.$emit('updateSection', {
-                sections,
-                id
-            });
-        },
-        selectSection(id) {
-            this.$emit('selectSection', id);
-        },
-        updateSection(newSection) {
-            const id = newSection.id;
-            const sections = this.sections.map(section =>
-                section.id === id
-                    ? newSection
-                    : section);
-            this.$emit('updateSection', {
-                sections,
-                id
-            });
-        }
+      if (sections.length && isSectionSelected && (!defaultSectionId || isSectionDefault)) {
+        sections[0].isSelected = true;
+      }
+
+      this.$emit('update-section', {
+        sections,
+        id
+      });
+    },
+    selectSection(id) {
+      this.$emit('select-section', id);
+    },
+    updateSection(newSection) {
+      const id = newSection.id;
+      const sections = this.sections.map((section) => (section.id === id ? newSection : section));
+      this.$emit('update-section', {
+        sections,
+        id
+      });
     }
+  }
 };
 </script>
diff --git a/src/plugins/notebook/components/SectionComponent.vue b/src/plugins/notebook/components/SectionComponent.vue
index d3d317aa882..bd4dcf69389 100644
--- a/src/plugins/notebook/components/SectionComponent.vue
+++ b/src/plugins/notebook/components/SectionComponent.vue
@@ -1,137 +1,165 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div class="c-list__item js-list__item"
-     :class="[{ 'is-selected': isSelected, 'is-notebook-default' : (defaultSectionId === section.id) }]"
-     :data-id="section.id"
-     @click="selectSection"
->
-    <span class="c-list__item__name js-list__item__name"
-          :data-id="section.id"
-          @keydown.enter="updateName"
-          @blur="updateName"
-    >{{ section.name.length ? section.name : `Unnamed ${sectionTitle}` }}</span>
-    <PopupMenu :popup-menu-items="popupMenuItems" />
-</div>
+  <div
+    class="c-list__item js-list__item"
+    :class="[{ 'is-selected': isSelected, 'is-notebook-default': defaultSectionId === section.id }]"
+    :data-id="section.id"
+    @click="selectSection"
+  >
+    <span
+      class="c-list__item__name js-list__item__name"
+      :class="[{ 'c-input-inline': isSelected && !section.isLocked }]"
+      :data-id="section.id"
+      :contenteditable="isSelected && !section.isLocked"
+      @keydown.escape="updateName"
+      @keydown.enter="updateName"
+      @blur="updateName"
+      >{{ sectionName }}</span
+    >
+    <PopupMenu v-if="!section.isLocked" :popup-menu-items="popupMenuItems" />
+  </div>
 </template>
 
 <script>
+import { KEY_ENTER, KEY_ESCAPE } from '../utils/notebook-key-code.js';
+import RemoveDialog from '../utils/removeDialog.js';
 import PopupMenu from './PopupMenu.vue';
-import RemoveDialog from '../utils/removeDialog';
 
 export default {
-    components: {
-        PopupMenu
+  components: {
+    PopupMenu
+  },
+  inject: ['openmct'],
+  props: {
+    defaultSectionId: {
+      type: String,
+      default() {
+        return '';
+      }
     },
-    inject: ['openmct'],
-    props: {
-        defaultSectionId: {
-            type: String,
-            default() {
-                return '';
-            }
-        },
-        selectedSectionId: {
-            type: String,
-            required: true
-        },
-        section: {
-            type: Object,
-            required: true
-        },
-        sectionTitle: {
-            type: String,
-            default() {
-                return '';
-            }
-        }
+    selectedSectionId: {
+      type: String,
+      required: true
     },
-    data() {
-        return {
-            popupMenuItems: [],
-            removeActionString: `Delete ${this.sectionTitle}`
-        };
+    section: {
+      type: Object,
+      required: true
     },
-    computed: {
-        isSelected() {
-            return this.selectedSectionId === this.section.id;
-        }
+    sectionTitle: {
+      type: String,
+      default() {
+        return '';
+      }
+    }
+  },
+  emits: ['delete-section', 'rename-section', 'select-section'],
+  data() {
+    return {
+      popupMenuItems: [],
+      removeActionString: `Delete ${this.sectionTitle}`
+    };
+  },
+  computed: {
+    isSelected() {
+      return this.selectedSectionId === this.section.id;
     },
-    watch: {
-        section(newSection) {
-            this.toggleContentEditable(newSection);
-        }
+    sectionName() {
+      return this.section.name.length ? this.section.name : `Unnamed ${this.sectionTitle}`;
+    }
+  },
+  mounted() {
+    this.addPopupMenuItems();
+  },
+  methods: {
+    addPopupMenuItems() {
+      const removeSection = {
+        cssClass: 'icon-trash',
+        name: this.removeActionString,
+        onItemClicked: this.getRemoveDialog
+      };
+
+      this.popupMenuItems = [removeSection];
+    },
+    deleteSection(success) {
+      if (!success) {
+        return;
+      }
+
+      this.$emit('delete-section', this.section.id);
     },
-    mounted() {
-        this.addPopupMenuItems();
-        this.toggleContentEditable();
+    getRemoveDialog() {
+      const message =
+        'Other users may be editing entries in this section, and deleting it is permanent. Do you want to continue?';
+      const options = {
+        name: this.removeActionString,
+        callback: this.deleteSection.bind(this),
+        message
+      };
+
+      const removeDialog = new RemoveDialog(this.openmct, options);
+      removeDialog.show();
     },
-    methods: {
-        addPopupMenuItems() {
-            const removeSection = {
-                cssClass: 'icon-trash',
-                name: this.removeActionString,
-                callback: this.getRemoveDialog.bind(this)
-            };
-
-            this.popupMenuItems = [removeSection];
-        },
-        deleteSection(success) {
-            if (!success) {
-                return;
-            }
-
-            this.$emit('deleteSection', this.section.id);
-        },
-        getRemoveDialog() {
-            const message = 'Other users may be editing entries in this section, and deleting it is permanent. Do you want to continue?';
-            const options = {
-                name: this.removeActionString,
-                callback: this.deleteSection.bind(this),
-                message
-            };
-
-            const removeDialog = new RemoveDialog(this.openmct, options);
-            removeDialog.show();
-        },
-        selectSection(event) {
-            const target = event.target;
-            const section = target.closest('.js-list__item');
-            const input = section.querySelector('.js-list__item__name');
-
-            if (section.className.indexOf('is-selected') > -1) {
-                input.contentEditable = true;
-                input.classList.add('c-input-inline');
-
-                return;
-            }
-
-            const id = target.dataset.id;
-
-            if (!id) {
-                return;
-            }
-
-            this.$emit('selectSection', id);
-        },
-        toggleContentEditable(section = this.section) {
-            const sectionTitle = this.$el.querySelector('span');
-            sectionTitle.contentEditable = section.isSelected;
-        },
-        updateName(event) {
-            const target = event.target;
-            target.contentEditable = false;
-            target.classList.remove('c-input-inline');
-            const name = target.textContent.trim();
-
-            if (this.section.name === name) {
-                return;
-            }
-
-            if (name === '') {
-                return;
-            }
-
-            this.$emit('renameSection', Object.assign(this.section, { name }));
+    selectSection(event) {
+      const {
+        target: {
+          dataset: { id }
         }
+      } = event;
+
+      if (this.isSelected || !id) {
+        return;
+      }
+
+      this.$emit('select-section', id);
+    },
+    renameSection(target) {
+      if (!target) {
+        return;
+      }
+
+      target.textContent = target.textContent
+        ? target.textContent.trim()
+        : `Unnamed ${this.sectionTitle}`;
+
+      if (this.section.name === target.textContent) {
+        return;
+      }
+
+      this.$emit('rename-section', Object.assign(this.section, { name: target.textContent }));
+    },
+    updateName(event) {
+      const { target, keyCode, type } = event;
+
+      if (keyCode === KEY_ESCAPE) {
+        target.textContent = this.section.name;
+      } else if (keyCode === KEY_ENTER || type === 'blur') {
+        this.renameSection(target);
+      }
+
+      target.scrollLeft = '0';
+
+      target.blur();
     }
+  }
 };
 </script>
diff --git a/src/plugins/notebook/components/Sidebar.vue b/src/plugins/notebook/components/Sidebar.vue
deleted file mode 100644
index 46c1a69410c..00000000000
--- a/src/plugins/notebook/components/Sidebar.vue
+++ /dev/null
@@ -1,244 +0,0 @@
-<template>
-<div class="c-sidebar c-drawer c-drawer--align-left">
-    <div class="c-sidebar__pane js-sidebar-sections">
-        <div class="c-sidebar__header-w">
-            <div class="c-sidebar__header">
-                <span class="c-sidebar__header-label">{{ sectionTitle }}</span>
-            </div>
-        </div>
-        <div class="c-sidebar__contents-and-controls">
-            <button class="c-list-button"
-                    @click="addSection"
-            >
-                <span class="c-button c-list-button__button icon-plus"></span>
-                <span class="c-list-button__label">Add {{ sectionTitle }}</span>
-            </button>
-            <SectionCollection class="c-sidebar__contents"
-                               :default-section-id="defaultSectionId"
-                               :selected-section-id="selectedSectionId"
-                               :domain-object="domainObject"
-                               :sections="sections"
-                               :section-title="sectionTitle"
-                               @updateSection="sectionsChanged"
-                               @selectSection="selectSection"
-            />
-        </div>
-    </div>
-    <div class="c-sidebar__pane js-sidebar-pages">
-        <div class="c-sidebar__header-w">
-            <div class="c-sidebar__header">
-                <span class="c-sidebar__header-label">{{ pageTitle }}</span>
-            </div>
-            <button class="c-click-icon c-click-icon--major icon-x-in-circle"
-                    @click="toggleNav"
-            ></button>
-        </div>
-
-        <div class="c-sidebar__contents-and-controls">
-            <button class="c-list-button"
-                    @click="addPage"
-            >
-                <span class="c-button c-list-button__button icon-plus"></span>
-                <span class="c-list-button__label">Add {{ pageTitle }}</span>
-            </button>
-            <PageCollection ref="pageCollection"
-                            class="c-sidebar__contents"
-                            :default-page-id="defaultPageId"
-                            :selected-page-id="selectedPageId"
-                            :domain-object="domainObject"
-                            :pages="pages"
-                            :sections="sections"
-                            :sidebar-covers-entries="sidebarCoversEntries"
-                            :page-title="pageTitle"
-                            @toggleNav="toggleNav"
-                            @updatePage="pagesChanged"
-                            @selectPage="selectPage"
-            />
-        </div>
-    </div>
-</div>
-</template>
-
-<script>
-import SectionCollection from './SectionCollection.vue';
-import PageCollection from './PageCollection.vue';
-import uuid from 'uuid';
-
-export default {
-    components: {
-        SectionCollection,
-        PageCollection
-    },
-    inject: ['openmct'],
-    props: {
-        defaultPageId: {
-            type: String,
-            default() {
-                return '';
-            }
-        },
-        selectedPageId: {
-            type: String,
-            default() {
-                return '';
-            }
-        },
-        defaultSectionId: {
-            type: String,
-            default() {
-                return '';
-            }
-        },
-        selectedSectionId: {
-            type: String,
-            default() {
-                return '';
-            }
-        },
-        domainObject: {
-            type: Object,
-            default() {
-                return {};
-            }
-        },
-        pageTitle: {
-            type: String,
-            default() {
-                return '';
-            }
-        },
-        sections: {
-            type: Array,
-            required: true,
-            default() {
-                return [];
-            }
-        },
-        sectionTitle: {
-            type: String,
-            default() {
-                return '';
-            }
-        },
-        sidebarCoversEntries: {
-            type: Boolean,
-            default() {
-                return false;
-            }
-        }
-    },
-    computed: {
-        pages() {
-            const selectedSection = this.sections.find(section => section.id === this.selectedSectionId);
-
-            return selectedSection && selectedSection.pages || [];
-        }
-    },
-    watch: {
-        pages(newPages) {
-            if (!newPages.length) {
-                this.addPage();
-            }
-        },
-        sections(newSections) {
-            if (!newSections.length) {
-                this.addSection();
-            }
-        }
-    },
-    mounted() {
-        if (!this.sections.length) {
-            this.addSection();
-        }
-    },
-    methods: {
-        addPage() {
-            const newPage = this.createNewPage();
-            const pages = this.addNewPage(newPage);
-
-            this.pagesChanged({
-                pages,
-                id: newPage.id
-            });
-            this.$emit('selectPage', newPage.id);
-        },
-        addSection() {
-            const newSection = this.createNewSection();
-            const sections = this.addNewSection(newSection);
-
-            this.sectionsChanged({
-                sections,
-                id: newSection.id
-            });
-
-            this.$emit('selectSection', newSection.id);
-        },
-        addNewPage(page) {
-            const pages = this.pages.map(p => {
-                p.isSelected = false;
-
-                return p;
-            });
-
-            return pages.concat(page);
-        },
-        addNewSection(section) {
-            const sections = this.sections.map(s => {
-                s.isSelected = false;
-
-                return s;
-            });
-
-            return sections.concat(section);
-        },
-        createNewPage() {
-            const pageTitle = this.pageTitle;
-            const id = uuid();
-
-            return {
-                id,
-                isDefault: false,
-                isSelected: true,
-                name: `Unnamed ${pageTitle}`,
-                pageTitle
-            };
-        },
-        createNewSection() {
-            const sectionTitle = this.sectionTitle;
-            const id = uuid();
-            const page = this.createNewPage();
-            const pages = [page];
-
-            return {
-                id,
-                isDefault: false,
-                isSelected: true,
-                name: `Unnamed ${sectionTitle}`,
-                pages,
-                sectionTitle
-            };
-        },
-        toggleNav() {
-            this.$emit('toggleNav');
-        },
-        pagesChanged({ pages, id }) {
-            this.$emit('pagesChanged', {
-                pages,
-                id
-            });
-        },
-        selectPage(pageId) {
-            this.$emit('selectPage', pageId);
-        },
-        selectSection(sectionId) {
-            this.$emit('selectSection', sectionId);
-        },
-        sectionsChanged({ sections, id }) {
-            this.$emit('sectionsChanged', {
-                sections,
-                id
-            });
-        }
-    }
-};
-</script>
diff --git a/src/plugins/notebook/components/SidebarComponent.vue b/src/plugins/notebook/components/SidebarComponent.vue
new file mode 100644
index 00000000000..73ba2f4daf0
--- /dev/null
+++ b/src/plugins/notebook/components/SidebarComponent.vue
@@ -0,0 +1,294 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="c-sidebar c-drawer c-drawer--align-left">
+    <div class="c-sidebar__pane js-sidebar-sections">
+      <div class="c-sidebar__header-w">
+        <div class="c-sidebar__header">
+          <span class="c-sidebar__header-label">{{ sectionTitle }}</span>
+          <button
+            class="c-icon-button c-icon-button--major icon-plus"
+            aria-label="Add Section"
+            @click="addSection"
+          >
+            <span class="c-list-button__label">Add</span>
+          </button>
+        </div>
+      </div>
+      <div class="c-sidebar__contents-and-controls">
+        <SectionCollection
+          class="c-sidebar__contents"
+          :default-section-id="defaultSectionId"
+          :selected-section-id="selectedSectionId"
+          :domain-object="domainObject"
+          :sections="sections"
+          :section-title="sectionTitle"
+          @default-section-deleted="defaultSectionDeleted"
+          @update-section="sectionsChanged"
+          @select-section="selectSection"
+        />
+      </div>
+    </div>
+    <div class="c-sidebar__pane js-sidebar-pages">
+      <div class="c-sidebar__header-w">
+        <div class="c-sidebar__header">
+          <span class="c-sidebar__header-label">{{ pageTitle }}</span>
+
+          <button
+            class="c-icon-button c-icon-button--major icon-plus"
+            aria-label="Add Page"
+            @click="addPage"
+          >
+            <span class="c-icon-button__label">Add</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="c-sidebar__contents-and-controls">
+        <PageCollection
+          ref="pageCollection"
+          class="c-sidebar__contents"
+          :default-page-id="defaultPageId"
+          :selected-page-id="selectedPageId"
+          :domain-object="domainObject"
+          :pages="pages"
+          :sections="sections"
+          :sidebar-covers-entries="sidebarCoversEntries"
+          :page-title="pageTitle"
+          @default-page-deleted="defaultPageDeleted"
+          @toggle-nav="toggleNav"
+          @update-page="pagesChanged"
+          @select-page="selectPage"
+        />
+      </div>
+    </div>
+    <div class="c-sidebar__right-edge">
+      <button class="c-icon-button c-icon-button--major icon-line-horz" @click="toggleNav"></button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { v4 as uuid } from 'uuid';
+
+import PageCollection from './PageCollection.vue';
+import SectionCollection from './SectionCollection.vue';
+
+export default {
+  components: {
+    SectionCollection,
+    PageCollection
+  },
+  inject: ['openmct'],
+  props: {
+    defaultPageId: {
+      type: String,
+      default() {
+        return '';
+      }
+    },
+    selectedPageId: {
+      type: String,
+      default() {
+        return '';
+      }
+    },
+    defaultSectionId: {
+      type: String,
+      default() {
+        return '';
+      }
+    },
+    selectedSectionId: {
+      type: String,
+      default() {
+        return '';
+      }
+    },
+    domainObject: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    pageTitle: {
+      type: String,
+      default() {
+        return '';
+      }
+    },
+    sections: {
+      type: Array,
+      required: true,
+      default() {
+        return [];
+      }
+    },
+    sectionTitle: {
+      type: String,
+      default() {
+        return '';
+      }
+    },
+    sidebarCoversEntries: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    }
+  },
+  emits: [
+    'select-page',
+    'select-section',
+    'toggle-nav',
+    'default-section-deleted',
+    'default-page-deleted',
+    'pages-changed',
+    'sections-changed'
+  ],
+  computed: {
+    pages() {
+      const selectedSection = this.sections.find(
+        (section) => section.id === this.selectedSectionId
+      );
+
+      return (selectedSection && selectedSection.pages) || [];
+    }
+  },
+  watch: {
+    pages: {
+      handler(newPages, oldPages) {
+        if (!newPages.length) {
+          this.addPage();
+        }
+      },
+      deep: true
+    },
+    sections: {
+      handler(newSections, oldSections) {
+        if (!newSections.length) {
+          this.addSection();
+        }
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    if (!this.sections.length) {
+      this.addSection();
+    }
+  },
+  methods: {
+    addPage() {
+      const newPage = this.createNewPage();
+      const pages = this.addNewPage(newPage);
+
+      this.pagesChanged({
+        pages,
+        id: newPage.id
+      });
+      this.$emit('select-page', newPage.id);
+    },
+    addSection() {
+      const newSection = this.createNewSection();
+      const sections = this.addNewSection(newSection);
+
+      this.sectionsChanged({
+        sections,
+        id: newSection.id
+      });
+
+      this.$emit('select-section', newSection.id);
+    },
+    addNewPage(newPage) {
+      this.pages.forEach((page) => {
+        page.isSelected = false;
+      });
+
+      this.pages.push(newPage);
+      return this.pages;
+    },
+    addNewSection(newSection) {
+      this.sections.forEach((section) => {
+        section.isSelected = false;
+      });
+
+      this.sections.push(newSection);
+      return this.sections;
+    },
+    createNewPage() {
+      const pageTitle = this.pageTitle;
+      const id = uuid();
+
+      return {
+        id,
+        isDefault: false,
+        isSelected: true,
+        name: `Unnamed ${pageTitle}`,
+        pageTitle
+      };
+    },
+    createNewSection() {
+      const sectionTitle = this.sectionTitle;
+      const id = uuid();
+      const page = this.createNewPage();
+      const pages = [page];
+
+      return {
+        id,
+        isDefault: false,
+        isSelected: true,
+        name: `Unnamed ${sectionTitle}`,
+        pages,
+        sectionTitle
+      };
+    },
+    defaultPageDeleted() {
+      this.$emit('default-page-deleted');
+    },
+    defaultSectionDeleted() {
+      this.$emit('default-section-deleted');
+    },
+    toggleNav() {
+      this.$emit('toggle-nav');
+    },
+    pagesChanged({ pages, id }) {
+      this.$emit('pages-changed', {
+        pages,
+        id
+      });
+    },
+    selectPage(pageId) {
+      this.$emit('select-page', pageId);
+    },
+    selectSection(sectionId) {
+      this.$emit('select-section', sectionId);
+    },
+    sectionsChanged({ sections, id }) {
+      this.$emit('sections-changed', {
+        sections,
+        id
+      });
+    }
+  }
+};
+</script>
diff --git a/src/plugins/notebook/components/sidebar.scss b/src/plugins/notebook/components/sidebar.scss
index e5c8a8cd001..b3dacc62fb1 100644
--- a/src/plugins/notebook/components/sidebar.scss
+++ b/src/plugins/notebook/components/sidebar.scss
@@ -1,119 +1,94 @@
 .c-sidebar {
-    @include userSelectNone();
+  @include userSelectNone();
+  background: $sideBarBg;
+  display: flex;
+  justify-content: stretch;
+  max-width: 600px;
+
+  &.c-drawer--push.is-expanded {
+    margin-right: $interiorMargin;
+    width: 30%;
+  }
+
+  &.c-drawer--overlays.is-expanded {
+    width: 95%;
+  }
+
+  &__pane {
     background: $sideBarBg;
     display: flex;
-    justify-content: stretch;
-    max-width: 300px;
+    flex: 1 1 50%;
+    flex-direction: column;
 
-    &.c-drawer--push.is-expanded {
-        margin-right: $interiorMargin;
-        width: 50%;
+    + * {
+      margin-left: $interiorMarginSm;
     }
 
-    &.c-drawer--overlays.is-expanded {
-        width: 95%;
+    > * + * {
+      // Add margin-top to first and second level children
+      margin-top: $interiorMargin;
     }
+  }
 
-    > * {
-        // Hardcoded for two columns
-        background: $sideBarBg;
-        display: flex;
-        flex: 1 1 50%;
-        flex-direction: column;
+  &__right-edge {
+    flex: 0 0 auto;
+    padding: $interiorMarginSm;
+  }
 
-        + * {
-            margin-left: $interiorMarginSm;
-        }
-
-        > * + * {
-            // Add margin-top to first and second level children
-            margin-top: $interiorMargin;
-        }
-    }
-
-    &__pane {
-        > * + * { margin-top: $interiorMargin; }
-    }
-
-    &__header-w {
-        // Wraps header, used for page pane with collapse button
-        display: flex;
-        flex: 0 0 auto;
-        background: $sideBarHeaderBg;
-        align-items: center;
-
-        .c-icon-button {
-            font-size: 0.8em;
-            color: $colorBodyFg;
-        }
-    }
-
-    &__header {
-        color: $sideBarHeaderFg;
-        display: flex;
-        flex: 1 1 auto;
-        padding: $interiorMargin;
-        text-transform: uppercase;
+  &__header-w {
+    // Wraps header, used for page pane with collapse buttons
+    display: flex;
+    flex: 0 0 auto;
+    background: $sideBarHeaderBg;
+    align-items: center;
+  }
 
-        > * {
-            @include ellipsize();
-        }
+  &__header {
+    color: $sideBarHeaderFg;
+    display: flex;
+    align-items: center;
+    flex: 1 1 auto;
+    padding: $interiorMarginSm $interiorMargin;
+    text-transform: uppercase;
+
+    &-label {
+      @include ellipsize();
+      flex: 1 1 auto;
     }
+  }
 
-    &__contents-and-controls {
-        // Encloses pane buttons and contents elements
-        display: flex;
-        flex-direction: column;
-        flex: 1 1 auto;
-
-        > * {
-            margin: auto $interiorMargin $interiorMargin $interiorMargin;
-
-            &:first-child {
-                border-bottom: 1px solid $colorInteriorBorder;
-                flex: 0 0 auto;
-            }
+  &__contents-and-controls {
+    // Encloses pane buttons and contents elements
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
 
-            + * {
-                margin-top: $interiorMargin;
-            }
-        }
+    > * + * {
+      margin-top: $interiorMargin;
     }
-
-    &__contents {
-        flex: 1 1 auto;
-        overflow-x: hidden;
-        overflow-y: auto;
-        padding: auto $interiorMargin;
+  }
+
+  &__contents {
+    flex: 1 1 auto;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: auto $interiorMargin;
+  }
+
+  .c-list__item {
+    > * + * {
+      margin-left: $interiorMargin;
     }
 
-    .c-list-button {
-        .c-button {
-            font-size: 0.8em;
-        }
+    &__name {
+      flex: 1 1 auto;
     }
 
-    .c-list__item {
-        @include hover() {
-            [class*="__menu-indicator"] {
-                opacity: 0.7;
-                transition: $transIn;
-            }
-        }
-
-        > * + * {
-            margin-left: $interiorMargin;
-        }
-
-        &__name {
-            flex: 0 1 auto;
-        }
-
-        &__menu-indicator {
-            flex: 0 0 auto;
-            font-size: 0.8em;
-            opacity: 0;
-            transition: $transOut;
-        }
+    &__menu-indicator {
+      // Not sure this is being used
+      flex: 0 0 auto;
+      font-size: 0.8em;
+      opacity: 0;
     }
+  }
 }
diff --git a/src/plugins/notebook/components/snapshot-template.html b/src/plugins/notebook/components/snapshot-template.html
index 4b2d44d111a..8f9fd96fca3 100644
--- a/src/plugins/notebook/components/snapshot-template.html
+++ b/src/plugins/notebook/components/snapshot-template.html
@@ -1,48 +1,42 @@
 <div class="c-notebook-snapshot">
-    <!-- parent container sets up this for flex column layout -->
-    <div class="c-notebook-snapshot__header l-browse-bar">
-        <div class="l-browse-bar__start">
-            <div class="l-browse-bar__object-name--w">
-                <span class="c-object-label l-browse-bar__object-name"
-                >
-                    <span class="c-object-label__type-icon"
-                          v-bind:class="cssClass"
-                    ></span>
-                    <span class="c-object-label__name">{{ name }}</span>
-                </span>
-            </div>
-        </div>
-
-        <div class="l-browse-bar__end">
-            <div class="l-browse-bar__snapshot-datetime">
-                SNAPSHOT {{ createdOn }}
-            </div>
-            <span class="c-button-set c-button-set--strip-h">
-                <button 
-                    class="c-button icon-download"
-                    title="Export This View's Data as PNG"
-                    @click="exportImage('png')"
-                >
-                    <span class="c-button__label">PNG</span>
-                </button>
-                <button 
-                    class="c-button"
-                    title="Export This View's Data as JPG"
-                    @click="exportImage('jpg')"
-                >
-                    <span class="c-button__label">JPG</span>
-                </button>
-            </span>
-            <a class="l-browse-bar__annotate-button c-button icon-pencil" title="Annotate" @click="annotateSnapshot">
-                <span class="title-label">Annotate</span>
-            </a>
-        </div>
+  <!-- parent container sets up this for flex column layout -->
+  <div class="c-notebook-snapshot__header l-browse-bar">
+    <div class="l-browse-bar__start">
+      <div class="l-browse-bar__object-name--w">
+        <span class="c-object-label l-browse-bar__object-name">
+          <span class="c-object-label__type-icon" v-bind:class="cssClass"></span>
+          <span class="c-object-label__name">{{ name }}</span>
+        </span>
+      </div>
     </div>
 
-    <div
-        ref="snapshot-image"
-        class="c-notebook-snapshot__image"
-        :style="{ backgroundImage: 'url(' + src + ')' }"
-    >
+    <div class="l-browse-bar__end">
+      <div class="l-browse-bar__snapshot-datetime">SNAPSHOT {{ createdOn }}</div>
+      <span class="c-button-set c-button-set--strip-h">
+        <button
+          class="c-button icon-download"
+          title="Export This View's Data as PNG"
+          @click="exportImage('png')"
+        >
+          <span class="c-button__label">PNG</span>
+        </button>
+        <button class="c-button" title="Export This View's Data as JPG" @click="exportImage('jpg')">
+          <span class="c-button__label">JPG</span>
+        </button>
+      </span>
+      <a
+        class="l-browse-bar__annotate-button c-button icon-pencil"
+        title="Annotate"
+        @click="annotateSnapshot"
+      >
+        <span class="title-label">Annotate</span>
+      </a>
     </div>
+  </div>
+
+  <div
+    ref="snapshot-image"
+    class="c-notebook-snapshot__image"
+    :style="{ backgroundImage: 'url(' + src + ')' }"
+  ></div>
 </div>
diff --git a/src/plugins/notebook/monkeyPatchObjectAPIForNotebooks.js b/src/plugins/notebook/monkeyPatchObjectAPIForNotebooks.js
new file mode 100644
index 00000000000..3b46ff385ea
--- /dev/null
+++ b/src/plugins/notebook/monkeyPatchObjectAPIForNotebooks.js
@@ -0,0 +1,149 @@
+import _ from 'lodash';
+import { toRaw } from 'vue';
+
+import {
+  isAnnotationType,
+  isNotebookOrAnnotationType,
+  isNotebookType
+} from './notebook-constants.js';
+
+export default function (openmct) {
+  const apiSave = openmct.objects.save.bind(openmct.objects);
+
+  openmct.objects.save = async (domainObject) => {
+    if (!isNotebookOrAnnotationType(domainObject)) {
+      return apiSave(domainObject);
+    }
+
+    const isNewMutable = !domainObject.isMutable;
+    const localMutable = openmct.objects.toMutable(domainObject);
+    let result;
+
+    try {
+      result = await apiSave(localMutable);
+    } catch (error) {
+      if (error instanceof openmct.objects.errors.Conflict) {
+        result = await resolveConflicts(domainObject, localMutable, openmct);
+      } else {
+        result = Promise.reject(error);
+      }
+    } finally {
+      if (isNewMutable) {
+        openmct.objects.destroyMutable(localMutable);
+      }
+    }
+
+    return result;
+  };
+}
+
+function resolveConflicts(domainObject, localMutable, openmct) {
+  if (isNotebookType(domainObject)) {
+    return resolveNotebookEntryConflicts(localMutable, openmct);
+  } else if (isAnnotationType(domainObject)) {
+    return resolveNotebookTagConflicts(localMutable, openmct);
+  }
+}
+
+async function resolveNotebookTagConflicts(localAnnotation, openmct) {
+  const localClonedAnnotation = structuredClone(toRaw(localAnnotation));
+  const remoteMutable = await openmct.objects.getMutable(localClonedAnnotation.identifier);
+
+  // should only be one annotation per targetID, entryID, and tag; so for sanity, ensure we have the
+  // same targetID, entryID, and tags for this conflict
+  if (!_.isEqual(remoteMutable.tags, localClonedAnnotation.tags)) {
+    throw new Error("Conflict on annotation's tag has different tags than remote");
+  }
+
+  localClonedAnnotation.targets.forEach((target) => {
+    const targetKey = target.keyString;
+
+    const remoteMutableTarget = remoteMutable.targets.find((remoteTarget) => {
+      return remoteTarget.keyString === targetKey;
+    });
+    if (!remoteMutableTarget) {
+      throw new Error(`Conflict on annotation's target is missing ${targetKey}`);
+    }
+    const localMutableTarget = localClonedAnnotation.targets.find((localTarget) => {
+      return localTarget.keyString === targetKey;
+    });
+
+    if (remoteMutableTarget.entryId !== localMutableTarget.entryId) {
+      throw new Error(
+        `Conflict on annotation's entryID ${remoteMutableTarget.entryId} has a different entry Id ${localMutableTarget.entryId}`
+      );
+    }
+  });
+
+  if (remoteMutable._deleted && remoteMutable._deleted !== localClonedAnnotation._deleted) {
+    // not deleting wins 😘
+    openmct.objects.mutate(remoteMutable, '_deleted', false);
+  }
+
+  openmct.objects.destroyMutable(remoteMutable);
+
+  return true;
+}
+
+async function resolveNotebookEntryConflicts(localMutable, openmct) {
+  if (localMutable.configuration.entries) {
+    const FORCE_REMOTE = true;
+    const localEntries = structuredClone(toRaw(localMutable.configuration.entries));
+    const remoteObject = await openmct.objects.get(
+      localMutable.identifier,
+      undefined,
+      FORCE_REMOTE
+    );
+
+    return applyLocalEntries(remoteObject, localEntries, openmct);
+  }
+
+  return true;
+}
+
+function applyLocalEntries(remoteObject, entries, openmct) {
+  let shouldSave = false;
+
+  Object.entries(entries).forEach(([sectionKey, pagesInSection]) => {
+    Object.entries(pagesInSection).forEach(([pageKey, localEntries]) => {
+      const remoteEntries = remoteObject.configuration.entries[sectionKey][pageKey];
+      const mergedEntries = [].concat(remoteEntries);
+      let shouldMutate = false;
+
+      const locallyAddedEntries = _.differenceBy(localEntries, remoteEntries, 'id');
+      const locallyModifiedEntries = _.differenceWith(
+        localEntries,
+        remoteEntries,
+        (localEntry, remoteEntry) => {
+          return localEntry.id === remoteEntry.id && localEntry.text === remoteEntry.text;
+        }
+      );
+
+      locallyAddedEntries.forEach((localEntry) => {
+        mergedEntries.push(localEntry);
+        shouldMutate = true;
+      });
+
+      locallyModifiedEntries.forEach((locallyModifiedEntry) => {
+        let mergedEntry = mergedEntries.find((entry) => entry.id === locallyModifiedEntry.id);
+        if (mergedEntry !== undefined && locallyModifiedEntry.text.match(/\S/)) {
+          mergedEntry.text = locallyModifiedEntry.text;
+          shouldMutate = true;
+        }
+      });
+
+      if (shouldMutate) {
+        shouldSave = true;
+        openmct.objects.mutate(
+          remoteObject,
+          `configuration.entries.${sectionKey}.${pageKey}`,
+          mergedEntries
+        );
+      }
+    });
+  });
+
+  if (shouldSave) {
+    return openmct.objects.save(remoteObject);
+  }
+}
diff --git a/src/plugins/notebook/notebook-constants.js b/src/plugins/notebook/notebook-constants.js
index d5163f797b0..bfd01cabdcf 100644
--- a/src/plugins/notebook/notebook-constants.js
+++ b/src/plugins/notebook/notebook-constants.js
@@ -1,5 +1,26 @@
 export const NOTEBOOK_TYPE = 'notebook';
+export const RESTRICTED_NOTEBOOK_TYPE = 'restricted-notebook';
+export const ANNOTATION_TYPE = 'annotation';
 export const EVENT_SNAPSHOTS_UPDATED = 'SNAPSHOTS_UPDATED';
 export const NOTEBOOK_DEFAULT = 'DEFAULT';
 export const NOTEBOOK_SNAPSHOT = 'SNAPSHOT';
 export const NOTEBOOK_VIEW_TYPE = 'notebook-vue';
+export const RESTRICTED_NOTEBOOK_VIEW_TYPE = 'restricted-notebook-vue';
+export const NOTEBOOK_BASE_INSTALLED = '_NOTEBOOK_BASE_FUNCTIONALITY_INSTALLED';
+
+// these only deals with constants, figured this could skip going into a utils file
+export function isNotebookOrAnnotationType(domainObject) {
+  return isNotebookType(domainObject) || isAnnotationType(domainObject);
+}
+
+export function isNotebookType(domainObject) {
+  return [NOTEBOOK_TYPE, RESTRICTED_NOTEBOOK_TYPE].includes(domainObject.type);
+}
+
+export function isAnnotationType(domainObject) {
+  return [ANNOTATION_TYPE].includes(domainObject.type);
+}
+
+export function isNotebookViewType(view) {
+  return [NOTEBOOK_VIEW_TYPE, RESTRICTED_NOTEBOOK_VIEW_TYPE].includes(view);
+}
diff --git a/src/plugins/notebook/plugin.js b/src/plugins/notebook/plugin.js
index 3ec561a1c12..1d7cc96e77a 100644
--- a/src/plugins/notebook/plugin.js
+++ b/src/plugins/notebook/plugin.js
@@ -1,169 +1,146 @@
-import CopyToNotebookAction from './actions/CopyToNotebookAction';
-import Notebook from './components/Notebook.vue';
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { notebookImageMigration } from '../notebook/utils/notebook-migration.js';
+import CopyToNotebookAction from './actions/CopyToNotebookAction.js';
+import ExportNotebookAsTextAction from './actions/ExportNotebookAsTextAction.js';
 import NotebookSnapshotIndicator from './components/NotebookSnapshotIndicator.vue';
-import SnapshotContainer from './snapshot-container';
-
-import { notebookImageMigration } from '../notebook/utils/notebook-migration';
-import { NOTEBOOK_TYPE } from './notebook-constants';
-
-import Vue from 'vue';
-
-export default function NotebookPlugin() {
-    return function install(openmct) {
-        if (openmct._NOTEBOOK_PLUGIN_INSTALLED) {
-            return;
-        } else {
-            openmct._NOTEBOOK_PLUGIN_INSTALLED = true;
-        }
-
-        openmct.actions.register(new CopyToNotebookAction(openmct));
-
-        const notebookType = {
-            name: 'Notebook',
-            description: 'Create and save timestamped notes with embedded object snapshots.',
-            creatable: true,
-            cssClass: 'icon-notebook',
-            initialize: domainObject => {
-                domainObject.configuration = {
-                    defaultSort: 'oldest',
-                    entries: {},
-                    pageTitle: 'Page',
-                    sections: [],
-                    sectionTitle: 'Section',
-                    type: 'General'
-                };
-            },
-            form: [
-                {
-                    key: 'defaultSort',
-                    name: 'Entry Sorting',
-                    control: 'select',
-                    options: [
-                        {
-                            name: 'Newest First',
-                            value: "newest"
-                        },
-                        {
-                            name: 'Oldest First',
-                            value: "oldest"
-                        }
-                    ],
-                    cssClass: 'l-inline',
-                    property: [
-                        "configuration",
-                        "defaultSort"
-                    ]
-                },
-                {
-                    key: 'type',
-                    name: 'Note book Type',
-                    control: 'textfield',
-                    cssClass: 'l-inline',
-                    property: [
-                        "configuration",
-                        "type"
-                    ]
-                },
-                {
-                    key: 'sectionTitle',
-                    name: 'Section Title',
-                    control: 'textfield',
-                    cssClass: 'l-inline',
-                    property: [
-                        "configuration",
-                        "sectionTitle"
-                    ]
-                },
-                {
-                    key: 'pageTitle',
-                    name: 'Page Title',
-                    control: 'textfield',
-                    cssClass: 'l-inline',
-                    property: [
-                        "configuration",
-                        "pageTitle"
-                    ]
-                }
-            ]
-        };
-        openmct.types.addType(NOTEBOOK_TYPE, notebookType);
-
-        const notebookSnapshotImageType = {
-            name: 'Notebook Snapshot Image Storage',
-            description: 'Notebook Snapshot Image Storage object',
-            creatable: false,
-            initialize: domainObject => {
-                domainObject.configuration = {
-                    fullSizeImageURL: undefined,
-                    thumbnailImageURL: undefined
-                };
-            }
-        };
-        openmct.types.addType('notebookSnapshotImage', notebookSnapshotImageType);
-
-        const snapshotContainer = new SnapshotContainer(openmct);
-        const notebookSnapshotIndicator = new Vue ({
-            components: {
-                NotebookSnapshotIndicator
-            },
-            provide: {
-                openmct,
-                snapshotContainer
-            },
-            template: '<NotebookSnapshotIndicator></NotebookSnapshotIndicator>'
-        });
-        const indicator = {
-            element: notebookSnapshotIndicator.$mount().$el,
-            key: 'notebook-snapshot-indicator'
-        };
-
-        openmct.indicators.add(indicator);
-
-        openmct.objectViews.addProvider({
-            key: 'notebook-vue',
-            name: 'Notebook View',
-            cssClass: 'icon-notebook',
-            canView: function (domainObject) {
-                return domainObject.type === 'notebook';
-            },
-            view: function (domainObject) {
-                let component;
-
-                return {
-                    show(container) {
-                        component = new Vue({
-                            el: container,
-                            components: {
-                                Notebook
-                            },
-                            provide: {
-                                openmct,
-                                snapshotContainer
-                            },
-                            data() {
-                                return {
-                                    domainObject
-                                };
-                            },
-                            template: '<Notebook :domain-object="domainObject"></Notebook>'
-                        });
-                    },
-                    destroy() {
-                        component.$destroy();
-                    }
-                };
-            }
-        });
-
-        openmct.objects.addGetInterceptor({
-            appliesTo: (identifier, domainObject) => {
-                return domainObject && domainObject.type === 'notebook';
-            },
-            invoke: (identifier, domainObject) => {
-                notebookImageMigration(openmct, domainObject);
-
-                return domainObject;
-            }
-        });
-    };
+import monkeyPatchObjectAPIForNotebooks from './monkeyPatchObjectAPIForNotebooks.js';
+import {
+  NOTEBOOK_BASE_INSTALLED,
+  NOTEBOOK_TYPE,
+  NOTEBOOK_VIEW_TYPE,
+  RESTRICTED_NOTEBOOK_TYPE,
+  RESTRICTED_NOTEBOOK_VIEW_TYPE
+} from './notebook-constants.js';
+import NotebookType from './NotebookType.js';
+import NotebookViewProvider from './NotebookViewProvider.js';
+import SnapshotContainer from './snapshot-container.js';
+
+let notebookSnapshotContainer;
+export function getSnapshotContainer(openmct) {
+  if (!notebookSnapshotContainer) {
+    notebookSnapshotContainer = new SnapshotContainer(openmct);
+  }
+
+  return notebookSnapshotContainer;
+}
+
+function addLegacyNotebookGetInterceptor(openmct) {
+  openmct.objects.addGetInterceptor({
+    appliesTo: (identifier, domainObject) => {
+      return domainObject && domainObject.type === NOTEBOOK_TYPE;
+    },
+    invoke: (identifier, domainObject) => {
+      notebookImageMigration(openmct, domainObject);
+
+      return domainObject;
+    }
+  });
+}
+
+function installBaseNotebookFunctionality(openmct) {
+  // only need to do this once
+  if (openmct[NOTEBOOK_BASE_INSTALLED]) {
+    return;
+  }
+
+  const notebookSnapshotImageType = {
+    name: 'Notebook Snapshot Image Storage',
+    description: 'Notebook Snapshot Image Storage object',
+    creatable: false,
+    initialize: (domainObject) => {
+      domainObject.configuration = {
+        fullSizeImageURL: undefined,
+        thumbnailImageURL: undefined
+      };
+    }
+  };
+  openmct.types.addType('notebookSnapshotImage', notebookSnapshotImageType);
+  openmct.actions.register(new CopyToNotebookAction(openmct));
+  openmct.actions.register(new ExportNotebookAsTextAction(openmct));
+
+  const indicator = {
+    vueComponent: NotebookSnapshotIndicator,
+    key: 'notebook-snapshot-indicator',
+    priority: openmct.priority.DEFAULT
+  };
+
+  openmct.indicators.add(indicator);
+
+  monkeyPatchObjectAPIForNotebooks(openmct);
+
+  openmct[NOTEBOOK_BASE_INSTALLED] = true;
 }
+
+function NotebookPlugin(name = 'Notebook', entryUrlWhitelist = []) {
+  return function install(openmct) {
+    const icon = 'icon-notebook';
+    const description = 'Create and save timestamped notes with embedded object snapshots.';
+    const snapshotContainer = getSnapshotContainer(openmct);
+
+    addLegacyNotebookGetInterceptor(openmct);
+
+    const notebookType = new NotebookType(name, description, icon);
+    openmct.types.addType(NOTEBOOK_TYPE, notebookType);
+
+    const notebookView = new NotebookViewProvider(
+      openmct,
+      name,
+      NOTEBOOK_VIEW_TYPE,
+      NOTEBOOK_TYPE,
+      icon,
+      snapshotContainer,
+      entryUrlWhitelist
+    );
+    openmct.objectViews.addProvider(notebookView, entryUrlWhitelist);
+
+    installBaseNotebookFunctionality(openmct);
+  };
+}
+
+function RestrictedNotebookPlugin(name = 'Notebook Shift Log', entryUrlWhitelist = []) {
+  return function install(openmct) {
+    const icon = 'icon-notebook-shift-log';
+    const description =
+      'Create and save timestamped notes with embedded object snapshots with the ability to commit and lock pages.';
+    const snapshotContainer = getSnapshotContainer(openmct);
+
+    const notebookType = new NotebookType(name, description, icon);
+    openmct.types.addType(RESTRICTED_NOTEBOOK_TYPE, notebookType);
+
+    const notebookView = new NotebookViewProvider(
+      openmct,
+      name,
+      RESTRICTED_NOTEBOOK_VIEW_TYPE,
+      RESTRICTED_NOTEBOOK_TYPE,
+      icon,
+      snapshotContainer,
+      entryUrlWhitelist
+    );
+    openmct.objectViews.addProvider(notebookView, entryUrlWhitelist);
+
+    installBaseNotebookFunctionality(openmct);
+  };
+}
+
+export { NotebookPlugin, RestrictedNotebookPlugin };
diff --git a/src/plugins/notebook/pluginSpec.js b/src/plugins/notebook/pluginSpec.js
index 1becd1cfd54..bbe442acd62 100644
--- a/src/plugins/notebook/pluginSpec.js
+++ b/src/plugins/notebook/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,380 +20,411 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import { createOpenMct, createMouseEvent, resetApplicationState } from 'utils/testing';
-import notebookPlugin from './plugin';
-import Vue from 'vue';
-
-describe("Notebook plugin:", () => {
-    let openmct;
-    let notebookDefinition;
-    let element;
-    let child;
-    let appHolder;
-    let objectProviderObserver;
-
-    let notebookDomainObject;
-
-    beforeEach((done) => {
-        notebookDomainObject = {
-            identifier: {
-                key: 'notebook',
-                namespace: 'test-namespace'
+import { createMouseEvent, createOpenMct, resetApplicationState } from 'utils/testing';
+import { nextTick } from 'vue';
+
+import { NotebookPlugin } from './plugin.js';
+
+describe('Notebook plugin:', () => {
+  let openmct;
+  let notebookDefinition;
+  let element;
+  let child;
+  let appHolder;
+  let objectProviderObserver;
+
+  let notebookDomainObject;
+  let originalAnnotations;
+
+  beforeEach((done) => {
+    notebookDomainObject = {
+      identifier: {
+        key: 'notebook',
+        namespace: 'test-namespace'
+      },
+      type: 'notebook'
+    };
+
+    appHolder = document.createElement('div');
+    appHolder.style.width = '640px';
+    appHolder.style.height = '480px';
+    document.body.appendChild(appHolder);
+
+    openmct = createOpenMct();
+
+    element = document.createElement('div');
+    child = document.createElement('div');
+    element.appendChild(child);
+
+    openmct.install(NotebookPlugin());
+    originalAnnotations = openmct.annotation.getNotebookAnnotation;
+    // eslint-disable-next-line require-await
+    openmct.annotation.getNotebookAnnotation = async function () {
+      return null;
+    };
+
+    notebookDefinition = openmct.types.get('notebook').definition;
+    notebookDefinition.initialize(notebookDomainObject);
+
+    openmct.on('start', done);
+    openmct.start(appHolder);
+  });
+
+  afterEach(() => {
+    appHolder.remove();
+    openmct.annotation.getNotebookAnnotation = originalAnnotations;
+
+    return resetApplicationState(openmct);
+  });
+
+  it('has type as Notebook', () => {
+    expect(notebookDefinition.name).toEqual('Notebook');
+  });
+
+  it('is creatable', () => {
+    expect(notebookDefinition.creatable).toEqual(true);
+  });
+
+  describe('Notebook view:', () => {
+    let notebookViewProvider;
+    let notebookView;
+    let notebookViewObject;
+    let mutableNotebookObject;
+
+    beforeEach(async () => {
+      notebookViewObject = {
+        ...notebookDomainObject,
+        id: 'test-object',
+        name: 'Notebook',
+        configuration: {
+          defaultSort: 'oldest',
+          entries: {
+            'test-section-1': {
+              'test-page-1': [
+                {
+                  id: 'entry-0',
+                  createdOn: 0,
+                  text: 'First Test Entry',
+                  embeds: []
+                },
+                {
+                  id: 'entry-1',
+                  createdOn: 0,
+                  text: 'Second Test Entry',
+                  embeds: []
+                }
+              ]
+            }
+          },
+          pageTitle: 'Page',
+          sections: [
+            {
+              id: 'test-section-1',
+              isDefault: false,
+              isSelected: false,
+              name: 'Test Section',
+              pages: [
+                {
+                  id: 'test-page-1',
+                  isDefault: false,
+                  isSelected: false,
+                  name: 'Test Page 1',
+                  pageTitle: 'Page'
+                },
+                {
+                  id: 'test-page-2',
+                  isDefault: false,
+                  isSelected: false,
+                  name: 'Test Page 2',
+                  pageTitle: 'Page'
+                }
+              ]
             },
-            type: 'notebook'
-        };
-
-        appHolder = document.createElement('div');
-        appHolder.style.width = '640px';
-        appHolder.style.height = '480px';
-        document.body.appendChild(appHolder);
-
-        openmct = createOpenMct();
-
-        element = document.createElement('div');
-        child = document.createElement('div');
-        element.appendChild(child);
-
-        openmct.install(notebookPlugin());
-
-        notebookDefinition = openmct.types.get('notebook').definition;
-        notebookDefinition.initialize(notebookDomainObject);
-
-        openmct.on('start', done);
-        openmct.start(appHolder);
+            {
+              id: 'test-section-2',
+              isDefault: false,
+              isSelected: false,
+              name: 'Test Section 2',
+              pages: [
+                {
+                  id: 'test-page-3',
+                  isDefault: false,
+                  isSelected: false,
+                  name: 'Test Page 3',
+                  pageTitle: 'Page'
+                }
+              ]
+            }
+          ],
+          sectionTitle: 'Section',
+          type: 'General'
+        }
+      };
+      const testObjectProvider = jasmine.createSpyObj('testObjectProvider', [
+        'get',
+        'create',
+        'update',
+        'observe'
+      ]);
+
+      openmct.editor = {};
+      openmct.editor.isEditing = () => false;
+
+      const applicableViews = openmct.objectViews.get(notebookViewObject, [notebookViewObject]);
+      notebookViewProvider = applicableViews.find(
+        (viewProvider) => viewProvider.key === 'notebook-vue'
+      );
+
+      testObjectProvider.get.and.returnValue(Promise.resolve(notebookViewObject));
+      testObjectProvider.create.and.returnValue(Promise.resolve(notebookViewObject));
+      openmct.objects.addProvider('test-namespace', testObjectProvider);
+      testObjectProvider.observe.and.returnValue(() => {});
+      testObjectProvider.create.and.returnValue(Promise.resolve(true));
+      testObjectProvider.update.and.returnValue(Promise.resolve(true));
+
+      const mutableObject = await openmct.objects.getMutable(notebookViewObject.identifier);
+      mutableNotebookObject = mutableObject;
+      objectProviderObserver = testObjectProvider.observe.calls.mostRecent().args[1];
+
+      notebookView = notebookViewProvider.view(mutableNotebookObject, [mutableNotebookObject]);
+      notebookView.show(child);
+
+      await nextTick();
     });
 
     afterEach(() => {
-        appHolder.remove();
-
-        return resetApplicationState(openmct);
+      notebookView.destroy();
+      openmct.objects.destroyMutable(mutableNotebookObject);
     });
 
-    it("has type as Notebook", () => {
-        expect(notebookDefinition.name).toEqual('Notebook');
+    it('provides notebook view', () => {
+      expect(notebookViewProvider).toBeDefined();
     });
 
-    it("is creatable", () => {
-        expect(notebookDefinition.creatable).toEqual(true);
+    it('renders notebook element', () => {
+      const notebookElement = element.querySelectorAll('.c-notebook');
+      expect(notebookElement.length).toBe(1);
     });
 
-    describe("Notebook view:", () => {
-        let notebookViewProvider;
-        let notebookView;
-        let notebookViewObject;
-        let mutableNotebookObject;
-
-        beforeEach(() => {
-            notebookViewObject = {
-                ...notebookDomainObject,
-                id: "test-object",
-                name: 'Notebook',
-                configuration: {
-                    defaultSort: 'oldest',
-                    entries: {
-                        "test-section-1": {
-                            "test-page-1": [{
-                                "id": "entry-0",
-                                "createdOn": 0,
-                                "text": "First Test Entry",
-                                "embeds": []
-                            }, {
-                                "id": "entry-1",
-                                "createdOn": 0,
-                                "text": "Second Test Entry",
-                                "embeds": []
-                            }]
-                        }
-                    },
-                    pageTitle: 'Page',
-                    sections: [{
-                        "id": "test-section-1",
-                        "isDefault": false,
-                        "isSelected": false,
-                        "name": "Test Section",
-                        "pages": [{
-                            "id": "test-page-1",
-                            "isDefault": false,
-                            "isSelected": false,
-                            "name": "Test Page 1",
-                            "pageTitle": "Page"
-                        }, {
-                            "id": "test-page-2",
-                            "isDefault": false,
-                            "isSelected": false,
-                            "name": "Test Page 2",
-                            "pageTitle": "Page"
-                        }]
-                    }, {
-                        "id": "test-section-2",
-                        "isDefault": false,
-                        "isSelected": false,
-                        "name": "Test Section 2",
-                        "pages": [{
-                            "id": "test-page-3",
-                            "isDefault": false,
-                            "isSelected": false,
-                            "name": "Test Page 3",
-                            "pageTitle": "Page"
-                        }]
-                    }],
-                    sectionTitle: 'Section',
-                    type: 'General'
-                }
-            };
-            const testObjectProvider = jasmine.createSpyObj('testObjectProvider', [
-                'get',
-                'create',
-                'update',
-                'observe'
-            ]);
+    it('renders major elements', () => {
+      const notebookElement = element.querySelector('.c-notebook');
+      const searchElement = notebookElement.querySelector('.c-search');
+      const sidebarElement = notebookElement.querySelector('.c-sidebar');
+      const pageViewElement = notebookElement.querySelector('.c-notebook__page-view');
+      const hasMajorElements = Boolean(searchElement && sidebarElement && pageViewElement);
 
-            const applicableViews = openmct.objectViews.get(notebookViewObject, [notebookViewObject]);
-            notebookViewProvider = applicableViews.find(viewProvider => viewProvider.key === 'notebook-vue');
+      expect(hasMajorElements).toBe(true);
+    });
 
-            testObjectProvider.get.and.returnValue(Promise.resolve(notebookViewObject));
-            openmct.objects.addProvider('test-namespace', testObjectProvider);
-            testObjectProvider.observe.and.returnValue(() => {});
+    it('renders a row for each entry', () => {
+      const notebookEntryElements = element.querySelectorAll('.c-notebook__entry');
+      const firstEntryText = getEntryText(0);
+      expect(notebookEntryElements.length).toBe(2);
+      expect(firstEntryText.innerText.trim()).toBe('First Test Entry');
+    });
 
-            return openmct.objects.getMutable(notebookViewObject.identifier).then((mutableObject) => {
-                mutableNotebookObject = mutableObject;
-                objectProviderObserver = testObjectProvider.observe.calls.mostRecent().args[1];
+    describe('synchronization', () => {
+      let objectCloneToSyncFrom;
 
-                notebookView = notebookViewProvider.view(mutableNotebookObject);
-                notebookView.show(child);
+      beforeEach(() => {
+        objectCloneToSyncFrom = structuredClone(notebookViewObject);
+        objectCloneToSyncFrom.persisted = notebookViewObject.modified + 1;
+      });
 
-                return Vue.nextTick();
-            });
+      it('updates an entry when another user modifies it', () => {
+        expect(getEntryText(0).innerText.trim()).toBe('First Test Entry');
+        objectCloneToSyncFrom.configuration.entries['test-section-1']['test-page-1'][0].text =
+          'Modified entry text';
+        objectProviderObserver(objectCloneToSyncFrom);
 
+        return nextTick().then(() => {
+          expect(getEntryText(0).innerText.trim()).toBe('Modified entry text');
         });
-
-        afterEach(() => {
-            notebookView.destroy();
-            openmct.objects.destroyMutable(mutableNotebookObject);
+      });
+
+      it('shows new entry when another user adds one', () => {
+        expect(allNotebookEntryElements().length).toBe(2);
+        objectCloneToSyncFrom.configuration.entries['test-section-1']['test-page-1'].push({
+          id: 'entry-3',
+          createdOn: 0,
+          text: 'Third Test Entry',
+          embeds: []
         });
+        objectProviderObserver(objectCloneToSyncFrom);
 
-        it("provides notebook view", () => {
-            expect(notebookViewProvider).toBeDefined();
+        return nextTick().then(() => {
+          expect(allNotebookEntryElements().length).toBe(3);
         });
-
-        it("renders notebook element", () => {
-            const notebookElement = element.querySelectorAll('.c-notebook');
-            expect(notebookElement.length).toBe(1);
+      });
+      it('removes an entry when another user removes one', () => {
+        expect(allNotebookEntryElements().length).toBe(2);
+        let entries = objectCloneToSyncFrom.configuration.entries['test-section-1']['test-page-1'];
+        objectCloneToSyncFrom.configuration.entries['test-section-1']['test-page-1'] =
+          entries.splice(0, 1);
+        objectProviderObserver(objectCloneToSyncFrom);
+
+        return nextTick().then(() => {
+          expect(allNotebookEntryElements().length).toBe(1);
         });
+      });
+
+      xit('updates the notebook when a user adds a page', async () => {
+        const newPage = {
+          id: 'test-page-4',
+          isDefault: false,
+          isSelected: false,
+          name: 'Test Page 4',
+          pageTitle: 'Page'
+        };
 
-        it("renders major elements", () => {
-            const notebookElement = element.querySelector('.c-notebook');
-            const searchElement = notebookElement.querySelector('.c-search');
-            const sidebarElement = notebookElement.querySelector('.c-sidebar');
-            const pageViewElement = notebookElement.querySelector('.c-notebook__page-view');
-            const hasMajorElements = Boolean(searchElement && sidebarElement && pageViewElement);
+        expect(allNotebookPageElements().length).toBe(2);
+        objectCloneToSyncFrom.configuration.sections[0].pages.push(newPage);
+        objectProviderObserver(objectCloneToSyncFrom);
+
+        await nextTick();
+        expect(allNotebookPageElements().length).toBe(3);
+      });
+
+      xit('updates the notebook when a user removes a page', async () => {
+        expect(allNotebookPageElements().length).toBe(2);
+        objectCloneToSyncFrom.configuration.sections[0].pages.splice(0, 1);
+        objectProviderObserver(objectCloneToSyncFrom);
+
+        await nextTick();
+        expect(allNotebookPageElements().length).toBe(1);
+      });
+
+      xit('updates the notebook when a user adds a section', () => {
+        const newSection = {
+          id: 'test-section-3',
+          isDefault: false,
+          isSelected: false,
+          name: 'Test Section 3',
+          pages: [
+            {
+              id: 'test-page-4',
+              isDefault: false,
+              isSelected: false,
+              name: 'Test Page 4',
+              pageTitle: 'Page'
+            }
+          ]
+        };
 
-            expect(hasMajorElements).toBe(true);
-        });
+        expect(allNotebookSectionElements().length).toBe(2);
+        objectCloneToSyncFrom.configuration.sections.push(newSection);
+        objectProviderObserver(objectCloneToSyncFrom);
 
-        it("renders a row for each entry", () => {
-            const notebookEntryElements = element.querySelectorAll('.c-notebook__entry');
-            const firstEntryText = getEntryText(0);
-            expect(notebookEntryElements.length).toBe(2);
-            expect(firstEntryText.innerText).toBe('First Test Entry');
+        return nextTick().then(() => {
+          expect(allNotebookSectionElements().length).toBe(3);
         });
+      });
 
-        describe("synchronization", () => {
-
-            it("updates an entry when another user modifies it", () => {
-                expect(getEntryText(0).innerText).toBe("First Test Entry");
-                notebookViewObject.configuration.entries["test-section-1"]["test-page-1"][0].text = "Modified entry text";
-                objectProviderObserver(notebookViewObject);
-
-                return Vue.nextTick().then(() => {
-                    expect(getEntryText(0).innerText).toBe("Modified entry text");
-                });
-            });
-
-            it("shows new entry when another user adds one", () => {
-                expect(allNotebookEntryElements().length).toBe(2);
-                notebookViewObject.configuration.entries["test-section-1"]["test-page-1"].push({
-                    "id": "entry-3",
-                    "createdOn": 0,
-                    "text": "Third Test Entry",
-                    "embeds": []
-                });
-                objectProviderObserver(notebookViewObject);
-
-                return Vue.nextTick().then(() => {
-                    expect(allNotebookEntryElements().length).toBe(3);
-                });
-            });
-            it("removes an entry when another user removes one", () => {
-                expect(allNotebookEntryElements().length).toBe(2);
-                let entries = notebookViewObject.configuration.entries["test-section-1"]["test-page-1"];
-                notebookViewObject.configuration.entries["test-section-1"]["test-page-1"] = entries.splice(0, 1);
-                objectProviderObserver(notebookViewObject);
-
-                return Vue.nextTick().then(() => {
-                    expect(allNotebookEntryElements().length).toBe(1);
-                });
-            });
-
-            it("updates the notebook when a user adds a page", () => {
-                const newPage = {
-                    "id": "test-page-4",
-                    "isDefault": false,
-                    "isSelected": false,
-                    "name": "Test Page 4",
-                    "pageTitle": "Page"
-                };
-
-                expect(allNotebookPageElements().length).toBe(2);
-                notebookViewObject.configuration.sections[0].pages.push(newPage);
-                objectProviderObserver(notebookViewObject);
-
-                return Vue.nextTick().then(() => {
-                    expect(allNotebookPageElements().length).toBe(3);
-                });
-
-            });
-
-            it("updates the notebook when a user removes a page", () => {
-                expect(allNotebookPageElements().length).toBe(2);
-                notebookViewObject.configuration.sections[0].pages.splice(0, 1);
-                objectProviderObserver(notebookViewObject);
-
-                return Vue.nextTick().then(() => {
-                    expect(allNotebookPageElements().length).toBe(1);
-                });
-            });
-
-            it("updates the notebook when a user adds a section", () => {
-                const newSection = {
-                    "id": "test-section-3",
-                    "isDefault": false,
-                    "isSelected": false,
-                    "name": "Test Section 3",
-                    "pages": [{
-                        "id": "test-page-4",
-                        "isDefault": false,
-                        "isSelected": false,
-                        "name": "Test Page 4",
-                        "pageTitle": "Page"
-                    }]
-                };
-
-                expect(allNotebookSectionElements().length).toBe(2);
-                notebookViewObject.configuration.sections.push(newSection);
-                objectProviderObserver(notebookViewObject);
-
-                return Vue.nextTick().then(() => {
-                    expect(allNotebookSectionElements().length).toBe(3);
-                });
-            });
-
-            it("updates the notebook when a user removes a section", () => {
-                expect(allNotebookSectionElements().length).toBe(2);
-                notebookViewObject.configuration.sections.splice(0, 1);
-                objectProviderObserver(notebookViewObject);
-
-                return Vue.nextTick().then(() => {
-                    expect(allNotebookSectionElements().length).toBe(1);
-                });
-            });
+      xit('updates the notebook when a user removes a section', () => {
+        expect(allNotebookSectionElements().length).toBe(2);
+        objectCloneToSyncFrom.configuration.sections.splice(0, 1);
+        objectProviderObserver(objectCloneToSyncFrom);
+
+        return nextTick().then(() => {
+          expect(allNotebookSectionElements().length).toBe(1);
         });
+      });
     });
+  });
 
-    describe("Notebook Snapshots view:", () => {
-        let snapshotIndicator;
-        let drawerElement;
-
-        function clickSnapshotIndicator() {
-            const indicator = element.querySelector('.icon-camera');
-            const button = indicator.querySelector('button');
-            const clickEvent = createMouseEvent('click');
+  describe('Notebook Snapshots view:', () => {
+    let snapshotIndicator;
+    let drawerElement;
 
-            button.dispatchEvent(clickEvent);
-        }
+    async function clickSnapshotIndicator() {
+      const button =
+        appHolder.querySelector('[aria-label="Show Snapshots"]') ??
+        appHolder.querySelector('[aria-label="Hide Snapshots"]');
+      const clickEvent = createMouseEvent('click');
 
-        beforeEach(() => {
-            snapshotIndicator = openmct.indicators.indicatorObjects
-                .find(indicator => indicator.key === 'notebook-snapshot-indicator').element;
+      button.dispatchEvent(clickEvent);
+      await nextTick();
+    }
 
-            element.append(snapshotIndicator);
+    beforeEach(async () => {
+      snapshotIndicator = openmct.indicators.indicatorObjects.find(
+        (indicator) => indicator.key === 'notebook-snapshot-indicator'
+      ).vueComponent;
 
-            return Vue.nextTick().then(() => {
-                drawerElement = document.querySelector('.l-shell__drawer');
-            });
-        });
+      await nextTick();
+      drawerElement = document.querySelector('.l-shell__drawer');
+    });
 
-        afterEach(() => {
-            if (drawerElement) {
-                drawerElement.classList.remove('is-expanded');
-            }
+    afterEach(() => {
+      if (drawerElement) {
+        drawerElement.classList.remove('is-expanded');
+      }
 
-            snapshotIndicator.remove();
-            snapshotIndicator = undefined;
+      snapshotIndicator = undefined;
 
-            if (drawerElement) {
-                drawerElement.remove();
-                drawerElement = undefined;
-            }
-        });
+      if (drawerElement) {
+        drawerElement.remove();
+        drawerElement = undefined;
+      }
+    });
 
-        it("has Snapshots indicator", () => {
-            const hasSnapshotIndicator = snapshotIndicator !== null && snapshotIndicator !== undefined;
-            expect(hasSnapshotIndicator).toBe(true);
-        });
+    it('has Snapshots indicator', () => {
+      const hasSnapshotIndicator = snapshotIndicator !== null && snapshotIndicator !== undefined;
+      expect(hasSnapshotIndicator).toBe(true);
+    });
 
-        it("snapshots container has class isExpanded", () => {
-            let classes = drawerElement.classList;
-            const isExpandedBefore = classes.contains('is-expanded');
+    it('snapshots container has class isExpanded', async () => {
+      let classes = drawerElement.classList;
+      const isExpandedBefore = classes.contains('is-expanded');
 
-            clickSnapshotIndicator();
-            classes = drawerElement.classList;
-            const isExpandedAfterFirstClick = classes.contains('is-expanded');
+      await clickSnapshotIndicator();
+      classes = drawerElement.classList;
+      const isExpandedAfterFirstClick = classes.contains('is-expanded');
 
-            expect(isExpandedBefore).toBeFalse();
-            expect(isExpandedAfterFirstClick).toBeTrue();
-        });
+      expect(isExpandedBefore).toBeFalse();
+      expect(isExpandedAfterFirstClick).toBeTrue();
+    });
 
-        it("snapshots container does not have class isExpanded", () => {
-            let classes = drawerElement.classList;
-            const isExpandedBefore = classes.contains('is-expanded');
+    it('snapshots container does not have class isExpanded', async () => {
+      let classes = drawerElement.classList;
+      const isExpandedBefore = classes.contains('is-expanded');
 
-            clickSnapshotIndicator();
-            classes = drawerElement.classList;
-            const isExpandedAfterFirstClick = classes.contains('is-expanded');
+      await clickSnapshotIndicator();
+      classes = drawerElement.classList;
+      const isExpandedAfterFirstClick = classes.contains('is-expanded');
 
-            clickSnapshotIndicator();
-            classes = drawerElement.classList;
-            const isExpandedAfterSecondClick = classes.contains('is-expanded');
+      await clickSnapshotIndicator();
+      classes = drawerElement.classList;
+      const isExpandedAfterSecondClick = classes.contains('is-expanded');
 
-            expect(isExpandedBefore).toBeFalse();
-            expect(isExpandedAfterFirstClick).toBeTrue();
-            expect(isExpandedAfterSecondClick).toBeFalse();
-        });
+      expect(isExpandedBefore).toBeFalse();
+      expect(isExpandedAfterFirstClick).toBeTrue();
+      expect(isExpandedAfterSecondClick).toBeFalse();
+    });
 
-        it("show notebook snapshots container text", () => {
-            clickSnapshotIndicator();
+    it('show notebook snapshots container text', async () => {
+      await clickSnapshotIndicator();
 
-            const notebookSnapshots = drawerElement.querySelector('.l-browse-bar__object-name');
-            const snapshotsText = notebookSnapshots.textContent.trim();
+      const notebookSnapshots = drawerElement.querySelector('.l-browse-bar__object-name');
+      const snapshotsText = notebookSnapshots.textContent.trim();
 
-            expect(snapshotsText).toBe('Notebook Snapshots');
-        });
+      expect(snapshotsText).toBe('Notebook Snapshots');
     });
+  });
 
-    function getEntryText(entryNumber) {
-        return element.querySelectorAll('.c-notebook__entry .c-ne__text')[entryNumber];
-    }
+  function getEntryText(entryNumber) {
+    return element.querySelectorAll('.c-notebook__entry .c-ne__text')[entryNumber];
+  }
 
-    function allNotebookEntryElements() {
-        return element.querySelectorAll('.c-notebook__entry');
-    }
+  function allNotebookEntryElements() {
+    return element.querySelectorAll('.c-notebook__entry');
+  }
 
-    function allNotebookSectionElements() {
-        return element.querySelectorAll('.js-sidebar-sections .js-list__item');
-    }
+  function allNotebookSectionElements() {
+    return element.querySelectorAll('.js-sidebar-sections .js-list__item');
+  }
 
-    function allNotebookPageElements() {
-        return element.querySelectorAll('.js-sidebar-pages .js-list__item');
-    }
+  function allNotebookPageElements() {
+    return element.querySelectorAll('.js-sidebar-pages .js-list__item');
+  }
 });
diff --git a/src/plugins/notebook/snapshot-container.js b/src/plugins/notebook/snapshot-container.js
index fdca98c2297..e2ca7e531f2 100644
--- a/src/plugins/notebook/snapshot-container.js
+++ b/src/plugins/notebook/snapshot-container.js
@@ -1,83 +1,88 @@
 import EventEmitter from 'EventEmitter';
-import { EVENT_SNAPSHOTS_UPDATED } from './notebook-constants';
+
+import { EVENT_SNAPSHOTS_UPDATED } from './notebook-constants.js';
 const NOTEBOOK_SNAPSHOT_STORAGE = 'notebook-snapshot-storage';
 
 export const NOTEBOOK_SNAPSHOT_MAX_COUNT = 5;
 
 export default class SnapshotContainer extends EventEmitter {
-    constructor(openmct) {
-        super();
-
-        if (!SnapshotContainer.instance) {
-            SnapshotContainer.instance = this;
-        }
-
-        this.openmct = openmct;
+  constructor(openmct) {
+    super();
 
-        // eslint-disable-next-line
-        return SnapshotContainer.instance;
+    if (!SnapshotContainer.instance) {
+      SnapshotContainer.instance = this;
     }
 
-    addSnapshot(embedObject) {
-        const snapshots = this.getSnapshots();
-        if (snapshots.length >= NOTEBOOK_SNAPSHOT_MAX_COUNT) {
-            snapshots.pop();
-        }
+    this.openmct = openmct;
 
-        snapshots.unshift(embedObject);
+    // eslint-disable-next-line
+    return SnapshotContainer.instance;
+  }
 
-        return this.saveSnapshots(snapshots);
+  addSnapshot(notebookImageDomainObject, embedObject) {
+    const snapshots = this.getSnapshots();
+    if (snapshots.length >= NOTEBOOK_SNAPSHOT_MAX_COUNT) {
+      snapshots.pop();
     }
 
-    getSnapshot(id) {
-        const snapshots = this.getSnapshots();
+    const snapshotObject = {
+      notebookImageDomainObject,
+      embedObject
+    };
 
-        return snapshots.find(s => s.id === id);
-    }
+    snapshots.unshift(snapshotObject);
 
-    getSnapshots() {
-        const snapshots = window.localStorage.getItem(NOTEBOOK_SNAPSHOT_STORAGE) || '[]';
+    return this.saveSnapshots(snapshots);
+  }
 
-        return JSON.parse(snapshots);
-    }
+  getSnapshot(id) {
+    const snapshots = this.getSnapshots();
 
-    removeSnapshot(id) {
-        if (!id) {
-            return;
-        }
+    return snapshots.find((s) => s.embedObject.id === id);
+  }
 
-        const snapshots = this.getSnapshots();
-        const filteredsnapshots = snapshots.filter(snapshot => snapshot.id !== id);
+  getSnapshots() {
+    const snapshots = window.localStorage.getItem(NOTEBOOK_SNAPSHOT_STORAGE) || '[]';
 
-        return this.saveSnapshots(filteredsnapshots);
-    }
+    return JSON.parse(snapshots);
+  }
 
-    removeAllSnapshots() {
-        return this.saveSnapshots([]);
+  removeSnapshot(id) {
+    if (!id) {
+      return;
     }
 
-    saveSnapshots(snapshots) {
-        try {
-            window.localStorage.setItem(NOTEBOOK_SNAPSHOT_STORAGE, JSON.stringify(snapshots));
-            this.emit(EVENT_SNAPSHOTS_UPDATED, true);
+    const snapshots = this.getSnapshots();
+    const filteredsnapshots = snapshots.filter((snapshot) => snapshot.embedObject.id !== id);
 
-            return true;
-        } catch (e) {
-            const message = 'Insufficient memory in localstorage to store snapshot, please delete some snapshots and try again!';
-            this.openmct.notifications.error(message);
+    return this.saveSnapshots(filteredsnapshots);
+  }
 
-            return false;
-        }
-    }
+  removeAllSnapshots() {
+    return this.saveSnapshots([]);
+  }
+
+  saveSnapshots(snapshots) {
+    try {
+      window.localStorage.setItem(NOTEBOOK_SNAPSHOT_STORAGE, JSON.stringify(snapshots));
+      this.emit(EVENT_SNAPSHOTS_UPDATED, true);
 
-    updateSnapshot(snapshot) {
-        const snapshots = this.getSnapshots();
-        const updatedSnapshots = snapshots.map(s => {
-            return s.id === snapshot.id
-                ? snapshot
-                : s;
-        });
+      return true;
+    } catch (e) {
+      const message =
+        'Insufficient memory in localstorage to store snapshot, please delete some snapshots and try again!';
+      this.openmct.notifications.error(message);
 
-        return this.saveSnapshots(updatedSnapshots);
+      return false;
     }
+  }
+
+  updateSnapshot(snapshot) {
+    const snapshots = this.getSnapshots();
+    const updatedSnapshots = snapshots.map((s) => {
+      return s.embedObject.id === snapshot.embedObject.id ? snapshot : s;
+    });
+
+    return this.saveSnapshots(updatedSnapshots);
+  }
 }
diff --git a/src/plugins/notebook/snapshot.js b/src/plugins/notebook/snapshot.js
index fd43be5fec4..45d543132b3 100644
--- a/src/plugins/notebook/snapshot.js
+++ b/src/plugins/notebook/snapshot.js
@@ -1,109 +1,134 @@
-import { addNotebookEntry, createNewEmbed } from './utils/notebook-entries';
-import { getDefaultNotebook, getDefaultNotebookLink, setDefaultNotebook } from './utils/notebook-storage';
 import { NOTEBOOK_DEFAULT } from '@/plugins/notebook/notebook-constants';
-import { createNotebookImageDomainObject, DEFAULT_SIZE } from './utils/notebook-image';
 
-import SnapshotContainer from './snapshot-container';
-import ImageExporter from '../../exporters/ImageExporter';
+import ImageExporter from '../../exporters/ImageExporter.js';
+import SnapshotContainer from './snapshot-container.js';
+import { addNotebookEntry, createNewEmbed } from './utils/notebook-entries.js';
+import {
+  createNotebookImageDomainObject,
+  DEFAULT_SIZE,
+  saveNotebookImageDomainObject,
+  updateNamespaceOfDomainObject
+} from './utils/notebook-image.js';
+import {
+  getDefaultNotebook,
+  getDefaultNotebookLink,
+  getNotebookSectionAndPage,
+  setDefaultNotebook
+} from './utils/notebook-storage.js';
 
 export default class Snapshot {
-    constructor(openmct) {
-        this.openmct = openmct;
-        this.snapshotContainer = new SnapshotContainer(openmct);
-        this.imageExporter = new ImageExporter(openmct);
-
-        this.capture = this.capture.bind(this);
-        this._saveSnapShot = this._saveSnapShot.bind(this);
-    }
+  constructor(openmct) {
+    this.openmct = openmct;
+    this.snapshotContainer = new SnapshotContainer(openmct);
+    this.imageExporter = new ImageExporter(openmct);
+
+    this.capture = this.capture.bind(this);
+    this._saveSnapShot = this._saveSnapShot.bind(this);
+  }
+
+  capture(snapshotMeta, notebookType, domElement) {
+    const options = {
+      className: 's-status-taking-snapshot',
+      thumbnailSize: DEFAULT_SIZE
+    };
+    this.imageExporter.exportPNGtoSRC(domElement, options).then(
+      function ({ blob, thumbnail }) {
+        const reader = new window.FileReader();
+        reader.readAsDataURL(blob);
+        reader.onloadend = function () {
+          this._saveSnapShot(notebookType, reader.result, thumbnail, snapshotMeta);
+        }.bind(this);
+      }.bind(this)
+    );
+  }
+
+  /**
+   * @private
+   */
+  _saveSnapShot(notebookType, fullSizeImageURL, thumbnailImageURL, snapshotMeta) {
+    const object = createNotebookImageDomainObject(fullSizeImageURL);
+    const thumbnailImage = { src: thumbnailImageURL || '' };
+    const snapshot = {
+      fullSizeImageObjectIdentifier: object.identifier,
+      thumbnailImage
+    };
+    createNewEmbed(snapshotMeta, snapshot).then((embed) => {
+      if (notebookType === NOTEBOOK_DEFAULT) {
+        const notebookStorage = getDefaultNotebook();
 
-    capture(snapshotMeta, notebookType, domElement) {
-        const options = {
-            className: 's-status-taking-snapshot',
-            thumbnailSize: DEFAULT_SIZE
-        };
-        this.imageExporter.exportPNGtoSRC(domElement, options)
-            .then(function ({blob, thumbnail}) {
-                const reader = new window.FileReader();
-                reader.readAsDataURL(blob);
-                reader.onloadend = function () {
-                    this._saveSnapShot(notebookType, reader.result, thumbnail, snapshotMeta);
-                }.bind(this);
-            }.bind(this));
-    }
+        this._saveToDefaultNoteBook(notebookStorage, embed);
+        const notebookImageDomainObject = updateNamespaceOfDomainObject(
+          object,
+          notebookStorage.identifier.namespace
+        );
+        saveNotebookImageDomainObject(this.openmct, notebookImageDomainObject);
+      } else {
+        this._saveToNotebookSnapshots(object, embed);
+      }
+    });
+  }
+
+  /**
+   * @private
+   */
+  _saveToDefaultNoteBook(notebookStorage, embed) {
+    this.openmct.objects.get(notebookStorage.identifier).then((domainObject) => {
+      return addNotebookEntry(this.openmct, domainObject, notebookStorage, embed).then(async () => {
+        let link = notebookStorage.link;
+
+        // Backwards compatibility fix (old notebook model without link)
+        if (!link) {
+          link = await getDefaultNotebookLink(this.openmct, domainObject);
+          notebookStorage.link = link;
+          setDefaultNotebook(this.openmct, notebookStorage);
+        }
 
-    /**
-     * @private
-     */
-    _saveSnapShot(notebookType, fullSizeImageURL, thumbnailImageURL, snapshotMeta) {
-        createNotebookImageDomainObject(this.openmct, fullSizeImageURL)
-            .then(object => {
-                const thumbnailImage = { src: thumbnailImageURL || '' };
-                const snapshot = {
-                    fullSizeImageObjectIdentifier: object.identifier,
-                    thumbnailImage
-                };
-                const embed = createNewEmbed(snapshotMeta, snapshot);
-                if (notebookType === NOTEBOOK_DEFAULT) {
-                    this._saveToDefaultNoteBook(embed);
-
-                    return;
-                }
-
-                this._saveToNotebookSnapshots(embed);
-            });
-    }
+        const { section, page } = getNotebookSectionAndPage(
+          domainObject,
+          notebookStorage.defaultSectionId,
+          notebookStorage.defaultPageId
+        );
+        if (!section || !page) {
+          return;
+        }
 
-    /**
-     * @private
-     */
-    _saveToDefaultNoteBook(embed) {
-        const notebookStorage = getDefaultNotebook();
-        this.openmct.objects.get(notebookStorage.notebookMeta.identifier)
-            .then(async (domainObject) => {
-                addNotebookEntry(this.openmct, domainObject, notebookStorage, embed);
-
-                let link = notebookStorage.notebookMeta.link;
-
-                // Backwards compatibility fix (old notebook model without link)
-                if (!link) {
-                    link = await getDefaultNotebookLink(this.openmct, domainObject);
-                    notebookStorage.notebookMeta.link = link;
-                    setDefaultNotebook(this.openmct, notebookStorage);
-                }
-
-                const defaultPath = `${domainObject.name} - ${notebookStorage.section.name} - ${notebookStorage.page.name}`;
-                const msg = `Saved to Notebook ${defaultPath}`;
-                this._showNotification(msg, link);
-            });
+        const defaultPath = `${domainObject.name} - ${section.name} - ${page.name}`;
+        const msg = `Saved to Notebook ${defaultPath}`;
+        this._showNotification(msg, link);
+      });
+    });
+  }
+
+  /**
+   * @private
+   */
+  _saveToNotebookSnapshots(notebookImageDomainObject, embed) {
+    this.snapshotContainer.addSnapshot(notebookImageDomainObject, embed);
+  }
+
+  _showNotification(msg, url) {
+    const options = {
+      autoDismissTimeout: 30000
+    };
+
+    if (!this.openmct.editor.isEditing()) {
+      options.link = {
+        cssClass: '',
+        text: 'click to view',
+        onClick: this._navigateToNotebook(url)
+      };
     }
 
-    /**
-     * @private
-     */
-    _saveToNotebookSnapshots(embed) {
-        this.snapshotContainer.addSnapshot(embed);
-    }
+    this.openmct.notifications.info(msg, options);
+  }
 
-    _showNotification(msg, url) {
-        const options = {
-            autoDismissTimeout: 30000,
-            link: {
-                cssClass: '',
-                text: 'click to view',
-                onClick: this._navigateToNotebook(url)
-            }
-        };
-
-        this.openmct.notifications.info(msg, options);
+  _navigateToNotebook(url = null) {
+    if (!url) {
+      return () => {};
     }
 
-    _navigateToNotebook(url = null) {
-        if (!url) {
-            return () => {};
-        }
-
-        return () => {
-            window.location.href = window.location.origin + url;
-        };
-    }
+    return () => {
+      location.hash = url;
+    };
+  }
 }
diff --git a/src/plugins/notebook/utils/notebook-entries.js b/src/plugins/notebook/utils/notebook-entries.js
index d71514f0fdf..093af45f491 100644
--- a/src/plugins/notebook/utils/notebook-entries.js
+++ b/src/plugins/notebook/utils/notebook-entries.js
@@ -1,203 +1,318 @@
-import objectLink from '../../../ui/mixins/object-link';
+import { v4 as uuid } from 'uuid';
 
-export const DEFAULT_CLASS = 'notebook-default';
-const TIME_BOUNDS = {
-    START_BOUND: 'tc.startBound',
-    END_BOUND: 'tc.endBound',
-    START_DELTA: 'tc.startDelta',
-    END_DELTA: 'tc.endDelta'
-};
+import objectLink from '../../../ui/mixins/object-link.js';
+import {
+  createNotebookImageDomainObject,
+  getThumbnailURLFromImageUrl,
+  saveNotebookImageDomainObject
+} from './notebook-image.js';
 
-export function addEntryIntoPage(notebookStorage, entries, entry) {
-    const defaultSection = notebookStorage.section;
-    const defaultPage = notebookStorage.page;
-    if (!defaultSection || !defaultPage) {
-        return;
-    }
+async function getUsername(openmct) {
+  let username = null;
 
-    const newEntries = JSON.parse(JSON.stringify(entries));
-    let section = newEntries[defaultSection.id];
-    if (!section) {
-        newEntries[defaultSection.id] = {};
-    }
+  if (openmct.user.hasProvider()) {
+    const user = await openmct.user.getCurrentUser();
+    username = user.getName();
+  }
 
-    let page = newEntries[defaultSection.id][defaultPage.id];
-    if (!page) {
-        newEntries[defaultSection.id][defaultPage.id] = [];
-    }
-
-    newEntries[defaultSection.id][defaultPage.id].push(entry);
-
-    return newEntries;
+  return username;
 }
 
-export function getHistoricLinkInFixedMode(openmct, bounds, historicLink) {
-    if (historicLink.includes('tc.mode=fixed')) {
-        return historicLink;
-    }
+async function getActiveRole(openmct) {
+  let role = null;
+  if (openmct.user.hasProvider()) {
+    role = await openmct.user.getActiveRole?.();
+  }
 
-    openmct.time.getAllClocks().forEach(clock => {
-        if (historicLink.includes(`tc.mode=${clock.key}`)) {
-            historicLink.replace(`tc.mode=${clock.key}`, 'tc.mode=fixed');
+  return role;
+}
 
-            return;
-        }
-    });
+export const DEFAULT_CLASS = 'notebook-default';
+const TIME_BOUNDS = {
+  START_BOUND: 'tc.startBound',
+  END_BOUND: 'tc.endBound',
+  START_DELTA: 'tc.startDelta',
+  END_DELTA: 'tc.endDelta'
+};
 
-    const params = historicLink.split('&').map(param => {
-        if (param.includes(TIME_BOUNDS.START_BOUND)
-                || param.includes(TIME_BOUNDS.START_DELTA)) {
-            param = `${TIME_BOUNDS.START_BOUND}=${bounds.start}`;
-        }
+export function addEntryIntoPage(notebookStorage, entries, entry) {
+  const defaultSectionId = notebookStorage.defaultSectionId;
+  const defaultPageId = notebookStorage.defaultPageId;
+  if (!defaultSectionId || !defaultPageId) {
+    return;
+  }
+
+  const newEntries = JSON.parse(JSON.stringify(entries));
+  let section = newEntries[defaultSectionId];
+  if (!section) {
+    newEntries[defaultSectionId] = {};
+  }
+
+  let page = newEntries[defaultSectionId][defaultPageId];
+  if (!page) {
+    newEntries[defaultSectionId][defaultPageId] = [];
+  }
+
+  newEntries[defaultSectionId][defaultPageId].push(entry);
+
+  return newEntries;
+}
 
-        if (param.includes(TIME_BOUNDS.END_BOUND)
-                || param.includes(TIME_BOUNDS.END_DELTA)) {
-            param = `${TIME_BOUNDS.END_BOUND}=${bounds.end}`;
+export function selectEntry({
+  element,
+  entryId,
+  domainObject,
+  openmct,
+  onAnnotationChange,
+  notebookAnnotations
+}) {
+  const keyString = openmct.objects.makeKeyString(domainObject.identifier);
+  const targetDetails = [
+    {
+      entryId,
+      keyString
+    }
+  ];
+  const targetDomainObjects = [domainObject];
+  openmct.selection.select(
+    [
+      {
+        element,
+        context: {
+          type: 'notebook-entry-selection',
+          item: domainObject,
+          targetDetails,
+          targetDomainObjects,
+          annotations: notebookAnnotations,
+          annotationType: openmct.annotation.ANNOTATION_TYPES.NOTEBOOK,
+          onAnnotationChange
         }
-
-        return param;
-    });
-
-    return params.join('&');
+      }
+    ],
+    false
+  );
 }
 
-export function createNewEmbed(snapshotMeta, snapshot = '') {
-    const {
-        bounds,
-        link,
-        objectPath,
-        openmct
-    } = snapshotMeta;
-    const domainObject = objectPath[0];
-    const domainObjectType = openmct.types.get(domainObject.type);
+export function getHistoricLinkInFixedMode(openmct, bounds, historicLink) {
+  if (historicLink.includes('tc.mode=fixed')) {
+    return historicLink;
+  }
 
-    const cssClass = domainObjectType && domainObjectType.definition
-        ? domainObjectType.definition.cssClass
-        : 'icon-object-unknown';
-    const date = Date.now();
-    const historicLink = link
-        ? getHistoricLinkInFixedMode(openmct, bounds, link)
-        : objectLink.computed.objectLink.call({
-            objectPath,
-            openmct
-        });
-    const name = domainObject.name;
-    const type = domainObject.identifier.key;
-
-    return {
-        bounds,
-        createdOn: date,
-        cssClass,
-        domainObject,
-        historicLink,
-        id: 'embed-' + date,
-        name,
-        snapshot,
-        type
-    };
-}
+  openmct.time.getAllClocks().forEach((clock) => {
+    if (historicLink.includes(`tc.mode=${clock.key}`)) {
+      historicLink.replace(`tc.mode=${clock.key}`, 'tc.mode=fixed');
 
-export function addNotebookEntry(openmct, domainObject, notebookStorage, embed = null, entryText = '') {
-    if (!openmct || !domainObject || !notebookStorage) {
-        return;
+      return;
     }
+  });
 
-    const date = Date.now();
-    const configuration = domainObject.configuration;
-    const entries = configuration.entries || {};
+  const params = historicLink.split('&').map((param) => {
+    if (param.includes(TIME_BOUNDS.START_BOUND) || param.includes(TIME_BOUNDS.START_DELTA)) {
+      param = `${TIME_BOUNDS.START_BOUND}=${bounds.start}`;
+    }
 
-    if (!entries) {
-        return;
+    if (param.includes(TIME_BOUNDS.END_BOUND) || param.includes(TIME_BOUNDS.END_DELTA)) {
+      param = `${TIME_BOUNDS.END_BOUND}=${bounds.end}`;
     }
 
-    const embeds = embed
-        ? [embed]
-        : [];
+    return param;
+  });
 
-    const id = `entry-${date}`;
-    const entry = {
-        id,
-        createdOn: date,
-        text: entryText,
-        embeds
+  return params.join('&');
+}
+
+export function createNewImageEmbed(image, openmct, imageName = '') {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onloadend = async () => {
+      try {
+        const base64Data = reader.result;
+        const blobUrl = URL.createObjectURL(image);
+        const imageDomainObject = createNotebookImageDomainObject(base64Data);
+        await saveNotebookImageDomainObject(openmct, imageDomainObject);
+        const imageThumbnailURL = await getThumbnailURLFromImageUrl(blobUrl);
+
+        const snapshot = {
+          fullSizeImageObjectIdentifier: imageDomainObject.identifier,
+          thumbnailImage: {
+            src: imageThumbnailURL
+          }
+        };
+
+        const embedMetaData = {
+          bounds: openmct.time.bounds(),
+          link: null,
+          objectPath: null,
+          openmct,
+          userImage: true,
+          imageName
+        };
+
+        const createdEmbed = await createNewEmbed(embedMetaData, snapshot);
+        resolve(createdEmbed);
+      } catch (error) {
+        console.error(`${error.message} - unable to embed image ${imageName}`, error);
+        openmct.notifications.error(`${error.message} -- unable to embed image ${imageName}`);
+      }
     };
 
-    const newEntries = addEntryIntoPage(notebookStorage, entries, entry);
+    reader.readAsDataURL(image);
+  });
+}
 
-    addDefaultClass(domainObject, openmct);
-    openmct.objects.mutate(domainObject, 'configuration.entries', newEntries);
+export async function createNewEmbed(snapshotMeta, snapshot = '') {
+  const { bounds, link, objectPath, openmct, userImage } = snapshotMeta;
+  let name = null;
+  let type = null;
+  let cssClass = 'icon-object-unknown';
+  let domainObject = null;
+  let historicLink = null;
+  if (objectPath?.length > 0) {
+    domainObject = objectPath[0];
+    const domainObjectType = openmct.types.get(domainObject.type);
+    cssClass = domainObjectType?.definition
+      ? domainObjectType.definition.cssClass
+      : 'icon-object-unknown';
+    name = domainObject.name;
+    type = domainObject.identifier.key;
+    historicLink = link
+      ? getHistoricLinkInFixedMode(openmct, bounds, link)
+      : objectLink.computed.objectLink.call({
+          objectPath,
+          openmct
+        });
+  } else if (userImage) {
+    cssClass = 'icon-image';
+    name = snapshotMeta.imageName;
+  }
+
+  const date = openmct.time.now();
+  const createdBy = await getUsername(openmct);
+
+  return {
+    bounds,
+    createdOn: date,
+    createdBy,
+    cssClass,
+    domainObject,
+    historicLink,
+    id: 'embed-' + date,
+    name,
+    snapshot,
+    type
+  };
+}
 
-    return id;
+export async function addNotebookEntry(
+  openmct,
+  domainObject,
+  notebookStorage,
+  passedEmbeds = [],
+  entryText = ''
+) {
+  if (!openmct || !domainObject || !notebookStorage) {
+    return;
+  }
+
+  const date = openmct.time.now();
+  const configuration = domainObject.configuration;
+  const entries = configuration.entries || {};
+  // if embeds isn't an array, make it one
+  const embedsNormalized =
+    passedEmbeds && !Array.isArray(passedEmbeds) ? [passedEmbeds] : passedEmbeds;
+
+  const id = `entry-${uuid()}`;
+  const [createdBy, createdByRole] = await Promise.all([
+    getUsername(openmct),
+    getActiveRole(openmct)
+  ]);
+  const entry = {
+    id,
+    createdOn: date,
+    createdBy,
+    createdByRole,
+    text: entryText,
+    embeds: embedsNormalized
+  };
+
+  const newEntries = addEntryIntoPage(notebookStorage, entries, entry);
+
+  addDefaultClass(domainObject, openmct);
+  mutateObject(openmct, domainObject, 'configuration.entries', newEntries);
+
+  return id;
 }
 
 export function getNotebookEntries(domainObject, selectedSection, selectedPage) {
-    if (!domainObject || !selectedSection || !selectedPage) {
-        return;
-    }
+  if (!domainObject || !selectedSection || !selectedPage || !domainObject.configuration) {
+    return;
+  }
 
-    const configuration = domainObject.configuration;
-    const entries = configuration.entries || {};
+  const configuration = domainObject.configuration;
+  const entries = configuration.entries || {};
 
-    let section = entries[selectedSection.id];
-    if (!section) {
-        return;
-    }
+  let section = entries[selectedSection.id];
+  if (!section) {
+    return;
+  }
 
-    let page = entries[selectedSection.id][selectedPage.id];
-    if (!page) {
-        return;
-    }
+  let page = entries[selectedSection.id][selectedPage.id];
+  if (!page) {
+    return;
+  }
+
+  const specificEntries = entries[selectedSection.id][selectedPage.id];
 
-    return entries[selectedSection.id][selectedPage.id];
+  return specificEntries;
 }
 
 export function getEntryPosById(entryId, domainObject, selectedSection, selectedPage) {
-    if (!domainObject || !selectedSection || !selectedPage) {
-        return;
-    }
+  if (!domainObject || !selectedSection || !selectedPage) {
+    return;
+  }
 
-    const entries = getNotebookEntries(domainObject, selectedSection, selectedPage);
-    let foundId = -1;
-    entries.forEach((element, index) => {
-        if (element.id === entryId) {
-            foundId = index;
+  const entries = getNotebookEntries(domainObject, selectedSection, selectedPage);
+  let foundId = -1;
+  entries.forEach((element, index) => {
+    if (element.id === entryId) {
+      foundId = index;
 
-            return;
-        }
-    });
+      return;
+    }
+  });
 
-    return foundId;
+  return foundId;
 }
 
 export function deleteNotebookEntries(openmct, domainObject, selectedSection, selectedPage) {
-    if (!domainObject || !selectedSection) {
-        return;
-    }
+  if (!domainObject || !selectedSection) {
+    return;
+  }
 
-    const configuration = domainObject.configuration;
-    const entries = configuration.entries || {};
+  const configuration = domainObject.configuration;
+  const entries = configuration.entries || {};
 
-    // Delete entire section
-    if (!selectedPage) {
-        delete entries[selectedSection.id];
+  // Delete entire section
+  if (!selectedPage) {
+    delete entries[selectedSection.id];
 
-        return;
-    }
+    return;
+  }
 
-    let section = entries[selectedSection.id];
-    if (!section) {
-        return;
-    }
+  let section = entries[selectedSection.id];
+  if (!section) {
+    return;
+  }
 
-    delete entries[selectedSection.id][selectedPage.id];
+  delete entries[selectedSection.id][selectedPage.id];
 
-    mutateObject(openmct, domainObject, 'configuration.entries', entries);
+  mutateObject(openmct, domainObject, 'configuration.entries', entries);
 }
 
 export function mutateObject(openmct, object, key, value) {
-    openmct.objects.mutate(object, key, value);
+  openmct.objects.mutate(object, key, value);
 }
 
 function addDefaultClass(domainObject, openmct) {
-    openmct.status.set(domainObject.identifier, DEFAULT_CLASS);
+  openmct.status.set(domainObject.identifier, DEFAULT_CLASS);
 }
diff --git a/src/plugins/notebook/utils/notebook-entriesSpec.js b/src/plugins/notebook/utils/notebook-entriesSpec.js
index f2b528e7474..4d693907c75 100644
--- a/src/plugins/notebook/utils/notebook-entriesSpec.js
+++ b/src/plugins/notebook/utils/notebook-entriesSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,170 +19,217 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import * as NotebookEntries from './notebook-entries';
 import { createOpenMct, resetApplicationState } from 'utils/testing';
 
+import * as NotebookEntries from './notebook-entries.js';
+
 const notebookStorage = {
-    notebookMeta: {
-        name: 'notebook',
-        identifier: {
-            namespace: '',
-            key: 'test-notebook'
-        }
-    },
-    section: {
-        id: '03a79b6a-971c-4e56-9892-ec536332c3f0',
-        isDefault: true,
-        isSelected: true,
-        name: 'section',
-        pages: [],
-        sectionTitle: 'Section'
-    },
-    page: {
-        id: '8b548fd9-2b8a-4b02-93a9-4138e22eba00',
-        isDefault: true,
-        isSelected: true,
-        name: 'page',
-        pageTitle: 'Page'
-    }
+  name: 'notebook',
+  identifier: {
+    namespace: '',
+    key: 'test-notebook'
+  },
+  defaultSectionId: '03a79b6a-971c-4e56-9892-ec536332c3f0',
+  defaultPageId: '8b548fd9-2b8a-4b02-93a9-4138e22eba00'
 };
 
 const notebookEntries = {
-    '03a79b6a-971c-4e56-9892-ec536332c3f0': {
-        '8b548fd9-2b8a-4b02-93a9-4138e22eba00': []
-    }
+  '03a79b6a-971c-4e56-9892-ec536332c3f0': {
+    '8b548fd9-2b8a-4b02-93a9-4138e22eba00': []
+  }
 };
 
 const notebookDomainObject = {
-    identifier: {
-        key: 'notebook',
-        namespace: ''
-    },
-    type: 'notebook',
-    configuration: {
-        defaultSort: 'oldest',
-        entries: notebookEntries,
-        pageTitle: 'Page',
-        sections: [],
-        sectionTitle: 'Section',
-        type: 'General'
-    }
+  identifier: {
+    key: 'notebook',
+    namespace: ''
+  },
+  type: 'notebook',
+  name: 'Test Notebook',
+  configuration: {
+    defaultSort: 'oldest',
+    entries: notebookEntries,
+    pageTitle: 'Page',
+    sections: [],
+    sectionTitle: 'Section',
+    type: 'General'
+  }
 };
 
 const selectedSection = {
-    id: '03a79b6a-971c-4e56-9892-ec536332c3f0',
-    isDefault: false,
-    isSelected: true,
-    name: 'Day 1',
-    pages: [
-        {
-            id: '54deb3d5-8267-4be4-95e9-3579ed8c082d',
-            isDefault: false,
-            isSelected: false,
-            name: 'Shift 1',
-            pageTitle: 'Page'
-        },
-        {
-            id: '2ea41c78-8e60-4657-a350-53f1a1fa3021',
-            isDefault: false,
-            isSelected: false,
-            name: 'Shift 2',
-            pageTitle: 'Page'
-        },
-        {
-            id: '8b548fd9-2b8a-4b02-93a9-4138e22eba00',
-            isDefault: false,
-            isSelected: true,
-            name: 'Unnamed Page',
-            pageTitle: 'Page'
-        }
-    ],
-    sectionTitle: 'Section'
+  id: '03a79b6a-971c-4e56-9892-ec536332c3f0',
+  isDefault: false,
+  isSelected: true,
+  name: 'Day 1',
+  pages: [
+    {
+      id: '54deb3d5-8267-4be4-95e9-3579ed8c082d',
+      isDefault: false,
+      isSelected: false,
+      name: 'Shift 1',
+      pageTitle: 'Page'
+    },
+    {
+      id: '2ea41c78-8e60-4657-a350-53f1a1fa3021',
+      isDefault: false,
+      isSelected: false,
+      name: 'Shift 2',
+      pageTitle: 'Page'
+    },
+    {
+      id: '8b548fd9-2b8a-4b02-93a9-4138e22eba00',
+      isDefault: false,
+      isSelected: true,
+      name: 'Unnamed Page',
+      pageTitle: 'Page'
+    }
+  ],
+  sectionTitle: 'Section'
 };
 
 const selectedPage = {
-    id: '8b548fd9-2b8a-4b02-93a9-4138e22eba00',
-    isDefault: false,
-    isSelected: true,
-    name: 'Unnamed Page',
-    pageTitle: 'Page'
+  id: '8b548fd9-2b8a-4b02-93a9-4138e22eba00',
+  isDefault: false,
+  isSelected: true,
+  name: 'Unnamed Page',
+  pageTitle: 'Page'
 };
 
 let openmct;
-let mockIdentifierService;
 
 describe('Notebook Entries:', () => {
-    beforeEach(() => {
-        openmct = createOpenMct();
-        openmct.$injector = jasmine.createSpyObj('$injector', ['get']);
-        mockIdentifierService = jasmine.createSpyObj(
-            'identifierService',
-            ['parse']
-        );
-        mockIdentifierService.parse.and.returnValue({
-            getSpace: () => {
-                return '';
-            }
-        });
-
-        openmct.$injector.get.and.returnValue(mockIdentifierService);
-        openmct.types.addType('notebook', {
-            creatable: true
-        });
-        openmct.objects.addProvider('', jasmine.createSpyObj('mockNotebookProvider', [
-            'create',
-            'update'
-        ]));
-        window.localStorage.setItem('notebook-storage', null);
-    });
-
-    afterEach(() => {
-        notebookDomainObject.configuration.entries[selectedSection.id][selectedPage.id] = [];
-
-        return resetApplicationState(openmct);
-    });
-
-    it('getNotebookEntries has no entries', () => {
-        const entries = NotebookEntries.getNotebookEntries(notebookDomainObject, selectedSection, selectedPage);
-
-        expect(entries.length).toEqual(0);
+  beforeEach(() => {
+    openmct = createOpenMct();
+    openmct.time.setClock('local');
+    openmct.types.addType('notebook', {
+      creatable: true
     });
-
-    it('addNotebookEntry adds entry', () => {
-        const unlisten = openmct.objects.observe(notebookDomainObject, '*', (object) => {
-            const entries = NotebookEntries.getNotebookEntries(notebookDomainObject, selectedSection, selectedPage);
-
-            expect(entries.length).toEqual(1);
-            unlisten();
-        });
-
-        NotebookEntries.addNotebookEntry(openmct, notebookDomainObject, notebookStorage);
+    openmct.objects.addProvider(
+      '',
+      jasmine.createSpyObj('mockNotebookProvider', ['create', 'update'])
+    );
+    openmct.editor = {
+      isEditing: () => false
+    };
+    openmct.objects.isPersistable = () => true;
+    openmct.objects.save = () => Promise.resolve(true);
+
+    window.localStorage.setItem('notebook-storage', null);
+  });
+
+  afterEach(() => {
+    notebookDomainObject.configuration.entries[selectedSection.id][selectedPage.id] = [];
+
+    return resetApplicationState(openmct);
+  });
+
+  it('getNotebookEntries has no entries', () => {
+    const entries = NotebookEntries.getNotebookEntries(
+      notebookDomainObject,
+      selectedSection,
+      selectedPage
+    );
+
+    expect(entries.length).toEqual(0);
+  });
+
+  it('addNotebookEntry adds entry', async () => {
+    const unlisten = openmct.objects.observe(notebookDomainObject, '*', (object) => {
+      const entries = NotebookEntries.getNotebookEntries(
+        notebookDomainObject,
+        selectedSection,
+        selectedPage
+      );
+
+      expect(entries.length).toEqual(1);
+      unlisten();
     });
 
-    it('getEntryPosById returns valid position', () => {
-        const entryId1 = NotebookEntries.addNotebookEntry(openmct, notebookDomainObject, notebookStorage);
-        const position1 = NotebookEntries.getEntryPosById(entryId1, notebookDomainObject, selectedSection, selectedPage);
+    await NotebookEntries.addNotebookEntry(openmct, notebookDomainObject, notebookStorage);
+  });
 
-        const entryId2 = NotebookEntries.addNotebookEntry(openmct, notebookDomainObject, notebookStorage);
-        const position2 = NotebookEntries.getEntryPosById(entryId2, notebookDomainObject, selectedSection, selectedPage);
-
-        const entryId3 = NotebookEntries.addNotebookEntry(openmct, notebookDomainObject, notebookStorage);
-        const position3 = NotebookEntries.getEntryPosById(entryId3, notebookDomainObject, selectedSection, selectedPage);
-
-        const success = position1 === 0
-                && position2 === 1
-                && position3 === 2;
-
-        expect(success).toBe(true);
+  it('addNotebookEntry adds active user to entry', async () => {
+    const USER = 'Timmy';
+    openmct.user.hasProvider = () => true;
+    openmct.user.getCurrentUser = () => {
+      return Promise.resolve({
+        getName: () => {
+          return USER;
+        }
+      });
+    };
+
+    const unlisten = openmct.objects.observe(notebookDomainObject, '*', (object) => {
+      const entries = NotebookEntries.getNotebookEntries(
+        notebookDomainObject,
+        selectedSection,
+        selectedPage
+      );
+
+      expect(entries[0].createdBy).toEqual(USER);
+      unlisten();
     });
 
-    it('deleteNotebookEntries deletes correct page entries', () => {
-        NotebookEntries.addNotebookEntry(openmct, notebookDomainObject, notebookStorage);
-        NotebookEntries.addNotebookEntry(openmct, notebookDomainObject, notebookStorage);
-
-        NotebookEntries.deleteNotebookEntries(openmct, notebookDomainObject, selectedSection, selectedPage);
-        const afterEntries = NotebookEntries.getNotebookEntries(notebookDomainObject, selectedSection, selectedPage);
-
-        expect(afterEntries).toEqual(undefined);
-    });
+    await NotebookEntries.addNotebookEntry(openmct, notebookDomainObject, notebookStorage);
+  });
+
+  it('getEntryPosById returns valid position', async () => {
+    const entryId1 = await NotebookEntries.addNotebookEntry(
+      openmct,
+      notebookDomainObject,
+      notebookStorage
+    );
+    const position1 = NotebookEntries.getEntryPosById(
+      entryId1,
+      notebookDomainObject,
+      selectedSection,
+      selectedPage
+    );
+
+    const entryId2 = await NotebookEntries.addNotebookEntry(
+      openmct,
+      notebookDomainObject,
+      notebookStorage
+    );
+    const position2 = NotebookEntries.getEntryPosById(
+      entryId2,
+      notebookDomainObject,
+      selectedSection,
+      selectedPage
+    );
+
+    const entryId3 = await NotebookEntries.addNotebookEntry(
+      openmct,
+      notebookDomainObject,
+      notebookStorage
+    );
+    const position3 = NotebookEntries.getEntryPosById(
+      entryId3,
+      notebookDomainObject,
+      selectedSection,
+      selectedPage
+    );
+
+    const success = position1 === 0 && position2 === 1 && position3 === 2;
+
+    expect(success).toBe(true);
+  });
+
+  it('deleteNotebookEntries deletes correct page entries', async () => {
+    await NotebookEntries.addNotebookEntry(openmct, notebookDomainObject, notebookStorage);
+    await NotebookEntries.addNotebookEntry(openmct, notebookDomainObject, notebookStorage);
+    NotebookEntries.deleteNotebookEntries(
+      openmct,
+      notebookDomainObject,
+      selectedSection,
+      selectedPage
+    );
+    const afterEntries = NotebookEntries.getNotebookEntries(
+      notebookDomainObject,
+      selectedSection,
+      selectedPage
+    );
+
+    expect(afterEntries).toEqual(undefined);
+  });
 });
diff --git a/src/plugins/notebook/utils/notebook-image.js b/src/plugins/notebook/utils/notebook-image.js
index 5749e32fc12..224090bc60c 100644
--- a/src/plugins/notebook/utils/notebook-image.js
+++ b/src/plugins/notebook/utils/notebook-image.js
@@ -1,78 +1,80 @@
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 
 export const DEFAULT_SIZE = {
-    width: 30,
-    height: 30
+  width: 30,
+  height: 30
 };
 
-export function createNotebookImageDomainObject(openmct, fullSizeImageURL) {
-    const identifier = {
-        key: uuid(),
-        namespace: ''
-    };
-    const viewType = 'notebookSnapshotImage';
-
-    const object = {
-        name: 'Notebook Snapshot Image',
-        type: viewType,
-        identifier,
-        configuration: {
-            fullSizeImageURL
-        }
-    };
-
-    return new Promise((resolve, reject) => {
-        openmct.objects.save(object)
-            .then(result => {
-                if (result) {
-                    resolve(object);
-                }
+export function createNotebookImageDomainObject(fullSizeImageURL) {
+  const identifier = {
+    key: uuid(),
+    namespace: ''
+  };
+  const viewType = 'notebookSnapshotImage';
 
-                reject();
-            })
-            .catch(e => {
-                console.error(e);
-                reject();
-            });
-    });
+  return {
+    name: 'Notebook Snapshot Image',
+    type: viewType,
+    identifier,
+    configuration: {
+      fullSizeImageURL
+    }
+  };
 }
 
 export function getThumbnailURLFromCanvas(canvas, size = DEFAULT_SIZE) {
-    const thumbnailCanvas = document.createElement('canvas');
-    thumbnailCanvas.setAttribute('width', size.width);
-    thumbnailCanvas.setAttribute('height', size.height);
-    const ctx = thumbnailCanvas.getContext('2d');
-    ctx.globalCompositeOperation = "copy";
-    ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, size.width, size.height);
+  const thumbnailCanvas = document.createElement('canvas');
+  thumbnailCanvas.setAttribute('width', size.width);
+  thumbnailCanvas.setAttribute('height', size.height);
+  const ctx = thumbnailCanvas.getContext('2d');
+  ctx.globalCompositeOperation = 'copy';
+  ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, size.width, size.height);
 
-    return thumbnailCanvas.toDataURL('image/png');
+  return thumbnailCanvas.toDataURL('image/png');
 }
 
-export function getThumbnailURLFromimageUrl(imageUrl, size = DEFAULT_SIZE) {
-    return new Promise(resolve => {
-        const image = new Image();
+export function getThumbnailURLFromImageUrl(imageUrl, size = DEFAULT_SIZE) {
+  return new Promise((resolve) => {
+    const image = new Image();
 
-        const canvas = document.createElement('canvas');
-        canvas.width = size.width;
-        canvas.height = size.height;
+    const canvas = document.createElement('canvas');
+    canvas.width = size.width;
+    canvas.height = size.height;
 
-        image.onload = function () {
-            canvas.getContext('2d')
-                .drawImage(image, 0, 0, size.width, size.height);
+    image.onload = function () {
+      canvas.getContext('2d').drawImage(image, 0, 0, size.width, size.height);
+      resolve(canvas.toDataURL('image/png'));
+    };
+
+    image.src = imageUrl;
+  });
+}
 
-            resolve(canvas.toDataURL('image/png'));
-        };
+export async function saveNotebookImageDomainObject(openmct, object) {
+  await openmct.objects.save(object);
+}
 
-        image.src = imageUrl;
-    });
+export async function updateNotebookImageDomainObject(openmct, identifier, fullSizeImage) {
+  const domainObject = await openmct.objects.get(identifier);
+  const configuration = domainObject.configuration;
+  configuration.fullSizeImageURL = fullSizeImage.src;
+  try {
+    // making a transactions as we can't catch errors on mutations
+    if (!openmct.objects.isTransactionActive()) {
+      openmct.objects.startTransaction();
+    }
+    openmct.objects.mutate(domainObject, 'configuration', configuration);
+    const transaction = openmct.objects.getActiveTransaction();
+    await transaction.commit();
+    openmct.objects.endTransaction();
+  } catch (error) {
+    console.error(`${error.message} -- unable to save image`, error);
+    openmct.notifications.error(`${error.message} -- unable to save image`);
+  }
 }
 
-export function updateNotebookImageDomainObject(openmct, identifier, fullSizeImage) {
-    openmct.objects.get(identifier)
-        .then(domainObject => {
-            const configuration = domainObject.configuration;
-            configuration.fullSizeImageURL = fullSizeImage.src;
+export function updateNamespaceOfDomainObject(object, namespace) {
+  object.identifier.namespace = namespace;
 
-            openmct.objects.mutate(domainObject, 'configuration', configuration);
-        });
+  return object;
 }
diff --git a/src/plugins/notebook/utils/notebook-key-code.js b/src/plugins/notebook/utils/notebook-key-code.js
new file mode 100644
index 00000000000..64515e935e1
--- /dev/null
+++ b/src/plugins/notebook/utils/notebook-key-code.js
@@ -0,0 +1,3 @@
+// Key codes for `KeyboardEvent.keyCode`.
+export const KEY_ENTER = 13;
+export const KEY_ESCAPE = 27;
diff --git a/src/plugins/notebook/utils/notebook-migration.js b/src/plugins/notebook/utils/notebook-migration.js
index f44ea464227..d2e24276099 100644
--- a/src/plugins/notebook/utils/notebook-migration.js
+++ b/src/plugins/notebook/utils/notebook-migration.js
@@ -1,43 +1,55 @@
-import { createNotebookImageDomainObject, getThumbnailURLFromimageUrl } from './notebook-image';
-import { mutateObject } from './notebook-entries';
+import { mutateObject } from './notebook-entries.js';
+import {
+  createNotebookImageDomainObject,
+  getThumbnailURLFromImageUrl,
+  saveNotebookImageDomainObject,
+  updateNamespaceOfDomainObject
+} from './notebook-image.js';
+
+export const IMAGE_MIGRATION_VER = 'v1';
 
 export function notebookImageMigration(openmct, domainObject) {
-    const configuration = domainObject.configuration;
-    const notebookEntries = configuration.entries;
-
-    const imageMigrationVer = configuration.imageMigrationVer;
-    if (imageMigrationVer && imageMigrationVer === 'v1') {
-        return;
-    }
-
-    configuration.imageMigrationVer = 'v1';
-
-    // to avoid muliple notebookImageMigration calls updating images.
-    mutateObject(openmct, domainObject, 'configuration', configuration);
-
-    configuration.sections.forEach(section => {
-        const sectionId = section.id;
-        section.pages.forEach(page => {
-            const pageId = page.id;
-            const notebookSection = notebookEntries && notebookEntries[sectionId] || {};
-            const pageEntries = notebookSection && notebookSection[pageId] || [];
-            pageEntries.forEach(entry => {
-                entry.embeds.forEach(async (embed) => {
-                    const snapshot = embed.snapshot;
-                    const fullSizeImageURL = snapshot.src;
-                    if (fullSizeImageURL) {
-                        const thumbnailImageURL = await getThumbnailURLFromimageUrl(fullSizeImageURL);
-                        const notebookImageDomainObject = await createNotebookImageDomainObject(openmct, fullSizeImageURL);
-
-                        embed.snapshot = {
-                            fullSizeImageObjectIdentifier: notebookImageDomainObject.identifier,
-                            thumbnailImage: { src: thumbnailImageURL || '' }
-                        };
-
-                        mutateObject(openmct, domainObject, 'configuration.entries', notebookEntries);
-                    }
-                });
-            });
+  const configuration = domainObject.configuration;
+  const notebookEntries = configuration.entries;
+
+  const imageMigrationVer = configuration.imageMigrationVer;
+  if (imageMigrationVer && imageMigrationVer === IMAGE_MIGRATION_VER) {
+    return;
+  }
+
+  configuration.imageMigrationVer = IMAGE_MIGRATION_VER;
+
+  // to avoid muliple notebookImageMigration calls updating images.
+  mutateObject(openmct, domainObject, 'configuration', configuration);
+
+  configuration.sections.forEach((section) => {
+    const sectionId = section.id;
+    section.pages.forEach((page) => {
+      const pageId = page.id;
+      const notebookSection = (notebookEntries && notebookEntries[sectionId]) || {};
+      const pageEntries = (notebookSection && notebookSection[pageId]) || [];
+      pageEntries.forEach((entry) => {
+        entry.embeds.forEach(async (embed) => {
+          const snapshot = embed.snapshot;
+          const fullSizeImageURL = snapshot.src;
+          if (fullSizeImageURL) {
+            const thumbnailImageURL = await getThumbnailURLFromImageUrl(fullSizeImageURL);
+            const object = createNotebookImageDomainObject(fullSizeImageURL);
+            const notebookImageDomainObject = updateNamespaceOfDomainObject(
+              object,
+              domainObject.identifier.namespace
+            );
+            embed.snapshot = {
+              fullSizeImageObjectIdentifier: notebookImageDomainObject.identifier,
+              thumbnailImage: { src: thumbnailImageURL || '' }
+            };
+
+            mutateObject(openmct, domainObject, 'configuration.entries', notebookEntries);
+
+            saveNotebookImageDomainObject(openmct, notebookImageDomainObject);
+          }
         });
+      });
     });
+  });
 }
diff --git a/src/plugins/notebook/utils/notebook-snapshot-menu.js b/src/plugins/notebook/utils/notebook-snapshot-menu.js
new file mode 100644
index 00000000000..8705015d66e
--- /dev/null
+++ b/src/plugins/notebook/utils/notebook-snapshot-menu.js
@@ -0,0 +1,36 @@
+import { getDefaultNotebook, getNotebookSectionAndPage } from './notebook-storage.js';
+
+export async function getMenuItems(openmct, menuItemOptions) {
+  const notebookTypes = [];
+
+  const defaultNotebook = getDefaultNotebook();
+  const defaultNotebookObject =
+    defaultNotebook && (await openmct.objects.get(defaultNotebook.identifier));
+  if (defaultNotebookObject) {
+    const { section, page } = getNotebookSectionAndPage(
+      defaultNotebookObject,
+      defaultNotebook.defaultSectionId,
+      defaultNotebook.defaultPageId
+    );
+    if (section && page) {
+      const name = defaultNotebookObject.name;
+      const sectionName = section.name;
+      const pageName = page.name;
+      const defaultPath = `${name} - ${sectionName} - ${pageName}`;
+
+      notebookTypes.push({
+        cssClass: menuItemOptions.default.cssClass,
+        name: `${menuItemOptions.default.name} ${defaultPath}`,
+        onItemClicked: menuItemOptions.default.onItemClicked
+      });
+    }
+  }
+
+  notebookTypes.push({
+    cssClass: menuItemOptions.snapshot.cssClass,
+    name: menuItemOptions.snapshot.name,
+    onItemClicked: menuItemOptions.snapshot.onItemClicked
+  });
+
+  return notebookTypes;
+}
diff --git a/src/plugins/notebook/utils/notebook-storage.js b/src/plugins/notebook/utils/notebook-storage.js
index a7a829c0628..866cd0faee4 100644
--- a/src/plugins/notebook/utils/notebook-storage.js
+++ b/src/plugins/notebook/utils/notebook-storage.js
@@ -1,103 +1,125 @@
-import objectUtils from 'objectUtils';
+import { makeKeyString } from 'objectUtils';
 
 const NOTEBOOK_LOCAL_STORAGE = 'notebook-storage';
 let currentNotebookObjectIdentifier = null;
 let unlisten = null;
 
 function defaultNotebookObjectChanged(newDomainObject) {
-    if (newDomainObject.location !== null) {
-        currentNotebookObjectIdentifier = newDomainObject.identifier;
+  if (newDomainObject.location !== null) {
+    currentNotebookObjectIdentifier = newDomainObject.identifier;
 
-        return;
-    }
+    return;
+  }
 
-    if (unlisten) {
-        unlisten();
-        unlisten = null;
-    }
+  if (unlisten) {
+    unlisten();
+    unlisten = null;
+  }
 
-    clearDefaultNotebook();
+  clearDefaultNotebook();
 }
 
-function observeDefaultNotebookObject(openmct, notebookMeta, domainObject) {
-    if (currentNotebookObjectIdentifier
-            && objectUtils.makeKeyString(currentNotebookObjectIdentifier) === objectUtils.makeKeyString(notebookMeta.identifier)) {
-        return;
-    }
+function observeDefaultNotebookObject(openmct, notebookStorage, domainObject) {
+  if (
+    currentNotebookObjectIdentifier &&
+    makeKeyString(currentNotebookObjectIdentifier) === makeKeyString(notebookStorage.identifier)
+  ) {
+    return;
+  }
 
-    if (unlisten) {
-        unlisten();
-        unlisten = null;
-    }
+  removeListener();
 
-    unlisten = openmct.objects.observe(domainObject, '*', defaultNotebookObjectChanged);
+  unlisten = openmct.objects.observe(domainObject, '*', defaultNotebookObjectChanged);
+}
+
+function removeListener() {
+  if (unlisten) {
+    unlisten();
+    unlisten = null;
+  }
 }
 
 function saveDefaultNotebook(notebookStorage) {
-    window.localStorage.setItem(NOTEBOOK_LOCAL_STORAGE, JSON.stringify(notebookStorage));
+  window.localStorage.setItem(NOTEBOOK_LOCAL_STORAGE, JSON.stringify(notebookStorage));
 }
 
 export function clearDefaultNotebook() {
-    currentNotebookObjectIdentifier = null;
-    window.localStorage.setItem(NOTEBOOK_LOCAL_STORAGE, null);
+  currentNotebookObjectIdentifier = null;
+  removeListener();
+
+  window.localStorage.setItem(NOTEBOOK_LOCAL_STORAGE, null);
 }
 
 export function getDefaultNotebook() {
-    const notebookStorage = window.localStorage.getItem(NOTEBOOK_LOCAL_STORAGE);
+  const notebookStorage = window.localStorage.getItem(NOTEBOOK_LOCAL_STORAGE);
+
+  return JSON.parse(notebookStorage);
+}
+
+export function getNotebookSectionAndPage(domainObject, sectionId, pageId) {
+  const configuration = domainObject.configuration;
+  const section = configuration && configuration.sections.find((s) => s.id === sectionId);
+  const page = section && section.pages.find((p) => p.id === pageId);
 
-    return JSON.parse(notebookStorage);
+  return {
+    section,
+    page
+  };
 }
 
 export async function getDefaultNotebookLink(openmct, domainObject = null) {
-    if (!domainObject) {
-        return null;
-    }
-
-    const path = await openmct.objects.getOriginalPath(domainObject.identifier)
-        .then(objectPath => objectPath
-            .map(o => o && openmct.objects.makeKeyString(o.identifier))
-            .reverse()
-            .join('/')
-        );
-    const { page, section } = getDefaultNotebook();
-
-    return `#/browse/${path}?sectionId=${section.id}&pageId=${page.id}`;
+  if (!domainObject) {
+    return null;
+  }
+
+  const path = await openmct.objects
+    .getOriginalPath(domainObject.identifier)
+    .then(openmct.objects.getRelativePath);
+  const { defaultPageId, defaultSectionId } = getDefaultNotebook();
+
+  return `#/browse/${path}?sectionId=${defaultSectionId}&pageId=${defaultPageId}`;
 }
 
 export function setDefaultNotebook(openmct, notebookStorage, domainObject) {
-    observeDefaultNotebookObject(openmct, notebookStorage, domainObject);
-    saveDefaultNotebook(notebookStorage);
+  observeDefaultNotebookObject(openmct, notebookStorage, domainObject);
+  saveDefaultNotebook(notebookStorage);
 }
 
-export function setDefaultNotebookSection(section) {
-    const notebookStorage = getDefaultNotebook();
-    notebookStorage.section = section;
-    saveDefaultNotebook(notebookStorage);
+export function setDefaultNotebookSectionId(sectionId) {
+  const notebookStorage = getDefaultNotebook();
+  notebookStorage.defaultSectionId = sectionId;
+  saveDefaultNotebook(notebookStorage);
 }
 
-export function setDefaultNotebookPage(page) {
-    const notebookStorage = getDefaultNotebook();
-    notebookStorage.page = page;
-    saveDefaultNotebook(notebookStorage);
+export function setDefaultNotebookPageId(pageId) {
+  const notebookStorage = getDefaultNotebook();
+  notebookStorage.defaultPageId = pageId;
+  saveDefaultNotebook(notebookStorage);
 }
 
 export function validateNotebookStorageObject() {
-    const notebookStorage = getDefaultNotebook();
-
-    let valid = false;
-    if (notebookStorage) {
-        Object.entries(notebookStorage).forEach(([key, value]) => {
-            const validKey = key !== undefined && key !== null;
-            const validValue = value !== undefined && value !== null;
-            valid = validKey && validValue;
-        });
-    }
-
-    if (valid) {
-        return notebookStorage;
-    }
-
-    console.warn('Invalid Notebook object, clearing default notebook storage');
-
-    clearDefaultNotebook();
+  const notebookStorage = getDefaultNotebook();
+  if (!notebookStorage) {
+    return true;
+  }
+
+  let valid = false;
+  if (notebookStorage) {
+    const oldInvalidKeys = ['notebookMeta', 'page', 'section'];
+    valid = Object.entries(notebookStorage).every(([key, value]) => {
+      const validKey = key !== undefined && key !== null;
+      const validValue = value !== undefined && value !== null;
+      const hasOldInvalidKeys = oldInvalidKeys.includes(key);
+
+      return validKey && validValue && !hasOldInvalidKeys;
+    });
+  }
+
+  if (valid) {
+    return notebookStorage;
+  }
+
+  console.warn('Invalid Notebook object, clearing default notebook storage');
+
+  clearDefaultNotebook();
 }
diff --git a/src/plugins/notebook/utils/notebook-storageSpec.js b/src/plugins/notebook/utils/notebook-storageSpec.js
index 4028ba9141b..fc3680735d2 100644
--- a/src/plugins/notebook/utils/notebook-storageSpec.js
+++ b/src/plugins/notebook/utils/notebook-storageSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,122 +20,162 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import * as NotebookStorage from './notebook-storage';
 import { createOpenMct, resetApplicationState } from 'utils/testing';
 
-const domainObject = {
-    name: 'notebook',
-    identifier: {
-        namespace: '',
-        key: 'test-notebook'
+import * as NotebookStorage from './notebook-storage.js';
+
+const notebookSection = {
+  id: 'temp-section',
+  isDefault: false,
+  isSelected: true,
+  name: 'section',
+  pages: [
+    {
+      id: 'temp-page',
+      isDefault: false,
+      isSelected: true,
+      name: 'page',
+      pageTitle: 'Page'
     }
+  ],
+  sectionTitle: 'Section'
+};
+
+const domainObject = {
+  name: 'notebook',
+  identifier: {
+    namespace: '',
+    key: 'test-notebook'
+  },
+  configuration: {
+    sections: [notebookSection]
+  }
 };
 
 const notebookStorage = {
-    notebookMeta: {
-        name: 'notebook',
-        identifier: {
-            namespace: '',
-            key: 'test-notebook'
-        }
-    },
-    section: {
-        id: 'temp-section',
-        isDefault: false,
-        isSelected: true,
-        name: 'section',
-        pages: [],
-        sectionTitle: 'Section'
-    },
-    page: {
-        id: 'temp-page',
-        isDefault: false,
-        isSelected: true,
-        name: 'page',
-        pageTitle: 'Page'
-    }
+  name: 'notebook',
+  identifier: {
+    namespace: '',
+    key: 'test-notebook'
+  },
+  defaultSectionId: 'temp-section',
+  defaultPageId: 'temp-page'
 };
 
 let openmct;
-let mockIdentifierService;
 
 describe('Notebook Storage:', () => {
+  beforeEach(() => {
+    openmct = createOpenMct();
+
+    window.localStorage.setItem('notebook-storage', null);
+    openmct.objects.addProvider(
+      '',
+      jasmine.createSpyObj('mockNotebookProvider', ['create', 'update'])
+    );
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  it('has empty local Storage', () => {
+    expect(window.localStorage).not.toBeNull();
+  });
+
+  it('has null notebookstorage on clearDefaultNotebook', () => {
+    window.localStorage.setItem('notebook-storage', notebookStorage);
+    NotebookStorage.clearDefaultNotebook();
+    const defaultNotebook = NotebookStorage.getDefaultNotebook();
+
+    expect(defaultNotebook).toBeNull();
+  });
+
+  it('has correct notebookstorage on setDefaultNotebook', () => {
+    NotebookStorage.setDefaultNotebook(openmct, notebookStorage, domainObject);
+    const defaultNotebook = NotebookStorage.getDefaultNotebook();
+
+    expect(JSON.stringify(defaultNotebook)).toBe(JSON.stringify(notebookStorage));
+  });
+
+  it('has correct section on setDefaultNotebookSectionId', () => {
+    const section = {
+      id: 'new-temp-section',
+      isDefault: true,
+      isSelected: true,
+      name: 'new section',
+      pages: [],
+      sectionTitle: 'Section'
+    };
+
+    NotebookStorage.setDefaultNotebook(openmct, notebookStorage, domainObject);
+    NotebookStorage.setDefaultNotebookSectionId(section.id);
+
+    const defaultNotebook = NotebookStorage.getDefaultNotebook();
+    const defaultSectionId = defaultNotebook.defaultSectionId;
+    expect(section.id).toBe(defaultSectionId);
+  });
+
+  it('has correct page on setDefaultNotebookPageId', () => {
+    const page = {
+      id: 'new-temp-page',
+      isDefault: true,
+      isSelected: true,
+      name: 'new page',
+      pageTitle: 'Page'
+    };
+
+    NotebookStorage.setDefaultNotebook(openmct, notebookStorage, domainObject);
+    NotebookStorage.setDefaultNotebookPageId(page.id);
+
+    const defaultNotebook = NotebookStorage.getDefaultNotebook();
+    const newPageId = defaultNotebook.defaultPageId;
+    expect(page.id).toBe(newPageId);
+  });
+
+  describe('is getNotebookSectionAndPage function searches and returns correct,', () => {
+    let section;
+    let page;
+
     beforeEach(() => {
-        openmct = createOpenMct();
-        openmct.$injector = jasmine.createSpyObj('$injector', ['get']);
-        mockIdentifierService = jasmine.createSpyObj(
-            'identifierService',
-            ['parse']
-        );
-        mockIdentifierService.parse.and.returnValue({
-            getSpace: () => {
-                return '';
-            }
-        });
-
-        openmct.$injector.get.and.returnValue(mockIdentifierService);
-        window.localStorage.setItem('notebook-storage', null);
-        openmct.objects.addProvider('', jasmine.createSpyObj('mockNotebookProvider', [
-            'create',
-            'update'
-        ]));
+      const sectionId = 'temp-section';
+      const pageId = 'temp-page';
+
+      const sectionAndpage = NotebookStorage.getNotebookSectionAndPage(
+        domainObject,
+        sectionId,
+        pageId
+      );
+      section = sectionAndpage.section;
+      page = sectionAndpage.page;
     });
 
-    afterEach(() => {
-        return resetApplicationState(openmct);
+    it('id for section from notebook domain object', () => {
+      expect(section.id).toEqual('temp-section');
     });
 
-    it('has empty local Storage', () => {
-        expect(window.localStorage).not.toBeNull();
+    it('name for section from notebook domain object', () => {
+      expect(section.name).toEqual('section');
     });
 
-    it('has null notebookstorage on clearDefaultNotebook', () => {
-        window.localStorage.setItem('notebook-storage', notebookStorage);
-        NotebookStorage.clearDefaultNotebook();
-        const defaultNotebook = NotebookStorage.getDefaultNotebook();
-
-        expect(defaultNotebook).toBeNull();
+    it('sectionTitle for section from notebook domain object', () => {
+      expect(section.sectionTitle).toEqual('Section');
     });
 
-    it('has correct notebookstorage on setDefaultNotebook', () => {
-        NotebookStorage.setDefaultNotebook(openmct, notebookStorage, domainObject);
-        const defaultNotebook = NotebookStorage.getDefaultNotebook();
+    it('number of pages for section from notebook domain object', () => {
+      expect(section.pages.length).toEqual(1);
+    });
 
-        expect(JSON.stringify(defaultNotebook)).toBe(JSON.stringify(notebookStorage));
+    it('id for page from notebook domain object', () => {
+      expect(page.id).toEqual('temp-page');
     });
 
-    it('has correct section on setDefaultNotebookSection', () => {
-        const section = {
-            id: 'new-temp-section',
-            isDefault: true,
-            isSelected: true,
-            name: 'new section',
-            pages: [],
-            sectionTitle: 'Section'
-        };
-
-        NotebookStorage.setDefaultNotebook(openmct, notebookStorage, domainObject);
-        NotebookStorage.setDefaultNotebookSection(section);
-
-        const defaultNotebook = NotebookStorage.getDefaultNotebook();
-        const newSection = defaultNotebook.section;
-        expect(JSON.stringify(section)).toBe(JSON.stringify(newSection));
+    it('name for page from notebook domain object', () => {
+      expect(page.name).toEqual('page');
     });
 
-    it('has correct page on setDefaultNotebookPage', () => {
-        const page = {
-            id: 'new-temp-page',
-            isDefault: true,
-            isSelected: true,
-            name: 'new page',
-            pageTitle: 'Page'
-        };
-
-        NotebookStorage.setDefaultNotebook(openmct, notebookStorage, domainObject);
-        NotebookStorage.setDefaultNotebookPage(page);
-
-        const defaultNotebook = NotebookStorage.getDefaultNotebook();
-        const newPage = defaultNotebook.page;
-        expect(JSON.stringify(page)).toBe(JSON.stringify(newPage));
+    it('pageTitle for page from notebook domain object', () => {
+      expect(page.pageTitle).toEqual('Page');
     });
+  });
 });
diff --git a/src/plugins/notebook/utils/painterroInstance.js b/src/plugins/notebook/utils/painterroInstance.js
index 399d26dd17a..f8d421fa11d 100644
--- a/src/plugins/notebook/utils/painterroInstance.js
+++ b/src/plugins/notebook/utils/painterroInstance.js
@@ -1,90 +1,92 @@
 import Painterro from 'painterro';
-import { getThumbnailURLFromimageUrl } from './notebook-image';
+
+import { getThumbnailURLFromImageUrl } from './notebook-image.js';
 
 const DEFAULT_CONFIG = {
-    activeColor: '#ff0000',
-    activeColorAlpha: 1.0,
-    activeFillColor: '#fff',
-    activeFillColorAlpha: 0.0,
-    backgroundFillColor: '#000',
-    backgroundFillColorAlpha: 0.0,
-    defaultFontSize: 16,
-    defaultLineWidth: 2,
-    defaultTool: 'ellipse',
-    hiddenTools: ['save', 'open', 'close', 'eraser', 'pixelize', 'rotate', 'settings', 'resize'],
-    translation: {
-        name: 'en',
-        strings: {
-            lineColor: 'Line',
-            fillColor: 'Fill',
-            lineWidth: 'Size',
-            textColor: 'Color',
-            fontSize: 'Size',
-            fontStyle: 'Style'
-        }
+  activeColor: '#ff0000',
+  activeColorAlpha: 1.0,
+  activeFillColor: '#fff',
+  activeFillColorAlpha: 0.0,
+  backgroundFillColor: '#000',
+  backgroundFillColorAlpha: 0.0,
+  defaultFontSize: 16,
+  defaultLineWidth: 2,
+  defaultTool: 'ellipse',
+  hiddenTools: ['save', 'open', 'close', 'eraser', 'pixelize', 'rotate', 'settings', 'resize'],
+  translation: {
+    name: 'en',
+    strings: {
+      lineColor: 'Line',
+      fillColor: 'Fill',
+      lineWidth: 'Size',
+      textColor: 'Color',
+      fontSize: 'Size',
+      fontStyle: 'Style'
     }
+  }
 };
 
 export default class PainterroInstance {
-    constructor(element) {
-        this.elementId = element.id;
-        this.isSave = false;
-        this.painterroInstance = undefined;
-        this.saveCallback = undefined;
-    }
+  constructor(element, openmct) {
+    this.elementId = element.id;
+    this.isSave = false;
+    this.painterroInstance = undefined;
+    this.saveCallback = undefined;
+    this.openmct = openmct;
+  }
 
-    dismiss() {
-        this.isSave = false;
-        this.painterroInstance.save();
-    }
+  dismiss() {
+    this.isSave = false;
+    this.painterroInstance.save();
+  }
 
-    intialize() {
-        this.config = Object.assign({}, DEFAULT_CONFIG);
+  initialize() {
+    this.config = Object.assign({}, DEFAULT_CONFIG);
 
-        this.config.id = this.elementId;
-        this.config.saveHandler = this.saveHandler.bind(this);
+    this.config.id = this.elementId;
+    this.config.saveHandler = this.saveHandler.bind(this);
 
-        this.painterro = Painterro(this.config);
-    }
+    this.painterro = Painterro(this.config);
+  }
 
-    save(callback) {
-        this.saveCallback = callback;
-        this.isSave = true;
-        this.painterroInstance.save();
-    }
+  save(callback) {
+    this.saveCallback = callback;
+    this.isSave = true;
+    this.painterroInstance.save();
+  }
 
-    saveHandler(image, done) {
-        if (this.isSave) {
-            const url = image.asBlob();
+  saveHandler(image, done) {
+    if (this.isSave) {
+      const url = image.asBlob();
 
-            const reader = new window.FileReader();
-            reader.readAsDataURL(url);
-            reader.onloadend = async () => {
-                const fullSizeImageURL = reader.result;
-                const thumbnailURL = await getThumbnailURLFromimageUrl(fullSizeImageURL);
-                const snapshotObject = {
-                    fullSizeImage: {
-                        src: fullSizeImageURL,
-                        type: url.type,
-                        size: url.size,
-                        modified: Date.now()
-                    },
-                    thumbnailImage: {
-                        src: thumbnailURL,
-                        modified: Date.now()
-                    }
-                };
+      const reader = new window.FileReader();
+      reader.readAsDataURL(url);
+      reader.onloadend = async () => {
+        const fullSizeImageURL = reader.result;
+        const thumbnailURL = await getThumbnailURLFromImageUrl(fullSizeImageURL);
+        const snapshotObject = {
+          fullSizeImage: {
+            src: fullSizeImageURL,
+            type: url.type,
+            size: url.size,
+            modified: this.openmct.time.now()
+          },
+          thumbnailImage: {
+            src: thumbnailURL,
+            modified: this.openmct.time.now()
+          }
+        };
 
-                this.saveCallback(snapshotObject);
+        this.saveCallback(snapshotObject);
 
-                done(true);
-            };
-        } else {
-            done(true);
-        }
+        done(true);
+      };
+    } else {
+      done(true);
     }
+  }
 
-    show(src) {
-        this.painterroInstance = this.painterro.show(src);
-    }
+  show(src) {
+    this.painterroInstance = this.painterro.show(src);
+  }
 }
diff --git a/src/plugins/notebook/utils/removeDialog.js b/src/plugins/notebook/utils/removeDialog.js
index bee7a7bc3a0..2be4edd7ebe 100644
--- a/src/plugins/notebook/utils/removeDialog.js
+++ b/src/plugins/notebook/utils/removeDialog.js
@@ -1,36 +1,38 @@
 export default class RemoveDialog {
-    constructor(openmct, options) {
-        this.name = options.name;
-        this.openmct = openmct;
+  constructor(openmct, options) {
+    this.name = options.name;
+    this.openmct = openmct;
 
-        this.callback = options.callback;
-        this.cssClass = options.cssClass || 'icon-trash';
-        this.description = options.description || 'Remove action dialog';
-        this.iconClass = "error";
-        this.key = 'remove';
-        this.message = options.message || `This action will permanently ${this.name.toLowerCase()}. Do you wish to continue?`;
-    }
+    this.callback = options.callback;
+    this.cssClass = options.cssClass || 'icon-trash';
+    this.description = options.description || 'Remove action dialog';
+    this.iconClass = 'error';
+    this.key = 'remove';
+    this.message =
+      options.message ||
+      `This action will permanently ${this.name.toLowerCase()}. Do you wish to continue?`;
+  }
 
-    show() {
-        const dialog = this.openmct.overlays.dialog({
-            iconClass: this.iconClass,
-            message: this.message,
-            buttons: [
-                {
-                    label: "Ok",
-                    callback: () => {
-                        this.callback(true);
-                        dialog.dismiss();
-                    }
-                },
-                {
-                    label: "Cancel",
-                    callback: () => {
-                        this.callback(false);
-                        dialog.dismiss();
-                    }
-                }
-            ]
-        });
-    }
+  show() {
+    const dialog = this.openmct.overlays.dialog({
+      iconClass: this.iconClass,
+      message: this.message,
+      buttons: [
+        {
+          label: 'Ok',
+          callback: () => {
+            this.callback(true);
+            dialog.dismiss();
+          }
+        },
+        {
+          label: 'Cancel',
+          callback: () => {
+            this.callback(false);
+            dialog.dismiss();
+          }
+        }
+      ]
+    });
+  }
 }
diff --git a/src/plugins/notificationIndicator/components/NotificationIndicator.vue b/src/plugins/notificationIndicator/components/NotificationIndicator.vue
index 5d82f321fe5..98de8a915ff 100644
--- a/src/plugins/notificationIndicator/components/NotificationIndicator.vue
+++ b/src/plugins/notificationIndicator/components/NotificationIndicator.vue
@@ -1,70 +1,98 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div
-    v-if="notifications.length > 0"
+  <div
+    v-if="notifications.length > 0 || showNotificationsOverlay"
     class="c-indicator c-indicator--clickable icon-bell"
     :class="[severityClass]"
->
+  >
     <span class="c-indicator__label">
-        <button @click="toggleNotificationsList(true)">
-            {{ notificationsCountMessage(notifications.length) }}
-        </button>
-        <button @click="dismissAllNotifications()">
-            Clear All
-        </button>
+      <button
+        :aria-label="'Review ' + notificationsCountMessage(notifications.length)"
+        @click="toggleNotificationsList(true)"
+      >
+        {{ notificationsCountMessage(notifications.length) }}
+      </button>
+      <button aria-label="Clear all notifications" @click="dismissAllNotifications()">
+        Clear All
+      </button>
     </span>
     <span class="c-indicator__count">{{ notifications.length }}</span>
 
     <notifications-list
-        v-if="showNotificationsOverlay"
-        :notifications="notifications"
-        @close="toggleNotificationsList"
-        @clear-all="dismissAllNotifications"
+      v-if="showNotificationsOverlay"
+      :notifications="notifications"
+      @close="toggleNotificationsList"
+      @clear-all="dismissAllNotifications"
     />
-</div>
+  </div>
 </template>
 
 <script>
 import NotificationsList from './NotificationsList.vue';
 
 export default {
-    components: {
-        NotificationsList
-    },
-    inject: ['openmct'],
-    data() {
-        return {
-            notifications: this.openmct.notifications.notifications,
-            highest: this.openmct.notifications.highest,
-            showNotificationsOverlay: false
-        };
+  components: {
+    NotificationsList
+  },
+  inject: ['openmct'],
+  data() {
+    return {
+      notifications: this.openmct.notifications.notifications,
+      highest: this.openmct.notifications.highest,
+      showNotificationsOverlay: false
+    };
+  },
+  computed: {
+    severityClass() {
+      return `s-status-${this.highest.severity}`;
+    }
+  },
+  mounted() {
+    this.openmct.notifications.on('notification', this.updateNotifications);
+    this.openmct.notifications.on('dismiss-all', this.updateNotifications);
+  },
+  unmounted() {
+    this.openmct.notifications.off('notification', this.updateNotifications);
+    this.openmct.notifications.off('dismiss-all', this.updateNotifications);
+  },
+  methods: {
+    dismissAllNotifications() {
+      this.openmct.notifications.dismissAllNotifications();
     },
-    computed: {
-        severityClass() {
-            return `s-status-${this.highest.severity}`;
-        }
+    toggleNotificationsList(flag) {
+      this.showNotificationsOverlay = flag;
     },
-    mounted() {
-        this.openmct.notifications.on('notification', this.updateNotifications);
-        this.openmct.notifications.on('dismiss-all', this.updateNotifications);
+    updateNotifications() {
+      this.notifications = [...this.openmct.notifications.notifications];
+      this.highest = this.openmct.notifications.highest;
     },
-    methods: {
-        dismissAllNotifications() {
-            this.openmct.notifications.dismissAllNotifications();
-        },
-        toggleNotificationsList(flag) {
-            this.showNotificationsOverlay = flag;
-        },
-        updateNotifications() {
-            this.notifications = this.openmct.notifications.notifications;
-            this.highest = this.openmct.notifications.highest;
-        },
-        notificationsCountMessage(count) {
-            if (count > 1) {
-                return `${count} Notifications`;
-            } else {
-                return `${count} Notification`;
-            }
-        }
+    notificationsCountMessage(count) {
+      if (count > 1) {
+        return `${count} Notifications`;
+      } else {
+        return `${count} Notification`;
+      }
     }
+  }
 };
 </script>
diff --git a/src/plugins/notificationIndicator/components/NotificationMessage.vue b/src/plugins/notificationIndicator/components/NotificationMessage.vue
index c9b76e75af8..87fcaa2a093 100644
--- a/src/plugins/notificationIndicator/components/NotificationMessage.vue
+++ b/src/plugins/notificationIndicator/components/NotificationMessage.vue
@@ -1,85 +1,119 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div
-    class="c-message"
-    :class="'message-severity-' + notification.model.severity"
->
+  <div class="c-message" role="listitem" :class="'message-severity-' + notification.model.severity">
     <div class="c-ne__time-and-content">
-        <div class="c-ne__time">
-            <span>{{ notification.model.timestamp }}</span>
-        </div>
-        <div class="c-ne__content">
-            <div class="w-message-contents">
-                <div class="c-message__top-bar">
-                    <div class="c-message__title">{{ notification.model.message }}</div>
-                </div>
-                <div class="message-body">
-                    <progress-bar
-                        v-if="isProgressNotification"
-                        :model="progressObject"
-                    />
-                </div>
-            </div>
-        </div>
-        <div class="c-overlay__button-bar">
-            <button
-                v-for="(dialogOption, index) in notification.model.options"
-                :key="index"
-                class="c-button"
-                @click="dialogOption.callback()"
-            >
-                {{ dialogOption.label }}
-            </button>
-            <button
-                v-if="notification.model.primaryOption"
-                class="c-button c-button--major"
-                @click="notification.model.primaryOption.callback()"
-            >
-                {{ notification.model.primaryOption.label }}
-            </button>
+      <div class="c-ne__time">
+        <span>{{ notification.model.timestamp }}</span>
+      </div>
+      <div class="c-ne__content">
+        <div class="w-message-contents">
+          <div class="c-message__top-bar">
+            <div class="c-message__title">{{ notification.model.message }}</div>
+          </div>
+          <div class="message-body">
+            <progress-bar v-if="isProgressNotification" :model="progressObject" />
+          </div>
         </div>
+      </div>
+      <button
+        :aria-label="'Dismiss notification of ' + notification.model.message"
+        class="c-click-icon c-overlay__close-button icon-x"
+        @click="dismiss()"
+      ></button>
+      <div class="c-overlay__button-bar">
+        <button
+          v-for="(dialogOption, index) in notification.model.options"
+          :key="index"
+          class="c-button"
+          @click="dialogOption.callback()"
+        >
+          {{ dialogOption.label }}
+        </button>
+        <button
+          v-if="notification.model.primaryOption"
+          class="c-button c-button--major"
+          @click="notification.model.primaryOption.callback()"
+        >
+          {{ notification.model.primaryOption.label }}
+        </button>
+      </div>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
 import ProgressBar from '../../../ui/components/ProgressBar.vue';
 
 export default {
-    components: {
-        ProgressBar
+  components: {
+    ProgressBar
+  },
+  props: {
+    notification: {
+      type: Object,
+      required: true
     },
-    props: {
-        notification: {
-            type: Object,
-            required: true
-        }
+    closeOverlay: {
+      type: Function,
+      required: true
     },
-    data() {
-        return {
-            isProgressNotification: false,
-            progressPerc: this.notification.model.progressPerc,
-            progressText: this.notification.model.progressText
-        };
-    },
-    computed: {
-        progressObject() {
-            return {
-                progressPerc: this.progressPerc,
-                progressText: this.progressText
-            };
-        }
-    },
-    mounted() {
-        if (this.notification.model.progressPerc) {
-            this.isProgressNotification = true;
-            this.notification.on('progress', this.updateProgressBar);
-        }
+    notificationsCount: {
+      type: Number,
+      required: true
+    }
+  },
+  data() {
+    return {
+      isProgressNotification: false,
+      progressPerc: this.notification.model.progressPerc,
+      progressText: this.notification.model.progressText
+    };
+  },
+  computed: {
+    progressObject() {
+      return {
+        progressPerc: this.progressPerc,
+        progressText: this.progressText
+      };
+    }
+  },
+  mounted() {
+    if (this.notification.model.progressPerc) {
+      this.isProgressNotification = true;
+      this.notification.on('progress', this.updateProgressBar);
+    }
+  },
+  methods: {
+    updateProgressBar(progressPerc, progressText) {
+      this.progressPerc = progressPerc;
+      this.progressText = progressText;
     },
-    methods: {
-        updateProgressBar(progressPerc, progressText) {
-            this.progressPerc = progressPerc;
-            this.progressText = progressText;
-        }
+    dismiss() {
+      this.notification.dismiss();
+      if (this.notificationsCount === 1) {
+        this.closeOverlay();
+      }
     }
+  }
 };
 </script>
diff --git a/src/plugins/notificationIndicator/components/NotificationsList.vue b/src/plugins/notificationIndicator/components/NotificationsList.vue
index 3719576bf5c..4f0fee3912b 100644
--- a/src/plugins/notificationIndicator/components/NotificationsList.vue
+++ b/src/plugins/notificationIndicator/components/NotificationsList.vue
@@ -1,69 +1,96 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div class="t-message-list c-overlay__contents">
+  <div class="t-message-list c-overlay__contents">
     <div class="c-overlay__top-bar">
-        <div class="c-overlay__dialog-title">Notifications</div>
-        <div class="c-overlay__dialog-hint">
-            {{ notificationsCountDisplayMessage(notifications.length) }}
-        </div>
+      <div class="c-overlay__dialog-title">Notifications</div>
+      <div class="c-overlay__dialog-hint">
+        {{ notificationsCountDisplayMessage(notifications.length) }}
+      </div>
     </div>
-    <div class="w-messages c-overlay__messages">
-        <notification-message
-            v-for="notification in notifications"
-            :key="notification.model.timestamp"
-            :notification="notification"
-        />
+    <div role="list" class="w-messages c-overlay__messages">
+      <notification-message
+        v-for="(notification, notificationIndex) in notifications"
+        :key="notificationIndex"
+        :close-overlay="closeOverlay"
+        :notification="notification"
+        :notifications-count="notifications.length"
+      />
     </div>
-</div>
+  </div>
 </template>
 
 <script>
 import NotificationMessage from './NotificationMessage.vue';
 
 export default {
-    components: {
-        NotificationMessage
-    },
-    inject: ['openmct'],
-    props: {
-        notifications: {
-            type: Array,
-            required: true
+  components: {
+    NotificationMessage
+  },
+  inject: ['openmct'],
+  props: {
+    notifications: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: ['close', 'clear-all'],
+  data() {
+    return {};
+  },
+  mounted() {
+    this.openOverlay();
+  },
+  methods: {
+    openOverlay() {
+      this.overlay = this.openmct.overlays.overlay({
+        element: this.$el,
+        size: 'large',
+        dismissable: true,
+        buttons: [
+          {
+            label: 'Clear All Notifications',
+            emphasis: true,
+            callback: () => {
+              this.$emit('clear-all');
+              this.overlay.dismiss();
+            }
+          }
+        ],
+        onDestroy: () => {
+          this.$emit('close', false);
         }
+      });
     },
-    data() {
-        return {};
-    },
-    mounted() {
-        this.openOverlay();
+    closeOverlay() {
+      this.overlay.dismiss();
     },
-    methods: {
-        openOverlay() {
-            this.overlay = this.openmct.overlays.overlay({
-                element: this.$el,
-                size: 'large',
-                dismissable: true,
-                buttons: [
-                    {
-                        label: 'Clear All Notifications',
-                        emphasis: true,
-                        callback: () => {
-                            this.$emit('clear-all');
-                            this.overlay.dismiss();
-                        }
-                    }
-                ],
-                onDestroy: () => {
-                    this.$emit('close', false);
-                }
-            });
-        },
-        notificationsCountDisplayMessage(count) {
-            if (count > 1 || count === 0) {
-                return `Displaying ${count} notifications`;
-            } else {
-                return `Displaying ${count} notification`;
-            }
-        }
+    notificationsCountDisplayMessage(count) {
+      if (count > 1 || count === 0) {
+        return `Displaying ${count} notifications`;
+      } else {
+        return `Displaying ${count} notification`;
+      }
     }
+  }
 };
 </script>
diff --git a/src/plugins/notificationIndicator/plugin.js b/src/plugins/notificationIndicator/plugin.js
index 0bace121407..76e7355a0cf 100644
--- a/src/plugins/notificationIndicator/plugin.js
+++ b/src/plugins/notificationIndicator/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,26 +19,15 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import Vue from 'vue';
 import NotificationIndicator from './components/NotificationIndicator.vue';
 
 export default function plugin() {
-    return function install(openmct) {
-        let component = new Vue ({
-            components: {
-                NotificationIndicator: NotificationIndicator
-            },
-            provide: {
-                openmct
-            },
-            template: '<NotificationIndicator></NotificationIndicator>'
-        });
-
-        let indicator = {
-            key: 'notifications-indicator',
-            element: component.$mount().$el
-        };
-
-        openmct.indicators.add(indicator);
+  return function install(openmct) {
+    let indicator = {
+      key: 'notifications-indicator',
+      vueComponent: NotificationIndicator,
+      priority: openmct.priority.DEFAULT
     };
+    openmct.indicators.add(indicator);
+  };
 }
diff --git a/src/plugins/notificationIndicator/pluginSpec.js b/src/plugins/notificationIndicator/pluginSpec.js
index 5a308b5afd4..4b3e50f5b7b 100644
--- a/src/plugins/notificationIndicator/pluginSpec.js
+++ b/src/plugins/notificationIndicator/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,57 +20,51 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+import { nextTick } from 'vue';
+
 import NotificationIndicatorPlugin from './plugin.js';
-import Vue from 'vue';
-import {
-    createOpenMct,
-    resetApplicationState
-} from 'utils/testing';
 
 describe('the plugin', () => {
-    let notificationIndicatorPlugin;
-    let openmct;
-    let indicatorObject;
-    let indicatorElement;
-    let parentElement;
-    let mockMessages = ['error', 'test', 'notifications'];
-
-    beforeEach((done) => {
-        openmct = createOpenMct();
-
-        notificationIndicatorPlugin = new NotificationIndicatorPlugin();
-        openmct.install(notificationIndicatorPlugin);
+  let notificationIndicatorPlugin;
+  let openmct;
+  let indicatorElement;
+  let parentElement;
+  let mockMessages = ['error', 'test', 'notifications'];
 
-        parentElement = document.createElement('div');
+  beforeEach((done) => {
+    openmct = createOpenMct();
 
-        indicatorObject = openmct.indicators.indicatorObjects.find(indicator => indicator.key === 'notifications-indicator');
-        indicatorElement = indicatorObject.element;
+    notificationIndicatorPlugin = new NotificationIndicatorPlugin();
+    openmct.install(notificationIndicatorPlugin);
 
-        openmct.on('start', () => {
-            mockMessages.forEach(message => {
-                openmct.notifications.error(message);
-            });
-            done();
-        });
+    parentElement = document.createElement('div');
 
-        openmct.startHeadless();
+    openmct.on('start', () => {
+      mockMessages.forEach((message) => {
+        openmct.notifications.error(message);
+      });
+      done();
     });
 
-    afterEach(() => {
-        return resetApplicationState(openmct);
-    });
+    openmct.start();
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
 
-    describe('the indicator plugin element', () => {
-        beforeEach(() => {
-            parentElement.append(indicatorElement);
+  describe('the indicator plugin element', () => {
+    beforeEach(() => {
+      parentElement.append(indicatorElement);
 
-            return Vue.nextTick();
-        });
+      return nextTick();
+    });
 
-        it('notifies the user of the number of notifications', () => {
-            let notificationCountElement = parentElement.querySelector('.c-indicator__count');
+    it('notifies the user of the number of notifications', () => {
+      let notificationCountElement = document.querySelector('.c-indicator__count');
 
-            expect(notificationCountElement.innerText).toEqual(mockMessages.length.toString());
-        });
+      expect(notificationCountElement.innerText).toEqual('1');
     });
+  });
 });
diff --git a/src/plugins/objectMigration/Migrations.js b/src/plugins/objectMigration/Migrations.js
index ccb349bd96b..470e3343e57 100644
--- a/src/plugins/objectMigration/Migrations.js
+++ b/src/plugins/objectMigration/Migrations.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,253 +20,260 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    'uuid'
-], function (
-    uuid
-) {
-    return function Migrations(openmct) {
-        function getColumnNameKeyMap(domainObject) {
-            let composition = openmct.composition.get(domainObject);
-            if (composition) {
-                return composition.load().then(composees => {
-                    return composees.reduce((nameKeyMap, composee) => {
-                        let metadata = openmct.telemetry.getMetadata(composee);
-                        if (metadata !== undefined) {
-                            metadata.values().forEach(value => {
-                                nameKeyMap[value.name] = value.key;
-                            });
-                        }
+import { v4 as uuid } from 'uuid';
 
-                        return nameKeyMap;
-                    }, {});
-                });
-            } else {
-                return Promise.resolve([]);
-            }
-        }
+export default function Migrations(openmct) {
+  function getColumnNameKeyMap(domainObject) {
+    let composition = openmct.composition.get(domainObject);
+    if (composition) {
+      return composition.load().then((composees) => {
+        return composees.reduce((nameKeyMap, composee) => {
+          let metadata = openmct.telemetry.getMetadata(composee);
+          if (metadata !== undefined) {
+            metadata.values().forEach((value) => {
+              nameKeyMap[value.name] = value.key;
+            });
+          }
 
-        function isTelemetry(domainObject) {
-            if (openmct.telemetry.isTelemetryObject(domainObject)
-                && domainObject.type !== 'summary-widget'
-                && domainObject.type !== 'example.imagery') {
-                return true;
-            } else {
-                return false;
-            }
-        }
+          return nameKeyMap;
+        }, {});
+      });
+    } else {
+      return Promise.resolve([]);
+    }
+  }
 
-        function migrateDisplayLayout(domainObject, childObjects) {
-            const DEFAULT_GRID_SIZE = [32, 32];
-            let migratedObject = Object.assign({}, domainObject);
-            let panels = migratedObject.configuration.layout.panels;
-            let items = [];
+  function isTelemetry(domainObject) {
+    if (
+      openmct.telemetry.isTelemetryObject(domainObject) &&
+      domainObject.type !== 'summary-widget' &&
+      domainObject.type !== 'example.imagery'
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  }
 
-            Object.keys(panels).forEach(key => {
-                let panel = panels[key];
-                let childDomainObject = childObjects[key];
-                let identifier = undefined;
+  function migrateDisplayLayout(domainObject, childObjects) {
+    const DEFAULT_GRID_SIZE = [32, 32];
+    let migratedObject = Object.assign({}, domainObject);
+    let panels = migratedObject.configuration.layout.panels;
+    let items = [];
 
-                if (isTelemetry(childDomainObject)) {
-                    // If object is a telemetry point, convert it to a plot and
-                    // replace the object in migratedObject composition with the plot.
-                    identifier = {
-                        key: uuid(),
-                        namespace: migratedObject.identifier.namespace
-                    };
-                    let plotObject = {
-                        identifier: identifier,
-                        location: childDomainObject.location,
-                        name: childDomainObject.name,
-                        type: "telemetry.plot.overlay"
-                    };
-                    let plotType = openmct.types.get('telemetry.plot.overlay');
-                    plotType.definition.initialize(plotObject);
-                    plotObject.composition.push(childDomainObject.identifier);
-                    openmct.objects.mutate(plotObject, 'persisted', Date.now());
+    Object.keys(panels).forEach((key) => {
+      let panel = panels[key];
+      let childDomainObject = childObjects[key];
+      let identifier = undefined;
 
-                    let keyString = openmct.objects.makeKeyString(childDomainObject.identifier);
-                    let clonedComposition = Object.assign([], migratedObject.composition);
-                    clonedComposition.forEach((objIdentifier, index) => {
-                        if (openmct.objects.makeKeyString(objIdentifier) === keyString) {
-                            migratedObject.composition[index] = plotObject.identifier;
-                        }
-                    });
-                }
+      if (isTelemetry(childDomainObject)) {
+        // If object is a telemetry point, convert it to a plot and
+        // replace the object in migratedObject composition with the plot.
+        identifier = {
+          key: uuid(),
+          namespace: migratedObject.identifier.namespace
+        };
+        let plotObject = {
+          identifier: identifier,
+          location: childDomainObject.location,
+          name: childDomainObject.name,
+          type: 'telemetry.plot.overlay'
+        };
+        let plotType = openmct.types.get('telemetry.plot.overlay');
+        plotType.definition.initialize(plotObject);
+        plotObject.composition.push(childDomainObject.identifier);
+        openmct.objects.mutate(plotObject, 'persisted', Date.now());
 
-                items.push({
-                    width: panel.dimensions[0],
-                    height: panel.dimensions[1],
-                    x: panel.position[0],
-                    y: panel.position[1],
-                    identifier: identifier || childDomainObject.identifier,
-                    id: uuid(),
-                    type: 'subobject-view',
-                    hasFrame: panel.hasFrame
-                });
-            });
+        let keyString = openmct.objects.makeKeyString(childDomainObject.identifier);
+        let clonedComposition = Object.assign([], migratedObject.composition);
+        clonedComposition.forEach((objIdentifier, index) => {
+          if (openmct.objects.makeKeyString(objIdentifier) === keyString) {
+            migratedObject.composition[index] = plotObject.identifier;
+          }
+        });
+      }
 
-            migratedObject.configuration.items = items;
-            migratedObject.configuration.layoutGrid = migratedObject.layoutGrid || DEFAULT_GRID_SIZE;
-            delete migratedObject.layoutGrid;
-            delete migratedObject.configuration.layout;
+      items.push({
+        width: panel.dimensions[0],
+        height: panel.dimensions[1],
+        x: panel.position[0],
+        y: panel.position[1],
+        identifier: identifier || childDomainObject.identifier,
+        id: uuid(),
+        type: 'subobject-view',
+        hasFrame: panel.hasFrame
+      });
+    });
 
-            return migratedObject;
-        }
+    migratedObject.configuration.items = items;
+    migratedObject.configuration.layoutGrid = migratedObject.layoutGrid || DEFAULT_GRID_SIZE;
+    delete migratedObject.layoutGrid;
+    delete migratedObject.configuration.layout;
 
-        function migrateFixedPositionConfiguration(elements, telemetryObjects, gridSize) {
-            const DEFAULT_STROKE = "transparent";
-            const DEFAULT_SIZE = "13px";
-            const DEFAULT_COLOR = "";
-            const DEFAULT_FILL = "";
-            let items = [];
+    return migratedObject;
+  }
 
-            elements.forEach(element => {
-                let item = {
-                    x: element.x,
-                    y: element.y,
-                    width: element.width,
-                    height: element.height,
-                    id: uuid()
-                };
+  function migrateFixedPositionConfiguration(elements, telemetryObjects, gridSize) {
+    const DEFAULT_STROKE = 'transparent';
+    const DEFAULT_SIZE = '13px';
+    const DEFAULT_COLOR = '';
+    const DEFAULT_FILL = '';
+    let items = [];
 
-                if (!element.useGrid) {
-                    item.x = Math.round(item.x / gridSize[0]);
-                    item.y = Math.round(item.y / gridSize[1]);
-                    item.width = Math.round(item.width / gridSize[0]);
-                    item.height = Math.round(item.height / gridSize[1]);
-                }
+    elements.forEach((element) => {
+      let item = {
+        x: element.x,
+        y: element.y,
+        width: element.width,
+        height: element.height,
+        id: uuid()
+      };
 
-                if (element.type === "fixed.telemetry") {
-                    item.type = "telemetry-view";
-                    item.stroke = element.stroke || DEFAULT_STROKE;
-                    item.fill = element.fill || DEFAULT_FILL;
-                    item.color = element.color || DEFAULT_COLOR;
-                    item.size = element.size || DEFAULT_SIZE;
-                    item.identifier = telemetryObjects[element.id].identifier;
-                    item.displayMode = element.titled ? 'all' : 'value';
-                    item.value = openmct.telemetry.getMetadata(telemetryObjects[element.id]).getDefaultDisplayValue();
-                } else if (element.type === 'fixed.box') {
-                    item.type = "box-view";
-                    item.stroke = element.stroke || DEFAULT_STROKE;
-                    item.fill = element.fill || DEFAULT_FILL;
-                } else if (element.type === 'fixed.line') {
-                    item.type = "line-view";
-                    item.x2 = element.x2;
-                    item.y2 = element.y2;
-                    item.stroke = element.stroke || DEFAULT_STROKE;
-                    delete item.height;
-                    delete item.width;
-                } else if (element.type === 'fixed.text') {
-                    item.type = "text-view";
-                    item.text = element.text;
-                    item.stroke = element.stroke || DEFAULT_STROKE;
-                    item.fill = element.fill || DEFAULT_FILL;
-                    item.color = element.color || DEFAULT_COLOR;
-                    item.size = element.size || DEFAULT_SIZE;
-                } else if (element.type === 'fixed.image') {
-                    item.type = "image-view";
-                    item.url = element.url;
-                    item.stroke = element.stroke || DEFAULT_STROKE;
-                }
+      if (!element.useGrid) {
+        item.x = Math.round(item.x / gridSize[0]);
+        item.y = Math.round(item.y / gridSize[1]);
+        item.width = Math.round(item.width / gridSize[0]);
+        item.height = Math.round(item.height / gridSize[1]);
+      }
 
-                items.push(item);
-            });
+      if (element.type === 'fixed.telemetry') {
+        item.type = 'telemetry-view';
+        item.stroke = element.stroke || DEFAULT_STROKE;
+        item.fill = element.fill || DEFAULT_FILL;
+        item.color = element.color || DEFAULT_COLOR;
+        item.size = element.size || DEFAULT_SIZE;
+        item.identifier = telemetryObjects[element.id].identifier;
+        item.displayMode = element.titled ? 'all' : 'value';
+        item.value = openmct.telemetry
+          .getMetadata(telemetryObjects[element.id])
+          .getDefaultDisplayValue()?.key;
+      } else if (element.type === 'fixed.box') {
+        item.type = 'box-view';
+        item.stroke = element.stroke || DEFAULT_STROKE;
+        item.fill = element.fill || DEFAULT_FILL;
+      } else if (element.type === 'fixed.line') {
+        item.type = 'line-view';
+        item.x2 = element.x2;
+        item.y2 = element.y2;
+        item.stroke = element.stroke || DEFAULT_STROKE;
+        delete item.height;
+        delete item.width;
+      } else if (element.type === 'fixed.text') {
+        item.type = 'text-view';
+        item.text = element.text;
+        item.stroke = element.stroke || DEFAULT_STROKE;
+        item.fill = element.fill || DEFAULT_FILL;
+        item.color = element.color || DEFAULT_COLOR;
+        item.size = element.size || DEFAULT_SIZE;
+      } else if (element.type === 'fixed.image') {
+        item.type = 'image-view';
+        item.url = element.url;
+        item.stroke = element.stroke || DEFAULT_STROKE;
+      }
 
-            return items;
-        }
+      items.push(item);
+    });
 
-        return [
-            {
-                check(domainObject) {
-                    return domainObject.type === 'layout'
-                        && domainObject.configuration
-                        && domainObject.configuration.layout;
-                },
-                migrate(domainObject) {
-                    let childObjects = {};
-                    let promises = Object.keys(domainObject.configuration.layout.panels).map(key => {
-                        return openmct.objects.get(key)
-                            .then(object => {
-                                childObjects[key] = object;
-                            });
-                    });
+    return items;
+  }
 
-                    return Promise.all(promises)
-                        .then(function () {
-                            return migrateDisplayLayout(domainObject, childObjects);
-                        });
-                }
-            },
-            {
-                check(domainObject) {
-                    return domainObject.type === 'telemetry.fixed'
-                        && domainObject.configuration
-                        && domainObject.configuration['fixed-display'];
-                },
-                migrate(domainObject) {
-                    const DEFAULT_GRID_SIZE = [64, 16];
-                    let newLayoutObject = {
-                        identifier: domainObject.identifier,
-                        location: domainObject.location,
-                        name: domainObject.name,
-                        type: "layout"
-                    };
-                    let gridSize = domainObject.layoutGrid || DEFAULT_GRID_SIZE;
-                    let layoutType = openmct.types.get('layout');
-                    layoutType.definition.initialize(newLayoutObject);
-                    newLayoutObject.composition = domainObject.composition;
-                    newLayoutObject.configuration.layoutGrid = gridSize;
+  return [
+    {
+      check(domainObject) {
+        return (
+          domainObject?.type === 'layout' &&
+          domainObject.configuration &&
+          domainObject.configuration.layout
+        );
+      },
+      migrate(domainObject) {
+        let childObjects = {};
+        let promises = Object.keys(domainObject.configuration.layout.panels).map((key) => {
+          return openmct.objects.get(key).then((object) => {
+            childObjects[key] = object;
+          });
+        });
 
-                    let elements = domainObject.configuration['fixed-display'].elements;
-                    let telemetryObjects = {};
-                    let promises = elements.map(element => {
-                        if (element.id) {
-                            return openmct.objects.get(element.id)
-                                .then(object => {
-                                    telemetryObjects[element.id] = object;
-                                });
-                        } else {
-                            return Promise.resolve(false);
-                        }
-                    });
+        return Promise.all(promises).then(function () {
+          return migrateDisplayLayout(domainObject, childObjects);
+        });
+      }
+    },
+    {
+      check(domainObject) {
+        return (
+          domainObject?.type === 'telemetry.fixed' &&
+          domainObject.configuration &&
+          domainObject.configuration['fixed-display']
+        );
+      },
+      migrate(domainObject) {
+        const DEFAULT_GRID_SIZE = [64, 16];
+        let newLayoutObject = {
+          identifier: domainObject.identifier,
+          location: domainObject.location,
+          name: domainObject.name,
+          type: 'layout'
+        };
+        let gridSize = domainObject.layoutGrid || DEFAULT_GRID_SIZE;
+        let layoutType = openmct.types.get('layout');
+        layoutType.definition.initialize(newLayoutObject);
+        newLayoutObject.composition = domainObject.composition;
+        newLayoutObject.configuration.layoutGrid = gridSize;
+
+        let elements = domainObject.configuration['fixed-display'].elements;
+        let telemetryObjects = {};
+        let promises = elements.map((element) => {
+          if (element.id) {
+            return openmct.objects.get(element.id).then((object) => {
+              telemetryObjects[element.id] = object;
+            });
+          } else {
+            return Promise.resolve(false);
+          }
+        });
 
-                    return Promise.all(promises)
-                        .then(function () {
-                            newLayoutObject.configuration.items =
-                                migrateFixedPositionConfiguration(elements, telemetryObjects, gridSize);
+        return Promise.all(promises).then(function () {
+          newLayoutObject.configuration.items = migrateFixedPositionConfiguration(
+            elements,
+            telemetryObjects,
+            gridSize
+          );
 
-                            return newLayoutObject;
-                        });
-                }
-            },
-            {
-                check(domainObject) {
-                    return domainObject.type === 'table'
-                        && domainObject.configuration
-                        && domainObject.configuration.table;
-                },
-                migrate(domainObject) {
-                    let currentTableConfiguration = domainObject.configuration.table || {};
-                    let currentColumnConfiguration = currentTableConfiguration.columns || {};
+          return newLayoutObject;
+        });
+      }
+    },
+    {
+      check(domainObject) {
+        return (
+          domainObject?.type === 'table' &&
+          domainObject.configuration &&
+          domainObject.configuration.table
+        );
+      },
+      migrate(domainObject) {
+        let currentTableConfiguration = domainObject.configuration.table || {};
+        let currentColumnConfiguration = currentTableConfiguration.columns || {};
 
-                    return getColumnNameKeyMap(domainObject).then(nameKeyMap => {
-                        let hiddenColumns = Object.keys(currentColumnConfiguration).filter(columnName => {
-                            return currentColumnConfiguration[columnName] === false;
-                        }).reduce((hiddenColumnsMap, hiddenColumnName) => {
-                            let key = nameKeyMap[hiddenColumnName];
-                            hiddenColumnsMap[key] = true;
+        return getColumnNameKeyMap(domainObject).then((nameKeyMap) => {
+          let hiddenColumns = Object.keys(currentColumnConfiguration)
+            .filter((columnName) => {
+              return currentColumnConfiguration[columnName] === false;
+            })
+            .reduce((hiddenColumnsMap, hiddenColumnName) => {
+              let key = nameKeyMap[hiddenColumnName];
+              hiddenColumnsMap[key] = true;
 
-                            return hiddenColumnsMap;
-                        }, {});
+              return hiddenColumnsMap;
+            }, {});
 
-                        domainObject.configuration.hiddenColumns = hiddenColumns;
-                        delete domainObject.configuration.table;
+          domainObject.configuration.hiddenColumns = hiddenColumns;
+          delete domainObject.configuration.table;
 
-                        return domainObject;
-                    });
-                }
-            }
-        ];
-    };
-});
+          return domainObject;
+        });
+      }
+    }
+  ];
+}
diff --git a/src/plugins/objectMigration/plugin.js b/src/plugins/objectMigration/plugin.js
index f481f7a9e23..0e53c97f7fb 100644
--- a/src/plugins/objectMigration/plugin.js
+++ b/src/plugins/objectMigration/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -23,33 +23,30 @@
 import Migrations from './Migrations.js';
 
 export default function () {
-    return function (openmct) {
-        let migrations = Migrations(openmct);
+  return function (openmct) {
+    let migrations = Migrations(openmct);
 
-        function needsMigration(domainObject) {
-            return migrations.some(m => m.check(domainObject));
-        }
+    function needsMigration(domainObject) {
+      return migrations.some((m) => m.check(domainObject));
+    }
 
-        function migrateObject(domainObject) {
-            return migrations.filter(m => m.check(domainObject))[0]
-                .migrate(domainObject);
-        }
+    function migrateObject(domainObject) {
+      return migrations.filter((m) => m.check(domainObject))[0].migrate(domainObject);
+    }
 
-        let wrappedFunction = openmct.objects.get;
-        openmct.objects.get = function migrate(identifier) {
-            return wrappedFunction.apply(openmct.objects, [identifier])
-                .then(function (object) {
-                    if (needsMigration(object)) {
-                        migrateObject(object)
-                            .then(newObject => {
-                                openmct.objects.mutate(newObject, 'persisted', Date.now());
+    let wrappedFunction = openmct.objects.get;
+    openmct.objects.get = function migrate() {
+      return wrappedFunction.apply(openmct.objects, [...arguments]).then(function (object) {
+        if (needsMigration(object)) {
+          migrateObject(object).then((newObject) => {
+            openmct.objects.mutate(newObject, 'persisted', Date.now());
 
-                                return newObject;
-                            });
-                    }
+            return newObject;
+          });
+        }
 
-                    return object;
-                });
-        };
+        return object;
+      });
     };
+  };
 }
diff --git a/src/plugins/openInNewTabAction/openInNewTabAction.js b/src/plugins/openInNewTabAction/openInNewTabAction.js
index d5453688f5a..501c4431b6c 100644
--- a/src/plugins/openInNewTabAction/openInNewTabAction.js
+++ b/src/plugins/openInNewTabAction/openInNewTabAction.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,20 +19,20 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import objectPathToUrl from '/src/tools/url';
+import objectPathToUrl from '/src/tools/url.js';
 export default class OpenInNewTab {
-    constructor(openmct) {
-        this.name = 'Open In New Tab';
-        this.key = 'newTab';
-        this.description = 'Open in a new browser tab';
-        this.group = "windowing";
-        this.priority = 10;
-        this.cssClass = "icon-new-window";
+  constructor(openmct) {
+    this.name = 'Open In New Tab';
+    this.key = 'newTab';
+    this.description = 'Open in a new browser tab';
+    this.group = 'windowing';
+    this.priority = 10;
+    this.cssClass = 'icon-new-window';
 
-        this._openmct = openmct;
-    }
-    invoke(objectPath) {
-        let url = objectPathToUrl(this._openmct, objectPath);
-        window.open(url);
-    }
+    this._openmct = openmct;
+  }
+  invoke(objectPath, urlParams = undefined) {
+    let url = objectPathToUrl(this._openmct, objectPath, urlParams);
+    window.open(url);
+  }
 }
diff --git a/src/plugins/openInNewTabAction/plugin.js b/src/plugins/openInNewTabAction/plugin.js
index 5435f828848..8eba185817f 100644
--- a/src/plugins/openInNewTabAction/plugin.js
+++ b/src/plugins/openInNewTabAction/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,10 +19,10 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import OpenInNewTabAction from './openInNewTabAction';
+import OpenInNewTabAction from './openInNewTabAction.js';
 
 export default function () {
-    return function (openmct) {
-        openmct.actions.register(new OpenInNewTabAction(openmct));
-    };
+  return function (openmct) {
+    openmct.actions.register(new OpenInNewTabAction(openmct));
+  };
 }
diff --git a/src/plugins/openInNewTabAction/pluginSpec.js b/src/plugins/openInNewTabAction/pluginSpec.js
index c1144857f71..684689fcdf1 100644
--- a/src/plugins/openInNewTabAction/pluginSpec.js
+++ b/src/plugins/openInNewTabAction/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,57 +19,56 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import {
-    createOpenMct,
-    resetApplicationState,
-    spyOnBuiltins
-} from 'utils/testing';
+import { createOpenMct, resetApplicationState, spyOnBuiltins } from 'utils/testing';
 
-describe("the plugin", () => {
-    let openmct;
-    let openInNewTabAction;
-    let mockObjectPath;
+describe('the plugin', () => {
+  let openmct;
+  let openInNewTabAction;
+  let mockObjectPath;
 
-    beforeEach((done) => {
-        openmct = createOpenMct();
+  beforeEach((done) => {
+    openmct = createOpenMct();
 
-        openmct.on('start', done);
-        openmct.startHeadless();
+    openmct.on('start', done);
+    openmct.startHeadless();
 
-        openInNewTabAction = openmct.actions._allActions.newTab;
-    });
+    openInNewTabAction = openmct.actions._allActions.newTab;
+  });
 
-    afterEach(() => {
-        return resetApplicationState(openmct);
-    });
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
 
-    it('installs the open in new tab action', () => {
-        expect(openInNewTabAction).toBeDefined();
-    });
+  it('installs the open in new tab action', () => {
+    expect(openInNewTabAction).toBeDefined();
+  });
 
-    describe('when invoked', () => {
-
-        beforeEach(async () => {
-            mockObjectPath = [{
-                name: 'mock folder',
-                type: 'folder',
-                identifier: {
-                    key: 'mock-folder',
-                    namespace: ''
-                }
-            }];
-            spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve({
-                identifier: {
-                    namespace: '',
-                    key: 'test'
-                }
-            }));
-            spyOnBuiltins(['open']);
-            await openInNewTabAction.invoke(mockObjectPath);
-        });
+  describe('when invoked', () => {
+    beforeEach(async () => {
+      mockObjectPath = [
+        {
+          name: 'mock folder',
+          type: 'folder',
+          identifier: {
+            key: 'mock-folder',
+            namespace: ''
+          }
+        }
+      ];
+      spyOn(openmct.objects, 'get').and.returnValue(
+        Promise.resolve({
+          identifier: {
+            namespace: '',
+            key: 'test'
+          }
+        })
+      );
+      spyOnBuiltins(['open']);
+      await openInNewTabAction.invoke(mockObjectPath);
+    });
 
-        it('it opens in a new tab', () => {
-            expect(window.open).toHaveBeenCalled();
-        });
+    it('it opens in a new tab', () => {
+      expect(window.open).toHaveBeenCalled();
     });
+  });
 });
diff --git a/src/plugins/operatorStatus/AbstractStatusIndicator.js b/src/plugins/operatorStatus/AbstractStatusIndicator.js
new file mode 100644
index 00000000000..a403d6dedef
--- /dev/null
+++ b/src/plugins/operatorStatus/AbstractStatusIndicator.js
@@ -0,0 +1,106 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import raf from '@/utils/raf';
+
+export default class AbstractStatusIndicator {
+  #popupComponent;
+  #indicator;
+  #configuration;
+
+  /**
+   * @param {*} openmct the Open MCT API (proper typescript doc to come)
+   * @param {import('@/api/user/UserAPI').UserAPIConfiguration} configuration Per-deployment status styling. See the type definition in UserAPI
+   */
+  constructor(openmct, configuration) {
+    this.openmct = openmct;
+    this.#configuration = configuration;
+
+    this.showPopup = this.showPopup.bind(this);
+    this.clearPopup = this.clearPopup.bind(this);
+    this.positionBox = this.positionBox.bind(this);
+    this.positionBox = raf(this.positionBox);
+
+    this.#indicator = this.createIndicator();
+    this.#popupComponent = this.createPopupComponent();
+  }
+
+  install() {
+    this.openmct.indicators.add(this.#indicator);
+  }
+
+  showPopup() {
+    const popupElement = this.getPopupElement();
+
+    document.body.appendChild(popupElement.$el);
+    //Use capture so we don't trigger immediately on the same iteration of the event loop
+    document.addEventListener('click', this.clearPopup, {
+      capture: true
+    });
+
+    this.positionBox();
+
+    window.addEventListener('resize', this.positionBox);
+  }
+
+  positionBox() {
+    const popupElement = this.getPopupElement();
+    const indicator = this.getIndicator();
+
+    let indicatorBox = indicator.element.getBoundingClientRect();
+    popupElement.positionX = indicatorBox.left;
+    popupElement.positionY = indicatorBox.bottom;
+
+    const popupRight = popupElement.positionX + popupElement.$el.clientWidth;
+    const offsetLeft = Math.min(window.innerWidth - popupRight, 0);
+    popupElement.positionX = popupElement.positionX + offsetLeft;
+  }
+
+  clearPopup(clickAwayEvent) {
+    const popupElement = this.getPopupElement();
+
+    if (!popupElement.$el.contains(clickAwayEvent.target)) {
+      popupElement.$el.remove();
+      document.removeEventListener('click', this.clearPopup);
+      window.removeEventListener('resize', this.positionBox);
+    }
+  }
+
+  createPopupComponent() {
+    throw new Error('Must override createPopupElement method');
+  }
+
+  getPopupElement() {
+    return this.#popupComponent;
+  }
+
+  createIndicator() {
+    throw new Error('Must override createIndicator method');
+  }
+
+  getIndicator() {
+    return this.#indicator;
+  }
+
+  getConfiguration() {
+    return this.#configuration;
+  }
+}
diff --git a/src/plugins/operatorStatus/operator-status.scss b/src/plugins/operatorStatus/operator-status.scss
new file mode 100644
index 00000000000..4bd3bb5b35a
--- /dev/null
+++ b/src/plugins/operatorStatus/operator-status.scss
@@ -0,0 +1,162 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+$statusCountWidth: 30px;
+
+.c-status-poll-panel {
+  @include menuOuter();
+  display: flex;
+  flex-direction: column;
+  padding: $interiorMarginLg;
+  min-width: 350px;
+  max-width: 35%;
+
+  > * + * {
+    margin-top: $interiorMarginLg;
+  }
+
+  *:before {
+    font-size: 0.8em;
+    margin-right: $interiorMarginSm;
+  }
+
+  &__section {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+
+    > * + * {
+      margin-left: $interiorMarginLg;
+    }
+  }
+
+  &__top {
+    text-transform: uppercase;
+  }
+
+  &__user-role,
+  &__updated {
+    opacity: 50%;
+  }
+
+  &__updated {
+    flex: 1 1 auto;
+    text-align: right;
+  }
+
+  &__poll-question {
+    background: $colorBodyFg;
+    color: $colorBodyBg;
+    border-radius: $controlCr;
+    font-weight: bold;
+    padding: $interiorMarginSm $interiorMargin;
+
+    .c-status-poll-panel--admin & {
+      background: rgba($colorBodyFg, 0.1);
+      color: $colorBodyFg;
+    }
+  }
+
+  /****** Admin interface */
+  &__content {
+    $m: $interiorMargin;
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    grid-column-gap: $m;
+    grid-row-gap: $m;
+
+    [class*='__label'] {
+      padding: 3px 0;
+    }
+
+    [class*='__label'] {
+      padding: 3px 0;
+    }
+
+    [class*='__poll-table'] {
+      grid-column: span 2;
+    }
+
+    [class*='new-question'] {
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+      > * + * {
+        margin-left: $interiorMargin;
+      }
+
+      input {
+        flex: 1 1 auto;
+        height: $btnStdH;
+      }
+
+      button {
+        flex: 0 0 auto;
+      }
+    }
+  }
+}
+
+.c-status-poll-report {
+  display: flex;
+  flex-direction: row;
+  > * + * {
+    margin-left: $interiorMargin;
+  }
+
+  &__count {
+    background: rgba($colorBodyFg, 0.2);
+    border-radius: $controlCr;
+    display: flex;
+    flex-direction: row;
+    font-size: 1.25em;
+    align-items: center;
+    padding: $interiorMarginSm $interiorMarginLg;
+
+    &-type {
+      line-height: 1em;
+      opacity: 0.6;
+    }
+  }
+  &__actions {
+    display: flex;
+    flex: auto;
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}
+
+.c-indicator {
+  &:before {
+    // Indicator icon
+    color: $colorKey;
+  }
+
+  &--operator-status {
+    cursor: pointer;
+    max-width: 150px;
+
+    @include hover() {
+      background: $colorIndicatorBgHov;
+    }
+  }
+}
diff --git a/src/plugins/operatorStatus/operatorStatus/OperatorStatus.vue b/src/plugins/operatorStatus/operatorStatus/OperatorStatus.vue
new file mode 100644
index 00000000000..3671d865f33
--- /dev/null
+++ b/src/plugins/operatorStatus/operatorStatus/OperatorStatus.vue
@@ -0,0 +1,197 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div :style="position" class="c-status-poll-panel c-status-poll-panel--operator" @click.stop>
+    <div class="c-status-poll-panel__section c-status-poll-panel__top">
+      <div class="c-status-poll-panel__title">Status Poll</div>
+      <div class="c-status-poll-panel__user-role icon-person">{{ role }}</div>
+      <div class="c-status-poll-panel__updated">{{ pollQuestionUpdated }}</div>
+    </div>
+
+    <div class="c-status-poll-panel__section c-status-poll-panel__poll-question">
+      {{ currentPollQuestion }}
+    </div>
+
+    <div class="c-status-poll-panel__section c-status-poll-panel__bottom">
+      <div class="c-status-poll-panel__set-status-label">My status:</div>
+      <select v-model="selectedStatus" name="setStatus" @change="changeStatus">
+        <option v-for="status in allStatuses" :key="status.key" :value="status.key">
+          {{ status.label }}
+        </option>
+      </select>
+    </div>
+  </div>
+</template>
+
+<script>
+const DEFAULT_POLL_QUESTION = 'NO POLL QUESTION';
+export default {
+  inject: ['openmct', 'indicator', 'configuration'],
+  props: {
+    positionX: {
+      type: Number,
+      required: true
+    },
+    positionY: {
+      type: Number,
+      required: true
+    }
+  },
+  data() {
+    return {
+      role: '--',
+      pollQuestionUpdated: '--',
+      currentPollQuestion: DEFAULT_POLL_QUESTION,
+      selectedStatus: undefined,
+      allStatuses: []
+    };
+  },
+  computed: {
+    position() {
+      return {
+        position: 'absolute',
+        left: `${this.positionX}px`,
+        top: `${this.positionY}px`
+      };
+    },
+    canProvideStatusForRole() {
+      return this.openmct.user.canProvideStatusForRole(this.role);
+    }
+  },
+  beforeUnmount() {
+    this.openmct.user.status.off('statusChange', this.setStatus);
+    this.openmct.user.status.off('pollQuestionChange', this.setPollQuestion);
+    this.openmct.user.off('roleChanged', this.fetchMyStatus);
+  },
+  async mounted() {
+    this.unsubscribe = [];
+    await this.fetchUser();
+    this.fetchPossibleStatusesForUser();
+    this.fetchCurrentPoll();
+    await this.fetchMyStatus();
+    this.subscribeToMyStatus();
+    this.subscribeToPollQuestion();
+    this.subscribeToRoleChange();
+  },
+  methods: {
+    async fetchUser() {
+      this.user = await this.openmct.user.getCurrentUser();
+    },
+    async fetchCurrentPoll() {
+      const pollQuestion = await this.openmct.user.status.getPollQuestion();
+      if (pollQuestion !== undefined) {
+        this.setPollQuestion(pollQuestion);
+      }
+    },
+    async fetchPossibleStatusesForUser() {
+      this.allStatuses = await this.openmct.user.status.getPossibleStatuses();
+    },
+    setPollQuestion(pollQuestion) {
+      this.currentPollQuestion = pollQuestion.question;
+      this.pollQuestionUpdated = new Date(pollQuestion.timestamp).toISOString();
+
+      this.indicator.text(pollQuestion?.question || '');
+    },
+    async fetchMyStatus() {
+      // hide indicator for observer
+      const isStatusCapable = await this.openmct.user.canProvideStatusForRole();
+      if (!isStatusCapable) {
+        this.indicator.text('');
+        this.indicator.statusClass('hidden');
+
+        return;
+      }
+
+      const activeRole = await this.openmct.user.getActiveRole();
+      if (!activeRole) {
+        return;
+      }
+
+      this.role = activeRole;
+      const status = await this.openmct.user.status.getStatusForRole(activeRole);
+      if (status !== undefined) {
+        this.setStatus({ role: this.role, status });
+      }
+    },
+    subscribeToMyStatus() {
+      this.openmct.user.status.on('statusChange', this.setStatus);
+    },
+    subscribeToPollQuestion() {
+      this.openmct.user.status.on('pollQuestionChange', this.setPollQuestion);
+    },
+    subscribeToRoleChange() {
+      this.openmct.user.on('roleChanged', this.fetchMyStatus);
+    },
+    setStatus({ role, status }) {
+      if (role !== this.role) {
+        // not my role
+        return;
+      }
+      status = this.applyStyling(status);
+      this.selectedStatus = status.key;
+      this.indicator.iconClass(status.iconClassPoll);
+      this.indicator.statusClass(status.statusClass);
+      if (this.isDefaultStatus(status)) {
+        this.indicator.text(this.currentPollQuestion);
+      } else {
+        this.indicator.text(status.label);
+      }
+    },
+    isDefaultStatus(status) {
+      return status.key === this.allStatuses[0].key;
+    },
+    findStatusByKey(statusKey) {
+      return this.allStatuses.find((possibleMatch) => possibleMatch.key === statusKey);
+    },
+    async changeStatus() {
+      if (!this.openmct.user.canProvideStatusForRole()) {
+        this.openmct.notifications.error('Selected role is ineligible to provide operator status');
+
+        return;
+      }
+
+      if (this.selectedStatus !== undefined) {
+        const statusObject = this.findStatusByKey(this.selectedStatus);
+
+        const result = await this.openmct.user.status.setStatusForRole(statusObject);
+        if (result === true) {
+          this.openmct.notifications.info('Successfully set operator status');
+        } else {
+          this.openmct.notifications.error('Unable to set operator status');
+        }
+      }
+    },
+    applyStyling(status) {
+      const stylesForStatus = this.configuration?.statusStyles?.[status.label];
+
+      if (stylesForStatus !== undefined) {
+        return {
+          ...status,
+          ...stylesForStatus
+        };
+      } else {
+        return status;
+      }
+    }
+  }
+};
+</script>
diff --git a/src/plugins/operatorStatus/operatorStatus/OperatorStatusIndicator.js b/src/plugins/operatorStatus/operatorStatus/OperatorStatusIndicator.js
new file mode 100644
index 00000000000..aabc773a5e4
--- /dev/null
+++ b/src/plugins/operatorStatus/operatorStatus/OperatorStatusIndicator.js
@@ -0,0 +1,68 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import mount from 'utils/mount';
+
+import AbstractStatusIndicator from '../AbstractStatusIndicator.js';
+import OperatorStatusComponent from './OperatorStatus.vue';
+
+export default class OperatorStatusIndicator extends AbstractStatusIndicator {
+  createPopupComponent() {
+    const indicator = this.getIndicator();
+    const { vNode } = mount(
+      {
+        components: {
+          OperatorStatus: OperatorStatusComponent
+        },
+        provide: {
+          openmct: this.openmct,
+          indicator: indicator,
+          configuration: this.getConfiguration()
+        },
+        data() {
+          return {
+            positionX: 0,
+            positionY: 0
+          };
+        },
+        template: '<operator-status :positionX="positionX" :positionY="positionY" />'
+      },
+      {
+        app: this.openmct.app
+      }
+    );
+
+    return vNode.componentInstance;
+  }
+
+  createIndicator() {
+    const operatorIndicator = this.openmct.indicators.simpleIndicator();
+
+    operatorIndicator.text('My Operator Status');
+    operatorIndicator.description('Set my operator status');
+    operatorIndicator.iconClass('icon-status-poll-question-mark');
+    operatorIndicator.element.classList.add('c-indicator--operator-status');
+    operatorIndicator.element.classList.add('no-minify');
+    operatorIndicator.on('click', this.showPopup);
+
+    return operatorIndicator;
+  }
+}
diff --git a/src/plugins/operatorStatus/plugin.js b/src/plugins/operatorStatus/plugin.js
new file mode 100644
index 00000000000..cf8e5c40ffc
--- /dev/null
+++ b/src/plugins/operatorStatus/plugin.js
@@ -0,0 +1,44 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import OperatorStatusIndicator from './operatorStatus/OperatorStatusIndicator.js';
+import PollQuestionIndicator from './pollQuestion/PollQuestionIndicator.js';
+
+/**
+ * @param {import('@/api/user/UserAPI').UserAPIConfiguration} configuration
+ * @returns {function} The plugin install function
+ */
+export default function operatorStatusPlugin(configuration) {
+  return function install(openmct) {
+    if (openmct.user.hasProvider()) {
+      const operatorStatusIndicator = new OperatorStatusIndicator(openmct, configuration);
+      operatorStatusIndicator.install();
+
+      openmct.user.status.canSetPollQuestion().then((canSetPollQuestion) => {
+        if (canSetPollQuestion) {
+          const pollQuestionIndicator = new PollQuestionIndicator(openmct, configuration);
+
+          pollQuestionIndicator.install();
+        }
+      });
+    }
+  };
+}
diff --git a/src/plugins/operatorStatus/pollQuestion/PollQuestion.vue b/src/plugins/operatorStatus/pollQuestion/PollQuestion.vue
new file mode 100644
index 00000000000..fbdd6465687
--- /dev/null
+++ b/src/plugins/operatorStatus/pollQuestion/PollQuestion.vue
@@ -0,0 +1,283 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div :style="position" class="c-status-poll-panel c-status-poll-panel--admin" @click.stop="noop">
+    <div class="c-status-poll-panel__section c-status-poll-panel__top">
+      <div class="c-status-poll-panel__title">Manage Status Poll</div>
+      <div class="c-status-poll-panel__updated">Last updated: {{ pollQuestionUpdated }}</div>
+    </div>
+
+    <div class="c-status-poll__section c-status-poll-panel__content c-spq">
+      <!-- Grid layout -->
+      <div class="c-spq__label">Current poll:</div>
+      <div class="c-spq__value c-status-poll-panel__poll-question">{{ currentPollQuestion }}</div>
+
+      <template v-if="statusCountViewModel.length > 0">
+        <div class="c-spq__label">Reporting:</div>
+        <div class="c-spq__value c-status-poll-panel__poll-reporting c-status-poll-report">
+          <div
+            v-for="entry in statusCountViewModel"
+            :key="entry.status.key"
+            :aria-label="entry.status.label"
+            :title="entry.status.label"
+            class="c-status-poll-report__count"
+            :style="[
+              {
+                background: entry.status.statusBgColor,
+                color: entry.status.statusFgColor
+              }
+            ]"
+          >
+            <div class="c-status-poll-report__count-type" :class="entry.status.iconClass"></div>
+            <div class="c-status-poll-report__count-value">
+              {{ entry.roleCount }}
+            </div>
+          </div>
+          <div class="c-status-poll-report__actions">
+            <button
+              class="c-button"
+              title="Clear the previous poll question"
+              @click="clearPollQuestion"
+            >
+              Clear Poll
+            </button>
+          </div>
+        </div>
+      </template>
+
+      <div class="c-spq__label">New poll:</div>
+      <div class="c-spq__value c-status-poll-panel__poll-new-question">
+        <input v-model="newPollQuestion" type="text" name="newPollQuestion" />
+        <button
+          class="c-button"
+          title="Publish a new poll question and reset previous responses"
+          @click="updatePollQuestion"
+        >
+          Update
+        </button>
+      </div>
+      <div class="c-table c-spq__poll-table">
+        <table class="c-table__body">
+          <thead class="c-table__header">
+            <tr>
+              <th>Position</th>
+              <th>Status</th>
+              <th>Age</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="statusForRole in statusesForRolesViewModel" :key="statusForRole.key">
+              <td>
+                {{ statusForRole.role }}
+              </td>
+              <td
+                :style="{
+                  background: statusForRole.status.statusBgColor,
+                  color: statusForRole.status.statusFgColor
+                }"
+              >
+                {{ statusForRole.status.label }}
+              </td>
+              <td>
+                {{ statusForRole.age }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+
+export default {
+  inject: ['openmct', 'indicator', 'configuration'],
+  props: {
+    positionX: {
+      type: Number,
+      required: true
+    },
+    positionY: {
+      type: Number,
+      required: true
+    }
+  },
+  data() {
+    return {
+      pollQuestionUpdated: '--',
+      pollQuestionTimestamp: undefined,
+      currentPollQuestion: '--',
+      newPollQuestion: undefined,
+      statusCountViewModel: [],
+      statusesForRolesViewModel: []
+    };
+  },
+  computed: {
+    position() {
+      return {
+        position: 'absolute',
+        left: `${this.positionX}px`,
+        top: `${this.positionY}px`
+      };
+    }
+  },
+  mounted() {
+    this.fetchCurrentPoll();
+    this.subscribeToPollQuestion();
+    this.fetchStatusSummary();
+    this.openmct.user.status.on('statusChange', this.fetchStatusSummary);
+  },
+  beforeUnmount() {
+    this.openmct.user.status.off('statusChange', this.fetchStatusSummary);
+    this.openmct.user.status.off('pollQuestionChange', this.setPollQuestion);
+  },
+  created() {
+    this.fetchStatusSummary = _.debounce(this.fetchStatusSummary);
+  },
+  methods: {
+    async fetchCurrentPoll() {
+      const pollQuestion = await this.openmct.user.status.getPollQuestion();
+      if (pollQuestion !== undefined) {
+        this.setPollQuestion(pollQuestion);
+      }
+    },
+    subscribeToPollQuestion() {
+      this.openmct.user.status.on('pollQuestionChange', this.setPollQuestion);
+    },
+    setPollQuestion(pollQuestion) {
+      let pollQuestionText = pollQuestion.question;
+      if (!pollQuestionText || pollQuestionText === '') {
+        pollQuestionText = '--';
+        this.indicator.text('No Poll Question');
+      } else {
+        this.indicator.text(pollQuestionText);
+      }
+
+      this.currentPollQuestion = pollQuestionText;
+      this.pollQuestionTimestamp = pollQuestion.timestamp;
+      this.pollQuestionUpdated = new Date(pollQuestion.timestamp).toISOString();
+    },
+    async updatePollQuestion() {
+      const result = await this.openmct.user.status.setPollQuestion(this.newPollQuestion);
+      if (result === true) {
+        this.openmct.notifications.info('Successfully set new poll question');
+      } else {
+        this.openmct.notifications.error('Unable to set new poll question.');
+      }
+
+      this.newPollQuestion = undefined;
+    },
+    async clearPollQuestion() {
+      this.currentPollQuestion = undefined;
+      await Promise.all([
+        this.openmct.user.status.resetAllStatuses(),
+        this.openmct.user.status.setPollQuestion()
+      ]);
+    },
+    async fetchStatusSummary() {
+      const allStatuses = await this.openmct.user.status.getPossibleStatuses();
+      const statusCountMap = allStatuses.reduce((statusToCountMap, status) => {
+        statusToCountMap[status.key] = 0;
+
+        return statusToCountMap;
+      }, {});
+      const allStatusRoles = await this.openmct.user.status.getAllStatusRoles();
+      const statusesForRoles = await Promise.all(
+        allStatusRoles.map((role) => this.openmct.user.status.getStatusForRole(role))
+      );
+      statusesForRoles.forEach((status, i) => {
+        const currentCount = statusCountMap[status.key];
+        statusCountMap[status.key] = currentCount + 1;
+      });
+
+      this.statusCountViewModel = allStatuses.map((status) => {
+        return {
+          status: this.applyStyling(status),
+          roleCount: statusCountMap[status.key]
+        };
+      });
+      const defaultStatuses = await Promise.all(
+        allStatusRoles.map((role) => this.openmct.user.status.getDefaultStatusForRole(role))
+      );
+      this.statusesForRolesViewModel = [];
+      statusesForRoles.forEach((status, index) => {
+        const isDefaultStatus = defaultStatuses[index].key === status.key;
+        let statusTimestamp = status.timestamp;
+        if (isDefaultStatus) {
+          // if the default is selected, set timestamp to undefined
+          statusTimestamp = undefined;
+        }
+
+        this.statusesForRolesViewModel.push({
+          status: this.applyStyling(status),
+          role: allStatusRoles[index],
+          age: this.formatStatusAge(statusTimestamp, this.pollQuestionTimestamp)
+        });
+      });
+    },
+    formatStatusAge(statusTimestamp, pollQuestionTimestamp) {
+      if (statusTimestamp === undefined || pollQuestionTimestamp === undefined) {
+        return '--';
+      }
+
+      const statusAgeInMs = statusTimestamp - pollQuestionTimestamp;
+      const absoluteTotalSeconds = Math.floor(Math.abs(statusAgeInMs) / 1000);
+      let hours = Math.floor(absoluteTotalSeconds / 3600);
+      let minutes = Math.floor((absoluteTotalSeconds - hours * 3600) / 60);
+      let secondsString = absoluteTotalSeconds - hours * 3600 - minutes * 60;
+
+      if (statusAgeInMs > 0 || absoluteTotalSeconds === 0) {
+        hours = `+ ${hours}`;
+      } else {
+        hours = `- ${hours}`;
+      }
+
+      if (minutes < 10) {
+        minutes = `0${minutes}`;
+      }
+
+      if (secondsString < 10) {
+        secondsString = `0${secondsString}`;
+      }
+
+      const statusAgeString = `${hours}:${minutes}:${secondsString}`;
+
+      return statusAgeString;
+    },
+    applyStyling(status) {
+      const stylesForStatus = this.configuration?.statusStyles?.[status.label];
+
+      if (stylesForStatus !== undefined) {
+        return {
+          ...status,
+          ...stylesForStatus
+        };
+      } else {
+        return status;
+      }
+    },
+    noop() {}
+  }
+};
+</script>
diff --git a/src/plugins/operatorStatus/pollQuestion/PollQuestionIndicator.js b/src/plugins/operatorStatus/pollQuestion/PollQuestionIndicator.js
new file mode 100644
index 00000000000..6e8fb7d78e7
--- /dev/null
+++ b/src/plugins/operatorStatus/pollQuestion/PollQuestionIndicator.js
@@ -0,0 +1,68 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import mount from 'utils/mount';
+
+import AbstractStatusIndicator from '../AbstractStatusIndicator.js';
+import PollQuestionComponent from './PollQuestion.vue';
+
+export default class PollQuestionIndicator extends AbstractStatusIndicator {
+  createPopupComponent() {
+    const indicator = this.getIndicator();
+    const { vNode } = mount(
+      {
+        components: {
+          PollQuestion: PollQuestionComponent
+        },
+        provide: {
+          openmct: this.openmct,
+          indicator: indicator,
+          configuration: this.getConfiguration()
+        },
+        data() {
+          return {
+            positionX: 0,
+            positionY: 0
+          };
+        },
+        template: '<poll-question :positionX="positionX" :positionY="positionY" />'
+      },
+      {
+        app: this.openmct.app
+      }
+    );
+
+    return vNode.componentInstance;
+  }
+
+  createIndicator() {
+    const pollQuestionIndicator = this.openmct.indicators.simpleIndicator();
+
+    pollQuestionIndicator.text('No Poll Question');
+    pollQuestionIndicator.description('Set the current poll question');
+    pollQuestionIndicator.iconClass('icon-status-poll-edit');
+    pollQuestionIndicator.element.classList.add('c-indicator--operator-status');
+    pollQuestionIndicator.element.classList.add('no-minify');
+    pollQuestionIndicator.on('click', this.showPopup);
+
+    return pollQuestionIndicator;
+  }
+}
diff --git a/src/plugins/performanceIndicator/plugin.js b/src/plugins/performanceIndicator/plugin.js
index 6285ce42138..389cbf6ca17 100644
--- a/src/plugins/performanceIndicator/plugin.js
+++ b/src/plugins/performanceIndicator/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,43 +20,43 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 export default function PerformanceIndicator() {
-    return function install(openmct) {
-        let frames = 0;
-        let lastCalculated = performance.now();
-        const indicator = openmct.indicators.simpleIndicator();
+  return function install(openmct) {
+    let frames = 0;
+    let lastCalculated = performance.now();
+    const indicator = openmct.indicators.simpleIndicator();
 
-        indicator.text('~ fps');
-        indicator.statusClass('s-status-info');
-        openmct.indicators.add(indicator);
+    indicator.text('~ fps');
+    indicator.statusClass('s-status-info');
+    openmct.indicators.add(indicator);
 
-        let rafHandle = requestAnimationFrame(incremementFrames);
+    let rafHandle = requestAnimationFrame(incrementFrames);
 
-        openmct.on('destroy', () => {
-            cancelAnimationFrame(rafHandle);
-        });
+    openmct.on('destroy', () => {
+      cancelAnimationFrame(rafHandle);
+    });
 
-        function incremementFrames() {
-            let now = performance.now();
-            if ((now - lastCalculated) < 1000) {
-                frames++;
-            } else {
-                updateFPS(frames);
-                lastCalculated = now;
-                frames = 1;
-            }
+    function incrementFrames() {
+      let now = performance.now();
+      if (now - lastCalculated < 1000) {
+        frames++;
+      } else {
+        updateFPS(frames);
+        lastCalculated = now;
+        frames = 1;
+      }
 
-            rafHandle = requestAnimationFrame(incremementFrames);
-        }
+      rafHandle = requestAnimationFrame(incrementFrames);
+    }
 
-        function updateFPS(fps) {
-            indicator.text(`${fps} fps`);
-            if (fps >= 40) {
-                indicator.statusClass('s-status-on');
-            } else if (fps < 40 && fps >= 20) {
-                indicator.statusClass('s-status-warning');
-            } else {
-                indicator.statusClass('s-status-error');
-            }
-        }
-    };
+    function updateFPS(fps) {
+      indicator.text(`${fps} fps`);
+      if (fps >= 40) {
+        indicator.statusClass('s-status-on');
+      } else if (fps < 40 && fps >= 20) {
+        indicator.statusClass('s-status-warning');
+      } else {
+        indicator.statusClass('s-status-error');
+      }
+    }
+  };
 }
diff --git a/src/plugins/performanceIndicator/pluginSpec.js b/src/plugins/performanceIndicator/pluginSpec.js
index 37ce0578aaa..fb4d23984ae 100644
--- a/src/plugins/performanceIndicator/pluginSpec.js
+++ b/src/plugins/performanceIndicator/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,69 +19,61 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+
 import PerformancePlugin from './plugin.js';
-import {
-    createOpenMct,
-    resetApplicationState
-} from 'utils/testing';
 
 describe('the plugin', () => {
-    let openmct;
-    let element;
-    let child;
-
-    let performanceIndicator;
-    let countFramesPromise;
+  let openmct;
+  let element;
+  let child;
 
-    beforeEach((done) => {
-        openmct = createOpenMct(false);
+  let performanceIndicator;
 
-        element = document.createElement('div');
-        child = document.createElement('div');
-        element.appendChild(child);
+  beforeEach((done) => {
+    openmct = createOpenMct();
 
-        openmct.install(new PerformancePlugin());
+    element = document.createElement('div');
+    child = document.createElement('div');
+    element.appendChild(child);
 
-        countFramesPromise = countFrames();
+    openmct.install(new PerformancePlugin());
 
-        openmct.on('start', done);
+    openmct.on('start', done);
 
-        performanceIndicator = openmct.indicators.indicatorObjects.find((indicator) => {
-            return indicator.text && indicator.text() === '~ fps';
-        });
-
-        openmct.startHeadless();
+    performanceIndicator = openmct.indicators.indicatorObjects.find((indicator) => {
+      return indicator.text && indicator.text() === '~ fps';
     });
 
-    afterEach(() => {
-        return resetApplicationState(openmct);
-    });
+    openmct.startHeadless();
+  });
 
-    it('installs the performance indicator', () => {
-        expect(performanceIndicator).toBeDefined();
-    });
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
 
-    it('correctly calculates fps', () => {
-        return countFramesPromise.then((frames) => {
-            expect(performanceIndicator.text()).toEqual(`${frames} fps`);
-        });
-    });
+  it('installs the performance indicator', () => {
+    expect(performanceIndicator).toBeDefined();
+  });
 
-    function countFrames() {
-        let startTime = performance.now();
-        let frames = 0;
+  it('calculates an fps value', async () => {
+    await loopForABit();
+    // eslint-disable-next-line radix
+    const fps = parseInt(performanceIndicator.text().split(' fps')[0]);
+    expect(fps).toBeGreaterThan(0);
+  });
 
-        return new Promise((resolve) => {
-            requestAnimationFrame(function incrementCount() {
-                let now = performance.now();
+  function loopForABit() {
+    let frames = 0;
 
-                if ((now - startTime) < 1000) {
-                    frames++;
-                    requestAnimationFrame(incrementCount);
-                } else {
-                    resolve(frames);
-                }
-            });
-        });
-    }
+    return new Promise((resolve) => {
+      requestAnimationFrame(function loop() {
+        if (++frames > 90) {
+          resolve();
+        } else {
+          requestAnimationFrame(loop);
+        }
+      });
+    });
+  }
 });
diff --git a/src/plugins/persistence/couch/.env.ci b/src/plugins/persistence/couch/.env.ci
new file mode 100644
index 00000000000..104d70d6e70
--- /dev/null
+++ b/src/plugins/persistence/couch/.env.ci
@@ -0,0 +1,5 @@
+OPENMCT_DATABASE_NAME=openmct
+COUCH_ADMIN_USER=admin
+COUCH_ADMIN_PASSWORD=password
+COUCH_BASE_LOCAL=http://localhost:5984
+COUCH_NODE_NAME=nonode@nohost
\ No newline at end of file
diff --git a/src/plugins/persistence/couch/CouchChangesFeed.js b/src/plugins/persistence/couch/CouchChangesFeed.js
index e773270a898..6150c57d309 100644
--- a/src/plugins/persistence/couch/CouchChangesFeed.js
+++ b/src/plugins/persistence/couch/CouchChangesFeed.js
@@ -1,106 +1,124 @@
 (function () {
-    const connections = [];
-    let connected = false;
-    const controller = new AbortController();
-    const signal = controller.signal;
-
-    self.onconnect = function (e) {
-        let port = e.ports[0];
-        connections.push(port);
-
-        port.postMessage({
-            type: 'connection',
-            connectionId: connections.length
-        });
-
-        port.onmessage = async function (event) {
-            if (event.data.request === 'close') {
-                connections.splice(event.data.connectionId - 1, 1);
-                if (connections.length <= 0) {
-                    // abort any outstanding requests if there's nobody listening to it.
-                    controller.abort();
-                }
-
-                return;
-            }
-
-            if (event.data.request === 'changes') {
-                if (connected === true) {
-                    return;
-                }
-
-                connected = true;
-
-                let url = event.data.url;
-                let body = event.data.body;
-                let error = false;
-                // feed=continuous maintains an indefinitely open connection with a keep-alive of HEARTBEAT milliseconds until this client closes the connection
-                // style=main_only returns only the current winning revision of the document
-
-                const response = await fetch(url, {
-                    method: 'POST',
-                    headers: {
-                        "Content-Type": 'application/json'
-                    },
-                    signal,
-                    body
-                });
-
-                let reader;
-
-                if (response.body === undefined) {
-                    error = true;
-                } else {
-                    reader = response.body.getReader();
-                }
-
-                while (!error) {
-                    const {done, value} = await reader.read();
-                    //done is true when we lose connection with the provider
-                    if (done) {
-                        error = true;
-                    }
-
-                    if (value) {
-                        let chunk = new Uint8Array(value.length);
-                        chunk.set(value, 0);
-                        const decodedChunk = new TextDecoder("utf-8").decode(chunk).split('\n');
-                        if (decodedChunk.length && decodedChunk[decodedChunk.length - 1] === '') {
-                            decodedChunk.forEach((doc, index) => {
-                                try {
-                                    if (doc) {
-                                        const objectChanges = JSON.parse(doc);
-                                        connections.forEach(function (connection) {
-                                            connection.postMessage({
-                                                objectChanges
-                                            });
-                                        });
-                                    }
-                                } catch (decodeError) {
-                                    //do nothing;
-                                    console.log(decodeError);
-                                }
-                            });
-                        }
-                    }
-
-                }
-
-                if (error) {
-                    port.postMessage({
-                        error
-                    });
-                }
-            }
-        };
-
-        port.start();
-
+  const connections = [];
+  let connected = false;
+  let couchEventSource;
+  let changesFeedUrl;
+  const keepAliveTime = 20 * 1000;
+  let keepAliveTimer;
+  const controller = new AbortController();
+
+  self.onconnect = function (e) {
+    let port = e.ports[0];
+    connections.push(port);
+
+    port.postMessage({
+      type: 'connection',
+      connectionId: connections.length
+    });
+
+    port.onmessage = function (event) {
+      if (event.data.request === 'close') {
+        console.debug('🚪 Closing couch connection 🚪');
+        connections.splice(event.data.connectionId - 1, 1);
+        if (connections.length <= 0) {
+          // abort any outstanding requests if there's nobody listening to it.
+          controller.abort();
+        }
+
+        connected = false;
+        // stop listening for events
+        couchEventSource.removeEventListener('message', self.onCouchMessage);
+        couchEventSource.close();
+        console.debug('🚪 Closed couch connection 🚪');
+
+        return;
+      }
+
+      if (event.data.request === 'changes') {
+        if (connected === true) {
+          return;
+        }
+
+        changesFeedUrl = event.data.url;
+        self.listenForChanges();
+      }
     };
 
-    self.onerror = function () {
-        //do nothing
-        console.log('Error on feed');
+    port.start();
+  };
+
+  self.onerror = function (error) {
+    self.updateCouchStateIndicator();
+    console.error('🚨 Error on CouchDB feed 🚨', error);
+  };
+
+  self.onopen = function () {
+    self.updateCouchStateIndicator();
+  };
+
+  self.onCouchMessage = function (event) {
+    self.updateCouchStateIndicator();
+    console.debug('📩 Received message from CouchDB 📩');
+
+    const objectChanges = JSON.parse(event.data);
+    connections.forEach(function (connection) {
+      connection.postMessage({
+        objectChanges
+      });
+    });
+  };
+
+  self.listenForChanges = function () {
+    if (keepAliveTimer) {
+      clearTimeout(keepAliveTimer);
+    }
+
+    /**
+     * Once the connection has been opened, poll every 20 seconds to see if the EventSource has closed unexpectedly.
+     * If it has, attempt to reconnect.
+     */
+    keepAliveTimer = setTimeout(self.listenForChanges, keepAliveTime);
+
+    if (!couchEventSource || couchEventSource.readyState === EventSource.CLOSED) {
+      console.debug(`⇿ Opening CouchDB change feed connection for ${changesFeedUrl} ⇿`);
+      couchEventSource = new EventSource(changesFeedUrl);
+      couchEventSource.onerror = self.onerror;
+      couchEventSource.onopen = self.onopen;
+
+      // start listening for events
+      couchEventSource.addEventListener('message', self.onCouchMessage);
+      connected = true;
+      console.debug(`⇿ Opened connection to ${changesFeedUrl} ⇿`);
+    }
+  };
+
+  self.updateCouchStateIndicator = function () {
+    const { readyState } = couchEventSource;
+    let message = {
+      type: 'state',
+      state: 'pending'
     };
-
-}());
+    switch (readyState) {
+      case EventSource.CONNECTING:
+        message.state = 'pending';
+        break;
+      case EventSource.OPEN:
+        message.state = 'open';
+        break;
+      case EventSource.CLOSED:
+        message.state = 'close';
+        break;
+      default:
+        message.state = 'unknown';
+        console.error(
+          '🚨 Received unexpected readyState value from CouchDB EventSource feed: 🚨',
+          readyState
+        );
+        break;
+    }
+
+    connections.forEach(function (connection) {
+      connection.postMessage(message);
+    });
+  };
+})();
diff --git a/src/plugins/persistence/couch/CouchDocument.js b/src/plugins/persistence/couch/CouchDocument.js
index 4e09012aaca..c2cf5c1c218 100644
--- a/src/plugins/persistence/couch/CouchDocument.js
+++ b/src/plugins/persistence/couch/CouchDocument.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -37,17 +37,16 @@
  *        deleted (see CouchDB docs for _deleted)
  */
 export default function CouchDocument(id, model, rev, markDeleted) {
-    return {
-        "_id": id,
-        "_rev": rev,
-        "_deleted": markDeleted,
-        "metadata": {
-            "category": "domain object",
-            "type": model.type,
-            "owner": "admin",
-            "name": model.name,
-            "created": Date.now()
-        },
-        "model": model
-    };
+  return {
+    _id: id,
+    _rev: rev,
+    _deleted: markDeleted,
+    metadata: {
+      category: 'domain object',
+      type: model.type,
+      owner: 'admin',
+      name: model.name
+    },
+    model: model
+  };
 }
diff --git a/src/plugins/persistence/couch/CouchObjectProvider.js b/src/plugins/persistence/couch/CouchObjectProvider.js
index 93da948f19f..ab1859f092c 100644
--- a/src/plugins/persistence/couch/CouchObjectProvider.js
+++ b/src/plugins/persistence/couch/CouchObjectProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,576 +20,817 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import CouchDocument from "./CouchDocument";
-import CouchObjectQueue from "./CouchObjectQueue";
-import { NOTEBOOK_TYPE } from '../../notebook/notebook-constants.js';
+import _ from 'lodash';
 
-const REV = "_rev";
-const ID = "_id";
-const HEARTBEAT = 50000;
-const ALL_DOCS = "_all_docs?include_docs=true";
-
-export default class CouchObjectProvider {
-    constructor(openmct, options, namespace) {
-        options = this._normalize(options);
-        this.openmct = openmct;
-        this.url = options.url;
-        this.namespace = namespace;
-        this.objectQueue = {};
-        this.observers = {};
-        this.batchIds = [];
-    }
+import { isNotebookOrAnnotationType } from '../../notebook/notebook-constants.js';
+import CouchDocument from './CouchDocument.js';
+import CouchObjectQueue from './CouchObjectQueue.js';
+import { CONNECTED, DISCONNECTED, PENDING, UNKNOWN } from './CouchStatusIndicator.js';
 
-    /**
-     * @private
-     */
-    startSharedWorker() {
-        let provider = this;
-        let sharedWorker;
-
-        const sharedWorkerURL = `${this.openmct.getAssetPath()}${__OPENMCT_ROOT_RELATIVE__}couchDBChangesFeed.js`;
-
-        sharedWorker = new SharedWorker(sharedWorkerURL);
-        sharedWorker.port.onmessage = provider.onSharedWorkerMessage.bind(this);
-        sharedWorker.port.onmessageerror = provider.onSharedWorkerMessageError.bind(this);
-        sharedWorker.port.start();
-
-        this.openmct.on('destroy', () => {
-            this.changesFeedSharedWorker.port.postMessage({
-                request: 'close',
-                connectionId: this.changesFeedSharedWorkerConnectionId
-            });
-            this.changesFeedSharedWorker.port.close();
+const REV = '_rev';
+const ID = '_id';
+const HEARTBEAT = 50000;
+const ALL_DOCS = '_all_docs?include_docs=true';
+
+class CouchObjectProvider {
+  constructor({ openmct, databaseConfiguration, couchStatusIndicator }) {
+    this.openmct = openmct;
+    this.indicator = couchStatusIndicator;
+    this.url = databaseConfiguration.url;
+    this.readOnly = databaseConfiguration.readOnly;
+    this.useDesignDocuments = databaseConfiguration.useDesignDocuments;
+    this.namespace = databaseConfiguration.namespace;
+    this.objectQueue = {};
+    this.observers = {};
+    this.batchIds = [];
+    this.onEventMessage = this.onEventMessage.bind(this);
+    this.onEventError = this.onEventError.bind(this);
+    this.flushPersistenceQueue = _.debounce(this.flushPersistenceQueue.bind(this));
+    this.persistenceQueue = [];
+    this.rootObject = null;
+  }
+
+  /**
+   * @private
+   */
+  #startSharedWorker() {
+    let provider = this;
+    let sharedWorker;
+
+    // eslint-disable-next-line no-undef
+    const sharedWorkerURL = `${this.openmct.getAssetPath()}${__OPENMCT_ROOT_RELATIVE__}couchDBChangesFeed.js`;
+
+    sharedWorker = new SharedWorker(
+      sharedWorkerURL,
+      `CouchDB SSE Shared Worker for ${this.namespace}`
+    );
+    sharedWorker.port.onmessage = provider.onSharedWorkerMessage.bind(this);
+    sharedWorker.port.onmessageerror = provider.onSharedWorkerMessageError.bind(this);
+    sharedWorker.port.start();
+
+    this.openmct.on('destroy', () => {
+      this.changesFeedSharedWorker.port.postMessage({
+        request: 'close',
+        connectionId: this.changesFeedSharedWorkerConnectionId
+      });
+      this.changesFeedSharedWorker.port.close();
+    });
+
+    return sharedWorker;
+  }
+
+  onSharedWorkerMessageError(event) {
+    console.error('Error', event);
+  }
+
+  isSynchronizedObject(object) {
+    return (
+      object &&
+      object.type &&
+      this.openmct.objects.SYNCHRONIZED_OBJECT_TYPES &&
+      this.openmct.objects.SYNCHRONIZED_OBJECT_TYPES.includes(object.type)
+    );
+  }
+
+  onSharedWorkerMessage(event) {
+    if (event.data.type === 'connection') {
+      this.changesFeedSharedWorkerConnectionId = event.data.connectionId;
+    } else if (event.data.type === 'state') {
+      const state = this.#messageToIndicatorState(event.data.state);
+      this.indicator?.setIndicatorToState(state);
+    } else {
+      let objectChanges = event.data.objectChanges;
+      const objectIdentifier = {
+        namespace: this.namespace,
+        key: objectChanges.id
+      };
+      let keyString = this.openmct.objects.makeKeyString(objectIdentifier);
+      //TODO: Optimize this so that we don't 'get' the object if it's current revision (from this.objectQueue) is the same as the one we already have.
+      let observersForObject = this.observers[keyString];
+      let isInTransaction = false;
+
+      if (this.openmct.objects.isTransactionActive()) {
+        isInTransaction = this.openmct.objects.transaction.getDirtyObject(objectIdentifier);
+      }
+
+      if (observersForObject && !isInTransaction) {
+        observersForObject.forEach(async (observer) => {
+          const updatedObject = await this.get(objectIdentifier);
+          if (this.isSynchronizedObject(updatedObject)) {
+            observer(updatedObject);
+          }
         });
-
-        return sharedWorker;
+      }
     }
-
-    onSharedWorkerMessageError(event) {
-        console.log('Error', event);
+  }
+
+  /**
+   * Takes in a state message from the CouchDB SharedWorker and returns an IndicatorState.
+   * @private
+   * @param {'open'|'close'|'pending'} message
+   * @returns {import('./CouchStatusIndicator').IndicatorState}
+   */
+  #messageToIndicatorState(message) {
+    let state;
+    switch (message) {
+      case 'open':
+        state = CONNECTED;
+        break;
+      case 'close':
+        state = DISCONNECTED;
+        break;
+      case 'pending':
+        state = PENDING;
+        break;
+      case 'unknown':
+        state = UNKNOWN;
+        break;
     }
 
-    onSharedWorkerMessage(event) {
-        if (event.data.type === 'connection') {
-            this.changesFeedSharedWorkerConnectionId = event.data.connectionId;
-        } else {
-            const error = event.data.error;
-            if (error && Object.keys(this.observers).length > 0) {
-                this.observeObjectChanges();
-
-                return;
-            }
-
-            let objectChanges = event.data.objectChanges;
-            objectChanges.identifier = {
-                namespace: this.namespace,
-                key: objectChanges.id
-            };
-            let keyString = this.openmct.objects.makeKeyString(objectChanges.identifier);
-            //TODO: Optimize this so that we don't 'get' the object if it's current revision (from this.objectQueue) is the same as the one we already have.
-            let observersForObject = this.observers[keyString];
-
-            if (observersForObject) {
-                observersForObject.forEach(async (observer) => {
-                    const updatedObject = await this.get(objectChanges.identifier);
-                    observer(updatedObject);
-                });
-            }
-        }
+    return state;
+  }
+
+  /**
+   * Takes an HTTP status code and returns an IndicatorState
+   * @private
+   * @param {number} statusCode
+   * @returns {import("./CouchStatusIndicator").IndicatorState}
+   */
+  #statusCodeToIndicatorState(statusCode) {
+    let state;
+    switch (statusCode) {
+      case CouchObjectProvider.HTTP_OK:
+      case CouchObjectProvider.HTTP_CREATED:
+      case CouchObjectProvider.HTTP_ACCEPTED:
+      case CouchObjectProvider.HTTP_NOT_MODIFIED:
+      case CouchObjectProvider.HTTP_BAD_REQUEST:
+      case CouchObjectProvider.HTTP_UNAUTHORIZED:
+      case CouchObjectProvider.HTTP_FORBIDDEN:
+      case CouchObjectProvider.HTTP_NOT_FOUND:
+      case CouchObjectProvider.HTTP_METHOD_NOT_ALLOWED:
+      case CouchObjectProvider.HTTP_NOT_ACCEPTABLE:
+      case CouchObjectProvider.HTTP_CONFLICT:
+      case CouchObjectProvider.HTTP_PRECONDITION_FAILED:
+      case CouchObjectProvider.HTTP_REQUEST_ENTITY_TOO_LARGE:
+      case CouchObjectProvider.HTTP_UNSUPPORTED_MEDIA_TYPE:
+      case CouchObjectProvider.HTTP_REQUESTED_RANGE_NOT_SATISFIABLE:
+      case CouchObjectProvider.HTTP_EXPECTATION_FAILED:
+      case CouchObjectProvider.HTTP_SERVER_ERROR:
+        state = CONNECTED;
+        break;
+      case CouchObjectProvider.HTTP_SERVICE_UNAVAILABLE:
+        state = DISCONNECTED;
+        break;
+      default:
+        state = UNKNOWN;
     }
 
-    //backwards compatibility, options used to be a url. Now it's an object
-    _normalize(options) {
-        if (typeof options === 'string') {
-            return {
-                url: options
-            };
-        }
-
-        return options;
+    return state;
+  }
+
+  isReadOnly() {
+    return this.readOnly;
+  }
+
+  async request(subPath, method, body, signal) {
+    let fetchOptions = {
+      method,
+      body,
+      priority: 'high',
+      signal
+    };
+
+    // stringify body if needed
+    if (fetchOptions.body) {
+      fetchOptions.body = JSON.stringify(fetchOptions.body);
+      fetchOptions.headers = {
+        'Content-Type': 'application/json'
+      };
     }
 
-    request(subPath, method, body, signal) {
-        let fetchOptions = {
-            method,
-            body,
-            signal
-        };
-
-        // stringify body if needed
-        if (fetchOptions.body) {
-            fetchOptions.body = JSON.stringify(fetchOptions.body);
-            fetchOptions.headers = {
-                "Content-Type": "application/json"
-            };
-        }
+    let response = null;
 
-        return fetch(this.url + '/' + subPath, fetchOptions)
-            .then(response => response.json())
-            .then(function (response) {
-                return response;
-            }, function () {
-                return undefined;
-            });
+    if (!this.isObservingObjectChanges()) {
+      this.#observeObjectChanges();
     }
 
-    /**
-     * Check the response to a create/update/delete request;
-     * track the rev if it's valid, otherwise return false to
-     * indicate that the request failed.
-     * persist any queued objects
-     * @private
-     */
-    checkResponse(response, intermediateResponse, key) {
-        let requestSuccess = false;
-        const id = response ? response.id : undefined;
-        let rev;
-
-        if (response && response.ok) {
-            rev = response.rev;
-            requestSuccess = true;
-        }
-
-        intermediateResponse.resolve(requestSuccess);
-
-        if (id) {
-            if (!this.objectQueue[id]) {
-                this.objectQueue[id] = new CouchObjectQueue(undefined, rev);
-            }
-
-            this.objectQueue[id].updateRevision(rev);
-            this.objectQueue[id].pending = false;
-            if (this.objectQueue[id].hasNext()) {
-                this.updateQueued(id);
-            }
+    try {
+      response = await fetch(this.url + '/' + subPath, fetchOptions);
+      const { status } = response;
+      const json = await response.json();
+      this.#handleResponseCode(status, json, fetchOptions);
+
+      return json;
+    } catch (error) {
+      // abort errors are expected
+      if (error.name === 'AbortError') {
+        return;
+      }
+
+      // Network error, CouchDB unreachable.
+      if (response === null) {
+        this.indicator?.setIndicatorToState(DISCONNECTED);
+        console.error(error.message);
+
+        throw new Error(`CouchDB Error - No response"`);
+      } else {
+        if (body?.model && isNotebookOrAnnotationType(body.model)) {
+          // warn since we handle conflicts for notebooks
+          console.warn(error.message);
         } else {
-            this.objectQueue[key].pending = false;
+          console.error(error.message);
         }
-    }
 
-    /**
-     * @private
-     */
-    getModel(response) {
-        if (response && response.model) {
-            let key = response[ID];
-            let object = response.model;
-            object.identifier = {
-                namespace: this.namespace,
-                key: key
-            };
-            if (!this.objectQueue[key]) {
-                this.objectQueue[key] = new CouchObjectQueue(undefined, response[REV]);
-            }
-
-            if (object.type === NOTEBOOK_TYPE) {
-                //Temporary measure until object sync is supported for all object types
-                //Always update notebook revision number because we have realtime sync, so always assume it's the latest.
-                this.objectQueue[key].updateRevision(response[REV]);
-            } else if (!this.objectQueue[key].pending) {
-                //Sometimes CouchDB returns the old rev which fetching the object if there is a document update in progress
-                this.objectQueue[key].updateRevision(response[REV]);
-            }
-
-            return object;
-        } else {
-            return undefined;
-        }
+        throw error;
+      }
     }
-
-    get(identifier, abortSignal) {
-        this.batchIds.push(identifier.key);
-
-        if (this.bulkPromise === undefined) {
-            this.bulkPromise = this.deferBatchedGet(abortSignal);
-        }
-
-        return this.bulkPromise
-            .then((domainObjectMap) => {
-                return domainObjectMap[identifier.key];
-            });
+  }
+
+  /**
+   * Handle the response code from a CouchDB request.
+   * Sets the CouchDB indicator status and throws an error if needed.
+   * @private
+   */
+  #handleResponseCode(status, json, fetchOptions) {
+    this.indicator?.setIndicatorToState(this.#statusCodeToIndicatorState(status));
+    if (status === CouchObjectProvider.HTTP_CONFLICT) {
+      const objectName = JSON.parse(fetchOptions.body)?.model?.name;
+      throw new this.openmct.objects.errors.Conflict(`Conflict persisting "${objectName}"`);
+    } else if (status >= CouchObjectProvider.HTTP_BAD_REQUEST) {
+      if (!json.error || !json.reason) {
+        throw new Error(`CouchDB Error ${status}`);
+      }
+
+      throw new Error(`CouchDB Error ${status}: "${json.error} - ${json.reason}"`);
+    }
+  }
+
+  /**
+   * Check the response to a create/update/delete request;
+   * track the rev if it's valid, otherwise return false to
+   * indicate that the request failed.
+   * persist any queued objects
+   * @private
+   */
+  #checkResponse(response, intermediateResponse, key) {
+    let requestSuccess = false;
+    const id = response ? response.id : undefined;
+    let rev;
+
+    if (response && response.ok) {
+      rev = response.rev;
+      requestSuccess = true;
     }
 
-    /**
-     * @private
-     */
-    deferBatchedGet(abortSignal) {
-        // We until the next event loop cycle to "collect" all of the get
-        // requests triggered in this iteration of the event loop
-
-        return this.waitOneEventCycle().then(() => {
-            let batchIds = this.batchIds;
-
-            this.clearBatch();
+    intermediateResponse.resolve(requestSuccess);
 
-            if (batchIds.length === 1) {
-                let objectKey = batchIds[0];
+    if (id) {
+      if (!this.objectQueue[id]) {
+        this.objectQueue[id] = new CouchObjectQueue(undefined, rev);
+      }
 
-                //If there's only one request, just do a regular get
-                return this.request(objectKey, "GET", undefined, abortSignal)
-                    .then(this.returnAsMap(objectKey));
-            } else {
-                return this.bulkGet(batchIds, abortSignal);
-            }
-        });
+      this.objectQueue[id].updateRevision(rev);
+      this.objectQueue[id].pending = false;
+      if (this.objectQueue[id].hasNext()) {
+        this.#updateQueued(id);
+      }
+    } else {
+      this.objectQueue[key].pending = false;
+    }
+  }
+
+  /**
+   * @private
+   */
+  #getModel(response) {
+    if (response && response.model) {
+      let key = response[ID];
+      let object = this.fromPersistedModel(response.model, key);
+
+      if (!this.objectQueue[key]) {
+        this.objectQueue[key] = new CouchObjectQueue(undefined, response[REV]);
+      }
+
+      if (isNotebookOrAnnotationType(object)) {
+        //Temporary measure until object sync is supported for all object types
+        //Always update notebook revision number because we have realtime sync, so always assume it's the latest.
+        this.objectQueue[key].updateRevision(response[REV]);
+      } else if (!this.objectQueue[key].pending) {
+        //Sometimes CouchDB returns the old rev which fetching the object if there is a document update in progress
+        this.objectQueue[key].updateRevision(response[REV]);
+      }
+
+      return object;
+    } else {
+      return undefined;
     }
+  }
 
-    /**
-     * @private
-     */
-    returnAsMap(objectKey) {
-        return (result) => {
-            let objectMap = {};
-            objectMap[objectKey] = this.getModel(result);
+  get(identifier, abortSignal) {
+    this.batchIds.push(identifier.key);
 
-            return objectMap;
-        };
+    if (this.bulkPromise === undefined) {
+      this.bulkPromise = this.#deferBatchedGet(abortSignal);
     }
 
-    /**
-     * @private
-     */
-    clearBatch() {
-        this.batchIds = [];
-        delete this.bulkPromise;
+    return this.bulkPromise.then((domainObjectMap) => {
+      return domainObjectMap[identifier.key];
+    });
+  }
+
+  /**
+   * @private
+   */
+  #deferBatchedGet(abortSignal) {
+    // We until the next event loop cycle to "collect" all of the get
+    // requests triggered in this iteration of the event loop
+
+    return this.#waitOneEventCycle().then(() => {
+      let batchIds = this.batchIds;
+
+      this.#clearBatch();
+
+      if (batchIds.length === 1) {
+        let objectKey = batchIds[0];
+
+        //If there's only one request, just do a regular get
+        return this.request(objectKey, 'GET', undefined, abortSignal).then(
+          this.#returnAsMap(objectKey)
+        );
+      } else {
+        return this.#bulkGet(batchIds, abortSignal);
+      }
+    });
+  }
+
+  /**
+   * @private
+   */
+  #returnAsMap(objectKey) {
+    return (result) => {
+      let objectMap = {};
+      objectMap[objectKey] = this.#getModel(result);
+
+      return objectMap;
+    };
+  }
+
+  /**
+   * @private
+   */
+  #clearBatch() {
+    this.batchIds = [];
+    delete this.bulkPromise;
+  }
+
+  /**
+   * @private
+   */
+  #waitOneEventCycle() {
+    return new Promise((resolve) => {
+      setTimeout(resolve);
+    });
+  }
+
+  /**
+   * @private
+   */
+  #bulkGet(ids, signal) {
+    ids = this.removeDuplicates(ids);
+
+    const query = {
+      keys: ids
+    };
+
+    return this.request(ALL_DOCS, 'POST', query, signal).then((response) => {
+      if (response && response.rows !== undefined) {
+        return response.rows.reduce((map, row) => {
+          //row.doc === null if the document does not exist.
+          //row.doc === undefined if the document is not found.
+          if (row.doc !== undefined) {
+            map[row.key] = this.#getModel(row.doc);
+          }
+
+          return map;
+        }, {});
+      } else {
+        return {};
+      }
+    });
+  }
+
+  /**
+   * @private
+   */
+  removeDuplicates(array) {
+    return Array.from(new Set(array));
+  }
+
+  search() {
+    // Dummy search function. It has to appear to support search,
+    // otherwise the in-memory indexer will index all of its objects,
+    // but actually search results will be provided by a separate search provider
+    // see CouchSearchProvider.js
+    return Promise.resolve([]);
+  }
+
+  async getObjectsByView({ designDoc, viewName, keysToSearch }, abortSignal) {
+    const stringifiedKeys = JSON.stringify(keysToSearch);
+    const url = `${this.url}/_design/${designDoc}/_view/${viewName}?keys=${stringifiedKeys}&include_docs=true`;
+    let objectModels = [];
+
+    try {
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json' },
+        signal: abortSignal
+      });
+
+      if (!response.ok) {
+        throw new Error(
+          `HTTP request failed with status ${response.status} ${response.statusText}`
+        );
+      }
+
+      const result = await response.json();
+      const couchRows = result.rows;
+      couchRows.forEach((couchRow) => {
+        const couchDoc = couchRow.doc;
+        const objectModel = this.#getModel(couchDoc);
+        if (objectModel) {
+          objectModels.push(objectModel);
+        }
+      });
+    } catch (error) {
+      // do nothing
     }
+    return objectModels;
+  }
 
-    /**
-     * @private
-     */
-    waitOneEventCycle() {
-        return new Promise((resolve) => {
-            setTimeout(resolve);
-        });
-    }
+  async getObjectsByFilter(filter, abortSignal) {
+    let objects = [];
 
-    /**
-     * @private
-     */
-    bulkGet(ids, signal) {
-        ids = this.removeDuplicates(ids);
-
-        const query = {
-            'keys': ids
-        };
-
-        return this.request(ALL_DOCS, 'POST', query, signal).then((response) => {
-            if (response && response.rows !== undefined) {
-                return response.rows.reduce((map, row) => {
-                    if (row.doc !== undefined) {
-                        map[row.key] = this.getModel(row.doc);
-                    }
-
-                    return map;
-                }, {});
-            } else {
-                return {};
-            }
-        });
-    }
+    let url = `${this.url}/_find`;
+    let body = {};
 
-    /**
-     * @private
-     */
-    removeDuplicates(array) {
-        return Array.from(new Set(array));
+    if (filter) {
+      body = JSON.stringify(filter);
     }
 
-    search(query, abortSignal) {
-        const filter = {
-            "selector": {
-                "model": {
-                    "name": {
-                        "$regex": `(?i)${query}`
-                    }
-                }
-            }
-        };
-
-        return this.getObjectsByFilter(filter, abortSignal);
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      signal: abortSignal,
+      body
+    });
+
+    const reader = response.body.getReader();
+    let completed = false;
+    let decoder = new TextDecoder('utf-8');
+    let decodedChunk = '';
+    while (!completed) {
+      const { done, value } = await reader.read();
+      //done is true when we lose connection with the provider
+      if (done) {
+        completed = true;
+      }
+
+      if (value) {
+        let chunk = new Uint8Array(value.length);
+        chunk.set(value, 0);
+        const partial = decoder.decode(chunk, { stream: !completed });
+        decodedChunk = decodedChunk + partial;
+      }
     }
 
-    async getObjectsByFilter(filter, abortSignal) {
-        let objects = [];
-
-        let url = `${this.url}/_find`;
-        let body = {};
-
-        if (filter) {
-            body = JSON.stringify(filter);
-        }
-
-        const response = await fetch(url, {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json"
-            },
-            signal: abortSignal,
-            body
+    try {
+      const json = JSON.parse(decodedChunk);
+      if (json) {
+        let docs = json.docs;
+        docs.forEach((doc) => {
+          let object = this.#getModel(doc);
+          if (object) {
+            objects.push(object);
+          }
         });
+      }
+    } catch (e) {
+      //do nothing
+    }
 
-        const reader = response.body.getReader();
-        let completed = false;
-        let decoder = new TextDecoder("utf-8");
-        let decodedChunk = '';
-        while (!completed) {
-            const {done, value} = await reader.read();
-            //done is true when we lose connection with the provider
-            if (done) {
-                completed = true;
-            }
-
-            if (value) {
-                let chunk = new Uint8Array(value.length);
-                chunk.set(value, 0);
-                const partial = decoder.decode(chunk, {stream: !completed});
-                decodedChunk = decodedChunk + partial;
-            }
-        }
+    return objects;
+  }
 
-        try {
-            const json = JSON.parse(decodedChunk);
-            if (json) {
-                let docs = json.docs;
-                docs.forEach(doc => {
-                    let object = this.getModel(doc);
-                    if (object) {
-                        objects.push(object);
-                    }
-                });
-            }
-        } catch (e) {
-            //do nothing
-        }
+  observe(identifier, callback) {
+    const keyString = this.openmct.objects.makeKeyString(identifier);
+    this.observers[keyString] = this.observers[keyString] || [];
+    this.observers[keyString].push(callback);
 
-        return objects;
+    if (!this.isObservingObjectChanges()) {
+      this.#observeObjectChanges();
     }
 
-    observe(identifier, callback) {
-        const keyString = this.openmct.objects.makeKeyString(identifier);
-        this.observers[keyString] = this.observers[keyString] || [];
-        this.observers[keyString].push(callback);
-
-        if (!this.isObservingObjectChanges()) {
-            this.observeObjectChanges();
+    return () => {
+      if (this.observers[keyString]) {
+        this.observers[keyString] = this.observers[keyString].filter(
+          (observer) => observer !== callback
+        );
+        if (this.observers[keyString].length === 0) {
+          delete this.observers[keyString];
         }
-
-        return () => {
-            this.observers[keyString] = this.observers[keyString].filter(observer => observer !== callback);
-            if (this.observers[keyString].length === 0) {
-                delete this.observers[keyString];
-                if (Object.keys(this.observers).length === 0) {
-                    this.stopObservingObjectChanges();
-                }
-            }
-        };
+      }
+    };
+  }
+
+  isObservingObjectChanges() {
+    return this.stopObservingObjectChanges !== undefined;
+  }
+
+  /**
+   * @private
+   */
+  #observeObjectChanges() {
+    const sseChangesPath = `${this.url}/_changes`;
+    const sseURL = new URL(sseChangesPath);
+    sseURL.searchParams.append('feed', 'eventsource');
+    sseURL.searchParams.append('style', 'main_only');
+    sseURL.searchParams.append('heartbeat', HEARTBEAT);
+
+    if (typeof SharedWorker === 'undefined') {
+      this.fetchChanges(sseURL.toString());
+    } else {
+      this.#initiateSharedWorkerFetchChanges(sseURL.toString());
     }
-
-    isObservingObjectChanges() {
-        return this.stopObservingObjectChanges !== undefined;
+  }
+
+  /**
+   * @private
+   */
+  #initiateSharedWorkerFetchChanges(url) {
+    if (!this.changesFeedSharedWorker) {
+      this.changesFeedSharedWorker = this.#startSharedWorker();
+
+      if (this.isObservingObjectChanges()) {
+        this.stopObservingObjectChanges();
+      }
+
+      this.stopObservingObjectChanges = () => {
+        delete this.stopObservingObjectChanges;
+      };
+
+      this.changesFeedSharedWorker.port.postMessage({
+        request: 'changes',
+        url
+      });
     }
-
-    /**
-     * @private
-     */
-    observeObjectChanges() {
-
-        let filter = {selector: {}};
-
-        if (this.openmct.objects.SYNCHRONIZED_OBJECT_TYPES.length > 1) {
-            filter.selector.$or = this.openmct.objects.SYNCHRONIZED_OBJECT_TYPES
-                .map(type => {
-                    return {
-                        'model': {
-                            type
-                        }
-                    };
-                });
-        } else {
-            filter.selector.model = {
-                type: this.openmct.objects.SYNCHRONIZED_OBJECT_TYPES[0]
-            };
-        }
-
-        // feed=continuous maintains an indefinitely open connection with a keep-alive of HEARTBEAT milliseconds until this client closes the connection
-        // style=main_only returns only the current winning revision of the document
-        let url = `${this.url}/_changes?feed=continuous&style=main_only&heartbeat=${HEARTBEAT}`;
-
-        let body = {};
-        if (filter) {
-            url = `${url}&filter=_selector`;
-            body = JSON.stringify(filter);
+  }
+
+  onEventError(error) {
+    console.error('Error on feed', error);
+    const { readyState } = error.target;
+    this.#updateIndicatorStatus(readyState);
+  }
+
+  onEventOpen(event) {
+    const { readyState } = event.target;
+    this.#updateIndicatorStatus(readyState);
+  }
+
+  onEventMessage(event) {
+    const { readyState } = event.target;
+    const eventData = JSON.parse(event.data);
+    const identifier = {
+      namespace: this.namespace,
+      key: eventData.id
+    };
+    const keyString = this.openmct.objects.makeKeyString(identifier);
+    this.#updateIndicatorStatus(readyState);
+    let observersForObject = this.observers[keyString];
+
+    if (observersForObject) {
+      observersForObject.forEach(async (observer) => {
+        const updatedObject = await this.get(identifier);
+        if (this.isSynchronizedObject(updatedObject)) {
+          observer(updatedObject);
         }
+      });
+    }
+  }
 
-        if (typeof SharedWorker === 'undefined') {
-            this.fetchChanges(url, body);
-        } else {
-            this.initiateSharedWorkerFetchChanges(url, body);
-        }
+  fetchChanges(url) {
+    const controller = new AbortController();
+    let couchEventSource;
 
+    if (this.isObservingObjectChanges()) {
+      this.stopObservingObjectChanges();
     }
 
-    /**
-     * @private
-     */
-    initiateSharedWorkerFetchChanges(url, body) {
-        if (!this.changesFeedSharedWorker) {
-            this.changesFeedSharedWorker = this.startSharedWorker();
-
-            if (typeof this.stopObservingObjectChanges === 'function') {
-                this.stopObservingObjectChanges();
-            }
-
-            this.stopObservingObjectChanges = () => {
-                delete this.stopObservingObjectChanges;
-            };
-
-            this.changesFeedSharedWorker.port.postMessage({
-                request: 'changes',
-                body,
-                url
-            });
-        }
+    this.stopObservingObjectChanges = () => {
+      controller.abort();
+      couchEventSource.removeEventListener('message', this.onEventMessage.bind(this));
+      delete this.stopObservingObjectChanges;
+    };
+
+    console.debug('⇿ Opening CouchDB change feed connection ⇿');
+
+    couchEventSource = new EventSource(url);
+    couchEventSource.onerror = this.onEventError.bind(this);
+    couchEventSource.onopen = this.onEventOpen.bind(this);
+
+    // start listening for events
+    couchEventSource.addEventListener('message', this.onEventMessage.bind(this));
+
+    console.debug('⇿ Opened connection ⇿');
+  }
+
+  /**
+   * @private
+   */
+  #getIntermediateResponse() {
+    let intermediateResponse = {};
+    intermediateResponse.promise = new Promise(function (resolve, reject) {
+      intermediateResponse.resolve = resolve;
+      intermediateResponse.reject = reject;
+    });
+
+    return intermediateResponse;
+  }
+
+  /**
+   * Update the indicator status based on the readyState of the EventSource
+   * @private
+   */
+  #updateIndicatorStatus(readyState) {
+    let message;
+    switch (readyState) {
+      case EventSource.CONNECTING:
+        message = 'pending';
+        break;
+      case EventSource.OPEN:
+        message = 'open';
+        break;
+      case EventSource.CLOSED:
+        message = 'close';
+        break;
+      default:
+        message = 'unknown';
+        break;
     }
 
-    async fetchChanges(url, body) {
-        const controller = new AbortController();
-        const signal = controller.signal;
-
-        let error = false;
-
-        if (typeof this.stopObservingObjectChanges === 'function') {
-            this.stopObservingObjectChanges();
-        }
-
-        this.stopObservingObjectChanges = () => {
-            controller.abort();
-            delete this.stopObservingObjectChanges;
-        };
-
-        const response = await fetch(url, {
-            method: 'POST',
-            signal,
-            headers: {
-                "Content-Type": 'application/json'
-            },
-            body
+    const indicatorState = this.#messageToIndicatorState(message);
+    this.indicator?.setIndicatorToState(indicatorState);
+  }
+
+  /**
+   * @private
+   */
+  enqueueObject(key, model, intermediateResponse) {
+    if (this.objectQueue[key]) {
+      this.objectQueue[key].enqueue({
+        model,
+        intermediateResponse
+      });
+    } else {
+      this.objectQueue[key] = new CouchObjectQueue({
+        model,
+        intermediateResponse
+      });
+    }
+  }
+
+  create(model) {
+    let intermediateResponse = this.#getIntermediateResponse();
+    const key = model.identifier.key;
+    model = this.toPersistableModel(model);
+    this.enqueueObject(key, model, intermediateResponse);
+
+    if (!this.objectQueue[key].pending) {
+      this.objectQueue[key].pending = true;
+      const queued = this.objectQueue[key].dequeue();
+      let couchDocument = new CouchDocument(key, queued.model);
+      couchDocument.metadata.created = Date.now();
+      this.#enqueueForPersistence({
+        key,
+        document: couchDocument
+      })
+        .then((response) => {
+          this.#checkResponse(response, queued.intermediateResponse, key);
+        })
+        .catch((error) => {
+          queued.intermediateResponse.reject(error);
+          this.objectQueue[key].pending = false;
         });
+    }
 
-        let reader;
-
-        if (response.body === undefined) {
-            error = true;
+    return intermediateResponse.promise;
+  }
+
+  #enqueueForPersistence({ key, document }) {
+    return new Promise((resolve, reject) => {
+      this.persistenceQueue.push({
+        key,
+        document,
+        resolve,
+        reject
+      });
+      this.flushPersistenceQueue();
+    });
+  }
+
+  async flushPersistenceQueue() {
+    if (this.persistenceQueue.length > 1) {
+      const batch = {
+        docs: this.persistenceQueue.map((queued) => queued.document)
+      };
+      const response = await this.request('_bulk_docs', 'POST', batch);
+      response.forEach((responseMetadatum) => {
+        const queued = this.persistenceQueue.find(
+          (queuedMetadatum) => queuedMetadatum.key === responseMetadatum.id
+        );
+        if (responseMetadatum.ok) {
+          queued.resolve(responseMetadatum);
         } else {
-            reader = response.body.getReader();
-        }
-
-        while (!error) {
-            const {done, value} = await reader.read();
-            //done is true when we lose connection with the provider
-            if (done) {
-                error = true;
-            }
-
-            if (value) {
-                let chunk = new Uint8Array(value.length);
-                chunk.set(value, 0);
-                const decodedChunk = new TextDecoder("utf-8").decode(chunk).split('\n');
-                if (decodedChunk.length && decodedChunk[decodedChunk.length - 1] === '') {
-                    decodedChunk.forEach((doc, index) => {
-                        try {
-                            const object = JSON.parse(doc);
-                            object.identifier = {
-                                namespace: this.namespace,
-                                key: object.id
-                            };
-                            let keyString = this.openmct.objects.makeKeyString(object.identifier);
-                            let observersForObject = this.observers[keyString];
-
-                            if (observersForObject) {
-                                observersForObject.forEach(async (observer) => {
-                                    const updatedObject = await this.get(object.identifier);
-                                    observer(updatedObject);
-                                });
-                            }
-                        } catch (e) {
-                            //do nothing;
-                        }
-                    });
-                }
-            }
-
+          queued.reject(responseMetadatum);
         }
+      });
+    } else if (this.persistenceQueue.length === 1) {
+      const { key, document, resolve, reject } = this.persistenceQueue[0];
 
-        if (error && Object.keys(this.observers).length > 0) {
-            this.observeObjectChanges();
-        }
+      this.request(key, 'PUT', document).then(resolve).catch(reject);
     }
-
-    /**
-     * @private
-     */
-    getIntermediateResponse() {
-        let intermediateResponse = {};
-        intermediateResponse.promise = new Promise(function (resolve, reject) {
-            intermediateResponse.resolve = resolve;
-            intermediateResponse.reject = reject;
+    this.persistenceQueue = [];
+  }
+
+  /**
+   * @private
+   */
+  #updateQueued(key) {
+    if (!this.objectQueue[key].pending) {
+      this.objectQueue[key].pending = true;
+      const queued = this.objectQueue[key].dequeue();
+      let document = new CouchDocument(key, queued.model, this.objectQueue[key].rev);
+      this.request(key, 'PUT', document)
+        .then((response) => {
+          this.#checkResponse(response, queued.intermediateResponse, key);
+        })
+        .catch((error) => {
+          queued.intermediateResponse.reject(error);
+          this.objectQueue[key].pending = false;
         });
-
-        return intermediateResponse;
     }
+  }
 
-    /**
-     * @private
-     */
-    enqueueObject(key, model, intermediateResponse) {
-        if (this.objectQueue[key]) {
-            this.objectQueue[key].enqueue({
-                model,
-                intermediateResponse
-            });
-        } else {
-            this.objectQueue[key] = new CouchObjectQueue({
-                model,
-                intermediateResponse
-            });
-        }
-    }
+  update(model) {
+    let intermediateResponse = this.#getIntermediateResponse();
+    const key = model.identifier.key;
+    model = this.toPersistableModel(model);
 
-    create(model) {
-        let intermediateResponse = this.getIntermediateResponse();
-        const key = model.identifier.key;
-        this.enqueueObject(key, model, intermediateResponse);
-        this.objectQueue[key].pending = true;
-        const queued = this.objectQueue[key].dequeue();
-        let document = new CouchDocument(key, queued.model);
-        this.request(key, "PUT", document).then((response) => {
-            this.checkResponse(response, queued.intermediateResponse, key);
-        });
+    this.enqueueObject(key, model, intermediateResponse);
+    this.#updateQueued(key);
 
-        return intermediateResponse.promise;
-    }
+    return intermediateResponse.promise;
+  }
 
-    /**
-     * @private
-     */
-    updateQueued(key) {
-        if (!this.objectQueue[key].pending) {
-            this.objectQueue[key].pending = true;
-            const queued = this.objectQueue[key].dequeue();
-            let document = new CouchDocument(key, queued.model, this.objectQueue[key].rev);
-            this.request(key, "PUT", document).then((response) => {
-                this.checkResponse(response, queued.intermediateResponse, key);
-            });
-        }
-    }
+  toPersistableModel(model) {
+    //First make a copy so we are not mutating the provided model.
+    const persistableModel = JSON.parse(JSON.stringify(model));
+    //Delete the identifier. Couch manages namespaces dynamically.
+    delete persistableModel.identifier;
 
-    update(model) {
-        let intermediateResponse = this.getIntermediateResponse();
-        const key = model.identifier.key;
-        this.enqueueObject(key, model, intermediateResponse);
-        this.updateQueued(key);
+    return persistableModel;
+  }
 
-        return intermediateResponse.promise;
-    }
+  fromPersistedModel(model, key) {
+    model.identifier = {
+      namespace: this.namespace,
+      key
+    };
+
+    return model;
+  }
 }
+
+// https://docs.couchdb.org/en/3.2.0/api/basics.html
+CouchObjectProvider.HTTP_OK = 200;
+CouchObjectProvider.HTTP_CREATED = 201;
+CouchObjectProvider.HTTP_ACCEPTED = 202;
+CouchObjectProvider.HTTP_NOT_MODIFIED = 304;
+CouchObjectProvider.HTTP_BAD_REQUEST = 400;
+CouchObjectProvider.HTTP_UNAUTHORIZED = 401;
+CouchObjectProvider.HTTP_FORBIDDEN = 403;
+CouchObjectProvider.HTTP_NOT_FOUND = 404;
+CouchObjectProvider.HTTP_METHOD_NOT_ALLOWED = 404;
+CouchObjectProvider.HTTP_NOT_ACCEPTABLE = 406;
+CouchObjectProvider.HTTP_CONFLICT = 409;
+CouchObjectProvider.HTTP_PRECONDITION_FAILED = 412;
+CouchObjectProvider.HTTP_REQUEST_ENTITY_TOO_LARGE = 413;
+CouchObjectProvider.HTTP_UNSUPPORTED_MEDIA_TYPE = 415;
+CouchObjectProvider.HTTP_REQUESTED_RANGE_NOT_SATISFIABLE = 416;
+CouchObjectProvider.HTTP_EXPECTATION_FAILED = 417;
+CouchObjectProvider.HTTP_SERVER_ERROR = 500;
+// If CouchDB is containerized via Docker it will return 503 if service is unavailable.
+CouchObjectProvider.HTTP_SERVICE_UNAVAILABLE = 503;
+
+export default CouchObjectProvider;
diff --git a/src/plugins/persistence/couch/CouchObjectQueue.js b/src/plugins/persistence/couch/CouchObjectQueue.js
index 52a71297091..d805bc5061f 100644
--- a/src/plugins/persistence/couch/CouchObjectQueue.js
+++ b/src/plugins/persistence/couch/CouchObjectQueue.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,31 +21,30 @@
  *****************************************************************************/
 
 export default class CouchObjectQueue {
-    constructor(object, rev) {
-        this.rev = rev;
-        this.objects = object ? [object] : [];
-        this.pending = false;
-    }
+  constructor(object, rev) {
+    this.rev = rev;
+    this.objects = object ? [object] : [];
+    this.pending = false;
+  }
 
-    updateRevision(rev) {
-        this.rev = rev;
-    }
+  updateRevision(rev) {
+    this.rev = rev;
+  }
 
-    hasNext() {
-        return this.objects.length;
-    }
+  hasNext() {
+    return this.objects.length;
+  }
 
-    enqueue(item) {
-        this.objects.push(item);
-    }
+  enqueue(item) {
+    this.objects.push(item);
+  }
 
-    dequeue() {
-        return this.objects.shift();
-    }
-
-    clear() {
-        this.rev = undefined;
-        this.objects = [];
-    }
+  dequeue() {
+    return this.objects.shift();
+  }
 
+  clear() {
+    this.rev = undefined;
+    this.objects = [];
+  }
 }
diff --git a/src/plugins/persistence/couch/CouchSearchProvider.js b/src/plugins/persistence/couch/CouchSearchProvider.js
new file mode 100644
index 00000000000..7c0740eff37
--- /dev/null
+++ b/src/plugins/persistence/couch/CouchSearchProvider.js
@@ -0,0 +1,204 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+// This provider exists because due to legacy reasons, we need to install
+// two plugins for two namespaces for CouchDB: one for "mct", and one for "".
+// Because of this, we need to separate out the search provider from the object
+// provider so we don't return two results for each found object.
+// If the above namespace is ever resolved, we can fold this search provider
+// back into the object provider.
+
+const BATCH_ANNOTATION_DEBOUNCE_MS = 100;
+
+class CouchSearchProvider {
+  #bulkPromise;
+  #batchIds;
+  #lastAbortSignal;
+
+  constructor(couchObjectProvider) {
+    this.couchObjectProvider = couchObjectProvider;
+    this.searchTypes = couchObjectProvider.openmct.objects.SEARCH_TYPES;
+    this.useDesignDocuments = couchObjectProvider.useDesignDocuments;
+    this.supportedSearchTypes = [
+      this.searchTypes.OBJECTS,
+      this.searchTypes.ANNOTATIONS,
+      this.searchTypes.TAGS
+    ];
+    this.#batchIds = [];
+    this.#bulkPromise = null;
+  }
+
+  supportsSearchType(searchType) {
+    return this.supportedSearchTypes.includes(searchType);
+  }
+
+  isReadOnly() {
+    return true;
+  }
+
+  search(query, abortSignal, searchType) {
+    if (searchType === this.searchTypes.OBJECTS) {
+      return this.searchForObjects(query, abortSignal);
+    } else if (searchType === this.searchTypes.ANNOTATIONS) {
+      return this.searchForAnnotations(query, abortSignal);
+    } else if (searchType === this.searchTypes.TAGS) {
+      return this.searchForTags(query, abortSignal);
+    } else {
+      throw new Error(`🤷‍♂️ Unknown search type passed: ${searchType}`);
+    }
+  }
+
+  searchForObjects(query, abortSignal) {
+    const filter = {
+      selector: {
+        model: {
+          name: {
+            $regex: `(?i)${query}`
+          }
+        }
+      }
+    };
+
+    return this.couchObjectProvider.getObjectsByFilter(filter, abortSignal);
+  }
+
+  async #deferBatchAnnotationSearch() {
+    // We until the next event loop cycle to "collect" all of the get
+    // requests triggered in this iteration of the event loop
+    await this.#waitForDebounce();
+    const batchIdsToSearch = [...this.#batchIds];
+    this.#clearBatch();
+    return this.#bulkAnnotationSearch(batchIdsToSearch);
+  }
+
+  #clearBatch() {
+    this.#batchIds = [];
+    this.#bulkPromise = undefined;
+  }
+
+  #waitForDebounce() {
+    let timeoutID;
+    clearTimeout(timeoutID);
+
+    return new Promise((resolve) => {
+      timeoutID = setTimeout(() => {
+        resolve();
+      }, BATCH_ANNOTATION_DEBOUNCE_MS);
+    });
+  }
+
+  #bulkAnnotationSearch(batchIdsToSearch) {
+    if (!batchIdsToSearch?.length) {
+      // nothing to search
+      return;
+    }
+
+    let lastAbortSignal = batchIdsToSearch[batchIdsToSearch.length - 1].abortSignal;
+
+    if (this.useDesignDocuments) {
+      const keysToSearch = batchIdsToSearch.map(({ keyString }) => keyString);
+      return this.couchObjectProvider.getObjectsByView(
+        {
+          designDoc: 'annotation_keystring_index',
+          viewName: 'by_keystring',
+          keysToSearch
+        },
+        lastAbortSignal
+      );
+    }
+
+    const filter = {
+      selector: {
+        $and: [
+          {
+            'model.type': {
+              $eq: 'annotation'
+            }
+          },
+          {
+            'model.targets': {
+              $elemMatch: {
+                keyString: {
+                  $in: []
+                }
+              }
+            }
+          }
+        ]
+      }
+    };
+    // TODO: should remove duplicates from batchIds
+    batchIdsToSearch.forEach(({ keyString, abortSignal }) => {
+      filter.selector.$and[1]['model.targets'].$elemMatch.keyString.$in.push(keyString);
+    });
+
+    return this.couchObjectProvider.getObjectsByFilter(filter, lastAbortSignal);
+  }
+
+  async searchForAnnotations(keyString, abortSignal) {
+    this.#batchIds.push({ keyString, abortSignal });
+    if (!this.#bulkPromise) {
+      this.#bulkPromise = this.#deferBatchAnnotationSearch();
+    }
+
+    const returnedData = await this.#bulkPromise;
+    return returnedData;
+  }
+
+  searchForTags(tagsArray, abortSignal) {
+    if (!tagsArray || !tagsArray.length) {
+      return [];
+    }
+
+    if (this.useDesignDocuments) {
+      return this.couchObjectProvider.getObjectsByView(
+        { designDoc: 'annotation_tags_index', viewName: 'by_tags', keysToSearch: tagsArray },
+        abortSignal
+      );
+    }
+
+    const filter = {
+      selector: {
+        $and: [
+          {
+            'model.type': {
+              $eq: 'annotation'
+            }
+          },
+          {
+            'model.tags': {
+              $elemMatch: {
+                $in: []
+              }
+            }
+          }
+        ]
+      }
+    };
+    tagsArray.forEach((tag) => {
+      filter.selector.$and[1]['model.tags'].$elemMatch.$in.push(tag);
+    });
+
+    return this.couchObjectProvider.getObjectsByFilter(filter, abortSignal);
+  }
+}
+export default CouchSearchProvider;
diff --git a/src/plugins/persistence/couch/CouchStatusIndicator.js b/src/plugins/persistence/couch/CouchStatusIndicator.js
new file mode 100644
index 00000000000..407d6ca3ab8
--- /dev/null
+++ b/src/plugins/persistence/couch/CouchStatusIndicator.js
@@ -0,0 +1,88 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/**
+ * @typedef {Object} IndicatorState
+ * An object defining the visible state of the indicator.
+ * @property {string} statusClass - The class to apply to the indicator.
+ * @property {string} text - The text to display in the indicator.
+ * @property {string} description - The description to display in the indicator.
+ */
+
+/**
+ * Set of CouchDB connection states; changes among these states will be
+ * reflected in the indicator's appearance.
+ * CONNECTED: Everything nominal, expect to be able to read/write.
+ * DISCONNECTED: HTTP request failed (network error). Unable to reach server at all.
+ * PENDING: Still trying to connect, and haven't failed yet.
+ * MAINTENANCE: CouchDB is connected but not accepting requests.
+ */
+
+/** @type {IndicatorState} */
+export const CONNECTED = {
+  statusClass: 's-status-on',
+  text: 'CouchDB is connected',
+  description: 'CouchDB is online and accepting requests.'
+};
+/** @type {IndicatorState} */
+export const PENDING = {
+  statusClass: 's-status-warning-lo',
+  text: 'Attempting to connect to CouchDB...',
+  description: 'Checking status of CouchDB, please stand by...'
+};
+/** @type {IndicatorState} */
+export const DISCONNECTED = {
+  statusClass: 's-status-warning-hi',
+  text: 'CouchDB is offline',
+  description: 'CouchDB is offline and unavailable for requests.'
+};
+/** @type {IndicatorState} */
+export const UNKNOWN = {
+  statusClass: 's-status-info',
+  text: 'CouchDB connectivity unknown',
+  description: 'CouchDB is in an unknown state of connectivity.'
+};
+
+export default class CouchStatusIndicator {
+  constructor(simpleIndicator) {
+    this.indicator = simpleIndicator;
+    this.#setDefaults();
+  }
+
+  /**
+   * Set the default values for the indicator.
+   * @private
+   */
+  #setDefaults() {
+    this.setIndicatorToState(PENDING);
+  }
+
+  /**
+   * Set the indicator to the given state.
+   * @param {IndicatorState} state
+   */
+  setIndicatorToState(state) {
+    this.indicator.text(state.text);
+    this.indicator.description(state.description);
+    this.indicator.statusClass(state.statusClass);
+  }
+}
diff --git a/src/plugins/persistence/couch/README.md b/src/plugins/persistence/couch/README.md
new file mode 100644
index 00000000000..29421d45ff3
--- /dev/null
+++ b/src/plugins/persistence/couch/README.md
@@ -0,0 +1,295 @@
+
+# Installing CouchDB
+
+## Introduction
+
+These instructions are for setting up CouchDB for a **development** environment. For a production environment, we recommend running Open MCT behind a proxy server (e.g., Nginx or Apache), and securing the CouchDB server properly:
+<https://docs.couchdb.org/en/main/intro/security.html>
+
+## Docker Quickstart
+
+The following process is the preferred way of using CouchDB as it is automatic and closely resembles a production environment.
+
+Requirement:
+Get docker compose (or recent version of docker) installed on your machine. We recommend [Docker Desktop](https://www.docker.com/products/docker-desktop/)
+
+1. Open a terminal to this current working directory (`cd openmct/src/plugins/persistence/couch`)
+2. Create and start the `couchdb` container:
+
+```sh
+docker compose -f ./couchdb-compose.yaml up --detach
+```
+3. Copy `.env.ci` file to file named `.env.local`
+4. (Optional) Change the values of `.env.local` if desired
+5. Set the environment variables in bash by sourcing the env file
+
+```sh
+export $(cat .env.local | xargs)
+```
+
+6. Execute the configuration script:
+
+```sh
+sh ./setup-couchdb.sh
+```
+
+7. `cd` to the workspace root directory (the same directory as `index.html`)
+8. Update `index.html` to use the CouchDB plugin as persistence store:
+
+```sh
+sh ./src/plugins/persistence/couch/replace-localstorage-with-couchdb-indexhtml.sh
+```
+9. ✅ Done!
+
+Open MCT will now use your local CouchDB container as its persistence store. Access the CouchDB instance manager by visiting <http://localhost:5984/_utils>.
+
+### Removing CouchDB Container completely
+
+To completely remove the CouchDB container and volumes:
+
+```sh
+docker stop couch-couchdb-1;docker rm couch-couchdb-1;docker volume rm couch_couchdb
+```
+
+## macOS
+
+While we highly recommend using the CouchDB docker-compose installation, it is still possible to install CouchDB through other means.
+
+### Installing CouchDB
+
+1. Install CouchDB using: `brew install couchdb`. 
+2. Edit `/usr/local/etc/local.ini` and add the following settings:
+
+  ```ini
+  [admins]
+  admin = youradminpassword
+  ```
+
+  And set the server up for single node:
+
+  ```ini
+  [couchdb]
+  single_node=true
+  ```
+
+  Enable CORS
+
+  ```ini
+  [chttpd]
+  enable_cors = true
+  [cors]
+  origins = http://localhost:8080
+  ```
+
+
+### Installing CouchDB without admin privileges to your computer
+
+If `brew` is not available on your mac machine, you'll need to get the CouchDB installed using the official sourcefiles.
+1. Install CouchDB following these instructions: <https://docs.brew.sh/Installation#untar-anywhere>.
+1. Edit `local.ini` in Homebrew's `/etc/` directory as directed above in the 'Installing with admin privileges to your computer' section.
+
+## Other Operating Systems
+
+Follow the installation instructions from the CouchDB installation guide: <https://docs.couchdb.org/en/stable/install/index.html>
+
+# Configuring CouchDB
+
+## Configuration script
+
+The simplest way to config a CouchDB instance is to use our provided tooling:
+1. Copy `.env.ci` file to file named `.env.local`
+2. Set the environment variables in bash by sourcing the env file
+
+```sh
+export $(cat .env.local | xargs)
+```
+
+3. Execute the configuration script:
+
+```sh
+sh ./setup-couchdb.sh
+```
+
+## Manual Configuration
+
+1. Start CouchDB by running: `couchdb`.
+2. Add the `_global_changes` database using `curl` (note the `youradminpassword` should be changed to what you set above 👆): `curl -X PUT http://admin:youradminpassword@127.0.0.1:5984/_global_changes`
+3. Navigate to <http://localhost:5984/_utils>
+4. Create a database called `openmct`
+5. Navigate to <http://127.0.0.1:5984/_utils/#/database/openmct/permissions>
+6. Remove permission restrictions in CouchDB from Open MCT by deleting `_admin` roles for both `Admin` and `Member`.
+
+## Document Sizes
+CouchDB has size limits on both its internal documents, and its httpd interface. If dealing with larger documents in Open MCT (e.g., users adding images to notebook entries), you may to increase this limit. To do this, add the following to the two sections:
+```ini
+  [couchdb]
+  max_document_size = 4294967296 ; approx 4 GB
+  
+  [chttpd]
+  max_http_request_size = 4294967296 ; approx 4 GB
+```
+  
+If not present, add them under proper sections. The values are in bytes, and can be adjusted to whatever is appropriate for your use case.
+
+# Configuring Open MCT to use CouchDB
+
+## Configuration script
+The simplest way to config a CouchDB instance is to use our provided tooling:
+1. `cd` to the workspace root directory (the same directory as `index.html`)
+2. Update `index.html` to use the CouchDB plugin as persistence store:
+
+```sh
+sh ./src/plugins/persistence/couch/replace-localstorage-with-couchdb-indexhtml.sh
+```
+
+## Manual Configuration
+
+1. Edit `openmct/index.html` comment out the following line:
+
+  ```js
+  openmct.install(openmct.plugins.LocalStorage());
+  ```
+
+  Add a line to install the CouchDB plugin for Open MCT:
+
+  ```js
+  openmct.install(
+        openmct.plugins.CouchDB({
+          databases: [
+            {
+              url: 'http://localhost:5984/openmct',
+              namespace: '',
+              additionalNamespaces: [],
+              readOnly: false,
+              useDesignDocuments: false,
+              indicator: true
+            }
+          ]
+        })
+      );
+  ```
+
+### Configuration Options for OpenMCT
+
+When installing the CouchDB plugin for OpenMCT, you can specify a list of databases with configuration options for each. Here's a breakdown of the available options for each database:
+
+- `url`: The URL to the CouchDB instance, specifying the protocol, hostname, and port as needed.
+  - Example: `'http://localhost:5984/openmct'`
+
+- `namespace`: The namespace associated with this database.
+  - Example: `'openmct-sandbox'`
+
+- `additionalNamespaces`: Other namespaces that this plugin should respond to requests for.
+  - Example: `['apple-namespace', 'pear-namespace']`
+
+- `readOnly`: A boolean indicating whether the database should be treated as read-only. If set to `true`, OpenMCT will not attempt to write to this database.
+  - Example: `false`
+
+- `useDesignDocuments`: Indicates whether design documents should be used to speed up annotation search.
+  - Example: `false`
+
+- `indicator`: A boolean to specify whether an indicator should show the status of this CouchDB connection in the OpenMCT interface.
+  - Example: `true`
+
+Note: If using the `exampleTags` plugin with non-blank namespaces, you'll need to configure it point to a writable database. For example:
+
+```js
+openmct.install(
+        openmct.plugins.example.ExampleTags({ namespaceToSaveAnnotations: 'openmct-sandbox' })
+      );
+```
+
+Note: If using the `MyItems` plugin, be sure to configure a root for each writable namespace. E.g., if you have two namespaces called `apple-namespace` and `pear-namespace`:
+```js
+      openmct.install(openmct.plugins.MyItems('Apple Items', 'apple-namespace'));
+      openmct.install(openmct.plugins.MyItems('Pear Items', 'pear-namespace'));
+```
+This will create a root object with the id of `mine` in both namespaces upon load if not already created.
+
+# Validating a successful Installation
+
+1. Start Open MCT by running `npm start` in the `openmct` path.
+2. Navigate to <http://localhost:8080/> and create a random object in Open MCT (e.g., a 'Clock') and save.
+3. Navigate to: <http://127.0.0.1:5984/_utils/#database/openmct/_all_docs>
+4. Look at the 'JSON' tab and ensure you can see the specific object you created above.
+5. All done! 🏆
+
+# Maintenance
+
+One can delete annotations by running inside this directory (i.e., `src/plugins/persistence/couch`):
+```
+npm run deleteAnnotations:openmct:PIXEL_SPATIAL
+```
+
+will delete all image tags.
+
+```
+npm run deleteAnnotations:openmct 
+```
+
+will delete all tags. 
+
+```
+npm run deleteAnnotations:openmct -- --help
+```
+
+will print help options.
+# Search Performance
+
+For large Open MCT installations, it may be helpful to add additional CouchDB capabilities to bear to improve performance.
+
+## Indexing
+Indexing the `model.type` field in CouchDB can benefit the performance of queries significantly, particularly if there are a large number of documents in the database. An index can accelerate annotation searches by reducing the number of documents that the database needs to examine.
+
+To create an index for `model.type`, you can use the following payload [using the API](https://docs.couchdb.org/en/stable/api/database/find.html#post--db-_index):
+
+```json
+{
+  "index": {
+    "fields": ["model.type", "model.tags"]
+  },
+  "name": "type_tags_index",
+  "type": "json"
+}
+```
+
+This instructs CouchDB to create an index on the `model.type` field and the `model.tags` field. Once this index is created, queries that include a selector on `model.type` and `model.tags` (like when searching for tags) can use this index to retrieve results faster.
+
+You can find more detailed information about indexing in CouchDB in the [official documentation](https://docs.couchdb.org/en/stable/api/database/find.html#db-index).
+
+## Design Documents
+
+We can also add a design document [through the API](https://docs.couchdb.org/en/stable/api/ddoc/common.html#put--db-_design-ddoc) for retrieving domain objects for specific tags:
+
+```json
+{
+  "_id": "_design/annotation_tags_index",
+  "views": {
+    "by_tags": {
+      "map": "function (doc) { if (doc.model && doc.model.type === 'annotation' && doc.model.tags) { doc.model.tags.forEach(function (tag) { emit(tag, doc._id); }); } }"
+    }
+  }
+}
+```
+and can be retrieved by issuing a `GET` to http://localhost:5984/openmct/_design/annotation_tags_index/_view/by_tags?keys=["TAG_ID_TO_SEARCH_FOR"]&include_docs=true
+where `TAG_ID_TO_SEARCH_FOR` is the tag UUID we're looking for.
+
+and for targets:
+```javascript
+{
+  "_id": "_design/annotation_keystring_index",
+  "views": {
+    "by_keystring": {
+      "map": "function (doc) { if (doc.model && doc.model.type === 'annotation' && doc.model.targets) { doc.model.targets.forEach(function(target) { if(target.keyString) { emit(target.keyString, doc._id); } }); } }"
+    }
+  }
+}
+```
+and can be retrieved by issuing a `GET` to http://localhost:5984/openmct/_design/annotation_keystring_index/_view/by_keystring?keys=["KEY_STRING_TO_SEARCH_FOR"]&include_docs=true
+where `KEY_STRING_TO_SEARCH_FOR` is the UUID we're looking for.
+
+To enable them in Open MCT, we need to configure the plugin `useDesignDocuments` like so:
+
+  ```js
+  openmct.install(openmct.plugins.CouchDB({url: "http://localhost:5984/openmct", useDesignDocuments: true}));
+  ```
diff --git a/src/plugins/persistence/couch/couchdb-compose.yaml b/src/plugins/persistence/couch/couchdb-compose.yaml
new file mode 100644
index 00000000000..5551d333843
--- /dev/null
+++ b/src/plugins/persistence/couch/couchdb-compose.yaml
@@ -0,0 +1,13 @@
+version: '3'
+services:
+  couchdb:
+    image: couchdb:${COUCHDB_IMAGE_TAG:-3.3.2}
+    ports:
+      - '5984:5984'
+    volumes:
+      - couchdb:/opt/couchdb/data
+    environment:
+      COUCHDB_USER: admin
+      COUCHDB_PASSWORD: password
+volumes:
+  couchdb:
diff --git a/src/plugins/persistence/couch/package.json b/src/plugins/persistence/couch/package.json
new file mode 100644
index 00000000000..4e306e6e179
--- /dev/null
+++ b/src/plugins/persistence/couch/package.json
@@ -0,0 +1,18 @@
+{
+    "name": "openmct-couch-plugin",
+    "version": "1.0.0",
+    "description": "CouchDB persistence plugin for Open MCT",
+    "dependencies": {
+        "@cloudant/couchbackup": "2.9.9"
+    },
+    "scripts": {
+        "backup:openmct": "npx couchbackup -u http://admin:password@127.0.0.1:5984/ -d openmct -o openmct-couch-backup.txt",
+        "restore:openmct": "cat openmct-couch-backup.txt | npx couchrestore -u http://admin:password@127.0.0.1:5984/ -d openmct",
+        "deleteAnnotations:openmct": "node scripts/deleteAnnotations.js $*",
+        "deleteAnnotations:openmct:NOTEBOOK": "node scripts/deleteAnnotations.js -- --annotationType NOTEBOOK",
+        "deleteAnnotations:openmct:GEOSPATIAL": "node scripts/deleteAnnotations.js -- --annotationType GEOSPATIAL",
+        "deleteAnnotations:openmct:PIXEL_SPATIAL": "node scripts/deleteAnnotations.js -- --annotationType PIXEL_SPATIAL",
+        "deleteAnnotations:openmct:TEMPORAL": "node scripts/deleteAnnotations.js -- --annotationType TEMPORAL",
+        "deleteAnnotations:openmct:PLOT_SPATIAL": "node scripts/deleteAnnotations.js -- --annotationType PLOT_SPATIAL"
+    }
+}
\ No newline at end of file
diff --git a/src/plugins/persistence/couch/plugin.js b/src/plugins/persistence/couch/plugin.js
index 85353976f92..09f5c7306f9 100644
--- a/src/plugins/persistence/couch/plugin.js
+++ b/src/plugins/persistence/couch/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,13 +20,85 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import CouchObjectProvider from './CouchObjectProvider';
-const NAMESPACE = '';
-const PERSISTENCE_SPACE = 'mct';
+import CouchObjectProvider from './CouchObjectProvider.js';
+import CouchSearchProvider from './CouchSearchProvider.js';
+import CouchStatusIndicator from './CouchStatusIndicator.js';
+
+const DEFAULT_NAMESPACE = '';
+const LEGACY_SPACE = 'mct';
 
 export default function CouchPlugin(options) {
-    return function install(openmct) {
-        install.couchProvider = new CouchObjectProvider(openmct, options, NAMESPACE);
-        openmct.objects.addProvider(PERSISTENCE_SPACE, install.couchProvider);
-    };
+  function normalizeOptions(unnormalizedOptions) {
+    const normalizedOptions = {};
+    if (typeof unnormalizedOptions === 'string') {
+      normalizedOptions.databases = [
+        {
+          url: options,
+          namespace: DEFAULT_NAMESPACE,
+          additionalNamespaces: [LEGACY_SPACE],
+          readOnly: false,
+          useDesignDocuments: false,
+          indicator: true
+        }
+      ];
+    } else if (!unnormalizedOptions.databases) {
+      normalizedOptions.databases = [
+        {
+          url: unnormalizedOptions.url,
+          namespace: DEFAULT_NAMESPACE,
+          additionalNamespaces: [LEGACY_SPACE],
+          readOnly: false,
+          useDesignDocuments: unnormalizedOptions.useDesignDocuments,
+          indicator: true
+        }
+      ];
+    } else {
+      normalizedOptions.databases = unnormalizedOptions.databases;
+    }
+
+    // final sanity check, ensure we have all options
+    normalizedOptions.databases.forEach((databaseConfiguration) => {
+      if (!databaseConfiguration.url) {
+        throw new Error(
+          `🛑 CouchDB plugin requires a url option. Please check the configuration for namespace ${databaseConfiguration.namespace}`
+        );
+      } else if (databaseConfiguration.namespace === undefined) {
+        // note we can't check for just !databaseConfiguration.namespace because it could be an empty string
+        throw new Error(
+          `🛑 CouchDB plugin requires a namespace option. Please check the configuration for url ${databaseConfiguration.url}`
+        );
+      }
+    });
+
+    return normalizedOptions;
+  }
+
+  return function install(openmct) {
+    const normalizedOptions = normalizeOptions(options);
+    normalizedOptions.databases.forEach((databaseConfiguration) => {
+      let couchStatusIndicator;
+      if (databaseConfiguration.indicator) {
+        const simpleIndicator = openmct.indicators.simpleIndicator();
+        openmct.indicators.add(simpleIndicator);
+        couchStatusIndicator = new CouchStatusIndicator(simpleIndicator);
+      }
+      // the provider is added to the install function to expose couchProvider to unit tests
+      install.couchProvider = new CouchObjectProvider({
+        openmct,
+        databaseConfiguration,
+        couchStatusIndicator
+      });
+      openmct.objects.addProvider(databaseConfiguration.namespace, install.couchProvider);
+      databaseConfiguration.additionalNamespaces?.forEach((additionalNamespace) => {
+        openmct.objects.addProvider(additionalNamespace, install.couchProvider);
+      });
+
+      // need one search provider for whole couch database
+      const searchOnlyNamespace = `COUCH_SEARCH_${databaseConfiguration.namespace}${Date.now()}`;
+      openmct.objects.addProvider(
+        searchOnlyNamespace,
+        new CouchSearchProvider(install.couchProvider)
+      );
+    });
+  };
 }
diff --git a/src/plugins/persistence/couch/pluginSpec.js b/src/plugins/persistence/couch/pluginSpec.js
index a015ae29b73..a925bf407b6 100644
--- a/src/plugins/persistence/couch/pluginSpec.js
+++ b/src/plugins/persistence/couch/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,211 +19,546 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+import { createOpenMct, resetApplicationState, spyOnBuiltins } from 'utils/testing';
+import { nextTick } from 'vue';
+
+import { CONNECTED, DISCONNECTED, PENDING, UNKNOWN } from './CouchStatusIndicator.js';
 import CouchPlugin from './plugin.js';
-import {
-    createOpenMct,
-    resetApplicationState, spyOnBuiltins
-} from 'utils/testing';
 
 describe('the plugin', () => {
-    let openmct;
-    let provider;
-    let testPath = '/test/db';
-    let options;
-    let mockIdentifierService;
-    let mockDomainObject;
-
-    beforeEach((done) => {
-        spyOnBuiltins(['fetch'], window);
-
-        mockDomainObject = {
-            identifier: {
-                namespace: '',
-                key: 'some-value'
-            },
-            type: 'mock-type',
-            modified: 0
-        };
-        options = {
-            url: testPath,
-            filter: {},
-            disableObserve: true
-        };
-        openmct = createOpenMct(false);
-
-        openmct.$injector = jasmine.createSpyObj('$injector', ['get']);
-        mockIdentifierService = jasmine.createSpyObj(
-            'identifierService',
-            ['parse']
-        );
-        mockIdentifierService.parse.and.returnValue({
-            getSpace: () => {
-                return 'mct';
-            }
-        });
+  let openmct;
+  let provider;
+  let testPath = 'http://localhost:9990/openmct';
+  let options;
+  let mockIdentifierService;
+  let mockDomainObject;
+
+  beforeEach((done) => {
+    spyOnBuiltins(['fetch'], window);
+
+    mockDomainObject = {
+      identifier: {
+        namespace: '',
+        key: 'some-value'
+      },
+      type: 'notebook',
+      modified: 0
+    };
+    options = {
+      url: testPath,
+      filter: {}
+    };
+    openmct = createOpenMct();
+
+    openmct.$injector = jasmine.createSpyObj('$injector', ['get']);
+    mockIdentifierService = jasmine.createSpyObj('identifierService', ['parse']);
+    mockIdentifierService.parse.and.returnValue({
+      getSpace: () => {
+        return 'mct';
+      }
+    });
 
-        openmct.$injector.get.and.returnValue(mockIdentifierService);
+    openmct.$injector.get.and.returnValue(mockIdentifierService);
 
-        openmct.install(new CouchPlugin(options));
+    openmct.install(new CouchPlugin(options));
 
-        openmct.types.addType('mock-type', {creatable: true});
+    openmct.types.addType('notebook', { creatable: true });
 
-        openmct.on('start', done);
-        openmct.startHeadless();
+    openmct.on('start', done);
+    openmct.startHeadless();
 
-        provider = openmct.objects.getProvider(mockDomainObject.identifier);
-        spyOn(provider, 'get').and.callThrough();
-        spyOn(provider, 'create').and.callThrough();
-        spyOn(provider, 'update').and.callThrough();
+    provider = openmct.objects.getProvider(mockDomainObject.identifier);
+    spyOn(provider, 'get').and.callThrough();
+    spyOn(provider, 'create').and.callThrough();
+    spyOn(provider, 'update').and.callThrough();
+    spyOn(provider, 'observe').and.callThrough();
+    spyOn(provider, 'fetchChanges').and.callThrough();
+    spyOn(provider, 'onSharedWorkerMessage').and.callThrough();
+    spyOn(provider, 'onEventMessage').and.callThrough();
+    spyOn(provider, 'isObservingObjectChanges').and.callThrough();
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  describe('the provider', () => {
+    let mockPromise;
+    beforeEach(() => {
+      mockPromise = Promise.resolve({
+        json: () => {
+          return {
+            ok: true,
+            _id: 'some-value',
+            id: 'some-value',
+            _rev: 1,
+            model: {}
+          };
+        }
+      });
+      fetch.and.returnValue(mockPromise);
     });
 
-    afterEach(() => {
-        return resetApplicationState(openmct);
+    it('gets an object', async () => {
+      const result = await openmct.objects.get(mockDomainObject.identifier);
+      expect(result.identifier.key).toEqual(mockDomainObject.identifier.key);
     });
 
-    describe('the provider', () => {
-        let mockPromise;
-        beforeEach(() => {
-            mockPromise = Promise.resolve({
-                json: () => {
-                    return {
-                        ok: true,
-                        _id: 'some-value',
-                        id: 'some-value',
-                        _rev: 1,
-                        model: {}
-                    };
-                }
-            });
-            fetch.and.returnValue(mockPromise);
-        });
+    it('prioritizes couch requests above other requests', async () => {
+      await openmct.objects.get(mockDomainObject.identifier);
+      const fetchOptions = fetch.calls.mostRecent().args[1];
+      expect(fetchOptions.priority).toEqual('high');
+    });
 
-        it('gets an object', () => {
-            return openmct.objects.get(mockDomainObject.identifier).then((result) => {
-                expect(result.identifier.key).toEqual(mockDomainObject.identifier.key);
-            });
-        });
+    it('creates an object and starts shared worker', async () => {
+      const result = await openmct.objects.save(mockDomainObject);
+      expect(provider.create).toHaveBeenCalled();
+      expect(provider.observe).toHaveBeenCalled();
+      expect(result).toBeTrue();
+    });
 
-        it('creates an object', () => {
-            return openmct.objects.save(mockDomainObject).then((result) => {
-                expect(provider.create).toHaveBeenCalled();
-                expect(result).toBeTrue();
-            });
+    it('updates an object', (done) => {
+      openmct.objects.save(mockDomainObject).then((result) => {
+        expect(result).toBeTrue();
+        expect(provider.create).toHaveBeenCalled();
+        //Set modified timestamp it detects a change and persists the updated model.
+        mockDomainObject.modified = mockDomainObject.persisted + 1;
+        openmct.objects.save(mockDomainObject).then((updatedResult) => {
+          expect(updatedResult).toBeTrue();
+          expect(provider.update).toHaveBeenCalled();
+          done();
         });
+      });
+    });
 
-        it('updates an object', (done) => {
-            return openmct.objects.save(mockDomainObject).then((result) => {
-                expect(result).toBeTrue();
-                expect(provider.create).toHaveBeenCalled();
+    it('works without Shared Workers', async () => {
+      let sharedWorkerCallback;
+      const cachedSharedWorker = window.SharedWorker;
+      window.SharedWorker = undefined;
 
-                //Set modified timestamp it detects a change and persists the updated model.
-                mockDomainObject.modified = Date.now();
+      const mockEventSource = {
+        addEventListener: (topic, addedListener) => {
+          sharedWorkerCallback = addedListener;
+        },
+        removeEventListener: () => {
+          sharedWorkerCallback = null;
+        }
+      };
+      const cachedEventSource = window.EventSource;
 
-                return openmct.objects.save(mockDomainObject).then((updatedResult) => {
-                    expect(updatedResult).toBeTrue();
-                    expect(provider.update).toHaveBeenCalled();
-                    done();
-                });
-            });
-        });
+      window.EventSource = function (url) {
+        return mockEventSource;
+      };
+
+      mockDomainObject.id = mockDomainObject.identifier.key;
+
+      const fakeUpdateEvent = {
+        data: JSON.stringify(mockDomainObject),
+        target: {
+          readyState: EventSource.CONNECTED
+        }
+      };
+
+      // eslint-disable-next-line require-await
+      provider.request = async function (subPath, method, body, signal) {
+        return {
+          body: fakeUpdateEvent,
+          ok: true,
+          id: mockDomainObject.id,
+          rev: 5
+        };
+      };
+
+      const result = await openmct.objects.save(mockDomainObject);
+      expect(result).toBeTrue();
+      expect(provider.create).toHaveBeenCalled();
+      expect(provider.observe).toHaveBeenCalled();
+      expect(provider.isObservingObjectChanges).toHaveBeenCalled();
+
+      //Set modified timestamp it detects a change and persists the updated model.
+      mockDomainObject.modified = mockDomainObject.persisted + 1;
+      const updatedResult = await openmct.objects.save(mockDomainObject);
+      openmct.objects.observe(mockDomainObject, '*', (updatedObject) => {});
+
+      expect(updatedResult).toBeTrue();
+      expect(provider.update).toHaveBeenCalled();
+      expect(provider.fetchChanges).toHaveBeenCalled();
+      expect(provider.isObservingObjectChanges.calls.mostRecent().returnValue).toBe(true);
+      sharedWorkerCallback(fakeUpdateEvent);
+      expect(provider.onEventMessage).toHaveBeenCalled();
+
+      window.SharedWorker = cachedSharedWorker;
+      window.EventSource = cachedEventSource;
     });
-    describe('batches requests', () => {
-        let mockPromise;
-        beforeEach(() => {
-            mockPromise = Promise.resolve({
-                json: () => {
-                    return {
-                        total_rows: 0,
-                        rows: []
-                    };
-                }
-            });
-            fetch.and.returnValue(mockPromise);
-        });
-        it('for multiple simultaneous gets', () => {
-            const objectIds = [
-                {
-                    namespace: '',
-                    key: 'object-1'
-                }, {
-                    namespace: '',
-                    key: 'object-2'
-                }, {
-                    namespace: '',
-                    key: 'object-3'
-                }
-            ];
-
-            const getAllObjects = Promise.all(
-                objectIds.map((identifier) =>
-                    openmct.objects.get(identifier)
-                ));
-
-            return getAllObjects.then(() => {
-                const requestUrl = fetch.calls.mostRecent().args[0];
-                const requestMethod = fetch.calls.mostRecent().args[1].method;
-
-                expect(fetch).toHaveBeenCalledTimes(1);
-                expect(requestUrl.includes('_all_docs')).toBeTrue();
-                expect(requestMethod).toEqual('POST');
-            });
-        });
+  });
+  describe('batches requests', () => {
+    let mockPromise;
+    beforeEach(() => {
+      mockPromise = Promise.resolve({
+        json: () => {
+          return {
+            total_rows: 0,
+            rows: []
+          };
+        }
+      });
+      fetch.and.returnValue(mockPromise);
+    });
+    it('for multiple simultaneous gets', async () => {
+      const objectIds = [
+        {
+          namespace: '',
+          key: 'object-1'
+        },
+        {
+          namespace: '',
+          key: 'object-2'
+        },
+        {
+          namespace: '',
+          key: 'object-3'
+        }
+      ];
+
+      await Promise.all(objectIds.map((identifier) => openmct.objects.get(identifier)));
+
+      const requestUrl = fetch.calls.mostRecent().args[0];
+      const requestMethod = fetch.calls.mostRecent().args[1].method;
+      expect(fetch).toHaveBeenCalledTimes(1);
+      expect(requestUrl.includes('_all_docs')).toBeTrue();
+      expect(requestMethod).toEqual('POST');
+    });
+
+    it('but not for single gets', async () => {
+      const objectId = {
+        namespace: '',
+        key: 'object-1'
+      };
+
+      await openmct.objects.get(objectId);
+      const requestUrl = fetch.calls.mostRecent().args[0];
+      const requestMethod = fetch.calls.mostRecent().args[1].method;
+
+      expect(fetch).toHaveBeenCalledTimes(1);
+      expect(requestUrl.endsWith(`${objectId.key}`)).toBeTrue();
+      expect(requestMethod).toEqual('GET');
+    });
+  });
+  describe('batches persistence', () => {
+    let successfulMockPromise;
+    let partialFailureMockPromise;
+    let objectsToPersist;
+
+    beforeEach(() => {
+      successfulMockPromise = Promise.resolve({
+        json: () => {
+          return [
+            {
+              id: 'object-1',
+              ok: true
+            },
+            {
+              id: 'object-2',
+              ok: true
+            },
+            {
+              id: 'object-3',
+              ok: true
+            }
+          ];
+        }
+      });
+
+      partialFailureMockPromise = Promise.resolve({
+        json: () => {
+          return [
+            {
+              id: 'object-1',
+              ok: true
+            },
+            {
+              id: 'object-2',
+              ok: false
+            },
+            {
+              id: 'object-3',
+              ok: true
+            }
+          ];
+        }
+      });
+
+      objectsToPersist = [
+        {
+          identifier: {
+            namespace: '',
+            key: 'object-1'
+          },
+          name: 'object-1',
+          type: 'folder',
+          modified: 0
+        },
+        {
+          identifier: {
+            namespace: '',
+            key: 'object-2'
+          },
+          name: 'object-2',
+          type: 'folder',
+          modified: 0
+        },
+        {
+          identifier: {
+            namespace: '',
+            key: 'object-3'
+          },
+          name: 'object-3',
+          type: 'folder',
+          modified: 0
+        }
+      ];
+    });
+    it('for multiple simultaneous successful saves', async () => {
+      fetch.and.returnValue(successfulMockPromise);
+
+      await Promise.all(
+        objectsToPersist.map((objectToPersist) => openmct.objects.save(objectToPersist))
+      );
+
+      const requestUrl = fetch.calls.mostRecent().args[0];
+      const requestMethod = fetch.calls.mostRecent().args[1].method;
+      const requestBody = JSON.parse(fetch.calls.mostRecent().args[1].body);
+
+      expect(fetch).toHaveBeenCalledTimes(1);
+      expect(requestUrl.includes('_bulk_docs')).toBeTrue();
+      expect(requestMethod).toEqual('POST');
+      expect(
+        objectsToPersist.every(
+          (object, index) => object.identifier.key === requestBody.docs[index]._id
+        )
+      ).toBeTrue();
+    });
+    it('for multiple simultaneous saves with partial failure', async () => {
+      fetch.and.returnValue(partialFailureMockPromise);
+
+      let saveResults = await Promise.all(
+        objectsToPersist.map((objectToPersist) =>
+          openmct.objects
+            .save(objectToPersist)
+            .then(() => true)
+            .catch(() => false)
+        )
+      );
+      expect(saveResults[0]).toBeTrue();
+      expect(saveResults[1]).toBeFalse();
+      expect(saveResults[2]).toBeTrue();
+    });
+    it('except for a single save', async () => {
+      fetch.and.returnValue({
+        json: () => {
+          return {
+            id: 'object-1',
+            ok: true
+          };
+        }
+      });
+      await openmct.objects.save(objectsToPersist[0]);
 
-        it('but not for single gets', () => {
-            const objectId = {
-                namespace: '',
-                key: 'object-1'
+      const requestUrl = fetch.calls.mostRecent().args[0];
+      const requestMethod = fetch.calls.mostRecent().args[1].method;
+
+      expect(fetch).toHaveBeenCalledTimes(1);
+      expect(requestUrl.includes('_bulk_docs')).toBeFalse();
+      expect(requestUrl.endsWith('object-1')).toBeTrue();
+      expect(requestMethod).toEqual('PUT');
+    });
+  });
+  describe('implements server-side search', () => {
+    let mockPromise;
+    beforeEach(() => {
+      mockPromise = Promise.resolve({
+        body: {
+          getReader() {
+            return {
+              read() {
+                return Promise.resolve({
+                  done: true,
+                  value: undefined
+                });
+              }
             };
+          }
+        }
+      });
+      fetch.and.returnValue(mockPromise);
+    });
 
-            const getObject = openmct.objects.get(objectId);
+    it("using Couch's 'find' endpoint", async () => {
+      await Promise.all(openmct.objects.search('test'));
+      const requestUrl = fetch.calls.mostRecent().args[0];
 
-            return getObject.then(() => {
-                const requestUrl = fetch.calls.mostRecent().args[0];
-                const requestMethod = fetch.calls.mostRecent().args[1].method;
+      // we only want one call to fetch, not 2!
+      // see https://github.com/nasa/openmct/issues/4667
+      expect(fetch).toHaveBeenCalledTimes(1);
+      expect(requestUrl.endsWith('_find')).toBeTrue();
+    });
 
-                expect(fetch).toHaveBeenCalledTimes(1);
-                expect(requestUrl.endsWith(`${objectId.key}`)).toBeTrue();
-                expect(requestMethod).toEqual('GET');
-            });
-        });
+    it('and supports search by object name', async () => {
+      await Promise.all(openmct.objects.search('test'));
+      const requestPayload = JSON.parse(fetch.calls.mostRecent().args[1].body);
+
+      expect(requestPayload).toBeDefined();
+      expect(requestPayload.selector.model.name.$regex).toEqual('(?i)test');
     });
-    describe('implements server-side search', () => {
-        let mockPromise;
-        beforeEach(() => {
-            mockPromise = Promise.resolve({
-                body: {
-                    getReader() {
-                        return {
-                            read() {
-                                return Promise.resolve({
-                                    done: true,
-                                    value: undefined
-                                });
-                            }
-                        };
-                    }
-                }
-            });
-            fetch.and.returnValue(mockPromise);
-        });
+  });
+});
 
-        it("using Couch's 'find' endpoint", () => {
-            return Promise.all(openmct.objects.search('test')).then(() => {
-                const requestUrl = fetch.calls.mostRecent().args[0];
+describe('the view', () => {
+  let openmct;
+  let options;
+  let appHolder;
+  let testPath = 'http://localhost:9990/openmct';
+  let provider;
+  let mockDomainObject;
+  beforeEach((done) => {
+    openmct = createOpenMct();
+    spyOnBuiltins(['fetch'], window);
+    options = {
+      url: testPath,
+      filter: {}
+    };
+    mockDomainObject = {
+      identifier: {
+        namespace: '',
+        key: 'some-value'
+      },
+      type: 'notebook',
+      modified: 0
+    };
+    openmct.install(new CouchPlugin(options));
+    appHolder = document.createElement('div');
+    document.body.appendChild(appHolder);
+    openmct.on('start', done);
+    openmct.start(appHolder);
+    provider = openmct.objects.getProvider(mockDomainObject.identifier);
+    spyOn(provider, 'onSharedWorkerMessage').and.callThrough();
+  });
 
-                expect(fetch).toHaveBeenCalled();
-                expect(requestUrl.endsWith('_find')).toBeTrue();
-            });
-        });
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
 
-        it("and supports search by object name", () => {
-            return Promise.all(openmct.objects.search('test')).then(() => {
-                const requestPayload = JSON.parse(fetch.calls.mostRecent().args[1].body);
+  describe('updates CouchDB status indicator', () => {
+    let mockPromise;
 
-                expect(requestPayload).toBeDefined();
-                expect(requestPayload.selector.model.name.$regex).toEqual('(?i)test');
-            });
-        });
+    function assertCouchIndicatorStatus(status) {
+      const indicator = appHolder.querySelector('.c-indicator--simple');
+      expect(indicator).not.toBeNull();
+      expect(indicator).toHaveClass(status.statusClass);
+      expect(indicator.textContent).toMatch(new RegExp(status.text, 'i'));
+      expect(indicator.title).toMatch(new RegExp(status.title, 'i'));
+    }
+
+    it("to 'connected' on successful request", async () => {
+      mockPromise = Promise.resolve({
+        status: 200,
+        json: () => {
+          return {
+            ok: true,
+            _id: 'some-value',
+            id: 'some-value',
+            _rev: 1,
+            model: {}
+          };
+        }
+      });
+      fetch.and.returnValue(mockPromise);
+
+      await openmct.objects.get({
+        namespace: '',
+        key: 'object-1'
+      });
+      await nextTick();
+
+      assertCouchIndicatorStatus(CONNECTED);
+    });
+
+    it("to 'disconnected' on failed request", async () => {
+      fetch.and.throwError(new TypeError('ERR_CONNECTION_REFUSED'));
+
+      await openmct.objects.get({
+        namespace: '',
+        key: 'object-1'
+      });
+      await nextTick();
+
+      assertCouchIndicatorStatus(DISCONNECTED);
+    });
+
+    it("to 'pending'", async () => {
+      const workerMessage = {
+        data: {
+          type: 'state',
+          state: 'pending'
+        }
+      };
+      mockPromise = Promise.resolve({
+        status: 200,
+        json: () => {
+          return {
+            ok: true,
+            _id: 'some-value',
+            id: 'some-value',
+            _rev: 1,
+            model: {}
+          };
+        }
+      });
+      fetch.and.returnValue(mockPromise);
+
+      await openmct.objects.get({
+        namespace: '',
+        key: 'object-1'
+      });
+
+      // Simulate 'pending' state from worker message
+      provider.onSharedWorkerMessage(workerMessage);
+      await nextTick();
+
+      assertCouchIndicatorStatus(PENDING);
+    });
+
+    it("to 'unknown'", async () => {
+      const workerMessage = {
+        data: {
+          type: 'state',
+          state: 'unknown'
+        }
+      };
+      mockPromise = Promise.resolve({
+        status: 200,
+        json: () => {
+          return {
+            ok: true,
+            _id: 'some-value',
+            id: 'some-value',
+            _rev: 1,
+            model: {}
+          };
+        }
+      });
+      fetch.and.returnValue(mockPromise);
+
+      await openmct.objects.get({
+        namespace: '',
+        key: 'object-1'
+      });
+
+      // Simulate 'pending' state from worker message
+      provider.onSharedWorkerMessage(workerMessage);
+      await nextTick();
 
+      assertCouchIndicatorStatus(UNKNOWN);
     });
+  });
 });
diff --git a/src/plugins/persistence/couch/replace-localstorage-with-couchdb-indexhtml.sh b/src/plugins/persistence/couch/replace-localstorage-with-couchdb-indexhtml.sh
new file mode 100644
index 00000000000..4fbc50d4ec6
--- /dev/null
+++ b/src/plugins/persistence/couch/replace-localstorage-with-couchdb-indexhtml.sh
@@ -0,0 +1,3 @@
+#!/bin/bash -e
+
+sed -i'.bak' -e 's/LocalStorage()/CouchDB("http:\/\/localhost:5984\/openmct")/g' index.html
diff --git a/src/plugins/persistence/couch/scripts/deleteAnnotations.js b/src/plugins/persistence/couch/scripts/deleteAnnotations.js
new file mode 100755
index 00000000000..6756d9de2a0
--- /dev/null
+++ b/src/plugins/persistence/couch/scripts/deleteAnnotations.js
@@ -0,0 +1,190 @@
+#!/usr/bin/env node
+
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+const process = require('process');
+
+async function main() {
+  try {
+    const { annotationType, serverUrl, databaseName, helpRequested, username, password } =
+      processArguments();
+    if (helpRequested) {
+      return;
+    }
+    const docsToDelete = await gatherDocumentsForDeletion({
+      serverUrl,
+      databaseName,
+      annotationType,
+      username,
+      password
+    });
+    const deletedDocumentCount = await performBulkDelete({
+      docsToDelete,
+      serverUrl,
+      databaseName,
+      username,
+      password
+    });
+    console.log(
+      `Deleted ${deletedDocumentCount} document${deletedDocumentCount === 1 ? '' : 's'}.`
+    );
+  } catch (error) {
+    console.error(`Error: ${error.message}`);
+  }
+}
+
+const ANNOTATION_TYPES = Object.freeze({
+  NOTEBOOK: 'NOTEBOOK',
+  GEOSPATIAL: 'GEOSPATIAL',
+  PIXEL_SPATIAL: 'PIXEL_SPATIAL',
+  TEMPORAL: 'TEMPORAL',
+  PLOT_SPATIAL: 'PLOT_SPATIAL'
+});
+
+function processArguments() {
+  const args = process.argv.slice(2);
+  let annotationType;
+  let databaseName = 'openmct'; // default db name to "openmct"
+  let serverUrl = new URL('http://127.0.0.1:5984'); // default db name to "openmct"
+  let helpRequested = false;
+
+  args.forEach((val, index) => {
+    switch (val) {
+      case '--help':
+        console.log(
+          'Usage: deleteAnnotations.js [--annotationType type] [--dbName name] <CouchDB URL> \nFor authentication, set the environment variables COUCHDB_USERNAME and COUCHDB_PASSWORD. \n'
+        );
+        console.log('Annotation types: ', Object.keys(ANNOTATION_TYPES).join(', '));
+        helpRequested = true;
+        break;
+      case '--annotationType':
+        annotationType = args[index + 1];
+        if (!Object.values(ANNOTATION_TYPES).includes(annotationType)) {
+          throw new Error(`Invalid annotation type: ${annotationType}`);
+        }
+        break;
+      case '--dbName':
+        databaseName = args[index + 1];
+        break;
+      case '--serverUrl':
+        serverUrl = new URL(args[index + 1]);
+        break;
+    }
+  });
+
+  let username = process.env.COUCHDB_USERNAME || '';
+  let password = process.env.COUCHDB_PASSWORD || '';
+
+  return {
+    annotationType,
+    serverUrl,
+    databaseName,
+    helpRequested,
+    username,
+    password
+  };
+}
+
+async function gatherDocumentsForDeletion({
+  serverUrl,
+  databaseName,
+  annotationType,
+  username,
+  password
+}) {
+  const baseUrl = `${serverUrl.href}${databaseName}/_find`;
+  let bookmark = null;
+  let docsToDelete = [];
+  let hasMoreDocs = true;
+
+  const body = {
+    selector: {
+      _id: { $gt: null },
+      'model.type': 'annotation'
+    },
+    fields: ['_id', '_rev'],
+    limit: 1000
+  };
+
+  if (annotationType !== undefined) {
+    body.selector['model.annotationType'] = annotationType;
+  }
+
+  const findOptions = {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(body)
+  };
+
+  if (username && password) {
+    findOptions.headers.Authorization = `Basic ${btoa(`${username}:${password}`)}`;
+  }
+
+  while (hasMoreDocs) {
+    if (bookmark) {
+      body.bookmark = bookmark;
+    }
+
+    const res = await fetch(baseUrl, findOptions);
+
+    if (!res.ok) {
+      throw new Error(`Server responded with status: ${res.status}`);
+    }
+
+    const findResult = await res.json();
+
+    bookmark = findResult.bookmark;
+    docsToDelete = [...docsToDelete, ...findResult.docs];
+
+    // check if we got less than limit, set hasMoreDocs to false
+    hasMoreDocs = findResult.docs.length === body.limit;
+  }
+
+  return docsToDelete;
+}
+
+async function performBulkDelete({ docsToDelete, serverUrl, databaseName, username, password }) {
+  docsToDelete.forEach((doc) => (doc._deleted = true));
+
+  const deleteOptions = {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({ docs: docsToDelete })
+  };
+
+  if (username && password) {
+    deleteOptions.headers.Authorization = `Basic ${btoa(`${username}:${password}`)}`;
+  }
+
+  const response = await fetch(`${serverUrl.href}${databaseName}/_bulk_docs`, deleteOptions);
+  if (!response.ok) {
+    throw new Error('Failed with status code: ' + response.status);
+  }
+
+  return docsToDelete.length;
+}
+
+main();
diff --git a/src/plugins/persistence/couch/setup-couchdb.sh b/src/plugins/persistence/couch/setup-couchdb.sh
new file mode 100755
index 00000000000..18d81768830
--- /dev/null
+++ b/src/plugins/persistence/couch/setup-couchdb.sh
@@ -0,0 +1,216 @@
+#!/bin/bash -e
+
+# Check if required environment variables have values, exit if not.
+check_env_var() {
+    if [ -z "$1" ]; then
+        echo "$2 has no value" 1>&2
+        exit 1
+    fi
+}
+
+check_env_var "${OPENMCT_DATABASE_NAME}" "OPENMCT_DATABASE_NAME"
+check_env_var "${COUCH_ADMIN_USER}" "COUCH_ADMIN_USER"
+check_env_var "${COUCH_BASE_LOCAL}" "COUCH_BASE_LOCAL"
+
+# Construct curl's -u option value based on COUCH_ADMIN_USER and COUCH_ADMIN_PASSWORD environment variables.
+CURL_USERPASS_ARG="${COUCH_ADMIN_USER}"
+if [ "${COUCH_ADMIN_PASSWORD}" ]; then
+    CURL_USERPASS_ARG+=":${COUCH_ADMIN_PASSWORD}"
+fi
+
+resource_exists() {
+    response=$(curl -u "${CURL_USERPASS_ARG}" -s -o /dev/null -I -w "%{http_code}" $1);
+    if [ "200" == "${response}" ]; then
+        echo "TRUE"
+    else
+        echo "FALSE";
+    fi
+}
+
+db_exists() {
+    resource_exists "$COUCH_BASE_LOCAL"/"$OPENMCT_DATABASE_NAME"
+}
+
+create_db() {
+    response=$(curl -su "${CURL_USERPASS_ARG}" -XPUT "$COUCH_BASE_LOCAL"/"$OPENMCT_DATABASE_NAME");
+    echo "$response"
+}
+
+admin_user_exists() {
+    response=$(curl -su "${CURL_USERPASS_ARG}" -o /dev/null -I -w "%{http_code}" "$COUCH_BASE_LOCAL"/_node/"$COUCH_NODE_NAME"/_config/admins/"$COUCH_ADMIN_USER");
+    if [ "200" == "${response}" ]; then
+        echo "TRUE"
+    else
+        echo "FALSE";
+    fi
+}
+
+create_admin_user() {
+    echo Creating admin user
+    curl -X PUT "$COUCH_BASE_LOCAL"/_node/"$COUCH_NODE_NAME"/_config/admins/"$COUCH_ADMIN_USER" -d \'"$COUCH_ADMIN_PASSWORD"\'
+}
+
+is_cors_enabled() {
+    resource_exists "$COUCH_BASE_LOCAL"/_node/"$COUCH_NODE_NAME"/_config/httpd/enable_cors
+}
+
+enable_cors() {
+    curl -su "${CURL_USERPASS_ARG}" -o /dev/null -X PUT "$COUCH_BASE_LOCAL"/_node/"$COUCH_NODE_NAME"/_config/httpd/enable_cors -d '"true"'
+    curl -su "${CURL_USERPASS_ARG}" -o /dev/null -X PUT "$COUCH_BASE_LOCAL"/_node/"$COUCH_NODE_NAME"/_config/cors/origins -d '"*"'
+    curl -su "${CURL_USERPASS_ARG}" -o /dev/null -X PUT "$COUCH_BASE_LOCAL"/_node/"$COUCH_NODE_NAME"/_config/cors/credentials -d '"true"'
+    curl -su "${CURL_USERPASS_ARG}" -o /dev/null -X PUT "$COUCH_BASE_LOCAL"/_node/"$COUCH_NODE_NAME"/_config/cors/methods -d '"GET, PUT, POST, HEAD, DELETE"'
+    curl -su "${CURL_USERPASS_ARG}" -o /dev/null -X PUT "$COUCH_BASE_LOCAL"/_node/"$COUCH_NODE_NAME"/_config/cors/headers -d '"accept, authorization, content-type, origin, referer, x-csrf-token"'
+}
+
+update_db_permissions() {
+    local db_name=$1
+    echo "Updating ${db_name} database permissions"
+    response=$(curl -su "${CURL_USERPASS_ARG}" --location \
+        --request PUT "$COUCH_BASE_LOCAL"/"$db_name"/_security \
+        --header 'Content-Type: application/json' \
+        --data-raw '{ "admins": {"roles": []},"members": {"roles": []}}')
+    if [ "{\"ok\":true}" == "${response}" ]; then
+        echo "Database permissions successfully updated"
+    else
+        echo "Database permissions not updated"
+    fi
+}
+
+create_users_table() {
+    echo "Creating _users database"
+    response=$(curl -su "${CURL_USERPASS_ARG}" -XPUT "$COUCH_BASE_LOCAL"/_users)
+    if [ "{\"ok\":true}" == "${response}" ]; then
+        echo "Successfully created _users database"
+    else
+        echo "Unable to create _users database"
+    fi
+}
+
+create_replicator_table() {
+    echo "Creating _replicator database"
+    response=$(curl -su "${CURL_USERPASS_ARG}" -XPUT "$COUCH_BASE_LOCAL"/_replicator)
+    if [ "{\"ok\":true}" == "${response}" ]; then
+        echo "Successfully created _replicator database"
+    else
+        echo "Unable to create _replicator database"
+    fi
+}
+
+add_index_and_views() {
+    echo "Adding index and views to $OPENMCT_DATABASE_NAME database"
+
+    # Add type_tags_index
+    response=$(curl --silent --user "${CURL_USERPASS_ARG}" --request POST "$COUCH_BASE_LOCAL"/"$OPENMCT_DATABASE_NAME"/_index/\
+    --header 'Content-Type: application/json' \
+    --data '{
+        "index": {
+            "fields": ["model.type", "model.tags"]
+        },
+        "name": "type_tags_index",
+        "type": "json"
+    }')
+
+    if [[ $response =~ "\"result\":\"created\"" ]]; then
+        echo "Successfully created type_tags_index"
+    elif [[ $response =~ "\"result\":\"exists\"" ]]; then
+        echo "type_tags_index already exists, skipping creation"
+    else
+        echo "Unable to create type_tags_index"
+        echo $response
+    fi
+
+    # Add annotation_tags_index
+    response=$(curl  --silent --user "${CURL_USERPASS_ARG}" --request PUT "$COUCH_BASE_LOCAL"/"$OPENMCT_DATABASE_NAME"/_design/annotation_tags_index \
+    --header 'Content-Type: application/json' \
+    --data '{
+        "_id": "_design/annotation_tags_index",
+        "views": {
+            "by_tags": {
+                "map": "function (doc) { if (doc.model && doc.model.type === '\''annotation'\'' && doc.model.tags) { doc.model.tags.forEach(function (tag) { emit(tag, doc._id); }); } }"
+            }
+        }
+    }')
+
+    if [[ $response =~ "\"ok\":true" ]]; then
+        echo "Successfully created annotation_tags_index"
+    elif [[ $response =~ "\"error\":\"conflict\"" ]]; then
+        echo "annotation_tags_index already exists, skipping creation"
+    else
+        echo "Unable to create annotation_tags_index"
+        echo $response
+    fi
+
+    # Add annotation_keystring_index
+    response=$(curl --silent --user "${CURL_USERPASS_ARG}" --request PUT "$COUCH_BASE_LOCAL"/"$OPENMCT_DATABASE_NAME"/_design/annotation_keystring_index \
+    --header 'Content-Type: application/json' \
+    --data '{
+        "_id": "_design/annotation_keystring_index",
+        "views": {
+            "by_keystring": {
+                "map": "function (doc) { if (doc.model && doc.model.type === '\''annotation'\'' && doc.model.targets) { doc.model.targets.forEach(function(target) { if(target.keyString) { emit(target.keyString, doc._id); } }); } }"
+            }
+        }
+    }')
+
+    if [[ $response =~ "\"ok\":true" ]]; then
+        echo "Successfully created annotation_keystring_index"
+    elif [[ $response =~ "\"error\":\"conflict\"" ]]; then
+        echo "annotation_keystring_index already exists, skipping creation"
+    else
+        echo "Unable to create annotation_keystring_index"
+        echo $response
+    fi
+}
+
+# Main script execution
+
+# Check if the admin user exists; if not, create it.
+if [ "$(admin_user_exists)" == "FALSE" ]; then
+    echo "Admin user does not exist, creating..."
+    create_admin_user
+else
+    echo "Admin user exists"
+fi
+
+# Check if the _users table exists; if not, create it.
+users_table_exists=$(resource_exists "$COUCH_BASE_LOCAL"/_users)
+if [ "FALSE" == "${users_table_exists}" ]; then
+    create_users_table
+else
+    echo "_users database already exists, skipping creation"
+fi
+
+# Check if the _replicator database exists; if not, create it.
+replicator_table_exists=$(resource_exists "$COUCH_BASE_LOCAL/_replicator")
+if [ "FALSE" == "${replicator_table_exists}" ]; then
+    create_replicator_table
+else
+    echo "_replicator database already exists, skipping creation"
+fi
+
+# Check if the database exists; if not, create it.
+if [ "FALSE" == "$(db_exists)" ]; then
+    response=$(create_db)
+    if [ "{\"ok\":true}" == "${response}" ]; then
+        echo "Database successfully created"
+    else
+        echo "Database creation failed"
+    fi
+else
+    echo "Database already exists, nothing to do"
+fi
+
+# Update _replicator and OPENMCT_DATABASE_NAME database permissions
+update_db_permissions "_replicator"
+update_db_permissions "${OPENMCT_DATABASE_NAME}"
+
+# Check if CORS is enabled; if not, enable it.
+if [ "FALSE" == "$(is_cors_enabled)" ]; then
+    echo "Enabling CORS"
+    enable_cors
+else
+    echo "CORS enabled, nothing to do"
+fi
+
+# Add index and views to the database
+add_index_and_views
diff --git a/src/plugins/plan/GanttChartCompositionPolicy.js b/src/plugins/plan/GanttChartCompositionPolicy.js
new file mode 100644
index 00000000000..cb551005ff1
--- /dev/null
+++ b/src/plugins/plan/GanttChartCompositionPolicy.js
@@ -0,0 +1,32 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+const ALLOWED_TYPES = ['plan'];
+
+export default function ganttChartCompositionPolicy(openmct) {
+  return function (parent, child) {
+    if (parent.type === 'gantt-chart') {
+      return ALLOWED_TYPES.includes(child.type);
+    }
+
+    return true;
+  };
+}
diff --git a/src/plugins/plan/Plan.vue b/src/plugins/plan/Plan.vue
deleted file mode 100644
index 78342d12a8d..00000000000
--- a/src/plugins/plan/Plan.vue
+++ /dev/null
@@ -1,539 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2020, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-
-<template>
-<div ref="plan"
-     class="c-plan c-timeline-holder"
->
-    <template v-if="viewBounds && !options.compact">
-        <swim-lane>
-            <template slot="label">{{ timeSystem.name }}</template>
-            <timeline-axis
-                slot="object"
-                :bounds="viewBounds"
-                :time-system="timeSystem"
-                :content-height="height"
-                :rendering-engine="renderingEngine"
-            />
-        </swim-lane>
-    </template>
-    <div ref="planHolder"
-         class="c-plan__contents u-contents"
-    >
-    </div>
-</div>
-</template>
-
-<script>
-import * as d3Scale from 'd3-scale';
-import TimelineAxis from "../../ui/components/TimeSystemAxis.vue";
-import SwimLane from "@/ui/components/swim-lane/SwimLane.vue";
-import { getValidatedPlan } from "./util";
-import Vue from "vue";
-
-const PADDING = 1;
-const OUTER_TEXT_PADDING = 12;
-const INNER_TEXT_PADDING = 17;
-const TEXT_LEFT_PADDING = 5;
-const ROW_PADDING = 12;
-const RESIZE_POLL_INTERVAL = 200;
-const ROW_HEIGHT = 25;
-const LINE_HEIGHT = 12;
-const MAX_TEXT_WIDTH = 300;
-const EDGE_ROUNDING = 5;
-const DEFAULT_COLOR = '#cc9922';
-
-export default {
-    components: {
-        TimelineAxis,
-        SwimLane
-    },
-    inject: ['openmct', 'domainObject'],
-    props: {
-        options: {
-            type: Object,
-            default() {
-                return {
-                    compact: false
-                };
-            }
-        },
-        renderingEngine: {
-            type: String,
-            default() {
-                return 'svg';
-            }
-        }
-    },
-    data() {
-        return {
-            viewBounds: undefined,
-            timeSystem: undefined,
-            height: 0
-        };
-    },
-    mounted() {
-        this.getPlanData(this.domainObject);
-
-        this.canvas = this.$refs.plan.appendChild(document.createElement('canvas'));
-        this.canvas.height = 0;
-        this.canvasContext = this.canvas.getContext('2d');
-
-        this.setDimensions();
-        this.updateViewBounds();
-        this.openmct.time.on("timeSystem", this.setScaleAndPlotActivities);
-        this.openmct.time.on("bounds", this.updateViewBounds);
-        this.resizeTimer = setInterval(this.resize, RESIZE_POLL_INTERVAL);
-        this.unlisten = this.openmct.objects.observe(this.domainObject, '*', this.observeForChanges);
-    },
-    beforeDestroy() {
-        clearInterval(this.resizeTimer);
-        this.openmct.time.off("timeSystem", this.setScaleAndPlotActivities);
-        this.openmct.time.off("bounds", this.updateViewBounds);
-        if (this.unlisten) {
-            this.unlisten();
-        }
-    },
-    methods: {
-        observeForChanges(mutatedObject) {
-            this.getPlanData(mutatedObject);
-            this.setScaleAndPlotActivities();
-        },
-        resize() {
-            let clientWidth = this.getClientWidth();
-            if (clientWidth !== this.width) {
-                this.setDimensions();
-                this.updateViewBounds();
-            }
-        },
-        getClientWidth() {
-            let clientWidth = this.$refs.plan.clientWidth;
-
-            if (!clientWidth) {
-                //this is a hack - need a better way to find the parent of this component
-                let parent = this.openmct.layout.$refs.browseObject.$el;
-                if (parent) {
-                    clientWidth = parent.getBoundingClientRect().width;
-                }
-            }
-
-            return clientWidth - 200;
-        },
-        getPlanData(domainObject) {
-            this.planData = getValidatedPlan(domainObject);
-        },
-        updateViewBounds() {
-            this.viewBounds = this.openmct.time.bounds();
-            //Add a 50% padding to the end bounds to look ahead
-            let timespan = (this.viewBounds.end - this.viewBounds.start);
-            let padding = timespan / 2;
-            this.viewBounds.end = this.viewBounds.end + padding;
-
-            if (this.timeSystem === undefined) {
-                this.timeSystem = this.openmct.time.timeSystem();
-            }
-
-            this.setScaleAndPlotActivities();
-        },
-        setScaleAndPlotActivities(timeSystem) {
-            if (timeSystem !== undefined) {
-                this.timeSystem = timeSystem;
-            }
-
-            this.setScale(this.timeSystem);
-            this.clearPreviousActivities();
-            if (this.xScale) {
-                this.calculatePlanLayout();
-                this.drawPlan();
-            }
-        },
-        clearPreviousActivities() {
-            let activities = this.$el.querySelectorAll(".c-plan__contents > div");
-            activities.forEach(activity => activity.remove());
-        },
-        setDimensions() {
-            const planHolder = this.$refs.plan;
-            this.width = this.getClientWidth();
-
-            this.height = Math.round(planHolder.getBoundingClientRect().height);
-        },
-        setScale(timeSystem) {
-            if (!this.width) {
-                return;
-            }
-
-            if (timeSystem === undefined) {
-                timeSystem = this.openmct.time.timeSystem();
-            }
-
-            if (timeSystem.isUTCBased) {
-                this.xScale = d3Scale.scaleUtc();
-                this.xScale.domain(
-                    [new Date(this.viewBounds.start), new Date(this.viewBounds.end)]
-                );
-            } else {
-                this.xScale = d3Scale.scaleLinear();
-                this.xScale.domain(
-                    [this.viewBounds.start, this.viewBounds.end]
-                );
-            }
-
-            this.xScale.range([PADDING, this.width - PADDING * 2]);
-        },
-        isActivityInBounds(activity) {
-            return (activity.start < this.viewBounds.end) && (activity.end > this.viewBounds.start);
-        },
-        getTextWidth(name) {
-            let metrics = this.canvasContext.measureText(name);
-
-            return parseInt(metrics.width, 10);
-        },
-        sortFn(a, b) {
-            const numA = parseInt(a, 10);
-            const numB = parseInt(b, 10);
-            if (numA > numB) {
-                return 1;
-            }
-
-            if (numA < numB) {
-                return -1;
-            }
-
-            return 0;
-        },
-        // Get the row where the next activity will land.
-        getRowForActivity(rectX, width, activitiesByRow) {
-            let currentRow;
-            let sortedActivityRows = Object.keys(activitiesByRow).sort(this.sortFn);
-
-            function getOverlap(rects) {
-                return rects.every(rect => {
-                    const { start, end } = rect;
-                    const calculatedEnd = rectX + width;
-                    const hasOverlap = (rectX >= start && rectX <= end) || (calculatedEnd >= start && calculatedEnd <= end) || (rectX <= start && calculatedEnd >= end);
-
-                    return !hasOverlap;
-                });
-            }
-
-            for (let i = 0; i < sortedActivityRows.length; i++) {
-                let row = sortedActivityRows[i];
-                if (getOverlap(activitiesByRow[row])) {
-                    currentRow = row;
-                    break;
-                }
-            }
-
-            if (currentRow === undefined && sortedActivityRows.length) {
-                let row = parseInt(sortedActivityRows[sortedActivityRows.length - 1], 10);
-                currentRow = row + ROW_HEIGHT + ROW_PADDING;
-            }
-
-            return (currentRow || 0);
-        },
-        calculatePlanLayout() {
-            let groups = Object.keys(this.planData);
-            this.groupActivities = {};
-
-            groups.forEach((key, index) => {
-                let activitiesByRow = {};
-                let currentRow = 0;
-
-                let activities = this.planData[key];
-                activities.forEach((activity) => {
-                    if (this.isActivityInBounds(activity)) {
-                        const currentStart = Math.max(this.viewBounds.start, activity.start);
-                        const currentEnd = Math.min(this.viewBounds.end, activity.end);
-                        const rectX = this.xScale(currentStart);
-                        const rectY = this.xScale(currentEnd);
-                        const rectWidth = rectY - rectX;
-
-                        const activityNameWidth = this.getTextWidth(activity.name) + TEXT_LEFT_PADDING;
-                        //TODO: Fix bug for SVG where the rectWidth is not proportional to the canvas measuredWidth of the text
-                        const activityNameFitsRect = (rectWidth >= activityNameWidth);
-                        const textStart = (activityNameFitsRect ? rectX : rectY) + TEXT_LEFT_PADDING;
-                        const color = activity.color || DEFAULT_COLOR;
-                        let textColor = '';
-                        if (activity.textColor) {
-                            textColor = activity.textColor;
-                        } else if (activityNameFitsRect) {
-                            textColor = this.getContrastingColor(color);
-                        }
-
-                        let textLines = this.getActivityDisplayText(this.canvasContext, activity.name, activityNameFitsRect);
-                        const textWidth = textStart + this.getTextWidth(textLines[0]) + TEXT_LEFT_PADDING;
-
-                        if (activityNameFitsRect) {
-                            currentRow = this.getRowForActivity(rectX, rectWidth, activitiesByRow);
-                        } else {
-                            currentRow = this.getRowForActivity(rectX, textWidth, activitiesByRow);
-                        }
-
-                        let textY = parseInt(currentRow, 10) + (activityNameFitsRect ? INNER_TEXT_PADDING : OUTER_TEXT_PADDING);
-
-                        if (!activitiesByRow[currentRow]) {
-                            activitiesByRow[currentRow] = [];
-                        }
-
-                        activitiesByRow[currentRow].push({
-                            activity: {
-                                color: color,
-                                textColor: textColor,
-                                name: activity.name,
-                                exceeds: {
-                                    start: this.xScale(this.viewBounds.start) > this.xScale(activity.start),
-                                    end: this.xScale(this.viewBounds.end) < this.xScale(activity.end)
-                                },
-                                start: activity.start,
-                                end: activity.end
-                            },
-                            textLines: textLines,
-                            textStart: textStart,
-                            textClass: activityNameFitsRect ? "" : "activity-label--outside-rect",
-                            textY: textY,
-                            start: rectX,
-                            end: activityNameFitsRect ? rectY : textStart + textWidth,
-                            rectWidth: rectWidth
-                        });
-                    }
-                });
-                this.groupActivities[key] = {
-                    heading: key,
-                    activitiesByRow
-                };
-            });
-        },
-        getActivityDisplayText(context, text, activityNameFitsRect) {
-        //TODO: If the activity start is less than viewBounds.start then the text should be cropped on the left/should be off-screen)
-            let words = text.split(' ');
-            let line = '';
-            let activityText = [];
-            let rows = 1;
-
-            for (let n = 0; (n < words.length) && (rows <= 2); n++) {
-                let testLine = line + words[n] + ' ';
-                let metrics = context.measureText(testLine);
-                let testWidth = metrics.width;
-                if (!activityNameFitsRect && (testWidth > MAX_TEXT_WIDTH && n > 0)) {
-                    activityText.push(line);
-                    line = words[n] + ' ';
-                    testLine = line + words[n] + ' ';
-                    rows = rows + 1;
-                }
-
-                line = testLine;
-            }
-
-            return activityText.length ? activityText : [line];
-        },
-        getGroupContainer(activityRows, heading) {
-            let svgHeight = 30;
-            let svgWidth = 200;
-
-            const rows = Object.keys(activityRows);
-            const isNested = this.options.isChildObject;
-
-            if (rows.length) {
-                const lastActivityRow = rows[rows.length - 1];
-                svgHeight = parseInt(lastActivityRow, 10) + ROW_HEIGHT;
-                svgWidth = this.width;
-            }
-
-            let component = new Vue({
-                components: {
-                    SwimLane
-                },
-                provide: {
-                    openmct: this.openmct
-                },
-                data() {
-                    return {
-                        heading,
-                        isNested,
-                        height: svgHeight,
-                        width: svgWidth
-                    };
-                },
-                template: `<swim-lane :is-nested="isNested"><template slot="label">{{heading}}</template><template slot="object"><svg :height="height" :width="width"></svg></template></swim-lane>`
-            });
-
-            this.$refs.planHolder.appendChild(component.$mount().$el);
-
-            let groupLabel = component.$el.querySelector('div:nth-child(1)');
-            let groupSVG = component.$el.querySelector('svg');
-
-            return {
-                groupLabel,
-                groupSVG
-            };
-        },
-        drawPlan() {
-
-            Object.keys(this.groupActivities).forEach((group, index) => {
-                const activitiesByRow = this.groupActivities[group].activitiesByRow;
-                const heading = this.groupActivities[group].heading;
-                const groupElements = this.getGroupContainer(activitiesByRow, heading);
-                let groupSVG = groupElements.groupSVG;
-
-                let activityRows = Object.keys(activitiesByRow);
-                if (activityRows.length <= 0) {
-                    this.plotNoItems(groupSVG);
-                }
-
-                activityRows.forEach((row) => {
-                    const items = activitiesByRow[row];
-                    items.forEach(item => {
-                        this.plotActivity(item, parseInt(row, 10), groupSVG);
-                    });
-                });
-
-            });
-        },
-        plotNoItems(svgElement) {
-            let textElement = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-            this.setNSAttributesForElement(textElement, {
-                x: "10",
-                y: "20",
-                class: "activity-label--outside-rect"
-            });
-            textElement.innerHTML = 'No activities within timeframe';
-
-            svgElement.appendChild(textElement);
-        },
-        setNSAttributesForElement(element, attributes) {
-            Object.keys(attributes).forEach((key) => {
-                element.setAttributeNS(null, key, attributes[key]);
-            });
-        },
-        getNSAttributesForElement(element, attribute) {
-            return element.getAttributeNS(null, attribute);
-        },
-        // Experimental for now - unused
-        addForeignElement(svgElement, label, x, y) {
-            let foreign = document.createElementNS('http://www.w3.org/2000/svg', "foreignObject");
-            this.setNSAttributesForElement(foreign, {
-                width: String(MAX_TEXT_WIDTH),
-                height: String(LINE_HEIGHT * 2),
-                x: x,
-                y: y
-            });
-
-            let textEl = document.createElement('div');
-            let textNode = document.createTextNode(label);
-            textEl.appendChild(textNode);
-
-            foreign.appendChild(textEl);
-
-            svgElement.appendChild(foreign);
-        },
-        plotActivity(item, row, svgElement) {
-            const activity = item.activity;
-            let width = item.rectWidth;
-            let rectElement = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-
-            if (item.activity.exceeds.start) {
-                width = width + EDGE_ROUNDING;
-            }
-
-            if (item.activity.exceeds.end) {
-                width = width + EDGE_ROUNDING;
-            }
-
-            width = Math.max(width, 1); // Set width to a minimum of 1
-
-            // rx: don't round corners if the width of the rect is smaller than the rounding radius
-            this.setNSAttributesForElement(rectElement, {
-                class: 'activity-bounds',
-                x: item.activity.exceeds.start ? item.start - EDGE_ROUNDING : item.start,
-                y: row,
-                rx: (width < EDGE_ROUNDING * 2) ? 0 : EDGE_ROUNDING,
-                width: width,
-                height: String(ROW_HEIGHT),
-                fill: activity.color
-            });
-
-            rectElement.addEventListener('click', (event) => {
-                this.setSelectionForActivity(event.currentTarget, activity, event.metaKey);
-            });
-
-            svgElement.appendChild(rectElement);
-
-            item.textLines.forEach((line, index) => {
-                let textElement = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-                this.setNSAttributesForElement(textElement, {
-                    class: `activity-label ${item.textClass}`,
-                    x: item.textStart,
-                    y: item.textY + (index * LINE_HEIGHT),
-                    fill: activity.textColor
-                });
-
-                const textNode = document.createTextNode(line);
-                textElement.appendChild(textNode);
-                textElement.addEventListener('click', (event) => {
-                    this.setSelectionForActivity(event.currentTarget, activity, event.metaKey);
-                });
-                svgElement.appendChild(textElement);
-            });
-            // this.addForeignElement(svgElement, activity.name, item.textStart, item.textY - LINE_HEIGHT);
-        },
-        cutHex(h, start, end) {
-            const hStr = (h.charAt(0) === '#') ? h.substring(1, 7) : h;
-
-            return parseInt(hStr.substring(start, end), 16);
-        },
-        getContrastingColor(hexColor) {
-            // https://codepen.io/davidhalford/pen/ywEva/
-            // TODO: move this into a general utility function?
-            const cThreshold = 130;
-
-            if (hexColor.indexOf('#') === -1) {
-                // We weren't given a hex color
-                return "#ff0000";
-            }
-
-            const hR = this.cutHex(hexColor, 0, 2);
-            const hG = this.cutHex(hexColor, 2, 4);
-            const hB = this.cutHex(hexColor, 4, 6);
-
-            const cBrightness = ((hR * 299) + (hG * 587) + (hB * 114)) / 1000;
-
-            return cBrightness > cThreshold ? "#000000" : "#ffffff";
-        },
-        setSelectionForActivity(element, activity, multiSelect) {
-            this.openmct.selection.select([{
-                element: element,
-                context: {
-                    type: 'activity',
-                    activity: activity
-                }
-            }, {
-                element: this.openmct.layout.$refs.browseObject.$el,
-                context: {
-                    item: this.domainObject,
-                    supportsMultiSelect: true
-                }
-            }], multiSelect);
-            event.stopPropagation();
-        }
-    }
-};
-</script>
diff --git a/src/plugins/plan/PlanViewConfiguration.js b/src/plugins/plan/PlanViewConfiguration.js
new file mode 100644
index 00000000000..5c51efebb82
--- /dev/null
+++ b/src/plugins/plan/PlanViewConfiguration.js
@@ -0,0 +1,114 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import EventEmitter from 'EventEmitter';
+
+export const DEFAULT_CONFIGURATION = {
+  clipActivityNames: false,
+  swimlaneVisibility: {}
+};
+
+export default class PlanViewConfiguration extends EventEmitter {
+  constructor(domainObject, openmct) {
+    super();
+
+    this.domainObject = domainObject;
+    this.openmct = openmct;
+
+    this.configurationChanged = this.configurationChanged.bind(this);
+    this.unlistenFromMutation = openmct.objects.observe(
+      domainObject,
+      'configuration',
+      this.configurationChanged
+    );
+  }
+
+  /**
+   * @returns {Object.<string, any>}
+   */
+  getConfiguration() {
+    const configuration = this.domainObject.configuration ?? {};
+    for (const configKey of Object.keys(DEFAULT_CONFIGURATION)) {
+      configuration[configKey] = configuration[configKey] ?? DEFAULT_CONFIGURATION[configKey];
+    }
+
+    return configuration;
+  }
+
+  #updateConfiguration(configuration) {
+    this.openmct.objects.mutate(this.domainObject, 'configuration', configuration);
+  }
+
+  /**
+   * @param {string} swimlaneName
+   * @param {boolean} isVisible
+   */
+  setSwimlaneVisibility(swimlaneName, isVisible) {
+    const configuration = this.getConfiguration();
+    const { swimlaneVisibility } = configuration;
+    swimlaneVisibility[swimlaneName] = isVisible;
+    this.#updateConfiguration(configuration);
+  }
+
+  resetSwimlaneVisibility() {
+    const configuration = this.getConfiguration();
+    const swimlaneVisibility = {};
+    configuration.swimlaneVisibility = swimlaneVisibility;
+    this.#updateConfiguration(configuration);
+  }
+
+  initializeSwimlaneVisibility(swimlaneNames) {
+    const configuration = this.getConfiguration();
+    const { swimlaneVisibility } = configuration;
+    let shouldMutate = false;
+    for (const swimlaneName of swimlaneNames) {
+      if (swimlaneVisibility[swimlaneName] === undefined) {
+        swimlaneVisibility[swimlaneName] = true;
+        shouldMutate = true;
+      }
+    }
+
+    if (shouldMutate) {
+      configuration.swimlaneVisibility = swimlaneVisibility;
+      this.#updateConfiguration(configuration);
+    }
+  }
+
+  /**
+   * @param {boolean} isEnabled
+   */
+  setClipActivityNames(isEnabled) {
+    const configuration = this.getConfiguration();
+    configuration.clipActivityNames = isEnabled;
+    this.#updateConfiguration(configuration);
+  }
+
+  configurationChanged(configuration) {
+    if (configuration !== undefined) {
+      this.emit('change', configuration);
+    }
+  }
+
+  destroy() {
+    this.unlistenFromMutation();
+  }
+}
diff --git a/src/plugins/plan/PlanViewProvider.js b/src/plugins/plan/PlanViewProvider.js
index ebd1c1e24a9..8868f5d319e 100644
--- a/src/plugins/plan/PlanViewProvider.js
+++ b/src/plugins/plan/PlanViewProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,58 +20,70 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import Plan from './Plan.vue';
-import Vue from 'vue';
+import mount from 'utils/mount';
+
+import Plan from './components/PlanView.vue';
 
 export default function PlanViewProvider(openmct) {
-    function isCompactView(objectPath) {
-        return objectPath.find(object => object.type === 'time-strip') !== undefined;
-    }
+  function isCompactView(objectPath) {
+    let isChildOfTimeStrip = objectPath.find((object) => object.type === 'time-strip');
 
-    return {
-        key: 'plan.view',
-        name: 'Plan',
-        cssClass: 'icon-calendar',
-        canView(domainObject) {
-            return domainObject.type === 'plan';
-        },
+    return isChildOfTimeStrip && !openmct.router.isNavigatedObject(objectPath);
+  }
 
-        canEdit(domainObject) {
-            return domainObject.type === 'plan';
-        },
+  return {
+    key: 'plan.view',
+    name: 'Plan',
+    cssClass: 'icon-plan',
+    canView(domainObject) {
+      return domainObject.type === 'plan' || domainObject.type === 'gantt-chart';
+    },
 
-        view: function (domainObject, objectPath) {
-            let component;
+    canEdit(domainObject) {
+      return domainObject.type === 'gantt-chart';
+    },
 
-            return {
-                show: function (element) {
-                    let isCompact = isCompactView(objectPath);
+    view: function (domainObject, objectPath) {
+      let _destroy = null;
 
-                    component = new Vue({
-                        el: element,
-                        components: {
-                            Plan
-                        },
-                        provide: {
-                            openmct,
-                            domainObject
-                        },
-                        data() {
-                            return {
-                                options: {
-                                    compact: isCompact,
-                                    isChildObject: isCompact
-                                }
-                            };
-                        },
-                        template: '<plan :options="options"></plan>'
-                    });
-                },
-                destroy: function () {
-                    component.$destroy();
-                    component = undefined;
-                }
-            };
+      return {
+        show: function (element) {
+          let isCompact = isCompactView(objectPath);
+
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                Plan
+              },
+              provide: {
+                openmct,
+                domainObject,
+                path: objectPath
+              },
+              data() {
+                return {
+                  options: {
+                    compact: isCompact,
+                    isChildObject: isCompact
+                  }
+                };
+              },
+              template: '<plan :options="options"></plan>'
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+        },
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
         }
-    };
+      };
+    }
+  };
 }
diff --git a/src/plugins/plan/README.md b/src/plugins/plan/README.md
new file mode 100644
index 00000000000..6f3962d9396
--- /dev/null
+++ b/src/plugins/plan/README.md
@@ -0,0 +1,117 @@
+# Plan view and domain objects
+Plans provide a view for a list of activities grouped by categories.
+
+## Plan category and activity JSON format
+The JSON format for a plan consists of categories/groups and a list of activities for each category.
+Activity properties include:
+* name: Name of the activity
+* start: Timestamps in milliseconds
+* end: Timestamps in milliseconds
+* type: Matches the name of the category it is in
+* color: Background color for the activity
+* textColor: Color of the name text for the activity
+* The format of the json file is as follows:
+
+```json
+{
+    "TEST_GROUP": [{
+    "name": "Event 1 with a really long name",
+    "start": 1665323197000,
+    "end": 1665344921000,
+    "type": "TEST_GROUP",
+    "color": "orange",
+    "textColor": "white"
+    }],
+    "GROUP_2": [{
+    "name": "Event 2",
+    "start": 1665409597000,
+    "end": 1665456252000,
+    "type": "GROUP_2",
+    "color": "red",
+    "textColor": "white"
+    }]
+}
+```
+
+## Plans using JSON file uploads
+Plan domain objects can be created by uploading a JSON file with the format above to render categories and activities.
+
+## Using Domain Objects directly
+If uploading a JSON is not desired, it is possible to visualize domain objects of type 'plan'.
+The standard model is as follows: 
+```javascript
+{
+    identifier: {
+        namespace: ""
+        key: "test-plan"
+    }
+    name:"A plan object",
+    type:"plan",
+    location:"ROOT",
+    selectFile: {
+        body: {
+            SOME_CATEGORY: [{
+                    name: "An activity",
+                    start: 1665323197000,
+                    end: 1665323197100,
+                    type: "SOME_CATEGORY"
+                }
+            ],
+            ANOTHER_CATEGORY: [{
+                    name: "An activity",
+                    start: 1665323197000,
+                    end: 1665323197100,
+                    type: "ANOTHER_CATEGORY"
+                }
+            ]
+        }
+    }
+}
+```
+
+If your data has non-standard keys for `start, end, type and activities` properties, use the `sourceMap` property mapping.
+```javascript
+{
+    identifier: {
+        namespace: ""
+        key: "another-test-plan"
+    }
+    name:"Another plan object",
+    type:"plan",
+    location:"ROOT",
+    sourceMap: {
+        start: 'start_time',
+        end: 'end_time',
+        activities: 'items',
+        groupId: 'category'
+    },
+    selectFile: {
+        body: {
+            items: [
+                {
+                    name: "An activity",
+                    start_time: 1665323197000,
+                    end_time: 1665323197100,
+                    category: "SOME_CATEGORY"
+                },
+                {
+                    name: "Another activity",
+                    start_time: 1665323198000,
+                    end_time: 1665323198100,
+                    category: "ANOTHER_CATEGORY"
+                }
+            ]
+        }
+    }
+}
+```
+
+## Rendering categories and activities:
+The algorithm to render categories and activities on a canvas is as follows:
+* Each category gets a swimlane.
+* Activities within a category are rendered within it's swimlane.
+* Render each activity on a given row if it's duration+label do not overlap (start/end times) with an existing activity on that row.
+* Move to the next available row within a swimlane if there is overlap
+* Labels for a given activity will be rendered within it's duration slot if it fits in that rectangular space.
+* Labels that do not fit within an activity's duration slot are rendered outside, to the right of the duration slot.
+
diff --git a/src/plugins/plan/components/ActivityTimeline.vue b/src/plugins/plan/components/ActivityTimeline.vue
new file mode 100644
index 00000000000..66047170ab5
--- /dev/null
+++ b/src/plugins/plan/components/ActivityTimeline.vue
@@ -0,0 +1,154 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <swim-lane :is-nested="isNested" :status="status">
+    <template #label>
+      {{ heading }}
+    </template>
+    <template #object>
+      <svg :height="height" :width="width">
+        <symbol id="activity-bar-bg" :height="rowHeight" width="2" preserveAspectRatio="none">
+          <rect x="0" y="0" width="100%" height="100%" fill="currentColor" />
+          <line
+            x1="100%"
+            y1="0"
+            x2="100%"
+            y2="100%"
+            stroke="black"
+            stroke-width="1"
+            opacity="0.3"
+            transform="translate(-0.5, 0)"
+          />
+        </symbol>
+        <template v-for="(activity, index) in activities" :key="`g-${activity.clipPathId}`">
+          <template v-if="clipActivityNames === true">
+            <clipPath :id="activity.clipPathId" :key="activity.clipPathId">
+              <rect
+                :x="activity.rectStart"
+                :y="activity.row"
+                :width="activity.rectWidth - 1"
+                :height="rowHeight"
+              />
+            </clipPath>
+          </template>
+          <g
+            class="c-plan__activity activity-bounds"
+            @click="setSelectionForActivity(activity, $event)"
+          >
+            <title>{{ activity.name }}</title>
+            <use
+              :key="`rect-${index}`"
+              href="#activity-bar-bg"
+              :x="activity.rectStart"
+              :y="activity.row"
+              :width="activity.rectWidth"
+              :height="rowHeight"
+              :class="activity.class"
+              :color="activity.color"
+            />
+            <text
+              v-for="(textLine, textIndex) in activity.textLines"
+              :key="`text-${index}-${textIndex}`"
+              :class="`c-plan__activity-label ${activity.textClass}`"
+              :x="activity.textStart"
+              :y="activity.textY + textIndex * lineHeight"
+              :fill="activity.textColor"
+              :clip-path="clipActivityNames === true ? `url(#${activity.clipPathId})` : ''"
+            >
+              {{ textLine }}
+            </text>
+          </g>
+        </template>
+        <text
+          v-if="activities.length === 0"
+          x="10"
+          y="20"
+          class="c-plan__activity-label--outside-rect"
+        >
+          No activities within current timeframe
+        </text>
+      </svg>
+    </template>
+  </swim-lane>
+</template>
+
+<script>
+import SwimLane from '@/ui/components/swim-lane/SwimLane.vue';
+
+export default {
+  components: {
+    SwimLane
+  },
+  inject: ['openmct', 'domainObject'],
+  props: {
+    activities: {
+      type: Array,
+      required: true
+    },
+    clipActivityNames: {
+      type: Boolean,
+      default: false
+    },
+    heading: {
+      type: String,
+      required: true
+    },
+    height: {
+      type: Number,
+      default: 30
+    },
+    width: {
+      type: Number,
+      default: 200
+    },
+    isNested: {
+      type: Boolean,
+      default: false
+    },
+    status: {
+      type: String,
+      default() {
+        return '';
+      }
+    },
+    rowHeight: {
+      type: Number,
+      default: 22
+    }
+  },
+  emits: ['activity-selected'],
+  data() {
+    return {
+      lineHeight: 10
+    };
+  },
+  methods: {
+    setSelectionForActivity(activity, event) {
+      event.stopPropagation();
+      this.$emit('activity-selected', {
+        event,
+        selection: activity.selection
+      });
+    }
+  }
+};
+</script>
diff --git a/src/plugins/plan/components/PlanView.vue b/src/plugins/plan/components/PlanView.vue
new file mode 100644
index 00000000000..7bd25508271
--- /dev/null
+++ b/src/plugins/plan/components/PlanView.vue
@@ -0,0 +1,611 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div ref="plan" class="c-plan c-timeline-holder">
+    <template v-if="viewBounds && !options.compact">
+      <swim-lane>
+        <template #label>{{ timeSystem.name }}</template>
+        <template #object>
+          <timeline-axis
+            :bounds="viewBounds"
+            :time-system="timeSystem"
+            :content-height="height"
+            :rendering-engine="renderingEngine"
+          />
+        </template>
+      </swim-lane>
+    </template>
+    <div class="c-plan__contents u-contents">
+      <ActivityTimeline
+        v-for="(group, index) in visibleActivityGroups"
+        :key="`activityGroup-${group.heading}-${index}`"
+        :activities="group.activities"
+        :clip-activity-names="clipActivityNames"
+        :heading="group.heading"
+        :height="group.height"
+        :row-height="rowHeight"
+        :width="group.width"
+        :is-nested="options.isChildObject"
+        :status="status"
+        @activity-selected="selectActivity"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { scaleLinear, scaleUtc } from 'd3-scale';
+
+import SwimLane from '@/ui/components/swim-lane/SwimLane.vue';
+
+import TimelineAxis from '../../../ui/components/TimeSystemAxis.vue';
+import PlanViewConfiguration from '../PlanViewConfiguration.js';
+import { getContrastingColor, getValidatedData, getValidatedGroups } from '../util.js';
+import ActivityTimeline from './ActivityTimeline.vue';
+
+const PADDING = 1;
+const OUTER_TEXT_PADDING = 12;
+const INNER_TEXT_PADDING = 15;
+const TEXT_LEFT_PADDING = 5;
+const ROW_PADDING = 5;
+const SWIMLANE_PADDING = 3;
+const RESIZE_POLL_INTERVAL = 200;
+const ROW_HEIGHT = 22;
+const MAX_TEXT_WIDTH = 300;
+const MIN_ACTIVITY_WIDTH = 2;
+const DEFAULT_COLOR = '#999';
+
+export default {
+  components: {
+    TimelineAxis,
+    SwimLane,
+    ActivityTimeline
+  },
+  inject: ['openmct', 'domainObject', 'path'],
+  props: {
+    options: {
+      type: Object,
+      default() {
+        return {
+          compact: false,
+          isChildObject: false
+        };
+      }
+    },
+    renderingEngine: {
+      type: String,
+      default() {
+        return 'svg';
+      }
+    }
+  },
+  data() {
+    return {
+      activityGroups: [],
+      viewBounds: null,
+      timeSystem: null,
+      planData: {},
+      swimlaneVisibility: {},
+      clipActivityNames: false,
+      height: 0,
+      rowHeight: ROW_HEIGHT
+    };
+  },
+  computed: {
+    visibleActivityGroups() {
+      if (this.domainObject.type === 'plan') {
+        return this.activityGroups;
+      } else {
+        return this.activityGroups.filter(
+          (group) => this.swimlaneVisibility[group.heading] === true
+        );
+      }
+    }
+  },
+  watch: {
+    clipActivityNames() {
+      this.setScaleAndGenerateActivities();
+    }
+  },
+  mounted() {
+    this.composition = this.openmct.composition.get(this.domainObject);
+    this.planViewConfiguration = new PlanViewConfiguration(this.domainObject, this.openmct);
+    this.configuration = this.planViewConfiguration.getConfiguration();
+    this.isNested = this.options.isChildObject;
+    this.swimlaneVisibility = this.configuration.swimlaneVisibility;
+    this.clipActivityNames = this.configuration.clipActivityNames;
+    // This view is used for both gantt-chart and plan domain objects
+    if (this.domainObject.type === 'plan') {
+      this.setupPlan(this.domainObject);
+    }
+
+    const canvas = document.createElement('canvas');
+    this.canvasContext = canvas.getContext('2d');
+    this.setDimensions();
+    this.setTimeContext();
+    this.resizeTimer = setInterval(this.resize, RESIZE_POLL_INTERVAL);
+    this.handleConfigurationChange(this.configuration);
+    this.planViewConfiguration.on('change', this.handleConfigurationChange);
+    this.loadComposition();
+  },
+  beforeUnmount() {
+    clearInterval(this.resizeTimer);
+    this.stopFollowingTimeContext();
+    if (this.unlisten) {
+      this.unlisten();
+    }
+
+    if (this.removeStatusListener) {
+      this.removeStatusListener();
+    }
+
+    if (this.composition) {
+      this.composition.off('add', this.handleCompositionAdd);
+      this.composition.off('remove', this.handleCompositionRemove);
+    }
+
+    this.planViewConfiguration.off('change', this.handleConfigurationChange);
+    if (this.stopObservingPlanChanges) {
+      this.stopObservingPlanChanges();
+    }
+    this.planViewConfiguration.destroy();
+  },
+  methods: {
+    setupPlan(domainObject) {
+      this.planObject = domainObject;
+      this.applyChangesForPlanObject(domainObject);
+      this.stopObservingPlanChanges = this.openmct.objects.observe(
+        domainObject,
+        '*',
+        this.applyChangesForPlanObject
+      );
+      this.removeStatusListener = this.openmct.status.observe(
+        domainObject.identifier,
+        this.setPlanStatus
+      );
+    },
+    setPlanData(domainObject) {
+      this.planData = getValidatedData(domainObject);
+    },
+    activityNameFitsRect(activityName, rectWidth) {
+      return this.getTextWidth(activityName) + TEXT_LEFT_PADDING < rectWidth;
+    },
+    setTimeContext() {
+      this.stopFollowingTimeContext();
+      this.timeContext = this.openmct.time.getContextForView(this.path);
+      this.followTimeContext();
+    },
+    followTimeContext() {
+      this.updateViewBounds(this.timeContext.bounds());
+
+      this.timeContext.on('timeSystem', this.setScaleAndGenerateActivities);
+      this.timeContext.on('bounds', this.updateViewBounds);
+    },
+    loadComposition() {
+      if (this.composition) {
+        this.composition.on('add', this.handleCompositionAdd);
+        this.composition.on('remove', this.handleCompositionRemove);
+        this.composition.load();
+      }
+    },
+    stopFollowingTimeContext() {
+      if (this.timeContext) {
+        this.timeContext.off('timeSystem', this.setScaleAndGenerateActivities);
+        this.timeContext.off('bounds', this.updateViewBounds);
+      }
+    },
+    showReplacePlanDialog(domainObject) {
+      const dialog = this.openmct.overlays.dialog({
+        iconClass: 'alert',
+        message: 'This action will replace the current Plan. Do you want to continue?',
+        buttons: [
+          {
+            label: 'Ok',
+            emphasis: true,
+            callback: () => {
+              this.removeFromComposition(this.planObject);
+              this.setupPlan(domainObject);
+              dialog.dismiss();
+            }
+          },
+          {
+            label: 'Cancel',
+            callback: () => {
+              this.removeFromComposition(domainObject);
+              dialog.dismiss();
+            }
+          }
+        ]
+      });
+    },
+    handleCompositionAdd(domainObject) {
+      if (this.planObject) {
+        this.showReplacePlanDialog(domainObject);
+      } else {
+        this.swimlaneVisibility = this.configuration.swimlaneVisibility;
+        this.setupPlan(domainObject);
+      }
+    },
+    handleConfigurationChange(newConfiguration) {
+      Object.keys(newConfiguration).forEach((key) => {
+        this[key] = newConfiguration[key];
+      });
+    },
+    handleCompositionRemove(identifier) {
+      if (
+        this.planObject &&
+        this.openmct.objects.areIdsEqual(identifier, this.planObject?.identifier)
+      ) {
+        this.planObject = null;
+        this.planData = {};
+        this.planViewConfiguration.resetSwimlaneVisibility();
+      }
+
+      this.setScaleAndGenerateActivities();
+    },
+    applyChangesForPlanObject(domainObject) {
+      const planDomainObject = domainObject || this.domainObject;
+      this.setPlanData(planDomainObject);
+      this.setPlanStatus(this.openmct.status.get(planDomainObject.identifier));
+      this.setScaleAndGenerateActivities();
+    },
+    removeFromComposition(domainObject) {
+      this.composition.remove(domainObject);
+    },
+    resize() {
+      let clientWidth = this.getClientWidth();
+      let clientHeight = this.getClientHeight();
+      if (clientWidth !== this.width) {
+        this.setDimensions();
+        this.updateViewBounds();
+      }
+
+      if (clientHeight !== this.height) {
+        this.setDimensions();
+      }
+    },
+    getClientWidth() {
+      let clientWidth = this.$refs.plan.clientWidth;
+
+      if (!clientWidth) {
+        //this is a hack - need a better way to find the parent of this component
+        let parent = this.getParent();
+        if (parent) {
+          clientWidth = parent.getBoundingClientRect().width;
+        }
+      }
+
+      return clientWidth - 200;
+    },
+    getParent() {
+      //this is a hack - need a better way to find the parent of this component
+      return this.$el.closest('.is-object-type-time-strip');
+    },
+    getClientHeight() {
+      let clientHeight = this.$refs.plan.clientHeight;
+
+      if (!clientHeight) {
+        let parent = this.getParent();
+        if (parent) {
+          clientHeight = parent.getBoundingClientRect().height;
+        }
+      }
+
+      return clientHeight;
+    },
+    updateViewBounds(bounds) {
+      if (bounds) {
+        this.viewBounds = bounds;
+      }
+
+      if (this.timeSystem === null) {
+        this.timeSystem = this.openmct.time.timeSystem();
+      }
+
+      this.setScaleAndGenerateActivities();
+    },
+    setScaleAndGenerateActivities(timeSystem) {
+      if (timeSystem) {
+        this.timeSystem = timeSystem;
+      }
+
+      this.setScale(this.timeSystem);
+      if (this.xScale) {
+        this.generateActivities();
+      }
+    },
+    setDimensions() {
+      this.width = this.getClientWidth();
+      this.height = this.getClientHeight();
+    },
+    setScale(timeSystem) {
+      if (!this.width) {
+        return;
+      }
+
+      if (!timeSystem) {
+        timeSystem = this.openmct.time.timeSystem();
+      }
+
+      if (timeSystem.isUTCBased) {
+        this.xScale = scaleUtc();
+        this.xScale.domain([new Date(this.viewBounds.start), new Date(this.viewBounds.end)]);
+      } else {
+        this.xScale = scaleLinear();
+        this.xScale.domain([this.viewBounds.start, this.viewBounds.end]);
+      }
+
+      this.xScale.range([PADDING, this.width - PADDING * 2]);
+    },
+    isActivityInBounds(activity) {
+      return activity.start < this.viewBounds.end && activity.end > this.viewBounds.start;
+    },
+    /**
+     * Get the width of the given text in pixels.
+     * @param {string} text
+     * @returns {number} width of the text in pixels (as a double)
+     */
+    getTextWidth(text) {
+      const textMetrics = this.canvasContext.measureText(text);
+
+      return textMetrics.width;
+    },
+    sortIntegerAsc(a, b) {
+      const numA = parseInt(a, 10);
+      const numB = parseInt(b, 10);
+      if (numA > numB) {
+        return 1;
+      }
+
+      if (numA < numB) {
+        return -1;
+      }
+
+      return 0;
+    },
+    /**
+     * Get the row where the next activity will land.
+     * @param {number} rectX the x coordinate of the activity rect
+     * @param {number} width the width of the activity rect
+     * @param {Object.<string, Array.<Object>>} activitiesByRow activity arrays mapped by row value
+     */
+    getRowForActivity(rectX, rectWidth, activitiesByRow) {
+      const sortedActivityRows = Object.keys(activitiesByRow).sort(this.sortIntegerAsc);
+      let currentRow;
+
+      function activitiesHaveOverlap(rects) {
+        return rects.some((rect) => {
+          const { rectStart, rectEnd } = rect;
+          const calculatedEnd = rectX + rectWidth;
+          const hasOverlap =
+            (rectX >= rectStart && rectX <= rectEnd) ||
+            (calculatedEnd >= rectStart && calculatedEnd <= rectEnd) ||
+            (rectX <= rectStart && calculatedEnd >= rectEnd);
+
+          return hasOverlap;
+        });
+      }
+
+      for (let i = 0; i < sortedActivityRows.length; i++) {
+        let row = sortedActivityRows[i];
+        if (!activitiesHaveOverlap(activitiesByRow[row])) {
+          currentRow = row;
+          break;
+        }
+      }
+
+      if (currentRow === undefined && sortedActivityRows.length) {
+        let row = parseInt(sortedActivityRows[sortedActivityRows.length - 1], 10);
+        currentRow = row + ROW_HEIGHT + ROW_PADDING;
+      }
+
+      return currentRow || SWIMLANE_PADDING;
+    },
+    generateActivities() {
+      const groupNames = getValidatedGroups(this.domainObject, this.planData);
+
+      if (!groupNames.length) {
+        return;
+      }
+
+      const activityGroups = [];
+      this.planViewConfiguration.initializeSwimlaneVisibility(groupNames);
+
+      groupNames.forEach((groupName) => {
+        let activitiesByRow = {};
+        let currentRow = 0;
+
+        const rawActivities = this.planData[groupName];
+        if (rawActivities === undefined) {
+          return;
+        }
+
+        rawActivities.forEach((rawActivity, index) => {
+          if (!this.isActivityInBounds(rawActivity)) {
+            return;
+          }
+
+          const currentStart = Math.max(this.viewBounds.start, rawActivity.start);
+          const currentEnd = Math.min(this.viewBounds.end, rawActivity.end);
+          const rectX1 = this.xScale(currentStart);
+          const rectX2 = this.xScale(currentEnd);
+          const rectWidth = Math.max(rectX2 - rectX1, MIN_ACTIVITY_WIDTH);
+
+          //TODO: Fix bug for SVG where the rectWidth is not proportional to the canvas measuredWidth of the text
+          const showTextInsideRect =
+            this.clipActivityNames || this.activityNameFitsRect(rawActivity.name, rectWidth);
+          const textStart = (showTextInsideRect ? rectX1 : rectX2) + TEXT_LEFT_PADDING;
+          const color = rawActivity.color || DEFAULT_COLOR;
+          let textColor = '';
+          if (rawActivity.textColor) {
+            textColor = rawActivity.textColor;
+          } else if (showTextInsideRect) {
+            textColor = getContrastingColor(color);
+          }
+
+          const textLines = this.getActivityDisplayText(
+            this.canvasContext,
+            rawActivity.name,
+            showTextInsideRect
+          );
+          const textWidth = textStart + this.getTextWidth(textLines[0]) + TEXT_LEFT_PADDING;
+
+          if (showTextInsideRect) {
+            currentRow = this.getRowForActivity(rectX1, rectWidth, activitiesByRow);
+          } else {
+            currentRow = this.getRowForActivity(rectX1, textWidth, activitiesByRow);
+          }
+
+          let textY =
+            parseInt(currentRow, 10) +
+            (showTextInsideRect ? INNER_TEXT_PADDING : OUTER_TEXT_PADDING);
+
+          if (!activitiesByRow[currentRow]) {
+            activitiesByRow[currentRow] = [];
+          }
+
+          const activity = {
+            color: color,
+            textColor: textColor,
+            exceeds: {
+              start: this.xScale(this.viewBounds.start) > this.xScale(rawActivity.start),
+              end: this.xScale(this.viewBounds.end) < this.xScale(rawActivity.end)
+            },
+            row: currentRow,
+            textLines: textLines,
+            textStart: textStart,
+            textClass: showTextInsideRect ? '' : 'c-plan__activity-label--outside-rect',
+            textY: textY,
+            rectStart: rectX1,
+            rectEnd: showTextInsideRect ? rectX2 : textStart + textWidth,
+            rectWidth: rectWidth,
+            clipPathId: this.getClipPathId(groupName, rawActivity, currentRow),
+            selection: {
+              groupName,
+              index
+            }
+          };
+          activitiesByRow[currentRow].push(activity);
+        });
+
+        const { swimlaneHeight, swimlaneWidth } = this.getGroupDimensions(activitiesByRow);
+        const activities = Array.from(Object.values(activitiesByRow)).flat();
+        activityGroups.push({
+          heading: groupName,
+          activities,
+          height: swimlaneHeight,
+          width: swimlaneWidth,
+          status: this.isNested ? '' : this.status
+        });
+      });
+
+      this.activityGroups = activityGroups;
+    },
+    /**
+     * Format the activity name to fit within the activity rect with a max of 2 lines
+     * @param {CanvasRenderingContext2D} canvasContext
+     * @param {string} activityName
+     * @param {boolean} activityNameFitsRect
+     */
+    getActivityDisplayText(canvasContext, activityName, activityNameFitsRect) {
+      // TODO: If the activity start is less than viewBounds.start then the text should be cropped on the left/should be off-screen)
+      let words = activityName.split(' ');
+      let line = '';
+      let activityLines = [];
+
+      for (let n = 0; n < words.length && activityLines.length <= 2; n++) {
+        let tempLine = line + words[n] + ' ';
+        let textMetrics = canvasContext.measureText(tempLine);
+        const textWidth = textMetrics.width;
+        if (!activityNameFitsRect && textWidth > MAX_TEXT_WIDTH && n > 0) {
+          activityLines.push(line);
+          line = words[n] + ' ';
+          tempLine = line + words[n] + ' ';
+        }
+
+        line = tempLine;
+      }
+
+      return activityLines.length ? activityLines : [line];
+    },
+    getGroupDimensions(activityRows) {
+      let swimlaneHeight = 30;
+      let swimlaneWidth = this.width;
+
+      if (!activityRows) {
+        return {
+          swimlaneHeight,
+          swimlaneWidth
+        };
+      }
+
+      const rows = Object.keys(activityRows);
+
+      if (rows.length) {
+        const lastActivityRow = rows[rows.length - 1];
+        swimlaneHeight = parseInt(lastActivityRow, 10) + ROW_HEIGHT + SWIMLANE_PADDING;
+        swimlaneWidth = this.width;
+      }
+
+      return {
+        swimlaneHeight,
+        swimlaneWidth
+      };
+    },
+    setPlanStatus(status) {
+      this.status = status;
+    },
+    getClipPathId(groupName, activity, row) {
+      groupName = groupName.toLowerCase().replace(/ /g, '-');
+      const activityName = activity.name.toLowerCase().replace(/ /g, '-');
+
+      return `${groupName}-${activityName}-${activity.start}-${activity.end}-${row}`;
+    },
+    selectActivity({ event, selection }) {
+      const element = event.currentTarget;
+      const multiSelect = event.metaKey;
+      const { groupName, index } = selection;
+      const rawActivity = this.planData[groupName][index];
+      this.openmct.selection.select(
+        [
+          {
+            element: element,
+            context: {
+              type: 'activity',
+              activity: rawActivity
+            }
+          },
+          {
+            element: this.openmct.layout.$refs.browseObject.$el,
+            context: {
+              item: this.domainObject,
+              supportsMultiSelect: true
+            }
+          }
+        ],
+        multiSelect
+      );
+    }
+  }
+};
+</script>
diff --git a/src/plugins/plan/inspector/ActivityInspectorViewProvider.js b/src/plugins/plan/inspector/ActivityInspectorViewProvider.js
new file mode 100644
index 00000000000..e4cbe982f24
--- /dev/null
+++ b/src/plugins/plan/inspector/ActivityInspectorViewProvider.js
@@ -0,0 +1,75 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
+
+import PlanActivities from './components/PlanActivitiesView.vue';
+
+export default function ActivityInspectorViewProvider(openmct) {
+  return {
+    key: 'activity-inspector',
+    name: 'Activity',
+    canView: function (selection) {
+      if (selection.length === 0 || selection[0].length === 0) {
+        return false;
+      }
+
+      let context = selection[0][0].context;
+
+      return context && context.type === 'activity';
+    },
+    view: function (selection) {
+      let _destroy = null;
+
+      return {
+        show: function (element) {
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                PlanActivities
+              },
+              provide: {
+                openmct,
+                selection
+              },
+              template: '<PlanActivities />'
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+        },
+        priority: function () {
+          return openmct.priority.HIGH + 1;
+        },
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
+        }
+      };
+    }
+  };
+}
diff --git a/src/plugins/plan/inspector/ActivityProperty.vue b/src/plugins/plan/inspector/ActivityProperty.vue
deleted file mode 100644
index c2168103908..00000000000
--- a/src/plugins/plan/inspector/ActivityProperty.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2020, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-
-<template>
-<li class="c-inspect-properties__row">
-    <div class="c-inspect-properties__label">
-        {{ label }}
-    </div>
-    <div class="c-inspect-properties__value">
-        {{ value }}
-    </div>
-</li>
-</template>
-
-<script>
-
-export default {
-    props: {
-        label: {
-            type: String,
-            default() {
-                return '';
-            }
-        },
-        value: {
-            type: String,
-            default() {
-                return '';
-            }
-        }
-    }
-};
-</script>
diff --git a/src/plugins/plan/inspector/GanttChartInspectorViewProvider.js b/src/plugins/plan/inspector/GanttChartInspectorViewProvider.js
new file mode 100644
index 00000000000..dd6d56fe00f
--- /dev/null
+++ b/src/plugins/plan/inspector/GanttChartInspectorViewProvider.js
@@ -0,0 +1,75 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
+
+import PlanViewConfiguration from './components/PlanViewConfiguration.vue';
+
+export default function GanttChartInspectorViewProvider(openmct) {
+  return {
+    key: 'plan-inspector',
+    name: 'Config',
+    canView: function (selection) {
+      if (selection.length === 0 || selection[0].length === 0) {
+        return false;
+      }
+
+      const domainObject = selection[0][0].context.item;
+
+      return domainObject?.type === 'gantt-chart';
+    },
+    view: function (selection) {
+      let _destroy = null;
+
+      return {
+        show: function (element) {
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                PlanViewConfiguration
+              },
+              provide: {
+                openmct,
+                selection: selection
+              },
+              template: '<plan-view-configuration></plan-view-configuration>'
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+        },
+        priority: function () {
+          return openmct.priority.HIGH + 1;
+        },
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
+        }
+      };
+    }
+  };
+}
diff --git a/src/plugins/plan/inspector/PlanActivitiesView.vue b/src/plugins/plan/inspector/PlanActivitiesView.vue
deleted file mode 100644
index 1ed17fa6b86..00000000000
--- a/src/plugins/plan/inspector/PlanActivitiesView.vue
+++ /dev/null
@@ -1,206 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<template>
-<div class="c-inspector__properties c-inspect-properties">
-    <plan-activity-view v-for="activity in activities"
-                        :key="activity.id"
-                        :activity="activity"
-                        :heading="heading"
-    />
-</div>
-</template>
-
-<script>
-import PlanActivityView from "./PlanActivityView.vue";
-import { getPreciseDuration } from "utils/duration";
-import uuid from 'uuid';
-
-const propertyLabels = {
-    'start': 'Start DateTime',
-    'end': 'End DateTime',
-    'duration': 'Duration',
-    'earliestStart': 'Earliest Start',
-    'latestEnd': 'Latest End',
-    'gap': 'Gap',
-    'overlap': 'Overlap',
-    'totalTime': 'Total Time'
-};
-
-export default {
-    components: {
-        PlanActivityView
-    },
-    inject: ['openmct', 'selection'],
-    data() {
-        return {
-            name: '',
-            activities: [],
-            heading: ''
-        };
-    },
-    mounted() {
-        this.setFormatters();
-        this.getPlanData(this.selection);
-        this.getActivities();
-        this.openmct.selection.on('change', this.updateSelection);
-        this.openmct.time.on('timeSystem', this.setFormatters);
-    },
-    beforeDestroy() {
-        this.openmct.selection.off('change', this.updateSelection);
-        this.openmct.time.off('timeSystem', this.setFormatters);
-    },
-    methods: {
-        setFormatters() {
-            let timeSystem = this.openmct.time.timeSystem();
-            this.timeFormatter = this.openmct.telemetry.getValueFormatter({
-                format: timeSystem.timeFormat
-            }).formatter;
-        },
-        updateSelection(newSelection) {
-            this.getPlanData(newSelection);
-            this.getActivities();
-        },
-        getPlanData(selection) {
-            this.selectedActivities = [];
-            selection.forEach((selectionItem) => {
-                if (selectionItem[0].context.type === 'activity') {
-                    const activity = selectionItem[0].context.activity;
-                    if (activity) {
-                        this.selectedActivities.push(activity);
-                    }
-                }
-            });
-        },
-        getActivities() {
-            if (this.selectedActivities.length <= 1) {
-                this.heading = 'Time';
-                this.setSingleActivityProperties();
-            } else {
-                this.heading = 'Convex Hull';
-                this.setMultipleActivityProperties();
-            }
-        },
-        setSingleActivityProperties() {
-            this.activities.splice(0);
-            this.selectedActivities.forEach((selectedActivity, index) => {
-                const activity = {
-                    id: uuid(),
-                    start: {
-                        label: propertyLabels.start,
-                        value: this.formatTime(selectedActivity.start)
-                    },
-                    end: {
-                        label: propertyLabels.end,
-                        value: this.formatTime(selectedActivity.end)
-                    },
-                    duration: {
-                        label: propertyLabels.duration,
-                        value: this.formatDuration(selectedActivity.end - selectedActivity.start)
-                    }
-                };
-                this.$set(this.activities, index, activity);
-            });
-        },
-        sortFn(a, b) {
-            const numA = parseInt(a.start, 10);
-            const numB = parseInt(b.start, 10);
-            if (numA > numB) {
-                return 1;
-            }
-
-            if (numA < numB) {
-                return -1;
-            }
-
-            return 0;
-        },
-        setMultipleActivityProperties() {
-            this.activities.splice(0);
-
-            let earliestStart;
-            let latestEnd;
-            let gap;
-            let overlap;
-
-            //Sort by start time
-            let selectedActivities = this.selectedActivities.sort(this.sortFn);
-            selectedActivities.forEach((selectedActivity, index) => {
-                if (selectedActivities.length === 2 && index > 0) {
-                    const previous = selectedActivities[index - 1];
-                    //they're on different rows so there must be overlap
-                    if (previous.end > selectedActivity.start) {
-                        overlap = previous.end - selectedActivity.start;
-                    } else if (previous.end < selectedActivity.start) {
-                        gap = selectedActivity.start - previous.end;
-                    }
-                }
-
-                if (index > 0) {
-                    earliestStart = Math.min(earliestStart, selectedActivity.start);
-                    latestEnd = Math.max(latestEnd, selectedActivity.end);
-                } else {
-                    earliestStart = selectedActivity.start;
-                    latestEnd = selectedActivity.end;
-                }
-            });
-            let totalTime = latestEnd - earliestStart;
-
-            const activity = {
-                id: uuid(),
-                'earliestStart': {
-                    label: propertyLabels.earliestStart,
-                    value: this.formatTime(earliestStart)
-                },
-                'latestEnd': {
-                    label: propertyLabels.latestEnd,
-                    value: this.formatTime(latestEnd)
-                }
-            };
-
-            if (gap) {
-                activity.gap = {
-                    label: propertyLabels.gap,
-                    value: this.formatDuration(gap)
-                };
-            } else if (overlap) {
-                activity.overlap = {
-                    label: propertyLabels.overlap,
-                    value: this.formatDuration(overlap)
-                };
-            }
-
-            activity.totalTime = {
-                label: propertyLabels.totalTime,
-                value: this.formatDuration(totalTime)
-            };
-
-            this.$set(this.activities, 0, activity);
-        },
-        formatDuration(duration) {
-            return getPreciseDuration(duration);
-        },
-        formatTime(time) {
-            return this.timeFormatter.format(time);
-        }
-    }
-};
-</script>
diff --git a/src/plugins/plan/inspector/PlanActivityView.vue b/src/plugins/plan/inspector/PlanActivityView.vue
deleted file mode 100644
index c28eb8aadd3..00000000000
--- a/src/plugins/plan/inspector/PlanActivityView.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2020, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-
-<template>
-<div v-if="timeProperties.length"
-     class="u-contents"
->
-    <div class="c-inspect-properties__header">
-        {{ heading }}
-    </div>
-    <ul v-for="timeProperty in timeProperties"
-        :key="timeProperty.id"
-        class="c-inspect-properties__section"
-    >
-        <activity-property :label="timeProperty.label"
-                           :value="timeProperty.value"
-        />
-    </ul>
-</div>
-</template>
-
-<script>
-import ActivityProperty from './ActivityProperty.vue';
-import uuid from 'uuid';
-
-export default {
-    components: {
-        ActivityProperty
-    },
-    props: {
-        activity: {
-            type: Object,
-            required: true
-        },
-        heading: {
-            type: String,
-            required: true
-        }
-    },
-    data() {
-        return {
-            timeProperties: []
-        };
-    },
-    mounted() {
-        this.setProperties();
-    },
-    methods: {
-        setProperties() {
-            Object.keys(this.activity).forEach((key) => {
-                if (this.activity[key].label) {
-                    const label = this.activity[key].label;
-                    const value = String(this.activity[key].value);
-
-                    this.$set(this.timeProperties, this.timeProperties.length, {
-                        id: uuid(),
-                        label,
-                        value
-                    });
-                }
-            });
-        }
-    }
-};
-</script>
diff --git a/src/plugins/plan/inspector/PlanInspectorViewProvider.js b/src/plugins/plan/inspector/PlanInspectorViewProvider.js
deleted file mode 100644
index 34156bbca15..00000000000
--- a/src/plugins/plan/inspector/PlanInspectorViewProvider.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-import PlanActivitiesView from "./PlanActivitiesView.vue";
-import Vue from 'vue';
-
-export default function PlanInspectorViewProvider(openmct) {
-    return {
-        key: 'plan-inspector',
-        name: 'Plan Inspector View',
-        canView: function (selection) {
-            if (selection.length === 0 || selection[0].length === 0) {
-                return false;
-            }
-
-            let context = selection[0][0].context;
-
-            return context
-                && context.type === 'activity';
-        },
-        view: function (selection) {
-            let component;
-
-            return {
-                show: function (element) {
-                    component = new Vue({
-                        el: element,
-                        components: {
-                            PlanActivitiesView: PlanActivitiesView
-                        },
-                        provide: {
-                            openmct,
-                            selection: selection
-                        },
-                        template: '<plan-activities-view></plan-activities-view>'
-                    });
-                },
-                destroy: function () {
-                    if (component) {
-                        component.$destroy();
-                        component = undefined;
-                    }
-                }
-            };
-        },
-        priority: function () {
-            return 1;
-        }
-    };
-}
diff --git a/src/plugins/plan/inspector/components/ActivityProperty.vue b/src/plugins/plan/inspector/components/ActivityProperty.vue
new file mode 100644
index 00000000000..b5424ebd6fe
--- /dev/null
+++ b/src/plugins/plan/inspector/components/ActivityProperty.vue
@@ -0,0 +1,51 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <li class="c-inspect-properties__row">
+    <div class="c-inspect-properties__label">
+      {{ label }}
+    </div>
+    <div class="c-inspect-properties__value">
+      {{ value }}
+    </div>
+  </li>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default() {
+        return '';
+      }
+    },
+    value: {
+      type: String,
+      default() {
+        return '';
+      }
+    }
+  }
+};
+</script>
diff --git a/src/plugins/plan/inspector/components/PlanActivitiesView.vue b/src/plugins/plan/inspector/components/PlanActivitiesView.vue
new file mode 100644
index 00000000000..22c473da0e3
--- /dev/null
+++ b/src/plugins/plan/inspector/components/PlanActivitiesView.vue
@@ -0,0 +1,282 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <plan-activity-time-view
+    v-for="activity in activities"
+    :key="activity.key"
+    :activity="activity"
+    :heading="heading"
+  />
+  <plan-activity-properties-view
+    v-for="activity in activities"
+    :key="activity.key"
+    heading="Properties"
+    :activity="activity"
+  />
+  <plan-activity-status-view
+    v-if="canPersistState"
+    :key="activities[0].key"
+    :activity="activities[0]"
+    :execution-state="activityExecutionState"
+    heading="Activity Status"
+    @update-activity-state="persistActivityState"
+  />
+</template>
+
+<script>
+import { getPreciseDuration } from 'utils/duration';
+
+import { getDisplayProperties } from '../../util.js';
+import PlanActivityPropertiesView from './PlanActivityPropertiesView.vue';
+import PlanActivityStatusView from './PlanActivityStatusView.vue';
+import PlanActivityTimeView from './PlanActivityTimeView.vue';
+
+const propertyLabels = {
+  start: 'Start DateTime',
+  end: 'End DateTime',
+  duration: 'Duration',
+  earliestStart: 'Earliest Start',
+  latestEnd: 'Latest End',
+  gap: 'Gap',
+  overlap: 'Overlap',
+  totalTime: 'Total Time',
+  description: 'Description'
+};
+export default {
+  components: {
+    PlanActivityTimeView,
+    PlanActivityPropertiesView,
+    PlanActivityStatusView
+  },
+  inject: ['openmct', 'selection'],
+  data() {
+    return {
+      name: '',
+      activities: [],
+      selectedActivities: [],
+      activityExecutionState: undefined,
+      heading: ''
+    };
+  },
+  computed: {
+    canPersistState() {
+      return this.selectedActivities.length === 1 && this.activities?.[0]?.id;
+    }
+  },
+  mounted() {
+    this.setFormatters();
+    this.getPlanData(this.selection);
+    this.getActivityStates();
+    this.getActivities();
+    this.openmct.selection.on('change', this.updateSelection);
+    this.openmct.time.on('timeSystem', this.setFormatters);
+  },
+  beforeUnmount() {
+    this.openmct.selection.off('change', this.updateSelection);
+    this.openmct.time.off('timeSystem', this.setFormatters);
+    if (this.stopObservingActivityStatesObject) {
+      this.stopObservingActivityStatesObject();
+    }
+  },
+  methods: {
+    async getActivityStates() {
+      this.activityStatesObject = await this.openmct.objects.get('activity-states');
+      this.setActivityStates(this.activityStatesObject);
+      this.stopObservingActivityStatesObject = this.openmct.objects.observe(
+        this.activityStatesObject,
+        '*',
+        this.setActivityStates
+      );
+    },
+    setActivityStates(newActivitiesStateObject) {
+      if (this.activities.length) {
+        const id = this.activities[0].id;
+        this.activityExecutionState = newActivitiesStateObject.activities[id];
+      } else {
+        this.activityExecutionState = undefined;
+      }
+    },
+    setFormatters() {
+      let timeSystem = this.openmct.time.timeSystem();
+      this.timeFormatter = this.openmct.telemetry.getValueFormatter({
+        format: timeSystem.timeFormat
+      }).formatter;
+    },
+    updateSelection(newSelection) {
+      this.getPlanData(newSelection);
+      this.getActivities();
+    },
+    getPlanData(selection) {
+      this.selectedActivities = [];
+      selection.forEach((selectionItem) => {
+        if (selectionItem[0].context.type === 'activity') {
+          const activity = { ...selectionItem[0].context.activity };
+          if (activity) {
+            activity.key = activity.id ?? activity.name;
+            this.selectedActivities.push(activity);
+          }
+        }
+      });
+    },
+    getActivities() {
+      if (this.selectedActivities.length <= 1) {
+        this.heading = 'Time';
+        this.setSingleActivityProperties();
+      } else {
+        this.heading = 'Convex Hull';
+        this.setMultipleActivityProperties();
+      }
+    },
+    setSingleActivityProperties() {
+      this.activities.splice(0);
+      this.selectedActivities.forEach((selectedActivity, index) => {
+        const activity = {
+          id: selectedActivity.id,
+          key: selectedActivity.key,
+          timeProperties: {
+            start: {
+              label: propertyLabels.start,
+              value: this.formatTime(selectedActivity.start)
+            },
+            end: {
+              label: propertyLabels.end,
+              value: this.formatTime(selectedActivity.end)
+            },
+            duration: {
+              label: propertyLabels.duration,
+              value: this.formatDuration(selectedActivity.end - selectedActivity.start)
+            }
+          }
+        };
+        activity.metadata = {};
+        if (selectedActivity.description) {
+          activity.metadata.description = {
+            label: propertyLabels.description,
+            value: selectedActivity.description
+          };
+        }
+
+        const displayProperties = getDisplayProperties(selectedActivity);
+        activity.metadata = {
+          ...activity.metadata,
+          ...displayProperties
+        };
+
+        this.activities[index] = activity;
+      });
+    },
+    sortFn(a, b) {
+      const numA = parseInt(a.start, 10);
+      const numB = parseInt(b.start, 10);
+      if (numA > numB) {
+        return 1;
+      }
+
+      if (numA < numB) {
+        return -1;
+      }
+
+      return 0;
+    },
+    setMultipleActivityProperties() {
+      this.activities.splice(0);
+
+      let earliestStart;
+      let latestEnd;
+      let gap;
+      let overlap;
+      let id;
+      let key;
+
+      //Sort by start time
+      let selectedActivities = this.selectedActivities.sort(this.sortFn);
+      selectedActivities.forEach((selectedActivity, index) => {
+        if (selectedActivities.length === 2 && index > 0) {
+          const previous = selectedActivities[index - 1];
+          //they're on different rows so there must be overlap
+          if (previous.end > selectedActivity.start) {
+            overlap = previous.end - selectedActivity.start;
+          } else if (previous.end < selectedActivity.start) {
+            gap = selectedActivity.start - previous.end;
+          }
+        }
+
+        if (index > 0) {
+          earliestStart = Math.min(earliestStart, selectedActivity.start);
+          latestEnd = Math.max(latestEnd, selectedActivity.end);
+        } else {
+          id = selectedActivity.id;
+          key = selectedActivity.id ?? selectedActivity.name;
+          earliestStart = selectedActivity.start;
+          latestEnd = selectedActivity.end;
+        }
+      });
+      let totalTime = latestEnd - earliestStart;
+
+      const activity = {
+        id,
+        key,
+        timeProperties: {
+          earliestStart: {
+            label: propertyLabels.earliestStart,
+            value: this.formatTime(earliestStart)
+          },
+          latestEnd: {
+            label: propertyLabels.latestEnd,
+            value: this.formatTime(latestEnd)
+          }
+        }
+      };
+
+      if (gap) {
+        activity.timeProperties.gap = {
+          label: propertyLabels.gap,
+          value: this.formatDuration(gap)
+        };
+      } else if (overlap) {
+        activity.timeProperties.overlap = {
+          label: propertyLabels.overlap,
+          value: this.formatDuration(overlap)
+        };
+      }
+
+      activity.timeProperties.totalTime = {
+        label: propertyLabels.totalTime,
+        value: this.formatDuration(totalTime)
+      };
+
+      this.activities[0] = activity;
+    },
+    formatDuration(duration) {
+      return getPreciseDuration(duration);
+    },
+    formatTime(time) {
+      return this.timeFormatter.format(time);
+    },
+    persistActivityState(data) {
+      const { key, executionState } = data;
+      const activitiesPath = `activities.${key}`;
+      this.openmct.objects.mutate(this.activityStatesObject, activitiesPath, executionState);
+    }
+  }
+};
+</script>
diff --git a/src/plugins/plan/inspector/components/PlanActivityPropertiesView.vue b/src/plugins/plan/inspector/components/PlanActivityPropertiesView.vue
new file mode 100644
index 00000000000..744ded11201
--- /dev/null
+++ b/src/plugins/plan/inspector/components/PlanActivityPropertiesView.vue
@@ -0,0 +1,81 @@
+<!--
+ Open MCT, Copyright (c) 2014-2023, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-inspector__properties c-inspect-properties">
+    <div v-if="properties.length" class="u-contents">
+      <div class="c-inspect-properties__header">{{ heading }}</div>
+      <ul v-for="property in properties" :key="property.id" class="c-inspect-properties__section">
+        <activity-property :label="property.label" :value="property.value" />
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import ActivityProperty from './ActivityProperty.vue';
+
+export default {
+  components: {
+    ActivityProperty
+  },
+  props: {
+    activity: {
+      type: Object,
+      required: true
+    },
+    heading: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      properties: []
+    };
+  },
+  mounted() {
+    this.setProperties();
+  },
+  methods: {
+    setProperties() {
+      if (!this.activity.metadata) {
+        return;
+      }
+
+      Object.keys(this.activity.metadata).forEach((key) => {
+        if (this.activity.metadata[key].label) {
+          const label = this.activity.metadata[key].label;
+          const value = String(this.activity.metadata[key].value);
+          const id = this.activity.id;
+
+          this.properties[this.properties.length] = {
+            id,
+            label,
+            value
+          };
+        }
+      });
+    }
+  }
+};
+</script>
diff --git a/src/plugins/plan/inspector/components/PlanActivityStatusView.vue b/src/plugins/plan/inspector/components/PlanActivityStatusView.vue
new file mode 100644
index 00000000000..2fe7188da4f
--- /dev/null
+++ b/src/plugins/plan/inspector/components/PlanActivityStatusView.vue
@@ -0,0 +1,127 @@
+<!--
+ Open MCT, Copyright (c) 2014-2023, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-inspector__properties c-inspect-properties">
+    <div class="u-contents">
+      <div class="c-inspect-properties__header">{{ heading }}</div>
+      <div class="c-inspect-properties__row">
+        <div class="c-inspect-properties__label" title="Set Status">Set Status</div>
+        <div class="c-inspect-properties__value" aria-label="Activity Status Label">
+          <select
+            v-model="currentStatusKey"
+            name="setActivityStatus"
+            aria-label="Activity Status"
+            @change="changeActivityStatus"
+          >
+            <option
+              v-for="status in activityStates"
+              :key="status.key"
+              :value="status.key"
+              :aria-selected="currentStatusKey === status.key"
+            >
+              {{ status.label }}
+            </option>
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+const activityStates = [
+  {
+    key: 'notStarted',
+    label: 'Not started'
+  },
+  {
+    key: 'in-progress',
+    label: 'In progress'
+  },
+  {
+    key: 'completed',
+    label: 'Completed'
+  },
+  {
+    key: 'aborted',
+    label: 'Aborted'
+  },
+  {
+    key: 'skipped',
+    label: 'Skipped'
+  }
+];
+
+export default {
+  props: {
+    activity: {
+      type: Object,
+      required: true
+    },
+    executionState: {
+      type: String,
+      default() {
+        return '';
+      }
+    },
+    heading: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['updateActivityState'],
+  data() {
+    return {
+      activityStates: activityStates,
+      currentStatusKey: activityStates[0].key
+    };
+  },
+  watch: {
+    executionState() {
+      this.setActivityStatus();
+    }
+  },
+  mounted() {
+    this.setActivityStatus();
+  },
+  methods: {
+    setActivityStatus() {
+      let statusKeyIndex = activityStates.findIndex((state) => state.key === this.executionState);
+      if (statusKeyIndex < 0) {
+        statusKeyIndex = 0;
+      }
+      this.currentStatusKey = this.activityStates[statusKeyIndex].key;
+    },
+    changeActivityStatus() {
+      if (this.currentStatusKey === '') {
+        return;
+      }
+      this.activity.executionState = this.currentStatusKey;
+      this.$emit('updateActivityState', {
+        key: this.activity.id,
+        executionState: this.currentStatusKey
+      });
+    }
+  }
+};
+</script>
diff --git a/src/plugins/plan/inspector/components/PlanActivityTimeView.vue b/src/plugins/plan/inspector/components/PlanActivityTimeView.vue
new file mode 100644
index 00000000000..ab1d4d5aeef
--- /dev/null
+++ b/src/plugins/plan/inspector/components/PlanActivityTimeView.vue
@@ -0,0 +1,83 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-inspector__properties c-inspect-properties">
+    <div v-if="timeProperties.length" class="u-contents">
+      <div class="c-inspect-properties__header">
+        {{ heading }}
+      </div>
+      <ul
+        v-for="timeProperty in timeProperties"
+        :key="timeProperty.id"
+        class="c-inspect-properties__section"
+      >
+        <activity-property :label="timeProperty.label" :value="timeProperty.value" />
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import ActivityProperty from './ActivityProperty.vue';
+
+export default {
+  components: {
+    ActivityProperty
+  },
+  props: {
+    activity: {
+      type: Object,
+      required: true
+    },
+    heading: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      timeProperties: []
+    };
+  },
+  mounted() {
+    this.setProperties();
+  },
+  methods: {
+    setProperties() {
+      Object.keys(this.activity.timeProperties).forEach((key) => {
+        if (this.activity.timeProperties[key].label) {
+          const label = this.activity.timeProperties[key].label;
+          const value = String(this.activity.timeProperties[key].value);
+          const id = this.activity.id;
+
+          this.timeProperties[this.timeProperties.length] = {
+            id,
+            label,
+            value
+          };
+        }
+      });
+    }
+  }
+};
+</script>
diff --git a/src/plugins/plan/inspector/components/PlanViewConfiguration.vue b/src/plugins/plan/inspector/components/PlanViewConfiguration.vue
new file mode 100644
index 00000000000..ff674027ff4
--- /dev/null
+++ b/src/plugins/plan/inspector/components/PlanViewConfiguration.vue
@@ -0,0 +1,130 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="c-inspect-properties">
+    <div class="c-inspect-properties__header">Swimlane Visibility</div>
+    <ul class="c-inspect-properties__section">
+      <li
+        v-for="(visible, swimlaneName) in configuration.swimlaneVisibility"
+        :key="swimlaneName"
+        class="c-inspect-properties__row"
+      >
+        <div class="c-inspect-properties__label" title="Show or hide swimlane">
+          <label :for="swimlaneName + 'ColumnControl'">{{ swimlaneName }}</label>
+        </div>
+        <div class="c-inspect-properties__value">
+          <input
+            v-if="isEditing"
+            :id="swimlaneName + 'ColumnControl'"
+            type="checkbox"
+            :checked="visible === true"
+            @change="toggleHideSwimlane(swimlaneName)"
+          />
+          <div v-else class="value">
+            {{ visible === true ? 'Visible' : 'Hidden' }}
+          </div>
+        </div>
+      </li>
+    </ul>
+    <div class="c-inspect-properties__header">Display settings</div>
+    <ul class="c-inspect-properties__section">
+      <li class="c-inspect-properties__row">
+        <div class="c-inspect-properties__label" title="Clip Activity Names">
+          <label for="clipActivityNames">Clip Activity Names</label>
+        </div>
+        <div class="c-inspect-properties__value">
+          <input
+            v-if="isEditing"
+            id="clipActivityNames"
+            type="checkbox"
+            :checked="configuration.clipActivityNames === true"
+            @change="toggleClipActivityNames"
+          />
+          <div v-else class="value">
+            {{ configuration.clipActivityNames === true ? 'On' : 'Off' }}
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import { markRaw } from 'vue';
+
+import PlanViewConfiguration from '../../PlanViewConfiguration.js';
+
+export default {
+  components: {},
+  inject: ['openmct'],
+  data() {
+    const selection = this.openmct.selection.get();
+    /** @type {import('../../../api/objects/ObjectAPI').DomainObject}  */
+    const domainObject = selection[0][0].context.item;
+    const planViewConfiguration = markRaw(new PlanViewConfiguration(domainObject, this.openmct));
+
+    return {
+      planViewConfiguration,
+      isEditing: this.openmct.editor.isEditing(),
+      configuration: planViewConfiguration.getConfiguration()
+    };
+  },
+  computed: {
+    canEdit() {
+      return this.isEditing;
+    }
+  },
+  mounted() {
+    this.openmct.editor.on('isEditing', this.setIsEditing);
+    this.planViewConfiguration.on('change', this.handleConfigurationChange);
+  },
+  beforeUnmount() {
+    this.openmct.editor.off('isEditing', this.setIsEditing);
+    this.planViewConfiguration.off('change', this.handleConfigurationChange);
+  },
+  methods: {
+    /**
+     * @param {Object.<string, any>} newConfiguration
+     */
+    handleConfigurationChange(newConfiguration) {
+      this.configuration = newConfiguration;
+    },
+    /**
+     * @param {boolean} isEditing
+     */
+    setIsEditing(isEditing) {
+      this.isEditing = isEditing;
+    },
+    toggleClipActivityNames() {
+      this.planViewConfiguration.setClipActivityNames(!this.configuration.clipActivityNames);
+    },
+    /**
+     * @param {string} swimlaneName
+     */
+    toggleHideSwimlane(swimlaneName) {
+      this.planViewConfiguration.setSwimlaneVisibility(
+        swimlaneName,
+        !this.configuration.swimlaneVisibility[swimlaneName]
+      );
+    }
+  }
+};
+</script>
diff --git a/src/plugins/plan/plan.scss b/src/plugins/plan/plan.scss
index fe0bec78fa7..69f48adfdbb 100644
--- a/src/plugins/plan/plan.scss
+++ b/src/plugins/plan/plan.scss
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -27,12 +27,26 @@
     text {
       stroke: none;
     }
+  }
+
+  &__activity {
+    cursor: pointer;
 
-      .activity-label {
-          &--outside-rect {
-              fill: $colorBodyFg !important;
-          }
+    &[s-selected] {
+      rect,
+      use {
+        outline-style: dotted;
+        outline-width: 2px;
+        stroke: $colorGanttSelectedBorder;
+        stroke-width: 2px;
       }
+    }
+  }
+
+  &__activity-label {
+    &--outside-rect {
+      fill: $colorBodyFg !important;
+    }
   }
 
   canvas {
diff --git a/src/plugins/plan/plugin.js b/src/plugins/plan/plugin.js
index f2abb5faf68..a7911a43d0c 100644
--- a/src/plugins/plan/plugin.js
+++ b/src/plugins/plan/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,32 +20,79 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import PlanViewProvider from './PlanViewProvider';
-import PlanInspectorViewProvider from "./inspector/PlanInspectorViewProvider";
+import activityStatesInterceptor from '../activityStates/activityStatesInterceptor.js';
+import { createActivityStatesIdentifier } from '../activityStates/createActivityStatesIdentifier.js';
+import ganttChartCompositionPolicy from './GanttChartCompositionPolicy.js';
+import ActivityInspectorViewProvider from './inspector/ActivityInspectorViewProvider.js';
+import GanttChartInspectorViewProvider from './inspector/GanttChartInspectorViewProvider.js';
+import { DEFAULT_CONFIGURATION } from './PlanViewConfiguration.js';
+import PlanViewProvider from './PlanViewProvider.js';
 
-export default function () {
-    return function install(openmct) {
-        openmct.types.addType('plan', {
-            name: 'Plan',
-            key: 'plan',
-            description: 'A plan',
-            creatable: true,
-            cssClass: 'icon-calendar',
-            form: [
-                {
-                    name: 'Upload Plan (JSON File)',
-                    key: 'selectFile',
-                    control: 'file-input',
-                    required: true,
-                    text: 'Select File...',
-                    type: 'application/json'
-                }
-            ],
-            initialize: function (domainObject) {
-            }
-        });
-        openmct.objectViews.addProvider(new PlanViewProvider(openmct));
-        openmct.inspectorViews.addProvider(new PlanInspectorViewProvider(openmct));
-    };
-}
+const ACTIVITY_STATES_DEFAULT_NAME = 'Activity States';
+/**
+ * @typedef {object} PlanOptions
+ * @property {boolean} creatable true/false to allow creation of a plan via the Create menu.
+ * @property {string} name The name of the activity states model.
+ * @property {string} namespace the namespace to use for the activity states object.
+ * @property {Number} priority the priority of the interceptor. By default, it is low.
+ */
+
+/**
+ *
+ * @param {PlanOptions} options
+ * @returns {*} (any)
+ */
+export default function (options = {}) {
+  return function install(openmct) {
+    openmct.types.addType('plan', {
+      name: 'Plan',
+      key: 'plan',
+      description: 'A non-configurable timeline-like view for a compatible plan file.',
+      creatable: options.creatable ?? false,
+      cssClass: 'icon-plan',
+      form: [
+        {
+          name: 'Upload Plan (JSON File)',
+          key: 'selectFile',
+          control: 'file-input',
+          required: true,
+          text: 'Select File...',
+          type: 'application/json',
+          property: ['selectFile']
+        }
+      ],
+      initialize: function (domainObject) {
+        domainObject.configuration = {
+          clipActivityNames: DEFAULT_CONFIGURATION.clipActivityNames
+        };
+      }
+    });
+    // Name TBD and subject to change
+    openmct.types.addType('gantt-chart', {
+      name: 'Gantt Chart',
+      key: 'gantt-chart',
+      description: 'A configurable timeline-like view for a compatible plan file.',
+      creatable: true,
+      cssClass: 'icon-plan',
+      form: [],
+      initialize(domainObject) {
+        domainObject.configuration = {
+          clipActivityNames: true
+        };
+        domainObject.composition = [];
+      }
+    });
+    openmct.objectViews.addProvider(new PlanViewProvider(openmct));
+    openmct.inspectorViews.addProvider(new ActivityInspectorViewProvider(openmct));
+    openmct.inspectorViews.addProvider(new GanttChartInspectorViewProvider(openmct));
+    openmct.composition.addPolicy(ganttChartCompositionPolicy(openmct));
 
+    //add activity states get interceptor
+    const { name = ACTIVITY_STATES_DEFAULT_NAME, namespace = '', priority } = options;
+    const identifier = createActivityStatesIdentifier(namespace);
+
+    openmct.objects.addGetInterceptor(
+      activityStatesInterceptor(openmct, { identifier, name, priority })
+    );
+  };
+}
diff --git a/src/plugins/plan/pluginSpec.js b/src/plugins/plan/pluginSpec.js
index 7d5d3a418b5..648fb7c78ae 100644
--- a/src/plugins/plan/pluginSpec.js
+++ b/src/plugins/plan/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,147 +20,285 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import {createOpenMct, resetApplicationState} from "utils/testing";
-import PlanPlugin from "../plan/plugin";
-import Vue from 'vue';
+import mount from 'utils/mount';
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+import { nextTick } from 'vue';
+
+import Properties from '../inspectorViews/properties/PropertiesComponent.vue';
+import PlanPlugin from '../plan/plugin.js';
 
 describe('the plugin', function () {
-    let planDefinition;
-    let element;
-    let child;
-    let openmct;
-    let appHolder;
-
-    beforeEach((done) => {
-        appHolder = document.createElement('div');
-        appHolder.style.width = '640px';
-        appHolder.style.height = '480px';
-
-        openmct = createOpenMct();
-        openmct.install(new PlanPlugin());
-
-        planDefinition = openmct.types.get('plan').definition;
-
-        element = document.createElement('div');
-        element.style.width = '640px';
-        element.style.height = '480px';
-        child = document.createElement('div');
-        child.style.width = '640px';
-        child.style.height = '480px';
-        element.appendChild(child);
-
-        openmct.on('start', done);
-        openmct.start(appHolder);
-    });
+  let planDefinition;
+  let ganttDefinition;
+  let element;
+  let child;
+  let openmct;
+  let appHolder;
+  let originalRouterPath;
 
-    afterEach(() => {
-        return resetApplicationState(openmct);
-    });
+  beforeEach((done) => {
+    appHolder = document.createElement('div');
+    appHolder.style.width = '640px';
+    appHolder.style.height = '480px';
 
-    let mockPlanObject = {
-        name: 'Plan',
-        key: 'plan',
-        creatable: true
+    const timeSystemOptions = {
+      timeSystemKey: 'utc',
+      bounds: {
+        start: 1597160002854,
+        end: 1597181232854
+      }
     };
 
+    openmct = createOpenMct(timeSystemOptions);
+    openmct.install(new PlanPlugin());
+
+    planDefinition = openmct.types.get('plan').definition;
+    ganttDefinition = openmct.types.get('gantt-chart').definition;
+
+    element = document.createElement('div');
+    element.style.width = '640px';
+    element.style.height = '480px';
+    child = document.createElement('div');
+    child.style.width = '640px';
+    child.style.height = '480px';
+    element.appendChild(child);
+
+    originalRouterPath = openmct.router.path;
+
+    openmct.on('start', done);
+    openmct.start(appHolder);
+  });
+
+  afterEach(() => {
+    openmct.router.path = originalRouterPath;
+
+    return resetApplicationState(openmct);
+  });
+
+  let mockPlanObject = {
+    name: 'Plan',
+    key: 'plan',
+    creatable: false
+  };
+
+  let mockGanttObject = {
+    name: 'Gantt',
+    key: 'gantt-chart',
+    creatable: true
+  };
+
+  describe('the plan type', () => {
     it('defines a plan object type with the correct key', () => {
-        expect(planDefinition.key).toEqual(mockPlanObject.key);
+      expect(planDefinition.key).toEqual(mockPlanObject.key);
+    });
+    it('is not creatable', () => {
+      expect(planDefinition.creatable).toEqual(mockPlanObject.creatable);
+    });
+  });
+  describe('the gantt-chart type', () => {
+    it('defines a gantt-chart object type with the correct key', () => {
+      expect(ganttDefinition.key).toEqual(mockGanttObject.key);
     });
-
     it('is creatable', () => {
-        expect(planDefinition.creatable).toEqual(mockPlanObject.creatable);
+      expect(ganttDefinition.creatable).toEqual(mockGanttObject.creatable);
     });
+  });
 
-    describe('the plan view', () => {
+  describe('the plan view', () => {
+    it('provides a plan view', () => {
+      const testViewObject = {
+        id: 'test-object',
+        type: 'plan'
+      };
+      openmct.router.path = [testViewObject];
 
-        it('provides a plan view', () => {
-            const testViewObject = {
-                id: "test-object",
-                type: "plan"
-            };
+      const applicableViews = openmct.objectViews.get(testViewObject, [testViewObject]);
+      let planView = applicableViews.find((viewProvider) => viewProvider.key === 'plan.view');
+      expect(planView).toBeDefined();
+    });
 
-            const applicableViews = openmct.objectViews.get(testViewObject, []);
-            let planView = applicableViews.find((viewProvider) => viewProvider.key === 'plan.view');
-            expect(planView).toBeDefined();
-        });
+    it('is not an editable view', () => {
+      const testViewObject = {
+        id: 'test-object',
+        type: 'plan'
+      };
+      openmct.router.path = [testViewObject];
 
+      const applicableViews = openmct.objectViews.get(testViewObject, [testViewObject]);
+      let planView = applicableViews.find((viewProvider) => viewProvider.key === 'plan.view');
+      expect(planView.canEdit(testViewObject)).toBeFalse();
     });
+  });
+
+  describe('the plan view displays activities', () => {
+    let planDomainObject;
+    let mockObjectPath = [
+      {
+        identifier: {
+          key: 'test',
+          namespace: ''
+        },
+        type: 'time-strip',
+        name: 'Test Parent Object'
+      }
+    ];
+    let planView;
+
+    beforeEach(() => {
+      openmct.time.timeSystem('utc', {
+        start: 1597160002854,
+        end: 1597181232854
+      });
+
+      planDomainObject = {
+        identifier: {
+          key: 'test-object',
+          namespace: ''
+        },
+        type: 'plan',
+        id: 'test-object',
+        selectFile: {
+          body: JSON.stringify({
+            'TEST-GROUP': [
+              {
+                name: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+                start: 1597170002854,
+                end: 1597171032854,
+                type: 'TEST-GROUP',
+                color: 'fuchsia',
+                textColor: 'black'
+              },
+              {
+                name: 'Sed ut perspiciatis',
+                start: 1597171132854,
+                end: 1597171232854,
+                type: 'TEST-GROUP',
+                color: 'fuchsia',
+                textColor: 'black'
+              }
+            ]
+          })
+        }
+      };
+
+      openmct.router.path = [planDomainObject];
+
+      const applicableViews = openmct.objectViews.get(planDomainObject, [planDomainObject]);
+      planView = applicableViews.find((viewProvider) => viewProvider.key === 'plan.view');
+      let view = planView.view(planDomainObject, mockObjectPath);
+      view.show(child, true);
 
-    describe('the plan view displays activities', () => {
-        let planDomainObject;
-        let mockObjectPath = [
-            {
-                identifier: {
-                    key: 'test',
-                    namespace: ''
-                },
-                type: 'time-strip',
-                name: 'Test Parent Object'
+      return nextTick();
+    });
+
+    it('loads activities into the view', () => {
+      const svgEls = element.querySelectorAll('.c-plan__contents svg');
+      expect(svgEls.length).toEqual(1);
+    });
+
+    it('displays the group label', () => {
+      const labelEl = element.querySelector(
+        '.c-plan__contents .c-object-label .c-object-label__name'
+      );
+      expect(labelEl.innerHTML).toMatch(/TEST-GROUP/);
+    });
+
+    it('displays the activities and their labels', async () => {
+      const bounds = {
+        start: 1597160002854,
+        end: 1597181232854
+      };
+
+      openmct.time.bounds(bounds);
+
+      await nextTick();
+      const rectEls = element.querySelectorAll('.c-plan__contents use');
+      expect(rectEls.length).toEqual(2);
+      const textEls = element.querySelectorAll('.c-plan__contents text');
+      expect(textEls.length).toEqual(3);
+    });
+
+    it('shows the status indicator when available', async () => {
+      openmct.status.set(
+        {
+          key: 'test-object',
+          namespace: ''
+        },
+        'draft'
+      );
+
+      await nextTick();
+      const statusEl = element.querySelector('.c-plan__contents .is-status--draft');
+      expect(statusEl).toBeDefined();
+    });
+  });
+
+  describe('the plan version', () => {
+    let component;
+    let componentObject;
+    let _destroy;
+    let testPlanObject = {
+      name: 'Plan',
+      type: 'plan',
+      identifier: {
+        key: 'test-plan',
+        namespace: ''
+      },
+      created: 123456789,
+      modified: 123456790,
+      version: 'v1'
+    };
+
+    beforeEach(async () => {
+      openmct.selection.select(
+        [
+          {
+            element: element,
+            context: {
+              item: testPlanObject
+            }
+          },
+          {
+            element: openmct.layout.$refs.browseObject.$el,
+            context: {
+              item: testPlanObject,
+              supportsMultiSelect: false
             }
-        ];
-        let planView;
-
-        beforeEach(() => {
-            openmct.time.timeSystem('utc', {
-                start: 1597160002854,
-                end: 1597181232854
-            });
-
-            planDomainObject = {
-                identifier: {
-                    key: 'test-object',
-                    namespace: ''
-                },
-                type: 'plan',
-                id: "test-object",
-                selectFile: {
-                    body: JSON.stringify({
-                        "TEST-GROUP": [
-                            {
-                                "name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
-                                "start": 1597170002854,
-                                "end": 1597171032854,
-                                "type": "TEST-GROUP",
-                                "color": "fuchsia",
-                                "textColor": "black"
-                            },
-                            {
-                                "name": "Sed ut perspiciatis",
-                                "start": 1597171132854,
-                                "end": 1597171232854,
-                                "type": "TEST-GROUP",
-                                "color": "fuchsia",
-                                "textColor": "black"
-                            }
-                        ]
-                    })
-                }
-            };
-
-            const applicableViews = openmct.objectViews.get(planDomainObject, []);
-            planView = applicableViews.find((viewProvider) => viewProvider.key === 'plan.view');
-            let view = planView.view(planDomainObject, mockObjectPath);
-            view.show(child, true);
-
-            return Vue.nextTick();
-        });
-
-        it('loads activities into the view', () => {
-            const svgEls = element.querySelectorAll('.c-plan__contents svg');
-            expect(svgEls.length).toEqual(1);
-        });
-
-        it('displays the group label', () => {
-            const labelEl = element.querySelector('.c-plan__contents .c-object-label .c-object-label__name');
-            expect(labelEl.innerHTML).toEqual('TEST-GROUP');
-        });
-
-        it('displays the activities and their labels', () => {
-            const rectEls = element.querySelectorAll('.c-plan__contents rect');
-            expect(rectEls.length).toEqual(2);
-            const textEls = element.querySelectorAll('.c-plan__contents text');
-            expect(textEls.length).toEqual(3);
-        });
+          }
+        ],
+        false
+      );
+
+      await nextTick();
+      let viewContainer = document.createElement('div');
+      child.append(viewContainer);
+      const { vNode, destroy } = mount({
+        components: {
+          Properties
+        },
+        provide: {
+          openmct: openmct
+        },
+        template: '<properties ref="root"/>'
+      });
+      _destroy = destroy;
+      component = vNode.componentInstance;
     });
 
+    afterEach(() => {
+      _destroy();
+    });
+
+    it('provides an inspector view with the version information if available', () => {
+      componentObject = component.$refs.root;
+      const propertiesEls = componentObject.$el.querySelectorAll('.c-inspect-properties__row');
+      const found = Array.from(propertiesEls).some((propertyEl) => {
+        return (
+          propertyEl.children[0].innerHTML.trim() === 'Version' &&
+          propertyEl.children[1].innerHTML.trim() === 'v1'
+        );
+      });
+      expect(found).toBeTrue();
+    });
+  });
 });
diff --git a/src/plugins/plan/util.js b/src/plugins/plan/util.js
index fde072e57a9..bc30bd17351 100644
--- a/src/plugins/plan/util.js
+++ b/src/plugins/plan/util.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,18 +20,168 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-export function getValidatedPlan(domainObject) {
-    let body = domainObject.selectFile.body;
-    let json = {};
-    if (typeof body === 'string') {
-        try {
-            json = JSON.parse(body);
-        } catch (e) {
-            return json;
+/**
+ * The SourceMap allows mapping specific implementations of plan domain objects to those expected by Open MCT.
+ * @typedef {object} SourceMapOption
+ * @property {string} orderedGroups the property of the plan that lists groups/swim lanes specifying what order they will be displayed in Open MCT.
+ * @property {string} activities the property of the plan that has the list of activities to be displayed.
+ * @property {string} groupId the property of the activity that maps to the group/swim lane it should be displayed in.
+ * @property {string} start The start time property of the activity
+ * @property {string} end The end time property of the activity
+ * @property {string} id The unique id of the activity. This is required to allow setting activity states
+ * @property {object} displayProperties a list of key: value pairs that specifies which properties of the activity should be displayed when it is selected. Ex. {'location': 'Location', 'metadata.length_in_meters', 'Length (meters)'}
+ * @property {object} filterMetadata a list of strings that specifies which properties of the activity be included for filtering. Ex. {'description','properties.length_in_meters'}
+ */
+
+import _ from 'lodash';
+export function getValidatedData(domainObject) {
+  const sourceMap = domainObject.sourceMap;
+  const json = getObjectJson(domainObject);
+
+  if (
+    sourceMap !== undefined &&
+    sourceMap.activities !== undefined &&
+    sourceMap.groupId !== undefined
+  ) {
+    let mappedJson = {};
+    json[sourceMap.activities].forEach((activity) => {
+      if (activity[sourceMap.groupId]) {
+        const groupIdKey = activity[sourceMap.groupId];
+        let groupActivity = {
+          ...activity
+        };
+
+        if (sourceMap.start) {
+          groupActivity.start = activity[sourceMap.start];
+        }
+
+        if (sourceMap.end) {
+          groupActivity.end = activity[sourceMap.end];
         }
+
+        if (Array.isArray(sourceMap.filterMetadata)) {
+          groupActivity.filterMetadataValues = [];
+          sourceMap.filterMetadata.forEach((property) => {
+            const value = _.get(activity, property);
+            if (value !== undefined && value !== null) {
+              groupActivity.filterMetadataValues.push(value);
+            }
+          });
+        }
+
+        if (sourceMap.id) {
+          groupActivity.id = activity[sourceMap.id];
+        }
+
+        if (sourceMap.displayProperties) {
+          groupActivity.displayProperties = sourceMap.displayProperties;
+        }
+
+        if (!mappedJson[groupIdKey]) {
+          mappedJson[groupIdKey] = [];
+        }
+
+        mappedJson[groupIdKey].push(groupActivity);
+      }
+    });
+
+    return mappedJson;
+  } else {
+    return json;
+  }
+}
+
+function getObjectJson(domainObject) {
+  const body = domainObject.selectFile?.body;
+  let json = {};
+  if (typeof body === 'string') {
+    try {
+      json = JSON.parse(body);
+    } catch (e) {
+      return json;
+    }
+  } else if (body !== undefined) {
+    json = body;
+  }
+
+  return json;
+}
+
+export function getValidatedGroups(domainObject, planData) {
+  let orderedGroupNames;
+  const sourceMap = domainObject.sourceMap;
+  const json = getObjectJson(domainObject);
+  if (sourceMap?.orderedGroups) {
+    const groups = json[sourceMap.orderedGroups];
+    if (groups.length && typeof groups[0] === 'object') {
+      //if groups is a list of objects, then get the name property from each group object.
+      const groupsWithNames = groups.filter(
+        (groupObj) => groupObj.name !== undefined && groupObj.name !== ''
+      );
+      orderedGroupNames = groupsWithNames.map((groupObj) => groupObj.name);
     } else {
-        json = body;
+      // Otherwise, groups is likely a list of names, so use that.
+      orderedGroupNames = groups;
     }
+  }
+  if (orderedGroupNames === undefined) {
+    orderedGroupNames = Object.keys(planData);
+  }
 
-    return json;
+  return orderedGroupNames;
+}
+
+export function getDisplayProperties(activity) {
+  let displayProperties = {};
+  function extractProperties(properties, useKeyAsLabel = false) {
+    Object.keys(properties).forEach((key) => {
+      const label = useKeyAsLabel ? key : properties[key];
+      const value = _.get(activity, key);
+      if (value) {
+        displayProperties[key] = { label, value };
+      }
+    });
+  }
+
+  if (activity?.displayProperties) {
+    extractProperties(activity.displayProperties);
+  } else if (activity?.properties) {
+    extractProperties(activity.properties, true);
+  }
+  return displayProperties;
+}
+
+export function getFilteredValues(activity) {
+  let values = [];
+  if (Array.isArray(activity.filterMetadataValues)) {
+    values = activity.filterMetadataValues;
+  } else if (activity?.properties) {
+    values = Object.values(activity.properties);
+  }
+
+  return values;
+}
+
+export function getContrastingColor(hexColor) {
+  function cutHex(h, start, end) {
+    const hStr = h.charAt(0) === '#' ? h.substring(1, 7) : h;
+
+    return parseInt(hStr.substring(start, end), 16);
+  }
+
+  // https://codepen.io/davidhalford/pen/ywEva/
+  const cThreshold = 130;
+
+  if (hexColor.indexOf('#') === -1) {
+    // We weren't given a hex color
+    return '#ff0000';
+  }
+
+  const hR = cutHex(hexColor, 0, 2);
+  const hG = cutHex(hexColor, 2, 4);
+  const hB = cutHex(hexColor, 4, 6);
+
+  const cBrightness = (hR * 299 + hG * 587 + hB * 114) / 1000;
+
+  return cBrightness > cThreshold ? '#000000' : '#ffffff';
 }
diff --git a/src/plugins/plot/LinearScale.js b/src/plugins/plot/LinearScale.js
index d151291ded4..339dced72d4 100644
--- a/src/plugins/plot/LinearScale.js
+++ b/src/plugins/plot/LinearScale.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -27,53 +27,53 @@
  */
 
 class LinearScale {
-    constructor(domain) {
-        this.domain(domain);
+  constructor(domain) {
+    this.domain(domain);
+  }
+
+  domain(newDomain) {
+    if (newDomain) {
+      this._domain = newDomain;
+      this._domainDenominator = newDomain.max - newDomain.min;
     }
 
-    domain(newDomain) {
-        if (newDomain) {
-            this._domain = newDomain;
-            this._domainDenominator = newDomain.max - newDomain.min;
-        }
+    return this._domain;
+  }
 
-        return this._domain;
+  range(newRange) {
+    if (newRange) {
+      this._range = newRange;
+      this._rangeDenominator = newRange.max - newRange.min;
     }
 
-    range(newRange) {
-        if (newRange) {
-            this._range = newRange;
-            this._rangeDenominator = newRange.max - newRange.min;
-        }
+    return this._range;
+  }
 
-        return this._range;
+  scale(domainValue) {
+    if (!this._domain || !this._range) {
+      return;
     }
 
-    scale(domainValue) {
-        if (!this._domain || !this._range) {
-            return;
-        }
+    const domainOffset = domainValue - this._domain.min;
+    const rangeFraction = domainOffset - this._domainDenominator;
+    const rangeOffset = rangeFraction * this._rangeDenominator;
+    const rangeValue = rangeOffset + this._range.min;
 
-        const domainOffset = domainValue - this._domain.min;
-        const rangeFraction = domainOffset - this._domainDenominator;
-        const rangeOffset = rangeFraction * this._rangeDenominator;
-        const rangeValue = rangeOffset + this._range.min;
+    return rangeValue;
+  }
 
-        return rangeValue;
+  invert(rangeValue) {
+    if (!this._domain || !this._range) {
+      return;
     }
 
-    invert(rangeValue) {
-        if (!this._domain || !this._range) {
-            return;
-        }
-
-        const rangeOffset = rangeValue - this._range.min;
-        const domainFraction = rangeOffset / this._rangeDenominator;
-        const domainOffset = domainFraction * this._domainDenominator;
-        const domainValue = domainOffset + this._domain.min;
+    const rangeOffset = rangeValue - this._range.min;
+    const domainFraction = rangeOffset / this._rangeDenominator;
+    const domainOffset = domainFraction * this._domainDenominator;
+    const domainValue = domainOffset + this._domain.min;
 
-        return domainValue;
-    }
+    return domainValue;
+  }
 }
 
 export default LinearScale;
diff --git a/src/plugins/plot/MctPlot.vue b/src/plugins/plot/MctPlot.vue
index e03e1beeaba..a09abaa35d2 100644
--- a/src/plugins/plot/MctPlot.vue
+++ b/src/plugins/plot/MctPlot.vue
@@ -1,5 +1,5 @@
 <!--
- Open MCT, Copyright (c) 2014-2021, United States Government
+ Open MCT, Copyright (c) 2014-2024, United States Government
  as represented by the Administrator of the National Aeronautics and Space
  Administration. All rights reserved.
 
@@ -20,1014 +20,1945 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-<div v-if="loaded"
-     class="gl-plot"
-     :class="[plotLegendExpandedStateClass, plotLegendPositionClass]"
->
-    <plot-legend :cursor-locked="!!lockHighlightPoint"
-                 :series="config.series.models"
-                 :highlights="highlights"
-                 :legend="config.legend"
-                 @legendHoverChanged="legendHoverChanged"
-    />
+  <div
+    v-if="loaded"
+    ref="plot"
+    class="gl-plot"
+    :class="{ 'js-series-data-loaded': seriesDataLoaded }"
+  >
+    <slot></slot>
     <div class="plot-wrapper-axis-and-display-area flex-elem grows">
-        <y-axis v-if="config.series.models.length > 0"
-                :tick-width="tickWidth"
-                :single-series="config.series.models.length === 1"
-                :series-model="config.series.models[0]"
-                @yKeyChanged="setYAxisKey"
-                @tickWidthChanged="onTickWidthChange"
+      <div v-if="seriesModels.length" class="u-contents">
+        <y-axis
+          v-for="(yAxis, index) in yAxesIds"
+          :id="yAxis.id"
+          :key="`yAxis-${yAxis.id}-${index}`"
+          :has-multiple-left-axes="hasMultipleLeftAxes"
+          :position="yAxis.id > 2 ? 'right' : 'left'"
+          :class="{ 'plot-yaxis-right': yAxis.id > 2 }"
+          :tick-width="yAxis.tickWidth"
+          :used-tick-width="plotFirstLeftTickWidth"
+          :plot-left-tick-width="yAxis.id > 2 ? yAxis.tickWidth : plotLeftTickWidth"
+          @y-key-changed="setYAxisKey"
+          @plot-y-tick-width="onYTickWidthChange"
+          @toggle-axis-visibility="toggleSeriesForYAxis"
         />
-        <div class="gl-plot-wrapper-display-area-and-x-axis"
-             :style="{
-                 left: (tickWidth + 20) + 'px'
-             }"
-        >
-
-            <div class="gl-plot-display-area has-local-controls has-cursor-guides">
-                <div class="l-state-indicators">
-                    <span class="l-state-indicators__alert-no-lad t-object-alert t-alert-unsynced icon-alert-triangle"
-                          title="This plot is not currently displaying the latest data. Reset pan/zoom to view latest data."
-                    ></span>
-                </div>
-
-                <mct-ticks v-show="gridLines && !options.compact"
-                           :axis-type="'xAxis'"
-                           :position="'right'"
-                           @plotTickWidth="onTickWidthChange"
-                />
-
-                <mct-ticks v-show="gridLines"
-                           :axis-type="'yAxis'"
-                           :position="'bottom'"
-                           @plotTickWidth="onTickWidthChange"
-                />
-
-                <div ref="chartContainer"
-                     class="gl-plot-chart-wrapper"
-                >
-                    <mct-chart :rectangles="rectangles"
-                               :highlights="highlights"
-                               :show-limit-line-labels="showLimitLineLabels"
-                               @plotReinitializeCanvas="initCanvas"
-                    />
-                </div>
-
-                <div class="gl-plot__local-controls h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover">
-                    <div v-if="!options.compact"
-                         class="c-button-set c-button-set--strip-h js-zoom"
-                    >
-                        <button class="c-button icon-minus"
-                                title="Zoom out"
-                                @click="zoom('out', 0.2)"
-                        >
-                        </button>
-                        <button class="c-button icon-plus"
-                                title="Zoom in"
-                                @click="zoom('in', 0.2)"
-                        >
-                        </button>
-                    </div>
-                    <div v-if="plotHistory.length && !options.compact"
-                         class="c-button-set c-button-set--strip-h js-pan"
-                    >
-                        <button class="c-button icon-arrow-left"
-                                title="Restore previous pan/zoom"
-                                @click="back()"
-                        >
-                        </button>
-                        <button class="c-button icon-reset"
-                                title="Reset pan/zoom"
-                                @click="clear()"
-                        >
-                        </button>
-                    </div>
-                    <div v-if="isRealTime && !options.compact"
-                         class="c-button-set c-button-set--strip-h js-pause"
-                    >
-                        <button v-if="!isFrozen"
-                                class="c-button icon-pause"
-                                title="Pause incoming real-time data"
-                                @click="pause()"
-                        >
-                        </button>
-                        <button v-if="isFrozen"
-                                class="c-button icon-arrow-right pause-play is-paused"
-                                title="Resume displaying real-time data"
-                                @click="play()"
-                        >
-                        </button>
-                    </div>
-                    <div v-if="isTimeOutOfSync || isFrozen"
-                         class="c-button-set c-button-set--strip-h"
-                    >
-                        <button class="c-button icon-clock"
-                                title="Synchronize Time Conductor"
-                                @click="showSynchronizeDialog()"
-                        >
-                        </button>
-                    </div>
-                </div>
-
-                <!--Cursor guides-->
-                <div v-show="cursorGuide"
-                     ref="cursorGuideVertical"
-                     class="c-cursor-guide--v js-cursor-guide--v"
-                >
-                </div>
-                <div v-show="cursorGuide"
-                     ref="cursorGuideHorizontal"
-                     class="c-cursor-guide--h js-cursor-guide--h"
-                >
-                </div>
-            </div>
-            <x-axis v-if="config.series.models.length > 0 && !options.compact"
-                    :series-model="config.series.models[0]"
+      </div>
+      <div class="gl-plot-wrapper-display-area-and-x-axis" :style="xAxisStyle">
+        <div class="gl-plot-display-area has-local-controls has-cursor-guides">
+          <div class="l-state-indicators">
+            <span
+              class="l-state-indicators__alert-no-lad t-object-alert t-alert-unsynced icon-alert-triangle"
+              title="This plot is not currently displaying the latest data. Reset pan/zoom to view latest data."
+            ></span>
+          </div>
+
+          <MctTicks
+            v-show="gridLines && !options.compact"
+            :axis-type="'xAxis'"
+            :position="'right'"
+          />
+
+          <MctTicks
+            v-for="(yAxis, index) in yAxesIds"
+            v-show="gridLines"
+            :key="`yAxis-gridlines-${index}`"
+            :axis-type="'yAxis'"
+            :position="'bottom'"
+            :axis-id="yAxis.id"
+            @plot-tick-width="onYTickWidthChange"
+          />
+
+          <div
+            ref="chartContainer"
+            class="gl-plot-chart-wrapper"
+            :class="[{ 'alt-pressed': altPressed }]"
+          >
+            <mct-chart
+              :rectangles="rectangles"
+              :highlights="highlights"
+              :show-limit-line-labels="limitLineLabels"
+              :annotated-points-by-series="annotatedPointsBySeries"
+              :annotation-selections-by-series="annotationSelectionsBySeries"
+              :hidden-y-axis-ids="hiddenYAxisIds"
+              :annotation-viewing-and-editing-allowed="annotationViewingAndEditingAllowed"
+              @plot-reinitialize-canvas="initCanvas"
+              @chart-loaded="initialize"
             />
-
+          </div>
+
+          <div
+            class="gl-plot__local-controls h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover"
+          >
+            <div v-if="!options.compact" class="c-button-set c-button-set--strip-h js-zoom">
+              <button
+                class="c-button icon-minus"
+                title="Zoom out"
+                @click="zoom('out', 0.2)"
+              ></button>
+              <button class="c-button icon-plus" title="Zoom in" @click="zoom('in', 0.2)"></button>
+            </div>
+            <div
+              v-if="plotHistory.length && !options.compact"
+              class="c-button-set c-button-set--strip-h js-pan"
+            >
+              <button
+                class="c-button icon-arrow-left"
+                title="Restore previous pan/zoom"
+                @click="back()"
+              ></button>
+              <button
+                class="c-button icon-reset"
+                title="Reset pan/zoom"
+                @click="resumeRealtimeData()"
+              ></button>
+            </div>
+            <div
+              v-if="isRealTime && !options.compact"
+              class="c-button-set c-button-set--strip-h js-pause"
+            >
+              <button
+                v-if="!isFrozen"
+                class="c-button icon-pause"
+                title="Pause incoming real-time data"
+                @click="pause()"
+              ></button>
+              <button
+                v-if="isFrozen"
+                class="c-button icon-arrow-right pause-play is-paused"
+                title="Resume displaying real-time data"
+                @click="resumeRealtimeData()"
+              ></button>
+            </div>
+            <div v-if="isTimeOutOfSync || isFrozen" class="c-button-set c-button-set--strip-h">
+              <button
+                class="c-button icon-clock"
+                title="Synchronize Time Conductor"
+                @click="showSynchronizeDialog()"
+              ></button>
+            </div>
+            <div class="c-button-set c-button-set--strip-h">
+              <button
+                class="c-button icon-crosshair"
+                :class="{ 'is-active': cursorGuide }"
+                title="Toggle cursor guides"
+                @click="toggleCursorGuide"
+              ></button>
+              <button
+                class="c-button"
+                :class="{ 'icon-grid-on': gridLines, 'icon-grid-off': !gridLines }"
+                title="Toggle grid lines"
+                @click="toggleGridLines"
+              ></button>
+            </div>
+          </div>
+
+          <!--Cursor guides-->
+          <div
+            v-show="cursorGuide"
+            ref="cursorGuideVertical"
+            class="c-cursor-guide--v js-cursor-guide--v"
+          ></div>
+          <div
+            v-show="cursorGuide"
+            ref="cursorGuideHorizontal"
+            class="c-cursor-guide--h js-cursor-guide--h"
+          ></div>
         </div>
+        <x-axis
+          v-if="seriesModels.length > 0 && !options.compact"
+          :series-model="seriesModels[0]"
+        />
+      </div>
     </div>
-
-</div>
+  </div>
 </template>
 
 <script>
-
-import eventHelpers from './lib/eventHelpers';
-import LinearScale from "./LinearScale";
-import PlotConfigurationModel from './configuration/PlotConfigurationModel';
-import configStore from './configuration/configStore';
-
-import PlotLegend from "./legend/PlotLegend.vue";
-import MctTicks from "./MctTicks.vue";
-import MctChart from "./chart/MctChart.vue";
-import XAxis from "./axis/XAxis.vue";
-import YAxis from "./axis/YAxis.vue";
-import _ from "lodash";
+import Flatbush from 'flatbush';
+import _ from 'lodash';
+import { useEventBus } from 'utils/useEventBus';
+import { toRaw } from 'vue';
+
+import TagEditorClassNames from '../inspectorViews/annotations/tags/TagEditorClassNames.js';
+import XAxis from './axis/XAxis.vue';
+import YAxis from './axis/YAxis.vue';
+import MctChart from './chart/MctChart.vue';
+import configStore from './configuration/ConfigStore.js';
+import PlotConfigurationModel from './configuration/PlotConfigurationModel.js';
+import eventHelpers from './lib/eventHelpers.js';
+import LinearScale from './LinearScale.js';
+import MctTicks from './MctTicks.vue';
+
+const OFFSET_THRESHOLD = 10;
+const AXES_PADDING = 20;
 
 export default {
-    components: {
-        XAxis,
-        YAxis,
-        PlotLegend,
-        MctTicks,
-        MctChart
-    },
-    inject: ['openmct', 'domainObject'],
-    props: {
-        options: {
-            type: Object,
-            default() {
-                return {
-                    compact: false
-                };
-            }
-        },
-        gridLines: {
-            type: Boolean,
-            default() {
-                return true;
-            }
-        },
-        cursorGuide: {
-            type: Boolean,
-            default() {
-                return true;
-            }
-        },
-        plotTickWidth: {
-            type: Number,
-            default() {
-                return 0;
-            }
-        }
+  components: {
+    XAxis,
+    YAxis,
+    MctTicks,
+    MctChart
+  },
+  inject: ['openmct', 'domainObject', 'path', 'renderWhenVisible'],
+  props: {
+    options: {
+      type: Object,
+      default() {
+        return {
+          compact: false
+        };
+      }
+    },
+    initGridLines: {
+      type: Boolean,
+      default() {
+        return true;
+      }
     },
-    data() {
+    initCursorGuide: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    parentYTickWidth: {
+      type: Object,
+      default() {
         return {
-            highlights: [],
-            lockHighlightPoint: false,
-            tickWidth: 0,
-            yKeyOptions: [],
-            yAxisLabel: '',
-            rectangles: [],
-            plotHistory: [],
-            selectedXKeyOption: {},
-            xKeyOptions: [],
-            config: {},
-            pending: 0,
-            isRealTime: this.openmct.time.clock() !== undefined,
-            loaded: false,
-            isTimeOutOfSync: false,
-            showLimitLineLabels: undefined
+          leftTickWidth: 0,
+          rightTickWidth: 0,
+          hasMultipleLeftAxes: false
         };
+      }
     },
-    computed: {
-        isFrozen() {
-            return this.config.xAxis.get('frozen') === true && this.config.yAxis.get('frozen') === true;
-        },
-        plotLegendPositionClass() {
-            return `plot-legend-${this.config.legend.get('position')}`;
-        },
-        plotLegendExpandedStateClass() {
-            if (this.config.legend.get('expanded')) {
-                return 'plot-legend-expanded';
-            } else {
-                return 'plot-legend-collapsed';
-            }
-        }
+    limitLineLabels: {
+      type: Object,
+      default() {
+        return undefined;
+      }
     },
-    watch: {
-        plotTickWidth(newTickWidth) {
-            this.onTickWidthChange(newTickWidth, true);
-        },
-        gridLines(newGridLines) {
-            this.setGridLinesVisibility(newGridLines);
-        },
-        cursorGuide(newCursorGuide) {
-            this.setCursorGuideVisibility(newCursorGuide);
-        }
+    colorPalette: {
+      type: Object,
+      default() {
+        return undefined;
+      }
+    }
+  },
+  emits: [
+    'config-loaded',
+    'cursor-guide',
+    'grid-lines',
+    'loading-complete',
+    'loading-updated',
+    'plot-y-tick-width',
+    'highlights',
+    'lock-highlight-point',
+    'status-updated'
+  ],
+  setup() {
+    const { EventBus } = useEventBus();
+    return {
+      EventBus
+    };
+  },
+  data() {
+    return {
+      altPressed: false,
+      annotatedPointsBySeries: {},
+      highlights: [],
+      annotationSelectionsBySeries: {},
+      annotationsEverLoaded: false,
+      lockHighlightPoint: false,
+      yKeyOptions: [],
+      yAxisLabel: '',
+      rectangles: [],
+      plotHistory: [],
+      selectedXKeyOption: {},
+      xKeyOptions: [],
+      pending: 0,
+      isRealTime: this.openmct.time.isRealTime(),
+      loaded: false,
+      isTimeOutOfSync: false,
+      isFrozenOnMouseDown: false,
+      cursorGuide: this.initCursorGuide,
+      gridLines: this.initGridLines,
+      yAxes: [],
+      hiddenYAxisIds: [],
+      yAxisListWithRange: [],
+      config: {}
+    };
+  },
+  computed: {
+    xAxisStyle() {
+      const rightAxis = this.yAxesIds.find((yAxis) => yAxis.id > 2);
+      const leftOffset = this.hasMultipleLeftAxes ? 2 * AXES_PADDING : AXES_PADDING;
+      let style = {
+        left: `${this.plotLeftTickWidth + leftOffset}px`
+      };
+      const parentRightAxisWidth = this.parentYTickWidth.rightTickWidth;
+
+      if (parentRightAxisWidth || rightAxis) {
+        style.right = `${(parentRightAxisWidth || rightAxis.tickWidth) + AXES_PADDING}px`;
+      }
+
+      return style;
+    },
+    yAxesIds() {
+      return this.yAxes.filter((yAxis) => yAxis.seriesCount > 0);
+    },
+    hasMultipleLeftAxes() {
+      return (
+        this.parentYTickWidth.hasMultipleLeftAxes ||
+        this.yAxes.filter((yAxis) => yAxis.seriesCount > 0 && yAxis.id <= 2).length > 1
+      );
+    },
+    isNestedWithinAStackedPlot() {
+      const isNavigatedObject = this.openmct.router.isNavigatedObject(
+        [this.domainObject].concat(this.path)
+      );
+
+      return (
+        !isNavigatedObject &&
+        this.path.find((pathObject, pathObjIndex) => pathObject.type === 'telemetry.plot.stacked')
+      );
+    },
+    isFrozen() {
+      return this.config.xAxis.get('frozen') === true && this.config.yAxis.get('frozen') === true;
+    },
+    annotationViewingAndEditingAllowed() {
+      // only allow annotations viewing/editing if plot is paused or in fixed time mode
+      return this.isFrozen || !this.isRealTime;
     },
-    mounted() {
-        eventHelpers.extend(this);
+    plotFirstLeftTickWidth() {
+      const firstYAxis = this.yAxes.find((yAxis) => yAxis.id === 1);
 
-        this.config = this.getConfig();
+      return firstYAxis ? firstYAxis.tickWidth : 0;
+    },
+    plotLeftTickWidth() {
+      let leftTickWidth = 0;
+      this.yAxes.forEach((yAxis) => {
+        if (yAxis.id > 2) {
+          return;
+        }
 
-        this.listenTo(this.config.series, 'add', this.addSeries, this);
-        this.listenTo(this.config.series, 'remove', this.removeSeries, this);
+        leftTickWidth = leftTickWidth + yAxis.tickWidth;
+      });
+      const parentLeftTickWidth = this.parentYTickWidth.leftTickWidth;
 
-        this.config.series.models.forEach(this.addSeries, this);
+      return parentLeftTickWidth || leftTickWidth;
+    },
+    seriesDataLoaded() {
+      return this.pending === 0 && this.loaded;
+    }
+  },
+  watch: {
+    initGridLines(newGridLines) {
+      this.gridLines = newGridLines;
+    },
+    initCursorGuide(newCursorGuide) {
+      this.cursorGuide = newCursorGuide;
+    }
+  },
+  created() {
+    this.abortController = new AbortController();
+  },
+  mounted() {
+    this.seriesModels = [];
+    this.config = {};
+    this.yAxisIdVisibility = {};
+    this.offsetWidth = 0;
+
+    document.addEventListener('keydown', this.handleKeyDown);
+    document.addEventListener('keyup', this.handleKeyUp);
+    eventHelpers.extend(this);
+    this.updateMode = this.updateMode.bind(this);
+    this.updateDisplayBounds = this.updateDisplayBounds.bind(this);
+    this.setTimeContext = this.setTimeContext.bind(this);
+
+    this.config = this.getConfig();
+    this.yAxes = [
+      {
+        id: this.config.yAxis.id,
+        seriesCount: 0,
+        tickWidth: 0
+      }
+    ];
+    if (this.config.additionalYAxes) {
+      this.yAxes = this.yAxes.concat(
+        this.config.additionalYAxes.map((yAxis) => {
+          return {
+            id: yAxis.id,
+            seriesCount: 0,
+            tickWidth: 0
+          };
+        })
+      );
+    }
 
-        this.filterObserver = this.openmct.objects.observe(
-            this.domainObject,
-            'configuration.filters',
-            this.updateFiltersAndResubscribe
-        );
-        this.removeStatusListener = this.openmct.status.observe(this.domainObject.identifier, this.updateStatus);
-
-        this.openmct.objectViews.on('clearData', this.clearData);
-        this.followTimeConductor();
-
-        this.loaded = true;
-
-        //We're referencing the canvas elements from the mct-chart in the initialize method.
-        // So we need $nextTick to ensure the component is fully mounted before we can initialize stuff.
-        this.$nextTick(this.initialize);
-
-    },
-    beforeDestroy() {
-        this.destroy();
-    },
-    methods: {
-        followTimeConductor() {
-            this.openmct.time.on('clock', this.updateRealTime);
-            this.openmct.time.on('bounds', this.updateDisplayBounds);
-            this.synchronized(true);
-        },
-        getConfig() {
-            const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-            let config = configStore.get(configId);
-            if (!config) {
-                config = new PlotConfigurationModel({
-                    id: configId,
-                    domainObject: this.domainObject,
-                    openmct: this.openmct
-                });
-                configStore.add(configId, config);
-            }
+    this.$emit('config-loaded', true);
+
+    this.listenTo(this.config.series, 'add', this.addSeries, this);
+    this.listenTo(this.config.series, 'remove', this.removeSeries, this);
+
+    this.config.series.models.forEach(this.addSeries, this);
+
+    this.filterObserver = this.openmct.objects.observe(
+      this.domainObject,
+      'configuration.filters',
+      this.updateFiltersAndResubscribe
+    );
+    this.removeStatusListener = this.openmct.status.observe(
+      this.domainObject.identifier,
+      this.updateStatus
+    );
+
+    this.openmct.objectViews.on('clearData', this.clearData);
+    this.EventBus.$on('loading-complete', this.loadAnnotationsIfAllowed);
+    this.openmct.selection.on('change', this.updateSelection);
+    this.yAxisListWithRange = [this.config.yAxis, ...this.config.additionalYAxes];
+
+    this.$nextTick(() => {
+      this.setTimeContext();
+      this.loaded = true;
+    });
+  },
+  beforeUnmount() {
+    this.abortController.abort();
+    this.openmct.selection.off('change', this.updateSelection);
+    document.removeEventListener('keydown', this.handleKeyDown);
+    document.removeEventListener('keyup', this.handleKeyUp);
+    document.body.removeEventListener('click', this.cancelSelection);
+    this.EventBus.$off('loading-complete', this.loadAnnotationsIfAllowed);
+    this.destroy();
+  },
+  methods: {
+    async updateSelection(selection) {
+      const selectionContext = selection?.[0]?.[0]?.context?.item;
+      // on clicking on a search result we highlight the annotation and zoom - we know it's an annotation result when isAnnotationSearchResult === true
+      // We shouldn't zoom when we're selecting existing annotations to view them or creating new annotations.
+      const selectionType = selection?.[0]?.[0]?.context?.type;
+      const validSelectionTypes = ['clicked-on-plot-selection', 'annotation-search-result'];
+      const isAnnotationSearchResult = selectionType === 'annotation-search-result';
+
+      if (!validSelectionTypes.includes(selectionType)) {
+        // wrong type of selection
+        return;
+      }
+
+      if (
+        selectionContext &&
+        !isAnnotationSearchResult &&
+        this.openmct.objects.areIdsEqual(selectionContext.identifier, this.domainObject.identifier)
+      ) {
+        return;
+      }
+
+      await this.waitForAxesToLoad();
+      const selectedAnnotations = selection?.[0]?.[0]?.context?.annotations;
+      //This section is only for the annotations search results entry to displaying annotations
+      if (isAnnotationSearchResult) {
+        this.showAnnotationsFromSearchResults(selectedAnnotations);
+      }
+
+      //This section is common to all entry points for annotation display
+      this.prepareExistingAnnotationSelection(selectedAnnotations);
+    },
+    cancelSelection(event) {
+      if (this.$refs?.plot) {
+        const clickedInsidePlot = this.$refs.plot.contains(event.target);
+        // unfortunate side effect from possibly being detached from the DOM when
+        // adding/deleting tags, so closest() won't work
+        const clickedTagEditor = Object.values(TagEditorClassNames).some((className) => {
+          return event.target.classList.contains(className);
+        });
+        const clickedInsideInspector = event.target.closest('.js-inspector') !== null;
+        const clickedOption = event.target.closest('.js-autocomplete-options') !== null;
+        if (!clickedInsidePlot && !clickedInsideInspector && !clickedOption && !clickedTagEditor) {
+          this.rectangles = [];
+          this.annotationSelectionsBySeries = {};
+          this.selectPlot();
+          document.body.removeEventListener('click', this.cancelSelection);
+        }
+      }
+    },
+    waitForAxesToLoad() {
+      return new Promise((resolve) => {
+        // When there is no plot data, the ranges can be undefined
+        // in which case we should not perform selection.
+        const currentXaxis = this.config.xAxis.get('displayRange');
+        const currentYaxis = this.config.yAxis.get('displayRange');
+        if (!currentXaxis || !currentYaxis) {
+          this.EventBus.$once('loading-complete', resolve);
+        } else {
+          resolve();
+        }
+      });
+    },
+    showAnnotationsFromSearchResults(selectedAnnotations) {
+      if (selectedAnnotations?.length) {
+        // pause the plot if we haven't already so we can actually display
+        // the annotations
+        this.freeze();
+        // just use first annotation
+        const boundingBoxes = selectedAnnotations[0].targets;
+        let minX = Number.MAX_SAFE_INTEGER;
+        let minY = Number.MAX_SAFE_INTEGER;
+        let maxX = Number.MIN_SAFE_INTEGER;
+        let maxY = Number.MIN_SAFE_INTEGER;
+        boundingBoxes.forEach((boundingBox) => {
+          if (boundingBox.minX < minX) {
+            minX = boundingBox.minX;
+          }
+
+          if (boundingBox.maxX > maxX) {
+            maxX = boundingBox.maxX;
+          }
+
+          if (boundingBox.maxY > maxY) {
+            maxY = boundingBox.maxY;
+          }
+
+          if (boundingBox.minY < minY) {
+            minY = boundingBox.minY;
+          }
+        });
+
+        this.config.xAxis.set('displayRange', {
+          min: minX,
+          max: maxX
+        });
+        this.config.yAxis.set('displayRange', {
+          min: minY,
+          max: maxY
+        });
+        //Zoom out just a touch so that the highlighted section for annotations doesn't take over the whole view - which is not a nice look.
+        this.zoom('out', 0.2);
+      }
+    },
+    handleKeyDown(event) {
+      if (event.key === 'Alt') {
+        this.altPressed = true;
+      }
+    },
+    handleKeyUp(event) {
+      if (event.key === 'Alt') {
+        this.altPressed = false;
+      }
+    },
+    setTimeContext() {
+      this.stopFollowingTimeContext();
+      this.timeContext = this.openmct.time.getContextForView(this.path);
+      this.followTimeContext();
+    },
+    followTimeContext() {
+      this.updateDisplayBounds(this.timeContext.getBounds());
+      this.timeContext.on('modeChanged', this.updateMode);
+      this.timeContext.on('boundsChanged', this.updateDisplayBounds);
+      this.synchronized(true);
+    },
+    stopFollowingTimeContext() {
+      if (this.timeContext) {
+        this.timeContext.off('modeChanged', this.updateMode);
+        this.timeContext.off('boundsChanged', this.updateDisplayBounds);
+      }
+    },
+    getConfig() {
+      const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+      let config = configStore.get(configId);
+      if (!config) {
+        config = new PlotConfigurationModel({
+          id: configId,
+          domainObject: this.domainObject,
+          openmct: this.openmct,
+          palette: this.colorPalette,
+          callback: (data) => {
+            this.data = data;
+          }
+        });
+        configStore.add(configId, config);
+      }
+
+      return config;
+    },
+    addSeries(series, index) {
+      const yAxisId = series.get('yAxisId');
+      this.updateAxisUsageCount(yAxisId, 1);
+      this.seriesModels[index] = series;
+      this.listenTo(series, 'change:xKey', this.setDisplayRange.bind(this, series), this);
+      this.listenTo(series, 'change:yKey', this.loadSeriesData.bind(this, series), this);
 
-            return config;
-        },
-        addSeries(series) {
-            this.listenTo(series, 'change:xKey', (xKey) => {
-                this.setDisplayRange(series, xKey);
-            }, this);
-            this.listenTo(series, 'change:yKey', () => {
-                this.loadSeriesData(series);
-            }, this);
+      this.listenTo(series, 'change:interpolate', this.loadSeriesData.bind(this, series), this);
+      this.listenTo(series, 'change:yAxisId', this.updateTicksAndSeriesForYAxis, this);
 
-            this.listenTo(series, 'change:interpolate', () => {
-                this.loadSeriesData(series);
-            }, this);
+      this.loadSeriesData(series);
+    },
 
-            this.loadSeriesData(series);
-        },
+    removeSeries(plotSeries, index) {
+      const yAxisId = plotSeries.get('yAxisId');
+      this.updateAxisUsageCount(yAxisId, -1);
+      this.seriesModels.splice(index, 1);
+      this.stopListening(plotSeries);
+    },
 
-        removeSeries(plotSeries) {
-            this.stopListening(plotSeries);
-        },
+    updateTicksAndSeriesForYAxis(newAxisId, oldAxisId) {
+      this.updateAxisUsageCount(oldAxisId, -1);
+      this.updateAxisUsageCount(newAxisId, 1);
+
+      const foundYAxis = this.yAxes.find((yAxis) => yAxis.id === oldAxisId);
+      if (foundYAxis.seriesCount === 0) {
+        this.onYTickWidthChange({
+          width: foundYAxis.tickWidth,
+          yAxisId: foundYAxis.id
+        });
+      }
+    },
 
-        loadSeriesData(series) {
-            if (this.$parent.$refs.plotWrapper.offsetWidth === 0) {
-                this.scheduleLoad(series);
+    updateAxisUsageCount(yAxisId, updateCountBy) {
+      const foundYAxis = this.yAxes.find((yAxis) => yAxis.id === yAxisId);
+      if (foundYAxis) {
+        foundYAxis.seriesCount = foundYAxis.seriesCount + updateCountBy;
+      }
+    },
+    loadAnnotationsIfAllowed() {
+      if (this.annotationViewingAndEditingAllowed) {
+        this.loadAnnotations();
+      }
+    },
+    async loadAnnotations() {
+      if (!this.openmct.annotation.getAvailableTags().length) {
+        // don't bother loading annotations if there are no tags
+        return;
+      }
+
+      const rawAnnotationsForPlot = [];
+      await Promise.all(
+        this.seriesModels.map(async (seriesModel) => {
+          const seriesAnnotations = await this.openmct.annotation.getAnnotations(
+            seriesModel.model.identifier,
+            this.abortController.signal
+          );
+          rawAnnotationsForPlot.push(...seriesAnnotations);
+        })
+      );
+      if (rawAnnotationsForPlot) {
+        this.annotatedPointsBySeries = this.findAnnotationPoints(rawAnnotationsForPlot);
+      }
+      this.annotationsEverLoaded = true;
+    },
+    loadSeriesData(series) {
+      //this check ensures that duplicate requests don't happen on load
+      if (!this.timeContext) {
+        return;
+      }
+
+      if (this.$parent.$refs.plotWrapper.offsetWidth === 0) {
+        this.scheduleLoad(series);
+
+        return;
+      }
+
+      this.offsetWidth = this.$parent.$refs.plotWrapper.offsetWidth;
+
+      this.startLoading();
+      const bounds = this.timeContext.bounds();
+      const options = {
+        size: this.$parent.$refs.plotWrapper.offsetWidth,
+        domain: this.config.xAxis.get('key'),
+        start: bounds.start,
+        end: bounds.end
+      };
+
+      series.load(options).then(this.stopLoading.bind(this));
+    },
 
-                return;
+    loadMoreData(range, purge) {
+      this.config.series.forEach((plotSeries) => {
+        this.offsetWidth = this.$parent.$refs.plotWrapper.offsetWidth;
+        this.startLoading();
+        plotSeries
+          .load({
+            size: this.offsetWidth,
+            start: range.min,
+            end: range.max,
+            domain: this.config.xAxis.get('key')
+          })
+          .then(this.stopLoading.bind(this));
+        if (purge) {
+          plotSeries.purgeRecordsOutsideRange(range);
+        }
+      });
+    },
+
+    scheduleLoad(series) {
+      if (!this.scheduledLoads) {
+        this.startLoading();
+        this.scheduledLoads = [];
+        this.checkForSize = setInterval(
+          function () {
+            if (this.$parent.$refs.plotWrapper.offsetWidth === 0) {
+              return;
             }
 
-            this.startLoading();
-            const options = {
-                size: this.$parent.$refs.plotWrapper.offsetWidth,
-                domain: this.config.xAxis.get('key')
-            };
+            this.stopLoading();
+            this.scheduledLoads.forEach(this.loadSeriesData, this);
+            delete this.scheduledLoads;
+            clearInterval(this.checkForSize);
+            delete this.checkForSize;
+          }.bind(this)
+        );
+      }
 
-            series.load(options)
-                .then(this.stopLoading.bind(this));
-        },
-
-        loadMoreData(range, purge) {
-            this.config.series.forEach(plotSeries => {
-                this.startLoading();
-                plotSeries.load({
-                    size: this.$parent.$refs.plotWrapper.offsetWidth,
-                    start: range.min,
-                    end: range.max,
-                    domain: this.config.xAxis.get('key')
-                })
-                    .then(this.stopLoading());
-                if (purge) {
-                    plotSeries.purgeRecordsOutsideRange(range);
-                }
-            });
-        },
-
-        scheduleLoad(series) {
-            if (!this.scheduledLoads) {
-                this.startLoading();
-                this.scheduledLoads = [];
-                this.checkForSize = setInterval(function () {
-                    if (this.$parent.$refs.plotWrapper.offsetWidth === 0) {
-                        return;
-                    }
-
-                    this.stopLoading();
-                    this.scheduledLoads.forEach(this.loadSeriesData, this);
-                    delete this.scheduledLoads;
-                    clearInterval(this.checkForSize);
-                    delete this.checkForSize;
-                }.bind(this));
-            }
+      if (this.scheduledLoads.indexOf(series) === -1) {
+        this.scheduledLoads.push(series);
+      }
+    },
 
-            if (this.scheduledLoads.indexOf(series) === -1) {
-                this.scheduledLoads.push(series);
-            }
-        },
-
-        startLoading() {
-            this.pending += 1;
-            this.updateLoading();
-        },
-
-        stopLoading() {
-        //TODO: Is Vue.$nextTick ok to replace $scope.$evalAsync?
-            this.$nextTick().then(() => {
-                this.pending -= 1;
-                this.updateLoading();
-            });
-        },
+    startLoading() {
+      this.pending += 1;
+      this.updateLoading();
+    },
 
-        updateLoading() {
-            this.$emit('loadingUpdated', this.pending > 0);
-        },
+    stopLoading() {
+      this.pending -= 1;
+      this.updateLoading();
+      if (this.pending === 0) {
+        this.EventBus.$emit('loading-complete');
+      }
+    },
 
-        updateFiltersAndResubscribe(updatedFilters) {
-            this.config.series.forEach(function (series) {
-                series.updateFiltersAndRefresh(updatedFilters[series.keyString]);
-            });
-        },
+    updateLoading() {
+      this.$emit('loading-updated', this.pending > 0);
+    },
 
-        clearData() {
-            this.config.series.forEach(function (series) {
-                series.reset();
-            });
-        },
+    updateFiltersAndResubscribe(updatedFilters) {
+      this.config.series.forEach(function (series) {
+        series.updateFiltersAndRefresh(updatedFilters[series.keyString]);
+      });
+    },
 
-        setDisplayRange(series, xKey) {
-            if (this.config.series.length !== 1) {
-                return;
-            }
+    clearSeries() {
+      this.config.series.forEach(function (series) {
+        series.reset();
+      });
+    },
+    shareCommonParent(domainObjectToFind) {
+      return false;
+    },
+    compositionPathContainsId(domainObjectToFind) {
+      if (!domainObjectToFind.composition) {
+        return false;
+      }
+
+      return domainObjectToFind.composition.some((compositionIdentifier) => {
+        return this.openmct.objects.areIdsEqual(
+          compositionIdentifier,
+          this.domainObject.identifier
+        );
+      });
+    },
 
-            const displayRange = series.getDisplayRange(xKey);
-            this.config.xAxis.set('range', displayRange);
-        },
-        updateRealTime(clock) {
-            this.isRealTime = clock !== undefined;
-        },
-
-        /**
-       * Track latest display bounds.  Forces update when not receiving ticks.
-       */
-        updateDisplayBounds(bounds, isTick) {
-            const newRange = {
-                min: bounds.start,
-                max: bounds.end
-            };
-            this.config.xAxis.set('range', newRange);
-            if (!isTick) {
-                this.skipReloadOnInteraction = true;
-                this.clear();
-                this.skipReloadOnInteraction = false;
-                this.loadMoreData(newRange, true);
-            } else {
-                // If we're not panning or zooming (time conductor and plot x-axis times are not out of sync)
-                // Drop any data that is more than 1x (max-min) before min.
-                // Limit these purges to once a second.
-                const isPanningOrZooming = this.isTimeOutOfSync;
-                const purgeRecords = !isPanningOrZooming && (!this.nextPurge || (this.nextPurge < Date.now()));
-                if (purgeRecords) {
-                    const keepRange = {
-                        min: newRange.min - (newRange.max - newRange.min),
-                        max: newRange.max
-                    };
-                    this.config.series.forEach(function (series) {
-                        series.purgeRecordsOutsideRange(keepRange);
-                    });
-                    this.nextPurge = Date.now() + 1000;
-                }
-            }
-        },
-
-        /**
-       * Handle end of user viewport change: load more data for current display
-       * bounds, and mark view as synchronized if bounds match configured bounds.
-       */
-        userViewportChangeEnd() {
-            const xDisplayRange = this.config.xAxis.get('displayRange');
-            const xRange = this.config.xAxis.get('range');
-
-            if (!this.skipReloadOnInteraction) {
-                this.loadMoreData(xDisplayRange);
-            }
+    clearData(domainObjectToClear) {
+      // If we don't have an object to clear (global), or the IDs are equal, just clear the data.
+      // If we have an object to clear, but the IDs don't match, we need to check the composition
+      // of the object we've been asked to clear to see if it contains the id we're looking for.
+      // This happens with stacked plots for example.
+      // If we find the ID, clear the plot.
+      if (
+        !domainObjectToClear ||
+        this.openmct.objects.areIdsEqual(
+          domainObjectToClear.identifier,
+          this.domainObject.identifier
+        ) ||
+        this.compositionPathContainsId(domainObjectToClear)
+      ) {
+        this.clearSeries();
+      }
+    },
 
-            this.synchronized(xRange.min === xDisplayRange.min
-            && xRange.max === xDisplayRange.max);
-        },
+    setDisplayRange(series, xKey) {
+      if (this.config.series.models.length !== 1) {
+        return;
+      }
 
-        /**
-       * Getter/setter for "synchronized" value.  If not synchronized and
-       * time conductor is in clock mode, will mark objects as unsynced so that
-       * displays can update accordingly.
-       */
-        synchronized(value) {
-            const isLocalClock = this.openmct.time.clock();
+      const displayRange = series.getDisplayRange(xKey);
+      this.config.xAxis.set('range', displayRange);
+    },
+    updateMode() {
+      this.isRealTime = this.timeContext.isRealTime();
+    },
 
-            if (typeof value !== 'undefined') {
-                this._synchronized = value;
-                this.isTimeOutOfSync = value !== true;
+    /**
+     * Track latest display bounds.  Forces update when not receiving ticks.
+     */
+    updateDisplayBounds(bounds, isTick) {
+      const newRange = {
+        min: bounds.start,
+        max: bounds.end
+      };
+      this.config.xAxis.set('range', newRange);
+      if (!isTick) {
+        this.annotatedPointsBySeries = {};
+        this.clearPanZoomHistory();
+        this.synchronizeIfBoundsMatch();
+        this.loadMoreData(newRange, true);
+      } else {
+        // If we're not panning or zooming (time conductor and plot x-axis times are not out of sync)
+        // Drop any data that is more than 1x (max-min) before min.
+        // Limit these purges to once a second.
+        const isPanningOrZooming = this.isTimeOutOfSync;
+        const purgeRecords =
+          !isPanningOrZooming && (!this.nextPurge || this.nextPurge < Date.now());
+        if (purgeRecords) {
+          const keepRange = {
+            min: newRange.min - (newRange.max - newRange.min),
+            max: newRange.max
+          };
+          this.config.series.forEach(function (series) {
+            series.purgeRecordsOutsideRange(keepRange);
+          });
+          this.nextPurge = Date.now() + 1000;
+        }
+      }
+    },
 
-                const isUnsynced = isLocalClock && !value;
-                this.setStatus(isUnsynced);
-            }
+    /**
+     * Handle end of user viewport change: load more data for current display
+     * bounds, and mark view as synchronized if necessary.
+     */
+    userViewportChangeEnd() {
+      this.synchronizeIfBoundsMatch();
+      const xDisplayRange = this.config.xAxis.get('displayRange');
+      this.loadMoreData(xDisplayRange);
+    },
 
-            return this._synchronized;
-        },
-
-        setStatus(isNotInSync) {
-            const outOfSync = isNotInSync === true
-                || this.isTimeOutOfSync === true
-                || this.isFrozen === true;
-            if (outOfSync === true) {
-                this.openmct.status.set(this.domainObject.identifier, 'timeconductor-unsynced');
-            } else {
-                this.openmct.status.set(this.domainObject.identifier, '');
-            }
-        },
+    /**
+     * mark view as synchronized if bounds match configured bounds.
+     */
+    synchronizeIfBoundsMatch() {
+      const xDisplayRange = this.config.xAxis.get('displayRange');
+      const xRange = this.config.xAxis.get('range');
+      this.synchronized(xRange.min === xDisplayRange.min && xRange.max === xDisplayRange.max);
+    },
 
-        initCanvas() {
-            if (this.canvas) {
-                this.stopListening(this.canvas);
-            }
+    /**
+     * Getter/setter for "synchronized" value.  If not synchronized and
+     * time conductor is in clock mode, will mark objects as unsynced so that
+     * displays can update accordingly.
+     */
+    synchronized(value) {
+      const isRealTime = this.timeContext.isRealTime();
 
-            this.canvas = this.$refs.chartContainer.querySelectorAll('canvas')[1];
+      if (typeof value !== 'undefined') {
+        this._synchronized = value;
+        this.isTimeOutOfSync = value !== true;
 
-            if (!this.options.compact) {
-                this.listenTo(this.canvas, 'mousemove', this.trackMousePosition, this);
-                this.listenTo(this.canvas, 'mouseleave', this.untrackMousePosition, this);
-                this.listenTo(this.canvas, 'mousedown', this.onMouseDown, this);
-                this.listenTo(this.canvas, 'wheel', this.wheelZoom, this);
-            }
-        },
+        const isUnsynced = isRealTime && !value;
+        this.setStatus(isUnsynced);
+      }
 
-        initialize() {
-            _.debounce(this.handleWindowResize, 400);
-            this.plotContainerResizeObserver = new ResizeObserver(this.handleWindowResize);
-            this.plotContainerResizeObserver.observe(this.$parent.$refs.plotWrapper);
+      return this._synchronized;
+    },
 
-            // Setup canvas etc.
-            this.xScale = new LinearScale(this.config.xAxis.get('displayRange'));
-            this.yScale = new LinearScale(this.config.yAxis.get('displayRange'));
+    setStatus(isNotInSync) {
+      const outOfSync =
+        isNotInSync === true || this.isTimeOutOfSync === true || this.isFrozen === true;
+      if (outOfSync === true) {
+        this.openmct.status.set(this.domainObject.identifier, 'timeconductor-unsynced');
+      } else {
+        this.openmct.status.set(this.domainObject.identifier, '');
+      }
+    },
 
-            this.pan = undefined;
-            this.marquee = undefined;
+    initCanvas() {
+      if (this.canvas) {
+        this.stopListening(this.canvas);
+      }
 
-            this.chartElementBounds = undefined;
-            this.tickUpdate = false;
+      this.canvas = this.$refs.chartContainer.querySelectorAll('canvas')[1];
 
-            this.initCanvas();
+      if (!this.options.compact) {
+        this.listenTo(this.canvas, 'mousemove', this.trackMousePosition, this);
+        this.listenTo(this.canvas, 'mouseleave', this.untrackMousePosition, this);
+        this.listenTo(this.canvas, 'mousedown', this.onMouseDown, this);
+        this.listenTo(this.canvas, 'click', this.selectNearbyAnnotations, this);
+        this.listenTo(this.canvas, 'wheel', this.wheelZoom, this);
+      }
+    },
 
-            this.config.yAxisLabel = this.config.yAxis.get('label');
+    marqueeAnnotations(annotationsToSelect) {
+      annotationsToSelect.forEach((annotationToSelect) => {
+        annotationToSelect.targets.forEach((target) => {
+          const targetKeyString = target.keyString;
+          const series = this.seriesModels.find(
+            (seriesModel) => seriesModel.keyString === targetKeyString
+          );
+          if (!series) {
+            return;
+          }
+
+          const yAxisId = series.get('yAxisId');
+          const rectangle = {
+            start: {
+              x: target.minX,
+              y: [target.minY],
+              yAxisIds: [yAxisId]
+            },
+            end: {
+              x: target.maxX,
+              y: [target.maxY],
+              yAxisIds: [yAxisId]
+            },
+            color: [1, 1, 1, 0.1]
+          };
+          this.rectangles.push(rectangle);
+        });
+      });
+    },
+    gatherNearbyAnnotations() {
+      const nearbyAnnotations = [];
+      this.config.series.models.forEach((series) => {
+        if (series?.closest?.annotationsById) {
+          Object.values(series.closest.annotationsById).forEach((closeAnnotation) => {
+            const addedAnnotationAlready = nearbyAnnotations.some((annotation) => {
+              return (
+                _.isEqual(annotation.targets, closeAnnotation.targets) &&
+                _.isEqual(annotation.tags, closeAnnotation.tags)
+              );
+            });
+            if (!addedAnnotationAlready) {
+              nearbyAnnotations.push(closeAnnotation);
+            }
+          });
+        }
+      });
 
-            this.cursorGuideVertical = this.$refs.cursorGuideVertical;
-            this.cursorGuideHorizontal = this.$refs.cursorGuideHorizontal;
+      return nearbyAnnotations;
+    },
 
-            this.listenTo(this.config.xAxis, 'change:displayRange', this.onXAxisChange, this);
-            this.listenTo(this.config.yAxis, 'change:displayRange', this.onYAxisChange, this);
-        },
+    prepareExistingAnnotationSelection(annotations) {
+      const targetDomainObjects = this.config.series.models.map((series) => {
+        return series.domainObject;
+      });
+
+      const targetDetails = [];
+      const uniqueBoundsAnnotations = [];
+      annotations.forEach((annotation) => {
+        // for each target, push toRaw
+        annotation.targets.forEach((target) => {
+          targetDetails.push(toRaw(target));
+        });
+
+        const boundingBoxAlreadyAdded = uniqueBoundsAnnotations.some((existingAnnotation) => {
+          const existingBoundingBox = Object.values(existingAnnotation.targets)[0];
+          const newBoundingBox = Object.values(annotation.targets)[0];
+
+          return (
+            existingBoundingBox.minX === newBoundingBox.minX &&
+            existingBoundingBox.minY === newBoundingBox.minY &&
+            existingBoundingBox.maxX === newBoundingBox.maxX &&
+            existingBoundingBox.maxY === newBoundingBox.maxY
+          );
+        });
+        if (!boundingBoxAlreadyAdded) {
+          uniqueBoundsAnnotations.push(annotation);
+        }
+      });
+      this.marqueeAnnotations(uniqueBoundsAnnotations);
 
-        onXAxisChange(displayBounds) {
-            if (displayBounds) {
-                this.xScale.domain(displayBounds);
-            }
-        },
+      return {
+        targetDomainObjects,
+        targetDetails
+      };
+    },
+    initialize() {
+      this.handleWindowResize = _.debounce(this.handleWindowResize, 500);
+      this.plotContainerResizeObserver = new ResizeObserver(this.handleWindowResize);
+      this.plotContainerResizeObserver.observe(this.$parent.$refs.plotWrapper);
+
+      // Setup canvas etc.
+      this.xScale = new LinearScale(this.config.xAxis.get('displayRange'));
+      this.yScale = [];
+      this.yAxisListWithRange.forEach((yAxis) => {
+        this.yScale.push({
+          id: yAxis.id,
+          scale: new LinearScale(yAxis.get('displayRange'))
+        });
+      });
+
+      this.pan = undefined;
+      this.marquee = undefined;
+
+      this.chartElementBounds = undefined;
+      this.tickUpdate = false;
+
+      this.initCanvas();
+
+      this.config.yAxisLabel = this.config.yAxis.get('label');
+
+      this.listenTo(this.config.xAxis, 'change:displayRange', this.onXAxisChange, this);
+      this.yAxisListWithRange.forEach((yAxis) => {
+        this.listenTo(yAxis, 'change:displayRange', this.onYAxisChange.bind(this, yAxis.id), this);
+      });
+    },
 
-        onYAxisChange(displayBounds) {
-            if (displayBounds) {
-                this.yScale.domain(displayBounds);
-            }
-        },
-
-        onTickWidthChange(width, fromDifferentObject) {
-            if (fromDifferentObject) {
-                // Always accept tick width if it comes from a different object.
-                this.tickWidth = width;
-            } else {
-                // Otherwise, only accept tick with if it's larger.
-                const newWidth = Math.max(width, this.tickWidth);
-                if (newWidth !== this.tickWidth) {
-                    this.tickWidth = newWidth;
-                }
-            }
+    onXAxisChange(displayBounds) {
+      if (displayBounds) {
+        this.xScale.domain(displayBounds);
+      }
+    },
 
-            this.$emit('plotTickWidth', this.tickWidth);
-        },
+    onYAxisChange(yAxisId, displayBounds) {
+      if (displayBounds) {
+        this.yScale
+          .filter((yAxis) => yAxis.id === yAxisId)
+          .forEach((yAxis) => {
+            yAxis.scale.domain(displayBounds);
+          });
+      }
+    },
 
-        trackMousePosition(event) {
-            this.trackChartElementBounds(event);
-            this.xScale.range({
-                min: 0,
-                max: this.chartElementBounds.width
-            });
-            this.yScale.range({
-                min: 0,
-                max: this.chartElementBounds.height
-            });
+    /**
+     * Aggregate widths of all left and right y axes and send them up to any parent plots
+     * @param {Object} tickWidthWithYAxisId - the width and yAxisId of the tick bar
+     * @param fromDifferentObject
+     */
+    onYTickWidthChange(tickWidthWithYAxisId, fromDifferentObject) {
+      const { width, yAxisId } = tickWidthWithYAxisId;
+      if (yAxisId) {
+        const index = this.yAxes.findIndex((yAxis) => yAxis.id === yAxisId);
+        if (fromDifferentObject) {
+          // Always accept tick width if it comes from a different object.
+          this.yAxes[index].tickWidth = width;
+        } else {
+          // Otherwise, only accept tick with if it's larger.
+          const newWidth = Math.max(width, this.yAxes[index].tickWidth);
+          if (width !== this.yAxes[index].tickWidth) {
+            this.yAxes[index].tickWidth = newWidth;
+          }
+        }
 
-            this.positionOverElement = {
-                x: event.clientX - this.chartElementBounds.left,
-                y: this.chartElementBounds.height
-              - (event.clientY - this.chartElementBounds.top)
-            };
+        const id = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+        const leftTickWidth = this.yAxes
+          .filter((yAxis) => yAxis.id < 3)
+          .reduce((previous, current) => {
+            return previous + current.tickWidth;
+          }, 0);
+        const rightTickWidth = this.yAxes
+          .filter((yAxis) => yAxis.id > 2)
+          .reduce((previous, current) => {
+            return previous + current.tickWidth;
+          }, 0);
+        this.$emit(
+          'plot-y-tick-width',
+          {
+            hasMultipleLeftAxes: this.hasMultipleLeftAxes,
+            leftTickWidth,
+            rightTickWidth
+          },
+          id
+        );
+      }
+    },
 
-            this.positionOverPlot = {
-                x: this.xScale.invert(this.positionOverElement.x),
-                y: this.yScale.invert(this.positionOverElement.y)
-            };
+    toggleSeriesForYAxis({ id, visible }) {
+      //if toggling to visible, re-fetch the data for the series that are part of this y Axis
+      if (visible === true) {
+        this.config.series.models
+          .filter((model) => model.get('yAxisId') === id)
+          .forEach(this.loadSeriesData, this);
+      }
+
+      this.yAxisIdVisibility[id] = visible;
+      this.hiddenYAxisIds = Object.keys(this.yAxisIdVisibility)
+        .map(Number)
+        .filter((key) => {
+          return this.yAxisIdVisibility[key] === false;
+        });
+    },
 
-            if (this.cursorGuide) {
-                this.updateCrosshairs(event);
-            }
+    trackMousePosition(event) {
+      this.trackChartElementBounds(event);
+      this.xScale.range({
+        min: 0,
+        max: this.chartElementBounds.width
+      });
+      this.yScale.forEach((yAxis) => {
+        yAxis.scale.range({
+          min: 0,
+          max: this.chartElementBounds.height
+        });
+      });
+
+      this.positionOverElement = {
+        x: event.clientX - this.chartElementBounds.left,
+        y: this.chartElementBounds.height - (event.clientY - this.chartElementBounds.top)
+      };
+
+      const yLocationForPositionOverPlot = this.yScale.map((yAxis) =>
+        yAxis.scale.invert(this.positionOverElement.y)
+      );
+      const yAxisIds = this.yScale.map((yAxis) => yAxis.id);
+      // Also store the order of yAxisIds so that we can associate the y location to the yAxis
+      this.positionOverPlot = {
+        x: this.xScale.invert(this.positionOverElement.x),
+        y: yLocationForPositionOverPlot,
+        yAxisIds
+      };
+
+      if (this.cursorGuide) {
+        this.updateCrosshairs(event);
+      }
+
+      this.highlightValues(this.positionOverPlot.x);
+      this.updateMarquee();
+      this.updatePan();
+      event.preventDefault();
+    },
 
-            this.highlightValues(this.positionOverPlot.x);
-            this.updateMarquee();
-            this.updatePan();
-            event.preventDefault();
-        },
+    getYPositionForYAxis(object, yAxis) {
+      const index = object.yAxisIds.findIndex((yAxisId) => yAxisId === yAxis.get('id'));
 
-        updateCrosshairs(event) {
-            this.cursorGuideVertical.style.left = (event.clientX - this.chartElementBounds.x) + 'px';
-            this.cursorGuideHorizontal.style.top = (event.clientY - this.chartElementBounds.y) + 'px';
-        },
+      return object.y[index];
+    },
 
-        trackChartElementBounds(event) {
-            if (event.target === this.canvas) {
-                this.chartElementBounds = event.target.getBoundingClientRect();
-            }
-        },
+    updateCrosshairs(event) {
+      this.$refs.cursorGuideVertical.style.left = event.clientX - this.chartElementBounds.x + 'px';
+      this.$refs.cursorGuideHorizontal.style.top = event.clientY - this.chartElementBounds.y + 'px';
+    },
 
-        onPlotHighlightSet($e, point) {
-            if (point === this.highlightPoint) {
-                return;
-            }
+    trackChartElementBounds(event) {
+      if (event.target === this.canvas) {
+        this.chartElementBounds = event.target.getBoundingClientRect();
+      }
+    },
 
-            this.highlightValues(point);
-        },
+    onPlotHighlightSet($e, point) {
+      if (point === this.highlightPoint) {
+        return;
+      }
 
-        highlightValues(point) {
-            this.highlightPoint = point;
-            // TODO: used in StackedPlotController
-            this.$emit('plotHighlightUpdate', point);
-            if (this.lockHighlightPoint) {
-                return;
-            }
+      this.highlightValues(point);
+    },
 
-            if (!point) {
-                this.highlights = [];
-                this.config.series.models.forEach(series => delete series.closest);
-            } else {
-                this.highlights = this.config.series.models
-                    .filter(series => series.data.length > 0)
-                    .map(series => {
-                        series.closest = series.nearestPoint(point);
-
-                        return {
-                            series: series,
-                            point: series.closest
-                        };
-                    });
-            }
-        },
+    highlightValues(point) {
+      this.highlightPoint = point;
+      if (this.lockHighlightPoint) {
+        return;
+      }
+
+      if (!point) {
+        this.highlights = [];
+        this.config.series.models.forEach((series) => delete series.closest);
+      } else {
+        this.highlights = this.config.series.models
+          .filter((series) => series.getSeriesData().length > 0)
+          .map((series) => {
+            series.closest = series.nearestPoint(point);
+
+            return {
+              seriesKeyString: series.keyString,
+              point: series.closest
+            };
+          });
+      }
 
-        untrackMousePosition() {
-            this.positionOverElement = undefined;
-            this.positionOverPlot = undefined;
-            this.highlightValues();
-        },
+      this.$emit('highlights', this.highlights);
+    },
 
-        onMouseDown(event) {
-        // do not monitor drag events on browser context click
-            if (event.ctrlKey) {
-                return;
-            }
+    untrackMousePosition() {
+      this.positionOverElement = undefined;
+      this.positionOverPlot = undefined;
+      this.highlightValues();
+    },
 
-            this.listenTo(window, 'mouseup', this.onMouseUp, this);
-            this.listenTo(window, 'mousemove', this.trackMousePosition, this);
-            if (event.altKey) {
-                return this.startPan(event);
-            } else {
-                return this.startMarquee(event);
-            }
-        },
+    onMouseDown(event) {
+      // do not monitor drag events on browser context click
+      if (event.ctrlKey) {
+        return;
+      }
+
+      this.listenTo(window, 'mouseup', this.onMouseUp, this);
+      this.listenTo(window, 'mousemove', this.trackMousePosition, this);
+
+      // track frozen state on mouseDown to be read on mouseUp
+      const isFrozen =
+        this.config.xAxis.get('frozen') === true && this.config.yAxis.get('frozen') === true;
+      this.isFrozenOnMouseDown = isFrozen;
+
+      if (event.altKey && !event.shiftKey) {
+        return this.startPan(event);
+      } else if (event.altKey && event.shiftKey) {
+        this.freeze();
+
+        return this.startMarquee(event, true);
+      } else {
+        return this.startMarquee(event, false);
+      }
+    },
 
-        onMouseUp(event) {
-            this.stopListening(window, 'mouseup', this.onMouseUp, this);
-            this.stopListening(window, 'mousemove', this.trackMousePosition, this);
+    onMouseUp(event) {
+      this.stopListening(window, 'mouseup', this.onMouseUp, this);
+      this.stopListening(window, 'mousemove', this.trackMousePosition, this);
+
+      if (this.isMouseClick() && event.shiftKey) {
+        this.lockHighlightPoint = !this.lockHighlightPoint;
+        this.$emit('lock-highlight-point', this.lockHighlightPoint);
+      }
+
+      if (this.pan) {
+        return this.endPan(event);
+      }
+
+      if (this.marquee) {
+        this.endMarquee(event);
+      }
+
+      // resume the plot if no pan, zoom, or drag action is taken
+      // needs to follow endMarquee so that plotHistory is pruned
+      const isAction = Boolean(this.plotHistory.length);
+      if (!isAction && !this.isFrozenOnMouseDown) {
+        this.clearPanZoomHistory();
+        this.synchronizeIfBoundsMatch();
+      }
+    },
 
-            if (this.isMouseClick()) {
-                this.lockHighlightPoint = !this.lockHighlightPoint;
-            }
+    isMouseClick() {
+      if (!this.marquee) {
+        return false;
+      }
 
-            if (this.pan) {
-                return this.endPan(event);
-            }
+      const { start, end } = this.marquee;
+      const someYPositionOverPlot = start.y.some((y) => y);
 
-            if (this.marquee) {
-                return this.endMarquee(event);
-            }
-        },
+      return start.x === end.x && someYPositionOverPlot;
+    },
 
-        isMouseClick() {
-            if (!this.marquee) {
-                return false;
-            }
+    updateMarquee() {
+      if (!this.marquee) {
+        return;
+      }
 
-            const { start, end } = this.marquee;
+      this.marquee.end = this.positionOverPlot;
+      this.marquee.endPixels = this.positionOverElement;
+    },
 
-            return start.x === end.x && start.y === end.y;
-        },
+    startMarquee(event, annotationEvent) {
+      this.rectangles = [];
+      this.annotationSelectionsBySeries = {};
+      this.canvas.classList.remove('plot-drag');
+      this.canvas.classList.add('plot-marquee');
+
+      this.trackMousePosition(event);
+      if (this.positionOverPlot) {
+        this.freeze();
+        this.marquee = {
+          startPixels: this.positionOverElement,
+          endPixels: this.positionOverElement,
+          start: this.positionOverPlot,
+          end: this.positionOverPlot,
+          color: [1, 1, 1, 0.25]
+        };
+        if (annotationEvent) {
+          this.marquee.annotationEvent = true;
+        }
 
-        updateMarquee() {
-            if (!this.marquee) {
+        this.rectangles.push(this.marquee);
+        this.trackHistory();
+      }
+    },
+    selectNearbyAnnotations(event) {
+      // need to stop propagation right away to prevent selecting the plot itself
+      event.stopPropagation();
+
+      const nearbyAnnotations = this.gatherNearbyAnnotations();
+
+      if (
+        this.annotationViewingAndEditingAllowed &&
+        Object.keys(this.annotationSelectionsBySeries).length
+      ) {
+        //no annotations were found, but we are adding some now
+        return;
+      }
+
+      if (this.annotationViewingAndEditingAllowed && nearbyAnnotations.length) {
+        //show annotations if some were found
+        const { targetDomainObjects, targetDetails } =
+          this.prepareExistingAnnotationSelection(nearbyAnnotations);
+        this.selectPlotAnnotations({
+          targetDetails,
+          targetDomainObjects,
+          annotations: nearbyAnnotations
+        });
+
+        return;
+      }
+
+      //Fall through to here if either there is no new selection add tags or no existing annotations were retrieved
+      this.selectPlot();
+    },
+    selectPlot() {
+      // should show plot itself if we didn't find any annotations
+      const selection = this.createPathSelection();
+      this.openmct.selection.select(selection, true);
+    },
+    createPathSelection() {
+      let selection = [];
+      selection.unshift({
+        element: this.$el,
+        context: {
+          item: this.domainObject
+        }
+      });
+      this.path.forEach((pathObject, index) => {
+        selection.push({
+          element: this.openmct.layout.$refs.browseObject.$el,
+          context: {
+            item: pathObject
+          }
+        });
+      });
+
+      return selection;
+    },
+    selectPlotAnnotations({ targetDetails, targetDomainObjects, annotations }) {
+      const annotationContext = {
+        type: 'clicked-on-plot-selection',
+        targetDetails,
+        targetDomainObjects,
+        annotations,
+        annotationType: this.openmct.annotation.ANNOTATION_TYPES.PLOT_SPATIAL,
+        onAnnotationChange: this.onAnnotationChange
+      };
+      const selection = this.createPathSelection();
+      if (
+        selection.length &&
+        this.openmct.objects.areIdsEqual(
+          selection[0].context.item.identifier,
+          this.domainObject.identifier
+        )
+      ) {
+        selection[0].context = {
+          ...selection[0].context,
+          ...annotationContext
+        };
+      } else {
+        selection.unshift({
+          element: this.$el,
+          context: {
+            item: this.domainObject,
+            ...annotationContext
+          }
+        });
+      }
+
+      this.openmct.selection.select(selection, true);
+
+      document.body.addEventListener('click', this.cancelSelection);
+    },
+    selectNewPlotAnnotations(boundingBoxPerYAxis, pointsInBoxBySeries, event) {
+      let targetDomainObjects = [];
+      let targetDetails = [];
+      let annotations = [];
+      Object.keys(pointsInBoxBySeries).forEach((seriesKey) => {
+        const seriesModel = this.getSeries(seriesKey);
+        const boundingBoxWithId = boundingBoxPerYAxis.find(
+          (box) => box.id === seriesModel.get('yAxisId')
+        );
+        targetDetails.push({ ...boundingBoxWithId?.boundingBox, keyString: seriesKey });
+
+        targetDomainObjects.push(seriesModel.domainObject);
+      });
+      this.selectPlotAnnotations({
+        targetDetails,
+        targetDomainObjects,
+        annotations
+      });
+    },
+    findAnnotationPoints(rawAnnotations) {
+      const annotationsBySeries = {};
+      rawAnnotations.forEach((rawAnnotation) => {
+        if (rawAnnotation.targets) {
+          const targetValues = rawAnnotation.targets;
+          const targetKeys = rawAnnotation.targets.map((target) => target.keyString);
+          if (targetValues && targetValues.length) {
+            let boundingBoxPerYAxis = [];
+            targetValues.forEach((boundingBox, index) => {
+              const seriesId = targetKeys[index];
+              const series = this.seriesModels.find(
+                (seriesModel) => seriesModel.keyString === seriesId
+              );
+              if (!series) {
                 return;
-            }
+              }
+              if (!annotationsBySeries[seriesId]) {
+                annotationsBySeries[seriesId] = [];
+              }
+
+              boundingBoxPerYAxis.push({
+                id: series.get('yAxisId'),
+                boundingBox
+              });
+            });
 
-            this.marquee.end = this.positionOverPlot;
-            this.marquee.endPixels = this.positionOverElement;
-        },
-
-        startMarquee(event) {
-            this.canvas.classList.remove('plot-drag');
-            this.canvas.classList.add('plot-marquee');
-
-            this.trackMousePosition(event);
-            if (this.positionOverPlot) {
-                this.freeze();
-                this.marquee = {
-                    startPixels: this.positionOverElement,
-                    endPixels: this.positionOverElement,
-                    start: this.positionOverPlot,
-                    end: this.positionOverPlot,
-                    color: [1, 1, 1, 0.5]
-                };
-                this.rectangles.push(this.marquee);
-                this.trackHistory();
-            }
-        },
-
-        endMarquee() {
-            const startPixels = this.marquee.startPixels;
-            const endPixels = this.marquee.endPixels;
-            const marqueeDistance = Math.sqrt(
-                Math.pow(startPixels.x - endPixels.x, 2)
-            + Math.pow(startPixels.y - endPixels.y, 2)
+            const pointsInBoxBySeries = this.getPointsInBoxBySeries(
+              boundingBoxPerYAxis,
+              rawAnnotation
             );
-            // Don't zoom if mouse moved less than 7.5 pixels.
-            if (marqueeDistance > 7.5) {
-                this.config.xAxis.set('displayRange', {
-                    min: Math.min(this.marquee.start.x, this.marquee.end.x),
-                    max: Math.max(this.marquee.start.x, this.marquee.end.x)
-                });
-                this.config.yAxis.set('displayRange', {
-                    min: Math.min(this.marquee.start.y, this.marquee.end.y),
-                    max: Math.max(this.marquee.start.y, this.marquee.end.y)
-                });
-                this.userViewportChangeEnd();
-            } else {
-                // A history entry is created by startMarquee, need to remove
-                // if marquee zoom doesn't occur.
-                this.plotHistory.pop();
+            if (pointsInBoxBySeries && Object.values(pointsInBoxBySeries).length) {
+              Object.keys(pointsInBoxBySeries).forEach((seriesKeyString) => {
+                const pointsInBox = pointsInBoxBySeries[seriesKeyString];
+                if (pointsInBox && pointsInBox.length) {
+                  if (!annotationsBySeries[seriesKeyString]) {
+                    annotationsBySeries[seriesKeyString] = [];
+                  }
+                  annotationsBySeries[seriesKeyString].push(...pointsInBox);
+                }
+              });
             }
+          }
+        }
+      });
 
-            this.rectangles = [];
-            this.marquee = undefined;
-        },
-
-        zoom(zoomDirection, zoomFactor) {
-            const currentXaxis = this.config.xAxis.get('displayRange');
-            const currentYaxis = this.config.yAxis.get('displayRange');
+      return annotationsBySeries;
+    },
+    searchWithFlatbush(seriesData, seriesModel, boundingBox) {
+      const flatbush = new Flatbush(seriesData.length);
+      seriesData.forEach((point) => {
+        const x = seriesModel.getXVal(point);
+        const y = seriesModel.getYVal(point);
+        flatbush.add(x, y, x, y);
+      });
+      flatbush.finish();
+
+      const rangeResults = flatbush.search(
+        boundingBox.minX,
+        boundingBox.minY,
+        boundingBox.maxX,
+        boundingBox.maxY
+      );
+
+      return rangeResults;
+    },
+    getSeries(keyStringToFind) {
+      const foundSeries = this.seriesModels.find((series) => {
+        return series.keyString === keyStringToFind;
+      });
+      return foundSeries;
+    },
+    getPointsInBoxBySeries(boundingBoxPerYAxis, rawAnnotation) {
+      // load series models in KD-Trees
+      const searchResultsBySeries = {};
+      this.seriesModels.forEach((seriesModel) => {
+        const boundingBoxWithId = boundingBoxPerYAxis.find(
+          (box) => box.id === seriesModel.get('yAxisId')
+        );
+        const boundingBox = boundingBoxWithId?.boundingBox;
+        //Series was probably added after the last annotations were saved
+        if (!boundingBox) {
+          return;
+        }
 
-            // when there is no plot data, the ranges can be undefined
-            // in which case we should not perform zoom
-            if (!currentXaxis || !currentYaxis) {
-                return;
+        const seriesData = seriesModel.getSeriesData();
+        if (seriesData && seriesData.length) {
+          searchResultsBySeries[seriesModel.keyString] = [];
+          const rangeResults = this.searchWithFlatbush(seriesData, seriesModel, boundingBox);
+          rangeResults.forEach((id) => {
+            const seriesDatum = seriesData[id];
+            if (seriesDatum) {
+              const result = {
+                point: seriesDatum
+              };
+              searchResultsBySeries[seriesModel.keyString].push(result);
             }
 
-            this.freeze();
-            this.trackHistory();
-
-            const xAxisDist = (currentXaxis.max - currentXaxis.min) * zoomFactor;
-            const yAxisDist = (currentYaxis.max - currentYaxis.min) * zoomFactor;
-
-            if (zoomDirection === 'in') {
-                this.config.xAxis.set('displayRange', {
-                    min: currentXaxis.min + xAxisDist,
-                    max: currentXaxis.max - xAxisDist
-                });
-
-                this.config.yAxis.set('displayRange', {
-                    min: currentYaxis.min + yAxisDist,
-                    max: currentYaxis.max - yAxisDist
-                });
-            } else if (zoomDirection === 'out') {
-                this.config.xAxis.set('displayRange', {
-                    min: currentXaxis.min - xAxisDist,
-                    max: currentXaxis.max + xAxisDist
-                });
-
-                this.config.yAxis.set('displayRange', {
-                    min: currentYaxis.min - yAxisDist,
-                    max: currentYaxis.max + yAxisDist
-                });
+            if (rawAnnotation) {
+              if (!seriesDatum.annotationsById) {
+                seriesDatum.annotationsById = {};
+              }
+
+              const annotationKeyString = this.openmct.objects.makeKeyString(
+                rawAnnotation.identifier
+              );
+              seriesDatum.annotationsById[annotationKeyString] = rawAnnotation;
             }
+          });
+        }
+      });
 
-            this.userViewportChangeEnd();
-        },
+      return searchResultsBySeries;
+    },
+    endAnnotationMarquee(event) {
+      const boundingBoxPerYAxis = [];
+      this.yAxisListWithRange.forEach((yAxis, yIndex) => {
+        const minX = Math.min(this.marquee.start.x, this.marquee.end.x);
+        const minY = Math.min(this.marquee.start.y[yIndex], this.marquee.end.y[yIndex]);
+        const maxX = Math.max(this.marquee.start.x, this.marquee.end.x);
+        const maxY = Math.max(this.marquee.start.y[yIndex], this.marquee.end.y[yIndex]);
+        const boundingBox = {
+          minX,
+          minY,
+          maxX,
+          maxY
+        };
+        boundingBoxPerYAxis.push({
+          id: yAxis.get('id'),
+          boundingBox
+        });
+      });
+
+      const pointsInBoxBySeries = this.getPointsInBoxBySeries(boundingBoxPerYAxis);
+      if (!pointsInBoxBySeries || Object.values(pointsInBoxBySeries).length === 0) {
+        return;
+      }
+
+      this.annotationSelectionsBySeries = pointsInBoxBySeries;
+      this.selectNewPlotAnnotations(boundingBoxPerYAxis, this.annotationSelectionsBySeries, event);
+    },
+    endZoomMarquee() {
+      const startPixels = this.marquee.startPixels;
+      const endPixels = this.marquee.endPixels;
+      const marqueeDistance = Math.sqrt(
+        Math.pow(startPixels.x - endPixels.x, 2) + Math.pow(startPixels.y - endPixels.y, 2)
+      );
+      // Don't zoom if mouse moved less than 7.5 pixels.
+      if (marqueeDistance > 7.5) {
+        this.config.xAxis.set('displayRange', {
+          min: Math.min(this.marquee.start.x, this.marquee.end.x),
+          max: Math.max(this.marquee.start.x, this.marquee.end.x)
+        });
+        this.yAxisListWithRange.forEach((yAxis) => {
+          const yStartPosition = this.getYPositionForYAxis(this.marquee.start, yAxis);
+          const yEndPosition = this.getYPositionForYAxis(this.marquee.end, yAxis);
+          yAxis.set('displayRange', {
+            min: Math.min(yStartPosition, yEndPosition),
+            max: Math.max(yStartPosition, yEndPosition)
+          });
+        });
+        this.userViewportChangeEnd();
+      } else {
+        // A history entry is created by startMarquee, need to remove
+        // if marquee zoom doesn't occur.
+        this.plotHistory.pop();
+      }
+    },
+    endMarquee(event) {
+      if (this.marquee.annotationEvent) {
+        this.endAnnotationMarquee(event);
+      } else {
+        this.endZoomMarquee();
+        this.rectangles = [];
+      }
+
+      this.marquee = null;
+    },
 
-        wheelZoom(event) {
-            const ZOOM_AMT = 0.1;
-            event.preventDefault();
+    onAnnotationChange(annotations) {
+      if (this.marquee) {
+        this.marquee.annotationEvent = false;
+        this.endMarquee();
+      }
 
-            if (event.wheelDelta === undefined
-                || !this.positionOverPlot) {
-                return;
-            }
+      this.loadAnnotations().catch((err) => {
+        if (err.name !== 'AbortError') {
+          throw err;
+        }
+      });
+    },
 
-            let xDisplayRange = this.config.xAxis.get('displayRange');
-            let yDisplayRange = this.config.yAxis.get('displayRange');
+    zoom(zoomDirection, zoomFactor) {
+      const currentXaxis = this.config.xAxis.get('displayRange');
 
-            // when there is no plot data, the ranges can be undefined
-            // in which case we should not perform zoom
-            if (!xDisplayRange || !yDisplayRange) {
-                return;
-            }
+      let doesYAxisHaveRange = false;
+      this.yAxisListWithRange.forEach((yAxisModel) => {
+        if (yAxisModel.get('displayRange')) {
+          doesYAxisHaveRange = true;
+        }
+      });
+
+      // when there is no plot data, the ranges can be undefined
+      // in which case we should not perform zoom
+      if (!currentXaxis || !doesYAxisHaveRange) {
+        return;
+      }
+
+      this.freeze();
+      this.trackHistory();
+
+      const xAxisDist = (currentXaxis.max - currentXaxis.min) * zoomFactor;
+
+      if (zoomDirection === 'in') {
+        this.config.xAxis.set('displayRange', {
+          min: currentXaxis.min + xAxisDist,
+          max: currentXaxis.max - xAxisDist
+        });
+
+        this.yAxisListWithRange.forEach((yAxisModel) => {
+          const currentYaxis = yAxisModel.get('displayRange');
+          if (!currentYaxis) {
+            return;
+          }
+
+          const yAxisDist = (currentYaxis.max - currentYaxis.min) * zoomFactor;
+          yAxisModel.set('displayRange', {
+            min: currentYaxis.min + yAxisDist,
+            max: currentYaxis.max - yAxisDist
+          });
+        });
+      } else if (zoomDirection === 'out') {
+        this.config.xAxis.set('displayRange', {
+          min: currentXaxis.min - xAxisDist,
+          max: currentXaxis.max + xAxisDist
+        });
+
+        this.yAxisListWithRange.forEach((yAxisModel) => {
+          const currentYaxis = yAxisModel.get('displayRange');
+          if (!currentYaxis) {
+            return;
+          }
+
+          const yAxisDist = (currentYaxis.max - currentYaxis.min) * zoomFactor;
+          yAxisModel.set('displayRange', {
+            min: currentYaxis.min - yAxisDist,
+            max: currentYaxis.max + yAxisDist
+          });
+        });
+      }
+
+      this.userViewportChangeEnd();
+    },
 
-            this.freeze();
-            window.clearTimeout(this.stillZooming);
-
-            let xAxisDist = (xDisplayRange.max - xDisplayRange.min);
-            let yAxisDist = (yDisplayRange.max - yDisplayRange.min);
-            let xDistMouseToMax = xDisplayRange.max - this.positionOverPlot.x;
-            let xDistMouseToMin = this.positionOverPlot.x - xDisplayRange.min;
-            let yDistMouseToMax = yDisplayRange.max - this.positionOverPlot.y;
-            let yDistMouseToMin = this.positionOverPlot.y - yDisplayRange.min;
-            let xAxisMaxDist = xDistMouseToMax / xAxisDist;
-            let xAxisMinDist = xDistMouseToMin / xAxisDist;
-            let yAxisMaxDist = yDistMouseToMax / yAxisDist;
-            let yAxisMinDist = yDistMouseToMin / yAxisDist;
-
-            let plotHistoryStep;
-
-            if (!plotHistoryStep) {
-                plotHistoryStep = {
-                    x: xDisplayRange,
-                    y: yDisplayRange
-                };
-            }
+    wheelZoom(event) {
+      const ZOOM_AMT = 0.1;
+      event.preventDefault();
 
-            if (event.wheelDelta < 0) {
+      if (event.wheelDelta === undefined || !this.positionOverPlot) {
+        return;
+      }
 
-                this.config.xAxis.set('displayRange', {
-                    min: xDisplayRange.min + ((xAxisDist * ZOOM_AMT) * xAxisMinDist),
-                    max: xDisplayRange.max - ((xAxisDist * ZOOM_AMT) * xAxisMaxDist)
-                });
+      let xDisplayRange = this.config.xAxis.get('displayRange');
 
-                this.config.yAxis.set('displayRange', {
-                    min: yDisplayRange.min + ((yAxisDist * ZOOM_AMT) * yAxisMinDist),
-                    max: yDisplayRange.max - ((yAxisDist * ZOOM_AMT) * yAxisMaxDist)
-                });
-            } else if (event.wheelDelta >= 0) {
+      let doesYAxisHaveRange = false;
+      this.yAxisListWithRange.forEach((yAxisModel) => {
+        if (yAxisModel.get('displayRange')) {
+          doesYAxisHaveRange = true;
+        }
+      });
+
+      // when there is no plot data, the ranges can be undefined
+      // in which case we should not perform zoom
+      if (!xDisplayRange || !doesYAxisHaveRange) {
+        return;
+      }
+
+      this.freeze();
+      window.clearTimeout(this.stillZooming);
+
+      let xAxisDist = xDisplayRange.max - xDisplayRange.min;
+      let xDistMouseToMax = xDisplayRange.max - this.positionOverPlot.x;
+      let xDistMouseToMin = this.positionOverPlot.x - xDisplayRange.min;
+      let xAxisMaxDist = xDistMouseToMax / xAxisDist;
+      let xAxisMinDist = xDistMouseToMin / xAxisDist;
+
+      let plotHistoryStep;
+
+      if (!plotHistoryStep) {
+        const yRangeList = [];
+        this.yAxisListWithRange.map((yAxis) => yRangeList.push(yAxis.get('displayRange')));
+        plotHistoryStep = {
+          x: this.config.xAxis.get('displayRange'),
+          y: yRangeList
+        };
+      }
+
+      if (event.wheelDelta < 0) {
+        this.config.xAxis.set('displayRange', {
+          min: xDisplayRange.min + xAxisDist * ZOOM_AMT * xAxisMinDist,
+          max: xDisplayRange.max - xAxisDist * ZOOM_AMT * xAxisMaxDist
+        });
+
+        this.yAxisListWithRange.forEach((yAxisModel) => {
+          const yDisplayRange = yAxisModel.get('displayRange');
+          if (!yDisplayRange) {
+            return;
+          }
+
+          const yPosition = this.getYPositionForYAxis(this.positionOverPlot, yAxisModel);
+          let yAxisDist = yDisplayRange.max - yDisplayRange.min;
+          let yDistMouseToMax = yDisplayRange.max - yPosition;
+          let yDistMouseToMin = yPosition - yDisplayRange.min;
+          let yAxisMaxDist = yDistMouseToMax / yAxisDist;
+          let yAxisMinDist = yDistMouseToMin / yAxisDist;
+
+          yAxisModel.set('displayRange', {
+            min: yDisplayRange.min + yAxisDist * ZOOM_AMT * yAxisMinDist,
+            max: yDisplayRange.max - yAxisDist * ZOOM_AMT * yAxisMaxDist
+          });
+        });
+      } else if (event.wheelDelta >= 0) {
+        this.config.xAxis.set('displayRange', {
+          min: xDisplayRange.min - xAxisDist * ZOOM_AMT * xAxisMinDist,
+          max: xDisplayRange.max + xAxisDist * ZOOM_AMT * xAxisMaxDist
+        });
+
+        this.yAxisListWithRange.forEach((yAxisModel) => {
+          const yDisplayRange = yAxisModel.get('displayRange');
+          if (!yDisplayRange) {
+            return;
+          }
+
+          const yPosition = this.getYPositionForYAxis(this.positionOverPlot, yAxisModel);
+          let yAxisDist = yDisplayRange.max - yDisplayRange.min;
+          let yDistMouseToMax = yDisplayRange.max - yPosition;
+          let yDistMouseToMin = yPosition - yDisplayRange.min;
+          let yAxisMaxDist = yDistMouseToMax / yAxisDist;
+          let yAxisMinDist = yDistMouseToMin / yAxisDist;
+
+          yAxisModel.set('displayRange', {
+            min: yDisplayRange.min - yAxisDist * ZOOM_AMT * yAxisMinDist,
+            max: yDisplayRange.max + yAxisDist * ZOOM_AMT * yAxisMaxDist
+          });
+        });
+      }
+
+      this.stillZooming = window.setTimeout(
+        function () {
+          this.plotHistory.push(plotHistoryStep);
+          plotHistoryStep = undefined;
+          this.userViewportChangeEnd();
+        }.bind(this),
+        250
+      );
+    },
 
-                this.config.xAxis.set('displayRange', {
-                    min: xDisplayRange.min - ((xAxisDist * ZOOM_AMT) * xAxisMinDist),
-                    max: xDisplayRange.max + ((xAxisDist * ZOOM_AMT) * xAxisMaxDist)
-                });
+    startPan(event) {
+      this.canvas.classList.add('plot-drag');
+      this.canvas.classList.remove('plot-marquee');
 
-                this.config.yAxis.set('displayRange', {
-                    min: yDisplayRange.min - ((yAxisDist * ZOOM_AMT) * yAxisMinDist),
-                    max: yDisplayRange.max + ((yAxisDist * ZOOM_AMT) * yAxisMaxDist)
-                });
-            }
+      this.trackMousePosition(event);
+      this.freeze();
+      this.pan = {
+        start: this.positionOverPlot
+      };
+      event.preventDefault();
+      this.trackHistory();
 
-            this.stillZooming = window.setTimeout(function () {
-                this.plotHistory.push(plotHistoryStep);
-                plotHistoryStep = undefined;
-                this.userViewportChangeEnd();
-            }.bind(this), 250);
-        },
-
-        startPan(event) {
-            this.canvas.classList.add('plot-drag');
-            this.canvas.classList.remove('plot-marquee');
-
-            this.trackMousePosition(event);
-            this.freeze();
-            this.pan = {
-                start: this.positionOverPlot
-            };
-            event.preventDefault();
-            this.trackHistory();
+      return false;
+    },
 
-            return false;
-        },
+    updatePan() {
+      // calculate offset between points.  Apply that offset to viewport.
+      if (!this.pan) {
+        return;
+      }
+
+      const dX = this.pan.start.x - this.positionOverPlot.x;
+      const xRange = this.config.xAxis.get('displayRange');
+
+      this.config.xAxis.set('displayRange', {
+        min: xRange.min + dX,
+        max: xRange.max + dX
+      });
+
+      const dY = [];
+      this.positionOverPlot.y.forEach((yAxisPosition, index) => {
+        const yAxisId = this.positionOverPlot.yAxisIds[index];
+        dY.push({
+          yAxisId: yAxisId,
+          y: this.pan.start.y[index] - yAxisPosition
+        });
+      });
+
+      this.yAxisListWithRange.forEach((yAxis) => {
+        const yRange = yAxis.get('displayRange');
+        if (!yRange) {
+          return;
+        }
 
-        updatePan() {
-        // calculate offset between points.  Apply that offset to viewport.
-            if (!this.pan) {
-                return;
-            }
+        const yIndex = dY.findIndex((y) => y.yAxisId === yAxis.get('id'));
 
-            const dX = this.pan.start.x - this.positionOverPlot.x;
-            const dY = this.pan.start.y - this.positionOverPlot.y;
-            const xRange = this.config.xAxis.get('displayRange');
-            const yRange = this.config.yAxis.get('displayRange');
+        yAxis.set('displayRange', {
+          min: yRange.min + dY[yIndex].y,
+          max: yRange.max + dY[yIndex].y
+        });
+      });
+    },
 
-            this.config.xAxis.set('displayRange', {
-                min: xRange.min + dX,
-                max: xRange.max + dX
-            });
-            this.config.yAxis.set('displayRange', {
-                min: yRange.min + dY,
-                max: yRange.max + dY
-            });
-        },
+    trackHistory() {
+      const yRangeList = [];
+      const yAxisIds = [];
+      this.yAxisListWithRange.forEach((yAxis) => {
+        yRangeList.push(yAxis.get('displayRange'));
+        yAxisIds.push(yAxis.get('id'));
+      });
+      this.plotHistory.push({
+        x: this.config.xAxis.get('displayRange'),
+        y: yRangeList,
+        yAxisIds
+      });
+    },
 
-        trackHistory() {
-            this.plotHistory.push({
-                x: this.config.xAxis.get('displayRange'),
-                y: this.config.yAxis.get('displayRange')
-            });
-        },
-
-        endPan() {
-            this.pan = undefined;
-            this.userViewportChangeEnd();
-        },
-
-        freeze() {
-            this.config.yAxis.set('frozen', true);
-            this.config.xAxis.set('frozen', true);
-            this.setStatus();
-        },
-
-        clear() {
-            this.config.yAxis.set('frozen', false);
-            this.config.xAxis.set('frozen', false);
-            this.setStatus();
-            this.plotHistory = [];
-            this.userViewportChangeEnd();
-        },
-
-        back() {
-            const previousAxisRanges = this.plotHistory.pop();
-            if (this.plotHistory.length === 0) {
-                this.clear();
+    endPan() {
+      this.pan = undefined;
+      this.userViewportChangeEnd();
+    },
 
-                return;
-            }
+    freeze() {
+      this.yAxisListWithRange.forEach((yAxis) => {
+        yAxis.set('frozen', true);
+      });
+      this.config.xAxis.set('frozen', true);
+      this.setStatus();
+      if (!this.annotationsEverLoaded) {
+        this.loadAnnotations();
+      }
+    },
+
+    resumeRealtimeData() {
+      // remove annotation selections
+      this.rectangles = [];
+
+      this.clearPanZoomHistory();
+      this.userViewportChangeEnd();
+    },
+
+    clearPanZoomHistory() {
+      this.yAxisListWithRange.forEach((yAxis) => {
+        yAxis.set('frozen', false);
+      });
+      this.config.xAxis.set('frozen', false);
+      this.setStatus();
+      this.plotHistory = [];
+    },
 
-            this.config.xAxis.set('displayRange', previousAxisRanges.x);
-            this.config.yAxis.set('displayRange', previousAxisRanges.y);
-            this.userViewportChangeEnd();
-        },
+    back() {
+      const previousAxisRanges = this.plotHistory.pop();
+      if (this.plotHistory.length === 0) {
+        this.resumeRealtimeData();
 
-        setCursorGuideVisibility(cursorGuide) {
-            this.cursorGuide = cursorGuide === true;
-        },
+        return;
+      }
 
-        setGridLinesVisibility(gridLines) {
-            this.gridLines = gridLines === true;
-        },
+      this.config.xAxis.set('displayRange', previousAxisRanges.x);
+      this.yAxisListWithRange.forEach((yAxis) => {
+        const yPosition = this.getYPositionForYAxis(previousAxisRanges, yAxis);
+        yAxis.set('displayRange', yPosition);
+      });
 
-        setYAxisKey(yKey) {
-            this.config.series.models[0].emit('change:yKey', yKey);
-        },
+      this.userViewportChangeEnd();
+    },
 
-        pause() {
-            this.freeze();
-        },
+    setYAxisKey(yKey, yAxisId) {
+      const seriesForYAxis = this.config.series.models.filter(
+        (model) => model.get('yAxisId') === yAxisId
+      );
+      seriesForYAxis.forEach((model) => model.set('yKey', yKey));
+    },
 
-        play() {
-            this.clear();
-        },
+    pause() {
+      this.freeze();
+    },
 
-        showSynchronizeDialog() {
-            const isLocalClock = this.openmct.time.clock();
-            if (isLocalClock !== undefined) {
-                const message = `
+    showSynchronizeDialog() {
+      const isLocalClock = this.timeContext.clock();
+      if (isLocalClock !== undefined) {
+        const message = `
                 This action will change the Time Conductor to Fixed Timespan mode with this plot view's current time bounds.
                 Do you want to continue?
             `;
 
-                let dialog = this.openmct.overlays.dialog({
-                    title: 'Synchronize Time Conductor',
-                    iconClass: 'alert',
-                    size: 'fit',
-                    message: message,
-                    buttons: [
-                        {
-                            label: 'OK',
-                            callback: () => {
-                                dialog.dismiss();
-                                this.synchronizeTimeConductor();
-                            }
-                        },
-                        {
-                            label: 'Cancel',
-                            callback: () => {
-                                dialog.dismiss();
-                            }
-                        }
-                    ]
-                });
-            } else {
-                this.openmct.notifications.alert('Time conductor bounds have changed.');
+        let dialog = this.openmct.overlays.dialog({
+          title: 'Synchronize Time Conductor',
+          iconClass: 'alert',
+          size: 'fit',
+          message: message,
+          buttons: [
+            {
+              label: 'OK',
+              callback: () => {
+                dialog.dismiss();
                 this.synchronizeTimeConductor();
+              }
+            },
+            {
+              label: 'Cancel',
+              callback: () => {
+                dialog.dismiss();
+              }
             }
-        },
-
-        synchronizeTimeConductor() {
-            this.openmct.time.stopClock();
-            const range = this.config.xAxis.get('displayRange');
-            this.openmct.time.bounds({
-                start: range.min,
-                end: range.max
-            });
-            this.isTimeOutOfSync = false;
-        },
+          ]
+        });
+      } else {
+        this.openmct.notifications.alert('Time conductor bounds have changed.');
+        this.synchronizeTimeConductor();
+      }
+    },
+
+    synchronizeTimeConductor() {
+      const range = this.config.xAxis.get('displayRange');
+      this.timeContext.bounds({
+        start: range.min,
+        end: range.max
+      });
+      this.isTimeOutOfSync = false;
+    },
 
-        destroy() {
-            configStore.deleteStore(this.config.id);
+    destroy() {
+      if (this.config) {
+        configStore.deleteStore(this.config.id);
+      }
 
-            this.stopListening();
-            if (this.checkForSize) {
-                clearInterval(this.checkForSize);
-                delete this.checkForSize;
-            }
+      this.config = {};
+      this.canvas = undefined;
+      this.abortController = undefined;
 
-            if (this.filterObserver) {
-                this.filterObserver();
-            }
+      this.stopListening();
 
-            if (this.removeStatusListener) {
-                this.removeStatusListener();
-            }
+      if (this.checkForSize) {
+        clearInterval(this.checkForSize);
+        delete this.checkForSize;
+      }
 
-            this.plotContainerResizeObserver.disconnect();
-
-            this.openmct.time.off('clock', this.updateRealTime);
-            this.openmct.time.off('bounds', this.updateDisplayBounds);
-            this.openmct.objectViews.off('clearData', this.clearData);
-        },
-        updateStatus(status) {
-            this.$emit('statusUpdated', status);
-        },
-        handleWindowResize() {
-            if (this.offsetWidth !== this.$parent.$refs.plotWrapper.offsetWidth) {
-                this.offsetWidth = this.$parent.$refs.plotWrapper.offsetWidth;
-                this.config.series.models.forEach(this.loadSeriesData, this);
-            }
-        },
-        legendHoverChanged(data) {
-            this.showLimitLineLabels = data;
-        }
+      if (this.filterObserver) {
+        this.filterObserver();
+      }
+
+      if (this.removeStatusListener) {
+        this.removeStatusListener();
+      }
+
+      if (this.plotContainerResizeObserver) {
+        this.plotContainerResizeObserver.disconnect();
+      }
+
+      this.stopFollowingTimeContext();
+      this.openmct.objectViews.off('clearData', this.clearData);
+    },
+    updateStatus(status) {
+      this.$emit('status-updated', status);
+    },
+    handleWindowResize() {
+      const { plotWrapper } = this.$parent.$refs;
+      if (!plotWrapper) {
+        return;
+      }
+
+      const newOffsetWidth = plotWrapper.offsetWidth;
+      //we ignore when width gets smaller
+      const offsetChange = newOffsetWidth - this.offsetWidth;
+      if (offsetChange > OFFSET_THRESHOLD) {
+        this.offsetWidth = newOffsetWidth;
+        this.config.series.models.forEach(this.loadSeriesData, this);
+      }
+    },
+    toggleCursorGuide() {
+      this.cursorGuide = !this.cursorGuide;
+      this.$emit('cursor-guide', this.cursorGuide);
+    },
+    toggleGridLines() {
+      this.gridLines = !this.gridLines;
+      this.$emit('grid-lines', this.gridLines);
     }
+  }
 };
-
 </script>
diff --git a/src/plugins/plot/MctTicks.vue b/src/plugins/plot/MctTicks.vue
index ef7388f6e2e..b63555f0991 100644
--- a/src/plugins/plot/MctTicks.vue
+++ b/src/plugins/plot/MctTicks.vue
@@ -1,5 +1,5 @@
 <!--
- Open MCT, Copyright (c) 2014-2021, United States Government
+ Open MCT, Copyright (c) 2014-2024, United States Government
  as represented by the Administrator of the National Aeronautics and Space
  Administration. All rights reserved.
 
@@ -21,228 +21,271 @@
 -->
 
 <template>
-<div ref="tickContainer"
-     class="u-contents js-ticks"
->
-    <div v-if="position === 'left'"
-         class="gl-plot-tick-wrapper"
-    >
-        <div v-for="tick in ticks"
-             :key="tick.value"
-             class="gl-plot-tick gl-plot-x-tick-label"
-             :style="{
-                 left: (100 * (tick.value - min) / interval) + '%'
-             }"
-             :title="tick.fullText || tick.text"
-        >
-            {{ tick.text }}
-        </div>
+  <div ref="tickContainer" class="u-contents js-ticks">
+    <div v-if="position === 'left'" class="gl-plot-tick-wrapper">
+      <div
+        v-for="(tick, i) in ticks"
+        :key="'tick-left' + i"
+        class="gl-plot-tick gl-plot-x-tick-label"
+        :style="{
+          left: (100 * (tick.value - min)) / interval + '%'
+        }"
+        :aria-label="tick.fullText || tick.text"
+        :title="tick.fullText || tick.text"
+      >
+        {{ tick.text }}
+      </div>
     </div>
-    <div v-if="position === 'top'"
-         class="gl-plot-tick-wrapper"
-    >
-        <div v-for="tick in ticks"
-             :key="tick.value"
-             class="gl-plot-tick gl-plot-y-tick-label"
-             :style="{ top: (100 * (max - tick.value) / interval) + '%' }"
-             :title="tick.fullText || tick.text"
-             style="margin-top: -0.50em; direction: ltr;"
-        >
-            <span>{{ tick.text }}</span>
-        </div>
+    <div v-if="position === 'top'" class="gl-plot-tick-wrapper">
+      <div
+        v-for="(tick, i) in ticks"
+        :key="'tick-top' + i"
+        class="gl-plot-tick gl-plot-y-tick-label"
+        :style="{ top: (100 * (max - tick.value)) / interval + '%' }"
+        :aria-label="tick.fullText || tick.text"
+        :title="tick.fullText || tick.text"
+        style="margin-top: -0.5em; direction: ltr"
+      >
+        <span>{{ tick.text }}</span>
+      </div>
     </div>
     <!-- grid lines follow -->
     <template v-if="position === 'right'">
-        <div v-for="tick in ticks"
-             :key="tick.value"
-             class="gl-plot-hash hash-v"
-             :style="{
-                 right: (100 * (max - tick.value) / interval) + '%',
-                 height: '100%'
-             }"
-        >
-        </div>
+      <div
+        v-for="(tick, i) in ticks"
+        :key="'tick-right' + i"
+        class="gl-plot-hash hash-v"
+        :style="{
+          right: (100 * (max - tick.value)) / interval + '%',
+          height: '100%'
+        }"
+      ></div>
     </template>
     <template v-if="position === 'bottom'">
-        <div v-for="tick in ticks"
-             :key="tick.value"
-             class="gl-plot-hash hash-h"
-             :style="{ bottom: (100 * (tick.value - min) / interval) + '%', width: '100%' }"
-        >
-        </div>
+      <div
+        v-for="(tick, i) in ticks"
+        :key="'tick-bottom' + i"
+        class="gl-plot-hash hash-h"
+        :style="{ bottom: (100 * (tick.value - min)) / interval + '%', width: '100%' }"
+      ></div>
     </template>
-</div>
+  </div>
 </template>
 
 <script>
-import eventHelpers from "./lib/eventHelpers";
-import { ticks, getFormattedTicks } from "./tickUtils";
-import configStore from "./configuration/configStore";
+import configStore from './configuration/ConfigStore.js';
+import eventHelpers from './lib/eventHelpers.js';
+import { getFormattedTicks, getLogTicks, ticks } from './tickUtils.js';
+
+const SECONDARY_TICK_NUMBER = 2;
 
 export default {
-    inject: ['openmct', 'domainObject'],
-    props: {
-        axisType: {
-            type: String,
-            default() {
-                return '';
-            },
-            required: true
-        },
-        position: {
-            required: true,
-            type: String,
-            default() {
-                return '';
-            }
+  inject: ['openmct', 'domainObject'],
+  props: {
+    axisType: {
+      type: String,
+      default() {
+        return '';
+      },
+      required: true
+    },
+    // Make it a prop, then later we can allow user to change it via UI input
+    tickCount: {
+      type: Number,
+      default() {
+        return 6;
+      }
+    },
+    axisId: {
+      type: Number,
+      default() {
+        return null;
+      }
+    },
+    position: {
+      required: true,
+      type: String,
+      default() {
+        return '';
+      }
+    }
+  },
+  emits: ['plot-tick-width'],
+  data() {
+    return {
+      ticks: []
+    };
+  },
+  mounted() {
+    eventHelpers.extend(this);
+
+    if (!this.axisType) {
+      throw new Error('axis-type prop expected');
+    }
+
+    this.axis = this.getAxisFromConfig();
+
+    this.tickUpdate = false;
+    this.listenTo(this.axis, 'change:displayRange', this.updateTicks, this);
+    this.listenTo(this.axis, 'change:format', this.updateTicks, this);
+    this.listenTo(this.axis, 'change:key', this.updateTicksForceRegeneration, this);
+    this.updateTicks();
+  },
+  beforeUnmount() {
+    this.stopListening();
+  },
+  methods: {
+    getAxisFromConfig() {
+      const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+
+      /** @type {import('./configuration/PlotConfigurationModel').default} */
+      let config = configStore.get(configId);
+
+      if (!config) {
+        throw new Error('config is missing');
+      }
+
+      if (this.axisType === 'yAxis') {
+        if (this.axisId && this.axisId !== config.yAxis.id) {
+          return config.additionalYAxes.find((axis) => axis.id === this.axisId);
+        } else {
+          return config.yAxis;
         }
+      } else {
+        return config[this.axisType];
+      }
     },
-    data() {
-        return {
-            ticks: []
-        };
+    /**
+     * Determine whether ticks should be regenerated for a given range.
+     * Ticks are updated
+     * a) if they don't exist,
+     * b) if existing ticks are outside of given range,
+     * c) if range exceeds size of tick range by more than one tick step,
+     * d) if forced to regenerate (ex. changing x-axis metadata).
+     *
+     */
+    shouldRegenerateTicks(range, forceRegeneration) {
+      if (forceRegeneration) {
+        return true;
+      }
+
+      if (!this.tickRange || !this.ticks || !this.ticks.length) {
+        return true;
+      }
+
+      if (this.tickRange.max > range.max || this.tickRange.min < range.min) {
+        return true;
+      }
+
+      if (Math.abs(range.max - this.tickRange.max) > this.tickRange.step) {
+        return true;
+      }
+
+      if (Math.abs(this.tickRange.min - range.min) > this.tickRange.step) {
+        return true;
+      }
+
+      return false;
     },
-    mounted() {
-        eventHelpers.extend(this);
 
-        this.axis = this.getAxisFromConfig();
+    getTicks() {
+      const number = this.tickCount;
+      const clampRange = this.axis.get('values');
+      const range = this.axis.get('displayRange');
+      if (clampRange) {
+        return clampRange.filter(function (value) {
+          return value <= range.max && value >= range.min;
+        }, this);
+      }
 
-        this.tickCount = 4;
-        this.tickUpdate = false;
-        this.listenTo(this.axis, 'change:displayRange', this.updateTicks, this);
-        this.listenTo(this.axis, 'change:format', this.updateTicks, this);
-        this.listenTo(this.axis, 'change:key', this.updateTicksForceRegeneration, this);
-        this.updateTicks();
+      if (this.axisType === 'yAxis' && this.axis.get('logMode')) {
+        return getLogTicks(range.min, range.max, number, SECONDARY_TICK_NUMBER);
+      } else {
+        return ticks(range.min, range.max, number);
+      }
     },
-    beforeDestroy() {
-        this.stopListening();
+
+    updateTicksForceRegeneration() {
+      this.updateTicks(true);
+    },
+
+    updateTicks(forceRegeneration = false) {
+      const range = this.axis.get('displayRange');
+
+      if (!range) {
+        delete this.min;
+        delete this.max;
+        delete this.interval;
+        delete this.tickRange;
+        this.ticks = [];
+        delete this.shouldCheckWidth;
+
+        return;
+      }
+
+      const format = this.axis.get('format');
+      if (!format) {
+        return;
+      }
+
+      this.min = range.min;
+      this.max = range.max;
+      this.interval = Math.abs(range.min - range.max);
+      if (this.shouldRegenerateTicks(range, forceRegeneration)) {
+        let newTicks = this.getTicks();
+        this.tickRange = {
+          min: Math.min(...newTicks),
+          max: Math.max(...newTicks),
+          step: newTicks[1] - newTicks[0]
+        };
+
+        newTicks = getFormattedTicks(newTicks, format);
+
+        this.ticks = newTicks;
+        this.shouldCheckWidth = true;
+      }
+
+      this.scheduleTickUpdate();
+    },
+
+    scheduleTickUpdate() {
+      if (this.tickUpdate) {
+        return;
+      }
+
+      this.tickUpdate = true;
+      setTimeout(this.doTickUpdate.bind(this), 0);
     },
-    methods: {
-        getAxisFromConfig() {
-            if (!this.axisType) {
-                return;
-            }
-
-            const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-            let config = configStore.get(configId);
-            if (config) {
-                return config[this.axisType];
-            }
-        },
-        /**
-       * Determine whether ticks should be regenerated for a given range.
-       * Ticks are updated
-       * a) if they don't exist,
-       * b) if existing ticks are outside of given range,
-       * c) if range exceeds size of tick range by more than one tick step,
-       * d) if forced to regenerate (ex. changing x-axis metadata).
-       *
-       */
-        shouldRegenerateTicks(range, forceRegeneration) {
-            if (forceRegeneration) {
-                return true;
-            }
-
-            if (!this.tickRange || !this.ticks || !this.ticks.length) {
-                return true;
-            }
-
-            if (this.tickRange.max > range.max || this.tickRange.min < range.min) {
-                return true;
-            }
-
-            if (Math.abs(range.max - this.tickRange.max) > this.tickRange.step) {
-                return true;
-            }
-
-            if (Math.abs(this.tickRange.min - range.min) > this.tickRange.step) {
-                return true;
-            }
-
-            return false;
-        },
-
-        getTicks() {
-            const number = this.tickCount;
-            const clampRange = this.axis.get('values');
-            const range = this.axis.get('displayRange');
-            if (clampRange) {
-                return clampRange.filter(function (value) {
-                    return value <= range.max && value >= range.min;
-                }, this);
-            }
-
-            return ticks(range.min, range.max, number);
-        },
-
-        updateTicksForceRegeneration() {
-            this.updateTicks(true);
-        },
-
-        updateTicks(forceRegeneration = false) {
-            const range = this.axis.get('displayRange');
-            if (!range) {
-                delete this.min;
-                delete this.max;
-                delete this.interval;
-                delete this.tickRange;
-                this.ticks = [];
-                delete this.shouldCheckWidth;
-
-                return;
-            }
-
-            const format = this.axis.get('format');
-            if (!format) {
-                return;
-            }
-
-            this.min = range.min;
-            this.max = range.max;
-            this.interval = Math.abs(range.min - range.max);
-            if (this.shouldRegenerateTicks(range, forceRegeneration)) {
-                let newTicks = this.getTicks();
-                this.tickRange = {
-                    min: Math.min.apply(Math, newTicks),
-                    max: Math.max.apply(Math, newTicks),
-                    step: newTicks[1] - newTicks[0]
-                };
-
-                newTicks = getFormattedTicks(newTicks, format);
-
-                this.ticks = newTicks;
-                this.shouldCheckWidth = true;
-            }
-
-            this.scheduleTickUpdate();
-        },
-
-        scheduleTickUpdate() {
-            if (this.tickUpdate) {
-                return;
-            }
-
-            this.tickUpdate = true;
-            setTimeout(this.doTickUpdate.bind(this), 0);
-        },
-
-        doTickUpdate() {
-            if (this.shouldCheckWidth) {
-                const tickElements = this.$refs.tickContainer && this.$refs.tickContainer.querySelectorAll('.gl-plot-tick > span');
-                if (tickElements) {
-                    const tickWidth = Number([].reduce.call(tickElements, function (memo, first) {
-                        return Math.max(memo, first.offsetWidth);
-                    }, 0));
-
-                    this.tickWidth = tickWidth;
-                    this.$emit('plotTickWidth', tickWidth);
-                    this.shouldCheckWidth = false;
-                }
-            }
-
-            this.tickUpdate = false;
+
+    doTickUpdate() {
+      if (this.shouldCheckWidth) {
+        const tickElements =
+          this.$refs.tickContainer &&
+          this.$refs.tickContainer.querySelectorAll('.gl-plot-tick > span');
+        if (tickElements) {
+          const tickWidth = Number(
+            [].reduce.call(
+              tickElements,
+              function (memo, first) {
+                return Math.max(memo, first.offsetWidth);
+              },
+              0
+            )
+          );
+
+          if (this.tickWidth !== tickWidth) {
+            this.tickWidth = tickWidth;
+            this.$emit('plot-tick-width', {
+              width: tickWidth,
+              yAxisId: this.axisType === 'yAxis' ? this.axisId : ''
+            });
+            this.shouldCheckWidth = false;
+          }
         }
+      }
+
+      this.tickUpdate = false;
     }
+  }
 };
-
 </script>
diff --git a/src/plugins/plot/Plot.vue b/src/plugins/plot/Plot.vue
deleted file mode 100644
index c8c1e3ffc1b..00000000000
--- a/src/plugins/plot/Plot.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<template>
-<div ref="plotWrapper"
-     class="c-plot holder holder-plot has-control-bar"
->
-    <div v-if="!options.compact"
-         class="c-control-bar"
-    >
-        <span class="c-button-set c-button-set--strip-h">
-            <button class="c-button icon-download"
-                    title="Export This View's Data as PNG"
-                    @click="exportPNG()"
-            >
-                <span class="c-button__label">PNG</span>
-            </button>
-            <button class="c-button"
-                    title="Export This View's Data as JPG"
-                    @click="exportJPG()"
-            >
-                <span class="c-button__label">JPG</span>
-            </button>
-        </span>
-        <button class="c-button icon-crosshair"
-                :class="{ 'is-active': cursorGuide }"
-                title="Toggle cursor guides"
-                @click="toggleCursorGuide"
-        >
-        </button>
-        <button class="c-button"
-                :class="{ 'icon-grid-on': gridLines, 'icon-grid-off': !gridLines }"
-                title="Toggle grid lines"
-                @click="toggleGridLines"
-        >
-        </button>
-    </div>
-
-    <div ref="plotContainer"
-         class="l-view-section u-style-receiver js-style-receiver"
-         :class="{'s-status-timeconductor-unsynced': status && status === 'timeconductor-unsynced'}"
-    >
-        <div v-show="!!loading"
-             class="c-loading--overlay loading"
-        ></div>
-        <mct-plot :grid-lines="gridLines"
-                  :cursor-guide="cursorGuide"
-                  :options="options"
-                  @loadingUpdated="loadingUpdated"
-                  @statusUpdated="setStatus"
-        />
-    </div>
-</div>
-</template>
-
-<script>
-import eventHelpers from './lib/eventHelpers';
-import ImageExporter from '../../exporters/ImageExporter';
-import MctPlot from './MctPlot.vue';
-
-export default {
-    components: {
-        MctPlot
-    },
-    inject: ['openmct', 'domainObject'],
-    props: {
-        options: {
-            type: Object,
-            default() {
-                return {
-                    compact: false
-                };
-            }
-        }
-    },
-    data() {
-        return {
-            //Don't think we need this as it appears to be stacked plot specific
-            // hideExportButtons: false
-            cursorGuide: false,
-            gridLines: !this.options.compact,
-            loading: false,
-            status: ''
-        };
-    },
-    mounted() {
-        eventHelpers.extend(this);
-        this.imageExporter = new ImageExporter(this.openmct);
-    },
-    beforeDestroy() {
-        this.destroy();
-    },
-    methods: {
-        loadingUpdated(loading) {
-            this.loading = loading;
-        },
-        destroy() {
-            this.stopListening();
-        },
-
-        exportJPG() {
-            const plotElement = this.$refs.plotContainer;
-            this.imageExporter.exportJPG(plotElement, 'plot.jpg', 'export-plot');
-        },
-
-        exportPNG() {
-            const plotElement = this.$refs.plotContainer;
-            this.imageExporter.exportPNG(plotElement, 'plot.png', 'export-plot');
-        },
-
-        toggleCursorGuide() {
-            this.cursorGuide = !this.cursorGuide;
-        },
-
-        toggleGridLines() {
-            this.gridLines = !this.gridLines;
-        },
-        setStatus(status) {
-            this.status = status;
-        }
-    }
-};
-
-</script>
diff --git a/src/plugins/plot/PlotView.vue b/src/plugins/plot/PlotView.vue
new file mode 100644
index 00000000000..a83d81a3f37
--- /dev/null
+++ b/src/plugins/plot/PlotView.vue
@@ -0,0 +1,275 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div
+    ref="plotWrapper"
+    class="c-plot holder holder-plot has-control-bar"
+    :class="isStale && 'is-stale'"
+  >
+    <div
+      ref="plotContainer"
+      class="l-view-section u-style-receiver js-style-receiver"
+      aria-label="Plot Container Style Target"
+      :class="{
+        's-status-timeconductor-unsynced': status === 'timeconductor-unsynced'
+      }"
+    >
+      <progress-bar
+        v-show="!!loading"
+        class="c-telemetry-table__progress-bar"
+        :model="{ progressPerc: null }"
+      />
+      <mct-plot
+        ref="mctPlot"
+        :class="[plotLegendExpandedStateClass, plotLegendPositionClass]"
+        :init-grid-lines="gridLinesProp"
+        :init-cursor-guide="cursorGuide"
+        :options="options"
+        :limit-line-labels="limitLineLabelsProp"
+        :parent-y-tick-width="parentYTickWidth"
+        :color-palette="colorPalette"
+        @loading-updated="loadingUpdated"
+        @status-updated="setStatus"
+        @config-loaded="updateReady"
+        @lock-highlight-point="lockHighlightPointUpdated"
+        @highlights="highlightsUpdated"
+        @plot-y-tick-width="onYTickWidthChange"
+        @cursor-guide="onCursorGuideChange"
+        @grid-lines="onGridLinesChange"
+      >
+        <plot-legend
+          v-if="configReady && hideLegend === false"
+          :cursor-locked="lockHighlightPoint"
+          :highlights="highlights"
+          @legend-hover-changed="legendHoverChanged"
+          @expanded="updateExpanded"
+          @position="updatePosition"
+        />
+      </mct-plot>
+    </div>
+  </div>
+</template>
+
+<script>
+import stalenessMixin from '@/ui/mixins/staleness-mixin';
+
+import ImageExporter from '../../exporters/ImageExporter.js';
+import ProgressBar from '../../ui/components/ProgressBar.vue';
+import PlotLegend from './legend/PlotLegend.vue';
+import eventHelpers from './lib/eventHelpers.js';
+import MctPlot from './MctPlot.vue';
+
+export default {
+  components: {
+    MctPlot,
+    ProgressBar,
+    PlotLegend
+  },
+  mixins: [stalenessMixin],
+  inject: ['openmct', 'domainObject'],
+  props: {
+    options: {
+      type: Object,
+      default() {
+        return {
+          compact: false
+        };
+      }
+    },
+    gridLines: {
+      type: Boolean,
+      default() {
+        return true;
+      }
+    },
+    cursorGuide: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    parentLimitLineLabels: {
+      type: Object,
+      default() {
+        return undefined;
+      }
+    },
+    colorPalette: {
+      type: Object,
+      default() {
+        return undefined;
+      }
+    },
+    parentYTickWidth: {
+      type: Object,
+      default() {
+        return {
+          leftTickWidth: 0,
+          rightTickWidth: 0,
+          hasMultipleLeftAxes: false
+        };
+      }
+    },
+    hideLegend: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    }
+  },
+  emits: [
+    'loading-updated',
+    'lock-highlight-point',
+    'grid-lines',
+    'highlights',
+    'config-loaded',
+    'plot-y-tick-width',
+    'cursor-guide'
+  ],
+  data() {
+    return {
+      loading: false,
+      status: '',
+      limitLineLabels: undefined,
+      lockHighlightPoint: false,
+      highlights: [],
+      expanded: false,
+      position: undefined,
+      configReady: false
+    };
+  },
+  computed: {
+    limitLineLabelsProp() {
+      return this.parentLimitLineLabels ?? this.limitLineLabels;
+    },
+    gridLinesProp() {
+      return this.gridLines ?? !this.options.compact;
+    },
+    plotLegendPositionClass() {
+      return this.position ? `plot-legend-${this.position}` : '';
+    },
+    plotLegendExpandedStateClass() {
+      if (this.expanded) {
+        return 'plot-legend-expanded';
+      } else {
+        return 'plot-legend-collapsed';
+      }
+    }
+  },
+  watch: {
+    gridLines(newGridLines) {
+      this.gridLines = newGridLines;
+    },
+    cursorGuide(newCursorGuide) {
+      this.cursorGuide = newCursorGuide;
+    }
+  },
+  created() {
+    eventHelpers.extend(this);
+    this.imageExporter = new ImageExporter(this.openmct);
+    this.loadComposition();
+    this.setupClockChangedEvent((domainObject) => {
+      this.triggerUnsubscribeFromStaleness(domainObject);
+      this.subscribeToStaleness(domainObject);
+    });
+  },
+  unmounted() {
+    this.destroy();
+  },
+  methods: {
+    loadComposition() {
+      this.compositionCollection = this.openmct.composition.get(this.domainObject);
+
+      if (this.compositionCollection) {
+        this.compositionCollection.on('add', this.subscribeToStaleness);
+        this.compositionCollection.on('remove', this.removeSubscription);
+        this.compositionCollection.load();
+      }
+    },
+    removeSubscription(identifier) {
+      this.triggerUnsubscribeFromStaleness({
+        identifier
+      });
+    },
+    loadingUpdated(loading) {
+      this.loading = loading;
+      this.$emit('loading-updated', ...arguments);
+    },
+    destroy() {
+      if (this.compositionCollection) {
+        this.compositionCollection.off('add', this.subscribeToStaleness);
+        this.compositionCollection.off('remove', this.removeSubscription);
+      }
+
+      this.imageExporter = null;
+      this.stopListening();
+    },
+    exportJPG() {
+      const plotElement = this.$refs.plotContainer;
+      this.imageExporter.exportJPG(plotElement, 'plot.jpg', 'export-plot');
+    },
+    exportPNG() {
+      const plotElement = this.$refs.plotContainer;
+      this.imageExporter.exportPNG(plotElement, 'plot.png', 'export-plot');
+    },
+    setStatus(status) {
+      this.status = status;
+    },
+    getViewContext() {
+      return {
+        exportPNG: this.exportPNG,
+        exportJPG: this.exportJPG
+      };
+    },
+    lockHighlightPointUpdated(data) {
+      this.lockHighlightPoint = data;
+      this.$emit('lock-highlight-point', ...arguments);
+    },
+    highlightsUpdated(data) {
+      this.highlights = data;
+      this.$emit('highlights', ...arguments);
+    },
+    legendHoverChanged(data) {
+      this.limitLineLabels = data;
+    },
+    updateExpanded(expanded) {
+      this.expanded = expanded;
+    },
+    updatePosition(position) {
+      this.position = position;
+    },
+    updateReady(ready) {
+      this.configReady = ready;
+      this.$emit('config-loaded', ...arguments);
+    },
+    onYTickWidthChange() {
+      this.$emit('plot-y-tick-width', ...arguments);
+    },
+    onCursorGuideChange() {
+      this.$emit('cursor-guide', ...arguments);
+    },
+    onGridLinesChange() {
+      this.$emit('grid-lines', ...arguments);
+    }
+  }
+};
+</script>
diff --git a/src/plugins/plot/PlotViewProvider.js b/src/plugins/plot/PlotViewProvider.js
index 22b73f2f5d8..878121edd28 100644
--- a/src/plugins/plot/PlotViewProvider.js
+++ b/src/plugins/plot/PlotViewProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,71 +20,98 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import Plot from './Plot.vue';
-import Vue from 'vue';
+import mount from 'utils/mount';
+
+import Plot from './PlotView.vue';
 
 export default function PlotViewProvider(openmct) {
-    function hasNumericTelemetry(domainObject) {
-        if (!Object.prototype.hasOwnProperty.call(domainObject, 'telemetry')) {
-            return false;
-        }
+  function hasNumericTelemetry(domainObject) {
+    if (!Object.prototype.hasOwnProperty.call(domainObject, 'telemetry')) {
+      return false;
+    }
 
-        let metadata = openmct.telemetry.getMetadata(domainObject);
+    let metadata = openmct.telemetry.getMetadata(domainObject);
 
-        return metadata.values().length > 0 && hasDomainAndNumericRange(metadata);
-    }
+    return metadata.values().length > 0 && hasDomainAndNumericRange(metadata);
+  }
 
-    function hasDomainAndNumericRange(metadata) {
-        const rangeValues = metadata.valuesForHints(['range']);
-        const domains = metadata.valuesForHints(['domain']);
+  function hasDomainAndNumericRange(metadata) {
+    const rangeValues = metadata.valuesForHints(['range']);
+    const domains = metadata.valuesForHints(['domain']);
 
-        return domains.length > 0
-            && rangeValues.length > 0
-            && !rangeValues.every(value => value.format === 'string');
-    }
+    return (
+      domains.length > 0 &&
+      rangeValues.length > 0 &&
+      !rangeValues.every((value) => value.format === 'string')
+    );
+  }
 
-    function isCompactView(objectPath) {
-        return objectPath.find(object => object.type === 'time-strip');
-    }
+  function isCompactView(objectPath) {
+    let isChildOfTimeStrip = objectPath.find((object) => object.type === 'time-strip');
 
-    return {
-        key: 'plot-single',
-        name: 'Plot',
-        cssClass: 'icon-telemetry',
-        canView(domainObject, objectPath) {
-            return hasNumericTelemetry(domainObject);
-        },
+    return isChildOfTimeStrip && !openmct.router.isNavigatedObject(objectPath);
+  }
 
-        view: function (domainObject, objectPath) {
-            let component;
+  return {
+    key: 'plot-single',
+    name: 'Plot',
+    cssClass: 'icon-telemetry',
+    canView(domainObject, objectPath) {
+      return hasNumericTelemetry(domainObject);
+    },
 
-            return {
-                show: function (element) {
-                    let isCompact = isCompactView(objectPath);
-                    component = new Vue({
-                        el: element,
-                        components: {
-                            Plot
-                        },
-                        provide: {
-                            openmct,
-                            domainObject
-                        },
-                        data() {
-                            return {
-                                options: {
-                                    compact: isCompact
-                                }
-                            };
-                        },
-                        template: '<plot :options="options"></plot>'
-                    });
-                },
-                destroy: function () {
-                    component.$destroy();
-                    component = undefined;
-                }
-            };
+    view: function (domainObject, objectPath) {
+      let _destroy = null;
+      let component = null;
+
+      return {
+        show: function (element, isEditing, { renderWhenVisible }) {
+          let isCompact = isCompactView(objectPath);
+          const { vNode, destroy } = mount(
+            {
+              el: element,
+              components: {
+                Plot
+              },
+              provide: {
+                openmct,
+                domainObject,
+                path: objectPath,
+                renderWhenVisible
+              },
+              data() {
+                return {
+                  options: {
+                    compact: isCompact
+                  }
+                };
+              },
+              template: '<plot ref="plotComponent" :options="options"></plot>'
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+          component = vNode.componentInstance;
+        },
+        getViewContext() {
+          if (!component) {
+            return {};
+          }
+
+          return component.$refs.plotComponent.getViewContext();
+        },
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
+        },
+        getComponent() {
+          return component;
         }
-    };
+      };
+    }
+  };
 }
diff --git a/src/plugins/plot/README.md b/src/plugins/plot/README.md
index 4243e3cb999..7c868a38a63 100644
--- a/src/plugins/plot/README.md
+++ b/src/plugins/plot/README.md
@@ -1,7 +1,7 @@
 # Plot Plugin
 
 Enables plot visualization of telemetry data. This plugin adds a plot view that is available from the view switcher for 
-all telemetry objects. Two user createble objects are also added by this plugin, for Overlay and Stacked Plots. 
+all telemetry objects. Two user createable objects are also added by this plugin, for Overlay and Stacked Plots. 
 Telemetry objects can be added to Overlay and Stacked Plots via drag and drop.
 
 ## Installation
diff --git a/src/plugins/plot/actions/ViewActions.js b/src/plugins/plot/actions/ViewActions.js
new file mode 100644
index 00000000000..045c05e3216
--- /dev/null
+++ b/src/plugins/plot/actions/ViewActions.js
@@ -0,0 +1,54 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import { isPlotView } from '@/plugins/plot/actions/utils';
+
+const exportPNG = {
+  name: 'Export as PNG',
+  key: 'export-as-png',
+  description: "Export This View's Data as PNG",
+  cssClass: 'icon-download',
+  group: 'view',
+  invoke(objectPath, view) {
+    view.getViewContext().exportPNG();
+  }
+};
+
+const exportJPG = {
+  name: 'Export as JPG',
+  key: 'export-as-jpg',
+  description: "Export This View's Data as JPG",
+  cssClass: 'icon-download',
+  group: 'view',
+  invoke(objectPath, view) {
+    view.getViewContext().exportJPG();
+  }
+};
+
+const viewActions = [exportPNG, exportJPG];
+
+viewActions.forEach((action) => {
+  action.appliesTo = (objectPath, view = {}) => {
+    return isPlotView(view);
+  };
+});
+
+export default viewActions;
diff --git a/src/plugins/plot/actions/utils.js b/src/plugins/plot/actions/utils.js
new file mode 100644
index 00000000000..8df92f99792
--- /dev/null
+++ b/src/plugins/plot/actions/utils.js
@@ -0,0 +1,3 @@
+export function isPlotView(view) {
+  return view.key === 'plot-single' || view.key === 'plot-overlay' || view.key === 'plot-stacked';
+}
diff --git a/src/plugins/plot/axis/XAxis.vue b/src/plugins/plot/axis/XAxis.vue
index 42668b2b0b5..ceb58503312 100644
--- a/src/plugins/plot/axis/XAxis.vue
+++ b/src/plugins/plot/axis/XAxis.vue
@@ -1,5 +1,5 @@
 <!--
- Open MCT, Copyright (c) 2014-2021, United States Government
+ Open MCT, Copyright (c) 2014-2024, United States Government
  as represented by the Administrator of the National Aeronautics and Space
  Administration. All rights reserved.
 
@@ -21,131 +21,122 @@
 -->
 
 <template>
-<div v-if="loaded"
-     class="gl-plot-axis-area gl-plot-x has-local-controls"
->
-    <mct-ticks :axis-type="'xAxis'"
-               :position="'left'"
-               @plotTickWidth="onTickWidthChange"
-    />
+  <div v-if="loaded" class="gl-plot-axis-area gl-plot-x has-local-controls">
+    <MctTicks :axis-type="'xAxis'" :position="'left'" />
 
-    <div
-        class="gl-plot-label gl-plot-x-label"
-        :class="{'icon-gear': isEnabledXKeyToggle()}"
-    >
-        {{ xAxisLabel }}
+    <div class="gl-plot-label gl-plot-x-label" :class="{ 'icon-gear': isEnabledXKeyToggle() }">
+      {{ xAxisLabel }}
     </div>
 
     <select
-        v-show="isEnabledXKeyToggle()"
-        v-model="selectedXKeyOptionKey"
-        class="gl-plot-x-label__select local-controls--hidden"
-        @change="toggleXKeyOption()"
+      v-show="isEnabledXKeyToggle()"
+      v-model="selectedXKeyOptionKey"
+      class="gl-plot-x-label__select local-controls--hidden"
+      @change="toggleXKeyOption()"
     >
-        <option v-for="option in xKeyOptions"
-                :key="option.key"
-                :value="option.key"
-        >{{ option.name }}
-        </option>
+      <option v-for="option in xKeyOptions" :key="option.key" :value="option.key">
+        {{ option.name }}
+      </option>
     </select>
-</div>
+  </div>
 </template>
 
 <script>
-import MctTicks from "../MctTicks.vue";
-import eventHelpers from '../lib/eventHelpers';
-import configStore from "../configuration/configStore";
+import configStore from '../configuration/ConfigStore.js';
+import eventHelpers from '../lib/eventHelpers.js';
+import MctTicks from '../MctTicks.vue';
 
 export default {
-    components: {
-        MctTicks
+  components: {
+    MctTicks
+  },
+  inject: ['openmct', 'domainObject'],
+  props: {
+    seriesModel: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      selectedXKeyOptionKey: '',
+      xKeyOptions: [],
+      xAxis: {},
+      loaded: false,
+      xAxisLabel: ''
+    };
+  },
+  mounted() {
+    eventHelpers.extend(this);
+    this.xAxis = this.getXAxisFromConfig();
+    this.loaded = true;
+    this.setUpXAxisOptions();
+    this.openmct.time.on('timeSystemChanged', this.syncXAxisToTimeSystem);
+    this.listenTo(this.xAxis, 'change', this.setUpXAxisOptions);
+  },
+  beforeUnmount() {
+    this.openmct.time.off('timeSystemChanged', this.syncXAxisToTimeSystem);
+  },
+  methods: {
+    isEnabledXKeyToggle() {
+      const isSinglePlot = this.xKeyOptions && this.xKeyOptions.length > 1 && this.seriesModel;
+      const isFrozen = this.xAxis.get('frozen');
+      const inRealTimeMode = this.openmct.time.isRealTime();
+
+      return isSinglePlot && !isFrozen && !inRealTimeMode;
     },
-    inject: ['openmct', 'domainObject'],
-    props: {
-        seriesModel: {
-            type: Object,
-            default() {
-                return {};
-            }
-        }
+    getXAxisFromConfig() {
+      const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+      let config = configStore.get(configId);
+      if (config) {
+        return config.xAxis;
+      }
     },
-    data() {
-        return {
-            selectedXKeyOptionKey: '',
-            xKeyOptions: [],
-            xAxis: {},
-            loaded: false,
-            xAxisLabel: ''
-        };
+    toggleXKeyOption() {
+      const selectedXKey = this.selectedXKeyOptionKey;
+      const seriesData = this.seriesModel.getSeriesData();
+      const dataForSelectedXKey = seriesData ? seriesData[0][selectedXKey] : undefined;
+
+      if (dataForSelectedXKey !== undefined) {
+        this.xAxis.set('key', selectedXKey);
+      } else {
+        this.openmct.notifications.error(
+          'Cannot change x-axis view as no data exists for this view type.'
+        );
+        const xAxisKey = this.xAxis.get('key');
+        this.selectedXKeyOptionKey = this.getXKeyOption(xAxisKey).key;
+      }
     },
-    mounted() {
-        eventHelpers.extend(this);
-        this.xAxis = this.getXAxisFromConfig();
-        this.loaded = true;
-        this.setUpXAxisOptions();
-        this.openmct.time.on('timeSystem', this.syncXAxisToTimeSystem);
-        this.listenTo(this.xAxis, 'change', this.setUpXAxisOptions);
+    getXKeyOption(key) {
+      return this.xKeyOptions.find((option) => option.key === key);
     },
-    beforeDestroy() {
-        this.openmct.time.off('timeSystem', this.syncXAxisToTimeSystem);
+    syncXAxisToTimeSystem(timeSystem) {
+      const xAxisKey = this.xAxis.get('key');
+      if (xAxisKey !== timeSystem.key) {
+        this.xAxis.set('key', timeSystem.key);
+        this.xAxis.resetSeries();
+        this.setUpXAxisOptions();
+      }
     },
-    methods: {
-        isEnabledXKeyToggle() {
-            const isSinglePlot = this.xKeyOptions && this.xKeyOptions.length > 1 && this.seriesModel;
-            const isFrozen = this.xAxis.get('frozen');
-            const inRealTimeMode = this.openmct.time.clock();
-
-            return isSinglePlot && !isFrozen && !inRealTimeMode;
-        },
-        getXAxisFromConfig() {
-            const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-            let config = configStore.get(configId);
-            if (config) {
-                return config.xAxis;
-            }
-        },
-        toggleXKeyOption() {
-            const selectedXKey = this.selectedXKeyOptionKey;
-            const dataForSelectedXKey = this.seriesModel.data
-                ? this.seriesModel.data[0][selectedXKey]
-                : undefined;
+    setUpXAxisOptions() {
+      const xAxisKey = this.xAxis.get('key');
+      this.xKeyOptions = [];
 
-            if (dataForSelectedXKey !== undefined) {
-                this.xAxis.set('key', selectedXKey);
-            } else {
-                this.openmct.notifications.error('Cannot change x-axis view as no data exists for this view type.');
-                const xAxisKey = this.xAxis.get('key');
-                this.selectedXKeyOptionKey = this.getXKeyOption(xAxisKey).key;
-            }
-        },
-        getXKeyOption(key) {
-            return this.xKeyOptions.find(option => option.key === key);
-        },
-        syncXAxisToTimeSystem(timeSystem) {
-            const xAxisKey = this.xAxis.get('key');
-            if (xAxisKey !== timeSystem.key) {
-                this.xAxis.set('key', timeSystem.key);
-                this.xAxis.resetSeries();
-                this.setUpXAxisOptions();
-            }
-        },
-        setUpXAxisOptions() {
-            const xAxisKey = this.xAxis.get('key');
+      if (this.seriesModel.metadata) {
+        this.xKeyOptions = this.seriesModel.metadata.valuesForHints(['domain']).map(function (o) {
+          return {
+            name: o.name,
+            key: o.key
+          };
+        });
+      }
 
-            this.xKeyOptions = this.seriesModel.metadata
-                .valuesForHints(['domain'])
-                .map(function (o) {
-                    return {
-                        name: o.name,
-                        key: o.key
-                    };
-                });
-            this.xAxisLabel = this.xAxis.get('label');
-            this.selectedXKeyOptionKey = this.getXKeyOption(xAxisKey).key;
-        },
-        onTickWidthChange(width) {
-            this.$emit('tickWidthChanged', width);
-        }
+      this.xAxisLabel = this.xAxis.get('label');
+      this.selectedXKeyOptionKey =
+        this.xKeyOptions.length > 0 ? this.getXKeyOption(xAxisKey).key : xAxisKey;
     }
+  }
 };
 </script>
diff --git a/src/plugins/plot/axis/YAxis.vue b/src/plugins/plot/axis/YAxis.vue
index 1a2b1fd9794..24a4efee903 100644
--- a/src/plugins/plot/axis/YAxis.vue
+++ b/src/plugins/plot/axis/YAxis.vue
@@ -1,5 +1,5 @@
 <!--
- Open MCT, Copyright (c) 2014-2021, United States Government
+ Open MCT, Copyright (c) 2014-2024, United States Government
  as represented by the Administrator of the National Aeronautics and Space
  Administration. All rights reserved.
 
@@ -20,118 +20,263 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-<div v-if="loaded"
-     class="gl-plot-axis-area gl-plot-y has-local-controls"
-     :style="{
-         width: (tickWidth + 20) + 'px'
-     }"
->
-
-    <div v-if="singleSeries"
-         class="gl-plot-label gl-plot-y-label"
-         :class="{'icon-gear': (yKeyOptions.length > 1)}"
-    >{{ yAxisLabel }}
+  <div
+    v-if="loaded"
+    class="gl-plot-axis-area gl-plot-y has-local-controls js-plot-y-axis"
+    :style="yAxisStyle"
+  >
+    <div class="gl-plot-label gl-plot-y-label">
+      <div class="gl-plot-y-label-swatch-container">
+        <span
+          v-for="(colorAsHexString, index) in seriesColors"
+          :key="`${colorAsHexString}-${index}`"
+          class="plot-series-color-swatch"
+          :style="{ 'background-color': colorAsHexString }"
+        >
+        </span>
+      </div>
+      <span :class="{ 'icon-gear-after': yKeyOptions.length > 1 && singleSeries }">{{
+        canShowYAxisLabel ? yAxisLabel : `Y Axis ${id}`
+      }}</span>
+      <span
+        v-if="showVisibilityToggle"
+        :class="{ 'icon-eye-open': visible, 'icon-eye-disabled': !visible }"
+        @click="toggleSeriesVisibility"
+      ></span>
     </div>
-
-    <select v-if="yKeyOptions.length > 1 && singleSeries"
-            v-model="yAxisLabel"
-            class="gl-plot-y-label__select local-controls--hidden"
-            @change="toggleYAxisLabel"
+    <select
+      v-if="yKeyOptions.length > 1 && singleSeries"
+      v-model="yAxisLabel"
+      class="gl-plot-y-label__select local-controls--hidden"
+      @change="toggleYAxisLabel"
     >
-        <option v-for="(option, index) in yKeyOptions"
-                :key="index"
-                :value="option.name"
-                :selected="option.name === yAxisLabel"
-        >
-            {{ option.name }}
-        </option>
+      <option
+        v-for="(option, index) in yKeyOptions"
+        :key="index"
+        :value="option.name"
+        :selected="option.name === yAxisLabel"
+      >
+        {{ option.name }}
+      </option>
     </select>
 
-    <mct-ticks :axis-type="'yAxis'"
-               class="gl-plot-ticks"
-               :position="'top'"
-               @plotTickWidth="onTickWidthChange"
+    <MctTicks
+      :axis-id="id"
+      :axis-type="'yAxis'"
+      class="gl-plot-ticks"
+      :position="'top'"
+      @plot-tick-width="onTickWidthChange"
     />
-</div>
+  </div>
 </template>
 
 <script>
-import MctTicks from "../MctTicks.vue";
-import configStore from "../configuration/configStore";
+import configStore from '../configuration/ConfigStore.js';
+import eventHelpers from '../lib/eventHelpers.js';
+import MctTicks from '../MctTicks.vue';
+
+const AXIS_PADDING = 20;
 
 export default {
-    components: {
-        MctTicks
-    },
-    inject: ['openmct', 'domainObject'],
-    props: {
-        singleSeries: {
-            type: Boolean,
-            default() {
-                return true;
-            }
-        },
-        seriesModel: {
-            type: Object,
-            default() {
-                return {};
-            }
-        },
-        tickWidth: {
-            type: Number,
-            default() {
-                return 0;
-            }
+  components: {
+    MctTicks
+  },
+  inject: ['openmct', 'domainObject'],
+  props: {
+    id: {
+      type: Number,
+      default() {
+        return 1;
+      }
+    },
+    tickWidth: {
+      type: Number,
+      default() {
+        return 0;
+      }
+    },
+    plotLeftTickWidth: {
+      type: Number,
+      default() {
+        return 0;
+      }
+    },
+    usedTickWidth: {
+      type: Number,
+      default() {
+        return 0;
+      }
+    },
+    hasMultipleLeftAxes: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    position: {
+      type: String,
+      default() {
+        return 'left';
+      }
+    }
+  },
+  emits: ['plot-y-tick-width', 'toggle-axis-visibility', 'y-key-changed'],
+  data() {
+    return {
+      yAxisLabel: 'none',
+      loaded: false,
+      yKeyOptions: [],
+      hasSameRangeValue: true,
+      singleSeries: true,
+      mainYAxisId: null,
+      hasAdditionalYAxes: false,
+      seriesColors: [],
+      visible: true
+    };
+  },
+  computed: {
+    showVisibilityToggle() {
+      return this.domainObject.type === 'telemetry.plot.overlay';
+    },
+    canShowYAxisLabel() {
+      return this.singleSeries === true || this.hasSameRangeValue === true;
+    },
+    yAxisStyle() {
+      let style = {
+        width: `${this.tickWidth + AXIS_PADDING}px`
+      };
+      const multipleAxesPadding = this.hasMultipleLeftAxes ? AXIS_PADDING : 0;
+
+      if (this.position === 'right') {
+        style.left = `-${this.tickWidth + AXIS_PADDING}px`;
+      } else {
+        const thisIsTheSecondLeftAxis = this.id - 1 > 0;
+        if (this.hasMultipleLeftAxes && thisIsTheSecondLeftAxis) {
+          style.left = `${this.plotLeftTickWidth - this.usedTickWidth - this.tickWidth}px`;
+          style['border-right'] = `1px solid`;
+        } else {
+          style.left = `${this.plotLeftTickWidth - this.tickWidth + multipleAxesPadding}px`;
+        }
+      }
+
+      return style;
+    }
+  },
+  mounted() {
+    this.seriesModels = [];
+    eventHelpers.extend(this);
+    this.initAxisAndSeriesConfig();
+    this.loaded = true;
+    this.setUpYAxisOptions();
+  },
+  methods: {
+    initAxisAndSeriesConfig() {
+      const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+      let config = configStore.get(configId);
+      if (config) {
+        this.mainYAxisId = config.yAxis.id;
+        this.hasAdditionalYAxes = config?.additionalYAxes.length;
+        if (this.id && this.id !== this.mainYAxisId) {
+          this.yAxis = config.additionalYAxes.find((yAxis) => yAxis.id === this.id);
+        } else {
+          this.yAxis = config.yAxis;
         }
+
+        this.config = config;
+        this.listenTo(this.config.series, 'add', this.addSeries, this);
+        this.listenTo(this.config.series, 'remove', this.removeSeries, this);
+        this.listenTo(this.config.series, 'reorder', this.addOrRemoveSeries, this);
+
+        this.config.series.models.forEach(this.addSeries, this);
+      }
     },
-    data() {
-        return {
-            yAxisLabel: 'none',
-            loaded: false
-        };
+    addOrRemoveSeries(series) {
+      const yAxisId = series.get('yAxisId');
+      if (yAxisId === this.id) {
+        this.addSeries(series);
+      } else {
+        this.removeSeries(series);
+      }
+    },
+    addSeries(series, index) {
+      const yAxisId = series.get('yAxisId');
+      const seriesIndex = this.seriesModels.findIndex((model) =>
+        this.openmct.objects.areIdsEqual(model.get('identifier'), series.get('identifier'))
+      );
+
+      if (yAxisId === this.id && seriesIndex < 0) {
+        this.seriesModels.push(series);
+        this.processSeries();
+        this.setUpYAxisOptions();
+      }
+
+      this.listenTo(series, 'change:yAxisId', this.addOrRemoveSeries.bind(this, series), this);
+      this.listenTo(series, 'change:color', this.updateSeriesColors.bind(this, series), this);
     },
-    mounted() {
-        this.yAxis = this.getYAxisFromConfig();
-        this.loaded = true;
+    removeSeries(plotSeries) {
+      const seriesIndex = this.seriesModels.findIndex((model) =>
+        this.openmct.objects.areIdsEqual(model.get('identifier'), plotSeries.get('identifier'))
+      );
+      if (seriesIndex > -1) {
+        this.seriesModels.splice(seriesIndex, 1);
+        this.processSeries();
         this.setUpYAxisOptions();
+      }
     },
-    methods: {
-        getYAxisFromConfig() {
-            const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-            let config = configStore.get(configId);
-            if (config) {
-                return config.yAxis;
-            }
-        },
-        setUpYAxisOptions() {
-            this.yKeyOptions = this.seriesModel.metadata
-                .valuesForHints(['range'])
-                .map(function (o) {
-                    return {
-                        name: o.name,
-                        key: o.key
-                    };
-                });
-
-            //  set yAxisLabel if none is set yet
-            if (this.yAxisLabel === 'none') {
-                let yKey = this.seriesModel.model.yKey;
-                let yKeyModel = this.yKeyOptions.filter(o => o.key === yKey)[0];
-
-                this.yAxisLabel = yKeyModel.name;
-            }
-        },
-        toggleYAxisLabel() {
-            let yAxisObject = this.yKeyOptions.filter(o => o.name === this.yAxisLabel)[0];
-
-            if (yAxisObject) {
-                this.$emit('yKeyChanged', yAxisObject.key);
-                this.yAxis.set('label', this.yAxisLabel);
-            }
-        },
-        onTickWidthChange(width) {
-            this.$emit('tickWidthChanged', width);
-        }
+    processSeries() {
+      this.hasSameRangeValue = this.seriesModels.every((model) => {
+        return model.get('yKey') === this.seriesModels[0].get('yKey');
+      });
+      this.singleSeries = this.seriesModels.length === 1;
+      this.updateSeriesColors();
+    },
+    updateSeriesColors() {
+      this.seriesColors = this.seriesModels.map((model) => {
+        return model.get('color').asHexString();
+      });
+    },
+    setUpYAxisOptions() {
+      this.yKeyOptions = [];
+      if (!this.seriesModels.length) {
+        return;
+      }
+
+      const seriesModel = this.seriesModels[0];
+      if (seriesModel.metadata) {
+        this.yKeyOptions = seriesModel.metadata.valuesForHints(['range']).map(function (o) {
+          return {
+            name: o.name,
+            key: o.key
+          };
+        });
+      }
+
+      //  set yAxisLabel if none is set yet
+      if (this.yAxisLabel === 'none') {
+        this.yAxisLabel = this.yAxis.get('label');
+      }
+    },
+    toggleYAxisLabel() {
+      let yAxisObject = this.yKeyOptions.filter((o) => o.name === this.yAxisLabel)[0];
+
+      if (yAxisObject) {
+        this.$emit('y-key-changed', yAxisObject.key, this.id);
+        this.yAxis.set('label', this.yAxisLabel);
+      }
+    },
+    onTickWidthChange(data) {
+      this.$emit('plot-y-tick-width', {
+        width: data.width,
+        yAxisId: this.id
+      });
+    },
+    toggleSeriesVisibility() {
+      this.visible = !this.visible;
+      this.$emit('toggle-axis-visibility', {
+        id: this.id,
+        visible: this.visible
+      });
     }
+  }
 };
 </script>
diff --git a/src/plugins/plot/chart/LimitLabel.vue b/src/plugins/plot/chart/LimitLabel.vue
index dff4429b31a..bd68c920ff2 100644
--- a/src/plugins/plot/chart/LimitLabel.vue
+++ b/src/plugins/plot/chart/LimitLabel.vue
@@ -1,51 +1,70 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div class="c-plot-limit"
-     :style="styleObj"
-     :class="limitClass"
->
+  <div class="c-plot-limit" :style="styleObj" :class="limitClass">
     <div class="c-plot-limit__label">
-        <span class="c-plot-limit__direction-icon"></span>
-        <span class="c-plot-limit__severity-icon"></span>
-        <span class="c-plot-limit__limit-value">{{ limit.value }}</span>
-        <span class="c-plot-limit__series-color-swatch"
-              :style="{ 'background-color': limit.seriesColor }"
-        ></span>
-        <span class="c-plot-limit__series-name">{{ limit.name }}</span>
+      <span class="c-plot-limit__direction-icon"></span>
+      <span class="c-plot-limit__severity-icon"></span>
+      <span class="c-plot-limit__limit-value">{{ limit.value }}</span>
+      <span
+        class="c-plot-limit__series-color-swatch"
+        :style="{ 'background-color': limit.seriesColor }"
+      ></span>
+      <span class="c-plot-limit__series-name">{{ limit.name }}</span>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
-import { getLimitClass } from "./limitUtil";
+import { getLimitClass } from './limitUtil.js';
 
 export default {
-    props: {
-        limit: {
-            type: Object,
-            required: true,
-            default() {
-                return {};
-            }
-        },
-        point: {
-            type: Object,
-            required: true,
-            default() {
-                return {};
-            }
-        }
+  props: {
+    limit: {
+      type: Object,
+      required: true,
+      default() {
+        return {};
+      }
     },
-    computed: {
-        styleObj() {
-            const top = `${this.point.top}px`;
+    point: {
+      type: Object,
+      required: true,
+      default() {
+        return {};
+      }
+    }
+  },
+  computed: {
+    styleObj() {
+      const top = `${this.point.top}px`;
 
-            return {
-                'top': top
-            };
-        },
-        limitClass() {
-            return getLimitClass(this.limit, 'c-plot-limit--');
-        }
+      return {
+        top: top
+      };
+    },
+    limitClass() {
+      return getLimitClass(this.limit, 'c-plot-limit--');
     }
+  }
 };
 </script>
diff --git a/src/plugins/plot/chart/LimitLine.vue b/src/plugins/plot/chart/LimitLine.vue
index 7fe45be2976..cc971abcd9a 100644
--- a/src/plugins/plot/chart/LimitLine.vue
+++ b/src/plugins/plot/chart/LimitLine.vue
@@ -1,40 +1,58 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div :style="styleObj"
-     class="c-plot-limit-line js-limit-line"
-     :class="limitClass"
-></div>
+  <div :style="styleObj" class="c-plot-limit-line js-limit-line" :class="limitClass"></div>
 </template>
 
 <script>
-import { getLimitClass } from "./limitUtil";
+import { getLimitClass } from './limitUtil.js';
 
 export default {
-    props: {
-        point: {
-            type: Object,
-            required: true,
-            default() {
-                return {};
-            }
-        },
-        limit: {
-            type: Object,
-            default() {
-                return {};
-            }
-        }
+  props: {
+    point: {
+      type: Object,
+      required: true,
+      default() {
+        return {};
+      }
     },
-    computed: {
-        styleObj() {
-            const top = `${this.point.top}px`;
+    limit: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  computed: {
+    styleObj() {
+      const top = `${this.point.top}px`;
 
-            return {
-                'top': top
-            };
-        },
-        limitClass() {
-            return getLimitClass(this.limit, 'c-plot-limit-line--');
-        }
+      return {
+        top: top
+      };
+    },
+    limitClass() {
+      return getLimitClass(this.limit, 'c-plot-limit-line--');
     }
+  }
 };
 </script>
diff --git a/src/plugins/plot/chart/MCTChartAlarmLineSet.js b/src/plugins/plot/chart/MCTChartAlarmLineSet.js
index 918833e73c0..1a2d11afe67 100644
--- a/src/plugins/plot/chart/MCTChartAlarmLineSet.js
+++ b/src/plugins/plot/chart/MCTChartAlarmLineSet.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,89 +20,107 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import eventHelpers from '../lib/eventHelpers';
+import eventHelpers from '../lib/eventHelpers.js';
 
 export default class MCTChartAlarmLineSet {
-    constructor(series, chart, offset, bounds) {
-        this.series = series;
-        this.chart = chart;
-        this.offset = offset;
-        this.bounds = bounds;
-        this.limits = [];
+  /**
+   * @param {Bounds} bounds
+   */
+  constructor(series, chart, offset, bounds) {
+    this.series = series;
+    this.chart = chart;
+    this.offset = offset;
+    this.bounds = bounds;
+    this.limits = [];
 
-        eventHelpers.extend(this);
-        this.listenTo(series, 'limitBounds', this.updateBounds, this);
-        this.listenTo(series, 'limits', this.getLimitPoints, this);
-        this.listenTo(series, 'change:xKey', this.getLimitPoints, this);
+    eventHelpers.extend(this);
+    this.listenTo(series, 'limitBounds', this.updateBounds, this);
+    this.listenTo(series, 'limits', this.getLimitPoints, this);
+    this.listenTo(series, 'change:xKey', this.getLimitPoints, this);
 
-        if (series.limits) {
-            this.getLimitPoints(series);
-        }
+    if (series.limits) {
+      this.getLimitPoints(series);
     }
+  }
 
-    updateBounds(bounds) {
-        this.bounds = bounds;
-        this.getLimitPoints(this.series);
-    }
-
-    color() {
-        return this.series.get('color');
-    }
+  /**
+   * @param {Bounds} bounds
+   */
+  updateBounds(bounds) {
+    this.bounds = bounds;
+    this.getLimitPoints(this.series);
+  }
 
-    name() {
-        return this.series.get('name');
-    }
+  color() {
+    return this.series.get('color');
+  }
 
-    makePoint(point, series) {
-        if (!this.offset.xVal) {
-            this.chart.setOffset(point, undefined, series);
-        }
+  name() {
+    return this.series.get('name');
+  }
 
-        return {
-            x: this.offset.xVal(point, series),
-            y: this.offset.yVal(point, series)
-        };
+  makePoint(point, series) {
+    if (!this.offset.xVal) {
+      this.chart.setOffset(point, undefined, series);
     }
 
-    getLimitPoints(series) {
-        this.limits = [];
-        let xKey = series.get('xKey');
-        Object.keys(series.limits).forEach((key) => {
-            const limitForLevel = series.limits[key];
-            if (limitForLevel.high) {
-                this.limits.push({
-                    seriesKey: series.keyString,
-                    level: key.toLowerCase(),
-                    name: this.name(),
-                    seriesColor: series.get('color').asHexString(),
-                    point: this.makePoint(Object.assign({ [xKey]: this.bounds.start }, limitForLevel.high), series),
-                    value: series.getYVal(limitForLevel.high),
-                    color: limitForLevel.high.color,
-                    isUpper: true
-                });
-            }
+    return {
+      x: this.offset.xVal(point, series),
+      y: this.offset.yVal(point, series)
+    };
+  }
 
-            if (limitForLevel.low) {
-                this.limits.push({
-                    seriesKey: series.keyString,
-                    level: key.toLowerCase(),
-                    name: this.name(),
-                    seriesColor: series.get('color').asHexString(),
-                    point: this.makePoint(Object.assign({ [xKey]: this.bounds.start }, limitForLevel.low), series),
-                    value: series.getYVal(limitForLevel.low),
-                    color: limitForLevel.low.color,
-                    isUpper: false
-                });
-            }
-        }, this);
-    }
+  getLimitPoints(series) {
+    this.limits = [];
+    let xKey = series.get('xKey');
+    Object.keys(series.limits).forEach((key) => {
+      const limitForLevel = series.limits[key];
+      if (limitForLevel.high) {
+        this.limits.push({
+          seriesKey: series.keyString,
+          level: key.toLowerCase(),
+          name: this.name(),
+          seriesColor: series.get('color').asHexString(),
+          point: this.makePoint(
+            Object.assign({ [xKey]: this.bounds.start }, limitForLevel.high),
+            series
+          ),
+          value: series.getYVal(limitForLevel.high),
+          color: limitForLevel.high.color,
+          isUpper: true
+        });
+      }
 
-    reset() {
-        this.limits = [];
-    }
+      if (limitForLevel.low) {
+        this.limits.push({
+          seriesKey: series.keyString,
+          level: key.toLowerCase(),
+          name: this.name(),
+          seriesColor: series.get('color').asHexString(),
+          point: this.makePoint(
+            Object.assign({ [xKey]: this.bounds.start }, limitForLevel.low),
+            series
+          ),
+          value: series.getYVal(limitForLevel.low),
+          color: limitForLevel.low.color,
+          isUpper: false
+        });
+      }
+    }, this);
+  }
 
-    destroy() {
-        this.stopListening();
+  reset() {
+    this.limits = [];
+    if (this.series.limits) {
+      this.getLimitPoints(this.series);
     }
+  }
 
+  destroy() {
+    this.stopListening();
+  }
 }
+
+/**
+@typedef {import('@/api/time/TimeContext').Bounds} Bounds
+*/
diff --git a/src/plugins/plot/chart/MCTChartAlarmPointSet.js b/src/plugins/plot/chart/MCTChartAlarmPointSet.js
index 8167720f654..a4a227d2f7e 100644
--- a/src/plugins/plot/chart/MCTChartAlarmPointSet.js
+++ b/src/plugins/plot/chart/MCTChartAlarmPointSet.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,48 +20,48 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import eventHelpers from '../lib/eventHelpers';
+import eventHelpers from '../lib/eventHelpers.js';
 
 export default class MCTChartAlarmPointSet {
-    constructor(series, chart, offset) {
-        this.series = series;
-        this.chart = chart;
-        this.offset = offset;
-        this.points = [];
+  constructor(series, chart, offset) {
+    this.series = series;
+    this.chart = chart;
+    this.offset = offset;
+    this.points = [];
 
-        eventHelpers.extend(this);
+    eventHelpers.extend(this);
 
-        this.listenTo(series, 'add', this.append, this);
-        this.listenTo(series, 'remove', this.remove, this);
-        this.listenTo(series, 'reset', this.reset, this);
-        this.listenTo(series, 'destroy', this.destroy, this);
+    this.listenTo(series, 'add', this.append, this);
+    this.listenTo(series, 'remove', this.remove, this);
+    this.listenTo(series, 'reset', this.reset, this);
+    this.listenTo(series, 'destroy', this.destroy, this);
 
-        series.data.forEach(function (point, index) {
-            this.append(point, index, series);
-        }, this);
-    }
+    this.series.getSeriesData().forEach(function (point, index) {
+      this.append(point, index, series);
+    }, this);
+  }
 
-    append(datum) {
-        if (datum.mctLimitState) {
-            this.points.push({
-                x: this.offset.xVal(datum, this.series),
-                y: this.offset.yVal(datum, this.series),
-                datum: datum
-            });
-        }
+  append(datum) {
+    if (datum.mctLimitState) {
+      this.points.push({
+        x: this.offset.xVal(datum, this.series),
+        y: this.offset.yVal(datum, this.series),
+        datum: datum
+      });
     }
+  }
 
-    remove(datum) {
-        this.points = this.points.filter(function (p) {
-            return p.datum !== datum;
-        });
-    }
+  remove(datum) {
+    this.points = this.points.filter(function (p) {
+      return p.datum !== datum;
+    });
+  }
 
-    reset() {
-        this.points = [];
-    }
+  reset() {
+    this.points = [];
+  }
 
-    destroy() {
-        this.stopListening();
-    }
+  destroy() {
+    this.stopListening();
+  }
 }
diff --git a/src/plugins/plot/chart/MCTChartLineLinear.js b/src/plugins/plot/chart/MCTChartLineLinear.js
index bc57d846598..2afd6d8fdb4 100644
--- a/src/plugins/plot/chart/MCTChartLineLinear.js
+++ b/src/plugins/plot/chart/MCTChartLineLinear.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,12 +20,11 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import MCTChartSeriesElement from './MCTChartSeriesElement';
+import MCTChartSeriesElement from './MCTChartSeriesElement.js';
 
 export default class MCTChartLineLinear extends MCTChartSeriesElement {
-    addPoint(point, start, count) {
-        this.buffer[start] = point.x;
-        this.buffer[start + 1] = point.y;
-    }
+  addPoint(point, start) {
+    this.buffer[start] = point.x;
+    this.buffer[start + 1] = point.y;
+  }
 }
-
diff --git a/src/plugins/plot/chart/MCTChartLineStepAfter.js b/src/plugins/plot/chart/MCTChartLineStepAfter.js
index d872c1d8a01..31162fa787e 100644
--- a/src/plugins/plot/chart/MCTChartLineStepAfter.js
+++ b/src/plugins/plot/chart/MCTChartLineStepAfter.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,55 +20,54 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import MCTChartSeriesElement from './MCTChartSeriesElement';
+import MCTChartSeriesElement from './MCTChartSeriesElement.js';
 
 export default class MCTChartLineStepAfter extends MCTChartSeriesElement {
-    removePoint(point, index, count) {
-        if (index > 0 && index / 2 < this.count) {
-            this.buffer[index + 1] = this.buffer[index - 1];
-        }
+  removePoint(index) {
+    if (index > 0 && index / 2 < this.count) {
+      this.buffer[index + 1] = this.buffer[index - 1];
     }
+  }
 
-    vertexCountForPointAtIndex(index) {
-        if (index === 0 && this.count === 0) {
-            return 2;
-        }
-
-        return 4;
+  vertexCountForPointAtIndex(index) {
+    if (index === 0 && this.count === 0) {
+      return 2;
     }
 
-    startIndexForPointAtIndex(index) {
-        if (index === 0) {
-            return 0;
-        }
+    return 4;
+  }
 
-        return 2 + ((index - 1) * 4);
+  startIndexForPointAtIndex(index) {
+    if (index === 0) {
+      return 0;
     }
 
-    addPoint(point, start, count) {
-        if (start === 0 && this.count === 0) {
-            // First point is easy.
-            this.buffer[start] = point.x;
-            this.buffer[start + 1] = point.y; // one point
-        } else if (start === 0 && this.count > 0) {
-            // Unshifting requires adding an extra point.
-            this.buffer[start] = point.x;
-            this.buffer[start + 1] = point.y;
-            this.buffer[start + 2] = this.buffer[start + 4];
-            this.buffer[start + 3] = point.y;
-        } else {
-            // Appending anywhere in line, insert standard two points.
-            this.buffer[start] = point.x;
-            this.buffer[start + 1] = this.buffer[start - 1];
-            this.buffer[start + 2] = point.x;
-            this.buffer[start + 3] = point.y;
+    return 2 + (index - 1) * 4;
+  }
+
+  addPoint(point, start) {
+    if (start === 0 && this.count === 0) {
+      // First point is easy.
+      this.buffer[start] = point.x;
+      this.buffer[start + 1] = point.y; // one point
+    } else if (start === 0 && this.count > 0) {
+      // Unshifting requires adding an extra point.
+      this.buffer[start] = point.x;
+      this.buffer[start + 1] = point.y;
+      this.buffer[start + 2] = this.buffer[start + 4];
+      this.buffer[start + 3] = point.y;
+    } else {
+      // Appending anywhere in line, insert standard two points.
+      this.buffer[start] = point.x;
+      this.buffer[start + 1] = this.buffer[start - 1];
+      this.buffer[start + 2] = point.x;
+      this.buffer[start + 3] = point.y;
 
-            if (start < this.count * 2) {
-                // Insert into the middle, need to update the following
-                // point.
-                this.buffer[start + 5] = point.y;
-            }
-        }
+      if (start < this.count * 2) {
+        // Insert into the middle, need to update the following
+        // point.
+        this.buffer[start + 5] = point.y;
+      }
     }
+  }
 }
-
diff --git a/src/plugins/plot/chart/MCTChartPointSet.js b/src/plugins/plot/chart/MCTChartPointSet.js
index 190075ee003..58dbbb74549 100644
--- a/src/plugins/plot/chart/MCTChartPointSet.js
+++ b/src/plugins/plot/chart/MCTChartPointSet.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,13 +20,12 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import MCTChartSeriesElement from './MCTChartSeriesElement';
+import MCTChartSeriesElement from './MCTChartSeriesElement.js';
 
 // TODO: Is this needed? This is identical to MCTChartLineLinear. Why is it a different class?
 export default class MCTChartPointSet extends MCTChartSeriesElement {
-    addPoint(point, start, count) {
-        this.buffer[start] = point.x;
-        this.buffer[start + 1] = point.y;
-    }
+  addPoint(point, start) {
+    this.buffer[start] = point.x;
+    this.buffer[start + 1] = point.y;
+  }
 }
-
diff --git a/src/plugins/plot/chart/MCTChartSeriesElement.js b/src/plugins/plot/chart/MCTChartSeriesElement.js
index 6a28b8664ef..7a318433ecb 100644
--- a/src/plugins/plot/chart/MCTChartSeriesElement.js
+++ b/src/plugins/plot/chart/MCTChartSeriesElement.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,138 +20,150 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import eventHelpers from '../lib/eventHelpers';
+import eventHelpers from '../lib/eventHelpers.js';
 
+/** @abstract */
 export default class MCTChartSeriesElement {
-    constructor(series, chart, offset) {
-        this.series = series;
-        this.chart = chart;
-        this.offset = offset;
-        this.buffer = new Float32Array(20000);
-        this.count = 0;
-
-        eventHelpers.extend(this);
-
-        this.listenTo(series, 'add', this.append, this);
-        this.listenTo(series, 'remove', this.remove, this);
-        this.listenTo(series, 'reset', this.reset, this);
-        this.listenTo(series, 'destroy', this.destroy, this);
-        series.data.forEach(function (point, index) {
-            this.append(point, index, series);
-        }, this);
+  constructor(series, chart, offset) {
+    this.series = series;
+    this.chart = chart;
+    this.offset = offset;
+    this.buffer = new Float32Array(20000);
+    this.count = 0;
+
+    eventHelpers.extend(this);
+
+    this.listenTo(series, 'add', this.append, this);
+    this.listenTo(series, 'remove', this.remove, this);
+    this.listenTo(series, 'reset', this.reset, this);
+    this.listenTo(series, 'destroy', this.destroy, this);
+    this.series.getSeriesData().forEach(function (point, index) {
+      this.append(point, index, series);
+    }, this);
+  }
+
+  getBuffer() {
+    if (this.isTempBuffer) {
+      this.buffer = new Float32Array(this.buffer);
+      this.isTempBuffer = false;
     }
 
-    getBuffer() {
-        if (this.isTempBuffer) {
-            this.buffer = new Float32Array(this.buffer);
-            this.isTempBuffer = false;
-        }
+    return this.buffer;
+  }
 
-        return this.buffer;
-    }
+  color() {
+    return this.series.get('color');
+  }
 
-    color() {
-        return this.series.get('color');
-    }
+  vertexCountForPointAtIndex(index) {
+    return 2;
+  }
 
-    vertexCountForPointAtIndex(index) {
-        return 2;
-    }
+  startIndexForPointAtIndex(index) {
+    return 2 * index;
+  }
 
-    startIndexForPointAtIndex(index) {
-        return 2 * index;
+  removeSegments(index, count) {
+    const target = index;
+    const start = index + count;
+    const end = this.count * 2;
+    this.buffer.copyWithin(target, start, end);
+    for (let zero = end - count; zero < end; zero++) {
+      this.buffer[zero] = 0;
     }
+  }
 
-    removeSegments(index, count) {
-        const target = index;
-        const start = index + count;
-        const end = this.count * 2;
-        this.buffer.copyWithin(target, start, end);
-        for (let zero = end - count; zero < end; zero++) {
-            this.buffer[zero] = 0;
-        }
-    }
+  /** @abstract */
+  removePoint(index) {}
 
-    removePoint(point, index, count) {
-        // by default, do nothing.
-    }
+  /** @abstract */
+  addPoint(point, index) {}
 
-    remove(point, index, series) {
-        const vertexCount = this.vertexCountForPointAtIndex(index);
-        const removalPoint = this.startIndexForPointAtIndex(index);
+  remove(point, index, series) {
+    const vertexCount = this.vertexCountForPointAtIndex(index);
+    const removalPoint = this.startIndexForPointAtIndex(index);
 
-        this.removeSegments(removalPoint, vertexCount);
+    this.removeSegments(removalPoint, vertexCount);
 
-        this.removePoint(
-            this.makePoint(point, series),
-            removalPoint,
-            vertexCount
-        );
-        this.count -= (vertexCount / 2);
-    }
+    // TODO useless makePoint call?
+    this.makePoint(point, series);
+    this.removePoint(removalPoint);
 
-    makePoint(point, series) {
-        if (!this.offset.xVal) {
-            this.chart.setOffset(point, undefined, series);
-        }
+    this.count -= vertexCount / 2;
+  }
 
-        return {
-            x: this.offset.xVal(point, series),
-            y: this.offset.yVal(point, series)
-        };
+  makePoint(point, series) {
+    if (!this.offset.xVal) {
+      this.chart.setOffset(point, undefined, series);
     }
 
-    append(point, index, series) {
-        const pointsRequired = this.vertexCountForPointAtIndex(index);
-        const insertionPoint = this.startIndexForPointAtIndex(index);
-        this.growIfNeeded(pointsRequired);
-        this.makeInsertionPoint(insertionPoint, pointsRequired);
-        this.addPoint(
-            this.makePoint(point, series),
-            insertionPoint,
-            pointsRequired
-        );
-        this.count += (pointsRequired / 2);
+    return {
+      x: this.offset.xVal(point, series),
+      y: this.offset.yVal(point, series)
+    };
+  }
+
+  append(point, index, series) {
+    const pointsRequired = this.vertexCountForPointAtIndex(index);
+    const insertionPoint = this.startIndexForPointAtIndex(index);
+    this.growIfNeeded(pointsRequired);
+    this.makeInsertionPoint(insertionPoint, pointsRequired);
+    this.addPoint(this.makePoint(point, series), insertionPoint);
+    this.count += pointsRequired / 2;
+  }
+
+  makeInsertionPoint(insertionPoint, pointsRequired) {
+    if (this.count * 2 > insertionPoint) {
+      if (!this.isTempBuffer) {
+        this.buffer = Array.prototype.slice.apply(this.buffer);
+        this.isTempBuffer = true;
+      }
+
+      const target = insertionPoint + pointsRequired;
+      let start = insertionPoint;
+      for (; start < target; start++) {
+        this.buffer.splice(start, 0, 0);
+      }
     }
-
-    makeInsertionPoint(insertionPoint, pointsRequired) {
-        if (this.count * 2 > insertionPoint) {
-            if (!this.isTempBuffer) {
-                this.buffer = Array.prototype.slice.apply(this.buffer);
-                this.isTempBuffer = true;
-            }
-
-            const target = insertionPoint + pointsRequired;
-            let start = insertionPoint;
-            for (; start < target; start++) {
-                this.buffer.splice(start, 0, 0);
-            }
-        }
+  }
+
+  reset() {
+    this.buffer = new Float32Array(20000);
+    this.count = 0;
+    if (this.offset.x) {
+      this.series.getSeriesData().forEach(function (point, index) {
+        this.append(point, index, this.series);
+      }, this);
     }
+  }
+
+  growIfNeeded(pointsRequired) {
+    const remainingPoints = this.buffer.length - this.count * 2;
+    let temp;
 
-    reset() {
-        this.buffer = new Float32Array(20000);
-        this.count = 0;
-        if (this.offset.x) {
-            this.series.data.forEach(function (point, index) {
-                this.append(point, index, this.series);
-            }, this);
-        }
+    if (remainingPoints <= pointsRequired) {
+      temp = new Float32Array(this.buffer.length + 20000);
+      temp.set(this.buffer);
+      this.buffer = temp;
     }
+  }
 
-    growIfNeeded(pointsRequired) {
-        const remainingPoints = this.buffer.length - this.count * 2;
-        let temp;
+  destroy() {
+    this.stopListening();
+  }
+}
 
-        if (remainingPoints <= pointsRequired) {
-            temp = new Float32Array(this.buffer.length + 20000);
-            temp.set(this.buffer);
-            this.buffer = temp;
-        }
-    }
+/** @typedef {any} TODO */
 
-    destroy() {
-        this.stopListening();
-    }
+/** @typedef {import('../configuration/PlotSeries').default} PlotSeries */
 
-}
+/**
+@typedef {{
+    x: (x: number) => number
+    y: (y: number) => number
+    xVal: (point: Point, pSeries: PlotSeries) => number
+    yVal: (point: Point, pSeries: PlotSeries) => number
+    xKey: TODO
+    yKey: TODO
+}} Offset
+*/
diff --git a/src/plugins/plot/chart/MctChart.vue b/src/plugins/plot/chart/MctChart.vue
index e6db5cd4392..3af51ac03c4 100644
--- a/src/plugins/plot/chart/MctChart.vue
+++ b/src/plugins/plot/chart/MctChart.vue
@@ -1,5 +1,5 @@
 <!--
- Open MCT, Copyright (c) 2014-2021, United States Government
+ Open MCT, Copyright (c) 2014-2024, United States Government
  as represented by the Administrator of the National Aeronautics and Space
  Administration. All rights reserved.
 
@@ -19,602 +19,1081 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
+
 <template>
-<div class="gl-plot-chart-area">
-    <span v-html="canvasTemplate"></span>
-    <span v-html="canvasTemplate"></span>
-    <div ref="limitArea"
-         class="js-limit-area"
-    ></div>
-</div>
+  <div ref="chart" class="gl-plot-chart-area">
+    <canvas
+      id="2dContext"
+      :style="canvasStyle"
+      class="js-overlay-canvas"
+      role="img"
+      aria-label="Overlay Canvas"
+    ></canvas>
+    <canvas
+      id="webglContext"
+      :style="canvasStyle"
+      class="js-main-canvas"
+      role="img"
+      aria-label="Plot Canvas"
+    ></canvas>
+    <div ref="limitArea" class="js-limit-area" aria-hidden="true">
+      <limit-label
+        v-for="(limitLabel, index) in visibleLimitLabels"
+        :key="`limitLabel-${limitLabel.limit.seriesKey}-${index}`"
+        :point="limitLabel.point"
+        :limit="limitLabel.limit"
+      ></limit-label>
+      <limit-line
+        v-for="(limitLine, index) in visibleLimitLines"
+        :key="`limitLine-${limitLine.limit.seriesKey}${index}`"
+        :point="limitLine.point"
+        :limit="limitLine.limit"
+      ></limit-line>
+    </div>
+  </div>
 </template>
 
 <script>
+import mount from 'utils/mount';
+import { toRaw } from 'vue';
 
-import eventHelpers from "../lib/eventHelpers";
-import { DrawLoader } from '../draw/DrawLoader';
-import MCTChartLineLinear from './MCTChartLineLinear';
-import MCTChartLineStepAfter from './MCTChartLineStepAfter';
-import MCTChartPointSet from './MCTChartPointSet';
-import MCTChartAlarmPointSet from './MCTChartAlarmPointSet';
-import MCTChartAlarmLineSet from "./MCTChartAlarmLineSet";
-import configStore from "../configuration/configStore";
-import PlotConfigurationModel from "../configuration/PlotConfigurationModel";
-import LimitLine from "./LimitLine.vue";
-import LimitLabel from "./LimitLabel.vue";
-import Vue from 'vue';
+import configStore from '../configuration/ConfigStore.js';
+import PlotConfigurationModel from '../configuration/PlotConfigurationModel.js';
+import { DrawLoader } from '../draw/DrawLoader.js';
+import eventHelpers from '../lib/eventHelpers.js';
+import LimitLabel from './LimitLabel.vue';
+import LimitLine from './LimitLine.vue';
+import MCTChartAlarmLineSet from './MCTChartAlarmLineSet.js';
+import MCTChartAlarmPointSet from './MCTChartAlarmPointSet.js';
+import MCTChartLineLinear from './MCTChartLineLinear.js';
+import MCTChartLineStepAfter from './MCTChartLineStepAfter.js';
+import MCTChartPointSet from './MCTChartPointSet.js';
 
 const MARKER_SIZE = 6.0;
 const HIGHLIGHT_SIZE = MARKER_SIZE * 2.0;
+const ANNOTATION_SIZE = MARKER_SIZE * 3.0;
 const CLEARANCE = 15;
+// These attributes are changed in the plot model, but we don't need to react to the changes.
+const NO_HANDLING_NEEDED_ATTRIBUTES = {
+  label: 'label',
+  values: 'values',
+  format: 'format',
+  color: 'color',
+  name: 'name',
+  unit: 'unit'
+};
+// These attributes in turn set one of HANDLED_ATTRIBUTES, so we don't need specific listeners for them - this prevents excessive redraws.
+const IMPLICIT_HANDLED_ATTRIBUTES = {
+  range: 'range',
+  //series stats update y axis stats
+  stats: 'stats',
+  frozen: 'frozen',
+  autoscale: 'autoscale',
+  autoscalePadding: 'autoscalePadding',
+  logMode: 'logMode',
+  yKey: 'yKey'
+};
+// Attribute changes that we are specifically handling with listeners
+const HANDLED_ATTRIBUTES = {
+  //X and Y Axis attributes
+  key: 'key',
+  displayRange: 'displayRange',
+  //series attributes
+  xKey: 'xKey',
+  interpolate: 'interpolate',
+  markers: 'markers',
+  markerShape: 'markerShape',
+  markerSize: 'markerSize',
+  alarmMarkers: 'alarmMarkers',
+  limitLines: 'limitLines',
+  yAxisId: 'yAxisId'
+};
 
 export default {
-    inject: ['openmct', 'domainObject'],
-    props: {
-        rectangles: {
-            type: Array,
-            default() {
-                return [];
-            }
-        },
-        highlights: {
-            type: Array,
-            default() {
-                return [];
-            }
-        },
-        showLimitLineLabels: {
-            type: Object,
-            default() {
-                return {};
-            }
-        }
+  components: { LimitLine, LimitLabel },
+  inject: ['openmct', 'domainObject', 'path', 'renderWhenVisible'],
+  props: {
+    rectangles: {
+      type: Array,
+      default() {
+        return [];
+      }
     },
-    data() {
-        return {
-            canvasTemplate: '<canvas style="position: absolute; background: none; width: 100%; height: 100%;"></canvas>'
-        };
-    },
-    watch: {
-        highlights() {
-            this.scheduleDraw();
-        },
-        rectangles() {
-            this.scheduleDraw();
-        },
-        showLimitLineLabels() {
-            this.drawLimitLines();
-        }
+    highlights: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    annotatedPointsBySeries: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    annotationSelectionsBySeries: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    showLimitLineLabels: {
+      type: Object,
+      default() {
+        return undefined;
+      }
+    },
+    hiddenYAxisIds: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    annotationViewingAndEditingAllowed: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: ['chart-loaded', 'plot-reinitialize-canvas'],
+  data() {
+    return {
+      visibleLimitLabels: [],
+      visibleLimitLines: []
+    };
+  },
+  computed: {
+    canvasStyle() {
+      return {
+        position: 'absolute',
+        background: 'none',
+        width: '100%',
+        height: '100%'
+      };
+    }
+  },
+  watch: {
+    highlights: {
+      handler() {
+        this.scheduleDraw();
+      },
+      deep: true
+    },
+    annotatedPointsBySeries: {
+      handler() {
+        this.scheduleDraw();
+      }
+    },
+    annotationSelectionsBySeries: {
+      handler() {
+        this.scheduleDraw();
+      }
+    },
+    rectangles: {
+      handler() {
+        this.scheduleDraw();
+      },
+      deep: true
+    },
+    showLimitLineLabels() {
+      this.updateLimitLines();
+    },
+    hiddenYAxisIds: {
+      handler() {
+        this.hiddenYAxisIds.forEach((id) => {
+          this.resetYOffsetAndSeriesDataForYAxis(id);
+        });
+        this.scheduleDraw(true);
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.chartVisible = true;
+    this.chartContainer = this.$refs.chart;
+    this.drawnOnce = false;
+    const rootContainer = this.openmct.element;
+    const options = {
+      root: rootContainer
+    };
+    this.visibilityObserver = new IntersectionObserver(this.visibilityChanged, options);
+    eventHelpers.extend(this);
+    this.seriesModels = [];
+    this.config = this.getConfig();
+    this.isDestroyed = false;
+    this.lines = [];
+    this.limitLines = [];
+    this.pointSets = [];
+    this.alarmSets = [];
+    const yAxisId = this.config.yAxis.get('id');
+    this.offset = {
+      [yAxisId]: {}
+    };
+    this.listenTo(
+      this.config.yAxis,
+      `change:${HANDLED_ATTRIBUTES.displayRange}`,
+      this.scheduleDraw
+    );
+    this.listenTo(
+      this.config.yAxis,
+      `change:${HANDLED_ATTRIBUTES.key}`,
+      this.resetYOffsetAndSeriesDataForYAxis.bind(this, yAxisId),
+      this
+    );
+    this.listenTo(this.config.yAxis, 'change', this.redrawIfNotAlreadyHandled);
+    if (this.config.additionalYAxes.length) {
+      this.config.additionalYAxes.forEach((yAxis) => {
+        const id = yAxis.get('id');
+        this.offset[id] = {};
+        this.listenTo(yAxis, `change:${HANDLED_ATTRIBUTES.displayRange}`, this.scheduleDraw);
+        this.listenTo(
+          yAxis,
+          `change:${HANDLED_ATTRIBUTES.key}`,
+          this.resetYOffsetAndSeriesDataForYAxis.bind(this, id),
+          this
+        );
+        this.listenTo(yAxis, 'change', this.redrawIfNotAlreadyHandled);
+      });
+    }
+
+    this.seriesElements = new WeakMap();
+    this.seriesLimits = new WeakMap();
+
+    const canvasReadyForDrawing = this.readyCanvasForDrawing();
+    if (canvasReadyForDrawing) {
+      this.draw();
+    }
+
+    this.listenTo(this.config.series, 'add', this.onSeriesAdd, this);
+    this.listenTo(this.config.series, 'remove', this.onSeriesRemove, this);
+
+    this.listenTo(this.config.xAxis, 'change:displayRange', this.scheduleDraw);
+    this.listenTo(this.config.xAxis, 'change', this.redrawIfNotAlreadyHandled);
+    this.config.series.forEach(this.onSeriesAdd, this);
+    this.$emit('chart-loaded');
+
+    this.handleWindowResize = _.debounce(this.handleWindowResize, 250);
+    this.chartResizeObserver = new ResizeObserver(this.handleWindowResize);
+    this.chartResizeObserver.observe(this.$parent.$refs.chartContainer);
+  },
+  beforeUnmount() {
+    this.destroy();
+    this.visibilityObserver.unobserve(this.chartContainer);
+  },
+  methods: {
+    handleWindowResize() {
+      this.scheduleDraw(true);
+    },
+    getConfig() {
+      const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+      let config = configStore.get(configId);
+      if (!config) {
+        config = new PlotConfigurationModel({
+          id: configId,
+          domainObject: this.domainObject,
+          openmct: this.openmct
+        });
+        configStore.add(configId, config);
+      }
+
+      return config;
     },
-    mounted() {
-        eventHelpers.extend(this);
-        this.config = this.getConfig();
-        this.isDestroyed = false;
-        this.lines = [];
-        this.limitLines = [];
-        this.pointSets = [];
-        this.alarmSets = [];
-        this.offset = {};
-        this.seriesElements = new WeakMap();
-        this.seriesLimits = new WeakMap();
-
-        let canvasEls = this.$parent.$refs.chartContainer.querySelectorAll("canvas");
-        const mainCanvas = canvasEls[1];
-        const overlayCanvas = canvasEls[0];
-        if (this.initializeCanvas(mainCanvas, overlayCanvas)) {
+    visibilityChanged([entry]) {
+      // Per https://github.com/nasa/openmct/issues/7405, we only want to draw when the chart is visible.
+      // and we need to use the Open MCT root element as the root of the intersection observer.
+      if (entry.target === this.chartContainer) {
+        const wasVisible = this.chartVisible;
+        const isNowVisible = entry.isIntersecting;
+        const chartInOverlayWindow = this.chartContainer?.closest('.js-overlay') !== null;
+
+        if (!isNowVisible && !chartInOverlayWindow) {
+          this.chartVisible = false;
+          this.destroyCanvas();
+        } else if (!isNowVisible && chartInOverlayWindow) {
+          this.chartVisible = true;
+        } else if (!wasVisible && isNowVisible) {
+          this.chartVisible = true;
+          // rebuild the chart
+          this.buildCanvasElements();
+          const canvasInitialized = this.readyCanvasForDrawing();
+          if (canvasInitialized) {
             this.draw();
+          }
+          this.$emit('plot-reinitialize-canvas');
+        } else {
+          this.chartVisible = isNowVisible;
         }
+      }
+    },
+    reDraw(newXKey, oldXKey, series) {
+      this.changeInterpolate(newXKey, oldXKey, series);
+      this.changeMarkers(newXKey, oldXKey, series);
+      this.changeAlarmMarkers(newXKey, oldXKey, series);
+      this.changeLimitLines(newXKey, oldXKey, series);
+    },
+    onSeriesAdd(series, index) {
+      this.seriesModels[index] = series;
+      this.listenTo(series, `change:${HANDLED_ATTRIBUTES.xKey}`, this.reDraw, this);
+      this.listenTo(
+        series,
+        `change:${HANDLED_ATTRIBUTES.interpolate}`,
+        this.changeInterpolate,
+        this
+      );
+      this.listenTo(series, `change:${HANDLED_ATTRIBUTES.markers}`, this.changeMarkers, this);
+      this.listenTo(
+        series,
+        `change:${HANDLED_ATTRIBUTES.alarmMarkers}`,
+        this.changeAlarmMarkers,
+        this
+      );
+      this.listenTo(series, `change:${HANDLED_ATTRIBUTES.limitLines}`, this.changeLimitLines, this);
+      this.listenTo(series, `change:${HANDLED_ATTRIBUTES.yAxisId}`, this.resetAxisAndRedraw, this);
+      this.listenTo(series, `change:${HANDLED_ATTRIBUTES.markerShape}`, this.scheduleDraw, this);
+      this.listenTo(series, `change:${HANDLED_ATTRIBUTES.markerSize}`, this.scheduleDraw, this);
+      this.listenTo(series, 'change', this.redrawIfNotAlreadyHandled);
+      this.listenTo(series, 'add', this.onAddPoint);
+      this.makeChartElement(series);
+      this.makeLimitLines(series);
+    },
+    onSeriesRemove(seriesToRemove) {
+      this.stopListening(seriesToRemove);
+      this.removeChartElement(seriesToRemove);
+      this.scheduleDraw();
 
-        this.listenTo(this.config.series, 'add', this.onSeriesAdd, this);
-        this.listenTo(this.config.series, 'remove', this.onSeriesRemove, this);
-        this.listenTo(this.config.yAxis, 'change:key', this.clearOffset, this);
-        this.listenTo(this.config.yAxis, 'change', this.updateLimitsAndDraw);
-        this.listenTo(this.config.xAxis, 'change', this.updateLimitsAndDraw);
-        this.config.series.forEach(this.onSeriesAdd, this);
-    },
-    beforeDestroy() {
-        this.destroy();
-    },
-    methods: {
-        getConfig() {
-            const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-            let config = configStore.get(configId);
-            if (!config) {
-                config = new PlotConfigurationModel({
-                    id: configId,
-                    domainObject: this.domainObject,
-                    openmct: this.openmct
-                });
-                configStore.add(configId, config);
-            }
+      const seriesIndexToRemove = this.seriesModels.findIndex(
+        (series) => series.keyString === seriesToRemove.keyString
+      );
+      this.seriesModels.splice(seriesIndexToRemove, 1);
+    },
+    onAddPoint(point, insertIndex, series) {
+      const mainYAxisId = this.config.yAxis.get('id');
+      const seriesYAxisId = series.get('yAxisId');
+      const xRange = this.config.xAxis.get('displayRange');
 
-            return config;
-        },
-        reDraw(mode, o, series) {
-            this.changeInterpolate(mode, o, series);
-            this.changeMarkers(mode, o, series);
-            this.changeAlarmMarkers(mode, o, series);
-            this.changeLimitLines(mode, o, series);
-        },
-        onSeriesAdd(series) {
-            this.listenTo(series, 'change:xKey', this.reDraw, this);
-            this.listenTo(series, 'change:interpolate', this.changeInterpolate, this);
-            this.listenTo(series, 'change:markers', this.changeMarkers, this);
-            this.listenTo(series, 'change:alarmMarkers', this.changeAlarmMarkers, this);
-            this.listenTo(series, 'change:limitLines', this.changeLimitLines, this);
-            this.listenTo(series, 'change', this.scheduleDraw);
-            this.listenTo(series, 'add', this.scheduleDraw);
-            this.makeChartElement(series);
-            this.makeLimitLines(series);
-        },
-        changeInterpolate(mode, o, series) {
-            if (mode === o) {
-                return;
-            }
+      let yRange;
+      if (seriesYAxisId === mainYAxisId) {
+        yRange = this.config.yAxis.get('displayRange');
+      } else {
+        yRange = this.config.additionalYAxes
+          .find((yAxis) => yAxis.get('id') === seriesYAxisId)
+          .get('displayRange');
+      }
 
-            const elements = this.seriesElements.get(series);
-            elements.lines.forEach(function (line) {
-                this.lines.splice(this.lines.indexOf(line), 1);
-                line.destroy();
-            }, this);
-            elements.lines = [];
-
-            const newLine = this.lineForSeries(series);
-            if (newLine) {
-                elements.lines.push(newLine);
-                this.lines.push(newLine);
-            }
-        },
-        changeAlarmMarkers(mode, o, series) {
-            if (mode === o) {
-                return;
-            }
+      const xValue = series.getXVal(point);
+      const yValue = series.getYVal(point);
 
-            const elements = this.seriesElements.get(series);
-            if (elements.alarmSet) {
-                elements.alarmSet.destroy();
-                this.alarmSets.splice(this.alarmSets.indexOf(elements.alarmSet), 1);
-            }
+      // if user is not looking at data within the current bounds, don't draw the point
+      if (
+        xValue > xRange.min &&
+        xValue < xRange.max &&
+        yValue > yRange.min &&
+        yValue < yRange.max
+      ) {
+        this.scheduleDraw();
+      }
+    },
+    changeInterpolate(mode, o, series) {
+      if (mode === o) {
+        return;
+      }
 
-            elements.alarmSet = this.alarmPointSetForSeries(series);
-            if (elements.alarmSet) {
-                this.alarmSets.push(elements.alarmSet);
-            }
-        },
-        changeMarkers(mode, o, series) {
-            if (mode === o) {
-                return;
-            }
+      const elements = this.seriesElements.get(toRaw(series));
+      elements.lines.forEach(function (line) {
+        this.lines.splice(this.lines.indexOf(line), 1);
+        line.destroy();
+      }, this);
+      elements.lines = [];
 
-            const elements = this.seriesElements.get(series);
-            elements.pointSets.forEach(function (pointSet) {
-                this.pointSets.splice(this.pointSets.indexOf(pointSet), 1);
-                pointSet.destroy();
-            }, this);
-            elements.pointSets = [];
-
-            const pointSet = this.pointSetForSeries(series);
-            if (pointSet) {
-                elements.pointSets.push(pointSet);
-                this.pointSets.push(pointSet);
-            }
-        },
-        changeLimitLines(mode, o, series) {
-            if (mode === o) {
-                return;
-            }
+      const newLine = this.lineForSeries(series);
+      if (newLine) {
+        elements.lines.push(newLine);
+        this.lines.push(newLine);
+      }
+    },
+    changeAlarmMarkers(mode, o, series) {
+      if (mode === o) {
+        return;
+      }
 
-            this.makeLimitLines(series);
-            this.updateLimitsAndDraw();
-        },
-        onSeriesRemove(series) {
-            this.stopListening(series);
-            this.removeChartElement(series);
-            this.scheduleDraw();
-        },
-        destroy() {
-            this.isDestroyed = true;
-            this.stopListening();
-            this.lines.forEach(line => line.destroy());
-            this.limitLines.forEach(line => line.destroy());
-            DrawLoader.releaseDrawAPI(this.drawAPI);
-        },
-        clearOffset() {
-            delete this.offset.x;
-            delete this.offset.y;
-            delete this.offset.xVal;
-            delete this.offset.yVal;
-            delete this.offset.xKey;
-            delete this.offset.yKey;
-            this.lines.forEach(function (line) {
-                line.reset();
-            });
-            this.limitLines.forEach(function (line) {
-                line.reset();
-            });
-            this.pointSets.forEach(function (pointSet) {
-                pointSet.reset();
-            });
-        },
-        setOffset(offsetPoint, index, series) {
-            if (this.offset.x && this.offset.y) {
-                return;
-            }
+      const elements = this.seriesElements.get(toRaw(series));
+      if (elements.alarmSet) {
+        elements.alarmSet.destroy();
+        this.alarmSets.splice(this.alarmSets.indexOf(elements.alarmSet), 1);
+      }
 
-            const offsets = {
-                x: series.getXVal(offsetPoint),
-                y: series.getYVal(offsetPoint)
-            };
-
-            this.offset.x = function (x) {
-                return x - offsets.x;
-            }.bind(this);
-            this.offset.y = function (y) {
-                return y - offsets.y;
-            }.bind(this);
-            this.offset.xVal = function (point, pSeries) {
-                return this.offset.x(pSeries.getXVal(point));
-            }.bind(this);
-            this.offset.yVal = function (point, pSeries) {
-                return this.offset.y(pSeries.getYVal(point));
-            }.bind(this);
-        },
-        initializeCanvas(canvas, overlay) {
-            this.canvas = canvas;
-            this.overlay = overlay;
-            this.drawAPI = DrawLoader.getDrawAPI(canvas, overlay);
-            if (this.drawAPI) {
-                this.listenTo(this.drawAPI, 'error', this.fallbackToCanvas, this);
-            }
+      elements.alarmSet = this.alarmPointSetForSeries(series);
+      if (elements.alarmSet) {
+        this.alarmSets.push(elements.alarmSet);
+      }
+    },
+    changeMarkers(mode, o, series) {
+      if (mode === o) {
+        return;
+      }
 
-            return Boolean(this.drawAPI);
-        },
-        fallbackToCanvas() {
-            this.stopListening(this.drawAPI);
-            DrawLoader.releaseDrawAPI(this.drawAPI);
-            // Have to throw away the old canvas elements and replace with new
-            // canvas elements in order to get new drawing contexts.
-            const div = document.createElement('div');
-            div.innerHTML = this.TEMPLATE;
-            const mainCanvas = div.querySelectorAll("canvas")[1];
-            const overlayCanvas = div.querySelectorAll("canvas")[0];
-            this.canvas.parentNode.replaceChild(mainCanvas, this.canvas);
-            this.canvas = mainCanvas;
-            this.overlay.parentNode.replaceChild(overlayCanvas, this.overlay);
-            this.overlay = overlayCanvas;
-            this.drawAPI = DrawLoader.getFallbackDrawAPI(this.canvas, this.overlay);
-            this.$emit('plotReinitializeCanvas');
-        },
-        removeChartElement(series) {
-            const elements = this.seriesElements.get(series);
-
-            elements.lines.forEach(function (line) {
-                this.lines.splice(this.lines.indexOf(line), 1);
-                line.destroy();
-            }, this);
-            elements.pointSets.forEach(function (pointSet) {
-                this.pointSets.splice(this.pointSets.indexOf(pointSet), 1);
-                pointSet.destroy();
-            }, this);
-            if (elements.alarmSet) {
-                elements.alarmSet.destroy();
-                this.alarmSets.splice(this.alarmSets.indexOf(elements.alarmSet), 1);
-            }
+      const elements = this.seriesElements.get(toRaw(series));
+      elements.pointSets.forEach(function (pointSet) {
+        this.pointSets.splice(this.pointSets.indexOf(pointSet), 1);
+        pointSet.destroy();
+      }, this);
+      elements.pointSets = [];
 
-            this.seriesElements.delete(series);
+      const pointSet = this.pointSetForSeries(series);
+      if (pointSet) {
+        elements.pointSets.push(pointSet);
+        this.pointSets.push(pointSet);
+      }
+    },
+    changeLimitLines(showLimitLines, oldShowLimitLines, series) {
+      if (showLimitLines === oldShowLimitLines) {
+        return;
+      }
 
-            this.clearLimitLines(series);
-        },
-        lineForSeries(series) {
-            if (series.get('interpolate') === 'linear') {
-                return new MCTChartLineLinear(
-                    series,
-                    this,
-                    this.offset
-                );
-            }
+      this.makeLimitLines(series);
+      this.updateLimitLines();
+    },
+    resetAxisAndRedraw(newYAxisId, oldYAxisId, series) {
+      if (!oldYAxisId) {
+        return;
+      }
 
-            if (series.get('interpolate') === 'stepAfter') {
-                return new MCTChartLineStepAfter(
-                    series,
-                    this,
-                    this.offset
-                );
-            }
-        },
-        limitLineForSeries(series) {
-            return new MCTChartAlarmLineSet(
-                series,
-                this,
-                this.offset,
-                this.openmct.time.bounds()
-            );
-        },
-        pointSetForSeries(series) {
-            if (series.get('markers')) {
-                return new MCTChartPointSet(
-                    series,
-                    this,
-                    this.offset
-                );
-            }
-        },
-        alarmPointSetForSeries(series) {
-            if (series.get('alarmMarkers')) {
-                return new MCTChartAlarmPointSet(
-                    series,
-                    this,
-                    this.offset
-                );
-            }
-        },
-        makeChartElement(series) {
-            const elements = {
-                lines: [],
-                pointSets: [],
-                limitLines: []
-            };
-
-            const line = this.lineForSeries(series);
-            if (line) {
-                elements.lines.push(line);
-                this.lines.push(line);
-            }
+      //Remove the old chart elements for the series since their offsets are pointing to the old y axis
+      this.removeChartElement(series);
+      this.resetYOffsetAndSeriesDataForYAxis(oldYAxisId);
 
-            const pointSet = this.pointSetForSeries(series);
-            if (pointSet) {
-                elements.pointSets.push(pointSet);
-                this.pointSets.push(pointSet);
-            }
+      //Make the chart elements again for the new y-axis and offset
+      this.makeChartElement(series);
+      this.makeLimitLines(series);
+      this.scheduleDraw(true);
+    },
+    destroy() {
+      this.destroyCanvas();
+      this.isDestroyed = true;
+      this.lines.forEach((line) => line.destroy());
+      this.limitLines.forEach((line) => line.destroy());
+      this.pointSets.forEach((pointSet) => pointSet.destroy());
+      this.alarmSets.forEach((alarmSet) => alarmSet.destroy());
+      DrawLoader.releaseDrawAPI(this.drawAPI);
+      if (this.chartResizeObserver) {
+        this.chartResizeObserver.disconnect();
+      }
+    },
+    resetYOffsetAndSeriesDataForYAxis(yAxisId) {
+      delete this.offset[yAxisId].y;
+      delete this.offset[yAxisId].xVal;
+      delete this.offset[yAxisId].yVal;
+      delete this.offset[yAxisId].xKey;
+      delete this.offset[yAxisId].yKey;
 
-            elements.alarmSet = this.alarmPointSetForSeries(series);
-            if (elements.alarmSet) {
-                this.alarmSets.push(elements.alarmSet);
-            }
+      this.resetResetChartElements(yAxisId);
+    },
+    resetResetChartElements(yAxisId) {
+      const lines = this.lines.filter(this.matchByYAxisIdExcludingVisibility.bind(this, yAxisId));
+      lines.forEach(function (line) {
+        line.reset();
+      });
+      const limitLines = this.limitLines.filter(
+        this.matchByYAxisIdExcludingVisibility.bind(this, yAxisId)
+      );
+      limitLines.forEach(function (line) {
+        line.reset();
+      });
+      const pointSets = this.pointSets.filter(
+        this.matchByYAxisIdExcludingVisibility.bind(this, yAxisId)
+      );
+      pointSets.forEach(function (pointSet) {
+        pointSet.reset();
+      });
+    },
+    setOffset(offsetPoint, index, series) {
+      const mainYAxisId = this.config.yAxis.get('id');
+      const yAxisId = series.get('yAxisId') || mainYAxisId;
+      if (this.offset[yAxisId].x && this.offset[yAxisId].y) {
+        return;
+      }
 
-            this.seriesElements.set(series, elements);
-        },
-        makeLimitLines(series) {
-            this.clearLimitLines(series);
+      const offsets = {
+        x: series.getXVal(offsetPoint),
+        y: series.getYVal(offsetPoint)
+      };
 
-            if (!series.get('limitLines')) {
-                return;
-            }
+      this.offset[yAxisId].x = function (x) {
+        return x - offsets.x;
+      }.bind(this);
+      this.offset[yAxisId].y = function (y) {
+        return y - offsets.y;
+      }.bind(this);
+      this.offset[yAxisId].xVal = function (point, pSeries) {
+        return this.offset[yAxisId].x(pSeries.getXVal(point));
+      }.bind(this);
+      this.offset[yAxisId].yVal = function (point, pSeries) {
+        return this.offset[yAxisId].y(pSeries.getYVal(point));
+      }.bind(this);
+    },
+    destroyCanvas() {
+      if (this.isDestroyed) {
+        return;
+      }
+      this.stopListening(this.drawAPI);
+      DrawLoader.releaseDrawAPI(this.drawAPI);
+      if (this.chartContainer) {
+        const canvasElements = this.chartContainer.querySelectorAll('canvas');
+        canvasElements.forEach((canvas) => {
+          canvas.parentNode.removeChild(canvas);
+        });
+      }
+    },
+    readyCanvasForDrawing() {
+      const canvasEls = this.chartContainer.querySelectorAll('canvas');
+      const mainCanvas = canvasEls[1];
+      const overlayCanvas = canvasEls[0];
+      this.canvas = mainCanvas;
+      this.overlay = overlayCanvas;
+      this.drawAPI = DrawLoader.getDrawAPI(mainCanvas, overlayCanvas);
+      if (this.drawAPI) {
+        this.listenTo(this.drawAPI, 'error', this.fallbackToCanvas, this);
+      }
 
-            const limitElements = {
-                limitLines: []
-            };
+      return Boolean(this.drawAPI);
+    },
+    buildCanvasElements() {
+      const div = document.createElement('div');
+      div.innerHTML = `
+      <canvas style="position: absolute; background: none; width: 100%; height: 100%;" class="js-overlay-canvas"></canvas>
+      <canvas style="position: absolute; background: none; width: 100%; height: 100%;" class="js-main-canvas"></canvas>
+      `;
+      const mainCanvas = div.querySelectorAll('canvas')[1];
+      const overlayCanvas = div.querySelectorAll('canvas')[0];
+      this.chartContainer.appendChild(mainCanvas, this.canvas);
+      this.canvas = mainCanvas;
+      this.chartContainer.appendChild(overlayCanvas, this.overlay);
+      this.overlay = overlayCanvas;
+    },
+    fallbackToCanvas() {
+      console.warn(`📈 fallback to 2D canvas`);
+      this.destroyCanvas();
+      this.buildCanvasElements();
+      this.drawAPI = DrawLoader.getFallbackDrawAPI(this.canvas, this.overlay);
+      this.$emit('plot-reinitialize-canvas');
+    },
+    removeChartElement(series) {
+      const elements = this.seriesElements.get(toRaw(series));
 
-            const limitLine = this.limitLineForSeries(series);
-            if (limitLine) {
-                limitElements.limitLines.push(limitLine);
-                this.limitLines.push(limitLine);
-            }
+      elements.lines.forEach(function (line) {
+        this.lines.splice(this.lines.indexOf(line), 1);
+        line.destroy();
+      }, this);
+      elements.pointSets.forEach(function (pointSet) {
+        this.pointSets.splice(this.pointSets.indexOf(pointSet), 1);
+        pointSet.destroy();
+      }, this);
+      if (elements.alarmSet) {
+        elements.alarmSet.destroy();
+        this.alarmSets.splice(this.alarmSets.indexOf(elements.alarmSet), 1);
+      }
 
-            this.seriesLimits.set(series, limitElements);
-        },
-        clearLimitLines(series) {
-            const seriesLimits = this.seriesLimits.get(series);
+      this.seriesElements.delete(toRaw(series));
 
-            if (seriesLimits) {
-                seriesLimits.limitLines.forEach(function (line) {
-                    this.limitLines.splice(this.limitLines.indexOf(line), 1);
-                    line.destroy();
-                }, this);
+      this.clearLimitLines(series);
+    },
+    lineForSeries(series) {
+      const mainYAxisId = this.config.yAxis.get('id');
+      const yAxisId = series.get('yAxisId') || mainYAxisId;
+      let offset = this.offset[yAxisId];
 
-                this.seriesLimits.delete(series);
-            }
-        },
-        canDraw() {
-            if (!this.offset.x || !this.offset.y) {
-                return false;
-            }
+      if (series.get('interpolate') === 'linear') {
+        return new MCTChartLineLinear(series, this, offset);
+      }
 
-            return true;
-        },
-        updateLimitsAndDraw() {
-            this.drawLimitLines();
-            this.scheduleDraw();
-        },
-        scheduleDraw() {
-            if (!this.drawScheduled) {
-                requestAnimationFrame(this.draw);
-                this.drawScheduled = true;
-            }
-        },
-        draw() {
-            this.drawScheduled = false;
-            if (this.isDestroyed) {
-                return;
-            }
+      if (series.get('interpolate') === 'stepAfter') {
+        return new MCTChartLineStepAfter(series, this, offset);
+      }
+    },
+    limitLineForSeries(series) {
+      const mainYAxisId = this.config.yAxis.get('id');
+      const yAxisId = series.get('yAxisId') || mainYAxisId;
+      let offset = this.offset[yAxisId];
 
-            this.drawAPI.clear();
-            if (this.canDraw()) {
-                this.updateViewport();
-                this.drawSeries();
-                this.drawRectangles();
-                this.drawHighlights();
-            }
-        },
-        updateViewport() {
-            const xRange = this.config.xAxis.get('displayRange');
-            const yRange = this.config.yAxis.get('displayRange');
+      return new MCTChartAlarmLineSet(series, this, offset, this.openmct.time.bounds());
+    },
+    pointSetForSeries(series) {
+      const mainYAxisId = this.config.yAxis.get('id');
+      const yAxisId = series.get('yAxisId') || mainYAxisId;
+      let offset = this.offset[yAxisId];
 
-            if (!xRange || !yRange) {
-                return;
-            }
+      if (series.get('markers')) {
+        return new MCTChartPointSet(series, this, offset);
+      }
+    },
+    alarmPointSetForSeries(series) {
+      const mainYAxisId = this.config.yAxis.get('id');
+      const yAxisId = series.get('yAxisId') || mainYAxisId;
+      let offset = this.offset[yAxisId];
+
+      if (series.get('alarmMarkers')) {
+        return new MCTChartAlarmPointSet(series, this, offset);
+      }
+    },
+    makeChartElement(series) {
+      const elements = {
+        lines: [],
+        pointSets: [],
+        limitLines: []
+      };
 
-            const dimensions = [
-                xRange.max - xRange.min,
-                yRange.max - yRange.min
-            ];
+      const line = this.lineForSeries(series);
+      if (line) {
+        elements.lines.push(line);
+        this.lines.push(line);
+      }
 
-            const origin = [
-                this.offset.x(xRange.min),
-                this.offset.y(yRange.min)
-            ];
+      const pointSet = this.pointSetForSeries(series);
+      if (pointSet) {
+        elements.pointSets.push(pointSet);
+        this.pointSets.push(pointSet);
+      }
 
-            this.drawAPI.setDimensions(
-                dimensions,
-                origin
-            );
-        },
-        drawSeries() {
-            this.lines.forEach(this.drawLine, this);
-            this.pointSets.forEach(this.drawPoints, this);
-            this.alarmSets.forEach(this.drawAlarmPoints, this);
-        },
-        drawLimitLines() {
-            if (this.canDraw()) {
-                this.updateViewport();
-
-                if (!this.drawAPI.origin) {
-                    return;
-                }
-
-                Array.from(this.$refs.limitArea.children).forEach((el) => el.remove());
-                let limitPointOverlap = [];
-                this.limitLines.forEach((limitLine) => {
-                    let limitContainerEl = this.$refs.limitArea;
-                    limitLine.limits.forEach((limit) => {
-                        const showLabels = this.showLabels(limit.seriesKey);
-                        if (showLabels) {
-                            const overlap = this.getLimitOverlap(limit, limitPointOverlap);
-                            limitPointOverlap.push(overlap);
-                            let limitLabelEl = this.getLimitLabel(limit, overlap);
-                            limitContainerEl.appendChild(limitLabelEl);
-                        }
-
-                        let limitEl = this.getLimitElement(limit);
-                        limitContainerEl.appendChild(limitEl);
-
-                    }, this);
-                });
+      elements.alarmSet = this.alarmPointSetForSeries(series);
+      if (elements.alarmSet) {
+        this.alarmSets.push(elements.alarmSet);
+      }
+
+      this.seriesElements.set(toRaw(series), elements);
+    },
+    makeLimitLines(series) {
+      this.clearLimitLines(series);
+
+      if (!series || !series.get('limitLines')) {
+        return;
+      }
+
+      const limitElements = {
+        limitLines: []
+      };
+
+      const limitLine = this.limitLineForSeries(series);
+      if (limitLine) {
+        limitElements.limitLines.push(limitLine);
+        this.limitLines.push(limitLine);
+      }
+
+      this.seriesLimits.set(toRaw(series), limitElements);
+    },
+    clearLimitLines(series) {
+      const seriesLimits = this.seriesLimits.get(toRaw(series));
+
+      if (seriesLimits) {
+        seriesLimits.limitLines.forEach(function (line) {
+          this.limitLines.splice(this.limitLines.indexOf(line), 1);
+          line.destroy();
+        }, this);
+
+        this.seriesLimits.delete(toRaw(series));
+      }
+    },
+    canDraw(yAxisId) {
+      if (!this.offset[yAxisId] || !this.offset[yAxisId].x || !this.offset[yAxisId].y) {
+        return false;
+      }
+
+      return true;
+    },
+    redrawIfNotAlreadyHandled(attribute, value, oldValue) {
+      if (Object.keys(HANDLED_ATTRIBUTES).includes(attribute) && oldValue) {
+        return;
+      }
+
+      if (Object.keys(IMPLICIT_HANDLED_ATTRIBUTES).includes(attribute) && oldValue) {
+        return;
+      }
+
+      if (Object.keys(NO_HANDLING_NEEDED_ATTRIBUTES).includes(attribute) && oldValue) {
+        return;
+      }
+
+      this.scheduleDraw(true);
+    },
+    scheduleDraw(updateLimitLines) {
+      if (!this.drawScheduled) {
+        const called = this.renderWhenVisible(this.draw.bind(this, updateLimitLines));
+        this.drawScheduled = called;
+        if (!this.drawnOnce && called) {
+          this.drawnOnce = true;
+          this.visibilityObserver.observe(this.chartContainer);
+        }
+      }
+    },
+    draw(updateLimitLines) {
+      this.drawScheduled = false;
+      if (this.isDestroyed || !this.chartVisible) {
+        return;
+      }
+
+      this.drawAPI.clear();
+      const mainYAxisId = this.config.yAxis.get('id');
+      //There has to be at least one yAxis
+      const yAxisIds = [mainYAxisId].concat(
+        this.config.additionalYAxes.map((yAxis) => yAxis.get('id'))
+      );
+
+      // Repeat drawing for all yAxes
+      yAxisIds.filter(this.canDraw).forEach((id, yAxisIndex) => {
+        this.updateViewport(id);
+        this.drawSeries(id);
+        if (yAxisIndex === 0) {
+          this.drawRectangles(id);
+        }
+
+        this.drawHighlights(id);
+        // only draw these in fixed time mode or plot is paused
+        if (this.annotationViewingAndEditingAllowed) {
+          this.prepareToDrawAnnotatedPoints(id);
+          this.prepareToDrawAnnotationSelections(id);
+        }
+      });
+      // We must do the limit line drawing after the drawAPI has been cleared (which sets the height and width of the draw API)
+      // and the viewport is updated so that we have the right height/width for limit line x and y calculations
+      if (updateLimitLines) {
+        this.updateLimitLines();
+      }
+    },
+    updateViewport(yAxisId) {
+      if (!this.chartVisible) {
+        return;
+      }
+      const mainYAxisId = this.config.yAxis.get('id');
+      const xRange = this.config.xAxis.get('displayRange');
+      let yRange;
+      if (yAxisId === mainYAxisId) {
+        yRange = this.config.yAxis.get('displayRange');
+      } else {
+        if (this.config.additionalYAxes.length) {
+          const yAxisForId = this.config.additionalYAxes.find(
+            (yAxis) => yAxis.get('id') === yAxisId
+          );
+          yRange = yAxisForId.get('displayRange');
+        }
+      }
+
+      if (!xRange || !yRange) {
+        return;
+      }
+
+      const dimensions = [xRange.max - xRange.min, yRange.max - yRange.min];
+
+      let origin;
+      origin = [this.offset[yAxisId].x(xRange.min), this.offset[yAxisId].y(yRange.min)];
+
+      this.drawAPI.setDimensions(dimensions, origin);
+    },
+    // match items by their yAxisId, but don't care if the series is hidden or not.
+    matchByYAxisIdExcludingVisibility() {
+      const args = Array.from(arguments).slice(0, 4);
+
+      return this.matchByYAxisId(...args, true);
+    },
+    matchByYAxisId(id, item, index, items, excludeVisibility = false) {
+      const mainYAxisId = this.config.yAxis.get('id');
+      let matchesId = false;
+      const axisSeriesAreVisible = excludeVisibility || this.hiddenYAxisIds.indexOf(id) < 0;
+      const series = item.series;
+      if (axisSeriesAreVisible && series) {
+        const seriesYAxisId = series.get('yAxisId') || mainYAxisId;
+        matchesId = seriesYAxisId === id;
+      }
+
+      return matchesId;
+    },
+    drawSeries(id) {
+      const lines = this.lines.filter(this.matchByYAxisId.bind(this, id));
+      lines.forEach(this.drawLine, this);
+      const pointSets = this.pointSets.filter(this.matchByYAxisId.bind(this, id));
+      pointSets.forEach(this.drawPoints, this);
+      const alarmSets = this.alarmSets.filter(this.matchByYAxisId.bind(this, id));
+      alarmSets.forEach(this.drawAlarmPoints, this);
+    },
+    updateLimitLines() {
+      //reset
+      this.visibleLimitLabels = [];
+      this.visibleLimitLines = [];
+
+      this.config.series.models.forEach((series) => {
+        const yAxisId = series.get('yAxisId');
+
+        if (this.hiddenYAxisIds.indexOf(yAxisId) < 0) {
+          this.updateLimitLinesForSeries(yAxisId, series);
+        }
+      });
+    },
+    updateLimitLinesForSeries(yAxisId, series) {
+      if (!this.canDraw(yAxisId)) {
+        return;
+      }
+
+      this.updateViewport(yAxisId);
+
+      if (!this.drawAPI.origin) {
+        return;
+      }
+      let limitPointOverlap = [];
+
+      this.limitLines.forEach((limitLine) => {
+        limitLine.limits.forEach((limit) => {
+          if (series.keyString !== limit.seriesKey) {
+            return;
+          }
+
+          const showLabels = this.showLabels(limit.seriesKey);
+          if (showLabels) {
+            const overlap = this.getLimitOverlap(limit, limitPointOverlap);
+            limitPointOverlap.push(overlap);
+            this.visibleLimitLabels.push(this.getLimitProps(limit, overlap));
+          }
+
+          this.visibleLimitLines.push(this.getLimitElementProps(limit));
+        }, this);
+      });
+    },
+    showLabels(seriesKey) {
+      return this.showLimitLineLabels?.seriesKey === seriesKey;
+    },
+    getLimitElementProps(limit) {
+      let point = {
+        left: 0,
+        top: this.drawAPI.y(limit.point.y)
+      };
+
+      return {
+        point,
+        limit
+      };
+    },
+    getLimitElement(limit) {
+      let point = {
+        left: 0,
+        top: this.drawAPI.y(limit.point.y)
+      };
+      const { vNode, destroy } = mount(LimitLine, {
+        props: {
+          point,
+          limit
+        }
+      });
+
+      return {
+        el: vNode.el,
+        destroy
+      };
+    },
+    getLimitOverlap(limit, overlapMap) {
+      //calculate if limit lines are too close to each other
+      let limitTop = this.drawAPI.y(limit.point.y);
+      const needsVerticalAdjustment = limitTop - CLEARANCE <= 0;
+      let needsHorizontalAdjustment = false;
+      overlapMap.forEach((value) => {
+        let diffTop;
+        if (limitTop > value.overlapTop) {
+          diffTop = limitTop - value.overlapTop;
+        } else {
+          diffTop = value.overlapTop - limitTop;
+        }
+
+        //need to compare +ves to +ves and -ves to -ves
+        if (
+          !needsHorizontalAdjustment &&
+          Math.abs(diffTop) <= CLEARANCE &&
+          value.needsHorizontalAdjustment !== true
+        ) {
+          needsHorizontalAdjustment = true;
+        }
+      });
+
+      return {
+        needsHorizontalAdjustment,
+        needsVerticalAdjustment,
+        overlapTop: limitTop
+      };
+    },
+    getLimitProps(limit, overlap) {
+      let point = {
+        left: 0,
+        top: this.drawAPI.y(limit.point.y)
+      };
+      return {
+        limit: Object.assign({}, overlap, limit),
+        point
+      };
+    },
+    getLimitLabel(limit, overlap) {
+      let point = {
+        left: 0,
+        top: this.drawAPI.y(limit.point.y)
+      };
+      const { vNode, destroy } = mount(LimitLabel, {
+        props: {
+          limit: Object.assign({}, overlap, limit),
+          point
+        }
+      });
+
+      return {
+        el: vNode.el,
+        destroy
+      };
+    },
+    drawAlarmPoints(alarmSet) {
+      this.drawAPI.drawLimitPoints(
+        alarmSet.points,
+        alarmSet.series.get('color').asRGBAArray(),
+        alarmSet.series.get('markerSize')
+      );
+    },
+    drawPoints(chartElement) {
+      this.drawAPI.drawPoints(
+        chartElement.getBuffer(),
+        chartElement.color().asRGBAArray(),
+        chartElement.count,
+        chartElement.series.get('markerSize'),
+        chartElement.series.get('markerShape')
+      );
+    },
+    drawLine(chartElement, disconnected) {
+      if (chartElement) {
+        this.drawAPI.drawLine(
+          chartElement.getBuffer(),
+          chartElement.color().asRGBAArray(),
+          chartElement.count,
+          disconnected
+        );
+      }
+    },
+    prepareToDrawAnnotatedPoints(yAxisId) {
+      if (this.annotatedPointsBySeries && Object.values(this.annotatedPointsBySeries).length) {
+        const uniquePointsToDraw = new Set();
+
+        Object.keys(this.annotatedPointsBySeries).forEach((seriesKeyString) => {
+          const seriesModel = this.getSeries(seriesKeyString);
+          const matchesYAxis = this.matchByYAxisId(yAxisId, { series: seriesModel });
+          if (!matchesYAxis) {
+            return;
+          }
+          // annotation points are all within range (checked in MctPlot with FlatBush), so we don't need to check
+          const annotatedPointBuffer = new Float32Array(
+            this.annotatedPointsBySeries[seriesKeyString].length * 2
+          );
+          Object.values(this.annotatedPointsBySeries[seriesKeyString]).forEach(
+            (annotatedPoint, index) => {
+              const canvasXValue = this.offset[yAxisId].xVal(annotatedPoint.point, seriesModel);
+              const canvasYValue = this.offset[yAxisId].yVal(annotatedPoint.point, seriesModel);
+              const drawnPointKey = `${canvasXValue}|${canvasYValue}`;
+              if (!uniquePointsToDraw.has(drawnPointKey)) {
+                annotatedPointBuffer[index * 2] = canvasXValue;
+                annotatedPointBuffer[index * 2 + 1] = canvasYValue;
+                uniquePointsToDraw.add(drawnPointKey);
+              }
             }
-        },
-        showLabels(seriesKey) {
-            return this.showLimitLineLabels.seriesKey
-                    && (this.showLimitLineLabels.seriesKey === seriesKey);
-        },
-        getLimitElement(limit) {
-            let point = {
-                left: 0,
-                top: this.drawAPI.y(limit.point.y)
-            };
-            let LimitLineClass = Vue.extend(LimitLine);
-            const component = new LimitLineClass({
-                propsData: {
-                    point,
-                    limit
-                }
-            });
-            component.$mount();
-
-            return component.$el;
-        },
-        getLimitOverlap(limit, overlapMap) {
-            //calculate if limit lines are too close to each other
-            let limitTop = this.drawAPI.y(limit.point.y);
-            const needsVerticalAdjustment = limitTop - CLEARANCE <= 0;
-            let needsHorizontalAdjustment = false;
-            overlapMap.forEach(value => {
-                let diffTop;
-                if (limitTop > value.overlapTop) {
-                    diffTop = limitTop - value.overlapTop;
-                } else {
-                    diffTop = value.overlapTop - limitTop;
-                }
-
-                //need to compare +ves to +ves and -ves to -ves
-                if (!needsHorizontalAdjustment
-                    && Math.abs(diffTop) <= CLEARANCE
-                    && value.needsHorizontalAdjustment !== true) {
-                    needsHorizontalAdjustment = true;
-                }
-            });
-
-            return {
-                needsHorizontalAdjustment,
-                needsVerticalAdjustment,
-                overlapTop: limitTop
-            };
-        },
-        getLimitLabel(limit, overlap) {
-            let point = {
-                left: 0,
-                top: this.drawAPI.y(limit.point.y)
-            };
-            let LimitLabelClass = Vue.extend(LimitLabel);
-            const component = new LimitLabelClass({
-                propsData: {
-                    limit: Object.assign({}, overlap, limit),
-                    point
-                }
-            });
-            component.$mount();
-
-            return component.$el;
-        },
-        drawAlarmPoints(alarmSet) {
-            this.drawAPI.drawLimitPoints(
-                alarmSet.points,
-                alarmSet.series.get('color').asRGBAArray(),
-                alarmSet.series.get('markerSize')
-            );
-        },
-        drawPoints(chartElement) {
-            this.drawAPI.drawPoints(
-                chartElement.getBuffer(),
-                chartElement.color().asRGBAArray(),
-                chartElement.count,
-                chartElement.series.get('markerSize'),
-                chartElement.series.get('markerShape')
-            );
-        },
-        drawLine(chartElement, disconnected) {
-            this.drawAPI.drawLine(
-                chartElement.getBuffer(),
-                chartElement.color().asRGBAArray(),
-                chartElement.count,
-                disconnected
+          );
+          this.drawAnnotatedPoints(seriesModel, annotatedPointBuffer);
+        });
+      }
+    },
+    drawAnnotatedPoints(seriesModel, annotatedPointBuffer) {
+      if (annotatedPointBuffer && seriesModel) {
+        const color = seriesModel.get('color').asRGBAArray();
+        // set transparency
+        color[3] = 0.15;
+        const pointCount = annotatedPointBuffer.length / 2;
+        const shape = seriesModel.get('markerShape');
+
+        this.drawAPI.drawPoints(annotatedPointBuffer, color, pointCount, ANNOTATION_SIZE, shape);
+      }
+    },
+    prepareToDrawAnnotationSelections(yAxisId) {
+      if (
+        this.annotationSelectionsBySeries &&
+        Object.keys(this.annotationSelectionsBySeries).length
+      ) {
+        Object.keys(this.annotationSelectionsBySeries).forEach((seriesKeyString) => {
+          const seriesModel = this.getSeries(seriesKeyString);
+          const matchesYAxis = this.matchByYAxisId(yAxisId, { series: seriesModel });
+          if (matchesYAxis) {
+            const annotationSelectionBuffer = new Float32Array(
+              this.annotationSelectionsBySeries[seriesKeyString].length * 2
             );
-        },
-        drawHighlights() {
-            if (this.highlights && this.highlights.length) {
-                this.highlights.forEach(this.drawHighlight, this);
-            }
-        },
-        drawHighlight(highlight) {
-            const points = new Float32Array([
-                this.offset.xVal(highlight.point, highlight.series),
-                this.offset.yVal(highlight.point, highlight.series)
-            ]);
-
-            const color = highlight.series.get('color').asRGBAArray();
-            const pointCount = 1;
-            const shape = highlight.series.get('markerShape');
-
-            this.drawAPI.drawPoints(points, color, pointCount, HIGHLIGHT_SIZE, shape);
-        },
-        drawRectangles() {
-            if (this.rectangles) {
-                this.rectangles.forEach(this.drawRectangle, this);
-            }
-        },
-        drawRectangle(rect) {
-            this.drawAPI.drawSquare(
-                [
-                    this.offset.x(rect.start.x),
-                    this.offset.y(rect.start.y)
-                ],
-                [
-                    this.offset.x(rect.end.x),
-                    this.offset.y(rect.end.y)
-                ],
-                rect.color
+            Object.values(this.annotationSelectionsBySeries[seriesKeyString]).forEach(
+              (annotatedSelectedPoint, index) => {
+                const canvasXValue = this.offset[yAxisId].xVal(
+                  annotatedSelectedPoint.point,
+                  seriesModel
+                );
+                const canvasYValue = this.offset[yAxisId].yVal(
+                  annotatedSelectedPoint.point,
+                  seriesModel
+                );
+                annotationSelectionBuffer[index * 2] = canvasXValue;
+                annotationSelectionBuffer[index * 2 + 1] = canvasYValue;
+              }
             );
-        }
+            this.drawAnnotationSelections(seriesModel, annotationSelectionBuffer);
+          }
+        });
+      }
+    },
+    drawAnnotationSelections(seriesModel, annotationSelectionBuffer) {
+      const color = [255, 255, 255, 1]; // white
+      const pointCount = annotationSelectionBuffer.length / 2;
+      const shape = seriesModel.get('markerShape');
+
+      this.drawAPI.drawPoints(annotationSelectionBuffer, color, pointCount, ANNOTATION_SIZE, shape);
+    },
+    drawHighlights(yAxisId) {
+      if (this.highlights && this.highlights.length) {
+        const highlights = this.highlights.filter((highlight) => {
+          const series = this.getSeries(highlight.seriesKeyString);
+          return this.matchByYAxisId.bind(yAxisId, { series });
+        });
+        highlights.forEach(this.drawHighlight.bind(this, yAxisId), this);
+      }
+    },
+    getSeries(keyStringToFind) {
+      const foundSeries = this.seriesModels.find((series) => {
+        return series.keyString === keyStringToFind;
+      });
+      return foundSeries;
+    },
+    drawHighlight(yAxisId, highlight) {
+      const series = this.getSeries(highlight.seriesKeyString);
+      const points = new Float32Array([
+        this.offset[yAxisId].xVal(highlight.point, series),
+        this.offset[yAxisId].yVal(highlight.point, series)
+      ]);
+
+      const color = series.get('color').asRGBAArray();
+      const pointCount = 1;
+      const shape = series.get('markerShape');
+
+      this.drawAPI.drawPoints(points, color, pointCount, HIGHLIGHT_SIZE, shape);
+    },
+    drawRectangles(yAxisId) {
+      if (this.rectangles) {
+        this.rectangles.forEach(this.drawRectangle.bind(this, yAxisId), this);
+      }
+    },
+    drawRectangle(yAxisId, rect) {
+      if (!rect.start.yAxisIds || !rect.end.yAxisIds) {
+        return;
+      }
+
+      const startYIndex = rect.start.yAxisIds.findIndex((id) => id === yAxisId);
+      const endYIndex = rect.end.yAxisIds.findIndex((id) => id === yAxisId);
+      if (rect.start.y[startYIndex] && rect.end.y[endYIndex]) {
+        this.drawAPI.drawSquare(
+          [this.offset[yAxisId].x(rect.start.x), this.offset[yAxisId].y(rect.start.y[startYIndex])],
+          [this.offset[yAxisId].x(rect.end.x), this.offset[yAxisId].y(rect.end.y[endYIndex])],
+          rect.color
+        );
+      }
     }
+  }
 };
-
 </script>
diff --git a/src/plugins/plot/chart/limitUtil.js b/src/plugins/plot/chart/limitUtil.js
index 6ca4df4482b..ffe82ce38a1 100644
--- a/src/plugins/plot/chart/limitUtil.js
+++ b/src/plugins/plot/chart/limitUtil.js
@@ -1,32 +1,32 @@
 export function getLimitClass(limit, prefix) {
-    let cssClass = '';
-    //If color exists then use it, fall back to the cssClass
-    if (limit.color) {
-        cssClass = `${cssClass} ${prefix}${limit.color}`;
-    } else if (limit.cssClass) {
-        cssClass = `${cssClass}${limit.cssClass}`;
-    }
+  let cssClass = '';
+  //If color exists then use it, fall back to the cssClass
+  if (limit.color) {
+    cssClass = `${cssClass} ${prefix}${limit.color}`;
+  } else if (limit.cssClass) {
+    cssClass = `${cssClass}${limit.cssClass}`;
+  }
 
-    // If we applied the cssClass then skip these classes
-    if (limit.cssClass === undefined) {
-        if (limit.isUpper) {
-            cssClass = `${cssClass} ${prefix}upr`;
-        } else {
-            cssClass = `${cssClass} ${prefix}lwr`;
-        }
+  // If we applied the cssClass then skip these classes
+  if (limit.cssClass === undefined) {
+    if (limit.isUpper) {
+      cssClass = `${cssClass} ${prefix}upr`;
+    } else {
+      cssClass = `${cssClass} ${prefix}lwr`;
+    }
 
-        if (limit.level) {
-            cssClass = `${cssClass} ${prefix}${limit.level}`;
-        }
+    if (limit.level) {
+      cssClass = `${cssClass} ${prefix}${limit.level}`;
+    }
 
-        if (limit.needsHorizontalAdjustment) {
-            cssClass = `${cssClass} --align-label-right`;
-        }
+    if (limit.needsHorizontalAdjustment) {
+      cssClass = `${cssClass} --align-label-right`;
+    }
 
-        if (limit.needsVerticalAdjustment) {
-            cssClass = `${cssClass} --align-label-below`;
-        }
+    if (limit.needsVerticalAdjustment) {
+      cssClass = `${cssClass} --align-label-below`;
     }
+  }
 
-    return cssClass;
+  return cssClass;
 }
diff --git a/src/plugins/plot/configuration/Collection.js b/src/plugins/plot/configuration/Collection.js
index 98f91a92c1a..19017c0e3dc 100644
--- a/src/plugins/plot/configuration/Collection.js
+++ b/src/plugins/plot/configuration/Collection.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,91 +19,100 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import Model from './Model';
+import Model from './Model.js';
 
+/**
+ * @template {object} T
+ * @template {object} O
+ * @extends {Model<T, O>}
+ */
 export default class Collection extends Model {
-
-    initialize(options) {
-        super.initialize(options);
-        this.modelClass = Model;
-        if (options.models) {
-            this.models = options.models.map(this.modelFn, this);
-        } else {
-            this.models = [];
-        }
-    }
-
-    modelFn(model) {
-        //TODO: Come back to this - why are we doing this?
-        if (model instanceof this.modelClass) {
-            model.collection = this;
-
-            return model;
-
-        }
-
-        return new this.modelClass({
-            collection: this,
-            model: model
-        });
+  /** @type {Constructor} */
+  modelClass = Model;
+
+  initialize(options) {
+    super.initialize(options);
+    if (options.models) {
+      this.models = options.models.map(this.modelFn, this);
+    } else {
+      this.models = [];
     }
+  }
 
-    first() {
-        return this.at(0);
-    }
-
-    forEach(iteree, context) {
-        this.models.forEach(iteree, context);
-    }
+  modelFn(model) {
+    //TODO: Come back to this - why are we doing this?
+    if (model instanceof this.modelClass) {
+      model.collection = this;
 
-    map(iteree, context) {
-        return this.models.map(iteree, context);
+      return model;
     }
 
-    filter(iteree, context) {
-        return this.models.filter(iteree, context);
+    return new this.modelClass({
+      collection: this,
+      model: model
+    });
+  }
+
+  first() {
+    return this.at(0);
+  }
+
+  forEach(iteree, context) {
+    this.models.forEach(iteree, context);
+  }
+
+  map(iteree, context) {
+    return this.models.map(iteree, context);
+  }
+
+  filter(iteree, context) {
+    return this.models.filter(iteree, context);
+  }
+
+  size() {
+    return this.models.length;
+  }
+
+  at(index) {
+    return this.models[index];
+  }
+
+  add(model) {
+    model = this.modelFn(model);
+    const index = this.models.length;
+    this.models.push(model);
+    this.emit('add', model, index);
+  }
+
+  insert(model, index) {
+    model = this.modelFn(model);
+    this.models.splice(index, 0, model);
+    this.emit('add', model, index + 1);
+  }
+
+  indexOf(model) {
+    return this.models.findIndex((m) => m === model);
+  }
+
+  remove(model) {
+    const index = this.indexOf(model);
+
+    if (index === -1) {
+      throw new Error('model not found in collection.');
     }
 
-    size() {
-        return this.models.length;
-    }
-
-    at(index) {
-        return this.models[index];
-    }
+    this.models.splice(index, 1);
+    this.emit('remove', model, index);
+  }
 
-    add(model) {
-        model = this.modelFn(model);
-        const index = this.models.length;
-        this.models.push(model);
-        this.emit('add', model, index);
-    }
-
-    insert(model, index) {
-        model = this.modelFn(model);
-        this.models.splice(index, 0, model);
-        this.emit('add', model, index + 1);
-    }
-
-    indexOf(model) {
-        return this.models.findIndex(m => m === model);
-    }
-
-    remove(model) {
-        const index = this.indexOf(model);
-
-        if (index === -1) {
-            throw new Error('model not found in collection.');
-        }
+  destroy(model) {
+    this.forEach(function (m) {
+      m.destroy();
+    });
+    this.stopListening();
+  }
+}
 
-        this.emit('remove', model, index);
-        this.models.splice(index, 1);
-    }
+/** @typedef {any} TODO */
 
-    destroy(model) {
-        this.forEach(function (m) {
-            m.destroy();
-        });
-        this.stopListening();
-    }
-}
+/** @typedef {new (...args: any[]) => object} Constructor */
diff --git a/src/plugins/plot/configuration/ConfigStore.js b/src/plugins/plot/configuration/ConfigStore.js
new file mode 100644
index 00000000000..2f502ef1659
--- /dev/null
+++ b/src/plugins/plot/configuration/ConfigStore.js
@@ -0,0 +1,65 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+class ConfigStore {
+  /** @type {Record<string, Destroyable>} */
+  store = {};
+
+  /**
+    @param {string} id
+    */
+  deleteStore(id) {
+    const obj = this.store[id];
+
+    if (obj) {
+      if (obj.destroy) {
+        obj.destroy();
+      }
+
+      delete this.store[id];
+    }
+  }
+
+  deleteAll() {
+    Object.keys(this.store).forEach((id) => this.deleteStore(id));
+  }
+
+  /**
+    @param {string} id
+    @param {any} config
+    */
+  add(id, config) {
+    this.store[id] = config;
+  }
+
+  /**
+    @param {string} id
+    */
+  get(id) {
+    return this.store[id];
+  }
+}
+
+const STORE = new ConfigStore();
+
+export default STORE;
+
+/** @typedef {{destroy?(): void}} Destroyable */
diff --git a/src/plugins/plot/configuration/LegendModel.js b/src/plugins/plot/configuration/LegendModel.js
index f99d709ecac..4d870a15d84 100644
--- a/src/plugins/plot/configuration/LegendModel.js
+++ b/src/plugins/plot/configuration/LegendModel.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,39 +20,47 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import Model from "./Model";
+import Model from './Model.js';
 /**
  * TODO: doc strings.
  */
 export default class LegendModel extends Model {
-    listenToSeriesCollection(seriesCollection) {
-        this.seriesCollection = seriesCollection;
-        this.listenTo(this.seriesCollection, 'add', this.setHeight, this);
-        this.listenTo(this.seriesCollection, 'remove', this.setHeight, this);
-        this.listenTo(this, 'change:expanded', this.setHeight, this);
-        this.set('expanded', this.get('expandByDefault'));
-    }
+  listenToSeriesCollection(seriesCollection) {
+    this.seriesCollection = seriesCollection;
+    this.listenTo(this.seriesCollection, 'add', this.setHeight, this);
+    this.listenTo(this.seriesCollection, 'remove', this.setHeight, this);
+    this.listenTo(this, 'change:expanded', this.setHeight, this);
+    this.set('expanded', this.get('expandByDefault'));
+  }
 
-    setHeight() {
-        const expanded = this.get('expanded');
-        if (this.get('position') !== 'top') {
-            this.set('height', '0px');
-        } else {
-            this.set('height', expanded ? (20 * (this.seriesCollection.size() + 1) + 40) + 'px' : '21px');
-        }
+  setHeight() {
+    const expanded = this.get('expanded');
+    if (this.get('position') !== 'top') {
+      this.set('height', '0px');
+    } else {
+      this.set('height', expanded ? 20 * (this.seriesCollection.size() + 1) + 40 + 'px' : '21px');
     }
+  }
 
-    defaults(options) {
-        return {
-            position: 'top',
-            expandByDefault: false,
-            hideLegendWhenSmall: false,
-            valueToShowWhenCollapsed: 'nearestValue',
-            showTimestampWhenExpanded: true,
-            showValueWhenExpanded: true,
-            showMaximumWhenExpanded: true,
-            showMinimumWhenExpanded: true,
-            showUnitsWhenExpanded: true
-        };
-    }
+  /**
+   * @override
+   */
+  defaultModel(options) {
+    return {
+      position: 'top',
+      expandByDefault: false,
+      hideLegendWhenSmall: false,
+      valueToShowWhenCollapsed: 'nearestValue',
+      showTimestampWhenExpanded: true,
+      showValueWhenExpanded: true,
+      showMaximumWhenExpanded: true,
+      showMinimumWhenExpanded: true,
+      showUnitsWhenExpanded: true,
+      showLegendsForChildren: true
+    };
+  }
+
+  destroy() {
+    this.stopListening();
+  }
 }
diff --git a/src/plugins/plot/configuration/Model.js b/src/plugins/plot/configuration/Model.js
index 95287016166..2a698c4c646 100644
--- a/src/plugins/plot/configuration/Model.js
+++ b/src/plugins/plot/configuration/Model.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,74 +20,144 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import EventEmitter from 'EventEmitter';
-import eventHelpers from "../lib/eventHelpers";
+import EventEmitter from 'eventemitter3';
 import _ from 'lodash';
 
+import eventHelpers from '../lib/eventHelpers.js';
+
+/**
+ * @template {object} T
+ * @template {object} O
+ */
 export default class Model extends EventEmitter {
-    constructor(options) {
-        super();
-
-        //need to do this as we're already extending EventEmitter
-        eventHelpers.extend(this);
-
-        if (!options) {
-            options = {};
-        }
-
-        this.id = options.id;
-        this.model = options.model;
-        this.collection = options.collection;
-        const defaults = this.defaults(options);
-        if (!this.model) {
-            this.model = options.model = defaults;
-        } else {
-            _.defaultsDeep(this.model, defaults);
-        }
-
-        this.initialize(options);
-        this.idAttr = 'id';
-    }
+  /**
+   * @param {ModelOptions<T, O>} options
+   */
+  constructor(options) {
+    super();
+    Object.defineProperty(this, '_events', {
+      value: this._events,
+      enumerable: false,
+      configurable: false,
+      writable: true
+    });
+
+    //need to do this as we're already extending EventEmitter
+    eventHelpers.extend(this);
 
-    defaults(options) {
-        return {};
+    if (!options) {
+      options = {};
     }
 
-    initialize(model) {
+    // FIXME: this.id is defined as a method further below, but here it is
+    // assigned a possibly-undefined value. Is this code unused?
+    this.id = options.id;
 
+    /** @type {ModelType<T>} */
+    this.model = options.model;
+    this.collection = options.collection;
+    const defaults = this.defaultModel(options);
+    if (!this.model) {
+      this.model = options.model = defaults;
+    } else {
+      _.defaultsDeep(this.model, defaults);
     }
 
-    /**
-     * Destroy the model, removing all listeners and subscriptions.
-     */
-    destroy() {
-        this.emit('destroy');
-        this.removeAllListeners();
-    }
+    this.initialize(options);
 
-    id() {
-        return this.get(this.idAttr);
-    }
+    /** @type {keyof ModelType<T> } */
+    this.idAttr = 'id';
+  }
 
-    get(attribute) {
-        return this.model[attribute];
-    }
+  /**
+   * @param {ModelOptions<T, O>} options
+   * @returns {ModelType<T>}
+   */
+  defaultModel(options) {
+    return {};
+  }
 
-    has(attribute) {
-        return _.has(this.model, attribute);
-    }
+  /**
+   * @abstract
+   * @param {ModelOptions<T, O>} options
+   */
+  initialize(options) {}
 
-    set(attribute, value) {
-        const oldValue = this.model[attribute];
-        this.model[attribute] = value;
-        this.emit('change', attribute, value, oldValue, this);
-        this.emit('change:' + attribute, value, oldValue, this);
-    }
+  /**
+   * Destroy the model, removing all listeners and subscriptions.
+   */
+  destroy() {
+    this.emit('destroy');
+    this.removeAllListeners();
+  }
 
-    unset(attribute) {
-        const oldValue = this.model[attribute];
-        delete this.model[attribute];
-        this.emit('change', attribute, undefined, oldValue, this);
-        this.emit('change:' + attribute, undefined, oldValue, this);
-    }
+  id() {
+    return this.get(this.idAttr);
+  }
+
+  /**
+   * @template {keyof ModelType<T>} K
+   * @param {K} attribute
+   * @returns {ModelType<T>[K]}
+   */
+  get(attribute) {
+    return this.model[attribute];
+  }
+
+  /**
+   * @template {keyof ModelType<T>} K
+   * @param {K} attribute
+   * @returns boolean
+   */
+  has(attribute) {
+    return _.has(this.model, attribute);
+  }
+
+  /**
+   * @template {keyof ModelType<T>} K
+   * @param {K} attribute
+   * @param {ModelType<T>[K]} value
+   */
+  set(attribute, value) {
+    const oldValue = this.model[attribute];
+    this.model[attribute] = value;
+    this.emit('change', attribute, value, oldValue, this);
+    this.emit('change:' + attribute, value, oldValue, this);
+  }
+
+  /**
+   * @template {keyof ModelType<T>} K
+   * @param {K} attribute
+   */
+  unset(attribute) {
+    const oldValue = this.model[attribute];
+    delete this.model[attribute];
+    this.emit('change', attribute, undefined, oldValue, this);
+    this.emit('change:' + attribute, undefined, oldValue, this);
+  }
 }
+
+/** @typedef {any} TODO */
+
+/**
+ * @typedef {import('../../../../openmct.js').OpenMCT} OpenMCT
+ */
+
+/**
+@template {object} T
+@typedef {{
+    id?: string
+} & T} ModelType
+*/
+
+/**
+@template {object} T
+@template {object} O
+@typedef {{
+    model?: ModelType<T>
+    models?: T[]
+    openmct: OpenMCT
+    id?: string
+    [k: string]: unknown
+} & O} ModelOptions
+*/
diff --git a/src/plugins/plot/configuration/PlotConfigurationModel.js b/src/plugins/plot/configuration/PlotConfigurationModel.js
index 24773f99896..ba9ed96a479 100644
--- a/src/plugins/plot/configuration/PlotConfigurationModel.js
+++ b/src/plugins/plot/configuration/PlotConfigurationModel.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,116 +21,208 @@
  *****************************************************************************/
 import _ from 'lodash';
 
-import Model from "./Model";
-import SeriesCollection from "./SeriesCollection";
-import XAxisModel from "./XAxisModel";
-import YAxisModel from "./YAxisModel";
-import LegendModel from "./LegendModel";
+import LegendModel from './LegendModel.js';
+import Model from './Model.js';
+import SeriesCollection from './SeriesCollection.js';
+import XAxisModel from './XAxisModel.js';
+import YAxisModel from './YAxisModel.js';
+
+const MAX_Y_AXES = 3;
+const MAIN_Y_AXES_ID = 1;
+const MAX_ADDITIONAL_AXES = MAX_Y_AXES - 1;
+
 /**
  * PlotConfiguration model stores the configuration of a plot and some
- * limited state.  The indiidual parts of the plot configuration model
+ * limited state.  The individual parts of the plot configuration model
  * handle setting defaults and updating in response to various changes.
  *
+ * @extends {Model<PlotConfigModelType, PlotConfigModelOptions>}
  */
 export default class PlotConfigurationModel extends Model {
-    /**
-     * Initializes all sub models and then passes references to submodels
-     * to those that need it.
-     */
-    initialize(options) {
-        this.openmct = options.openmct;
-
-        this.xAxis = new XAxisModel({
-            model: options.model.xAxis,
-            plot: this,
-            openmct: options.openmct
-        });
-        this.yAxis = new YAxisModel({
-            model: options.model.yAxis,
-            plot: this,
-            openmct: options.openmct
-        });
-        this.legend = new LegendModel({
-            model: options.model.legend,
-            plot: this,
-            openmct: options.openmct
-        });
-        this.series = new SeriesCollection({
-            models: options.model.series,
-            plot: this,
-            openmct: options.openmct
-        });
+  /**
+   * Initializes all sub models and then passes references to submodels
+   * to those that need it.
+   *
+   * @override
+   * @param {import('./Model').ModelOptions<PlotConfigModelType, PlotConfigModelOptions>} options
+   */
+  initialize(options) {
+    this.openmct = options.openmct;
 
-        if (this.get('domainObject').type === 'telemetry.plot.overlay') {
-            this.removeMutationListener = this.openmct.objects.observe(
-                this.get('domainObject'),
-                '*',
-                this.updateDomainObject.bind(this)
-            );
-        }
+    // This is a type assertion for TypeScript, this error is never thrown in practice.
+    if (!options.model) {
+      throw new Error('Not a collection model.');
+    }
 
-        this.yAxis.listenToSeriesCollection(this.series);
-        this.legend.listenToSeriesCollection(this.series);
+    this.xAxis = new XAxisModel({
+      model: options.model.xAxis,
+      plot: this,
+      openmct: options.openmct
+    });
+    this.yAxis = new YAxisModel({
+      model: options.model.yAxis,
+      plot: this,
+      openmct: options.openmct,
+      id: options.model.yAxis.id || MAIN_Y_AXES_ID
+    });
+    //Add any axes in addition to the main yAxis above - we must always have at least 1 y-axis
+    //Addition axes ids will be the MAIN_Y_AXES_ID + x where x is between 1 and MAX_ADDITIONAL_AXES
+    this.additionalYAxes = [];
+    const hasAdditionalAxesConfiguration = Array.isArray(options.model.additionalYAxes);
 
-        this.listenTo(this, 'destroy', this.onDestroy, this);
-    }
-    /**
-     * Retrieve the persisted series config for a given identifier.
-     */
-    getPersistedSeriesConfig(identifier) {
-        const domainObject = this.get('domainObject');
-        if (!domainObject.configuration || !domainObject.configuration.series) {
-            return;
-        }
-
-        return domainObject.configuration.series.filter(function (seriesConfig) {
-            return seriesConfig.identifier.key === identifier.key
-                    && seriesConfig.identifier.namespace === identifier.namespace;
-        })[0];
+    for (let yAxisCount = 0; yAxisCount < MAX_ADDITIONAL_AXES; yAxisCount++) {
+      const yAxisId = MAIN_Y_AXES_ID + yAxisCount + 1;
+      const yAxis =
+        hasAdditionalAxesConfiguration &&
+        options.model.additionalYAxes.find((additionalYAxis) => additionalYAxis?.id === yAxisId);
+      if (yAxis) {
+        this.additionalYAxes.push(
+          new YAxisModel({
+            model: yAxis,
+            plot: this,
+            openmct: options.openmct,
+            id: yAxis.id
+          })
+        );
+      } else {
+        this.additionalYAxes.push(
+          new YAxisModel({
+            plot: this,
+            openmct: options.openmct,
+            id: yAxisId
+          })
+        );
+      }
     }
-    /**
-     * Retrieve the persisted filters for a given identifier.
-     */
-    getPersistedFilters(identifier) {
-        const domainObject = this.get('domainObject');
-        const keystring = this.openmct.objects.makeKeyString(identifier);
-
-        if (!domainObject.configuration || !domainObject.configuration.filters) {
-            return;
-        }
-
-        return domainObject.configuration.filters[keystring];
+    // end add additional axes
+
+    this.legend = new LegendModel({
+      model: options.model.legend,
+      plot: this,
+      openmct: options.openmct
+    });
+    this.series = new SeriesCollection({
+      models: options.model.series,
+      plot: this,
+      openmct: options.openmct,
+      palette: options.palette
+    });
+
+    if (this.get('domainObject').type === 'telemetry.plot.overlay') {
+      this.removeMutationListener = this.openmct.objects.observe(
+        this.get('domainObject'),
+        '*',
+        this.updateDomainObject.bind(this)
+      );
     }
-    /**
-     * Update the domain object with the given value.
-     */
-    updateDomainObject(domainObject) {
-        this.set('domainObject', domainObject);
+
+    this.yAxis.listenToSeriesCollection(this.series);
+    this.additionalYAxes.forEach((yAxis) => {
+      yAxis.listenToSeriesCollection(this.series);
+    });
+    this.legend.listenToSeriesCollection(this.series);
+
+    this.listenTo(this, 'destroy', this.onDestroy, this);
+  }
+  /**
+   * Retrieve the persisted series config for a given identifier.
+   * @param {import('./PlotSeries').Identifier} identifier
+   * @returns {import('./PlotSeries').PlotSeriesModelType=}
+   */
+  getPersistedSeriesConfig(identifier) {
+    const domainObject = this.get('domainObject');
+    if (!domainObject.configuration || !domainObject.configuration.series) {
+      return;
     }
-    /**
-     * Clean up all objects and remove all listeners.
-     */
-    onDestroy() {
-        this.xAxis.destroy();
-        this.yAxis.destroy();
-        this.series.destroy();
-        this.legend.destroy();
-        if (this.removeMutationListener) {
-            this.removeMutationListener();
-        }
+
+    return domainObject.configuration.series.filter(function (seriesConfig) {
+      return (
+        seriesConfig.identifier.key === identifier.key &&
+        seriesConfig.identifier.namespace === identifier.namespace
+      );
+    })[0];
+  }
+  /**
+   * Retrieve the persisted filters for a given identifier.
+   */
+  getPersistedFilters(identifier) {
+    const domainObject = this.get('domainObject');
+    const keystring = this.openmct.objects.makeKeyString(identifier);
+
+    if (!domainObject.configuration || !domainObject.configuration.filters) {
+      return;
     }
-    /**
-     * Return defaults, which are extracted from the passed in domain
-     * object.
-     */
-    defaults(options) {
-        return {
-            series: [],
-            domainObject: options.domainObject,
-            xAxis: {
-            },
-            yAxis: _.cloneDeep(_.get(options.domainObject, 'configuration.yAxis', {})),
-            legend: _.cloneDeep(_.get(options.domainObject, 'configuration.legend', {}))
-        };
+
+    return domainObject.configuration.filters[keystring];
+  }
+  /**
+   * Update the domain object with the given value.
+   */
+  updateDomainObject(domainObject) {
+    this.set('domainObject', domainObject);
+  }
+
+  /**
+   * Clean up all objects and remove all listeners.
+   */
+  onDestroy() {
+    this.xAxis.destroy();
+    this.yAxis.destroy();
+    this.additionalYAxes.forEach((additionalYAxis) => additionalYAxis.destroy());
+    this.series.destroy();
+    this.legend.destroy();
+    this.stopListening();
+    if (this.removeMutationListener) {
+      this.removeMutationListener();
     }
+  }
+  /**
+   * Return defaults, which are extracted from the passed in domain
+   * object.
+   * @override
+   * @param {import('./Model').ModelOptions<PlotConfigModelType, PlotConfigModelOptions>} options
+   */
+  defaultModel(options) {
+    return {
+      series: [],
+      domainObject: options.domainObject,
+      xAxis: {},
+      yAxis: _.cloneDeep(options.domainObject.configuration?.yAxis ?? {}),
+      additionalYAxes: _.cloneDeep(options.domainObject.configuration?.additionalYAxes ?? []),
+      legend: _.cloneDeep(options.domainObject.configuration?.legend ?? {})
+    };
+  }
 }
+
+/** @typedef {any} TODO */
+
+/** @typedef {import('./PlotSeries').default} PlotSeries */
+
+/**
+@typedef {{
+    configuration: {
+        series: import('./PlotSeries').PlotSeriesModelType[]
+        yAxis: import('./YAxisModel').YAxisModelType
+    },
+}} SomeDomainObject_NeedsName
+*/
+
+/**
+@typedef {{
+    xAxis: import('./XAxisModel').XAxisModelType
+    yAxis: import('./YAxisModel').YAxisModelType
+    legend: TODO
+    series: PlotSeries[]
+    domainObject: SomeDomainObject_NeedsName
+}} PlotConfigModelType
+*/
+
+/** @typedef {TODO} SomeOtherDomainObject */
+
+/**
+TODO: Is SomeOtherDomainObject the same domain object as with SomeDomainObject_NeedsName?
+@typedef {{
+    plot: import('./PlotConfigurationModel').default
+    domainObject: SomeOtherDomainObject
+}} PlotConfigModelOptions
+*/
diff --git a/src/plugins/plot/configuration/PlotSeries.js b/src/plugins/plot/configuration/PlotSeries.js
index a5778c3a4c3..fdc26d277e4 100644
--- a/src/plugins/plot/configuration/PlotSeries.js
+++ b/src/plugins/plot/configuration/PlotSeries.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,9 +19,10 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import _ from 'lodash';
-import Model from "./Model";
-import { MARKER_SHAPES } from '../draw/MarkerShapes';
+import configStore from '../configuration/ConfigStore.js';
+import { MARKER_SHAPES } from '../draw/MarkerShapes.js';
+import { symlog } from '../mathUtils.js';
+import Model from './Model.js';
 
 /**
  * Plot series handle interpreting telemetry metadata for a single telemetry
@@ -58,416 +59,577 @@ import { MARKER_SHAPES } from '../draw/MarkerShapes';
  * `metadata`: the Open MCT Telemetry Metadata Manager for the associated
  *             telemetry point.
  * `formats`: the Open MCT format map for this telemetry point.
+ *
+ * @extends {Model<PlotSeriesModelType, PlotSeriesModelOptions>}
  */
+
+const FLOAT32_MAX = 3.4e38;
+const FLOAT32_MIN = -3.4e38;
+
 export default class PlotSeries extends Model {
-    constructor(options) {
-        super(options);
-        this.data = [];
-
-        this.listenTo(this, 'change:xKey', this.onXKeyChange, this);
-        this.listenTo(this, 'change:yKey', this.onYKeyChange, this);
-        this.persistedConfig = options.persistedConfig;
-        this.filters = options.filters;
-
-        // Model.apply(this, arguments);
-        this.onXKeyChange(this.get('xKey'));
-        this.onYKeyChange(this.get('yKey'));
-    }
+  logMode = false;
 
-    /**
-     * Set defaults for telemetry series.
+  /**
+     @param {import('./Model').ModelOptions<PlotSeriesModelType, PlotSeriesModelOptions>} options
      */
-    defaults(options) {
-        this.metadata = options
-            .openmct
-            .telemetry
-            .getMetadata(options.domainObject);
-        this.formats = options
-            .openmct
-            .telemetry
-            .getFormatMap(this.metadata);
-
-        const range = this.metadata.valuesForHints(['range'])[0];
-
-        return {
-            name: options.domainObject.name,
-            unit: range.unit,
-            xKey: options.collection.plot.xAxis.get('key'),
-            yKey: range.key,
-            markers: true,
-            markerShape: 'point',
-            markerSize: 2.0,
-            alarmMarkers: true,
-            limitLines: false
-        };
-    }
+  constructor(options) {
+    super(options);
 
-    /**
-     * Remove real-time subscription when destroyed.
-     */
-    onDestroy(model) {
-        if (this.unsubscribe) {
-            this.unsubscribe();
-        }
-    }
+    this.logMode = this.getLogMode(options);
 
-    initialize(options) {
-        this.openmct = options.openmct;
-        this.domainObject = options.domainObject;
-        this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-        this.limitEvaluator = this.openmct.telemetry.limitEvaluator(options.domainObject);
-        this.limitDefinition = this.openmct.telemetry.limitDefinition(options.domainObject);
-        this.limits = [];
-        this.limitDefinition.limits().then(response => {
-            this.limits = [];
-
-            if (response) {
-                this.limits = response;
-            }
+    this.listenTo(this, 'change:xKey', this.onXKeyChange, this);
+    this.listenTo(this, 'change:yKey', this.onYKeyChange, this);
+    this.persistedConfig = options.persistedConfig;
+    this.filters = options.filters;
 
-            this.emit('limits', this);
+    // Model.apply(this, arguments);
+    this.onXKeyChange(this.get('xKey'));
+    this.onYKeyChange(this.get('yKey'));
 
-        });
-        this.openmct.time.on('bounds', this.updateLimits);
-        this.on('destroy', this.onDestroy, this);
-    }
+    this.unPlottableValues = [undefined, Infinity, -Infinity];
+  }
 
-    updateLimits(bounds) {
-        this.emit('limitBounds', bounds);
-    }
+  getLogMode(options) {
+    const yAxisId = this.get('yAxisId');
+    if (yAxisId === 1) {
+      return options.collection.plot.model.yAxis.logMode;
+    } else {
+      const foundYAxis = options.collection.plot.model.additionalYAxes.find(
+        (yAxis) => yAxis.id === yAxisId
+      );
 
-    locateOldObject(oldStyleParent) {
-        return oldStyleParent.useCapability('composition')
-            .then(function (children) {
-                this.oldObject = children
-                    .filter(function (child) {
-                        return child.getId() === this.keyString;
-                    }, this)[0];
-            }.bind(this));
+      return foundYAxis ? foundYAxis.logMode : false;
+    }
+  }
+
+  /**
+   * Set defaults for telemetry series.
+   * @param {import('./Model').ModelOptions<PlotSeriesModelType, PlotSeriesModelOptions>} options
+   * @override
+   */
+  defaultModel(options) {
+    this.metadata = options.openmct.telemetry.getMetadata(options.domainObject);
+
+    this.formats = options.openmct.telemetry.getFormatMap(this.metadata);
+
+    //if the object is missing or doesn't have metadata for some reason
+    let range = {};
+    if (this.metadata) {
+      range = this.metadata.valuesForHints(['range'])[0];
     }
-    /**
-     * Fetch historical data and establish a realtime subscription.  Returns
-     * a promise that is resolved when all connections have been successfully
-     * established.
-     *
-     * @returns {Promise}
-     */
-    fetch(options) {
-        let strategy;
 
-        if (this.model.interpolate !== 'none') {
-            strategy = 'minmax';
-        }
+    return {
+      name: options.domainObject.name,
+      unit: range.unit,
+      xKey: options.collection.plot.xAxis.get('key'),
+      yKey: range.key,
+      markers: true,
+      markerShape: 'point',
+      markerSize: 2.0,
+      alarmMarkers: true,
+      limitLines: false,
+      yAxisId: options.model.yAxisId || 1
+    };
+  }
+
+  /**
+   * Remove real-time subscription when destroyed.
+   * @override
+   */
+  destroy() {
+    //this triggers Model.destroy which in turn triggers destroy methods for other classes.
+    super.destroy();
+    this.stopListening();
+    this.openmct.time.off('bounds', this.updateLimits);
+
+    if (this.unsubscribe) {
+      this.unsubscribe();
+    }
 
-        options = Object.assign({}, {
-            size: 1000,
-            strategy,
-            filters: this.filters
-        }, options || {});
-
-        if (!this.unsubscribe) {
-            this.unsubscribe = this.openmct
-                .telemetry
-                .subscribe(
-                    this.domainObject,
-                    this.add.bind(this),
-                    {
-                        filters: this.filters
-                    }
-                );
-        }
+    if (this.unsubscribeLimits) {
+      this.unsubscribeLimits();
+    }
 
-        /* eslint-disable you-dont-need-lodash-underscore/concat */
-        return this.openmct
-            .telemetry
-            .request(this.domainObject, options)
-            .then(function (points) {
-                const newPoints = _(this.data)
-                    .concat(points)
-                    .sortBy(this.getXVal)
-                    .uniq(true, point => [this.getXVal(point), this.getYVal(point)].join())
-                    .value();
-                this.reset(newPoints);
-            }.bind(this));
-        /* eslint-enable you-dont-need-lodash-underscore/concat */
+    if (this.removeMutationListener) {
+      this.removeMutationListener();
     }
-    /**
-     * Update x formatter on x change.
-     */
-    onXKeyChange(xKey) {
-        const format = this.formats[xKey];
-        this.getXVal = format.parse.bind(format);
+
+    configStore.deleteStore(this.dataStoreId);
+  }
+
+  /**
+   * Set defaults for telemetry series.
+   * @override
+   * @param {import('./Model').ModelOptions<PlotSeriesModelType, PlotSeriesModelOptions>} options
+   */
+  initialize(options) {
+    this.openmct = options.openmct;
+    this.domainObject = options.domainObject;
+    this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+    this.dataStoreId = `data-${options.collection.plot.id}-${this.keyString}`;
+    this.updateSeriesData([]);
+    this.limitEvaluator = this.openmct.telemetry.limitEvaluator(options.domainObject);
+    this.limitDefinition = this.openmct.telemetry.limitDefinition(options.domainObject);
+    this.limits = [];
+    this.openmct.time.on('bounds', this.updateLimits);
+    this.removeMutationListener = this.openmct.objects.observe(
+      this.domainObject,
+      'name',
+      this.updateName.bind(this)
+    );
+  }
+
+  /**
+   * @param {Bounds} bounds
+   */
+  updateLimits(bounds) {
+    this.emit('limitBounds', bounds);
+  }
+
+  /**
+   * Fetch historical data and establish a realtime subscription.  Returns
+   * a promise that is resolved when all connections have been successfully
+   * established.
+   *
+   * @returns {Promise}
+   */
+  async fetch(options) {
+    let strategy;
+
+    if (this.model.interpolate !== 'none') {
+      strategy = 'minmax';
     }
-    /**
-     * Update y formatter on change, default to stepAfter interpolation if
-     * y range is an enumeration.
-     */
-    onYKeyChange(newKey, oldKey) {
-        if (newKey === oldKey) {
-            return;
-        }
 
-        const valueMetadata = this.metadata.value(newKey);
-        if (!this.persistedConfig || !this.persistedConfig.interpolate) {
-            if (valueMetadata.format === 'enum') {
-                this.set('interpolate', 'stepAfter');
-            } else {
-                this.set('interpolate', 'linear');
-            }
+    options = Object.assign(
+      {},
+      {
+        size: 1000,
+        strategy,
+        filters: this.filters
+      },
+      options || {}
+    );
+
+    if (!this.unsubscribe) {
+      this.unsubscribe = this.openmct.telemetry.subscribe(
+        this.domainObject,
+        (data) => {
+          this.addAll(data, true);
+        },
+        {
+          filters: this.filters,
+          strategy: this.openmct.telemetry.SUBSCRIBE_STRATEGY.BATCH
         }
-
-        this.evaluate = function (datum) {
-            return this.limitEvaluator.evaluate(datum, valueMetadata);
-        }.bind(this);
-        const format = this.formats[newKey];
-        this.getYVal = format.parse.bind(format);
+      );
     }
 
-    formatX(point) {
-        return this.formats[this.get('xKey')].format(point);
+    try {
+      const points = await this.openmct.telemetry.request(this.domainObject, options);
+      const data = this.getSeriesData();
+      // eslint-disable-next-line you-dont-need-lodash-underscore/concat
+      const newPoints = _(data)
+        .concat(points)
+        .sortBy(this.getXVal)
+        .uniq(true, (point) => [this.getXVal(point), this.getYVal(point)].join())
+        .value();
+      this.reset(newPoints);
+    } catch (error) {
+      console.warn('Error fetching data', error);
     }
+  }
 
-    formatY(point) {
-        return this.formats[this.get('yKey')].format(point);
+  updateName(name) {
+    if (name !== this.get('name')) {
+      this.set('name', name);
+    }
+  }
+  /**
+   * Update x formatter on x change.
+   */
+  onXKeyChange(xKey) {
+    const format = this.formats[xKey];
+    if (format) {
+      this.getXVal = format.parse.bind(format);
+    }
+  }
+
+  /**
+   * Update y formatter on change, default to stepAfter interpolation if
+   * y range is an enumeration.
+   */
+  onYKeyChange(newKey, oldKey) {
+    if (newKey === oldKey) {
+      return;
     }
 
-    /**
-     * Clear stats and recalculate from existing data.
-     */
-    resetStats() {
-        this.unset('stats');
-        this.data.forEach(this.updateStats, this);
+    const valueMetadata = this.metadata.value(newKey);
+    //TODO: Should we do this even if there is a persisted config?
+    if (!this.persistedConfig || !this.persistedConfig.interpolate) {
+      if (valueMetadata.format === 'enum') {
+        this.set('interpolate', 'stepAfter');
+      } else {
+        this.set('interpolate', 'linear');
+      }
     }
 
-    /**
-     * Reset plot series.  If new data is provided, will add that
-     * data to series after reset.
-     */
-    reset(newData) {
-        this.data = [];
-        this.resetStats();
-        this.emit('reset');
-        if (newData) {
-            newData.forEach(function (point) {
-                this.add(point, true);
-            }, this);
-        }
+    this.evaluate = function (datum) {
+      return this.limitEvaluator.evaluate(datum, valueMetadata);
+    }.bind(this);
+    this.set('unit', valueMetadata.unit);
+    const format = this.formats[newKey];
+    this.getYVal = (value) => {
+      const y = format.parse(value);
+
+      return this.logMode ? symlog(y, 10) : y;
+    };
+  }
+
+  formatX(point) {
+    return this.formats[this.get('xKey')].format(point);
+  }
+
+  formatY(point) {
+    return this.formats[this.get('yKey')].format(point);
+  }
+
+  /**
+   * Clear stats and recalculate from existing data.
+   */
+  resetStats() {
+    this.unset('stats');
+    this.getSeriesData().forEach(this.updateStats, this);
+  }
+
+  /**
+   * Reset plot series.  If new data is provided, will add that
+   * data to series after reset.
+   */
+  reset(newData) {
+    this.updateSeriesData([]);
+    this.resetStats();
+    this.emit('reset');
+    if (newData) {
+      this.addAll(newData, true);
     }
-    /**
-     * Return the point closest to a given x value.
-     */
-    nearestPoint(xValue) {
-        const insertIndex = this.sortedIndex(xValue);
-        const lowPoint = this.data[insertIndex - 1];
-        const highPoint = this.data[insertIndex];
-        const indexVal = this.getXVal(xValue);
-        const lowDistance = lowPoint
-            ? indexVal - this.getXVal(lowPoint)
-            : Number.POSITIVE_INFINITY;
-        const highDistance = highPoint
-            ? this.getXVal(highPoint) - indexVal
-            : Number.POSITIVE_INFINITY;
-        const nearestPoint = highDistance < lowDistance ? highPoint : lowPoint;
-
-        return nearestPoint;
+  }
+  /**
+   * Return the point closest to a given x value.
+   */
+  nearestPoint(xValue) {
+    const insertIndex = this.sortedIndex(xValue);
+    const data = this.getSeriesData();
+    const lowPoint = data[insertIndex - 1];
+    const highPoint = data[insertIndex];
+    const indexVal = this.getXVal(xValue);
+    const lowDistance = lowPoint ? indexVal - this.getXVal(lowPoint) : Number.POSITIVE_INFINITY;
+    const highDistance = highPoint ? this.getXVal(highPoint) - indexVal : Number.POSITIVE_INFINITY;
+    const nearestPoint = highDistance < lowDistance ? highPoint : lowPoint;
+
+    return nearestPoint;
+  }
+  /**
+   * Override this to implement plot series loading functionality.  Must return
+   * a promise that is resolved when loading is completed.
+   *
+   * @returns {Promise}
+   */
+  async load(options) {
+    await this.fetch(options);
+    this.emit('load');
+    await this.loadLimits();
+  }
+
+  async loadLimits() {
+    const limitsResponse = await this.limitDefinition.limits();
+    this.limits = {};
+    if (!this.unsubscribeLimits) {
+      this.unsubscribeLimits = this.openmct.telemetry.subscribeToLimits(
+        this.domainObject,
+        this.limitsUpdated.bind(this)
+      );
+    }
+    this.limitsUpdated(limitsResponse);
+  }
+
+  limitsUpdated(limitsResponse) {
+    if (limitsResponse) {
+      this.limits = limitsResponse;
+    } else {
+      this.limits = {};
     }
-    /**
-     * Override this to implement plot series loading functionality.  Must return
-     * a promise that is resolved when loading is completed.
-     *
-     * @private
-     * @returns {Promise}
-     */
-    load(options) {
-        return this.fetch(options)
-            .then(function (res) {
-                this.emit('load');
 
-                return res;
-            }.bind(this));
+    this.emit('limits', this);
+    this.emit('change:limitLines', this);
+  }
+
+  /**
+   * Find the insert index for a given point to maintain sort order.
+   * @private
+   */
+  sortedIndex(point) {
+    return _.sortedIndexBy(this.getSeriesData(), point, this.getXVal);
+  }
+  /**
+   * Update min/max stats for the series.
+   * @private
+   */
+  updateStats(point) {
+    const value = this.getYVal(point);
+    let stats = this.get('stats');
+    let changed = false;
+    if (!stats) {
+      if ([Infinity, -Infinity].includes(value) || !this.isValidFloat32(value)) {
+        return;
+      }
+
+      stats = {
+        minValue: value,
+        minPoint: point,
+        maxValue: value,
+        maxPoint: point
+      };
+      changed = true;
+    } else {
+      if (stats.maxValue < value && value !== Infinity && this.isValidFloat32(value)) {
+        stats.maxValue = value;
+        stats.maxPoint = point;
+        changed = true;
+      }
+
+      if (stats.minValue > value && value !== -Infinity && this.isValidFloat32(value)) {
+        stats.minValue = value;
+        stats.minPoint = point;
+        changed = true;
+      }
     }
 
-    /**
-     * Find the insert index for a given point to maintain sort order.
-     * @private
-     */
-    sortedIndex(point) {
-        return _.sortedIndexBy(this.data, point, this.getXVal);
+    if (changed) {
+      this.set('stats', {
+        minValue: stats.minValue,
+        minPoint: stats.minPoint,
+        maxValue: stats.maxValue,
+        maxPoint: stats.maxPoint
+      });
+    }
+  }
+
+  /**
+   * Add a point to the data array while maintaining the sort order of
+   * the array and preventing insertion of points with a duplicate x
+   * value. Can provide an optional argument to append a point without
+   * maintaining sort order and dupe checks, which improves performance
+   * when adding an array of points that are already properly sorted.
+   *
+   * @private
+   * @param {Object} newData a telemetry datum.
+   * @param {Boolean} [sorted] default false, if true will append
+   *                  a point to the end without dupe checking.
+   */
+  add(newData, sorted = false) {
+    let data = this.getSeriesData();
+    let insertIndex = data.length;
+    const currentYVal = this.getYVal(newData);
+    const lastYVal = this.getYVal(data[insertIndex - 1]);
+
+    if (this.isValueInvalid(currentYVal) && this.isValueInvalid(lastYVal)) {
+      console.warn(`[Plot] Invalid Y Values detected: ${currentYVal} ${lastYVal}`);
+
+      return;
     }
-    /**
-     * Update min/max stats for the series.
-     * @private
-     */
-    updateStats(point) {
-        const value = this.getYVal(point);
-        let stats = this.get('stats');
-        let changed = false;
-        if (!stats) {
-            stats = {
-                minValue: value,
-                minPoint: point,
-                maxValue: value,
-                maxPoint: point
-            };
-            changed = true;
-        } else {
-            if (stats.maxValue < value) {
-                stats.maxValue = value;
-                stats.maxPoint = point;
-                changed = true;
-            }
 
-            if (stats.minValue > value) {
-                stats.minValue = value;
-                stats.minPoint = point;
-                changed = true;
-            }
-        }
+    if (!sorted) {
+      insertIndex = this.sortedIndex(newData);
+      if (this.getXVal(data[insertIndex]) === this.getXVal(newData)) {
+        return;
+      }
 
-        if (changed) {
-            this.set('stats', {
-                minValue: stats.minValue,
-                minPoint: stats.minPoint,
-                maxValue: stats.maxValue,
-                maxPoint: stats.maxPoint
-            });
-        }
+      if (this.getXVal(data[insertIndex - 1]) === this.getXVal(newData)) {
+        return;
+      }
     }
-    /**
-     * Add a point to the data array while maintaining the sort order of
-     * the array and preventing insertion of points with a duplicate x
-     * value. Can provide an optional argument to append a point without
-     * maintaining sort order and dupe checks, which improves performance
-     * when adding an array of points that are already properly sorted.
-     *
-     * @private
-     * @param {Object} point a telemetry datum.
-     * @param {Boolean} [appendOnly] default false, if true will append
-     *                  a point to the end without dupe checking.
-     */
-    add(point, appendOnly) {
-        let insertIndex = this.data.length;
-        const currentYVal = this.getYVal(point);
-        const lastYVal = this.getYVal(this.data[insertIndex - 1]);
 
-        if (this.isValueInvalid(currentYVal) && this.isValueInvalid(lastYVal)) {
-            console.warn('[Plot] Invalid Y Values detected');
+    this.updateStats(newData);
+    newData.mctLimitState = this.evaluate(newData);
+    data.splice(insertIndex, 0, newData);
+    this.updateSeriesData(data);
+    this.emit('add', newData, insertIndex, this);
+  }
 
-            return;
-        }
+  addAll(points, sorted = false) {
+    for (let i = 0; i < points.length; i++) {
+      this.add(points[i], sorted);
+    }
+  }
+
+  /**
+   *
+   * @private
+   */
+  isValueInvalid(val) {
+    return Number.isNaN(val) || this.unPlottableValues.includes(val) || !this.isValidFloat32(val);
+  }
+
+  /**
+   *
+   * @private
+   */
+  isValidFloat32(val) {
+    return val < FLOAT32_MAX && val > FLOAT32_MIN;
+  }
+
+  /**
+   * Remove a point from the data array and notify listeners.
+   * @private
+   */
+  remove(point) {
+    let data = this.getSeriesData();
+    const index = data.indexOf(point);
+    data.splice(index, 1);
+    this.updateSeriesData(data);
+    this.emit('remove', point, index, this);
+  }
+  /**
+   * Purges records outside a given x range.  Changes removal method based
+   * on number of records to remove: for large purge, reset data and
+   * rebuild array.  for small purge, removes points and emits updates.
+   *
+   * @public
+   * @param {Object} range
+   * @param {number} range.min minimum x value to keep
+   * @param {number} range.max maximum x value to keep.
+   */
+  purgeRecordsOutsideRange(range) {
+    const startIndex = this.sortedIndex(range.min);
+    const endIndex = this.sortedIndex(range.max) + 1;
+    let data = this.getSeriesData();
+    const pointsToRemove = startIndex + (data.length - endIndex + 1);
+    if (pointsToRemove > 0) {
+      if (pointsToRemove < 1000) {
+        data.slice(0, startIndex).forEach(this.remove, this);
+        data.slice(endIndex, data.length).forEach(this.remove, this);
+        this.updateSeriesData(data);
+        this.resetStats();
+      } else {
+        const newData = this.getSeriesData().slice(startIndex, endIndex);
+        this.reset(newData);
+      }
+    }
+  }
+  /**
+   * Updates filters, clears the plot series, unsubscribes and resubscribes
+   * @public
+   */
+  updateFiltersAndRefresh(updatedFilters) {
+    if (updatedFilters === undefined) {
+      return;
+    }
 
-        if (!appendOnly) {
-            insertIndex = this.sortedIndex(point);
-            if (this.getXVal(this.data[insertIndex]) === this.getXVal(point)) {
-                return;
-            }
+    let deepCopiedFilters = JSON.parse(JSON.stringify(updatedFilters));
 
-            if (this.getXVal(this.data[insertIndex - 1]) === this.getXVal(point)) {
-                return;
-            }
-        }
+    if (this.filters && !_.isEqual(this.filters, deepCopiedFilters)) {
+      this.filters = deepCopiedFilters;
+      this.reset();
+      if (this.unsubscribe) {
+        this.unsubscribe();
+        delete this.unsubscribe;
+      }
 
-        this.updateStats(point);
-        point.mctLimitState = this.evaluate(point);
-        this.data.splice(insertIndex, 0, point);
-        this.emit('add', point, insertIndex, this);
+      this.fetch();
+    } else {
+      this.filters = deepCopiedFilters;
     }
-
-    /**
-     *
-     * @private
-     */
-    isValueInvalid(val) {
-        return Number.isNaN(val) || val === undefined;
+  }
+  getDisplayRange(xKey) {
+    const unsortedData = this.getSeriesData();
+    this.updateSeriesData([]);
+    unsortedData.forEach((point) => this.add(point, false));
+
+    let data = this.getSeriesData();
+    const minValue = this.getXVal(data[0]);
+    const maxValue = this.getXVal(data[data.length - 1]);
+
+    return {
+      min: minValue,
+      max: maxValue
+    };
+  }
+  markerOptionsDisplayText() {
+    const showMarkers = this.get('markers');
+    if (!showMarkers) {
+      return 'Disabled';
     }
 
-    /**
-     * Remove a point from the data array and notify listeners.
-     * @private
-     */
-    remove(point) {
-        const index = this.data.indexOf(point);
-        this.data.splice(index, 1);
-        this.emit('remove', point, index, this);
-    }
-    /**
-     * Purges records outside a given x range.  Changes removal method based
-     * on number of records to remove: for large purge, reset data and
-     * rebuild array.  for small purge, removes points and emits updates.
-     *
-     * @public
-     * @param {Object} range
-     * @param {number} range.min minimum x value to keep
-     * @param {number} range.max maximum x value to keep.
-     */
-    purgeRecordsOutsideRange(range) {
-        const startIndex = this.sortedIndex(range.min);
-        const endIndex = this.sortedIndex(range.max) + 1;
-        const pointsToRemove = startIndex + (this.data.length - endIndex + 1);
-        if (pointsToRemove > 0) {
-            if (pointsToRemove < 1000) {
-                this.data.slice(0, startIndex).forEach(this.remove, this);
-                this.data.slice(endIndex, this.data.length).forEach(this.remove, this);
-                this.resetStats();
-            } else {
-                const newData = this.data.slice(startIndex, endIndex);
-                this.reset(newData);
+    const markerShapeKey = this.get('markerShape');
+    const markerShape = MARKER_SHAPES[markerShapeKey].label;
+    const markerSize = this.get('markerSize');
+
+    return `${markerShape}: ${markerSize}px`;
+  }
+  nameWithUnit() {
+    let unit = this.get('unit');
+
+    return this.get('name') + (unit ? ' ' + unit : '');
+  }
+
+  /**
+   * Update the series data with the given value.
+   */
+  updateSeriesData(data) {
+    configStore.add(this.dataStoreId, data);
+  }
+
+  /**
+     * Update the series data with the given value.
+     * This return type definition is totally wrong, only covers sinewave generator. It needs to be generic.
+     * @return-example {Array<{
+            cos: number
+            sin: number
+            mctLimitState: {
+                cssClass: string
+                high: number
+                low: {sin: number, cos: number}
+                name: string
             }
-        }
-
-    }
-    /**
-     * Updates filters, clears the plot series, unsubscribes and resubscribes
-     * @public
+            utc: number
+            wavelength: number
+            yesterday: number
+        }>}
      */
-    updateFiltersAndRefresh(updatedFilters) {
-        if (updatedFilters === undefined) {
-            return;
-        }
+  getSeriesData() {
+    return configStore.get(this.dataStoreId) || [];
+  }
+}
 
-        let deepCopiedFilters = JSON.parse(JSON.stringify(updatedFilters));
+/** @typedef {any} TODO */
 
-        if (this.filters && !_.isEqual(this.filters, deepCopiedFilters)) {
-            this.filters = deepCopiedFilters;
-            this.reset();
-            if (this.unsubscribe) {
-                this.unsubscribe();
-                delete this.unsubscribe;
-            }
+/** @typedef {{key: string, namespace: string}} Identifier */
 
-            this.fetch();
-        } else {
-            this.filters = deepCopiedFilters;
-        }
-    }
-    getDisplayRange(xKey) {
-        const unsortedData = this.data;
-        this.data = [];
-        unsortedData.forEach(point => this.add(point, false));
-
-        const minValue = this.getXVal(this.data[0]);
-        const maxValue = this.getXVal(this.data[this.data.length - 1]);
-
-        return {
-            min: minValue,
-            max: maxValue
-        };
-    }
-    markerOptionsDisplayText() {
-        const showMarkers = this.get('markers');
-        if (!showMarkers) {
-            return "Disabled";
-        }
-
-        const markerShapeKey = this.get('markerShape');
-        const markerShape = MARKER_SHAPES[markerShapeKey].label;
-        const markerSize = this.get('markerSize');
+/**
+@typedef {{
+    identifier: Identifier
+    name: string
+    unit: string
+    xKey: string
+    yKey: string
+    markers: boolean
+    markerShape: keyof typeof MARKER_SHAPES
+    markerSize: number
+    alarmMarkers: boolean
+    limitLines: boolean
+    interpolate: boolean
+    stats: TODO
+}} PlotSeriesModelType
+*/
 
-        return `${markerShape}: ${markerSize}px`;
-    }
-    nameWithUnit() {
-        let unit = this.get('unit');
+/**
+@typedef {{
+    model: PlotSeriesModelType
+    collection: import('./SeriesCollection').default
+    persistedConfig: PlotSeriesModelType
+    filters: TODO
+}} PlotSeriesModelOptions
+*/
 
-        return this.get('name') + (unit ? ' ' + unit : '');
-    }
-}
+/**
+@typedef {import('@/api/time/TimeContext').Bounds} Bounds
+*/
diff --git a/src/plugins/plot/configuration/SeriesCollection.js b/src/plugins/plot/configuration/SeriesCollection.js
index 9be7a4b1805..001d9358df8 100644
--- a/src/plugins/plot/configuration/SeriesCollection.js
+++ b/src/plugins/plot/configuration/SeriesCollection.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,145 +21,186 @@
  *****************************************************************************/
 import _ from 'lodash';
 
-import PlotSeries from "./PlotSeries";
-import Collection from "./Collection";
-import Color from "../lib/Color";
-import ColorPalette from "../lib/ColorPalette";
+import Color from '@/ui/color/Color';
+import ColorPalette from '@/ui/color/ColorPalette';
 
+import Collection from './Collection.js';
+import PlotSeries from './PlotSeries.js';
+
+/**
+ * @extends {Collection<SeriesCollectionModelType, SeriesCollectionOptions>}
+ */
 export default class SeriesCollection extends Collection {
+  /**
+    @override
+    @param {import('./Model').ModelOptions<SeriesCollectionModelType, SeriesCollectionOptions>} options
+    */
+  initialize(options) {
+    super.initialize(options);
+    this.modelClass = PlotSeries;
+    this.plot = options.plot;
+    this.openmct = options.openmct;
+    this.palette = options.palette || new ColorPalette();
+    this.listenTo(this, 'add', this.onSeriesAdd, this);
+    this.listenTo(this, 'remove', this.onSeriesRemove, this);
+    this.listenTo(this.plot, 'change:domainObject', this.trackPersistedConfig, this);
 
-    initialize(options) {
-        super.initialize(options);
-        this.modelClass = PlotSeries;
-        this.plot = options.plot;
-        this.openmct = options.openmct;
-        this.palette = new ColorPalette();
-        this.listenTo(this, 'add', this.onSeriesAdd, this);
-        this.listenTo(this, 'remove', this.onSeriesRemove, this);
-        this.listenTo(this.plot, 'change:domainObject', this.trackPersistedConfig, this);
-
-        const domainObject = this.plot.get('domainObject');
-        if (domainObject.telemetry) {
-            this.addTelemetryObject(domainObject);
-        } else {
-            this.watchTelemetryContainer(domainObject);
-        }
-    }
-    trackPersistedConfig(domainObject) {
-        domainObject.configuration.series.forEach(function (seriesConfig) {
-            const series = this.byIdentifier(seriesConfig.identifier);
-            if (series) {
-                series.persistedConfig = seriesConfig;
-            }
-        }, this);
+    const domainObject = this.plot.get('domainObject');
+    if (domainObject.telemetry) {
+      this.addTelemetryObject(domainObject);
+    } else {
+      this.watchTelemetryContainer(domainObject);
     }
-    watchTelemetryContainer(domainObject) {
-        const composition = this.openmct.composition.get(domainObject);
-        this.listenTo(composition, 'add', this.addTelemetryObject, this);
-        this.listenTo(composition, 'remove', this.removeTelemetryObject, this);
-        composition.load();
-    }
-    addTelemetryObject(domainObject, index) {
-        let seriesConfig = this.plot.getPersistedSeriesConfig(domainObject.identifier);
-        const filters = this.plot.getPersistedFilters(domainObject.identifier);
-        const plotObject = this.plot.get('domainObject');
-
-        if (!seriesConfig) {
-            seriesConfig = {
-                identifier: domainObject.identifier
-            };
-
-            if (plotObject.type === 'telemetry.plot.overlay') {
-                this.openmct.objects.mutate(
-                    plotObject,
-                    'configuration.series[' + this.size() + ']',
-                    seriesConfig
-                );
-                seriesConfig = this.plot
-                    .getPersistedSeriesConfig(domainObject.identifier);
-            }
+  }
+  trackPersistedConfig(domainObject) {
+    domainObject.configuration.series.forEach(function (seriesConfig) {
+      const series = this.byIdentifier(seriesConfig.identifier);
+      if (series) {
+        series.persistedConfig = seriesConfig;
+        if (!series.persistedConfig.yAxisId) {
+          return;
         }
 
-        // Clone to prevent accidental mutation by ref.
-        seriesConfig = JSON.parse(JSON.stringify(seriesConfig));
-
-        this.add(new PlotSeries({
-            model: seriesConfig,
-            domainObject: domainObject,
-            collection: this,
-            openmct: this.openmct,
-            persistedConfig: this.plot
-                .getPersistedSeriesConfig(domainObject.identifier),
-            filters: filters
-        }));
-    }
-    removeTelemetryObject(identifier) {
-        const plotObject = this.plot.get('domainObject');
-        if (plotObject.type === 'telemetry.plot.overlay') {
-
-            const persistedIndex = plotObject.configuration.series.findIndex(s => {
-                return _.isEqual(identifier, s.identifier);
-            });
-
-            const configIndex = this.models.findIndex(m => {
-                return _.isEqual(m.domainObject.identifier, identifier);
-            });
-
-            /*
-                    when cancelling out of edit mode, the config store and domain object are out of sync
-                    thus it is necesarry to check both and remove the models that are no longer in composition
-                */
-            if (persistedIndex === -1) {
-                this.remove(this.at(configIndex));
-            } else {
-                this.remove(this.at(persistedIndex));
-                // Because this is triggered by a composition change, we have
-                // to defer mutation of our plot object, otherwise we might
-                // mutate an outdated version of the plotObject.
-                setTimeout(function () {
-                    const newPlotObject = this.plot.get('domainObject');
-                    const cSeries = newPlotObject.configuration.series.slice();
-                    cSeries.splice(persistedIndex, 1);
-                    this.openmct.objects.mutate(newPlotObject, 'configuration.series', cSeries);
-                }.bind(this));
-            }
+        if (series.get('yAxisId') !== series.persistedConfig.yAxisId) {
+          series.set('yAxisId', series.persistedConfig.yAxisId);
         }
+      }
+    }, this);
+  }
+  watchTelemetryContainer(domainObject) {
+    if (domainObject.type === 'telemetry.plot.stacked') {
+      return;
+    }
+
+    const composition = this.openmct.composition.get(domainObject);
+    this.listenTo(composition, 'add', this.addTelemetryObject, this);
+    this.listenTo(composition, 'remove', this.removeTelemetryObject, this);
+    composition.load();
+  }
+  addTelemetryObject(domainObject, index) {
+    let seriesConfig = this.plot.getPersistedSeriesConfig(domainObject.identifier);
+    const filters = this.plot.getPersistedFilters(domainObject.identifier);
+    const plotObject = this.plot.get('domainObject');
+
+    if (!seriesConfig) {
+      seriesConfig = {
+        identifier: domainObject.identifier
+      };
+
+      if (plotObject.type === 'telemetry.plot.overlay') {
+        this.openmct.objects.mutate(
+          plotObject,
+          'configuration.series[' + this.size() + ']',
+          seriesConfig
+        );
+        seriesConfig = this.plot.getPersistedSeriesConfig(domainObject.identifier);
+      }
     }
-    onSeriesAdd(series) {
-        let seriesColor = series.get('color');
-        if (seriesColor) {
-            if (!(seriesColor instanceof Color)) {
-                seriesColor = Color.fromHexString(seriesColor);
-                series.set('color', seriesColor);
-            }
-
-            this.palette.remove(seriesColor);
-        } else {
-            series.set('color', this.palette.getNextColor());
-        }
 
-        this.listenTo(series, 'change:color', this.updateColorPalette, this);
+    // Clone to prevent accidental mutation by ref.
+    seriesConfig = JSON.parse(JSON.stringify(seriesConfig));
+
+    if (!seriesConfig) {
+      throw 'not possible';
     }
-    onSeriesRemove(series) {
-        this.palette.return(series.get('color'));
-        this.stopListening(series);
-        series.destroy();
+
+    this.add(
+      new PlotSeries({
+        model: seriesConfig,
+        domainObject: domainObject,
+        openmct: this.openmct,
+        collection: this,
+        persistedConfig: this.plot.getPersistedSeriesConfig(domainObject.identifier),
+        filters: filters
+      })
+    );
+  }
+  removeTelemetryObject(identifier) {
+    const plotObject = this.plot.get('domainObject');
+    if (plotObject.type === 'telemetry.plot.overlay') {
+      const persistedIndex = plotObject.configuration.series.findIndex((s) => {
+        return _.isEqual(identifier, s.identifier);
+      });
+
+      const configIndex = this.models.findIndex((m) => {
+        return _.isEqual(m.domainObject.identifier, identifier);
+      });
+
+      /*
+      when cancelling out of edit mode, the config store and domain object are out of sync
+      thus it is necessary to check both and remove the models that are no longer in composition
+      */
+      if (persistedIndex === -1) {
+        this.remove(this.at(configIndex));
+      } else {
+        this.remove(this.at(persistedIndex));
+        // Because this is triggered by a composition change, we have
+        // to defer mutation of our plot object, otherwise we might
+        // mutate an outdated version of the plotObject.
+        setTimeout(
+          function () {
+            const newPlotObject = this.plot.get('domainObject');
+            const cSeries = newPlotObject.configuration.series.slice();
+            cSeries.splice(persistedIndex, 1);
+            this.openmct.objects.mutate(newPlotObject, 'configuration.series', cSeries);
+          }.bind(this)
+        );
+      }
     }
-    updateColorPalette(newColor, oldColor) {
-        this.palette.remove(newColor);
-        const seriesWithColor = this.filter(function (series) {
-            return series.get('color') === newColor;
-        })[0];
-        if (!seriesWithColor) {
-            this.palette.return(oldColor);
-        }
+  }
+  onSeriesAdd(series) {
+    let seriesColor = series.get('color');
+    if (seriesColor) {
+      if (!(seriesColor instanceof Color)) {
+        seriesColor = Color.fromHexString(seriesColor);
+        series.set('color', seriesColor);
+      }
+
+      this.palette.remove(seriesColor);
+    } else {
+      series.set('color', this.palette.getNextColor());
     }
-    byIdentifier(identifier) {
-        return this.filter(function (series) {
-            const seriesIdentifier = series.get('identifier');
 
-            return seriesIdentifier.namespace === identifier.namespace
-                    && seriesIdentifier.key === identifier.key;
-        })[0];
+    this.listenTo(series, 'change:color', this.updateColorPalette, this);
+  }
+  onSeriesRemove(series) {
+    this.palette.return(series.get('color'));
+    this.stopListening(series);
+    series.destroy();
+  }
+  updateColorPalette(newColor, oldColor) {
+    this.palette.remove(newColor);
+    const seriesWithColor = this.filter(function (series) {
+      return series.get('color') === newColor;
+    })[0];
+    if (!seriesWithColor) {
+      this.palette.return(oldColor);
     }
+  }
+  byIdentifier(identifier) {
+    return this.filter(function (series) {
+      const seriesIdentifier = series.get('identifier');
+
+      return (
+        seriesIdentifier.namespace === identifier.namespace &&
+        seriesIdentifier.key === identifier.key
+      );
+    })[0];
+  }
+
+  destroy() {
+    super.destroy();
+    this.plot = undefined;
+    this.stopListening();
+  }
 }
+
+/**
+@typedef {PlotSeries} SeriesCollectionModelType
+*/
+
+/**
+@typedef {{
+    plot: import('./PlotConfigurationModel').default
+}} SeriesCollectionOptions
+*/
diff --git a/src/plugins/plot/configuration/XAxisModel.js b/src/plugins/plot/configuration/XAxisModel.js
index 1875c26864c..ff1b2b088bf 100644
--- a/src/plugins/plot/configuration/XAxisModel.js
+++ b/src/plugins/plot/configuration/XAxisModel.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,70 +19,136 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import Model from "./Model";
+import Model from './Model.js';
+
 /**
-     * TODO: doc strings.
-     */
+ * @extends {Model<XAxisModelType, XAxisModelOptions>}
+ */
 export default class XAxisModel extends Model {
-    initialize(options) {
-        this.plot = options.plot;
-        this.set('label', options.model.name || '');
-        this.on('change:range', function (newValue, oldValue, model) {
-            if (!model.get('frozen')) {
-                model.set('displayRange', newValue);
-            }
-        });
-
-        this.on('change:frozen', ((frozen, oldValue, model) => {
-            if (!frozen) {
-                model.set('range', this.get('range'));
-            }
-        }));
-
-        if (this.get('range')) {
-            this.set('range', this.get('range'));
-        }
-
-        this.listenTo(this, 'change:key', this.changeKey, this);
-    }
-    changeKey(newKey) {
-        const series = this.plot.series.first();
-        if (series) {
-            const xMetadata = series.metadata.value(newKey);
-            const xFormat = series.formats[newKey];
-            this.set('label', xMetadata.name);
-            this.set('format', xFormat.format.bind(xFormat));
-        } else {
-            this.set('format', function (x) {
-                return x;
-            });
-            this.set('label', newKey);
-        }
-
-        this.plot.series.forEach(function (plotSeries) {
-            plotSeries.set('xKey', newKey);
-        });
+  // Despite providing template types to the Model class, we still need to
+  // re-define the type of the following initialize() method's options arg. Tracking
+  // issue for this: https://github.com/microsoft/TypeScript/issues/32082
+  // When they fix it, we can remove the `@param` we have here.
+  /**
+   * @override
+   * @param {import('./Model').ModelOptions<XAxisModelType, XAxisModelOptions>} options
+   */
+  initialize(options) {
+    this.plot = options.plot;
+
+    // This is a type assertion for TypeScript, this error is not thrown in practice.
+    if (!options.model) {
+      throw new Error('Not a collection model.');
     }
-    resetSeries() {
-        this.plot.series.forEach(function (plotSeries) {
-            plotSeries.reset();
-        });
+
+    this.set('label', options.model.name || '');
+
+    this.on('change:range', (newValue) => {
+      if (!this.get('frozen')) {
+        this.set('displayRange', newValue);
+      }
+    });
+
+    this.on('change:frozen', (frozen) => {
+      if (!frozen) {
+        this.set('range', this.get('range'));
+      }
+    });
+
+    if (this.get('range')) {
+      this.set('range', this.get('range'));
     }
-    defaults(options) {
-        const bounds = options.openmct.time.bounds();
-        const timeSystem = options.openmct.time.timeSystem();
-        const format = options.openmct.$injector.get('formatService')
-            .getFormat(timeSystem.timeFormat);
-
-        return {
-            name: timeSystem.name,
-            key: timeSystem.key,
-            format: format.format.bind(format),
-            range: {
-                min: bounds.start,
-                max: bounds.end
-            },
-            frozen: false
-        };
+
+    this.listenTo(this, 'change:key', this.changeKey, this);
+  }
+
+  /**
+   * @param {string} newKey
+   */
+  changeKey(newKey) {
+    const series = this.plot.series.first();
+    if (series) {
+      const xMetadata = series.metadata.value(newKey);
+      const xFormat = series.formats[newKey];
+      this.set('label', xMetadata.name);
+      this.set('format', xFormat.format.bind(xFormat));
+    } else {
+      this.set('format', function (x) {
+        return x;
+      });
+      this.set('label', newKey);
     }
+
+    this.plot.series.forEach(function (plotSeries) {
+      plotSeries.set('xKey', newKey);
+    });
+  }
+  resetSeries() {
+    this.plot.series.forEach(function (plotSeries) {
+      plotSeries.reset();
+    });
+  }
+  /**
+   * @param {import('./Model').ModelOptions<XAxisModelType, XAxisModelOptions>} options
+   * @override
+   */
+  defaultModel(options) {
+    const bounds = options.openmct.time.bounds();
+    const timeSystem = options.openmct.time.getTimeSystem();
+    const format = options.openmct.telemetry.getFormatter(timeSystem.timeFormat);
+
+    /** @type {XAxisModelType} */
+    const defaultModel = {
+      name: timeSystem.name,
+      key: timeSystem.key,
+      format: format.format.bind(format),
+      range: {
+        min: bounds.start,
+        max: bounds.end
+      },
+      frozen: false
+    };
+
+    return defaultModel;
+  }
+
+  destroy() {
+    this.plot = undefined;
+    this.stopListening();
+  }
 }
+
+/** @typedef {any} TODO */
+
+/** @typedef {TODO} OpenMCT */
+
+/**
+@typedef {{
+    min: number
+    max: number
+}} NumberRange
+*/
+
+/**
+@typedef {import("./Model").ModelType<{
+    range?: NumberRange
+    displayRange: NumberRange
+    frozen: boolean
+    label: string
+    format: (n: number) => string
+    values: Array<TODO>
+}>} AxisModelType
+*/
+
+/**
+@typedef {AxisModelType & {
+    name: string
+    key: string
+}} XAxisModelType
+*/
+
+/**
+@typedef {{
+    plot: import('./PlotConfigurationModel').default
+}} XAxisModelOptions
+*/
diff --git a/src/plugins/plot/configuration/YAxisModel.js b/src/plugins/plot/configuration/YAxisModel.js
index 6285c63e60d..30300b3a527 100644
--- a/src/plugins/plot/configuration/YAxisModel.js
+++ b/src/plugins/plot/configuration/YAxisModel.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,216 +19,392 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import _ from 'lodash';
-import Model from './Model';
+import { antisymlog, symlog } from '../mathUtils.js';
+import Model from './Model.js';
 
 /**
-     * YAxis model
-      *
-     * TODO: docstrings.
-     *
-     * has the following Model properties:
-     *
-     * `autoscale`: boolean, whether or not to autoscale.
-     * `autoscalePadding`: float, percent of padding to display in plots.
-     * `displayRange`: the current display range for the x Axis.
-     * `format`: the formatter for the axis.
-     * `frozen`: boolean, if true, displayRange will not be updated automatically.
-     *           Used to temporarily disable automatic updates during user interaction.
-     * `label`: label to display on axis.
-     * `stats`: Min and Max Values of data, automatically updated by observing
-     *          plot series.
-     * `values`: for enumerated types, an array of possible display values.
-     * `range`: the user-configured range to use for display, when autoscale is
-     *         disabled.
-     *
-     */
+ * YAxis model
+ *
+ * TODO: docstrings.
+ *
+ * has the following Model properties:
+ *
+ * `autoscale`: boolean, whether or not to autoscale.
+ * `autoscalePadding`: float, percent of padding to display in plots.
+ * `displayRange`: the current display range for the axis.
+ * `format`: the formatter for the axis.
+ * `frozen`: boolean, if true, displayRange will not be updated automatically.
+ *           Used to temporarily disable automatic updates during user interaction.
+ * `label`: label to display on axis.
+ * `stats`: Min and Max Values of data, automatically updated by observing
+ *          plot series.
+ * `values`: for enumerated types, an array of possible display values.
+ * `range`: the user-configured range to use for display, when autoscale is
+ *         disabled.
+ *
+ * @extends {Model<YAxisModelType, YAxisModelOptions>}
+ */
 export default class YAxisModel extends Model {
-    initialize(options) {
-        this.plot = options.plot;
-        this.listenTo(this, 'change:stats', this.calculateAutoscaleExtents, this);
-        this.listenTo(this, 'change:autoscale', this.toggleAutoscale, this);
-        this.listenTo(this, 'change:autoscalePadding', this.updatePadding, this);
-        this.listenTo(this, 'change:frozen', this.toggleFreeze, this);
-        this.listenTo(this, 'change:range', this.updateDisplayRange, this);
-        this.updateDisplayRange(this.get('range'));
-    }
-    listenToSeriesCollection(seriesCollection) {
-        this.seriesCollection = seriesCollection;
-        this.listenTo(this.seriesCollection, 'add', (series => {
-            this.trackSeries(series);
-            this.updateFromSeries(this.seriesCollection);
-        }), this);
-        this.listenTo(this.seriesCollection, 'remove', (series => {
-            this.untrackSeries(series);
-            this.updateFromSeries(this.seriesCollection);
-        }), this);
-        this.seriesCollection.forEach(this.trackSeries, this);
-        this.updateFromSeries(this.seriesCollection);
+  /**
+   * @override
+   * @param {import('./Model').ModelOptions<YAxisModelType, YAxisModelOptions>} options
+   */
+  initialize(options) {
+    this.plot = options.plot;
+    this.listenTo(this, 'change:stats', this.calculateAutoscaleExtents, this);
+    this.listenTo(this, 'change:autoscale', this.toggleAutoscale, this);
+    this.listenTo(this, 'change:autoscalePadding', this.updatePadding, this);
+    this.listenTo(this, 'change:logMode', this.onLogModeChange, this);
+    this.listenTo(this, 'change:frozen', this.toggleFreeze, this);
+    this.listenTo(this, 'change:range', this.updateDisplayRange, this);
+    const range = this.get('range');
+    this.updateDisplayRange(range);
+    //This is an edge case and should not happen
+    const invalidRange = !range || range?.min === undefined || range?.max === undefined;
+    const invalidAutoScaleOff = options.model.autoscale === false && invalidRange;
+    if (invalidAutoScaleOff) {
+      this.set('autoscale', true);
     }
-    updateDisplayRange(range) {
-        if (!this.get('autoscale')) {
-            this.set('displayRange', range);
-        }
+  }
+  /**
+   * @param {import('./SeriesCollection').default} seriesCollection
+   */
+  listenToSeriesCollection(seriesCollection) {
+    this.seriesCollection = seriesCollection;
+    this.listenTo(
+      this.seriesCollection,
+      'add',
+      (series) => {
+        this.trackSeries(series);
+        this.updateFromSeries(this.seriesCollection);
+      },
+      this
+    );
+    this.listenTo(
+      this.seriesCollection,
+      'remove',
+      (series) => {
+        this.untrackSeries(series);
+        this.updateFromSeries(this.seriesCollection);
+      },
+      this
+    );
+    this.seriesCollection.forEach(this.trackSeries, this);
+    this.updateFromSeries(this.seriesCollection);
+  }
+  toggleFreeze(frozen) {
+    if (!frozen) {
+      this.toggleAutoscale(this.get('autoscale'));
     }
-    toggleFreeze(frozen) {
-        if (!frozen) {
-            this.toggleAutoscale(this.get('autoscale'));
-        }
+  }
+  applyPadding(range) {
+    let padding = Math.abs(range.max - range.min) * this.get('autoscalePadding');
+    if (padding === 0) {
+      padding = 1;
     }
-    applyPadding(range) {
-        let padding = Math.abs(range.max - range.min) * this.get('autoscalePadding');
-        if (padding === 0) {
-            padding = 1;
-        }
 
-        return {
-            min: range.min - padding,
-            max: range.max + padding
-        };
+    return {
+      min: range.min - padding,
+      max: range.max + padding
+    };
+  }
+  updatePadding(newPadding) {
+    if (this.get('autoscale') && !this.get('frozen') && this.has('stats')) {
+      this.set('displayRange', this.applyPadding(this.get('stats')));
     }
-    updatePadding(newPadding) {
-        if (this.get('autoscale') && !this.get('frozen') && this.has('stats')) {
-            this.set('displayRange', this.applyPadding(this.get('stats')));
-        }
+  }
+  calculateAutoscaleExtents(newStats) {
+    if (this.get('autoscale') && !this.get('frozen')) {
+      if (!newStats) {
+        this.unset('displayRange');
+      } else {
+        this.set('displayRange', this.applyPadding(newStats));
+      }
     }
-    calculateAutoscaleExtents(newStats) {
-        if (this.get('autoscale') && !this.get('frozen')) {
-            if (!newStats) {
-                this.unset('displayRange');
-            } else {
-                this.set('displayRange', this.applyPadding(newStats));
-            }
-        }
+  }
+  updateStats(seriesStats) {
+    if (!this.has('stats')) {
+      this.set('stats', {
+        min: seriesStats.minValue,
+        max: seriesStats.maxValue
+      });
+
+      return;
     }
-    updateStats(seriesStats) {
-        if (!this.has('stats')) {
-            this.set('stats', {
-                min: seriesStats.minValue,
-                max: seriesStats.maxValue
-            });
 
-            return;
-        }
+    const stats = this.get('stats');
+    let changed = false;
+    if (stats.min > seriesStats.minValue) {
+      changed = true;
+      stats.min = seriesStats.minValue;
+    }
 
-        const stats = this.get('stats');
-        let changed = false;
-        if (stats.min > seriesStats.minValue) {
-            changed = true;
-            stats.min = seriesStats.minValue;
-        }
+    if (stats.max < seriesStats.maxValue) {
+      changed = true;
+      stats.max = seriesStats.maxValue;
+    }
 
-        if (stats.max < seriesStats.maxValue) {
-            changed = true;
-            stats.max = seriesStats.maxValue;
-        }
+    if (changed) {
+      this.set('stats', {
+        min: stats.min,
+        max: stats.max
+      });
+    }
+  }
+  resetStats() {
+    //TODO: do we need the series id here?
+    this.unset('stats');
+    this.getSeriesForYAxis(this.seriesCollection).forEach((series) => {
+      if (series.has('stats')) {
+        this.updateStats(series.get('stats'));
+      }
+    });
+  }
+  getSeriesForYAxis(seriesCollection) {
+    return seriesCollection.filter((series) => {
+      const seriesYAxisId = series.get('yAxisId') || 1;
 
-        if (changed) {
-            this.set('stats', {
-                min: stats.min,
-                max: stats.max
-            });
-        }
+      return seriesYAxisId === this.id;
+    });
+  }
+
+  getYAxisForId(id) {
+    const plotModel = this.plot.get('domainObject');
+    let yAxis;
+    if (this.id === 1) {
+      yAxis = plotModel.configuration?.yAxis;
+    } else {
+      if (plotModel.configuration?.additionalYAxes) {
+        yAxis = plotModel.configuration.additionalYAxes.find(
+          (additionalYAxis) => additionalYAxis.id === id
+        );
+      }
     }
-    resetStats() {
-        this.unset('stats');
-        this.seriesCollection.forEach(function (series) {
-            if (series.has('stats')) {
-                this.updateStats(series.get('stats'));
-            }
-        }, this);
-    }
-    trackSeries(series) {
-        this.listenTo(series, 'change:stats', seriesStats => {
-            if (!seriesStats) {
-                this.resetStats();
-            } else {
-                this.updateStats(seriesStats);
-            }
-        });
-        this.listenTo(series, 'change:yKey', () => {
-            this.updateFromSeries(this.seriesCollection);
-        });
-    }
-    untrackSeries(series) {
-        this.stopListening(series);
+
+    return yAxis;
+  }
+  /**
+   * @param {import('./PlotSeries').default} series
+   */
+  trackSeries(series) {
+    this.listenTo(series, 'change:stats', (seriesStats) => {
+      if (series.get('yAxisId') !== this.id) {
+        return;
+      }
+
+      if (!seriesStats) {
+        this.resetStats();
+      } else {
+        this.updateStats(seriesStats);
+      }
+    });
+    this.listenTo(series, 'change:yKey', () => {
+      if (series.get('yAxisId') !== this.id) {
+        return;
+      }
+
+      this.updateFromSeries(this.seriesCollection);
+    });
+
+    this.listenTo(series, 'change:yAxisId', (newYAxisId, oldYAxisId) => {
+      if (oldYAxisId && this.id === oldYAxisId) {
         this.resetStats();
         this.updateFromSeries(this.seriesCollection);
+      }
+
+      if (series.get('yAxisId') === this.id) {
+        this.resetStats();
+        this.updateFromSeries(this.seriesCollection);
+      }
+    });
+  }
+  untrackSeries(series) {
+    this.stopListening(series);
+    this.resetStats();
+    this.updateFromSeries(this.seriesCollection);
+  }
+
+  /**
+   * This is called in order to map the user-provided `range` to the
+   * `displayRange` that we actually use for plot display.
+   *
+   * @param {import('./XAxisModel').NumberRange} range
+   */
+  updateDisplayRange(range) {
+    if (this.get('autoscale')) {
+      return;
     }
-    toggleAutoscale(autoscale) {
-        if (autoscale && this.has('stats')) {
-            this.set('displayRange', this.applyPadding(this.get('stats')));
-        } else {
-            this.set('displayRange', this.get('range'));
-        }
+
+    const _range = { ...range };
+
+    if (this.get('logMode')) {
+      _range.min = symlog(range.min, 10);
+      _range.max = symlog(range.max, 10);
     }
-    /**
-         * Update yAxis format, values, and label from known series.
-         */
-    updateFromSeries(series) {
-        const plotModel = this.plot.get('domainObject');
-        const label = _.get(plotModel, 'configuration.yAxis.label');
-        const sampleSeries = series.first();
-        if (!sampleSeries) {
-            if (!label) {
-                this.unset('label');
-            }
-
-            return;
+
+    this.set('displayRange', _range);
+  }
+
+  /**
+   * @param {boolean} autoscale
+   */
+  toggleAutoscale(autoscale) {
+    if (autoscale && this.has('stats')) {
+      this.set('displayRange', this.applyPadding(this.get('stats')));
+
+      return;
+    }
+
+    const range = this.get('range');
+
+    if (range) {
+      // If we already have a user-defined range, make sure it maps to the
+      // range we'll actually use for the ticks.
+
+      const _range = { ...range };
+
+      if (this.get('logMode')) {
+        _range.min = symlog(range.min, 10);
+        _range.max = symlog(range.max, 10);
+      }
+
+      this.set('displayRange', _range);
+    }
+  }
+
+  /** @param {boolean} logMode */
+  onLogModeChange(logMode) {
+    const range = this.get('displayRange');
+
+    if (logMode) {
+      range.min = symlog(range.min, 10);
+      range.max = symlog(range.max, 10);
+    } else {
+      range.min = antisymlog(range.min, 10);
+      range.max = antisymlog(range.max, 10);
+    }
+
+    this.set('displayRange', range);
+
+    this.resetSeries();
+  }
+  resetSeries() {
+    const series = this.getSeriesForYAxis(this.seriesCollection);
+    series.forEach((plotSeries) => {
+      plotSeries.logMode = this.get('logMode');
+      plotSeries.reset(plotSeries.getSeriesData());
+    });
+    // Update the series collection labels and formatting
+    this.updateFromSeries(this.seriesCollection);
+  }
+
+  /**
+   * For a given series collection, get the metadata of the current yKey for each series.
+   * Then return first available value of the given property from the metadata.
+   * @param {import('./SeriesCollection').default} series
+   * @param {String} property
+   */
+  getMetadataValueByProperty(series, property) {
+    return series
+      .map((s) => (s.metadata ? s.metadata.value(s.get('yKey'))[property] : ''))
+      .reduce((a, b) => {
+        if (a === undefined) {
+          return b;
         }
 
-        const yKey = sampleSeries.get('yKey');
-        const yMetadata = sampleSeries.metadata.value(yKey);
-        const yFormat = sampleSeries.formats[yKey];
-        this.set('format', yFormat.format.bind(yFormat));
-        this.set('values', yMetadata.values);
-        if (!label) {
-            const labelName = series.map(function (s) {
-                return s.metadata.value(s.get('yKey')).name;
-            }).reduce(function (a, b) {
-                if (a === undefined) {
-                    return b;
-                }
-
-                if (a === b) {
-                    return a;
-                }
-
-                return '';
-            }, undefined);
-
-            if (labelName) {
-                this.set('label', labelName);
-
-                return;
-            }
-
-            const labelUnits = series.map(function (s) {
-                return s.metadata.value(s.get('yKey')).units;
-            }).reduce(function (a, b) {
-                if (a === undefined) {
-                    return b;
-                }
-
-                if (a === b) {
-                    return a;
-                }
-
-                return '';
-            }, undefined);
-
-            if (labelUnits) {
-                this.set('label', labelUnits);
-
-                return;
-            }
+        if (a === b) {
+          return a;
         }
+
+        return '';
+      }, undefined);
+  }
+  /**
+   * Update yAxis format, values, and label from known series.
+   * @param {import('./SeriesCollection').default} seriesCollection
+   */
+  updateFromSeries(seriesCollection) {
+    const seriesForThisYAxis = this.getSeriesForYAxis(seriesCollection);
+    if (!seriesForThisYAxis.length) {
+      return;
     }
-    defaults(options) {
-        return {
-            frozen: false,
-            autoscale: true,
-            autoscalePadding: 0.1
-        };
+
+    const yAxis = this.getYAxisForId(this.id);
+    const label = yAxis?.label;
+    const sampleSeries = seriesForThisYAxis[0];
+    if (!sampleSeries || !sampleSeries.metadata) {
+      if (!label) {
+        this.unset('label');
+      }
+
+      return;
+    }
+
+    const yKey = sampleSeries.get('yKey');
+    const yMetadata = sampleSeries.metadata.value(yKey);
+    const yFormat = sampleSeries.formats[yKey];
+
+    if (this.get('logMode')) {
+      this.set('format', (n) => yFormat.format(antisymlog(n, 10)));
+    } else {
+      this.set('format', (n) => yFormat.format(n));
+    }
+
+    this.set('values', yMetadata.values);
+
+    if (!label) {
+      const labelName = this.getMetadataValueByProperty(seriesForThisYAxis, 'name');
+      if (labelName) {
+        this.set('label', labelName);
+
+        return;
+      }
+
+      //if the name is not available, set the units as the label
+      const labelUnits = this.getMetadataValueByProperty(seriesForThisYAxis, 'units');
+      if (labelUnits) {
+        this.set('label', labelUnits);
+
+        return;
+      }
     }
+  }
+  /**
+   * @override
+   * @param {import('./Model').ModelOptions<YAxisModelType, YAxisModelOptions>} options
+   * @returns {Partial<YAxisModelType>}
+   */
+  defaultModel(options) {
+    return {
+      frozen: false,
+      autoscale: true,
+      logMode: options.model?.logMode ?? false,
+      autoscalePadding: 0.1,
+      id: options.id,
+      range: options.model?.range
+    };
+  }
+
+  destroy() {
+    this.plot = undefined;
+    this.stopListening();
+  }
 }
+
+/** @typedef {any} TODO */
+
+/**
+@typedef {import('./XAxisModel').AxisModelType & {
+    autoscale: boolean
+    logMode: boolean
+    autoscalePadding: number
+    stats?: import('./XAxisModel').NumberRange
+    values: Array<TODO>
+}} YAxisModelType
+*/
+
+/**
+@typedef {{
+    plot: import('./PlotConfigurationModel').default
+}} YAxisModelOptions
+*/
diff --git a/src/plugins/plot/configuration/configStore.js b/src/plugins/plot/configuration/configStore.js
deleted file mode 100644
index 9a0cd15c0b8..00000000000
--- a/src/plugins/plot/configuration/configStore.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-function ConfigStore() {
-    this.store = {};
-}
-
-ConfigStore.prototype.deleteStore = function (id) {
-    if (this.store[id]) {
-        this.store[id].destroy();
-        delete this.store[id];
-    }
-};
-
-ConfigStore.prototype.deleteAll = function () {
-    Object.keys(this.store).forEach(id => this.deleteStore(id));
-};
-
-ConfigStore.prototype.add = function (id, config) {
-    this.store[id] = config;
-};
-
-ConfigStore.prototype.get = function (id) {
-    return this.store[id];
-};
-
-const STORE = new ConfigStore();
-
-export default STORE;
diff --git a/src/plugins/plot/draw/Draw2D.js b/src/plugins/plot/draw/Draw2D.js
index 6a4e0707308..6206cbbc428 100644
--- a/src/plugins/plot/draw/Draw2D.js
+++ b/src/plugins/plot/draw/Draw2D.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,34 +21,35 @@
  *****************************************************************************/
 
 import EventEmitter from 'EventEmitter';
-import eventHelpers from '../lib/eventHelpers';
-import { MARKER_SHAPES } from './MarkerShapes';
+
+import eventHelpers from '../lib/eventHelpers.js';
+import { MARKER_SHAPES } from './MarkerShapes.js';
 /**
-    * Create a new draw API utilizing the Canvas's 2D API for rendering.
-    *
-    * @constructor
-    * @param {CanvasElement} canvas the canvas object to render upon
-    * @throws {Error} an error is thrown if Canvas's 2D API is unavailab
-    */
+ * Create a new draw API utilizing the Canvas's 2D API for rendering.
+ *
+ * @constructor
+ * @param {CanvasElement} canvas the canvas object to render upon
+ * @throws {Error} an error is thrown if Canvas's 2D API is unavailable
+ */
 
 /**
  * Create a new draw API utilizing the Canvas's 2D API for rendering.
  *
  * @constructor
  * @param {CanvasElement} canvas the canvas object to render upon
- * @throws {Error} an error is thrown if Canvas's 2D API is unavailab
+ * @throws {Error} an error is thrown if Canvas's 2D API is unavailable
  */
 function Draw2D(canvas) {
-    this.canvas = canvas;
-    this.c2d = canvas.getContext('2d');
-    this.width = canvas.width;
-    this.height = canvas.height;
-    this.dimensions = [this.width, this.height];
-    this.origin = [0, 0];
-
-    if (!this.c2d) {
-        throw new Error("Canvas 2d API unavailable.");
-    }
+  this.canvas = canvas;
+  this.c2d = canvas.getContext('2d');
+  this.width = canvas.width;
+  this.height = canvas.height;
+  this.dimensions = [this.width, this.height];
+  this.origin = [0, 0];
+
+  if (!this.c2d) {
+    throw new Error('Canvas 2d API unavailable.');
+  }
 }
 
 Object.assign(Draw2D.prototype, EventEmitter.prototype);
@@ -56,108 +57,95 @@ eventHelpers.extend(Draw2D.prototype);
 
 // Convert from logical to physical x coordinates
 Draw2D.prototype.x = function (v) {
-    return ((v - this.origin[0]) / this.dimensions[0]) * this.width;
+  return ((v - this.origin[0]) / this.dimensions[0]) * this.width;
 };
 
 // Convert from logical to physical y coordinates
 Draw2D.prototype.y = function (v) {
-    return this.height
-        - ((v - this.origin[1]) / this.dimensions[1]) * this.height;
+  return this.height - ((v - this.origin[1]) / this.dimensions[1]) * this.height;
 };
 
 // Set the color to be used for drawing operations
 Draw2D.prototype.setColor = function (color) {
-    const mappedColor = color.map(function (c, i) {
-        return i < 3 ? Math.floor(c * 255) : (c);
-    }).join(',');
-    this.c2d.strokeStyle = "rgba(" + mappedColor + ")";
-    this.c2d.fillStyle = "rgba(" + mappedColor + ")";
+  const mappedColor = color
+    .map(function (c, i) {
+      return i < 3 ? Math.floor(c * 255) : c;
+    })
+    .join(',');
+  this.c2d.strokeStyle = 'rgba(' + mappedColor + ')';
+  this.c2d.fillStyle = 'rgba(' + mappedColor + ')';
 };
 
 Draw2D.prototype.clear = function () {
-    this.width = this.canvas.width = this.canvas.offsetWidth;
-    this.height = this.canvas.height = this.canvas.offsetHeight;
-    this.c2d.clearRect(0, 0, this.width, this.height);
+  this.width = this.canvas.width = this.canvas.offsetWidth;
+  this.height = this.canvas.height = this.canvas.offsetHeight;
+  this.c2d.clearRect(0, 0, this.width, this.height);
 };
 
 Draw2D.prototype.setDimensions = function (newDimensions, newOrigin) {
-    this.dimensions = newDimensions;
-    this.origin = newOrigin;
+  this.dimensions = newDimensions;
+  this.origin = newOrigin;
 };
 
 Draw2D.prototype.drawLine = function (buf, color, points) {
-    let i;
+  let i;
 
-    this.setColor(color);
+  this.setColor(color);
 
-    // Configure context to draw two-pixel-thick lines
-    this.c2d.lineWidth = 1;
+  // Configure context to draw two-pixel-thick lines
+  this.c2d.lineWidth = 1;
 
-    // Start a new path...
-    if (buf.length > 1) {
-        this.c2d.beginPath();
-        this.c2d.moveTo(this.x(buf[0]), this.y(buf[1]));
-    }
+  // Start a new path...
+  if (buf.length > 1) {
+    this.c2d.beginPath();
+    this.c2d.moveTo(this.x(buf[0]), this.y(buf[1]));
+  }
 
-    // ...and add points to it...
-    for (i = 2; i < points * 2; i = i + 2) {
-        this.c2d.lineTo(this.x(buf[i]), this.y(buf[i + 1]));
-    }
+  // ...and add points to it...
+  for (i = 2; i < points * 2; i = i + 2) {
+    this.c2d.lineTo(this.x(buf[i]), this.y(buf[i + 1]));
+  }
 
-    // ...before finally drawing it.
-    this.c2d.stroke();
+  // ...before finally drawing it.
+  this.c2d.stroke();
 };
 
 Draw2D.prototype.drawSquare = function (min, max, color) {
-    const x1 = this.x(min[0]);
-    const y1 = this.y(min[1]);
-    const w = this.x(max[0]) - x1;
-    const h = this.y(max[1]) - y1;
+  const x1 = this.x(min[0]);
+  const y1 = this.y(min[1]);
+  const w = this.x(max[0]) - x1;
+  const h = this.y(max[1]) - y1;
 
-    this.setColor(color);
-    this.c2d.fillRect(x1, y1, w, h);
+  this.setColor(color);
+  this.c2d.fillRect(x1, y1, w, h);
 };
 
-Draw2D.prototype.drawPoints = function (
-    buf,
-    color,
-    points,
-    pointSize,
-    shape
-) {
-    const drawC2DShape = MARKER_SHAPES[shape].drawC2D.bind(this);
-
-    this.setColor(color);
-
-    for (let i = 0; i < points; i++) {
-        drawC2DShape(
-            this.x(buf[i * 2]),
-            this.y(buf[i * 2 + 1]),
-            pointSize
-        );
-    }
+Draw2D.prototype.drawPoints = function (buf, color, points, pointSize, shape) {
+  const drawC2DShape = MARKER_SHAPES[shape].drawC2D.bind(this);
+
+  this.setColor(color);
+
+  for (let i = 0; i < points; i++) {
+    drawC2DShape(this.x(buf[i * 2]), this.y(buf[i * 2 + 1]), pointSize);
+  }
 };
 
 Draw2D.prototype.drawLimitPoint = function (x, y, size) {
-    this.c2d.fillRect(x + size, y, size, size);
-    this.c2d.fillRect(x, y + size, size, size);
-    this.c2d.fillRect(x - size, y, size, size);
-    this.c2d.fillRect(x, y - size, size, size);
+  this.c2d.fillRect(x + size, y, size, size);
+  this.c2d.fillRect(x, y + size, size, size);
+  this.c2d.fillRect(x - size, y, size, size);
+  this.c2d.fillRect(x, y - size, size, size);
 };
 
 Draw2D.prototype.drawLimitPoints = function (points, color, pointSize) {
-    const limitSize = pointSize * 2;
-    const offset = limitSize / 2;
-
-    this.setColor(color);
-
-    for (let i = 0; i < points.length; i++) {
-        this.drawLimitPoint(
-            this.x(points[i].x) - offset,
-            this.y(points[i].y) - offset,
-            limitSize
-        );
-    }
+  const limitSize = pointSize * 2;
+  const offset = limitSize / 2;
+
+  this.setColor(color);
+
+  for (let i = 0; i < points.length; i++) {
+    this.drawLimitPoint(this.x(points[i].x) - offset, this.y(points[i].y) - offset, limitSize);
+  }
 };
 
 export default Draw2D;
diff --git a/src/plugins/plot/draw/DrawLoader.js b/src/plugins/plot/draw/DrawLoader.js
index fa1e698f343..1d7ebcf9830 100644
--- a/src/plugins/plot/draw/DrawLoader.js
+++ b/src/plugins/plot/draw/DrawLoader.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,83 +20,79 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import DrawWebGL from './DrawWebGL';
-import Draw2D from './Draw2D';
+import Draw2D from './Draw2D.js';
+import DrawWebGL from './DrawWebGL.js';
 
 const CHARTS = [
-    {
-        MAX_INSTANCES: 16,
-        API: DrawWebGL,
-        ALLOCATIONS: []
-    },
-    {
-        MAX_INSTANCES: Number.POSITIVE_INFINITY,
-        API: Draw2D,
-        ALLOCATIONS: []
-    }
+  {
+    MAX_INSTANCES: 16,
+    API: DrawWebGL,
+    ALLOCATIONS: []
+  },
+  {
+    MAX_INSTANCES: Number.POSITIVE_INFINITY,
+    API: Draw2D,
+    ALLOCATIONS: []
+  }
 ];
 /**
-         * Draw loader attaches a draw API to a canvas element and returns the
-         * draw API.
-         */
+ * Draw loader attaches a draw API to a canvas element and returns the
+ * draw API.
+ */
 
 export const DrawLoader = {
-    /**
+  /**
      * Return the first draw API available.  Returns
      * `undefined` if a draw API could not be constructed.
      *.
-     * @param {CanvasElement} canvas - The canvas eelement to attach
+     * @param {CanvasElement} canvas - The canvas element to attach
      the draw API to.
      */
-    getDrawAPI: function (canvas, overlay) {
-        let api;
+  getDrawAPI: function (canvas, overlay) {
+    let api;
 
-        CHARTS.forEach(function (CHART_TYPE) {
-            if (api) {
-                return;
-            }
+    CHARTS.forEach(function (CHART_TYPE) {
+      if (api) {
+        return;
+      }
 
-            if (CHART_TYPE.ALLOCATIONS.length
-                    >= CHART_TYPE.MAX_INSTANCES) {
-                return;
-            }
+      if (CHART_TYPE.ALLOCATIONS.length >= CHART_TYPE.MAX_INSTANCES) {
+        return;
+      }
 
-            try {
-                api = new CHART_TYPE.API(canvas, overlay);
-                CHART_TYPE.ALLOCATIONS.push(api);
-            } catch (e) {
-                console.warn([
-                    "Could not instantiate chart",
-                    CHART_TYPE.API.name,
-                    ";",
-                    e.message
-                ].join(" "));
-            }
-        });
+      try {
+        api = new CHART_TYPE.API(canvas, overlay);
+        CHART_TYPE.ALLOCATIONS.push(api);
+      } catch (e) {
+        console.warn(
+          ['Could not instantiate chart', CHART_TYPE.API.name, ';', e.message].join(' ')
+        );
+      }
+    });
 
-        if (!api) {
-            console.warn("Cannot initialize mct-chart.");
-        }
+    if (!api) {
+      console.warn('Cannot initialize mct-chart.');
+    }
 
-        return api;
-    },
-    /**
-     * Returns a fallback draw api.
-     */
-    getFallbackDrawAPI: function (canvas, overlay) {
-        const api = new CHARTS[1].API(canvas, overlay);
-        CHARTS[1].ALLOCATIONS.push(api);
+    return api;
+  },
+  /**
+   * Returns a fallback draw api.
+   */
+  getFallbackDrawAPI: function (canvas, overlay) {
+    const api = new CHARTS[1].API(canvas, overlay);
+    CHARTS[1].ALLOCATIONS.push(api);
 
-        return api;
-    },
-    releaseDrawAPI: function (api) {
-        CHARTS.forEach(function (CHART_TYPE) {
-            if (api instanceof CHART_TYPE.API) {
-                CHART_TYPE.ALLOCATIONS.splice(CHART_TYPE.ALLOCATIONS.indexOf(api), 1);
-            }
-        });
-        if (api.destroy) {
-            api.destroy();
-        }
+    return api;
+  },
+  releaseDrawAPI: function (api) {
+    CHARTS.forEach(function (CHART_TYPE) {
+      if (api instanceof CHART_TYPE.API) {
+        CHART_TYPE.ALLOCATIONS.splice(CHART_TYPE.ALLOCATIONS.indexOf(api), 1);
+      }
+    });
+    if (api.destroy) {
+      api.destroy();
     }
+  }
 };
diff --git a/src/plugins/plot/draw/DrawWebGL.js b/src/plugins/plot/draw/DrawWebGL.js
index 00dea398e49..fc6fc884d31 100644
--- a/src/plugins/plot/draw/DrawWebGL.js
+++ b/src/plugins/plot/draw/DrawWebGL.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,8 +21,9 @@
  *****************************************************************************/
 
 import EventEmitter from 'EventEmitter';
-import eventHelpers from '../lib/eventHelpers';
-import { MARKER_SHAPES } from './MarkerShapes';
+
+import eventHelpers from '../lib/eventHelpers.js';
+import { MARKER_SHAPES } from './MarkerShapes.js';
 
 // WebGL shader sources (for drawing plain colors)
 const FRAGMENT_SHADER = `
@@ -83,121 +84,133 @@ const VERTEX_SHADER = `
  * @throws {Error} an error is thrown if WebGL is unavailable.
  */
 function DrawWebGL(canvas, overlay) {
-    this.canvas = canvas;
-    this.gl = this.canvas.getContext("webgl", { preserveDrawingBuffer: true })
-        || this.canvas.getContext("experimental-webgl", { preserveDrawingBuffer: true });
+  this.canvas = canvas;
+  this.gl =
+    this.canvas.getContext('webgl', { preserveDrawingBuffer: true }) ||
+    this.canvas.getContext('experimental-webgl', { preserveDrawingBuffer: true });
 
-    this.overlay = overlay;
-    this.c2d = overlay.getContext('2d');
-    if (!this.c2d) {
-        throw new Error("No canvas 2d!");
-    }
+  this.overlay = overlay;
+  this.c2d = overlay.getContext('2d');
+  if (!this.c2d) {
+    throw new Error('No canvas 2d!');
+  }
 
-    // Ensure a context was actually available before proceeding
-    if (!this.gl) {
-        throw new Error("WebGL unavailable.");
-    }
+  // Ensure a context was actually available before proceeding
+  if (!this.gl) {
+    throw new Error('WebGL unavailable.');
+  }
 
-    this.initContext();
+  this.initContext();
 
-    this.listenTo(this.canvas, "webglcontextlost", this.onContextLost, this);
+  this.listenTo(this.canvas, 'webglcontextlost', this.onContextLost, this);
 }
 
 Object.assign(DrawWebGL.prototype, EventEmitter.prototype);
 eventHelpers.extend(DrawWebGL.prototype);
 
 DrawWebGL.prototype.onContextLost = function (event) {
-    this.emit('error');
-    this.isContextLost = true;
-    this.destroy();
+  this.emit('error');
+  this.isContextLost = true;
+  this.destroy();
+  // TODO re-initialize and re-draw on context restored
 };
 
 DrawWebGL.prototype.initContext = function () {
-    // Initialize shaders
-    this.vertexShader = this.gl.createShader(this.gl.VERTEX_SHADER);
-    this.gl.shaderSource(this.vertexShader, VERTEX_SHADER);
-    this.gl.compileShader(this.vertexShader);
-
-    this.fragmentShader = this.gl.createShader(this.gl.FRAGMENT_SHADER);
-    this.gl.shaderSource(this.fragmentShader, FRAGMENT_SHADER);
-    this.gl.compileShader(this.fragmentShader);
-
-    // Assemble vertex/fragment shaders into programs
-    this.program = this.gl.createProgram();
-    this.gl.attachShader(this.program, this.vertexShader);
-    this.gl.attachShader(this.program, this.fragmentShader);
-    this.gl.linkProgram(this.program);
-    this.gl.useProgram(this.program);
-
-    // Get locations for attribs/uniforms from the
-    // shader programs (to pass values into shaders at draw-time)
-    this.aVertexPosition = this.gl.getAttribLocation(this.program, "aVertexPosition");
-    this.uColor = this.gl.getUniformLocation(this.program, "uColor");
-    this.uMarkerShape = this.gl.getUniformLocation(this.program, "uMarkerShape");
-    this.uDimensions = this.gl.getUniformLocation(this.program, "uDimensions");
-    this.uOrigin = this.gl.getUniformLocation(this.program, "uOrigin");
-    this.uPointSize = this.gl.getUniformLocation(this.program, "uPointSize");
-
-    this.gl.enableVertexAttribArray(this.aVertexPosition);
-
-    // Create a buffer to holds points which will be drawn
-    this.buffer = this.gl.createBuffer();
-
-    // Enable blending, for smoothness
-    this.gl.enable(this.gl.BLEND);
-    this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
-
+  // Initialize shaders
+  this.vertexShader = this.gl.createShader(this.gl.VERTEX_SHADER);
+  this.gl.shaderSource(this.vertexShader, VERTEX_SHADER);
+  this.gl.compileShader(this.vertexShader);
+
+  this.fragmentShader = this.gl.createShader(this.gl.FRAGMENT_SHADER);
+  this.gl.shaderSource(this.fragmentShader, FRAGMENT_SHADER);
+  this.gl.compileShader(this.fragmentShader);
+
+  // Assemble vertex/fragment shaders into programs
+  this.program = this.gl.createProgram();
+  this.gl.attachShader(this.program, this.vertexShader);
+  this.gl.attachShader(this.program, this.fragmentShader);
+  this.gl.linkProgram(this.program);
+  this.gl.useProgram(this.program);
+
+  // Get locations for attribs/uniforms from the
+  // shader programs (to pass values into shaders at draw-time)
+  this.aVertexPosition = this.gl.getAttribLocation(this.program, 'aVertexPosition');
+  this.uColor = this.gl.getUniformLocation(this.program, 'uColor');
+  this.uMarkerShape = this.gl.getUniformLocation(this.program, 'uMarkerShape');
+  this.uDimensions = this.gl.getUniformLocation(this.program, 'uDimensions');
+  this.uOrigin = this.gl.getUniformLocation(this.program, 'uOrigin');
+  this.uPointSize = this.gl.getUniformLocation(this.program, 'uPointSize');
+
+  this.gl.enableVertexAttribArray(this.aVertexPosition);
+
+  // Create a buffer to holds points which will be drawn
+  this.buffer = this.gl.createBuffer();
+
+  // Enable blending, for smoothness
+  this.gl.enable(this.gl.BLEND);
+  this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
 };
 
 DrawWebGL.prototype.destroy = function () {
-    this.stopListening();
+  // Lose the context and delete all associated resources
+  // https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#lose_contexts_eagerly
+  this.gl?.getExtension('WEBGL_lose_context')?.loseContext();
+  this.gl?.deleteBuffer(this.buffer);
+  this.buffer = undefined;
+  this.gl?.deleteProgram(this.program);
+  this.program = undefined;
+  this.gl?.deleteShader(this.vertexShader);
+  this.vertexShader = undefined;
+  this.gl?.deleteShader(this.fragmentShader);
+  this.fragmentShader = undefined;
+  this.gl = undefined;
+
+  this.stopListening();
+  this.canvas = undefined;
+  this.overlay = undefined;
 };
 
 // Convert from logical to physical x coordinates
 DrawWebGL.prototype.x = function (v) {
-    return ((v - this.origin[0]) / this.dimensions[0]) * this.width;
+  return ((v - this.origin[0]) / this.dimensions[0]) * this.width;
 };
 
 // Convert from logical to physical y coordinates
 DrawWebGL.prototype.y = function (v) {
-    return this.height
-        - ((v - this.origin[1]) / this.dimensions[1]) * this.height;
+  return this.height - ((v - this.origin[1]) / this.dimensions[1]) * this.height;
 };
 
 DrawWebGL.prototype.doDraw = function (drawType, buf, color, points, shape) {
-    if (this.isContextLost) {
-        return;
-    }
-
-    const shapeCode = MARKER_SHAPES[shape] ? MARKER_SHAPES[shape].drawWebGL : 0;
-
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer);
-    this.gl.bufferData(this.gl.ARRAY_BUFFER, buf, this.gl.DYNAMIC_DRAW);
-    this.gl.vertexAttribPointer(this.aVertexPosition, 2, this.gl.FLOAT, false, 0, 0);
-    this.gl.uniform4fv(this.uColor, color);
-    this.gl.uniform1i(this.uMarkerShape, shapeCode);
+  if (this.isContextLost) {
+    return;
+  }
+
+  const shapeCode = MARKER_SHAPES[shape] ? MARKER_SHAPES[shape].drawWebGL : 0;
+
+  this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer);
+  this.gl.bufferData(this.gl.ARRAY_BUFFER, buf, this.gl.DYNAMIC_DRAW);
+  this.gl.vertexAttribPointer(this.aVertexPosition, 2, this.gl.FLOAT, false, 0, 0);
+  this.gl.uniform4fv(this.uColor, color);
+  this.gl.uniform1i(this.uMarkerShape, shapeCode);
+  if (points !== 0) {
     this.gl.drawArrays(drawType, 0, points);
+  }
 };
 
 DrawWebGL.prototype.clear = function () {
-    if (this.isContextLost) {
-        return;
-    }
-
-    this.height = this.canvas.height = this.canvas.offsetHeight;
-    this.width = this.canvas.width = this.canvas.offsetWidth;
-    this.overlay.height = this.overlay.offsetHeight;
-    this.overlay.width = this.overlay.offsetWidth;
-    // Set the viewport size; note that we use the width/height
-    // that our WebGL context reports, which may be lower
-    // resolution than the canvas we requested.
-    this.gl.viewport(
-        0,
-        0,
-        this.gl.drawingBufferWidth,
-        this.gl.drawingBufferHeight
-    );
-    this.gl.clear(this.gl.COLOR_BUFFER_BIT + this.gl.DEPTH_BUFFER_BIT);
+  if (this.isContextLost) {
+    return;
+  }
+
+  this.height = this.canvas.height = this.canvas.offsetHeight;
+  this.width = this.canvas.width = this.canvas.offsetWidth;
+  this.overlay.height = this.overlay.offsetHeight;
+  this.overlay.width = this.overlay.offsetWidth;
+  // Set the viewport size; note that we use the width/height
+  // that our WebGL context reports, which may be lower
+  // resolution than the canvas we requested.
+  this.gl.viewport(0, 0, this.gl.drawingBufferWidth, this.gl.drawingBufferHeight);
+  this.gl.clear(this.gl.COLOR_BUFFER_BIT + this.gl.DEPTH_BUFFER_BIT);
 };
 
 /**
@@ -208,17 +221,16 @@ DrawWebGL.prototype.clear = function () {
  *        origin of the chart
  */
 DrawWebGL.prototype.setDimensions = function (dimensions, origin) {
-    this.dimensions = dimensions;
-    this.origin = origin;
-    if (this.isContextLost) {
-        return;
-    }
-
-    if (dimensions && dimensions.length > 0
-        && origin && origin.length > 0) {
-        this.gl.uniform2fv(this.uDimensions, dimensions);
-        this.gl.uniform2fv(this.uOrigin, origin);
-    }
+  this.dimensions = dimensions;
+  this.origin = origin;
+  if (this.isContextLost) {
+    return;
+  }
+
+  if (dimensions && dimensions.length > 0 && origin && origin.length > 0) {
+    this.gl?.uniform2fv(this.uDimensions, dimensions);
+    this.gl?.uniform2fv(this.uOrigin, origin);
+  }
 };
 
 /**
@@ -232,11 +244,11 @@ DrawWebGL.prototype.setDimensions = function (dimensions, origin) {
  * @param {number} points the number of points to draw
  */
 DrawWebGL.prototype.drawLine = function (buf, color, points) {
-    if (this.isContextLost) {
-        return;
-    }
+  if (this.isContextLost) {
+    return;
+  }
 
-    this.doDraw(this.gl.LINE_STRIP, buf, color, points);
+  this.doDraw(this.gl.LINE_STRIP, buf, color, points);
 };
 
 /**
@@ -244,12 +256,12 @@ DrawWebGL.prototype.drawLine = function (buf, color, points) {
  *
  */
 DrawWebGL.prototype.drawPoints = function (buf, color, points, pointSize, shape) {
-    if (this.isContextLost) {
-        return;
-    }
+  if (this.isContextLost) {
+    return;
+  }
 
-    this.gl.uniform1f(this.uPointSize, pointSize);
-    this.doDraw(this.gl.POINTS, buf, color, points, shape);
+  this.gl.uniform1f(this.uPointSize, pointSize);
+  this.doDraw(this.gl.POINTS, buf, color, points, shape);
 };
 
 /**
@@ -262,39 +274,40 @@ DrawWebGL.prototype.drawPoints = function (buf, color, points, pointSize, shape)
  *        is in the range of 0.0-1.0
  */
 DrawWebGL.prototype.drawSquare = function (min, max, color) {
-    if (this.isContextLost) {
-        return;
-    }
-
-    this.doDraw(this.gl.TRIANGLE_FAN, new Float32Array(
-        min.concat([min[0], max[1]]).concat(max).concat([max[0], min[1]])
-    ), color, 4);
+  if (this.isContextLost) {
+    return;
+  }
+
+  this.doDraw(
+    this.gl.TRIANGLE_FAN,
+    new Float32Array(min.concat([min[0], max[1]]).concat(max).concat([max[0], min[1]])),
+    color,
+    4
+  );
 };
 
 DrawWebGL.prototype.drawLimitPoint = function (x, y, size) {
-    this.c2d.fillRect(x + size, y, size, size);
-    this.c2d.fillRect(x, y + size, size, size);
-    this.c2d.fillRect(x - size, y, size, size);
-    this.c2d.fillRect(x, y - size, size, size);
+  this.c2d.fillRect(x + size, y, size, size);
+  this.c2d.fillRect(x, y + size, size, size);
+  this.c2d.fillRect(x - size, y, size, size);
+  this.c2d.fillRect(x, y - size, size, size);
 };
 
 DrawWebGL.prototype.drawLimitPoints = function (points, color, pointSize) {
-    const limitSize = pointSize * 2;
-    const offset = limitSize / 2;
-
-    const mappedColor = color.map(function (c, i) {
-        return i < 3 ? Math.floor(c * 255) : (c);
-    }).join(',');
-    this.c2d.strokeStyle = "rgba(" + mappedColor + ")";
-    this.c2d.fillStyle = "rgba(" + mappedColor + ")";
-
-    for (let i = 0; i < points.length; i++) {
-        this.drawLimitPoint(
-            this.x(points[i].x) - offset,
-            this.y(points[i].y) - offset,
-            limitSize
-        );
-    }
+  const limitSize = pointSize * 2;
+  const offset = limitSize / 2;
+
+  const mappedColor = color
+    .map(function (c, i) {
+      return i < 3 ? Math.floor(c * 255) : c;
+    })
+    .join(',');
+  this.c2d.strokeStyle = 'rgba(' + mappedColor + ')';
+  this.c2d.fillStyle = 'rgba(' + mappedColor + ')';
+
+  for (let i = 0; i < points.length; i++) {
+    this.drawLimitPoint(this.x(points[i].x) - offset, this.y(points[i].y) - offset, limitSize);
+  }
 };
 
 export default DrawWebGL;
diff --git a/src/plugins/plot/draw/MarkerShapes.js b/src/plugins/plot/draw/MarkerShapes.js
index 9ff5448e884..3a87043fcf1 100644
--- a/src/plugins/plot/draw/MarkerShapes.js
+++ b/src/plugins/plot/draw/MarkerShapes.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,66 +21,66 @@
  *****************************************************************************/
 
 /**
-     * @label string (required) display name of shape
-     * @drawWebGL integer (unique, required) index provided to WebGL Fragment Shader
-     * @drawC2D function (required) canvas2d draw function
-     */
+ * @label string (required) display name of shape
+ * @drawWebGL integer (unique, required) index provided to WebGL Fragment Shader
+ * @drawC2D function (required) canvas2d draw function
+ */
 export const MARKER_SHAPES = {
-    point: {
-        label: 'Point',
-        drawWebGL: 1,
-        drawC2D: function (x, y, size) {
-            const offset = size / 2;
+  point: {
+    label: 'Point',
+    drawWebGL: 1,
+    drawC2D: function (x, y, size) {
+      const offset = size / 2;
 
-            this.c2d.fillRect(x - offset, y - offset, size, size);
-        }
-    },
-    circle: {
-        label: 'Circle',
-        drawWebGL: 2,
-        drawC2D: function (x, y, size) {
-            const radius = size / 2;
+      this.c2d.fillRect(x - offset, y - offset, size, size);
+    }
+  },
+  circle: {
+    label: 'Circle',
+    drawWebGL: 2,
+    drawC2D: function (x, y, size) {
+      const radius = size / 2;
 
-            this.c2d.beginPath();
-            this.c2d.arc(x, y, radius, 0, 2 * Math.PI, false);
-            this.c2d.closePath();
-            this.c2d.fill();
-        }
-    },
-    diamond: {
-        label: 'Diamond',
-        drawWebGL: 3,
-        drawC2D: function (x, y, size) {
-            const offset = size / 2;
-            const top = [x, y + offset];
-            const right = [x + offset, y];
-            const bottom = [x, y - offset];
-            const left = [x - offset, y];
+      this.c2d.beginPath();
+      this.c2d.arc(x, y, radius, 0, 2 * Math.PI, false);
+      this.c2d.closePath();
+      this.c2d.fill();
+    }
+  },
+  diamond: {
+    label: 'Diamond',
+    drawWebGL: 3,
+    drawC2D: function (x, y, size) {
+      const offset = size / 2;
+      const top = [x, y + offset];
+      const right = [x + offset, y];
+      const bottom = [x, y - offset];
+      const left = [x - offset, y];
 
-            this.c2d.beginPath();
-            this.c2d.moveTo(...top);
-            this.c2d.lineTo(...right);
-            this.c2d.lineTo(...bottom);
-            this.c2d.lineTo(...left);
-            this.c2d.closePath();
-            this.c2d.fill();
-        }
-    },
-    triangle: {
-        label: 'Triangle',
-        drawWebGL: 4,
-        drawC2D: function (x, y, size) {
-            const offset = size / 2;
-            const v1 = [x, y - offset];
-            const v2 = [x - offset, y + offset];
-            const v3 = [x + offset, y + offset];
+      this.c2d.beginPath();
+      this.c2d.moveTo(...top);
+      this.c2d.lineTo(...right);
+      this.c2d.lineTo(...bottom);
+      this.c2d.lineTo(...left);
+      this.c2d.closePath();
+      this.c2d.fill();
+    }
+  },
+  triangle: {
+    label: 'Triangle',
+    drawWebGL: 4,
+    drawC2D: function (x, y, size) {
+      const offset = size / 2;
+      const v1 = [x, y - offset];
+      const v2 = [x - offset, y + offset];
+      const v3 = [x + offset, y + offset];
 
-            this.c2d.beginPath();
-            this.c2d.moveTo(...v1);
-            this.c2d.lineTo(...v2);
-            this.c2d.lineTo(...v3);
-            this.c2d.closePath();
-            this.c2d.fill();
-        }
+      this.c2d.beginPath();
+      this.c2d.moveTo(...v1);
+      this.c2d.lineTo(...v2);
+      this.c2d.lineTo(...v3);
+      this.c2d.closePath();
+      this.c2d.fill();
     }
+  }
 };
diff --git a/src/plugins/plot/inspector/PlotOptions.vue b/src/plugins/plot/inspector/PlotOptions.vue
index 0aa28000bd7..47d503309e4 100644
--- a/src/plugins/plot/inspector/PlotOptions.vue
+++ b/src/plugins/plot/inspector/PlotOptions.vue
@@ -1,5 +1,5 @@
 <!--
- Open MCT, Copyright (c) 2014-2020, United States Government
+ Open MCT, Copyright (c) 2014-2024, United States Government
  as represented by the Administrator of the National Aeronautics and Space
  Administration. All rights reserved.
 
@@ -20,45 +20,45 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-<div>
+  <div>
     <div v-if="canEdit">
-        <plot-options-edit />
+      <plot-options-edit />
     </div>
     <div v-else>
-        <plot-options-browse />
+      <plot-options-browse />
     </div>
-</div>
+  </div>
 </template>
 
 <script>
-import PlotOptionsBrowse from "./PlotOptionsBrowse.vue";
-import PlotOptionsEdit from "./PlotOptionsEdit.vue";
+import PlotOptionsBrowse from './PlotOptionsBrowse.vue';
+import PlotOptionsEdit from './PlotOptionsEdit.vue';
 export default {
-    components: {
-        PlotOptionsBrowse,
-        PlotOptionsEdit
-    },
-    inject: ['openmct', 'domainObject'],
-    data() {
-        return {
-            isEditing: this.openmct.editor.isEditing()
-        };
-    },
-    computed: {
-        canEdit() {
-            return this.isEditing && !this.domainObject.locked;
-        }
-    },
-    mounted() {
-        this.openmct.editor.on('isEditing', this.setEditState);
-    },
-    beforeDestroy() {
-        this.openmct.editor.off('isEditing', this.setEditState);
-    },
-    methods: {
-        setEditState(isEditing) {
-            this.isEditing = isEditing;
-        }
+  components: {
+    PlotOptionsBrowse,
+    PlotOptionsEdit
+  },
+  inject: ['openmct', 'domainObject', 'path'],
+  data() {
+    return {
+      isEditing: this.openmct.editor.isEditing()
+    };
+  },
+  computed: {
+    canEdit() {
+      return this.isEditing && !this.domainObject.locked;
     }
+  },
+  mounted() {
+    this.openmct.editor.on('isEditing', this.setEditState);
+  },
+  beforeUnmount() {
+    this.openmct.editor.off('isEditing', this.setEditState);
+  },
+  methods: {
+    setEditState(isEditing) {
+      this.isEditing = isEditing;
+    }
+  }
 };
 </script>
diff --git a/src/plugins/plot/inspector/PlotOptionsBrowse.vue b/src/plugins/plot/inspector/PlotOptionsBrowse.vue
index acb3bbbe286..ba4e368266d 100644
--- a/src/plugins/plot/inspector/PlotOptionsBrowse.vue
+++ b/src/plugins/plot/inspector/PlotOptionsBrowse.vue
@@ -1,5 +1,5 @@
 <!--
- Open MCT, Copyright (c) 2014-2020, United States Government
+ Open MCT, Copyright (c) 2014-2024, United States Government
  as represented by the Administrator of the National Aeronautics and Space
  Administration. All rights reserved.
 
@@ -20,182 +20,269 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-<div v-if="loaded"
-     class="js-plot-options-browse"
->
-    <ul class="c-tree">
-        <h2 title="Plot series display properties in this object">Plot Series</h2>
-        <plot-options-item v-for="series in plotSeries"
-                           :key="series.key"
-                           :series="series"
-        />
+  <div v-if="loaded" class="js-plot-options-browse">
+    <ul v-if="!isStackedPlotObject" class="c-tree" aria-label="Plot Series Properties">
+      <h2 class="--first" title="Plot series display properties in this object">Plot Series</h2>
+      <PlotOptionsItem v-for="series in plotSeries" :key="series.keyString" :series="series" />
     </ul>
-    <div v-if="plotSeries.length"
-         class="grid-properties"
-    >
-        <ul class="l-inspector-part">
-            <h2 title="Y axis settings for this object">Y Axis</h2>
-            <li class="grid-row">
-                <div class="grid-cell label"
-                     title="Manually override how the Y axis is labeled."
-                >Label</div>
-                <div class="grid-cell value">{{ label ? label : "Not defined" }}</div>
-            </li>
-            <li class="grid-row">
-                <div class="grid-cell label"
-                     title="Automatically scale the Y axis to keep all values in view."
-                >Autoscale</div>
-                <div class="grid-cell value">
-                    {{ autoscale ? "Enabled: " : "Disabled" }}
-                    {{ autoscale ? autoscalePadding : "" }}
-                </div>
-            </li>
-            <li v-if="!autoscale && rangeMin"
-                class="grid-row"
-            >
-                <div class="grid-cell label"
-                     title="Minimum Y axis value."
-                >Minimum value</div>
-                <div class="grid-cell value">{{ rangeMin }}</div>
-            </li>
-            <li v-if="!autoscale && rangeMax"
-                class="grid-row"
-            >
-                <div class="grid-cell label"
-                     title="Maximum Y axis value."
-                >Maximum value</div>
-                <div class="grid-cell value">{{ rangeMax }}</div>
-            </li>
-        </ul>
-        <ul class="l-inspector-part">
-            <h2 title="Legend settings for this object">Legend</h2>
-            <li class="grid-row">
-                <div class="grid-cell label"
-                     title="The position of the legend relative to the plot display area."
-                >Position</div>
-                <div class="grid-cell value capitalize">{{ position }}</div>
-            </li>
-            <li class="grid-row">
-                <div class="grid-cell label"
-                     title="Hide the legend when the plot is small"
-                >Hide when plot small</div>
-                <div class="grid-cell value">{{ hideLegendWhenSmall ? "Yes" : "No" }}</div>
-            </li>
-            <li class="grid-row">
-                <div class="grid-cell label"
-                     title="Show the legend expanded by default"
-                >Expand by Default</div>
-                <div class="grid-cell value">{{ expandByDefault ? "Yes" : "No" }}</div>
-            </li>
-            <li class="grid-row">
-                <div class="grid-cell label"
-                     title="What to display in the legend when it's collapsed."
-                >Show when collapsed:</div>
-                <div class="grid-cell value">{{
-                    valueToShowWhenCollapsed.replace('nearest', '')
-                }}
-                </div>
-            </li>
-            <li class="grid-row">
-                <div class="grid-cell label"
-                     title="What to display in the legend when it's expanded."
-                >Show when expanded:</div>
-                <div class="grid-cell value comma-list">
-                    <span v-if="showTimestampWhenExpanded">Timestamp</span>
-                    <span v-if="showValueWhenExpanded">Value</span>
-                    <span v-if="showMinimumWhenExpanded">Min</span>
-                    <span v-if="showMaximumWhenExpanded">Max</span>
-                    <span v-if="showUnitsWhenExpanded">Units</span>
-                </div>
-            </li>
-        </ul>
+    <div v-if="plotSeries.length && !isStackedPlotObject" class="grid-properties">
+      <ul
+        v-for="(yAxis, index) in yAxesWithSeries"
+        :key="`yAxis-${index}`"
+        class="l-inspector-part js-yaxis-properties"
+        :aria-label="
+          yAxesWithSeries.length > 1 ? `Y Axis ${yAxis.id} Properties` : 'Y Axis Properties'
+        "
+      >
+        <h2 title="Y axis settings for this object">
+          Y Axis {{ yAxesWithSeries.length > 1 ? yAxis.id : '' }}
+        </h2>
+        <li class="grid-row">
+          <div class="grid-cell label" title="Manually override how the Y axis is labeled.">
+            Label
+          </div>
+          <div class="grid-cell value">{{ yAxis.label ? yAxis.label : 'Not defined' }}</div>
+        </li>
+        <li class="grid-row">
+          <div class="grid-cell label" title="Enable log mode.">Log mode</div>
+          <div class="grid-cell value">
+            {{ yAxis.logMode ? 'Enabled' : 'Disabled' }}
+          </div>
+        </li>
+        <li class="grid-row">
+          <div
+            class="grid-cell label"
+            title="Automatically scale the Y axis to keep all values in view."
+          >
+            Auto scale
+          </div>
+          <div class="grid-cell value">
+            {{ yAxis.autoscale ? 'Enabled: ' + yAxis.autoscalePadding : 'Disabled' }}
+          </div>
+        </li>
+        <li v-if="!yAxis.autoscale && yAxis.rangeMin !== ''" class="grid-row">
+          <div class="grid-cell label" title="Minimum Y axis value.">Minimum value</div>
+          <div class="grid-cell value">{{ yAxis.rangeMin }}</div>
+        </li>
+        <li v-if="!yAxis.autoscale && yAxis.rangeMax !== ''" class="grid-row">
+          <div class="grid-cell label" title="Maximum Y axis value.">Maximum value</div>
+          <div class="grid-cell value">{{ yAxis.rangeMax }}</div>
+        </li>
+      </ul>
     </div>
-</div>
+    <div v-if="isStackedPlotObject || !isNestedWithinAStackedPlot" class="grid-properties">
+      <ul class="l-inspector-part js-legend-properties">
+        <h2 class="--first" title="Legend settings for this object">Legend</h2>
+        <li v-if="isStackedPlotObject" class="grid-row">
+          <div class="grid-cell label" title="Display legends per sub plot.">
+            Show legend per plot
+          </div>
+          <div class="grid-cell value">{{ showLegendsForChildren ? 'Yes' : 'No' }}</div>
+        </li>
+        <li v-if="showLegendDetails" class="grid-row">
+          <div
+            class="grid-cell label"
+            title="The position of the legend relative to the plot display area."
+          >
+            Position
+          </div>
+          <div class="grid-cell value capitalize">{{ position }}</div>
+        </li>
+        <li v-if="showLegendDetails" class="grid-row">
+          <div class="grid-cell label" title="Hide the legend when the plot is small">
+            Hide when plot small
+          </div>
+          <div class="grid-cell value">{{ hideLegendWhenSmall ? 'Yes' : 'No' }}</div>
+        </li>
+        <li v-if="showLegendDetails" class="grid-row">
+          <div class="grid-cell label" title="Show the legend expanded by default">
+            Expand by Default
+          </div>
+          <div aria-label="Expand by Default" class="grid-cell value">
+            {{ expandByDefault ? 'Yes' : 'No' }}
+          </div>
+        </li>
+        <li v-if="showLegendDetails" class="grid-row">
+          <div class="grid-cell label" title="What to display in the legend when it's collapsed.">
+            Show when collapsed:
+          </div>
+          <div class="grid-cell value">{{ valueToShowWhenCollapsed.replace('nearest', '') }}</div>
+        </li>
+        <li v-if="showLegendDetails" class="grid-row">
+          <div class="grid-cell label" title="What to display in the legend when it's expanded.">
+            Show when expanded:
+          </div>
+          <div class="grid-cell value comma-list">
+            <span v-if="showTimestampWhenExpanded">Timestamp</span>
+            <span v-if="showValueWhenExpanded">Value</span>
+            <span v-if="showMinimumWhenExpanded">Min</span>
+            <span v-if="showMaximumWhenExpanded">Max</span>
+            <span v-if="showUnitsWhenExpanded">Unit</span>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
 </template>
 
 <script>
-import PlotOptionsItem from "./PlotOptionsItem.vue";
-import configStore from "../configuration/configStore";
-import eventHelpers from "../lib/eventHelpers";
+import configStore from '../configuration/ConfigStore.js';
+import eventHelpers from '../lib/eventHelpers.js';
+import PlotOptionsItem from './PlotOptionsItem.vue';
 
 export default {
-    components: {
-        PlotOptionsItem
-    },
-    inject: ['openmct', 'domainObject'],
-    data() {
-        return {
-            config: {},
-            label: '',
-            autoscale: '',
-            autoscalePadding: '',
-            rangeMin: '',
-            rangeMax: '',
-            position: '',
-            hideLegendWhenSmall: '',
-            expandByDefault: '',
-            valueToShowWhenCollapsed: '',
-            showTimestampWhenExpanded: '',
-            showValueWhenExpanded: '',
-            showMinimumWhenExpanded: '',
-            showMaximumWhenExpanded: '',
-            showUnitsWhenExpanded: '',
-            loaded: false,
-            plotSeries: []
-        };
+  components: {
+    PlotOptionsItem
+  },
+  inject: ['openmct', 'domainObject', 'path'],
+  data() {
+    return {
+      config: {},
+      position: '',
+      hideLegendWhenSmall: '',
+      expandByDefault: '',
+      valueToShowWhenCollapsed: '',
+      showTimestampWhenExpanded: '',
+      showValueWhenExpanded: '',
+      showMinimumWhenExpanded: '',
+      showMaximumWhenExpanded: '',
+      showUnitsWhenExpanded: '',
+      showLegendsForChildren: '',
+      loaded: false,
+      plotSeries: [],
+      yAxes: []
+    };
+  },
+  computed: {
+    isNestedWithinAStackedPlot() {
+      return this.path.find(
+        (pathObject, pathObjIndex) =>
+          pathObjIndex > 0 && pathObject?.type === 'telemetry.plot.stacked'
+      );
     },
-    mounted() {
-        eventHelpers.extend(this);
-        this.config = this.getConfig();
-        this.registerListeners();
-        this.initConfiguration();
-        this.loaded = true;
+    isStackedPlotObject() {
+      return this.path.find(
+        (pathObject, pathObjIndex) =>
+          pathObjIndex === 0 && pathObject.type === 'telemetry.plot.stacked'
+      );
     },
-    beforeDestroy() {
-        this.stopListening();
+    showLegendDetails() {
+      return (
+        !this.isStackedPlotObject || (this.isStackedPlotObject && !this.showLegendsForChildren)
+      );
     },
-    methods: {
-        initConfiguration() {
-            this.label = this.config.yAxis.get('label');
-            this.autoscale = this.config.yAxis.get('autoscale');
-            this.autoscalePadding = this.config.yAxis.get('autoscalePadding');
-            const range = this.config.yAxis.get('range');
-            if (range) {
-                this.rangeMin = range.min;
-                this.rangeMax = range.max;
-            }
+    yAxesWithSeries() {
+      return this.yAxes.filter((yAxis) => yAxis.seriesCount > 0);
+    }
+  },
+  mounted() {
+    eventHelpers.extend(this);
+    this.config = this.getConfig();
+    if (!this.isStackedPlotObject) {
+      this.initYAxesConfiguration();
+      this.registerListeners();
+    }
+    this.initLegendConfiguration();
 
-            this.position = this.config.legend.get('position');
-            this.hideLegendWhenSmall = this.config.legend.get('hideLegendWhenSmall');
-            this.expandByDefault = this.config.legend.get('expandByDefault');
-            this.valueToShowWhenCollapsed = this.config.legend.get('valueToShowWhenCollapsed');
-            this.showTimestampWhenExpanded = this.config.legend.get('showTimestampWhenExpanded');
-            this.showValueWhenExpanded = this.config.legend.get('showValueWhenExpanded');
-            this.showMinimumWhenExpanded = this.config.legend.get('showMinimumWhenExpanded');
-            this.showMaximumWhenExpanded = this.config.legend.get('showMaximumWhenExpanded');
-            this.showUnitsWhenExpanded = this.config.legend.get('showUnitsWhenExpanded');
-        },
-        getConfig() {
-            this.configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+    this.loaded = true;
+  },
+  beforeUnmount() {
+    this.stopListening();
+  },
+  methods: {
+    initYAxesConfiguration() {
+      if (this.config) {
+        let range = this.config.yAxis.get('range');
 
-            return configStore.get(this.configId);
-        },
-        registerListeners() {
-            this.config.series.forEach(this.addSeries, this);
+        this.yAxes.push({
+          id: this.config.yAxis.id,
+          seriesCount: 0,
+          label: this.config.yAxis.get('label'),
+          autoscale: this.config.yAxis.get('autoscale'),
+          logMode: this.config.yAxis.get('logMode'),
+          autoscalePadding: this.config.yAxis.get('autoscalePadding'),
+          rangeMin: range?.min ?? '',
+          rangeMax: range?.max ?? ''
+        });
+        this.config.additionalYAxes.forEach((yAxis) => {
+          range = yAxis.get('range');
 
-            this.listenTo(this.config.series, 'add', this.addSeries, this);
-            this.listenTo(this.config.series, 'remove', this.resetAllSeries, this);
-        },
+          this.yAxes.push({
+            id: yAxis.id,
+            seriesCount: 0,
+            label: yAxis.get('label'),
+            autoscale: yAxis.get('autoscale'),
+            logMode: yAxis.get('logMode'),
+            autoscalePadding: yAxis.get('autoscalePadding'),
+            rangeMin: range?.min ?? '',
+            rangeMax: range?.max ?? ''
+          });
+        });
+      }
+    },
+    initLegendConfiguration() {
+      if (this.config) {
+        this.position = this.config.legend.get('position');
+        this.hideLegendWhenSmall = this.config.legend.get('hideLegendWhenSmall');
+        this.expandByDefault = this.config.legend.get('expandByDefault');
+        this.valueToShowWhenCollapsed = this.config.legend.get('valueToShowWhenCollapsed');
+        this.showTimestampWhenExpanded = this.config.legend.get('showTimestampWhenExpanded');
+        this.showValueWhenExpanded = this.config.legend.get('showValueWhenExpanded');
+        this.showMinimumWhenExpanded = this.config.legend.get('showMinimumWhenExpanded');
+        this.showMaximumWhenExpanded = this.config.legend.get('showMaximumWhenExpanded');
+        this.showUnitsWhenExpanded = this.config.legend.get('showUnitsWhenExpanded');
+        this.showLegendsForChildren = this.config.legend.get('showLegendsForChildren');
+      }
+    },
+    getConfig() {
+      const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
 
-        addSeries(series, index) {
-            this.$set(this.plotSeries, index, series);
-            this.initConfiguration();
-        },
+      return configStore.get(configId);
+    },
+    registerListeners() {
+      if (this.config) {
+        this.config.series.forEach(this.addSeries, this);
 
-        resetAllSeries() {
-            this.plotSeries = [];
-            this.config.series.forEach(this.addSeries, this);
+        this.listenTo(this.config.series, 'add', this.addSeries, this);
+        this.listenTo(this.config.series, 'remove', this.removeSeries, this);
+      }
+    },
+
+    setYAxisLabel(yAxisId) {
+      const found = this.yAxes.find((yAxis) => yAxis.id === yAxisId);
+      if (found && found.seriesCount > 0) {
+        const mainYAxisId = this.config.yAxis.id;
+        if (mainYAxisId === yAxisId) {
+          found.label = this.config.yAxis.get('label');
+        } else {
+          const additionalYAxis = this.config.additionalYAxes.find((axis) => axis.id === yAxisId);
+          if (additionalYAxis) {
+            found.label = additionalYAxis.get('label');
+          }
         }
+      }
+    },
+
+    addSeries(series, index) {
+      const yAxisId = series.get('yAxisId');
+      this.updateAxisUsageCount(yAxisId, 1);
+      this.plotSeries[index] = series;
+      this.setYAxisLabel(yAxisId);
+    },
+
+    removeSeries(plotSeries, index) {
+      const yAxisId = plotSeries.get('yAxisId');
+      this.updateAxisUsageCount(yAxisId, -1);
+      this.plotSeries.splice(index, 1);
+      this.setYAxisLabel(yAxisId);
+    },
+
+    updateAxisUsageCount(yAxisId, updateCount) {
+      const foundYAxis = this.yAxes.find((yAxis) => yAxis.id === yAxisId);
+      if (foundYAxis) {
+        foundYAxis.seriesCount = foundYAxis.seriesCount + updateCount;
+      }
     }
+  }
 };
 </script>
diff --git a/src/plugins/plot/inspector/PlotOptionsEdit.vue b/src/plugins/plot/inspector/PlotOptionsEdit.vue
index 5c251c24686..114c768123c 100644
--- a/src/plugins/plot/inspector/PlotOptionsEdit.vue
+++ b/src/plugins/plot/inspector/PlotOptionsEdit.vue
@@ -1,5 +1,5 @@
 <!--
- Open MCT, Copyright (c) 2014-2020, United States Government
+ Open MCT, Copyright (c) 2014-2024, United States Government
  as represented by the Administrator of the National Aeronautics and Space
  Administration. All rights reserved.
 
@@ -20,81 +20,208 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-<div v-if="loaded"
-     class="js-plot-options-edit"
->
-    <ul class="c-tree">
-        <h2 title="Display properties for this object">Plot Series</h2>
-        <li v-for="series in plotSeries"
-            :key="series.key"
-        >
-            <series-form :series="series" />
-        </li>
+  <div v-if="loaded" class="js-plot-options-edit">
+    <ul v-if="!isStackedPlotObject" class="c-tree" aria-label="Plot Series Properties">
+      <h2 class="--first" title="Display properties for this object">Plot Series</h2>
+      <li v-for="series in plotSeries" :key="series.keyString">
+        <series-form :series="series" @series-updated="updateSeriesConfigForObject" />
+      </li>
     </ul>
-    <y-axis-form v-if="plotSeries.length"
-                 class="grid-properties"
-                 :y-axis="config.yAxis"
+    <y-axis-form
+      v-for="(yAxisId, index) in yAxesIds"
+      :id="yAxisId.id"
+      :key="`yAxis-${index}`"
+      class="grid-properties js-yaxis-grid-properties"
+      :y-axis="config.yAxis"
+      @series-updated="updateSeriesConfigForObject"
     />
-    <ul class="l-inspector-part">
-        <h2 title="Legend options">Legend</h2>
-        <legend-form v-if="plotSeries.length"
-                     class="grid-properties"
-                     :legend="config.legend"
-        />
+    <ul
+      v-if="isStackedPlotObject || !isStackedPlotNestedObject"
+      class="l-inspector-part"
+      aria-label="Legend Properties"
+    >
+      <h2 class="--first" title="Legend options">Legend</h2>
+      <legend-form class="grid-properties" :legend="config.legend" />
     </ul>
-</div>
+  </div>
 </template>
 <script>
-import SeriesForm from "./forms/SeriesForm.vue";
-import YAxisForm from "./forms/YAxisForm.vue";
-import LegendForm from "./forms/LegendForm.vue";
-import eventHelpers from "../lib/eventHelpers";
-import configStore from "../configuration/configStore";
+import _ from 'lodash';
+
+import configStore from '../configuration/ConfigStore.js';
+import eventHelpers from '../lib/eventHelpers.js';
+import LegendForm from './forms/LegendForm.vue';
+import SeriesForm from './forms/SeriesForm.vue';
+import YAxisForm from './forms/YAxisForm.vue';
 
 export default {
-    components: {
-        LegendForm,
-        SeriesForm,
-        YAxisForm
+  components: {
+    LegendForm,
+    SeriesForm,
+    YAxisForm
+  },
+  inject: ['openmct', 'domainObject', 'path'],
+  data() {
+    return {
+      config: {},
+      yAxes: [],
+      plotSeries: [],
+      loaded: false
+    };
+  },
+  computed: {
+    isStackedPlotNestedObject() {
+      return this.path.find(
+        (pathObject, pathObjIndex) =>
+          pathObjIndex > 0 && pathObject?.type === 'telemetry.plot.stacked'
+      );
     },
-    inject: ['openmct', 'domainObject'],
-    data() {
-        return {
-            config: {},
-            plotSeries: [],
-            loaded: false
-        };
+    isStackedPlotObject() {
+      return this.path.find(
+        (pathObject, pathObjIndex) =>
+          pathObjIndex === 0 && pathObject?.type === 'telemetry.plot.stacked'
+      );
     },
-    mounted() {
-        eventHelpers.extend(this);
-        this.config = this.getConfig();
-        this.registerListeners();
-        this.loaded = true;
+    yAxesIds() {
+      return !this.isStackedPlotObject && this.yAxes.filter((yAxis) => yAxis.seriesCount > 0);
+    }
+  },
+  created() {
+    eventHelpers.extend(this);
+    this.config = this.getConfig();
+  },
+  mounted() {
+    if (!this.isStackedPlotObject) {
+      this.yAxes = [
+        {
+          id: this.config.yAxis.id,
+          seriesCount: 0
+        }
+      ];
+      if (this.config.additionalYAxes) {
+        this.yAxes = this.yAxes.concat(
+          this.config.additionalYAxes.map((yAxis) => {
+            return {
+              id: yAxis.id,
+              seriesCount: 0
+            };
+          })
+        );
+      }
+
+      this.registerListeners();
+    }
+
+    this.loaded = true;
+  },
+  beforeUnmount() {
+    this.stopListening();
+  },
+  methods: {
+    getConfig() {
+      this.configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+
+      return configStore.get(this.configId);
     },
-    beforeDestroy() {
-        this.stopListening();
+    registerListeners() {
+      this.config.series.forEach(this.addSeries, this);
+
+      this.listenTo(this.config.series, 'add', this.addSeries, this);
+      this.listenTo(this.config.series, 'remove', this.removeSeries, this);
     },
-    methods: {
-        getConfig() {
-            this.configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
 
-            return configStore.get(this.configId);
-        },
-        registerListeners() {
-            this.config.series.forEach(this.addSeries, this);
+    findYAxisForId(yAxisId) {
+      return this.yAxes.find((yAxis) => yAxis.id === yAxisId);
+    },
 
-            this.listenTo(this.config.series, 'add', this.addSeries, this);
-            this.listenTo(this.config.series, 'remove', this.resetAllSeries, this);
-        },
+    setYAxisLabel(yAxisId) {
+      const found = this.findYAxisForId(yAxisId);
+      if (found && found.seriesCount > 0) {
+        const mainYAxisId = this.config.yAxis.id;
+        if (mainYAxisId === yAxisId) {
+          found.label = this.config.yAxis.get('label');
+        } else {
+          const additionalYAxis = this.config.additionalYAxes.find((axis) => axis.id === yAxisId);
+          if (additionalYAxis) {
+            found.label = additionalYAxis.get('label');
+          }
+        }
+      }
+    },
+
+    addSeries(series, index) {
+      const yAxisId = series.get('yAxisId');
+      this.incrementAxisUsageCount(yAxisId);
+      this.plotSeries[index] = series;
+      this.setYAxisLabel(yAxisId);
 
-        addSeries(series, index) {
-            this.$set(this.plotSeries, index, series);
+      if (this.isStackedPlotObject) {
+        return;
+      }
+
+      // If the series moves to a different yAxis, update the seriesCounts for both yAxes
+      // so we can display the configuration options for all used yAxes
+      this.listenTo(
+        series,
+        'change:yAxisId',
+        (newYAxisId, oldYAxisId) => {
+          this.incrementAxisUsageCount(newYAxisId);
+          this.decrementAxisUsageCount(oldYAxisId);
         },
+        this
+      );
+    },
 
-        resetAllSeries() {
-            this.plotSeries = [];
-            this.config.series.forEach(this.addSeries, this);
-        }
+    removeSeries(series, index) {
+      const yAxisId = series.get('yAxisId');
+      this.decrementAxisUsageCount(yAxisId);
+      this.plotSeries.splice(index, 1);
+      this.setYAxisLabel(yAxisId);
+
+      if (this.isStackedPlotObject) {
+        return;
+      }
+
+      this.stopListening(series, 'change:yAxisId');
+    },
+
+    incrementAxisUsageCount(yAxisId) {
+      this.updateAxisUsageCount(yAxisId, 1);
+    },
+
+    decrementAxisUsageCount(yAxisId) {
+      this.updateAxisUsageCount(yAxisId, -1);
+    },
+
+    updateAxisUsageCount(yAxisId, updateCount) {
+      const foundYAxis = this.findYAxisForId(yAxisId);
+      if (!foundYAxis) {
+        throw new Error(`yAxis with id ${yAxisId} not found`);
+      }
+
+      foundYAxis.seriesCount = foundYAxis.seriesCount + updateCount;
+    },
+
+    updateSeriesConfigForObject(config) {
+      const stackedPlotObject = this.path.find(
+        (pathObject) => pathObject.type === 'telemetry.plot.stacked'
+      );
+      let index = stackedPlotObject.configuration.series.findIndex((seriesConfig) => {
+        return this.openmct.objects.areIdsEqual(seriesConfig.identifier, config.identifier);
+      });
+      if (index < 0) {
+        index = stackedPlotObject.configuration.series.length;
+        const configPath = `configuration.series[${index}]`;
+        let newConfig = {
+          identifier: config.identifier
+        };
+        _.set(newConfig, `${config.path}`, config.value);
+        this.openmct.objects.mutate(stackedPlotObject, configPath, newConfig);
+      } else {
+        const configPath = `configuration.series[${index}].${config.path}`;
+        this.openmct.objects.mutate(stackedPlotObject, configPath, config.value);
+      }
     }
+  }
 };
 </script>
diff --git a/src/plugins/plot/inspector/PlotOptionsItem.vue b/src/plugins/plot/inspector/PlotOptionsItem.vue
index 42684ae9d48..2513283b88d 100644
--- a/src/plugins/plot/inspector/PlotOptionsItem.vue
+++ b/src/plugins/plot/inspector/PlotOptionsItem.vue
@@ -1,171 +1,208 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<ul>
-    <li class="c-tree__item menus-to-left"
-        :class="isAliasClass"
-    >
-        <span class="c-disclosure-triangle is-enabled flex-elem"
-              :class="expandedCssClass"
-              @click="toggleExpanded"
-        >
-        </span>
-        <div class="c-object-label"
-             :class="statusClass"
-        >
-            <div class="c-object-label__type-icon"
-                 :class="getSeriesClass"
-            >
-                <span class="is-status__indicator"
-                      title="This item is missing or suspect"
-                ></span>
-            </div>
-            <div class="c-object-label__name">{{ series.domainObject.name }}</div>
+  <ul>
+    <li class="c-tree__item menus-to-left" :class="isAliasClass">
+      <span
+        class="c-disclosure-triangle is-enabled flex-elem"
+        :class="expandedCssClass"
+        @click="toggleExpanded"
+      >
+      </span>
+      <div class="c-object-label" :class="statusClass">
+        <div class="c-object-label__type-icon" :class="getSeriesClass">
+          <span class="is-status__indicator" title="This item is missing or suspect"></span>
         </div>
+        <div class="c-object-label__name">{{ series.domainObject.name }}</div>
+      </div>
     </li>
-    <li v-show="expanded"
-        class="c-tree__item menus-to-left"
-    >
-        <ul class="grid-properties js-plot-options-browse-properties">
-            <li class="grid-row">
-                <div class="grid-cell label"
-                     title="The field to be plotted as a value for this series."
-                >Value</div>
-                <div class="grid-cell value">
-                    {{ yKey }}
-                </div>
-            </li>
-            <li class="grid-row">
-                <div class="grid-cell label"
-                     title="The rendering method to join lines for this series."
-                >Line Method</div>
-                <div class="grid-cell value">{{ {
-                    'none': 'None',
-                    'linear': 'Linear interpolation',
-                    'stepAfter': 'Step After'
-                }[interpolate] }}
-                </div>
-            </li>
-            <li class="grid-row">
-                <div class="grid-cell label"
-                     title="Whether markers are displayed, and their size."
-                >Markers</div>
-                <div class="grid-cell value">
-                    {{ markerOptionsDisplayText }}
-                </div>
-            </li>
-            <li class="grid-row">
-                <div class="grid-cell label"
-                     title="Display markers visually denoting points in alarm."
-                >Alarm Markers</div>
-                <div class="grid-cell value">
-                    {{ alarmMarkers ? "Enabled" : "Disabled" }}
-                </div>
-            </li>
-            <li class="grid-row">
-                <div class="grid-cell label"
-                     title="Display lines visually denoting alarm limits."
-                >Limit lines</div>
-                <div class="grid-cell value">
-                    {{ limitLines ? "Enabled" : "Disabled" }}
-                </div>
-            </li>
-            <li class="grid-row">
-                <div class="grid-cell label"
-                     title="The plot line and marker color for this series."
-                >Color</div>
-                <div class="grid-cell value">
-                    <span class="c-color-swatch"
-                          :style="{
-                              'background': seriesHexColor
-                          }"
-                    >
-                    </span>
-                </div>
-            </li>
-        </ul>
+    <li v-show="expanded" class="c-tree__item menus-to-left" role="table">
+      <ul class="grid-properties js-plot-options-browse-properties" role="rowgroup">
+        <li class="grid-row" role="row">
+          <div
+            class="grid-cell label"
+            title="The field to be plotted as a value for this series."
+            role="cell"
+          >
+            Value
+          </div>
+          <div class="grid-cell value" role="cell">
+            {{ yKey }}
+          </div>
+        </li>
+        <li class="grid-row" role="row">
+          <div
+            class="grid-cell label"
+            title="The rendering method to join lines for this series."
+            role="cell"
+          >
+            Line Method
+          </div>
+          <div class="grid-cell value" role="cell">
+            {{
+              {
+                none: 'None',
+                linear: 'Linear interpolation',
+                stepAfter: 'Step After'
+              }[interpolate]
+            }}
+          </div>
+        </li>
+        <li class="grid-row" role="row">
+          <div
+            class="grid-cell label"
+            title="Whether markers are displayed, and their size."
+            role="cell"
+          >
+            Markers
+          </div>
+          <div class="grid-cell value" role="cell">
+            {{ markerOptionsDisplayText }}
+          </div>
+        </li>
+        <li class="grid-row" role="row">
+          <div
+            class="grid-cell label"
+            title="Display markers visually denoting points in alarm."
+            role="cell"
+          >
+            Alarm Markers
+          </div>
+          <div class="grid-cell value" role="cell">
+            {{ alarmMarkers ? 'Enabled' : 'Disabled' }}
+          </div>
+        </li>
+        <li class="grid-row" role="row">
+          <div
+            class="grid-cell label"
+            title="Display lines visually denoting alarm limits."
+            role="cell"
+          >
+            Limit Lines
+          </div>
+          <div class="grid-cell value" role="cell">
+            {{ limitLines ? 'Enabled' : 'Disabled' }}
+          </div>
+        </li>
+        <ColorSwatch
+          :current-color="seriesHexColor"
+          edit-title="Manually set the plot line and marker color for this series."
+          view-title="The plot line and marker color for this series."
+          short-label="Color"
+        />
+      </ul>
     </li>
-</ul>
+  </ul>
 </template>
 
 <script>
+import ColorSwatch from '@/ui/color/ColorSwatch.vue';
+
 export default {
-    inject: ['openmct', 'domainObject', 'path'],
-    props: {
-        series: {
-            type: Object,
-            default() {
-                return {};
-            }
-        }
-    },
-    data() {
-        return {
-            expanded: false
-        };
-    },
-    computed: {
-        isAliasClass() {
-            let cssClass = '';
-            const domainObjectPath = [this.series.domainObject, ...this.path];
-            if (this.openmct.objects.isObjectPathToALink(this.series.domainObject, domainObjectPath)) {
-                cssClass = 'is-alias';
-            }
+  components: {
+    ColorSwatch
+  },
+  inject: ['openmct', 'domainObject', 'path'],
+  props: {
+    series: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      expanded: false,
+      status: null
+    };
+  },
+  computed: {
+    isAliasClass() {
+      let cssClass = '';
+      const domainObjectPath = [this.series.domainObject, ...this.path];
+      if (this.openmct.objects.isObjectPathToALink(this.series.domainObject, domainObjectPath)) {
+        cssClass = 'is-alias';
+      }
 
-            return cssClass;
-        },
-        getSeriesClass() {
-            let cssClass = '';
-            let type = this.openmct.types.get(this.series.domainObject.type);
-            if (type.definition.cssClass) {
-                cssClass = `${cssClass} ${type.definition.cssClass}`;
-            }
+      return cssClass;
+    },
+    getSeriesClass() {
+      let cssClass = '';
+      let type = this.openmct.types.get(this.series.domainObject.type);
+      if (type.definition.cssClass) {
+        cssClass = `${cssClass} ${type.definition.cssClass}`;
+      }
 
-            return cssClass;
-        },
-        expandedCssClass() {
-            if (this.expanded === true) {
-                return 'c-disclosure-triangle--expanded';
-            }
+      return cssClass;
+    },
+    expandedCssClass() {
+      if (this.expanded === true) {
+        return 'c-disclosure-triangle--expanded';
+      }
 
-            return '';
-        },
-        statusClass() {
-            return (this.status) ? `is-status--${this.status}` : '';
-        },
-        yKey() {
-            return this.series.get('yKey');
-        },
-        interpolate() {
-            return this.series.get('interpolate');
-        },
-        markerOptionsDisplayText() {
-            return this.series.markerOptionsDisplayText();
-        },
-        alarmMarkers() {
-            return this.series.get('alarmMarkers');
-        },
-        limitLines() {
-            return this.series.get('limitLines');
-        },
-        seriesHexColor() {
-            return this.series.get('color').asHexString();
-        }
+      return '';
+    },
+    statusClass() {
+      return this.status ? `is-status--${this.status}` : '';
+    },
+    yKey() {
+      return this.series.get('yKey');
+    },
+    interpolate() {
+      return this.series.get('interpolate');
     },
-    mounted() {
-        this.status = this.openmct.status.get(this.series.domainObject.identifier);
-        this.removeStatusListener = this.openmct.status.observe(this.series.domainObject.identifier, this.setStatus);
+    markerOptionsDisplayText() {
+      return this.series.markerOptionsDisplayText();
     },
-    beforeDestroy() {
-        if (this.removeStatusListener) {
-            this.removeStatusListener();
-        }
+    alarmMarkers() {
+      return this.series.get('alarmMarkers');
+    },
+    limitLines() {
+      return this.series.get('limitLines');
+    },
+    seriesHexColor() {
+      return this.series.get('color').asHexString();
+    }
+  },
+  created() {
+    this.status = this.openmct.status.get(this.series.domainObject.identifier);
+    this.removeStatusListener = this.openmct.status.observe(
+      this.series.domainObject.identifier,
+      this.setStatus
+    );
+  },
+  beforeUnmount() {
+    if (this.removeStatusListener) {
+      this.removeStatusListener();
+    }
+  },
+  methods: {
+    toggleExpanded() {
+      this.expanded = !this.expanded;
     },
-    methods: {
-        toggleExpanded() {
-            this.expanded = !this.expanded;
-        },
-        setStatus(status) {
-            this.status = status;
-        }
+    setStatus(status) {
+      this.status = status;
     }
+  }
 };
 </script>
diff --git a/src/plugins/plot/inspector/PlotsInspectorViewProvider.js b/src/plugins/plot/inspector/PlotsInspectorViewProvider.js
index 16b88412c5f..c5bd07f6a7b 100644
--- a/src/plugins/plot/inspector/PlotsInspectorViewProvider.js
+++ b/src/plugins/plot/inspector/PlotsInspectorViewProvider.js
@@ -1,56 +1,65 @@
+import mount from 'utils/mount';
 
-import PlotOptions from "./PlotOptions.vue";
-import Vue from 'vue';
+import PlotOptions from './PlotOptions.vue';
 
 export default function PlotsInspectorViewProvider(openmct) {
-    return {
-        key: 'plots-inspector',
-        name: 'Plots Inspector View',
-        canView: function (selection) {
-            if (selection.length === 0 || selection[0].length === 0) {
-                return false;
-            }
+  return {
+    key: 'plots-inspector',
+    name: 'Config',
+    canView: function (selection) {
+      if (selection.length === 0 || selection[0].length === 0) {
+        return false;
+      }
 
-            let object = selection[0][0].context.item;
+      let object = selection[0][0].context.item;
+      let parent = selection[0].length > 1 && selection[0][1].context.item;
 
-            return object
-                && object.type === 'telemetry.plot.overlay';
-        },
-        view: function (selection) {
-            let component;
-            let objectPath;
+      const isOverlayPlotObject = object && object.type === 'telemetry.plot.overlay';
+      const isParentStackedPlotObject = parent && parent.type === 'telemetry.plot.stacked';
 
-            if (selection.length) {
-                objectPath = selection[0].map((selectionItem) => {
-                    return selectionItem.context.item;
-                });
-            }
+      return isOverlayPlotObject || isParentStackedPlotObject;
+    },
+    view: function (selection) {
+      let _destroy = null;
+      let objectPath;
 
-            return {
-                show: function (element) {
-                    component = new Vue({
-                        el: element,
-                        components: {
-                            PlotOptions: PlotOptions
-                        },
-                        provide: {
-                            openmct,
-                            domainObject: selection[0][0].context.item,
-                            path: objectPath
-                        },
-                        template: '<plot-options></plot-options>'
-                    });
-                },
-                destroy: function () {
-                    if (component) {
-                        component.$destroy();
-                        component = undefined;
-                    }
-                }
-            };
+      if (selection.length) {
+        objectPath = selection[0].map((selectionItem) => {
+          return selectionItem.context.item;
+        });
+      }
+
+      return {
+        show: function (element) {
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                PlotOptions: PlotOptions
+              },
+              provide: {
+                openmct,
+                domainObject: selection[0][0].context.item,
+                path: objectPath
+              },
+              template: '<plot-options></plot-options>'
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
         },
         priority: function () {
-            return 1;
+          return openmct.priority.HIGH + 1;
+        },
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
         }
-    };
+      };
+    }
+  };
 }
diff --git a/src/plugins/plot/inspector/StackedPlotsInspectorViewProvider.js b/src/plugins/plot/inspector/StackedPlotsInspectorViewProvider.js
new file mode 100644
index 00000000000..878009723ee
--- /dev/null
+++ b/src/plugins/plot/inspector/StackedPlotsInspectorViewProvider.js
@@ -0,0 +1,63 @@
+import mount from 'utils/mount';
+
+import PlotOptions from './PlotOptions.vue';
+
+export default function StackedPlotsInspectorViewProvider(openmct) {
+  return {
+    key: 'stacked-plots-inspector',
+    name: 'Config',
+    canView: function (selection) {
+      if (selection.length === 0 || selection[0].length === 0) {
+        return false;
+      }
+
+      const object = selection[0][0].context.item;
+
+      const isStackedPlotObject = object && object.type === 'telemetry.plot.stacked';
+
+      return isStackedPlotObject;
+    },
+    view: function (selection) {
+      let _destroy = null;
+      let objectPath;
+
+      if (selection.length) {
+        objectPath = selection[0].map((selectionItem) => {
+          return selectionItem.context.item;
+        });
+      }
+
+      return {
+        show: function (element) {
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                PlotOptions: PlotOptions
+              },
+              provide: {
+                openmct,
+                domainObject: selection[0][0].context.item,
+                path: objectPath
+              },
+              template: '<plot-options></plot-options>'
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+        },
+        priority: function () {
+          return openmct.priority.HIGH + 1;
+        },
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
+        }
+      };
+    }
+  };
+}
diff --git a/src/plugins/plot/inspector/forms/LegendForm.vue b/src/plugins/plot/inspector/forms/LegendForm.vue
index e00d7987b78..8099c731db9 100644
--- a/src/plugins/plot/inspector/forms/LegendForm.vue
+++ b/src/plugins/plot/inspector/forms/LegendForm.vue
@@ -1,207 +1,285 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div>
-    <li class="grid-row">
-        <div class="grid-cell label"
-             title="The position of the legend relative to the plot display area."
-        >Position</div>
-        <div class="grid-cell value">
-            <select v-model="position"
-                    @change="updateForm('position')"
-            >
-                <option value="top">Top</option>
-                <option value="right">Right</option>
-                <option value="bottom">Bottom</option>
-                <option value="left">Left</option>
-            </select>
-        </div>
+  <div>
+    <li v-if="isStackedPlotObject" class="grid-row">
+      <div class="grid-cell label" title="Display legends per sub plot.">Show legend per plot</div>
+      <div class="grid-cell value">
+        <input
+          v-model="showLegendsForChildren"
+          aria-label="Show Legends For Children"
+          type="checkbox"
+          @change="updateForm('showLegendsForChildren')"
+        />
+      </div>
     </li>
-    <li class="grid-row">
-        <div class="grid-cell label"
-             title="Hide the legend when the plot is small"
-        >Hide when plot small</div>
-        <div class="grid-cell value"><input v-model="hideLegendWhenSmall"
-                                            type="checkbox"
-                                            @change="updateForm('hideLegendWhenSmall')"
-        ></div>
+    <li v-if="showLegendDetails" class="grid-row">
+      <div
+        class="grid-cell label"
+        title="The position of the legend relative to the plot display area."
+      >
+        Position
+      </div>
+      <div class="grid-cell value">
+        <select v-model="position" @change="updateForm('position')">
+          <option value="top">Top</option>
+          <option value="right">Right</option>
+          <option value="bottom">Bottom</option>
+          <option value="left">Left</option>
+        </select>
+      </div>
     </li>
-    <li class="grid-row">
-        <div class="grid-cell label"
-             title="Show the legend expanded by default"
-        >Expand by default</div>
-        <div class="grid-cell value"><input v-model="expandByDefault"
-                                            type="checkbox"
-                                            @change="updateForm('expandByDefault')"
-        ></div>
+    <li v-if="showLegendDetails" class="grid-row">
+      <div class="grid-cell label" title="Hide the legend when the plot is small">
+        Hide when plot small
+      </div>
+      <div class="grid-cell value">
+        <input
+          v-model="hideLegendWhenSmall"
+          type="checkbox"
+          @change="updateForm('hideLegendWhenSmall')"
+        />
+      </div>
     </li>
-    <li class="grid-row">
-        <div class="grid-cell label"
-             title="What to display in the legend when it's collapsed."
-        >When collapsed show</div>
-        <div class="grid-cell value">
-            <select v-model="valueToShowWhenCollapsed"
-                    @change="updateForm('valueToShowWhenCollapsed')"
-            >
-                <option value="none">Nothing</option>
-                <option value="nearestTimestamp">Nearest timestamp</option>
-                <option value="nearestValue">Nearest value</option>
-                <option value="min">Minimum value</option>
-                <option value="max">Maximum value</option>
-                <option value="units">Units</option>
-            </select>
-        </div>
+    <li v-if="showLegendDetails" class="grid-row">
+      <div class="grid-cell label" title="Show the legend expanded by default">
+        Expand by default
+      </div>
+      <div class="grid-cell value">
+        <input
+          v-model="expandByDefault"
+          aria-label="Expand By Default"
+          type="checkbox"
+          @change="updateForm('expandByDefault')"
+        />
+      </div>
     </li>
-    <li class="grid-row">
-        <div class="grid-cell label"
-             title="What to display in the legend when it's expanded."
-        >When expanded show</div>
-        <div class="grid-cell value">
-            <ul>
-                <li><input v-model="showTimestampWhenExpanded"
-                           type="checkbox"
-                           @change="updateForm('showTimestampWhenExpanded')"
-                > Nearest timestamp</li>
-                <li><input v-model="showValueWhenExpanded"
-                           type="checkbox"
-                           @change="updateForm('showValueWhenExpanded')"
-                > Nearest value</li>
-                <li><input v-model="showMinimumWhenExpanded"
-                           type="checkbox"
-                           @change="updateForm('showMinimumWhenExpanded')"
-                > Minimum value</li>
-                <li><input v-model="showMaximumWhenExpanded"
-                           type="checkbox"
-                           @change="updateForm('showMaximumWhenExpanded')"
-                > Maximum value</li>
-                <li><input v-model="showUnitsWhenExpanded"
-                           type="checkbox"
-                           @change="updateForm('showUnitsWhenExpanded')"
-                > Units</li>
-            </ul>
-
-        </div>
+    <li v-if="showLegendDetails" class="grid-row">
+      <div class="grid-cell label" title="What to display in the legend when it's collapsed.">
+        When collapsed show
+      </div>
+      <div class="grid-cell value">
+        <select v-model="valueToShowWhenCollapsed" @change="updateForm('valueToShowWhenCollapsed')">
+          <option value="none">Nothing</option>
+          <option value="nearestTimestamp">Nearest timestamp</option>
+          <option value="nearestValue">Nearest value</option>
+          <option value="min">Minimum value</option>
+          <option value="max">Maximum value</option>
+          <option value="unit">Unit</option>
+        </select>
+      </div>
+    </li>
+    <li v-if="showLegendDetails" class="grid-row">
+      <div class="grid-cell label" title="What to display in the legend when it's expanded.">
+        When expanded show
+      </div>
+      <div class="grid-cell value">
+        <ul>
+          <li>
+            <input
+              v-model="showTimestampWhenExpanded"
+              type="checkbox"
+              @change="updateForm('showTimestampWhenExpanded')"
+            />
+            Nearest timestamp
+          </li>
+          <li>
+            <input
+              v-model="showValueWhenExpanded"
+              type="checkbox"
+              @change="updateForm('showValueWhenExpanded')"
+            />
+            Nearest value
+          </li>
+          <li>
+            <input
+              v-model="showMinimumWhenExpanded"
+              type="checkbox"
+              @change="updateForm('showMinimumWhenExpanded')"
+            />
+            Minimum value
+          </li>
+          <li>
+            <input
+              v-model="showMaximumWhenExpanded"
+              type="checkbox"
+              @change="updateForm('showMaximumWhenExpanded')"
+            />
+            Maximum value
+          </li>
+          <li>
+            <input
+              v-model="showUnitsWhenExpanded"
+              type="checkbox"
+              @change="updateForm('showUnitsWhenExpanded')"
+            />
+            Unit
+          </li>
+        </ul>
+      </div>
     </li>
-</div>
+  </div>
 </template>
 <script>
-import {coerce, objectPath, validate} from "./formUtil";
-import _ from "lodash";
+import _ from 'lodash';
+
+import { coerce, objectPath, validate } from './formUtil.js';
 
 export default {
-    inject: ['openmct', 'domainObject'],
-    props: {
-        legend: {
-            type: Object,
-            default() {
-                return {};
-            }
-        }
-    },
-    data() {
-        return {
-            position: '',
-            hideLegendWhenSmall: '',
-            expandByDefault: '',
-            valueToShowWhenCollapsed: '',
-            showTimestampWhenExpanded: '',
-            showValueWhenExpanded: '',
-            showMinimumWhenExpanded: '',
-            showMaximumWhenExpanded: '',
-            showUnitsWhenExpanded: '',
-            validation: {}
-        };
-    },
-    mounted() {
-        this.initialize();
-        this.initFormValues();
+  inject: ['openmct', 'domainObject', 'path'],
+  props: {
+    legend: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      position: '',
+      hideLegendWhenSmall: '',
+      expandByDefault: '',
+      valueToShowWhenCollapsed: '',
+      showTimestampWhenExpanded: '',
+      showValueWhenExpanded: '',
+      showMinimumWhenExpanded: '',
+      showMaximumWhenExpanded: '',
+      showUnitsWhenExpanded: '',
+      showLegendsForChildren: '',
+      validation: {}
+    };
+  },
+  computed: {
+    isStackedPlotObject() {
+      return this.path.find(
+        (pathObject, pathObjIndex) =>
+          pathObjIndex === 0 && pathObject?.type === 'telemetry.plot.stacked'
+      );
     },
-    methods: {
-        initialize() {
-            this.fields = [
-                {
-                    modelProp: 'position',
-                    objectPath: 'configuration.legend.position'
-                },
-                {
-                    modelProp: 'hideLegendWhenSmall',
-                    coerce: Boolean,
-                    objectPath: 'configuration.legend.hideLegendWhenSmall'
-                },
-                {
-                    modelProp: 'expandByDefault',
-                    coerce: Boolean,
-                    objectPath: 'configuration.legend.expandByDefault'
-                },
-                {
-                    modelProp: 'valueToShowWhenCollapsed',
-                    objectPath: 'configuration.legend.valueToShowWhenCollapsed'
-                },
-                {
-                    modelProp: 'showValueWhenExpanded',
-                    coerce: Boolean,
-                    objectPath: 'configuration.legend.showValueWhenExpanded'
-                },
-                {
-                    modelProp: 'showTimestampWhenExpanded',
-                    coerce: Boolean,
-                    objectPath: 'configuration.legend.showTimestampWhenExpanded'
-                },
-                {
-                    modelProp: 'showMaximumWhenExpanded',
-                    coerce: Boolean,
-                    objectPath: 'configuration.legend.showMaximumWhenExpanded'
-                },
-                {
-                    modelProp: 'showMinimumWhenExpanded',
-                    coerce: Boolean,
-                    objectPath: 'configuration.legend.showMinimumWhenExpanded'
-                },
-                {
-                    modelProp: 'showUnitsWhenExpanded',
-                    coerce: Boolean,
-                    objectPath: 'configuration.legend.showUnitsWhenExpanded'
-                }
-            ];
+    showLegendDetails() {
+      return (
+        !this.isStackedPlotObject || (this.isStackedPlotObject && !this.showLegendsForChildren)
+      );
+    }
+  },
+  mounted() {
+    this.initialize();
+    this.initFormValues();
+  },
+  methods: {
+    initialize() {
+      this.fields = [
+        {
+          modelProp: 'position',
+          objectPath: 'configuration.legend.position'
+        },
+        {
+          modelProp: 'hideLegendWhenSmall',
+          coerce: Boolean,
+          objectPath: 'configuration.legend.hideLegendWhenSmall'
         },
-        initFormValues() {
-            this.position = this.legend.get('position');
-            this.hideLegendWhenSmall = this.legend.get('hideLegendWhenSmall');
-            this.expandByDefault = this.legend.get('expandByDefault');
-            this.valueToShowWhenCollapsed = this.legend.get('valueToShowWhenCollapsed');
-            this.showTimestampWhenExpanded = this.legend.get('showTimestampWhenExpanded');
-            this.showValueWhenExpanded = this.legend.get('showValueWhenExpanded');
-            this.showMinimumWhenExpanded = this.legend.get('showMinimumWhenExpanded');
-            this.showMaximumWhenExpanded = this.legend.get('showMaximumWhenExpanded');
-            this.showUnitsWhenExpanded = this.legend.get('showUnitsWhenExpanded');
+        {
+          modelProp: 'expandByDefault',
+          coerce: Boolean,
+          objectPath: 'configuration.legend.expandByDefault'
         },
-        updateForm(formKey) {
-            const newVal = this[formKey];
-            const oldVal = this.legend.get(formKey);
-            const formField = this.fields.find((field) => field.modelProp === formKey);
+        {
+          modelProp: 'valueToShowWhenCollapsed',
+          objectPath: 'configuration.legend.valueToShowWhenCollapsed'
+        },
+        {
+          modelProp: 'showValueWhenExpanded',
+          coerce: Boolean,
+          objectPath: 'configuration.legend.showValueWhenExpanded'
+        },
+        {
+          modelProp: 'showTimestampWhenExpanded',
+          coerce: Boolean,
+          objectPath: 'configuration.legend.showTimestampWhenExpanded'
+        },
+        {
+          modelProp: 'showMaximumWhenExpanded',
+          coerce: Boolean,
+          objectPath: 'configuration.legend.showMaximumWhenExpanded'
+        },
+        {
+          modelProp: 'showMinimumWhenExpanded',
+          coerce: Boolean,
+          objectPath: 'configuration.legend.showMinimumWhenExpanded'
+        },
+        {
+          modelProp: 'showUnitsWhenExpanded',
+          coerce: Boolean,
+          objectPath: 'configuration.legend.showUnitsWhenExpanded'
+        },
+        {
+          modelProp: 'showLegendsForChildren',
+          coerce: Boolean,
+          objectPath: 'configuration.legend.showLegendsForChildren'
+        }
+      ];
+    },
+    initFormValues() {
+      this.position = this.legend.get('position');
+      this.hideLegendWhenSmall = this.legend.get('hideLegendWhenSmall');
+      this.expandByDefault = this.legend.get('expandByDefault');
+      this.valueToShowWhenCollapsed = this.legend.get('valueToShowWhenCollapsed');
+      this.showTimestampWhenExpanded = this.legend.get('showTimestampWhenExpanded');
+      this.showValueWhenExpanded = this.legend.get('showValueWhenExpanded');
+      this.showMinimumWhenExpanded = this.legend.get('showMinimumWhenExpanded');
+      this.showMaximumWhenExpanded = this.legend.get('showMaximumWhenExpanded');
+      this.showUnitsWhenExpanded = this.legend.get('showUnitsWhenExpanded');
+      this.showLegendsForChildren = this.legend.get('showLegendsForChildren');
+    },
+    updateForm(formKey) {
+      const newVal = this[formKey];
+      const oldVal = this.legend.get(formKey);
+      const formField = this.fields.find((field) => field.modelProp === formKey);
 
-            const path = objectPath(formField.objectPath);
-            const validationResult = validate(newVal, this.legend, formField.validate);
-            if (validationResult === true) {
-                delete this.validation[formKey];
-            } else {
-                this.validation[formKey] = validationResult;
+      const path = objectPath(formField.objectPath);
+      const validationResult = validate(newVal, this.legend, formField.validate);
+      if (validationResult === true) {
+        delete this.validation[formKey];
+      } else {
+        this.validation[formKey] = validationResult;
 
-                return;
-            }
+        return;
+      }
 
-            if (!_.isEqual(coerce(newVal, formField.coerce), coerce(oldVal, formField.coerce))) {
-                this.legend.set(formKey, coerce(newVal, formField.coerce));
-                if (path) {
-                    this.openmct.objects.mutate(
-                        this.domainObject,
-                        path(this.domainObject, this.legend),
-                        coerce(newVal, formField.coerce)
-                    );
-                }
-            }
-        },
-        setStatus(status) {
-            this.status = status;
+      if (!_.isEqual(coerce(newVal, formField.coerce), coerce(oldVal, formField.coerce))) {
+        this.legend.set(formKey, coerce(newVal, formField.coerce));
+        if (path) {
+          this.openmct.objects.mutate(
+            this.domainObject,
+            path(this.domainObject, this.legend),
+            coerce(newVal, formField.coerce)
+          );
         }
+      }
+    },
+    setStatus(status) {
+      this.status = status;
     }
+  }
 };
 </script>
diff --git a/src/plugins/plot/inspector/forms/SeriesForm.vue b/src/plugins/plot/inspector/forms/SeriesForm.vue
index 5c36ae20a0b..d0a39e2d74e 100644
--- a/src/plugins/plot/inspector/forms/SeriesForm.vue
+++ b/src/plugins/plot/inspector/forms/SeriesForm.vue
@@ -1,364 +1,366 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<ul>
-    <li class="c-tree__item menus-to-left"
-        :class="isAliasCss"
-    >
-        <span class="c-disclosure-triangle is-enabled flex-elem"
-              :class="expandedCssClass"
-              @click="toggleExpanded"
-        >
-        </span>
-        <div :class="objectLabelCss">
-            <div class="c-object-label__type-icon"
-                 :class="[seriesCss]"
-            >
-                <span class="is-status__indicator"
-                      title="This item is missing or suspect"
-                ></span>
-            </div>
-            <div class="c-object-label__name">{{ series.domainObject.name }}</div>
+  <ul>
+    <li class="c-tree__item menus-to-left" :class="isAliasCss">
+      <span
+        class="c-disclosure-triangle is-enabled flex-elem"
+        :class="expandedCssClass"
+        @click="toggleExpanded"
+      >
+      </span>
+      <div :class="objectLabelCss">
+        <div class="c-object-label__type-icon" :class="[seriesCss]">
+          <span class="is-status__indicator" title="This item is missing or suspect"></span>
         </div>
+        <div class="c-object-label__name">{{ series.domainObject.name }}</div>
+      </div>
     </li>
-    <ul v-show="expanded"
-        class="grid-properties js-plot-options-edit-properties"
-    >
-        <li class="grid-row">
-            <!-- Value to be displayed -->
-            <div class="grid-cell label"
-                 title="The field to be plotted as a value for this series."
-            >Value</div>
-            <div class="grid-cell value">
-                <select v-model="yKey"
-                        @change="updateForm('yKey')"
-                >
-                    <option v-for="option in yKeyOptions"
-                            :key="option.value"
-                            :value="option.value"
-                            :selected="option.value == yKey"
-                    >
-                        {{ option.name }}
-                    </option>
-                </select>
-            </div>
-        </li>
-        <li class="grid-row">
-            <div class="grid-cell label"
-                 title="The rendering method to join lines for this series."
-            >Line Method</div>
-            <div class="grid-cell value">
-                <select v-model="interpolate"
-                        @change="updateForm('interpolate')"
-                >
-                    <option value="none">None</option>
-                    <option value="linear">Linear interpolate</option>
-                    <option value="stepAfter">Step after</option>
-                </select>
-            </div>
-        </li>
-        <li class="grid-row">
-            <div class="grid-cell label"
-                 title="Whether markers are displayed."
-            >Markers</div>
-            <div class="grid-cell value">
-                <input v-model="markers"
-                       type="checkbox"
-                       @change="updateForm('markers')"
-                >
-                <select
-                    v-show="markers"
-                    v-model="markerShape"
-                    @change="updateForm('markerShape')"
-                >
-                    <option
-                        v-for="option in markerShapeOptions"
-                        :key="option.value"
-                        :value="option.value"
-                        :selected="option.value == markerShape"
-                    >
-                        {{ option.name }}
-                    </option>
-                </select>
-            </div>
-        </li>
-        <li class="grid-row">
-            <div class="grid-cell label"
-                 title="Display markers visually denoting points in alarm."
-            >Alarm Markers</div>
-            <div class="grid-cell value">
-                <input v-model="alarmMarkers"
-                       type="checkbox"
-                       @change="updateForm('alarmMarkers')"
-                >
-            </div>
-        </li>
-        <li class="grid-row">
-            <div class="grid-cell label"
-                 title="Display limit lines"
-            >Limit lines</div>
-            <div class="grid-cell value">
-                <input v-model="limitLines"
-                       type="checkbox"
-                       @change="updateForm('limitLines')"
-                >
-            </div>
-        </li>
-        <li v-show="markers || alarmMarkers"
-            class="grid-row"
-        >
-            <div class="grid-cell label"
-                 title="The size of regular and alarm markers for this series."
-            >Marker Size:</div>
-            <div class="grid-cell value"><input v-model="markerSize"
-                                                class="c-input--flex"
-                                                type="text"
-                                                @change="updateForm('markerSize')"
-            ></div>
-        </li>
-        <li v-show="interpolate !== 'none' || markers"
-            class="grid-row"
-        >
-            <div class="grid-cell label"
-                 title="Manually set the plot line and marker color for this series."
-            >Color</div>
-            <div class="grid-cell value">
-                <div class="c-click-swatch c-click-swatch--menu"
-                     @click="toggleSwatch()"
-                >
-                    <span class="c-color-swatch"
-                          :style="{ background: seriesColorAsHex }"
-                    >
-                    </span>
-                </div>
-                <div class="c-palette c-palette--color">
-                    <div v-show="swatchActive"
-                         class="c-palette__items"
-                    >
-                        <div v-for="(group, index) in colorPalette"
-                             :key="index"
-                             class="u-contents"
-                        >
-                            <div v-for="(color, colorIndex) in group"
-                                 :key="colorIndex"
-                                 class="c-palette__item"
-                                 :class="{ 'selected': series.get('color').equalTo(color) }"
-                                 :style="{ background: color.asHexString() }"
-                                 @click="setColor(color)"
-                            >
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </li>
+    <ul v-show="expanded" class="grid-properties js-plot-options-edit-properties">
+      <li class="grid-row">
+        <!-- Value to be displayed -->
+        <div class="grid-cell label" title="The field to be plotted as a value for this series.">
+          Value
+        </div>
+        <div class="grid-cell value">
+          <select v-model="yKey" @change="updateForm('yKey')">
+            <option
+              v-for="option in yKeyOptions"
+              :key="option.value"
+              :value="option.value"
+              :selected="option.value == yKey"
+            >
+              {{ option.name }}
+            </option>
+          </select>
+        </div>
+      </li>
+      <li class="grid-row">
+        <div class="grid-cell label" title="The rendering method to join lines for this series.">
+          Line Method
+        </div>
+        <div class="grid-cell value">
+          <select v-model="interpolate" @change="updateForm('interpolate')">
+            <option value="none">None</option>
+            <option value="linear">Linear interpolate</option>
+            <option value="stepAfter">Step after</option>
+          </select>
+        </div>
+      </li>
+      <li class="grid-row">
+        <div class="grid-cell label" title="Whether markers are displayed.">Markers</div>
+        <div class="grid-cell value">
+          <input v-model="markers" type="checkbox" @change="updateForm('markers')" />
+          <select v-show="markers" v-model="markerShape" @change="updateForm('markerShape')">
+            <option
+              v-for="option in markerShapeOptions"
+              :key="option.value"
+              :value="option.value"
+              :selected="option.value == markerShape"
+            >
+              {{ option.name }}
+            </option>
+          </select>
+        </div>
+      </li>
+      <li class="grid-row">
+        <div class="grid-cell label" title="Display markers visually denoting points in alarm.">
+          Alarm Markers
+        </div>
+        <div class="grid-cell value">
+          <input v-model="alarmMarkers" type="checkbox" @change="updateForm('alarmMarkers')" />
+        </div>
+      </li>
+      <li class="grid-row">
+        <div id="limit-lines-checkbox" class="grid-cell label" title="Display limit lines">
+          Limit lines
+        </div>
+        <div class="grid-cell value">
+          <input
+            v-model="limitLines"
+            aria-labelledby="limit-lines-checkbox"
+            type="checkbox"
+            @change="updateForm('limitLines')"
+          />
+        </div>
+      </li>
+      <li v-show="markers || alarmMarkers" class="grid-row">
+        <div class="grid-cell label" title="The size of regular and alarm markers for this series.">
+          Marker Size:
+        </div>
+        <div class="grid-cell value">
+          <input
+            v-model="markerSize"
+            class="c-input--flex"
+            type="text"
+            @change="updateForm('markerSize')"
+          />
+        </div>
+      </li>
+      <li v-show="interpolate !== 'none' || markers" class="grid-row">
+        <ColorSwatch
+          :current-color="currentColor"
+          edit-title="Manually set the plot line and marker color for this series."
+          view-title="The plot line and marker color for this series."
+          short-label="Color"
+          @color-set="setColor"
+        />
+      </li>
     </ul>
-</ul>
+  </ul>
 </template>
 
 <script>
-import { MARKER_SHAPES } from "../../draw/MarkerShapes";
-import { objectPath, validate, coerce } from "./formUtil";
 import _ from 'lodash';
 
+import ColorSwatch from '@/ui/color/ColorSwatch.vue';
+
+import { MARKER_SHAPES } from '../../draw/MarkerShapes.js';
+import { coerce, objectPath, validate } from './formUtil.js';
+
 export default {
-    inject: ['openmct', 'domainObject', 'path'],
-    props: {
-        series: {
-            type: Object,
-            default() {
-                return {};
-            }
-        }
+  components: {
+    ColorSwatch
+  },
+  inject: ['openmct', 'domainObject', 'path'],
+  props: {
+    series: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  emits: ['series-updated'],
+  data() {
+    return {
+      expanded: false,
+      markerShapeOptions: [],
+      yKey: this.series.get('yKey'),
+      yKeyOptions: [],
+      interpolate: this.series.get('interpolate'),
+      markers: this.series.get('markers'),
+      markerShape: this.series.get('markerShape'),
+      alarmMarkers: this.series.get('alarmMarkers'),
+      limitLines: this.series.get('limitLines'),
+      markerSize: this.series.get('markerSize'),
+      validation: {},
+      swatchActive: false,
+      status: null
+    };
+  },
+  computed: {
+    colorPalette() {
+      return this.series.collection.palette.groups();
     },
-    data() {
-        return {
-            expanded: false,
-            markerShapeOptions: [],
-            yKey: this.series.get('yKey'),
-            yKeyOptions: [],
-            interpolate: this.series.get('interpolate'),
-            markers: this.series.get('markers'),
-            markerShape: this.series.get('markerShape'),
-            alarmMarkers: this.series.get('alarmMarkers'),
-            limitLines: this.series.get('limitLines'),
-            markerSize: this.series.get('markerSize'),
-            validation: {},
-            swatchActive: false
-        };
+    objectLabelCss() {
+      return this.status ? `c-object-label is-status--${this.status}'` : 'c-object-label';
     },
-    computed: {
-        colorPalette() {
-            return this.series.collection.palette.groups();
+    seriesCss() {
+      let type = this.openmct.types.get(this.series.domainObject.type);
+
+      return type.definition.cssClass
+        ? `c-object-label__type-icon ${type.definition.cssClass}`
+        : `c-object-label__type-icon`;
+    },
+    isAliasCss() {
+      let cssClass = '';
+      const domainObjectPath = [this.series.domainObject, ...this.path];
+      if (this.openmct.objects.isObjectPathToALink(this.series.domainObject, domainObjectPath)) {
+        cssClass = 'is-alias';
+      }
+
+      return cssClass;
+    },
+    expandedCssClass() {
+      return this.expanded ? 'c-disclosure-triangle--expanded' : '';
+    },
+    currentColor() {
+      return this.series.get('color').asHexString();
+    }
+  },
+  created() {
+    this.initialize();
+
+    this.status = this.openmct.status.get(this.series.domainObject.identifier);
+    this.removeStatusListener = this.openmct.status.observe(
+      this.series.domainObject.identifier,
+      this.setStatus
+    );
+  },
+  beforeUnmount() {
+    if (this.removeStatusListener) {
+      this.removeStatusListener();
+    }
+  },
+  methods: {
+    initialize() {
+      this.fields = [
+        {
+          modelProp: 'yKey',
+          objectPath: this.dynamicPathForKey('yKey')
         },
-        objectLabelCss() {
-            return this.status ? `c-object-label is-status--${this.status}'` : 'c-object-label';
+        {
+          modelProp: 'interpolate',
+          objectPath: this.dynamicPathForKey('interpolate')
         },
-        seriesCss() {
-            let type = this.openmct.types.get(this.series.domainObject.type);
-
-            return type.definition.cssClass ? `c-object-label__type-icon ${type.definition.cssClass}` : `c-object-label__type-icon`;
+        {
+          modelProp: 'markers',
+          objectPath: this.dynamicPathForKey('markers')
         },
-        isAliasCss() {
-            let cssClass = '';
-            const domainObjectPath = [this.series.domainObject, ...this.path];
-            if (this.openmct.objects.isObjectPathToALink(this.series.domainObject, domainObjectPath)) {
-                cssClass = 'is-alias';
-            }
-
-            return cssClass;
+        {
+          modelProp: 'markerShape',
+          objectPath: this.dynamicPathForKey('markerShape')
+        },
+        {
+          modelProp: 'markerSize',
+          coerce: Number,
+          objectPath: this.dynamicPathForKey('markerSize')
         },
-        expandedCssClass() {
-            return this.expanded ? 'c-disclosure-triangle--expanded' : '';
+        {
+          modelProp: 'alarmMarkers',
+          coerce: Boolean,
+          objectPath: this.dynamicPathForKey('alarmMarkers')
         },
-        seriesColorAsHex() {
-            return this.series.get('color').asHexString();
+        {
+          modelProp: 'limitLines',
+          coerce: Boolean,
+          objectPath: this.dynamicPathForKey('limitLines')
         }
-    },
-    mounted() {
-        this.initialize();
+      ];
 
-        this.status = this.openmct.status.get(this.series.domainObject.identifier);
-        this.removeStatusListener = this.openmct.status.observe(this.series.domainObject.identifier, this.setStatus);
+      const metadata = this.series.metadata;
+      this.yKeyOptions = metadata.valuesForHints(['range']).map(function (o) {
+        return {
+          name: o.key,
+          value: o.key
+        };
+      });
+      this.markerShapeOptions = Object.entries(MARKER_SHAPES).map(([key, obj]) => {
+        return {
+          name: obj.label,
+          value: key
+        };
+      });
     },
-    beforeDestroy() {
-        if (this.removeStatusListener) {
-            this.removeStatusListener();
-        }
+    dynamicPathForKey(key) {
+      return function (object, model) {
+        const modelIdentifier = model.get('identifier');
+        const index = object.configuration.series.findIndex((s) => {
+          return _.isEqual(s.identifier, modelIdentifier);
+        });
+
+        return 'configuration.series[' + index + '].' + key;
+      };
     },
-    methods: {
-        initialize: function () {
-            this.fields = [
-                {
-                    modelProp: 'yKey',
-                    objectPath: this.dynamicPathForKey('yKey')
-                },
-                {
-                    modelProp: 'interpolate',
-                    objectPath: this.dynamicPathForKey('interpolate')
-                },
-                {
-                    modelProp: 'markers',
-                    objectPath: this.dynamicPathForKey('markers')
-                },
-                {
-                    modelProp: 'markerShape',
-                    objectPath: this.dynamicPathForKey('markerShape')
-                },
-                {
-                    modelProp: 'markerSize',
-                    coerce: Number,
-                    objectPath: this.dynamicPathForKey('markerSize')
-                },
-                {
-                    modelProp: 'alarmMarkers',
-                    coerce: Boolean,
-                    objectPath: this.dynamicPathForKey('alarmMarkers')
-                },
-                {
-                    modelProp: 'limitLines',
-                    coerce: Boolean,
-                    objectPath: this.dynamicPathForKey('limitLines')
-                }
-            ];
+    /**
+     * Set the color for the current plot series.  If the new color was
+     * already assigned to a different plot series, then swap the colors.
+     */
+    setColor: function (color) {
+      const oldColor = this.series.get('color');
+      const otherSeriesWithColor = this.series.collection.filter(function (s) {
+        return s.get('color') === color;
+      })[0];
 
-            const metadata = this.series.metadata;
-            this.yKeyOptions = metadata
-                .valuesForHints(['range'])
-                .map(function (o) {
-                    return {
-                        name: o.key,
-                        value: o.key
-                    };
-                });
-            this.markerShapeOptions = Object.entries(MARKER_SHAPES)
-                .map(([key, obj]) => {
-                    return {
-                        name: obj.label,
-                        value: key
-                    };
-                });
-        },
-        dynamicPathForKey(key) {
-            return function (object, model) {
-                const modelIdentifier = model.get('identifier');
-                const index = object.configuration.series.findIndex(s => {
-                    return _.isEqual(s.identifier, modelIdentifier);
-                });
+      this.series.set('color', color);
 
-                return 'configuration.series[' + index + '].' + key;
-            };
-        },
-        /**
-       * Set the color for the current plot series.  If the new color was
-       * already assigned to a different plot series, then swap the colors.
-       */
-        setColor: function (color) {
-            const oldColor = this.series.get('color');
-            const otherSeriesWithColor = this.series.collection.filter(function (s) {
-                return s.get('color') === color;
-            })[0];
+      if (!this.domainObject.configuration || !this.domainObject.configuration.series) {
+        this.$emit('series-updated', {
+          identifier: this.domainObject.identifier,
+          path: `series.color`,
+          value: color.asHexString()
+        });
+      } else {
+        const getPath = this.dynamicPathForKey('color');
+        const seriesColorPath = getPath(this.domainObject, this.series);
 
-            this.series.set('color', color);
+        this.openmct.objects.mutate(this.domainObject, seriesColorPath, color.asHexString());
+      }
 
-            const getPath = this.dynamicPathForKey('color');
-            const seriesColorPath = getPath(this.domainObject, this.series);
+      if (otherSeriesWithColor) {
+        otherSeriesWithColor.set('color', oldColor);
 
-            this.openmct.objects.mutate(
-                this.domainObject,
-                seriesColorPath,
-                color.asHexString()
-            );
+        if (!this.domainObject.configuration || !this.domainObject.configuration.series) {
+          this.$emit('series-updated', {
+            identifier: this.domainObject.identifier,
+            path: `series.color`,
+            value: oldColor.asHexString()
+          });
+        } else {
+          const getPath = this.dynamicPathForKey('color');
+          const otherSeriesColorPath = getPath(this.domainObject, otherSeriesWithColor);
 
-            if (otherSeriesWithColor) {
-                otherSeriesWithColor.set('color', oldColor);
-
-                const otherSeriesColorPath = getPath(
-                    this.domainObject,
-                    otherSeriesWithColor
-                );
-
-                this.openmct.objects.mutate(
-                    this.domainObject,
-                    otherSeriesColorPath,
-                    oldColor.asHexString()
-                );
-            }
-        },
-        toggleExpanded() {
-            this.expanded = !this.expanded;
-        },
-        updateForm(formKey) {
-            const newVal = this[formKey];
-            const oldVal = this.series.get(formKey);
-            const formField = this.fields.find((field) => field.modelProp === formKey);
+          this.openmct.objects.mutate(
+            this.domainObject,
+            otherSeriesColorPath,
+            oldColor.asHexString()
+          );
+        }
+      }
+    },
+    toggleExpanded() {
+      this.expanded = !this.expanded;
+    },
+    updateForm(formKey) {
+      const newVal = this[formKey];
+      const oldVal = this.series.get(formKey);
+      const formField = this.fields.find((field) => field.modelProp === formKey);
 
-            const path = objectPath(formField.objectPath);
-            const validationResult = validate(newVal, this.series, formField.validate);
-            if (validationResult === true) {
-                delete this.validation[formKey];
-            } else {
-                this.validation[formKey] = validationResult;
+      const path = objectPath(formField.objectPath);
+      const validationResult = validate(newVal, this.series, formField.validate);
+      if (validationResult === true) {
+        delete this.validation[formKey];
+      } else {
+        this.validation[formKey] = validationResult;
 
-                return;
-            }
+        return;
+      }
 
-            if (!_.isEqual(coerce(newVal, formField.coerce), coerce(oldVal, formField.coerce))) {
-                this.series.set(formKey, coerce(newVal, formField.coerce));
-                if (path) {
-                    this.openmct.objects.mutate(
-                        this.domainObject,
-                        path(this.domainObject, this.series),
-                        coerce(newVal, formField.coerce)
-                    );
-                }
-            }
-        },
-        setStatus(status) {
-            this.status = status;
-        },
-        toggleSwatch() {
-            this.swatchActive = !this.swatchActive;
+      if (!_.isEqual(coerce(newVal, formField.coerce), coerce(oldVal, formField.coerce))) {
+        this.series.set(formKey, coerce(newVal, formField.coerce));
+        if (path) {
+          if (!this.domainObject.configuration || !this.domainObject.configuration.series) {
+            this.$emit('series-updated', {
+              identifier: this.domainObject.identifier,
+              path: `series.${formKey}`,
+              value: coerce(newVal, formField.coerce)
+            });
+          } else {
+            this.openmct.objects.mutate(
+              this.domainObject,
+              path(this.domainObject, this.series),
+              coerce(newVal, formField.coerce)
+            );
+          }
         }
+      }
+    },
+    setStatus(status) {
+      this.status = status;
+    },
+    toggleSwatch() {
+      this.swatchActive = !this.swatchActive;
     }
+  }
 };
-
 </script>
diff --git a/src/plugins/plot/inspector/forms/YAxisForm.vue b/src/plugins/plot/inspector/forms/YAxisForm.vue
index c96129c10ec..de6c2b88c7f 100644
--- a/src/plugins/plot/inspector/forms/YAxisForm.vue
+++ b/src/plugins/plot/inspector/forms/YAxisForm.vue
@@ -1,229 +1,345 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div>
-    <ul class="l-inspector-part">
-        <h2>Y Axis</h2>
-        <li class="grid-row">
-            <div class="grid-cell label"
-                 title="Manually override how the Y axis is labeled."
-            >Label</div>
-            <div class="grid-cell value"><input v-model="label"
-                                                class="c-input--flex"
-                                                type="text"
-                                                @change="updateForm('label')"
-            ></div>
-        </li>
-    </ul>
-    <ul class="l-inspector-part">
-        <h2>Y Axis Scaling</h2>
-        <li class="grid-row">
-            <div class="grid-cell label"
-                 title="Automatically scale the Y axis to keep all values in view."
-            >Auto scale</div>
-            <div class="grid-cell value"><input v-model="autoscale"
-                                                type="checkbox"
-                                                @change="updateForm('autoscale')"
-            ></div>
-        </li>
-        <li v-show="autoscale"
-            class="grid-row"
-        >
-            <div class="grid-cell label"
-                 title="Percentage of padding above and below plotted min and max values. 0.1, 1.0, etc."
-            >
-                Padding</div>
-            <div class="grid-cell value">
-                <input v-model="autoscalePadding"
-                       class="c-input--flex"
-                       type="text"
-                       @change="updateForm('autoscalePadding')"
-                >
-            </div>
-        </li>
-    </ul>
-    <ul v-show="!autoscale"
-        class="l-inspector-part"
+  <div v-if="loaded">
+    <ul
+      class="l-inspector-part"
+      :aria-label="id > 1 ? `Y Axis ${id} Properties` : 'Y Axis Properties'"
     >
-        <div v-show="!autoscale && validation.range"
-             class="grid-span-all form-error"
+      <h2>Y Axis {{ id > 1 ? id : '' }}</h2>
+      <li class="grid-row">
+        <div class="grid-cell label" title="Manually override how the Y axis is labeled.">
+          Label
+        </div>
+        <div class="grid-cell value">
+          <input v-model="label" class="c-input--flex" type="text" @change="updateForm('label')" />
+        </div>
+      </li>
+      <li class="grid-row">
+        <div id="log-mode-checkbox" class="grid-cell label" title="Enable log mode.">Log mode</div>
+        <div class="grid-cell value">
+          <!-- eslint-disable-next-line vue/html-self-closing -->
+          <input
+            v-model="logMode"
+            class="js-log-mode-input"
+            aria-labelledby="log-mode-checkbox"
+            type="checkbox"
+            @change="updateForm('logMode')"
+          />
+        </div>
+      </li>
+      <li class="grid-row">
+        <div
+          id="autoscale-checkbox"
+          class="grid-cell label"
+          title="Automatically scale the Y axis to keep all values in view."
+        >
+          Auto scale
+        </div>
+        <div class="grid-cell value">
+          <input
+            v-model="autoscale"
+            type="checkbox"
+            aria-labelledby="autoscale-checkbox"
+            @change="updateForm('autoscale')"
+          />
+        </div>
+      </li>
+      <li v-show="autoscale" class="grid-row">
+        <div
+          class="grid-cell label"
+          title="Percentage of padding above and below plotted min and max values. 0.1, 1.0, etc."
         >
-            {{ validation.range }}
+          Padding
         </div>
-        <li class="grid-row force-border">
-            <div class="grid-cell label"
-                 title="Minimum Y axis value."
-            >Minimum Value</div>
-            <div class="grid-cell value">
-                <input v-model="rangeMin"
-                       class="c-input--flex"
-                       type="number"
-                       @change="updateForm('range')"
-                >
-            </div>
-        </li>
-        <li class="grid-row">
-            <div class="grid-cell label"
-                 title="Maximum Y axis value."
-            >Maximum Value</div>
-            <div class="grid-cell value"><input v-model="rangeMax"
-                                                class="c-input--flex"
-                                                type="number"
-                                                @change="updateForm('range')"
-            ></div>
-        </li>
+        <div class="grid-cell value">
+          <input
+            v-model="autoscalePadding"
+            class="c-input--flex"
+            type="text"
+            @change="updateForm('autoscalePadding')"
+          />
+        </div>
+      </li>
     </ul>
-</div>
+    <ul v-show="!autoscale" class="l-inspector-part">
+      <div v-show="!autoscale && validationErrors.range" class="grid-span-all form-error">
+        {{ validationErrors.range }}
+      </div>
+      <li class="grid-row force-border">
+        <div class="grid-cell label" title="Minimum Y axis value.">Minimum Value</div>
+        <div class="grid-cell value">
+          <input
+            v-model.lazy="rangeMin"
+            class="c-input--flex"
+            type="number"
+            @change="updateForm('range')"
+          />
+        </div>
+      </li>
+      <li class="grid-row">
+        <div class="grid-cell label" title="Maximum Y axis value.">Maximum Value</div>
+        <div class="grid-cell value">
+          <input
+            v-model.lazy="rangeMax"
+            class="c-input--flex"
+            type="number"
+            @change="updateForm('range')"
+          />
+        </div>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script>
-import { objectPath, validate, coerce } from "./formUtil";
-import _ from "lodash";
+import _ from 'lodash';
+
+import configStore from '../../configuration/ConfigStore.js';
+import eventHelpers from '../../lib/eventHelpers.js';
+import { objectPath } from './formUtil.js';
 
 export default {
-    inject: ['openmct', 'domainObject'],
-    props: {
-        yAxis: {
-            type: Object,
-            default() {
-                return {};
-            }
+  inject: ['openmct', 'domainObject'],
+  props: {
+    id: {
+      type: Number,
+      required: true
+    }
+  },
+  emits: ['series-updated'],
+  data() {
+    return {
+      yAxis: null,
+      label: '',
+      autoscale: '',
+      logMode: false,
+      autoscalePadding: '',
+      rangeMin: '',
+      rangeMax: '',
+      validationErrors: {},
+      loaded: false
+    };
+  },
+  beforeUnmount() {
+    if (this.autoscale === false && this.validationErrors.range) {
+      this.autoscale = true;
+      this.updateForm('autoscale');
+    }
+  },
+  mounted() {
+    eventHelpers.extend(this);
+    this.getConfig();
+    this.loaded = true;
+    this.initFields();
+    this.initFormValues();
+  },
+  methods: {
+    getConfig() {
+      const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+      const config = configStore.get(configId);
+      if (config) {
+        const mainYAxisId = config.yAxis.id;
+        this.isAdditionalYAxis = this.id !== mainYAxisId;
+        if (this.isAdditionalYAxis) {
+          this.additionalYAxes = config.additionalYAxes;
+          this.yAxis = config.additionalYAxes.find((yAxis) => yAxis.id === this.id);
+        } else {
+          this.yAxis = config.yAxis;
         }
+      }
     },
-    data() {
-        return {
-            label: '',
-            autoscale: '',
-            autoscalePadding: '',
-            rangeMin: '',
-            rangeMax: '',
-            validation: {}
-        };
-    },
-    mounted() {
-        this.initialize();
-        this.initFormValues();
-    },
-    methods: {
-        initialize: function () {
-            this.fields = [
-                {
-                    modelProp: 'label',
-                    objectPath: 'configuration.yAxis.label'
-                },
-                {
-                    modelProp: 'autoscale',
-                    coerce: Boolean,
-                    objectPath: 'configuration.yAxis.autoscale'
-                },
-                {
-                    modelProp: 'autoscalePadding',
-                    coerce: Number,
-                    objectPath: 'configuration.yAxis.autoscalePadding'
-                },
-                {
-                    modelProp: 'range',
-                    objectPath: 'configuration.yAxis.range',
-                    coerce: function coerceRange(range) {
-                        if (!range) {
-                            return {
-                                min: 0,
-                                max: 0
-                            };
-                        }
-
-                        const newRange = {};
-                        if (typeof range.min !== 'undefined' && range.min !== null) {
-                            newRange.min = Number(range.min);
-                        }
-
-                        if (typeof range.max !== 'undefined' && range.max !== null) {
-                            newRange.max = Number(range.max);
-                        }
-
-                        return newRange;
-                    },
-                    validate: function validateRange(range, model) {
-                        if (!range) {
-                            return 'Need range';
-                        }
-
-                        if (range.min === '' || range.min === null || typeof range.min === 'undefined') {
-                            return 'Must specify Minimum';
-                        }
-
-                        if (range.max === '' || range.max === null || typeof range.max === 'undefined') {
-                            return 'Must specify Maximum';
-                        }
-
-                        if (Number.isNaN(Number(range.min))) {
-                            return 'Minimum must be a number.';
-                        }
-
-                        if (Number.isNaN(Number(range.max))) {
-                            return 'Maximum must be a number.';
-                        }
-
-                        if (Number(range.min) > Number(range.max)) {
-                            return 'Minimum must be less than Maximum.';
-                        }
-
-                        if (model.get('autoscale')) {
-                            return false;
-                        }
-
-                        return true;
-                    }
-                }
-            ];
+    initFields() {
+      const prefix = `configuration.${this.getPrefix()}`;
+      this.fields = {
+        label: {
+          objectPath: `${prefix}.label`
+        },
+        autoscale: {
+          coerce: Boolean,
+          objectPath: `${prefix}.autoscale`
+        },
+        autoscalePadding: {
+          coerce: Number,
+          objectPath: `${prefix}.autoscalePadding`
+        },
+        logMode: {
+          coerce: Boolean,
+          objectPath: `${prefix}.logMode`
         },
-        initFormValues() {
-            this.label = this.yAxis.get('label');
-            this.autoscale = this.yAxis.get('autoscale');
-            this.autoscalePadding = this.yAxis.get('autoscalePadding');
-            const range = this.yAxis.get('range');
+        range: {
+          objectPath: `${prefix}.range`,
+          coerce: function coerceRange(range) {
+            const newRange = {};
+
+            if (range && typeof range.min !== 'undefined' && range.min !== null) {
+              newRange.min = Number(range.min);
+            }
+
+            if (range && typeof range.max !== 'undefined' && range.max !== null) {
+              newRange.max = Number(range.max);
+            }
+
+            return newRange;
+          },
+          validate: function validateRange(range, model) {
             if (!range) {
-                this.rangeMin = undefined;
-                this.rangeMax = undefined;
-            } else {
-                this.rangeMin = range.min;
-                this.rangeMax = range.max;
+              return 'Need range';
             }
-        },
-        updateForm(formKey) {
-            let newVal;
-            if (formKey === 'range') {
-                newVal = {
-                    min: this.rangeMin,
-                    max: this.rangeMax
-                };
-            } else {
-                newVal = this[formKey];
+
+            if (range.min === '' || range.min === null || typeof range.min === 'undefined') {
+              return 'Must specify Minimum';
             }
 
-            const oldVal = this.yAxis.get(formKey);
-            const formField = this.fields.find((field) => field.modelProp === formKey);
+            if (range.max === '' || range.max === null || typeof range.max === 'undefined') {
+              return 'Must specify Maximum';
+            }
 
-            const path = objectPath(formField.objectPath);
-            const validationResult = validate(newVal, this.yAxis, formField.validate);
-            if (validationResult === true) {
-                delete this.validation[formKey];
-            } else {
-                this.validation[formKey] = validationResult;
+            if (Number.isNaN(Number(range.min))) {
+              return 'Minimum must be a number.';
+            }
 
-                return;
+            if (Number.isNaN(Number(range.max))) {
+              return 'Maximum must be a number.';
             }
 
-            if (!_.isEqual(coerce(newVal, formField.coerce), coerce(oldVal, formField.coerce))) {
-                this.yAxis.set(formKey, coerce(newVal, formField.coerce));
-                if (path) {
-                    this.openmct.objects.mutate(
-                        this.domainObject,
-                        path(this.domainObject, this.yAxis),
-                        coerce(newVal, formField.coerce)
-                    );
-                }
+            if (Number(range.min) > Number(range.max)) {
+              return 'Minimum must be less than Maximum.';
             }
+          }
+        }
+      };
+    },
+    initFormValues() {
+      this.label = this.yAxis.get('label');
+      this.autoscale = this.yAxis.get('autoscale');
+      this.logMode = this.yAxis.get('logMode');
+      this.autoscalePadding = this.yAxis.get('autoscalePadding');
+      const range = this.yAxis.get('range');
+      if (range && range.min !== undefined && range.max !== undefined) {
+        this.rangeMin = range.min;
+        this.rangeMax = range.max;
+      }
+    },
+    getPrefix() {
+      let prefix = 'yAxis';
+      if (this.isAdditionalYAxis) {
+        let index = -1;
+        if (this.domainObject?.configuration?.additionalYAxes) {
+          index = this.domainObject?.configuration?.additionalYAxes.findIndex((yAxis) => {
+            return yAxis.id === this.id;
+          });
         }
+
+        if (index < 0) {
+          index = 0;
+        }
+
+        prefix = `additionalYAxes[${index}]`;
+      }
+
+      return prefix;
+    },
+    updateForm(formKey) {
+      let newVal;
+      if (formKey === 'range') {
+        newVal = {
+          min: this.rangeMin,
+          max: this.rangeMax
+        };
+      } else {
+        newVal = this[formKey];
+      }
+
+      let oldVal = this.yAxis.get(formKey);
+      const formField = this.fields[formKey];
+
+      const validationError = formField.validate?.(newVal, this.yAxis);
+      this.validationErrors[formKey] = validationError;
+      if (validationError) {
+        return;
+      }
+
+      newVal = formField.coerce?.(newVal) ?? newVal;
+      oldVal = formField.coerce?.(oldVal) ?? oldVal;
+
+      const path = objectPath(formField.objectPath);
+      if (!_.isEqual(newVal, oldVal)) {
+        // We mutate the model for the plots first PlotConfigurationModel - this triggers changes that affects the plot behavior
+        this.yAxis.set(formKey, newVal);
+        // Then we mutate the domain object configuration to persist the settings
+        if (path) {
+          if (this.isAdditionalYAxis) {
+            if (this.domainObject.configuration && this.domainObject.configuration.series) {
+              //update the id
+              this.openmct.objects.mutate(
+                this.domainObject,
+                `configuration.${this.getPrefix()}.id`,
+                this.id
+              );
+              //update the yAxes values
+              this.openmct.objects.mutate(
+                this.domainObject,
+                path(this.domainObject, this.yAxis),
+                newVal
+              );
+            } else {
+              this.$emit('series-updated', {
+                identifier: this.domainObject.identifier,
+                path: `${this.getPrefix()}.${formKey}`,
+                id: this.id,
+                value: newVal
+              });
+            }
+          } else {
+            if (this.domainObject.configuration && this.domainObject.configuration.series) {
+              this.openmct.objects.mutate(
+                this.domainObject,
+                path(this.domainObject, this.yAxis),
+                newVal
+              );
+            } else {
+              this.$emit('series-updated', {
+                identifier: this.domainObject.identifier,
+                path: `${this.getPrefix()}.${formKey}`,
+                value: newVal
+              });
+            }
+          }
+
+          //If autoscale is turned off, we must know what the user defined min and max ranges are
+          if (formKey === 'autoscale' && this.autoscale === false) {
+            const rangeFormField = this.fields.range;
+            this.validationErrors.range = rangeFormField.validate?.(
+              {
+                min: this.rangeMin,
+                max: this.rangeMax
+              },
+              this.yAxis
+            );
+          }
+        }
+      }
     }
+  }
 };
-
 </script>
diff --git a/src/plugins/plot/inspector/forms/formUtil.js b/src/plugins/plot/inspector/forms/formUtil.js
index 9231fa5c6b5..144ae45648e 100644
--- a/src/plugins/plot/inspector/forms/formUtil.js
+++ b/src/plugins/plot/inspector/forms/formUtil.js
@@ -1,29 +1,19 @@
 export function coerce(value, coerceFunc) {
-    if (coerceFunc) {
-        return coerceFunc(value);
-    }
+  if (coerceFunc) {
+    return coerceFunc(value);
+  }
 
-    return value;
+  return value;
 }
 
 export function validate(value, model, validateFunc) {
-    if (validateFunc) {
-        return validateFunc(value, model);
-    }
+  if (validateFunc) {
+    return validateFunc(value, model);
+  }
 
-    return true;
+  return true;
 }
 
 export function objectPath(path) {
-    if (path) {
-        if (typeof path !== "function") {
-            const staticObjectPath = path;
-
-            return function (object, model) {
-                return staticObjectPath;
-            };
-        }
-
-        return path;
-    }
+  return path && typeof path !== 'function' ? () => path : path;
 }
diff --git a/src/plugins/plot/legend/PlotLegend.vue b/src/plugins/plot/legend/PlotLegend.vue
index 2189f23c646..9eaeeceab88 100644
--- a/src/plugins/plot/legend/PlotLegend.vue
+++ b/src/plugins/plot/legend/PlotLegend.vue
@@ -1,5 +1,5 @@
 <!--
- Open MCT, Copyright (c) 2014-2021, United States Government
+ Open MCT, Copyright (c) 2014-2024, United States Government
  as represented by the Administrator of the National Aeronautics and Space
  Administration. All rights reserved.
 
@@ -20,152 +20,230 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-<div class="c-plot-legend gl-plot-legend"
-     :class="{
-         'hover-on-plot': !!highlights.length,
-         'is-legend-hidden': isLegendHidden
-     }"
->
-    <div class="c-plot-legend__view-control gl-plot-legend__view-control c-disclosure-triangle is-enabled"
-         :class="{ 'c-disclosure-triangle--expanded': isLegendExpanded }"
-         @click="expandLegend"
-    >
-    </div>
-
-    <div class="c-plot-legend__wrapper"
-         :class="{ 'is-cursor-locked': cursorLocked }"
-    >
+  <div
+    class="c-plot-legend gl-plot-legend"
+    :class="{
+      'hover-on-plot': !!highlights.length,
+      'is-legend-hidden': isLegendHidden
+    }"
+  >
+    <div
+      class="c-plot-legend__view-control gl-plot-legend__view-control c-disclosure-triangle is-enabled"
+      :class="{ 'c-disclosure-triangle--expanded': isLegendExpanded }"
+      @click="toggleLegend"
+    ></div>
 
-        <!-- COLLAPSED PLOT LEGEND -->
-        <div class="plot-wrapper-collapsed-legend"
-             :class="{'is-cursor-locked': cursorLocked }"
-        >
-            <div class="c-state-indicator__alert-cursor-lock icon-cursor-lock"
-                 title="Cursor is point locked. Click anywhere in the plot to unlock."
-            ></div>
-            <plot-legend-item-collapsed v-for="seriesObject in series"
-                                        :key="seriesObject.keyString"
-                                        :highlights="highlights"
-                                        :value-to-show-when-collapsed="legend.get('valueToShowWhenCollapsed')"
-                                        :series-object="seriesObject"
-                                        @legendHoverChanged="legendHoverChanged"
-            />
-        </div>
-        <!-- EXPANDED PLOT LEGEND -->
-        <div class="plot-wrapper-expanded-legend"
-             :class="{'is-cursor-locked': cursorLocked }"
+    <div class="c-plot-legend__wrapper" :class="{ 'is-cursor-locked': cursorLocked }">
+      <!-- COLLAPSED PLOT LEGEND -->
+      <div
+        v-if="!isLegendExpanded"
+        class="plot-wrapper-collapsed-legend"
+        aria-label="Plot Legend Collapsed"
+        :class="{ 'is-cursor-locked': cursorLocked }"
+      >
+        <div
+          class="c-state-indicator__alert-cursor-lock icon-cursor-lock"
+          title="Cursor is point locked. Click anywhere in the plot to unlock."
+        ></div>
+        <plot-legend-item-collapsed
+          v-for="(seriesObject, seriesIndex) in seriesModels"
+          :key="`${seriesObject.keyString}-${seriesIndex}-collapsed`"
+          :highlights="highlights"
+          :value-to-show-when-collapsed="valueToShowWhenCollapsed"
+          :series-key-string="seriesObject.keyString"
+          @legend-hover-changed="legendHoverChanged"
+        />
+      </div>
+      <!-- EXPANDED PLOT LEGEND -->
+      <div
+        v-else
+        class="plot-wrapper-expanded-legend"
+        aria-label="Plot Legend Expanded"
+        :class="{ 'is-cursor-locked': cursorLocked }"
+      >
+        <div
+          class="c-state-indicator__alert-cursor-lock--verbose icon-cursor-lock"
+          title="Click anywhere in the plot to unlock."
         >
-            <div class="c-state-indicator__alert-cursor-lock--verbose icon-cursor-lock"
-                 title="Click anywhere in the plot to unlock."
-            > Cursor locked to point</div>
-            <table>
-                <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th v-if="showTimestampWhenExpanded">
-                            Timestamp
-                        </th>
-                        <th v-if="showValueWhenExpanded">
-                            Value
-                        </th>
-                        <th v-if="showUnitsWhenExpanded">
-                            Unit
-                        </th>
-                        <th v-if="showMinimumWhenExpanded"
-                            class="mobile-hide"
-                        >
-                            Min
-                        </th>
-                        <th v-if="showMaximumWhenExpanded"
-                            class="mobile-hide"
-                        >
-                            Max
-                        </th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <plot-legend-item-expanded v-for="seriesObject in series"
-                                               :key="seriesObject.keyString"
-                                               :series-object="seriesObject"
-                                               :highlights="highlights"
-                                               :legend="legend"
-                                               @legendHoverChanged="legendHoverChanged"
-                    />
-                </tbody>
-            </table>
+          Cursor locked to point
         </div>
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th v-if="showTimestampWhenExpanded">Timestamp</th>
+              <th v-if="showValueWhenExpanded">Value</th>
+              <th v-if="showUnitsWhenExpanded">Unit</th>
+              <th v-if="showMinimumWhenExpanded" class="mobile-hide">Min</th>
+              <th v-if="showMaximumWhenExpanded" class="mobile-hide">Max</th>
+            </tr>
+          </thead>
+          <tbody>
+            <plot-legend-item-expanded
+              v-for="(seriesObject, seriesIndex) in seriesModels"
+              :key="`${seriesObject.keyString}-${seriesIndex}-expanded`"
+              :series-key-string="seriesObject.keyString"
+              :highlights="highlights"
+              @legend-hover-changed="legendHoverChanged"
+            />
+          </tbody>
+        </table>
+      </div>
     </div>
-</div>
+  </div>
 </template>
 <script>
-import PlotLegendItemCollapsed from "./PlotLegendItemCollapsed.vue";
-import PlotLegendItemExpanded from "./PlotLegendItemExpanded.vue";
+import configStore from '../configuration/ConfigStore.js';
+import eventHelpers from '../lib/eventHelpers.js';
+import PlotLegendItemCollapsed from './PlotLegendItemCollapsed.vue';
+import PlotLegendItemExpanded from './PlotLegendItemExpanded.vue';
+
 export default {
-    components: {
-        PlotLegendItemExpanded,
-        PlotLegendItemCollapsed
-    },
-    inject: ['openmct', 'domainObject'],
-    props: {
-        cursorLocked: {
-            type: Boolean,
-            default() {
-                return false;
-            }
-        },
-        series: {
-            type: Array,
-            default() {
-                return [];
-            }
-        },
-        highlights: {
-            type: Array,
-            default() {
-                return [];
-            }
-        },
-        legend: {
-            type: Object,
-            default() {
-                return {};
-            }
-        }
-    },
-    data() {
-        return {
-            isLegendExpanded: this.legend.get('expanded') === true
-        };
-    },
-    computed: {
-        showUnitsWhenExpanded() {
-            return this.legend.get('showUnitsWhenExpanded') === true;
-        },
-        showMinimumWhenExpanded() {
-            return this.legend.get('showMinimumWhenExpanded') === true;
-        },
-        showMaximumWhenExpanded() {
-            return this.legend.get('showMaximumWhenExpanded') === true;
-        },
-        showValueWhenExpanded() {
-            return this.legend.get('showValueWhenExpanded') === true;
-        },
-        showTimestampWhenExpanded() {
-            return this.legend.get('showTimestampWhenExpanded') === true;
-        },
-        isLegendHidden() {
-            return this.legend.get('hideLegendWhenSmall') === true;
-        }
-    },
-    methods: {
-        expandLegend() {
-            this.isLegendExpanded = !this.isLegendExpanded;
-            this.legend.set('expanded', this.isLegendExpanded);
-        },
-        legendHoverChanged(data) {
-            this.$emit('legendHoverChanged', data);
-        }
+  components: {
+    PlotLegendItemExpanded,
+    PlotLegendItemCollapsed
+  },
+  inject: ['openmct', 'domainObject'],
+  props: {
+    cursorLocked: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    highlights: {
+      type: Array,
+      default() {
+        return [];
+      }
     }
-};
+  },
+  emits: ['legend-hover-changed', 'position', 'expanded'],
+  data() {
+    return {
+      isLegendExpanded: false,
+      seriesModels: [],
+      loaded: false
+    };
+  },
+  computed: {
+    showUnitsWhenExpanded() {
+      return this.loaded && this.legend.get('showUnitsWhenExpanded') === true;
+    },
+    showMinimumWhenExpanded() {
+      return this.loaded && this.legend.get('showMinimumWhenExpanded') === true;
+    },
+    showMaximumWhenExpanded() {
+      return this.loaded && this.legend.get('showMaximumWhenExpanded') === true;
+    },
+    showValueWhenExpanded() {
+      return this.loaded && this.legend.get('showValueWhenExpanded') === true;
+    },
+    showTimestampWhenExpanded() {
+      return this.loaded && this.legend.get('showTimestampWhenExpanded') === true;
+    },
+    isLegendHidden() {
+      return this.loaded && this.legend.get('hideLegendWhenSmall') === true;
+    },
+    valueToShowWhenCollapsed() {
+      return this.loaded && this.legend.get('valueToShowWhenCollapsed');
+    }
+  },
+  created() {
+    eventHelpers.extend(this);
+    this.config = this.getConfig();
+    this.legend = this.config.legend;
+    this.seriesModels = [];
+    this.listenTo(this.config.legend, 'change:position', this.updatePosition, this);
 
+    if (this.domainObject.type === 'telemetry.plot.stacked') {
+      this.objectComposition = this.openmct.composition.get(this.domainObject);
+      this.objectComposition.on('add', this.addTelemetryObject);
+      this.objectComposition.on('remove', this.removeTelemetryObject);
+      this.objectComposition.load();
+    } else {
+      this.registerListeners(this.config);
+    }
+    this.listenTo(this.config.legend, 'change:expandByDefault', this.changeExpandDefault, this);
+  },
+  mounted() {
+    this.loaded = true;
+    this.isLegendExpanded = this.legend.get('expanded') === true;
+    this.$emit('expanded', this.isLegendExpanded);
+    this.updatePosition();
+  },
+  beforeUnmount() {
+    if (this.objectComposition) {
+      this.objectComposition.off('add', this.addTelemetryObject);
+      this.objectComposition.off('remove', this.removeTelemetryObject);
+    }
+
+    this.stopListening();
+  },
+  methods: {
+    changeExpandDefault() {
+      this.isLegendExpanded = this.config.legend.model.expandByDefault;
+      this.legend.set('expanded', this.isLegendExpanded);
+      this.$emit('expanded', this.isLegendExpanded);
+    },
+    getConfig() {
+      const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+
+      return configStore.get(configId);
+    },
+    addTelemetryObject(object) {
+      //get the config for each child
+      const configId = this.openmct.objects.makeKeyString(object.identifier);
+      const config = configStore.get(configId);
+      if (config) {
+        this.registerListeners(config);
+      }
+    },
+    removeTelemetryObject(identifier) {
+      const configId = this.openmct.objects.makeKeyString(identifier);
+      const config = configStore.get(configId);
+      if (config) {
+        config.series.forEach(this.removeSeries, this);
+      }
+    },
+    registerListeners(config) {
+      //listen to any changes to the telemetry endpoints that are associated with the child
+      this.listenTo(config.series, 'add', this.addSeries, this);
+      this.listenTo(config.series, 'remove', this.removeSeries, this);
+      config.series.forEach(this.addSeries, this);
+    },
+    addSeries(series) {
+      const existingSeries = this.getSeries(series.keyString);
+      if (existingSeries) {
+        return;
+      }
+      this.seriesModels.push(series);
+    },
+    removeSeries(plotSeries) {
+      this.stopListening(plotSeries);
+
+      const seriesIndex = this.seriesModels.findIndex(
+        (series) => series.keyString === plotSeries.keyString
+      );
+      this.seriesModels.splice(seriesIndex, 1);
+    },
+    getSeries(keyStringToFind) {
+      const foundSeries = this.seriesModels.find((series) => {
+        return series.keyString === keyStringToFind;
+      });
+      return foundSeries;
+    },
+    toggleLegend() {
+      this.isLegendExpanded = !this.isLegendExpanded;
+      this.legend.set('expanded', this.isLegendExpanded);
+      this.$emit('expanded', this.isLegendExpanded);
+    },
+    legendHoverChanged(data) {
+      this.$emit('legend-hover-changed', data);
+    },
+    updatePosition() {
+      this.$emit('position', this.legend.get('position'));
+    }
+  }
+};
 </script>
diff --git a/src/plugins/plot/legend/PlotLegendItemCollapsed.vue b/src/plugins/plot/legend/PlotLegendItemCollapsed.vue
index 108883f4438..9e659566b87 100644
--- a/src/plugins/plot/legend/PlotLegendItemCollapsed.vue
+++ b/src/plugins/plot/legend/PlotLegendItemCollapsed.vue
@@ -1,5 +1,5 @@
 <!--
- Open MCT, Copyright (c) 2014-2021, United States Government
+ Open MCT, Copyright (c) 2014-2024, United States Government
  as represented by the Administrator of the National Aeronautics and Space
  Administration. All rights reserved.
 
@@ -20,119 +20,261 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-<div class="plot-legend-item"
-     :class="{
-         'is-status--missing': isMissing
-     }"
-     @mouseover="toggleHover(true)"
-     @mouseleave="toggleHover(false)"
->
-    <div class="plot-series-swatch-and-name">
-        <span class="plot-series-color-swatch"
-              :style="{ 'background-color': colorAsHexString }"
-        >
-        </span>
-        <span class="is-status__indicator"
-              title="This item is missing or suspect"
-        ></span>
-        <span class="plot-series-name">{{ nameWithUnit }}</span>
+  <div
+    class="plot-legend-item"
+    :aria-label="`Plot Legend Item for ${seriesName}`"
+    :class="{
+      'is-stale': isStale,
+      'is-status--missing': isMissing
+    }"
+    @mouseover="toggleHover(true)"
+    @mouseleave="toggleHover(false)"
+  >
+    <div
+      ref="series"
+      class="plot-series-swatch-and-name"
+      @mouseover.ctrl="showToolTip"
+      @mouseleave="hideToolTip"
+    >
+      <span class="plot-series-color-swatch" :style="{ 'background-color': colorAsHexString }" />
+      <span class="is-status__indicator" title="This item is missing or suspect" />
+      <span class="plot-series-name">{{ nameWithUnit }}</span>
     </div>
-    <div v-show="!!highlights.length && (valueToShowWhenCollapsed !== 'none')"
-         class="plot-series-value hover-value-enabled"
-         :class="[{ 'cursor-hover': notNearest }, valueToDisplayWhenCollapsedClass, mctLimitStateClass]"
+    <div
+      v-show="
+        !!highlights.length &&
+        valueToShowWhenCollapsed !== 'none' &&
+        valueToShowWhenCollapsed !== 'unit'
+      "
+      class="plot-series-value hover-value-enabled"
+      :class="[
+        { 'cursor-hover': notNearest },
+        valueToDisplayWhenCollapsedClass,
+        mctLimitStateClass
+      ]"
     >
-        <span v-if="valueToShowWhenCollapsed === 'nearestValue'">{{ formattedYValue }}</span>
-        <span v-else-if="valueToShowWhenCollapsed === 'nearestTimestamp'">{{ formattedXValue }}</span>
-        <span v-else>{{ formattedYValueFromStats }}</span>
+      <span v-if="valueToShowWhenCollapsed === 'nearestValue'">{{ formattedYValue }}</span>
+      <span v-else-if="valueToShowWhenCollapsed === 'nearestTimestamp'">{{ formattedXValue }}</span>
+      <span v-else>{{ formattedYValueFromStats }}</span>
     </div>
-</div>
+  </div>
 </template>
 <script>
+import { getLimitClass } from '@/plugins/plot/chart/limitUtil';
+import stalenessMixin from '@/ui/mixins/staleness-mixin';
 
-import {getLimitClass} from "@/plugins/plot/chart/limitUtil";
+import tooltipHelpers from '../../../api/tooltips/tooltipMixins.js';
+import configStore from '../configuration/ConfigStore.js';
+import eventHelpers from '../lib/eventHelpers.js';
 
 export default {
-    props: {
-        valueToShowWhenCollapsed: {
-            type: String,
-            required: true
-        },
-        seriesObject: {
-            type: Object,
-            required: true,
-            default() {
-                return {};
-            }
-        },
-        highlights: {
-            type: Array,
-            default() {
-                return [];
-            }
+  mixins: [stalenessMixin, tooltipHelpers],
+  inject: ['openmct', 'domainObject'],
+  props: {
+    seriesKeyString: {
+      type: String,
+      required: true
+    },
+    highlights: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ['legend-hover-changed'],
+  data() {
+    return {
+      isMissing: false,
+      colorAsHexString: '',
+      nameWithUnit: '',
+      seriesName: '',
+      formattedYValue: '',
+      formattedXValue: '',
+      mctLimitStateClass: '',
+      formattedYValueFromStats: '',
+      loaded: false
+    };
+  },
+  computed: {
+    valueToShowWhenCollapsed() {
+      return this.loaded ? this.legend.get('valueToShowWhenCollapsed') : [];
+    },
+    valueToDisplayWhenCollapsedClass() {
+      return `value-to-display-${this.valueToShowWhenCollapsed}`;
+    },
+    notNearest() {
+      return this.valueToShowWhenCollapsed.indexOf('nearest') > -1;
+    }
+  },
+  watch: {
+    highlights: {
+      handler(newHighlights) {
+        const highlightedObject = newHighlights.find(
+          (highlight) => highlight.seriesKeyString === this.seriesKeyString
+        );
+        if (newHighlights.length === 0 || highlightedObject) {
+          this.initialize(highlightedObject);
         }
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.seriesModels = [];
+    eventHelpers.extend(this);
+    this.config = this.getConfig();
+    if (this.domainObject.type === 'telemetry.plot.stacked') {
+      this.objectComposition = this.openmct.composition.get(this.domainObject);
+      this.objectComposition.on('add', this.addTelemetryObject);
+      this.objectComposition.on('remove', this.removeTelemetryObject);
+      this.objectComposition.load();
+    } else {
+      this.registerListeners(this.config);
+    }
+    this.legend = this.config.legend;
+    this.loaded = true;
+    this.setupClockChangedEvent((domainObject) => {
+      this.triggerUnsubscribeFromStaleness(domainObject);
+      this.subscribeToStaleness(domainObject);
+    });
+  },
+  beforeUnmount() {
+    this.stopListening();
+
+    if (this.objectComposition) {
+      this.objectComposition.off('add', this.addTelemetryObject);
+      this.objectComposition.off('remove', this.removeTelemetryObject);
+    }
+  },
+  methods: {
+    getConfig() {
+      const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+
+      return configStore.get(configId);
     },
-    data() {
-        return {
-            isMissing: false,
-            colorAsHexString: '',
-            nameWithUnit: '',
-            formattedYValue: '',
-            formattedXValue: '',
-            mctLimitStateClass: '',
-            formattedYValueFromStats: ''
-        };
+    registerListeners(config) {
+      //listen to any changes to the telemetry endpoints that are associated with the child
+      this.listenTo(config.series, 'add', this.onSeriesAdd, this);
+      this.listenTo(config.series, 'remove', this.onSeriesRemove, this);
+      config.series.forEach(this.onSeriesAdd, this);
     },
-    computed: {
-        valueToDisplayWhenCollapsedClass() {
-            return `value-to-display-${ this.valueToShowWhenCollapsed }`;
+    addTelemetryObject(object) {
+      //get the config for each child
+      const configId = this.openmct.objects.makeKeyString(object.identifier);
+      const config = configStore.get(configId);
+      if (config) {
+        this.registerListeners(config);
+      }
+    },
+    removeTelemetryObject(identifier) {
+      const configId = this.openmct.objects.makeKeyString(identifier);
+      const config = configStore.get(configId);
+      if (config) {
+        config.series.forEach(this.onSeriesRemove, this);
+      }
+    },
+    onSeriesAdd(series) {
+      if (series.keyString !== this.seriesKeyString) {
+        return;
+      }
+      const existingSeries = this.getSeries(series.keyString);
+      if (existingSeries) {
+        return;
+      }
+      this.seriesModels.push(series);
+      this.listenTo(
+        series,
+        'change:color',
+        (newColor) => {
+          this.updateColor(newColor);
         },
-        notNearest() {
-            return (this.valueToShowWhenCollapsed.indexOf('nearest') > -1);
-        }
+        this
+      );
+      this.listenTo(
+        series,
+        'change:name',
+        () => {
+          this.updateName();
+        },
+        this
+      );
+      this.subscribeToStaleness(series.domainObject);
+      this.initialize();
     },
-    watch: {
-        highlights(newHighlights) {
-            const highlightedObject = newHighlights.find(highlight => highlight.series.keyString === this.seriesObject.keyString);
-            if (newHighlights.length === 0 || highlightedObject) {
-                this.initialize(highlightedObject);
-            }
-        }
+    onSeriesRemove(seriesToRemove) {
+      const seriesIndexToRemove = this.seriesModels.findIndex(
+        (series) => series.keyString === seriesToRemove.keyString
+      );
+      if (seriesIndexToRemove === -1) {
+        return;
+      }
+      this.seriesModels.splice(seriesIndexToRemove, 1);
     },
-    mounted() {
-        this.initialize();
+    getSeries(keyStringToFind) {
+      const foundSeries = this.seriesModels.find((series) => {
+        return series.keyString === keyStringToFind;
+      });
+      return foundSeries;
     },
-    methods: {
-        initialize(highlightedObject) {
-            const seriesObject = highlightedObject ? highlightedObject.series : this.seriesObject;
-            this.isMissing = seriesObject.domainObject.status === 'missing';
-            this.colorAsHexString = seriesObject.get('color').asHexString();
-            this.nameWithUnit = seriesObject.nameWithUnit();
+    initialize(highlightedObject) {
+      const seriesKeyStringToUse = highlightedObject?.seriesKeyString || this.seriesKeyString;
+      const seriesObject = this.getSeries(seriesKeyStringToUse);
 
-            const closest = seriesObject.closest;
-            if (closest) {
-                this.formattedYValue = seriesObject.formatY(closest);
-                this.formattedXValue = seriesObject.formatX(closest);
-                this.mctLimitStateClass = closest.mctLimitState ? getLimitClass(closest.mctLimitState, 'c-plot-limit--') : '';
-            } else {
-                this.formattedYValue = '';
-                this.formattedXValue = '';
-                this.mctLimitStateClass = '';
-            }
+      this.isMissing = seriesObject.domainObject.status === 'missing';
+      this.colorAsHexString = seriesObject.get('color').asHexString();
+      this.seriesName = seriesObject.domainObject.name;
+      this.nameWithUnit = seriesObject.nameWithUnit();
+
+      const closest = seriesObject.closest;
+      if (closest) {
+        this.formattedYValue = seriesObject.formatY(closest);
+        this.formattedXValue = seriesObject.formatX(closest);
+        this.mctLimitStateClass = closest.mctLimitState
+          ? getLimitClass(closest.mctLimitState, 'c-plot-limit--')
+          : '';
+      } else {
+        this.formattedYValue = '';
+        this.formattedXValue = '';
+        this.mctLimitStateClass = '';
+      }
 
-            const stats = seriesObject.get('stats');
-            if (stats) {
-                this.formattedYValueFromStats = seriesObject.formatY(stats[this.valueToShowWhenCollapsed + 'Point']);
-            } else {
-                this.formattedYValueFromStats = '';
+      const stats = seriesObject.get('stats');
+      if (stats) {
+        this.formattedYValueFromStats = seriesObject.formatY(
+          stats[this.valueToShowWhenCollapsed + 'Point']
+        );
+      } else {
+        this.formattedYValueFromStats = '';
+      }
+    },
+    updateColor(newColor) {
+      this.colorAsHexString = newColor.asHexString();
+    },
+    updateName() {
+      const seriesObject = this.getSeries(this.seriesKeyString);
+      this.nameWithUnit = seriesObject.nameWithUnit();
+    },
+    toggleHover(hover) {
+      this.hover = hover;
+      this.$emit(
+        'legend-hover-changed',
+        this.hover
+          ? {
+              seriesKey: this.seriesKeyString
             }
-        },
-        toggleHover(hover) {
-            this.hover = hover;
-            this.$emit('legendHoverChanged', {
-                seriesKey: this.hover ? this.seriesObject.keyString : ''
-            });
-        }
+          : undefined
+      );
+    },
+    async showToolTip() {
+      const seriesObject = this.getSeries(this.seriesKeyString);
+      const { BELOW } = this.openmct.tooltips.TOOLTIP_LOCATIONS;
+      this.buildToolTip(
+        await this.getTelemetryPathString(seriesObject.domainObject.identifier),
+        BELOW,
+        'series'
+      );
     }
+  }
 };
-
 </script>
diff --git a/src/plugins/plot/legend/PlotLegendItemExpanded.vue b/src/plugins/plot/legend/PlotLegendItemExpanded.vue
index 1b3ecb64a35..98a64c38e95 100644
--- a/src/plugins/plot/legend/PlotLegendItemExpanded.vue
+++ b/src/plugins/plot/legend/PlotLegendItemExpanded.vue
@@ -1,5 +1,5 @@
 <!--
- Open MCT, Copyright (c) 2014-2021, United States Government
+ Open MCT, Copyright (c) 2014-2024, United States Government
  as represented by the Administrator of the National Aeronautics and Space
  Administration. All rights reserved.
 
@@ -20,157 +20,274 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-<tr
+  <tr
     class="plot-legend-item"
+    :aria-label="`Plot Legend Item for ${domainObject?.name}`"
     :class="{
-        'is-status--missing': isMissing
+      'is-stale': isStale,
+      'is-status--missing': isMissing
     }"
     @mouseover="toggleHover(true)"
     @mouseleave="toggleHover(false)"
->
+  >
     <td class="plot-series-swatch-and-name">
-        <span class="plot-series-color-swatch"
-              :style="{ 'background-color': colorAsHexString }"
-        >
-        </span>
-        <span class="is-status__indicator"
-              title="This item is missing or suspect"
-        ></span>
-        <span class="plot-series-name">{{ name }}</span>
+      <span class="plot-series-color-swatch" :style="{ 'background-color': colorAsHexString }">
+      </span>
+      <span class="is-status__indicator" title="This item is missing or suspect"></span>
+      <span
+        ref="seriesName"
+        class="plot-series-name"
+        @mouseover.ctrl="showToolTip"
+        @mouseleave="hideToolTip"
+      >
+        {{ name }}
+      </span>
     </td>
 
     <td v-if="showTimestampWhenExpanded">
-        <span class="plot-series-value cursor-hover hover-value-enabled">
-            {{ formattedXValue }}
-        </span>
+      <span class="plot-series-value cursor-hover hover-value-enabled">
+        {{ formattedXValue }}
+      </span>
     </td>
     <td v-if="showValueWhenExpanded">
-        <span class="plot-series-value cursor-hover hover-value-enabled"
-              :class="[mctLimitStateClass]"
-        >
-            {{ formattedYValue }}
-        </span>
+      <span
+        class="plot-series-value cursor-hover hover-value-enabled"
+        :class="[mctLimitStateClass]"
+      >
+        {{ formattedYValue }}
+      </span>
     </td>
     <td v-if="showUnitsWhenExpanded">
-        <span class="plot-series-value cursor-hover hover-value-enabled">
-            {{ unit }}
-        </span>
+      <span class="plot-series-value cursor-hover hover-value-enabled">
+        {{ unit }}
+      </span>
     </td>
-    <td v-if="showMinimumWhenExpanded"
-        class="mobile-hide"
-    >
-        <span class="plot-series-value">
-            {{ formattedMinY }}
-        </span>
+    <td v-if="showMinimumWhenExpanded" class="mobile-hide">
+      <span class="plot-series-value">
+        {{ formattedMinY }}
+      </span>
     </td>
-    <td v-if="showMaximumWhenExpanded"
-        class="mobile-hide"
-    >
-        <span class="plot-series-value">
-            {{ formattedMaxY }}
-        </span>
+    <td v-if="showMaximumWhenExpanded" class="mobile-hide">
+      <span class="plot-series-value">
+        {{ formattedMaxY }}
+      </span>
     </td>
-</tr>
+  </tr>
 </template>
 
 <script>
-import {getLimitClass} from "@/plugins/plot/chart/limitUtil";
+import { getLimitClass } from '@/plugins/plot/chart/limitUtil';
+import eventHelpers from '@/plugins/plot/lib/eventHelpers';
+import stalenessMixin from '@/ui/mixins/staleness-mixin';
+
+import tooltipHelpers from '../../../api/tooltips/tooltipMixins.js';
+import configStore from '../configuration/ConfigStore.js';
 
 export default {
-    props: {
-        seriesObject: {
-            type: Object,
-            required: true,
-            default() {
-                return {};
-            }
-        },
-        highlights: {
-            type: Array,
-            default() {
-                return [];
-            }
-        },
-        legend: {
-            type: Object,
-            required: true
+  mixins: [stalenessMixin, tooltipHelpers],
+  inject: ['openmct', 'domainObject'],
+  props: {
+    seriesKeyString: {
+      type: String,
+      required: true
+    },
+    highlights: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ['legend-hover-changed'],
+  data() {
+    return {
+      isMissing: false,
+      colorAsHexString: '',
+      name: '',
+      nameWithUnit: '',
+      unit: '',
+      formattedYValue: '',
+      formattedXValue: '',
+      formattedMinY: '',
+      formattedMaxY: '',
+      mctLimitStateClass: '',
+      loaded: false
+    };
+  },
+  computed: {
+    showUnitsWhenExpanded() {
+      return this.loaded && this.legend.get('showUnitsWhenExpanded') === true;
+    },
+    showMinimumWhenExpanded() {
+      return this.loaded && this.legend.get('showMinimumWhenExpanded') === true;
+    },
+    showMaximumWhenExpanded() {
+      return this.loaded && this.legend.get('showMaximumWhenExpanded') === true;
+    },
+    showValueWhenExpanded() {
+      return this.loaded && this.legend.get('showValueWhenExpanded') === true;
+    },
+    showTimestampWhenExpanded() {
+      return this.loaded && this.legend.get('showTimestampWhenExpanded') === true;
+    }
+  },
+  watch: {
+    highlights: {
+      handler(newHighlights) {
+        const highlightedObject = newHighlights.find(
+          (highlight) => highlight.seriesKeyString === this.seriesKeyString
+        );
+        if (newHighlights.length === 0 || highlightedObject) {
+          this.initialize(highlightedObject);
         }
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.seriesModels = [];
+    eventHelpers.extend(this);
+    this.config = this.getConfig();
+
+    if (this.domainObject.type === 'telemetry.plot.stacked') {
+      this.objectComposition = this.openmct.composition.get(this.domainObject);
+      this.objectComposition.on('add', this.addTelemetryObject);
+      this.objectComposition.on('remove', this.removeTelemetryObject);
+      this.objectComposition.load();
+    } else {
+      this.registerListeners(this.config);
+    }
+
+    this.legend = this.config.legend;
+    this.loaded = true;
+    this.setupClockChangedEvent((domainObject) => {
+      this.triggerUnsubscribeFromStaleness(domainObject);
+      this.subscribeToStaleness(domainObject);
+    });
+  },
+  beforeUnmount() {
+    this.stopListening();
+
+    if (this.objectComposition) {
+      this.objectComposition.off('add', this.addTelemetryObject);
+      this.objectComposition.off('remove', this.removeTelemetryObject);
+    }
+  },
+  methods: {
+    registerListeners(config) {
+      //listen to any changes to the telemetry endpoints that are associated with the child
+      this.listenTo(config.series, 'add', this.onSeriesAdd, this);
+      this.listenTo(config.series, 'remove', this.onSeriesRemove, this);
+      config.series.forEach(this.onSeriesAdd, this);
     },
-    data() {
-        return {
-            isMissing: false,
-            colorAsHexString: '',
-            name: '',
-            unit: '',
-            formattedYValue: '',
-            formattedXValue: '',
-            formattedMinY: '',
-            formattedMaxY: '',
-            mctLimitStateClass: ''
-        };
-    },
-    computed: {
-        showUnitsWhenExpanded() {
-            return this.legend.get('showUnitsWhenExpanded') === true;
-        },
-        showMinimumWhenExpanded() {
-            return this.legend.get('showMinimumWhenExpanded') === true;
-        },
-        showMaximumWhenExpanded() {
-            return this.legend.get('showMaximumWhenExpanded') === true;
+    addTelemetryObject(object) {
+      //get the config for each child
+      const configId = this.openmct.objects.makeKeyString(object.identifier);
+      const config = configStore.get(configId);
+      if (config) {
+        this.registerListeners(config);
+      }
+    },
+    removeTelemetryObject(identifier) {
+      const configId = this.openmct.objects.makeKeyString(identifier);
+      const config = configStore.get(configId);
+      if (config) {
+        config.series.forEach(this.onSeriesRemove, this);
+      }
+    },
+    onSeriesAdd(series) {
+      if (series.keyString !== this.seriesKeyString) {
+        return;
+      }
+      const existingSeries = this.getSeries(series.keyString);
+      if (existingSeries) {
+        return;
+      }
+      this.seriesModels.push(series);
+      this.listenTo(
+        series,
+        'change:color',
+        (newColor) => {
+          this.updateColor(newColor);
         },
-        showValueWhenExpanded() {
-            return this.legend.get('showValueWhenExpanded') === true;
+        this
+      );
+      this.listenTo(
+        series,
+        'change:name',
+        () => {
+          this.updateName();
         },
-        showTimestampWhenExpanded() {
-            return this.legend.get('showTimestampWhenExpanded') === true;
-        }
+        this
+      );
+      this.subscribeToStaleness(series.domainObject);
+      this.initialize();
     },
-    watch: {
-        highlights(newHighlights) {
-            const highlightedObject = newHighlights.find(highlight => highlight.series.keyString === this.seriesObject.keyString);
-            if (newHighlights.length === 0 || highlightedObject) {
-                this.initialize(highlightedObject);
-            }
-        }
+    onSeriesRemove(seriesToRemove) {
+      const seriesIndexToRemove = this.seriesModels.findIndex(
+        (series) => series.keyString === seriesToRemove.keyString
+      );
+      this.seriesModels.splice(seriesIndexToRemove, 1);
     },
-    mounted() {
-        this.initialize();
+    getSeries(keyStringToFind) {
+      const foundSeries = this.seriesModels.find((series) => {
+        return series.keyString === keyStringToFind;
+      });
+      return foundSeries;
     },
-    methods: {
-        initialize(highlightedObject) {
-            const seriesObject = highlightedObject ? highlightedObject.series : this.seriesObject;
+    getConfig() {
+      const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
 
-            this.isMissing = seriesObject.domainObject.status === 'missing';
-            this.colorAsHexString = seriesObject.get('color').asHexString();
-            this.name = seriesObject.get('name');
-            this.unit = seriesObject.get('unit');
-            const closest = seriesObject.closest;
-            if (closest) {
-                this.formattedYValue = seriesObject.formatY(closest);
-                this.formattedXValue = seriesObject.formatX(closest);
-                this.mctLimitStateClass = seriesObject.closest.mctLimitState ? getLimitClass(seriesObject.closest.mctLimitState, 'c-plot-limit--') : '';
-            } else {
-                this.formattedYValue = '';
-                this.formattedXValue = '';
-                this.mctLimitStateClass = '';
-            }
+      return configStore.get(configId);
+    },
+    initialize(highlightedObject) {
+      const seriesKeyStringToUse = highlightedObject?.seriesKeyString || this.seriesKeyString;
+      const seriesObject = this.getSeries(seriesKeyStringToUse);
 
-            const stats = seriesObject.get('stats');
-            if (stats) {
-                this.formattedMinY = seriesObject.formatY(stats.minPoint);
-                this.formattedMaxY = seriesObject.formatY(stats.maxPoint);
-            } else {
-                this.formattedMinY = '';
-                this.formattedMaxY = '';
-            }
-        },
-        toggleHover(hover) {
-            this.hover = hover;
-            this.$emit('legendHoverChanged', {
-                seriesKey: this.hover ? this.seriesObject.keyString : ''
-            });
-        }
+      this.isMissing = seriesObject.domainObject.status === 'missing';
+      this.colorAsHexString = seriesObject.get('color').asHexString();
+      this.name = seriesObject.get('name');
+      this.unit = seriesObject.get('unit');
+      const closest = seriesObject.closest;
+      if (closest) {
+        this.formattedYValue = seriesObject.formatY(closest);
+        this.formattedXValue = seriesObject.formatX(closest);
+        this.mctLimitStateClass = seriesObject.closest.mctLimitState
+          ? getLimitClass(seriesObject.closest.mctLimitState, 'c-plot-limit--')
+          : '';
+      } else {
+        this.formattedYValue = '';
+        this.formattedXValue = '';
+        this.mctLimitStateClass = '';
+      }
+
+      const stats = seriesObject.get('stats');
+      if (stats) {
+        this.formattedMinY = seriesObject.formatY(stats.minPoint);
+        this.formattedMaxY = seriesObject.formatY(stats.maxPoint);
+      } else {
+        this.formattedMinY = '';
+        this.formattedMaxY = '';
+      }
+    },
+    updateColor(newColor) {
+      this.colorAsHexString = newColor.asHexString();
+    },
+    updateName() {
+      const seriesObject = this.getSeries(this.seriesKeyString);
+      this.nameWithUnit = seriesObject.nameWithUnit();
+    },
+    toggleHover(hover) {
+      this.hover = hover;
+      this.$emit('legend-hover-changed', {
+        seriesKey: this.hover ? this.seriesKeyString : ''
+      });
+    },
+    async showToolTip() {
+      const { BELOW } = this.openmct.tooltips.TOOLTIP_LOCATIONS;
+      const seriesIdentifier = this.openmct.objects.parseKeyString(this.seriesKeyString);
+      this.buildToolTip(await this.getTelemetryPathString(seriesIdentifier), BELOW, 'seriesName');
     }
+  }
 };
 </script>
diff --git a/src/plugins/plot/lib/Color.js b/src/plugins/plot/lib/Color.js
deleted file mode 100644
index 378ae5295f1..00000000000
--- a/src/plugins/plot/lib/Color.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
-     * A representation of a color that allows conversions between different
-     * formats.
-     *
-     * @constructor
-     */
-/**
- * A representation of a color that allows conversions between different
- * formats.
- *
- * @constructor
- */
-function Color(integerArray) {
-    this.integerArray = integerArray;
-}
-
-Color.fromHexString = function (hexString) {
-    if (!/#([0-9a-fA-F]{2}){2}/.test(hexString)) {
-        throw new Error(
-            'Invalid input "'
-            + hexString
-            + '". Hex string must be in CSS format e.g. #00FF00'
-        );
-    }
-
-    return new Color([
-        parseInt(hexString.slice(1, 3), 16),
-        parseInt(hexString.slice(3, 5), 16),
-        parseInt(hexString.slice(5, 7), 16)
-    ]);
-};
-
-/**
- * Return color as a three element array of RGB values, where each value
- * is a integer in the range of 0-255.
- *
- * @return {number[]} the color, as integer RGB values
- */
-Color.prototype.asIntegerArray = function () {
-    return this.integerArray.map(function (c) {
-        return c;
-    });
-};
-
-/**
- * Return color as a string using #-prefixed six-digit RGB hex notation
- * (e.g. #FF0000).  See http://www.w3.org/TR/css3-color/#rgb-color.
- *
- * @return {string} the color, as a style-friendly string
- */
-
-Color.prototype.asHexString = function () {
-    return '#' + this.integerArray.map(function (c) {
-        return (c < 16 ? '0' : '') + c.toString(16);
-    }).join('');
-};
-
-/**
- * Return color as a RGBA float array.
- *
- * This format is present specifically to support use with
- * WebGL, which expects colors of that form.
- *
- * @return {number[]} the color, as floating-point RGBA values
- */
-Color.prototype.asRGBAArray = function () {
-    return this.integerArray.map(function (c) {
-        return c / 255.0;
-    }).concat([1]);
-};
-
-Color.prototype.equalTo = function (otherColor) {
-    return this.asHexString() === otherColor.asHexString();
-};
-
-export default Color;
diff --git a/src/plugins/plot/lib/ColorHelper.js b/src/plugins/plot/lib/ColorHelper.js
deleted file mode 100644
index d91a50679ca..00000000000
--- a/src/plugins/plot/lib/ColorHelper.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-export const COLOR_PALETTE = [
-    [0x00, 0x37, 0xFF],
-    [0xF0, 0x60, 0x00],
-    [0x00, 0x70, 0x40],
-    [0xFB, 0x49, 0x49],
-    [0xC8, 0x00, 0xCF],
-    [0x55, 0x77, 0xF2],
-    [0xFF, 0xA6, 0x3D],
-    [0x05, 0xA3, 0x00],
-    [0xF0, 0x00, 0x6C],
-    [0x77, 0x17, 0x7A],
-    [0x23, 0xA9, 0xDB],
-    [0xFA, 0xF0, 0x6F],
-    [0x4E, 0xF0, 0x48],
-    [0xAD, 0x50, 0x72],
-    [0x94, 0x25, 0xEA],
-    [0x21, 0x87, 0x82],
-    [0x8F, 0x6E, 0x47],
-    [0xf0, 0x59, 0xcb],
-    [0x34, 0xB6, 0x7D],
-    [0x6A, 0x36, 0xFF],
-    [0x56, 0xF0, 0xE8],
-    [0xA1, 0x8C, 0x1C],
-    [0xCB, 0xE1, 0x44],
-    [0xFF, 0x84, 0x9E],
-    [0xB7, 0x79, 0xE7],
-    [0x8C, 0xC9, 0xFD],
-    [0xDB, 0xAA, 0x6E],
-    [0xB8, 0xDF, 0x97],
-    [0xFF, 0xBC, 0xDA],
-    [0xD3, 0xB6, 0xDE]
-];
-
-export function isDefaultColor(color) {
-    const a = color.asIntegerArray();
-
-    return COLOR_PALETTE.some(function (b) {
-        return a[0] === b[0] && a[1] === b[1] && a[2] === b[2];
-    });
-}
diff --git a/src/plugins/plot/lib/ColorPalette.js b/src/plugins/plot/lib/ColorPalette.js
deleted file mode 100644
index 099ecd8ae7d..00000000000
--- a/src/plugins/plot/lib/ColorPalette.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/**
-     * A color palette stores a set of colors and allows for different
-     * methods of color allocation.
-     *
-     * @constructor
-     */
-import { isDefaultColor, COLOR_PALETTE } from './ColorHelper';
-import Color from './Color';
-
-/**
- * A color palette stores a set of colors and allows for different
- * methods of color allocation.
- *
- * @constructor
- */
-function ColorPalette() {
-    const allColors = this.allColors = COLOR_PALETTE.map(function (color) {
-        return new Color(color);
-    });
-    this.colorGroups = [[], [], []];
-    for (let i = 0; i < allColors.length; i++) {
-        this.colorGroups[i % 3].push(allColors[i]);
-    }
-
-    this.reset();
-}
-
-/**
- *
- */
-ColorPalette.prototype.groups = function () {
-    return this.colorGroups;
-};
-
-ColorPalette.prototype.reset = function () {
-    this.availableColors = this.allColors.slice();
-};
-
-ColorPalette.prototype.remove = function (color) {
-    this.availableColors = this.availableColors.filter(function (c) {
-        return !c.equalTo(color);
-    });
-};
-
-ColorPalette.prototype.return = function (color) {
-    if (isDefaultColor(color)) {
-        this.availableColors.unshift(color);
-    }
-};
-
-ColorPalette.prototype.getByHexString = function (hexString) {
-    const color = Color.fromHexString(hexString);
-
-    return color;
-};
-
-/**
- * @returns {Color} the next unused color in the palette.  If all colors
- * have been allocated, it will wrap around.
- */
-ColorPalette.prototype.getNextColor = function () {
-    if (!this.availableColors.length) {
-        console.warn('Color Palette empty, reusing colors!');
-        this.reset();
-    }
-
-    return this.availableColors.shift();
-};
-
-/**
- * @param {number} index the index of the color to return.  An index
- * value larger than the size of the index will wrap around.
- * @returns {Color}
- */
-ColorPalette.prototype.getColor = function (index) {
-    return this.colors[index % this.colors.length];
-};
-
-export default ColorPalette;
diff --git a/src/plugins/plot/lib/eventHelpers.js b/src/plugins/plot/lib/eventHelpers.js
index 34600851a72..4b49c92711f 100644
--- a/src/plugins/plot/lib/eventHelpers.js
+++ b/src/plugins/plot/lib/eventHelpers.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -22,71 +22,79 @@
 /*jscs:disable disallowDanglingUnderscores */
 
 const helperFunctions = {
-    listenTo: function (object, event, callback, context) {
-        if (!this._listeningTo) {
-            this._listeningTo = [];
-        }
+  listenTo: function (object, event, callback, context) {
+    if (!this._listeningTo) {
+      this._listeningTo = [];
+    }
 
-        const listener = {
-            object: object,
-            event: event,
-            callback: callback,
-            context: context,
-            _cb: context ? callback.bind(context) : callback
-        };
-        if (object.addEventListener) {
-            object.addEventListener(event, listener._cb);
-        } else {
-            object.on(event, listener._cb);
-        }
+    const listener = {
+      object: object,
+      event: event,
+      callback: callback,
+      context: context,
+      _cb: context ? callback.bind(context) : callback
+    };
+    if (object.addEventListener) {
+      object.addEventListener(event, listener._cb);
+    } else {
+      object.on(event, listener._cb);
+    }
 
-        this._listeningTo.push(listener);
-    },
+    this._listeningTo.push(listener);
+  },
 
-    stopListening: function (object, event, callback, context) {
-        if (!this._listeningTo) {
-            this._listeningTo = [];
-        }
+  stopListening: function (object, event, callback, context) {
+    if (!this._listeningTo) {
+      this._listeningTo = [];
+    }
 
-        this._listeningTo.filter(function (listener) {
-            if (object && object !== listener.object) {
-                return false;
-            }
+    this._listeningTo
+      .filter(function (listener) {
+        if (object && object !== listener.object) {
+          return false;
+        }
 
-            if (event && event !== listener.event) {
-                return false;
-            }
+        if (event && event !== listener.event) {
+          return false;
+        }
 
-            if (callback && callback !== listener.callback) {
-                return false;
-            }
+        if (callback && callback !== listener.callback) {
+          return false;
+        }
 
-            if (context && context !== listener.context) {
-                return false;
-            }
+        if (context && context !== listener.context) {
+          return false;
+        }
 
-            return true;
-        })
-            .map(function (listener) {
-                if (listener.unlisten) {
-                    listener.unlisten();
-                } else if (listener.object.removeEventListener) {
-                    listener.object.removeEventListener(listener.event, listener._cb);
-                } else {
-                    listener.object.off(listener.event, listener._cb);
-                }
+        return true;
+      })
+      .map(function (listener) {
+        if (listener.unlisten) {
+          listener.unlisten();
+        } else if (listener.object.removeEventListener) {
+          listener.object.removeEventListener(listener.event, listener._cb);
+        } else {
+          listener.object.off(listener.event, listener._cb);
+        }
 
-                return listener;
-            })
-            .forEach(function (listener) {
-                this._listeningTo.splice(this._listeningTo.indexOf(listener), 1);
-            }, this);
-    },
+        return listener;
+      })
+      .forEach(function (listener) {
+        this._listeningTo.splice(this._listeningTo.indexOf(listener), 1);
+      }, this);
+  },
 
-    extend: function (object) {
-        object.listenTo = helperFunctions.listenTo;
-        object.stopListening = helperFunctions.stopListening;
-    }
+  extend: function (object) {
+    object.listenTo = helperFunctions.listenTo;
+    object.stopListening = helperFunctions.stopListening;
+  }
 };
 
 export default helperFunctions;
+
+/**
+@typedef {{
+    listenTo: (object: any, event: any, callback: any, context: any) => void
+    stopListening: (object: any, event: any, callback: any, context: any) => void
+}} EventHelpers
+*/
diff --git a/src/plugins/plot/mathUtils.js b/src/plugins/plot/mathUtils.js
new file mode 100644
index 00000000000..c9f4f30de8c
--- /dev/null
+++ b/src/plugins/plot/mathUtils.js
@@ -0,0 +1,44 @@
+/** The natural number `e`. */
+export const e = Math.exp(1);
+
+/**
+Returns the logarithm of a number, using the given base or the natural number
+`e` as base if not specified.
+@param {number} n
+@param {number=} base log base, defaults to e
+*/
+export function log(n, base = e) {
+  if (base === e) {
+    return Math.log(n);
+  }
+
+  return Math.log(n) / Math.log(base);
+}
+
+/**
+Returns the inverse of the logarithm of a number, using the given base or the
+natural number `e` as base if not specified.
+@param {number} n
+@param {number=} base log base, defaults to e
+*/
+export function antilog(n, base = e) {
+  return Math.pow(base, n);
+}
+
+/**
+A symmetric logarithm function. See https://github.com/nasa/openmct/issues/2297#issuecomment-1032914258
+@param {number} n
+@param {number=} base log base, defaults to e
+*/
+export function symlog(n, base = e) {
+  return Math.sign(n) * log(Math.abs(n) + 1, base);
+}
+
+/**
+An inverse symmetric logarithm function. See https://github.com/nasa/openmct/issues/2297#issuecomment-1032914258
+@param {number} n
+@param {number=} base log base, defaults to e
+*/
+export function antisymlog(n, base = e) {
+  return Math.sign(n) * (antilog(Math.abs(n), base) - 1);
+}
diff --git a/src/plugins/plot/overlayPlot/OverlayPlotCompositionPolicy.js b/src/plugins/plot/overlayPlot/OverlayPlotCompositionPolicy.js
index e769d0181b8..ca5185e8b04 100644
--- a/src/plugins/plot/overlayPlot/OverlayPlotCompositionPolicy.js
+++ b/src/plugins/plot/overlayPlot/OverlayPlotCompositionPolicy.js
@@ -1,29 +1,29 @@
 export default function OverlayPlotCompositionPolicy(openmct) {
-    function hasNumericTelemetry(domainObject) {
-        const hasTelemetry = openmct.telemetry.isTelemetryObject(domainObject);
-        if (!hasTelemetry) {
-            return false;
-        }
-
-        let metadata = openmct.telemetry.getMetadata(domainObject);
-
-        return metadata.values().length > 0 && hasDomainAndRange(metadata);
+  function hasNumericTelemetry(domainObject) {
+    const hasTelemetry = openmct.telemetry.isTelemetryObject(domainObject);
+    if (!hasTelemetry) {
+      return false;
     }
 
-    function hasDomainAndRange(metadata) {
-        return (metadata.valuesForHints(['range']).length > 0
-            && metadata.valuesForHints(['domain']).length > 0);
-    }
+    let metadata = openmct.telemetry.getMetadata(domainObject);
 
-    return {
-        allow: function (parent, child) {
+    return metadata.values().length > 0 && hasDomainAndRange(metadata);
+  }
 
-            if (parent.type === 'telemetry.plot.overlay'
-                && (hasNumericTelemetry(child) === false)) {
-                return false;
-            }
+  function hasDomainAndRange(metadata) {
+    return (
+      metadata.valuesForHints(['range']).length > 0 &&
+      metadata.valuesForHints(['domain']).length > 0
+    );
+  }
 
-            return true;
-        }
-    };
+  return {
+    allow: function (parent, child) {
+      if (parent.type === 'telemetry.plot.overlay' && hasNumericTelemetry(child) === false) {
+        return false;
+      }
+
+      return true;
+    }
+  };
 }
diff --git a/src/plugins/plot/overlayPlot/OverlayPlotViewProvider.js b/src/plugins/plot/overlayPlot/OverlayPlotViewProvider.js
index 415184281cf..b33ce4fe672 100644
--- a/src/plugins/plot/overlayPlot/OverlayPlotViewProvider.js
+++ b/src/plugins/plot/overlayPlot/OverlayPlotViewProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,57 +19,78 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+import mount from 'utils/mount';
 
-import Plot from '../Plot.vue';
-import Vue from 'vue';
+import Plot from '../PlotView.vue';
 
 export default function OverlayPlotViewProvider(openmct) {
-    function isCompactView(objectPath) {
-        return objectPath.find(object => object.type === 'time-strip');
-    }
+  function isCompactView(objectPath) {
+    let isChildOfTimeStrip = objectPath.find((object) => object.type === 'time-strip');
 
-    return {
-        key: 'plot-overlay',
-        name: 'Overlay Plot',
-        cssClass: 'icon-telemetry',
-        canView(domainObject, objectPath) {
-            return domainObject.type === 'telemetry.plot.overlay';
-        },
+    return isChildOfTimeStrip && !openmct.router.isNavigatedObject(objectPath);
+  }
 
-        canEdit(domainObject, objectPath) {
-            return domainObject.type === 'telemetry.plot.overlay';
-        },
+  return {
+    key: 'plot-overlay',
+    name: 'Overlay Plot',
+    cssClass: 'icon-telemetry',
+    canView(domainObject, objectPath) {
+      return domainObject.type === 'telemetry.plot.overlay';
+    },
+
+    canEdit(domainObject, objectPath) {
+      return domainObject.type === 'telemetry.plot.overlay';
+    },
 
-        view: function (domainObject, objectPath) {
-            let component;
+    view: function (domainObject, objectPath) {
+      let _destroy = null;
+      let component = null;
 
-            return {
-                show: function (element) {
-                    let isCompact = isCompactView(objectPath);
-                    component = new Vue({
-                        el: element,
-                        components: {
-                            Plot
-                        },
-                        provide: {
-                            openmct,
-                            domainObject
-                        },
-                        data() {
-                            return {
-                                options: {
-                                    compact: isCompact
-                                }
-                            };
-                        },
-                        template: '<plot :options="options"></plot>'
-                    });
-                },
-                destroy: function () {
-                    component.$destroy();
-                    component = undefined;
-                }
-            };
+      return {
+        show: function (element, isEditing, { renderWhenVisible }) {
+          let isCompact = isCompactView(objectPath);
+          const { vNode, destroy } = mount(
+            {
+              el: element,
+              components: {
+                Plot
+              },
+              provide: {
+                openmct,
+                domainObject,
+                path: objectPath,
+                renderWhenVisible
+              },
+              data() {
+                return {
+                  options: {
+                    compact: isCompact
+                  }
+                };
+              },
+              template: '<plot ref="plotComponent" :options="options"></plot>'
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+          component = vNode.componentInstance;
+        },
+        getViewContext() {
+          if (!component) {
+            return {};
+          }
+
+          return component.$refs.plotComponent.getViewContext();
+        },
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
         }
-    };
+      };
+    }
+  };
 }
diff --git a/src/plugins/plot/overlayPlot/pluginSpec.js b/src/plugins/plot/overlayPlot/pluginSpec.js
new file mode 100644
index 00000000000..92be833f314
--- /dev/null
+++ b/src/plugins/plot/overlayPlot/pluginSpec.js
@@ -0,0 +1,540 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import EventEmitter from 'EventEmitter';
+import mount from 'utils/mount';
+import {
+  createMouseEvent,
+  createOpenMct,
+  renderWhenVisible,
+  resetApplicationState,
+  spyOnBuiltins
+} from 'utils/testing';
+import { nextTick } from 'vue';
+
+import configStore from '../configuration/ConfigStore.js';
+import PlotOptions from '../inspector/PlotOptions.vue';
+import Plot from '../PlotView.vue';
+import PlotVuePlugin from '../plugin.js';
+
+describe('the plugin', function () {
+  let element;
+  let child;
+  let openmct;
+  let telemetryPromise;
+  let telemetryPromiseResolve;
+  let mockObjectPath;
+  let overlayPlotObject = {
+    identifier: {
+      namespace: '',
+      key: 'test-plot'
+    },
+    type: 'telemetry.plot.overlay',
+    name: 'Test Overlay Plot',
+    composition: [],
+    configuration: {
+      series: []
+    }
+  };
+
+  beforeEach((done) => {
+    mockObjectPath = [
+      {
+        name: 'mock folder',
+        type: 'fake-folder',
+        identifier: {
+          key: 'mock-folder',
+          namespace: ''
+        }
+      },
+      {
+        name: 'mock parent folder',
+        type: 'time-strip',
+        identifier: {
+          key: 'mock-parent-folder',
+          namespace: ''
+        }
+      }
+    ];
+    const testTelemetry = [
+      {
+        utc: 1,
+        'some-key': 'some-value 1',
+        'some-other-key': 'some-other-value 1',
+        'some-key2': 'some-value2 1',
+        'some-other-key2': 'some-other-value2 1'
+      },
+      {
+        utc: 2,
+        'some-key': 'some-value 2',
+        'some-other-key': 'some-other-value 2',
+        'some-key2': 'some-value2 2',
+        'some-other-key2': 'some-other-value2 2'
+      },
+      {
+        utc: 3,
+        'some-key': 'some-value 3',
+        'some-other-key': 'some-other-value 3',
+        'some-key2': 'some-value2 2',
+        'some-other-key2': 'some-other-value2 2'
+      }
+    ];
+
+    const timeSystem = {
+      timeSystemKey: 'utc',
+      bounds: {
+        start: 0,
+        end: 4
+      }
+    };
+
+    openmct = createOpenMct(timeSystem);
+
+    telemetryPromise = new Promise((resolve) => {
+      telemetryPromiseResolve = resolve;
+    });
+
+    spyOn(openmct.telemetry, 'request').and.callFake(() => {
+      telemetryPromiseResolve(testTelemetry);
+
+      return telemetryPromise;
+    });
+
+    openmct.install(new PlotVuePlugin());
+
+    element = document.createElement('div');
+    element.style.width = '640px';
+    element.style.height = '480px';
+    child = document.createElement('div');
+    child.style.width = '640px';
+    child.style.height = '480px';
+    element.appendChild(child);
+    document.body.appendChild(element);
+
+    spyOn(window, 'ResizeObserver').and.returnValue({
+      observe() {},
+      unobserve() {},
+      disconnect() {}
+    });
+
+    openmct.types.addType('test-object', {
+      creatable: true
+    });
+
+    spyOnBuiltins(['requestAnimationFrame']);
+    window.requestAnimationFrame.and.callFake((callBack) => {
+      callBack();
+    });
+
+    openmct.router.path = [overlayPlotObject];
+    openmct.on('start', done);
+    openmct.startHeadless();
+  });
+
+  afterEach(async () => {
+    openmct.time.timeSystem('utc', {
+      start: 0,
+      end: 1
+    });
+    configStore.deleteAll();
+    await resetApplicationState(openmct);
+  });
+
+  afterAll(() => {
+    openmct.router.path = null;
+  });
+
+  describe('the plot views', () => {
+    it('provides an overlay plot view for objects with telemetry', () => {
+      const testTelemetryObject = {
+        id: 'test-object',
+        type: 'telemetry.plot.overlay',
+        telemetry: {
+          values: [
+            {
+              key: 'some-key'
+            }
+          ]
+        }
+      };
+
+      const applicableViews = openmct.objectViews.get(testTelemetryObject, mockObjectPath);
+      let plotView = applicableViews.find((viewProvider) => viewProvider.key === 'plot-overlay');
+      expect(plotView).toBeDefined();
+    });
+  });
+
+  describe('The overlay plot view with multiple axes', () => {
+    let testTelemetryObject;
+    let testTelemetryObject2;
+    let config;
+    let mockComposition;
+    let destroyPlot;
+
+    afterAll(() => {
+      destroyPlot();
+      openmct.router.path = null;
+    });
+
+    beforeEach(async () => {
+      testTelemetryObject = {
+        identifier: {
+          namespace: '',
+          key: 'test-object'
+        },
+        type: 'test-object',
+        name: 'Test Object',
+        telemetry: {
+          values: [
+            {
+              key: 'utc',
+              format: 'utc',
+              name: 'Time',
+              hints: {
+                domain: 1
+              }
+            },
+            {
+              key: 'some-key',
+              name: 'Some attribute',
+              hints: {
+                range: 1
+              }
+            },
+            {
+              key: 'some-other-key',
+              name: 'Another attribute',
+              hints: {
+                range: 2
+              }
+            }
+          ]
+        }
+      };
+
+      testTelemetryObject2 = {
+        identifier: {
+          namespace: '',
+          key: 'test-object2'
+        },
+        type: 'test-object',
+        name: 'Test Object2',
+        telemetry: {
+          values: [
+            {
+              key: 'utc',
+              format: 'utc',
+              name: 'Time',
+              hints: {
+                domain: 1
+              }
+            },
+            {
+              key: 'some-key2',
+              name: 'Some attribute2',
+              hints: {
+                range: 1
+              }
+            },
+            {
+              key: 'some-other-key2',
+              name: 'Another attribute2',
+              hints: {
+                range: 2
+              }
+            }
+          ]
+        }
+      };
+      overlayPlotObject.composition = [
+        {
+          identifier: testTelemetryObject.identifier
+        },
+        {
+          identifier: testTelemetryObject2.identifier
+        }
+      ];
+      overlayPlotObject.configuration.series = [
+        {
+          identifier: testTelemetryObject.identifier,
+          yAxisId: 1
+        },
+        {
+          identifier: testTelemetryObject2.identifier,
+          yAxisId: 3
+        }
+      ];
+      overlayPlotObject.configuration.additionalYAxes = [
+        {
+          label: 'Test Object Label',
+          id: 2
+        },
+        {
+          label: 'Test Object 2 Label',
+          id: 3
+        }
+      ];
+      mockComposition = new EventEmitter();
+      mockComposition.load = () => {
+        mockComposition.emit('add', testTelemetryObject);
+        mockComposition.emit('add', testTelemetryObject2);
+
+        return [testTelemetryObject, testTelemetryObject2];
+      };
+
+      spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
+
+      let viewContainer = document.createElement('div');
+      child.appendChild(viewContainer);
+      const composition = openmct.composition.get(overlayPlotObject);
+      const { destroy } = mount(
+        {
+          components: {
+            Plot
+          },
+          provide: {
+            openmct,
+            domainObject: overlayPlotObject,
+            composition,
+            path: [overlayPlotObject],
+            renderWhenVisible
+          },
+          template: '<plot ref="plotComponent"></plot>'
+        },
+        {
+          element: child
+        }
+      );
+
+      destroyPlot = destroy;
+
+      await telemetryPromise;
+      await nextTick();
+
+      const configId = openmct.objects.makeKeyString(overlayPlotObject.identifier);
+      config = configStore.get(configId);
+    });
+
+    it('Renders multiple Y-axis for the telemetry objects', async () => {
+      config.yAxis.set('displayRange', {
+        min: 10,
+        max: 20
+      });
+      await nextTick();
+      let yAxisElement = element.querySelectorAll(
+        '.gl-plot-axis-area.gl-plot-y .gl-plot-tick-wrapper'
+      );
+      expect(yAxisElement.length).toBe(2);
+    });
+
+    describe('the inspector view', () => {
+      let inspectorComponent;
+      let viewComponentObject;
+      let selection;
+      let destroyPlotOptions;
+      beforeEach(async () => {
+        selection = [
+          [
+            {
+              context: {
+                item: {
+                  id: overlayPlotObject.identifier.key,
+                  identifier: overlayPlotObject.identifier,
+                  type: overlayPlotObject.type,
+                  configuration: overlayPlotObject.configuration,
+                  composition: overlayPlotObject.composition
+                }
+              }
+            }
+          ]
+        ];
+
+        const viewContainer = document.createElement('div');
+        child.appendChild(viewContainer);
+        const { vNode, destroy } = mount(
+          {
+            components: {
+              PlotOptions
+            },
+            provide: {
+              openmct,
+              domainObject: selection[0][0].context.item,
+              path: [selection[0][0].context.item]
+            },
+            template: '<plot-options ref="plotOptionsRef"/>'
+          },
+          {
+            element: viewContainer
+          }
+        );
+        inspectorComponent = vNode.componentInstance;
+        destroyPlotOptions = destroy;
+
+        await nextTick();
+        viewComponentObject = inspectorComponent.$refs.plotOptionsRef;
+      });
+
+      afterEach(() => {
+        destroyPlotOptions();
+        openmct.router.path = null;
+      });
+
+      describe('in edit mode', () => {
+        let editOptionsEl;
+
+        beforeEach(async () => {
+          viewComponentObject.setEditState(true);
+          await nextTick();
+          editOptionsEl = viewComponentObject.$el.querySelector('.js-plot-options-edit');
+        });
+
+        it('shows multiple yAxis options', () => {
+          const yAxisProperties = editOptionsEl.querySelectorAll(
+            '.js-yaxis-grid-properties .l-inspector-part h2'
+          );
+          expect(yAxisProperties.length).toEqual(2);
+        });
+
+        it('saves yAxis options', () => {
+          //toggle log mode and save
+          config.additionalYAxes[1].set('displayRange', {
+            min: 10,
+            max: 20
+          });
+          const yAxisProperties = editOptionsEl.querySelectorAll('.js-log-mode-input');
+          const clickEvent = createMouseEvent('click');
+          yAxisProperties[1].dispatchEvent(clickEvent);
+
+          expect(config.additionalYAxes[1].get('logMode')).toEqual(true);
+        });
+      });
+    });
+  });
+
+  describe('The overlay plot view with single axes', () => {
+    let testTelemetryObject;
+    let config;
+    let mockComposition;
+    let destroyOverlayPlot;
+
+    afterAll(() => {
+      destroyOverlayPlot();
+      openmct.router.path = null;
+    });
+
+    beforeEach(async () => {
+      testTelemetryObject = {
+        identifier: {
+          namespace: '',
+          key: 'test-object'
+        },
+        type: 'test-object',
+        name: 'Test Object',
+        telemetry: {
+          values: [
+            {
+              key: 'utc',
+              format: 'utc',
+              name: 'Time',
+              hints: {
+                domain: 1
+              }
+            },
+            {
+              key: 'some-key',
+              name: 'Some attribute',
+              hints: {
+                range: 1
+              }
+            },
+            {
+              key: 'some-other-key',
+              name: 'Another attribute',
+              hints: {
+                range: 2
+              }
+            }
+          ]
+        }
+      };
+
+      overlayPlotObject.composition = [
+        {
+          identifier: testTelemetryObject.identifier
+        }
+      ];
+      overlayPlotObject.configuration.series = [
+        {
+          identifier: testTelemetryObject.identifier
+        }
+      ];
+      mockComposition = new EventEmitter();
+      mockComposition.load = () => {
+        mockComposition.emit('add', testTelemetryObject);
+
+        return [testTelemetryObject];
+      };
+
+      spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
+      const composition = openmct.composition.get(overlayPlotObject);
+      const viewContainer = document.createElement('div');
+      child.appendChild(viewContainer);
+      const { destroy } = mount(
+        {
+          components: {
+            Plot
+          },
+          provide: {
+            openmct: openmct,
+            domainObject: overlayPlotObject,
+            composition,
+            path: [overlayPlotObject],
+            renderWhenVisible
+          },
+          template: '<plot ref="plotComponent"></plot>'
+        },
+        {
+          element: viewContainer
+        }
+      );
+
+      destroyOverlayPlot = destroy;
+
+      await telemetryPromise;
+      await nextTick();
+      const configId = openmct.objects.makeKeyString(overlayPlotObject.identifier);
+      config = configStore.get(configId);
+    });
+
+    it('Renders single Y-axis for the telemetry object', async () => {
+      config.yAxis.set('displayRange', {
+        min: 10,
+        max: 20
+      });
+      await nextTick();
+      let yAxisElement = element.querySelectorAll(
+        '.gl-plot-axis-area.gl-plot-y .gl-plot-tick-wrapper'
+      );
+      expect(yAxisElement.length).toBe(1);
+    });
+  });
+});
diff --git a/src/plugins/plot/plugin.js b/src/plugins/plot/plugin.js
index 091977d17aa..bd32ea4dcc4 100644
--- a/src/plugins/plot/plugin.js
+++ b/src/plugins/plot/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,53 +19,67 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-
-import PlotViewProvider from './PlotViewProvider';
-import OverlayPlotViewProvider from './overlayPlot/OverlayPlotViewProvider';
-import StackedPlotViewProvider from './stackedPlot/StackedPlotViewProvider';
-import PlotsInspectorViewProvider from './inspector/PlotsInspectorViewProvider';
-import OverlayPlotCompositionPolicy from './overlayPlot/OverlayPlotCompositionPolicy';
-import StackedPlotCompositionPolicy from './stackedPlot/StackedPlotCompositionPolicy';
+import PlotViewActions from './actions/ViewActions.js';
+import PlotsInspectorViewProvider from './inspector/PlotsInspectorViewProvider.js';
+import StackedPlotsInspectorViewProvider from './inspector/StackedPlotsInspectorViewProvider.js';
+import OverlayPlotCompositionPolicy from './overlayPlot/OverlayPlotCompositionPolicy.js';
+import OverlayPlotViewProvider from './overlayPlot/OverlayPlotViewProvider.js';
+import PlotViewProvider from './PlotViewProvider.js';
+import StackedPlotCompositionPolicy from './stackedPlot/StackedPlotCompositionPolicy.js';
+import stackedPlotConfigurationInterceptor from './stackedPlot/stackedPlotConfigurationInterceptor.js';
+import StackedPlotViewProvider from './stackedPlot/StackedPlotViewProvider.js';
 
 export default function () {
-    return function install(openmct) {
+  return function install(openmct) {
+    openmct.types.addType('telemetry.plot.overlay', {
+      key: 'telemetry.plot.overlay',
+      name: 'Overlay Plot',
+      cssClass: 'icon-plot-overlay',
+      description:
+        'Combine multiple telemetry elements and view them together as a plot with common X and Y axes. Can be added to Display Layouts.',
+      creatable: true,
+      initialize: function (domainObject) {
+        domainObject.composition = [];
+        domainObject.configuration = {
+          //series is an array of objects of type: {identifier, series: {color...}, yAxis:{}}
+          series: []
+        };
+      },
+      priority: 891
+    });
 
-        openmct.types.addType('telemetry.plot.overlay', {
-            key: "telemetry.plot.overlay",
-            name: "Overlay Plot",
-            cssClass: "icon-plot-overlay",
-            description: "Combine multiple telemetry elements and view them together as a plot with common X and Y axes. Can be added to Display Layouts.",
-            creatable: "true",
-            initialize: function (domainObject) {
-                domainObject.composition = [];
-                domainObject.configuration = {
-                    series: [],
-                    yAxis: {},
-                    xAxis: {}
-                };
-            },
-            priority: 891
-        });
+    openmct.types.addType('telemetry.plot.stacked', {
+      key: 'telemetry.plot.stacked',
+      name: 'Stacked Plot',
+      cssClass: 'icon-plot-stacked',
+      description:
+        'Combine multiple telemetry elements and view them together as a plot with a common X axis and individual Y axes. Can be added to Display Layouts.',
+      creatable: true,
+      initialize: function (domainObject) {
+        domainObject.composition = [];
+        domainObject.configuration = {
+          series: [],
+          yAxis: {},
+          xAxis: {}
+        };
+      },
+      priority: 890
+    });
 
-        openmct.types.addType('telemetry.plot.stacked', {
-            key: "telemetry.plot.stacked",
-            name: "Stacked Plot",
-            cssClass: "icon-plot-stacked",
-            description: "Combine multiple telemetry elements and view them together as a plot with a common X axis and individual Y axes. Can be added to Display Layouts.",
-            creatable: true,
-            initialize: function (domainObject) {
-                domainObject.composition = [];
-                domainObject.configuration = {};
-            },
-            priority: 890
-        });
+    stackedPlotConfigurationInterceptor(openmct);
 
-        openmct.objectViews.addProvider(new StackedPlotViewProvider(openmct));
-        openmct.objectViews.addProvider(new OverlayPlotViewProvider(openmct));
-        openmct.objectViews.addProvider(new PlotViewProvider(openmct));
-        openmct.inspectorViews.addProvider(new PlotsInspectorViewProvider(openmct));
-        openmct.composition.addPolicy(new OverlayPlotCompositionPolicy(openmct).allow);
-        openmct.composition.addPolicy(new StackedPlotCompositionPolicy(openmct).allow);
-    };
-}
+    openmct.objectViews.addProvider(new StackedPlotViewProvider(openmct));
+    openmct.objectViews.addProvider(new OverlayPlotViewProvider(openmct));
+    openmct.objectViews.addProvider(new PlotViewProvider(openmct));
+
+    openmct.inspectorViews.addProvider(new PlotsInspectorViewProvider(openmct));
+    openmct.inspectorViews.addProvider(new StackedPlotsInspectorViewProvider(openmct));
 
+    openmct.composition.addPolicy(new OverlayPlotCompositionPolicy(openmct).allow);
+    openmct.composition.addPolicy(new StackedPlotCompositionPolicy(openmct).allow);
+
+    PlotViewActions.forEach((action) => {
+      openmct.actions.register(action);
+    });
+  };
+}
diff --git a/src/plugins/plot/pluginSpec.js b/src/plugins/plot/pluginSpec.js
index e3d18876a76..fedfa8053e9 100644
--- a/src/plugins/plot/pluginSpec.js
+++ b/src/plugins/plot/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,973 +20,933 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import {createMouseEvent, createOpenMct, resetApplicationState, spyOnBuiltins} from "utils/testing";
-import PlotVuePlugin from "./plugin";
-import Vue from "vue";
-import StackedPlot from "./stackedPlot/StackedPlot.vue";
-import configStore from "./configuration/configStore";
-import EventEmitter from "EventEmitter";
-import PlotOptions from "./inspector/PlotOptions.vue";
-import PlotConfigurationModel from "./configuration/PlotConfigurationModel";
-
-describe("the plugin", function () {
-    let element;
-    let child;
-    let openmct;
-    let telemetryPromise;
-    let telemetryPromiseResolve;
-    let cleanupFirst;
-    let mockObjectPath;
-    let telemetrylimitProvider;
+import EventEmitter from 'EventEmitter';
+import mount from 'utils/mount';
+import {
+  createMouseEvent,
+  createOpenMct,
+  renderWhenVisible,
+  resetApplicationState,
+  spyOnBuiltins
+} from 'utils/testing';
+import { nextTick } from 'vue';
+
+import configStore from './configuration/ConfigStore.js';
+import PlotConfigurationModel from './configuration/PlotConfigurationModel.js';
+import PlotOptions from './inspector/PlotOptions.vue';
+import PlotVuePlugin from './plugin.js';
+
+const TEST_KEY_ID = 'some-other-key';
+
+describe('the plugin', function () {
+  let element;
+  let child;
+  let openmct;
+  let telemetryPromise;
+  let telemetryPromiseResolve;
+  let mockObjectPath;
+  let telemetrylimitProvider;
+
+  beforeEach((done) => {
+    mockObjectPath = [
+      {
+        name: 'mock folder',
+        type: 'fake-folder',
+        identifier: {
+          key: 'mock-folder',
+          namespace: ''
+        }
+      },
+      {
+        name: 'mock parent folder',
+        type: 'time-strip',
+        identifier: {
+          key: 'mock-parent-folder',
+          namespace: ''
+        }
+      }
+    ];
+    const testTelemetry = [
+      {
+        utc: 1,
+        'some-key': 'some-value 1',
+        'some-other-key': 'some-other-value 1'
+      },
+      {
+        utc: 2,
+        'some-key': 'some-value 2',
+        'some-other-key': 'some-other-value 2'
+      },
+      {
+        utc: 3,
+        'some-key': 'some-value 3',
+        'some-other-key': 'some-other-value 3'
+      }
+    ];
+
+    const timeSystem = {
+      timeSystemKey: 'utc',
+      bounds: {
+        start: 0,
+        end: 4
+      }
+    };
+
+    openmct = createOpenMct(timeSystem);
+
+    telemetryPromise = new Promise((resolve) => {
+      telemetryPromiseResolve = resolve;
+    });
 
-    beforeEach((done) => {
-        mockObjectPath = [
-            {
-                name: 'mock folder',
-                type: 'fake-folder',
-                identifier: {
-                    key: 'mock-folder',
-                    namespace: ''
-                }
+    spyOn(openmct.telemetry, 'request').and.callFake(() => {
+      telemetryPromiseResolve(testTelemetry);
+
+      return telemetryPromise;
+    });
+
+    telemetrylimitProvider = jasmine.createSpyObj('telemetrylimitProvider', [
+      'supportsLimits',
+      'getLimits',
+      'getLimitEvaluator'
+    ]);
+    telemetrylimitProvider.supportsLimits.and.returnValue(true);
+    telemetrylimitProvider.getLimits.and.returnValue({
+      limits: function () {
+        return Promise.resolve({
+          WARNING: {
+            low: {
+              cssClass: 'is-limit--lwr is-limit--yellow',
+              'some-key': -0.5
             },
-            {
-                name: 'mock parent folder',
-                type: 'time-strip',
-                identifier: {
-                    key: 'mock-parent-folder',
-                    namespace: ''
-                }
+            high: {
+              cssClass: 'is-limit--upr is-limit--yellow',
+              'some-key': 0.5
             }
-        ];
-        const testTelemetry = [
-            {
-                'utc': 1,
-                'some-key': 'some-value 1',
-                'some-other-key': 'some-other-value 1'
+          },
+          DISTRESS: {
+            low: {
+              cssClass: 'is-limit--lwr is-limit--red',
+              'some-key': -0.9
             },
-            {
-                'utc': 2,
-                'some-key': 'some-value 2',
-                'some-other-key': 'some-other-value 2'
-            },
-            {
-                'utc': 3,
-                'some-key': 'some-value 3',
-                'some-other-key': 'some-other-value 3'
+            high: {
+              cssClass: 'is-limit--upr is-limit--red',
+              'some-key': 0.9
             }
-        ];
-        cleanupFirst = [];
-
-        openmct = createOpenMct();
-
-        telemetryPromise = new Promise((resolve) => {
-            telemetryPromiseResolve = resolve;
+          }
         });
+      }
+    });
+    telemetrylimitProvider.getLimitEvaluator.and.returnValue({
+      evaluate: function () {
+        return {};
+      }
+    });
+    openmct.telemetry.addProvider(telemetrylimitProvider);
 
-        spyOn(openmct.telemetry, 'request').and.callFake(() => {
-            telemetryPromiseResolve(testTelemetry);
-
-            return telemetryPromise;
-        });
+    openmct.install(new PlotVuePlugin());
 
-        telemetrylimitProvider = jasmine.createSpyObj('telemetrylimitProvider', [
-            'supportsLimits',
-            'getLimits',
-            'getLimitEvaluator'
-        ]);
-        telemetrylimitProvider.supportsLimits.and.returnValue(true);
-        telemetrylimitProvider.getLimits.and.returnValue({
-            limits: function () {
-                return Promise.resolve({
-                    WARNING: {
-                        low: {
-                            cssClass: "is-limit--lwr is-limit--yellow",
-                            'some-key': -0.5
-                        },
-                        high: {
-                            cssClass: "is-limit--upr is-limit--yellow",
-                            'some-key': 0.5
-                        }
-                    },
-                    DISTRESS: {
-                        low: {
-                            cssClass: "is-limit--lwr is-limit--red",
-                            'some-key': -0.9
-                        },
-                        high: {
-                            cssClass: "is-limit--upr is-limit--red",
-                            'some-key': 0.9
-                        }
-                    }
-                });
-            }
-        });
-        telemetrylimitProvider.getLimitEvaluator.and.returnValue({
-            evaluate: function () {
-                return {};
-            }
-        });
-        openmct.telemetry.addProvider(telemetrylimitProvider);
-
-        openmct.install(new PlotVuePlugin());
-
-        element = document.createElement("div");
-        element.style.width = "640px";
-        element.style.height = "480px";
-        child = document.createElement("div");
-        child.style.width = "640px";
-        child.style.height = "480px";
-        element.appendChild(child);
-        document.body.appendChild(element);
-
-        spyOn(window, 'ResizeObserver').and.returnValue({
-            observe() {},
-            disconnect() {}
-        });
+    element = document.createElement('div');
+    element.style.width = '640px';
+    element.style.height = '480px';
+    child = document.createElement('div');
+    child.style.width = '640px';
+    child.style.height = '480px';
+    element.appendChild(child);
+    document.body.appendChild(element);
 
-        openmct.time.timeSystem("utc", {
-            start: 0,
-            end: 4
-        });
+    openmct.types.addType('test-object', {
+      creatable: true
+    });
 
-        openmct.types.addType("test-object", {
-            creatable: true
-        });
+    spyOnBuiltins(['requestAnimationFrame']);
+    window.requestAnimationFrame.and.callFake((callBack) => {
+      callBack();
+    });
 
-        spyOnBuiltins(["requestAnimationFrame"]);
-        window.requestAnimationFrame.and.callFake((callBack) => {
-            callBack();
-        });
+    openmct.on('start', done);
+    openmct.startHeadless();
+  });
 
-        openmct.on("start", done);
-        openmct.startHeadless();
+  afterEach(async () => {
+    openmct.time.setTimeSystem('utc', {
+      start: 0,
+      end: 2
     });
 
-    afterEach((done) => {
-        openmct.time.timeSystem('utc', {
-            start: 0,
-            end: 1
-        });
-
-        // Needs to be in a timeout because plots use a bunch of setTimeouts, some of which can resolve during or after
-        // teardown, which causes problems
-        // This is hacky, we should find a better approach here.
-        setTimeout(() => {
-            //Cleanup code that needs to happen before dom elements start being destroyed
-            cleanupFirst.forEach(cleanup => cleanup());
-            cleanupFirst = [];
-            document.body.removeChild(element);
+    await nextTick();
+    configStore.deleteAll();
+    return resetApplicationState(openmct);
+  });
+
+  describe('the plot views', () => {
+    it('provides a plot view for objects with telemetry', () => {
+      const testTelemetryObject = {
+        id: 'test-object',
+        type: 'test-object',
+        telemetry: {
+          values: [
+            {
+              key: 'some-key',
+              hints: {
+                domain: 1
+              }
+            },
+            {
+              key: 'other-key',
+              hints: {
+                range: 1
+              }
+            },
+            {
+              key: 'yet-another-key',
+              format: 'string',
+              hints: {
+                range: 2
+              }
+            }
+          ]
+        }
+      };
 
-            configStore.deleteAll();
+      const applicableViews = openmct.objectViews.get(testTelemetryObject, mockObjectPath);
+      const plotView = applicableViews.find((viewProvider) => viewProvider.key === 'plot-single');
 
-            resetApplicationState(openmct).then(done).catch(done);
-        });
+      expect(plotView).toBeDefined();
     });
 
-    describe("the plot views", () => {
+    it('does not provide a plot view if the telemetry is entirely non numeric', () => {
+      const testTelemetryObject = {
+        id: 'test-object',
+        type: 'test-object',
+        telemetry: {
+          values: [
+            {
+              key: 'some-key',
+              hints: {
+                domain: 1
+              }
+            },
+            {
+              key: 'other-key',
+              format: 'string',
+              hints: {
+                range: 1
+              }
+            },
+            {
+              key: 'yet-another-key',
+              format: 'string',
+              hints: {
+                range: 1
+              }
+            }
+          ]
+        }
+      };
 
-        it("provides a plot view for objects with telemetry", () => {
-            const testTelemetryObject = {
-                id: "test-object",
-                type: "test-object",
-                telemetry: {
-                    values: [{
-                        key: "some-key",
-                        hints: {
-                            domain: 1
-                        }
-                    },
-                    {
-                        key: "other-key",
-                        hints: {
-                            range: 1
-                        }
-                    },
-                    {
-                        key: "yet-another-key",
-                        format: "string",
-                        hints: {
-                            range: 2
-                        }
-                    }]
-                }
-            };
+      const applicableViews = openmct.objectViews.get(testTelemetryObject, mockObjectPath);
+      const plotView = applicableViews.find((viewProvider) => viewProvider.key === 'plot-single');
 
-            const applicableViews = openmct.objectViews.get(testTelemetryObject, mockObjectPath);
-            const plotView = applicableViews.find((viewProvider) => viewProvider.key === "plot-single");
+      expect(plotView).toBeUndefined();
+    });
 
-            expect(plotView).toBeDefined();
-        });
+    it('provides an overlay plot view for objects with telemetry', () => {
+      const testTelemetryObject = {
+        id: 'test-object',
+        type: 'telemetry.plot.overlay',
+        telemetry: {
+          values: [
+            {
+              key: 'some-key'
+            }
+          ]
+        }
+      };
 
-        it("does not provide a plot view if the telemetry is entirely non numeric", () => {
-            const testTelemetryObject = {
-                id: "test-object",
-                type: "test-object",
+      const applicableViews = openmct.objectViews.get(testTelemetryObject, mockObjectPath);
+      let plotView = applicableViews.find((viewProvider) => viewProvider.key === 'plot-overlay');
+      expect(plotView).toBeDefined();
+    });
+
+    it('provides an inspector view for overlay plots', () => {
+      let selection = [
+        [
+          {
+            context: {
+              item: {
+                id: 'test-object',
+                type: 'telemetry.plot.overlay',
                 telemetry: {
-                    values: [{
-                        key: "some-key",
-                        hints: {
-                            domain: 1
-                        }
-                    },
-                    {
-                        key: "other-key",
-                        format: "string",
-                        hints: {
-                            range: 1
-                        }
-                    },
+                  values: [
                     {
-                        key: "yet-another-key",
-                        format: "string",
-                        hints: {
-                            range: 1
-                        }
-                    }]
+                      key: 'some-key'
+                    }
+                  ]
                 }
-            };
+              }
+            }
+          },
+          {
+            context: {
+              item: {
+                type: 'time-strip'
+              }
+            }
+          }
+        ]
+      ];
+      const applicableInspectorViews = openmct.inspectorViews.get(selection);
+      const plotInspectorView = applicableInspectorViews.find(
+        (view) => view.key === 'plots-inspector'
+      );
+
+      expect(plotInspectorView).toBeDefined();
+    });
 
-            const applicableViews = openmct.objectViews.get(testTelemetryObject, mockObjectPath);
-            const plotView = applicableViews.find((viewProvider) => viewProvider.key === "plot-single");
+    it('provides a stacked plot view for objects with telemetry', () => {
+      const testTelemetryObject = {
+        id: 'test-object',
+        type: 'telemetry.plot.stacked',
+        telemetry: {
+          values: [
+            {
+              key: 'some-key'
+            }
+          ]
+        }
+      };
 
-            expect(plotView).toBeUndefined();
-        });
+      const applicableViews = openmct.objectViews.get(testTelemetryObject, mockObjectPath);
+      let plotView = applicableViews.find((viewProvider) => viewProvider.key === 'plot-stacked');
+      expect(plotView).toBeDefined();
+    });
+  });
+
+  describe('The single plot view', () => {
+    let testTelemetryObject;
+    let applicableViews;
+    let plotViewProvider;
+    let plotView;
+
+    beforeEach(() => {
+      openmct.time.timeSystem('utc', {
+        start: 0,
+        end: 4
+      });
+      testTelemetryObject = {
+        identifier: {
+          namespace: '',
+          key: 'test-object'
+        },
+        type: 'test-object',
+        name: 'Test Object',
+        telemetry: {
+          values: [
+            {
+              key: 'utc',
+              format: 'utc',
+              name: 'Time',
+              hints: {
+                domain: 1
+              }
+            },
+            {
+              key: 'some-key',
+              name: 'Some attribute',
+              hints: {
+                range: 1
+              }
+            },
+            {
+              key: 'some-other-key',
+              name: 'Another attribute',
+              hints: {
+                range: 2
+              }
+            }
+          ]
+        }
+      };
 
-        it("provides an overlay plot view for objects with telemetry", () => {
-            const testTelemetryObject = {
-                id: "test-object",
-                type: "telemetry.plot.overlay",
-                telemetry: {
-                    values: [{
-                        key: "some-key"
-                    }]
-                }
-            };
+      openmct.router.path = [testTelemetryObject];
 
-            const applicableViews = openmct.objectViews.get(testTelemetryObject, mockObjectPath);
-            let plotView = applicableViews.find((viewProvider) => viewProvider.key === "plot-overlay");
-            expect(plotView).toBeDefined();
-        });
+      applicableViews = openmct.objectViews.get(testTelemetryObject, mockObjectPath);
+      plotViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'plot-single');
+      plotView = plotViewProvider.view(testTelemetryObject, []);
+      plotView.show(child, true, { renderWhenVisible });
 
-        it('provides an inspector view for overlay plots', () => {
-            let selection = [
-                [
-                    {
-                        context: {
-                            item: {
-                                id: "test-object",
-                                type: "telemetry.plot.overlay",
-                                telemetry: {
-                                    values: [{
-                                        key: "some-key"
-                                    }]
-                                }
-                            }
-                        }
-                    },
-                    {
-                        context: {
-                            item: {
-                                type: 'time-strip'
-                            }
-                        }
-                    }
-                ]
-            ];
-            const plotInspectorView = openmct.inspectorViews.get(selection);
-            expect(plotInspectorView.length).toEqual(1);
-        });
+      return nextTick();
+    });
 
-        it("provides a stacked plot view for objects with telemetry", () => {
-            const testTelemetryObject = {
-                id: "test-object",
-                type: "telemetry.plot.stacked",
-                telemetry: {
-                    values: [{
-                        key: "some-key"
-                    }]
-                }
-            };
+    afterEach(() => {
+      openmct.router.path = null;
+    });
 
-            const applicableViews = openmct.objectViews.get(testTelemetryObject, mockObjectPath);
-            let plotView = applicableViews.find((viewProvider) => viewProvider.key === "plot-stacked");
-            expect(plotView).toBeDefined();
-        });
+    it('Makes only one request for telemetry on load', () => {
+      expect(openmct.telemetry.request).toHaveBeenCalledTimes(1);
     });
 
-    describe("The single plot view", () => {
-        let testTelemetryObject;
-        let applicableViews;
-        let plotViewProvider;
-        let plotView;
+    it('Renders a collapsed legend for every telemetry', async () => {
+      await nextTick();
+      let legend = element.querySelectorAll('.plot-wrapper-collapsed-legend .plot-series-name');
+      expect(legend.length).toBe(1);
+      expect(legend[0].innerHTML).toEqual('Test Object');
+    });
 
-        beforeEach(() => {
-            openmct.time.timeSystem("utc", {
-                start: 0,
-                end: 4
-            });
-            testTelemetryObject = {
-                identifier: {
-                    namespace: "",
-                    key: "test-object"
-                },
-                type: "test-object",
-                name: "Test Object",
-                telemetry: {
-                    values: [{
-                        key: "utc",
-                        format: "utc",
-                        name: "Time",
-                        hints: {
-                            domain: 1
-                        }
-                    }, {
-                        key: "some-key",
-                        name: "Some attribute",
-                        hints: {
-                            range: 1
-                        }
-                    }, {
-                        key: "some-other-key",
-                        name: "Another attribute",
-                        hints: {
-                            range: 2
-                        }
-                    }]
-                }
-            };
+    it('Renders an expanded legend for every telemetry', async () => {
+      await nextTick();
+      let legendControl = element.querySelector(
+        '.c-plot-legend__view-control.gl-plot-legend__view-control.c-disclosure-triangle'
+      );
+      const clickEvent = createMouseEvent('click');
 
-            applicableViews = openmct.objectViews.get(testTelemetryObject, mockObjectPath);
-            plotViewProvider = applicableViews.find((viewProvider) => viewProvider.key === "plot-single");
-            plotView = plotViewProvider.view(testTelemetryObject, [testTelemetryObject]);
-            plotView.show(child, true);
+      legendControl.dispatchEvent(clickEvent);
+      await nextTick();
 
-            cleanupFirst.push(() => {
-                plotView.destroy();
-            });
+      let legend = element.querySelectorAll('.plot-wrapper-expanded-legend .plot-legend-item td');
+      expect(legend.length).toBe(6);
+    });
 
-            return Vue.nextTick();
-        });
+    it('Renders X-axis ticks for the telemetry object', (done) => {
+      const configId = openmct.objects.makeKeyString(testTelemetryObject.identifier);
+      const config = configStore.get(configId);
+      config.xAxis.set('displayRange', {
+        min: 0,
+        max: 4
+      });
+
+      nextTick(() => {
+        let xAxisElement = element.querySelectorAll(
+          '.gl-plot-axis-area.gl-plot-x .gl-plot-tick-wrapper'
+        );
+        expect(xAxisElement.length).toBe(1);
+
+        let ticks = xAxisElement[0].querySelectorAll('.gl-plot-tick');
+        expect(ticks.length).toBe(9);
+
+        done();
+      });
+    });
 
-        it("Renders a collapsed legend for every telemetry", () => {
-            let legend = element.querySelectorAll(".plot-wrapper-collapsed-legend .plot-series-name");
-            expect(legend.length).toBe(1);
-            expect(legend[0].innerHTML).toEqual("Test Object");
-        });
+    it('Renders Y-axis options for the telemetry object', async () => {
+      await nextTick();
+      let yAxisElement = element.querySelectorAll(
+        '.gl-plot-axis-area.gl-plot-y .gl-plot-y-label__select'
+      );
+      expect(yAxisElement.length).toBe(1);
+      //Object{name: "Some attribute", key: "some-key"}, Object{name: "Another attribute", key: "some-other-key"}
+      let options = yAxisElement[0].querySelectorAll('option');
+      expect(options.length).toBe(2);
+      expect(options[0].value).toBe('Some attribute');
+      expect(options[1].value).toBe('Another attribute');
+    });
 
-        it("Renders an expanded legend for every telemetry", () => {
-            let legendControl = element.querySelector(".c-plot-legend__view-control.gl-plot-legend__view-control.c-disclosure-triangle");
-            const clickEvent = createMouseEvent("click");
+    xit('Updates the Y-axis label when changed', () => {
+      const configId = openmct.objects.makeKeyString(testTelemetryObject.identifier);
+      const config = configStore.get(configId);
+      const yAxisElement = element.querySelectorAll('.gl-plot-axis-area.gl-plot-y')[0].__vue__;
+      config.yAxis.seriesCollection.models.forEach((plotSeries) => {
+        expect(plotSeries.model.yKey).toBe('some-key');
+      });
+
+      yAxisElement.$emit('y-key-changed', TEST_KEY_ID, 1);
+      config.yAxis.seriesCollection.models.forEach((plotSeries) => {
+        expect(plotSeries.model.yKey).toBe(TEST_KEY_ID);
+      });
+    });
 
-            legendControl.dispatchEvent(clickEvent);
+    it('hides the pause and play controls', () => {
+      let pauseEl = element.querySelectorAll('.c-button-set .icon-pause');
+      let playEl = element.querySelectorAll('.c-button-set .icon-arrow-right');
+      expect(pauseEl.length).toBe(0);
+      expect(playEl.length).toBe(0);
+    });
 
-            let legend = element.querySelectorAll(".plot-wrapper-expanded-legend .plot-legend-item td");
-            expect(legend.length).toBe(6);
+    describe('pause and play controls', () => {
+      beforeEach(() => {
+        openmct.time.setClock('local');
+        openmct.time.setClockOffsets({
+          start: -1000,
+          end: 100
         });
 
-        it("Renders X-axis ticks for the telemetry object", () => {
-            let xAxisElement = element.querySelectorAll(".gl-plot-axis-area.gl-plot-x .gl-plot-tick-wrapper");
-            expect(xAxisElement.length).toBe(1);
+        return nextTick();
+      });
 
-            let ticks = xAxisElement[0].querySelectorAll(".gl-plot-tick");
-            expect(ticks.length).toBe(5);
+      it('shows the pause controls', (done) => {
+        nextTick(() => {
+          let pauseEl = element.querySelectorAll('.c-button-set .icon-pause');
+          expect(pauseEl.length).toBe(1);
+          done();
         });
+      });
 
-        it("Renders Y-axis options for the telemetry object", () => {
-            let yAxisElement = element.querySelectorAll(".gl-plot-axis-area.gl-plot-y .gl-plot-y-label__select");
-            expect(yAxisElement.length).toBe(1);
-            //Object{name: "Some attribute", key: "some-key"}, Object{name: "Another attribute", key: "some-other-key"}
-            let options = yAxisElement[0].querySelectorAll("option");
-            expect(options.length).toBe(2);
-            expect(options[0].value).toBe("Some attribute");
-            expect(options[1].value).toBe("Another attribute");
-        });
+      it('shows the play control if plot is paused', (done) => {
+        let pauseEl = element.querySelector('.c-button-set .icon-pause');
+        const clickEvent = createMouseEvent('click');
 
-        it('hides the pause and play controls', () => {
-            let pauseEl = element.querySelectorAll(".c-button-set .icon-pause");
-            let playEl = element.querySelectorAll(".c-button-set .icon-arrow-right");
-            expect(pauseEl.length).toBe(0);
-            expect(playEl.length).toBe(0);
+        pauseEl.dispatchEvent(clickEvent);
+        nextTick(() => {
+          let playEl = element.querySelectorAll('.c-button-set .is-paused');
+          expect(playEl.length).toBe(1);
+          done();
         });
+      });
+    });
 
-        describe('pause and play controls', () => {
-            beforeEach(() => {
-                openmct.time.clock('local', {
-                    start: -1000,
-                    end: 100
-                });
-
-                return Vue.nextTick();
-            });
-
-            it('shows the pause controls', (done) => {
-                Vue.nextTick(() => {
-                    let pauseEl = element.querySelectorAll(".c-button-set .icon-pause");
-                    expect(pauseEl.length).toBe(1);
-                    done();
-                });
-
-            });
-
-            it('shows the play control if plot is paused', (done) => {
-                let pauseEl = element.querySelector(".c-button-set .icon-pause");
-                const clickEvent = createMouseEvent("click");
-
-                pauseEl.dispatchEvent(clickEvent);
-                Vue.nextTick(() => {
-                    let playEl = element.querySelectorAll(".c-button-set .is-paused");
-                    expect(playEl.length).toBe(1);
-                    done();
-                });
-
-            });
-        });
-
-        describe('controls in time strip view', () => {
-
-            it('zoom controls are hidden', () => {
-                let pauseEl = element.querySelectorAll(".c-button-set .js-zoom");
-                expect(pauseEl.length).toBe(0);
-            });
+    describe('resume actions on errant click', () => {
+      beforeEach(() => {
+        openmct.time.setClock('local');
+        openmct.time.setClockOffsets({
+          start: -1000,
+          end: 100
+        });
+
+        return nextTick();
+      });
+
+      it('clicking the plot view without movement resumes the plot while active', async () => {
+        const pauseEl = element.querySelectorAll('.c-button-set .icon-pause');
+        // if the pause button is present, the chart is running
+        expect(pauseEl.length).toBe(1);
+
+        // simulate an errant mouse click
+        // the second item is the canvas we need to use
+        const canvas = element.querySelectorAll('canvas')[1];
+        const mouseDownEvent = new MouseEvent('mousedown');
+        const mouseUpEvent = new MouseEvent('mouseup');
+        canvas.dispatchEvent(mouseDownEvent);
+        // mouseup event is bound to the window
+        window.dispatchEvent(mouseUpEvent);
+        await nextTick();
+
+        const pauseElAfterClick = element.querySelectorAll('.c-button-set .icon-pause');
+        console.log('pauseElAfterClick', pauseElAfterClick);
+        expect(pauseElAfterClick.length).toBe(1);
+      });
+
+      it('clicking the plot view without movement leaves the plot paused', async () => {
+        const pauseEl = element.querySelector('.c-button-set .icon-pause');
+        // pause the plot
+        pauseEl.dispatchEvent(createMouseEvent('click'));
+        await nextTick();
+
+        const playEl = element.querySelectorAll('.c-button-set .is-paused');
+        expect(playEl.length).toBe(1);
+
+        // simulate an errant mouse click
+        // the second item is the canvas we need to use
+        const canvas = element.querySelectorAll('canvas')[1];
+        const mouseDownEvent = new MouseEvent('mousedown');
+        const mouseUpEvent = new MouseEvent('mouseup');
+        canvas.dispatchEvent(mouseDownEvent);
+        // mouseup event is bound to the window
+        window.dispatchEvent(mouseUpEvent);
+        await nextTick();
+
+        const playElAfterChartClick = element.querySelectorAll('.c-button-set .is-paused');
+        expect(playElAfterChartClick.length).toBe(1);
+      });
+
+      it('clicking the plot does not request historical data', async () => {
+        expect(openmct.telemetry.request).toHaveBeenCalledTimes(2);
+
+        // simulate an errant mouse click
+        // the second item is the canvas we need to use
+        const canvas = element.querySelectorAll('canvas')[1];
+        const mouseDownEvent = new MouseEvent('mousedown');
+        const mouseUpEvent = new MouseEvent('mouseup');
+        canvas.dispatchEvent(mouseDownEvent);
+        // mouseup event is bound to the window
+        window.dispatchEvent(mouseUpEvent);
+        await nextTick();
+
+        expect(openmct.telemetry.request).toHaveBeenCalledTimes(2);
+      });
+
+      describe('limits', () => {
+        it('lines are not displayed by default', () => {
+          let limitEl = element.querySelectorAll('.js-limit-area .js-limit-line');
+          expect(limitEl.length).toBe(0);
+        });
+
+        it('lines are displayed when configuration is set to true', async () => {
+          await nextTick();
+          const configId = openmct.objects.makeKeyString(testTelemetryObject.identifier);
+          const config = configStore.get(configId);
+          config.yAxis.set('displayRange', {
+            min: 0,
+            max: 4
+          });
+          config.series.models[0].set('limitLines', true);
+
+          await nextTick();
+          let limitEl = element.querySelectorAll('.js-limit-area .js-limit-line');
+          expect(limitEl.length).toBe(4);
+        });
+      });
+    });
 
-            it('pan controls are hidden', () => {
-                let pauseEl = element.querySelectorAll(".c-button-set .js-pan");
-                expect(pauseEl.length).toBe(0);
-            });
+    describe('controls in time strip view', () => {
+      it('zoom controls are hidden', () => {
+        let pauseEl = element.querySelectorAll('.c-button-set .js-zoom');
+        expect(pauseEl.length).toBe(0);
+      });
+
+      it('pan controls are hidden', () => {
+        let pauseEl = element.querySelectorAll('.c-button-set .js-pan');
+        expect(pauseEl.length).toBe(0);
+      });
+
+      it('pause/play controls are hidden', () => {
+        let pauseEl = element.querySelectorAll('.c-button-set .js-pause');
+        expect(pauseEl.length).toBe(0);
+      });
+    });
+  });
+
+  describe('resizing the plot', () => {
+    let plotContainerResizeObserver;
+    let resizePromiseResolve;
+    let testTelemetryObject;
+    let applicableViews;
+    let plotViewProvider;
+    let plotView;
+    let resizePromise;
+
+    beforeEach(() => {
+      testTelemetryObject = {
+        identifier: {
+          namespace: '',
+          key: 'test-object'
+        },
+        type: 'test-object',
+        name: 'Test Object',
+        telemetry: {
+          values: [
+            {
+              key: 'utc',
+              format: 'utc',
+              name: 'Time',
+              hints: {
+                domain: 1
+              }
+            },
+            {
+              key: 'some-key',
+              name: 'Some attribute',
+              hints: {
+                range: 1
+              }
+            },
+            {
+              key: 'some-other-key',
+              name: 'Another attribute',
+              hints: {
+                range: 2
+              }
+            }
+          ]
+        }
+      };
+
+      openmct.router.path = [testTelemetryObject];
+
+      applicableViews = openmct.objectViews.get(testTelemetryObject, mockObjectPath);
+      plotViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'plot-single');
+      plotView = plotViewProvider.view(testTelemetryObject, []);
+
+      plotView.show(child, true, { renderWhenVisible });
+
+      resizePromise = new Promise((resolve) => {
+        resizePromiseResolve = resolve;
+      });
+
+      const handlePlotResize = _.debounce(() => {
+        resizePromiseResolve(true);
+      }, 600);
+
+      plotContainerResizeObserver = new ResizeObserver(handlePlotResize);
+      plotContainerResizeObserver.observe(
+        plotView.getComponent().$refs.plotComponent.$refs.plotWrapper
+      );
+
+      return nextTick(() => {
+        plotView.getComponent().$refs.plotComponent.$refs.mctPlot.stopFollowingTimeContext();
+        spyOn(
+          plotView.getComponent().$refs.plotComponent.$refs.mctPlot,
+          'loadSeriesData'
+        ).and.callThrough();
+      });
+    });
 
-            it('pause/play controls are hidden', () => {
-                let pauseEl = element.querySelectorAll(".c-button-set .js-pause");
-                expect(pauseEl.length).toBe(0);
-            });
+    afterEach(() => {
+      plotContainerResizeObserver.disconnect();
+      openmct.router.path = null;
+    });
 
-        });
+    xit('requests historical data when over the threshold', async () => {
+      await nextTick();
+      element.style.width = '680px';
+      await resizePromise;
+      expect(
+        plotView.getComponent().$refs.plotComponent.$refs.mctPlot.loadSeriesData
+      ).toHaveBeenCalledTimes(1);
     });
 
-    describe("The stacked plot view", () => {
-        let testTelemetryObject;
-        let testTelemetryObject2;
-        let config;
-        let stackedPlotObject;
-        let component;
-        let mockComposition;
-        let plotViewComponentObject;
-
-        beforeEach(() => {
-            const getFunc = openmct.$injector.get;
-            spyOn(openmct.$injector, "get")
-                .withArgs("exportImageService").and.returnValue({
-                    exportPNG: () => {},
-                    exportJPG: () => {}
-                })
-                .and.callFake(getFunc);
-
-            stackedPlotObject = {
+    it('does not request historical data when under the threshold', async () => {
+      element.style.width = '644px';
+      await resizePromise;
+      expect(
+        plotView.getComponent().$refs.plotComponent.$refs.mctPlot.loadSeriesData
+      ).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('the inspector view', () => {
+    let component;
+    let viewComponentObject;
+    let mockComposition;
+    let testTelemetryObject;
+    let selection;
+    let config;
+    beforeEach((done) => {
+      testTelemetryObject = {
+        identifier: {
+          namespace: '',
+          key: 'test-object'
+        },
+        type: 'test-object',
+        name: 'Test Object',
+        telemetry: {
+          values: [
+            {
+              key: 'utc',
+              format: 'utc',
+              name: 'Time',
+              hints: {
+                domain: 1
+              }
+            },
+            {
+              key: 'some-key',
+              name: 'Some attribute',
+              hints: {
+                range: 1
+              }
+            },
+            {
+              key: 'some-other-key',
+              name: 'Another attribute',
+              hints: {
+                range: 2
+              }
+            }
+          ]
+        }
+      };
+
+      selection = [
+        [
+          {
+            context: {
+              item: {
+                id: 'test-object',
                 identifier: {
-                    namespace: "",
-                    key: "test-plot"
+                  key: 'test-object',
+                  namespace: ''
                 },
-                type: "telemetry.plot.stacked",
-                name: "Test Stacked Plot"
-            };
-
-            testTelemetryObject = {
-                identifier: {
-                    namespace: "",
-                    key: "test-object"
+                type: 'telemetry.plot.overlay',
+                configuration: {
+                  series: [
+                    {
+                      identifier: {
+                        key: 'test-object',
+                        namespace: ''
+                      }
+                    }
+                  ]
                 },
-                type: "test-object",
-                name: "Test Object",
-                telemetry: {
-                    values: [{
-                        key: "utc",
-                        format: "utc",
-                        name: "Time",
-                        hints: {
-                            domain: 1
-                        }
-                    }, {
-                        key: "some-key",
-                        name: "Some attribute",
-                        hints: {
-                            range: 1
-                        }
-                    }, {
-                        key: "some-other-key",
-                        name: "Another attribute",
-                        hints: {
-                            range: 2
-                        }
-                    }]
-                }
-            };
-
-            testTelemetryObject2 = {
+                composition: []
+              }
+            }
+          },
+          {
+            context: {
+              item: {
+                type: 'time-strip',
                 identifier: {
-                    namespace: "",
-                    key: "test-object2"
-                },
-                type: "test-object",
-                name: "Test Object2",
-                telemetry: {
-                    values: [{
-                        key: "utc",
-                        format: "utc",
-                        name: "Time",
-                        hints: {
-                            domain: 1
-                        }
-                    }, {
-                        key: "some-key2",
-                        name: "Some attribute2",
-                        hints: {
-                            range: 1
-                        }
-                    }, {
-                        key: "some-other-key2",
-                        name: "Another attribute2",
-                        hints: {
-                            range: 2
-                        }
-                    }]
-                }
-            };
-
-            mockComposition = new EventEmitter();
-            mockComposition.load = () => {
-                mockComposition.emit('add', testTelemetryObject);
-
-                return [testTelemetryObject];
-            };
-
-            spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
-
-            let viewContainer = document.createElement("div");
-            child.append(viewContainer);
-            component = new Vue({
-                el: viewContainer,
-                components: {
-                    StackedPlot
-                },
-                provide: {
-                    openmct: openmct,
-                    domainObject: stackedPlotObject,
-                    composition: openmct.composition.get(stackedPlotObject)
-                },
-                template: "<stacked-plot></stacked-plot>"
-            });
-
-            cleanupFirst.push(() => {
-                component.$destroy();
-                component = undefined;
-            });
-
-            return telemetryPromise
-                .then(Vue.nextTick())
-                .then(() => {
-                    plotViewComponentObject = component.$root.$children[0];
-                    const configId = openmct.objects.makeKeyString(testTelemetryObject.identifier);
-                    config = configStore.get(configId);
-                });
-        });
-
-        it("Renders a collapsed legend for every telemetry", () => {
-            let legend = element.querySelectorAll(".plot-wrapper-collapsed-legend .plot-series-name");
-            expect(legend.length).toBe(1);
-            expect(legend[0].innerHTML).toEqual("Test Object");
-        });
-
-        it("Renders an expanded legend for every telemetry", () => {
-            let legendControl = element.querySelector(".c-plot-legend__view-control.gl-plot-legend__view-control.c-disclosure-triangle");
-            const clickEvent = createMouseEvent("click");
-
-            legendControl.dispatchEvent(clickEvent);
-
-            let legend = element.querySelectorAll(".plot-wrapper-expanded-legend .plot-legend-item td");
-            expect(legend.length).toBe(6);
-        });
-
-        xit("Renders X-axis ticks for the telemetry object", () => {
-            let xAxisElement = element.querySelectorAll(".gl-plot-axis-area.gl-plot-x .gl-plot-tick-wrapper");
-            expect(xAxisElement.length).toBe(1);
-
-            let ticks = xAxisElement[0].querySelectorAll(".gl-plot-tick");
-            expect(ticks.length).toBe(5);
-        });
-
-        it("Renders Y-axis ticks for the telemetry object", (done) => {
-            config.yAxis.set('displayRange', {
-                min: 10,
-                max: 20
-            });
-            Vue.nextTick(() => {
-                let yAxisElement = element.querySelectorAll(".gl-plot-axis-area.gl-plot-y .gl-plot-tick-wrapper");
-                expect(yAxisElement.length).toBe(1);
-                let ticks = yAxisElement[0].querySelectorAll(".gl-plot-tick");
-                expect(ticks.length).toBe(6);
-                done();
-            });
-        });
-
-        it("Renders Y-axis options for the telemetry object", () => {
-            let yAxisElement = element.querySelectorAll(".gl-plot-axis-area.gl-plot-y .gl-plot-y-label__select");
-            expect(yAxisElement.length).toBe(1);
-            let options = yAxisElement[0].querySelectorAll("option");
-            expect(options.length).toBe(2);
-            expect(options[0].value).toBe("Some attribute");
-            expect(options[1].value).toBe("Another attribute");
-        });
-
-        it("turns on cursor Guides all telemetry objects", (done) => {
-            expect(plotViewComponentObject.cursorGuide).toBeFalse();
-            plotViewComponentObject.toggleCursorGuide();
-            Vue.nextTick(() => {
-                expect(plotViewComponentObject.$children[0].component.$children[0].cursorGuide).toBeTrue();
-                done();
-            });
-        });
-
-        it("shows grid lines for all telemetry objects", () => {
-            expect(plotViewComponentObject.gridLines).toBeTrue();
-            let gridLinesContainer = element.querySelectorAll(".gl-plot-display-area .js-ticks");
-            let visible = 0;
-            gridLinesContainer.forEach(el => {
-                if (el.style.display !== "none") {
-                    visible++;
+                  key: 'some-other-key',
+                  namespace: ''
                 }
-            });
-            expect(visible).toBe(2);
-        });
-
-        it("hides grid lines for all telemetry objects", (done) => {
-            expect(plotViewComponentObject.gridLines).toBeTrue();
-            plotViewComponentObject.toggleGridLines();
-            Vue.nextTick(() => {
-                expect(plotViewComponentObject.gridLines).toBeFalse();
-                let gridLinesContainer = element.querySelectorAll(".gl-plot-display-area .js-ticks");
-                let visible = 0;
-                gridLinesContainer.forEach(el => {
-                    if (el.style.display !== "none") {
-                        visible++;
-                    }
-                });
-                expect(visible).toBe(0);
-                done();
-            });
-        });
-
-        it('plots a new series when a new telemetry object is added', (done) => {
-            mockComposition.emit('add', testTelemetryObject2);
-            Vue.nextTick(() => {
-                let legend = element.querySelectorAll(".plot-wrapper-collapsed-legend .plot-series-name");
-                expect(legend.length).toBe(2);
-                expect(legend[1].innerHTML).toEqual("Test Object2");
-                done();
-            });
-        });
-
-        it('removes plots from series when a telemetry object is removed', (done) => {
-            mockComposition.emit('remove', testTelemetryObject.identifier);
-            Vue.nextTick(() => {
-                let legend = element.querySelectorAll(".plot-wrapper-collapsed-legend .plot-series-name");
-                expect(legend.length).toBe(0);
-                done();
-            });
-        });
-
-        it("Changes the label of the y axis when the option changes", (done) => {
-            let selectEl = element.querySelector('.gl-plot-y-label__select');
-            selectEl.value = 'Another attribute';
-            selectEl.dispatchEvent(new Event("change"));
-
-            Vue.nextTick(() => {
-                expect(config.yAxis.get('label')).toEqual('Another attribute');
-                done();
-            });
-        });
-
-        it("Renders a new series when added to one of the plots", (done) => {
-            mockComposition.emit('add', testTelemetryObject2);
-            Vue.nextTick(() => {
-                let legend = element.querySelectorAll(".plot-wrapper-collapsed-legend .plot-series-name");
-                expect(legend.length).toBe(2);
-                expect(legend[1].innerHTML).toEqual("Test Object2");
-                done();
-            });
-        });
-
-        it("Adds a new point to the plot", (done) => {
-            let originalLength = config.series.models[0].data.length;
-            config.series.models[0].add({
-                utc: 2,
-                'some-key': 1,
-                'some-other-key': 2
-            });
-            Vue.nextTick(() => {
-                expect(config.series.models[0].data.length).toEqual(originalLength + 1);
-                done();
-            });
-        });
-
-        it("updates the xscale", (done) => {
-            config.xAxis.set('displayRange', {
-                min: 0,
-                max: 10
-            });
-            Vue.nextTick(() => {
-                expect(plotViewComponentObject.$children[0].component.$children[0].xScale.domain()).toEqual({
-                    min: 0,
-                    max: 10
-                });
-                done();
-            });
-        });
-
-        it("updates the yscale", (done) => {
-            config.yAxis.set('displayRange', {
-                min: 10,
-                max: 20
-            });
-            Vue.nextTick(() => {
-                expect(plotViewComponentObject.$children[0].component.$children[0].yScale.domain()).toEqual({
-                    min: 10,
-                    max: 20
-                });
-                done();
-            });
-        });
-
-        describe('limits', () => {
-
-            it('lines are not displayed by default', () => {
-                let limitEl = element.querySelectorAll(".js-limit-area hr");
-                expect(limitEl.length).toBe(0);
-            });
-
-            it('lines are displayed when configuration is set to true', (done) => {
-                config.series.models[0].set('limitLines', true);
+              }
+            }
+          }
+        ]
+      ];
+
+      openmct.router.path = [testTelemetryObject];
+      mockComposition = new EventEmitter();
+      mockComposition.load = () => {
+        mockComposition.emit('add', testTelemetryObject);
+
+        return [testTelemetryObject];
+      };
+
+      spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
+
+      const configId = openmct.objects.makeKeyString(selection[0][0].context.item.identifier);
+      config = new PlotConfigurationModel({
+        id: configId,
+        domainObject: selection[0][0].context.item,
+        openmct: openmct
+      });
+      configStore.add(configId, config);
+
+      let viewContainer = document.createElement('div');
+      child.append(viewContainer);
+      const { vNode } = mount(
+        {
+          components: {
+            PlotOptions
+          },
+          provide: {
+            openmct: openmct,
+            domainObject: selection[0][0].context.item,
+            path: [selection[0][0].context.item, selection[0][1].context.item],
+            renderWhenVisible
+          },
+          template: '<plot-options ref="root"/>'
+        },
+        {
+          element: viewContainer
+        }
+      );
+      component = vNode.componentInstance;
+
+      nextTick(() => {
+        viewComponentObject = component.$refs.root;
+        done();
+      });
+    });
 
-                Vue.nextTick(() => {
-                    let limitEl = element.querySelectorAll(".js-limit-area .js-limit-line");
-                    expect(limitEl.length).toBe(4);
-                    done();
-                });
+    afterEach(() => {
+      openmct.router.path = null;
+    });
 
-            });
-        });
+    describe('in view only mode', () => {
+      let browseOptionsEl;
+      let editOptionsEl;
+      beforeEach(() => {
+        browseOptionsEl = viewComponentObject.$el.querySelector('.js-plot-options-browse');
+        editOptionsEl = viewComponentObject.$el.querySelector('.js-plot-options-edit');
+      });
+
+      it('does not show the edit options', () => {
+        expect(editOptionsEl).toBeNull();
+      });
+
+      it('shows the name', () => {
+        const seriesEl = browseOptionsEl.querySelector('.c-object-label__name');
+        expect(seriesEl.innerHTML).toEqual(testTelemetryObject.name);
+      });
+
+      it('shows in collapsed mode', () => {
+        const seriesEl = browseOptionsEl.querySelectorAll('.c-disclosure-triangle--expanded');
+        expect(seriesEl.length).toEqual(0);
+      });
+
+      it('shows in expanded mode', () => {
+        let expandControl = browseOptionsEl.querySelector('.c-disclosure-triangle');
+        const clickEvent = createMouseEvent('click');
+        expandControl.dispatchEvent(clickEvent);
+
+        const plotOptionsProperties = browseOptionsEl.querySelectorAll(
+          '.js-plot-options-browse-properties .grid-row'
+        );
+        expect(plotOptionsProperties.length).toEqual(6);
+      });
     });
 
-    describe('the inspector view', () => {
-        let component;
-        let viewComponentObject;
-        let mockComposition;
-        let testTelemetryObject;
-        let selection;
-        let config;
-        beforeEach((done) => {
-            testTelemetryObject = {
-                identifier: {
-                    namespace: "",
-                    key: "test-object"
-                },
-                type: "test-object",
-                name: "Test Object",
-                telemetry: {
-                    values: [{
-                        key: "utc",
-                        format: "utc",
-                        name: "Time",
-                        hints: {
-                            domain: 1
-                        }
-                    }, {
-                        key: "some-key",
-                        name: "Some attribute",
-                        hints: {
-                            range: 1
-                        }
-                    }, {
-                        key: "some-other-key",
-                        name: "Another attribute",
-                        hints: {
-                            range: 2
-                        }
-                    }]
-                }
-            };
+    describe('in edit mode', () => {
+      let editOptionsEl;
+      let browseOptionsEl;
+
+      beforeEach((done) => {
+        viewComponentObject.setEditState(true);
+        nextTick(() => {
+          editOptionsEl = viewComponentObject.$el.querySelector('.js-plot-options-edit');
+          browseOptionsEl = viewComponentObject.$el.querySelector('.js-plot-options-browse');
+          done();
+        });
+      });
+
+      it('does not show the browse options', () => {
+        expect(browseOptionsEl).toBeNull();
+      });
+
+      it('shows the name', () => {
+        const seriesEl = editOptionsEl.querySelector('.c-object-label__name');
+        expect(seriesEl.innerHTML).toEqual(testTelemetryObject.name);
+      });
+
+      it('shows in collapsed mode', () => {
+        const seriesEl = editOptionsEl.querySelectorAll('.c-disclosure-triangle--expanded');
+        expect(seriesEl.length).toEqual(0);
+      });
+
+      it('shows in collapsed mode', () => {
+        const seriesEl = editOptionsEl.querySelectorAll('.c-disclosure-triangle--expanded');
+        expect(seriesEl.length).toEqual(0);
+      });
+
+      it('renders expanded', () => {
+        const expandControl = editOptionsEl.querySelector('.c-disclosure-triangle');
+        const clickEvent = createMouseEvent('click');
+        expandControl.dispatchEvent(clickEvent);
+
+        const plotOptionsProperties = editOptionsEl.querySelectorAll(
+          '.js-plot-options-edit-properties .grid-row'
+        );
+        expect(plotOptionsProperties.length).toEqual(8);
+      });
+
+      it('shows yKeyOptions', () => {
+        const expandControl = editOptionsEl.querySelector('.c-disclosure-triangle');
+        const clickEvent = createMouseEvent('click');
+        expandControl.dispatchEvent(clickEvent);
+
+        const plotOptionsProperties = editOptionsEl.querySelectorAll(
+          '.js-plot-options-edit-properties .grid-row'
+        );
+
+        const yKeySelection = plotOptionsProperties[0].querySelector('select');
+        const options = Array.from(yKeySelection.options).map((option) => {
+          return option.value;
+        });
+        expect(options).toEqual([
+          testTelemetryObject.telemetry.values[1].key,
+          testTelemetryObject.telemetry.values[2].key
+        ]);
+      });
 
-            selection = [
-                [
-                    {
-                        context: {
-                            item: {
-                                id: "test-object",
-                                identifier: {
-                                    key: "test-object",
-                                    namespace: ''
-                                },
-                                type: "telemetry.plot.overlay",
-                                configuration: {
-                                    series: [
-                                        {
-                                            identifier: {
-                                                key: "test-object",
-                                                namespace: ''
-                                            }
-                                        }
-                                    ]
-                                },
-                                composition: []
-                            }
-                        }
-                    },
-                    {
-                        context: {
-                            item: {
-                                type: 'time-strip',
-                                identifier: {
-                                    key: 'some-other-key',
-                                    namespace: ''
-                                }
-                            }
-                        }
-                    }
-                ]
-            ];
-
-            mockComposition = new EventEmitter();
-            mockComposition.load = () => {
-                mockComposition.emit('add', testTelemetryObject);
-
-                return [testTelemetryObject];
-            };
-
-            spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
-
-            const configId = openmct.objects.makeKeyString(selection[0][0].context.item.identifier);
-            config = new PlotConfigurationModel({
-                id: configId,
-                domainObject: selection[0][0].context.item,
-                openmct: openmct
-            });
-            configStore.add(configId, config);
-
-            let viewContainer = document.createElement('div');
-            child.append(viewContainer);
-            component = new Vue({
-                el: viewContainer,
-                components: {
-                    PlotOptions
-                },
-                provide: {
-                    openmct: openmct,
-                    domainObject: selection[0][0].context.item,
-                    path: [selection[0][0].context.item, selection[0][1].context.item]
-                },
-                template: '<plot-options/>'
-            });
+      it('shows yAxis options', () => {
+        const expandControl = editOptionsEl.querySelector('.c-disclosure-triangle');
+        const clickEvent = createMouseEvent('click');
+        expandControl.dispatchEvent(clickEvent);
 
-            Vue.nextTick(() => {
-                viewComponentObject = component.$root.$children[0];
-                done();
-            });
-        });
+        const yAxisProperties = editOptionsEl.querySelectorAll(
+          'div.grid-properties:first-of-type .l-inspector-part'
+        );
 
-        describe('in view only mode', () => {
-            let browseOptionsEl;
-            let editOptionsEl;
-            beforeEach(() => {
-                browseOptionsEl = viewComponentObject.$el.querySelector('.js-plot-options-browse');
-                editOptionsEl = viewComponentObject.$el.querySelector('.js-plot-options-edit');
-            });
-
-            it('does not show the edit options', () => {
-                expect(editOptionsEl).toBeNull();
-            });
-
-            it('shows the name', () => {
-                const seriesEl = browseOptionsEl.querySelector('.c-object-label__name');
-                expect(seriesEl.innerHTML).toEqual(testTelemetryObject.name);
-            });
-
-            it('shows in collapsed mode', () => {
-                const seriesEl = browseOptionsEl.querySelectorAll('.c-disclosure-triangle--expanded');
-                expect(seriesEl.length).toEqual(0);
-            });
-
-            it('shows in expanded mode', () => {
-                let expandControl = browseOptionsEl.querySelector(".c-disclosure-triangle");
-                const clickEvent = createMouseEvent("click");
-                expandControl.dispatchEvent(clickEvent);
-
-                const plotOptionsProperties = browseOptionsEl.querySelectorAll('.js-plot-options-browse-properties .grid-row');
-                expect(plotOptionsProperties.length).toEqual(6);
-            });
-        });
+        // TODO better test
+        expect(yAxisProperties.length).toEqual(2);
+      });
 
-        describe('in edit mode', () => {
-            let editOptionsEl;
-            let browseOptionsEl;
-
-            beforeEach((done) => {
-                viewComponentObject.setEditState(true);
-                Vue.nextTick(() => {
-                    editOptionsEl = viewComponentObject.$el.querySelector('.js-plot-options-edit');
-                    browseOptionsEl = viewComponentObject.$el.querySelector('.js-plot-options-browse');
-                    done();
-                });
-            });
-
-            it('does not show the browse options', () => {
-                expect(browseOptionsEl).toBeNull();
-            });
-
-            it('shows the name', () => {
-                const seriesEl = editOptionsEl.querySelector('.c-object-label__name');
-                expect(seriesEl.innerHTML).toEqual(testTelemetryObject.name);
-            });
-
-            it('shows in collapsed mode', () => {
-                const seriesEl = editOptionsEl.querySelectorAll('.c-disclosure-triangle--expanded');
-                expect(seriesEl.length).toEqual(0);
-            });
-
-            it('shows in collapsed mode', () => {
-                const seriesEl = editOptionsEl.querySelectorAll('.c-disclosure-triangle--expanded');
-                expect(seriesEl.length).toEqual(0);
-            });
-
-            it('renders expanded', () => {
-                const expandControl = editOptionsEl.querySelector(".c-disclosure-triangle");
-                const clickEvent = createMouseEvent("click");
-                expandControl.dispatchEvent(clickEvent);
-
-                const plotOptionsProperties = editOptionsEl.querySelectorAll(".js-plot-options-edit-properties .grid-row");
-                expect(plotOptionsProperties.length).toEqual(7);
-            });
-
-            it('shows yKeyOptions', () => {
-                const expandControl = editOptionsEl.querySelector(".c-disclosure-triangle");
-                const clickEvent = createMouseEvent("click");
-                expandControl.dispatchEvent(clickEvent);
-
-                const plotOptionsProperties = editOptionsEl.querySelectorAll(".js-plot-options-edit-properties .grid-row");
-
-                const yKeySelection = plotOptionsProperties[0].querySelector('select');
-                const options = Array.from(yKeySelection.options).map((option) => {
-                    return option.value;
-                });
-                expect(options).toEqual([testTelemetryObject.telemetry.values[1].key, testTelemetryObject.telemetry.values[2].key]);
-            });
-
-            it('shows yAxis options', () => {
-                const expandControl = editOptionsEl.querySelector(".c-disclosure-triangle");
-                const clickEvent = createMouseEvent("click");
-                expandControl.dispatchEvent(clickEvent);
-
-                const yAxisProperties = editOptionsEl.querySelectorAll("div.grid-properties:first-of-type .l-inspector-part");
-                expect(yAxisProperties.length).toEqual(3);
-            });
-        });
+      it('renders color palette options', () => {
+        const colorSwatch = editOptionsEl.querySelector('.c-click-swatch');
+        expect(colorSwatch).toBeDefined();
+      });
     });
-
+  });
 });
diff --git a/src/plugins/plot/stackedPlot/StackedPlot.vue b/src/plugins/plot/stackedPlot/StackedPlot.vue
index d342ce8d529..89e76a60586 100644
--- a/src/plugins/plot/stackedPlot/StackedPlot.vue
+++ b/src/plugins/plot/stackedPlot/StackedPlot.vue
@@ -1,5 +1,5 @@
 <!--
- Open MCT, Copyright (c) 2014-2021, United States Government
+ Open MCT, Copyright (c) 2014-2024, United States Government
  as represented by the Administrator of the National Aeronautics and Space
  Administration. All rights reserved.
 
@@ -21,185 +21,339 @@
 -->
 
 <template>
-<div class="c-plot c-plot--stacked holder holder-plot has-control-bar">
-    <div v-show="!hideExportButtons && !options.compact"
-         class="c-control-bar"
-    >
-        <span class="c-button-set c-button-set--strip-h">
-            <button class="c-button icon-download"
-                    title="Export This View's Data as PNG"
-                    @click="exportPNG()"
-            >
-                <span class="c-button__label">PNG</span>
-            </button>
-            <button class="c-button"
-                    title="Export This View's Data as JPG"
-                    @click="exportJPG()"
-            >
-                <span class="c-button__label">JPG</span>
-            </button>
-        </span>
-        <button class="c-button icon-crosshair"
-                :class="{ 'is-active': cursorGuide }"
-                title="Toggle cursor guides"
-                @click="toggleCursorGuide"
-        >
-        </button>
-        <button class="c-button"
-                :class="{ 'icon-grid-on': gridLines, 'icon-grid-off': !gridLines }"
-                title="Toggle grid lines"
-                @click="toggleGridLines"
-        >
-        </button>
-    </div>
-    <stacked-plot-item v-for="object in compositionObjects"
-                       :key="object.id"
-                       class="c-plot--stacked-container"
-                       :object="object"
-                       :options="options"
-                       :grid-lines="gridLines"
-                       :cursor-guide="cursorGuide"
-                       :plot-tick-width="maxTickWidth"
-                       @plotTickWidth="onTickWidthChange"
-                       @loadingUpdated="loadingUpdated"
+  <div
+    v-if="loaded"
+    class="c-plot c-plot--stacked holder holder-plot has-control-bar u-style-receiver js-style-receiver"
+    :class="[plotLegendExpandedStateClass, plotLegendPositionClass]"
+    aria-label="Stacked Plot Style Target"
+  >
+    <plot-legend
+      v-if="compositionObjectsConfigLoaded && showLegendsForChildren === false"
+      :cursor-locked="!!lockHighlightPoint"
+      :highlights="highlights"
+      class="js-stacked-plot-legend"
+      @legend-hover-changed="legendHoverChanged"
+      @expanded="updateExpanded"
+      @position="updatePosition"
     />
-</div>
+    <div class="l-view-section">
+      <stacked-plot-item
+        v-for="objectWrapper in compositionObjects"
+        ref="stackedPlotItems"
+        :key="objectWrapper.keyString"
+        class="c-plot--stacked-container"
+        :child-object="objectWrapper.object"
+        :options="options"
+        :grid-lines="gridLines"
+        :color-palette="colorPalette"
+        :cursor-guide="cursorGuide"
+        :show-limit-line-labels="showLimitLineLabels"
+        :parent-y-tick-width="maxTickWidth"
+        :hide-legend="showLegendsForChildren === false"
+        @plot-y-tick-width="onYTickWidthChange"
+        @loading-updated="loadingUpdated"
+        @cursor-guide="onCursorGuideChange"
+        @grid-lines="onGridLinesChange"
+        @lock-highlight-point="lockHighlightPointUpdated"
+        @highlights="highlightsUpdated"
+        @config-loaded="configLoadedForObject(objectWrapper.keyString)"
+      />
+    </div>
+  </div>
 </template>
 
 <script>
-import eventHelpers from '../lib/eventHelpers';
+import ColorPalette from '@/ui/color/ColorPalette';
+
+import ImageExporter from '../../../exporters/ImageExporter.js';
+import configStore from '../configuration/ConfigStore.js';
+import PlotConfigurationModel from '../configuration/PlotConfigurationModel.js';
+import PlotLegend from '../legend/PlotLegend.vue';
+import eventHelpers from '../lib/eventHelpers.js';
 import StackedPlotItem from './StackedPlotItem.vue';
-import ImageExporter from '../../../exporters/ImageExporter';
 
 export default {
-    components: {
-        StackedPlotItem
-    },
-    inject: ['openmct', 'domainObject', 'composition'],
-    props: {
-        options: {
-            type: Object,
-            default() {
-                return {};
-            }
-        }
+  components: {
+    StackedPlotItem,
+    PlotLegend
+  },
+  inject: ['openmct', 'domainObject', 'path', 'renderWhenVisible'],
+  props: {
+    options: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      hideExportButtons: false,
+      cursorGuide: false,
+      gridLines: true,
+      configLoaded: {},
+      compositionObjects: [],
+      tickWidthMap: {},
+      loaded: false,
+      lockHighlightPoint: false,
+      highlights: [],
+      showLimitLineLabels: undefined,
+      colorPalette: new ColorPalette(),
+      compositionObjectsConfigLoaded: false,
+      position: 'top',
+      showLegendsForChildren: true,
+      expanded: false
+    };
+  },
+  computed: {
+    plotLegendPositionClass() {
+      if (this.showLegendsForChildren) {
+        return '';
+      }
+
+      return `plot-legend-${this.position}`;
     },
-    data() {
-        return {
-            hideExportButtons: false,
-            cursorGuide: false,
-            gridLines: true,
-            loading: false,
-            compositionObjects: []
-        };
-    },
-    computed: {
-        maxTickWidth() {
-            return Math.max(...Object.values(this.tickWidthMap));
-        }
+    plotLegendExpandedStateClass() {
+      let legendExpandedStateClass = '';
+
+      if (this.showLegendsForChildren !== true && this.expanded) {
+        legendExpandedStateClass = 'plot-legend-expanded';
+      } else if (this.showLegendsForChildren !== true && !this.expanded) {
+        legendExpandedStateClass = 'plot-legend-collapsed';
+      }
+
+      return legendExpandedStateClass;
+    },
+    /**
+     * Returns the maximum width of the left and right y axes ticks of this stacked plots children
+     * @returns {{rightTickWidth: number, leftTickWidth: number, hasMultipleLeftAxes: boolean}}
+     */
+    maxTickWidth() {
+      const tickWidthValues = Object.values(this.tickWidthMap);
+      const maxLeftTickWidth = Math.max(
+        ...tickWidthValues.map((tickWidthItem) => tickWidthItem.leftTickWidth)
+      );
+      const maxRightTickWidth = Math.max(
+        ...tickWidthValues.map((tickWidthItem) => tickWidthItem.rightTickWidth)
+      );
+      const hasMultipleLeftAxes = tickWidthValues.some(
+        (tickWidthItem) => tickWidthItem.hasMultipleLeftAxes === true
+      );
+
+      return {
+        leftTickWidth: maxLeftTickWidth,
+        rightTickWidth: maxRightTickWidth,
+        hasMultipleLeftAxes
+      };
+    }
+  },
+  beforeUnmount() {
+    this.destroy();
+  },
+  mounted() {
+    eventHelpers.extend(this);
+    //We only need to initialize the stacked plot config for legend properties
+    const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+    this.config = this.getConfig(configId);
+    this.showLegendsForChildren = this.config.legend.get('showLegendsForChildren');
+
+    this.loaded = true;
+    this.imageExporter = new ImageExporter(this.openmct);
+
+    this.composition = this.openmct.composition.get(this.domainObject);
+    this.composition.on('add', this.addChild);
+    this.composition.on('remove', this.removeChild);
+    this.composition.on('reorder', this.compositionReorder);
+    this.composition.load();
+  },
+  methods: {
+    getConfig(configId) {
+      let config = configStore.get(configId);
+      if (!config) {
+        config = new PlotConfigurationModel({
+          id: configId,
+          domainObject: this.domainObject,
+          openmct: this.openmct,
+          callback: (data) => {
+            this.data = data;
+          }
+        });
+        configStore.add(configId, config);
+      }
+
+      return config;
     },
-    beforeDestroy() {
-        this.destroy();
-    },
-    mounted() {
-        eventHelpers.extend(this);
-
-        this.imageExporter = new ImageExporter(this.openmct);
-
-        this.tickWidthMap = {};
-
-        this.composition.on('add', this.addChild);
-        this.composition.on('remove', this.removeChild);
-        this.composition.on('reorder', this.compositionReorder);
-        this.composition.load();
-    },
-    methods: {
-        loadingUpdated(loaded) {
-            this.loading = loaded;
-        },
-        destroy() {
-            this.stopListening();
-            this.composition.off('add', this.addChild);
-            this.composition.off('remove', this.removeChild);
-            this.composition.off('reorder', this.compositionReorder);
-        },
-
-        addChild(child) {
-            const id = this.openmct.objects.makeKeyString(child.identifier);
-
-            this.tickWidthMap[id] = 0;
-            this.compositionObjects.push(child);
-        },
-
-        removeChild(childIdentifier) {
-            const id = this.openmct.objects.makeKeyString(childIdentifier);
-            delete this.tickWidthMap[id];
-            const childObj = this.compositionObjects.filter((c) => {
-                const identifier = this.openmct.objects.makeKeyString(c.identifier);
-
-                return identifier === id;
-            })[0];
-            if (childObj) {
-                const index = this.compositionObjects.indexOf(childObj);
-                this.compositionObjects.splice(index, 1);
-            }
-        },
-
-        compositionReorder(reorderPlan) {
-            let oldComposition = this.compositionObjects.slice();
-
-            reorderPlan.forEach((reorder) => {
-                this.compositionObjects[reorder.newIndex] = oldComposition[reorder.oldIndex];
-            });
-        },
-
-        resetTelemetryAndTicks(domainObject) {
-            this.compositionObjects = [];
-            this.tickWidthMap = {};
-        },
-
-        exportJPG() {
-            this.hideExportButtons = true;
-            const plotElement = this.$el;
-
-            this.imageExporter.exportJPG(plotElement, 'stacked-plot.jpg', 'export-plot')
-                .finally(function () {
-                    this.hideExportButtons = false;
-                }.bind(this));
-        },
-
-        exportPNG() {
-            this.hideExportButtons = true;
-
-            const plotElement = this.$el;
-
-            this.imageExporter.exportPNG(plotElement, 'stacked-plot.png', 'export-plot')
-                .finally(function () {
-                    this.hideExportButtons = false;
-                }.bind(this));
-        },
-
-        toggleCursorGuide() {
-            this.cursorGuide = !this.cursorGuide;
-        },
-
-        toggleGridLines() {
-            this.gridLines = !this.gridLines;
-        },
-        onTickWidthChange(width, plotId) {
-            if (!Object.prototype.hasOwnProperty.call(this.tickWidthMap, plotId)) {
-                return;
-            }
-
-            //update the tickWidth for this plotId, the computed max tick width of the stacked plot will be cascaded down
-            //TODO: Might need to do this using $set
-            this.tickWidthMap[plotId] = Math.max(width, this.tickWidthMap[plotId]);
-            // const newTickWidth = Math.max(...Object.values(this.tickWidthMap));
-            // if (newTickWidth !== tickWidth || width !== tickWidth) {
-            //     tickWidth = newTickWidth;
-            //     $scope.$broadcast('plot:tickWidth', tickWidth);
-            // }
+    loadingUpdated(loaded) {
+      this.loading = loaded;
+    },
+    configLoadedForObject(childObjIdentifier) {
+      const childObjId = this.openmct.objects.makeKeyString(childObjIdentifier);
+      this.configLoaded[childObjId] = true;
+      this.setConfigLoadedForComposition();
+    },
+    setConfigLoadedForComposition() {
+      this.compositionObjectsConfigLoaded =
+        this.compositionObjects.length &&
+        this.compositionObjects.every((childObject) => {
+          const id = childObject.keyString;
+
+          return this.configLoaded[id] === true;
+        });
+      if (this.compositionObjectsConfigLoaded) {
+        this.listenTo(
+          this.config.legend,
+          'change:showLegendsForChildren',
+          this.updateShowLegendsForChildren,
+          this
+        );
+      }
+    },
+    destroy() {
+      this.composition.off('add', this.addChild);
+      this.composition.off('remove', this.removeChild);
+      this.composition.off('reorder', this.compositionReorder);
+
+      this.stopListening();
+      const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+      configStore.deleteStore(configId);
+    },
+
+    addChild(child) {
+      const id = this.openmct.objects.makeKeyString(child.identifier);
+
+      this.tickWidthMap[id] = {
+        leftTickWidth: 0,
+        rightTickWidth: 0
+      };
+
+      this.compositionObjects.push({
+        object: child,
+        keyString: id
+      });
+      this.setConfigLoadedForComposition();
+    },
+
+    removeChild(childIdentifier) {
+      const id = this.openmct.objects.makeKeyString(childIdentifier);
+
+      delete this.tickWidthMap[id];
+
+      const childObj = this.compositionObjects.filter((c) => {
+        const identifier = c.keyString;
+
+        return identifier === id;
+      })[0];
+
+      if (childObj) {
+        if (childObj.object.type !== 'telemetry.plot.overlay') {
+          const config = this.getConfig(childObj.keyString);
+          if (config) {
+            config.series.remove(config.series.at(0));
+          }
         }
+      }
+
+      this.compositionObjects = this.compositionObjects.filter((c) => {
+        const identifier = c.keyString;
+
+        return identifier !== id;
+      });
+
+      const configIndex = this.domainObject.configuration.series.findIndex((seriesConfig) => {
+        return this.openmct.objects.areIdsEqual(seriesConfig.identifier, childIdentifier);
+      });
+      if (configIndex > -1) {
+        const cSeries = this.domainObject.configuration.series.slice();
+        this.openmct.objects.mutate(this.domainObject, 'configuration.series', cSeries);
+      }
+
+      this.setConfigLoadedForComposition();
+    },
+
+    compositionReorder(reorderPlan) {
+      let oldComposition = this.compositionObjects.slice();
+
+      reorderPlan.forEach((reorder) => {
+        this.compositionObjects[reorder.newIndex] = oldComposition[reorder.oldIndex];
+      });
+    },
+
+    resetTelemetryAndTicks(domainObject) {
+      this.compositionObjects = [];
+      this.tickWidthMap = {
+        leftTickWidth: 0,
+        rightTickWidth: 0
+      };
+    },
+
+    exportJPG() {
+      this.hideExportButtons = true;
+      const plotElement = this.$el;
+
+      this.imageExporter.exportJPG(plotElement, 'stacked-plot.jpg', 'export-plot').finally(
+        function () {
+          this.hideExportButtons = false;
+        }.bind(this)
+      );
+    },
+
+    exportPNG() {
+      this.hideExportButtons = true;
+
+      const plotElement = this.$el;
+
+      this.imageExporter.exportPNG(plotElement, 'stacked-plot.png', 'export-plot').finally(
+        function () {
+          this.hideExportButtons = false;
+        }.bind(this)
+      );
+    },
+    /**
+     * @typedef {Object} PlotYTickData
+     * @property {Number} leftTickWidth the width of the ticks for all the y axes on the left of the plot.
+     * @property {Number} rightTickWidth the width of the ticks for all the y axes on the right of the plot.
+     * @property {Boolean} hasMultipleLeftAxes whether or not there is more than one left y axis.
+     */
+    onYTickWidthChange(data, plotId) {
+      if (!Object.prototype.hasOwnProperty.call(this.tickWidthMap, plotId)) {
+        return;
+      }
+
+      this.tickWidthMap[plotId] = data;
+    },
+    legendHoverChanged(data) {
+      this.showLimitLineLabels = data;
+    },
+    lockHighlightPointUpdated(data) {
+      this.lockHighlightPoint = data;
+    },
+    updateExpanded(expanded) {
+      this.expanded = expanded;
+    },
+    updatePosition(position) {
+      this.position = position;
+    },
+    updateShowLegendsForChildren(showLegendsForChildren) {
+      this.showLegendsForChildren = showLegendsForChildren;
+    },
+    updateReady(ready) {
+      this.configReady = ready;
+    },
+    highlightsUpdated(data) {
+      this.highlights = data;
+    },
+    onCursorGuideChange(cursorGuide) {
+      this.cursorGuide = cursorGuide === true;
+    },
+    onGridLinesChange(gridLines) {
+      this.gridLines = gridLines === true;
+    },
+    getViewContext() {
+      return {
+        exportPNG: this.exportPNG,
+        exportJPG: this.exportJPG
+      };
     }
+  }
 };
 </script>
diff --git a/src/plugins/plot/stackedPlot/StackedPlotCompositionPolicy.js b/src/plugins/plot/stackedPlot/StackedPlotCompositionPolicy.js
index 882b6c2a982..2d16188da8e 100644
--- a/src/plugins/plot/stackedPlot/StackedPlotCompositionPolicy.js
+++ b/src/plugins/plot/stackedPlot/StackedPlotCompositionPolicy.js
@@ -1,30 +1,33 @@
 export default function StackedPlotCompositionPolicy(openmct) {
-    function hasNumericTelemetry(domainObject) {
-        const hasTelemetry = openmct.telemetry.isTelemetryObject(domainObject);
-        if (!hasTelemetry) {
-            return false;
-        }
-
-        let metadata = openmct.telemetry.getMetadata(domainObject);
-
-        return metadata.values().length > 0 && hasDomainAndRange(metadata);
+  function hasNumericTelemetry(domainObject) {
+    const hasTelemetry = openmct.telemetry.isTelemetryObject(domainObject);
+    if (!hasTelemetry) {
+      return false;
     }
 
-    function hasDomainAndRange(metadata) {
-        return (metadata.valuesForHints(['range']).length > 0
-            && metadata.valuesForHints(['domain']).length > 0);
-    }
+    let metadata = openmct.telemetry.getMetadata(domainObject);
 
-    return {
-        allow: function (parent, child) {
+    return metadata.values().length > 0 && hasDomainAndRange(metadata);
+  }
 
-            if ((parent.type === 'telemetry.plot.stacked')
-                && ((child.type !== 'telemetry.plot.overlay') && (hasNumericTelemetry(child) === false))
-            ) {
-                return false;
-            }
+  function hasDomainAndRange(metadata) {
+    return (
+      metadata.valuesForHints(['range']).length > 0 &&
+      metadata.valuesForHints(['domain']).length > 0
+    );
+  }
 
-            return true;
-        }
-    };
+  return {
+    allow: function (parent, child) {
+      if (
+        parent.type === 'telemetry.plot.stacked' &&
+        child.type !== 'telemetry.plot.overlay' &&
+        hasNumericTelemetry(child) === false
+      ) {
+        return false;
+      }
+
+      return true;
+    }
+  };
 }
diff --git a/src/plugins/plot/stackedPlot/StackedPlotItem.vue b/src/plugins/plot/stackedPlot/StackedPlotItem.vue
index 2284f2a6daf..15388e48a69 100644
--- a/src/plugins/plot/stackedPlot/StackedPlotItem.vue
+++ b/src/plugins/plot/stackedPlot/StackedPlotItem.vue
@@ -1,5 +1,5 @@
 <!--
- Open MCT, Copyright (c) 2014-2021, United States Government
+ Open MCT, Copyright (c) 2014-2024, United States Government
  as represented by the Administrator of the National Aeronautics and Space
  Administration. All rights reserved.
 
@@ -20,126 +20,259 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-<div></div>
+  <div :aria-label="`Stacked Plot Item ${childObject.name}`">
+    <Plot
+      ref="plotComponent"
+      :hide-legend="hideLegend"
+      :limit-line-labels="showLimitLineLabels"
+      :grid-lines="gridLines"
+      :cursor-guide="cursorGuide"
+      :parent-y-tick-width="parentYTickWidth"
+      :options="options"
+      :color-palette="colorPalette"
+      :class="isStale && 'is-stale'"
+      @config-loaded="onConfigLoaded"
+      @lock-highlight-point="onLockHighlightPointUpdated"
+      @highlights="onHighlightsUpdated"
+      @plot-y-tick-width="onYTickWidthChange"
+      @cursor-guide="onCursorGuideChange"
+      @grid-lines="onGridLinesChange"
+    />
+  </div>
 </template>
 <script>
+import configStore from '@/plugins/plot/configuration/ConfigStore';
+import PlotConfigurationModel from '@/plugins/plot/configuration/PlotConfigurationModel';
+import stalenessMixin from '@/ui/mixins/staleness-mixin';
 
-import MctPlot from '../MctPlot.vue';
-import Vue from "vue";
+import Plot from '../PlotView.vue';
+import conditionalStylesMixin from './mixins/objectStyles-mixin.js';
 
 export default {
-    inject: ['openmct', 'domainObject'],
-    props: {
-        object: {
-            type: Object,
-            default() {
-                return {};
-            }
-        },
-        options: {
-            type: Object,
-            default() {
-                return {};
-            }
-        },
-        gridLines: {
-            type: Boolean,
-            default() {
-                return true;
-            }
-        },
-        cursorGuide: {
-            type: Boolean,
-            default() {
-                return true;
-            }
-        },
-        plotTickWidth: {
-            type: Number,
-            default() {
-                return 0;
-            }
-        }
+  components: {
+    Plot
+  },
+  mixins: [conditionalStylesMixin, stalenessMixin],
+  inject: ['openmct', 'domainObject', 'path', 'renderWhenVisible'],
+  provide() {
+    return {
+      openmct: this.openmct,
+      domainObject: this.childObject
+    };
+  },
+  props: {
+    childObject: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    options: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    gridLines: {
+      type: Boolean,
+      default() {
+        return true;
+      }
+    },
+    cursorGuide: {
+      type: Boolean,
+      default() {
+        return true;
+      }
     },
-    watch: {
-        gridLines(newGridLines) {
-            this.updateComponentProp('gridLines', newGridLines);
-        },
-        cursorGuide(newCursorGuide) {
-            this.updateComponentProp('cursorGuide', newCursorGuide);
-        },
-        plotTickWidth(width) {
-            this.updateComponentProp('plotTickWidth', width);
+    showLimitLineLabels: {
+      type: Object,
+      default() {
+        return undefined;
+      }
+    },
+    colorPalette: {
+      type: Object,
+      default() {
+        return undefined;
+      }
+    },
+    parentYTickWidth: {
+      type: Object,
+      default() {
+        return {
+          leftTickWidth: 0,
+          rightTickWidth: 0,
+          hasMultipleLeftAxes: false
+        };
+      }
+    },
+    hideLegend: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    }
+  },
+  emits: [
+    'lock-highlight-point',
+    'highlights',
+    'config-loaded',
+    'cursor-guide',
+    'grid-lines',
+    'plot-y-tick-width'
+  ],
+  mounted() {
+    this.updateView();
+    this.isEditing = this.openmct.editor.isEditing();
+    this.openmct.editor.on('isEditing', this.setEditState);
+    this.setupClockChangedEvent((domainObject) => {
+      this.triggerUnsubscribeFromStaleness(domainObject);
+      this.subscribeToStaleness(domainObject);
+    });
+  },
+  beforeUnmount() {
+    this.openmct.editor.off('isEditing', this.setEditState);
+    if (this.composition) {
+      this.composition.off('add', this.subscribeToStaleness);
+      this.composition.off('remove', this.removeSubscription);
+    }
+
+    if (this.removeSelectable) {
+      this.removeSelectable();
+    }
+
+    const configId = this.openmct.objects.makeKeyString(this.childObject.identifier);
+    configStore.deleteStore(configId);
+
+    if (this._destroy) {
+      this._destroy();
+    }
+  },
+  methods: {
+    setEditState(isEditing) {
+      this.isEditing = isEditing;
+
+      if (this.isEditing) {
+        this.setSelection();
+      } else {
+        if (this.removeSelectable) {
+          this.removeSelectable();
         }
+      }
     },
-    mounted() {
-        this.updateView();
+    removeSubscription(identifier) {
+      this.triggerUnsubscribeFromStaleness({
+        identifier
+      });
     },
-    methods: {
-        updateComponentProp(prop, value) {
-            if (this.component) {
-                this.component[prop] = value;
-            }
-        },
-        updateView() {
-            if (this.component) {
-                this.component.$destroy();
-                this.component = undefined;
-                this.$el.innerHTML = '';
-            }
+    updateView() {
+      //If this object is not persistable, then package it with it's parent
+      const plotObject = this.getPlotObject();
 
-            const onTickWidthChange = this.onTickWidthChange;
-            const loadingUpdated = this.loadingUpdated;
-            const setStatus = this.setStatus;
+      if (this.openmct.telemetry.isTelemetryObject(plotObject)) {
+        this.subscribeToStaleness(plotObject);
+      } else {
+        // possibly overlay or other composition based plot
+        this.composition = this.openmct.composition.get(plotObject);
 
-            const openmct = this.openmct;
-            const object = this.object;
+        this.composition.on('add', this.subscribeToStaleness);
+        this.composition.on('remove', this.removeSubscription);
+        this.composition.load();
+      }
 
-            const getProps = this.getProps;
-            let viewContainer = document.createElement('div');
-            this.$el.append(viewContainer);
+      if (this.isEditing) {
+        this.setSelection();
+      }
+    },
+    onLockHighlightPointUpdated() {
+      this.$emit('lock-highlight-point', ...arguments);
+    },
+    onHighlightsUpdated() {
+      this.$emit('highlights', ...arguments);
+    },
+    onConfigLoaded() {
+      this.$emit('config-loaded', ...arguments);
+    },
+    onYTickWidthChange() {
+      this.$emit('plot-y-tick-width', ...arguments);
+    },
+    onCursorGuideChange() {
+      this.$emit('cursor-guide', ...arguments);
+    },
+    onGridLinesChange() {
+      this.$emit('grid-lines', ...arguments);
+    },
+    setSelection() {
+      let childContext = {};
+      childContext.item = this.childObject;
+      this.context = childContext;
+      if (this.removeSelectable) {
+        this.removeSelectable();
+      }
+
+      this.removeSelectable = this.openmct.selection.selectable(this.$el, this.context);
+    },
+    getPlotObject() {
+      this.checkPlotConfiguration();
+      // If object is missing, warn
+      if (this.openmct.objects.isMissing(this.childObject)) {
+        console.warn('Missing domain object for stacked plot', this.childObject);
+      }
+      return this.childObject;
+    },
+    checkPlotConfiguration() {
+      // If the object has its own configuration (like an overlay plot), don't initialize a stacked plot configuration
+      // and instead use its configuration directly.
+      // Otherwise ensure we've got a stacked plot item configuration ready for us.
+      if (
+        !this.openmct.objects.isMissing(this.childObject) &&
+        !this.childObject.configuration?.series
+      ) {
+        this.ensureStackedSeriesConfigInitialization();
+      }
+    },
+    ensureStackedSeriesConfigInitialization() {
+      const configId = this.openmct.objects.makeKeyString(this.childObject.identifier);
+      const existingConfig = configStore.get(configId);
+      if (!existingConfig) {
+        let persistedSeriesConfig = this.domainObject.configuration.series.find((seriesConfig) => {
+          return this.openmct.objects.areIdsEqual(
+            seriesConfig.identifier,
+            this.childObject.identifier
+          );
+        });
 
-            this.component = new Vue({
-                el: viewContainer,
-                components: {
-                    MctPlot
-                },
-                provide: {
-                    openmct,
-                    domainObject: object
-                },
-                data() {
-                    return {
-                        ...getProps(),
-                        onTickWidthChange,
-                        loadingUpdated,
-                        setStatus
-                    };
-                },
-                template: '<div ref="plotWrapper" class="l-view-section u-style-receiver js-style-receiver" :class="{\'s-status-timeconductor-unsynced\': status && status === \'timeconductor-unsynced\'}"><div v-show="!!loading" class="c-loading--overlay loading"></div><mct-plot :grid-lines="gridLines" :cursor-guide="cursorGuide" :plot-tick-width="plotTickWidth" :options="options" @plotTickWidth="onTickWidthChange" @statusUpdated="setStatus" @loadingUpdated="loadingUpdated"/></div>'
-            });
-        },
-        onTickWidthChange() {
-            this.$emit('plotTickWidth', ...arguments);
-        },
-        setStatus(status) {
-            this.status = status;
-            this.updateComponentProp('status', status);
-        },
-        loadingUpdated(loaded) {
-            this.loading = loaded;
-            this.updateComponentProp('loading', loaded);
-        },
-        getProps() {
-            return {
-                gridLines: this.gridLines,
-                cursorGuide: this.cursorGuide,
-                plotTickWidth: this.plotTickWidth,
-                loading: this.loading,
-                options: this.options,
-                status: this.status
-            };
+        if (!persistedSeriesConfig) {
+          persistedSeriesConfig = {
+            series: {},
+            yAxis: {}
+          };
         }
+
+        const newConfig = new PlotConfigurationModel({
+          id: configId,
+          domainObject: {
+            ...this.childObject,
+            configuration: {
+              series: [
+                {
+                  identifier: this.childObject.identifier,
+                  ...persistedSeriesConfig.series
+                }
+              ],
+              yAxis: persistedSeriesConfig.yAxis
+            }
+          },
+          openmct: this.openmct,
+          palette: this.colorPalette,
+          callback: (data) => {
+            this.data = data;
+          }
+        });
+        configStore.add(configId, newConfig);
+      }
     }
+  }
 };
 </script>
diff --git a/src/plugins/plot/stackedPlot/StackedPlotViewProvider.js b/src/plugins/plot/stackedPlot/StackedPlotViewProvider.js
index cb998148b49..f539bb16f59 100644
--- a/src/plugins/plot/stackedPlot/StackedPlotViewProvider.js
+++ b/src/plugins/plot/stackedPlot/StackedPlotViewProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,58 +20,79 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import mount from 'utils/mount';
+
 import StackedPlot from './StackedPlot.vue';
-import Vue from 'vue';
 
 export default function StackedPlotViewProvider(openmct) {
-    function isCompactView(objectPath) {
-        return objectPath.find(object => object.type === 'time-strip');
-    }
+  function isCompactView(objectPath) {
+    let isChildOfTimeStrip = objectPath.find((object) => object.type === 'time-strip');
 
-    return {
-        key: 'plot-stacked',
-        name: 'Stacked Plot',
-        cssClass: 'icon-telemetry',
-        canView(domainObject, objectPath) {
-            return domainObject.type === 'telemetry.plot.stacked';
-        },
+    return isChildOfTimeStrip && !openmct.router.isNavigatedObject(objectPath);
+  }
 
-        canEdit(domainObject, objectPath) {
-            return domainObject.type === 'telemetry.plot.stacked';
-        },
+  return {
+    key: 'plot-stacked',
+    name: 'Stacked Plot',
+    cssClass: 'icon-telemetry',
+    canView(domainObject, objectPath) {
+      return domainObject.type === 'telemetry.plot.stacked';
+    },
+
+    canEdit(domainObject, objectPath) {
+      return domainObject.type === 'telemetry.plot.stacked';
+    },
 
-        view: function (domainObject, objectPath) {
-            let component;
+    view: function (domainObject, objectPath) {
+      let _destroy = null;
+      let component = null;
 
-            return {
-                show: function (element) {
-                    let isCompact = isCompactView(objectPath);
+      return {
+        show: function (element, isEditing, { renderWhenVisible }) {
+          let isCompact = isCompactView(objectPath);
 
-                    component = new Vue({
-                        el: element,
-                        components: {
-                            StackedPlot
-                        },
-                        provide: {
-                            openmct,
-                            domainObject,
-                            composition: openmct.composition.get(domainObject)
-                        },
-                        data() {
-                            return {
-                                options: {
-                                    compact: isCompact
-                                }
-                            };
-                        },
-                        template: '<stacked-plot :options="options"></stacked-plot>'
-                    });
-                },
-                destroy: function () {
-                    component.$destroy();
-                    component = undefined;
-                }
-            };
+          const { vNode, destroy } = mount(
+            {
+              el: element,
+              components: {
+                StackedPlot
+              },
+              provide: {
+                openmct,
+                domainObject,
+                path: objectPath,
+                renderWhenVisible
+              },
+              data() {
+                return {
+                  options: {
+                    compact: isCompact
+                  }
+                };
+              },
+              template: '<stacked-plot ref="plotComponent" :options="options"></stacked-plot>'
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+          component = vNode.componentInstance;
+        },
+        getViewContext() {
+          if (!component) {
+            return {};
+          }
+
+          return component.$refs.plotComponent.getViewContext();
+        },
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
         }
-    };
+      };
+    }
+  };
 }
diff --git a/src/plugins/plot/stackedPlot/mixins/objectStyles-mixin.js b/src/plugins/plot/stackedPlot/mixins/objectStyles-mixin.js
new file mode 100644
index 00000000000..75c895e2283
--- /dev/null
+++ b/src/plugins/plot/stackedPlot/mixins/objectStyles-mixin.js
@@ -0,0 +1,164 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import StyleRuleManager from '@/plugins/condition/StyleRuleManager';
+import { STYLE_CONSTANTS } from '@/plugins/condition/utils/constants';
+
+export default {
+  inject: ['openmct', 'domainObject', 'path'],
+  data() {
+    return {
+      objectStyle: undefined
+    };
+  },
+  mounted() {
+    this.objectStyles = this.getObjectStyleForItem(this.childObject.configuration);
+    this.initObjectStyles();
+  },
+  beforeUnmount() {
+    if (this.stopListeningStyles) {
+      this.stopListeningStyles();
+    }
+
+    if (this.stopListeningFontStyles) {
+      this.stopListeningFontStyles();
+    }
+
+    if (this.styleRuleManager) {
+      this.styleRuleManager.destroy();
+    }
+  },
+  methods: {
+    getObjectStyleForItem(config) {
+      if (config && config.objectStyles) {
+        return config.objectStyles ? Object.assign({}, config.objectStyles) : undefined;
+      } else {
+        return undefined;
+      }
+    },
+    initObjectStyles() {
+      if (!this.styleRuleManager) {
+        this.styleRuleManager = new StyleRuleManager(
+          this.objectStyles,
+          this.openmct,
+          this.updateStyle.bind(this),
+          true
+        );
+      } else {
+        this.styleRuleManager.updateObjectStyleConfig(this.objectStyles);
+      }
+
+      if (this.stopListeningStyles) {
+        this.stopListeningStyles();
+      }
+
+      this.stopListeningStyles = this.openmct.objects.observe(
+        this.childObject,
+        'configuration.objectStyles',
+        (newObjectStyle) => {
+          //Updating styles in the inspector view will trigger this so that the changes are reflected immediately
+          this.styleRuleManager.updateObjectStyleConfig(newObjectStyle);
+        }
+      );
+
+      if (
+        this.childObject &&
+        this.childObject.configuration &&
+        this.childObject.configuration.fontStyle
+      ) {
+        const { fontSize, font } = this.childObject.configuration.fontStyle;
+        this.setFontSize(fontSize);
+        this.setFont(font);
+      }
+
+      this.stopListeningFontStyles = this.openmct.objects.observe(
+        this.childObject,
+        'configuration.fontStyle',
+        (newFontStyle) => {
+          this.setFontSize(newFontStyle.fontSize);
+          this.setFont(newFontStyle.font);
+        }
+      );
+    },
+    getStyleReceiver() {
+      let styleReceiver;
+
+      if (this.$el !== undefined) {
+        styleReceiver =
+          this.$el.querySelector('.js-style-receiver') || this.$el.querySelector(':first-child');
+
+        if (styleReceiver === null) {
+          styleReceiver = undefined;
+        }
+      }
+
+      return styleReceiver;
+    },
+    setFontSize(newSize) {
+      let elemToStyle = this.getStyleReceiver();
+
+      if (elemToStyle !== undefined) {
+        elemToStyle.dataset.fontSize = newSize;
+      }
+    },
+    setFont(newFont) {
+      let elemToStyle = this.getStyleReceiver();
+
+      if (elemToStyle !== undefined) {
+        elemToStyle.dataset.font = newFont;
+      }
+    },
+    updateStyle(styleObj) {
+      let elemToStyle = this.getStyleReceiver();
+
+      if (!styleObj || elemToStyle === undefined) {
+        return;
+      }
+
+      let keys = Object.keys(styleObj);
+
+      keys.forEach((key) => {
+        if (elemToStyle) {
+          if (typeof styleObj[key] === 'string' && styleObj[key].indexOf('__no_value') > -1) {
+            if (elemToStyle.style[key]) {
+              elemToStyle.style[key] = '';
+            }
+          } else {
+            if (
+              !styleObj.isStyleInvisible &&
+              elemToStyle.classList.contains(STYLE_CONSTANTS.isStyleInvisible)
+            ) {
+              elemToStyle.classList.remove(STYLE_CONSTANTS.isStyleInvisible);
+            } else if (
+              styleObj.isStyleInvisible &&
+              !elemToStyle.classList.contains(styleObj.isStyleInvisible)
+            ) {
+              elemToStyle.classList.add(styleObj.isStyleInvisible);
+            }
+
+            elemToStyle.style[key] = styleObj[key];
+          }
+        }
+      });
+    }
+  }
+};
diff --git a/src/plugins/plot/stackedPlot/pluginSpec.js b/src/plugins/plot/stackedPlot/pluginSpec.js
new file mode 100644
index 00000000000..cc0aa438753
--- /dev/null
+++ b/src/plugins/plot/stackedPlot/pluginSpec.js
@@ -0,0 +1,823 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import EventEmitter from 'EventEmitter';
+import mount from 'utils/mount';
+import {
+  createMouseEvent,
+  createOpenMct,
+  renderWhenVisible,
+  resetApplicationState,
+  spyOnBuiltins
+} from 'utils/testing';
+import { nextTick, ref } from 'vue';
+
+import configStore from '../configuration/ConfigStore.js';
+import PlotConfigurationModel from '../configuration/PlotConfigurationModel.js';
+import PlotOptions from '../inspector/PlotOptions.vue';
+import PlotVuePlugin from '../plugin.js';
+import StackedPlot from './StackedPlot.vue';
+
+describe('the plugin', function () {
+  let element;
+  let child;
+  let openmct;
+  let telemetryPromise;
+  let telemetryPromiseResolve;
+  let mockObjectPath;
+  let stackedPlotObject = {
+    identifier: {
+      namespace: '',
+      key: 'test-plot'
+    },
+    type: 'telemetry.plot.stacked',
+    name: 'Test Stacked Plot',
+    configuration: {
+      series: []
+    }
+  };
+
+  beforeEach((done) => {
+    mockObjectPath = [
+      {
+        name: 'mock folder',
+        type: 'fake-folder',
+        identifier: {
+          key: 'mock-folder',
+          namespace: ''
+        }
+      },
+      {
+        name: 'mock parent folder',
+        type: 'time-strip',
+        identifier: {
+          key: 'mock-parent-folder',
+          namespace: ''
+        }
+      }
+    ];
+    const testTelemetry = [
+      {
+        utc: 1,
+        'some-key': 'some-value 1',
+        'some-other-key': 'some-other-value 1'
+      },
+      {
+        utc: 2,
+        'some-key': 'some-value 2',
+        'some-other-key': 'some-other-value 2'
+      },
+      {
+        utc: 3,
+        'some-key': 'some-value 3',
+        'some-other-key': 'some-other-value 3'
+      }
+    ];
+
+    const timeSystem = {
+      timeSystemKey: 'utc',
+      bounds: {
+        start: 0,
+        end: 4
+      }
+    };
+
+    openmct = createOpenMct(timeSystem);
+
+    telemetryPromise = new Promise((resolve) => {
+      telemetryPromiseResolve = resolve;
+    });
+
+    spyOn(openmct.telemetry, 'request').and.callFake(() => {
+      telemetryPromiseResolve(testTelemetry);
+
+      return telemetryPromise;
+    });
+
+    openmct.install(new PlotVuePlugin());
+
+    element = document.createElement('div');
+    element.style.width = '640px';
+    element.style.height = '480px';
+    child = document.createElement('div');
+    child.style.width = '640px';
+    child.style.height = '480px';
+    element.appendChild(child);
+    document.body.appendChild(element);
+
+    spyOn(window, 'ResizeObserver').and.returnValue({
+      observe() {},
+      unobserve() {},
+      disconnect() {}
+    });
+
+    openmct.types.addType('test-object', {
+      creatable: true
+    });
+
+    spyOnBuiltins(['requestAnimationFrame']);
+    window.requestAnimationFrame.and.callFake((callBack) => {
+      callBack();
+    });
+
+    openmct.router.path = [stackedPlotObject];
+    openmct.on('start', done);
+    openmct.startHeadless();
+  });
+
+  afterEach(async () => {
+    openmct.time.timeSystem('utc', {
+      start: 0,
+      end: 1
+    });
+    configStore.deleteAll();
+    await resetApplicationState(openmct);
+  });
+
+  afterAll(() => {
+    openmct.router.path = null;
+  });
+
+  describe('the plot views', () => {
+    it('provides a stacked plot view for objects with telemetry', () => {
+      const testTelemetryObject = {
+        id: 'test-object',
+        type: 'telemetry.plot.stacked',
+        telemetry: {
+          values: [
+            {
+              key: 'some-key'
+            }
+          ]
+        }
+      };
+
+      const applicableViews = openmct.objectViews.get(testTelemetryObject, mockObjectPath);
+      let plotView = applicableViews.find((viewProvider) => viewProvider.key === 'plot-stacked');
+      expect(plotView).toBeDefined();
+    });
+  });
+
+  describe('The stacked plot view', () => {
+    let testTelemetryObject;
+    let testTelemetryObject2;
+    let config;
+    let component;
+    let mockCompositionList = [];
+    let plotViewComponentObject;
+    let destroyStackedPlot;
+
+    afterAll(() => {
+      openmct.router.path = null;
+    });
+
+    beforeEach(async () => {
+      testTelemetryObject = {
+        identifier: {
+          namespace: '',
+          key: 'test-object'
+        },
+        type: 'test-object',
+        name: 'Test Object',
+        telemetry: {
+          values: [
+            {
+              key: 'utc',
+              format: 'utc',
+              name: 'Time',
+              hints: {
+                domain: 1
+              }
+            },
+            {
+              key: 'some-key',
+              name: 'Some attribute',
+              hints: {
+                range: 1
+              }
+            },
+            {
+              key: 'some-other-key',
+              name: 'Another attribute',
+              hints: {
+                range: 2
+              }
+            }
+          ]
+        },
+        configuration: {
+          objectStyles: {
+            staticStyle: {
+              style: {
+                backgroundColor: 'rgb(0, 200, 0)',
+                color: '',
+                border: ''
+              }
+            },
+            conditionSetIdentifier: {
+              namespace: '',
+              key: 'testConditionSetId'
+            },
+            selectedConditionId: 'conditionId1',
+            defaultConditionId: 'conditionId1',
+            styles: [
+              {
+                conditionId: 'conditionId1',
+                style: {
+                  backgroundColor: 'rgb(0, 155, 0)',
+                  color: '',
+                  output: '',
+                  border: ''
+                }
+              }
+            ]
+          }
+        }
+      };
+
+      testTelemetryObject2 = {
+        identifier: {
+          namespace: '',
+          key: 'test-object2'
+        },
+        type: 'test-object',
+        name: 'Test Object2',
+        telemetry: {
+          values: [
+            {
+              key: 'utc',
+              format: 'utc',
+              name: 'Time',
+              hints: {
+                domain: 1
+              }
+            },
+            {
+              key: 'some-key2',
+              name: 'Some attribute2',
+              hints: {
+                range: 1
+              }
+            },
+            {
+              key: 'some-other-key2',
+              name: 'Another attribute2',
+              hints: {
+                range: 2
+              }
+            }
+          ]
+        }
+      };
+
+      stackedPlotObject.composition = [
+        {
+          identifier: testTelemetryObject.identifier
+        }
+      ];
+
+      mockCompositionList = [];
+      spyOn(openmct.composition, 'get').and.callFake((domainObject) => {
+        //We need unique compositions here - one for the StackedPlot view and one for the PlotLegend view
+        const numObjects = domainObject.composition?.length ?? 0;
+        const mockComposition = new EventEmitter();
+        mockComposition.load = () => {
+          if (numObjects === 1) {
+            mockComposition.emit('add', testTelemetryObject);
+
+            return [testTelemetryObject];
+          } else if (numObjects === 2) {
+            mockComposition.emit('add', testTelemetryObject);
+            mockComposition.emit('add', testTelemetryObject2);
+
+            return [testTelemetryObject, testTelemetryObject2];
+          } else {
+            return [];
+          }
+        };
+
+        mockCompositionList.push(mockComposition);
+
+        return mockComposition;
+      });
+
+      let viewContainer = document.createElement('div');
+      child.append(viewContainer);
+      const { vNode, destroy } = mount(
+        {
+          components: {
+            StackedPlot
+          },
+          provide: {
+            openmct,
+            domainObject: stackedPlotObject,
+            path: [stackedPlotObject],
+            renderWhenVisible
+          },
+          template: '<stacked-plot ref="stackedPlotRef"></stacked-plot>'
+        },
+        {
+          element: viewContainer
+        }
+      );
+
+      component = vNode.componentInstance;
+      destroyStackedPlot = destroy;
+
+      await telemetryPromise;
+      await nextTick();
+      plotViewComponentObject = component.$refs.stackedPlotRef;
+      const configId = openmct.objects.makeKeyString(testTelemetryObject.identifier);
+      config = configStore.get(configId);
+    });
+
+    afterEach(() => {
+      destroyStackedPlot();
+    });
+
+    it('Renders a collapsed legend for every telemetry', () => {
+      let legend = element.querySelectorAll('.plot-wrapper-collapsed-legend .plot-series-name');
+      expect(legend.length).toBe(1);
+      expect(legend[0].innerHTML).toEqual('Test Object');
+    });
+
+    it('Renders an expanded legend for every telemetry', async () => {
+      let legendControl = element.querySelector(
+        '.c-plot-legend__view-control.gl-plot-legend__view-control.c-disclosure-triangle'
+      );
+      const clickEvent = createMouseEvent('click');
+
+      legendControl.dispatchEvent(clickEvent);
+
+      await nextTick();
+
+      let legend = element.querySelectorAll('.plot-wrapper-expanded-legend .plot-legend-item td');
+      expect(legend.length).toBe(6);
+    });
+
+    // disable due to flakiness
+    xit('Renders X-axis ticks for the telemetry object', () => {
+      let xAxisElement = element.querySelectorAll(
+        '.gl-plot-axis-area.gl-plot-x .gl-plot-tick-wrapper'
+      );
+      expect(xAxisElement.length).toBe(1);
+
+      config.xAxis.set('displayRange', {
+        min: 0,
+        max: 4
+      });
+      let ticks = xAxisElement[0].querySelectorAll('.gl-plot-tick');
+      expect(ticks.length).toBe(9);
+    });
+
+    it('Renders Y-axis ticks for the telemetry object', async () => {
+      config.yAxis.set('displayRange', {
+        min: 10,
+        max: 20
+      });
+      await nextTick();
+      let yAxisElement = element.querySelectorAll(
+        '.gl-plot-axis-area.gl-plot-y .gl-plot-tick-wrapper'
+      );
+      expect(yAxisElement.length).toBe(1);
+      let ticks = yAxisElement[0].querySelectorAll('.gl-plot-tick');
+      expect(ticks.length).toBe(6);
+    });
+
+    it('Renders Y-axis options for the telemetry object', () => {
+      let yAxisElement = element.querySelectorAll(
+        '.gl-plot-axis-area.gl-plot-y .gl-plot-y-label__select'
+      );
+      expect(yAxisElement.length).toBe(1);
+      let options = yAxisElement[0].querySelectorAll('option');
+      expect(options.length).toBe(2);
+      expect(options[0].value).toBe('Some attribute');
+      expect(options[1].value).toBe('Another attribute');
+    });
+
+    it('turns on cursor Guides all telemetry objects', async () => {
+      let cursorGuide = ref(plotViewComponentObject.cursorGuide);
+      expect(cursorGuide.value).toBeFalse();
+      cursorGuide.value = true;
+      await nextTick();
+      let childCursorGuides = element.querySelectorAll('.c-cursor-guide--v');
+      expect(childCursorGuides.length).toBe(1);
+    });
+
+    it('shows grid lines for all telemetry objects', () => {
+      expect(plotViewComponentObject.gridLines).toBeTrue();
+      let gridLinesContainer = element.querySelectorAll('.gl-plot-display-area .js-ticks');
+      let visible = 0;
+      gridLinesContainer.forEach((el) => {
+        if (el.style.display !== 'none') {
+          visible++;
+        }
+      });
+      expect(visible).toBe(2);
+    });
+
+    it('hides grid lines for all telemetry objects', async () => {
+      let gridLines = ref(plotViewComponentObject.gridLines);
+      expect(gridLines.value).toBeTrue();
+      gridLines.value = false;
+      await nextTick();
+      expect(gridLines.value).toBeFalse();
+      let gridLinesContainer = element.querySelectorAll('.gl-plot-display-area .js-ticks');
+      let visible = 0;
+      gridLinesContainer.forEach((el) => {
+        if (el.style.display && el.style.display !== 'none') {
+          visible++;
+        }
+      });
+      expect(visible).toBe(0);
+    });
+
+    xit('plots a new series when a new telemetry object is added', () => {
+      //setting composition here so that any new triggers to composition.load with correctly load the mockComposition in the beforeEach
+      stackedPlotObject.composition = [testTelemetryObject, testTelemetryObject2];
+      mockCompositionList[0].emit('add', testTelemetryObject2);
+
+      let legend = element.querySelectorAll('.plot-wrapper-collapsed-legend .plot-series-name');
+      expect(legend.length).toBe(2);
+      expect(legend[1].innerHTML).toEqual('Test Object2');
+    });
+
+    it('removes plots from series when a telemetry object is removed', () => {
+      stackedPlotObject.composition = [];
+      mockCompositionList[0].emit('remove', testTelemetryObject.identifier);
+      expect(plotViewComponentObject.compositionObjects.length).toBe(0);
+    });
+
+    it('Changes the label of the y axis when the option changes', () => {
+      let selectEl = element.querySelector('.gl-plot-y-label__select');
+      selectEl.value = 'Another attribute';
+      selectEl.dispatchEvent(new Event('change'));
+
+      expect(config.yAxis.get('label')).toEqual('Another attribute');
+    });
+
+    it('Adds a new point to the plot', () => {
+      let originalLength = config.series.models[0].getSeriesData().length;
+      config.series.models[0].add({
+        utc: 2,
+        'some-key': 1,
+        'some-other-key': 2
+      });
+      const seriesData = config.series.models[0].getSeriesData();
+      expect(seriesData.length).toEqual(originalLength + 1);
+    });
+
+    it('updates the xscale', () => {
+      config.xAxis.set('displayRange', {
+        min: 0,
+        max: 10
+      });
+      expect(
+        plotViewComponentObject.$refs.stackedPlotItems[0].$refs.plotComponent.$refs.mctPlot.xScale.domain()
+      ).toEqual({
+        min: 0,
+        max: 10
+      });
+    });
+
+    it('updates the yscale', () => {
+      const yAxisList = [config.yAxis, ...config.additionalYAxes];
+      yAxisList.forEach((yAxis) => {
+        yAxis.set('displayRange', {
+          min: 10,
+          max: 20
+        });
+      });
+
+      const yAxesScales =
+        plotViewComponentObject.$refs.stackedPlotItems[0].$refs.plotComponent.$refs.mctPlot.yScale;
+      yAxesScales.forEach((yAxisScale) => {
+        expect(yAxisScale.scale.domain()).toEqual({
+          min: 10,
+          max: 20
+        });
+      });
+    });
+
+    it('shows styles for telemetry objects if available', () => {
+      let conditionalStylesContainer = element.querySelectorAll(
+        '.c-plot--stacked-container .js-style-receiver'
+      );
+      let hasStyles = 0;
+      conditionalStylesContainer.forEach((el) => {
+        if (el.style.backgroundColor) {
+          hasStyles++;
+        }
+      });
+      expect(hasStyles).toBe(1);
+    });
+  });
+
+  describe('the stacked plot inspector view', () => {
+    let viewComponentObject;
+    let mockComposition;
+    let testTelemetryObject;
+    let selection;
+    let config;
+    let destroyPlotOptions;
+    beforeEach(async () => {
+      testTelemetryObject = {
+        identifier: {
+          namespace: '',
+          key: 'test-object'
+        },
+        type: 'test-object',
+        name: 'Test Object',
+        telemetry: {
+          values: [
+            {
+              key: 'utc',
+              format: 'utc',
+              name: 'Time',
+              hints: {
+                domain: 1
+              }
+            },
+            {
+              key: 'some-key',
+              name: 'Some attribute',
+              hints: {
+                range: 1
+              }
+            },
+            {
+              key: 'some-other-key',
+              name: 'Another attribute',
+              hints: {
+                range: 2
+              }
+            }
+          ]
+        }
+      };
+
+      selection = [
+        [
+          {
+            context: {
+              item: {
+                type: 'telemetry.plot.stacked',
+                identifier: {
+                  key: 'some-stacked-plot',
+                  namespace: ''
+                },
+                configuration: {
+                  series: []
+                }
+              }
+            }
+          }
+        ]
+      ];
+
+      openmct.router.path = [testTelemetryObject];
+      mockComposition = new EventEmitter();
+      mockComposition.load = () => {
+        mockComposition.emit('add', testTelemetryObject);
+
+        return [testTelemetryObject];
+      };
+
+      spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
+
+      const configId = openmct.objects.makeKeyString(selection[0][0].context.item.identifier);
+      config = new PlotConfigurationModel({
+        id: configId,
+        domainObject: selection[0][0].context.item,
+        openmct: openmct
+      });
+      configStore.add(configId, config);
+
+      let viewContainer = document.createElement('div');
+      child.append(viewContainer);
+      const { vNode, destroy } = mount(
+        {
+          components: {
+            PlotOptions
+          },
+          provide: {
+            openmct: openmct,
+            domainObject: selection[0][0].context.item,
+            path: [selection[0][0].context.item],
+            renderWhenVisible
+          },
+          template: '<plot-options/>'
+        },
+        {
+          element: viewContainer
+        }
+      );
+      destroyPlotOptions = destroy;
+
+      await nextTick();
+      viewComponentObject = vNode.componentInstance;
+    });
+
+    afterEach(() => {
+      destroyPlotOptions();
+      openmct.router.path = null;
+    });
+
+    describe('in view only mode', () => {
+      let browseOptionsEl;
+      beforeEach(() => {
+        browseOptionsEl = viewComponentObject.$el.querySelector('.js-plot-options-browse');
+      });
+
+      it('shows legend properties', () => {
+        const legendPropertiesEl = browseOptionsEl.querySelector('.js-legend-properties');
+        expect(legendPropertiesEl).not.toBeNull();
+      });
+
+      it('does not show series properties', () => {
+        const seriesPropertiesEl = browseOptionsEl.querySelector('.c-tree');
+        expect(seriesPropertiesEl).toBeNull();
+      });
+
+      it('does not show yaxis properties', () => {
+        const yAxisPropertiesEl = browseOptionsEl.querySelector('.js-yaxis-properties');
+        expect(yAxisPropertiesEl).toBeNull();
+      });
+    });
+  });
+
+  describe('inspector view of stacked plot child', () => {
+    let viewComponentObject;
+    let mockComposition;
+    let testTelemetryObject;
+    let selection;
+    let config;
+    let destroyPlotOptions;
+    beforeEach(async () => {
+      testTelemetryObject = {
+        identifier: {
+          namespace: '',
+          key: 'test-object'
+        },
+        type: 'test-object',
+        name: 'Test Object',
+        telemetry: {
+          values: [
+            {
+              key: 'utc',
+              format: 'utc',
+              name: 'Time',
+              hints: {
+                domain: 1
+              }
+            },
+            {
+              key: 'some-key',
+              name: 'Some attribute',
+              hints: {
+                range: 1
+              }
+            },
+            {
+              key: 'some-other-key',
+              name: 'Another attribute',
+              hints: {
+                range: 2
+              }
+            }
+          ]
+        }
+      };
+
+      selection = [
+        [
+          {
+            context: {
+              item: {
+                id: 'test-object',
+                identifier: {
+                  key: 'test-object',
+                  namespace: ''
+                },
+                type: 'telemetry.plot.overlay',
+                configuration: {
+                  series: [
+                    {
+                      identifier: {
+                        key: 'test-object',
+                        namespace: ''
+                      }
+                    }
+                  ]
+                },
+                composition: []
+              }
+            }
+          },
+          {
+            context: {
+              item: {
+                type: 'telemetry.plot.stacked',
+                identifier: {
+                  key: 'some-stacked-plot',
+                  namespace: ''
+                },
+                configuration: {
+                  series: []
+                }
+              }
+            }
+          }
+        ]
+      ];
+
+      openmct.router.path = [testTelemetryObject];
+      mockComposition = new EventEmitter();
+      mockComposition.load = () => {
+        mockComposition.emit('add', testTelemetryObject);
+
+        return [testTelemetryObject];
+      };
+
+      spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
+
+      const configId = openmct.objects.makeKeyString(selection[0][0].context.item.identifier);
+      config = new PlotConfigurationModel({
+        id: configId,
+        domainObject: selection[0][0].context.item,
+        openmct: openmct
+      });
+      configStore.add(configId, config);
+
+      let viewContainer = document.createElement('div');
+      child.append(viewContainer);
+      const { vNode, destroy } = mount(
+        {
+          components: {
+            PlotOptions
+          },
+          provide: {
+            openmct: openmct,
+            domainObject: selection[0][0].context.item,
+            path: [selection[0][0].context.item, selection[0][1].context.item],
+            renderWhenVisible
+          },
+          template: '<plot-options />'
+        },
+        {
+          element: viewContainer
+        }
+      );
+      destroyPlotOptions = destroy;
+
+      await nextTick();
+      viewComponentObject = vNode.componentInstance;
+    });
+
+    afterEach(() => {
+      destroyPlotOptions();
+      openmct.router.path = null;
+    });
+
+    describe('in view only mode', () => {
+      let browseOptionsEl;
+      beforeEach(() => {
+        browseOptionsEl = viewComponentObject.$el.querySelector('.js-plot-options-browse');
+      });
+
+      it('hides legend properties', () => {
+        const legendPropertiesEl = browseOptionsEl.querySelector('.js-legend-properties');
+        expect(legendPropertiesEl).toBeNull();
+      });
+
+      it('shows series properties', () => {
+        const seriesPropertiesEl = browseOptionsEl.querySelector('.c-tree');
+        expect(seriesPropertiesEl).not.toBeNull();
+      });
+
+      it('shows yaxis properties', () => {
+        const yAxisPropertiesEl = browseOptionsEl.querySelector('.js-yaxis-properties');
+        expect(yAxisPropertiesEl).not.toBeNull();
+      });
+    });
+  });
+});
diff --git a/src/plugins/plot/stackedPlot/stackedPlotConfigurationInterceptor.js b/src/plugins/plot/stackedPlot/stackedPlotConfigurationInterceptor.js
new file mode 100644
index 00000000000..e1dbc1c8087
--- /dev/null
+++ b/src/plugins/plot/stackedPlot/stackedPlotConfigurationInterceptor.js
@@ -0,0 +1,36 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+export default function stackedPlotConfigurationInterceptor(openmct) {
+  openmct.objects.addGetInterceptor({
+    appliesTo: (identifier, domainObject) => {
+      return domainObject && domainObject.type === 'telemetry.plot.stacked';
+    },
+    invoke: (identifier, object) => {
+      if (object && object.configuration && object.configuration.series === undefined) {
+        object.configuration.series = [];
+      }
+
+      return object;
+    }
+  });
+}
diff --git a/src/plugins/plot/tickUtils.js b/src/plugins/plot/tickUtils.js
index 7dd84673beb..fff48cb546b 100644
--- a/src/plugins/plot/tickUtils.js
+++ b/src/plugins/plot/tickUtils.js
@@ -1,3 +1,5 @@
+import { antisymlog, symlog } from './mathUtils.js';
+
 const e10 = Math.sqrt(50);
 const e5 = Math.sqrt(10);
 const e2 = Math.sqrt(2);
@@ -6,18 +8,18 @@ const e2 = Math.sqrt(2);
  * Nicely formatted tick steps from d3-array.
  */
 function tickStep(start, stop, count) {
-    const step0 = Math.abs(stop - start) / Math.max(0, count);
-    let step1 = Math.pow(10, Math.floor(Math.log(step0) / Math.LN10));
-    const error = step0 / step1;
-    if (error >= e10) {
-        step1 *= 10;
-    } else if (error >= e5) {
-        step1 *= 5;
-    } else if (error >= e2) {
-        step1 *= 2;
-    }
-
-    return stop < start ? -step1 : step1;
+  const step0 = Math.abs(stop - start) / Math.max(0, count);
+  let step1 = Math.pow(10, Math.floor(Math.log(step0) / Math.LN10));
+  const error = step0 / step1;
+  if (error >= e10) {
+    step1 *= 10;
+  } else if (error >= e5) {
+    step1 *= 5;
+  } else if (error >= e2) {
+    step1 *= 2;
+  }
+
+  return stop < start ? -step1 : step1;
 }
 
 /**
@@ -25,96 +27,130 @@ function tickStep(start, stop, count) {
  * ticks to precise values.
  */
 function getPrecision(step) {
-    const exponential = step.toExponential();
-    const i = exponential.indexOf('e');
-    if (i === -1) {
-        return 0;
-    }
+  const exponential = step.toExponential();
+  const i = exponential.indexOf('e');
+  if (i === -1) {
+    return 0;
+  }
 
-    let precision = Math.max(0, -(Number(exponential.slice(i + 1))));
+  let precision = Math.max(0, -Number(exponential.slice(i + 1)));
+
+  if (precision > 20) {
+    precision = 20;
+  }
+
+  return precision;
+}
 
-    if (precision > 20) {
-        precision = 20;
+export function getLogTicks(start, stop, mainTickCount = 8, secondaryTickCount = 6) {
+  // log()'ed values
+  const mainLogTicks = ticks(start, stop, mainTickCount);
+
+  // original values
+  const mainTicks = mainLogTicks.map((n) => antisymlog(n, 10));
+
+  const result = [];
+
+  let i = 0;
+  for (const logTick of mainLogTicks) {
+    result.push(logTick);
+
+    if (i === mainLogTicks.length - 1) {
+      break;
     }
 
-    return precision;
+    const tick = mainTicks[i];
+    const nextTick = mainTicks[i + 1];
+    const rangeBetweenMainTicks = nextTick - tick;
+
+    const secondaryLogTicks = ticks(
+      tick + rangeBetweenMainTicks / (secondaryTickCount + 1),
+      nextTick - rangeBetweenMainTicks / (secondaryTickCount + 1),
+      secondaryTickCount - 2
+    ).map((n) => symlog(n, 10));
+
+    result.push(...secondaryLogTicks);
+
+    i++;
+  }
+
+  return result;
 }
 
 /**
  * Linear tick generation from d3-array.
  */
 export function ticks(start, stop, count) {
-    const step = tickStep(start, stop, count);
-    const precision = getPrecision(step);
-
-    return _.range(
-        Math.ceil(start / step) * step,
-        Math.floor(stop / step) * step + step / 2, // inclusive
-        step
-    ).map(function round(tick) {
-        return Number(tick.toFixed(precision));
-    });
+  const step = tickStep(start, stop, count);
+  const precision = getPrecision(step);
+
+  return _.range(
+    Math.ceil(start / step) * step,
+    Math.floor(stop / step) * step + step / 2, // inclusive
+    step
+  ).map(function round(tick) {
+    return Number(tick.toFixed(precision));
+  });
 }
 
 export function commonPrefix(a, b) {
-    const maxLen = Math.min(a.length, b.length);
-    let breakpoint = 0;
-    for (let i = 0; i < maxLen; i++) {
-        if (a[i] !== b[i]) {
-            break;
-        }
+  const maxLen = Math.min(a.length, b.length);
+  let breakpoint = 0;
+  for (let i = 0; i < maxLen; i++) {
+    if (a[i] !== b[i]) {
+      break;
+    }
 
-        if (a[i] === ' ') {
-            breakpoint = i + 1;
-        }
+    if (a[i] === ' ') {
+      breakpoint = i + 1;
     }
+  }
 
-    return a.slice(0, breakpoint);
+  return a.slice(0, breakpoint);
 }
 
 export function commonSuffix(a, b) {
-    const maxLen = Math.min(a.length, b.length);
-    let breakpoint = 0;
-    for (let i = 0; i <= maxLen; i++) {
-        if (a[a.length - i] !== b[b.length - i]) {
-            break;
-        }
+  const maxLen = Math.min(a.length, b.length);
+  let breakpoint = 0;
+  for (let i = 0; i <= maxLen; i++) {
+    if (a[a.length - i] !== b[b.length - i]) {
+      break;
+    }
 
-        if ('. '.indexOf(a[a.length - i]) !== -1) {
-            breakpoint = i;
-        }
+    if ('. '.indexOf(a[a.length - i]) !== -1) {
+      breakpoint = i;
     }
+  }
 
-    return a.slice(a.length - breakpoint);
+  return a.slice(a.length - breakpoint);
 }
 
 export function getFormattedTicks(newTicks, format) {
-    newTicks = newTicks
-        .map(function (tickValue) {
-            return {
-                value: tickValue,
-                text: format(tickValue)
-            };
-        });
-
-    if (newTicks.length && typeof newTicks[0].text === 'string') {
-        const tickText = newTicks.map(function (t) {
-            return t.text;
-        });
-        const prefix = tickText.reduce(commonPrefix);
-        const suffix = tickText.reduce(commonSuffix);
-        newTicks.forEach(function (t) {
-            t.fullText = t.text;
-
-            if (typeof t.text === 'string') {
-                if (suffix.length) {
-                    t.text = t.text.slice(prefix.length, -suffix.length);
-                } else {
-                    t.text = t.text.slice(prefix.length);
-                }
-            }
-        });
-    }
+  newTicks = newTicks.map(function (tickValue) {
+    return {
+      value: tickValue,
+      text: format(tickValue)
+    };
+  });
+
+  if (newTicks.length && typeof newTicks[0].text === 'string') {
+    const tickText = newTicks.map(function (t) {
+      return t.text;
+    });
+    const prefix = tickText.reduce(commonPrefix);
+    const suffix = tickText.reduce(commonSuffix);
+    newTicks.forEach(function (t) {
+      t.fullText = t.text;
+
+      if (typeof t.text === 'string') {
+        if (suffix.length) {
+          t.text = t.text.slice(prefix.length, -suffix.length);
+        } else {
+          t.text = t.text.slice(prefix.length);
+        }
+      }
+    });
+  }
 
-    return newTicks;
+  return newTicks;
 }
diff --git a/src/plugins/plugins.js b/src/plugins/plugins.js
index d38c0868f97..fb7887c9f31 100644
--- a/src/plugins/plugins.js
+++ b/src/plugins/plugins.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,207 +20,157 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    'lodash',
-    './utcTimeSystem/plugin',
-    './remoteClock/plugin',
-    './localTimeSystem/plugin',
-    './ISOTimeFormat/plugin',
-    '../../example/generator/plugin',
-    './autoflow/AutoflowTabularPlugin',
-    './timeConductor/plugin',
-    '../../example/imagery/plugin',
-    './imagery/plugin',
-    '../../platform/import-export/bundle',
-    './summaryWidget/plugin',
-    './URLIndicatorPlugin/URLIndicatorPlugin',
-    './telemetryMean/plugin',
-    './plot/plugin',
-    './telemetryTable/plugin',
-    './staticRootPlugin/plugin',
-    './notebook/plugin',
-    './displayLayout/plugin',
-    './folderView/plugin',
-    './flexibleLayout/plugin',
-    './tabs/plugin',
-    './LADTable/plugin',
-    './filters/plugin',
-    './objectMigration/plugin',
-    './goToOriginalAction/plugin',
-    './openInNewTabAction/plugin',
-    './clearData/plugin',
-    './webPage/plugin',
-    './condition/plugin',
-    './conditionWidget/plugin',
-    './themes/espresso',
-    './themes/maelstrom',
-    './themes/snow',
-    './URLTimeSettingsSynchronizer/plugin',
-    './notificationIndicator/plugin',
-    './newFolderAction/plugin',
-    './nonEditableFolder/plugin',
-    './persistence/couch/plugin',
-    './defaultRootName/plugin',
-    './plan/plugin',
-    './viewDatumAction/plugin',
-    './viewLargeAction/plugin',
-    './interceptors/plugin',
-    './performanceIndicator/plugin',
-    './CouchDBSearchFolder/plugin',
-    './timeline/plugin',
-    './hyperlink/plugin'
-], function (
-    _,
-    UTCTimeSystem,
-    RemoteClock,
-    LocalTimeSystem,
-    ISOTimeFormat,
-    GeneratorPlugin,
-    AutoflowPlugin,
-    TimeConductorPlugin,
-    ExampleImagery,
-    ImageryPlugin,
-    ImportExport,
-    SummaryWidget,
-    URLIndicatorPlugin,
-    TelemetryMean,
-    PlotPlugin,
-    TelemetryTablePlugin,
-    StaticRootPlugin,
-    Notebook,
-    DisplayLayoutPlugin,
-    FolderView,
-    FlexibleLayout,
-    Tabs,
-    LADTable,
-    Filters,
-    ObjectMigration,
-    GoToOriginalAction,
-    OpenInNewTabAction,
-    ClearData,
-    WebPagePlugin,
-    ConditionPlugin,
-    ConditionWidgetPlugin,
-    Espresso,
-    Maelstrom,
-    Snow,
-    URLTimeSettingsSynchronizer,
-    NotificationIndicator,
-    NewFolderAction,
-    NonEditableFolder,
-    CouchDBPlugin,
-    DefaultRootName,
-    PlanLayout,
-    ViewDatumAction,
-    ViewLargeAction,
-    ObjectInterceptors,
-    PerformanceIndicator,
-    CouchDBSearchFolder,
-    Timeline,
-    Hyperlink
-) {
-    const bundleMap = {
-        LocalStorage: 'platform/persistence/local',
-        MyItems: 'platform/features/my-items',
-        Elasticsearch: 'platform/persistence/elastic'
-    };
+import ExampleDataVisualizationSourcePlugin from '../../example/dataVisualization/plugin.js';
+import EventGeneratorPlugin from '../../example/eventGenerator/plugin.js';
+import ExampleTags from '../../example/exampleTags/plugin.js';
+import ExampleUser from '../../example/exampleUser/plugin.js';
+import ExampleFaultSource from '../../example/faultManagement/exampleFaultSource.js';
+import GeneratorPlugin from '../../example/generator/plugin.js';
+import ExampleImagery from '../../example/imagery/plugin.js';
+import AutoflowPlugin from './autoflow/AutoflowTabularPlugin.js';
+import BarChartPlugin from './charts/bar/plugin.js';
+import ScatterPlotPlugin from './charts/scatter/plugin.js';
+import ClearData from './clearData/plugin.js';
+import Clock from './clock/plugin.js';
+import ConditionPlugin from './condition/plugin.js';
+import ConditionWidgetPlugin from './conditionWidget/plugin.js';
+import CouchDBSearchFolder from './CouchDBSearchFolder/plugin.js';
+import DefaultRootName from './defaultRootName/plugin.js';
+import DeviceClassifier from './DeviceClassifier/plugin.js';
+import DisplayLayoutPlugin from './displayLayout/plugin.js';
+import FaultManagementPlugin from './faultManagement/FaultManagementPlugin.js';
+import Filters from './filters/plugin.js';
+import FlexibleLayout from './flexibleLayout/plugin.js';
+import FolderView from './folderView/plugin.js';
+import FormActions from './formActions/plugin.js';
+import GaugePlugin from './gauge/GaugePlugin.js';
+import GoToOriginalAction from './goToOriginalAction/plugin.js';
+import Hyperlink from './hyperlink/plugin.js';
+import ImageryPlugin from './imagery/plugin.js';
+import InspectorDataVisualization from './inspectorDataVisualization/plugin.js';
+import InspectorViews from './inspectorViews/plugin.js';
+import ObjectInterceptors from './interceptors/plugin.js';
+import ISOTimeFormat from './ISOTimeFormat/plugin.js';
+import LADTable from './LADTable/plugin.js';
+import LocalStorage from './localStorage/plugin.js';
+import LocalTimeSystem from './localTimeSystem/plugin.js';
+import MyItems from './myItems/plugin.js';
+import NewFolderAction from './newFolderAction/plugin.js';
+import { NotebookPlugin, RestrictedNotebookPlugin } from './notebook/plugin.js';
+import NotificationIndicator from './notificationIndicator/plugin.js';
+import ObjectMigration from './objectMigration/plugin.js';
+import OpenInNewTabAction from './openInNewTabAction/plugin.js';
+import OperatorStatus from './operatorStatus/plugin.js';
+import PerformanceIndicator from './performanceIndicator/plugin.js';
+import CouchDBPlugin from './persistence/couch/plugin.js';
+import PlanLayout from './plan/plugin.js';
+import PlotPlugin from './plot/plugin.js';
+import ReloadAction from './reloadAction/plugin.js';
+import RemoteClock from './remoteClock/plugin.js';
+import StaticRootPlugin from './staticRootPlugin/plugin.js';
+import SummaryWidget from './summaryWidget/plugin.js';
+import Tabs from './tabs/plugin.js';
+import TelemetryMean from './telemetryMean/plugin.js';
+import TelemetryTablePlugin from './telemetryTable/plugin.js';
+import Espresso from './themes/espresso.js';
+import Snow from './themes/snow.js';
+import TimeConductorPlugin from './timeConductor/plugin.js';
+import Timeline from './timeline/plugin.js';
+import TimeList from './timelist/plugin.js';
+import Timer from './timer/plugin.js';
+import URLIndicatorPlugin from './URLIndicatorPlugin/URLIndicatorPlugin.js';
+import URLTimeSettingsSynchronizer from './URLTimeSettingsSynchronizer/plugin.js';
+import UserIndicator from './userIndicator/plugin.js';
+import UTCTimeSystem from './utcTimeSystem/plugin.js';
+import ViewDatumAction from './viewDatumAction/plugin.js';
+import ViewLargeAction from './viewLargeAction/plugin.js';
+import WebPagePlugin from './webPage/plugin.js';
 
-    const plugins = _.mapValues(bundleMap, function (bundleName, pluginName) {
-        return function pluginConstructor() {
-            return function (openmct) {
-                openmct.legacyRegistry.enable(bundleName);
-            };
-        };
-    });
+const plugins = {};
 
-    plugins.UTCTimeSystem = UTCTimeSystem;
-    plugins.LocalTimeSystem = LocalTimeSystem;
-    plugins.RemoteClock = RemoteClock.default;
+plugins.example = {};
+plugins.example.ExampleUser = ExampleUser;
+plugins.example.ExampleImagery = ExampleImagery;
+plugins.example.ExampleFaultSource = ExampleFaultSource;
+plugins.example.EventGeneratorPlugin = EventGeneratorPlugin;
+plugins.example.ExampleDataVisualizationSourcePlugin = ExampleDataVisualizationSourcePlugin;
+plugins.example.ExampleTags = ExampleTags;
+plugins.example.Generator = () => GeneratorPlugin;
 
-    plugins.ImportExport = ImportExport;
+plugins.UTCTimeSystem = UTCTimeSystem;
+plugins.LocalTimeSystem = LocalTimeSystem;
+plugins.RemoteClock = RemoteClock;
 
-    plugins.StaticRootPlugin = StaticRootPlugin;
+plugins.MyItems = MyItems;
 
-    /**
-     * A tabular view showing the latest values of multiple telemetry points at
-     * once. Formatted so that labels and values are aligned.
-     *
-     * @param {Object} [options] Optional settings to apply to the autoflow
-     * tabular view. Currently supports one option, 'type'.
-     * @param {string} [options.type] The key of an object type to apply this view
-     * to exclusively.
-     */
-    plugins.AutoflowView = AutoflowPlugin;
+plugins.StaticRootPlugin = StaticRootPlugin;
 
-    plugins.Conductor = TimeConductorPlugin.default;
-
-    plugins.CouchDB = CouchDBPlugin.default;
-
-    plugins.Elasticsearch = function (url) {
-        return function (openmct) {
-            if (url) {
-                const bundleName = "config/elastic";
-                openmct.legacyRegistry.register(bundleName, {
-                    "extensions": {
-                        "constants": [
-                            {
-                                "key": "ELASTIC_ROOT",
-                                "value": url,
-                                "priority": "mandatory"
-                            }
-                        ]
-                    }
-                });
-                openmct.legacyRegistry.enable(bundleName);
-            }
+/**
+ * A tabular view showing the latest values of multiple telemetry points at
+ * once. Formatted so that labels and values are aligned.
+ *
+ * @param {Object} [options] Optional settings to apply to the autoflow
+ * tabular view. Currently supports one option, 'type'.
+ * @param {string} [options.type] The key of an object type to apply this view
+ * to exclusively.
+ */
+plugins.AutoflowView = AutoflowPlugin;
 
-            openmct.legacyRegistry.enable(bundleMap.Elasticsearch);
-        };
-    };
+plugins.Conductor = TimeConductorPlugin;
 
-    plugins.Generator = function () {
-        return GeneratorPlugin;
-    };
+plugins.CouchDB = CouchDBPlugin;
 
-    plugins.ExampleImagery = ExampleImagery;
-    plugins.ImageryPlugin = ImageryPlugin;
-    plugins.Plot = PlotPlugin.default;
-    plugins.TelemetryTable = TelemetryTablePlugin;
+plugins.ImageryPlugin = ImageryPlugin;
+plugins.Plot = PlotPlugin;
+plugins.BarChart = BarChartPlugin;
+plugins.ScatterPlot = ScatterPlotPlugin;
+plugins.TelemetryTable = TelemetryTablePlugin;
 
-    plugins.SummaryWidget = SummaryWidget;
-    plugins.TelemetryMean = TelemetryMean;
-    plugins.URLIndicator = URLIndicatorPlugin;
-    plugins.Notebook = Notebook.default;
-    plugins.DisplayLayout = DisplayLayoutPlugin.default;
-    plugins.FolderView = FolderView;
-    plugins.Tabs = Tabs;
-    plugins.FlexibleLayout = FlexibleLayout;
-    plugins.LADTable = LADTable.default;
-    plugins.Filters = Filters;
-    plugins.ObjectMigration = ObjectMigration.default;
-    plugins.GoToOriginalAction = GoToOriginalAction.default;
-    plugins.OpenInNewTabAction = OpenInNewTabAction.default;
-    plugins.ClearData = ClearData;
-    plugins.WebPage = WebPagePlugin.default;
-    plugins.Espresso = Espresso.default;
-    plugins.Maelstrom = Maelstrom.default;
-    plugins.Snow = Snow.default;
-    plugins.Condition = ConditionPlugin.default;
-    plugins.ConditionWidget = ConditionWidgetPlugin.default;
-    plugins.URLTimeSettingsSynchronizer = URLTimeSettingsSynchronizer.default;
-    plugins.NotificationIndicator = NotificationIndicator.default;
-    plugins.NewFolderAction = NewFolderAction.default;
-    plugins.NonEditableFolder = NonEditableFolder.default;
-    plugins.ISOTimeFormat = ISOTimeFormat.default;
-    plugins.DefaultRootName = DefaultRootName.default;
-    plugins.PlanLayout = PlanLayout.default;
-    plugins.ViewDatumAction = ViewDatumAction.default;
-    plugins.ViewLargeAction = ViewLargeAction.default;
-    plugins.ObjectInterceptors = ObjectInterceptors.default;
-    plugins.PerformanceIndicator = PerformanceIndicator.default;
-    plugins.CouchDBSearchFolder = CouchDBSearchFolder.default;
-    plugins.Timeline = Timeline.default;
-    plugins.Hyperlink = Hyperlink.default;
+plugins.SummaryWidget = SummaryWidget;
+plugins.TelemetryMean = TelemetryMean;
+plugins.URLIndicator = URLIndicatorPlugin;
+plugins.Notebook = NotebookPlugin;
+plugins.RestrictedNotebook = RestrictedNotebookPlugin;
+plugins.DisplayLayout = DisplayLayoutPlugin;
+plugins.FaultManagement = FaultManagementPlugin;
+plugins.FormActions = FormActions;
+plugins.FolderView = FolderView;
+plugins.Tabs = Tabs;
+plugins.FlexibleLayout = FlexibleLayout;
+plugins.LADTable = LADTable;
+plugins.Filters = Filters;
+plugins.ObjectMigration = ObjectMigration;
+plugins.GoToOriginalAction = GoToOriginalAction;
+plugins.OpenInNewTabAction = OpenInNewTabAction;
+plugins.ReloadAction = ReloadAction;
+plugins.ClearData = ClearData;
+plugins.WebPage = WebPagePlugin;
+plugins.Espresso = Espresso;
+plugins.Snow = Snow;
+plugins.Condition = ConditionPlugin;
+plugins.ConditionWidget = ConditionWidgetPlugin;
+plugins.URLTimeSettingsSynchronizer = URLTimeSettingsSynchronizer;
+plugins.NotificationIndicator = NotificationIndicator;
+plugins.NewFolderAction = NewFolderAction;
+plugins.ISOTimeFormat = ISOTimeFormat;
+plugins.DefaultRootName = DefaultRootName;
+plugins.PlanLayout = PlanLayout;
+plugins.ViewDatumAction = ViewDatumAction;
+plugins.ViewLargeAction = ViewLargeAction;
+plugins.ObjectInterceptors = ObjectInterceptors;
+plugins.PerformanceIndicator = PerformanceIndicator;
+plugins.CouchDBSearchFolder = CouchDBSearchFolder;
+plugins.Timeline = Timeline;
+plugins.Hyperlink = Hyperlink;
+plugins.Clock = Clock;
+plugins.Timer = Timer;
+plugins.DeviceClassifier = DeviceClassifier;
+plugins.UserIndicator = UserIndicator;
+plugins.LocalStorage = LocalStorage;
+plugins.OperatorStatus = OperatorStatus;
+plugins.Gauge = GaugePlugin;
+plugins.Timelist = TimeList;
+plugins.InspectorViews = InspectorViews;
+plugins.InspectorDataVisualization = InspectorDataVisualization;
 
-    return plugins;
-});
+export default plugins;
diff --git a/src/plugins/reloadAction/ReloadAction.js b/src/plugins/reloadAction/ReloadAction.js
new file mode 100644
index 00000000000..ff86bff4f5d
--- /dev/null
+++ b/src/plugins/reloadAction/ReloadAction.js
@@ -0,0 +1,37 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+export default class ReloadAction {
+  constructor(openmct) {
+    this.name = 'Reload';
+    this.key = 'reload';
+    this.description = 'Reload this object and its children';
+    this.group = 'action';
+    this.priority = 10;
+    this.cssClass = 'icon-refresh';
+
+    this.openmct = openmct;
+  }
+  invoke(objectPath, view) {
+    const domainObject = objectPath[0];
+    this.openmct.objectViews.emit('reload', domainObject);
+  }
+}
diff --git a/src/plugins/reloadAction/plugin.js b/src/plugins/reloadAction/plugin.js
new file mode 100644
index 00000000000..c9db76b89a1
--- /dev/null
+++ b/src/plugins/reloadAction/plugin.js
@@ -0,0 +1,28 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import ReloadAction from './ReloadAction.js';
+
+export default function plugin() {
+  return function install(openmct) {
+    openmct.actions.register(new ReloadAction(openmct));
+  };
+}
diff --git a/src/plugins/remoteClock/RemoteClock.js b/src/plugins/remoteClock/RemoteClock.js
index 96aa3362482..db50e4b2e23 100644
--- a/src/plugins/remoteClock/RemoteClock.js
+++ b/src/plugins/remoteClock/RemoteClock.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2021, United States Government
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,7 +19,8 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import DefaultClock from '../../utils/clock/DefaultClock';
+import DefaultClock from '../../utils/clock/DefaultClock.js';
+import remoteClockRequestInterceptor from './requestInterceptor.js';
 
 /**
  * A {@link openmct.TimeAPI.Clock} that updates the temporal bounds of the
@@ -32,101 +33,138 @@ import DefaultClock from '../../utils/clock/DefaultClock';
  */
 
 export default class RemoteClock extends DefaultClock {
-    constructor(openmct, identifier) {
-        super();
-
-        this.key = 'remote-clock';
-
-        this.openmct = openmct;
-        this.identifier = identifier;
-
-        this.name = 'Remote Clock';
-        this.description = "Provides telemetry based timestamps from a configurable source.";
-
-        this.timeTelemetryObject = undefined;
-        this.parseTime = undefined;
-        this.metadata = undefined;
-
-        this.lastTick = 0;
-
-        this._processDatum = this._processDatum.bind(this);
+  constructor(openmct, identifier) {
+    super();
+
+    this.key = 'remote-clock';
+
+    this.openmct = openmct;
+    this.identifier = identifier;
+
+    this.name = 'Remote Clock';
+    this.description = 'Provides telemetry based timestamps from a configurable source.';
+
+    this.timeTelemetryObject = undefined;
+    this.parseTime = undefined;
+    this.formatTime = undefined;
+    this.metadata = undefined;
+
+    this.lastTick = 0;
+
+    this.openmct.telemetry.addRequestInterceptor(
+      remoteClockRequestInterceptor(this.openmct, this.identifier, this.#waitForReady.bind(this))
+    );
+
+    this._processDatum = this._processDatum.bind(this);
+  }
+
+  start() {
+    this.openmct.objects.get(this.identifier).then((domainObject) => {
+      // The start method is called when at least one listener registers with the clock.
+      // When the clock is changed, listeners are unregistered from the clock and the stop method is called.
+      // Sometimes, the objects.get call above does not resolve before the stop method is called.
+      // So when we proceed with the clock subscription below, we first need to ensure that there is at least one listener for our clock.
+      if (this.eventNames().length === 0) {
+        return;
+      }
+      this.openmct.time.on('timeSystem', this._timeSystemChange);
+      this.timeTelemetryObject = domainObject;
+      this.metadata = this.openmct.telemetry.getMetadata(domainObject);
+      this._timeSystemChange();
+      this._requestLatest();
+      this._subscribe();
+    });
+  }
+
+  stop() {
+    this.openmct.time.off('timeSystem', this._timeSystemChange);
+    if (this._unsubscribe) {
+      this._unsubscribe();
     }
 
-    start() {
-        this.openmct.time.on('timeSystem', this._timeSystemChange);
-        this.openmct.objects.get(this.identifier).then((domainObject) => {
-            this.timeTelemetryObject = domainObject;
-            this.metadata = this.openmct.telemetry.getMetadata(domainObject);
-            this._timeSystemChange();
-            this._requestLatest();
-            this._subscribe();
-        }).catch((error) => {
-            throw new Error(error);
-        });
+    this.removeAllListeners();
+  }
+
+  /**
+   * Will start a subscription to the timeTelemetryObject as well
+   * handle the unsubscribe callback
+   *
+   * @private
+   */
+  _subscribe() {
+    this._unsubscribe = this.openmct.telemetry.subscribe(
+      this.timeTelemetryObject,
+      this._processDatum
+    );
+  }
+
+  /**
+   * Will request the latest data for the timeTelemetryObject
+   *
+   * @private
+   */
+  _requestLatest() {
+    this.openmct.telemetry
+      .request(this.timeTelemetryObject, {
+        size: 1,
+        strategy: 'latest'
+      })
+      .then((data) => {
+        this._processDatum(data[data.length - 1]);
+      });
+  }
+
+  /**
+   * Function to parse the datum from the timeTelemetryObject as well
+   * as check if it's valid, calls "tick"
+   *
+   * @private
+   */
+  _processDatum(datum) {
+    let time = this.parseTime(datum);
+
+    if (time > this.lastTick) {
+      this.tick(time);
     }
-
-    stop() {
-        this.openmct.time.off('timeSystem', this._timeSystemChange);
-        if (this._unsubscribe) {
-            this._unsubscribe();
-        }
-
-        this.removeAllListeners();
-    }
-
-    /**
-     * Will start a subscription to the timeTelemetryObject as well
-     * handle the unsubscribe callback
-     *
-     * @private
-     */
-    _subscribe() {
-        this._unsubscribe = this.openmct.telemetry.subscribe(
-            this.timeTelemetryObject,
-            this._processDatum
-        );
-    }
-
-    /**
-     * Will request the latest data for the timeTelemetryObject
-     *
-     * @private
-     */
-    _requestLatest() {
-        this.openmct.telemetry.request(this.timeTelemetryObject, {
-            size: 1,
-            strategy: 'latest'
-        }).then(data => {
-            this._processDatum(data[data.length - 1]);
+  }
+
+  /**
+   * Callback function for timeSystem change events
+   *
+   * @private
+   */
+  _timeSystemChange() {
+    let timeSystem = this.openmct.time.timeSystem();
+    let timeKey = timeSystem.key;
+    let metadataValue = this.metadata.value(timeKey);
+    let timeFormatter = this.openmct.telemetry.getValueFormatter(metadataValue);
+    this.parseTime = (datum) => {
+      return timeFormatter.parse(datum);
+    };
+
+    this.formatTime = (datum) => {
+      return timeFormatter.format(datum);
+    };
+  }
+
+  /**
+   * Waits for the clock to have a non-default tick value.
+   *
+   * @private
+   */
+  #waitForReady() {
+    const waitForInitialTick = (resolve) => {
+      if (this.lastTick > 0) {
+        const offsets = this.openmct.time.clockOffsets();
+        resolve({
+          start: this.lastTick + offsets.start,
+          end: this.lastTick + offsets.end
         });
-    }
-
-    /**
-     * Function to parse the datum from the timeTelemetryObject as well
-     * as check if it's valid, calls "tick"
-     *
-     * @private
-     */
-    _processDatum(datum) {
-        let time = this.parseTime(datum);
-
-        if (time > this.lastTick) {
-            this.tick(time);
-        }
-    }
+      } else {
+        setTimeout(() => waitForInitialTick(resolve), 100);
+      }
+    };
 
-    /**
-     * Callback function for timeSystem change events
-     *
-     * @private
-     */
-    _timeSystemChange() {
-        let timeSystem = this.openmct.time.timeSystem();
-        let timeKey = timeSystem.key;
-        let metadataValue = this.metadata.value(timeKey);
-        let timeFormatter = this.openmct.telemetry.getValueFormatter(metadataValue);
-        this.parseTime = (datum) => {
-            return timeFormatter.parse(datum);
-        };
-    }
+    return new Promise(waitForInitialTick);
+  }
 }
diff --git a/src/plugins/remoteClock/RemoteClockSpec.js b/src/plugins/remoteClock/RemoteClockSpec.js
index 83adc185443..a7706bee20c 100644
--- a/src/plugins/remoteClock/RemoteClockSpec.js
+++ b/src/plugins/remoteClock/RemoteClockSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,130 +20,152 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import {
-    createOpenMct,
-    resetApplicationState
-} from 'utils/testing';
+import { createOpenMct, resetApplicationState } from 'utils/testing';
 
 const REMOTE_CLOCK_KEY = 'remote-clock';
 const TIME_TELEMETRY_ID = {
-    namespace: 'remote',
-    key: 'telemetry'
+  namespace: 'remote',
+  key: 'telemetry'
 };
 const TIME_VALUE = 12345;
 const REQ_OPTIONS = {
-    size: 1,
-    strategy: 'latest'
+  size: 1,
+  strategy: 'latest'
 };
 const OFFSET_START = -10;
 const OFFSET_END = 1;
 
-describe("the RemoteClock plugin", () => {
-    let openmct;
-    let object = {
-        name: 'remote-telemetry',
-        identifier: TIME_TELEMETRY_ID
+describe('the RemoteClock plugin', () => {
+  let openmct;
+  let object = {
+    name: 'remote-telemetry',
+    identifier: TIME_TELEMETRY_ID
+  };
+
+  beforeEach((done) => {
+    openmct = createOpenMct();
+    openmct.on('start', done);
+    openmct.startHeadless();
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  describe('once installed', () => {
+    let remoteClock;
+    let boundsCallback;
+    let metadataValue = { some: 'value' };
+    let timeSystem = { key: 'utc' };
+    let metadata = {
+      value: () => metadataValue
     };
+    let reqDatum = {
+      key: TIME_VALUE
+    };
+
+    let formatter = {
+      parse: (datum) => datum.key
+    };
+
+    let objectPromise;
+    let requestPromise;
+
+    beforeEach(() => {
+      openmct.install(openmct.plugins.RemoteClock(TIME_TELEMETRY_ID));
+
+      let clocks = openmct.time.getAllClocks();
+      remoteClock = clocks.filter((clock) => clock.key === REMOTE_CLOCK_KEY)[0];
+
+      boundsCallback = jasmine.createSpy('boundsCallback');
+      openmct.time.on('bounds', boundsCallback);
 
-    beforeEach((done) => {
-        openmct = createOpenMct();
-        openmct.on('start', done);
-        openmct.startHeadless();
+      spyOn(remoteClock, '_timeSystemChange').and.callThrough();
+      spyOn(openmct.telemetry, 'getMetadata').and.returnValue(metadata);
+      spyOn(openmct.telemetry, 'getValueFormatter').and.returnValue(formatter);
+      spyOn(openmct.telemetry, 'subscribe').and.callThrough();
+      spyOn(openmct.time, 'on').and.callThrough();
+      spyOn(openmct.time, 'timeSystem').and.returnValue(timeSystem);
+      spyOn(metadata, 'value').and.callThrough();
+
+      let requestPromiseResolve;
+      let objectPromiseResolve;
+
+      requestPromise = new Promise((resolve) => {
+        requestPromiseResolve = resolve;
+      });
+      spyOn(openmct.telemetry, 'request').and.callFake(() => {
+        requestPromiseResolve([reqDatum]);
+
+        return requestPromise;
+      });
+
+      objectPromise = new Promise((resolve) => {
+        objectPromiseResolve = resolve;
+      });
+      spyOn(openmct.objects, 'get').and.callFake(() => {
+        objectPromiseResolve(object);
+
+        return objectPromise;
+      });
+
+      openmct.time.clock(REMOTE_CLOCK_KEY, {
+        start: OFFSET_START,
+        end: OFFSET_END
+      });
     });
 
     afterEach(() => {
-        return resetApplicationState(openmct);
+      openmct.time.setClock('local');
     });
 
-    describe('once installed', () => {
-        let remoteClock;
-        let boundsCallback;
-        let metadataValue = { some: 'value' };
-        let timeSystem = { key: 'utc' };
-        let metadata = {
-            value: () => metadataValue
-        };
-        let reqDatum = {
-            key: TIME_VALUE
-        };
-
-        let formatter = {
-            parse: (datum) => datum.key
-        };
-
-        beforeEach((done) => {
-            openmct.install(openmct.plugins.RemoteClock(TIME_TELEMETRY_ID));
-
-            let clocks = openmct.time.getAllClocks();
-            remoteClock = clocks.filter(clock => clock.key === REMOTE_CLOCK_KEY)[0];
-
-            boundsCallback = jasmine.createSpy("boundsCallback");
-            openmct.time.on('bounds', boundsCallback);
-
-            spyOn(remoteClock, '_timeSystemChange').and.callThrough();
-            spyOn(openmct.telemetry, 'getMetadata').and.returnValue(metadata);
-            spyOn(openmct.telemetry, 'getValueFormatter').and.returnValue(formatter);
-            spyOn(openmct.telemetry, 'subscribe').and.callThrough();
-            spyOn(openmct.time, 'on').and.callThrough();
-            spyOn(openmct.time, 'timeSystem').and.returnValue(timeSystem);
-            spyOn(metadata, 'value').and.callThrough();
-
-            let requestPromiseResolve;
-            let requestPromise = new Promise((resolve) => {
-                requestPromiseResolve = resolve;
-            });
-            spyOn(openmct.telemetry, 'request').and.callFake(() => {
-                requestPromiseResolve([reqDatum]);
-
-                return requestPromise;
-            });
-
-            let objectPromiseResolve;
-            let objectPromise = new Promise((resolve) => {
-                objectPromiseResolve = resolve;
-            });
-            spyOn(openmct.objects, 'get').and.callFake(() => {
-                objectPromiseResolve(object);
-
-                return objectPromise;
-            });
-
-            openmct.time.clock(REMOTE_CLOCK_KEY, {
-                start: OFFSET_START,
-                end: OFFSET_END
-            });
-
-            Promise.all([objectPromiseResolve, requestPromise])
-                .then(done)
-                .catch(done);
-        });
-
-        it('is available and sets up initial values and listeners', () => {
-            expect(remoteClock.key).toEqual(REMOTE_CLOCK_KEY);
-            expect(remoteClock.identifier).toEqual(TIME_TELEMETRY_ID);
-            expect(openmct.time.on).toHaveBeenCalledWith('timeSystem', remoteClock._timeSystemChange);
-            expect(remoteClock._timeSystemChange).toHaveBeenCalled();
-        });
-
-        it('will request/store the object based on the identifier passed in', () => {
-            expect(remoteClock.timeTelemetryObject).toEqual(object);
-        });
-
-        it('will request metadata and set up formatters', () => {
-            expect(remoteClock.metadata).toEqual(metadata);
-            expect(metadata.value).toHaveBeenCalled();
-            expect(openmct.telemetry.getValueFormatter).toHaveBeenCalledWith(metadataValue);
-        });
-
-        it('will request the latest datum for the object it received and process the datum returned', () => {
-            expect(openmct.telemetry.request).toHaveBeenCalledWith(remoteClock.timeTelemetryObject, REQ_OPTIONS);
-            expect(boundsCallback).toHaveBeenCalledWith({ start: TIME_VALUE + OFFSET_START, end: TIME_VALUE + OFFSET_END }, true);
-        });
-
-        it('will set up subscriptions correctly', () => {
-            expect(remoteClock._unsubscribe).toBeDefined();
-            expect(openmct.telemetry.subscribe).toHaveBeenCalledWith(remoteClock.timeTelemetryObject, remoteClock._processDatum);
-        });
+    it('Does not throw error if time system is changed before remote clock initialized', () => {
+      expect(() => openmct.time.timeSystem('utc')).not.toThrow();
     });
 
+    describe('once resolved', () => {
+      beforeEach(async () => {
+        await Promise.all([objectPromise, requestPromise]);
+      });
+
+      it('is available and sets up initial values and listeners', () => {
+        expect(remoteClock.key).toEqual(REMOTE_CLOCK_KEY);
+        expect(remoteClock.identifier).toEqual(TIME_TELEMETRY_ID);
+        expect(openmct.time.on).toHaveBeenCalledWith('timeSystem', remoteClock._timeSystemChange);
+        expect(remoteClock._timeSystemChange).toHaveBeenCalled();
+      });
+
+      it('will request/store the object based on the identifier passed in', () => {
+        expect(remoteClock.timeTelemetryObject).toEqual(object);
+      });
+
+      it('will request metadata and set up formatters', () => {
+        expect(remoteClock.metadata).toEqual(metadata);
+        expect(metadata.value).toHaveBeenCalled();
+        expect(openmct.telemetry.getValueFormatter).toHaveBeenCalledWith(metadataValue);
+      });
+
+      it('will request the latest datum for the object it received and process the datum returned', () => {
+        expect(openmct.telemetry.request).toHaveBeenCalledWith(
+          remoteClock.timeTelemetryObject,
+          REQ_OPTIONS
+        );
+        expect(boundsCallback).toHaveBeenCalledWith(
+          {
+            start: TIME_VALUE + OFFSET_START,
+            end: TIME_VALUE + OFFSET_END
+          },
+          true
+        );
+      });
+
+      it('will set up subscriptions correctly', () => {
+        expect(remoteClock._unsubscribe).toBeDefined();
+        expect(openmct.telemetry.subscribe).toHaveBeenCalledWith(
+          remoteClock.timeTelemetryObject,
+          remoteClock._processDatum
+        );
+      });
+    });
+  });
 });
diff --git a/src/plugins/remoteClock/plugin.js b/src/plugins/remoteClock/plugin.js
index 0ff90f1f620..0724e47ca56 100644
--- a/src/plugins/remoteClock/plugin.js
+++ b/src/plugins/remoteClock/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2021, United States Government
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,13 +20,13 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import RemoteClock from "./RemoteClock";
+import RemoteClock from './RemoteClock.js';
 /**
- * Install a clock that uses a configurable telemetry endpoint. 
+ * Install a clock that uses a configurable telemetry endpoint.
  */
 
 export default function (identifier) {
-    return function (openmct) {
-        openmct.time.addClock(new RemoteClock(openmct, identifier));
-    };
+  return function (openmct) {
+    openmct.time.addClock(new RemoteClock(openmct, identifier));
+  };
 }
diff --git a/src/plugins/remoteClock/requestInterceptor.js b/src/plugins/remoteClock/requestInterceptor.js
new file mode 100644
index 00000000000..7fc5b176d67
--- /dev/null
+++ b/src/plugins/remoteClock/requestInterceptor.js
@@ -0,0 +1,50 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+function remoteClockRequestInterceptor(openmct, _remoteClockIdentifier, waitForBounds) {
+  let remoteClockLoaded = false;
+
+  return {
+    appliesTo: () => {
+      // Get the activeClock from the Global Time Context
+      const { activeClock } = openmct.time;
+
+      return activeClock?.key === 'remote-clock' && !remoteClockLoaded;
+    },
+    invoke: async (request) => {
+      const timeContext = request?.timeContext ?? openmct.time;
+
+      // Wait for initial bounds if the request is for real-time data.
+      // Otherwise, use the bounds provided by the request.
+      if (timeContext.isRealTime()) {
+        const { start, end } = await waitForBounds();
+        remoteClockLoaded = true;
+        request.start = start;
+        request.end = end;
+      }
+
+      return request;
+    }
+  };
+}
+
+export default remoteClockRequestInterceptor;
diff --git a/src/plugins/remove/RemoveAction.js b/src/plugins/remove/RemoveAction.js
index 8cc82c0f87a..5b2e0c55915 100644
--- a/src/plugins/remove/RemoveAction.js
+++ b/src/plugins/remove/RemoveAction.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,109 +19,146 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+
+const SPECIAL_MESSAGE_TYPES = ['layout', 'flexible-layout'];
+
 export default class RemoveAction {
-    constructor(openmct) {
-        this.name = 'Remove';
-        this.key = 'remove';
-        this.description = 'Remove this object from its containing object.';
-        this.cssClass = "icon-trash";
-        this.group = "action";
-        this.priority = 1;
-
-        this.openmct = openmct;
+  #transaction;
+
+  constructor(openmct) {
+    this.name = 'Remove';
+    this.key = 'remove';
+    this.description = 'Remove this object from its containing object.';
+    this.cssClass = 'icon-trash';
+    this.group = 'action';
+    this.priority = 1;
+
+    this.openmct = openmct;
+
+    this.removeFromComposition = this.removeFromComposition.bind(this); // for access to private transaction variable
+    this.#transaction = null;
+  }
+
+  async invoke(objectPath) {
+    const child = objectPath[0];
+    const parent = objectPath[1];
+
+    try {
+      await this.showConfirmDialog(child, parent);
+    } catch (error) {
+      return; // form canceled, exit invoke
     }
 
-    invoke(objectPath) {
-        let object = objectPath[0];
-        let parent = objectPath[1];
-        this.showConfirmDialog(object).then(() => {
-            this.removeFromComposition(parent, object);
-            if (this.inNavigationPath(object)) {
-                this.navigateTo(objectPath.slice(1));
-            }
-        }).catch(() => {});
-    }
+    await this.removeFromComposition(parent, child, objectPath);
 
-    showConfirmDialog(object) {
-        return new Promise((resolve, reject) => {
-            let dialog = this.openmct.overlays.dialog({
-                title: `Remove ${object.name}`,
-                iconClass: 'alert',
-                message: 'Warning! This action will remove this object. Are you sure you want to continue?',
-                buttons: [
-                    {
-                        label: 'OK',
-                        callback: () => {
-                            dialog.dismiss();
-                            resolve();
-                        }
-                    },
-                    {
-                        label: 'Cancel',
-                        callback: () => {
-                            dialog.dismiss();
-                            reject();
-                        }
-                    }
-                ]
-            });
-        });
+    if (this.inNavigationPath(child)) {
+      this.navigateTo(objectPath.slice(1));
     }
+  }
 
-    inNavigationPath(object) {
-        return this.openmct.router.path
-            .some(objectInPath => this.openmct.objects.areIdsEqual(objectInPath.identifier, object.identifier));
-    }
+  showConfirmDialog(child, parent) {
+    let message =
+      'Warning! This action will remove this object. Are you sure you want to continue?';
 
-    navigateTo(objectPath) {
-        let urlPath = objectPath.reverse()
-            .map(object => this.openmct.objects.makeKeyString(object.identifier))
-            .join("/");
+    if (SPECIAL_MESSAGE_TYPES.includes(parent.type)) {
+      const type = this.openmct.types.get(parent.type);
+      const typeName = type.definition.name;
 
-        this.openmct.router.navigate('#/browse/' + urlPath);
+      message = `Warning! This action will remove this item from the ${typeName}. Are you sure you want to continue?`;
     }
 
-    removeFromComposition(parent, child) {
-        let composition = parent.composition.filter(id =>
-            !this.openmct.objects.areIdsEqual(id, child.identifier)
-        );
+    return new Promise((resolve, reject) => {
+      const dialog = this.openmct.overlays.dialog({
+        title: `Remove ${child.name}`,
+        iconClass: 'alert',
+        message,
+        buttons: [
+          {
+            label: 'OK',
+            callback: () => {
+              dialog.dismiss();
+              resolve();
+            }
+          },
+          {
+            label: 'Cancel',
+            callback: () => {
+              dialog.dismiss();
+              reject();
+            }
+          }
+        ]
+      });
+    });
+  }
+
+  inNavigationPath(object) {
+    return this.openmct.router.path.some((objectInPath) =>
+      this.openmct.objects.areIdsEqual(objectInPath.identifier, object.identifier)
+    );
+  }
+
+  navigateTo(objectPath) {
+    let urlPath = objectPath
+      .reverse()
+      .map((object) => this.openmct.objects.makeKeyString(object.identifier))
+      .join('/');
+
+    this.openmct.router.navigate('#/browse/' + urlPath);
+  }
+
+  async removeFromComposition(parent, child, objectPath) {
+    this.startTransaction();
+
+    const composition = this.openmct.composition.get(parent);
+    composition.remove(child);
+
+    if (!this.openmct.objects.isObjectPathToALink(child, objectPath)) {
+      this.openmct.objects.mutate(child, 'location', null);
+    }
 
-        this.openmct.objects.mutate(parent, 'composition', composition);
+    if (this.inNavigationPath(child) && this.openmct.editor.isEditing()) {
+      this.openmct.editor.save();
+    }
 
-        if (this.inNavigationPath(child) && this.openmct.editor.isEditing()) {
-            this.openmct.editor.save();
-        }
+    await this.saveTransaction();
+  }
 
-        const parentKeyString = this.openmct.objects.makeKeyString(parent.identifier);
-        const isAlias = parentKeyString !== child.location;
+  appliesTo(objectPath) {
+    const parent = objectPath[1];
+    const parentType = parent && this.openmct.types.get(parent.type);
+    const child = objectPath[0];
+    const locked = child.locked ? child.locked : parent && parent.locked;
+    const isEditing = this.openmct.editor.isEditing();
+    const isPersistable = this.openmct.objects.isPersistable(child.identifier);
+    const isLink = this.openmct.objects.isObjectPathToALink(child, objectPath);
 
-        if (!isAlias) {
-            this.openmct.objects.mutate(child, 'location', null);
-        }
+    if (!isLink && (locked || !isPersistable)) {
+      return false;
     }
 
-    appliesTo(objectPath) {
-        let parent = objectPath[1];
-        let parentType = parent && this.openmct.types.get(parent.type);
-        let child = objectPath[0];
-        let locked = child.locked ? child.locked : parent && parent.locked;
-        let isEditing = this.openmct.editor.isEditing();
+    if (isEditing) {
+      if (this.openmct.router.isNavigatedObject(objectPath)) {
+        return false;
+      }
+    }
 
-        if (isEditing) {
-            let currentItemInView = this.openmct.router.path[0];
-            let domainObject = objectPath[0];
+    return parentType?.definition.creatable && Array.isArray(parent?.composition);
+  }
 
-            if (this.openmct.objects.areIdsEqual(currentItemInView.identifier, domainObject.identifier)) {
-                return false;
-            }
-        }
-
-        if (locked) {
-            return false;
-        }
+  startTransaction() {
+    if (!this.openmct.objects.isTransactionActive()) {
+      this.#transaction = this.openmct.objects.startTransaction();
+    }
+  }
 
-        return parentType
-            && parentType.definition.creatable
-            && Array.isArray(parent.composition);
+  async saveTransaction() {
+    if (!this.#transaction) {
+      return;
     }
+
+    await this.#transaction.commit();
+    this.openmct.objects.endTransaction();
+    this.#transaction = null;
+  }
 }
diff --git a/src/plugins/remove/plugin.js b/src/plugins/remove/plugin.js
index a2ced293893..34c6baee00b 100644
--- a/src/plugins/remove/plugin.js
+++ b/src/plugins/remove/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,10 +19,10 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import RemoveAction from "./RemoveAction";
+import RemoveAction from './RemoveAction.js';
 
 export default function () {
-    return function (openmct) {
-        openmct.actions.register(new RemoveAction(openmct));
-    };
+  return function (openmct) {
+    openmct.actions.register(new RemoveAction(openmct));
+  };
 }
diff --git a/src/plugins/remove/pluginSpec.js b/src/plugins/remove/pluginSpec.js
index 887cc0a50c4..3bf7cc4381f 100644
--- a/src/plugins/remove/pluginSpec.js
+++ b/src/plugins/remove/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,94 +19,112 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import {
-    createOpenMct,
-    resetApplicationState,
-    getMockObjects
-} from 'utils/testing';
-
-describe("The Remove Action plugin", () => {
-
-    let openmct;
-    let removeAction;
-    let childObject;
-    let parentObject;
-
-    // this setups up the app
-    beforeEach((done) => {
-        openmct = createOpenMct();
-
-        childObject = getMockObjects({
-            objectKeyStrings: ['folder'],
-            overwrite: {
-                folder: {
-                    name: "Child Folder",
-                    identifier: {
-                        namespace: "",
-                        key: "child-folder-object"
-                    }
-                }
-            }
-        }).folder;
-        parentObject = getMockObjects({
-            objectKeyStrings: ['folder'],
-            overwrite: {
-                folder: {
-                    name: "Parent Folder",
-                    composition: [childObject.identifier]
-                }
-            }
-        }).folder;
-
-        openmct.on('start', done);
-        openmct.startHeadless();
-
-        removeAction = openmct.actions._allActions.remove;
+import { createOpenMct, getMockObjects, resetApplicationState } from 'utils/testing';
+
+describe('The Remove Action plugin', () => {
+  let openmct;
+  let removeAction;
+  let childObject;
+  let parentObject;
+
+  // this setups up the app
+  beforeEach((done) => {
+    openmct = createOpenMct();
+
+    childObject = getMockObjects({
+      objectKeyStrings: ['folder'],
+      overwrite: {
+        folder: {
+          name: 'Child Folder',
+          identifier: {
+            namespace: '',
+            key: 'child-folder-object'
+          }
+        }
+      }
+    }).folder;
+    parentObject = getMockObjects({
+      objectKeyStrings: ['folder'],
+      overwrite: {
+        folder: {
+          identifier: {
+            namespace: '',
+            key: 'parent-folder-object'
+          },
+          name: 'Parent Folder',
+          composition: [childObject.identifier]
+        }
+      }
+    }).folder;
+
+    openmct.on('start', done);
+    openmct.startHeadless();
+
+    removeAction = openmct.actions._allActions.remove;
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  it('should be defined', () => {
+    expect(removeAction).toBeDefined();
+  });
+
+  describe('when removing an object from a parent composition', () => {
+    beforeEach(() => {
+      spyOn(removeAction, 'removeFromComposition').and.callThrough();
+      spyOn(removeAction, 'inNavigationPath').and.returnValue(false);
+      spyOn(openmct.objects, 'mutate').and.callThrough();
+      spyOn(openmct.objects, 'startTransaction').and.callThrough();
+      spyOn(openmct.objects, 'endTransaction').and.callThrough();
+      removeAction.removeFromComposition(parentObject, childObject);
     });
 
-    afterEach(() => {
-        return resetApplicationState(openmct);
+    it('removeFromComposition should be called with the parent and child', () => {
+      expect(removeAction.removeFromComposition).toHaveBeenCalled();
+      expect(removeAction.removeFromComposition).toHaveBeenCalledWith(parentObject, childObject);
     });
 
-    it("should be defined", () => {
-        expect(removeAction).toBeDefined();
+    it('it should mutate the parent object', () => {
+      expect(openmct.objects.mutate).toHaveBeenCalled();
+      expect(openmct.objects.mutate.calls.argsFor(0)[0]).toEqual(parentObject);
     });
 
-    describe("when removing an object from a parent composition", () => {
-
-        beforeEach(() => {
-            spyOn(removeAction, 'removeFromComposition').and.callThrough();
-            spyOn(removeAction, 'inNavigationPath').and.returnValue(false);
-            spyOn(openmct.objects, 'mutate').and.callThrough();
-            removeAction.removeFromComposition(parentObject, childObject);
-        });
-
-        it("removeFromComposition should be called with the parent and child", () => {
-            expect(removeAction.removeFromComposition).toHaveBeenCalled();
-            expect(removeAction.removeFromComposition).toHaveBeenCalledWith(parentObject, childObject);
-        });
+    it('it should start a transaction', () => {
+      expect(openmct.objects.startTransaction).toHaveBeenCalled();
+    });
 
-        it("it should mutate the parent object", () => {
-            expect(openmct.objects.mutate).toHaveBeenCalled();
-            expect(openmct.objects.mutate.calls.argsFor(0)[0]).toEqual(parentObject);
-        });
+    it('it should end the transaction', (done) => {
+      setTimeout(() => {
+        expect(openmct.objects.endTransaction).toHaveBeenCalled();
+        done();
+      }, 100);
     });
+  });
 
-    describe("when determining the object is applicable", () => {
+  describe('when determining the object is applicable', () => {
+    beforeEach(() => {
+      spyOn(removeAction, 'appliesTo').and.callThrough();
+    });
 
-        beforeEach(() => {
-            spyOn(removeAction, 'appliesTo').and.callThrough();
-        });
+    it('should be true when the parent is creatable and has composition', () => {
+      let applies = removeAction.appliesTo([childObject, parentObject]);
+      expect(applies).toBe(true);
+    });
 
-        it("should be true when the parent is creatable and has composition", () => {
-            let applies = removeAction.appliesTo([childObject, parentObject]);
-            expect(applies).toBe(true);
-        });
+    it('should be false when the child is locked and not an alias', () => {
+      childObject.locked = true;
+      childObject.location = 'parent-folder-object';
+      let applies = removeAction.appliesTo([childObject, parentObject]);
+      expect(applies).toBe(false);
+    });
 
-        it("should be false when the child is locked", () => {
-            childObject.locked = true;
-            let applies = removeAction.appliesTo([childObject, parentObject]);
-            expect(applies).toBe(false);
-        });
+    it('should be true when the child is locked and IS an alias', () => {
+      childObject.locked = true;
+      childObject.location = 'other-folder-object';
+      let applies = removeAction.appliesTo([childObject, parentObject]);
+      expect(applies).toBe(true);
     });
+  });
 });
diff --git a/src/plugins/staticRootPlugin/README.md b/src/plugins/staticRootPlugin/README.md
index 57bced8471f..f270416fcb6 100644
--- a/src/plugins/staticRootPlugin/README.md
+++ b/src/plugins/staticRootPlugin/README.md
@@ -9,11 +9,11 @@ Any object tree in Open MCT can be exported as JSON after installing the
 
 ## Installation
 ``` js
-openmct.install(openmct.plugins.StaticRootPlugin('mission', 'data/static-objects.json'));
+openmct.install(openmct.plugins.StaticRootPlugin({ namespace: 'mission', exportUrl: 'data/static-objects.json' }));
 ```
 
 ## Parameters
 The StaticRootPlugin takes two parameters:
 1. __namespace__: This should be a name that uniquely identifies this collection of objects.
-2. __path__: The file that the static tree should be exposed from. This will need to be a path that is reachable by a web 
+2. __exportUrl__: The file that the static tree should be exposed from. This will need to be a path that is reachable by a web 
 browser, ie not a path on the local file system.
\ No newline at end of file
diff --git a/src/plugins/staticRootPlugin/StaticModelProvider.js b/src/plugins/staticRootPlugin/StaticModelProvider.js
index 2783d5d5321..d8006fc75ef 100644
--- a/src/plugins/staticRootPlugin/StaticModelProvider.js
+++ b/src/plugins/staticRootPlugin/StaticModelProvider.js
@@ -1,82 +1,199 @@
-define([
-    'objectUtils'
-], function (
-    objectUtils
-) {
-    /**
-     * Transforms an import json blob into a object map that can be used to
-     * provide objects.  Rewrites root identifier in import data with provided
-     * rootIdentifier, and rewrites all child object identifiers so that they
-     * exist in the same namespace as the rootIdentifier.
-     */
-    function rewriteObjectIdentifiers(importData, rootIdentifier) {
-        const rootId = importData.rootId;
-        let objectString = JSON.stringify(importData.openmct);
-
-        Object.keys(importData.openmct).forEach(function (originalId, i) {
-            let newId;
-            if (originalId === rootId) {
-                newId = objectUtils.makeKeyString(rootIdentifier);
-            } else {
-                newId = objectUtils.makeKeyString({
-                    namespace: rootIdentifier.namespace,
-                    key: i
-                });
-            }
-
-            while (objectString.indexOf(originalId) !== -1) {
-                objectString = objectString.replace(
-                    '"' + originalId + '"',
-                    '"' + newId + '"'
-                );
-            }
-        });
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/**
+ * Transforms an import json blob into a object map that can be used to
+ * provide objects.  Rewrites root identifier in import data with provided
+ * rootIdentifier, and rewrites all child object identifiers so that they
+ * exist in the same namespace as the rootIdentifier.
+ */
+import { makeKeyString, parseKeyString, toNewFormat } from 'objectUtils';
+
+class StaticModelProvider {
+  constructor(importData, rootIdentifier) {
+    this.objectMap = {};
+    this.rewriteModel(importData, rootIdentifier);
+  }
 
-        return JSON.parse(objectString);
+  /**
+   * Standard "Get".
+   */
+  get(identifier) {
+    const keyString = makeKeyString(identifier);
+    if (this.objectMap[keyString]) {
+      return this.objectMap[keyString];
     }
 
-    /**
-     * Convets all objects in an object make from old format objects to new
-     * format objects.
-     */
-    function convertToNewObjects(oldObjectMap) {
-        return Object.keys(oldObjectMap)
-            .reduce(function (newObjectMap, key) {
-                newObjectMap[key] = objectUtils.toNewFormat(oldObjectMap[key], key);
-
-                return newObjectMap;
-            }, {});
+    throw new Error(keyString + ' not found in import models.');
+  }
+
+  parseObjectLeaf(objectLeaf, idMap, newRootNamespace, oldRootNamespace) {
+    Object.keys(objectLeaf).forEach((nodeKey) => {
+      if (idMap.get(nodeKey)) {
+        const newIdentifier = makeKeyString({
+          namespace: newRootNamespace,
+          key: idMap.get(nodeKey)
+        });
+        objectLeaf[newIdentifier] = { ...objectLeaf[nodeKey] };
+        delete objectLeaf[nodeKey];
+        objectLeaf[newIdentifier] = this.parseTreeLeaf(
+          newIdentifier,
+          objectLeaf[newIdentifier],
+          idMap,
+          newRootNamespace,
+          oldRootNamespace
+        );
+      } else {
+        objectLeaf[nodeKey] = this.parseTreeLeaf(
+          nodeKey,
+          objectLeaf[nodeKey],
+          idMap,
+          newRootNamespace,
+          oldRootNamespace
+        );
+      }
+    });
+
+    return objectLeaf;
+  }
+
+  parseArrayLeaf(arrayLeaf, idMap, newRootNamespace, oldRootNamespace) {
+    return arrayLeaf.map((leafValue, index) =>
+      this.parseTreeLeaf(null, leafValue, idMap, newRootNamespace, oldRootNamespace)
+    );
+  }
+
+  parseBranchedLeaf(branchedLeafValue, idMap, newRootNamespace, oldRootNamespace) {
+    if (Array.isArray(branchedLeafValue)) {
+      return this.parseArrayLeaf(branchedLeafValue, idMap, newRootNamespace, oldRootNamespace);
+    } else {
+      return this.parseObjectLeaf(branchedLeafValue, idMap, newRootNamespace, oldRootNamespace);
     }
+  }
 
-    /* Set the root location correctly for a top-level object */
-    function setRootLocation(objectMap, rootIdentifier) {
-        objectMap[objectUtils.makeKeyString(rootIdentifier)].location = 'ROOT';
+  parseTreeLeaf(leafKey, leafValue, idMap, newRootNamespace, oldRootNamespace) {
+    if (leafValue === null || leafValue === undefined) {
+      return leafValue;
+    }
 
-        return objectMap;
+    const hasChild = typeof leafValue === 'object';
+    if (hasChild) {
+      return this.parseBranchedLeaf(leafValue, idMap, newRootNamespace, oldRootNamespace);
     }
 
-    /**
-     * Takes importData (as provided by the ImportExport plugin) and exposes
-     * an object provider to fetch those objects.
-     */
-    function StaticModelProvider(importData, rootIdentifier) {
-        const oldFormatObjectMap = rewriteObjectIdentifiers(importData, rootIdentifier);
-        const newFormatObjectMap = convertToNewObjects(oldFormatObjectMap);
-        this.objectMap = setRootLocation(newFormatObjectMap, rootIdentifier);
+    if (leafKey === 'key') {
+      let mappedLeafValue;
+      if (oldRootNamespace) {
+        mappedLeafValue = idMap.get(
+          makeKeyString({
+            namespace: oldRootNamespace,
+            key: leafValue
+          })
+        );
+      } else {
+        mappedLeafValue = idMap.get(leafValue);
+      }
+
+      return mappedLeafValue ?? leafValue;
+    } else if (leafKey === 'namespace') {
+      // Only rewrite the namespace if it matches the old root namespace.
+      // This is to prevent rewriting namespaces of objects that are not
+      // children of the root object (e.g.: objects from a telemetry dictionary)
+      return leafValue === oldRootNamespace ? newRootNamespace : leafValue;
+    } else if (leafKey === 'location') {
+      const mappedLeafValue = idMap.get(leafValue);
+      if (!mappedLeafValue) {
+        return null;
+      }
+
+      const newLocationIdentifier = makeKeyString({
+        namespace: newRootNamespace,
+        key: mappedLeafValue
+      });
+
+      return newLocationIdentifier;
+    } else {
+      const mappedLeafValue = idMap.get(leafValue);
+      if (mappedLeafValue) {
+        const newIdentifier = makeKeyString({
+          namespace: newRootNamespace,
+          key: mappedLeafValue
+        });
+
+        return newIdentifier;
+      } else {
+        return leafValue;
+      }
     }
+  }
+
+  rewriteObjectIdentifiers(importData, rootIdentifier) {
+    const { namespace: oldRootNamespace } = parseKeyString(importData.rootId);
+    const { namespace: newRootNamespace } = rootIdentifier;
+    const idMap = new Map();
+    const objectTree = importData.openmct;
+
+    Object.keys(objectTree).forEach((originalId, index) => {
+      let newId = index.toString();
+      if (originalId === importData.rootId) {
+        newId = rootIdentifier.key;
+      }
+
+      idMap.set(originalId, newId);
+    });
+
+    const newTree = this.parseTreeLeaf(null, objectTree, idMap, newRootNamespace, oldRootNamespace);
+
+    return newTree;
+  }
+
+  /**
+   * Converts all objects in an object make from old format objects to new
+   * format objects.
+   */
+  convertToNewObjects(oldObjectMap) {
+    return Object.keys(oldObjectMap).reduce(function (newObjectMap, key) {
+      newObjectMap[key] = toNewFormat(oldObjectMap[key], key);
+
+      return newObjectMap;
+    }, {});
+  }
 
-    /**
-     * Standard "Get".
-     */
-    StaticModelProvider.prototype.get = function (identifier) {
-        const keyString = objectUtils.makeKeyString(identifier);
-        if (this.objectMap[keyString]) {
-            return this.objectMap[keyString];
-        }
+  /* Set the root location correctly for a top-level object */
+  setRootLocation(objectMap, rootIdentifier) {
+    objectMap[makeKeyString(rootIdentifier)].location = 'ROOT';
 
-        throw new Error(keyString + ' not found in import models.');
-    };
+    return objectMap;
+  }
 
-    return StaticModelProvider;
+  /**
+   * Takes importData (as provided by the ImportExport plugin) and exposes
+   * an object provider to fetch those objects.
+   */
+  rewriteModel(importData, rootIdentifier) {
+    const oldFormatObjectMap = this.rewriteObjectIdentifiers(importData, rootIdentifier);
+    const newFormatObjectMap = this.convertToNewObjects(oldFormatObjectMap);
+    this.objectMap = this.setRootLocation(newFormatObjectMap, rootIdentifier);
+  }
+}
 
-});
+export default StaticModelProvider;
diff --git a/src/plugins/staticRootPlugin/StaticModelProviderSpec.js b/src/plugins/staticRootPlugin/StaticModelProviderSpec.js
index 07118ddebf0..d24a6400608 100644
--- a/src/plugins/staticRootPlugin/StaticModelProviderSpec.js
+++ b/src/plugins/staticRootPlugin/StaticModelProviderSpec.js
@@ -1,133 +1,279 @@
-define([
-    './StaticModelProvider',
-    './static-provider-test.json'
-], function (
-    StaticModelProvider,
-    testStaticData
-) {
-
-    describe('StaticModelProvider', function () {
-
-        let staticProvider;
-
-        beforeEach(function () {
-            const staticData = JSON.parse(JSON.stringify(testStaticData));
-            staticProvider = new StaticModelProvider(staticData, {
-                namespace: 'my-import',
-                key: 'root'
-            });
-        });
-
-        describe('rootObject', function () {
-            let rootModel;
-
-            beforeEach(function () {
-                rootModel = staticProvider.get({
-                    namespace: 'my-import',
-                    key: 'root'
-                });
-            });
-
-            it('is located at top level', function () {
-                expect(rootModel.location).toBe('ROOT');
-            });
-
-            it('has new-format identifier', function () {
-                expect(rootModel.identifier).toEqual({
-                    namespace: 'my-import',
-                    key: 'root'
-                });
-            });
-
-            it('has new-format composition', function () {
-                expect(rootModel.composition).toContain({
-                    namespace: 'my-import',
-                    key: '1'
-                });
-                expect(rootModel.composition).toContain({
-                    namespace: 'my-import',
-                    key: '2'
-                });
-            });
-        });
-
-        describe('childObjects', function () {
-            let swg;
-            let layout;
-            let fixed;
-
-            beforeEach(function () {
-                swg = staticProvider.get({
-                    namespace: 'my-import',
-                    key: '1'
-                });
-                layout = staticProvider.get({
-                    namespace: 'my-import',
-                    key: '2'
-                });
-                fixed = staticProvider.get({
-                    namespace: 'my-import',
-                    key: '3'
-                });
-            });
-
-            it('match expected ordering', function () {
-                // this is a sanity check to make sure the identifiers map in
-                // the correct order.
-                expect(swg.type).toBe('generator');
-                expect(layout.type).toBe('layout');
-                expect(fixed.type).toBe('telemetry.fixed');
-            });
-
-            it('have new-style identifiers', function () {
-                expect(swg.identifier).toEqual({
-                    namespace: 'my-import',
-                    key: '1'
-                });
-                expect(layout.identifier).toEqual({
-                    namespace: 'my-import',
-                    key: '2'
-                });
-                expect(fixed.identifier).toEqual({
-                    namespace: 'my-import',
-                    key: '3'
-                });
-            });
-
-            it('have new-style composition', function () {
-                expect(layout.composition).toContain({
-                    namespace: 'my-import',
-                    key: '1'
-                });
-                expect(layout.composition).toContain({
-                    namespace: 'my-import',
-                    key: '3'
-                });
-                expect(fixed.composition).toContain({
-                    namespace: 'my-import',
-                    key: '1'
-                });
-            });
-
-            it('rewrites locations', function () {
-                expect(swg.location).toBe('my-import:root');
-                expect(layout.location).toBe('my-import:root');
-                expect(fixed.location).toBe('my-import:2');
-            });
-
-            it('rewrites matched identifiers in objects', function () {
-                expect(layout.configuration.layout.panels['my-import:1'])
-                    .toBeDefined();
-                expect(layout.configuration.layout.panels['my-import:3'])
-                    .toBeDefined();
-                expect(layout.configuration.layout.panels['483c00d4-bb1d-4b42-b29a-c58e06b322a0'])
-                    .not.toBeDefined();
-                expect(layout.configuration.layout.panels['20273193-f069-49e9-b4f7-b97a87ed755d'])
-                    .not.toBeDefined();
-                expect(fixed.configuration['fixed-display'].elements[0].id)
-                    .toBe('my-import:1');
-            });
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
 
+import StaticModelProvider from './StaticModelProvider.js';
+import testStaticDataEmptyNamespace from './test-data/static-provider-test-empty-namespace.json';
+import testStaticDataFooNamespace from './test-data/static-provider-test-foo-namespace.json';
+
+describe('StaticModelProvider', function () {
+  describe('with empty namespace', function () {
+    let staticProvider;
+
+    beforeEach(function () {
+      const staticData = JSON.parse(JSON.stringify(testStaticDataEmptyNamespace));
+      staticProvider = new StaticModelProvider(staticData, {
+        namespace: 'my-import',
+        key: 'root'
+      });
+    });
+
+    describe('rootObject', function () {
+      let rootModel;
+
+      beforeEach(function () {
+        rootModel = staticProvider.get({
+          namespace: 'my-import',
+          key: 'root'
+        });
+      });
+
+      it('is located at top level', function () {
+        expect(rootModel.location).toBe('ROOT');
+      });
+
+      it('has remapped identifier', function () {
+        expect(rootModel.identifier).toEqual({
+          namespace: 'my-import',
+          key: 'root'
+        });
+      });
+
+      it('has remapped identifiers in composition', function () {
+        expect(rootModel.composition).toContain({
+          namespace: 'my-import',
+          key: '1'
+        });
+        expect(rootModel.composition).toContain({
+          namespace: 'my-import',
+          key: '2'
+        });
+      });
+    });
+
+    describe('childObjects', function () {
+      let swg;
+      let layout;
+      let fixed;
+
+      beforeEach(function () {
+        swg = staticProvider.get({
+          namespace: 'my-import',
+          key: '1'
+        });
+        layout = staticProvider.get({
+          namespace: 'my-import',
+          key: '2'
+        });
+        fixed = staticProvider.get({
+          namespace: 'my-import',
+          key: '3'
+        });
+      });
+
+      it('match expected ordering', function () {
+        // this is a sanity check to make sure the identifiers map in
+        // the correct order.
+        expect(swg.type).toBe('generator');
+        expect(layout.type).toBe('layout');
+        expect(fixed.type).toBe('telemetry.fixed');
+      });
+
+      it('have remapped identifiers', function () {
+        expect(swg.identifier).toEqual({
+          namespace: 'my-import',
+          key: '1'
+        });
+        expect(layout.identifier).toEqual({
+          namespace: 'my-import',
+          key: '2'
+        });
+        expect(fixed.identifier).toEqual({
+          namespace: 'my-import',
+          key: '3'
+        });
+      });
+
+      it('have remapped composition', function () {
+        expect(layout.composition).toContain({
+          namespace: 'my-import',
+          key: '1'
+        });
+        expect(layout.composition).toContain({
+          namespace: 'my-import',
+          key: '3'
+        });
+        expect(fixed.composition).toContain({
+          namespace: 'my-import',
+          key: '1'
+        });
+      });
+
+      it('rewrites locations', function () {
+        expect(swg.location).toBe('my-import:root');
+        expect(layout.location).toBe('my-import:root');
+        expect(fixed.location).toBe('my-import:2');
+      });
+
+      it('rewrites matched identifiers in objects', function () {
+        expect(layout.configuration.layout.panels['my-import:1']).toBeDefined();
+        expect(layout.configuration.layout.panels['my-import:3']).toBeDefined();
+        expect(
+          layout.configuration.layout.panels['483c00d4-bb1d-4b42-b29a-c58e06b322a0']
+        ).not.toBeDefined();
+        expect(
+          layout.configuration.layout.panels['20273193-f069-49e9-b4f7-b97a87ed755d']
+        ).not.toBeDefined();
+        expect(fixed.configuration['fixed-display'].elements[0].id).toBe('my-import:1');
+      });
+    });
+  });
+  describe('with namespace "foo"', function () {
+    let staticProvider;
+
+    beforeEach(function () {
+      const staticData = JSON.parse(JSON.stringify(testStaticDataFooNamespace));
+      staticProvider = new StaticModelProvider(staticData, {
+        namespace: 'my-import',
+        key: 'root'
+      });
+    });
+
+    describe('rootObject', function () {
+      let rootModel;
+
+      beforeEach(function () {
+        rootModel = staticProvider.get({
+          namespace: 'my-import',
+          key: 'root'
+        });
+      });
+
+      it('is located at top level', function () {
+        expect(rootModel.location).toBe('ROOT');
+      });
+
+      it('has remapped identifier', function () {
+        expect(rootModel.identifier).toEqual({
+          namespace: 'my-import',
+          key: 'root'
+        });
+      });
+
+      it('has remapped composition', function () {
+        expect(rootModel.composition).toContain({
+          namespace: 'my-import',
+          key: '1'
+        });
+        expect(rootModel.composition).toContain({
+          namespace: 'my-import',
+          key: '2'
+        });
+      });
+    });
+
+    describe('childObjects', function () {
+      let clock;
+      let layout;
+      let swg;
+      let folder;
+
+      beforeEach(function () {
+        folder = staticProvider.get({
+          namespace: 'my-import',
+          key: 'root'
+        });
+        layout = staticProvider.get({
+          namespace: 'my-import',
+          key: '1'
         });
+        swg = staticProvider.get({
+          namespace: 'my-import',
+          key: '2'
+        });
+        clock = staticProvider.get({
+          namespace: 'my-import',
+          key: '3'
+        });
+      });
+
+      it('match expected ordering', function () {
+        // this is a sanity check to make sure the identifiers map in
+        // the correct order.
+        expect(folder.type).toBe('folder');
+        expect(swg.type).toBe('generator');
+        expect(layout.type).toBe('layout');
+        expect(clock.type).toBe('clock');
+      });
+
+      it('have remapped identifiers', function () {
+        expect(folder.identifier).toEqual({
+          namespace: 'my-import',
+          key: 'root'
+        });
+        expect(layout.identifier).toEqual({
+          namespace: 'my-import',
+          key: '1'
+        });
+        expect(swg.identifier).toEqual({
+          namespace: 'my-import',
+          key: '2'
+        });
+        expect(clock.identifier).toEqual({
+          namespace: 'my-import',
+          key: '3'
+        });
+      });
+
+      it('have remapped identifiers in composition', function () {
+        expect(layout.composition).toContain({
+          namespace: 'my-import',
+          key: '2'
+        });
+        expect(layout.composition).toContain({
+          namespace: 'my-import',
+          key: '3'
+        });
+      });
+
+      it('layout has remapped identifiers in configuration', function () {
+        const identifiers = layout.configuration.items
+          .map((item) => item.identifier)
+          .filter((identifier) => identifier !== undefined);
+        expect(identifiers).toContain({
+          namespace: 'my-import',
+          key: '2'
+        });
+        expect(identifiers).toContain({
+          namespace: 'my-import',
+          key: '3'
+        });
+      });
+
+      it('rewrites locations', function () {
+        expect(folder.location).toBe('ROOT');
+        expect(swg.location).toBe('my-import:root');
+        expect(layout.location).toBe('my-import:root');
+        expect(clock.location).toBe('my-import:root');
+      });
     });
+  });
 });
diff --git a/src/plugins/staticRootPlugin/plugin.js b/src/plugins/staticRootPlugin/plugin.js
index 59029eff273..67ccb710c69 100644
--- a/src/plugins/staticRootPlugin/plugin.js
+++ b/src/plugins/staticRootPlugin/plugin.js
@@ -1,52 +1,63 @@
-define([
-    './StaticModelProvider'
-], function (
-    StaticModelProvider
-) {
-    /**
-     * Static Root Plugin: takes an export file and exposes it as a new root
-     * object.
-     */
-    function StaticRootPlugin(namespace, exportUrl) {
-
-        const rootIdentifier = {
-            namespace: namespace,
-            key: 'root'
-        };
-
-        let cachedProvider;
-
-        function loadProvider() {
-            return fetch(exportUrl)
-                .then(function (response) {
-                    return response.json();
-                })
-                .then(function (importData) {
-                    cachedProvider = new StaticModelProvider(importData, rootIdentifier);
-
-                    return cachedProvider;
-                });
-        }
-
-        function getProvider() {
-            if (!cachedProvider) {
-                cachedProvider = loadProvider();
-            }
-
-            return Promise.resolve(cachedProvider);
-        }
-
-        return function install(openmct) {
-            openmct.objects.addRoot(rootIdentifier);
-            openmct.objects.addProvider(namespace, {
-                get: function (identifier) {
-                    return getProvider().then(function (provider) {
-                        return provider.get(identifier);
-                    });
-                }
-            });
-        };
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import StaticModelProvider from './StaticModelProvider.js';
+
+export default function StaticRootPlugin(options) {
+  const rootIdentifier = {
+    namespace: options.namespace,
+    key: 'root'
+  };
+
+  let cachedProvider;
+
+  function loadProvider() {
+    return fetch(options.exportUrl)
+      .then(function (response) {
+        return response.json();
+      })
+      .then(function (importData) {
+        cachedProvider = new StaticModelProvider(importData, rootIdentifier);
+
+        return cachedProvider;
+      });
+  }
+
+  function getProvider() {
+    if (!cachedProvider) {
+      cachedProvider = loadProvider();
     }
 
-    return StaticRootPlugin;
-});
+    return Promise.resolve(cachedProvider);
+  }
+
+  return function install(openmct) {
+    openmct.objects.addRoot(rootIdentifier);
+    openmct.objects.addProvider(options.namespace, {
+      get: function (identifier) {
+        return getProvider().then(function (provider) {
+          return provider.get(identifier);
+        });
+      }
+    });
+  };
+}
diff --git a/src/plugins/staticRootPlugin/static-provider-test.json b/src/plugins/staticRootPlugin/static-provider-test.json
deleted file mode 100644
index 541f8efbc5c..00000000000
--- a/src/plugins/staticRootPlugin/static-provider-test.json
+++ /dev/null
@@ -1 +0,0 @@
-{"openmct":{"a9122832-4b6e-43ea-8219-5359c14c5de8":{"composition":["483c00d4-bb1d-4b42-b29a-c58e06b322a0","d2ac3ae4-0af2-49fe-81af-adac09936215"],"name":"import-provider-test","type":"folder","notes":"test data for import provider.","modified":1508522673278,"location":"mine","persisted":1508522673278},"483c00d4-bb1d-4b42-b29a-c58e06b322a0":{"telemetry":{"period":10,"amplitude":1,"offset":0,"dataRateInHz":1,"values":[{"key":"utc","name":"Time","format":"utc","hints":{"domain":1,"priority":0},"source":"utc"},{"key":"yesterday","name":"Yesterday","format":"utc","hints":{"domain":2,"priority":1},"source":"yesterday"},{"key":"sin","name":"Sine","hints":{"range":1,"priority":2},"source":"sin"},{"key":"cos","name":"Cosine","hints":{"range":2,"priority":3},"source":"cos"}]},"name":"SWG-10","type":"generator","modified":1508522652874,"location":"a9122832-4b6e-43ea-8219-5359c14c5de8","persisted":1508522652874},"d2ac3ae4-0af2-49fe-81af-adac09936215":{"composition":["483c00d4-bb1d-4b42-b29a-c58e06b322a0","20273193-f069-49e9-b4f7-b97a87ed755d"],"name":"Layout","type":"layout","configuration":{"layout":{"panels":{"483c00d4-bb1d-4b42-b29a-c58e06b322a0":{"position":[0,0],"dimensions":[17,8]},"20273193-f069-49e9-b4f7-b97a87ed755d":{"position":[0,8],"dimensions":[17,1],"hasFrame":false}}}},"modified":1508522745580,"location":"a9122832-4b6e-43ea-8219-5359c14c5de8","persisted":1508522745580},"20273193-f069-49e9-b4f7-b97a87ed755d":{"layoutGrid":[64,16],"composition":["483c00d4-bb1d-4b42-b29a-c58e06b322a0"],"name":"FP Test","type":"telemetry.fixed","configuration":{"fixed-display":{"elements":[{"type":"fixed.telemetry","x":0,"y":0,"id":"483c00d4-bb1d-4b42-b29a-c58e06b322a0","stroke":"transparent","color":"","titled":true,"width":8,"height":2,"useGrid":true,"size":"24px"}]}},"modified":1508522717619,"location":"d2ac3ae4-0af2-49fe-81af-adac09936215","persisted":1508522717619}},"rootId":"a9122832-4b6e-43ea-8219-5359c14c5de8"}
\ No newline at end of file
diff --git a/src/plugins/staticRootPlugin/test-data/static-provider-test-empty-namespace.json b/src/plugins/staticRootPlugin/test-data/static-provider-test-empty-namespace.json
new file mode 100644
index 00000000000..0011a32ed35
--- /dev/null
+++ b/src/plugins/staticRootPlugin/test-data/static-provider-test-empty-namespace.json
@@ -0,0 +1,104 @@
+{
+  "openmct": {
+    "a9122832-4b6e-43ea-8219-5359c14c5de8": {
+      "composition": [
+        "483c00d4-bb1d-4b42-b29a-c58e06b322a0",
+        "d2ac3ae4-0af2-49fe-81af-adac09936215"
+      ],
+      "name": "import-provider-test",
+      "type": "folder",
+      "notes": null,
+      "modified": 1508522673278,
+      "location": "mine",
+      "persisted": 1508522673278
+    },
+    "483c00d4-bb1d-4b42-b29a-c58e06b322a0": {
+      "telemetry": {
+        "period": 10,
+        "amplitude": 1,
+        "offset": 0,
+        "dataRateInHz": 1,
+        "values": [
+          {
+            "key": "utc",
+            "name": "Time",
+            "format": "utc",
+            "hints": { "domain": 1, "priority": 0 },
+            "source": "utc"
+          },
+          {
+            "key": "yesterday",
+            "name": "Yesterday",
+            "format": "utc",
+            "hints": { "domain": 2, "priority": 1 },
+            "source": "yesterday"
+          },
+          { "key": "sin", "name": "Sine", "hints": { "range": 1, "priority": 2 }, "source": "sin" },
+          {
+            "key": "cos",
+            "name": "Cosine",
+            "hints": { "range": 2, "priority": 3 },
+            "source": "cos"
+          }
+        ]
+      },
+      "name": "SWG-10",
+      "type": "generator",
+      "modified": 1508522652874,
+      "location": "a9122832-4b6e-43ea-8219-5359c14c5de8",
+      "persisted": 1508522652874
+    },
+    "d2ac3ae4-0af2-49fe-81af-adac09936215": {
+      "composition": [
+        "483c00d4-bb1d-4b42-b29a-c58e06b322a0",
+        "20273193-f069-49e9-b4f7-b97a87ed755d"
+      ],
+      "name": "Layout",
+      "type": "layout",
+      "configuration": {
+        "layout": {
+          "panels": {
+            "483c00d4-bb1d-4b42-b29a-c58e06b322a0": { "position": [0, 0], "dimensions": [17, 8] },
+            "20273193-f069-49e9-b4f7-b97a87ed755d": {
+              "position": [0, 8],
+              "dimensions": [17, 1],
+              "hasFrame": false
+            }
+          }
+        }
+      },
+      "modified": 1508522745580,
+      "location": "a9122832-4b6e-43ea-8219-5359c14c5de8",
+      "persisted": 1508522745580
+    },
+    "20273193-f069-49e9-b4f7-b97a87ed755d": {
+      "layoutGrid": [64, 16],
+      "composition": ["483c00d4-bb1d-4b42-b29a-c58e06b322a0"],
+      "name": "FP Test",
+      "type": "telemetry.fixed",
+      "configuration": {
+        "fixed-display": {
+          "elements": [
+            {
+              "type": "fixed.telemetry",
+              "x": 0,
+              "y": 0,
+              "id": "483c00d4-bb1d-4b42-b29a-c58e06b322a0",
+              "stroke": "transparent",
+              "color": "",
+              "titled": true,
+              "width": 8,
+              "height": 2,
+              "useGrid": true,
+              "size": "24px"
+            }
+          ]
+        }
+      },
+      "modified": 1508522717619,
+      "location": "d2ac3ae4-0af2-49fe-81af-adac09936215",
+      "persisted": 1508522717619
+    }
+  },
+  "rootId": "a9122832-4b6e-43ea-8219-5359c14c5de8"
+}
diff --git a/src/plugins/staticRootPlugin/test-data/static-provider-test-foo-namespace.json b/src/plugins/staticRootPlugin/test-data/static-provider-test-foo-namespace.json
new file mode 100644
index 00000000000..6ec6cd52f73
--- /dev/null
+++ b/src/plugins/staticRootPlugin/test-data/static-provider-test-foo-namespace.json
@@ -0,0 +1,120 @@
+{
+  "openmct": {
+    "foo:a6c9e745-89e5-4c3a-8f54-7a34711aaeb1": {
+      "identifier": { "key": "a6c9e745-89e5-4c3a-8f54-7a34711aaeb1", "namespace": "foo" },
+      "name": "Folder Foo",
+      "type": "folder",
+      "composition": [
+        { "key": "95729018-86ed-4484-867d-10c63c41c5a1", "namespace": "foo" },
+        { "key": "22c438f0-953b-42c5-8fb2-9d5dbeb88a0c", "namespace": "foo" },
+        { "key": "3545554b-53c8-467d-a70d-e90d1a120e4a", "namespace": "foo" }
+      ],
+      "modified": 1681164966705,
+      "location": "foo:mine",
+      "created": 1681164829371,
+      "persisted": 1681164966706
+    },
+    "foo:95729018-86ed-4484-867d-10c63c41c5a1": {
+      "identifier": { "key": "95729018-86ed-4484-867d-10c63c41c5a1", "namespace": "foo" },
+      "name": "Display Layout Bar",
+      "type": "layout",
+      "composition": [
+        { "key": "22c438f0-953b-42c5-8fb2-9d5dbeb88a0c", "namespace": "foo" },
+        { "key": "3545554b-53c8-467d-a70d-e90d1a120e4a", "namespace": "foo" }
+      ],
+      "configuration": {
+        "items": [
+          {
+            "fill": "#666666",
+            "stroke": "",
+            "x": 42,
+            "y": 42,
+            "width": 20,
+            "height": 4,
+            "type": "box-view",
+            "id": "14505a5d-b846-4504-961f-8c9bcdf19f39"
+          },
+          {
+            "identifier": { "key": "22c438f0-953b-42c5-8fb2-9d5dbeb88a0c", "namespace": "foo" },
+            "x": 0,
+            "y": 0,
+            "width": 40,
+            "height": 15,
+            "displayMode": "all",
+            "value": "sin",
+            "stroke": "",
+            "fill": "",
+            "color": "",
+            "fontSize": "default",
+            "font": "default",
+            "type": "telemetry-view",
+            "id": "05baa95f-2064-4cb0-ad9f-575758491220"
+          },
+          {
+            "width": 40,
+            "height": 15,
+            "x": 0,
+            "y": 15,
+            "identifier": { "key": "3545554b-53c8-467d-a70d-e90d1a120e4a", "namespace": "foo" },
+            "hasFrame": true,
+            "fontSize": "default",
+            "font": "default",
+            "type": "subobject-view",
+            "id": "70e1b8b7-cd59-4a52-b796-d68fb0c48fc5"
+          }
+        ],
+        "layoutGrid": [10, 10],
+        "objectStyles": {
+          "05baa95f-2064-4cb0-ad9f-575758491220": {
+            "staticStyle": {
+              "style": {
+                "border": "1px solid #00ff00",
+                "backgroundColor": "#0000ff",
+                "color": "#ff00ff"
+              }
+            }
+          }
+        }
+      },
+      "modified": 1681165037189,
+      "location": "foo:a6c9e745-89e5-4c3a-8f54-7a34711aaeb1",
+      "created": 1681164838178,
+      "persisted": 1681165037190
+    },
+    "foo:22c438f0-953b-42c5-8fb2-9d5dbeb88a0c": {
+      "identifier": { "key": "22c438f0-953b-42c5-8fb2-9d5dbeb88a0c", "namespace": "foo" },
+      "name": "SWG Baz",
+      "type": "generator",
+      "telemetry": {
+        "period": "20",
+        "amplitude": "2",
+        "offset": "5",
+        "dataRateInHz": 1,
+        "phase": 0,
+        "randomness": 0,
+        "loadDelay": 0,
+        "infinityValues": false,
+        "staleness": false
+      },
+      "modified": 1681164910719,
+      "location": "foo:a6c9e745-89e5-4c3a-8f54-7a34711aaeb1",
+      "created": 1681164903684,
+      "persisted": 1681164910719
+    },
+    "foo:3545554b-53c8-467d-a70d-e90d1a120e4a": {
+      "identifier": { "key": "3545554b-53c8-467d-a70d-e90d1a120e4a", "namespace": "foo" },
+      "name": "Clock Qux",
+      "type": "clock",
+      "configuration": {
+        "baseFormat": "YYYY/MM/DD hh:mm:ss",
+        "use24": "clock12",
+        "timezone": "UTC"
+      },
+      "modified": 1681164989837,
+      "location": "foo:a6c9e745-89e5-4c3a-8f54-7a34711aaeb1",
+      "created": 1681164966702,
+      "persisted": 1681164989837
+    }
+  },
+  "rootId": "foo:a6c9e745-89e5-4c3a-8f54-7a34711aaeb1"
+}
diff --git a/src/plugins/summaryWidget/README.md b/src/plugins/summaryWidget/README.md
index 1301bbd6432..5fa28d80941 100644
--- a/src/plugins/summaryWidget/README.md
+++ b/src/plugins/summaryWidget/README.md
@@ -1,7 +1,7 @@
 # Summary Widget Plugin
 Summary widgets can be used to provide visual indication of state based on telemetry data. They allow rules to be 
 defined that can then be used to change the appearance of the summary widget element based on data. For example, a 
-summary widget could be defined that is green when a temparature reading is between `0` and `100` centigrade, red when 
+summary widget could be defined that is green when a temperature reading is between `0` and `100` centigrade, red when 
 it's above `100`, and orange when it's below `0`.
 
 ## Installation
diff --git a/src/plugins/summaryWidget/SummaryWidgetViewPolicy.js b/src/plugins/summaryWidget/SummaryWidgetViewPolicy.js
index 3117560c1f4..4c020e4c538 100644
--- a/src/plugins/summaryWidget/SummaryWidgetViewPolicy.js
+++ b/src/plugins/summaryWidget/SummaryWidgetViewPolicy.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,27 +20,16 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
+/**
+ * Policy determining which views can apply to summary widget.  Disables
+ * any view other than normal summary widget view.
+ */
+export default function SummaryWidgetViewPolicy() {}
 
-], function (
+SummaryWidgetViewPolicy.prototype.allow = function (view, domainObject) {
+  if (domainObject.getModel().type === 'summary-widget') {
+    return view.key === 'summary-widget-viewer';
+  }
 
-) {
-
-    /**
-     * Policy determining which views can apply to summary widget.  Disables
-     * any view other than normal summary widget view.
-     */
-    function SummaryWidgetViewPolicy() {
-    }
-
-    SummaryWidgetViewPolicy.prototype.allow = function (view, domainObject) {
-        if (domainObject.getModel().type === 'summary-widget') {
-            return view.key === 'summary-widget-viewer';
-        }
-
-        return true;
-
-    };
-
-    return SummaryWidgetViewPolicy;
-});
+  return true;
+};
diff --git a/src/plugins/summaryWidget/SummaryWidgetsCompositionPolicy.js b/src/plugins/summaryWidget/SummaryWidgetsCompositionPolicy.js
index 16c703555dd..8964b1a4700 100644
--- a/src/plugins/summaryWidget/SummaryWidgetsCompositionPolicy.js
+++ b/src/plugins/summaryWidget/SummaryWidgetsCompositionPolicy.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,25 +20,16 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(
-    [],
-    function () {
+export default function SummaryWidgetsCompositionPolicy(openmct) {
+  this.openmct = openmct;
+}
 
-        function SummaryWidgetsCompositionPolicy(openmct) {
-            this.openmct = openmct;
-        }
+SummaryWidgetsCompositionPolicy.prototype.allow = function (parent, child) {
+  const parentType = parent.type;
 
-        SummaryWidgetsCompositionPolicy.prototype.allow = function (parent, child) {
-            const parentType = parent.getCapability('type');
-            const newStyleChild = child.useCapability('adapter');
+  if (parentType === 'summary-widget' && !this.openmct.telemetry.isTelemetryObject(child)) {
+    return false;
+  }
 
-            if (parentType.instanceOf('summary-widget') && !this.openmct.telemetry.isTelemetryObject(newStyleChild)) {
-                return false;
-            }
-
-            return true;
-        };
-
-        return SummaryWidgetsCompositionPolicy;
-    }
-);
+  return true;
+};
diff --git a/src/plugins/summaryWidget/plugin.js b/src/plugins/summaryWidget/plugin.js
index 9b618339d58..cdac6609db0 100755
--- a/src/plugins/summaryWidget/plugin.js
+++ b/src/plugins/summaryWidget/plugin.js
@@ -1,105 +1,87 @@
-define([
-    './SummaryWidgetsCompositionPolicy',
-    './src/telemetry/SummaryWidgetMetadataProvider',
-    './src/telemetry/SummaryWidgetTelemetryProvider',
-    './src/views/SummaryWidgetViewProvider',
-    './SummaryWidgetViewPolicy'
-], function (
-    SummaryWidgetsCompositionPolicy,
-    SummaryWidgetMetadataProvider,
-    SummaryWidgetTelemetryProvider,
-    SummaryWidgetViewProvider,
-    SummaryWidgetViewPolicy
-) {
-
-    function plugin() {
-
-        const widgetType = {
-            name: 'Summary Widget',
-            description: 'A compact status update for collections of telemetry-producing items',
-            creatable: true,
-            cssClass: 'icon-summary-widget',
-            initialize: function (domainObject) {
-                domainObject.composition = [];
-                domainObject.configuration = {
-                    ruleOrder: ['default'],
-                    ruleConfigById: {
-                        default: {
-                            name: 'Default',
-                            label: 'Unnamed Rule',
-                            message: '',
-                            id: 'default',
-                            icon: ' ',
-                            style: {
-                                'color': '#ffffff',
-                                'background-color': '#38761d',
-                                'border-color': 'rgba(0,0,0,0)'
-                            },
-                            description: 'Default appearance for the widget',
-                            conditions: [{
-                                object: '',
-                                key: '',
-                                operation: '',
-                                values: []
-                            }],
-                            jsCondition: '',
-                            trigger: 'any',
-                            expanded: 'true'
-                        }
-                    },
-                    testDataConfig: [{
-                        object: '',
-                        key: '',
-                        value: ''
-                    }]
-                };
-                domainObject.openNewTab = 'thisTab';
-                domainObject.telemetry = {};
-            },
-            form: [
-                {
-                    "key": "url",
-                    "name": "URL",
-                    "control": "textfield",
-                    "required": false,
-                    "cssClass": "l-input-lg"
-                },
-                {
-                    "key": "openNewTab",
-                    "name": "Tab to Open Hyperlink",
-                    "control": "select",
-                    "options": [
-                        {
-                            "value": "thisTab",
-                            "name": "Open in this tab"
-                        },
-                        {
-                            "value": "newTab",
-                            "name": "Open in a new tab"
-                        }
-                    ],
-                    "cssClass": "l-inline"
-                }
-            ]
-        };
-
-        return function install(openmct) {
-            openmct.types.addType('summary-widget', widgetType);
-            openmct.legacyExtension('policies', {
-                category: 'composition',
-                implementation: SummaryWidgetsCompositionPolicy,
-                depends: ['openmct']
-            });
-            openmct.legacyExtension('policies', {
-                category: 'view',
-                implementation: SummaryWidgetViewPolicy,
-                depends: ['openmct']
-            });
-            openmct.telemetry.addProvider(new SummaryWidgetMetadataProvider(openmct));
-            openmct.telemetry.addProvider(new SummaryWidgetTelemetryProvider(openmct));
-            openmct.objectViews.addProvider(new SummaryWidgetViewProvider(openmct));
-        };
-    }
-
-    return plugin;
-});
+import SummaryWidgetMetadataProvider from './src/telemetry/SummaryWidgetMetadataProvider.js';
+import SummaryWidgetTelemetryProvider from './src/telemetry/SummaryWidgetTelemetryProvider.js';
+import SummaryWidgetViewProvider from './src/views/SummaryWidgetViewProvider.js';
+import SummaryWidgetsCompositionPolicy from './SummaryWidgetsCompositionPolicy.js';
+
+export default function plugin() {
+  const widgetType = {
+    name: 'Summary Widget',
+    description: 'A compact status update for collections of telemetry-producing items',
+    cssClass: 'icon-summary-widget',
+    initialize: function (domainObject) {
+      domainObject.composition = [];
+      domainObject.configuration = {
+        ruleOrder: ['default'],
+        ruleConfigById: {
+          default: {
+            name: 'Default',
+            label: 'Unnamed Rule',
+            message: '',
+            id: 'default',
+            icon: ' ',
+            style: {
+              color: '#ffffff',
+              'background-color': '#38761d',
+              'border-color': 'rgba(0,0,0,0)'
+            },
+            description: 'Default appearance for the widget',
+            conditions: [
+              {
+                object: '',
+                key: '',
+                operation: '',
+                values: []
+              }
+            ],
+            jsCondition: '',
+            trigger: 'any',
+            expanded: 'true'
+          }
+        },
+        testDataConfig: [
+          {
+            object: '',
+            key: '',
+            value: ''
+          }
+        ]
+      };
+      domainObject.openNewTab = 'thisTab';
+      domainObject.telemetry = {};
+    },
+    form: [
+      {
+        key: 'url',
+        name: 'URL',
+        control: 'textfield',
+        required: false,
+        cssClass: 'l-input-lg'
+      },
+      {
+        key: 'openNewTab',
+        name: 'Tab to Open Hyperlink',
+        control: 'select',
+        options: [
+          {
+            value: 'thisTab',
+            name: 'Open in this tab'
+          },
+          {
+            value: 'newTab',
+            name: 'Open in a new tab'
+          }
+        ],
+        cssClass: 'l-inline'
+      }
+    ]
+  };
+
+  return function install(openmct) {
+    openmct.types.addType('summary-widget', widgetType);
+    let compositionPolicy = new SummaryWidgetsCompositionPolicy(openmct);
+    openmct.composition.addPolicy(compositionPolicy.allow.bind(compositionPolicy));
+    openmct.telemetry.addProvider(new SummaryWidgetMetadataProvider(openmct));
+    openmct.telemetry.addProvider(new SummaryWidgetTelemetryProvider(openmct));
+    openmct.objectViews.addProvider(new SummaryWidgetViewProvider(openmct));
+  };
+}
diff --git a/src/plugins/summaryWidget/res/conditionTemplate.html b/src/plugins/summaryWidget/res/conditionTemplate.html
index ac5af862e64..aa0ec6cf73b 100644
--- a/src/plugins/summaryWidget/res/conditionTemplate.html
+++ b/src/plugins/summaryWidget/res/conditionTemplate.html
@@ -1,11 +1,11 @@
 <li class="has-local-controls t-condition">
-    <label class="t-condition-context">when</label>
-    <span class="controls">
-        <span class="t-configuration"> </span>
-        <span class="t-value-inputs"> </span>
-    </span>
-    <span class="flex-elem c-local-controls--show-on-hover l-condition-action-buttons-wrapper">
-        <a class="s-icon-button icon-duplicate t-duplicate" title="Duplicate this condition"></a>
-        <a class="s-icon-button icon-trash t-delete" title="Delete this condition"></a>
-    </span>
+  <label class="t-condition-context">when</label>
+  <span class="controls">
+    <span class="t-configuration"> </span>
+    <span class="t-value-inputs"> </span>
+  </span>
+  <span class="flex-elem c-local-controls--show-on-hover l-condition-action-buttons-wrapper">
+    <a class="s-icon-button icon-duplicate t-duplicate" title="Duplicate this condition"></a>
+    <a class="s-icon-button icon-trash t-delete" title="Delete this condition"></a>
+  </span>
 </li>
diff --git a/src/plugins/summaryWidget/res/input/paletteTemplate.html b/src/plugins/summaryWidget/res/input/paletteTemplate.html
index 4a086bf703c..5547e3724d4 100644
--- a/src/plugins/summaryWidget/res/input/paletteTemplate.html
+++ b/src/plugins/summaryWidget/res/input/paletteTemplate.html
@@ -9,13 +9,13 @@
    </div>
 </a-->
 <div class="c-ctrl-wrapper">
-    <button class="c-button--menu c-button--swatched js-button">
-        <div class="c-swatch t-swatch"></div>
-    </button>
-    <div class="c-menu c-palette">
-        <div class="c-palette__item-none">
-            <div class="c-palette__item"></div>
-        </div>
-        <div class="c-palette__items"></div>
+  <button class="c-button--menu c-button--swatched js-button">
+    <div class="c-swatch t-swatch"></div>
+  </button>
+  <div class="c-menu c-palette">
+    <div class="c-palette__item-none">
+      <div class="c-palette__item"></div>
     </div>
+    <div class="c-palette__items"></div>
+  </div>
 </div>
diff --git a/src/plugins/summaryWidget/res/input/selectTemplate.html b/src/plugins/summaryWidget/res/input/selectTemplate.html
index e49c69830e6..830d7f728d9 100644
--- a/src/plugins/summaryWidget/res/input/selectTemplate.html
+++ b/src/plugins/summaryWidget/res/input/selectTemplate.html
@@ -1,4 +1,3 @@
 <span>
-    <select>
-    </select>
- </span>
+  <select></select>
+</span>
diff --git a/src/plugins/summaryWidget/res/ruleImageTemplate.html b/src/plugins/summaryWidget/res/ruleImageTemplate.html
index fec0f79b008..9c066214766 100644
--- a/src/plugins/summaryWidget/res/ruleImageTemplate.html
+++ b/src/plugins/summaryWidget/res/ruleImageTemplate.html
@@ -1,3 +1,3 @@
 <div class="holder widget-rules-wrapper">
-    <div class="t-drag-rule-image l-widget-rule s-widget-rule"></div>
+  <div class="t-drag-rule-image l-widget-rule s-widget-rule"></div>
 </div>
diff --git a/src/plugins/summaryWidget/res/ruleTemplate.html b/src/plugins/summaryWidget/res/ruleTemplate.html
index c05276a63d1..8a528dc602b 100644
--- a/src/plugins/summaryWidget/res/ruleTemplate.html
+++ b/src/plugins/summaryWidget/res/ruleTemplate.html
@@ -1,67 +1,72 @@
 <div class="c-sw-rule">
-    <div class="c-sw-rule__ui l-compact-form l-widget-rule s-widget-rule has-local-controls">
-        <div class="c-sw-rule__ui__header widget-rule-header">
-            <div class="c-sw-rule__grippy-wrapper">
-                <div class="c-sw-rule__grippy t-grippy local-control local-controls-hidden"></div>
-            </div>
-            <div class="c-disclosure-triangle c-disclosure-triangle--expanded is-enabled js-disclosure"></div>
-            <div class="t-widget-thumb widget-thumb c-sw c-sw--thumb">
-                <div class="c-sw__icon js-sw__icon"></div>
-                <div class="c-sw__label js-sw__label"></div>
-            </div>
-            <div class="flex-elem rule-title">Default Title</div>
-            <div class="flex-elem rule-description grows">Rule description goes here</div>
-            <div class="flex-elem c-local-controls--show-on-hover l-rule-action-buttons-wrapper">
-                <a class="s-icon-button icon-duplicate t-duplicate" title="Duplicate this rule"></a>
-                <a class="s-icon-button icon-trash t-delete" title="Delete this rule"></a>
-            </div>
-        </div>
-        <div class="widget-rule-content expanded">
-            <ul>
-                <li>
-                    <label>Rule Name:</label>
-                    <span class="controls">
-                        <input class="t-rule-name-input" type="text" />
-                    </span>
-                </li>
-                <li class="connects-to-previous">
-                    <label>Label:</label>
-                    <span class="controls t-label-input">
-                        <input class="t-rule-label-input" type="text" />
-                    </span>
-                </li>
-                <li class="connects-to-previous">
-                    <label>Message:</label>
-                    <span class="controls">
-                        <input type="text" class="lg s t-rule-message-input"
-                         placeholder="Will appear as tooltip when hovering on the widget"/>
-                    </span>
-                </li>
-                <li class="connects-to-previous">
-                    <label>Style:</label>
-                    <span class="controls t-style-input"></span>
-                </li>
-            </ul>
-            <ul class="t-widget-rule-config">
-                <li>
-                    <label>Trigger when</label>
-                    <span class="controls">
-                        <select class="t-trigger">
-                            <option value="any">any condition is met</option>
-                            <option value="all">all conditions are met</option>
-                        </select>
-                    </span>
-                </li>
-                <li>
-                    <label></label>
-                    <span class="controls">
-                        <button class="c-button add-condition icon-plus">
-                            <span class="c-button__label">Add Condition</span>
-                        </button>
-                    </span>
-                </li>
-            </ul>
-        </div>
+  <div class="c-sw-rule__ui l-compact-form l-widget-rule s-widget-rule has-local-controls">
+    <div class="c-sw-rule__ui__header widget-rule-header">
+      <div class="c-sw-rule__grippy-wrapper">
+        <div class="c-sw-rule__grippy t-grippy local-control local-controls-hidden"></div>
+      </div>
+      <div
+        class="c-disclosure-triangle c-disclosure-triangle--expanded is-enabled js-disclosure"
+      ></div>
+      <div class="t-widget-thumb widget-thumb c-sw c-sw--thumb">
+        <div class="c-sw__icon js-sw__icon"></div>
+        <div class="c-sw__label js-sw__label"></div>
+      </div>
+      <div class="flex-elem rule-title">Default Title</div>
+      <div class="flex-elem rule-description grows">Rule description goes here</div>
+      <div class="flex-elem c-local-controls--show-on-hover l-rule-action-buttons-wrapper">
+        <a class="s-icon-button icon-duplicate t-duplicate" title="Duplicate this rule"></a>
+        <a class="s-icon-button icon-trash t-delete" title="Delete this rule"></a>
+      </div>
     </div>
-    <div class="t-drag-indicator l-widget-rule s-widget-rule" style="opacity:0;" hidden></div>
+    <div class="widget-rule-content expanded">
+      <ul>
+        <li>
+          <label>Rule Name:</label>
+          <span class="controls">
+            <input class="t-rule-name-input" type="text" />
+          </span>
+        </li>
+        <li class="connects-to-previous">
+          <label>Label:</label>
+          <span class="controls t-label-input">
+            <input class="t-rule-label-input" type="text" />
+          </span>
+        </li>
+        <li class="connects-to-previous">
+          <label>Message:</label>
+          <span class="controls">
+            <input
+              type="text"
+              class="lg s t-rule-message-input"
+              placeholder="Will appear as tooltip when hovering on the widget"
+            />
+          </span>
+        </li>
+        <li class="connects-to-previous">
+          <label>Style:</label>
+          <span class="controls t-style-input"></span>
+        </li>
+      </ul>
+      <ul class="t-widget-rule-config">
+        <li>
+          <label>Trigger when</label>
+          <span class="controls">
+            <select class="t-trigger">
+              <option value="any">any condition is met</option>
+              <option value="all">all conditions are met</option>
+            </select>
+          </span>
+        </li>
+        <li>
+          <label></label>
+          <span class="controls">
+            <button class="c-button add-condition icon-plus">
+              <span class="c-button__label">Add Condition</span>
+            </button>
+          </span>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <div class="t-drag-indicator l-widget-rule s-widget-rule" style="opacity: 0" hidden></div>
 </div>
diff --git a/src/plugins/summaryWidget/res/testDataItemTemplate.html b/src/plugins/summaryWidget/res/testDataItemTemplate.html
index b9b0ef2a87e..c5206afc6f4 100644
--- a/src/plugins/summaryWidget/res/testDataItemTemplate.html
+++ b/src/plugins/summaryWidget/res/testDataItemTemplate.html
@@ -1,16 +1,20 @@
-<div class="t-test-data-item l-compact-form has-local-controls l-widget-test-data-item s-widget-test-data-item">
-    <ul>
-        <li>
-            <label>Set </label>
-            <span class="controls">
-                <span class="t-configuration"></span>
-                <span class="equal-to hidden"> equal to </span>
-                <span class="t-value-inputs"></span>
-            </span>
-            <span class="flex-elem c-local-controls--show-on-hover l-widget-test-data-item-action-buttons-wrapper">
-                <a class="s-icon-button icon-duplicate t-duplicate" title="Duplicate this test value"></a>
-                <a class="s-icon-button icon-trash t-delete" title="Delete this test value"></a>
-            </span>
-        </li>
-    </ul>
+<div
+  class="t-test-data-item l-compact-form has-local-controls l-widget-test-data-item s-widget-test-data-item"
+>
+  <ul>
+    <li>
+      <label>Set </label>
+      <span class="controls">
+        <span class="t-configuration"></span>
+        <span class="equal-to hidden"> equal to </span>
+        <span class="t-value-inputs"></span>
+      </span>
+      <span
+        class="flex-elem c-local-controls--show-on-hover l-widget-test-data-item-action-buttons-wrapper"
+      >
+        <a class="s-icon-button icon-duplicate t-duplicate" title="Duplicate this test value"></a>
+        <a class="s-icon-button icon-trash t-delete" title="Delete this test value"></a>
+      </span>
+    </li>
+  </ul>
 </div>
diff --git a/src/plugins/summaryWidget/res/testDataTemplate.html b/src/plugins/summaryWidget/res/testDataTemplate.html
index 6470589c939..53cc6ec9091 100644
--- a/src/plugins/summaryWidget/res/testDataTemplate.html
+++ b/src/plugins/summaryWidget/res/testDataTemplate.html
@@ -1,17 +1,18 @@
 <div class="flex-accordion-holder">
-    <div class="flex-accordion-holder t-widget-test-data-content w-widget-test-data-content">
-        <div class="l-enable">
-            <label class="checkbox custom">Apply Test Values
-                <input type="checkbox" class="t-test-data-checkbox">
-                <em></em>
-            </label>
-        </div>
-        <div class="t-test-data-config w-widget-test-data-items">
-            <div class="holder add-rule-button-wrapper align-right">
-                <button id="addRule" class="c-button c-button--major add-test-condition icon-plus">
-                    <span class="c-button__label">Add Test Value</span>
-                </button>
-            </div>
-        </div>
+  <div class="flex-accordion-holder t-widget-test-data-content w-widget-test-data-content">
+    <div class="l-enable">
+      <label class="checkbox custom"
+        >Apply Test Values
+        <input type="checkbox" class="t-test-data-checkbox" />
+        <em></em>
+      </label>
     </div>
+    <div class="t-test-data-config w-widget-test-data-items">
+      <div class="holder add-rule-button-wrapper align-right">
+        <button id="addRule" class="c-button c-button--major add-test-condition icon-plus">
+          <span class="c-button__label">Add Test Value</span>
+        </button>
+      </div>
+    </div>
+  </div>
 </div>
diff --git a/src/plugins/summaryWidget/res/widgetTemplate.html b/src/plugins/summaryWidget/res/widgetTemplate.html
index 3d26dfe5867..ad72aad2085 100755
--- a/src/plugins/summaryWidget/res/widgetTemplate.html
+++ b/src/plugins/summaryWidget/res/widgetTemplate.html
@@ -1,30 +1,40 @@
-<div class="c-sw-edit w-summary-widget s-status-no-data">
-    <a id="widget" class="t-summary-widget l-summary-widget s-summary-widget labeled c-sw">
-        <div id="widgetIcon" class="c-sw__icon js-sw__icon"></div>
-        <div id="widgetLabel" class="label widget-label c-sw__label js-sw__label">Default Static Name</div>
-    </a>
-    <div class="js-summary-widget__message c-summary-widget__message c-message c-message--simple message-severity-alert">
-        <div class="c-summary-widget__text">
-            You must add at least one telemetry object to edit this widget.
-        </div>
-    </div>
-    <div class="c-sw-edit__ui holder l-flex-accordion flex-elem grows widget-edit-holder expanded-widget-test-data expanded-widget-rules">
-        <div class="c-sw-edit__ui__header">
-            <span class="c-disclosure-triangle c-disclosure-triangle--expanded is-enabled t-view-control-test-data"></span>
-            <span class="c-sw-edit__ui__header-label">Test Data Values</span>
-        </div>
-        <div class="c-sw-edit__ui__test-data widget-test-data flex-accordion-holder"></div>
-        <div class="c-sw-edit__ui__header">
-            <span class="c-disclosure-triangle c-disclosure-triangle--expanded is-enabled t-view-control-rules"></span>
-            <span class="c-sw-edit__ui__header-label">Rules</span>
-        </div>
-        <div class="c-sw-editui__rules-wrapper holder widget-rules-wrapper flex-elem expanded">
-            <div id="ruleArea" class="c-sw-editui__rules widget-rules"></div>
-            <div class="holder add-rule-button-wrapper align-right">
-                <button id="addRule" class="c-button c-button--major add-rule-button icon-plus">
-                    <span class="c-button__label">Add Rule</span>
-                </button>
-            </div>
-        </div>
-    </div>
-</div>
\ No newline at end of file
+<div class="c-sw-edit w-summary-widget s-status-no-data">
+  <a id="widget" class="t-summary-widget l-summary-widget s-summary-widget labeled c-sw">
+    <div id="widgetIcon" class="c-sw__icon js-sw__icon"></div>
+    <div id="widgetLabel" class="label widget-label c-sw__label js-sw__label">
+      Default Static Name
+    </div>
+  </a>
+  <div
+    class="js-summary-widget__message c-summary-widget__message c-message c-message--simple message-severity-alert"
+  >
+    <div class="c-summary-widget__text">
+      You must add at least one telemetry object to edit this widget.
+    </div>
+  </div>
+  <div
+    class="c-sw-edit__ui holder l-flex-accordion flex-elem grows widget-edit-holder expanded-widget-test-data expanded-widget-rules"
+  >
+    <div class="c-sw-edit__ui__header">
+      <span
+        class="c-disclosure-triangle c-disclosure-triangle--expanded is-enabled t-view-control-test-data"
+      ></span>
+      <span class="c-sw-edit__ui__header-label">Test Data Values</span>
+    </div>
+    <div class="c-sw-edit__ui__test-data widget-test-data flex-accordion-holder"></div>
+    <div class="c-sw-edit__ui__header">
+      <span
+        class="c-disclosure-triangle c-disclosure-triangle--expanded is-enabled t-view-control-rules"
+      ></span>
+      <span class="c-sw-edit__ui__header-label">Rules</span>
+    </div>
+    <div class="c-sw-editui__rules-wrapper holder widget-rules-wrapper flex-elem expanded">
+      <div id="ruleArea" class="c-sw-editui__rules widget-rules"></div>
+      <div class="holder add-rule-button-wrapper align-right">
+        <button id="addRule" class="c-button c-button--major add-rule-button icon-plus">
+          <span class="c-button__label">Add Rule</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/plugins/summaryWidget/src/Condition.js b/src/plugins/summaryWidget/src/Condition.js
index 997ad67b4f0..cdfd614bb0f 100644
--- a/src/plugins/summaryWidget/src/Condition.js
+++ b/src/plugins/summaryWidget/src/Condition.js
@@ -1,227 +1,250 @@
-define([
-    '../res/conditionTemplate.html',
-    './input/ObjectSelect',
-    './input/KeySelect',
-    './input/OperationSelect',
-    './eventHelpers',
-    'EventEmitter',
-    'zepto'
-], function (
-    conditionTemplate,
-    ObjectSelect,
-    KeySelect,
-    OperationSelect,
-    eventHelpers,
-    EventEmitter,
-    $
-) {
-    /**
-     * Represents an individual condition for a summary widget rule. Manages the
-     * associated inputs and view.
-     * @param {Object} conditionConfig The configurration for this condition, consisting
-     *                                of object, key, operation, and values fields
-     * @param {number} index the index of this Condition object in it's parent Rule's data model,
-     *                        to be injected into callbacks for removes
-     * @param {ConditionManager} conditionManager A ConditionManager instance for populating
-     *                                            selects with configuration data
-     */
-    function Condition(conditionConfig, index, conditionManager) {
-        eventHelpers.extend(this);
-        this.config = conditionConfig;
-        this.index = index;
-        this.conditionManager = conditionManager;
-
-        this.domElement = $(conditionTemplate);
-        this.eventEmitter = new EventEmitter();
-        this.supportedCallbacks = ['remove', 'duplicate', 'change'];
-
-        this.deleteButton = $('.t-delete', this.domElement);
-        this.duplicateButton = $('.t-duplicate', this.domElement);
-
-        this.selects = {};
-        this.valueInputs = [];
-
-        this.remove = this.remove.bind(this);
-        this.duplicate = this.duplicate.bind(this);
-
-        const self = this;
-
-        /**
-         * Event handler for a change in one of this conditions' custom selects
-         * @param {string} value The new value of this selects
-         * @param {string} property The property of this condition to modify
-         * @private
-         */
-        function onSelectChange(value, property) {
-            if (property === 'operation') {
-                self.generateValueInputs(value);
-            }
-
-            self.eventEmitter.emit('change', {
-                value: value,
-                property: property,
-                index: self.index
-            });
-        }
-
-        /**
-         * Event handler for this conditions value inputs
-         * @param {Event} event The oninput event that triggered this callback
-         * @private
-         */
-        function onValueInput(event) {
-            const elem = event.target;
-            const value = isNaN(Number(elem.value)) ? elem.value : Number(elem.value);
-            const inputIndex = self.valueInputs.indexOf(elem);
-
-            self.eventEmitter.emit('change', {
-                value: value,
-                property: 'values[' + inputIndex + ']',
-                index: self.index
-            });
-        }
-
-        this.listenTo(this.deleteButton, 'click', this.remove, this);
-        this.listenTo(this.duplicateButton, 'click', this.duplicate, this);
-
-        this.selects.object = new ObjectSelect(this.config, this.conditionManager, [
-            ['any', 'any telemetry'],
-            ['all', 'all telemetry']
-        ]);
-        this.selects.key = new KeySelect(this.config, this.selects.object, this.conditionManager);
-        this.selects.operation = new OperationSelect(
-            this.config,
-            this.selects.key,
-            this.conditionManager,
-            function (value) {
-                onSelectChange(value, 'operation');
-            });
-
-        this.selects.object.on('change', function (value) {
-            onSelectChange(value, 'object');
-        });
-        this.selects.key.on('change', function (value) {
-            onSelectChange(value, 'key');
-        });
-
-        Object.values(this.selects).forEach(function (select) {
-            $('.t-configuration', self.domElement).append(select.getDOM());
-        });
-        this.listenTo($('.t-value-inputs', this.domElement), 'input', onValueInput);
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import EventEmitter from 'EventEmitter';
+
+import * as templateHelpers from '../../../utils/template/templateHelpers.js';
+import conditionTemplate from '../res/conditionTemplate.html';
+import eventHelpers from './eventHelpers.js';
+import KeySelect from './input/KeySelect.js';
+import ObjectSelect from './input/ObjectSelect.js';
+import OperationSelect from './input/OperationSelect.js';
+
+/**
+ * Represents an individual condition for a summary widget rule. Manages the
+ * associated inputs and view.
+ * @param {Object} conditionConfig The configuration for this condition, consisting
+ *                                of object, key, operation, and values fields
+ * @param {number} index the index of this Condition object in it's parent Rule's data model,
+ *                        to be injected into callbacks for removes
+ * @param {ConditionManager} conditionManager A ConditionManager instance for populating
+ *                                            selects with configuration data
+ */
+export default function Condition(conditionConfig, index, conditionManager) {
+  eventHelpers.extend(this);
+  this.config = conditionConfig;
+  this.index = index;
+  this.conditionManager = conditionManager;
+
+  this.domElement = templateHelpers.convertTemplateToHTML(conditionTemplate)[0];
+
+  this.eventEmitter = new EventEmitter();
+  this.supportedCallbacks = ['remove', 'duplicate', 'change'];
+
+  this.deleteButton = this.domElement.querySelector('.t-delete');
+  this.duplicateButton = this.domElement.querySelector('.t-duplicate');
+
+  this.selects = {};
+  this.valueInputs = [];
+
+  const self = this;
+
+  /**
+   * Event handler for a change in one of this conditions' custom selects
+   * @param {string} value The new value of this selects
+   * @param {string} property The property of this condition to modify
+   * @private
+   */
+  function onSelectChange(value, property) {
+    if (property === 'operation') {
+      self.generateValueInputs(value);
     }
 
-    Condition.prototype.getDOM = function (container) {
-        return this.domElement;
-    };
-
-    /**
-     * Register a callback with this condition: supported callbacks are remove, change,
-     * duplicate
-     * @param {string} event The key for the event to listen to
-     * @param {function} callback The function that this rule will envoke on this event
-     * @param {Object} context A reference to a scope to use as the context for
-     *                         context for the callback function
-     */
-    Condition.prototype.on = function (event, callback, context) {
-        if (this.supportedCallbacks.includes(event)) {
-            this.eventEmitter.on(event, callback, context || this);
-        }
-    };
-
-    /**
-     * Hide the appropriate inputs when this is the only condition
-     */
-    Condition.prototype.hideButtons = function () {
-        this.deleteButton.hide();
-    };
-
-    /**
-     * Remove this condition from the configuration. Invokes any registered
-     * remove callbacks
-     */
-    Condition.prototype.remove = function () {
-        this.eventEmitter.emit('remove', this.index);
-        this.destroy();
-    };
-
-    Condition.prototype.destroy = function () {
-        this.stopListening();
-        Object.values(this.selects).forEach(function (select) {
-            select.destroy();
-        });
-    };
-
-    /**
-     * Make a deep clone of this condition's configuration and invoke any duplicate
-     * callbacks with the cloned configuration and this rule's index
-     */
-    Condition.prototype.duplicate = function () {
-        const sourceCondition = JSON.parse(JSON.stringify(this.config));
-        this.eventEmitter.emit('duplicate', {
-            sourceCondition: sourceCondition,
-            index: this.index
-        });
-    };
-
-    /**
-     * When an operation is selected, create the appropriate value inputs
-     * and add them to the view. If an operation is of type enum, create
-     * a drop-down menu instead.
-     *
-     * @param {string} operation The key of currently selected operation
-     */
-    Condition.prototype.generateValueInputs = function (operation) {
-        const evaluator = this.conditionManager.getEvaluator();
-        const inputArea = $('.t-value-inputs', this.domElement);
-        let inputCount;
-        let inputType;
-        let newInput;
-        let index = 0;
-        let emitChange = false;
-
-        inputArea.html('');
-        this.valueInputs = [];
-        this.config.values = this.config.values || [];
-
-        if (evaluator.getInputCount(operation)) {
-            inputCount = evaluator.getInputCount(operation);
-            inputType = evaluator.getInputType(operation);
-
-            while (index < inputCount) {
-                if (inputType === 'select') {
-                    newInput = $('<select>' + this.generateSelectOptions() + '</select>');
-                    emitChange = true;
-                } else {
-                    const defaultValue = inputType === 'number' ? 0 : '';
-                    const value = this.config.values[index] || defaultValue;
-                    this.config.values[index] = value;
-                    newInput = $('<input type = "' + inputType + '" value = "' + value + '"></input>');
-                }
-
-                this.valueInputs.push(newInput.get(0));
-                inputArea.append(newInput);
-                index += 1;
-            }
-
-            if (emitChange) {
-                this.eventEmitter.emit('change', {
-                    value: Number(newInput[0].options[0].value),
-                    property: 'values[0]',
-                    index: this.index
-                });
-            }
-        }
-    };
-
-    Condition.prototype.generateSelectOptions = function () {
-        let telemetryMetadata = this.conditionManager.getTelemetryMetadata(this.config.object);
-        let options = '';
-        telemetryMetadata[this.config.key].enumerations.forEach(enumeration => {
-            options += '<option value="' + enumeration.value + '">' + enumeration.string + '</option>';
-        });
-
-        return options;
-    };
-
-    return Condition;
-});
+    self.eventEmitter.emit('change', {
+      value: value,
+      property: property,
+      index: self.index
+    });
+  }
+
+  this.handleObjectChange = (value) => onSelectChange(value, 'object');
+  this.handleKeyChange = (value) => onSelectChange(value, 'key');
+
+  /**
+   * Event handler for this conditions value inputs
+   * @param {Event} event The oninput event that triggered this callback
+   * @private
+   */
+  function onValueInput(event) {
+    const elem = event.target;
+    const value = isNaN(Number(elem.value)) ? elem.value : Number(elem.value);
+    const inputIndex = self.valueInputs.indexOf(elem);
+
+    self.eventEmitter.emit('change', {
+      value: value,
+      property: 'values[' + inputIndex + ']',
+      index: self.index
+    });
+  }
+
+  this.listenTo(this.deleteButton, 'click', this.remove, this);
+  this.listenTo(this.duplicateButton, 'click', this.duplicate, this);
+
+  this.selects.object = new ObjectSelect(this.config, this.conditionManager, [
+    ['any', 'any telemetry'],
+    ['all', 'all telemetry']
+  ]);
+  this.selects.key = new KeySelect(this.config, this.selects.object, this.conditionManager);
+  this.selects.operation = new OperationSelect(
+    this.config,
+    this.selects.key,
+    this.conditionManager,
+    function (value) {
+      onSelectChange(value, 'operation');
+    }
+  );
+
+  this.selects.object.on('change', this.handleObjectChange);
+  this.selects.key.on('change', this.handleKeyChange);
+
+  Object.values(this.selects).forEach(function (select) {
+    self.domElement.querySelector('.t-configuration').append(select.getDOM());
+  });
+
+  this.listenTo(this.domElement.querySelector('.t-value-inputs'), 'input', onValueInput);
+}
+
+Condition.prototype.getDOM = function (container) {
+  return this.domElement;
+};
+
+/**
+ * Register a callback with this condition: supported callbacks are remove, change,
+ * duplicate
+ * @param {string} event The key for the event to listen to
+ * @param {function} callback The function that this rule will invoke on this event
+ * @param {Object} context A reference to a scope to use as the context for
+ *                         context for the callback function
+ */
+Condition.prototype.on = function (event, callback, context) {
+  if (this.supportedCallbacks.includes(event)) {
+    this.eventEmitter.on(event, callback, context || this);
+  }
+};
+
+/**
+ * Hide the appropriate inputs when this is the only condition
+ */
+Condition.prototype.hideButtons = function () {
+  this.deleteButton.style.display = 'none';
+};
+
+/**
+ * Remove this condition from the configuration. Invokes any registered
+ * remove callbacks
+ */
+Condition.prototype.remove = function () {
+  this.selects.object.off('change', this.handleObjectChange);
+  this.selects.key.off('change', this.handleKeyChange);
+  this.eventEmitter.emit('remove', this.index);
+  this.destroy();
+};
+
+Condition.prototype.destroy = function () {
+  this.stopListening();
+  Object.values(this.selects).forEach(function (select) {
+    select.destroy();
+  });
+};
+
+/**
+ * Make a deep clone of this condition's configuration and invoke any duplicate
+ * callbacks with the cloned configuration and this rule's index
+ */
+Condition.prototype.duplicate = function () {
+  const sourceCondition = JSON.parse(JSON.stringify(this.config));
+  this.eventEmitter.emit('duplicate', {
+    sourceCondition: sourceCondition,
+    index: this.index
+  });
+};
+
+/**
+ * When an operation is selected, create the appropriate value inputs
+ * and add them to the view. If an operation is of type enum, create
+ * a drop-down menu instead.
+ *
+ * @param {string} operation The key of currently selected operation
+ */
+Condition.prototype.generateValueInputs = function (operation) {
+  const evaluator = this.conditionManager.getEvaluator();
+  const inputArea = this.domElement.querySelector('.t-value-inputs');
+  let inputCount;
+  let inputType;
+  let newInput;
+  let index = 0;
+  let emitChange = false;
+
+  inputArea.innerHTML = '';
+  this.valueInputs = [];
+  this.config.values = this.config.values || [];
+
+  if (evaluator.getInputCount(operation)) {
+    inputCount = evaluator.getInputCount(operation);
+    inputType = evaluator.getInputType(operation);
+
+    while (index < inputCount) {
+      if (inputType === 'select') {
+        const options = this.generateSelectOptions();
+
+        newInput = document.createElement('select');
+        newInput.appendChild(options);
+
+        emitChange = true;
+      } else {
+        const defaultValue = inputType === 'number' ? 0 : '';
+        const value = this.config.values[index] || defaultValue;
+        this.config.values[index] = value;
+
+        newInput = document.createElement('input');
+        newInput.type = `${inputType}`;
+        newInput.value = `${value}`;
+      }
+
+      this.valueInputs.push(newInput);
+      inputArea.appendChild(newInput);
+      index += 1;
+    }
+
+    if (emitChange) {
+      this.eventEmitter.emit('change', {
+        value: Number(newInput[0].options[0].value),
+        property: 'values[0]',
+        index: this.index
+      });
+    }
+  }
+};
+
+Condition.prototype.generateSelectOptions = function () {
+  let telemetryMetadata = this.conditionManager.getTelemetryMetadata(this.config.object);
+  let fragment = document.createDocumentFragment();
+
+  telemetryMetadata[this.config.key].enumerations.forEach((enumeration) => {
+    const option = document.createElement('option');
+    option.value = enumeration.value;
+    option.textContent = enumeration.string;
+    fragment.appendChild(option);
+  });
+
+  return fragment;
+};
diff --git a/src/plugins/summaryWidget/src/ConditionEvaluator.js b/src/plugins/summaryWidget/src/ConditionEvaluator.js
index 6431690a930..0d3b142c025 100644
--- a/src/plugins/summaryWidget/src/ConditionEvaluator.js
+++ b/src/plugins/summaryWidget/src/ConditionEvaluator.js
@@ -1,483 +1,482 @@
-define([], function () {
+/**
+ * Responsible for maintaining the possible operations for conditions
+ * in this widget, and evaluating the boolean value of conditions passed as
+ * input.
+ * @constructor
+ * @param {Object} subscriptionCache A cache consisting of the latest available
+ *                                   data for any telemetry sources in the widget's
+ *                                   composition.
+ * @param {Object} compositionObjs The current set of composition objects to
+ *                                 evaluate for 'any' and 'all' conditions
+ */
+export default function ConditionEvaluator(subscriptionCache, compositionObjs) {
+  this.subscriptionCache = subscriptionCache;
+  this.compositionObjs = compositionObjs;
 
-    /**
-     * Responsible for maintaining the possible operations for conditions
-     * in this widget, and evaluating the boolean value of conditions passed as
-     * input.
-     * @constructor
-     * @param {Object} subscriptionCache A cache consisting of the latest available
-     *                                   data for any telemetry sources in the widget's
-     *                                   composition.
-     * @param {Object} compositionObjs The current set of composition objects to
-     *                                 evaluate for 'any' and 'all' conditions
-     */
-    function ConditionEvaluator(subscriptionCache, compositionObjs) {
-        this.subscriptionCache = subscriptionCache;
-        this.compositionObjs = compositionObjs;
+  this.testCache = {};
+  this.useTestCache = false;
 
-        this.testCache = {};
-        this.useTestCache = false;
+  /**
+   * Maps value types to HTML input field types. These
+   * type of inputs will be generated by conditions expecting this data type
+   */
+  this.inputTypes = {
+    number: 'number',
+    string: 'text',
+    enum: 'select'
+  };
 
-        /**
-         * Maps value types to HTML input field types. These
-         * type of inputs will be generated by conditions expecting this data type
-         */
-        this.inputTypes = {
-            number: 'number',
-            string: 'text',
-            enum: 'select'
-        };
+  /**
+   * Functions to validate that the input to an operation is of the type
+   * that it expects, in order to prevent unexpected behavior. Will be
+   * invoked before the corresponding operation is executed
+   */
+  this.inputValidators = {
+    number: this.validateNumberInput,
+    string: this.validateStringInput,
+    enum: this.validateNumberInput
+  };
 
-        /**
-         * Functions to validate that the input to an operation is of the type
-         * that it expects, in order to prevent unexpected behavior. Will be
-         * invoked before the corresponding operation is executed
-         */
-        this.inputValidators = {
-            number: this.validateNumberInput,
-            string: this.validateStringInput,
-            enum: this.validateNumberInput
-        };
-
-        /**
-         * A library of operations supported by this rule evaluator. Each operation
-         * consists of the following fields:
-         * operation: a function with boolean return type to be invoked when this
-         *            operation is used. Will be called with an array of inputs
-         *            where input [0] is the telemetry value and input [1..n] are
-         *            any comparison values
-         * text: a human-readable description of this operation to populate selects
-         * appliesTo: an array of identifiers for types that operation may be used on
-         * inputCount: the number of inputs required to get any necessary comparison
-         *             values for the operation
-         * getDescription: A function returning a human-readable shorthand description of
-         *                this operation to populate the 'description' field in the rule header.
-         *                Will be invoked with an array of a condition's comparison values.
-         */
-        this.operations = {
-            equalTo: {
-                operation: function (input) {
-                    return input[0] === input[1];
-                },
-                text: 'is equal to',
-                appliesTo: ['number'],
-                inputCount: 1,
-                getDescription: function (values) {
-                    return ' == ' + values[0];
-                }
-            },
-            notEqualTo: {
-                operation: function (input) {
-                    return input[0] !== input[1];
-                },
-                text: 'is not equal to',
-                appliesTo: ['number'],
-                inputCount: 1,
-                getDescription: function (values) {
-                    return ' != ' + values[0];
-                }
-            },
-            greaterThan: {
-                operation: function (input) {
-                    return input[0] > input[1];
-                },
-                text: 'is greater than',
-                appliesTo: ['number'],
-                inputCount: 1,
-                getDescription: function (values) {
-                    return ' > ' + values[0];
-                }
-            },
-            lessThan: {
-                operation: function (input) {
-                    return input[0] < input[1];
-                },
-                text: 'is less than',
-                appliesTo: ['number'],
-                inputCount: 1,
-                getDescription: function (values) {
-                    return ' < ' + values[0];
-                }
-            },
-            greaterThanOrEq: {
-                operation: function (input) {
-                    return input[0] >= input[1];
-                },
-                text: 'is greater than or equal to',
-                appliesTo: ['number'],
-                inputCount: 1,
-                getDescription: function (values) {
-                    return ' >= ' + values[0];
-                }
-            },
-            lessThanOrEq: {
-                operation: function (input) {
-                    return input[0] <= input[1];
-                },
-                text: 'is less than or equal to',
-                appliesTo: ['number'],
-                inputCount: 1,
-                getDescription: function (values) {
-                    return ' <= ' + values[0];
-                }
-            },
-            between: {
-                operation: function (input) {
-                    return input[0] > input[1] && input[0] < input[2];
-                },
-                text: 'is between',
-                appliesTo: ['number'],
-                inputCount: 2,
-                getDescription: function (values) {
-                    return ' between ' + values[0] + ' and ' + values[1];
-                }
-            },
-            notBetween: {
-                operation: function (input) {
-                    return input[0] < input[1] || input[0] > input[2];
-                },
-                text: 'is not between',
-                appliesTo: ['number'],
-                inputCount: 2,
-                getDescription: function (values) {
-                    return ' not between ' + values[0] + ' and ' + values[1];
-                }
-            },
-            textContains: {
-                operation: function (input) {
-                    return input[0] && input[1] && input[0].includes(input[1]);
-                },
-                text: 'text contains',
-                appliesTo: ['string'],
-                inputCount: 1,
-                getDescription: function (values) {
-                    return ' contains ' + values[0];
-                }
-            },
-            textDoesNotContain: {
-                operation: function (input) {
-                    return input[0] && input[1] && !input[0].includes(input[1]);
-                },
-                text: 'text does not contain',
-                appliesTo: ['string'],
-                inputCount: 1,
-                getDescription: function (values) {
-                    return ' does not contain ' + values[0];
-                }
-            },
-            textStartsWith: {
-                operation: function (input) {
-                    return input[0].startsWith(input[1]);
-                },
-                text: 'text starts with',
-                appliesTo: ['string'],
-                inputCount: 1,
-                getDescription: function (values) {
-                    return ' starts with ' + values[0];
-                }
-            },
-            textEndsWith: {
-                operation: function (input) {
-                    return input[0].endsWith(input[1]);
-                },
-                text: 'text ends with',
-                appliesTo: ['string'],
-                inputCount: 1,
-                getDescription: function (values) {
-                    return ' ends with ' + values[0];
-                }
-            },
-            textIsExactly: {
-                operation: function (input) {
-                    return input[0] === input[1];
-                },
-                text: 'text is exactly',
-                appliesTo: ['string'],
-                inputCount: 1,
-                getDescription: function (values) {
-                    return ' is exactly ' + values[0];
-                }
-            },
-            isUndefined: {
-                operation: function (input) {
-                    return typeof input[0] === 'undefined';
-                },
-                text: 'is undefined',
-                appliesTo: ['string', 'number', 'enum'],
-                inputCount: 0,
-                getDescription: function () {
-                    return ' is undefined';
-                }
-            },
-            isDefined: {
-                operation: function (input) {
-                    return typeof input[0] !== 'undefined';
-                },
-                text: 'is defined',
-                appliesTo: ['string', 'number', 'enum'],
-                inputCount: 0,
-                getDescription: function () {
-                    return ' is defined';
-                }
-            },
-            enumValueIs: {
-                operation: function (input) {
-                    return input[0] === input[1];
-                },
-                text: 'is',
-                appliesTo: ['enum'],
-                inputCount: 1,
-                getDescription: function (values) {
-                    return ' == ' + values[0];
-                }
-            },
-            enumValueIsNot: {
-                operation: function (input) {
-                    return input[0] !== input[1];
-                },
-                text: 'is not',
-                appliesTo: ['enum'],
-                inputCount: 1,
-                getDescription: function (values) {
-                    return ' != ' + values[0];
-                }
-            }
-        };
+  /**
+   * A library of operations supported by this rule evaluator. Each operation
+   * consists of the following fields:
+   * operation: a function with boolean return type to be invoked when this
+   *            operation is used. Will be called with an array of inputs
+   *            where input [0] is the telemetry value and input [1..n] are
+   *            any comparison values
+   * text: a human-readable description of this operation to populate selects
+   * appliesTo: an array of identifiers for types that operation may be used on
+   * inputCount: the number of inputs required to get any necessary comparison
+   *             values for the operation
+   * getDescription: A function returning a human-readable shorthand description of
+   *                this operation to populate the 'description' field in the rule header.
+   *                Will be invoked with an array of a condition's comparison values.
+   */
+  this.operations = {
+    equalTo: {
+      operation: function (input) {
+        return input[0] === input[1];
+      },
+      text: 'is equal to',
+      appliesTo: ['number'],
+      inputCount: 1,
+      getDescription: function (values) {
+        return ' == ' + values[0];
+      }
+    },
+    notEqualTo: {
+      operation: function (input) {
+        return input[0] !== input[1];
+      },
+      text: 'is not equal to',
+      appliesTo: ['number'],
+      inputCount: 1,
+      getDescription: function (values) {
+        return ' != ' + values[0];
+      }
+    },
+    greaterThan: {
+      operation: function (input) {
+        return input[0] > input[1];
+      },
+      text: 'is greater than',
+      appliesTo: ['number'],
+      inputCount: 1,
+      getDescription: function (values) {
+        return ' > ' + values[0];
+      }
+    },
+    lessThan: {
+      operation: function (input) {
+        return input[0] < input[1];
+      },
+      text: 'is less than',
+      appliesTo: ['number'],
+      inputCount: 1,
+      getDescription: function (values) {
+        return ' < ' + values[0];
+      }
+    },
+    greaterThanOrEq: {
+      operation: function (input) {
+        return input[0] >= input[1];
+      },
+      text: 'is greater than or equal to',
+      appliesTo: ['number'],
+      inputCount: 1,
+      getDescription: function (values) {
+        return ' >= ' + values[0];
+      }
+    },
+    lessThanOrEq: {
+      operation: function (input) {
+        return input[0] <= input[1];
+      },
+      text: 'is less than or equal to',
+      appliesTo: ['number'],
+      inputCount: 1,
+      getDescription: function (values) {
+        return ' <= ' + values[0];
+      }
+    },
+    between: {
+      operation: function (input) {
+        return input[0] > input[1] && input[0] < input[2];
+      },
+      text: 'is between',
+      appliesTo: ['number'],
+      inputCount: 2,
+      getDescription: function (values) {
+        return ' between ' + values[0] + ' and ' + values[1];
+      }
+    },
+    notBetween: {
+      operation: function (input) {
+        return input[0] < input[1] || input[0] > input[2];
+      },
+      text: 'is not between',
+      appliesTo: ['number'],
+      inputCount: 2,
+      getDescription: function (values) {
+        return ' not between ' + values[0] + ' and ' + values[1];
+      }
+    },
+    textContains: {
+      operation: function (input) {
+        return input[0] && input[1] && input[0].includes(input[1]);
+      },
+      text: 'text contains',
+      appliesTo: ['string'],
+      inputCount: 1,
+      getDescription: function (values) {
+        return ' contains ' + values[0];
+      }
+    },
+    textDoesNotContain: {
+      operation: function (input) {
+        return input[0] && input[1] && !input[0].includes(input[1]);
+      },
+      text: 'text does not contain',
+      appliesTo: ['string'],
+      inputCount: 1,
+      getDescription: function (values) {
+        return ' does not contain ' + values[0];
+      }
+    },
+    textStartsWith: {
+      operation: function (input) {
+        return input[0].startsWith(input[1]);
+      },
+      text: 'text starts with',
+      appliesTo: ['string'],
+      inputCount: 1,
+      getDescription: function (values) {
+        return ' starts with ' + values[0];
+      }
+    },
+    textEndsWith: {
+      operation: function (input) {
+        return input[0].endsWith(input[1]);
+      },
+      text: 'text ends with',
+      appliesTo: ['string'],
+      inputCount: 1,
+      getDescription: function (values) {
+        return ' ends with ' + values[0];
+      }
+    },
+    textIsExactly: {
+      operation: function (input) {
+        return input[0] === input[1];
+      },
+      text: 'text is exactly',
+      appliesTo: ['string'],
+      inputCount: 1,
+      getDescription: function (values) {
+        return ' is exactly ' + values[0];
+      }
+    },
+    isUndefined: {
+      operation: function (input) {
+        return typeof input[0] === 'undefined';
+      },
+      text: 'is undefined',
+      appliesTo: ['string', 'number', 'enum'],
+      inputCount: 0,
+      getDescription: function () {
+        return ' is undefined';
+      }
+    },
+    isDefined: {
+      operation: function (input) {
+        return typeof input[0] !== 'undefined';
+      },
+      text: 'is defined',
+      appliesTo: ['string', 'number', 'enum'],
+      inputCount: 0,
+      getDescription: function () {
+        return ' is defined';
+      }
+    },
+    enumValueIs: {
+      operation: function (input) {
+        return input[0] === input[1];
+      },
+      text: 'is',
+      appliesTo: ['enum'],
+      inputCount: 1,
+      getDescription: function (values) {
+        return ' == ' + values[0];
+      }
+    },
+    enumValueIsNot: {
+      operation: function (input) {
+        return input[0] !== input[1];
+      },
+      text: 'is not',
+      appliesTo: ['enum'],
+      inputCount: 1,
+      getDescription: function (values) {
+        return ' != ' + values[0];
+      }
     }
+  };
+}
 
-    /**
-     * Evaluate the conditions passed in as an argument, and return the boolean
-     * value of these conditions. Available evaluation modes are 'any', which will
-     * return true if any of the conditions evaluates to true (i.e. logical OR); 'all',
-     * which returns true only if all conditions evalute to true (i.e. logical AND);
-     * or 'js', which returns the boolean value of a custom JavaScript conditional.
-     * @param {} conditions Either an array of objects with object, key, operation,
-     *                      and value fields, or a string representing a JavaScript
-     *                      condition.
-     * @param {string} mode The key of the mode to use when evaluating the conditions.
-     * @return {boolean} The boolean value of the conditions
-     */
-    ConditionEvaluator.prototype.execute = function (conditions, mode) {
-        let active = false;
-        let conditionValue;
-        let conditionDefined = false;
-        const self = this;
-        let firstRuleEvaluated = false;
-        const compositionObjs = this.compositionObjs;
-
-        if (mode === 'js') {
-            active = this.executeJavaScriptCondition(conditions);
-        } else {
-            (conditions || []).forEach(function (condition) {
-                conditionDefined = false;
-                if (condition.object === 'any') {
-                    conditionValue = false;
-                    Object.keys(compositionObjs).forEach(function (objId) {
-                        try {
-                            conditionValue = conditionValue
-                                || self.executeCondition(objId, condition.key,
-                                    condition.operation, condition.values);
-                            conditionDefined = true;
-                        } catch (e) {
-                            //ignore a malformed condition
-                        }
-                    });
-                } else if (condition.object === 'all') {
-                    conditionValue = true;
-                    Object.keys(compositionObjs).forEach(function (objId) {
-                        try {
-                            conditionValue = conditionValue
-                                && self.executeCondition(objId, condition.key,
-                                    condition.operation, condition.values);
-                            conditionDefined = true;
-                        } catch (e) {
-                            //ignore a malformed condition
-                        }
-                    });
-                } else {
-                    try {
-                        conditionValue = self.executeCondition(condition.object, condition.key,
-                            condition.operation, condition.values);
-                        conditionDefined = true;
-                    } catch (e) {
-                        //ignore malformed condition
-                    }
-                }
+/**
+ * Evaluate the conditions passed in as an argument, and return the boolean
+ * value of these conditions. Available evaluation modes are 'any', which will
+ * return true if any of the conditions evaluates to true (i.e. logical OR); 'all',
+ * which returns true only if all conditions evalute to true (i.e. logical AND);
+ * or 'js', which returns the boolean value of a custom JavaScript conditional.
+ * @param {} conditions Either an array of objects with object, key, operation,
+ *                      and value fields, or a string representing a JavaScript
+ *                      condition.
+ * @param {string} mode The key of the mode to use when evaluating the conditions.
+ * @return {boolean} The boolean value of the conditions
+ */
+ConditionEvaluator.prototype.execute = function (conditions, mode) {
+  let active = false;
+  let conditionValue;
+  let conditionDefined = false;
+  const self = this;
+  let firstRuleEvaluated = false;
+  const compositionObjs = this.compositionObjs;
 
-                if (conditionDefined) {
-                    active = (mode === 'all' && !firstRuleEvaluated ? true : active);
-                    firstRuleEvaluated = true;
-                    if (mode === 'any') {
-                        active = active || conditionValue;
-                    } else if (mode === 'all') {
-                        active = active && conditionValue;
-                    }
-                }
-            });
+  if (mode === 'js') {
+    active = this.executeJavaScriptCondition(conditions);
+  } else {
+    (conditions || []).forEach(function (condition) {
+      conditionDefined = false;
+      if (condition.object === 'any') {
+        conditionValue = false;
+        Object.keys(compositionObjs).forEach(function (objId) {
+          try {
+            conditionValue =
+              conditionValue ||
+              self.executeCondition(objId, condition.key, condition.operation, condition.values);
+            conditionDefined = true;
+          } catch (e) {
+            //ignore a malformed condition
+          }
+        });
+      } else if (condition.object === 'all') {
+        conditionValue = true;
+        Object.keys(compositionObjs).forEach(function (objId) {
+          try {
+            conditionValue =
+              conditionValue &&
+              self.executeCondition(objId, condition.key, condition.operation, condition.values);
+            conditionDefined = true;
+          } catch (e) {
+            //ignore a malformed condition
+          }
+        });
+      } else {
+        try {
+          conditionValue = self.executeCondition(
+            condition.object,
+            condition.key,
+            condition.operation,
+            condition.values
+          );
+          conditionDefined = true;
+        } catch (e) {
+          //ignore malformed condition
         }
+      }
 
-        return active;
-    };
+      if (conditionDefined) {
+        active = mode === 'all' && !firstRuleEvaluated ? true : active;
+        firstRuleEvaluated = true;
+        if (mode === 'any') {
+          active = active || conditionValue;
+        } else if (mode === 'all') {
+          active = active && conditionValue;
+        }
+      }
+    });
+  }
 
-    /**
-     * Execute a condition defined as an object.
-     * @param {string} object The identifier of the telemetry object to retrieve data from
-     * @param {string} key The property of the telemetry object
-     * @param {string} operation The key of the operation in this ConditionEvaluator to executeCondition
-     * @param {string} values An array of comparison values to invoke the operation with
-     * @return {boolean} The value of this condition
-     */
-    ConditionEvaluator.prototype.executeCondition = function (object, key, operation, values) {
-        const cache = (this.useTestCache ? this.testCache : this.subscriptionCache);
-        let telemetryValue;
-        let op;
-        let input;
-        let validator;
+  return active;
+};
 
-        if (cache[object] && typeof cache[object][key] !== 'undefined') {
-            let value = cache[object][key];
-            telemetryValue = [isNaN(Number(value)) ? value : Number(value)];
-        }
+/**
+ * Execute a condition defined as an object.
+ * @param {string} object The identifier of the telemetry object to retrieve data from
+ * @param {string} key The property of the telemetry object
+ * @param {string} operation The key of the operation in this ConditionEvaluator to executeCondition
+ * @param {string} values An array of comparison values to invoke the operation with
+ * @return {boolean} The value of this condition
+ */
+ConditionEvaluator.prototype.executeCondition = function (object, key, operation, values) {
+  const cache = this.useTestCache ? this.testCache : this.subscriptionCache;
+  let telemetryValue;
+  let op;
+  let input;
+  let validator;
 
-        op = this.operations[operation] && this.operations[operation].operation;
-        input = telemetryValue && telemetryValue.concat(values);
-        validator = op && this.inputValidators[this.operations[operation].appliesTo[0]];
+  if (cache[object] && typeof cache[object][key] !== 'undefined') {
+    let value = cache[object][key];
+    telemetryValue = [isNaN(Number(value)) ? value : Number(value)];
+  }
 
-        if (op && input && validator) {
-            if (this.operations[operation].appliesTo.length > 1) {
-                return (this.validateNumberInput(input) || this.validateStringInput(input)) && op(input);
-            } else {
-                return validator(input) && op(input);
-            }
-        } else {
-            throw new Error('Malformed condition');
-        }
-    };
+  op = this.operations[operation] && this.operations[operation].operation;
+  input = telemetryValue && telemetryValue.concat(values);
+  validator = op && this.inputValidators[this.operations[operation].appliesTo[0]];
 
-    /**
-     * A function that returns true only if each value in its input argument is
-     * of a numerical type
-     * @param {[]} input An array of values
-     * @returns {boolean}
-     */
-    ConditionEvaluator.prototype.validateNumberInput = function (input) {
-        let valid = true;
-        input.forEach(function (value) {
-            valid = valid && (typeof value === 'number');
-        });
+  if (op && input && validator) {
+    if (this.operations[operation].appliesTo.length > 1) {
+      return (this.validateNumberInput(input) || this.validateStringInput(input)) && op(input);
+    } else {
+      return validator(input) && op(input);
+    }
+  } else {
+    throw new Error('Malformed condition');
+  }
+};
 
-        return valid;
-    };
+/**
+ * A function that returns true only if each value in its input argument is
+ * of a numerical type
+ * @param {[]} input An array of values
+ * @returns {boolean}
+ */
+ConditionEvaluator.prototype.validateNumberInput = function (input) {
+  let valid = true;
+  input.forEach(function (value) {
+    valid = valid && typeof value === 'number';
+  });
 
-    /**
-     * A function that returns true only if each value in its input argument is
-     * a string
-     * @param {[]} input An array of values
-     * @returns {boolean}
-     */
-    ConditionEvaluator.prototype.validateStringInput = function (input) {
-        let valid = true;
-        input.forEach(function (value) {
-            valid = valid && (typeof value === 'string');
-        });
+  return valid;
+};
 
-        return valid;
-    };
+/**
+ * A function that returns true only if each value in its input argument is
+ * a string
+ * @param {[]} input An array of values
+ * @returns {boolean}
+ */
+ConditionEvaluator.prototype.validateStringInput = function (input) {
+  let valid = true;
+  input.forEach(function (value) {
+    valid = valid && typeof value === 'string';
+  });
 
-    /**
-     * Get the keys of operations supported by this evaluator
-     * @return {string[]} An array of the keys of supported operations
-     */
-    ConditionEvaluator.prototype.getOperationKeys = function () {
-        return Object.keys(this.operations);
-    };
+  return valid;
+};
 
-    /**
-     * Get the human-readable text corresponding to a given operation
-     * @param {string} key The key of the operation
-     * @return {string} The text description of the operation
-     */
-    ConditionEvaluator.prototype.getOperationText = function (key) {
-        return this.operations[key].text;
-    };
+/**
+ * Get the keys of operations supported by this evaluator
+ * @return {string[]} An array of the keys of supported operations
+ */
+ConditionEvaluator.prototype.getOperationKeys = function () {
+  return Object.keys(this.operations);
+};
 
-    /**
-     * Returns true only if the given operation applies to a given type
-     * @param {string} key The key of the operation
-     * @param {string} type The value type to query
-     * @returns {boolean} True if the condition applies, false otherwise
-     */
-    ConditionEvaluator.prototype.operationAppliesTo = function (key, type) {
-        return (this.operations[key].appliesTo.includes(type));
-    };
+/**
+ * Get the human-readable text corresponding to a given operation
+ * @param {string} key The key of the operation
+ * @return {string} The text description of the operation
+ */
+ConditionEvaluator.prototype.getOperationText = function (key) {
+  return this.operations[key].text;
+};
 
-    /**
-     * Return the number of value inputs required by an operation
-     * @param {string} key The key of the operation to query
-     * @return {number}
-     */
-    ConditionEvaluator.prototype.getInputCount = function (key) {
-        if (this.operations[key]) {
-            return this.operations[key].inputCount;
-        }
-    };
+/**
+ * Returns true only if the given operation applies to a given type
+ * @param {string} key The key of the operation
+ * @param {string} type The value type to query
+ * @returns {boolean} True if the condition applies, false otherwise
+ */
+ConditionEvaluator.prototype.operationAppliesTo = function (key, type) {
+  return this.operations[key].appliesTo.includes(type);
+};
 
-    /**
-     * Return the human-readable shorthand description of the operation for a rule header
-     * @param {string} key The key of the operation to query
-     * @param {} values An array of values with which to invoke the getDescription function
-     *                  of the operation
-     * @return {string} A text description of this operation
-     */
-    ConditionEvaluator.prototype.getOperationDescription = function (key, values) {
-        if (this.operations[key]) {
-            return this.operations[key].getDescription(values);
-        }
-    };
+/**
+ * Return the number of value inputs required by an operation
+ * @param {string} key The key of the operation to query
+ * @return {number}
+ */
+ConditionEvaluator.prototype.getInputCount = function (key) {
+  if (this.operations[key]) {
+    return this.operations[key].inputCount;
+  }
+};
 
-    /**
-     * Return the HTML input type associated with a given operation
-     * @param {string} key The key of the operation to query
-     * @return {string} The key for an HTML5 input type
-     */
-    ConditionEvaluator.prototype.getInputType = function (key) {
-        let type;
-        if (this.operations[key]) {
-            type = this.operations[key].appliesTo[0];
-        }
+/**
+ * Return the human-readable shorthand description of the operation for a rule header
+ * @param {string} key The key of the operation to query
+ * @param {} values An array of values with which to invoke the getDescription function
+ *                  of the operation
+ * @return {string} A text description of this operation
+ */
+ConditionEvaluator.prototype.getOperationDescription = function (key, values) {
+  if (this.operations[key]) {
+    return this.operations[key].getDescription(values);
+  }
+};
 
-        if (this.inputTypes[type]) {
-            return this.inputTypes[type];
-        }
-    };
+/**
+ * Return the HTML input type associated with a given operation
+ * @param {string} key The key of the operation to query
+ * @return {string} The key for an HTML5 input type
+ */
+ConditionEvaluator.prototype.getInputType = function (key) {
+  let type;
+  if (this.operations[key]) {
+    type = this.operations[key].appliesTo[0];
+  }
 
-    /**
-     * Returns the HTML input type associated with a value type
-     * @param {string} dataType The JavaScript value type
-     * @return {string} The key for an HTML5 input type
-     */
-    ConditionEvaluator.prototype.getInputTypeById = function (dataType) {
-        return this.inputTypes[dataType];
-    };
+  if (this.inputTypes[type]) {
+    return this.inputTypes[type];
+  }
+};
 
-    /**
-     * Set the test data cache used by this rule evaluator
-     * @param {object} testCache A mock cache following the format of the real
-     *                           subscription cache
-     */
-    ConditionEvaluator.prototype.setTestDataCache = function (testCache) {
-        this.testCache = testCache;
-    };
+/**
+ * Returns the HTML input type associated with a value type
+ * @param {string} dataType The JavaScript value type
+ * @return {string} The key for an HTML5 input type
+ */
+ConditionEvaluator.prototype.getInputTypeById = function (dataType) {
+  return this.inputTypes[dataType];
+};
 
-    /**
-     * Have this RuleEvaluator pull data values from the provided test cache
-     * instead of its actual subscription cache when evaluating. If invoked with true,
-     * will use the test cache; otherwise, will use the subscription cache
-     * @param {boolean} useTestData Boolean flag
-     */
-    ConditionEvaluator.prototype.useTestData = function (useTestCache) {
-        this.useTestCache = useTestCache;
-    };
+/**
+ * Set the test data cache used by this rule evaluator
+ * @param {object} testCache A mock cache following the format of the real
+ *                           subscription cache
+ */
+ConditionEvaluator.prototype.setTestDataCache = function (testCache) {
+  this.testCache = testCache;
+};
 
-    return ConditionEvaluator;
-});
+/**
+ * Have this RuleEvaluator pull data values from the provided test cache
+ * instead of its actual subscription cache when evaluating. If invoked with true,
+ * will use the test cache; otherwise, will use the subscription cache
+ * @param {boolean} useTestData Boolean flag
+ */
+ConditionEvaluator.prototype.useTestData = function (useTestCache) {
+  this.useTestCache = useTestCache;
+};
diff --git a/src/plugins/summaryWidget/src/ConditionManager.js b/src/plugins/summaryWidget/src/ConditionManager.js
index ff90bc7bc72..dc453dafddd 100644
--- a/src/plugins/summaryWidget/src/ConditionManager.js
+++ b/src/plugins/summaryWidget/src/ConditionManager.js
@@ -1,382 +1,383 @@
-define ([
-    './ConditionEvaluator',
-    'objectUtils',
-    'EventEmitter',
-    'zepto',
-    'lodash'
-], function (
-    ConditionEvaluator,
-    objectUtils,
-    EventEmitter,
-    $,
-    _
-) {
-
-    /**
-     * Provides a centralized content manager for conditions in the summary widget.
-     * Loads and caches composition and telemetry subscriptions, and maintains a
-     * {ConditionEvaluator} instance to handle evaluation
-     * @constructor
-     * @param {Object} domainObject the Summary Widget domain object
-     * @param {MCT} openmct an MCT instance
-     */
-    function ConditionManager(domainObject, openmct) {
-        this.domainObject = domainObject;
-        this.openmct = openmct;
-
-        this.composition = this.openmct.composition.get(this.domainObject);
-        this.compositionObjs = {};
-        this.eventEmitter = new EventEmitter();
-        this.supportedCallbacks = ['add', 'remove', 'load', 'metadata', 'receiveTelemetry'];
-
-        this.keywordLabels = {
-            any: 'any Telemetry',
-            all: 'all Telemetry'
-        };
-
-        this.telemetryMetadataById = {
-            any: {},
-            all: {}
-        };
-
-        this.telemetryTypesById = {
-            any: {},
-            all: {}
-        };
-
-        this.subscriptions = {};
-        this.subscriptionCache = {};
-        this.loadComplete = false;
-        this.metadataLoadComplete = false;
-        this.evaluator = new ConditionEvaluator(this.subscriptionCache, this.compositionObjs);
-
-        this.composition.on('add', this.onCompositionAdd, this);
-        this.composition.on('remove', this.onCompositionRemove, this);
-        this.composition.on('load', this.onCompositionLoad, this);
-
-        this.composition.load();
+import EventEmitter from 'EventEmitter';
+import _ from 'lodash';
+import { makeKeyString } from 'objectUtils';
+
+import ConditionEvaluator from './ConditionEvaluator.js';
+
+/**
+ * Provides a centralized content manager for conditions in the summary widget.
+ * Loads and caches composition and telemetry subscriptions, and maintains a
+ * {ConditionEvaluator} instance to handle evaluation
+ * @constructor
+ * @param {Object} domainObject the Summary Widget domain object
+ * @param {MCT} openmct an MCT instance
+ */
+export default function ConditionManager(domainObject, openmct) {
+  this.domainObject = domainObject;
+  this.openmct = openmct;
+
+  this.composition = this.openmct.composition.get(this.domainObject);
+  this.compositionObjs = {};
+  this.eventEmitter = new EventEmitter();
+  this.supportedCallbacks = ['add', 'remove', 'load', 'metadata', 'receiveTelemetry'];
+
+  this.keywordLabels = {
+    any: 'any Telemetry',
+    all: 'all Telemetry'
+  };
+
+  this.telemetryMetadataById = {
+    any: {},
+    all: {}
+  };
+
+  this.telemetryTypesById = {
+    any: {},
+    all: {}
+  };
+
+  this.subscriptions = {};
+  this.subscriptionCache = {};
+  this.loadComplete = false;
+  this.metadataLoadComplete = false;
+  this.evaluator = new ConditionEvaluator(this.subscriptionCache, this.compositionObjs);
+
+  this.composition.on('add', this.onCompositionAdd, this);
+  this.composition.on('remove', this.onCompositionRemove, this);
+  this.composition.on('load', this.onCompositionLoad, this);
+
+  this.composition.load();
+}
+
+/**
+ * Register a callback with this ConditionManager: supported callbacks are add
+ * remove, load, metadata, and receiveTelemetry
+ * @param {string} event The key for the event to listen to
+ * @param {function} callback The function that this rule will invoke on this event
+ * @param {Object} context A reference to a scope to use as the context for
+ *                         context for the callback function
+ */
+ConditionManager.prototype.on = function (event, callback, context) {
+  if (this.supportedCallbacks.includes(event)) {
+    this.eventEmitter.on(event, callback, context || this);
+  } else {
+    throw (
+      event + ' is not a supported callback. Supported callbacks are ' + this.supportedCallbacks
+    );
+  }
+};
+
+/**
+ * Given a set of rules, execute the conditions associated with each rule
+ * and return the id of the last rule whose conditions evaluate to true
+ * @param {string[]} ruleOrder An array of rule IDs indicating what order They
+ *                             should be evaluated in
+ * @param {Object} rules An object mapping rule IDs to rule configurations
+ * @return {string} The ID of the rule to display on the widget
+ */
+ConditionManager.prototype.executeRules = function (ruleOrder, rules) {
+  const self = this;
+  let activeId = ruleOrder[0];
+  let rule;
+  let conditions;
+
+  ruleOrder.forEach(function (ruleId) {
+    rule = rules[ruleId];
+    conditions = rule.getProperty('conditions');
+    if (self.evaluator.execute(conditions, rule.getProperty('trigger'))) {
+      activeId = ruleId;
+    }
+  });
+
+  return activeId;
+};
+
+/**
+ * Adds a field to the list of all available metadata fields in the widget
+ * @param {Object} metadatum An object representing a set of telemetry metadata
+ */
+ConditionManager.prototype.addGlobalMetadata = function (metadatum) {
+  this.telemetryMetadataById.any[metadatum.key] = metadatum;
+  this.telemetryMetadataById.all[metadatum.key] = metadatum;
+};
+
+/**
+ * Adds a field to the list of properties for globally available metadata
+ * @param {string} key The key for the property this type applies to
+ * @param {string} type The type that should be associated with this property
+ */
+ConditionManager.prototype.addGlobalPropertyType = function (key, type) {
+  this.telemetryTypesById.any[key] = type;
+  this.telemetryTypesById.all[key] = type;
+};
+
+/**
+ * Given a telemetry-producing domain object, associate each of it's telemetry
+ * fields with a type, parsing from historical data.
+ * @param {Object} object a domain object that can produce telemetry
+ * @return {Promise} A promise that resolves when a telemetry request
+ *                   has completed and types have been parsed
+ */
+ConditionManager.prototype.parsePropertyTypes = function (object) {
+  const objectId = makeKeyString(object.identifier);
+
+  this.telemetryTypesById[objectId] = {};
+  Object.values(this.telemetryMetadataById[objectId]).forEach(function (valueMetadata) {
+    let type;
+    if (valueMetadata.enumerations !== undefined) {
+      type = 'enum';
+    } else if (Object.prototype.hasOwnProperty.call(valueMetadata.hints, 'range')) {
+      type = 'number';
+    } else if (Object.prototype.hasOwnProperty.call(valueMetadata.hints, 'domain')) {
+      type = 'number';
+    } else if (valueMetadata.key === 'name') {
+      type = 'string';
+    } else {
+      type = 'string';
     }
 
-    /**
-     * Register a callback with this ConditionManager: supported callbacks are add
-     * remove, load, metadata, and receiveTelemetry
-     * @param {string} event The key for the event to listen to
-     * @param {function} callback The function that this rule will envoke on this event
-     * @param {Object} context A reference to a scope to use as the context for
-     *                         context for the callback function
-     */
-    ConditionManager.prototype.on = function (event, callback, context) {
-        if (this.supportedCallbacks.includes(event)) {
-            this.eventEmitter.on(event, callback, context || this);
-        } else {
-            throw event + " is not a supported callback. Supported callbacks are " + this.supportedCallbacks;
-        }
-    };
-
-    /**
-     * Given a set of rules, execute the conditions associated with each rule
-     * and return the id of the last rule whose conditions evaluate to true
-     * @param {string[]} ruleOrder An array of rule IDs indicating what order They
-     *                             should be evaluated in
-     * @param {Object} rules An object mapping rule IDs to rule configurations
-     * @return {string} The ID of the rule to display on the widget
-     */
-    ConditionManager.prototype.executeRules = function (ruleOrder, rules) {
-        const self = this;
-        let activeId = ruleOrder[0];
-        let rule;
-        let conditions;
-
-        ruleOrder.forEach(function (ruleId) {
-            rule = rules[ruleId];
-            conditions = rule.getProperty('conditions');
-            if (self.evaluator.execute(conditions, rule.getProperty('trigger'))) {
-                activeId = ruleId;
-            }
-        });
-
-        return activeId;
-    };
-
-    /**
-     * Adds a field to the list of all available metadata fields in the widget
-     * @param {Object} metadatum An object representing a set of telemetry metadata
-     */
-    ConditionManager.prototype.addGlobalMetadata = function (metadatum) {
-        this.telemetryMetadataById.any[metadatum.key] = metadatum;
-        this.telemetryMetadataById.all[metadatum.key] = metadatum;
-    };
-
-    /**
-     * Adds a field to the list of properties for globally available metadata
-     * @param {string} key The key for the property this type applies to
-     * @param {string} type The type that should be associated with this property
-     */
-    ConditionManager.prototype.addGlobalPropertyType = function (key, type) {
-        this.telemetryTypesById.any[key] = type;
-        this.telemetryTypesById.all[key] = type;
-    };
-
-    /**
-     * Given a telemetry-producing domain object, associate each of it's telemetry
-     * fields with a type, parsing from historical data.
-     * @param {Object} object a domain object that can produce telemetry
-     * @return {Promise} A promise that resolves when a telemetry request
-     *                   has completed and types have been parsed
-     */
-    ConditionManager.prototype.parsePropertyTypes = function (object) {
-        const objectId = objectUtils.makeKeyString(object.identifier);
-
-        this.telemetryTypesById[objectId] = {};
-        Object.values(this.telemetryMetadataById[objectId]).forEach(function (valueMetadata) {
-            let type;
-            if (valueMetadata.enumerations !== undefined) {
-                type = 'enum';
-            } else if (Object.prototype.hasOwnProperty.call(valueMetadata.hints, 'range')) {
-                type = 'number';
-            } else if (Object.prototype.hasOwnProperty.call(valueMetadata.hints, 'domain')) {
-                type = 'number';
-            } else if (valueMetadata.key === 'name') {
-                type = 'string';
-            } else {
-                type = 'string';
-            }
-
-            this.telemetryTypesById[objectId][valueMetadata.key] = type;
-            this.addGlobalPropertyType(valueMetadata.key, type);
-        }, this);
-    };
-
-    /**
-     * Parse types of telemetry fields from all composition objects; used internally
-     * to perform a block types load once initial composition load has completed
-     * @return {Promise} A promise that resolves when all metadata has been loaded
-     *                   and property types parsed
-     */
-    ConditionManager.prototype.parseAllPropertyTypes = function () {
-        Object.values(this.compositionObjs).forEach(this.parsePropertyTypes, this);
-        this.metadataLoadComplete = true;
-        this.eventEmitter.emit('metadata');
-    };
-
-    /**
-     * Invoked when a telemtry subscription yields new data. Updates the LAD
-     * cache and invokes any registered receiveTelemetry callbacks
-     * @param {string} objId The key associated with the telemetry source
-     * @param {datum} datum The new data from the telemetry source
-     * @private
-     */
-    ConditionManager.prototype.handleSubscriptionCallback = function (objId, telemetryDatum) {
-        this.subscriptionCache[objId] = this.createNormalizedDatum(objId, telemetryDatum);
-        this.eventEmitter.emit('receiveTelemetry');
-    };
-
-    ConditionManager.prototype.createNormalizedDatum = function (objId, telemetryDatum) {
-        return Object.values(this.telemetryMetadataById[objId]).reduce((normalizedDatum, metadatum) => {
-            normalizedDatum[metadatum.key] = telemetryDatum[metadatum.source];
-
-            return normalizedDatum;
-        }, {});
-    };
-
-    /**
-     * Event handler for an add event in this Summary Widget's composition.
-     * Sets up subscription handlers and parses its property types.
-     * @param {Object} obj The newly added domain object
-     * @private
-     */
-    ConditionManager.prototype.onCompositionAdd = function (obj) {
-        let compositionKeys;
-        const telemetryAPI = this.openmct.telemetry;
-        const objId = objectUtils.makeKeyString(obj.identifier);
-        let telemetryMetadata;
-        const self = this;
-
-        if (telemetryAPI.isTelemetryObject(obj)) {
-            self.compositionObjs[objId] = obj;
-            self.telemetryMetadataById[objId] = {};
-
-            // FIXME: this should just update based on listener.
-            compositionKeys = self.domainObject.composition.map(objectUtils.makeKeyString);
-            if (!compositionKeys.includes(objId)) {
-                self.domainObject.composition.push(obj.identifier);
-            }
-
-            telemetryMetadata = telemetryAPI.getMetadata(obj).values();
-            telemetryMetadata.forEach(function (metaDatum) {
-                self.telemetryMetadataById[objId][metaDatum.key] = metaDatum;
-                self.addGlobalMetadata(metaDatum);
-            });
-
-            self.subscriptionCache[objId] = {};
-            self.subscriptions[objId] = telemetryAPI.subscribe(obj, function (datum) {
-                self.handleSubscriptionCallback(objId, datum);
-            }, {});
-            telemetryAPI.request(obj, {
-                strategy: 'latest',
-                size: 1
-            })
-                .then(function (results) {
-                    if (results && results.length) {
-                        self.handleSubscriptionCallback(objId, results[results.length - 1]);
-                    }
-                });
-
-            /**
-             * if this is the initial load, parsing property types will be postponed
-             * until all composition objects have been loaded
-             */
-            if (self.loadComplete) {
-                self.parsePropertyTypes(obj);
-            }
-
-            self.eventEmitter.emit('add', obj);
-
-            $('.w-summary-widget').removeClass('s-status-no-data');
-        }
-    };
-
-    /**
-     * Invoked on a remove event in this Summary Widget's compostion. Removes
-     * the object from the local composition, and untracks it
-     * @param {object} identifier The identifier of the object to be removed
-     * @private
-     */
-    ConditionManager.prototype.onCompositionRemove = function (identifier) {
-        const objectId = objectUtils.makeKeyString(identifier);
-        // FIXME: this should just update by listener.
-        _.remove(this.domainObject.composition, function (id) {
-            return id.key === identifier.key
-                && id.namespace === identifier.namespace;
-        });
-        delete this.compositionObjs[objectId];
-        delete this.subscriptionCache[objectId];
-        this.subscriptions[objectId](); //unsubscribe from telemetry source
-        delete this.subscriptions[objectId];
-        this.eventEmitter.emit('remove', identifier);
-
-        if (_.isEmpty(this.compositionObjs)) {
-            $('.w-summary-widget').addClass('s-status-no-data');
-        }
-    };
-
-    /**
-     * Invoked when the Summary Widget's composition finishes its initial load.
-     * Invokes any registered load callbacks, does a block load of all metadata,
-     * and then invokes any registered metadata load callbacks.
-     * @private
-     */
-    ConditionManager.prototype.onCompositionLoad = function () {
-        this.loadComplete = true;
-        this.eventEmitter.emit('load');
-        this.parseAllPropertyTypes();
-    };
-
-    /**
-     * Returns the currently tracked telemetry sources
-     * @return {Object} An object mapping object keys to domain objects
-     */
-    ConditionManager.prototype.getComposition = function () {
-        return this.compositionObjs;
-    };
-
-    /**
-     * Get the human-readable name of a domain object from its key
-     * @param {string} id The key of the domain object
-     * @return {string} The human-readable name of the domain object
-     */
-    ConditionManager.prototype.getObjectName = function (id) {
-        let name;
-
-        if (this.keywordLabels[id]) {
-            name = this.keywordLabels[id];
-        } else if (this.compositionObjs[id]) {
-            name = this.compositionObjs[id].name;
-        }
-
-        return name;
-    };
-
-    /**
-     * Returns the property metadata associated with a given telemetry source
-     * @param {string} id The key associated with the domain object
-     * @return {Object} Returns an object with fields representing each telemetry field
-     */
-    ConditionManager.prototype.getTelemetryMetadata = function (id) {
-        return this.telemetryMetadataById[id];
-    };
-
-    /**
-     * Returns the type associated with a telemtry data field of a particular domain
-     * object
-     * @param {string} id The key associated with the domain object
-     * @param {string} property The telemetry field key to retrieve the type of
-     * @return {string} The type name
-     */
-    ConditionManager.prototype.getTelemetryPropertyType = function (id, property) {
-        if (this.telemetryTypesById[id]) {
-            return this.telemetryTypesById[id][property];
-        }
-    };
+    this.telemetryTypesById[objectId][valueMetadata.key] = type;
+    this.addGlobalPropertyType(valueMetadata.key, type);
+  }, this);
+};
+
+/**
+ * Parse types of telemetry fields from all composition objects; used internally
+ * to perform a block types load once initial composition load has completed
+ * @return {Promise} A promise that resolves when all metadata has been loaded
+ *                   and property types parsed
+ */
+ConditionManager.prototype.parseAllPropertyTypes = function () {
+  Object.values(this.compositionObjs).forEach(this.parsePropertyTypes, this);
+  this.metadataLoadComplete = true;
+  this.eventEmitter.emit('metadata');
+};
+
+/**
+ * Invoked when a telemetry subscription yields new data. Updates the LAD
+ * cache and invokes any registered receiveTelemetry callbacks
+ * @param {string} objId The key associated with the telemetry source
+ * @param {datum} datum The new data from the telemetry source
+ * @private
+ */
+ConditionManager.prototype.handleSubscriptionCallback = function (objId, telemetryDatum) {
+  this.subscriptionCache[objId] = this.createNormalizedDatum(objId, telemetryDatum);
+  this.eventEmitter.emit('receiveTelemetry');
+};
+
+ConditionManager.prototype.createNormalizedDatum = function (objId, telemetryDatum) {
+  return Object.values(this.telemetryMetadataById[objId]).reduce((normalizedDatum, metadatum) => {
+    normalizedDatum[metadatum.key] = telemetryDatum[metadatum.source];
+
+    return normalizedDatum;
+  }, {});
+};
+
+/**
+ * Event handler for an add event in this Summary Widget's composition.
+ * Sets up subscription handlers and parses its property types.
+ * @param {Object} obj The newly added domain object
+ * @private
+ */
+ConditionManager.prototype.onCompositionAdd = function (obj) {
+  let compositionKeys;
+  const telemetryAPI = this.openmct.telemetry;
+  const objId = makeKeyString(obj.identifier);
+  let telemetryMetadata;
+  const self = this;
+
+  if (telemetryAPI.isTelemetryObject(obj)) {
+    self.compositionObjs[objId] = obj;
+    self.telemetryMetadataById[objId] = {};
+
+    // FIXME: this should just update based on listener.
+    compositionKeys = self.domainObject.composition.map(makeKeyString);
+    if (!compositionKeys.includes(objId)) {
+      self.domainObject.composition.push(obj.identifier);
+    }
 
-    /**
-     * Returns the human-readable name of a telemtry data field of a particular domain
-     * object
-     * @param {string} id The key associated with the domain object
-     * @param {string} property The telemetry field key to retrieve the type of
-     * @return {string} The telemetry field name
-     */
-    ConditionManager.prototype.getTelemetryPropertyName = function (id, property) {
-        if (this.telemetryMetadataById[id] && this.telemetryMetadataById[id][property]) {
-            return this.telemetryMetadataById[id][property].name;
+    telemetryMetadata = telemetryAPI.getMetadata(obj).values();
+    telemetryMetadata.forEach(function (metaDatum) {
+      self.telemetryMetadataById[objId][metaDatum.key] = metaDatum;
+      self.addGlobalMetadata(metaDatum);
+    });
+
+    self.subscriptionCache[objId] = {};
+    self.subscriptions[objId] = telemetryAPI.subscribe(
+      obj,
+      function (datum) {
+        self.handleSubscriptionCallback(objId, datum);
+      },
+      {}
+    );
+    telemetryAPI
+      .request(obj, {
+        strategy: 'latest',
+        size: 1
+      })
+      .then(function (results) {
+        if (results && results.length) {
+          self.handleSubscriptionCallback(objId, results[results.length - 1]);
         }
-    };
+      });
 
     /**
-     * Returns the {ConditionEvaluator} instance associated with this condition
-     * manager
-     * @return {ConditionEvaluator}
+     * if this is the initial load, parsing property types will be postponed
+     * until all composition objects have been loaded
      */
-    ConditionManager.prototype.getEvaluator = function () {
-        return this.evaluator;
-    };
-
-    /**
-     * Returns true if the initial compostion load has completed
-     * @return {boolean}
-     */
-    ConditionManager.prototype.loadCompleted = function () {
-        return this.loadComplete;
-    };
-
-    /**
-     * Returns true if the initial block metadata load has completed
-     */
-    ConditionManager.prototype.metadataLoadCompleted = function () {
-        return this.metadataLoadComplete;
-    };
+    if (self.loadComplete) {
+      self.parsePropertyTypes(obj);
+    }
 
-    /**
-     * Triggers the telemetryRecieve callbacks registered to this ConditionManager,
-     * used by the {TestDataManager} to force a rule evaluation when test data is
-     * enabled
-     */
-    ConditionManager.prototype.triggerTelemetryCallback = function () {
-        this.eventEmitter.emit('receiveTelemetry');
-    };
+    self.eventEmitter.emit('add', obj);
 
-    /**
-     * Unsubscribe from all registered telemetry sources and unregister all event
-     * listeners registered with the Open MCT APIs
-     */
-    ConditionManager.prototype.destroy = function () {
-        Object.values(this.subscriptions).forEach(function (unsubscribeFunction) {
-            unsubscribeFunction();
-        });
-        this.composition.off('add', this.onCompositionAdd, this);
-        this.composition.off('remove', this.onCompositionRemove, this);
-        this.composition.off('load', this.onCompositionLoad, this);
-    };
-
-    return ConditionManager;
-});
+    const summaryWidget = document.querySelector('.w-summary-widget');
+    if (summaryWidget) {
+      summaryWidget.classList.remove('s-status-no-data');
+    }
+  }
+};
+
+/**
+ * Invoked on a remove event in this Summary Widget's composition. Removes
+ * the object from the local composition, and untracks it
+ * @param {object} identifier The identifier of the object to be removed
+ * @private
+ */
+ConditionManager.prototype.onCompositionRemove = function (identifier) {
+  const objectId = makeKeyString(identifier);
+  // FIXME: this should just update by listener.
+  _.remove(this.domainObject.composition, function (id) {
+    return id.key === identifier.key && id.namespace === identifier.namespace;
+  });
+  delete this.compositionObjs[objectId];
+  delete this.subscriptionCache[objectId];
+  this.subscriptions[objectId](); //unsubscribe from telemetry source
+  delete this.subscriptions[objectId];
+  this.eventEmitter.emit('remove', identifier);
+
+  if (_.isEmpty(this.compositionObjs)) {
+    const summaryWidget = document.querySelector('.w-summary-widget');
+    if (summaryWidget) {
+      summaryWidget.classList.add('s-status-no-data');
+    }
+  }
+};
+
+/**
+ * Invoked when the Summary Widget's composition finishes its initial load.
+ * Invokes any registered load callbacks, does a block load of all metadata,
+ * and then invokes any registered metadata load callbacks.
+ * @private
+ */
+ConditionManager.prototype.onCompositionLoad = function () {
+  this.loadComplete = true;
+  this.eventEmitter.emit('load');
+  this.parseAllPropertyTypes();
+};
+
+/**
+ * Returns the currently tracked telemetry sources
+ * @return {Object} An object mapping object keys to domain objects
+ */
+ConditionManager.prototype.getComposition = function () {
+  return this.compositionObjs;
+};
+
+/**
+ * Get the human-readable name of a domain object from its key
+ * @param {string} id The key of the domain object
+ * @return {string} The human-readable name of the domain object
+ */
+ConditionManager.prototype.getObjectName = function (id) {
+  let name;
+
+  if (this.keywordLabels[id]) {
+    name = this.keywordLabels[id];
+  } else if (this.compositionObjs[id]) {
+    name = this.compositionObjs[id].name;
+  }
+
+  return name;
+};
+
+/**
+ * Returns the property metadata associated with a given telemetry source
+ * @param {string} id The key associated with the domain object
+ * @return {Object} Returns an object with fields representing each telemetry field
+ */
+ConditionManager.prototype.getTelemetryMetadata = function (id) {
+  return this.telemetryMetadataById[id];
+};
+
+/**
+ * Returns the type associated with a telemetry data field of a particular domain
+ * object
+ * @param {string} id The key associated with the domain object
+ * @param {string} property The telemetry field key to retrieve the type of
+ * @return {string} The type name
+ */
+ConditionManager.prototype.getTelemetryPropertyType = function (id, property) {
+  if (this.telemetryTypesById[id]) {
+    return this.telemetryTypesById[id][property];
+  }
+};
+
+/**
+ * Returns the human-readable name of a telemetry data field of a particular domain
+ * object
+ * @param {string} id The key associated with the domain object
+ * @param {string} property The telemetry field key to retrieve the type of
+ * @return {string} The telemetry field name
+ */
+ConditionManager.prototype.getTelemetryPropertyName = function (id, property) {
+  if (this.telemetryMetadataById[id] && this.telemetryMetadataById[id][property]) {
+    return this.telemetryMetadataById[id][property].name;
+  }
+};
+
+/**
+ * Returns the {ConditionEvaluator} instance associated with this condition
+ * manager
+ * @return {ConditionEvaluator}
+ */
+ConditionManager.prototype.getEvaluator = function () {
+  return this.evaluator;
+};
+
+/**
+ * Returns true if the initial composition load has completed
+ * @return {boolean}
+ */
+ConditionManager.prototype.loadCompleted = function () {
+  return this.loadComplete;
+};
+
+/**
+ * Returns true if the initial block metadata load has completed
+ */
+ConditionManager.prototype.metadataLoadCompleted = function () {
+  return this.metadataLoadComplete;
+};
+
+/**
+ * Triggers the telemetryReceive callbacks registered to this ConditionManager,
+ * used by the {TestDataManager} to force a rule evaluation when test data is
+ * enabled
+ */
+ConditionManager.prototype.triggerTelemetryCallback = function () {
+  this.eventEmitter.emit('receiveTelemetry');
+};
+
+/**
+ * Unsubscribe from all registered telemetry sources and unregister all event
+ * listeners registered with the Open MCT APIs
+ */
+ConditionManager.prototype.destroy = function () {
+  Object.values(this.subscriptions).forEach(function (unsubscribeFunction) {
+    unsubscribeFunction();
+  });
+  this.composition.off('add', this.onCompositionAdd, this);
+  this.composition.off('remove', this.onCompositionRemove, this);
+  this.composition.off('load', this.onCompositionLoad, this);
+};
diff --git a/src/plugins/summaryWidget/src/Rule.js b/src/plugins/summaryWidget/src/Rule.js
index d9217f0e0cc..dc10d7f6466 100644
--- a/src/plugins/summaryWidget/src/Rule.js
+++ b/src/plugins/summaryWidget/src/Rule.js
@@ -1,497 +1,530 @@
-define([
-    '../res/ruleTemplate.html',
-    './Condition',
-    './input/ColorPalette',
-    './input/IconPalette',
-    './eventHelpers',
-    'EventEmitter',
-    'lodash',
-    'zepto'
-], function (
-    ruleTemplate,
-    Condition,
-    ColorPalette,
-    IconPalette,
-    eventHelpers,
-    EventEmitter,
-    _,
-    $
+import EventEmitter from 'EventEmitter';
+import _ from 'lodash';
+
+import * as templateHelpers from '../../../utils/template/templateHelpers.js';
+import ruleTemplate from '../res/ruleTemplate.html';
+import Condition from './Condition.js';
+import eventHelpers from './eventHelpers.js';
+import ColorPalette from './input/ColorPalette.js';
+import IconPalette from './input/IconPalette.js';
+
+/**
+ * An object representing a summary widget rule. Maintains a set of text
+ * and css properties for output, and a set of conditions for configuring
+ * when the rule will be applied to the summary widget.
+ * @constructor
+ * @param {Object} ruleConfig A JavaScript object representing the configuration of this rule
+ * @param {Object} domainObject The Summary Widget domain object which contains this rule
+ * @param {MCT} openmct An MCT instance
+ * @param {ConditionManager} conditionManager A ConditionManager instance
+ * @param {WidgetDnD} widgetDnD A WidgetDnD instance to handle dragging and dropping rules
+ * @param {element} container The DOM element which contains this summary widget
+ */
+export default function Rule(
+  ruleConfig,
+  domainObject,
+  openmct,
+  conditionManager,
+  widgetDnD,
+  container
 ) {
-    /**
-     * An object representing a summary widget rule. Maintains a set of text
-     * and css properties for output, and a set of conditions for configuring
-     * when the rule will be applied to the summary widget.
-     * @constructor
-     * @param {Object} ruleConfig A JavaScript object representing the configuration of this rule
-     * @param {Object} domainObject The Summary Widget domain object which contains this rule
-     * @param {MCT} openmct An MCT instance
-     * @param {ConditionManager} conditionManager A ConditionManager instance
-     * @param {WidgetDnD} widgetDnD A WidgetDnD instance to handle dragging and dropping rules
-     * @param {element} container The DOM element which cotains this summary widget
-     */
-    function Rule(ruleConfig, domainObject, openmct, conditionManager, widgetDnD, container) {
-        eventHelpers.extend(this);
-        const self = this;
-        const THUMB_ICON_CLASS = 'c-sw__icon js-sw__icon';
-
-        this.config = ruleConfig;
-        this.domainObject = domainObject;
-        this.openmct = openmct;
-        this.conditionManager = conditionManager;
-        this.widgetDnD = widgetDnD;
-        this.container = container;
-
-        this.domElement = $(ruleTemplate);
-        this.eventEmitter = new EventEmitter();
-        this.supportedCallbacks = ['remove', 'duplicate', 'change', 'conditionChange'];
-        this.conditions = [];
-        this.dragging = false;
-
-        this.remove = this.remove.bind(this);
-        this.duplicate = this.duplicate.bind(this);
-
-        this.thumbnail = $('.t-widget-thumb', this.domElement);
-        this.thumbnailIcon = $('.js-sw__icon', this.domElement);
-        this.thumbnailLabel = $('.c-sw__label', this.domElement);
-        this.title = $('.rule-title', this.domElement);
-        this.description = $('.rule-description', this.domElement);
-        this.trigger = $('.t-trigger', this.domElement);
-        this.toggleConfigButton = $('.js-disclosure', this.domElement);
-        this.configArea = $('.widget-rule-content', this.domElement);
-        this.grippy = $('.t-grippy', this.domElement);
-        this.conditionArea = $('.t-widget-rule-config', this.domElement);
-        this.jsConditionArea = $('.t-rule-js-condition-input-holder', this.domElement);
-        this.deleteButton = $('.t-delete', this.domElement);
-        this.duplicateButton = $('.t-duplicate', this.domElement);
-        this.addConditionButton = $('.add-condition', this.domElement);
-
-        /**
-         * The text inputs for this rule: any input included in this object will
-         * have the appropriate event handlers registered to it, and it's corresponding
-         * field in the domain object will be updated with its value
-         */
-        this.textInputs = {
-            name: $('.t-rule-name-input', this.domElement),
-            label: $('.t-rule-label-input', this.domElement),
-            message: $('.t-rule-message-input', this.domElement),
-            jsCondition: $('.t-rule-js-condition-input', this.domElement)
-        };
-
-        this.iconInput = new IconPalette('', container);
-        this.colorInputs = {
-            'background-color': new ColorPalette('icon-paint-bucket', container),
-            'border-color': new ColorPalette('icon-line-horz', container),
-            'color': new ColorPalette('icon-font', container)
-        };
-
-        this.colorInputs.color.toggleNullOption();
-
-        /**
-         * An onchange event handler method for this rule's icon palettes
-         * @param {string} icon The css class name corresponding to this icon
-         * @private
-         */
-        function onIconInput(icon) {
-            self.config.icon = icon;
-            self.updateDomainObject('icon', icon);
-            self.thumbnailIcon.removeClass().addClass(THUMB_ICON_CLASS + ' ' + icon);
-            self.eventEmitter.emit('change');
-        }
-
-        /**
-         * An onchange event handler method for this rule's color palettes palettes
-         * @param {string} color The color selected in the palette
-         * @param {string} property The css property which this color corresponds to
-         * @private
-         */
-        function onColorInput(color, property) {
-            self.config.style[property] = color;
-            self.thumbnail.css(property, color);
-            self.eventEmitter.emit('change');
-        }
-
-        /**
-         * Parse input text from textbox to prevent HTML Injection
-         * @param {string} msg The text to be Parsed
-         * @private
-         */
-        function encodeMsg(msg) {
-            return $('<div />').text(msg).html();
-        }
-
-        /**
-         * An onchange event handler method for this rule's trigger key
-         * @param {event} event The change event from this rule's select element
-         * @private
-         */
-        function onTriggerInput(event) {
-            const elem = event.target;
-            self.config.trigger = encodeMsg(elem.value);
-            self.generateDescription();
-            self.updateDomainObject();
-            self.refreshConditions();
-            self.eventEmitter.emit('conditionChange');
-        }
-
-        /**
-         * An onchange event handler method for this rule's text inputs
-         * @param {element} elem The input element that generated the event
-         * @param {string} inputKey The field of this rule's configuration to update
-         * @private
-         */
-        function onTextInput(elem, inputKey) {
-            const text = encodeMsg(elem.value);
-            self.config[inputKey] = text;
-            self.updateDomainObject();
-            if (inputKey === 'name') {
-                self.title.html(text);
-            } else if (inputKey === 'label') {
-                self.thumbnailLabel.html(text);
-            }
-
-            self.eventEmitter.emit('change');
-        }
-
-        /**
-         * An onchange event handler for a mousedown event that initiates a drag gesture
-         * @param {event} event A mouseup event that was registered on this rule's grippy
-         * @private
-         */
-        function onDragStart(event) {
-            $('.t-drag-indicator').each(function () {
-                // eslint-disable-next-line no-invalid-this
-                $(this).html($('.widget-rule-header', self.domElement).clone().get(0));
-            });
-            self.widgetDnD.setDragImage($('.widget-rule-header', self.domElement).clone().get(0));
-            self.widgetDnD.dragStart(self.config.id);
-            self.domElement.hide();
-        }
-
-        /**
-         * Show or hide this rule's configuration properties
-         * @private
-         */
-        function toggleConfig() {
-            self.configArea.toggleClass('expanded');
-            self.toggleConfigButton.toggleClass('c-disclosure-triangle--expanded');
-            self.config.expanded = !self.config.expanded;
-        }
-
-        $('.t-rule-label-input', this.domElement).before(this.iconInput.getDOM());
-        this.iconInput.set(self.config.icon);
-        this.iconInput.on('change', function (value) {
-            onIconInput(value);
-        });
-
-        // Initialize thumbs when first loading
-        this.thumbnailIcon.removeClass().addClass(THUMB_ICON_CLASS + ' ' + self.config.icon);
-        this.thumbnailLabel.html(self.config.label);
-
-        Object.keys(this.colorInputs).forEach(function (inputKey) {
-            const input = self.colorInputs[inputKey];
-
-            input.set(self.config.style[inputKey]);
-            onColorInput(self.config.style[inputKey], inputKey);
-
-            input.on('change', function (value) {
-                onColorInput(value, inputKey);
-                self.updateDomainObject();
-            });
-
-            $('.t-style-input', self.domElement).append(input.getDOM());
-        });
-
-        Object.keys(this.textInputs).forEach(function (inputKey) {
-            self.textInputs[inputKey].prop('value', self.config[inputKey] || '');
-            self.listenTo(self.textInputs[inputKey], 'input', function () {
-                // eslint-disable-next-line no-invalid-this
-                onTextInput(this, inputKey);
-            });
-        });
-
-        this.listenTo(this.deleteButton, 'click', this.remove);
-        this.listenTo(this.duplicateButton, 'click', this.duplicate);
-        this.listenTo(this.addConditionButton, 'click', function () {
-            self.initCondition();
-        });
-        this.listenTo(this.toggleConfigButton, 'click', toggleConfig);
-        this.listenTo(this.trigger, 'change', onTriggerInput);
-
-        this.title.html(self.config.name);
-        this.description.html(self.config.description);
-        this.trigger.prop('value', self.config.trigger);
-
-        this.listenTo(this.grippy, 'mousedown', onDragStart);
-        this.widgetDnD.on('drop', function () {
-            // eslint-disable-next-line no-invalid-this
-            this.domElement.show();
-            $('.t-drag-indicator').hide();
-        }, this);
-
-        if (!this.conditionManager.loadCompleted()) {
-            this.config.expanded = false;
-        }
-
-        if (!this.config.expanded) {
-            this.configArea.removeClass('expanded');
-            this.toggleConfigButton.removeClass('c-disclosure-triangle--expanded');
-        }
-
-        if (this.domainObject.configuration.ruleOrder.length === 2) {
-            $('.t-grippy', this.domElement).hide();
-        }
-
-        this.refreshConditions();
-
-        //if this is the default rule, hide elements that don't apply
-        if (this.config.id === 'default') {
-            $('.t-delete', this.domElement).hide();
-            $('.t-widget-rule-config', this.domElement).hide();
-            $('.t-grippy', this.domElement).hide();
-        }
+  eventHelpers.extend(this);
+  const self = this;
+  const THUMB_ICON_CLASS = 'c-sw__icon js-sw__icon';
+
+  this.config = ruleConfig;
+  this.domainObject = domainObject;
+  this.openmct = openmct;
+  this.conditionManager = conditionManager;
+  this.widgetDnD = widgetDnD;
+  this.container = container;
+
+  this.domElement = templateHelpers.convertTemplateToHTML(ruleTemplate)[0];
+  this.eventEmitter = new EventEmitter();
+  this.supportedCallbacks = ['remove', 'duplicate', 'change', 'conditionChange'];
+  this.conditions = [];
+  this.dragging = false;
+
+  this.remove = this.remove.bind(this);
+  this.duplicate = this.duplicate.bind(this);
+
+  this.thumbnail = this.domElement.querySelector('.t-widget-thumb');
+  this.thumbnailIcon = this.domElement.querySelector('.js-sw__icon');
+  this.thumbnailLabel = this.domElement.querySelector('.c-sw__label');
+  this.title = this.domElement.querySelector('.rule-title');
+  this.description = this.domElement.querySelector('.rule-description');
+  this.trigger = this.domElement.querySelector('.t-trigger');
+  this.toggleConfigButton = this.domElement.querySelector('.js-disclosure');
+  this.configArea = this.domElement.querySelector('.widget-rule-content');
+  this.grippy = this.domElement.querySelector('.t-grippy');
+  this.conditionArea = this.domElement.querySelector('.t-widget-rule-config');
+  this.jsConditionArea = this.domElement.querySelector('.t-rule-js-condition-input-holder');
+  this.deleteButton = this.domElement.querySelector('.t-delete');
+  this.duplicateButton = this.domElement.querySelector('.t-duplicate');
+  this.addConditionButton = this.domElement.querySelector('.add-condition');
+
+  /**
+   * The text inputs for this rule: any input included in this object will
+   * have the appropriate event handlers registered to it, and it's corresponding
+   * field in the domain object will be updated with its value
+   */
+
+  this.textInputs = {
+    name: this.domElement.querySelector('.t-rule-name-input'),
+    label: this.domElement.querySelector('.t-rule-label-input'),
+    message: this.domElement.querySelector('.t-rule-message-input'),
+    jsCondition: this.domElement.querySelector('.t-rule-js-condition-input')
+  };
+
+  this.iconInput = new IconPalette('', container);
+  this.colorInputs = {
+    'background-color': new ColorPalette('icon-paint-bucket', container),
+    'border-color': new ColorPalette('icon-line-horz', container),
+    color: new ColorPalette('icon-font', container)
+  };
+
+  this.colorInputs.color.toggleNullOption();
+
+  /**
+   * An onchange event handler method for this rule's icon palettes
+   * @param {string} icon The css class name corresponding to this icon
+   * @private
+   */
+  function onIconInput(icon) {
+    self.config.icon = icon;
+    self.updateDomainObject('icon', icon);
+    self.thumbnailIcon.className = `${THUMB_ICON_CLASS + ' ' + icon}`;
+    self.eventEmitter.emit('change');
+  }
+
+  /**
+   * An onchange event handler method for this rule's color palettes palettes
+   * @param {string} color The color selected in the palette
+   * @param {string} property The css property which this color corresponds to
+   * @private
+   */
+  function onColorInput(color, property) {
+    self.config.style[property] = color;
+    self.thumbnail.style[property] = color;
+    self.eventEmitter.emit('change');
+  }
+
+  /**
+   * Parse input text from textbox to prevent HTML Injection
+   * @param {string} msg The text to be Parsed
+   * @private
+   */
+  function encodeMsg(msg) {
+    const div = document.createElement('div');
+    div.innerText = msg;
+
+    return div.innerText;
+  }
+
+  /**
+   * An onchange event handler method for this rule's trigger key
+   * @param {event} event The change event from this rule's select element
+   * @private
+   */
+  function onTriggerInput(event) {
+    const elem = event.target;
+    self.config.trigger = encodeMsg(elem.value);
+    self.generateDescription();
+    self.updateDomainObject();
+    self.refreshConditions();
+    self.eventEmitter.emit('conditionChange');
+  }
+
+  /**
+   * An onchange event handler method for this rule's text inputs
+   * @param {element} elem The input element that generated the event
+   * @param {string} inputKey The field of this rule's configuration to update
+   * @private
+   */
+  function onTextInput(elem, inputKey) {
+    const text = encodeMsg(elem.value);
+    self.config[inputKey] = text;
+    self.updateDomainObject();
+    if (inputKey === 'name') {
+      self.title.innerText = text;
+    } else if (inputKey === 'label') {
+      self.thumbnailLabel.innerText = text;
     }
 
-    /**
-     * Return the DOM element representing this rule
-     * @return {Element} A DOM element
-     */
-    Rule.prototype.getDOM = function () {
-        return this.domElement;
-    };
-
-    /**
-     * Unregister any event handlers registered with external sources
-     */
-    Rule.prototype.destroy = function () {
-        Object.values(this.colorInputs).forEach(function (palette) {
-            palette.destroy();
-        });
-        this.iconInput.destroy();
-        this.stopListening();
-        this.conditions.forEach(function (condition) {
-            condition.destroy();
-        });
-    };
-
-    /**
-     * Register a callback with this rule: supported callbacks are remove, change,
-     * conditionChange, and duplicate
-     * @param {string} event The key for the event to listen to
-     * @param {function} callback The function that this rule will envoke on this event
-     * @param {Object} context A reference to a scope to use as the context for
-     *                         context for the callback function
-     */
-    Rule.prototype.on = function (event, callback, context) {
-        if (this.supportedCallbacks.includes(event)) {
-            this.eventEmitter.on(event, callback, context || this);
-        }
-    };
-
-    /**
-     * An event handler for when a condition's configuration is modified
-     * @param {} value
-     * @param {string} property The path in the configuration to updateDomainObject
-     * @param {number} index The index of the condition that initiated this change
-     */
-    Rule.prototype.onConditionChange = function (event) {
-        _.set(this.config.conditions[event.index], event.property, event.value);
-        this.generateDescription();
-        this.updateDomainObject();
-        this.eventEmitter.emit('conditionChange');
-    };
-
-    /**
-     * During a rule drag event, show the placeholder element after this rule
-     */
-    Rule.prototype.showDragIndicator = function () {
-        $('.t-drag-indicator').hide();
-        $('.t-drag-indicator', this.domElement).show();
-    };
-
-    /**
-     * Mutate thet domain object with this rule's local configuration
-     */
-    Rule.prototype.updateDomainObject = function () {
-        this.openmct.objects.mutate(this.domainObject, 'configuration.ruleConfigById.'
-            + this.config.id, this.config);
-    };
-
-    /**
-     * Get a property of this rule by key
-     * @param {string} prop They property key of this rule to get
-     * @return {} The queried property
-     */
-    Rule.prototype.getProperty = function (prop) {
-        return this.config[prop];
-    };
-
-    /**
-     * Remove this rule from the domain object's configuration and invoke any
-     * registered remove callbacks
-     */
-    Rule.prototype.remove = function () {
-        const ruleOrder = this.domainObject.configuration.ruleOrder;
-        const ruleConfigById = this.domainObject.configuration.ruleConfigById;
-        const self = this;
-
-        ruleConfigById[self.config.id] = undefined;
-        _.remove(ruleOrder, function (ruleId) {
-            return ruleId === self.config.id;
-        });
-
-        this.openmct.objects.mutate(this.domainObject, 'configuration.ruleConfigById', ruleConfigById);
-        this.openmct.objects.mutate(this.domainObject, 'configuration.ruleOrder', ruleOrder);
-        this.destroy();
-        this.eventEmitter.emit('remove');
-    };
-
-    /**
-     * Makes a deep clone of this rule's configuration, and calls the duplicate event
-     * callback with the cloned configuration as an argument if one has been registered
-     */
-    Rule.prototype.duplicate = function () {
-        const sourceRule = JSON.parse(JSON.stringify(this.config));
-        sourceRule.expanded = true;
-        this.eventEmitter.emit('duplicate', sourceRule);
-    };
-
-    /**
-     * Initialze a new condition. If called with the sourceConfig and sourceIndex arguments,
-     * will insert a new condition with the provided configuration after the sourceIndex
-     * index. Otherwise, initializes a new blank rule and inserts it at the end
-     * of the list.
-     * @param {Object} [config] The configuration to initialize this rule from,
-     *                          consisting of sourceCondition and index fields
-     */
-    Rule.prototype.initCondition = function (config) {
-        const ruleConfigById = this.domainObject.configuration.ruleConfigById;
-        let newConfig;
-        const sourceIndex = config && config.index;
-        const defaultConfig = {
-            object: '',
-            key: '',
-            operation: '',
-            values: []
-        };
-
-        newConfig = (config !== undefined ? config.sourceCondition : defaultConfig);
-        if (sourceIndex !== undefined) {
-            ruleConfigById[this.config.id].conditions.splice(sourceIndex + 1, 0, newConfig);
-        } else {
-            ruleConfigById[this.config.id].conditions.push(newConfig);
-        }
+    self.eventEmitter.emit('change');
+  }
+
+  /**
+   * An onchange event handler for a mousedown event that initiates a drag gesture
+   * @param {event} event A mouseup event that was registered on this rule's grippy
+   * @private
+   */
+  function onDragStart(event) {
+    document.querySelectorAll('.t-drag-indicator').forEach((indicator) => {
+      // eslint-disable-next-line no-invalid-this
+      const ruleHeader = self.domElement.querySelectorAll('.widget-rule-header')[0].cloneNode(true);
+      indicator.textContent = '';
+      indicator.appendChild(ruleHeader);
+    });
+    self.widgetDnD.setDragImage(
+      self.domElement.querySelectorAll('.widget-rule-header')[0].cloneNode(true)
+    );
+    self.widgetDnD.dragStart(self.config.id);
+    self.domElement.style.display = 'none';
+  }
+
+  /**
+   * Show or hide this rule's configuration properties
+   * @private
+   */
+  function toggleConfig() {
+    if (self.configArea.classList.contains('expanded')) {
+      self.configArea.classList.remove('expanded');
+    } else {
+      self.configArea.classList.add('expanded');
+    }
 
-        this.domainObject.configuration.ruleConfigById = ruleConfigById;
-        this.updateDomainObject();
-        this.refreshConditions();
-        this.generateDescription();
-    };
-
-    /**
-     * Build {Condition} objects from configuration and rebuild associated view
-     */
-    Rule.prototype.refreshConditions = function () {
-        const self = this;
-        let $condition = null;
-        let loopCnt = 0;
-        const triggerContextStr = self.config.trigger === 'any' ? ' or ' : ' and ';
-
-        self.conditions = [];
-        $('.t-condition', this.domElement).remove();
-
-        this.config.conditions.forEach(function (condition, index) {
-            const newCondition = new Condition(condition, index, self.conditionManager);
-            newCondition.on('remove', self.removeCondition, self);
-            newCondition.on('duplicate', self.initCondition, self);
-            newCondition.on('change', self.onConditionChange, self);
-            self.conditions.push(newCondition);
-        });
-
-        if (this.config.trigger === 'js') {
-            this.jsConditionArea.show();
-            this.addConditionButton.hide();
-        } else {
-            this.jsConditionArea.hide();
-            this.addConditionButton.show();
-            self.conditions.forEach(function (condition) {
-                $condition = condition.getDOM();
-                $('li:last-of-type', self.conditionArea).before($condition);
-                if (loopCnt > 0) {
-                    $('.t-condition-context', $condition).html(triggerContextStr + ' when');
-                }
-
-                loopCnt++;
-            });
-        }
+    if (self.toggleConfigButton.classList.contains('c-disclosure-triangle--expanded')) {
+      self.toggleConfigButton.classList.remove('c-disclosure-triangle--expanded');
+    } else {
+      self.toggleConfigButton.classList.add('c-disclosure-triangle--expanded');
+    }
 
-        if (self.conditions.length === 1) {
-            self.conditions[0].hideButtons();
-        }
+    self.config.expanded = !self.config.expanded;
+  }
+
+  const labelInput = this.domElement.querySelector('.t-rule-label-input');
+  labelInput.parentNode.insertBefore(this.iconInput.getDOM(), labelInput);
+  this.iconInput.set(self.config.icon);
+  this.iconInput.on('change', function (value) {
+    onIconInput(value);
+  });
+
+  // Initialize thumbs when first loading
+  this.thumbnailIcon.className = `${THUMB_ICON_CLASS + ' ' + self.config.icon}`;
+  this.thumbnailLabel.innerText = self.config.label;
+
+  Object.keys(this.colorInputs).forEach(function (inputKey) {
+    const input = self.colorInputs[inputKey];
+
+    input.set(self.config.style[inputKey]);
+    onColorInput(self.config.style[inputKey], inputKey);
+
+    input.on('change', function (value) {
+      onColorInput(value, inputKey);
+      self.updateDomainObject();
+    });
+
+    self.domElement.querySelector('.t-style-input').append(input.getDOM());
+  });
+
+  Object.keys(this.textInputs).forEach(function (inputKey) {
+    if (self.textInputs[inputKey]) {
+      self.textInputs[inputKey].value = self.config[inputKey] || '';
+      self.listenTo(self.textInputs[inputKey], 'input', function () {
+        // eslint-disable-next-line no-invalid-this
+        onTextInput(this, inputKey);
+      });
+    }
+  });
+
+  this.listenTo(this.deleteButton, 'click', this.remove);
+  this.listenTo(this.duplicateButton, 'click', this.duplicate);
+  this.listenTo(this.addConditionButton, 'click', function () {
+    self.initCondition();
+  });
+  this.listenTo(this.toggleConfigButton, 'click', toggleConfig);
+  this.listenTo(this.trigger, 'change', onTriggerInput);
+
+  this.title.innerText = self.config.name;
+  this.description.innerText = self.config.description;
+  this.trigger.value = self.config.trigger;
+
+  this.listenTo(this.grippy, 'mousedown', onDragStart);
+  this.widgetDnD.on(
+    'drop',
+    function () {
+      // eslint-disable-next-line no-invalid-this
+      this.domElement.show();
+      document.querySelector('.t-drag-indicator').style.display = 'none';
+    },
+    this
+  );
+
+  if (!this.conditionManager.loadCompleted()) {
+    this.config.expanded = false;
+  }
+
+  if (!this.config.expanded) {
+    this.configArea.classList.remove('expanded');
+    this.toggleConfigButton.classList.remove('c-disclosure-triangle--expanded');
+  }
+
+  if (this.domainObject.configuration.ruleOrder.length === 2) {
+    this.domElement.querySelector('.t-grippy').style.display = 'none';
+  }
+
+  this.refreshConditions();
+
+  //if this is the default rule, hide elements that don't apply
+  if (this.config.id === 'default') {
+    this.domElement.querySelector('.t-delete').style.display = 'none';
+    this.domElement.querySelector('.t-widget-rule-config').style.display = 'none';
+    this.domElement.querySelector('.t-grippy').style.display = 'none';
+  }
+}
+
+/**
+ * Return the DOM element representing this rule
+ * @return {Element} A DOM element
+ */
+Rule.prototype.getDOM = function () {
+  return this.domElement;
+};
+
+/**
+ * Unregister any event handlers registered with external sources
+ */
+Rule.prototype.destroy = function () {
+  Object.values(this.colorInputs).forEach(function (palette) {
+    palette.destroy();
+  });
+  this.iconInput.destroy();
+  this.stopListening();
+  this.conditions.forEach(function (condition) {
+    condition.destroy();
+  });
+};
+
+/**
+ * Register a callback with this rule: supported callbacks are remove, change,
+ * conditionChange, and duplicate
+ * @param {string} event The key for the event to listen to
+ * @param {function} callback The function that this rule will invoke on this event
+ * @param {Object} context A reference to a scope to use as the context for
+ *                         context for the callback function
+ */
+Rule.prototype.on = function (event, callback, context) {
+  if (this.supportedCallbacks.includes(event)) {
+    this.eventEmitter.on(event, callback, context || this);
+  }
+};
+
+/**
+ * An event handler for when a condition's configuration is modified
+ * @param {} value
+ * @param {string} property The path in the configuration to updateDomainObject
+ * @param {number} index The index of the condition that initiated this change
+ */
+Rule.prototype.onConditionChange = function (event) {
+  _.set(this.config.conditions[event.index], event.property, event.value);
+  this.generateDescription();
+  this.updateDomainObject();
+  this.eventEmitter.emit('conditionChange');
+};
+
+/**
+ * During a rule drag event, show the placeholder element after this rule
+ */
+Rule.prototype.showDragIndicator = function () {
+  document.querySelector('.t-drag-indicator').style.display = 'none';
+  this.domElement.querySelector('.t-drag-indicator').style.display = '';
+};
+
+/**
+ * Mutate the domain object with this rule's local configuration
+ */
+Rule.prototype.updateDomainObject = function () {
+  this.openmct.objects.mutate(
+    this.domainObject,
+    'configuration.ruleConfigById.' + this.config.id,
+    this.config
+  );
+};
+
+/**
+ * Get a property of this rule by key
+ * @param {string} prop They property key of this rule to get
+ * @return {} The queried property
+ */
+Rule.prototype.getProperty = function (prop) {
+  return this.config[prop];
+};
+
+/**
+ * Remove this rule from the domain object's configuration and invoke any
+ * registered remove callbacks
+ */
+Rule.prototype.remove = function () {
+  const ruleOrder = this.domainObject.configuration.ruleOrder;
+  const ruleConfigById = this.domainObject.configuration.ruleConfigById;
+  const self = this;
+
+  ruleConfigById[self.config.id] = undefined;
+  _.remove(ruleOrder, function (ruleId) {
+    return ruleId === self.config.id;
+  });
+
+  this.openmct.objects.mutate(this.domainObject, 'configuration.ruleConfigById', ruleConfigById);
+  this.openmct.objects.mutate(this.domainObject, 'configuration.ruleOrder', ruleOrder);
+  this.destroy();
+  this.eventEmitter.emit('remove');
+};
+
+/**
+ * Makes a deep clone of this rule's configuration, and calls the duplicate event
+ * callback with the cloned configuration as an argument if one has been registered
+ */
+Rule.prototype.duplicate = function () {
+  const sourceRule = JSON.parse(JSON.stringify(this.config));
+  sourceRule.expanded = true;
+  this.eventEmitter.emit('duplicate', sourceRule);
+};
+
+/**
+ * Initialize a new condition. If called with the sourceConfig and sourceIndex arguments,
+ * will insert a new condition with the provided configuration after the sourceIndex
+ * index. Otherwise, initializes a new blank rule and inserts it at the end
+ * of the list.
+ * @param {Object} [config] The configuration to initialize this rule from,
+ *                          consisting of sourceCondition and index fields
+ */
+Rule.prototype.initCondition = function (config) {
+  const ruleConfigById = this.domainObject.configuration.ruleConfigById;
+  let newConfig;
+  const sourceIndex = config && config.index;
+  const defaultConfig = {
+    object: '',
+    key: '',
+    operation: '',
+    values: []
+  };
+
+  newConfig = config !== undefined ? config.sourceCondition : defaultConfig;
+  if (sourceIndex !== undefined) {
+    ruleConfigById[this.config.id].conditions.splice(sourceIndex + 1, 0, newConfig);
+  } else {
+    ruleConfigById[this.config.id].conditions.push(newConfig);
+  }
+
+  this.domainObject.configuration.ruleConfigById = ruleConfigById;
+  this.updateDomainObject();
+  this.refreshConditions();
+  this.generateDescription();
+};
+
+/**
+ * Build {Condition} objects from configuration and rebuild associated view
+ */
+Rule.prototype.refreshConditions = function () {
+  const self = this;
+  let $condition = null;
+  let loopCnt = 0;
+  const triggerContextStr = self.config.trigger === 'any' ? ' or ' : ' and ';
+
+  self.conditions = [];
+
+  this.domElement.querySelectorAll('.t-condition').forEach((condition) => {
+    condition.remove();
+  });
+
+  this.config.conditions.forEach(function (condition, index) {
+    const newCondition = new Condition(condition, index, self.conditionManager);
+    newCondition.on('remove', self.removeCondition, self);
+    newCondition.on('duplicate', self.initCondition, self);
+    newCondition.on('change', self.onConditionChange, self);
+    self.conditions.push(newCondition);
+  });
+
+  if (this.config.trigger === 'js') {
+    if (this.jsConditionArea) {
+      this.jsConditionArea.style.display = '';
+    }
 
-    };
-
-    /**
-     * Remove a condition from this rule's configuration at the given index
-     * @param {number} removeIndex The index of the condition to remove
-     */
-    Rule.prototype.removeCondition = function (removeIndex) {
-        const ruleConfigById = this.domainObject.configuration.ruleConfigById;
-        const conditions = ruleConfigById[this.config.id].conditions;
-
-        _.remove(conditions, function (condition, index) {
-            return index === removeIndex;
-        });
-
-        this.domainObject.configuration.ruleConfigById[this.config.id] = this.config;
-        this.updateDomainObject();
-        this.refreshConditions();
-        this.generateDescription();
-        this.eventEmitter.emit('conditionChange');
-    };
-
-    /**
-     * Build a human-readable description from this rule's conditions
-     */
-    Rule.prototype.generateDescription = function () {
-        let description = '';
-        const manager = this.conditionManager;
-        const evaluator = manager.getEvaluator();
-        let name;
-        let property;
-        let operation;
-        const self = this;
-
-        if (this.config.conditions && this.config.id !== 'default') {
-            if (self.config.trigger === 'js') {
-                description = 'when a custom JavaScript condition evaluates to true';
-            } else {
-                this.config.conditions.forEach(function (condition, index) {
-                    name = manager.getObjectName(condition.object);
-                    property = manager.getTelemetryPropertyName(condition.object, condition.key);
-                    operation = evaluator.getOperationDescription(condition.operation, condition.values);
-                    if (name || property || operation) {
-                        description += 'when '
-                            + (name ? name + '\'s ' : '')
-                            + (property ? property + ' ' : '')
-                            + (operation ? operation + ' ' : '')
-                            + (self.config.trigger === 'any' ? ' OR ' : ' AND ');
-                    }
-                });
-            }
-        }
+    this.addConditionButton.style.display = 'none';
+  } else {
+    if (this.jsConditionArea) {
+      this.jsConditionArea.style.display = 'none';
+    }
 
-        if (description.endsWith('OR ')) {
-            description = description.substring(0, description.length - 3);
+    this.addConditionButton.style.display = '';
+    self.conditions.forEach(function (condition) {
+      $condition = condition.getDOM();
+      const lastOfType = self.conditionArea.querySelector('li:last-of-type');
+      lastOfType.parentNode.insertBefore($condition, lastOfType);
+      if (loopCnt > 0) {
+        $condition.querySelector('.t-condition-context').innerText = triggerContextStr + ' when';
+      }
+
+      loopCnt++;
+    });
+  }
+
+  if (self.conditions.length === 1) {
+    self.conditions[0].hideButtons();
+  }
+};
+
+/**
+ * Remove a condition from this rule's configuration at the given index
+ * @param {number} removeIndex The index of the condition to remove
+ */
+Rule.prototype.removeCondition = function (removeIndex) {
+  const ruleConfigById = this.domainObject.configuration.ruleConfigById;
+  const conditions = ruleConfigById[this.config.id].conditions;
+
+  _.remove(conditions, function (condition, index) {
+    return index === removeIndex;
+  });
+
+  this.domainObject.configuration.ruleConfigById[this.config.id] = this.config;
+  this.updateDomainObject();
+  this.refreshConditions();
+  this.generateDescription();
+  this.eventEmitter.emit('conditionChange');
+};
+
+/**
+ * Build a human-readable description from this rule's conditions
+ */
+Rule.prototype.generateDescription = function () {
+  let description = '';
+  const manager = this.conditionManager;
+  const evaluator = manager.getEvaluator();
+  let name;
+  let property;
+  let operation;
+  const self = this;
+
+  if (this.config.conditions && this.config.id !== 'default') {
+    if (self.config.trigger === 'js') {
+      description = 'when a custom JavaScript condition evaluates to true';
+    } else {
+      this.config.conditions.forEach(function (condition, index) {
+        name = manager.getObjectName(condition.object);
+        property = manager.getTelemetryPropertyName(condition.object, condition.key);
+        operation = evaluator.getOperationDescription(condition.operation, condition.values);
+        if (name || property || operation) {
+          description +=
+            'when ' +
+            (name ? name + "'s " : '') +
+            (property ? property + ' ' : '') +
+            (operation ? operation + ' ' : '') +
+            (self.config.trigger === 'any' ? ' OR ' : ' AND ');
         }
+      });
+    }
+  }
 
-        if (description.endsWith('AND ')) {
-            description = description.substring(0, description.length - 4);
-        }
+  if (description.endsWith('OR ')) {
+    description = description.substring(0, description.length - 3);
+  }
 
-        description = (description === '' ? this.config.description : description);
-        this.description.html(description);
-        this.config.description = description;
-    };
+  if (description.endsWith('AND ')) {
+    description = description.substring(0, description.length - 4);
+  }
 
-    return Rule;
-});
+  description = description === '' ? this.config.description : description;
+  this.description.innerText = self.config.description;
+  this.config.description = description;
+};
diff --git a/src/plugins/summaryWidget/src/SummaryWidget.js b/src/plugins/summaryWidget/src/SummaryWidget.js
index e3561d7b9b3..1b657ab2a9d 100644
--- a/src/plugins/summaryWidget/src/SummaryWidget.js
+++ b/src/plugins/summaryWidget/src/SummaryWidget.js
@@ -1,372 +1,393 @@
-define([
-    '../res/widgetTemplate.html',
-    './Rule',
-    './ConditionManager',
-    './TestDataManager',
-    './WidgetDnD',
-    './eventHelpers',
-    'objectUtils',
-    'lodash',
-    'zepto'
-], function (
-    widgetTemplate,
-    Rule,
-    ConditionManager,
-    TestDataManager,
-    WidgetDnD,
-    eventHelpers,
-    objectUtils,
-    _,
-    $
-) {
-
-    //default css configuration for new rules
-    const DEFAULT_PROPS = {
-        'color': '#cccccc',
-        'background-color': '#666666',
-        'border-color': 'rgba(0,0,0,0)'
-    };
-
-    /**
-     * A Summary Widget object, which allows a user to configure rules based
-     * on telemetry producing domain objects, and update a compact display
-     * accordingly.
-     * @constructor
-     * @param {Object} domainObject The domain Object represented by this Widget
-     * @param {MCT} openmct An MCT instance
-     */
-    function SummaryWidget(domainObject, openmct) {
-        eventHelpers.extend(this);
-
-        this.domainObject = domainObject;
-        this.openmct = openmct;
-
-        this.domainObject.configuration = this.domainObject.configuration || {};
-        this.domainObject.configuration.ruleConfigById = this.domainObject.configuration.ruleConfigById || {};
-        this.domainObject.configuration.ruleOrder = this.domainObject.configuration.ruleOrder || ['default'];
-        this.domainObject.configuration.testDataConfig = this.domainObject.configuration.testDataConfig || [{
-            object: '',
-            key: '',
-            value: ''
-        }];
-
-        this.activeId = 'default';
-        this.rulesById = {};
-        this.domElement = $(widgetTemplate);
-        this.toggleRulesControl = $('.t-view-control-rules', this.domElement);
-        this.toggleTestDataControl = $('.t-view-control-test-data', this.domElement);
-        this.widgetButton = this.domElement.children('#widget');
-        this.editing = false;
-        this.container = '';
-        this.editListenerUnsubscribe = $.noop;
-
-        this.outerWrapper = $('.widget-edit-holder', this.domElement);
-        this.ruleArea = $('#ruleArea', this.domElement);
-        this.configAreaRules = $('.widget-rules-wrapper', this.domElement);
-
-        this.testDataArea = $('.widget-test-data', this.domElement);
-        this.addRuleButton = $('#addRule', this.domElement);
-
-        this.conditionManager = new ConditionManager(this.domainObject, this.openmct);
-        this.testDataManager = new TestDataManager(this.domainObject, this.conditionManager, this.openmct);
-
-        this.watchForChanges = this.watchForChanges.bind(this);
-        this.show = this.show.bind(this);
-        this.destroy = this.destroy.bind(this);
-        this.addRule = this.addRule.bind(this);
-
-        this.addHyperlink(domainObject.url, domainObject.openNewTab);
-        this.watchForChanges(openmct, domainObject);
-
-        const id = objectUtils.makeKeyString(this.domainObject.identifier);
-        const self = this;
-
-        /**
-         * Toggles the configuration area for test data in the view
-         * @private
-         */
-        function toggleTestData() {
-            self.outerWrapper.toggleClass('expanded-widget-test-data');
-            self.toggleTestDataControl.toggleClass('c-disclosure-triangle--expanded');
+import * as urlSanitizeLib from '@braintree/sanitize-url';
+
+import * as templateHelpers from '../../../utils/template/templateHelpers.js';
+import widgetTemplate from '../res/widgetTemplate.html';
+import ConditionManager from './ConditionManager.js';
+import eventHelpers from './eventHelpers.js';
+import Rule from './Rule.js';
+import TestDataManager from './TestDataManager.js';
+import WidgetDnD from './WidgetDnD.js';
+
+//default css configuration for new rules
+const DEFAULT_PROPS = {
+  color: '#cccccc',
+  'background-color': '#666666',
+  'border-color': 'rgba(0,0,0,0)'
+};
+
+/**
+ * A Summary Widget object, which allows a user to configure rules based
+ * on telemetry producing domain objects, and update a compact display
+ * accordingly.
+ * @constructor
+ * @param {Object} domainObject The domain Object represented by this Widget
+ * @param {MCT} openmct An MCT instance
+ */
+export default function SummaryWidget(domainObject, openmct) {
+  eventHelpers.extend(this);
+
+  this.domainObject = domainObject;
+  this.openmct = openmct;
+
+  this.domainObject.configuration = this.domainObject.configuration || {};
+  this.domainObject.configuration.ruleConfigById =
+    this.domainObject.configuration.ruleConfigById || {};
+  this.domainObject.configuration.ruleOrder = this.domainObject.configuration.ruleOrder || [
+    'default'
+  ];
+  this.domainObject.configuration.testDataConfig = this.domainObject.configuration
+    .testDataConfig || [
+    {
+      object: '',
+      key: '',
+      value: ''
+    }
+  ];
+
+  this.activeId = 'default';
+  this.rulesById = {};
+  this.domElement = templateHelpers.convertTemplateToHTML(widgetTemplate)[0];
+  this.toggleRulesControl = this.domElement.querySelector('.t-view-control-rules');
+  this.toggleTestDataControl = this.domElement.querySelector('.t-view-control-test-data');
+
+  this.widgetButton = this.domElement.querySelector(':scope > #widget');
+
+  this.editing = false;
+  this.container = '';
+  this.editListenerUnsubscribe = () => {};
+
+  this.outerWrapper = this.domElement.querySelector('.widget-edit-holder');
+  this.ruleArea = this.domElement.querySelector('#ruleArea');
+  this.configAreaRules = this.domElement.querySelector('.widget-rules-wrapper');
+
+  this.testDataArea = this.domElement.querySelector('.widget-test-data');
+  this.addRuleButton = this.domElement.querySelector('#addRule');
+
+  this.conditionManager = new ConditionManager(this.domainObject, this.openmct);
+  this.testDataManager = new TestDataManager(
+    this.domainObject,
+    this.conditionManager,
+    this.openmct
+  );
+
+  this.watchForChanges = this.watchForChanges.bind(this);
+  this.show = this.show.bind(this);
+  this.destroy = this.destroy.bind(this);
+  this.addRule = this.addRule.bind(this);
+
+  this.addHyperlink(domainObject.url, domainObject.openNewTab);
+  this.watchForChanges(openmct, domainObject);
+
+  const self = this;
+
+  /**
+   * Toggles the configuration area for test data in the view
+   * @private
+   */
+  function toggleTestData() {
+    if (self.outerWrapper.classList.contains('expanded-widget-test-data')) {
+      self.outerWrapper.classList.remove('expanded-widget-test-data');
+    } else {
+      self.outerWrapper.classList.add('expanded-widget-test-data');
+    }
+
+    if (self.toggleTestDataControl.classList.contains('c-disclosure-triangle--expanded')) {
+      self.toggleTestDataControl.classList.remove('c-disclosure-triangle--expanded');
+    } else {
+      self.toggleTestDataControl.classList.add('c-disclosure-triangle--expanded');
+    }
+  }
+
+  this.listenTo(this.toggleTestDataControl, 'click', toggleTestData);
+
+  /**
+   * Toggles the configuration area for rules in the view
+   * @private
+   */
+  function toggleRules() {
+    templateHelpers.toggleClass(self.outerWrapper, 'expanded-widget-rules');
+    templateHelpers.toggleClass(self.toggleRulesControl, 'c-disclosure-triangle--expanded');
+  }
+
+  this.listenTo(this.toggleRulesControl, 'click', toggleRules);
+}
+
+/**
+ * adds or removes href to widget button and adds or removes openInNewTab
+ * @param {string} url String that denotes the url to be opened
+ * @param {string} openNewTab String that denotes wether to open link in new tab or not
+ */
+SummaryWidget.prototype.addHyperlink = function (url, openNewTab) {
+  if (url) {
+    this.widgetButton.href = urlSanitizeLib.sanitizeUrl(url);
+  } else {
+    this.widgetButton.removeAttribute('href');
+  }
+
+  if (openNewTab === 'newTab') {
+    this.widgetButton.target = '_blank';
+  } else {
+    this.widgetButton.removeAttribute('target');
+  }
+};
+
+/**
+ * adds a listener to the object to watch for any changes made by user
+ * only executes if changes are observed
+ * @param {openmct} Object Instance of OpenMCT
+ * @param {domainObject} Object instance of this object
+ */
+SummaryWidget.prototype.watchForChanges = function (openmct, domainObject) {
+  this.watchForChangesUnsubscribe = openmct.objects.observe(
+    domainObject,
+    '*',
+    function (newDomainObject) {
+      if (
+        newDomainObject.url !== this.domainObject.url ||
+        newDomainObject.openNewTab !== this.domainObject.openNewTab
+      ) {
+        this.addHyperlink(newDomainObject.url, newDomainObject.openNewTab);
+      }
+    }.bind(this)
+  );
+};
+
+/**
+ * Builds the Summary Widget's DOM, performs other necessary setup, and attaches
+ * this Summary Widget's view to the supplied container.
+ * @param {element} container The DOM element that will contain this Summary
+ *                            Widget's view.
+ */
+SummaryWidget.prototype.show = function (container) {
+  const self = this;
+  this.container = container;
+  this.container.append(this.domElement);
+  this.domElement.querySelector('.widget-test-data').append(this.testDataManager.getDOM());
+  this.widgetDnD = new WidgetDnD(
+    this.domElement,
+    this.domainObject.configuration.ruleOrder,
+    this.rulesById
+  );
+  this.initRule('default', 'Default');
+  this.domainObject.configuration.ruleOrder.forEach(function (ruleId) {
+    if (ruleId !== 'default') {
+      self.initRule(ruleId);
+    }
+  });
+  this.refreshRules();
+  this.updateWidget();
+
+  this.listenTo(this.addRuleButton, 'click', this.addRule);
+  this.conditionManager.on('receiveTelemetry', this.executeRules, this);
+  this.widgetDnD.on('drop', this.reorder, this);
+};
+
+/**
+ * Unregister event listeners with the Open MCT APIs, unsubscribe from telemetry,
+ * and clean up event handlers
+ */
+SummaryWidget.prototype.destroy = function (container) {
+  this.editListenerUnsubscribe();
+  this.conditionManager.destroy();
+  this.testDataManager.destroy();
+  this.widgetDnD.destroy();
+  this.watchForChangesUnsubscribe();
+  Object.values(this.rulesById).forEach(function (rule) {
+    rule.destroy();
+  });
+
+  this.stopListening();
+};
+
+/**
+ * Update the view from the current rule configuration and order
+ */
+SummaryWidget.prototype.refreshRules = function () {
+  const self = this;
+  const ruleOrder = self.domainObject.configuration.ruleOrder;
+  const rules = self.rulesById;
+  self.ruleArea.innerHTML = '';
+  Object.values(ruleOrder).forEach(function (ruleId) {
+    self.ruleArea.append(rules[ruleId].getDOM());
+  });
+
+  this.executeRules();
+  this.addOrRemoveDragIndicator();
+};
+
+SummaryWidget.prototype.addOrRemoveDragIndicator = function () {
+  const rules = this.domainObject.configuration.ruleOrder;
+  const rulesById = this.rulesById;
+
+  rules.forEach(function (ruleKey, index, array) {
+    if (array.length > 2 && index > 0) {
+      rulesById[ruleKey].domElement.querySelector('.t-grippy').style.display = '';
+    } else {
+      rulesById[ruleKey].domElement.querySelector('.t-grippy').style.display = 'none';
+    }
+  });
+};
+
+/**
+ * Update the widget's appearance from the configuration of the active rule
+ */
+SummaryWidget.prototype.updateWidget = function () {
+  const WIDGET_ICON_CLASS = 'c-sw__icon js-sw__icon';
+  const activeRule = this.rulesById[this.activeId];
+
+  this.applyStyle(this.domElement.querySelector('#widget'), activeRule.getProperty('style'));
+  this.domElement.querySelector('#widget').title = activeRule.getProperty('message');
+  this.domElement.querySelector('#widgetLabel').textContent = activeRule.getProperty('label');
+  this.domElement.querySelector('#widgetIcon').classList =
+    WIDGET_ICON_CLASS + ' ' + activeRule.getProperty('icon');
+};
+
+/**
+ * Get the active rule and update the Widget's appearance.
+ */
+SummaryWidget.prototype.executeRules = function () {
+  this.activeId = this.conditionManager.executeRules(
+    this.domainObject.configuration.ruleOrder,
+    this.rulesById
+  );
+  this.updateWidget();
+};
+
+/**
+ * Add a new rule to this widget
+ */
+SummaryWidget.prototype.addRule = function () {
+  let ruleCount = 0;
+  let ruleId;
+  const ruleOrder = this.domainObject.configuration.ruleOrder;
+
+  while (Object.keys(this.rulesById).includes('rule' + ruleCount)) {
+    ruleCount++;
+  }
+
+  ruleId = 'rule' + ruleCount;
+  ruleOrder.push(ruleId);
+  this.domainObject.configuration.ruleOrder = ruleOrder;
+
+  this.initRule(ruleId, 'Rule');
+  this.updateDomainObject();
+  this.refreshRules();
+};
+
+/**
+ * Duplicate an existing widget rule from its configuration and splice it in
+ * after the rule it duplicates
+ * @param {Object} sourceConfig The configuration properties of the rule to be
+ *                              instantiated
+ */
+SummaryWidget.prototype.duplicateRule = function (sourceConfig) {
+  let ruleCount = 0;
+  let ruleId;
+  const sourceRuleId = sourceConfig.id;
+  const ruleOrder = this.domainObject.configuration.ruleOrder;
+  const ruleIds = Object.keys(this.rulesById);
+
+  while (ruleIds.includes('rule' + ruleCount)) {
+    ruleCount = ++ruleCount;
+  }
+
+  ruleId = 'rule' + ruleCount;
+  sourceConfig.id = ruleId;
+  sourceConfig.name += ' Copy';
+  ruleOrder.splice(ruleOrder.indexOf(sourceRuleId) + 1, 0, ruleId);
+  this.domainObject.configuration.ruleOrder = ruleOrder;
+  this.domainObject.configuration.ruleConfigById[ruleId] = sourceConfig;
+  this.initRule(ruleId, sourceConfig.name);
+  this.updateDomainObject();
+  this.refreshRules();
+};
+
+/**
+ * Initialize a new rule from a default configuration, or build a {Rule} object
+ * from it if already exists
+ * @param {string} ruleId An key to be used to identify this ruleId, or the key
+                          of the rule to be instantiated
+  * @param {string} ruleName The initial human-readable name of this rule
+  */
+SummaryWidget.prototype.initRule = function (ruleId, ruleName) {
+  let ruleConfig;
+  const styleObj = {};
+
+  Object.assign(styleObj, DEFAULT_PROPS);
+  if (!this.domainObject.configuration.ruleConfigById[ruleId]) {
+    this.domainObject.configuration.ruleConfigById[ruleId] = {
+      name: ruleName || 'Rule',
+      label: 'Unnamed Rule',
+      message: '',
+      id: ruleId,
+      icon: ' ',
+      style: styleObj,
+      description: ruleId === 'default' ? 'Default appearance for the widget' : 'A new rule',
+      conditions: [
+        {
+          object: '',
+          key: '',
+          operation: '',
+          values: []
         }
-
-        this.listenTo(this.toggleTestDataControl, 'click', toggleTestData);
-
-        /**
-         * Toggles the configuration area for rules in the view
-         * @private
-         */
-        function toggleRules() {
-            self.outerWrapper.toggleClass('expanded-widget-rules');
-            self.toggleRulesControl.toggleClass('c-disclosure-triangle--expanded');
-        }
-
-        this.listenTo(this.toggleRulesControl, 'click', toggleRules);
-
-        openmct.$injector.get('objectService')
-            .getObjects([id]);
-    }
-
-    /**
-     * adds or removes href to widget button and adds or removes openInNewTab
-     * @param {string} url String that denotes the url to be opened
-     * @param {string} openNewTab String that denotes wether to open link in new tab or not
-     */
-    SummaryWidget.prototype.addHyperlink = function (url, openNewTab) {
-        if (url) {
-            this.widgetButton.attr('href', url);
-        } else {
-            this.widgetButton.removeAttr('href');
-        }
-
-        if (openNewTab === 'newTab') {
-            this.widgetButton.attr('target', '_blank');
-        } else {
-            this.widgetButton.removeAttr('target');
-        }
-    };
-
-    /**
-     * adds a listener to the object to watch for any changes made by user
-     * only executes if changes are observed
-     * @param {openmct} Object Instance of OpenMCT
-     * @param {domainObject} Object instance of this object
-     */
-    SummaryWidget.prototype.watchForChanges = function (openmct, domainObject) {
-        this.watchForChangesUnsubscribe = openmct.objects.observe(domainObject, '*', function (newDomainObject) {
-            if (newDomainObject.url !== this.domainObject.url
-                    || newDomainObject.openNewTab !== this.domainObject.openNewTab) {
-                this.addHyperlink(newDomainObject.url, newDomainObject.openNewTab);
-            }
-        }.bind(this));
-    };
-
-    /**
-     * Builds the Summary Widget's DOM, performs other necessary setup, and attaches
-     * this Summary Widget's view to the supplied container.
-     * @param {element} container The DOM element that will contain this Summary
-     *                            Widget's view.
-     */
-    SummaryWidget.prototype.show = function (container) {
-        const self = this;
-        this.container = container;
-        $(container).append(this.domElement);
-        $('.widget-test-data', this.domElement).append(this.testDataManager.getDOM());
-        this.widgetDnD = new WidgetDnD(this.domElement, this.domainObject.configuration.ruleOrder, this.rulesById);
-        this.initRule('default', 'Default');
-        this.domainObject.configuration.ruleOrder.forEach(function (ruleId) {
-            if (ruleId !== 'default') {
-                self.initRule(ruleId);
-            }
-        });
-        this.refreshRules();
-        this.updateWidget();
-
-        this.listenTo(this.addRuleButton, 'click', this.addRule);
-        this.conditionManager.on('receiveTelemetry', this.executeRules, this);
-        this.widgetDnD.on('drop', this.reorder, this);
-    };
-
-    /**
-     * Unregister event listeners with the Open MCT APIs, unsubscribe from telemetry,
-     * and clean up event handlers
-     */
-    SummaryWidget.prototype.destroy = function (container) {
-        this.editListenerUnsubscribe();
-        this.conditionManager.destroy();
-        this.testDataManager.destroy();
-        this.widgetDnD.destroy();
-        this.watchForChangesUnsubscribe();
-        Object.values(this.rulesById).forEach(function (rule) {
-            rule.destroy();
-        });
-
-        this.stopListening();
-    };
-
-    /**
-     * Update the view from the current rule configuration and order
-     */
-    SummaryWidget.prototype.refreshRules = function () {
-        const self = this;
-        const ruleOrder = self.domainObject.configuration.ruleOrder;
-        const rules = self.rulesById;
-        self.ruleArea.html('');
-        Object.values(ruleOrder).forEach(function (ruleId) {
-            self.ruleArea.append(rules[ruleId].getDOM());
-        });
-
-        this.executeRules();
-        this.addOrRemoveDragIndicator();
-    };
-
-    SummaryWidget.prototype.addOrRemoveDragIndicator = function () {
-        const rules = this.domainObject.configuration.ruleOrder;
-        const rulesById = this.rulesById;
-
-        rules.forEach(function (ruleKey, index, array) {
-            if (array.length > 2 && index > 0) {
-                $('.t-grippy', rulesById[ruleKey].domElement).show();
-            } else {
-                $('.t-grippy', rulesById[ruleKey].domElement).hide();
-            }
-        });
-    };
-
-    /**
-     * Update the widget's appearance from the configuration of the active rule
-     */
-    SummaryWidget.prototype.updateWidget = function () {
-        const WIDGET_ICON_CLASS = 'c-sw__icon js-sw__icon';
-        const activeRule = this.rulesById[this.activeId];
-        this.applyStyle($('#widget', this.domElement), activeRule.getProperty('style'));
-        $('#widget', this.domElement).prop('title', activeRule.getProperty('message'));
-        $('#widgetLabel', this.domElement).html(activeRule.getProperty('label'));
-        $('#widgetIcon', this.domElement).removeClass().addClass(WIDGET_ICON_CLASS + ' ' + activeRule.getProperty('icon'));
-    };
-
-    /**
-     * Get the active rule and update the Widget's appearance.
-     */
-    SummaryWidget.prototype.executeRules = function () {
-        this.activeId = this.conditionManager.executeRules(
-            this.domainObject.configuration.ruleOrder,
-            this.rulesById
-        );
-        this.updateWidget();
-    };
-
-    /**
-     * Add a new rule to this widget
-     */
-    SummaryWidget.prototype.addRule = function () {
-        let ruleCount = 0;
-        let ruleId;
-        const ruleOrder = this.domainObject.configuration.ruleOrder;
-
-        while (Object.keys(this.rulesById).includes('rule' + ruleCount)) {
-            ruleCount++;
-        }
-
-        ruleId = 'rule' + ruleCount;
-        ruleOrder.push(ruleId);
-        this.domainObject.configuration.ruleOrder = ruleOrder;
-
-        this.initRule(ruleId, 'Rule');
-        this.updateDomainObject();
-        this.refreshRules();
-    };
-
-    /**
-     * Duplicate an existing widget rule from its configuration and splice it in
-     * after the rule it duplicates
-     * @param {Object} sourceConfig The configuration properties of the rule to be
-     *                              instantiated
-     */
-    SummaryWidget.prototype.duplicateRule = function (sourceConfig) {
-        let ruleCount = 0;
-        let ruleId;
-        const sourceRuleId = sourceConfig.id;
-        const ruleOrder = this.domainObject.configuration.ruleOrder;
-        const ruleIds = Object.keys(this.rulesById);
-
-        while (ruleIds.includes('rule' + ruleCount)) {
-            ruleCount = ++ruleCount;
-        }
-
-        ruleId = 'rule' + ruleCount;
-        sourceConfig.id = ruleId;
-        sourceConfig.name += ' Copy';
-        ruleOrder.splice(ruleOrder.indexOf(sourceRuleId) + 1, 0, ruleId);
-        this.domainObject.configuration.ruleOrder = ruleOrder;
-        this.domainObject.configuration.ruleConfigById[ruleId] = sourceConfig;
-        this.initRule(ruleId, sourceConfig.name);
-        this.updateDomainObject();
-        this.refreshRules();
-    };
-
-    /**
-     * Initialze a new rule from a default configuration, or build a {Rule} object
-     * from it if already exists
-     * @param {string} ruleId An key to be used to identify this ruleId, or the key
-                              of the rule to be instantiated
-     * @param {string} ruleName The initial human-readable name of this rule
-     */
-    SummaryWidget.prototype.initRule = function (ruleId, ruleName) {
-        let ruleConfig;
-        const styleObj = {};
-
-        Object.assign(styleObj, DEFAULT_PROPS);
-        if (!this.domainObject.configuration.ruleConfigById[ruleId]) {
-            this.domainObject.configuration.ruleConfigById[ruleId] = {
-                name: ruleName || 'Rule',
-                label: 'Unnamed Rule',
-                message: '',
-                id: ruleId,
-                icon: ' ',
-                style: styleObj,
-                description: ruleId === 'default' ? 'Default appearance for the widget' : 'A new rule',
-                conditions: [{
-                    object: '',
-                    key: '',
-                    operation: '',
-                    values: []
-                }],
-                jsCondition: '',
-                trigger: 'any',
-                expanded: 'true'
-            };
-
-        }
-
-        ruleConfig = this.domainObject.configuration.ruleConfigById[ruleId];
-        this.rulesById[ruleId] = new Rule(ruleConfig, this.domainObject, this.openmct,
-            this.conditionManager, this.widgetDnD, this.container);
-        this.rulesById[ruleId].on('remove', this.refreshRules, this);
-        this.rulesById[ruleId].on('duplicate', this.duplicateRule, this);
-        this.rulesById[ruleId].on('change', this.updateWidget, this);
-        this.rulesById[ruleId].on('conditionChange', this.executeRules, this);
-    };
-
-    /**
-     * Given two ruleIds, move the source rule after the target rule and update
-     * the view.
-     * @param {Object} event An event object representing this drop with draggingId
-     *                       and dropTarget fields
-     */
-    SummaryWidget.prototype.reorder = function (event) {
-        const ruleOrder = this.domainObject.configuration.ruleOrder;
-        const sourceIndex = ruleOrder.indexOf(event.draggingId);
-        let targetIndex;
-
-        if (event.draggingId !== event.dropTarget) {
-            ruleOrder.splice(sourceIndex, 1);
-            targetIndex = ruleOrder.indexOf(event.dropTarget);
-            ruleOrder.splice(targetIndex + 1, 0, event.draggingId);
-            this.domainObject.configuration.ruleOrder = ruleOrder;
-            this.updateDomainObject();
-        }
-
-        this.refreshRules();
-    };
-
-    /**
-     * Apply a list of css properties to an element
-     * @param {element} elem The DOM element to which the rules will be applied
-     * @param {object} style an object representing the style
-     */
-    SummaryWidget.prototype.applyStyle = function (elem, style) {
-        Object.keys(style).forEach(function (propId) {
-            elem.css(propId, style[propId]);
-        });
-    };
-
-    /**
-     * Mutate this domain object's configuration with the current local configuration
-     */
-    SummaryWidget.prototype.updateDomainObject = function () {
-        this.openmct.objects.mutate(this.domainObject, 'configuration', this.domainObject.configuration);
-    };
-
-    return SummaryWidget;
-});
+      ],
+      jsCondition: '',
+      trigger: 'any',
+      expanded: 'true'
+    };
+  }
+
+  ruleConfig = this.domainObject.configuration.ruleConfigById[ruleId];
+  this.rulesById[ruleId] = new Rule(
+    ruleConfig,
+    this.domainObject,
+    this.openmct,
+    this.conditionManager,
+    this.widgetDnD,
+    this.container
+  );
+  this.rulesById[ruleId].on('remove', this.refreshRules, this);
+  this.rulesById[ruleId].on('duplicate', this.duplicateRule, this);
+  this.rulesById[ruleId].on('change', this.updateWidget, this);
+  this.rulesById[ruleId].on('conditionChange', this.executeRules, this);
+};
+
+/**
+ * Given two ruleIds, move the source rule after the target rule and update
+ * the view.
+ * @param {Object} event An event object representing this drop with draggingId
+ *                       and dropTarget fields
+ */
+SummaryWidget.prototype.reorder = function (event) {
+  const ruleOrder = this.domainObject.configuration.ruleOrder;
+  const sourceIndex = ruleOrder.indexOf(event.draggingId);
+  let targetIndex;
+
+  if (event.draggingId !== event.dropTarget) {
+    ruleOrder.splice(sourceIndex, 1);
+    targetIndex = ruleOrder.indexOf(event.dropTarget);
+    ruleOrder.splice(targetIndex + 1, 0, event.draggingId);
+    this.domainObject.configuration.ruleOrder = ruleOrder;
+    this.updateDomainObject();
+  }
+
+  this.refreshRules();
+};
+
+/**
+ * Apply a list of css properties to an element
+ * @param {element} elem The DOM element to which the rules will be applied
+ * @param {object} style an object representing the style
+ */
+SummaryWidget.prototype.applyStyle = function (elem, style) {
+  Object.keys(style).forEach(function (propId) {
+    elem.style[propId] = style[propId];
+  });
+};
+
+/**
+ * Mutate this domain object's configuration with the current local configuration
+ */
+SummaryWidget.prototype.updateDomainObject = function () {
+  this.openmct.objects.mutate(this.domainObject, 'configuration', this.domainObject.configuration);
+};
diff --git a/src/plugins/summaryWidget/src/TestDataItem.js b/src/plugins/summaryWidget/src/TestDataItem.js
index 32b737a90e2..4e7ddbf83e8 100644
--- a/src/plugins/summaryWidget/src/TestDataItem.js
+++ b/src/plugins/summaryWidget/src/TestDataItem.js
@@ -1,196 +1,190 @@
-define([
-    '../res/testDataItemTemplate.html',
-    './input/ObjectSelect',
-    './input/KeySelect',
-    './eventHelpers',
-    'EventEmitter',
-    'zepto'
-], function (
-    itemTemplate,
-    ObjectSelect,
-    KeySelect,
-    eventHelpers,
-    EventEmitter,
-    $
-) {
-
-    /**
-     * An object representing a single mock telemetry value
-     * @param {object} itemConfig the configuration for this item, consisting of
-     *                            object, key, and value fields
-     * @param {number} index the index of this TestDataItem object in the data
-     *                 model of its parent {TestDataManager} o be injected into callbacks
-     *                 for removes
-     * @param {ConditionManager} conditionManager a conditionManager instance
-     *                           for populating selects with configuration data
-     * @constructor
-     */
-    function TestDataItem(itemConfig, index, conditionManager) {
-        eventHelpers.extend(this);
-        this.config = itemConfig;
-        this.index = index;
-        this.conditionManager = conditionManager;
-
-        this.domElement = $(itemTemplate);
-        this.eventEmitter = new EventEmitter();
-        this.supportedCallbacks = ['remove', 'duplicate', 'change'];
-
-        this.deleteButton = $('.t-delete', this.domElement);
-        this.duplicateButton = $('.t-duplicate', this.domElement);
-
-        this.selects = {};
-        this.valueInputs = [];
-
-        this.remove = this.remove.bind(this);
-        this.duplicate = this.duplicate.bind(this);
-
-        const self = this;
-
-        /**
-         * A change event handler for this item's select inputs, which also invokes
-         * change callbacks registered with this item
-         * @param {string} value The new value of this select item
-         * @param {string} property The property of this item to modify
-         * @private
-         */
-        function onSelectChange(value, property) {
-            if (property === 'key') {
-                self.generateValueInput(value);
-            }
-
-            self.eventEmitter.emit('change', {
-                value: value,
-                property: property,
-                index: self.index
-            });
-        }
-
-        /**
-         * An input event handler for this item's value field. Invokes any change
-         * callbacks associated with this item
-         * @param {Event} event The input event that initiated this callback
-         * @private
-         */
-        function onValueInput(event) {
-            const elem = event.target;
-            const value = (isNaN(elem.valueAsNumber) ? elem.value : elem.valueAsNumber);
-
-            if (elem.tagName.toUpperCase() === 'INPUT') {
-                self.eventEmitter.emit('change', {
-                    value: value,
-                    property: 'value',
-                    index: self.index
-                });
-            }
-        }
-
-        this.listenTo(this.deleteButton, 'click', this.remove);
-        this.listenTo(this.duplicateButton, 'click', this.duplicate);
-
-        this.selects.object = new ObjectSelect(this.config, this.conditionManager);
-        this.selects.key = new KeySelect(
-            this.config,
-            this.selects.object,
-            this.conditionManager,
-            function (value) {
-                onSelectChange(value, 'key');
-            });
-
-        this.selects.object.on('change', function (value) {
-            onSelectChange(value, 'object');
-        });
-
-        Object.values(this.selects).forEach(function (select) {
-            $('.t-configuration', self.domElement).append(select.getDOM());
-        });
-        this.listenTo(this.domElement, 'input', onValueInput);
+import EventEmitter from 'EventEmitter';
+
+import * as templateHelpers from '../../../utils/template/templateHelpers.js';
+import itemTemplate from '../res/testDataItemTemplate.html';
+import eventHelpers from './eventHelpers.js';
+import KeySelect from './input/KeySelect.js';
+import ObjectSelect from './input/ObjectSelect.js';
+
+/**
+ * An object representing a single mock telemetry value
+ * @param {object} itemConfig the configuration for this item, consisting of
+ *                            object, key, and value fields
+ * @param {number} index the index of this TestDataItem object in the data
+ *                 model of its parent {TestDataManager} o be injected into callbacks
+ *                 for removes
+ * @param {ConditionManager} conditionManager a conditionManager instance
+ *                           for populating selects with configuration data
+ * @constructor
+ */
+export default function TestDataItem(itemConfig, index, conditionManager) {
+  eventHelpers.extend(this);
+  this.config = itemConfig;
+  this.index = index;
+  this.conditionManager = conditionManager;
+
+  this.domElement = templateHelpers.convertTemplateToHTML(itemTemplate)[0];
+  this.eventEmitter = new EventEmitter();
+  this.supportedCallbacks = ['remove', 'duplicate', 'change'];
+
+  this.deleteButton = this.domElement.querySelector('.t-delete');
+  this.duplicateButton = this.domElement.querySelector('.t-duplicate');
+
+  this.selects = {};
+  this.valueInputs = [];
+
+  this.remove = this.remove.bind(this);
+  this.duplicate = this.duplicate.bind(this);
+
+  const self = this;
+
+  /**
+   * A change event handler for this item's select inputs, which also invokes
+   * change callbacks registered with this item
+   * @param {string} value The new value of this select item
+   * @param {string} property The property of this item to modify
+   * @private
+   */
+  function onSelectChange(value, property) {
+    if (property === 'key') {
+      self.generateValueInput(value);
     }
 
-    /**
-     * Gets the DOM associated with this element's view
-     * @return {Element}
-     */
-    TestDataItem.prototype.getDOM = function (container) {
-        return this.domElement;
-    };
-
-    /**
-     * Register a callback with this item: supported callbacks are remove, change,
-     * and duplicate
-     * @param {string} event The key for the event to listen to
-     * @param {function} callback The function that this rule will envoke on this event
-     * @param {Object} context A reference to a scope to use as the context for
-     *                         context for the callback function
-     */
-    TestDataItem.prototype.on = function (event, callback, context) {
-        if (this.supportedCallbacks.includes(event)) {
-            this.eventEmitter.on(event, callback, context || this);
-        }
-    };
-
-    /**
-     * Implement "off" to complete event emitter interface.
-     */
-    TestDataItem.prototype.off = function (event, callback, context) {
-        this.eventEmitter.off(event, callback, context);
-    };
-
-    /**
-     * Hide the appropriate inputs when this is the only item
-     */
-    TestDataItem.prototype.hideButtons = function () {
-        this.deleteButton.hide();
-    };
-
-    /**
-     * Remove this item from the configuration. Invokes any registered
-     * remove callbacks
-     */
-    TestDataItem.prototype.remove = function () {
-        const self = this;
-        this.eventEmitter.emit('remove', self.index);
-        this.stopListening();
-
-        Object.values(this.selects).forEach(function (select) {
-            select.destroy();
-        });
-    };
-
-    /**
-     * Makes a deep clone of this item's configuration, and invokes any registered
-     * duplicate callbacks with the cloned configuration as an argument
-     */
-    TestDataItem.prototype.duplicate = function () {
-        const sourceItem = JSON.parse(JSON.stringify(this.config));
-        const self = this;
-
-        this.eventEmitter.emit('duplicate', {
-            sourceItem: sourceItem,
-            index: self.index
-        });
-    };
-
-    /**
-     * When a telemetry property key is selected, create the appropriate value input
-     * and add it to the view
-     * @param {string} key The key of currently selected telemetry property
-     */
-    TestDataItem.prototype.generateValueInput = function (key) {
-        const evaluator = this.conditionManager.getEvaluator();
-        const inputArea = $('.t-value-inputs', this.domElement);
-        const dataType = this.conditionManager.getTelemetryPropertyType(this.config.object, key);
-        const inputType = evaluator.getInputTypeById(dataType);
-
-        inputArea.html('');
-        if (inputType) {
-            if (!this.config.value) {
-                this.config.value = (inputType === 'number' ? 0 : '');
-            }
-
-            this.valueInput = $('<input class="sm" type = "' + inputType + '" value = "' + this.config.value + '"> </input>').get(0);
-            inputArea.append(this.valueInput);
-        }
-    };
-
-    return TestDataItem;
-});
+    self.eventEmitter.emit('change', {
+      value: value,
+      property: property,
+      index: self.index
+    });
+  }
+
+  /**
+   * An input event handler for this item's value field. Invokes any change
+   * callbacks associated with this item
+   * @param {Event} event The input event that initiated this callback
+   * @private
+   */
+  function onValueInput(event) {
+    const elem = event.target;
+    const value = isNaN(elem.valueAsNumber) ? elem.value : elem.valueAsNumber;
+
+    if (elem.tagName.toUpperCase() === 'INPUT') {
+      self.eventEmitter.emit('change', {
+        value: value,
+        property: 'value',
+        index: self.index
+      });
+    }
+  }
+
+  this.listenTo(this.deleteButton, 'click', this.remove);
+  this.listenTo(this.duplicateButton, 'click', this.duplicate);
+
+  this.selects.object = new ObjectSelect(this.config, this.conditionManager);
+  this.selects.key = new KeySelect(
+    this.config,
+    this.selects.object,
+    this.conditionManager,
+    function (value) {
+      onSelectChange(value, 'key');
+    }
+  );
+
+  this.selects.object.on('change', function (value) {
+    onSelectChange(value, 'object');
+  });
+
+  Object.values(this.selects).forEach(function (select) {
+    self.domElement.querySelector('.t-configuration').append(select.getDOM());
+  });
+  this.listenTo(this.domElement, 'input', onValueInput);
+}
+
+/**
+ * Gets the DOM associated with this element's view
+ * @return {Element}
+ */
+TestDataItem.prototype.getDOM = function (container) {
+  return this.domElement;
+};
+
+/**
+ * Register a callback with this item: supported callbacks are remove, change,
+ * and duplicate
+ * @param {string} event The key for the event to listen to
+ * @param {function} callback The function that this rule will invoke on this event
+ * @param {Object} context A reference to a scope to use as the context for
+ *                         context for the callback function
+ */
+TestDataItem.prototype.on = function (event, callback, context) {
+  if (this.supportedCallbacks.includes(event)) {
+    this.eventEmitter.on(event, callback, context || this);
+  }
+};
+
+/**
+ * Implement "off" to complete event emitter interface.
+ */
+TestDataItem.prototype.off = function (event, callback, context) {
+  this.eventEmitter.off(event, callback, context);
+};
+
+/**
+ * Hide the appropriate inputs when this is the only item
+ */
+TestDataItem.prototype.hideButtons = function () {
+  this.deleteButton.style.display = 'none';
+};
+
+/**
+ * Remove this item from the configuration. Invokes any registered
+ * remove callbacks
+ */
+TestDataItem.prototype.remove = function () {
+  const self = this;
+  this.eventEmitter.emit('remove', self.index);
+  this.stopListening();
+
+  Object.values(this.selects).forEach(function (select) {
+    select.destroy();
+  });
+};
+
+/**
+ * Makes a deep clone of this item's configuration, and invokes any registered
+ * duplicate callbacks with the cloned configuration as an argument
+ */
+TestDataItem.prototype.duplicate = function () {
+  const sourceItem = JSON.parse(JSON.stringify(this.config));
+  const self = this;
+
+  this.eventEmitter.emit('duplicate', {
+    sourceItem: sourceItem,
+    index: self.index
+  });
+};
+
+/**
+ * When a telemetry property key is selected, create the appropriate value input
+ * and add it to the view
+ * @param {string} key The key of currently selected telemetry property
+ */
+TestDataItem.prototype.generateValueInput = function (key) {
+  const evaluator = this.conditionManager.getEvaluator();
+  const inputArea = this.domElement.querySelector('.t-value-inputs');
+  const dataType = this.conditionManager.getTelemetryPropertyType(this.config.object, key);
+  const inputType = evaluator.getInputTypeById(dataType);
+
+  inputArea.innerHTML = '';
+  if (inputType) {
+    if (!this.config.value) {
+      this.config.value = inputType === 'number' ? 0 : '';
+    }
+
+    const newInput = document.createElement('input');
+    newInput.type = `${inputType}`;
+    newInput.value = `${this.config.value}`;
+
+    this.valueInput = newInput;
+    inputArea.append(this.valueInput);
+  }
+};
diff --git a/src/plugins/summaryWidget/src/TestDataManager.js b/src/plugins/summaryWidget/src/TestDataManager.js
index 819cc5ee3f1..5224d37075b 100644
--- a/src/plugins/summaryWidget/src/TestDataManager.js
+++ b/src/plugins/summaryWidget/src/TestDataManager.js
@@ -1,206 +1,198 @@
-define([
-    './eventHelpers',
-    '../res/testDataTemplate.html',
-    './TestDataItem',
-    'zepto',
-    'lodash'
-], function (
-    eventHelpers,
-    testDataTemplate,
-    TestDataItem,
-    $,
-    _
-) {
-
-    /**
-     * Controls the input and usage of test data in the summary widget.
-     * @constructor
-     * @param {Object} domainObject The summary widget domain object
-     * @param {ConditionManager} conditionManager A conditionManager instance
-     * @param {MCT} openmct and MCT instance
-     */
-    function TestDataManager(domainObject, conditionManager, openmct) {
-        eventHelpers.extend(this);
-        const self = this;
-
-        this.domainObject = domainObject;
-        this.manager = conditionManager;
-        this.openmct = openmct;
-
-        this.evaluator = this.manager.getEvaluator();
-        this.domElement = $(testDataTemplate);
-        this.config = this.domainObject.configuration.testDataConfig;
-        this.testCache = {};
-
-        this.itemArea = $('.t-test-data-config', this.domElement);
-        this.addItemButton = $('.add-test-condition', this.domElement);
-        this.testDataInput = $('.t-test-data-checkbox', this.domElement);
-
-        /**
-         * Toggles whether the associated {ConditionEvaluator} uses the actual
-         * subscription cache or the test data cache
-         * @param {Event} event The change event that triggered this callback
-         * @private
-         */
-        function toggleTestData(event) {
-            const elem = event.target;
-            self.evaluator.useTestData(elem.checked);
-            self.updateTestCache();
-        }
-
-        this.listenTo(this.addItemButton, 'click', function () {
-            self.initItem();
-        });
-        this.listenTo(this.testDataInput, 'change', toggleTestData);
-
-        this.evaluator.setTestDataCache(this.testCache);
-        this.evaluator.useTestData(false);
-
-        this.refreshItems();
+import _ from 'lodash';
+
+import * as templateHelpers from '../../../utils/template/templateHelpers.js';
+import testDataTemplate from '../res/testDataTemplate.html';
+import eventHelpers from './eventHelpers.js';
+import TestDataItem from './TestDataItem.js';
+
+/**
+ * Controls the input and usage of test data in the summary widget.
+ * @constructor
+ * @param {Object} domainObject The summary widget domain object
+ * @param {ConditionManager} conditionManager A conditionManager instance
+ * @param {MCT} openmct and MCT instance
+ */
+export default function TestDataManager(domainObject, conditionManager, openmct) {
+  eventHelpers.extend(this);
+  const self = this;
+
+  this.domainObject = domainObject;
+  this.manager = conditionManager;
+  this.openmct = openmct;
+
+  this.evaluator = this.manager.getEvaluator();
+  this.domElement = templateHelpers.convertTemplateToHTML(testDataTemplate)[0];
+  this.config = this.domainObject.configuration.testDataConfig;
+  this.testCache = {};
+
+  this.itemArea = this.domElement.querySelector('.t-test-data-config');
+  this.addItemButton = this.domElement.querySelector('.add-test-condition');
+  this.testDataInput = this.domElement.querySelector('.t-test-data-checkbox');
+
+  /**
+   * Toggles whether the associated {ConditionEvaluator} uses the actual
+   * subscription cache or the test data cache
+   * @param {Event} event The change event that triggered this callback
+   * @private
+   */
+  function toggleTestData(event) {
+    const elem = event.target;
+    self.evaluator.useTestData(elem.checked);
+    self.updateTestCache();
+  }
+
+  this.listenTo(this.addItemButton, 'click', function () {
+    self.initItem();
+  });
+  this.listenTo(this.testDataInput, 'change', toggleTestData);
+
+  this.evaluator.setTestDataCache(this.testCache);
+  this.evaluator.useTestData(false);
+
+  this.refreshItems();
+}
+
+/**
+ * Get the DOM element representing this test data manager in the view
+ */
+TestDataManager.prototype.getDOM = function () {
+  return this.domElement;
+};
+
+/**
+ * Initialize a new test data item, either from a source configuration, or with
+ * the default empty configuration
+ * @param {Object} [config] An object with sourceItem and index fields to instantiate
+ *                          this rule from, optional
+ */
+TestDataManager.prototype.initItem = function (config) {
+  const sourceIndex = config && config.index;
+  const defaultItem = {
+    object: '',
+    key: '',
+    value: ''
+  };
+  let newItem;
+
+  newItem = config !== undefined ? config.sourceItem : defaultItem;
+  if (sourceIndex !== undefined) {
+    this.config.splice(sourceIndex + 1, 0, newItem);
+  } else {
+    this.config.push(newItem);
+  }
+
+  this.updateDomainObject();
+  this.refreshItems();
+};
+
+/**
+ * Remove an item from this TestDataManager at the given index
+ * @param {number} removeIndex The index of the item to remove
+ */
+TestDataManager.prototype.removeItem = function (removeIndex) {
+  _.remove(this.config, function (item, index) {
+    return index === removeIndex;
+  });
+  this.updateDomainObject();
+  this.refreshItems();
+};
+
+/**
+ * Change event handler for the test data items which compose this
+ * test data generator
+ * @param {Object} event An object representing this event, with value, property,
+ *                       and index fields
+ */
+TestDataManager.prototype.onItemChange = function (event) {
+  this.config[event.index][event.property] = event.value;
+  this.updateDomainObject();
+  this.updateTestCache();
+};
+
+/**
+ * Builds the test cache from the current item configuration, and passes
+ * the new test cache to the associated {ConditionEvaluator} instance
+ */
+TestDataManager.prototype.updateTestCache = function () {
+  this.generateTestCache();
+  this.evaluator.setTestDataCache(this.testCache);
+  this.manager.triggerTelemetryCallback();
+};
+
+/**
+ * Instantiate {TestDataItem} objects from the current configuration, and
+ * update the view accordingly
+ */
+TestDataManager.prototype.refreshItems = function () {
+  const self = this;
+  if (this.items) {
+    this.items.forEach(function (item) {
+      this.stopListening(item);
+    }, this);
+  }
+
+  self.items = [];
+
+  this.domElement.querySelectorAll('.t-test-data-item').forEach((item) => {
+    item.remove();
+  });
+
+  this.config.forEach(function (item, index) {
+    const newItem = new TestDataItem(item, index, self.manager);
+    self.listenTo(newItem, 'remove', self.removeItem, self);
+    self.listenTo(newItem, 'duplicate', self.initItem, self);
+    self.listenTo(newItem, 'change', self.onItemChange, self);
+    self.items.push(newItem);
+  });
+
+  self.items.forEach(function (item) {
+    self.itemArea.prepend(item.getDOM());
+  });
+
+  if (self.items.length === 1) {
+    self.items[0].hideButtons();
+  }
+
+  this.updateTestCache();
+};
+
+/**
+ * Builds a test data cache in the format of a telemetry subscription cache
+ * as expected by a {ConditionEvaluator}
+ */
+TestDataManager.prototype.generateTestCache = function () {
+  let testCache = this.testCache;
+  const manager = this.manager;
+  const compositionObjs = manager.getComposition();
+  let metadata;
+
+  testCache = {};
+  Object.keys(compositionObjs).forEach(function (id) {
+    testCache[id] = {};
+    metadata = manager.getTelemetryMetadata(id);
+    Object.keys(metadata).forEach(function (key) {
+      testCache[id][key] = '';
+    });
+  });
+  this.config.forEach(function (item) {
+    if (testCache[item.object]) {
+      testCache[item.object][item.key] = item.value;
     }
-
-    /**
-     * Get the DOM element representing this test data manager in the view
-     */
-    TestDataManager.prototype.getDOM = function () {
-        return this.domElement;
-    };
-
-    /**
-     * Initialze a new test data item, either from a source configuration, or with
-     * the default empty configuration
-     * @param {Object} [config] An object with sourceItem and index fields to instantiate
-     *                          this rule from, optional
-     */
-    TestDataManager.prototype.initItem = function (config) {
-        const sourceIndex = config && config.index;
-        const defaultItem = {
-            object: '',
-            key: '',
-            value: ''
-        };
-        let newItem;
-
-        newItem = (config !== undefined ? config.sourceItem : defaultItem);
-        if (sourceIndex !== undefined) {
-            this.config.splice(sourceIndex + 1, 0, newItem);
-        } else {
-            this.config.push(newItem);
-        }
-
-        this.updateDomainObject();
-        this.refreshItems();
-    };
-
-    /**
-     * Remove an item from this TestDataManager at the given index
-     * @param {number} removeIndex The index of the item to remove
-     */
-    TestDataManager.prototype.removeItem = function (removeIndex) {
-        _.remove(this.config, function (item, index) {
-            return index === removeIndex;
-        });
-        this.updateDomainObject();
-        this.refreshItems();
-    };
-
-    /**
-     * Change event handler for the test data items which compose this
-     * test data generateor
-     * @param {Object} event An object representing this event, with value, property,
-     *                       and index fields
-     */
-    TestDataManager.prototype.onItemChange = function (event) {
-        this.config[event.index][event.property] = event.value;
-        this.updateDomainObject();
-        this.updateTestCache();
-    };
-
-    /**
-     * Builds the test cache from the current item configuration, and passes
-     * the new test cache to the associated {ConditionEvaluator} instance
-     */
-    TestDataManager.prototype.updateTestCache = function () {
-        this.generateTestCache();
-        this.evaluator.setTestDataCache(this.testCache);
-        this.manager.triggerTelemetryCallback();
-    };
-
-    /**
-     * Intantiate {TestDataItem} objects from the current configuration, and
-     * update the view accordingly
-     */
-    TestDataManager.prototype.refreshItems = function () {
-        const self = this;
-        if (this.items) {
-            this.items.forEach(function (item) {
-                this.stopListening(item);
-            }, this);
-        }
-
-        self.items = [];
-        $('.t-test-data-item', this.domElement).remove();
-
-        this.config.forEach(function (item, index) {
-            const newItem = new TestDataItem(item, index, self.manager);
-            self.listenTo(newItem, 'remove', self.removeItem, self);
-            self.listenTo(newItem, 'duplicate', self.initItem, self);
-            self.listenTo(newItem, 'change', self.onItemChange, self);
-            self.items.push(newItem);
-        });
-
-        self.items.forEach(function (item) {
-            // $('li:last-of-type', self.itemArea).before(item.getDOM());
-            self.itemArea.prepend(item.getDOM());
-        });
-
-        if (self.items.length === 1) {
-            self.items[0].hideButtons();
-        }
-
-        this.updateTestCache();
-    };
-
-    /**
-     * Builds a test data cache in the format of a telemetry subscription cache
-     * as expected by a {ConditionEvaluator}
-     */
-    TestDataManager.prototype.generateTestCache = function () {
-        let testCache = this.testCache;
-        const manager = this.manager;
-        const compositionObjs = manager.getComposition();
-        let metadata;
-
-        testCache = {};
-        Object.keys(compositionObjs).forEach(function (id) {
-            testCache[id] = {};
-            metadata = manager.getTelemetryMetadata(id);
-            Object.keys(metadata).forEach(function (key) {
-                testCache[id][key] = '';
-            });
-        });
-        this.config.forEach(function (item) {
-            if (testCache[item.object]) {
-                testCache[item.object][item.key] = item.value;
-            }
-        });
-
-        this.testCache = testCache;
-    };
-
-    /**
-     * Update the domain object configuration associated with this test data manager
-     */
-    TestDataManager.prototype.updateDomainObject = function () {
-        this.openmct.objects.mutate(this.domainObject, 'configuration.testDataConfig', this.config);
-    };
-
-    TestDataManager.prototype.destroy = function () {
-        this.stopListening();
-        this.items.forEach(function (item) {
-            item.remove();
-        });
-    };
-
-    return TestDataManager;
-});
+  });
+
+  this.testCache = testCache;
+};
+
+/**
+ * Update the domain object configuration associated with this test data manager
+ */
+TestDataManager.prototype.updateDomainObject = function () {
+  this.openmct.objects.mutate(this.domainObject, 'configuration.testDataConfig', this.config);
+};
+
+TestDataManager.prototype.destroy = function () {
+  this.stopListening();
+  this.items.forEach(function (item) {
+    item.remove();
+  });
+};
diff --git a/src/plugins/summaryWidget/src/WidgetDnD.js b/src/plugins/summaryWidget/src/WidgetDnD.js
index e9ee2f04009..d83c2c60e12 100644
--- a/src/plugins/summaryWidget/src/WidgetDnD.js
+++ b/src/plugins/summaryWidget/src/WidgetDnD.js
@@ -1,169 +1,162 @@
-define([
-    '../res/ruleImageTemplate.html',
-    'EventEmitter',
-    'zepto'
-], function (
-    ruleImageTemplate,
-    EventEmitter,
-    $
-) {
-
-    /**
-     * Manages the Sortable List interface for reordering rules by drag and drop
-     * @param {Element} container The DOM element that contains this Summary Widget's view
-     * @param {string[]} ruleOrder An array of rule IDs representing the current rule order
-     * @param {Object} rulesById An object mapping rule IDs to rule configurations
-     */
-    function WidgetDnD(container, ruleOrder, rulesById) {
-        this.container = container;
-        this.ruleOrder = ruleOrder;
-        this.rulesById = rulesById;
-
-        this.imageContainer = $(ruleImageTemplate);
-        this.image = $('.t-drag-rule-image', this.imageContainer);
-        this.draggingId = '';
-        this.draggingRulePrevious = '';
-        this.eventEmitter = new EventEmitter();
-        this.supportedCallbacks = ['drop'];
-
-        this.drag = this.drag.bind(this);
-        this.drop = this.drop.bind(this);
-
-        $(this.container).on('mousemove', this.drag);
-        $(document).on('mouseup', this.drop);
-        $(this.container).before(this.imageContainer);
-        $(this.imageContainer).hide();
+import EventEmitter from 'EventEmitter';
+
+import * as templateHelpers from '../../../utils/template/templateHelpers.js';
+import ruleImageTemplate from '../res/ruleImageTemplate.html';
+
+/**
+ * Manages the Sortable List interface for reordering rules by drag and drop
+ * @param {Element} container The DOM element that contains this Summary Widget's view
+ * @param {string[]} ruleOrder An array of rule IDs representing the current rule order
+ * @param {Object} rulesById An object mapping rule IDs to rule configurations
+ */
+export default function WidgetDnD(container, ruleOrder, rulesById) {
+  this.container = container;
+  this.ruleOrder = ruleOrder;
+  this.rulesById = rulesById;
+
+  this.imageContainer = templateHelpers.convertTemplateToHTML(ruleImageTemplate)[0];
+  this.image = this.imageContainer.querySelector('.t-drag-rule-image');
+  this.draggingId = '';
+  this.draggingRulePrevious = '';
+  this.eventEmitter = new EventEmitter();
+  this.supportedCallbacks = ['drop'];
+
+  this.drag = this.drag.bind(this);
+  this.drop = this.drop.bind(this);
+
+  this.container.addEventListener('mousemove', this.drag);
+  document.addEventListener('mouseup', this.drop);
+  this.container.parentNode.insertBefore(this.imageContainer, this.container);
+  this.imageContainer.style.display = 'none';
+}
+
+/**
+ * Remove event listeners registered to elements external to the widget
+ */
+WidgetDnD.prototype.destroy = function () {
+  this.container.removeEventListener('mousemove', this.drag);
+  document.removeEventListener('mouseup', this.drop);
+};
+
+/**
+ * Register a callback with this WidgetDnD: supported callback is drop
+ * @param {string} event The key for the event to listen to
+ * @param {function} callback The function that this rule will invoke on this event
+ * @param {Object} context A reference to a scope to use as the context for
+ *                         context for the callback function
+ */
+WidgetDnD.prototype.on = function (event, callback, context) {
+  if (this.supportedCallbacks.includes(event)) {
+    this.eventEmitter.on(event, callback, context || this);
+  }
+};
+
+/**
+ * Sets the image for the dragged element to the given DOM element
+ * @param {Element} image The HTML element to set as the drap image
+ */
+WidgetDnD.prototype.setDragImage = function (image) {
+  this.image.html(image);
+};
+
+/**
+   * Calculate where this rule has been dragged relative to the other rules
+   * @param {Event} event The mousemove or mouseup event that triggered this
+                          event handler
+    * @return {string} The ID of the rule whose drag indicator should be displayed
+    */
+WidgetDnD.prototype.getDropLocation = function (event) {
+  const ruleOrder = this.ruleOrder;
+  const rulesById = this.rulesById;
+  const draggingId = this.draggingId;
+  let offset;
+  let y;
+  let height;
+  const dropY = event.pageY;
+  let target = '';
+
+  ruleOrder.forEach(function (ruleId, index) {
+    const ruleDOM = rulesById[ruleId].getDOM();
+    offset = window.innerWidth - (ruleDOM.offsetLeft + ruleDOM.offsetWidth);
+    y = offset.top;
+    height = offset.height;
+    if (index === 0) {
+      if (dropY < y + (7 * height) / 3) {
+        target = ruleId;
+      }
+    } else if (index === ruleOrder.length - 1 && ruleId !== draggingId) {
+      if (y + height / 3 < dropY) {
+        target = ruleId;
+      }
+    } else {
+      if (y + height / 3 < dropY && dropY < y + (7 * height) / 3) {
+        target = ruleId;
+      }
+    }
+  });
+
+  return target;
+};
+
+/**
+ * Called by a {Rule} instance that initiates a drag gesture
+ * @param {string} ruleId The identifier of the rule which is being dragged
+ */
+WidgetDnD.prototype.dragStart = function (ruleId) {
+  const ruleOrder = this.ruleOrder;
+  this.draggingId = ruleId;
+  this.draggingRulePrevious = ruleOrder[ruleOrder.indexOf(ruleId) - 1];
+  this.rulesById[this.draggingRulePrevious].showDragIndicator();
+  this.imageContainer.show();
+  this.imageContainer.offset({
+    top: event.pageY - this.image.height() / 2,
+    left: event.pageX - this.image.querySelector('.t-grippy').style.width
+  });
+};
+
+/**
+ * An event handler for a mousemove event, once a rule has begun a drag gesture
+ * @param {Event} event The mousemove event that triggered this callback
+ */
+WidgetDnD.prototype.drag = function (event) {
+  let dragTarget;
+  if (this.draggingId && this.draggingId !== '') {
+    event.preventDefault();
+    dragTarget = this.getDropLocation(event);
+    this.imageContainer.offset({
+      top: event.pageY - this.image.height() / 2,
+      left: event.pageX - this.image.querySelector('.t-grippy').style.width
+    });
+    if (this.rulesById[dragTarget]) {
+      this.rulesById[dragTarget].showDragIndicator();
+    } else {
+      this.rulesById[this.draggingRulePrevious].showDragIndicator();
+    }
+  }
+};
+
+/**
+ * Handles the mouseup event that corresponds to the user dropping the rule
+ * in its final location. Invokes any registered drop callbacks with the dragged
+ * rule's ID and the ID of the target rule that the dragged rule should be
+ * inserted after
+ * @param {Event} event The mouseup event that triggered this callback
+ */
+WidgetDnD.prototype.drop = function (event) {
+  let dropTarget = this.getDropLocation(event);
+  const draggingId = this.draggingId;
+
+  if (this.draggingId && this.draggingId !== '') {
+    if (!this.rulesById[dropTarget]) {
+      dropTarget = this.draggingId;
     }
 
-    /**
-     * Remove event listeners registered to elements external to the widget
-     */
-    WidgetDnD.prototype.destroy = function () {
-        $(this.container).off('mousemove', this.drag);
-        $(document).off('mouseup', this.drop);
-    };
-
-    /**
-     * Register a callback with this WidgetDnD: supported callback is drop
-     * @param {string} event The key for the event to listen to
-     * @param {function} callback The function that this rule will envoke on this event
-     * @param {Object} context A reference to a scope to use as the context for
-     *                         context for the callback function
-     */
-    WidgetDnD.prototype.on = function (event, callback, context) {
-        if (this.supportedCallbacks.includes(event)) {
-            this.eventEmitter.on(event, callback, context || this);
-        }
-    };
-
-    /**
-     * Sets the image for the dragged element to the given DOM element
-     * @param {Element} image The HTML element to set as the drap image
-     */
-    WidgetDnD.prototype.setDragImage = function (image) {
-        this.image.html(image);
-    };
-
-    /**
-     * Calculate where this rule has been dragged relative to the other rules
-     * @param {Event} event The mousemove or mouseup event that triggered this
-                            event handler
-     * @return {string} The ID of the rule whose drag indicator should be displayed
-     */
-    WidgetDnD.prototype.getDropLocation = function (event) {
-        const ruleOrder = this.ruleOrder;
-        const rulesById = this.rulesById;
-        const draggingId = this.draggingId;
-        let offset;
-        let y;
-        let height;
-        const dropY = event.pageY;
-        let target = '';
-
-        ruleOrder.forEach(function (ruleId, index) {
-            offset = rulesById[ruleId].getDOM().offset();
-            y = offset.top;
-            height = offset.height;
-            if (index === 0) {
-                if (dropY < y + 7 * height / 3) {
-                    target = ruleId;
-                }
-            } else if (index === ruleOrder.length - 1 && ruleId !== draggingId) {
-                if (y + height / 3 < dropY) {
-                    target = ruleId;
-                }
-            } else {
-                if (y + height / 3 < dropY && dropY < y + 7 * height / 3) {
-                    target = ruleId;
-                }
-            }
-        });
-
-        return target;
-    };
-
-    /**
-     * Called by a {Rule} instance that initiates a drag gesture
-     * @param {string} ruleId The identifier of the rule which is being dragged
-     */
-    WidgetDnD.prototype.dragStart = function (ruleId) {
-        const ruleOrder = this.ruleOrder;
-        this.draggingId = ruleId;
-        this.draggingRulePrevious = ruleOrder[ruleOrder.indexOf(ruleId) - 1];
-        this.rulesById[this.draggingRulePrevious].showDragIndicator();
-        this.imageContainer.show();
-        this.imageContainer.offset({
-            top: event.pageY - this.image.height() / 2,
-            left: event.pageX - $('.t-grippy', this.image).width()
-        });
-    };
-
-    /**
-     * An event handler for a mousemove event, once a rule has begun a drag gesture
-     * @param {Event} event The mousemove event that triggered this callback
-     */
-    WidgetDnD.prototype.drag = function (event) {
-        let dragTarget;
-        if (this.draggingId && this.draggingId !== '') {
-            event.preventDefault();
-            dragTarget = this.getDropLocation(event);
-            this.imageContainer.offset({
-                top: event.pageY - this.image.height() / 2,
-                left: event.pageX - $('.t-grippy', this.image).width()
-            });
-            if (this.rulesById[dragTarget]) {
-                this.rulesById[dragTarget].showDragIndicator();
-            } else {
-                this.rulesById[this.draggingRulePrevious].showDragIndicator();
-            }
-        }
-    };
-
-    /**
-     * Handles the mouseup event that corresponds to the user dropping the rule
-     * in its final location. Invokes any registered drop callbacks with the dragged
-     * rule's ID and the ID of the target rule that the dragged rule should be
-     * inserted after
-     * @param {Event} event The mouseup event that triggered this callback
-     */
-    WidgetDnD.prototype.drop = function (event) {
-        let dropTarget = this.getDropLocation(event);
-        const draggingId = this.draggingId;
-
-        if (this.draggingId && this.draggingId !== '') {
-            if (!this.rulesById[dropTarget]) {
-                dropTarget = this.draggingId;
-            }
-
-            this.eventEmitter.emit('drop', {
-                draggingId: draggingId,
-                dropTarget: dropTarget
-            });
-            this.draggingId = '';
-            this.draggingRulePrevious = '';
-            this.imageContainer.hide();
-        }
-    };
-
-    return WidgetDnD;
-});
+    this.eventEmitter.emit('drop', {
+      draggingId: draggingId,
+      dropTarget: dropTarget
+    });
+    this.draggingId = '';
+    this.draggingRulePrevious = '';
+    this.imageContainer.hide();
+  }
+};
diff --git a/src/plugins/summaryWidget/src/eventHelpers.js b/src/plugins/summaryWidget/src/eventHelpers.js
index d4bbac4c77e..88945438a9d 100644
--- a/src/plugins/summaryWidget/src/eventHelpers.js
+++ b/src/plugins/summaryWidget/src/eventHelpers.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,79 +20,78 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([], function () {
-    const helperFunctions = {
-        listenTo: function (object, event, callback, context) {
-            if (!this._listeningTo) {
-                this._listeningTo = [];
-            }
+const helperFunctions = {
+  listenTo(object, event, callback, context) {
+    if (!this._listeningTo) {
+      this._listeningTo = [];
+    }
 
-            const listener = {
-                object: object,
-                event: event,
-                callback: callback,
-                context: context,
-                _cb: context ? callback.bind(context) : callback
-            };
-            if (object.$watch && event.indexOf('change:') === 0) {
-                const scopePath = event.replace('change:', '');
-                listener.unlisten = object.$watch(scopePath, listener._cb, true);
-            } else if (object.$on) {
-                listener.unlisten = object.$on(event, listener._cb);
-            } else if (object.addEventListener) {
-                object.addEventListener(event, listener._cb);
-            } else {
-                object.on(event, listener._cb);
-            }
+    const listener = {
+      object: object,
+      event: event,
+      callback: callback,
+      context: context,
+      _cb: context ? callback.bind(context) : callback
+    };
+    if (object.$watch && event.indexOf('change:') === 0) {
+      const scopePath = event.replace('change:', '');
+      listener.unlisten = object.$watch(scopePath, listener._cb, true);
+    } else if (object.$on) {
+      listener.unlisten = object.$on(event, listener._cb);
+    } else if (object.addEventListener) {
+      object.addEventListener(event, listener._cb);
+    } else {
+      object.on(event, listener._cb);
+    }
 
-            this._listeningTo.push(listener);
-        },
+    this._listeningTo.push(listener);
+  },
 
-        stopListening: function (object, event, callback, context) {
-            if (!this._listeningTo) {
-                this._listeningTo = [];
-            }
+  stopListening(object, event, callback, context) {
+    if (!this._listeningTo) {
+      this._listeningTo = [];
+    }
 
-            this._listeningTo.filter(function (listener) {
-                if (object && object !== listener.object) {
-                    return false;
-                }
+    this._listeningTo
+      .filter(function (listener) {
+        if (object && object !== listener.object) {
+          return false;
+        }
 
-                if (event && event !== listener.event) {
-                    return false;
-                }
+        if (event && event !== listener.event) {
+          return false;
+        }
 
-                if (callback && callback !== listener.callback) {
-                    return false;
-                }
+        if (callback && callback !== listener.callback) {
+          return false;
+        }
 
-                if (context && context !== listener.context) {
-                    return false;
-                }
+        if (context && context !== listener.context) {
+          return false;
+        }
 
-                return true;
-            })
-                .map(function (listener) {
-                    if (listener.unlisten) {
-                        listener.unlisten();
-                    } else if (listener.object.removeEventListener) {
-                        listener.object.removeEventListener(listener.event, listener._cb);
-                    } else {
-                        listener.object.off(listener.event, listener._cb);
-                    }
+        return true;
+      })
+      .map(function (listener) {
+        if (listener.unlisten) {
+          listener.unlisten();
+        } else if (listener.object.removeEventListener) {
+          listener.object.removeEventListener(listener.event, listener._cb);
+        } else {
+          listener.object.off(listener.event, listener._cb);
+        }
 
-                    return listener;
-                })
-                .forEach(function (listener) {
-                    this._listeningTo.splice(this._listeningTo.indexOf(listener), 1);
-                }, this);
-        },
+        return listener;
+      })
+      .forEach(function (listener) {
+        this._listeningTo.splice(this._listeningTo.indexOf(listener), 1);
+      }, this);
+  },
 
-        extend: function (object) {
-            object.listenTo = helperFunctions.listenTo;
-            object.stopListening = helperFunctions.stopListening;
-        }
-    };
+  extend: function (object) {
+    object.listenTo = helperFunctions.listenTo;
+    object.stopListening = helperFunctions.stopListening;
+  }
+};
 
-    return helperFunctions;
-});
+export default helperFunctions;
diff --git a/src/plugins/summaryWidget/src/input/ColorPalette.js b/src/plugins/summaryWidget/src/input/ColorPalette.js
index 0bbe236419c..882956aefe7 100644
--- a/src/plugins/summaryWidget/src/input/ColorPalette.js
+++ b/src/plugins/summaryWidget/src/input/ColorPalette.js
@@ -1,65 +1,126 @@
-define([
-    './Palette',
-    'zepto'
-],
-function (
-    Palette,
-    $
-) {
+import Palette from './Palette.js';
 
-    //The colors that will be used to instantiate this palette if none are provided
-    const DEFAULT_COLORS = [
-        '#000000', '#434343', '#666666', '#999999', '#b7b7b7', '#cccccc', '#d9d9d9', '#efefef', '#f3f3f3', '#ffffff',
-        '#980000', '#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff', '#4a86e8', '#0000ff', '#9900ff', '#ff00ff',
-        '#e6b8af', '#f4cccc', '#fce5cd', '#fff2cc', '#d9ead3', '#d0e0e3', '#c9daf8', '#cfe2f3', '#d9d2e9', '#ead1dc',
-        '#dd7e6b', '#dd7e6b', '#f9cb9c', '#ffe599', '#b6d7a8', '#a2c4c9', '#a4c2f4', '#9fc5e8', '#b4a7d6', '#d5a6bd',
-        '#cc4125', '#e06666', '#f6b26b', '#ffd966', '#93c47d', '#76a5af', '#6d9eeb', '#6fa8dc', '#8e7cc3', '#c27ba0',
-        '#a61c00', '#cc0000', '#e69138', '#f1c232', '#6aa84f', '#45818e', '#3c78d8', '#3d85c6', '#674ea7', '#a64d79',
-        '#85200c', '#990000', '#b45f06', '#bf9000', '#38761d', '#134f5c', '#1155cc', '#0b5394', '#351c75', '#741b47',
-        '#5b0f00', '#660000', '#783f04', '#7f6000', '#274e13', '#0c343d', '#1c4587', '#073763', '#20124d', '#4c1130'
-    ];
+// The colors that will be used to instantiate this palette if none are provided
+const DEFAULT_COLORS = [
+  '#000000',
+  '#434343',
+  '#666666',
+  '#999999',
+  '#b7b7b7',
+  '#cccccc',
+  '#d9d9d9',
+  '#efefef',
+  '#f3f3f3',
+  '#ffffff',
+  '#980000',
+  '#ff0000',
+  '#ff9900',
+  '#ffff00',
+  '#00ff00',
+  '#00ffff',
+  '#4a86e8',
+  '#0000ff',
+  '#9900ff',
+  '#ff00ff',
+  '#e6b8af',
+  '#f4cccc',
+  '#fce5cd',
+  '#fff2cc',
+  '#d9ead3',
+  '#d0e0e3',
+  '#c9daf8',
+  '#cfe2f3',
+  '#d9d2e9',
+  '#ead1dc',
+  '#dd7e6b',
+  '#dd7e6b',
+  '#f9cb9c',
+  '#ffe599',
+  '#b6d7a8',
+  '#a2c4c9',
+  '#a4c2f4',
+  '#9fc5e8',
+  '#b4a7d6',
+  '#d5a6bd',
+  '#cc4125',
+  '#e06666',
+  '#f6b26b',
+  '#ffd966',
+  '#93c47d',
+  '#76a5af',
+  '#6d9eeb',
+  '#6fa8dc',
+  '#8e7cc3',
+  '#c27ba0',
+  '#a61c00',
+  '#cc0000',
+  '#e69138',
+  '#f1c232',
+  '#6aa84f',
+  '#45818e',
+  '#3c78d8',
+  '#3d85c6',
+  '#674ea7',
+  '#a64d79',
+  '#85200c',
+  '#990000',
+  '#b45f06',
+  '#bf9000',
+  '#38761d',
+  '#134f5c',
+  '#1155cc',
+  '#0b5394',
+  '#351c75',
+  '#741b47',
+  '#5b0f00',
+  '#660000',
+  '#783f04',
+  '#7f6000',
+  '#274e13',
+  '#0c343d',
+  '#1c4587',
+  '#073763',
+  '#20124d',
+  '#4c1130'
+];
 
-    /**
-     * Instantiates a new Open MCT Color Palette input
-     * @constructor
-     * @param {string} cssClass The class name of the icon which should be applied
-     *                          to this palette
-     * @param {Element} container The view that contains this palette
-     * @param {string[]} colors (optional) A list of colors that should be used to instantiate this palette
-     */
-    function ColorPalette(cssClass, container, colors) {
-        this.colors = colors || DEFAULT_COLORS;
-        this.palette = new Palette(cssClass, container, this.colors);
+/**
+ * Instantiates a new Open MCT Color Palette input
+ * @constructor
+ * @param {string} cssClass The class name of the icon which should be applied
+ *                          to this palette
+ * @param {Element} container The view that contains this palette
+ * @param {string[]} colors (optional) A list of colors that should be used to instantiate this palette
+ */
+export default function ColorPalette(cssClass, container, colors) {
+  this.colors = colors || DEFAULT_COLORS;
+  this.palette = new Palette(cssClass, container, this.colors);
 
-        this.palette.setNullOption('rgba(0,0,0,0)');
+  this.palette.setNullOption('rgba(0,0,0,0)');
 
-        const domElement = $(this.palette.getDOM());
-        const self = this;
+  const domElement = this.palette.getDOM();
+  const self = this;
 
-        $('.c-button--menu', domElement).addClass('c-button--swatched');
-        $('.t-swatch', domElement).addClass('color-swatch');
-        $('.c-palette', domElement).addClass('c-palette--color');
+  domElement.querySelector('.c-button--menu').classList.add('c-button--swatched');
+  domElement.querySelector('.t-swatch').classList.add('color-swatch');
+  domElement.querySelector('.c-palette').classList.add('c-palette--color');
 
-        $('.c-palette__item', domElement).each(function () {
-            // eslint-disable-next-line no-invalid-this
-            const elem = this;
-            $(elem).css('background-color', elem.dataset.item);
-        });
+  domElement.querySelectorAll('.c-palette__item').forEach((item) => {
+    // eslint-disable-next-line no-invalid-this
+    item.style.backgroundColor = item.dataset.item;
+  });
 
-        /**
-         * Update this palette's current selection indicator with the style
-         * of the currently selected item
-         * @private
-         */
-        function updateSwatch() {
-            const color = self.palette.getCurrent();
-            $('.color-swatch', domElement).css('background-color', color);
-        }
+  /**
+   * Update this palette's current selection indicator with the style
+   * of the currently selected item
+   * @private
+   */
+  function updateSwatch() {
+    const color = self.palette.getCurrent();
+    domElement.querySelector('.color-swatch').style.backgroundColor = color;
+  }
 
-        this.palette.on('change', updateSwatch);
+  this.palette.on('change', updateSwatch);
 
-        return this.palette;
-    }
-
-    return ColorPalette;
-});
+  return this.palette;
+}
diff --git a/src/plugins/summaryWidget/src/input/IconPalette.js b/src/plugins/summaryWidget/src/input/IconPalette.js
index cdc011d5da3..717a5fc74a4 100644
--- a/src/plugins/summaryWidget/src/input/IconPalette.js
+++ b/src/plugins/summaryWidget/src/input/IconPalette.js
@@ -1,81 +1,75 @@
-define([
-    './Palette',
-    'zepto'
-], function (
-    Palette,
-    $
-) {
-    //The icons that will be used to instantiate this palette if none are provided
-    const DEFAULT_ICONS = [
-        'icon-alert-rect',
-        'icon-alert-triangle',
-        'icon-arrow-down',
-        'icon-arrow-left',
-        'icon-arrow-right',
-        'icon-arrow-double-up',
-        'icon-arrow-tall-up',
-        'icon-arrow-tall-down',
-        'icon-arrow-double-down',
-        'icon-arrow-up',
-        'icon-asterisk',
-        'icon-bell',
-        'icon-check',
-        'icon-eye-open',
-        'icon-gear',
-        'icon-hourglass',
-        'icon-info',
-        'icon-link',
-        'icon-lock',
-        'icon-people',
-        'icon-person',
-        'icon-plus',
-        'icon-trash',
-        'icon-x'
-    ];
+import Palette from './Palette.js';
 
-    /**
-     * Instantiates a new Open MCT Icon Palette input
-     * @constructor
-     * @param {string} cssClass The class name of the icon which should be applied
-     *                          to this palette
-     * @param {Element} container The view that contains this palette
-     * @param {string[]} icons (optional) A list of icons that should be used to instantiate this palette
-     */
-    function IconPalette(cssClass, container, icons) {
-        this.icons = icons || DEFAULT_ICONS;
-        this.palette = new Palette(cssClass, container, this.icons);
+//The icons that will be used to instantiate this palette if none are provided
+const DEFAULT_ICONS = [
+  'icon-alert-rect',
+  'icon-alert-triangle',
+  'icon-arrow-down',
+  'icon-arrow-left',
+  'icon-arrow-right',
+  'icon-arrow-double-up',
+  'icon-arrow-tall-up',
+  'icon-arrow-tall-down',
+  'icon-arrow-double-down',
+  'icon-arrow-up',
+  'icon-asterisk',
+  'icon-bell',
+  'icon-check',
+  'icon-eye-open',
+  'icon-gear',
+  'icon-hourglass',
+  'icon-info',
+  'icon-link',
+  'icon-lock',
+  'icon-people',
+  'icon-person',
+  'icon-plus',
+  'icon-trash',
+  'icon-x'
+];
 
-        this.palette.setNullOption(' ');
-        this.oldIcon = this.palette.current || ' ';
+/**
+ * Instantiates a new Open MCT Icon Palette input
+ * @constructor
+ * @param {string} cssClass The class name of the icon which should be applied
+ *                          to this palette
+ * @param {Element} container The view that contains this palette
+ * @param {string[]} icons (optional) A list of icons that should be used to instantiate this palette
+ */
+export default function IconPalette(cssClass, container, icons) {
+  this.icons = icons || DEFAULT_ICONS;
+  this.palette = new Palette(cssClass, container, this.icons);
 
-        const domElement = $(this.palette.getDOM());
-        const self = this;
+  this.palette.setNullOption('');
+  this.oldIcon = this.palette.current || '';
 
-        $('.c-button--menu', domElement).addClass('c-button--swatched');
-        $('.t-swatch', domElement).addClass('icon-swatch');
-        $('.c-palette', domElement).addClass('c-palette--icon');
+  const domElement = this.palette.getDOM();
+  const self = this;
 
-        $('.c-palette-item', domElement).each(function () {
-            // eslint-disable-next-line no-invalid-this
-            const elem = this;
-            $(elem).addClass(elem.dataset.item);
-        });
+  domElement.querySelector('.c-button--menu').classList.add('c-button--swatched');
+  domElement.querySelector('.t-swatch').classList.add('icon-swatch');
+  domElement.querySelector('.c-palette').classList.add('c-palette--icon');
 
-        /**
-         * Update this palette's current selection indicator with the style
-         * of the currently selected item
-         * @private
-         */
-        function updateSwatch() {
-            $('.icon-swatch', domElement).removeClass(self.oldIcon)
-                .addClass(self.palette.getCurrent());
-            self.oldIcon = self.palette.getCurrent();
-        }
+  domElement.querySelectorAll('.c-palette-item').forEach((item) => {
+    // eslint-disable-next-line no-invalid-this
+    item.classList.add(item.dataset.item);
+  });
 
-        this.palette.on('change', updateSwatch);
-
-        return this.palette;
+  /**
+   * Update this palette's current selection indicator with the style
+   * of the currently selected item
+   * @private
+   */
+  function updateSwatch() {
+    if (self.oldIcon) {
+      domElement.querySelector('.icon-swatch').classList.remove(self.oldIcon);
     }
 
-    return IconPalette;
-});
+    domElement.querySelector('.icon-swatch').classList.add(self.palette.getCurrent());
+    self.oldIcon = self.palette.getCurrent();
+  }
+
+  this.palette.on('change', updateSwatch);
+
+  return this.palette;
+}
diff --git a/src/plugins/summaryWidget/src/input/KeySelect.js b/src/plugins/summaryWidget/src/input/KeySelect.js
index 7be2b8dbb3a..c5ec2c4e7fa 100644
--- a/src/plugins/summaryWidget/src/input/KeySelect.js
+++ b/src/plugins/summaryWidget/src/input/KeySelect.js
@@ -1,99 +1,93 @@
-define([
-    './Select'
-], function (
-    Select
-) {
+import Select from './Select.js';
 
-    /**
-     * Create a {Select} element whose composition is dynamically updated with
-     * the telemetry fields of a particular domain object
-     * @constructor
-     * @param {Object} config The current state of this select. Must have object
-     *                        and key fields
-     * @param {ObjectSelect} objectSelect The linked ObjectSelect instance to which
-     *                                    this KeySelect should listen to for change
-     *                                    events
-     * @param {ConditionManager} manager A ConditionManager instance from which
-     *                                   to receive telemetry metadata
-     * @param {function} changeCallback A change event callback to register with this
-     *                                  select on initialization
-     */
-    const NULLVALUE = '- Select Field -';
+/**
+ * Create a {Select} element whose composition is dynamically updated with
+ * the telemetry fields of a particular domain object
+ * @constructor
+ * @param {Object} config The current state of this select. Must have object
+ *                        and key fields
+ * @param {ObjectSelect} objectSelect The linked ObjectSelect instance to which
+ *                                    this KeySelect should listen to for change
+ *                                    events
+ * @param {ConditionManager} manager A ConditionManager instance from which
+ *                                   to receive telemetry metadata
+ * @param {function} changeCallback A change event callback to register with this
+ *                                  select on initialization
+ */
+const NULLVALUE = '- Select Field -';
 
-    function KeySelect(config, objectSelect, manager, changeCallback) {
-        const self = this;
+export default function KeySelect(config, objectSelect, manager, changeCallback) {
+  const self = this;
 
-        this.config = config;
-        this.objectSelect = objectSelect;
-        this.manager = manager;
+  this.config = config;
+  this.objectSelect = objectSelect;
+  this.manager = manager;
 
-        this.select = new Select();
-        this.select.hide();
-        this.select.addOption('', NULLVALUE);
-        if (changeCallback) {
-            this.select.on('change', changeCallback);
-        }
+  this.select = new Select();
+  this.select.hide();
+  this.select.addOption('', NULLVALUE);
+  if (changeCallback) {
+    this.select.on('change', changeCallback);
+  }
 
-        /**
-         * Change event handler for the {ObjectSelect} to which this KeySelect instance
-         * is linked. Loads the new object's metadata and updates its select element's
-         * composition.
-         * @param {Object} key The key identifying the newly selected domain object
-         * @private
-         */
-        function onObjectChange(key) {
-            const selected = self.manager.metadataLoadCompleted() ? self.select.getSelected() : self.config.key;
-            self.telemetryMetadata = self.manager.getTelemetryMetadata(key) || {};
-            self.generateOptions();
-            self.select.setSelected(selected);
-        }
+  /**
+   * Change event handler for the {ObjectSelect} to which this KeySelect instance
+   * is linked. Loads the new object's metadata and updates its select element's
+   * composition.
+   * @param {Object} key The key identifying the newly selected domain object
+   * @private
+   */
+  function onObjectChange(key) {
+    const selected = self.manager.metadataLoadCompleted()
+      ? self.select.getSelected()
+      : self.config.key;
+    self.telemetryMetadata = self.manager.getTelemetryMetadata(key) || {};
+    self.generateOptions();
+    self.select.setSelected(selected);
+  }
 
-        /**
-         * Event handler for the intial metadata load event from the associated
-         * ConditionManager. Retreives metadata from the manager and populates
-         * the select element.
-         * @private
-         */
-        function onMetadataLoad() {
-            if (self.manager.getTelemetryMetadata(self.config.object)) {
-                self.telemetryMetadata = self.manager.getTelemetryMetadata(self.config.object);
-                self.generateOptions();
-            }
-
-            self.select.setSelected(self.config.key);
-        }
-
-        if (self.manager.metadataLoadCompleted()) {
-            onMetadataLoad();
-        }
+  /**
+   * Event handler for the initial metadata load event from the associated
+   * ConditionManager. Retrieves metadata from the manager and populates
+   * the select element.
+   * @private
+   */
+  function onMetadataLoad() {
+    if (self.manager.getTelemetryMetadata(self.config.object)) {
+      self.telemetryMetadata = self.manager.getTelemetryMetadata(self.config.object);
+      self.generateOptions();
+    }
 
-        this.objectSelect.on('change', onObjectChange, this);
-        this.manager.on('metadata', onMetadataLoad);
+    self.select.setSelected(self.config.key);
+  }
 
-        return this.select;
-    }
+  if (self.manager.metadataLoadCompleted()) {
+    onMetadataLoad();
+  }
 
-    /**
-     * Populate this select with options based on its current composition
-     */
-    KeySelect.prototype.generateOptions = function () {
-        const items = Object.entries(this.telemetryMetadata).map(function (metaDatum) {
-            return [metaDatum[0], metaDatum[1].name];
-        });
-        items.splice(0, 0, ['', NULLVALUE]);
-        this.select.setOptions(items);
+  this.objectSelect.on('change', onObjectChange, this);
+  this.manager.on('metadata', onMetadataLoad);
 
-        if (this.select.options.length < 2) {
-            this.select.hide();
-        } else if (this.select.options.length > 1) {
-            this.select.show();
-        }
-    };
+  return this.select;
+}
 
-    KeySelect.prototype.destroy = function () {
-        this.objectSelect.destroy();
-    };
+/**
+ * Populate this select with options based on its current composition
+ */
+KeySelect.prototype.generateOptions = function () {
+  const items = Object.entries(this.telemetryMetadata).map(function (metaDatum) {
+    return [metaDatum[0], metaDatum[1].name];
+  });
+  items.splice(0, 0, ['', NULLVALUE]);
+  this.select.setOptions(items);
 
-    return KeySelect;
+  if (this.select.options.length < 2) {
+    this.select.hide();
+  } else if (this.select.options.length > 1) {
+    this.select.show();
+  }
+};
 
-});
+KeySelect.prototype.destroy = function () {
+  this.objectSelect.destroy();
+};
diff --git a/src/plugins/summaryWidget/src/input/ObjectSelect.js b/src/plugins/summaryWidget/src/input/ObjectSelect.js
index 4b2a8a20be7..40f0a506d86 100644
--- a/src/plugins/summaryWidget/src/input/ObjectSelect.js
+++ b/src/plugins/summaryWidget/src/input/ObjectSelect.js
@@ -1,93 +1,86 @@
-define([
-    './Select',
-    'objectUtils'
-], function (
-    Select,
-    objectUtils
-) {
+import { makeKeyString } from 'objectUtils';
 
-    /**
-     * Create a {Select} element whose composition is dynamically updated with
-     * the current composition of the Summary Widget
-     * @constructor
-     * @param {Object} config The current state of this select. Must have an
-     *                        object field
-     * @param {ConditionManager} manager A ConditionManager instance from which
-     *                                   to receive the current composition status
-     * @param {string[][]} baseOptions A set of [value, label] keyword pairs to
-     *                                 display regardless of the composition state
-     */
-    function ObjectSelect(config, manager, baseOptions) {
-        const self = this;
+import Select from './Select.js';
 
-        this.config = config;
-        this.manager = manager;
+/**
+ * Create a {Select} element whose composition is dynamically updated with
+ * the current composition of the Summary Widget
+ * @constructor
+ * @param {Object} config The current state of this select. Must have an
+ *                        object field
+ * @param {ConditionManager} manager A ConditionManager instance from which
+ *                                   to receive the current composition status
+ * @param {string[][]} baseOptions A set of [value, label] keyword pairs to
+ *                                 display regardless of the composition state
+ */
+export default function ObjectSelect(config, manager, baseOptions) {
+  const self = this;
 
-        this.select = new Select();
-        this.baseOptions = [['', '- Select Telemetry -']];
-        if (baseOptions) {
-            this.baseOptions = this.baseOptions.concat(baseOptions);
-        }
+  this.config = config;
+  this.manager = manager;
 
-        this.baseOptions.forEach(function (option) {
-            self.select.addOption(option[0], option[1]);
-        });
+  this.select = new Select();
+  this.baseOptions = [['', '- Select Telemetry -']];
+  if (baseOptions) {
+    this.baseOptions = this.baseOptions.concat(baseOptions);
+  }
 
-        this.compositionObjs = this.manager.getComposition();
-        self.generateOptions();
+  this.baseOptions.forEach(function (option) {
+    self.select.addOption(option[0], option[1]);
+  });
 
-        /**
-         * Add a new composition object to this select when a composition added
-         * is detected on the Summary Widget
-         * @param {Object} obj The newly added domain object
-         * @private
-         */
-        function onCompositionAdd(obj) {
-            self.select.addOption(objectUtils.makeKeyString(obj.identifier), obj.name);
-        }
+  this.compositionObjs = this.manager.getComposition();
+  self.generateOptions();
 
-        /**
-         * Refresh the composition of this select when a domain object is removed
-         * from the Summary Widget's composition
-         * @private
-         */
-        function onCompositionRemove() {
-            const selected = self.select.getSelected();
-            self.generateOptions();
-            self.select.setSelected(selected);
-        }
+  /**
+   * Add a new composition object to this select when a composition added
+   * is detected on the Summary Widget
+   * @param {Object} obj The newly added domain object
+   * @private
+   */
+  function onCompositionAdd(obj) {
+    self.select.addOption(makeKeyString(obj.identifier), obj.name);
+  }
 
-        /**
-         * Defer setting the selected state on initial load until load is complete
-         * @private
-         */
-        function onCompositionLoad() {
-            self.select.setSelected(self.config.object);
-        }
+  /**
+   * Refresh the composition of this select when a domain object is removed
+   * from the Summary Widget's composition
+   * @private
+   */
+  function onCompositionRemove() {
+    const selected = self.select.getSelected();
+    self.generateOptions();
+    self.select.setSelected(selected);
+  }
 
-        this.manager.on('add', onCompositionAdd);
-        this.manager.on('remove', onCompositionRemove);
-        this.manager.on('load', onCompositionLoad);
+  /**
+   * Defer setting the selected state on initial load until load is complete
+   * @private
+   */
+  function onCompositionLoad() {
+    self.select.setSelected(self.config.object);
+  }
 
-        if (this.manager.loadCompleted()) {
-            onCompositionLoad();
-        }
+  this.manager.on('add', onCompositionAdd);
+  this.manager.on('remove', onCompositionRemove);
+  this.manager.on('load', onCompositionLoad);
 
-        return this.select;
-    }
+  if (this.manager.loadCompleted()) {
+    onCompositionLoad();
+  }
 
-    /**
-     * Populate this select with options based on its current composition
-     */
-    ObjectSelect.prototype.generateOptions = function () {
-        const items = Object.values(this.compositionObjs).map(function (obj) {
-            return [objectUtils.makeKeyString(obj.identifier), obj.name];
-        });
-        this.baseOptions.forEach(function (option, index) {
-            items.splice(index, 0, option);
-        });
-        this.select.setOptions(items);
-    };
+  return this.select;
+}
 
-    return ObjectSelect;
-});
+/**
+ * Populate this select with options based on its current composition
+ */
+ObjectSelect.prototype.generateOptions = function () {
+  const items = Object.values(this.compositionObjs).map(function (obj) {
+    return [makeKeyString(obj.identifier), obj.name];
+  });
+  this.baseOptions.forEach(function (option, index) {
+    items.splice(index, 0, option);
+  });
+  this.select.setOptions(items);
+};
diff --git a/src/plugins/summaryWidget/src/input/OperationSelect.js b/src/plugins/summaryWidget/src/input/OperationSelect.js
index 1e1f7a889b3..2ca0b2344c6 100644
--- a/src/plugins/summaryWidget/src/input/OperationSelect.js
+++ b/src/plugins/summaryWidget/src/input/OperationSelect.js
@@ -1,128 +1,119 @@
-define([
-    './Select',
-    '../eventHelpers'
-], function (
-    Select,
-    eventHelpers
-) {
-
-    /**
-     * Create a {Select} element whose composition is dynamically updated with
-     * the operations applying to a particular telemetry property
-     * @constructor
-     * @param {Object} config The current state of this select. Must have object,
-     *                        key, and operation fields
-     * @param {KeySelect} keySelect The linked Key Select instance to which
-     *                              this OperationSelect should listen to for change
-     *                              events
-     * @param {ConditionManager} manager A ConditionManager instance from which
-     *                                   to receive telemetry metadata
-     * @param {function} changeCallback A change event callback to register with this
-     *                                  select on initialization
-     */
-    const NULLVALUE = '- Select Comparison -';
-
-    function OperationSelect(config, keySelect, manager, changeCallback) {
-        eventHelpers.extend(this);
-        const self = this;
-
-        this.config = config;
-        this.keySelect = keySelect;
-        this.manager = manager;
-
-        this.operationKeys = [];
-        this.evaluator = this.manager.getEvaluator();
-        this.loadComplete = false;
-
-        this.select = new Select();
-        this.select.hide();
-        this.select.addOption('', NULLVALUE);
-        if (changeCallback) {
-            this.listenTo(this.select, 'change', changeCallback);
-        }
-
-        /**
-         * Change event handler for the {KeySelect} to which this OperationSelect instance
-         * is linked. Loads the operations applicable to the given telemetry property and updates
-         * its select element's composition
-         * @param {Object} key The key identifying the newly selected property
-         * @private
-         */
-        function onKeyChange(key) {
-            const selected = self.config.operation;
-            if (self.manager.metadataLoadCompleted()) {
-                self.loadOptions(key);
-                self.generateOptions();
-                self.select.setSelected(selected);
-            }
-        }
-
-        /**
-         * Event handler for the intial metadata load event from the associated
-         * ConditionManager. Retreives telemetry property types and updates the
-         * select
-         * @private
-         */
-        function onMetadataLoad() {
-            if (self.manager.getTelemetryPropertyType(self.config.object, self.config.key)) {
-                self.loadOptions(self.config.key);
-                self.generateOptions();
-            }
-
-            self.select.setSelected(self.config.operation);
-        }
-
-        this.keySelect.on('change', onKeyChange);
-        this.manager.on('metadata', onMetadataLoad);
-
-        if (this.manager.metadataLoadCompleted()) {
-            onMetadataLoad();
-        }
-
-        return this.select;
+import eventHelpers from '../eventHelpers.js';
+import Select from './Select.js';
+
+/**
+ * Create a {Select} element whose composition is dynamically updated with
+ * the operations applying to a particular telemetry property
+ * @constructor
+ * @param {Object} config The current state of this select. Must have object,
+ *                        key, and operation fields
+ * @param {KeySelect} keySelect The linked Key Select instance to which
+ *                              this OperationSelect should listen to for change
+ *                              events
+ * @param {ConditionManager} manager A ConditionManager instance from which
+ *                                   to receive telemetry metadata
+ * @param {function} changeCallback A change event callback to register with this
+ *                                  select on initialization
+ */
+const NULLVALUE = '- Select Comparison -';
+
+export default function OperationSelect(config, keySelect, manager, changeCallback) {
+  eventHelpers.extend(this);
+  const self = this;
+
+  this.config = config;
+  this.keySelect = keySelect;
+  this.manager = manager;
+
+  this.operationKeys = [];
+  this.evaluator = this.manager.getEvaluator();
+  this.loadComplete = false;
+
+  this.select = new Select();
+  this.select.hide();
+  this.select.addOption('', NULLVALUE);
+  if (changeCallback) {
+    this.listenTo(this.select, 'change', changeCallback);
+  }
+
+  /**
+   * Change event handler for the {KeySelect} to which this OperationSelect instance
+   * is linked. Loads the operations applicable to the given telemetry property and updates
+   * its select element's composition
+   * @param {Object} key The key identifying the newly selected property
+   * @private
+   */
+  function onKeyChange(key) {
+    const selected = self.config.operation;
+    if (self.manager.metadataLoadCompleted()) {
+      self.loadOptions(key);
+      self.generateOptions();
+      self.select.setSelected(selected);
+    }
+  }
+
+  /**
+   * Event handler for the initial metadata load event from the associated
+   * ConditionManager. Retrieves telemetry property types and updates the
+   * select
+   * @private
+   */
+  function onMetadataLoad() {
+    if (self.manager.getTelemetryPropertyType(self.config.object, self.config.key)) {
+      self.loadOptions(self.config.key);
+      self.generateOptions();
     }
 
-    /**
-     * Populate this select with options based on its current composition
-     */
-    OperationSelect.prototype.generateOptions = function () {
-        const self = this;
-        const items = this.operationKeys.map(function (operation) {
-            return [operation, self.evaluator.getOperationText(operation)];
-        });
-        items.splice(0, 0, ['', NULLVALUE]);
-        this.select.setOptions(items);
-
-        if (this.select.options.length < 2) {
-            this.select.hide();
-        } else {
-            this.select.show();
-        }
-    };
-
-    /**
-     * Retrieve the data type associated with a given telemetry property and
-     * the applicable operations from the {ConditionEvaluator}
-     * @param {string} key The telemetry property to load operations for
-     */
-    OperationSelect.prototype.loadOptions = function (key) {
-        const self = this;
-        const operations = self.evaluator.getOperationKeys();
-        let type;
-
-        type = self.manager.getTelemetryPropertyType(self.config.object, key);
-
-        if (type !== undefined) {
-            self.operationKeys = operations.filter(function (operation) {
-                return self.evaluator.operationAppliesTo(operation, type);
-            });
-        }
-    };
-
-    OperationSelect.prototype.destroy = function () {
-        this.stopListening();
-    };
-
-    return OperationSelect;
-
-});
+    self.select.setSelected(self.config.operation);
+  }
+
+  this.keySelect.on('change', onKeyChange);
+  this.manager.on('metadata', onMetadataLoad);
+
+  if (this.manager.metadataLoadCompleted()) {
+    onMetadataLoad();
+  }
+
+  return this.select;
+}
+
+/**
+ * Populate this select with options based on its current composition
+ */
+OperationSelect.prototype.generateOptions = function () {
+  const self = this;
+  const items = this.operationKeys.map(function (operation) {
+    return [operation, self.evaluator.getOperationText(operation)];
+  });
+  items.splice(0, 0, ['', NULLVALUE]);
+  this.select.setOptions(items);
+
+  if (this.select.options.length < 2) {
+    this.select.hide();
+  } else {
+    this.select.show();
+  }
+};
+
+/**
+ * Retrieve the data type associated with a given telemetry property and
+ * the applicable operations from the {ConditionEvaluator}
+ * @param {string} key The telemetry property to load operations for
+ */
+OperationSelect.prototype.loadOptions = function (key) {
+  const self = this;
+  const operations = self.evaluator.getOperationKeys();
+  let type;
+
+  type = self.manager.getTelemetryPropertyType(self.config.object, key);
+
+  if (type !== undefined) {
+    self.operationKeys = operations.filter(function (operation) {
+      return self.evaluator.operationAppliesTo(operation, type);
+    });
+  }
+};
+
+OperationSelect.prototype.destroy = function () {
+  this.stopListening();
+};
diff --git a/src/plugins/summaryWidget/src/input/Palette.js b/src/plugins/summaryWidget/src/input/Palette.js
index ff1d3b5500a..d8c37230976 100644
--- a/src/plugins/summaryWidget/src/input/Palette.js
+++ b/src/plugins/summaryWidget/src/input/Palette.js
@@ -1,171 +1,181 @@
-define([
-    '../eventHelpers',
-    '../../res/input/paletteTemplate.html',
-    'EventEmitter',
-    'zepto'
-], function (
-    eventHelpers,
-    paletteTemplate,
-    EventEmitter,
-    $
-) {
-    /**
-     * Instantiates a new Open MCT Color Palette input
-     * @constructor
-     * @param {string} cssClass The class name of the icon which should be applied
-     *                          to this palette
-     * @param {Element} container The view that contains this palette
-     * @param {string[]} items A list of data items that will be associated with each
-     *                         palette item in the view; how this data is represented is
-     *                         up to the descendent class
-     */
-    function Palette(cssClass, container, items) {
-        eventHelpers.extend(this);
-
-        const self = this;
-
-        this.cssClass = cssClass;
-        this.items = items;
-        this.container = container;
-
-        this.domElement = $(paletteTemplate);
-        this.itemElements = {
-            nullOption: $('.c-palette__item-none .c-palette__item', this.domElement)
-        };
-        this.eventEmitter = new EventEmitter();
-        this.supportedCallbacks = ['change'];
-        this.value = this.items[0];
-        this.nullOption = ' ';
-        this.button = $('.js-button', this.domElement);
-        this.menu = $('.c-menu', this.domElement);
-
-        this.hideMenu = this.hideMenu.bind(this);
-
-        self.button.addClass(this.cssClass);
-        self.setNullOption(this.nullOption);
-
-        self.items.forEach(function (item) {
-            const itemElement = $('<div class = "c-palette__item ' + item + '"'
-                                + ' data-item = ' + item + '></div>');
-            $('.c-palette__items', self.domElement).append(itemElement);
-            self.itemElements[item] = itemElement;
-        });
-
-        $('.c-menu', self.domElement).hide();
-
-        this.listenTo($(document), 'click', this.hideMenu);
-        this.listenTo($('.js-button', self.domElement), 'click', function (event) {
-            event.stopPropagation();
-            $('.c-menu', self.container).hide();
-            $('.c-menu', self.domElement).show();
-        });
-
-        /**
-         * Event handler for selection of an individual palette item. Sets the
-         * currently selected element to be the one associated with that item's data
-         * @param {Event} event the click event that initiated this callback
-         * @private
-         */
-        function handleItemClick(event) {
-            const elem = event.currentTarget;
-            const item = elem.dataset.item;
-            self.set(item);
-            $('.c-menu', self.domElement).hide();
-        }
-
-        this.listenTo($('.c-palette__item', self.domElement), 'click', handleItemClick);
+import EventEmitter from 'EventEmitter';
+
+import * as templateHelpers from '../../../../utils/template/templateHelpers.js';
+import paletteTemplate from '../../res/input/paletteTemplate.html';
+import eventHelpers from '../eventHelpers.js';
+
+/**
+ * Instantiates a new Open MCT Color Palette input
+ * @constructor
+ * @param {string} cssClass The class name of the icon which should be applied
+ *                          to this palette
+ * @param {Element} container The view that contains this palette
+ * @param {string[]} items A list of data items that will be associated with each
+ *                         palette item in the view; how this data is represented is
+ *                         up to the descendent class
+ */
+export default function Palette(cssClass, container, items) {
+  eventHelpers.extend(this);
+
+  const self = this;
+
+  this.cssClass = cssClass;
+  this.items = items;
+  this.container = container;
+
+  this.domElement = templateHelpers.convertTemplateToHTML(paletteTemplate)[0];
+
+  this.itemElements = {
+    nullOption: this.domElement.querySelector('.c-palette__item-none .c-palette__item')
+  };
+  this.eventEmitter = new EventEmitter();
+  this.supportedCallbacks = ['change'];
+  this.value = this.items[0];
+  this.nullOption = ' ';
+  this.button = this.domElement.querySelector('.js-button');
+  this.menu = this.domElement.querySelector('.c-menu');
+
+  this.hideMenu = this.hideMenu.bind(this);
+
+  if (this.cssClass) {
+    self.button.classList.add(this.cssClass);
+  }
+
+  self.setNullOption(this.nullOption);
+
+  self.items.forEach(function (item) {
+    const itemElement = document.createElement('div');
+    itemElement.className = 'c-palette__item ' + item;
+    itemElement.setAttribute('data-item', item);
+
+    self.itemElements[item] = itemElement;
+    self.domElement.querySelector('.c-palette__items').appendChild(itemElement);
+  });
+
+  self.domElement.querySelector('.c-menu').style.display = 'none';
+
+  this.listenTo(window.document, 'click', this.hideMenu);
+  this.listenTo(self.domElement.querySelector('.js-button'), 'click', function (event) {
+    event.stopPropagation();
+    self.container.querySelector('.c-menu').style.display = 'none';
+    self.domElement.querySelector('.c-menu').style.display = '';
+  });
+
+  /**
+   * Event handler for selection of an individual palette item. Sets the
+   * currently selected element to be the one associated with that item's data
+   * @param {Event} event the click event that initiated this callback
+   * @private
+   */
+  function handleItemClick(event) {
+    const elem = event.currentTarget;
+    const item = elem.dataset.item;
+    self.set(item);
+    self.domElement.querySelector('.c-menu').style.display = 'none';
+  }
+
+  self.domElement.querySelectorAll('.c-palette__item').forEach((item) => {
+    this.listenTo(item, 'click', handleItemClick);
+  });
+}
+
+/**
+ * Get the DOM element representing this palette in the view
+ */
+Palette.prototype.getDOM = function () {
+  return this.domElement;
+};
+
+/**
+ * Clean up any event listeners registered to DOM elements external to the widget
+ */
+Palette.prototype.destroy = function () {
+  this.stopListening();
+};
+
+Palette.prototype.hideMenu = function () {
+  this.domElement.querySelector('.c-menu').style.display = 'none';
+};
+
+/**
+ * Register a callback with this palette: supported callback is change
+ * @param {string} event The key for the event to listen to
+ * @param {function} callback The function that this rule will invoke on this event
+ * @param {Object} context A reference to a scope to use as the context for
+ *                         context for the callback function
+ */
+Palette.prototype.on = function (event, callback, context) {
+  if (this.supportedCallbacks.includes(event)) {
+    this.eventEmitter.on(event, callback, context || this);
+  } else {
+    throw new Error('Unsupported event type: ' + event);
+  }
+};
+
+/**
+ * Get the currently selected value of this palette
+ * @return {string} The selected value
+ */
+Palette.prototype.getCurrent = function () {
+  return this.value;
+};
+
+/**
+ * Set the selected value of this palette; if the item doesn't exist in the
+ * palette's data model, the selected value will not change. Invokes any
+ * change callbacks associated with this palette.
+ * @param {string} item The key of the item to set as selected
+ */
+Palette.prototype.set = function (item) {
+  const self = this;
+  if (this.items.includes(item) || item === this.nullOption) {
+    this.value = item;
+    if (item === this.nullOption) {
+      this.updateSelected('nullOption');
+    } else {
+      this.updateSelected(item);
     }
-
-    /**
-     * Get the DOM element representing this palette in the view
-     */
-    Palette.prototype.getDOM = function () {
-        return this.domElement;
-    };
-
-    /**
-     * Clean up any event listeners registered to DOM elements external to the widget
-     */
-    Palette.prototype.destroy = function () {
-        this.stopListening();
-    };
-
-    Palette.prototype.hideMenu = function () {
-        $('.c-menu', this.domElement).hide();
-    };
-
-    /**
-     * Register a callback with this palette: supported callback is change
-     * @param {string} event The key for the event to listen to
-     * @param {function} callback The function that this rule will envoke on this event
-     * @param {Object} context A reference to a scope to use as the context for
-     *                         context for the callback function
-     */
-    Palette.prototype.on = function (event, callback, context) {
-        if (this.supportedCallbacks.includes(event)) {
-            this.eventEmitter.on(event, callback, context || this);
-        } else {
-            throw new Error('Unsupported event type: ' + event);
-        }
-    };
-
-    /**
-     * Get the currently selected value of this palette
-     * @return {string} The selected value
-     */
-    Palette.prototype.getCurrent = function () {
-        return this.value;
-    };
-
-    /**
-     * Set the selected value of this palette; if the item doesn't exist in the
-     * palette's data model, the selected value will not change. Invokes any
-     * change callbacks associated with this palette.
-     * @param {string} item The key of the item to set as selected
-     */
-    Palette.prototype.set = function (item) {
-        const self = this;
-        if (this.items.includes(item) || item === this.nullOption) {
-            this.value = item;
-            if (item === this.nullOption) {
-                this.updateSelected('nullOption');
-            } else {
-                this.updateSelected(item);
-            }
-        }
-
-        this.eventEmitter.emit('change', self.value);
-    };
-
-    /**
-     * Update the view assoicated with the currently selected item
-     */
-    Palette.prototype.updateSelected = function (item) {
-        $('.c-palette__item', this.domElement).removeClass('is-selected');
-        this.itemElements[item].addClass('is-selected');
-        if (item === 'nullOption') {
-            $('.t-swatch', this.domElement).addClass('no-selection');
-        } else {
-            $('.t-swatch', this.domElement).removeClass('no-selection');
-        }
-    };
-
-    /**
-     * set the property to be used for the 'no selection' item. If not set, this
-     * defaults to a single space
-     * @param {string} item The key to use as the 'no selection' item
-     */
-    Palette.prototype.setNullOption = function (item) {
-        this.nullOption = item;
-        this.itemElements.nullOption.data('item', item);
-    };
-
-    /**
-     * Hides the 'no selection' option to be hidden in the view if it doesn't apply
-     */
-    Palette.prototype.toggleNullOption = function () {
-        $('.c-palette__item-none', this.domElement).toggle();
-    };
-
-    return Palette;
-});
+  }
+
+  this.eventEmitter.emit('change', self.value);
+};
+
+/**
+ * Update the view associated with the currently selected item
+ */
+Palette.prototype.updateSelected = function (item) {
+  this.domElement.querySelectorAll('.c-palette__item').forEach((paletteItem) => {
+    if (paletteItem.classList.contains('is-selected')) {
+      paletteItem.classList.remove('is-selected');
+    }
+  });
+  this.itemElements[item].classList.add('is-selected');
+  if (item === 'nullOption') {
+    this.domElement.querySelector('.t-swatch').classList.add('no-selection');
+  } else {
+    this.domElement.querySelector('.t-swatch').classList.remove('no-selection');
+  }
+};
+
+/**
+ * set the property to be used for the 'no selection' item. If not set, this
+ * defaults to a single space
+ * @param {string} item The key to use as the 'no selection' item
+ */
+Palette.prototype.setNullOption = function (item) {
+  this.nullOption = item;
+  this.itemElements.nullOption.data = { item: item };
+};
+
+/**
+ * Hides the 'no selection' option to be hidden in the view if it doesn't apply
+ */
+Palette.prototype.toggleNullOption = function () {
+  const elem = this.domElement.querySelector('.c-palette__item-none');
+
+  if (elem.style.display === 'none') {
+    this.domElement.querySelector('.c-palette__item-none').style.display = 'flex';
+  } else {
+    this.domElement.querySelector('.c-palette__item-none').style.display = 'none';
+  }
+};
diff --git a/src/plugins/summaryWidget/src/input/Select.js b/src/plugins/summaryWidget/src/input/Select.js
index 3f89034caf0..4d1d7900148 100644
--- a/src/plugins/summaryWidget/src/input/Select.js
+++ b/src/plugins/summaryWidget/src/input/Select.js
@@ -1,152 +1,165 @@
-define([
-    '../eventHelpers',
-    '../../res/input/selectTemplate.html',
-    'EventEmitter',
-    'zepto'
-], function (
-    eventHelpers,
-    selectTemplate,
-    EventEmitter,
-    $
-) {
-
-    /**
-     * Wraps an HTML select element, and provides methods for dynamically altering
-     * its composition from the data model
-     * @constructor
-     */
-    function Select() {
-        eventHelpers.extend(this);
-
-        const self = this;
-
-        this.domElement = $(selectTemplate);
-        this.options = [];
-        this.eventEmitter = new EventEmitter();
-        this.supportedCallbacks = ['change'];
-
-        this.populate();
-
-        /**
-         * Event handler for the wrapped select element. Also invokes any change
-         * callbacks registered with this select with the new value
-         * @param {Event} event The change event that triggered this callback
-         * @private
-         */
-        function onChange(event) {
-            const elem = event.target;
-            const value = self.options[$(elem).prop('selectedIndex')];
-
-            self.eventEmitter.emit('change', value[0]);
-        }
-
-        this.listenTo($('select', this.domElement), 'change', onChange, this);
+import EventEmitter from 'EventEmitter';
+
+import * as templateHelpers from '../../../../utils/template/templateHelpers.js';
+import selectTemplate from '../../res/input/selectTemplate.html';
+import eventHelpers from '../eventHelpers.js';
+
+/**
+ * Wraps an HTML select element, and provides methods for dynamically altering
+ * its composition from the data model
+ * @constructor
+ */
+export default function Select() {
+  eventHelpers.extend(this);
+
+  const self = this;
+
+  this.domElement = templateHelpers.convertTemplateToHTML(selectTemplate)[0];
+
+  this.options = [];
+  this.eventEmitter = new EventEmitter();
+  this.supportedCallbacks = ['change'];
+
+  this.populate();
+
+  /**
+   * Event handler for the wrapped select element. Also invokes any change
+   * callbacks registered with this select with the new value
+   * @param {Event} event The change event that triggered this callback
+   * @private
+   */
+  function onChange(event) {
+    const elem = event.target;
+    const value = self.options[elem.selectedIndex];
+
+    self.eventEmitter.emit('change', value[0]);
+  }
+
+  this.listenTo(this.domElement.querySelector('select'), 'change', onChange, this);
+}
+
+/**
+ * Get the DOM element representing this Select in the view
+ * @return {Element}
+ */
+Select.prototype.getDOM = function () {
+  return this.domElement;
+};
+
+/**
+ * Register a callback with this select: supported callback is change
+ * @param {string} event The key for the event to listen to
+ * @param {function} callback The function that this rule will invoke on this event
+ * @param {Object} context A reference to a scope to use as the context for
+ *                         context for the callback function
+ */
+Select.prototype.on = function (event, callback, context) {
+  if (this.supportedCallbacks.includes(event)) {
+    this.eventEmitter.on(event, callback, context || this);
+  } else {
+    throw new Error('Unsupported event type' + event);
+  }
+};
+
+/**
+ * Unregister a callback from this select.
+ * @param {string} event The key for the event to stop listening to
+ * @param {function} callback The function to unregister
+ * @param {Object} context A reference to a scope to use as the context for the callback function
+ */
+Select.prototype.off = function (event, callback, context) {
+  if (this.supportedCallbacks.includes(event)) {
+    this.eventEmitter.off(event, callback, context || this);
+  } else {
+    throw new Error('Unsupported event type: ' + event);
+  }
+};
+
+/**
+ * Update the select element in the view from the current state of the data
+ * model
+ */
+Select.prototype.populate = function () {
+  const self = this;
+  let selectedIndex = 0;
+
+  selectedIndex = this.domElement.querySelector('select').selectedIndex;
+
+  this.domElement.querySelector('select').innerHTML = '';
+
+  self.options.forEach(function (option) {
+    const optionElement = document.createElement('option');
+    optionElement.value = option[0];
+    optionElement.innerText = `+ ${option[1]}`;
+
+    self.domElement.querySelector('select').appendChild(optionElement);
+  });
+
+  this.domElement.querySelector('select').selectedIndex = selectedIndex;
+};
+
+/**
+ * Add a single option to this select
+ * @param {string} value The value for the new option
+ * @param {string} label The human-readable text for the new option
+ */
+Select.prototype.addOption = function (value, label) {
+  this.options.push([value, label]);
+  this.populate();
+};
+
+/**
+ * Set the available options for this select. Replaces any existing options
+ * @param {string[][]} options An array of [value, label] pairs to display
+ */
+Select.prototype.setOptions = function (options) {
+  this.options = options;
+  this.populate();
+};
+
+/**
+ * Sets the currently selected element an invokes any registered change
+ * callbacks with the new value. If the value doesn't exist in this select's
+ * model, its state will not change.
+ * @param {string} value The value to set as the selected option
+ */
+Select.prototype.setSelected = function (value) {
+  let selectedIndex = 0;
+  let selectedOption;
+
+  this.options.forEach(function (option, index) {
+    if (option[0] === value) {
+      selectedIndex = index;
     }
-
-    /**
-     * Get the DOM element representing this Select in the view
-     * @return {Element}
-     */
-    Select.prototype.getDOM = function () {
-        return this.domElement;
-    };
-
-    /**
-     * Register a callback with this select: supported callback is change
-     * @param {string} event The key for the event to listen to
-     * @param {function} callback The function that this rule will envoke on this event
-     * @param {Object} context A reference to a scope to use as the context for
-     *                         context for the callback function
-     */
-    Select.prototype.on = function (event, callback, context) {
-        if (this.supportedCallbacks.includes(event)) {
-            this.eventEmitter.on(event, callback, context || this);
-        } else {
-            throw new Error('Unsupported event type' + event);
-        }
-    };
-
-    /**
-     * Update the select element in the view from the current state of the data
-     * model
-     */
-    Select.prototype.populate = function () {
-        const self = this;
-        let selectedIndex = 0;
-
-        selectedIndex = $('select', this.domElement).prop('selectedIndex');
-        $('option', this.domElement).remove();
-
-        self.options.forEach(function (option, index) {
-            $('select', self.domElement)
-                .append('<option value = "' + option[0] + '" >'
-                        + option[1] + '</option>');
-        });
-
-        $('select', this.domElement).prop('selectedIndex', selectedIndex);
-    };
-
-    /**
-     * Add a single option to this select
-     * @param {string} value The value for the new option
-     * @param {string} label The human-readable text for the new option
-     */
-    Select.prototype.addOption = function (value, label) {
-        this.options.push([value, label]);
-        this.populate();
-    };
-
-    /**
-     * Set the available options for this select. Replaces any existing options
-     * @param {string[][]} options An array of [value, label] pairs to display
-     */
-    Select.prototype.setOptions = function (options) {
-        this.options = options;
-        this.populate();
-    };
-
-    /**
-     * Sets the currently selected element an invokes any registered change
-     * callbacks with the new value. If the value doesn't exist in this select's
-     * model, its state will not change.
-     * @param {string} value The value to set as the selected option
-     */
-    Select.prototype.setSelected = function (value) {
-        let selectedIndex = 0;
-        let selectedOption;
-
-        this.options.forEach (function (option, index) {
-            if (option[0] === value) {
-                selectedIndex = index;
-            }
-        });
-        $('select', this.domElement).prop('selectedIndex', selectedIndex);
-
-        selectedOption = this.options[selectedIndex];
-        this.eventEmitter.emit('change', selectedOption[0]);
-    };
-
-    /**
-     * Get the value of the currently selected item
-     * @return {string}
-     */
-    Select.prototype.getSelected = function () {
-        return $('select', this.domElement).prop('value');
-    };
-
-    Select.prototype.hide = function () {
-        $(this.domElement).addClass('hidden');
-        $('.equal-to').addClass('hidden');
-    };
-
-    Select.prototype.show = function () {
-        $(this.domElement).removeClass('hidden');
-        $('.equal-to').removeClass('hidden');
-    };
-
-    Select.prototype.destroy = function () {
-        this.stopListening();
-    };
-
-    return Select;
-});
+  });
+  this.domElement.querySelector('select').selectedIndex = selectedIndex;
+
+  selectedOption = this.options[selectedIndex];
+  this.eventEmitter.emit('change', selectedOption[0]);
+};
+
+/**
+ * Get the value of the currently selected item
+ * @return {string}
+ */
+Select.prototype.getSelected = function () {
+  return this.domElement.querySelector('select').value;
+};
+
+Select.prototype.hide = function () {
+  this.domElement.classList.add('hidden');
+  if (this.domElement.querySelector('.equal-to')) {
+    this.domElement.querySelector('.equal-to').classList.add('hidden');
+  }
+};
+
+Select.prototype.show = function () {
+  this.domElement.classList.remove('hidden');
+  if (this.domElement.querySelector('.equal-to')) {
+    this.domElement.querySelector('.equal-to').classList.remove('hidden');
+  }
+};
+
+Select.prototype.destroy = function () {
+  this.stopListening();
+};
diff --git a/src/plugins/summaryWidget/src/telemetry/EvaluatorPool.js b/src/plugins/summaryWidget/src/telemetry/EvaluatorPool.js
index 973fc8c064e..88d3acded3f 100644
--- a/src/plugins/summaryWidget/src/telemetry/EvaluatorPool.js
+++ b/src/plugins/summaryWidget/src/telemetry/EvaluatorPool.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,47 +20,40 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    './SummaryWidgetEvaluator',
-    'objectUtils'
-], function (
-    SummaryWidgetEvaluator,
-    objectUtils
-) {
+import { makeKeyString } from 'objectUtils';
 
-    function EvaluatorPool(openmct) {
-        this.openmct = openmct;
-        this.byObjectId = {};
-        this.byEvaluator = new WeakMap();
-    }
+import SummaryWidgetEvaluator from './SummaryWidgetEvaluator.js';
 
-    EvaluatorPool.prototype.get = function (domainObject) {
-        const objectId = objectUtils.makeKeyString(domainObject.identifier);
-        let poolEntry = this.byObjectId[objectId];
-        if (!poolEntry) {
-            poolEntry = {
-                leases: 0,
-                objectId: objectId,
-                evaluator: new SummaryWidgetEvaluator(domainObject, this.openmct)
-            };
-            this.byEvaluator.set(poolEntry.evaluator, poolEntry);
-            this.byObjectId[objectId] = poolEntry;
-        }
+export default function EvaluatorPool(openmct) {
+  this.openmct = openmct;
+  this.byObjectId = {};
+  this.byEvaluator = new WeakMap();
+}
 
-        poolEntry.leases += 1;
-
-        return poolEntry.evaluator;
+EvaluatorPool.prototype.get = function (domainObject) {
+  const objectId = makeKeyString(domainObject.identifier);
+  let poolEntry = this.byObjectId[objectId];
+  if (!poolEntry) {
+    poolEntry = {
+      leases: 0,
+      objectId: objectId,
+      evaluator: new SummaryWidgetEvaluator(domainObject, this.openmct)
     };
+    this.byEvaluator.set(poolEntry.evaluator, poolEntry);
+    this.byObjectId[objectId] = poolEntry;
+  }
 
-    EvaluatorPool.prototype.release = function (evaluator) {
-        const poolEntry = this.byEvaluator.get(evaluator);
-        poolEntry.leases -= 1;
-        if (poolEntry.leases === 0) {
-            evaluator.destroy();
-            this.byEvaluator.delete(evaluator);
-            delete this.byObjectId[poolEntry.objectId];
-        }
-    };
+  poolEntry.leases += 1;
+
+  return poolEntry.evaluator;
+};
 
-    return EvaluatorPool;
-});
+EvaluatorPool.prototype.release = function (evaluator) {
+  const poolEntry = this.byEvaluator.get(evaluator);
+  poolEntry.leases -= 1;
+  if (poolEntry.leases === 0) {
+    evaluator.destroy();
+    this.byEvaluator.delete(evaluator);
+    delete this.byObjectId[poolEntry.objectId];
+  }
+};
diff --git a/src/plugins/summaryWidget/src/telemetry/EvaluatorPoolSpec.js b/src/plugins/summaryWidget/src/telemetry/EvaluatorPoolSpec.js
index 422f6ec366b..53253bfc872 100644
--- a/src/plugins/summaryWidget/src/telemetry/EvaluatorPoolSpec.js
+++ b/src/plugins/summaryWidget/src/telemetry/EvaluatorPoolSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,84 +20,75 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    './EvaluatorPool',
-    './SummaryWidgetEvaluator'
-], function (
-    EvaluatorPool,
-    SummaryWidgetEvaluator
-) {
-    describe('EvaluatorPool', function () {
-        let pool;
-        let openmct;
-        let objectA;
-        let objectB;
+import EvaluatorPool from './EvaluatorPool.js';
 
-        beforeEach(function () {
-            openmct = {
-                composition: jasmine.createSpyObj('compositionAPI', ['get']),
-                objects: jasmine.createSpyObj('objectAPI', ['observe'])
-            };
-            openmct.composition.get.and.callFake(function () {
-                const compositionCollection = jasmine.createSpyObj(
-                    'compositionCollection',
-                    [
-                        'load',
-                        'on',
-                        'off'
-                    ]
-                );
-                compositionCollection.load.and.returnValue(Promise.resolve());
+describe('EvaluatorPool', function () {
+  let pool;
+  let openmct;
+  let objectA;
+  let objectB;
 
-                return compositionCollection;
-            });
-            openmct.objects.observe.and.callFake(function () {
-                return function () {};
-            });
-            pool = new EvaluatorPool(openmct);
-            objectA = {
-                identifier: {
-                    namespace: 'someNamespace',
-                    key: 'someKey'
-                },
-                configuration: {
-                    ruleOrder: []
-                }
-            };
-            objectB = {
-                identifier: {
-                    namespace: 'otherNamespace',
-                    key: 'otherKey'
-                },
-                configuration: {
-                    ruleOrder: []
-                }
-            };
-        });
+  beforeEach(function () {
+    openmct = {
+      composition: jasmine.createSpyObj('compositionAPI', ['get']),
+      objects: jasmine.createSpyObj('objectAPI', ['observe'])
+    };
+    openmct.composition.get.and.callFake(function () {
+      const compositionCollection = jasmine.createSpyObj('compositionCollection', [
+        'load',
+        'on',
+        'off'
+      ]);
+      compositionCollection.load.and.returnValue(Promise.resolve());
 
-        it('returns new evaluators for different objects', function () {
-            const evaluatorA = pool.get(objectA);
-            const evaluatorB = pool.get(objectB);
-            expect(evaluatorA).not.toBe(evaluatorB);
-        });
+      return compositionCollection;
+    });
+    openmct.objects.observe.and.callFake(function () {
+      return function () {};
+    });
+    pool = new EvaluatorPool(openmct);
+    objectA = {
+      identifier: {
+        namespace: 'someNamespace',
+        key: 'someKey'
+      },
+      configuration: {
+        ruleOrder: []
+      }
+    };
+    objectB = {
+      identifier: {
+        namespace: 'otherNamespace',
+        key: 'otherKey'
+      },
+      configuration: {
+        ruleOrder: []
+      }
+    };
+  });
 
-        it('returns the same evaluator for the same object', function () {
-            const evaluatorA = pool.get(objectA);
-            const evaluatorB = pool.get(objectA);
-            expect(evaluatorA).toBe(evaluatorB);
+  it('returns new evaluators for different objects', function () {
+    const evaluatorA = pool.get(objectA);
+    const evaluatorB = pool.get(objectB);
+    expect(evaluatorA).not.toBe(evaluatorB);
+  });
 
-            const evaluatorC = pool.get(JSON.parse(JSON.stringify(objectA)));
-            expect(evaluatorA).toBe(evaluatorC);
-        });
+  it('returns the same evaluator for the same object', function () {
+    const evaluatorA = pool.get(objectA);
+    const evaluatorB = pool.get(objectA);
+    expect(evaluatorA).toBe(evaluatorB);
 
-        it('returns new evaluator when old is released', function () {
-            const evaluatorA = pool.get(objectA);
-            const evaluatorB = pool.get(objectA);
-            expect(evaluatorA).toBe(evaluatorB);
-            pool.release(evaluatorA);
-            pool.release(evaluatorB);
-            const evaluatorC = pool.get(objectA);
-            expect(evaluatorA).not.toBe(evaluatorC);
-        });
-    });
+    const evaluatorC = pool.get(JSON.parse(JSON.stringify(objectA)));
+    expect(evaluatorA).toBe(evaluatorC);
+  });
+
+  it('returns new evaluator when old is released', function () {
+    const evaluatorA = pool.get(objectA);
+    const evaluatorB = pool.get(objectA);
+    expect(evaluatorA).toBe(evaluatorB);
+    pool.release(evaluatorA);
+    pool.release(evaluatorB);
+    const evaluatorC = pool.get(objectA);
+    expect(evaluatorA).not.toBe(evaluatorC);
+  });
 });
diff --git a/src/plugins/summaryWidget/src/telemetry/SummaryWidgetCondition.js b/src/plugins/summaryWidget/src/telemetry/SummaryWidgetCondition.js
index ff8885048e6..3bb66bb143f 100644
--- a/src/plugins/summaryWidget/src/telemetry/SummaryWidgetCondition.js
+++ b/src/plugins/summaryWidget/src/telemetry/SummaryWidgetCondition.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,64 +20,55 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    './operations'
-], function (
-    OPERATIONS
-) {
+import OPERATIONS from './operations.js';
 
-    function SummaryWidgetCondition(definition) {
-        this.object = definition.object;
-        this.key = definition.key;
-        this.values = definition.values;
-        if (!definition.operation) {
-            // TODO: better handling for default rule.
-            this.evaluate = function () {
-                return true;
-            };
-        } else {
-            this.comparator = OPERATIONS[definition.operation].operation;
-        }
-    }
-
-    SummaryWidgetCondition.prototype.evaluate = function (telemetryState) {
-        const stateKeys = Object.keys(telemetryState);
-        let state;
-        let result;
-        let i;
+export default function SummaryWidgetCondition(definition) {
+  this.object = definition.object;
+  this.key = definition.key;
+  this.values = definition.values;
+  if (!definition.operation) {
+    // TODO: better handling for default rule.
+    this.evaluate = function () {
+      return true;
+    };
+  } else {
+    this.comparator = OPERATIONS[definition.operation].operation;
+  }
+}
 
-        if (this.object === 'any') {
-            for (i = 0; i < stateKeys.length; i++) {
-                state = telemetryState[stateKeys[i]];
-                result = this.evaluateState(state);
-                if (result) {
-                    return true;
-                }
-            }
+SummaryWidgetCondition.prototype.evaluate = function (telemetryState) {
+  const stateKeys = Object.keys(telemetryState);
+  let state;
+  let result;
+  let i;
 
-            return false;
-        } else if (this.object === 'all') {
-            for (i = 0; i < stateKeys.length; i++) {
-                state = telemetryState[stateKeys[i]];
-                result = this.evaluateState(state);
-                if (!result) {
-                    return false;
-                }
-            }
+  if (this.object === 'any') {
+    for (i = 0; i < stateKeys.length; i++) {
+      state = telemetryState[stateKeys[i]];
+      result = this.evaluateState(state);
+      if (result) {
+        return true;
+      }
+    }
 
-            return true;
-        } else {
-            return this.evaluateState(telemetryState[this.object]);
-        }
-    };
+    return false;
+  } else if (this.object === 'all') {
+    for (i = 0; i < stateKeys.length; i++) {
+      state = telemetryState[stateKeys[i]];
+      result = this.evaluateState(state);
+      if (!result) {
+        return false;
+      }
+    }
 
-    SummaryWidgetCondition.prototype.evaluateState = function (state) {
-        const testValues = [
-            state.formats[this.key].parse(state.lastDatum)
-        ].concat(this.values);
+    return true;
+  } else {
+    return this.evaluateState(telemetryState[this.object]);
+  }
+};
 
-        return this.comparator(testValues);
-    };
+SummaryWidgetCondition.prototype.evaluateState = function (state) {
+  const testValues = [state.formats[this.key].parse(state.lastDatum)].concat(this.values);
 
-    return SummaryWidgetCondition;
-});
+  return this.comparator(testValues);
+};
diff --git a/src/plugins/summaryWidget/src/telemetry/SummaryWidgetConditionSpec.js b/src/plugins/summaryWidget/src/telemetry/SummaryWidgetConditionSpec.js
index ba28458db13..afc15095015 100644
--- a/src/plugins/summaryWidget/src/telemetry/SummaryWidgetConditionSpec.js
+++ b/src/plugins/summaryWidget/src/telemetry/SummaryWidgetConditionSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,123 +20,106 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    './SummaryWidgetCondition'
-], function (
-    SummaryWidgetCondition
-) {
+import SummaryWidgetCondition from './SummaryWidgetCondition.js';
 
-    describe('SummaryWidgetCondition', function () {
-        let condition;
-        let telemetryState;
+describe('SummaryWidgetCondition', function () {
+  let condition;
+  let telemetryState;
 
-        beforeEach(function () {
-            // Format map intentionally uses different keys than those present
-            // in datum, which serves to verify conditions use format map to get
-            // data.
-            const formatMap = {
-                adjusted: {
-                    parse: function (datum) {
-                        return datum.value + 10;
-                    }
-                },
-                raw: {
-                    parse: function (datum) {
-                        return datum.value;
-                    }
-                }
-            };
+  beforeEach(function () {
+    // Format map intentionally uses different keys than those present
+    // in datum, which serves to verify conditions use format map to get
+    // data.
+    const formatMap = {
+      adjusted: {
+        parse: function (datum) {
+          return datum.value + 10;
+        }
+      },
+      raw: {
+        parse: function (datum) {
+          return datum.value;
+        }
+      }
+    };
 
-            telemetryState = {
-                objectId: {
-                    formats: formatMap,
-                    lastDatum: {
-                    }
-                },
-                otherObjectId: {
-                    formats: formatMap,
-                    lastDatum: {
-                    }
-                }
-            };
+    telemetryState = {
+      objectId: {
+        formats: formatMap,
+        lastDatum: {}
+      },
+      otherObjectId: {
+        formats: formatMap,
+        lastDatum: {}
+      }
+    };
+  });
 
-        });
-
-        it('can evaluate if a single object matches', function () {
-            condition = new SummaryWidgetCondition({
-                object: 'objectId',
-                key: 'raw',
-                operation: 'greaterThan',
-                values: [
-                    10
-                ]
-            });
-            telemetryState.objectId.lastDatum.value = 5;
-            expect(condition.evaluate(telemetryState)).toBe(false);
-            telemetryState.objectId.lastDatum.value = 15;
-            expect(condition.evaluate(telemetryState)).toBe(true);
-        });
-
-        it('can evaluate if a single object matches (alternate keys)', function () {
-            condition = new SummaryWidgetCondition({
-                object: 'objectId',
-                key: 'adjusted',
-                operation: 'greaterThan',
-                values: [
-                    10
-                ]
-            });
-            telemetryState.objectId.lastDatum.value = -5;
-            expect(condition.evaluate(telemetryState)).toBe(false);
-            telemetryState.objectId.lastDatum.value = 5;
-            expect(condition.evaluate(telemetryState)).toBe(true);
-        });
+  it('can evaluate if a single object matches', function () {
+    condition = new SummaryWidgetCondition({
+      object: 'objectId',
+      key: 'raw',
+      operation: 'greaterThan',
+      values: [10]
+    });
+    telemetryState.objectId.lastDatum.value = 5;
+    expect(condition.evaluate(telemetryState)).toBe(false);
+    telemetryState.objectId.lastDatum.value = 15;
+    expect(condition.evaluate(telemetryState)).toBe(true);
+  });
 
-        it('can evaluate "if all objects match"', function () {
-            condition = new SummaryWidgetCondition({
-                object: 'all',
-                key: 'raw',
-                operation: 'greaterThan',
-                values: [
-                    10
-                ]
-            });
-            telemetryState.objectId.lastDatum.value = 0;
-            telemetryState.otherObjectId.lastDatum.value = 0;
-            expect(condition.evaluate(telemetryState)).toBe(false);
-            telemetryState.objectId.lastDatum.value = 0;
-            telemetryState.otherObjectId.lastDatum.value = 15;
-            expect(condition.evaluate(telemetryState)).toBe(false);
-            telemetryState.objectId.lastDatum.value = 15;
-            telemetryState.otherObjectId.lastDatum.value = 0;
-            expect(condition.evaluate(telemetryState)).toBe(false);
-            telemetryState.objectId.lastDatum.value = 15;
-            telemetryState.otherObjectId.lastDatum.value = 15;
-            expect(condition.evaluate(telemetryState)).toBe(true);
-        });
+  it('can evaluate if a single object matches (alternate keys)', function () {
+    condition = new SummaryWidgetCondition({
+      object: 'objectId',
+      key: 'adjusted',
+      operation: 'greaterThan',
+      values: [10]
+    });
+    telemetryState.objectId.lastDatum.value = -5;
+    expect(condition.evaluate(telemetryState)).toBe(false);
+    telemetryState.objectId.lastDatum.value = 5;
+    expect(condition.evaluate(telemetryState)).toBe(true);
+  });
 
-        it('can evalute "if any object matches"', function () {
-            condition = new SummaryWidgetCondition({
-                object: 'any',
-                key: 'raw',
-                operation: 'greaterThan',
-                values: [
-                    10
-                ]
-            });
-            telemetryState.objectId.lastDatum.value = 0;
-            telemetryState.otherObjectId.lastDatum.value = 0;
-            expect(condition.evaluate(telemetryState)).toBe(false);
-            telemetryState.objectId.lastDatum.value = 0;
-            telemetryState.otherObjectId.lastDatum.value = 15;
-            expect(condition.evaluate(telemetryState)).toBe(true);
-            telemetryState.objectId.lastDatum.value = 15;
-            telemetryState.otherObjectId.lastDatum.value = 0;
-            expect(condition.evaluate(telemetryState)).toBe(true);
-            telemetryState.objectId.lastDatum.value = 15;
-            telemetryState.otherObjectId.lastDatum.value = 15;
-            expect(condition.evaluate(telemetryState)).toBe(true);
-        });
+  it('can evaluate "if all objects match"', function () {
+    condition = new SummaryWidgetCondition({
+      object: 'all',
+      key: 'raw',
+      operation: 'greaterThan',
+      values: [10]
+    });
+    telemetryState.objectId.lastDatum.value = 0;
+    telemetryState.otherObjectId.lastDatum.value = 0;
+    expect(condition.evaluate(telemetryState)).toBe(false);
+    telemetryState.objectId.lastDatum.value = 0;
+    telemetryState.otherObjectId.lastDatum.value = 15;
+    expect(condition.evaluate(telemetryState)).toBe(false);
+    telemetryState.objectId.lastDatum.value = 15;
+    telemetryState.otherObjectId.lastDatum.value = 0;
+    expect(condition.evaluate(telemetryState)).toBe(false);
+    telemetryState.objectId.lastDatum.value = 15;
+    telemetryState.otherObjectId.lastDatum.value = 15;
+    expect(condition.evaluate(telemetryState)).toBe(true);
+  });
 
+  it('can evaluate "if any object matches"', function () {
+    condition = new SummaryWidgetCondition({
+      object: 'any',
+      key: 'raw',
+      operation: 'greaterThan',
+      values: [10]
     });
+    telemetryState.objectId.lastDatum.value = 0;
+    telemetryState.otherObjectId.lastDatum.value = 0;
+    expect(condition.evaluate(telemetryState)).toBe(false);
+    telemetryState.objectId.lastDatum.value = 0;
+    telemetryState.otherObjectId.lastDatum.value = 15;
+    expect(condition.evaluate(telemetryState)).toBe(true);
+    telemetryState.objectId.lastDatum.value = 15;
+    telemetryState.otherObjectId.lastDatum.value = 0;
+    expect(condition.evaluate(telemetryState)).toBe(true);
+    telemetryState.objectId.lastDatum.value = 15;
+    telemetryState.otherObjectId.lastDatum.value = 15;
+    expect(condition.evaluate(telemetryState)).toBe(true);
+  });
 });
diff --git a/src/plugins/summaryWidget/src/telemetry/SummaryWidgetEvaluator.js b/src/plugins/summaryWidget/src/telemetry/SummaryWidgetEvaluator.js
index 73d11ab4062..0e61202f674 100644
--- a/src/plugins/summaryWidget/src/telemetry/SummaryWidgetEvaluator.js
+++ b/src/plugins/summaryWidget/src/telemetry/SummaryWidgetEvaluator.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,273 +20,244 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    './SummaryWidgetRule',
-    '../eventHelpers',
-    'objectUtils',
-    'lodash'
-], function (
-    SummaryWidgetRule,
-    eventHelpers,
-    objectUtils,
-    _
-) {
-
-    /**
-     * evaluates rules defined in a summary widget against either lad or
-     * realtime state.
-     *
-     */
-    function SummaryWidgetEvaluator(domainObject, openmct) {
-        this.openmct = openmct;
-        this.baseState = {};
-
-        this.updateRules(domainObject);
-        this.removeObserver = openmct.objects.observe(
-            domainObject,
-            '*',
-            this.updateRules.bind(this)
-        );
+import _ from 'lodash';
+import { makeKeyString } from 'objectUtils';
 
-        const composition = openmct.composition.get(domainObject);
+import eventHelpers from '../eventHelpers.js';
+import SummaryWidgetRule from './SummaryWidgetRule.js';
 
-        this.listenTo(composition, 'add', this.addChild, this);
-        this.listenTo(composition, 'remove', this.removeChild, this);
+/**
+ * evaluates rules defined in a summary widget against either lad or
+ * realtime state.
+ *
+ */
+export default function SummaryWidgetEvaluator(domainObject, openmct) {
+  this.openmct = openmct;
+  this.baseState = {};
 
-        this.loadPromise = composition.load();
-    }
+  this.updateRules(domainObject);
+  this.removeObserver = openmct.objects.observe(domainObject, '*', this.updateRules.bind(this));
 
-    eventHelpers.extend(SummaryWidgetEvaluator.prototype);
-
-    /**
-     * Subscribes to realtime telemetry for the given summary widget.
-     */
-    SummaryWidgetEvaluator.prototype.subscribe = function (callback) {
-        let active = true;
-        let unsubscribes = [];
-
-        this.getBaseStateClone()
-            .then(function (realtimeStates) {
-                if (!active) {
-                    return;
-                }
-
-                const updateCallback = function () {
-                    const datum = this.evaluateState(
-                        realtimeStates,
-                        this.openmct.time.timeSystem().key
-                    );
-                    if (datum) {
-                        callback(datum);
-                    }
-                }.bind(this);
-
-                /* eslint-disable you-dont-need-lodash-underscore/map */
-                unsubscribes = _.map(
-                    realtimeStates,
-                    this.subscribeToObjectState.bind(this, updateCallback)
-                );
-                /* eslint-enable you-dont-need-lodash-underscore/map */
-            }.bind(this));
-
-        return function () {
-            active = false;
-            unsubscribes.forEach(function (unsubscribe) {
-                unsubscribe();
-            });
-        };
-    };
-
-    /**
-     * Returns a promise for a telemetry datum obtained by evaluating the
-     * current lad data.
-     */
-    SummaryWidgetEvaluator.prototype.requestLatest = function (options) {
-        return this.getBaseStateClone()
-            .then(function (ladState) {
-                const promises = Object.values(ladState)
-                    .map(this.updateObjectStateFromLAD.bind(this, options));
-
-                return Promise.all(promises)
-                    .then(function () {
-                        return ladState;
-                    });
-            }.bind(this))
-            .then(function (ladStates) {
-                return this.evaluateState(ladStates, options.domain);
-            }.bind(this));
-    };
-
-    SummaryWidgetEvaluator.prototype.updateRules = function (domainObject) {
-        this.rules = domainObject.configuration.ruleOrder.map(function (ruleId) {
-            return new SummaryWidgetRule(domainObject.configuration.ruleConfigById[ruleId]);
-        });
-    };
-
-    SummaryWidgetEvaluator.prototype.addChild = function (childObject) {
-        const childId = objectUtils.makeKeyString(childObject.identifier);
-        const metadata = this.openmct.telemetry.getMetadata(childObject);
-        const formats = this.openmct.telemetry.getFormatMap(metadata);
-
-        this.baseState[childId] = {
-            id: childId,
-            domainObject: childObject,
-            metadata: metadata,
-            formats: formats
-        };
-    };
-
-    SummaryWidgetEvaluator.prototype.removeChild = function (childObject) {
-        const childId = objectUtils.makeKeyString(childObject.identifier);
-        delete this.baseState[childId];
-    };
-
-    SummaryWidgetEvaluator.prototype.load = function () {
-        return this.loadPromise;
-    };
-
-    /**
-     * Return a promise for a 2-deep clone of the base state object: object
-     * states are shallow cloned, and then assembled and returned as a new base
-     * state.  Allows object states to be mutated while sharing telemetry
-     * metadata and formats.
-     */
-    SummaryWidgetEvaluator.prototype.getBaseStateClone = function () {
-        return this.load()
-            .then(function () {
-                /* eslint-disable you-dont-need-lodash-underscore/values */
-                return _(this.baseState)
-                    .values()
-                    .map(_.clone)
-                    .keyBy('id')
-                    .value();
-                /* eslint-enable you-dont-need-lodash-underscore/values */
-            }.bind(this));
-    };
-
-    /**
-     * Subscribes to realtime updates for a given objectState, and invokes
-     * the supplied callback when objectState has been updated.  Returns
-     * a function to unsubscribe.
-     * @private.
-     */
-    SummaryWidgetEvaluator.prototype.subscribeToObjectState = function (callback, objectState) {
-        return this.openmct.telemetry.subscribe(
-            objectState.domainObject,
-            function (datum) {
-                objectState.lastDatum = datum;
-                objectState.timestamps = this.getTimestamps(objectState.id, datum);
-                callback();
-            }.bind(this)
-        );
-    };
-
-    /**
-     * Given an object state, will return a promise that is resolved when the
-     * object state has been updated from the LAD.
-     * @private.
-     */
-    SummaryWidgetEvaluator.prototype.updateObjectStateFromLAD = function (options, objectState) {
-        options = Object.assign({}, options, {
-            strategy: 'latest',
-            size: 1
-        });
+  const composition = openmct.composition.get(domainObject);
 
-        return this.openmct
-            .telemetry
-            .request(
-                objectState.domainObject,
-                options
-            )
-            .then(function (results) {
-                objectState.lastDatum = results[results.length - 1];
-                objectState.timestamps = this.getTimestamps(
-                    objectState.id,
-                    objectState.lastDatum
-                );
-            }.bind(this));
-    };
-
-    /**
-     * Returns an object containing all domain values in a datum.
-     * @private.
-     */
-    SummaryWidgetEvaluator.prototype.getTimestamps = function (childId, datum) {
-        const timestampedDatum = {};
-        this.openmct.time.getAllTimeSystems().forEach(function (timeSystem) {
-            timestampedDatum[timeSystem.key] =
-                this.baseState[childId].formats[timeSystem.key].parse(datum);
-        }, this);
-
-        return timestampedDatum;
-    };
-
-    /**
-     * Given a base datum(containing timestamps) and rule index, adds values
-     * from the matching rule.
-     * @private
-     */
-    SummaryWidgetEvaluator.prototype.makeDatumFromRule = function (ruleIndex, baseDatum) {
-        const rule = this.rules[ruleIndex];
-
-        baseDatum.ruleLabel = rule.label;
-        baseDatum.ruleName = rule.name;
-        baseDatum.message = rule.message;
-        baseDatum.ruleIndex = ruleIndex;
-        baseDatum.backgroundColor = rule.style['background-color'];
-        baseDatum.textColor = rule.style.color;
-        baseDatum.borderColor = rule.style['border-color'];
-        baseDatum.icon = rule.icon;
-
-        return baseDatum;
-    };
-
-    /**
-     * Evaluate a `state` object and return a summary widget telemetry datum.
-     * Datum timestamps will be taken from the "latest" datum in the `state`
-     * where "latest" is the datum with the largest value for the given
-     * `timestampKey`.
-     * @private.
-     */
-    SummaryWidgetEvaluator.prototype.evaluateState = function (state, timestampKey) {
-        const hasRequiredData = Object.keys(state).reduce(function (itDoes, k) {
-            return itDoes && state[k].lastDatum;
-        }, true);
-        if (!hasRequiredData) {
-            return;
-        }
+  this.listenTo(composition, 'add', this.addChild, this);
+  this.listenTo(composition, 'remove', this.removeChild, this);
 
-        let i;
-        for (i = this.rules.length - 1; i > 0; i--) {
-            if (this.rules[i].evaluate(state, false)) {
-                break;
-            }
-        }
+  this.loadPromise = composition.load();
+}
+
+eventHelpers.extend(SummaryWidgetEvaluator.prototype);
 
-        /* eslint-disable you-dont-need-lodash-underscore/map */
-        let latestTimestamp = _(state)
-            .map('timestamps')
-            .sortBy(timestampKey)
-            .last();
-        /* eslint-enable you-dont-need-lodash-underscore/map */
+/**
+ * Subscribes to realtime telemetry for the given summary widget.
+ */
+SummaryWidgetEvaluator.prototype.subscribe = function (callback) {
+  let active = true;
+  let unsubscribes = [];
 
-        if (!latestTimestamp) {
-            latestTimestamp = {};
+  this.getBaseStateClone().then(
+    function (realtimeStates) {
+      if (!active) {
+        return;
+      }
+
+      const updateCallback = function () {
+        const datum = this.evaluateState(realtimeStates, this.openmct.time.timeSystem().key);
+        if (datum) {
+          callback(datum);
         }
+      }.bind(this);
+
+      /* eslint-disable you-dont-need-lodash-underscore/map */
+      unsubscribes = _.map(realtimeStates, this.subscribeToObjectState.bind(this, updateCallback));
+      /* eslint-enable you-dont-need-lodash-underscore/map */
+    }.bind(this)
+  );
+
+  return function () {
+    active = false;
+    unsubscribes.forEach(function (unsubscribe) {
+      unsubscribe();
+    });
+  };
+};
+
+/**
+ * Returns a promise for a telemetry datum obtained by evaluating the
+ * current lad data.
+ */
+SummaryWidgetEvaluator.prototype.requestLatest = function (options) {
+  return this.getBaseStateClone()
+    .then(
+      function (ladState) {
+        const promises = Object.values(ladState).map(
+          this.updateObjectStateFromLAD.bind(this, options)
+        );
+
+        return Promise.all(promises).then(function () {
+          return ladState;
+        });
+      }.bind(this)
+    )
+    .then(
+      function (ladStates) {
+        return this.evaluateState(ladStates, options.domain);
+      }.bind(this)
+    );
+};
+
+SummaryWidgetEvaluator.prototype.updateRules = function (domainObject) {
+  this.rules = domainObject.configuration.ruleOrder.map(function (ruleId) {
+    return new SummaryWidgetRule(domainObject.configuration.ruleConfigById[ruleId]);
+  });
+};
+
+SummaryWidgetEvaluator.prototype.addChild = function (childObject) {
+  const childId = makeKeyString(childObject.identifier);
+  const metadata = this.openmct.telemetry.getMetadata(childObject);
+  const formats = this.openmct.telemetry.getFormatMap(metadata);
+
+  this.baseState[childId] = {
+    id: childId,
+    domainObject: childObject,
+    metadata: metadata,
+    formats: formats
+  };
+};
+
+SummaryWidgetEvaluator.prototype.removeChild = function (childObject) {
+  const childId = makeKeyString(childObject.identifier);
+  delete this.baseState[childId];
+};
+
+SummaryWidgetEvaluator.prototype.load = function () {
+  return this.loadPromise;
+};
+
+/**
+ * Return a promise for a 2-deep clone of the base state object: object
+ * states are shallow cloned, and then assembled and returned as a new base
+ * state.  Allows object states to be mutated while sharing telemetry
+ * metadata and formats.
+ */
+SummaryWidgetEvaluator.prototype.getBaseStateClone = function () {
+  return this.load().then(
+    function () {
+      /* eslint-disable you-dont-need-lodash-underscore/values */
+      return _(this.baseState).values().map(_.clone).keyBy('id').value();
+      /* eslint-enable you-dont-need-lodash-underscore/values */
+    }.bind(this)
+  );
+};
+
+/**
+ * Subscribes to realtime updates for a given objectState, and invokes
+ * the supplied callback when objectState has been updated.  Returns
+ * a function to unsubscribe.
+ * @private.
+ */
+SummaryWidgetEvaluator.prototype.subscribeToObjectState = function (callback, objectState) {
+  return this.openmct.telemetry.subscribe(
+    objectState.domainObject,
+    function (datum) {
+      objectState.lastDatum = datum;
+      objectState.timestamps = this.getTimestamps(objectState.id, datum);
+      callback();
+    }.bind(this)
+  );
+};
+
+/**
+ * Given an object state, will return a promise that is resolved when the
+ * object state has been updated from the LAD.
+ * @private.
+ */
+SummaryWidgetEvaluator.prototype.updateObjectStateFromLAD = function (options, objectState) {
+  options = Object.assign({}, options, {
+    strategy: 'latest',
+    size: 1
+  });
+
+  return this.openmct.telemetry.request(objectState.domainObject, options).then(
+    function (results) {
+      objectState.lastDatum = results[results.length - 1];
+      objectState.timestamps = this.getTimestamps(objectState.id, objectState.lastDatum);
+    }.bind(this)
+  );
+};
+
+/**
+ * Returns an object containing all domain values in a datum.
+ * @private.
+ */
+SummaryWidgetEvaluator.prototype.getTimestamps = function (childId, datum) {
+  const timestampedDatum = {};
+  this.openmct.time.getAllTimeSystems().forEach(function (timeSystem) {
+    timestampedDatum[timeSystem.key] = this.baseState[childId].formats[timeSystem.key].parse(datum);
+  }, this);
+
+  return timestampedDatum;
+};
+
+/**
+ * Given a base datum(containing timestamps) and rule index, adds values
+ * from the matching rule.
+ * @private
+ */
+SummaryWidgetEvaluator.prototype.makeDatumFromRule = function (ruleIndex, baseDatum) {
+  const rule = this.rules[ruleIndex];
+
+  baseDatum.ruleLabel = rule.label;
+  baseDatum.ruleName = rule.name;
+  baseDatum.message = rule.message;
+  baseDatum.ruleIndex = ruleIndex;
+  baseDatum.backgroundColor = rule.style['background-color'];
+  baseDatum.textColor = rule.style.color;
+  baseDatum.borderColor = rule.style['border-color'];
+  baseDatum.icon = rule.icon;
+
+  return baseDatum;
+};
+
+/**
+ * Evaluate a `state` object and return a summary widget telemetry datum.
+ * Datum timestamps will be taken from the "latest" datum in the `state`
+ * where "latest" is the datum with the largest value for the given
+ * `timestampKey`.
+ * @private.
+ */
+SummaryWidgetEvaluator.prototype.evaluateState = function (state, timestampKey) {
+  const hasRequiredData = Object.keys(state).reduce(function (itDoes, k) {
+    return itDoes && state[k].lastDatum;
+  }, true);
+  if (!hasRequiredData) {
+    return;
+  }
+
+  let i;
+  for (i = this.rules.length - 1; i > 0; i--) {
+    if (this.rules[i].evaluate(state, false)) {
+      break;
+    }
+  }
 
-        const baseDatum = _.clone(latestTimestamp);
+  /* eslint-disable you-dont-need-lodash-underscore/map */
+  let latestTimestamp = _(state).map('timestamps').sortBy(timestampKey).last();
+  /* eslint-enable you-dont-need-lodash-underscore/map */
 
-        return this.makeDatumFromRule(i, baseDatum);
-    };
+  if (!latestTimestamp) {
+    latestTimestamp = {};
+  }
 
-    /**
-     * remove all listeners and clean up any resources.
-     */
-    SummaryWidgetEvaluator.prototype.destroy = function () {
-        this.stopListening();
-        this.removeObserver();
-    };
+  const baseDatum = _.clone(latestTimestamp);
 
-    return SummaryWidgetEvaluator;
+  return this.makeDatumFromRule(i, baseDatum);
+};
 
-});
+/**
+ * remove all listeners and clean up any resources.
+ */
+SummaryWidgetEvaluator.prototype.destroy = function () {
+  this.stopListening();
+  this.removeObserver();
+};
diff --git a/src/plugins/summaryWidget/src/telemetry/SummaryWidgetMetadataProvider.js b/src/plugins/summaryWidget/src/telemetry/SummaryWidgetMetadataProvider.js
index b06eb235891..4955b48300c 100644
--- a/src/plugins/summaryWidget/src/telemetry/SummaryWidgetMetadataProvider.js
+++ b/src/plugins/summaryWidget/src/telemetry/SummaryWidgetMetadataProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,100 +20,90 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
+export default function SummaryWidgetMetadataProvider(openmct) {
+  this.openmct = openmct;
+}
 
-], function (
+SummaryWidgetMetadataProvider.prototype.supportsMetadata = function (domainObject) {
+  return domainObject.type === 'summary-widget';
+};
 
-) {
-
-    function SummaryWidgetMetadataProvider(openmct) {
-        this.openmct = openmct;
-    }
-
-    SummaryWidgetMetadataProvider.prototype.supportsMetadata = function (domainObject) {
-        return domainObject.type === 'summary-widget';
-    };
-
-    SummaryWidgetMetadataProvider.prototype.getDomains = function (domainObject) {
-        return this.openmct.time.getAllTimeSystems().map(function (ts, i) {
-            return {
-                key: ts.key,
-                name: ts.name,
-                format: ts.timeFormat,
-                hints: {
-                    domain: i
-                }
-            };
-        });
+SummaryWidgetMetadataProvider.prototype.getDomains = function (domainObject) {
+  return this.openmct.time.getAllTimeSystems().map(function (ts, i) {
+    return {
+      key: ts.key,
+      name: ts.name,
+      format: ts.timeFormat,
+      hints: {
+        domain: i
+      }
     };
+  });
+};
 
-    SummaryWidgetMetadataProvider.prototype.getMetadata = function (domainObject) {
-        const ruleOrder = domainObject.configuration.ruleOrder || [];
-        const enumerations = ruleOrder
-            .filter(function (ruleId) {
-                return Boolean(domainObject.configuration.ruleConfigById[ruleId]);
-            })
-            .map(function (ruleId, ruleIndex) {
-                return {
-                    string: domainObject.configuration.ruleConfigById[ruleId].label,
-                    value: ruleIndex
-                };
-            });
-
-        const metadata = {
-            // Generally safe assumption is that we have one domain per timeSystem.
-            values: this.getDomains().concat([
-                {
-                    name: 'State',
-                    key: 'state',
-                    source: 'ruleIndex',
-                    format: 'enum',
-                    enumerations: enumerations,
-                    hints: {
-                        range: 1
-                    }
-                },
-                {
-                    name: 'Rule Label',
-                    key: 'ruleLabel',
-                    format: 'string'
-                },
-                {
-                    name: 'Rule Name',
-                    key: 'ruleName',
-                    format: 'string'
-                },
-                {
-                    name: 'Message',
-                    key: 'message',
-                    format: 'string'
-                },
-                {
-                    name: 'Background Color',
-                    key: 'backgroundColor',
-                    format: 'string'
-                },
-                {
-                    name: 'Text Color',
-                    key: 'textColor',
-                    format: 'string'
-                },
-                {
-                    name: 'Border Color',
-                    key: 'borderColor',
-                    format: 'string'
-                },
-                {
-                    name: 'Display Icon',
-                    key: 'icon',
-                    format: 'string'
-                }
-            ])
-        };
-
-        return metadata;
-    };
+SummaryWidgetMetadataProvider.prototype.getMetadata = function (domainObject) {
+  const ruleOrder = domainObject.configuration.ruleOrder || [];
+  const enumerations = ruleOrder
+    .filter(function (ruleId) {
+      return Boolean(domainObject.configuration.ruleConfigById[ruleId]);
+    })
+    .map(function (ruleId, ruleIndex) {
+      return {
+        string: domainObject.configuration.ruleConfigById[ruleId].label,
+        value: ruleIndex
+      };
+    });
 
-    return SummaryWidgetMetadataProvider;
+  const metadata = {
+    // Generally safe assumption is that we have one domain per timeSystem.
+    values: this.getDomains().concat([
+      {
+        name: 'State',
+        key: 'state',
+        source: 'ruleIndex',
+        format: 'enum',
+        enumerations: enumerations,
+        hints: {
+          range: 1
+        }
+      },
+      {
+        name: 'Rule Label',
+        key: 'ruleLabel',
+        format: 'string'
+      },
+      {
+        name: 'Rule Name',
+        key: 'ruleName',
+        format: 'string'
+      },
+      {
+        name: 'Message',
+        key: 'message',
+        format: 'string'
+      },
+      {
+        name: 'Background Color',
+        key: 'backgroundColor',
+        format: 'string'
+      },
+      {
+        name: 'Text Color',
+        key: 'textColor',
+        format: 'string'
+      },
+      {
+        name: 'Border Color',
+        key: 'borderColor',
+        format: 'string'
+      },
+      {
+        name: 'Display Icon',
+        key: 'icon',
+        format: 'string'
+      }
+    ])
+  };
 
-});
+  return metadata;
+};
diff --git a/src/plugins/summaryWidget/src/telemetry/SummaryWidgetRule.js b/src/plugins/summaryWidget/src/telemetry/SummaryWidgetRule.js
index 548c67be16b..b53c6222546 100644
--- a/src/plugins/summaryWidget/src/telemetry/SummaryWidgetRule.js
+++ b/src/plugins/summaryWidget/src/telemetry/SummaryWidgetRule.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,56 +20,49 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    './SummaryWidgetCondition'
-], function (
-    SummaryWidgetCondition
-) {
-    function SummaryWidgetRule(definition) {
-        this.name = definition.name;
-        this.label = definition.label;
-        this.id = definition.id;
-        this.icon = definition.icon;
-        this.style = definition.style;
-        this.message = definition.message;
-        this.description = definition.description;
-        this.conditions = definition.conditions.map(function (cDefinition) {
-            return new SummaryWidgetCondition(cDefinition);
-        });
-        this.trigger = definition.trigger;
-    }
-
-    /**
-     * Evaluate the given rule against a telemetryState and return true if it
-     * matches.
-     */
-    SummaryWidgetRule.prototype.evaluate = function (telemetryState) {
-        let i;
-        let result;
+import SummaryWidgetCondition from './SummaryWidgetCondition.js';
 
-        if (this.trigger === 'all') {
-            for (i = 0; i < this.conditions.length; i++) {
-                result = this.conditions[i].evaluate(telemetryState);
-                if (!result) {
-                    return false;
-                }
-            }
+export default function SummaryWidgetRule(definition) {
+  this.name = definition.name;
+  this.label = definition.label;
+  this.id = definition.id;
+  this.icon = definition.icon;
+  this.style = definition.style;
+  this.message = definition.message;
+  this.description = definition.description;
+  this.conditions = definition.conditions.map(function (cDefinition) {
+    return new SummaryWidgetCondition(cDefinition);
+  });
+  this.trigger = definition.trigger;
+}
 
-            return true;
-        } else if (this.trigger === 'any') {
-            for (i = 0; i < this.conditions.length; i++) {
-                result = this.conditions[i].evaluate(telemetryState);
-                if (result) {
-                    return true;
-                }
-            }
+/**
+ * Evaluate the given rule against a telemetryState and return true if it
+ * matches.
+ */
+SummaryWidgetRule.prototype.evaluate = function (telemetryState) {
+  let i;
+  let result;
 
-            return false;
-        } else {
-            throw new Error('Invalid rule trigger: ' + this.trigger);
-        }
-    };
+  if (this.trigger === 'all') {
+    for (i = 0; i < this.conditions.length; i++) {
+      result = this.conditions[i].evaluate(telemetryState);
+      if (!result) {
+        return false;
+      }
+    }
 
-    return SummaryWidgetRule;
-});
+    return true;
+  } else if (this.trigger === 'any') {
+    for (i = 0; i < this.conditions.length; i++) {
+      result = this.conditions[i].evaluate(telemetryState);
+      if (result) {
+        return true;
+      }
+    }
 
+    return false;
+  } else {
+    throw new Error('Invalid rule trigger: ' + this.trigger);
+  }
+};
diff --git a/src/plugins/summaryWidget/src/telemetry/SummaryWidgetRuleSpec.js b/src/plugins/summaryWidget/src/telemetry/SummaryWidgetRuleSpec.js
index 2adca40cb2b..e6f403da8d9 100644
--- a/src/plugins/summaryWidget/src/telemetry/SummaryWidgetRuleSpec.js
+++ b/src/plugins/summaryWidget/src/telemetry/SummaryWidgetRuleSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,144 +20,134 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    './SummaryWidgetRule'
-], function (
-    SummaryWidgetRule
-) {
-    describe('SummaryWidgetRule', function () {
+import SummaryWidgetRule from './SummaryWidgetRule.js';
 
-        let rule;
-        let telemetryState;
+describe('SummaryWidgetRule', function () {
+  let rule;
+  let telemetryState;
 
-        beforeEach(function () {
-            const formatMap = {
-                raw: {
-                    parse: function (datum) {
-                        return datum.value;
-                    }
-                }
-            };
+  beforeEach(function () {
+    const formatMap = {
+      raw: {
+        parse: function (datum) {
+          return datum.value;
+        }
+      }
+    };
 
-            telemetryState = {
-                objectId: {
-                    formats: formatMap,
-                    lastDatum: {
-                    }
-                },
-                otherObjectId: {
-                    formats: formatMap,
-                    lastDatum: {
-                    }
-                }
-            };
-        });
+    telemetryState = {
+      objectId: {
+        formats: formatMap,
+        lastDatum: {}
+      },
+      otherObjectId: {
+        formats: formatMap,
+        lastDatum: {}
+      }
+    };
+  });
 
-        it('allows single condition rules with any', function () {
-            rule = new SummaryWidgetRule({
-                trigger: 'any',
-                conditions: [{
-                    object: 'objectId',
-                    key: 'raw',
-                    operation: 'greaterThan',
-                    values: [
-                        10
-                    ]
-                }]
-            });
-
-            telemetryState.objectId.lastDatum.value = 5;
-            expect(rule.evaluate(telemetryState)).toBe(false);
-            telemetryState.objectId.lastDatum.value = 15;
-            expect(rule.evaluate(telemetryState)).toBe(true);
-        });
-
-        it('allows single condition rules with all', function () {
-            rule = new SummaryWidgetRule({
-                trigger: 'all',
-                conditions: [{
-                    object: 'objectId',
-                    key: 'raw',
-                    operation: 'greaterThan',
-                    values: [
-                        10
-                    ]
-                }]
-            });
+  it('allows single condition rules with any', function () {
+    rule = new SummaryWidgetRule({
+      trigger: 'any',
+      conditions: [
+        {
+          object: 'objectId',
+          key: 'raw',
+          operation: 'greaterThan',
+          values: [10]
+        }
+      ]
+    });
 
-            telemetryState.objectId.lastDatum.value = 5;
-            expect(rule.evaluate(telemetryState)).toBe(false);
-            telemetryState.objectId.lastDatum.value = 15;
-            expect(rule.evaluate(telemetryState)).toBe(true);
-        });
+    telemetryState.objectId.lastDatum.value = 5;
+    expect(rule.evaluate(telemetryState)).toBe(false);
+    telemetryState.objectId.lastDatum.value = 15;
+    expect(rule.evaluate(telemetryState)).toBe(true);
+  });
 
-        it('can combine multiple conditions with all', function () {
-            rule = new SummaryWidgetRule({
-                trigger: 'all',
-                conditions: [{
-                    object: 'objectId',
-                    key: 'raw',
-                    operation: 'greaterThan',
-                    values: [
-                        10
-                    ]
-                }, {
-                    object: 'otherObjectId',
-                    key: 'raw',
-                    operation: 'greaterThan',
-                    values: [
-                        20
-                    ]
-                }]
-            });
+  it('allows single condition rules with all', function () {
+    rule = new SummaryWidgetRule({
+      trigger: 'all',
+      conditions: [
+        {
+          object: 'objectId',
+          key: 'raw',
+          operation: 'greaterThan',
+          values: [10]
+        }
+      ]
+    });
 
-            telemetryState.objectId.lastDatum.value = 5;
-            telemetryState.otherObjectId.lastDatum.value = 5;
-            expect(rule.evaluate(telemetryState)).toBe(false);
-            telemetryState.objectId.lastDatum.value = 5;
-            telemetryState.otherObjectId.lastDatum.value = 25;
-            expect(rule.evaluate(telemetryState)).toBe(false);
-            telemetryState.objectId.lastDatum.value = 15;
-            telemetryState.otherObjectId.lastDatum.value = 5;
-            expect(rule.evaluate(telemetryState)).toBe(false);
-            telemetryState.objectId.lastDatum.value = 15;
-            telemetryState.otherObjectId.lastDatum.value = 25;
-            expect(rule.evaluate(telemetryState)).toBe(true);
+    telemetryState.objectId.lastDatum.value = 5;
+    expect(rule.evaluate(telemetryState)).toBe(false);
+    telemetryState.objectId.lastDatum.value = 15;
+    expect(rule.evaluate(telemetryState)).toBe(true);
+  });
 
-        });
+  it('can combine multiple conditions with all', function () {
+    rule = new SummaryWidgetRule({
+      trigger: 'all',
+      conditions: [
+        {
+          object: 'objectId',
+          key: 'raw',
+          operation: 'greaterThan',
+          values: [10]
+        },
+        {
+          object: 'otherObjectId',
+          key: 'raw',
+          operation: 'greaterThan',
+          values: [20]
+        }
+      ]
+    });
 
-        it('can combine multiple conditions with any', function () {
-            rule = new SummaryWidgetRule({
-                trigger: 'any',
-                conditions: [{
-                    object: 'objectId',
-                    key: 'raw',
-                    operation: 'greaterThan',
-                    values: [
-                        10
-                    ]
-                }, {
-                    object: 'otherObjectId',
-                    key: 'raw',
-                    operation: 'greaterThan',
-                    values: [
-                        20
-                    ]
-                }]
-            });
+    telemetryState.objectId.lastDatum.value = 5;
+    telemetryState.otherObjectId.lastDatum.value = 5;
+    expect(rule.evaluate(telemetryState)).toBe(false);
+    telemetryState.objectId.lastDatum.value = 5;
+    telemetryState.otherObjectId.lastDatum.value = 25;
+    expect(rule.evaluate(telemetryState)).toBe(false);
+    telemetryState.objectId.lastDatum.value = 15;
+    telemetryState.otherObjectId.lastDatum.value = 5;
+    expect(rule.evaluate(telemetryState)).toBe(false);
+    telemetryState.objectId.lastDatum.value = 15;
+    telemetryState.otherObjectId.lastDatum.value = 25;
+    expect(rule.evaluate(telemetryState)).toBe(true);
+  });
 
-            telemetryState.objectId.lastDatum.value = 5;
-            telemetryState.otherObjectId.lastDatum.value = 5;
-            expect(rule.evaluate(telemetryState)).toBe(false);
-            telemetryState.objectId.lastDatum.value = 5;
-            telemetryState.otherObjectId.lastDatum.value = 25;
-            expect(rule.evaluate(telemetryState)).toBe(true);
-            telemetryState.objectId.lastDatum.value = 15;
-            telemetryState.otherObjectId.lastDatum.value = 5;
-            expect(rule.evaluate(telemetryState)).toBe(true);
-            telemetryState.objectId.lastDatum.value = 15;
-            telemetryState.otherObjectId.lastDatum.value = 25;
-            expect(rule.evaluate(telemetryState)).toBe(true);
-        });
+  it('can combine multiple conditions with any', function () {
+    rule = new SummaryWidgetRule({
+      trigger: 'any',
+      conditions: [
+        {
+          object: 'objectId',
+          key: 'raw',
+          operation: 'greaterThan',
+          values: [10]
+        },
+        {
+          object: 'otherObjectId',
+          key: 'raw',
+          operation: 'greaterThan',
+          values: [20]
+        }
+      ]
     });
+
+    telemetryState.objectId.lastDatum.value = 5;
+    telemetryState.otherObjectId.lastDatum.value = 5;
+    expect(rule.evaluate(telemetryState)).toBe(false);
+    telemetryState.objectId.lastDatum.value = 5;
+    telemetryState.otherObjectId.lastDatum.value = 25;
+    expect(rule.evaluate(telemetryState)).toBe(true);
+    telemetryState.objectId.lastDatum.value = 15;
+    telemetryState.otherObjectId.lastDatum.value = 5;
+    expect(rule.evaluate(telemetryState)).toBe(true);
+    telemetryState.objectId.lastDatum.value = 15;
+    telemetryState.otherObjectId.lastDatum.value = 25;
+    expect(rule.evaluate(telemetryState)).toBe(true);
+  });
 });
diff --git a/src/plugins/summaryWidget/src/telemetry/SummaryWidgetTelemetryProvider.js b/src/plugins/summaryWidget/src/telemetry/SummaryWidgetTelemetryProvider.js
index 1067b4f6bc7..5c8f600b6fb 100644
--- a/src/plugins/summaryWidget/src/telemetry/SummaryWidgetTelemetryProvider.js
+++ b/src/plugins/summaryWidget/src/telemetry/SummaryWidgetTelemetryProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,48 +20,42 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    './EvaluatorPool'
-], function (
-    EvaluatorPool
-) {
+import EvaluatorPool from './EvaluatorPool.js';
 
-    function SummaryWidgetTelemetryProvider(openmct) {
-        this.pool = new EvaluatorPool(openmct);
-    }
+export default function SummaryWidgetTelemetryProvider(openmct) {
+  this.pool = new EvaluatorPool(openmct);
+}
 
-    SummaryWidgetTelemetryProvider.prototype.supportsRequest = function (domainObject, options) {
-        return domainObject.type === 'summary-widget';
-    };
+SummaryWidgetTelemetryProvider.prototype.supportsRequest = function (domainObject, options) {
+  return domainObject.type === 'summary-widget';
+};
 
-    SummaryWidgetTelemetryProvider.prototype.request = function (domainObject, options) {
-        if (options.strategy !== 'latest' && options.size !== 1) {
-            return Promise.resolve([]);
-        }
+SummaryWidgetTelemetryProvider.prototype.request = function (domainObject, options) {
+  if (options.strategy !== 'latest' && options.size !== 1) {
+    return Promise.resolve([]);
+  }
 
-        const evaluator = this.pool.get(domainObject);
+  const evaluator = this.pool.get(domainObject);
 
-        return evaluator.requestLatest(options)
-            .then(function (latestDatum) {
-                this.pool.release(evaluator);
+  return evaluator.requestLatest(options).then(
+    function (latestDatum) {
+      this.pool.release(evaluator);
 
-                return latestDatum ? [latestDatum] : [];
-            }.bind(this));
-    };
+      return latestDatum ? [latestDatum] : [];
+    }.bind(this)
+  );
+};
 
-    SummaryWidgetTelemetryProvider.prototype.supportsSubscribe = function (domainObject) {
-        return domainObject.type === 'summary-widget';
-    };
+SummaryWidgetTelemetryProvider.prototype.supportsSubscribe = function (domainObject) {
+  return domainObject.type === 'summary-widget';
+};
 
-    SummaryWidgetTelemetryProvider.prototype.subscribe = function (domainObject, callback) {
-        const evaluator = this.pool.get(domainObject);
-        const unsubscribe = evaluator.subscribe(callback);
+SummaryWidgetTelemetryProvider.prototype.subscribe = function (domainObject, callback) {
+  const evaluator = this.pool.get(domainObject);
+  const unsubscribe = evaluator.subscribe(callback);
 
-        return function () {
-            this.pool.release(evaluator);
-            unsubscribe();
-        }.bind(this);
-    };
-
-    return SummaryWidgetTelemetryProvider;
-});
+  return function () {
+    this.pool.release(evaluator);
+    unsubscribe();
+  }.bind(this);
+};
diff --git a/src/plugins/summaryWidget/src/telemetry/SummaryWidgetTelemetryProviderSpec.js b/src/plugins/summaryWidget/src/telemetry/SummaryWidgetTelemetryProviderSpec.js
index c51c7fce25f..1d76b25d322 100644
--- a/src/plugins/summaryWidget/src/telemetry/SummaryWidgetTelemetryProviderSpec.js
+++ b/src/plugins/summaryWidget/src/telemetry/SummaryWidgetTelemetryProviderSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,462 +20,444 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    './SummaryWidgetTelemetryProvider'
-], function (
-    SummaryWidgetTelemetryProvider
-) {
-
-    xdescribe('SummaryWidgetTelemetryProvider', function () {
-        let telemObjectA;
-        let telemObjectB;
-        let summaryWidgetObject;
-        let openmct;
-        let telemUnsubscribes;
-        let unobserver;
-        let composition;
-        let telemetryProvider;
-        let loader;
-
-        beforeEach(function () {
-            telemObjectA = {
-                identifier: {
-                    namespace: 'a',
-                    key: 'telem'
-                }
-            };
-            telemObjectB = {
-                identifier: {
-                    namespace: 'b',
-                    key: 'telem'
-                }
-            };
-            summaryWidgetObject = {
-                name: "Summary Widget",
-                type: "summary-widget",
-                identifier: {
-                    namespace: 'base',
-                    key: 'widgetId'
-                },
-                composition: [
-                    'a:telem',
-                    'b:telem'
-                ],
-                configuration: {
-                    ruleOrder: [
-                        "default",
-                        "rule0",
-                        "rule1"
-                    ],
-                    ruleConfigById: {
-                        "default": {
-                            name: "safe",
-                            label: "Don't Worry",
-                            message: "It's Ok",
-                            id: "default",
-                            icon: "a-ok",
-                            style: {
-                                "color": "#ffffff",
-                                "background-color": "#38761d",
-                                "border-color": "rgba(0,0,0,0)"
-                            },
-                            conditions: [
-                                {
-                                    object: "",
-                                    key: "",
-                                    operation: "",
-                                    values: []
-                                }
-                            ],
-                            trigger: "any"
-                        },
-                        "rule0": {
-                            name: "A High",
-                            label: "Start Worrying",
-                            message: "A is a little high...",
-                            id: "rule0",
-                            icon: "a-high",
-                            style: {
-                                "color": "#000000",
-                                "background-color": "#ffff00",
-                                "border-color": "rgba(1,1,0,0)"
-                            },
-                            conditions: [
-                                {
-                                    object: "a:telem",
-                                    key: "measurement",
-                                    operation: "greaterThan",
-                                    values: [
-                                        50
-                                    ]
-                                }
-                            ],
-                            trigger: "any"
-                        },
-                        rule1: {
-                            name: "B Low",
-                            label: "WORRY!",
-                            message: "B is Low",
-                            id: "rule1",
-                            icon: "b-low",
-                            style: {
-                                "color": "#ff00ff",
-                                "background-color": "#ff0000",
-                                "border-color": "rgba(1,0,0,0)"
-                            },
-                            conditions: [
-                                {
-                                    object: "b:telem",
-                                    key: "measurement",
-                                    operation: "lessThan",
-                                    values: [
-                                        10
-                                    ]
-                                }
-                            ],
-                            trigger: "any"
-                        }
-                    }
-                }
-            };
-            openmct = {
-                objects: jasmine.createSpyObj('objectAPI', [
-                    'get',
-                    'observe'
-                ]),
-                telemetry: jasmine.createSpyObj('telemetryAPI', [
-                    'getMetadata',
-                    'getFormatMap',
-                    'request',
-                    'subscribe',
-                    'addProvider'
-                ]),
-                composition: jasmine.createSpyObj('compositionAPI', [
-                    'get'
-                ]),
-                time: jasmine.createSpyObj('timeAPI', [
-                    'getAllTimeSystems',
-                    'timeSystem'
-                ])
-            };
-
-            openmct.time.getAllTimeSystems.and.returnValue([{key: 'timestamp'}]);
-            openmct.time.timeSystem.and.returnValue({key: 'timestamp'});
-
-            unobserver = jasmine.createSpy('unobserver');
-            openmct.objects.observe.and.returnValue(unobserver);
-
-            composition = jasmine.createSpyObj('compositionCollection', [
-                'on',
-                'off',
-                'load'
-            ]);
-
-            function notify(eventName, a, b) {
-                composition.on.calls.all().filter(function (c) {
-                    return c.args[0] === eventName;
-                }).forEach(function (c) {
-                    if (c.args[2]) { // listener w/ context.
-                        c.args[1].call(c.args[2], a, b);
-                    } else { // listener w/o context.
-                        c.args[1](a, b);
-                    }
-                });
-            }
-
-            loader = {};
-            loader.promise = new Promise(function (resolve, reject) {
-                loader.resolve = resolve;
-                loader.reject = reject;
-            });
-
-            composition.load.and.callFake(function () {
-                setTimeout(function () {
-                    notify('add', telemObjectA);
-                    setTimeout(function () {
-                        notify('add', telemObjectB);
-                        setTimeout(function () {
-                            loader.resolve();
-                        });
-                    });
-                });
-
-                return loader.promise;
-            });
-            openmct.composition.get.and.returnValue(composition);
-
-            telemUnsubscribes = [];
-            openmct.telemetry.subscribe.and.callFake(function () {
-                const unsubscriber = jasmine.createSpy('unsubscriber' + telemUnsubscribes.length);
-                telemUnsubscribes.push(unsubscriber);
-
-                return unsubscriber;
-            });
-
-            openmct.telemetry.getMetadata.and.callFake(function (object) {
-                return {
-                    name: 'fake metadata manager',
-                    object: object,
-                    keys: ['timestamp', 'measurement']
-                };
-            });
-
-            openmct.telemetry.getFormatMap.and.callFake(function (metadata) {
-                expect(metadata.name).toBe('fake metadata manager');
-
-                return {
-                    metadata: metadata,
-                    timestamp: {
-                        parse: function (datum) {
-                            return datum.t;
-                        }
-                    },
-                    measurement: {
-                        parse: function (datum) {
-                            return datum.m;
-                        }
-                    }
-                };
-            });
-            telemetryProvider = new SummaryWidgetTelemetryProvider(openmct);
+import SummaryWidgetTelemetryProvider from './SummaryWidgetTelemetryProvider.js';
+
+xdescribe('SummaryWidgetTelemetryProvider', function () {
+  let telemObjectA;
+  let telemObjectB;
+  let summaryWidgetObject;
+  let openmct;
+  let telemUnsubscribes;
+  let unobserver;
+  let composition;
+  let telemetryProvider;
+  let loader;
+
+  beforeEach(function () {
+    telemObjectA = {
+      identifier: {
+        namespace: 'a',
+        key: 'telem'
+      }
+    };
+    telemObjectB = {
+      identifier: {
+        namespace: 'b',
+        key: 'telem'
+      }
+    };
+    summaryWidgetObject = {
+      name: 'Summary Widget',
+      type: 'summary-widget',
+      identifier: {
+        namespace: 'base',
+        key: 'widgetId'
+      },
+      composition: ['a:telem', 'b:telem'],
+      configuration: {
+        ruleOrder: ['default', 'rule0', 'rule1'],
+        ruleConfigById: {
+          default: {
+            name: 'safe',
+            label: "Don't Worry",
+            message: "It's Ok",
+            id: 'default',
+            icon: 'a-ok',
+            style: {
+              color: '#ffffff',
+              'background-color': '#38761d',
+              'border-color': 'rgba(0,0,0,0)'
+            },
+            conditions: [
+              {
+                object: '',
+                key: '',
+                operation: '',
+                values: []
+              }
+            ],
+            trigger: 'any'
+          },
+          rule0: {
+            name: 'A High',
+            label: 'Start Worrying',
+            message: 'A is a little high...',
+            id: 'rule0',
+            icon: 'a-high',
+            style: {
+              color: '#000000',
+              'background-color': '#ffff00',
+              'border-color': 'rgba(1,1,0,0)'
+            },
+            conditions: [
+              {
+                object: 'a:telem',
+                key: 'measurement',
+                operation: 'greaterThan',
+                values: [50]
+              }
+            ],
+            trigger: 'any'
+          },
+          rule1: {
+            name: 'B Low',
+            label: 'WORRY!',
+            message: 'B is Low',
+            id: 'rule1',
+            icon: 'b-low',
+            style: {
+              color: '#ff00ff',
+              'background-color': '#ff0000',
+              'border-color': 'rgba(1,0,0,0)'
+            },
+            conditions: [
+              {
+                object: 'b:telem',
+                key: 'measurement',
+                operation: 'lessThan',
+                values: [10]
+              }
+            ],
+            trigger: 'any'
+          }
+        }
+      }
+    };
+    openmct = {
+      objects: jasmine.createSpyObj('objectAPI', ['get', 'observe']),
+      telemetry: jasmine.createSpyObj('telemetryAPI', [
+        'getMetadata',
+        'getFormatMap',
+        'request',
+        'subscribe',
+        'addProvider'
+      ]),
+      composition: jasmine.createSpyObj('compositionAPI', ['get']),
+      time: jasmine.createSpyObj('timeAPI', ['getAllTimeSystems', 'timeSystem'])
+    };
+
+    openmct.time.getAllTimeSystems.and.returnValue([{ key: 'timestamp' }]);
+    openmct.time.timeSystem.and.returnValue({ key: 'timestamp' });
+
+    unobserver = jasmine.createSpy('unobserver');
+    openmct.objects.observe.and.returnValue(unobserver);
+
+    composition = jasmine.createSpyObj('compositionCollection', ['on', 'off', 'load']);
+
+    function notify(eventName, a, b) {
+      composition.on.calls
+        .all()
+        .filter(function (c) {
+          return c.args[0] === eventName;
+        })
+        .forEach(function (c) {
+          if (c.args[2]) {
+            // listener w/ context.
+            c.args[1].call(c.args[2], a, b);
+          } else {
+            // listener w/o context.
+            c.args[1](a, b);
+          }
         });
+    }
 
-        it("supports subscription for summary widgets", function () {
-            expect(telemetryProvider.supportsSubscribe(summaryWidgetObject))
-                .toBe(true);
-        });
+    loader = {};
+    loader.promise = new Promise(function (resolve, reject) {
+      loader.resolve = resolve;
+      loader.reject = reject;
+    });
 
-        it("supports requests for summary widgets", function () {
-            expect(telemetryProvider.supportsRequest(summaryWidgetObject))
-                .toBe(true);
+    composition.load.and.callFake(function () {
+      setTimeout(function () {
+        notify('add', telemObjectA);
+        setTimeout(function () {
+          notify('add', telemObjectB);
+          setTimeout(function () {
+            loader.resolve();
+          });
         });
+      });
+
+      return loader.promise;
+    });
+    openmct.composition.get.and.returnValue(composition);
+
+    telemUnsubscribes = [];
+    openmct.telemetry.subscribe.and.callFake(function () {
+      const unsubscriber = jasmine.createSpy('unsubscriber' + telemUnsubscribes.length);
+      telemUnsubscribes.push(unsubscriber);
+
+      return unsubscriber;
+    });
+
+    openmct.telemetry.getMetadata.and.callFake(function (object) {
+      return {
+        name: 'fake metadata manager',
+        object: object,
+        keys: ['timestamp', 'measurement']
+      };
+    });
+
+    openmct.telemetry.getFormatMap.and.callFake(function (metadata) {
+      expect(metadata.name).toBe('fake metadata manager');
+
+      return {
+        metadata: metadata,
+        timestamp: {
+          parse: function (datum) {
+            return datum.t;
+          }
+        },
+        measurement: {
+          parse: function (datum) {
+            return datum.m;
+          }
+        }
+      };
+    });
+    telemetryProvider = new SummaryWidgetTelemetryProvider(openmct);
+  });
+
+  it('supports subscription for summary widgets', function () {
+    expect(telemetryProvider.supportsSubscribe(summaryWidgetObject)).toBe(true);
+  });
+
+  it('supports requests for summary widgets', function () {
+    expect(telemetryProvider.supportsRequest(summaryWidgetObject)).toBe(true);
+  });
+
+  it('does not support other requests or subscriptions', function () {
+    expect(telemetryProvider.supportsSubscribe(telemObjectA)).toBe(false);
+    expect(telemetryProvider.supportsRequest(telemObjectA)).toBe(false);
+  });
+
+  it('Returns no results for basic requests', function () {
+    return telemetryProvider.request(summaryWidgetObject, {}).then(function (result) {
+      expect(result).toEqual([]);
+    });
+  });
 
-        it("does not support other requests or subscriptions", function () {
-            expect(telemetryProvider.supportsSubscribe(telemObjectA))
-                .toBe(false);
-            expect(telemetryProvider.supportsRequest(telemObjectA))
-                .toBe(false);
+  it('provides realtime telemetry', function () {
+    const callback = jasmine.createSpy('callback');
+    telemetryProvider.subscribe(summaryWidgetObject, callback);
+
+    return loader.promise
+      .then(function () {
+        return new Promise(function (resolve) {
+          setTimeout(resolve);
+        });
+      })
+      .then(function () {
+        expect(openmct.telemetry.subscribe.calls.count()).toBe(2);
+        expect(openmct.telemetry.subscribe).toHaveBeenCalledWith(
+          telemObjectA,
+          jasmine.any(Function)
+        );
+        expect(openmct.telemetry.subscribe).toHaveBeenCalledWith(
+          telemObjectB,
+          jasmine.any(Function)
+        );
+
+        const aCallback = openmct.telemetry.subscribe.calls.all()[0].args[1];
+        const bCallback = openmct.telemetry.subscribe.calls.all()[1].args[1];
+
+        aCallback({
+          t: 123,
+          m: 25
+        });
+        expect(callback).not.toHaveBeenCalled();
+        bCallback({
+          t: 123,
+          m: 25
+        });
+        expect(callback).toHaveBeenCalledWith({
+          timestamp: 123,
+          ruleLabel: "Don't Worry",
+          ruleName: 'safe',
+          message: "It's Ok",
+          ruleIndex: 0,
+          backgroundColor: '#38761d',
+          textColor: '#ffffff',
+          borderColor: 'rgba(0,0,0,0)',
+          icon: 'a-ok'
         });
 
-        it("Returns no results for basic requests", function () {
-            return telemetryProvider.request(summaryWidgetObject, {})
-                .then(function (result) {
-                    expect(result).toEqual([]);
-                });
+        aCallback({
+          t: 140,
+          m: 55
+        });
+        expect(callback).toHaveBeenCalledWith({
+          timestamp: 140,
+          ruleLabel: 'Start Worrying',
+          ruleName: 'A High',
+          message: 'A is a little high...',
+          ruleIndex: 1,
+          backgroundColor: '#ffff00',
+          textColor: '#000000',
+          borderColor: 'rgba(1,1,0,0)',
+          icon: 'a-high'
         });
 
-        it('provides realtime telemetry', function () {
-            const callback = jasmine.createSpy('callback');
-            telemetryProvider.subscribe(summaryWidgetObject, callback);
-
-            return loader.promise.then(function () {
-                return new Promise(function (resolve) {
-                    setTimeout(resolve);
-                });
-            }).then(function () {
-                expect(openmct.telemetry.subscribe.calls.count()).toBe(2);
-                expect(openmct.telemetry.subscribe)
-                    .toHaveBeenCalledWith(telemObjectA, jasmine.any(Function));
-                expect(openmct.telemetry.subscribe)
-                    .toHaveBeenCalledWith(telemObjectB, jasmine.any(Function));
-
-                const aCallback = openmct.telemetry.subscribe.calls.all()[0].args[1];
-                const bCallback = openmct.telemetry.subscribe.calls.all()[1].args[1];
-
-                aCallback({
-                    t: 123,
-                    m: 25
-                });
-                expect(callback).not.toHaveBeenCalled();
-                bCallback({
-                    t: 123,
-                    m: 25
-                });
-                expect(callback).toHaveBeenCalledWith({
-                    timestamp: 123,
-                    ruleLabel: "Don't Worry",
-                    ruleName: "safe",
-                    message: "It's Ok",
-                    ruleIndex: 0,
-                    backgroundColor: '#38761d',
-                    textColor: '#ffffff',
-                    borderColor: 'rgba(0,0,0,0)',
-                    icon: 'a-ok'
-                });
-
-                aCallback({
-                    t: 140,
-                    m: 55
-                });
-                expect(callback).toHaveBeenCalledWith({
-                    timestamp: 140,
-                    ruleLabel: "Start Worrying",
-                    ruleName: "A High",
-                    message: "A is a little high...",
-                    ruleIndex: 1,
-                    backgroundColor: '#ffff00',
-                    textColor: '#000000',
-                    borderColor: 'rgba(1,1,0,0)',
-                    icon: 'a-high'
-                });
-
-                bCallback({
-                    t: 140,
-                    m: -10
-                });
-                expect(callback).toHaveBeenCalledWith({
-                    timestamp: 140,
-                    ruleLabel: "WORRY!",
-                    ruleName: "B Low",
-                    message: "B is Low",
-                    ruleIndex: 2,
-                    backgroundColor: '#ff0000',
-                    textColor: '#ff00ff',
-                    borderColor: 'rgba(1,0,0,0)',
-                    icon: 'b-low'
-                });
-
-                aCallback({
-                    t: 160,
-                    m: 25
-                });
-                expect(callback).toHaveBeenCalledWith({
-                    timestamp: 160,
-                    ruleLabel: "WORRY!",
-                    ruleName: "B Low",
-                    message: "B is Low",
-                    ruleIndex: 2,
-                    backgroundColor: '#ff0000',
-                    textColor: '#ff00ff',
-                    borderColor: 'rgba(1,0,0,0)',
-                    icon: 'b-low'
-                });
-
-                bCallback({
-                    t: 160,
-                    m: 25
-                });
-                expect(callback).toHaveBeenCalledWith({
-                    timestamp: 160,
-                    ruleLabel: "Don't Worry",
-                    ruleName: "safe",
-                    message: "It's Ok",
-                    ruleIndex: 0,
-                    backgroundColor: '#38761d',
-                    textColor: '#ffffff',
-                    borderColor: 'rgba(0,0,0,0)',
-                    icon: 'a-ok'
-                });
-            });
+        bCallback({
+          t: 140,
+          m: -10
+        });
+        expect(callback).toHaveBeenCalledWith({
+          timestamp: 140,
+          ruleLabel: 'WORRY!',
+          ruleName: 'B Low',
+          message: 'B is Low',
+          ruleIndex: 2,
+          backgroundColor: '#ff0000',
+          textColor: '#ff00ff',
+          borderColor: 'rgba(1,0,0,0)',
+          icon: 'b-low'
         });
 
-        describe('providing lad telemetry', function () {
-            let responseDatums;
-            let resultsShouldBe;
-
-            beforeEach(function () {
-                openmct.telemetry.request.and.callFake(function (rObj, options) {
-                    expect(rObj).toEqual(jasmine.any(Object));
-                    expect(options).toEqual({
-                        size: 1,
-                        strategy: 'latest',
-                        domain: 'timestamp'
-                    });
-                    expect(responseDatums[rObj.identifier.namespace]).toBeDefined();
-
-                    return Promise.resolve([responseDatums[rObj.identifier.namespace]]);
-                });
-                responseDatums = {};
-
-                resultsShouldBe = function (results) {
-                    return telemetryProvider
-                        .request(summaryWidgetObject, {
-                            size: 1,
-                            strategy: 'latest',
-                            domain: 'timestamp'
-                        })
-                        .then(function (r) {
-                            expect(r).toEqual(results);
-                        });
-                };
-            });
-
-            it("returns default when no rule matches", function () {
-                responseDatums = {
-                    a: {
-                        t: 122,
-                        m: 25
-                    },
-                    b: {
-                        t: 111,
-                        m: 25
-                    }
-                };
-
-                return resultsShouldBe([{
-                    timestamp: 122,
-                    ruleLabel: "Don't Worry",
-                    ruleName: "safe",
-                    message: "It's Ok",
-                    ruleIndex: 0,
-                    backgroundColor: '#38761d',
-                    textColor: '#ffffff',
-                    borderColor: 'rgba(0,0,0,0)',
-                    icon: 'a-ok'
-                }]);
-            });
-
-            it("returns highest priority when multiple match", function () {
-                responseDatums = {
-                    a: {
-                        t: 131,
-                        m: 55
-                    },
-                    b: {
-                        t: 139,
-                        m: 5
-                    }
-                };
-
-                return resultsShouldBe([{
-                    timestamp: 139,
-                    ruleLabel: "WORRY!",
-                    ruleName: "B Low",
-                    message: "B is Low",
-                    ruleIndex: 2,
-                    backgroundColor: '#ff0000',
-                    textColor: '#ff00ff',
-                    borderColor: 'rgba(1,0,0,0)',
-                    icon: 'b-low'
-                }]);
-            });
-
-            it("returns matching rule", function () {
-                responseDatums = {
-                    a: {
-                        t: 144,
-                        m: 55
-                    },
-                    b: {
-                        t: 141,
-                        m: 15
-                    }
-                };
-
-                return resultsShouldBe([{
-                    timestamp: 144,
-                    ruleLabel: "Start Worrying",
-                    ruleName: "A High",
-                    message: "A is a little high...",
-                    ruleIndex: 1,
-                    backgroundColor: '#ffff00',
-                    textColor: '#000000',
-                    borderColor: 'rgba(1,1,0,0)',
-                    icon: 'a-high'
-                }]);
-            });
+        aCallback({
+          t: 160,
+          m: 25
+        });
+        expect(callback).toHaveBeenCalledWith({
+          timestamp: 160,
+          ruleLabel: 'WORRY!',
+          ruleName: 'B Low',
+          message: 'B is Low',
+          ruleIndex: 2,
+          backgroundColor: '#ff0000',
+          textColor: '#ff00ff',
+          borderColor: 'rgba(1,0,0,0)',
+          icon: 'b-low'
+        });
 
+        bCallback({
+          t: 160,
+          m: 25
         });
+        expect(callback).toHaveBeenCalledWith({
+          timestamp: 160,
+          ruleLabel: "Don't Worry",
+          ruleName: 'safe',
+          message: "It's Ok",
+          ruleIndex: 0,
+          backgroundColor: '#38761d',
+          textColor: '#ffffff',
+          borderColor: 'rgba(0,0,0,0)',
+          icon: 'a-ok'
+        });
+      });
+  });
+
+  describe('providing lad telemetry', function () {
+    let responseDatums;
+    let resultsShouldBe;
+
+    beforeEach(function () {
+      openmct.telemetry.request.and.callFake(function (rObj, options) {
+        expect(rObj).toEqual(jasmine.any(Object));
+        expect(options).toEqual({
+          size: 1,
+          strategy: 'latest',
+          domain: 'timestamp'
+        });
+        expect(responseDatums[rObj.identifier.namespace]).toBeDefined();
+
+        return Promise.resolve([responseDatums[rObj.identifier.namespace]]);
+      });
+      responseDatums = {};
+
+      resultsShouldBe = function (results) {
+        return telemetryProvider
+          .request(summaryWidgetObject, {
+            size: 1,
+            strategy: 'latest',
+            domain: 'timestamp'
+          })
+          .then(function (r) {
+            expect(r).toEqual(results);
+          });
+      };
+    });
+
+    it('returns default when no rule matches', function () {
+      responseDatums = {
+        a: {
+          t: 122,
+          m: 25
+        },
+        b: {
+          t: 111,
+          m: 25
+        }
+      };
+
+      return resultsShouldBe([
+        {
+          timestamp: 122,
+          ruleLabel: "Don't Worry",
+          ruleName: 'safe',
+          message: "It's Ok",
+          ruleIndex: 0,
+          backgroundColor: '#38761d',
+          textColor: '#ffffff',
+          borderColor: 'rgba(0,0,0,0)',
+          icon: 'a-ok'
+        }
+      ]);
+    });
+
+    it('returns highest priority when multiple match', function () {
+      responseDatums = {
+        a: {
+          t: 131,
+          m: 55
+        },
+        b: {
+          t: 139,
+          m: 5
+        }
+      };
+
+      return resultsShouldBe([
+        {
+          timestamp: 139,
+          ruleLabel: 'WORRY!',
+          ruleName: 'B Low',
+          message: 'B is Low',
+          ruleIndex: 2,
+          backgroundColor: '#ff0000',
+          textColor: '#ff00ff',
+          borderColor: 'rgba(1,0,0,0)',
+          icon: 'b-low'
+        }
+      ]);
+    });
 
+    it('returns matching rule', function () {
+      responseDatums = {
+        a: {
+          t: 144,
+          m: 55
+        },
+        b: {
+          t: 141,
+          m: 15
+        }
+      };
+
+      return resultsShouldBe([
+        {
+          timestamp: 144,
+          ruleLabel: 'Start Worrying',
+          ruleName: 'A High',
+          message: 'A is a little high...',
+          ruleIndex: 1,
+          backgroundColor: '#ffff00',
+          textColor: '#000000',
+          borderColor: 'rgba(1,1,0,0)',
+          icon: 'a-high'
+        }
+      ]);
     });
+  });
 });
diff --git a/src/plugins/summaryWidget/src/telemetry/operations.js b/src/plugins/summaryWidget/src/telemetry/operations.js
index fef725a9b08..734a395ea8b 100644
--- a/src/plugins/summaryWidget/src/telemetry/operations.js
+++ b/src/plugins/summaryWidget/src/telemetry/operations.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,200 +20,194 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
+const OPERATIONS = {
+  equalTo: {
+    operation: function (input) {
+      return input[0] === input[1];
+    },
+    text: 'is equal to',
+    appliesTo: ['number'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' == ' + values[0];
+    }
+  },
+  notEqualTo: {
+    operation: function (input) {
+      return input[0] !== input[1];
+    },
+    text: 'is not equal to',
+    appliesTo: ['number'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' != ' + values[0];
+    }
+  },
+  greaterThan: {
+    operation: function (input) {
+      return input[0] > input[1];
+    },
+    text: 'is greater than',
+    appliesTo: ['number'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' > ' + values[0];
+    }
+  },
+  lessThan: {
+    operation: function (input) {
+      return input[0] < input[1];
+    },
+    text: 'is less than',
+    appliesTo: ['number'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' < ' + values[0];
+    }
+  },
+  greaterThanOrEq: {
+    operation: function (input) {
+      return input[0] >= input[1];
+    },
+    text: 'is greater than or equal to',
+    appliesTo: ['number'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' >= ' + values[0];
+    }
+  },
+  lessThanOrEq: {
+    operation: function (input) {
+      return input[0] <= input[1];
+    },
+    text: 'is less than or equal to',
+    appliesTo: ['number'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' <= ' + values[0];
+    }
+  },
+  between: {
+    operation: function (input) {
+      return input[0] > input[1] && input[0] < input[2];
+    },
+    text: 'is between',
+    appliesTo: ['number'],
+    inputCount: 2,
+    getDescription: function (values) {
+      return ' between ' + values[0] + ' and ' + values[1];
+    }
+  },
+  notBetween: {
+    operation: function (input) {
+      return input[0] < input[1] || input[0] > input[2];
+    },
+    text: 'is not between',
+    appliesTo: ['number'],
+    inputCount: 2,
+    getDescription: function (values) {
+      return ' not between ' + values[0] + ' and ' + values[1];
+    }
+  },
+  textContains: {
+    operation: function (input) {
+      return input[0] && input[1] && input[0].includes(input[1]);
+    },
+    text: 'text contains',
+    appliesTo: ['string'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' contains ' + values[0];
+    }
+  },
+  textDoesNotContain: {
+    operation: function (input) {
+      return input[0] && input[1] && !input[0].includes(input[1]);
+    },
+    text: 'text does not contain',
+    appliesTo: ['string'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' does not contain ' + values[0];
+    }
+  },
+  textStartsWith: {
+    operation: function (input) {
+      return input[0].startsWith(input[1]);
+    },
+    text: 'text starts with',
+    appliesTo: ['string'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' starts with ' + values[0];
+    }
+  },
+  textEndsWith: {
+    operation: function (input) {
+      return input[0].endsWith(input[1]);
+    },
+    text: 'text ends with',
+    appliesTo: ['string'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' ends with ' + values[0];
+    }
+  },
+  textIsExactly: {
+    operation: function (input) {
+      return input[0] === input[1];
+    },
+    text: 'text is exactly',
+    appliesTo: ['string'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' is exactly ' + values[0];
+    }
+  },
+  isUndefined: {
+    operation: function (input) {
+      return typeof input[0] === 'undefined';
+    },
+    text: 'is undefined',
+    appliesTo: ['string', 'number', 'enum'],
+    inputCount: 0,
+    getDescription: function () {
+      return ' is undefined';
+    }
+  },
+  isDefined: {
+    operation: function (input) {
+      return typeof input[0] !== 'undefined';
+    },
+    text: 'is defined',
+    appliesTo: ['string', 'number', 'enum'],
+    inputCount: 0,
+    getDescription: function () {
+      return ' is defined';
+    }
+  },
+  enumValueIs: {
+    operation: function (input) {
+      return input[0] === input[1];
+    },
+    text: 'is',
+    appliesTo: ['enum'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' == ' + values[0];
+    }
+  },
+  enumValueIsNot: {
+    operation: function (input) {
+      return input[0] !== input[1];
+    },
+    text: 'is not',
+    appliesTo: ['enum'],
+    inputCount: 1,
+    getDescription: function (values) {
+      return ' != ' + values[0];
+    }
+  }
+};
 
-], function (
-
-) {
-    const OPERATIONS = {
-        equalTo: {
-            operation: function (input) {
-                return input[0] === input[1];
-            },
-            text: 'is equal to',
-            appliesTo: ['number'],
-            inputCount: 1,
-            getDescription: function (values) {
-                return ' == ' + values[0];
-            }
-        },
-        notEqualTo: {
-            operation: function (input) {
-                return input[0] !== input[1];
-            },
-            text: 'is not equal to',
-            appliesTo: ['number'],
-            inputCount: 1,
-            getDescription: function (values) {
-                return ' != ' + values[0];
-            }
-        },
-        greaterThan: {
-            operation: function (input) {
-                return input[0] > input[1];
-            },
-            text: 'is greater than',
-            appliesTo: ['number'],
-            inputCount: 1,
-            getDescription: function (values) {
-                return ' > ' + values[0];
-            }
-        },
-        lessThan: {
-            operation: function (input) {
-                return input[0] < input[1];
-            },
-            text: 'is less than',
-            appliesTo: ['number'],
-            inputCount: 1,
-            getDescription: function (values) {
-                return ' < ' + values[0];
-            }
-        },
-        greaterThanOrEq: {
-            operation: function (input) {
-                return input[0] >= input[1];
-            },
-            text: 'is greater than or equal to',
-            appliesTo: ['number'],
-            inputCount: 1,
-            getDescription: function (values) {
-                return ' >= ' + values[0];
-            }
-        },
-        lessThanOrEq: {
-            operation: function (input) {
-                return input[0] <= input[1];
-            },
-            text: 'is less than or equal to',
-            appliesTo: ['number'],
-            inputCount: 1,
-            getDescription: function (values) {
-                return ' <= ' + values[0];
-            }
-        },
-        between: {
-            operation: function (input) {
-                return input[0] > input[1] && input[0] < input[2];
-            },
-            text: 'is between',
-            appliesTo: ['number'],
-            inputCount: 2,
-            getDescription: function (values) {
-                return ' between ' + values[0] + ' and ' + values[1];
-            }
-        },
-        notBetween: {
-            operation: function (input) {
-                return input[0] < input[1] || input[0] > input[2];
-            },
-            text: 'is not between',
-            appliesTo: ['number'],
-            inputCount: 2,
-            getDescription: function (values) {
-                return ' not between ' + values[0] + ' and ' + values[1];
-            }
-        },
-        textContains: {
-            operation: function (input) {
-                return input[0] && input[1] && input[0].includes(input[1]);
-            },
-            text: 'text contains',
-            appliesTo: ['string'],
-            inputCount: 1,
-            getDescription: function (values) {
-                return ' contains ' + values[0];
-            }
-        },
-        textDoesNotContain: {
-            operation: function (input) {
-                return input[0] && input[1] && !input[0].includes(input[1]);
-            },
-            text: 'text does not contain',
-            appliesTo: ['string'],
-            inputCount: 1,
-            getDescription: function (values) {
-                return ' does not contain ' + values[0];
-            }
-        },
-        textStartsWith: {
-            operation: function (input) {
-                return input[0].startsWith(input[1]);
-            },
-            text: 'text starts with',
-            appliesTo: ['string'],
-            inputCount: 1,
-            getDescription: function (values) {
-                return ' starts with ' + values[0];
-            }
-        },
-        textEndsWith: {
-            operation: function (input) {
-                return input[0].endsWith(input[1]);
-            },
-            text: 'text ends with',
-            appliesTo: ['string'],
-            inputCount: 1,
-            getDescription: function (values) {
-                return ' ends with ' + values[0];
-            }
-        },
-        textIsExactly: {
-            operation: function (input) {
-                return input[0] === input[1];
-            },
-            text: 'text is exactly',
-            appliesTo: ['string'],
-            inputCount: 1,
-            getDescription: function (values) {
-                return ' is exactly ' + values[0];
-            }
-        },
-        isUndefined: {
-            operation: function (input) {
-                return typeof input[0] === 'undefined';
-            },
-            text: 'is undefined',
-            appliesTo: ['string', 'number', 'enum'],
-            inputCount: 0,
-            getDescription: function () {
-                return ' is undefined';
-            }
-        },
-        isDefined: {
-            operation: function (input) {
-                return typeof input[0] !== 'undefined';
-            },
-            text: 'is defined',
-            appliesTo: ['string', 'number', 'enum'],
-            inputCount: 0,
-            getDescription: function () {
-                return ' is defined';
-            }
-        },
-        enumValueIs: {
-            operation: function (input) {
-                return input[0] === input[1];
-            },
-            text: 'is',
-            appliesTo: ['enum'],
-            inputCount: 1,
-            getDescription: function (values) {
-                return ' == ' + values[0];
-            }
-        },
-        enumValueIsNot: {
-            operation: function (input) {
-                return input[0] !== input[1];
-            },
-            text: 'is not',
-            appliesTo: ['enum'],
-            inputCount: 1,
-            getDescription: function (values) {
-                return ' != ' + values[0];
-            }
-        }
-    };
-
-    return OPERATIONS;
-});
+export default OPERATIONS;
diff --git a/src/plugins/summaryWidget/src/views/SummaryWidgetView.js b/src/plugins/summaryWidget/src/views/SummaryWidgetView.js
index bf01ece913b..eb563ce4b58 100644
--- a/src/plugins/summaryWidget/src/views/SummaryWidgetView.js
+++ b/src/plugins/summaryWidget/src/views/SummaryWidgetView.js
@@ -1,100 +1,130 @@
-define([
-    './summary-widget.html'
-], function (
-    summaryWidgetTemplate
-) {
-    const WIDGET_ICON_CLASS = 'c-sw__icon js-sw__icon';
-
-    function SummaryWidgetView(domainObject, openmct) {
-        this.openmct = openmct;
-        this.domainObject = domainObject;
-        this.hasUpdated = false;
-        this.render = this.render.bind(this);
+import * as urlSanitizeLib from '@braintree/sanitize-url';
+
+const WIDGET_ICON_CLASS = 'c-sw__icon js-sw__icon';
+
+class SummaryWidgetView {
+  #createSummaryWidgetTemplate() {
+    const anchor = document.createElement('a');
+    anchor.classList.add(
+      't-summary-widget',
+      'c-summary-widget',
+      'js-sw',
+      'u-links',
+      'u-fills-container'
+    );
+
+    const widgetIcon = document.createElement('div');
+    widgetIcon.id = 'widgetIcon';
+    widgetIcon.classList.add('c-sw__icon', 'js-sw__icon');
+    anchor.appendChild(widgetIcon);
+
+    const widgetLabel = document.createElement('div');
+    widgetLabel.id = 'widgetLabel';
+    widgetLabel.classList.add('c-sw__label', 'js-sw__label');
+    widgetLabel.textContent = 'Loading...';
+    anchor.appendChild(widgetLabel);
+
+    return anchor;
+  }
+
+  constructor(domainObject, openmct) {
+    this.openmct = openmct;
+    this.domainObject = domainObject;
+    this.hasUpdated = false;
+    this.render = this.render.bind(this);
+  }
+
+  updateState(datum) {
+    this.hasUpdated = true;
+    this.widget.style.color = datum.textColor;
+    this.widget.style.backgroundColor = datum.backgroundColor;
+    this.widget.style.borderColor = datum.borderColor;
+    this.widget.title = datum.message;
+    this.label.title = datum.message;
+    this.label.textContent = datum.ruleLabel;
+    this.icon.className = WIDGET_ICON_CLASS + ' ' + datum.icon;
+  }
+
+  render() {
+    if (this.unsubscribe) {
+      this.unsubscribe();
     }
 
-    SummaryWidgetView.prototype.updateState = function (datum) {
-        this.hasUpdated = true;
-        this.widget.style.color = datum.textColor;
-        this.widget.style.backgroundColor = datum.backgroundColor;
-        this.widget.style.borderColor = datum.borderColor;
-        this.widget.title = datum.message;
-        this.label.title = datum.message;
-        this.label.innerHTML = datum.ruleLabel;
-        this.icon.className = WIDGET_ICON_CLASS + ' ' + datum.icon;
-    };
-
-    SummaryWidgetView.prototype.render = function () {
-        if (this.unsubscribe) {
-            this.unsubscribe();
-        }
+    this.hasUpdated = false;
 
-        this.hasUpdated = false;
+    const anchor = this.#createSummaryWidgetTemplate();
+    this.container.appendChild(anchor);
 
-        this.container.innerHTML = summaryWidgetTemplate;
-        this.widget = this.container.querySelector('a');
-        this.icon = this.container.querySelector('#widgetIcon');
-        this.label = this.container.querySelector('.js-sw__label');
+    this.widget = this.container.querySelector('a');
+    this.icon = this.container.querySelector('#widgetIcon');
+    this.label = this.container.querySelector('.js-sw__label');
 
-        if (this.domainObject.url) {
-            this.widget.setAttribute('href', this.domainObject.url);
-        } else {
-            this.widget.removeAttribute('href');
-        }
+    let url = this.domainObject.url;
+    if (url) {
+      this.widget.setAttribute('href', urlSanitizeLib.sanitizeUrl(url));
+    } else {
+      this.widget.removeAttribute('href');
+    }
+
+    if (this.domainObject.openNewTab === 'newTab') {
+      this.widget.setAttribute('target', '_blank');
+    } else {
+      this.widget.removeAttribute('target');
+    }
 
-        if (this.domainObject.openNewTab === 'newTab') {
-            this.widget.setAttribute('target', '_blank');
-        } else {
-            this.widget.removeAttribute('target');
+    const renderTracker = {};
+    this.renderTracker = renderTracker;
+
+    this.openmct.telemetry
+      .request(this.domainObject, {
+        strategy: 'latest',
+        size: 1
+      })
+      .then((results) => {
+        if (
+          this.destroyed ||
+          this.hasUpdated ||
+          this.renderTracker !== renderTracker ||
+          results.length === 0
+        ) {
+          return;
         }
 
-        const renderTracker = {};
-        this.renderTracker = renderTracker;
-        this.openmct.telemetry.request(this.domainObject, {
-            strategy: 'latest',
-            size: 1
-        }).then(function (results) {
-            if (this.destroyed
-                || this.hasUpdated
-                || this.renderTracker !== renderTracker
-                || results.length === 0) {
-                return;
-            }
-
-            this.updateState(results[results.length - 1]);
-        }.bind(this));
-
-        this.unsubscribe = this.openmct
-            .telemetry
-            .subscribe(this.domainObject, this.updateState.bind(this));
-    };
-
-    SummaryWidgetView.prototype.show = function (container) {
-        this.container = container;
-        this.render();
-        this.removeMutationListener = this.openmct.objects.observe(
-            this.domainObject,
-            '*',
-            this.onMutation.bind(this)
-        );
-        this.openmct.time.on('timeSystem', this.render);
-    };
-
-    SummaryWidgetView.prototype.onMutation = function (domainObject) {
-        this.domainObject = domainObject;
-        this.render();
-    };
-
-    SummaryWidgetView.prototype.destroy = function (container) {
-        this.unsubscribe();
-        this.removeMutationListener();
-        this.openmct.time.off('timeSystem', this.render);
-        this.destroyed = true;
-        delete this.widget;
-        delete this.label;
-        delete this.openmct;
-        delete this.domainObject;
-    };
-
-    return SummaryWidgetView;
-
-});
+        this.updateState(results[results.length - 1]);
+      });
+
+    this.unsubscribe = this.openmct.telemetry.subscribe(
+      this.domainObject,
+      this.updateState.bind(this)
+    );
+  }
+
+  show(container) {
+    this.container = container;
+    this.render();
+    this.removeMutationListener = this.openmct.objects.observe(
+      this.domainObject,
+      '*',
+      this.onMutation.bind(this)
+    );
+    this.openmct.time.on('timeSystem', this.render);
+  }
+
+  onMutation(domainObject) {
+    this.domainObject = domainObject;
+    this.render();
+  }
+
+  destroy() {
+    this.unsubscribe();
+    this.removeMutationListener();
+    this.openmct.time.off('timeSystem', this.render);
+    this.destroyed = true;
+    delete this.widget;
+    delete this.label;
+    delete this.openmct;
+    delete this.domainObject;
+  }
+}
+
+export default SummaryWidgetView;
diff --git a/src/plugins/summaryWidget/src/views/SummaryWidgetViewProvider.js b/src/plugins/summaryWidget/src/views/SummaryWidgetViewProvider.js
index db569a0e584..886f9c38b21 100644
--- a/src/plugins/summaryWidget/src/views/SummaryWidgetViewProvider.js
+++ b/src/plugins/summaryWidget/src/views/SummaryWidgetViewProvider.js
@@ -1,43 +1,52 @@
-define([
-    '../SummaryWidget',
-    './SummaryWidgetView',
-    'objectUtils'
-], function (
-    SummaryWidgetEditView,
-    SummaryWidgetView,
-    objectUtils
-) {
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
 
-    const DEFAULT_VIEW_PRIORITY = 100;
-    /**
-     *
-     */
-    function SummaryWidgetViewProvider(openmct) {
-        return {
-            key: 'summary-widget-viewer',
-            name: 'Summary View',
-            cssClass: 'icon-summary-widget',
-            canView: function (domainObject) {
-                return domainObject.type === 'summary-widget';
-            },
-            canEdit: function (domainObject) {
-                return domainObject.type === 'summary-widget';
-            },
-            view: function (domainObject) {
-                return new SummaryWidgetView(domainObject, openmct);
-            },
-            edit: function (domainObject) {
-                return new SummaryWidgetEditView(domainObject, openmct);
-            },
-            priority: function (domainObject) {
-                if (domainObject.type === 'summary-widget') {
-                    return Number.MAX_VALUE;
-                } else {
-                    return DEFAULT_VIEW_PRIORITY;
-                }
-            }
-        };
-    }
+import SummaryWidgetEditView from '../SummaryWidget.js';
+import SummaryWidgetView from './SummaryWidgetView.js';
 
-    return SummaryWidgetViewProvider;
-});
+const DEFAULT_VIEW_PRIORITY = 100;
+export default function SummaryWidgetViewProvider(openmct) {
+  return {
+    key: 'summary-widget-viewer',
+    name: 'Summary View',
+    cssClass: 'icon-summary-widget',
+    canView: function (domainObject) {
+      return domainObject.type === 'summary-widget';
+    },
+    canEdit: function (domainObject) {
+      return domainObject.type === 'summary-widget';
+    },
+    view: function (domainObject) {
+      return new SummaryWidgetView(domainObject, openmct);
+    },
+    edit: function (domainObject) {
+      return new SummaryWidgetEditView(domainObject, openmct);
+    },
+    priority: function (domainObject) {
+      if (domainObject.type === 'summary-widget') {
+        return Number.MAX_VALUE;
+      } else {
+        return DEFAULT_VIEW_PRIORITY;
+      }
+    }
+  };
+}
diff --git a/src/plugins/summaryWidget/src/views/summary-widget.html b/src/plugins/summaryWidget/src/views/summary-widget.html
deleted file mode 100644
index 738fbaf08bb..00000000000
--- a/src/plugins/summaryWidget/src/views/summary-widget.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<a class="t-summary-widget c-summary-widget js-sw u-links u-fills-container">
-    <div id="widgetIcon" class="c-sw__icon js-sw__icon"></div>
-    <div id="widgetLabel" class="c-sw__label js-sw__label">Loading...</div>
-</a>
\ No newline at end of file
diff --git a/src/plugins/summaryWidget/test/ConditionEvaluatorSpec.js b/src/plugins/summaryWidget/test/ConditionEvaluatorSpec.js
index 49ff638a490..ff93bad84a0 100644
--- a/src/plugins/summaryWidget/test/ConditionEvaluatorSpec.js
+++ b/src/plugins/summaryWidget/test/ConditionEvaluatorSpec.js
@@ -1,340 +1,363 @@
-define(['../src/ConditionEvaluator'], function (ConditionEvaluator) {
-    describe('A Summary Widget Rule Evaluator', function () {
-        let evaluator;
-        let testEvaluator;
-        let testOperation;
-        let mockCache;
-        let mockTestCache;
-        let mockComposition;
-        let mockConditions;
-        let mockConditionsEmpty;
-        let mockConditionsUndefined;
-        let mockConditionsAnyTrue;
-        let mockConditionsAllTrue;
-        let mockConditionsAnyFalse;
-        let mockConditionsAllFalse;
-        let mockOperations;
+import ConditionEvaluator from '../src/ConditionEvaluator.js';
 
-        beforeEach(function () {
-            mockCache = {
-                a: {
-                    alpha: 3,
-                    beta: 9,
-                    gamma: 'Testing 1 2 3'
-                },
-                b: {
-                    alpha: 44,
-                    beta: 23,
-                    gamma: 'Hello World'
-                },
-                c: {
-                    foo: 'bar',
-                    iAm: 'The Walrus',
-                    creature: {
-                        type: 'Centaur'
-                    }
-                }
-            };
-            mockTestCache = {
-                a: {
-                    alpha: 1,
-                    beta: 1,
-                    gamma: 'Testing 4 5 6'
-                },
-                b: {
-                    alpha: 2,
-                    beta: 2,
-                    gamma: 'Goodbye world'
-                }
-            };
-            mockComposition = {
-                a: {},
-                b: {},
-                c: {}
-            };
-            mockConditions = [{
-                object: 'a',
-                key: 'alpha',
-                operation: 'greaterThan',
-                values: [2]
-            }, {
-                object: 'b',
-                key: 'gamma',
-                operation: 'lessThan',
-                values: [5]
-            }];
-            mockConditionsEmpty = [{
-                object: '',
-                key: '',
-                operation: '',
-                values: []
-            }];
-            mockConditionsUndefined = [{
-                object: 'No Such Object',
-                key: '',
-                operation: '',
-                values: []
-            }, {
-                object: 'a',
-                key: 'No Such Key',
-                operation: '',
-                values: []
-            }, {
-                object: 'a',
-                key: 'alpha',
-                operation: 'No Such Operation',
-                values: []
-            }, {
-                object: 'all',
-                key: 'Nonexistent Field',
-                operation: 'Random Operation',
-                values: []
-            }, {
-                object: 'any',
-                key: 'Nonexistent Field',
-                operation: 'Whatever Operation',
-                values: []
-            }];
-            mockConditionsAnyTrue = [{
-                object: 'any',
-                key: 'alpha',
-                operation: 'greaterThan',
-                values: [5]
-            }];
-            mockConditionsAnyFalse = [{
-                object: 'any',
-                key: 'alpha',
-                operation: 'greaterThan',
-                values: [1000]
-            }];
-            mockConditionsAllFalse = [{
-                object: 'all',
-                key: 'alpha',
-                operation: 'greaterThan',
-                values: [5]
-            }];
-            mockConditionsAllTrue = [{
-                object: 'all',
-                key: 'alpha',
-                operation: 'greaterThan',
-                values: [0]
-            }];
-            mockOperations = {
-                greaterThan: {
-                    operation: function (input) {
-                        return input[0] > input[1];
-                    },
-                    text: 'is greater than',
-                    appliesTo: ['number'],
-                    inputCount: 1,
-                    getDescription: function (values) {
-                        return ' > ' + values[0];
-                    }
-                },
-                lessThan: {
-                    operation: function (input) {
-                        return input[0] < input[1];
-                    },
-                    text: 'is less than',
-                    appliesTo: ['number'],
-                    inputCount: 1
-                },
-                textContains: {
-                    operation: function (input) {
-                        return input[0] && input[1] && input[0].includes(input[1]);
-                    },
-                    text: 'text contains',
-                    appliesTo: ['string'],
-                    inputCount: 1
-                },
-                textIsExactly: {
-                    operation: function (input) {
-                        return input[0] === input[1];
-                    },
-                    text: 'text is exactly',
-                    appliesTo: ['string'],
-                    inputCount: 1
-                },
-                isHalfHorse: {
-                    operation: function (input) {
-                        return input[0].type === 'Centaur';
-                    },
-                    text: 'is Half Horse',
-                    appliesTo: ['mythicalCreature'],
-                    inputCount: 0,
-                    getDescription: function () {
-                        return 'is half horse';
-                    }
-                }
-            };
-            evaluator = new ConditionEvaluator(mockCache, mockComposition);
-            testEvaluator = new ConditionEvaluator(mockCache, mockComposition);
-            evaluator.operations = mockOperations;
-        });
+describe('A Summary Widget Rule Evaluator', function () {
+  let evaluator;
+  let testEvaluator;
+  let testOperation;
+  let mockCache;
+  let mockTestCache;
+  let mockComposition;
+  let mockConditions;
+  let mockConditionsEmpty;
+  let mockConditionsUndefined;
+  let mockConditionsAnyTrue;
+  let mockConditionsAllTrue;
+  let mockConditionsAnyFalse;
+  let mockConditionsAllFalse;
+  let mockOperations;
 
-        it('evaluates a condition when it has no configuration', function () {
-            expect(evaluator.execute(mockConditionsEmpty, 'any')).toEqual(false);
-            expect(evaluator.execute(mockConditionsEmpty, 'all')).toEqual(false);
-        });
+  beforeEach(function () {
+    mockCache = {
+      a: {
+        alpha: 3,
+        beta: 9,
+        gamma: 'Testing 1 2 3'
+      },
+      b: {
+        alpha: 44,
+        beta: 23,
+        gamma: 'Hello World'
+      },
+      c: {
+        foo: 'bar',
+        iAm: 'The Walrus',
+        creature: {
+          type: 'Centaur'
+        }
+      }
+    };
+    mockTestCache = {
+      a: {
+        alpha: 1,
+        beta: 1,
+        gamma: 'Testing 4 5 6'
+      },
+      b: {
+        alpha: 2,
+        beta: 2,
+        gamma: 'Goodbye world'
+      }
+    };
+    mockComposition = {
+      a: {},
+      b: {},
+      c: {}
+    };
+    mockConditions = [
+      {
+        object: 'a',
+        key: 'alpha',
+        operation: 'greaterThan',
+        values: [2]
+      },
+      {
+        object: 'b',
+        key: 'gamma',
+        operation: 'lessThan',
+        values: [5]
+      }
+    ];
+    mockConditionsEmpty = [
+      {
+        object: '',
+        key: '',
+        operation: '',
+        values: []
+      }
+    ];
+    mockConditionsUndefined = [
+      {
+        object: 'No Such Object',
+        key: '',
+        operation: '',
+        values: []
+      },
+      {
+        object: 'a',
+        key: 'No Such Key',
+        operation: '',
+        values: []
+      },
+      {
+        object: 'a',
+        key: 'alpha',
+        operation: 'No Such Operation',
+        values: []
+      },
+      {
+        object: 'all',
+        key: 'Nonexistent Field',
+        operation: 'Random Operation',
+        values: []
+      },
+      {
+        object: 'any',
+        key: 'Nonexistent Field',
+        operation: 'Whatever Operation',
+        values: []
+      }
+    ];
+    mockConditionsAnyTrue = [
+      {
+        object: 'any',
+        key: 'alpha',
+        operation: 'greaterThan',
+        values: [5]
+      }
+    ];
+    mockConditionsAnyFalse = [
+      {
+        object: 'any',
+        key: 'alpha',
+        operation: 'greaterThan',
+        values: [1000]
+      }
+    ];
+    mockConditionsAllFalse = [
+      {
+        object: 'all',
+        key: 'alpha',
+        operation: 'greaterThan',
+        values: [5]
+      }
+    ];
+    mockConditionsAllTrue = [
+      {
+        object: 'all',
+        key: 'alpha',
+        operation: 'greaterThan',
+        values: [0]
+      }
+    ];
+    mockOperations = {
+      greaterThan: {
+        operation: function (input) {
+          return input[0] > input[1];
+        },
+        text: 'is greater than',
+        appliesTo: ['number'],
+        inputCount: 1,
+        getDescription: function (values) {
+          return ' > ' + values[0];
+        }
+      },
+      lessThan: {
+        operation: function (input) {
+          return input[0] < input[1];
+        },
+        text: 'is less than',
+        appliesTo: ['number'],
+        inputCount: 1
+      },
+      textContains: {
+        operation: function (input) {
+          return input[0] && input[1] && input[0].includes(input[1]);
+        },
+        text: 'text contains',
+        appliesTo: ['string'],
+        inputCount: 1
+      },
+      textIsExactly: {
+        operation: function (input) {
+          return input[0] === input[1];
+        },
+        text: 'text is exactly',
+        appliesTo: ['string'],
+        inputCount: 1
+      },
+      isHalfHorse: {
+        operation: function (input) {
+          return input[0].type === 'Centaur';
+        },
+        text: 'is Half Horse',
+        appliesTo: ['mythicalCreature'],
+        inputCount: 0,
+        getDescription: function () {
+          return 'is half horse';
+        }
+      }
+    };
+    evaluator = new ConditionEvaluator(mockCache, mockComposition);
+    testEvaluator = new ConditionEvaluator(mockCache, mockComposition);
+    evaluator.operations = mockOperations;
+  });
 
-        it('correctly evaluates a set of conditions', function () {
-            expect(evaluator.execute(mockConditions, 'any')).toEqual(true);
-            expect(evaluator.execute(mockConditions, 'all')).toEqual(false);
-        });
+  it('evaluates a condition when it has no configuration', function () {
+    expect(evaluator.execute(mockConditionsEmpty, 'any')).toEqual(false);
+    expect(evaluator.execute(mockConditionsEmpty, 'all')).toEqual(false);
+  });
 
-        it('correctly evaluates conditions involving "any telemetry"', function () {
-            expect(evaluator.execute(mockConditionsAnyTrue, 'any')).toEqual(true);
-            expect(evaluator.execute(mockConditionsAnyFalse, 'any')).toEqual(false);
-        });
+  it('correctly evaluates a set of conditions', function () {
+    expect(evaluator.execute(mockConditions, 'any')).toEqual(true);
+    expect(evaluator.execute(mockConditions, 'all')).toEqual(false);
+  });
 
-        it('correctly evaluates conditions involving "all telemetry"', function () {
-            expect(evaluator.execute(mockConditionsAllTrue, 'any')).toEqual(true);
-            expect(evaluator.execute(mockConditionsAllFalse, 'any')).toEqual(false);
-        });
+  it('correctly evaluates conditions involving "any telemetry"', function () {
+    expect(evaluator.execute(mockConditionsAnyTrue, 'any')).toEqual(true);
+    expect(evaluator.execute(mockConditionsAnyFalse, 'any')).toEqual(false);
+  });
 
-        it('handles malformed conditions gracefully', function () {
-            //if no conditions are fully defined, should return false for any mode
-            expect(evaluator.execute(mockConditionsUndefined, 'any')).toEqual(false);
-            expect(evaluator.execute(mockConditionsUndefined, 'all')).toEqual(false);
-            //these conditions are true: evaluator should ignore undefined conditions,
-            //and evaluate the rule as true
-            mockConditionsUndefined.push({
-                object: 'a',
-                key: 'gamma',
-                operation: 'textContains',
-                values: ['Testing']
-            });
-            expect(evaluator.execute(mockConditionsUndefined, 'any')).toEqual(true);
-            mockConditionsUndefined.push({
-                object: 'c',
-                key: 'iAm',
-                operation: 'textContains',
-                values: ['Walrus']
-            });
-            expect(evaluator.execute(mockConditionsUndefined, 'all')).toEqual(true);
-        });
+  it('correctly evaluates conditions involving "all telemetry"', function () {
+    expect(evaluator.execute(mockConditionsAllTrue, 'any')).toEqual(true);
+    expect(evaluator.execute(mockConditionsAllFalse, 'any')).toEqual(false);
+  });
 
-        it('gets the keys for possible operations', function () {
-            expect(evaluator.getOperationKeys()).toEqual(
-                ['greaterThan', 'lessThan', 'textContains', 'textIsExactly', 'isHalfHorse']
-            );
-        });
+  it('handles malformed conditions gracefully', function () {
+    //if no conditions are fully defined, should return false for any mode
+    expect(evaluator.execute(mockConditionsUndefined, 'any')).toEqual(false);
+    expect(evaluator.execute(mockConditionsUndefined, 'all')).toEqual(false);
+    //these conditions are true: evaluator should ignore undefined conditions,
+    //and evaluate the rule as true
+    mockConditionsUndefined.push({
+      object: 'a',
+      key: 'gamma',
+      operation: 'textContains',
+      values: ['Testing']
+    });
+    expect(evaluator.execute(mockConditionsUndefined, 'any')).toEqual(true);
+    mockConditionsUndefined.push({
+      object: 'c',
+      key: 'iAm',
+      operation: 'textContains',
+      values: ['Walrus']
+    });
+    expect(evaluator.execute(mockConditionsUndefined, 'all')).toEqual(true);
+  });
 
-        it('gets output text for a given operation', function () {
-            expect(evaluator.getOperationText('isHalfHorse')).toEqual('is Half Horse');
-        });
+  it('gets the keys for possible operations', function () {
+    expect(evaluator.getOperationKeys()).toEqual([
+      'greaterThan',
+      'lessThan',
+      'textContains',
+      'textIsExactly',
+      'isHalfHorse'
+    ]);
+  });
 
-        it('correctly returns whether an operation applies to a given type', function () {
-            expect(evaluator.operationAppliesTo('isHalfHorse', 'mythicalCreature')).toEqual(true);
-            expect(evaluator.operationAppliesTo('isHalfHorse', 'spaceJunk')).toEqual(false);
-        });
+  it('gets output text for a given operation', function () {
+    expect(evaluator.getOperationText('isHalfHorse')).toEqual('is Half Horse');
+  });
 
-        it('returns the HTML input type associated with a given data type', function () {
-            expect(evaluator.getInputTypeById('string')).toEqual('text');
-        });
+  it('correctly returns whether an operation applies to a given type', function () {
+    expect(evaluator.operationAppliesTo('isHalfHorse', 'mythicalCreature')).toEqual(true);
+    expect(evaluator.operationAppliesTo('isHalfHorse', 'spaceJunk')).toEqual(false);
+  });
 
-        it('gets the number of inputs required for a given operation', function () {
-            expect(evaluator.getInputCount('isHalfHorse')).toEqual(0);
-            expect(evaluator.getInputCount('greaterThan')).toEqual(1);
-        });
+  it('returns the HTML input type associated with a given data type', function () {
+    expect(evaluator.getInputTypeById('string')).toEqual('text');
+  });
 
-        it('gets a human-readable description of a condition', function () {
-            expect(evaluator.getOperationDescription('isHalfHorse')).toEqual('is half horse');
-            expect(evaluator.getOperationDescription('greaterThan', [1])).toEqual(' > 1');
-        });
+  it('gets the number of inputs required for a given operation', function () {
+    expect(evaluator.getInputCount('isHalfHorse')).toEqual(0);
+    expect(evaluator.getInputCount('greaterThan')).toEqual(1);
+  });
 
-        it('allows setting a substitute cache for testing purposes, and toggling its use', function () {
-            evaluator.setTestDataCache(mockTestCache);
-            evaluator.useTestData(true);
-            expect(evaluator.execute(mockConditions, 'any')).toEqual(false);
-            expect(evaluator.execute(mockConditions, 'all')).toEqual(false);
-            mockConditions.push({
-                object: 'a',
-                key: 'gamma',
-                operation: 'textContains',
-                values: ['4 5 6']
-            });
-            expect(evaluator.execute(mockConditions, 'any')).toEqual(true);
-            expect(evaluator.execute(mockConditions, 'all')).toEqual(false);
-            mockConditions.pop();
-            evaluator.useTestData(false);
-            expect(evaluator.execute(mockConditions, 'any')).toEqual(true);
-            expect(evaluator.execute(mockConditions, 'all')).toEqual(false);
-        });
+  it('gets a human-readable description of a condition', function () {
+    expect(evaluator.getOperationDescription('isHalfHorse')).toEqual('is half horse');
+    expect(evaluator.getOperationDescription('greaterThan', [1])).toEqual(' > 1');
+  });
+
+  it('allows setting a substitute cache for testing purposes, and toggling its use', function () {
+    evaluator.setTestDataCache(mockTestCache);
+    evaluator.useTestData(true);
+    expect(evaluator.execute(mockConditions, 'any')).toEqual(false);
+    expect(evaluator.execute(mockConditions, 'all')).toEqual(false);
+    mockConditions.push({
+      object: 'a',
+      key: 'gamma',
+      operation: 'textContains',
+      values: ['4 5 6']
+    });
+    expect(evaluator.execute(mockConditions, 'any')).toEqual(true);
+    expect(evaluator.execute(mockConditions, 'all')).toEqual(false);
+    mockConditions.pop();
+    evaluator.useTestData(false);
+    expect(evaluator.execute(mockConditions, 'any')).toEqual(true);
+    expect(evaluator.execute(mockConditions, 'all')).toEqual(false);
+  });
 
-        it('supports all required operations', function () {
-            //equal to
-            testOperation = testEvaluator.operations.equalTo.operation;
-            expect(testOperation([33, 33])).toEqual(true);
-            expect(testOperation([55, 147])).toEqual(false);
-            //not equal to
-            testOperation = testEvaluator.operations.notEqualTo.operation;
-            expect(testOperation([33, 33])).toEqual(false);
-            expect(testOperation([55, 147])).toEqual(true);
-            //greater than
-            testOperation = testEvaluator.operations.greaterThan.operation;
-            expect(testOperation([100, 33])).toEqual(true);
-            expect(testOperation([33, 33])).toEqual(false);
-            expect(testOperation([55, 147])).toEqual(false);
-            //less than
-            testOperation = testEvaluator.operations.lessThan.operation;
-            expect(testOperation([100, 33])).toEqual(false);
-            expect(testOperation([33, 33])).toEqual(false);
-            expect(testOperation([55, 147])).toEqual(true);
-            //greater than or equal to
-            testOperation = testEvaluator.operations.greaterThanOrEq.operation;
-            expect(testOperation([100, 33])).toEqual(true);
-            expect(testOperation([33, 33])).toEqual(true);
-            expect(testOperation([55, 147])).toEqual(false);
-            //less than or equal to
-            testOperation = testEvaluator.operations.lessThanOrEq.operation;
-            expect(testOperation([100, 33])).toEqual(false);
-            expect(testOperation([33, 33])).toEqual(true);
-            expect(testOperation([55, 147])).toEqual(true);
-            //between
-            testOperation = testEvaluator.operations.between.operation;
-            expect(testOperation([100, 33, 66])).toEqual(false);
-            expect(testOperation([1, 33, 66])).toEqual(false);
-            expect(testOperation([45, 33, 66])).toEqual(true);
-            //not between
-            testOperation = testEvaluator.operations.notBetween.operation;
-            expect(testOperation([100, 33, 66])).toEqual(true);
-            expect(testOperation([1, 33, 66])).toEqual(true);
-            expect(testOperation([45, 33, 66])).toEqual(false);
-            //text contains
-            testOperation = testEvaluator.operations.textContains.operation;
-            expect(testOperation(['Testing', 'tin'])).toEqual(true);
-            expect(testOperation(['Testing', 'bind'])).toEqual(false);
-            //text does not contain
-            testOperation = testEvaluator.operations.textDoesNotContain.operation;
-            expect(testOperation(['Testing', 'tin'])).toEqual(false);
-            expect(testOperation(['Testing', 'bind'])).toEqual(true);
-            //text starts with
-            testOperation = testEvaluator.operations.textStartsWith.operation;
-            expect(testOperation(['Testing', 'Tes'])).toEqual(true);
-            expect(testOperation(['Testing', 'ting'])).toEqual(false);
-            //text ends with
-            testOperation = testEvaluator.operations.textEndsWith.operation;
-            expect(testOperation(['Testing', 'Tes'])).toEqual(false);
-            expect(testOperation(['Testing', 'ting'])).toEqual(true);
-            //text is exactly
-            testOperation = testEvaluator.operations.textIsExactly.operation;
-            expect(testOperation(['Testing', 'Testing'])).toEqual(true);
-            expect(testOperation(['Testing', 'Test'])).toEqual(false);
-            //undefined
-            testOperation = testEvaluator.operations.isUndefined.operation;
-            expect(testOperation([1])).toEqual(false);
-            expect(testOperation([])).toEqual(true);
-            //isDefined
-            testOperation = testEvaluator.operations.isDefined.operation;
-            expect(testOperation([1])).toEqual(true);
-            expect(testOperation([])).toEqual(false);
-        });
+  it('supports all required operations', function () {
+    //equal to
+    testOperation = testEvaluator.operations.equalTo.operation;
+    expect(testOperation([33, 33])).toEqual(true);
+    expect(testOperation([55, 147])).toEqual(false);
+    //not equal to
+    testOperation = testEvaluator.operations.notEqualTo.operation;
+    expect(testOperation([33, 33])).toEqual(false);
+    expect(testOperation([55, 147])).toEqual(true);
+    //greater than
+    testOperation = testEvaluator.operations.greaterThan.operation;
+    expect(testOperation([100, 33])).toEqual(true);
+    expect(testOperation([33, 33])).toEqual(false);
+    expect(testOperation([55, 147])).toEqual(false);
+    //less than
+    testOperation = testEvaluator.operations.lessThan.operation;
+    expect(testOperation([100, 33])).toEqual(false);
+    expect(testOperation([33, 33])).toEqual(false);
+    expect(testOperation([55, 147])).toEqual(true);
+    //greater than or equal to
+    testOperation = testEvaluator.operations.greaterThanOrEq.operation;
+    expect(testOperation([100, 33])).toEqual(true);
+    expect(testOperation([33, 33])).toEqual(true);
+    expect(testOperation([55, 147])).toEqual(false);
+    //less than or equal to
+    testOperation = testEvaluator.operations.lessThanOrEq.operation;
+    expect(testOperation([100, 33])).toEqual(false);
+    expect(testOperation([33, 33])).toEqual(true);
+    expect(testOperation([55, 147])).toEqual(true);
+    //between
+    testOperation = testEvaluator.operations.between.operation;
+    expect(testOperation([100, 33, 66])).toEqual(false);
+    expect(testOperation([1, 33, 66])).toEqual(false);
+    expect(testOperation([45, 33, 66])).toEqual(true);
+    //not between
+    testOperation = testEvaluator.operations.notBetween.operation;
+    expect(testOperation([100, 33, 66])).toEqual(true);
+    expect(testOperation([1, 33, 66])).toEqual(true);
+    expect(testOperation([45, 33, 66])).toEqual(false);
+    //text contains
+    testOperation = testEvaluator.operations.textContains.operation;
+    expect(testOperation(['Testing', 'tin'])).toEqual(true);
+    expect(testOperation(['Testing', 'bind'])).toEqual(false);
+    //text does not contain
+    testOperation = testEvaluator.operations.textDoesNotContain.operation;
+    expect(testOperation(['Testing', 'tin'])).toEqual(false);
+    expect(testOperation(['Testing', 'bind'])).toEqual(true);
+    //text starts with
+    testOperation = testEvaluator.operations.textStartsWith.operation;
+    expect(testOperation(['Testing', 'Tes'])).toEqual(true);
+    expect(testOperation(['Testing', 'ting'])).toEqual(false);
+    //text ends with
+    testOperation = testEvaluator.operations.textEndsWith.operation;
+    expect(testOperation(['Testing', 'Tes'])).toEqual(false);
+    expect(testOperation(['Testing', 'ting'])).toEqual(true);
+    //text is exactly
+    testOperation = testEvaluator.operations.textIsExactly.operation;
+    expect(testOperation(['Testing', 'Testing'])).toEqual(true);
+    expect(testOperation(['Testing', 'Test'])).toEqual(false);
+    //undefined
+    testOperation = testEvaluator.operations.isUndefined.operation;
+    expect(testOperation([1])).toEqual(false);
+    expect(testOperation([])).toEqual(true);
+    //isDefined
+    testOperation = testEvaluator.operations.isDefined.operation;
+    expect(testOperation([1])).toEqual(true);
+    expect(testOperation([])).toEqual(false);
+  });
 
-        it('can produce a description for all supported operations', function () {
-            testEvaluator.getOperationKeys().forEach(function (key) {
-                expect(testEvaluator.getOperationDescription(key, [])).toBeDefined();
-            });
-        });
+  it('can produce a description for all supported operations', function () {
+    testEvaluator.getOperationKeys().forEach(function (key) {
+      expect(testEvaluator.getOperationDescription(key, [])).toBeDefined();
     });
+  });
 });
diff --git a/src/plugins/summaryWidget/test/ConditionManagerSpec.js b/src/plugins/summaryWidget/test/ConditionManagerSpec.js
index b992e22c120..cafc616b260 100644
--- a/src/plugins/summaryWidget/test/ConditionManagerSpec.js
+++ b/src/plugins/summaryWidget/test/ConditionManagerSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,413 +20,419 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(['../src/ConditionManager'], function (ConditionManager) {
-    xdescribe('A Summary Widget Condition Manager', function () {
-        let conditionManager;
-        let mockDomainObject;
-        let mockCompObject1;
-        let mockCompObject2;
-        let mockCompObject3;
-        let mockMetadata;
-        let mockTelemetryCallbacks;
-        let mockEventCallbacks;
-        let unsubscribeSpies;
-        let unregisterSpies;
-        let mockMetadataManagers;
-        let mockComposition;
-        let mockOpenMCT;
-        let mockTelemetryAPI;
-        let addCallbackSpy;
-        let loadCallbackSpy;
-        let removeCallbackSpy;
-        let telemetryCallbackSpy;
-        let metadataCallbackSpy;
-        let telemetryRequests;
-        let mockTelemetryValues;
-        let mockTelemetryValues2;
-        let mockConditionEvaluator;
+import ConditionManager from '../src/ConditionManager.js';
 
-        beforeEach(function () {
-            mockDomainObject = {
-                identifier: {
-                    key: 'testKey'
-                },
-                name: 'Test Object',
-                composition: [{
-                    mockCompObject1: {
-                        key: 'mockCompObject1'
-                    },
-                    mockCompObject2: {
-                        key: 'mockCompObject2'
-                    }
-                }],
-                configuration: {}
-            };
-            mockCompObject1 = {
-                identifier: {
-                    key: 'mockCompObject1'
-                },
-                name: 'Object 1'
-            };
-            mockCompObject2 = {
-                identifier: {
-                    key: 'mockCompObject2'
-                },
-                name: 'Object 2'
-            };
-            mockCompObject3 = {
-                identifier: {
-                    key: 'mockCompObject3'
-                },
-                name: 'Object 3'
-            };
-            mockMetadata = {
-                mockCompObject1: {
-                    property1: {
-                        key: 'property1',
-                        name: 'Property 1',
-                        format: 'string',
-                        hints: {}
-                    },
-                    property2: {
-                        key: 'property2',
-                        name: 'Property 2',
-                        hints: {
-                            domain: 1
-                        }
-                    }
-                },
-                mockCompObject2: {
-                    property3: {
-                        key: 'property3',
-                        name: 'Property 3',
-                        format: 'string',
-                        hints: {}
-                    },
-                    property4: {
-                        key: 'property4',
-                        name: 'Property 4',
-                        hints: {
-                            range: 1
-                        }
-                    }
-                },
-                mockCompObject3: {
-                    property1: {
-                        key: 'property1',
-                        name: 'Property 1',
-                        hints: {}
-                    },
-                    property2: {
-                        key: 'property2',
-                        name: 'Property 2',
-                        hints: {}
-                    }
-                }
-            };
-            mockTelemetryCallbacks = {};
-            mockEventCallbacks = {};
-            unsubscribeSpies = jasmine.createSpyObj('mockUnsubscribeFunction', [
-                'mockCompObject1',
-                'mockCompObject2',
-                'mockCompObject3'
-            ]);
-            unregisterSpies = jasmine.createSpyObj('mockUnregisterFunctions', [
-                'load',
-                'remove',
-                'add'
-            ]);
-            mockTelemetryValues = {
-                mockCompObject1: {
-                    property1: 'Its a string',
-                    property2: 42
-                },
-                mockCompObject2: {
-                    property3: 'Execute order:',
-                    property4: 66
-                },
-                mockCompObject3: {
-                    property1: 'Testing 1 2 3',
-                    property2: 9000
-                }
-            };
-            mockTelemetryValues2 = {
-                mockCompObject1: {
-                    property1: 'Its a different string',
-                    property2: 44
-                },
-                mockCompObject2: {
-                    property3: 'Execute catch:',
-                    property4: 22
-                },
-                mockCompObject3: {
-                    property1: 'Walrus',
-                    property2: 22
-                }
-            };
-            mockMetadataManagers = {
-                mockCompObject1: {
-                    values: jasmine.createSpy('metadataManager').and.returnValue(
-                        Object.values(mockMetadata.mockCompObject1)
-                    )
-                },
-                mockCompObject2: {
-                    values: jasmine.createSpy('metadataManager').and.returnValue(
-                        Object.values(mockMetadata.mockCompObject2)
-                    )
-                },
-                mockCompObject3: {
-                    values: jasmine.createSpy('metadataManager').and.returnValue(
-                        Object.values(mockMetadata.mockCompObject2)
-                    )
-                }
-            };
+describe('A Summary Widget Condition Manager', function () {
+  let conditionManager;
+  let mockDomainObject;
+  let mockCompObject1;
+  let mockCompObject2;
+  let mockCompObject3;
+  let mockMetadata;
+  let mockTelemetryCallbacks;
+  let mockEventCallbacks;
+  let unsubscribeSpies;
+  let unregisterSpies;
+  let mockMetadataManagers;
+  let mockComposition;
+  let mockOpenMCT;
+  let mockTelemetryAPI;
+  let addCallbackSpy;
+  let loadCallbackSpy;
+  let removeCallbackSpy;
+  let telemetryCallbackSpy;
+  let metadataCallbackSpy;
+  let telemetryRequests;
+  let mockTelemetryValues;
+  let mockTelemetryValues2;
+  let mockConditionEvaluator;
 
-            mockComposition = jasmine.createSpyObj('composition', [
-                'on',
-                'off',
-                'load',
-                'triggerCallback'
-            ]);
-            mockComposition.on.and.callFake(function (event, callback, context) {
-                mockEventCallbacks[event] = callback.bind(context);
-            });
-            mockComposition.off.and.callFake(function (event) {
-                unregisterSpies[event]();
-            });
-            mockComposition.load.and.callFake(function () {
-                mockComposition.triggerCallback('add', mockCompObject1);
-                mockComposition.triggerCallback('add', mockCompObject2);
-                mockComposition.triggerCallback('load');
-            });
-            mockComposition.triggerCallback.and.callFake(function (event, obj) {
-                if (event === 'add') {
-                    mockEventCallbacks.add(obj);
-                } else if (event === 'remove') {
-                    mockEventCallbacks.remove(obj.identifier);
-                } else {
-                    mockEventCallbacks[event]();
-                }
-            });
-            telemetryRequests = [];
-            mockTelemetryAPI = jasmine.createSpyObj('telemetryAPI', [
-                'request',
-                'isTelemetryObject',
-                'getMetadata',
-                'subscribe',
-                'triggerTelemetryCallback'
-            ]);
-            mockTelemetryAPI.request.and.callFake(function (obj) {
-                const req = {
-                    object: obj
-                };
-                req.promise = new Promise(function (resolve, reject) {
-                    req.resolve = resolve;
-                    req.reject = reject;
-                });
-                telemetryRequests.push(req);
+  beforeEach(function () {
+    mockDomainObject = {
+      identifier: {
+        key: 'testKey'
+      },
+      name: 'Test Object',
+      composition: [
+        {
+          mockCompObject1: {
+            key: 'mockCompObject1'
+          },
+          mockCompObject2: {
+            key: 'mockCompObject2'
+          }
+        }
+      ],
+      configuration: {}
+    };
+    mockCompObject1 = {
+      identifier: {
+        key: 'mockCompObject1'
+      },
+      name: 'Object 1'
+    };
+    mockCompObject2 = {
+      identifier: {
+        key: 'mockCompObject2'
+      },
+      name: 'Object 2'
+    };
+    mockCompObject3 = {
+      identifier: {
+        key: 'mockCompObject3'
+      },
+      name: 'Object 3'
+    };
+    mockMetadata = {
+      mockCompObject1: {
+        property1: {
+          key: 'property1',
+          name: 'Property 1',
+          format: 'string',
+          hints: {}
+        },
+        property2: {
+          key: 'property2',
+          name: 'Property 2',
+          hints: {
+            domain: 1
+          }
+        }
+      },
+      mockCompObject2: {
+        property3: {
+          key: 'property3',
+          name: 'Property 3',
+          format: 'string',
+          hints: {}
+        },
+        property4: {
+          key: 'property4',
+          name: 'Property 4',
+          hints: {
+            range: 1
+          }
+        }
+      },
+      mockCompObject3: {
+        property1: {
+          key: 'property1',
+          name: 'Property 1',
+          hints: {}
+        },
+        property2: {
+          key: 'property2',
+          name: 'Property 2',
+          hints: {}
+        }
+      }
+    };
+    mockTelemetryCallbacks = {};
+    mockEventCallbacks = {};
+    unsubscribeSpies = jasmine.createSpyObj('mockUnsubscribeFunction', [
+      'mockCompObject1',
+      'mockCompObject2',
+      'mockCompObject3'
+    ]);
+    unregisterSpies = jasmine.createSpyObj('mockUnregisterFunctions', ['load', 'remove', 'add']);
+    mockTelemetryValues = {
+      mockCompObject1: {
+        property1: 'Its a string',
+        property2: 42
+      },
+      mockCompObject2: {
+        property3: 'Execute order:',
+        property4: 66
+      },
+      mockCompObject3: {
+        property1: 'Testing 1 2 3',
+        property2: 9000
+      }
+    };
+    mockTelemetryValues2 = {
+      mockCompObject1: {
+        property1: 'Its a different string',
+        property2: 44
+      },
+      mockCompObject2: {
+        property3: 'Execute catch:',
+        property4: 22
+      },
+      mockCompObject3: {
+        property1: 'Walrus',
+        property2: 22
+      }
+    };
+    mockMetadataManagers = {
+      mockCompObject1: {
+        values: jasmine
+          .createSpy('metadataManager')
+          .and.returnValue(Object.values(mockMetadata.mockCompObject1))
+      },
+      mockCompObject2: {
+        values: jasmine
+          .createSpy('metadataManager')
+          .and.returnValue(Object.values(mockMetadata.mockCompObject2))
+      },
+      mockCompObject3: {
+        values: jasmine
+          .createSpy('metadataManager')
+          .and.returnValue(Object.values(mockMetadata.mockCompObject2))
+      }
+    };
 
-                return req.promise;
-            });
-            mockTelemetryAPI.isTelemetryObject.and.returnValue(true);
-            mockTelemetryAPI.getMetadata.and.callFake(function (obj) {
-                return mockMetadataManagers[obj.identifier.key];
-            });
-            mockTelemetryAPI.subscribe.and.callFake(function (obj, callback) {
-                mockTelemetryCallbacks[obj.identifier.key] = callback;
+    mockComposition = jasmine.createSpyObj('composition', ['on', 'off', 'load', 'triggerCallback']);
+    mockComposition.on.and.callFake(function (event, callback, context) {
+      mockEventCallbacks[event] = callback.bind(context);
+    });
+    mockComposition.off.and.callFake(function (event) {
+      unregisterSpies[event]();
+    });
+    mockComposition.load.and.callFake(function () {
+      mockComposition.triggerCallback('add', mockCompObject1);
+      mockComposition.triggerCallback('add', mockCompObject2);
+      mockComposition.triggerCallback('load');
+    });
+    mockComposition.triggerCallback.and.callFake(function (event, obj) {
+      if (event === 'add') {
+        mockEventCallbacks.add(obj);
+      } else if (event === 'remove') {
+        mockEventCallbacks.remove(obj.identifier);
+      } else {
+        mockEventCallbacks[event]();
+      }
+    });
+    telemetryRequests = [];
+    mockTelemetryAPI = jasmine.createSpyObj('telemetryAPI', [
+      'request',
+      'isTelemetryObject',
+      'getMetadata',
+      'subscribe',
+      'triggerTelemetryCallback'
+    ]);
+    mockTelemetryAPI.request.and.callFake(function (obj) {
+      const req = {
+        object: obj
+      };
+      req.promise = new Promise(function (resolve, reject) {
+        req.resolve = resolve;
+        req.reject = reject;
+      });
+      telemetryRequests.push(req);
 
-                return unsubscribeSpies[obj.identifier.key];
-            });
-            mockTelemetryAPI.triggerTelemetryCallback.and.callFake(function (key) {
-                mockTelemetryCallbacks[key](mockTelemetryValues2[key]);
-            });
+      return req.promise;
+    });
+    mockTelemetryAPI.isTelemetryObject.and.returnValue(true);
+    mockTelemetryAPI.getMetadata.and.callFake(function (obj) {
+      return mockMetadataManagers[obj.identifier.key];
+    });
+    mockTelemetryAPI.subscribe.and.callFake(function (obj, callback) {
+      mockTelemetryCallbacks[obj.identifier.key] = callback;
 
-            mockOpenMCT = {
-                telemetry: mockTelemetryAPI,
-                composition: {}
-            };
-            mockOpenMCT.composition.get = jasmine.createSpy('get').and.returnValue(mockComposition);
+      return unsubscribeSpies[obj.identifier.key];
+    });
+    mockTelemetryAPI.triggerTelemetryCallback.and.callFake(function (key) {
+      mockTelemetryCallbacks[key](mockTelemetryValues2[key]);
+    });
 
-            loadCallbackSpy = jasmine.createSpy('loadCallbackSpy');
-            addCallbackSpy = jasmine.createSpy('addCallbackSpy');
-            removeCallbackSpy = jasmine.createSpy('removeCallbackSpy');
-            metadataCallbackSpy = jasmine.createSpy('metadataCallbackSpy');
-            telemetryCallbackSpy = jasmine.createSpy('telemetryCallbackSpy');
+    mockOpenMCT = {
+      telemetry: mockTelemetryAPI,
+      composition: {}
+    };
+    mockOpenMCT.composition.get = jasmine.createSpy('get').and.returnValue(mockComposition);
 
-            conditionManager = new ConditionManager(mockDomainObject, mockOpenMCT);
-            conditionManager.on('load', loadCallbackSpy);
-            conditionManager.on('add', addCallbackSpy);
-            conditionManager.on('remove', removeCallbackSpy);
-            conditionManager.on('metadata', metadataCallbackSpy);
-            conditionManager.on('receiveTelemetry', telemetryCallbackSpy);
+    loadCallbackSpy = jasmine.createSpy('loadCallbackSpy');
+    addCallbackSpy = jasmine.createSpy('addCallbackSpy');
+    removeCallbackSpy = jasmine.createSpy('removeCallbackSpy');
+    metadataCallbackSpy = jasmine.createSpy('metadataCallbackSpy');
+    telemetryCallbackSpy = jasmine.createSpy('telemetryCallbackSpy');
 
-            mockConditionEvaluator = jasmine.createSpy('mockConditionEvaluator');
-            mockConditionEvaluator.execute = jasmine.createSpy('execute');
-            conditionManager.evaluator = mockConditionEvaluator;
-        });
+    conditionManager = new ConditionManager(mockDomainObject, mockOpenMCT);
+    conditionManager.on('load', loadCallbackSpy);
+    conditionManager.on('add', addCallbackSpy);
+    conditionManager.on('remove', removeCallbackSpy);
+    conditionManager.on('metadata', metadataCallbackSpy);
+    conditionManager.on('receiveTelemetry', telemetryCallbackSpy);
 
-        it('loads the initial composition and invokes the appropriate handlers', function () {
-            mockComposition.triggerCallback('load');
-            expect(conditionManager.getComposition()).toEqual({
-                mockCompObject1: mockCompObject1,
-                mockCompObject2: mockCompObject2
-            });
-            expect(loadCallbackSpy).toHaveBeenCalled();
-            expect(conditionManager.loadCompleted()).toEqual(true);
-        });
+    mockConditionEvaluator = jasmine.createSpy('mockConditionEvaluator');
+    mockConditionEvaluator.execute = jasmine.createSpy('execute');
+    conditionManager.evaluator = mockConditionEvaluator;
+  });
 
-        it('loads metadata from composition and gets it upon request', function () {
-            expect(conditionManager.getTelemetryMetadata('mockCompObject1'))
-                .toEqual(mockMetadata.mockCompObject1);
-            expect(conditionManager.getTelemetryMetadata('mockCompObject2'))
-                .toEqual(mockMetadata.mockCompObject2);
-        });
+  it('loads the initial composition and invokes the appropriate handlers', function () {
+    mockComposition.triggerCallback('load');
+    expect(conditionManager.getComposition()).toEqual({
+      mockCompObject1: mockCompObject1,
+      mockCompObject2: mockCompObject2
+    });
+    expect(loadCallbackSpy).toHaveBeenCalled();
+    expect(conditionManager.loadCompleted()).toEqual(true);
+  });
 
-        it('maintains lists of global metadata, and does not duplicate repeated fields', function () {
-            const allKeys = {
-                property1: {
-                    key: 'property1',
-                    name: 'Property 1',
-                    format: 'string',
-                    hints: {}
-                },
-                property2: {
-                    key: 'property2',
-                    name: 'Property 2',
-                    hints: {
-                        domain: 1
-                    }
-                },
-                property3: {
-                    key: 'property3',
-                    name: 'Property 3',
-                    format: 'string',
-                    hints: {}
-                },
-                property4: {
-                    key: 'property4',
-                    name: 'Property 4',
-                    hints: {
-                        range: 1
-                    }
-                }
-            };
-            expect(conditionManager.getTelemetryMetadata('all')).toEqual(allKeys);
-            expect(conditionManager.getTelemetryMetadata('any')).toEqual(allKeys);
-            mockComposition.triggerCallback('add', mockCompObject3);
-            expect(conditionManager.getTelemetryMetadata('all')).toEqual(allKeys);
-            expect(conditionManager.getTelemetryMetadata('any')).toEqual(allKeys);
-        });
+  it('loads metadata from composition and gets it upon request', function () {
+    expect(conditionManager.getTelemetryMetadata('mockCompObject1')).toEqual(
+      mockMetadata.mockCompObject1
+    );
+    expect(conditionManager.getTelemetryMetadata('mockCompObject2')).toEqual(
+      mockMetadata.mockCompObject2
+    );
+  });
 
-        it('loads and gets telemetry property types', function () {
-            conditionManager.parseAllPropertyTypes();
-            expect(conditionManager.getTelemetryPropertyType('mockCompObject1', 'property1'))
-                .toEqual('string');
-            expect(conditionManager.getTelemetryPropertyType('mockCompObject2', 'property4'))
-                .toEqual('number');
-            expect(conditionManager.metadataLoadCompleted()).toEqual(true);
-            expect(metadataCallbackSpy).toHaveBeenCalled();
-        });
+  it('maintains lists of global metadata, and does not duplicate repeated fields', function () {
+    const allKeys = {
+      property1: {
+        key: 'property1',
+        name: 'Property 1',
+        format: 'string',
+        hints: {}
+      },
+      property2: {
+        key: 'property2',
+        name: 'Property 2',
+        hints: {
+          domain: 1
+        }
+      },
+      property3: {
+        key: 'property3',
+        name: 'Property 3',
+        format: 'string',
+        hints: {}
+      },
+      property4: {
+        key: 'property4',
+        name: 'Property 4',
+        hints: {
+          range: 1
+        }
+      }
+    };
+    expect(conditionManager.getTelemetryMetadata('all')).toEqual(allKeys);
+    expect(conditionManager.getTelemetryMetadata('any')).toEqual(allKeys);
+    mockComposition.triggerCallback('add', mockCompObject3);
+    expect(conditionManager.getTelemetryMetadata('all')).toEqual(allKeys);
+    expect(conditionManager.getTelemetryMetadata('any')).toEqual(allKeys);
+  });
 
-        it('responds to a composition add event and invokes the appropriate handlers', function () {
-            mockComposition.triggerCallback('add', mockCompObject3);
-            expect(addCallbackSpy).toHaveBeenCalledWith(mockCompObject3);
-            expect(conditionManager.getComposition()).toEqual({
-                mockCompObject1: mockCompObject1,
-                mockCompObject2: mockCompObject2,
-                mockCompObject3: mockCompObject3
-            });
-        });
+  it('loads and gets telemetry property types', function () {
+    conditionManager.parseAllPropertyTypes();
+    expect(conditionManager.getTelemetryPropertyType('mockCompObject1', 'property1')).toEqual(
+      'string'
+    );
+    expect(conditionManager.getTelemetryPropertyType('mockCompObject2', 'property4')).toEqual(
+      'number'
+    );
+    expect(conditionManager.metadataLoadCompleted()).toEqual(true);
+    expect(metadataCallbackSpy).toHaveBeenCalled();
+  });
 
-        it('responds to a composition remove event and invokes the appropriate handlers', function () {
-            mockComposition.triggerCallback('remove', mockCompObject2);
-            expect(removeCallbackSpy).toHaveBeenCalledWith({
-                key: 'mockCompObject2'
-            });
-            expect(unsubscribeSpies.mockCompObject2).toHaveBeenCalled();
-            expect(conditionManager.getComposition()).toEqual({
-                mockCompObject1: mockCompObject1
-            });
-        });
+  it('responds to a composition add event and invokes the appropriate handlers', function () {
+    mockComposition.triggerCallback('add', mockCompObject3);
+    expect(addCallbackSpy).toHaveBeenCalledWith(mockCompObject3);
+    expect(conditionManager.getComposition()).toEqual({
+      mockCompObject1: mockCompObject1,
+      mockCompObject2: mockCompObject2,
+      mockCompObject3: mockCompObject3
+    });
+  });
+
+  it('responds to a composition remove event and invokes the appropriate handlers', function () {
+    mockComposition.triggerCallback('remove', mockCompObject2);
+    expect(removeCallbackSpy).toHaveBeenCalledWith({
+      key: 'mockCompObject2'
+    });
+    expect(unsubscribeSpies.mockCompObject2).toHaveBeenCalled();
+    expect(conditionManager.getComposition()).toEqual({
+      mockCompObject1: mockCompObject1
+    });
+  });
 
-        it('unregisters telemetry subscriptions and composition listeners on destroy', function () {
-            mockComposition.triggerCallback('add', mockCompObject3);
-            conditionManager.destroy();
-            Object.values(unsubscribeSpies).forEach(function (spy) {
-                expect(spy).toHaveBeenCalled();
-            });
-            Object.values(unregisterSpies).forEach(function (spy) {
-                expect(spy).toHaveBeenCalled();
-            });
-        });
+  it('unregisters telemetry subscriptions and composition listeners on destroy', function () {
+    mockComposition.triggerCallback('add', mockCompObject3);
+    conditionManager.destroy();
+    Object.values(unsubscribeSpies).forEach(function (spy) {
+      expect(spy).toHaveBeenCalled();
+    });
+    Object.values(unregisterSpies).forEach(function (spy) {
+      expect(spy).toHaveBeenCalled();
+    });
+  });
 
-        it('populates its LAD cache with historial data on load, if available', function (done) {
-            expect(telemetryRequests.length).toBe(2);
-            expect(telemetryRequests[0].object).toBe(mockCompObject1);
-            expect(telemetryRequests[1].object).toBe(mockCompObject2);
+  xit('populates its LAD cache with historical data on load, if available', function (done) {
+    expect(telemetryRequests.length).toBe(2);
+    expect(telemetryRequests[0].object).toBe(mockCompObject1);
+    expect(telemetryRequests[1].object).toBe(mockCompObject2);
 
-            expect(telemetryCallbackSpy).not.toHaveBeenCalled();
+    expect(telemetryCallbackSpy).not.toHaveBeenCalled();
 
-            telemetryCallbackSpy.and.callFake(function () {
-                if (telemetryCallbackSpy.calls.count() === 2) {
-                    expect(conditionManager.subscriptionCache.mockCompObject1.property1).toEqual('Its a string');
-                    expect(conditionManager.subscriptionCache.mockCompObject2.property4).toEqual(66);
-                    done();
-                }
-            });
+    telemetryCallbackSpy.and.callFake(function () {
+      if (telemetryCallbackSpy.calls.count() === 2) {
+        expect(conditionManager.subscriptionCache.mockCompObject1.property1).toEqual(
+          'Its a string'
+        );
+        expect(conditionManager.subscriptionCache.mockCompObject2.property4).toEqual(66);
+        done();
+      }
+    });
 
-            telemetryRequests[0].resolve([mockTelemetryValues.mockCompObject1]);
-            telemetryRequests[1].resolve([mockTelemetryValues.mockCompObject2]);
-        });
+    telemetryRequests[0].resolve([mockTelemetryValues.mockCompObject1]);
+    telemetryRequests[1].resolve([mockTelemetryValues.mockCompObject2]);
+  });
 
-        it('updates its LAD cache upon recieving telemetry and invokes the appropriate handlers', function () {
-            mockTelemetryAPI.triggerTelemetryCallback('mockCompObject1');
-            expect(conditionManager.subscriptionCache.mockCompObject1.property1).toEqual('Its a different string');
-            mockTelemetryAPI.triggerTelemetryCallback('mockCompObject2');
-            expect(conditionManager.subscriptionCache.mockCompObject2.property4).toEqual(22);
-            expect(telemetryCallbackSpy).toHaveBeenCalled();
-        });
+  xit('updates its LAD cache upon receiving telemetry and invokes the appropriate handlers', function () {
+    mockTelemetryAPI.triggerTelemetryCallback('mockCompObject1');
+    expect(conditionManager.subscriptionCache.mockCompObject1.property1).toEqual(
+      'Its a different string'
+    );
+    mockTelemetryAPI.triggerTelemetryCallback('mockCompObject2');
+    expect(conditionManager.subscriptionCache.mockCompObject2.property4).toEqual(22);
+    expect(telemetryCallbackSpy).toHaveBeenCalled();
+  });
 
-        it('evalutes a set of rules and returns the id of the'
-           + 'last active rule, or the first if no rules are active', function () {
-            const mockRuleOrder = ['default', 'rule0', 'rule1'];
-            const mockRules = {
-                default: {
-                    getProperty: function () {}
-                },
-                rule0: {
-                    getProperty: function () {}
-                },
-                rule1: {
-                    getProperty: function () {}
-                }
-            };
+  it(
+    'evaluates a set of rules and returns the id of the ' +
+      'last active rule, or the first if no rules are active',
+    function () {
+      const mockRuleOrder = ['default', 'rule0', 'rule1'];
+      const mockRules = {
+        default: {
+          getProperty: function () {}
+        },
+        rule0: {
+          getProperty: function () {}
+        },
+        rule1: {
+          getProperty: function () {}
+        }
+      };
 
-            mockConditionEvaluator.execute.and.returnValue(false);
-            expect(conditionManager.executeRules(mockRuleOrder, mockRules)).toEqual('default');
-            mockConditionEvaluator.execute.and.returnValue(true);
-            expect(conditionManager.executeRules(mockRuleOrder, mockRules)).toEqual('rule1');
-        });
+      mockConditionEvaluator.execute.and.returnValue(false);
+      expect(conditionManager.executeRules(mockRuleOrder, mockRules)).toEqual('default');
+      mockConditionEvaluator.execute.and.returnValue(true);
+      expect(conditionManager.executeRules(mockRuleOrder, mockRules)).toEqual('rule1');
+    }
+  );
 
-        it('gets the human-readable name of a composition object', function () {
-            expect(conditionManager.getObjectName('mockCompObject1')).toEqual('Object 1');
-            expect(conditionManager.getObjectName('all')).toEqual('all Telemetry');
-        });
+  it('gets the human-readable name of a composition object', function () {
+    expect(conditionManager.getObjectName('mockCompObject1')).toEqual('Object 1');
+    expect(conditionManager.getObjectName('all')).toEqual('all Telemetry');
+  });
 
-        it('gets the human-readable name of a telemetry field', function () {
-            expect(conditionManager.getTelemetryPropertyName('mockCompObject1', 'property1'))
-                .toEqual('Property 1');
-            expect(conditionManager.getTelemetryPropertyName('mockCompObject2', 'property4'))
-                .toEqual('Property 4');
-        });
+  it('gets the human-readable name of a telemetry field', function () {
+    expect(conditionManager.getTelemetryPropertyName('mockCompObject1', 'property1')).toEqual(
+      'Property 1'
+    );
+    expect(conditionManager.getTelemetryPropertyName('mockCompObject2', 'property4')).toEqual(
+      'Property 4'
+    );
+  });
 
-        it('gets its associated ConditionEvaluator', function () {
-            expect(conditionManager.getEvaluator()).toEqual(mockConditionEvaluator);
-        });
+  it('gets its associated ConditionEvaluator', function () {
+    expect(conditionManager.getEvaluator()).toEqual(mockConditionEvaluator);
+  });
 
-        it('allows forcing a receive telemetry event', function () {
-            conditionManager.triggerTelemetryCallback();
-            expect(telemetryCallbackSpy).toHaveBeenCalled();
-        });
-    });
+  it('allows forcing a receive telemetry event', function () {
+    conditionManager.triggerTelemetryCallback();
+    expect(telemetryCallbackSpy).toHaveBeenCalled();
+  });
 });
diff --git a/src/plugins/summaryWidget/test/ConditionSpec.js b/src/plugins/summaryWidget/test/ConditionSpec.js
index 50683633426..ecbf85f26a6 100644
--- a/src/plugins/summaryWidget/test/ConditionSpec.js
+++ b/src/plugins/summaryWidget/test/ConditionSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,160 +20,186 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(['../src/Condition', 'zepto'], function (Condition, $) {
-    xdescribe('A summary widget condition', function () {
-        let testCondition;
-        let mockConfig;
-        let mockConditionManager;
-        let mockContainer;
-        let mockEvaluator;
-        let changeSpy;
-        let duplicateSpy;
-        let removeSpy;
-        let generateValuesSpy;
-
-        beforeEach(function () {
-            mockContainer = $(document.createElement('div'));
-
-            mockConfig = {
-                object: 'object1',
-                key: 'property1',
-                operation: 'operation1',
-                values: [1, 2, 3]
-            };
-
-            mockEvaluator = {};
-            mockEvaluator.getInputCount = jasmine.createSpy('inputCount');
-            mockEvaluator.getInputType = jasmine.createSpy('inputType');
-
-            mockConditionManager = jasmine.createSpyObj('mockConditionManager', [
-                'on',
-                'getComposition',
-                'loadCompleted',
-                'getEvaluator',
-                'getTelemetryMetadata',
-                'metadataLoadCompleted',
-                'getObjectName',
-                'getTelemetryPropertyName'
-            ]);
-            mockConditionManager.loadCompleted.and.returnValue(false);
-            mockConditionManager.metadataLoadCompleted.and.returnValue(false);
-            mockConditionManager.getEvaluator.and.returnValue(mockEvaluator);
-            mockConditionManager.getComposition.and.returnValue({});
-            mockConditionManager.getTelemetryMetadata.and.returnValue({});
-            mockConditionManager.getObjectName.and.returnValue('Object Name');
-            mockConditionManager.getTelemetryPropertyName.and.returnValue('Property Name');
-
-            duplicateSpy = jasmine.createSpy('duplicate');
-            removeSpy = jasmine.createSpy('remove');
-            changeSpy = jasmine.createSpy('change');
-            generateValuesSpy = jasmine.createSpy('generateValueInputs');
-
-            testCondition = new Condition(mockConfig, 54, mockConditionManager);
-
-            testCondition.on('duplicate', duplicateSpy);
-            testCondition.on('remove', removeSpy);
-            testCondition.on('change', changeSpy);
-        });
-
-        it('exposes a DOM element to represent itself in the view', function () {
-            mockContainer.append(testCondition.getDOM());
-            expect($('.t-condition', mockContainer).get().length).toEqual(1);
-        });
-
-        it('responds to a change in its object select', function () {
-            testCondition.selects.object.setSelected('');
-            expect(changeSpy).toHaveBeenCalledWith({
-                value: '',
-                property: 'object',
-                index: 54
-            });
-        });
-
-        it('responds to a change in its key select', function () {
-            testCondition.selects.key.setSelected('');
-            expect(changeSpy).toHaveBeenCalledWith({
-                value: '',
-                property: 'key',
-                index: 54
-            });
-        });
-
-        it('responds to a change in its operation select', function () {
-            testCondition.generateValueInputs = generateValuesSpy;
-            testCondition.selects.operation.setSelected('');
-            expect(changeSpy).toHaveBeenCalledWith({
-                value: '',
-                property: 'operation',
-                index: 54
-            });
-            expect(generateValuesSpy).toHaveBeenCalledWith('');
-        });
-
-        it('generates value inputs of the appropriate type and quantity', function () {
-            mockContainer.append(testCondition.getDOM());
-            mockEvaluator.getInputType.and.returnValue('number');
-            mockEvaluator.getInputCount.and.returnValue(3);
-            testCondition.generateValueInputs('');
-            expect($('input', mockContainer).filter('[type=number]').get().length).toEqual(3);
-            expect($('input', mockContainer).eq(0).prop('valueAsNumber')).toEqual(1);
-            expect($('input', mockContainer).eq(1).prop('valueAsNumber')).toEqual(2);
-            expect($('input', mockContainer).eq(2).prop('valueAsNumber')).toEqual(3);
-
-            mockEvaluator.getInputType.and.returnValue('text');
-            mockEvaluator.getInputCount.and.returnValue(2);
-            testCondition.config.values = ['Text I Am', 'Text It Is'];
-            testCondition.generateValueInputs('');
-            expect($('input', mockContainer).filter('[type=text]').get().length).toEqual(2);
-            expect($('input', mockContainer).eq(0).prop('value')).toEqual('Text I Am');
-            expect($('input', mockContainer).eq(1).prop('value')).toEqual('Text It Is');
-        });
-
-        it('ensures reasonable defaults on values if none are provided', function () {
-            mockContainer.append(testCondition.getDOM());
-            mockEvaluator.getInputType.and.returnValue('number');
-            mockEvaluator.getInputCount.and.returnValue(3);
-            testCondition.config.values = [];
-            testCondition.generateValueInputs('');
-            expect($('input', mockContainer).eq(0).prop('valueAsNumber')).toEqual(0);
-            expect($('input', mockContainer).eq(1).prop('valueAsNumber')).toEqual(0);
-            expect($('input', mockContainer).eq(2).prop('valueAsNumber')).toEqual(0);
-            expect(testCondition.config.values).toEqual([0, 0, 0]);
-
-            mockEvaluator.getInputType.and.returnValue('text');
-            mockEvaluator.getInputCount.and.returnValue(2);
-            testCondition.config.values = [];
-            testCondition.generateValueInputs('');
-            expect($('input', mockContainer).eq(0).prop('value')).toEqual('');
-            expect($('input', mockContainer).eq(1).prop('value')).toEqual('');
-            expect(testCondition.config.values).toEqual(['', '']);
-        });
-
-        it('responds to a change in its value inputs', function () {
-            mockContainer.append(testCondition.getDOM());
-            mockEvaluator.getInputType.and.returnValue('number');
-            mockEvaluator.getInputCount.and.returnValue(3);
-            testCondition.generateValueInputs('');
-            $('input', mockContainer).eq(1).prop('value', 9001);
-            $('input', mockContainer).eq(1).trigger('input');
-            expect(changeSpy).toHaveBeenCalledWith({
-                value: 9001,
-                property: 'values[1]',
-                index: 54
-            });
-        });
-
-        it('can remove itself from the configuration', function () {
-            testCondition.remove();
-            expect(removeSpy).toHaveBeenCalledWith(54);
-        });
-
-        it('can duplicate itself', function () {
-            testCondition.duplicate();
-            expect(duplicateSpy).toHaveBeenCalledWith({
-                sourceCondition: mockConfig,
-                index: 54
-            });
-        });
+import Condition from '../src/Condition.js';
+
+describe('A summary widget condition', function () {
+  let testCondition;
+  let mockConfig;
+  let mockConditionManager;
+  let mockContainer;
+  let mockEvaluator;
+  let changeSpy;
+  let duplicateSpy;
+  let removeSpy;
+  let generateValuesSpy;
+
+  beforeEach(function () {
+    mockContainer = document.createElement('div');
+
+    mockConfig = {
+      object: 'object1',
+      key: 'property1',
+      operation: 'operation1',
+      values: [1, 2, 3]
+    };
+
+    mockEvaluator = {};
+    mockEvaluator.getInputCount = jasmine.createSpy('inputCount');
+    mockEvaluator.getInputType = jasmine.createSpy('inputType');
+
+    mockConditionManager = jasmine.createSpyObj('mockConditionManager', [
+      'on',
+      'getComposition',
+      'loadCompleted',
+      'getEvaluator',
+      'getTelemetryMetadata',
+      'metadataLoadCompleted',
+      'getObjectName',
+      'getTelemetryPropertyName'
+    ]);
+    mockConditionManager.loadCompleted.and.returnValue(false);
+    mockConditionManager.metadataLoadCompleted.and.returnValue(false);
+    mockConditionManager.getEvaluator.and.returnValue(mockEvaluator);
+    mockConditionManager.getComposition.and.returnValue({});
+    mockConditionManager.getTelemetryMetadata.and.returnValue({});
+    mockConditionManager.getObjectName.and.returnValue('Object Name');
+    mockConditionManager.getTelemetryPropertyName.and.returnValue('Property Name');
+
+    duplicateSpy = jasmine.createSpy('duplicate');
+    removeSpy = jasmine.createSpy('remove');
+    changeSpy = jasmine.createSpy('change');
+    generateValuesSpy = jasmine.createSpy('generateValueInputs');
+
+    testCondition = new Condition(mockConfig, 54, mockConditionManager);
+
+    testCondition.on('duplicate', duplicateSpy);
+    testCondition.on('remove', removeSpy);
+    testCondition.on('change', changeSpy);
+  });
+
+  it('exposes a DOM element to represent itself in the view', function () {
+    mockContainer.append(testCondition.getDOM());
+    expect(mockContainer.querySelectorAll('.t-condition').length).toEqual(1);
+  });
+
+  it('responds to a change in its object select', function () {
+    testCondition.selects.object.setSelected('');
+    expect(changeSpy).toHaveBeenCalledWith({
+      value: '',
+      property: 'object',
+      index: 54
     });
+  });
+
+  it('responds to a change in its key select', function () {
+    testCondition.selects.key.setSelected('');
+    expect(changeSpy).toHaveBeenCalledWith({
+      value: '',
+      property: 'key',
+      index: 54
+    });
+  });
+
+  it('responds to a change in its operation select', function () {
+    testCondition.generateValueInputs = generateValuesSpy;
+    testCondition.selects.operation.setSelected('');
+    expect(changeSpy).toHaveBeenCalledWith({
+      value: '',
+      property: 'operation',
+      index: 54
+    });
+    expect(generateValuesSpy).toHaveBeenCalledWith('');
+  });
+
+  it('generates value inputs of the appropriate type and quantity', function () {
+    let inputs;
+
+    mockContainer.append(testCondition.getDOM());
+    mockEvaluator.getInputType.and.returnValue('number');
+    mockEvaluator.getInputCount.and.returnValue(3);
+    testCondition.generateValueInputs('');
+
+    inputs = mockContainer.querySelectorAll('input');
+    const numberInputs = Array.from(inputs).filter((input) => input.type === 'number');
+
+    expect(numberInputs.length).toEqual(3);
+    expect(numberInputs[0].valueAsNumber).toEqual(1);
+    expect(numberInputs[1].valueAsNumber).toEqual(2);
+    expect(numberInputs[2].valueAsNumber).toEqual(3);
+
+    mockEvaluator.getInputType.and.returnValue('text');
+    mockEvaluator.getInputCount.and.returnValue(2);
+    testCondition.config.values = ['Text I Am', 'Text It Is'];
+    testCondition.generateValueInputs('');
+
+    inputs = mockContainer.querySelectorAll('input');
+    const textInputs = Array.from(inputs).filter((input) => input.type === 'text');
+
+    expect(textInputs.length).toEqual(2);
+    expect(textInputs[0].value).toEqual('Text I Am');
+    expect(textInputs[1].value).toEqual('Text It Is');
+  });
+
+  it('ensures reasonable defaults on values if none are provided', function () {
+    let inputs;
+
+    mockContainer.append(testCondition.getDOM());
+    mockEvaluator.getInputType.and.returnValue('number');
+    mockEvaluator.getInputCount.and.returnValue(3);
+    testCondition.config.values = [];
+    testCondition.generateValueInputs('');
+
+    inputs = Array.from(mockContainer.querySelectorAll('input'));
+
+    expect(inputs[0].valueAsNumber).toEqual(0);
+    expect(inputs[1].valueAsNumber).toEqual(0);
+    expect(inputs[2].valueAsNumber).toEqual(0);
+    expect(testCondition.config.values).toEqual([0, 0, 0]);
+
+    mockEvaluator.getInputType.and.returnValue('text');
+    mockEvaluator.getInputCount.and.returnValue(2);
+    testCondition.config.values = [];
+    testCondition.generateValueInputs('');
+
+    inputs = Array.from(mockContainer.querySelectorAll('input'));
+
+    expect(inputs[0].value).toEqual('');
+    expect(inputs[1].value).toEqual('');
+    expect(testCondition.config.values).toEqual(['', '']);
+  });
+
+  it('responds to a change in its value inputs', function () {
+    mockContainer.append(testCondition.getDOM());
+    mockEvaluator.getInputType.and.returnValue('number');
+    mockEvaluator.getInputCount.and.returnValue(3);
+    testCondition.generateValueInputs('');
+
+    const event = new Event('input', {
+      bubbles: true,
+      cancelable: true
+    });
+    const inputs = mockContainer.querySelectorAll('input');
+
+    inputs[1].value = 9001;
+    inputs[1].dispatchEvent(event);
+
+    expect(changeSpy).toHaveBeenCalledWith({
+      value: 9001,
+      property: 'values[1]',
+      index: 54
+    });
+  });
+
+  it('can remove itself from the configuration', function () {
+    testCondition.remove();
+    expect(removeSpy).toHaveBeenCalledWith(54);
+  });
+
+  it('can duplicate itself', function () {
+    testCondition.duplicate();
+    expect(duplicateSpy).toHaveBeenCalledWith({
+      sourceCondition: mockConfig,
+      index: 54
+    });
+  });
 });
diff --git a/src/plugins/summaryWidget/test/RuleSpec.js b/src/plugins/summaryWidget/test/RuleSpec.js
index 4d6c5b71490..0ed1c39cabd 100644
--- a/src/plugins/summaryWidget/test/RuleSpec.js
+++ b/src/plugins/summaryWidget/test/RuleSpec.js
@@ -1,269 +1,315 @@
-define(['../src/Rule', 'zepto'], function (Rule, $) {
-    describe('A Summary Widget Rule', function () {
-        let mockRuleConfig;
-        let mockDomainObject;
-        let mockOpenMCT;
-        let mockConditionManager;
-        let mockWidgetDnD;
-        let mockEvaluator;
-        let mockContainer;
-        let testRule;
-        let removeSpy;
-        let duplicateSpy;
-        let changeSpy;
-        let conditionChangeSpy;
-
-        beforeEach(function () {
-            mockRuleConfig = {
-                name: 'Name',
-                id: 'mockRule',
-                icon: 'test-icon-name',
-                style: {
-                    'background-color': '',
-                    'border-color': '',
-                    'color': ''
-                },
-                expanded: true,
-                conditions: [{
-                    object: '',
-                    key: '',
-                    operation: '',
-                    values: []
-                }, {
-                    object: 'blah',
-                    key: 'blah',
-                    operation: 'blah',
-                    values: ['blah.', 'blah!', 'blah?']
-                }]
-            };
-            mockDomainObject = {
-                configuration: {
-                    ruleConfigById: {
-                        mockRule: mockRuleConfig,
-                        otherRule: {}
-                    },
-                    ruleOrder: ['default', 'mockRule', 'otherRule']
-                }
-            };
-
-            mockOpenMCT = {};
-            mockOpenMCT.objects = {};
-            mockOpenMCT.objects.mutate = jasmine.createSpy('mutate');
-
-            mockEvaluator = {};
-            mockEvaluator.getOperationDescription = jasmine.createSpy('evaluator')
-                .and.returnValue('Operation Description');
-
-            mockConditionManager = jasmine.createSpyObj('mockConditionManager', [
-                'on',
-                'getComposition',
-                'loadCompleted',
-                'getEvaluator',
-                'getTelemetryMetadata',
-                'metadataLoadCompleted',
-                'getObjectName',
-                'getTelemetryPropertyName'
-            ]);
-            mockConditionManager.loadCompleted.and.returnValue(false);
-            mockConditionManager.metadataLoadCompleted.and.returnValue(false);
-            mockConditionManager.getEvaluator.and.returnValue(mockEvaluator);
-            mockConditionManager.getComposition.and.returnValue({});
-            mockConditionManager.getTelemetryMetadata.and.returnValue({});
-            mockConditionManager.getObjectName.and.returnValue('Object Name');
-            mockConditionManager.getTelemetryPropertyName.and.returnValue('Property Name');
-
-            mockWidgetDnD = jasmine.createSpyObj('dnd', [
-                'on',
-                'setDragImage',
-                'dragStart'
-            ]);
-
-            mockContainer = $(document.createElement('div'));
-
-            removeSpy = jasmine.createSpy('removeCallback');
-            duplicateSpy = jasmine.createSpy('duplicateCallback');
-            changeSpy = jasmine.createSpy('changeCallback');
-            conditionChangeSpy = jasmine.createSpy('conditionChangeCallback');
-
-            testRule = new Rule(mockRuleConfig, mockDomainObject, mockOpenMCT, mockConditionManager,
-                mockWidgetDnD);
-            testRule.on('remove', removeSpy);
-            testRule.on('duplicate', duplicateSpy);
-            testRule.on('change', changeSpy);
-            testRule.on('conditionChange', conditionChangeSpy);
-        });
-
-        it('closes its configuration panel on initial load', function () {
-            expect(testRule.getProperty('expanded')).toEqual(false);
-        });
-
-        it('gets its DOM element', function () {
-            mockContainer.append(testRule.getDOM());
-            expect($('.l-widget-rule', mockContainer).get().length).toBeGreaterThan(0);
-        });
-
-        it('gets its configuration properties', function () {
-            expect(testRule.getProperty('name')).toEqual('Name');
-            expect(testRule.getProperty('icon')).toEqual('test-icon-name');
-        });
-
-        it('can duplicate itself', function () {
-            testRule.duplicate();
-            mockRuleConfig.expanded = true;
-            expect(duplicateSpy).toHaveBeenCalledWith(mockRuleConfig);
-        });
-
-        it('can remove itself from the configuration', function () {
-            testRule.remove();
-            expect(removeSpy).toHaveBeenCalled();
-            expect(mockDomainObject.configuration.ruleConfigById.mockRule).not.toBeDefined();
-            expect(mockDomainObject.configuration.ruleOrder).toEqual(['default', 'otherRule']);
-        });
-
-        it('updates its configuration on a condition change and invokes callbacks', function () {
-            testRule.onConditionChange({
-                value: 'newValue',
-                property: 'object',
-                index: 0
-            });
-            expect(testRule.getProperty('conditions')[0].object).toEqual('newValue');
-            expect(conditionChangeSpy).toHaveBeenCalled();
-        });
-
-        it('allows initializing a new condition with a default configuration', function () {
-            testRule.initCondition();
-            expect(mockRuleConfig.conditions).toEqual([{
-                object: '',
-                key: '',
-                operation: '',
-                values: []
-            }, {
-                object: 'blah',
-                key: 'blah',
-                operation: 'blah',
-                values: ['blah.', 'blah!', 'blah?']
-            }, {
-                object: '',
-                key: '',
-                operation: '',
-                values: []
-            }]);
-        });
-
-        it('allows initializing a new condition from a given configuration', function () {
-            testRule.initCondition({
-                sourceCondition: {
-                    object: 'object1',
-                    key: 'key1',
-                    operation: 'operation1',
-                    values: [1, 2, 3]
-                },
-                index: 0
-            });
-            expect(mockRuleConfig.conditions).toEqual([{
-                object: '',
-                key: '',
-                operation: '',
-                values: []
-            }, {
-                object: 'object1',
-                key: 'key1',
-                operation: 'operation1',
-                values: [1, 2, 3]
-            }, {
-                object: 'blah',
-                key: 'blah',
-                operation: 'blah',
-                values: ['blah.', 'blah!', 'blah?']
-            }]);
-        });
-
-        it('invokes mutate when updating the domain object', function () {
-            testRule.updateDomainObject();
-            expect(mockOpenMCT.objects.mutate).toHaveBeenCalled();
-        });
-
-        it('builds condition view from condition configuration', function () {
-            mockContainer.append(testRule.getDOM());
-            expect($('.t-condition', mockContainer).get().length).toEqual(2);
-        });
-
-        it('responds to input of style properties, and updates the preview', function () {
-            testRule.colorInputs['background-color'].set('#434343');
-            expect(mockRuleConfig.style['background-color']).toEqual('#434343');
-            testRule.colorInputs['border-color'].set('#666666');
-            expect(mockRuleConfig.style['border-color']).toEqual('#666666');
-            testRule.colorInputs.color.set('#999999');
-            expect(mockRuleConfig.style.color).toEqual('#999999');
-
-            expect(testRule.thumbnail.css('background-color')).toEqual('rgb(67, 67, 67)');
-            expect(testRule.thumbnail.css('border-color')).toEqual('rgb(102, 102, 102)');
-            expect(testRule.thumbnail.css('color')).toEqual('rgb(153, 153, 153)');
-
-            expect(changeSpy).toHaveBeenCalled();
-        });
-
-        it('responds to input for the icon property', function () {
-            testRule.iconInput.set('icon-alert-rect');
-            expect(mockRuleConfig.icon).toEqual('icon-alert-rect');
-            expect(changeSpy).toHaveBeenCalled();
-        });
-
-        /*
-        test for js condition commented out for v1
-        */
-
-        // it('responds to input of text properties', function () {
-        //     var testInputs = ['name', 'label', 'message', 'jsCondition'],
-        //         input;
-
-        //     testInputs.forEach(function (key) {
-        //         input = testRule.textInputs[key];
-        //         input.prop('value', 'A new ' + key);
-        //         input.trigger('input');
-        //         expect(mockRuleConfig[key]).toEqual('A new ' + key);
-        //     });
-
-        //     expect(changeSpy).toHaveBeenCalled();
-        // });
-
-        it('allows input for when the rule triggers', function () {
-            testRule.trigger.prop('value', 'all');
-            testRule.trigger.trigger('change');
-            expect(testRule.config.trigger).toEqual('all');
-            expect(conditionChangeSpy).toHaveBeenCalled();
-        });
-
-        it('generates a human-readable description from its conditions', function () {
-            testRule.generateDescription();
-            expect(testRule.config.description).toContain(
-                'Object Name\'s Property Name Operation Description'
-            );
-            testRule.config.trigger = 'js';
-            testRule.generateDescription();
-            expect(testRule.config.description).toContain(
-                'when a custom JavaScript condition evaluates to true'
-            );
-        });
-
-        it('initiates a drag event when its grippy is clicked', function () {
-            testRule.grippy.trigger('mousedown');
-            expect(mockWidgetDnD.setDragImage).toHaveBeenCalled();
-            expect(mockWidgetDnD.dragStart).toHaveBeenCalledWith('mockRule');
-        });
-
-        /*
-        test for js condition commented out for v1
-        */
-
-        it('can remove a condition from its configuration', function () {
-            testRule.removeCondition(0);
-            expect(testRule.config.conditions).toEqual([{
-                object: 'blah',
-                key: 'blah',
-                operation: 'blah',
-                values: ['blah.', 'blah!', 'blah?']
-            }]);
-        });
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import Rule from '../src/Rule.js';
+
+describe('A Summary Widget Rule', function () {
+  let mockRuleConfig;
+  let mockDomainObject;
+  let mockOpenMCT;
+  let mockConditionManager;
+  let mockWidgetDnD;
+  let mockEvaluator;
+  let mockContainer;
+  let testRule;
+  let removeSpy;
+  let duplicateSpy;
+  let changeSpy;
+  let conditionChangeSpy;
+
+  beforeEach(function () {
+    mockRuleConfig = {
+      name: 'Name',
+      id: 'mockRule',
+      icon: 'test-icon-name',
+      style: {
+        'background-color': '',
+        'border-color': '',
+        color: ''
+      },
+      expanded: true,
+      conditions: [
+        {
+          object: '',
+          key: '',
+          operation: '',
+          values: []
+        },
+        {
+          object: 'blah',
+          key: 'blah',
+          operation: 'blah',
+          values: ['blah.', 'blah!', 'blah?']
+        }
+      ]
+    };
+    mockDomainObject = {
+      configuration: {
+        ruleConfigById: {
+          mockRule: mockRuleConfig,
+          otherRule: {}
+        },
+        ruleOrder: ['default', 'mockRule', 'otherRule']
+      }
+    };
+
+    mockOpenMCT = {};
+    mockOpenMCT.objects = {};
+    mockOpenMCT.objects.mutate = jasmine.createSpy('mutate');
+
+    mockEvaluator = {};
+    mockEvaluator.getOperationDescription = jasmine
+      .createSpy('evaluator')
+      .and.returnValue('Operation Description');
+
+    mockConditionManager = jasmine.createSpyObj('mockConditionManager', [
+      'on',
+      'getComposition',
+      'loadCompleted',
+      'getEvaluator',
+      'getTelemetryMetadata',
+      'metadataLoadCompleted',
+      'getObjectName',
+      'getTelemetryPropertyName'
+    ]);
+    mockConditionManager.loadCompleted.and.returnValue(false);
+    mockConditionManager.metadataLoadCompleted.and.returnValue(false);
+    mockConditionManager.getEvaluator.and.returnValue(mockEvaluator);
+    mockConditionManager.getComposition.and.returnValue({});
+    mockConditionManager.getTelemetryMetadata.and.returnValue({});
+    mockConditionManager.getObjectName.and.returnValue('Object Name');
+    mockConditionManager.getTelemetryPropertyName.and.returnValue('Property Name');
+
+    mockWidgetDnD = jasmine.createSpyObj('dnd', ['on', 'setDragImage', 'dragStart']);
+
+    mockContainer = document.createElement('div');
+
+    removeSpy = jasmine.createSpy('removeCallback');
+    duplicateSpy = jasmine.createSpy('duplicateCallback');
+    changeSpy = jasmine.createSpy('changeCallback');
+    conditionChangeSpy = jasmine.createSpy('conditionChangeCallback');
+
+    testRule = new Rule(
+      mockRuleConfig,
+      mockDomainObject,
+      mockOpenMCT,
+      mockConditionManager,
+      mockWidgetDnD
+    );
+    testRule.on('remove', removeSpy);
+    testRule.on('duplicate', duplicateSpy);
+    testRule.on('change', changeSpy);
+    testRule.on('conditionChange', conditionChangeSpy);
+  });
+
+  it('closes its configuration panel on initial load', function () {
+    expect(testRule.getProperty('expanded')).toEqual(false);
+  });
+
+  it('gets its DOM element', function () {
+    mockContainer.append(testRule.getDOM());
+    expect(mockContainer.querySelectorAll('.l-widget-rule').length).toBeGreaterThan(0);
+  });
+
+  it('gets its configuration properties', function () {
+    expect(testRule.getProperty('name')).toEqual('Name');
+    expect(testRule.getProperty('icon')).toEqual('test-icon-name');
+  });
+
+  it('can duplicate itself', function () {
+    testRule.duplicate();
+    mockRuleConfig.expanded = true;
+    expect(duplicateSpy).toHaveBeenCalledWith(mockRuleConfig);
+  });
+
+  it('can remove itself from the configuration', function () {
+    testRule.remove();
+    expect(removeSpy).toHaveBeenCalled();
+    expect(mockDomainObject.configuration.ruleConfigById.mockRule).not.toBeDefined();
+    expect(mockDomainObject.configuration.ruleOrder).toEqual(['default', 'otherRule']);
+  });
+
+  it('updates its configuration on a condition change and invokes callbacks', function () {
+    testRule.onConditionChange({
+      value: 'newValue',
+      property: 'object',
+      index: 0
+    });
+    expect(testRule.getProperty('conditions')[0].object).toEqual('newValue');
+    expect(conditionChangeSpy).toHaveBeenCalled();
+  });
+
+  it('allows initializing a new condition with a default configuration', function () {
+    testRule.initCondition();
+    expect(mockRuleConfig.conditions).toEqual([
+      {
+        object: '',
+        key: '',
+        operation: '',
+        values: []
+      },
+      {
+        object: 'blah',
+        key: 'blah',
+        operation: 'blah',
+        values: ['blah.', 'blah!', 'blah?']
+      },
+      {
+        object: '',
+        key: '',
+        operation: '',
+        values: []
+      }
+    ]);
+  });
+
+  it('allows initializing a new condition from a given configuration', function () {
+    testRule.initCondition({
+      sourceCondition: {
+        object: 'object1',
+        key: 'key1',
+        operation: 'operation1',
+        values: [1, 2, 3]
+      },
+      index: 0
     });
+    expect(mockRuleConfig.conditions).toEqual([
+      {
+        object: '',
+        key: '',
+        operation: '',
+        values: []
+      },
+      {
+        object: 'object1',
+        key: 'key1',
+        operation: 'operation1',
+        values: [1, 2, 3]
+      },
+      {
+        object: 'blah',
+        key: 'blah',
+        operation: 'blah',
+        values: ['blah.', 'blah!', 'blah?']
+      }
+    ]);
+  });
+
+  it('invokes mutate when updating the domain object', function () {
+    testRule.updateDomainObject();
+    expect(mockOpenMCT.objects.mutate).toHaveBeenCalled();
+  });
+
+  it('builds condition view from condition configuration', function () {
+    mockContainer.append(testRule.getDOM());
+    expect(mockContainer.querySelectorAll('.t-condition').length).toEqual(2);
+  });
+
+  it('responds to input of style properties, and updates the preview', function () {
+    testRule.colorInputs['background-color'].set('#434343');
+    expect(mockRuleConfig.style['background-color']).toEqual('#434343');
+    testRule.colorInputs['border-color'].set('#666666');
+    expect(mockRuleConfig.style['border-color']).toEqual('#666666');
+    testRule.colorInputs.color.set('#999999');
+    expect(mockRuleConfig.style.color).toEqual('#999999');
+
+    expect(testRule.thumbnail.style['background-color']).toEqual('rgb(67, 67, 67)');
+    expect(testRule.thumbnail.style['border-color']).toEqual('rgb(102, 102, 102)');
+    expect(testRule.thumbnail.style.color).toEqual('rgb(153, 153, 153)');
+
+    expect(changeSpy).toHaveBeenCalled();
+  });
+
+  it('responds to input for the icon property', function () {
+    testRule.iconInput.set('icon-alert-rect');
+    expect(mockRuleConfig.icon).toEqual('icon-alert-rect');
+    expect(changeSpy).toHaveBeenCalled();
+  });
+
+  /*
+      test for js condition commented out for v1
+      */
+
+  // it('responds to input of text properties', function () {
+  //     var testInputs = ['name', 'label', 'message', 'jsCondition'],
+  //         input;
+
+  //     testInputs.forEach(function (key) {
+  //         input = testRule.textInputs[key];
+  //         input.prop('value', 'A new ' + key);
+  //         input.trigger('input');
+  //         expect(mockRuleConfig[key]).toEqual('A new ' + key);
+  //     });
+
+  //     expect(changeSpy).toHaveBeenCalled();
+  // });
+
+  it('allows input for when the rule triggers', function () {
+    testRule.trigger.value = 'all';
+    const event = new Event('change', {
+      bubbles: true,
+      cancelable: true
+    });
+    testRule.trigger.dispatchEvent(event);
+    expect(testRule.config.trigger).toEqual('all');
+    expect(conditionChangeSpy).toHaveBeenCalled();
+  });
+
+  it('generates a human-readable description from its conditions', function () {
+    testRule.generateDescription();
+    expect(testRule.config.description).toContain(
+      "Object Name's Property Name Operation Description"
+    );
+    testRule.config.trigger = 'js';
+    testRule.generateDescription();
+    expect(testRule.config.description).toContain(
+      'when a custom JavaScript condition evaluates to true'
+    );
+  });
+
+  it('initiates a drag event when its grippy is clicked', function () {
+    const event = new Event('mousedown', {
+      bubbles: true,
+      cancelable: true
+    });
+    testRule.grippy.dispatchEvent(event);
+
+    expect(mockWidgetDnD.setDragImage).toHaveBeenCalled();
+    expect(mockWidgetDnD.dragStart).toHaveBeenCalledWith('mockRule');
+  });
+
+  /*
+      test for js condition commented out for v1
+      */
+
+  it('can remove a condition from its configuration', function () {
+    testRule.removeCondition(0);
+    expect(testRule.config.conditions).toEqual([
+      {
+        object: 'blah',
+        key: 'blah',
+        operation: 'blah',
+        values: ['blah.', 'blah!', 'blah?']
+      }
+    ]);
+  });
 });
diff --git a/src/plugins/summaryWidget/test/SummaryWidgetSpec.js b/src/plugins/summaryWidget/test/SummaryWidgetSpec.js
index e75520a2070..4e8e3eae1b1 100644
--- a/src/plugins/summaryWidget/test/SummaryWidgetSpec.js
+++ b/src/plugins/summaryWidget/test/SummaryWidgetSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,176 +20,173 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(['../src/SummaryWidget', 'zepto'], function (SummaryWidget, $) {
-    xdescribe('The Summary Widget', function () {
-        let summaryWidget;
-        let mockDomainObject;
-        let mockOldDomainObject;
-        let mockOpenMCT;
-        let mockObjectService;
-        let mockStatusCapability;
-        let mockComposition;
-        let mockContainer;
-        let listenCallback;
-        let listenCallbackSpy;
-
-        beforeEach(function () {
-            mockDomainObject = {
-                identifier: {
-                    key: 'testKey',
-                    namespace: 'testNamespace'
-                },
-                name: 'testName',
-                composition: [],
-                configuration: {}
-            };
-            mockComposition = jasmine.createSpyObj('composition', [
-                'on',
-                'off',
-                'load'
-            ]);
-            mockStatusCapability = jasmine.createSpyObj('statusCapability', [
-                'get',
-                'listen',
-                'triggerCallback'
-            ]);
-
-            listenCallbackSpy = jasmine.createSpy('listenCallbackSpy', function () {});
-            mockStatusCapability.get.and.returnValue([]);
-            mockStatusCapability.listen.and.callFake(function (callback) {
-                listenCallback = callback;
-
-                return listenCallbackSpy;
-            });
-            mockStatusCapability.triggerCallback.and.callFake(function () {
-                listenCallback(['editing']);
-            });
-
-            mockOldDomainObject = {};
-            mockOldDomainObject.getCapability = jasmine.createSpy('capability');
-            mockOldDomainObject.getCapability.and.returnValue(mockStatusCapability);
-
-            mockObjectService = {};
-            mockObjectService.getObjects = jasmine.createSpy('objectService');
-            mockObjectService.getObjects.and.returnValue(new Promise(function (resolve, reject) {
-                resolve({
-                    'testNamespace:testKey': mockOldDomainObject
-                });
-            }));
-            mockOpenMCT = jasmine.createSpyObj('openmct', [
-                '$injector',
-                'composition',
-                'objects'
-            ]);
-            mockOpenMCT.$injector.get = jasmine.createSpy('get');
-            mockOpenMCT.$injector.get.and.returnValue(mockObjectService);
-            mockOpenMCT.composition = jasmine.createSpyObj('composition', [
-                'get',
-                'on'
-            ]);
-            mockOpenMCT.composition.get.and.returnValue(mockComposition);
-            mockOpenMCT.objects.mutate = jasmine.createSpy('mutate');
-            mockOpenMCT.objects.observe = jasmine.createSpy('observe');
-            mockOpenMCT.objects.observe.and.returnValue(function () {});
-
-            summaryWidget = new SummaryWidget(mockDomainObject, mockOpenMCT);
-            mockContainer = document.createElement('div');
-            summaryWidget.show(mockContainer);
-        });
-
-        it('queries with legacyId', function () {
-            expect(mockObjectService.getObjects).toHaveBeenCalledWith(['testNamespace:testKey']);
-        });
-
-        it('adds its DOM element to the view', function () {
-            expect(mockContainer.getElementsByClassName('w-summary-widget').length).toBeGreaterThan(0);
-        });
-
-        it('initialzes a default rule', function () {
-            expect(mockDomainObject.configuration.ruleConfigById.default).toBeDefined();
-            expect(mockDomainObject.configuration.ruleOrder).toEqual(['default']);
-        });
-
-        it('builds rules and rule placeholders in view from configuration', function () {
-            expect($('.l-widget-rule', summaryWidget.ruleArea).get().length).toEqual(2);
-        });
-
-        it('allows initializing a new rule with a particular identifier', function () {
-            summaryWidget.initRule('rule0', 'Rule');
-            expect(mockDomainObject.configuration.ruleConfigById.rule0).toBeDefined();
-        });
-
-        it('allows adding a new rule with a unique identifier to the configuration and view', function () {
-            summaryWidget.addRule();
-            expect(mockDomainObject.configuration.ruleOrder.length).toEqual(2);
-            mockDomainObject.configuration.ruleOrder.forEach(function (ruleId) {
-                expect(mockDomainObject.configuration.ruleConfigById[ruleId]).toBeDefined();
-            });
-            summaryWidget.addRule();
-            expect(mockDomainObject.configuration.ruleOrder.length).toEqual(3);
-            mockDomainObject.configuration.ruleOrder.forEach(function (ruleId) {
-                expect(mockDomainObject.configuration.ruleConfigById[ruleId]).toBeDefined();
-            });
-            expect($('.l-widget-rule', summaryWidget.ruleArea).get().length).toEqual(6);
-        });
-
-        it('allows duplicating a rule from source configuration', function () {
-            const sourceConfig = JSON.parse(JSON.stringify(mockDomainObject.configuration.ruleConfigById.default));
-            summaryWidget.duplicateRule(sourceConfig);
-            expect(Object.keys(mockDomainObject.configuration.ruleConfigById).length).toEqual(2);
-        });
-
-        it('does not duplicate an existing rule in the configuration', function () {
-            summaryWidget.initRule('default', 'Default');
-            expect(Object.keys(mockDomainObject.configuration.ruleConfigById).length).toEqual(1);
-        });
-
-        it('uses mutate when updating the domain object only when in edit mode', function () {
-            summaryWidget.editing = true;
-            summaryWidget.updateDomainObject();
-            expect(mockOpenMCT.objects.mutate).toHaveBeenCalled();
-        });
-
-        it('shows configuration interfaces when in edit mode, and hides them otherwise', function () {
-            setTimeout(function () {
-                summaryWidget.onEdit([]);
-                expect(summaryWidget.editing).toEqual(false);
-                expect(summaryWidget.ruleArea.css('display')).toEqual('none');
-                expect(summaryWidget.testDataArea.css('display')).toEqual('none');
-                expect(summaryWidget.addRuleButton.css('display')).toEqual('none');
-                summaryWidget.onEdit(['editing']);
-                expect(summaryWidget.editing).toEqual(true);
-                expect(summaryWidget.ruleArea.css('display')).not.toEqual('none');
-                expect(summaryWidget.testDataArea.css('display')).not.toEqual('none');
-                expect(summaryWidget.addRuleButton.css('display')).not.toEqual('none');
-            }, 100);
-        });
+import SummaryWidget from '../src/SummaryWidget.js';
+
+describe('The Summary Widget', function () {
+  let summaryWidget;
+  let mockDomainObject;
+  let mockOldDomainObject;
+  let mockOpenMCT;
+  let mockObjectService;
+  let mockStatusCapability;
+  let mockComposition;
+  let mockContainer;
+  let listenCallback;
+  let listenCallbackSpy;
+
+  beforeEach(function () {
+    mockDomainObject = {
+      identifier: {
+        key: 'testKey',
+        namespace: 'testNamespace'
+      },
+      name: 'testName',
+      composition: [],
+      configuration: {}
+    };
+    mockComposition = jasmine.createSpyObj('composition', ['on', 'off', 'load']);
+    mockStatusCapability = jasmine.createSpyObj('statusCapability', [
+      'get',
+      'listen',
+      'triggerCallback'
+    ]);
+
+    listenCallbackSpy = jasmine.createSpy('listenCallbackSpy', function () {});
+    mockStatusCapability.get.and.returnValue([]);
+    mockStatusCapability.listen.and.callFake(function (callback) {
+      listenCallback = callback;
+
+      return listenCallbackSpy;
+    });
+    mockStatusCapability.triggerCallback.and.callFake(function () {
+      listenCallback(['editing']);
+    });
 
-        it('unregisters any registered listeners on a destroy', function () {
-            setTimeout(function () {
-                summaryWidget.destroy();
-                expect(listenCallbackSpy).toHaveBeenCalled();
-            }, 100);
-        });
+    mockOldDomainObject = {};
+    mockOldDomainObject.getCapability = jasmine.createSpy('capability');
+    mockOldDomainObject.getCapability.and.returnValue(mockStatusCapability);
 
-        it('allows reorders of rules', function () {
-            summaryWidget.initRule('rule0');
-            summaryWidget.initRule('rule1');
-            summaryWidget.domainObject.configuration.ruleOrder = ['default', 'rule0', 'rule1'];
-            summaryWidget.reorder({
-                draggingId: 'rule1',
-                dropTarget: 'default'
-            });
-            expect(summaryWidget.domainObject.configuration.ruleOrder).toEqual(['default', 'rule1', 'rule0']);
+    mockObjectService = {};
+    mockObjectService.getObjects = jasmine.createSpy('objectService');
+    mockObjectService.getObjects.and.returnValue(
+      new Promise(function (resolve, reject) {
+        resolve({
+          'testNamespace:testKey': mockOldDomainObject
         });
+      })
+    );
+    mockOpenMCT = jasmine.createSpyObj('openmct', ['$injector', 'composition', 'objects']);
+    mockOpenMCT.$injector.get = jasmine.createSpy('get');
+    mockOpenMCT.$injector.get.and.returnValue(mockObjectService);
+    mockOpenMCT.composition = jasmine.createSpyObj('composition', ['get', 'on']);
+    mockOpenMCT.composition.get.and.returnValue(mockComposition);
+    mockOpenMCT.objects.mutate = jasmine.createSpy('mutate');
+    mockOpenMCT.objects.observe = jasmine.createSpy('observe');
+    mockOpenMCT.objects.observe.and.returnValue(function () {});
+
+    summaryWidget = new SummaryWidget(mockDomainObject, mockOpenMCT);
+    mockContainer = document.createElement('div');
+    summaryWidget.show(mockContainer);
+  });
+
+  xit('queries with legacyId', function () {
+    expect(mockObjectService.getObjects).toHaveBeenCalledWith(['testNamespace:testKey']);
+  });
+
+  it('adds its DOM element to the view', function () {
+    expect(mockContainer.getElementsByClassName('w-summary-widget').length).toBeGreaterThan(0);
+  });
+
+  it('initializes a default rule', function () {
+    expect(mockDomainObject.configuration.ruleConfigById.default).toBeDefined();
+    expect(mockDomainObject.configuration.ruleOrder).toEqual(['default']);
+  });
+
+  it('builds rules and rule placeholders in view from configuration', function () {
+    expect(summaryWidget.ruleArea.querySelectorAll('.l-widget-rule').length).toEqual(2);
+  });
+
+  it('allows initializing a new rule with a particular identifier', function () {
+    summaryWidget.initRule('rule0', 'Rule');
+    expect(mockDomainObject.configuration.ruleConfigById.rule0).toBeDefined();
+  });
+
+  it('allows adding a new rule with a unique identifier to the configuration and view', function () {
+    summaryWidget.addRule();
+    expect(mockDomainObject.configuration.ruleOrder.length).toEqual(2);
+    mockDomainObject.configuration.ruleOrder.forEach(function (ruleId) {
+      expect(mockDomainObject.configuration.ruleConfigById[ruleId]).toBeDefined();
+    });
+    summaryWidget.addRule();
+    expect(mockDomainObject.configuration.ruleOrder.length).toEqual(3);
+    mockDomainObject.configuration.ruleOrder.forEach(function (ruleId) {
+      expect(mockDomainObject.configuration.ruleConfigById[ruleId]).toBeDefined();
+    });
+    expect(summaryWidget.ruleArea.querySelectorAll('.l-widget-rule').length).toEqual(6);
+  });
+
+  it('allows duplicating a rule from source configuration', function () {
+    const sourceConfig = JSON.parse(
+      JSON.stringify(mockDomainObject.configuration.ruleConfigById.default)
+    );
+    summaryWidget.duplicateRule(sourceConfig);
+    expect(Object.keys(mockDomainObject.configuration.ruleConfigById).length).toEqual(2);
+  });
+
+  it('does not duplicate an existing rule in the configuration', function () {
+    summaryWidget.initRule('default', 'Default');
+    expect(Object.keys(mockDomainObject.configuration.ruleConfigById).length).toEqual(1);
+  });
+
+  it('uses mutate when updating the domain object only when in edit mode', function () {
+    summaryWidget.editing = true;
+    summaryWidget.updateDomainObject();
+    expect(mockOpenMCT.objects.mutate).toHaveBeenCalled();
+  });
+
+  xit('shows configuration interfaces when in edit mode, and hides them otherwise', function () {
+    setTimeout(function () {
+      summaryWidget.onEdit([]);
+      expect(summaryWidget.editing).toEqual(false);
+      expect(summaryWidget.ruleArea.css('display')).toEqual('none');
+      expect(summaryWidget.testDataArea.css('display')).toEqual('none');
+      expect(summaryWidget.addRuleButton.css('display')).toEqual('none');
+      summaryWidget.onEdit(['editing']);
+      expect(summaryWidget.editing).toEqual(true);
+      expect(summaryWidget.ruleArea.css('display')).not.toEqual('none');
+      expect(summaryWidget.testDataArea.css('display')).not.toEqual('none');
+      expect(summaryWidget.addRuleButton.css('display')).not.toEqual('none');
+    }, 100);
+  });
+
+  xit('unregisters any registered listeners on a destroy', function () {
+    setTimeout(function () {
+      summaryWidget.destroy();
+      expect(listenCallbackSpy).toHaveBeenCalled();
+    }, 100);
+  });
+
+  it('allows reorders of rules', function () {
+    summaryWidget.initRule('rule0');
+    summaryWidget.initRule('rule1');
+    summaryWidget.domainObject.configuration.ruleOrder = ['default', 'rule0', 'rule1'];
+    summaryWidget.reorder({
+      draggingId: 'rule1',
+      dropTarget: 'default'
+    });
+    expect(summaryWidget.domainObject.configuration.ruleOrder).toEqual([
+      'default',
+      'rule1',
+      'rule0'
+    ]);
+  });
 
-        it('adds hyperlink to the widget button and sets newTab preference', function () {
-            summaryWidget.addHyperlink('https://www.nasa.gov', 'newTab');
+  it('adds hyperlink to the widget button and sets newTab preference', function () {
+    summaryWidget.addHyperlink('https://www.nasa.gov', 'newTab');
 
-            const widgetButton = $('#widget', mockContainer);
+    const widgetButton = mockContainer.querySelector('#widget');
 
-            expect(widgetButton.attr('href')).toEqual('https://www.nasa.gov');
-            expect(widgetButton.attr('target')).toEqual('_blank');
-        });
-    });
+    expect(widgetButton.href).toEqual('https://www.nasa.gov/');
+    expect(widgetButton.target).toEqual('_blank');
+  });
 });
diff --git a/src/plugins/summaryWidget/test/SummaryWidgetViewPolicySpec.js b/src/plugins/summaryWidget/test/SummaryWidgetViewPolicySpec.js
index 9cfdafd60b7..4893a655bb2 100644
--- a/src/plugins/summaryWidget/test/SummaryWidgetViewPolicySpec.js
+++ b/src/plugins/summaryWidget/test/SummaryWidgetViewPolicySpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,47 +20,39 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    '../SummaryWidgetViewPolicy'
-], function (
-    SummaryWidgetViewPolicy
-) {
+import SummaryWidgetViewPolicy from '../SummaryWidgetViewPolicy.js';
 
-    describe('SummaryWidgetViewPolicy', function () {
-        let policy;
-        let domainObject;
-        let view;
-        beforeEach(function () {
-            policy = new SummaryWidgetViewPolicy();
-            domainObject = jasmine.createSpyObj('domainObject', [
-                'getModel'
-            ]);
-            domainObject.getModel.and.returnValue({});
-            view = {};
-        });
+describe('SummaryWidgetViewPolicy', function () {
+  let policy;
+  let domainObject;
+  let view;
+  beforeEach(function () {
+    policy = new SummaryWidgetViewPolicy();
+    domainObject = jasmine.createSpyObj('domainObject', ['getModel']);
+    domainObject.getModel.and.returnValue({});
+    view = {};
+  });
 
-        it('returns true for other object types', function () {
-            domainObject.getModel.and.returnValue({
-                type: 'random'
-            });
-            expect(policy.allow(view, domainObject)).toBe(true);
-        });
-
-        it('allows summary widget view for summary widgets', function () {
-            domainObject.getModel.and.returnValue({
-                type: 'summary-widget'
-            });
-            view.key = 'summary-widget-viewer';
-            expect(policy.allow(view, domainObject)).toBe(true);
-        });
+  it('returns true for other object types', function () {
+    domainObject.getModel.and.returnValue({
+      type: 'random'
+    });
+    expect(policy.allow(view, domainObject)).toBe(true);
+  });
 
-        it('disallows other views for summary widgets', function () {
-            domainObject.getModel.and.returnValue({
-                type: 'summary-widget'
-            });
-            view.key = 'other view';
-            expect(policy.allow(view, domainObject)).toBe(false);
-        });
+  it('allows summary widget view for summary widgets', function () {
+    domainObject.getModel.and.returnValue({
+      type: 'summary-widget'
+    });
+    view.key = 'summary-widget-viewer';
+    expect(policy.allow(view, domainObject)).toBe(true);
+  });
 
+  it('disallows other views for summary widgets', function () {
+    domainObject.getModel.and.returnValue({
+      type: 'summary-widget'
     });
+    view.key = 'other view';
+    expect(policy.allow(view, domainObject)).toBe(false);
+  });
 });
diff --git a/src/plugins/summaryWidget/test/TestDataItemSpec.js b/src/plugins/summaryWidget/test/TestDataItemSpec.js
index dffa6c6f224..f3d326a3a69 100644
--- a/src/plugins/summaryWidget/test/TestDataItemSpec.js
+++ b/src/plugins/summaryWidget/test/TestDataItemSpec.js
@@ -1,140 +1,167 @@
-define(['../src/TestDataItem', 'zepto'], function (TestDataItem, $) {
-    describe('A summary widget test data item', function () {
-        let testDataItem;
-        let mockConfig;
-        let mockConditionManager;
-        let mockContainer;
-        let mockEvaluator;
-        let changeSpy;
-        let duplicateSpy;
-        let removeSpy;
-        let generateValueSpy;
-
-        beforeEach(function () {
-            mockContainer = $(document.createElement('div'));
-
-            mockConfig = {
-                object: 'object1',
-                key: 'property1',
-                value: 1
-            };
-
-            mockEvaluator = {};
-            mockEvaluator.getInputTypeById = jasmine.createSpy('inputType');
-
-            mockConditionManager = jasmine.createSpyObj('mockConditionManager', [
-                'on',
-                'getComposition',
-                'loadCompleted',
-                'getEvaluator',
-                'getTelemetryMetadata',
-                'metadataLoadCompleted',
-                'getObjectName',
-                'getTelemetryPropertyName',
-                'getTelemetryPropertyType'
-            ]);
-            mockConditionManager.loadCompleted.and.returnValue(false);
-            mockConditionManager.metadataLoadCompleted.and.returnValue(false);
-            mockConditionManager.getEvaluator.and.returnValue(mockEvaluator);
-            mockConditionManager.getComposition.and.returnValue({});
-            mockConditionManager.getTelemetryMetadata.and.returnValue({});
-            mockConditionManager.getObjectName.and.returnValue('Object Name');
-            mockConditionManager.getTelemetryPropertyName.and.returnValue('Property Name');
-            mockConditionManager.getTelemetryPropertyType.and.returnValue('');
-
-            duplicateSpy = jasmine.createSpy('duplicate');
-            removeSpy = jasmine.createSpy('remove');
-            changeSpy = jasmine.createSpy('change');
-            generateValueSpy = jasmine.createSpy('generateValueInput');
-
-            testDataItem = new TestDataItem(mockConfig, 54, mockConditionManager);
-
-            testDataItem.on('duplicate', duplicateSpy);
-            testDataItem.on('remove', removeSpy);
-            testDataItem.on('change', changeSpy);
-        });
-
-        it('exposes a DOM element to represent itself in the view', function () {
-            mockContainer.append(testDataItem.getDOM());
-            expect($('.t-test-data-item', mockContainer).get().length).toEqual(1);
-        });
-
-        it('responds to a change in its object select', function () {
-            testDataItem.selects.object.setSelected('');
-            expect(changeSpy).toHaveBeenCalledWith({
-                value: '',
-                property: 'object',
-                index: 54
-            });
-        });
-
-        it('responds to a change in its key select', function () {
-            testDataItem.generateValueInput = generateValueSpy;
-            testDataItem.selects.key.setSelected('');
-            expect(changeSpy).toHaveBeenCalledWith({
-                value: '',
-                property: 'key',
-                index: 54
-            });
-            expect(generateValueSpy).toHaveBeenCalledWith('');
-        });
-
-        it('generates a value input of the appropriate type', function () {
-            mockContainer.append(testDataItem.getDOM());
-            mockEvaluator.getInputTypeById.and.returnValue('number');
-            testDataItem.generateValueInput('');
-            expect($('input', mockContainer).filter('[type=number]').get().length).toEqual(1);
-            expect($('input', mockContainer).prop('valueAsNumber')).toEqual(1);
-
-            mockEvaluator.getInputTypeById.and.returnValue('text');
-            testDataItem.config.value = 'Text I Am';
-            testDataItem.generateValueInput('');
-            expect($('input', mockContainer).filter('[type=text]').get().length).toEqual(1);
-            expect($('input', mockContainer).prop('value')).toEqual('Text I Am');
-        });
-
-        it('ensures reasonable defaults on values if none are provided', function () {
-            mockContainer.append(testDataItem.getDOM());
-
-            mockEvaluator.getInputTypeById.and.returnValue('number');
-            testDataItem.config.value = undefined;
-            testDataItem.generateValueInput('');
-            expect($('input', mockContainer).filter('[type=number]').get().length).toEqual(1);
-            expect($('input', mockContainer).prop('valueAsNumber')).toEqual(0);
-            expect(testDataItem.config.value).toEqual(0);
-
-            mockEvaluator.getInputTypeById.and.returnValue('text');
-            testDataItem.config.value = undefined;
-            testDataItem.generateValueInput('');
-            expect($('input', mockContainer).filter('[type=text]').get().length).toEqual(1);
-            expect($('input', mockContainer).prop('value')).toEqual('');
-            expect(testDataItem.config.value).toEqual('');
-        });
-
-        it('responds to a change in its value inputs', function () {
-            mockContainer.append(testDataItem.getDOM());
-            mockEvaluator.getInputTypeById.and.returnValue('number');
-            testDataItem.generateValueInput('');
-            $('input', mockContainer).prop('value', 9001);
-            $('input', mockContainer).trigger('input');
-            expect(changeSpy).toHaveBeenCalledWith({
-                value: 9001,
-                property: 'value',
-                index: 54
-            });
-        });
-
-        it('can remove itself from the configuration', function () {
-            testDataItem.remove();
-            expect(removeSpy).toHaveBeenCalledWith(54);
-        });
-
-        it('can duplicate itself', function () {
-            testDataItem.duplicate();
-            expect(duplicateSpy).toHaveBeenCalledWith({
-                sourceItem: mockConfig,
-                index: 54
-            });
-        });
+import TestDataItem from '../src/TestDataItem.js';
+
+describe('A summary widget test data item', function () {
+  let testDataItem;
+  let mockConfig;
+  let mockConditionManager;
+  let mockContainer;
+  let mockEvaluator;
+  let changeSpy;
+  let duplicateSpy;
+  let removeSpy;
+  let generateValueSpy;
+
+  beforeEach(function () {
+    mockContainer = document.createElement('div');
+
+    mockConfig = {
+      object: 'object1',
+      key: 'property1',
+      value: 1
+    };
+
+    mockEvaluator = {};
+    mockEvaluator.getInputTypeById = jasmine.createSpy('inputType');
+
+    mockConditionManager = jasmine.createSpyObj('mockConditionManager', [
+      'on',
+      'getComposition',
+      'loadCompleted',
+      'getEvaluator',
+      'getTelemetryMetadata',
+      'metadataLoadCompleted',
+      'getObjectName',
+      'getTelemetryPropertyName',
+      'getTelemetryPropertyType'
+    ]);
+    mockConditionManager.loadCompleted.and.returnValue(false);
+    mockConditionManager.metadataLoadCompleted.and.returnValue(false);
+    mockConditionManager.getEvaluator.and.returnValue(mockEvaluator);
+    mockConditionManager.getComposition.and.returnValue({});
+    mockConditionManager.getTelemetryMetadata.and.returnValue({});
+    mockConditionManager.getObjectName.and.returnValue('Object Name');
+    mockConditionManager.getTelemetryPropertyName.and.returnValue('Property Name');
+    mockConditionManager.getTelemetryPropertyType.and.returnValue('');
+
+    duplicateSpy = jasmine.createSpy('duplicate');
+    removeSpy = jasmine.createSpy('remove');
+    changeSpy = jasmine.createSpy('change');
+    generateValueSpy = jasmine.createSpy('generateValueInput');
+
+    testDataItem = new TestDataItem(mockConfig, 54, mockConditionManager);
+
+    testDataItem.on('duplicate', duplicateSpy);
+    testDataItem.on('remove', removeSpy);
+    testDataItem.on('change', changeSpy);
+  });
+
+  it('exposes a DOM element to represent itself in the view', function () {
+    mockContainer.append(testDataItem.getDOM());
+    expect(mockContainer.querySelectorAll('.t-test-data-item').length).toEqual(1);
+  });
+
+  it('responds to a change in its object select', function () {
+    testDataItem.selects.object.setSelected('');
+    expect(changeSpy).toHaveBeenCalledWith({
+      value: '',
+      property: 'object',
+      index: 54
     });
+  });
+
+  it('responds to a change in its key select', function () {
+    testDataItem.generateValueInput = generateValueSpy;
+    testDataItem.selects.key.setSelected('');
+    expect(changeSpy).toHaveBeenCalledWith({
+      value: '',
+      property: 'key',
+      index: 54
+    });
+    expect(generateValueSpy).toHaveBeenCalledWith('');
+  });
+
+  it('generates a value input of the appropriate type', function () {
+    let inputs;
+
+    mockContainer.append(testDataItem.getDOM());
+    mockEvaluator.getInputTypeById.and.returnValue('number');
+    testDataItem.generateValueInput('');
+
+    inputs = mockContainer.querySelectorAll('input');
+    const numberInputs = Array.from(inputs).filter((input) => input.type === 'number');
+
+    expect(numberInputs.length).toEqual(1);
+    expect(inputs[0].valueAsNumber).toEqual(1);
+
+    mockEvaluator.getInputTypeById.and.returnValue('text');
+    testDataItem.config.value = 'Text I Am';
+    testDataItem.generateValueInput('');
+
+    inputs = mockContainer.querySelectorAll('input');
+    const textInputs = Array.from(inputs).filter((input) => input.type === 'text');
+
+    expect(textInputs.length).toEqual(1);
+    expect(inputs[0].value).toEqual('Text I Am');
+  });
+
+  it('ensures reasonable defaults on values if none are provided', function () {
+    let inputs;
+
+    mockContainer.append(testDataItem.getDOM());
+
+    mockEvaluator.getInputTypeById.and.returnValue('number');
+    testDataItem.config.value = undefined;
+    testDataItem.generateValueInput('');
+
+    inputs = mockContainer.querySelectorAll('input');
+    const numberInputs = Array.from(inputs).filter((input) => input.type === 'number');
+
+    expect(numberInputs.length).toEqual(1);
+    expect(inputs[0].valueAsNumber).toEqual(0);
+    expect(testDataItem.config.value).toEqual(0);
+
+    mockEvaluator.getInputTypeById.and.returnValue('text');
+    testDataItem.config.value = undefined;
+    testDataItem.generateValueInput('');
+
+    inputs = mockContainer.querySelectorAll('input');
+    const textInputs = Array.from(inputs).filter((input) => input.type === 'text');
+
+    expect(textInputs.length).toEqual(1);
+    expect(inputs[0].value).toEqual('');
+    expect(testDataItem.config.value).toEqual('');
+  });
+
+  it('responds to a change in its value inputs', function () {
+    mockContainer.append(testDataItem.getDOM());
+    mockEvaluator.getInputTypeById.and.returnValue('number');
+    testDataItem.generateValueInput('');
+
+    const event = new Event('input', {
+      bubbles: true,
+      cancelable: true
+    });
+
+    mockContainer.querySelector('input').value = 9001;
+    mockContainer.querySelector('input').dispatchEvent(event);
+
+    expect(changeSpy).toHaveBeenCalledWith({
+      value: 9001,
+      property: 'value',
+      index: 54
+    });
+  });
+
+  it('can remove itself from the configuration', function () {
+    testDataItem.remove();
+    expect(removeSpy).toHaveBeenCalledWith(54);
+  });
+
+  it('can duplicate itself', function () {
+    testDataItem.duplicate();
+    expect(duplicateSpy).toHaveBeenCalledWith({
+      sourceItem: mockConfig,
+      index: 54
+    });
+  });
 });
diff --git a/src/plugins/summaryWidget/test/TestDataManagerSpec.js b/src/plugins/summaryWidget/test/TestDataManagerSpec.js
index 70042250d39..67abcd71188 100644
--- a/src/plugins/summaryWidget/test/TestDataManagerSpec.js
+++ b/src/plugins/summaryWidget/test/TestDataManagerSpec.js
@@ -1,230 +1,244 @@
-define(['../src/TestDataManager', 'zepto'], function (TestDataManager, $) {
-    describe('A Summary Widget Rule', function () {
-        let mockDomainObject;
-        let mockOpenMCT;
-        let mockConditionManager;
-        let mockEvaluator;
-        let mockContainer;
-        let mockTelemetryMetadata;
-        let testDataManager;
-        let mockCompObject1;
-        let mockCompObject2;
-
-        beforeEach(function () {
-            mockDomainObject = {
-                configuration: {
-                    testDataConfig: [{
-                        object: '',
-                        key: '',
-                        value: ''
-                    }, {
-                        object: 'object1',
-                        key: 'property1',
-                        value: 66
-                    }, {
-                        object: 'object2',
-                        key: 'property4',
-                        value: 'Text It Is'
-                    }]
-                },
-                composition: [{
-                    object1: {
-                        key: 'object1',
-                        name: 'Object 1'
-                    },
-                    object2: {
-                        key: 'object2',
-                        name: 'Object 2'
-                    }
-                }]
-            };
-
-            mockTelemetryMetadata = {
-                object1: {
-                    property1: {
-                        key: 'property1'
-                    },
-                    property2: {
-                        key: 'property2'
-                    }
-                },
-                object2: {
-                    property3: {
-                        key: 'property3'
-                    },
-                    property4: {
-                        key: 'property4'
-                    }
-                }
-            };
-
-            mockCompObject1 = {
-                identifier: {
-                    key: 'object1'
-                },
-                name: 'Object 1'
-            };
-            mockCompObject2 = {
-                identifier: {
-                    key: 'object2'
-                },
-                name: 'Object 2'
-            };
-
-            mockOpenMCT = {};
-            mockOpenMCT.objects = {};
-            mockOpenMCT.objects.mutate = jasmine.createSpy('mutate');
-
-            mockEvaluator = {};
-            mockEvaluator.setTestDataCache = jasmine.createSpy('testDataCache');
-            mockEvaluator.useTestData = jasmine.createSpy('useTestData');
-
-            mockConditionManager = jasmine.createSpyObj('mockConditionManager', [
-                'on',
-                'getComposition',
-                'loadCompleted',
-                'getEvaluator',
-                'getTelemetryMetadata',
-                'metadataLoadCompleted',
-                'getObjectName',
-                'getTelemetryPropertyName',
-                'triggerTelemetryCallback'
-            ]);
-            mockConditionManager.loadCompleted.and.returnValue(false);
-            mockConditionManager.metadataLoadCompleted.and.returnValue(false);
-            mockConditionManager.getEvaluator.and.returnValue(mockEvaluator);
-            mockConditionManager.getComposition.and.returnValue({
-                object1: mockCompObject1,
-                object2: mockCompObject2
-            });
-            mockConditionManager.getTelemetryMetadata.and.callFake(function (id) {
-                return mockTelemetryMetadata[id];
-            });
-            mockConditionManager.getObjectName.and.returnValue('Object Name');
-            mockConditionManager.getTelemetryPropertyName.and.returnValue('Property Name');
-
-            mockContainer = $(document.createElement('div'));
-
-            testDataManager = new TestDataManager(mockDomainObject, mockConditionManager, mockOpenMCT);
-        });
-
-        it('closes its configuration panel on initial load', function () {
-
-        });
-
-        it('exposes a DOM element to represent itself in the view', function () {
-            mockContainer.append(testDataManager.getDOM());
-            expect($('.t-widget-test-data-content', mockContainer).get().length).toBeGreaterThan(0);
-        });
-
-        it('generates a test cache in the format expected by a condition evaluator', function () {
-            testDataManager.updateTestCache();
-            expect(mockEvaluator.setTestDataCache).toHaveBeenCalledWith({
-                object1: {
-                    property1: 66,
-                    property2: ''
-                },
-                object2: {
-                    property3: '',
-                    property4: 'Text It Is'
-                }
-            });
-        });
-
-        it('updates its configuration on a item change and provides an updated'
-           + 'cache to the evaluator', function () {
-            testDataManager.onItemChange({
-                value: 26,
-                property: 'value',
-                index: 1
-            });
-            expect(testDataManager.config[1].value).toEqual(26);
-            expect(mockEvaluator.setTestDataCache).toHaveBeenCalledWith({
-                object1: {
-                    property1: 26,
-                    property2: ''
-                },
-                object2: {
-                    property3: '',
-                    property4: 'Text It Is'
-                }
-            });
-        });
-
-        it('allows initializing a new item with a default configuration', function () {
-            testDataManager.initItem();
-            expect(mockDomainObject.configuration.testDataConfig).toEqual([{
-                object: '',
-                key: '',
-                value: ''
-            }, {
-                object: 'object1',
-                key: 'property1',
-                value: 66
-            }, {
-                object: 'object2',
-                key: 'property4',
-                value: 'Text It Is'
-            }, {
-                object: '',
-                key: '',
-                value: ''
-            }]);
-        });
-
-        it('allows initializing a new item from a given configuration', function () {
-            testDataManager.initItem({
-                sourceItem: {
-                    object: 'object2',
-                    key: 'property3',
-                    value: 1
-                },
-                index: 0
-            });
-            expect(mockDomainObject.configuration.testDataConfig).toEqual([{
-                object: '',
-                key: '',
-                value: ''
-            }, {
-                object: 'object2',
-                key: 'property3',
-                value: 1
-            }, {
-                object: 'object1',
-                key: 'property1',
-                value: 66
-            }, {
-                object: 'object2',
-                key: 'property4',
-                value: 'Text It Is'
-            }]);
-        });
-
-        it('invokes mutate when updating the domain object', function () {
-            testDataManager.updateDomainObject();
-            expect(mockOpenMCT.objects.mutate).toHaveBeenCalled();
-        });
-
-        it('builds item view from item configuration', function () {
-            mockContainer.append(testDataManager.getDOM());
-            expect($('.t-test-data-item', mockContainer).get().length).toEqual(3);
-        });
-
-        it('can remove a item from its configuration', function () {
-            testDataManager.removeItem(0);
-            expect(mockDomainObject.configuration.testDataConfig).toEqual([{
-                object: 'object1',
-                key: 'property1',
-                value: 66
-            }, {
-                object: 'object2',
-                key: 'property4',
-                value: 'Text It Is'
-            }]);
-        });
-
-        it('exposes a UI element to toggle test data on and off', function () {
-
-        });
+import TestDataManager from '../src/TestDataManager.js';
+
+describe('A Summary Widget Rule', function () {
+  let mockDomainObject;
+  let mockOpenMCT;
+  let mockConditionManager;
+  let mockEvaluator;
+  let mockContainer;
+  let mockTelemetryMetadata;
+  let testDataManager;
+  let mockCompObject1;
+  let mockCompObject2;
+
+  beforeEach(function () {
+    mockDomainObject = {
+      configuration: {
+        testDataConfig: [
+          {
+            object: '',
+            key: '',
+            value: ''
+          },
+          {
+            object: 'object1',
+            key: 'property1',
+            value: 66
+          },
+          {
+            object: 'object2',
+            key: 'property4',
+            value: 'Text It Is'
+          }
+        ]
+      },
+      composition: [
+        {
+          object1: {
+            key: 'object1',
+            name: 'Object 1'
+          },
+          object2: {
+            key: 'object2',
+            name: 'Object 2'
+          }
+        }
+      ]
+    };
+
+    mockTelemetryMetadata = {
+      object1: {
+        property1: {
+          key: 'property1'
+        },
+        property2: {
+          key: 'property2'
+        }
+      },
+      object2: {
+        property3: {
+          key: 'property3'
+        },
+        property4: {
+          key: 'property4'
+        }
+      }
+    };
+
+    mockCompObject1 = {
+      identifier: {
+        key: 'object1'
+      },
+      name: 'Object 1'
+    };
+    mockCompObject2 = {
+      identifier: {
+        key: 'object2'
+      },
+      name: 'Object 2'
+    };
+
+    mockOpenMCT = {};
+    mockOpenMCT.objects = {};
+    mockOpenMCT.objects.mutate = jasmine.createSpy('mutate');
+
+    mockEvaluator = {};
+    mockEvaluator.setTestDataCache = jasmine.createSpy('testDataCache');
+    mockEvaluator.useTestData = jasmine.createSpy('useTestData');
+
+    mockConditionManager = jasmine.createSpyObj('mockConditionManager', [
+      'on',
+      'getComposition',
+      'loadCompleted',
+      'getEvaluator',
+      'getTelemetryMetadata',
+      'metadataLoadCompleted',
+      'getObjectName',
+      'getTelemetryPropertyName',
+      'triggerTelemetryCallback'
+    ]);
+    mockConditionManager.loadCompleted.and.returnValue(false);
+    mockConditionManager.metadataLoadCompleted.and.returnValue(false);
+    mockConditionManager.getEvaluator.and.returnValue(mockEvaluator);
+    mockConditionManager.getComposition.and.returnValue({
+      object1: mockCompObject1,
+      object2: mockCompObject2
     });
+    mockConditionManager.getTelemetryMetadata.and.callFake(function (id) {
+      return mockTelemetryMetadata[id];
+    });
+    mockConditionManager.getObjectName.and.returnValue('Object Name');
+    mockConditionManager.getTelemetryPropertyName.and.returnValue('Property Name');
+
+    mockContainer = document.createElement('div');
+
+    testDataManager = new TestDataManager(mockDomainObject, mockConditionManager, mockOpenMCT);
+  });
+
+  it('closes its configuration panel on initial load', function () {});
+
+  it('exposes a DOM element to represent itself in the view', function () {
+    mockContainer.append(testDataManager.getDOM());
+    expect(mockContainer.querySelectorAll('.t-widget-test-data-content').length).toBeGreaterThan(0);
+  });
+
+  it('generates a test cache in the format expected by a condition evaluator', function () {
+    testDataManager.updateTestCache();
+    expect(mockEvaluator.setTestDataCache).toHaveBeenCalledWith({
+      object1: {
+        property1: 66,
+        property2: ''
+      },
+      object2: {
+        property3: '',
+        property4: 'Text It Is'
+      }
+    });
+  });
+
+  it('updates its configuration on a item change and provides an updated cache to the evaluator', function () {
+    testDataManager.onItemChange({
+      value: 26,
+      property: 'value',
+      index: 1
+    });
+    expect(testDataManager.config[1].value).toEqual(26);
+    expect(mockEvaluator.setTestDataCache).toHaveBeenCalledWith({
+      object1: {
+        property1: 26,
+        property2: ''
+      },
+      object2: {
+        property3: '',
+        property4: 'Text It Is'
+      }
+    });
+  });
+
+  it('allows initializing a new item with a default configuration', function () {
+    testDataManager.initItem();
+    expect(mockDomainObject.configuration.testDataConfig).toEqual([
+      {
+        object: '',
+        key: '',
+        value: ''
+      },
+      {
+        object: 'object1',
+        key: 'property1',
+        value: 66
+      },
+      {
+        object: 'object2',
+        key: 'property4',
+        value: 'Text It Is'
+      },
+      {
+        object: '',
+        key: '',
+        value: ''
+      }
+    ]);
+  });
+
+  it('allows initializing a new item from a given configuration', function () {
+    testDataManager.initItem({
+      sourceItem: {
+        object: 'object2',
+        key: 'property3',
+        value: 1
+      },
+      index: 0
+    });
+    expect(mockDomainObject.configuration.testDataConfig).toEqual([
+      {
+        object: '',
+        key: '',
+        value: ''
+      },
+      {
+        object: 'object2',
+        key: 'property3',
+        value: 1
+      },
+      {
+        object: 'object1',
+        key: 'property1',
+        value: 66
+      },
+      {
+        object: 'object2',
+        key: 'property4',
+        value: 'Text It Is'
+      }
+    ]);
+  });
+
+  it('invokes mutate when updating the domain object', function () {
+    testDataManager.updateDomainObject();
+    expect(mockOpenMCT.objects.mutate).toHaveBeenCalled();
+  });
+
+  it('builds item view from item configuration', function () {
+    mockContainer.append(testDataManager.getDOM());
+    expect(mockContainer.querySelectorAll('.t-test-data-item').length).toEqual(3);
+  });
+
+  it('can remove a item from its configuration', function () {
+    testDataManager.removeItem(0);
+    expect(mockDomainObject.configuration.testDataConfig).toEqual([
+      {
+        object: 'object1',
+        key: 'property1',
+        value: 66
+      },
+      {
+        object: 'object2',
+        key: 'property4',
+        value: 'Text It Is'
+      }
+    ]);
+  });
+
+  it('exposes a UI element to toggle test data on and off', function () {});
 });
diff --git a/src/plugins/summaryWidget/test/input/ColorPaletteSpec.js b/src/plugins/summaryWidget/test/input/ColorPaletteSpec.js
index d169ef748a2..c6e1250cd8b 100644
--- a/src/plugins/summaryWidget/test/input/ColorPaletteSpec.js
+++ b/src/plugins/summaryWidget/test/input/ColorPaletteSpec.js
@@ -1,24 +1,24 @@
-define(['../../src/input/ColorPalette'], function (ColorPalette) {
-    describe('An Open MCT color palette', function () {
-        let colorPalette;
-        let changeCallback;
+import ColorPalette from '../../src/input/ColorPalette.js';
 
-        beforeEach(function () {
-            changeCallback = jasmine.createSpy('changeCallback');
-        });
+describe('An Open MCT color palette', function () {
+  let colorPalette;
+  let changeCallback;
 
-        it('allows defining a custom color set', function () {
-            colorPalette = new ColorPalette('someClass', 'someContainer', ['color1', 'color2', 'color3']);
-            expect(colorPalette.getCurrent()).toEqual('color1');
-            colorPalette.on('change', changeCallback);
-            colorPalette.set('color2');
-            expect(colorPalette.getCurrent()).toEqual('color2');
-            expect(changeCallback).toHaveBeenCalledWith('color2');
-        });
+  beforeEach(function () {
+    changeCallback = jasmine.createSpy('changeCallback');
+  });
 
-        it('loads with a default color set if one is not provided', function () {
-            colorPalette = new ColorPalette('someClass', 'someContainer');
-            expect(colorPalette.getCurrent()).toBeDefined();
-        });
-    });
+  it('allows defining a custom color set', function () {
+    colorPalette = new ColorPalette('someClass', 'someContainer', ['color1', 'color2', 'color3']);
+    expect(colorPalette.getCurrent()).toEqual('color1');
+    colorPalette.on('change', changeCallback);
+    colorPalette.set('color2');
+    expect(colorPalette.getCurrent()).toEqual('color2');
+    expect(changeCallback).toHaveBeenCalledWith('color2');
+  });
+
+  it('loads with a default color set if one is not provided', function () {
+    colorPalette = new ColorPalette('someClass', 'someContainer');
+    expect(colorPalette.getCurrent()).toBeDefined();
+  });
 });
diff --git a/src/plugins/summaryWidget/test/input/IconPaletteSpec.js b/src/plugins/summaryWidget/test/input/IconPaletteSpec.js
index 6bb80a6be58..f17f4ad970a 100644
--- a/src/plugins/summaryWidget/test/input/IconPaletteSpec.js
+++ b/src/plugins/summaryWidget/test/input/IconPaletteSpec.js
@@ -1,24 +1,24 @@
-define(['../../src/input/IconPalette'], function (IconPalette) {
-    describe('An Open MCT icon palette', function () {
-        let iconPalette;
-        let changeCallback;
+import IconPalette from '../../src/input/IconPalette.js';
 
-        beforeEach(function () {
-            changeCallback = jasmine.createSpy('changeCallback');
-        });
+describe('An Open MCT icon palette', function () {
+  let iconPalette;
+  let changeCallback;
 
-        it('allows defining a custom icon set', function () {
-            iconPalette = new IconPalette('', 'someContainer', ['icon1', 'icon2', 'icon3']);
-            expect(iconPalette.getCurrent()).toEqual('icon1');
-            iconPalette.on('change', changeCallback);
-            iconPalette.set('icon2');
-            expect(iconPalette.getCurrent()).toEqual('icon2');
-            expect(changeCallback).toHaveBeenCalledWith('icon2');
-        });
+  beforeEach(function () {
+    changeCallback = jasmine.createSpy('changeCallback');
+  });
 
-        it('loads with a default icon set if one is not provided', function () {
-            iconPalette = new IconPalette('someClass', 'someContainer');
-            expect(iconPalette.getCurrent()).toBeDefined();
-        });
-    });
+  it('allows defining a custom icon set', function () {
+    iconPalette = new IconPalette('', 'someContainer', ['icon1', 'icon2', 'icon3']);
+    expect(iconPalette.getCurrent()).toEqual('icon1');
+    iconPalette.on('change', changeCallback);
+    iconPalette.set('icon2');
+    expect(iconPalette.getCurrent()).toEqual('icon2');
+    expect(changeCallback).toHaveBeenCalledWith('icon2');
+  });
+
+  it('loads with a default icon set if one is not provided', function () {
+    iconPalette = new IconPalette('someClass', 'someContainer');
+    expect(iconPalette.getCurrent()).toBeDefined();
+  });
 });
diff --git a/src/plugins/summaryWidget/test/input/KeySelectSpec.js b/src/plugins/summaryWidget/test/input/KeySelectSpec.js
index 374b310d389..922a00e9186 100644
--- a/src/plugins/summaryWidget/test/input/KeySelectSpec.js
+++ b/src/plugins/summaryWidget/test/input/KeySelectSpec.js
@@ -1,127 +1,123 @@
-define(['../../src/input/KeySelect'], function (KeySelect) {
-    describe('A select for choosing composition object properties', function () {
-        let mockConfig;
-        let mockBadConfig;
-        let mockManager;
-        let keySelect;
-        let mockMetadata;
-        let mockObjectSelect;
-        beforeEach(function () {
-            mockConfig = {
-                object: 'object1',
-                key: 'a'
-            };
-
-            mockBadConfig = {
-                object: 'object1',
-                key: 'someNonexistentKey'
-            };
-
-            mockMetadata = {
-                object1: {
-                    a: {
-                        name: 'A'
-                    },
-                    b: {
-                        name: 'B'
-                    }
-                },
-                object2: {
-                    alpha: {
-                        name: 'Alpha'
-                    },
-                    beta: {
-                        name: 'Beta'
-                    }
-                },
-                object3: {
-                    a: {
-                        name: 'A'
-                    }
-                }
-            };
-
-            mockManager = jasmine.createSpyObj('mockManager', [
-                'on',
-                'metadataLoadCompleted',
-                'triggerCallback',
-                'getTelemetryMetadata'
-            ]);
-
-            mockObjectSelect = jasmine.createSpyObj('mockObjectSelect', [
-                'on',
-                'triggerCallback'
-            ]);
-
-            mockObjectSelect.on.and.callFake((event, callback) => {
-                mockObjectSelect.callbacks = mockObjectSelect.callbacks || {};
-                mockObjectSelect.callbacks[event] = callback;
-            });
-
-            mockObjectSelect.triggerCallback.and.callFake((event, key) => {
-                mockObjectSelect.callbacks[event](key);
-            });
-
-            mockManager.on.and.callFake((event, callback) => {
-                mockManager.callbacks = mockManager.callbacks || {};
-                mockManager.callbacks[event] = callback;
-            });
-
-            mockManager.triggerCallback.and.callFake(event => {
-                mockManager.callbacks[event]();
-            });
-
-            mockManager.getTelemetryMetadata.and.callFake(function (key) {
-                return mockMetadata[key];
-            });
-
-        });
-
-        it('waits until the metadata fully loads to populate itself', function () {
-            mockManager.metadataLoadCompleted.and.returnValue(false);
-            keySelect = new KeySelect(mockConfig, mockObjectSelect, mockManager);
-            expect(keySelect.getSelected()).toEqual('');
-        });
-
-        it('populates itself with metadata on a metadata load', function () {
-            mockManager.metadataLoadCompleted.and.returnValue(false);
-            keySelect = new KeySelect(mockConfig, mockObjectSelect, mockManager);
-            mockManager.triggerCallback('metadata');
-            expect(keySelect.getSelected()).toEqual('a');
-        });
-
-        it('populates itself with metadata if metadata load is already complete', function () {
-            mockManager.metadataLoadCompleted.and.returnValue(true);
-            keySelect = new KeySelect(mockConfig, mockObjectSelect, mockManager);
-            expect(keySelect.getSelected()).toEqual('a');
-        });
-
-        it('clears its selection state if the property in its config is not in its object', function () {
-            mockManager.metadataLoadCompleted.and.returnValue(true);
-            keySelect = new KeySelect(mockBadConfig, mockObjectSelect, mockManager);
-            expect(keySelect.getSelected()).toEqual('');
-        });
-
-        it('populates with the appropriate options when its linked object changes', function () {
-            mockManager.metadataLoadCompleted.and.returnValue(true);
-            keySelect = new KeySelect(mockConfig, mockObjectSelect, mockManager);
-            mockObjectSelect.triggerCallback('change', 'object2');
-            keySelect.setSelected('alpha');
-            expect(keySelect.getSelected()).toEqual('alpha');
-        });
-
-        it('clears its selected state on change if the field is not present in the new object', function () {
-            mockManager.metadataLoadCompleted.and.returnValue(true);
-            keySelect = new KeySelect(mockConfig, mockObjectSelect, mockManager);
-            mockObjectSelect.triggerCallback('change', 'object2');
-            expect(keySelect.getSelected()).toEqual('');
-        });
-
-        it('maintains its selected state on change if field is present in new object', function () {
-            mockManager.metadataLoadCompleted.and.returnValue(true);
-            keySelect = new KeySelect(mockConfig, mockObjectSelect, mockManager);
-            mockObjectSelect.triggerCallback('change', 'object3');
-            expect(keySelect.getSelected()).toEqual('a');
-        });
+import KeySelect from '../../src/input/KeySelect.js';
+
+describe('A select for choosing composition object properties', function () {
+  let mockConfig;
+  let mockBadConfig;
+  let mockManager;
+  let keySelect;
+  let mockMetadata;
+  let mockObjectSelect;
+  beforeEach(function () {
+    mockConfig = {
+      object: 'object1',
+      key: 'a'
+    };
+
+    mockBadConfig = {
+      object: 'object1',
+      key: 'someNonexistentKey'
+    };
+
+    mockMetadata = {
+      object1: {
+        a: {
+          name: 'A'
+        },
+        b: {
+          name: 'B'
+        }
+      },
+      object2: {
+        alpha: {
+          name: 'Alpha'
+        },
+        beta: {
+          name: 'Beta'
+        }
+      },
+      object3: {
+        a: {
+          name: 'A'
+        }
+      }
+    };
+
+    mockManager = jasmine.createSpyObj('mockManager', [
+      'on',
+      'metadataLoadCompleted',
+      'triggerCallback',
+      'getTelemetryMetadata'
+    ]);
+
+    mockObjectSelect = jasmine.createSpyObj('mockObjectSelect', ['on', 'triggerCallback']);
+
+    mockObjectSelect.on.and.callFake((event, callback) => {
+      mockObjectSelect.callbacks = mockObjectSelect.callbacks || {};
+      mockObjectSelect.callbacks[event] = callback;
     });
+
+    mockObjectSelect.triggerCallback.and.callFake((event, key) => {
+      mockObjectSelect.callbacks[event](key);
+    });
+
+    mockManager.on.and.callFake((event, callback) => {
+      mockManager.callbacks = mockManager.callbacks || {};
+      mockManager.callbacks[event] = callback;
+    });
+
+    mockManager.triggerCallback.and.callFake((event) => {
+      mockManager.callbacks[event]();
+    });
+
+    mockManager.getTelemetryMetadata.and.callFake(function (key) {
+      return mockMetadata[key];
+    });
+  });
+
+  it('waits until the metadata fully loads to populate itself', function () {
+    mockManager.metadataLoadCompleted.and.returnValue(false);
+    keySelect = new KeySelect(mockConfig, mockObjectSelect, mockManager);
+    expect(keySelect.getSelected()).toEqual('');
+  });
+
+  it('populates itself with metadata on a metadata load', function () {
+    mockManager.metadataLoadCompleted.and.returnValue(false);
+    keySelect = new KeySelect(mockConfig, mockObjectSelect, mockManager);
+    mockManager.triggerCallback('metadata');
+    expect(keySelect.getSelected()).toEqual('a');
+  });
+
+  it('populates itself with metadata if metadata load is already complete', function () {
+    mockManager.metadataLoadCompleted.and.returnValue(true);
+    keySelect = new KeySelect(mockConfig, mockObjectSelect, mockManager);
+    expect(keySelect.getSelected()).toEqual('a');
+  });
+
+  it('clears its selection state if the property in its config is not in its object', function () {
+    mockManager.metadataLoadCompleted.and.returnValue(true);
+    keySelect = new KeySelect(mockBadConfig, mockObjectSelect, mockManager);
+    expect(keySelect.getSelected()).toEqual('');
+  });
+
+  it('populates with the appropriate options when its linked object changes', function () {
+    mockManager.metadataLoadCompleted.and.returnValue(true);
+    keySelect = new KeySelect(mockConfig, mockObjectSelect, mockManager);
+    mockObjectSelect.triggerCallback('change', 'object2');
+    keySelect.setSelected('alpha');
+    expect(keySelect.getSelected()).toEqual('alpha');
+  });
+
+  it('clears its selected state on change if the field is not present in the new object', function () {
+    mockManager.metadataLoadCompleted.and.returnValue(true);
+    keySelect = new KeySelect(mockConfig, mockObjectSelect, mockManager);
+    mockObjectSelect.triggerCallback('change', 'object2');
+    expect(keySelect.getSelected()).toEqual('');
+  });
+
+  it('maintains its selected state on change if field is present in new object', function () {
+    mockManager.metadataLoadCompleted.and.returnValue(true);
+    keySelect = new KeySelect(mockConfig, mockObjectSelect, mockManager);
+    mockObjectSelect.triggerCallback('change', 'object3');
+    expect(keySelect.getSelected()).toEqual('a');
+  });
 });
diff --git a/src/plugins/summaryWidget/test/input/ObjectSelectSpec.js b/src/plugins/summaryWidget/test/input/ObjectSelectSpec.js
index 90d3c8c41ff..7961c8a5d6b 100644
--- a/src/plugins/summaryWidget/test/input/ObjectSelectSpec.js
+++ b/src/plugins/summaryWidget/test/input/ObjectSelectSpec.js
@@ -1,113 +1,134 @@
-define(['../../src/input/ObjectSelect'], function (ObjectSelect) {
-    describe('A select for choosing composition objects', function () {
-        let mockConfig;
-        let mockBadConfig;
-        let mockManager;
-        let objectSelect;
-        let mockComposition;
-        beforeEach(function () {
-            mockConfig = {
-                object: 'key1'
-            };
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
 
-            mockBadConfig = {
-                object: 'someNonexistentObject'
-            };
+import ObjectSelect from '../../src/input/ObjectSelect.js';
 
-            mockComposition = {
-                key1: {
-                    identifier: {
-                        key: 'key1'
-                    },
-                    name: 'Object 1'
-                },
-                key2: {
-                    identifier: {
-                        key: 'key2'
-                    },
-                    name: 'Object 2'
-                }
-            };
-            mockManager = jasmine.createSpyObj('mockManager', [
-                'on',
-                'loadCompleted',
-                'triggerCallback',
-                'getComposition'
-            ]);
+describe('A select for choosing composition objects', function () {
+  let mockConfig;
+  let mockBadConfig;
+  let mockManager;
+  let objectSelect;
+  let mockComposition;
+  beforeEach(function () {
+    mockConfig = {
+      object: 'key1'
+    };
 
-            mockManager.on.and.callFake((event, callback) => {
-                mockManager.callbacks = mockManager.callbacks || {};
-                mockManager.callbacks[event] = callback;
-            });
+    mockBadConfig = {
+      object: 'someNonexistentObject'
+    };
 
-            mockManager.triggerCallback.and.callFake((event, newObj) => {
-                if (event === 'add') {
-                    mockManager.callbacks.add(newObj);
-                } else {
-                    mockManager.callbacks[event]();
-                }
-            });
+    mockComposition = {
+      key1: {
+        identifier: {
+          key: 'key1'
+        },
+        name: 'Object 1'
+      },
+      key2: {
+        identifier: {
+          key: 'key2'
+        },
+        name: 'Object 2'
+      }
+    };
+    mockManager = jasmine.createSpyObj('mockManager', [
+      'on',
+      'loadCompleted',
+      'triggerCallback',
+      'getComposition'
+    ]);
 
-            mockManager.getComposition.and.callFake(function () {
-                return mockComposition;
-            });
+    mockManager.on.and.callFake((event, callback) => {
+      mockManager.callbacks = mockManager.callbacks || {};
+      mockManager.callbacks[event] = callback;
+    });
 
-        });
+    mockManager.triggerCallback.and.callFake((event, newObj) => {
+      if (event === 'add') {
+        mockManager.callbacks.add(newObj);
+      } else {
+        mockManager.callbacks[event]();
+      }
+    });
 
-        it('allows setting special keyword options', function () {
-            mockManager.loadCompleted.and.returnValue(true);
-            objectSelect = new ObjectSelect(mockConfig, mockManager, [
-                ['keyword1', 'A special option'],
-                ['keyword2', 'A special option']
-            ]);
-            objectSelect.setSelected('keyword1');
-            expect(objectSelect.getSelected()).toEqual('keyword1');
-        });
+    mockManager.getComposition.and.callFake(function () {
+      return mockComposition;
+    });
+  });
 
-        it('waits until the composition fully loads to populate itself', function () {
-            mockManager.loadCompleted.and.returnValue(false);
-            objectSelect = new ObjectSelect(mockConfig, mockManager);
-            expect(objectSelect.getSelected()).toEqual('');
-        });
+  it('allows setting special keyword options', function () {
+    mockManager.loadCompleted.and.returnValue(true);
+    objectSelect = new ObjectSelect(mockConfig, mockManager, [
+      ['keyword1', 'A special option'],
+      ['keyword2', 'A special option']
+    ]);
+    objectSelect.setSelected('keyword1');
+    expect(objectSelect.getSelected()).toEqual('keyword1');
+  });
 
-        it('populates itself with composition objects on a composition load', function () {
-            mockManager.loadCompleted.and.returnValue(false);
-            objectSelect = new ObjectSelect(mockConfig, mockManager);
-            mockManager.triggerCallback('load');
-            expect(objectSelect.getSelected()).toEqual('key1');
-        });
+  it('waits until the composition fully loads to populate itself', function () {
+    mockManager.loadCompleted.and.returnValue(false);
+    objectSelect = new ObjectSelect(mockConfig, mockManager);
+    expect(objectSelect.getSelected()).toEqual('');
+  });
 
-        it('populates itself with composition objects if load is already complete', function () {
-            mockManager.loadCompleted.and.returnValue(true);
-            objectSelect = new ObjectSelect(mockConfig, mockManager);
-            expect(objectSelect.getSelected()).toEqual('key1');
-        });
+  it('populates itself with composition objects on a composition load', function () {
+    mockManager.loadCompleted.and.returnValue(false);
+    objectSelect = new ObjectSelect(mockConfig, mockManager);
+    mockManager.triggerCallback('load');
+    expect(objectSelect.getSelected()).toEqual('key1');
+  });
 
-        it('clears its selection state if the object in its config is not in the composition', function () {
-            mockManager.loadCompleted.and.returnValue(true);
-            objectSelect = new ObjectSelect(mockBadConfig, mockManager);
-            expect(objectSelect.getSelected()).toEqual('');
-        });
+  it('populates itself with composition objects if load is already complete', function () {
+    mockManager.loadCompleted.and.returnValue(true);
+    objectSelect = new ObjectSelect(mockConfig, mockManager);
+    expect(objectSelect.getSelected()).toEqual('key1');
+  });
 
-        it('adds a new option on a composition add', function () {
-            mockManager.loadCompleted.and.returnValue(true);
-            objectSelect = new ObjectSelect(mockConfig, mockManager);
-            mockManager.triggerCallback('add', {
-                identifier: {
-                    key: 'key3'
-                },
-                name: 'Object 3'
-            });
-            objectSelect.setSelected('key3');
-            expect(objectSelect.getSelected()).toEqual('key3');
-        });
+  it('clears its selection state if the object in its config is not in the composition', function () {
+    mockManager.loadCompleted.and.returnValue(true);
+    objectSelect = new ObjectSelect(mockBadConfig, mockManager);
+    expect(objectSelect.getSelected()).toEqual('');
+  });
 
-        it('removes an option on a composition remove', function () {
-            mockManager.loadCompleted.and.returnValue(true);
-            objectSelect = new ObjectSelect(mockConfig, mockManager);
-            delete mockComposition.key1;
-            mockManager.triggerCallback('remove');
-            expect(objectSelect.getSelected()).not.toEqual('key1');
-        });
+  it('adds a new option on a composition add', function () {
+    mockManager.loadCompleted.and.returnValue(true);
+    objectSelect = new ObjectSelect(mockConfig, mockManager);
+    mockManager.triggerCallback('add', {
+      identifier: {
+        key: 'key3'
+      },
+      name: 'Object 3'
     });
+    objectSelect.setSelected('key3');
+    expect(objectSelect.getSelected()).toEqual('key3');
+  });
+
+  it('removes an option on a composition remove', function () {
+    mockManager.loadCompleted.and.returnValue(true);
+    objectSelect = new ObjectSelect(mockConfig, mockManager);
+    delete mockComposition.key1;
+    mockManager.triggerCallback('remove');
+    expect(objectSelect.getSelected()).not.toEqual('key1');
+  });
 });
diff --git a/src/plugins/summaryWidget/test/input/OperationSelectSpec.js b/src/plugins/summaryWidget/test/input/OperationSelectSpec.js
index 2f1a3c38faa..8703f7a7d6f 100644
--- a/src/plugins/summaryWidget/test/input/OperationSelectSpec.js
+++ b/src/plugins/summaryWidget/test/input/OperationSelectSpec.js
@@ -1,148 +1,165 @@
-define(['../../src/input/OperationSelect'], function (OperationSelect) {
-    describe('A select for choosing composition object properties', function () {
-        let mockConfig;
-        let mockBadConfig;
-        let mockManager;
-        let operationSelect;
-        let mockOperations;
-        let mockPropertyTypes;
-        let mockKeySelect;
-        let mockEvaluator;
-        beforeEach(function () {
-
-            mockConfig = {
-                object: 'object1',
-                key: 'a',
-                operation: 'operation1'
-            };
-
-            mockBadConfig = {
-                object: 'object1',
-                key: 'a',
-                operation: 'someNonexistentOperation'
-            };
-
-            mockOperations = {
-                operation1: {
-                    text: 'An operation',
-                    appliesTo: ['number']
-                },
-                operation2: {
-                    text: 'Another operation',
-                    appliesTo: ['string']
-                }
-            };
-
-            mockPropertyTypes = {
-                object1: {
-                    a: 'number',
-                    b: 'string',
-                    c: 'number'
-                }
-            };
-
-            mockManager = jasmine.createSpyObj('mockManager', [
-                'on',
-                'metadataLoadCompleted',
-                'triggerCallback',
-                'getTelemetryPropertyType',
-                'getEvaluator'
-
-            ]);
-
-            mockKeySelect = jasmine.createSpyObj('mockKeySelect', [
-                'on',
-                'triggerCallback'
-            ]);
-
-            mockEvaluator = jasmine.createSpyObj('mockEvaluator', [
-                'getOperationKeys',
-                'operationAppliesTo',
-                'getOperationText'
-            ]);
-
-            mockEvaluator.getOperationKeys.and.returnValue(Object.keys(mockOperations));
-
-            mockEvaluator.getOperationText.and.callFake(function (key) {
-                return mockOperations[key].text;
-            });
-
-            mockEvaluator.operationAppliesTo.and.callFake(function (operation, type) {
-                return (mockOperations[operation].appliesTo.includes(type));
-            });
-
-            mockKeySelect.on.and.callFake((event, callback) => {
-                mockKeySelect.callbacks = mockKeySelect.callbacks || {};
-                mockKeySelect.callbacks[event] = callback;
-            });
-
-            mockKeySelect.triggerCallback.and.callFake((event, key) => {
-                mockKeySelect.callbacks[event](key);
-            });
-
-            mockManager.on.and.callFake((event, callback) => {
-                mockManager.callbacks = mockManager.callbacks || {};
-                mockManager.callbacks[event] = callback;
-            });
-
-            mockManager.triggerCallback.and.callFake(event => {
-                mockManager.callbacks[event]();
-            });
-
-            mockManager.getTelemetryPropertyType.and.callFake(function (object, key) {
-                return mockPropertyTypes[object][key];
-            });
-
-            mockManager.getEvaluator.and.returnValue(mockEvaluator);
-        });
-
-        it('waits until the metadata fully loads to populate itself', function () {
-            mockManager.metadataLoadCompleted.and.returnValue(false);
-            operationSelect = new OperationSelect(mockConfig, mockKeySelect, mockManager);
-            expect(operationSelect.getSelected()).toEqual('');
-        });
-
-        it('populates itself with operations on a metadata load', function () {
-            mockManager.metadataLoadCompleted.and.returnValue(false);
-            operationSelect = new OperationSelect(mockConfig, mockKeySelect, mockManager);
-            mockManager.triggerCallback('metadata');
-            expect(operationSelect.getSelected()).toEqual('operation1');
-        });
-
-        it('populates itself with operations if metadata load is already complete', function () {
-            mockManager.metadataLoadCompleted.and.returnValue(true);
-            operationSelect = new OperationSelect(mockConfig, mockKeySelect, mockManager);
-            expect(operationSelect.getSelected()).toEqual('operation1');
-        });
-
-        it('clears its selection state if the operation in its config does not apply', function () {
-            mockManager.metadataLoadCompleted.and.returnValue(true);
-            operationSelect = new OperationSelect(mockBadConfig, mockKeySelect, mockManager);
-            expect(operationSelect.getSelected()).toEqual('');
-        });
-
-        it('populates with the appropriate options when its linked key changes', function () {
-            mockManager.metadataLoadCompleted.and.returnValue(true);
-            operationSelect = new OperationSelect(mockConfig, mockKeySelect, mockManager);
-            mockKeySelect.triggerCallback('change', 'b');
-            operationSelect.setSelected('operation2');
-            expect(operationSelect.getSelected()).toEqual('operation2');
-            operationSelect.setSelected('operation1');
-            expect(operationSelect.getSelected()).not.toEqual('operation1');
-        });
-
-        it('clears its selection on a change if the operation does not apply', function () {
-            mockManager.metadataLoadCompleted.and.returnValue(true);
-            operationSelect = new OperationSelect(mockConfig, mockKeySelect, mockManager);
-            mockKeySelect.triggerCallback('change', 'b');
-            expect(operationSelect.getSelected()).toEqual('');
-        });
-
-        it('maintains its selected state on change if the operation does apply', function () {
-            mockManager.metadataLoadCompleted.and.returnValue(true);
-            operationSelect = new OperationSelect(mockConfig, mockKeySelect, mockManager);
-            mockKeySelect.triggerCallback('change', 'c');
-            expect(operationSelect.getSelected()).toEqual('operation1');
-        });
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import OperationSelect from '../../src/input/OperationSelect.js';
+
+describe('A select for choosing composition object properties', function () {
+  let mockConfig;
+  let mockBadConfig;
+  let mockManager;
+  let operationSelect;
+  let mockOperations;
+  let mockPropertyTypes;
+  let mockKeySelect;
+  let mockEvaluator;
+  beforeEach(function () {
+    mockConfig = {
+      object: 'object1',
+      key: 'a',
+      operation: 'operation1'
+    };
+
+    mockBadConfig = {
+      object: 'object1',
+      key: 'a',
+      operation: 'someNonexistentOperation'
+    };
+
+    mockOperations = {
+      operation1: {
+        text: 'An operation',
+        appliesTo: ['number']
+      },
+      operation2: {
+        text: 'Another operation',
+        appliesTo: ['string']
+      }
+    };
+
+    mockPropertyTypes = {
+      object1: {
+        a: 'number',
+        b: 'string',
+        c: 'number'
+      }
+    };
+
+    mockManager = jasmine.createSpyObj('mockManager', [
+      'on',
+      'metadataLoadCompleted',
+      'triggerCallback',
+      'getTelemetryPropertyType',
+      'getEvaluator'
+    ]);
+
+    mockKeySelect = jasmine.createSpyObj('mockKeySelect', ['on', 'triggerCallback']);
+
+    mockEvaluator = jasmine.createSpyObj('mockEvaluator', [
+      'getOperationKeys',
+      'operationAppliesTo',
+      'getOperationText'
+    ]);
+
+    mockEvaluator.getOperationKeys.and.returnValue(Object.keys(mockOperations));
+
+    mockEvaluator.getOperationText.and.callFake(function (key) {
+      return mockOperations[key].text;
     });
+
+    mockEvaluator.operationAppliesTo.and.callFake(function (operation, type) {
+      return mockOperations[operation].appliesTo.includes(type);
+    });
+
+    mockKeySelect.on.and.callFake((event, callback) => {
+      mockKeySelect.callbacks = mockKeySelect.callbacks || {};
+      mockKeySelect.callbacks[event] = callback;
+    });
+
+    mockKeySelect.triggerCallback.and.callFake((event, key) => {
+      mockKeySelect.callbacks[event](key);
+    });
+
+    mockManager.on.and.callFake((event, callback) => {
+      mockManager.callbacks = mockManager.callbacks || {};
+      mockManager.callbacks[event] = callback;
+    });
+
+    mockManager.triggerCallback.and.callFake((event) => {
+      mockManager.callbacks[event]();
+    });
+
+    mockManager.getTelemetryPropertyType.and.callFake(function (object, key) {
+      return mockPropertyTypes[object][key];
+    });
+
+    mockManager.getEvaluator.and.returnValue(mockEvaluator);
+  });
+
+  it('waits until the metadata fully loads to populate itself', function () {
+    mockManager.metadataLoadCompleted.and.returnValue(false);
+    operationSelect = new OperationSelect(mockConfig, mockKeySelect, mockManager);
+    expect(operationSelect.getSelected()).toEqual('');
+  });
+
+  it('populates itself with operations on a metadata load', function () {
+    mockManager.metadataLoadCompleted.and.returnValue(false);
+    operationSelect = new OperationSelect(mockConfig, mockKeySelect, mockManager);
+    mockManager.triggerCallback('metadata');
+    expect(operationSelect.getSelected()).toEqual('operation1');
+  });
+
+  it('populates itself with operations if metadata load is already complete', function () {
+    mockManager.metadataLoadCompleted.and.returnValue(true);
+    operationSelect = new OperationSelect(mockConfig, mockKeySelect, mockManager);
+    expect(operationSelect.getSelected()).toEqual('operation1');
+  });
+
+  it('clears its selection state if the operation in its config does not apply', function () {
+    mockManager.metadataLoadCompleted.and.returnValue(true);
+    operationSelect = new OperationSelect(mockBadConfig, mockKeySelect, mockManager);
+    expect(operationSelect.getSelected()).toEqual('');
+  });
+
+  it('populates with the appropriate options when its linked key changes', function () {
+    mockManager.metadataLoadCompleted.and.returnValue(true);
+    operationSelect = new OperationSelect(mockConfig, mockKeySelect, mockManager);
+    mockKeySelect.triggerCallback('change', 'b');
+    operationSelect.setSelected('operation2');
+    expect(operationSelect.getSelected()).toEqual('operation2');
+    operationSelect.setSelected('operation1');
+    expect(operationSelect.getSelected()).not.toEqual('operation1');
+  });
+
+  it('clears its selection on a change if the operation does not apply', function () {
+    mockManager.metadataLoadCompleted.and.returnValue(true);
+    operationSelect = new OperationSelect(mockConfig, mockKeySelect, mockManager);
+    mockKeySelect.triggerCallback('change', 'b');
+    expect(operationSelect.getSelected()).toEqual('');
+  });
+
+  it('maintains its selected state on change if the operation does apply', function () {
+    mockManager.metadataLoadCompleted.and.returnValue(true);
+    operationSelect = new OperationSelect(mockConfig, mockKeySelect, mockManager);
+    mockKeySelect.triggerCallback('change', 'c');
+    expect(operationSelect.getSelected()).toEqual('operation1');
+  });
 });
diff --git a/src/plugins/summaryWidget/test/input/PaletteSpec.js b/src/plugins/summaryWidget/test/input/PaletteSpec.js
index 25f6819f956..2b3a98da7dd 100644
--- a/src/plugins/summaryWidget/test/input/PaletteSpec.js
+++ b/src/plugins/summaryWidget/test/input/PaletteSpec.js
@@ -1,44 +1,44 @@
-define(['../../src/input/Palette'], function (Palette) {
-    describe('A generic Open MCT palette input', function () {
-        let palette;
-        let callbackSpy1;
-        let callbackSpy2;
+import Palette from '../../src/input/Palette.js';
 
-        beforeEach(function () {
-            palette = new Palette('someClass', 'someContainer', ['item1', 'item2', 'item3']);
-            callbackSpy1 = jasmine.createSpy('changeCallback1');
-            callbackSpy2 = jasmine.createSpy('changeCallback2');
-        });
+describe('A generic Open MCT palette input', function () {
+  let palette;
+  let callbackSpy1;
+  let callbackSpy2;
 
-        it('gets the current item', function () {
-            expect(palette.getCurrent()).toEqual('item1');
-        });
+  beforeEach(function () {
+    palette = new Palette('someClass', 'someContainer', ['item1', 'item2', 'item3']);
+    callbackSpy1 = jasmine.createSpy('changeCallback1');
+    callbackSpy2 = jasmine.createSpy('changeCallback2');
+  });
 
-        it('allows setting the current item', function () {
-            palette.set('item2');
-            expect(palette.getCurrent()).toEqual('item2');
-        });
+  it('gets the current item', function () {
+    expect(palette.getCurrent()).toEqual('item1');
+  });
 
-        it('allows registering change callbacks, and errors when an unsupported event is registered', function () {
-            expect(function () {
-                palette.on('change', callbackSpy1);
-            }).not.toThrow();
-            expect(function () {
-                palette.on('someUnsupportedEvent', callbackSpy1);
-            }).toThrow();
-        });
+  it('allows setting the current item', function () {
+    palette.set('item2');
+    expect(palette.getCurrent()).toEqual('item2');
+  });
 
-        it('injects its callbacks with the new selected item on change', function () {
-            palette.on('change', callbackSpy1);
-            palette.on('change', callbackSpy2);
-            palette.set('item2');
-            expect(callbackSpy1).toHaveBeenCalledWith('item2');
-            expect(callbackSpy2).toHaveBeenCalledWith('item2');
-        });
+  it('allows registering change callbacks, and errors when an unsupported event is registered', function () {
+    expect(function () {
+      palette.on('change', callbackSpy1);
+    }).not.toThrow();
+    expect(function () {
+      palette.on('someUnsupportedEvent', callbackSpy1);
+    }).toThrow();
+  });
 
-        it('gracefully handles being set to an item not included in its set', function () {
-            palette.set('foobar');
-            expect(palette.getCurrent()).not.toEqual('foobar');
-        });
-    });
+  it('injects its callbacks with the new selected item on change', function () {
+    palette.on('change', callbackSpy1);
+    palette.on('change', callbackSpy2);
+    palette.set('item2');
+    expect(callbackSpy1).toHaveBeenCalledWith('item2');
+    expect(callbackSpy2).toHaveBeenCalledWith('item2');
+  });
+
+  it('gracefully handles being set to an item not included in its set', function () {
+    palette.set('foobar');
+    expect(palette.getCurrent()).not.toEqual('foobar');
+  });
 });
diff --git a/src/plugins/summaryWidget/test/input/SelectSpec.js b/src/plugins/summaryWidget/test/input/SelectSpec.js
index bd895507fac..ce9ad2e96dd 100644
--- a/src/plugins/summaryWidget/test/input/SelectSpec.js
+++ b/src/plugins/summaryWidget/test/input/SelectSpec.js
@@ -1,54 +1,61 @@
-define(['../../src/input/Select'], function (Select) {
-    describe('A select wrapper', function () {
-        let select;
-        let testOptions;
-        let callbackSpy1;
-        let callbackSpy2;
-        beforeEach(function () {
-            select = new Select();
-            testOptions = [['item1', 'Item 1'], ['item2', 'Item 2'], ['item3', 'Item 3']];
-            select.setOptions(testOptions);
-            callbackSpy1 = jasmine.createSpy('callbackSpy1');
-            callbackSpy2 = jasmine.createSpy('callbackSpy2');
-        });
+import Select from '../../src/input/Select.js';
 
-        it('gets and sets the current item', function () {
-            select.setSelected('item1');
-            expect(select.getSelected()).toEqual('item1');
-        });
+describe('A select wrapper', function () {
+  let select;
+  let testOptions;
+  let callbackSpy1;
+  let callbackSpy2;
+  beforeEach(function () {
+    select = new Select();
+    testOptions = [
+      ['item1', 'Item 1'],
+      ['item2', 'Item 2'],
+      ['item3', 'Item 3']
+    ];
+    select.setOptions(testOptions);
+    callbackSpy1 = jasmine.createSpy('callbackSpy1');
+    callbackSpy2 = jasmine.createSpy('callbackSpy2');
+  });
 
-        it('allows adding a single new option', function () {
-            select.addOption('newOption', 'A New Option');
-            select.setSelected('newOption');
-            expect(select.getSelected()).toEqual('newOption');
-        });
+  it('gets and sets the current item', function () {
+    select.setSelected('item1');
+    expect(select.getSelected()).toEqual('item1');
+  });
 
-        it('allows populating with a new set of options', function () {
-            select.setOptions([['newItem1', 'Item 1'], ['newItem2', 'Item 2']]);
-            select.setSelected('newItem1');
-            expect(select.getSelected()).toEqual('newItem1');
-        });
+  it('allows adding a single new option', function () {
+    select.addOption('newOption', 'A New Option');
+    select.setSelected('newOption');
+    expect(select.getSelected()).toEqual('newOption');
+  });
 
-        it('allows registering change callbacks, and errors when an unsupported event is registered', function () {
-            expect(function () {
-                select.on('change', callbackSpy1);
-            }).not.toThrow();
-            expect(function () {
-                select.on('someUnsupportedEvent', callbackSpy1);
-            }).toThrow();
-        });
+  it('allows populating with a new set of options', function () {
+    select.setOptions([
+      ['newItem1', 'Item 1'],
+      ['newItem2', 'Item 2']
+    ]);
+    select.setSelected('newItem1');
+    expect(select.getSelected()).toEqual('newItem1');
+  });
 
-        it('injects its callbacks with its property and value on a change', function () {
-            select.on('change', callbackSpy1);
-            select.on('change', callbackSpy2);
-            select.setSelected('item2');
-            expect(callbackSpy1).toHaveBeenCalledWith('item2');
-            expect(callbackSpy2).toHaveBeenCalledWith('item2');
-        });
+  it('allows registering change callbacks, and errors when an unsupported event is registered', function () {
+    expect(function () {
+      select.on('change', callbackSpy1);
+    }).not.toThrow();
+    expect(function () {
+      select.on('someUnsupportedEvent', callbackSpy1);
+    }).toThrow();
+  });
 
-        it('gracefully handles being set to an item not included in its set', function () {
-            select.setSelected('foobar');
-            expect(select.getSelected()).not.toEqual('foobar');
-        });
-    });
+  it('injects its callbacks with its property and value on a change', function () {
+    select.on('change', callbackSpy1);
+    select.on('change', callbackSpy2);
+    select.setSelected('item2');
+    expect(callbackSpy1).toHaveBeenCalledWith('item2');
+    expect(callbackSpy2).toHaveBeenCalledWith('item2');
+  });
+
+  it('gracefully handles being set to an item not included in its set', function () {
+    select.setSelected('foobar');
+    expect(select.getSelected()).not.toEqual('foobar');
+  });
 });
diff --git a/src/plugins/tabs/components/TabsComponent.vue b/src/plugins/tabs/components/TabsComponent.vue
new file mode 100644
index 00000000000..ab926b266a4
--- /dev/null
+++ b/src/plugins/tabs/components/TabsComponent.vue
@@ -0,0 +1,414 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div ref="tabs" class="c-tabs-view">
+    <div
+      ref="tabsHolder"
+      role="tablist"
+      class="c-tabs-view__tabs-holder c-tabs"
+      :class="{
+        'is-dragging': isDragging && allowEditing,
+        'is-mouse-over': allowDrop
+      }"
+    >
+      <div class="c-drop-hint" @drop="onDrop" @dragenter="dragenter" @dragleave="dragleave"></div>
+      <div v-if="!tabsList.length > 0" class="c-tabs-view__empty-message">
+        Drag objects here to add them to this view.
+      </div>
+      <div
+        v-for="(tab, index) in tabsList"
+        :ref="tab.keyString"
+        :key="tab.keyString"
+        :aria-label="`${tab.domainObject.name} tab`"
+        class="c-tab c-tabs-view__tab js-tab"
+        role="tab"
+        :class="{
+          'is-current': isCurrent(tab)
+        }"
+        @click="showTab(tab, index)"
+        @mouseover.ctrl="showToolTip(tab)"
+        @mouseleave="hideToolTip"
+      >
+        <div
+          ref="tabsLabel"
+          class="c-tabs-view__tab__label c-object-label"
+          :class="[tab.status ? `is-status--${tab.status}` : '']"
+        >
+          <div class="c-object-label__type-icon" :class="tab.type.definition.cssClass">
+            <span
+              class="is-status__indicator"
+              :aria-label="`This item is ${tab.status}`"
+              :title="`This item is ${tab.status}`"
+            ></span>
+          </div>
+          <span class="c-button__label c-object-label__name">{{ tab.domainObject.name }}</span>
+        </div>
+        <button
+          v-if="isEditing"
+          class="icon-x c-click-icon c-tabs-view__tab__close-btn"
+          @click="showRemoveDialog(index)"
+        ></button>
+      </div>
+    </div>
+    <div
+      v-for="tab in tabsList"
+      :key="tab.keyString"
+      :style="getTabStyles(tab)"
+      class="c-tabs-view__object-holder"
+      :class="{ 'c-tabs-view__object-holder--hidden': !isCurrent(tab) }"
+    >
+      <object-view
+        v-if="shouldLoadTab(tab)"
+        class="c-tabs-view__object"
+        :default-object="tab.domainObject"
+        :object-path="tab.objectPath"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+
+import tooltipHelpers from '../../../api/tooltips/tooltipMixins.js';
+import ObjectView from '../../../ui/components/ObjectView.vue';
+import RemoveAction from '../../remove/RemoveAction.js';
+
+const unknownObjectType = {
+  definition: {
+    cssClass: 'icon-object-unknown',
+    name: 'Unknown Type'
+  }
+};
+
+export default {
+  components: {
+    ObjectView
+  },
+  mixins: [tooltipHelpers],
+  inject: ['openmct', 'domainObject', 'composition', 'objectPath'],
+  props: {
+    isEditing: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data: function () {
+    let keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+
+    return {
+      tabWidth: undefined,
+      tabHeight: undefined,
+      internalDomainObject: this.domainObject,
+      currentTab: {},
+      currentTabIndex: undefined,
+      tabsList: [],
+      setCurrentTab: false,
+      isDragging: false,
+      allowDrop: false,
+      searchTabKey: `tabs.pos.${keyString}`,
+      loadedTabs: {}
+    };
+  },
+  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((tabObjects) => {
+        let currentTabIndexFromURL = this.openmct.router.getSearchParam(this.searchTabKey);
+        let currentTabIndexFromDomainObject = this.internalDomainObject.currentTabIndex;
+
+        if (currentTabIndexFromURL !== null) {
+          this.setCurrentTabByIndex(currentTabIndexFromURL);
+        } else if (currentTabIndexFromDomainObject !== undefined) {
+          this.setCurrentTabByIndex(currentTabIndexFromDomainObject);
+          this.storeCurrentTabIndexInURL(currentTabIndexFromDomainObject);
+        } else if (tabObjects?.length) {
+          this.setCurrentTabByIndex(0);
+          this.storeCurrentTabIndexInURL(0);
+        } else {
+          this.setCurrentTab = true;
+        }
+      });
+    }
+
+    this.handleWindowResize = _.debounce(this.handleWindowResize, 500);
+    this.tabsViewResizeObserver = new ResizeObserver(this.handleWindowResize);
+    this.tabsViewResizeObserver.observe(this.$refs.tabs);
+
+    this.unsubscribe = this.openmct.objects.observe(
+      this.internalDomainObject,
+      '*',
+      this.updateInternalDomainObject
+    );
+
+    this.updateCurrentTab = this.updateCurrentTab.bind(this);
+    this.openmct.router.on('change:params', this.updateCurrentTab);
+
+    this.RemoveAction = new RemoveAction(this.openmct);
+    document.addEventListener('dragstart', this.dragstart);
+    document.addEventListener('dragend', this.dragend);
+  },
+  beforeUnmount() {
+    this.persistCurrentTabIndex(this.currentTabIndex);
+  },
+  unmounted() {
+    this.composition.off('add', this.addItem);
+    this.composition.off('remove', this.removeItem);
+    this.composition.off('reorder', this.onReorder);
+
+    this.tabsViewResizeObserver.disconnect();
+
+    this.tabsList.forEach((tab) => {
+      tab.statusUnsubscribe();
+    });
+
+    this.unsubscribe();
+    this.clearCurrentTabIndexFromURL();
+
+    this.openmct.router.off('change:params', this.updateCurrentTab);
+
+    document.removeEventListener('dragstart', this.dragstart);
+    document.removeEventListener('dragend', this.dragend);
+  },
+  methods: {
+    addTabToLoaded(tab) {
+      if (!this.internalDomainObject.keep_alive) {
+        this.loadedTabs = {};
+      }
+
+      this.loadedTabs[tab.keyString] = true;
+    },
+    getTabStyles(tab) {
+      let styles = {};
+
+      if (!this.isCurrent(tab)) {
+        styles = {
+          height: this.tabHeight,
+          width: this.tabWidth
+        };
+      }
+
+      return styles;
+    },
+    setCurrentTabByIndex(index) {
+      if (this.tabsList[index]) {
+        this.showTab(this.tabsList[index]);
+      }
+    },
+    showTab(tab, index) {
+      if (!tab) {
+        return;
+      }
+
+      if (index !== undefined) {
+        this.storeCurrentTabIndexInURL(index);
+      }
+
+      this.currentTab = tab;
+      this.setCurrentTab = false;
+      this.addTabToLoaded(tab);
+    },
+    shouldLoadTab(tab) {
+      const isLoaded = this.isTabLoaded(tab);
+      const isCurrent = this.isCurrent(tab);
+      const tabElLoaded = this.tabWidth !== undefined && this.tabHeight !== undefined;
+
+      return (isLoaded && isCurrent) || (isLoaded && !isCurrent && tabElLoaded);
+    },
+    showRemoveDialog(index) {
+      if (!this.tabsList[index]) {
+        return;
+      }
+
+      let activeTab = this.tabsList[index];
+      let childDomainObject = activeTab.domainObject;
+
+      let prompt = this.openmct.overlays.dialog({
+        iconClass: 'alert',
+        message: `This action will remove this tab from the Tabs Layout. Do you want to continue?`,
+        buttons: [
+          {
+            label: 'OK',
+            emphasis: 'true',
+            callback: () => {
+              this.composition.remove(childDomainObject);
+              prompt.dismiss();
+            }
+          },
+          {
+            label: 'Cancel',
+            callback: () => {
+              prompt.dismiss();
+            }
+          }
+        ]
+      });
+    },
+    addItem(domainObject) {
+      let type = this.openmct.types.get(domainObject.type) || unknownObjectType;
+      let keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
+      let status = this.openmct.status.get(domainObject.identifier);
+      let statusUnsubscribe = this.openmct.status.observe(keyString, (updatedStatus) => {
+        this.updateStatus(keyString, updatedStatus);
+      });
+      let objectPath = [domainObject].concat(this.objectPath.slice());
+      let tabItem = {
+        domainObject,
+        status,
+        statusUnsubscribe,
+        objectPath,
+        type,
+        keyString
+      };
+
+      this.tabsList.push(tabItem);
+
+      if (this.setCurrentTab) {
+        this.showTab(tabItem);
+      }
+    },
+    reset() {
+      this.currentTab = {};
+      this.currentTabIndex = undefined;
+      this.setCurrentTab = true;
+    },
+    removeItem(identifier) {
+      let keyStringToBeRemoved = this.openmct.objects.makeKeyString(identifier);
+
+      let pos = this.tabsList.findIndex((tab) => {
+        return tab.keyString === keyStringToBeRemoved;
+      });
+
+      let tabToBeRemoved = this.tabsList[pos];
+
+      tabToBeRemoved.statusUnsubscribe();
+
+      this.tabsList.splice(pos, 1);
+
+      this.loadedTabs[keyStringToBeRemoved] = undefined;
+      delete this.loadedTabs[keyStringToBeRemoved];
+
+      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();
+
+      reorderPlan.forEach((reorderEvent) => {
+        this.tabsList[reorderEvent.newIndex] = oldTabs[reorderEvent.oldIndex];
+      });
+    },
+    onDrop(e) {
+      this.storeCurrentTabIndexInURL(this.tabsList.length);
+    },
+    dragstart(e) {
+      if (e.dataTransfer.types.includes('openmct/domain-object-path')) {
+        this.isDragging = true;
+      }
+    },
+    dragend(e) {
+      this.isDragging = false;
+      this.allowDrop = false;
+    },
+    dragenter() {
+      this.allowDrop = true;
+    },
+    dragleave() {
+      this.allowDrop = false;
+    },
+    isCurrent(tab) {
+      return this.currentTab.keyString === tab.keyString;
+    },
+    updateInternalDomainObject(domainObject) {
+      this.internalDomainObject = domainObject;
+    },
+    persistCurrentTabIndex(index) {
+      this.openmct.objects.mutate(this.internalDomainObject, 'currentTabIndex', index);
+    },
+    storeCurrentTabIndexInURL(index) {
+      let currentTabIndexInURL = this.openmct.router.getSearchParam(this.searchTabKey);
+
+      if (index !== currentTabIndexInURL) {
+        this.openmct.router.setSearchParam(this.searchTabKey, index);
+        this.currentTabIndex = index;
+      }
+    },
+    clearCurrentTabIndexFromURL() {
+      this.openmct.router.deleteSearchParam(this.searchTabKey);
+    },
+    updateStatus(keyString, status) {
+      let tabPos = this.tabsList.findIndex((tab) => {
+        return tab.keyString === keyString;
+      });
+      let tab = this.tabsList[tabPos];
+
+      tab.status = status;
+    },
+    isTabLoaded(tab) {
+      if (this.internalDomainObject.keep_alive) {
+        return true;
+      } else {
+        return this.loadedTabs[tab.keyString];
+      }
+    },
+    updateCurrentTab(newParams, oldParams, changedParams) {
+      const tabIndex = changedParams[this.searchTabKey];
+      if (!tabIndex) {
+        return;
+      }
+
+      if (this.currentTabIndex === parseInt(tabIndex, 10)) {
+        return;
+      }
+
+      this.currentTabIndex = tabIndex;
+      this.showTab(this.tabsList[tabIndex]);
+    },
+    handleWindowResize() {
+      if (!this.$refs.tabs || !this.$refs.tabsHolder) {
+        return;
+      }
+
+      this.tabWidth = this.$refs.tabs.offsetWidth + 'px';
+      this.tabHeight = this.$refs.tabsHolder.offsetHeight - this.$refs.tabs.offsetHeight + 'px';
+    },
+    async showToolTip(tab) {
+      const identifier = tab.domainObject.identifier;
+      const { BELOW } = this.openmct.tooltips.TOOLTIP_LOCATIONS;
+      this.buildToolTip(await this.getObjectPath(identifier), BELOW, tab.keyString);
+    }
+  }
+};
+</script>
diff --git a/src/plugins/tabs/components/tabs.scss b/src/plugins/tabs/components/tabs.scss
index d50a812fd95..1f1cb3d6b0c 100644
--- a/src/plugins/tabs/components/tabs.scss
+++ b/src/plugins/tabs/components/tabs.scss
@@ -1,62 +1,60 @@
 .c-tabs-view {
-    $h: 20px;
-    @include abs();
-    display: flex;
-    flex-flow: column nowrap;
+  $h: 20px;
+  @include abs();
+  display: flex;
+  flex-flow: column nowrap;
 
-    > * + * {
-        margin-top: $interiorMargin;
-    }
+  > * + * {
+    margin-top: $interiorMargin;
+  }
 
-    &__tabs-holder {
-        min-height: $h;
-    }
-
-    &__tab {
-        justify-content: space-between; // Places remove button to far side of tab
+  &__tabs-holder {
+    min-height: $h;
+  }
 
-        &__close-btn {
-            flex: 0 0 auto;
-            pointer-events: all;
-        }
+  &__tab {
+    justify-content: space-between; // Places remove button to far side of tab
 
-        > * + * {
-            margin-left: $interiorMargin;
-        }
+    &__close-btn {
+      flex: 0 0 auto;
+      pointer-events: all;
     }
 
-    &__object-holder {
-        flex: 1 1 auto;
-        display: flex;
-        flex-direction: column;
-
-        &--hidden {
-            height: 1000px;
-            width: 1000px;
-            position: absolute;
-            left: -9999px;
-            top: -9999px;
-        }
+    > * + * {
+      margin-left: $interiorMargin;
     }
+  }
 
-    &__object-name {
-        font-size: 1em;
-        margin: $interiorMargin 0 $interiorMarginLg 0;
-    }
+  &__object-holder {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
 
-    &__object {
-        display: flex;
-        flex-flow: column nowrap;
-        flex: 1 1 auto;
-        height: 0; // Chrome 73 oveflow bug fix
+    &--hidden {
+      position: absolute;
+      left: -9999px;
+      top: -9999px;
     }
+  }
 
-    &__empty-message {
-        background: rgba($colorBodyFg, 0.1);
-        color: rgba($colorBodyFg, 0.7);
-        font-style: italic;
-        text-align: center;
-        line-height: $h;
-        width: 100%;
-    }
+  &__object-name {
+    font-size: 1em;
+    margin: $interiorMargin 0 $interiorMarginLg 0;
+  }
+
+  &__object {
+    display: flex;
+    flex-flow: column nowrap;
+    flex: 1 1 auto;
+    height: 0; // Chrome 73 overflow bug fix
+  }
+
+  &__empty-message {
+    background: rgba($colorBodyFg, 0.1);
+    color: rgba($colorBodyFg, 0.7);
+    font-style: italic;
+    text-align: center;
+    line-height: $h;
+    width: 100%;
+  }
 }
diff --git a/src/plugins/tabs/components/tabs.vue b/src/plugins/tabs/components/tabs.vue
deleted file mode 100644
index 415a5a7f353..00000000000
--- a/src/plugins/tabs/components/tabs.vue
+++ /dev/null
@@ -1,327 +0,0 @@
-<template>
-<div class="c-tabs-view">
-    <div
-        class="c-tabs-view__tabs-holder c-tabs"
-        :class="{
-            'is-dragging': isDragging && allowEditing,
-            'is-mouse-over': allowDrop
-        }"
-    >
-        <div
-            class="c-drop-hint"
-            @drop="onDrop"
-            @dragenter="dragenter"
-            @dragleave="dragleave"
-        ></div>
-        <div
-            v-if="!tabsList.length > 0"
-            class="c-tabs-view__empty-message"
-        >
-            Drag objects here to add them to this view.
-        </div>
-        <div
-            v-for="(tab, index) in tabsList"
-            :key="tab.keyString"
-            class="c-tab c-tabs-view__tab js-tab"
-            :class="{
-                'is-current': isCurrent(tab)
-            }"
-            @click="showTab(tab, index)"
-        >
-            <div class="c-tabs-view__tab__label c-object-label"
-                 :class="[tab.status ? `is-status--${tab.status}` : '']"
-            >
-                <div class="c-object-label__type-icon"
-                     :class="tab.type.definition.cssClass"
-                >
-                    <span class="is-status__indicator"
-                          :title="`This item is ${tab.status}`"
-                    ></span>
-                </div>
-                <span class="c-button__label c-object-label__name">{{ tab.domainObject.name }}</span>
-            </div>
-            <button v-if="isEditing"
-                    class="icon-x c-click-icon c-tabs-view__tab__close-btn"
-                    @click="showRemoveDialog(index)"
-            ></button>
-        </div>
-    </div>
-    <div
-        v-for="tab in tabsList"
-        :key="tab.keyString"
-        class="c-tabs-view__object-holder"
-        :class="{'c-tabs-view__object-holder--hidden': !isCurrent(tab)}"
-    >
-        <object-view
-            v-if="isTabLoaded(tab)"
-            class="c-tabs-view__object"
-            :default-object="tab.domainObject"
-            :object-path="tab.objectPath"
-        />
-    </div>
-</div>
-</template>
-
-<script>
-import ObjectView from '../../../ui/components/ObjectView.vue';
-import RemoveAction from '../../remove/RemoveAction.js';
-
-const unknownObjectType = {
-    definition: {
-        cssClass: 'icon-object-unknown',
-        name: 'Unknown Type'
-    }
-};
-
-export default {
-    components: {
-        ObjectView
-    },
-    inject: ['openmct', 'domainObject', 'composition', 'objectPath'],
-    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,
-            searchTabKey: `tabs.pos.${keyString}`,
-            loadedTabs: {}
-        };
-    },
-    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 currentTabIndexFromURL = this.openmct.router.getSearchParam(this.searchTabKey);
-                let currentTabIndexFromDomainObject = this.internalDomainObject.currentTabIndex;
-
-                if (currentTabIndexFromURL !== null) {
-                    this.setCurrentTabByIndex(currentTabIndexFromURL);
-                } else if (currentTabIndexFromDomainObject !== undefined) {
-                    this.setCurrentTabByIndex(currentTabIndexFromDomainObject);
-                    this.storeCurrentTabIndexInURL(currentTabIndexFromDomainObject);
-                }
-            });
-        }
-
-        this.unsubscribe = this.openmct.objects.observe(this.internalDomainObject, '*', this.updateInternalDomainObject);
-
-        this.openmct.router.on('change:params', this.updateCurrentTab.bind(this));
-
-        this.RemoveAction = new RemoveAction(this.openmct);
-        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.tabsList.forEach(tab => {
-            tab.statusUnsubscribe();
-        });
-
-        this.unsubscribe();
-        this.clearCurrentTabIndexFromURL();
-
-        this.openmct.router.off('change:params', this.updateCurrentTab.bind(this));
-
-        document.removeEventListener('dragstart', this.dragstart);
-        document.removeEventListener('dragend', this.dragend);
-    },
-    methods: {
-        addTabToLoaded(tab) {
-            this.loadedTabs[tab.keyString] = true;
-        },
-        setCurrentTabByIndex(index) {
-            if (this.tabsList[index]) {
-                this.showTab(this.tabsList[index]);
-            }
-        },
-        showTab(tab, index) {
-            if (index !== undefined) {
-                this.storeCurrentTabIndexInURL(index);
-            }
-
-            this.currentTab = tab;
-            this.addTabToLoaded(tab);
-        },
-        showRemoveDialog(index) {
-            if (!this.tabsList[index]) {
-                return;
-            }
-
-            let activeTab = this.tabsList[index];
-            let childDomainObject = activeTab.domainObject;
-
-            let prompt = this.openmct.overlays.dialog({
-                iconClass: 'alert',
-                message: `This action will remove this tab from the Tabs Layout. Do you want to continue?`,
-                buttons: [
-                    {
-                        label: 'OK',
-                        emphasis: 'true',
-                        callback: () => {
-                            this.composition.remove(childDomainObject);
-                            prompt.dismiss();
-                        }
-                    },
-                    {
-                        label: 'Cancel',
-                        callback: () => {
-                            prompt.dismiss();
-                        }
-                    }
-                ]
-            });
-        },
-        addItem(domainObject) {
-            let type = this.openmct.types.get(domainObject.type) || unknownObjectType;
-            let keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
-            let status = this.openmct.status.get(domainObject.identifier);
-            let statusUnsubscribe = this.openmct.status.observe(keyString, (updatedStatus) => {
-                this.updateStatus(keyString, updatedStatus);
-            });
-            let objectPath = [domainObject].concat(this.objectPath.slice());
-            let tabItem = {
-                domainObject,
-                status,
-                statusUnsubscribe,
-                objectPath,
-                type,
-                keyString
-            };
-
-            this.tabsList.push(tabItem);
-
-            if (this.setCurrentTab) {
-                this.showTab(tabItem);
-                this.setCurrentTab = false;
-            }
-        },
-        reset() {
-            this.currentTab = {};
-            this.setCurrentTab = true;
-        },
-        removeItem(identifier) {
-            let keyStringToBeRemoved = this.openmct.objects.makeKeyString(identifier);
-
-            let pos = this.tabsList.findIndex(tab => {
-                return tab.keyString === keyStringToBeRemoved;
-            });
-
-            let tabToBeRemoved = this.tabsList[pos];
-
-            tabToBeRemoved.statusUnsubscribe();
-
-            this.tabsList.splice(pos, 1);
-
-            this.loadedTabs[keyStringToBeRemoved] = undefined;
-            delete this.loadedTabs[keyStringToBeRemoved];
-
-            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();
-
-            reorderPlan.forEach(reorderEvent => {
-                this.$set(this.tabsList, reorderEvent.newIndex, oldTabs[reorderEvent.oldIndex]);
-            });
-        },
-        onDrop(e) {
-            this.setCurrentTab = true;
-            this.storeCurrentTabIndexInURL(this.tabsList.length);
-        },
-        dragstart(e) {
-            if (e.dataTransfer.types.includes('openmct/domain-object-path')) {
-                this.isDragging = true;
-            }
-        },
-        dragend(e) {
-            this.isDragging = false;
-            this.allowDrop = false;
-        },
-        dragenter() {
-            this.allowDrop = true;
-        },
-        dragleave() {
-            this.allowDrop = false;
-        },
-        isCurrent(tab) {
-            return this.currentTab.keyString === tab.keyString;
-        },
-        updateInternalDomainObject(domainObject) {
-            this.internalDomainObject = domainObject;
-        },
-        persistCurrentTabIndex(index) {
-            this.openmct.objects.mutate(this.internalDomainObject, 'currentTabIndex', index);
-        },
-        storeCurrentTabIndexInURL(index) {
-            let currentTabIndexInURL = this.openmct.router.getSearchParam(this.searchTabKey);
-
-            if (index !== currentTabIndexInURL) {
-                this.openmct.router.setSearchParam(this.searchTabKey, index);
-                this.currentTabIndex = index;
-            }
-        },
-        clearCurrentTabIndexFromURL() {
-            this.openmct.router.deleteSearchParam(this.searchTabKey);
-        },
-        updateStatus(keyString, status) {
-            let tabPos = this.tabsList.findIndex((tab) => {
-                return tab.keyString === keyString;
-            });
-            let tab = this.tabsList[tabPos];
-
-            this.$set(tab, 'status', status);
-        },
-        isTabLoaded(tab) {
-            if (this.internalDomainObject.keep_alive) {
-                return true;
-            } else {
-                return this.loadedTabs[tab.keyString];
-            }
-        },
-        updateCurrentTab(newParams, oldParams, changedParams) {
-            const tabIndex = changedParams[this.searchTabKey];
-            if (!tabIndex) {
-                return;
-            }
-
-            if (this.currentTabIndex === parseInt(tabIndex, 10)) {
-                return;
-            }
-
-            this.currentTabIndex = tabIndex;
-            this.currentTab = this.tabsList[tabIndex];
-        }
-    }
-};
-</script>
diff --git a/src/plugins/tabs/plugin.js b/src/plugins/tabs/plugin.js
index 56133eedfd3..7d4d23c00df 100644
--- a/src/plugins/tabs/plugin.js
+++ b/src/plugins/tabs/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,45 +19,42 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+import Tabs from './tabs.js';
 
-define([
-    './tabs'
-], function (
-    Tabs
-) {
-    return function plugin() {
-        return function install(openmct) {
-            openmct.objectViews.addProvider(new Tabs(openmct));
+export default function plugin(options) {
+  return function install(openmct) {
+    const eagerLoad = options?.eagerLoad ?? false;
 
-            openmct.types.addType('tabs', {
-                name: "Tabs View",
-                description: 'Add multiple objects of any type to this view, and quickly navigate between them with tabs',
-                creatable: true,
-                cssClass: 'icon-tabs-view',
-                initialize(domainObject) {
-                    domainObject.composition = [];
-                    domainObject.keep_alive = true;
-                },
-                form: [
-                    {
-                        "key": "keep_alive",
-                        "name": "Eager Load Tabs",
-                        "control": "select",
-                        "options": [
-                            {
-                                'name': 'True',
-                                'value': true
-                            },
-                            {
-                                'name': 'False',
-                                'value': false
-                            }
-                        ],
-                        "required": true,
-                        "cssClass": "l-input"
-                    }
-                ]
-            });
-        };
-    };
-});
+    openmct.objectViews.addProvider(new Tabs(openmct));
+
+    openmct.types.addType('tabs', {
+      name: 'Tabs View',
+      description: 'Quickly navigate between multiple objects of any type using tabs.',
+      creatable: true,
+      cssClass: 'icon-tabs-view',
+      initialize(domainObject) {
+        domainObject.composition = [];
+        domainObject.keep_alive = eagerLoad;
+      },
+      form: [
+        {
+          key: 'keep_alive',
+          name: 'Eager Load Tabs',
+          control: 'toggleSwitch',
+          options: [
+            {
+              name: 'True',
+              value: true
+            },
+            {
+              name: 'False',
+              value: false
+            }
+          ],
+          required: true,
+          cssClass: 'l-input'
+        }
+      ]
+    });
+  };
+}
diff --git a/src/plugins/tabs/pluginSpec.js b/src/plugins/tabs/pluginSpec.js
index 610c2a0a99d..e7c6a100fb4 100644
--- a/src/plugins/tabs/pluginSpec.js
+++ b/src/plugins/tabs/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,162 +20,237 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import EventEmitter from 'EventEmitter';
 import { createOpenMct, resetApplicationState } from 'utils/testing';
-import TabsLayout from './plugin';
-import Vue from "vue";
-import EventEmitter from "EventEmitter";
+import { nextTick } from 'vue';
+
+import TabsLayout from './plugin.js';
 
 describe('the plugin', function () {
-    let element;
-    let child;
-    let openmct;
-    let tabsLayoutDefinition;
-    const testViewObject = {
-        id: 'af3f0e11-354e-48b5-9887-de47dfb6ecf6',
+  let element;
+  let child;
+  let openmct;
+  let tabsType;
+
+  const testViewObject = {
+    identifier: {
+      key: 'mock-tabs-object',
+      namespace: ''
+    },
+    type: 'tabs',
+    name: 'Tabs view',
+    keep_alive: true,
+    composition: [
+      {
         identifier: {
-            key: 'af3f0e11-354e-48b5-9887-de47dfb6ecf6',
-            namespace: ''
-        },
-        type: 'tabs',
-        name: 'Tabs view',
-        keep_alive: true,
-        composition: [
-            {
-                'identifier': {
-                    'namespace': '',
-                    'key': '55122607-e65e-44d5-9c9d-9c31a914ca89'
-                }
-            },
-            {
-                'identifier': {
-                    'namespace': '',
-                    'key': '55122607-e65e-44d5-9c9d-9c31a914ca90'
-                }
-            }
-        ]
-    };
-    const telemetryItemTemplate = {
-        'telemetry': {
-            'period': 5,
-            'amplitude': 5,
-            'offset': 5,
-            'dataRateInHz': 5,
-            'phase': 5,
-            'randomness': 0
-        },
-        'name': 'Sine Wave Generator',
-        'type': 'generator',
-        'modified': 1592851063871,
-        'location': 'mine',
-        'persisted': 1592851063871
-    };
-    let telemetryItem1 = Object.assign({}, telemetryItemTemplate, {
-        'id': '55122607-e65e-44d5-9c9d-9c31a914ca89',
-        'identifier': {
-            'namespace': '',
-            'key': '55122607-e65e-44d5-9c9d-9c31a914ca89'
+          namespace: '',
+          key: 'swg-1'
         }
-    });
-    let telemetryItem2 = Object.assign({}, telemetryItemTemplate, {
-        'id': '55122607-e65e-44d5-9c9d-9c31a914ca90',
-        'identifier': {
-            'namespace': '',
-            'key': '55122607-e65e-44d5-9c9d-9c31a914ca90'
+      },
+      {
+        identifier: {
+          namespace: '',
+          key: 'swg-2'
         }
-    });
+      }
+    ]
+  };
+  const telemetryItemTemplate = {
+    telemetry: {
+      period: 5,
+      amplitude: 5,
+      offset: 5,
+      dataRateInHz: 5,
+      phase: 5,
+      randomness: 0
+    },
+    type: 'generator',
+    modified: 1592851063871,
+    location: 'mine',
+    persisted: 1592851063871
+  };
+  let telemetryItem1 = Object.assign({}, telemetryItemTemplate, {
+    name: 'Sine Wave Generator 1',
+    identifier: {
+      namespace: '',
+      key: 'swg-1'
+    }
+  });
+  let telemetryItem2 = Object.assign({}, telemetryItemTemplate, {
+    name: 'Sine Wave Generator 2',
+    identifier: {
+      namespace: '',
+      key: 'swg-2'
+    }
+  });
 
-    beforeEach((done) => {
-        openmct = createOpenMct();
-        openmct.install(new TabsLayout());
-        tabsLayoutDefinition = openmct.types.get('tabs');
+  beforeEach((done) => {
+    openmct = createOpenMct();
+    tabsType = openmct.types.get('tabs');
 
-        element = document.createElement('div');
-        child = document.createElement('div');
-        element.appendChild(child);
+    element = document.createElement('div');
+    child = document.createElement('div');
+    child.style.display = 'block';
+    child.style.width = '1920px';
+    child.style.height = '1080px';
+    element.appendChild(child);
 
-        openmct.on('start', done);
-        openmct.startHeadless();
-    });
+    openmct.on('start', done);
+    openmct.startHeadless();
+  });
 
-    afterEach(() => {
-        return resetApplicationState(openmct);
+  afterEach(() => {
+    child = undefined;
+    element = undefined;
+
+    return resetApplicationState(openmct);
+  });
+
+  it('is installed by default and provides a tabs object', () => {
+    expect(tabsType.definition.name).toEqual('Tabs View');
+  });
+
+  it('the tabs object is creatable', () => {
+    expect(tabsType.definition.creatable).toEqual(true);
+  });
+
+  it('sets eager load to false by default', () => {
+    const tabsObject = {
+      identifier: {
+        key: 'some-tab-object',
+        namespace: ''
+      },
+      type: 'tabs'
+    };
+
+    tabsType.definition.initialize(tabsObject);
+
+    expect(tabsObject.keep_alive).toBeFalse();
+  });
+
+  it('can be installed with eager load defaulting to true', () => {
+    const options = {
+      eagerLoad: true
+    };
+    const openmct2 = createOpenMct();
+    openmct2.install(new TabsLayout(options));
+    openmct2.startHeadless();
+
+    const tabsObject = {
+      identifier: {
+        key: 'some-tab-object',
+        namespace: ''
+      },
+      type: 'tabs'
+    };
+
+    const overriddenTabsType = openmct2.types.get('tabs');
+    overriddenTabsType.definition.initialize(tabsObject);
+
+    expect(tabsObject.keep_alive).toBeTrue();
+
+    return resetApplicationState(openmct2);
+  });
+
+  describe('the view', function () {
+    let tabsLayoutViewProvider;
+    let mockComposition;
+
+    beforeEach(() => {
+      mockComposition = new EventEmitter();
+      mockComposition.load = () => {
+        return Promise.resolve([telemetryItem1]);
+      };
+
+      spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
+
+      const applicableViews = openmct.objectViews.get(testViewObject, []);
+      tabsLayoutViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'tabs');
+      let view = tabsLayoutViewProvider.view(testViewObject, []);
+      view.show(child, true);
+
+      return nextTick();
     });
 
-    it('defines a tabs object type with the correct key', () => {
-        expect(tabsLayoutDefinition.definition.name).toEqual('Tabs View');
+    it('provides a view', () => {
+      expect(tabsLayoutViewProvider).toBeDefined();
     });
 
-    it('is creatable', () => {
-        expect(tabsLayoutDefinition.definition.creatable).toEqual(true);
+    it('renders tab element', () => {
+      const tabsElements = element.querySelectorAll('.c-tabs');
+
+      expect(tabsElements.length).toBe(1);
     });
 
-    describe('the view', function () {
-        let tabsLayoutViewProvider;
-        let mockComposition;
+    it('renders empty tab element with msg', () => {
+      const tabsElement = element.querySelector('.c-tabs');
 
-        beforeEach(() => {
-            mockComposition = new EventEmitter();
-            mockComposition.load = () => {
-                return Promise.resolve([telemetryItem1]);
-            };
+      expect(tabsElement.innerText.trim()).toEqual('Drag objects here to add them to this view.');
+    });
+  });
 
-            spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
+  describe('the view', function () {
+    let tabsLayoutViewProvider;
+    let mockComposition;
+    let count = 0;
 
-            const applicableViews = openmct.objectViews.get(testViewObject, []);
-            tabsLayoutViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'tabs');
-            let view = tabsLayoutViewProvider.view(testViewObject, []);
-            view.show(child, true);
+    beforeEach(() => {
+      mockComposition = new EventEmitter();
+      mockComposition.load = () => {
+        if (count === 0) {
+          mockComposition.emit('add', telemetryItem1);
+          mockComposition.emit('add', telemetryItem2);
+          count++;
+        }
 
-            return Vue.nextTick();
-        });
+        return Promise.resolve([telemetryItem1, telemetryItem2]);
+      };
 
-        it('provides a view', () => {
-            expect(tabsLayoutViewProvider).toBeDefined();
-        });
+      spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
 
-        it('renders tab element', () => {
-            const tabsElements = element.querySelectorAll('.c-tabs');
+      const applicableViews = openmct.objectViews.get(testViewObject, []);
+      tabsLayoutViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'tabs');
+      let view = tabsLayoutViewProvider.view(testViewObject, []);
+      view.show(child, true);
 
-            expect(tabsElements.length).toBe(1);
-        });
+      return nextTick();
+    });
 
-        it('renders empty tab element with msg', () => {
-            const tabsElement = element.querySelector('.c-tabs');
+    afterEach(() => {
+      count = 0;
+      testViewObject.keep_alive = true;
+    });
+
+    it('renders a tab for each item', () => {
+      let tabEls = element.querySelectorAll('.js-tab');
 
-            expect(tabsElement.innerText.trim()).toEqual('Drag objects here to add them to this view.');
-        });
+      expect(tabEls.length).toEqual(2);
     });
 
-    describe('the view', function () {
-        let tabsLayoutViewProvider;
-        let mockComposition;
-        let count = 0;
-
-        beforeEach(() => {
-            mockComposition = new EventEmitter();
-            mockComposition.load = () => {
-                if (count === 0) {
-                    mockComposition.emit('add', telemetryItem1);
-                    mockComposition.emit('add', telemetryItem2);
-                    count++;
-                }
-
-                return Promise.resolve([telemetryItem1, telemetryItem2]);
-            };
-
-            spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
-
-            const applicableViews = openmct.objectViews.get(testViewObject, []);
-            tabsLayoutViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'tabs');
-            let view = tabsLayoutViewProvider.view(testViewObject, []);
-            view.show(child, true);
-
-            return Vue.nextTick();
-        });
-
-        it ('renders a tab for each item', () => {
-            let tabEls = element.querySelectorAll('.js-tab');
-            expect(tabEls.length).toEqual(2);
-        });
+    describe('with domainObject.keep_alive set to', () => {
+      it('true, will keep all views loaded, regardless of current tab view', async () => {
+        let tabEls = element.querySelectorAll('.js-tab');
+
+        for (let i = 0; i < tabEls.length; i++) {
+          const tab = tabEls[i];
+
+          tab.click();
+          await nextTick();
+
+          const tabViewEls = element.querySelectorAll('.c-tabs-view__object');
+          expect(tabViewEls.length).toEqual(2);
+        }
+      });
+
+      it('false, will only keep the current tab view loaded', async () => {
+        testViewObject.keep_alive = false;
+
+        await nextTick();
+
+        let tabViewEls = element.querySelectorAll('.c-tabs-view__object');
+
+        expect(tabViewEls.length).toEqual(1);
+      });
     });
+  });
 });
diff --git a/src/plugins/tabs/tabs.js b/src/plugins/tabs/tabs.js
index b57e00b5462..0197b35b35f 100644
--- a/src/plugins/tabs/tabs.js
+++ b/src/plugins/tabs/tabs.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,62 +20,74 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    './components/tabs.vue',
-    'vue'
-], function (
-    TabsComponent,
-    Vue
-) {
-    function Tabs(openmct) {
-        return {
-            key: 'tabs',
-            name: 'Tabs',
-            cssClass: 'icon-list-view',
-            canView: function (domainObject) {
-                return domainObject.type === 'tabs';
+import mount from 'utils/mount';
+
+import TabsComponent from './components/TabsComponent.vue';
+
+const TABS_KEY = 'tabs';
+export default class Tabs {
+  constructor(openmct) {
+    this.openmct = openmct;
+    this.key = TABS_KEY;
+    this.name = 'Tabs';
+    this.cssClass = 'icon-list-view';
+    this.destroy = null;
+  }
+
+  canView(domainObject) {
+    return domainObject.type === TABS_KEY;
+  }
+
+  canEdit(domainObject) {
+    return domainObject.type === TABS_KEY;
+  }
+
+  view(domainObject, objectPath) {
+    let openmct = this.openmct;
+    let component = null;
+
+    return {
+      show(element, editMode) {
+        const { vNode, destroy } = mount(
+          {
+            el: element,
+            components: {
+              TabsComponent
             },
-            canEdit: function (domainObject) {
-                return domainObject.type === 'tabs';
+            provide: {
+              openmct,
+              domainObject,
+              objectPath,
+              composition: openmct.composition.get(domainObject)
             },
-            view: function (domainObject, objectPath) {
-                let component;
-
-                return {
-                    show: function (element, editMode) {
-                        component = new Vue({
-                            el: element,
-                            components: {
-                                TabsComponent: TabsComponent.default
-                            },
-                            data() {
-                                return {
-                                    isEditing: editMode
-                                };
-                            },
-                            provide: {
-                                openmct,
-                                domainObject,
-                                objectPath,
-                                composition: openmct.composition.get(domainObject)
-                            },
-                            template: '<tabs-component :isEditing="isEditing"></tabs-component>'
-                        });
-                    },
-                    onEditModeChange(editMode) {
-                        component.isEditing = editMode;
-                    },
-                    destroy: function (element) {
-                        component.$destroy();
-                        component = undefined;
-                    }
-                };
+            data() {
+              return {
+                isEditing: editMode
+              };
             },
-            priority: function () {
-                return 1;
-            }
-        };
-    }
+            template: '<tabs-component :isEditing="isEditing"></tabs-component>'
+          },
+          {
+            app: openmct.app,
+            element
+          }
+        );
+        this.destroy = destroy;
+        component = vNode.componentInstance;
+      },
+      onEditModeChange(editMode) {
+        component.isEditing = editMode;
+      },
+      destroy: function (element) {
+        if (this.destroy) {
+          this.destroy();
+        }
+        component = null;
+      }
+    };
+  }
 
-    return Tabs;
-});
+  priority() {
+    return 1;
+  }
+}
diff --git a/src/plugins/telemetryMean/plugin.js b/src/plugins/telemetryMean/plugin.js
index 0ed6f0a01ca..c294a4b6860 100755
--- a/src/plugins/telemetryMean/plugin.js
+++ b/src/plugins/telemetryMean/plugin.js
@@ -1,76 +1,76 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(['./src/MeanTelemetryProvider'], function (MeanTelemetryProvider) {
-    const DEFAULT_SAMPLES = 10;
-
-    function plugin() {
-        return function install(openmct) {
-            openmct.types.addType('telemetry-mean', {
-                name: 'Telemetry Filter',
-                description: 'Provides telemetry values that represent the mean of the last N values of a telemetry stream',
-                creatable: true,
-                cssClass: 'icon-telemetry',
-                initialize: function (domainObject) {
-                    domainObject.samples = DEFAULT_SAMPLES;
-                    domainObject.telemetry = {};
-                    domainObject.telemetry.values =
-                        openmct.time.getAllTimeSystems().map(function (timeSystem, index) {
-                            return {
-                                key: timeSystem.key,
-                                name: timeSystem.name,
-                                hints: {
-                                    domain: index + 1
-                                }
-                            };
-                        });
-                    domainObject.telemetry.values.push({
-                        key: "value",
-                        name: "Value",
-                        hints: {
-                            range: 1
-                        }
-                    });
-                },
-                form: [
-                    {
-                        "key": "telemetryPoint",
-                        "name": "Telemetry Point",
-                        "control": "textfield",
-                        "required": true,
-                        "cssClass": "l-input-lg"
-                    },
-                    {
-                        "key": "samples",
-                        "name": "Samples to Average",
-                        "control": "textfield",
-                        "required": true,
-                        "cssClass": "l-input-sm"
-                    }
-                ]
-            });
-            openmct.telemetry.addProvider(new MeanTelemetryProvider(openmct));
-        };
-    }
-
-    return plugin;
-});
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import MeanTelemetryProvider from './src/MeanTelemetryProvider.js';
+
+const DEFAULT_SAMPLES = 10;
+
+export default function plugin() {
+  return function install(openmct) {
+    openmct.types.addType('telemetry-mean', {
+      name: 'Telemetry Filter',
+      description:
+        'Provides telemetry values that represent the mean of the last N values of a telemetry stream',
+      creatable: true,
+      cssClass: 'icon-telemetry',
+      initialize: function (domainObject) {
+        domainObject.samples = DEFAULT_SAMPLES;
+        domainObject.telemetry = {};
+        domainObject.telemetry.values = openmct.time
+          .getAllTimeSystems()
+          .map(function (timeSystem, index) {
+            return {
+              key: timeSystem.key,
+              name: timeSystem.name,
+              hints: {
+                domain: index + 1
+              }
+            };
+          });
+        domainObject.telemetry.values.push({
+          key: 'value',
+          name: 'Value',
+          hints: {
+            range: 1
+          }
+        });
+      },
+      form: [
+        {
+          key: 'telemetryPoint',
+          name: 'Telemetry Point',
+          control: 'textfield',
+          required: true,
+          cssClass: 'l-input-lg'
+        },
+        {
+          key: 'samples',
+          name: 'Samples to Average',
+          control: 'textfield',
+          required: true,
+          cssClass: 'l-input-sm'
+        }
+      ]
+    });
+    openmct.telemetry.addProvider(new MeanTelemetryProvider(openmct));
+  };
+}
diff --git a/src/plugins/telemetryMean/src/MeanTelemetryProvider.js b/src/plugins/telemetryMean/src/MeanTelemetryProvider.js
index 0fd4df33700..03ed1c2fe4f 100644
--- a/src/plugins/telemetryMean/src/MeanTelemetryProvider.js
+++ b/src/plugins/telemetryMean/src/MeanTelemetryProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,97 +20,114 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    'objectUtils',
-    './TelemetryAverager'
-], function (objectUtils, TelemetryAverager) {
-
-    function MeanTelemetryProvider(openmct) {
-        this.openmct = openmct;
-        this.telemetryAPI = openmct.telemetry;
-        this.timeAPI = openmct.time;
-        this.objectAPI = openmct.objects;
-        this.perObjectProviders = {};
-    }
-
-    MeanTelemetryProvider.prototype.canProvideTelemetry = function (domainObject) {
-        return domainObject.type === 'telemetry-mean';
-    };
-
-    MeanTelemetryProvider.prototype.supportsRequest =
-        MeanTelemetryProvider.prototype.supportsSubscribe =
-            MeanTelemetryProvider.prototype.canProvideTelemetry;
-
-    MeanTelemetryProvider.prototype.subscribe = function (domainObject, callback) {
-        let wrappedUnsubscribe;
-        let unsubscribeCalled = false;
-        const objectId = objectUtils.parseKeyString(domainObject.telemetryPoint);
-        const samples = domainObject.samples;
-
-        this.objectAPI.get(objectId)
-            .then(function (linkedDomainObject) {
-                if (!unsubscribeCalled) {
-                    wrappedUnsubscribe = this.subscribeToAverage(linkedDomainObject, samples, callback);
-                }
-            }.bind(this))
-            .catch(logError);
-
-        return function unsubscribe() {
-            unsubscribeCalled = true;
-            if (wrappedUnsubscribe !== undefined) {
-                wrappedUnsubscribe();
-            }
-        };
-    };
-
-    MeanTelemetryProvider.prototype.subscribeToAverage = function (domainObject, samples, callback) {
-        const telemetryAverager = new TelemetryAverager(this.telemetryAPI, this.timeAPI, domainObject, samples, callback);
-        const createAverageDatum = telemetryAverager.createAverageDatum.bind(telemetryAverager);
-
-        return this.telemetryAPI.subscribe(domainObject, createAverageDatum);
-    };
-
-    MeanTelemetryProvider.prototype.request = function (domainObject, request) {
-        const objectId = objectUtils.parseKeyString(domainObject.telemetryPoint);
-        const samples = domainObject.samples;
-
-        return this.objectAPI.get(objectId).then(function (linkedDomainObject) {
-            return this.requestAverageTelemetry(linkedDomainObject, request, samples);
-        }.bind(this));
-    };
-
-    /**
-     * @private
-     */
-    MeanTelemetryProvider.prototype.requestAverageTelemetry = function (domainObject, request, samples) {
-        const averageData = [];
-        const addToAverageData = averageData.push.bind(averageData);
-        const telemetryAverager = new TelemetryAverager(this.telemetryAPI, this.timeAPI, domainObject, samples, addToAverageData);
-        const createAverageDatum = telemetryAverager.createAverageDatum.bind(telemetryAverager);
-
-        return this.telemetryAPI.request(domainObject, request).then(function (telemetryData) {
-            telemetryData.forEach(createAverageDatum);
-
-            return averageData;
-        });
-    };
-
-    /**
-     * @private
-     */
-    MeanTelemetryProvider.prototype.getLinkedObject = function (domainObject) {
-        const objectId = objectUtils.parseKeyString(domainObject.telemetryPoint);
-
-        return this.objectAPI.get(objectId);
-    };
-
-    function logError(error) {
-        if (error.stack) {
-            console.error(error.stack);
-        } else {
-            console.error(error);
+import { parseKeyString } from 'objectUtils';
+
+import TelemetryAverager from './TelemetryAverager.js';
+
+export default function MeanTelemetryProvider(openmct) {
+  this.openmct = openmct;
+  this.telemetryAPI = openmct.telemetry;
+  this.timeAPI = openmct.time;
+  this.objectAPI = openmct.objects;
+  this.perObjectProviders = {};
+}
+
+MeanTelemetryProvider.prototype.canProvideTelemetry = function (domainObject) {
+  return domainObject.type === 'telemetry-mean';
+};
+
+MeanTelemetryProvider.prototype.supportsRequest =
+  MeanTelemetryProvider.prototype.supportsSubscribe =
+    MeanTelemetryProvider.prototype.canProvideTelemetry;
+
+MeanTelemetryProvider.prototype.subscribe = function (domainObject, callback) {
+  let wrappedUnsubscribe;
+  let unsubscribeCalled = false;
+  const objectId = parseKeyString(domainObject.telemetryPoint);
+  const samples = domainObject.samples;
+
+  this.objectAPI
+    .get(objectId)
+    .then(
+      function (linkedDomainObject) {
+        if (!unsubscribeCalled) {
+          wrappedUnsubscribe = this.subscribeToAverage(linkedDomainObject, samples, callback);
         }
+      }.bind(this)
+    )
+    .catch(logError);
+
+  return function unsubscribe() {
+    unsubscribeCalled = true;
+    if (wrappedUnsubscribe !== undefined) {
+      wrappedUnsubscribe();
     }
-
-    return MeanTelemetryProvider;
-});
+  };
+};
+
+MeanTelemetryProvider.prototype.subscribeToAverage = function (domainObject, samples, callback) {
+  const telemetryAverager = new TelemetryAverager(
+    this.telemetryAPI,
+    this.timeAPI,
+    domainObject,
+    samples,
+    callback
+  );
+  const createAverageDatum = telemetryAverager.createAverageDatum.bind(telemetryAverager);
+
+  return this.telemetryAPI.subscribe(domainObject, createAverageDatum);
+};
+
+MeanTelemetryProvider.prototype.request = function (domainObject, request) {
+  const objectId = parseKeyString(domainObject.telemetryPoint);
+  const samples = domainObject.samples;
+
+  return this.objectAPI.get(objectId).then(
+    function (linkedDomainObject) {
+      return this.requestAverageTelemetry(linkedDomainObject, request, samples);
+    }.bind(this)
+  );
+};
+
+/**
+ * @private
+ */
+MeanTelemetryProvider.prototype.requestAverageTelemetry = function (
+  domainObject,
+  request,
+  samples
+) {
+  const averageData = [];
+  const addToAverageData = averageData.push.bind(averageData);
+  const telemetryAverager = new TelemetryAverager(
+    this.telemetryAPI,
+    this.timeAPI,
+    domainObject,
+    samples,
+    addToAverageData
+  );
+  const createAverageDatum = telemetryAverager.createAverageDatum.bind(telemetryAverager);
+
+  return this.telemetryAPI.request(domainObject, request).then(function (telemetryData) {
+    telemetryData.forEach(createAverageDatum);
+
+    return averageData;
+  });
+};
+
+/**
+ * @private
+ */
+MeanTelemetryProvider.prototype.getLinkedObject = function (domainObject) {
+  const objectId = parseKeyString(domainObject.telemetryPoint);
+
+  return this.objectAPI.get(objectId);
+};
+
+function logError(error) {
+  if (error.stack) {
+    console.error(error.stack);
+  } else {
+    console.error(error);
+  }
+}
diff --git a/src/plugins/telemetryMean/src/MeanTelemetryProviderSpec.js b/src/plugins/telemetryMean/src/MeanTelemetryProviderSpec.js
index 62076d9705b..d5ceff97ed3 100644
--- a/src/plugins/telemetryMean/src/MeanTelemetryProviderSpec.js
+++ b/src/plugins/telemetryMean/src/MeanTelemetryProviderSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,599 +20,603 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* eslint-disable no-invalid-this */
-define([
-    "./MeanTelemetryProvider",
-    "./MockTelemetryApi"
-], function (
-    MeanTelemetryProvider,
-    MockTelemetryApi
-) {
-    const RANGE_KEY = 'value';
-
-    describe("The Mean Telemetry Provider", function () {
-        let mockApi;
-        let meanTelemetryProvider;
-        let mockDomainObject;
-        let associatedObject;
-        let allPromises;
-
-        beforeEach(function () {
-            allPromises = [];
-            createMockApi();
-            setTimeSystemTo('utc');
-            createMockObjects();
-            meanTelemetryProvider = new MeanTelemetryProvider(mockApi);
-        });
 
-        it("supports telemetry-mean objects only", function () {
-            const mockTelemetryMeanObject = mockObjectWithType('telemetry-mean');
-            const mockOtherObject = mockObjectWithType('other');
+import MeanTelemetryProvider from './MeanTelemetryProvider.js';
+import MockTelemetryApi from './MockTelemetryApi.js';
 
-            expect(meanTelemetryProvider.canProvideTelemetry(mockTelemetryMeanObject)).toBe(true);
-            expect(meanTelemetryProvider.canProvideTelemetry(mockOtherObject)).toBe(false);
-        });
+const RANGE_KEY = 'value';
 
-        describe("the subscribe function", function () {
-            let subscriptionCallback;
-
-            beforeEach(function () {
-                subscriptionCallback = jasmine.createSpy('subscriptionCallback');
-            });
-
-            it("subscribes to telemetry for the associated object", function () {
-                meanTelemetryProvider.subscribe(mockDomainObject);
-
-                return expectObjectWasSubscribedTo(associatedObject);
-            });
-
-            it("returns a function that unsubscribes from the associated object", function () {
-                const unsubscribe = meanTelemetryProvider.subscribe(mockDomainObject);
-
-                return waitForPromises()
-                    .then(unsubscribe)
-                    .then(waitForPromises)
-                    .then(function () {
-                        expect(mockApi.telemetry.unsubscribe).toHaveBeenCalled();
-                    });
-            });
-
-            it("returns an average only when the sample size is reached", function () {
-                const inputTelemetry = [
-                    {
-                        'utc': 1,
-                        'defaultRange': 123.1231
-                    },
-                    {
-                        'utc': 2,
-                        'defaultRange': 321.3223
-                    },
-                    {
-                        'utc': 3,
-                        'defaultRange': 111.4446
-                    },
-                    {
-                        'utc': 4,
-                        'defaultRange': 555.2313
-                    }
-                ];
-
-                setSampleSize(5);
-                meanTelemetryProvider.subscribe(mockDomainObject, subscriptionCallback);
-
-                return waitForPromises()
-                    .then(feedInputTelemetry.bind(this, inputTelemetry))
-                    .then(function () {
-                        expect(subscriptionCallback).not.toHaveBeenCalled();
-                    });
-            });
-
-            it("correctly averages a sample of five values", function () {
-                const inputTelemetry = [
-                    {
-                        'utc': 1,
-                        'defaultRange': 123.1231
-                    },
-                    {
-                        'utc': 2,
-                        'defaultRange': 321.3223
-                    },
-                    {
-                        'utc': 3,
-                        'defaultRange': 111.4446
-                    },
-                    {
-                        'utc': 4,
-                        'defaultRange': 555.2313
-                    },
-                    {
-                        'utc': 5,
-                        'defaultRange': 1.1231
-                    }
-                ];
-                const expectedAverages = [{
-                    'utc': 5,
-                    'value': 222.44888
-                }];
-
-                setSampleSize(5);
-                meanTelemetryProvider.subscribe(mockDomainObject, subscriptionCallback);
-
-                return waitForPromises()
-                    .then(feedInputTelemetry.bind(this, inputTelemetry))
-                    .then(expectAveragesForTelemetry.bind(this, expectedAverages));
-            });
-
-            it("correctly averages a sample of ten values", function () {
-                const inputTelemetry = [
-                    {
-                        'utc': 1,
-                        'defaultRange': 123.1231
-                    },
-                    {
-                        'utc': 2,
-                        'defaultRange': 321.3223
-                    },
-                    {
-                        'utc': 3,
-                        'defaultRange': 111.4446
-                    },
-                    {
-                        'utc': 4,
-                        'defaultRange': 555.2313
-                    },
-                    {
-                        'utc': 5,
-                        'defaultRange': 1.1231
-                    },
-                    {
-                        'utc': 6,
-                        'defaultRange': 2323.12
-                    },
-                    {
-                        'utc': 7,
-                        'defaultRange': 532.12
-                    },
-                    {
-                        'utc': 8,
-                        'defaultRange': 453.543
-                    },
-                    {
-                        'utc': 9,
-                        'defaultRange': 89.2111
-                    },
-                    {
-                        'utc': 10,
-                        'defaultRange': 0.543
-                    }
-                ];
-                const expectedAverages = [{
-                    'utc': 10,
-                    'value': 451.07815
-                }];
-
-                setSampleSize(10);
-                meanTelemetryProvider.subscribe(mockDomainObject, subscriptionCallback);
-
-                return waitForPromises()
-                    .then(feedInputTelemetry.bind(this, inputTelemetry))
-                    .then(expectAveragesForTelemetry.bind(this, expectedAverages));
-            });
-
-            it("only averages values within its sample window", function () {
-                const inputTelemetry = [
-                    {
-                        'utc': 1,
-                        'defaultRange': 123.1231
-                    },
-                    {
-                        'utc': 2,
-                        'defaultRange': 321.3223
-                    },
-                    {
-                        'utc': 3,
-                        'defaultRange': 111.4446
-                    },
-                    {
-                        'utc': 4,
-                        'defaultRange': 555.2313
-                    },
-                    {
-                        'utc': 5,
-                        'defaultRange': 1.1231
-                    },
-                    {
-                        'utc': 6,
-                        'defaultRange': 2323.12
-                    },
-                    {
-                        'utc': 7,
-                        'defaultRange': 532.12
-                    },
-                    {
-                        'utc': 8,
-                        'defaultRange': 453.543
-                    },
-                    {
-                        'utc': 9,
-                        'defaultRange': 89.2111
-                    },
-                    {
-                        'utc': 10,
-                        'defaultRange': 0.543
-                    }
-                ];
-                const expectedAverages = [
-                    {
-                        'utc': 5,
-                        'value': 222.44888
-                    },
-                    {
-                        'utc': 6,
-                        'value': 662.4482599999999
-                    },
-                    {
-                        'utc': 7,
-                        'value': 704.6078
-                    },
-                    {
-                        'utc': 8,
-                        'value': 773.02748
-                    },
-                    {
-                        'utc': 9,
-                        'value': 679.8234399999999
-                    },
-                    {
-                        'utc': 10,
-                        'value': 679.70742
-                    }
-                ];
-
-                setSampleSize(5);
-                meanTelemetryProvider.subscribe(mockDomainObject, subscriptionCallback);
-
-                return waitForPromises()
-                    .then(feedInputTelemetry.bind(this, inputTelemetry))
-                    .then(expectAveragesForTelemetry.bind(this, expectedAverages));
-            });
-            describe("given telemetry input with range values", function () {
-                let inputTelemetry;
-
-                beforeEach(function () {
-                    inputTelemetry = [{
-                        'utc': 1,
-                        'rangeKey': 5678,
-                        'otherKey': 9999
-                    }];
-                    setSampleSize(1);
-                });
-                it("uses the 'rangeKey' input range, when it is the default, to calculate the average", function () {
-                    const averageTelemetryForRangeKey = [{
-                        'utc': 1,
-                        'value': 5678
-                    }];
-
-                    meanTelemetryProvider.subscribe(mockDomainObject, subscriptionCallback);
-                    mockApi.telemetry.setDefaultRangeTo('rangeKey');
-
-                    return waitForPromises()
-                        .then(feedInputTelemetry.bind(this, inputTelemetry))
-                        .then(expectAveragesForTelemetry.bind(this, averageTelemetryForRangeKey));
-                });
-
-                it("uses the 'otherKey' input range, when it is the default, to calculate the average", function () {
-                    const averageTelemetryForOtherKey = [{
-                        'utc': 1,
-                        'value': 9999
-                    }];
-
-                    meanTelemetryProvider.subscribe(mockDomainObject, subscriptionCallback);
-                    mockApi.telemetry.setDefaultRangeTo('otherKey');
-
-                    return waitForPromises()
-                        .then(feedInputTelemetry.bind(this, inputTelemetry))
-                        .then(expectAveragesForTelemetry.bind(this, averageTelemetryForOtherKey));
-                });
-            });
-            describe("given telemetry input with range values", function () {
-                let inputTelemetry;
-
-                beforeEach(function () {
-                    inputTelemetry = [{
-                        'utc': 1,
-                        'rangeKey': 5678,
-                        'otherKey': 9999
-                    }];
-                    setSampleSize(1);
-                });
-                it("uses the 'rangeKey' input range, when it is the default, to calculate the average", function () {
-                    const averageTelemetryForRangeKey = [{
-                        'utc': 1,
-                        'value': 5678
-                    }];
-
-                    meanTelemetryProvider.subscribe(mockDomainObject, subscriptionCallback);
-                    mockApi.telemetry.setDefaultRangeTo('rangeKey');
-
-                    return waitForPromises()
-                        .then(feedInputTelemetry.bind(this, inputTelemetry))
-                        .then(expectAveragesForTelemetry.bind(this, averageTelemetryForRangeKey));
-                });
-
-                it("uses the 'otherKey' input range, when it is the default, to calculate the average", function () {
-                    const averageTelemetryForOtherKey = [{
-                        'utc': 1,
-                        'value': 9999
-                    }];
-
-                    meanTelemetryProvider.subscribe(mockDomainObject, subscriptionCallback);
-                    mockApi.telemetry.setDefaultRangeTo('otherKey');
-
-                    return waitForPromises()
-                        .then(feedInputTelemetry.bind(this, inputTelemetry))
-                        .then(expectAveragesForTelemetry.bind(this, averageTelemetryForOtherKey));
-                });
-            });
-
-            function feedInputTelemetry(inputTelemetry) {
-                inputTelemetry.forEach(mockApi.telemetry.mockReceiveTelemetry);
-            }
-
-            function expectAveragesForTelemetry(expectedAverages) {
-                return waitForPromises().then(function () {
-                    expectedAverages.forEach(function (averageDatum) {
-                        expect(subscriptionCallback).toHaveBeenCalledWith(averageDatum);
-                    });
-                });
-            }
-
-            function expectObjectWasSubscribedTo(object) {
-                return waitForPromises().then(function () {
-                    expect(mockApi.telemetry.subscribe).toHaveBeenCalledWith(object, jasmine.any(Function));
-                });
-            }
+describe('The Mean Telemetry Provider', function () {
+  let mockApi;
+  let meanTelemetryProvider;
+  let mockDomainObject;
+  let associatedObject;
+  let allPromises;
 
-        });
+  beforeEach(function () {
+    allPromises = [];
+    createMockApi();
+    setTimeSystemTo('utc');
+    createMockObjects();
+    meanTelemetryProvider = new MeanTelemetryProvider(mockApi);
+  });
+
+  it('supports telemetry-mean objects only', function () {
+    const mockTelemetryMeanObject = mockObjectWithType('telemetry-mean');
+    const mockOtherObject = mockObjectWithType('other');
+
+    expect(meanTelemetryProvider.canProvideTelemetry(mockTelemetryMeanObject)).toBe(true);
+    expect(meanTelemetryProvider.canProvideTelemetry(mockOtherObject)).toBe(false);
+  });
+
+  describe('the subscribe function', function () {
+    let subscriptionCallback;
+
+    beforeEach(function () {
+      subscriptionCallback = jasmine.createSpy('subscriptionCallback');
+    });
+
+    it('subscribes to telemetry for the associated object', function () {
+      meanTelemetryProvider.subscribe(mockDomainObject);
+
+      return expectObjectWasSubscribedTo(associatedObject);
+    });
+
+    it('returns a function that unsubscribes from the associated object', function () {
+      const unsubscribe = meanTelemetryProvider.subscribe(mockDomainObject);
 
-        describe("the request function", function () {
-
-            it("requests telemetry for the associated object", function () {
-                whenTelemetryRequestedReturn([]);
-
-                return meanTelemetryProvider.request(mockDomainObject).then(function () {
-                    expect(mockApi.telemetry.request).toHaveBeenCalledWith(associatedObject, undefined);
-                });
-            });
-
-            it("returns an average only when the sample size is reached", function () {
-                const inputTelemetry = [
-                    {
-                        'utc': 1,
-                        'defaultRange': 123.1231
-                    },
-                    {
-                        'utc': 2,
-                        'defaultRange': 321.3223
-                    },
-                    {
-                        'utc': 3,
-                        'defaultRange': 111.4446
-                    },
-                    {
-                        'utc': 4,
-                        'defaultRange': 555.2313
-                    }
-                ];
-
-                setSampleSize(5);
-                whenTelemetryRequestedReturn(inputTelemetry);
-
-                return meanTelemetryProvider.request(mockDomainObject).then(function (averageData) {
-                    expect(averageData.length).toBe(0);
-                });
-            });
-
-            it("correctly averages a sample of five values", function () {
-                const inputTelemetry = [
-                    {
-                        'utc': 1,
-                        'defaultRange': 123.1231
-                    },
-                    {
-                        'utc': 2,
-                        'defaultRange': 321.3223
-                    },
-                    {
-                        'utc': 3,
-                        'defaultRange': 111.4446
-                    },
-                    {
-                        'utc': 4,
-                        'defaultRange': 555.2313
-                    },
-                    {
-                        'utc': 5,
-                        'defaultRange': 1.1231
-                    }
-                ];
-
-                setSampleSize(5);
-                whenTelemetryRequestedReturn(inputTelemetry);
-
-                return meanTelemetryProvider.request(mockDomainObject)
-                    .then(function (averageData) {
-                        expectAverageToBe(222.44888, averageData);
-                    });
-            });
-
-            it("correctly averages a sample of ten values", function () {
-                const inputTelemetry = [
-                    {
-                        'utc': 1,
-                        'defaultRange': 123.1231
-                    },
-                    {
-                        'utc': 2,
-                        'defaultRange': 321.3223
-                    },
-                    {
-                        'utc': 3,
-                        'defaultRange': 111.4446
-                    },
-                    {
-                        'utc': 4,
-                        'defaultRange': 555.2313
-                    },
-                    {
-                        'utc': 5,
-                        'defaultRange': 1.1231
-                    },
-                    {
-                        'utc': 6,
-                        'defaultRange': 2323.12
-                    },
-                    {
-                        'utc': 7,
-                        'defaultRange': 532.12
-                    },
-                    {
-                        'utc': 8,
-                        'defaultRange': 453.543
-                    },
-                    {
-                        'utc': 9,
-                        'defaultRange': 89.2111
-                    },
-                    {
-                        'utc': 10,
-                        'defaultRange': 0.543
-                    }
-                ];
-
-                setSampleSize(10);
-                whenTelemetryRequestedReturn(inputTelemetry);
-
-                return meanTelemetryProvider.request(mockDomainObject)
-                    .then(function (averageData) {
-                        expectAverageToBe(451.07815, averageData);
-                    });
-            });
-
-            it("only averages values within its sample window", function () {
-                const inputTelemetry = [
-                    {
-                        'utc': 1,
-                        'defaultRange': 123.1231
-                    },
-                    {
-                        'utc': 2,
-                        'defaultRange': 321.3223
-                    },
-                    {
-                        'utc': 3,
-                        'defaultRange': 111.4446
-                    },
-                    {
-                        'utc': 4,
-                        'defaultRange': 555.2313
-                    },
-                    {
-                        'utc': 5,
-                        'defaultRange': 1.1231
-                    },
-                    {
-                        'utc': 6,
-                        'defaultRange': 2323.12
-                    },
-                    {
-                        'utc': 7,
-                        'defaultRange': 532.12
-                    },
-                    {
-                        'utc': 8,
-                        'defaultRange': 453.543
-                    },
-                    {
-                        'utc': 9,
-                        'defaultRange': 89.2111
-                    },
-                    {
-                        'utc': 10,
-                        'defaultRange': 0.543
-                    }
-                ];
-
-                setSampleSize(5);
-                whenTelemetryRequestedReturn(inputTelemetry);
-
-                return meanTelemetryProvider.request(mockDomainObject)
-                    .then(function (averageData) {
-                        expectAverageToBe(679.70742, averageData);
-                    });
-            });
-
-            function expectAverageToBe(expectedValue, averageData) {
-                const averageDatum = averageData[averageData.length - 1];
-                expect(averageDatum[RANGE_KEY]).toBe(expectedValue);
-            }
-
-            function whenTelemetryRequestedReturn(telemetry) {
-                mockApi.telemetry.request.and.returnValue(resolvePromiseWith(telemetry));
-            }
+      return waitForPromises()
+        .then(unsubscribe)
+        .then(waitForPromises)
+        .then(function () {
+          expect(mockApi.telemetry.unsubscribe).toHaveBeenCalled();
         });
+    });
 
-        function createMockObjects() {
-            mockDomainObject = {
-                telemetryPoint: 'someTelemetryPoint'
-            };
-            associatedObject = {};
-            mockApi.objects.get.and.returnValue(resolvePromiseWith(associatedObject));
+    it('returns an average only when the sample size is reached', function () {
+      const inputTelemetry = [
+        {
+          utc: 1,
+          defaultRange: 123.1231
+        },
+        {
+          utc: 2,
+          defaultRange: 321.3223
+        },
+        {
+          utc: 3,
+          defaultRange: 111.4446
+        },
+        {
+          utc: 4,
+          defaultRange: 555.2313
         }
+      ];
 
-        function setSampleSize(sampleSize) {
-            mockDomainObject.samples = sampleSize;
-        }
+      setSampleSize(5);
+      meanTelemetryProvider.subscribe(mockDomainObject, subscriptionCallback);
+
+      return waitForPromises()
+        .then(feedInputTelemetry.bind(this, inputTelemetry))
+        .then(function () {
+          expect(subscriptionCallback).not.toHaveBeenCalled();
+        });
+    });
 
-        function createMockApi() {
-            mockApi = {
-                telemetry: new MockTelemetryApi(),
-                objects: createMockObjectApi(),
-                time: createMockTimeApi()
-            };
+    it('correctly averages a sample of five values', function () {
+      const inputTelemetry = [
+        {
+          utc: 1,
+          defaultRange: 123.1231
+        },
+        {
+          utc: 2,
+          defaultRange: 321.3223
+        },
+        {
+          utc: 3,
+          defaultRange: 111.4446
+        },
+        {
+          utc: 4,
+          defaultRange: 555.2313
+        },
+        {
+          utc: 5,
+          defaultRange: 1.1231
+        }
+      ];
+      const expectedAverages = [
+        {
+          utc: 5,
+          value: 222.44888
         }
+      ];
 
-        function createMockObjectApi() {
-            return jasmine.createSpyObj('ObjectAPI', [
-                'get'
-            ]);
+      setSampleSize(5);
+      meanTelemetryProvider.subscribe(mockDomainObject, subscriptionCallback);
+
+      return waitForPromises()
+        .then(feedInputTelemetry.bind(this, inputTelemetry))
+        .then(expectAveragesForTelemetry.bind(this, expectedAverages));
+    });
+
+    it('correctly averages a sample of ten values', function () {
+      const inputTelemetry = [
+        {
+          utc: 1,
+          defaultRange: 123.1231
+        },
+        {
+          utc: 2,
+          defaultRange: 321.3223
+        },
+        {
+          utc: 3,
+          defaultRange: 111.4446
+        },
+        {
+          utc: 4,
+          defaultRange: 555.2313
+        },
+        {
+          utc: 5,
+          defaultRange: 1.1231
+        },
+        {
+          utc: 6,
+          defaultRange: 2323.12
+        },
+        {
+          utc: 7,
+          defaultRange: 532.12
+        },
+        {
+          utc: 8,
+          defaultRange: 453.543
+        },
+        {
+          utc: 9,
+          defaultRange: 89.2111
+        },
+        {
+          utc: 10,
+          defaultRange: 0.543
         }
+      ];
+      const expectedAverages = [
+        {
+          utc: 10,
+          value: 451.07815
+        }
+      ];
+
+      setSampleSize(10);
+      meanTelemetryProvider.subscribe(mockDomainObject, subscriptionCallback);
 
-        function mockObjectWithType(type) {
-            return {
-                type: type
-            };
+      return waitForPromises()
+        .then(feedInputTelemetry.bind(this, inputTelemetry))
+        .then(expectAveragesForTelemetry.bind(this, expectedAverages));
+    });
+
+    it('only averages values within its sample window', function () {
+      const inputTelemetry = [
+        {
+          utc: 1,
+          defaultRange: 123.1231
+        },
+        {
+          utc: 2,
+          defaultRange: 321.3223
+        },
+        {
+          utc: 3,
+          defaultRange: 111.4446
+        },
+        {
+          utc: 4,
+          defaultRange: 555.2313
+        },
+        {
+          utc: 5,
+          defaultRange: 1.1231
+        },
+        {
+          utc: 6,
+          defaultRange: 2323.12
+        },
+        {
+          utc: 7,
+          defaultRange: 532.12
+        },
+        {
+          utc: 8,
+          defaultRange: 453.543
+        },
+        {
+          utc: 9,
+          defaultRange: 89.2111
+        },
+        {
+          utc: 10,
+          defaultRange: 0.543
+        }
+      ];
+      const expectedAverages = [
+        {
+          utc: 5,
+          value: 222.44888
+        },
+        {
+          utc: 6,
+          value: 662.4482599999999
+        },
+        {
+          utc: 7,
+          value: 704.6078
+        },
+        {
+          utc: 8,
+          value: 773.02748
+        },
+        {
+          utc: 9,
+          value: 679.8234399999999
+        },
+        {
+          utc: 10,
+          value: 679.70742
         }
+      ];
+
+      setSampleSize(5);
+      meanTelemetryProvider.subscribe(mockDomainObject, subscriptionCallback);
+
+      return waitForPromises()
+        .then(feedInputTelemetry.bind(this, inputTelemetry))
+        .then(expectAveragesForTelemetry.bind(this, expectedAverages));
+    });
+    describe('given telemetry input with range values', function () {
+      let inputTelemetry;
+
+      beforeEach(function () {
+        inputTelemetry = [
+          {
+            utc: 1,
+            rangeKey: 5678,
+            otherKey: 9999
+          }
+        ];
+        setSampleSize(1);
+      });
+      it("uses the 'rangeKey' input range, when it is the default, to calculate the average", function () {
+        const averageTelemetryForRangeKey = [
+          {
+            utc: 1,
+            value: 5678
+          }
+        ];
+
+        meanTelemetryProvider.subscribe(mockDomainObject, subscriptionCallback);
+        mockApi.telemetry.setDefaultRangeTo('rangeKey');
+
+        return waitForPromises()
+          .then(feedInputTelemetry.bind(this, inputTelemetry))
+          .then(expectAveragesForTelemetry.bind(this, averageTelemetryForRangeKey));
+      });
+
+      it("uses the 'otherKey' input range, when it is the default, to calculate the average", function () {
+        const averageTelemetryForOtherKey = [
+          {
+            utc: 1,
+            value: 9999
+          }
+        ];
+
+        meanTelemetryProvider.subscribe(mockDomainObject, subscriptionCallback);
+        mockApi.telemetry.setDefaultRangeTo('otherKey');
+
+        return waitForPromises()
+          .then(feedInputTelemetry.bind(this, inputTelemetry))
+          .then(expectAveragesForTelemetry.bind(this, averageTelemetryForOtherKey));
+      });
+    });
+    describe('given telemetry input with range values', function () {
+      let inputTelemetry;
+
+      beforeEach(function () {
+        inputTelemetry = [
+          {
+            utc: 1,
+            rangeKey: 5678,
+            otherKey: 9999
+          }
+        ];
+        setSampleSize(1);
+      });
+      it("uses the 'rangeKey' input range, when it is the default, to calculate the average", function () {
+        const averageTelemetryForRangeKey = [
+          {
+            utc: 1,
+            value: 5678
+          }
+        ];
+
+        meanTelemetryProvider.subscribe(mockDomainObject, subscriptionCallback);
+        mockApi.telemetry.setDefaultRangeTo('rangeKey');
+
+        return waitForPromises()
+          .then(feedInputTelemetry.bind(this, inputTelemetry))
+          .then(expectAveragesForTelemetry.bind(this, averageTelemetryForRangeKey));
+      });
+
+      it("uses the 'otherKey' input range, when it is the default, to calculate the average", function () {
+        const averageTelemetryForOtherKey = [
+          {
+            utc: 1,
+            value: 9999
+          }
+        ];
+
+        meanTelemetryProvider.subscribe(mockDomainObject, subscriptionCallback);
+        mockApi.telemetry.setDefaultRangeTo('otherKey');
+
+        return waitForPromises()
+          .then(feedInputTelemetry.bind(this, inputTelemetry))
+          .then(expectAveragesForTelemetry.bind(this, averageTelemetryForOtherKey));
+      });
+    });
+
+    function feedInputTelemetry(inputTelemetry) {
+      inputTelemetry.forEach(mockApi.telemetry.mockReceiveTelemetry);
+    }
 
-        function resolvePromiseWith(value) {
-            const promise = Promise.resolve(value);
-            allPromises.push(promise);
+    function expectAveragesForTelemetry(expectedAverages) {
+      return waitForPromises().then(function () {
+        expectedAverages.forEach(function (averageDatum) {
+          expect(subscriptionCallback).toHaveBeenCalledWith(averageDatum);
+        });
+      });
+    }
+
+    function expectObjectWasSubscribedTo(object) {
+      return waitForPromises().then(function () {
+        expect(mockApi.telemetry.subscribe).toHaveBeenCalledWith(object, jasmine.any(Function));
+      });
+    }
+  });
+
+  describe('the request function', function () {
+    it('requests telemetry for the associated object', function () {
+      whenTelemetryRequestedReturn([]);
+
+      return meanTelemetryProvider.request(mockDomainObject).then(function () {
+        expect(mockApi.telemetry.request).toHaveBeenCalledWith(associatedObject, undefined);
+      });
+    });
 
-            return promise;
+    it('returns an average only when the sample size is reached', function () {
+      const inputTelemetry = [
+        {
+          utc: 1,
+          defaultRange: 123.1231
+        },
+        {
+          utc: 2,
+          defaultRange: 321.3223
+        },
+        {
+          utc: 3,
+          defaultRange: 111.4446
+        },
+        {
+          utc: 4,
+          defaultRange: 555.2313
         }
+      ];
+
+      setSampleSize(5);
+      whenTelemetryRequestedReturn(inputTelemetry);
 
-        function waitForPromises() {
-            return Promise.all(allPromises);
+      return meanTelemetryProvider.request(mockDomainObject).then(function (averageData) {
+        expect(averageData.length).toBe(0);
+      });
+    });
+
+    it('correctly averages a sample of five values', function () {
+      const inputTelemetry = [
+        {
+          utc: 1,
+          defaultRange: 123.1231
+        },
+        {
+          utc: 2,
+          defaultRange: 321.3223
+        },
+        {
+          utc: 3,
+          defaultRange: 111.4446
+        },
+        {
+          utc: 4,
+          defaultRange: 555.2313
+        },
+        {
+          utc: 5,
+          defaultRange: 1.1231
         }
+      ];
+
+      setSampleSize(5);
+      whenTelemetryRequestedReturn(inputTelemetry);
 
-        function createMockTimeApi() {
-            return jasmine.createSpyObj("timeApi", ['timeSystem']);
+      return meanTelemetryProvider.request(mockDomainObject).then(function (averageData) {
+        expectAverageToBe(222.44888, averageData);
+      });
+    });
+
+    it('correctly averages a sample of ten values', function () {
+      const inputTelemetry = [
+        {
+          utc: 1,
+          defaultRange: 123.1231
+        },
+        {
+          utc: 2,
+          defaultRange: 321.3223
+        },
+        {
+          utc: 3,
+          defaultRange: 111.4446
+        },
+        {
+          utc: 4,
+          defaultRange: 555.2313
+        },
+        {
+          utc: 5,
+          defaultRange: 1.1231
+        },
+        {
+          utc: 6,
+          defaultRange: 2323.12
+        },
+        {
+          utc: 7,
+          defaultRange: 532.12
+        },
+        {
+          utc: 8,
+          defaultRange: 453.543
+        },
+        {
+          utc: 9,
+          defaultRange: 89.2111
+        },
+        {
+          utc: 10,
+          defaultRange: 0.543
         }
+      ];
+
+      setSampleSize(10);
+      whenTelemetryRequestedReturn(inputTelemetry);
 
-        function setTimeSystemTo(timeSystemKey) {
-            mockApi.time.timeSystem.and.returnValue({
-                key: timeSystemKey
-            });
+      return meanTelemetryProvider.request(mockDomainObject).then(function (averageData) {
+        expectAverageToBe(451.07815, averageData);
+      });
+    });
+
+    it('only averages values within its sample window', function () {
+      const inputTelemetry = [
+        {
+          utc: 1,
+          defaultRange: 123.1231
+        },
+        {
+          utc: 2,
+          defaultRange: 321.3223
+        },
+        {
+          utc: 3,
+          defaultRange: 111.4446
+        },
+        {
+          utc: 4,
+          defaultRange: 555.2313
+        },
+        {
+          utc: 5,
+          defaultRange: 1.1231
+        },
+        {
+          utc: 6,
+          defaultRange: 2323.12
+        },
+        {
+          utc: 7,
+          defaultRange: 532.12
+        },
+        {
+          utc: 8,
+          defaultRange: 453.543
+        },
+        {
+          utc: 9,
+          defaultRange: 89.2111
+        },
+        {
+          utc: 10,
+          defaultRange: 0.543
         }
+      ];
+
+      setSampleSize(5);
+      whenTelemetryRequestedReturn(inputTelemetry);
+
+      return meanTelemetryProvider.request(mockDomainObject).then(function (averageData) {
+        expectAverageToBe(679.70742, averageData);
+      });
     });
 
+    function expectAverageToBe(expectedValue, averageData) {
+      const averageDatum = averageData[averageData.length - 1];
+      expect(averageDatum[RANGE_KEY]).toBe(expectedValue);
+    }
+
+    function whenTelemetryRequestedReturn(telemetry) {
+      mockApi.telemetry.request.and.returnValue(resolvePromiseWith(telemetry));
+    }
+  });
+
+  function createMockObjects() {
+    mockDomainObject = {
+      telemetryPoint: 'someTelemetryPoint'
+    };
+    associatedObject = {};
+    mockApi.objects.get.and.returnValue(resolvePromiseWith(associatedObject));
+  }
+
+  function setSampleSize(sampleSize) {
+    mockDomainObject.samples = sampleSize;
+  }
+
+  function createMockApi() {
+    mockApi = {
+      telemetry: new MockTelemetryApi(),
+      objects: createMockObjectApi(),
+      time: createMockTimeApi()
+    };
+  }
+
+  function createMockObjectApi() {
+    return jasmine.createSpyObj('ObjectAPI', ['get']);
+  }
+
+  function mockObjectWithType(type) {
+    return {
+      type: type
+    };
+  }
+
+  function resolvePromiseWith(value) {
+    const promise = Promise.resolve(value);
+    allPromises.push(promise);
+
+    return promise;
+  }
+
+  function waitForPromises() {
+    return Promise.all(allPromises);
+  }
+
+  function createMockTimeApi() {
+    return jasmine.createSpyObj('timeApi', ['timeSystem']);
+  }
+
+  function setTimeSystemTo(timeSystemKey) {
+    mockApi.time.timeSystem.and.returnValue({
+      key: timeSystemKey
+    });
+  }
 });
diff --git a/src/plugins/telemetryMean/src/MockTelemetryApi.js b/src/plugins/telemetryMean/src/MockTelemetryApi.js
index 52b39be3760..0926d51cd9b 100644
--- a/src/plugins/telemetryMean/src/MockTelemetryApi.js
+++ b/src/plugins/telemetryMean/src/MockTelemetryApi.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,88 +20,78 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([], function () {
-
-    function MockTelemetryApi() {
-        this.createSpy('subscribe');
-        this.createSpy('getMetadata');
-
-        this.metadata = this.createMockMetadata();
-        this.setDefaultRangeTo('defaultRange');
-        this.unsubscribe = jasmine.createSpy('unsubscribe');
-        this.mockReceiveTelemetry = this.mockReceiveTelemetry.bind(this);
-    }
-
-    MockTelemetryApi.prototype.subscribe = function () {
-        return this.unsubscribe;
-    };
-
-    MockTelemetryApi.prototype.getMetadata = function (object) {
-        return this.metadata;
-    };
-
-    MockTelemetryApi.prototype.request = jasmine.createSpy('request');
-
-    MockTelemetryApi.prototype.getValueFormatter = function (valueMetadata) {
-        const mockValueFormatter = jasmine.createSpyObj("valueFormatter", [
-            "parse"
-        ]);
-
-        mockValueFormatter.parse.and.callFake(function (value) {
-            return value[valueMetadata.key];
-        });
-
-        return mockValueFormatter;
-    };
-
-    MockTelemetryApi.prototype.mockReceiveTelemetry = function (newTelemetryDatum) {
-        const subscriptionCallback = this.subscribe.calls.mostRecent().args[1];
-        subscriptionCallback(newTelemetryDatum);
+export default function MockTelemetryApi() {
+  this.createSpy('subscribe');
+  this.createSpy('getMetadata');
+
+  this.metadata = this.createMockMetadata();
+  this.setDefaultRangeTo('defaultRange');
+  this.unsubscribe = jasmine.createSpy('unsubscribe');
+  this.mockReceiveTelemetry = this.mockReceiveTelemetry.bind(this);
+}
+
+MockTelemetryApi.prototype.subscribe = function () {
+  return this.unsubscribe;
+};
+
+MockTelemetryApi.prototype.getMetadata = function (object) {
+  return this.metadata;
+};
+
+MockTelemetryApi.prototype.request = jasmine.createSpy('request');
+
+MockTelemetryApi.prototype.getValueFormatter = function (valueMetadata) {
+  const mockValueFormatter = jasmine.createSpyObj('valueFormatter', ['parse']);
+
+  mockValueFormatter.parse.and.callFake(function (value) {
+    return value[valueMetadata.key];
+  });
+
+  return mockValueFormatter;
+};
+
+MockTelemetryApi.prototype.mockReceiveTelemetry = function (newTelemetryDatum) {
+  const subscriptionCallback = this.subscribe.calls.mostRecent().args[1];
+  subscriptionCallback(newTelemetryDatum);
+};
+
+/**
+ * @private
+ */
+MockTelemetryApi.prototype.onRequestReturn = function (telemetryData) {
+  this.requestTelemetry = telemetryData;
+};
+
+/**
+ * @private
+ */
+MockTelemetryApi.prototype.setDefaultRangeTo = function (rangeKey) {
+  const mockMetadataValue = {
+    key: rangeKey
+  };
+  this.metadata.valuesForHints.and.returnValue([mockMetadataValue]);
+};
+
+/**
+ * @private
+ */
+MockTelemetryApi.prototype.createMockMetadata = function () {
+  const mockMetadata = jasmine.createSpyObj('metadata', ['value', 'valuesForHints']);
+
+  mockMetadata.value.and.callFake(function (key) {
+    return {
+      key: key
     };
-
-    /**
-     * @private
-     */
-    MockTelemetryApi.prototype.onRequestReturn = function (telemetryData) {
-        this.requestTelemetry = telemetryData;
-    };
-
-    /**
-     * @private
-     */
-    MockTelemetryApi.prototype.setDefaultRangeTo = function (rangeKey) {
-        const mockMetadataValue = {
-            key: rangeKey
-        };
-        this.metadata.valuesForHints.and.returnValue([mockMetadataValue]);
-    };
-
-    /**
-     * @private
-     */
-    MockTelemetryApi.prototype.createMockMetadata = function () {
-        const mockMetadata = jasmine.createSpyObj("metadata", [
-            'value',
-            'valuesForHints'
-        ]);
-
-        mockMetadata.value.and.callFake(function (key) {
-            return {
-                key: key
-            };
-        });
-
-        return mockMetadata;
-    };
-
-    /**
-     * @private
-     */
-    MockTelemetryApi.prototype.createSpy = function (functionName) {
-        this[functionName] = this[functionName].bind(this);
-        spyOn(this, functionName);
-        this[functionName].and.callThrough();
-    };
-
-    return MockTelemetryApi;
-});
+  });
+
+  return mockMetadata;
+};
+
+/**
+ * @private
+ */
+MockTelemetryApi.prototype.createSpy = function (functionName) {
+  this[functionName] = this[functionName].bind(this);
+  spyOn(this, functionName);
+  this[functionName].and.callThrough();
+};
diff --git a/src/plugins/telemetryMean/src/TelemetryAverager.js b/src/plugins/telemetryMean/src/TelemetryAverager.js
index 2a7ce17884b..5274819b187 100644
--- a/src/plugins/telemetryMean/src/TelemetryAverager.js
+++ b/src/plugins/telemetryMean/src/TelemetryAverager.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,101 +20,102 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([], function () {
-
-    function TelemetryAverager(telemetryAPI, timeAPI, domainObject, samples, averageDatumCallback) {
-        this.telemetryAPI = telemetryAPI;
-        this.timeAPI = timeAPI;
-
-        this.domainObject = domainObject;
-        this.samples = samples;
-        this.averagingWindow = [];
-
-        this.rangeKey = undefined;
-        this.rangeFormatter = undefined;
-        this.setRangeKeyAndFormatter();
-
-        // Defined dynamically based on current time system
-        this.domainKey = undefined;
-        this.domainFormatter = undefined;
-
-        this.averageDatumCallback = averageDatumCallback;
-    }
-
-    TelemetryAverager.prototype.createAverageDatum = function (telemetryDatum) {
-        this.setDomainKeyAndFormatter();
-
-        const timeValue = this.domainFormatter.parse(telemetryDatum);
-        const rangeValue = this.rangeFormatter.parse(telemetryDatum);
-
-        this.averagingWindow.push(rangeValue);
-
-        if (this.averagingWindow.length < this.samples) {
-            // We do not have enough data to produce an average
-            return;
-        } else if (this.averagingWindow.length > this.samples) {
-            //Do not let averaging window grow beyond defined sample size
-            this.averagingWindow.shift();
-        }
-
-        const averageValue = this.calculateMean();
-
-        const meanDatum = {};
-        meanDatum[this.domainKey] = timeValue;
-        meanDatum.value = averageValue;
-
-        this.averageDatumCallback(meanDatum);
-    };
-
-    /**
-     * @private
-     */
-    TelemetryAverager.prototype.calculateMean = function () {
-        let sum = 0;
-        let i = 0;
-
-        for (; i < this.averagingWindow.length; i++) {
-            sum += this.averagingWindow[i];
-        }
-
-        return sum / this.averagingWindow.length;
-    };
-
-    /**
-     * The mean telemetry filter produces domain values in whatever time
-     * system is currently selected from the conductor. Because this can
-     * change dynamically, the averager needs to be updated regularly with
-     * the current domain.
-     * @private
-     */
-    TelemetryAverager.prototype.setDomainKeyAndFormatter = function () {
-        const domainKey = this.timeAPI.timeSystem().key;
-        if (domainKey !== this.domainKey) {
-            this.domainKey = domainKey;
-            this.domainFormatter = this.getFormatter(domainKey);
-        }
-    };
-
-    /**
-     * @private
-     */
-    TelemetryAverager.prototype.setRangeKeyAndFormatter = function () {
-        const metadatas = this.telemetryAPI.getMetadata(this.domainObject);
-        const rangeValues = metadatas.valuesForHints(['range']);
-
-        this.rangeKey = rangeValues[0].key;
-        this.rangeFormatter = this.getFormatter(this.rangeKey);
-    };
-
-    /**
-     * @private
-     */
-    TelemetryAverager.prototype.getFormatter = function (key) {
-        const objectMetadata = this.telemetryAPI.getMetadata(this.domainObject);
-        const valueMetadata = objectMetadata.value(key);
-
-        return this.telemetryAPI.getValueFormatter(valueMetadata);
-    };
-
-    return TelemetryAverager;
-});
+export default function TelemetryAverager(
+  telemetryAPI,
+  timeAPI,
+  domainObject,
+  samples,
+  averageDatumCallback
+) {
+  this.telemetryAPI = telemetryAPI;
+  this.timeAPI = timeAPI;
+
+  this.domainObject = domainObject;
+  this.samples = samples;
+  this.averagingWindow = [];
+
+  this.rangeKey = undefined;
+  this.rangeFormatter = undefined;
+  this.setRangeKeyAndFormatter();
+
+  // Defined dynamically based on current time system
+  this.domainKey = undefined;
+  this.domainFormatter = undefined;
+
+  this.averageDatumCallback = averageDatumCallback;
+}
+
+TelemetryAverager.prototype.createAverageDatum = function (telemetryDatum) {
+  this.setDomainKeyAndFormatter();
+
+  const timeValue = this.domainFormatter.parse(telemetryDatum);
+  const rangeValue = this.rangeFormatter.parse(telemetryDatum);
+
+  this.averagingWindow.push(rangeValue);
+
+  if (this.averagingWindow.length < this.samples) {
+    // We do not have enough data to produce an average
+    return;
+  } else if (this.averagingWindow.length > this.samples) {
+    //Do not let averaging window grow beyond defined sample size
+    this.averagingWindow.shift();
+  }
+
+  const averageValue = this.calculateMean();
+
+  const meanDatum = {};
+  meanDatum[this.domainKey] = timeValue;
+  meanDatum.value = averageValue;
+
+  this.averageDatumCallback(meanDatum);
+};
+
+/**
+ * @private
+ */
+TelemetryAverager.prototype.calculateMean = function () {
+  let sum = 0;
+  let i = 0;
+
+  for (; i < this.averagingWindow.length; i++) {
+    sum += this.averagingWindow[i];
+  }
+
+  return sum / this.averagingWindow.length;
+};
+
+/**
+ * The mean telemetry filter produces domain values in whatever time
+ * system is currently selected from the conductor. Because this can
+ * change dynamically, the averager needs to be updated regularly with
+ * the current domain.
+ * @private
+ */
+TelemetryAverager.prototype.setDomainKeyAndFormatter = function () {
+  const domainKey = this.timeAPI.timeSystem().key;
+  if (domainKey !== this.domainKey) {
+    this.domainKey = domainKey;
+    this.domainFormatter = this.getFormatter(domainKey);
+  }
+};
+
+/**
+ * @private
+ */
+TelemetryAverager.prototype.setRangeKeyAndFormatter = function () {
+  const metadatas = this.telemetryAPI.getMetadata(this.domainObject);
+  const rangeValues = metadatas.valuesForHints(['range']);
+
+  this.rangeKey = rangeValues[0].key;
+  this.rangeFormatter = this.getFormatter(this.rangeKey);
+};
+
+/**
+ * @private
+ */
+TelemetryAverager.prototype.getFormatter = function (key) {
+  const objectMetadata = this.telemetryAPI.getMetadata(this.domainObject);
+  const valueMetadata = objectMetadata.value(key);
+
+  return this.telemetryAPI.getValueFormatter(valueMetadata);
+};
diff --git a/src/plugins/telemetryTable/TableConfigurationViewProvider.js b/src/plugins/telemetryTable/TableConfigurationViewProvider.js
index 2ca73e8cbc7..d0038497c20 100644
--- a/src/plugins/telemetryTable/TableConfigurationViewProvider.js
+++ b/src/plugins/telemetryTable/TableConfigurationViewProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,65 +20,65 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    'objectUtils',
-    './components/table-configuration.vue',
-    './TelemetryTableConfiguration',
-    'vue'
-], function (
-    objectUtils,
-    TableConfigurationComponent,
-    TelemetryTableConfiguration,
-    Vue
-) {
+import mount from 'utils/mount';
 
-    function TableConfigurationViewProvider(openmct) {
-        return {
-            key: 'table-configuration',
-            name: 'Telemetry Table Configuration',
-            canView: function (selection) {
-                if (selection.length !== 1 || selection[0].length === 0) {
-                    return false;
-                }
+import TableConfigurationComponent from './components/TableConfiguration.vue';
+import TelemetryTableConfiguration from './TelemetryTableConfiguration.js';
 
-                let object = selection[0][0].context.item;
+export default function TableConfigurationViewProvider(openmct) {
+  return {
+    key: 'table-configuration',
+    name: 'Config',
+    canView: function (selection) {
+      if (selection.length !== 1 || selection[0].length === 0) {
+        return false;
+      }
 
-                return object && object.type === 'table';
-            },
-            view: function (selection) {
-                let component;
-                let domainObject = selection[0][0].context.item;
-                let tableConfiguration = new TelemetryTableConfiguration(domainObject, openmct);
+      let object = selection[0][0].context.item;
 
-                return {
-                    show: function (element) {
-                        component = new Vue({
-                            el: element,
-                            components: {
-                                TableConfiguration: TableConfigurationComponent.default
-                            },
-                            provide: {
-                                openmct,
-                                tableConfiguration
-                            },
-                            template: '<table-configuration></table-configuration>'
-                        });
-                    },
-                    destroy: function () {
-                        if (component) {
-                            component.$destroy();
-                            component = undefined;
-                        }
+      return object && object.type === 'table';
+    },
+    view: function (selection) {
+      let _destroy = null;
+      let tableConfiguration;
+      const domainObject = selection[0][0].context.item;
 
-                        tableConfiguration = undefined;
-                    }
-                };
+      return {
+        show: function (element) {
+          tableConfiguration = new TelemetryTableConfiguration(domainObject, openmct);
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                TableConfiguration: TableConfigurationComponent
+              },
+              provide: {
+                openmct,
+                tableConfiguration
+              },
+              template: '<table-configuration></table-configuration>'
             },
-            priority: function () {
-                return 1;
+            {
+              app: openmct.app,
+              element
             }
-        };
-    }
+          );
+          _destroy = destroy;
+        },
+        showTab: function (isEditing) {
+          return isEditing;
+        },
+        priority: function () {
+          return 1;
+        },
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
 
-    return TableConfigurationViewProvider;
-});
+          tableConfiguration = undefined;
+        }
+      };
+    }
+  };
+}
diff --git a/src/plugins/telemetryTable/TelemetryTable.js b/src/plugins/telemetryTable/TelemetryTable.js
index f69a1f19952..07d5e52d0ed 100644
--- a/src/plugins/telemetryTable/TelemetryTable.js
+++ b/src/plugins/telemetryTable/TelemetryTable.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,352 +20,472 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    'EventEmitter',
-    'lodash',
-    './collections/BoundedTableRowCollection',
-    './collections/FilteredTableRowCollection',
-    './TelemetryTableNameColumn',
-    './TelemetryTableRow',
-    './TelemetryTableColumn',
-    './TelemetryTableUnitColumn',
-    './TelemetryTableConfiguration'
-], function (
-    EventEmitter,
-    _,
-    BoundedTableRowCollection,
-    FilteredTableRowCollection,
-    TelemetryTableNameColumn,
-    TelemetryTableRow,
-    TelemetryTableColumn,
-    TelemetryTableUnitColumn,
-    TelemetryTableConfiguration
-) {
-    class TelemetryTable extends EventEmitter {
-        constructor(domainObject, openmct) {
-            super();
-
-            this.domainObject = domainObject;
-            this.openmct = openmct;
-            this.rowCount = 100;
-            this.subscriptions = {};
-            this.tableComposition = undefined;
-            this.telemetryObjects = [];
-            this.datumCache = [];
-            this.outstandingRequests = 0;
-            this.configuration = new TelemetryTableConfiguration(domainObject, openmct);
-            this.paused = false;
-            this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-
-            this.addTelemetryObject = this.addTelemetryObject.bind(this);
-            this.removeTelemetryObject = this.removeTelemetryObject.bind(this);
-            this.isTelemetryObject = this.isTelemetryObject.bind(this);
-            this.refreshData = this.refreshData.bind(this);
-            this.requestDataFor = this.requestDataFor.bind(this);
-            this.updateFilters = this.updateFilters.bind(this);
-            this.buildOptionsFromConfiguration = this.buildOptionsFromConfiguration.bind(this);
-
-            this.filterObserver = undefined;
-
-            this.createTableRowCollections();
-
-            openmct.time.on('bounds', this.refreshData);
-            openmct.time.on('timeSystem', this.refreshData);
-        }
-
-        /**
-         * @private
-         */
-        addNameColumn(telemetryObject, metadataValues) {
-            let metadatum = metadataValues.find(m => m.key === 'name');
-            if (!metadatum) {
-                metadatum = {
-                    format: 'string',
-                    key: 'name',
-                    name: 'Name'
-                };
-            }
-
-            const column = new TelemetryTableNameColumn(this.openmct, telemetryObject, metadatum);
-
-            this.configuration.addSingleColumnForObject(telemetryObject, column);
-        }
-
-        initialize() {
-            if (this.domainObject.type === 'table') {
-                this.filterObserver = this.openmct.objects.observe(this.domainObject, 'configuration.filters', this.updateFilters);
-                this.filters = this.domainObject.configuration.filters;
-                this.loadComposition();
-            } else {
-                this.addTelemetryObject(this.domainObject);
-            }
-        }
-
-        createTableRowCollections() {
-            this.boundedRows = new BoundedTableRowCollection(this.openmct);
-            this.filteredRows = new FilteredTableRowCollection(this.boundedRows);
-
-            //Fetch any persisted default sort
-            let sortOptions = this.configuration.getConfiguration().sortOptions;
-
-            //If no persisted sort order, default to sorting by time system, ascending.
-            sortOptions = sortOptions || {
-                key: this.openmct.time.timeSystem().key,
-                direction: 'asc'
-            };
-            this.filteredRows.sortBy(sortOptions);
-        }
-
-        loadComposition() {
-            this.tableComposition = this.openmct.composition.get(this.domainObject);
-            if (this.tableComposition !== undefined) {
-                this.tableComposition.load().then((composition) => {
-
-                    composition = composition.filter(this.isTelemetryObject);
-                    composition.forEach(this.addTelemetryObject);
-
-                    this.tableComposition.on('add', this.addTelemetryObject);
-                    this.tableComposition.on('remove', this.removeTelemetryObject);
-                });
-            }
-        }
-
-        addTelemetryObject(telemetryObject) {
-            this.addColumnsForObject(telemetryObject, true);
-            this.requestDataFor(telemetryObject);
-            this.subscribeTo(telemetryObject);
-            this.telemetryObjects.push(telemetryObject);
-
-            this.emit('object-added', telemetryObject);
-        }
-
-        updateFilters(updatedFilters) {
-            let deepCopiedFilters = JSON.parse(JSON.stringify(updatedFilters));
-
-            if (this.filters && !_.isEqual(this.filters, deepCopiedFilters)) {
-                this.filters = deepCopiedFilters;
-                this.clearAndResubscribe();
-            } else {
-                this.filters = deepCopiedFilters;
-            }
-        }
-
-        clearAndResubscribe() {
-            this.filteredRows.clear();
-            this.boundedRows.clear();
-            Object.keys(this.subscriptions).forEach(this.unsubscribe, this);
-
-            this.telemetryObjects.forEach(this.requestDataFor.bind(this));
-            this.telemetryObjects.forEach(this.subscribeTo.bind(this));
-        }
-
-        removeTelemetryObject(objectIdentifier) {
-            this.configuration.removeColumnsForObject(objectIdentifier, true);
-            let keyString = this.openmct.objects.makeKeyString(objectIdentifier);
-            this.boundedRows.removeAllRowsForObject(keyString);
-            this.unsubscribe(keyString);
-            this.telemetryObjects = this.telemetryObjects.filter((object) => !_.eq(objectIdentifier, object.identifier));
-
-            this.emit('object-removed', objectIdentifier);
-        }
-
-        requestDataFor(telemetryObject) {
-            this.incrementOutstandingRequests();
-            let requestOptions = this.buildOptionsFromConfiguration(telemetryObject);
-
-            return this.openmct.telemetry.request(telemetryObject, requestOptions)
-                .then(telemetryData => {
-                    //Check that telemetry object has not been removed since telemetry was requested.
-                    if (!this.telemetryObjects.includes(telemetryObject)) {
-                        return;
-                    }
-
-                    let keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
-                    let columnMap = this.getColumnMapForObject(keyString);
-                    let limitEvaluator = this.openmct.telemetry.limitEvaluator(telemetryObject);
-                    this.processHistoricalData(telemetryData, columnMap, keyString, limitEvaluator);
-                }).finally(() => {
-                    this.decrementOutstandingRequests();
-                });
-        }
-
-        processHistoricalData(telemetryData, columnMap, keyString, limitEvaluator) {
-            let telemetryRows = telemetryData.map(datum => new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator));
-            this.boundedRows.add(telemetryRows);
-        }
-
-        /**
-         * @private
-         */
-        incrementOutstandingRequests() {
-            if (this.outstandingRequests === 0) {
-                this.emit('outstanding-requests', true);
-            }
-
-            this.outstandingRequests++;
-        }
-
-        /**
-         * @private
-         */
-        decrementOutstandingRequests() {
-            this.outstandingRequests--;
-
-            if (this.outstandingRequests === 0) {
-                this.emit('outstanding-requests', false);
-            }
-        }
-
-        refreshData(bounds, isTick) {
-            if (!isTick && this.outstandingRequests === 0) {
-                this.filteredRows.clear();
-                this.boundedRows.clear();
-                this.boundedRows.sortByTimeSystem(this.openmct.time.timeSystem());
-                this.telemetryObjects.forEach(this.requestDataFor);
-            }
-        }
-
-        clearData() {
-            this.filteredRows.clear();
-            this.boundedRows.clear();
-            this.emit('refresh');
-        }
-
-        getColumnMapForObject(objectKeyString) {
-            let columns = this.configuration.getColumns();
-
-            if (columns[objectKeyString]) {
-                return columns[objectKeyString].reduce((map, column) => {
-                    map[column.getKey()] = column;
-
-                    return map;
-                }, {});
-            }
-
-            return {};
-        }
-
-        addColumnsForObject(telemetryObject) {
-            let metadataValues = this.openmct.telemetry.getMetadata(telemetryObject).values();
-
-            this.addNameColumn(telemetryObject, metadataValues);
-            metadataValues.forEach(metadatum => {
-                if (metadatum.key === 'name') {
-                    return;
-                }
-
-                let column = this.createColumn(metadatum);
-                this.configuration.addSingleColumnForObject(telemetryObject, column);
-                // add units column if available
-                if (metadatum.unit !== undefined) {
-                    let unitColumn = this.createUnitColumn(metadatum);
-                    this.configuration.addSingleColumnForObject(telemetryObject, unitColumn);
-                }
-            });
-        }
-
-        createColumn(metadatum) {
-            return new TelemetryTableColumn(this.openmct, metadatum);
-        }
-
-        createUnitColumn(metadatum) {
-            return new TelemetryTableUnitColumn(this.openmct, metadatum);
-        }
-
-        subscribeTo(telemetryObject) {
-            let subscribeOptions = this.buildOptionsFromConfiguration(telemetryObject);
-            let keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
-            let columnMap = this.getColumnMapForObject(keyString);
-            let limitEvaluator = this.openmct.telemetry.limitEvaluator(telemetryObject);
-
-            this.subscriptions[keyString] = this.openmct.telemetry.subscribe(telemetryObject, (datum) => {
-                //Check that telemetry object has not been removed since telemetry was requested.
-                if (!this.telemetryObjects.includes(telemetryObject)) {
-                    return;
-                }
-
-                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));
-        }
-
-        isTelemetryObject(domainObject) {
-            return Object.prototype.hasOwnProperty.call(domainObject, 'telemetry');
-        }
-
-        buildOptionsFromConfiguration(telemetryObject) {
-            let keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
-            let filters = this.domainObject.configuration
-                && this.domainObject.configuration.filters
-                && this.domainObject.configuration.filters[keyString];
-
-            return {filters} || {};
-        }
-
-        unsubscribe(keyString) {
-            this.subscriptions[keyString]();
-            delete this.subscriptions[keyString];
-        }
-
-        sortBy(sortOptions) {
-            this.filteredRows.sortBy(sortOptions);
-
-            if (this.openmct.editor.isEditing()) {
-                let configuration = this.configuration.getConfiguration();
-                configuration.sortOptions = sortOptions;
-                this.configuration.updateConfiguration(configuration);
-            }
-        }
-
-        pause() {
-            this.paused = true;
-            this.boundedRows.unsubscribeFromBounds();
-        }
-
-        unpause() {
-            this.paused = false;
-            this.processDatumCache();
-            this.boundedRows.subscribeToBounds();
-        }
-
-        destroy() {
-            this.boundedRows.destroy();
-            this.filteredRows.destroy();
-            Object.keys(this.subscriptions).forEach(this.unsubscribe, this);
-            this.openmct.time.off('bounds', this.refreshData);
-            this.openmct.time.off('timeSystem', this.refreshData);
-
-            if (this.filterObserver) {
-                this.filterObserver();
-            }
-
-            if (this.tableComposition !== undefined) {
-                this.tableComposition.off('add', this.addTelemetryObject);
-                this.tableComposition.off('remove', this.removeTelemetryObject);
-            }
-        }
+import EventEmitter from 'EventEmitter';
+import _ from 'lodash';
+
+import StalenessUtils from '../../utils/staleness.js';
+import TableRowCollection from './collections/TableRowCollection.js';
+import TelemetryTableColumn from './TelemetryTableColumn.js';
+import TelemetryTableConfiguration from './TelemetryTableConfiguration.js';
+import TelemetryTableNameColumn from './TelemetryTableNameColumn.js';
+import TelemetryTableRow from './TelemetryTableRow.js';
+import TelemetryTableUnitColumn from './TelemetryTableUnitColumn.js';
+
+export default class TelemetryTable extends EventEmitter {
+  constructor(domainObject, openmct) {
+    super();
+
+    this.domainObject = domainObject;
+    this.openmct = openmct;
+    this.tableComposition = undefined;
+    this.datumCache = [];
+    this.configuration = new TelemetryTableConfiguration(domainObject, openmct);
+    this.telemetryMode = this.configuration.getTelemetryMode();
+    this.rowLimit = this.configuration.getRowLimit();
+    this.paused = false;
+    this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+
+    this.telemetryObjects = {};
+    this.subscribedStaleObjects = new Map();
+    this.telemetryCollections = {};
+    this.delayedActions = [];
+    this.outstandingRequests = 0;
+    this.stalenessSubscription = {};
+
+    this.addTelemetryObject = this.addTelemetryObject.bind(this);
+    this.removeTelemetryObject = this.removeTelemetryObject.bind(this);
+    this.removeTelemetryCollection = this.removeTelemetryCollection.bind(this);
+    this.incrementOutstandingRequests = this.incrementOutstandingRequests.bind(this);
+    this.decrementOutstandingRequests = this.decrementOutstandingRequests.bind(this);
+    this.resetRowsFromAllData = this.resetRowsFromAllData.bind(this);
+    this.isTelemetryObject = this.isTelemetryObject.bind(this);
+    this.updateFilters = this.updateFilters.bind(this);
+    this.clearData = this.clearData.bind(this);
+    this.buildOptionsFromConfiguration = this.buildOptionsFromConfiguration.bind(this);
+
+    this.filterObserver = undefined;
+
+    this.createTableRowCollections();
+    this.resubscribeToStaleness = this.resubscribeAllObjectsToStaleness.bind(this);
+    this.openmct.time.on('clockChanged', this.resubscribeToStaleness);
+  }
+
+  /**
+   * @private
+   */
+  addNameColumn(telemetryObject, metadataValues) {
+    let metadatum = metadataValues.find((m) => m.key === 'name');
+    if (!metadatum) {
+      metadatum = {
+        format: 'string',
+        key: 'name',
+        name: 'Name'
+      };
     }
 
-    return TelemetryTable;
-});
+    const column = new TelemetryTableNameColumn(this.openmct, telemetryObject, metadatum);
+
+    this.configuration.addSingleColumnForObject(telemetryObject, column);
+  }
+
+  initialize() {
+    if (this.domainObject.type === 'table') {
+      this.filterObserver = this.openmct.objects.observe(
+        this.domainObject,
+        'configuration.filters',
+        this.updateFilters
+      );
+      this.filters = this.domainObject.configuration.filters;
+      this.loadComposition();
+    } else {
+      this.addTelemetryObject(this.domainObject);
+    }
+  }
+
+  updateTelemetryMode(mode) {
+    if (this.telemetryMode === mode) {
+      return;
+    }
+
+    this.telemetryMode = mode;
+
+    this.updateRowLimit();
+
+    this.clearAndResubscribe();
+  }
+
+  updateRowLimit() {
+    if (this.telemetryMode === 'performance') {
+      this.tableRows.setLimit(this.rowLimit);
+    } else {
+      this.tableRows.removeLimit();
+    }
+  }
+
+  createTableRowCollections() {
+    this.tableRows = new TableRowCollection();
+
+    //Fetch any persisted default sort
+    let sortOptions = this.configuration.getConfiguration().sortOptions;
+
+    //If no persisted sort order, default to sorting by time system, descending.
+    sortOptions = sortOptions || {
+      key: this.openmct.time.timeSystem().key,
+      direction: 'desc'
+    };
+
+    this.updateRowLimit();
+
+    this.tableRows.sortBy(sortOptions);
+    this.tableRows.on('resetRowsFromAllData', this.resetRowsFromAllData);
+  }
+
+  loadComposition() {
+    this.tableComposition = this.openmct.composition.get(this.domainObject);
+
+    if (this.tableComposition !== undefined) {
+      this.tableComposition.load().then((composition) => {
+        composition = composition.filter(this.isTelemetryObject);
+        composition.forEach(this.addTelemetryObject);
+
+        this.tableComposition.on('add', this.addTelemetryObject);
+        this.tableComposition.on('remove', this.removeTelemetryObject);
+      });
+    }
+  }
+
+  addTelemetryObject(telemetryObject) {
+    this.addColumnsForObject(telemetryObject, true);
+
+    const keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+    let requestOptions = this.buildOptionsFromConfiguration(telemetryObject);
+    let columnMap = this.getColumnMapForObject(keyString);
+    let limitEvaluator = this.openmct.telemetry.limitEvaluator(telemetryObject);
+
+    const telemetryProcessor = this.getTelemetryProcessor(keyString, columnMap, limitEvaluator);
+    const telemetryRemover = this.getTelemetryRemover();
+
+    this.removeTelemetryCollection(keyString);
+
+    if (this.telemetryMode === 'performance') {
+      requestOptions.size = this.rowLimit;
+      requestOptions.enforceSize = true;
+    }
+
+    this.telemetryCollections[keyString] = this.openmct.telemetry.requestCollection(
+      telemetryObject,
+      requestOptions
+    );
+
+    this.telemetryCollections[keyString].on('requestStarted', this.incrementOutstandingRequests);
+    this.telemetryCollections[keyString].on('requestEnded', this.decrementOutstandingRequests);
+    this.telemetryCollections[keyString].on('remove', telemetryRemover);
+    this.telemetryCollections[keyString].on('add', telemetryProcessor);
+    this.telemetryCollections[keyString].on('clear', this.clearData);
+    this.telemetryCollections[keyString].load();
+
+    this.subscribeToStaleness(telemetryObject);
+
+    this.telemetryObjects[keyString] = {
+      telemetryObject,
+      keyString,
+      requestOptions,
+      columnMap,
+      limitEvaluator
+    };
+
+    this.emit('object-added', telemetryObject);
+  }
+
+  resubscribeAllObjectsToStaleness() {
+    if (!this.subscribedStaleObjects || this.subscribedStaleObjects.size < 1) {
+      return;
+    }
+    for (const [, telemetryObject] of this.subscribedStaleObjects) {
+      this.subscribeToStaleness(telemetryObject);
+    }
+  }
+
+  subscribeToStaleness(domainObject) {
+    const keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
+    if (this.stalenessSubscription?.[keyString]) {
+      this.unsubscribeFromStaleness(domainObject.identifier);
+    }
+
+    this.stalenessSubscription[keyString] = {};
+    this.stalenessSubscription[keyString].stalenessUtils = new StalenessUtils(
+      this.openmct,
+      domainObject
+    );
+    this.openmct.telemetry.isStale(domainObject).then((stalenessResponse) => {
+      if (stalenessResponse !== undefined) {
+        this.handleStaleness(keyString, stalenessResponse);
+      }
+    });
+    const stalenessSubscription = this.openmct.telemetry.subscribeToStaleness(
+      domainObject,
+      (stalenessResponse) => {
+        this.handleStaleness(keyString, stalenessResponse);
+      }
+    );
+    this.subscribedStaleObjects.set(keyString, domainObject);
+
+    this.stalenessSubscription[keyString].unsubscribe = stalenessSubscription;
+  }
+
+  handleStaleness(keyString, stalenessResponse, skipCheck = false) {
+    if (
+      skipCheck ||
+      this.stalenessSubscription[keyString].stalenessUtils.shouldUpdateStaleness(
+        stalenessResponse,
+        keyString
+      )
+    ) {
+      this.emit('telemetry-staleness', {
+        keyString,
+        stalenessResponse: stalenessResponse
+      });
+    }
+  }
+
+  getTelemetryProcessor(keyString, columnMap, limitEvaluator) {
+    return (telemetry) => {
+      //Check that telemetry object has not been removed since telemetry was requested.
+      if (!this.telemetryObjects[keyString]) {
+        return;
+      }
+
+      const metadataValue = this.openmct.telemetry
+        .getMetadata(this.telemetryObjects[keyString].telemetryObject)
+        .getUseToUpdateInPlaceValue();
+
+      let telemetryRows = telemetry.map(
+        (datum) =>
+          new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator, metadataValue?.key)
+      );
+
+      if (this.paused) {
+        this.delayedActions.push(this.tableRows.addRows.bind(this, telemetryRows, 'add'));
+      } else {
+        this.tableRows.addRows(telemetryRows);
+      }
+    };
+  }
+
+  getTelemetryRemover() {
+    return (telemetry) => {
+      if (this.paused) {
+        this.delayedActions.push(this.tableRows.removeRowsByData.bind(this, telemetry));
+      } else {
+        this.tableRows.removeRowsByData(telemetry);
+      }
+    };
+  }
+
+  /**
+   * @private
+   */
+  incrementOutstandingRequests() {
+    if (this.outstandingRequests === 0) {
+      this.emit('outstanding-requests', true);
+    }
+
+    this.outstandingRequests++;
+  }
+
+  /**
+   * @private
+   */
+  decrementOutstandingRequests() {
+    this.outstandingRequests--;
+
+    if (this.outstandingRequests === 0) {
+      this.emit('outstanding-requests', false);
+    }
+  }
+
+  // will pull all necessary information for all existing bounded telemetry
+  // and pass to table row collection to reset without making any new requests
+  // triggered by filtering
+  resetRowsFromAllData() {
+    let allRows = [];
+
+    Object.keys(this.telemetryCollections).forEach((keyString) => {
+      let { columnMap, limitEvaluator } = this.telemetryObjects[keyString];
+
+      const metadataValue = this.openmct.telemetry
+        .getMetadata(this.telemetryObjects[keyString].telemetryObject)
+        .getUseToUpdateInPlaceValue();
+
+      this.telemetryCollections[keyString].getAll().forEach((datum) => {
+        allRows.push(
+          new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator, metadataValue?.key)
+        );
+      });
+    });
+
+    this.tableRows.clearRowsFromTableAndFilter(allRows);
+  }
+
+  updateFilters(updatedFilters) {
+    let deepCopiedFilters = JSON.parse(JSON.stringify(updatedFilters));
+
+    if (this.filters && !_.isEqual(this.filters, deepCopiedFilters)) {
+      this.filters = deepCopiedFilters;
+      this.tableRows.clear();
+      this.clearAndResubscribe();
+    } else {
+      this.filters = deepCopiedFilters;
+    }
+  }
+
+  clearAndResubscribe() {
+    let objectKeys = Object.keys(this.telemetryObjects);
+
+    this.tableRows.clear();
+    objectKeys.forEach((keyString) => {
+      this.addTelemetryObject(this.telemetryObjects[keyString].telemetryObject);
+    });
+  }
+
+  removeTelemetryObject(objectIdentifier) {
+    const keyString = this.openmct.objects.makeKeyString(objectIdentifier);
+
+    this.configuration.removeColumnsForObject(objectIdentifier, true);
+    this.tableRows.removeRowsByObject(keyString);
+
+    this.removeTelemetryCollection(keyString);
+    delete this.telemetryObjects[keyString];
+
+    this.emit('object-removed', objectIdentifier);
+
+    this.unsubscribeFromStaleness(objectIdentifier);
+  }
+
+  unsubscribeFromStaleness(objectIdentifier) {
+    const keyString = this.openmct.objects.makeKeyString(objectIdentifier);
+    const SKIP_CHECK = true;
+
+    this.stalenessSubscription[keyString].unsubscribe();
+    this.stalenessSubscription[keyString].stalenessUtils.destroy();
+    this.handleStaleness(keyString, { isStale: false }, SKIP_CHECK);
+    delete this.stalenessSubscription[keyString];
+  }
+
+  clearData() {
+    this.tableRows.clear();
+    this.emit('refresh');
+  }
+
+  addColumnsForObject(telemetryObject) {
+    const metadata = this.openmct.telemetry.getMetadata(telemetryObject);
+    let metadataValues = metadata.values();
+
+    this.addNameColumn(telemetryObject, metadataValues);
+    metadataValues.forEach((metadatum) => {
+      if (metadatum.key === 'name' || metadata.isInPlaceUpdateValue(metadatum)) {
+        return;
+      }
+
+      let column = this.createColumn(metadatum);
+      this.configuration.addSingleColumnForObject(telemetryObject, column);
+      // add units column if available
+      if (metadatum.unit !== undefined) {
+        let unitColumn = this.createUnitColumn(metadatum);
+        this.configuration.addSingleColumnForObject(telemetryObject, unitColumn);
+      }
+    });
+  }
+
+  getColumnMapForObject(objectKeyString) {
+    let columns = this.configuration.getColumns();
+
+    if (columns[objectKeyString]) {
+      return columns[objectKeyString].reduce((map, column) => {
+        map[column.getKey()] = column;
+
+        return map;
+      }, {});
+    }
+
+    return {};
+  }
+
+  buildOptionsFromConfiguration(telemetryObject) {
+    let keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+    let filters =
+      this.domainObject.configuration &&
+      this.domainObject.configuration.filters &&
+      this.domainObject.configuration.filters[keyString];
+
+    return { filters } || {};
+  }
+
+  createColumn(metadatum) {
+    return new TelemetryTableColumn(this.openmct, metadatum);
+  }
+
+  createUnitColumn(metadatum) {
+    return new TelemetryTableUnitColumn(this.openmct, metadatum);
+  }
+
+  isTelemetryObject(domainObject) {
+    return Object.prototype.hasOwnProperty.call(domainObject, 'telemetry');
+  }
+
+  sortBy(sortOptions) {
+    this.tableRows.sortBy(sortOptions);
+
+    if (this.openmct.editor.isEditing()) {
+      let configuration = this.configuration.getConfiguration();
+      configuration.sortOptions = sortOptions;
+      this.configuration.updateConfiguration(configuration);
+    }
+  }
+
+  runDelayedActions() {
+    this.delayedActions.forEach((action) => action());
+    this.delayedActions = [];
+  }
+
+  removeTelemetryCollection(keyString) {
+    if (this.telemetryCollections[keyString]) {
+      this.telemetryCollections[keyString].destroy();
+      this.telemetryCollections[keyString] = undefined;
+      delete this.telemetryCollections[keyString];
+    }
+  }
+
+  pause() {
+    this.paused = true;
+  }
+
+  unpause() {
+    this.paused = false;
+    this.runDelayedActions();
+  }
+
+  destroy() {
+    this.tableRows.destroy();
+
+    this.tableRows.off('resetRowsFromAllData', this.resetRowsFromAllData);
+    this.openmct.time.off('clockChanged', this.resubscribeToStaleness);
+
+    let keystrings = Object.keys(this.telemetryCollections);
+    keystrings.forEach(this.removeTelemetryCollection);
+
+    if (this.filterObserver) {
+      this.filterObserver();
+    }
+
+    Object.values(this.stalenessSubscription).forEach((stalenessSubscription) => {
+      stalenessSubscription.unsubscribe();
+      stalenessSubscription.stalenessUtils.destroy();
+    });
+
+    if (this.tableComposition !== undefined) {
+      this.tableComposition.off('add', this.addTelemetryObject);
+      this.tableComposition.off('remove', this.removeTelemetryObject);
+    }
+  }
+}
diff --git a/src/plugins/telemetryTable/TelemetryTableColumn.js b/src/plugins/telemetryTable/TelemetryTableColumn.js
index 0c777ab1331..750fef0bfa9 100644
--- a/src/plugins/telemetryTable/TelemetryTableColumn.js
+++ b/src/plugins/telemetryTable/TelemetryTableColumn.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,48 +19,44 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-define(function () {
-    class TelemetryTableColumn {
-        constructor(openmct, metadatum, options = {selectable: false}) {
-            this.metadatum = metadatum;
-            this.formatter = openmct.telemetry.getValueFormatter(metadatum);
-            this.titleValue = this.metadatum.name;
-            this.selectable = options.selectable;
-        }
-
-        getKey() {
-            return this.metadatum.key;
-        }
-
-        getTitle() {
-            return this.metadatum.name;
-        }
-
-        getMetadatum() {
-            return this.metadatum;
-        }
-
-        hasValueForDatum(telemetryDatum) {
-            return Object.prototype.hasOwnProperty.call(telemetryDatum, this.metadatum.source);
-        }
-
-        getRawValue(telemetryDatum) {
-            return telemetryDatum[this.metadatum.source];
-        }
-
-        getFormattedValue(telemetryDatum) {
-            let formattedValue = this.formatter.format(telemetryDatum);
-            if (formattedValue !== undefined && typeof formattedValue !== 'string') {
-                return formattedValue.toString();
-            } else {
-                return formattedValue;
-            }
-        }
-
-        getParsedValue(telemetryDatum) {
-            return this.formatter.parse(telemetryDatum);
-        }
+export default class TelemetryTableColumn {
+  constructor(openmct, metadatum, options = { selectable: false }) {
+    this.metadatum = metadatum;
+    this.formatter = openmct.telemetry.getValueFormatter(metadatum);
+    this.titleValue = this.metadatum.name;
+    this.selectable = options.selectable;
+  }
+
+  getKey() {
+    return this.metadatum.key;
+  }
+
+  getTitle() {
+    return this.metadatum.name;
+  }
+
+  getMetadatum() {
+    return this.metadatum;
+  }
+
+  hasValueForDatum(telemetryDatum) {
+    return Object.prototype.hasOwnProperty.call(telemetryDatum, this.metadatum.source);
+  }
+
+  getRawValue(telemetryDatum) {
+    return telemetryDatum[this.metadatum.source];
+  }
+
+  getFormattedValue(telemetryDatum) {
+    let formattedValue = this.formatter.format(telemetryDatum);
+    if (formattedValue !== undefined && typeof formattedValue !== 'string') {
+      return formattedValue.toString();
+    } else {
+      return formattedValue;
     }
+  }
 
-    return TelemetryTableColumn;
-});
+  getParsedValue(telemetryDatum) {
+    return this.formatter.parse(telemetryDatum);
+  }
+}
diff --git a/src/plugins/telemetryTable/TelemetryTableConfiguration.js b/src/plugins/telemetryTable/TelemetryTableConfiguration.js
index 8e506266964..9247713c8d4 100644
--- a/src/plugins/telemetryTable/TelemetryTableConfiguration.js
+++ b/src/plugins/telemetryTable/TelemetryTableConfiguration.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,147 +20,188 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    'lodash',
-    'EventEmitter'
-], function (_, EventEmitter) {
-
-    class TelemetryTableConfiguration extends EventEmitter {
-        constructor(domainObject, openmct) {
-            super();
-
-            this.domainObject = domainObject;
-            this.openmct = openmct;
-            this.columns = {};
-
-            this.removeColumnsForObject = this.removeColumnsForObject.bind(this);
-            this.objectMutated = this.objectMutated.bind(this);
-
-            this.unlistenFromMutation = openmct.objects.observe(domainObject, 'configuration', this.objectMutated);
-        }
-
-        getConfiguration() {
-            let configuration = this.domainObject.configuration || {};
-            configuration.hiddenColumns = configuration.hiddenColumns || {};
-            configuration.columnWidths = configuration.columnWidths || {};
-            configuration.columnOrder = configuration.columnOrder || [];
-            configuration.cellFormat = configuration.cellFormat || {};
-            configuration.autosize = configuration.autosize === undefined ? true : configuration.autosize;
-
-            return configuration;
-        }
-
-        updateConfiguration(configuration) {
-            this.openmct.objects.mutate(this.domainObject, 'configuration', configuration);
-        }
-
-        /**
-         * @private
-         * @param {*} object
-         */
-        objectMutated(configuration) {
-            if (configuration !== undefined) {
-                this.emit('change', configuration);
-            }
-        }
-
-        addSingleColumnForObject(telemetryObject, column, position) {
-            let objectKeyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
-            this.columns[objectKeyString] = this.columns[objectKeyString] || [];
-            position = position || this.columns[objectKeyString].length;
-            this.columns[objectKeyString].splice(position, 0, column);
-        }
-
-        removeColumnsForObject(objectIdentifier) {
-            let objectKeyString = this.openmct.objects.makeKeyString(objectIdentifier);
-            let columnsToRemove = this.columns[objectKeyString];
-
-            delete this.columns[objectKeyString];
-
-            let configuration = this.domainObject.configuration;
-            let configurationChanged = false;
-            columnsToRemove.forEach((column) => {
-                //There may be more than one column with the same key (eg. time system columns)
-                if (!this.hasColumnWithKey(column.getKey())) {
-                    delete configuration.hiddenColumns[column.getKey()];
-                    configurationChanged = true;
-                }
-            });
-            if (configurationChanged) {
-                this.updateConfiguration(configuration);
-            }
-        }
-
-        hasColumnWithKey(columnKey) {
-            return _.flatten(Object.values(this.columns))
-                .some(column => column.getKey() === columnKey);
-        }
-
-        getColumns() {
-            return this.columns;
-        }
-
-        getAllHeaders() {
-            let flattenedColumns = _.flatten(Object.values(this.columns));
-            /* eslint-disable you-dont-need-lodash-underscore/uniq */
-            let headers = _.uniq(flattenedColumns, false, column => column.getKey())
-                .reduce(fromColumnsToHeadersMap, {});
-            /* eslint-enable you-dont-need-lodash-underscore/uniq */
-            function fromColumnsToHeadersMap(headersMap, column) {
-                headersMap[column.getKey()] = column.getTitle();
-
-                return headersMap;
-            }
-
-            return headers;
-        }
-
-        getVisibleHeaders() {
-            let allHeaders = this.getAllHeaders();
-            let configuration = this.getConfiguration();
-
-            let orderedColumns = this.getColumnOrder();
-            let unorderedColumns = _.difference(Object.keys(allHeaders), orderedColumns);
-
-            return orderedColumns.concat(unorderedColumns)
-                .filter((headerKey) => {
-                    return configuration.hiddenColumns[headerKey] !== true;
-                })
-                .reduce((headers, headerKey) => {
-                    headers[headerKey] = allHeaders[headerKey];
-
-                    return headers;
-                }, {});
-        }
-
-        getColumnWidths() {
-            let configuration = this.getConfiguration();
-
-            return configuration.columnWidths;
-        }
-
-        setColumnWidths(columnWidths) {
-            let configuration = this.getConfiguration();
-            configuration.columnWidths = columnWidths;
-            this.updateConfiguration(configuration);
-        }
-
-        getColumnOrder() {
-            let configuration = this.getConfiguration();
-
-            return configuration.columnOrder;
-        }
-
-        setColumnOrder(columnOrder) {
-            let configuration = this.getConfiguration();
-            configuration.columnOrder = columnOrder;
-            this.updateConfiguration(configuration);
-        }
-
-        destroy() {
-            this.unlistenFromMutation();
-        }
+import EventEmitter from 'EventEmitter';
+import _ from 'lodash';
+
+export default class TelemetryTableConfiguration extends EventEmitter {
+  constructor(domainObject, openmct) {
+    super();
+
+    this.domainObject = domainObject;
+    this.openmct = openmct;
+    this.columns = {};
+
+    this.removeColumnsForObject = this.removeColumnsForObject.bind(this);
+    this.objectMutated = this.objectMutated.bind(this);
+
+    this.unlistenFromMutation = openmct.objects.observe(
+      domainObject,
+      'configuration',
+      this.objectMutated
+    );
+  }
+
+  getConfiguration() {
+    let configuration = this.domainObject.configuration || {};
+    configuration.hiddenColumns = configuration.hiddenColumns || {};
+    configuration.columnWidths = configuration.columnWidths || {};
+    configuration.columnOrder = configuration.columnOrder || [];
+    configuration.cellFormat = configuration.cellFormat || {};
+    configuration.autosize = configuration.autosize === undefined ? true : configuration.autosize;
+    // anything that doesn't have a telemetryMode existed before the change and should stay as it was for consistency
+    configuration.telemetryMode = configuration.telemetryMode ?? 'unlimited';
+    configuration.persistModeChange = configuration.persistModeChange ?? true;
+    configuration.rowLimit = configuration.rowLimit ?? 50;
+
+    return configuration;
+  }
+
+  updateConfiguration(configuration) {
+    this.openmct.objects.mutate(this.domainObject, 'configuration', configuration);
+  }
+
+  /**
+   * @private
+   * @param {*} object
+   */
+  objectMutated(configuration) {
+    if (configuration !== undefined) {
+      this.emit('change', configuration);
     }
+  }
+
+  addSingleColumnForObject(telemetryObject, column, position) {
+    let objectKeyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+    this.columns[objectKeyString] = this.columns[objectKeyString] || [];
+    position = position || this.columns[objectKeyString].length;
+    this.columns[objectKeyString].splice(position, 0, column);
+  }
+
+  removeColumnsForObject(objectIdentifier) {
+    let objectKeyString = this.openmct.objects.makeKeyString(objectIdentifier);
+    let columnsToRemove = this.columns[objectKeyString];
+
+    delete this.columns[objectKeyString];
+
+    let configuration = this.domainObject.configuration;
+    let configurationChanged = false;
+    columnsToRemove.forEach((column) => {
+      //There may be more than one column with the same key (eg. time system columns)
+      if (!this.hasColumnWithKey(column.getKey())) {
+        delete configuration.hiddenColumns[column.getKey()];
+        configurationChanged = true;
+      }
+    });
+    if (configurationChanged) {
+      this.updateConfiguration(configuration);
+    }
+  }
+
+  hasColumnWithKey(columnKey) {
+    return _.flatten(Object.values(this.columns)).some((column) => column.getKey() === columnKey);
+  }
+
+  getColumns() {
+    return this.columns;
+  }
+
+  getAllHeaders() {
+    let flattenedColumns = _.flatten(Object.values(this.columns));
+    /* eslint-disable you-dont-need-lodash-underscore/uniq */
+    let headers = _.uniq(flattenedColumns, false, (column) => column.getKey()).reduce(
+      fromColumnsToHeadersMap,
+      {}
+    );
+    /* eslint-enable you-dont-need-lodash-underscore/uniq */
+    function fromColumnsToHeadersMap(headersMap, column) {
+      headersMap[column.getKey()] = column.getTitle();
+
+      return headersMap;
+    }
+
+    return headers;
+  }
+
+  getVisibleHeaders() {
+    let allHeaders = this.getAllHeaders();
+    let configuration = this.getConfiguration();
+
+    let orderedColumns = this.getColumnOrder();
+    let unorderedColumns = _.difference(Object.keys(allHeaders), orderedColumns);
+
+    return orderedColumns
+      .concat(unorderedColumns)
+      .filter((headerKey) => {
+        return configuration.hiddenColumns[headerKey] !== true;
+      })
+      .reduce((headers, headerKey) => {
+        headers[headerKey] = allHeaders[headerKey];
+
+        return headers;
+      }, {});
+  }
+
+  getTelemetryMode() {
+    let configuration = this.getConfiguration();
+
+    return configuration.telemetryMode;
+  }
+
+  setTelemetryMode(mode) {
+    let configuration = this.getConfiguration();
+    configuration.telemetryMode = mode;
+    this.updateConfiguration(configuration);
+  }
+
+  getRowLimit() {
+    let configuration = this.getConfiguration();
+
+    return configuration.rowLimit;
+  }
+
+  setRowLimit(limit) {
+    let configuration = this.getConfiguration();
+    configuration.rowLimit = limit;
+    this.updateConfiguration(configuration);
+  }
+
+  getPersistModeChange() {
+    let configuration = this.getConfiguration();
+
+    return configuration.persistModeChange;
+  }
+
+  setPersistModeChange(value) {
+    let configuration = this.getConfiguration();
+    configuration.persistModeChange = value;
+    this.updateConfiguration(configuration);
+  }
+
+  getColumnWidths() {
+    let configuration = this.getConfiguration();
+
+    return configuration.columnWidths;
+  }
+
+  setColumnWidths(columnWidths) {
+    let configuration = this.getConfiguration();
+    configuration.columnWidths = columnWidths;
+    this.updateConfiguration(configuration);
+  }
+
+  getColumnOrder() {
+    let configuration = this.getConfiguration();
+
+    return configuration.columnOrder;
+  }
+
+  setColumnOrder(columnOrder) {
+    let configuration = this.getConfiguration();
+    configuration.columnOrder = columnOrder;
+    this.updateConfiguration(configuration);
+  }
 
-    return TelemetryTableConfiguration;
-});
+  destroy() {
+    this.unlistenFromMutation();
+  }
+}
diff --git a/src/plugins/telemetryTable/TelemetryTableNameColumn.js b/src/plugins/telemetryTable/TelemetryTableNameColumn.js
index 9b37d5fbea3..43d8d4f207a 100644
--- a/src/plugins/telemetryTable/TelemetryTableNameColumn.js
+++ b/src/plugins/telemetryTable/TelemetryTableNameColumn.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,26 +19,21 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-define([
-    './TelemetryTableColumn.js'
-], function (
-    TelemetryTableColumn
-) {
-    class TelemetryTableNameColumn extends TelemetryTableColumn {
-        constructor(openmct, telemetryObject, metadatum) {
-            super(openmct, metadatum);
 
-            this.telemetryObject = telemetryObject;
-        }
+import TelemetryTableColumn from './TelemetryTableColumn.js';
 
-        getRawValue() {
-            return this.telemetryObject.name;
-        }
+export default class TelemetryTableNameColumn extends TelemetryTableColumn {
+  constructor(openmct, telemetryObject, metadatum) {
+    super(openmct, metadatum);
 
-        getFormattedValue() {
-            return this.telemetryObject.name;
-        }
-    }
+    this.telemetryObject = telemetryObject;
+  }
 
-    return TelemetryTableNameColumn;
-});
+  getRawValue() {
+    return this.telemetryObject.name;
+  }
+
+  getFormattedValue() {
+    return this.telemetryObject.name;
+  }
+}
diff --git a/src/plugins/telemetryTable/TelemetryTableRow.js b/src/plugins/telemetryTable/TelemetryTableRow.js
index 66692912ed8..1b8fcfd7280 100644
--- a/src/plugins/telemetryTable/TelemetryTableRow.js
+++ b/src/plugins/telemetryTable/TelemetryTableRow.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,94 +20,104 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([], function () {
-    class TelemetryTableRow {
-        constructor(datum, columns, objectKeyString, limitEvaluator) {
-            this.columns = columns;
+export default class TelemetryTableRow {
+  constructor(datum, columns, objectKeyString, limitEvaluator, inPlaceUpdateKey) {
+    this.columns = columns;
 
-            this.datum = createNormalizedDatum(datum, columns);
-            this.fullDatum = datum;
-            this.limitEvaluator = limitEvaluator;
-            this.objectKeyString = objectKeyString;
-        }
-
-        getFormattedDatum(headers) {
-            return Object.keys(headers).reduce((formattedDatum, columnKey) => {
-                formattedDatum[columnKey] = this.getFormattedValue(columnKey);
-
-                return formattedDatum;
-            }, {});
-        }
-
-        getFormattedValue(key) {
-            let column = this.columns[key];
+    this.datum = createNormalizedDatum(datum, columns);
+    this.fullDatum = datum;
+    this.limitEvaluator = limitEvaluator;
+    this.objectKeyString = objectKeyString;
+    this.inPlaceUpdateKey = inPlaceUpdateKey;
+  }
 
-            return column && column.getFormattedValue(this.datum[key]);
-        }
+  getFormattedDatum(headers) {
+    return Object.keys(headers).reduce((formattedDatum, columnKey) => {
+      formattedDatum[columnKey] = this.getFormattedValue(columnKey);
 
-        getParsedValue(key) {
-            let column = this.columns[key];
+      return formattedDatum;
+    }, {});
+  }
 
-            return column && column.getParsedValue(this.datum[key]);
-        }
+  getFormattedValue(key) {
+    let column = this.columns[key];
 
-        getCellComponentName(key) {
-            let column = this.columns[key];
+    return column && column.getFormattedValue(this.datum[key]);
+  }
 
-            return column
-                && column.getCellComponentName
-                && column.getCellComponentName();
-        }
+  getParsedValue(key) {
+    let column = this.columns[key];
 
-        getRowClass() {
-            if (!this.rowClass) {
-                let limitEvaluation = this.limitEvaluator.evaluate(this.datum);
-                this.rowClass = limitEvaluation && limitEvaluation.cssClass;
-            }
+    return column && column.getParsedValue(this.datum[key]);
+  }
 
-            return this.rowClass;
-        }
+  getCellComponentName(key) {
+    let column = this.columns[key];
 
-        getCellLimitClasses() {
-            if (!this.cellLimitClasses) {
-                this.cellLimitClasses = Object.values(this.columns).reduce((alarmStateMap, column) => {
-                    if (!column.isUnit) {
-                        let limitEvaluation = this.limitEvaluator.evaluate(this.datum, column.getMetadatum());
-                        alarmStateMap[column.getKey()] = limitEvaluation && limitEvaluation.cssClass;
-                    }
+    return column && column.getCellComponentName && column.getCellComponentName();
+  }
 
-                    return alarmStateMap;
-                }, {});
-            }
+  getRowClass() {
+    if (!this.rowClass) {
+      let limitEvaluation = this.limitEvaluator.evaluate(this.datum);
+      this.rowClass = limitEvaluation && limitEvaluation.cssClass;
+    }
 
-            return this.cellLimitClasses;
-        }
+    return this.rowClass;
+  }
 
-        getContextualDomainObject(openmct, objectKeyString) {
-            return openmct.objects.get(objectKeyString);
+  getCellLimitClasses() {
+    if (!this.cellLimitClasses) {
+      this.cellLimitClasses = Object.values(this.columns).reduce((alarmStateMap, column) => {
+        if (!column.isUnit) {
+          let limitEvaluation = this.limitEvaluator.evaluate(this.datum, column.getMetadatum());
+          alarmStateMap[column.getKey()] = limitEvaluation && limitEvaluation.cssClass;
         }
 
-        getContextMenuActions() {
-            return ['viewDatumAction'];
-        }
+        return alarmStateMap;
+      }, {});
     }
 
-    /**
-     * Normalize the structure of datums to assist sorting and merging of columns.
-     * Maps all sources to keys.
-     * @private
-     * @param {*} telemetryDatum
-     * @param {*} metadataValues
-     */
-    function createNormalizedDatum(datum, columns) {
-        const normalizedDatum = JSON.parse(JSON.stringify(datum));
-
-        Object.values(columns).forEach(column => {
-            normalizedDatum[column.getKey()] = column.getRawValue(datum);
-        });
-
-        return normalizedDatum;
+    return this.cellLimitClasses;
+  }
+
+  getContextualDomainObject(openmct, objectKeyString) {
+    return openmct.objects.get(objectKeyString);
+  }
+
+  getContextMenuActions() {
+    return ['viewDatumAction', 'viewHistoricalData'];
+  }
+
+  updateWithDatum(updatesToDatum) {
+    const normalizedUpdatesToDatum = createNormalizedDatum(updatesToDatum, this.columns);
+    this.datum = {
+      ...this.datum,
+      ...normalizedUpdatesToDatum
+    };
+    this.fullDatum = {
+      ...this.fullDatum,
+      ...updatesToDatum
+    };
+  }
+}
+
+/**
+ * Normalize the structure of datums to assist sorting and merging of columns.
+ * Maps all sources to keys.
+ * @private
+ * @param {*} telemetryDatum
+ * @param {*} metadataValues
+ */
+function createNormalizedDatum(datum, columns) {
+  const normalizedDatum = JSON.parse(JSON.stringify(datum));
+
+  Object.values(columns).forEach((column) => {
+    const rawValue = column.getRawValue(datum);
+    if (rawValue !== undefined) {
+      normalizedDatum[column.getKey()] = rawValue;
     }
+  });
 
-    return TelemetryTableRow;
-});
+  return normalizedDatum;
+}
diff --git a/src/plugins/telemetryTable/TelemetryTableType.js b/src/plugins/telemetryTable/TelemetryTableType.js
index 17587aedcea..09e728114e1 100644
--- a/src/plugins/telemetryTable/TelemetryTableType.js
+++ b/src/plugins/telemetryTable/TelemetryTableType.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,18 +20,57 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(function () {
-    return {
-        name: 'Telemetry Table',
-        description: 'Display telemetry values for the current time bounds in tabular form. Supports filtering and sorting.',
-        creatable: true,
-        cssClass: 'icon-tabular-realtime',
-        initialize(domainObject) {
-            domainObject.composition = [];
-            domainObject.configuration = {
-                columnWidths: {},
-                hiddenColumns: {}
-            };
-        }
-    };
-});
+export default function getTelemetryTableType(options = {}) {
+  const { telemetryMode = 'performance', persistModeChanges = true, rowLimit = 50 } = options;
+
+  return {
+    name: 'Telemetry Table',
+    description:
+      'Display values for one or more telemetry end points in a scrolling table. Each row is a time-stamped value.',
+    creatable: true,
+    cssClass: 'icon-tabular-scrolling',
+    form: [
+      {
+        key: 'telemetryMode',
+        name: 'Telemetry Mode',
+        control: 'select',
+        options: [
+          {
+            value: 'performance',
+            name: 'Performance Mode'
+          },
+          {
+            value: 'unlimited',
+            name: 'Unlimited Mode'
+          }
+        ],
+        cssClass: 'l-inline',
+        property: ['configuration', 'telemetryMode']
+      },
+      {
+        name: 'Persist Telemetry Mode Changes',
+        control: 'toggleSwitch',
+        cssClass: 'l-input',
+        key: 'persistModeChanges',
+        property: ['configuration', 'persistModeChanges']
+      },
+      {
+        name: 'Performance Mode Row Limit',
+        control: 'toggleSwitch',
+        cssClass: 'l-input',
+        key: 'rowLimit',
+        property: ['configuration', 'rowLimit']
+      }
+    ],
+    initialize(domainObject) {
+      domainObject.composition = [];
+      domainObject.configuration = {
+        columnWidths: {},
+        hiddenColumns: {},
+        telemetryMode,
+        persistModeChanges,
+        rowLimit
+      };
+    }
+  };
+}
diff --git a/src/plugins/telemetryTable/TelemetryTableUnitColumn.js b/src/plugins/telemetryTable/TelemetryTableUnitColumn.js
index ffd269e04e4..4dd54f2552f 100644
--- a/src/plugins/telemetryTable/TelemetryTableUnitColumn.js
+++ b/src/plugins/telemetryTable/TelemetryTableUnitColumn.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,42 +19,38 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-define([
-    './TelemetryTableColumn.js'
-], function (
-    TelemetryTableColumn
-) {
-    class TelemetryTableUnitColumn extends TelemetryTableColumn {
-        constructor(openmct, metadatum) {
-            super(openmct, metadatum);
-            this.isUnit = true;
-            this.titleValue += ' Unit';
-            this.formatter = {
-                format: (datum) => {
-                    return this.metadatum.unit;
-                },
-                parse: (datum) => {
-                    return this.metadatum.unit;
-                }
-            };
-        }
+import TelemetryTableColumn from './TelemetryTableColumn.js';
 
-        getKey() {
-            return this.metadatum.key + '-unit';
-        }
+class TelemetryTableUnitColumn extends TelemetryTableColumn {
+  constructor(openmct, metadatum) {
+    super(openmct, metadatum);
+    this.isUnit = true;
+    this.titleValue += ' Unit';
+    this.formatter = {
+      format: (datum) => {
+        return this.metadatum.unit;
+      },
+      parse: (datum) => {
+        return this.metadatum.unit;
+      }
+    };
+  }
 
-        getTitle() {
-            return this.metadatum.name + ' Unit';
-        }
+  getKey() {
+    return this.metadatum.key + '-unit';
+  }
 
-        getRawValue(telemetryDatum) {
-            return this.metadatum.unit;
-        }
+  getTitle() {
+    return this.metadatum.name + ' Unit';
+  }
 
-        getFormattedValue(telemetryDatum) {
-            return this.formatter.format(telemetryDatum);
-        }
-    }
+  getRawValue(telemetryDatum) {
+    return this.metadatum.unit;
+  }
 
-    return TelemetryTableUnitColumn;
-});
+  getFormattedValue(telemetryDatum) {
+    return this.formatter.format(telemetryDatum);
+  }
+}
+
+export default TelemetryTableUnitColumn;
diff --git a/src/plugins/telemetryTable/TelemetryTableView.js b/src/plugins/telemetryTable/TelemetryTableView.js
index eb7a9d0abd8..de90e6523fc 100644
--- a/src/plugins/telemetryTable/TelemetryTableView.js
+++ b/src/plugins/telemetryTable/TelemetryTableView.js
@@ -1,67 +1,106 @@
-import TableComponent from './components/table.vue';
-import TelemetryTable from './TelemetryTable';
-import Vue from 'vue';
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import mount from 'utils/mount';
 
-export default class TelemetryTableView {
-    constructor(openmct, domainObject, objectPath) {
-        this.openmct = openmct;
-        this.domainObject = domainObject;
-        this.objectPath = objectPath;
-        this.component = undefined;
+import TableComponent from './components/TableComponent.vue';
+import TelemetryTable from './TelemetryTable.js';
 
-        this.table = new TelemetryTable(domainObject, openmct);
-    }
+export default class TelemetryTableView {
+  constructor(openmct, domainObject, objectPath, options) {
+    this.openmct = openmct;
+    this.domainObject = domainObject;
+    this.objectPath = objectPath;
+    this._destroy = null;
+    this.component = null;
 
-    getViewContext() {
-        if (!this.component) {
-            return {};
-        }
+    Object.defineProperty(this, 'table', {
+      value: new TelemetryTable(domainObject, openmct),
+      enumerable: false,
+      configurable: false
+    });
+  }
 
-        return this.component.$refs.tableComponent.getViewContext();
+  getViewContext() {
+    if (!this.component) {
+      return {};
     }
 
-    onEditModeChange(editMode) {
-        this.component.isEditing = editMode;
-    }
+    return this.component.$refs.tableComponent.getViewContext();
+  }
 
-    onClearData() {
-        this.table.clearData();
-    }
+  onEditModeChange(editMode) {
+    this.component.isEditing = editMode;
+  }
 
-    getTable() {
-        return this.table;
-    }
+  onClearData() {
+    this.table.clearData();
+  }
 
-    destroy(element) {
-        this.component.$destroy();
-        this.component = undefined;
-    }
+  getTable() {
+    return this.table;
+  }
 
-    show(element, editMode) {
-        this.component = new Vue({
-            el: element,
-            components: {
-                TableComponent
-            },
-            provide: {
-                openmct: this.openmct,
-                objectPath: this.objectPath,
-                table: this.table,
-                currentView: this
-            },
-            data() {
-                return {
-                    isEditing: editMode,
-                    marking: {
-                        disableMultiSelect: false,
-                        enable: true,
-                        rowName: '',
-                        rowNamePlural: '',
-                        useAlternateControlBar: false
-                    }
-                };
-            },
-            template: '<table-component ref="tableComponent" :is-editing="isEditing" :marking="marking"></table-component>'
-        });
+  destroy() {
+    if (this._destroy) {
+      this._destroy();
     }
+    this.component = null;
+  }
+
+  show(element, editMode, { renderWhenVisible }) {
+    const { vNode, destroy } = mount(
+      {
+        el: element,
+        components: {
+          TableComponent
+        },
+        provide: {
+          openmct: this.openmct,
+          objectPath: this.objectPath,
+          table: this.table,
+          currentView: this,
+          renderWhenVisible
+        },
+        data() {
+          return {
+            isEditing: editMode,
+            marking: {
+              disableMultiSelect: false,
+              enable: true,
+              rowName: '',
+              rowNamePlural: '',
+              useAlternateControlBar: false
+            }
+          };
+        },
+        template:
+          '<table-component ref="tableComponent" :is-editing="isEditing" :marking="marking"></table-component>'
+      },
+      {
+        app: this.openmct.app,
+        element
+      }
+    );
+    this.component = vNode.componentInstance;
+    this._destroy = destroy;
+  }
 }
diff --git a/src/plugins/telemetryTable/TelemetryTableViewProvider.js b/src/plugins/telemetryTable/TelemetryTableViewProvider.js
index 72478f0956b..a0b6a16da97 100644
--- a/src/plugins/telemetryTable/TelemetryTableViewProvider.js
+++ b/src/plugins/telemetryTable/TelemetryTableViewProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,35 +20,34 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import TelemetryTableView from './TelemetryTableView';
+import TelemetryTableView from './TelemetryTableView.js';
 
-export default function TelemetryTableViewProvider(openmct) {
-    function hasTelemetry(domainObject) {
-        if (!Object.prototype.hasOwnProperty.call(domainObject, 'telemetry')) {
-            return false;
-        }
+export default function TelemetryTableViewProvider(openmct, options) {
+  function hasTelemetry(domainObject) {
+    if (!Object.prototype.hasOwnProperty.call(domainObject, 'telemetry')) {
+      return false;
+    }
 
-        let metadata = openmct.telemetry.getMetadata(domainObject);
+    let metadata = openmct.telemetry.getMetadata(domainObject);
 
-        return metadata.values().length > 0;
-    }
+    return metadata.values().length > 0;
+  }
 
-    return {
-        key: 'table',
-        name: 'Telemetry Table',
-        cssClass: 'icon-tabular-realtime',
-        canView(domainObject) {
-            return domainObject.type === 'table'
-                || hasTelemetry(domainObject);
-        },
-        canEdit(domainObject) {
-            return domainObject.type === 'table';
-        },
-        view(domainObject, objectPath) {
-            return new TelemetryTableView(openmct, domainObject, objectPath);
-        },
-        priority() {
-            return 1;
-        }
-    };
+  return {
+    key: 'table',
+    name: 'Telemetry Table',
+    cssClass: 'icon-tabular-scrolling',
+    canView(domainObject) {
+      return domainObject.type === 'table' || hasTelemetry(domainObject);
+    },
+    canEdit(domainObject) {
+      return domainObject.type === 'table';
+    },
+    view(domainObject, objectPath) {
+      return new TelemetryTableView(openmct, domainObject, objectPath, options);
+    },
+    priority() {
+      return 1;
+    }
+  };
 }
diff --git a/src/plugins/telemetryTable/ViewActions.js b/src/plugins/telemetryTable/ViewActions.js
index 7881e8dfed3..79fc895d53d 100644
--- a/src/plugins/telemetryTable/ViewActions.js
+++ b/src/plugins/telemetryTable/ViewActions.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,106 +21,106 @@
  *****************************************************************************/
 
 const exportCSV = {
-    name: 'Export Table Data',
-    key: 'export-csv-all',
-    description: "Export this view's data",
-    cssClass: 'icon-download labeled',
-    invoke: (objectPath, view) => {
-        view.getViewContext().exportAllDataAsCSV();
-    },
-    group: 'view'
+  name: 'Export Table Data',
+  key: 'export-csv-all',
+  description: "Export this view's data",
+  cssClass: 'icon-download labeled',
+  invoke: (objectPath, view) => {
+    view.getViewContext().exportAllDataAsCSV();
+  },
+  group: 'view'
 };
 
 const exportMarkedDataAsCSV = {
-    name: 'Export Marked Rows',
-    key: 'export-csv-marked',
-    description: "Export marked rows as CSV",
-    cssClass: 'icon-download labeled',
-    invoke: (objectPath, view) => {
-        view.getViewContext().exportMarkedDataAsCSV();
-    },
-    group: 'view'
+  name: 'Export Marked Rows',
+  key: 'export-csv-marked',
+  description: 'Export marked rows as CSV',
+  cssClass: 'icon-download labeled',
+  invoke: (objectPath, view) => {
+    view.getViewContext().exportMarkedDataAsCSV();
+  },
+  group: 'view'
 };
 
 const unmarkAllRows = {
-    name: 'Unmark All Rows',
-    key: 'unmark-all-rows',
-    description: 'Unmark all rows',
-    cssClass: 'icon-x labeled',
-    invoke: (objectPath, view) => {
-        view.getViewContext().unmarkAllRows();
-    },
-    showInStatusBar: true,
-    group: 'view'
+  name: 'Unmark All Rows',
+  key: 'unmark-all-rows',
+  description: 'Unmark all rows',
+  cssClass: 'icon-x labeled',
+  invoke: (objectPath, view) => {
+    view.getViewContext().unmarkAllRows();
+  },
+  showInStatusBar: true,
+  group: 'view'
 };
 
 const pause = {
-    name: 'Pause',
-    key: 'pause-data',
-    description: 'Pause real-time data flow',
-    cssClass: 'icon-pause',
-    invoke: (objectPath, view) => {
-        view.getViewContext().togglePauseByButton();
-    },
-    showInStatusBar: true,
-    group: 'view'
+  name: 'Pause',
+  key: 'pause-data',
+  description: 'Pause real-time data flow',
+  cssClass: 'icon-pause',
+  invoke: (objectPath, view) => {
+    view.getViewContext().togglePauseByButton();
+  },
+  showInStatusBar: true,
+  group: 'view'
 };
 
 const play = {
-    name: 'Play',
-    key: 'play-data',
-    description: 'Continue real-time data flow',
-    cssClass: 'c-button pause-play is-paused',
-    invoke: (objectPath, view) => {
-        view.getViewContext().togglePauseByButton();
-    },
-    showInStatusBar: true,
-    group: 'view'
+  name: 'Play',
+  key: 'play-data',
+  description: 'Continue real-time data flow',
+  cssClass: 'c-button pause-play is-paused',
+  invoke: (objectPath, view) => {
+    view.getViewContext().togglePauseByButton();
+  },
+  showInStatusBar: true,
+  group: 'view'
 };
 
 const expandColumns = {
-    name: 'Expand Columns',
-    key: 'expand-columns',
-    description: "Increase column widths to fit currently available data.",
-    cssClass: 'icon-arrows-right-left labeled',
-    invoke: (objectPath, view) => {
-        view.getViewContext().expandColumns();
-    },
-    showInStatusBar: true,
-    group: 'view'
+  name: 'Expand Columns',
+  key: 'expand-columns',
+  description: 'Increase column widths to fit currently available data.',
+  cssClass: 'icon-arrows-right-left labeled',
+  invoke: (objectPath, view) => {
+    view.getViewContext().expandColumns();
+  },
+  showInStatusBar: true,
+  group: 'view'
 };
 
 const autosizeColumns = {
-    name: 'Autosize Columns',
-    key: 'autosize-columns',
-    description: "Automatically size columns to fit the table into the available space.",
-    cssClass: 'icon-expand labeled',
-    invoke: (objectPath, view) => {
-        view.getViewContext().autosizeColumns();
-    },
-    showInStatusBar: true,
-    group: 'view'
+  name: 'Autosize Columns',
+  key: 'autosize-columns',
+  description: 'Automatically size columns to fit the table into the available space.',
+  cssClass: 'icon-expand labeled',
+  invoke: (objectPath, view) => {
+    view.getViewContext().autosizeColumns();
+  },
+  showInStatusBar: true,
+  group: 'view'
 };
 
 const viewActions = [
-    exportCSV,
-    exportMarkedDataAsCSV,
-    unmarkAllRows,
-    pause,
-    play,
-    expandColumns,
-    autosizeColumns
+  exportCSV,
+  exportMarkedDataAsCSV,
+  unmarkAllRows,
+  pause,
+  play,
+  expandColumns,
+  autosizeColumns
 ];
 
-viewActions.forEach(action => {
-    action.appliesTo = (objectPath, view = {}) => {
-        const viewContext = view.getViewContext && view.getViewContext();
-        if (!viewContext) {
-            return false;
-        }
+viewActions.forEach((action) => {
+  action.appliesTo = (objectPath, view = {}) => {
+    const viewContext = view.getViewContext && view.getViewContext();
+    if (!viewContext) {
+      return false;
+    }
 
-        return viewContext.type === 'telemetry-table';
-    };
+    return viewContext.type === 'telemetry-table';
+  };
 });
 
 export default viewActions;
diff --git a/src/plugins/telemetryTable/collections/BoundedTableRowCollection.js b/src/plugins/telemetryTable/collections/BoundedTableRowCollection.js
deleted file mode 100644
index 09d600b6557..00000000000
--- a/src/plugins/telemetryTable/collections/BoundedTableRowCollection.js
+++ /dev/null
@@ -1,166 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [
-        'lodash',
-        './SortedTableRowCollection'
-    ],
-    function (
-        _,
-        SortedTableRowCollection
-    ) {
-
-        class BoundedTableRowCollection extends SortedTableRowCollection {
-            constructor(openmct) {
-                super();
-
-                this.futureBuffer = new SortedTableRowCollection();
-                this.openmct = openmct;
-
-                this.sortByTimeSystem = this.sortByTimeSystem.bind(this);
-                this.bounds = this.bounds.bind(this);
-
-                this.sortByTimeSystem(openmct.time.timeSystem());
-
-                this.lastBounds = openmct.time.bounds();
-
-                this.subscribeToBounds();
-            }
-
-            addOne(item) {
-                let parsedValue = this.getValueForSortColumn(item);
-                // Insert into either in-bounds array, or the future buffer.
-                // Data in the future buffer will be re-evaluated for possible
-                // insertion on next bounds change
-                let beforeStartOfBounds = parsedValue < this.lastBounds.start;
-                let afterEndOfBounds = parsedValue > this.lastBounds.end;
-
-                if (!afterEndOfBounds && !beforeStartOfBounds) {
-                    return super.addOne(item);
-                } else if (afterEndOfBounds) {
-                    this.futureBuffer.addOne(item);
-                }
-
-                return false;
-            }
-
-            sortByTimeSystem(timeSystem) {
-                this.sortBy({
-                    key: timeSystem.key,
-                    direction: 'asc'
-                });
-                let formatter = this.openmct.telemetry.getValueFormatter({
-                    key: timeSystem.key,
-                    source: timeSystem.key,
-                    format: timeSystem.timeFormat
-                });
-                this.parseTime = formatter.parse.bind(formatter);
-                this.futureBuffer.sortBy({
-                    key: timeSystem.key,
-                    direction: 'asc'
-                });
-            }
-
-            /**
-             * This function is optimized for ticking - it assumes that start and end
-             * bounds will only increase and as such this cannot be used for decreasing
-             * bounds changes.
-             *
-             * An implication of this is that data will not be discarded that exceeds
-             * the given end bounds. For arbitrary bounds changes, it's assumed that
-             * a telemetry requery is performed anyway, and the collection is cleared
-             * and repopulated.
-             *
-             * @fires TelemetryCollection#added
-             * @fires TelemetryCollection#discarded
-             * @param bounds
-             */
-            bounds(bounds) {
-                let startChanged = this.lastBounds.start !== bounds.start;
-                let endChanged = this.lastBounds.end !== bounds.end;
-
-                let startIndex = 0;
-                let endIndex = 0;
-
-                let discarded = [];
-                let added = [];
-                let testValue = {
-                    datum: {}
-                };
-
-                this.lastBounds = bounds;
-
-                if (startChanged) {
-                    testValue.datum[this.sortOptions.key] = bounds.start;
-                    // Calculate the new index of the first item within the bounds
-                    startIndex = this.sortedIndex(this.rows, testValue);
-                    discarded = this.rows.splice(0, startIndex);
-                }
-
-                if (endChanged) {
-                    testValue.datum[this.sortOptions.key] = bounds.end;
-                    // Calculate the new index of the last item in bounds
-                    endIndex = this.sortedLastIndex(this.futureBuffer.rows, testValue);
-                    added = this.futureBuffer.rows.splice(0, endIndex);
-                    added.forEach((datum) => this.rows.push(datum));
-                }
-
-                if (discarded && discarded.length > 0) {
-                    /**
-                     * A `discarded` event is emitted when telemetry data fall out of
-                     * bounds due to a bounds change event
-                     * @type {object[]} discarded the telemetry data
-                     * discarded as a result of the bounds change
-                     */
-                    this.emit('remove', discarded);
-                }
-
-                if (added && added.length > 0) {
-                    /**
-                     * An `added` event is emitted when a bounds change results in
-                     * received telemetry falling within the new bounds.
-                     * @type {object[]} added the telemetry data that is now within bounds
-                     */
-                    this.emit('add', added);
-                }
-            }
-
-            getValueForSortColumn(row) {
-                return this.parseTime(row.datum[this.sortOptions.key]);
-            }
-
-            unsubscribeFromBounds() {
-                this.openmct.time.off('bounds', this.bounds);
-            }
-
-            subscribeToBounds() {
-                this.openmct.time.on('bounds', this.bounds);
-            }
-
-            destroy() {
-                this.unsubscribeFromBounds();
-            }
-        }
-
-        return BoundedTableRowCollection;
-    });
diff --git a/src/plugins/telemetryTable/collections/FilteredTableRowCollection.js b/src/plugins/telemetryTable/collections/FilteredTableRowCollection.js
deleted file mode 100644
index fda46eefd0c..00000000000
--- a/src/plugins/telemetryTable/collections/FilteredTableRowCollection.js
+++ /dev/null
@@ -1,136 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [
-        './SortedTableRowCollection'
-    ],
-    function (
-        SortedTableRowCollection
-    ) {
-        class FilteredTableRowCollection extends SortedTableRowCollection {
-            constructor(masterCollection) {
-                super();
-
-                this.masterCollection = masterCollection;
-                this.columnFilters = {};
-
-                //Synchronize with master collection
-                this.masterCollection.on('add', this.add);
-                this.masterCollection.on('remove', this.remove);
-
-                //Default to master collection's sort options
-                this.sortOptions = masterCollection.sortBy();
-            }
-
-            setColumnFilter(columnKey, filter) {
-                filter = filter.trim().toLowerCase();
-
-                let rowsToFilter = this.getRowsToFilter(columnKey, filter);
-
-                if (filter.length === 0) {
-                    delete this.columnFilters[columnKey];
-                } else {
-                    this.columnFilters[columnKey] = filter;
-                }
-
-                this.rows = rowsToFilter.filter(this.matchesFilters, this);
-                this.emit('filter');
-            }
-
-            setColumnRegexFilter(columnKey, filter) {
-                filter = filter.trim();
-
-                let rowsToFilter = this.masterCollection.getRows();
-
-                this.columnFilters[columnKey] = new RegExp(filter);
-                this.rows = rowsToFilter.filter(this.matchesFilters, this);
-                this.emit('filter');
-            }
-
-            /**
-             * @private
-             */
-            getRowsToFilter(columnKey, filter) {
-                if (this.isSubsetOfCurrentFilter(columnKey, filter)) {
-                    return this.getRows();
-                } else {
-                    return this.masterCollection.getRows();
-                }
-            }
-
-            /**
-             * @private
-             */
-            isSubsetOfCurrentFilter(columnKey, filter) {
-                if (this.columnFilters[columnKey] instanceof RegExp) {
-                    return false;
-                }
-
-                return this.columnFilters[columnKey]
-                    && filter.startsWith(this.columnFilters[columnKey])
-                    // startsWith check will otherwise fail when filter cleared
-                    // because anyString.startsWith('') === true
-                    && filter !== '';
-            }
-
-            addOne(row) {
-                return this.matchesFilters(row) && super.addOne(row);
-            }
-
-            /**
-             * @private
-             */
-            matchesFilters(row) {
-                let doesMatchFilters = true;
-                Object.keys(this.columnFilters).forEach((key) => {
-                    if (!doesMatchFilters || !this.rowHasColumn(row, key)) {
-                        return false;
-                    }
-
-                    let formattedValue = row.getFormattedValue(key);
-                    if (formattedValue === undefined) {
-                        return false;
-                    }
-
-                    if (this.columnFilters[key] instanceof RegExp) {
-                        doesMatchFilters = this.columnFilters[key].test(formattedValue);
-                    } else {
-                        doesMatchFilters = formattedValue.toLowerCase().indexOf(this.columnFilters[key]) !== -1;
-                    }
-                });
-
-                return doesMatchFilters;
-            }
-
-            rowHasColumn(row, key) {
-                return Object.prototype.hasOwnProperty.call(row.columns, key);
-            }
-
-            destroy() {
-                this.masterCollection.off('add', this.add);
-                this.masterCollection.off('remove', this.remove);
-            }
-        }
-
-        return FilteredTableRowCollection;
-    });
diff --git a/src/plugins/telemetryTable/collections/SortedTableRowCollection.js b/src/plugins/telemetryTable/collections/SortedTableRowCollection.js
deleted file mode 100644
index fc44d0d7d44..00000000000
--- a/src/plugins/telemetryTable/collections/SortedTableRowCollection.js
+++ /dev/null
@@ -1,255 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [
-        'lodash',
-        'EventEmitter'
-    ],
-    function (
-        _,
-        EventEmitter
-    ) {
-        const LESS_THAN = -1;
-        const EQUAL = 0;
-        const GREATER_THAN = 1;
-
-        /**
-         * @constructor
-         */
-        class SortedTableRowCollection extends EventEmitter {
-            constructor() {
-                super();
-
-                this.dupeCheck = false;
-                this.rows = [];
-
-                this.add = this.add.bind(this);
-                this.remove = this.remove.bind(this);
-            }
-
-            /**
-             * Add a datum or array of data to this telemetry collection
-             * @fires TelemetryCollection#added
-             * @param {object | object[]} rows
-             */
-            add(rows) {
-                if (Array.isArray(rows)) {
-                    this.dupeCheck = false;
-
-                    let rowsAdded = rows.filter(this.addOne, this);
-                    if (rowsAdded.length > 0) {
-                        this.emit('add', rowsAdded);
-                    }
-
-                    this.dupeCheck = true;
-                } else {
-                    let wasAdded = this.addOne(rows);
-                    if (wasAdded) {
-                        this.emit('add', rows);
-                    }
-                }
-            }
-
-            /**
-             * @private
-             */
-            addOne(row) {
-                if (this.sortOptions === undefined) {
-                    throw 'Please specify sort options';
-                }
-
-                let isDuplicate = false;
-
-                // Going to check for duplicates. Bound the search problem to
-                // items around the given time. Use sortedIndex because it
-                // employs a binary search which is O(log n). Can use binary search
-                // because the array is guaranteed ordered due to sorted insertion.
-                let startIx = this.sortedIndex(this.rows, row);
-                let endIx = undefined;
-
-                if (this.dupeCheck && startIx !== this.rows.length) {
-                    endIx = this.sortedLastIndex(this.rows, row);
-
-                    // Create an array of potential dupes, based on having the
-                    // same time stamp
-                    let potentialDupes = this.rows.slice(startIx, endIx + 1);
-                    // Search potential dupes for exact dupe
-                    isDuplicate = potentialDupes.some(_.isEqual.bind(undefined, row));
-                }
-
-                if (!isDuplicate) {
-                    this.rows.splice(endIx || startIx, 0, row);
-
-                    return true;
-                }
-
-                return false;
-            }
-
-            sortedLastIndex(rows, testRow) {
-                return this.sortedIndex(rows, testRow, _.sortedLastIndex);
-            }
-            /**
-             * Finds the correct insertion point for the given row.
-             * Leverages lodash's `sortedIndex` function which implements a binary search.
-             * @private
-             */
-            sortedIndex(rows, testRow, lodashFunction) {
-                if (this.rows.length === 0) {
-                    return 0;
-                }
-
-                const testRowValue = this.getValueForSortColumn(testRow);
-                const firstValue = this.getValueForSortColumn(this.rows[0]);
-                const lastValue = this.getValueForSortColumn(this.rows[this.rows.length - 1]);
-
-                lodashFunction = lodashFunction || _.sortedIndexBy;
-
-                if (this.sortOptions.direction === 'asc') {
-                    if (testRowValue > lastValue) {
-                        return this.rows.length;
-                    } else if (testRowValue === lastValue) {
-                        // Maintain stable sort
-                        return this.rows.length;
-                    } else if (testRowValue <= firstValue) {
-                        return 0;
-                    } else {
-                        return lodashFunction(rows, testRow, (thisRow) => {
-                            return this.getValueForSortColumn(thisRow);
-                        });
-                    }
-                } else {
-                    if (testRowValue >= firstValue) {
-                        return 0;
-                    } else if (testRowValue < lastValue) {
-                        return this.rows.length;
-                    } else if (testRowValue === lastValue) {
-                        // Maintain stable sort
-                        return this.rows.length;
-                    } else {
-                        // Use a custom comparison function to support descending sort.
-                        return lodashFunction(rows, testRow, (thisRow) => {
-                            const thisRowValue = this.getValueForSortColumn(thisRow);
-                            if (testRowValue === thisRowValue) {
-                                return EQUAL;
-                            } else if (testRowValue < thisRowValue) {
-                                return LESS_THAN;
-                            } else {
-                                return GREATER_THAN;
-                            }
-                        });
-                    }
-                }
-            }
-
-            /**
-             * Sorts the telemetry collection based on the provided sort field
-             * specifier. Subsequent inserts are sorted to maintain specified sport
-             * order.
-             *
-             * @example
-             * // First build some mock telemetry for the purpose of an example
-             * let now = Date.now();
-             * let telemetry = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function (value) {
-             *     return {
-             *         // define an object property to demonstrate nested paths
-             *         timestamp: {
-             *             ms: now - value * 1000,
-             *             text:
-             *         },
-             *         value: value
-             *     }
-             * });
-             * let collection = new TelemetryCollection();
-             *
-             * collection.add(telemetry);
-             *
-             * // Sort by telemetry value
-             * collection.sortBy({
-             *  key: 'value', direction: 'asc'
-             * });
-             *
-             * // Sort by ms since epoch
-             * collection.sort({
-             *  key: 'timestamp.ms',
-             *  direction: 'asc'
-             * });
-             *
-             * // Sort by 'text' attribute, descending
-             * collection.sort("timestamp.text");
-             *
-             *
-             * @param {object} sortOptions An object specifying a sort key, and direction.
-             */
-            sortBy(sortOptions) {
-                if (arguments.length > 0) {
-                    this.sortOptions = sortOptions;
-                    this.rows = _.orderBy(this.rows, (row) => row.getParsedValue(sortOptions.key), sortOptions.direction);
-                    this.emit('sort');
-                }
-
-                // Return duplicate to avoid direct modification of underlying object
-                return Object.assign({}, this.sortOptions);
-            }
-
-            removeAllRowsForObject(objectKeyString) {
-                let removed = [];
-                this.rows = this.rows.filter(row => {
-                    if (row.objectKeyString === objectKeyString) {
-                        removed.push(row);
-
-                        return false;
-                    }
-
-                    return true;
-                });
-
-                this.emit('remove', removed);
-            }
-
-            getValueForSortColumn(row) {
-                return row.getParsedValue(this.sortOptions.key);
-            }
-
-            remove(removedRows) {
-                this.rows = this.rows.filter(row => {
-                    return removedRows.indexOf(row) === -1;
-                });
-
-                this.emit('remove', removedRows);
-            }
-
-            getRows() {
-                return this.rows;
-            }
-
-            clear() {
-                let removedRows = this.rows;
-                this.rows = [];
-
-                this.emit('remove', removedRows);
-            }
-        }
-
-        return SortedTableRowCollection;
-    });
diff --git a/src/plugins/telemetryTable/collections/TableRowCollection.js b/src/plugins/telemetryTable/collections/TableRowCollection.js
new file mode 100644
index 00000000000..b4f51f69a2d
--- /dev/null
+++ b/src/plugins/telemetryTable/collections/TableRowCollection.js
@@ -0,0 +1,408 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import EventEmitter from 'EventEmitter';
+import _ from 'lodash';
+
+/**
+ * @constructor
+ */
+export default class TableRowCollection extends EventEmitter {
+  constructor() {
+    super();
+
+    this.rows = [];
+    this.columnFilters = {};
+    this.addRows = this.addRows.bind(this);
+    this.removeRowsByObject = this.removeRowsByObject.bind(this);
+    this.removeRowsByData = this.removeRowsByData.bind(this);
+
+    this.clear = this.clear.bind(this);
+  }
+
+  removeRowsByObject(keyString) {
+    let removed = [];
+
+    this.rows = this.rows.filter((row) => {
+      if (row.objectKeyString === keyString) {
+        removed.push(row);
+
+        return false;
+      } else {
+        return true;
+      }
+    });
+
+    this.emit('remove', removed);
+  }
+
+  addRows(rows) {
+    let rowsToAdd = this.filterRows(rows);
+
+    this.sortAndMergeRows(rowsToAdd);
+
+    // we emit filter no matter what to trigger
+    // an update of visible rows
+    if (rowsToAdd.length > 0) {
+      this.emit('add', rowsToAdd);
+    }
+  }
+
+  clearRowsFromTableAndFilter(rows) {
+    let rowsToAdd = this.filterRows(rows);
+    // Reset of all rows, need to wipe current rows
+    this.rows = [];
+
+    this.sortAndMergeRows(rowsToAdd);
+
+    // We emit filter and update of visible rows
+    this.emit('filter', rowsToAdd);
+  }
+
+  filterRows(rows) {
+    if (Object.keys(this.columnFilters).length > 0) {
+      return rows.filter(this.matchesFilters, this);
+    }
+
+    return rows;
+  }
+
+  sortAndMergeRows(rows) {
+    const sortedRows = this.sortCollection(rows);
+
+    if (this.rows.length === 0) {
+      this.rows = sortedRows;
+
+      return;
+    }
+
+    const firstIncomingRow = sortedRows[0];
+    const lastIncomingRow = sortedRows[sortedRows.length - 1];
+    const firstExistingRow = this.rows[0];
+    const lastExistingRow = this.rows[this.rows.length - 1];
+
+    if (this.firstRowInSortOrder(lastIncomingRow, firstExistingRow) === lastIncomingRow) {
+      this.insertOrUpdateRows(sortedRows, true);
+    } else if (this.firstRowInSortOrder(lastExistingRow, firstIncomingRow) === lastExistingRow) {
+      this.insertOrUpdateRows(sortedRows, false);
+    } else {
+      this.mergeSortedRows(sortedRows);
+    }
+  }
+
+  getInPlaceUpdateIndex(row) {
+    const inPlaceUpdateKey = row.inPlaceUpdateKey;
+    if (!inPlaceUpdateKey) {
+      return -1;
+    }
+
+    const foundIndex = this.rows.findIndex(
+      (existingRow) =>
+        existingRow.datum[inPlaceUpdateKey] &&
+        existingRow.datum[inPlaceUpdateKey] === row.datum[inPlaceUpdateKey]
+    );
+
+    return foundIndex;
+  }
+
+  updateRowInPlace(row, index) {
+    const foundRow = this.rows[index];
+    foundRow.updateWithDatum(row.datum);
+    this.rows[index] = foundRow;
+  }
+
+  setLimit(rowLimit) {
+    this.rowLimit = rowLimit;
+  }
+
+  removeLimit() {
+    this.rowLimit = null;
+    delete this.rowLimit;
+  }
+
+  sortCollection(rows) {
+    const sortedRows = _.orderBy(
+      rows,
+      (row) => row.getParsedValue(this.sortOptions.key),
+      this.sortOptions.direction
+    );
+
+    return sortedRows;
+  }
+
+  insertOrUpdateRows(rowsToAdd, addToBeginning) {
+    rowsToAdd.forEach((row) => {
+      const index = this.getInPlaceUpdateIndex(row);
+      if (index > -1) {
+        this.updateRowInPlace(row, index);
+      } else {
+        if (addToBeginning) {
+          this.rows.unshift(row);
+        } else {
+          this.rows.push(row);
+        }
+      }
+    });
+  }
+
+  mergeSortedRows(incomingRows) {
+    const mergedRows = [];
+    let existingRowIndex = 0;
+    let incomingRowIndex = 0;
+
+    while (existingRowIndex < this.rows.length && incomingRowIndex < incomingRows.length) {
+      const existingRow = this.rows[existingRowIndex];
+      const incomingRow = incomingRows[incomingRowIndex];
+
+      const inPlaceIndex = this.getInPlaceUpdateIndex(incomingRow);
+      if (inPlaceIndex > -1) {
+        this.updateRowInPlace(incomingRow, inPlaceIndex);
+        incomingRowIndex++;
+      } else {
+        if (this.firstRowInSortOrder(existingRow, incomingRow) === existingRow) {
+          mergedRows.push(existingRow);
+          existingRowIndex++;
+        } else {
+          mergedRows.push(incomingRow);
+          incomingRowIndex++;
+        }
+      }
+    }
+
+    // tail of existing rows is all that is left to merge
+    if (existingRowIndex < this.rows.length) {
+      for (existingRowIndex; existingRowIndex < this.rows.length; existingRowIndex++) {
+        mergedRows.push(this.rows[existingRowIndex]);
+      }
+    }
+
+    // tail of incoming rows is all that is left to merge
+    if (incomingRowIndex < incomingRows.length) {
+      for (incomingRowIndex; incomingRowIndex < incomingRows.length; incomingRowIndex++) {
+        mergedRows.push(incomingRows[incomingRowIndex]);
+      }
+    }
+
+    this.rows = mergedRows;
+  }
+
+  firstRowInSortOrder(row1, row2) {
+    const val1 = this.getValueForSortColumn(row1);
+    const val2 = this.getValueForSortColumn(row2);
+
+    if (this.sortOptions.direction === 'asc') {
+      return val1 <= val2 ? row1 : row2;
+    } else {
+      return val1 >= val2 ? row1 : row2;
+    }
+  }
+
+  removeRowsByData(data) {
+    let removed = [];
+
+    this.rows = this.rows.filter((row) => {
+      if (data.includes(row.fullDatum)) {
+        removed.push(row);
+
+        return false;
+      } else {
+        return true;
+      }
+    });
+
+    this.emit('remove', removed);
+  }
+
+  /**
+   * Sorts the telemetry collection based on the provided sort field
+   * specifier. Subsequent inserts are sorted to maintain specified sport
+   * order.
+   *
+   * @example
+   * // First build some mock telemetry for the purpose of an example
+   * let now = Date.now();
+   * let telemetry = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function (value) {
+   *     return {
+   *         // define an object property to demonstrate nested paths
+   *         timestamp: {
+   *             ms: now - value * 1000,
+   *             text:
+   *         },
+   *         value: value
+   *     }
+   * });
+   * let collection = new TelemetryCollection();
+   *
+   * collection.add(telemetry);
+   *
+   * // Sort by telemetry value
+   * collection.sortBy({
+   *  key: 'value', direction: 'asc'
+   * });
+   *
+   * // Sort by ms since epoch
+   * collection.sort({
+   *  key: 'timestamp.ms',
+   *  direction: 'asc'
+   * });
+   *
+   * // Sort by 'text' attribute, descending
+   * collection.sort("timestamp.text");
+   *
+   *
+   * @param {object} sortOptions An object specifying a sort key, and direction.
+   */
+  sortBy(sortOptions) {
+    if (arguments.length > 0) {
+      this.sortOptions = sortOptions;
+      this.rows = _.orderBy(
+        this.rows,
+        (row) => row.getParsedValue(sortOptions.key),
+        sortOptions.direction
+      );
+      this.emit('sort');
+    }
+
+    // Return duplicate to avoid direct modification of underlying object
+    return Object.assign({}, this.sortOptions);
+  }
+
+  setColumnFilter(columnKey, filter) {
+    filter = filter.trim().toLowerCase();
+    let wasBlank = this.columnFilters[columnKey] === undefined;
+    let isSubset = this.isSubsetOfCurrentFilter(columnKey, filter);
+
+    if (filter.length === 0) {
+      delete this.columnFilters[columnKey];
+    } else {
+      this.columnFilters[columnKey] = filter;
+    }
+
+    if (isSubset || wasBlank) {
+      this.rows = this.rows.filter(this.matchesFilters, this);
+      this.emit('filter');
+    } else {
+      this.emit('resetRowsFromAllData');
+    }
+  }
+
+  setColumnRegexFilter(columnKey, filter) {
+    filter = filter.trim();
+    this.columnFilters[columnKey] = new RegExp(filter);
+
+    this.emit('resetRowsFromAllData');
+  }
+
+  getColumnMapForObject(objectKeyString) {
+    let columns = this.configuration.getColumns();
+
+    if (columns[objectKeyString]) {
+      return columns[objectKeyString].reduce((map, column) => {
+        map[column.getKey()] = column;
+
+        return map;
+      }, {});
+    }
+
+    return {};
+  }
+
+  // /**
+  //  * @private
+  //  */
+  isSubsetOfCurrentFilter(columnKey, filter) {
+    if (this.columnFilters[columnKey] instanceof RegExp) {
+      return false;
+    }
+
+    return (
+      this.columnFilters[columnKey] &&
+      filter.startsWith(this.columnFilters[columnKey]) &&
+      // startsWith check will otherwise fail when filter cleared
+      // because anyString.startsWith('') === true
+      filter !== ''
+    );
+  }
+
+  /**
+   * @private
+   */
+  matchesFilters(row) {
+    let doesMatchFilters = true;
+    Object.keys(this.columnFilters).forEach((key) => {
+      if (!doesMatchFilters || !this.rowHasColumn(row, key)) {
+        return false;
+      }
+
+      let formattedValue = row.getFormattedValue(key);
+      if (formattedValue === undefined) {
+        return false;
+      }
+
+      if (this.columnFilters[key] instanceof RegExp) {
+        doesMatchFilters = this.columnFilters[key].test(formattedValue);
+      } else {
+        doesMatchFilters = formattedValue.toLowerCase().indexOf(this.columnFilters[key]) !== -1;
+      }
+    });
+
+    return doesMatchFilters;
+  }
+
+  rowHasColumn(row, key) {
+    return Object.prototype.hasOwnProperty.call(row.columns, key);
+  }
+
+  getRows() {
+    if (this.rowLimit && this.rows.length > this.rowLimit) {
+      if (this.sortOptions.direction === 'desc') {
+        return this.rows.slice(0, this.rowLimit);
+      } else {
+        return this.rows.slice(-this.rowLimit);
+      }
+    }
+
+    return this.rows;
+  }
+
+  getRowsLength() {
+    if (this.rowLimit && this.rows.length > this.rowLimit) {
+      return this.rowLimit;
+    }
+
+    return this.rows.length;
+  }
+
+  getValueForSortColumn(row) {
+    return row.getParsedValue(this.sortOptions.key);
+  }
+
+  clear() {
+    let removedRows = this.rows;
+    this.rows = [];
+
+    this.emit('remove', removedRows);
+  }
+
+  destroy() {
+    this.removeAllListeners();
+  }
+}
diff --git a/src/plugins/telemetryTable/components/SizingRow.vue b/src/plugins/telemetryTable/components/SizingRow.vue
new file mode 100644
index 00000000000..dbe8f2273e9
--- /dev/null
+++ b/src/plugins/telemetryTable/components/SizingRow.vue
@@ -0,0 +1,78 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <tr class="c-telemetry-table__sizing-tr">
+    <td>SIZING ROW</td>
+  </tr>
+</template>
+
+<script>
+export default {
+  props: {
+    isEditing: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['change-height'],
+  watch: {
+    isEditing: function (isEditing) {
+      if (isEditing) {
+        this.pollForRowHeight();
+      } else {
+        this.clearPoll();
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick().then(() => {
+      this.height = this.$el.offsetHeight;
+      this.$emit('change-height', this.height);
+    });
+    if (this.isEditing) {
+      this.pollForRowHeight();
+    }
+  },
+  unmounted() {
+    this.clearPoll();
+  },
+  methods: {
+    pollForRowHeight() {
+      this.clearPoll();
+      this.pollID = window.setInterval(this.heightPoll, 300);
+    },
+    clearPoll() {
+      if (this.pollID) {
+        window.clearInterval(this.pollID);
+        this.pollID = undefined;
+      }
+    },
+    heightPoll() {
+      let height = this.$el.offsetHeight;
+      if (height !== this.height) {
+        this.$emit('change-height', height);
+        this.height = height;
+      }
+    }
+  }
+};
+</script>
diff --git a/src/plugins/telemetryTable/components/TableCell.vue b/src/plugins/telemetryTable/components/TableCell.vue
new file mode 100644
index 00000000000..e30b64ce093
--- /dev/null
+++ b/src/plugins/telemetryTable/components/TableCell.vue
@@ -0,0 +1,99 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <td
+    ref="tableCell"
+    :title="formattedValue"
+    :aria-label="`${columnKey} table cell ${formattedValue}`"
+    @click="selectCell($event.currentTarget, columnKey)"
+    @mouseover.ctrl="showToolTip"
+    @mouseleave="hideToolTip"
+  >
+    {{ formattedValue }}
+  </td>
+</template>
+
+<script>
+import tooltipHelpers from '../../../api/tooltips/tooltipMixins.js';
+
+export default {
+  mixins: [tooltipHelpers],
+  inject: ['openmct'],
+  props: {
+    row: {
+      type: Object,
+      required: true
+    },
+    columnKey: {
+      type: String,
+      required: true
+    },
+    objectPath: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    formattedValue() {
+      return this.row.getFormattedValue(this.columnKey);
+    },
+    isSelectable() {
+      let column = this.row.columns[this.columnKey];
+
+      return column && column.selectable;
+    }
+  },
+  methods: {
+    selectCell(element, columnKey) {
+      if (this.isSelectable) {
+        this.openmct.selection.select(
+          [
+            {
+              element: element,
+              context: {
+                type: 'table-cell',
+                row: this.row.objectKeyString,
+                column: columnKey
+              }
+            },
+            {
+              element: this.openmct.layout.$refs.browseObject.$el,
+              context: {
+                item: this.objectPath[0]
+              }
+            }
+          ],
+          false
+        );
+        event.stopPropagation();
+      }
+    },
+    async showToolTip() {
+      if (this.columnKey !== 'name') {
+        return;
+      }
+      const { BELOW } = this.openmct.tooltips.TOOLTIP_LOCATIONS;
+      this.buildToolTip(await this.getObjectPath(this.row.objectKeyString), BELOW, 'tableCell');
+    }
+  }
+};
+</script>
diff --git a/src/plugins/telemetryTable/components/TableColumnHeader.vue b/src/plugins/telemetryTable/components/TableColumnHeader.vue
new file mode 100644
index 00000000000..cd41bce0f95
--- /dev/null
+++ b/src/plugins/telemetryTable/components/TableColumnHeader.vue
@@ -0,0 +1,179 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <th
+    :style="{ width: columnWidth + 'px', 'max-width': columnWidth + 'px' }"
+    :draggable="isEditing"
+    @mouseup="sort"
+    v-on="
+      isEditing
+        ? {
+            dragstart: columnMoveStart,
+            drop: columnMoveEnd,
+            dragleave: hideDropTarget,
+            dragover: dragOverColumn
+          }
+        : {}
+    "
+  >
+    <div
+      class="c-telemetry-table__headers__content"
+      :class="
+        [
+          isSortable ? 'is-sortable' : '',
+          isSortable && sortOptions.key === headerKey ? 'is-sorting' : '',
+          isSortable && sortOptions.direction
+        ].join(' ')
+      "
+    >
+      <div class="c-telemetry-table__resize-hitarea" @mousedown="resizeColumnStart"></div>
+      <slot></slot>
+    </div>
+  </th>
+</template>
+<script>
+const MOVE_COLUMN_DT_TYPE = 'movecolumnfromindex';
+
+export default {
+  inject: ['openmct'],
+  props: {
+    headerKey: {
+      type: String,
+      default: undefined
+    },
+    headerIndex: {
+      type: Number,
+      default: undefined
+    },
+    isHeaderTitle: {
+      type: Boolean,
+      default: undefined
+    },
+    sortOptions: {
+      type: Object,
+      default: undefined
+    },
+    columnWidth: {
+      type: Number,
+      default: undefined
+    },
+    hotzone: Boolean,
+    isEditing: Boolean
+  },
+  emits: [
+    'resize-column-end',
+    'resize-column',
+    'drop-target-offset-changed',
+    'drop-target-active',
+    'reorder-column',
+    'sort'
+  ],
+  computed: {
+    isSortable() {
+      return this.sortOptions !== undefined;
+    }
+  },
+  methods: {
+    resizeColumnStart(event) {
+      this.resizeStartX = event.clientX;
+      this.resizeStartWidth = this.columnWidth;
+
+      document.addEventListener('mouseup', this.resizeColumnEnd, {
+        once: true,
+        capture: true
+      });
+      document.addEventListener('mousemove', this.resizeColumn);
+      event.preventDefault();
+    },
+    resizeColumnEnd(event) {
+      this.resizeStartX = undefined;
+      this.resizeStartWidth = undefined;
+      document.removeEventListener('mousemove', this.resizeColumn);
+      event.preventDefault();
+      event.stopPropagation();
+
+      this.$emit('resize-column-end');
+    },
+    resizeColumn(event) {
+      let delta = event.clientX - this.resizeStartX;
+      let newWidth = this.resizeStartWidth + delta;
+      let minWidth = parseInt(window.getComputedStyle(this.$el).minWidth, 10);
+      if (newWidth > minWidth) {
+        this.$emit('resize-column', this.headerKey, newWidth);
+      }
+    },
+    columnMoveStart(event) {
+      event.dataTransfer.setData(MOVE_COLUMN_DT_TYPE, this.headerIndex);
+    },
+    isColumnMoveEvent(event) {
+      return [...event.dataTransfer.types].includes(MOVE_COLUMN_DT_TYPE);
+    },
+    dragOverColumn(event) {
+      if (this.isColumnMoveEvent(event)) {
+        event.preventDefault();
+        this.updateDropOffset(event.currentTarget, event.clientX);
+      } else {
+        return false;
+      }
+    },
+    updateDropOffset(element, clientX) {
+      let thClientLeft = element.getBoundingClientRect().x;
+      let offsetInHeader = clientX - thClientLeft;
+      let dropOffsetLeft;
+
+      if (offsetInHeader < element.offsetWidth / 2) {
+        dropOffsetLeft = element.offsetLeft;
+      } else {
+        dropOffsetLeft = element.offsetLeft + element.offsetWidth;
+      }
+
+      this.$emit('drop-target-offset-changed', dropOffsetLeft);
+      this.$emit('drop-target-active', true);
+    },
+    hideDropTarget() {
+      this.$emit('drop-target-active', false);
+    },
+    columnMoveEnd(event) {
+      if (this.isColumnMoveEvent(event)) {
+        let toIndex = this.headerIndex;
+        let fromIndex = event.dataTransfer.getData(MOVE_COLUMN_DT_TYPE);
+        if (event.offsetX < event.target.offsetWidth / 2) {
+          if (toIndex > fromIndex) {
+            toIndex--;
+          }
+        } else {
+          if (toIndex < fromIndex) {
+            toIndex++;
+          }
+        }
+
+        if (toIndex !== fromIndex) {
+          this.$emit('reorder-column', fromIndex, toIndex);
+        }
+      }
+    },
+    sort() {
+      this.$emit('sort');
+    }
+  }
+};
+</script>
diff --git a/src/plugins/telemetryTable/components/TableComponent.vue b/src/plugins/telemetryTable/components/TableComponent.vue
new file mode 100644
index 00000000000..9e35ac5d900
--- /dev/null
+++ b/src/plugins/telemetryTable/components/TableComponent.vue
@@ -0,0 +1,1212 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div ref="root" class="c-table-wrapper" :class="tableClasses">
+    <div v-if="enableLegacyToolbar" class="c-table-control-bar c-control-bar" role="menubar">
+      <button
+        v-if="allowExport"
+        v-show="!markedRows.length"
+        class="c-button icon-download labeled"
+        aria-label="Export this view's data"
+        title="Export this view's data"
+        @click="exportAllDataAsCSV()"
+      >
+        <span class="c-button__label">Export Table Data</span>
+      </button>
+      <button
+        v-if="allowExport"
+        v-show="markedRows.length"
+        class="c-button icon-download labeled"
+        aria-label="Export marked rows as CSV"
+        title="Export marked rows as CSV"
+        @click="exportMarkedDataAsCSV()"
+      >
+        <span class="c-button__label">Export Marked Rows</span>
+      </button>
+      <button
+        v-show="markedRows.length"
+        class="c-button icon-x labeled"
+        aria-label="Unmark all rows"
+        title="Unmark all rows"
+        @click="unmarkAllRows()"
+      >
+        <span class="c-button__label">Unmark All Rows</span>
+      </button>
+      <div v-if="marking.enable" class="c-separator"></div>
+      <button
+        v-if="marking.enable"
+        :aria-label="paused ? 'Continue real-time data flow' : 'Pause real-time data flow'"
+        class="c-button icon-pause pause-play labeled"
+        :class="paused ? 'icon-play is-paused' : 'icon-pause'"
+        :title="paused ? 'Continue real-time data flow' : 'Pause real-time data flow'"
+        @click="togglePauseByButton()"
+      >
+        <span class="c-button__label">
+          {{ paused ? 'Play' : 'Pause' }}
+        </span>
+      </button>
+
+      <template v-if="!isEditing">
+        <div class="c-separator" role="separator"></div>
+        <button
+          v-if="isAutosizeEnabled"
+          class="c-button icon-arrows-right-left labeled"
+          aria-label="Increase column widths to fit currently available data."
+          title="Increase column widths to fit currently available data."
+          @click="recalculateColumnWidths"
+        >
+          <span class="c-button__label">Expand Columns</span>
+        </button>
+        <button
+          v-else
+          aria-label="Automatically size columns to fit the table into the available space."
+          class="c-button icon-expand labeled"
+          title="Automatically size columns to fit the table into the available space."
+          @click="autosizeColumns"
+        >
+          <span class="c-button__label">Autosize Columns</span>
+        </button>
+      </template>
+
+      <slot name="buttons"></slot>
+    </div>
+
+    <!-- alternate controlbar start -->
+    <div v-if="marking.useAlternateControlBar" 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="{ 'hide-nice': !markedRows.length }"
+        class="c-icon-button icon-x labeled"
+        aria-label="Deselect All"
+        title="Deselect All"
+        @click="unmarkAllRows()"
+      >
+        <span class="c-icon-button__label"
+          >{{ `Deselect ${marking.disableMultiSelect ? '' : '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 u-style-receiver js-style-receiver"
+      :class="{
+        'is-paused': paused
+      }"
+    >
+      <div :style="{ 'max-width': widthWithScroll, 'min-width': '150px' }">
+        <slot></slot>
+      </div>
+
+      <div
+        v-if="isDropTargetActive"
+        class="c-telemetry-table__drop-target"
+        :style="dropTargetStyle"
+      ></div>
+
+      <progress-bar
+        v-if="loading"
+        class="c-telemetry-table__progress-bar"
+        :model="{ progressPerc: null }"
+      />
+
+      <!-- Headers table -->
+      <div
+        v-show="!hideHeaders"
+        ref="headersHolderEl"
+        class="c-telemetry-table__headers-w js-table__headers-w"
+        :style="{ 'max-width': widthWithScroll }"
+      >
+        <table class="c-table__headers c-telemetry-table__headers">
+          <thead>
+            <tr class="c-telemetry-table__headers__labels">
+              <table-column-header
+                v-for="(title, key, headerIndex) in headers"
+                :key="key"
+                :header-key="key"
+                :header-index="headerIndex"
+                :column-width="columnWidths[key]"
+                :sort-options="sortOptions"
+                :is-editing="isEditing"
+                @sort="allowSorting && sortBy(key)"
+                @resize-column="resizeColumn"
+                @drop-target-offset-changed="setDropTargetOffset"
+                @drop-target-active="dropTargetActive"
+                @reorder-column="reorderColumn"
+                @resize-column-end="updateConfiguredColumnWidths"
+              >
+                <span class="c-telemetry-table__headers__label">{{ title }}</span>
+              </table-column-header>
+            </tr>
+            <tr v-if="allowFiltering" class="c-telemetry-table__headers__filter">
+              <table-column-header
+                v-for="(title, key, headerIndex) in headers"
+                :key="key"
+                :header-key="key"
+                :header-index="headerIndex"
+                :column-width="columnWidths[key]"
+                :is-editing="isEditing"
+                :aria-label="`${headers[key]} filter header`"
+                @resize-column="resizeColumn"
+                @drop-target-offset-changed="setDropTargetOffset"
+                @drop-target-active="dropTargetActive"
+                @reorder-column="reorderColumn"
+                @resize-column-end="updateConfiguredColumnWidths"
+              >
+                <search
+                  :value="filters[key]"
+                  class="c-table__search"
+                  :aria-label="`${key} filter input`"
+                  @input="filterChanged(key, $event)"
+                  @clear="clearFilter(key)"
+                >
+                  <button
+                    class="c-search__use-regex"
+                    :class="{ 'is-active': enableRegexSearch[key] }"
+                    aria-label="Click to enable regex: enter a string with slashes, like this: /regex_exp/"
+                    title="Click to enable regex: enter a string with slashes, like this: /regex_exp/"
+                    @click="toggleRegex(key)"
+                  >
+                    /R/
+                  </button>
+                </search>
+              </table-column-header>
+            </tr>
+          </thead>
+        </table>
+      </div>
+      <!-- Content table -->
+      <div
+        ref="scrollable"
+        class="c-table__body-w c-telemetry-table__body-w js-telemetry-table__body-w"
+        :style="{ 'max-width': widthWithScroll }"
+        @scroll="scroll"
+      >
+        <div class="c-telemetry-table__scroll-forcer" :style="{ width: totalWidth + 'px' }"></div>
+        <table
+          ref="contentTable"
+          class="c-table__body c-telemetry-table__body js-telemetry-table__content"
+          :style="{ height: totalHeight + 'px' }"
+          :aria-label="`${table.domainObject.name} table content`"
+        >
+          <tbody>
+            <telemetry-table-row
+              v-for="(row, rowIndex) in visibleRows"
+              :key="rowIndex"
+              :headers="headers"
+              :column-widths="columnWidths"
+              :row-index="rowIndex"
+              :object-path="objectPath"
+              :row-offset="rowOffset"
+              :row-height="rowHeight"
+              :row="getRow(rowIndex)"
+              :marked="row.marked"
+              @mark="markRow"
+              @unmark="unmarkRow"
+              @mark-multiple-concurrent="markMultipleConcurrentRows"
+              @row-context-click="updateViewContext"
+            />
+          </tbody>
+        </table>
+      </div>
+      <!-- Sizing table -->
+      <table
+        ref="sizingTable"
+        class="c-telemetry-table__sizing js-telemetry-table__sizing"
+        :style="sizingTableWidth"
+      >
+        <sizing-row :is-editing="isEditing" @change-height="setRowHeight" />
+        <tr>
+          <template v-for="(title, key) in headers" :key="key">
+            <th
+              :style="{
+                width: configuredColumnWidths[key] + 'px',
+                'max-width': configuredColumnWidths[key] + 'px'
+              }"
+            >
+              {{ title }}
+            </th>
+          </template>
+        </tr>
+        <telemetry-table-row
+          v-for="(sizingRowData, objectKeyString) in sizingRows"
+          :key="objectKeyString"
+          :headers="headers"
+          :column-widths="configuredColumnWidths"
+          :row="sizingRowData"
+          :object-path="objectPath"
+          @row-context-click="updateViewContext"
+        />
+      </table>
+      <table-footer-indicator
+        class="c-telemetry-table__footer"
+        :marked-rows="markedRows.length"
+        :total-rows="totalNumberOfRows"
+        :telemetry-mode="telemetryMode"
+        @telemetry-mode-change="updateTelemetryMode"
+      />
+    </div>
+  </div>
+  <!-- closes c-table-wrapper -->
+</template>
+
+<script>
+import _ from 'lodash';
+import { toRaw } from 'vue';
+
+import stalenessMixin from '@/ui/mixins/staleness-mixin';
+
+import CSVExporter from '../../../exporters/CSVExporter.js';
+import ProgressBar from '../../../ui/components/ProgressBar.vue';
+import Search from '../../../ui/components/SearchComponent.vue';
+import ToggleSwitch from '../../../ui/components/ToggleSwitch.vue';
+import throttle from '../../../utils/throttle';
+import SizingRow from './SizingRow.vue';
+import TableColumnHeader from './TableColumnHeader.vue';
+import TableFooterIndicator from './TableFooterIndicator.vue';
+import TelemetryTableRow from './TableRow.vue';
+
+const VISIBLE_ROW_COUNT = 100;
+const ROW_HEIGHT = 17;
+const RESIZE_POLL_INTERVAL = 200;
+const AUTO_SCROLL_TRIGGER_HEIGHT = ROW_HEIGHT * 3;
+
+export default {
+  components: {
+    TelemetryTableRow,
+    TableColumnHeader,
+    Search,
+    TableFooterIndicator,
+    ToggleSwitch,
+    SizingRow,
+    ProgressBar
+  },
+  mixins: [stalenessMixin],
+  inject: ['openmct', 'objectPath', 'table', 'currentView', 'renderWhenVisible'],
+  props: {
+    isEditing: {
+      type: Boolean,
+      default: false
+    },
+    marking: {
+      type: Object,
+      required: true,
+      default() {
+        return {
+          enable: false,
+          disableMultiSelect: false,
+          useAlternateControlBar: false,
+          rowName: '',
+          rowNamePlural: ''
+        };
+      }
+    },
+    allowExport: {
+      type: Boolean,
+      default: true
+    },
+    allowFiltering: {
+      type: Boolean,
+      default: true
+    },
+    allowSorting: {
+      type: Boolean,
+      default: true
+    },
+    enableLegacyToolbar: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['marked-rows-updated', 'filter'],
+  data() {
+    let configuration = this.table.configuration.getConfiguration();
+
+    return {
+      headers: {},
+      visibleRows: [],
+      columnWidths: {},
+      configuredColumnWidths: configuration.columnWidths,
+      sizingRows: {},
+      rowHeight: ROW_HEIGHT,
+      scrollOffset: 0,
+      totalHeight: 0,
+      totalWidth: 0,
+      rowOffset: 0,
+      autoScroll: true,
+      sortOptions: {},
+      filters: {},
+      loading: false,
+      scrollable: undefined,
+      tableEl: undefined,
+      headersHolderEl: undefined,
+      processingScroll: false,
+      updatingView: false,
+      dropOffsetLeft: undefined,
+      isDropTargetActive: false,
+      isAutosizeEnabled: configuration.autosize,
+      scrollW: 0,
+      markCounter: 0,
+      paused: false,
+      markedRows: [],
+      isShowingMarkedRowsOnly: false,
+      enableRegexSearch: {},
+      hideHeaders: configuration.hideHeaders,
+      totalNumberOfRows: 0,
+      rowContext: {},
+      telemetryMode: configuration.telemetryMode,
+      persistModeChanges: configuration.persistModeChanges
+    };
+  },
+  computed: {
+    dropTargetStyle() {
+      return {
+        top: this.$refs.headersTable.offsetTop + 'px',
+        height: this.totalHeight + this.$refs.headersTable.offsetHeight + 'px',
+        left: this.dropOffsetLeft && this.dropOffsetLeft + 'px'
+      };
+    },
+    lastHeaderKey() {
+      let headerKeys = Object.keys(this.headers);
+
+      return headerKeys[headerKeys.length - 1];
+    },
+    widthWithScroll() {
+      return this.totalWidth + this.scrollW + 'px';
+    },
+    sizingTableWidth() {
+      let style;
+
+      if (this.isAutosizeEnabled) {
+        style = { width: 'calc(100% - ' + this.scrollW + 'px)' };
+      } else {
+        let totalWidth = Object.keys(this.headers).reduce((total, key) => {
+          total += this.configuredColumnWidths[key];
+
+          return total;
+        }, 0);
+
+        style = { width: totalWidth + 'px' };
+      }
+
+      return style;
+    },
+    tableClasses() {
+      let classes = [];
+
+      if (this.paused) {
+        classes.push('is-paused');
+      }
+
+      if (this.isStale) {
+        classes.push('is-stale');
+      }
+
+      return classes;
+    }
+  },
+  watch: {
+    loading: {
+      handler(isLoading) {
+        if (isLoading) {
+          this.setLoadingPromise();
+        } else {
+          this.loadFinishResolve();
+        }
+
+        if (this.viewActionsCollection) {
+          let action = isLoading ? 'disable' : 'enable';
+          this.viewActionsCollection[action](['export-csv-all']);
+        }
+      }
+    },
+    markedRows: {
+      handler(newVal, oldVal) {
+        this.$emit('marked-rows-updated', newVal, oldVal);
+
+        if (this.viewActionsCollection) {
+          if (newVal.length > 0) {
+            this.viewActionsCollection.enable(['export-csv-marked', 'unmark-all-rows']);
+          } else if (newVal.length === 0) {
+            this.viewActionsCollection.disable(['export-csv-marked', 'unmark-all-rows']);
+          }
+        }
+      },
+      deep: true
+    },
+    paused: {
+      handler(newVal) {
+        if (this.viewActionsCollection) {
+          if (newVal) {
+            this.viewActionsCollection.hide(['pause-data']);
+            this.viewActionsCollection.show(['play-data']);
+          } else {
+            this.viewActionsCollection.hide(['play-data']);
+            this.viewActionsCollection.show(['pause-data']);
+          }
+        }
+      }
+    },
+    isAutosizeEnabled: {
+      handler(newVal) {
+        if (this.viewActionsCollection) {
+          if (newVal) {
+            this.viewActionsCollection.show(['expand-columns']);
+            this.viewActionsCollection.hide(['autosize-columns']);
+          } else {
+            this.viewActionsCollection.show(['autosize-columns']);
+            this.viewActionsCollection.hide(['expand-columns']);
+          }
+        }
+      }
+    }
+  },
+  created() {
+    this.filterTelemetry = _.debounce(this.filterTelemetry, 500);
+  },
+  mounted() {
+    this.csvExporter = new CSVExporter();
+    this.rowsAdded = _.throttle(this.rowsAdded, 200);
+    this.rowsRemoved = _.throttle(this.rowsRemoved, 200);
+    this.scroll = _.throttle(this.scroll, 100);
+
+    if (!this.marking.useAlternateControlBar && !this.enableLegacyToolbar) {
+      this.$nextTick(() => {
+        this.viewActionsCollection = this.openmct.actions.getActionsCollection(
+          this.objectPath,
+          this.currentView
+        );
+        this.initializeViewActions();
+      });
+    }
+
+    this.updateVisibleRows = throttle(this.updateVisibleRows, 1000);
+
+    this.table.on('object-added', this.addObject);
+    this.table.on('object-removed', this.removeObject);
+    this.table.on('refresh', this.clearRowsAndRerender);
+    this.table.on('historical-rows-processed', this.checkForMarkedRows);
+    this.table.on('outstanding-requests', this.outstandingRequests);
+    this.table.on('telemetry-staleness', this.handleStaleness);
+
+    this.table.tableRows.on('add', this.rowsAdded);
+    this.table.tableRows.on('remove', this.rowsRemoved);
+    this.table.tableRows.on('sort', this.updateVisibleRows);
+    this.table.tableRows.on('filter', this.updateVisibleRows);
+
+    this.openmct.time.on('bounds', this.boundsChanged);
+
+    //Default sort
+    this.sortOptions = this.table.tableRows.sortBy();
+    this.scrollable = this.$refs.scrollable;
+    this.contentTable = this.$refs.contentTable;
+    this.sizingTable = this.$refs.sizingTable;
+    this.headersHolderEl = this.$refs.headersHolderEl;
+    this.table.configuration.on('change', this.updateConfiguration);
+
+    this.calculateTableSize();
+    this.pollForResize();
+    this.calculateScrollbarWidth();
+
+    this.table.initialize();
+  },
+  beforeUnmount() {
+    this.table.off('object-added', this.addObject);
+    this.table.off('object-removed', this.removeObject);
+    this.table.off('historical-rows-processed', this.checkForMarkedRows);
+    this.table.off('refresh', this.clearRowsAndRerender);
+    this.table.off('outstanding-requests', this.outstandingRequests);
+    this.table.off('telemetry-staleness', this.handleStaleness);
+
+    this.table.tableRows.off('add', this.rowsAdded);
+    this.table.tableRows.off('remove', this.rowsRemoved);
+    this.table.tableRows.off('sort', this.updateVisibleRows);
+    this.table.tableRows.off('filter', this.updateVisibleRows);
+
+    this.table.configuration.off('change', this.updateConfiguration);
+
+    this.openmct.time.off('bounds', this.boundsChanged);
+
+    clearInterval(this.resizePollHandle);
+
+    this.table.configuration.destroy();
+
+    this.table.destroy();
+  },
+  methods: {
+    setLoadingPromise() {
+      this.loadFinishResolve = null;
+      this.isFinishedLoading = new Promise((resolve, reject) => {
+        this.loadFinishResolve = resolve;
+      });
+    },
+    updateVisibleRows() {
+      if (!this.updatingView) {
+        this.updatingView = this.renderWhenVisible(() => {
+          let start = 0;
+          let end = VISIBLE_ROW_COUNT;
+          let tableRows = this.table.tableRows.getRows();
+          let tableRowsLength = tableRows.length;
+
+          this.totalNumberOfRows = tableRowsLength;
+
+          if (tableRowsLength < VISIBLE_ROW_COUNT) {
+            end = tableRowsLength;
+          } else {
+            let firstVisible = this.calculateFirstVisibleRow();
+            let lastVisible = this.calculateLastVisibleRow();
+            let totalVisible = lastVisible - firstVisible;
+
+            let numberOffscreen = VISIBLE_ROW_COUNT - totalVisible;
+            start = firstVisible - Math.floor(numberOffscreen / 2);
+            end = lastVisible + Math.ceil(numberOffscreen / 2);
+
+            if (start < 0) {
+              start = 0;
+              end = Math.min(VISIBLE_ROW_COUNT, tableRowsLength);
+            } else if (end >= tableRowsLength) {
+              end = tableRowsLength;
+              start = end - VISIBLE_ROW_COUNT + 1;
+            }
+          }
+
+          this.rowOffset = start;
+          this.visibleRows = tableRows.slice(start, end);
+
+          this.updatingView = false;
+        });
+      }
+    },
+    calculateFirstVisibleRow() {
+      let scrollTop = this.scrollable.scrollTop;
+
+      return Math.floor(scrollTop / this.rowHeight);
+    },
+    calculateLastVisibleRow() {
+      let scrollBottom = this.scrollable.scrollTop + this.scrollable.offsetHeight;
+
+      return Math.ceil(scrollBottom / this.rowHeight);
+    },
+    updateHeaders() {
+      this.headers = this.table.configuration.getVisibleHeaders();
+    },
+    calculateScrollbarWidth() {
+      // Scroll width seems to vary by a pixel for reasons that are not clear.
+      this.scrollW = this.scrollable.offsetWidth - this.scrollable.clientWidth + 1;
+    },
+    calculateColumnWidths() {
+      let columnWidths = {};
+      let totalWidth = 0;
+      let headerKeys = Object.keys(this.headers);
+      let sizingTableRow = this.sizingTable.children[1];
+      let sizingCells = sizingTableRow.children;
+
+      headerKeys.forEach((headerKey, headerIndex, array) => {
+        if (this.isAutosizeEnabled) {
+          columnWidths[headerKey] = this.sizingTable.clientWidth / array.length;
+        } else {
+          let cell = sizingCells[headerIndex];
+          columnWidths[headerKey] = cell.offsetWidth;
+        }
+
+        totalWidth += columnWidths[headerKey];
+      });
+
+      this.columnWidths = columnWidths;
+      this.totalWidth = totalWidth;
+
+      this.calculateScrollbarWidth();
+    },
+    getRow(rowIndex) {
+      return toRaw(this.visibleRows[rowIndex]);
+    },
+    sortBy(columnKey) {
+      let timeSystemKey = this.openmct.time.getTimeSystem().key;
+
+      if (this.telemetryMode === 'performance' && columnKey !== timeSystemKey) {
+        this.confirmUnlimitedMode('Switch to Unlimited Telemetry and Sort', () => {
+          this.initiateSort(columnKey);
+        });
+      } else {
+        this.initiateSort(columnKey);
+      }
+    },
+    initiateSort(columnKey) {
+      // If sorting by the same column, flip the sort direction.
+      if (this.sortOptions.key === columnKey) {
+        if (this.sortOptions.direction === 'asc') {
+          this.sortOptions.direction = 'desc';
+        } else {
+          this.sortOptions.direction = 'asc';
+        }
+      } else {
+        this.sortOptions = {
+          key: columnKey,
+          direction: 'desc'
+        };
+      }
+
+      this.table.sortBy(this.sortOptions);
+    },
+    scroll() {
+      this.updateVisibleRows();
+      this.synchronizeScrollX();
+
+      if (this.shouldAutoScroll()) {
+        this.autoScroll = true;
+      } else {
+        // If user scrolls away from bottom, disable auto-scroll.
+        // Auto-scroll will be re-enabled if user scrolls to bottom again.
+        this.autoScroll = false;
+      }
+    },
+    shouldAutoScroll() {
+      if (this.sortOptions.direction === 'desc') {
+        return false;
+      }
+
+      return (
+        this.scrollable.scrollTop >=
+        this.scrollable.scrollHeight - this.scrollable.offsetHeight - AUTO_SCROLL_TRIGGER_HEIGHT
+      );
+    },
+    initiateAutoScroll() {
+      this.scrollable.scrollTop = Number.MAX_SAFE_INTEGER;
+    },
+    synchronizeScrollX() {
+      if (this.$refs.headersHolderEl && this.scrollable) {
+        this.headersHolderEl.scrollLeft = this.scrollable.scrollLeft;
+      }
+    },
+    filterTelemetry(columnKey) {
+      if (this.enableRegexSearch[columnKey]) {
+        if (this.isCompleteRegex(this.filters[columnKey])) {
+          this.table.tableRows.setColumnRegexFilter(
+            columnKey,
+            this.filters[columnKey].slice(1, -1)
+          );
+        } else {
+          return;
+        }
+      } else {
+        this.table.tableRows.setColumnFilter(columnKey, this.filters[columnKey]);
+      }
+
+      this.setHeight();
+    },
+    filterChanged(columnKey, newFilterValue) {
+      this.filters[columnKey] = newFilterValue;
+      this.filterTelemetry(columnKey);
+    },
+    clearFilter(columnKey) {
+      this.filters[columnKey] = '';
+      this.table.tableRows.setColumnFilter(columnKey, '');
+      this.setHeight();
+    },
+    rowsAdded(rows) {
+      this.setHeight();
+
+      let sizingRow;
+      if (Array.isArray(rows)) {
+        sizingRow = rows[0];
+      } else {
+        sizingRow = rows;
+      }
+
+      if (!this.sizingRows[sizingRow.objectKeyString]) {
+        this.sizingRows[sizingRow.objectKeyString] = sizingRow;
+        this.$nextTick().then(this.calculateColumnWidths);
+      }
+
+      if (this.autoScroll) {
+        this.initiateAutoScroll();
+      }
+
+      this.updateVisibleRows();
+    },
+    rowsRemoved(rows) {
+      this.setHeight();
+      this.updateVisibleRows();
+    },
+    /**
+     * Calculates height based on total number of rows, and sets table height.
+     */
+    setHeight() {
+      let tableRowsLength = this.table.tableRows.getRowsLength();
+      this.totalHeight = this.rowHeight * tableRowsLength - 1;
+      // Set element height directly to avoid having to wait for Vue to update DOM
+      // which causes subsequent scroll to use an out of date height.
+      this.contentTable.style.height = this.totalHeight + 'px';
+    },
+    exportAsCSV(data) {
+      const headerKeys = Object.keys(this.headers);
+
+      this.csvExporter.export(data, {
+        filename: this.table.domainObject.name + '.csv',
+        headers: headerKeys
+      });
+    },
+    getTableRowData() {
+      const justTheData = this.table.tableRows
+        .getRows()
+        .map((row) => row.getFormattedDatum(this.headers));
+
+      return justTheData;
+    },
+    exportAllDataAsCSV() {
+      if (this.telemetryMode === 'performance') {
+        this.confirmUnlimitedMode('Switch to Unlimited Telemetry and Export', () => {
+          const data = this.getTableRowData();
+
+          this.exportAsCSV(data);
+        });
+      } else {
+        const data = this.getTableRowData();
+
+        this.exportAsCSV(data);
+      }
+    },
+    exportMarkedDataAsCSV() {
+      const data = this.table.tableRows
+        .getRows()
+        .filter((row) => row.marked === true)
+        .map((row) => row.getFormattedDatum(this.headers));
+
+      this.exportAsCSV(data);
+    },
+    outstandingRequests(loading) {
+      this.loading = loading;
+    },
+    handleStaleness({ keyString, stalenessResponse }) {
+      this.addOrRemoveStaleObject(keyString, stalenessResponse);
+    },
+    calculateTableSize() {
+      this.$nextTick().then(this.calculateColumnWidths);
+    },
+    updateConfiguration(configuration) {
+      this.isAutosizeEnabled = configuration.autosize;
+      this.hideHeaders = configuration.hideHeaders;
+
+      this.updateHeaders();
+      this.$nextTick().then(this.calculateColumnWidths);
+    },
+    addObject() {
+      this.updateHeaders();
+      this.$nextTick().then(this.calculateColumnWidths);
+    },
+    removeObject(objectIdentifier) {
+      let objectKeyString = this.openmct.objects.makeKeyString(objectIdentifier);
+      delete this.sizingRows[objectKeyString];
+      this.updateHeaders();
+      this.$nextTick().then(this.calculateColumnWidths);
+    },
+    resizeColumn(key, newWidth) {
+      let delta = newWidth - this.columnWidths[key];
+      this.columnWidths[key] = newWidth;
+      this.totalWidth += delta;
+    },
+    updateConfiguredColumnWidths() {
+      this.configuredColumnWidths = this.columnWidths;
+
+      let configuration = this.table.configuration.getConfiguration();
+      configuration.autosize = false;
+      configuration.columnWidths = this.configuredColumnWidths;
+
+      this.table.configuration.updateConfiguration(configuration);
+    },
+    setDropTargetOffset(dropOffsetLeft) {
+      this.dropOffsetLeft = dropOffsetLeft - this.scrollable.scrollLeft;
+    },
+    reorderColumn(from, to) {
+      let newHeaderKeys = Object.keys(this.headers);
+      let moveFromKey = newHeaderKeys[from];
+
+      if (to < from) {
+        newHeaderKeys.splice(from, 1);
+        newHeaderKeys.splice(to, 0, moveFromKey);
+      } else {
+        newHeaderKeys.splice(from, 1);
+        newHeaderKeys.splice(to, 0, moveFromKey);
+      }
+
+      let newHeaders = newHeaderKeys.reduce((headers, headerKey) => {
+        headers[headerKey] = this.headers[headerKey];
+
+        return headers;
+      }, {});
+
+      this.table.configuration.setColumnOrder(Object.keys(newHeaders));
+
+      this.headers = newHeaders;
+      this.dropOffsetLeft = undefined;
+
+      this.dropTargetActive(false);
+    },
+    dropTargetActive(isActive) {
+      this.isDropTargetActive = isActive;
+    },
+    pollForResize() {
+      let el = this.$refs.root;
+      let width = el.clientWidth;
+      let height = el.clientHeight;
+      let scrollTop = this.scrollable.scrollTop;
+
+      this.resizePollHandle = setInterval(() => {
+        this.renderWhenVisible(() => {
+          if ((el.clientWidth !== width || el.clientHeight !== height) && this.isAutosizeEnabled) {
+            this.calculateTableSize();
+            // On some resize events scrollTop is reset to 0. Possibly due to a transition we're using?
+            // Need to preserve scroll position in this case.
+            if (this.autoScroll) {
+              this.initiateAutoScroll();
+            } else {
+              this.scrollable.scrollTop = scrollTop;
+            }
+
+            width = el.clientWidth;
+            height = el.clientHeight;
+          }
+
+          scrollTop = this.scrollable.scrollTop;
+        });
+      }, RESIZE_POLL_INTERVAL);
+    },
+    clearRowsAndRerender() {
+      this.visibleRows = [];
+      this.$nextTick().then(this.updateVisibleRows);
+    },
+    pause(byButton) {
+      if (byButton) {
+        this.pausedByButton = true;
+      }
+
+      this.paused = true;
+      this.table.pause();
+    },
+    unpause(byButtonOrUserBoundsChange) {
+      if (byButtonOrUserBoundsChange) {
+        this.undoMarkedRows();
+        this.table.unpause();
+        this.paused = false;
+        this.pausedByButton = false;
+      } else {
+        if (!this.pausedByButton) {
+          this.undoMarkedRows();
+          this.table.unpause();
+          this.paused = false;
+        }
+      }
+
+      this.isShowingMarkedRowsOnly = false;
+    },
+    boundsChanged(_bounds, isTick) {
+      if (isTick) {
+        return;
+      }
+
+      // User bounds change.
+      if (this.paused) {
+        this.unpause(true);
+      }
+    },
+    togglePauseByButton() {
+      if (this.paused) {
+        this.unpause(true);
+      } else {
+        this.pause(true);
+      }
+    },
+    undoMarkedRows() {
+      this.markedRows.forEach((r) => (r.marked = false));
+      this.markedRows = [];
+    },
+    unmarkRow(rowIndex) {
+      if (this.markedRows.length > 1) {
+        let row = this.visibleRows[rowIndex];
+        let positionInMarkedArray = this.markedRows.indexOf(row);
+
+        row.marked = false;
+        this.markedRows.splice(positionInMarkedArray, 1);
+
+        if (this.isShowingMarkedRowsOnly) {
+          this.visibleRows.splice(rowIndex, 1);
+        }
+      } else if (this.markedRows.length === 1) {
+        this.unmarkAllRows();
+      }
+
+      if (this.markedRows.length === 0) {
+        this.unpause();
+      }
+    },
+    markRow(rowIndex, keyModifier) {
+      if (!this.marking.enable) {
+        return;
+      }
+
+      let insertMethod = 'unshift';
+
+      if (this.markedRows.length && !keyModifier) {
+        this.undoMarkedRows();
+        insertMethod = 'push';
+      }
+
+      let markedRow = this.visibleRows[rowIndex];
+
+      markedRow.marked = true;
+      this.pause();
+
+      if (this.marking.disableMultiSelect) {
+        this.unmarkAllRows();
+        insertMethod = 'push';
+      }
+
+      this.markedRows[insertMethod](markedRow);
+    },
+    unmarkAllRows(skipUnpause) {
+      this.undoMarkedRows();
+      this.isShowingMarkedRowsOnly = false;
+      this.unpause();
+      this.restorePreviousRows();
+    },
+    markMultipleConcurrentRows(rowIndex) {
+      if (!this.marking.enable) {
+        return;
+      }
+
+      if (!this.markedRows.length || this.marking.disableMultiSelect) {
+        this.markRow(rowIndex);
+      } else {
+        if (this.markedRows.length > 1) {
+          this.markedRows.forEach((r, i) => {
+            if (i !== 0) {
+              r.marked = false;
+            }
+          });
+          this.markedRows.splice(1);
+        }
+
+        const lastRowToBeMarked = this.visibleRows[rowIndex];
+
+        const allRows = this.table.tableRows.getRows();
+        let firstRowIndex = allRows.indexOf(toRaw(this.markedRows[0]));
+        let lastRowIndex = allRows.indexOf(toRaw(lastRowToBeMarked));
+
+        //supports backward selection
+        if (lastRowIndex < firstRowIndex) {
+          [firstRowIndex, lastRowIndex] = [lastRowIndex, firstRowIndex];
+        }
+
+        let baseRow = this.markedRows[0];
+
+        for (let i = firstRowIndex; i <= lastRowIndex; i++) {
+          let row = allRows[i];
+          row.marked = true;
+
+          if (row !== baseRow) {
+            this.markedRows.push(row);
+          }
+        }
+      }
+    },
+    checkForMarkedRows() {
+      this.isShowingMarkedRowsOnly = false;
+      this.markedRows = this.table.tableRows.getRows().filter((row) => row.marked);
+    },
+    showRows(rows) {
+      this.table.tableRows.rows = rows;
+      this.table.emit('filter');
+    },
+    toggleMarkedRows(flag) {
+      if (flag) {
+        this.isShowingMarkedRowsOnly = true;
+        this.userScroll = this.scrollable.scrollTop;
+        this.allRows = this.table.tableRows.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;
+      }
+    },
+    updateWidthsAndClearSizingTable() {
+      this.calculateColumnWidths();
+      this.configuredColumnWidths = this.columnWidths;
+
+      this.visibleRows.forEach((row, i) => {
+        this.sizingRows[i] = undefined;
+        delete this.sizingRows[i];
+      });
+    },
+    recalculateColumnWidths() {
+      this.visibleRows.forEach((row, i) => {
+        this.sizingRows[i] = row;
+      });
+
+      this.configuredColumnWidths = {};
+      this.isAutosizeEnabled = false;
+
+      this.$nextTick().then(this.updateWidthsAndClearSizingTable);
+    },
+    autosizeColumns() {
+      this.isAutosizeEnabled = true;
+
+      this.$nextTick().then(this.calculateColumnWidths);
+    },
+    toggleRegex(key) {
+      this.filters[key] = '';
+
+      if (this.enableRegexSearch[key] === undefined) {
+        this.enableRegexSearch[key] = true;
+      } else {
+        this.enableRegexSearch[key] = !this.enableRegexSearch[key];
+      }
+    },
+    isCompleteRegex(string) {
+      return string.length > 2 && string[0] === '/' && string[string.length - 1] === '/';
+    },
+    getViewContext() {
+      return {
+        type: 'telemetry-table',
+        exportAllDataAsCSV: this.exportAllDataAsCSV,
+        exportMarkedDataAsCSV: this.exportMarkedDataAsCSV,
+        unmarkAllRows: this.unmarkAllRows,
+        togglePauseByButton: this.togglePauseByButton,
+        expandColumns: this.recalculateColumnWidths,
+        autosizeColumns: this.autosizeColumns,
+        row: this.rowContext
+      };
+    },
+    initializeViewActions() {
+      if (this.markedRows.length > 0) {
+        this.viewActionsCollection.enable(['export-csv-marked', 'unmark-all-rows']);
+      } else if (this.markedRows.length === 0) {
+        this.viewActionsCollection.disable(['export-csv-marked', 'unmark-all-rows']);
+      }
+
+      if (this.loading) {
+        this.viewActionsCollection.disable(['export-csv-all']);
+      } else {
+        this.viewActionsCollection.enable(['export-csv-all']);
+      }
+
+      if (this.paused) {
+        this.viewActionsCollection.hide(['pause-data']);
+        this.viewActionsCollection.show(['play-data']);
+      } else {
+        this.viewActionsCollection.hide(['play-data']);
+        this.viewActionsCollection.show(['pause-data']);
+      }
+
+      if (this.isAutosizeEnabled) {
+        this.viewActionsCollection.show(['expand-columns']);
+        this.viewActionsCollection.hide(['autosize-columns']);
+      } else {
+        this.viewActionsCollection.show(['autosize-columns']);
+        this.viewActionsCollection.hide(['expand-columns']);
+      }
+    },
+    confirmUnlimitedMode(
+      label,
+      callback,
+      message = 'A new data request for all telemetry values for all endpoints will be made which will take some time. Do you want to continue?'
+    ) {
+      const dialog = this.openmct.overlays.dialog({
+        iconClass: 'alert',
+        message,
+        buttons: [
+          {
+            label,
+            emphasis: true,
+            callback: async () => {
+              this.updateTelemetryMode();
+              await this.isFinishedLoading;
+
+              callback();
+
+              dialog.dismiss();
+            }
+          },
+          {
+            label: 'Cancel',
+            callback: () => {
+              dialog.dismiss();
+            }
+          }
+        ]
+      });
+    },
+    updateTelemetryMode() {
+      this.telemetryMode = this.telemetryMode === 'unlimited' ? 'performance' : 'unlimited';
+
+      if (this.persistModeChanges) {
+        this.table.configuration.setTelemetryMode(this.telemetryMode);
+      }
+
+      this.table.updateTelemetryMode(this.telemetryMode);
+
+      const timeSystemKey = this.openmct.time.getTimeSystem().key;
+
+      if (this.telemetryMode === 'performance' && this.sortOptions.key !== timeSystemKey) {
+        this.openmct.notifications.info(
+          'Switched to Performance Mode: Table now sorted by time for optimized efficiency.'
+        );
+        this.initiateSort(timeSystemKey);
+      }
+    },
+    setRowHeight(height) {
+      this.rowHeight = height;
+      this.setHeight();
+      this.calculateTableSize();
+      this.clearRowsAndRerender();
+    },
+    updateViewContext(rowContext) {
+      this.rowContext = rowContext;
+    }
+  }
+};
+</script>
diff --git a/src/plugins/telemetryTable/components/TableConfiguration.vue b/src/plugins/telemetryTable/components/TableConfiguration.vue
new file mode 100644
index 00000000000..affb437258b
--- /dev/null
+++ b/src/plugins/telemetryTable/components/TableConfiguration.vue
@@ -0,0 +1,162 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="c-inspect-properties">
+    <template v-if="isEditing">
+      <div class="c-inspect-properties__header">Layout</div>
+      <ul class="c-inspect-properties__section">
+        <li class="c-inspect-properties__row">
+          <div class="c-inspect-properties__label" title="Auto-size table">
+            <label for="AutoSizeControl">Auto-size</label>
+          </div>
+          <div class="c-inspect-properties__value">
+            <input
+              id="AutoSizeControl"
+              type="checkbox"
+              :checked="configuration.autosize !== false"
+              @change="toggleAutosize()"
+            />
+          </div>
+        </li>
+        <li class="c-inspect-properties__row">
+          <div class="c-inspect-properties__label" title="Show or hide headers">
+            <label for="header-visibility">Hide Header</label>
+          </div>
+          <div class="c-inspect-properties__value">
+            <input
+              id="header-visibility"
+              type="checkbox"
+              :checked="configuration.hideHeaders === true"
+              @change="toggleHeaderVisibility"
+            />
+          </div>
+        </li>
+      </ul>
+      <div class="c-inspect-properties__header">Columns</div>
+      <ul class="c-inspect-properties__section">
+        <li v-for="(title, key) in headers" :key="key" class="c-inspect-properties__row">
+          <div class="c-inspect-properties__label" title="Show or hide column">
+            <label :for="key + 'ColumnControl'">{{ title }}</label>
+          </div>
+          <div class="c-inspect-properties__value">
+            <input
+              :id="key + 'ColumnControl'"
+              type="checkbox"
+              :checked="configuration.hiddenColumns[key] !== true"
+              @change="toggleColumn(key)"
+            />
+          </div>
+        </li>
+      </ul>
+    </template>
+  </div>
+</template>
+
+<script>
+import TelemetryTableColumn from '../TelemetryTableColumn.js';
+import TelemetryTableUnitColumn from '../TelemetryTableUnitColumn.js';
+
+export default {
+  inject: ['tableConfiguration', 'openmct'],
+  data() {
+    return {
+      headers: {},
+      isEditing: this.openmct.editor.isEditing(),
+      configuration: this.tableConfiguration.getConfiguration()
+    };
+  },
+  async mounted() {
+    this.unlisteners = [];
+    this.openmct.editor.on('isEditing', this.toggleEdit);
+    const compositionCollection = this.openmct.composition.get(
+      this.tableConfiguration.domainObject
+    );
+
+    const composition = await compositionCollection.load();
+    this.addColumnsForAllObjects(composition);
+    this.updateHeaders(this.tableConfiguration.getAllHeaders());
+
+    compositionCollection.on('add', this.addObject);
+    this.unlisteners.push(
+      compositionCollection.off.bind(compositionCollection, 'add', this.addObject)
+    );
+
+    compositionCollection.on('remove', this.removeObject);
+    this.unlisteners.push(
+      compositionCollection.off.bind(compositionCollection, 'remove', this.removeObject)
+    );
+  },
+  unmounted() {
+    this.tableConfiguration.destroy();
+    this.openmct.editor.off('isEditing', this.toggleEdit);
+    this.unlisteners.forEach((unlisten) => unlisten());
+  },
+  methods: {
+    updateHeaders(headers) {
+      this.headers = headers;
+    },
+    toggleColumn(key) {
+      let isHidden = this.configuration.hiddenColumns[key] === true;
+
+      this.configuration.hiddenColumns[key] = !isHidden;
+      this.tableConfiguration.updateConfiguration(this.configuration);
+    },
+    addObject(domainObject) {
+      this.addColumnsForObject(domainObject, true);
+      this.updateHeaders(this.tableConfiguration.getAllHeaders());
+    },
+    removeObject(objectIdentifier) {
+      this.tableConfiguration.removeColumnsForObject(objectIdentifier, true);
+      this.updateHeaders(this.tableConfiguration.getAllHeaders());
+    },
+    toggleEdit(isEditing) {
+      this.isEditing = isEditing;
+    },
+    toggleAutosize() {
+      this.configuration.autosize = !this.configuration.autosize;
+      this.tableConfiguration.updateConfiguration(this.configuration);
+    },
+    addColumnsForAllObjects(objects) {
+      objects.forEach((object) => this.addColumnsForObject(object, false));
+    },
+    addColumnsForObject(telemetryObject) {
+      const metadata = this.openmct.telemetry.getMetadata(telemetryObject);
+      let metadataValues = metadata ? metadata.values() : [];
+      metadataValues.forEach((metadatum) => {
+        let column = new TelemetryTableColumn(this.openmct, metadatum);
+        this.tableConfiguration.addSingleColumnForObject(telemetryObject, column);
+        // if units are available, need to add columns to be hidden
+        if (metadatum.unit !== undefined) {
+          let unitColumn = new TelemetryTableUnitColumn(this.openmct, metadatum);
+          this.tableConfiguration.addSingleColumnForObject(telemetryObject, unitColumn);
+        }
+      });
+    },
+    toggleHeaderVisibility() {
+      let hideHeaders = this.configuration.hideHeaders;
+
+      this.configuration.hideHeaders = !hideHeaders;
+      this.tableConfiguration.updateConfiguration(this.configuration);
+    }
+  }
+};
+</script>
diff --git a/src/plugins/telemetryTable/components/TableFooterIndicator.vue b/src/plugins/telemetryTable/components/TableFooterIndicator.vue
new file mode 100644
index 00000000000..ed0797019de
--- /dev/null
+++ b/src/plugins/telemetryTable/components/TableFooterIndicator.vue
@@ -0,0 +1,222 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="c-table-indicator" :class="{ 'is-filtering': filterNames.length > 0 }">
+    <div
+      v-if="filterNames.length > 0"
+      class="c-table-indicator__filter c-table-indicator__elem c-filter-indication"
+      :class="{ 'c-filter-indication--mixed': hasMixedFilters }"
+      :aria-label="title"
+      :title="title"
+    >
+      <span class="c-filter-indication__mixed">{{ label }}</span>
+      <span v-for="(name, index) in filterNames" :key="index" class="c-filter-indication__label">
+        {{ name }}
+      </span>
+    </div>
+
+    <div class="c-table-indicator__counts">
+      <span
+        :aria-label="rowCountTitle"
+        :title="rowCountTitle"
+        class="c-table-indicator__elem c-table-indicator__row-count"
+      >
+        {{ rowCount }} Rows
+      </span>
+
+      <span
+        v-if="markedRows"
+        class="c-table-indicator__elem c-table-indicator__marked-count"
+        :aria-label="markedRows + ' rows selected'"
+        :title="markedRows + ' rows selected'"
+      >
+        {{ markedRows }} Marked
+      </span>
+
+      <button :title="telemetryModeButtonTitle" class="c-button" @click="toggleTelemetryMode">
+        {{ telemetryModeButtonLabel }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+
+const FILTER_INDICATOR_LABEL = 'Filters:';
+const FILTER_INDICATOR_LABEL_MIXED = 'Mixed Filters:';
+const FILTER_INDICATOR_TITLE = 'Data filters are being applied to this view.';
+const FILTER_INDICATOR_TITLE_MIXED = 'A mix of data filter values are being applied to this view.';
+const USE_GLOBAL = 'useGlobal';
+
+export default {
+  inject: ['openmct', 'table'],
+  props: {
+    markedRows: {
+      type: Number,
+      default: 0
+    },
+    totalRows: {
+      type: Number,
+      default: 0
+    },
+    telemetryMode: {
+      type: String,
+      default: 'performance'
+    }
+  },
+  emits: ['telemetry-mode-change'],
+  data() {
+    return {
+      filterNames: [],
+      filteredTelemetry: {}
+    };
+  },
+  computed: {
+    hasMixedFilters() {
+      let filtersToCompare = _.omit(
+        this.filteredTelemetry[Object.keys(this.filteredTelemetry)[0]],
+        [USE_GLOBAL]
+      );
+
+      return Object.values(this.filteredTelemetry).some((filters) => {
+        return !_.isEqual(filtersToCompare, _.omit(filters, [USE_GLOBAL]));
+      });
+    },
+    isUnlimitedMode() {
+      return this.telemetryMode === 'unlimited';
+    },
+    label() {
+      if (this.hasMixedFilters) {
+        return FILTER_INDICATOR_LABEL_MIXED;
+      } else {
+        return FILTER_INDICATOR_LABEL;
+      }
+    },
+    rowCount() {
+      return this.isUnlimitedMode ? this.totalRows : 'LATEST 50';
+    },
+    rowCountTitle() {
+      return this.isUnlimitedMode
+        ? this.totalRows + ' rows visible after any filtering'
+        : 'performance mode limited to 50 rows';
+    },
+    telemetryModeButtonLabel() {
+      return this.isUnlimitedMode ? 'SHOW LATEST 50' : 'SHOW ALL';
+    },
+    telemetryModeButtonTitle() {
+      return this.isUnlimitedMode
+        ? 'Change to Performance mode (latest 50 values)'
+        : 'Change to show all values';
+    },
+    title() {
+      if (this.hasMixedFilters) {
+        return FILTER_INDICATOR_TITLE_MIXED;
+      } else {
+        return FILTER_INDICATOR_TITLE;
+      }
+    }
+  },
+  mounted() {
+    let filters = this.table.configuration.getConfiguration().filters || {};
+    this.table.configuration.on('change', this.handleConfigurationChanges);
+    this.updateFilters(filters);
+  },
+  unmounted() {
+    this.table.configuration.off('change', this.handleConfigurationChanges);
+  },
+  methods: {
+    toggleTelemetryMode() {
+      this.$emit('telemetry-mode-change');
+    },
+    setFilterNames() {
+      let names = [];
+      let composition = this.openmct.composition.get(this.table.configuration.domainObject);
+      if (composition !== undefined) {
+        composition.load().then((domainObjects) => {
+          domainObjects.forEach((telemetryObject) => {
+            let keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+            const metadata = this.openmct.telemetry.getMetadata(telemetryObject);
+            let metadataValues = metadata ? metadata.values() : [];
+            let filters = this.filteredTelemetry[keyString];
+
+            if (filters !== undefined) {
+              names.push(this.getFilterNamesFromMetadata(filters, metadataValues));
+            }
+          });
+
+          names = _.flatten(names);
+          this.filterNames = names.length === 0 ? names : Array.from(new Set(names));
+        });
+      }
+    },
+    getFilterNamesFromMetadata(filters, metadataValues) {
+      let filterNames = [];
+      filters = _.omit(filters, [USE_GLOBAL]);
+
+      Object.keys(filters).forEach((key) => {
+        if (!_.isEmpty(filters[key])) {
+          metadataValues.forEach((metadatum) => {
+            if (key === metadatum.key) {
+              if (typeof metadatum.filters[0] === 'object') {
+                filterNames.push(this.getFilterLabels(filters[key], metadatum));
+              } else {
+                filterNames.push(metadatum.name);
+              }
+            }
+          });
+        }
+      });
+
+      return _.flatten(filterNames);
+    },
+    getFilterLabels(filterObject, metadatum) {
+      let filterLabels = [];
+
+      Object.values(filterObject).forEach((comparator) => {
+        if (typeof comparator !== 'string') {
+          comparator.forEach((filterValue) => {
+            metadatum.filters[0].possibleValues.forEach((option) => {
+              if (option.value === filterValue) {
+                filterLabels.push(option.label);
+              }
+            });
+          });
+        } else {
+          filterLabels.push(comparator);
+        }
+      });
+
+      return filterLabels;
+    },
+    handleConfigurationChanges(configuration) {
+      if (!_.eq(this.filteredTelemetry, configuration.filters)) {
+        this.updateFilters(configuration.filters || {});
+      }
+    },
+    updateFilters(filters) {
+      this.filteredTelemetry = JSON.parse(JSON.stringify(filters));
+      this.setFilterNames();
+    }
+  }
+};
+</script>
diff --git a/src/plugins/telemetryTable/components/TableRow.vue b/src/plugins/telemetryTable/components/TableRow.vue
new file mode 100644
index 00000000000..5aa16f21ba6
--- /dev/null
+++ b/src/plugins/telemetryTable/components/TableRow.vue
@@ -0,0 +1,225 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <tr
+    :style="{ top: rowTop }"
+    class="noselect"
+    :class="[rowClass, { 'is-selected': marked }]"
+    v-on="listeners"
+  >
+    <component
+      :is="componentList[key]"
+      v-for="(title, key) in headers"
+      :key="key"
+      :column-key="key"
+      :style="rowStyle(key)"
+      :class="[cellLimitClasses[key], selectableColumns[key] ? 'is-selectable' : '']"
+      :object-path="objectPath"
+      :row="row"
+    />
+  </tr>
+</template>
+
+<script>
+import TableCell from './TableCell.vue';
+
+export default {
+  components: {
+    TableCell
+  },
+  inject: ['openmct', 'currentView'],
+  props: {
+    headers: {
+      type: Object,
+      required: true
+    },
+    row: {
+      type: Object,
+      required: true
+    },
+    columnWidths: {
+      type: Object,
+      required: true
+    },
+    objectPath: {
+      type: Array,
+      required: true
+    },
+    rowIndex: {
+      type: Number,
+      required: false,
+      default: undefined
+    },
+    rowOffset: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    rowHeight: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    marked: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ['mark-multiple-concurrent', 'unmark', 'mark', 'row-context-click'],
+  data: function () {
+    return {
+      rowTop: (this.rowOffset + this.rowIndex) * this.rowHeight + 'px',
+      rowClass: this.row.getRowClass(),
+      cellLimitClasses: this.row.getCellLimitClasses(),
+      selectableColumns: Object.keys(this.row.columns).reduce((selectable, columnKeys) => {
+        selectable[columnKeys] = this.row.columns[columnKeys].selectable;
+
+        return selectable;
+      }, {})
+    };
+  },
+  computed: {
+    listeners() {
+      let listenersObject = {
+        click: this.markRow
+      };
+
+      if (this.row.getContextMenuActions().length) {
+        listenersObject.contextmenu = this.showContextMenu;
+      }
+
+      return listenersObject;
+    },
+    componentList() {
+      return Object.keys(this.headers).reduce((components, header) => {
+        components[header] = this.row.getCellComponentName(header) || 'table-cell';
+
+        return components;
+      }, {});
+    }
+  },
+  // TODO: use computed properties
+  watch: {
+    rowOffset: 'calculateRowTop',
+    row: {
+      handler: 'formatRow',
+      deep: true
+    }
+  },
+  methods: {
+    calculateRowTop: function (rowOffset) {
+      this.rowTop = (rowOffset + this.rowIndex) * this.rowHeight + 'px';
+    },
+    formatRow: function (row) {
+      this.rowClass = row.getRowClass();
+      this.cellLimitClasses = row.getCellLimitClasses();
+    },
+    markRow: function (event) {
+      let keyCtrlModifier = false;
+
+      if (event.ctrlKey || event.metaKey) {
+        keyCtrlModifier = true;
+      }
+
+      if (event.shiftKey) {
+        this.$emit('mark-multiple-concurrent', this.rowIndex);
+      } else {
+        if (this.marked) {
+          this.$emit('unmark', this.rowIndex, keyCtrlModifier);
+        } else {
+          this.$emit('mark', this.rowIndex, keyCtrlModifier);
+        }
+      }
+    },
+    selectCell(element, columnKey) {
+      if (this.selectableColumns[columnKey]) {
+        //TODO: This is a hack. Cannot get parent this way.
+        this.openmct.selection.select(
+          [
+            {
+              element: element,
+              context: {
+                type: 'table-cell',
+                row: this.row.objectKeyString,
+                column: columnKey
+              }
+            },
+            {
+              element: this.openmct.layout.$refs.browseObject.$el,
+              context: {
+                item: this.openmct.router.path[0]
+              }
+            }
+          ],
+          false
+        );
+        event.stopPropagation();
+      }
+    },
+    getDatum() {
+      return this.row.fullDatum;
+    },
+    rowStyle(key) {
+      return this.columnWidths[key] === undefined
+        ? {}
+        : { width: this.columnWidths[key] + 'px', 'max-width': this.columnWidths[key] + 'px' };
+    },
+    showContextMenu: async function (event) {
+      event.preventDefault();
+
+      this.updateViewContext();
+      this.markRow(event);
+
+      const contextualDomainObject = await this.row.getContextualDomainObject?.(
+        this.openmct,
+        this.row.objectKeyString
+      );
+
+      let objectPath = this.objectPath;
+      if (contextualDomainObject) {
+        objectPath = objectPath.slice();
+        objectPath.unshift(contextualDomainObject);
+      }
+
+      const actions = this.row
+        .getContextMenuActions()
+        .map((key) => this.openmct.actions.getAction(key));
+      const menuItems = this.openmct.menus.actionsToMenuItems(
+        actions,
+        objectPath,
+        this.currentView
+      );
+      if (menuItems.length) {
+        this.openmct.menus.showMenu(event.x, event.y, menuItems);
+      }
+    },
+    updateViewContext() {
+      this.$emit('row-context-click', {
+        viewHistoricalData: true,
+        viewDatumAction: true,
+        getDatum: this.getDatum
+      });
+    }
+  }
+};
+</script>
diff --git a/src/plugins/telemetryTable/components/sizing-row.vue b/src/plugins/telemetryTable/components/sizing-row.vue
deleted file mode 100644
index 8855cc172d7..00000000000
--- a/src/plugins/telemetryTable/components/sizing-row.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-<tr class="c-telemetry-table__sizing-tr"><td>SIZING ROW</td></tr>
-</template>
-
-<script>
-export default {
-    props: {
-        isEditing: {
-            type: Boolean,
-            default: false
-        }
-    },
-    watch: {
-        isEditing: function (isEditing) {
-            if (isEditing) {
-                this.pollForRowHeight();
-            } else {
-                this.clearPoll();
-            }
-        }
-    },
-    mounted() {
-        this.$nextTick().then(() => {
-            this.height = this.$el.offsetHeight;
-            this.$emit('change-height', this.height);
-        });
-        if (this.isEditing) {
-            this.pollForRowHeight();
-        }
-    },
-    destroyed() {
-        this.clearPoll();
-    },
-    methods: {
-        pollForRowHeight() {
-            this.clearPoll();
-            this.pollID = window.setInterval(this.heightPoll, 300);
-        },
-        clearPoll() {
-            if (this.pollID) {
-                window.clearInterval(this.pollID);
-                this.pollID = undefined;
-            }
-        },
-        heightPoll() {
-            let height = this.$el.offsetHeight;
-            if (height !== this.height) {
-                this.$emit('change-height', height);
-                this.height = height;
-            }
-        }
-    }
-};
-</script>
diff --git a/src/plugins/telemetryTable/components/table-cell.vue b/src/plugins/telemetryTable/components/table-cell.vue
deleted file mode 100644
index 46a27d4ffd1..00000000000
--- a/src/plugins/telemetryTable/components/table-cell.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-<template>
-<td
-    :title="formattedValue"
-    @click="selectCell($event.currentTarget, columnKey)"
->
-    {{ formattedValue }}
-</td>
-</template>
-
-<script>
-export default {
-    inject: ['openmct'],
-    props: {
-        row: {
-            type: Object,
-            required: true
-        },
-        columnKey: {
-            type: String,
-            required: true
-        },
-        objectPath: {
-            type: Array,
-            required: true
-        }
-    },
-    computed: {
-        formattedValue() {
-            return this.row.getFormattedValue(this.columnKey);
-        },
-        isSelectable() {
-            let column = this.row.columns[this.columnKey];
-
-            return column && column.selectable;
-        }
-    },
-    methods: {
-        selectCell(element, columnKey) {
-            if (this.isSelectable) {
-                this.openmct.selection.select([{
-                    element: element,
-                    context: {
-                        type: 'table-cell',
-                        row: this.row.objectKeyString,
-                        column: columnKey
-                    }
-                }, {
-                    element: this.openmct.layout.$refs.browseObject.$el,
-                    context: {
-                        item: this.objectPath[0]
-                    }
-                }], false);
-                event.stopPropagation();
-            }
-        }
-    }
-};
-</script>
diff --git a/src/plugins/telemetryTable/components/table-column-header.vue b/src/plugins/telemetryTable/components/table-column-header.vue
deleted file mode 100644
index 394258a265f..00000000000
--- a/src/plugins/telemetryTable/components/table-column-header.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-<template>
-<th
-    :style="{ width: columnWidth + 'px', 'max-width': columnWidth + 'px'}"
-    :draggable="isEditing"
-    @mouseup="sort"
-    v-on="isEditing ? {
-        dragstart: columnMoveStart,
-        drop: columnMoveEnd,
-        dragleave: hideDropTarget,
-        dragover: dragOverColumn
-    } : {}"
->
-    <div
-        class="c-telemetry-table__headers__content"
-        :class="[
-            isSortable ? 'is-sortable' : '',
-            isSortable && sortOptions.key === headerKey ? 'is-sorting' : '',
-            isSortable && sortOptions.direction].join(' ')"
-    >
-        <div
-            class="c-telemetry-table__resize-hitarea"
-            @mousedown="resizeColumnStart"
-        ></div>
-        <slot></slot>
-    </div>
-</th>
-</template>
-<script>
-const MOVE_COLUMN_DT_TYPE = 'movecolumnfromindex';
-
-export default {
-    inject: ['openmct'],
-    props: {
-        headerKey: {
-            type: String,
-            default: undefined
-        },
-        headerIndex: {
-            type: Number,
-            default: undefined
-        },
-        isHeaderTitle: {
-            type: Boolean,
-            default: undefined
-        },
-        sortOptions: {
-            type: Object,
-            default: undefined
-        },
-        columnWidth: {
-            type: Number,
-            default: undefined
-        },
-        hotzone: Boolean,
-        isEditing: Boolean
-    },
-    computed: {
-        isSortable() {
-            return this.sortOptions !== undefined;
-        }
-    },
-    methods: {
-        resizeColumnStart(event) {
-            this.resizeStartX = event.clientX;
-            this.resizeStartWidth = this.columnWidth;
-
-            document.addEventListener('mouseup', this.resizeColumnEnd, {
-                once: true,
-                capture: true
-            });
-            document.addEventListener('mousemove', this.resizeColumn);
-            event.preventDefault();
-        },
-        resizeColumnEnd(event) {
-            this.resizeStartX = undefined;
-            this.resizeStartWidth = undefined;
-            document.removeEventListener('mousemove', this.resizeColumn);
-            event.preventDefault();
-            event.stopPropagation();
-
-            this.$emit('resizeColumnEnd');
-        },
-        resizeColumn(event) {
-            let delta = event.clientX - this.resizeStartX;
-            let newWidth = this.resizeStartWidth + delta;
-            let minWidth = parseInt(window.getComputedStyle(this.$el).minWidth, 10);
-            if (newWidth > minWidth) {
-                this.$emit('resizeColumn', this.headerKey, newWidth);
-            }
-        },
-        columnMoveStart(event) {
-            event.dataTransfer.setData(MOVE_COLUMN_DT_TYPE, this.headerIndex);
-        },
-        isColumnMoveEvent(event) {
-            return [...event.dataTransfer.types].includes(MOVE_COLUMN_DT_TYPE);
-        },
-        dragOverColumn(event) {
-            if (this.isColumnMoveEvent(event)) {
-                event.preventDefault();
-                this.updateDropOffset(event.currentTarget, event.clientX);
-            } else {
-                return false;
-            }
-        },
-        updateDropOffset(element, clientX) {
-            let thClientLeft = element.getBoundingClientRect().x;
-            let offsetInHeader = clientX - thClientLeft;
-            let dropOffsetLeft;
-
-            if (offsetInHeader < element.offsetWidth / 2) {
-                dropOffsetLeft = element.offsetLeft;
-            } else {
-                dropOffsetLeft = element.offsetLeft + element.offsetWidth;
-            }
-
-            this.$emit('dropTargetOffsetChanged', dropOffsetLeft);
-            this.$emit('dropTargetActive', true);
-        },
-        hideDropTarget() {
-            this.$emit('dropTargetActive', false);
-        },
-        columnMoveEnd(event) {
-            if (this.isColumnMoveEvent(event)) {
-                let toIndex = this.headerIndex;
-                let fromIndex = event.dataTransfer.getData(MOVE_COLUMN_DT_TYPE);
-                if (event.offsetX < event.target.offsetWidth / 2) {
-                    if (toIndex > fromIndex) {
-                        toIndex--;
-                    }
-                } else {
-                    if (toIndex < fromIndex) {
-                        toIndex++;
-                    }
-                }
-
-                if (toIndex !== fromIndex) {
-                    this.$emit('reorderColumn', fromIndex, toIndex);
-                }
-            }
-        },
-        sort() {
-            this.$emit("sort");
-        }
-    }
-};
-</script>
diff --git a/src/plugins/telemetryTable/components/table-configuration.vue b/src/plugins/telemetryTable/components/table-configuration.vue
deleted file mode 100644
index 2d43573969a..00000000000
--- a/src/plugins/telemetryTable/components/table-configuration.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<template>
-<div class="c-inspect-properties">
-    <template v-if="isEditing">
-        <div class="c-inspect-properties__header">
-            Table Layout
-        </div>
-        <ul class="c-inspect-properties__section">
-            <li class="c-inspect-properties__row">
-                <div
-                    class="c-inspect-properties__label"
-                    title="Auto-size table"
-                >
-                    <label for="AutoSizeControl">Auto-size</label>
-                </div>
-                <div class="c-inspect-properties__value">
-                    <input
-                        id="AutoSizeControl"
-                        type="checkbox"
-                        :checked="configuration.autosize !== false"
-                        @change="toggleAutosize()"
-                    >
-                </div>
-            </li>
-            <li class="c-inspect-properties__row">
-                <div
-                    class="c-inspect-properties__label"
-                    title="Show or hide headers"
-                >
-                    <label for="header-visibility">Hide Header</label>
-                </div>
-                <div class="c-inspect-properties__value">
-                    <input
-                        id="header-visibility"
-                        type="checkbox"
-                        :checked="configuration.hideHeaders === true"
-                        @change="toggleHeaderVisibility"
-                    >
-                </div>
-            </li>
-        </ul>
-        <div class="c-inspect-properties__header">
-            Table Column Visibility
-        </div>
-        <ul class="c-inspect-properties__section">
-            <li
-                v-for="(title, key) in headers"
-                :key="key"
-                class="c-inspect-properties__row"
-            >
-                <div
-                    class="c-inspect-properties__label"
-                    title="Show or hide column"
-                >
-                    <label :for="key + 'ColumnControl'">{{ title }}</label>
-                </div>
-                <div class="c-inspect-properties__value">
-                    <input
-                        :id="key + 'ColumnControl'"
-                        type="checkbox"
-                        :checked="configuration.hiddenColumns[key] !== true"
-                        @change="toggleColumn(key)"
-                    >
-                </div>
-            </li>
-        </ul>
-    </template>
-</div>
-</template>
-
-<script>
-import TelemetryTableColumn from '../TelemetryTableColumn';
-import TelemetryTableUnitColumn from '../TelemetryTableUnitColumn';
-
-export default {
-    inject: ['tableConfiguration', 'openmct'],
-    data() {
-        return {
-            headers: {},
-            isEditing: this.openmct.editor.isEditing(),
-            configuration: this.tableConfiguration.getConfiguration()
-        };
-    },
-    mounted() {
-        this.unlisteners = [];
-        this.openmct.editor.on('isEditing', this.toggleEdit);
-        let compositionCollection = this.openmct.composition.get(this.tableConfiguration.domainObject);
-
-        compositionCollection.load()
-            .then((composition) => {
-                this.addColumnsForAllObjects(composition);
-                this.updateHeaders(this.tableConfiguration.getAllHeaders());
-
-                compositionCollection.on('add', this.addObject);
-                this.unlisteners.push(compositionCollection.off.bind(compositionCollection, 'add', this.addObject));
-
-                compositionCollection.on('remove', this.removeObject);
-                this.unlisteners.push(compositionCollection.off.bind(compositionCollection, 'remove', this.removeObject));
-            });
-    },
-    destroyed() {
-        this.tableConfiguration.destroy();
-        this.openmct.editor.off('isEditing', this.toggleEdit);
-        this.unlisteners.forEach((unlisten) => unlisten());
-    },
-    methods: {
-        updateHeaders(headers) {
-            this.headers = headers;
-        },
-        toggleColumn(key) {
-            let isHidden = this.configuration.hiddenColumns[key] === true;
-
-            this.configuration.hiddenColumns[key] = !isHidden;
-            this.tableConfiguration.updateConfiguration(this.configuration);
-        },
-        addObject(domainObject) {
-            this.addColumnsForObject(domainObject, true);
-            this.updateHeaders(this.tableConfiguration.getAllHeaders());
-        },
-        removeObject(objectIdentifier) {
-            this.tableConfiguration.removeColumnsForObject(objectIdentifier, true);
-            this.updateHeaders(this.tableConfiguration.getAllHeaders());
-        },
-        toggleEdit(isEditing) {
-            this.isEditing = isEditing;
-        },
-        toggleAutosize() {
-            this.configuration.autosize = !this.configuration.autosize;
-            this.tableConfiguration.updateConfiguration(this.configuration);
-        },
-        addColumnsForAllObjects(objects) {
-            objects.forEach(object => this.addColumnsForObject(object, false));
-        },
-        addColumnsForObject(telemetryObject) {
-            let metadataValues = this.openmct.telemetry.getMetadata(telemetryObject).values();
-            metadataValues.forEach(metadatum => {
-                let column = new TelemetryTableColumn(this.openmct, metadatum);
-                this.tableConfiguration.addSingleColumnForObject(telemetryObject, column);
-                // if units are available, need to add columns to be hidden
-                if (metadatum.unit !== undefined) {
-                    let unitColumn = new TelemetryTableUnitColumn(this.openmct, metadatum);
-                    this.tableConfiguration.addSingleColumnForObject(telemetryObject, unitColumn);
-                }
-            });
-        },
-        toggleHeaderVisibility() {
-            let hideHeaders = this.configuration.hideHeaders;
-
-            this.configuration.hideHeaders = !hideHeaders;
-            this.tableConfiguration.updateConfiguration(this.configuration);
-        }
-    }
-};
-</script>
diff --git a/src/plugins/telemetryTable/components/table-footer-indicator.scss b/src/plugins/telemetryTable/components/table-footer-indicator.scss
index 3419cec3f97..115f769b3cb 100644
--- a/src/plugins/telemetryTable/components/table-footer-indicator.scss
+++ b/src/plugins/telemetryTable/components/table-footer-indicator.scss
@@ -1,29 +1,30 @@
 .c-table-indicator {
-    display: flex;
-    align-items: center;
-    font-size: 0.9em;
-    overflow: hidden;
+  display: flex;
+  align-items: center;
+  font-size: 0.9em;
+  overflow: hidden;
 
-    &__elem {
-        @include ellipsize();
-        flex: 0 1 auto;
-        padding: 2px;
-        text-transform: uppercase;
+  &__elem {
+    @include ellipsize();
+    flex: 0 1 auto;
+    padding: 2px;
+    text-transform: uppercase;
 
-        > * {
-            //display: contents;
-        }
+    > * {
+      //display: contents;
     }
+  }
 
-    &__counts {
-        //background: rgba(deeppink, 0.1);
-        display: flex;
-        flex: 1 1 auto;
-        justify-content: flex-end;
-        overflow: hidden;
+  &__counts {
+    //background: rgba(deeppink, 0.1);
+    display: flex;
+    align-items: center;
+    flex: 1 1 auto;
+    justify-content: flex-end;
+    overflow: hidden;
 
-        > * {
-            margin-left: $interiorMargin;
-        }
+    > * {
+      margin-left: $interiorMargin;
     }
+  }
 }
diff --git a/src/plugins/telemetryTable/components/table-footer-indicator.vue b/src/plugins/telemetryTable/components/table-footer-indicator.vue
deleted file mode 100644
index a6bea0d465f..00000000000
--- a/src/plugins/telemetryTable/components/table-footer-indicator.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<template>
-<div
-    class="c-table-indicator"
-    :class="{ 'is-filtering': filterNames.length > 0 }"
->
-    <div
-        v-if="filterNames.length > 0"
-        class="c-table-indicator__filter c-table-indicator__elem c-filter-indication"
-        :class="{ 'c-filter-indication--mixed': hasMixedFilters }"
-        :title="title"
-    >
-        <span class="c-filter-indication__mixed">{{ label }}</span>
-        <span
-            v-for="(name, index) in filterNames"
-            :key="index"
-            class="c-filter-indication__label"
-        >
-            {{ name }}
-        </span>
-    </div>
-
-    <div class="c-table-indicator__counts">
-        <span
-            :title="totalRows + ' rows visible after any filtering'"
-            class="c-table-indicator__elem c-table-indicator__row-count"
-        >
-            {{ totalRows }} Rows
-        </span>
-
-        <span
-            v-if="markedRows"
-            class="c-table-indicator__elem c-table-indicator__marked-count"
-            :title="markedRows + ' rows selected'"
-        >
-            {{ markedRows }} Marked
-        </span>
-
-    </div>
-</div>
-</template>
-
-<script>
-import _ from 'lodash';
-
-const FILTER_INDICATOR_LABEL = 'Filters:';
-const FILTER_INDICATOR_LABEL_MIXED = 'Mixed Filters:';
-const FILTER_INDICATOR_TITLE = 'Data filters are being applied to this view.';
-const FILTER_INDICATOR_TITLE_MIXED = 'A mix of data filter values are being applied to this view.';
-const USE_GLOBAL = 'useGlobal';
-
-export default {
-    inject: ['openmct', 'table'],
-    props: {
-        markedRows: {
-            type: Number,
-            default: 0
-        },
-        totalRows: {
-            type: Number,
-            default: 0
-        }
-    },
-    data() {
-        return {
-            filterNames: [],
-            filteredTelemetry: {}
-        };
-    },
-    computed: {
-        hasMixedFilters() {
-            let filtersToCompare = _.omit(this.filteredTelemetry[Object.keys(this.filteredTelemetry)[0]], [USE_GLOBAL]);
-
-            return Object.values(this.filteredTelemetry).some(filters => {
-                return !_.isEqual(filtersToCompare, _.omit(filters, [USE_GLOBAL]));
-            });
-        },
-        label() {
-            if (this.hasMixedFilters) {
-                return FILTER_INDICATOR_LABEL_MIXED;
-            } else {
-                return FILTER_INDICATOR_LABEL;
-            }
-        },
-        title() {
-            if (this.hasMixedFilters) {
-                return FILTER_INDICATOR_TITLE_MIXED;
-            } else {
-                return FILTER_INDICATOR_TITLE;
-            }
-        }
-    },
-    mounted() {
-        let filters = this.table.configuration.getConfiguration().filters || {};
-        this.table.configuration.on('change', this.handleConfigurationChanges);
-        this.updateFilters(filters);
-    },
-    destroyed() {
-        this.table.configuration.off('change', this.handleConfigurationChanges);
-    },
-    methods: {
-        setFilterNames() {
-            let names = [];
-            let composition = this.openmct.composition.get(this.table.configuration.domainObject);
-            if (composition !== undefined) {
-                composition.load().then((domainObjects) => {
-                    domainObjects.forEach(telemetryObject => {
-                        let keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
-                        let metadataValues = this.openmct.telemetry.getMetadata(telemetryObject).values();
-                        let filters = this.filteredTelemetry[keyString];
-
-                        if (filters !== undefined) {
-                            names.push(this.getFilterNamesFromMetadata(filters, metadataValues));
-                        }
-                    });
-
-                    names = _.flatten(names);
-                    this.filterNames = names.length === 0 ? names : Array.from(new Set(names));
-                });
-            }
-        },
-        getFilterNamesFromMetadata(filters, metadataValues) {
-            let filterNames = [];
-            filters = _.omit(filters, [USE_GLOBAL]);
-
-            Object.keys(filters).forEach(key => {
-                if (!_.isEmpty(filters[key])) {
-                    metadataValues.forEach(metadatum => {
-                        if (key === metadatum.key) {
-                            if (typeof metadatum.filters[0] === "object") {
-                                filterNames.push(this.getFilterLabels(filters[key], metadatum));
-                            } else {
-                                filterNames.push(metadatum.name);
-                            }
-                        }
-                    });
-                }
-            });
-
-            return _.flatten(filterNames);
-        },
-        getFilterLabels(filterObject, metadatum) {
-            let filterLabels = [];
-            Object.values(filterObject).forEach(comparator => {
-                comparator.forEach(filterValue => {
-                    metadatum.filters[0].possibleValues.forEach(option => {
-                        if (option.value === filterValue) {
-                            filterLabels.push(option.label);
-                        }
-                    });
-                });
-            });
-
-            return filterLabels;
-        },
-        handleConfigurationChanges(configuration) {
-            if (!_.eq(this.filteredTelemetry, configuration.filters)) {
-                this.updateFilters(configuration.filters || {});
-            }
-        },
-        updateFilters(filters) {
-            this.filteredTelemetry = JSON.parse(JSON.stringify(filters));
-            this.setFilterNames();
-        }
-    }
-};
-</script>
diff --git a/src/plugins/telemetryTable/components/table-row.scss b/src/plugins/telemetryTable/components/table-row.scss
index f21b297f230..a21397c81f6 100644
--- a/src/plugins/telemetryTable/components/table-row.scss
+++ b/src/plugins/telemetryTable/components/table-row.scss
@@ -1,9 +1,9 @@
 .noselect {
--webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-    -khtml-user-select: none; /* Konqueror HTML */
-    -moz-user-select: none; /* Firefox */
-        -ms-user-select: none; /* Internet Explorer/Edge */
-            user-select: none; /* Non-prefixed version, currently
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently
                                 supported by Chrome and Opera */
 }
diff --git a/src/plugins/telemetryTable/components/table-row.vue b/src/plugins/telemetryTable/components/table-row.vue
deleted file mode 100644
index d9cec58ff09..00000000000
--- a/src/plugins/telemetryTable/components/table-row.vue
+++ /dev/null
@@ -1,199 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-<template>
-<tr
-    :style="{ top: rowTop }"
-    class="noselect"
-    :class="[
-        rowClass,
-        {'is-selected': marked}
-    ]"
-    v-on="listeners"
->
-    <component
-        :is="componentList[key]"
-        v-for="(title, key) in headers"
-        :key="key"
-        :column-key="key"
-        :style="columnWidths[key] === undefined ? {} : { width: columnWidths[key] + 'px', 'max-width': columnWidths[key] + 'px'}"
-        :class="[cellLimitClasses[key], selectableColumns[key] ? 'is-selectable' : '']"
-        :object-path="objectPath"
-        :row="row"
-    />
-</tr>
-</template>
-
-<script>
-import TableCell from './table-cell.vue';
-
-export default {
-    components: {
-        TableCell
-    },
-    inject: ['openmct', 'currentView'],
-    props: {
-        headers: {
-            type: Object,
-            required: true
-        },
-        row: {
-            type: Object,
-            required: true
-        },
-        columnWidths: {
-            type: Object,
-            required: true
-        },
-        objectPath: {
-            type: Array,
-            required: true
-        },
-        rowIndex: {
-            type: Number,
-            required: false,
-            default: undefined
-        },
-        rowOffset: {
-            type: Number,
-            required: false,
-            default: 0
-        },
-        rowHeight: {
-            type: Number,
-            required: false,
-            default: 0
-        },
-        marked: {
-            type: Boolean,
-            required: false,
-            default: false
-        }
-    },
-    data: function () {
-        return {
-            rowTop: (this.rowOffset + this.rowIndex) * this.rowHeight + 'px',
-            rowClass: this.row.getRowClass(),
-            cellLimitClasses: this.row.getCellLimitClasses(),
-            selectableColumns: Object.keys(this.row.columns).reduce((selectable, columnKeys) => {
-                selectable[columnKeys] = this.row.columns[columnKeys].selectable;
-
-                return selectable;
-            }, {})
-        };
-    },
-    computed: {
-        listeners() {
-            let listenersObject = {
-                click: this.markRow
-            };
-
-            if (this.row.getContextMenuActions().length) {
-                listenersObject.contextmenu = this.showContextMenu;
-            }
-
-            return listenersObject;
-        },
-        componentList() {
-            return Object.keys(this.headers).reduce((components, header) => {
-                components[header] = this.row.getCellComponentName(header) || 'table-cell';
-
-                return components;
-            }, {});
-        }
-    },
-    // TODO: use computed properties
-    watch: {
-        rowOffset: 'calculateRowTop',
-        row: {
-            handler: 'formatRow',
-            deep: true
-        }
-    },
-    methods: {
-        calculateRowTop: function (rowOffset) {
-            this.rowTop = (rowOffset + this.rowIndex) * this.rowHeight + 'px';
-        },
-        formatRow: function (row) {
-            this.rowClass = row.getRowClass();
-            this.cellLimitClasses = row.getCellLimitClasses();
-        },
-        markRow: function (event) {
-            let keyCtrlModifier = false;
-
-            if (event.ctrlKey || event.metaKey) {
-                keyCtrlModifier = true;
-            }
-
-            if (event.shiftKey) {
-                this.$emit('markMultipleConcurrent', this.rowIndex);
-            } else {
-                if (this.marked) {
-                    this.$emit('unmark', this.rowIndex, keyCtrlModifier);
-                } else {
-                    this.$emit('mark', this.rowIndex, keyCtrlModifier);
-                }
-            }
-        },
-        selectCell(element, columnKey) {
-            if (this.selectableColumns[columnKey]) {
-                //TODO: This is a hack. Cannot get parent this way.
-                this.openmct.selection.select([{
-                    element: element,
-                    context: {
-                        type: 'table-cell',
-                        row: this.row.objectKeyString,
-                        column: columnKey
-                    }
-                }, {
-                    element: this.openmct.layout.$refs.browseObject.$el,
-                    context: {
-                        item: this.openmct.router.path[0]
-                    }
-                }], false);
-                event.stopPropagation();
-            }
-        },
-        getDatum() {
-            return this.row.fullDatum;
-        },
-        showContextMenu: function (event) {
-            event.preventDefault();
-
-            this.updateViewContext();
-            this.markRow(event);
-
-            const actions = this.row.getContextMenuActions().map(key => this.openmct.actions.getAction(key));
-            const menuItems = this.openmct.menus.actionsToMenuItems(actions, this.objectPath, this.currentView);
-            if (menuItems.length) {
-                this.openmct.menus.showMenu(event.x, event.y, menuItems);
-            }
-        },
-        updateViewContext() {
-            this.$emit('rowContextClick', {
-                viewHistoricalData: true,
-                viewDatumAction: true,
-                getDatum: this.getDatum
-            });
-        }
-    }
-};
-</script>
diff --git a/src/plugins/telemetryTable/components/table.scss b/src/plugins/telemetryTable/components/table.scss
index d87da9be93f..eba7fdc5a80 100644
--- a/src/plugins/telemetryTable/components/table.scss
+++ b/src/plugins/telemetryTable/components/table.scss
@@ -1,239 +1,235 @@
 .c-telemetry-table__drop-target {
-    position: absolute;
-    width: 2px;
-    background-color: $editUIColor;
-    box-shadow: rgba($editUIColor, 0.5) 0 0 10px;
-    z-index: 1;
-    pointer-events: none;
+  position: absolute;
+  width: 2px;
+  background-color: $editUIColor;
+  box-shadow: rgba($editUIColor, 0.5) 0 0 10px;
+  z-index: 1;
+  pointer-events: none;
 }
 
 .c-telemetry-table {
-    // Table that displays telemetry in a scrolling body area
-
-    @include fontAndSize();
-
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: flex-start;
+  // Table that displays telemetry in a scrolling body area
+
+  @include fontAndSize();
+
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  overflow: hidden;
+
+  th,
+  td {
+    display: block;
+    flex: 1 0 auto;
+    width: 100px;
+    vertical-align: middle; // This is crucial to hiding 4px height injected by browser by default
+  }
+
+  /******************************* WRAPPERS */
+  &__headers-w {
+    // Wraps __headers table
+    flex: 0 0 auto;
     overflow: hidden;
+    background: $colorTabHeaderBg;
+  }
 
-    th, td {
-        display: block;
-        flex: 1 0 auto;
-        width: 100px;
-        vertical-align: middle; // This is crucial to hiding 4px height injected by browser by default
+  /******************************* TABLES */
+  &__headers,
+  &__body {
+    tr {
+      display: flex;
+      align-items: stretch;
     }
+  }
 
-    /******************************* WRAPPERS */
-    &__headers-w {
-        // Wraps __headers table
-        flex: 0 0 auto;
-        overflow: hidden;
-        background: $colorTabHeaderBg;
+  &__headers {
+    // A table
+    thead {
+      display: block;
     }
 
-    /******************************* TABLES */
-    &__headers,
-    &__body {
-        tr {
-            display: flex;
-            align-items: stretch;
-        }
+    &__labels {
+      // Top row, has labels
+      .c-telemetry-table__headers__content {
+        // Holds __label, sort indicator and resize-hitarea
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+      }
     }
 
-    &__headers {
-        // A table
-        thead {
-            display: block;
-        }
-
-        &__labels {
-            // Top row, has labels
-            .c-telemetry-table__headers__content {
-                // Holds __label, sort indicator and resize-hitarea
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 100%;
-            }
-        }
-
-        &__filter {
-            .c-table__search {
-                padding-top: 0;
-                padding-bottom: 0;
-            }
-            .is-in-small-container & {
-                display: none;
-            }
-        }
-    }
+    &__filter {
+      .c-table__search {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
 
-    &__headers__label {
-        overflow: hidden;
-        flex: 0 1 auto;
+      .--width-less-than-600 & {
+        display: none !important;
+      }
     }
+  }
 
-    &__resize-hitarea {
-        // In table-column-header.vue
-        @include abs();
-        display: none; // Set to display: block in .is-editing section below
-        left: auto; right: -1 * $tabularTdPadLR;
-        width: $tableResizeColHitareaD;
-        cursor: col-resize;
-        transform: translateX(50%); // Move so this element sits over border between columns
+  &__headers__label {
+    overflow: hidden;
+    flex: 0 1 auto;
+  }
+
+  &__resize-hitarea {
+    // In table-column-header.vue
+    @include abs();
+    display: none; // Set to display: block in .is-editing section below
+    left: auto;
+    right: -1 * $tabularTdPadLR;
+    width: $tableResizeColHitareaD;
+    cursor: col-resize;
+    transform: translateX(50%); // Move so this element sits over border between columns
+  }
+
+  /******************************* ELEMENTS */
+  &__scroll-forcer {
+    // Force horz scroll when needed; width set via JS
+    font-size: 0;
+    height: 1px; // Height 0 won't force scroll properly
+    position: relative;
+  }
+
+  &__progress-bar {
+    margin-bottom: 3px;
+  }
+
+  /******************************* WRAPPERS */
+  &__body-w {
+    // Wraps __body table provides scrolling
+    flex: 1 1 100%;
+    height: 0; // Fixes Chrome 73 overflow bug
+    overflow-x: auto;
+    overflow-y: scroll;
+  }
+
+  /******************************* TABLES */
+  &__body {
+    // A table
+    flex: 1 1 100%;
+    overflow-x: auto;
+
+    tr {
+      display: flex; // flex-flow defaults to row nowrap (which is what we want) so no need to define
+      align-items: stretch;
+      position: absolute;
+      min-height: 18px; // Needed when a row has empty values in its cells
+
+      .is-editing .l-layout__frame & {
+        pointer-events: none;
+      }
     }
 
-    /******************************* ELEMENTS */
-    &__scroll-forcer {
-        // Force horz scroll when needed; width set via JS
-        font-size: 0;
-        height: 1px; // Height 0 won't force scroll properly
-        position: relative;
+    td {
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
+  }
 
-    /******************************* WRAPPERS */
-    &__body-w {
-        // Wraps __body table provides scrolling
-        flex: 1 1 100%;
-        height: 0; // Fixes Chrome 73 overflow bug
-        overflow-x: auto;
-        overflow-y: scroll;
-    }
+  &__sizing {
+    // A table
+    display: table;
+    z-index: -1;
+    visibility: hidden;
+    pointer-events: none;
+    position: absolute;
 
-    /******************************* TABLES */
-    &__body {
-        // A table
-        flex: 1 1 100%;
-        overflow-x: auto;
-
-        tr {
-            display: flex; // flex-flow defaults to row nowrap (which is what we want) so no need to define
-            align-items: stretch;
-            position: absolute;
-            min-height: 18px; // Needed when a row has empty values in its cells
-
-            .is-editing .l-layout__frame & {
-                pointer-events: none;
-            }
-
-            &.is-selected {
-                background-color: $colorSelectedBg !important;
-                color: $colorSelectedFg !important;
-                td {
-                    background: none !important;
-                    color: inherit !important;
-                }
-            }
-        }
-
-        td {
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
+    //Add some padding to allow for decorations such as limits indicator
+    tr {
+      display: table-row;
     }
 
-    &__sizing {
-        // A table
-        display: table;
-        z-index: -1;
-        visibility: hidden;
-        pointer-events: none;
-        position: absolute;
-
-        //Add some padding to allow for decorations such as limits indicator
-        tr {
-            display: table-row;
-        }
-
-        th, td {
-            display: table-cell;
-            padding-right: 10px;
-            padding-left: 10px;
-            white-space: nowrap;
-        }
+    th,
+    td {
+      display: table-cell;
+      padding-right: 10px;
+      padding-left: 10px;
+      white-space: nowrap;
     }
+  }
 
-    &__sizing-tr {
-        // A row element used to determine sizing of rows based on font size
-        visibility: hidden;
-        pointer-events: none;
-    }
+  &__sizing-tr {
+    // A row element used to determine sizing of rows based on font size
+    visibility: hidden;
+    pointer-events: none;
+  }
 
-    &__footer {
-        $pt: 2px;
-        border-top: 1px solid $colorInteriorBorder;
-        margin-top: $interiorMargin;
-        padding: $pt 0;
-        overflow: hidden;
-        transition: all 250ms;
-
-        &:not(.is-filtering) {
-            .c-frame & {
-                height: 0;
-                padding: 0;
-                visibility: hidden;
-            }
-        }
-    }
+  &__footer {
+    margin-top: $interiorMargin;
+    margin-bottom: $interiorMarginSm;
+    overflow: hidden;
 
     .c-frame & {
-        // target .c-frame .c-telemetry-table {}
-        $pt: 2px;
-        &:hover {
-            .c-telemetry-table__footer:not(.is-filtering) {
-                height: $pt + 16px;
-                padding: initial;
-                visibility: visible;
-            }
-        }
+      .c-button {
+        padding: 2px 5px;
+      }
     }
+  }
 }
 
 // All tables
 td {
-    @include isLimit();
+  @include isLimit();
+}
+
+.c-table tr {
+  &[s-selected],
+  &.is-selected {
+    background-color: $colorSelectedBg !important;
+    color: $colorSelectedFg !important;
+    td {
+      background: none !important;
+      color: inherit !important;
+    }
+  }
 }
 
 /******************************* SPECIFIC CASE WRAPPERS */
 .is-editing {
-    .c-telemetry-table__headers__labels {
-        th[draggable],
-        th[draggable] > * {
-            cursor: move;
-        }
-
-        th[draggable]:hover {
-            $b: $editFrameHovMovebarColorBg;
-            background: $b;
-            > * { background: $b; }
-        }
+  .c-telemetry-table__headers__labels {
+    th[draggable],
+    th[draggable] > * {
+      cursor: move;
     }
 
-    .c-telemetry-table__resize-hitarea {
-        display: block;
+    th[draggable]:hover {
+      $b: $editFrameHovMovebarColorBg;
+      background: $b;
+      > * {
+        background: $b;
+      }
     }
+  }
+
+  .c-telemetry-table__resize-hitarea {
+    display: block;
+  }
 }
 
 .is-paused {
-    .c-table__body-w {
-        border: 1px solid rgba($colorPausedBg, 0.8);
-    }
+  .c-table__body-w {
+    border: 1px solid rgba($colorPausedBg, 0.8);
+  }
 }
 
 /******************************* LEGACY */
 .s-status-taking-snapshot,
 .overlay.snapshot {
-    .c-table {
-        &__body-w {
-            overflow: auto; // Handle overflow-y issues with tables and html2canvas
-        }
-
-        &-control-bar {
-            display: none;
-            + * {
-                margin-top: 0 !important;
-            }
-        }
+  .c-table {
+    &__body-w {
+      overflow: auto; // Handle overflow-y issues with tables and html2canvas
+    }
+
+    &-control-bar {
+      display: none;
+      + * {
+        margin-top: 0 !important;
+      }
     }
+  }
 }
diff --git a/src/plugins/telemetryTable/components/table.vue b/src/plugins/telemetryTable/components/table.vue
deleted file mode 100644
index 07ef0fa5a37..00000000000
--- a/src/plugins/telemetryTable/components/table.vue
+++ /dev/null
@@ -1,1036 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-<template>
-<div class="c-table-wrapper"
-     :class="{ 'is-paused': paused }"
->
-    <div v-if="enableLegacyToolbar"
-         class="c-table-control-bar c-control-bar"
-    >
-        <button
-            v-if="allowExport"
-            v-show="!markedRows.length"
-            class="c-button icon-download labeled"
-            title="Export this view's data"
-            @click="exportAllDataAsCSV()"
-        >
-            <span class="c-button__label">Export Table Data</span>
-        </button>
-        <button
-            v-if="allowExport"
-            v-show="markedRows.length"
-            class="c-button icon-download labeled"
-            title="Export marked rows as CSV"
-            @click="exportMarkedDataAsCSV()"
-        >
-            <span class="c-button__label">Export Marked Rows</span>
-        </button>
-        <button
-            v-show="markedRows.length"
-            class="c-button icon-x labeled"
-            title="Unmark all rows"
-            @click="unmarkAllRows()"
-        >
-            <span class="c-button__label">Unmark All Rows</span>
-        </button>
-        <div
-            v-if="marking.enable"
-            class="c-separator"
-        ></div>
-        <button
-            v-if="marking.enable"
-            class="c-button icon-pause pause-play labeled"
-            :class=" paused ? 'icon-play is-paused' : 'icon-pause'"
-            :title="paused ? 'Continue real-time data flow' : 'Pause real-time data flow'"
-            @click="togglePauseByButton()"
-        >
-            <span class="c-button__label">
-                {{ paused ? 'Play' : 'Pause' }}
-            </span>
-        </button>
-
-        <template v-if="!isEditing">
-            <div
-                class="c-separator"
-            >
-            </div>
-            <button
-                v-if="isAutosizeEnabled"
-                class="c-button icon-arrows-right-left labeled"
-                title="Increase column widths to fit currently available data."
-                @click="recalculateColumnWidths"
-            >
-                <span class="c-button__label">Expand Columns</span>
-            </button>
-            <button
-                v-else
-                class="c-button icon-expand labeled"
-                title="Automatically size columns to fit the table into the available space."
-                @click="autosizeColumns"
-            >
-                <span class="c-button__label">Autosize Columns</span>
-            </button>
-        </template>
-
-        <slot name="buttons"></slot>
-    </div>
-
-    <!-- alternate controlbar start -->
-    <div v-if="marking.useAlternateControlBar"
-         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="{'hide-nice': !markedRows.length}"
-            class="c-icon-button icon-x labeled"
-            title="Deselect All"
-            @click="unmarkAllRows()"
-        >
-            <span class="c-icon-button__label">{{ `Deselect ${marking.disableMultiSelect ? '' : '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 u-style-receiver js-style-receiver"
-        :class="{
-            'loading': loading,
-            'is-paused' : paused
-        }"
-    >
-        <div :style="{ 'max-width': widthWithScroll, 'min-width': '150px'}">
-            <slot></slot>
-        </div>
-
-        <div
-            v-if="isDropTargetActive"
-            class="c-telemetry-table__drop-target"
-            :style="dropTargetStyle"
-        ></div>
-        <!-- Headers table -->
-        <div
-            v-show="!hideHeaders"
-            ref="headersTable"
-            class="c-telemetry-table__headers-w js-table__headers-w"
-            :style="{ 'max-width': widthWithScroll}"
-        >
-            <table class="c-table__headers c-telemetry-table__headers">
-                <thead>
-                    <tr class="c-telemetry-table__headers__labels">
-                        <table-column-header
-                            v-for="(title, key, headerIndex) in headers"
-                            :key="key"
-                            :header-key="key"
-                            :header-index="headerIndex"
-                            :column-width="columnWidths[key]"
-                            :sort-options="sortOptions"
-                            :is-editing="isEditing"
-                            @sort="allowSorting && sortBy(key)"
-                            @resizeColumn="resizeColumn"
-                            @dropTargetOffsetChanged="setDropTargetOffset"
-                            @dropTargetActive="dropTargetActive"
-                            @reorderColumn="reorderColumn"
-                            @resizeColumnEnd="updateConfiguredColumnWidths"
-                        >
-                            <span class="c-telemetry-table__headers__label">{{ title }}</span>
-                        </table-column-header>
-                    </tr>
-                    <tr
-                        v-if="allowFiltering"
-                        class="c-telemetry-table__headers__filter"
-                    >
-                        <table-column-header
-                            v-for="(title, key, headerIndex) in headers"
-                            :key="key"
-                            :header-key="key"
-                            :header-index="headerIndex"
-                            :column-width="columnWidths[key]"
-                            :is-editing="isEditing"
-                            @resizeColumn="resizeColumn"
-                            @dropTargetOffsetChanged="setDropTargetOffset"
-                            @dropTargetActive="dropTargetActive"
-                            @reorderColumn="reorderColumn"
-                            @resizeColumnEnd="updateConfiguredColumnWidths"
-                        >
-                            <search
-                                v-model="filters[key]"
-                                class="c-table__search"
-                                @input="filterChanged(key)"
-                                @clear="clearFilter(key)"
-                            >
-
-                                <button
-                                    class="c-search__use-regex"
-                                    :class="{ 'is-active': enableRegexSearch[key] }"
-                                    title="Click to enable regex: enter a string with slashes, like this: /regex_exp/"
-                                    @click="toggleRegex(key)"
-                                >
-                                    /R/
-                                </button>
-                            </search>
-                        </table-column-header>
-                    </tr>
-                </thead>
-            </table>
-        </div>
-        <!-- Content table -->
-        <div
-            class="c-table__body-w c-telemetry-table__body-w js-telemetry-table__body-w"
-            :style="{ 'max-width': widthWithScroll}"
-            @scroll="scroll"
-        >
-            <div
-                class="c-telemetry-table__scroll-forcer"
-                :style="{ width: totalWidth + 'px' }"
-            ></div>
-            <table
-                class="c-table__body c-telemetry-table__body js-telemetry-table__content"
-                :style="{ height: totalHeight + 'px'}"
-            >
-                <tbody>
-                    <telemetry-table-row
-                        v-for="(row, rowIndex) in visibleRows"
-                        :key="rowIndex"
-                        :headers="headers"
-                        :column-widths="columnWidths"
-                        :row-index="rowIndex"
-                        :object-path="objectPath"
-                        :row-offset="rowOffset"
-                        :row-height="rowHeight"
-                        :row="row"
-                        :marked="row.marked"
-                        @mark="markRow"
-                        @unmark="unmarkRow"
-                        @markMultipleConcurrent="markMultipleConcurrentRows"
-                        @rowContextClick="updateViewContext"
-                    />
-                </tbody>
-            </table>
-        </div>
-        <!-- Sizing table -->
-        <table
-            class="c-telemetry-table__sizing js-telemetry-table__sizing"
-            :style="sizingTableWidth"
-        >
-            <sizing-row
-                :is-editing="isEditing"
-                @change-height="setRowHeight"
-            />
-            <tr>
-                <template v-for="(title, key) in headers">
-                    <th
-                        :key="key"
-                        :style="{ width: configuredColumnWidths[key] + 'px', 'max-width': configuredColumnWidths[key] + 'px'}"
-                    >
-                        {{ title }}
-                    </th>
-                </template>
-            </tr>
-            <telemetry-table-row
-                v-for="(sizingRowData, objectKeyString) in sizingRows"
-                :key="objectKeyString"
-                :headers="headers"
-                :column-widths="configuredColumnWidths"
-                :row="sizingRowData"
-                :object-path="objectPath"
-                @rowContextClick="updateViewContext"
-            />
-        </table>
-        <table-footer-indicator
-            class="c-telemetry-table__footer"
-            :marked-rows="markedRows.length"
-            :total-rows="totalNumberOfRows"
-        />
-    </div>
-</div><!-- closes c-table-wrapper -->
-</template>
-
-<script>
-import TelemetryTableRow from './table-row.vue';
-import search from '../../../ui/components/search.vue';
-import TableColumnHeader from './table-column-header.vue';
-import TableFooterIndicator from './table-footer-indicator.vue';
-import CSVExporter from '../../../exporters/CSVExporter.js';
-import _ from 'lodash';
-import ToggleSwitch from '../../../ui/components/ToggleSwitch.vue';
-import SizingRow from './sizing-row.vue';
-
-const VISIBLE_ROW_COUNT = 100;
-const ROW_HEIGHT = 17;
-const RESIZE_POLL_INTERVAL = 200;
-const AUTO_SCROLL_TRIGGER_HEIGHT = 100;
-
-export default {
-    components: {
-        TelemetryTableRow,
-        TableColumnHeader,
-        search,
-        TableFooterIndicator,
-        ToggleSwitch,
-        SizingRow
-    },
-    inject: ['openmct', 'objectPath', 'table', 'currentView'],
-    props: {
-        isEditing: {
-            type: Boolean,
-            default: false
-        },
-        marking: {
-            type: Object,
-            required: true,
-            default() {
-                return {
-                    enable: false,
-                    disableMultiSelect: false,
-                    useAlternateControlBar: false,
-                    rowName: '',
-                    rowNamePlural: ''
-                };
-            }
-        },
-        allowExport: {
-            type: Boolean,
-            default: true
-        },
-        allowFiltering: {
-            type: Boolean,
-            default: true
-        },
-        allowSorting: {
-            type: Boolean,
-            default: true
-        },
-        enableLegacyToolbar: {
-            type: Boolean,
-            default: false
-        }
-    },
-    data() {
-        let configuration = this.table.configuration.getConfiguration();
-
-        return {
-            headers: {},
-            visibleRows: [],
-            columnWidths: {},
-            configuredColumnWidths: configuration.columnWidths,
-            sizingRows: {},
-            rowHeight: ROW_HEIGHT,
-            scrollOffset: 0,
-            totalHeight: 0,
-            totalWidth: 0,
-            rowOffset: 0,
-            autoScroll: true,
-            sortOptions: {},
-            filters: {},
-            loading: false,
-            scrollable: undefined,
-            tableEl: undefined,
-            headersHolderEl: undefined,
-            processingScroll: false,
-            updatingView: false,
-            dropOffsetLeft: undefined,
-            isDropTargetActive: false,
-            isAutosizeEnabled: configuration.autosize,
-            scrollW: 0,
-            markCounter: 0,
-            paused: false,
-            markedRows: [],
-            isShowingMarkedRowsOnly: false,
-            enableRegexSearch: {},
-            hideHeaders: configuration.hideHeaders,
-            totalNumberOfRows: 0,
-            rowContext: {}
-        };
-    },
-    computed: {
-        dropTargetStyle() {
-            return {
-                top: this.$refs.headersTable.offsetTop + 'px',
-                height: this.totalHeight + this.$refs.headersTable.offsetHeight + 'px',
-                left: this.dropOffsetLeft && this.dropOffsetLeft + 'px'
-            };
-        },
-        lastHeaderKey() {
-            let headerKeys = Object.keys(this.headers);
-
-            return headerKeys[headerKeys.length - 1];
-        },
-        widthWithScroll() {
-            return this.totalWidth + this.scrollW + "px";
-        },
-        sizingTableWidth() {
-            let style;
-
-            if (this.isAutosizeEnabled) {
-                style = { width: "calc(100% - " + this.scrollW + "px)" };
-            } else {
-                let totalWidth = Object.keys(this.headers).reduce((total, key) => {
-                    total += this.configuredColumnWidths[key];
-
-                    return total;
-                }, 0);
-
-                style = {width: totalWidth + 'px'};
-            }
-
-            return style;
-        }
-    },
-    watch: {
-        markedRows: {
-            handler(newVal, oldVal) {
-                this.$emit('marked-rows-updated', newVal, oldVal);
-
-                if (this.viewActionsCollection) {
-                    if (newVal.length > 0) {
-                        this.viewActionsCollection.enable(['export-csv-marked', 'unmark-all-rows']);
-                    } else if (newVal.length === 0) {
-                        this.viewActionsCollection.disable(['export-csv-marked', 'unmark-all-rows']);
-                    }
-                }
-            }
-        },
-        paused: {
-            handler(newVal) {
-                if (this.viewActionsCollection) {
-                    if (newVal) {
-                        this.viewActionsCollection.hide(['pause-data']);
-                        this.viewActionsCollection.show(['play-data']);
-                    } else {
-                        this.viewActionsCollection.hide(['play-data']);
-                        this.viewActionsCollection.show(['pause-data']);
-                    }
-                }
-            }
-        },
-        isAutosizeEnabled: {
-            handler(newVal) {
-                if (this.viewActionsCollection) {
-                    if (newVal) {
-                        this.viewActionsCollection.show(['expand-columns']);
-                        this.viewActionsCollection.hide(['autosize-columns']);
-                    } else {
-                        this.viewActionsCollection.show(['autosize-columns']);
-                        this.viewActionsCollection.hide(['expand-columns']);
-                    }
-                }
-            }
-        }
-    },
-    created() {
-        this.filterChanged = _.debounce(this.filterChanged, 500);
-    },
-    mounted() {
-        this.csvExporter = new CSVExporter();
-        this.rowsAdded = _.throttle(this.rowsAdded, 200);
-        this.rowsRemoved = _.throttle(this.rowsRemoved, 200);
-        this.scroll = _.throttle(this.scroll, 100);
-
-        if (!this.marking.useAlternateControlBar && !this.enableLegacyToolbar) {
-            this.$nextTick(() => {
-                this.viewActionsCollection = this.openmct.actions.getActionsCollection(this.objectPath, this.currentView);
-                this.initializeViewActions();
-            });
-        }
-
-        this.table.on('object-added', this.addObject);
-        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);
-        this.table.filteredRows.on('sort', this.updateVisibleRows);
-        this.table.filteredRows.on('filter', this.updateVisibleRows);
-
-        //Default sort
-        this.sortOptions = this.table.filteredRows.sortBy();
-        this.scrollable = this.$el.querySelector('.js-telemetry-table__body-w');
-        this.contentTable = this.$el.querySelector('.js-telemetry-table__content');
-        this.sizingTable = this.$el.querySelector('.js-telemetry-table__sizing');
-        this.headersHolderEl = this.$el.querySelector('.js-table__headers-w');
-
-        this.table.configuration.on('change', this.updateConfiguration);
-
-        this.calculateTableSize();
-        this.pollForResize();
-        this.calculateScrollbarWidth();
-
-        this.table.initialize();
-    },
-    destroyed() {
-        this.table.off('object-added', this.addObject);
-        this.table.off('object-removed', this.removeObject);
-        this.table.off('outstanding-requests', this.outstandingRequests);
-        this.table.off('refresh', this.clearRowsAndRerender);
-
-        this.table.filteredRows.off('add', this.rowsAdded);
-        this.table.filteredRows.off('remove', this.rowsRemoved);
-        this.table.filteredRows.off('sort', this.updateVisibleRows);
-        this.table.filteredRows.off('filter', this.updateVisibleRows);
-
-        this.table.configuration.off('change', this.updateConfiguration);
-
-        clearInterval(this.resizePollHandle);
-
-        this.table.configuration.destroy();
-
-        this.table.destroy();
-    },
-    methods: {
-        updateVisibleRows() {
-            if (!this.updatingView) {
-                this.updatingView = true;
-                requestAnimationFrame(() => {
-
-                    let start = 0;
-                    let end = VISIBLE_ROW_COUNT;
-                    let filteredRows = this.table.filteredRows.getRows();
-                    let filteredRowsLength = filteredRows.length;
-
-                    this.totalNumberOfRows = filteredRowsLength;
-
-                    if (filteredRowsLength < VISIBLE_ROW_COUNT) {
-                        end = filteredRowsLength;
-                    } else {
-                        let firstVisible = this.calculateFirstVisibleRow();
-                        let lastVisible = this.calculateLastVisibleRow();
-                        let totalVisible = lastVisible - firstVisible;
-
-                        let numberOffscreen = VISIBLE_ROW_COUNT - totalVisible;
-                        start = firstVisible - Math.floor(numberOffscreen / 2);
-                        end = lastVisible + Math.ceil(numberOffscreen / 2);
-
-                        if (start < 0) {
-                            start = 0;
-                            end = Math.min(VISIBLE_ROW_COUNT, filteredRowsLength);
-                        } else if (end >= filteredRowsLength) {
-                            end = filteredRowsLength;
-                            start = end - VISIBLE_ROW_COUNT + 1;
-                        }
-                    }
-
-                    this.rowOffset = start;
-                    this.visibleRows = filteredRows.slice(start, end);
-
-                    this.updatingView = false;
-                });
-            }
-        },
-        calculateFirstVisibleRow() {
-            let scrollTop = this.scrollable.scrollTop;
-
-            return Math.floor(scrollTop / this.rowHeight);
-        },
-        calculateLastVisibleRow() {
-            let scrollBottom = this.scrollable.scrollTop + this.scrollable.offsetHeight;
-
-            return Math.ceil(scrollBottom / this.rowHeight);
-        },
-        updateHeaders() {
-            this.headers = this.table.configuration.getVisibleHeaders();
-        },
-        calculateScrollbarWidth() {
-            // Scroll width seems to vary by a pixel for reasons that are not clear.
-            this.scrollW = (this.scrollable.offsetWidth - this.scrollable.clientWidth) + 1;
-        },
-        calculateColumnWidths() {
-            let columnWidths = {};
-            let totalWidth = 0;
-            let headerKeys = Object.keys(this.headers);
-            let sizingTableRow = this.sizingTable.children[1];
-            let sizingCells = sizingTableRow.children;
-
-            headerKeys.forEach((headerKey, headerIndex, array) => {
-                if (this.isAutosizeEnabled) {
-                    columnWidths[headerKey] = this.sizingTable.clientWidth / array.length;
-                } else {
-                    let cell = sizingCells[headerIndex];
-                    columnWidths[headerKey] = cell.offsetWidth;
-                }
-
-                totalWidth += columnWidths[headerKey];
-            });
-
-            this.columnWidths = columnWidths;
-            this.totalWidth = totalWidth;
-
-            this.calculateScrollbarWidth();
-        },
-        sortBy(columnKey) {
-            // If sorting by the same column, flip the sort direction.
-            if (this.sortOptions.key === columnKey) {
-                if (this.sortOptions.direction === 'asc') {
-                    this.sortOptions.direction = 'desc';
-                } else {
-                    this.sortOptions.direction = 'asc';
-                }
-            } else {
-                this.sortOptions = {
-                    key: columnKey,
-                    direction: 'asc'
-                };
-            }
-
-            this.table.sortBy(this.sortOptions);
-        },
-        scroll() {
-            this.updateVisibleRows();
-            this.synchronizeScrollX();
-
-            if (this.shouldSnapToBottom()) {
-                this.autoScroll = true;
-            } else {
-                // If user scrolls away from bottom, disable auto-scroll.
-                // Auto-scroll will be re-enabled if user scrolls to bottom again.
-                this.autoScroll = false;
-            }
-        },
-        shouldSnapToBottom() {
-            return this.scrollable.scrollTop >= (this.scrollable.scrollHeight - this.scrollable.offsetHeight - AUTO_SCROLL_TRIGGER_HEIGHT);
-        },
-        scrollToBottom() {
-            this.scrollable.scrollTop = Number.MAX_SAFE_INTEGER;
-        },
-        synchronizeScrollX() {
-            this.headersHolderEl.scrollLeft = this.scrollable.scrollLeft;
-        },
-        filterChanged(columnKey) {
-            if (this.enableRegexSearch[columnKey]) {
-                if (this.isCompleteRegex(this.filters[columnKey])) {
-                    this.table.filteredRows.setColumnRegexFilter(columnKey, this.filters[columnKey].slice(1, -1));
-                } else {
-                    return;
-                }
-            } else {
-                this.table.filteredRows.setColumnFilter(columnKey, this.filters[columnKey]);
-            }
-
-            this.setHeight();
-        },
-        clearFilter(columnKey) {
-            this.filters[columnKey] = '';
-            this.table.filteredRows.setColumnFilter(columnKey, '');
-            this.setHeight();
-        },
-        rowsAdded(rows) {
-            this.setHeight();
-
-            let sizingRow;
-            if (Array.isArray(rows)) {
-                sizingRow = rows[0];
-            } else {
-                sizingRow = rows;
-            }
-
-            if (!this.sizingRows[sizingRow.objectKeyString]) {
-                this.sizingRows[sizingRow.objectKeyString] = sizingRow;
-                this.$nextTick().then(this.calculateColumnWidths);
-            }
-
-            if (this.autoScroll) {
-                this.scrollToBottom();
-            }
-
-            this.updateVisibleRows();
-        },
-        rowsRemoved(rows) {
-            this.setHeight();
-            this.updateVisibleRows();
-        },
-        /**
-         * Calculates height based on total number of rows, and sets table height.
-         */
-        setHeight() {
-            let filteredRowsLength = this.table.filteredRows.getRows().length;
-            this.totalHeight = this.rowHeight * filteredRowsLength - 1;
-            // Set element height directly to avoid having to wait for Vue to update DOM
-            // which causes subsequent scroll to use an out of date height.
-            this.contentTable.style.height = this.totalHeight + 'px';
-        },
-        exportAsCSV(data) {
-            const headerKeys = Object.keys(this.headers);
-
-            this.csvExporter.export(data, {
-                filename: this.table.domainObject.name + '.csv',
-                headers: headerKeys
-            });
-        },
-        exportAllDataAsCSV() {
-            const justTheData = this.table.filteredRows.getRows()
-                .map(row => row.getFormattedDatum(this.headers));
-
-            this.exportAsCSV(justTheData);
-        },
-        exportMarkedDataAsCSV() {
-            const data = this.table.filteredRows.getRows()
-                .filter(row => row.marked === true)
-                .map(row => row.getFormattedDatum(this.headers));
-
-            this.exportAsCSV(data);
-        },
-        outstandingRequests(loading) {
-            this.loading = loading;
-        },
-        calculateTableSize() {
-            this.$nextTick().then(this.calculateColumnWidths);
-        },
-        updateConfiguration(configuration) {
-            this.isAutosizeEnabled = configuration.autosize;
-            this.hideHeaders = configuration.hideHeaders;
-
-            this.updateHeaders();
-            this.$nextTick().then(this.calculateColumnWidths);
-        },
-        addObject() {
-            this.updateHeaders();
-            this.$nextTick().then(this.calculateColumnWidths);
-        },
-        removeObject(objectIdentifier) {
-            let objectKeyString = this.openmct.objects.makeKeyString(objectIdentifier);
-            delete this.sizingRows[objectKeyString];
-            this.updateHeaders();
-            this.$nextTick().then(this.calculateColumnWidths);
-        },
-        resizeColumn(key, newWidth) {
-            let delta = newWidth - this.columnWidths[key];
-            this.columnWidths[key] = newWidth;
-            this.totalWidth += delta;
-        },
-        updateConfiguredColumnWidths() {
-            this.configuredColumnWidths = this.columnWidths;
-
-            let configuration = this.table.configuration.getConfiguration();
-            configuration.autosize = false;
-            configuration.columnWidths = this.configuredColumnWidths;
-
-            this.table.configuration.updateConfiguration(configuration);
-        },
-        setDropTargetOffset(dropOffsetLeft) {
-            this.dropOffsetLeft = dropOffsetLeft - this.scrollable.scrollLeft;
-        },
-        reorderColumn(from, to) {
-            let newHeaderKeys = Object.keys(this.headers);
-            let moveFromKey = newHeaderKeys[from];
-
-            if (to < from) {
-                newHeaderKeys.splice(from, 1);
-                newHeaderKeys.splice(to, 0, moveFromKey);
-            } else {
-                newHeaderKeys.splice(from, 1);
-                newHeaderKeys.splice(to, 0, moveFromKey);
-            }
-
-            let newHeaders = newHeaderKeys.reduce((headers, headerKey) => {
-                headers[headerKey] = this.headers[headerKey];
-
-                return headers;
-            }, {});
-
-            this.table.configuration.setColumnOrder(Object.keys(newHeaders));
-
-            this.headers = newHeaders;
-            this.dropOffsetLeft = undefined;
-
-            this.dropTargetActive(false);
-        },
-        dropTargetActive(isActive) {
-            this.isDropTargetActive = isActive;
-        },
-        pollForResize() {
-            let el = this.$el;
-            let width = el.clientWidth;
-            let height = el.clientHeight;
-            let scrollTop = this.scrollable.scrollTop;
-
-            this.resizePollHandle = setInterval(() => {
-                if ((el.clientWidth !== width || el.clientHeight !== height) && this.isAutosizeEnabled) {
-                    this.calculateTableSize();
-                    // On some resize events scrollTop is reset to 0. Possibly due to a transition we're using?
-                    // Need to preserve scroll position in this case.
-                    if (this.autoScroll) {
-                        this.scrollToBottom();
-                    } else {
-                        this.scrollable.scrollTop = scrollTop;
-                    }
-
-                    width = el.clientWidth;
-                    height = el.clientHeight;
-                }
-
-                scrollTop = this.scrollable.scrollTop;
-            }, RESIZE_POLL_INTERVAL);
-        },
-        clearRowsAndRerender() {
-            this.visibleRows = [];
-            this.$nextTick().then(this.updateVisibleRows);
-        },
-        pause(pausedByButton) {
-            if (pausedByButton) {
-                this.pausedByButton = true;
-            }
-
-            this.paused = true;
-            this.table.pause();
-        },
-        unpause(unpausedByButton) {
-            if (unpausedByButton) {
-                this.undoMarkedRows();
-                this.table.unpause();
-                this.paused = false;
-                this.pausedByButton = false;
-            } else {
-                if (!this.pausedByButton) {
-                    this.undoMarkedRows();
-                    this.table.unpause();
-                    this.paused = false;
-                }
-            }
-
-            this.isShowingMarkedRowsOnly = false;
-        },
-        togglePauseByButton() {
-            if (this.paused) {
-                this.unpause(true);
-            } else {
-                this.pause(true);
-            }
-        },
-        undoMarkedRows(unpause) {
-            this.markedRows.forEach(r => r.marked = false);
-            this.markedRows = [];
-        },
-        unmarkRow(rowIndex) {
-            if (this.markedRows.length > 1) {
-                let row = this.visibleRows[rowIndex];
-                let positionInMarkedArray = this.markedRows.indexOf(row);
-
-                row.marked = false;
-                this.markedRows.splice(positionInMarkedArray, 1);
-
-                if (this.isShowingMarkedRowsOnly) {
-                    this.visibleRows.splice(rowIndex, 1);
-                }
-            } else if (this.markedRows.length === 1) {
-                this.unmarkAllRows();
-            }
-
-            if (this.markedRows.length === 0) {
-                this.unpause();
-            }
-        },
-        markRow(rowIndex, keyModifier) {
-            if (!this.marking.enable) {
-                return;
-            }
-
-            let insertMethod = 'unshift';
-
-            if (this.markedRows.length && !keyModifier) {
-                this.undoMarkedRows();
-                insertMethod = 'push';
-            }
-
-            let markedRow = this.visibleRows[rowIndex];
-
-            this.$set(markedRow, 'marked', true);
-            this.pause();
-
-            if (this.marking.disableMultiSelect) {
-                this.unmarkAllRows();
-                insertMethod = 'push';
-            }
-
-            this.markedRows[insertMethod](markedRow);
-        },
-        unmarkAllRows(skipUnpause) {
-            this.undoMarkedRows();
-            this.isShowingMarkedRowsOnly = false;
-            this.unpause();
-            this.restorePreviousRows();
-        },
-        markMultipleConcurrentRows(rowIndex) {
-            if (!this.marking.enable) {
-                return;
-            }
-
-            if (!this.markedRows.length || this.marking.disableMultiSelect) {
-                this.markRow(rowIndex);
-            } else {
-                if (this.markedRows.length > 1) {
-                    this.markedRows.forEach((r, i) => {
-                        if (i !== 0) {
-                            r.marked = false;
-                        }
-                    });
-                    this.markedRows.splice(1);
-                }
-
-                let lastRowToBeMarked = this.visibleRows[rowIndex];
-
-                let allRows = this.table.filteredRows.getRows();
-                let firstRowIndex = allRows.indexOf(this.markedRows[0]);
-                let lastRowIndex = allRows.indexOf(lastRowToBeMarked);
-
-                //supports backward selection
-                if (lastRowIndex < firstRowIndex) {
-                    [firstRowIndex, lastRowIndex] = [lastRowIndex, firstRowIndex];
-                }
-
-                let baseRow = this.markedRows[0];
-
-                for (let i = firstRowIndex; i <= lastRowIndex; i++) {
-                    let row = allRows[i];
-                    this.$set(row, 'marked', true);
-
-                    if (row !== baseRow) {
-                        this.markedRows.push(row);
-                    }
-                }
-            }
-        },
-        checkForMarkedRows() {
-            this.isShowingMarkedRowsOnly = false;
-            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;
-            }
-        },
-        updateWidthsAndClearSizingTable() {
-            this.calculateColumnWidths();
-            this.configuredColumnWidths = this.columnWidths;
-
-            this.visibleRows.forEach((row, i) => {
-                this.$set(this.sizingRows, i, undefined);
-                delete this.sizingRows[i];
-            });
-        },
-        recalculateColumnWidths() {
-            this.visibleRows.forEach((row, i) => {
-                this.$set(this.sizingRows, i, row);
-            });
-
-            this.configuredColumnWidths = {};
-            this.isAutosizeEnabled = false;
-
-            this.$nextTick()
-                .then(this.updateWidthsAndClearSizingTable);
-        },
-        autosizeColumns() {
-            this.isAutosizeEnabled = true;
-
-            this.$nextTick().then(this.calculateColumnWidths);
-        },
-        toggleRegex(key) {
-            this.$set(this.filters, key, '');
-
-            if (this.enableRegexSearch[key] === undefined) {
-                this.$set(this.enableRegexSearch, key, true);
-            } else {
-                this.$set(this.enableRegexSearch, key, !this.enableRegexSearch[key]);
-            }
-        },
-        isCompleteRegex(string) {
-            return (string.length > 2 && string[0] === '/' && string[string.length - 1] === '/');
-        },
-        getViewContext() {
-            return {
-                type: 'telemetry-table',
-                exportAllDataAsCSV: this.exportAllDataAsCSV,
-                exportMarkedDataAsCSV: this.exportMarkedDataAsCSV,
-                unmarkAllRows: this.unmarkAllRows,
-                togglePauseByButton: this.togglePauseByButton,
-                expandColumns: this.recalculateColumnWidths,
-                autosizeColumns: this.autosizeColumns,
-                row: this.rowContext
-            };
-        },
-        initializeViewActions() {
-            if (this.markedRows.length > 0) {
-                this.viewActionsCollection.enable(['export-csv-marked', 'unmark-all-rows']);
-            } else if (this.markedRows.length === 0) {
-                this.viewActionsCollection.disable(['export-csv-marked', 'unmark-all-rows']);
-            }
-
-            if (this.paused) {
-                this.viewActionsCollection.hide(['pause-data']);
-                this.viewActionsCollection.show(['play-data']);
-            } else {
-                this.viewActionsCollection.hide(['play-data']);
-                this.viewActionsCollection.show(['pause-data']);
-            }
-
-            if (this.isAutosizeEnabled) {
-                this.viewActionsCollection.show(['expand-columns']);
-                this.viewActionsCollection.hide(['autosize-columns']);
-            } else {
-                this.viewActionsCollection.show(['autosize-columns']);
-                this.viewActionsCollection.hide(['expand-columns']);
-            }
-        },
-        setRowHeight(height) {
-            this.rowHeight = height;
-            this.setHeight();
-            this.calculateTableSize();
-            this.clearRowsAndRerender();
-        },
-        updateViewContext(rowContext) {
-            this.rowContext = rowContext;
-        }
-    }
-};
-</script>
diff --git a/src/plugins/telemetryTable/plugin.js b/src/plugins/telemetryTable/plugin.js
index 1a4560d9e37..c36f0817526 100644
--- a/src/plugins/telemetryTable/plugin.js
+++ b/src/plugins/telemetryTable/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,26 +19,27 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import TelemetryTableViewProvider from './TelemetryTableViewProvider';
-import TableConfigurationViewProvider from './TableConfigurationViewProvider';
-import TelemetryTableType from './TelemetryTableType';
-import TelemetryTableViewActions from './ViewActions';
 
-export default function plugin() {
-    return function install(openmct) {
-        openmct.objectViews.addProvider(new TelemetryTableViewProvider(openmct));
-        openmct.inspectorViews.addProvider(new TableConfigurationViewProvider(openmct));
-        openmct.types.addType('table', TelemetryTableType);
-        openmct.composition.addPolicy((parent, child) => {
-            if (parent.type === 'table') {
-                return Object.prototype.hasOwnProperty.call(child, 'telemetry');
-            } else {
-                return true;
-            }
-        });
+import TableConfigurationViewProvider from './TableConfigurationViewProvider.js';
+import getTelemetryTableType from './TelemetryTableType.js';
+import TelemetryTableViewProvider from './TelemetryTableViewProvider.js';
+import TelemetryTableViewActions from './ViewActions.js';
 
-        TelemetryTableViewActions.forEach(action => {
-            openmct.actions.register(action);
-        });
-    };
+export default function plugin(options) {
+  return function install(openmct) {
+    openmct.objectViews.addProvider(new TelemetryTableViewProvider(openmct, options));
+    openmct.inspectorViews.addProvider(new TableConfigurationViewProvider(openmct));
+    openmct.types.addType('table', getTelemetryTableType(options));
+    openmct.composition.addPolicy((parent, child) => {
+      if (parent.type === 'table') {
+        return Object.prototype.hasOwnProperty.call(child, 'telemetry');
+      } else {
+        return true;
+      }
+    });
+
+    TelemetryTableViewActions.forEach((action) => {
+      openmct.actions.register(action);
+    });
+  };
 }
diff --git a/src/plugins/telemetryTable/pluginSpec.js b/src/plugins/telemetryTable/pluginSpec.js
index 52b4c84b35f..1e1eb82e145 100644
--- a/src/plugins/telemetryTable/pluginSpec.js
+++ b/src/plugins/telemetryTable/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,310 +19,471 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import TablePlugin from './plugin.js';
-import Vue from 'vue';
 import {
-    createOpenMct,
-    createMouseEvent,
-    spyOnBuiltins,
-    resetApplicationState
+  createMouseEvent,
+  createOpenMct,
+  renderWhenVisible,
+  resetApplicationState,
+  spyOnBuiltins
 } from 'utils/testing';
+import { nextTick } from 'vue';
+
+import TablePlugin from './plugin.js';
 
 class MockDataTransfer {
-    constructor() {
-        this.data = {};
-    }
-    get types() {
-        return Object.keys(this.data);
-    }
-    setData(format, data) {
-        this.data[format] = data;
-    }
-    getData(format) {
-        return this.data[format];
-    }
+  constructor() {
+    this.data = {};
+  }
+  get types() {
+    return Object.keys(this.data);
+  }
+  setData(format, data) {
+    this.data[format] = data;
+  }
+  getData(format) {
+    return this.data[format];
+  }
 }
 
-describe("the plugin", () => {
-    let openmct;
-    let tablePlugin;
-    let element;
-    let child;
-    let unlistenConfigMutation;
+describe('the plugin', () => {
+  let openmct;
+  let tablePlugin;
+  let element;
+  let child;
+  let historicalTelemetryProvider;
+  let originalRouterPath;
+  let unlistenConfigMutation;
+
+  beforeEach((done) => {
+    openmct = createOpenMct();
+
+    // Table Plugin is actually installed by default, but because installing it
+    // again is harmless it is left here as an example for non-default plugins.
+    tablePlugin = new TablePlugin();
+    openmct.install(tablePlugin);
+
+    historicalTelemetryProvider = {
+      request: () => {
+        return Promise.resolve([]);
+      }
+    };
+    spyOn(openmct.telemetry, 'findRequestProvider').and.returnValue(historicalTelemetryProvider);
+
+    element = document.createElement('div');
+    child = document.createElement('div');
+    element.appendChild(child);
+
+    openmct.time.timeSystem('utc', {
+      start: 0,
+      end: 4
+    });
 
-    beforeEach((done) => {
-        openmct = createOpenMct();
+    openmct.types.addType('test-object', {
+      creatable: true
+    });
 
-        // Table Plugin is actually installed by default, but because installing it
-        // again is harmless it is left here as an examplar for non-default plugins.
-        tablePlugin = new TablePlugin();
-        openmct.install(tablePlugin);
+    spyOnBuiltins(['requestAnimationFrame']);
+    window.requestAnimationFrame.and.callFake((callBack) => {
+      callBack();
+    });
 
-        spyOn(openmct.telemetry, 'request').and.returnValue(Promise.resolve([]));
+    originalRouterPath = openmct.router.path;
 
-        element = document.createElement('div');
-        child = document.createElement('div');
-        element.appendChild(child);
+    openmct.on('start', done);
+    openmct.startHeadless();
+  });
 
-        openmct.time.timeSystem('utc', {
-            start: 0,
-            end: 4
-        });
+  afterEach(() => {
+    openmct.time.timeSystem('utc', {
+      start: 0,
+      end: 1
+    });
 
-        openmct.types.addType('test-object', {
-            creatable: true
-        });
+    if (unlistenConfigMutation) {
+      unlistenConfigMutation();
+    }
 
-        spyOnBuiltins(['requestAnimationFrame']);
-        window.requestAnimationFrame.and.callFake((callBack) => {
-            callBack();
-        });
+    return resetApplicationState(openmct);
+  });
 
-        openmct.on('start', done);
-        openmct.startHeadless();
+  describe('defines a table object', function () {
+    it('that is creatable', () => {
+      let tableType = openmct.types.get('table');
+      expect(tableType.definition.creatable).toBe(true);
     });
+  });
+
+  it('provides a table view for objects with telemetry', () => {
+    const testTelemetryObject = {
+      id: 'test-object',
+      type: 'test-object',
+      telemetry: {
+        values: [
+          {
+            key: 'some-key'
+          }
+        ]
+      }
+    };
+
+    const applicableViews = openmct.objectViews.get(testTelemetryObject, []);
+    let tableView = applicableViews.find((viewProvider) => viewProvider.key === 'table');
+    expect(tableView).toBeDefined();
+  });
+
+  describe('The table view', () => {
+    let testTelemetryObject;
+    let applicableViews;
+    let tableViewProvider;
+    let tableView;
+    let tableInstance;
+    let mockClock;
+    let telemetryCallback;
+
+    beforeEach(async () => {
+      openmct.time.timeSystem('utc', {
+        start: 0,
+        end: 10
+      });
+
+      mockClock = jasmine.createSpyObj('clock', ['on', 'off', 'currentValue']);
+      mockClock.key = 'mockClock';
+      mockClock.currentValue.and.returnValue(1);
+
+      openmct.time.addClock(mockClock);
+      openmct.time.clock('mockClock', {
+        start: 0,
+        end: 10
+      });
+
+      testTelemetryObject = {
+        identifier: {
+          namespace: '',
+          key: 'test-object'
+        },
+        type: 'test-object',
+        name: 'Test Object',
+        telemetry: {
+          values: [
+            {
+              key: 'utc',
+              format: 'utc',
+              name: 'Time',
+              hints: {
+                domain: 1
+              }
+            },
+            {
+              key: 'some-key',
+              name: 'Some attribute',
+              hints: {
+                range: 1
+              }
+            },
+            {
+              key: 'some-other-key',
+              name: 'Another attribute',
+              hints: {
+                range: 2
+              }
+            }
+          ]
+        },
+        configuration: {
+          hiddenColumns: {
+            name: false,
+            utc: false,
+            'some-key': false,
+            'some-other-key': false
+          }
+        }
+      };
+      const testTelemetry = [
+        {
+          utc: 1,
+          'some-key': 'some-value 1',
+          'some-other-key': 'some-other-value 1'
+        },
+        {
+          utc: 2,
+          'some-key': 'some-value 2',
+          'some-other-key': 'some-other-value 2'
+        },
+        {
+          utc: 3,
+          'some-key': 'some-value 3',
+          'some-other-key': 'some-other-value 3'
+        }
+      ];
 
-    afterEach(() => {
-        openmct.time.timeSystem('utc', {
-            start: 0,
-            end: 1
-        });
+      historicalTelemetryProvider.request = () => {
+        return Promise.resolve(testTelemetry);
+      };
 
-        if (unlistenConfigMutation) {
-            unlistenConfigMutation();
+      const realtimeTelemetryProvider = {
+        supportsSubscribe: () => true,
+        subscribe: (domainObject, passedCallback) => {
+          telemetryCallback = passedCallback;
+          return Promise.resolve(() => {});
         }
+      };
 
-        return resetApplicationState(openmct);
+      spyOn(openmct.telemetry, 'findSubscriptionProvider').and.returnValue(
+        realtimeTelemetryProvider
+      );
+
+      openmct.router.path = [testTelemetryObject];
+
+      applicableViews = openmct.objectViews.get(testTelemetryObject, []);
+      tableViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'table');
+      tableView = tableViewProvider.view(testTelemetryObject, [testTelemetryObject]);
+      tableView.show(child, true, { renderWhenVisible });
+
+      tableInstance = tableView.getTable();
+
+      await nextTick();
     });
 
-    describe("defines a table object", function () {
-        it("that is creatable", () => {
-            let tableType = openmct.types.get('table');
-            expect(tableType.definition.creatable).toBe(true);
-        });
+    afterEach(() => {
+      openmct.router.path = originalRouterPath;
+      openmct.time.setClock('local');
     });
 
-    it("provides a table view for objects with telemetry", () => {
-        const testTelemetryObject = {
-            id: "test-object",
-            type: "test-object",
-            telemetry: {
-                values: [{
-                    key: "some-key"
-                }]
-            }
-        };
+    it('Shows no progress bar initially', () => {
+      let progressBar = element.querySelector('.c-progress-bar');
+
+      expect(tableInstance.outstandingRequests).toBe(0);
+      expect(progressBar).toBeNull();
+    });
+
+    it('Shows a progress bar while making requests', async () => {
+      tableInstance.incrementOutstandingRequests();
+      await nextTick();
+
+      let progressBar = element.querySelector('.c-progress-bar');
+
+      expect(tableInstance.outstandingRequests).toBe(1);
+      expect(progressBar).not.toBeNull();
+    });
+
+    it('Renders a row for every telemetry datum returned', async () => {
+      let rows = element.querySelectorAll('table.c-telemetry-table__body tr');
+      await nextTick();
+      expect(rows.length).toBe(3);
+    });
+
+    it('Adds a row in place when updating with existing telemetry', async () => {
+      let rows = element.querySelectorAll('table.c-telemetry-table__body tr');
+      await nextTick();
+      expect(rows.length).toBe(3);
+      // fire some telemetry
+      const newTelemetry = {
+        utc: 2,
+        'some-key': 'some-value 2',
+        'some-other-key': 'spacecraft'
+      };
+      spyOn(tableInstance.tableRows, 'getInPlaceUpdateIndex').and.returnValue(1);
+      spyOn(tableInstance.tableRows, 'updateRowInPlace').and.callThrough();
+      telemetryCallback(newTelemetry);
+
+      expect(tableInstance.tableRows.updateRowInPlace.calls.count()).toBeGreaterThan(0);
+    });
 
-        const applicableViews = openmct.objectViews.get(testTelemetryObject, []);
-        let tableView = applicableViews.find((viewProvider) => viewProvider.key === 'table');
-        expect(tableView).toBeDefined();
+    it('Renders a column for every item in telemetry metadata', () => {
+      let headers = element.querySelectorAll('span.c-telemetry-table__headers__label');
+      expect(headers.length).toBe(4);
+      expect(headers[0].innerText).toBe('Name');
+      expect(headers[1].innerText).toBe('Time');
+      expect(headers[2].innerText).toBe('Some attribute');
+      expect(headers[3].innerText).toBe('Another attribute');
     });
 
-    describe("The table view", () => {
-        let testTelemetryObject;
-        let applicableViews;
-        let tableViewProvider;
-        let tableView;
-        let tableInstance;
-
-        beforeEach(() => {
-            openmct.time.timeSystem('utc', {
-                start: 0,
-                end: 4
-            });
-
-            testTelemetryObject = {
-                identifier: {
-                    namespace: "",
-                    key: "test-object"
-                },
-                type: "test-object",
-                name: "Test Object",
-                telemetry: {
-                    values: [{
-                        key: "utc",
-                        format: "utc",
-                        name: "Time",
-                        hints: {
-                            domain: 1
-                        }
-                    }, {
-                        key: "some-key",
-                        name: "Some attribute",
-                        hints: {
-                            range: 1
-                        }
-                    }, {
-                        key: "some-other-key",
-                        name: "Another attribute",
-                        hints: {
-                            range: 2
-                        }
-                    }]
-                },
-                configuration: {
-                    hiddenColumns: {
-                        name: false,
-                        utc: false,
-                        'some-key': false,
-                        'some-other-key': false
-                    }
-                }
-            };
-            const testTelemetry = [
-                {
-                    'utc': 1,
-                    'some-key': 'some-value 1',
-                    'some-other-key': 'some-other-value 1'
-                },
-                {
-                    'utc': 2,
-                    'some-key': 'some-value 2',
-                    'some-other-key': 'some-other-value 2'
-                },
-                {
-                    'utc': 3,
-                    'some-key': 'some-value 3',
-                    'some-other-key': 'some-other-value 3'
-                }
-            ];
-            let telemetryPromiseResolve;
-            let telemetryPromise = new Promise((resolve) => {
-                telemetryPromiseResolve = resolve;
-            });
-            openmct.telemetry.request.and.callFake(() => {
-                telemetryPromiseResolve(testTelemetry);
-
-                return telemetryPromise;
-            });
-
-            openmct.router.path = [testTelemetryObject];
-
-            applicableViews = openmct.objectViews.get(testTelemetryObject, []);
-            tableViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'table');
-            tableView = tableViewProvider.view(testTelemetryObject, [testTelemetryObject]);
-            tableView.show(child, true);
-
-            tableInstance = tableView.getTable();
-
-            return telemetryPromise.then(() => Vue.nextTick());
-        });
-
-        it("Renders a row for every telemetry datum returned", () => {
-            let rows = element.querySelectorAll('table.c-telemetry-table__body tr');
-            expect(rows.length).toBe(3);
-        });
-
-        it("Renders a column for every item in telemetry metadata", () => {
-            let headers = element.querySelectorAll('span.c-telemetry-table__headers__label');
-            expect(headers.length).toBe(4);
-            expect(headers[0].innerText).toBe('Name');
-            expect(headers[1].innerText).toBe('Time');
-            expect(headers[2].innerText).toBe('Some attribute');
-            expect(headers[3].innerText).toBe('Another attribute');
-        });
-
-        it("Supports column reordering via drag and drop", () => {
-            let columns = element.querySelectorAll('tr.c-telemetry-table__headers__labels th');
-            let fromColumn = columns[0];
-            let toColumn = columns[1];
-            let fromColumnText = fromColumn.querySelector('span.c-telemetry-table__headers__label').innerText;
-            let toColumnText = toColumn.querySelector('span.c-telemetry-table__headers__label').innerText;
-
-            let dragStartEvent = createMouseEvent('dragstart');
-            let dragOverEvent = createMouseEvent('dragover');
-            let dropEvent = createMouseEvent('drop');
-
-            dragStartEvent.dataTransfer =
-                dragOverEvent.dataTransfer =
-                    dropEvent.dataTransfer = new MockDataTransfer();
-
-            fromColumn.dispatchEvent(dragStartEvent);
-            toColumn.dispatchEvent(dragOverEvent);
-            toColumn.dispatchEvent(dropEvent);
-
-            return Vue.nextTick().then(() => {
-                columns = element.querySelectorAll('tr.c-telemetry-table__headers__labels th');
-                let firstColumn = columns[0];
-                let secondColumn = columns[1];
-                let firstColumnText = firstColumn.querySelector('span.c-telemetry-table__headers__label').innerText;
-                let secondColumnText = secondColumn.querySelector('span.c-telemetry-table__headers__label').innerText;
-
-                expect(fromColumnText).not.toEqual(firstColumnText);
-                expect(fromColumnText).toEqual(secondColumnText);
-                expect(toColumnText).not.toEqual(secondColumnText);
-                expect(toColumnText).toEqual(firstColumnText);
-            });
-        });
-
-        it("Supports filtering telemetry by regular text search", () => {
-            tableInstance.filteredRows.setColumnFilter("some-key", "1");
-
-            return Vue.nextTick().then(() => {
-                let filteredRowElements = element.querySelectorAll('table.c-telemetry-table__body tr');
-
-                expect(filteredRowElements.length).toEqual(1);
-
-                tableInstance.filteredRows.setColumnFilter("some-key", "");
-
-                return Vue.nextTick().then(() => {
-                    let allRowElements = element.querySelectorAll('table.c-telemetry-table__body tr');
-
-                    expect(allRowElements.length).toEqual(3);
-                });
-            });
-        });
-
-        it("Supports filtering using Regex", () => {
-            tableInstance.filteredRows.setColumnRegexFilter("some-key", "^some-value$");
-
-            return Vue.nextTick().then(() => {
-                let filteredRowElements = element.querySelectorAll('table.c-telemetry-table__body tr');
-
-                expect(filteredRowElements.length).toEqual(0);
-
-                tableInstance.filteredRows.setColumnRegexFilter("some-key", "^some-value");
-
-                return Vue.nextTick().then(() => {
-                    let allRowElements = element.querySelectorAll('table.c-telemetry-table__body tr');
-
-                    expect(allRowElements.length).toEqual(3);
-                });
-            });
-        });
+    it('Supports column reordering via drag and drop', async () => {
+      let columns = element.querySelectorAll('tr.c-telemetry-table__headers__labels th');
+      let fromColumn = columns[0];
+      let toColumn = columns[1];
+      let fromColumnText = fromColumn.querySelector(
+        'span.c-telemetry-table__headers__label'
+      ).innerText;
+      let toColumnText = toColumn.querySelector('span.c-telemetry-table__headers__label').innerText;
+
+      let dragStartEvent = createMouseEvent('dragstart');
+      let dragOverEvent = createMouseEvent('dragover');
+      let dropEvent = createMouseEvent('drop');
+
+      dragStartEvent.dataTransfer =
+        dragOverEvent.dataTransfer =
+        dropEvent.dataTransfer =
+          new MockDataTransfer();
+
+      fromColumn.dispatchEvent(dragStartEvent);
+      toColumn.dispatchEvent(dragOverEvent);
+      toColumn.dispatchEvent(dropEvent);
+
+      await nextTick();
+      columns = element.querySelectorAll('tr.c-telemetry-table__headers__labels th');
+      let firstColumn = columns[0];
+      let secondColumn = columns[1];
+      let firstColumnText = firstColumn.querySelector(
+        'span.c-telemetry-table__headers__label'
+      ).innerText;
+      let secondColumnText = secondColumn.querySelector(
+        'span.c-telemetry-table__headers__label'
+      ).innerText;
+      expect(fromColumnText).not.toEqual(firstColumnText);
+      expect(fromColumnText).toEqual(secondColumnText);
+      expect(toColumnText).not.toEqual(secondColumnText);
+      expect(toColumnText).toEqual(firstColumnText);
+    });
+
+    it('displays the correct number of column headers when the configuration is mutated', async () => {
+      const tableInstanceConfiguration = tableInstance.domainObject.configuration;
+      tableInstanceConfiguration.hiddenColumns['some-key'] = true;
+      unlistenConfigMutation = tableInstance.openmct.objects.mutate(
+        tableInstance.domainObject,
+        'configuration',
+        tableInstanceConfiguration
+      );
+
+      await nextTick();
+      let tableHeaderElements = element.querySelectorAll('.c-telemetry-table__headers__label');
+      expect(tableHeaderElements.length).toEqual(3);
+
+      tableInstanceConfiguration.hiddenColumns['some-key'] = false;
+      unlistenConfigMutation = tableInstance.openmct.objects.mutate(
+        tableInstance.domainObject,
+        'configuration',
+        tableInstanceConfiguration
+      );
+
+      await nextTick();
+      tableHeaderElements = element.querySelectorAll('.c-telemetry-table__headers__label');
+      expect(tableHeaderElements.length).toEqual(4);
+    });
+
+    it('displays the correct number of table cells in a row when the configuration is mutated', async () => {
+      const tableInstanceConfiguration = tableInstance.domainObject.configuration;
+      tableInstanceConfiguration.hiddenColumns['some-key'] = true;
+      unlistenConfigMutation = tableInstance.openmct.objects.mutate(
+        tableInstance.domainObject,
+        'configuration',
+        tableInstanceConfiguration
+      );
+
+      await nextTick();
+      let tableRowCells = element.querySelectorAll(
+        'table.c-telemetry-table__body > tbody > tr:first-child td'
+      );
+      expect(tableRowCells.length).toEqual(3);
+
+      tableInstanceConfiguration.hiddenColumns['some-key'] = false;
+      unlistenConfigMutation = tableInstance.openmct.objects.mutate(
+        tableInstance.domainObject,
+        'configuration',
+        tableInstanceConfiguration
+      );
+
+      await nextTick();
+      tableRowCells = element.querySelectorAll(
+        'table.c-telemetry-table__body > tbody > tr:first-child td'
+      );
+      expect(tableRowCells.length).toEqual(4);
+    });
+
+    it('Pauses the table when a row is marked', async () => {
+      let firstRow = element.querySelector('table.c-telemetry-table__body > tbody > tr');
+      let clickEvent = createMouseEvent('click');
+
+      // Mark a row
+      firstRow.dispatchEvent(clickEvent);
+
+      await nextTick();
+
+      // Verify table is paused
+      expect(element.querySelector('div.c-table.is-paused')).not.toBeNull();
+    });
+
+    it('Unpauses the table on user bounds change', async () => {
+      let firstRow = element.querySelector('table.c-telemetry-table__body > tbody > tr');
+      let clickEvent = createMouseEvent('click');
+
+      // Mark a row
+      firstRow.dispatchEvent(clickEvent);
+
+      await nextTick();
+
+      // Verify table is paused
+      expect(element.querySelector('div.c-table.is-paused')).not.toBeNull();
+
+      const currentBounds = openmct.time.bounds();
+      await nextTick();
+      const newBounds = {
+        start: currentBounds.start,
+        end: currentBounds.end - 3
+      };
+
+      // Manually change the time bounds
+      openmct.time.bounds(newBounds);
+      await nextTick();
+
+      // Verify table is no longer paused
+      expect(element.querySelector('div.c-table.is-paused')).toBeNull();
+    });
+
+    it('Unpauses the table on user bounds change if paused by button', async () => {
+      const viewContext = tableView.getViewContext();
+
+      // Pause by button
+      viewContext.togglePauseByButton();
+      await nextTick();
+
+      // Verify table is paused
+      expect(element.querySelector('div.c-table.is-paused')).not.toBeNull();
+
+      const currentBounds = openmct.time.bounds();
+      await nextTick();
+
+      const newBounds = {
+        start: currentBounds.start,
+        end: currentBounds.end - 1
+      };
+      // Manually change the time bounds
+      openmct.time.bounds(newBounds);
+
+      await nextTick();
+
+      // Verify table is no longer paused
+      expect(element.querySelector('div.c-table.is-paused')).toBeNull();
+    });
+
+    it('Does not unpause the table on tick', async () => {
+      const viewContext = tableView.getViewContext();
+
+      // Pause by button
+      viewContext.togglePauseByButton();
+
+      await nextTick();
+
+      // Verify table displays the correct number of rows
+      let tableRows = element.querySelectorAll('table.c-telemetry-table__body > tbody > tr');
+      expect(tableRows.length).toEqual(3);
+
+      // Verify table is paused
+      expect(element.querySelector('div.c-table.is-paused')).not.toBeNull();
+
+      // Tick the clock
+      openmct.time.tick(1);
 
-        it("displays the correct number of column headers when the configuration is mutated", async () => {
-            const tableInstanceConfiguration = tableInstance.domainObject.configuration;
-            tableInstanceConfiguration.hiddenColumns['some-key'] = true;
-            unlistenConfigMutation = tableInstance.openmct.objects.mutate(tableInstance.domainObject, 'configuration', tableInstanceConfiguration);
+      await nextTick();
 
-            await Vue.nextTick();
-            let tableHeaderElements = element.querySelectorAll('.c-telemetry-table__headers__label');
-            expect(tableHeaderElements.length).toEqual(3);
-
-            tableInstanceConfiguration.hiddenColumns['some-key'] = false;
-            unlistenConfigMutation = tableInstance.openmct.objects.mutate(tableInstance.domainObject, 'configuration', tableInstanceConfiguration);
+      // Verify table is still paused
+      expect(element.querySelector('div.c-table.is-paused')).not.toBeNull();
 
-            await Vue.nextTick();
-            tableHeaderElements = element.querySelectorAll('.c-telemetry-table__headers__label');
-            expect(tableHeaderElements.length).toEqual(4);
-        });
-
-        it("displays the correct number of table cells in a row when the configuration is mutated", async () => {
-            const tableInstanceConfiguration = tableInstance.domainObject.configuration;
-            tableInstanceConfiguration.hiddenColumns['some-key'] = true;
-            unlistenConfigMutation = tableInstance.openmct.objects.mutate(tableInstance.domainObject, 'configuration', tableInstanceConfiguration);
-
-            await Vue.nextTick();
-            let tableRowCells = element.querySelectorAll('table.c-telemetry-table__body > tbody > tr:first-child td');
-            expect(tableRowCells.length).toEqual(3);
-
-            tableInstanceConfiguration.hiddenColumns['some-key'] = false;
-            unlistenConfigMutation = tableInstance.openmct.objects.mutate(tableInstance.domainObject, 'configuration', tableInstanceConfiguration);
+      await nextTick();
 
-            await Vue.nextTick();
-            tableRowCells = element.querySelectorAll('table.c-telemetry-table__body > tbody > tr:first-child td');
-            expect(tableRowCells.length).toEqual(4);
-        });
+      // Verify table displays the correct number of rows
+      tableRows = element.querySelectorAll('table.c-telemetry-table__body > tbody > tr');
+      expect(tableRows.length).toEqual(3);
     });
+  });
 });
diff --git a/src/plugins/themes/espresso-theme.scss b/src/plugins/themes/espresso-theme.scss
index 58d039a8ec3..05b5a0de1a8 100644
--- a/src/plugins/themes/espresso-theme.scss
+++ b/src/plugins/themes/espresso-theme.scss
@@ -1,22 +1,22 @@
-@import "../../styles/vendor/normalize-min";
-@import "../../styles/constants";
-@import "../../styles/constants-mobile.scss";
+@import '../../styles/vendor/normalize-min';
+@import '../../styles/constants';
+@import '../../styles/constants-mobile.scss';
 
-@import "../../styles/constants-espresso";
+@import '../../styles/constants-espresso';
 
-@import "../../styles/mixins";
-@import "../../styles/animations";
-@import "../../styles/about";
-@import "../../styles/glyphs";
-@import "../../styles/global";
-@import "../../styles/status";
-@import "../../styles/limits";
-@import "../../styles/controls";
-@import "../../styles/forms";
-@import "../../styles/table";
-@import "../../styles/legacy";
-@import "../../styles/legacy-plots";
-@import "../../styles/plotly";
-@import "../../styles/legacy-messages";
+@import '../../styles/mixins';
+@import '../../styles/animations';
+@import '../../styles/about';
+@import '../../styles/glyphs';
+@import '../../styles/global';
+@import '../../styles/status';
+@import '../../styles/limits';
+@import '../../styles/controls';
+@import '../../styles/forms';
+@import '../../styles/table';
+@import '../../styles/legacy';
+@import '../../styles/legacy-plots';
+@import '../../styles/plotly';
+@import '../../styles/legacy-messages';
 
-@import "../../styles/vue-styles.scss";
+@import '../../styles/vue-styles.scss';
diff --git a/src/plugins/themes/espresso.js b/src/plugins/themes/espresso.js
index d403c676967..71cab276686 100644
--- a/src/plugins/themes/espresso.js
+++ b/src/plugins/themes/espresso.js
@@ -1,7 +1,7 @@
-import { installTheme } from './installTheme';
+import { installTheme } from './installTheme.js';
 
 export default function plugin() {
-    return function install(openmct) {
-        installTheme(openmct, 'espresso');
-    };
+  return function install(openmct) {
+    installTheme(openmct, 'espresso');
+  };
 }
diff --git a/src/plugins/themes/installTheme.js b/src/plugins/themes/installTheme.js
index ffdf0924ba7..9987b09b3d2 100644
--- a/src/plugins/themes/installTheme.js
+++ b/src/plugins/themes/installTheme.js
@@ -1,18 +1,18 @@
 const dataAttribute = 'theme';
 
 export function installTheme(openmct, themeName) {
-    const currentTheme = document.querySelector(`link[data-${dataAttribute}]`);
-    if (currentTheme) {
-        currentTheme.remove();
-    }
+  const currentTheme = document.querySelector(`link[data-${dataAttribute}]`);
+  if (currentTheme) {
+    currentTheme.remove();
+  }
 
-    const newTheme = document.createElement('link');
-    newTheme.setAttribute('rel', 'stylesheet');
+  const newTheme = document.createElement('link');
+  newTheme.setAttribute('rel', 'stylesheet');
 
-    // eslint-disable-next-line no-undef
-    const href = `${openmct.getAssetPath()}${__OPENMCT_ROOT_RELATIVE__}${themeName}Theme.css`;
-    newTheme.setAttribute('href', href);
-    newTheme.dataset[dataAttribute] = themeName;
+  // eslint-disable-next-line no-undef
+  const href = `${openmct.getAssetPath()}${__OPENMCT_ROOT_RELATIVE__}${themeName}Theme.css`;
+  newTheme.setAttribute('href', href);
+  newTheme.dataset[dataAttribute] = themeName;
 
-    document.head.appendChild(newTheme);
+  document.head.appendChild(newTheme);
 }
diff --git a/src/plugins/themes/maelstrom-theme.scss b/src/plugins/themes/maelstrom-theme.scss
deleted file mode 100644
index 69e327cf67a..00000000000
--- a/src/plugins/themes/maelstrom-theme.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@import "../../styles/vendor/normalize-min";
-@import "../../styles/constants";
-@import "../../styles/constants-mobile.scss";
-
-@import "../../styles/constants-maelstrom";
-
-@import "../../styles/mixins";
-@import "../../styles/animations";
-@import "../../styles/about";
-@import "../../styles/glyphs";
-@import "../../styles/global";
-@import "../../styles/status";
-@import "../../styles/limits";
-@import "../../styles/controls";
-@import "../../styles/forms";
-@import "../../styles/table";
-@import "../../styles/legacy";
-@import "../../styles/legacy-plots";
-@import "../../styles/plotly";
-@import "../../styles/legacy-messages";
-
-@import "../../styles/vue-styles.scss";
diff --git a/src/plugins/themes/maelstrom.js b/src/plugins/themes/maelstrom.js
deleted file mode 100644
index c551b1f7299..00000000000
--- a/src/plugins/themes/maelstrom.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { installTheme } from './installTheme';
-
-export default function plugin() {
-    return function install(openmct) {
-        installTheme(openmct, 'maelstrom');
-    };
-}
diff --git a/src/plugins/themes/snow-theme.scss b/src/plugins/themes/snow-theme.scss
index 294be822377..24342f120f1 100644
--- a/src/plugins/themes/snow-theme.scss
+++ b/src/plugins/themes/snow-theme.scss
@@ -1,22 +1,22 @@
-@import "../../styles/vendor/normalize-min";
-@import "../../styles/constants";
-@import "../../styles/constants-mobile.scss";
+@import '../../styles/vendor/normalize-min';
+@import '../../styles/constants';
+@import '../../styles/constants-mobile.scss';
 
-@import "../../styles/constants-snow";
+@import '../../styles/constants-snow';
 
-@import "../../styles/mixins";
-@import "../../styles/animations";
-@import "../../styles/about";
-@import "../../styles/glyphs";
-@import "../../styles/global";
-@import "../../styles/status";
-@import "../../styles/limits";
-@import "../../styles/controls";
-@import "../../styles/forms";
-@import "../../styles/table";
-@import "../../styles/legacy";
-@import "../../styles/legacy-plots";
-@import "../../styles/plotly";
-@import "../../styles/legacy-messages";
+@import '../../styles/mixins';
+@import '../../styles/animations';
+@import '../../styles/about';
+@import '../../styles/glyphs';
+@import '../../styles/global';
+@import '../../styles/status';
+@import '../../styles/limits';
+@import '../../styles/controls';
+@import '../../styles/forms';
+@import '../../styles/table';
+@import '../../styles/legacy';
+@import '../../styles/legacy-plots';
+@import '../../styles/plotly';
+@import '../../styles/legacy-messages';
 
-@import "../../styles/vue-styles.scss";
+@import '../../styles/vue-styles.scss';
diff --git a/src/plugins/themes/snow.js b/src/plugins/themes/snow.js
index 3befb82252e..520beb7802a 100644
--- a/src/plugins/themes/snow.js
+++ b/src/plugins/themes/snow.js
@@ -1,7 +1,7 @@
-import { installTheme } from './installTheme';
+import { installTheme } from './installTheme.js';
 
 export default function plugin() {
-    return function install(openmct) {
-        installTheme(openmct, 'snow');
-    };
+  return function install(openmct) {
+    installTheme(openmct, 'snow');
+  };
 }
diff --git a/src/plugins/timeConductor/Conductor.vue b/src/plugins/timeConductor/Conductor.vue
deleted file mode 100644
index 123a6696212..00000000000
--- a/src/plugins/timeConductor/Conductor.vue
+++ /dev/null
@@ -1,499 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-<template>
-<div
-    class="c-conductor"
-    :class="[
-        { 'is-zooming': isZooming },
-        { 'is-panning': isPanning },
-        { 'alt-pressed': altPressed },
-        isFixed ? 'is-fixed-mode' : 'is-realtime-mode'
-    ]"
->
-    <form
-        ref="conductorForm"
-        class="u-contents"
-        @submit.prevent="updateTimeFromConductor"
-    >
-        <div class="c-conductor__time-bounds">
-            <button
-                ref="submitButton"
-                class="c-input--submit"
-                type="submit"
-            ></button>
-            <ConductorModeIcon class="c-conductor__mode-icon" />
-
-            <div
-                v-if="isFixed"
-                class="c-ctrl-wrapper c-conductor-input c-conductor__start-fixed"
-            >
-                <!-- Fixed start -->
-                <div class="c-conductor__start-fixed__label">
-                    Start
-                </div>
-                <input
-                    ref="startDate"
-                    v-model="formattedBounds.start"
-                    class="c-input--datetime"
-                    type="text"
-                    autocorrect="off"
-                    spellcheck="false"
-                    @change="validateAllBounds('startDate'); submitForm()"
-                >
-                <date-picker
-                    v-if="isFixed && isUTCBased"
-                    :default-date-time="formattedBounds.start"
-                    :formatter="timeFormatter"
-                    @date-selected="startDateSelected"
-                />
-            </div>
-
-            <div
-                v-if="!isFixed"
-                class="c-ctrl-wrapper c-conductor-input c-conductor__start-delta"
-            >
-                <!-- RT start -->
-                <div class="c-direction-indicator icon-minus"></div>
-                <time-popup
-                    v-if="showTCInputStart"
-                    class="pr-tc-input-menu--start"
-                    :type="'start'"
-                    :offset="offsets.start"
-                    @focus.native="$event.target.select()"
-                    @hide="hideAllTimePopups"
-                    @update="timePopUpdate"
-                />
-                <button
-                    ref="startOffset"
-                    class="c-button c-conductor__delta-button"
-                    @click.prevent="showTimePopupStart"
-                >
-                    {{ offsets.start }}
-                </button>
-            </div>
-
-            <div class="c-ctrl-wrapper c-conductor-input c-conductor__end-fixed">
-                <!-- Fixed end and RT 'last update' display -->
-                <div class="c-conductor__end-fixed__label">
-                    {{ isFixed ? 'End' : 'Updated' }}
-                </div>
-                <input
-                    ref="endDate"
-                    v-model="formattedBounds.end"
-                    class="c-input--datetime"
-                    type="text"
-                    autocorrect="off"
-                    spellcheck="false"
-                    :disabled="!isFixed"
-                    @change="validateAllBounds('endDate'); submitForm()"
-                >
-                <date-picker
-                    v-if="isFixed && isUTCBased"
-                    class="c-ctrl-wrapper--menus-left"
-                    :default-date-time="formattedBounds.end"
-                    :formatter="timeFormatter"
-                    @date-selected="endDateSelected"
-                />
-            </div>
-
-            <div
-                v-if="!isFixed"
-                class="c-ctrl-wrapper c-conductor-input c-conductor__end-delta"
-            >
-                <!-- RT end -->
-                <div class="c-direction-indicator icon-plus"></div>
-                <time-popup
-                    v-if="showTCInputEnd"
-                    class="pr-tc-input-menu--end"
-                    :type="'end'"
-                    :offset="offsets.end"
-                    @focus.native="$event.target.select()"
-                    @hide="hideAllTimePopups"
-                    @update="timePopUpdate"
-                />
-                <button
-                    ref="endOffset"
-                    class="c-button c-conductor__delta-button"
-                    @click.prevent="showTimePopupEnd"
-                >
-                    {{ offsets.end }}
-                </button>
-            </div>
-
-            <conductor-axis
-                class="c-conductor__ticks"
-                :view-bounds="viewBounds"
-                :is-fixed="isFixed"
-                :alt-pressed="altPressed"
-                @endPan="endPan"
-                @endZoom="endZoom"
-                @panAxis="pan"
-                @zoomAxis="zoom"
-            />
-
-        </div>
-        <div class="c-conductor__controls">
-            <ConductorMode class="c-conductor__mode-select" />
-            <ConductorTimeSystem class="c-conductor__time-system-select" />
-            <ConductorHistory
-                class="c-conductor__history-select"
-                :offsets="openmct.time.clockOffsets()"
-                :bounds="bounds"
-                :time-system="timeSystem"
-                :mode="timeMode"
-            />
-        </div>
-        <input
-            type="submit"
-            class="invisible"
-        >
-    </form>
-</div>
-</template>
-
-<script>
-import _ from 'lodash';
-import ConductorMode from './ConductorMode.vue';
-import ConductorTimeSystem from './ConductorTimeSystem.vue';
-import DatePicker from './DatePicker.vue';
-import ConductorAxis from './ConductorAxis.vue';
-import ConductorModeIcon from './ConductorModeIcon.vue';
-import ConductorHistory from './ConductorHistory.vue';
-import TimePopup from './timePopup.vue';
-
-const DEFAULT_DURATION_FORMATTER = 'duration';
-
-export default {
-    components: {
-        ConductorMode,
-        ConductorTimeSystem,
-        DatePicker,
-        ConductorAxis,
-        ConductorModeIcon,
-        ConductorHistory,
-        TimePopup
-    },
-    inject: ['openmct', 'configuration'],
-    data() {
-        let bounds = this.openmct.time.bounds();
-        let offsets = this.openmct.time.clockOffsets();
-        let timeSystem = this.openmct.time.timeSystem();
-        let timeFormatter = this.getFormatter(timeSystem.timeFormat);
-        let durationFormatter = this.getFormatter(timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER);
-
-        return {
-            timeSystem: timeSystem,
-            timeFormatter: timeFormatter,
-            durationFormatter: durationFormatter,
-            offsets: {
-                start: offsets && durationFormatter.format(Math.abs(offsets.start)),
-                end: offsets && durationFormatter.format(Math.abs(offsets.end))
-            },
-            bounds: {
-                start: bounds.start,
-                end: bounds.end
-            },
-            formattedBounds: {
-                start: timeFormatter.format(bounds.start),
-                end: timeFormatter.format(bounds.end)
-            },
-            viewBounds: {
-                start: bounds.start,
-                end: bounds.end
-            },
-            isFixed: this.openmct.time.clock() === undefined,
-            isUTCBased: timeSystem.isUTCBased,
-            showDatePicker: false,
-            altPressed: false,
-            isPanning: false,
-            isZooming: false,
-            showTCInputStart: false,
-            showTCInputEnd: false
-        };
-    },
-    computed: {
-        timeMode() {
-            return this.isFixed ? 'fixed' : 'realtime';
-        }
-    },
-    mounted() {
-        document.addEventListener('keydown', this.handleKeyDown);
-        document.addEventListener('keyup', this.handleKeyUp);
-        this.setTimeSystem(JSON.parse(JSON.stringify(this.openmct.time.timeSystem())));
-        this.openmct.time.on('bounds', _.throttle(this.handleNewBounds, 300));
-        this.openmct.time.on('timeSystem', this.setTimeSystem);
-        this.openmct.time.on('clock', this.setViewFromClock);
-        this.openmct.time.on('clockOffsets', this.setViewFromOffsets);
-    },
-    beforeDestroy() {
-        document.removeEventListener('keydown', this.handleKeyDown);
-        document.removeEventListener('keyup', this.handleKeyUp);
-    },
-    methods: {
-        handleNewBounds(bounds) {
-            this.setBounds(bounds);
-            this.setViewFromBounds(bounds);
-        },
-        setBounds(bounds) {
-            this.bounds = bounds;
-        },
-        handleKeyDown(event) {
-            if (event.key === 'Alt') {
-                this.altPressed = true;
-            }
-        },
-        handleKeyUp(event) {
-            if (event.key === 'Alt') {
-                this.altPressed = false;
-            }
-        },
-        pan(bounds) {
-            this.isPanning = true;
-            this.setViewFromBounds(bounds);
-        },
-        endPan(bounds) {
-            this.isPanning = false;
-            if (bounds) {
-                this.openmct.time.bounds(bounds);
-            }
-        },
-        zoom(bounds) {
-            this.isZooming = true;
-            this.formattedBounds.start = this.timeFormatter.format(bounds.start);
-            this.formattedBounds.end = this.timeFormatter.format(bounds.end);
-        },
-        endZoom(bounds) {
-            this.isZooming = false;
-
-            if (bounds) {
-                this.openmct.time.bounds(bounds);
-            } else {
-                this.setViewFromBounds(this.bounds);
-            }
-        },
-        setTimeSystem(timeSystem) {
-            this.timeSystem = timeSystem;
-            this.timeFormatter = this.getFormatter(timeSystem.timeFormat);
-            this.durationFormatter = this.getFormatter(
-                timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER);
-            this.isUTCBased = timeSystem.isUTCBased;
-        },
-        setOffsetsFromView($event) {
-            if (this.$refs.conductorForm.checkValidity()) {
-                let startOffset = 0 - this.durationFormatter.parse(this.offsets.start);
-                let endOffset = this.durationFormatter.parse(this.offsets.end);
-
-                this.openmct.time.clockOffsets({
-                    start: startOffset,
-                    end: endOffset
-                });
-            }
-
-            if ($event) {
-                $event.preventDefault();
-
-                return false;
-            }
-        },
-        setBoundsFromView($event) {
-            if (this.$refs.conductorForm.checkValidity()) {
-                let start = this.timeFormatter.parse(this.formattedBounds.start);
-                let end = this.timeFormatter.parse(this.formattedBounds.end);
-
-                this.openmct.time.bounds({
-                    start: start,
-                    end: end
-                });
-            }
-
-            if ($event) {
-                $event.preventDefault();
-
-                return false;
-            }
-        },
-        setViewFromClock(clock) {
-            this.clearAllValidation();
-            this.isFixed = clock === undefined;
-        },
-        setViewFromBounds(bounds) {
-            this.formattedBounds.start = this.timeFormatter.format(bounds.start);
-            this.formattedBounds.end = this.timeFormatter.format(bounds.end);
-            this.viewBounds.start = bounds.start;
-            this.viewBounds.end = bounds.end;
-        },
-        setViewFromOffsets(offsets) {
-            this.offsets.start = this.durationFormatter.format(Math.abs(offsets.start));
-            this.offsets.end = this.durationFormatter.format(Math.abs(offsets.end));
-        },
-        updateTimeFromConductor() {
-            if (this.isFixed) {
-                this.setBoundsFromView();
-            } else {
-                this.setOffsetsFromView();
-            }
-        },
-        getBoundsLimit() {
-            const configuration = this.configuration.menuOptions
-                .filter(option => option.timeSystem === this.timeSystem.key)
-                .find(option => option.limit);
-
-            const limit = configuration ? configuration.limit : undefined;
-
-            return limit;
-        },
-        clearAllValidation() {
-            if (this.isFixed) {
-                [this.$refs.startDate, this.$refs.endDate].forEach(this.clearValidationForInput);
-            } else {
-                [this.$refs.startOffset, this.$refs.endOffset].forEach(this.clearValidationForInput);
-            }
-        },
-        clearValidationForInput(input) {
-            input.setCustomValidity('');
-            input.title = '';
-        },
-        validateAllBounds(ref) {
-            if (!this.areBoundsFormatsValid()) {
-                return false;
-            }
-
-            let validationResult = true;
-            const currentInput = this.$refs[ref];
-
-            return [this.$refs.startDate, this.$refs.endDate].every((input) => {
-                let boundsValues = {
-                    start: this.timeFormatter.parse(this.formattedBounds.start),
-                    end: this.timeFormatter.parse(this.formattedBounds.end)
-                };
-                const limit = this.getBoundsLimit();
-
-                if (
-                    this.timeSystem.isUTCBased
-                    && limit
-                    && boundsValues.end - boundsValues.start > limit
-                ) {
-                    if (input === currentInput) {
-                        validationResult = "Start and end difference exceeds allowable limit";
-                    }
-                } else {
-                    if (input === currentInput) {
-                        validationResult = this.openmct.time.validateBounds(boundsValues);
-                    }
-                }
-
-                return this.handleValidationResults(input, validationResult);
-            });
-        },
-        areBoundsFormatsValid() {
-            let validationResult = true;
-
-            return [this.$refs.startDate, this.$refs.endDate].every((input) => {
-                const formattedDate = input === this.$refs.startDate
-                    ? this.formattedBounds.start
-                    : this.formattedBounds.end
-                ;
-
-                if (!this.timeFormatter.validate(formattedDate)) {
-                    validationResult = 'Invalid date';
-                }
-
-                return this.handleValidationResults(input, validationResult);
-            });
-        },
-        validateAllOffsets(event) {
-            return [this.$refs.startOffset, this.$refs.endOffset].every((input) => {
-                let validationResult = true;
-                let formattedOffset;
-
-                if (input === this.$refs.startOffset) {
-                    formattedOffset = this.offsets.start;
-                } else {
-                    formattedOffset = this.offsets.end;
-                }
-
-                if (!this.durationFormatter.validate(formattedOffset)) {
-                    validationResult = 'Offsets must be in the format hh:mm:ss and less than 24 hours in duration';
-                } else {
-                    let offsetValues = {
-                        start: 0 - this.durationFormatter.parse(this.offsets.start),
-                        end: this.durationFormatter.parse(this.offsets.end)
-                    };
-                    validationResult = this.openmct.time.validateOffsets(offsetValues);
-                }
-
-                return this.handleValidationResults(input, validationResult);
-            });
-        },
-        handleValidationResults(input, validationResult) {
-            if (validationResult !== true) {
-                input.setCustomValidity(validationResult);
-                input.title = validationResult;
-
-                return false;
-            } else {
-                input.setCustomValidity('');
-                input.title = '';
-
-                return true;
-            }
-        },
-        submitForm() {
-            // Allow Vue model to catch up to user input.
-            // Submitting form will cause validation messages to display (but only if triggered by button click)
-            this.$nextTick(() => this.$refs.submitButton.click());
-        },
-        getFormatter(key) {
-            return this.openmct.telemetry.getValueFormatter({
-                format: key
-            }).formatter;
-        },
-        startDateSelected(date) {
-            this.formattedBounds.start = this.timeFormatter.format(date);
-            this.validateAllBounds('startDate');
-            this.submitForm();
-        },
-        endDateSelected(date) {
-            this.formattedBounds.end = this.timeFormatter.format(date);
-            this.validateAllBounds('endDate');
-            this.submitForm();
-        },
-        hideAllTimePopups() {
-            this.showTCInputStart = false;
-            this.showTCInputEnd = false;
-        },
-        showTimePopupStart() {
-            this.hideAllTimePopups();
-            this.showTCInputStart = !this.showTCInputStart;
-        },
-        showTimePopupEnd() {
-            this.hideAllTimePopups();
-            this.showTCInputEnd = !this.showTCInputEnd;
-        },
-        timePopUpdate({ type, hours, minutes, seconds }) {
-            this.offsets[type] = [hours, minutes, seconds].join(':');
-            this.setOffsetsFromView();
-            this.hideAllTimePopups();
-        }
-    }
-};
-</script>
diff --git a/src/plugins/timeConductor/ConductorAxis.vue b/src/plugins/timeConductor/ConductorAxis.vue
index 04453023801..e16f15bad89 100644
--- a/src/plugins/timeConductor/ConductorAxis.vue
+++ b/src/plugins/timeConductor/ConductorAxis.vue
@@ -1,42 +1,36 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div
-    ref="axisHolder"
-    class="c-conductor-axis"
-    @mousedown="dragStart($event)"
->
-    <div
-        class="c-conductor-axis__zoom-indicator"
-        :style="zoomStyle"
-    ></div>
-</div>
+  <div ref="axisHolder" class="c-conductor-axis" @mousedown="dragStart($event)">
+    <div class="c-conductor-axis__zoom-indicator" :style="zoomStyle"></div>
+  </div>
 </template>
 
 <script>
+import { axisTop } from 'd3-axis';
+import { scaleLinear, scaleUtc } from 'd3-scale';
+import { select } from 'd3-selection';
 
-import * as d3Selection from 'd3-selection';
-import * as d3Axis from 'd3-axis';
-import * as d3Scale from 'd3-scale';
+import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
 import utcMultiTimeFormat from './utcMultiTimeFormat.js';
 
 const PADDING = 1;
@@ -46,268 +40,260 @@ const PIXELS_PER_TICK = 100;
 const PIXELS_PER_TICK_WIDE = 200;
 
 export default {
-    inject: ['openmct'],
-    props: {
-        viewBounds: {
-            type: Object,
-            required: true
-        },
-        isFixed: {
-            type: Boolean,
-            required: true
-        },
-        altPressed: {
-            type: Boolean,
-            required: true
-        }
+  inject: ['openmct'],
+  props: {
+    viewBounds: {
+      type: Object,
+      required: true
     },
-    data() {
-        return {
-            inPanMode: false,
-            dragStartX: undefined,
-            dragX: undefined,
-            zoomStyle: {}
-        };
+    isFixed: {
+      type: Boolean,
+      required: true
     },
-    computed: {
-        inZoomMode() {
-            return !this.inPanMode;
-        }
+    altPressed: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: ['pan-axis', 'end-pan', 'zoom-axis', 'end-zoom'],
+  data() {
+    return {
+      inPanMode: false,
+      dragStartX: undefined,
+      dragX: undefined,
+      zoomStyle: {}
+    };
+  },
+  computed: {
+    inZoomMode() {
+      return !this.inPanMode;
+    }
+  },
+  watch: {
+    viewBounds: {
+      handler() {
+        this.setScale();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    let vis = select(this.$refs.axisHolder).append('svg:svg');
+
+    this.xAxis = axisTop();
+    this.dragging = false;
+
+    // draw x axis with labels. CSS is used to position them.
+    this.axisElement = vis.append('g').attr('class', 'axis');
+
+    this.setViewFromTimeSystem(this.openmct.time.getTimeSystem());
+    this.setAxisDimensions();
+    this.setScale();
+
+    //Respond to changes in conductor
+    this.openmct.time.on(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setViewFromTimeSystem);
+    this.resizeTimer = setInterval(this.resize, RESIZE_POLL_INTERVAL);
+  },
+  beforeUnmount() {
+    clearInterval(this.resizeTimer);
+  },
+  methods: {
+    setAxisDimensions() {
+      const axisHolder = this.$refs.axisHolder;
+      const rect = axisHolder.getBoundingClientRect();
+
+      this.left = Math.round(rect.left);
+      this.width = axisHolder.clientWidth;
     },
-    watch: {
-        viewBounds: {
-            handler() {
-                this.setScale();
-            },
-            deep: true
+    setScale() {
+      if (!this.width) {
+        return;
+      }
+
+      let timeSystem = this.openmct.time.getTimeSystem();
+
+      if (timeSystem.isUTCBased) {
+        this.xScale.domain([new Date(this.viewBounds.start), new Date(this.viewBounds.end)]);
+      } else {
+        this.xScale.domain([this.viewBounds.start, this.viewBounds.end]);
+      }
+
+      this.xAxis.scale(this.xScale);
+
+      this.xScale.range([PADDING, this.width - PADDING * 2]);
+      this.axisElement.call(this.xAxis);
+
+      if (this.width > 1800) {
+        this.xAxis.ticks(this.width / PIXELS_PER_TICK_WIDE);
+      } else {
+        this.xAxis.ticks(this.width / PIXELS_PER_TICK);
+      }
+
+      this.msPerPixel = (this.viewBounds.end - this.viewBounds.start) / this.width;
+    },
+    setViewFromTimeSystem(timeSystem) {
+      //The D3 scale used depends on the type of time system as d3
+      // supports UTC out of the box.
+      if (timeSystem.isUTCBased) {
+        this.xScale = scaleUtc();
+      } else {
+        this.xScale = scaleLinear();
+      }
+
+      this.xAxis.scale(this.xScale);
+      this.xAxis.tickFormat(utcMultiTimeFormat);
+      this.axisElement.call(this.xAxis);
+      this.setScale();
+    },
+    getActiveFormatter() {
+      let timeSystem = this.openmct.time.getTimeSystem();
+
+      if (this.isFixed) {
+        return this.getFormatter(timeSystem.timeFormat);
+      } else {
+        return this.getFormatter(timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER);
+      }
+    },
+    getFormatter(key) {
+      return this.openmct.telemetry.getValueFormatter({
+        format: key
+      }).formatter;
+    },
+    dragStart($event) {
+      if (this.isFixed) {
+        this.dragStartX = $event.clientX;
+
+        if (this.altPressed) {
+          this.inPanMode = true;
+        }
+
+        document.addEventListener('mousemove', this.drag);
+        document.addEventListener('mouseup', this.dragEnd, {
+          once: true
+        });
+
+        if (this.inZoomMode) {
+          this.startZoom();
         }
+      }
     },
-    mounted() {
-        let vis = d3Selection.select(this.$refs.axisHolder).append("svg:svg");
+    drag($event) {
+      if (!this.dragging) {
+        this.dragging = true;
+
+        requestAnimationFrame(() => {
+          this.dragX = $event.clientX;
+
+          if (this.inPanMode) {
+            this.pan();
+          } else {
+            this.zoom();
+          }
+
+          this.dragging = false;
+        });
+      }
+    },
+    dragEnd() {
+      if (this.inPanMode) {
+        this.endPan();
+      } else {
+        this.endZoom();
+      }
+
+      document.removeEventListener('mousemove', this.drag);
+      this.dragStartX = undefined;
+      this.dragX = undefined;
+    },
+    pan() {
+      const panBounds = this.getPanBounds();
+      this.$emit('pan-axis', panBounds);
+    },
+    endPan() {
+      const panBounds = this.isChangingViewBounds() ? this.getPanBounds() : undefined;
+      this.$emit('end-pan', panBounds);
+      this.inPanMode = false;
+    },
+    getPanBounds() {
+      const bounds = this.openmct.time.getBounds();
+      const deltaTime = bounds.end - bounds.start;
+      const deltaX = this.dragX - this.dragStartX;
+      const percX = deltaX / this.width;
+      const panStart = bounds.start - percX * deltaTime;
+
+      return {
+        start: parseInt(panStart, 10),
+        end: parseInt(panStart + deltaTime, 10)
+      };
+    },
+    startZoom() {
+      const x = this.scaleToBounds(this.dragStartX);
 
-        this.xAxis = d3Axis.axisTop();
-        this.dragging = false;
+      this.zoomStyle = {
+        left: `${this.dragStartX - this.left}px`
+      };
 
-        // draw x axis with labels. CSS is used to position them.
-        this.axisElement = vis.append("g")
-            .attr("class", "axis");
+      this.$emit('zoom-axis', {
+        start: x,
+        end: x
+      });
+    },
+    zoom() {
+      const zoomRange = this.getZoomRange();
+
+      this.zoomStyle = {
+        left: `${zoomRange.start - this.left}px`,
+        width: `${zoomRange.end - zoomRange.start}px`
+      };
+
+      this.$emit('zoom-axis', {
+        start: this.scaleToBounds(zoomRange.start),
+        end: this.scaleToBounds(zoomRange.end)
+      });
+    },
+    endZoom() {
+      let zoomBounds;
+      if (this.isChangingViewBounds()) {
+        const zoomRange = this.getZoomRange();
+        zoomBounds = {
+          start: this.scaleToBounds(zoomRange.start),
+          end: this.scaleToBounds(zoomRange.end)
+        };
+      }
 
-        this.setViewFromTimeSystem(this.openmct.time.timeSystem());
-        this.setAxisDimensions();
-        this.setScale();
+      this.zoomStyle = {};
+      this.$emit('end-zoom', zoomBounds);
+    },
+    getZoomRange() {
+      const leftBound = this.left;
+      const rightBound = this.left + this.width;
+
+      const zoomStart = this.dragX < leftBound ? leftBound : Math.min(this.dragX, this.dragStartX);
+
+      const zoomEnd = this.dragX > rightBound ? rightBound : Math.max(this.dragX, this.dragStartX);
 
-        //Respond to changes in conductor
-        this.openmct.time.on("timeSystem", this.setViewFromTimeSystem);
-        setInterval(this.resize, RESIZE_POLL_INTERVAL);
+      return {
+        start: zoomStart,
+        end: zoomEnd
+      };
     },
-    methods: {
-        setAxisDimensions() {
-            const axisHolder = this.$refs.axisHolder;
-            const rect = axisHolder.getBoundingClientRect();
-
-            this.left = Math.round(rect.left);
-            this.width = axisHolder.clientWidth;
-        },
-        setScale() {
-            if (!this.width) {
-                return;
-            }
-
-            let timeSystem = this.openmct.time.timeSystem();
-
-            if (timeSystem.isUTCBased) {
-                this.xScale.domain(
-                    [new Date(this.viewBounds.start), new Date(this.viewBounds.end)]
-                );
-            } else {
-                this.xScale.domain(
-                    [this.viewBounds.start, this.viewBounds.end]
-                );
-            }
-
-            this.xAxis.scale(this.xScale);
-
-            this.xScale.range([PADDING, this.width - PADDING * 2]);
-            this.axisElement.call(this.xAxis);
-
-            if (this.width > 1800) {
-                this.xAxis.ticks(this.width / PIXELS_PER_TICK_WIDE);
-            } else {
-                this.xAxis.ticks(this.width / PIXELS_PER_TICK);
-            }
-
-            this.msPerPixel = (this.viewBounds.end - this.viewBounds.start) / this.width;
-        },
-        setViewFromTimeSystem(timeSystem) {
-            //The D3 scale used depends on the type of time system as d3
-            // supports UTC out of the box.
-            if (timeSystem.isUTCBased) {
-                this.xScale = d3Scale.scaleUtc();
-            } else {
-                this.xScale = d3Scale.scaleLinear();
-            }
-
-            this.xAxis.scale(this.xScale);
-            this.xAxis.tickFormat(utcMultiTimeFormat);
-            this.axisElement.call(this.xAxis);
-            this.setScale();
-        },
-        getActiveFormatter() {
-            let timeSystem = this.openmct.time.timeSystem();
-
-            if (this.isFixed) {
-                return this.getFormatter(timeSystem.timeFormat);
-            } else {
-                return this.getFormatter(timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER);
-            }
-        },
-        getFormatter(key) {
-            return this.openmct.telemetry.getValueFormatter({
-                format: key
-            }).formatter;
-        },
-        dragStart($event) {
-            if (this.isFixed) {
-                this.dragStartX = $event.clientX;
-
-                if (this.altPressed) {
-                    this.inPanMode = true;
-                }
-
-                document.addEventListener('mousemove', this.drag);
-                document.addEventListener('mouseup', this.dragEnd, {
-                    once: true
-                });
-
-                if (this.inZoomMode) {
-                    this.startZoom();
-                }
-            }
-        },
-        drag($event) {
-            if (!this.dragging) {
-                this.dragging = true;
-
-                requestAnimationFrame(() => {
-                    this.dragX = $event.clientX;
-
-                    if (this.inPanMode) {
-                        this.pan();
-                    } else {
-                        this.zoom();
-                    }
-
-                    this.dragging = false;
-                });
-            }
-        },
-        dragEnd() {
-            if (this.inPanMode) {
-                this.endPan();
-            } else {
-                this.endZoom();
-            }
-
-            document.removeEventListener('mousemove', this.drag);
-            this.dragStartX = undefined;
-            this.dragX = undefined;
-        },
-        pan() {
-            const panBounds = this.getPanBounds();
-            this.$emit('panAxis', panBounds);
-        },
-        endPan() {
-            const panBounds = this.isChangingViewBounds()
-                ? this.getPanBounds()
-                : undefined;
-            this.$emit('endPan', panBounds);
-            this.inPanMode = false;
-        },
-        getPanBounds() {
-            const bounds = this.openmct.time.bounds();
-            const deltaTime = bounds.end - bounds.start;
-            const deltaX = this.dragX - this.dragStartX;
-            const percX = deltaX / this.width;
-            const panStart = bounds.start - percX * deltaTime;
-
-            return {
-                start: panStart,
-                end: panStart + deltaTime
-            };
-        },
-        startZoom() {
-            const x = this.scaleToBounds(this.dragStartX);
-
-            this.zoomStyle = {
-                left: `${this.dragStartX - this.left}px`
-            };
-
-            this.$emit('zoomAxis', {
-                start: x,
-                end: x
-            });
-        },
-        zoom() {
-            const zoomRange = this.getZoomRange();
-
-            this.zoomStyle = {
-                left: `${zoomRange.start - this.left}px`,
-                width: `${zoomRange.end - zoomRange.start}px`
-            };
-
-            this.$emit('zoomAxis', {
-                start: this.scaleToBounds(zoomRange.start),
-                end: this.scaleToBounds(zoomRange.end)
-            });
-        },
-        endZoom() {
-            let zoomBounds;
-            if (this.isChangingViewBounds()) {
-                const zoomRange = this.getZoomRange();
-                zoomBounds = {
-                    start: this.scaleToBounds(zoomRange.start),
-                    end: this.scaleToBounds(zoomRange.end)
-                };
-            }
-
-            this.zoomStyle = {};
-            this.$emit('endZoom', zoomBounds);
-        },
-        getZoomRange() {
-            const leftBound = this.left;
-            const rightBound = this.left + this.width;
-
-            const zoomStart = this.dragX < leftBound
-                ? leftBound
-                : Math.min(this.dragX, this.dragStartX);
-
-            const zoomEnd = this.dragX > rightBound
-                ? rightBound
-                : Math.max(this.dragX, this.dragStartX);
-
-            return {
-                start: zoomStart,
-                end: zoomEnd
-            };
-        },
-        scaleToBounds(value) {
-            const bounds = this.openmct.time.bounds();
-            const timeDelta = bounds.end - bounds.start;
-            const valueDelta = value - this.left;
-            const offset = valueDelta / this.width * timeDelta;
-
-            return bounds.start + offset;
-        },
-        isChangingViewBounds() {
-            return this.dragStartX && this.dragX && this.dragStartX !== this.dragX;
-        },
-        resize() {
-            if (this.$refs.axisHolder.clientWidth !== this.width) {
-                this.setAxisDimensions();
-                this.setScale();
-            }
-        }
-    }
+    scaleToBounds(value) {
+      const bounds = this.openmct.time.getBounds();
+      const timeDelta = bounds.end - bounds.start;
+      const valueDelta = value - this.left;
+      const offset = (valueDelta / this.width) * timeDelta;
 
+      return parseInt(bounds.start + offset, 10);
+    },
+    isChangingViewBounds() {
+      return this.dragStartX && this.dragX && this.dragStartX !== this.dragX;
+    },
+    resize() {
+      if (this.$refs.axisHolder.clientWidth !== this.width) {
+        this.setAxisDimensions();
+        this.setScale();
+      }
+    }
+  }
 };
 </script>
diff --git a/src/plugins/timeConductor/ConductorClock.vue b/src/plugins/timeConductor/ConductorClock.vue
new file mode 100644
index 00000000000..23f29d48951
--- /dev/null
+++ b/src/plugins/timeConductor/ConductorClock.vue
@@ -0,0 +1,138 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div v-if="readOnly === false" ref="clockButton" class="c-tc-input-popup__options">
+    <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
+      <button
+        class="c-button--menu js-clock-button"
+        :class="[buttonCssClass, selectedClock.cssClass]"
+        aria-label="Time Conductor Clock Menu"
+        @click.prevent.stop="showClocksMenu"
+      >
+        <span class="c-button__label">{{ selectedClock.name }}</span>
+      </button>
+    </div>
+  </div>
+  <div v-else class="c-compact-tc__setting-value__elem" aria-label="Time Conductor Clock">
+    {{ selectedClock.name }}
+  </div>
+</template>
+
+<script>
+import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
+import clockMixin from './clock-mixin.js';
+
+export default {
+  mixins: [clockMixin],
+  inject: {
+    openmct: 'openmct',
+    configuration: {
+      from: 'configuration',
+      default: undefined
+    }
+  },
+  props: {
+    readOnly: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    }
+  },
+  emits: ['clock-updated'],
+  data() {
+    const activeClock = this.getActiveClock();
+
+    return {
+      selectedClock: activeClock ? this.getClockMetadata(activeClock) : undefined,
+      clocks: []
+    };
+  },
+  mounted() {
+    this.loadClocks(this.configuration.menuOptions);
+    this.openmct.time.on(TIME_CONTEXT_EVENTS.clockChanged, this.setViewFromClock);
+  },
+  unmounted() {
+    this.openmct.time.off(TIME_CONTEXT_EVENTS.clockChanged, this.setViewFromClock);
+  },
+  methods: {
+    showClocksMenu() {
+      const elementBoundingClientRect = this.$refs.clockButton.getBoundingClientRect();
+      const x = elementBoundingClientRect.x;
+      const y = elementBoundingClientRect.y;
+
+      const menuOptions = {
+        menuClass: 'c-conductor__clock-menu c-super-menu--sm',
+        placement: this.openmct.menus.menuPlacement.TOP_RIGHT
+      };
+
+      this.dismiss = this.openmct.menus.showSuperMenu(x, y, this.clocks, menuOptions);
+    },
+    setClock(clockKey) {
+      const option = {
+        clockKey
+      };
+      let configuration = this.getMatchingConfig({
+        clock: clockKey,
+        timeSystem: this.openmct.time.getTimeSystem().key
+      });
+
+      if (configuration === undefined) {
+        configuration = this.getMatchingConfig({
+          clock: clockKey
+        });
+
+        option.timeSystem = configuration.timeSystem;
+        option.bounds = configuration.bounds;
+
+        // this.openmct.time.setTimeSystem(configuration.timeSystem, configuration.bounds);
+      }
+
+      const offsets = this.openmct.time.getClockOffsets() ?? configuration.clockOffsets;
+      option.offsets = offsets;
+
+      this.$emit('clock-updated', option);
+    },
+    getMatchingConfig(options) {
+      const matchers = {
+        clock(config) {
+          return options.clock === config.clock;
+        },
+        timeSystem(config) {
+          return options.timeSystem === config.timeSystem;
+        }
+      };
+
+      function configMatches(config) {
+        return Object.keys(options).reduce((match, option) => {
+          return match && matchers[option](config);
+        }, true);
+      }
+
+      return this.configuration.menuOptions.filter(configMatches)[0];
+    },
+    setViewFromClock(clock) {
+      this.selectedClock = this.getClockMetadata(clock);
+    }
+  }
+};
+</script>
diff --git a/src/plugins/timeConductor/ConductorComponent.vue b/src/plugins/timeConductor/ConductorComponent.vue
new file mode 100644
index 00000000000..8d0af59d2ca
--- /dev/null
+++ b/src/plugins/timeConductor/ConductorComponent.vue
@@ -0,0 +1,261 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div
+    ref="timeConductorOptionsHolder"
+    class="c-compact-tc is-expanded"
+    :class="[
+      { 'is-zooming': isZooming },
+      { 'is-panning': isPanning },
+      { 'alt-pressed': altPressed },
+      isFixed ? 'is-fixed-mode' : 'is-realtime-mode'
+    ]"
+  >
+    <ConductorModeIcon class="c-conductor__mode-icon" />
+    <div class="c-compact-tc__setting-value u-fade-truncate">
+      <conductor-mode :mode="mode" :read-only="true" />
+      <conductor-clock :read-only="true" />
+      <conductor-time-system :read-only="true" />
+    </div>
+    <conductor-inputs-fixed v-if="isFixed" :input-bounds="viewBounds" :read-only="true" />
+    <conductor-inputs-realtime v-else :input-bounds="viewBounds" :read-only="true" />
+    <conductor-axis
+      v-if="isFixed"
+      class="c-conductor__ticks"
+      :view-bounds="viewBounds"
+      :is-fixed="isFixed"
+      :alt-pressed="altPressed"
+      @end-pan="endPan"
+      @end-zoom="endZoom"
+      @pan-axis="pan"
+      @zoom-axis="zoom"
+    />
+    <div
+      role="button"
+      class="c-not-button c-not-button--compact c-compact-tc__gear icon-gear"
+      aria-label="Time Conductor Settings"
+    ></div>
+
+    <conductor-pop-up
+      v-if="showConductorPopup"
+      ref="conductorPopup"
+      :bottom="false"
+      :position-x="positionX"
+      :position-y="positionY"
+      :is-fixed="isFixed"
+      @popup-loaded="initializePopup"
+      @mode-updated="saveMode"
+      @clock-updated="saveClock"
+      @fixed-bounds-updated="saveFixedBounds"
+      @clock-offsets-updated="saveClockOffsets"
+      @dismiss="clearPopup"
+    />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+
+import {
+  FIXED_MODE_KEY,
+  MODES,
+  REALTIME_MODE_KEY,
+  TIME_CONTEXT_EVENTS
+} from '../../api/time/constants.js';
+import ConductorAxis from './ConductorAxis.vue';
+import ConductorClock from './ConductorClock.vue';
+import ConductorInputsFixed from './ConductorInputsFixed.vue';
+import ConductorInputsRealtime from './ConductorInputsRealtime.vue';
+import ConductorMode from './ConductorMode.vue';
+import ConductorModeIcon from './ConductorModeIcon.vue';
+import ConductorPopUp from './ConductorPopUp.vue';
+import conductorPopUpManager from './conductorPopUpManager.js';
+import ConductorTimeSystem from './ConductorTimeSystem.vue';
+
+const DEFAULT_DURATION_FORMATTER = 'duration';
+
+export default {
+  components: {
+    ConductorTimeSystem,
+    ConductorClock,
+    ConductorMode,
+    ConductorInputsRealtime,
+    ConductorInputsFixed,
+    ConductorAxis,
+    ConductorModeIcon,
+    ConductorPopUp
+  },
+  mixins: [conductorPopUpManager],
+  inject: ['openmct', 'configuration'],
+  data() {
+    const isFixed = this.openmct.time.isFixed();
+    const bounds = this.openmct.time.getBounds();
+    const offsets = this.openmct.time.getClockOffsets();
+    const timeSystem = this.openmct.time.getTimeSystem();
+    const timeFormatter = this.getFormatter(timeSystem.timeFormat);
+    const durationFormatter = this.getFormatter(
+      timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
+    );
+
+    return {
+      timeSystem,
+      timeFormatter,
+      durationFormatter,
+      offsets: {
+        start: offsets && durationFormatter.format(Math.abs(offsets.start)),
+        end: offsets && durationFormatter.format(Math.abs(offsets.end))
+      },
+      bounds: {
+        start: bounds.start,
+        end: bounds.end
+      },
+      formattedBounds: {
+        start: timeFormatter.format(bounds.start),
+        end: timeFormatter.format(bounds.end)
+      },
+      viewBounds: {
+        start: bounds.start,
+        end: bounds.end
+      },
+      isFixed,
+      isUTCBased: timeSystem.isUTCBased,
+      showDatePicker: false,
+      showConductorPopup: false,
+      altPressed: false,
+      isPanning: false,
+      isZooming: false
+    };
+  },
+  computed: {
+    mode() {
+      return this.isFixed ? FIXED_MODE_KEY : REALTIME_MODE_KEY;
+    }
+  },
+  mounted() {
+    document.addEventListener('keydown', this.handleKeyDown);
+    document.addEventListener('keyup', this.handleKeyUp);
+
+    this.setTimeSystem(this.copy(this.openmct.time.getTimeSystem()));
+
+    this.openmct.time.on(TIME_CONTEXT_EVENTS.boundsChanged, _.throttle(this.handleNewBounds, 300));
+    this.openmct.time.on(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
+    this.openmct.time.on(TIME_CONTEXT_EVENTS.modeChanged, this.setMode);
+  },
+  beforeUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
+    document.removeEventListener('keyup', this.handleKeyUp);
+
+    this.openmct.time.off(TIME_CONTEXT_EVENTS.boundsChanged, _.throttle(this.handleNewBounds, 300));
+    this.openmct.time.off(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
+    this.openmct.time.off(TIME_CONTEXT_EVENTS.modeChanged, this.setMode);
+  },
+  methods: {
+    handleNewBounds(bounds, isTick) {
+      if (this.openmct.time.isRealTime() || !isTick) {
+        this.setBounds(bounds);
+        this.setViewFromBounds(bounds);
+      }
+    },
+    setBounds(bounds) {
+      this.bounds = bounds;
+    },
+    handleKeyDown(event) {
+      if (event.key === 'Alt') {
+        this.altPressed = true;
+      }
+    },
+    handleKeyUp(event) {
+      if (event.key === 'Alt') {
+        this.altPressed = false;
+      }
+    },
+    pan(bounds) {
+      this.isPanning = true;
+      this.setViewFromBounds(bounds);
+    },
+    endPan(bounds) {
+      this.isPanning = false;
+      if (bounds) {
+        this.openmct.time.setBounds(bounds);
+      }
+    },
+    zoom(bounds) {
+      if (isNaN(bounds.start) || isNaN(bounds.end)) {
+        this.isZooming = false;
+      } else {
+        this.isZooming = true;
+        this.formattedBounds.start = this.timeFormatter.format(bounds.start);
+        this.formattedBounds.end = this.timeFormatter.format(bounds.end);
+      }
+    },
+    endZoom(bounds) {
+      this.isZooming = false;
+      if (bounds) {
+        this.openmct.time.setBounds(bounds);
+      } else {
+        this.setViewFromBounds(this.bounds);
+      }
+    },
+    setTimeSystem(timeSystem) {
+      this.timeSystem = timeSystem;
+      this.timeFormatter = this.getFormatter(timeSystem.timeFormat);
+      this.durationFormatter = this.getFormatter(
+        timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
+      );
+      this.isUTCBased = timeSystem.isUTCBased;
+    },
+    setMode() {
+      this.isFixed = this.openmct.time.isFixed();
+    },
+    setViewFromBounds(bounds) {
+      this.formattedBounds.start = this.timeFormatter.format(bounds.start);
+      this.formattedBounds.end = this.timeFormatter.format(bounds.end);
+      this.viewBounds.start = bounds.start;
+      this.viewBounds.end = bounds.end;
+    },
+    getFormatter(key) {
+      return this.openmct.telemetry.getValueFormatter({
+        format: key
+      }).formatter;
+    },
+    getBoundsForMode(mode) {
+      const isRealTime = mode === MODES.realtime;
+      return isRealTime ? this.openmct.time.getClockOffsets() : this.openmct.time.getBounds();
+    },
+    saveFixedBounds(bounds) {
+      this.openmct.time.setBounds(bounds);
+    },
+    saveClockOffsets(offsets) {
+      this.openmct.time.setClockOffsets(offsets);
+    },
+    saveClock(clockOptions) {
+      this.openmct.time.setClock(clockOptions.clockKey);
+    },
+    saveMode(mode) {
+      this.openmct.time.setMode(mode, this.getBoundsForMode(mode));
+    },
+    copy(object) {
+      return JSON.parse(JSON.stringify(object));
+    }
+  }
+};
+</script>
diff --git a/src/plugins/timeConductor/ConductorHistory.vue b/src/plugins/timeConductor/ConductorHistory.vue
index f98407ec469..b7764fb5c03 100644
--- a/src/plugins/timeConductor/ConductorHistory.vue
+++ b/src/plugins/timeConductor/ConductorHistory.vue
@@ -1,292 +1,304 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div ref="historyButton"
-     class="c-ctrl-wrapper c-ctrl-wrapper--menus-up"
->
+  <div ref="historyButton" class="c-ctrl-wrapper c-ctrl-wrapper--menus-up">
     <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
-        <button
-            class="c-button--menu c-history-button icon-history"
-            @click.prevent.stop="showHistoryMenu"
-        >
-            <span class="c-button__label">History</span>
-        </button>
+      <button
+        aria-label="Time Conductor History"
+        class="c-button--menu c-history-button icon-history"
+        :class="buttonCssClass"
+        @click.prevent.stop="showHistoryMenu"
+      >
+        <span class="c-button__label">History</span>
+      </button>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
 const DEFAULT_DURATION_FORMATTER = 'duration';
 const LOCAL_STORAGE_HISTORY_KEY_FIXED = 'tcHistory';
 const LOCAL_STORAGE_HISTORY_KEY_REALTIME = 'tcHistoryRealtime';
-const DEFAULT_RECORDS = 10;
+const DEFAULT_RECORDS_LENGTH = 10;
+
+import { millisecondsToDHMS } from 'utils/duration';
 
-import { getDuration } from "utils/duration";
+import { REALTIME_MODE_KEY, TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
+import UTCTimeFormat from '../utcTimeSystem/UTCTimeFormat.js';
 
 export default {
-    inject: ['openmct', 'configuration'],
-    props: {
-        bounds: {
-            type: Object,
-            required: true
-        },
-        offsets: {
-            type: Object,
-            required: false,
-            default: () => {}
-        },
-        timeSystem: {
-            type: Object,
-            required: true
-        },
-        mode: {
-            type: String,
-            required: true
+  inject: ['openmct', 'configuration'],
+  props: {
+    buttonCssClass: {
+      type: String,
+      required: false,
+      default() {
+        return '';
+      }
+    }
+  },
+  data() {
+    const mode = this.openmct.time.getMode();
+
+    return {
+      /**
+       * previous bounds entries available for easy re-use
+       * @realtimeHistory array of timespans
+       * @timespans {start, end} number representing timestamp
+       */
+      realtimeHistory: {},
+      /**
+       * previous bounds entries available for easy re-use
+       * @fixedHistory array of timespans
+       * @timespans {start, end} number representing timestamp
+       */
+      mode,
+      currentHistory: mode + 'History',
+      fixedHistory: {},
+      presets: [],
+      timeSystem: this.openmct.time.getTimeSystem(),
+      isFixed: this.openmct.time.isFixed()
+    };
+  },
+  computed: {
+    historyForCurrentTimeSystem() {
+      const history = this[this.currentHistory][this.timeSystem.key];
+
+      return history;
+    },
+    storageKey() {
+      let key = LOCAL_STORAGE_HISTORY_KEY_FIXED;
+      if (this.mode === REALTIME_MODE_KEY) {
+        key = LOCAL_STORAGE_HISTORY_KEY_REALTIME;
+      }
+
+      return key;
+    }
+  },
+  mounted() {
+    this.getHistoryFromLocalStorage();
+    this.loadConfiguration();
+
+    this.openmct.time.on(TIME_CONTEXT_EVENTS.boundsChanged, this.addTimespan);
+    this.openmct.time.on(TIME_CONTEXT_EVENTS.clockOffsetsChanged, this.addTimespan);
+    this.openmct.time.on(TIME_CONTEXT_EVENTS.timeSystemChanged, this.updateTimeSystem);
+    this.openmct.time.on(TIME_CONTEXT_EVENTS.modeChanged, this.updateMode);
+  },
+  beforeUnmount() {
+    this.openmct.time.off(TIME_CONTEXT_EVENTS.boundsChanged, this.addTimespan);
+    this.openmct.time.off(TIME_CONTEXT_EVENTS.clockOffsetsChanged, this.addTimespan);
+    this.openmct.time.off(TIME_CONTEXT_EVENTS.timeSystemChanged, this.updateTimeSystem);
+    this.openmct.time.off(TIME_CONTEXT_EVENTS.modeChanged, this.updateMode);
+  },
+  methods: {
+    getHistoryMenuItems() {
+      const descriptionDateFormat = 'YYYY-MM-DD HH:mm:ss.SSS';
+      const history = this.historyForCurrentTimeSystem.map((timespan) => {
+        let name;
+        const startTime = this.formatTime(timespan.start);
+        const description = `${this.formatTime(
+          timespan.start,
+          descriptionDateFormat
+        )} - ${this.formatTime(timespan.end, descriptionDateFormat)}`;
+
+        if (this.timeSystem.isUTCBased && !this.openmct.time.isRealTime()) {
+          name = `${startTime} ${millisecondsToDHMS(timespan.end - timespan.start)}`;
+        } else {
+          name = description;
         }
+
+        return {
+          cssClass: 'icon-history',
+          name,
+          description,
+          onItemClicked: () => this.selectTimespan(timespan)
+        };
+      });
+
+      history.unshift({
+        cssClass: 'c-menu__section-hint',
+        description: 'Past timeframes, ordered by latest first',
+        isDisabled: true,
+        name: 'Past timeframes, ordered by latest first',
+        onItemClicked: () => {}
+      });
+
+      return history;
     },
-    data() {
+    getPresetMenuItems() {
+      return this.presets.map((preset) => {
         return {
-            /**
-             * previous bounds entries available for easy re-use
-             * @realtimeHistory array of timespans
-             * @timespans {start, end} number representing timestamp
-             */
-            realtimeHistory: {},
-            /**
-             * previous bounds entries available for easy re-use
-             * @fixedHistory array of timespans
-             * @timespans {start, end} number representing timestamp
-             */
-            fixedHistory: {},
-            presets: []
+          cssClass: 'icon-clock',
+          name: preset.label,
+          description: preset.label,
+          onItemClicked: () => this.selectPresetBounds(preset.bounds)
         };
+      });
     },
-    computed: {
-        currentHistory() {
-            return this.mode + 'History';
-        },
-        isFixed() {
-            return this.openmct.time.clock() === undefined;
-        },
-        historyForCurrentTimeSystem() {
-            const history = this[this.currentHistory][this.timeSystem.key];
-
-            return history;
-        },
-        storageKey() {
-            let key = LOCAL_STORAGE_HISTORY_KEY_FIXED;
-            if (this.mode !== 'fixed') {
-                key = LOCAL_STORAGE_HISTORY_KEY_REALTIME;
-            }
-
-            return key;
-        }
+    getHistoryFromLocalStorage() {
+      const localStorageHistory = localStorage.getItem(this.storageKey);
+      const history = localStorageHistory ? JSON.parse(localStorageHistory) : undefined;
+      this[this.currentHistory] = history;
+
+      this.initializeHistoryIfNoHistory();
     },
-    watch: {
-        bounds: {
-            handler() {
-                // only for fixed time since we track offsets for realtime
-                if (this.isFixed) {
-                    this.addTimespan();
-                }
-            },
-            deep: true
-        },
-        offsets: {
-            handler() {
-                this.addTimespan();
-            },
-            deep: true
-        },
-        timeSystem: {
-            handler(ts) {
-                this.loadConfiguration();
-                this.addTimespan();
-            },
-            deep: true
-        },
-        mode: function () {
-            this.getHistoryFromLocalStorage();
-            this.initializeHistoryIfNoHistory();
-            this.loadConfiguration();
-        }
+    initializeHistoryIfNoHistory() {
+      if (!this[this.currentHistory]) {
+        this[this.currentHistory] = {};
+        this[this.currentHistory][this.timeSystem.key] = [];
+        this.persistHistoryToLocalStorage();
+      }
+    },
+    persistHistoryToLocalStorage() {
+      localStorage.setItem(this.storageKey, JSON.stringify(this[this.currentHistory]));
+    },
+    updateMode() {
+      this.mode = this.openmct.time.getMode();
+      this.currentHistory = this.mode + 'History';
+      this.loadConfiguration();
+      this.getHistoryFromLocalStorage();
     },
-    mounted() {
-        this.getHistoryFromLocalStorage();
-        this.initializeHistoryIfNoHistory();
+    updateTimeSystem(timeSystem) {
+      this.timeSystem = timeSystem;
+      this.loadConfiguration();
+      this.getHistoryFromLocalStorage();
     },
-    methods: {
-        getHistoryMenuItems() {
-            const history = this.historyForCurrentTimeSystem.map(timespan => {
-                let name;
-                let startTime = this.formatTime(timespan.start);
-                let description = `${startTime} - ${this.formatTime(timespan.end)}`;
-
-                if (this.timeSystem.isUTCBased && !this.openmct.time.clock()) {
-                    name = `${startTime} ${getDuration(timespan.end - timespan.start)}`;
-                } else {
-                    name = description;
-                }
-
-                return {
-                    cssClass: 'icon-history',
-                    name,
-                    description,
-                    onItemClicked: () => this.selectTimespan(timespan)
-                };
-            });
-
-            history.unshift({
-                cssClass: 'c-menu__section-hint',
-                description: 'Past timeframes, ordered by latest first',
-                isDisabled: true,
-                name: 'Past timeframes, ordered by latest first',
-                onItemClicked: () => {}
-            });
-
-            return history;
-        },
-        getPresetMenuItems() {
-            return this.presets.map(preset => {
-                return {
-                    cssClass: 'icon-clock',
-                    name: preset.label,
-                    description: preset.label,
-                    onItemClicked: () => this.selectPresetBounds(preset.bounds)
-                };
-            });
-        },
-        getHistoryFromLocalStorage() {
-            const localStorageHistory = localStorage.getItem(this.storageKey);
-            const history = localStorageHistory ? JSON.parse(localStorageHistory) : undefined;
-            this[this.currentHistory] = history;
-        },
-        initializeHistoryIfNoHistory() {
-            if (!this[this.currentHistory]) {
-                this[this.currentHistory] = {};
-                this.persistHistoryToLocalStorage();
-            }
-        },
-        persistHistoryToLocalStorage() {
-            localStorage.setItem(this.storageKey, JSON.stringify(this[this.currentHistory]));
-        },
-        addTimespan() {
-            const key = this.timeSystem.key;
-            let [...currentHistory] = this[this.currentHistory][key] || [];
-            const timespan = {
-                start: this.isFixed ? this.bounds.start : this.offsets.start,
-                end: this.isFixed ? this.bounds.end : this.offsets.end
-            };
-
-            // no dupes
-            currentHistory = currentHistory.filter(ts => !(ts.start === timespan.start && ts.end === timespan.end));
-            currentHistory.unshift(timespan); // add to front
-
-            if (currentHistory.length > this.records) {
-                currentHistory.length = this.records;
-            }
-
-            this.$set(this[this.currentHistory], key, currentHistory);
-            this.persistHistoryToLocalStorage();
-        },
-        selectTimespan(timespan) {
-            if (this.isFixed) {
-                this.openmct.time.bounds(timespan);
-            } else {
-                this.openmct.time.clockOffsets(timespan);
-            }
-        },
-        selectPresetBounds(bounds) {
-            const start = typeof bounds.start === 'function' ? bounds.start() : bounds.start;
-            const end = typeof bounds.end === 'function' ? bounds.end() : bounds.end;
-
-            this.selectTimespan({
-                start,
-                end
-            });
-        },
-        loadConfiguration() {
-            const configurations = this.configuration.menuOptions
-                .filter(option => option.timeSystem === this.timeSystem.key);
-
-            this.presets = this.loadPresets(configurations);
-            this.records = this.loadRecords(configurations);
-        },
-        loadPresets(configurations) {
-            const configuration = configurations.find(option => {
-                return option.presets && option.name.toLowerCase() === this.mode;
-            });
-            const presets = configuration ? configuration.presets : [];
-
-            return presets;
-        },
-        loadRecords(configurations) {
-            const configuration = configurations.find(option => option.records);
-            const records = configuration ? configuration.records : DEFAULT_RECORDS;
-
-            return records;
-        },
-        formatTime(time) {
-            let format = this.timeSystem.timeFormat;
-            let isNegativeOffset = false;
-
-            if (!this.isFixed) {
-                if (time < 0) {
-                    isNegativeOffset = true;
-                }
-
-                time = Math.abs(time);
-
-                format = this.timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER;
-            }
-
-            const formatter = this.openmct.telemetry.getValueFormatter({
-                format: format
-            }).formatter;
-
-            return (isNegativeOffset ? '-' : '') + formatter.format(time);
-        },
-        showHistoryMenu() {
-            const elementBoundingClientRect = this.$refs.historyButton.getBoundingClientRect();
-            const x = elementBoundingClientRect.x;
-            const y = elementBoundingClientRect.y;
-
-            const menuOptions = {
-                menuClass: 'c-conductor__history-menu',
-                placement: this.openmct.menus.menuPlacement.TOP_RIGHT
-            };
-
-            const menuActions = [];
-
-            const presets = this.getPresetMenuItems();
-            if (presets.length) {
-                menuActions.push(presets);
-            }
-
-            const history = this.getHistoryMenuItems();
-            menuActions.push(history);
-
-            this.openmct.menus.showMenu(x, y, menuActions, menuOptions);
+    addTimespan(bounds, isTick) {
+      if (isTick) {
+        return;
+      }
+
+      const key = this.timeSystem.key;
+      const isFixed = this.openmct.time.isFixed();
+      let [...currentHistory] = this.historyForCurrentTimeSystem || [];
+      const timespan = {
+        start: isFixed ? bounds.start : this.openmct.time.getClockOffsets().start,
+        end: isFixed ? bounds.end : this.openmct.time.getClockOffsets().end
+      };
+
+      // no dupes
+      currentHistory = currentHistory.filter(
+        (ts) => !(ts.start === timespan.start && ts.end === timespan.end)
+      );
+      currentHistory.unshift(timespan); // add to front
+
+      if (currentHistory.length > this.MAX_RECORDS_LENGTH) {
+        currentHistory.length = this.MAX_RECORDS_LENGTH;
+      }
+
+      this[this.currentHistory][key] = currentHistory;
+      this.persistHistoryToLocalStorage();
+    },
+    selectTimespan(timespan) {
+      if (this.openmct.time.isFixed()) {
+        this.openmct.time.setBounds(timespan);
+      } else {
+        this.openmct.time.setClockOffsets(timespan);
+      }
+    },
+    selectPresetBounds(bounds) {
+      const start = typeof bounds.start === 'function' ? bounds.start() : bounds.start;
+      const end = typeof bounds.end === 'function' ? bounds.end() : bounds.end;
+
+      this.selectTimespan({
+        start,
+        end
+      });
+    },
+    loadConfiguration() {
+      const configurations = this.configuration.menuOptions.filter(
+        (option) => option.timeSystem === this.timeSystem.key
+      );
+
+      this.presets = this.loadPresets(configurations);
+      this.MAX_RECORDS_LENGTH = this.loadRecords(configurations);
+    },
+    loadPresets(configurations) {
+      const configuration = configurations.find((option) => {
+        return option.presets && option.name.toLowerCase() === this.mode;
+      });
+      const presets = configuration ? configuration.presets : [];
+
+      return presets;
+    },
+    loadRecords(configurations) {
+      const configuration = configurations.find((option) => option.records);
+      const maxRecordsLength = configuration ? configuration.records : DEFAULT_RECORDS_LENGTH;
+
+      return maxRecordsLength;
+    },
+    formatTime(time, utcDateFormat) {
+      let format = this.timeSystem.timeFormat;
+      let isNegativeOffset = false;
+
+      if (!this.openmct.time.isFixed()) {
+        if (time < 0) {
+          isNegativeOffset = true;
         }
+
+        time = Math.abs(time);
+
+        format = this.timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER;
+      }
+
+      const formatter = this.openmct.telemetry.getValueFormatter({
+        format: format
+      }).formatter;
+
+      let formattedDate;
+
+      if (formatter instanceof UTCTimeFormat) {
+        const formatString = formatter.isValidFormatString(utcDateFormat)
+          ? utcDateFormat
+          : formatter.DATE_FORMATS.PRECISION_SECONDS;
+        formattedDate = formatter.format(time, formatString);
+      } else {
+        formattedDate = formatter.format(time);
+      }
+
+      return (isNegativeOffset ? '-' : '') + formattedDate;
+    },
+    showHistoryMenu() {
+      const elementBoundingClientRect = this.$refs.historyButton.getBoundingClientRect();
+      const x = elementBoundingClientRect.x;
+      const y = elementBoundingClientRect.y;
+
+      const menuOptions = {
+        menuClass: 'c-conductor__history-menu',
+        placement: this.openmct.menus.menuPlacement.TOP_RIGHT
+      };
+
+      const menuActions = [];
+
+      const presets = this.getPresetMenuItems();
+      if (presets.length) {
+        menuActions.push(presets);
+      }
+
+      const history = this.getHistoryMenuItems();
+      menuActions.push(history);
+
+      this.openmct.menus.showMenu(x, y, menuActions, menuOptions);
     }
+  }
 };
 </script>
diff --git a/src/plugins/timeConductor/ConductorInputsFixed.vue b/src/plugins/timeConductor/ConductorInputsFixed.vue
new file mode 100644
index 00000000000..beec6271083
--- /dev/null
+++ b/src/plugins/timeConductor/ConductorInputsFixed.vue
@@ -0,0 +1,180 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <time-popup-fixed
+    v-if="readOnly === false"
+    :input-bounds="bounds"
+    :input-time-system="timeSystem"
+    @focus="$event.target.select()"
+    @update="setBoundsFromView"
+    @dismiss="dismiss"
+  />
+  <div v-else class="c-compact-tc__setting-wrapper">
+    <div
+      class="c-compact-tc__setting-value u-fade-truncate--lg --no-sep"
+      :title="`Start bounds: ${formattedBounds.start}`"
+      aria-label="Start bounds"
+    >
+      {{ formattedBounds.start }}
+    </div>
+    <div class="c-compact-tc__bounds__start-end-sep icon-arrows-right-left"></div>
+    <div
+      class="c-compact-tc__setting-value u-fade-truncate--lg --no-sep"
+      :title="`End bounds: ${formattedBounds.end}`"
+      aria-label="End bounds"
+    >
+      {{ formattedBounds.end }}
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+
+import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
+import TimePopupFixed from './TimePopupFixed.vue';
+
+export default {
+  components: {
+    TimePopupFixed
+  },
+  inject: ['openmct'],
+  props: {
+    inputBounds: {
+      type: Object,
+      default() {
+        return undefined;
+      }
+    },
+    objectPath: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    readOnly: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    compact: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    }
+  },
+  emits: ['bounds-updated', 'dismiss-inputs-fixed'],
+  data() {
+    const timeSystem = this.openmct.time.getTimeSystem();
+    const timeFormatter = this.getFormatter(timeSystem.timeFormat);
+    let bounds = this.inputBounds || this.openmct.time.getBounds();
+
+    return {
+      timeSystem,
+      timeFormatter,
+      bounds: {
+        start: bounds.start,
+        end: bounds.end
+      },
+      formattedBounds: {
+        start: timeFormatter.format(bounds.start),
+        end: timeFormatter.format(bounds.end)
+      },
+      isUTCBased: timeSystem.isUTCBased
+    };
+  },
+  watch: {
+    objectPath: {
+      handler(newPath, oldPath) {
+        if (newPath === oldPath) {
+          return;
+        }
+
+        this.setTimeContext();
+      },
+      deep: true
+    },
+    inputBounds: {
+      handler(newBounds) {
+        this.handleNewBounds(newBounds);
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.handleNewBounds = _.throttle(this.handleNewBounds, 300);
+    this.setTimeSystem(JSON.parse(JSON.stringify(this.openmct.time.getTimeSystem())));
+    this.openmct.time.on(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
+    this.setTimeContext();
+  },
+  beforeUnmount() {
+    this.openmct.time.off(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
+    this.stopFollowingTimeContext();
+  },
+  methods: {
+    setTimeContext() {
+      this.stopFollowingTimeContext();
+      this.timeContext = this.openmct.time.getContextForView(this.objectPath);
+
+      this.handleNewBounds(this.timeContext.getBounds());
+      this.timeContext.on(TIME_CONTEXT_EVENTS.boundsChanged, this.handleNewBounds);
+    },
+    stopFollowingTimeContext() {
+      if (this.timeContext) {
+        this.timeContext.off(TIME_CONTEXT_EVENTS.boundsChanged, this.handleNewBounds);
+      }
+    },
+    handleNewBounds(bounds) {
+      this.setBounds(bounds);
+      this.setViewFromBounds(bounds);
+    },
+    setBounds(bounds) {
+      this.bounds = bounds;
+    },
+    setViewFromBounds(bounds) {
+      this.formattedBounds.start = this.timeFormatter.format(bounds.start);
+      this.formattedBounds.end = this.timeFormatter.format(bounds.end);
+    },
+    setTimeSystem(timeSystem) {
+      this.timeSystem = timeSystem;
+      this.timeFormatter = this.getFormatter(timeSystem.timeFormat);
+      this.isUTCBased = timeSystem.isUTCBased;
+    },
+    getFormatter(key) {
+      return this.openmct.telemetry.getValueFormatter({
+        format: key
+      }).formatter;
+    },
+    setBoundsFromView(bounds) {
+      this.$emit('bounds-updated', {
+        start: bounds.start,
+        end: bounds.end
+      });
+    },
+    dismiss() {
+      this.$emit('dismiss-inputs-fixed');
+    }
+  }
+};
+</script>
diff --git a/src/plugins/timeConductor/ConductorInputsRealtime.vue b/src/plugins/timeConductor/ConductorInputsRealtime.vue
new file mode 100644
index 00000000000..930bbd67121
--- /dev/null
+++ b/src/plugins/timeConductor/ConductorInputsRealtime.vue
@@ -0,0 +1,260 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <time-popup-realtime
+    v-if="readOnly === false"
+    :offsets="offsets"
+    @focus="$event.target.select()"
+    @update="timePopUpdate"
+    @dismiss="dismiss"
+  />
+  <div v-else class="c-compact-tc__setting-wrapper">
+    <div
+      v-if="!compact"
+      class="c-compact-tc__setting-value icon-minus u-fade-truncate--lg --no-sep"
+      :aria-label="`Start offset: ${offsets.start}`"
+      :title="`Start offset: ${offsets.start}`"
+    >
+      {{ offsets.start }}
+    </div>
+    <div v-if="!compact" class="c-compact-tc__bounds__start-end-sep icon-arrows-right-left"></div>
+    <div
+      v-if="!compact"
+      class="c-compact-tc__setting-value icon-plus u-fade-truncate--lg"
+      :class="{ '--no-sep': compact }"
+      :aria-label="`End offset: ${offsets.end}`"
+      :title="`End offset: ${offsets.end}`"
+    >
+      {{ offsets.end }}
+    </div>
+    <div
+      class="c-compact-tc__setting-value icon-clock c-compact-tc__current-update u-fade-truncate--lg --no-sep"
+      aria-label="Last update"
+      title="Last update"
+    >
+      {{ formattedCurrentValue }}
+    </div>
+    <div class="u-flex-spreader"></div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+
+import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
+import TimePopupRealtime from './TimePopupRealtime.vue';
+
+const DEFAULT_DURATION_FORMATTER = 'duration';
+
+export default {
+  components: {
+    TimePopupRealtime
+  },
+  inject: ['openmct'],
+  props: {
+    objectPath: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    inputBounds: {
+      type: Object,
+      default() {
+        return undefined;
+      }
+    },
+    readOnly: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    compact: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    }
+  },
+  emits: ['offsets-updated', 'dismiss-inputs-realtime'],
+  data() {
+    const timeSystem = this.openmct.time.getTimeSystem();
+    const durationFormatter = this.getFormatter(
+      timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
+    );
+    const timeFormatter = this.getFormatter(timeSystem.timeFormat);
+    const bounds = this.bounds ?? this.openmct.time.getBounds();
+    const offsets = this.offsets ?? this.openmct.time.getClockOffsets();
+    const currentValue = this.openmct.time.getClock()?.currentValue();
+
+    return {
+      showTCInputStart: false,
+      showTCInputEnd: false,
+      durationFormatter,
+      timeFormatter,
+      bounds: {
+        start: bounds.start,
+        end: bounds.end
+      },
+      offsets: {
+        start: offsets && durationFormatter.format(Math.abs(offsets.start)),
+        end: offsets && durationFormatter.format(Math.abs(offsets.end))
+      },
+      formattedBounds: {
+        start: timeFormatter.format(bounds.start),
+        end: timeFormatter.format(bounds.end)
+      },
+      currentValue,
+      formattedCurrentValue: timeFormatter.format(currentValue),
+      isUTCBased: timeSystem.isUTCBased
+    };
+  },
+  watch: {
+    objectPath: {
+      handler(newPath, oldPath) {
+        if (newPath === oldPath) {
+          return;
+        }
+
+        this.setTimeContext();
+      },
+      deep: true
+    },
+    inputBounds: {
+      handler(newBounds) {
+        this.handleNewBounds(newBounds);
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.handleNewBounds = _.throttle(this.handleNewBounds, 300);
+    this.setTimeSystem(this.copy(this.openmct.time.getTimeSystem()));
+    this.openmct.time.on(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
+    this.setTimeContext();
+  },
+  beforeUnmount() {
+    this.openmct.time.off(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
+    this.stopFollowingTime();
+  },
+  methods: {
+    followTime() {
+      const bounds = this.timeContext
+        ? this.timeContext.getBounds()
+        : this.openmct.time.getBounds();
+      const offsets = this.timeContext
+        ? this.timeContext.getClockOffsets()
+        : this.openmct.time.getClockOffsets();
+
+      this.handleNewBounds(bounds);
+      this.setViewFromOffsets(offsets);
+
+      if (this.timeContext) {
+        this.timeContext.on(TIME_CONTEXT_EVENTS.boundsChanged, this.handleNewBounds);
+        this.timeContext.on(TIME_CONTEXT_EVENTS.clockOffsetsChanged, this.setViewFromOffsets);
+      } else {
+        this.openmct.time.on(TIME_CONTEXT_EVENTS.boundsChanged, this.handleNewBounds);
+        this.openmct.time.on(TIME_CONTEXT_EVENTS.clockOffsetsChanged, this.setViewFromOffsets);
+      }
+    },
+    stopFollowingTime() {
+      if (this.timeContext) {
+        this.timeContext.off(TIME_CONTEXT_EVENTS.boundsChanged, this.handleNewBounds);
+        this.timeContext.off(TIME_CONTEXT_EVENTS.clockOffsetsChanged, this.setViewFromOffsets);
+      } else {
+        this.openmct.time.off(TIME_CONTEXT_EVENTS.boundsChanged, this.handleNewBounds);
+        this.openmct.time.off(TIME_CONTEXT_EVENTS.clockOffsetsChanged, this.setViewFromOffsets);
+      }
+    },
+    setTimeContext() {
+      this.stopFollowingTime();
+      this.timeContext = this.openmct.time.getContextForView(this.objectPath);
+      this.followTime();
+    },
+    handleNewBounds(bounds, isTick) {
+      if (this.timeContext.isRealTime() || !isTick) {
+        this.setBounds(bounds);
+        this.setViewFromBounds(bounds);
+        this.updateCurrentValue();
+      }
+    },
+    setViewFromOffsets(offsets) {
+      if (offsets) {
+        this.offsets.start = this.durationFormatter.format(Math.abs(offsets.start));
+        this.offsets.end = this.durationFormatter.format(Math.abs(offsets.end));
+      }
+    },
+    setBounds(bounds) {
+      this.bounds = bounds;
+    },
+    setViewFromBounds(bounds) {
+      this.formattedBounds.start = this.timeFormatter.format(bounds.start);
+      this.formattedBounds.end = this.timeFormatter.format(bounds.end);
+    },
+    updateCurrentValue() {
+      const currentValue = this.timeContext.getClock().currentValue();
+
+      if (currentValue !== undefined) {
+        this.setCurrentValue(currentValue);
+      }
+    },
+    setCurrentValue(value) {
+      this.currentValue = value;
+      this.formattedCurrentValue = this.timeFormatter.format(value);
+    },
+    setTimeSystem(timeSystem) {
+      this.timeSystem = timeSystem;
+      this.timeFormatter = this.getFormatter(timeSystem.timeFormat);
+      this.durationFormatter = this.getFormatter(
+        timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
+      );
+      this.isUTCBased = timeSystem.isUTCBased;
+    },
+    getFormatter(key) {
+      return this.openmct.telemetry.getValueFormatter({
+        format: key
+      }).formatter;
+    },
+    timePopUpdate({ start, end }) {
+      this.offsets.start = [start.hours, start.minutes, start.seconds].join(':');
+      this.offsets.end = [end.hours, end.minutes, end.seconds].join(':');
+      this.setOffsetsFromView();
+    },
+    setOffsetsFromView() {
+      let startOffset = 0 - this.durationFormatter.parse(this.offsets.start);
+      let endOffset = this.durationFormatter.parse(this.offsets.end);
+
+      this.$emit('offsets-updated', {
+        start: startOffset,
+        end: endOffset
+      });
+    },
+    dismiss() {
+      this.$emit('dismiss-inputs-realtime');
+    },
+    copy(object) {
+      return JSON.parse(JSON.stringify(object));
+    }
+  }
+};
+</script>
diff --git a/src/plugins/timeConductor/ConductorMode.vue b/src/plugins/timeConductor/ConductorMode.vue
index 54bb9bcd8da..e198406fc5f 100644
--- a/src/plugins/timeConductor/ConductorMode.vue
+++ b/src/plugins/timeConductor/ConductorMode.vue
@@ -1,178 +1,109 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div ref="modeButton"
-     class="c-ctrl-wrapper c-ctrl-wrapper--menus-up"
->
+  <div v-if="readOnly === false" ref="modeButton" class="c-tc-input-popup__options">
     <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
-        <button
-            class="c-button--menu c-mode-button"
-            @click.prevent.stop="showModesMenu"
-        >
-            <span class="c-button__label">{{ selectedMode.name }}</span>
-        </button>
+      <button
+        class="c-button--menu js-mode-button"
+        :class="[buttonCssClass, selectedMode.cssClass]"
+        aria-label="Time Conductor Mode Menu"
+        @click.prevent.stop="showModesMenu"
+      >
+        <span class="c-button__label">{{ selectedMode.name }}</span>
+      </button>
     </div>
-</div>
+  </div>
+  <div
+    v-else
+    role="button"
+    class="c-compact-tc__setting-value__elem"
+    aria-label="Time Conductor Mode"
+  >
+    {{ selectedMode.name }}
+  </div>
 </template>
 
 <script>
-import toggleMixin from '../../ui/mixins/toggle-mixin';
+import modeMixin from './mode-mixin.js';
 
-export default {
-    mixins: [toggleMixin],
-    inject: ['openmct', 'configuration'],
-    data: function () {
-        let activeClock = this.openmct.time.clock();
-        if (activeClock !== undefined) {
-            //Create copy of active clock so the time API does not get reactified.
-            activeClock = Object.create(activeClock);
-        }
+const TEST_IDS = true;
 
-        return {
-            selectedMode: this.getModeOptionForClock(activeClock),
-            selectedTimeSystem: JSON.parse(JSON.stringify(this.openmct.time.timeSystem())),
-            modes: [],
-            hoveredMode: {}
-        };
+export default {
+  mixins: [modeMixin],
+  inject: ['openmct', 'configuration'],
+  props: {
+    mode: {
+      type: String,
+      default() {
+        return undefined;
+      }
     },
-    mounted: function () {
-        this.loadClocksFromConfiguration();
-
-        this.openmct.time.on('clock', this.setViewFromClock);
+    readOnly: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    }
+  },
+  emits: ['mode-updated'],
+  data() {
+    const mode = this.openmct.time.getMode();
+
+    return {
+      selectedMode: this.getModeMetadata(mode, TEST_IDS),
+      modes: []
+    };
+  },
+  watch: {
+    mode: {
+      handler(newMode) {
+        this.setViewFromMode(newMode);
+      }
+    }
+  },
+  mounted() {
+    this.loadModes();
+  },
+  methods: {
+    showModesMenu() {
+      const elementBoundingClientRect = this.$refs.modeButton.getBoundingClientRect();
+      const x = elementBoundingClientRect.x;
+      const y = elementBoundingClientRect.y;
+
+      const menuOptions = {
+        menuClass: 'c-conductor__mode-menu c-super-menu--sm',
+        placement: this.openmct.menus.menuPlacement.TOP_RIGHT
+      };
+
+      this.dismiss = this.openmct.menus.showSuperMenu(x, y, this.modes, menuOptions);
     },
-    destroyed: function () {
-        this.openmct.time.off('clock', this.setViewFromClock);
+    setViewFromMode(mode) {
+      this.selectedMode = this.getModeMetadata(mode, TEST_IDS);
     },
-    methods: {
-        showModesMenu() {
-            const elementBoundingClientRect = this.$refs.modeButton.getBoundingClientRect();
-            const x = elementBoundingClientRect.x;
-            const y = elementBoundingClientRect.y;
-
-            const menuOptions = {
-                menuClass: 'c-conductor__mode-menu',
-                placement: this.openmct.menus.menuPlacement.TOP_RIGHT
-            };
-
-            this.openmct.menus.showSuperMenu(x, y, this.modes, menuOptions);
-        },
-
-        loadClocksFromConfiguration() {
-            let clocks = this.configuration.menuOptions
-                .map(menuOption => menuOption.clock)
-                .filter(isDefinedAndUnique)
-                .map(this.getClock);
-
-            /*
-             * Populate the modes menu with metadata from the available clocks
-             * "Fixed Mode" is always first, and has no defined clock
-             */
-            this.modes = [undefined]
-                .concat(clocks)
-                .map(this.getModeOptionForClock);
-
-            function isDefinedAndUnique(key, index, array) {
-                return key !== undefined && array.indexOf(key) === index;
-            }
-        },
-
-        getModeOptionForClock(clock) {
-            if (clock === undefined) {
-                const key = 'fixed';
-
-                return {
-                    key,
-                    name: 'Fixed Timespan',
-                    description: 'Query and explore data that falls between two fixed datetimes.',
-                    cssClass: 'icon-tabular',
-                    onItemClicked: () => this.setOption(key)
-                };
-            } else {
-                const key = clock.key;
-
-                return {
-                    key,
-                    name: clock.name,
-                    description: "Monitor streaming data in real-time. The Time "
-                    + "Conductor and displays will automatically advance themselves based on this clock. " + clock.description,
-                    cssClass: clock.cssClass || 'icon-clock',
-                    onItemClicked: () => this.setOption(key)
-                };
-            }
-        },
-
-        getClock(key) {
-            return this.openmct.time.getAllClocks().filter(function (clock) {
-                return clock.key === key;
-            })[0];
-        },
-
-        setOption(clockKey) {
-            if (clockKey === 'fixed') {
-                clockKey = undefined;
-            }
-
-            let configuration = this.getMatchingConfig({
-                clock: clockKey,
-                timeSystem: this.openmct.time.timeSystem().key
-            });
-
-            if (configuration === undefined) {
-                configuration = this.getMatchingConfig({
-                    clock: clockKey
-                });
-
-                this.openmct.time.timeSystem(configuration.timeSystem, configuration.bounds);
-            }
-
-            if (clockKey === undefined) {
-                this.openmct.time.stopClock();
-            } else {
-                this.openmct.time.clock(clockKey, configuration.clockOffsets);
-            }
-        },
-
-        getMatchingConfig(options) {
-            const matchers = {
-                clock(config) {
-                    return options.clock === config.clock;
-                },
-                timeSystem(config) {
-                    return options.timeSystem === config.timeSystem;
-                }
-            };
-
-            function configMatches(config) {
-                return Object.keys(options).reduce((match, option) => {
-                    return match && matchers[option](config);
-                }, true);
-            }
-
-            return this.configuration.menuOptions.filter(configMatches)[0];
-        },
+    setMode(mode) {
+      this.setViewFromMode(mode);
 
-        setViewFromClock(clock) {
-            this.selectedMode = this.getModeOptionForClock(clock);
-        }
+      this.$emit('mode-updated', mode);
     }
+  }
 };
 </script>
diff --git a/src/plugins/timeConductor/ConductorModeIcon.vue b/src/plugins/timeConductor/ConductorModeIcon.vue
index 25ff47294ae..4a483a63048 100644
--- a/src/plugins/timeConductor/ConductorModeIcon.vue
+++ b/src/plugins/timeConductor/ConductorModeIcon.vue
@@ -1,27 +1,33 @@
-/*****************************************************************************
-* Open MCT Web, Copyright (c) 2014-2021, United States Government
-* as represented by the Administrator of the National Aeronautics and Space
-* Administration. All rights reserved.
-*
-* Open MCT Web is licensed under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-* http://www.apache.org/licenses/LICENSE-2.0.
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-* License for the specific language governing permissions and limitations
-* under the License.
-*
-* Open MCT Web includes source code licensed under additional open source
-* licenses. See the Open Source Licenses file (LICENSES.md) included with
-* this source code distribution or the Licensing information page available
-* at runtime from the About dialog for additional information.
-*****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div class="c-clock-symbol">
+  <div class="c-clock-symbol">
+    <svg class="c-clock-symbol__outer" viewBox="0 0 16 16">
+      <path d="M6 0L3 0C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H6V13H3V3H6V0Z" />
+      <path
+        d="M10 13H13V3H10V0H13C14.6569 0 16 1.34315 16 3V13C16 14.6569 14.6569 16 13 16H10V13Z"
+      />
+    </svg>
     <div class="hand-little"></div>
     <div class="hand-big"></div>
-</div>
+  </div>
 </template>
diff --git a/src/plugins/timeConductor/ConductorPopUp.vue b/src/plugins/timeConductor/ConductorPopUp.vue
new file mode 100644
index 00000000000..e6a6b8ce977
--- /dev/null
+++ b/src/plugins/timeConductor/ConductorPopUp.vue
@@ -0,0 +1,251 @@
+<template>
+  <div class="c-tc-input-popup" :class="popupClasses" :style="position">
+    <div class="c-tc-input-popup__options">
+      <IndependentMode
+        v-if="isIndependent"
+        class="c-conductor__mode-select"
+        title="Sets the Time Conductor's mode."
+        :mode="timeOptionMode"
+        @independent-mode-updated="saveIndependentMode"
+      />
+      <ConductorMode
+        v-else
+        class="c-conductor__mode-select"
+        title="Sets the Time Conductor's mode."
+        :button-css-class="'c-icon-button'"
+        @mode-updated="saveMode"
+      />
+      <IndependentClock
+        v-if="isIndependent"
+        class="c-conductor__mode-select"
+        title="Sets the Time Conductor's clock."
+        :clock="timeOptionClock"
+        :button-css-class="'c-icon-button'"
+        @independent-clock-updated="saveIndependentClock"
+      />
+      <ConductorClock
+        v-else
+        class="c-conductor__mode-select"
+        title="Sets the Time Conductor's clock."
+        :button-css-class="'c-icon-button'"
+        @clock-updated="saveClock"
+      />
+      <!-- TODO: Time system and history must work even with ITC later -->
+      <ConductorTimeSystem
+        v-if="!isIndependent"
+        class="c-conductor__time-system-select"
+        title="Sets the Time Conductor's time system."
+        :button-css-class="'c-icon-button'"
+      />
+      <ConductorHistory
+        v-if="!isIndependent"
+        class="c-conductor__history-select"
+        title="Select and apply previously entered time intervals."
+        :button-css-class="'c-icon-button'"
+      />
+    </div>
+    <conductor-inputs-fixed
+      v-if="isFixed"
+      :input-bounds="bounds"
+      :object-path="objectPath"
+      @bounds-updated="saveFixedBounds"
+      @dismiss-inputs-fixed="dismiss"
+    />
+    <conductor-inputs-realtime
+      v-else
+      :input-bounds="bounds"
+      :object-path="objectPath"
+      @offsets-updated="saveClockOffsets"
+      @dismiss-inputs-realtime="dismiss"
+    />
+  </div>
+</template>
+
+<script>
+import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
+import ConductorClock from './ConductorClock.vue';
+import ConductorHistory from './ConductorHistory.vue';
+import ConductorInputsFixed from './ConductorInputsFixed.vue';
+import ConductorInputsRealtime from './ConductorInputsRealtime.vue';
+import ConductorMode from './ConductorMode.vue';
+import ConductorTimeSystem from './ConductorTimeSystem.vue';
+import IndependentClock from './independent/IndependentClock.vue';
+import IndependentMode from './independent/IndependentMode.vue';
+
+export default {
+  components: {
+    ConductorMode,
+    ConductorClock,
+    IndependentMode,
+    IndependentClock,
+    ConductorTimeSystem,
+    ConductorHistory,
+    ConductorInputsFixed,
+    ConductorInputsRealtime
+  },
+  inject: {
+    openmct: 'openmct',
+    configuration: {
+      from: 'configuration',
+      default: undefined
+    }
+  },
+  props: {
+    positionX: {
+      type: Number,
+      required: true
+    },
+    positionY: {
+      type: Number,
+      required: true
+    },
+    isFixed: {
+      type: Boolean,
+      required: true
+    },
+    isIndependent: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    timeOptions: {
+      type: Object,
+      default() {
+        return undefined;
+      }
+    },
+    bottom: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    objectPath: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: [
+    'popup-loaded',
+    'dismiss',
+    'independent-clock-updated',
+    'fixed-bounds-updated',
+    'clock-offsets-updated',
+    'clock-updated',
+    'mode-updated',
+    'independent-mode-updated'
+  ],
+  data() {
+    const bounds = this.openmct.time.getBounds();
+    const timeSystem = this.openmct.time.getTimeSystem();
+    // const isFixed = this.openmct.time.isFixed();
+
+    return {
+      timeSystem,
+      bounds: {
+        start: bounds.start,
+        end: bounds.end
+      }
+    };
+  },
+  computed: {
+    position() {
+      const position = {
+        left: `${this.positionX}px`
+      };
+
+      if (this.isIndependent) {
+        position.top = `${this.positionY}px`;
+      }
+
+      return position;
+    },
+    popupClasses() {
+      const value = this.bottom ? 'c-tc-input-popup--bottom ' : '';
+      const mode = this.isFixed ? 'fixed-mode' : 'realtime-mode';
+      const independentClass = this.isIndependent ? 'itc-popout ' : '';
+
+      return `${independentClass}${value}c-tc-input-popup--${mode}`;
+    },
+    timeOptionMode() {
+      return this.timeOptions?.mode;
+    },
+    timeOptionClock() {
+      return this.timeOptions?.clock;
+    }
+  },
+  watch: {
+    objectPath: {
+      handler(newPath, oldPath) {
+        //domain object or view has probably changed
+        if (newPath === oldPath) {
+          return;
+        }
+
+        this.setTimeContext();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.$emit('popup-loaded');
+    this.setTimeContext();
+  },
+  beforeUnmount() {
+    this.stopFollowingTimeContext();
+  },
+  methods: {
+    setTimeContext() {
+      if (this.timeContext) {
+        this.stopFollowingTimeContext();
+      }
+
+      this.timeContext = this.openmct.time.getContextForView(this.objectPath);
+
+      this.timeContext.on(TIME_CONTEXT_EVENTS.clockChanged, this.setViewFromClock);
+      this.timeContext.on(TIME_CONTEXT_EVENTS.boundsChanged, this.setBounds);
+
+      this.setViewFromClock(this.timeContext.getClock());
+      this.setBounds(this.timeContext.getBounds());
+    },
+    stopFollowingTimeContext() {
+      this.timeContext.off(TIME_CONTEXT_EVENTS.clockChanged, this.setViewFromClock);
+      this.timeContext.off(TIME_CONTEXT_EVENTS.boundsChanged, this.setBounds);
+    },
+    setViewFromClock() {
+      this.bounds = this.isFixed
+        ? this.timeContext.getBounds()
+        : this.openmct.time.getClockOffsets();
+    },
+    setBounds(bounds, isTick) {
+      if (this.isFixed || !isTick) {
+        this.bounds = bounds;
+      }
+    },
+    saveFixedBounds(bounds) {
+      this.$emit('fixed-bounds-updated', bounds);
+    },
+    saveClockOffsets(offsets) {
+      this.$emit('clock-offsets-updated', offsets);
+    },
+    saveClock(clockOptions) {
+      this.$emit('clock-updated', clockOptions);
+    },
+    saveMode(mode) {
+      this.$emit('mode-updated', mode);
+    },
+    saveIndependentMode(mode) {
+      this.$emit('independent-mode-updated', mode);
+    },
+    saveIndependentClock(clockKey) {
+      this.$emit('independent-clock-updated', clockKey);
+    },
+    dismiss() {
+      this.$emit('dismiss');
+    }
+  }
+};
+</script>
diff --git a/src/plugins/timeConductor/ConductorTimeSystem.vue b/src/plugins/timeConductor/ConductorTimeSystem.vue
index 55197834ad6..4023249fcb4 100644
--- a/src/plugins/timeConductor/ConductorTimeSystem.vue
+++ b/src/plugins/timeConductor/ConductorTimeSystem.vue
@@ -1,132 +1,160 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div v-if="selectedTimeSystem.name"
-     ref="timeSystemButton"
-     class="c-ctrl-wrapper c-ctrl-wrapper--menus-up"
->
+  <div
+    v-if="selectedTimeSystem.name && readOnly === false"
+    ref="timeSystemButton"
+    class="c-ctrl-wrapper c-ctrl-wrapper--menus-up"
+  >
     <button
-        class="c-button--menu c-time-system-button"
-        :class="selectedTimeSystem.cssClass"
-        @click.prevent.stop="showTimeSystemMenu"
+      class="c-button--menu c-time-system-button"
+      :class="[buttonCssClass]"
+      aria-label="Time Conductor Time System"
+      @click.prevent.stop="showTimeSystemMenu"
     >
-        <span class="c-button__label">{{ selectedTimeSystem.name }}</span>
+      <span class="c-button__label">{{ selectedTimeSystem.name }}</span>
     </button>
-</div>
+  </div>
+  <div
+    v-else
+    class="c-compact-tc__setting-value__elem"
+    :aria-label="`Time system: ${selectedTimeSystem.name}`"
+    :title="`Time system: ${selectedTimeSystem.name}`"
+  >
+    {{ selectedTimeSystem.name }}
+  </div>
 </template>
 
 <script>
+import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
+
 export default {
-    inject: ['openmct', 'configuration'],
-    data: function () {
-        let activeClock = this.openmct.time.clock();
-
-        return {
-            selectedTimeSystem: JSON.parse(JSON.stringify(this.openmct.time.timeSystem())),
-            timeSystems: this.getValidTimesystemsForClock(activeClock)
-        };
+  inject: ['openmct', 'configuration'],
+  props: {
+    buttonCssClass: {
+      type: String,
+      required: false,
+      default() {
+        return '';
+      }
     },
-    mounted: function () {
-        this.openmct.time.on('timeSystem', this.setViewFromTimeSystem);
-        this.openmct.time.on('clock', this.setViewFromClock);
+    readOnly: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    }
+  },
+  data() {
+    let activeClock = this.openmct.time.getClock();
+
+    return {
+      selectedTimeSystem: JSON.parse(JSON.stringify(this.openmct.time.getTimeSystem())),
+      timeSystems: this.getValidTimesystemsForClock(activeClock)
+    };
+  },
+  mounted() {
+    this.openmct.time.on(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setViewFromTimeSystem);
+    this.openmct.time.on(TIME_CONTEXT_EVENTS.clockChanged, this.setViewFromClock);
+  },
+  unmounted() {
+    this.openmct.time.off(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setViewFromTimeSystem);
+    this.openmct.time.on(TIME_CONTEXT_EVENTS.clockChanged, this.setViewFromClock);
+  },
+  methods: {
+    showTimeSystemMenu() {
+      const elementBoundingClientRect = this.$refs.timeSystemButton.getBoundingClientRect();
+      const x = elementBoundingClientRect.x;
+      const y = elementBoundingClientRect.y;
+
+      const menuOptions = {
+        placement: this.openmct.menus.menuPlacement.TOP_RIGHT
+      };
+
+      this.openmct.menus.showMenu(x, y, this.timeSystems, menuOptions);
     },
-    destroyed: function () {
-        this.openmct.time.off('timeSystem', this.setViewFromTimeSystem);
-        this.openmct.time.on('clock', this.setViewFromClock);
+    getValidTimesystemsForClock(clock) {
+      return this.configuration.menuOptions
+        .filter((menuOption) => menuOption.clock === (clock && clock.key))
+        .map((menuOption) => {
+          const timeSystem = JSON.parse(
+            JSON.stringify(this.openmct.time.timeSystems.get(menuOption.timeSystem))
+          );
+          timeSystem.onItemClicked = () => this.setTimeSystemFromView(timeSystem);
+
+          return timeSystem;
+        });
     },
-    methods: {
-        showTimeSystemMenu() {
-            const elementBoundingClientRect = this.$refs.timeSystemButton.getBoundingClientRect();
-            const x = elementBoundingClientRect.x;
-            const y = elementBoundingClientRect.y;
+    setTimeSystemFromView(timeSystem) {
+      if (timeSystem.key !== this.selectedTimeSystem.key) {
+        let activeClock = this.openmct.time.getClock();
+        let configuration = this.getMatchingConfig({
+          clock: activeClock && activeClock.key,
+          timeSystem: timeSystem.key
+        });
+        if (activeClock === undefined) {
+          let bounds;
 
-            const menuOptions = {
-                placement: this.openmct.menus.menuPlacement.TOP_RIGHT
-            };
+          if (this.selectedTimeSystem.isUTCBased && timeSystem.isUTCBased) {
+            bounds = this.openmct.time.getBounds();
+          } else {
+            bounds = configuration.bounds;
+          }
 
-            this.openmct.menus.showMenu(x, y, this.timeSystems, menuOptions);
-        },
-        getValidTimesystemsForClock(clock) {
-            return this.configuration.menuOptions
-                .filter(menuOption => menuOption.clock === (clock && clock.key))
-                .map(menuOption => {
-                    const timeSystem = JSON.parse(JSON.stringify(this.openmct.time.timeSystems.get(menuOption.timeSystem)));
-                    timeSystem.onItemClicked = () => this.setTimeSystemFromView(timeSystem);
-
-                    return timeSystem;
-                });
-        },
-        setTimeSystemFromView(timeSystem) {
-            if (timeSystem.key !== this.selectedTimeSystem.key) {
-                let activeClock = this.openmct.time.clock();
-                let configuration = this.getMatchingConfig({
-                    clock: activeClock && activeClock.key,
-                    timeSystem: timeSystem.key
-                });
-                if (activeClock === undefined) {
-                    let bounds;
-
-                    if (this.selectedTimeSystem.isUTCBased && timeSystem.isUTCBased) {
-                        bounds = this.openmct.time.bounds();
-                    } else {
-                        bounds = configuration.bounds;
-                    }
-
-                    this.openmct.time.timeSystem(timeSystem.key, bounds);
-                } else {
-                    this.openmct.time.timeSystem(timeSystem.key);
-                    this.openmct.time.clockOffsets(configuration.clockOffsets);
-                }
-            }
-        },
+          this.openmct.time.setTimeSystem(timeSystem.key, bounds);
+        } else {
+          this.openmct.time.setTimeSystem(timeSystem.key);
+          this.openmct.time.setClockOffsets(configuration.clockOffsets);
+        }
+      }
+    },
 
-        getMatchingConfig(options) {
-            const matchers = {
-                clock(config) {
-                    return options.clock === config.clock;
-                },
-                timeSystem(config) {
-                    return options.timeSystem === config.timeSystem;
-                }
-            };
-
-            function configMatches(config) {
-                return Object.keys(options).reduce((match, option) => {
-                    return match && matchers[option](config);
-                }, true);
-            }
-
-            return this.configuration.menuOptions.filter(configMatches)[0];
+    getMatchingConfig(options) {
+      const matchers = {
+        clock(config) {
+          return options.clock === config.clock;
         },
+        timeSystem(config) {
+          return options.timeSystem === config.timeSystem;
+        }
+      };
 
-        setViewFromTimeSystem(timeSystem) {
-            this.selectedTimeSystem = timeSystem;
-        },
+      function configMatches(config) {
+        return Object.keys(options).reduce((match, option) => {
+          return match && matchers[option](config);
+        }, true);
+      }
 
-        setViewFromClock(clock) {
-            let activeClock = this.openmct.time.clock();
-            this.timeSystems = this.getValidTimesystemsForClock(activeClock);
-        }
-    }
+      return this.configuration.menuOptions.filter(configMatches)[0];
+    },
 
+    setViewFromTimeSystem(timeSystem) {
+      this.selectedTimeSystem = timeSystem;
+    },
+
+    setViewFromClock(clock) {
+      let activeClock = this.openmct.time.getClock();
+      this.timeSystems = this.getValidTimesystemsForClock(activeClock);
+    }
+  }
 };
 </script>
diff --git a/src/plugins/timeConductor/DatePicker.vue b/src/plugins/timeConductor/DatePicker.vue
index fafdbe2b116..d80a0689089 100644
--- a/src/plugins/timeConductor/DatePicker.vue
+++ b/src/plugins/timeConductor/DatePicker.vue
@@ -1,261 +1,263 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div
+  <div
     ref="calendarHolder"
-    class="c-ctrl-wrapper c-ctrl-wrapper--menus-up c-datetime-picker__wrapper"
->
-    <a
-        class="c-icon-button icon-calendar"
-        @click="toggle"
-    ></a>
-    <div
-        v-if="open"
-        class="c-menu c-menu--mobile-modal c-datetime-picker"
-    >
-        <div class="c-datetime-picker__close-button">
-            <button
-                class="c-click-icon icon-x-in-circle"
-                @click="toggle"
-            ></button>
+    class="c-ctrl-wrapper c-datetime-picker__wrapper"
+    :class="{
+      'c-ctrl-wrapper--menus-up': bottom !== true,
+      'c-ctrl-wrapper--menus-down': bottom === true
+    }"
+  >
+    <a class="c-icon-button icon-calendar" @click="toggle"></a>
+    <div v-if="open" class="c-menu c-menu--mobile-modal c-datetime-picker">
+      <div class="c-datetime-picker__close-button">
+        <button class="c-click-icon icon-x-in-circle" @click="toggle"></button>
+      </div>
+      <div class="c-datetime-picker__pager c-pager l-month-year-pager">
+        <div
+          class="c-pager__prev c-icon-button icon-arrow-left"
+          @click.stop="changeMonth(-1)"
+        ></div>
+        <div class="c-pager__month-year">{{ model.month }} {{ model.year }}</div>
+        <div
+          class="c-pager__next c-icon-button icon-arrow-right"
+          @click.stop="changeMonth(1)"
+        ></div>
+      </div>
+      <div class="c-datetime-picker__calendar c-calendar">
+        <div class="c-calendar__row--header l-cal-row">
+          <div
+            v-for="day in ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']"
+            :key="day"
+            class="c-calendar-cell"
+          >
+            {{ day }}
+          </div>
         </div>
-        <div class="c-datetime-picker__pager c-pager l-month-year-pager">
-            <div
-                class="c-pager__prev c-icon-button icon-arrow-left"
-                @click.stop="changeMonth(-1)"
-            ></div>
-            <div class="c-pager__month-year">
-                {{ model.month }} {{ model.year }}
+        <div v-for="(row, tableIndex) in table" :key="tableIndex" class="c-calendar__row--body">
+          <div
+            v-for="(cell, rowIndex) in row"
+            :key="rowIndex"
+            :class="{ 'is-in-month': isInCurrentMonth(cell), selected: isSelected(cell) }"
+            class="c-calendar-cell"
+            @click="select(cell)"
+          >
+            <div class="c-calendar__day--prime">
+              {{ cell.day }}
             </div>
-            <div
-                class="c-pager__next c-icon-button icon-arrow-right"
-                @click.stop="changeMonth(1)"
-            ></div>
-        </div>
-        <div class="c-datetime-picker__calendar c-calendar">
-            <ul class="c-calendar__row--header l-cal-row">
-                <li
-                    v-for="day in ['Su','Mo','Tu','We','Th','Fr','Sa']"
-                    :key="day"
-                >
-                    {{ day }}
-                </li>
-            </ul>
-            <ul
-                v-for="(row, tableIndex) in table"
-                :key="tableIndex"
-                class="c-calendar__row--body"
-            >
-                <li
-                    v-for="(cell, rowIndex) in row"
-                    :key="rowIndex"
-                    :class="{ 'is-in-month': isInCurrentMonth(cell), selected: isSelected(cell) }"
-                    @click="select(cell)"
-                >
-                    <div class="c-calendar__day--prime">
-                        {{ cell.day }}
-                    </div>
-                    <div class="c-calendar__day--sub">
-                        {{ cell.dayOfYear }}
-                    </div>
-                </li>
-            </ul>
+            <div class="c-calendar__day--sub">
+              {{ cell.dayOfYear }}
+            </div>
+          </div>
         </div>
+      </div>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
 import moment from 'moment';
-import toggleMixin from '../../ui/mixins/toggle-mixin';
+
+import toggleMixin from '../../ui/mixins/toggle-mixin.js';
 
 const TIME_NAMES = {
-    'hours': "Hour",
-    'minutes': "Minute",
-    'seconds': "Second"
+  hours: 'Hour',
+  minutes: 'Minute',
+  seconds: 'Second'
 };
 const MONTHS = moment.months();
 const TIME_OPTIONS = (function makeRanges() {
-    let arr = [];
-    while (arr.length < 60) {
-        arr.push(arr.length);
-    }
+  let arr = [];
+  while (arr.length < 60) {
+    arr.push(arr.length);
+  }
 
-    return {
-        hours: arr.slice(0, 24),
-        minutes: arr,
-        seconds: arr
-    };
-}());
+  return {
+    hours: arr.slice(0, 24),
+    minutes: arr,
+    seconds: arr
+  };
+})();
 
 export default {
-    mixins: [toggleMixin],
-    inject: ['openmct'],
-    props: {
-        defaultDateTime: {
-            type: String,
-            default: undefined
-        },
-        formatter: {
-            type: Object,
-            required: true
-        }
+  mixins: [toggleMixin],
+  inject: ['openmct'],
+  props: {
+    defaultDateTime: {
+      type: String,
+      default: undefined
     },
-    data: function () {
-        return {
-            picker: {
-                year: undefined,
-                month: undefined,
-                interacted: false
-            },
-            model: {
-                year: undefined,
-                month: undefined
-            },
-            table: undefined,
-            date: undefined,
-            time: undefined
-        };
-    },
-    mounted: function () {
-        this.updateFromModel(this.defaultDateTime);
-        this.updateViewForMonth();
+    formatter: {
+      type: Object,
+      required: true
     },
-    methods: {
-        generateTable() {
-            let m = moment.utc({
-                year: this.picker.year,
-                month: this.picker.month
-            }).day(0);
-            let table = [];
-            let row;
-            let col;
+    bottom: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    }
+  },
+  emits: ['date-selected'],
+  data: function () {
+    return {
+      picker: {
+        year: undefined,
+        month: undefined,
+        interacted: false
+      },
+      model: {
+        year: undefined,
+        month: undefined
+      },
+      table: undefined,
+      date: undefined,
+      time: undefined
+    };
+  },
+  watch: {
+    defaultDateTime() {
+      this.updateFromModel(this.defaultDateTime);
+    }
+  },
+  mounted: function () {
+    this.updateFromModel(this.defaultDateTime);
+    this.updateViewForMonth();
+  },
+  methods: {
+    generateTable() {
+      let m = moment
+        .utc({
+          year: this.picker.year,
+          month: this.picker.month
+        })
+        .day(0);
+      let table = [];
+      let row;
+      let col;
 
-            for (row = 0; row < 6; row += 1) {
-                table.push([]);
-                for (col = 0; col < 7; col += 1) {
-                    table[row].push({
-                        year: m.year(),
-                        month: m.month(),
-                        day: m.date(),
-                        dayOfYear: m.dayOfYear()
-                    });
-                    m.add(1, 'days'); // Next day!
-                }
-            }
+      for (row = 0; row < 6; row += 1) {
+        table.push([]);
+        for (col = 0; col < 7; col += 1) {
+          table[row].push({
+            year: m.year(),
+            month: m.month(),
+            day: m.date(),
+            dayOfYear: m.dayOfYear()
+          });
+          m.add(1, 'days'); // Next day!
+        }
+      }
 
-            return table;
-        },
+      return table;
+    },
 
-        updateViewForMonth() {
-            this.model.month = MONTHS[this.picker.month];
-            this.model.year = this.picker.year;
-            this.table = this.generateTable();
-        },
+    updateViewForMonth() {
+      this.model.month = MONTHS[this.picker.month];
+      this.model.year = this.picker.year;
+      this.table = this.generateTable();
+    },
 
-        updateFromModel(defaultDateTime) {
-            let m = moment.utc(defaultDateTime);
+    updateFromModel(defaultDateTime) {
+      let m = moment.utc(defaultDateTime);
 
-            this.date = {
-                year: m.year(),
-                month: m.month(),
-                day: m.date()
-            };
-            this.time = {
-                hours: m.hour(),
-                minutes: m.minute(),
-                seconds: m.second()
-            };
+      this.date = {
+        year: m.year(),
+        month: m.month(),
+        day: m.date()
+      };
+      this.time = {
+        hours: m.hour(),
+        minutes: m.minute(),
+        seconds: m.second()
+      };
 
-            // Zoom to that date in the picker, but
-            // only if the user hasn't interacted with it yet.
-            if (!this.picker.interacted) {
-                this.picker.year = m.year();
-                this.picker.month = m.month();
-                this.updateViewForMonth();
-            }
-        },
+      // Zoom to that date in the picker, but
+      // only if the user hasn't interacted with it yet.
+      if (!this.picker.interacted) {
+        this.picker.year = m.year();
+        this.picker.month = m.month();
+        this.updateViewForMonth();
+      }
+    },
 
-        updateFromView() {
-            let m = moment.utc({
-                year: this.date.year,
-                month: this.date.month,
-                day: this.date.day,
-                hour: this.time.hours,
-                minute: this.time.minutes,
-                second: this.time.seconds
-            });
-            this.$emit('date-selected', m.valueOf());
-        },
+    updateFromView() {
+      let m = moment.utc({
+        year: this.date.year,
+        month: this.date.month,
+        day: this.date.day,
+        hour: this.time.hours,
+        minute: this.time.minutes,
+        second: this.time.seconds
+      });
+      this.$emit('date-selected', m.valueOf());
+    },
 
-        isInCurrentMonth(cell) {
-            return cell.month === this.picker.month;
-        },
+    isInCurrentMonth(cell) {
+      return cell.month === this.picker.month;
+    },
 
-        isSelected(cell) {
-            let date = this.date || {};
+    isSelected(cell) {
+      let date = this.date || {};
 
-            return cell.day === date.day
-                && cell.month === date.month
-                && cell.year === date.year;
-        },
+      return cell.day === date.day && cell.month === date.month && cell.year === date.year;
+    },
 
-        select(cell) {
-            this.date = this.date || {};
-            this.date.month = cell.month;
-            this.date.year = cell.year;
-            this.date.day = cell.day;
-            this.updateFromView();
-        },
+    select(cell) {
+      this.date = this.date || {};
+      this.date.month = cell.month;
+      this.date.year = cell.year;
+      this.date.day = cell.day;
+      this.updateFromView();
+    },
 
-        dateEquals(d1, d2) {
-            return d1.year === d2.year
-                && d1.month === d2.month
-                && d1.day === d2.day;
-        },
+    dateEquals(d1, d2) {
+      return d1.year === d2.year && d1.month === d2.month && d1.day === d2.day;
+    },
 
-        changeMonth(delta) {
-            this.picker.month += delta;
-            if (this.picker.month > 11) {
-                this.picker.month = 0;
-                this.picker.year += 1;
-            }
+    changeMonth(delta) {
+      this.picker.month += delta;
+      if (this.picker.month > 11) {
+        this.picker.month = 0;
+        this.picker.year += 1;
+      }
 
-            if (this.picker.month < 0) {
-                this.picker.month = 11;
-                this.picker.year -= 1;
-            }
+      if (this.picker.month < 0) {
+        this.picker.month = 11;
+        this.picker.year -= 1;
+      }
 
-            this.picker.interacted = true;
-            this.updateViewForMonth();
-        },
+      this.picker.interacted = true;
+      this.updateViewForMonth();
+    },
 
-        nameFor(key) {
-            return TIME_NAMES[key];
-        },
+    nameFor(key) {
+      return TIME_NAMES[key];
+    },
 
-        optionsFor(key) {
-            return TIME_OPTIONS[key];
-        }
+    optionsFor(key) {
+      return TIME_OPTIONS[key];
     }
+  }
 };
 </script>
diff --git a/src/plugins/timeConductor/TimePopupFixed.vue b/src/plugins/timeConductor/TimePopupFixed.vue
new file mode 100644
index 00000000000..3eb19124240
--- /dev/null
+++ b/src/plugins/timeConductor/TimePopupFixed.vue
@@ -0,0 +1,328 @@
+<template>
+  <form ref="fixedDeltaInput">
+    <div class="c-tc-input-popup__input-grid">
+      <div class="pr-time-label"><em>Start</em> Date</div>
+      <div class="pr-time-label">Time</div>
+      <div class="pr-time-label"></div>
+      <div class="pr-time-label"><em>End</em> Date</div>
+      <div class="pr-time-label">Time</div>
+      <div class="pr-time-label"></div>
+
+      <div class="pr-time-input pr-time-input--date pr-time-input--input-and-button">
+        <input
+          ref="startDate"
+          v-model="formattedBounds.start"
+          class="c-input--datetime"
+          type="text"
+          autocorrect="off"
+          spellcheck="false"
+          aria-label="Start date"
+          @change="validateAllBounds('startDate')"
+        />
+        <date-picker
+          v-if="isUTCBased"
+          class="c-ctrl-wrapper--menus-left"
+          :default-date-time="formattedBounds.start"
+          :formatter="timeFormatter"
+          @date-selected="startDateSelected"
+        />
+      </div>
+
+      <div class="pr-time-input pr-time-input--time">
+        <input
+          ref="startTime"
+          v-model="formattedBounds.startTime"
+          class="c-input--datetime"
+          type="text"
+          autocorrect="off"
+          spellcheck="false"
+          aria-label="Start time"
+          @change="validateAllBounds('startDate')"
+        />
+      </div>
+
+      <div class="pr-time-input pr-time-input__start-end-sep icon-arrows-right-left"></div>
+
+      <div class="pr-time-input pr-time-input--date pr-time-input--input-and-button">
+        <input
+          ref="endDate"
+          v-model="formattedBounds.end"
+          class="c-input--datetime"
+          type="text"
+          autocorrect="off"
+          spellcheck="false"
+          aria-label="End date"
+          @change="validateAllBounds('endDate')"
+        />
+        <date-picker
+          v-if="isUTCBased"
+          class="c-ctrl-wrapper--menus-left"
+          :default-date-time="formattedBounds.end"
+          :formatter="timeFormatter"
+          @date-selected="endDateSelected"
+        />
+      </div>
+
+      <div class="pr-time-input pr-time-input--time">
+        <input
+          ref="endTime"
+          v-model="formattedBounds.endTime"
+          class="c-input--datetime"
+          type="text"
+          autocorrect="off"
+          spellcheck="false"
+          aria-label="End time"
+          @change="validateAllBounds('endDate')"
+        />
+      </div>
+
+      <div class="pr-time-input pr-time-input--buttons">
+        <button
+          class="c-button c-button--major icon-check"
+          :disabled="isDisabled"
+          aria-label="Submit time bounds"
+          @click.prevent="submit"
+        ></button>
+        <button
+          class="c-button icon-x"
+          aria-label="Discard time bounds"
+          @click.prevent="hide"
+        ></button>
+      </div>
+    </div>
+  </form>
+</template>
+
+<script>
+import _ from 'lodash';
+
+import DatePicker from './DatePicker.vue';
+
+const DEFAULT_DURATION_FORMATTER = 'duration';
+
+export default {
+  components: {
+    DatePicker
+  },
+  inject: ['openmct'],
+  props: {
+    inputBounds: {
+      type: Object,
+      required: true
+    },
+    inputTimeSystem: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['update', 'dismiss'],
+  data() {
+    let timeSystem = this.openmct.time.getTimeSystem();
+    let durationFormatter = this.getFormatter(
+      timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
+    );
+    let timeFormatter = this.getFormatter(timeSystem.timeFormat);
+    let bounds = this.bounds || this.openmct.time.getBounds();
+
+    return {
+      timeFormatter,
+      durationFormatter,
+      bounds: {
+        start: bounds.start,
+        end: bounds.end
+      },
+      formattedBounds: {
+        start: timeFormatter.format(bounds.start).split(' ')[0],
+        end: timeFormatter.format(bounds.end).split(' ')[0],
+        startTime: durationFormatter.format(Math.abs(bounds.start)),
+        endTime: durationFormatter.format(Math.abs(bounds.end))
+      },
+      isUTCBased: timeSystem.isUTCBased,
+      isDisabled: false
+    };
+  },
+  watch: {
+    inputBounds: {
+      handler(newBounds) {
+        this.handleNewBounds(newBounds);
+      },
+      deep: true
+    },
+    inputTimeSystem: {
+      handler(newTimeSystem) {
+        this.setTimeSystem(newTimeSystem);
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.handleNewBounds = _.throttle(this.handleNewBounds, 300);
+    this.setTimeSystem(JSON.parse(JSON.stringify(this.openmct.time.getTimeSystem())));
+  },
+  beforeUnmount() {
+    this.clearAllValidation();
+  },
+  methods: {
+    handleNewBounds(bounds) {
+      this.setBounds(bounds);
+      this.setViewFromBounds(bounds);
+    },
+    clearAllValidation() {
+      [this.$refs.startDate, this.$refs.endDate].forEach(this.clearValidationForInput);
+    },
+    clearValidationForInput(input) {
+      input.setCustomValidity('');
+      input.title = '';
+    },
+    setBounds(bounds) {
+      this.bounds = bounds;
+    },
+    setViewFromBounds(bounds) {
+      this.formattedBounds.start = this.timeFormatter.format(bounds.start).split(' ')[0];
+      this.formattedBounds.end = this.timeFormatter.format(bounds.end).split(' ')[0];
+      this.formattedBounds.startTime = this.durationFormatter.format(Math.abs(bounds.start));
+      this.formattedBounds.endTime = this.durationFormatter.format(Math.abs(bounds.end));
+    },
+    setTimeSystem(timeSystem) {
+      this.timeSystem = timeSystem;
+      this.timeFormatter = this.getFormatter(timeSystem.timeFormat);
+      this.durationFormatter = this.getFormatter(
+        timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
+      );
+      this.isUTCBased = timeSystem.isUTCBased;
+    },
+    getFormatter(key) {
+      return this.openmct.telemetry.getValueFormatter({
+        format: key
+      }).formatter;
+    },
+    setBoundsFromView(dismiss) {
+      if (this.$refs.fixedDeltaInput.checkValidity()) {
+        let start = this.timeFormatter.parse(
+          `${this.formattedBounds.start} ${this.formattedBounds.startTime}`
+        );
+        let end = this.timeFormatter.parse(
+          `${this.formattedBounds.end} ${this.formattedBounds.endTime}`
+        );
+
+        this.$emit('update', {
+          start: start,
+          end: end
+        });
+      }
+
+      if (dismiss) {
+        this.$emit('dismiss');
+
+        return false;
+      }
+    },
+    submit() {
+      this.validateAllBounds('startDate');
+      this.validateAllBounds('endDate');
+      this.submitForm(!this.isDisabled);
+    },
+    submitForm(dismiss) {
+      // Allow Vue model to catch up to user input.
+      // Submitting form will cause validation messages to display (but only if triggered by button click)
+      this.$nextTick(() => this.setBoundsFromView(dismiss));
+    },
+    validateAllBounds(ref) {
+      if (!this.areBoundsFormatsValid()) {
+        return false;
+      }
+
+      let validationResult = {
+        valid: true
+      };
+      const currentInput = this.$refs[ref];
+
+      return [this.$refs.startDate, this.$refs.endDate].every((input) => {
+        let boundsValues = {
+          start: this.timeFormatter.parse(
+            `${this.formattedBounds.start} ${this.formattedBounds.startTime}`
+          ),
+          end: this.timeFormatter.parse(
+            `${this.formattedBounds.end} ${this.formattedBounds.endTime}`
+          )
+        };
+        //TODO: Do we need limits here? We have conductor limits disabled right now
+        // const limit = this.getBoundsLimit();
+        const limit = false;
+
+        if (this.timeSystem.isUTCBased && limit && boundsValues.end - boundsValues.start > limit) {
+          if (input === currentInput) {
+            validationResult = {
+              valid: false,
+              message: 'Start and end difference exceeds allowable limit'
+            };
+          }
+        } else {
+          if (input === currentInput) {
+            validationResult = this.openmct.time.validateBounds(boundsValues);
+          }
+        }
+
+        return this.handleValidationResults(input, validationResult);
+      });
+    },
+    areBoundsFormatsValid() {
+      let validationResult = {
+        valid: true
+      };
+
+      return [this.$refs.startDate, this.$refs.endDate].every((input) => {
+        const formattedDate =
+          input === this.$refs.startDate
+            ? `${this.formattedBounds.start} ${this.formattedBounds.startTime}`
+            : `${this.formattedBounds.end} ${this.formattedBounds.endTime}`;
+        if (!this.timeFormatter.validate(formattedDate)) {
+          validationResult = {
+            valid: false,
+            message: 'Invalid date'
+          };
+        }
+
+        return this.handleValidationResults(input, validationResult);
+      });
+    },
+    getBoundsLimit() {
+      const configuration = this.configuration.menuOptions
+        .filter((option) => option.timeSystem === this.timeSystem.key)
+        .find((option) => option.limit);
+
+      const limit = configuration ? configuration.limit : undefined;
+
+      return limit;
+    },
+    handleValidationResults(input, validationResult) {
+      if (validationResult.valid !== true) {
+        input.setCustomValidity(validationResult.message);
+        input.title = validationResult.message;
+        this.isDisabled = true;
+      } else {
+        input.setCustomValidity('');
+        input.title = '';
+        this.isDisabled = false;
+      }
+
+      this.$refs.fixedDeltaInput.reportValidity();
+
+      return validationResult.valid;
+    },
+    startDateSelected(date) {
+      this.formattedBounds.start = this.timeFormatter.format(date).split(' ')[0];
+      this.validateAllBounds('startDate');
+    },
+    endDateSelected(date) {
+      this.formattedBounds.end = this.timeFormatter.format(date).split(' ')[0];
+      this.validateAllBounds('endDate');
+    },
+    hide($event) {
+      if ($event.target.className.indexOf('c-button icon-x') > -1) {
+        this.$emit('dismiss');
+      }
+    }
+  }
+};
+</script>
diff --git a/src/plugins/timeConductor/TimePopupRealtime.vue b/src/plugins/timeConductor/TimePopupRealtime.vue
new file mode 100644
index 00000000000..248995dea46
--- /dev/null
+++ b/src/plugins/timeConductor/TimePopupRealtime.vue
@@ -0,0 +1,258 @@
+<template>
+  <form ref="deltaInput">
+    <div class="c-tc-input-popup__input-grid">
+      <div class="pr-time-label icon-minus">Hrs</div>
+      <div class="pr-time-label">Mins</div>
+      <div class="pr-time-label">Secs</div>
+      <div class="pr-time-label"></div>
+      <div class="pr-time-label icon-plus">Hrs</div>
+      <div class="pr-time-label">Mins</div>
+      <div class="pr-time-label">Secs</div>
+      <div class="pr-time-label"></div>
+
+      <div class="pr-time-input">
+        <input
+          ref="startInputHrs"
+          v-model="startInputHrs"
+          class="pr-time-input__hrs"
+          step="1"
+          type="number"
+          min="0"
+          max="23"
+          title="Enter 0 - 23"
+          aria-label="Start offset hours"
+          @change="validate()"
+          @keyup="validate()"
+          @focusin="selectAll($event)"
+          @focusout="format('startInputHrs')"
+          @wheel="increment($event, 'startInputHrs')"
+        />
+        <b>:</b>
+      </div>
+      <div class="pr-time-input">
+        <input
+          ref="startInputMins"
+          v-model="startInputMins"
+          type="number"
+          class="pr-time-input__mins"
+          min="0"
+          max="59"
+          title="Enter 0 - 59"
+          step="1"
+          aria-label="Start offset minutes"
+          @change="validate()"
+          @keyup="validate()"
+          @focusin="selectAll($event)"
+          @focusout="format('startInputMins')"
+          @wheel="increment($event, 'startInputMins')"
+        />
+        <b>:</b>
+      </div>
+      <div class="pr-time-input">
+        <input
+          ref="startInputSecs"
+          v-model="startInputSecs"
+          type="number"
+          class="pr-time-input__secs"
+          min="0"
+          max="59"
+          title="Enter 0 - 59"
+          step="1"
+          aria-label="Start offset seconds"
+          @change="validate()"
+          @keyup="validate()"
+          @focusin="selectAll($event)"
+          @focusout="format('startInputSecs')"
+          @wheel="increment($event, 'startInputSecs')"
+        />
+      </div>
+
+      <div class="pr-time-input pr-time-input__start-end-sep icon-arrows-right-left"></div>
+
+      <div class="pr-time-input">
+        <input
+          ref="endInputHrs"
+          v-model="endInputHrs"
+          class="pr-time-input__hrs"
+          step="1"
+          type="number"
+          min="0"
+          max="23"
+          title="Enter 0 - 23"
+          aria-label="End offset hours"
+          @change="validate()"
+          @keyup="validate()"
+          @focusin="selectAll($event)"
+          @focusout="format('endInputHrs')"
+          @wheel="increment($event, 'endInputHrs')"
+        />
+        <b>:</b>
+      </div>
+      <div class="pr-time-input">
+        <input
+          ref="endInputMins"
+          v-model="endInputMins"
+          type="number"
+          class="pr-time-input__mins"
+          min="0"
+          max="59"
+          title="Enter 0 - 59"
+          step="1"
+          @change="validate()"
+          @keyup="validate()"
+          @focusin="selectAll($event)"
+          @focusout="format('endInputMins')"
+          @wheel="increment($event, 'endInputMins')"
+        />
+        <b>:</b>
+      </div>
+      <div class="pr-time-input">
+        <input
+          ref="endInputSecs"
+          v-model="endInputSecs"
+          type="number"
+          class="pr-time-input__secs"
+          min="0"
+          max="59"
+          title="Enter 0 - 59"
+          step="1"
+          aria-label="End offset seconds"
+          @change="validate()"
+          @keyup="validate()"
+          @focusin="selectAll($event)"
+          @focusout="format('endInputSecs')"
+          @wheel="increment($event, 'endInputSecs')"
+        />
+      </div>
+
+      <div class="pr-time-input pr-time-input--buttons">
+        <button
+          class="c-button c-button--major icon-check"
+          :disabled="isDisabled"
+          aria-label="Submit time offsets"
+          @click.prevent="submit"
+        ></button>
+        <button
+          class="c-button icon-x"
+          aria-label="Discard time offsets"
+          @click.prevent="hide"
+        ></button>
+      </div>
+    </div>
+  </form>
+</template>
+
+<script>
+export default {
+  props: {
+    offsets: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['update', 'dismiss'],
+  data() {
+    return {
+      startInputHrs: '00',
+      startInputMins: '00',
+      startInputSecs: '00',
+      endInputHrs: '00',
+      endInputMins: '00',
+      endInputSecs: '00',
+      isDisabled: false
+    };
+  },
+  watch: {
+    offsets: {
+      handler() {
+        this.setOffsets();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.setOffsets();
+    document.addEventListener('click', this.hide);
+  },
+  beforeUnmount() {
+    document.removeEventListener('click', this.hide);
+  },
+  methods: {
+    format(ref) {
+      const curVal = this[ref];
+      this[ref] = curVal.toString().padStart(2, '0');
+    },
+    validate() {
+      let disabled = false;
+      let refs = [
+        'startInputHrs',
+        'startInputMins',
+        'startInputSecs',
+        'endInputHrs',
+        'endInputMins',
+        'endInputSecs'
+      ];
+
+      for (let ref of refs) {
+        let min = Number(this.$refs[ref].min);
+        let max = Number(this.$refs[ref].max);
+        let value = Number(this.$refs[ref].value);
+
+        if (value > max || value < min) {
+          disabled = true;
+          break;
+        }
+      }
+
+      this.isDisabled = disabled;
+    },
+    submit() {
+      this.$emit('update', {
+        start: {
+          hours: this.startInputHrs,
+          minutes: this.startInputMins,
+          seconds: this.startInputSecs
+        },
+        end: {
+          hours: this.endInputHrs,
+          minutes: this.endInputMins,
+          seconds: this.endInputSecs
+        }
+      });
+      this.$emit('dismiss');
+    },
+    hide($event) {
+      if ($event.target.className.indexOf('c-button icon-x') > -1) {
+        this.$emit('dismiss');
+      }
+    },
+    increment($ev, ref) {
+      $ev.preventDefault();
+      const step = ref === 'startInputHrs' || ref === 'endInputHrs' ? 1 : 5;
+      const maxVal = ref === 'startInputHrs' || ref === 'endInputHrs' ? 23 : 59;
+      let cv = Math.round(parseInt(this[ref], 10) / step) * step;
+      cv = Math.min(maxVal, Math.max(0, $ev.deltaY < 0 ? cv + step : cv - step));
+      this[ref] = cv.toString().padStart(2, '0');
+      this.validate();
+    },
+    setOffsets() {
+      [this.startInputHrs, this.startInputMins, this.startInputSecs] =
+        this.offsets.start.split(':');
+      [this.endInputHrs, this.endInputMins, this.endInputSecs] = this.offsets.end.split(':');
+      this.$nextTick(() => {
+        this.numberSelect('startInputHrs');
+      });
+    },
+    numberSelect(input) {
+      if (this.$refs[input] === undefined || this.$refs[input] === null) {
+        return;
+      }
+      this.$refs[input].focus();
+      this.$refs[input].select();
+    },
+    selectAll($ev) {
+      $ev.target.select();
+    }
+  }
+};
+</script>
diff --git a/src/plugins/timeConductor/clock-mixin.js b/src/plugins/timeConductor/clock-mixin.js
new file mode 100644
index 00000000000..32da96c7adc
--- /dev/null
+++ b/src/plugins/timeConductor/clock-mixin.js
@@ -0,0 +1,52 @@
+export default {
+  props: {
+    buttonCssClass: {
+      type: String,
+      required: false,
+      default() {
+        return '';
+      }
+    }
+  },
+  methods: {
+    loadClocks(menuOptions) {
+      let clocks;
+
+      if (menuOptions) {
+        clocks = menuOptions
+          .map((menuOption) => menuOption.clock)
+          .filter(isDefinedAndUnique)
+          .map(this.getClock);
+      } else {
+        clocks = this.openmct.time.getAllClocks();
+      }
+
+      this.clocks = clocks.map(this.getClockMetadata);
+
+      function isDefinedAndUnique(key, index, array) {
+        return key !== undefined && array.indexOf(key) === index;
+      }
+    },
+    getActiveClock() {
+      const activeClock = this.openmct.time.getClock();
+
+      //Create copy of active clock so the time API does not get reactified.
+      return Object.create(activeClock);
+    },
+    getClock(key) {
+      return this.openmct.time.getAllClocks().find((clock) => clock.key === key);
+    },
+    getClockMetadata(clock) {
+      const key = clock.key;
+      const clockOptions = {
+        key,
+        name: clock.name,
+        description: 'Uses the system clock as the current time basis. ' + clock.description,
+        cssClass: clock.cssClass || 'icon-clock',
+        onItemClicked: () => this.setClock(key)
+      };
+
+      return clockOptions;
+    }
+  }
+};
diff --git a/src/plugins/timeConductor/conductor-axis.scss b/src/plugins/timeConductor/conductor-axis.scss
index b16a58f7184..3bfc60cb5f8 100644
--- a/src/plugins/timeConductor/conductor-axis.scss
+++ b/src/plugins/timeConductor/conductor-axis.scss
@@ -1,67 +1,67 @@
+@use 'sass:math';
+
 .c-conductor-axis {
-    $h: 18px;
-    $tickYPos: ($h / 2) + 12px;
+  $h: 18px;
+  $tickYPos: math.div($h, 2) + 12px;
 
-    @include userSelectNone();
-    @include bgTicks($c: rgba($colorBodyFg, 0.4));
-    background-position: 0 50%;
-    background-size: 5px 2px;
-    border-radius: $controlCr;
-    height: $h;
+  @include userSelectNone();
+  @include bgTicks($c: rgba($colorBodyFg, 0.4));
+  background-position: 0 50%;
+  background-size: 5px 2px;
+  border-radius: $controlCr;
+  height: $h;
 
-    svg {
-        text-rendering: geometricPrecision;
-        width: 100%;
-        height: 100%;
-        > g.axis {
-            // Overall Tick holder
-            transform: translateY($tickYPos);
-            path {
-                // Domain line
-                display: none;
-            }
+  svg {
+    text-rendering: geometricPrecision;
+    width: 100%;
+    height: 100%;
+    > g.axis {
+      // Overall Tick holder
+      transform: translateY($tickYPos);
+      path {
+        // Domain line
+        display: none;
+      }
 
-            g {
-                // Each tick. These move on drag.
-                line {
-                    // Line beneath ticks
-                    display: none;
-                }
-            }
+      g {
+        // Each tick. These move on drag.
+        line {
+          // Line beneath ticks
+          display: none;
         }
+      }
+    }
 
-        text {
-            // Tick labels
-            fill: $colorBodyFg;
-            font-size: 1em;
-            paint-order: stroke;
-            font-weight: bold;
-            stroke: $colorBodyBg;
-            stroke-linecap: butt;
-            stroke-linejoin: bevel;
-            stroke-width: 6px;
-        }
+    text {
+      // Tick labels
+      fill: $colorBodyFg;
+      font-size: 1em;
+      paint-order: stroke;
+      font-weight: bold;
+      stroke: $colorBodyBg;
+      stroke-linecap: butt;
+      stroke-linejoin: bevel;
+      stroke-width: 6px;
     }
+  }
 
-    body.desktop .is-fixed-mode & {
-        background-size: 3px 30%;
-        background-color: $colorBodyBgSubtle;
-        box-shadow: inset rgba(black, 0.4) 0 1px 1px;
-        transition: $transOut;
+  body.desktop .is-fixed-mode & {
+    background-size: 3px 30%;
+    background-color: $colorBodyBgSubtle;
+    box-shadow: inset rgba(black, 0.4) 0 1px 1px;
 
-        svg text {
-            fill: $colorBodyFg;
-            stroke: $colorBodyBgSubtle;
-            transition: $transOut;
-        }
+    svg text {
+      fill: $colorBodyFg;
+      stroke: $colorBodyBgSubtle;
     }
+  }
 
-    .is-realtime-mode & {
-        $c: 1px solid rgba($colorTime, 0.7);
-        border-left: $c;
-        border-right: $c;
-        svg text {
-            fill: $colorTime;
-        }
+  .is-realtime-mode & {
+    $c: 1px solid rgba($colorTimeRealtime, 0.7);
+    border-left: $c;
+    border-right: $c;
+    svg text {
+      fill: $colorTimeRealtime;
     }
+  }
 }
diff --git a/src/plugins/timeConductor/conductor-mode-icon.scss b/src/plugins/timeConductor/conductor-mode-icon.scss
index cc7748ed936..20bd6bd68aa 100644
--- a/src/plugins/timeConductor/conductor-mode-icon.scss
+++ b/src/plugins/timeConductor/conductor-mode-icon.scss
@@ -1,107 +1,181 @@
 @keyframes clock-hands {
-    0% { transform: translate(-50%, -50%) rotate(0deg); }
-    100% { transform: translate(-50%, -50%) rotate(360deg);  }
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
 }
 
 @keyframes clock-hands-sticky {
-    0% { transform: translate(-50%, -50%) rotate(0deg); }
-    7% { transform: translate(-50%, -50%) rotate(0deg); }
-    8% { transform: translate(-50%, -50%) rotate(30deg); }
-    15% { transform: translate(-50%, -50%) rotate(30deg); }
-    16% { transform: translate(-50%, -50%) rotate(60deg); }
-    24% { transform: translate(-50%, -50%) rotate(60deg); }
-    25% { transform: translate(-50%, -50%) rotate(90deg); }
-    32% { transform: translate(-50%, -50%) rotate(90deg); }
-    33% { transform: translate(-50%, -50%) rotate(120deg); }
-    40% { transform: translate(-50%, -50%) rotate(120deg); }
-    41% { transform: translate(-50%, -50%) rotate(150deg); }
-    49% { transform: translate(-50%, -50%) rotate(150deg); }
-    50% { transform: translate(-50%, -50%) rotate(180deg); }
-    57% { transform: translate(-50%, -50%) rotate(180deg); }
-    58% { transform: translate(-50%, -50%) rotate(210deg); }
-    65% { transform: translate(-50%, -50%) rotate(210deg); }
-    66% { transform: translate(-50%, -50%) rotate(240deg); }
-    74% { transform: translate(-50%, -50%) rotate(240deg); }
-    75% { transform: translate(-50%, -50%) rotate(270deg); }
-    82% { transform: translate(-50%, -50%) rotate(270deg); }
-    83% { transform: translate(-50%, -50%) rotate(300deg); }
-    90% { transform: translate(-50%, -50%) rotate(300deg); }
-    91% { transform: translate(-50%, -50%) rotate(330deg); }
-    99% { transform: translate(-50%, -50%) rotate(330deg); }
-    100% { transform: translate(-50%, -50%) rotate(360deg); }
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  7% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  8% {
+    transform: translate(-50%, -50%) rotate(30deg);
+  }
+  15% {
+    transform: translate(-50%, -50%) rotate(30deg);
+  }
+  16% {
+    transform: translate(-50%, -50%) rotate(60deg);
+  }
+  24% {
+    transform: translate(-50%, -50%) rotate(60deg);
+  }
+  25% {
+    transform: translate(-50%, -50%) rotate(90deg);
+  }
+  32% {
+    transform: translate(-50%, -50%) rotate(90deg);
+  }
+  33% {
+    transform: translate(-50%, -50%) rotate(120deg);
+  }
+  40% {
+    transform: translate(-50%, -50%) rotate(120deg);
+  }
+  41% {
+    transform: translate(-50%, -50%) rotate(150deg);
+  }
+  49% {
+    transform: translate(-50%, -50%) rotate(150deg);
+  }
+  50% {
+    transform: translate(-50%, -50%) rotate(180deg);
+  }
+  57% {
+    transform: translate(-50%, -50%) rotate(180deg);
+  }
+  58% {
+    transform: translate(-50%, -50%) rotate(210deg);
+  }
+  65% {
+    transform: translate(-50%, -50%) rotate(210deg);
+  }
+  66% {
+    transform: translate(-50%, -50%) rotate(240deg);
+  }
+  74% {
+    transform: translate(-50%, -50%) rotate(240deg);
+  }
+  75% {
+    transform: translate(-50%, -50%) rotate(270deg);
+  }
+  82% {
+    transform: translate(-50%, -50%) rotate(270deg);
+  }
+  83% {
+    transform: translate(-50%, -50%) rotate(300deg);
+  }
+  90% {
+    transform: translate(-50%, -50%) rotate(300deg);
+  }
+  91% {
+    transform: translate(-50%, -50%) rotate(330deg);
+  }
+  99% {
+    transform: translate(-50%, -50%) rotate(330deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
 }
 
-
 .c-clock-symbol {
-    $c: $colorBtnBg; //$colorObjHdrIc;
-    $d: 18px;
-    height: $d;
-    width: $d;
-    position: relative;
+  $c: rgba($colorBodyFg, 0.5);
+  $d: 16px;
+  height: $d;
+  width: $d;
+  position: relative;
+
+  &__outer {
+    // SVG brackets shape
+    width: 100%;
+    height: 100%;
+    fill: $c;
+  }
+
+  // Clock hands
+  div[class*='hand'] {
+    $handW: 2px;
+    $handH: $d * 0.4;
+    animation-iteration-count: infinite;
+    animation-timing-function: steps(12);
+    transform-origin: bottom;
+    position: absolute;
+    height: $handW;
+    width: $handW;
+    left: 50%;
+    top: 50%;
+    z-index: 2;
 
     &:before {
-        font-family: symbolsfont;
-        color: $c;
-        content: $glyph-icon-brackets;
-        font-size: $d;
-        line-height: normal;
-        display: block;
-        width: 100%;
-        height: 100%;
-        z-index: 1;
+      background: $c;
+      content: '';
+      display: block;
+      position: absolute;
+      width: 100%;
+      bottom: -1px;
+    }
+
+    &.hand-little {
+      z-index: 2;
+      animation-duration: 12s;
+      transform: translate(-50%, -50%) rotate(120deg);
+
+      &:before {
+        height: ceil($handH * 0.6);
+      }
+    }
+
+    &.hand-big {
+      z-index: 1;
+      animation-duration: 1s;
+      transform: translate(-50%, -50%);
+
+      &:before {
+        height: $handH;
+      }
+    }
+  }
+
+  // Modes
+  .is-realtime-mode &,
+  .is-lad-mode & {
+    $c: $colorTimeRealtimeFgSubtle;
+
+    .c-clock-symbol__outer {
+      // Brackets icon
+      fill: $c;
     }
 
-    // Clock hands
-    div[class*="hand"] {
-        $handW: 2px;
-        $handH: $d * 0.4;
-        animation-iteration-count: infinite;
-        animation-timing-function: steps(12);
-        transform-origin: bottom;
-        position: absolute;
-        height: $handW;
-        width: $handW;
-        left: 50%;
-        top: 50%;
-        z-index: 2;
-        &:before {
-            background: $c;
-            content: '';
-            display: block;
-            position: absolute;
-            width: 100%;
-            bottom: -1px;
-        }
-        &.hand-little {
-            z-index: 2;
-            animation-duration: 12s;
-            transform: translate(-50%, -50%) rotate(120deg);
-            &:before {
-                height: ceil($handH * 0.6);
-            }
-        }
-        &.hand-big {
-            z-index: 1;
-            animation-duration: 1s;
-            transform: translate(-50%, -50%);
-            &:before {
-                height: $handH;
-            }
-        }
+    div[class*='hand'] {
+      animation-name: clock-hands;
+
+      &:before {
+        background: $c;
+      }
     }
+  }
+}
+
+// Contexts
+.c-so-view--no-frame {
+  .c-compact-tc:not(.is-expanded) {
+    .c-clock-symbol {
+      $c: $frameControlsColorFg;
+
+      &__outer {
+        fill: $c;
+      }
 
-    // Modes
-    .is-realtime-mode &,
-    .is-lad-mode & {
-        &:before {
-            // Brackets icon
-            color: $colorTime;
-        }
-        div[class*="hand"] {
-            animation-name: clock-hands;
-            &:before {
-                background: $colorTime;
-            }
-        }
+      div[class*='hand']:before {
+        background: $c;
+      }
     }
+  }
 }
diff --git a/src/plugins/timeConductor/conductor-mode.scss b/src/plugins/timeConductor/conductor-mode.scss
deleted file mode 100644
index 6939cb00cfc..00000000000
--- a/src/plugins/timeConductor/conductor-mode.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.c-conductor__mode-menu {
-    max-height: 80vh;
-    max-width: 500px;
-    min-height: 250px;
-    z-index: 70;
-
-    [class*="__icon"] {
-        filter: $colorKeyFilter;
-    }
-
-    [class*="__item-description"] {
-        min-width: 200px;
-    }
-}
diff --git a/src/plugins/timeConductor/conductor.scss b/src/plugins/timeConductor/conductor.scss
index a5bbea6436f..cb6f4a8b07e 100644
--- a/src/plugins/timeConductor/conductor.scss
+++ b/src/plugins/timeConductor/conductor.scss
@@ -1,6 +1,6 @@
 .c-input--submit {
     // Can't use display: none because some browsers will pretend the input doesn't exist, and enter won't work
-    visibility: none;
+    visibility: hidden;
     height: 0;
     width: 0;
     padding: 0;
@@ -8,55 +8,30 @@
 
 /*********************************************** CONDUCTOR LAYOUT */
 .c-conductor {
-    &__time-bounds {
-        display: grid;
-        grid-column-gap: $interiorMargin;
-        grid-row-gap: $interiorMargin;
-        align-items: center;
-
-        // Default: fixed mode, desktop
-        grid-template-rows: 1fr;
-        grid-template-columns: 20px auto 1fr auto;
-        grid-template-areas: "tc-mode-icon tc-start tc-ticks tc-end";
-    }
-
-    &__mode-icon {
-        grid-area: tc-mode-icon;
-    }
-
-    &__start-fixed,
-    &__start-delta {
-        grid-area: tc-start;
+    &__inputs {
         display: flex;
-    }
+        flex: 0 0 auto;
 
-    &__end-fixed,
-    &__end-delta {
-        grid-area: tc-end;
-        display: flex;
-        justify-content: flex-end;
+        > * + * {
+            margin-left: $interiorMargin;
+        }
     }
 
     &__ticks {
-        grid-area: tc-ticks;
+        flex: 1 1 auto;
     }
 
     &__controls {
         grid-area: tc-controls;
         display: flex;
         align-items: center;
+
         > * + * {
             margin-left: $interiorMargin;
         }
     }
 
-    [class*='-delta'] {
-        &:before {
-            content: $glyph-icon-clock;
-            font-family: symbolsfont;
-        }
-    }
-
+    /************************************ FIXED MODE STYLING */
     &.is-fixed-mode {
         .c-conductor-axis {
             &__zoom-indicator {
@@ -71,7 +46,6 @@
                 &:hover,
                 &:active {
                     cursor: col-resize;
-                    filter: $timeConductorAxisHoverFilter;
                 }
             }
         }
@@ -111,74 +85,47 @@
                 background: rgba($timeConductorActiveBg, 0.4);
                 border-left-color: $timeConductorActiveBg;
                 border-right-color: $timeConductorActiveBg;
-                top: 0; bottom: 0;
+                top: 0;
+                bottom: 0;
             }
         }
     }
 
+    /************************************ REAL-TIME MODE STYLING */
     &.is-realtime-mode {
         .c-conductor__time-bounds {
             grid-template-columns: 20px auto 1fr auto auto;
-            grid-template-areas: "tc-mode-icon tc-start tc-ticks tc-updated tc-end";
+            grid-template-areas: 'tc-mode-icon tc-start tc-ticks tc-updated tc-end';
         }
 
         .c-conductor__end-fixed {
             grid-area: tc-updated;
         }
     }
+}
 
-    body.phone.portrait & {
-        .c-conductor__time-bounds {
-            grid-row-gap: $interiorMargin;
-            grid-template-rows: auto auto;
-            grid-template-columns: 20px auto auto;
-        }
-
-        .c-conductor__controls {
-            padding-left: 25px; // Line up visually with other controls
-        }
-
-        &__mode-icon {
-            grid-row: 1;
-        }
+.c-conductor-holder--compact {
+    flex: 0 1 auto;
+    overflow: hidden;
 
-        &__ticks,
-        &__zoom {
-            display: none;
+    .c-conductor {
+        &__inputs,
+        &__time-bounds {
+            display: flex;
+            flex: 0 1 auto;
+            overflow: hidden;
         }
 
-        &.is-fixed-mode {
-            [class*='__start-fixed'],
-            [class*='__end-fixed'] {
-                [class*='__label'] {
-                    // Start and end are in separate columns; make the labels line up
-                    width: 30px;
-                }
-            }
-
-            [class*='__end-input'] {
-                justify-content: flex-start;
-            }
-
-            .c-conductor__time-bounds {
-                grid-template-areas:
-                    "tc-mode-icon tc-start tc-start"
-                    "tc-mode-icon tc-end tc-end"
-                }
-            }
-
-        &.is-realtime-mode {
-            .c-conductor__time-bounds {
-                grid-template-areas:
-                    "tc-mode-icon tc-start tc-updated"
-                    "tc-mode-icon tc-end tc-end";
-            }
-
-            .c-conductor__end-fixed {
-                justify-content: flex-end;
+        &__inputs {
+            > * + * {
+                margin-left: $interiorMarginSm;
             }
         }
     }
+
+    .is-realtime-mode .c-conductor__end-fixed {
+        display: none !important;
+    }
 }
 
 .c-conductor-input {
@@ -196,38 +143,31 @@
         margin-right: $interiorMarginSm;
     }
 
-    .c-direction-indicator {
-        // Holds realtime-mode + and - symbols
-        font-size: 0.7em;
-    }
-
     input:invalid {
         background: rgba($colorFormInvalid, 0.5);
     }
 }
 
 .is-realtime-mode {
-    .c-conductor__controls button,
     .c-conductor__delta-button {
-        @include themedButton($colorTimeBg);
-        color: $colorTimeFg;
+        color: $colorTimeRealtimeFg;
     }
 
     .c-conductor-input {
         &:before {
-            color: $colorTime;
+            color: $colorTimeRealtimeFgSubtle;
         }
     }
 
     .c-conductor__end-fixed {
-        // Displays last RT udpate
-        color: $colorTime;
+        // Displays last RT update
+        color: $colorTimeRealtimeFgSubtle;
 
         input {
             // Remove input look
             background: none;
             box-shadow: none;
-            color: $colorTime;
+            color: $colorTimeRealtimeFgSubtle;
             pointer-events: none;
 
             &[disabled] {
@@ -237,8 +177,8 @@
     }
 }
 
-[class^='pr-tc-input-menu'] {
-    // Uses ^= here to target both start and end menus
+.pr-tc-input-menu--start,
+.pr-tc-input-menu--end {
     background: $colorBodyBg;
     border-radius: $controlCr;
     display: grid;
@@ -246,40 +186,441 @@
     grid-column-gap: 3px;
     grid-row-gap: 4px;
     align-items: start;
-    filter: $filterMenu;
     box-shadow: $shdwMenu;
-    padding: $interiorMargin;
+    padding: $interiorMarginLg;
     position: absolute;
+    left: 8px;
     bottom: 24px;
     z-index: 99;
 
-    &[class*='--start'] {
-        left: -25px;
+    &[class*='--bottom'] {
+        bottom: auto;
+        top: 24px;
+    }
+}
+
+.pr-tc-input-menu {
+    &__options {
+        display: flex;
+
+        > * + * {
+            margin-left: $interiorMargin;
+        }
     }
 
-    &[class*='--end'] {
-        right: 0;
+    &__input-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
+        grid-column-gap: 3px;
+        grid-row-gap: $interiorMargin;
+        align-items: start;
     }
 }
 
-[class^='pr-time'] {
-    &[class*='label'] {
+.l-shell__time-conductor .pr-tc-input-menu--end {
+    left: auto;
+    right: 0;
+}
+
+.pr-time-label {
+    font-size: 0.9em;
+    text-transform: uppercase;
+
+    &:before {
         font-size: 0.8em;
-        opacity: 0.6;
-        text-transform: uppercase;
+        margin-right: $interiorMarginSm;
     }
+}
 
-    &[class*='controls'] {
-        display: flex;
+.pr-time-input {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+
+    > * + * {
+        margin-left: $interiorMarginSm;
+    }
+
+    input {
+        height: 22px;
+        line-height: 1em;
+        font-size: 1.25em;
+    }
+
+    &--date input {
+        width: 85px;
+    }
+
+    &--time input {
+        width: 70px;
+    }
+
+    &--buttons {
+        > * + * {
+            margin-left: $interiorMargin;
+        }
+    }
+
+    &__start-end-sep {
+        height: 100%;
+    }
+
+    &--input-and-button {
+        @include wrappedInput();
+        padding-right: unset;
+    }
+}
+
+/*********************************************** COMPACT TIME CONDUCTOR */
+.c-compact-tc,
+.c-tc-input-popup {
+    [class*='start-end-sep'] {
+        opacity: 0.5;
+    }
+}
+
+.c-compact-tc {
+    border-radius: $controlCr;
+    display: flex;
+    flex: 0 1 auto;
+    align-items: center;
+    padding: 2px 0;
+
+    &__setting-wrapper {
+        display: contents;
+    }
+
+    &__setting-value {
+        border-right: 1px solid rgba($colorTimeCommonFg, 0.3);
+        cursor: pointer;
+        color: $colorTimeCommonFg;
         align-items: center;
+        display: flex;
+        flex: 0 1 auto;
+        overflow: hidden;
+        padding: 0 $fadeTruncateW;
+        position: relative;
+        max-width: max-content;
+        text-transform: uppercase;
         white-space: nowrap;
 
-        input {
-            height: 22px;
-            line-height: 22px;
-            margin-right: $interiorMarginSm;
-            font-size: 1.25em;
-            width: 42px;
+        > * + * {
+            margin-left: $interiorMarginSm;
+
+            &:before {
+                content: " - ";
+                display: inline-block;
+                opacity: 0.4;
+            }
+        }
+
+        &[class*="icon"] {
+            &:before {
+                font-size: 0.75em;
+                line-height: 80%;
+                margin-right: $interiorMarginSm;
+            }
+        }
+    }
+
+    .c-toggle-switch,
+    .c-clock-symbol,
+    .c-conductor__mode-icon {
+        // Used in independent Time Conductor
+        flex: 0 0 auto;
+    }
+
+    .c-toggle-switch {
+        margin-right: $interiorMarginSm;
+    }
+
+    .c-conductor__mode-icon {
+        margin-left: $interiorMargin;
+    }
+
+    .c-so-view & {
+        // Time Conductor in a Layout frame
+        padding: 3px 0;
+
+        .c-clock-symbol {
+            $h: 13px;
+            height: $h;
+            width: $h;
         }
+
+    [class*='button'] {
+      $p: 0px;
+      padding: $p $p + 2;
+    }
+  }
+
+  &.is-fixed-mode {
+    .c-conductor-axis {
+      &__zoom-indicator {
+        border: 1px solid transparent;
+        display: none; // Hidden by default
+      }
+    }
+
+    &:not(.is-panning),
+    &:not(.is-zooming) {
+      .c-conductor-axis {
+        &:hover,
+        &:active {
+          cursor: col-resize;
+        }
+      }
+    }
+
+    &.is-panning,
+    &.is-zooming {
+      .c-conductor-input input {
+        // Styles for inputs while zooming or panning
+        background: rgba($timeConductorActiveBg, 0.4);
+      }
+    }
+
+    &.alt-pressed {
+      .c-conductor-axis:hover {
+        // When alt is being pressed and user is hovering over the axis, set the cursor
+        @include cursorGrab();
+      }
+    }
+
+    &.is-panning {
+      .c-conductor-axis {
+        @include cursorGrab();
+        background-color: $timeConductorActivePanBg;
+        transition: $transIn;
+
+        svg text {
+          stroke: $timeConductorActivePanBg;
+          transition: $transIn;
+        }
+      }
+    }
+
+    &.is-zooming {
+      .c-conductor-axis__zoom-indicator {
+        display: block;
+        position: absolute;
+        background: rgba($timeConductorActiveBg, 0.4);
+        border-left-color: $timeConductorActiveBg;
+        border-right-color: $timeConductorActiveBg;
+        top: 0;
+        bottom: 0;
+      }
+    }
+  }
+}
+
+.u-fade-truncate,
+.u-fade-truncate--lg {
+    .is-fixed-mode & {
+        &:after {
+            @include fadeTruncate($color: $colorTimeFixedBg);
+        }
+    }
+
+    .is-realtime-mode & {
+        &:after {
+            @include fadeTruncate($color: $colorTimeRealtimeBg);
+        }
+    }
+}
+
+.itc-popout.c-tc-input-popup {
+    &--fixed-mode {
+        background: $colorTimeFixedBg;
+        color: $colorTimeFixedFgSubtle;
+
+        em,
+        .pr-time-label:before {
+            color: $colorTimeFixedFg;
+        }
+
+        &__bounds__valuelue {
+            color: $colorTimeFixedFg;
+        }
+
+        &__time-value {
+            color: $colorTimeFixedFg;
+        }
+
+        [class*='c-button--'] {
+            color: $colorTimeFixedBtnFg;
+
+            [class*='label'] {
+                color: $colorTimeRealtimeFg;
+            }
+        }
+    }
+}
+
+.is-fixed-mode.is-expanded {
+    &.c-compact-tc,
+    .c-tc-input-popup {
+        background: $colorTimeFixedBg;
+        color: $colorTimeFixedFgSubtle;
+
+        em,
+        .pr-time-label:before {
+            color: $colorTimeFixedFg;
+        }
+
+        &__bounds__valuelue {
+            color: $colorTimeFixedFg;
+        }
+
+        &__time-value {
+            color: $colorTimeFixedFg;
+        }
+
+        [class*='c-button--'] {
+            color: $colorTimeFixedBtnFg;
+
+            [class*='label'] {
+                color: $colorTimeRealtimeFg;
+            }
+        }
+    }
+
+    &.c-compact-tc {
+        @include hover {
+            $c: $colorTimeFixedHov;
+            background: $c;
+
+            [class*='u-fade-truncate']:after {
+                @include fadeTruncate($color: $c);
+            }
+        }
+    }
+}
+
+.itc-popout.c-tc-input-popup {
+    &--realtime-mode {
+        background: rgba($colorTimeRealtimeBg, 1);
+        color: $colorTimeRealtimeFgSubtle;
+
+        em,
+        .pr-time-label:before {
+            color: $colorTimeRealtimeFg;
+        }
+
+        &__bounds__valuelue {
+            color: $colorTimeRealtimeFg;
+        }
+
+        &__time-value {
+            color: $colorTimeRealtimeFg;
+        }
+
+        [class*='c-button--'] {
+            color: $colorTimeRealtimeBtnFg;
+
+            [class*='label'] {
+                color: $colorTimeRealtimeFg;
+            }
+        }
+    }
+}
+
+.is-realtime-mode.is-expanded {
+    &.c-compact-tc,
+    .c-tc-input-popup {
+        background: rgba($colorTimeRealtimeBg, 1);
+        color: $colorTimeRealtimeFgSubtle;
+
+        em,
+        .pr-time-label:before {
+            color: $colorTimeRealtimeFg;
+        }
+
+        &__bounds__valuelue {
+            color: $colorTimeRealtimeFg;
+        }
+
+        &__time-value {
+            color: $colorTimeRealtimeFg;
+        }
+
+        [class*='c-button--'] {
+            color: $colorTimeRealtimeBtnFg;
+
+            [class*='label'] {
+                color: $colorTimeRealtimeFg;
+            }
+        }
+    }
+
+    &.c-compact-tc {
+        @include hover {
+            $c: $colorTimeRealtimeHov;
+            background: $c;
+
+            [class*='u-fade-truncate']:after {
+                @include fadeTruncate($color: $c);
+            }
+        }
+    }
+
+    .pr-time-input input {
+        width: 3.5em; // Needed for Firefox
+    }
+}
+
+.c-compact-tc {
+    &.l-shell__time-conductor {
+        // Main view
+        min-height: 24px;
+    }
+}
+
+/*********************************************** INPUTS POPUP DIALOG */
+.c-tc-input-popup {
+    @include menuOuter();
+    padding: $interiorMarginLg;
+    position: absolute;
+    width: min-content;
+    bottom: 35px;
+
+    > * + * {
+        margin-top: $interiorMarginLg;
+    }
+
+    &[class*='--bottom'] {
+        bottom: auto;
+        top: 35px;
+    }
+
+    &__options {
+        display: flex;
+
+        > * + * {
+            margin-left: $interiorMargin;
+        }
+
+        .c-button--menu {
+            padding: cButtonPadding($compact: true);
+        }
+    }
+
+    &--fixed-mode {
+        .c-tc-input-popup__input-grid {
+            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 2fr;
+        }
+    }
+
+    &--realtime-mode {
+        .c-tc-input-popup__input-grid {
+            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
+        }
+    }
+
+    &__input-grid {
+        display: grid;
+        grid-column-gap: 3px;
+        grid-row-gap: $interiorMargin;
+        align-items: start;
     }
 }
diff --git a/src/plugins/timeConductor/conductorPopUpManager.js b/src/plugins/timeConductor/conductorPopUpManager.js
new file mode 100644
index 00000000000..2960608ef41
--- /dev/null
+++ b/src/plugins/timeConductor/conductorPopUpManager.js
@@ -0,0 +1,88 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import raf from '@/utils/raf';
+
+export default {
+  inject: ['openmct', 'configuration'],
+  data() {
+    return {
+      showConductorPopup: false,
+      positionX: 0,
+      positionY: 0,
+      conductorPopup: null
+    };
+  },
+  mounted() {
+    this.positionBox = raf(this.positionBox);
+    this.timeConductorOptionsHolder = this.$el;
+    this.timeConductorOptionsHolder.addEventListener('click', this.showPopup);
+  },
+  methods: {
+    initializePopup() {
+      this.conductorPopup = this.$refs.conductorPopup.$el;
+      this.$nextTick(() => {
+        window.addEventListener('resize', this.positionBox);
+        document.addEventListener('click', this.handleClickAway);
+        this.positionBox();
+      });
+    },
+    showPopup(clickEvent) {
+      const isAxis = clickEvent.target.closest('.c-conductor-axis') !== null;
+
+      if (isAxis || this.conductorPopup) {
+        return;
+      }
+
+      this.showConductorPopup = true;
+    },
+    positionBox() {
+      if (!this.conductorPopup) {
+        return;
+      }
+
+      const timeConductorOptionsBox = this.timeConductorOptionsHolder.getBoundingClientRect();
+      const offsetTop = this.conductorPopup.getBoundingClientRect().height;
+
+      this.positionY = timeConductorOptionsBox.top - offsetTop;
+      this.positionX = 0;
+    },
+    clearPopup() {
+      this.showConductorPopup = false;
+      this.conductorPopup = null;
+
+      document.removeEventListener('click', this.handleClickAway);
+      window.removeEventListener('resize', this.positionBox);
+    },
+    handleClickAway(clickAwayEvent) {
+      if (this.canClose(clickAwayEvent)) {
+        clickAwayEvent.stopPropagation();
+        this.clearPopup();
+      }
+    },
+    canClose(clickAwayEvent) {
+      const isChildMenu = clickAwayEvent.target.closest('.c-menu') !== null;
+      const isPopupElementItem = this.timeConductorOptionsHolder.contains(clickAwayEvent.target);
+
+      return !isChildMenu && !isPopupElementItem;
+    }
+  }
+};
diff --git a/src/plugins/timeConductor/date-picker.scss b/src/plugins/timeConductor/date-picker.scss
index 9ce416ca474..b502f5fb59c 100644
--- a/src/plugins/timeConductor/date-picker.scss
+++ b/src/plugins/timeConductor/date-picker.scss
@@ -4,6 +4,7 @@
     padding: $interiorMarginLg !important;
     display: flex !important; // Override .c-menu display: block;
     flex-direction: column;
+
     > * + * {
         margin-top: $interiorMargin;
     }
@@ -40,36 +41,42 @@
 
 /******************************************************** CALENDAR */
 .c-calendar {
+    $mutedOpacity: 0.5;
     display: grid;
     grid-template-columns: repeat(7, min-content);
     grid-template-rows: auto;
     grid-gap: 1px;
-    height: 100%;
 
-    $mutedOpacity: 0.5;
-
-    ul {
+    [class*="__row"] {
         display: contents;
-        &[class*='--header'] {
-            pointer-events: none;
-            li {
-                opacity: $mutedOpacity;
-            }
+    }
+
+    .c-calendar__row--header {
+        pointer-events: none;
+
+        .c-calendar-cell {
+            opacity: $mutedOpacity;
         }
     }
 
-    li {
+    .c-calendar-cell {
         display: flex;
         flex-direction: column;
-        justify-content: center !important;
+        align-items: center;
         padding: $interiorMargin;
+        cursor: pointer;
+
+        @include hover {
+            background: $colorMenuHovBg;
+        }
 
         &.is-in-month {
             background: $colorMenuElementHilite;
         }
 
         &.selected {
-            background: #1ac6ff; // this should be a variable... CHARLESSSSSS
+            background: $colorKeyBg;
+            color: $colorKeyFg;
         }
     }
 
diff --git a/src/plugins/timeConductor/independent/IndependentClock.vue b/src/plugins/timeConductor/independent/IndependentClock.vue
new file mode 100644
index 00000000000..79e532c84d4
--- /dev/null
+++ b/src/plugins/timeConductor/independent/IndependentClock.vue
@@ -0,0 +1,132 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div ref="clockMenuButton" class="c-ctrl-wrapper c-ctrl-wrapper--menus-up">
+    <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
+      <button
+        v-if="selectedClock"
+        class="c-icon-button c-button--menu js-clock-button"
+        :class="[buttonCssClass, selectedClock.cssClass]"
+        aria-label="Independent Time Conductor Clock Menu"
+        @click.prevent.stop="showClocksMenu"
+      >
+        <span class="c-button__label">{{ selectedClock.name }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { TIME_CONTEXT_EVENTS } from '../../../api/time/constants.js';
+import toggleMixin from '../../../ui/mixins/toggle-mixin.js';
+import clockMixin from '../clock-mixin.js';
+
+export default {
+  mixins: [toggleMixin, clockMixin],
+  inject: ['openmct'],
+  props: {
+    clock: {
+      type: String,
+      default() {
+        return undefined;
+      }
+    },
+    enabled: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    }
+  },
+  emits: ['independent-clock-updated'],
+  data() {
+    const activeClock = this.getActiveClock();
+
+    return {
+      selectedClock: activeClock ? this.getClockMetadata(activeClock) : undefined,
+      clocks: []
+    };
+  },
+  watch: {
+    clock(newClock, oldClock) {
+      this.setViewFromClock(newClock);
+    },
+    enabled(newValue, oldValue) {
+      if (newValue !== undefined && newValue !== oldValue && newValue === true) {
+        this.setViewFromClock(this.clock);
+      }
+    }
+  },
+  beforeUnmount() {
+    this.openmct.time.off(TIME_CONTEXT_EVENTS.clockChanged, this.setViewFromClock);
+  },
+  mounted: function () {
+    this.loadClocks();
+    this.setViewFromClock(this.clock);
+
+    this.openmct.time.on(TIME_CONTEXT_EVENTS.clockChanged, this.setViewFromClock);
+  },
+  methods: {
+    showClocksMenu() {
+      const elementBoundingClientRect = this.$refs.clockMenuButton.getBoundingClientRect();
+      const x = elementBoundingClientRect.x;
+      const y = elementBoundingClientRect.y + elementBoundingClientRect.height;
+
+      const menuOptions = {
+        menuClass: 'c-conductor__clock-menu c-super-menu--sm',
+        placement: this.openmct.menus.menuPlacement.BOTTOM_RIGHT
+      };
+      this.openmct.menus.showSuperMenu(x, y, this.clocks, menuOptions);
+    },
+    getMenuOptions() {
+      let currentGlobalClock = this.getActiveClock();
+
+      //Create copy of active clock so the time API does not get reactified.
+      currentGlobalClock = Object.assign(
+        {},
+        {
+          name: currentGlobalClock.name,
+          clock: currentGlobalClock.key,
+          timeSystem: this.openmct.time.getTimeSystem().key
+        }
+      );
+
+      return [currentGlobalClock];
+    },
+    setClock(clockKey) {
+      this.setViewFromClock(clockKey);
+
+      this.$emit('independent-clock-updated', clockKey);
+    },
+    setViewFromClock(clockOrKey) {
+      let clock = clockOrKey;
+
+      if (!clock.key) {
+        clock = this.getClock(clockOrKey);
+      }
+
+      // if global clock changes, reload and pull it
+      this.selectedClock = this.getClockMetadata(clock);
+    }
+  }
+};
+</script>
diff --git a/src/plugins/timeConductor/independent/IndependentMode.vue b/src/plugins/timeConductor/independent/IndependentMode.vue
new file mode 100644
index 00000000000..fe599a12e24
--- /dev/null
+++ b/src/plugins/timeConductor/independent/IndependentMode.vue
@@ -0,0 +1,102 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div ref="modeMenuButton" class="c-ctrl-wrapper c-ctrl-wrapper--menus-up">
+    <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
+      <button
+        class="c-icon-button c-button--menu js-mode-button"
+        :class="[buttonCssClass, selectedMode.cssClass]"
+        aria-label="Independent Time Conductor Mode Menu"
+        @click.prevent.stop="showModesMenu"
+      >
+        <span class="c-button__label">{{ selectedMode.name }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import toggleMixin from '../../../ui/mixins/toggle-mixin.js';
+import modeMixin from '../mode-mixin.js';
+
+export default {
+  mixins: [toggleMixin, modeMixin],
+  inject: ['openmct'],
+  props: {
+    mode: {
+      type: String,
+      default() {
+        return undefined;
+      }
+    },
+    enabled: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    }
+  },
+  emits: ['independent-mode-updated'],
+  data: function () {
+    return {
+      selectedMode: this.getModeMetadata(this.mode),
+      modes: []
+    };
+  },
+  watch: {
+    mode: {
+      handler(newMode) {
+        this.setViewFromMode(newMode);
+      }
+    },
+    enabled(newValue, oldValue) {
+      if (newValue !== undefined && newValue !== oldValue && newValue === true) {
+        this.setViewFromMode(this.mode);
+      }
+    }
+  },
+  mounted: function () {
+    this.loadModes();
+  },
+  methods: {
+    showModesMenu() {
+      const elementBoundingClientRect = this.$refs.modeMenuButton.getBoundingClientRect();
+      const x = elementBoundingClientRect.x;
+      const y = elementBoundingClientRect.y + elementBoundingClientRect.height;
+
+      const menuOptions = {
+        menuClass: 'c-conductor__mode-menu c-super-menu--sm',
+        placement: this.openmct.menus.menuPlacement.BOTTOM_RIGHT
+      };
+      this.openmct.menus.showSuperMenu(x, y, this.modes, menuOptions);
+    },
+    setViewFromMode(mode) {
+      this.selectedMode = this.getModeMetadata(mode);
+    },
+    setMode(mode) {
+      this.setViewFromMode(mode);
+
+      this.$emit('independent-mode-updated', mode);
+    }
+  }
+};
+</script>
diff --git a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
new file mode 100644
index 00000000000..a086151af0b
--- /dev/null
+++ b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
@@ -0,0 +1,326 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div
+    ref="timeConductorOptionsHolder"
+    class="c-compact-tc"
+    :class="[
+      isFixed ? 'is-fixed-mode' : independentTCEnabled ? 'is-realtime-mode' : 'is-fixed-mode',
+      { 'is-expanded': independentTCEnabled }
+    ]"
+  >
+    <ToggleSwitch
+      id="independentTCToggle"
+      class="c-toggle-switch--mini"
+      :checked="independentTCEnabled"
+      :name="toggleTitle"
+      @change="toggleIndependentTC"
+    />
+
+    <ConductorModeIcon />
+
+    <ConductorInputsFixed
+      v-if="showFixedInputs"
+      class="c-compact-tc__bounds--fixed"
+      :object-path="objectPath"
+      :read-only="true"
+      :compact="true"
+    />
+
+    <ConductorInputsRealtime
+      v-if="showRealtimeInputs"
+      class="c-compact-tc__bounds--real-time"
+      :object-path="objectPath"
+      :read-only="true"
+      :compact="true"
+    />
+    <div
+      v-if="independentTCEnabled"
+      role="button"
+      class="c-not-button c-not-button--compact c-compact-tc__gear icon-gear"
+      aria-label="Independent Time Conductor Settings"
+    ></div>
+
+    <ConductorPopUp
+      v-if="showConductorPopup"
+      ref="conductorPopup"
+      :object-path="objectPath"
+      :is-independent="true"
+      :time-options="timeOptions"
+      :is-fixed="isFixed"
+      :bottom="true"
+      :position-x="positionX"
+      :position-y="positionY"
+      @popup-loaded="initializePopup"
+      @independent-mode-updated="saveMode"
+      @independent-clock-updated="saveClock"
+      @fixed-bounds-updated="saveFixedBounds"
+      @clock-offsets-updated="saveClockOffsets"
+      @dismiss="clearPopup"
+    />
+  </div>
+</template>
+
+<script>
+import ConductorModeIcon from '@/plugins/timeConductor/ConductorModeIcon.vue';
+
+import { FIXED_MODE_KEY, TIME_CONTEXT_EVENTS } from '../../../api/time/constants.js';
+import ToggleSwitch from '../../../ui/components/ToggleSwitch.vue';
+import ConductorInputsFixed from '../ConductorInputsFixed.vue';
+import ConductorInputsRealtime from '../ConductorInputsRealtime.vue';
+import ConductorPopUp from '../ConductorPopUp.vue';
+import independentTimeConductorPopUpManager from './independentTimeConductorPopUpManager.js';
+
+export default {
+  components: {
+    ConductorModeIcon,
+    ConductorInputsRealtime,
+    ConductorInputsFixed,
+    ConductorPopUp,
+    ToggleSwitch
+  },
+  mixins: [independentTimeConductorPopUpManager],
+  inject: {
+    openmct: 'openmct',
+    configuration: {
+      from: 'configuration',
+      default: undefined
+    }
+  },
+  props: {
+    domainObject: {
+      type: Object,
+      required: true
+    },
+    objectPath: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: ['updated'],
+  data() {
+    const fixedOffsets = this.openmct.time.getBounds();
+    const clockOffsets = this.openmct.time.getClockOffsets();
+    const clock = this.openmct.time.getClock().key;
+    const mode = this.openmct.time.getMode();
+    const timeOptions = this.domainObject.configuration.timeOptions ?? {
+      clockOffsets,
+      fixedOffsets
+    };
+
+    timeOptions.clock = timeOptions.clock ?? clock;
+    timeOptions.mode = timeOptions.mode ?? mode;
+
+    // check for older configurations that stored a key
+    if (timeOptions.mode.key) {
+      timeOptions.mode = timeOptions.mode.key;
+    }
+
+    const isFixed = timeOptions.mode === FIXED_MODE_KEY;
+
+    return {
+      timeOptions,
+      isFixed,
+      independentTCEnabled: this.domainObject.configuration.useIndependentTime === true,
+      viewBounds: {
+        start: fixedOffsets.start,
+        end: fixedOffsets.end
+      }
+    };
+  },
+  computed: {
+    toggleTitle() {
+      return `${this.independentTCEnabled ? 'Disable' : 'Enable'} Independent Time Conductor`;
+    },
+    showFixedInputs() {
+      return this.isFixed && this.independentTCEnabled;
+    },
+    showRealtimeInputs() {
+      return !this.isFixed && this.independentTCEnabled;
+    }
+  },
+  watch: {
+    domainObject: {
+      handler(domainObject) {
+        const key = this.openmct.objects.makeKeyString(domainObject.identifier);
+        if (key !== this.keyString) {
+          //domain object has changed
+          this.destroyIndependentTime();
+
+          this.independentTCEnabled = domainObject.configuration.useIndependentTime === true;
+          this.timeOptions = domainObject.configuration.timeOptions ?? {
+            clockOffsets: this.openmct.time.getClockOffsets(),
+            fixedOffsets: this.openmct.time.getBounds()
+          };
+
+          // these may not be set due to older configurations
+          this.timeOptions.clock = this.timeOptions.clock ?? this.openmct.time.getClock().key;
+          this.timeOptions.mode = this.timeOptions.mode ?? this.openmct.time.getMode();
+
+          // check for older configurations that stored a key
+          if (this.timeOptions.mode.key) {
+            this.timeOptions.mode = this.timeOptions.mode.key;
+          }
+
+          this.isFixed = this.timeOptions.mode === FIXED_MODE_KEY;
+
+          this.initialize();
+        }
+      },
+      deep: true
+    },
+    objectPath: {
+      handler(newPath, oldPath) {
+        //domain object or view has probably changed
+        this.setTimeContext();
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.initialize();
+  },
+  beforeUnmount() {
+    this.stopFollowingTimeContext();
+    this.destroyIndependentTime();
+  },
+  methods: {
+    initialize() {
+      this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+      this.setTimeContext();
+
+      if (this.independentTCEnabled) {
+        this.registerIndependentTimeOffsets();
+      }
+    },
+    toggleIndependentTC() {
+      this.independentTCEnabled = !this.independentTCEnabled;
+
+      if (this.independentTCEnabled) {
+        this.registerIndependentTimeOffsets();
+      } else {
+        this.clearPopup();
+        this.destroyIndependentTime();
+      }
+
+      this.openmct.objects.mutate(
+        this.domainObject,
+        'configuration.useIndependentTime',
+        this.independentTCEnabled
+      );
+    },
+    setTimeContext() {
+      if (this.timeContext) {
+        this.stopFollowingTimeContext();
+      }
+
+      this.timeContext = this.openmct.time.getContextForView(this.objectPath);
+      this.timeContext.on(TIME_CONTEXT_EVENTS.clockChanged, this.setTimeOptionsClock);
+      this.timeContext.on(TIME_CONTEXT_EVENTS.modeChanged, this.setTimeOptionsMode);
+    },
+    stopFollowingTimeContext() {
+      this.timeContext.off(TIME_CONTEXT_EVENTS.clockChanged, this.setTimeOptionsClock);
+      this.timeContext.off(TIME_CONTEXT_EVENTS.modeChanged, this.setTimeOptionsMode);
+    },
+    setTimeOptionsClock(clock) {
+      this.setTimeOptionsOffsets();
+      this.timeOptions.clock = clock.key;
+    },
+    setTimeOptionsMode(mode) {
+      this.setTimeOptionsOffsets();
+      this.timeOptions.mode = mode;
+    },
+    setTimeOptionsOffsets() {
+      this.timeOptions.clockOffsets =
+        this.timeOptions.clockOffsets ?? this.timeContext.getClockOffsets();
+      this.timeOptions.fixedOffsets = this.timeOptions.fixedOffsets ?? this.timeContext.getBounds();
+    },
+    saveFixedBounds(bounds) {
+      const newOptions = this.updateTimeOptionProperty({
+        fixedOffsets: bounds
+      });
+      this.updateTimeOptions(newOptions);
+    },
+    saveClockOffsets(offsets) {
+      const newOptions = this.updateTimeOptionProperty({
+        clockOffsets: offsets
+      });
+
+      this.updateTimeOptions(newOptions);
+    },
+    saveMode(mode) {
+      this.isFixed = mode === FIXED_MODE_KEY;
+      const newOptions = this.updateTimeOptionProperty({
+        mode: mode
+      });
+
+      this.updateTimeOptions(newOptions);
+    },
+    saveClock(clock) {
+      const newOptions = this.updateTimeOptionProperty({
+        clock
+      });
+
+      this.updateTimeOptions(newOptions);
+    },
+    updateTimeOptions(options) {
+      this.timeOptions = options;
+
+      this.registerIndependentTimeOffsets();
+      this.$emit('updated', this.timeOptions); // no longer use this, but may be used elsewhere
+      this.openmct.objects.mutate(this.domainObject, 'configuration.timeOptions', this.timeOptions);
+    },
+    registerIndependentTimeOffsets() {
+      const timeContext = this.openmct.time.getIndependentContext(this.keyString);
+      let offsets;
+
+      if (this.isFixed) {
+        offsets = this.timeOptions.fixedOffsets ?? this.timeContext.getBounds();
+      } else {
+        offsets = this.timeOptions.clockOffsets ?? this.openmct.time.getClockOffsets();
+      }
+
+      if (!timeContext.hasOwnContext()) {
+        this.unregisterIndependentTime = this.openmct.time.addIndependentContext(
+          this.keyString,
+          offsets,
+          this.isFixed ? undefined : this.timeOptions.clock
+        );
+      } else {
+        if (!this.isFixed) {
+          timeContext.setClock(this.timeOptions.clock);
+        }
+
+        timeContext.setMode(this.timeOptions.mode, offsets);
+      }
+    },
+    destroyIndependentTime() {
+      if (this.unregisterIndependentTime) {
+        this.unregisterIndependentTime();
+      }
+    },
+    updateTimeOptionProperty(option) {
+      return Object.assign({}, this.timeOptions, option);
+    }
+  }
+};
+</script>
diff --git a/src/plugins/timeConductor/independent/independentTimeConductorPopUpManager.js b/src/plugins/timeConductor/independent/independentTimeConductorPopUpManager.js
new file mode 100644
index 00000000000..4bdcf2fbdbb
--- /dev/null
+++ b/src/plugins/timeConductor/independent/independentTimeConductorPopUpManager.js
@@ -0,0 +1,116 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import debounce from '@/utils/debounce';
+import raf from '@/utils/raf';
+
+export default {
+  data() {
+    return {
+      showConductorPopup: false,
+      positionX: -10000, // prevents initial flash after appending to body element
+      positionY: 0,
+      conductorPopup: null
+    };
+  },
+  beforeUnmount() {
+    if (this.conductorPopup && this.conductorPopup.parentNode === document.body) {
+      document.body.removeChild(this.conductorPopup);
+      this.conductorPopup = null;
+    }
+  },
+  mounted() {
+    this.positionBox = debounce(raf(this.positionBox), 250);
+    this.timeConductorOptionsHolder = this.$el;
+    this.timeConductorOptionsHolder.addEventListener('click', this.showPopup);
+  },
+  methods: {
+    initializePopup() {
+      this.conductorPopup = this.$refs.conductorPopup.$el;
+      // we need to append it the first time since the popup has overflow:hidden
+      // then we show/hide based on the flag
+      if (this.conductorPopup.parentNode !== document.body) {
+        document.body.appendChild(this.conductorPopup);
+      }
+      this.$nextTick(() => {
+        window.addEventListener('resize', this.positionBox);
+        document.addEventListener('click', this.handleClickAway);
+        this.positionBox();
+      });
+    },
+    showPopup(clickEvent) {
+      const isToggle = clickEvent.target.classList.contains('c-toggle-switch__slider');
+
+      // no current popup,
+      // itc toggled,
+      // something is emitting a dupe event with pointer id = -1, want to ignore those
+      // itc is currently enabled
+      if (!isToggle && clickEvent.pointerId !== -1 && this.independentTCEnabled) {
+        this.showConductorPopup = true;
+      }
+    },
+    handleClickAway(clickEvent) {
+      if (this.canClose(clickEvent)) {
+        this.clearPopup();
+      }
+    },
+    positionBox() {
+      if (!this.conductorPopup) {
+        return;
+      }
+
+      const timeConductorOptionsBox = this.timeConductorOptionsHolder.getBoundingClientRect();
+      const topHalf = timeConductorOptionsBox.top < window.innerHeight / 2;
+      const padding = 5;
+      const offsetTop = this.conductorPopup.getBoundingClientRect().height;
+      const popupRight = timeConductorOptionsBox.left + this.conductorPopup.clientWidth;
+      const offsetLeft = Math.min(window.innerWidth - popupRight, 0);
+
+      if (topHalf) {
+        this.positionY =
+          timeConductorOptionsBox.bottom + this.conductorPopup.clientHeight + padding;
+      } else {
+        this.positionY = timeConductorOptionsBox.top - padding;
+      }
+
+      this.positionX = timeConductorOptionsBox.left + offsetLeft;
+      this.positionY = this.positionY - offsetTop;
+    },
+    clearPopup() {
+      if (!this.conductorPopup) {
+        return;
+      }
+      this.showConductorPopup = false;
+      this.positionX = -10000; // reset it off screen
+
+      document.removeEventListener('click', this.handleClickAway);
+      window.removeEventListener('resize', this.positionBox);
+    },
+    canClose(clickAwayEvent) {
+      const isChildMenu = clickAwayEvent.target.closest('.c-menu') !== null;
+      const isPopupOrChild = clickAwayEvent.target.closest('.c-tc-input-popup') !== null;
+      const isTimeConductor = this.timeConductorOptionsHolder.contains(clickAwayEvent.target);
+      const isToggle = clickAwayEvent.target.classList.contains('c-toggle-switch__slider');
+
+      return !isTimeConductor && !isChildMenu && !isToggle && !isPopupOrChild;
+    }
+  }
+};
diff --git a/src/plugins/timeConductor/mode-mixin.js b/src/plugins/timeConductor/mode-mixin.js
new file mode 100644
index 00000000000..f8dc37db647
--- /dev/null
+++ b/src/plugins/timeConductor/mode-mixin.js
@@ -0,0 +1,51 @@
+import { FIXED_MODE_KEY, REALTIME_MODE_KEY } from '../../api/time/constants.js';
+
+export default {
+  props: {
+    buttonCssClass: {
+      type: String,
+      required: false,
+      default() {
+        return '';
+      }
+    }
+  },
+  methods: {
+    loadModes() {
+      this.modes = [FIXED_MODE_KEY, REALTIME_MODE_KEY].map(this.getModeMetadata);
+    },
+    getModeMetadata(mode, testIds = false) {
+      let modeOptions;
+      const key = mode;
+
+      if (key === FIXED_MODE_KEY) {
+        modeOptions = {
+          key,
+          name: 'Fixed Timespan',
+          description: 'Query and explore data that falls between two fixed datetimes.',
+          cssClass: 'icon-tabular',
+          onItemClicked: () => this.setMode(key)
+        };
+
+        if (testIds) {
+          modeOptions.testId = 'conductor-modeOption-fixed';
+        }
+      } else {
+        modeOptions = {
+          key,
+          name: 'Real-Time',
+          description:
+            'Monitor streaming data in real-time. The Time Conductor and displays will automatically advance themselves based on the active clock.',
+          cssClass: 'icon-clock',
+          onItemClicked: () => this.setMode(key)
+        };
+
+        if (testIds) {
+          modeOptions.testId = 'conductor-modeOption-realtime';
+        }
+      }
+
+      return modeOptions;
+    }
+  }
+};
diff --git a/src/plugins/timeConductor/plugin.js b/src/plugins/timeConductor/plugin.js
index 31dcaeed9a4..a8a9acbd78f 100644
--- a/src/plugins/timeConductor/plugin.js
+++ b/src/plugins/timeConductor/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,104 +20,140 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import Conductor from './Conductor.vue';
+import { markRaw } from 'vue';
+
+import { FIXED_MODE_KEY, REALTIME_MODE_KEY } from '../../api/time/constants.js';
+import Conductor from './ConductorComponent.vue';
 
 function isTruthy(a) {
-    return Boolean(a);
+  return Boolean(a);
 }
 
 function validateMenuOption(menuOption, index) {
-    if (menuOption.clock && !menuOption.clockOffsets) {
-        return `Conductor menu option is missing required property 'clockOffsets'. This field is required when configuring a menu option with a clock.\r\n${JSON.stringify(menuOption)}`;
-    }
-
-    if (!menuOption.timeSystem) {
-        return `Conductor menu option is missing required property 'timeSystem'\r\n${JSON.stringify(menuOption)}`;
-    }
-
-    if (!menuOption.bounds && !menuOption.clock) {
-        return `Conductor menu option is missing required property 'bounds'. This field is required when configuring a menu option with fixed bounds.\r\n${JSON.stringify(menuOption)}`;
-    }
+  if (menuOption.clock && !menuOption.clockOffsets) {
+    return `Conductor menu option is missing required property 'clockOffsets'. This field is required when configuring a menu option with a clock.\r\n${JSON.stringify(
+      menuOption
+    )}`;
+  }
+
+  if (!menuOption.timeSystem) {
+    return `Conductor menu option is missing required property 'timeSystem'\r\n${JSON.stringify(
+      menuOption
+    )}`;
+  }
+
+  if (!menuOption.bounds && !menuOption.clock) {
+    return `Conductor menu option is missing required property 'bounds'. This field is required when configuring a menu option with fixed bounds.\r\n${JSON.stringify(
+      menuOption
+    )}`;
+  }
 }
 
 function hasRequiredOptions(config) {
-    if (config === undefined
-        || config.menuOptions === undefined
-        || config.menuOptions.length === 0) {
-        return "You must specify one or more 'menuOptions'.";
-    }
+  if (config === undefined || config.menuOptions === undefined || config.menuOptions.length === 0) {
+    return "You must specify one or more 'menuOptions'.";
+  }
 
-    if (config.menuOptions.some(validateMenuOption)) {
-        return config.menuOptions.map(validateMenuOption)
-            .filter(isTruthy)
-            .join('\n');
-    }
+  if (config.menuOptions.some(validateMenuOption)) {
+    return config.menuOptions.map(validateMenuOption).filter(isTruthy).join('\n');
+  }
 
-    return undefined;
+  return undefined;
 }
 
 function validateConfiguration(config, openmct) {
-    const systems = openmct.time.getAllTimeSystems()
-        .reduce(function (m, ts) {
-            m[ts.key] = ts;
-
-            return m;
-        }, {});
-    const clocks = openmct.time.getAllClocks()
-        .reduce(function (m, c) {
-            m[c.key] = c;
-
-            return m;
-        }, {});
-
-    return config.menuOptions.map(function (menuOption) {
-        let message = '';
-        if (menuOption.timeSystem && !systems[menuOption.timeSystem]) {
-            message = `Time system '${menuOption.timeSystem}' has not been registered: \r\n ${JSON.stringify(menuOption)}`;
-        }
-
-        if (menuOption.clock && !clocks[menuOption.clock]) {
-            message = `Clock '${menuOption.clock}' has not been registered: \r\n ${JSON.stringify(menuOption)}`;
-        }
-
-        return message;
-    }).filter(isTruthy).join('\n');
+  const systems = openmct.time.getAllTimeSystems().reduce(function (m, ts) {
+    m[ts.key] = ts;
+
+    return m;
+  }, {});
+  const clocks = openmct.time.getAllClocks().reduce(function (m, c) {
+    m[c.key] = c;
+
+    return m;
+  }, {});
+
+  return config.menuOptions
+    .map(function (menuOption) {
+      let message = '';
+      if (menuOption.timeSystem && !systems[menuOption.timeSystem]) {
+        message = `Time system '${
+          menuOption.timeSystem
+        }' has not been registered: \r\n ${JSON.stringify(menuOption)}`;
+      }
+
+      if (menuOption.clock && !clocks[menuOption.clock]) {
+        message = `Clock '${menuOption.clock}' has not been registered: \r\n ${JSON.stringify(
+          menuOption
+        )}`;
+      }
+
+      return message;
+    })
+    .filter(isTruthy)
+    .join('\n');
 }
 
 function throwIfError(configResult) {
-    if (configResult) {
-        throw new Error(`Invalid Time Conductor Configuration. ${configResult} \r\n https://github.com/nasa/openmct/blob/master/API.md#the-time-conductor`);
-    }
+  if (configResult) {
+    throw new Error(
+      `Invalid Time Conductor Configuration. ${configResult} \r\n https://github.com/nasa/openmct/blob/master/API.md#the-time-conductor`
+    );
+  }
 }
 
 function mountComponent(openmct, configuration) {
-    openmct.layout.conductorComponent = Object.create({
-        components: {
-            Conductor
-        },
-        template: "<conductor></conductor>",
-        provide: {
-            openmct: openmct,
-            configuration: configuration
-        }
-    });
+  const conductorApp = {
+    components: {
+      Conductor
+    },
+    provide: {
+      openmct: openmct,
+      configuration: configuration
+    },
+    template: '<conductor />'
+  };
+  openmct.layout.conductorComponent = markRaw(conductorApp);
 }
 
 export default function (config) {
-    return function (openmct) {
-        let configResult = hasRequiredOptions(config) || validateConfiguration(config, openmct);
-        throwIfError(configResult);
-
-        const defaults = config.menuOptions[0];
-        if (defaults.clock) {
-            openmct.time.clock(defaults.clock, defaults.clockOffsets);
-            openmct.time.timeSystem(defaults.timeSystem, openmct.time.bounds());
-        } else {
-            openmct.time.timeSystem(defaults.timeSystem, defaults.bounds);
-        }
-
-        openmct.on('start', function () {
-            mountComponent(openmct, config);
-        });
-    };
+  return function (openmct) {
+    let configResult = hasRequiredOptions(config) || validateConfiguration(config, openmct);
+    throwIfError(configResult);
+
+    const defaults = config.menuOptions[0];
+    const defaultClock = defaults.clock;
+    const defaultMode = defaultClock ? REALTIME_MODE_KEY : FIXED_MODE_KEY;
+    const defaultBounds = defaults?.bounds;
+    let clockOffsets = openmct.time.getClockOffsets();
+
+    if (defaultClock) {
+      openmct.time.setClock(defaults.clock);
+      clockOffsets = defaults.clockOffsets;
+    } else {
+      // always have an active clock, regardless of mode
+      const firstClock = config.menuOptions.find((option) => option.clock);
+
+      if (firstClock) {
+        openmct.time.setClock(firstClock.clock);
+        clockOffsets = firstClock.clockOffsets;
+      }
+    }
+
+    openmct.time.setMode(defaultMode, defaultClock ? clockOffsets : defaultBounds);
+    openmct.time.setTimeSystem(defaults.timeSystem, defaultBounds);
+
+    //We are going to set the clockOffsets in fixed time mode since the conductor components down the line need these
+    if (clockOffsets && defaultMode === FIXED_MODE_KEY) {
+      openmct.time.setClockOffsets(clockOffsets);
+    }
+    //We are going to set the fixed time bounds in realtime time mode since the conductor components down the line need these
+    if (defaultBounds && defaultMode === REALTIME_MODE_KEY) {
+      openmct.time.setBounds(clockOffsets);
+    }
+
+    openmct.on('start', function () {
+      mountComponent(openmct, config);
+    });
+  };
 }
diff --git a/src/plugins/timeConductor/pluginSpec.js b/src/plugins/timeConductor/pluginSpec.js
new file mode 100644
index 00000000000..93e68f74f9c
--- /dev/null
+++ b/src/plugins/timeConductor/pluginSpec.js
@@ -0,0 +1,192 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createMouseEvent, createOpenMct, resetApplicationState } from 'utils/testing';
+import { nextTick } from 'vue';
+
+import { FIXED_MODE_KEY } from '../../api/time/constants.js';
+import { getPreciseDuration, millisecondsToDHMS } from '../../utils/duration.js';
+import ConductorPlugin from './plugin.js';
+
+const THIRTY_SECONDS = 30 * 1000;
+const ONE_MINUTE = THIRTY_SECONDS * 2;
+const FIVE_MINUTES = ONE_MINUTE * 5;
+const FIFTEEN_MINUTES = FIVE_MINUTES * 3;
+const THIRTY_MINUTES = FIFTEEN_MINUTES * 2;
+const date = new Date(Date.UTC(78, 0, 20, 0, 0, 0)).getTime();
+
+describe('time conductor', () => {
+  let element;
+  let child;
+  let appHolder;
+  let openmct;
+  let config = {
+    menuOptions: [
+      {
+        name: 'FixedTimeRange',
+        timeSystem: 'utc',
+        bounds: {
+          start: date - THIRTY_MINUTES,
+          end: date
+        },
+        presets: [],
+        records: 2
+      },
+      {
+        name: 'LocalClock',
+        timeSystem: 'utc',
+        clock: 'local',
+        clockOffsets: {
+          start: -THIRTY_MINUTES,
+          end: THIRTY_SECONDS
+        },
+        presets: []
+      }
+    ]
+  };
+
+  beforeEach((done) => {
+    openmct = createOpenMct();
+    openmct.install(new ConductorPlugin(config));
+    element = document.createElement('div');
+    element.style.width = '640px';
+    element.style.height = '480px';
+    child = document.createElement('div');
+    child.style.width = '640px';
+    child.style.height = '480px';
+    element.appendChild(child);
+
+    openmct.on('start', () => {
+      openmct.time.setMode(FIXED_MODE_KEY, {
+        start: config.menuOptions[0].bounds.start,
+        end: config.menuOptions[0].bounds.end
+      });
+      nextTick(() => {
+        done();
+      });
+    });
+    appHolder = document.createElement('div');
+    openmct.start(appHolder);
+  });
+
+  afterEach(() => {
+    appHolder = undefined;
+    openmct = undefined;
+
+    return resetApplicationState(openmct);
+  });
+
+  describe('in fixed time mode', () => {
+    it('shows delta inputs', () => {
+      const fixedModeEl = appHolder.querySelector('.is-fixed-mode');
+      const dateTimeInputs = fixedModeEl.querySelectorAll('.c-compact-tc__setting-value__elem');
+      expect(dateTimeInputs[0].innerHTML.trim()).toEqual('Fixed Timespan');
+      expect(dateTimeInputs[1].innerHTML.trim()).toEqual('Local Clock');
+      expect(dateTimeInputs[2].innerHTML.trim()).toEqual('UTC');
+      const dateTimes = fixedModeEl.querySelectorAll('.c-compact-tc__setting-value');
+      expect(dateTimes[1].innerHTML.trim()).toEqual('1978-01-19 23:30:00.000Z');
+      expect(dateTimes[2].innerHTML.trim()).toEqual('1978-01-20 00:00:00.000Z');
+    });
+  });
+
+  describe('in realtime mode', () => {
+    beforeEach(async () => {
+      openmct.time.setClockOffsets({
+        start: -THIRTY_MINUTES,
+        end: THIRTY_SECONDS
+      });
+
+      const switcher = appHolder.querySelector('.is-fixed-mode');
+      const clickEvent = createMouseEvent('click');
+      switcher.dispatchEvent(clickEvent);
+      await nextTick();
+      const modeButton = switcher.querySelector('.c-tc-input-popup .c-button--menu');
+      const clickEvent1 = createMouseEvent('click');
+      modeButton.dispatchEvent(clickEvent1);
+      await nextTick();
+      const clockItem = document.querySelectorAll(
+        '.c-conductor__mode-menu .c-super-menu__menu li'
+      )[1];
+      const clickEvent2 = createMouseEvent('click');
+      clockItem.dispatchEvent(clickEvent2);
+      await nextTick();
+      await nextTick();
+    });
+
+    it('shows delta inputs', () => {
+      const realtimeModeEl = appHolder.querySelector('.is-realtime-mode');
+      const dateTimeInputs = realtimeModeEl.querySelectorAll('.c-compact-tc__setting-value__elem');
+      expect(dateTimeInputs[0].innerHTML.trim()).toEqual('Real-Time');
+
+      const dateTimes = realtimeModeEl.querySelectorAll('.c-compact-tc__setting-value');
+      expect(dateTimes[1].innerHTML.replace(/[^(\d|:)]/g, '')).toEqual('00:30:00');
+      expect(dateTimes[2].innerHTML.replace(/[^(\d|:)]/g, '')).toEqual('00:00:30');
+    });
+
+    it('shows clock options', () => {
+      const realtimeModeEl = appHolder.querySelector('.is-realtime-mode');
+      const dateTimeInputs = realtimeModeEl.querySelectorAll('.c-compact-tc__setting-value__elem');
+      expect(dateTimeInputs[1].innerHTML.trim()).toEqual('Local Clock');
+    });
+
+    it('shows the current time', () => {
+      const realtimeModeEl = appHolder.querySelector('.is-realtime-mode');
+      const currentTimeEl = realtimeModeEl.querySelector('.c-compact-tc__current-update');
+      const currentTime = openmct.time.clock().currentValue();
+      const { start, end } = openmct.time.bounds();
+
+      expect(currentTime).toBeGreaterThan(start);
+      expect(currentTime).toBeLessThanOrEqual(end);
+      expect(currentTimeEl.innerHTML.trim().length).toBeGreaterThan(0);
+    });
+  });
+});
+
+describe('duration functions', () => {
+  it('should transform milliseconds to DHMS', () => {
+    const functionResults = [
+      millisecondsToDHMS(0),
+      millisecondsToDHMS(86400000),
+      millisecondsToDHMS(129600000),
+      millisecondsToDHMS(661824000),
+      millisecondsToDHMS(213927028)
+    ];
+    const validResults = [' ', '+ 1d', '+ 1d 12h', '+ 7d 15h 50m 24s', '+ 2d 11h 25m 27s 28ms'];
+    expect(validResults).toEqual(functionResults);
+  });
+
+  it('should get precise duration', () => {
+    const functionResults = [
+      getPreciseDuration(0),
+      getPreciseDuration(643680000),
+      getPreciseDuration(1605312000),
+      getPreciseDuration(213927028)
+    ];
+    const validResults = [
+      '00:00:00:00:000',
+      '07:10:48:00:000',
+      '18:13:55:12:000',
+      '02:11:25:27:028'
+    ];
+    expect(validResults).toEqual(functionResults);
+  });
+});
diff --git a/src/plugins/timeConductor/timePopup.vue b/src/plugins/timeConductor/timePopup.vue
deleted file mode 100644
index d4ead58817e..00000000000
--- a/src/plugins/timeConductor/timePopup.vue
+++ /dev/null
@@ -1,173 +0,0 @@
-<template>
-<div
-    class="pr-tc-input-menu"
-    @keydown.enter.prevent
-    @keyup.enter.prevent="submit"
-    @keydown.esc.prevent
-    @keyup.esc.prevent="hide"
-    @click.stop
->
-    <div class="pr-time-label__hrs">Hrs</div>
-    <div class="pr-time-label__mins">Mins</div>
-    <div class="pr-time-label__secs">Secs</div>
-
-    <div class="pr-time-controls">
-        <input
-            ref="inputHrs"
-            v-model="inputHrs"
-            class="pr-time-controls__hrs"
-            step="1"
-            type="number"
-            min="0"
-            max="23"
-            title="Enter 0 - 23"
-            @change="validate()"
-            @keyup="validate()"
-            @focusin="selectAll($event)"
-            @focusout="format('inputHrs')"
-            @wheel="increment($event, 'inputHrs')"
-        >
-        :
-    </div>
-    <div class="pr-time-controls">
-        <input
-            ref="inputMins"
-            v-model="inputMins"
-            type="number"
-            class="pr-time-controls__mins"
-            min="0"
-            max="59"
-            title="Enter 0 - 59"
-            step="1"
-            @change="validate()"
-            @keyup="validate()"
-            @focusin="selectAll($event)"
-            @focusout="format('inputMins')"
-            @wheel="increment($event, 'inputMins')"
-        >
-        :
-    </div>
-    <div class="pr-time-controls">
-        <input
-            ref="inputSecs"
-            v-model="inputSecs"
-            type="number"
-            class="pr-time-controls__secs"
-            min="0"
-            max="59"
-            title="Enter 0 - 59"
-            step="1"
-            @change="validate()"
-            @keyup="validate()"
-            @focusin="selectAll($event)"
-            @focusout="format('inputSecs')"
-            @wheel="increment($event, 'inputSecs')"
-        >
-        <div class="pr-time__buttons">
-            <button
-                class="c-button c-button--major icon-check"
-                :disabled="isDisabled"
-                @click.prevent="submit"
-            ></button>
-            <button class="c-button icon-x"
-                    @click.prevent="hide"
-            ></button>
-        </div>
-    </div>
-</div>
-</template>
-
-<script>
-
-export default {
-    props: {
-        type: {
-            type: String,
-            required: true
-        },
-        offset: {
-            type: String,
-            required: true
-        }
-    },
-    data() {
-        return {
-            inputHrs: '00',
-            inputMins: '00',
-            inputSecs: '00',
-            isDisabled: false
-        };
-    },
-    mounted() {
-        this.setOffset();
-        document.addEventListener('click', this.hide);
-    },
-    beforeDestroy() {
-        document.removeEventListener('click', this.hide);
-    },
-    methods: {
-        format(ref) {
-            const curVal = this[ref];
-            this[ref] = curVal.padStart(2, '0');
-        },
-        validate() {
-            let disabled = false;
-            let refs = ['inputHrs', 'inputMins', 'inputSecs'];
-
-            for (let ref of refs) {
-                let min = Number(this.$refs[ref].min);
-                let max = Number(this.$refs[ref].max);
-                let value = Number(this.$refs[ref].value);
-
-                if (value > max || value < min) {
-                    disabled = true;
-                    break;
-                }
-            }
-
-            this.isDisabled = disabled;
-        },
-        submit() {
-            this.$emit('update', {
-                type: this.type,
-                hours: this.inputHrs,
-                minutes: this.inputMins,
-                seconds: this.inputSecs
-            });
-        },
-        hide() {
-            this.$emit('hide');
-        },
-        increment($ev, ref) {
-            $ev.preventDefault();
-            const step = (ref === 'inputHrs') ? 1 : 5;
-            const maxVal = (ref === 'inputHrs') ? 23 : 59;
-            let cv = Math.round(parseInt(this[ref], 10) / step) * step;
-            cv = Math.min(maxVal, Math.max(0, ($ev.deltaY < 0) ? cv + step : cv - step));
-            this[ref] = cv.toString().padStart(2, '0');
-            this.validate();
-        },
-        setOffset() {
-            [this.inputHrs, this.inputMins, this.inputSecs] = this.offset.split(':');
-            this.numberSelect('inputHrs');
-        },
-        numberSelect(input) {
-            this.$refs[input].focus();
-
-            // change to text, select, then change back to number
-            // number inputs do not support select()
-            this.$nextTick(() => {
-                this.$refs[input].setAttribute('type', 'text');
-                this.$refs[input].select();
-
-                this.$nextTick(() => {
-                    this.$refs[input].setAttribute('type', 'number');
-                });
-            });
-        },
-        selectAll($ev) {
-            $ev.target.select();
-        }
-    }
-};
-</script>
diff --git a/src/plugins/timeConductor/utcMultiTimeFormat.js b/src/plugins/timeConductor/utcMultiTimeFormat.js
index d7ccec54808..cfd858f1122 100644
--- a/src/plugins/timeConductor/utcMultiTimeFormat.js
+++ b/src/plugins/timeConductor/utcMultiTimeFormat.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -23,44 +23,67 @@
 import moment from 'moment';
 
 export default function multiFormat(date) {
-    const momentified = moment.utc(date);
-    /**
-     * Uses logic from d3 Time-Scales, v3 of the API. See
-     * https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Scales.md
-     *
-     * Licensed
-     */
-    const format = [
-        [".SSS", function (m) {
-            return m.milliseconds();
-        }],
-        [":ss", function (m) {
-            return m.seconds();
-        }],
-        ["HH:mm", function (m) {
-            return m.minutes();
-        }],
-        ["HH:mm", function (m) {
-            return m.hours();
-        }],
-        ["ddd DD", function (m) {
-            return m.days()
-                && m.date() !== 1;
-        }],
-        ["MMM DD", function (m) {
-            return m.date() !== 1;
-        }],
-        ["MMMM", function (m) {
-            return m.month();
-        }],
-        ["YYYY", function () {
-            return true;
-        }]
-    ].filter(function (row) {
-        return row[1](momentified);
-    })[0][0];
+  const momentified = moment.utc(date);
+  /**
+   * Uses logic from d3 Time-Scales, v3 of the API. See
+   * https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Scales.md
+   *
+   * Licensed
+   */
+  const format = [
+    [
+      '.SSS',
+      function (m) {
+        return m.milliseconds();
+      }
+    ],
+    [
+      ':ss',
+      function (m) {
+        return m.seconds();
+      }
+    ],
+    [
+      'HH:mm',
+      function (m) {
+        return m.minutes();
+      }
+    ],
+    [
+      'HH:mm',
+      function (m) {
+        return m.hours();
+      }
+    ],
+    [
+      'ddd DD',
+      function (m) {
+        return m.days() && m.date() !== 1;
+      }
+    ],
+    [
+      'MMM DD',
+      function (m) {
+        return m.date() !== 1;
+      }
+    ],
+    [
+      'MMMM',
+      function (m) {
+        return m.month();
+      }
+    ],
+    [
+      'YYYY',
+      function () {
+        return true;
+      }
+    ]
+  ].filter(function (row) {
+    return row[1](momentified);
+  })[0][0];
 
-    if (format !== undefined) {
-        return moment.utc(date).format(format);
-    }
+  if (format !== undefined) {
+    return moment.utc(date).format(format);
+  }
 }
diff --git a/src/plugins/timeline/TimelineCompositionPolicy.js b/src/plugins/timeline/TimelineCompositionPolicy.js
new file mode 100644
index 00000000000..150f46217aa
--- /dev/null
+++ b/src/plugins/timeline/TimelineCompositionPolicy.js
@@ -0,0 +1,70 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+const ALLOWED_TYPES = ['telemetry.plot.overlay', 'telemetry.plot.stacked', 'plan', 'gantt-chart'];
+const DISALLOWED_TYPES = ['telemetry.plot.bar-graph', 'telemetry.plot.scatter-plot'];
+export default function TimelineCompositionPolicy(openmct) {
+  function hasNumericTelemetry(domainObject, metadata) {
+    const hasTelemetry = openmct.telemetry.isTelemetryObject(domainObject);
+    if (!hasTelemetry || !metadata) {
+      return false;
+    }
+
+    return metadata.values().length > 0 && hasDomainAndRange(metadata);
+  }
+
+  function hasDomainAndRange(metadata) {
+    return (
+      metadata.valuesForHints(['range']).length > 0 &&
+      metadata.valuesForHints(['domain']).length > 0
+    );
+  }
+
+  function hasImageTelemetry(domainObject, metadata) {
+    if (!metadata) {
+      return false;
+    }
+
+    return metadata.valuesForHints(['image']).length > 0;
+  }
+
+  return {
+    allow: function (parent, child) {
+      if (parent.type === 'time-strip') {
+        const metadata = openmct.telemetry.getMetadata(child);
+
+        if (
+          !DISALLOWED_TYPES.includes(child.type) &&
+          (hasNumericTelemetry(child, metadata) ||
+            hasImageTelemetry(child, metadata) ||
+            ALLOWED_TYPES.includes(child.type))
+        ) {
+          return true;
+        }
+
+        return false;
+      }
+
+      return true;
+    }
+  };
+}
diff --git a/src/plugins/timeline/TimelineObjectView.vue b/src/plugins/timeline/TimelineObjectView.vue
index 8b07d77ff37..4695a2d712d 100644
--- a/src/plugins/timeline/TimelineObjectView.vue
+++ b/src/plugins/timeline/TimelineObjectView.vue
@@ -1,112 +1,149 @@
-/*****************************************************************************
-* Open MCT, Copyright (c) 2014-2021, United States Government
-* as represented by the Administrator of the National Aeronautics and Space
-* Administration. All rights reserved.
-*
-* Open MCT is licensed under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-* http://www.apache.org/licenses/LICENSE-2.0.
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-* License for the specific language governing permissions and limitations
-* under the License.
-*
-* Open MCT includes source code licensed under additional open source
-* licenses. See the Open Source Licenses file (LICENSES.md) included with
-* this source code distribution or the Licensing information page available
-* at runtime from the About dialog for additional information.
-*****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
 <template>
-<swim-lane :icon-class="item.type.definition.cssClass"
-           :min-height="item.height"
-           :show-ucontents="item.domainObject.type === 'plan'"
-           :span-rows-count="item.rowCount"
->
-    <template slot="label">
-        {{ item.domainObject.name }}
+  <swim-lane
+    :icon-class="item.type.definition.cssClass"
+    :status="status"
+    :min-height="item.height"
+    :show-ucontents="isPlanLikeObject(item.domainObject)"
+    :span-rows-count="item.rowCount"
+    :domain-object="item.domainObject"
+  >
+    <template #label>
+      {{ item.domainObject.name }}
     </template>
-    <object-view
+    <template #object>
+      <object-view
         ref="objectView"
-        slot="object"
         class="u-contents"
         :default-object="item.domainObject"
         :object-path="item.objectPath"
-    />
-</swim-lane>
+        @change-action-collection="setActionCollection"
+      />
+    </template>
+  </swim-lane>
 </template>
 
 <script>
 import ObjectView from '@/ui/components/ObjectView.vue';
-import SwimLane from "@/ui/components/swim-lane/SwimLane.vue";
+import SwimLane from '@/ui/components/swim-lane/SwimLane.vue';
 
 export default {
-    components: {
-        ObjectView,
-        SwimLane
-    },
-    inject: ['openmct'],
-    props: {
-        item: {
-            type: Object,
-            required: true
-        }
-    },
-    data() {
-        return {
-            domainObject: undefined,
-            mutablePromise: undefined
-        };
-    },
-    watch: {
-        item(newItem) {
-            if (!this.context) {
-                return;
-            }
+  components: {
+    ObjectView,
+    SwimLane
+  },
+  inject: ['openmct'],
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      domainObject: undefined,
+      mutablePromise: undefined,
+      status: ''
+    };
+  },
+  watch: {
+    item(newItem) {
+      if (!this.context) {
+        return;
+      }
 
-            this.context.item = newItem.domainObject;
-        }
-    },
-    mounted() {
-        if (this.openmct.objects.supportsMutation(this.item.domainObject.identifier)) {
-            this.mutablePromise = this.openmct.objects.getMutable(this.item.domainObject.identifier)
-                .then(this.setObject);
-        } else {
-            this.openmct.objects.get(this.item.domainObject.identifier)
-                .then(this.setObject);
-        }
-    },
-    beforeDestroy() {
-        if (this.removeSelectable) {
+      this.context.item = newItem.domainObject;
+    }
+  },
+  mounted() {
+    if (this.openmct.objects.supportsMutation(this.item.domainObject.identifier)) {
+      this.mutablePromise = this.openmct.objects
+        .getMutable(this.item.domainObject.identifier)
+        .then(this.setObject);
+    } else {
+      this.openmct.objects.get(this.item.domainObject.identifier).then(this.setObject);
+    }
+  },
+  beforeUnmount() {
+    if (this.removeSelectable) {
+      this.removeSelectable();
+    }
+
+    if (this.removeStatusListener) {
+      this.removeStatusListener();
+    }
+
+    if (this.mutablePromise) {
+      this.mutablePromise.then(() => {
+        this.openmct.objects.destroyMutable(this.domainObject);
+      });
+    } else if (this?.domainObject?.isMutable) {
+      this.openmct.objects.destroyMutable(this.domainObject);
+    }
+  },
+  methods: {
+    setObject(domainObject) {
+      this.domainObject = domainObject;
+      this.mutablePromise = undefined;
+      this.$nextTick(() => {
+        let reference = this.$refs.objectView;
+
+        if (reference) {
+          let childContext = this.$refs.objectView.getSelectionContext();
+          childContext.item = domainObject;
+          this.context = childContext;
+          if (this.removeSelectable) {
             this.removeSelectable();
-        }
+          }
 
-        if (this.mutablePromise) {
-            this.mutablePromise.then(() => {
-                this.openmct.objects.destroyMutable(this.domainObject);
-            });
-        } else {
-            this.openmct.objects.destroyMutable(this.domainObject);
+          this.removeSelectable = this.openmct.selection.selectable(this.$el, this.context);
         }
-    },
-    methods: {
-        setObject(domainObject) {
-            this.domainObject = domainObject;
-            this.mutablePromise = undefined;
-            this.$nextTick(() => {
-                let reference = this.$refs.objectView;
 
-                if (reference) {
-                    let childContext = this.$refs.objectView.getSelectionContext();
-                    childContext.item = domainObject;
-                    this.context = childContext;
-                    this.removeSelectable = this.openmct.selection.selectable(
-                        this.$el, this.context);
-                }
-            });
+        if (this.removeStatusListener) {
+          this.removeStatusListener();
         }
+
+        this.removeStatusListener = this.openmct.status.observe(
+          this.domainObject.identifier,
+          this.setStatus
+        );
+        this.status = this.openmct.status.get(this.domainObject.identifier);
+      });
+    },
+    setActionCollection(actionCollection) {
+      this.openmct.menus.actionsToMenuItems(
+        actionCollection.getVisibleActions(),
+        actionCollection.objectPath,
+        actionCollection.view
+      );
+    },
+    setStatus(status) {
+      this.status = status;
+    },
+    isPlanLikeObject(domainObject) {
+      return domainObject.type === 'plan' || domainObject.type === 'gantt-chart';
     }
+  }
 };
 </script>
diff --git a/src/plugins/timeline/TimelineViewLayout.vue b/src/plugins/timeline/TimelineViewLayout.vue
index a43324439c9..a7500bd5438 100644
--- a/src/plugins/timeline/TimelineViewLayout.vue
+++ b/src/plugins/timeline/TimelineViewLayout.vue
@@ -1,170 +1,212 @@
-/*****************************************************************************
-* Open MCT, Copyright (c) 2014-2021, United States Government
-* as represented by the Administrator of the National Aeronautics and Space
-* Administration. All rights reserved.
-*
-* Open MCT is licensed under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-* http://www.apache.org/licenses/LICENSE-2.0.
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-* License for the specific language governing permissions and limitations
-* under the License.
-*
-* Open MCT includes source code licensed under additional open source
-* licenses. See the Open Source Licenses file (LICENSES.md) included with
-* this source code distribution or the Licensing information page available
-* at runtime from the About dialog for additional information.
-*****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 
 <template>
-<div ref="timelineHolder"
-     class="c-timeline-holder"
->
-    <div class="c-timeline">
-        <div v-for="timeSystemItem in timeSystems"
-             :key="timeSystemItem.timeSystem.key"
-             class="u-contents"
-        >
-            <swim-lane>
-                <template slot="label">
-                    {{ timeSystemItem.timeSystem.name }}
-                </template>
-                <template slot="object">
-                    <timeline-axis :bounds="timeSystemItem.bounds"
-                                   :time-system="timeSystemItem.timeSystem"
-                                   :content-height="height"
-                                   :rendering-engine="'svg'"
-                    />
-                </template>
-
-            </swim-lane>
-        </div>
-
-        <div ref="contentHolder"
-             class="u-contents c-timeline__objects c-timeline__content-holder"
-        >
-            <div
-                v-for="item in items"
-                :key="item.keyString"
-                class="u-contents c-timeline__content"
-            >
-                <timeline-object-view
-                    class="u-contents"
-                    :item="item"
-                />
-            </div>
-        </div>
+  <div ref="timelineHolder" class="c-timeline-holder">
+    <swim-lane v-for="timeSystemItem in timeSystems" :key="timeSystemItem.timeSystem.key">
+      <template #label>
+        {{ timeSystemItem.timeSystem.name }}
+      </template>
+      <template #object>
+        <timeline-axis
+          :bounds="timeSystemItem.bounds"
+          :time-system="timeSystemItem.timeSystem"
+          :content-height="height"
+          :rendering-engine="'svg'"
+        />
+      </template>
+    </swim-lane>
+
+    <div ref="contentHolder" class="c-timeline__objects">
+      <timeline-object-view
+        v-for="item in items"
+        :key="item.keyString"
+        class="c-timeline__content js-timeline__content"
+        :item="item"
+      />
     </div>
-</div>
+  </div>
 </template>
 
 <script>
-import TimelineObjectView from './TimelineObjectView.vue';
+import _ from 'lodash';
+
+import SwimLane from '@/ui/components/swim-lane/SwimLane.vue';
+
 import TimelineAxis from '../../ui/components/TimeSystemAxis.vue';
-import SwimLane from "@/ui/components/swim-lane/SwimLane.vue";
-import { getValidatedPlan } from "../plan/util";
+import { getValidatedData, getValidatedGroups } from '../plan/util.js';
+import TimelineObjectView from './TimelineObjectView.vue';
 
 const unknownObjectType = {
-    definition: {
-        cssClass: 'icon-object-unknown',
-        name: 'Unknown Type'
-    }
+  definition: {
+    cssClass: 'icon-object-unknown',
+    name: 'Unknown Type'
+  }
 };
 
 export default {
-    components: {
-        TimelineObjectView,
-        TimelineAxis,
-        SwimLane
+  components: {
+    TimelineObjectView,
+    TimelineAxis,
+    SwimLane
+  },
+  inject: ['openmct', 'domainObject', 'composition', 'objectPath'],
+  data() {
+    return {
+      items: [],
+      timeSystems: [],
+      height: 0,
+      useIndependentTime: this.domainObject.configuration.useIndependentTime === true,
+      timeOptions: this.domainObject.configuration.timeOptions
+    };
+  },
+  beforeUnmount() {
+    this.composition.off('add', this.addItem);
+    this.composition.off('remove', this.removeItem);
+    this.composition.off('reorder', this.reorder);
+    this.stopFollowingTimeContext();
+    this.contentResizeObserver.disconnect();
+  },
+  mounted() {
+    this.items = [];
+    this.setTimeContext();
+
+    if (this.composition) {
+      this.composition.on('add', this.addItem);
+      this.composition.on('remove', this.removeItem);
+      this.composition.on('reorder', this.reorder);
+      this.composition.load();
+    }
+
+    this.handleContentResize = _.debounce(this.handleContentResize, 500);
+    this.contentResizeObserver = new ResizeObserver(this.handleContentResize);
+    this.contentResizeObserver.observe(this.$refs.timelineHolder);
+  },
+  methods: {
+    addItem(domainObject) {
+      let type = this.openmct.types.get(domainObject.type) || unknownObjectType;
+      let keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
+      let objectPath = [domainObject].concat(this.objectPath.slice());
+      let rowCount = 0;
+      if (domainObject.type === 'plan') {
+        const planData = getValidatedData(domainObject);
+        rowCount = getValidatedGroups(domainObject, planData).length;
+      } else if (domainObject.type === 'gantt-chart') {
+        rowCount = Object.keys(domainObject.configuration.swimlaneVisibility).length;
+      }
+
+      let height =
+        domainObject.type === 'telemetry.plot.stacked'
+          ? `${domainObject.composition.length * 100}px`
+          : '100px';
+      let item = {
+        domainObject,
+        objectPath,
+        type,
+        keyString,
+        rowCount,
+        height
+      };
+
+      this.items.push(item);
     },
-    inject: ['openmct', 'domainObject', 'composition', 'objectPath'],
-    data() {
-        return {
-            items: [],
-            timeSystems: [],
-            height: 0
-        };
+    removeItem(identifier) {
+      let index = this.items.findIndex((item) =>
+        this.openmct.objects.areIdsEqual(identifier, item.domainObject.identifier)
+      );
+      this.items.splice(index, 1);
     },
-    beforeDestroy() {
-        this.composition.off('add', this.addItem);
-        this.composition.off('remove', this.removeItem);
-        this.composition.off('reorder', this.reorder);
-        this.openmct.time.off("bounds", this.updateViewBounds);
-
+    reorder(reorderPlan) {
+      let oldItems = this.items.slice();
+      reorderPlan.forEach((reorderEvent) => {
+        this.items[reorderEvent.newIndex] = oldItems[reorderEvent.oldIndex];
+      });
+    },
+    handleContentResize() {
+      this.updateContentHeight();
+    },
+    updateContentHeight() {
+      const clientHeight = this.getClientHeight();
+      if (this.height !== clientHeight) {
+        this.height = clientHeight;
+      }
     },
-    mounted() {
-        if (this.composition) {
-            this.composition.on('add', this.addItem);
-            this.composition.on('remove', this.removeItem);
-            this.composition.on('reorder', this.reorder);
-            this.composition.load();
+    getClientHeight() {
+      let clientHeight = this.$refs.timelineHolder.getBoundingClientRect().height;
+
+      if (!clientHeight) {
+        //this is a hack - need a better way to find the parent of this component
+        let parent = this.$el.closest('.c-object-view');
+        if (parent) {
+          clientHeight = parent.getBoundingClientRect().height;
         }
+      }
 
-        this.getTimeSystems();
-        this.openmct.time.on("bounds", this.updateViewBounds);
+      return clientHeight;
     },
-    methods: {
-        addItem(domainObject) {
-            let type = this.openmct.types.get(domainObject.type) || unknownObjectType;
-            let keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
-            let objectPath = [domainObject].concat(this.objectPath.slice());
-            let rowCount = 0;
-            if (domainObject.type === 'plan') {
-                rowCount = Object.keys(getValidatedPlan(domainObject)).length;
-            }
-
-            let height = domainObject.type === 'telemetry.plot.stacked' ? `${domainObject.composition.length * 100}px` : '100px';
-            let item = {
-                domainObject,
-                objectPath,
-                type,
-                keyString,
-                rowCount,
-                height
-            };
-
-            this.items.push(item);
-            this.updateContentHeight();
-        },
-        removeItem(identifier) {
-            let index = this.items.findIndex(item => this.openmct.objects.areIdsEqual(identifier, item.domainObject.identifier));
-            this.removeSelectable(this.items[index]);
-            this.items.splice(index, 1);
-        },
-        reorder(reorderPlan) {
-            let oldItems = this.items.slice();
-            reorderPlan.forEach((reorderEvent) => {
-                this.$set(this.items, reorderEvent.newIndex, oldItems[reorderEvent.oldIndex]);
-            });
-        },
-        updateContentHeight() {
-            this.height = Math.round(this.$refs.contentHolder.getBoundingClientRect().height);
-        },
-        getTimeSystems() {
-            const timeSystems = this.openmct.time.getAllTimeSystems();
-            timeSystems.forEach(timeSystem => {
-                this.timeSystems.push({
-                    timeSystem,
-                    bounds: this.getBoundsForTimeSystem(timeSystem)
-                });
-            });
-        },
-        getBoundsForTimeSystem(timeSystem) {
-            const currentBounds = this.openmct.time.bounds();
-
-            //TODO: Some kind of translation via an offset? of current bounds to target timeSystem
-            return currentBounds;
-        },
-        updateViewBounds(bounds) {
-            let currentTimeSystem = this.timeSystems.find(item => item.timeSystem.key === this.openmct.time.timeSystem().key);
-            if (currentTimeSystem) {
-                currentTimeSystem.bounds = bounds;
-            }
-        }
+    getTimeSystems() {
+      const timeSystems = this.openmct.time.getAllTimeSystems();
+      timeSystems.forEach((timeSystem) => {
+        this.timeSystems.push({
+          timeSystem,
+          bounds: this.getBoundsForTimeSystem(timeSystem)
+        });
+      });
+    },
+    getBoundsForTimeSystem(timeSystem) {
+      const currentBounds = this.timeContext.bounds();
+
+      //TODO: Some kind of translation via an offset? of current bounds to target timeSystem
+      return currentBounds;
+    },
+    updateViewBounds() {
+      const bounds = this.timeContext.bounds();
+      this.updateContentHeight();
+      let currentTimeSystemIndex = this.timeSystems.findIndex(
+        (item) => item.timeSystem.key === this.openmct.time.timeSystem().key
+      );
+      if (currentTimeSystemIndex > -1) {
+        let currentTimeSystem = {
+          ...this.timeSystems[currentTimeSystemIndex]
+        };
+        currentTimeSystem.bounds = bounds;
+        this.timeSystems.splice(currentTimeSystemIndex, 1, currentTimeSystem);
+      }
+    },
+    setTimeContext() {
+      this.stopFollowingTimeContext();
+
+      this.timeContext = this.openmct.time.getContextForView(this.objectPath);
+      this.getTimeSystems();
+      this.updateViewBounds();
+      this.timeContext.on('bounds', this.updateViewBounds);
+      this.timeContext.on('clock', this.updateViewBounds);
+    },
+    stopFollowingTimeContext() {
+      if (this.timeContext) {
+        this.timeContext.off('bounds', this.updateViewBounds);
+        this.timeContext.off('clock', this.updateViewBounds);
+      }
     }
+  }
 };
 </script>
diff --git a/src/plugins/timeline/TimelineViewProvider.js b/src/plugins/timeline/TimelineViewProvider.js
index 9b18bbf5a2b..6648705cea5 100644
--- a/src/plugins/timeline/TimelineViewProvider.js
+++ b/src/plugins/timeline/TimelineViewProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,47 +20,55 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import mount from 'utils/mount';
+
 import TimelineViewLayout from './TimelineViewLayout.vue';
-import Vue from 'vue';
 
 export default function TimelineViewProvider(openmct) {
+  return {
+    key: 'time-strip.view',
+    name: 'TimeStrip',
+    cssClass: 'icon-clock',
+    canView(domainObject) {
+      return domainObject.type === 'time-strip';
+    },
 
-    return {
-        key: 'time-strip.view',
-        name: 'TimeStrip',
-        cssClass: 'icon-clock',
-        canView(domainObject) {
-            return domainObject.type === 'time-strip';
-        },
+    canEdit(domainObject) {
+      return domainObject.type === 'time-strip';
+    },
 
-        canEdit(domainObject) {
-            return domainObject.type === 'time-strip';
-        },
+    view: function (domainObject, objectPath) {
+      let _destroy = null;
 
-        view: function (domainObject, objectPath) {
-            let component;
-
-            return {
-                show: function (element) {
-                    component = new Vue({
-                        el: element,
-                        components: {
-                            TimelineViewLayout
-                        },
-                        provide: {
-                            openmct,
-                            domainObject,
-                            composition: openmct.composition.get(domainObject),
-                            objectPath
-                        },
-                        template: '<timeline-view-layout></timeline-view-layout>'
-                    });
-                },
-                destroy: function () {
-                    component.$destroy();
-                    component = undefined;
-                }
-            };
+      return {
+        show: function (element) {
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                TimelineViewLayout
+              },
+              provide: {
+                openmct,
+                domainObject,
+                composition: openmct.composition.get(domainObject),
+                objectPath
+              },
+              template: '<timeline-view-layout></timeline-view-layout>'
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+        },
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
         }
-    };
+      };
+    }
+  };
 }
diff --git a/src/plugins/timeline/plugin.js b/src/plugins/timeline/plugin.js
index cf614ddd7c0..976248e262a 100644
--- a/src/plugins/timeline/plugin.js
+++ b/src/plugins/timeline/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,21 +20,29 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import TimelineViewProvider from '../timeline/TimelineViewProvider';
+import TimelineCompositionPolicy from './TimelineCompositionPolicy.js';
+import timelineInterceptor from './timelineInterceptor.js';
+import TimelineViewProvider from './TimelineViewProvider.js';
 
 export default function () {
-    return function install(openmct) {
-        openmct.types.addType('time-strip', {
-            name: 'Time Strip',
-            key: 'time-strip',
-            description: 'An activity timeline',
-            creatable: true,
-            cssClass: 'icon-timeline',
-            initialize: function (domainObject) {
-                domainObject.composition = [];
-            }
-        });
-        openmct.objectViews.addProvider(new TimelineViewProvider(openmct));
-    };
-}
+  return function install(openmct) {
+    openmct.types.addType('time-strip', {
+      name: 'Time Strip',
+      key: 'time-strip',
+      description:
+        'Compose and display time-based telemetry and other object types in a timeline-like view.',
+      creatable: true,
+      cssClass: 'icon-timeline',
+      initialize: function (domainObject) {
+        domainObject.composition = [];
+        domainObject.configuration = {
+          useIndependentTime: false
+        };
+      }
+    });
+    timelineInterceptor(openmct);
+    openmct.composition.addPolicy(new TimelineCompositionPolicy(openmct).allow);
 
+    openmct.objectViews.addProvider(new TimelineViewProvider(openmct));
+  };
+}
diff --git a/src/plugins/timeline/pluginSpec.js b/src/plugins/timeline/pluginSpec.js
index 87229d1882b..ee717fa5072 100644
--- a/src/plugins/timeline/pluginSpec.js
+++ b/src/plugins/timeline/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,105 +20,379 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import { createOpenMct, resetApplicationState } from "utils/testing";
-import TimelinePlugin from "./plugin";
-import Vue from 'vue';
+import EventEmitter from 'EventEmitter';
+import { nextTick } from 'vue';
+
+import { createOpenMct, resetApplicationState } from '@/utils/testing';
+
+import TimelinePlugin from './plugin.js';
 
 describe('the plugin', function () {
-    let objectDef;
-    let element;
-    let child;
-    let openmct;
-    let mockObjectPath;
+  let objectDef;
+  let appHolder;
+  let element;
+  let child;
+  let openmct;
+  let mockObjectPath;
+  let mockCompositionForTimelist;
+  let planObject = {
+    identifier: {
+      key: 'test-plan-object',
+      namespace: ''
+    },
+    type: 'plan',
+    id: 'test-plan-object',
+    selectFile: {
+      body: JSON.stringify({
+        'TEST-GROUP': [
+          {
+            name: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+            start: 1597170002854,
+            end: 1597171032854,
+            type: 'TEST-GROUP',
+            color: 'fuchsia',
+            textColor: 'black'
+          },
+          {
+            name: 'Sed ut perspiciatis',
+            start: 1597171132854,
+            end: 1597171232854,
+            type: 'TEST-GROUP',
+            color: 'fuchsia',
+            textColor: 'black'
+          }
+        ]
+      })
+    }
+  };
+  let timelineObject = {
+    composition: [],
+    configuration: {
+      useIndependentTime: false,
+      timeOptions: {
+        mode: {
+          key: 'fixed'
+        },
+        fixedOffsets: {
+          start: 10,
+          end: 11
+        },
+        clockOffsets: {
+          start: -(30 * 60 * 1000),
+          end: 30 * 60 * 1000
+        }
+      }
+    },
+    name: 'Some timestrip',
+    type: 'time-strip',
+    location: 'mine',
+    modified: 1631005183584,
+    persisted: 1631005183502,
+    identifier: {
+      namespace: '',
+      key: 'b78e7e23-f2b8-4776-b1f0-3ff778f5c8a9'
+    }
+  };
 
-    beforeEach((done) => {
-        mockObjectPath = [
-            {
-                name: 'mock folder',
-                type: 'fake-folder',
-                identifier: {
-                    key: 'mock-folder',
-                    namespace: ''
-                }
-            },
-            {
-                name: 'mock parent folder',
-                type: 'time-strip',
-                identifier: {
-                    key: 'mock-parent-folder',
-                    namespace: ''
-                }
+  beforeEach((done) => {
+    // Mock clientWidth value
+    Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+      configurable: true,
+      value: 500
+    });
+
+    appHolder = document.createElement('div');
+    appHolder.style.width = '640px';
+    appHolder.style.height = '480px';
+
+    mockObjectPath = [
+      {
+        name: 'mock folder',
+        type: 'fake-folder',
+        identifier: {
+          key: 'mock-folder',
+          namespace: ''
+        }
+      },
+      {
+        name: 'mock parent folder',
+        type: 'time-strip',
+        identifier: {
+          key: 'mock-parent-folder',
+          namespace: ''
+        }
+      }
+    ];
+
+    const timeSystem = {
+      timeSystemKey: 'utc',
+      bounds: {
+        start: 1597160002854,
+        end: 1597181232854
+      }
+    };
+
+    openmct = createOpenMct(timeSystem);
+    openmct.install(new TimelinePlugin());
+
+    objectDef = openmct.types.get('time-strip').definition;
+
+    element = document.createElement('div');
+    element.style.width = '640px';
+    element.style.height = '480px';
+    child = document.createElement('div');
+    child.style.width = '640px';
+    child.style.height = '480px';
+    element.appendChild(child);
+
+    openmct.on('start', done);
+    openmct.start(appHolder);
+  });
+
+  afterEach(() => {
+    delete HTMLElement.prototype.clientWidth;
+    return resetApplicationState(openmct);
+  });
+
+  let mockObject = {
+    name: 'Time Strip',
+    key: 'time-strip',
+    creatable: true
+  };
+
+  it('defines a time-strip object type with the correct key', () => {
+    expect(objectDef.key).toEqual(mockObject.key);
+  });
+
+  describe('the time-strip object', () => {
+    it('is creatable', () => {
+      expect(objectDef.creatable).toEqual(mockObject.creatable);
+    });
+  });
+
+  describe('the timeline view', () => {
+    let timelineView;
+    let testViewObject;
+
+    beforeEach(() => {
+      testViewObject = {
+        ...timelineObject
+      };
+
+      const applicableViews = openmct.objectViews.get(testViewObject, mockObjectPath);
+      timelineView = applicableViews.find((viewProvider) => viewProvider.key === 'time-strip.view');
+      let view = timelineView.view(testViewObject, mockObjectPath);
+      view.show(child, true);
+
+      return nextTick();
+    });
+
+    it('provides a view', async () => {
+      await nextTick();
+      expect(timelineView).toBeDefined();
+    });
+
+    it('displays a time axis', () => {
+      const el = element.querySelector('.c-timesystem-axis');
+      expect(el).toBeDefined();
+    });
+
+    it('does not show the independent time conductor based on configuration', () => {
+      const independentTimeConductorEl = element.querySelector(
+        '.c-timeline-holder > .c-conductor__controls'
+      );
+      expect(independentTimeConductorEl).toBeNull();
+    });
+  });
+
+  describe('the timeline composition', () => {
+    let timelineDomainObject;
+    let timelineView;
+
+    beforeEach(() => {
+      timelineDomainObject = {
+        ...timelineObject,
+        composition: [
+          {
+            identifier: {
+              key: 'test-plan-object',
+              namespace: ''
             }
-        ];
+          }
+        ]
+      };
+
+      mockCompositionForTimelist = new EventEmitter();
+      mockCompositionForTimelist.load = () => {
+        mockCompositionForTimelist.emit('add', planObject);
 
-        openmct = createOpenMct();
-        openmct.install(new TimelinePlugin());
+        return [planObject];
+      };
 
-        objectDef = openmct.types.get('time-strip').definition;
+      spyOn(openmct.composition, 'get')
+        .withArgs(timelineDomainObject)
+        .and.returnValue(mockCompositionForTimelist);
 
-        element = document.createElement('div');
-        element.style.width = '640px';
-        element.style.height = '480px';
-        child = document.createElement('div');
-        child.style.width = '640px';
-        child.style.height = '480px';
-        element.appendChild(child);
+      openmct.router.path = [timelineDomainObject];
 
-        openmct.time.timeSystem('utc', {
-            start: 1597160002854,
-            end: 1597181232854
-        });
+      const applicableViews = openmct.objectViews.get(timelineDomainObject, [timelineDomainObject]);
+      timelineView = applicableViews.find((viewProvider) => viewProvider.key === 'time-strip.view');
+      let view = timelineView.view(timelineDomainObject, [timelineDomainObject]);
+      view.show(child, true);
 
-        openmct.on('start', done);
-        openmct.startHeadless();
+      return nextTick();
     });
 
-    afterEach(() => {
-        return resetApplicationState(openmct);
+    xit('loads the plan from composition', async () => {
+      await nextTick();
+      await nextTick();
+      const items = element.querySelectorAll('.js-timeline__content');
+      expect(items.length).toEqual(1);
     });
+  });
 
-    let mockObject = {
-        name: 'Time Strip',
-        key: 'time-strip',
-        creatable: true
+  describe('the independent time conductor', () => {
+    let timelineView;
+    let testViewObject = {
+      ...timelineObject,
+      configuration: {
+        ...timelineObject.configuration,
+        useIndependentTime: true
+      }
     };
 
-    it('defines a time-strip object type with the correct key', () => {
-        expect(objectDef.key).toEqual(mockObject.key);
+    beforeEach((done) => {
+      const applicableViews = openmct.objectViews.get(testViewObject, mockObjectPath);
+      timelineView = applicableViews.find((viewProvider) => viewProvider.key === 'time-strip.view');
+      let view = timelineView.view(testViewObject, mockObjectPath);
+      view.show(child, true);
+
+      nextTick(done);
     });
 
-    describe('the time-strip object', () => {
+    xit('displays an independent time conductor with saved options - local clock', () => {
+      return nextTick(() => {
+        const independentTimeConductorEl = element.querySelector(
+          '.c-timeline-holder > .c-conductor__controls'
+        );
+        expect(independentTimeConductorEl).toBeDefined();
 
-        it('is creatable', () => {
-            expect(objectDef.creatable).toEqual(mockObject.creatable);
-        });
+        const independentTimeContext = openmct.time.getIndependentContext(
+          testViewObject.identifier.key
+        );
+        expect(independentTimeContext.clockOffsets()).toEqual(
+          testViewObject.configuration.timeOptions.clockOffsets
+        );
+      });
     });
+  });
+
+  describe('the independent time conductor - fixed', () => {
+    let timelineView;
+    let testViewObject2 = {
+      ...timelineObject,
+      id: 'test-object2',
+      identifier: {
+        key: 'test-object2',
+        namespace: ''
+      },
+      configuration: {
+        ...timelineObject.configuration,
+        useIndependentTime: true
+      }
+    };
+
+    beforeEach((done) => {
+      const applicableViews = openmct.objectViews.get(testViewObject2, mockObjectPath);
+      timelineView = applicableViews.find((viewProvider) => viewProvider.key === 'time-strip.view');
+      let view = timelineView.view(testViewObject2, mockObjectPath);
+      view.show(child, true);
 
-    describe('the view', () => {
-        let timelineView;
+      nextTick(done);
+    });
 
-        beforeEach(() => {
-            const testViewObject = {
-                id: "test-object",
-                type: "time-strip"
-            };
+    xit('displays an independent time conductor with saved options - fixed timespan', () => {
+      return nextTick(() => {
+        const independentTimeConductorEl = element.querySelector(
+          '.c-timeline-holder > .c-conductor__controls'
+        );
+        expect(independentTimeConductorEl).toBeDefined();
 
-            const applicableViews = openmct.objectViews.get(testViewObject, mockObjectPath);
-            timelineView = applicableViews.find((viewProvider) => viewProvider.key === 'time-strip.view');
-            let view = timelineView.view(testViewObject, element);
-            view.show(child, true);
+        const independentTimeContext = openmct.time.getIndependentContext(
+          testViewObject2.identifier.key
+        );
+        expect(independentTimeContext.bounds()).toEqual(
+          testViewObject2.configuration.timeOptions.fixedOffsets
+        );
+      });
+    });
+  });
 
-            return Vue.nextTick();
-        });
+  describe('The timestrip composition policy', () => {
+    let testObject;
+    beforeEach(() => {
+      testObject = {
+        ...timelineObject,
+        composition: []
+      };
+    });
 
-        it('provides a view', () => {
-            expect(timelineView).toBeDefined();
-        });
+    it('allows composition for plots', () => {
+      const testTelemetryObject = {
+        identifier: {
+          namespace: '',
+          key: 'test-object'
+        },
+        type: 'test-object',
+        name: 'Test Object',
+        telemetry: {
+          values: [
+            {
+              key: 'some-key',
+              name: 'Some attribute',
+              hints: {
+                domain: 1
+              }
+            },
+            {
+              key: 'some-other-key',
+              name: 'Another attribute',
+              hints: {
+                range: 1
+              }
+            }
+          ]
+        }
+      };
+      const composition = openmct.composition.get(testObject);
+      expect(() => {
+        composition.add(testTelemetryObject);
+      }).not.toThrow();
+      expect(testObject.composition.length).toBe(1);
+    });
 
-        it('displays a time axis', () => {
-            const el = element.querySelector('.c-timesystem-axis');
-            expect(el).toBeDefined();
-        });
+    it('allows composition for plans', () => {
+      const composition = openmct.composition.get(testObject);
+      expect(() => {
+        composition.add(planObject);
+      }).not.toThrow();
+      expect(testObject.composition.length).toBe(1);
     });
 
+    it('disallows composition for non time-based plots', () => {
+      const barGraphObject = {
+        identifier: {
+          namespace: '',
+          key: 'test-object'
+        },
+        type: 'telemetry.plot.bar-graph',
+        name: 'Test Object'
+      };
+      const composition = openmct.composition.get(testObject);
+      expect(() => {
+        composition.add(barGraphObject);
+      }).toThrow();
+      expect(testObject.composition.length).toBe(0);
+    });
+  });
 });
diff --git a/src/plugins/timeline/timeline.scss b/src/plugins/timeline/timeline.scss
index 432677805b0..6ca733c4f37 100644
--- a/src/plugins/timeline/timeline.scss
+++ b/src/plugins/timeline/timeline.scss
@@ -1,4 +1,7 @@
 .c-timeline-holder {
-    @include abs();
-    overflow-x: hidden;
-}
\ No newline at end of file
+  overflow: hidden;
+}
+
+.c-timeline__objects {
+  display: contents;
+}
diff --git a/src/plugins/timeline/timelineInterceptor.js b/src/plugins/timeline/timelineInterceptor.js
new file mode 100644
index 00000000000..3a59f5316f9
--- /dev/null
+++ b/src/plugins/timeline/timelineInterceptor.js
@@ -0,0 +1,38 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+export default function timelineInterceptor(openmct) {
+  openmct.objects.addGetInterceptor({
+    appliesTo: (identifier, domainObject) => {
+      return domainObject && domainObject.type === 'time-strip';
+    },
+    invoke: (identifier, object) => {
+      if (object && object.configuration === undefined) {
+        object.configuration = {
+          useIndependentTime: true
+        };
+      }
+
+      return object;
+    }
+  });
+}
diff --git a/src/plugins/timelist/ExpandedViewItem.vue b/src/plugins/timelist/ExpandedViewItem.vue
new file mode 100644
index 00000000000..22eeaed04f0
--- /dev/null
+++ b/src/plugins/timelist/ExpandedViewItem.vue
@@ -0,0 +1,281 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div :class="listItemClass" role="row">
+    <div class="c-tli__activity-color">
+      <div class="c-tli__activity-color-swatch" :style="styleClass"></div>
+    </div>
+    <div class="c-tli__title-and-bounds">
+      <div class="c-tli__title">{{ formattedItem.title }}</div>
+      <div class="c-tli__bounds" :class="{ '--has-duration': eventHasDuration }">
+        <div v-if="eventHasDuration" class="c-tli__duration">{{ formattedItem.duration }}</div>
+        <div v-else class="c-tli__start-time">Event</div>
+        <div class="c-tli__start-time">
+          {{ formattedItem.start }}
+        </div>
+        <div v-if="eventHasDuration" class="c-tli__end-time">{{ formattedItem.end }}</div>
+      </div>
+    </div>
+    <div class="c-tli__graphic">
+      <svg viewBox="0 0 100 100">
+        <path
+          aria-label="Activity complete"
+          class="c-tli__graphic__check"
+          d="M80 20L42.5 57.5L20 35V57.5L42.5 80L80 42.5V20Z"
+        />
+        <path
+          aria-label="Activity alert"
+          class="c-tli__graphic__alert-triangle"
+          d="M79.4533 70.3034L54.004 25.7641C51.8962 22.0786 48.4636 22.0786 46.3559 25.7641L20.8946 70.3034C18.7868 73.989 20.5332 77 24.7728 77H75.563C79.8146 77 81.561 73.989 79.4533 70.3034ZM54.028 73.1459H46.3198V65.4376H54.028V73.1459ZM55.3409 50.0211L53.0645 61.5835H47.2833L45.007 50.0211V34.6045H55.3529V50.0211H55.3409Z"
+        />
+        <g aria-label="Activity aborted" class="c-tli__graphic__circle-slash">
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M50 82C67.6731 82 82 67.6731 82 50C82 32.3269 67.6731 18 50 18C32.3269 18 18 32.3269 18 50C18 67.6731 32.3269 82 50 82ZM50 72C62.1503 72 72 62.1503 72 50C72 37.8497 62.1503 28 50 28C37.8497 28 28 37.8497 28 50C28 62.1503 37.8497 72 50 72Z"
+          />
+          <path
+            d="M63.7886 29.6404L70.8596 36.7114L36.2114 71.3596L29.1404 64.2886L63.7886 29.6404Z"
+          />
+        </g>
+        <path
+          aria-label="Activity skipped"
+          class="c-tli__graphic__skipped"
+          d="M31 48C31 42.4772 35.5152 38 41 38H59C64.4848 38 69 42.4772 69 48V55H58L74 72L90 55H79V48C79 36.9543 69.9695 28 59 28H41C30.0305 28 21 36.9543 21 48V53.0294C21 56.8792 17.8232 60 14 60V70C23.308 70 31 62.402 31 53.0294V48Z"
+        />
+      </svg>
+    </div>
+    <div class="c-tli__time-hero">
+      <div class="c-tli__time-hero-context-and-time">
+        <div class="c-tli__time-hero-context">{{ formattedItemLabel }}</div>
+        <div v-if="showTimeHero" :class="countdownClass">
+          {{ formattedItem.countdown }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+
+import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
+import { CURRENT_CSS_SUFFIX, FUTURE_CSS_SUFFIX, PAST_CSS_SUFFIX } from './constants.js';
+
+const ITEM_COLORS = {
+  [CURRENT_CSS_SUFFIX]: '#ffcc00',
+  [PAST_CSS_SUFFIX]: '#0088ff',
+  [FUTURE_CSS_SUFFIX]: '#7300ff'
+};
+
+const EXECUTION_STATES = {
+  notStarted: 'Not started',
+  'in-progress': 'In progress',
+  completed: 'Completed',
+  aborted: 'Aborted',
+  skipped: 'Skipped'
+};
+
+const INFERRED_EXECUTION_STATES = {
+  incomplete: 'Incomplete',
+  overdue: 'Overdue',
+  runningLong: 'Running Long',
+  starts: 'Starts',
+  occurs: 'Occurs',
+  occurred: 'Occurred',
+  ends: 'Ends',
+  ended: 'Ended'
+};
+
+export default {
+  inject: ['openmct', 'domainObject', 'path'],
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    start: {
+      type: Number,
+      default: 0
+    },
+    end: {
+      type: Number,
+      default: 0
+    },
+    duration: {
+      type: Number,
+      default: 0
+    },
+    countdown: {
+      type: Number,
+      default: 0
+    },
+    cssClass: {
+      type: String,
+      default: ''
+    },
+    itemProperties: {
+      type: Array,
+      required: true
+    },
+    executionState: {
+      type: String,
+      default: 'notStarted'
+    }
+  },
+  data() {
+    return {
+      formattedItemLabel: ''
+    };
+  },
+  computed: {
+    countdownClass() {
+      let cssClass = '';
+      if (this.countdown < 0) {
+        cssClass = '--is-countup';
+      } else if (this.countdown > 0) {
+        cssClass = '--is-countdown';
+      }
+      return `c-tli__time-hero-time ${cssClass}`;
+    },
+    styleClass() {
+      return { backgroundColor: ITEM_COLORS[this.cssClass] };
+    },
+    isInProgress() {
+      return this.executionState === 'in-progress';
+    },
+    eventHasDuration() {
+      return this.start !== this.end;
+    },
+    listItemClass() {
+      const timeRelationClass = this.cssClass;
+      const executionStateClass = `--is-${this.executionState}`;
+      return `c-tli ${timeRelationClass} ${executionStateClass}`;
+    },
+    formattedItem() {
+      let itemValue = {
+        title: this.name
+      };
+      this.itemProperties.forEach((itemProperty) => {
+        let value = this[itemProperty.key];
+        let formattedValue;
+        if (itemProperty.format) {
+          const itemStartDate = new Date(value).toDateString();
+          const timestampDate = new Date(this.timestamp).toDateString();
+          formattedValue = itemProperty.format(value, undefined, itemProperty.key, this.openmct, {
+            skipPrefix: true,
+            skipDateForToday: itemStartDate === timestampDate
+          });
+        }
+        itemValue[itemProperty.key] = formattedValue;
+      });
+
+      return itemValue;
+    },
+    showTimeHero() {
+      return !(
+        this.executionState === EXECUTION_STATES.completed ||
+        this.executionState === EXECUTION_STATES.aborted ||
+        this.executionState === EXECUTION_STATES.skipped
+      );
+    }
+  },
+  created() {
+    this.updateTimestamp = _.throttle(this.updateTimestamp, 1000);
+    this.setTimeContext();
+    this.timestamp = this.timeContext.now();
+  },
+  methods: {
+    setTimeContext() {
+      this.stopFollowingTimeContext();
+      this.timeContext = this.openmct.time.getContextForView(this.path);
+      this.followTimeContext();
+    },
+    followTimeContext() {
+      this.timeContext.on(TIME_CONTEXT_EVENTS.tick, this.updateTimestamp);
+    },
+    stopFollowingTimeContext() {
+      if (this.timeContext) {
+        this.timeContext.off(TIME_CONTEXT_EVENTS.tick, this.updateTimestamp);
+      }
+    },
+    updateTimestamp(time) {
+      this.timestamp = time;
+      this.formatItemLabel();
+    },
+    formatItemLabel() {
+      let executionStateLabel;
+      const executionStateKeys = Object.keys(EXECUTION_STATES);
+      const executionStateIndex = executionStateKeys.findIndex(
+        (key) => key === this.executionState
+      );
+      if (executionStateIndex > -1) {
+        executionStateLabel = EXECUTION_STATES[executionStateIndex];
+      }
+
+      let label;
+      if (this.start < this.timestamp) {
+        // Start time is in the past
+        if (this.start === this.end) {
+          // - 'Occurred' : for Events with start < now datetime and 0 duration
+          label = INFERRED_EXECUTION_STATES.occurred;
+        }
+        // end time has not yet passed
+        else if (this.cssClass === CURRENT_CSS_SUFFIX) {
+          if (executionStateIndex === 0) {
+            // - 'Overdue' : executionState.notStarted && start < now datetime
+            label = INFERRED_EXECUTION_STATES.overdue;
+          } else {
+            // - 'Ends' : executionState.inProgress && now > start datetime && now < end datetime
+            label = INFERRED_EXECUTION_STATES.ends;
+          }
+        }
+        // end time is also in the past
+        else if (this.cssClass === PAST_CSS_SUFFIX) {
+          if (executionStateIndex === 0) {
+            // - 'Incomplete' : executionState.notStarted && now > end datetime
+            label = INFERRED_EXECUTION_STATES.incomplete;
+          } else if (executionStateIndex === 1) {
+            // - 'Running Long' : executionState.inProgress && now > end datetime
+            label = INFERRED_EXECUTION_STATES.runningLong;
+          } else {
+            // - 'Ended' :now > start datetime && now > end datetime
+            label = INFERRED_EXECUTION_STATES.ended;
+          }
+        }
+      }
+      // Start time is in the future
+      else {
+        if (this.start === this.end) {
+          // - 'Occurs' : for Events with start > now datetime and 0 duration
+          label = INFERRED_EXECUTION_STATES.occurs;
+        } else {
+          // - 'Starts' : for Activities with now > start datetime
+          label = INFERRED_EXECUTION_STATES.starts;
+        }
+      }
+
+      this.formattedItemLabel = label || executionStateLabel;
+    }
+  }
+};
+</script>
diff --git a/src/plugins/timelist/TimelistComponent.vue b/src/plugins/timelist/TimelistComponent.vue
new file mode 100644
index 00000000000..dbfac182f4a
--- /dev/null
+++ b/src/plugins/timelist/TimelistComponent.vue
@@ -0,0 +1,586 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div ref="timelistHolder" :class="listTypeClass">
+    <template v-if="isExpanded">
+      <expanded-view-item
+        v-for="item in sortedItems"
+        :key="item.key"
+        :name="item.name"
+        :start="item.start"
+        :end="item.end"
+        :duration="item.duration"
+        :countdown="item.countdown"
+        :css-class="item.cssClass"
+        :item-properties="itemProperties"
+        :execution-state="persistedActivityStates[item.id]"
+        @click.stop="setSelectionForActivity(item, $event.currentTarget)"
+      >
+      </expanded-view-item>
+    </template>
+    <div v-else class="c-table c-table--sortable c-list-view c-list-view--sticky-header sticky">
+      <table class="c-table__body js-table__body">
+        <thead class="c-table__header">
+          <tr>
+            <list-header
+              v-for="headerItem in headerItems"
+              :key="headerItem.property"
+              :direction="
+                defaultSort.property === headerItem.property
+                  ? defaultSort.defaultDirection
+                  : headerItem.defaultDirection
+              "
+              :is-sortable="headerItem.isSortable"
+              :aria-label="headerItem.name"
+              :title="headerItem.name"
+              :property="headerItem.property"
+              :current-sort="defaultSort.property"
+              @sort="sort"
+            />
+          </tr>
+        </thead>
+        <tbody>
+          <list-item
+            v-for="item in sortedItems"
+            :key="item.key"
+            :item="item"
+            :item-properties="itemProperties"
+            @click.stop="setSelectionForActivity(item, $event.currentTarget)"
+          />
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import { v4 as uuid } from 'uuid';
+
+import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
+import ListHeader from '../../ui/components/List/ListHeader.vue';
+import ListItem from '../../ui/components/List/ListItem.vue';
+import { getPreciseDuration } from '../../utils/duration.js';
+import { getFilteredValues, getValidatedData, getValidatedGroups } from '../plan/util.js';
+import { SORT_ORDER_OPTIONS } from './constants.js';
+import ExpandedViewItem from './ExpandedViewItem.vue';
+
+const TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+const SAME_DAY_PRECISION_SECONDS = 'HH:mm:ss';
+
+const CURRENT_CSS_SUFFIX = '--is-current';
+const PAST_CSS_SUFFIX = '--is-past';
+const FUTURE_CSS_SUFFIX = '--is-future';
+
+const headerItems = [
+  {
+    defaultDirection: true,
+    isSortable: true,
+    property: 'start',
+    name: 'Start Time',
+    format: function (value, object, key, openmct, options = {}) {
+      const timeFormat = openmct.time.timeSystem().timeFormat;
+      const timeFormatter = openmct.telemetry.getValueFormatter({ format: timeFormat }).formatter;
+      if (options.skipDateForToday) {
+        return timeFormatter.format(value, SAME_DAY_PRECISION_SECONDS);
+      } else {
+        return timeFormatter.format(value, TIME_FORMAT);
+      }
+    }
+  },
+  {
+    defaultDirection: true,
+    isSortable: true,
+    property: 'end',
+    name: 'End Time',
+    format: function (value, object, key, openmct, options = {}) {
+      const timeFormat = openmct.time.timeSystem().timeFormat;
+      const timeFormatter = openmct.telemetry.getValueFormatter({ format: timeFormat }).formatter;
+      if (options.skipDateForToday) {
+        return timeFormatter.format(value, SAME_DAY_PRECISION_SECONDS);
+      } else {
+        return timeFormatter.format(value, TIME_FORMAT);
+      }
+    }
+  },
+  {
+    defaultDirection: false,
+    property: 'countdown',
+    name: 'Time To/From',
+    format: function (value, object, key, openmct, options = {}) {
+      let result;
+      if (value < 0) {
+        const prefix = options.skipPrefix ? '' : '+';
+        result = `${prefix}${getPreciseDuration(Math.abs(value), {
+          excludeMilliSeconds: true,
+          useDayFormat: true
+        })}`;
+      } else if (value > 0) {
+        const prefix = options.skipPrefix ? '' : '-';
+        result = `${prefix}${getPreciseDuration(value, {
+          excludeMilliSeconds: true,
+          useDayFormat: true
+        })}`;
+      } else {
+        result = 'Now';
+      }
+
+      return result;
+    }
+  },
+  {
+    defaultDirection: false,
+    property: 'duration',
+    name: 'Duration',
+    format: function (value, object, key, openmct) {
+      return `${getPreciseDuration(value, { excludeMilliSeconds: true, useDayFormat: true })}`;
+    }
+  },
+  {
+    defaultDirection: true,
+    property: 'name',
+    name: 'Activity'
+  }
+];
+
+const defaultSort = {
+  property: 'start',
+  defaultDirection: true
+};
+
+export default {
+  components: {
+    ExpandedViewItem,
+    ListHeader,
+    ListItem
+  },
+  inject: ['openmct', 'domainObject', 'path', 'composition'],
+  data() {
+    return {
+      planObjects: [],
+      viewBounds: undefined,
+      height: 0,
+      planActivities: [],
+      groups: [],
+      headerItems: headerItems,
+      defaultSort: defaultSort,
+      isExpanded: false,
+      persistedActivityStates: {},
+      sortedItems: []
+    };
+  },
+  computed: {
+    listTypeClass() {
+      if (this.isExpanded) {
+        return 'c-timelist c-timelist--large';
+      }
+      return 'c-timelist';
+    },
+    itemProperties() {
+      return this.headerItems.map((headerItem) => {
+        return {
+          key: headerItem.property,
+          format: headerItem.format
+        };
+      });
+    }
+  },
+  created() {
+    this.updateTimestamp = _.throttle(this.updateTimestamp, 1000);
+
+    this.setTimeContext();
+    this.timestamp = this.timeContext.now();
+  },
+  mounted() {
+    this.isEditing = this.openmct.editor.isEditing();
+
+    this.getPlanDataAndSetConfig(this.domainObject);
+    this.getActivityStates();
+
+    this.unlisten = this.openmct.objects.observe(
+      this.domainObject,
+      'selectFile',
+      this.planFileUpdated
+    );
+    this.unlistenConfig = this.openmct.objects.observe(
+      this.domainObject,
+      'configuration',
+      this.setViewFromConfig
+    );
+    this.removeStatusListener = this.openmct.status.observe(
+      this.domainObject.identifier,
+      this.setStatus
+    );
+    this.status = this.openmct.status.get(this.domainObject.identifier);
+
+    this.openmct.editor.on('isEditing', this.setEditState);
+
+    if (this.composition) {
+      this.composition.on('add', this.addToComposition);
+      this.composition.on('remove', this.removeItem);
+      this.composition.load();
+    }
+
+    this.setFixedTime(this.timeContext.getMode());
+  },
+  beforeUnmount() {
+    if (this.unlisten) {
+      this.unlisten();
+    }
+
+    if (this.unlistenConfig) {
+      this.unlistenConfig();
+    }
+
+    if (this.stopObservingPlan) {
+      this.stopObservingPlan();
+    }
+
+    if (this.stopObservingActivityStatesObject) {
+      this.stopObservingActivityStatesObject();
+    }
+
+    if (this.removeStatusListener) {
+      this.removeStatusListener();
+    }
+
+    this.openmct.editor.off('isEditing', this.setEditState);
+    this.stopFollowingTimeContext();
+
+    if (this.composition) {
+      this.composition.off('add', this.addToComposition);
+      this.composition.off('remove', this.removeItem);
+    }
+  },
+  methods: {
+    setTimeContext() {
+      this.stopFollowingTimeContext();
+      this.timeContext = this.openmct.time.getContextForView(this.path);
+      this.followTimeContext();
+    },
+    followTimeContext() {
+      this.timeContext.on(TIME_CONTEXT_EVENTS.modeChanged, this.setFixedTime);
+      this.timeContext.on(TIME_CONTEXT_EVENTS.tick, this.updateTimestamp);
+    },
+    stopFollowingTimeContext() {
+      if (this.timeContext) {
+        this.timeContext.off(TIME_CONTEXT_EVENTS.modeChanged, this.setFixedTime);
+        this.timeContext.off(TIME_CONTEXT_EVENTS.tick, this.updateTimestamp);
+      }
+    },
+    planFileUpdated(selectFile) {
+      this.getPlanData({
+        selectFile,
+        sourceMap: this.domainObject.sourceMap
+      });
+    },
+    async getActivityStates() {
+      const activityStatesObject = await this.openmct.objects.get('activity-states');
+      this.setActivityStates(activityStatesObject);
+      this.stopObservingActivityStatesObject = this.openmct.objects.observe(
+        activityStatesObject,
+        '*',
+        this.setActivityStates
+      );
+    },
+    setActivityStates(activityStatesObject) {
+      this.persistedActivityStates = activityStatesObject.activities;
+    },
+    getPlanDataAndSetConfig(mutatedObject) {
+      this.getPlanData(mutatedObject);
+      this.setViewFromConfig(mutatedObject.configuration);
+    },
+    setViewFromConfig(configuration) {
+      this.filterValue = configuration.filter || '';
+      this.filterMetadataValue = configuration.filterMetadata || '';
+      if (this.isEditing) {
+        this.hideAll = false;
+      } else {
+        this.setSort();
+        this.isExpanded = configuration.isExpanded;
+      }
+      this.listActivities();
+    },
+    updateTimestamp(timestamp) {
+      //The clock never stops ticking
+      this.updateTimeStampAndListActivities(timestamp);
+    },
+    setFixedTime() {
+      this.filterValue = this.domainObject.configuration.filter || '';
+      this.filterMetadataValue = this.domainObject.configuration.filterMetadata || '';
+      this.isFixedTime = !this.timeContext.isRealTime();
+      if (this.isFixedTime) {
+        this.hideAll = false;
+      }
+    },
+    addItem(domainObject) {
+      this.planObjects = [domainObject];
+      if (domainObject.type === 'plan') {
+        this.getPlanDataAndSetConfig({
+          ...this.domainObject,
+          selectFile: domainObject.selectFile,
+          sourceMap: domainObject.sourceMap
+        });
+      }
+      //listen for changes to the plan
+      if (this.stopObservingPlan) {
+        this.stopObservingPlan();
+      }
+      this.stopObservingPlan = this.openmct.objects.observe(
+        this.planObjects[0],
+        '*',
+        this.handlePlanChange
+      );
+    },
+    handlePlanChange(planObject) {
+      this.getPlanData(planObject);
+      this.listActivities();
+    },
+    addToComposition(planObject) {
+      if (this.planObjects.length > 0) {
+        this.confirmReplacePlan(planObject);
+      } else {
+        this.addItem(planObject);
+      }
+    },
+    confirmReplacePlan(planObject) {
+      const dialog = this.openmct.overlays.dialog({
+        iconClass: 'alert',
+        message: 'This action will replace the current plan. Do you want to continue?',
+        buttons: [
+          {
+            label: 'Ok',
+            emphasis: true,
+            callback: () => {
+              const oldTelemetryObject = this.planObjects[0];
+              this.removeFromComposition(oldTelemetryObject);
+              this.addItem(planObject);
+              dialog.dismiss();
+            }
+          },
+          {
+            label: 'Cancel',
+            callback: () => {
+              this.removeFromComposition(planObject);
+              dialog.dismiss();
+            }
+          }
+        ]
+      });
+    },
+    removeFromComposition(planObject) {
+      this.composition.remove(planObject);
+    },
+    removeItem() {
+      this.planObjects = [];
+      this.resetPlanData();
+    },
+    resetPlanData() {
+      this.planData = {};
+      this.groups = [];
+      this.planActivities = [];
+      this.sortedItems = [];
+    },
+    getPlanData(domainObject) {
+      this.resetPlanData();
+      this.planData = getValidatedData(domainObject);
+      this.groups = getValidatedGroups(this.domainObject, this.planData);
+      this.groups.forEach((key) => {
+        if (this.planData[key] === undefined) {
+          return;
+        }
+        // Create new objects so Vue 3 can detect any changes
+        this.planActivities.push(...this.planData[key]);
+      });
+    },
+
+    listActivities() {
+      // filter activities first, then sort
+      const filteredItems = this.planActivities.filter(this.filterActivities);
+      const sortedItems = this.sortItems(filteredItems);
+      this.sortedItems = this.applyStyles(sortedItems);
+    },
+    updateTimeStampAndListActivities(time) {
+      this.timestamp = time;
+
+      this.listActivities();
+    },
+    isActivityInBounds(activity) {
+      const startInBounds =
+        activity.start >= this.timeContext.bounds()?.start &&
+        activity.start <= this.timeContext.bounds()?.end;
+      const endInBounds =
+        activity.end >= this.timeContext.bounds()?.start &&
+        activity.end <= this.timeContext.bounds()?.end;
+      const middleInBounds =
+        activity.start <= this.timeContext.bounds()?.start &&
+        activity.end >= this.timeContext.bounds()?.end;
+
+      return startInBounds || endInBounds || middleInBounds;
+    },
+    filterActivities(activity) {
+      if (this.isEditing) {
+        return true;
+      }
+
+      let hasNameMatch = false;
+      let hasMetadataMatch = false;
+      if (this.filterValue || this.filterMetadataValue) {
+        if (this.filterValue) {
+          hasNameMatch = this.filterByName(activity.name);
+        }
+        if (this.filterMetadataValue) {
+          hasMetadataMatch = this.filterByMetadata(activity);
+        }
+      } else {
+        hasNameMatch = true;
+        hasMetadataMatch = true;
+      }
+
+      const hasFilterMatch = hasNameMatch || hasMetadataMatch;
+      if (hasFilterMatch === false || this.hideAll === true) {
+        return false;
+      }
+
+      if (!this.isActivityInBounds(activity)) {
+        return false;
+      }
+      //current event or future start event or past end event
+      const showCurrentEvents = this.domainObject.configuration.currentEventsIndex > 0;
+
+      const isCurrent =
+        showCurrentEvents && this.timestamp >= activity.start && this.timestamp <= activity.end;
+      const isPast = this.timestamp > activity.end;
+      const isFuture = this.timestamp < activity.start;
+
+      return isCurrent || isPast || isFuture;
+    },
+    filterByName(name) {
+      const filters = this.filterValue.split(',');
+
+      return filters.some((search) => {
+        const normalized = search.trim().toLowerCase();
+        const regex = new RegExp(normalized);
+
+        return regex.test(name.toLowerCase());
+      });
+    },
+    filterByMetadata(activity) {
+      const filters = this.filterMetadataValue.split(',');
+
+      return filters.some((search) => {
+        const normalized = search.trim().toLowerCase();
+        const regex = new RegExp(normalized);
+        const activityValues = getFilteredValues(activity);
+
+        return regex.test(activityValues.join().toLowerCase());
+      });
+    },
+    // Add activity classes, increase activity counts by type,
+    styleActivity(activity, index) {
+      if (this.timestamp >= activity.start && this.timestamp <= activity.end) {
+        activity.cssClass = CURRENT_CSS_SUFFIX;
+      } else if (this.timestamp < activity.start) {
+        activity.cssClass = FUTURE_CSS_SUFFIX;
+      } else {
+        activity.cssClass = PAST_CSS_SUFFIX;
+      }
+
+      if (!activity.key) {
+        activity.key = uuid();
+      }
+
+      activity.duration = activity.end - activity.start;
+
+      if (activity.start < this.timestamp) {
+        //if the activity start time has passed, display the time to the end of the activity
+        activity.countdown = activity.end - this.timestamp;
+      } else {
+        activity.countdown = activity.start - this.timestamp;
+      }
+
+      return activity;
+    },
+    applyStyles(activities) {
+      return activities.map(this.styleActivity);
+    },
+    setSort() {
+      const sortOrder = SORT_ORDER_OPTIONS[this.domainObject.configuration.sortOrderIndex];
+      const property = sortOrder.property;
+      const direction = sortOrder.direction.toLowerCase() === 'asc';
+      this.defaultSort = {
+        property,
+        defaultDirection: direction
+      };
+    },
+    sortItems(activities) {
+      let sortedItems = _.sortBy(activities, this.defaultSort.property);
+      if (!this.defaultSort.defaultDirection) {
+        sortedItems = sortedItems.reverse();
+      }
+      return sortedItems;
+    },
+    setStatus(status) {
+      this.status = status;
+    },
+    setEditState(isEditing) {
+      this.isEditing = isEditing;
+      this.setViewFromConfig(this.domainObject.configuration);
+    },
+    sort(data) {
+      const property = data.property;
+      const direction = data.direction;
+
+      if (this.defaultSort.property === property) {
+        this.defaultSort.defaultDirection = !this.defaultSort.defaultDirection;
+      } else {
+        this.defaultSort.property = property;
+        this.defaultSort.defaultDirection = direction;
+      }
+    },
+    setSelectionForActivity(activity, element) {
+      const multiSelect = false;
+
+      this.openmct.selection.select(
+        [
+          {
+            element: element,
+            context: {
+              type: 'activity',
+              activity: activity
+            }
+          },
+          {
+            element: this.openmct.layout.$refs.browseObject.$el,
+            context: {
+              item: this.domainObject,
+              supportsMultiSelect: false
+            }
+          }
+        ],
+        multiSelect
+      );
+    }
+  }
+};
+</script>
diff --git a/src/plugins/timelist/TimelistCompositionPolicy.js b/src/plugins/timelist/TimelistCompositionPolicy.js
new file mode 100644
index 00000000000..9284181f571
--- /dev/null
+++ b/src/plugins/timelist/TimelistCompositionPolicy.js
@@ -0,0 +1,34 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import { TIMELIST_TYPE } from '@/plugins/timelist/constants';
+
+export default function TimelistCompositionPolicy(openmct) {
+  return {
+    allow: function (parent, child) {
+      if (parent.type === TIMELIST_TYPE && child.type !== 'plan') {
+        return false;
+      }
+
+      return true;
+    }
+  };
+}
diff --git a/src/plugins/timelist/TimelistViewProvider.js b/src/plugins/timelist/TimelistViewProvider.js
new file mode 100644
index 00000000000..823cfc19bfb
--- /dev/null
+++ b/src/plugins/timelist/TimelistViewProvider.js
@@ -0,0 +1,75 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
+
+import { TIMELIST_TYPE } from './constants.js';
+import Timelist from './TimelistComponent.vue';
+
+export default function TimelistViewProvider(openmct) {
+  return {
+    key: 'timelist.view',
+    name: 'Time List',
+    cssClass: 'icon-timelist',
+    canView(domainObject) {
+      return domainObject.type === TIMELIST_TYPE;
+    },
+
+    canEdit(domainObject) {
+      return domainObject.type === TIMELIST_TYPE;
+    },
+
+    view: function (domainObject, objectPath) {
+      let _destroy = null;
+
+      return {
+        show: function (element) {
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                Timelist
+              },
+              provide: {
+                openmct,
+                domainObject,
+                path: objectPath,
+                composition: openmct.composition.get(domainObject)
+              },
+              template: '<timelist></timelist>'
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+        },
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
+        }
+      };
+    }
+  };
+}
diff --git a/src/plugins/timelist/constants.js b/src/plugins/timelist/constants.js
new file mode 100644
index 00000000000..4146d130e76
--- /dev/null
+++ b/src/plugins/timelist/constants.js
@@ -0,0 +1,28 @@
+export const SORT_ORDER_OPTIONS = [
+  {
+    label: 'Start ascending',
+    property: 'start',
+    direction: 'ASC'
+  },
+  {
+    label: 'Start descending',
+    property: 'start',
+    direction: 'DESC'
+  },
+  {
+    label: 'End ascending',
+    property: 'end',
+    direction: 'ASC'
+  },
+  {
+    label: 'End descending',
+    property: 'end',
+    direction: 'DESC'
+  }
+];
+
+export const TIMELIST_TYPE = 'timelist';
+
+export const CURRENT_CSS_SUFFIX = '--is-current';
+export const PAST_CSS_SUFFIX = '--is-past';
+export const FUTURE_CSS_SUFFIX = '--is-future';
diff --git a/src/plugins/timelist/inspector/EventProperties.vue b/src/plugins/timelist/inspector/EventProperties.vue
new file mode 100644
index 00000000000..2865dcef777
--- /dev/null
+++ b/src/plugins/timelist/inspector/EventProperties.vue
@@ -0,0 +1,102 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <li class="c-inspect-properties__row">
+    <div class="c-inspect-properties__label" title="Options for future events.">{{ label }}</div>
+    <div class="c-inspect-properties__value">
+      <select v-if="canEdit" v-model="index" @change="updateForm('index')">
+        <option
+          v-for="(activityOption, activityKey) in activitiesOptions"
+          :key="activityKey"
+          :value="activityKey"
+        >
+          {{ activityOption }}
+        </option>
+      </select>
+      <span v-else>{{ activitiesOptions[index] }}</span>
+    </div>
+  </li>
+</template>
+
+<script>
+const ACTIVITIES_OPTIONS = ["Don't show", 'Show all'];
+
+export default {
+  inject: ['openmct', 'domainObject'],
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    prefix: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['updated'],
+  data() {
+    return {
+      index: this.domainObject.configuration[`${this.prefix}Index`] % 2, //this is modulo since we previously had more options and index could have been > 1
+      activitiesOptions: ACTIVITIES_OPTIONS,
+      isEditing: this.openmct.editor.isEditing()
+    };
+  },
+  computed: {
+    canEdit() {
+      return this.isEditing && !this.domainObject.locked;
+    }
+  },
+  mounted() {
+    if (this.prefix === 'futureEvents') {
+      this.activitiesOptions = ACTIVITIES_OPTIONS.slice(0, 3);
+    } else if (this.prefix === 'pastEvents') {
+      this.activitiesOptions = ACTIVITIES_OPTIONS.filter((item, index) => index !== 2);
+    } else if (this.prefix === 'currentEvents') {
+      this.activitiesOptions = ACTIVITIES_OPTIONS.slice(0, 2);
+    }
+
+    this.openmct.editor.on('isEditing', this.setEditState);
+  },
+  beforeUnmount() {
+    this.openmct.editor.off('isEditing', this.setEditState);
+  },
+  methods: {
+    updateForm(property) {
+      if (!this.isValid()) {
+        return;
+      }
+
+      const capitalized = property.charAt(0).toUpperCase() + property.substr(1);
+      this.$emit('updated', {
+        property: `${this.prefix}${capitalized}`,
+        value: this[property]
+      });
+    },
+    isValid() {
+      return this.index <= 1;
+    },
+    setEditState(isEditing) {
+      this.isEditing = isEditing;
+    }
+  }
+};
+</script>
diff --git a/src/plugins/timelist/inspector/FilteringComponent.vue b/src/plugins/timelist/inspector/FilteringComponent.vue
new file mode 100644
index 00000000000..e24311f053d
--- /dev/null
+++ b/src/plugins/timelist/inspector/FilteringComponent.vue
@@ -0,0 +1,159 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <li class="c-inspect-properties__row">
+    <div v-if="canEdit" class="c-inspect-properties__hint span-all">
+      Filter this view by comma-separated keywords. Filtering uses an 'OR' method.
+    </div>
+    <div class="c-inspect-properties__label" aria-label="Activity Names" title="Filter by keyword.">
+      Activity Names
+    </div>
+    <div
+      v-if="canEdit"
+      class="c-inspect-properties__value"
+      :class="{ 'form-error': hasFilterError }"
+    >
+      <textarea
+        v-model="filterValue"
+        class="c-input--flex"
+        type="text"
+        @keydown.enter.exact.stop="forceBlur($event)"
+        @keyup="updateNameFilter($event, 'filter')"
+      ></textarea>
+    </div>
+    <div v-else class="c-inspect-properties__value">
+      <template v-if="filterValue && filterValue.length > 0">
+        {{ filterValue }}
+      </template>
+      <template v-else> No filters applied </template>
+    </div>
+  </li>
+  <li class="c-inspect-properties__row">
+    <div
+      class="c-inspect-properties__label"
+      aria-label="Meta-data Properties"
+      title="Filter by keyword."
+    >
+      Meta-data Properties
+    </div>
+    <div
+      v-if="canEdit"
+      class="c-inspect-properties__value"
+      :class="{ 'form-error': hasMetadataFilterError }"
+    >
+      <textarea
+        v-model="filterMetadataValue"
+        class="c-input--flex"
+        type="text"
+        @keydown.enter.exact.stop="forceBlur($event)"
+        @keyup="updateMetadataFilter($event, 'filterMetadata')"
+      ></textarea>
+    </div>
+    <div v-else class="c-inspect-properties__value">
+      <template v-if="filterMetadataValue && filterMetadataValue.length > 0">
+        {{ filterMetadataValue }}
+      </template>
+      <template v-else> No filters applied </template>
+    </div>
+  </li>
+</template>
+
+<script>
+export default {
+  inject: ['openmct', 'domainObject'],
+  emits: ['updated'],
+  data() {
+    return {
+      isEditing: this.openmct.editor.isEditing(),
+      filterValue: this.domainObject.configuration.filter,
+      filterMetadataValue: this.domainObject.configuration.filterMetadata,
+      hasFilterError: false,
+      hasMetadataFilterError: false
+    };
+  },
+  computed: {
+    canEdit() {
+      return this.isEditing && !this.domainObject.locked;
+    }
+  },
+  mounted() {
+    this.openmct.editor.on('isEditing', this.setEditState);
+  },
+  beforeUnmount() {
+    this.openmct.editor.off('isEditing', this.setEditState);
+  },
+  methods: {
+    setEditState(isEditing) {
+      this.isEditing = isEditing;
+      if (!this.isEditing) {
+        if (this.hasFilterError) {
+          this.filterValue = this.domainObject.configuration.filter;
+        }
+        if (this.hasMetadataFilterError) {
+          this.filterMetadataValue = this.domainObject.configuration.filterMetadata;
+        }
+        this.hasFilterError = false;
+        this.hasMetadataFilterError = false;
+      }
+    },
+    forceBlur(event) {
+      event.target.blur();
+    },
+    updateNameFilter(event, property) {
+      if (!this.isValid(this.filterValue)) {
+        this.hasFilterError = true;
+
+        return;
+      }
+      this.hasFilterError = false;
+
+      this.$emit('updated', {
+        property,
+        value: this.filterValue.replace(/,(\s)*$/, '')
+      });
+    },
+    updateMetadataFilter(event, property) {
+      if (!this.isValid(this.filterMetadataValue)) {
+        this.hasMetadataFilterError = true;
+
+        return;
+      }
+      this.hasMetadataFilterError = false;
+
+      this.$emit('updated', {
+        property,
+        value: this.filterMetadataValue.replace(/,(\s)*$/, '')
+      });
+    },
+    isValid(value) {
+      // Test for any word character, any whitespace character or comma
+      if (value === '') {
+        return true;
+      }
+
+      const regex = new RegExp(/^([a-zA-Z0-9_.\-\s,])+$/g);
+
+      return regex.test(value);
+    }
+  }
+};
+</script>
diff --git a/src/plugins/timelist/inspector/TimeListInspectorViewProvider.js b/src/plugins/timelist/inspector/TimeListInspectorViewProvider.js
new file mode 100644
index 00000000000..13eda8442a3
--- /dev/null
+++ b/src/plugins/timelist/inspector/TimeListInspectorViewProvider.js
@@ -0,0 +1,76 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
+
+import { TIMELIST_TYPE } from '../constants.js';
+import TimelistPropertiesView from './TimelistPropertiesView.vue';
+
+export default function TimeListInspectorViewProvider(openmct) {
+  return {
+    key: 'timelist-inspector',
+    name: 'View Properties',
+    canView: function (selection) {
+      if (selection.length === 0 || selection[0].length === 0) {
+        return false;
+      }
+
+      let context = selection[0][0].context;
+
+      return context && context.item && context.item.type === TIMELIST_TYPE;
+    },
+    view: function (selection) {
+      let _destroy = null;
+
+      return {
+        show: function (element) {
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                TimelistPropertiesView: TimelistPropertiesView
+              },
+              provide: {
+                openmct,
+                domainObject: selection[0][0].context.item
+              },
+              template: '<timelist-properties-view></timelist-properties-view>'
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+        },
+        priority: function () {
+          return openmct.priority.HIGH + 1;
+        },
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
+        }
+      };
+    }
+  };
+}
diff --git a/src/plugins/timelist/inspector/TimelistPropertiesView.vue b/src/plugins/timelist/inspector/TimelistPropertiesView.vue
new file mode 100644
index 00000000000..057e0c65635
--- /dev/null
+++ b/src/plugins/timelist/inspector/TimelistPropertiesView.vue
@@ -0,0 +1,140 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-timelist-properties">
+    <div class="c-inspect-properties">
+      <ul class="c-inspect-properties__section">
+        <div class="c-inspect-properties_header" title="'Display options'">Display Options</div>
+        <li class="c-inspect-properties__row">
+          <div v-if="canEdit" class="c-inspect-properties__hint span-all">
+            These settings don't affect the view while editing, but will be applied after editing is
+            finished.
+          </div>
+          <div class="c-inspect-properties__label" title="Display Style">Display Style</div>
+          <div class="c-inspect-properties__value">
+            <select
+              v-if="canEdit"
+              v-model="isExpanded"
+              aria-label="Display Style"
+              @change="updateExpandedView"
+            >
+              <option :key="'expanded-view-option-enabled'" :value="true">Expanded</option>
+              <option :key="'expanded-view-option-disabled'" :value="false">Compact</option>
+            </select>
+            <span v-else>{{ isExpanded ? 'Expanded' : 'Compact' }}</span>
+          </div>
+        </li>
+        <li class="c-inspect-properties__row">
+          <div class="c-inspect-properties__label" title="Sort order of the timelist.">
+            Sort Order
+          </div>
+          <div class="c-inspect-properties__value">
+            <select v-if="canEdit" v-model="sortOrderIndex" @change="updateSortOrder()">
+              <option
+                v-for="(sortOrderOption, index) in sortOrderOptions"
+                :key="index"
+                :value="index"
+              >
+                {{ sortOrderOption.label }}
+              </option>
+            </select>
+            <span v-else>{{ sortOrderOptions[sortOrderIndex].label }}</span>
+          </div>
+        </li>
+        <event-properties
+          v-for="type in eventTypes"
+          :key="type.prefix"
+          :label="type.label"
+          :prefix="type.prefix"
+          @updated="eventPropertiesUpdated"
+        />
+      </ul>
+    </div>
+    <div class="c-inspect-properties">
+      <ul class="c-inspect-properties__section">
+        <div class="c-inspect-properties_header" title="'Filters'">Filtering</div>
+        <filtering @updated="eventPropertiesUpdated" />
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SORT_ORDER_OPTIONS } from '../constants.js';
+import EventProperties from './EventProperties.vue';
+import Filtering from './FilteringComponent.vue';
+
+const EVENT_TYPES = [
+  {
+    label: 'Current Events',
+    prefix: 'currentEvents'
+  }
+];
+
+export default {
+  components: {
+    Filtering,
+    EventProperties
+  },
+  inject: ['openmct', 'domainObject'],
+  data() {
+    return {
+      sortOrderIndex: this.domainObject.configuration.sortOrderIndex,
+      sortOrderOptions: SORT_ORDER_OPTIONS,
+      eventTypes: EVENT_TYPES,
+      isEditing: this.openmct.editor.isEditing(),
+      isExpanded: this.domainObject.configuration.isExpanded || false
+    };
+  },
+  computed: {
+    canEdit() {
+      return this.isEditing && !this.domainObject.locked;
+    }
+  },
+  mounted() {
+    this.openmct.editor.on('isEditing', this.setEditState);
+  },
+  beforeUnmount() {
+    this.openmct.editor.off('isEditing', this.setEditState);
+  },
+  methods: {
+    setEditState(isEditing) {
+      this.isEditing = isEditing;
+    },
+    updateSortOrder() {
+      this.updateProperty('sortOrderIndex', this.sortOrderIndex);
+    },
+    updateProperty(key, value) {
+      this.openmct.objects.mutate(this.domainObject, `configuration.${key}`, value);
+    },
+    eventPropertiesUpdated(data) {
+      const key = data.property;
+      const value = data.value;
+      this.updateProperty(key, value);
+    },
+    updateExpandedView() {
+      this.updateProperty('isExpanded', this.isExpanded);
+    }
+  }
+};
+</script>
diff --git a/src/plugins/timelist/plugin.js b/src/plugins/timelist/plugin.js
new file mode 100644
index 00000000000..feb91d93822
--- /dev/null
+++ b/src/plugins/timelist/plugin.js
@@ -0,0 +1,53 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import TimelistCompositionPolicy from '@/plugins/timelist/TimelistCompositionPolicy';
+
+import { TIMELIST_TYPE } from './constants.js';
+import TimeListInspectorViewProvider from './inspector/TimeListInspectorViewProvider.js';
+import TimelistViewProvider from './TimelistViewProvider.js';
+
+export default function () {
+  return function install(openmct) {
+    openmct.types.addType(TIMELIST_TYPE, {
+      name: 'Time List',
+      key: TIMELIST_TYPE,
+      description:
+        'A configurable, time-ordered list view of activities for a compatible mission plan file.',
+      creatable: true,
+      cssClass: 'icon-timelist',
+      initialize: function (domainObject) {
+        domainObject.configuration = {
+          sortOrderIndex: 0,
+          currentEventsIndex: 1,
+          filter: '',
+          filterMetadata: '',
+          isCompact: false
+        };
+        domainObject.composition = [];
+      }
+    });
+    openmct.objectViews.addProvider(new TimelistViewProvider(openmct));
+    openmct.inspectorViews.addProvider(new TimeListInspectorViewProvider(openmct));
+    openmct.composition.addPolicy(new TimelistCompositionPolicy(openmct).allow);
+  };
+}
diff --git a/src/plugins/timelist/pluginSpec.js b/src/plugins/timelist/pluginSpec.js
new file mode 100644
index 00000000000..63f082c623f
--- /dev/null
+++ b/src/plugins/timelist/pluginSpec.js
@@ -0,0 +1,565 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import EventEmitter from 'EventEmitter';
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+import { nextTick } from 'vue';
+
+import { FIXED_MODE_KEY } from '../../api/time/constants.js';
+import { TIMELIST_TYPE } from './constants.js';
+import TimelistPlugin from './plugin.js';
+
+const TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+
+const LIST_ITEM_CLASS = '.js-table__body .js-list-item';
+const LIST_ITEM_VALUE_CLASS = '.js-list-item__value';
+const LIST_ITEM_BODY_CLASS = '.js-table__body th';
+
+describe('the plugin', function () {
+  let timelistDefinition;
+  let element;
+  let child;
+  let openmct;
+  let appHolder;
+  let originalRouterPath;
+  let mockComposition;
+  let now = Date.now();
+  let twoHoursPast = now - 1000 * 60 * 60 * 2;
+  let oneHourPast = now - 1000 * 60 * 60;
+  let twoHoursFuture = now + 1000 * 60 * 60 * 2;
+  let threeHoursFuture = now + 1000 * 60 * 60 * 3;
+  let planObject = {
+    identifier: {
+      key: 'test-plan-object',
+      namespace: ''
+    },
+    type: 'plan',
+    id: 'test-plan-object',
+    selectFile: {
+      body: JSON.stringify({
+        'TEST-GROUP': [
+          {
+            name: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+            start: twoHoursPast,
+            end: oneHourPast,
+            type: 'TEST-GROUP',
+            color: 'fuchsia',
+            textColor: 'black'
+          },
+          {
+            name: 'Sed ut perspiciatis',
+            start: now,
+            end: twoHoursFuture,
+            type: 'TEST-GROUP',
+            color: 'fuchsia',
+            textColor: 'black',
+            properties: {
+              location: 'garden'
+            }
+          },
+          {
+            name: 'Sed ut perspiciatis two',
+            start: now,
+            end: threeHoursFuture,
+            type: 'TEST-GROUP',
+            color: 'fuchsia',
+            textColor: 'black',
+            properties: {
+              location: 'hallway'
+            }
+          }
+        ]
+      })
+    }
+  };
+
+  beforeEach((done) => {
+    appHolder = document.createElement('div');
+    appHolder.style.width = '640px';
+    appHolder.style.height = '480px';
+
+    openmct = createOpenMct({
+      timeSystemKey: 'utc',
+      bounds: {
+        start: twoHoursFuture,
+        end: threeHoursFuture
+      }
+    });
+    openmct.time.setMode(FIXED_MODE_KEY, {
+      start: twoHoursFuture,
+      end: threeHoursFuture
+    });
+    openmct.install(new TimelistPlugin());
+
+    timelistDefinition = openmct.types.get(TIMELIST_TYPE).definition;
+
+    element = document.createElement('div');
+    element.style.width = '640px';
+    element.style.height = '480px';
+    child = document.createElement('div');
+    child.style.width = '640px';
+    child.style.height = '480px';
+    element.appendChild(child);
+
+    originalRouterPath = openmct.router.path;
+
+    mockComposition = new EventEmitter();
+    // eslint-disable-next-line require-await
+    mockComposition.load = async () => {
+      return [planObject];
+    };
+
+    spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
+    openmct.on('start', done);
+    openmct.start(appHolder);
+  });
+
+  afterEach(() => {
+    openmct.router.path = originalRouterPath;
+
+    return resetApplicationState(openmct);
+  });
+
+  let mockTimelistObject = {
+    name: 'Timelist',
+    key: TIMELIST_TYPE,
+    creatable: true
+  };
+
+  it('defines a timelist object type with the correct key', () => {
+    expect(timelistDefinition.key).toEqual(mockTimelistObject.key);
+  });
+
+  it('is creatable', () => {
+    expect(timelistDefinition.creatable).toEqual(mockTimelistObject.creatable);
+  });
+
+  describe('the timelist view', () => {
+    it('provides a timelist view', () => {
+      const testViewObject = {
+        id: 'test-object',
+        type: TIMELIST_TYPE
+      };
+      openmct.router.path = [testViewObject];
+
+      const applicableViews = openmct.objectViews.get(testViewObject, [testViewObject]);
+      let timelistView = applicableViews.find(
+        (viewProvider) => viewProvider.key === 'timelist.view'
+      );
+      expect(timelistView).toBeDefined();
+    });
+  });
+
+  describe('the timelist view displays activities', () => {
+    let timelistDomainObject;
+    let timelistView;
+
+    beforeEach(() => {
+      timelistDomainObject = {
+        identifier: {
+          key: 'test-object',
+          namespace: ''
+        },
+        type: TIMELIST_TYPE,
+        id: 'test-object',
+        configuration: {
+          sortOrderIndex: 0,
+          futureEventsIndex: 1,
+          futureEventsDurationIndex: 0,
+          futureEventsDuration: 0,
+          currentEventsIndex: 1,
+          currentEventsDurationIndex: 0,
+          currentEventsDuration: 0,
+          pastEventsIndex: 1,
+          pastEventsDurationIndex: 0,
+          pastEventsDuration: 0,
+          filter: ''
+        },
+        selectFile: {
+          body: JSON.stringify({
+            'TEST-GROUP': [
+              {
+                name: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+                start: twoHoursPast,
+                end: oneHourPast,
+                type: 'TEST-GROUP',
+                color: 'fuchsia',
+                textColor: 'black'
+              },
+              {
+                name: 'Sed ut perspiciatis',
+                start: now,
+                end: twoHoursFuture,
+                type: 'TEST-GROUP',
+                color: 'fuchsia',
+                textColor: 'black'
+              }
+            ]
+          })
+        }
+      };
+
+      openmct.router.path = [timelistDomainObject];
+
+      const applicableViews = openmct.objectViews.get(timelistDomainObject, [timelistDomainObject]);
+      timelistView = applicableViews.find((viewProvider) => viewProvider.key === 'timelist.view');
+      let view = timelistView.view(timelistDomainObject, []);
+      view.show(child, true);
+
+      return nextTick();
+    });
+
+    it('displays the activities', () => {
+      const items = element.querySelectorAll(LIST_ITEM_CLASS);
+      expect(items.length).toEqual(1);
+    });
+
+    it('displays the activity headers', () => {
+      const headers = element.querySelectorAll(LIST_ITEM_BODY_CLASS);
+      expect(headers.length).toEqual(5);
+    });
+
+    it('displays activity details', (done) => {
+      const timeFormat = openmct.time.timeSystem().timeFormat;
+      const timeFormatter = openmct.telemetry.getValueFormatter({ format: timeFormat }).formatter;
+      nextTick(() => {
+        const itemEls = element.querySelectorAll(LIST_ITEM_CLASS);
+        const itemValues = itemEls[0].querySelectorAll(LIST_ITEM_VALUE_CLASS);
+        expect(itemValues.length).toEqual(5);
+        expect(itemValues[4].innerHTML.trim()).toEqual('Sed ut perspiciatis');
+        expect(itemValues[0].innerHTML.trim()).toEqual(timeFormatter.format(now, TIME_FORMAT));
+        expect(itemValues[1].innerHTML.trim()).toEqual(
+          timeFormatter.format(twoHoursFuture, TIME_FORMAT)
+        );
+
+        done();
+      });
+    });
+  });
+
+  describe('the timelist composition', () => {
+    let timelistDomainObject;
+    let timelistView;
+
+    beforeEach(() => {
+      timelistDomainObject = {
+        identifier: {
+          key: 'test-object',
+          namespace: ''
+        },
+        type: TIMELIST_TYPE,
+        id: 'test-object',
+        configuration: {
+          sortOrderIndex: 0,
+          futureEventsIndex: 1,
+          futureEventsDurationIndex: 0,
+          futureEventsDuration: 0,
+          currentEventsIndex: 1,
+          currentEventsDurationIndex: 0,
+          currentEventsDuration: 0,
+          pastEventsIndex: 1,
+          pastEventsDurationIndex: 0,
+          pastEventsDuration: 0,
+          filter: ''
+        },
+        composition: [
+          {
+            identifier: {
+              key: 'test-plan-object',
+              namespace: ''
+            }
+          }
+        ]
+      };
+
+      openmct.router.path = [timelistDomainObject];
+
+      const applicableViews = openmct.objectViews.get(timelistDomainObject, [timelistDomainObject]);
+      timelistView = applicableViews.find((viewProvider) => viewProvider.key === 'timelist.view');
+      let view = timelistView.view(timelistDomainObject, [timelistDomainObject]);
+      view.show(child, true);
+
+      return nextTick();
+    });
+
+    it('loads the plan from composition', () => {
+      mockComposition.emit('add', planObject);
+
+      return nextTick(() => {
+        const items = element.querySelectorAll(LIST_ITEM_CLASS);
+        expect(items.length).toEqual(2);
+      });
+    });
+  });
+
+  describe('filters by name', () => {
+    let timelistDomainObject;
+    let timelistView;
+
+    beforeEach(() => {
+      timelistDomainObject = {
+        identifier: {
+          key: 'test-object',
+          namespace: ''
+        },
+        type: TIMELIST_TYPE,
+        id: 'test-object',
+        configuration: {
+          sortOrderIndex: 2,
+          futureEventsIndex: 1,
+          futureEventsDurationIndex: 0,
+          futureEventsDuration: 0,
+          currentEventsIndex: 1,
+          currentEventsDurationIndex: 0,
+          currentEventsDuration: 0,
+          pastEventsIndex: 1,
+          pastEventsDurationIndex: 0,
+          pastEventsDuration: 0,
+          filter: 'perspiciatis'
+        },
+        composition: [
+          {
+            identifier: {
+              key: 'test-plan-object',
+              namespace: ''
+            }
+          }
+        ]
+      };
+
+      openmct.router.path = [timelistDomainObject];
+
+      const applicableViews = openmct.objectViews.get(timelistDomainObject, [timelistDomainObject]);
+      timelistView = applicableViews.find((viewProvider) => viewProvider.key === 'timelist.view');
+      let view = timelistView.view(timelistDomainObject, [timelistDomainObject]);
+      view.show(child, true);
+
+      return nextTick();
+    });
+
+    it('activities', () => {
+      mockComposition.emit('add', planObject);
+
+      return nextTick(() => {
+        const items = element.querySelectorAll(LIST_ITEM_CLASS);
+        expect(items.length).toEqual(2);
+      });
+    });
+
+    it('activities and sorts them correctly', () => {
+      mockComposition.emit('add', planObject);
+
+      return nextTick(() => {
+        const timeFormat = openmct.time.timeSystem().timeFormat;
+        const timeFormatter = openmct.telemetry.getValueFormatter({ format: timeFormat }).formatter;
+
+        const items = element.querySelectorAll(LIST_ITEM_CLASS);
+        expect(items.length).toEqual(2);
+
+        const itemValues = items[1].querySelectorAll(LIST_ITEM_VALUE_CLASS);
+        expect(itemValues[0].innerHTML.trim()).toEqual(timeFormatter.format(now, TIME_FORMAT));
+        expect(itemValues[1].innerHTML.trim()).toEqual(
+          timeFormatter.format(threeHoursFuture, TIME_FORMAT)
+        );
+        expect(itemValues[4].innerHTML.trim()).toEqual('Sed ut perspiciatis two');
+      });
+    });
+  });
+
+  describe('filters by metadata', () => {
+    let timelistDomainObject;
+    let timelistView;
+
+    beforeEach(() => {
+      timelistDomainObject = {
+        identifier: {
+          key: 'test-object',
+          namespace: ''
+        },
+        type: TIMELIST_TYPE,
+        id: 'test-object',
+        configuration: {
+          sortOrderIndex: 2,
+          futureEventsIndex: 1,
+          futureEventsDurationIndex: 0,
+          futureEventsDuration: 0,
+          currentEventsIndex: 1,
+          currentEventsDurationIndex: 0,
+          currentEventsDuration: 0,
+          pastEventsIndex: 1,
+          pastEventsDurationIndex: 0,
+          pastEventsDuration: 0,
+          filter: '',
+          filterMetadata: 'hallway,garden'
+        },
+        composition: [
+          {
+            identifier: {
+              key: 'test-plan-object',
+              namespace: ''
+            }
+          }
+        ]
+      };
+
+      openmct.router.path = [timelistDomainObject];
+
+      const applicableViews = openmct.objectViews.get(timelistDomainObject, [timelistDomainObject]);
+      timelistView = applicableViews.find((viewProvider) => viewProvider.key === 'timelist.view');
+      let view = timelistView.view(timelistDomainObject, [timelistDomainObject]);
+      view.show(child, true);
+
+      return nextTick();
+    });
+
+    it('activities and sorts them correctly', () => {
+      mockComposition.emit('add', planObject);
+
+      return nextTick(() => {
+        const timeFormat = openmct.time.timeSystem().timeFormat;
+        const timeFormatter = openmct.telemetry.getValueFormatter({ format: timeFormat }).formatter;
+
+        const items = element.querySelectorAll(LIST_ITEM_CLASS);
+        expect(items.length).toEqual(2);
+
+        const itemValues = items[1].querySelectorAll(LIST_ITEM_VALUE_CLASS);
+        expect(itemValues[0].innerHTML.trim()).toEqual(timeFormatter.format(now, TIME_FORMAT));
+        expect(itemValues[1].innerHTML.trim()).toEqual(
+          timeFormatter.format(threeHoursFuture, TIME_FORMAT)
+        );
+        expect(itemValues[4].innerHTML.trim()).toEqual('Sed ut perspiciatis two');
+      });
+    });
+  });
+
+  describe('filters by name and metadata', () => {
+    let timelistDomainObject;
+    let timelistView;
+
+    beforeEach(() => {
+      timelistDomainObject = {
+        identifier: {
+          key: 'test-object',
+          namespace: ''
+        },
+        type: TIMELIST_TYPE,
+        id: 'test-object',
+        configuration: {
+          sortOrderIndex: 2,
+          currentEventsIndex: 1,
+          filter: 'two',
+          filterMetadata: 'garden'
+        },
+        composition: [
+          {
+            identifier: {
+              key: 'test-plan-object',
+              namespace: ''
+            }
+          }
+        ]
+      };
+
+      openmct.router.path = [timelistDomainObject];
+
+      const applicableViews = openmct.objectViews.get(timelistDomainObject, [timelistDomainObject]);
+      timelistView = applicableViews.find((viewProvider) => viewProvider.key === 'timelist.view');
+      let view = timelistView.view(timelistDomainObject, [timelistDomainObject]);
+      view.show(child, true);
+
+      return nextTick();
+    });
+
+    it('activities and sorts them correctly', () => {
+      mockComposition.emit('add', planObject);
+
+      return nextTick(() => {
+        const timeFormat = openmct.time.timeSystem().timeFormat;
+        const timeFormatter = openmct.telemetry.getValueFormatter({ format: timeFormat }).formatter;
+
+        const items = element.querySelectorAll(LIST_ITEM_CLASS);
+        expect(items.length).toEqual(2);
+
+        const itemValues = items[0].querySelectorAll(LIST_ITEM_VALUE_CLASS);
+        expect(itemValues[0].innerHTML.trim()).toEqual(timeFormatter.format(now, TIME_FORMAT));
+        expect(itemValues[1].innerHTML.trim()).toEqual(
+          timeFormatter.format(twoHoursFuture, TIME_FORMAT)
+        );
+      });
+    });
+  });
+
+  describe('time filtering - past', () => {
+    let timelistDomainObject;
+    let timelistView;
+
+    beforeEach(() => {
+      timelistDomainObject = {
+        identifier: {
+          key: 'test-object',
+          namespace: ''
+        },
+        type: TIMELIST_TYPE,
+        id: 'test-object',
+        configuration: {
+          sortOrderIndex: 0,
+          futureEventsIndex: 1,
+          futureEventsDurationIndex: 0,
+          futureEventsDuration: 0,
+          currentEventsIndex: 1,
+          currentEventsDurationIndex: 0,
+          currentEventsDuration: 0,
+          pastEventsIndex: 0,
+          pastEventsDurationIndex: 0,
+          pastEventsDuration: 0,
+          filter: ''
+        },
+        composition: [
+          {
+            identifier: {
+              key: 'test-plan-object',
+              namespace: ''
+            }
+          }
+        ]
+      };
+
+      openmct.router.path = [timelistDomainObject];
+
+      const applicableViews = openmct.objectViews.get(timelistDomainObject, [timelistDomainObject]);
+      timelistView = applicableViews.find((viewProvider) => viewProvider.key === 'timelist.view');
+      let view = timelistView.view(timelistDomainObject, [timelistDomainObject]);
+      view.show(child, true);
+
+      return nextTick();
+    });
+
+    it('hides past events', () => {
+      mockComposition.emit('add', planObject);
+
+      return nextTick(() => {
+        const items = element.querySelectorAll(LIST_ITEM_CLASS);
+        expect(items.length).toEqual(2);
+      });
+    });
+  });
+});
diff --git a/src/plugins/timelist/timelist.scss b/src/plugins/timelist/timelist.scss
new file mode 100644
index 00000000000..c0a4c80881f
--- /dev/null
+++ b/src/plugins/timelist/timelist.scss
@@ -0,0 +1,330 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+.c-timelist {
+    & .nowMarker.hasCurrent {
+        height: 2px;
+        position: absolute;
+        z-index: 10;
+        background: cyan;
+        width: 100%;
+    }
+
+    .c-list-item {
+        /* Time Lists */
+
+        td {
+            $p: $interiorMarginSm;
+            padding-top: $p;
+            padding-bottom: $p;
+        }
+
+        &.--is-current {
+            background-color: $colorCurrentBg;
+            border-top: 1px solid $colorCurrentBorder !important;
+            color: $colorCurrentFgEm;
+        }
+
+        &.--is-future {
+            background-color: $colorFutureBg;
+            border-top-color: $colorFutureBorder !important;
+            color: $colorFutureFgEm;
+        }
+
+        &.--is-in-progress {
+            background-color: $colorInProgressBg;
+        }
+
+        &__value {
+            &.--duration {
+                width: 5%;
+            }
+        }
+    }
+}
+
+/**************************************************** LARGE TIME LIST */
+@mixin styleTliEm($colorEm) {
+    // Styles emphasized elements within c-tli.
+    .c-tli {
+        &__duration,
+        &__title,
+        &__time-hero-time {
+            color: $colorEm;
+        }
+    }
+}
+@mixin showTliGraphic($wGraphic) {
+    .c-tli__graphic {
+        &__#{$wGraphic} {
+            display: block;
+        }
+    }
+}
+
+.c-timelist--large {
+    $textSm: 0.8em;
+    $textLg: 1.3em;
+
+    margin-right: $interiorMargin; // fend off from scrollbar
+
+    > * + * {
+        margin-top: $interiorMarginSm;
+    }
+
+    .c-tli {
+        // TODO: add styles for various activity statuses
+        $baseBg: $colorPastBg;
+        $baseFg: $colorPastFg;
+        $baseFgEm: $colorPastFgEm;
+
+        background: $baseBg;
+        color: $baseFg;
+        border-radius: $basicCr;
+        display: grid;
+        padding: $interiorMargin;
+        grid-template-columns: min-content 3fr 40px 1fr;
+        grid-column-gap: $interiorMargin;
+
+        &[s-selected] {
+            background: $colorSelectedBg !important;
+            box-shadow: inset rgba($colorSelectedFg, 0.1) 0 0 0 1px;
+            color: $colorSelectedFg !important;
+        }
+
+        @include styleTliEm($baseFgEm);
+
+        &__activity-color {
+            align-items: start;
+            display: flex;
+            padding-top: 1px;
+        }
+
+        &__activity-color-swatch {
+            $d: 16px;
+            border-radius: 50%;
+            box-shadow: rgba(black, 0.3) 0 0 2px 1px;
+            width: $d;
+            height: $d;
+        }
+
+        &__title-and-bounds {
+            > * + * {
+                margin-top: $interiorMargin;
+            }
+        }
+
+        &__bounds {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+
+            > * {
+                margin-right: $interiorMargin;
+                white-space: nowrap;
+            }
+
+            &.--has-duration {
+                .c-tli__start-time {
+                    display: flex;
+                    align-items: start;
+
+                    &:after {
+                        content: $glyph-icon-play;
+                        font-family: symbolsfont;
+                        font-size: 0.7em;
+                        display: block;
+                        margin-left: $interiorMargin;
+                        margin-top: 2px;
+                    }
+                }
+            }
+        }
+
+        &__title {
+            font-size: $textLg;
+        }
+
+        &__time-hero {
+            display: flex;
+            align-items: center;
+            justify-content: end;
+        }
+
+        &__time-hero-context-and-time {
+            align-items: center;
+            flex-wrap: wrap;
+            display: flex;
+            justify-content: end;
+            text-align: right;
+
+            > * + * {
+                margin-left: $interiorMargin;
+            }
+        }
+
+        &__time-hero-context {
+            font-size: $textSm;
+            text-transform: uppercase;
+        }
+
+        &__time-hero-time {
+            display: flex;
+            align-items: center;
+            font-size: $textLg;
+            white-space: nowrap;
+
+            &:before {
+                display: block;
+                font-family: symbolsfont;
+                font-size: 0.7em;
+                margin-right: 3px;
+            }
+
+            &.--is-countdown {
+                &:before {
+                    content: $glyph-icon-minus;
+                }
+            }
+
+            &.--is-countup {
+                &:before {
+                    content: $glyph-icon-plus;
+                }
+            }
+        }
+
+        &__graphic {
+            display: flex;
+            fill: $baseFg;
+            align-items: center;
+
+            svg {
+                > * {
+                    display: none;
+                }
+            }
+        }
+
+        &.--is-current {
+            background-color: $colorCurrentBg;
+            color: $colorCurrentFg;
+            @include styleTliEm($colorCurrentFgEm);
+        }
+
+        &.--is-future {
+            background-color: $colorFutureBg;
+            color: $colorFutureFg;
+            @include styleTliEm($colorFutureFgEm);
+        }
+
+        /************************************ ACTIVITY STATE STYLES */
+        /*
+        - 'In Progress' : itemState.inProgress
+        - 'Running Long' : itemState.inProgress && now > end datetime
+        - 'Overdue' : itemState.notStarted && now > start datetime
+        - 'Incomplete' : itemState.notStarted && now > end datetime
+        - 'Starts' : for Activities with now > start datetime
+        - 'Occurs' : for Events with now > start datetime
+        - 'Ends' : itemState.inProgress && now > start datetime && now < end datetime
+        - 'Completed', 'Aborted', 'Skipped' : itemState.<that state>
+        */
+        &.--is-not-started {
+
+        }
+
+        &.--is-in-progress {
+            @include showTliGraphic('pie');
+            background-color: $colorInProgressBg;
+            color: $colorInProgressFg;
+        }
+
+        &.--is-running-long {
+            @include showTliGraphic('alert-triangle');
+            background-color: $colorInProgressBg;
+            color: $colorInProgressFg;
+        }
+
+        &.--is-overdue,
+        &.--is-incomplete {
+            @include showTliGraphic('alert-triangle');
+
+        }
+
+        &.--is-completed {
+            @include showTliGraphic('check');
+        }
+
+        &.--is-aborted {
+            @include showTliGraphic('circle-slash');
+        }
+
+        &.--is-skipped {
+            @include showTliGraphic('skipped');
+        }
+
+        &__check {
+            // Overrides?
+        }
+
+        &__alert-triangle {
+            // Overrides?
+        }
+
+        &__circle-slash {
+            // Overrides?
+        }
+    }
+}
+
+.c-svg-progress {
+    &__bg {
+        fill: rgba(black, 0.2);
+    }
+
+    &__ticks {
+        fill: none;
+        stroke: $colorInProgressFg;
+        stroke-width: 6;
+    }
+
+    &__progress {
+        fill: $colorInProgressFgEm;
+    }
+
+    &__sweep-hand {
+        animation-name: sweep-hand;
+        animation-duration: 10s;
+        animation-iteration-count: infinite;
+        animation-timing-function: steps(12);
+        fill: $colorInProgressFg;
+        transform-origin: center;
+    }
+}
+
+@keyframes sweep-hand {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
diff --git a/src/plugins/timer/TimerViewProvider.js b/src/plugins/timer/TimerViewProvider.js
new file mode 100644
index 00000000000..8eadeeddbfd
--- /dev/null
+++ b/src/plugins/timer/TimerViewProvider.js
@@ -0,0 +1,74 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
+
+import Timer from './components/TimerComponent.vue';
+
+export default function TimerViewProvider(openmct) {
+  return {
+    key: 'timer.view',
+    name: 'Timer',
+    cssClass: 'icon-timer',
+    canView(domainObject) {
+      return domainObject.type === 'timer';
+    },
+
+    view: function (domainObject, objectPath) {
+      let _destroy = null;
+
+      return {
+        show: function (element) {
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                Timer
+              },
+              provide: {
+                openmct,
+                currentView: this
+              },
+              data() {
+                return {
+                  domainObject,
+                  objectPath
+                };
+              },
+              template: '<timer :domain-object="domainObject" :object-path="objectPath" />'
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
+        },
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
+        }
+      };
+    }
+  };
+}
diff --git a/src/plugins/timer/actions/PauseTimerAction.js b/src/plugins/timer/actions/PauseTimerAction.js
new file mode 100644
index 00000000000..1f129b74e7a
--- /dev/null
+++ b/src/plugins/timer/actions/PauseTimerAction.js
@@ -0,0 +1,61 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+export default class PauseTimerAction {
+  constructor(openmct) {
+    this.name = 'Pause';
+    this.key = 'timer.pause';
+    this.description = 'Pause the currently displayed timer';
+    this.group = 'view';
+    this.cssClass = 'icon-pause';
+    this.priority = 3;
+
+    this.openmct = openmct;
+  }
+  invoke(objectPath) {
+    const domainObject = objectPath[0];
+    if (!domainObject || !domainObject.configuration) {
+      return new Error('Unable to run pause timer action. No domainObject provided.');
+    }
+
+    const newConfiguration = { ...domainObject.configuration };
+    newConfiguration.timerState = 'paused';
+    newConfiguration.pausedTime = new Date(this.openmct.time.now());
+
+    this.openmct.objects.mutate(domainObject, 'configuration', newConfiguration);
+  }
+  appliesTo(objectPath, view = {}) {
+    const domainObject = objectPath[0];
+    if (!domainObject || !domainObject.configuration) {
+      return;
+    }
+
+    // Use object configuration timerState for viewless context menus,
+    // otherwise manually show/hide based on the view's timerState
+    const viewKey = view.key;
+    const { timerState } = domainObject.configuration;
+
+    return viewKey
+      ? domainObject.type === 'timer'
+      : domainObject.type === 'timer' && timerState === 'started';
+  }
+}
diff --git a/src/plugins/timer/actions/RestartTimerAction.js b/src/plugins/timer/actions/RestartTimerAction.js
new file mode 100644
index 00000000000..87fba0777f0
--- /dev/null
+++ b/src/plugins/timer/actions/RestartTimerAction.js
@@ -0,0 +1,62 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+export default class RestartTimerAction {
+  constructor(openmct) {
+    this.name = 'Restart at 0';
+    this.key = 'timer.restart';
+    this.description = 'Restart the currently displayed timer';
+    this.group = 'view';
+    this.cssClass = 'icon-refresh';
+    this.priority = 2;
+
+    this.openmct = openmct;
+  }
+  invoke(objectPath) {
+    const domainObject = objectPath[0];
+    if (!domainObject || !domainObject.configuration) {
+      return new Error('Unable to run restart timer action. No domainObject provided.');
+    }
+
+    const newConfiguration = { ...domainObject.configuration };
+    newConfiguration.timerState = 'started';
+    newConfiguration.timestamp = new Date(this.openmct.time.now());
+    newConfiguration.pausedTime = undefined;
+
+    this.openmct.objects.mutate(domainObject, 'configuration', newConfiguration);
+  }
+  appliesTo(objectPath, view = {}) {
+    const domainObject = objectPath[0];
+    if (!domainObject || !domainObject.configuration) {
+      return;
+    }
+
+    // Use object configuration timerState for viewless context menus,
+    // otherwise manually show/hide based on the view's timerState
+    const viewKey = view.key;
+    const { timerState } = domainObject.configuration;
+
+    return viewKey
+      ? domainObject.type === 'timer'
+      : domainObject.type === 'timer' && timerState !== 'stopped';
+  }
+}
diff --git a/src/plugins/timer/actions/StartTimerAction.js b/src/plugins/timer/actions/StartTimerAction.js
new file mode 100644
index 00000000000..e6b03679cfa
--- /dev/null
+++ b/src/plugins/timer/actions/StartTimerAction.js
@@ -0,0 +1,74 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+export default class StartTimerAction {
+  constructor(openmct) {
+    this.name = 'Start';
+    this.key = 'timer.start';
+    this.description = 'Start the currently displayed timer';
+    this.group = 'view';
+    this.cssClass = 'icon-play';
+    this.priority = 3;
+
+    this.openmct = openmct;
+  }
+
+  invoke(objectPath) {
+    const domainObject = objectPath[0];
+    if (!domainObject || !domainObject.configuration) {
+      return new Error('Unable to run start timer action. No domainObject provided.');
+    }
+
+    let { pausedTime, timestamp } = domainObject.configuration;
+    const newConfiguration = { ...domainObject.configuration };
+
+    const now = new Date(this.openmct.time.now());
+
+    if (pausedTime) {
+      const timeShift = now - new Date(pausedTime);
+      const shiftedTime = new Date(new Date(timestamp).getTime() + timeShift);
+      newConfiguration.timestamp = shiftedTime;
+    } else if (!timestamp) {
+      newConfiguration.timestamp = now;
+    }
+
+    newConfiguration.timerState = 'started';
+    newConfiguration.pausedTime = undefined;
+    this.openmct.objects.mutate(domainObject, 'configuration', newConfiguration);
+  }
+
+  appliesTo(objectPath, view = {}) {
+    const domainObject = objectPath[0];
+    if (!domainObject || !domainObject.configuration) {
+      return;
+    }
+
+    // Use object configuration timerState for viewless context menus,
+    // otherwise manually show/hide based on the view's timerState
+    const viewKey = view.key;
+    const { timerState } = domainObject.configuration;
+
+    return viewKey
+      ? domainObject.type === 'timer'
+      : domainObject.type === 'timer' && timerState !== 'started';
+  }
+}
diff --git a/src/plugins/timer/actions/StopTimerAction.js b/src/plugins/timer/actions/StopTimerAction.js
new file mode 100644
index 00000000000..d417780c0d1
--- /dev/null
+++ b/src/plugins/timer/actions/StopTimerAction.js
@@ -0,0 +1,62 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+export default class StopTimerAction {
+  constructor(openmct) {
+    this.name = 'Stop';
+    this.key = 'timer.stop';
+    this.description = 'Stop the currently displayed timer';
+    this.group = 'view';
+    this.cssClass = 'icon-box-round-corners';
+    this.priority = 1;
+
+    this.openmct = openmct;
+  }
+  invoke(objectPath) {
+    const domainObject = objectPath[0];
+    if (!domainObject || !domainObject.configuration) {
+      return new Error('Unable to run stop timer action. No domainObject provided.');
+    }
+
+    const newConfiguration = { ...domainObject.configuration };
+    newConfiguration.timerState = 'stopped';
+    newConfiguration.timestamp = undefined;
+    newConfiguration.pausedTime = undefined;
+
+    this.openmct.objects.mutate(domainObject, 'configuration', newConfiguration);
+  }
+  appliesTo(objectPath, view = {}) {
+    const domainObject = objectPath[0];
+    if (!domainObject || !domainObject.configuration) {
+      return;
+    }
+
+    // Use object configuration timerState for viewless context menus,
+    // otherwise manually show/hide based on the view's timerState
+    const viewKey = view.key;
+    const { timerState } = domainObject.configuration;
+
+    return viewKey
+      ? domainObject.type === 'timer'
+      : domainObject.type === 'timer' && timerState !== 'stopped';
+  }
+}
diff --git a/src/plugins/timer/components/TimerComponent.vue b/src/plugins/timer/components/TimerComponent.vue
new file mode 100644
index 00000000000..2e124e499ae
--- /dev/null
+++ b/src/plugins/timer/components/TimerComponent.vue
@@ -0,0 +1,237 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-timer u-style-receiver js-style-receiver" :class="[`is-${timerState}`]">
+    <div class="c-timer__controls">
+      <button
+        title="Reset"
+        aria-label="Reset"
+        class="c-timer__ctrl-reset c-icon-button c-icon-button--major icon-reset"
+        :class="[{ hide: timerState === 'stopped' }]"
+        @click="restartTimer"
+      ></button>
+      <button
+        :title="timerStateButtonText"
+        :aria-label="timerStateButtonText"
+        class="c-timer__ctrl-pause-play c-icon-button c-icon-button--major"
+        :class="[timerStateButtonIcon]"
+        @click="toggleStateButton"
+      ></button>
+    </div>
+    <div class="c-timer__direction" :class="[{ hide: !timerSign }, `icon-${timerSign}`]"></div>
+    <div class="c-timer__value">{{ timerState === 'stopped' ? '--:--:--' : timeTextValue }}</div>
+  </div>
+</template>
+
+<script>
+import momentDurationFormatSetup from 'moment-duration-format';
+import moment from 'moment-timezone';
+import raf from 'utils/raf';
+
+import throttle from '../../../utils/throttle.js';
+const refreshRateSeconds = 2;
+
+momentDurationFormatSetup(moment);
+
+export default {
+  inject: ['openmct', 'currentView'],
+  props: {
+    domainObject: {
+      type: Object,
+      required: true
+    },
+    objectPath: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      configuration: this.domainObject.configuration,
+      lastTimestamp: null
+    };
+  },
+  computed: {
+    timeDelta() {
+      if (this.configuration.pausedTime) {
+        return Date.parse(this.configuration.pausedTime) - this.startTimeMs;
+      } else {
+        return this.lastTimestamp - this.startTimeMs;
+      }
+    },
+    startTimeMs() {
+      return Date.parse(this.configuration.timestamp);
+    },
+    timeTextValue() {
+      const toWholeSeconds = Math.abs(Math.floor(this.timeDelta / 1000) * 1000);
+
+      return moment.duration(toWholeSeconds, 'ms').format(this.format, { trim: false });
+    },
+    timerState() {
+      let timerState = 'started';
+      if (this.configuration && this.configuration.timerState) {
+        timerState = this.configuration.timerState;
+      }
+
+      return timerState;
+    },
+    timerStateButtonText() {
+      let buttonText = 'Pause';
+      if (['paused', 'stopped'].includes(this.timerState)) {
+        buttonText = 'Start';
+      }
+
+      return buttonText;
+    },
+    timerStateButtonIcon() {
+      let buttonIcon = 'icon-pause';
+      if (['paused', 'stopped'].includes(this.timerState)) {
+        buttonIcon = 'icon-play';
+      }
+
+      return buttonIcon;
+    },
+    timerFormat() {
+      let timerFormat = 'long';
+      if (this.configuration && this.configuration.timerFormat) {
+        timerFormat = this.configuration.timerFormat;
+      }
+
+      return timerFormat;
+    },
+    format() {
+      let format;
+      if (this.timerFormat === 'long') {
+        format = 'd[D] HH:mm:ss';
+      }
+
+      if (this.timerFormat === 'short') {
+        format = 'HH:mm:ss';
+      }
+
+      return format;
+    },
+    timerType() {
+      let timerType = null;
+      if (isNaN(this.timeDelta)) {
+        return timerType;
+      }
+
+      if (this.timeDelta < 0) {
+        timerType = 'countDown';
+      } else if (this.timeDelta >= 1000) {
+        timerType = 'countUp';
+      }
+
+      return timerType;
+    },
+    timerSign() {
+      let timerSign = null;
+      if (this.timerType === 'countUp') {
+        timerSign = 'plus';
+      } else if (this.timerType === 'countDown') {
+        timerSign = 'minus';
+      }
+
+      return timerSign;
+    }
+  },
+  watch: {
+    timerState() {
+      if (!this.viewActionsCollection) {
+        return;
+      }
+
+      this.showOrHideAvailableActions();
+    }
+  },
+  mounted() {
+    this.unobserve = this.openmct.objects.observe(this.domainObject, '*', (domainObject) => {
+      this.configuration = domainObject.configuration;
+    });
+    this.$nextTick(() => {
+      if (!this.configuration?.timerState) {
+        const timerAction = !this.timeDelta ? 'stop' : 'start';
+        this.triggerAction(`timer.${timerAction}`);
+      }
+
+      this.handleTick = raf(this.handleTick);
+      this.refreshTimerObject = throttle(this.refreshTimerObject, refreshRateSeconds * 1000);
+      this.openmct.time.on('tick', this.handleTick);
+
+      this.viewActionsCollection = this.openmct.actions.getActionsCollection(
+        this.objectPath,
+        this.currentView
+      );
+      this.showOrHideAvailableActions();
+    });
+  },
+  beforeUnmount() {
+    if (this.unobserve) {
+      this.unobserve();
+    }
+    this.openmct.time.off('tick', this.handleTick);
+  },
+  methods: {
+    handleTick() {
+      this.lastTimestamp = new Date(this.openmct.time.now());
+      this.refreshTimerObject();
+    },
+    refreshTimerObject() {
+      this.openmct.objects.refresh(this.domainObject);
+    },
+    restartTimer() {
+      this.triggerAction('timer.restart');
+    },
+    toggleStateButton() {
+      if (this.timerState === 'started') {
+        this.triggerAction('timer.pause');
+      } else if (['paused', 'stopped'].includes(this.timerState)) {
+        this.triggerAction('timer.start');
+      }
+    },
+    triggerAction(actionKey) {
+      const action = this.openmct.actions.getAction(actionKey);
+      if (action) {
+        action.invoke(this.objectPath, this.currentView);
+      }
+    },
+    showOrHideAvailableActions() {
+      switch (this.timerState) {
+        case 'started':
+          this.viewActionsCollection.hide(['timer.start']);
+          this.viewActionsCollection.show(['timer.stop', 'timer.pause', 'timer.restart']);
+          break;
+        case 'paused':
+          this.viewActionsCollection.hide(['timer.pause']);
+          this.viewActionsCollection.show(['timer.stop', 'timer.start', 'timer.restart']);
+          break;
+        case 'stopped':
+          this.viewActionsCollection.hide(['timer.stop', 'timer.pause', 'timer.restart']);
+          this.viewActionsCollection.show(['timer.start']);
+          break;
+      }
+    }
+  }
+};
+</script>
diff --git a/src/plugins/timer/plugin.js b/src/plugins/timer/plugin.js
new file mode 100644
index 00000000000..0c5a4d1df4d
--- /dev/null
+++ b/src/plugins/timer/plugin.js
@@ -0,0 +1,111 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import PauseTimerAction from './actions/PauseTimerAction.js';
+import RestartTimerAction from './actions/RestartTimerAction.js';
+import StartTimerAction from './actions/StartTimerAction.js';
+import StopTimerAction from './actions/StopTimerAction.js';
+import TimerViewProvider from './TimerViewProvider.js';
+
+export default function TimerPlugin() {
+  return function install(openmct) {
+    openmct.types.addType('timer', {
+      name: 'Timer',
+      description:
+        'A timer that counts up or down to a datetime. Timers can be started, stopped and reset whenever needed, and support a variety of display formats. Each Timer displays the same value to all users. Timers can be added to Display Layouts.',
+      creatable: true,
+      cssClass: 'icon-timer',
+      initialize: function (domainObject) {
+        domainObject.configuration = {
+          timerFormat: 'long',
+          timestamp: undefined,
+          timezone: 'UTC',
+          timerState: undefined,
+          pausedTime: undefined
+        };
+      },
+      form: [
+        {
+          key: 'timestamp',
+          control: 'datetime',
+          name: 'Target',
+          property: ['configuration', 'timestamp']
+        },
+        {
+          key: 'timerFormat',
+          name: 'Display Format',
+          control: 'select',
+          options: [
+            {
+              value: 'long',
+              name: 'DDD hh:mm:ss'
+            },
+            {
+              value: 'short',
+              name: 'hh:mm:ss'
+            }
+          ],
+          property: ['configuration', 'timerFormat']
+        }
+      ]
+    });
+    openmct.objectViews.addProvider(new TimerViewProvider(openmct));
+
+    openmct.actions.register(new PauseTimerAction(openmct));
+    openmct.actions.register(new RestartTimerAction(openmct));
+    openmct.actions.register(new StartTimerAction(openmct));
+    openmct.actions.register(new StopTimerAction(openmct));
+
+    openmct.objects.addGetInterceptor({
+      appliesTo: (identifier, domainObject) => {
+        return domainObject && domainObject.type === 'timer';
+      },
+      invoke: (identifier, domainObject) => {
+        if (domainObject.configuration) {
+          return domainObject;
+        }
+
+        const configuration = {};
+
+        if (domainObject.timerFormat) {
+          configuration.timerFormat = domainObject.timerFormat;
+        }
+
+        if (domainObject.timestamp) {
+          configuration.timestamp = domainObject.timestamp;
+        }
+
+        if (domainObject.timerState) {
+          configuration.timerState = domainObject.timerState;
+        }
+
+        if (domainObject.pausedTime) {
+          configuration.pausedTime = domainObject.pausedTime;
+        }
+
+        openmct.objects.mutate(domainObject, 'configuration', configuration);
+
+        return domainObject;
+      }
+    });
+  };
+}
diff --git a/src/plugins/timer/pluginSpec.js b/src/plugins/timer/pluginSpec.js
new file mode 100644
index 00000000000..8b369887410
--- /dev/null
+++ b/src/plugins/timer/pluginSpec.js
@@ -0,0 +1,367 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createOpenMct, resetApplicationState, spyOnBuiltins } from 'utils/testing';
+import { nextTick } from 'vue';
+
+import timerPlugin from './plugin.js';
+
+xdescribe('Timer plugin:', () => {
+  let openmct;
+  let timerDefinition;
+  let element;
+  let child;
+  let appHolder;
+
+  let timerDomainObject;
+
+  function setupTimer() {
+    return new Promise((resolve, reject) => {
+      timerDomainObject = {
+        identifier: {
+          key: 'timer',
+          namespace: 'test-namespace'
+        },
+        type: 'timer'
+      };
+
+      appHolder = document.createElement('div');
+      appHolder.style.width = '640px';
+      appHolder.style.height = '480px';
+      document.body.appendChild(appHolder);
+
+      openmct = createOpenMct();
+
+      element = document.createElement('div');
+      child = document.createElement('div');
+      element.appendChild(child);
+
+      openmct.install(timerPlugin());
+
+      timerDefinition = openmct.types.get('timer').definition;
+      timerDefinition.initialize(timerDomainObject);
+
+      spyOn(openmct.objects, 'supportsMutation').and.returnValue(true);
+
+      openmct.on('start', resolve);
+      openmct.start(appHolder);
+    });
+  }
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  describe("should still work if it's in the old format", () => {
+    let timerViewProvider;
+    let timerView;
+    let timerViewObject;
+    let mutableTimerObject;
+    let timerObjectPath;
+    const relativeTimestamp = 1634774400000; // Oct 21 2021, 12:00 AM
+
+    beforeEach(async () => {
+      await setupTimer();
+
+      timerViewObject = {
+        identifier: {
+          key: 'timer',
+          namespace: 'test-namespace'
+        },
+        type: 'timer',
+        id: 'test-object',
+        name: 'Timer',
+        timerFormat: 'short',
+        timestamp: relativeTimestamp,
+        timerState: 'paused',
+        pausedTime: relativeTimestamp
+      };
+
+      const applicableViews = openmct.objectViews.get(timerViewObject, [timerViewObject]);
+      timerViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'timer.view');
+
+      spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve(timerViewObject));
+      spyOn(openmct.objects, 'save').and.returnValue(Promise.resolve(true));
+
+      mutableTimerObject = await openmct.objects.getMutable(timerViewObject.identifier);
+
+      timerObjectPath = [mutableTimerObject];
+      timerView = timerViewProvider.view(mutableTimerObject, timerObjectPath);
+      timerView.show(child);
+
+      await nextTick();
+    });
+
+    afterEach(() => {
+      timerView.destroy();
+    });
+
+    it('should migrate old object properties to the configuration section', () => {
+      openmct.objects.applyGetInterceptors(timerViewObject.identifier, timerViewObject);
+      expect(timerViewObject.configuration.timerFormat).toBe('short');
+      expect(timerViewObject.configuration.timestamp).toBe(relativeTimestamp);
+      expect(timerViewObject.configuration.timerState).toBe('paused');
+      expect(timerViewObject.configuration.pausedTime).toBe(relativeTimestamp);
+    });
+  });
+
+  describe('Timer view:', () => {
+    let timerViewProvider;
+    let timerView;
+    let timerViewObject;
+    let mutableTimerObject;
+    let timerObjectPath;
+
+    beforeEach(async () => {
+      await setupTimer();
+
+      spyOnBuiltins(['requestAnimationFrame']);
+      window.requestAnimationFrame.and.callFake((cb) => setTimeout(cb, 500));
+      const baseTimestamp = 1634688000000; // Oct 20, 2021, 12:00 AM
+      const relativeTimestamp = 1634774400000; // Oct 21 2021, 12:00 AM
+
+      jasmine.clock().install();
+      const baseTime = new Date(baseTimestamp);
+      jasmine.clock().mockDate(baseTime);
+
+      timerViewObject = {
+        ...timerDomainObject,
+        id: 'test-object',
+        name: 'Timer',
+        configuration: {
+          timerFormat: 'long',
+          timestamp: relativeTimestamp,
+          timezone: 'UTC',
+          timerState: undefined,
+          pausedTime: undefined
+        }
+      };
+
+      spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve(timerViewObject));
+      spyOn(openmct.objects, 'save').and.returnValue(Promise.resolve(true));
+
+      const applicableViews = openmct.objectViews.get(timerViewObject, [timerViewObject]);
+      timerViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'timer.view');
+
+      mutableTimerObject = await openmct.objects.getMutable(timerViewObject.identifier);
+
+      timerObjectPath = [mutableTimerObject];
+      timerView = timerViewProvider.view(mutableTimerObject, timerObjectPath);
+      timerView.show(child);
+
+      await nextTick();
+    });
+
+    afterEach(() => {
+      jasmine.clock().uninstall();
+      timerView.destroy();
+      openmct.objects.destroyMutable(mutableTimerObject);
+      if (appHolder) {
+        appHolder.remove();
+      }
+    });
+
+    it('has name as Timer', () => {
+      expect(timerDefinition.name).toEqual('Timer');
+    });
+
+    it('is creatable', () => {
+      expect(timerDefinition.creatable).toEqual(true);
+    });
+
+    it('provides timer view', () => {
+      expect(timerViewProvider).toBeDefined();
+    });
+
+    it('renders timer element', () => {
+      const timerElement = element.querySelectorAll('.c-timer');
+      expect(timerElement.length).toBe(1);
+    });
+
+    it('renders major elements', () => {
+      const timerElement = element.querySelector('.c-timer');
+      const resetButton = timerElement.querySelector('.c-timer__ctrl-reset');
+      const pausePlayButton = timerElement.querySelector('.c-timer__ctrl-pause-play');
+      const timerDirectionIcon = timerElement.querySelector('.c-timer__direction');
+      const timerValue = timerElement.querySelector('.c-timer__value');
+      const hasMajorElements = Boolean(
+        resetButton && pausePlayButton && timerDirectionIcon && timerValue
+      );
+
+      expect(hasMajorElements).toBe(true);
+    });
+
+    it('gets errors from actions if configuration is not passed', async () => {
+      await nextTick();
+      const objectPath = _.cloneDeep(timerObjectPath);
+      delete objectPath[0].configuration;
+
+      let action = openmct.actions.getAction('timer.start');
+      let actionResults = action.invoke(objectPath);
+      let actionFilterWithoutConfig = action.appliesTo(objectPath);
+      await openmct.objects.mutate(timerObjectPath[0], 'configuration', { timerState: 'started' });
+      let actionFilterWithConfig = action.appliesTo(timerObjectPath);
+
+      let actionError = new Error('Unable to run start timer action. No domainObject provided.');
+      expect(actionResults).toEqual(actionError);
+      expect(actionFilterWithoutConfig).toBe(undefined);
+      expect(actionFilterWithConfig).toBe(false);
+
+      action = openmct.actions.getAction('timer.stop');
+      actionResults = action.invoke(objectPath);
+      actionFilterWithoutConfig = action.appliesTo(objectPath);
+      await openmct.objects.mutate(timerObjectPath[0], 'configuration', { timerState: 'stopped' });
+      actionFilterWithConfig = action.appliesTo(timerObjectPath);
+
+      actionError = new Error('Unable to run stop timer action. No domainObject provided.');
+      expect(actionResults).toEqual(actionError);
+      expect(actionFilterWithoutConfig).toBe(undefined);
+      expect(actionFilterWithConfig).toBe(false);
+
+      action = openmct.actions.getAction('timer.pause');
+      actionResults = action.invoke(objectPath);
+      actionFilterWithoutConfig = action.appliesTo(objectPath);
+      await openmct.objects.mutate(timerObjectPath[0], 'configuration', { timerState: 'paused' });
+      actionFilterWithConfig = action.appliesTo(timerObjectPath);
+
+      actionError = new Error('Unable to run pause timer action. No domainObject provided.');
+      expect(actionResults).toEqual(actionError);
+      expect(actionFilterWithoutConfig).toBe(undefined);
+      expect(actionFilterWithConfig).toBe(false);
+
+      action = openmct.actions.getAction('timer.restart');
+      actionResults = action.invoke(objectPath);
+      actionFilterWithoutConfig = action.appliesTo(objectPath);
+      await openmct.objects.mutate(timerObjectPath[0], 'configuration', { timerState: 'stopped' });
+      actionFilterWithConfig = action.appliesTo(timerObjectPath);
+
+      actionError = new Error('Unable to run restart timer action. No domainObject provided.');
+      expect(actionResults).toEqual(actionError);
+      expect(actionFilterWithoutConfig).toBe(undefined);
+      expect(actionFilterWithConfig).toBe(false);
+    });
+
+    it('displays a started timer ticking down to a future date', async () => {
+      const newBaseTime = 1634774400000; // Oct 21 2021, 12:00 AM
+      openmct.objects.mutate(timerViewObject, 'configuration.timestamp', newBaseTime);
+
+      jasmine.clock().tick(5000);
+      await nextTick();
+
+      const timerElement = element.querySelector('.c-timer');
+      const timerPausePlayButton = timerElement.querySelector('.c-timer__ctrl-pause-play');
+      const timerDirectionIcon = timerElement.querySelector('.c-timer__direction');
+      const timerValue = timerElement.querySelector('.c-timer__value').innerText;
+
+      expect(timerPausePlayButton.classList.contains('icon-pause')).toBe(true);
+      expect(timerDirectionIcon.classList.contains('icon-minus')).toBe(true);
+      expect(timerValue).toBe('0D 23:59:55');
+    });
+
+    it('displays a started timer ticking up from a past date', async () => {
+      const newBaseTime = 1634601600000; // Oct 19, 2021, 12:00 AM
+      openmct.objects.mutate(timerViewObject, 'configuration.timestamp', newBaseTime);
+
+      jasmine.clock().tick(5000);
+      await nextTick();
+
+      const timerElement = element.querySelector('.c-timer');
+      const timerPausePlayButton = timerElement.querySelector('.c-timer__ctrl-pause-play');
+      const timerDirectionIcon = timerElement.querySelector('.c-timer__direction');
+      const timerValue = timerElement.querySelector('.c-timer__value').innerText;
+
+      expect(timerPausePlayButton.classList.contains('icon-pause')).toBe(true);
+      expect(timerDirectionIcon.classList.contains('icon-plus')).toBe(true);
+      expect(timerValue).toBe('1D 00:00:05');
+    });
+
+    it('displays a paused timer correctly in the DOM', async () => {
+      jasmine.clock().tick(5000);
+      await nextTick();
+
+      let action = openmct.actions.getAction('timer.pause');
+      if (action) {
+        action.invoke(timerObjectPath, timerView);
+      }
+
+      await nextTick();
+      const timerElement = element.querySelector('.c-timer');
+      const timerPausePlayButton = timerElement.querySelector('.c-timer__ctrl-pause-play');
+      let timerValue = timerElement.querySelector('.c-timer__value').innerText;
+
+      expect(timerPausePlayButton.classList.contains('icon-play')).toBe(true);
+      expect(timerValue).toBe('0D 23:59:55');
+
+      jasmine.clock().tick(5000);
+      await nextTick();
+      expect(timerValue).toBe('0D 23:59:55');
+
+      action = openmct.actions.getAction('timer.start');
+      if (action) {
+        action.invoke(timerObjectPath, timerView);
+      }
+
+      await nextTick();
+      action = openmct.actions.getAction('timer.pause');
+      if (action) {
+        action.invoke(timerObjectPath, timerView);
+      }
+
+      await nextTick();
+      timerValue = timerElement.querySelector('.c-timer__value').innerText;
+      expect(timerValue).toBe('1D 00:00:00');
+    });
+
+    it('displays a stopped timer correctly in the DOM', async () => {
+      const action = openmct.actions.getAction('timer.stop');
+      if (action) {
+        action.invoke(timerObjectPath, timerView);
+      }
+
+      await nextTick();
+      const timerElement = element.querySelector('.c-timer');
+      const timerValue = timerElement.querySelector('.c-timer__value').innerText;
+      const timerResetButton = timerElement.querySelector('.c-timer__ctrl-reset');
+      const timerPausePlayButton = timerElement.querySelector('.c-timer__ctrl-pause-play');
+
+      expect(timerResetButton.classList.contains('hide')).toBe(true);
+      expect(timerPausePlayButton.classList.contains('icon-play')).toBe(true);
+      expect(timerValue).toBe('--:--:--');
+    });
+
+    it('displays a restarted timer correctly in the DOM', async () => {
+      const action = openmct.actions.getAction('timer.restart');
+      if (action) {
+        action.invoke(timerObjectPath, timerView);
+      }
+
+      jasmine.clock().tick(5000);
+      await nextTick();
+      const timerElement = element.querySelector('.c-timer');
+      const timerValue = timerElement.querySelector('.c-timer__value').innerText;
+      const timerPausePlayButton = timerElement.querySelector('.c-timer__ctrl-pause-play');
+
+      expect(timerPausePlayButton.classList.contains('icon-pause')).toBe(true);
+      expect(timerValue).toBe('0D 00:00:05');
+    });
+  });
+});
diff --git a/src/plugins/userIndicator/components/MissionStatusPopup.vue b/src/plugins/userIndicator/components/MissionStatusPopup.vue
new file mode 100644
index 00000000000..ec00a34c612
--- /dev/null
+++ b/src/plugins/userIndicator/components/MissionStatusPopup.vue
@@ -0,0 +1,132 @@
+<template>
+  <div class="c-user-control-panel__component">
+    <div class="c-user-control-panel__header">
+      <div class="c-user-control-panel__title">Mission Status</div>
+      <button
+        aria-label="Close Mission Status Panel"
+        class="c-icon-button c-icon-button--sm t-close-btn icon-x"
+        @click.stop="onDismiss"
+      ></button>
+    </div>
+    <div class="c-ucp-mission-status">
+      <template v-for="action in missionActions" :key="action">
+        <label class="c-ucp-mission-status__label" :for="action">{{ action }}</label>
+        <div class="c-ucp-mission-status__widget" :class="getMissionActionStatusClass(action)">
+          {{ missionActionStatusOptions[missionActionStatusMap[action]]?.label }}
+        </div>
+        <div class="c-ucp-mission-status__select">
+          <select
+            :id="action"
+            v-model="missionActionStatusMap[action]"
+            :name="`${action} status`"
+            @change="onChangeStatus(action)"
+          >
+            <option
+              v-for="option in missionActionStatusOptions"
+              :key="option.key"
+              :value="option.key"
+            >
+              {{ option.label }}
+            </option>
+          </select>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import { inject, ref } from 'vue';
+
+import { useEventEmitter } from '../../../ui/composables/event';
+
+export default {
+  inject: ['openmct'],
+  emits: ['dismiss'],
+  async setup() {
+    const openmct = inject('openmct');
+    let missionActions = ref([]);
+    let missionActionStatusOptions = ref([]);
+    let missionActionStatusMap = ref({});
+
+    try {
+      // Listen for missionActionStatusChange events
+      useEventEmitter(openmct.user.status, 'missionActionStatusChange', ({ action, status }) => {
+        missionActionStatusMap.value[action] = status.key; // Update the reactive property
+      });
+      // Fetch missionStatuses and missionActionStatuses simultaneously
+      const [fetchedMissionActions, fetchedMissionActionStatusOptions] = await Promise.all([
+        openmct.user.status.getPossibleMissionActions(),
+        openmct.user.status.getPossibleMissionActionStatuses()
+      ]);
+
+      // Assign the results to the reactive variables
+      missionActions.value = fetchedMissionActions;
+      missionActionStatusOptions.value = fetchedMissionActionStatusOptions;
+
+      const statusPromises = missionActions.value.map((action) =>
+        openmct.user.status.getStatusForMissionAction(action)
+      );
+
+      // Fetch all mission action statuses simultaneously
+      const statuses = await Promise.all(statusPromises);
+
+      // Reduce to a map of mission action to status
+      missionActionStatusMap.value = missionActions.value.reduce((acc, action, index) => {
+        acc[action] = statuses[index].key;
+        return acc;
+      }, {});
+    } catch (error) {
+      console.error('Error fetching mission statuses:', error);
+    }
+
+    return {
+      missionActions,
+      missionActionStatusOptions,
+      missionActionStatusMap
+    };
+  },
+  methods: {
+    onDismiss() {
+      this.$emit('dismiss');
+    },
+    async onChangeStatus(action) {
+      if (!this.openmct.user.status.canSetMissionStatus()) {
+        this.openmct.notifications.error('Selected user role is ineligible to set mission status');
+
+        return;
+      }
+
+      if (this.missionActionStatusMap !== undefined) {
+        const statusObject = this.findOptionByKey(this.missionActionStatusMap[action]);
+
+        const result = await this.openmct.user.status.setStatusForMissionAction(
+          action,
+          statusObject
+        );
+        if (result === true) {
+          this.openmct.notifications.info('Successfully set mission status');
+        } else {
+          this.openmct.notifications.error('Unable to set mission status');
+        }
+      }
+    },
+    /**
+     * @param {number} optionKey
+     */
+    findOptionByKey(optionKey) {
+      return this.missionActionStatusOptions.find(
+        (possibleMatch) => possibleMatch.key === optionKey
+      );
+    },
+    getMissionActionStatusClass(status) {
+      const statusValue =
+        this.missionActionStatusOptions[this.missionActionStatusMap[status]]?.label;
+      return {
+        '--is-no-go': statusValue === 'NO GO',
+        '--is-go': statusValue === 'GO'
+      };
+    }
+  }
+};
+</script>
diff --git a/src/plugins/userIndicator/components/UserIndicator.vue b/src/plugins/userIndicator/components/UserIndicator.vue
new file mode 100644
index 00000000000..7c804cd3bec
--- /dev/null
+++ b/src/plugins/userIndicator/components/UserIndicator.vue
@@ -0,0 +1,244 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div
+    ref="userIndicatorRef"
+    class="c-indicator c-indicator--user icon-person"
+    :class="canSetMissionStatus ? 'clickable' : ''"
+    v-bind="$attrs"
+    @click.stop="togglePopup"
+  >
+    <span class="label c-indicator__label" aria-label="User Role">
+      {{ role ? `${userName}: ${role}` : userName }}
+      <button v-if="availableRoles?.length > 1" @click.stop="promptForRoleSelection">
+        Change Role
+      </button>
+      <button
+        v-if="canSetMissionStatus"
+        aria-label="Toggle Mission Status Panel"
+        @click.stop="togglePopup"
+      >
+        Mission Status
+      </button>
+    </span>
+  </div>
+  <Teleport to="body">
+    <div
+      v-show="isPopupVisible"
+      ref="popupRef"
+      class="c-user-control-panel"
+      role="dialog"
+      aria-label="User Control Panel"
+      :style="popupStyle"
+    >
+      <Suspense>
+        <template #default>
+          <MissionStatusPopup v-if="canSetMissionStatus" @dismiss="togglePopup" />
+        </template>
+        <template #fallback>
+          <div>Loading...</div>
+        </template>
+      </Suspense>
+    </div>
+  </Teleport>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+import ActiveRoleSynchronizer from '../../../api/user/ActiveRoleSynchronizer.js';
+import { useEventListener } from '../../../ui/composables/event.js';
+import { useWindowResize } from '../../../ui/composables/resize.js';
+import MissionStatusPopup from './MissionStatusPopup.vue';
+
+export default {
+  name: 'UserIndicator',
+  components: {
+    MissionStatusPopup
+  },
+  inject: ['openmct'],
+  inheritAttrs: false,
+  setup() {
+    const { windowSize } = useWindowResize();
+    const isPopupVisible = ref(false);
+    const userIndicatorRef = ref(null);
+    const popupRef = ref(null);
+
+    // eslint-disable-next-line func-style
+    const handleOutsideClick = (event) => {
+      if (isPopupVisible.value && popupRef.value && !popupRef.value.contains(event.target)) {
+        isPopupVisible.value = false;
+      }
+    };
+
+    useEventListener(document, 'click', handleOutsideClick);
+
+    return { windowSize, isPopupVisible, popupRef, userIndicatorRef };
+  },
+  data() {
+    return {
+      userName: undefined,
+      role: undefined,
+      availableRoles: [],
+      loggedIn: false,
+      inputRoleSelection: undefined,
+      roleSelectionDialog: undefined,
+      canSetMissionStatus: false
+    };
+  },
+  computed: {
+    popupStyle() {
+      return {
+        top: `${this.position.top}px`,
+        left: `${this.position.left}px`
+      };
+    },
+    position() {
+      if (!this.isPopupVisible) {
+        return { top: 0, left: 0 };
+      }
+      const indicator = this.userIndicatorRef;
+      const indicatorRect = indicator.getBoundingClientRect();
+      let top = indicatorRect.bottom;
+      let left = indicatorRect.left;
+
+      const popupRect = this.popupRef.getBoundingClientRect();
+      const popupWidth = popupRect.width;
+      const popupHeight = popupRect.height;
+
+      // Check if the popup goes beyond the right edge of the window
+      if (left + popupWidth > this.windowSize.width) {
+        left = this.windowSize.width - popupWidth; // Adjust left to fit within the window
+      }
+
+      // Check if the popup goes beyond the bottom edge of the window
+      if (top + popupHeight > this.windowSize.height) {
+        top = indicatorRect.top - popupHeight; // Place popup above the indicator
+      }
+
+      return { top, left };
+    }
+  },
+  async created() {
+    await this.getUserInfo();
+  },
+  mounted() {
+    // need to wait for openmct to be loaded before using openmct.overlays.selection
+    // as document.body could be null
+    this.openmct.on('start', this.fetchOrPromptForRole);
+    this.roleChannel = new ActiveRoleSynchronizer(this.openmct);
+    this.roleChannel.subscribeToRoleChanges(this.onRoleChange);
+  },
+  beforeUnmount() {
+    this.roleChannel.unsubscribeFromRoleChanges(this.onRoleChange);
+    this.openmct.off('start', this.fetchOrPromptForRole);
+  },
+  methods: {
+    async getUserInfo() {
+      const user = await this.openmct.user.getCurrentUser();
+      this.canSetMissionStatus = await this.openmct.user.status.canSetMissionStatus();
+      this.userName = user.getName();
+      this.role = this.openmct.user.getActiveRole();
+      this.loggedIn = this.openmct.user.isLoggedIn();
+    },
+    async fetchOrPromptForRole() {
+      const UserAPI = this.openmct.user;
+      const activeRole = UserAPI.getActiveRole();
+      this.role = activeRole;
+      this.availableRoles = await this.openmct.user.getPossibleRoles();
+
+      // clear role if it's not in list of available roles, e.g., removed by admin
+      if (!this.availableRoles?.includes(this.role)) {
+        this.role = null;
+        UserAPI.setActiveRole(null);
+      }
+
+      // see if we need to prompt for role selection
+      if (!this.role) {
+        this.promptForRoleSelection();
+      } else {
+        // only notify the user if they have more than one role available
+        if (this.availableRoles.length > 1) {
+          this.openmct.notifications.info(`You're logged in as role ${activeRole}`);
+        }
+      }
+    },
+    promptForRoleSelection() {
+      const selectionOptions = this.availableRoles.map((role) => ({
+        key: role,
+        name: role
+      }));
+      // automatically select only role option
+      if (selectionOptions.length === 0) {
+        return;
+      }
+      if (selectionOptions.length === 1) {
+        this.updateRole(selectionOptions[0].key);
+        return;
+      }
+
+      this.roleSelectionDialog = this.openmct.overlays.selection({
+        selectionOptions,
+        iconClass: 'alert',
+        title: 'Select Role',
+        message: '',
+        currentSelection: this.role,
+        onChange: (event) => {
+          this.inputRoleSelection = event.target.value;
+        },
+        buttons: [
+          {
+            label: 'Select',
+            emphasis: true,
+            callback: () => {
+              this.roleSelectionDialog.dismiss();
+              this.roleSelectionDialog = undefined;
+              const inputValueOrDefault = this.inputRoleSelection || selectionOptions[0].key;
+              this.updateRole(inputValueOrDefault);
+              this.openmct.notifications.info(`Successfully set new role to ${this.role}`);
+            }
+          }
+        ]
+      });
+    },
+    onRoleChange(event) {
+      const role = event.data;
+      this.roleSelectionDialog?.dismiss();
+      this.setRoleSelection(role);
+    },
+    setRoleSelection(role) {
+      this.role = role;
+    },
+
+    updateRole(role) {
+      this.setRoleSelection(role);
+      this.openmct.user.setActiveRole(role);
+      // update other tabs through broadcast channel
+      this.roleChannel.broadcastNewRole(role);
+    },
+    togglePopup() {
+      this.isPopupVisible = !this.isPopupVisible && this.canSetMissionStatus;
+    }
+  }
+};
+</script>
diff --git a/src/plugins/userIndicator/plugin.js b/src/plugins/userIndicator/plugin.js
new file mode 100644
index 00000000000..842fc0b13ea
--- /dev/null
+++ b/src/plugins/userIndicator/plugin.js
@@ -0,0 +1,44 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import UserIndicator from './components/UserIndicator.vue';
+
+export default function UserIndicatorPlugin() {
+  function addIndicator(openmct) {
+    openmct.indicators.add({
+      key: 'user-indicator',
+      vueComponent: UserIndicator,
+      priority: openmct.priority.HIGH
+    });
+  }
+
+  return function install(openmct) {
+    if (openmct.user.hasProvider()) {
+      addIndicator(openmct);
+    } else {
+      // back up if user provider added after indicator installed
+      openmct.user.on('providerAdded', () => {
+        addIndicator(openmct);
+      });
+    }
+  };
+}
diff --git a/src/plugins/userIndicator/pluginSpec.js b/src/plugins/userIndicator/pluginSpec.js
new file mode 100644
index 00000000000..00fa39d085f
--- /dev/null
+++ b/src/plugins/userIndicator/pluginSpec.js
@@ -0,0 +1,104 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * 'License'); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+import { nextTick } from 'vue';
+
+import ExampleUserProvider from '../../../example/exampleUser/ExampleUserProvider.js';
+
+const USERNAME = 'Coach McGuirk';
+
+describe('The User Indicator plugin', () => {
+  let openmct;
+  let element;
+  let child;
+  let appHolder;
+  let userIndicator;
+  let provider;
+
+  beforeEach((done) => {
+    appHolder = document.createElement('div');
+    appHolder.style.width = '640px';
+    appHolder.style.height = '480px';
+    document.body.appendChild(appHolder);
+
+    element = document.createElement('div');
+    child = document.createElement('div');
+    element.appendChild(child);
+
+    openmct = createOpenMct();
+    openmct.on('start', done);
+    openmct.start(appHolder);
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  it('will not show, if there is no user provider', () => {
+    userIndicator = openmct.indicators.indicatorObjects.find(
+      (indicator) => indicator.key === 'user-indicator'
+    );
+
+    expect(userIndicator).toBe(undefined);
+  });
+
+  describe('with a user provider installed', () => {
+    beforeEach(() => {
+      provider = new ExampleUserProvider(openmct);
+      provider.autoLogin(USERNAME);
+
+      openmct.user.setProvider(provider);
+
+      return nextTick();
+    });
+
+    it('exists', () => {
+      userIndicator = openmct.indicators.indicatorObjects.find(
+        (indicator) => indicator.key === 'user-indicator'
+      ).vueComponent;
+
+      const hasClockIndicator = userIndicator !== null && userIndicator !== undefined;
+      expect(hasClockIndicator).toBe(true);
+    });
+
+    it('contains the logged in user name', (done) => {
+      openmct.user
+        .getCurrentUser()
+        .then(async (user) => {
+          await nextTick();
+
+          userIndicator = openmct.indicators.indicatorObjects.find(
+            (indicator) => indicator.key === 'user-indicator'
+          ).vueComponent;
+
+          expect(userIndicator).toBeDefined();
+          expect(userIndicator).not.toBeNull();
+          const userName = document.querySelector('[aria-label="User Role"]').textContent.trim();
+
+          expect(user.name).toEqual(USERNAME);
+          expect(userName).toContain(USERNAME);
+        })
+        .finally(done);
+    });
+  });
+});
diff --git a/src/plugins/userIndicator/user-indicator.scss b/src/plugins/userIndicator/user-indicator.scss
new file mode 100644
index 00000000000..6fa2481a0b7
--- /dev/null
+++ b/src/plugins/userIndicator/user-indicator.scss
@@ -0,0 +1,194 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+.c-indicator {
+  &:before {
+    // Indicator icon
+    color: $colorKey;
+  }
+
+  &--user {
+    max-width: max-content;
+    &.clickable {
+      cursor: pointer;
+
+      @include hover() {
+        background: $colorIndicatorBgHov;
+      }
+    }
+  }
+}
+
+$statusCountWidth: 30px;
+
+.c-user-control-panel {
+  @include menuOuter();
+  display: flex;
+  flex-direction: column;
+  padding: $interiorMarginLg;
+  min-width: max-content;
+  max-width: 35%;
+
+  > * + * {
+    margin-top: $interiorMarginLg;
+  }
+
+  *:before {
+    font-size: 0.8em;
+    margin-right: $interiorMarginSm; // WTF - this is BAD!
+  }
+
+  &__section {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+
+    > * + * {
+      margin-left: $interiorMarginLg;
+    }
+  }
+
+  &__header {
+    align-items: center;
+    display: flex;
+    column-gap: $interiorMargin;
+    text-transform: uppercase;
+
+    > * {
+      flex: 0 0 auto;
+    }
+
+    [class*='title'] {
+      flex: 1 1 auto;
+    }
+  }
+
+  .t-close-btn {
+    &:before {
+      margin-right: 0;
+    }
+  }
+
+  &__component {
+    // General classes for new control panel component
+    display: flex;
+    flex-direction: column;
+    gap: $interiorMargin;
+  }
+
+  &__top {
+    text-transform: uppercase;
+  }
+
+  &__user-role,
+  &__updated {
+    opacity: 50%;
+  }
+
+  &__updated {
+    flex: 1 1 auto;
+    text-align: right;
+  }
+
+  &__poll-question {
+    background: $colorBodyFg;
+    color: $colorBodyBg;
+    border-radius: $controlCr;
+    font-weight: bold;
+    padding: $interiorMarginSm $interiorMargin;
+
+    .c-user-control-panel--admin & {
+      background: rgba($colorBodyFg, 0.1);
+      color: $colorBodyFg;
+    }
+  }
+
+  /*************************************************** ADMIN INTERFACE */
+  &__content {
+    $m: $interiorMargin;
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    grid-column-gap: $m;
+    grid-row-gap: $m;
+
+    [class*='__label'] {
+      padding: 3px 0;
+    }
+
+    [class*='__label'] {
+      padding: 3px 0;
+    }
+
+    [class*='__poll-table'] {
+      grid-column: span 2;
+    }
+
+    [class*='new-question'] {
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+      > * + * {
+        margin-left: $interiorMargin;
+      }
+
+      input {
+        flex: 1 1 auto;
+        height: $btnStdH;
+      }
+
+      button {
+        flex: 0 0 auto;
+      }
+    }
+  }
+}
+
+/**************** STYLES FOR THE MISSION STATUS USER CONTROL PANEL */
+.c-ucp-mission-status {
+  $bg: rgba(black, 0.7);
+  display: grid;
+  grid-template-columns: max-content max-content 1fr;
+  align-items: center;
+  grid-column-gap: $interiorMarginLg;
+  grid-row-gap: $interiorMargin;
+
+  &__widget {
+    border-radius: $basicCr;
+    background: $bg;
+    border: 1px solid transparent;
+    padding: $interiorMarginSm $interiorMarginLg;
+    text-align: center;
+
+    &.--is-go {
+      $c: #2c7527;
+      background: $c;
+      color: white;
+    }
+
+    &.--is-no-go {
+      $c: #fbc147;
+      background: $bg;
+      border: 1px solid $c;
+      color: $c;
+    }
+  }
+}
diff --git a/src/plugins/utcTimeSystem/DurationFormat.js b/src/plugins/utcTimeSystem/DurationFormat.js
new file mode 100644
index 00000000000..657e8c2f703
--- /dev/null
+++ b/src/plugins/utcTimeSystem/DurationFormat.js
@@ -0,0 +1,34 @@
+import moment from 'moment';
+
+const DATE_FORMAT = 'HH:mm:ss';
+const DATE_FORMATS = [DATE_FORMAT];
+
+/**
+ * Formatter for duration. Uses moment to produce a date from a given
+ * value, but output is formatted to display only time. Can be used for
+ * specifying a time duration. For specifying duration, it's best to
+ * specify a date of January 1, 1970, as the ms offset will equal the
+ * duration represented by the time.
+ *
+ * @implements {Format}
+ * @constructor
+ * @memberof platform/commonUI/formats
+ */
+class DurationFormat {
+  constructor() {
+    this.key = 'duration';
+  }
+  format(value) {
+    return moment.utc(value).format(DATE_FORMAT);
+  }
+
+  parse(text) {
+    return moment.duration(text).asMilliseconds();
+  }
+
+  validate(text) {
+    return moment.utc(text, DATE_FORMATS, true).isValid();
+  }
+}
+
+export default DurationFormat;
diff --git a/src/plugins/utcTimeSystem/LocalClock.js b/src/plugins/utcTimeSystem/LocalClock.js
index d71262e8700..27abfb48ff0 100644
--- a/src/plugins/utcTimeSystem/LocalClock.js
+++ b/src/plugins/utcTimeSystem/LocalClock.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import DefaultClock from "../../utils/clock/DefaultClock";
+import DefaultClock from '../../utils/clock/DefaultClock.js';
 /**
  * A {@link openmct.TimeAPI.Clock} that updates the temporal bounds of the
  * application based on UTC time values provided by a ticking local clock,
@@ -30,33 +30,33 @@ import DefaultClock from "../../utils/clock/DefaultClock";
  */
 
 export default class LocalClock extends DefaultClock {
-    constructor(period = 100) {
-        super();
-
-        this.key = 'local';
-        this.name = 'Local Clock';
-        this.description = "Provides UTC timestamps every second from the local system clock.";
-
-        this.period = period;
-        this.timeoutHandle = undefined;
-        this.lastTick = Date.now();
-    }
-
-    start() {
-        this.timeoutHandle = setTimeout(this.tick.bind(this), this.period);
-    }
-
-    stop() {
-        if (this.timeoutHandle) {
-            clearTimeout(this.timeoutHandle);
-            this.timeoutHandle = undefined;
-        }
-    }
-
-    tick() {
-        const now = Date.now();
-        super.tick(now);
-        this.timeoutHandle = setTimeout(this.tick.bind(this), this.period);
+  constructor(period = 100) {
+    super();
+
+    this.key = 'local';
+    this.name = 'Local Clock';
+    this.description = 'Provides UTC timestamps every second from the local system clock.';
+
+    this.period = period;
+    this.timeoutHandle = undefined;
+    this.lastTick = Date.now();
+  }
+
+  start() {
+    super.tick(this.lastTick);
+    this.timeoutHandle = setTimeout(this.tick.bind(this), this.period);
+  }
+
+  stop() {
+    if (this.timeoutHandle) {
+      clearTimeout(this.timeoutHandle);
+      this.timeoutHandle = undefined;
     }
+  }
 
+  tick() {
+    const now = Date.now();
+    super.tick(now);
+    this.timeoutHandle = setTimeout(this.tick.bind(this), this.period);
+  }
 }
diff --git a/src/plugins/utcTimeSystem/UTCTimeFormat.js b/src/plugins/utcTimeSystem/UTCTimeFormat.js
new file mode 100644
index 00000000000..331d833750e
--- /dev/null
+++ b/src/plugins/utcTimeSystem/UTCTimeFormat.js
@@ -0,0 +1,89 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import moment from 'moment';
+
+/**
+ * Formatter for UTC timestamps. Interprets numeric values as
+ * milliseconds since the start of 1970.
+ *
+ * @implements {Format}
+ * @constructor
+ * @memberof platform/commonUI/formats
+ */
+export default class UTCTimeFormat {
+  constructor() {
+    this.key = 'utc';
+    this.DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss.SSS';
+    this.DATE_FORMATS = {
+      PRECISION_DEFAULT: this.DATE_FORMAT,
+      PRECISION_DEFAULT_WITH_ZULU: this.DATE_FORMAT + 'Z',
+      PRECISION_SECONDS: 'YYYY-MM-DD HH:mm:ss',
+      PRECISION_MINUTES: 'YYYY-MM-DD HH:mm',
+      PRECISION_DAYS: 'YYYY-MM-DD',
+      PRECISION_SECONDS_TIME_ONLY: 'HH:mm:ss',
+      PRECISION_MINUTES_TIME_ONLY: 'HH:mm'
+    };
+  }
+
+  /**
+   * @param {string} formatString
+   * @returns the value of formatString if the value is a string type and exists in the DATE_FORMATS array; otherwise the DATE_FORMAT value.
+   */
+  isValidFormatString(formatString) {
+    return Object.values(this.DATE_FORMATS).includes(formatString);
+  }
+
+  /**
+   * @param {number} value The value to format.
+   * @returns {string} the formatted date(s). If multiple values were requested, then an array of
+   * formatted values will be returned. Where a value could not be formatted, `undefined` will be returned at its position
+   * in the array.
+   */
+  format(value, formatString) {
+    if (value !== undefined) {
+      const utc = moment.utc(value);
+
+      if (formatString !== undefined && !this.isValidFormatString(formatString)) {
+        throw 'Invalid format requested from UTC Time Formatter ';
+      }
+
+      let format = formatString || this.DATE_FORMATS.PRECISION_DEFAULT;
+
+      return utc.format(format) + (formatString ? '' : 'Z');
+    } else {
+      return value;
+    }
+  }
+
+  parse(text) {
+    if (typeof text === 'number') {
+      return text;
+    }
+
+    return moment.utc(text, Object.values(this.DATE_FORMATS)).valueOf();
+  }
+
+  validate(text) {
+    return moment.utc(text, Object.values(this.DATE_FORMATS), true).isValid();
+  }
+}
diff --git a/src/plugins/utcTimeSystem/UTCTimeSystem.js b/src/plugins/utcTimeSystem/UTCTimeSystem.js
index e092b64541e..33c35332505 100644
--- a/src/plugins/utcTimeSystem/UTCTimeSystem.js
+++ b/src/plugins/utcTimeSystem/UTCTimeSystem.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,25 +20,24 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([], function () {
-    /**
-     * This time system supports UTC dates.
-     * @implements TimeSystem
-     * @constructor
-     */
-    function UTCTimeSystem() {
+/**
+ * This time system supports UTC dates.
+ * @implements TimeSystem
+ * @constructor
+ */
+class UTCTimeSystem {
+  /**
+   * Metadata used to identify the time system in
+   * the UI
+   */
+  constructor() {
+    this.key = 'utc';
+    this.name = 'UTC';
+    this.cssClass = 'icon-clock';
+    this.timeFormat = 'utc';
+    this.durationFormat = 'duration';
+    this.isUTCBased = true;
+  }
+}
 
-        /**
-         * Metadata used to identify the time system in
-         * the UI
-         */
-        this.key = 'utc';
-        this.name = 'UTC';
-        this.cssClass = 'icon-clock';
-        this.timeFormat = 'utc';
-        this.durationFormat = 'duration';
-        this.isUTCBased = true;
-    }
-
-    return UTCTimeSystem;
-});
+export default UTCTimeSystem;
diff --git a/src/plugins/utcTimeSystem/plugin.js b/src/plugins/utcTimeSystem/plugin.js
index 2f2a2ae5062..ee39e85f5f5 100644
--- a/src/plugins/utcTimeSystem/plugin.js
+++ b/src/plugins/utcTimeSystem/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,22 +20,21 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    "./UTCTimeSystem",
-    "./LocalClock"
-], function (
-    UTCTimeSystem,
-    LocalClock
-) {
-    /**
-     * Install a time system that supports UTC times. It also installs a local
-     * clock source that ticks every 100ms, providing UTC times.
-     */
-    return function () {
-        return function (openmct) {
-            const timeSystem = new UTCTimeSystem();
-            openmct.time.addTimeSystem(timeSystem);
-            openmct.time.addClock(new LocalClock.default(100));
-        };
-    };
-});
+import DurationFormat from './DurationFormat.js';
+import LocalClock from './LocalClock.js';
+import UTCTimeFormat from './UTCTimeFormat.js';
+import UTCTimeSystem from './UTCTimeSystem.js';
+
+/**
+ * Install a time system that supports UTC times. It also installs a local
+ * clock source that ticks every 100ms, providing UTC times.
+ */
+export default function () {
+  return function (openmct) {
+    const timeSystem = new UTCTimeSystem();
+    openmct.time.addTimeSystem(timeSystem);
+    openmct.time.addClock(new LocalClock(100));
+    openmct.telemetry.addFormat(new UTCTimeFormat());
+    openmct.telemetry.addFormat(new DurationFormat());
+  };
+}
diff --git a/src/plugins/utcTimeSystem/pluginSpec.js b/src/plugins/utcTimeSystem/pluginSpec.js
index 0817c8a91ea..c414d17e953 100644
--- a/src/plugins/utcTimeSystem/pluginSpec.js
+++ b/src/plugins/utcTimeSystem/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,84 +20,173 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+
 import LocalClock from './LocalClock.js';
-import UTCTimeSystem from './UTCTimeSystem';
-import {
-    createOpenMct,
-    resetApplicationState
-} from 'utils/testing';
-
-describe("The UTC Time System", () => {
-    const UTC_SYSTEM_AND_FORMAT_KEY = 'utc';
-    let openmct;
-    let utcTimeSystem;
-    let mockTimeout;
+import UTCTimeFormat from './UTCTimeFormat.js';
+import UTCTimeSystem from './UTCTimeSystem.js';
+
+describe('The UTC Time System', () => {
+  const UTC_SYSTEM_AND_FORMAT_KEY = 'utc';
+  const DURATION_FORMAT_KEY = 'duration';
+  let openmct;
+  let utcTimeSystem;
+  let mockTimeout;
+
+  beforeEach(() => {
+    openmct = createOpenMct();
+    openmct.install(openmct.plugins.UTCTimeSystem());
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  describe('plugin', function () {
+    beforeEach(function () {
+      mockTimeout = jasmine.createSpy('timeout');
+      utcTimeSystem = new UTCTimeSystem(mockTimeout);
+    });
+
+    it('is installed', () => {
+      let timeSystems = openmct.time.getAllTimeSystems();
+      let utc = timeSystems.find((ts) => ts.key === UTC_SYSTEM_AND_FORMAT_KEY);
+
+      expect(utc).not.toEqual(-1);
+    });
+
+    it('can be set to be the main time system', () => {
+      openmct.time.timeSystem(UTC_SYSTEM_AND_FORMAT_KEY, {
+        start: 0,
+        end: 1
+      });
+
+      expect(openmct.time.timeSystem().key).toBe(UTC_SYSTEM_AND_FORMAT_KEY);
+    });
+
+    it('uses the utc time format', () => {
+      expect(utcTimeSystem.timeFormat).toBe(UTC_SYSTEM_AND_FORMAT_KEY);
+    });
+
+    it('is UTC based', () => {
+      expect(utcTimeSystem.isUTCBased).toBe(true);
+    });
+
+    it('defines expected metadata', () => {
+      expect(utcTimeSystem.key).toBe(UTC_SYSTEM_AND_FORMAT_KEY);
+      expect(utcTimeSystem.name).toBeDefined();
+      expect(utcTimeSystem.cssClass).toBeDefined();
+      expect(utcTimeSystem.durationFormat).toBeDefined();
+    });
+  });
+
+  describe('LocalClock class', function () {
+    let clock;
+    const timeoutHandle = {};
+
+    beforeEach(function () {
+      mockTimeout = jasmine.createSpy('timeout');
+      mockTimeout.and.returnValue(timeoutHandle);
+
+      clock = new LocalClock(0);
+      clock.start();
+    });
+
+    it('calls listeners on tick with current time', function () {
+      const mockListener = jasmine.createSpy('listener');
+      clock.on('tick', mockListener);
+      clock.tick();
+      expect(mockListener).toHaveBeenCalledWith(jasmine.any(Number));
+    });
+  });
+
+  describe('UTC Time Format', () => {
+    let utcTimeFormatter;
 
     beforeEach(() => {
-        openmct = createOpenMct();
-        openmct.install(openmct.plugins.UTCTimeSystem());
+      utcTimeFormatter = openmct.telemetry.getFormatter(UTC_SYSTEM_AND_FORMAT_KEY);
+    });
+
+    it('is installed by the plugin', () => {
+      expect(utcTimeFormatter).toBeDefined();
+    });
+
+    it('formats from ms since Unix epoch into Open MCT UTC time format', () => {
+      const TIME_IN_MS = 1638574560945;
+      const TIME_AS_STRING = '2021-12-03 23:36:00.945Z';
+
+      const formattedTime = utcTimeFormatter.format(TIME_IN_MS);
+      expect(formattedTime).toEqual(TIME_AS_STRING);
     });
 
-    afterEach(() => {
-        return resetApplicationState(openmct);
+    it('formats from ms since Unix epoch into terse UTC formats', () => {
+      const utcTimeFormatterInstance = new UTCTimeFormat();
+
+      const TIME_IN_MS = 1638574560945;
+      const EXPECTED_FORMATS = {
+        PRECISION_DEFAULT: '2021-12-03 23:36:00.945',
+        PRECISION_SECONDS: '2021-12-03 23:36:00',
+        PRECISION_MINUTES: '2021-12-03 23:36',
+        PRECISION_DAYS: '2021-12-03'
+      };
+
+      Object.keys(EXPECTED_FORMATS).forEach((formatKey) => {
+        const formattedTime = utcTimeFormatterInstance.format(
+          TIME_IN_MS,
+          utcTimeFormatterInstance.DATE_FORMATS[formatKey]
+        );
+        expect(formattedTime).toEqual(EXPECTED_FORMATS[formatKey]);
+      });
     });
 
-    describe("plugin", function () {
+    it('parses from Open MCT UTC time format to ms since Unix epoch.', () => {
+      const TIME_IN_MS = 1638574560945;
+      const TIME_AS_STRING = '2021-12-03 23:36:00.945Z';
 
-        beforeEach(function () {
-            mockTimeout = jasmine.createSpy("timeout");
-            utcTimeSystem = new UTCTimeSystem(mockTimeout);
-        });
+      const parsedTime = utcTimeFormatter.parse(TIME_AS_STRING);
+      expect(parsedTime).toEqual(TIME_IN_MS);
+    });
 
-        it("is installed", () => {
-            let timeSystems = openmct.time.getAllTimeSystems();
-            let utc = timeSystems.find(ts => ts.key === UTC_SYSTEM_AND_FORMAT_KEY);
+    it('validates correctly formatted Open MCT UTC times.', () => {
+      const TIME_AS_STRING = '2021-12-03 23:36:00.945Z';
 
-            expect(utc).not.toEqual(-1);
-        });
+      const isValid = utcTimeFormatter.validate(TIME_AS_STRING);
+      expect(isValid).toBeTrue();
+    });
+  });
 
-        it("can be set to be the main time system", () => {
-            openmct.time.timeSystem(UTC_SYSTEM_AND_FORMAT_KEY, {
-                start: 0,
-                end: 1
-            });
+  describe('Duration Format', () => {
+    let durationTimeFormatter;
 
-            expect(openmct.time.timeSystem().key).toBe(UTC_SYSTEM_AND_FORMAT_KEY);
-        });
+    beforeEach(() => {
+      durationTimeFormatter = openmct.telemetry.getFormatter(DURATION_FORMAT_KEY);
+    });
 
-        it("uses the utc time format", () => {
-            expect(utcTimeSystem.timeFormat).toBe(UTC_SYSTEM_AND_FORMAT_KEY);
-        });
+    it('is installed by the plugin', () => {
+      expect(durationTimeFormatter).toBeDefined();
+    });
 
-        it("is UTC based", () => {
-            expect(utcTimeSystem.isUTCBased).toBe(true);
-        });
+    it('formats from ms into Open MCT duration format', () => {
+      const TIME_IN_MS = 2000;
+      const TIME_AS_STRING = '00:00:02';
 
-        it("defines expected metadata", () => {
-            expect(utcTimeSystem.key).toBe(UTC_SYSTEM_AND_FORMAT_KEY);
-            expect(utcTimeSystem.name).toBeDefined();
-            expect(utcTimeSystem.cssClass).toBeDefined();
-            expect(utcTimeSystem.durationFormat).toBeDefined();
-        });
+      const formattedTime = durationTimeFormatter.format(TIME_IN_MS);
+      expect(formattedTime).toEqual(TIME_AS_STRING);
     });
 
-    describe("LocalClock class", function () {
-        let clock;
-        const timeoutHandle = {};
+    it('parses from Open MCT duration format to ms', () => {
+      const TIME_IN_MS = 2000;
+      const TIME_AS_STRING = '00:00:02';
 
-        beforeEach(function () {
-            mockTimeout = jasmine.createSpy("timeout");
-            mockTimeout.and.returnValue(timeoutHandle);
+      const parsedTime = durationTimeFormatter.parse(TIME_AS_STRING);
+      expect(parsedTime).toEqual(TIME_IN_MS);
+    });
 
-            clock = new LocalClock(0);
-            clock.start();
-        });
+    it('validates correctly formatted Open MCT duration strings.', () => {
+      const TIME_AS_STRING = '00:00:02';
 
-        it("calls listeners on tick with current time", function () {
-            const mockListener = jasmine.createSpy("listener");
-            clock.on('tick', mockListener);
-            clock.tick();
-            expect(mockListener).toHaveBeenCalledWith(jasmine.any(Number));
-        });
+      const isValid = durationTimeFormatter.validate(TIME_AS_STRING);
+      expect(isValid).toBeTrue();
     });
+  });
 });
diff --git a/src/plugins/viewDatumAction/ViewDatumAction.js b/src/plugins/viewDatumAction/ViewDatumAction.js
index 82d87e7fbb4..0351e2f37fb 100644
--- a/src/plugins/viewDatumAction/ViewDatumAction.js
+++ b/src/plugins/viewDatumAction/ViewDatumAction.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,55 +20,59 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import mount from 'utils/mount';
+
 import MetadataListView from './components/MetadataList.vue';
-import Vue from 'vue';
 
 export default class ViewDatumAction {
-    constructor(openmct) {
-        this.name = 'View Full Datum';
-        this.key = 'viewDatumAction';
-        this.description = 'View full value of datum received';
-        this.cssClass = 'icon-object';
+  constructor(openmct) {
+    this.name = 'View Full Datum';
+    this.key = 'viewDatumAction';
+    this.description = 'View full value of datum received';
+    this.cssClass = 'icon-object';
 
-        this._openmct = openmct;
-    }
-    invoke(objectPath, view) {
-        let viewContext = view.getViewContext && view.getViewContext();
-        const row = viewContext.row;
-        let attributes = row.getDatum && row.getDatum();
-        let component = new Vue ({
-            components: {
-                MetadataListView
-            },
-            provide: {
-                name: this.name,
-                attributes
-            },
-            template: '<MetadataListView />'
-        });
+    this.openmct = openmct;
+  }
+  invoke(objectPath, view) {
+    let viewContext = view.getViewContext && view.getViewContext();
+    const row = viewContext.row;
+    let attributes = row.getDatum && row.getDatum();
+    const { vNode, destroy } = mount(
+      {
+        components: {
+          MetadataListView
+        },
+        provide: {
+          name: this.name,
+          attributes
+        },
+        template: '<MetadataListView />'
+      },
+      {
+        app: this.openmct.app
+      }
+    );
 
-        this._openmct.overlays.overlay({
-            element: component.$mount().$el,
-            size: 'large',
-            dismissable: true,
-            onDestroy: () => {
-                component.$destroy();
-            }
-        });
+    this.openmct.overlays.overlay({
+      element: vNode.el,
+      size: 'large',
+      dismissable: true,
+      onDestroy: destroy
+    });
+  }
+  appliesTo(objectPath, view = {}) {
+    let viewContext = (view.getViewContext && view.getViewContext()) || {};
+    const row = viewContext.row;
+    if (!row) {
+      return false;
     }
-    appliesTo(objectPath, view = {}) {
-        let viewContext = (view.getViewContext && view.getViewContext()) || {};
-        const row = viewContext.row;
-        if (!row) {
-            return false;
-        }
 
-        let datum = row.getDatum;
-        let enabled = row.viewDatumAction;
-        if (enabled && datum) {
-            return true;
-        }
-
-        return false;
+    let datum = row.getDatum;
+    let enabled = row.viewDatumAction;
+    if (enabled && datum) {
+      return true;
     }
+
+    return false;
+  }
 }
diff --git a/src/plugins/viewDatumAction/components/MetadataList.vue b/src/plugins/viewDatumAction/components/MetadataList.vue
index 6b0fc34e25d..ad5acbd79a8 100644
--- a/src/plugins/viewDatumAction/components/MetadataList.vue
+++ b/src/plugins/viewDatumAction/components/MetadataList.vue
@@ -1,24 +1,42 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div class="c-attributes-view">
+  <div class="c-attributes-view">
     <div class="c-overlay__top-bar">
-        <div class="c-overlay__dialog-title">{{ name }}</div>
+      <div class="c-overlay__dialog-title">{{ name }}</div>
     </div>
     <div class="c-overlay__contents-main l-preview-window__object-view">
-        <ul class="c-attributes-view__content">
-            <li
-                v-for="attribute in Object.keys(attributes)"
-                :key="attribute"
-            >
-                <span class="c-attributes-view__grid-item__label">{{ attribute }}</span>
-                <span class="c-attributes-view__grid-item__value">{{ attributes[attribute] }}</span>
-            </li>
-        </ul>
+      <ul class="c-attributes-view__content">
+        <li v-for="attribute in Object.keys(attributes)" :key="attribute">
+          <span class="c-attributes-view__grid-item__label">{{ attribute }}</span>
+          <span class="c-attributes-view__grid-item__value">{{ attributes[attribute] }}</span>
+        </li>
+      </ul>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
 export default {
-    inject: ['name', 'attributes']
+  inject: ['name', 'attributes']
 };
 </script>
diff --git a/src/plugins/viewDatumAction/components/metadata-list.scss b/src/plugins/viewDatumAction/components/metadata-list.scss
index 778d4f3ded3..4ecf235bf3a 100644
--- a/src/plugins/viewDatumAction/components/metadata-list.scss
+++ b/src/plugins/viewDatumAction/components/metadata-list.scss
@@ -1,30 +1,30 @@
 .c-attributes-view {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
 
-    > * {
-        flex: 0 0 auto;
-    }
-
-    &__content {
-        $p: 3px;
-
-        display: grid;
-        grid-template-columns: max-content 1fr;
-        grid-row-gap: $p;
+  > * {
+    flex: 0 0 auto;
+  }
 
-        li { display: contents; }
+  &__content {
+    $p: 3px;
 
-        [class*="__grid-item"] {
-            border-bottom: 1px solid rgba(#999, 0.2);
-            padding: 0 5px $p 0;
-        }
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    grid-row-gap: $p;
 
-        [class*="__label"] {
-            opacity: 0.8;
-        }
+    li {
+      display: contents;
     }
 
+    [class*='__grid-item'] {
+      border-bottom: 1px solid rgba(#999, 0.2);
+      padding: 0 5px $p 0;
+    }
 
+    [class*='__label'] {
+      opacity: 0.8;
+    }
+  }
 }
diff --git a/src/plugins/viewDatumAction/plugin.js b/src/plugins/viewDatumAction/plugin.js
index d5822c394ba..640e575707f 100644
--- a/src/plugins/viewDatumAction/plugin.js
+++ b/src/plugins/viewDatumAction/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -23,7 +23,7 @@
 import ViewDatumAction from './ViewDatumAction.js';
 
 export default function plugin() {
-    return function install(openmct) {
-        openmct.actions.register(new ViewDatumAction(openmct));
-    };
+  return function install(openmct) {
+    openmct.actions.register(new ViewDatumAction(openmct));
+  };
 }
diff --git a/src/plugins/viewDatumAction/pluginSpec.js b/src/plugins/viewDatumAction/pluginSpec.js
index 847c5e7dd9b..cfc092629a6 100644
--- a/src/plugins/viewDatumAction/pluginSpec.js
+++ b/src/plugins/viewDatumAction/pluginSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,77 +19,73 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import {
-    createOpenMct,
-    resetApplicationState
-} from 'utils/testing';
+import { createOpenMct, resetApplicationState } from 'utils/testing';
 
-describe("the plugin", () => {
-    let openmct;
-    let viewDatumAction;
-    let mockObjectPath;
-    let mockView;
-    let mockDatum;
+describe('the plugin', () => {
+  let openmct;
+  let viewDatumAction;
+  let mockObjectPath;
+  let mockView;
+  let mockDatum;
 
-    beforeEach((done) => {
-        openmct = createOpenMct();
+  beforeEach((done) => {
+    openmct = createOpenMct();
 
-        openmct.on('start', done);
-        openmct.startHeadless();
+    openmct.on('start', done);
+    openmct.startHeadless();
 
-        viewDatumAction = openmct.actions._allActions.viewDatumAction;
+    viewDatumAction = openmct.actions._allActions.viewDatumAction;
 
-        mockObjectPath = [{
-            name: 'mock object',
-            type: 'telemetry-table',
-            identifier: {
-                key: 'mock-object',
-                namespace: ''
-            }
-        }];
+    mockObjectPath = [
+      {
+        name: 'mock object',
+        type: 'telemetry-table',
+        identifier: {
+          key: 'mock-object',
+          namespace: ''
+        }
+      }
+    ];
 
-        mockDatum = {
-            time: 123456789,
-            sin: 0.4455512,
-            cos: 0.4455512
-        };
+    mockDatum = {
+      time: 123456789,
+      sin: 0.4455512,
+      cos: 0.4455512
+    };
 
-        mockView = {
-            getViewContext: () => {
-                return {
-                    row: {
-                        viewDatumAction: true,
-                        getDatum: () => {
-                            return mockDatum;
-                        }
-                    }
-                };
+    mockView = {
+      getViewContext: () => {
+        return {
+          row: {
+            viewDatumAction: true,
+            getDatum: () => {
+              return mockDatum;
             }
+          }
         };
-    });
-
-    afterEach(() => {
-        return resetApplicationState(openmct);
-    });
-
-    it('installs the view datum action', () => {
-        expect(viewDatumAction).toBeDefined();
-    });
+      }
+    };
+  });
 
-    describe('when invoked', () => {
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
 
-        beforeEach((done) => {
-            openmct.overlays.overlay = function (options) {};
+  it('installs the view datum action', () => {
+    expect(viewDatumAction).toBeDefined();
+  });
 
-            spyOn(openmct.overlays, 'overlay');
+  describe('when invoked', () => {
+    beforeEach(() => {
+      openmct.overlays.overlay = function (options) {};
 
-            viewDatumAction.invoke(mockObjectPath, mockView);
+      spyOn(openmct.overlays, 'overlay');
 
-            done();
-        });
+      viewDatumAction.invoke(mockObjectPath, mockView);
+    });
 
-        it('uses an overlay to show user datum values', () => {
-            expect(openmct.overlays.overlay).toHaveBeenCalled();
-        });
+    it('creates an overlay', () => {
+      expect(openmct.overlays.overlay).toHaveBeenCalled();
     });
+  });
 });
diff --git a/src/plugins/viewLargeAction/plugin.js b/src/plugins/viewLargeAction/plugin.js
index 0da5a29aeea..2451aac7d77 100644
--- a/src/plugins/viewLargeAction/plugin.js
+++ b/src/plugins/viewLargeAction/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -23,7 +23,7 @@
 import ViewLargeAction from './viewLargeAction.js';
 
 export default function plugin() {
-    return function install(openmct) {
-        openmct.actions.register(new ViewLargeAction(openmct));
-    };
+  return function install(openmct) {
+    openmct.actions.register(new ViewLargeAction(openmct));
+  };
 }
diff --git a/src/plugins/viewLargeAction/viewLargeAction.js b/src/plugins/viewLargeAction/viewLargeAction.js
index a3afcd784e0..9f3188ed226 100644
--- a/src/plugins/viewLargeAction/viewLargeAction.js
+++ b/src/plugins/viewLargeAction/viewLargeAction.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,96 +20,90 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import PreviewHeader from '@/ui/preview/preview-header.vue';
+import mount from 'utils/mount';
 
-import Vue from 'vue';
+import PreviewContainer from '@/ui/preview/PreviewContainer.vue';
 
 export default class ViewLargeAction {
-    constructor(openmct) {
-        this.openmct = openmct;
-
-        this.cssClass = 'icon-items-expand';
-        this.description = 'View Large';
-        this.group = 'windowing';
-        this.key = 'large.view';
-        this.name = 'Large View';
-        this.priority = 1;
-        this.showInStatusBar = true;
-    }
-
-    invoke(objectPath, view) {
-        const parentElement = view.parentElement;
-        let childElement = parentElement && parentElement.firstChild;
-        if (!childElement) {
-            const message = "ViewLargeAction: missing element";
-            this.openmct.notifications.error(message);
-            throw new Error(message);
-        }
-
-        this._expand(objectPath, childElement, view);
-    }
-
-    appliesTo(objectPath, view = {}) {
-        const parentElement = view.parentElement;
-        const element = parentElement && parentElement.firstChild;
-        const viewLargeAction = element && !element.classList.contains('js-main-container')
-            && !this._isNavigatedObject(objectPath);
-
-        return viewLargeAction;
-    }
-
-    _expand(objectPath, childElement, view) {
-        const parentElement = childElement.parentElement;
-
-        this.overlay = this.openmct.overlays.overlay({
-            element: this._getOverlayElement(objectPath, childElement, view),
-            size: 'large',
-            onDestroy() {
-                parentElement.append(childElement);
-            }
-        });
+  constructor(openmct) {
+    this.openmct = openmct;
+
+    this.cssClass = 'icon-items-expand';
+    this.description = 'View Large';
+    this.group = 'windowing';
+    this.key = 'large.view';
+    this.name = 'Large View';
+    this.priority = 1;
+    this.showInStatusBar = true;
+    this.destroy = null;
+    this.preview = null;
+  }
+
+  invoke(objectPath, view) {
+    performance.mark('viewlarge.start');
+    const childElement = view?.parentElement?.firstElementChild;
+    if (!childElement) {
+      const message = 'ViewLargeAction: missing element';
+      this.openmct.notifications.error(message);
+      throw new Error(message);
     }
 
-    _getOverlayElement(objectPath, childElement, view) {
-        const fragment = new DocumentFragment();
-        const header = this._getPreviewHeader(objectPath, view);
-        fragment.append(header);
-
-        const wrapper = document.createElement('div');
-        wrapper.classList.add('l-preview-window__object-view');
-        wrapper.append(childElement);
-        fragment.append(wrapper);
-
-        return fragment;
-    }
-
-    _getPreviewHeader(objectPath, view) {
-        const domainObject = objectPath[0];
-        const actionCollection = this.openmct.actions.getActionsCollection(objectPath, view);
-        const preview = new Vue({
-            components: {
-                PreviewHeader
-            },
-            provide: {
-                openmct: this.openmct,
-                objectPath: this.objectPath
-            },
-            data() {
-                return {
-                    domainObject,
-                    actionCollection
-                };
-            },
-            template: '<PreviewHeader :actionCollection="actionCollection" :domainObject="domainObject" :hideViewSwitcher="true" :showNotebookMenuSwitcher="true"></PreviewHeader>'
-        });
-
-        return preview.$mount().$el;
-    }
-
-    _isNavigatedObject(objectPath) {
-        let targetObject = objectPath[0];
-        let navigatedObject = this.openmct.router.path[0];
-
-        return this.openmct.objects.areIdsEqual(targetObject.identifier, navigatedObject.identifier);
-    }
+    this._expand(objectPath, view);
+  }
+
+  appliesTo(objectPath, view) {
+    const childElement = view?.parentElement?.firstElementChild;
+
+    return (
+      childElement &&
+      !childElement?.classList?.contains('js-main-container') &&
+      !this.openmct.router.isNavigatedObject(objectPath)
+    );
+  }
+
+  _expand(objectPath, view) {
+    const element = this._getPreview(objectPath, view);
+    view.onPreviewModeChange?.({ isPreviewing: true });
+
+    this.overlay = this.openmct.overlays.overlay({
+      element,
+      size: 'large',
+      autoHide: false,
+      onDestroy: () => {
+        this.destroy();
+        this.preview = null;
+        view.onPreviewModeChange?.();
+      }
+    });
+  }
+
+  _getPreview(objectPath, view) {
+    const { vNode, destroy } = mount(
+      {
+        components: {
+          PreviewContainer
+        },
+        provide: {
+          openmct: this.openmct,
+          objectPath
+        },
+        data() {
+          return {
+            view
+          };
+        },
+        template: '<preview-container :existing-view="view"></preview-container>'
+      },
+      {
+        app: this.openmct.app
+      }
+    );
+    this.preview = vNode.componentInstance;
+    this.destroy = () => {
+      destroy();
+      this.preview = null;
+    };
+
+    return this.preview.$el;
+  }
 }
diff --git a/src/plugins/webPage/WebPageViewProvider.js b/src/plugins/webPage/WebPageViewProvider.js
index 2c305225a76..d5aa7212299 100644
--- a/src/plugins/webPage/WebPageViewProvider.js
+++ b/src/plugins/webPage/WebPageViewProvider.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,42 +20,51 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import mount from 'utils/mount';
+
 import WebPageComponent from './components/WebPage.vue';
-import Vue from 'vue';
 
 export default function WebPage(openmct) {
-    return {
-        key: 'webPage',
-        name: 'Web Page',
-        cssClass: 'icon-page',
-        canView: function (domainObject) {
-            return domainObject.type === 'webPage';
-        },
-        view: function (domainObject) {
-            let component;
+  return {
+    key: 'webPage',
+    name: 'Web Page',
+    cssClass: 'icon-page',
+    canView: function (domainObject) {
+      return domainObject.type === 'webPage';
+    },
+    view: function (domainObject) {
+      let _destroy = null;
 
-            return {
-                show: function (element) {
-                    component = new Vue({
-                        el: element,
-                        components: {
-                            WebPageComponent: WebPageComponent
-                        },
-                        provide: {
-                            openmct,
-                            domainObject
-                        },
-                        template: '<web-page-component></web-page-component>'
-                    });
-                },
-                destroy: function (element) {
-                    component.$destroy();
-                    component = undefined;
-                }
-            };
+      return {
+        show: function (element) {
+          const { destroy } = mount(
+            {
+              el: element,
+              components: {
+                WebPageComponent: WebPageComponent
+              },
+              provide: {
+                openmct,
+                domainObject
+              },
+              template: '<web-page-component></web-page-component>'
+            },
+            {
+              app: openmct.app,
+              element
+            }
+          );
+          _destroy = destroy;
         },
-        priority: function () {
-            return 1;
+        destroy: function () {
+          if (_destroy) {
+            _destroy();
+          }
         }
-    };
+      };
+    },
+    priority: function () {
+      return 1;
+    }
+  };
 }
diff --git a/src/plugins/webPage/components/WebPage.vue b/src/plugins/webPage/components/WebPage.vue
index aedf3753a31..5ce567a72a0 100644
--- a/src/plugins/webPage/components/WebPage.vue
+++ b/src/plugins/webPage/components/WebPage.vue
@@ -1,16 +1,44 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div class="l-iframe abs">
-    <iframe :src="currentDomainObject.url"></iframe>
-</div>
+  <div class="l-iframe abs">
+    <iframe :src="url"></iframe>
+  </div>
 </template>
 
 <script>
+import { sanitizeUrl } from '@braintree/sanitize-url';
+
 export default {
-    inject: ['openmct', 'domainObject'],
-    data: function () {
-        return {
-            currentDomainObject: this.domainObject
-        };
+  inject: ['openmct', 'domainObject'],
+  data: function () {
+    return {
+      currentDomainObject: this.domainObject
+    };
+  },
+  computed: {
+    url() {
+      return sanitizeUrl(this.currentDomainObject.url);
     }
+  }
 };
 </script>
diff --git a/src/plugins/webPage/plugin.js b/src/plugins/webPage/plugin.js
index 2a0c381b1fb..1bb619e34f0 100644
--- a/src/plugins/webPage/plugin.js
+++ b/src/plugins/webPage/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -23,23 +23,24 @@
 import WebPageViewProvider from './WebPageViewProvider.js';
 
 export default function plugin() {
-    return function install(openmct) {
-        openmct.objectViews.addProvider(new WebPageViewProvider(openmct));
+  return function install(openmct) {
+    openmct.objectViews.addProvider(new WebPageViewProvider(openmct));
 
-        openmct.types.addType('webPage', {
-            name: "Web Page",
-            description: "Embed a web page or web-based image in a resizeable window component. Note that the URL being embedded must allow iframing.",
-            creatable: true,
-            cssClass: 'icon-page',
-            form: [
-                {
-                    "key": "url",
-                    "name": "URL",
-                    "control": "textfield",
-                    "required": true,
-                    "cssClass": "l-input-lg"
-                }
-            ]
-        });
-    };
+    openmct.types.addType('webPage', {
+      name: 'Web Page',
+      description:
+        'Embed a web page or web-based image in a resizeable window component. Note that the URL being embedded must allow iframing.',
+      creatable: true,
+      cssClass: 'icon-page',
+      form: [
+        {
+          key: 'url',
+          name: 'URL',
+          control: 'textfield',
+          required: true,
+          cssClass: 'l-input-lg'
+        }
+      ]
+    });
+  };
 }
diff --git a/src/plugins/webPage/pluginSpec.js b/src/plugins/webPage/pluginSpec.js
new file mode 100644
index 00000000000..ee83e48face
--- /dev/null
+++ b/src/plugins/webPage/pluginSpec.js
@@ -0,0 +1,105 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+
+import WebPagePlugin from './plugin.js';
+
+function getView(openmct, domainObj, objectPath) {
+  const applicableViews = openmct.objectViews.get(domainObj, objectPath);
+  const webpageView = applicableViews.find((viewProvider) => viewProvider.key === 'webPage');
+
+  return webpageView.view(domainObj, [domainObj]);
+}
+
+function destroyView(view) {
+  return view.destroy();
+}
+
+describe('The web page plugin', function () {
+  let mockDomainObject;
+  let mockDomainObjectPath;
+  let openmct;
+  let element;
+  let child;
+  let view;
+
+  beforeEach((done) => {
+    mockDomainObjectPath = [
+      {
+        name: 'mock webpage',
+        type: 'webpage',
+        identifier: {
+          key: 'mock-webpage',
+          namespace: ''
+        }
+      }
+    ];
+
+    mockDomainObject = {
+      displayFormat: '',
+      name: 'Unnamed WebPage',
+      type: 'webPage',
+      location: 'f69c21ac-24ef-450c-8e2f-3d527087d285',
+      modified: 1627483839783,
+      url: '123',
+      displayText: '123',
+      persisted: 1627483839783,
+      id: '3d9c243d-dffb-446b-8474-d9931a99d679',
+      identifier: {
+        namespace: '',
+        key: '3d9c243d-dffb-446b-8474-d9931a99d679'
+      }
+    };
+
+    openmct = createOpenMct();
+    openmct.install(new WebPagePlugin());
+
+    element = document.createElement('div');
+    element.style.width = '640px';
+    element.style.height = '480px';
+    child = document.createElement('div');
+    child.style.width = '640px';
+    child.style.height = '480px';
+    element.appendChild(child);
+
+    openmct.on('start', done);
+    openmct.startHeadless();
+  });
+
+  afterEach(() => {
+    destroyView(view);
+
+    return resetApplicationState(openmct);
+  });
+
+  describe('the view', () => {
+    beforeEach(() => {
+      view = getView(openmct, mockDomainObject, mockDomainObjectPath);
+      view.show(child, true);
+    });
+
+    it('provides a view', () => {
+      expect(view).toBeDefined();
+    });
+  });
+});
diff --git a/src/selection/Selection.js b/src/selection/Selection.js
index af1db59a411..99690ab7fa3 100644
--- a/src/selection/Selection.js
+++ b/src/selection/Selection.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,250 +20,226 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(
-    [
-        'EventEmitter',
-        'lodash'
-    ],
-    function (
-        EventEmitter,
-        _
-    ) {
-        /**
-         * Manages selection state for Open MCT
-         * @private
-         */
-        function Selection(openmct) {
-            EventEmitter.call(this);
-
-            this.openmct = openmct;
-            this.selected = [];
-        }
-
-        Selection.prototype = Object.create(EventEmitter.prototype);
-
-        /**
-         * Gets the selected object.
-         * @public
-         */
-        Selection.prototype.get = function () {
-            return this.selected;
-        };
-
-        /**
-         * Selects the selectable object and emits the 'change' event.
-         *
-         * @param {object} selectable an object with element and context properties
-         * @param {Boolean} isMultiSelectEvent flag indication shift key is pressed or not
-         * @private
-         */
-        Selection.prototype.select = function (selectable, isMultiSelectEvent) {
-            if (!Array.isArray(selectable)) {
-                selectable = [selectable];
-            }
-
-            let multiSelect = isMultiSelectEvent
-                && this.parentSupportsMultiSelect(selectable)
-                && this.isPeer(selectable)
-                && !this.selectionContainsParent(selectable);
-
-            if (multiSelect) {
-                this.handleMultiSelect(selectable);
-            } else {
-                this.handleSingleSelect(selectable);
-            }
-        };
-
-        /**
-         * @private
-         */
-        Selection.prototype.handleMultiSelect = function (selectable) {
-            if (this.elementSelected(selectable)) {
-                this.remove(selectable);
-            } else {
-                this.addSelectionAttributes(selectable);
-                this.selected.push(selectable);
-            }
-
-            this.emit('change', this.selected);
-        };
-
-        /**
-         * @private
-         */
-        Selection.prototype.handleSingleSelect = function (selectable) {
-            if (!_.isEqual([selectable], this.selected)) {
-                this.setSelectionStyles(selectable);
-                this.selected = [selectable];
-
-                this.emit('change', this.selected);
-            }
-        };
-
-        /**
-         * @private
-         */
-        Selection.prototype.elementSelected = function (selectable) {
-            return this.selected.some(selectionPath => _.isEqual(selectionPath, selectable));
-        };
-
-        /**
-         * @private
-         */
-        Selection.prototype.remove = function (selectable) {
-            this.selected = this.selected.filter(selectionPath => !_.isEqual(selectionPath, selectable));
-
-            if (this.selected.length === 0) {
-                this.removeSelectionAttributes(selectable);
-                selectable[1].element.click(); // Select the parent if there is no selection.
-            } else {
-                this.removeSelectionAttributes(selectable, true);
-            }
-        };
-
-        /**
-         * @private
-         */
-        Selection.prototype.setSelectionStyles = function (selectable) {
-            this.selected.forEach(selectionPath => this.removeSelectionAttributes(selectionPath));
-            this.addSelectionAttributes(selectable);
-        };
-
-        Selection.prototype.removeSelectionAttributes = function (selectionPath, keepParentStyle) {
-            if (selectionPath[0] && selectionPath[0].element) {
-                selectionPath[0].element.removeAttribute('s-selected');
-            }
-
-            if (selectionPath[1] && selectionPath[1].element && !keepParentStyle) {
-                selectionPath[1].element.removeAttribute('s-selected-parent');
-            }
-        };
-
-        /*
-        * Adds selection attributes to the selected element and its parent.
-        * @private
-        */
-        Selection.prototype.addSelectionAttributes = function (selectable) {
-            if (selectable[0] && selectable[0].element) {
-                selectable[0].element.setAttribute('s-selected', "");
-            }
-
-            if (selectable[1] && selectable[1].element) {
-                selectable[1].element.setAttribute('s-selected-parent', "");
-            }
-        };
-
-        /**
-         * @private
-         */
-        Selection.prototype.parentSupportsMultiSelect = function (selectable) {
-            return selectable[1] && selectable[1].context.supportsMultiSelect;
-        };
-
-        /**
-         * @private
-         */
-        Selection.prototype.selectionContainsParent = function (selectable) {
-            return this.selected.some(selectionPath => _.isEqual(selectionPath[0], selectable[1]));
-        };
-
-        /**
-         * @private
-         */
-        Selection.prototype.isPeer = function (selectable) {
-            return this.selected.some(selectionPath => _.isEqual(selectionPath[1], selectable[1]));
-        };
-
-        /**
-         * @private
-         */
-        Selection.prototype.isSelectable = function (element) {
-            if (!element) {
-                return false;
-            }
-
-            return Boolean(element.closest('[data-selectable]'));
-        };
-
-        /**
-         * @private
-         */
-        Selection.prototype.capture = function (selectable) {
-            let capturingContainsSelectable = this.capturing && this.capturing.includes(selectable);
-
-            if (!this.capturing || capturingContainsSelectable) {
-                this.capturing = [];
-            }
-
-            this.capturing.push(selectable);
-        };
-
-        /**
-         * @private
-         */
-        Selection.prototype.selectCapture = function (selectable, event) {
-            if (!this.capturing) {
-                return;
-            }
-
-            let reversedCapturing = this.capturing.reverse();
-            delete this.capturing;
-            this.select(reversedCapturing, event.shiftKey);
-        };
-
-        /**
-         * Attaches the click handlers to the element.
-         *
-         * @param element an html element
-         * @param context object which defines item or other arbitrary properties.
-         * e.g. {
-         *          item: domainObject,
-         *          elementProxy: element,
-         *          controller: fixedController
-         *       }
-         * @param select a flag to select the element if true
-         * @returns a function that removes the click handlers from the element
-         * @public
-         */
-        Selection.prototype.selectable = function (element, context, select) {
-            if (!this.isSelectable(element)) {
-                return () => {};
-            }
-
-            let selectable = {
-                context: context,
-                element: element
-            };
-
-            const capture = this.capture.bind(this, selectable);
-            const selectCapture = this.selectCapture.bind(this, selectable);
-            let removeMutable = false;
-
-            element.addEventListener('click', capture, true);
-            element.addEventListener('click', selectCapture);
-
-            if (context.item && context.item.isMutable !== true) {
-                removeMutable = true;
-                context.item = this.openmct.objects._toMutable(context.item);
-            }
-
-            if (select) {
-                if (typeof select === 'object') {
-                    element.dispatchEvent(select);
-                } else if (typeof select === 'boolean') {
-                    element.click();
-                }
-            }
-
-            return (function () {
-                element.removeEventListener('click', capture, true);
-                element.removeEventListener('click', selectCapture);
-
-                if (context.item !== undefined && context.item.isMutable && removeMutable === true) {
-                    this.openmct.objects.destroyMutable(context.item);
-                }
-            }).bind(this);
-        };
-
-        return Selection;
-    });
+import EventEmitter from 'EventEmitter';
+import _ from 'lodash';
+
+/**
+ * Manages selection state for Open MCT
+ * @private
+ */
+export default class Selection extends EventEmitter {
+  constructor(openmct) {
+    super();
+
+    this.openmct = openmct;
+    this.selected = [];
+  }
+  /**
+   * Gets the selected object.
+   * @public
+   */
+  get() {
+    return this.selected;
+  }
+  /**
+   * Selects the selectable object and emits the 'change' event.
+   *
+   * @param {object} selectable an object with element and context properties
+   * @param {Boolean} isMultiSelectEvent flag indication shift key is pressed or not
+   * @private
+   */
+  select(selectable, isMultiSelectEvent) {
+    if (!Array.isArray(selectable)) {
+      selectable = [selectable];
+    }
+
+    let multiSelect =
+      isMultiSelectEvent &&
+      this.parentSupportsMultiSelect(selectable) &&
+      this.isPeer(selectable) &&
+      !this.selectionContainsParent(selectable);
+
+    if (multiSelect) {
+      this.handleMultiSelect(selectable);
+    } else {
+      this.handleSingleSelect(selectable);
+    }
+  }
+  /**
+   * @private
+   */
+  handleMultiSelect(selectable) {
+    if (this.elementSelected(selectable)) {
+      this.remove(selectable);
+    } else {
+      this.addSelectionAttributes(selectable);
+      this.selected.push(selectable);
+    }
+
+    this.emit('change', this.selected);
+  }
+  /**
+   * @private
+   */
+  handleSingleSelect(selectable) {
+    if (!_.isEqual([selectable], this.selected)) {
+      this.setSelectionStyles(selectable);
+      this.selected = [selectable];
+
+      this.emit('change', this.selected);
+    }
+  }
+  /**
+   * @private
+   */
+  elementSelected(selectable) {
+    return this.selected.some((selectionPath) => _.isEqual(selectionPath, selectable));
+  }
+  /**
+   * @private
+   */
+  remove(selectable) {
+    this.selected = this.selected.filter((selectionPath) => !_.isEqual(selectionPath, selectable));
+
+    if (this.selected.length === 0) {
+      this.removeSelectionAttributes(selectable);
+      selectable[1].element.click(); // Select the parent if there is no selection.
+    } else {
+      this.removeSelectionAttributes(selectable, true);
+    }
+  }
+  /**
+   * @private
+   */
+  setSelectionStyles(selectable) {
+    this.selected.forEach((selectionPath) => this.removeSelectionAttributes(selectionPath));
+    this.addSelectionAttributes(selectable);
+  }
+  removeSelectionAttributes(selectionPath, keepParentStyle) {
+    if (selectionPath[0] && selectionPath[0].element) {
+      selectionPath[0].element.removeAttribute('s-selected');
+    }
+
+    if (selectionPath[1] && selectionPath[1].element && !keepParentStyle) {
+      selectionPath[1].element.removeAttribute('s-selected-parent');
+    }
+  }
+  /**
+   * Adds selection attributes to the selected element and its parent.
+   * @private
+   */
+  addSelectionAttributes(selectable) {
+    if (selectable[0] && selectable[0].element) {
+      selectable[0].element.setAttribute('s-selected', '');
+    }
+
+    if (selectable[1] && selectable[1].element) {
+      selectable[1].element.setAttribute('s-selected-parent', '');
+    }
+  }
+  /**
+   * @private
+   */
+  parentSupportsMultiSelect(selectable) {
+    return selectable[1] && selectable[1].context.supportsMultiSelect;
+  }
+  /**
+   * @private
+   */
+  selectionContainsParent(selectable) {
+    return this.selected.some((selectionPath) => _.isEqual(selectionPath[0], selectable[1]));
+  }
+  /**
+   * @private
+   */
+  isPeer(selectable) {
+    return this.selected.some((selectionPath) => _.isEqual(selectionPath[1], selectable[1]));
+  }
+  /**
+   * @private
+   */
+  isSelectable(element) {
+    if (!element) {
+      return false;
+    }
+
+    return Boolean(element.closest('[data-selectable]'));
+  }
+  /**
+   * @private
+   */
+  capture(selectable) {
+    let capturingContainsSelectable = this.capturing && this.capturing.includes(selectable);
+
+    if (!this.capturing || capturingContainsSelectable) {
+      this.capturing = [];
+    }
+
+    this.capturing.push(selectable);
+  }
+  /**
+   * @private
+   */
+  selectCapture(selectable, event) {
+    if (!this.capturing) {
+      return;
+    }
+
+    let reversedCapturing = this.capturing.reverse();
+    delete this.capturing;
+    this.select(reversedCapturing, event.shiftKey);
+  }
+  /**
+   * Attaches the click handlers to the element.
+   *
+   * @param element an html element
+   * @param context object which defines item or other arbitrary properties.
+   * e.g. {
+   *          item: domainObject,
+   *          elementProxy: element,
+   *          controller: fixedController
+   *       }
+   * @param select a flag to select the element if true
+   * @returns a function that removes the click handlers from the element
+   * @public
+   */
+  selectable(element, context, select) {
+    if (!this.isSelectable(element)) {
+      return () => {};
+    }
+
+    let selectable = {
+      context: context,
+      element: element
+    };
+
+    const capture = this.capture.bind(this, selectable);
+    const selectCapture = this.selectCapture.bind(this, selectable);
+    let removeMutable = false;
+
+    element.addEventListener('click', capture, true);
+    element.addEventListener('click', selectCapture);
+
+    if (context.item && context.item.isMutable !== true) {
+      removeMutable = true;
+      context.item = this.openmct.objects.toMutable(context.item);
+    }
+
+    if (select) {
+      if (typeof select === 'object') {
+        element.dispatchEvent(select);
+      } else if (typeof select === 'boolean') {
+        element.click();
+      }
+    }
+
+    return function () {
+      element.removeEventListener('click', capture, true);
+      element.removeEventListener('click', selectCapture);
+
+      if (context.item !== undefined && context.item.isMutable && removeMutable === true) {
+        this.openmct.objects.destroyMutable(context.item);
+      }
+    }.bind(this);
+  }
+}
diff --git a/src/start.frag b/src/start.frag
deleted file mode 100644
index 13dfcca7dc7..00000000000
--- a/src/start.frag
+++ /dev/null
@@ -1,45 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *
- * Open MCT https://nasa.github.io/openmct/
- * Version: @@version
- * Built: @@timestamp
- * Revision: @@revision
- * Branch: @@branch
- *
- * @preserve
- *****************************************************************************/
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define([], factory);
-    } else if (typeof exports === 'object') {
-        module.exports = factory();
-    } else {
-        root.openmct = factory();
-    }
-}(this, function() {
-    var BUILD_CONSTANTS = {
-        version: "@@version",
-        timestamp: "@@timestamp",
-        revision: "@@revision",
-        branch: "@@branch"
-    };
diff --git a/src/styles/_about.scss b/src/styles/_about.scss
index 54fb15c2107..a4534d810ab 100644
--- a/src/styles/_about.scss
+++ b/src/styles/_about.scss
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -22,105 +22,107 @@
 
 // Used by About screen, licenses, etc.
 .c-splash-image {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-image: url('../ui/layout/assets/images/bg-splash.jpg');
+  margin-top: 30px; // Don't overlap with close "X" button
+
+  &:before,
+  &:after {
     background-position: center;
     background-repeat: no-repeat;
-    background-size: cover;
-    background-image: url('../ui/layout/assets/images/bg-splash.jpg');
-    margin-top: 30px; // Don't overlap with close "X" button
-
-    &:before,
-    &:after {
-        background-position: center;
-        background-repeat: no-repeat;
-        position: absolute;
-        background-image: url('../ui/layout/assets/images/logo-openmct-shdw.svg');
-        background-size: contain;
-        content: '';
-    }
+    position: absolute;
+    background-image: url('../ui/layout/assets/images/logo-openmct-shdw.svg');
+    background-size: contain;
+    content: '';
+  }
 
-    &:before {
-        // NASA logo, dude
-        $w: 5%;
-        $m: 10px;
-        background-image: url('../ui/layout/assets/images/logo-nasa.svg');
-        top: $m;
-        right: auto;
-        bottom: auto;
-        left: $m;
-        height: auto;
-        width: $w * 2;
-        padding-bottom: $w;
-        padding-top: $w;
-    }
+  &:before {
+    // NASA logo, dude
+    $w: 5%;
+    $m: 10px;
+    background-image: url('../ui/layout/assets/images/logo-nasa.svg');
+    top: $m;
+    right: auto;
+    bottom: auto;
+    left: $m;
+    height: auto;
+    width: $w * 2;
+    padding-bottom: $w;
+    padding-top: $w;
+  }
 
-    &:after {
-        // App logo
-        $d: 25%;
-        top: $d;
-        right: $d;
-        bottom: $d;
-        left: $d;
-    }
+  &:after {
+    // App logo
+    $d: 25%;
+    top: $d;
+    right: $d;
+    bottom: $d;
+    left: $d;
+  }
 }
 
 .c-about {
-    &--splash {
-        // Large initial image after click on app logo with text beneath
-        @include abs();
-        display: flex;
-        flex-direction: column;
-    }
+  &--splash {
+    // Large initial image after click on app logo with text beneath
+    @include abs();
+    display: flex;
+    flex-direction: column;
+  }
 
-    > * + * {
-        margin-top: $interiorMargin;
-    }
+  > * + * {
+    margin-top: $interiorMargin;
+  }
 
-    &__image,
-    &__text {
-        flex: 1 1 auto;
-    }
+  &__image,
+  &__text {
+    flex: 1 1 auto;
+  }
 
-    &__image {
-        height: 35%;
-    }
+  &__image {
+    height: 35%;
+  }
 
-    &__text {
-        height: 65%;
-        overflow: auto;
-        > * + * {
-            border-top: 1px solid $colorInteriorBorder;
-            margin-top: 1em;
-        }
+  &__text {
+    height: 65%;
+    overflow: auto;
+    > * + * {
+      border-top: 1px solid $colorInteriorBorder;
+      margin-top: 1em;
     }
+  }
 
-    &--licenses {
-        padding: 0 10%;
-        .c-license {
-            + .c-license {
-                border-top: 1px solid $colorInteriorBorder;
-                margin-top: 2em;
-            }
-        }
+  &--licenses {
+    padding: 0 10%;
+    .c-license {
+      + .c-license {
+        border-top: 1px solid $colorInteriorBorder;
+        margin-top: 2em;
+      }
     }
+  }
 
-    a {
-        color: $colorAboutLink;
-    }
+  a {
+    color: $colorAboutLink;
+  }
 
-    em {
-        color: pushBack($colorBodyFg, 20%);
-    }
+  em {
+    color: pushBack($colorBodyFg, 20%);
+  }
 
-    h1, h2, h3 {
-        font-weight: normal;
-        margin-bottom: .25em;
-    }
+  h1,
+  h2,
+  h3 {
+    font-weight: normal;
+    margin-bottom: 0.25em;
+  }
 
-    h1 {
-        font-size: 2.25em;
-    }
+  h1 {
+    font-size: 2.25em;
+  }
 
-    h2 {
-        font-size: 1.5em;
-    }
+  h2 {
+    font-size: 1.5em;
+  }
 }
diff --git a/src/styles/_animations.scss b/src/styles/_animations.scss
index f95e73560c2..d62a663402c 100644
--- a/src/styles/_animations.scss
+++ b/src/styles/_animations.scss
@@ -1,91 +1,101 @@
 @keyframes rotation {
-    100% { transform: rotate(360deg); }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 @keyframes rotation-centered {
-    0%   { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 @keyframes clock-hands {
-    0% { transform: translate(-50%, -50%) rotate(0deg); }
-    100% { transform: translate(-50%, -50%) rotate(360deg);  }
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
 }
 
 @keyframes clock-hands-sticky {
-    0% {
-        transform: translate(-50%, -50%) rotate(0deg);
-    }
-    7% {
-        transform: translate(-50%, -50%) rotate(0deg);
-    }
-    8% {
-        transform: translate(-50%, -50%) rotate(30deg);
-    }
-    15% {
-        transform: translate(-50%, -50%) rotate(30deg);
-    }
-    16% {
-        transform: translate(-50%, -50%) rotate(60deg);
-    }
-    24% {
-        transform: translate(-50%, -50%) rotate(60deg);
-    }
-    25% {
-        transform: translate(-50%, -50%) rotate(90deg);
-    }
-    32% {
-        transform: translate(-50%, -50%) rotate(90deg);
-    }
-    33% {
-        transform: translate(-50%, -50%) rotate(120deg);
-    }
-    40% {
-        transform: translate(-50%, -50%) rotate(120deg);
-    }
-    41% {
-        transform: translate(-50%, -50%) rotate(150deg);
-    }
-    49% {
-        transform: translate(-50%, -50%) rotate(150deg);
-    }
-    50% {
-        transform: translate(-50%, -50%) rotate(180deg);
-    }
-    57% {
-        transform: translate(-50%, -50%) rotate(180deg);
-    }
-    58% {
-        transform: translate(-50%, -50%) rotate(210deg);
-    }
-    65% {
-        transform: translate(-50%, -50%) rotate(210deg);
-    }
-    66% {
-        transform: translate(-50%, -50%) rotate(240deg);
-    }
-    74% {
-        transform: translate(-50%, -50%) rotate(240deg);
-    }
-    75% {
-        transform: translate(-50%, -50%) rotate(270deg);
-    }
-    82% {
-        transform: translate(-50%, -50%) rotate(270deg);
-    }
-    83% {
-        transform: translate(-50%, -50%) rotate(300deg);
-    }
-    90% {
-        transform: translate(-50%, -50%) rotate(300deg);
-    }
-    91% {
-        transform: translate(-50%, -50%) rotate(330deg);
-    }
-    99% {
-        transform: translate(-50%, -50%) rotate(330deg);
-    }
-    100% {
-        transform: translate(-50%, -50%) rotate(360deg);
-    }
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  7% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  8% {
+    transform: translate(-50%, -50%) rotate(30deg);
+  }
+  15% {
+    transform: translate(-50%, -50%) rotate(30deg);
+  }
+  16% {
+    transform: translate(-50%, -50%) rotate(60deg);
+  }
+  24% {
+    transform: translate(-50%, -50%) rotate(60deg);
+  }
+  25% {
+    transform: translate(-50%, -50%) rotate(90deg);
+  }
+  32% {
+    transform: translate(-50%, -50%) rotate(90deg);
+  }
+  33% {
+    transform: translate(-50%, -50%) rotate(120deg);
+  }
+  40% {
+    transform: translate(-50%, -50%) rotate(120deg);
+  }
+  41% {
+    transform: translate(-50%, -50%) rotate(150deg);
+  }
+  49% {
+    transform: translate(-50%, -50%) rotate(150deg);
+  }
+  50% {
+    transform: translate(-50%, -50%) rotate(180deg);
+  }
+  57% {
+    transform: translate(-50%, -50%) rotate(180deg);
+  }
+  58% {
+    transform: translate(-50%, -50%) rotate(210deg);
+  }
+  65% {
+    transform: translate(-50%, -50%) rotate(210deg);
+  }
+  66% {
+    transform: translate(-50%, -50%) rotate(240deg);
+  }
+  74% {
+    transform: translate(-50%, -50%) rotate(240deg);
+  }
+  75% {
+    transform: translate(-50%, -50%) rotate(270deg);
+  }
+  82% {
+    transform: translate(-50%, -50%) rotate(270deg);
+  }
+  83% {
+    transform: translate(-50%, -50%) rotate(300deg);
+  }
+  90% {
+    transform: translate(-50%, -50%) rotate(300deg);
+  }
+  91% {
+    transform: translate(-50%, -50%) rotate(330deg);
+  }
+  99% {
+    transform: translate(-50%, -50%) rotate(330deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
 }
diff --git a/src/styles/_constants-espresso.scss b/src/styles/_constants-espresso.scss
index 9acb3d0bbe2..8be0353941a 100644
--- a/src/styles/_constants-espresso.scss
+++ b/src/styles/_constants-espresso.scss
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,42 +20,64 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-/************************************************** ESPRESSO THEME CONSTANTS */
-
+/************************************************** ESPRESSO THEME */
 // Fonts
-$heroFont: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$heroFont: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $headerFont: $heroFont;
 $bodyFont: $heroFont;
 
 @mixin heroFont($size: 1em) {
-    font-family: $heroFont;
-    font-size: $size;
+  font-family: $heroFont;
+  font-size: $size;
 }
 
 @mixin headerFont($size: 1em) {
-    font-family: $headerFont;
-    font-size: $size;
+  font-family: $headerFont;
+  font-size: $size;
 }
 
 @mixin bodyFont($size: 1em) {
-    font-family: $bodyFont;
-    font-size: $size;
+  font-family: $bodyFont;
+  font-size: $size;
+}
+@mixin discreteItem() {
+  background: $colorDiscreteItemBg;
+  border: none;
+  border-radius: $controlCr;
+
+  .c-input-inline:hover {
+    background: $colorBodyBg;
+  }
+
+  &--current-match {
+    background: $colorDiscreteItemCurrentBg;
+  }
+}
+
+@mixin discreteItemInnerElem() {
+  border: 1px solid rgba(#fff, 0.1);
+  border-radius: $controlCr;
+}
+
+@mixin themedButton($c: $colorBtnBg) {
+  background: linear-gradient(pullForward($c, 5%), $c);
+  box-shadow: rgba(black, 0.5) 0 0.5px 2px;
 }
 
 // Functions
 @function buttonBg($c: $colorBtnBg) {
-    @return linear-gradient(lighten($c, 5%), $c);
+  @return linear-gradient(lighten($c, 5%), $c);
 }
 
 @function pullForward($val, $amt) {
-    @return lighten($val, $amt);
+  @return lighten($val, $amt);
 }
 
 @function pushBack($val, $amt) {
-    @return darken($val, $amt);
+  @return darken($val, $amt);
 }
 
-// Constants
+/**************************************************** CONSTANTS */
 $fontBaseSize: 12px;
 $smallCr: 2px;
 $controlCr: 3px;
@@ -64,29 +86,36 @@ $shdwBtns: rgba(black, 0.2) 0 1px 2px;
 $shdwBtnsOverlay: rgba(black, 0.5) 0 1px 5px;
 
 // Base colors
-$colorBodyBg: #393939;
-$colorBodyFg: #aaaaaa;
+$colorBodyBg: #2c2c2c;
+$colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
+$colorBodyBgSubtleHov: pullForward($colorBodyBg, 10%);
+$colorBodyFg: #acacac;
+$colorBodyFgSubtle: #9c9c9c;
 $colorBodyFgEm: #fff;
 $colorGenBg: #222;
-$colorHeadBg: #262626;
+$colorHeadBg: #000;
 $colorHeadFg: $colorBodyFg;
-$colorKey: #0099cc;
+$colorKey: #009fd4;
+$colorKeyBg: #007fad; // Darker version of colorKey for use in major buttons
 $colorKeyFg: #fff;
-$colorKeyHov: #26d8ff;
+$colorKeyHov: lighten($colorKey, 10%);
+$colorKeyBgHov: lighten($colorKeyBg, 10%);
 $colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%) contrast(101%);
 $colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%);
-$colorKeySelectedBg: $colorKey;
+$colorKeySelectedBg: $colorKeyBg;
+$colorKeySubtle: pushBack($colorKey, 10%);
 $uiColor: #0093ff; // Resize bars, splitter bars, etc.
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
 $colorA: #ccc;
 $colorAHov: #fff;
 $filterHov: brightness(1.3) contrast(1.5); // Tree, location items
+$filterHovSubtle: brightness(1.2) contrast(1.2);
 $colorSelectedBg: rgba($colorKey, 0.3);
 $colorSelectedFg: pullForward($colorBodyFg, 20%);
 
 // Object labels
-$objectLabelTypeIconOpacity: 0.7;
-$objectLabelNameFilter: brightness(1.3);
+$objectLabelTypeIconOpacity: 0.8; //JOHN
+$objectLabelNameColorFg: lighten($colorBodyFg, 10%);
 
 // Layout
 $shellMainPad: 4px 0;
@@ -94,7 +123,7 @@ $shellPanePad: $interiorMargin, 7px;
 $drawerBg: lighten($colorBodyBg, 5%);
 $drawerFg: lighten($colorBodyFg, 5%);
 $sideBarBg: $drawerBg;
-$sideBarHeaderBg: rgba($colorBodyFg, 0.2);
+$sideBarHeaderBg: rgba($colorBodyFg, 0.1);
 $sideBarHeaderFg: rgba($colorBodyFg, 0.7);
 
 // Status colors, mainly used for messaging and item ancillary symbols
@@ -114,11 +143,11 @@ $colorAlertFg: #fff;
 $colorError: #ff3c00;
 $colorErrorFg: #fff;
 $colorWarningHi: #990000;
-$colorWarningHiFg: #FF9594;
+$colorWarningHiFg: #ff9594;
 $colorWarningLo: #ff9900;
 $colorWarningLoFg: #523400;
 $colorDiagnostic: #a4b442;
-$colorDiagnosticFg: #39461A;
+$colorDiagnosticFg: #39461a;
 $colorCommand: #3693bd;
 $colorCommandFg: #fff;
 $colorInfo: #2294a2;
@@ -133,38 +162,51 @@ $colorFilter: $colorFilterFg; // Standalone against $colorBodyBg
 $colorPausedBg: #ff9900;
 $colorPausedFg: #333;
 
-// Base variations
-$colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
-$colorBodyBgSubtleHov: pushBack($colorKey, 50%);
-$colorKeySubtle: pushBack($colorKey, 10%);
-
 // Time Colors
-$colorTime: #618cff;
-$colorTimeBg: $colorTime;
-$colorTimeFg: pullForward($colorTimeBg, 30%);
-$colorTimeHov: pullForward($colorTime, 10%);
-$colorTimeSubtle: pushBack($colorTime, 20%);
+$colorTimeCommonFg: #eee;
+$colorTimeFixed: #59554c;
+$colorTimeFixedBg: $colorTimeFixed;
+$colorTimeFixedFg: #eee;
+$colorTimeFixedFgSubtle: #b2aa98;
+$colorTimeFixedHov: pullForward($colorTimeFixed, 5%);
+$colorTimeFixedSubtle: pushBack($colorTimeFixed, 20%);
+$colorTimeFixedBtnBg: pullForward($colorTimeFixed, 5%);
+$colorTimeFixedBtnFg: $colorTimeFixedFgSubtle;
+$colorTimeFixedBtnBgMajor: #a09375;
+$colorTimeFixedBtnFgMajor: #fff;
+$colorTimeRealtime: #445890;
+$colorTimeRealtimeBg: $colorTimeRealtime;
+$colorTimeRealtimeFg: #eee;
+$colorTimeRealtimeFgSubtle: #88b0ff;
+$colorTimeRealtimeHov: pullForward($colorTimeRealtime, 5%);
+$colorTimeRealtimeSubtle: pushBack($colorTimeRealtime, 20%);
+$colorTimeRealtimeBtnBg: pullForward($colorTimeRealtime, 5%);
+$colorTimeRealtimeBtnFg: $colorTimeRealtimeFgSubtle;
+$colorTimeRealtimeBtnBgMajor: #588ffa;
+$colorTimeRealtimeBtnFgMajor: #fff;
 $colorTOI: $colorBodyFg; // was $timeControllerToiLineColor
-$colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
+$colorTOIHov: $colorTimeRealtime; // was $timeControllerToiLineColorHov
 $timeConductorAxisHoverFilter: brightness(1.2);
 $timeConductorActiveBg: $colorKey;
 $timeConductorActivePanBg: #226074;
 
-/************************************************** BROWSING */
+// Browse
 $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);
+
+// Missing Items
 $filterItemMissing: brightness(0.6) grayscale(1);
 $opacityMissing: 0.5;
 $borderMissing: 1px dashed $colorAlert !important;
 
-/************************************************** EDITING */
+// Edit
 $editUIColor: $uiColor; // Base color
 $editUIColorBg: $editUIColor;
 $editUIColorFg: #fff;
-$editUIColorHov: pullForward(saturate($uiColor, 10%), 20%); // Hover color when $editUIColor is applied as a base color
+$editUIColorHov: pullForward(saturate($uiColor, 10%), 10%); // Hover color when $editUIColor is applied as a base color
 $editUIBaseColor: #344b8d; // Base color, toolbar bg
 $editUIBaseColorHov: pullForward($editUIBaseColor, 20%);
 $editUIBaseColorFg: #ffffff; // Toolbar button icon colors, etc.
@@ -178,19 +220,19 @@ $editFrameColor: $browseFrameColor; // Solid or dotted border applied to non-sel
 $editFrameBorder: 1px dotted $editFrameColor;
 $editFrameColorHov: $editUIColor; // Solid border hover on frames; hover should not be applied to selected objects
 $editFrameBorderHov: 1px solid $editFrameColorHov; // Hover on selectable frames
-$editFrameColorSelected: #ccc; // Border of selected frames
+$editFrameColorSelected: #ffefc2; // Border of selected frames while editing
 $editFrameColorHandleBg: $colorBodyBg; // Resize handle 'offset' color to make handle standout
 $editFrameColorHandleFg: $editFrameColorSelected; // Resize handle main color
 $editFrameSelectedShdw: rgba(black, 0.4) 0 1px 5px 1px;
-$editFrameSelectedBorder: 1px solid $editFrameColorHov; // Selected frame element
 $editFrameMovebarColorBg: $editFrameColor; // Movebar bg color
-$editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%);  // Grippy lines, container size text
+$editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%); // Grippy lines, container size text
 $editFrameHovMovebarColorBg: pullForward($editFrameMovebarColorBg, 10%); // Hover style
 $editFrameHovMovebarColorFg: pullForward($editFrameMovebarColorFg, 10%);
 $editFrameSelectedMovebarColorBg: pullForward($editFrameMovebarColorBg, 15%); // Selected style
 $editFrameSelectedMovebarColorFg: pullForward($editFrameMovebarColorFg, 15%);
 $editFrameMovebarH: 10px; // Height of move bar in layout frame
 $editMarqueeBorder: 1px dashed $editFrameColorSelected;
+$editFrameSelectedBorder: $editMarqueeBorder; // Selected frame element
 
 // Icons
 $colorIconAlias: #4af6f3;
@@ -202,12 +244,13 @@ $colorTabsHolderBg: rgba(black, 0.2);
 // Buttons and Controls
 $colorBtnBg: pullForward($colorBodyBg, 10%);
 $colorBtnBgHov: pullForward($colorBtnBg, 10%);
+$shdwBtnHov: inset rgba(white, 10%) 0 0 0 100px;
 $colorBtnFg: pullForward($colorBodyFg, 10%);
 $colorBtnReverseFg: pullForward($colorBtnFg, 10%);
 $colorBtnReverseBg: pullForward($colorBtnBg, 10%);
 $colorBtnFgHov: $colorBtnFg;
-$colorBtnMajorBg: $colorKey;
-$colorBtnMajorBgHov: $colorKeyHov;
+$colorBtnMajorBg: $colorKeyBg;
+$colorBtnMajorBgHov: $colorKeyBgHov;
 $colorBtnMajorFg: $colorKeyFg;
 $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
 $colorBtnCautionBg: $colorStatusAlert;
@@ -232,7 +275,7 @@ $shdwCursorGuide: rgba(black, 0.4) 0 0 2px;
 $colorLocalControlOvrBg: rgba($colorBodyBg, 0.8);
 $colorSelectBg: $colorBtnBg; // This must be a solid color, not a gradient, due to usage of SVG bg in selects
 $colorSelectFg: $colorBtnFg;
-$colorSelectArw: lighten($colorBtnBg, 20%);
+$colorSelectArw: #777777; // This must be a solid color, not a gradient, due to usage of SVG bg in selects
 $shdwSelect: rgba(black, 0.5) 0 0.5px 3px;
 $controlDisabledOpacity: 0.2;
 
@@ -240,12 +283,13 @@ $controlDisabledOpacity: 0.2;
 $colorMenuBg: $colorBodyBg;
 $colorMenuFg: $colorBodyFg;
 $colorMenuIc: $colorKey;
-$filterMenu:  brightness(1.4);
+$filterMenu: brightness(1.4);
 $colorMenuHovBg: rgba($colorKey, 0.5);
 $colorMenuHovFg: $colorBodyFgEm;
 $colorMenuHovIc: $colorMenuHovFg;
 $colorMenuElementHilite: pullForward($colorMenuBg, 10%);
-$shdwMenu: rgba(black, 0.5) 0 1px 5px;
+$shdwMenu: rgba(black, 0.8) 0 2px 10px;
+$shdwMenuInner: inset 0 0 0 1px rgba(white, 0.2);
 $shdwMenuText: none;
 $menuItemPad: $interiorMargin, floor($interiorMargin * 1.25);
 
@@ -264,12 +308,12 @@ $colorFormError: #990000;
 $colorFormInvalid: #ff2200;
 $colorFormFieldErrorBg: $colorFormError;
 $colorFormFieldErrorFg: rgba(#fff, 0.6);
-$colorFormLines: rgba(#000, 0.1);
+$colorFormLines: rgba(#000, 0.2);
 $colorFormSectionHeaderBg: rgba(#000, 0.1);
 $colorFormSectionHeaderFg: rgba($colorBodyFg, 0.8);
 $colorInputBg: rgba(black, 0.2);
+$colorInputBgHov: rgba(black, 0.1);
 $colorInputFg: $colorBodyFg;
-$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
 $colorFormText: pushBack($colorBodyFg, 10%);
 $colorInputIcon: pushBack($colorBodyFg, 25%);
 $colorFieldHint: pullForward($colorBodyFg, 40%);
@@ -282,12 +326,19 @@ $formInputH: 22px;
 $formRowCtrlsH: 14px;
 
 // Inspector
-$colorInspectorBg: pullForward($colorBodyBg, 5%);
+$colorInspectorBg: $colorBodyBg;
 $colorInspectorFg: $colorBodyFg;
-$colorInspectorPropName: pushBack($colorBodyFg, 20%);
-$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
+$colorInspectorPropName: $colorBodyFgSubtle;
+$colorInspectorPropVal: $colorBodyFgEm;
 $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
-$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
+$colorInspectorSectionHeaderFg: #bfbfbf;
+
+// Tabs
+$colorTabBg: pullForward($colorBodyBg, 5%);
+$colorTabFg: pullForward($colorBodyFg, 0%);
+$colorTabCurrentBg: pullForward($colorTabBg, 10%);
+$colorTabCurrentFg: pullForward($colorTabFg, 20%);
+$colorTabsBaseline: $colorTabCurrentBg;
 
 // Overlay
 $colorOvrBlocker: rgba(black, 0.7);
@@ -300,31 +351,41 @@ $colorIndicatorOn: $colorOk;
 $colorIndicatorOff: #777777;
 $colorIndicatorBgHov: rgba($colorHeadFg, 0.1);
 $colorIndicatorMenuBg: $colorHeadBg;
-$colorIndicatorMenuBgShdw: rgba(white, 0.6) 0 0 6px;
+$colorIndicatorMenuBgShdw: rgba(white, 0.3) 0 0 10px 1px;
 $colorIndicatorMenuFg: $colorHeadFg;
 $colorIndicatorMenuFgHov: pullForward($colorHeadFg, 10%);
 
 // Staleness
-$colorTelemFresh: pullForward($colorBodyFg, 20%);
-$colorTelemStale: pushBack($colorBodyFg, 20%);
+$colorTelemStale: cyan;
+$colorTelemStaleFg: #002a2a;
 $styleTelemStale: italic;
 
 // Limits
-$colorLimitYellowBg: #B18B05;
-$colorLimitYellowFg: #FEEEB5;
-$colorLimitYellowIc: #FDC707;
-$colorLimitOrangeBg: #B36B00;
-$colorLimitOrangeFg: #FFE0B2;
+$colorLimitYellowBg: #b18b05;
+$colorLimitYellowFg: #feeeb5;
+$colorLimitYellowIc: #fdc707;
+$colorLimitOrangeBg: #b36b00;
+$colorLimitOrangeFg: #ffe0b2;
 $colorLimitOrangeIc: #ff9900;
 $colorLimitRedBg: #940000;
 $colorLimitRedFg: #ffa489;
 $colorLimitRedIc: #ff4222;
-$colorLimitPurpleBg: #891BB3;
-$colorLimitPurpleFg: #EDBEFF;
+$colorLimitPurpleBg: #891bb3;
+$colorLimitPurpleFg: #edbeff;
 $colorLimitPurpleIc: #c327ff;
-$colorLimitCyanBg: #4BA6B3;
-$colorLimitCyanFg: #D3FAFF;
-$colorLimitCyanIc: #6BEDFF;
+$colorLimitCyanBg: #4ba6b3;
+$colorLimitCyanFg: #d3faff;
+$colorLimitCyanIc: #6bedff;
+
+// Events
+$colorEventPurpleFg: #aB8fff;
+$colorEventRedFg: #ff9999;
+$colorEventOrangeFg: #ff8800;
+$colorEventYellowFg: #ffdb63;
+$colorEventPurpleBg: #31204a;
+$colorEventRedBg: #3c1616;
+$colorEventOrangeBg: #3e2a13;
+$colorEventYellowBg: #3e3316;
 
 // Bubble colors
 $colorInfoBubbleBg: #dddddd;
@@ -338,14 +399,14 @@ $colorItemBgHov: buttonBg(pullForward($colorBtnBg, 5%));
 $colorListItemBg: transparent;
 $colorListItemBgHov: rgba($colorKey, 0.1);
 $colorItemFg: $colorBtnFg;
-$colorItemFgDetails: pushBack($colorItemFg, 20%);
+$colorItemFgDetails: $colorBodyFgSubtle;
 $shdwItemText: none;
 
 // Tabular
 $colorTabBorder: pullForward($colorBodyBg, 10%);
 $colorTabBodyBg: $colorBodyBg;
 $colorTabBodyFg: pullForward($colorBodyFg, 20%);
-$colorTabHeaderBg: rgba($colorBodyFg, 0.15);
+$colorTabHeaderBg: #575757;
 $colorTabHeaderFg: $colorBodyFg;
 $colorTabHeaderBorder: $colorBodyBg;
 $colorTabGroupHeaderBg: pullForward($colorBodyBg, 5%);
@@ -366,13 +427,41 @@ $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 $legendTableHeadBg: $colorTabHeaderBg;
 $colorPlotLimitLineBg: rgba($colorBodyBg, 0.2);
 
+// Gauges
+$colorGaugeBg: pullForward($colorBodyBg, 5%); // Gauge radial area background, meter background
+$colorGaugeValue: rgba(#fff, 0.3); // Gauge value graphic (radial sweep, bar) color
+$colorGaugeTextValue: #fff; // Radial gauge text value
+$colorGaugeMeterTextValue: $colorGaugeTextValue; // Meter text value, overlaid on value bar
+$colorGaugeRange: $colorBodyFg; // Range text color
+$colorGaugeLimitHigh: rgba($colorLimitRedBg, 0.4);
+$colorGaugeLimitLow: $colorGaugeLimitHigh;
+$transitionTimeGauge: 150ms; // CSS transition time used to smooth needle gauge and meter value transitions
+$marginGaugeMeterValue: 10%; // Margin between meter value bar and bounds edges
+
+// Time Strip and Lists
+$colorPastBg: #444;
+$colorPastFg: pushBack($colorBodyFg, 10%);
+$colorPastFgEm: $colorBodyFg;
+$colorCurrentBg: #666;
+$colorCurrentFg: $colorBodyFg;
+$colorCurrentFgEm: $colorBodyFgEm;
+$colorCurrentBorder: $colorBodyBg;
+$colorFutureBg: $colorPastBg;
+$colorFutureFg: $colorCurrentFg;
+$colorFutureFgEm: $colorCurrentFgEm;
+$colorFutureBorder: $colorCurrentBorder;
+$colorInProgressBg: $colorTimeRealtimeBg;
+$colorInProgressFg: $colorTimeRealtimeFgSubtle;
+$colorInProgressFgEm: $colorTimeRealtimeFg;
+$colorGanttSelectedBorder: rgba(#fff, 0.3);
+
 // Tree
 $colorTreeBg: transparent;
 $colorItemTreeHoverBg: rgba(#fff, 0.1);
 $colorItemTreeHoverFg: #fff;
 $colorItemTreeIcon: $colorKey; // Used
 $colorItemTreeIconHover: $colorItemTreeIcon; // Used
-$colorItemTreeFg: $colorBodyFg;
+$colorItemTreeFg: #ccc;
 $colorItemTreeSelectedBg: $colorSelectedBg;
 $colorItemTreeSelectedFg: $colorItemTreeHoverFg;
 $filterItemTreeSelected: $filterHov;
@@ -382,6 +471,7 @@ $colorItemTreeEditingFg: $editUIColor;
 $colorItemTreeEditingIcon: $editUIColor;
 $colorItemTreeVC: $colorDisclosureCtrl;
 $colorItemTreeVCHover: $colorDisclosureCtrlHov;
+$colorItemTreeNewNode: rgba($colorBodyFg, 0.7);
 $shdwItemTreeIcon: none;
 
 // Layout frame controls
@@ -413,10 +503,10 @@ $colorSplitterActive: $colorKey;
 $splitterBtnD: (16px, 35px); // height, width
 $splitterBtnColorBg: $colorBtnBg;
 $splitterBtnColorFg: #999;
-$splitterBtnLabelColorFg: #666;
-$splitterCollapsedBtnColorBg: #222;
-$splitterCollapsedBtnColorFg: #555;
-$splitterCollapsedBtnColorBgHov: $colorKey;
+$splitterBtnLabelColorFg: $colorBodyFgSubtle;
+$splitterCollapsedBtnColorBg: $colorHeadBg;
+$splitterCollapsedBtnColorFg: #757575;
+$splitterCollapsedBtnColorBgHov: $colorKeyBg;
 $splitterCollapsedBtnColorFgHov: $colorKeyFg;
 
 // Mobile
@@ -437,34 +527,14 @@ $transInTime: 50ms;
 $transOutTime: 250ms;
 $transIn: all $transInTime ease-in-out;
 $transOut: all $transOutTime ease-in-out;
-$transInBounce: all 200ms cubic-bezier(.47,.01,.25,1.5);
-$transInBounceBig: all 300ms cubic-bezier(.2,1.6,.6,3);
+$transInTransform: transform $transInTime ease-in-out;
+$transOutTransform: transform $transOutTime ease-in-out;
+$transInBounce: all 200ms cubic-bezier(0.47, 0.01, 0.25, 1.5);
+$transInBounceBig: all 300ms cubic-bezier(0.2, 1.6, 0.6, 3);
 
-// Discrete items, like Notebook entries, Widget rules
+// Discrete items
 $createBtnTextTransform: uppercase;
-$colorDiscreteItemBg: rgba($colorBodyFg,0.1);
-$colorDiscreteItemCurrentBg: rgba($colorOk,0.3);
-
-@mixin discreteItem() {
-    background: $colorDiscreteItemBg;
-    border: none;
-    border-radius: $controlCr;
-
-    .c-input-inline:hover {
-        background: $colorBodyBg;
-    }
-
-    &--current-match {
-        background: $colorDiscreteItemCurrentBg;
-    }
-}
-
-@mixin discreteItemInnerElem() {
-    border: 1px solid rgba(#fff, 0.1);
-    border-radius: $controlCr;
-}
-
-@mixin themedButton($c: $colorBtnBg) {
-    background: linear-gradient(pullForward($c, 5%), $c);
-    box-shadow: rgba(black, 0.5) 0 0.5px 2px;
-}
+$colorDiscreteItemBg: rgba($colorBodyFg, 0.1);
+$colorDiscreteItemBgHov: rgba($colorBodyFg, 0.2);
+$colorDiscreteItemCurrentBg: rgba($colorOk, 0.3);
+$scrollContainer: $colorBodyBg;
diff --git a/src/styles/_constants-maelstrom.scss b/src/styles/_constants-maelstrom.scss
index 0f154b49d27..d0d4ae13a8d 100644
--- a/src/styles/_constants-maelstrom.scss
+++ b/src/styles/_constants-maelstrom.scss
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,8 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-/************************************************** MAELSTROM THEME CONSTANTS */
-
+/************************************************** MAELSTROM THEME */
 // Fonts
 @import url('https://fonts.googleapis.com/css?family=Chakra+Petch:400,600,700|Michroma|Teko:400,700');
 
@@ -30,36 +29,72 @@ $headerFont: 'Michroma', sans-serif;
 $bodyFont: 'Chakra Petch', sans-serif;
 
 @mixin heroFont($size: 1em) {
-    font-family: $heroFont;
-    font-size: $size;
+  font-family: $heroFont;
+  font-size: $size;
 }
 
 @mixin headerFont($size: 1em) {
-    font-family: $headerFont;
-    font-size: $size * 0.8; // This font is comparatively large, so reduce it a bit
-    text-transform: uppercase;
-    word-spacing: 0.25em;
+  font-family: $headerFont;
+  font-size: $size * 0.8; // This font is comparatively large, so reduce it a bit
+  text-transform: uppercase;
+  word-spacing: 0.25em;
 }
 
 @mixin bodyFont($size: 1em) {
-    font-family: $bodyFont;
-    font-size: $size;
+  font-family: $bodyFont;
+  font-size: $size;
+}
+
+@mixin discreteItem() {
+  background: rgba($colorBodyFg, 0.1);
+  border: none;
+  border-radius: $controlCr;
+
+  &--current-match {
+    background: $colorDiscreteItemCurrentBg;
+  }
+}
+
+@mixin discreteItemInnerElem() {
+  border: 1px solid rgba(#fff, 0.1);
+  border-radius: $controlCr;
+}
+
+@mixin themedButton($c: $colorBtnBg) {
+  background: linear-gradient(pullForward($c, 5%), $c);
+  box-shadow: rgba(black, 0.5) 0 0.5px 2px;
+}
+
+/**************************************************** OVERRIDES */
+.c-frame {
+  &:not(.no-frame) {
+    $bc: #666;
+    $bLR: 3px solid transparent;
+    $br: 20px;
+    background: none !important;
+    border-radius: $br;
+    border-top: 4px solid $bc !important;
+    border-bottom: 2px solid $bc !important;
+    border-left: $bLR !important;
+    border-right: $bLR !important;
+    padding: 5px 10px 10px 10px !important;
+  }
 }
 
 // Functions
 @function buttonBg($c: $colorBtnBg) {
-    @return linear-gradient(lighten($c, 5%), $c);
+  @return linear-gradient(lighten($c, 5%), $c);
 }
 
 @function pullForward($val, $amt) {
-    @return lighten($val, $amt);
+  @return lighten($val, $amt);
 }
 
 @function pushBack($val, $amt) {
-    @return darken($val, $amt);
+  @return darken($val, $amt);
 }
 
-// Constants
+/**************************************************** CONSTANTS */
 $fontBaseSize: 12px;
 $smallCr: 2px;
 $controlCr: 3px;
@@ -69,28 +104,35 @@ $shdwBtnsOverlay: rgba(black, 0.5) 0 1px 5px;
 
 // Base colors
 $colorBodyBg: #393939;
+$colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
+$colorBodyBgSubtleHov: pushBack($colorKey, 50%);
 $colorBodyFg: #ccc;
+$colorBodyFgSubtle: #9c9c9c;
 $colorBodyFgEm: #fff;
 $colorGenBg: #222;
 $colorHeadBg: #262626;
 $colorHeadFg: $colorBodyFg;
 $colorKey: #0099cc;
+$colorKeyBg: #007fad; // Darker version of colorKey for use in major buttons
 $colorKeyFg: #fff;
 $colorKeyHov: #26d8ff;
+$colorKeyBgHov: lighten($colorKeyBg, 10%);
 $colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%) contrast(101%);
 $colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%);
 $colorKeySelectedBg: $colorKey;
+$colorKeySubtle: pushBack($colorKey, 10%);
 $uiColor: #0093ff; // Resize bars, splitter bars, etc.
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
 $colorA: #ccc;
 $colorAHov: #fff;
 $filterHov: brightness(1.3) contrast(1.5); // Tree, location items
+$filterHovSubtle: brightness(1.2) contrast(1.2);
 $colorSelectedBg: rgba($colorKey, 0.3);
 $colorSelectedFg: pullForward($colorBodyFg, 20%);
 
 // Object labels
 $objectLabelTypeIconOpacity: 0.7;
-$objectLabelNameFilter: brightness(1.3);
+$objectLabelNameColorFg: lighten($colorBodyFg, 10%);
 
 // Layout
 $shellMainPad: 4px 0;
@@ -118,11 +160,11 @@ $colorAlertFg: #fff;
 $colorError: #ff3c00;
 $colorErrorFg: #fff;
 $colorWarningHi: #990000;
-$colorWarningHiFg: #FF9594;
+$colorWarningHiFg: #ff9594;
 $colorWarningLo: #ff9900;
 $colorWarningLoFg: #523400;
 $colorDiagnostic: #a4b442;
-$colorDiagnosticFg: #39461A;
+$colorDiagnosticFg: #39461a;
 $colorCommand: #3693bd;
 $colorCommandFg: #fff;
 $colorInfo: #2294a2;
@@ -137,38 +179,51 @@ $colorFilter: $colorFilterFg; // Standalone against $colorBodyBg
 $colorPausedBg: #ff9900;
 $colorPausedFg: #333;
 
-// Base variations
-$colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
-$colorBodyBgSubtleHov: pushBack($colorKey, 50%);
-$colorKeySubtle: pushBack($colorKey, 10%);
-
 // Time Colors
-$colorTime: #618cff;
-$colorTimeBg: $colorTime;
-$colorTimeFg: pullForward($colorTimeBg, 30%);
-$colorTimeHov: pullForward($colorTime, 10%);
-$colorTimeSubtle: pushBack($colorTime, 20%);
+$colorTimeCommonFg: #eee;
+$colorTimeFixed: #59554c;
+$colorTimeFixedBg: $colorTimeFixed;
+$colorTimeFixedFg: #eee;
+$colorTimeFixedFgSubtle: #b2aa98;
+$colorTimeFixedHov: pullForward($colorTimeFixed, 10%);
+$colorTimeFixedSubtle: pushBack($colorTimeFixed, 20%);
+$colorTimeFixedBtnBg: pullForward($colorTimeFixed, 5%);
+$colorTimeFixedBtnFg: $colorTimeFixedFgSubtle;
+$colorTimeFixedBtnBgMajor: #a09375;
+$colorTimeFixedBtnFgMajor: #fff;
+$colorTimeRealtime: #445890;
+$colorTimeRealtimeBg: $colorTimeRealtime;
+$colorTimeRealtimeFg: #eee;
+$colorTimeRealtimeFgSubtle: #88b0ff;
+$colorTimeRealtimeHov: pullForward($colorTimeRealtime, 10%);
+$colorTimeRealtimeSubtle: pushBack($colorTimeRealtime, 20%);
+$colorTimeRealtimeBtnBg: pullForward($colorTimeRealtime, 5%);
+$colorTimeRealtimeBtnFg: $colorTimeRealtimeFgSubtle;
+$colorTimeRealtimeBtnBgMajor: #588ffa;
+$colorTimeRealtimeBtnFgMajor: #fff;
 $colorTOI: $colorBodyFg; // was $timeControllerToiLineColor
-$colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
+$colorTOIHov: $colorTimeRealtime; // was $timeControllerToiLineColorHov
 $timeConductorAxisHoverFilter: brightness(1.2);
 $timeConductorActiveBg: $colorKey;
 $timeConductorActivePanBg: #226074;
 
-/************************************************** BROWSING */
+// Browse
 $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);
+
+// Missing Items
 $filterItemMissing: contrast(0.2);
 $opacityMissing: 0.5;
 $borderMissing: 1px dashed $colorAlert !important;
 
-/************************************************** EDITING */
+// Edit
 $editUIColor: $uiColor; // Base color
 $editUIColorBg: $editUIColor;
 $editUIColorFg: #fff;
-$editUIColorHov: pullForward(saturate($uiColor, 10%), 20%); // Hover color when $editUIColor is applied as a base color
+$editUIColorHov: pullForward(saturate($uiColor, 10%), 10%); // Hover color when $editUIColor is applied as a base color
 $editUIBaseColor: #344b8d; // Base color, toolbar bg
 $editUIBaseColorHov: pullForward($editUIBaseColor, 20%);
 $editUIBaseColorFg: #ffffff; // Toolbar button icon colors, etc.
@@ -182,19 +237,19 @@ $editFrameColor: $browseFrameColor; // Solid or dotted border applied to non-sel
 $editFrameBorder: 1px dotted $editFrameColor;
 $editFrameColorHov: $editUIColor; // Solid border hover on frames; hover should not be applied to selected objects
 $editFrameBorderHov: 1px solid $editFrameColorHov; // Hover on selectable frames
-$editFrameColorSelected: #ccc; // Border of selected frames
+$editFrameColorSelected: #ffefc2; // Border of selected frames while editing
 $editFrameColorHandleBg: $colorBodyBg; // Resize handle 'offset' color to make handle standout
 $editFrameColorHandleFg: $editFrameColorSelected; // Resize handle main color
 $editFrameSelectedShdw: rgba(black, 0.4) 0 1px 5px 1px;
-$editFrameSelectedBorder: 1px solid $editFrameColorHov; // Selected frame element
 $editFrameMovebarColorBg: $editFrameColor; // Movebar bg color
-$editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%);  // Grippy lines, container size text
+$editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%); // Grippy lines, container size text
 $editFrameHovMovebarColorBg: pullForward($editFrameMovebarColorBg, 10%); // Hover style
 $editFrameHovMovebarColorFg: pullForward($editFrameMovebarColorFg, 10%);
 $editFrameSelectedMovebarColorBg: pullForward($editFrameMovebarColorBg, 15%); // Selected style
 $editFrameSelectedMovebarColorFg: pullForward($editFrameMovebarColorFg, 15%);
 $editFrameMovebarH: 10px; // Height of move bar in layout frame
 $editMarqueeBorder: 1px dashed $editFrameColorSelected;
+$editFrameSelectedBorder: $editMarqueeBorder; // Selected frame element
 
 // Icons
 $colorIconAlias: #4af6f3;
@@ -206,6 +261,7 @@ $colorTabsHolderBg: rgba(black, 0.2);
 // Buttons and Controls
 $colorBtnBg: pullForward($colorBodyBg, 10%);
 $colorBtnBgHov: pullForward($colorBtnBg, 10%);
+$shdwBtnHov: inset rgba(white, 10%) 0 0 0 100px;
 $colorBtnFg: pullForward($colorBodyFg, 10%);
 $colorBtnReverseFg: pullForward($colorBtnFg, 10%);
 $colorBtnReverseBg: pullForward($colorBtnBg, 10%);
@@ -244,12 +300,13 @@ $controlDisabledOpacity: 0.2;
 $colorMenuBg: $colorBodyBg;
 $colorMenuFg: $colorBodyFg;
 $colorMenuIc: $colorKey;
-$filterMenu:  brightness(1.4);
+$filterMenu: brightness(1.4);
 $colorMenuHovBg: rgba($colorKey, 0.5);
 $colorMenuHovFg: $colorBodyFgEm;
 $colorMenuHovIc: $colorMenuHovFg;
 $colorMenuElementHilite: pullForward($colorMenuBg, 10%);
-$shdwMenu: rgba(black, 0.5) 0 1px 5px;
+$shdwMenu: rgba(black, 0.8) 0 2px 10px;
+$shdwMenuInner: inset 0 0 0 1px rgba(white, 0.2);
 $shdwMenuText: none;
 $menuItemPad: $interiorMargin, floor($interiorMargin * 1.25);
 
@@ -272,8 +329,8 @@ $colorFormLines: rgba(#000, 0.1);
 $colorFormSectionHeaderBg: rgba(#000, 0.1);
 $colorFormSectionHeaderFg: rgba($colorBodyFg, 0.8);
 $colorInputBg: rgba(black, 0.2);
+$colorInputBgHov: rgba(black, 0.1);
 $colorInputFg: $colorBodyFg;
-$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
 $colorFormText: pushBack($colorBodyFg, 10%);
 $colorInputIcon: pushBack($colorBodyFg, 25%);
 $colorFieldHint: pullForward($colorBodyFg, 40%);
@@ -293,6 +350,13 @@ $colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
 $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
+// Tabs
+$colorTabBg: pullForward($colorBodyBg, 5%);
+$colorTabFg: pullForward($colorBtnFg, 10%);
+$colorTabCurrentBg: pullForward($colorTabBg, 10%);
+$colorTabCurrentFg: pullForward($colorTabFg, 10%);
+$colorTabsBaseline: $colorTabCurrentBg;
+
 // Overlay
 $colorOvrBlocker: rgba(black, 0.7);
 $overlayCr: $interiorMarginLg;
@@ -309,26 +373,36 @@ $colorIndicatorMenuFg: $colorHeadFg;
 $colorIndicatorMenuFgHov: pullForward($colorHeadFg, 10%);
 
 // Staleness
-$colorTelemFresh: pullForward($colorBodyFg, 20%);
-$colorTelemStale: pushBack($colorBodyFg, 20%);
+$colorTelemStale: cyan;
+$colorTelemStaleFg: #002a2a;
 $styleTelemStale: italic;
 
 // Limits
-$colorLimitYellowBg: #B18B05;
-$colorLimitYellowFg: #FEEEB5;
-$colorLimitYellowIc: #FDC707;
-$colorLimitOrangeBg: #B36B00;
-$colorLimitOrangeFg: #FFE0B2;
+$colorLimitYellowBg: #b18b05;
+$colorLimitYellowFg: #feeeb5;
+$colorLimitYellowIc: #fdc707;
+$colorLimitOrangeBg: #b36b00;
+$colorLimitOrangeFg: #ffe0b2;
 $colorLimitOrangeIc: #ff9900;
 $colorLimitRedBg: #940000;
 $colorLimitRedFg: #ffa489;
 $colorLimitRedIc: #ff4222;
-$colorLimitPurpleBg: #891BB3;
-$colorLimitPurpleFg: #EDBEFF;
+$colorLimitPurpleBg: #891bb3;
+$colorLimitPurpleFg: #edbeff;
 $colorLimitPurpleIc: #c327ff;
-$colorLimitCyanBg: #4BA6B3;
-$colorLimitCyanFg: #D3FAFF;
-$colorLimitCyanIc: #6BEDFF;
+$colorLimitCyanBg: #4ba6b3;
+$colorLimitCyanFg: #d3faff;
+$colorLimitCyanIc: #6bedff;
+
+// Events
+$colorEventPurpleFg: #aB8fff;
+$colorEventRedFg: #ff9999;
+$colorEventOrangeFg: #ff8800;
+$colorEventYellowFg: #ffdb63;
+$colorEventPurpleBg: #31204a;
+$colorEventRedBg: #3c1616;
+$colorEventOrangeBg: #3e2a13;
+$colorEventYellowBg: #3e3316;
 
 // Bubble colors
 $colorInfoBubbleBg: #dddddd;
@@ -349,7 +423,7 @@ $shdwItemText: none;
 $colorTabBorder: pullForward($colorBodyBg, 10%);
 $colorTabBodyBg: $colorBodyBg;
 $colorTabBodyFg: pullForward($colorBodyFg, 20%);
-$colorTabHeaderBg: rgba($colorBodyFg, 0.15);
+$colorTabHeaderBg: #575757;
 $colorTabHeaderFg: $colorBodyFg;
 $colorTabHeaderBorder: $colorBodyBg;
 $colorTabGroupHeaderBg: pullForward($colorBodyBg, 5%);
@@ -370,13 +444,41 @@ $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 $legendTableHeadBg: rgba($colorBodyFg, 0.15);
 $colorPlotLimitLineBg: rgba($colorBodyBg, 0.2);
 
+// Gauges
+$colorGaugeBg: pullForward($colorBodyBg, 5%); // Gauge radial area background, meter background
+$colorGaugeValue: rgba(#fff, 0.3); // Gauge value graphic (radial sweep, bar) color
+$colorGaugeTextValue: #fff; // Radial gauge text value
+$colorGaugeMeterTextValue: $colorGaugeTextValue; // Meter text value, overlaid on value bar
+$colorGaugeRange: $colorBodyFg; // Range text color
+$colorGaugeLimitHigh: rgba($colorLimitRedBg, 0.4);
+$colorGaugeLimitLow: $colorGaugeLimitHigh;
+$transitionTimeGauge: 150ms; // CSS transition time used to smooth needle gauge and meter value transitions
+$marginGaugeMeterValue: 10%; // Margin between meter value bar and bounds edges
+
+// Time Strip and Lists
+$colorPastBg: #444;
+$colorPastFg: pushBack($colorBodyFg, 10%);
+$colorPastFgEm: $colorBodyFg;
+$colorCurrentBg: #666;
+$colorCurrentFg: $colorBodyFgEm;
+$colorCurrentFgEm: $colorBodyFgEm;
+$colorCurrentBorder: $colorBodyBg;
+$colorFutureBg: $colorPastBg;
+$colorFutureFg: $colorCurrentFg;
+$colorFutureFgEm: $colorCurrentFgEm;
+$colorFutureBorder: $colorCurrentBorder;
+$colorInProgressBg: $colorTimeRealtimeBg;
+$colorInProgressFg: $colorTimeRealtimeFgSubtle;
+$colorInProgressFgEm: $colorTimeRealtimeFg;
+$colorGanttSelectedBorder: rgba(#fff, 0.3);
+
 // Tree
 $colorTreeBg: transparent;
 $colorItemTreeHoverBg: rgba(#fff, 0.03);
 $colorItemTreeHoverFg: #fff;
 $colorItemTreeIcon: $colorKey; // Used
 $colorItemTreeIconHover: $colorItemTreeIcon; // Used
-$colorItemTreeFg: $colorBodyFg;
+$colorItemTreeFg: $colorA;
 $colorItemTreeSelectedBg: $colorSelectedBg;
 $colorItemTreeSelectedFg: $colorItemTreeHoverFg;
 $filterItemTreeSelected: $filterHov;
@@ -386,6 +488,7 @@ $colorItemTreeEditingFg: $editUIColor;
 $colorItemTreeEditingIcon: $editUIColor;
 $colorItemTreeVC: $colorDisclosureCtrl;
 $colorItemTreeVCHover: $colorDisclosureCtrlHov;
+$colorItemTreeNewNode: rgba($colorBodyFg, 0.7);
 $shdwItemTreeIcon: none;
 
 // Layout frame controls
@@ -441,46 +544,14 @@ $transInTime: 50ms;
 $transOutTime: 250ms;
 $transIn: all $transInTime ease-in-out;
 $transOut: all $transOutTime ease-in-out;
-$transInBounce: all 200ms cubic-bezier(.47,.01,.25,1.5);
-$transInBounceBig: all 300ms cubic-bezier(.2,1.6,.6,3);
+$transInTransform: transform $transInTime ease-in-out;
+$transOutTransform: transform $transOutTime ease-in-out;
+$transInBounce: all 200ms cubic-bezier(0.47, 0.01, 0.25, 1.5);
+$transInBounceBig: all 300ms cubic-bezier(0.2, 1.6, 0.6, 3);
 
-// Discrete items, like Notebook entries, Widget rules
+// Discrete items
 $createBtnTextTransform: uppercase;
-$colorDiscreteItemBg: rgba($colorBodyFg,0.1);
-$colorDiscreteItemCurrentBg: rgba($colorOk,0.3);
-
-@mixin discreteItem() {
-    background: rgba($colorBodyFg,0.1);
-    border: none;
-    border-radius: $controlCr;
-
-    &--current-match {
-        background: $colorDiscreteItemCurrentBg;
-    }
-}
-
-@mixin discreteItemInnerElem() {
-    border: 1px solid rgba(#fff, 0.1);
-    border-radius: $controlCr;
-}
-
-@mixin themedButton($c: $colorBtnBg) {
-    background: linear-gradient(pullForward($c, 5%), $c);
-    box-shadow: rgba(black, 0.5) 0 0.5px 2px;
-}
-
-/**************************************************** OVERRIDES */
-.c-frame {
-    &:not(.no-frame) {
-        $bc: #666;
-        $bLR: 3px solid transparent;
-        $br: 20px;
-        background: none !important;
-        border-radius: $br;
-        border-top: 4px solid $bc !important;
-        border-bottom: 2px solid $bc !important;
-        border-left: $bLR !important;;
-        border-right: $bLR !important;;
-        padding: 5px 10px 10px 10px !important;
-    }
-}
+$colorDiscreteItemBg: rgba($colorBodyFg, 0.1);
+$colorDiscreteItemBgHov: rgba($colorBodyFg, 0.2);
+$colorDiscreteItemCurrentBg: rgba($colorOk, 0.3);
+$scrollContainer: $colorBodyBg;
diff --git a/src/styles/_constants-mobile.scss b/src/styles/_constants-mobile.scss
index 9eb9692f6b5..5b4f2469a6e 100644
--- a/src/styles/_constants-mobile.scss
+++ b/src/styles/_constants-mobile.scss
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,14 +21,16 @@
  *****************************************************************************/
 
 /* REQUIRES /platform/commonUI/general/res/sass/_constants.scss */
+@use 'sass:math';
 
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 $mobileListIconSize: 30px;
 $mobileTitleDescH: 35px;
 $mobileOverlayMargin: 20px;
 $mobileMenuIconD: 25px;
-$phoneItemH: floor($gridItemMobile / 4);
-$tabletItemH: floor($gridItemMobile / 3);
+$phoneItemH: floor(math.div($gridItemMobile, 4));
+$tabletItemH: floor(math.div($gridItemMobile, 3));
+$shellTimeConductorMobileH: 90px;
 
 /************************** MOBILE TREE MENU DIMENSIONS */
 $mobileTreeItemH: 35px;
@@ -43,23 +45,23 @@ $tabMaxW: 1024px;
 $desktopMinW: 1025px;
 
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-$screenPortrait: "(orientation: portrait)";
-$screenLandscape: "(orientation: landscape)";
+$screenPortrait: '(orientation: portrait)';
+$screenLandscape: '(orientation: landscape)';
 
 //$mobileDevice: "(max-device-width: #{$tabMaxW})";
 
-$phoneCheck: "(max-device-width: #{$phoMaxW})";
-$tabletCheck: "(min-device-width: #{$tabMinW}) and (max-device-width: #{$tabMaxW})";
-$desktopCheck: "(min-device-width: #{$desktopMinW}) and (-webkit-min-device-pixel-ratio: 1)";
+$phoneCheck: '(max-device-width: #{$phoMaxW})';
+$tabletCheck: '(min-device-width: #{$tabMinW}) and (max-device-width: #{$tabMaxW})';
+$desktopCheck: '(min-device-width: #{$desktopMinW}) and (-webkit-min-device-pixel-ratio: 1)';
 
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-$phonePortrait: "only screen and #{$screenPortrait} and #{$phoneCheck}";
-$phoneLandscape: "only screen and #{$screenLandscape} and #{$phoneCheck}";
+$phonePortrait: 'only screen and #{$screenPortrait} and #{$phoneCheck}';
+$phoneLandscape: 'only screen and #{$screenLandscape} and #{$phoneCheck}';
 
-$tabletPortrait: "only screen and #{$screenPortrait} and #{$tabletCheck}";
-$tabletLandscape: "only screen and #{$screenLandscape} and #{$tabletCheck}";
+$tabletPortrait: 'only screen and #{$screenPortrait} and #{$tabletCheck}';
+$tabletLandscape: 'only screen and #{$screenLandscape} and #{$tabletCheck}';
 
-$desktop: "only screen and #{$desktopCheck}";
+$desktop: 'only screen and #{$desktopCheck}';
 
 /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
 $proporMenuOnly: 90%;
@@ -67,81 +69,81 @@ $proporMenuWithView: 40%;
 
 // Phones in any orientation
 @mixin phone {
-    @media #{$phonePortrait},
+  @media #{$phonePortrait},
     #{$phoneLandscape} {
-        @content
-    }
+    @content;
+  }
 }
 
 //Phones in portrait orientation
 @mixin phonePortrait {
-    @media #{$phonePortrait} {
-        @content
-    }
+  @media #{$phonePortrait} {
+    @content;
+  }
 }
 
 // Phones in landscape orientation
 @mixin phoneLandscape {
-    @media #{$phoneLandscape} {
-        @content
-    }
+  @media #{$phoneLandscape} {
+    @content;
+  }
 }
 
 // Tablets in any orientation
 @mixin tablet {
-    @media #{$tabletPortrait},
+  @media #{$tabletPortrait},
     #{$tabletLandscape} {
-        @content
-    }
+    @content;
+  }
 }
 
 // Tablets in portrait orientation
 @mixin tabletPortrait {
-    @media #{$tabletPortrait} {
-        @content
-    }
+  @media #{$tabletPortrait} {
+    @content;
+  }
 }
 
 // Tablets in landscape orientation
 @mixin tabletLandscape {
-    @media #{$tabletLandscape} {
-        @content
-    }
+  @media #{$tabletLandscape} {
+    @content;
+  }
 }
 
 // Phones and tablets in any orientation
 @mixin phoneandtablet {
-    @media #{$phonePortrait},
+  @media #{$phonePortrait},
     #{$phoneLandscape},
     #{$tabletPortrait},
     #{$tabletLandscape} {
-        @content
-    }
+    @content;
+  }
 }
 
 // Desktop monitors in any orientation
 @mixin desktopandtablet {
-    // Keeping only for legacy - should not be used moving forward
-    // Use body.desktop, body.tablet instead.
-    @media #{$tabletPortrait},
+  // Keeping only for legacy - should not be used moving forward
+  // Use body.desktop, body.tablet instead.
+  @media #{$tabletPortrait},
     #{$tabletLandscape},
     #{$desktop} {
-        @content
-    }
+    @content;
+  }
 }
 
 // Desktop monitors in any orientation
 @mixin desktop {
-    // Keeping only for legacy - should not be used moving forward
-    // Use body.desktop instead.
-    @media #{$desktop} {
-        @content
-    }
+  // Keeping only for legacy - should not be used moving forward
+  // Use body.desktop instead.
+  @media #{$desktop} {
+    @content;
+  }
 }
 
 // Transition used for the slide menu
 @mixin slMenuTransitions {
-    @include transition-duration(.35s);
-    transition-timing-function: ease;
-    backface-visibility: hidden;
+  @include transition-duration(0.35s);
+  transition-timing-function: ease;
+  backface-visibility: hidden;
 }
diff --git a/src/styles/_constants-snow.scss b/src/styles/_constants-snow.scss
index 8e59e3444ce..5b640c39b11 100644
--- a/src/styles/_constants-snow.scss
+++ b/src/styles/_constants-snow.scss
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,42 +20,64 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-/****************************************************** SNOW THEME CONSTANTS */
-
+/****************************************************** SNOW THEME */
 // Fonts
-$heroFont: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$heroFont: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $headerFont: $heroFont;
 $bodyFont: $heroFont;
 
 @mixin heroFont($size: 1em) {
-    font-family: $heroFont;
-    font-size: $size;
+  font-family: $heroFont;
+  font-size: $size;
 }
 
 @mixin headerFont($size: 1em) {
-    font-family: $headerFont;
-    font-size: $size;
+  font-family: $headerFont;
+  font-size: $size;
 }
 
 @mixin bodyFont($size: 1em) {
-    font-family: $bodyFont;
-    font-size: $size;
+  font-family: $bodyFont;
+  font-size: $size;
+}
+
+@mixin discreteItem() {
+  background: $colorDiscreteItemBg;
+  border: 1px solid $colorInteriorBorder;
+  border-radius: $controlCr;
+
+  &--current-match {
+    background: $colorDiscreteItemCurrentBg;
+  }
+
+  .c-input-inline:hover {
+    background: $colorBodyBg;
+  }
+}
+
+@mixin discreteItemInnerElem() {
+  border: 1px solid $colorBodyBg;
+  border-radius: $controlCr;
+}
+
+@mixin themedButton($c: $colorBtnBg) {
+  background: $c;
 }
 
 // Functions
 @function buttonBg($c: $colorBtnBg) {
-    @return $c;
+  @return $c;
 }
 
 @function pullForward($val, $amt) {
-    @return darken($val, $amt);
+  @return darken($val, $amt);
 }
 
 @function pushBack($val, $amt) {
-    @return lighten($val, $amt);
+  @return lighten($val, $amt);
 }
 
-// General
+/**************************************************** CONSTANTS */
 $fontBaseSize: 12px;
 $smallCr: 2px;
 $controlCr: 3px;
@@ -65,28 +87,35 @@ $shdwBtnsOverlay: none;
 
 // Base colors
 $colorBodyBg: #fcfcfc;
+$colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
+$colorBodyBgSubtleHov: pullForward($colorBodyBg, 10%);
 $colorBodyFg: #666;
+$colorBodyFgSubtle: #888;
 $colorBodyFgEm: #333;
 $colorGenBg: #fff;
 $colorHeadBg: #eee;
 $colorHeadFg: $colorBodyFg;
 $colorKey: #0099cc;
+$colorKeyBg: #007fad; // Darker version of colorKey for use in major buttons
 $colorKeyFg: #fff;
-$colorKeyHov: #00c0f6;
+$colorKeyHov: lighten($colorKey, 10%); //#00c0f6;
+$colorKeyBgHov: lighten($colorKeyBg, 10%);
 $colorKeyFilter: invert(37%) sepia(100%) saturate(686%) hue-rotate(157deg) brightness(102%) contrast(102%);
 $colorKeyFilterHov: invert(69%) sepia(87%) saturate(3243%) hue-rotate(151deg) brightness(97%) contrast(102%);
 $colorKeySelectedBg: $colorKey;
+$colorKeySubtle: pushBack($colorKey, 20%);
 $uiColor: #289fec; // Resize bars, splitter bars, etc.
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
 $colorA: $colorBodyFg;
 $colorAHov: $colorKey;
 $filterHov: hue-rotate(-10deg) brightness(0.8) contrast(2); // Tree, location items
+$filterHovSubtle: hue-rotate(-8deg) brightness(0.5) contrast(1.2);
 $colorSelectedBg: pushBack($colorKey, 40%);
 $colorSelectedFg: pullForward($colorBodyFg, 10%);
 
 // Object labels
 $objectLabelTypeIconOpacity: 0.5;
-$objectLabelNameFilter: brightness(0.9);
+$objectLabelNameColorFg: darken($colorBodyFg, 10%);
 
 // Layout
 $shellMainPad: 4px 0;
@@ -114,11 +143,11 @@ $colorAlertFg: #fff;
 $colorError: #ff3c00;
 $colorErrorFg: #fff;
 $colorWarningHi: #990000;
-$colorWarningHiFg: #FF9594;
+$colorWarningHiFg: #ff9594;
 $colorWarningLo: #ff9900;
 $colorWarningLoFg: #523400;
 $colorDiagnostic: #a4b442;
-$colorDiagnosticFg: #39461A;
+$colorDiagnosticFg: #39461a;
 $colorCommand: #3693bd;
 $colorCommandFg: #fff;
 $colorInfo: #2294a2;
@@ -133,38 +162,51 @@ $colorFilter: $colorFilterBg; // Standalone against $colorBodyBg
 $colorPausedBg: #ff9900;
 $colorPausedFg: #fff;
 
-// Base variations
-$colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
-$colorBodyBgSubtleHov: pushBack($colorKey, 50%);
-$colorKeySubtle: pushBack($colorKey, 20%);
-
 // Time Colors
-$colorTime: #618cff;
-$colorTimeBg: $colorTime;
-$colorTimeFg: $colorBodyBg;
-$colorTimeHov: pushBack($colorTime, 5%);
-$colorTimeSubtle: pushBack($colorTime, 20%);
+$colorTimeCommonFg: #eee;
+$colorTimeFixed: #59554c;
+$colorTimeFixedBg: $colorTimeFixed;
+$colorTimeFixedFg: #eee;
+$colorTimeFixedFgSubtle: #b2aa98;
+$colorTimeFixedHov: pullForward($colorTimeFixed, 10%);
+$colorTimeFixedSubtle: pushBack($colorTimeFixed, 20%);
+$colorTimeFixedBtnBg: pullForward($colorTimeFixed, 5%);
+$colorTimeFixedBtnFg: $colorTimeFixedFgSubtle;
+$colorTimeFixedBtnBgMajor: #a09375;
+$colorTimeFixedBtnFgMajor: #fff;
+$colorTimeRealtime: #445890;
+$colorTimeRealtimeBg: $colorTimeRealtime;
+$colorTimeRealtimeFg: #fff;
+$colorTimeRealtimeFgSubtle: #eee;
+$colorTimeRealtimeHov: pullForward($colorTimeRealtime, 10%);
+$colorTimeRealtimeSubtle: pushBack($colorTimeRealtime, 20%);
+$colorTimeRealtimeBtnBg: pullForward($colorTimeRealtime, 5%);
+$colorTimeRealtimeBtnFg: $colorTimeRealtimeFgSubtle;
+$colorTimeRealtimeBtnBgMajor: #588ffa;
+$colorTimeRealtimeBtnFgMajor: #fff;
 $colorTOI: $colorBodyFg; // was $timeControllerToiLineColor
-$colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
+$colorTOIHov: $colorTimeRealtime; // was $timeControllerToiLineColorHov
 $timeConductorAxisHoverFilter: brightness(0.8);
 $timeConductorActiveBg: $colorKey;
-$timeConductorActivePanBg: #A0CDE1;
+$timeConductorActivePanBg: #a0cde1;
 
-/************************************************** BROWSING */
+// Browse
 $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);
+
+// Missing Items
 $filterItemMissing: contrast(0.2);
 $opacityMissing: 0.4;
 $borderMissing: 1px dashed $colorAlert !important;
 
-/************************************************** EDITING */
+// Edit
 $editUIColor: $uiColor; // Base color
 $editUIColorBg: $editUIColor;
 $editUIColorFg: #fff;
-$editUIColorHov: pullForward(saturate($uiColor, 10%), 20%); // Hover color when $editUIColor is applied as a base color
+$editUIColorHov: pullForward(saturate($uiColor, 10%),20%); // Hover color when $editUIColor is applied as a base color
 $editUIBaseColor: #cae1ff; // Base color, toolbar bg
 $editUIBaseColorHov: pushBack($editUIBaseColor, 20%);
 $editUIBaseColorFg: #4c4c4c; // Toolbar button icon colors, etc.
@@ -178,19 +220,19 @@ $editFrameColor: $browseFrameColor; // Solid or dotted border applied to non-sel
 $editFrameBorder: 1px dotted $editFrameColor;
 $editFrameColorHov: $editUIColor; // Solid border hover on frames; hover should not be applied to selected objects
 $editFrameBorderHov: 1px solid $editFrameColorHov; // Hover on selectable frames
-$editFrameColorSelected: #333; // Border of selected frames
+$editFrameColorSelected: #ff7c00; // Border of selected frames
 $editFrameColorHandleBg: $colorBodyBg; // Resize handle 'offset' color to make handle standout
 $editFrameColorHandleFg: $editFrameColorSelected; // Resize handle main color
 $editFrameSelectedShdw: rgba(black, 0.5) 0 1px 5px 2px;
-$editFrameSelectedBorder: 1px dashed $editFrameColorSelected; // Selected frame element
 $editFrameMovebarColorBg: $editFrameColor; // Movebar bg color
-$editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%);  // Grippy lines, container size text
+$editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%); // Grippy lines, container size text
 $editFrameHovMovebarColorBg: pullForward($editFrameMovebarColorBg, 10%); // Hover style
 $editFrameHovMovebarColorFg: pullForward($editFrameMovebarColorFg, 10%);
 $editFrameSelectedMovebarColorBg: pullForward($editFrameMovebarColorBg, 15%); // Selected style
 $editFrameSelectedMovebarColorFg: pullForward($editFrameMovebarColorFg, 15%);
 $editFrameMovebarH: 10px; // Height of move bar in layout frame
 $editMarqueeBorder: 1px dashed $editFrameColorSelected;
+$editFrameSelectedBorder: 1px dashed $editMarqueeBorder; // Selected frame element
 
 // Icons
 $colorIconAlias: #4af6f3;
@@ -202,12 +244,13 @@ $colorTabsHolderBg: rgba($colorBodyFg, 0.2);
 // Buttons and Controls
 $colorBtnBg: #aaa;
 $colorBtnBgHov: pullForward($colorBtnBg, 10%);
+$shdwBtnHov: inset rgba(white, 10%) 0 0 0 20px;
 $colorBtnFg: #fff;
 $colorBtnReverseFg: $colorBodyBg;
 $colorBtnReverseBg: $colorBodyFg;
 $colorBtnFgHov: $colorBtnFg;
-$colorBtnMajorBg: $colorKey;
-$colorBtnMajorBgHov: $colorKeyHov;
+$colorBtnMajorBg: $colorKeyBg;
+$colorBtnMajorBgHov: $colorKeyBgHov;
 $colorBtnMajorFg: $colorKeyFg;
 $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
 $colorBtnCautionBg: #f16f6f;
@@ -245,7 +288,8 @@ $colorMenuHovBg: $colorMenuIc;
 $colorMenuHovFg: $colorMenuBg;
 $colorMenuHovIc: $colorMenuBg;
 $colorMenuElementHilite: darken($colorMenuBg, 10%);
-$shdwMenu: rgba(black, 0.5) 0 1px 5px;
+$shdwMenu: rgba(black, 0.8) 0 2px 10px;
+$shdwMenuInner: none;
 $shdwMenuText: none;
 $menuItemPad: $interiorMargin, floor($interiorMargin * 1.25);
 
@@ -264,16 +308,16 @@ $colorFormError: #990000;
 $colorFormInvalid: #ff2200;
 $colorFormFieldErrorBg: $colorFormError;
 $colorFormFieldErrorFg: rgba(#fff, 0.6);
-$colorFormLines: rgba(#000, 0.1);
+$colorFormLines: rgba(#000, 0.2);
 $colorFormSectionHeaderBg: rgba(#000, 0.05);
 $colorFormSectionHeaderFg: rgba($colorBodyFg, 0.5);
 $colorInputBg: $colorGenBg;
+$colorInputBgHov: rgba($colorGenBg, 0.7);
 $colorInputFg: $colorBodyFg;
-$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
 $colorFormText: pushBack($colorBodyFg, 10%);
 $colorInputIcon: pushBack($colorBodyFg, 25%);
 $colorFieldHint: pullForward($colorBodyFg, 40%);
-$shdwInput: inset rgba(black, 0.5) 0 0 2px;
+$shdwInput: inset rgba(black, 0.4) 0 0 2px 1px;
 $shdwInputHov: inset rgba(black, 0.8) 0 0 2px;
 $shdwInputFoc: inset rgba(black, 0.8) 0 0.25px 3px;
 $formTBPad: $interiorMargin;
@@ -289,6 +333,13 @@ $colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
 $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
+// Tabs
+$colorTabBg: pullForward($colorBodyBg, 15%);
+$colorTabFg: pullForward($colorTabBg, 60%);
+$colorTabCurrentBg: $colorBodyFg; //pullForward($colorTabBg, 10%);
+$colorTabCurrentFg: $colorBodyBg; //pullForward($colorTabFg, 10%);
+$colorTabsBaseline: $colorTabCurrentBg;
+
 // Overlay
 $colorOvrBlocker: rgba(black, 0.7);
 $overlayCr: $interiorMarginLg;
@@ -305,27 +356,37 @@ $colorIndicatorMenuFg: $colorHeadFg;
 $colorIndicatorMenuFgHov: pullForward($colorHeadFg, 10%);
 
 // Staleness
-$colorTelemFresh: pullForward($colorBodyFg, 20%);
-$colorTelemStale: pushBack($colorBodyFg, 20%);
+$colorTelemStale: #00c9c9;
+$colorTelemStaleFg: #002a2a;
 $styleTelemStale: italic;
 
 // Limits
 $colorLimitYellowBg: #ffe64d;
 $colorLimitYellowFg: #7f4f20;
 $colorLimitYellowIc: #e7a115;
-$colorLimitOrangeBg: #B36B00;
-$colorLimitOrangeFg: #FFE0B2;
+$colorLimitOrangeBg: #b36b00;
+$colorLimitOrangeFg: #ffe0b2;
 $colorLimitOrangeIc: #ff9900;
 $colorLimitRedBg: #ff0000;
 $colorLimitRedFg: #fff;
 $colorLimitRedIc: #ffa99a;
-$colorLimitPurpleBg: #891BB3;
-$colorLimitPurpleFg: #EDBEFF;
+$colorLimitPurpleBg: #891bb3;
+$colorLimitPurpleFg: #edbeff;
 $colorLimitPurpleIc: #c327ff;
-$colorLimitCyanBg: #4BA6B3;
-$colorLimitCyanFg: #D3FAFF;
+$colorLimitCyanBg: #4ba6b3;
+$colorLimitCyanFg: #d3faff;
 $colorLimitCyanIc: #1795c0;
 
+// Events
+$colorEventPurpleFg: #6433ff;
+$colorEventRedFg: #aa0000;
+$colorEventOrangeFg: #b84900;
+$colorEventYellowFg: #867109;
+$colorEventPurpleBg: #ebe7fb;
+$colorEventRedBg: #fcefef;
+$colorEventOrangeBg: #ffece3;
+$colorEventYellowBg: #fdf8eb;
+
 // Bubble colors
 $colorInfoBubbleBg: $colorMenuBg;
 $colorInfoBubbleFg: #666;
@@ -345,7 +406,7 @@ $shdwItemText: none;
 $colorTabBorder: pullForward($colorBodyBg, 10%);
 $colorTabBodyBg: $colorBodyBg;
 $colorTabBodyFg: pullForward($colorBodyFg, 20%);
-$colorTabHeaderBg: rgba($colorBodyFg, 0.2);
+$colorTabHeaderBg: #e2e2e2;
 $colorTabHeaderFg: $colorBodyFg;
 $colorTabHeaderBorder: $colorBodyBg;
 $colorTabGroupHeaderBg: pullForward($colorBodyBg, 5%);
@@ -366,6 +427,34 @@ $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 $legendTableHeadBg: rgba($colorBodyFg, 0.15);
 $colorPlotLimitLineBg: rgba($colorBodyBg, 0.4);
 
+// Gauges
+$colorGaugeBg: pullForward($colorBodyBg, 20%); // Gauge radial area background, meter background
+$colorGaugeValue: rgba(#000, 0.3); // Gauge value graphic (radial sweep, bar) color
+$colorGaugeTextValue: pullForward($colorBodyFg, 20%); // Radial gauge text value
+$colorGaugeMeterTextValue: $colorGaugeTextValue; // Meter text value, overlaid on value bar
+$colorGaugeRange: $colorBodyFg; // Range text color
+$colorGaugeLimitHigh: rgba($colorLimitRedBg, 0.2);
+$colorGaugeLimitLow: $colorGaugeLimitHigh;
+$transitionTimeGauge: 150ms; // CSS transition time used to smooth needle gauge and meter value transitions
+$marginGaugeMeterValue: 10%; // Margin between meter value bar and bounds edges
+
+// Time Strip and Lists
+$colorPastBg: #f0f0f0;
+$colorPastFg: #999;
+$colorPastFgEm: #666;
+$colorCurrentBg: #ddd;
+$colorCurrentFg: #666;
+$colorCurrentFgEm: #000;
+$colorCurrentBorder: $colorBodyBg;
+$colorFutureBg: #eaeaea;
+$colorFutureFg: $colorCurrentFg;
+$colorFutureFgEm: $colorCurrentFgEm;
+$colorFutureBorder: $colorCurrentBorder;
+$colorInProgressBg: #b1e8ff;
+$colorInProgressFg: $colorCurrentFg;
+$colorInProgressFgEm: $colorCurrentFgEm;
+$colorGanttSelectedBorder: #fff;
+
 // Tree
 $colorTreeBg: transparent;
 $colorItemTreeHoverBg: rgba(black, 0.07);
@@ -382,6 +471,7 @@ $colorItemTreeEditingFg: $editUIColor;
 $colorItemTreeEditingIcon: $editUIColor;
 $colorItemTreeVC: $colorDisclosureCtrl;
 $colorItemTreeVCHover: $colorDisclosureCtrlHov;
+$colorItemTreeNewNode: rgba($colorBodyFg, 0.5);
 $shdwItemTreeIcon: none;
 
 // Layout frame controls
@@ -437,33 +527,14 @@ $transInTime: 50ms;
 $transOutTime: 250ms;
 $transIn: all $transInTime ease-in-out;
 $transOut: all $transOutTime ease-in-out;
-$transInBounce: all 200ms cubic-bezier(.47,.01,.25,1.5);
-$transInBounceBig: all 300ms cubic-bezier(.2,1.6,.6,3);
+$transInTransform: transform $transInTime ease-in-out;
+$transOutTransform: transform $transOutTime ease-in-out;
+$transInBounce: all 200ms cubic-bezier(0.47, 0.01, 0.25, 1.5);
+$transInBounceBig: all 300ms cubic-bezier(0.2, 1.6, 0.6, 3);
 
-// Discrete items, like Notebook entries, Widget rules
+// Discrete items
 $createBtnTextTransform: uppercase;
-$colorDiscreteItemBg: rgba($colorBodyFg,0.1);
-$colorDiscreteItemCurrentBg: rgba($colorOk,0.3);
-
-@mixin discreteItem() {
-    background: $colorDiscreteItemBg;
-    border: 1px solid $colorInteriorBorder;
-    border-radius: $controlCr;
-
-    &--current-match {
-        background: $colorDiscreteItemCurrentBg;
-    }
-
-    .c-input-inline:hover {
-        background: $colorBodyBg;
-    }
-}
-
-@mixin discreteItemInnerElem() {
-    border: 1px solid $colorBodyBg;
-    border-radius: $controlCr;
-}
-
-@mixin themedButton($c: $colorBtnBg) {
-    background: $c;
-}
+$colorDiscreteItemBg: rgba($colorBodyFg, 0.1);
+$colorDiscreteItemBgHov: rgba($colorBodyFg, 0.2);
+$colorDiscreteItemCurrentBg: rgba($colorOk, 0.3);
+$scrollContainer: rgba(102, 102, 102, 0.1);
diff --git a/src/styles/_constants.scss b/src/styles/_constants.scss
index b493ca0584d..f8e00420d06 100755
--- a/src/styles/_constants.scss
+++ b/src/styles/_constants.scss
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -40,12 +40,17 @@ $inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
 $menuLineH: 1.5rem;
 $treeItemIndent: 16px;
 $treeTypeIconW: 18px;
-$overlayOuterMarginFullscreen: 0;
-$overlayOuterMarginLarge: 10px;
-$overlayOuterMarginDialog: 20%;
+$overlayOuterMarginFullscreen: (1%, 1%);
+$overlayOuterMarginLarge: (10px, 10px);
+$overlayOuterMarginSmall: (30%, 20%);
+$overlayOuterMarginDialog: (5%, 20%);
 $overlayInnerMargin: 25px;
 $mainViewPad: 0px;
 $treeNavArrowD: 20px;
+$shellMainBrowseBarH: 22px;
+$shellTimeConductorH: 25px;
+$shellToolBarH: 29px;
+$fadeTruncateW: 7px;
 /*************** Items */
 $itemPadLR: 5px;
 $gridItemDesk: 175px;
@@ -93,19 +98,19 @@ $messageListIconD: 32px;
 $tableResizeColHitareaD: 6px;
 /*************** Misc */
 $drawingObjBorderW: 3px;
-
+$tagBorderRadius: 3px;
 /************************** MOBILE */
 $mobileMenuIconD: 24px; // Used
 $mobileTreeItemH: 35px; // Used
 
 /************************** UI ELEMENTS */
 /*************** Progress Bar */
-$colorProgressBarHolder: rgba(black, 0.1);
+$colorProgressBarHolder: rgba(black, 0.2);
 $colorProgressBar: #0085ad;
 $progressAnimW: 500px;
-$progressBarMinH: 6px;
+$progressBarMinH: 4px;
 /************************** FONT STYLING */
-$listFontSizes: 8,9,10,11,12,13,14,16,18,20,24,28,32,36,42,48,72,96,128;
+$listFontSizes: 8, 9, 10, 11, 12, 13, 14, 16, 18, 20, 24, 28, 32, 36, 42, 48, 72, 96, 128;
 
 /************************** GLYPH CHAR UNICODES */
 $glyph-icon-alert-rect: '\e900';
@@ -154,6 +159,16 @@ $glyph-icon-flag: '\e92a';
 $glyph-icon-eye-disabled: '\e92b';
 $glyph-icon-notebook-page: '\e92c';
 $glyph-icon-unlocked: '\e92d';
+$glyph-icon-circle: '\e92e';
+$glyph-icon-draft: '\e92f';
+$glyph-icon-circle-slash: '\e930';
+$glyph-icon-question-mark: '\e931';
+$glyph-icon-status-poll-check: '\e932';
+$glyph-icon-status-poll-caution: '\e933';
+$glyph-icon-status-poll-circle-slash: '\e934';
+$glyph-icon-status-poll-question-mark: '\e935';
+$glyph-icon-status-poll-edit: '\e936';
+$glyph-icon-stale: '\e937';
 $glyph-icon-arrows-right-left: '\ea00';
 $glyph-icon-arrows-up-down: '\ea01';
 $glyph-icon-bullet: '\ea02';
@@ -257,6 +272,13 @@ $glyph-icon-conditional: '\eb27';
 $glyph-icon-condition-widget: '\eb28';
 $glyph-icon-alphanumeric: '\eb29';
 $glyph-icon-image-telemetry: '\eb2a';
+$glyph-icon-telemetry-aggregate: '\eb2b';
+$glyph-icon-bar-chart: '\eb2c';
+$glyph-icon-map: '\eb2d';
+$glyph-icon-plan: '\eb2e';
+$glyph-icon-timelist: '\eb2f';
+$glyph-icon-notebook-shift-log: '\eb31';
+$glyph-icon-plot-scatter: '\eb30';
 
 /************************** GLYPHS AS DATA URI */
 // Only objects have been converted, for use in Create menu and folder views
@@ -264,9 +286,6 @@ $bg-icon-alert-rect: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://
 $bg-icon-alert-triangle: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M499.1 424.4L287.8 54.6c-17.5-30.6-46-30.6-63.5 0L12.9 424.4C-4.6 455 9.9 480 45.1 480h421.7c35.3 0 49.8-25 32.3-55.6zM288 448h-64v-64h64v64zm10.9-192L280 352h-48l-18.9-96V128H299v128z' fill='%23000000'/%3e%3c/svg%3e");
 $bg-icon-bell: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cg fill='%23000000'%3e%3cpath d='M256 512c53 0 96-43 96-96H160c0 53 43 96 96 96zM448 224v-32C448 86 362 0 256 0S64 86 64 192v32c0 35.3-28.7 64-64 64v64h512v-64c-35.3 0-64-28.7-64-64z'/%3e%3c/g%3e%3c/svg%3e");
 $bg-icon-info: 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.6 0 0 114.6 0 256s114.6 256 256 256 256-114.6 256-256S397.4 0 256 0zm0 64c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm96 352H160v-64h32V224h128v128h32v64z' fill='%23000000'/%3e%3c/svg%3e");
-$bg-icon-activity: 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='M288 32H160l160 160H174.872C152.74 153.742 111.377 128 64 128H0v256h64c47.377 0 88.74-25.742 110.872-64H320L160 480h128l224-224L288 32z'/%3e%3c/svg%3e");
-$bg-icon-activity-mode: 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 0C148.6 0 56.6 66.2 18.6 160H64c28.4 0 54 12.4 71.5 32H256l-96-96h128l160 160-160 160H160l96-96H135.5C118 339.6 92.4 352 64 352H18.6c38 93.8 129.9 160 237.4 160 141.4 0 256-114.6 256-256S397.4 0 256 0z'/%3e%3c/svg%3e");
-$bg-icon-autoflow-tabular: 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='M96 0C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h32V0H96zM192 0h128v512H192zM416 0h-32v352h128V96c0-52.8-43.2-96-96-96z'/%3e%3c/svg%3e");
 $bg-icon-plus: 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='M480,192H320V32A32.1,32.1,0,0,0,288,0H224a32.1,32.1,0,0,0-32,32V192H32A32.1,32.1,0,0,0,0,224v64a32.1,32.1,0,0,0,32,32H192V480a32.1,32.1,0,0,0,32,32h64a32.1,32.1,0,0,0,32-32V320H480a32.1,32.1,0,0,0,32-32V224A32.1,32.1,0,0,0,480,192Z' transform='translate(0)'/%3e%3c/svg%3e");
 $bg-icon-grippy-ew: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M416 0v512h-64V0zM288 0v512h-64V0zM160 0v512H96V0z'/%3e%3c/svg%3e");
 $bg-icon-chain-links: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M479.2 32.8C457.3 10.9 428.7 0 400 0c-28.7 0-57.3 10.9-79.2 32.8l-64 64c-37 37-42.7 93.5-17 136.5l-6.4 6.4C215.7 229.3 195.9 224 176 224c-28.7 0-57.3 10.9-79.2 32.8l-64 64c-43.7 43.7-43.7 114.7 0 158.4C54.7 501.1 83.3 512 112 512c28.7 0 57.3-10.9 79.2-32.8l64-64c37-37 42.7-93.5 17-136.5l6.4-6.4c17.6 10.5 37.5 15.8 57.3 15.8 28.7 0 57.3-10.9 79.2-32.8l64-64c43.8-43.8 43.8-114.8.1-158.5zM209.9 369.9l-64 64c-9 9.1-21.1 14.1-33.9 14.1-12.8 0-24.9-5-33.9-14.1-18.7-18.7-18.7-49.2 0-67.9l64-64c9.1-9.1 21.1-14.1 33.9-14.1 2.8 0 5.6.3 8.4.7l-27.8 27.8c-5.2 5.2-8.1 12.1-8.1 19.4s2.9 14.3 8.1 19.4c5.2 5.2 12.1 8.1 19.4 8.1s14.3-2.9 19.4-8.1l27.8-27.8c2.7 15.2-1.8 31.1-13.3 42.5zm224-224l-64 64c-9 9.1-21.1 14.1-33.9 14.1-2.8 0-5.6-.3-8.4-.7l27.8-27.8c5.2-5.2 8.1-12.1 8.1-19.4s-2.9-14.3-8.1-19.4c-5.2-5.2-12.1-8.1-19.4-8.1s-14.3 2.9-19.4 8.1l-27.8 27.8c-2.6-14.9 1.8-30.8 13.3-42.3l64-64C375.1 69 387.2 64 400 64s24.9 5 33.9 14.1c18.8 18.7 18.8 49.1 0 67.8z'/%3e%3c/svg%3e");
@@ -289,22 +308,30 @@ $bg-icon-session: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www
 $bg-icon-tabular: 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='M448 0H64C28.8 0 0 28.8 0 64v384c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V64c0-35.2-28.8-64-64-64zM320 224H192v-96h128v96zm-128 32h128v96H192v-96zm-32 96H32v-96h128v96zm0-224v96H32v-96h128zM64 480c-8.5 0-16.5-3.3-22.6-9.4S32 456.5 32 448v-64h128v96H64zm128 0v-96h128v96H192zm288-32c0 8.5-3.3 16.5-9.4 22.6S456.5 480 448 480h-96v-96h128v64zm0-96H352v-96h128v96zm0-128H352v-96h128v96z'/%3e%3c/svg%3e");
 $bg-icon-tabular-lad: 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='M448 0H64C28.7.1.1 28.7 0 64v384c.1 35.3 28.7 63.9 64 64h384c35.3-.1 63.9-28.7 64-64V64c-.1-35.3-28.7-63.9-64-64zM32 128h128v96H32v-96zm0 128h128v96H32v-96zm32 224c-17.6-.1-31.9-14.4-32-32v-64h128v96H64zm128 0v-96h128v96H192zm288-32c-.1 17.6-14.4 31.9-32 32h-96v-96h128v64zm0-192v96H192v-96h32v-32h-32v-96h288v96h-32v32h32z'/%3e%3cpath fill='%23000000' d='M391.2 273.7L336 246.1V160c0-8.8-7.2-16-16-16s-16 7.2-16 16v105.9l72.8 36.4c7.9 4 17.5.8 21.5-7.2 4-7.8.8-17.5-7.1-21.4z'/%3e%3c/svg%3e");
 $bg-icon-tabular-lad-set: 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='M64 384V96c-35.3.1-63.9 28.7-64 64v288c.1 35.3 28.7 63.9 64 64h288c35.3-.1 63.9-28.7 64-64H128c-35.3-.1-63.9-28.7-64-64z'/%3e%3cpath fill='%23000000' d='M448 0H160c-35.3.1-63.9 28.7-64 64v288c.1 35.3 28.7 63.9 64 64h288c35.3-.1 63.9-28.7 64-64V64c-.1-35.3-28.7-63.9-64-64zM128 96h96v64h-96V96zm0 96h96v96h-96v-96zm32 192c-17.6-.1-31.9-14.4-32-32v-32h96v64h-64zm96 0v-64h96v64h-96zm224-32c-.1 17.6-14.4 31.9-32 32h-64v-64h96v32zm0-64H256V96h224v192z'/%3e%3cpath fill='%23000000' d='M416 240c8.8 0 16-7.2 16-16 0-6.9-4.4-13-10.9-15.2L384 196.5V144c0-8.8-7.2-16-16-16s-16 7.2-16 16v75.5l58.9 19.6c1.7.6 3.4.9 5.1.9z'/%3e%3c/svg%3e");
-$bg-icon-tabular-realtime: 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='M0 64v384c0 35.2 28.8 64 64 64h288c35.2 0 64-28.8 64-64V340c-19.8 7.8-41.4 12-64 12-35.4 0-68.4-10.5-96-28.6V352h-96v-96h35.3c-5.2-10.1-9.4-20.8-12.6-32H160v-96h22.7C203.6 54.2 271.6 0 352 0H64C28.8 0 0 28.8 0 64zm288 320h96v64c0 8.5-3.3 16.5-9.4 22.6S360.5 480 352 480h-64v-96zm-160 96H64c-8.5 0-16.5-3.3-22.6-9.4S32 456.5 32 448v-64h96v96zm0-128H32v-96h96v96zm32 32h96v96h-96v-96zm-32-160H32v-96h96v96z'/%3e%3cpath fill='%23000000' d='M192 160c0 88.4 71.6 160 160 160s160-71.6 160-160S440.4 0 352 0 192 71.6 192 160zm49.7 39.8L227 187.5c-1.4-6.4-2.3-12.9-2.7-19.6 15.1-.1 30.1-5 41.9-14.8l39.6-33c7.5-6.2 21.1-6.2 28.6 0l39.6 33c2.8 2.3 5.7 4.3 8.8 6.1-23-11.7-52.7-9.2-72.8 7.5l-39.6 33c-7.6 6.3-21.2 6.3-28.7.1zM352 288c-36.7 0-69.7-15.4-93-40.1 14.2-.6 28.1-5.5 39.2-14.7l39.6-33c7.5-6.2 21.1-6.2 28.6 0l39.6 33c11 9.2 25 14.1 39.2 14.7-23.5 24.7-56.5 40.1-93.2 40.1zm125.9-151.3c1.4 7.5 2.1 15.3 2.1 23.3 0 9.4-1 18.6-3 27.5l-14.7 12.3c-7.5 6.2-21.1 6.2-28.6 0l-39.6-33c-2.8-2.3-5.7-4.3-8.8-6.1 23 11.7 52.7 9.2 72.8-7.5l19.8-16.5zM352 32c46.4 0 87.1 24.7 109.5 61.7l-31.2 26c-7.5 6.2-21.1 6.2-28.6 0l-39.6-33c-23.6-19.7-60.6-19.7-84.3 0l-39.6 33c-2.5 2.1-5.7 3.5-9.1 4.2C244.7 70.8 293.8 32 352 32z'/%3e%3c/svg%3e");
-$bg-icon-tabular-scrolling: 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='M32 0C14.4 0 0 14.4 0 32v96h224V0H32zM512 128V32c0-17.6-14.4-32-32-32H288v128h224zM0 192v96c0 17.6 14.4 32 32 32h192V192H0zM480 320c17.6 0 32-14.4 32-32v-96H288v128h192zM256 512L128 384h256z'/%3e%3c/svg%3e");
+$bg-icon-tabular-scrolling: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M448 0H64A64.19 64.19 0 0 0 0 64v384a64.19 64.19 0 0 0 64 64h384a64.19 64.19 0 0 0 64-64V64a64.19 64.19 0 0 0-64-64Zm-64 128v96h-96v-96Zm-96 128h96v96h-96Zm-32 96h-96v-96h96Zm0-224v96h-96v-96Zm-224 0h96v96H32Zm0 128h96v96H32Zm32 224a32.2 32.2 0 0 1-32-32v-64h96v96Zm96 0v-96h96v96Zm192 0h-64v-96h96v96Zm118.57-9.43A31.74 31.74 0 0 1 448 480h-32v-32h64a31.74 31.74 0 0 1-9.43 22.57ZM480 384h-64V128h64Z'/%3e%3c/svg%3e");
 $bg-icon-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='M16 315.83c7.14-2.81 27.22-23.77 46.48-73C83.71 188.64 120.64 124 176 124c26.2 0 50.71 14.58 72.85 43.34 18.67 24.25 32.42 54.46 40.67 75.54 19.26 49.19 39.34 70.15 46.48 73 7.14-2.81 27.22-23.77 46.48-73 18.7-47.75 49.57-103.57 94.47-116.23A255.87 255.87 0 0 0 256 0C114.62 0 0 114.62 0 256a257.18 257.18 0 0 0 5 50.52c4.77 5.39 8.61 8.37 11 9.31z'/%3e%3cpath fill='%23000000' d='M496 196.17c-7.14 2.81-27.22 23.76-46.48 73C428.29 323.36 391.36 388 336 388c-26.2 0-50.71-14.58-72.85-43.34-18.67-24.25-32.42-54.46-40.67-75.54-19.26-49.19-39.34-70.15-46.48-73-7.14 2.81-27.22 23.76-46.48 73-18.7 47.75-49.57 103.57-94.47 116.23A255.87 255.87 0 0 0 256 512c141.38 0 256-114.62 256-256a257.18 257.18 0 0 0-5-50.52c-4.77-5.39-8.61-8.37-11-9.31z'/%3e%3c/svg%3e");
-$bg-icon-timeline: 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='M128 128h192v64H128zM192 224h192v64H192zM160 320h192v64H160z'/%3e%3cpath fill='%23000000' d='M416 0h-64v96h63.8c.1 0 .1.1.2.2v319.7c0 .1-.1.1-.2.2H352v96h64c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96zM96 415.8V96.2c0-.1.1-.1.2-.2H160V0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h64v-96H96.2c-.1 0-.2-.1-.2-.2z'/%3e%3c/svg%3e");
+$bg-icon-timeline: 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='M416 0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96ZM64 160V96h128v64Zm64 64h192v64H128Zm320 192H224v-64h224Zm0-128h-64v-64h64Zm0-128H256V96h192Z'/%3e%3c/svg%3e");
 $bg-icon-timer: 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='M288 73.3V32.01a32 32 0 0 0-32-32h-64a32 32 0 0 0-32 32V73.3C67.48 100.84 0 186.54 0 288.01c0 123.71 100.29 224 224 224s224-100.29 224-224c0-101.48-67.5-187.2-160-214.71zm-54 224.71l-131.88 105.5A167.4 167.4 0 0 1 56 288.01c0-92.64 75.36-168 168-168 3.36 0 6.69.11 10 .31v177.69z'/%3e%3c/svg%3e");
-$bg-icon-topic: 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='M227.18 238.32l43.15-43.15a25.18 25.18 0 0 1 35.36 0l43.15 43.15a94.42 94.42 0 0 0 35.18 22.25V174.5l-28.82-28.82a95.11 95.11 0 0 0-134.35 0l-43.15 43.15a25.18 25.18 0 0 1-35.36 0L128 174.5v86.07a95.11 95.11 0 0 0 99.18-22.25z'/%3e%3cpath fill='%23000000' d='M252.82 273.68l-43.15 43.15a25.18 25.18 0 0 1-35.36 0l-43.15-43.15c-1-1-2.1-2-3.18-3v98.68a95.11 95.11 0 0 0 131.18-3l43.15-43.15a25.18 25.18 0 0 1 35.36 0l43.15 43.15c1 1 2.1 2 3.18 3v-98.68a95.11 95.11 0 0 0-131.18 3z'/%3e%3cpath fill='%23000000' d='M416 0h-64v96h63.83l.17.17v319.66l-.17.17H352v96h64c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96zM160 416H96.17l-.17-.17V96.17l.17-.17H160V0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h64v-96z'/%3e%3c/svg%3e");
 $bg-icon-box-with-dashed-lines: 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='M0 192h64v128H0zM64 64.11l.11-.11H160V0H64A64.19 64.19 0 0 0 0 64v96h64V64.11zM64 447.89V352H0v96a64.19 64.19 0 0 0 64 64h96v-64H64.11zM192 0h128v64H192zM448 447.89l-.11.11H352v64h96a64.19 64.19 0 0 0 64-64v-96h-64v95.89zM448 0h-96v64h95.89l.11.11V160h64V64a64.19 64.19 0 0 0-64-64zM448 192h64v128h-64zM192 448h128v64H192zM128 128h256v256H128z'/%3e%3c/svg%3e");
-$bg-icon-summary-widget: 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='M448 0H64C28.8 0 0 28.8 0 64v384c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V64c0-35.2-28.8-64-64-64zm-24.1 305.2l-41.3 71.6-94.8-65.8 9.6 115h-82.7l9.6-115-94.8 65.8-41.3-71.6L192.5 256 88.1 206.8l41.3-71.6 94.8 65.8-9.6-115h82.7l-9.6 115 94.8-65.8 41.3 71.6L319.5 256l104.4 49.2z'/%3e%3c/svg%3e");
-$bg-icon-notebook: 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='M448 55.4c0-39.9-27.7-63.7-61.5-52.7L0 128h448V55.4zM448 160H0v288c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V224c0-35.2-28.8-64-64-64zm-32 256H224V256h192v160z'/%3e%3c/svg%3e");
+$bg-icon-summary-widget: 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='M416 0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96zM256 384L64 256l192-128 192 128z'/%3e%3c/svg%3e");
+$bg-icon-notebook: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' xml:space='preserve'%3e%3cpath d='M448 55.4c0-39.9-27.7-63.7-61.5-52.7L0 128h448V55.4zM448 160H0v288c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V224c0-35.2-28.8-64-64-64zm-32 256H224V256h192v160z'/%3e%3c/svg%3e");
 $bg-icon-tabs-view: 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='M0 448a64.2 64.2 0 0 0 64 64h384a64.2 64.2 0 0 0 64-64V144H256L230.9 31.2C227.1 14.1 209.6 0 192 0H64A64.2 64.2 0 0 0 0 64zm416-64H96V256h320z'/%3e%3cpath d='M240 0c17.6 0 35.1 14.1 38.9 31.2l18 80.8H512V64a64.2 64.2 0 0 0-64-64z'/%3e%3c/svg%3e");
 $bg-icon-flexible-layout: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M0 416c0 52.8 43.2 96 96 96h32V224H0zM0 96v64h128V0H96C43.2 0 0 43.2 0 96zM384 512h32c52.8 0 96-43.2 96-96v-64H384zM192 0h128v512H192zM416 0h-32v288h128V96c0-52.8-43.2-96-96-96z'/%3e%3c/svg%3e");
 $bg-icon-generator-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='M76 236.9c5.4-2.1 20.4-17.8 34.9-54.7C126.8 141.5 154.5 93 196 93c19.7 0 38 10.9 54.6 32.5 14 18.2 24.4 40.8 30.5 56.7 14.5 36.9 29.5 52.6 34.9 54.7 5.4-2.1 20.4-17.8 34.9-54.7S388 104.5 421.7 95A192 192 0 0 0 256 0C150 0 64 86 64 192a197.2 197.2 0 0 0 3.7 37.9c3.6 4 6.5 6.3 8.3 7zM442.3 238.5A192.9 192.9 0 0 0 448 192a197.2 197.2 0 0 0-3.7-37.9c-3.6-4-6.5-6.3-8.3-7-5.4 2.1-20.4 17.8-34.9 54.7-10.9 27.9-27.3 59.5-50 76.6z'/%3e%3cpath d='M256 320l67.5-29.5a60.3 60.3 0 0 1-7.5.5c-19.7 0-38-10.9-54.6-32.5-14-18.2-24.4-40.8-30.5-56.7-14.5-36.9-29.5-52.6-34.9-54.7-5.4 2.1-20.4 17.8-34.9 54.7-8.2 21.1-19.6 44.2-34.4 61.6z'/%3e%3cpath d='M512 240L256 352 0 240v160l256 112 256-112V240z'/%3e%3c/svg%3e");
-$bg-icon-generator-events: 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='M160 96h192v32H160zM160 224h192v32H160zM160 160h160v32H160z'/%3e%3cpath d='M128 64.1h256V264l64-28V64a64.2 64.2 0 0 0-64-64H128a64.2 64.2 0 0 0-64 64v172l64 28zM329.1 288H182.9l73.1 32 73.1-32z'/%3e%3cpath d='M256 352L0 240v160l256 112 256-112V240L256 352z'/%3e%3c/svg%3e");
+$bg-icon-generator-events: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M160 96h192v32H160zM160 224h192v32H160zM160 160h160v32H160z'/%3e%3cpath d='M128 64.1h256V264l64-28V64a64.2 64.2 0 0 0-64-64H128a64.2 64.2 0 0 0-64 64v172l64 28zM329.1 288H182.9l73.1 32 73.1-32z'/%3e%3cpath d='M256 352L0 240v160l256 112 256-112V240L256 352z'/%3e%3c/svg%3e");
 $bg-icon-gauge: 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.6 0 0 114.6 0 256c0 113.2 73.5 209.2 175.3 243L304 256v251.5C422.4 485 512 381 512 256 512 114.6 397.4 0 256 0zm121.4 263.9a159.8 159.8 0 0 0-242.8 0l-73-62.5c4.3-5 8.7-9.8 13.4-14.4a255.9 255.9 0 0 1 362 0c4.7 4.6 9.1 9.4 13.4 14.4z'/%3e%3c/svg%3e");
 $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 fill='%23000000' 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'/%3e%3c/svg%3e");
 $bg-icon-condition-widget: 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='M416 0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96zM256 384L64 256l192-128 192 128z'/%3e%3c/svg%3e");
+$bg-icon-bar-chart: 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='M416 0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96ZM133.82 448H64V224h69.82Zm104.73 0h-69.82V64h69.82Zm104.72 0h-69.82V288h69.82ZM448 448h-69.82V128H448Z'/%3e%3c/svg%3e");
+$bg-icon-map: 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='M448 32.7 384 64v448l64-31.3c35.2-17.21 64-60.1 64-95.3v-320c0-35.2-28.8-49.91-64-32.7ZM160 456l193.6 48.4v-448L160 8v448zM129.6.4 128 0 64 31.3C28.8 48.51 0 91.4 0 126.6v320c0 35.2 28.8 49.91 64 32.7l64-31.3 1.6.4Z'/%3e%3c/svg%3e");
+$bg-icon-plan: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cg data-name='Layer 2'%3e%3cg data-name='Layer 1'%3e%3cpath fill='%23000000' d='M128 96V64a64.19 64.19 0 0 1 64-64h128a64.19 64.19 0 0 1 64 64v32Z'/%3e%3cpath fill='%23000000' d='M416 64v64H96V64c-52.8 0-96 43.2-96 96v256c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96V160c0-52.8-43.2-96-96-96ZM64 288v-64h128v64Zm256 128H128v-64h192Zm128 0h-64v-64h64Zm0-128H256v-64h192Z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
+$bg-icon-timelist: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cg data-name='Layer 2'%3e%3cpath d='M448 0H64A64.19 64.19 0 0 0 0 64v384a64.19 64.19 0 0 0 64 64h384a64.19 64.19 0 0 0 64-64V64a64.19 64.19 0 0 0-64-64ZM213.47 266.73a24 24 0 0 1-32.2 10.74L104 238.83V128a24 24 0 0 1 48 0v81.17l50.73 25.36a24 24 0 0 1 10.74 32.2ZM448 448H288v-64h160Zm0-96H288v-64h160Zm0-96H288v-64h160Zm0-96H288V96h160Z' data-name='Layer 1'/%3e%3c/g%3e%3c/svg%3e");
+$bg-icon-plot-scatter: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cg data-name='Layer 2'%3e%3cpath d='M96 0C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96ZM64 176a48 48 0 1 1 48 48 48 48 0 0 1-48-48Zm80 240a48 48 0 1 1 48-48 48 48 0 0 1-48 48Zm128-96a48 48 0 1 1 48-48 48 48 0 0 1-48 48Zm0-160a48 48 0 1 1 48-48 48 48 0 0 1-48 48Zm128 256a48 48 0 1 1 48-48 48 48 0 0 1-48 48Z' data-name='Layer 1'/%3e%3c/g%3e%3c/svg%3e");
+$bg-icon-notebook-shift-log: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M448 55.36c0-39.95-27.69-63.66-61.54-52.68L0 128h448V55.36ZM448 160H0v288c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V224c0-35.2-28.8-64-64-64ZM128 416H64v-64h64v64Zm0-96H64v-64h64v64Zm320 96H192v-64h256v64Zm0-96H192v-64h256v64Z'/%3e%3c/svg%3e");
+$bg-icon-telemetry-aggregate: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cg data-name='Layer 2'%3e%3cg data-name='Layer 3'%3e%3cpath d='M39 197.72c7-20.72 18.74-50.4 34.6-74.18C92.91 94.65 114.79 80 138.67 80s45.75 14.65 65 43.54c15.86 23.78 27.57 53.46 34.6 74.18 15.44 45.48 31.56 67.49 39 73.27 7.47-5.78 23.6-27.79 39-73.27 7-20.72 18.74-50.4 34.61-74.18q13.9-20.85 29.56-31.75A207.78 207.78 0 0 0 208 0C93.12 0 0 93.12 0 208a208.14 208.14 0 0 0 7.39 55.09c8.39-10.87 20.2-31.67 31.61-65.37Z'/%3e%3cpath d='M377 218.28c-7 20.72-18.74 50.4-34.6 74.18-19.28 28.89-41.16 43.54-65 43.54s-45.75-14.65-65-43.54c-15.86-23.78-27.57-53.46-34.6-74.18-15.44-45.48-31.57-67.49-39-73.27-7.47 5.78-23.6 27.79-39 73.27-7.19 20.72-18.9 50.4-34.8 74.18q-13.9 20.85-29.56 31.75A207.78 207.78 0 0 0 208 416c114.88 0 208-93.12 208-208a208.14 208.14 0 0 0-7.39-55.09c-8.39 10.87-20.2 31.67-31.61 65.37Z'/%3e%3cpath d='M460.78 167.31A258.4 258.4 0 0 1 464 208a255.84 255.84 0 0 1-256 256 258.4 258.4 0 0 1-40.69-3.22A207.23 207.23 0 0 0 304 512c114.88 0 208-93.12 208-208a207.23 207.23 0 0 0-51.22-136.69Z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
+$bg-icon-trash: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='512px' height='512px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3e%3cpath d='M416,64h-96.18V32c0-17.6-14.4-32-32-32h-64c-17.6,0-32,14.4-32,32v32H96c-52.8,0-96,36-96,80s0,80,0,80h32v192 c0,52.8,43.2,96,96,96h256c52.8,0,96-43.2,96-96V224h32c0,0,0-36,0-80S468.8,64,416,64z M160,416H96V224h64V416z M288,416h-64V224 h64V416z M416,416h-64V224h64V416z'/%3e%3c/svg%3e");
+$bg-icon-eye-open: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:%2300A14B;%7d %3c/style%3e%3ctitle%3eicon-eye-open-v2%3c/title%3e%3cg%3e%3cpath class='st0' d='M256,58.2c-122.9,0-226.1,84-255.4,197.8C29.9,369.7,133.1,453.8,256,453.8s226.1-84,255.4-197.8 C482.1,142.3,378.9,58.2,256,58.2z M414.6,294.2c-11.3,17.2-25.3,32.4-41.5,45.2c-16.4,12.9-34.5,22.8-54,29.7 c-20.2,7.1-41.4,10.7-63,10.7s-42.9-3.6-63-10.7c-19.5-6.9-37.7-16.9-54-29.7c-16.2-12.8-30.2-27.9-41.5-45.2 c-7.9-12-14.4-24.8-19.3-38.2c5-13.4,11.5-26.2,19.3-38.2c11.3-17.2,25.3-32.4,41.5-45.2c16.4-12.9,34.5-22.8,54-29.7 c20.2-7.1,41.4-10.7,63-10.7s42.9,3.6,63,10.7c19.5,6.9,37.7,16.9,54,29.7c16.2,12.8,30.2,27.9,41.5,45.2 c7.9,12,14.4,24.8,19.3,38.2C429,269.4,422.5,282.2,414.6,294.2z'/%3e%3ccircle class='st0' cx='256' cy='256' r='96'/%3e%3c/g%3e%3c/svg%3e");
+$bg-icon-camera: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3ctitle%3eicon-camera-v2%3c/title%3e%3cpath d='M448,128H384L320,0H192L128,128H64A64.2,64.2,0,0,0,0,192V448a64.2,64.2,0,0,0,64,64H448a64.2,64.2,0,0,0,64-64V192A64.2,64.2,0,0,0,448,128ZM256,432A128,128,0,1,1,384,304,128,128,0,0,1,256,432Z'/%3e%3c/svg%3e");
diff --git a/src/styles/_controls.scss b/src/styles/_controls.scss
index 75908cf105c..2b1b2afd5b3 100644
--- a/src/styles/_controls.scss
+++ b/src/styles/_controls.scss
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,160 +20,237 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+@use 'sass:math';
+
+/******************************************************** CONTROL-SPECIFIC MIXINS */
+@mixin menuOuter() {
+  border-radius: $basicCr;
+  box-shadow: $shdwMenu;
+  @if $shdwMenuInner != none {
+    box-shadow: $shdwMenuInner, $shdwMenu;
+  }
+  background: $colorMenuBg;
+  color: $colorMenuFg;
+  text-shadow: $shdwMenuText;
+  padding: $interiorMarginSm;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  z-index: 100;
+
+  > * {
+    flex: 0 0 auto;
+  }
+}
+
+@mixin menuPositioning() {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  z-index: 100;
+
+  > * {
+    flex: 0 0 auto;
+  }
+}
+
+@mixin menuInner() {
+  li {
+    @include cControl();
+    justify-content: start;
+    cursor: pointer;
+    display: flex;
+    padding: nth($menuItemPad, 1) nth($menuItemPad, 2);
+    white-space: nowrap;
+
+    @include hover {
+      background: $colorMenuHovBg;
+      color: $colorMenuHovFg;
+      &:before {
+        color: $colorMenuHovIc !important;
+      }
+    }
+
+    &:not(.c-menu--no-icon &) {
+      &:before {
+        color: $colorMenuIc;
+        font-size: 1em;
+        margin-right: $interiorMargin;
+        min-width: 1em;
+      }
+
+      &:not([class*='icon']):before {
+        content: ''; // Enable :before so that menu items without an icon still indent properly
+      }
+    }
+  }
+}
+
 /******************************************************** BUTTONS */
 // Optionally can include icon in :before via markup
 button {
-    @include htmlInputReset();
+  @include htmlInputReset();
 }
 
 .c-button,
 .c-button--menu {
-    @include cButton();
+  @include cButton();
 }
 
 .c-button {
-    &--menu {
-        &:after {
-            content: $glyph-icon-arrow-down;
-            font-family: symbolsfont;
-            opacity: 0.5;
-        }
+  &--menu {
+    &:after {
+      content: $glyph-icon-arrow-down;
+      font-family: symbolsfont;
+      opacity: 0.5;
     }
+  }
 
-    &--swatched {
-        // Used with c-button--menu: a visual button with a larger swatch element adjacent to an icon
-        .c-swatch {
-            $d: 12px;
-            margin-left: $interiorMarginSm;
-            height: $d; width: $d;
-        }
+  &--swatched {
+    // Used with c-button--menu: a visual button with a larger swatch element adjacent to an icon
+    .c-swatch {
+      $d: 12px;
+      margin-left: $interiorMarginSm;
+      height: $d;
+      width: $d;
     }
+  }
 
-    &[class*='__collapse-button'] {
-        box-shadow: none;
-        background: $splitterBtnColorBg;
-        color: $splitterBtnColorFg;
-        border-radius: $smallCr;
-        line-height: 90%;
-        padding: 3px 10px;
-
-        @include desktop() {
-            font-size: 6px;
-        }
+  &[class*='__collapse-button'] {
+    box-shadow: none;
+    background: $splitterBtnColorBg;
+    color: $splitterBtnColorFg;
+    border-radius: $smallCr;
+    line-height: 90%;
+    padding: 3px 10px;
 
-        &:before {
-            content: $glyph-icon-arrow-down;
-            font-size: 1.1em;
-        }
+    @include desktop() {
+      font-size: 6px;
     }
 
-    &.is-active {
-        background: $colorBtnActiveBg;
-        color: $colorBtnActiveFg;
+    &:before {
+      content: $glyph-icon-arrow-down;
+      font-size: 1.1em;
     }
+  }
 
-    &.is-selected {
-        background: $colorBtnSelectedBg;
-        color: $colorBtnSelectedFg;
-    }
+  &.is-active {
+    background: $colorBtnActiveBg;
+    color: $colorBtnActiveFg;
+  }
+
+  &.is-selected {
+    background: $colorBtnSelectedBg;
+    color: $colorBtnSelectedFg;
+  }
 }
 
 /********* Icon Buttons and Links */
 .c-click-icon {
-    @include cClickIcon();
+  @include cClickIcon();
 
-    &--section-collapse {
-        color: inherit;
-        display: block;
-        transition: transform $transOutTime;
-        &:before {
-            content: $glyph-icon-arrow-down;
-            font-family: symbolsfont;
-        }
+  &--section-collapse {
+    color: inherit;
+    display: block;
+    transition: transform $transOutTime;
+    &:before {
+      content: $glyph-icon-arrow-down;
+      font-family: symbolsfont;
+    }
 
-        &.is-collapsed {
-            transform: rotate(180deg);
-        }
+    &.is-collapsed {
+      transform: rotate(180deg);
     }
+  }
 }
 
 .c-click-link,
 .c-icon-link {
-    // A clickable element, typically inline, with an icon and label
-    @include cControl();
-    cursor: pointer;
+  // A clickable element, typically inline, with an icon and label
+  @include cControl();
+  cursor: pointer;
 }
 
 .c-icon-button,
 .c-click-swatch {
-    @include cClickIconButton();
+  @include cClickIconButton();
 
-    &--menu {
-        @include hasMenu();
-    }
+  &--menu {
+    @include hasMenu();
+  }
 }
 
 .c-icon-button--disabled {
-    @include cClickIconButtonLayout();
+  @include cClickIconButtonLayout();
 }
 
 .c-icon-link {
-    &:before {
-        // Icon
-        //color: $colorBtnMajorBg;
-    }
+  &:before {
+    // Icon
+    //color: $colorBtnMajorBg;
+  }
 }
 
 .c-icon-button {
-    [class*='label'] {
-        opacity: 0.8;
-    }
+  [class*='label'] {
+    padding: 1px 0;
+  }
 
-    &--mixed {
-        @include mixedBg();
-    }
+  &--mixed {
+    @include mixedBg();
+  }
 
-    &--swatched {
-        // Color control, show swatch element
-        display: flex;
-        flex-flow: column nowrap;
-        align-items: center;
-        justify-content: center;
-
-        > [class*='swatch'] {
-            box-shadow: inset rgba($editUIBaseColorFg, 0.2) 0 0 0 1px;
-            flex: 0 0 auto;
-            height: 5px;
-            width: 100%;
-            margin-top: 1px;
-        }
+  &--swatched {
+    // Color control, show swatch element
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: center;
 
-        &:before {
-            // Reduce size of icon to make a bit of room
-            flex: 1 1 auto;
-            font-size: 1.1em;
-        }
+    > [class*='swatch'] {
+      box-shadow: inset rgba($editUIBaseColorFg, 0.2) 0 0 0 1px;
+      flex: 0 0 auto;
+      height: 5px;
+      width: 100%;
+      margin-top: 1px;
+    }
+
+    &:before {
+      // Reduce size of icon to make a bit of room
+      flex: 1 1 auto;
+      font-size: 1.1em;
     }
+  }
+
+  &--sm {
+    padding: $interiorMarginSm $interiorMargin;
+  }
 }
 
 .c-list-button {
-    @include cControl();
-    color: $colorBodyFg;
-    cursor: pointer;
-    justify-content: start;
-    padding: $interiorMargin;
+  @include cControl();
+  color: $colorBodyFg;
+  cursor: pointer;
+  justify-content: start;
+  padding: $interiorMargin;
 
-    > * + * {
-        margin-left: $interiorMargin;
-    }
+  > * + * {
+    margin-left: $interiorMargin;
+  }
 
-    @include hover() {
-        background: $colorItemTreeHoverBg;
-    }
+  @include hover() {
+    background: $colorItemTreeHoverBg;
+  }
 
-    .c-button {
-        flex: 0 0 auto;
-    }
+  .c-button {
+    flex: 0 0 auto;
+  }
+}
+
+.c-not-button {
+  // Use within a holder that's clickable; use to indicate interactability
+  @include cButtonLayout();
+  cursor: pointer;
 }
 
 /******************************************************** DISCLOSURE CONTROLS */
@@ -181,885 +258,951 @@ button {
 // Provides a downward arrow icon that when clicked displays additional options and/or info.
 // Always placed AFTER an element
 .c-disclosure-button {
-    @include cClickIcon();
-    margin-left: $interiorMarginSm;
-
-    &:before {
-        content: $glyph-icon-arrow-down;
-        font-family: symbolsfont;
-        font-size: 0.7em;
-    }
+  @include cClickIcon();
+  margin-left: $interiorMarginSm;
+
+  &:before {
+    content: $glyph-icon-arrow-down;
+    font-family: symbolsfont;
+    font-size: 0.7em;
+  }
 }
 /********* Disclosure Triangle */
 // Provides an arrow icon that when clicked expands an element to reveal its contents.
 // Used in tree items, plot legends. Always placed BEFORE an element.
 .c-disclosure-triangle {
-    $d: 12px;
-    color: $colorDisclosureCtrl;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex: 0 0 auto;
-    width: $d;
-    position: relative;
-
-    &.is-enabled {
-        cursor: pointer;
+  $d: 12px;
+  color: $colorDisclosureCtrl;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: $d;
+  position: relative;
+  visibility: hidden;
+
+  &.is-enabled {
+    cursor: pointer;
+    visibility: visible;
 
-        &:hover {
-            color: $colorDisclosureCtrlHov;
-        }
+    &:hover {
+      color: $colorDisclosureCtrlHov;
+    }
 
-        &:before {
-            $s: .65;
-            content: $glyph-icon-arrow-right-equilateral;
-            display: block;
-            font-family: symbolsfont;
-            font-size: 1rem * $s;
-        }
+    &:before {
+      $s: 0.65;
+      content: $glyph-icon-arrow-right-equilateral;
+      display: block;
+      font-family: symbolsfont;
+      font-size: 1rem * $s;
     }
+  }
 
-    &--expanded {
-        &:before {
-            transform: rotate(90deg);
-        }
+  &--expanded {
+    &:before {
+      transform: rotate(90deg);
     }
+  }
 }
 
 /******************************************************** DRAG AFFORDANCES */
 .c-grippy {
-    $d: 10px;
-    @include grippy($c: $colorItemTreeVC, $dir: 'y');
-    width: $d; height: $d;
-
-    &--vertical-drag {
-        cursor: ns-resize;
-    }
+  $d: 10px;
+  @include grippy($c: $colorItemTreeVC, $dir: 'y');
+  width: $d;
+  height: $d;
+
+  &--vertical-drag {
+    cursor: ns-resize;
+  }
 }
 
 /******************************************************** SECTION */
 section {
-    flex: 0 1 auto;
-    overflow: hidden;
-    + section {
-        margin-top: $interiorMargin;
-    }
-
-    .c-section__header {
-        @include propertiesHeader();
-        display: flex;
-        flex: 0 0 auto;
-        align-items: center;
-        margin-bottom: $interiorMargin;
+  flex: 0 1 auto;
+  overflow: hidden;
+  + section {
+    margin-top: $interiorMargin;
+  }
+
+  .c-section__header {
+    @include propertiesHeader();
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    margin-bottom: $interiorMargin;
 
-        > * + * { margin-left: $interiorMarginSm; }
+    > * + * {
+      margin-left: $interiorMarginSm;
     }
+  }
 
-    > [class*='__label'] {
-        flex: 1 1 auto;
-        text-transform: uppercase;
-    }
+  > [class*='__label'] {
+    flex: 1 1 auto;
+    text-transform: uppercase;
+  }
 }
 
 /******************************************************** FORM ELEMENTS */
-input, textarea {
-    font-family: inherit;
-    font-weight: inherit;
-    letter-spacing: inherit;
+input,
+textarea {
+  font-family: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
 }
 
-input[type=text],
-input[type=search],
-input[type=number],
+input[type='text'],
+input[type='search'],
+input[type='number'],
+input[type='password'],
+input[type='date'],
 textarea {
-    @include reactive-input();
-    padding: $inputTextP;
-    &.numeric {
-        text-align: right;
-    }
+  @include reactive-input();
+  &.numeric {
+    text-align: right;
+  }
 }
 
-input[type=number]::-webkit-inner-spin-button,
-input[type=number]::-webkit-outer-spin-button {
-    margin-right: -5px !important;
-    margin-top: -1px !important;
+input[type='text'],
+input[type='search'],
+input[type='password'],
+input[type='date'],
+textarea {
+  padding: $inputTextP;
 }
 
 .c-input {
-    &--flex {
-        width: 100%;
-        min-width: 20px;
+  &--flex {
+    width: 100%;
+    min-width: 20px;
+  }
+
+  &--datetime {
+    // Sized for values such as 2018-09-28 22:32:33.468Z
+    width: 160px;
+  }
+
+  &--hrs-min-sec {
+    // Sized for values such as 00:25:00
+    width: 60px;
+  }
+
+  &-inline,
+  &--inline {
+    // A text input or contenteditable element that indicates edit affordance on hover and looks like an input on focus
+    @include inlineInput;
+
+    &:hover,
+    &:focus {
+      background: $colorInputBg;
+      padding-left: $inputTextPLeftRight;
+      padding-right: $inputTextPLeftRight;
     }
+  }
 
-    &--datetime {
-        // Sized for values such as 2018-09-28 22:32:33.468Z
-        width: 160px;
+  &--labeled {
+    // TODO: replace .c-labeled-input with this
+    // An input used in the Toolbar
+    // Assumes label is before the input
+    @include cControl();
+
+    input {
+      margin-left: $interiorMarginSm;
     }
+  }
 
-    &--hrs-min-sec {
-        // Sized for values such as 00:25:00
-        width: 60px;
+  &--sm {
+    // Small inputs, like small numerics
+    width: 40px;
+  }
+
+  &--autocomplete {
+    &__wrapper {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      overflow: hidden;
+      width: 100%;
     }
 
-    &-inline,
-    &--inline {
-        // A text input or contenteditable element that indicates edit affordance on hover and looks like an input on focus
-        @include inlineInput;
+    &__input {
+      min-width: 100px;
+      width: 100%;
 
-        &:hover,
-        &:focus {
-            background: $colorInputBg;
-            padding-left: $inputTextPLeftRight;
-            padding-right: $inputTextPLeftRight;
-        }
+      // Fend off from afford-arrow
+      padding-right: 2.5em !important;
     }
 
-    &--labeled {
-        // TODO: replace .c-labeled-input with this
-        // An input used in the Toolbar
-        // Assumes label is before the input
-        @include cControl();
+    &__options {
+      @include menuOuter();
+      @include menuInner();
+      display: flex;
 
-        input {
-            margin-left: $interiorMarginSm;
+      ul {
+        flex: 1 1 auto;
+        overflow: auto;
+      }
+
+      li {
+        &:before {
+          color: var(--optionIconColor) !important;
+          font-size: 0.8em !important;
         }
+      }
     }
 
-    &--sm {
-        // Small inputs, like small numerics
-        width: 40px;
+    &__afford-arrow {
+      $p: 2px;
+      font-size: 0.8em;
+      padding-bottom: $p;
+      padding-top: $p;
+      position: absolute;
+      right: 2px;
+      z-index: 2;
     }
+  }
 }
 
-input[type=number].c-input-number--no-spinners {
-    &::-webkit-inner-spin-button,
-    &::-webkit-outer-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-    }
-    -moz-appearance: textfield;
+input[type='number'].c-input-number--no-spinners {
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  -moz-appearance: textfield;
 }
 
 .c-labeled-input {
-    // An input used in the Toolbar
-    // Assumes label is before the input
-    @include cControl();
+  // An input used in the Toolbar
+  // Assumes label is before the input
+  @include cControl();
 
-    input {
-        margin-left: $interiorMarginSm;
-    }
+  input {
+    margin-left: $interiorMarginSm;
+  }
+}
+
+.c-scrollcontainer {
+  @include nice-input();
+  margin-top: $interiorMargin;
+  background: $scrollContainer;
+  border-radius: $controlCr;
+  overflow: auto;
+  padding: $interiorMarginSm;
 }
 
 // SELECTS
 select {
-    @include appearanceNone();
-    background-color: $colorSelectBg;
-    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3e%3cpath fill='%23#{svgColorFromHex($colorSelectArw)}' d='M5 5l5-5H0z'/%3e%3c/svg%3e");
-    color: $colorSelectFg;
-    box-shadow: $shdwSelect;
-    background-repeat: no-repeat, no-repeat;
-    background-position: right .4em top 80%, 0 0;
-    border: none;
-    border-radius: $controlCr;
-    padding: 2px 20px 2px $interiorMargin;
-
-    *,
-    option {
-        background: $colorBtnBg;
-        color: $colorBtnFg;
-    }
+  @include appearanceNone();
+  background-color: $colorSelectBg;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3e%3cpath fill='%23#{svgColorFromHex($colorSelectArw)}' d='M5 5l5-5H0z'/%3e%3c/svg%3e");
+  color: $colorSelectFg;
+  box-shadow: $shdwSelect;
+  background-repeat: no-repeat, no-repeat;
+  background-position: right 0.4em top 80%, 0 0;
+  border: none;
+  border-radius: $controlCr;
+  padding: 2px 20px 2px $interiorMargin;
+
+  *,
+  option {
+    background: $colorBtnBg;
+    color: $colorBtnFg;
+  }
 }
 
 // CHECKBOX LISTS
 // __input followed by __label
 .c-checkbox-list {
-    // Rows
-    &__row + &__row { margin-top: $interiorMarginSm; }
+  // Rows
+  &__row + &__row {
+    margin-top: $interiorMarginSm;
+  }
 
-    // input and label in each __row
-    &__row {
-        > * + * { margin-left: $interiorMargin; }
+  // input and label in each __row
+  &__row {
+    > * + * {
+      margin-left: $interiorMargin;
     }
+  }
+
+  li {
+    white-space: nowrap;
+  }
 }
 
 /******************************************************** TABS */
 .c-tabs {
-    // Single horizontal strip of tabs, with a bottom divider line
-    @include userSelectNone();
-    display: flex;
-    flex: 0 0 auto;
-    flex-wrap: wrap;
-    position: relative; // Required in case this is applied to a <ul>
-
-    &:before {
-        // Separator line at bottom of tabs
-        content: '';
-        display: block;
-        height: 1px;
-        width: 100%;
-        background: $colorBtnReverseBg;
-        position: absolute;
-        bottom: 0px;
-        z-index: 1;
-    }
+  // Single horizontal strip of tabs, with a bottom divider line
+  @include userSelectNone();
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  position: relative; // Required in case this is applied to a <ul>
+
+  &:before {
+    // Separator line at bottom of tabs
+    content: '';
+    display: block;
+    height: 1px;
+    width: 100%;
+    background: $colorTabsBaseline;
+    position: absolute;
+    bottom: 0px;
+    z-index: 1;
+  }
 }
 
 .c-tab {
-    // Used in Tab View, generic tabs
-    $notchSize: 7px;
-    $clipPath:
-        polygon(
-            0% 0%,
-            calc(100% - #{$notchSize}) 0%,
-            100% #{$notchSize},
-            100% calc(100% - #{$notchSize}),
-            100% 100%,
-            0% 100%
-        );
-    background: rgba($colorBtnBg, 0.7);
-    color: $colorBtnFg;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    flex: 1 1 auto;
-    margin: 1px 1px 0 0;
-    padding: $interiorMargin $interiorMarginLg;
-    white-space: nowrap;
-    clip-path: $clipPath;
-    -webkit-clip-path: $clipPath; // Safari
-
-    > * + * {
-        margin-left: $interiorMargin;
-    }
-
-    @include hover() {
-        filter: $filterHov;
-    }
-
-    &.is-current {
-        background: $colorBtnReverseBg;
-        color: $colorBtnReverseFg;
-        pointer-events: none;
-    }
+  // Used in Tab View, generic tabs
+  $notchSize: 7px;
+  $clipPath: polygon(
+    0% 0%,
+    calc(100% - #{$notchSize}) 0%,
+    100% #{$notchSize},
+    100% calc(100% - #{$notchSize}),
+    100% 100%,
+    0% 100%
+  );
+  background: $colorTabBg;
+  color: $colorTabFg;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  margin: 1px 1px 0 0;
+  padding: $interiorMargin $interiorMarginLg;
+  white-space: nowrap;
+  clip-path: $clipPath;
+  -webkit-clip-path: $clipPath; // Safari
+
+  > * + * {
+    margin-left: $interiorMargin;
+  }
+
+  @include hover() {
+    box-shadow: $shdwBtnHov;
+  }
+
+  &.is-current {
+    background: $colorTabCurrentBg;
+    color: $colorTabCurrentFg;
+  }
 }
 
 /******************************************************** HYPERLINKS AND HYPERLINK BUTTONS */
 .c-hyperlink {
-    display: inline-block;
-    color: $colorKey;
+  display: inline-block;
+  color: $colorKey;
 
-    &--button {
-        @include cButton();
-    }
+  &--button {
+    @include cButton();
+  }
 }
 
-.c-so-view--no-frame > .c-so-view__object-view > .c-hyperlink--button {
+.c-so-view--hyperlink.c-so-view--no-frame {
+  .c-hyperlink--button {
     @include abs();
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0;
+  }
+
+  .c-so-view__frame-controls {
+    display: none;
+  }
 }
 
 /******************************************************** MENUS */
-@mixin menuOuter() {
-    border-radius: $basicCr;
-    background: $colorMenuBg;
-    filter: $filterMenu;
-    text-shadow: $shdwMenuText;
-    padding: $interiorMarginSm;
-    box-shadow: $shdwMenu;
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    z-index: 100;
+.c-menu {
+  @include menuOuter();
+  @include menuPositioning();
+  @include menuInner();
+
+  &__section-hint {
+    $m: $interiorMargin;
+    margin: 0 0 $m 0;
+    padding: $m nth($menuItemPad, 2) 0 nth($menuItemPad, 2);
+
+    opacity: 0.6;
+    font-size: 0.9em;
+    font-style: italic;
+  }
+
+  &__section-separator {
+    $m: $interiorMargin;
+    border-top: 1px solid $colorInteriorBorder;
+    margin: $m 0;
+    padding: 0 nth($menuItemPad, 2) 0 nth($menuItemPad, 2);
+  }
+}
 
-    > * {
-        flex: 0 0 auto;
+.c-super-menu {
+  // Two column layout, menu items on left with detail of hover element on right
+  $m: $interiorMarginLg;
+  @include menuOuter();
+  @include menuPositioning();
+  display: flex;
+  height: auto;
+  padding: $interiorMarginLg;
+  flex-direction: row;
+
+  > [class*='__'] {
+    //flex: 1 1 50%;
+    //&:first-child {
+    //  margin-right: $m;
+    //}
+
+    &:last-child {
+      //border-left: 1px solid $colorInteriorBorder;
+      //padding-left: $m;
+    }
+  }
+
+  &__menu {
+    @include menuInner();
+    flex: 1 1 50%;
+    margin-right: $m;
+    overflow: auto;
+
+    ul {
+      margin-right: $interiorMarginSm; // Fend off scrollbar
     }
-}
 
-@mixin menuInner() {
     li {
-        @include cControl();
-        justify-content: start;
-        color: $colorMenuFg;
-        cursor: pointer;
-        display: flex;
-        padding: nth($menuItemPad, 1) nth($menuItemPad, 2);
-        transition: $transIn;
-        white-space: nowrap;
-
-        @include hover {
-            background: $colorMenuHovBg;
-            color: $colorMenuHovFg;
-            &:before {
-                color: $colorMenuHovIc;
-            }
-        }
-
-        &:before {
-            color: $colorMenuIc;
-            font-size: 1em;
-            margin-right: $interiorMargin;
-            min-width: 1em;
-        }
+      border-radius: $controlCr;
+    }
+  }
 
-        &:not([class*='icon']):before {
-             content: ''; // Enable :before so that menu items without an icon still indent properly
-        }
+  &__item-description {
+    border-left: 1px solid $colorInteriorBorder;
+    flex: 1 1 50%;
+    padding-left: $m;
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
 
-        .menus-no-icon & {
-            &:before { display: none; }
-        }
+    > * + * {
+      margin-top: $interiorMarginLg;
     }
-}
 
-.c-menu {
-    @include menuOuter();
-    @include menuInner();
+    .l-item-description {
+      &__icon {
+        min-height: 20%;
+        margin: 10% 25%;
+      }
 
-    &__section-hint {
-        $m: $interiorMargin;
-        margin: 0 0 $m 0;
-        padding: $m nth($menuItemPad, 2) 0 nth($menuItemPad, 2);
-
-        opacity: 0.6;
-        font-size: 0.9em;
-        font-style: italic;
-    }
+      &__name {
+        color: $colorMenuFg;
+        flex: 0 0 auto;
+        font-size: 1.25em;
+      }
 
-    &__section-separator {
-        $m: $interiorMargin;
-        border-top: 1px solid $colorInteriorBorder;
-        margin: $m 0;
-        padding: 0 nth($menuItemPad, 2) 0 nth($menuItemPad, 2);
+      &__description {
+        font-size: $fontBaseSize;
+      }
     }
+  }
 }
 
-.c-super-menu {
-    // Two column layout, menu items on left with detail of hover element on right
-    @include menuOuter();
-    display: flex;
-    padding: $interiorMarginLg;
-    flex-direction: row;
+.c-super-menu--sm {
+  // Small version of the super menu, used by the compact Time Conductor
+  height: 120px;
+  width: 500px;
 
-    > [class*="__"] {
-        $m: $interiorMarginLg;
-        flex: 1 1 50%;
-        &:first-child {
-            margin-right: $m;
-        }
+  .c-super-menu__menu {
+    flex: 1 1 30%;
+  }
 
-        &:last-child {
-            border-left: 1px solid $colorInteriorBorder;
-            padding-left: $m;
-        }
-    }
+  .c-super-menu__item-description {
+    flex: 1 1 70%;
 
-    &__menu {
-        @include menuInner();
-        overflow: auto;
-
-        ul {
-            margin-right: $interiorMarginSm; // Fend off scrollbar
-        }
+    [class*="__icon"] {
+      display: none !important;
+    }
 
-        li {
-            border-radius: $controlCr;
-        }
+    [class*="__name"] {
+      margin-top: 0 !important;
     }
 
-    &__item-description {
-        display: flex;
-        flex-direction: column;
-        justify-content: stretch;
-
-        .l-item-description {
-            &__name,
-            &__description {
-                margin-top: $interiorMarginLg;
-            }
-
-            &__icon {
-                min-height: 20%;
-                margin: 10% 25%;
-            }
-
-            &__name {
-                color: $colorMenuFg;
-                flex: 0 0 auto;
-                font-size: 1.25em;
-            }
-
-            &__description {
-                font-size: $fontBaseSize;
-            }
-        }
+    [class*="__item-description"] {
+      min-width: 200px;
     }
+  }
 }
+
 /******************************************************** CONTROL BARS */
 .c-control-bar {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 
-    > * + * {
-        margin-left: $interiorMarginSm;
-    }
+  > * + * {
+    margin-left: $interiorMarginSm;
+  }
 
-    &__label {
-        display: inline-block;
-        white-space: nowrap;
-    }
+  &__label {
+    display: inline-block;
+    white-space: nowrap;
+  }
 }
 
 /******************************************************** PALETTES */
 .c-palette {
-    display: flex;
-    flex-flow: column nowrap;
-    line-height: normal;
-
-    &__items {
-        display: grid;
-        grid-gap: 1px;
-        grid-template-columns: repeat(auto-fill, 12px);
-        flex: 1 1 auto;
+  display: flex;
+  flex-flow: column nowrap;
+  line-height: normal;
+
+  &__items {
+    display: grid;
+    grid-gap: 1px;
+    grid-template-columns: repeat(auto-fill, 12px);
+    flex: 1 1 auto;
 
-        .c-menu & {
-            min-width: $paletteMenuMinW;
-        }
+    .c-menu & {
+      min-width: $paletteMenuMinW;
     }
+  }
 
-    &__item {
-        $d: 12px;
-        border: 1px solid transparent;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        align-content: center;
-        width: $d;
-        height: $d;
-        text-align: center;
-        transition: $transOut;
-
-        &:hover {
-            transition: $transIn;
-        }
+  &__item {
+    $d: 12px;
+    border: 1px solid transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    align-content: center;
+    width: $d;
+    height: $d;
+    text-align: center;
 
-        &.is-selected {
-            border-width: 1px;
-        }
+    &.is-selected {
+      border-width: 1px;
     }
+  }
 
-    &__item-none {
-        @include userSelectNone();
-        flex: 0 0 auto;
-        display: flex;
-        align-items: center;
-        margin-bottom: $interiorMarginSm;
-
-        .c-palette__item {
-            @include noColor();
-            border-color: $paletteItemBorderInnerColor;
-            margin-right: $interiorMarginSm;
-        }
+  &__item-none {
+    @include userSelectNone();
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    margin-bottom: $interiorMarginSm;
+
+    .c-palette__item {
+      @include noColor();
+      border-color: $paletteItemBorderInnerColor;
+      margin-right: $interiorMarginSm;
     }
+  }
 
-    &--color {
-        .c-palette__item {
-            &:hover {
-                border-color: rgba($paletteItemBorderOuterColorSelected, 0.7);
-                box-shadow: inset rgba($paletteItemBorderInnerColorSelected, 0.7) 0 0 0 1px;
-            }
-
-            &.is-selected {
-                border-color: $paletteItemBorderOuterColorSelected !important;
-                box-shadow: inset rgba($paletteItemBorderInnerColorSelected, 1) 0 0 0 1px;
-            }
-        }
+  &--color {
+    .c-palette__item {
+      &:hover {
+        border-color: rgba($paletteItemBorderOuterColorSelected, 0.7);
+        box-shadow: inset rgba($paletteItemBorderInnerColorSelected, 0.7) 0 0 0 1px;
+      }
+
+      &.is-selected {
+        border-color: $paletteItemBorderOuterColorSelected !important;
+        box-shadow: inset rgba($paletteItemBorderInnerColorSelected, 1) 0 0 0 1px;
+      }
     }
+  }
 
-    &--icon {
-        .c-palette__items {
-            grid-gap: 3px;
-        }
+  &--icon {
+    .c-palette__items {
+      grid-gap: 3px;
+    }
 
-        .c-palette__item {
-            border-radius: $smallCr;
-            font-size: 0.6rem;
+    .c-palette__item {
+      border-radius: $smallCr;
+      font-size: 0.6rem;
 
-            &:before {
-                display: block;
-                width: 100%;
-            }
+      &:before {
+        display: block;
+        width: 100%;
+      }
 
-            &:hover {
-                box-shadow: rgba($paletteItemBorderInnerColorSelected, 0.3) 0 0 0 1px;
-            }
+      &:hover {
+        box-shadow: rgba($paletteItemBorderInnerColorSelected, 0.3) 0 0 0 1px;
+      }
 
-            &.is-selected {
-                box-shadow: rgba($paletteItemBorderInnerColorSelected, 0.6) 0 0 0 1px;
-            }
-        }
+      &.is-selected {
+        box-shadow: rgba($paletteItemBorderInnerColorSelected, 0.6) 0 0 0 1px;
+      }
     }
+  }
 }
 
 /******************************************************** SWATCHES */
 .c-color-swatch {
-    border: 1px solid rgba(#fff, 0.2);
-    box-shadow: rgba(#000, 0.2) 0 0 0 1px;
+  border: 1px solid rgba(#fff, 0.2);
+  box-shadow: rgba(#000, 0.2) 0 0 0 1px;
 }
 
 /******************************************************** TOOLBAR */
 .c-ctrl-wrapper {
-    @include cCtrlWrapper();
+  @include cCtrlWrapper();
 }
 
 .c-toolbar,
 .c-toolbar .c-ctrl-wrapper {
-    display: flex;
-    align-items: stretch;
+  display: flex;
+  align-items: stretch;
 }
 
 @mixin cToolbarSeparator() {
-    $m: 1px;
-    $b: 1px;
-    display: block;
-    width: $m + $b; // Allow for border
-    border-right: $b solid $colorInteriorBorder;
-    margin-right: $m;
+  $m: 1px;
+  $b: 1px;
+  display: block;
+  width: $m + $b; // Allow for border
+  border-right: $b solid $colorInteriorBorder;
+  margin-right: $m;
 }
 
 .c-separator {
-    @include cToolbarSeparator();
-    height: 100%;
+  @include cToolbarSeparator();
+  height: 100%;
 }
 
 .c-row-separator {
-    border-top: 1px solid $colorInteriorBorder;
-    height: 1px;
+  border-top: 1px solid $colorInteriorBorder;
+  height: 1px;
 }
 
 .c-toolbar {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 
-    > * {
-        // First level items
-        display: flex;
+  > * {
+    // First level items
+    display: flex;
 
-        > * + * {
-            margin-left: 2px;
-        }
+    > * + * {
+      margin-left: 2px;
     }
+  }
 
-    &__separator {
-        @include cToolbarSeparator();
-    }
+  &__separator {
+    @include cToolbarSeparator();
+  }
 
-    .c-icon-button,
-    .c-labeled-input {
-        color: $editUIBaseColorFg;
-    }
+  .c-icon-button,
+  .c-labeled-input {
+    color: $editUIBaseColorFg;
+  }
 
-    .c-icon-button {
-        @include cControl();
-        $pLR: $interiorMargin - 1;
-        $pTB: 2px;
-        padding: $pTB $pLR;
+  .c-icon-button {
+    @include cControl();
+    $pLR: $interiorMargin - 1;
+    $pTB: 2px;
+    padding: $pTB $pLR;
 
-        @include hover() {
-            background: $editUIBaseColorHov !important;
-            color: $editUIBaseColorFg !important;
-        }
+    @include hover() {
+      background: $editUIBaseColorHov !important;
+      color: $editUIBaseColorFg !important;
+    }
 
-        &--menu {
-            $p: 4px;
-            padding-top: $p;
-            padding-bottom: $p;
-        }
+    &--menu {
+      $p: 4px;
+      padding-top: $p;
+      padding-bottom: $p;
+    }
 
-        &--swatched {
-            padding-bottom: floor($pTB / 2);
-            width: 2em; // Standardize the width
-        }
+    &--swatched {
+      padding-bottom: floor(math.div($pTB, 2));
+      width: 2em; // Standardize the width
+    }
+
+    &[class*='--caution'] {
+      &:before {
+        color: $colorBtnCautionBg;
+      }
 
-        &[class*='--caution'] {
-            &:before {
-                color: $colorBtnCautionBg;
-            }
-
-            @include hover() {
-                background: rgba($colorBtnCautionBgHov, 0.2);
-                :before {
-                    color: $colorBtnCautionBgHov;
-                }
-            }
+      @include hover() {
+        background: rgba($colorBtnCautionBgHov, 0.2);
+        :before {
+          color: $colorBtnCautionBgHov;
         }
+      }
     }
+  }
 
-    .c-labeled-input {
-        font-size: 0.9em;
-        input[type='number'] {
-            width: 40px; // Number input sucks and must have size set using this method
-        }
+  .c-labeled-input {
+    font-size: 0.9em;
+    input[type='number'] {
+      width: 40px; // Number input sucks and must have size set using this method
+    }
 
-        + .c-labeled-input {
-            margin-left: $interiorMargin;
-        }
+    + .c-labeled-input {
+      margin-left: $interiorMargin;
     }
+  }
 }
 
 /********* Button Sets */
 .c-button-set {
-    display: inline-flex;
-    flex: 0 0 auto;
+  display: inline-flex;
+  flex: 0 0 auto;
 
-    > * {
-        // Assume buttons are immediate descendants
-        flex: 0 0 auto;
-    }
+  > * {
+    // Assume buttons are immediate descendants
+    flex: 0 0 auto;
+  }
 
-    &[class*='--strip'] {
-        // Buttons are smashed together with minimal margin
-        // c-buttons don't have border-radius between buttons, creates a tool-button-strip look
-        // c-icon-buttons get grouped more closely together
-        [class^="c-button"] {
-            // Only apply the following to buttons that have background, eg. c-button
-            border-radius: 0;
-        }
+  &[class*='--strip'] {
+    // Buttons are smashed together with minimal margin
+    // c-buttons don't have border-radius between buttons, creates a tool-button-strip look
+    // c-icon-buttons get grouped more closely together
+    [class^='c-button'] {
+      // Only apply the following to buttons that have background, eg. c-button
+      border-radius: 0;
     }
+  }
 
-    &[class*='--strip-h'] {
-        // Horizontal strip
+  &[class*='--strip-h'] {
+    // Horizontal strip
 
-        + .c-button-set {
-            margin-left: $interiorMargin;
-        }
+    + .c-button-set {
+      margin-left: $interiorMargin;
+    }
 
-        [class^="c-button"] {
-            + * {
-                margin-left: 1px;
-            }
+    [class^='c-button'] {
+      + * {
+        margin-left: 1px;
+      }
 
-            &:first-child {
-                border-top-left-radius: $controlCr;
-                border-bottom-left-radius: $controlCr;
-            }
+      &:first-child {
+        border-top-left-radius: $controlCr;
+        border-bottom-left-radius: $controlCr;
+      }
 
-            &:last-child {
-                border-top-right-radius: $controlCr;
-                border-bottom-right-radius: $controlCr;
-            }
-        }
+      &:last-child {
+        border-top-right-radius: $controlCr;
+        border-bottom-right-radius: $controlCr;
+      }
     }
+  }
 }
 
 /******************************************************** STYLE EDITING */
 .c-style {
-    display: flex;
-    flex: 1 1 auto;
-    align-items: center;
-    justify-content: space-between;
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: space-between;
 
-    &__controls {
-        // Holds thumb, icon buttons
-        display: flex;
-        flex: 1 0 auto;
+  &__controls {
+    // Holds thumb, icon buttons
+    display: flex;
+    flex: 1 0 auto;
 
-        > * + * { margin-left: $interiorMargin; }
+    > * + * {
+      margin-left: $interiorMargin;
     }
+  }
 
-    &__button-save,
-    &__button-delete {
-        // Holds save and delete buttons accordingly
-        flex: 0 0 auto;
-    }
+  &__button-save,
+  &__button-delete {
+    // Holds save and delete buttons accordingly
+    flex: 0 0 auto;
+  }
 
-    &--saved {
-        border-radius: $controlCr;
-        padding: $interiorMargin !important;
-        cursor: pointer;
+  &--saved {
+    border-radius: $controlCr;
+    padding: $interiorMargin !important;
+    cursor: pointer;
 
-        @include hover {
-            background: rgba($editUIBaseColorHov, 0.3);
-        }
+    @include hover {
+      background: rgba($editUIBaseColorHov, 0.3);
+    }
 
-        .c-style__controls {
-            [class*='button'] {
-                pointer-events: none;
+    .c-style__controls {
+      [class*='button'] {
+        pointer-events: none;
 
-                &:before {
-                    opacity: $controlDisabledOpacity;
-                }
-            }
+        &:before {
+          opacity: $controlDisabledOpacity;
         }
+      }
     }
+  }
 }
 
 .c-style-thumb {
-    background-size: cover;
-    border: 1px solid transparent;
-    border-radius: $basicCr;
-    box-shadow: rgba($colorBodyFg, 0.4) 0 0 3px;
-    flex: 0 0 auto;
-    padding: $interiorMargin;
-    text-align: center;
-    width: 50px;
-
-    &--mixed {
-        @include mixedBg();
-    }
+  background-size: cover;
+  border: 1px solid transparent;
+  border-radius: $basicCr;
+  box-shadow: rgba($colorBodyFg, 0.4) 0 0 3px;
+  flex: 0 0 auto;
+  padding: $interiorMargin;
+  text-align: center;
+  width: 50px;
+
+  &--mixed {
+    @include mixedBg();
+  }
 }
 
 /******************************************************** SLIDERS */
 .c-slider {
-    @include cControl();
-    > * + * { margin-left: $interiorMargin; }
+  @include cControl();
+  > * + * {
+    margin-left: $interiorMargin;
+  }
 }
 
-
 /******************************************************** SLIDERS AND RANGE */
 @mixin sliderKnobRound($h: 12px) {
-    @include themedButton();
-    cursor: pointer;
-    width: $h;
-    height: $h;
-    border-radius: 50% !important;
+  @include themedButton();
+  cursor: pointer;
+  width: $h;
+  height: $h;
+  border-radius: 50% !important;
 }
 
 @mixin sliderTrack($bg: $scrollbarTrackColorBg, $knobH: 12px, $trackH: 3px) {
-    border-radius: 2px;
-    $breakPointPx: floor(($knobH - $trackH) / 2);
-    $bp1: $breakPointPx;
-    $bp2: $breakPointPx + $trackH;
-    box-sizing: border-box;
-    // For cross-browser compatibility, the track needs to be the same height as the knob.
-    height: $knobH;
-    // Gradient visually adds a horizontal line smaller than the knob
-    background: linear-gradient(0deg, rgba($bg,0) $bp1, $bg $bp1, $bg $bp2, rgba($bg,0) $bp2);
+  border-radius: 2px;
+  $breakPointPx: floor(math.div($knobH - $trackH, 2));
+  $bp1: $breakPointPx;
+  $bp2: $breakPointPx + $trackH;
+  box-sizing: border-box;
+  // For cross-browser compatibility, the track needs to be the same height as the knob.
+  height: $knobH;
+  // Gradient visually adds a horizontal line smaller than the knob
+  background: linear-gradient(0deg, rgba($bg, 0) $bp1, $bg $bp1, $bg $bp2, rgba($bg, 0) $bp2);
 }
 
-input[type="range"] {
-    // HTML5 range inputs
-    $knobH: 11px;
-    $trackH: 3px;
-    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
-    background: transparent; /* Otherwise white in Chrome */
-
-    &:focus {
-        outline: none; /* Removes the blue border. */
-    }
-
-    // Thumb
-    &::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        @include sliderKnobRound($knobH);
-    }
-    &::-moz-range-thumb {
-        border: none;
-        @include sliderKnobRound($knobH);
-    }
-    &::-ms-thumb {
-        border: none;
-        @include sliderKnobRound($knobH);
-    }
-
-    // Track
-    &::-webkit-slider-runnable-track {
-        width: 100%;
-        @include sliderTrack($knobH: $knobH, $trackH: $trackH);
-    }
-
-    &::-moz-range-track {
-        width: 100%;
-        @include sliderTrack($knobH: $knobH, $trackH: $trackH);
-    }
+input[type='range'] {
+  // HTML5 range inputs
+  $knobH: 11px;
+  $trackH: 3px;
+  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
+  background: transparent; /* Otherwise white in Chrome */
+
+  &:focus {
+    outline: none; /* Removes the blue border. */
+  }
+
+  // Thumb
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    @include sliderKnobRound($knobH);
+  }
+  &::-moz-range-thumb {
+    border: none;
+    @include sliderKnobRound($knobH);
+  }
+  &::-ms-thumb {
+    border: none;
+    @include sliderKnobRound($knobH);
+  }
+
+  // Track
+  &::-webkit-slider-runnable-track {
+    width: 100%;
+    @include sliderTrack($knobH: $knobH, $trackH: $trackH);
+  }
+
+  &::-moz-range-track {
+    width: 100%;
+    @include sliderTrack($knobH: $knobH, $trackH: $trackH);
+  }
 }
 
 /******************************************************** LOCAL CONTROLS */
 .h-local-controls {
-    // Holder for local controls
-    &--horz {
-        // Horizontal layout be
-        display: inline-flex;
-        align-items: center;
-    }
+  // Holder for local controls
+  &--horz {
+    // Horizontal layout be
+    display: inline-flex;
+    align-items: center;
+  }
+
+  [class*='--menus-aligned'] {
+    // Contains top level elements that hold dropdown menus
+    // Top level elements use display: contents to allow their menus to compactly align
+    // 03-18-22: used in ImageControls.vue
+    display: flex;
+    flex-direction: row;
+  }
 }
 
 .c-local-controls {
-    // Controls that are in close proximity to an element they effect
-    &--show-on-hover {
-        // Hidden by default; requires a hover 1 - 3 levels above to display
-        transition: $transOut;
-        opacity: 0;
-        pointer-events: none;
-    }
+  // Controls that are in close proximity to an element they effect
+  &--show-on-hover {
+    // Hidden by default; requires a hover 1 - 3 levels above to display
+    @include transition(opacity, $transOutTime);
+    opacity: 0;
+    pointer-events: none;
+  }
 }
 
 .has-local-controls:hover {
-    > .c-local-controls--show-on-hover,
-    > * > .c-local-controls--show-on-hover,
-    > * > * > .c-local-controls--show-on-hover,
-    > * > * > * > .c-local-controls--show-on-hover
-    {
-        transition: $transIn;
-        opacity: 1;
-        pointer-events: inherit;
-    }
+  > .c-local-controls--show-on-hover,
+  > * > .c-local-controls--show-on-hover,
+  > * > * > .c-local-controls--show-on-hover,
+  > * > * > * > .c-local-controls--show-on-hover {
+    @include transition(opacity);
+    opacity: 1;
+    pointer-events: inherit;
+
+    &[disabled] {
+      opacity: $controlDisabledOpacity;
+    }
+  }
 }
 
 /***************************************************** DRAG AND DROP */
 .c-drop-hint {
-    // Used in Tabs View, Flexible Grid Layouts
-    @include abs();
-    background-color: $colorDropHintBg;
-    color: $colorDropHintFg;
-    border-radius: $basicCr;
-    border: 1px dashed $colorDropHintFg;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    transition: $transOut;
-    z-index: 50;
-
-    &:not(.c-drop-hint--always-show) {
-        opacity: 0; // Must use this (rather than display: none) to enable transition effects
-        pointer-events: none;
-    }
-
-    &:before {
-        $h: 80%;
-        $mh: 25px;
-        background: $bg-icon-plus;
-        background-size: contain;
-        background-position: center center;
-        background-repeat: no-repeat;
-        content: '';
-        display: block;
-        filter: $colorKeyFilterHov;
-        height: $h; width: $h;
-        max-height: $mh; max-width: $mh;
-    }
-
-    .is-dragging &,
-    &.is-dragging {
-        pointer-events: inherit;
-        transition: $transIn;
-        opacity: 0.8;
-    }
-
-    .is-mouse-over &,
-    &.is-mouse-over {
-        transition: $transIn;
-        background-color: $colorDropHintBgHov;
-        opacity: 0.9;
-    }
+  // Used in Tabs View, Flexible Grid Layouts
+  @include abs();
+  @include transition($prop: background-color, $dur: $transOutTime);
+  background-color: $colorDropHintBg;
+  color: $colorDropHintFg;
+  border-radius: $basicCr;
+  border: 1px dashed $colorDropHintFg;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 50;
+
+  &:not(.c-drop-hint--always-show) {
+    opacity: 0; // Must use this (rather than display: none) to enable transition effects
+    pointer-events: none;
+  }
+
+  &:before {
+    $h: 80%;
+    $mh: 25px;
+    background: $bg-icon-plus;
+    background-size: contain;
+    background-position: center center;
+    background-repeat: no-repeat;
+    content: '';
+    display: block;
+    filter: $colorKeyFilterHov;
+    height: $h;
+    width: $h;
+    max-height: $mh;
+    max-width: $mh;
+  }
+
+  .is-dragging &,
+  &.is-dragging {
+    pointer-events: inherit;
+    opacity: 0.8;
+  }
+
+  .is-mouse-over &,
+  &.is-mouse-over {
+    background-color: $colorDropHintBgHov;
+    opacity: 0.9;
+  }
 }
 
 /***************************************************** LEGACY */
 .l-btn-set {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 }
diff --git a/src/styles/_forms.scss b/src/styles/_forms.scss
index c67d5685bbd..95cc411166f 100644
--- a/src/styles/_forms.scss
+++ b/src/styles/_forms.scss
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,214 +19,326 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+@mixin validationState($sym, $c) {
+  @include glyphAfter($sym);
+  &:after {
+    color: $c;
+    margin-left: $interiorMargin;
+  }
+}
+
 .c-form {
+  color: $colorFormText;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  overflow: hidden;
+
+  > * + * {
+    margin-top: $interiorMarginLg !important;
+  }
+
+  &__top-bar,
+  &__bottom-bar {
+    flex: 0 0 auto;
+  }
+
+  &__contents {
     display: flex;
     flex-direction: column;
+    flex: 1 1 auto;
+    overflow: auto;
+    padding-right: $interiorMargin;
+  }
 
-    &__section {
-        display: inherit;
-        flex-direction: column;
-    }
+  &__section {
+    display: contents;
+  }
 
-    &__row {
-        display: flex;
+  &__row {
+    display: flex;
+    padding: $formTBPad 0;
+    &:not(.first) {
+      border-top: 1px solid $colorFormLines;
     }
+    flex: 0 0 auto;
 
-    &__header {
-        border-radius: $basicCr;
-        background: $colorFormSectionHeaderBg;
-        color: $colorFormSectionHeaderFg;
-        font-size: inherit;
-        font-weight: normal;
-        margin: $interiorMargin 0;
-        padding: $formTBPad $formLRPad;
-        text-transform: uppercase;
+    &.grows {
+      flex: 1 1 auto;
     }
-}
+  }
 
-/***************************************************** LEGACY */
-.section-header {
+  &__section-header {
     border-radius: $basicCr;
-    color: lighten($colorBodyFg, 20%);
+    background: $colorFormSectionHeaderBg;
+    color: $colorFormSectionHeaderFg;
+    flex: 0 0 auto;
     font-size: inherit;
+    font-weight: normal;
     margin: $interiorMargin 0;
     padding: $formTBPad $formLRPad;
     text-transform: uppercase;
-    .view-control {
-        display: inline-block;
-        margin-right: $interiorMargin;
-        width: 1em;
-        height: 1em;
+  }
+
+  &--sub-grid {
+    // 3 columns: <req> <label> <input/control>
+    display: grid;
+    grid-column-gap: $interiorMargin;
+    grid-template-columns: 20px max-content 1fr;
+    grid-row-gap: $interiorMargin;
+    margin-top: $interiorMarginLg;
+    width: max-content;
+
+    .c-form__row {
+      display: contents;
     }
+  }
 }
 
-.form {
-    color: $colorFormText;
+.c-form-row {
+  align-items: start;
+
+  &__label,
+  &__state-indicator {
+    flex: 0 0 auto;
+    padding: 2px 0;
+  }
+
+  &__label {
+    width: 30%;
+    min-width: 100px;
+    order: 1;
+  }
+
+  &__state-indicator {
+    order: 2;
+    width: 30px;
+    text-align: center;
+
+    &.invalid,
+    &.invalid.req {
+      @include validationState($glyph-icon-x, $colorFormInvalid);
+    }
+
+    &.valid,
+    &.valid.req {
+      @include validationState($glyph-icon-check, $colorFormValid);
+    }
+
+    &.req {
+      @include validationState($glyph-icon-asterisk, $colorFormRequired);
+    }
+  }
+
+  &__controls {
+    flex: 1 1 auto;
+    order: 3;
+  }
+}
+
+.c-form-control {
+  &--locator > .c-tree {
     height: 100%;
+  }
+
+  &--clock-display-format-fields {
+    display: flex;
+
+    > * {
+      flex: 0 0 auto;
+      + * {
+        margin-left: $interiorMargin;
+      }
+    }
+  }
+
+  &--datetime {
+    $size: max-content;
+    display: grid;
+    grid-template-columns: repeat(5, $size);
+    grid-template-rows: $size;
+    grid-row-gap: 3px;
+    grid-column-gap: $interiorMargin;
+    align-items: stretch;
+
+    .hint {
+      align-self: center;
+      opacity: 0.7;
+    }
+  }
+}
+
+.l-input-lg {
+  input[type='text'],
+  input[type='search'],
+  input[type='number'],
+  textarea[type='text'] {
     width: 100%;
+  }
+}
+
+.l-input-sm {
+  input[type='text'],
+  input[type='search'],
+  input[type='number'] {
+    width: 50px;
+  }
+}
 
-    .l-form-section {
-        margin-bottom: $interiorMarginLg * 2;
-        position: relative;
-        &.grows {
-            .l-section-body,
-            .form-row {
-                flex: 1 1 auto;
-                .wrapper {
-                    height: 100%;
-                }
-            }
+/***************************************************** LEGACY */
+.section-header {
+  border-radius: $basicCr;
+  color: lighten($colorBodyFg, 20%);
+  font-size: inherit;
+  margin: $interiorMargin 0;
+  padding: $formTBPad $formLRPad;
+  text-transform: uppercase;
+  .view-control {
+    display: inline-block;
+    margin-right: $interiorMargin;
+    width: 1em;
+    height: 1em;
+  }
+}
+
+.form {
+  color: $colorFormText;
+  height: 100%;
+  width: 100%;
+
+  .l-form-section {
+    margin-bottom: $interiorMarginLg * 2;
+    position: relative;
+    &.grows {
+      .l-section-body,
+      .form-row {
+        flex: 1 1 auto;
+        .wrapper {
+          height: 100%;
         }
+      }
     }
+  }
 
-    .form-row {
-        $m: $interiorMargin;
-        box-sizing: border-box;
-        border-top: 1px solid $colorFormLines;
-        padding: $formTBPad 0;
-        position: relative;
+  .form-row {
+    $m: $interiorMargin;
+    box-sizing: border-box;
+    border-top: 1px solid $colorFormLines;
+    padding: $formTBPad 0;
+    position: relative;
 
-        &.first {
-            border-top: none;
-        }
+    &.first {
+      border-top: none;
+    }
 
-        >.label,
-        >.controls {
-            box-sizing: border-box;
-            font-size: 0.8rem;
-        }
+    > .label,
+    > .controls {
+      box-sizing: border-box;
+      font-size: 0.8rem;
+    }
 
-        >.label {
-            // Only style this way for immediate children of .form-row; prevents problems when .label is used in .controls section of a form
-            min-width: 120px;
-            order: 1;
-            position: relative;
-            width: $formLabelW;
-        }
+    > .label {
+      // Only style this way for immediate children of .form-row; prevents problems when .label is used in .controls section of a form
+      min-width: 120px;
+      order: 1;
+      position: relative;
+      width: $formLabelW;
+    }
 
-        .value {
-            color: $colorInputFg;
-        }
+    .value {
+      color: $colorInputFg;
+    }
+
+    .controls {
+      order: 9;
+      position: relative;
+      flex: 1 1 auto;
 
-        .controls {
-            order: 2;
-            position: relative;
-            flex: 1 1 auto;
-
-            .l-composite-control {
-                &.l-checkbox {
-                    display: inline-block;
-                    line-height: $formRowCtrlsH;
-                    margin-right: 5px;
-                }
-            }
-
-            .l-input-lg { // LEGACY FORM SUPPORT
-                input[type=text],
-                input[type=search],
-                input[type=number] {
-                    width: 100%;
-                }
-            }
-
-            select {
-                margin-right: $interiorMargin;
-            }
+      .l-composite-control {
+        &.l-checkbox {
+          display: inline-block;
+          line-height: $formRowCtrlsH;
+          margin-right: 5px;
+        }
+      }
+
+      .l-input-lg {
+        // LEGACY FORM SUPPORT
+        input[type='text'],
+        input[type='search'],
+        input[type='number'] {
+          width: 100%;
         }
+      }
 
-        .hint, .field-hints {  color: $colorFieldHint;  }
+      select {
+        margin-right: $interiorMargin;
+      }
+    }
+
+    .hint,
+    .field-hints {
+      color: $colorFieldHint;
     }
+  }
 }
 
 .selector-list {
-    // Displays tree view in dialogs
-    @include nice-input();
-    padding: $interiorMargin;
-    position: relative;
-    min-height: 0; // Chrome 73 overflow bug fix
-    height: 100%;
-    >.wrapper {
-        $p: $interiorMargin;
-        box-sizing: border-box;
-        overflow: auto;
-    }
+  // Displays tree view in dialogs
+  @include nice-input();
+  padding: $interiorMargin;
+  position: relative;
+  min-height: 0; // Chrome 73 overflow bug fix
+  height: 100%;
+  > .wrapper {
+    $p: $interiorMargin;
+    box-sizing: border-box;
+    overflow: auto;
+  }
 }
 
 .l-controls-first .form .form-row,
 .form .form-row.l-controls-first {
-    >.label,
-    >.controls {
-        line-height: inherit;
-        min-height: inherit;
-    }
-    >.label {
-        flex: 1 1 auto;
-        min-width: 0;
-        width: auto;
-        order: 2;
-    }
-    >.control,
-    >.controls {
-        flex: 0 0 auto;
-        margin-right: $interiorMargin;
-        order: 1;
-    }
+  > .label,
+  > .controls {
+    line-height: inherit;
+    min-height: inherit;
+  }
+  > .label {
+    flex: 1 1 auto;
+    min-width: 0;
+    width: auto;
+    order: 2;
+  }
+  > .control,
+  > .controls {
+    flex: 0 0 auto;
+    margin-right: $interiorMargin;
+    order: 1;
+  }
 }
 
 .l-controls-under.l-flex-row {
-    // Change to use column layout
-    flex-direction: column;
-    .flex-elem {
-        margin-bottom: $interiorMarginLg;
-    }
+  // Change to use column layout
+  flex-direction: column;
+  .flex-elem {
+    margin-bottom: $interiorMarginLg;
+  }
 }
 
 .l-composite-control {
-    vertical-align: middle;
-    &:not(.l-inline) {
-        margin-bottom: $interiorMargin;
-    }
-    &.l-inline {
-        display: inline-block;
-    }
-    &.l-checkbox {
-        .composite-control-label {
-            line-height: 18px;
-        }
-    }
-}
-
-.autocomplete {
-    input {
-        width: 226px;
-        padding: 5px 0px 5px 7px;
-    }
-    .icon-arrow-down {
-        position: absolute;
-        top: 8px;
-        left: 210px;
-        font-size: 10px;
-        cursor: pointer;
-    }
-    .autocompleteOptions {
-        border: 1px solid $colorFormLines;
-        border-radius: 5px;
-        width: 224px;
-        max-height: 170px;
-        overflow-y: auto;
-        overflow-x: hidden;
-        li {
-            border: 1px solid $colorFormLines;
-            padding: 8px 0px 8px 5px;
-            .optionText {
-                cursor: pointer;
-            }
-        }
-        .optionPreSelected {
-            background-color: $colorInspectorSectionHeaderBg;
-            color: $colorInspectorSectionHeaderFg;
-        }
+  vertical-align: middle;
+  &:not(.l-inline) {
+    margin-bottom: $interiorMargin;
+  }
+  &.l-inline {
+    display: inline-block;
+  }
+  &.l-checkbox {
+    .composite-control-label {
+      line-height: 18px;
     }
+  }
 }
 
 /********* COMPACT FORM */
@@ -237,141 +349,113 @@
 
 .l-compact-form .tree ul li,
 .l-compact-form ul li {
-    padding: 2px 0;
+  padding: 2px 0;
 }
 
-
 .l-compact-form {
-    $h: $btnStdH;
-    $labelW: 40%;
-    $minW: $labelW;
-    ul {
-        li {
-            display: flex;
-            align-items: stretch;
-            padding: $interiorMargin 0;
-
-            label,
-            .control {
-                display: flex;
-            }
-            label {
-                line-height: $h;
-                width: $labelW;
-            }
-            .controls {
-                display: flex;
-                flex-wrap: wrap;
-                align-items: flex-start;
-                flex-grow: 1;
-                margin-left: $interiorMargin;
-                min-height: $h;
-                line-height: $h;
-                input[type="text"],
-                input[type="search"],
-                input[type="number"],
-                button,
-                select {
-                    min-height: $h;
-                }
-
-                > * + * {
-                    margin-left: $interiorMarginSm;
-                }
-            }
-
-            &.connects-to-previous {
-                padding-top: 0;
-            }
-
-            &.section-header {
-                margin-top: $interiorMarginLg;
-                border-top: 1px solid $colorFormLines;
-            }
-
-            &.controls-first {
-                .control {
-                    flex-grow: 0;
-                    margin-right: $interiorMargin;
-                    min-width: 0;
-                    order: 1;
-                    width: auto;
-                }
-                label {
-                    flex-grow: 1;
-                    order: 2;
-                    width: auto;
-                }
-            }
-            &.controls-under {
-                display: block;
-                .control, label {
-                    display: block;
-                    width: auto;
-                }
-
-                ul li {
-                    border-top: none !important;
-                    padding: 0;
-                }
-            }
+  $h: $btnStdH;
+  $labelW: 40%;
+  $minW: $labelW;
+  ul {
+    li {
+      display: flex;
+      align-items: stretch;
+      padding: $interiorMargin 0;
+
+      label,
+      .control {
+        display: flex;
+      }
+      label {
+        line-height: $h;
+        width: $labelW;
+      }
+      .controls {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        flex-grow: 1;
+        margin-left: $interiorMargin;
+        min-height: $h;
+        line-height: $h;
+        input[type='text'],
+        input[type='search'],
+        input[type='number'],
+        button,
+        select {
+          min-height: $h;
         }
-    }
-}
 
-/******** VALIDATION */
-.form-error {
-    // Block element that visually flags an error and contains a message
-    background-color: $colorFormFieldErrorBg;
-    color: $colorFormFieldErrorFg;
-    border-radius: $basicCr;
-    display: block;
-    padding: 1px 6px;
-    &:before {
-        content: $glyph-icon-alert-triangle;
-        display: inline-block;
-        font-family: symbolsfont;
-        margin-right: $interiorMarginSm;
-    }
-}
-
-@mixin labelValidate($sym, $c) {
-    > .label {
-        @include glyphAfter($sym);
-        &:after {
-            color: $c;
-            margin-left: $interiorMargin;
+        > * + * {
+          margin-left: $interiorMarginSm;
         }
-    }
-}
+      }
 
-mct-form.validates {
-    .form-row.validates {
-        > .label {
-            padding-right: 1em; // Keep room for validation element
-            &:after {
-                font-size: .8em;
-            }
-        }
-        &.invalid,
-        &.invalid.req { @include labelValidate($glyph-icon-x, $colorFormInvalid); }
+      &.connects-to-previous {
+        padding-top: 0;
+      }
 
-        &.valid,
-        &.valid.req { @include labelValidate($glyph-icon-check, $colorFormValid); }
+      &.section-header {
+        margin-top: $interiorMarginLg;
+        border-top: 1px solid $colorFormLines;
+      }
+
+      &.controls-first {
+        .control {
+          flex-grow: 0;
+          margin-right: $interiorMargin;
+          min-width: 0;
+          order: 1;
+          width: auto;
+        }
+        label {
+          flex-grow: 1;
+          order: 2;
+          width: auto;
+        }
+      }
+      &.controls-under {
+        display: block;
+        .control,
+        label {
+          display: block;
+          width: auto;
+        }
 
-        &.req { @include labelValidate($glyph-icon-asterisk, $colorFormRequired); }
+        ul li {
+          border-top: none !important;
+          padding: 0;
+        }
+      }
     }
+  }
 }
 
-body.desktop .form-row.validates > .label {
-    &:after {
-        position: absolute;
-        right: $interiorMargin;
-        height: 100%;
-        line-height: 200%;
-    }
+/******** VALIDATION */
+.form-error {
+  // Block element that visually flags an error and contains a message
+  background-color: $colorFormFieldErrorBg;
+  color: $colorFormFieldErrorFg;
+  border-radius: $basicCr;
+  display: block;
+  padding: 1px 6px;
+  &:before {
+    content: $glyph-icon-alert-triangle;
+    display: inline-block;
+    font-family: symbolsfont;
+    margin-right: $interiorMarginSm;
+  }
+}
+
+body.desktop .form-row > .label {
+  &:after {
+    position: absolute;
+    right: $interiorMargin;
+    height: 100%;
+    line-height: 200%;
+  }
 }
 
 .req {
-    color: $colorFormRequired;
+  color: $colorFormRequired;
 }
diff --git a/src/styles/_global.scss b/src/styles/_global.scss
index 1c0c12d2d42..c5d414d0ef7 100644
--- a/src/styles/_global.scss
+++ b/src/styles/_global.scss
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,203 +19,218 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+
+@use 'sass:math';
+
 /******************************************************** RESETS */
 *,
 :before,
 :after {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 div {
-    position: relative;
+  position: relative;
 }
 
 /******************************************************** UTILITIES */
 .u-contents {
-    display: contents;
+  display: contents;
 }
 
 .u-menu-to {
-    &--left {
-        .c-menu {
-            left: auto !important;
-            right: 0;
-        }
+  &--left {
+    .c-menu {
+      left: auto !important;
+      right: 0;
     }
+  }
 
-    &--center {
-        .c-menu {
-            left: 50% !important;
-            transform: translateX(-50%);
-        }
+  &--center {
+    .c-menu {
+      left: 50% !important;
+      transform: translateX(-50%);
     }
+  }
 }
 
 .u-space {
-    // Provides a separator space between elements
-    &--right {
-        + [class*="__"] {
-            margin-left: $interiorMarginLg !important;
-        }
+  // Provides a separator space between elements
+  &--right {
+    + [class*='__'] {
+      margin-left: $interiorMarginLg !important;
     }
+  }
+}
+
+.u-flex-spreader {
+  // Pushes against elements in a flex layout to spread them out
+  flex: 1 1 auto;
 }
 
 /******************************************************** BROWSER ELEMENTS */
 body.desktop {
-    ::-webkit-scrollbar {
-        box-sizing: border-box;
-        box-shadow: inset $scrollbarTrackShdw;
-        background-color: $scrollbarTrackColorBg;
-        height: $scrollbarTrackSize;
-        width: $scrollbarTrackSize;
-    }
-
-    ::-webkit-scrollbar-thumb {
-        box-sizing: border-box;
-        background: $scrollbarThumbColor;
-        &:hover {
-            background: $scrollbarThumbColorHov;
-        }
-    }
+  ::-webkit-scrollbar {
+    box-sizing: border-box;
+    box-shadow: inset $scrollbarTrackShdw;
+    background-color: $scrollbarTrackColorBg;
+    height: $scrollbarTrackSize;
+    width: $scrollbarTrackSize;
+  }
 
-    ::-webkit-scrollbar-corner {
-        background: transparent;
+  ::-webkit-scrollbar-thumb {
+    box-sizing: border-box;
+    background: $scrollbarThumbColor;
+    &:hover {
+      background: $scrollbarThumbColorHov;
     }
+  }
 
-    .c-menu ::-webkit-scrollbar-thumb {
-        background: $scrollbarThumbColorMenu;
-        &:hover {
-            background: $scrollbarThumbColorMenuHov;
-        }
-    }
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
 
-    div, span {
-        // Firefox
-        scrollbar-color: $scrollbarThumbColor $scrollbarTrackColorBg;
-        scrollbar-width: thin;
+  .c-menu ::-webkit-scrollbar-thumb {
+    background: $scrollbarThumbColorMenu;
+    &:hover {
+      background: $scrollbarThumbColorMenuHov;
     }
+  }
+
+  div,
+  ul,
+  span {
+    // Firefox
+    scrollbar-color: $scrollbarThumbColor $scrollbarTrackColorBg;
+    scrollbar-width: thin;
+  }
 }
 
 /******************************************************** FONTS */
 @mixin fontAndSize() {
-    @each $size in $listFontSizes {
-        &[data-font-size="#{$size}"] {
-            font-size: #{$size}px;
-
-            // Set row heights in telemetry tables
-            tr {
-                min-height: #{$size + ($tabularTdPadTB * 2)};
-            }
-
-        }
+  @each $size in $listFontSizes {
+    &[data-font-size='#{$size}'] {
+      font-size: #{$size}px;
+
+      // Set row heights in telemetry tables
+      tr {
+        min-height: #{$size + ($tabularTdPadTB * 2)};
+      }
     }
+  }
 
-    &[data-font*="bold"] {
-        font-weight: bold;
-    }
+  &[data-font*='bold'] {
+    font-weight: bold;
+  }
 
-    &[data-font*="narrow"] {
-        font-family: 'Arial Narrow', sans-serif;
-    }
+  &[data-font*='narrow'] {
+    font-family: 'Arial Narrow', sans-serif;
+  }
 
-    &[data-font*="monospace"] {
-        font-family: 'Andale Mono', sans-serif;
-    }
+  &[data-font*='monospace'] {
+    font-family: 'Andale Mono', sans-serif;
+  }
 }
 
 .u-style-receiver {
-    @include fontAndSize();
+  @include fontAndSize();
 }
 
 /******************************************************** HTML ENTITIES */
 a {
-    color: $colorA;
-    cursor: pointer;
-    text-decoration: none;
+  color: $colorA;
+  cursor: pointer;
+  text-decoration: none;
 
-    &:focus {
-        outline: none !important;
-    }
+  &:focus {
+    outline: none !important;
+  }
+}
+
+body,
+html {
+  height: 100%;
+  width: 100%;
 }
 
-body, html {
-    height: 100%;
-    width: 100%;
+#openmct-app {
+  @include abs();
 }
 
 body {
-    -webkit-font-smoothing: subpixel-antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    @include bodyFont($fontBaseSize);
-    background-color: $colorBodyBg;
-    color: $colorBodyFg;
+  -webkit-font-smoothing: subpixel-antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  @include bodyFont($fontBaseSize);
+  background-color: $colorBodyBg;
+  color: $colorBodyFg;
 }
 
 em {
-    font-style: normal;
+  font-style: normal;
 }
 
 p {
-    margin-bottom: $interiorMarginLg;
+  margin-bottom: $interiorMarginLg;
 }
 
-ol, ul {
-    list-style: none;
-    margin: 0;
-    padding-left: 0;
+ol,
+ul {
+  list-style: none;
+  margin: 0;
+  padding-left: 0;
 }
 
 table {
-    border-spacing: 0;
-    border-collapse: collapse;
+  border-spacing: 0;
+  border-collapse: collapse;
 }
 
 li {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
 }
 
 /******************************************************** HAS */
 // Local Controls: Controls placed in proximity to or overlaid on components and views
 body.desktop .has-local-controls {
-    // Provides hover ability to show local controls
-    [class*='local-controls--hidden'] {
-        transition: opacity 500ms ease-in-out;
-        opacity: 0;
-        pointer-events: none;
-    }
-
-    // Look down up to two levels and display hidden LC's on hover
-    &:hover {
-        > [class*='local-controls--hidden'],
-        > * > [class*='local-controls--hidden'],
-        > * > * > [class*='local-controls--hidden'] {
-            transition: opacity 50ms ease-in-out;
-            opacity: 1;
-            pointer-events: inherit;
-        }
+  // Provides hover ability to show local controls
+  [class*='local-controls--hidden'] {
+    transition: opacity 500ms ease-in-out;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  // Look down up to two levels and display hidden LC's on hover
+  &:hover {
+    > [class*='local-controls--hidden'],
+    > * > [class*='local-controls--hidden'],
+    > * > * > [class*='local-controls--hidden'] {
+      transition: opacity 50ms ease-in-out;
+      opacity: 1;
+      pointer-events: inherit;
     }
+  }
 }
 
 /******************************************************** ICON BACKGROUNDS */
 // Used with elements that utilize an SVG background element where specific coloring is needed
 .u-icon-bg-color {
-    // Messages and notifications
-    &-info {
-        @include glyphBg($bg-icon-info);
-        filter: $colorStatusInfoFilter;
-    }
-
-    &-alert {
-        @include glyphBg($bg-icon-alert-rect);
-        filter: $colorStatusAlertFilter;
-    }
-
-    &-error {
-        @include glyphBg($bg-icon-alert-triangle);
-        filter: $colorStatusErrorFilter;
-    }
+  // Messages and notifications
+  &-info {
+    @include glyphBg($bg-icon-info);
+    filter: $colorStatusInfoFilter;
+  }
+
+  &-alert {
+    @include glyphBg($bg-icon-alert-rect);
+    filter: $colorStatusAlertFilter;
+  }
+
+  &-error {
+    @include glyphBg($bg-icon-alert-triangle);
+    filter: $colorStatusErrorFilter;
+  }
 }
 
 /******************************************************** SELECTION AND EDITING */
@@ -223,126 +238,176 @@ body.desktop .has-local-controls {
 .c-grid,
 .c-grid__x,
 .c-grid__y {
-    @include abs();
+  @include abs();
 }
 
-.c-grid {
-    pointer-events: none;
+.c-grid .c-grid {
+  pointer-events: none;
 
-    &__x  { @include bgTicks($editUIGridColorFg, 'x'); }
-    &__y  { @include bgTicks($editUIGridColorFg, 'y'); }
+  &__x {
+    @include bgTicks($editUIGridColorFg, 'x');
+  }
+  &__y {
+    @include bgTicks($editUIGridColorFg, 'y');
+  }
 }
 
 /*************************** SELECTION */
 .u-inspectable {
-    &:hover {
-        box-shadow: $browseSelectableShdwHov;
-    }
+  &:hover {
+    box-shadow: $browseSelectableShdwHov;
+  }
 }
 
 /**************************** EDITING */
 .is-editing {
-    .is-moveable {
-        cursor: move;
-    }
+  .is-moveable {
+    cursor: move;
+  }
 
-    .u-links {
-        // Applied in markup to objects that provide links. Disable while editing.
-        pointer-events: none;
-    }
+  .u-links {
+    // Applied in markup to objects that provide links. Disable while editing.
+    pointer-events: none;
+  }
 }
 
 ::placeholder {
-    opacity: 0.5;
-    font-style: italic;
+  opacity: 0.7;
+  font-style: italic;
 }
 
 /******************************************************** STATES */
-@mixin  spinner($b: 5, $c: $colorKey) {
-    animation-name: rotation-centered;
-    animation-duration: 0.5s;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-    border-radius: 100%;
-    box-sizing: border-box;
-    border-color: rgba($c, 0.25);
-    border-top-color: rgba($c, 1.0);
-    border-style: solid;
-    border-width: $b;
-    display: block;
-    position: absolute;
-    left: 50%; top: 50%;
-    transform-origin: center;
-    transform: translate(-50%, -50%);
+@mixin spinner($b: 5, $c: $colorKey) {
+  animation-name: rotation-centered;
+  animation-duration: 0.5s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  border-radius: 100%;
+  box-sizing: border-box;
+  border-color: rgba($c, 0.25);
+  border-top-color: rgba($c, 1);
+  border-style: solid;
+  border-width: $b;
+  display: block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform-origin: center;
+  transform: translate(-50%, -50%);
 }
 
 .wait-spinner {
-    @include spinner($waitSpinnerBorderW, $colorKey);
-    pointer-events: none;
-    z-index: 2;
-    &.inline {
-        display: inline-block !important;
-        margin-right: $interiorMargin;
-        position: relative !important;
-        vertical-align: middle;
-    }
+  @include spinner($waitSpinnerBorderW, $colorKey);
+  pointer-events: none;
+  z-index: 2;
+  &.inline {
+    display: inline-block !important;
+    margin-right: $interiorMargin;
+    position: relative !important;
+    vertical-align: middle;
+  }
 }
 
 .loading {
-    // Can be applied to any block element with height and width
-    pointer-events: none;
-    &:before,
-    &:after {
-        content: '';
+  // Can be applied to any block element with height and width
+  pointer-events: none;
+  &:before,
+  &:after {
+    content: '';
+  }
+  &:before {
+    @include spinner($waitSpinnerBorderW, $colorLoadingFg);
+    height: $waitSpinnerD;
+    width: $waitSpinnerD;
+    z-index: 10;
+  }
+  &:after {
+    @include abs();
+    background: $colorLoadingBg;
+    display: block;
+    z-index: 9;
+  }
+  &.c-tree__item {
+    $d: $waitSpinnerTreeD;
+    $spinnerL: 19 + math.div($d, 2);
+
+    display: flex;
+    align-items: center;
+    margin-left: $treeNavArrowD + $interiorMargin;
+    min-height: 5px + $d;
+
+    .c-tree__item__label {
+      font-style: italic;
+      margin-left: $interiorMargin;
+      opacity: 0.6;
     }
     &:before {
-        @include spinner($waitSpinnerBorderW, $colorLoadingFg);
-        height: $waitSpinnerD; width: $waitSpinnerD;
-        z-index: 10;
+      left: auto;
+      top: auto;
+      transform: translate(0);
+      height: $d;
+      width: $d;
+      border-width: 3px;
+      //left: $spinnerL;
+      position: relative;
     }
     &:after {
-        @include abs();
-        background: $colorLoadingBg;
-        display: block;
-        z-index: 9;
-    }
-    &.c-tree__item {
-        $d: $waitSpinnerTreeD;
-        $spinnerL: 19 + $d/2;
-
-        display: flex;
-        align-items: center;
-        margin-left: $treeNavArrowD + $interiorMargin;
-        min-height: 5px + $d;
-
-        .c-tree__item__label {
-            font-style: italic;
-            margin-left: $interiorMargin;
-            opacity: 0.6;
-        }
-        &:before {
-            left: auto;
-            top: auto;
-            transform: translate(0);
-            height: $d;
-            width: $d;
-            border-width: 3px;
-            //left: $spinnerL;
-            position: relative;
-        }
-        &:after {
-            display: none;
-        }
+      display: none;
     }
+  }
 
-    &.c-loading--overlay {
-        @include abs();
-    }
+  &.c-loading--overlay {
+    @include abs();
+  }
 }
 
+[aria-disabled = 'true'],
 *[disabled],
 .disabled {
-    opacity: $controlDisabledOpacity;
-    pointer-events: none !important;
-    cursor: default !important;
+  opacity: $controlDisabledOpacity;
+  cursor: not-allowed !important;
+  pointer-events: none !important;
+}
+
+/******************************************************** RESPONSIVE CONTAINERS */
+@mixin responsiveContainerWidths($dimension) {
+  // 3/21/22: `--width-less-than*` classes set in ObjectView.vue
+  .--show-if-less-than-#{$dimension} {
+    // Hide anything that displays within a given width by default.
+    // `display` property must be set within a more specific class
+    // for the particular item to be displayed.
+    display: none !important;
+  }
+
+  .--width-less-than-#{$dimension} {
+    .--hide-if-less-than-#{$dimension} {
+      display: none;
+    }
+  }
+}
+
+//.--hide-by-default { display: none !important; }
+@include responsiveContainerWidths('220');
+@include responsiveContainerWidths('600');
+
+.u-fade-truncate,
+.u-fade-truncate--lg {
+  &:after {
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    content: "";
+    right: 0;
+    width: $fadeTruncateW * 1.5;
+    z-index: 2;
+  }
+
+  &.--no-sep {
+    border-right: none;
+  }
+}
+
+.u-fade-truncate--lg {
+  flex-basis: 100% !important;
 }
diff --git a/src/styles/_glyphs.scss b/src/styles/_glyphs.scss
index 0a4702b3a2e..750eba7e292 100755
--- a/src/styles/_glyphs.scss
+++ b/src/styles/_glyphs.scss
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,229 +21,704 @@
  *****************************************************************************/
 
 @font-face {
-    // Use https://icomoon.io/app with `Icomoon.Open MCT Symbols 2018.json` to generate font files
-    font-family: 'symbolsfont';
-    src: url('./fonts/Open-MCT-Symbols-16px.woff') format('woff'),
+  // Use https://icomoon.io/app with `Icomoon.Open MCT Symbols 2018.json` to generate font files
+  font-family: 'symbolsfont';
+  src: url('./fonts/Open-MCT-Symbols-16px.woff') format('woff'),
     url('./fonts/Open-MCT-Symbols-16px.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
+  font-weight: normal;
+  font-style: normal;
 }
 
 @font-face {
-    // Use https://icomoon.io/app with icomoon-project-Open-MCT-Symbols-12px.json to generate font files
-    font-family: 'symbolsfont-12px';
-    src: url('./fonts/Open-MCT-Symbols-12px.woff') format('woff'),
+  // Use https://icomoon.io/app with icomoon-project-Open-MCT-Symbols-12px.json to generate font files
+  font-family: 'symbolsfont-12px';
+  src: url('./fonts/Open-MCT-Symbols-12px.woff') format('woff'),
     url('./fonts/Open-MCT-Symbols-12px.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
+  font-weight: normal;
+  font-style: normal;
 }
 
 /************************** 16 PX CLASSES */
-.icon-alert-rect {  @include glyphBefore($glyph-icon-alert-rect); }
-.icon-alert-triangle {  @include glyphBefore($glyph-icon-alert-triangle); }
-.icon-arrow-up {  @include glyphBefore($glyph-icon-arrow-up); }
-.icon-arrow-double-up {  @include glyphBefore($glyph-icon-arrow-double-up); }
-.icon-arrow-tall-up {  @include glyphBefore($glyph-icon-arrow-tall-up); }
-.icon-arrow-right {  @include glyphBefore($glyph-icon-arrow-right); }
-.icon-arrow-right-equilateral {  @include glyphBefore($glyph-icon-arrow-right-equilateral); }
-.icon-arrow-down {  @include glyphBefore($glyph-icon-arrow-down); }
-.icon-arrow-double-down {  @include glyphBefore($glyph-icon-arrow-double-down); }
-.icon-arrow-tall-down {  @include glyphBefore($glyph-icon-arrow-tall-down); }
-.icon-arrow-left {  @include glyphBefore($glyph-icon-arrow-left); }
-.icon-asterisk {  @include glyphBefore($glyph-icon-asterisk); }
-.icon-bell {  @include glyphBefore($glyph-icon-bell); }
-.icon-box-round-corners {  @include glyphBefore($glyph-icon-box-round-corners); }
-.icon-box-with-arrow {  @include glyphBefore($glyph-icon-box-with-arrow); }
-.icon-check {  @include glyphBefore($glyph-icon-check); }
-.icon-connectivity {  @include glyphBefore($glyph-icon-connectivity); }
-.icon-database-in-brackets {  @include glyphBefore($glyph-icon-database-in-brackets); }
-.icon-eye-open {  @include glyphBefore($glyph-icon-eye-open); }
-.icon-gear {  @include glyphBefore($glyph-icon-gear); }
-.icon-hourglass {  @include glyphBefore($glyph-icon-hourglass); }
-.icon-info {  @include glyphBefore($glyph-icon-info); }
-.icon-link {  @include glyphBefore($glyph-icon-link); }
-.icon-lock {  @include glyphBefore($glyph-icon-lock); }
-.icon-minus {  @include glyphBefore($glyph-icon-minus); }
-.icon-people {  @include glyphBefore($glyph-icon-people); }
-.icon-person {  @include glyphBefore($glyph-icon-person); }
-.icon-plus {  @include glyphBefore($glyph-icon-plus); }
-.icon-plus-in-rect {  @include glyphBefore($glyph-icon-plus-in-rect); }
-.icon-trash {  @include glyphBefore($glyph-icon-trash); }
-.icon-x {  @include glyphBefore($glyph-icon-x); }
-.icon-brackets {  @include glyphBefore($glyph-icon-brackets); }
-.icon-crosshair {  @include glyphBefore($glyph-icon-crosshair); }
-.icon-grippy {  @include glyphBefore($glyph-icon-grippy); }
-.icon-grid {  @include glyphBefore($glyph-icon-grid); }
-.icon-grippy-ew {  @include glyphBefore($glyph-icon-grippy-ew); }
-.icon-columns {  @include glyphBefore($glyph-icon-columns); }
-.icon-rows {  @include glyphBefore($glyph-icon-rows); }
-.icon-filter {  @include glyphBefore($glyph-icon-filter); }
-.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-eye-disabled {  @include glyphBefore($glyph-icon-eye-disabled); }
-.icon-notebook-page {  @include glyphBefore($glyph-icon-notebook-page); }
-.icon-unlocked {  @include glyphBefore($glyph-icon-unlocked); }
-.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); }
-.icon-calendar {  @include glyphBefore($glyph-icon-calendar); }
-.icon-chain-links {  @include glyphBefore($glyph-icon-chain-links); }
-.icon-download {  @include glyphBefore($glyph-icon-download); }
-.icon-duplicate {  @include glyphBefore($glyph-icon-duplicate); }
-.icon-folder-new {  @include glyphBefore($glyph-icon-folder-new); }
-.icon-fullscreen-collapse {  @include glyphBefore($glyph-icon-fullscreen-collapse); }
-.icon-fullscreen-expand {  @include glyphBefore($glyph-icon-fullscreen-expand); }
-.icon-layers {  @include glyphBefore($glyph-icon-layers); }
-.icon-line-horz {  @include glyphBefore($glyph-icon-line-horz); }
-.icon-magnify {  @include glyphBefore($glyph-icon-magnify); }
-.icon-magnify-in {  @include glyphBefore($glyph-icon-magnify-in); }
-.icon-magnify-out {  @include glyphBefore($glyph-icon-magnify-out); }
-.icon-menu-hamburger {  @include glyphBefore($glyph-icon-menu-hamburger); }
-.icon-move {  @include glyphBefore($glyph-icon-move); }
-.icon-new-window {  @include glyphBefore($glyph-icon-new-window); }
-.icon-paint-bucket {  @include glyphBefore($glyph-icon-paint-bucket); }
-.icon-pencil {  @include glyphBefore($glyph-icon-pencil); }
-.icon-pencil-in-brackets {  @include glyphBefore($glyph-icon-pencil-in-brackets); }
-.icon-play {  @include glyphBefore($glyph-icon-play); }
-.icon-pause {  @include glyphBefore($glyph-icon-pause); }
-.icon-plot-resource {  @include glyphBefore($glyph-icon-plot-resource); }
-.icon-pointer-left {  @include glyphBefore($glyph-icon-pointer-left); }
-.icon-pointer-right {  @include glyphBefore($glyph-icon-pointer-right); }
-.icon-refresh {  @include glyphBefore($glyph-icon-refresh); }
-.icon-save {  @include glyphBefore($glyph-icon-save); }
-.icon-save-as {  @include glyphBefore($glyph-icon-save-as); }
-.icon-sine {  @include glyphBefore($glyph-icon-sine); }
-.icon-font {  @include glyphBefore($glyph-icon-font); }
-.icon-thumbs-strip {  @include glyphBefore($glyph-icon-thumbs-strip); }
-.icon-two-parts-both {  @include glyphBefore($glyph-icon-two-parts-both); }
-.icon-two-parts-one-only {  @include glyphBefore($glyph-icon-two-parts-one-only); }
-.icon-resync {  @include glyphBefore($glyph-icon-resync); }
-.icon-reset {  @include glyphBefore($glyph-icon-reset); }
-.icon-x-in-circle {  @include glyphBefore($glyph-icon-x-in-circle); }
-.icon-brightness {  @include glyphBefore($glyph-icon-brightness); }
-.icon-contrast {  @include glyphBefore($glyph-icon-contrast); }
-.icon-expand {  @include glyphBefore($glyph-icon-expand); }
-.icon-list-view {  @include glyphBefore($glyph-icon-list-view); }
-.icon-grid-snap-to {  @include glyphBefore($glyph-icon-grid-snap-to); }
-.icon-grid-snap-no {  @include glyphBefore($glyph-icon-grid-snap-no); }
-.icon-frame-show {  @include glyphBefore($glyph-icon-frame-show); }
-.icon-frame-hide {  @include glyphBefore($glyph-icon-frame-hide); }
-.icon-import {  @include glyphBefore($glyph-icon-import); }
-.icon-export {  @include glyphBefore($glyph-icon-export); }
-.icon-font-size {  @include glyphBefore($glyph-icon-font-size); }
-.icon-clear-data {  @include glyphBefore($glyph-icon-clear-data); }
-.icon-history {  @include glyphBefore($glyph-icon-history); }
-.icon-arrow-nav-to-parent {  @include glyphBefore($glyph-icon-arrow-nav-to-parent); }
-.icon-crosshair-in-circle {  @include glyphBefore($glyph-icon-crosshair-in-circle); }
-.icon-target {  @include glyphBefore($glyph-icon-target); }
-.icon-items-collapse {  @include glyphBefore($glyph-icon-items-collapse); }
-.icon-items-expand {  @include glyphBefore($glyph-icon-items-expand); }
-.icon-3-dots {  @include glyphBefore($glyph-icon-3-dots); }
-.icon-grid-on {  @include glyphBefore($glyph-icon-grid-on); }
-.icon-grid-off {  @include glyphBefore($glyph-icon-grid-off); }
-.icon-camera {  @include glyphBefore($glyph-icon-camera); }
-.icon-folders-collapse {  @include glyphBefore($glyph-icon-folders-collapse); }
-.icon-activity {  @include glyphBefore($glyph-icon-activity); }
-.icon-activity-mode {  @include glyphBefore($glyph-icon-activity-mode); }
-.icon-autoflow-tabular {  @include glyphBefore($glyph-icon-autoflow-tabular); }
-.icon-clock {  @include glyphBefore($glyph-icon-clock); }
-.icon-database {  @include glyphBefore($glyph-icon-database); }
-.icon-database-query {  @include glyphBefore($glyph-icon-database-query); }
-.icon-dataset {  @include glyphBefore($glyph-icon-dataset); }
-.icon-datatable {  @include glyphBefore($glyph-icon-datatable); }
-.icon-dictionary {  @include glyphBefore($glyph-icon-dictionary); }
-.icon-folder {  @include glyphBefore($glyph-icon-folder); }
-.icon-image {  @include glyphBefore($glyph-icon-image); }
-.icon-layout {  @include glyphBefore($glyph-icon-layout); }
-.icon-object {  @include glyphBefore($glyph-icon-object); }
-.icon-object-unknown {  @include glyphBefore($glyph-icon-object-unknown); }
-.icon-packet {  @include glyphBefore($glyph-icon-packet); }
-.icon-page {  @include glyphBefore($glyph-icon-page); }
-.icon-plot-overlay {  @include glyphBefore($glyph-icon-plot-overlay); }
-.icon-plot-stacked {  @include glyphBefore($glyph-icon-plot-stacked); }
-.icon-session {  @include glyphBefore($glyph-icon-session); }
-.icon-tabular {  @include glyphBefore($glyph-icon-tabular); }
-.icon-tabular-lad {  @include glyphBefore($glyph-icon-tabular-lad); }
-.icon-tabular-lad-set {  @include glyphBefore($glyph-icon-tabular-lad-set); }
-.icon-tabular-realtime {  @include glyphBefore($glyph-icon-tabular-realtime); }
-.icon-tabular-scrolling {  @include glyphBefore($glyph-icon-tabular-scrolling); }
-.icon-telemetry {  @include glyphBefore($glyph-icon-telemetry); }
-.icon-timeline {  @include glyphBefore($glyph-icon-timeline); }
-.icon-timer {  @include glyphBefore($glyph-icon-timer); }
-.icon-topic {  @include glyphBefore($glyph-icon-topic); }
-.icon-box-with-dashed-lines {  @include glyphBefore($glyph-icon-box-with-dashed-lines); }
-.icon-summary-widget {  @include glyphBefore($glyph-icon-summary-widget); }
-.icon-notebook {  @include glyphBefore($glyph-icon-notebook); }
-.icon-tabs-view {  @include glyphBefore($glyph-icon-tabs-view); }
-.icon-flexible-layout {  @include glyphBefore($glyph-icon-flexible-layout); }
-.icon-generator-telemetry {  @include glyphBefore($glyph-icon-generator-telemetry); }
-.icon-generator-events {  @include glyphBefore($glyph-icon-generator-events); }
-.icon-gauge {  @include glyphBefore($glyph-icon-gauge); }
-.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); }
-.icon-condition-widget {  @include glyphBefore($glyph-icon-condition-widget); }
-.icon-alphanumeric {  @include glyphBefore($glyph-icon-alphanumeric); }
-.icon-image-telemetry {  @include glyphBefore($glyph-icon-image-telemetry); }
+.icon-alert-rect {
+  @include glyphBefore($glyph-icon-alert-rect);
+}
+.icon-alert-triangle {
+  @include glyphBefore($glyph-icon-alert-triangle);
+}
+.icon-arrow-up {
+  @include glyphBefore($glyph-icon-arrow-up);
+}
+.icon-arrow-double-up {
+  @include glyphBefore($glyph-icon-arrow-double-up);
+}
+.icon-arrow-tall-up {
+  @include glyphBefore($glyph-icon-arrow-tall-up);
+}
+.icon-arrow-right {
+  @include glyphBefore($glyph-icon-arrow-right);
+}
+.icon-arrow-right-equilateral {
+  @include glyphBefore($glyph-icon-arrow-right-equilateral);
+}
+.icon-arrow-down {
+  @include glyphBefore($glyph-icon-arrow-down);
+}
+.icon-arrow-double-down {
+  @include glyphBefore($glyph-icon-arrow-double-down);
+}
+.icon-arrow-tall-down {
+  @include glyphBefore($glyph-icon-arrow-tall-down);
+}
+.icon-arrow-left {
+  @include glyphBefore($glyph-icon-arrow-left);
+}
+.icon-asterisk {
+  @include glyphBefore($glyph-icon-asterisk);
+}
+.icon-bell {
+  @include glyphBefore($glyph-icon-bell);
+}
+.icon-box-round-corners {
+  @include glyphBefore($glyph-icon-box-round-corners);
+}
+.icon-box-with-arrow {
+  @include glyphBefore($glyph-icon-box-with-arrow);
+}
+.icon-check {
+  @include glyphBefore($glyph-icon-check);
+}
+.icon-connectivity {
+  @include glyphBefore($glyph-icon-connectivity);
+}
+.icon-database-in-brackets {
+  @include glyphBefore($glyph-icon-database-in-brackets);
+}
+.icon-eye-open {
+  @include glyphBefore($glyph-icon-eye-open);
+}
+.icon-gear {
+  @include glyphBefore($glyph-icon-gear);
+}
+.icon-gear-after {
+  @include glyphAfter($glyph-icon-gear);
+}
+.icon-hourglass {
+  @include glyphBefore($glyph-icon-hourglass);
+}
+.icon-info {
+  @include glyphBefore($glyph-icon-info);
+}
+.icon-link {
+  @include glyphBefore($glyph-icon-link);
+}
+.icon-lock {
+  @include glyphBefore($glyph-icon-lock);
+}
+.icon-minus {
+  @include glyphBefore($glyph-icon-minus);
+}
+.icon-people {
+  @include glyphBefore($glyph-icon-people);
+}
+.icon-person {
+  @include glyphBefore($glyph-icon-person);
+}
+.icon-plus {
+  @include glyphBefore($glyph-icon-plus);
+}
+.icon-plus-in-rect {
+  @include glyphBefore($glyph-icon-plus-in-rect);
+}
+.icon-trash {
+  @include glyphBefore($glyph-icon-trash);
+}
+.icon-x {
+  @include glyphBefore($glyph-icon-x);
+}
+.icon-brackets {
+  @include glyphBefore($glyph-icon-brackets);
+}
+.icon-crosshair {
+  @include glyphBefore($glyph-icon-crosshair);
+}
+.icon-grippy {
+  @include glyphBefore($glyph-icon-grippy);
+}
+.icon-grid {
+  @include glyphBefore($glyph-icon-grid);
+}
+.icon-grippy-ew {
+  @include glyphBefore($glyph-icon-grippy-ew);
+}
+.icon-columns {
+  @include glyphBefore($glyph-icon-columns);
+}
+.icon-rows {
+  @include glyphBefore($glyph-icon-rows);
+}
+.icon-filter {
+  @include glyphBefore($glyph-icon-filter);
+}
+.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-eye-disabled {
+  @include glyphBefore($glyph-icon-eye-disabled);
+}
+.icon-notebook-page {
+  @include glyphBefore($glyph-icon-notebook-page);
+}
+.icon-unlocked {
+  @include glyphBefore($glyph-icon-unlocked);
+}
+.icon-circle {
+  @include glyphBefore($glyph-icon-circle);
+}
+.icon-draft {
+  @include glyphBefore($glyph-icon-draft);
+}
+.icon-question-mark {
+  @include glyphBefore($glyph-icon-question-mark);
+}
+.icon-circle-slash {
+  @include glyphBefore($glyph-icon-circle-slash);
+}
+.icon-status-poll-check {
+  @include glyphBefore($glyph-icon-status-poll-check);
+}
+.icon-status-poll-caution {
+  @include glyphBefore($glyph-icon-status-poll-caution);
+}
+.icon-status-poll-circle-slash {
+  @include glyphBefore($glyph-icon-status-poll-circle-slash);
+}
+.icon-status-poll-question-mark {
+  @include glyphBefore($glyph-icon-status-poll-question-mark);
+}
+.icon-status-poll-edit {
+  @include glyphBefore($glyph-icon-status-poll-edit);
+}
+.icon-stale {
+  @include glyphBefore($glyph-icon-stale);
+}
+.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);
+}
+.icon-calendar {
+  @include glyphBefore($glyph-icon-calendar);
+}
+.icon-chain-links {
+  @include glyphBefore($glyph-icon-chain-links);
+}
+.icon-download {
+  @include glyphBefore($glyph-icon-download);
+}
+.icon-duplicate {
+  @include glyphBefore($glyph-icon-duplicate);
+}
+.icon-folder-new {
+  @include glyphBefore($glyph-icon-folder-new);
+}
+.icon-fullscreen-collapse {
+  @include glyphBefore($glyph-icon-fullscreen-collapse);
+}
+.icon-fullscreen-expand {
+  @include glyphBefore($glyph-icon-fullscreen-expand);
+}
+.icon-layers {
+  @include glyphBefore($glyph-icon-layers);
+}
+.icon-line-horz {
+  @include glyphBefore($glyph-icon-line-horz);
+}
+.icon-magnify {
+  @include glyphBefore($glyph-icon-magnify);
+}
+.icon-magnify-in {
+  @include glyphBefore($glyph-icon-magnify-in);
+}
+.icon-magnify-out {
+  @include glyphBefore($glyph-icon-magnify-out);
+}
+.icon-menu-hamburger {
+  @include glyphBefore($glyph-icon-menu-hamburger);
+}
+.icon-move {
+  @include glyphBefore($glyph-icon-move);
+}
+.icon-new-window {
+  @include glyphBefore($glyph-icon-new-window);
+}
+.icon-paint-bucket {
+  @include glyphBefore($glyph-icon-paint-bucket);
+}
+.icon-pencil {
+  @include glyphBefore($glyph-icon-pencil);
+}
+.icon-pencil-in-brackets {
+  @include glyphBefore($glyph-icon-pencil-in-brackets);
+}
+.icon-play {
+  @include glyphBefore($glyph-icon-play);
+}
+.icon-pause {
+  @include glyphBefore($glyph-icon-pause);
+}
+.icon-plot-resource {
+  @include glyphBefore($glyph-icon-plot-resource);
+}
+.icon-pointer-left {
+  @include glyphBefore($glyph-icon-pointer-left);
+}
+.icon-pointer-right {
+  @include glyphBefore($glyph-icon-pointer-right);
+}
+.icon-refresh {
+  @include glyphBefore($glyph-icon-refresh);
+}
+.icon-save {
+  @include glyphBefore($glyph-icon-save);
+}
+.icon-save-as {
+  @include glyphBefore($glyph-icon-save-as);
+}
+.icon-sine {
+  @include glyphBefore($glyph-icon-sine);
+}
+.icon-font {
+  @include glyphBefore($glyph-icon-font);
+}
+.icon-thumbs-strip {
+  @include glyphBefore($glyph-icon-thumbs-strip);
+}
+.icon-two-parts-both {
+  @include glyphBefore($glyph-icon-two-parts-both);
+}
+.icon-two-parts-one-only {
+  @include glyphBefore($glyph-icon-two-parts-one-only);
+}
+.icon-resync {
+  @include glyphBefore($glyph-icon-resync);
+}
+.icon-reset {
+  @include glyphBefore($glyph-icon-reset);
+}
+.icon-x-in-circle {
+  @include glyphBefore($glyph-icon-x-in-circle);
+}
+.icon-brightness {
+  @include glyphBefore($glyph-icon-brightness);
+}
+.icon-contrast {
+  @include glyphBefore($glyph-icon-contrast);
+}
+.icon-expand {
+  @include glyphBefore($glyph-icon-expand);
+}
+.icon-list-view {
+  @include glyphBefore($glyph-icon-list-view);
+}
+.icon-grid-snap-to {
+  @include glyphBefore($glyph-icon-grid-snap-to);
+}
+.icon-grid-snap-no {
+  @include glyphBefore($glyph-icon-grid-snap-no);
+}
+.icon-frame-show {
+  @include glyphBefore($glyph-icon-frame-show);
+}
+.icon-frame-hide {
+  @include glyphBefore($glyph-icon-frame-hide);
+}
+.icon-import {
+  @include glyphBefore($glyph-icon-import);
+}
+.icon-export {
+  @include glyphBefore($glyph-icon-export);
+}
+.icon-font-size {
+  @include glyphBefore($glyph-icon-font-size);
+}
+.icon-clear-data {
+  @include glyphBefore($glyph-icon-clear-data);
+}
+.icon-history {
+  @include glyphBefore($glyph-icon-history);
+}
+.icon-arrow-nav-to-parent {
+  @include glyphBefore($glyph-icon-arrow-nav-to-parent);
+}
+.icon-crosshair-in-circle {
+  @include glyphBefore($glyph-icon-crosshair-in-circle);
+}
+.icon-target {
+  @include glyphBefore($glyph-icon-target);
+}
+.icon-items-collapse {
+  @include glyphBefore($glyph-icon-items-collapse);
+}
+.icon-items-expand {
+  @include glyphBefore($glyph-icon-items-expand);
+}
+.icon-3-dots {
+  @include glyphBefore($glyph-icon-3-dots);
+}
+.icon-grid-on {
+  @include glyphBefore($glyph-icon-grid-on);
+}
+.icon-grid-off {
+  @include glyphBefore($glyph-icon-grid-off);
+}
+.icon-camera {
+  @include glyphBefore($glyph-icon-camera);
+}
+.icon-folders-collapse {
+  @include glyphBefore($glyph-icon-folders-collapse);
+}
+.icon-activity {
+  @include glyphBefore($glyph-icon-activity);
+}
+.icon-activity-mode {
+  @include glyphBefore($glyph-icon-activity-mode);
+}
+.icon-autoflow-tabular {
+  @include glyphBefore($glyph-icon-autoflow-tabular);
+}
+.icon-clock {
+  @include glyphBefore($glyph-icon-clock);
+}
+.icon-database {
+  @include glyphBefore($glyph-icon-database);
+}
+.icon-database-query {
+  @include glyphBefore($glyph-icon-database-query);
+}
+.icon-dataset {
+  @include glyphBefore($glyph-icon-dataset);
+}
+.icon-datatable {
+  @include glyphBefore($glyph-icon-datatable);
+}
+.icon-dictionary {
+  @include glyphBefore($glyph-icon-dictionary);
+}
+.icon-folder {
+  @include glyphBefore($glyph-icon-folder);
+}
+.icon-image {
+  @include glyphBefore($glyph-icon-image);
+}
+.icon-layout {
+  @include glyphBefore($glyph-icon-layout);
+}
+.icon-object {
+  @include glyphBefore($glyph-icon-object);
+}
+.icon-object-unknown {
+  @include glyphBefore($glyph-icon-object-unknown);
+}
+.icon-packet {
+  @include glyphBefore($glyph-icon-packet);
+}
+.icon-page {
+  @include glyphBefore($glyph-icon-page);
+}
+.icon-plot-overlay {
+  @include glyphBefore($glyph-icon-plot-overlay);
+}
+.icon-plot-stacked {
+  @include glyphBefore($glyph-icon-plot-stacked);
+}
+.icon-session {
+  @include glyphBefore($glyph-icon-session);
+}
+.icon-tabular {
+  @include glyphBefore($glyph-icon-tabular);
+}
+.icon-tabular-lad {
+  @include glyphBefore($glyph-icon-tabular-lad);
+}
+.icon-tabular-lad-set {
+  @include glyphBefore($glyph-icon-tabular-lad-set);
+}
+.icon-tabular-realtime {
+  @include glyphBefore($glyph-icon-tabular-realtime);
+}
+.icon-tabular-scrolling {
+  @include glyphBefore($glyph-icon-tabular-scrolling);
+}
+.icon-telemetry {
+  @include glyphBefore($glyph-icon-telemetry);
+}
+.icon-timeline {
+  @include glyphBefore($glyph-icon-timeline);
+}
+.icon-timer {
+  @include glyphBefore($glyph-icon-timer);
+}
+.icon-topic {
+  @include glyphBefore($glyph-icon-topic);
+}
+.icon-box-with-dashed-lines {
+  @include glyphBefore($glyph-icon-box-with-dashed-lines);
+}
+.icon-summary-widget {
+  @include glyphBefore($glyph-icon-summary-widget);
+}
+.icon-notebook {
+  @include glyphBefore($glyph-icon-notebook);
+}
+.icon-tabs-view {
+  @include glyphBefore($glyph-icon-tabs-view);
+}
+.icon-flexible-layout {
+  @include glyphBefore($glyph-icon-flexible-layout);
+}
+.icon-generator-telemetry {
+  @include glyphBefore($glyph-icon-generator-telemetry);
+}
+.icon-generator-events {
+  @include glyphBefore($glyph-icon-generator-events);
+}
+.icon-gauge {
+  @include glyphBefore($glyph-icon-gauge);
+}
+.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);
+}
+.icon-condition-widget {
+  @include glyphBefore($glyph-icon-condition-widget);
+}
+.icon-alphanumeric {
+  @include glyphBefore($glyph-icon-alphanumeric);
+}
+.icon-image-telemetry {
+  @include glyphBefore($glyph-icon-image-telemetry);
+}
+.icon-telemetry-aggregate {
+  @include glyphBefore($glyph-icon-telemetry-aggregate);
+}
+.icon-bar-chart {
+  @include glyphBefore($glyph-icon-bar-chart);
+}
+.icon-map {
+  @include glyphBefore($glyph-icon-map);
+}
+.icon-plan {
+  @include glyphBefore($glyph-icon-plan);
+}
+.icon-timelist {
+  @include glyphBefore($glyph-icon-timelist);
+}
+.icon-notebook-shift-log {
+  @include glyphBefore($glyph-icon-notebook-shift-log);
+}
+.icon-plot-scatter {
+  @include glyphBefore($glyph-icon-plot-scatter);
+}
 
 /************************** 12 PX CLASSES */
 // TODO: sync with 16px redo as of 10/25/18
-.icon-filter-12px {  @include glyphBefore($glyph-icon-filter,'symbolsfont-12px'); }
-.icon-filter-outline-12px {  @include glyphBefore($glyph-icon-filter-outline,'symbolsfont-12px'); }
-.icon-crosshair-12px {  @include glyphBefore($glyph-icon-crosshair,'symbolsfont-12px'); }
-.icon-folder-12px {  @include glyphBefore($glyph-icon-folder,'symbolsfont-12px'); }
-.icon-list-view-12px {  @include glyphBefore($glyph-icon-list-view,'symbolsfont-12px'); }
-.icon-grippy-12px {  @include glyphBefore($glyph-icon-grippy,'symbolsfont-12px'); }
+.icon-filter-12px {
+  @include glyphBefore($glyph-icon-filter, 'symbolsfont-12px');
+}
+.icon-filter-outline-12px {
+  @include glyphBefore($glyph-icon-filter-outline, 'symbolsfont-12px');
+}
+.icon-crosshair-12px {
+  @include glyphBefore($glyph-icon-crosshair, 'symbolsfont-12px');
+}
+.icon-folder-12px {
+  @include glyphBefore($glyph-icon-folder, 'symbolsfont-12px');
+}
+.icon-list-view-12px {
+  @include glyphBefore($glyph-icon-list-view, 'symbolsfont-12px');
+}
+.icon-grippy-12px {
+  @include glyphBefore($glyph-icon-grippy, 'symbolsfont-12px');
+}
 
 /************************** GLYPH BG CLASSES */
-.bg-icon-alert-rect { @include glyphBg($bg-icon-alert-rect); }
-.bg-icon-alert-triangle { @include glyphBg($bg-icon-alert-triangle); }
-.bg-icon-bell { @include glyphBg($bg-icon-bell); }
-.bg-icon-info { @include glyphBg($bg-icon-info); }
-.bg-icon-activity { @include glyphBg($bg-icon-activity); }
-.bg-icon-activity-mode { @include glyphBg($bg-icon-activity-mode); }
-.bg-icon-autoflow-tabular { @include glyphBg($bg-icon-autoflow-tabular); }
-.bg-icon-plus { @include glyphBg($bg-icon-plus); }
-.bg-icon-grippy-ew { @include glyphBg($bg-icon-grippy-ew); }
-.bg-icon-chain-links { @include glyphBg($bg-icon-chain-links); }
-.bg-icon-clock { @include glyphBg($bg-icon-clock); }
-.bg-icon-database { @include glyphBg($bg-icon-database); }
-.bg-icon-database-query { @include glyphBg($bg-icon-database-query); }
-.bg-icon-dataset { @include glyphBg($bg-icon-dataset); }
-.bg-icon-datatable { @include glyphBg($bg-icon-datatable); }
-.bg-icon-dictionary { @include glyphBg($bg-icon-dictionary); }
-.bg-icon-folder { @include glyphBg($bg-icon-folder); }
-.bg-icon-image { @include glyphBg($bg-icon-image); }
-.bg-icon-layout { @include glyphBg($bg-icon-layout); }
-.bg-icon-object { @include glyphBg($bg-icon-object); }
-.bg-icon-object-unknown { @include glyphBg($bg-icon-object-unknown); }
-.bg-icon-packet { @include glyphBg($bg-icon-packet); }
-.bg-icon-page { @include glyphBg($bg-icon-page); }
-.bg-icon-plot-overlay { @include glyphBg($bg-icon-plot-overlay); }
-.bg-icon-plot-stacked { @include glyphBg($bg-icon-plot-stacked); }
-.bg-icon-session { @include glyphBg($bg-icon-session); }
-.bg-icon-tabular { @include glyphBg($bg-icon-tabular); }
-.bg-icon-tabular-lad { @include glyphBg($bg-icon-tabular-lad); }
-.bg-icon-tabular-lad-set { @include glyphBg($bg-icon-tabular-lad-set); }
-.bg-icon-tabular-realtime { @include glyphBg($bg-icon-tabular-realtime); }
-.bg-icon-tabular-scrolling { @include glyphBg($bg-icon-tabular-scrolling); }
-.bg-icon-telemetry { @include glyphBg($bg-icon-telemetry); }
-.bg-icon-timeline { @include glyphBg($bg-icon-timeline); }
-.bg-icon-timer { @include glyphBg($bg-icon-timer); }
-.bg-icon-topic { @include glyphBg($bg-icon-topic); }
-.bg-icon-box-with-dashed-lines { @include glyphBg($bg-icon-box-with-dashed-lines); }
-.bg-icon-summary-widget { @include glyphBg($bg-icon-summary-widget); }
-.bg-icon-notebook { @include glyphBg($bg-icon-notebook); }
-.bg-icon-tabs-view { @include glyphBg($bg-icon-tabs-view); }
-.bg-icon-flexible-layout { @include glyphBg($bg-icon-flexible-layout); }
-.bg-icon-generator-telemetry { @include glyphBg($bg-icon-generator-telemetry); }
-.bg-icon-generator-events { @include glyphBg($bg-icon-generator-events); }
-.bg-icon-gauge { @include glyphBg($bg-icon-gauge); }
-.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); }
-.bg-icon-condition-widget { @include glyphBg($bg-icon-condition-widget); }
+.bg-icon-alert-rect {
+  @include glyphBg($bg-icon-alert-rect);
+}
+.bg-icon-alert-triangle {
+  @include glyphBg($bg-icon-alert-triangle);
+}
+.bg-icon-bell {
+  @include glyphBg($bg-icon-bell);
+}
+.bg-icon-info {
+  @include glyphBg($bg-icon-info);
+}
+.bg-icon-plus {
+  @include glyphBg($bg-icon-plus);
+}
+.bg-icon-grippy-ew {
+  @include glyphBg($bg-icon-grippy-ew);
+}
+.bg-icon-chain-links {
+  @include glyphBg($bg-icon-chain-links);
+}
+.bg-icon-clock {
+  @include glyphBg($bg-icon-clock);
+}
+.bg-icon-database {
+  @include glyphBg($bg-icon-database);
+}
+.bg-icon-database-query {
+  @include glyphBg($bg-icon-database-query);
+}
+.bg-icon-dataset {
+  @include glyphBg($bg-icon-dataset);
+}
+.bg-icon-datatable {
+  @include glyphBg($bg-icon-datatable);
+}
+.bg-icon-dictionary {
+  @include glyphBg($bg-icon-dictionary);
+}
+.bg-icon-folder {
+  @include glyphBg($bg-icon-folder);
+}
+.bg-icon-image {
+  @include glyphBg($bg-icon-image);
+}
+.bg-icon-layout {
+  @include glyphBg($bg-icon-layout);
+}
+.bg-icon-object {
+  @include glyphBg($bg-icon-object);
+}
+.bg-icon-object-unknown {
+  @include glyphBg($bg-icon-object-unknown);
+}
+.bg-icon-packet {
+  @include glyphBg($bg-icon-packet);
+}
+.bg-icon-page {
+  @include glyphBg($bg-icon-page);
+}
+.bg-icon-plot-overlay {
+  @include glyphBg($bg-icon-plot-overlay);
+}
+.bg-icon-plot-stacked {
+  @include glyphBg($bg-icon-plot-stacked);
+}
+.bg-icon-session {
+  @include glyphBg($bg-icon-session);
+}
+.bg-icon-tabular {
+  @include glyphBg($bg-icon-tabular);
+}
+.bg-icon-tabular-lad {
+  @include glyphBg($bg-icon-tabular-lad);
+}
+.bg-icon-tabular-lad-set {
+  @include glyphBg($bg-icon-tabular-lad-set);
+}
+.bg-icon-tabular-scrolling {
+  @include glyphBg($bg-icon-tabular-scrolling);
+}
+.bg-icon-telemetry {
+  @include glyphBg($bg-icon-telemetry);
+}
+.bg-icon-timeline {
+  @include glyphBg($bg-icon-timeline);
+}
+.bg-icon-timer {
+  @include glyphBg($bg-icon-timer);
+}
+.bg-icon-box-with-dashed-lines {
+  @include glyphBg($bg-icon-box-with-dashed-lines);
+}
+.bg-icon-summary-widget {
+  @include glyphBg($bg-icon-summary-widget);
+}
+.bg-icon-notebook {
+  @include glyphBg($bg-icon-notebook);
+}
+.bg-icon-tabs-view {
+  @include glyphBg($bg-icon-tabs-view);
+}
+.bg-icon-flexible-layout {
+  @include glyphBg($bg-icon-flexible-layout);
+}
+.bg-icon-generator-telemetry {
+  @include glyphBg($bg-icon-generator-telemetry);
+}
+.bg-icon-generator-events {
+  @include glyphBg($bg-icon-generator-events);
+}
+.bg-icon-gauge {
+  @include glyphBg($bg-icon-gauge);
+}
+.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);
+}
+.bg-icon-condition-widget {
+  @include glyphBg($bg-icon-condition-widget);
+}
+.bg-icon-bar-chart {
+  @include glyphBg($bg-icon-bar-chart);
+}
+.bg-icon-map {
+  @include glyphBg($bg-icon-map);
+}
+.bg-icon-plan {
+  @include glyphBg($bg-icon-plan);
+}
+.bg-icon-timelist {
+  @include glyphBg($bg-icon-timelist);
+}
+.bg-icon-plot-scatter {
+  @include glyphBg($bg-icon-plot-scatter);
+}
+.bg-icon-notebook-shift-log {
+  @include glyphBg($bg-icon-notebook-shift-log);
+}
+.bg-icon-telemetry-aggregate {
+  @include glyphBg($bg-icon-telemetry-aggregate);
+}
+.bg-icon-trash {
+  @include glyphBg($bg-icon-trash);
+}
+.bg-icon-eye-open {
+  @include glyphBg($bg-icon-eye-open);
+}
+.bg-icon-camera {
+  @include glyphBg($bg-icon-camera);
+}
diff --git a/src/styles/_legacy-messages.scss b/src/styles/_legacy-messages.scss
index f19ce11a285..ac4b8580e86 100644
--- a/src/styles/_legacy-messages.scss
+++ b/src/styles/_legacy-messages.scss
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,126 +19,136 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+
+@use 'sass:math';
+
 /******************************************************************* MESSAGES */
 .w-message-contents {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
 
-    > * + * {
-        margin-bottom: $interiorMargin;
-    }
+  > * + * {
+    margin-bottom: $interiorMargin;
+  }
 
-    .message-body {
-        flex: 1 1 100%;
-    }
+  .message-body {
+    flex: 1 1 100%;
+  }
 }
 
 // Singleton in an overlay dialog
 .t-message-single .l-message,
 .t-message-single.l-message {
-    $iconW: $messageListIconD;
-    &:before {
-        font-size: $iconW;
-        width: $iconW + 2;
-    }
-    .title {
-        font-size: 1.2em;
-    }
+  $iconW: $messageListIconD;
+  &:before {
+    font-size: $iconW;
+    width: $iconW + 2;
+  }
+  .title {
+    font-size: 1.2em;
+  }
 }
 
 // Singleton inline in a view
 .t-message-inline .l-message,
 .t-message-inline.l-message {
-    border-radius: $controlCr;
-    &.message-severity-info { background-color: rgba($colorInfo, 0.3); }
-    &.message-severity-alert { background-color: rgba($colorWarningLo, 0.3); }
-    &.message-severity-error { background-color: rgba($colorWarningHi, 0.3); }
-
-    .w-message-contents.l-message-body-only {
-        .message-body {
-            margin-top: $interiorMargin;
-        }
+  border-radius: $controlCr;
+  &.message-severity-info {
+    background-color: rgba($colorInfo, 0.3);
+  }
+  &.message-severity-alert {
+    background-color: rgba($colorWarningLo, 0.3);
+  }
+  &.message-severity-error {
+    background-color: rgba($colorWarningHi, 0.3);
+  }
+
+  .w-message-contents.l-message-body-only {
+    .message-body {
+      margin-top: $interiorMargin;
     }
+  }
 }
 
 // In a list
 .c-overlay__messages {
-    //@include abs();
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
+  //@include abs();
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  padding-right: $interiorMargin;
+
+  > div,
+  > span {
+    margin-bottom: $interiorMargin;
+  }
+
+  .w-messages {
+    flex: 1 1 100%;
+    overflow-y: auto;
     padding-right: $interiorMargin;
-
-    > div,
-    > span {
-        margin-bottom: $interiorMargin;
+  }
+  // Each message
+  .c-message {
+    @include discreteItem();
+    flex: 0 0 auto;
+    margin-bottom: $interiorMarginSm;
+
+    .hint,
+    .bottom-bar {
+      text-align: left;
     }
-
-    .w-messages {
-        flex: 1 1 100%;
-        overflow-y: auto;
-        padding-right: $interiorMargin;
-    }
-    // Each message
-    .c-message {
-        @include discreteItem();
-        flex: 0 0 auto;
-        margin-bottom: $interiorMarginSm;
-
-        .hint,
-        .bottom-bar {
-            text-align: left;
-        }
-    }
-
+  }
 }
 
 @include phonePortrait {
-    .t-message-single .l-message,
-    .t-message-single.l-message {
-        flex-direction: column;
-        &:before {
-            margin-right: 0;
-            margin-bottom: $interiorMarginLg;
-            text-align: center;
-            width: 100%;
-        }
-
-        .bottom-bar {
-            text-align: center;
-            .s-button {
-                display: block;
-                width: 100%;
-            }
-        }
+  .t-message-single .l-message,
+  .t-message-single.l-message {
+    flex-direction: column;
+    &:before {
+      margin-right: 0;
+      margin-bottom: $interiorMarginLg;
+      text-align: center;
+      width: 100%;
     }
+
+    .bottom-bar {
+      text-align: center;
+      .s-button {
+        display: block;
+        width: 100%;
+      }
+    }
+  }
 }
 
 body.desktop .t-message-list {
-    .w-message-contents { padding-right: $interiorMargin; }
+  .w-message-contents {
+    padding-right: $interiorMargin;
+  }
 }
 
 // Alert elements in views
-mixin sUnSynced() {
-    $c: $colorPausedBg;
-    border: 1px solid $c;
+@mixin sUnSynced {
+  $c: $colorPausedBg;
+  border: 1px solid $c;
 }
 
 .s-unsynced {
-    @include sUnsynced();
+  @include sUnsynced();
 }
 
 .s-status-timeconductor-unsynced {
-    // Plot areas
-    .gl-plot .gl-plot-display-area {
-        @include sUnsynced();
-    }
+  // Plot areas
+  .gl-plot .gl-plot-display-area {
+    @include sUnsynced();
+  }
 
-    // Object headers
-    .object-header {
-        .t-object-alert {
-            display: inline;
-        }
+  // Object headers
+  .object-header {
+    .t-object-alert {
+      display: inline;
     }
+  }
 }
diff --git a/src/styles/_legacy-plots.scss b/src/styles/_legacy-plots.scss
index 7bf59300abb..2606cb0ed5a 100644
--- a/src/styles/_legacy-plots.scss
+++ b/src/styles/_legacy-plots.scss
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,762 +21,869 @@
  *****************************************************************************/
 /********************************************************************* PLOTS */
 mct-plot {
-    display: contents;
+  display: contents;
 }
 
 /*********************** STACKED PLOT LAYOUT */
 .is-editing {
-    .gl-plot.child-frame {
-        @include hover {
-            background: rgba($editUIColorBg, 0.1);
-            box-shadow: inset rgba($editUIColorBg, 0.3) 0 0 0 1px;
-        }
-
-        &[s-selected] {
-            background: rgba($editUIColorBg, 0.2);
-            box-shadow: inset rgba($editUIColorBg, 0.8) 0 0 0 1px;
-            z-index: 2;
-        }
+  .gl-plot.child-frame {
+    @include hover {
+      background: rgba($editUIColorBg, 0.1);
+      box-shadow: inset rgba($editUIColorBg, 0.3) 0 0 0 1px;
     }
 
-    .plot-wrapper-axis-and-display-area {
-        pointer-events: none;
+    &[s-selected] {
+      background: rgba($editUIColorBg, 0.2);
+      box-shadow: inset rgba($editUIColorBg, 0.8) 0 0 0 1px;
+      z-index: 2;
     }
+  }
+
+  .plot-wrapper-axis-and-display-area {
+    pointer-events: none;
+  }
 }
 
 .c-plot,
 .gl-plot {
-    overflow: hidden;
-    min-height: 100px;
-
-        .s-status-taking-snapshot & {
-        .c-control-bar {
-            display: none;
-        }
-        .gl-plot-x-label__select,
-        .gl-plot-y-label__select {
-            display: none;
-        }
+  .s-status-taking-snapshot & {
+    .c-control-bar {
+      display: none;
     }
-
-    /*********************** MISSING ITEM INDICATORS */
-    .is-status__indicator {
-        font-size: 0.8em;
+    .gl-plot-x-label__select,
+    .gl-plot-y-label__select {
+      display: none;
     }
+  }
+
+  /*********************** MISSING ITEM INDICATORS */
+  .is-status__indicator {
+    font-size: 0.8em;
+  }
 }
 
 .c-plot {
-    @include abs($mainViewPad);
+  @include abs($mainViewPad);
+  display: flex;
+  overflow: hidden;
+  min-height: $plotMinH;
 
+  .c-control-bar {
+    flex: 0 0 auto;
+    margin-bottom: $interiorMargin;
+  }
+
+  .l-view-section {
     display: flex;
+    flex: 1 1 auto;
     flex-direction: column;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
 
-    .c-control-bar {
-        flex: 0 0 auto;
-        margin-bottom: $interiorMargin;
+  &.is-stale {
+    @include isStaleHolder();
+  }
+
+  .c-plot--stacked-container {
+    border: 1px solid transparent;
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-height: $plotMinH;
+    overflow: hidden;
+
+    &[s-selected] {
+      .is-editing & {
+        border: $editMarqueeBorder;
+      }
     }
+  }
+  &--stacked {
+    min-height: auto !important;
+
+    .child-frame {
+      .has-control-bar {
+        .c-control-bar {
+          // Hides buttons per plot element in a stacked plot
+          display: none;
+        }
+      }
 
-    .l-view-section, .c-plot--stacked-container {
+      mct-plot {
         display: flex;
         flex: 1 1 auto;
-        flex-direction: column;
-        overflow-y: auto;
-        overflow-x: hidden;
-    }
-
-    &--stacked {
-        .child-frame {
-            .has-control-bar {
-                .c-control-bar {
-                    // Hides buttons per plot element in a stacked plot
-                    display: none;
-                }
-            }
-
-            mct-plot {
-                display: flex;
-                flex: 1 1 auto;
-                height: 100%;
-                position: relative;
-            }
-            flex: 1 1 auto;
-        }
+        height: 100%;
+        position: relative;
+      }
+      flex: 1 1 auto;
+    }
 
-        .s-status-timeconductor-unsynced .holder-plot {
-            .t-object-alert.t-alert-unsynced {
-                display: block;
-            }
-        }
+    .s-status-timeconductor-unsynced .holder-plot {
+      .t-object-alert.t-alert-unsynced {
+        display: block;
+      }
     }
+  }
 
-    .is-in-small-container & {
-        .c-control-bar {
-            display: none;
-        }
+  .--width-less-than-600 & {
+    .c-control-bar {
+      display: none;
     }
+  }
 }
 
 .gl-plot {
-    display: flex;
-    flex: 1 1 auto;
+  display: flex;
+  flex: 1 1 auto;
 
-    /*********************** 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 {
-        // Holds the plot area and the X-axis only
-        position: absolute;
-        top: nth($plotDisplayArea, 1);
-        right:0;
-        bottom: 0;
-        left: nth($plotDisplayArea, 4);
-
-        .gl-plot-display-area {
-            overflow: hidden;
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: nth($plotDisplayArea, 3);
-            left: 0;
-        }
-
-        .gl-plot-chart-area, .gl-plot-chart-wrapper {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-        }
-
-        .gl-plot-axis-area.gl-plot-x {
-            top: auto;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            height: $plotXBarH;
-            width: auto;
-            overflow: hidden;
-        }
-    }
+  /*********************** AXIS AND DISPLAY AREA */
+  .plot-wrapper-axis-and-display-area {
+    position: relative;
+    flex: 1 1 auto;
+    //min-height: $plotMinH;
+  }
 
-    .gl-plot-axis-area {
-        position: absolute;
-        &.gl-plot-y {
-            top: nth($plotDisplayArea, 1);
-            right: auto;
-            bottom: nth($plotDisplayArea, 3);
-            left: 0;
-            width: $plotYBarW;
-
-            &:hover {
-                .gl-plot-y-label__select {
-                    display: block;
-                }
-            }
-        }
+  .gl-plot-wrapper-display-area-and-x-axis {
+    // Holds the plot area and the X-axis only
+    position: absolute;
+    top: nth($plotDisplayArea, 1);
+    right: 0;
+    bottom: 0;
+    left: nth($plotDisplayArea, 4);
 
-        &.gl-plot-x {
-            @include hover {
-                .gl-plot-x-label__select {
-                    display: block;
-                }
-            }
+    .gl-plot-display-area {
+      overflow: hidden;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: nth($plotDisplayArea, 3);
+      left: 0;
+    }
+
+    .gl-plot-chart-area,
+    .gl-plot-chart-wrapper {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+    .alt-pressed {
+      // When alt is being pressed and user is hovering over the plot, set the cursor
+      @include cursorGrab();
+    }
+
+    .gl-plot-axis-area.gl-plot-x {
+      top: auto;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      height: $plotXBarH;
+      width: auto;
+      overflow: hidden;
+    }
+  }
+
+  .gl-plot-axis-area {
+    position: absolute;
+    &.gl-plot-y {
+      top: nth($plotDisplayArea, 1);
+      right: auto;
+      bottom: nth($plotDisplayArea, 3);
+      left: 0;
+      width: $plotYBarW;
+
+      &:hover {
+        .gl-plot-y-label__select {
+          display: block;
         }
+      }
     }
 
-    .gl-plot-coords {
-        // This does not appear to be in use in Open MCT
-        box-sizing: border-box;
-        border-radius: $controlCr;
-        background: black;
-        padding: 2px 5px;
-        position: absolute;
-        top: nth($plotDisplayArea,1) + $interiorMarginLg;
-        right: auto;
-        bottom: auto;
-        left: nth($plotDisplayArea,4) + $interiorMarginLg;
-        z-index: 10;
-        &:empty {
-            display: none;
+    &.gl-plot-x {
+      @include hover {
+        .gl-plot-x-label__select {
+          display: block;
         }
+      }
     }
+  }
 
-    .gl-plot-ticks, .gl-plot-tick-wrapper {
-        height: 100%;
+  .gl-plot-coords {
+    // This does not appear to be in use in Open MCT
+    box-sizing: border-box;
+    border-radius: $controlCr;
+    background: black;
+    padding: 2px 5px;
+    position: absolute;
+    top: nth($plotDisplayArea, 1) + $interiorMarginLg;
+    right: auto;
+    bottom: auto;
+    left: nth($plotDisplayArea, 4) + $interiorMarginLg;
+    z-index: 10;
+    &:empty {
+      display: none;
+    }
+  }
+
+  .gl-plot-ticks,
+  .gl-plot-tick-wrapper {
+    height: 100%;
+  }
+
+  .gl-plot-label,
+  .l-plot-label {
+    position: absolute;
+    text-align: center;
+
+    &.gl-plot-x-label,
+    &.l-plot-x-label {
+      top: auto;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      height: auto;
+    }
+
+    &.gl-plot-y-label {
+      display: flex;
+      left: 0;
+      right: auto;
+      bottom: 0;
+      text-orientation: mixed;
+      writing-mode: vertical-lr;
+      //z-index allows clicking on visibility icon
+      z-index: 2;
+
+      .icon-gear-after:after {
+        // Icon denoting configurability
+        margin-top: $interiorMargin; // Uses margin-top due to writing-mode
+      }
+
+      .icon-eye-open:before,
+      .icon-eye-disabled:before {
+        padding-top: 5px;
+      }
+
+      .plot-series-color-swatch {
+        @include colorSwatch();
+        display: inline-block;
+        flex: 0 0 auto;
+        margin-bottom: $interiorMargin; // Uses margin-bottom due to writing-mode
+      }
     }
-
-    .gl-plot-label,
-    .l-plot-label {
-        position: absolute;
-        text-align: center;
-
-        &.gl-plot-x-label,
-        &.l-plot-x-label {
-            top: auto;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            height: auto;
-        }
-
-        &.gl-plot-y-label {
-            display: block;
-            left: 0; top: 0; right: auto; bottom: 0;
-            text-orientation: mixed;
-            writing-mode: vertical-lr;
-            &:before {
-                // Icon denoting configurability
-                margin-bottom: $interiorMargin; // Uses margin-bottom due to writing-mode
-            }
-        }
+  }
+  .gl-plot-y-label-swatch-container {
+    display: flex;
+    flex-direction: row;
+    overflow: auto;
+  }
+  .plot-yaxis-right {
+    &.gl-plot-y {
+      margin-left: 100%;
     }
 
-    .gl-plot-x-label__select {
-        position: absolute;
-        left: 50%;
-        bottom: 0;
-        transform: translateX(-50%);
-        z-index: 10;
+    .gl-plot-label {
+      &.gl-plot-y-label {
+        left: auto;
+        right: 0;
+      }
     }
 
     .gl-plot-y-label__select {
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        left: 0;
-        z-index: 10;
+      left: 0;
+      right: auto;
     }
+  }
 
-    .gl-plot-x-options,
-    .gl-plot-y-options {
-        $h: 24px;
-        position: absolute;
-        height: $h;
-        min-height: $h;
-        z-index: 2;
-    }
+  .gl-plot-x-label__select {
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    transform: translateX(-50%);
+    z-index: 10;
+  }
 
-    .gl-plot-x-options {
-        transform: translateX(-50%);
-        bottom: 0;
-        left: 50%;
-    }
+  .gl-plot-y-label__select {
+    position: absolute;
+    bottom: 2%;
+    transform: translateY(-50%);
+    left: 0;
+    z-index: 10;
+  }
+
+  .gl-plot-x-options,
+  .gl-plot-y-options {
+    $h: 24px;
+    position: absolute;
+    height: $h;
+    min-height: $h;
+    z-index: 2;
+  }
+
+  .gl-plot-x-options {
+    transform: translateX(-50%);
+    bottom: 0;
+    left: 50%;
+  }
+
+  .gl-plot-y-options {
+    transform: translateY(-50%);
+    min-width: 150px; // Need this due to enclosure of .select
+    top: 50%;
+    left: $plotYLabelW + $interiorMargin * 2;
+  }
+
+  .t-plot-display-controls {
+    position: absolute;
+    top: $interiorMargin;
+    right: $interiorMargin;
+  }
 
-    .gl-plot-y-options {
-        transform: translateY(-50%);
-        min-width: 150px; // Need this due to enclosure of .select
-        top: 50%;
-        left: $plotYLabelW + $interiorMargin * 2;
+  .gl-plot-hash {
+    position: absolute;
+    opacity: $opacityPlotHash;
+    &.hash-v {
+      border-right: 1px $colorPlotHash $stylePlotHash;
+      height: 100%;
     }
-
-    .t-plot-display-controls {
-        position: absolute;
-        top: $interiorMargin;
-        right: $interiorMargin;
+    &.hash-h {
+      border-bottom: 1px $colorPlotHash $stylePlotHash;
+      width: 100%;
     }
+  }
 
-    .gl-plot-hash {
-        position: absolute;
-        opacity: $opacityPlotHash;
-        &.hash-v {
-            border-right: 1px $colorPlotHash $stylePlotHash;
-            height: 100%;
-        }
-        &.hash-h {
-            border-bottom: 1px $colorPlotHash $stylePlotHash;
-            width: 100%;
-        }
-    }
+  &__local-controls {
+    // Plot local controls
+    $m: $interiorMargin;
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: $m;
+    left: $m;
+    z-index: 9;
 
-    &__local-controls {
-        // Plot local controls
-        $m: $interiorMargin;
-        display: flex;
-        align-items: center;
-        position: absolute;
-        top: $m;
-        left: $m;
-        z-index: 9;
-
-        &__reset {
-            transition: right 100ms;
-            top: $m;
-            right: $m;
-        }
+    &__reset {
+      transition: right 100ms;
+      top: $m;
+      right: $m;
+    }
 
-        &__zoom-and-guides {
-            top: $m;
-            right: $m;
-        }
+    &__zoom-and-guides {
+      top: $m;
+      right: $m;
+    }
 
-        .c-button {
-            box-shadow: $colorLocalControlOvrBg 0 0 0 2px;
-        }
+    .c-button {
+      box-shadow: $colorLocalControlOvrBg 0 0 0 2px;
     }
+  }
 
-    .l-state-indicators {
-        color: $colorPausedBg;
-        position: absolute;
-        cursor: help;
-        font-size: 1.2em;
-        bottom: $interiorMarginSm;
-        left: $interiorMarginSm;
-        z-index: 2;
+  .l-state-indicators {
+    color: $colorPausedBg;
+    position: absolute;
+    cursor: help;
+    font-size: 1.2em;
+    bottom: $interiorMarginSm;
+    left: $interiorMarginSm;
+    z-index: 2;
 
-        > * + * {
-            margin-left: $interiorMarginSm;
-        }
+    > * + * {
+      margin-left: $interiorMarginSm;
+    }
 
-        .t-alert-unsynced {
-            display: none;
-        }
+    .t-alert-unsynced {
+      display: none;
     }
+  }
 }
 
 .gl-plot-display-area,
 .plot-display-area {
-    @if $colorPlotBg != none {
-        background-color: $colorPlotBg;
-    }
-    cursor: crosshair;
-    border: 1px solid $colorPlotAreaBorder;
+  @if $colorPlotBg != none {
+    background-color: $colorPlotBg;
+  }
+  cursor: crosshair;
+  border: 1px solid $colorPlotAreaBorder;
 }
 
 .tick {
-    position: absolute;
-    border: 0 $colorPlotHash solid;
-    &.tick-x {
-        border-right-width: 1px;
-        height: 100%; // Assumption is that the tick will be in a holder that will set it's height;
-    }
+  position: absolute;
+  border: 0 $colorPlotHash solid;
+  &.tick-x {
+    border-right-width: 1px;
+    height: 100%; // Assumption is that the tick will be in a holder that will set it's height;
+  }
 }
 
 .gl-plot-tick,
 .tick-label {
-    @include reverseEllipsis();
-    font-size: 0.7rem;
-    position: absolute;
-    &.gl-plot-x-tick-label,
-    &.tick-label-x {
-        right: auto;
-        bottom: auto;
-        left: auto;
-        height: auto;
-        width: 20%;
-        margin-left: -10%;
-        text-align: center;
-    }
-    &.gl-plot-y-tick-label,
-    &.tick-label-y {
-        top: auto;
-        height: 1em;
-        width: auto;
-        margin-bottom: -0.5em;
-        text-align: right;
-    }
+  @include reverseEllipsis();
+  font-size: 0.7rem;
+  position: absolute;
+  &.gl-plot-x-tick-label,
+  &.tick-label-x {
+    right: auto;
+    bottom: auto;
+    left: auto;
+    height: auto;
+    width: 20%;
+    margin-left: -10%;
+    text-align: center;
+  }
+  &.gl-plot-y-tick-label,
+  &.tick-label-y {
+    top: auto;
+    height: 1em;
+    width: auto;
+    margin-bottom: -0.5em;
+    text-align: right;
+  }
 }
 
 .gl-plot-tick {
-    &.gl-plot-x-tick-label {
-        top: $interiorMarginSm;
-    }
+  &.gl-plot-x-tick-label {
+    top: $interiorMarginSm;
+  }
+  &.gl-plot-y-tick-label {
+    right: $interiorMarginSm;
+    left: auto;
+  }
+}
+
+.plot-yaxis-right {
+  .gl-plot-tick {
     &.gl-plot-y-tick-label {
-        right: $interiorMarginSm;
-        left: auto;
+      left: $interiorMarginSm;
+      right: auto;
     }
+  }
 }
-
 .tick-label {
-    &.tick-label-x {
-        top: 0;
-    }
-    &.tick-label-y {
-        right: 0;
-        left: 0;
-    }
+  &.tick-label-x {
+    top: 0;
+  }
+  &.tick-label-y {
+    right: 0;
+    left: 0;
+  }
 }
 
 .export-plot {
-    $bg: white;
-    $fg: black;
-    $gry: #999;
-
-    background: $bg !important;
-    z-index: -10;
-
-    .l-view-section {
-        .s-status-timeconductor-unsynced .holder-plot {
-            .t-object-alert.t-alert-unsynced {
-                display: none;
-            }
-        }
+  $bg: white;
+  $fg: black;
+  $gry: #999;
+
+  background: $bg !important;
+  z-index: -10;
+
+  .l-view-section {
+    .s-status-timeconductor-unsynced .holder-plot {
+      .t-object-alert.t-alert-unsynced {
+        display: none;
+      }
     }
+  }
 
-    .gl-plot-display-area {
-        background: none !important;
-        border-color: $gry !important;
+  .gl-plot-display-area {
+    background: none !important;
+    border-color: $gry !important;
 
-        .gl-plot-local-controls,
-        .h-local-controls {
-            opacity: 0;
-        }
+    .gl-plot-local-controls,
+    .h-local-controls {
+      opacity: 0;
     }
+  }
 
-    .gl-plot {
-        color: $fg;
+  .gl-plot {
+    color: $fg;
 
-        .gl-plot-hash {
-            opacity: 0.1;
-            border-color: $fg;
-        }
+    .gl-plot-hash {
+      opacity: 0.1;
+      border-color: $fg;
     }
+  }
 
-    table {
-        thead {
-            border-bottom: none;
+  table {
+    thead {
+      border-bottom: none;
 
-            th {
-                background: #eee;
-                border-left-color: $bg;
-                color: #666;
-            }
+      th {
+        background: #eee;
+        border-left-color: $bg;
+        color: #666;
+      }
 
-            tr {
-                border: none;
-            }
-        }
-        tbody {
-            tr {
-                border-top: 1px solid #ccc;
-            }
-
-            td {
-                color: $fg;
-            }
-        }
+      tr {
+        border: none;
+      }
+    }
+    tbody {
+      tr {
+        border-top: 1px solid #ccc;
+      }
+
+      td {
+        color: $fg;
+      }
     }
+  }
 }
 
 /****************** _LEGEND.SCSS */
 .gl-plot-legend,
 .c-plot-legend {
-    overflow: hidden;
-
-    &__wrapper {
-        // Holds view-control and both collapsed and expanded legends
-        flex: 1 1 auto;
-        height: 100%;
-        overflow: auto;
-        padding: 2px;
-    }
-
-    &__view-control {
-        padding-top: 4px;
-        margin-right: $interiorMarginSm;
-    }
-
-    &__header {
-        @include propertiesHeader();
-        margin-bottom: $interiorMarginSm;
-    }
+  overflow: hidden;
+  flex: 0 0 auto; // Prevents clipping for all legend placements (top, bottom, etc.)
 
-    .is-in-small-container & {
-        &.is-legend-hidden {
-            display: none;
-        }
-    }
+  &__wrapper {
+    // Holds view-control and both collapsed and expanded legends
+    flex: 1 1 auto;
+    height: 100%;
+    overflow: auto;
+    padding: 2px;
+  }
+
+  &__view-control {
+    padding-top: 4px;
+    margin-right: $interiorMarginSm;
+  }
+
+  &__header {
+    @include propertiesHeader();
+    margin-bottom: $interiorMarginSm;
+  }
+
+  .--width-less-than-600 & {
+    &.is-legend-hidden {
+      display: none;
+    }
+  }
 }
 
 .c-plot--stacked {
-    .is-legend-hidden {
-        // Always show the legend in a stacked plot
-        display: flex !important;
-    }
+  .is-legend-hidden {
+    // Always show the legend in a stacked plot
+    display: flex !important;
+  }
 }
 
-
 .gl-plot-legend {
-    display: flex;
-    align-items: flex-start;
-
-    table {
-        table-layout: fixed;
-        th,
-        td {
-            @include ellipsize(); // Note: this won't work if table-layout uses anything other than fixed.
-            padding: 1px 3px; // Tighter than standard tabular padding
-        }
+  display: flex;
+  align-items: flex-start;
+
+  table {
+    table-layout: fixed;
+    th,
+    td {
+      @include ellipsize(); // Note: this won't work if table-layout uses anything other than fixed.
+      padding: 1px 3px; // Tighter than standard tabular padding
     }
+  }
 }
 
-*[class*="-legend"] {
-    &.hover-on-plot {
-        // User is hovering over the plot to get a value at a point
-        .hover-value-enabled {
-            background-color: $legendHoverValueBg;
-            border-radius: $smallCr;
-            padding: 0 $interiorMarginSm;
-
-            &.value-to-display-min:before {
-                content: 'MIN ';
-            }
-            &.value-to-display-max:before {
-                content: 'MAX ';
-            }
-        }
-    }
+*[class*='-legend'] {
+  &.hover-on-plot {
+    // User is hovering over the plot to get a value at a point
+    .hover-value-enabled {
+      background-color: $legendHoverValueBg;
+      border-radius: $smallCr;
+      padding: 0 $interiorMarginSm;
+
+      &.value-to-display-min:before {
+        content: 'MIN ';
+      }
+      &.value-to-display-max:before {
+        content: 'MAX ';
+      }
+    }
+  }
 }
 
 /***************** GENERAL STYLES, ALL STATES */
-.plot-legend-item, .plot-series-limit-label {
-    // General styles for legend items, both expanded and collapsed legend states
-    > * + * {
-        margin-left: $interiorMarginSm;
-    }
-
-    .plot-series-color-swatch {
-        @include colorSwatch();
-        display: inline-block;
-        flex: 0 0 auto;
-    }
-    .plot-series-name {
-        display: inline;
-        @include ellipsize();
-    }
-
-    .plot-series-value {
-        @include ellipsize();
-        @include isLimit();
-    }
+.plot-legend-item,
+.plot-series-limit-label {
+  // General styles for legend items, both expanded and collapsed legend states
+  > * + * {
+    margin-left: $interiorMarginSm;
+  }
+
+  &.is-stale {
+    @include isStaleElement();
+  }
+
+  .plot-series-color-swatch {
+    @include colorSwatch();
+    display: inline-block;
+    flex: 0 0 auto;
+  }
+  .plot-series-name {
+    display: inline;
+    @include ellipsize();
+  }
+
+  .plot-series-value {
+    @include ellipsize();
+    @include isLimit();
+  }
 }
 
 .plot-series-swatch-and-name {
-    display: flex;
-    flex: 0 1 auto;
-    align-items: center;
+  display: flex;
+  flex: 0 1 auto;
+  align-items: center;
 
-    > * + * {
-        margin-left: $interiorMarginSm;
-    }
+  > * + * {
+    margin-left: $interiorMarginSm;
+  }
 }
 
 .plot-wrapper-expanded-legend {
-    flex: 1 1 auto;
+  flex: 1 1 auto;
 }
 
-.plot-legend-top .gl-plot-legend { margin-bottom: $interiorMargin; }
-.plot-legend-bottom .gl-plot-legend { margin-top: $interiorMargin; }
-.plot-legend-left .gl-plot-legend { margin-right: $interiorMargin; }
-.plot-legend-right .gl-plot-legend { margin-left: $interiorMargin; }
+.plot-legend-top .gl-plot-legend {
+  margin-bottom: $interiorMargin;
+}
+.plot-legend-bottom .gl-plot-legend {
+  margin-top: $interiorMargin;
+}
+.plot-legend-left .gl-plot-legend {
+  margin-right: $interiorMargin;
+}
+.plot-legend-right .gl-plot-legend {
+  margin-left: $interiorMargin;
+}
 
 .gl-plot,
 .c-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;
+  }
+  &.plot-legend-left .gl-plot-legend {
+    margin-right: $interiorMargin;
+  }
+
+  /***************** GENERAL STYLES, COLLAPSED */
+  &.plot-legend-collapsed {
+    // .plot-legend-item is a span of spans.
+
+    .plot-legend-item {
+      border-radius: $smallCr;
+      display: flex;
+      justify-content: stretch;
+
+      .plot-series-swatch-and-name,
+      .plot-series-value {
+        @include ellipsize();
+        flex: 1 1 auto;
+      }
 
-    &.plot-legend-collapsed .icon-cursor-lock::before { padding-right: 5px; }
-    &.plot-legend-expanded .icon-cursor-lock::before { padding-right: 5px; }
+      .plot-series-value {
+        text-align: left;
+      }
+    }
+  }
 
-    &.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; }
-    &.plot-legend-left .gl-plot-legend { margin-right: $interiorMargin; }
+  /***************** GENERAL STYLES, EXPANDED */
+  &.plot-legend-expanded {
+    .gl-plot-legend {
+      max-height: 70%;
+    }
 
-    /***************** GENERAL STYLES, COLLAPSED */
-    &.plot-legend-collapsed {
-        // .plot-legend-item is a span of spans.
+    .plot-wrapper-expanded-legend {
+      overflow-y: auto;
+      table thead th {
+        background: $legendTableHeadBg;
+      }
+    }
+  }
 
-        .plot-legend-item {
-            display: flex;
-            justify-content: stretch;
+  /***************** TOP OR BOTTOM */
+  &.plot-legend-top,
+  &.plot-legend-bottom,
+  &.plot-legend-hidden {
+    // General styles when legend is on the top or bottom
+    // -hidden included for legacy plots
+    flex-direction: column;
 
-            .plot-series-swatch-and-name,
-            .plot-series-value {
-                @include ellipsize();
-                flex: 1 1 auto;
-            }
+    &.plot-legend-collapsed {
+      // COLLAPSED ON TOP OR BOTTOM
+      .plot-wrapper-collapsed-legend {
+        display: flex;
+        flex: 1 1 auto;
+        overflow: hidden;
 
-            .plot-series-value {
-                text-align: left;
-            }
+        > .plot-legend-item + .plot-legend-item {
+          // Space between plot items
+          margin-left: $interiorMarginLg;
         }
+      }
     }
+  }
 
-    /***************** GENERAL STYLES, EXPANDED */
-    &.plot-legend-expanded {
-        .gl-plot-legend {
-             max-height: 70%;
-        }
+  /***************** LEFT OR RIGHT */
+  &.plot-legend-left,
+  &.plot-legend-right {
+    // General styles when legend is on left or right
 
-        .plot-wrapper-expanded-legend {
-            overflow-y: auto;
-            table thead th { background: $legendTableHeadBg; }
-        }
+    .gl-plot-legend {
+      max-height: inherit;
     }
 
-    /***************** TOP OR BOTTOM */
-    &.plot-legend-top,
-    &.plot-legend-bottom,
-    &.plot-legend-hidden {
-        // General styles when legend is on the top or bottom
-        // -hidden included for legacy plots
-        flex-direction: column;
-
-        &.plot-legend-collapsed {
-            // COLLAPSED ON TOP OR BOTTOM
-            .plot-wrapper-collapsed-legend {
-                display: flex;
-                flex: 1 1 auto;
-                overflow: hidden;
-
-                > .plot-legend-item + .plot-legend-item {
-                    // Space between plot items
-                    margin-left: $interiorMarginLg;
-                }
-            }
-        }
+    &.plot-legend-expanded {
+      // EXPANDED, ON EITHER SIDE
+      .gl-plot-legend {
+        width: $plotLegendWidthExpanded;
+      }
     }
 
-    /***************** LEFT OR RIGHT */
-    &.plot-legend-left,
-    &.plot-legend-right {
-        // General styles when legend is on left or right
+    &.plot-legend-collapsed {
+      // COLLAPSED, ON EITHER SIDE
+      .gl-plot-legend {
+        width: $plotLegendWidthCollapsed;
+      }
 
-        .gl-plot-legend {
-            max-height: inherit;
-        }
+      .plot-wrapper-collapsed-legend {
+        display: flex;
+        flex-flow: column nowrap;
+        min-width: 0;
+        flex: 1 1 auto;
+        overflow-y: auto;
 
-        &.plot-legend-expanded {
-            // EXPANDED, ON EITHER SIDE
-            .gl-plot-legend {
-                width: $plotLegendWidthExpanded;
-            }
+        > * + * {
+          // Space between plot items
+          margin-top: $interiorMarginSm;
         }
-
-        &.plot-legend-collapsed {
-            // COLLAPSED, ON EITHER SIDE
-            .gl-plot-legend {
-                width: $plotLegendWidthCollapsed;
-            }
-
-            .plot-wrapper-collapsed-legend {
-                display: flex;
-                flex-flow: column nowrap;
-                min-width: 0;
-                flex: 1 1 auto;
-                overflow-y: auto;
-
-                > * + * {
-                    // Space between plot items
-                    margin-top: $interiorMarginSm;
-                }
-            }
-            .plot-legend-item {
-                margin-bottom: $interiorMarginSm;
-                margin-left: 0;
-                flex-wrap: nowrap;
-                .plot-series-swatch-and-name {
-                    @include ellipsize();
-                    flex: 0 1 auto;
-                    min-width: 20%;
-                }
-                .plot-series-value {
-                    flex: 0 1 auto;
-                    width: auto;
-                }
-            }
+      }
+      .plot-legend-item {
+        margin-bottom: $interiorMarginSm;
+        margin-left: 0;
+        flex-wrap: nowrap;
+        .plot-series-swatch-and-name {
+          @include ellipsize();
+          flex: 0 1 auto;
+          min-width: 20%;
         }
+        .plot-series-value {
+          flex: 0 1 auto;
+          width: auto;
+        }
+      }
     }
+  }
 
-    /***************** ON BOTTOM OR RIGHT */
-    &.plot-legend-right,
-    &.plot-legend-bottom {
-        .gl-plot-legend {
-            order: 2;
-        }
-        .plot-wrapper-axis-and-display-area {
-            order: 1;
-        }
+  /***************** ON BOTTOM OR RIGHT */
+  &.plot-legend-right,
+  &.plot-legend-bottom {
+    .gl-plot-legend {
+      order: 2;
+    }
+    .plot-wrapper-axis-and-display-area {
+      order: 1;
     }
+  }
 }
 
 /***************** STACKED PLOT LEGEND OVERRIDES */
 .c-plot--stacked {
-    // Always show the legend on top, ignore any position setting
-    .c-plot,
-    .gl-plot {
-        flex-direction: column !important;
-
-        .c-plot-legend,
-        .gl-plot-legend {
-            margin: 0;
-            margin-bottom: $interiorMargin;
-            order: 1 !important;
-            width: 100% !important;
-
-            .plot-wrapper-collapsed-legend {
-                flex-direction: row !important;
-            }
-        }
-        .plot-wrapper-axis-and-display-area {
-            order: 2 !important;
-        }
+  // Always show the legend on top, ignore any position setting
+  .c-plot,
+  .gl-plot {
+    flex-direction: column !important;
+
+    .c-plot-legend,
+    .gl-plot-legend {
+      margin: 0;
+      margin-bottom: $interiorMargin;
+      order: 1 !important;
+      width: 100% !important;
+
+      .plot-wrapper-collapsed-legend {
+        flex-direction: row !important;
+      }
+    }
+    .plot-wrapper-axis-and-display-area {
+      order: 2 !important;
     }
+  }
+}
+
+/***************** BAR GRAPHS */
+.c-bar-chart {
+  flex: 1 1 auto;
+  overflow: hidden;
+}
 
+/***************** SCATTER PLOTS */
+.c-scatter-chart {
+  flex: 1 1 auto;
+  overflow: hidden;
 }
 
 /***************** CURSOR GUIDES */
 [class*='c-cursor-guide'] {
-    box-shadow: $shdwCursorGuide;
-    background-color: $colorCursorGuide;
-    display: none; // Displayed when an element with has-cursor-guides gets a hover; see below
-    pointer-events: none;
-    position: absolute;
+  box-shadow: $shdwCursorGuide;
+  background-color: $colorCursorGuide;
+  display: none; // Displayed when an element with has-cursor-guides gets a hover; see below
+  pointer-events: none;
+  position: absolute;
 }
 
 .has-cursor-guides:hover [class*='c-cursor-guide'] {
-    display: block;
+  display: block;
 }
 
 .c-cursor-guide {
-    &--h {
-        height: 1px;
-        left: 0; right: 0;
-    }
-
-    &--v {
-        width: 1px;
-        top: 0; bottom: 0;
-    }
+  &--h {
+    height: 1px;
+    left: 0;
+    right: 0;
+  }
+
+  &--v {
+    width: 1px;
+    top: 0;
+    bottom: 0;
+  }
 }
 
 .s-status-timeconductor-unsynced {
-    .t-alert-unsynced {
-        display: inline-block !important;
-    }
+  .t-alert-unsynced {
+    display: inline-block !important;
+  }
 }
 
 /*********************** CURSOR LOCK INDICATOR */
 [class*='c-state-indicator__alert-cursor-lock'] {
-    display: none;
+  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;
+  background: rgba($colorInfo, 0.1);
 
-        &[class*='--verbose'] {
-            padding: $interiorMarginSm;
+  [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/_legacy.scss b/src/styles/_legacy.scss
index 310a71dd92f..bbd44faedfc 100644
--- a/src/styles/_legacy.scss
+++ b/src/styles/_legacy.scss
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,506 +19,528 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+
+@use 'sass:math';
+
 /*********************************************************************** CLOCKS AND TIMERS */
 .c-clock,
 .c-timer {
+  display: flex;
+  align-items: center;
+  font-size: 1.25em;
+  overflow: hidden;
+
+  > * {
+    flex: 0 0 auto;
     display: flex;
     align-items: center;
-    font-size: 1.25em;
-    overflow: hidden;
-
-    > * {
-        flex: 0 0 auto;
-        display: flex;
-        align-items: center;
-    }
+  }
 
-    &__value {
-        color: $colorBodyFgEm;
-    }
-
-    .c-frame & {
-        // When in a Display or Flexible Layout
-        @include abs();
-        padding: $interiorMargin;
-    }
+  .c-frame & {
+    // When in a Display or Flexible Layout
+    @include abs();
+    padding: $interiorMargin;
+  }
 }
 
 .c-clock {
-    > * + * { margin-left: $interiorMargin; }
+  > * + * {
+    margin-left: $interiorMargin;
+  }
+
+  &__timezone-selection .c-menu {
+    // Menu for selecting timezones in properties dialog
+    max-height: 200px;
+  }
 }
 
 .c-timer {
-    $ctrlW: 22px;
+  $ctrlW: 22px;
 
-    &__controls {
-        font-size: 1rem !important;
-        margin-right: 0;
-        min-width: 0;
-        overflow: hidden;
-        transition: $transOut;
-        width: 0;
-
-        .c-icon-button:before { font-size: 1em; }
-    }
+  &__controls {
+    font-size: 1rem !important;
+    margin-right: 0;
+    min-width: 0;
+    overflow: hidden;
+    @include transition($prop: width, $dur: $transOutTime);
+    width: 0;
 
-    &__direction {
-        font-size: 0.9rem !important;
-        margin-right: $interiorMargin;
+    .c-icon-button:before {
+      font-size: 1em;
     }
+  }
 
-    &__ng-controller {
-        font-size: 0;
-        width: 0;
-    }
+  &__direction {
+    font-size: 0.7em !important;
+    margin-right: $interiorMargin;
+  }
 
-    &:hover {
-        .c-timer__controls {
-            transition: $transOut; // On purpose: want this to take a bit longer
-            margin-right: $interiorMargin;
-            width: $ctrlW * 2;
-        }
+  &__ng-controller {
+    font-size: 0;
+    width: 0;
+  }
 
-        &.is-stopped .c-timer__controls { width: $ctrlW; }
+  &:hover {
+    .c-timer__controls {
+      @include transition(
+        $prop: width,
+        $dur: $transOutTime
+      ); // On purpose: want this to take a bit longer
+      margin-right: $interiorMargin;
+      width: $ctrlW * 2;
     }
 
-    &__direction,
-    &__value {
-        opacity: 0.5;
+    &.is-stopped .c-timer__controls {
+      width: $ctrlW;
     }
+  }
 
-    &.is-started {
-        .c-timer {
-            &__direction,
-            &__value {
-                opacity: 1;
-            }
-        }
+  &__direction,
+  &__value {
+    opacity: 0.5;
+  }
+
+  &.is-started {
+    .c-timer {
+      &__direction,
+      &__value {
+        opacity: 1;
+      }
     }
+  }
 }
 
 /*********************************************************************** SUMMARY WIDGETS */
 /************************* WIDGET OBJECT */
 @mixin cSummaryWidget() {
-    box-shadow: $shdwBtns;
-    border-radius: $basicCr;
-    border-style: solid;
-    border-width: 1px;
-    cursor: default;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    &[href] {
-        cursor: pointer;
-    }
-
-    &__icon {
-        // Hide the icon holder element. Selector below shows this once 'icon-*' is added.
-        display: none;
-        font-size: 0.9em;
-    }
-
-    &__label {
-        @include ellipsize();
-    }
+  box-shadow: $shdwBtns;
+  border-radius: $basicCr;
+  border-style: solid;
+  border-width: 1px;
+  cursor: default;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &[href] {
+    cursor: pointer;
+  }
+
+  &__icon {
+    // Hide the icon holder element. Selector below shows this once 'icon-*' is added.
+    display: none;
+    font-size: 0.9em;
+  }
 
-    [class*='icon-'] {
-        // When 'icon-*' is added, show this element and add margin
-        display: block;
-        margin-right: $interiorMarginSm;
-    }
+  &__label {
+    @include ellipsize();
+  }
 
+  [class*='icon-'] {
+    // When 'icon-*' is added, show this element and add margin
+    display: block;
+    margin-right: $interiorMarginSm;
+  }
 }
 
 .c-summary-widget,
 .c-sw {
-    @include cSummaryWidget();
-    padding: $interiorMarginLg $interiorMarginLg * 2;
+  @include cSummaryWidget();
+  padding: $interiorMarginLg $interiorMarginLg * 2;
 
-    &--thumb {
-        max-width: 30%;
-        padding: $interiorMarginSm $interiorMargin;
-    }
+  &--thumb {
+    max-width: 30%;
+    padding: $interiorMarginSm $interiorMargin;
+  }
 }
 
 .widget-edit-holder {
-    // Hide edit area when in browse mode
-    display: none;
+  // Hide edit area when in browse mode
+  display: none;
 }
 
 .widget-rule-header {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 
-    > * + * {
-        margin-left: $interiorMargin;
-    }
+  > * + * {
+    margin-left: $interiorMargin;
+  }
 }
 
 [class*='action-buttons-wrapper'] {
-    white-space: nowrap;
-    line-height: $btnStdH;
+  white-space: nowrap;
+  line-height: $btnStdH;
 }
 
 .widget-rules-wrapper,
 .widget-rule-content,
 .w-widget-test-data-content {
-    transition: $transIn;
-    min-height: 0;
-    height: 0;
-    opacity: 0;
-    overflow: hidden;
-    pointer-events: none;
+  min-height: 0;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
 }
 
 .widget-rules-wrapper {
-    flex: 1 1 auto !important;
+  flex: 1 1 auto !important;
 }
 
 .widget-rule-content.expanded {
-    overflow: visible !important;
-    min-height: 50px;
-    height: auto;
-    margin-top: $interiorMargin;
-    opacity: 1;
-    pointer-events: inherit;
+  overflow: visible !important;
+  min-height: 50px;
+  height: auto;
+  margin-top: $interiorMargin;
+  opacity: 1;
+  pointer-events: inherit;
 }
 
 .w-widget-test-data-content {
-    .l-enable {
-        padding: $interiorMargin 0;
-    }
+  .l-enable {
+    padding: $interiorMargin 0;
+  }
 
-    .w-widget-test-data-items {
-        max-height: 20vh;
-        overflow-y: scroll !important;
-        padding-right: $interiorMargin;
-    }
+  .w-widget-test-data-items {
+    max-height: 20vh;
+    overflow-y: scroll !important;
+    padding-right: $interiorMargin;
+  }
 }
 
 .l-widget-thumb-wrapper,
 .l-compact-form label {
-    $ruleLabelW: 40%;
-    $ruleLabelMaxW: 150px;
-    display: flex;
-    max-width: $ruleLabelMaxW;
-    width: $ruleLabelW;
+  $ruleLabelW: 40%;
+  $ruleLabelMaxW: 150px;
+  display: flex;
+  max-width: $ruleLabelMaxW;
+  width: $ruleLabelW;
 }
 
 .js-summary-widget__message {
-    display: none;
+  display: none;
 }
 
 /**************\ EDITING A WIDGET */
 .w-summary-widget {
-    // Classes for editor layout while editing a widget
-    // This selector is ugly and brittle, but needed to prevent interface from showing when widget is in a layout
-    // being edited.
-    @include abs();
-    display: flex;
-    flex-direction: column;
+  // Classes for editor layout while editing a widget
+  // This selector is ugly and brittle, but needed to prevent interface from showing when widget is in a layout
+  // being edited.
+  @include abs();
+  display: flex;
+  flex-direction: column;
+
+  > .l-summary-widget {
+    // Main view of the summary widget
+    // Give some airspace and center the widget in the area
+    margin: 30px auto;
+  }
+
+  .widget-edit-holder {
+    display: flex; // Overrides `display: none` during Browse mode
+    flex: 1 1 auto;
+    overflow: hidden;
 
-    > .l-summary-widget {
-        // Main view of the summary widget
-        // Give some airspace and center the widget in the area
-        margin: 30px auto;
+    .flex-accordion-holder {
+      // Needed because otherwise accordion elements "creep" when contents expand and contract
+      display: block !important;
     }
-
-    .widget-edit-holder {
-        display: flex; // Overrides `display: none` during Browse mode
-        flex: 1 1 auto;
-        overflow: hidden;
-
+    &.expanded-widget-test-data {
+      .w-widget-test-data-content {
+        min-height: 50px;
+        height: auto;
+        opacity: 1;
+        pointer-events: inherit;
+      }
+      &:not(.expanded-widget-rules) {
+        // Test data is expanded and rules are collapsed
+        // Make text data take up all the vertical space
         .flex-accordion-holder {
-            // Needed because otherwise accordion elements "creep" when contents expand and contract
-            display: block !important;
-        }
-        &.expanded-widget-test-data {
-            .w-widget-test-data-content {
-                min-height: 50px;
-                height: auto;
-                opacity: 1;
-                pointer-events: inherit;
-            }
-            &:not(.expanded-widget-rules) {
-                // Test data is expanded and rules are collapsed
-                // Make text data take up all the vertical space
-                .flex-accordion-holder { display: flex; }
-            }
-        }
-        &.expanded-widget-rules {
-            .widget-rules-wrapper {
-                min-height: 50px;
-                height: 100%; // Fix for Chrome 73 scrolling bug
-                opacity: 1;
-                pointer-events: inherit;
-            }
+          display: flex;
         }
+      }
     }
+    &.expanded-widget-rules {
+      .widget-rules-wrapper {
+        min-height: 50px;
+        height: 100%; // Fix for Chrome 73 scrolling bug
+        opacity: 1;
+        pointer-events: inherit;
+      }
+    }
+  }
 
-    &.s-status-no-data {
-        .widget-edit-holder {
-            opacity: 0.3;
-            pointer-events: none;
+  &.s-status-no-data {
+    .widget-edit-holder {
+      opacity: 0.3;
+      pointer-events: none;
+    }
+    .js-summary-widget__message {
+      display: flex;
+    }
+  }
+
+  .l-compact-form {
+    // Overrides on .l-compact-form
+    ul {
+      &:last-child {
+        margin: 0;
+      }
+
+      li {
+        &:not(.widget-rule-header) {
+          &:not(.connects-to-previous) {
+            border-top: 1px solid $colorFormLines;
+          }
         }
-        .js-summary-widget__message {
-            display: flex;
+        &.connects-to-previous {
+          padding: $interiorMargin 0;
+        }
+
+        > label {
+          display: block; // Needed to align text to right
+          text-align: right;
+          width: 90px;
+          flex: 0 0 auto;
         }
-    }
 
-    .l-compact-form {
-        // Overrides on .l-compact-form
-        ul {
-            &:last-child { margin: 0; }
-
-            li {
-                &:not(.widget-rule-header) {
-                    &:not(.connects-to-previous) {
-                        border-top: 1px solid $colorFormLines;
-                    }
-                }
-                &.connects-to-previous {
-                    padding: $interiorMargin 0;
-                }
-
-                > label {
-                    display: block; // Needed to align text to right
-                    text-align: right;
-                    width: 90px;
-                    flex: 0 0 auto;
-                }
-
-                .controls {
-                    display: flex;
-                    flex-wrap: wrap;
-                    align-items: center;
-                    align-content: stretch;
-                    > * + * { margin-left: $interiorMarginSm; }
-                }
-            }
+        .controls {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: stretch;
+          > * + * {
+            margin-left: $interiorMarginSm;
+          }
         }
+      }
+    }
 
-        &.s-widget-test-data-item {
-            // Single line of ul li label span, etc.
-            ul {
-                li {
-                    border: none !important;
-                    > label {
-                        display: inline-block;
-                        width: auto;
-                        text-align: left;
-                    }
-                }
-            }
+    &.s-widget-test-data-item {
+      // Single line of ul li label span, etc.
+      ul {
+        li {
+          border: none !important;
+          > label {
+            display: inline-block;
+            width: auto;
+            text-align: left;
+          }
         }
+      }
     }
+  }
 
-    .t-condition .controls {
-        > * { margin-bottom: $interiorMargin; }
+  .t-condition .controls {
+    > * {
+      margin-bottom: $interiorMargin;
     }
+  }
 }
 
 .widget-edit-holder {
-    font-size: 0.8rem;
+  font-size: 0.8rem;
 }
 
 .widget-rules-wrapper {
-    // Wrapper area that holds n rules
-    box-sizing: border-box;
-    overflow-y: scroll;
-    padding-right: $interiorMargin;
+  // Wrapper area that holds n rules
+  box-sizing: border-box;
+  overflow-y: scroll;
+  padding-right: $interiorMargin;
 }
 
 .l-widget-rule,
 .l-widget-test-data-item {
-    box-sizing: border-box;
-    margin-bottom: $interiorMarginSm;
-    padding: $interiorMargin $interiorMarginLg;
+  box-sizing: border-box;
+  margin-bottom: $interiorMarginSm;
+  padding: $interiorMargin $interiorMarginLg;
 }
 
 .rule-title {
-    flex: 0 1 auto;
-    color: pullForward($colorBodyFg, 50%);
+  flex: 0 1 auto;
+  color: pullForward($colorBodyFg, 50%);
 }
 
 .rule-description {
-    flex: 1 1 auto;
-    @include ellipsize();
-    color: pushBack($colorBodyFg, 20%);
+  flex: 1 1 auto;
+  @include ellipsize();
+  color: pushBack($colorBodyFg, 20%);
 }
 
 .s-widget-rule,
 .s-widget-test-data-item {
-    background-color: rgba($colorBodyFg, 0.1);
-    border-radius: $basicCr;
+  background-color: rgba($colorBodyFg, 0.1);
+  border-radius: $basicCr;
 }
 
 .c-sw-edit {
-    padding: $interiorMargin;
+  padding: $interiorMargin;
 
-    &__ui {
-        display: flex;
-        flex-direction: column;
-
-        &__header {
-            border-top: 1px solid $colorInteriorBorder;
-            display: flex;
-            align-items: center;
-            margin: $interiorMargin 0;
-            padding: $interiorMargin 0;
-            text-transform: uppercase;
-            > * + * { margin-left: $interiorMarginSm; }
-        }
+  &__ui {
+    display: flex;
+    flex-direction: column;
+
+    &__header {
+      border-top: 1px solid $colorInteriorBorder;
+      display: flex;
+      align-items: center;
+      margin: $interiorMargin 0;
+      padding: $interiorMargin 0;
+      text-transform: uppercase;
+      > * + * {
+        margin-left: $interiorMarginSm;
+      }
     }
+  }
 }
 
 .c-sw-rule {
-    &__grippy-wrapper {
-        $d: 8px;
-        flex: 0 0 auto;
-        cursor: move;
-        width: $d; height: $d;
-        transform: translateY(-1px);
-    }
-
-    &__grippy {
-        @include grippy($c: $colorItemTreeVC, $dir: 'y');
-        @include abs();
-    }
+  &__grippy-wrapper {
+    $d: 8px;
+    flex: 0 0 auto;
+    cursor: move;
+    width: $d;
+    height: $d;
+    transform: translateY(-1px);
+  }
+
+  &__grippy {
+    @include grippy($c: $colorItemTreeVC, $dir: 'y');
+    @include abs();
+  }
 }
 
 /******************************************************************* CHANNEL SELECTOR */
 .channel-selector {
-    .line {
-        margin-bottom: $interiorMargin;
-        min-height: $formInputH;
-    }
-    .treeview {
-        $myBg: darken($colorBodyBg, 2%);
-        @include reactive-input();
-        min-height: 300px;
-        max-height: 400px;
-        overflow: auto;
-        padding: $interiorMargin;
-    }
+  .line {
+    margin-bottom: $interiorMargin;
+    min-height: $formInputH;
+  }
+  .treeview {
+    $myBg: darken($colorBodyBg, 2%);
+    @include reactive-input();
+    min-height: 300px;
+    max-height: 400px;
+    overflow: auto;
+    padding: $interiorMargin;
+  }
 
-    .btns-add-remove {
-        margin-top: 150px;
-        .s-button {
-            display: block;
-            margin-bottom: $interiorMargin;
-            text-align: center;
-        }
+  .btns-add-remove {
+    margin-top: 150px;
+    .s-button {
+      display: block;
+      margin-bottom: $interiorMargin;
+      text-align: center;
     }
+  }
 }
 
 /******************************************************************* AUTOFLOW TABULAR */
 // NOT UNIT TESTED AS OF 3/12/19
 .autoflow {
-    $headerH: $formInputH;
-    $colMargin: $interiorMargin;
-    $colW: 225px;
-    $valW: 70px;
-    $valPad: 5px;
-    $rowH: 15px;
-    font-size: 0.75rem;
-
-    &:hover {
-        .l-autoflow-header .s-button.change-column-width {
-            transition: $transIn;
-            opacity: 1;
+  $headerH: $formInputH;
+  $colMargin: $interiorMargin;
+  $colW: 225px;
+  $valW: 70px;
+  $valPad: 5px;
+  $rowH: 15px;
+  font-size: 0.75rem;
+
+  &:hover {
+    .l-autoflow-header .s-button.change-column-width {
+      opacity: 1;
+    }
+  }
+
+  .l-autoflow-header {
+    bottom: auto;
+    height: $headerH;
+    line-height: $headerH;
+    min-width: $colW;
+    .t-last-update {
+      overflow: hidden;
+    }
+    .s-button.change-column-width {
+      @include transition($prop: opacity, $dur: $transOutTime);
+      opacity: 0;
+    }
+    .l-filter {
+      display: block;
+      margin-right: $interiorMargin;
+      input.t-filter-input {
+        width: 150px;
+      }
+    }
+  }
+
+  .l-autoflow-items {
+    overflow-x: scroll;
+    overflow-y: hidden;
+    top: $headerH + $interiorMargin * 2;
+    white-space: nowrap;
+    .l-autoflow-col {
+      box-sizing: border-box;
+      border-left: 1px solid $colorInteriorBorder;
+      display: inline-block;
+      padding-left: $colMargin;
+      padding-right: $colMargin;
+      vertical-align: top;
+      width: $colW;
+      .l-autoflow-row {
+        box-sizing: border-box;
+        border-bottom: 1px solid rgba(#fff, 0.05);
+        display: block;
+        height: $rowH;
+        line-height: $rowH;
+        margin-bottom: 1px;
+        margin-top: 1px;
+        position: relative;
+        &:first-child {
+          border-top: none;
         }
-    }
-
-    .l-autoflow-header {
-        bottom: auto;
-        height: $headerH;
-        line-height: $headerH;
-        min-width: $colW;
-        .t-last-update {
-            overflow: hidden;
+        &:hover {
+          background: rgba(#fff, 0.1);
         }
-        .s-button.change-column-width {
-            transition: $transOut;
-            opacity: 0;
+        .l-autoflow-item.r {
+          color: lighten($colorBodyFg, 10%);
         }
-        .l-filter {
-            display: block;
-            margin-right: $interiorMargin;
-            input.t-filter-input {
-                width: 150px;
-            }
+        &.first-in-group {
+          border-top: 1px solid lighten($colorInteriorBorder, 20%);
         }
-    }
-
-    .l-autoflow-items {
-        overflow-x: scroll;
-        overflow-y: hidden;
-        top: $headerH + $interiorMargin * 2;
-        white-space: nowrap;
-        .l-autoflow-col {
-            box-sizing: border-box;
-            border-left: 1px solid $colorInteriorBorder;
-            display: inline-block;
-            padding-left: $colMargin;
-            padding-right: $colMargin;
-            vertical-align: top;
-            width: $colW;
-            .l-autoflow-row {
-                box-sizing: border-box;
-                border-bottom: 1px solid rgba(#fff,0.05);
-                display: block;
-                height: $rowH;
-                line-height: $rowH;
-                margin-bottom: 1px; margin-top: 1px;
-                position: relative;
-                &:first-child {
-                    border-top: none;
-                }
-                &:hover {
-                    background: rgba(#fff, 0.1);
-                }
-                .l-autoflow-item.r {
-                    color: lighten($colorBodyFg, 10%);
-                }
-                &.first-in-group {
-                    border-top: 1px solid lighten($colorInteriorBorder, 20%);
-                }
-                .l-autoflow-item {
-                    display: block;
-                    &.l {
-                        float: none;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
-                        width: auto;
-                    }
-                    &.r {
-                        border-radius: $smallCr;
-                        float: right;
-                        margin-left: $interiorMargin;
-                        padding-left: $valPad;
-                        padding-right: $valPad;
-                        text-align: right;
-                    }
-                }
-            }
-
-            &:first-child {
-                border-left: none;
-                padding-left: 0;
-            }
+        .l-autoflow-item {
+          display: block;
+          &.l {
+            float: none;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            width: auto;
+          }
+          &.r {
+            border-radius: $smallCr;
+            float: right;
+            margin-left: $interiorMargin;
+            padding-left: $valPad;
+            padding-right: $valPad;
+            text-align: right;
+          }
         }
+      }
+
+      &:first-child {
+        border-left: none;
+        padding-left: 0;
+      }
     }
+  }
 }
 
 .frame {
-    &.child-frame.panel {
-        .autoflow .l-autoflow-header .l-filter {
-            display: none;
-        }
+  &.child-frame.panel {
+    .autoflow .l-autoflow-header .l-filter {
+      display: none;
     }
+  }
 }
 
 /******************************************************************* INDICATORS */
@@ -526,765 +548,783 @@
 
 .h-indicator,
 mct-indicators mct-include {
-    display: inline; // Fallback for display: contents
-    display: contents;
+  display: inline; // Fallback for display: contents
+  display: contents;
 }
 
 /************************************************* DATETIME UI */
 @mixin complexFieldHolder($myW) {
-    width: $myW + $interiorMargin;
-    input[type="text"] {
-        width: $myW;
-    }
+  width: $myW + $interiorMargin;
+  input[type='text'] {
+    width: $myW;
+  }
 }
 
 .complex.datetime {
-    span {
-        display: inline-block;
-        margin-right: $interiorMargin;
-    }
-    .fields {
-        margin-top: $interiorMarginSm 0;
-        padding: $interiorMarginSm 0;
-    }
+  span {
+    display: inline-block;
+    margin-right: $interiorMargin;
+  }
+  .fields {
+    margin-top: $interiorMarginSm 0;
+    padding: $interiorMarginSm 0;
+  }
 
-    .date {
-        @include complexFieldHolder(80px);
-    }
+  .date {
+    @include complexFieldHolder(80px);
+  }
 
-    .time.md {
-        @include complexFieldHolder(60px);
-    }
+  .time.md {
+    @include complexFieldHolder(60px);
+  }
 
-    .time.sm {
-        @include complexFieldHolder(40px);
-    }
+  .time.sm {
+    @include complexFieldHolder(40px);
+  }
 }
 
 /************************************************* INFO BUBBLES */
 .l-infobubble-wrapper {
-    $arwSize: 5px;
-    box-shadow: rgba(black, 0.4) 0 1px 5px;
-    position: relative;
-    z-index: 50;
-    .l-infobubble {
-        display: inline-block;
-        min-width: $bubbleMinW;
-        max-width: $bubbleMaxW;
-        padding: 5px 10px;
-        &:before {
-            content:"";
-            position: absolute;
-            width: 0;
-            height: 0;
-        }
-        table {
-            width: 100%;
-            tr {
-                td {
-                    padding: 2px 0;
-                    vertical-align: top;
-                    &.label {
-                        padding-right: $interiorMargin * 2;
-                        white-space: nowrap;
-                    }
-                    &.value {
-                        //word-wrap: break-word; // Doesn't work in <td>?
-                        word-break: break-all;
-                    }
-                    &.align-wrap {
-                        white-space: normal;
-                    }
-                }
-            }
-        }
-        .title {
-            @include ellipsize();
-            margin-bottom: $interiorMargin;
-        }
+  $arwSize: 5px;
+  box-shadow: rgba(black, 0.4) 0 1px 5px;
+  position: relative;
+  z-index: 50;
+  .l-infobubble {
+    display: inline-block;
+    min-width: $bubbleMinW;
+    max-width: $bubbleMaxW;
+    padding: 5px 10px;
+    &:before {
+      content: '';
+      position: absolute;
+      width: 0;
+      height: 0;
     }
-
-    &.arw-down {
-        margin-bottom: $arwSize*2;
-        .l-infobubble::before {
-            left: 50%;
-            top: 100%;
-            margin-left: -1 * $arwSize;
-            border-left: $arwSize solid transparent;
-            border-right: $arwSize solid transparent;
-            border-top: ($arwSize * 1.5) solid $colorInfoBubbleBg;
+    table {
+      width: 100%;
+      tr {
+        td {
+          padding: 2px 0;
+          vertical-align: top;
+          &.label {
+            padding-right: $interiorMargin * 2;
+            white-space: nowrap;
+          }
+          &.value {
+            //word-wrap: break-word; // Doesn't work in <td>?
+            word-break: break-all;
+          }
+          &.align-wrap {
+            white-space: normal;
+          }
         }
+      }
     }
-    .arw {
-        z-index: 2;
-    }
-    &.arw-up .arw.arw-down,
-    &.arw-down .arw.arw-up {
-        display: none;
-    }
+    .title {
+      @include ellipsize();
+      margin-bottom: $interiorMargin;
+    }
+  }
+
+  &.arw-down {
+    margin-bottom: $arwSize * 2;
+    .l-infobubble::before {
+      left: 50%;
+      top: 100%;
+      margin-left: -1 * $arwSize;
+      border-left: $arwSize solid transparent;
+      border-right: $arwSize solid transparent;
+      border-top: ($arwSize * 1.5) solid $colorInfoBubbleBg;
+    }
+  }
+  .arw {
+    z-index: 2;
+  }
+  &.arw-up .arw.arw-down,
+  &.arw-down .arw.arw-up {
+    display: none;
+  }
 }
 
 body.desktop {
-    .l-infobubble {
-        &.arw-left {
-            margin-left: $bubbleArwSize*2;
-            &:before {
-                @include triangle('left', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
-                right: 100%;
-            }
-        }
+  .l-infobubble {
+    &.arw-left {
+      margin-left: $bubbleArwSize * 2;
+      &:before {
+        @include triangle('left', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
+        right: 100%;
+      }
+    }
 
-        &.arw-right {
-            margin-right: $bubbleArwSize*2;
-            &:before {
-                @include triangle('right', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
-                left: 100%;
-            }
-        }
+    &.arw-right {
+      margin-right: $bubbleArwSize * 2;
+      &:before {
+        @include triangle('right', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
+        left: 100%;
+      }
+    }
 
-        &.arw-top {
-            &:before {
-                top: $bubbleArwSize * 2;
-            }
-        }
+    &.arw-top {
+      &:before {
+        top: $bubbleArwSize * 2;
+      }
+    }
 
-        &.arw-btm {
-            &:before {
-                bottom: $bubbleArwSize * 2;
-            }
-        }
+    &.arw-btm {
+      &:before {
+        bottom: $bubbleArwSize * 2;
+      }
     }
+  }
 }
 
 .l-thumbsbubble-wrapper {
-    .arw-up {
-        @include triangle('up', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
-    }
-    .arw-down {
-        @include triangle('down', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
-    }
+  .arw-up {
+    @include triangle('up', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
+  }
+  .arw-down {
+    @include triangle('down', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
+  }
 }
 
 .s-infobubble {
-    $emFg: darken($colorInfoBubbleFg, 20%);
-    border-radius: $basicCr;
-    box-shadow: rgba(black, 0.4) 0 1px 5px;
-    background: $colorInfoBubbleBg;
-    color: $colorInfoBubbleFg;
-    font-size: 0.8rem;
-    .title {
-        color: $emFg;
-        font-weight: bold;
-    }
-    table {
-        tr {
-            td {
-                border: none;
-                border-top: 1px solid darken($colorInfoBubbleBg, 10%) !important;
-                font-size: 0.9em;
-            }
-
-            &:first-child td {
-                border-top: none !important;
-            }
-        }
-    }
-    &:first-child td {
-        border-top: none;
-    }
+  $emFg: darken($colorInfoBubbleFg, 20%);
+  border-radius: $basicCr;
+  box-shadow: rgba(black, 0.4) 0 1px 5px;
+  background: $colorInfoBubbleBg;
+  color: $colorInfoBubbleFg;
+  font-size: 0.8rem;
+  .title {
+    color: $emFg;
+    font-weight: bold;
+  }
+  table {
+    tr {
+      td {
+        border: none;
+        border-top: 1px solid darken($colorInfoBubbleBg, 10%) !important;
+        font-size: 0.9em;
+      }
 
-    .label {
-        color: lighten($emFg, 30%);
+      &:first-child td {
+        border-top: none !important;
+      }
     }
+  }
+  &:first-child td {
+    border-top: none;
+  }
 
-    .value {
-        color: $emFg;
-    }
+  .label {
+    color: lighten($emFg, 30%);
+  }
 
+  .value {
+    color: $emFg;
+  }
 }
 
 .s-thumbsbubble {
-    background: $colorThumbsBubbleBg;
-    color: $colorThumbsBubbleFg;
+  background: $colorThumbsBubbleBg;
+  color: $colorThumbsBubbleFg;
 }
 
 /***************************************************************** SPLITTERS */
 .splitter {
+  display: block;
+  position: absolute;
+  z-index: 3;
+  &:after {
+    // The handle
+    content: '';
+    pointer-events: none;
+    @include abs(0);
+    background: $colorSplitterBg;
     display: block;
-    position: absolute;
-    z-index: 3;
+    z-index: 4;
+  }
+  &:active {
     &:after {
-        // The handle
-        content:"";
-        pointer-events: none;
-        @include abs(0);
-        background: $colorSplitterBg;
-        display: block;
-        z-index: 4;
-    }
-    &:active {
-        &:after {
-            background-color: $colorSplitterActive !important;
-        }
+      background-color: $colorSplitterActive !important;
     }
+  }
 
-    @if $colorSplitterHover != 'none' {
-        &:not(:active) {
-            &:hover {
-                &:after {
-                    background-color: $colorSplitterHover !important;
-                    transiiton: background-color, 150ms;
-                }
-            }
+  @if $colorSplitterHover != 'none' {
+    &:not(:active) {
+      &:hover {
+        &:after {
+          background-color: $colorSplitterHover !important;
+          @include transition($prop: background-color, $dur: 150ms);
         }
+      }
     }
+  }
 }
 
 .split-layout {
-    $inset: $splitterHandleHitMargin;
-    &.horizontal {
-        // Slides vertically up and down, splitting the element horizontally
-        overflow: hidden; // Suppress overall scroll; each internal pane handles its own overflow
-        .pane {
-            left: 0;
-            right: 0;
-            &.top {
-                bottom: auto;
-            }
-            &.bottom {
-                top: auto;
-            }
-        }
-        >.splitter {
-            cursor: row-resize;
-            left: 0;
-            right: 0;
-            height: $splitterHandleD;
-            &:after {
-                top: $inset; bottom: $inset;
-            }
-        }
-    }
-
-    &.vertical {
-        // Slides horizontally left to right, splitting the element vertically
-        .pane {
-            top: 0;
-            bottom: 0;
-            &.left {
-                right: auto;
-            }
-            &.right {
-                left: auto;
-            }
+  $inset: $splitterHandleHitMargin;
+  &.horizontal {
+    // Slides vertically up and down, splitting the element horizontally
+    overflow: hidden; // Suppress overall scroll; each internal pane handles its own overflow
+    .pane {
+      left: 0;
+      right: 0;
+      &.top {
+        bottom: auto;
+      }
+      &.bottom {
+        top: auto;
+      }
+    }
+    > .splitter {
+      cursor: row-resize;
+      left: 0;
+      right: 0;
+      height: $splitterHandleD;
+      &:after {
+        top: $inset;
+        bottom: $inset;
+      }
+    }
+  }
+
+  &.vertical {
+    // Slides horizontally left to right, splitting the element vertically
+    .pane {
+      top: 0;
+      bottom: 0;
+      &.left {
+        right: auto;
+      }
+      &.right {
+        left: auto;
+      }
+    }
+    > .splitter {
+      cursor: col-resize;
+      top: 0;
+      bottom: 0;
+      width: $splitterHandleD;
+      &:after {
+        left: $inset;
+        right: $inset;
+        //width: $splitterHandleD;
+      }
+      &.flush-right {
+        width: ceil(math.div($splitterHandleD, 2));
+        &:after {
+          width: $splitterHandleD;
+          left: auto;
+          right: 0;
         }
-        >.splitter {
-            cursor: col-resize;
-            top: 0;
-            bottom: 0;
-            width: $splitterHandleD;
-            &:after {
-                left: $inset; right: $inset;
-                //width: $splitterHandleD;
-            }
-            &.flush-right {
-                width: ceil($splitterHandleD / 2);
-                &:after {
-                    width: $splitterHandleD;
-                    left: auto; right: 0;
-                }
-                &.edge-shdw {
-                    background-image: linear-gradient(90deg, rgba(black, 0) 40%, rgba(black, 0.05) 70%, rgba(black, 0.2) 100%);
-                }
-            }
+        &.edge-shdw {
+          background-image: linear-gradient(
+            90deg,
+            rgba(black, 0) 40%,
+            rgba(black, 0.05) 70%,
+            rgba(black, 0.2) 100%
+          );
         }
+      }
     }
+  }
 }
 
 /******************************************************************* FLEX STYLES */
 .l-flex-row,
 .l-flex-col {
-    display: flex;
-    flex-wrap: nowrap;
-    .flex-elem {
-        min-height: 0; // Needed to allow element to shrink within parent
-        position: relative;
-        &:not(.grows) {
-            flex: 0 0 auto;
-            &.flex-can-shrink {
-                flex: 0 1 auto;
-            }
-        }
-        &.grows {
-            flex: 1 1 auto;
-        }
-        &.contents-align-right {
-            text-align: right;
-        }
+  display: flex;
+  flex-wrap: nowrap;
+  .flex-elem {
+    min-height: 0; // Needed to allow element to shrink within parent
+    position: relative;
+    &:not(.grows) {
+      flex: 0 0 auto;
+      &.flex-can-shrink {
+        flex: 0 1 auto;
+      }
     }
-    .flex-container {
-        // Apply to wrapping elements, mct-includes, etc.
-        display: flex;
-        flex-wrap: nowrap;
-        flex: 1 1 auto;
-        min-height:0;
+    &.grows {
+      flex: 1 1 auto;
     }
+    &.contents-align-right {
+      text-align: right;
+    }
+  }
+  .flex-container {
+    // Apply to wrapping elements, mct-includes, etc.
+    display: flex;
+    flex-wrap: nowrap;
+    flex: 1 1 auto;
+    min-height: 0;
+  }
 }
 
 .l-flex-row {
+  flex-direction: row;
+  &.flex-elem {
+    flex: 1 1 auto;
+  }
+  > .flex-elem {
+    min-width: 0;
+    &.holder:not(:last-child) {
+      margin-right: $interiorMargin;
+    }
+  }
+  .flex-container {
     flex-direction: row;
-    &.flex-elem { flex: 1 1 auto; }
-    > .flex-elem {
-        min-width: 0;
-        &.holder:not(:last-child) { margin-right: $interiorMargin; }
-    }
-    .flex-container { flex-direction: row; }
+  }
 }
 
 .l-flex-col {
-    flex-direction: column;
-    > .flex-elem {
-        min-height: 0;
-        &.holder:not(:last-child) { margin-bottom: $interiorMarginLg; }
-    }
-    &.l-flex-accordion .flex-accordion-holder {
-        display: flex;
-        flex-direction: column;
+  flex-direction: column;
+  > .flex-elem {
+    min-height: 0;
+    &.holder:not(:last-child) {
+      margin-bottom: $interiorMarginLg;
     }
-    .flex-container { flex-direction: column; }
+  }
+  &.l-flex-accordion .flex-accordion-holder {
+    display: flex;
+    flex-direction: column;
+  }
+  .flex-container {
+    flex-direction: column;
+  }
 }
 
 .flex-fixed {
-    flex: 0 0 auto;
+  flex: 0 0 auto;
 }
 
 .flex-justify-end {
-    justify-content: flex-end;
+  justify-content: flex-end;
 }
 
 /******************************************************************* GRID STYLES */
 .grid-two-column,
 .grid-properties {
-    display: grid;
-    grid-row-gap: 0;
-    grid-template-columns: 1fr 2fr;
+  display: grid;
+  grid-row-gap: 0;
+  grid-template-columns: 1fr 2fr;
 }
 
 .grid-span-all,
 .grid-two-column-span-cols {
-    grid-column: 1 / 3;
+  grid-column: 1 / 3;
 }
 
 .grid-elem {
-    &:not(:first-child) {
-        border-top: 1px solid $colorInteriorBorder;
-    }
-    &.label {
-        background-color: rgba(0,0,128,0.2);
-    }
-    &.value {
-        background-color: rgba(0,128,0,0.2);
-    }
+  &:not(:first-child) {
+    border-top: 1px solid $colorInteriorBorder;
+  }
+  &.label {
+    background-color: rgba(0, 0, 128, 0.2);
+  }
+  &.value {
+    background-color: rgba(0, 128, 0, 0.2);
+  }
 }
 
 .grid-row {
-    display: contents;
+  display: contents;
 }
 
 .grid-row {
+  .grid-cell {
+    padding: 3px $interiorMarginLg 3px 0;
+    &[title]:not([title='']) {
+      // When a cell has a title, assume it's helpful text
+      cursor: help;
+    }
+  }
+  &.force-border,
+  &:not(:first-of-type) {
+    // Row borders, effected via border-top on child elements of the row
     .grid-cell {
-        padding: 3px $interiorMarginLg 3px 0;
-        &[title]:not([title=""]) {
-            // When a cell has a title, assume it's helpful text
-            cursor: help;
-        }
-    }
-    &.force-border,
-    &:not(:first-of-type) {
-        // Row borders, effected via border-top on child elements of the row
-        .grid-cell {
-            border-top: 1px solid $colorInspectorSectionHeaderBg;
-        }
+      border-top: 1px solid $colorInspectorSectionHeaderBg;
     }
+  }
 }
 
 /******************************************************************* ABOUT SCREEN */
 .l-about {
-    &.abs {
-        overflow: auto;
-    }
-    $contentH: 200px;
-    .l-splash {
-        position: relative;
-        height: 45%;
-    }
-    .l-content {
-        position: relative;
-        margin-top: $interiorMarginLg;
-    }
+  &.abs {
+    overflow: auto;
+  }
+  $contentH: 200px;
+  .l-splash {
+    position: relative;
+    height: 45%;
+  }
+  .l-content {
+    position: relative;
+    margin-top: $interiorMarginLg;
+  }
 }
 
 .s-about {
-    line-height: 120%;
-
-    a {
-        color: $colorAboutLink;
-    }
-
-    h1, h2, h3 {
-        color: pullForward($colorBodyFg, 20%);
-        margin-bottom: 1em;
-    }
-
-    h1 {
-        font-size: 2.25em;
-    }
-
-    h2 {
-        border-top: 1px solid $colorInteriorBorder;
-        font-size: 1.5em;
-        margin-top: 2em;
-        padding-top: 1em;
-    }
-
-    h3 {
-        margin-top: 2em;
-    }
-
-    .s-description,
-    .s-button {
-        line-height: 2em;
-    }
-    .l-licenses-software {
-        .l-license-software {
-            border-top: 1px solid $colorInteriorBorder;
-            padding: 0.5em 0;
-            &:first-child {
-                border-top: none;
-            }
-            em {
-                color: pushBack($colorBodyFg, 20%);
-            }
-            h3 {
-                font-size: 1.25em;
-            }
-            .s-license-text {
-                font-size: 0.9em;
-            }
-        }
+  line-height: 120%;
+
+  a {
+    color: $colorAboutLink;
+  }
+
+  h1,
+  h2,
+  h3 {
+    color: pullForward($colorBodyFg, 20%);
+    margin-bottom: 1em;
+  }
+
+  h1 {
+    font-size: 2.25em;
+  }
+
+  h2 {
+    border-top: 1px solid $colorInteriorBorder;
+    font-size: 1.5em;
+    margin-top: 2em;
+    padding-top: 1em;
+  }
+
+  h3 {
+    margin-top: 2em;
+  }
+
+  .s-description,
+  .s-button {
+    line-height: 2em;
+  }
+  .l-licenses-software {
+    .l-license-software {
+      border-top: 1px solid $colorInteriorBorder;
+      padding: 0.5em 0;
+      &:first-child {
+        border-top: none;
+      }
+      em {
+        color: pushBack($colorBodyFg, 20%);
+      }
+      h3 {
+        font-size: 1.25em;
+      }
+      .s-license-text {
+        font-size: 0.9em;
+      }
     }
+  }
 }
 
 /******************************************************************* STARTUP / SPLASH SCREEN */
 @mixin splashElem($m: 20%) {
-    top: $m; right: $m * 1.25; bottom: $m; left: $m * 1.25;
+  top: $m;
+  right: $m * 1.25;
+  bottom: $m;
+  left: $m * 1.25;
 }
 
 .l-splash,
 .l-splash:before,
 .l-splash:after {
-    background-position: center;
-    background-repeat: no-repeat;
-    position: absolute;
+  background-position: center;
+  background-repeat: no-repeat;
+  position: absolute;
 }
 
 .l-splash {
-    background-size: cover;
+  background-size: cover;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  &:before,
+  &:after {
+    background-size: contain;
+    content: '';
+  }
+
+  &:before {
+    // NASA logo, dude
+    $w: 5%;
+    $m: 10px;
+    background-image: url('../ui/layout/assets/images/logo-nasa.svg');
+    top: $m;
+    right: auto;
+    bottom: auto;
+    left: $m;
+    height: auto;
+    width: $w * 2;
+    padding-bottom: $w;
+    padding-top: $w;
+  }
+
+  &:after {
+    // App logo
     top: 0;
-    right: 0;
+    right: 15%;
     bottom: 0;
-    left: 0;
-    &:before,
-    &:after {
-        background-size: contain;
-        content: '';
-    }
-
-    &:before {
-        // NASA logo, dude
-        $w: 5%;
-        $m: 10px;
-        background-image: url('../ui/layout/assets/images/logo-nasa.svg');
-        top: $m;
-        right: auto;
-        bottom: auto;
-        left: $m;
-        height: auto;
-        width: $w * 2;
-        padding-bottom: $w;
-        padding-top: $w;
-    }
-
-    &:after {
-        // App logo
-        top: 0;
-        right: 15%;
-        bottom: 0;
-        left: 15%;
-    }
+    left: 15%;
+  }
 }
 
 .l-splash-holder {
-    // Main outer holder for splash.
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 10000;
-    opacity: 1;
-    .l-splash {
-        // The splash element.
-        @include splashElem();
-    }
+  // Main outer holder for splash.
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10000;
+  opacity: 1;
+  .l-splash {
+    // The splash element.
+    @include splashElem();
+  }
 }
 
 @media only screen and (max-device-width: 767px) {
-    .l-splash-holder .l-splash {
-        @include splashElem(0);
-        border-radius: 0;
-        box-shadow: none;
-    }
+  .l-splash-holder .l-splash {
+    @include splashElem(0);
+    border-radius: 0;
+    box-shadow: none;
+  }
 }
 
 @media only screen and (max-device-width: 767px) and (orientation: portrait) {
-    .l-splash-holder .l-splash {
-        &:before {
-            // Make the NASA logo a bit bigger when we're in portrait mode.
-            $w: 12%;
-            width: $w * 2;
-            padding-bottom: $w;
-            padding-top: $w;
-        }
+  .l-splash-holder .l-splash {
+    &:before {
+      // Make the NASA logo a bit bigger when we're in portrait mode.
+      $w: 12%;
+      width: $w * 2;
+      padding-bottom: $w;
+      padding-top: $w;
     }
+  }
 }
 
 /******************************************************************* VARIOUS */
 .c-overlay mct-include {
-    display: inline; // Fallback for display: contents
-    display: contents;
+  display: inline; // Fallback for display: contents
+  display: contents;
 }
 
 mct-container {
-    display: block;
+  display: block;
 }
 
 .overlay {
-    .outer-holder {
-        background: $colorMenuBg;
-        color: $colorMenuFg !important;
-    }
+  .outer-holder {
+    background: $colorMenuBg;
+    color: $colorMenuFg !important;
+  }
 }
 
 .t-popup {
-    z-index: 75;
+  z-index: 75;
 }
 
 .form .form-row {
-    .label {
-        color: $colorMenuFg !important;
-    }
-    .selector-list {
-        @include reactive-input();
-        background: $colorInputBg !important;
-        color: $colorInputFg !important;
-    }
+  .label {
+    color: $colorMenuFg !important;
+  }
+  .selector-list {
+    @include reactive-input();
+    background: $colorInputBg !important;
+    color: $colorInputFg !important;
+  }
 }
 
 .ui-symbol.view-control {
-    display: block;
-    transform-origin: center center;
+  display: block;
+  transform-origin: center center;
 
-    &:before { content: $glyph-icon-arrow-right-equilateral; }
+  &:before {
+    content: $glyph-icon-arrow-right-equilateral;
+  }
 
-    &.expanded {
-        transform: rotate(90deg);
-    }
+  &.expanded {
+    transform: rotate(90deg);
+  }
 }
 
 .t-frame-outer {
-    min-width: 200px;
-    min-height: 200px;
+  min-width: 200px;
+  min-height: 200px;
 }
 
 .l-iframe {
-    iframe {
-        display: block;
-        height: 100%;
-        width: 100%;
-        border: none;
-    }
+  iframe {
+    display: block;
+    height: 100%;
+    width: 100%;
+    border: none;
+  }
 }
 
 // Alert elements in views
 .s-unsynced {
-    @include sUnsynced();
+  @include sUnsynced();
 }
 
 .s-status-timeconductor-unsynced {
-    // Plot areas
-    .gl-plot .gl-plot-display-area {
-        @include sUnsynced();
-    }
+  // Plot areas
+  .gl-plot .gl-plot-display-area {
+    @include sUnsynced();
+  }
 
-    // Object headers
-    .object-header {
-        .t-object-alert {
-            display: inline;
-        }
+  // Object headers
+  .object-header {
+    .t-object-alert {
+      display: inline;
     }
+  }
 }
 
 .abs {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    height: auto;
-    width: auto;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: auto;
+  width: auto;
 }
 
 .code {
-    font-family: "Lucida Console", monospace;
-    font-size: 0.7em;
-    line-height: 150%;
-    white-space: pre;
+  font-family: 'Lucida Console', monospace;
+  font-size: 0.7em;
+  line-height: 150%;
+  white-space: pre;
 }
 
 .codehilite {
-    @extend .code;
-    background-color: rgba($colorBodyFg, 0.1);
-    padding: 1em;
+  @extend .code;
+  background-color: rgba($colorBodyFg, 0.1);
+  padding: 1em;
 }
 
 .s-status-missing {
-    // Labels. Expects .s-status-missing to be applied to mct-representation that contains
-    .t-object-label .t-item-icon:before {
-        content: $glyph-icon-object-unknown;
-    }
+  // Labels. Expects .s-status-missing to be applied to mct-representation that contains
+  .t-object-label .t-item-icon:before {
+    content: $glyph-icon-object-unknown;
+  }
 
-    // Item, grid item. Expects .s-status-missing to be applied to mct-representation that contains .item.grid-item
-    .item .t-item-icon-glyph:before {
-        content: $glyph-icon-object-unknown;
-    }
+  // Item, grid item. Expects .s-status-missing to be applied to mct-representation that contains .item.grid-item
+  .item .t-item-icon-glyph:before {
+    content: $glyph-icon-object-unknown;
+  }
 
-    // Object header. Expects .s-status-missing to be applied to mct-representation.object-header
-    &.object-header {
-        .type-icon:before {
-            content: $glyph-icon-object-unknown;
-        }
+  // Object header. Expects .s-status-missing to be applied to mct-representation.object-header
+  &.object-header {
+    .type-icon:before {
+      content: $glyph-icon-object-unknown;
     }
+  }
 
-    // Tree item. Expects .s-status-missing to be applied to .tree-item,
-    // and mct-representation.search-item
-    &.tree-item,
-    &.search-item {
-        > .rep-object-label .t-item-icon:before {
-            content: $glyph-icon-object-unknown;
-        }
+  // Tree item. Expects .s-status-missing to be applied to .tree-item,
+  // and mct-representation.search-item
+  &.tree-item,
+  &.search-item {
+    > .rep-object-label .t-item-icon:before {
+      content: $glyph-icon-object-unknown;
     }
+  }
 }
 
 .align-right {
-    text-align: right;
+  text-align: right;
 }
 
 .centered {
-    text-align: center;
+  text-align: center;
 }
 
 .no-selection {
-    // aka selection = "None". Used in palettes and their menu buttons.
-    $c: red;
-    $s: 48%;
-    $e: 52%;
-    background-image: linear-gradient(-45deg,
-            transparent $s - 5%,
-            $c $s,
-            $c $e,
-            transparent $e + 5%
-    );
-    box-shadow:inset rgba(black, 0.3) 0 0 0 1px;
-    background-repeat: no-repeat;
-    background-size: contain;
+  // aka selection = "None". Used in palettes and their menu buttons.
+  $c: red;
+  $s: 48%;
+  $e: 52%;
+  background-image: linear-gradient(-45deg, transparent $s - 5%, $c $s, $c $e, transparent $e + 5%);
+  box-shadow: inset rgba(black, 0.3) 0 0 0 1px;
+  background-repeat: no-repeat;
+  background-size: contain;
 }
 
 .scrolling,
 .scroll {
-    overflow: auto;
+  overflow: auto;
 }
 
 .vscroll {
-    overflow-x: hidden;
-    overflow-y: auto;
-    &.scroll-pad {
-        padding-right: $interiorMargin;
-    }
+  overflow-x: hidden;
+  overflow-y: auto;
+  &.scroll-pad {
+    padding-right: $interiorMargin;
+  }
 }
 
 .vscroll--persist {
-    overflow-x: hidden;
-    overflow-y: scroll;
+  overflow-x: hidden;
+  overflow-y: scroll;
 }
 
 .slidable {
-    cursor: move; // Fallback
-    cursor: grab;
-    cursor: -moz-grab;
-    cursor: -webkit-grab;
-    &.horz {
-        cursor: col-resize;
-    }
-    &.vert {
-        cursor: row-resize;
-    }
+  cursor: move; // Fallback
+  cursor: grab;
+  cursor: -moz-grab;
+  cursor: -webkit-grab;
+  &.horz {
+    cursor: col-resize;
+  }
+  &.vert {
+    cursor: row-resize;
+  }
 }
 
 .no-margin {
-    margin: 0;
+  margin: 0;
 }
 
 .ds {
-    box-shadow: rgba(#000, 0.7) 0 4px 10px 2px;
+  box-shadow: rgba(#000, 0.7) 0 4px 10px 2px;
 }
 
 .capitalize {
-    text-transform: capitalize;
+  text-transform: capitalize;
 }
 
 .hide,
 .hidden,
 .t-main-view .hide-in-t-main-view {
-    display: none !important;
+  display: none !important;
 }
 
 .hide-nice {
-    opacity: 0;
-    pointer-events: none;
+  opacity: 0;
+  pointer-events: none;
 }
 
 .invisible {
-    display: block;
-    visibility: hidden;
-    height: 0;
-    padding: 0;
-    border: 0;
-    margin: 0 !important;
-    transform: scale(0);
-    pointer-events: none;
-    position: absolute;
+  display: block;
+  visibility: hidden;
+  height: 0;
+  padding: 0;
+  border: 0;
+  margin: 0 !important;
+  transform: scale(0);
+  pointer-events: none;
+  position: absolute;
 }
 
 .sep {
-    color: rgba(#fff, 0.2);
+  color: rgba(#fff, 0.2);
 }
 
 .comma-list span {
-    &:not(:first-child) {
-        &:before {
-            content: ', ';
-        }
+  &:not(:first-child) {
+    &:before {
+      content: ', ';
     }
+  }
 }
-
diff --git a/src/styles/_limits.scss b/src/styles/_limits.scss
index 7fa63f49a50..82676006594 100644
--- a/src/styles/_limits.scss
+++ b/src/styles/_limits.scss
@@ -8,263 +8,255 @@ $plotLimitDashWidthWarning: $plotLimitDashWidthDistress - $plotLimitDashWidthOff
 $plotLimitDashWidthWatch: $plotLimitDashWidthWarning - $plotLimitDashWidthOffset;
 
 @mixin plotLimitLine($c, $breakPerc) {
-    background: $lineBlocker linear-gradient(
-                    90deg,
-                    $c $breakPerc,
-                    transparent $breakPerc,
-                    transparent 100%
-    ) repeat-x;
+  background: $lineBlocker
+    linear-gradient(90deg, $c $breakPerc, transparent $breakPerc, transparent 100%) repeat-x;
 }
 
 @mixin plotLimitDirectionGradient($c, $deg: 0deg) {
-    background: linear-gradient(
-                    $deg,
-                    $c,
-                    transparent
-    )
+  background: linear-gradient($deg, $c, transparent);
 }
 
 @mixin plotLimitLineUpper($c) {
-    $breakPerc: 80%;
-    @include plotLimitLine($c: $c, $breakPerc: $breakPerc);
+  $breakPerc: 80%;
+  @include plotLimitLine($c: $c, $breakPerc: $breakPerc);
 }
 
 @mixin plotLimitLineLower($c) {
-    $breakPerc: 30%;
-    @include plotLimitLine($c: $c, $breakPerc: $breakPerc);
+  $breakPerc: 30%;
+  @include plotLimitLine($c: $c, $breakPerc: $breakPerc);
 }
 
 .c-plot-limit-line {
-    box-shadow: $lineBlocker 0 0 0 2px;
-    height: $plotLimitLineSize;
-    width: 100%;
-    position: absolute;
-    z-index: 1;
-
-    // Colors and directions
-    &--purple.c-plot-limit-line--upr {
-        @include plotLimitLineUpper($colorLimitPurpleIc);
-    }
-
-    &--purple.c-plot-limit-line--lwr {
-        @include plotLimitLineLower($colorLimitPurpleIc);
-    }
-
-    &--red.c-plot-limit-line--upr {
-        @include plotLimitLineUpper($colorLimitRedIc);
-    }
-
-    &--red.c-plot-limit-line--lwr {
-        @include plotLimitLineLower($colorLimitRedIc);
-    }
-
-    &--orange.c-plot-limit-line--upr {
-        @include plotLimitLineUpper($colorLimitOrangeIc);
-    }
-
-    &--orange.c-plot-limit-line--lwr {
-        @include plotLimitLineLower($colorLimitOrangeIc);
-    }
-
-    &--yellow.c-plot-limit-line--upr {
-        @include plotLimitLineUpper($colorLimitYellowIc);
-    }
-
-    &--yellow.c-plot-limit-line--lwr {
-        @include plotLimitLineLower($colorLimitYellowIc);
-    }
-
-    &--cyan.c-plot-limit-line--upr {
-        @include plotLimitLineUpper($colorLimitCyanIc);
-    }
-
-    &--cyan.c-plot-limit-line--lwr {
-        @include plotLimitLineLower($colorLimitCyanIc);
-    }
-
-    // Severities
-    &--severe {
-        background-size: $plotLimitDashWidthSeverity 100% !important;
-    }
-
-    &--critical {
-        background-size: $plotLimitDashWidthCritical 100% !important;
-    }
-
-    &--distress {
-        background-size: $plotLimitDashWidthDistress 100% !important;
-    }
-
-    &--warning {
-        background-size: $plotLimitDashWidthWarning 100% !important;
-    }
-
-    &--watch {
-        background-size: $plotLimitDashWidthWatch 100% !important;
-    }
+  box-shadow: $lineBlocker 0 0 0 2px;
+  height: $plotLimitLineSize;
+  width: 100%;
+  position: absolute;
+  z-index: 1;
+
+  // Colors and directions
+  &--purple.c-plot-limit-line--upr {
+    @include plotLimitLineUpper($colorLimitPurpleIc);
+  }
+
+  &--purple.c-plot-limit-line--lwr {
+    @include plotLimitLineLower($colorLimitPurpleIc);
+  }
+
+  &--red.c-plot-limit-line--upr {
+    @include plotLimitLineUpper($colorLimitRedIc);
+  }
+
+  &--red.c-plot-limit-line--lwr {
+    @include plotLimitLineLower($colorLimitRedIc);
+  }
+
+  &--orange.c-plot-limit-line--upr {
+    @include plotLimitLineUpper($colorLimitOrangeIc);
+  }
+
+  &--orange.c-plot-limit-line--lwr {
+    @include plotLimitLineLower($colorLimitOrangeIc);
+  }
+
+  &--yellow.c-plot-limit-line--upr {
+    @include plotLimitLineUpper($colorLimitYellowIc);
+  }
+
+  &--yellow.c-plot-limit-line--lwr {
+    @include plotLimitLineLower($colorLimitYellowIc);
+  }
+
+  &--cyan.c-plot-limit-line--upr {
+    @include plotLimitLineUpper($colorLimitCyanIc);
+  }
+
+  &--cyan.c-plot-limit-line--lwr {
+    @include plotLimitLineLower($colorLimitCyanIc);
+  }
+
+  // Severities
+  &--severe {
+    background-size: $plotLimitDashWidthSeverity 100% !important;
+  }
+
+  &--critical {
+    background-size: $plotLimitDashWidthCritical 100% !important;
+  }
+
+  &--distress {
+    background-size: $plotLimitDashWidthDistress 100% !important;
+  }
+
+  &--warning {
+    background-size: $plotLimitDashWidthWarning 100% !important;
+  }
+
+  &--watch {
+    background-size: $plotLimitDashWidthWatch 100% !important;
+  }
 }
 
 .c-plot-limit {
-    // Holds both label and directional gradient
-    $labelCr: $basicCr;
+  // Holds both label and directional gradient
+  $labelCr: $basicCr;
+  display: flex;
+  position: absolute;
+  width: 100%;
+  z-index: 0;
+
+  &__label {
+    border-width: 1px 1px 0 0;
+    border-style: solid;
+    border-radius: 0 $labelCr 0 0;
     display: flex;
-    position: absolute;
-    width: 100%;
-    z-index: 0;
-
-    &__label {
-        border-width: 1px 1px 0 0;
-        border-style: solid;
-        border-radius: 0 $labelCr 0 0;
-        display: flex;
-        flex: 0 0 auto;
-        align-items: center;
-        padding: 2px 4px;
-        transform: translateY(-100%);
-
-        > * + * {
-            margin-left: $interiorMarginSm;
-        }
-    }
+    flex: 0 0 auto;
+    align-items: center;
+    padding: 2px 4px;
+    transform: translateY(-100%);
 
-    &.--align-label-right {
-        justify-content: flex-end;
-        .c-plot-limit__label {
-            border-radius: $labelCr 0 0 0;
-            border-width: 1px 0 0 1px;
-        }
+    > * + * {
+      margin-left: $interiorMarginSm;
     }
+  }
 
-    &.--align-label-below {
-        .c-plot-limit__label {
-            border-radius: 0 0 $labelCr 0;
-            border-width: 0 1px 1px 0;
-            transform: translateY(0);
-        }
-        &.--align-label-right {
-            .c-plot-limit__label {
-                border-radius: 0 0 0 $labelCr;
-                border-width: 0 0 1px 1px;
-            }
-        }
+  &.--align-label-right {
+    justify-content: flex-end;
+    .c-plot-limit__label {
+      border-radius: $labelCr 0 0 0;
+      border-width: 1px 0 0 1px;
     }
+  }
 
-    [class*='icon'] {
-        &:before {
-            display: block;
-            font-family: symbolsfont;
-            font-size: 0.9em;
-        }
+  &.--align-label-below {
+    .c-plot-limit__label {
+      border-radius: 0 0 $labelCr 0;
+      border-width: 0 1px 1px 0;
+      transform: translateY(0);
     }
-
-    &__series-color-swatch {
-        @include colorSwatch();
-        display: block;
-        flex: 0 0 auto;
+    &.--align-label-right {
+      .c-plot-limit__label {
+        border-radius: 0 0 0 $labelCr;
+        border-width: 0 0 1px 1px;
+      }
     }
+  }
 
+  [class*='icon'] {
     &:before {
-        // Direction gradient
-        content: "";
-        display: block;
-        position: absolute;
-        left: 0;
-        right: 0;
-        height: 100%;
-        opacity: 0.2;
-    }
-
-    &--upr:before {
-        transform: translateY(-100%);
-    }
-
-    &--lwr:before {
-        transform: scaleY(-1); // This inverts the gradient direction
-    }
-
-    // Label styling
-    &--purple [class*='label'] {
-        background-color: $colorLimitPurpleBg;
-        border-color: $colorLimitPurpleIc;
-        color: $colorLimitPurpleFg;
-    }
-
-    &--red [class*='label'] {
-        background-color: $colorLimitRedBg;
-        border-color: $colorLimitRedIc;
-        color: $colorLimitRedFg;
-    }
-
-    &--orange [class*='label'] {
-        background-color: $colorLimitOrangeBg;
-        border-color: $colorLimitOrangeIc;
-        color: $colorLimitOrangeFg;
-    }
-
-    &--yellow [class*='label'] {
-        background-color: $colorLimitYellowBg;
-        border-color: $colorLimitYellowIc;
-        color: $colorLimitYellowFg;
-    }
-
-    &--cyan [class*='label'] {
-        background-color: $colorLimitCyanBg;
-        border-color: $colorLimitCyanIc;
-        color: $colorLimitCyanFg;
-    }
-
-    // Directional gradients
-    &--purple:before {
-        @include plotLimitDirectionGradient($c: $colorLimitPurpleIc);
-    }
-
-    &--red:before {
-        @include plotLimitDirectionGradient($c: $colorLimitRedIc);
-    }
-
-    &--orange:before {
-        @include plotLimitDirectionGradient($c: $colorLimitOrangeIc);
-    }
-
-    &--yellow:before {
-        @include plotLimitDirectionGradient($c: $colorLimitYellowIc);
-    }
-
-    &--cyan:before {
-        @include plotLimitDirectionGradient($c: $colorLimitCyanIc);
-    }
+      display: block;
+      font-family: symbolsfont;
+      font-size: 0.9em;
+    }
+  }
+
+  &__series-color-swatch {
+    @include colorSwatch();
+    display: block;
+    flex: 0 0 auto;
+  }
+
+  &:before {
+    // Direction gradient
+    content: '';
+    display: block;
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 100%;
+    opacity: 0.2;
+  }
+
+  &--upr:before {
+    transform: translateY(-100%);
+  }
+
+  &--lwr:before {
+    transform: scaleY(-1); // This inverts the gradient direction
+  }
+
+  // Label styling
+  &--purple [class*='label'] {
+    background-color: $colorLimitPurpleBg;
+    border-color: $colorLimitPurpleIc;
+    color: $colorLimitPurpleFg;
+  }
+
+  &--red [class*='label'] {
+    background-color: $colorLimitRedBg;
+    border-color: $colorLimitRedIc;
+    color: $colorLimitRedFg;
+  }
+
+  &--orange [class*='label'] {
+    background-color: $colorLimitOrangeBg;
+    border-color: $colorLimitOrangeIc;
+    color: $colorLimitOrangeFg;
+  }
+
+  &--yellow [class*='label'] {
+    background-color: $colorLimitYellowBg;
+    border-color: $colorLimitYellowIc;
+    color: $colorLimitYellowFg;
+  }
+
+  &--cyan [class*='label'] {
+    background-color: $colorLimitCyanBg;
+    border-color: $colorLimitCyanIc;
+    color: $colorLimitCyanFg;
+  }
+
+  // Directional gradients
+  &--purple:before {
+    @include plotLimitDirectionGradient($c: $colorLimitPurpleIc);
+  }
+
+  &--red:before {
+    @include plotLimitDirectionGradient($c: $colorLimitRedIc);
+  }
+
+  &--orange:before {
+    @include plotLimitDirectionGradient($c: $colorLimitOrangeIc);
+  }
+
+  &--yellow:before {
+    @include plotLimitDirectionGradient($c: $colorLimitYellowIc);
+  }
+
+  &--cyan:before {
+    @include plotLimitDirectionGradient($c: $colorLimitCyanIc);
+  }
 }
 
 // Severity icons
 .c-plot-limit__label .c-plot-limit__severity-icon:before {
-    .c-plot-limit--severe & {
-        content: $glyph-icon-alert-triangle;
-    }
+  .c-plot-limit--severe & {
+    content: $glyph-icon-alert-triangle;
+  }
 
-    .c-plot-limit--critical & {
-        content: $glyph-icon-alert-rect;
-    }
+  .c-plot-limit--critical & {
+    content: $glyph-icon-alert-rect;
+  }
 
-    .c-plot-limit--distress & {
-        content: $glyph-icon-bell;
-    }
+  .c-plot-limit--distress & {
+    content: $glyph-icon-bell;
+  }
 
-    .c-plot-limit--warning & {
-        content: $glyph-icon-asterisk;
-    }
+  .c-plot-limit--warning & {
+    content: $glyph-icon-asterisk;
+  }
 
-    .c-plot-limit--watch & {
-        content: $glyph-icon-eye-open;
-    }
+  .c-plot-limit--watch & {
+    content: $glyph-icon-eye-open;
+  }
 }
 
 // Direction icons
 .c-plot-limit__label .c-plot-limit__direction-icon:before {
-    .c-plot-limit--upr & {
-        content: $glyph-icon-arrow-up;
-    }
+  .c-plot-limit--upr & {
+    content: $glyph-icon-arrow-up;
+  }
 
-    .c-plot-limit--lwr & {
-        content: $glyph-icon-arrow-down;
-    }
-}
\ No newline at end of file
+  .c-plot-limit--lwr & {
+    content: $glyph-icon-arrow-down;
+  }
+}
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 9ed622b6318..37990c61f9d 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,483 +20,611 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+@use 'sass:math';
+
 /************************** GLYPHS */
 @mixin glyphBefore($unicode, $family: 'symbolsfont') {
-    &:before {
-        content: $unicode;
-        font-family: $family;
-    }
+  &:before {
+    content: $unicode;
+    font-family: $family;
+  }
 }
 
 @mixin glyphAfter($unicode, $family: 'symbolsfont') {
-    &:after {
-        content: $unicode;
-        font-family: $family;
-    }
+  &:after {
+    content: $unicode;
+    font-family: $family;
+  }
 }
 
 @mixin glyphBg($glyphUrl) {
-    background-image: $glyphUrl;
-    background-position: center;
-    background-size: contain;
-    background-repeat: no-repeat;
+  background-image: $glyphUrl;
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
 }
 
-[class*="icon-"] {
-    &:before
-    {
-        -webkit-font-smoothing: antialiased;
-    }
+[class*='icon-'] {
+  &:before {
+    -webkit-font-smoothing: antialiased;
+  }
 }
 
 /************************** EFFECTS */
-@mixin flash($animName: flash, $dur: 500ms, $dir: alternate, $iter: 20, $prop: background, $valStart: rgba($colorOk, 1), $valEnd: rgba($colorOk, 0)) {
-    @keyframes #{$animName} {
-        0%   { #{$prop}: $valStart; }
-        100% {  #{$prop}: $valEnd; }
-    }
-    animation-name: $animName;
-    animation-duration: $dur;
-    animation-direction: $dir;
-    animation-iteration-count: $iter;
-    animation-timing-function: ease-out;
+@mixin flash(
+  $animName: flash,
+  $dur: 500ms,
+  $dir: alternate,
+  $iter: 20,
+  $prop: background,
+  $valStart: rgba($colorOk, 1),
+  $valEnd: rgba($colorOk, 0)
+) {
+  @keyframes #{$animName} {
+    0% {
+      #{$prop}: $valStart;
+    }
+    100% {
+      #{$prop}: $valEnd;
+    }
+  }
+  animation-name: $animName;
+  animation-duration: $dur;
+  animation-direction: $dir;
+  animation-iteration-count: $iter;
+  animation-timing-function: ease-out;
 }
 
 @mixin mixedBg() {
-    $c1: nth($mixedSettingBg, 1);
-    $c2: nth($mixedSettingBg, 2);
-    $mixedBgD: $mixedSettingBgSize $mixedSettingBgSize;
-    @include bgStripes2Color($c1, $c2, $bgSize: $mixedBgD);
+  $c1: nth($mixedSettingBg, 1);
+  $c2: nth($mixedSettingBg, 2);
+  $mixedBgD: $mixedSettingBgSize $mixedSettingBgSize;
+  @include bgStripes2Color($c1, $c2, $bgSize: $mixedBgD);
 }
 
-
 @mixin pulse($animName: pulse, $dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
-    @keyframes #{$animName} {
-        0%   { opacity: $opacity0; }
-        100% { opacity: $opacity100; }
-    }
-    animation-name: $animName;
-    animation-duration: $dur;
-    animation-direction: alternate;
-    animation-iteration-count: $iteration;
-    animation-timing-function: ease-in-out;
-}
-
-@mixin pulseProp($animName: pulseProp, $dur: 500ms, $iter: 5, $prop: opacity, $valStart: 0, $valEnd: 1) {
-    @keyframes #{$animName} {
-        0%   { #{$prop}: $valStart; }
-        100% {  #{$prop}: $valEnd; }
-    }
-    animation-name: $animName;
-    animation-duration: $dur;
-    animation-direction: alternate;
-    animation-iteration-count: $iter;
-    animation-timing-function: ease-in-out;
+  @keyframes #{$animName} {
+    0% {
+      opacity: $opacity0;
+    }
+    100% {
+      opacity: $opacity100;
+    }
+  }
+  animation-name: $animName;
+  animation-duration: $dur;
+  animation-direction: alternate;
+  animation-iteration-count: $iteration;
+  animation-timing-function: ease-in-out;
+}
+
+@mixin pulseProp(
+  $animName: pulseProp,
+  $dur: 500ms,
+  $iter: 5,
+  $prop: opacity,
+  $valStart: 0,
+  $valEnd: 1
+) {
+  @keyframes #{$animName} {
+    0% {
+      #{$prop}: $valStart;
+    }
+    100% {
+      #{$prop}: $valEnd;
+    }
+  }
+  animation-name: $animName;
+  animation-duration: $dur;
+  animation-direction: alternate;
+  animation-iteration-count: $iter;
+  animation-timing-function: ease-in-out;
+}
+
+@mixin transition($prop: all, $dur: $transInTime, $timing: ease-in-out, $delay: 0ms) {
+  transition-property: $prop;
+  transition-duration: $dur;
+  transition-timing-function: $timing;
+  transition-delay: $delay;
 }
 
 /************************** VISUALS */
 @mixin ancillaryIcon($d, $c) {
-    // Used for small icons used in combination with larger icons,
-    // like the link and alert icons in tree items.
-    color: $c;
-    font-size: $d;
-    line-height: $d;
-    height: $d;
-    width: $d;
+  // Used for small icons used in combination with larger icons,
+  // like the link and alert icons in tree items.
+  color: $c;
+  font-size: $d;
+  line-height: $d;
+  height: $d;
+  width: $d;
 }
 
 @mixin appearanceNone() {
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
 
-    &:focus {
-        outline: none;
-    }
+  &:focus {
+    outline: none;
+  }
 }
 
 @mixin isAlias() {
-    &:after {
-        color:$colorIconAlias;
-        content: $glyph-icon-link;
-        display: block;
-        font-family: symbolsfont;
-        position: absolute;
-        text-shadow: rgba(black, 0.5) 0 1px 4px;
-        top: auto; left: 0; bottom: 10%; right: auto;
-        transform-origin: left bottom;
-        transform: scale(0.5);
-    }
+  &:after {
+    color: $colorIconAlias;
+    content: $glyph-icon-link;
+    display: block;
+    font-family: symbolsfont;
+    position: absolute;
+    text-shadow: rgba(black, 0.5) 0 1px 4px;
+    top: auto;
+    left: 0;
+    bottom: 10%;
+    right: auto;
+    transform-origin: left bottom;
+    transform: scale(0.5);
+  }
 }
 
 @mixin isStatus($absPos: false, $glyph: '', $color: $colorBodyFg) {
-    // Supports CSS classing as follows:
-    // is-status--missing, is-status--suspect, etc.
-    // Common styles to be applied to tree items, object labels, grid and list item views
-
-    .is-status__indicator {
-        display: block ; // Set to display: none in status.scss
-        text-shadow: $colorBodyBg 0 0 2px;
-        font-family: symbolsfont;
-
-        @if $absPos {
-            position: absolute;
-            z-index: 3;
-        }
-
-        &:before {
-            color: $color;
-            content: $glyph;
-        }
+  // Supports CSS classing as follows:
+  // is-status--missing, is-status--suspect, etc.
+  // Common styles to be applied to tree items, object labels, grid and list item views
+
+  .is-status__indicator {
+    display: block; // Set to display: none in status.scss
+    text-shadow: $colorBodyBg 0 0 2px;
+    font-family: symbolsfont;
+
+    @if $absPos {
+      position: absolute;
+      z-index: 3;
     }
-}
 
-@mixin isLimit() {
-    &[class*='is-limit'] {
-        &:before {
-            display: inline-block;
-            font-family: symbolsfont;
-            margin-right: $interiorMarginSm;
-        }
+    &:before {
+      color: $color;
+      content: $glyph;
     }
+  }
+}
+
+@mixin isStaleGlyph() {
+  content: $glyph-icon-stale;
+  display: block;
+  font-family: symbolsfont;
+  font-style: normal;
+  pointer-events: none;
+}
 
-    &.is-limit--lwr:before { content: $glyph-icon-arrow-down; }
-    &.is-limit--upr:before { content: $glyph-icon-arrow-up; }
+@mixin isStaleHolder() {
+  // Applied to objects that frame content, like Display Layout frames, plots, etc.
+  border-radius: 3px;
+  border: 2px solid rgba($colorTelemStale, 0.8) !important;
 
-    &.is-limit--purple { background: $colorLimitPurpleBg !important; color: $colorLimitPurpleFg !important; }
-    &.is-limit--red { background: $colorLimitRedBg !important; color: $colorLimitRedFg !important; }
-    &.is-limit--orange { background: $colorLimitOrangeBg !important; color: $colorLimitOrangeFg !important; }
-    &.is-limit--yellow { background: $colorLimitYellowBg !important; color: $colorLimitYellowFg !important; }
-    &.is-limit--cyan { background: $colorLimitCyanBg !important; color: $colorLimitCyanFg !important; }
+  &:before {
+    @include isStaleGlyph();
+    color: $colorTelemStale;
+    position: absolute;
+    bottom: 5px;
+    left: 3px;
+    width: 12px;
+    z-index: 10;
+  }
+}
+
+@mixin isStaleElement() {
+  // Applied directly to values, like LAD Table cells, alphanumerics, plot legend items
+  background: $colorTelemStale !important;
+  color: $colorTelemStaleFg !important;
+  font-style: italic;
+}
+
+@mixin isLimit() {
+  &[class*='is-limit'] {
+    &:before {
+      display: inline-block;
+      font-family: symbolsfont;
+      margin-right: $interiorMarginSm;
+    }
+  }
+
+  &.is-limit--lwr:before {
+    content: $glyph-icon-arrow-down;
+  }
+  &.is-limit--upr:before {
+    content: $glyph-icon-arrow-up;
+  }
+
+  &.is-limit--purple {
+    background: $colorLimitPurpleBg !important;
+    color: $colorLimitPurpleFg !important;
+  }
+  &.is-limit--red {
+    background: $colorLimitRedBg !important;
+    color: $colorLimitRedFg !important;
+  }
+  &.is-limit--orange {
+    background: $colorLimitOrangeBg !important;
+    color: $colorLimitOrangeFg !important;
+  }
+  &.is-limit--yellow {
+    background: $colorLimitYellowBg !important;
+    color: $colorLimitYellowFg !important;
+  }
+  &.is-limit--cyan {
+    background: $colorLimitCyanBg !important;
+    color: $colorLimitCyanFg !important;
+  }
 }
 
 @mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
-    background-image: linear-gradient(-45deg,
-        rgba($c, $a) 25%, transparent 25%,
-        transparent 50%, rgba($c, $a) 50%,
-        rgba($c, $a) 75%, transparent 75%,
-        transparent 100%
-    ) repeat;
-    background-size: $d $d;
+  background-image: linear-gradient(
+      -45deg,
+      rgba($c, $a) 25%,
+      transparent 25%,
+      transparent 50%,
+      rgba($c, $a) 50%,
+      rgba($c, $a) 75%,
+      transparent 75%,
+      transparent 100%
+    )
+    repeat;
+  background-size: $d $d;
 }
 
 @mixin bgStripes($c: yellow, $a: 0.1, $bgsize: 5px, $angle: 90deg) {
-    background: linear-gradient($angle,
-        rgba($c, $a) 25%, transparent 25%,
-        transparent 50%, rgba($c, $a) 50%,
-        rgba($c, $a) 75%, transparent 75%,
-        transparent 100%
-    ) repeat;
-    background-size: $bgsize $bgsize;
+  background: linear-gradient(
+      $angle,
+      rgba($c, $a) 25%,
+      transparent 25%,
+      transparent 50%,
+      rgba($c, $a) 50%,
+      rgba($c, $a) 75%,
+      transparent 75%,
+      transparent 100%
+    )
+    repeat;
+  background-size: $bgsize $bgsize;
 }
 
 @mixin bgStripes2Color($c1, $c2, $bgSize, $angle: -45deg) {
-    background: linear-gradient(-45deg,
-            $c1 0%, $c1 25%,
-            $c2 25%, $c2 50%,
-            $c1 50%, $c1 75%,
-            $c2 75%, $c2 100%
-    ) repeat;
-    background-size: $bgSize;
+  background: linear-gradient(
+      -45deg,
+      $c1 0%,
+      $c1 25%,
+      $c2 25%,
+      $c2 50%,
+      $c1 50%,
+      $c1 75%,
+      $c2 75%,
+      $c2 100%
+    )
+    repeat;
+  background-size: $bgSize;
 }
 
 @mixin bgCheckerboard($c: $colorBodyFg, $opacity: 0.3, $size: 32px, $imp: false) {
-    $color: rgba($c, $opacity);
-    $bgPos: floor($size / 2);
+  $color: rgba($c, $opacity);
+  $bgPos: floor(math.div($size, 2));
 
-    $impStr: null;
-    @if $imp {
-        $impStr: !important;
-    }
+  $impStr: null;
+  @if $imp {
+    $impStr: !important;
+  }
 
-    background-image:
-        linear-gradient(45deg, $color 25%, transparent 25%),
-        linear-gradient(45deg, transparent 75%, $color 75%),
-        linear-gradient(45deg, transparent 75%, $color 75%),
-        linear-gradient(45deg, $color 25%, transparent 25%) $impStr;
-    background-size: $size $size;
-    background-position:0 0, 0 0, -1*$bgPos -1*$bgPos, $bgPos $bgPos;
+  background-image: linear-gradient(45deg, $color 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, $color 75%),
+    linear-gradient(45deg, transparent 75%, $color 75%),
+    linear-gradient(45deg, $color 25%, transparent 25%) $impStr;
+  background-size: $size $size;
+  background-position: 0 0, 0 0, -1 * $bgPos -1 * $bgPos, $bgPos $bgPos;
 }
 
 @mixin disabled() {
-    opacity: $controlDisabledOpacity;
-    pointer-events: none !important;
-    cursor: default !important;
+  opacity: $controlDisabledOpacity;
+  pointer-events: none !important;
+  cursor: default !important;
 }
 
 @mixin grippy($c: rgba(black, 0.5), $dir: 'x') {
-    $deg: 90deg;
-    $bgSize: 2px 100%;
+  $deg: 90deg;
+  $bgSize: 3px 100%;
 
-    @if $dir != 'x' {
-        // Grippy texture runs 'vertically'
-        $deg: 0deg;
-        $bgSize: 100% 2px;
-    }
+  @if $dir != 'x' {
+    // Grippy texture runs 'vertically'
+    $deg: 0deg;
+    $bgSize: 100% 3px;
+  }
 
-    background: linear-gradient($deg,
-            $c 1px, transparent 1px,
-            transparent 100%
-    ) repeat;
-    background-size: $bgSize;
+  background: linear-gradient($deg, $c 1px, transparent 1px, transparent 100%) repeat;
+  background-size: $bgSize;
 }
 
 @mixin colorSwatch() {
-    border-radius: 30%;
-    border: 1px solid $colorBodyBg;
-    height: $plotSwatchD;
-    width: $plotSwatchD;
+  border-radius: 30%;
+  border: 1px solid $colorBodyBg;
+  height: $plotSwatchD;
+  width: $plotSwatchD;
+}
+
+@mixin dropDownArrowBg() {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3e%3cpath fill='%23#{svgColorFromHex($colorSelectArw)}' d='M5 5l5-5H0z'/%3e%3c/svg%3e");
+  background-repeat: no-repeat, no-repeat;
+  background-position: right 0.4em top 80%, 0 0;
 }
 
 @mixin noColor() {
-    // A "no fill/stroke" selection option. Used in palettes.
-    $c: red;
-    $s: 48%;
-    $e: 52%;
-    background-image: linear-gradient(-45deg,
-        transparent $s - 5%,
-        $c $s,
-        $c $e,
-        transparent $e + 5%
-    );
-    background-repeat: no-repeat;
-    background-size: contain;
+  // A "no fill/stroke" selection option. Used in palettes.
+  $c: red;
+  $s: 48%;
+  $e: 52%;
+  background-image: linear-gradient(-45deg, transparent $s - 5%, $c $s, $c $e, transparent $e + 5%);
+  background-repeat: no-repeat;
+  background-size: contain;
 }
 
 @mixin bgTicks($c: $colorBodyFg, $repeatDir: 'x') {
-    $deg: 90deg;
-    @if ($repeatDir != 'x') {
-        $deg: 0deg;
-        $repeatDir: repeat-y;
-    } @else {
-        $repeatDir: repeat-x;
-    }
+  $deg: 90deg;
+  @if ($repeatDir != 'x') {
+    $deg: 0deg;
+    $repeatDir: repeat-y;
+  } @else {
+    $repeatDir: repeat-x;
+  }
 
-    background-image: linear-gradient($deg,
-            $c 1px, transparent 1px,
-            transparent 100%
-    );
-    background-repeat: $repeatDir;
+  background-image: linear-gradient($deg, $c 1px, transparent 1px, transparent 100%);
+  background-repeat: $repeatDir;
 }
 
 @mixin sliderTrack($bg: $scrollbarTrackColorBg) {
-    border-radius: 2px;
-    box-sizing: border-box;
-    background-color: $bg;
-}
-
-@mixin triangle($dir: "left", $size: 5px, $ratio: 1, $color: red) {
-    width: 0;
-    height: 0;
-    $slopedB: $size/$ratio solid transparent;
-    $straightB: $size solid $color;
-    @if $dir == "up" {
-        border-left: $slopedB;
-        border-right: $slopedB;
-        border-bottom: $straightB;
-    } @else if $dir == "right" {
-        border-top: $slopedB;
-        border-bottom: $slopedB;
-        border-left: $straightB;
-    } @else if $dir == "down" {
-        border-left: $slopedB;
-        border-right: $slopedB;
-        border-top: $straightB;
-    } @else {
-        border-top: $slopedB;
-        border-bottom: $slopedB;
-        border-right: $straightB;
-    }
+  border-radius: 2px;
+  box-sizing: border-box;
+  background-color: $bg;
+}
+
+@mixin triangle($dir: 'left', $size: 5px, $ratio: 1, $color: red) {
+  width: 0;
+  height: 0;
+  $slopedB: math.div($size, $ratio) solid transparent;
+  $straightB: $size solid $color;
+  @if $dir == 'up' {
+    border-left: $slopedB;
+    border-right: $slopedB;
+    border-bottom: $straightB;
+  } @else if $dir == 'right' {
+    border-top: $slopedB;
+    border-bottom: $slopedB;
+    border-left: $straightB;
+  } @else if $dir == 'down' {
+    border-left: $slopedB;
+    border-right: $slopedB;
+    border-top: $straightB;
+  } @else {
+    border-top: $slopedB;
+    border-bottom: $slopedB;
+    border-right: $straightB;
+  }
 }
 
 @mixin bgVertStripes($c: yellow, $a: 0.1, $d: 40px) {
-    background-image: linear-gradient(-90deg,
-        rgba($c, $a) 0%, rgba($c, $a) 50%,
-        transparent 50%, transparent 100%
-    );
-    background-repeat: repeat;
-    background-size: $d $d;
+  background-image: linear-gradient(
+    -90deg,
+    rgba($c, $a) 0%,
+    rgba($c, $a) 50%,
+    transparent 50%,
+    transparent 100%
+  );
+  background-repeat: repeat;
+  background-size: $d $d;
 }
 
 /************************** LAYOUT */
 @mixin abs($m: 0) {
-    position: absolute;
-    top: $m; right: $m; bottom: $m; left: $m;
+  position: absolute;
+  top: $m;
+  right: $m;
+  bottom: $m;
+  left: $m;
 }
 
 @mixin propertiesHeader() {
-    border-radius: $smallCr;
-    background-color: $colorInspectorSectionHeaderBg;
-    color: $colorInspectorSectionHeaderFg;
-    font-weight: normal;
-    padding: $interiorMarginSm $interiorMargin;
-    text-transform: uppercase;
+  border-radius: $smallCr;
+  background-color: $colorInspectorSectionHeaderBg;
+  color: $colorInspectorSectionHeaderFg;
+  font-weight: normal;
+  padding: $interiorMarginSm $interiorMargin;
+  text-transform: uppercase;
 }
 
 @mixin modalFullScreen() {
-    // Optional modifier that makes a c-menu more mobile-friendly
-    position: fixed;
-    border-radius: 0;
-    top: 0; right: 0; bottom: 0; left: 0;
+  // Optional modifier that makes a c-menu more mobile-friendly
+  position: fixed;
+  border-radius: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
 }
 
 /************************** TEXT */
 @mixin ellipsize() {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin fadeTruncate($color: $colorBodyBg, $angle: 90deg) {
+  background-image: linear-gradient($angle, transparent 0%, $color 100%);
 }
 
 @mixin reverseEllipsis() {
-    @include ellipsize();
-    direction: ltr;
-    unicode-bidi:bidi-override;
+  @include ellipsize();
+  direction: ltr;
+  unicode-bidi: bidi-override;
 }
 
 /************************** CONTROLS, BUTTONS, INPUTS */
 @mixin hover {
-    body.desktop & {
-        &:hover {
-            @content
-        }
+  body.desktop & {
+    &:hover {
+      @content;
     }
+  }
 }
 
 @mixin htmlInputReset() {
-    @include appearanceNone();
-    background: transparent;
-    border: none;
-    border-radius: 0;
-    outline: none;
-    text-align: inherit;
+  @include appearanceNone();
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  outline: none;
+  text-align: inherit;
 
-    &:focus {
-        outline: 0;
-    }
+  &:focus {
+    outline: 0;
+  }
 }
 
 @mixin input-base() {
-    @include htmlInputReset();
-    border-radius: $controlCr;
+  @include htmlInputReset();
+  border-radius: $controlCr;
 
-    &.error {
-        background: $colorFormFieldErrorBg;
-        color: $colorFormFieldErrorFg;
-    }
+  &.error {
+    background: $colorFormFieldErrorBg;
+    color: $colorFormFieldErrorFg;
+  }
 }
 
-@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.5) 0 0 2px) {
-    @include input-base();
-    background: $bg;
-    color: $fg;
-    box-shadow: inset $shdw;
+@mixin nice-input(
+  $bg: $colorInputBg,
+  $fg: $colorInputFg,
+  $shdw: inset rgba(black, 0.5) 0 0 2px 1px
+) {
+  @include input-base();
+  background: $bg;
+  color: $fg;
+  box-shadow: $shdw;
 }
 
 @mixin reactive-input($bg: $colorInputBg, $fg: $colorInputFg) {
-    @include input-base();
-    background: $bg;
-    box-shadow: $shdwInput;
-    color: $fg;
+  @include input-base();
+  background: $bg;
+  box-shadow: $shdwInput;
+  color: $fg;
 
-    &:focus {
-        box-shadow: $shdwInputFoc;
-    }
+  &:focus {
+    box-shadow: $shdwInputFoc;
+  }
 
-    &::selection {
-        background: rgba($colorKeySelectedBg, 0.5);
-    }
+  &::selection {
+    background: rgba($colorKeySelectedBg, 0.5);
+  }
 }
 
 @mixin inlineInput() {
-    @include reactive-input($bg: transparent);
-    box-shadow: none;
-    display: block !important;
-    min-width: 0;
-    padding-left: 0;
-    padding-right: 0;
-    overflow: hidden;
-    transition: all 250ms ease;
-    white-space: nowrap;
-
-    &:not(:focus) {
-        text-overflow: ellipsis;
-    }
+  @include reactive-input($bg: transparent);
+  box-shadow: none;
+  display: block !important;
+  min-width: 0;
+  padding-left: 0;
+  padding-right: 0;
+  overflow: hidden;
+  transition: all 250ms ease;
+  white-space: nowrap;
+
+  &:not(:focus) {
+    text-overflow: ellipsis;
+  }
 }
 
 @mixin button($bg: $colorBtnBg, $fg: $colorBtnFg, $radius: $controlCr, $shdw: none) {
-    // Is this being used? Remove if not.
-    background: $bg;
-    color: $fg;
-    border-radius: $radius;
-    box-shadow: $shdw;
+  background: $bg;
+  color: $fg;
+  border-radius: $radius;
+  box-shadow: $shdw;
 }
 
-@mixin buttonBehavior() {
-    // Assign transition timings
-    transition: $transOut;
+@mixin cControl() {
+  $fs: 1em;
+  @include userSelectNone();
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: $fs; // Remove effect on top and bottom padding
+  overflow: hidden;
+
+  &:before,
+  &:after {
+    font-family: symbolsfont;
+    display: block;
+    flex: 0 0 auto;
+  }
 
-    @include hover() {
-        transition: $transIn;
-    }
+  &:before {
+    font-size: 0.9em;
+  }
+
+  &:after {
+    font-size: 0.8em;
+  }
+
+  [class*='__label'] {
+    @include ellipsize();
+    display: block;
+    font-size: $fs;
+  }
+
+  &[class*='icon'] > [class*='__label'] {
+    // When button holds both an icon and a label, provide margin between them.
+    margin-left: $interiorMarginSm;
+  }
 }
 
-@mixin cControl() {
-    $fs: 1em;
-    @include userSelectNone();
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    line-height: $fs; // Remove effect on top and bottom padding
-    overflow: hidden;
+@mixin cControlHov($styleConst: $shdwBtnHov) {
+  transition: box-shadow $transOutTime;
 
-    &:before,
-    &:after {
-        font-family: symbolsfont;
-        display: block;
-        flex: 0 0 auto;
-    }
+  @include hover() {
+    transition: box-shadow $transInTime;
+    box-shadow: $styleConst !important;
+  }
+}
 
-    &:before {
-        font-size: 0.9em;
-    }
+@function cButtonPadding($padding: $interiorMargin, $compact: false) {
+  @if $compact {
+    @return floor(math.div($padding, 1.5)) $padding;
+  } @else {
+    @return $padding floor($padding * 1.25);
+  }
+}
 
-    &:after {
-        font-size: 0.8em;
-    }
+@mixin cButtonLayout() {
+  $pad: $interiorMargin;
+  padding: cButtonPadding($pad);
 
-    [class*="__label"] {
-        @include ellipsize();
-        display: block;
-        font-size: $fs;
-    }
+  &:after,
+  > * + * {
+    margin-left: $interiorMarginSm;
+  }
 
-    &[class*='icon'] > [class*="__label"] {
-        // When button holds both an icon and a label, provide margin between them.
-        margin-left: $interiorMarginSm;
-    }
+  &[class*='--compact'] {
+    //padding: floor(math.div($pad, 1.5)) $pad;
+    padding: cButtonPadding($pad, true);
+  }
 }
 
 @mixin cButton() {
     @include cControl();
+    @include cControlHov();
     @include themedButton();
+    @include cButtonLayout();
     border-radius: $controlCr;
     color: $colorBtnFg;
     cursor: pointer;
-    padding: $interiorMargin floor($interiorMargin * 1.25);
-
-    &:after,
-    > * + * {
-        margin-left: $interiorMarginSm;
-    }
-
-    @include hover() {
-        filter: $filterHov;
-    }
 
     &[class*="--major"],
     &[class*='is-active']{
-        background: $colorBtnMajorBg;
-        color: $colorBtnMajorFg;
+        background: $colorBtnMajorBg !important;
+        color: $colorBtnMajorFg !important;
     }
 
     &[class*='--caution'] {
@@ -506,277 +634,280 @@
 }
 
 @mixin cClickIcon() {
-    @include cControl();
-    color: $colorBodyFg;
-    cursor: pointer;
-    padding: 4px; // Bigger hit area
-    opacity: 0.7;
-    transition: $transOut;
-    transform-origin: center;
+  @include cControl();
+  @include cControlHov();
+  color: $colorBodyFg;
+  cursor: pointer;
+  padding: 4px; // Bigger hit area
+  opacity: 0.7;
+  transform-origin: center;
 
-    &[class*="--major"] {
-        color: $colorBtnMajorBg !important;
-        opacity: 0.8;
-    }
+  &[class*='--major'] {
+    color: $colorBtnMajorBg !important;
+    opacity: 0.8;
+  }
 
-    @include hover() {
-        transform: scale(1.1);
-        transition: $transIn;
-        opacity: 1;
-    }
+  @include hover() {
+    transform: scale(1.1);
+    opacity: 1;
+  }
 }
 
 @mixin cClickIconButtonLayout() {
-    $pLR: 5px;
-    $pTB: 5px;
-    padding: $pTB $pLR;
-
-    &:before,
-    *:before {
-        // *:before handles any nested containers that may contain glyph elements
-        // Needed for c-togglebutton.
-        font-size: 1.25em;
-    }
+  $pLR: 5px;
+  $pTB: 5px;
+  padding: $pTB $pLR;
+
+  &:before,
+  *:before {
+    // *:before handles any nested containers that may contain glyph elements
+    // Needed for c-togglebutton.
+    font-size: 1.15em;
+  }
 }
 
 @mixin cClickIconButton() {
-    // A clickable element that just includes the icon
-    // Background is displayed on hover
-    // Padding is included to facilitate a bigger hit area
-    // Make the icon bigger relative to its container
-    @include cControl();
-    @include cClickIconButtonLayout();
-    background: none;
-    color: $colorClickIconButton;
-    box-shadow: none;
-    cursor: pointer;
-    transition: $transOut;
-    border-radius: $controlCr;
-
-    @include hover() {
-        transition: $transIn;
-        background: $colorClickIconButtonBgHov;
-        //color: $colorClickIconButtonFgHov;
-        filter: $filterHov;
-    }
-
-    &[class*="--major"] {
-        color: $colorBtnMajorBg !important;
-    }
+  // A clickable element that just includes the icon
+  // Background is displayed on hover
+  // Padding is included to facilitate a bigger hit area
+  // Make the icon bigger relative to its container
+  @include cControl();
+  @include cControlHov();
+  @include cClickIconButtonLayout();
+  background: none;
+  color: $colorClickIconButton;
+  box-shadow: none;
+  cursor: pointer;
+  border-radius: $controlCr;
+
+  &[class*='--major'] {
+    color: $colorBtnMajorBg !important;
+  }
 }
 
 @mixin cCtrlWrapper {
-    // Provides a wrapper around  buttons and other controls
-    // Contains control and provides positioning context for contained menu/palette.
-    // Wraps --menu elements, contains button and menu
-    overflow: visible;
-
+  // Provides a wrapper around  buttons and other controls
+  // Contains control and provides positioning context for contained menu/palette.
+  // Wraps --menu elements, contains button and menu
+  overflow: visible;
+
+  .c-menu {
+    // Default position of contained menu
+    top: 100%;
+    left: 0;
+  }
+
+  &[class*='--menus-up'] {
     .c-menu {
-        // Default position of contained menu
-        top: 100%; left: 0;
+      top: auto;
+      bottom: 100%;
     }
+  }
 
-    &[class*='--menus-up'] {
-        .c-menu {
-            top: auto; bottom: 100%;
-        }
+  &[class*='--menus-bottom'] {
+    .c-menu {
+      top: auto;
+      bottom: 100%;
     }
+  }
 
-    &[class*='--menus-left'],
-    &[class*='menus-to-left'] {
-        .c-menu {
-            left: auto; right: 0;
-        }
+  &[class*='--menus-left'],
+  &[class*='menus-to-left'] {
+    .c-menu {
+      left: auto;
+      right: 0;
     }
+  }
 }
 
 @mixin cArrowButtonBase($colorBg: transparent, $colorFg: $colorBtnFg, $filterHov: $filterHov) {
-    // Copied from branch new-tree-refactor
+  // Copied from branch new-tree-refactor
 
-    flex: 0 0 auto;
-    position: relative;
-    background: $colorBg;
+  background: $colorBg;
 
-    &:before {
-        // Arrow shape
-        border-style: solid;
-        content: '';
-        display: block;
-        position: absolute;
-        left: 50%; top: 50%;
-        transform-origin: center;
-    }
-
-    &:before {
-        border-color: $colorFg;
-    }
+  &:before {
+    // Arrow shape
+    border-style: solid;
+    content: '';
+    display: block;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform-origin: center;
+  }
 
-    @include hover {
-        filter: $filterHov;
-    }
+  &:before {
+    border-color: $colorFg;
+  }
 
-    &--up, &--prev {
-        &:before {
-            transform: translate(-30%, -50%) rotate(135deg);
-        }
+  &--up,
+  &--prev {
+    &:before {
+      transform: translate(-30%, -50%) rotate(135deg);
     }
+  }
 
-    &--down, &--next {
-        &:before {
-            transform: translate(-70%, -50%) rotate(-45deg);
-        }
+  &--down,
+  &--next {
+    &:before {
+      transform: translate(-70%, -50%) rotate(-45deg);
     }
+  }
 }
 
 @mixin cArrowButtonSizing($dimOuter: 48px) {
-    height: $dimOuter;
-    width: $dimOuter;
-    $dimInner: floor($dimOuter * 0.6);
-    $borderW: floor($dimInner * 0.3);
-    $backOffsetW: floor($dimInner * 0.4);
+  height: $dimOuter;
+  width: $dimOuter;
+  $dimInner: floor($dimOuter * 0.6);
+  $borderW: floor($dimInner * 0.3);
+  $backOffsetW: floor($dimInner * 0.4);
 
-    &:before {
-        height: $dimInner;
-        width: $dimInner;
-    }
+  &:before {
+    height: $dimInner;
+    width: $dimInner;
+  }
 
-    &:before {
-        // Arrow shape
-        border-width: 0 $borderW $borderW 0;
-    }
+  &:before {
+    // Arrow shape
+    border-width: 0 $borderW $borderW 0;
+  }
 }
 
 @mixin cArrowButton() {
-    @include cArrowButtonBase();
-    @include cArrowButtonSizing();
+  @include cArrowButtonBase();
+  @include cArrowButtonSizing();
 }
 
 @mixin hasMenu() {
-    &:after {
-        content: $glyph-icon-arrow-down;
-        font-family: symbolsfont;
-        font-size: 0.7em;
-        margin-left: floor($interiorMarginSm * 0.8);
-        opacity: 0.5;
-    }
+  &:after {
+    content: $glyph-icon-arrow-down;
+    font-family: symbolsfont;
+    font-size: 0.7em;
+    margin-left: floor($interiorMarginSm * 0.8);
+    opacity: 0.5;
+  }
 }
 
 @mixin cSelect($bg, $fg, $arwClr, $shdw) {
-    $svgArwClr: str-slice(inspect($arwClr), 2, str-length(inspect($arwClr))); // Remove initial # in color value
-    background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3e%3cpath fill='%23#{$svgArwClr}' d='M5 5l5-5H0z'/%3e%3c/svg%3e"), $bg;
-    color: $fg;
-    box-shadow: $shdw;
+  $svgArwClr: str-slice(
+    inspect($arwClr),
+    2,
+    str-length(inspect($arwClr))
+  ); // Remove initial # in color value
+  background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3e%3cpath fill='%23#{$svgArwClr}' d='M5 5l5-5H0z'/%3e%3c/svg%3e"),
+    $bg;
+  color: $fg;
+  box-shadow: $shdw;
 }
 
 @mixin smallerControlButtons() {
-    .c-click-icon,
-    .c-button,
-    .c-icon-button {
-        // Shrink buttons a bit when they appear in containers
-        font-size: 0.9em;
-        padding: 4px;
-    }
+  .c-click-icon,
+  .c-button,
+  .c-icon-button {
+    // Shrink buttons a bit when they appear in containers
+    font-size: 0.9em;
+    padding: 4px;
+  }
 }
 
 @mixin wrappedInput() {
-    // An input that is wrapped. Optionally includes a __label or icon element.
-    // Based on .c-search.
-    @include nice-input();
-    display: flex;
-    align-items: center;
-    padding-left: 4px;
-    padding-right: 4px;
-
-    &:before,
-    [class*='__label'] {
-        opacity: 0.5;
-    }
+  // An input that is wrapped. Optionally includes a __label or icon element.
+  // Based on .c-search.
+  @include nice-input($shdw: $shdwInput);
+  display: flex;
+  align-items: center;
+  padding-left: 4px;
+  padding-right: 4px;
+
+  &:before,
+  [class*='__label'] {
+    opacity: 0.5;
+  }
+
+  &:before {
+    // Adds an icon. Content defined in class.
+    direction: rtl; // Aligns glyph to right-hand side of container, for transition
+    display: block;
+    font-family: symbolsfont;
+    flex: 0 0 auto;
+    overflow: hidden;
+    padding: 2px 0; // Prevents clipping
+    transition: width 250ms ease;
+    width: 1em;
+  }
 
+  &:hover {
+    box-shadow: inset rgba(black, 0.8) 0 0px 2px;
     &:before {
-        // Adds an icon. Content defined in class.
-        direction: rtl; // Aligns glyph to right-hand side of container, for transition
-        display: block;
-        font-family: symbolsfont;
-        flex: 0 0 auto;
-        overflow: hidden;
-        padding: 2px 0; // Prevents clipping
-        transition: width 250ms ease;
-        width: 1em;
-    }
-
-    &:hover {
-        box-shadow: inset rgba(black, 0.8) 0 0px 2px;
-        &:before {
-            opacity: 0.9;
-        }
-    }
-
-    &--major {
-        padding: 4px;
-    }
-
-    &__input,
-    input[type='text'],
-    input[type='search'],
-    input[type='number'] {
-        background: none  !important;
-        box-shadow: none !important; // !important needed to override default for [input]
-        flex: 1 1 auto;
-        padding-left: 2px !important;
-        padding-right: 2px !important;
-        min-width: 10px; // Must be set to allow input to collapse below browser min
-    }
-
-    &.is-active {
-        &:before {
-            padding: 2px 0px;
-            width: 0px;
-        }
+      opacity: 0.9;
+    }
+  }
+
+  &--major {
+    padding: 4px;
+  }
+
+  &__input,
+  input[type='text'],
+  input[type='search'],
+  input[type='number'] {
+    background: none !important;
+    box-shadow: none !important; // !important needed to override default for [input]
+    flex: 1 1 auto;
+    padding-left: 2px !important;
+    padding-right: 2px !important;
+    min-width: 10px; // Must be set to allow input to collapse below browser min
+  }
+
+  &.is-active {
+    &:before {
+      padding: 2px 0px;
+      width: 0px;
     }
+  }
 }
 
 /************************** MATH */
 @function percentToDecimal($p) {
-    @return $p / 100%;
+  @return $p / 100%;
 }
 
 @function decimalToPercent($d) {
-    @return percentage($d);
+  @return percentage($d);
 }
 
 /************************** UTILITIES */
 @mixin browserPrefix($prop, $val) {
-    #{$prop}: $val;
-    -ms-#{$prop}: $val;
-    -moz-#{$prop}: $val;
-    -webkit-#{$prop}: $val;
+  #{$prop}: $val;
+  -ms-#{$prop}: $val;
+  -moz-#{$prop}: $val;
+  -webkit-#{$prop}: $val;
 }
 
 @mixin userSelectNone() {
-    @include browserPrefix(user-select, none);
+  @include browserPrefix(user-select, none);
 }
 
 @mixin cursorGrab() {
-    cursor: grab;
-    cursor: -webkit-grab;
-    &:active {
-        cursor: grabbing;
-        cursor: -webkit-grabbing;
-    }
+  cursor: grab;
+  cursor: -webkit-grab;
+  &:active {
+    cursor: grabbing;
+    cursor: -webkit-grabbing;
+  }
 }
 
 @function svgColorFromHex($hexColor) {
-    // Remove initial # in color value
-    @return str-slice(inspect($hexColor), 2, str-length(inspect($hexColor)));
+  // Remove initial # in color value
+  @return str-slice(inspect($hexColor), 2, str-length(inspect($hexColor)));
 }
 
 @mixin test($c: deeppink, $a: 0.3) {
-    background: rgba($c, $a) !important;
-    background-color: rgba($c, $a) !important;
+  background: rgba($c, $a) !important;
+  background-color: rgba($c, $a) !important;
 }
 
-
-@mixin sUnsynced() {
-    $c: $colorPausedBg;
-    border: 1px solid $c;
+@mixin sUnsynced {
+  $c: $colorPausedBg;
+  border: 1px solid $c;
 }
diff --git a/src/styles/_status.scss b/src/styles/_status.scss
index 612b23a315c..ab2f57fda3b 100644
--- a/src/styles/_status.scss
+++ b/src/styles/_status.scss
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,174 +21,239 @@
  *****************************************************************************/
 /*************************************************** MIXINS */
 @mixin statusStyle($bg, $fg, $imp: false) {
-    $impStr: null;
-    @if $imp {
-        $impStr: !important;
-    }
-    background: $bg $impStr;
-    background-color: $bg $impStr;
-    color: $fg $impStr;
+  $impStr: null;
+  @if $imp {
+    $impStr: !important;
+  }
+  background: $bg $impStr;
+  background-color: $bg $impStr;
+  color: $fg $impStr;
 }
 
 @mixin statusIcon($ic, $glyph: null, $imp: false) {
-    $impStr: null;
-    @if $imp {
-        $impStr: !important;
-    }
-    &:before {
-        color: $ic;
-        display: inline-block;
-        font-family: symbolsfont;
-        font-size: 0.8em;
-        margin-right: $interiorMarginSm;
-        @if $glyph != null {
-            content: $glyph $impStr;
-        }
+  $impStr: null;
+  @if $imp {
+    $impStr: !important;
+  }
+  &:before {
+    color: $ic;
+    display: inline-block;
+    font-family: symbolsfont;
+    font-size: 0.8em;
+    margin-right: $interiorMarginSm;
+    @if $glyph != null {
+      content: $glyph $impStr;
     }
+  }
 }
 
 @mixin statusStyleCombined($bg, $fg, $ic) {
-    @include statusStyle($bg, $fg, $imp: true);
-    @include statusIcon($ic);
+  @include statusStyle($bg, $fg, $imp: true);
+  @include statusIcon($ic);
 }
 
 @mixin elementStatusColors($c) {
-    // Sets bg and icon colors for elements
-    &:before {
-        color: $c !important;
-    }
+  // Sets bg and icon colors for elements
+  &:before {
+    color: $c !important;
+  }
 }
 
 @mixin indicatorStatusColors($c) {
-    &:before, .c-indicator__count {
-        color: $c;
-    }
+  &:before,
+  .c-indicator__count {
+    color: $c;
+  }
 }
 
 @mixin uIndicator($bg, $fg, $glyph) {
-    background: $bg;
-    color: $fg;
-
-    &[class*='--with-icon'] {
-        &:before {
-            color: $fg;
-            display: inline-block;
-            font-family: symbolsfont;
-            margin-right: $interiorMarginSm;
-            @if $glyph != null {
-                content: $glyph;
-            }
-        }
-    }
+  background: $bg;
+  color: $fg;
 
-    &[class*='--block'] {
-        border-radius: $controlCr;
-        display: inline-block;
-        padding: 2px $interiorMargin;
+  &[class*='--with-icon'] {
+    &:before {
+      color: $fg;
+      display: inline-block;
+      font-family: symbolsfont;
+      margin-right: $interiorMarginSm;
+      @if $glyph != null {
+        content: $glyph;
+      }
     }
+  }
+
+  &[class*='--block'] {
+    border-radius: $controlCr;
+    display: inline-block;
+    padding: 2px $interiorMargin;
+  }
 }
 
 /*************************************************** STYLES */
 tr {
-    &.is-limit--yellow {
-        @include statusStyle($colorLimitYellowBg, $colorLimitYellowFg);
-        td:first-child {
-            @include statusIcon($colorLimitYellowIc, $glyph-icon-alert-rect);
-        }
-        td { color: $colorLimitYellowFg; }
+  &.is-limit--yellow {
+    @include statusStyle($colorLimitYellowBg, $colorLimitYellowFg);
+    td:first-child {
+      @include statusIcon($colorLimitYellowIc, $glyph-icon-alert-rect);
     }
+    td {
+      color: $colorLimitYellowFg;
+    }
+  }
 
-    &.is-limit--red {
-        @include statusStyle($colorLimitRedBg, $colorLimitRedFg);
-        td:first-child {
-            @include statusIcon($colorLimitRedIc, $glyph-icon-alert-triangle);
-        }
-        td { color: $colorLimitRedFg; }
+  &.is-limit--red {
+    @include statusStyle($colorLimitRedBg, $colorLimitRedFg);
+    td:first-child {
+      @include statusIcon($colorLimitRedIc, $glyph-icon-alert-triangle);
+    }
+    td {
+      color: $colorLimitRedFg;
     }
+  }
 
-    &.is-limit--upr { td:first-child:before {  content: $glyph-icon-arrow-up !important; } }
-    &.is-limit--lwr { td:first-child:before {  content: $glyph-icon-arrow-down !important; } }
+  &.is-limit--upr {
+    td:first-child:before {
+      content: $glyph-icon-arrow-up !important;
+    }
+  }
+  &.is-limit--lwr {
+    td:first-child:before {
+      content: $glyph-icon-arrow-down !important;
+    }
+  }
 }
 
 /*************************************************** STATUS */
 [class*='s-status-icon'] {
-    &:before {
-        font-family: symbolsfont;
-        margin-right: $interiorMargin;
-    }
+  &:before {
+    font-family: symbolsfont;
+    margin-right: $interiorMargin;
+  }
 }
 
-.s-status-warning-hi, .s-status-icon-warning-hi {  @include elementStatusColors($colorWarningHi); }
-.s-status-warning-lo, .s-status-icon-warning-lo {  @include elementStatusColors($colorWarningLo); }
-.s-status-diagnostic, .s-status-icon-diagnostic {  @include elementStatusColors($colorDiagnostic); }
-.s-status-info, .s-status-icon-info {  @include elementStatusColors($colorInfo); }
-.s-status-ok, .s-status-icon-ok {  @include elementStatusColors($colorOk); }
+.s-status-warning-hi,
+.s-status-icon-warning-hi {
+  @include elementStatusColors($colorWarningHi);
+}
+.s-status-warning-lo,
+.s-status-icon-warning-lo {
+  @include elementStatusColors($colorWarningLo);
+}
+.s-status-diagnostic,
+.s-status-icon-diagnostic {
+  @include elementStatusColors($colorDiagnostic);
+}
+.s-status-info,
+.s-status-icon-info {
+  @include elementStatusColors($colorInfo);
+}
+.s-status-ok,
+.s-status-icon-ok {
+  @include elementStatusColors($colorOk);
+}
 
-.s-status-icon-warning-hi:before { content: $glyph-icon-alert-triangle; }
-.s-status-icon-warning-lo:before { content: $glyph-icon-alert-rect; }
-.s-status-icon-diagnostic:before { content: $glyph-icon-eye-open; }
-.s-status-icon-info:before { content: $glyph-icon-info; }
-.s-status-icon-ok:before { content: $glyph-icon-check; }
+.s-status-icon-warning-hi:before {
+  content: $glyph-icon-alert-triangle;
+}
+.s-status-icon-warning-lo:before {
+  content: $glyph-icon-alert-rect;
+}
+.s-status-icon-diagnostic:before {
+  content: $glyph-icon-eye-open;
+}
+.s-status-icon-info:before {
+  content: $glyph-icon-info;
+}
+.s-status-icon-ok:before {
+  content: $glyph-icon-check;
+}
 
 /*************************************************** INDICATOR COLORING */
 .c-indicator {
-    &.s-status-info {
-        @include indicatorStatusColors($colorInfo);
-    }
+  &.s-status-info {
+    @include indicatorStatusColors($colorInfo);
+  }
 
-    &.s-status-disabled {
-        @include indicatorStatusColors($colorIndicatorDisabled);
-    }
+  &.s-status-disabled {
+    @include indicatorStatusColors($colorIndicatorDisabled);
+  }
 
-    &.s-status-available {
-        @include indicatorStatusColors($colorIndicatorAvailable);
-    }
+  &.s-status-available {
+    @include indicatorStatusColors($colorIndicatorAvailable);
+  }
 
-    &.s-status-on,
-    &.s-status-enabled {
-        @include indicatorStatusColors($colorIndicatorOn);
-    }
+  &.s-status-on,
+  &.s-status-enabled {
+    @include indicatorStatusColors($colorIndicatorOn);
+  }
 
-    &.s-status-off {
-        @include indicatorStatusColors($colorIndicatorOff);
-    }
+  &.s-status-off {
+    @include indicatorStatusColors($colorIndicatorOff);
+  }
 
-    &.s-status-caution,
-    &.s-status-warning,
-    &.s-status-alert {
-        @include indicatorStatusColors($colorStatusAlert);
-    }
+  &.s-status-caution,
+  &.s-status-warning,
+  &.s-status-alert {
+    @include indicatorStatusColors($colorStatusAlert);
+  }
 
-    &.s-status-error {
-        @include indicatorStatusColors($colorStatusError);
-    }
+  &.s-status-error {
+    @include indicatorStatusColors($colorStatusError);
+  }
 }
 
 .s-status {
-    &--partial {
-        // Partially completed things, such as a file downloading or process that's running
-        background-color: $colorStatusPartialBg;
-    }
+  &--partial {
+    // Partially completed things, such as a file downloading or process that's running
+    background-color: $colorStatusPartialBg;
+  }
 
-    &--complete {
-        // Completed things, such as a file downloaded or process that's finished
-        background-color: $colorStatusCompleteBg;
-    }
+  &--complete {
+    // Completed things, such as a file downloaded or process that's finished
+    background-color: $colorStatusCompleteBg;
+  }
 }
 
-.u-alert { @include uIndicator($colorAlert, $colorAlertFg, $glyph-icon-alert-triangle); }
-.u-error { @include uIndicator($colorError, $colorErrorFg, $glyph-icon-alert-triangle); }
+.u-alert {
+  @include uIndicator($colorAlert, $colorAlertFg, $glyph-icon-alert-triangle);
+}
+.u-error {
+  @include uIndicator($colorError, $colorErrorFg, $glyph-icon-alert-triangle);
+}
 
 .is-status {
-    &__indicator {
-        display: none; // Default state; is set to block when within an actual is-status class
-    }
+  &__indicator {
+    display: none; // Default state; is set to block when within an actual is-status class
+  }
 
-    &--missing {
-        @include isStatus($glyph: $glyph-icon-alert-triangle, $color: $colorAlert);
-    }
+  &--missing {
+    @include isStatus($glyph: $glyph-icon-alert-triangle, $color: $colorAlert);
+  }
 
-    &--suspect {
-        @include isStatus($glyph: $glyph-icon-alert-rect, $color: $colorWarningLo);
-    }
+  &--suspect {
+    @include isStatus($glyph: $glyph-icon-alert-rect, $color: $colorWarningLo);
+  }
+}
+
+.is-event {
+  &--purple {
+    background-color: $colorEventPurpleBg !important;
+    color: $colorEventPurpleFg !important;
+  }
+  &--red {
+    background-color: $colorEventRedBg !important;
+    color: $colorEventRedFg !important;
+  }
+  &--orange {
+    background-color: $colorEventOrangeBg !important;
+    color: $colorEventOrangeFg !important;
+  }
+  &--yellow {
+    background-color: $colorEventYellowBg !important;
+    color: $colorEventYellowFg !important;
+  }
+  &--no-style {
+    background-color: $colorBodyBg !important;
+    color: $colorBodyFg !important;
+  }
 }
diff --git a/src/styles/_table.scss b/src/styles/_table.scss
index 501e70fd57f..234c0322ca3 100644
--- a/src/styles/_table.scss
+++ b/src/styles/_table.scss
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,200 +21,252 @@
  *****************************************************************************/
 /******************************************************** TABLE */
 table {
-    $minW: 50px;
-    width: 100%;
+  $minW: 50px;
+  width: 100%;
 
-    thead {
-        th {
-            background: $colorTabHeaderBg;
+  thead {
+    th {
+      background: $colorTabHeaderBg;
 
-            + th {
-                border-left: 1px solid $colorTabHeaderBorder;
-            }
-        }
+      + th {
+        border-left: 1px solid $colorTabHeaderBorder;
+      }
     }
+  }
 
-    tbody {
-        tr + tr {
-            border-top: 1px solid $colorTabBorder;
-        }
+  tbody {
+    tr + tr {
+      border-top: 1px solid $colorTabBorder;
     }
+  }
 
-    th, td {
-        white-space: nowrap;
-        min-width: $minW;
-        padding: $tabularTdPadTB $tabularTdPadLR;
-    }
+  th,
+  td {
+    white-space: nowrap;
+    min-width: $minW;
+    padding: $tabularTdPadTB $tabularTdPadLR;
+  }
 
-    td {
-        vertical-align: top;
-    }
+  td {
+    vertical-align: top;
+  }
 }
 
 .is-editing {
-    td.is-selectable {
-        &:hover {
-            background: rgba($editUIColorBg, 0.1);
-            box-shadow: inset rgba($editUIColorBg, 0.8) 0 0 0 1px;
-        }
+  td.is-selectable {
+    &:hover {
+      background: rgba($editUIColorBg, 0.1);
+      box-shadow: inset rgba($editUIColorBg, 0.8) 0 0 0 1px;
+    }
 
-        &[s-selected] {
-            background: $editUIColorBg !important;
-            border: 1px solid $editUIColorFg !important;
-            color: $editUIColorFg !important;
-            box-shadow: $editFrameSelectedShdw;
-            z-index: 2;
-        }
+    &[s-selected] {
+      background: $editUIColorBg !important;
+      border: 1px solid $editUIColorFg !important;
+      color: $editUIColorFg !important;
+      box-shadow: $editFrameSelectedShdw;
+      z-index: 2;
     }
+  }
 }
 
 /******************************************************** C-TABLE */
 div.c-table {
-    // When c-table is used as a wrapper element in more complex table views
-    height: 100%;
+  // When c-table is used as a wrapper element in more complex table views
+  height: 100%;
 }
 
 .c-table-wrapper {
-    // Wraps .c-control-bar and .c-table
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
+  // Wraps .c-control-bar and .c-table
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 
-    // Using absolute here because sizing table can't calc width properly if padding is used
-    $p: $mainViewPad;
-    position: absolute;
-    top: $p; right: $p; bottom: $p; left: $p;
+  // Using absolute here because sizing table can't calc width properly if padding is used
+  $p: $mainViewPad;
+  position: absolute;
+  top: $p;
+  right: $p;
+  bottom: $p;
+  left: $p;
 
-    > .c-table {
-        height: auto;
-        flex: 1 1 auto;
-    }
+  > .c-table {
+    height: auto;
+    flex: 1 1 auto;
+  }
 
-    .is-in-small-container & {
-        &:not(.is-paused) {
-            .c-table-control-bar {
-                display: none;
-            }
-        }
-        .c-table-control-bar {
-            .c-icon-button,
-            .c-click-icon,
-            .c-button {
-                &__label {
-                    display: none;
-                }
-            }
+  &.is-stale {
+    @include isStaleHolder();
+  }
+
+  .--width-less-than-600 & {
+    &:not(.is-paused) {
+      .c-table-control-bar {
+        display: none;
+      }
+    }
+    .c-table-control-bar {
+      .c-icon-button,
+      .c-click-icon,
+      .c-button {
+        &__label {
+          display: none;
         }
+      }
     }
+  }
 }
 
 .c-table-control-bar {
-    display: flex;
-    flex: 0 0 auto;
-    //margin-bottom: $interiorMarginSm; // This approach to allow margin to go away when control bar is hidden
-    padding: $interiorMarginSm 0;
+  display: flex;
+  flex: 0 0 auto;
+  //margin-bottom: $interiorMarginSm; // This approach to allow margin to go away when control bar is hidden
+  padding: $interiorMarginSm 0;
 
-    > * + * {
-        margin-left: $interiorMarginSm;
-    }
+  > * + * {
+    margin-left: $interiorMarginSm;
+  }
 }
 
 .c-table {
-    // Can be used by any type of table, scrolling, LAD, etc.
-    $min-w: 50px;
+  // Can be used by any type of table, scrolling, LAD, etc.
+  $min-w: 50px;
+
+  width: 100%;
+
+  &__headers-w {
+    flex: 0 0 auto;
+  }
 
-    width: 100%;
+  /******************************* ELEMENTS */
+  thead tr,
+  &.c-table__headers {
+    background: $colorTabHeaderBg;
 
-    &__headers-w {
-        flex: 0 0 auto;
+    th {
+      &:not(:first-child) {
+        border-left: 1px solid $colorTabHeaderBorder;
+      }
     }
+  }
 
-    /******************************* ELEMENTS */
-    thead tr,
-    &.c-table__headers {
-        background: $colorTabHeaderBg;
+  tbody,
+  &__body {
+    tr:not(.c-table__group-header) + tr:not(.c-table__group-header) {
+      border-top: 1px solid $colorTabBorder;
+    }
+    transition: $transOut;
+  }
 
-        th {
-            &:not(:first-child) {
-                border-left: 1px solid $colorTabHeaderBorder;
-            }
-        }
+  &__selectable-row {
+    cursor: pointer;
+    &:hover {
+      background: $colorListItemBgHov;
+      filter: $filterHov;
+      transition: $transIn;
     }
+  }
 
-    tbody,
-    &__body {
-        tr:not(.c-table__group-header) + tr:not(.c-table__group-header) {
-            border-top: 1px solid $colorTabBorder;
-        }
+  &__group-header {
+    // tr element found in LAD Table Sets
+    border-top: 1px solid $colorTabHeaderBorder;
+    background: $colorTabGroupHeaderBg;
+    td {
+      color: $colorTabGroupHeaderFg;
     }
+  }
 
-    &__group-header {
-        // tr element found in LAD Table Sets
-        border-top: 1px solid $colorTabHeaderBorder;
-        background: $colorTabGroupHeaderBg;
-        td { color: $colorTabGroupHeaderFg; }
-    }
-
-    &--sortable {
-        .is-sorting {
-            &:after {
-                color: $colorIconAlias;
-                content: $glyph-icon-arrow-tall-up;
-                font-family: symbolsfont;
-                font-size: 8px;
-                display: inline-block;
-                margin-left: $interiorMarginSm;
-            }
-            &.desc:after {
-                content: $glyph-icon-arrow-tall-down;
-            }
-        }
-        .is-sortable {
-            cursor: pointer;
-        }
+  &--sortable {
+    .is-sorting {
+      &:after {
+        color: $colorIconAlias;
+        content: $glyph-icon-arrow-tall-up;
+        font-family: symbolsfont;
+        font-size: 8px;
+        display: inline-block;
+        margin-left: $interiorMarginSm;
+      }
+      &.desc:after {
+        content: $glyph-icon-arrow-tall-down;
+      }
+    }
+    .is-sortable {
+      cursor: pointer;
     }
+  }
 }
 
 .c-lad-table-wrapper {
-    width: 100%;
-    height: 100%;
-    padding: $mainViewPad;
+  width: 100%;
+  height: 100%;
+  padding: $mainViewPad;
+
+  &.is-stale {
+    @include isStaleHolder();
+  }
 }
 
 .c-lad-table {
-    th, td {
-        width: 33%; // Needed to prevent size jumping as values dynamically update
+  &.fixed-layout {
+    table-layout: fixed;
+    td {
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
+  }
+  th,
+  td {
+    width: 33%; // Needed to prevent size jumping as values dynamically update
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  tbody tr {
+    &:hover {
+      background: $colorItemTreeHoverBg;
+    }
+  }
+
+  td {
+    user-select: none; // Table supports context-click to display Actions menu, don't allow text selection.
+
+    &.is-stale {
+      @include isStaleElement();
+    }
+  }
 }
 
 /************************************** TABLE AND SUMMARY VIEWS */
 // Displays summary values above a table.
 
 .c-table-and-summary {
-    height: 100%;
-    width: 100%;
-    overflow: auto;
-    display: flex;
-    flex-direction: column;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
 
-    > * + * { margin-top: $interiorMargin; }
+  > * + * {
+    margin-top: $interiorMargin;
+  }
 
-    &__summary {
-        display: flex;
-        justify-items: stretch;
+  &__summary {
+    display: flex;
+    justify-items: stretch;
 
-        > * + * { margin-left: 1px; }
+    > * + * {
+      margin-left: 1px;
     }
+  }
 
-    &__summary-item {
-        background: $colorSummaryBg;
-        color: $colorSummaryFg;
-        flex: 1 1 auto;
-        padding: $interiorMargin $interiorMarginLg;
+  &__summary-item {
+    background: $colorSummaryBg;
+    color: $colorSummaryFg;
+    flex: 1 1 auto;
+    padding: $interiorMargin $interiorMarginLg;
 
-        em {
-            font-weight: bold;
-            color: $colorSummaryFgEm;
-        }
+    em {
+      font-weight: bold;
+      color: $colorSummaryFgEm;
     }
+  }
 }
diff --git a/src/styles/fonts/Open MCT Symbols 12px.json b/src/styles/fonts/Open MCT Symbols 12px.json
index 7bd655c4927..24c66de80c6 100755
--- a/src/styles/fonts/Open MCT Symbols 12px.json	
+++ b/src/styles/fonts/Open MCT Symbols 12px.json	
@@ -75,9 +75,7 @@
           ],
           "attrs": [],
           "grid": 0,
-          "tags": [
-            "icon12-filter"
-          ]
+          "tags": ["icon12-filter"]
         },
         {
           "id": 11,
@@ -86,9 +84,7 @@
           ],
           "attrs": [],
           "grid": 0,
-          "tags": [
-            "icon12-filter-outline"
-          ]
+          "tags": ["icon12-filter-outline"]
         },
         {
           "id": 6,
@@ -100,9 +96,7 @@
           ],
           "attrs": [],
           "grid": 0,
-          "tags": [
-            "icon12-crosshair"
-          ]
+          "tags": ["icon12-crosshair"]
         },
         {
           "id": 8,
@@ -121,9 +115,7 @@
           "attrs": [],
           "width": 745,
           "grid": 0,
-          "tags": [
-            "icon12-grippy"
-          ]
+          "tags": ["icon12-grippy"]
         },
         {
           "id": 7,
@@ -134,9 +126,7 @@
           ],
           "attrs": [],
           "grid": 0,
-          "tags": [
-            "icon12-list-view"
-          ]
+          "tags": ["icon12-list-view"]
         },
         {
           "id": 3,
@@ -146,9 +136,7 @@
           ],
           "attrs": [],
           "grid": 0,
-          "tags": [
-            "icon12-folder"
-          ]
+          "tags": ["icon12-folder"]
         }
       ],
       "invisible": false,
@@ -192,4 +180,4 @@
     "gridSize": 16
   },
   "uid": -1
-}
\ No newline at end of file
+}
diff --git a/src/styles/fonts/Open MCT Symbols 16px.json b/src/styles/fonts/Open MCT Symbols 16px.json
old mode 100755
new mode 100644
index 416ddff3254..5f4e667125f
--- a/src/styles/fonts/Open MCT Symbols 16px.json	
+++ b/src/styles/fonts/Open MCT Symbols 16px.json	
@@ -2,7 +2,7 @@
   "metadata": {
     "name": "Open MCT Symbols 16px",
     "lastOpened": 0,
-    "created": 1621648023886
+    "created": 1674103729548
   },
   "iconSets": [
     {
@@ -11,7 +11,7 @@
           "order": 77,
           "id": 47,
           "name": "icon-alert-rect-v2",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59648,
           "tempChar": ""
         },
@@ -19,7 +19,7 @@
           "order": 76,
           "id": 48,
           "name": "icon-alert-triangle-v2",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59649,
           "tempChar": ""
         },
@@ -27,7 +27,7 @@
           "order": 20,
           "id": 112,
           "name": "icon-arrow-up",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59650,
           "tempChar": ""
         },
@@ -35,7 +35,7 @@
           "order": 36,
           "id": 94,
           "name": "icon-arrow-double-up",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59651,
           "tempChar": ""
         },
@@ -43,7 +43,7 @@
           "order": 143,
           "id": 96,
           "name": "icon-arrow-tall-up",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59652,
           "tempChar": ""
         },
@@ -51,7 +51,7 @@
           "order": 21,
           "id": 111,
           "name": "icon-arrow-right",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59653,
           "tempChar": ""
         },
@@ -59,7 +59,7 @@
           "order": 102,
           "id": 18,
           "name": "icon-arrow-right-equilateral",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59654,
           "tempChar": ""
         },
@@ -67,7 +67,7 @@
           "order": 19,
           "id": 113,
           "name": "icon-arrow-down",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59655,
           "tempChar": ""
         },
@@ -75,7 +75,7 @@
           "order": 37,
           "id": 93,
           "name": "icon-arrow-double-down",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59656,
           "tempChar": ""
         },
@@ -83,7 +83,7 @@
           "order": 35,
           "id": 95,
           "name": "icon-arrow-tall-down",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59657,
           "tempChar": ""
         },
@@ -91,7 +91,7 @@
           "order": 18,
           "id": 114,
           "name": "icon-arrow-left",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59658,
           "tempChar": ""
         },
@@ -99,7 +99,7 @@
           "order": 17,
           "id": 115,
           "name": "icon-asterisk",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59659,
           "tempChar": ""
         },
@@ -107,7 +107,7 @@
           "order": 128,
           "id": 59,
           "name": "icon-bell",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59660,
           "tempChar": ""
         },
@@ -115,7 +115,7 @@
           "order": 123,
           "id": 103,
           "name": "icon-box-round-corners",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59661,
           "tempChar": ""
         },
@@ -123,7 +123,7 @@
           "order": 129,
           "id": 58,
           "name": "icon-box-with-arrow-cursor",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59662,
           "tempChar": ""
         },
@@ -131,7 +131,7 @@
           "order": 142,
           "id": 120,
           "name": "icon-check",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59663,
           "tempChar": ""
         },
@@ -139,7 +139,7 @@
           "order": 25,
           "id": 107,
           "name": "icon-connectivity",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59664,
           "tempChar": ""
         },
@@ -147,7 +147,7 @@
           "order": 44,
           "id": 84,
           "name": "icon-database-in-brackets",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59665,
           "tempChar": ""
         },
@@ -155,7 +155,7 @@
           "order": 75,
           "id": 49,
           "name": "icon-eye-open",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59666,
           "tempChar": ""
         },
@@ -163,7 +163,7 @@
           "order": 5,
           "id": 129,
           "name": "icon-gear",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59667,
           "tempChar": ""
         },
@@ -171,7 +171,7 @@
           "order": 66,
           "id": 60,
           "name": "icon-hourglass",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59668,
           "tempChar": ""
         },
@@ -179,7 +179,7 @@
           "order": 65,
           "id": 61,
           "name": "icon-info",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59669,
           "tempChar": ""
         },
@@ -187,7 +187,7 @@
           "order": 53,
           "id": 75,
           "name": "icon-link",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59670,
           "tempChar": ""
         },
@@ -195,7 +195,7 @@
           "order": 42,
           "id": 86,
           "name": "icon-lock",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59671,
           "tempChar": ""
         },
@@ -203,7 +203,7 @@
           "order": 49,
           "id": 79,
           "name": "icon-minus",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59672,
           "tempChar": ""
         },
@@ -211,7 +211,7 @@
           "order": 22,
           "id": 110,
           "name": "icon-people",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59673,
           "tempChar": ""
         },
@@ -219,7 +219,7 @@
           "order": 46,
           "id": 82,
           "name": "icon-person",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59674,
           "tempChar": ""
         },
@@ -227,7 +227,7 @@
           "order": 38,
           "id": 92,
           "name": "icon-plus",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59675,
           "tempChar": ""
         },
@@ -235,7 +235,7 @@
           "order": 164,
           "id": 137,
           "name": "icon-plus-in-rect",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59676,
           "tempChar": ""
         },
@@ -243,7 +243,7 @@
           "order": 6,
           "id": 128,
           "name": "icon-trash",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59677,
           "tempChar": ""
         },
@@ -251,7 +251,7 @@
           "order": 140,
           "id": 122,
           "name": "icon-x-heavy",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59678,
           "tempChar": ""
         },
@@ -259,7 +259,7 @@
           "order": 78,
           "id": 46,
           "name": "icon-brackets",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59679,
           "tempChar": ""
         },
@@ -267,7 +267,7 @@
           "order": 93,
           "id": 27,
           "name": "icon-crosshair",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59680,
           "tempChar": ""
         },
@@ -275,7 +275,7 @@
           "order": 91,
           "id": 31,
           "name": "icon-grippy",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59681,
           "tempChar": ""
         },
@@ -283,7 +283,7 @@
           "order": 121,
           "id": 118,
           "name": "icon-grid",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59682,
           "tempChar": ""
         },
@@ -291,7 +291,7 @@
           "order": 154,
           "id": 136,
           "name": "icon-grippy-ew",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59683,
           "tempChar": ""
         },
@@ -299,7 +299,7 @@
           "order": 152,
           "id": 135,
           "name": "icon-columns",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59684,
           "tempChar": ""
         },
@@ -307,7 +307,7 @@
           "order": 153,
           "id": 134,
           "name": "icon-rows",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59685,
           "tempChar": ""
         },
@@ -315,7 +315,7 @@
           "order": 162,
           "id": 140,
           "name": "icon-filter",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59686,
           "tempChar": ""
         },
@@ -323,7 +323,7 @@
           "order": 161,
           "id": 139,
           "name": "icon-filter-outline",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59687,
           "tempChar": ""
         },
@@ -331,7 +331,7 @@
           "order": 155,
           "id": 142,
           "name": "icon-suitcase",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59688,
           "tempChar": ""
         },
@@ -339,7 +339,7 @@
           "order": 169,
           "id": 145,
           "name": "icon-cursor-locked",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59689,
           "tempChar": ""
         },
@@ -347,7 +347,7 @@
           "order": 176,
           "id": 150,
           "name": "icon-flag",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59690,
           "tempChar": ""
         },
@@ -355,7 +355,7 @@
           "order": 177,
           "id": 152,
           "name": "icon-eye-disabled",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59691,
           "tempChar": ""
         },
@@ -363,7 +363,7 @@
           "order": 179,
           "id": 153,
           "name": "icon-notebook-page",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59692,
           "tempChar": ""
         },
@@ -371,833 +371,969 @@
           "order": 186,
           "id": 160,
           "name": "icon-unlocked",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59693,
           "tempChar": ""
         },
+        {
+          "order": 197,
+          "id": 169,
+          "name": "icon-circle",
+          "prevSize": 16,
+          "code": 59694,
+          "tempChar": ""
+        },
+        {
+          "order": 201,
+          "id": 173,
+          "name": "icon-draft",
+          "prevSize": 16,
+          "code": 59695,
+          "tempChar": ""
+        },
+        {
+          "order": 212,
+          "id": 183,
+          "name": "icon-circle-slash",
+          "prevSize": 16,
+          "code": 59696,
+          "tempChar": ""
+        },
+        {
+          "order": 213,
+          "id": 182,
+          "name": "icon-question-mark",
+          "prevSize": 16,
+          "code": 59697,
+          "tempChar": ""
+        },
+        {
+          "order": 206,
+          "id": 179,
+          "name": "icon-status-poll-check",
+          "prevSize": 16,
+          "code": 59698,
+          "tempChar": ""
+        },
+        {
+          "order": 207,
+          "id": 178,
+          "name": "icon-status-poll-caution",
+          "prevSize": 16,
+          "code": 59699,
+          "tempChar": ""
+        },
+        {
+          "order": 210,
+          "id": 180,
+          "name": "icon-status-poll-circle-slash",
+          "prevSize": 16,
+          "code": 59700,
+          "tempChar": ""
+        },
+        {
+          "order": 211,
+          "id": 181,
+          "name": "icon-status-poll-question-mark",
+          "prevSize": 16,
+          "code": 59701,
+          "tempChar": ""
+        },
+        {
+          "order": 209,
+          "id": 176,
+          "name": "icon-status-poll-edit",
+          "prevSize": 16,
+          "code": 59702,
+          "tempChar": ""
+        },
+        {
+          "order": 215,
+          "id": 185,
+          "name": "icon-stale",
+          "prevSize": 16,
+          "code": 59703,
+          "tempChar": ""
+        },
         {
           "order": 27,
           "id": 105,
           "name": "icon-arrows-right-left",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59904,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 26,
           "id": 106,
           "name": "icon-arrows-up-down",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59905,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 68,
           "id": 56,
           "name": "icon-bullet",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59906,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 150,
           "id": 133,
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59907,
           "name": "icon-calendar",
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 45,
           "id": 83,
           "name": "icon-chain-links",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59908,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 73,
           "id": 51,
           "name": "icon-download",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59909,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 39,
           "id": 91,
           "name": "icon-duplicate",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59910,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 50,
           "id": 78,
           "name": "icon-folder-new",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59911,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 138,
           "id": 124,
           "name": "icon-fullscreen-collapse",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59912,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 139,
           "id": 123,
           "name": "icon-fullscreen-expand",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59913,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 122,
           "id": 104,
           "name": "icon-layers",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59914,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 151,
           "id": 102,
           "name": "icon-line-horz",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59915,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 100,
           "id": 20,
           "name": "icon-magnify",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59916,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 99,
           "id": 21,
           "name": "icon-magnify-in",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59917,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 101,
           "id": 19,
           "name": "icon-magnify-out-v2",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59918,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 103,
           "id": 17,
           "name": "icon-menu",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59919,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 124,
           "id": 89,
           "name": "icon-move",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59920,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 7,
           "id": 127,
           "name": "icon-new-window",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59921,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 63,
           "id": 63,
           "name": "icon-paint-bucket-v2",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59922,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 15,
           "id": 117,
           "name": "icon-pencil",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59923,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 54,
           "id": 72,
           "name": "icon-pencil-edit-in-place",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59924,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 40,
           "id": 90,
           "name": "icon-play",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59925,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 125,
           "id": 88,
           "name": "icon-pause",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59926,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 119,
           "id": 13,
           "name": "icon-plot-resource",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59927,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 48,
           "id": 80,
           "name": "icon-pointer-left",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59928,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 47,
           "id": 81,
           "name": "icon-pointer-right",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59929,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 85,
           "id": 37,
           "name": "icon-refresh",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59930,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 55,
           "id": 71,
           "name": "icon-save",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59931,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 56,
           "id": 70,
           "name": "icon-save-as",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59932,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 58,
           "id": 68,
           "name": "icon-sine",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59933,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 113,
           "id": 5,
           "name": "icon-font",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59934,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 41,
           "id": 87,
           "name": "icon-thumbs-strip",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59935,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 146,
           "id": 99,
           "name": "icon-two-parts-both",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59936,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 145,
           "id": 98,
           "name": "icon-two-parts-one-only",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59937,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 82,
           "id": 40,
           "name": "icon-resync",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59938,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 86,
           "id": 36,
           "name": "icon-reset",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59939,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 61,
           "id": 65,
           "name": "icon-x-in-circle",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59940,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 84,
           "id": 38,
           "name": "icon-brightness",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59941,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 83,
           "id": 39,
           "name": "icon-contrast",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59942,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 87,
           "id": 35,
           "name": "icon-expand",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59943,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 89,
           "id": 33,
           "name": "icon-list-view",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59944,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 133,
           "id": 28,
           "name": "icon-grid-snap-to",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59945,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 132,
           "id": 29,
           "name": "icon-grid-snap-no",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59946,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 94,
           "id": 26,
           "name": "icon-frame-show",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59947,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 95,
           "id": 25,
           "name": "icon-frame-hide",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59948,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 97,
           "id": 23,
           "name": "icon-import",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59949,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 96,
           "id": 24,
           "name": "icon-export",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59950,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 194,
           "id": 4,
           "name": "icon-font-size",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59951,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 163,
           "id": 141,
           "name": "icon-clear-data",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59952,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 173,
           "id": 149,
           "name": "icon-history",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59953,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 181,
           "id": 158,
           "name": "icon-arrow-up-to-parent",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59954,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 184,
           "id": 159,
           "name": "icon-crosshair-in-circle",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59955,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 185,
           "id": 161,
           "name": "icon-target",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59956,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 187,
           "id": 163,
           "name": "icon-items-collapse",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59957,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 188,
           "id": 162,
           "name": "icon-items-expand",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59958,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 190,
           "id": 164,
           "name": "icon-3-dots",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59959,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 193,
           "id": 165,
           "name": "icon-grid-on",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59960,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 192,
           "id": 166,
           "name": "icon-grid-off",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59961,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 191,
           "id": 167,
           "name": "icon-camera",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59962,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 196,
           "id": 168,
           "name": "icon-folders-collapse",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 59963,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 144,
           "id": 97,
           "name": "icon-activity",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60160,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 104,
           "id": 16,
           "name": "icon-activity-mode",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60161,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 137,
           "id": 125,
           "name": "icon-autoflow-tabular",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60162,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 115,
           "id": 3,
           "name": "icon-clock",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60163,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 2,
           "id": 132,
           "name": "icon-database",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60164,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 3,
           "id": 131,
           "name": "icon-database-query",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60165,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 67,
           "id": 57,
           "name": "icon-dataset",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60166,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 59,
           "id": 67,
           "name": "icon-datatable",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60167,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 136,
           "id": 126,
           "name": "icon-dictionary",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60168,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 51,
           "id": 77,
           "name": "icon-folder",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60169,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 147,
           "id": 100,
           "name": "icon-image",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60170,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 4,
           "id": 130,
           "name": "icon-layout",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60171,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 24,
           "id": 108,
           "name": "icon-object",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60172,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 52,
           "id": 76,
           "name": "icon-object-unknown",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60173,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 105,
           "id": 15,
           "name": "icon-packet",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60174,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 126,
           "id": 74,
           "name": "icon-page",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60175,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 130,
           "id": 44,
           "name": "icon-plot-overlay",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60176,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 80,
           "id": 42,
           "name": "icon-plot-stacked",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60177,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 134,
           "id": 14,
           "name": "icon-session",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60178,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 109,
           "id": 9,
           "name": "icon-tabular",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60179,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 107,
           "id": 11,
           "name": "icon-tabular-lad",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60180,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 106,
           "id": 12,
           "name": "icon-tabular-lad-set",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60181,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 70,
           "id": 54,
           "name": "icon-tabular-realtime",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60182,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 60,
           "id": 66,
           "name": "icon-tabular-scrolling",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60183,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 131,
           "id": 43,
           "name": "icon-telemetry",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60184,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
-          "order": 108,
+          "order": 202,
           "id": 10,
           "name": "icon-timeline",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60185,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 81,
           "id": 41,
           "name": "icon-timer",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60186,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 69,
           "id": 55,
           "name": "icon-topic",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60187,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 79,
           "id": 45,
           "name": "icon-box-with-dashed-lines-v2",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60188,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 90,
           "id": 32,
           "name": "icon-summary-widget",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60189,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 92,
           "id": 30,
           "name": "icon-notebook",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60190,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 168,
           "id": 0,
           "name": "icon-tabs-view",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60191,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 117,
           "id": 1,
           "name": "icon-flexible-layout",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60192,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 166,
           "id": 144,
           "name": "icon-generator-sine",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60193,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 167,
           "id": 143,
           "name": "icon-generator-event",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60194,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 165,
           "id": 138,
           "name": "icon-gauge-v2",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60195,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 170,
           "id": 148,
           "name": "icon-spectra",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60196,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 171,
           "id": 147,
           "name": "icon-telemetry-spectra",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60197,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 172,
           "id": 146,
           "name": "icon-pushbutton",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60198,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 174,
           "id": 151,
           "name": "icon-conditional",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60199,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 178,
           "id": 154,
           "name": "icon-condition-widget",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60200,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 180,
           "id": 155,
           "name": "icon-alphanumeric",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60201,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 183,
           "id": 156,
           "name": "icon-image-telemetry",
-          "prevSize": 24,
+          "prevSize": 16,
           "code": 60202,
-          "tempChar": ""
+          "tempChar": ""
+        },
+        {
+          "order": 198,
+          "id": 170,
+          "name": "icon-telemetry-aggregate",
+          "prevSize": 16,
+          "code": 60203,
+          "tempChar": ""
+        },
+        {
+          "order": 199,
+          "id": 172,
+          "name": "icon-bar-graph",
+          "prevSize": 16,
+          "code": 60204,
+          "tempChar": ""
+        },
+        {
+          "order": 200,
+          "id": 171,
+          "name": "icon-map",
+          "prevSize": 16,
+          "code": 60205,
+          "tempChar": ""
+        },
+        {
+          "order": 203,
+          "id": 174,
+          "name": "icon-plan",
+          "prevSize": 16,
+          "code": 60206,
+          "tempChar": ""
+        },
+        {
+          "order": 204,
+          "id": 175,
+          "name": "icon-timelist",
+          "prevSize": 16,
+          "code": 60207,
+          "tempChar": ""
+        },
+        {
+          "order": 205,
+          "id": 176,
+          "name": "icon-plot-scatter",
+          "prevSize": 16,
+          "code": 60208,
+          "tempChar": ""
+        },
+        {
+          "order": 214,
+          "id": 184,
+          "name": "icon-notebook-restricted",
+          "prevSize": 16,
+          "code": 60209,
+          "tempChar": ""
         }
       ],
       "id": 0,
@@ -1210,7 +1346,7 @@
         "designer": "Charles Hacskaylo"
       },
       "height": 1024,
-      "prevSize": 24,
+      "prevSize": 16,
       "icons": [
         {
           "id": 47,
@@ -1219,9 +1355,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-alert-rect-v2"
-          ],
+          "tags": ["icon-alert-rect-v2"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -1233,137 +1367,97 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-alert-triangle-v2"
-          ],
+          "tags": ["icon-alert-triangle-v2"],
           "colorPermutations": {
             "12552552551": []
           }
         },
         {
           "id": 112,
-          "paths": [
-            "M512 256l-512 512h1024z"
-          ],
+          "paths": ["M512 256l-512 512h1024z"],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-arrow-up"
-          ],
+          "tags": ["icon-arrow-up"],
           "colorPermutations": {
             "12552552551": []
           }
         },
         {
           "id": 94,
-          "paths": [
-            "M510 510l512 512h-1024z",
-            "M510-2l512 512h-1024z"
-          ],
+          "paths": ["M510 510l512 512h-1024z", "M510-2l512 512h-1024z"],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-arrow-double-up"
-          ],
+          "tags": ["icon-arrow-double-up"],
           "colorPermutations": {
             "12552552551": []
           }
         },
         {
           "id": 96,
-          "paths": [
-            "M512 0l512 1024h-1024z"
-          ],
+          "paths": ["M512 0l512 1024h-1024z"],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-arrow-tall-up"
-          ],
+          "tags": ["icon-arrow-tall-up"],
           "colorPermutations": {
             "12552552551": []
           }
         },
         {
           "id": 111,
-          "paths": [
-            "M768 512l-512-512v1024z"
-          ],
+          "paths": ["M768 512l-512-512v1024z"],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-arrow-right"
-          ],
+          "tags": ["icon-arrow-right"],
           "colorPermutations": {
             "12552552551": []
           }
         },
         {
           "id": 18,
-          "paths": [
-            "M962 512l-896 512v-1024z"
-          ],
+          "paths": ["M962 512l-896 512v-1024z"],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-arrow-right-equilateral"
-          ],
+          "tags": ["icon-arrow-right-equilateral"],
           "colorPermutations": {
             "12552552551": []
           }
         },
         {
           "id": 113,
-          "paths": [
-            "M512 768l512-512h-1024z"
-          ],
+          "paths": ["M512 768l512-512h-1024z"],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-arrow-down"
-          ],
+          "tags": ["icon-arrow-down"],
           "colorPermutations": {
             "12552552551": []
           }
         },
         {
           "id": 93,
-          "paths": [
-            "M510 510l-512-512h1024z",
-            "M510 1022l-512-512h1024z"
-          ],
+          "paths": ["M510 510l-512-512h1024z", "M510 1022l-512-512h1024z"],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-arrow-double-down"
-          ],
+          "tags": ["icon-arrow-double-down"],
           "colorPermutations": {
             "12552552551": []
           }
         },
         {
           "id": 95,
-          "paths": [
-            "M512 1024l-512-1024h1024z"
-          ],
+          "paths": ["M512 1024l-512-1024h1024z"],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-arrow-tall-down"
-          ],
+          "tags": ["icon-arrow-tall-down"],
           "colorPermutations": {
             "12552552551": []
           }
         },
         {
           "id": 114,
-          "paths": [
-            "M256 512l512 512v-1024z"
-          ],
+          "paths": ["M256 512l512 512v-1024z"],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-arrow-left"
-          ],
+          "tags": ["icon-arrow-left"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -1375,9 +1469,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-asterisk"
-          ],
+          "tags": ["icon-asterisk"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -1390,9 +1482,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-bell"
-          ],
+          "tags": ["icon-bell"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -1404,9 +1494,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-box-round-corners"
-          ],
+          "tags": ["icon-box-round-corners"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -1419,23 +1507,17 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-box-with-arrow-cursor"
-          ],
+          "tags": ["icon-box-with-arrow-cursor"],
           "colorPermutations": {
             "12552552551": []
           }
         },
         {
           "id": 120,
-          "paths": [
-            "M1024 0l-640 640-384-384v384l384 384 640-640z"
-          ],
+          "paths": ["M1024 0l-640 640-384-384v384l384 384 640-640z"],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-check"
-          ],
+          "tags": ["icon-check"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -1449,9 +1531,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-connectivity"
-          ],
+          "tags": ["icon-connectivity"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -1466,9 +1546,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-database-in-brackets"
-          ],
+          "tags": ["icon-database-in-brackets"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -1481,9 +1559,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-eye-open-v2"
-          ],
+          "tags": ["icon-eye-open-v2"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -1495,9 +1571,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-gear"
-          ],
+          "tags": ["icon-gear"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -1510,9 +1584,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-hourglass"
-          ],
+          "tags": ["icon-hourglass"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -1524,23 +1596,17 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-info"
-          ],
+          "tags": ["icon-info"],
           "colorPermutations": {
             "12552552551": []
           }
         },
         {
           "id": 75,
-          "paths": [
-            "M1024 512l-512-512v307.2l-512 204.8v256h512v256z"
-          ],
+          "paths": ["M1024 512l-512-512v307.2l-512 204.8v256h512v256z"],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-link-v2"
-          ],
+          "tags": ["icon-link-v2"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -1550,19 +1616,13 @@
           "paths": [
             "M702 384h-62v-128c0-141.385-114.615-256-256-256s-256 114.615-256 256v0 128h-64c-35.301 0.113-63.887 28.699-64 63.989v512.011c0.113 35.301 28.699 63.887 63.989 64h638.011c35.301-0.113 63.887-28.699 64-63.989v-512.011c-0.113-35.301-28.699-63.887-63.989-64h-0.011zM256 384v-128c0-70.692 57.308-128 128-128s128 57.308 128 128v0 128z"
           ],
-          "attrs": [
-            {}
-          ],
+          "attrs": [{}],
           "grid": 16,
-          "tags": [
-            "icon-lock"
-          ],
+          "tags": ["icon-lock"],
           "isMulticolor": false,
           "isMulticolor2": false,
           "colorPermutations": {
-            "12552552551": [
-              {}
-            ]
+            "12552552551": [{}]
           },
           "width": 768
         },
@@ -1573,9 +1633,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-minus"
-          ],
+          "tags": ["icon-minus"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -1590,9 +1648,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-people"
-          ],
+          "tags": ["icon-people"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -1605,9 +1661,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-person"
-          ],
+          "tags": ["icon-person"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -1619,9 +1673,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-plus"
-          ],
+          "tags": ["icon-plus"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -1631,19 +1683,13 @@
           "paths": [
             "M830 0h-636c-106.6 0-194 87.2-194 194v636c0 106.8 87.4 194 194 194h636c106.6 0 194-87.2 194-194v-636c0-106.8-87.4-194-194-194zM896 608c0 17.673-14.327 32-32 32v0h-224v224c0 17.673-14.327 32-32 32v0h-192c-17.673 0-32-14.327-32-32v0-224h-224c-17.673 0-32-14.327-32-32v0-192c0-17.673 14.327-32 32-32v0h224v-224c0-17.673 14.327-32 32-32v0h192c17.673 0 32 14.327 32 32v0 224h224c17.673 0 32 14.327 32 32v0z"
           ],
-          "attrs": [
-            {}
-          ],
+          "attrs": [{}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-plus-in-rect"
-          ],
+          "tags": ["icon-plus-in-rect"],
           "colorPermutations": {
-            "12552552551": [
-              {}
-            ]
+            "12552552551": [{}]
           }
         },
         {
@@ -1653,9 +1699,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-trash"
-          ],
+          "tags": ["icon-trash"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -1667,9 +1711,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-x-heavy"
-          ],
+          "tags": ["icon-x-heavy"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -1682,9 +1724,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-brackets"
-          ],
+          "tags": ["icon-brackets"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -1699,9 +1739,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-crosshair"
-          ],
+          "tags": ["icon-crosshair"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -1725,9 +1763,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-grippy-v2"
-          ],
+          "tags": ["icon-grippy-v2"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -1742,9 +1778,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-grid-v2"
-          ],
+          "tags": ["icon-grid-v2"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -1756,23 +1790,13 @@
             "M448 0h128v1024h-128v-1024z",
             "M192 0h128v1024h-128v-1024z"
           ],
-          "attrs": [
-            {},
-            {},
-            {}
-          ],
+          "attrs": [{}, {}, {}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-grippy-ew"
-          ],
+          "tags": ["icon-grippy-ew"],
           "colorPermutations": {
-            "12552552551": [
-              {},
-              {},
-              {}
-            ]
+            "12552552551": [{}, {}, {}]
           }
         },
         {
@@ -1782,23 +1806,13 @@
             "M384 0h256v1024h-256v-1024z",
             "M768 0h256v1024h-256v-1024z"
           ],
-          "attrs": [
-            {},
-            {},
-            {}
-          ],
+          "attrs": [{}, {}, {}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-columns"
-          ],
+          "tags": ["icon-columns"],
           "colorPermutations": {
-            "12552552551": [
-              {},
-              {},
-              {}
-            ]
+            "12552552551": [{}, {}, {}]
           }
         },
         {
@@ -1808,224 +1822,295 @@
             "M0 384h1024v256h-1024v-256z",
             "M0 768h1024v256h-1024v-256z"
           ],
-          "attrs": [
-            {},
-            {},
-            {}
+          "attrs": [{}, {}, {}],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 16,
+          "tags": ["icon-rows"],
+          "colorPermutations": {
+            "12552552551": [{}, {}, {}]
+          }
+        },
+        {
+          "id": 140,
+          "paths": [
+            "M896 0h-768c-70.601 0.227-127.773 57.399-128 127.978l-0 0.022v768c0.227 70.601 57.399 127.773 127.978 128l0.022 0h256v-512l-192-192h640l-192 192v512h256c70.601-0.227 127.773-57.399 128-127.978l0-0.022v-768c-0.227-70.601-57.399-127.773-127.978-128l-0.022-0z"
+          ],
+          "attrs": [{}],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 16,
+          "tags": ["icon-filter"],
+          "colorPermutations": {
+            "12552552551": [{}]
+          }
+        },
+        {
+          "id": 139,
+          "paths": [
+            "M896 0h-768c-70.601 0.227-127.773 57.399-128 127.978l-0 0.022v768c0.227 70.601 57.399 127.773 127.978 128l0.022 0h768c70.601-0.227 127.773-57.399 128-127.978l0-0.022v-768c-0.227-70.601-57.399-127.773-127.978-128l-0.022-0zM896 895.8h-256v-383.8l192-192h-640l192 192v384h-256v-767.8h768z"
+          ],
+          "attrs": [{}],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 16,
+          "tags": ["icon-filter-outline"],
+          "colorPermutations": {
+            "12552552551": [{}]
+          }
+        },
+        {
+          "id": 142,
+          "paths": [
+            "M768 128c-0.080-70.66-57.34-127.92-127.993-128l-256.007-0c-70.66 0.080-127.92 57.34-128 127.993l-0 0.007v128h-64v768h640v-768h-64zM384 128.12l0.12-0.12 255.88 0.12v127.88h-256z",
+            "M0 320v640c0.102 35.305 28.695 63.898 63.99 64l0.010 0h64v-768h-64c-35.305 0.102-63.898 28.695-64 63.99l-0 0.010z",
+            "M960 256h-64v768h64c35.305-0.102 63.898-28.695 64-63.99l0-0.010v-640c-0.102-35.305-28.695-63.898-63.99-64l-0.010-0z"
+          ],
+          "attrs": [{}, {}, {}],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 16,
+          "tags": ["icon-suitcase"],
+          "colorPermutations": {
+            "12552552551": [{}, {}, {}]
+          }
+        },
+        {
+          "id": 145,
+          "paths": [
+            "M704 320h-64v-64c0-141.385-114.615-256-256-256s-256 114.615-256 256v0 64h-64c-35.301 0.113-63.887 28.699-64 63.989l-0 0.011v576c0.113 35.301 28.699 63.887 63.989 64l0.011 0h640c35.301-0.113 63.887-28.699 64-63.989l0-0.011v-576c-0.113-35.301-28.699-63.887-63.989-64l-0.011-0zM256 256c0-70.692 57.308-128 128-128s128 57.308 128 128v0 64h-256zM533.4 896l-128-128-43 85-170.4-383.6 383.6 170.2-85 43 128 128z"
+          ],
+          "attrs": [{}],
+          "width": 768,
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 16,
+          "tags": ["icon-cursor-locked"],
+          "colorPermutations": {
+            "12552552551": [{}]
+          }
+        },
+        {
+          "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,
+          "colorPermutations": {
+            "12552552551": [{}]
+          }
+        },
+        {
+          "id": 152,
+          "paths": [
+            "M209.46 608.68q-7.46-9.86-14.26-20.28c-14.737-21.984-27.741-47.184-37.759-73.847l-0.841-2.553c11.078-29.259 24.068-54.443 39.51-77.869l-0.91 1.469c23.221-34.963 50.705-64.8 82.207-89.793l0.793-0.607c57.663-45.719 130.179-75.053 209.311-79.947l1.069-0.053 114.48-140.88c-27.366-5.017-58.869-7.898-91.041-7.92l-0.019-0c-245.8 0-452.2 168-510.8 395.6 21.856 82.93 60.906 154.847 113.325 214.773l-0.525-0.613z",
+            "M814.76 415.080q7.52 10 14.44 20.52c14.737 21.984 27.741 47.184 37.759 73.847l0.841 2.553c-10.859 29.216-23.863 54.416-39.447 77.748l0.847-1.348c-23.221 34.963-50.705 64.8-82.207 89.793l-0.793 0.607c-57.762 45.834-130.437 75.216-209.743 80.049l-1.057 0.051-114.46 140.86c27.346 4.988 58.817 7.84 90.955 7.84 0.037 0 0.074-0 0.111-0l-0.005 0c245.8 0 452.2-168 510.8-395.6-21.856-82.93-60.906-154.847-113.325-214.773l0.525 0.613z",
+            "M832 0l-832 1024h192l832-1024h-192z"
+          ],
+          "attrs": [{}, {}, {}],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 16,
+          "tags": ["icon-eye-disabled"],
+          "colorPermutations": {
+            "12552552551": [{}, {}, {}]
+          }
+        },
+        {
+          "id": 153,
+          "paths": [
+            "M830 62h-830l-4 702c0 106.6 87.4 194 194 194h640c106.6 0 194-87.4 194-194v-508c0-106.8-87.4-194-194-194zM832 446l-384 384-192-192v-256l192 192 384-384v256z"
+          ],
+          "attrs": [{}],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 16,
+          "tags": ["icon-notebook-page"],
+          "colorPermutations": {
+            "12552552551": [{}]
+          }
+        },
+        {
+          "id": 160,
+          "paths": [
+            "M768 0c-141.339 0.114-255.886 114.661-256 255.989l-0 0.011v128h-448c-35.301 0.113-63.887 28.699-64 63.989l-0 0.011v512c0.113 35.301 28.699 63.887 63.989 64l0.011 0h638c35.301-0.113 63.887-28.699 64-63.989l0-0.011v-512c-0.113-35.301-28.699-63.887-63.989-64l-0.011-0h-62v-128c0-70.692 57.308-128 128-128s128 57.308 128 128v0 128h128v-128c-0.114-141.339-114.661-255.886-255.989-256l-0.011-0z"
+          ],
+          "attrs": [{}],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 16,
+          "tags": ["icon-unlocked"],
+          "colorPermutations": {
+            "12552552551": [{}]
+          }
+        },
+        {
+          "id": 169,
+          "paths": [
+            "M1024 512c0 282.77-229.23 512-512 512s-512-229.23-512-512c0-282.77 229.23-512 512-512s512 229.23 512 512z"
+          ],
+          "attrs": [{}],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 16,
+          "tags": ["icon-circle"],
+          "colorPermutations": {
+            "12552552551": [{}]
+          }
+        },
+        {
+          "id": 173,
+          "paths": [
+            "M876.34 635.58l-49.9 49.88-19.26 19.5-26 8.7-423.040 144.2 144.2-423.28 8.84-25.78 150-149.88-85.6-149.78c-34.92-61.12-92-61.12-127 0l-422.78 739.72c-34.94 61.14-5.92 111.14 64.48 111.14h843.44c70.4 0 99.42-50 64.48-111.14z",
+            "M973.18 242.84c-19.32-19.3-40.66-34.62-60.16-43.16-34.42-15.12-52.38-4.54-60.1 3.16l-258.12 258.12-82.8 243.040 243-82.8 3.36-3.4 254.76-254.76c4.94-4.94 10.88-13.88 10.88-28.3 0-25.34-19.5-60.56-50.82-91.9zM631 619.82l-34.88-34.86 34.64-101.6 9.24-3.36h32v64h64v32l-3.42 9.26z"
           ],
+          "attrs": [{}, {}],
+          "grid": 16,
+          "tags": ["icon-draft"],
           "isMulticolor": false,
           "isMulticolor2": false,
-          "grid": 16,
-          "tags": [
-            "icon-rows"
-          ],
           "colorPermutations": {
-            "12552552551": [
-              {},
-              {},
-              {}
-            ]
+            "12552552551": [{}, {}]
           }
         },
         {
-          "id": 140,
+          "id": 183,
           "paths": [
-            "M896 0h-768c-70.601 0.227-127.773 57.399-128 127.978l-0 0.022v768c0.227 70.601 57.399 127.773 127.978 128l0.022 0h256v-512l-192-192h640l-192 192v512h256c70.601-0.227 127.773-57.399 128-127.978l0-0.022v-768c-0.227-70.601-57.399-127.773-127.978-128l-0.022-0z"
-          ],
-          "attrs": [
-            {}
+            "M512 0c-282.78 0-512 229.22-512 512s229.22 512 512 512 512-229.22 512-512-229.22-512-512-512zM263.1 263.1c66.48-66.48 154.88-103.1 248.9-103.1 66.74 0 130.64 18.48 185.9 52.96l-484.94 484.94c-34.5-55.24-52.96-119.16-52.96-185.9 0-94.020 36.62-182.42 103.1-248.9zM760.9 760.9c-66.48 66.48-154.88 103.1-248.9 103.1-66.74 0-130.64-18.48-185.9-52.96l484.94-484.94c34.5 55.24 52.96 119.16 52.96 185.9 0 94.020-36.62 182.42-103.1 248.9z"
           ],
+          "attrs": [{}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-filter"
-          ],
+          "tags": ["icon-circle-slash"],
           "colorPermutations": {
-            "12552552551": [
-              {}
-            ]
+            "12552552551": [{}]
           }
         },
         {
-          "id": 139,
+          "id": 182,
           "paths": [
-            "M896 0h-768c-70.601 0.227-127.773 57.399-128 127.978l-0 0.022v768c0.227 70.601 57.399 127.773 127.978 128l0.022 0h768c70.601-0.227 127.773-57.399 128-127.978l0-0.022v-768c-0.227-70.601-57.399-127.773-127.978-128l-0.022-0zM896 895.8h-256v-383.8l192-192h-640l192 192v384h-256v-767.8h768z"
-          ],
-          "attrs": [
-            {}
+            "M136.86 52.26c54.080-34.82 120.58-52.26 199.44-52.26 103.6 0 189.7 24.76 258.24 74.28s102.82 122.88 102.82 220.060c0 59.6-14.86 109.8-44.58 150.6-17.38 24.76-50.76 56.4-100.14 94.9l-48.68 37.82c-26.54 20.64-44.14 44.7-52.82 72.2-5.5 17.44-8.46 44.48-8.92 81.14h-186.4c2.74-77.48 10.060-131 21.94-160.58s42.5-63.62 91.88-102.12l50.060-39.2c16.46-12.38 29.72-25.9 39.78-40.58 18.28-25.2 27.42-52.96 27.42-83.22 0-34.84-10.18-66.6-30.52-95.24-20.36-28.64-57.52-42.98-111.48-42.98s-90.68 17.66-112.88 52.96c-22.18 35.32-33.26 71.98-33.26 110.040h-198.76c5.5-130.64 51.12-223.24 136.86-277.82zM251.020 825.24h205.62v198.74h-205.62v-198.74z"
           ],
+          "attrs": [{}],
+          "width": 697,
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-filter-outline"
-          ],
+          "tags": ["icon-question-mark"],
           "colorPermutations": {
-            "12552552551": [
-              {}
-            ]
+            "12552552551": [{}]
           }
         },
         {
-          "id": 142,
+          "id": 179,
           "paths": [
-            "M768 128c-0.080-70.66-57.34-127.92-127.993-128l-256.007-0c-70.66 0.080-127.92 57.34-128 127.993l-0 0.007v128h-64v768h640v-768h-64zM384 128.12l0.12-0.12 255.88 0.12v127.88h-256z",
-            "M0 320v640c0.102 35.305 28.695 63.898 63.99 64l0.010 0h64v-768h-64c-35.305 0.102-63.898 28.695-64 63.99l-0 0.010z",
-            "M960 256h-64v768h64c35.305-0.102 63.898-28.695 64-63.99l0-0.010v-640c-0.102-35.305-28.695-63.898-63.99-64l-0.010-0z"
-          ],
-          "attrs": [
-            {},
-            {},
-            {}
+            "M512 0c-282.76 0-512 214.9-512 480 0 92.26 27.8 178.44 75.92 251.6l-75.92 292.4 313.5-101.42c61.040 24.1 128.12 37.42 198.5 37.42 282.76 0 512-214.9 512-480s-229.24-480-512-480zM768 448l-320 320-192-192v-192l192 192 320-320v192z"
           ],
+          "attrs": [{}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-suitcase"
-          ],
+          "tags": ["icon-status-poll-check"],
           "colorPermutations": {
-            "12552552551": [
-              {},
-              {},
-              {}
-            ]
+            "12552552551": [{}]
           }
         },
         {
-          "id": 145,
+          "id": 178,
           "paths": [
-            "M704 320h-64v-64c0-141.385-114.615-256-256-256s-256 114.615-256 256v0 64h-64c-35.301 0.113-63.887 28.699-64 63.989l-0 0.011v576c0.113 35.301 28.699 63.887 63.989 64l0.011 0h640c35.301-0.113 63.887-28.699 64-63.989l0-0.011v-576c-0.113-35.301-28.699-63.887-63.989-64l-0.011-0zM256 256c0-70.692 57.308-128 128-128s128 57.308 128 128v0 64h-256zM533.4 896l-128-128-43 85-170.4-383.6 383.6 170.2-85 43 128 128z"
-          ],
-          "attrs": [
-            {}
+            "M512 0c-282.76 0-512 214.9-512 480 0 92.26 27.8 178.44 75.92 251.6l-75.92 292.4 313.5-101.42c61.040 24.1 128.12 37.42 198.5 37.42 282.76 0 512-214.9 512-480s-229.24-480-512-480zM781.36 704h-538.72c-44.96 0-63.5-31.94-41.2-70.98l270-472.48c22.3-39.040 58.82-39.040 81.12 0l269.98 472.48c22.3 39.040 3.78 70.98-41.2 70.98z",
+            "M457.14 417.86l24.2 122.64h61.32l24.2-122.64v-163.5h-109.72v163.5z",
+            "M471.12 581.36h81.76v81.76h-81.76v-81.76z"
           ],
-          "width": 768,
+          "attrs": [{}, {}, {}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-cursor-locked"
-          ],
+          "tags": ["icon-status-poll-caution"],
           "colorPermutations": {
-            "12552552551": [
-              {}
-            ]
+            "12552552551": [{}, {}, {}]
           }
         },
         {
-          "id": 150,
+          "id": 180,
           "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"
+            "M391.18 668.7c35.72 22.98 77.32 35.3 120.82 35.3 59.84 0 116.080-23.3 158.4-65.6 42.3-42.3 65.6-98.56 65.6-158.4 0-43.5-12.32-85.080-35.3-120.82l-309.52 309.52z",
+            "M512 256c-59.84 0-116.080 23.3-158.4 65.6-42.3 42.3-65.6 98.56-65.6 158.4 0 43.5 12.32 85.080 35.3 120.82l309.52-309.52c-35.72-22.98-77.32-35.3-120.82-35.3z",
+            "M512 0c-282.76 0-512 214.9-512 480 0 92.26 27.8 178.44 75.92 251.6l-75.92 292.4 313.5-101.42c61.040 24.1 128.12 37.42 198.5 37.42 282.76 0 512-214.9 512-480s-229.24-480-512-480zM512 800c-176.74 0-320-143.26-320-320s143.26-320 320-320 320 143.26 320 320-143.26 320-320 320z"
           ],
+          "attrs": [{}, {}, {}],
           "isMulticolor": false,
           "isMulticolor2": false,
+          "grid": 16,
+          "tags": ["icon-status-poll-circle-slash"],
           "colorPermutations": {
-            "12552552551": [
-              {}
-            ]
+            "12552552551": [{}, {}, {}]
           }
         },
         {
-          "id": 152,
+          "id": 181,
           "paths": [
-            "M209.46 608.68q-7.46-9.86-14.26-20.28c-14.737-21.984-27.741-47.184-37.759-73.847l-0.841-2.553c11.078-29.259 24.068-54.443 39.51-77.869l-0.91 1.469c23.221-34.963 50.705-64.8 82.207-89.793l0.793-0.607c57.663-45.719 130.179-75.053 209.311-79.947l1.069-0.053 114.48-140.88c-27.366-5.017-58.869-7.898-91.041-7.92l-0.019-0c-245.8 0-452.2 168-510.8 395.6 21.856 82.93 60.906 154.847 113.325 214.773l-0.525-0.613z",
-            "M814.76 415.080q7.52 10 14.44 20.52c14.737 21.984 27.741 47.184 37.759 73.847l0.841 2.553c-10.859 29.216-23.863 54.416-39.447 77.748l0.847-1.348c-23.221 34.963-50.705 64.8-82.207 89.793l-0.793 0.607c-57.762 45.834-130.437 75.216-209.743 80.049l-1.057 0.051-114.46 140.86c27.346 4.988 58.817 7.84 90.955 7.84 0.037 0 0.074-0 0.111-0l-0.005 0c245.8 0 452.2-168 510.8-395.6-21.856-82.93-60.906-154.847-113.325-214.773l0.525 0.613z",
-            "M832 0l-832 1024h192l832-1024h-192z"
-          ],
-          "attrs": [
-            {},
-            {},
-            {}
+            "M512 0c-282.76 0-512 214.9-512 480 0 92.26 27.8 178.44 75.92 251.6l-75.92 292.4 313.5-101.42c61.040 24.1 128.12 37.42 198.5 37.42 282.76 0 512-214.9 512-480s-229.24-480-512-480zM579.020 832h-141.36v-136.64h141.36v136.64zM713.84 433.9c-11.94 17.020-34.9 38.78-68.84 65.24l-33.48 26c-18.24 14.18-30.34 30.74-36.32 49.64-3.78 11.98-5.82 30.58-6.14 55.8h-128.12c1.88-53.26 6.92-90.060 15.080-110.4 8.18-20.34 29.22-43.74 63.16-70.22l34.42-26.94c11.3-8.52 20.42-17.8 27.34-27.9 12.56-17.34 18.86-36.4 18.86-57.2 0-23.94-7-45.78-20.98-65.48-14-19.7-39.54-29.54-76.64-29.54s-62.34 12.14-77.6 36.4c-15.24 24.28-22.88 49.48-22.88 75.64h-136.64c3.78-89.84 35.14-153.5 94.080-191.020 37.18-23.94 82.9-35.94 137.12-35.94 71.22 0 130.42 17.020 177.54 51.060s70.68 84.48 70.68 151.3c0 40.98-10.22 75.5-30.66 103.54z"
           ],
+          "attrs": [{}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-eye-disabled"
-          ],
+          "tags": ["icon-status-poll-question-mark"],
           "colorPermutations": {
-            "12552552551": [
-              {},
-              {},
-              {}
-            ]
+            "12552552551": [{}]
           }
         },
         {
-          "id": 153,
+          "id": 176,
           "paths": [
-            "M830 62h-830l-4 702c0 106.6 87.4 194 194 194h640c106.6 0 194-87.4 194-194v-508c0-106.8-87.4-194-194-194zM832 446l-384 384-192-192v-256l192 192 384-384v256z"
-          ],
-          "attrs": [
-            {}
+            "M1000.080 334.64l-336.6 336.76-20.52 6.88-450.96 153.72 160.68-471.52 332.34-332.34c-54.040-18.2-112.28-28.14-173.020-28.14-282.76 0-512 214.9-512 480 0 92.26 27.8 178.44 75.92 251.6l-75.92 292.4 313.5-101.42c61.040 24.1 128.12 37.42 198.5 37.42 282.76 0 512-214.9 512-480 0-50.68-8.4-99.5-23.92-145.36z",
+            "M408.42 395.24l-2.16 6.3-111.7 327.9 334.12-113.86 4.62-4.68 350.28-350.28c6.8-6.78 14.96-19.1 14.96-38.9 0-34.86-26.82-83.28-69.88-126.38-26.54-26.54-55.9-47.6-82.7-59.34-47.34-20.8-72.020-6.24-82.64 4.36l-354.9 354.88zM470.56 421.42h44v88h88v44l-4.7 12.72-139.68 47.54-47.94-47.94 47.6-139.72 12.72-4.6z"
           ],
+          "attrs": [{}, {}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-notebook-page"
-          ],
+          "tags": ["icon-status-poll-edit"],
           "colorPermutations": {
-            "12552552551": [
-              {}
-            ]
+            "12552552551": [{}, {}]
           }
         },
         {
-          "id": 160,
+          "id": 186,
           "paths": [
-            "M768 0c-141.339 0.114-255.886 114.661-256 255.989l-0 0.011v128h-448c-35.301 0.113-63.887 28.699-64 63.989l-0 0.011v512c0.113 35.301 28.699 63.887 63.989 64l0.011 0h638c35.301-0.113 63.887-28.699 64-63.989l0-0.011v-512c-0.113-35.301-28.699-63.887-63.989-64l-0.011-0h-62v-128c0-70.692 57.308-128 128-128s128 57.308 128 128v0 128h128v-128c-0.114-141.339-114.661-255.886-255.989-256l-0.011-0z"
-          ],
-          "attrs": [
-            {}
+            "M832 0h-640c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192h640c105.6 0 192-86.4 192-192v-640c0-105.6-86.4-192-192-192zM681.38 365.14c0.68-20.46-2.22-37.7-8.7-51.68-6.5-13.98-15.7-25.4-27.64-34.28-11.94-8.86-26.1-15.18-42.48-18.94-16.38-3.74-33.78-5.62-52.2-5.62-15.020 0-30.2 1.54-45.54 4.6s-29.16 8.18-41.44 15.36-22.18 16.56-29.68 28.14c-7.52 11.62-11.26 25.94-11.26 42.98s6.66 32.6 19.96 44.52c13.3 11.94 29.34 21.84 48.1 29.68 18.76 7.86 38.020 14 57.82 18.42 19.78 4.44 35.82 8.020 48.1 10.74 28.66 7.52 54.92 16.22 78.8 26.1 23.88 9.9 44.52 22.68 61.92 38.38s30.86 34.8 40.42 57.32c9.54 22.52 14.32 50.16 14.32 82.9 0 43.68-9.040 80.86-27.12 111.56s-41.28 55.62-69.6 74.7c-28.32 19.1-60.22 32.92-95.7 41.44s-70.62 12.8-105.42 12.8c-102.34 0-178.6-20.8-228.74-62.44-50.16-41.6-75.22-107.1-75.22-196.5h152.5c-1.38 25.94 1.7 47.58 9.22 64.98 7.5 17.4 18.42 31.22 32.74 41.44 14.32 10.24 31.38 17.58 51.18 22 19.78 4.44 41.28 6.66 64.48 6.66 16.38 0 32.74-2.040 49.12-6.14s31.22-10.24 44.52-18.42c13.3-8.18 24.22-18.76 32.76-31.72 8.52-12.94 12.8-28.66 12.8-47.080s-5.46-32.24-16.38-43.5c-10.92-11.26-25.080-20.98-42.48-29.16s-37.2-15.36-59.36-21.5c-22.18-6.14-44.52-12.62-67.040-19.44-23.2-6.82-45.72-15-67.54-24.56-21.84-9.54-41.44-21.82-58.84-36.84-17.4-15-31.38-33.42-41.96-55.26-10.58-21.82-15.86-48.44-15.86-79.82 0-40.94 8.52-75.74 25.58-104.4 17.040-28.66 39.22-52.020 66.52-70.1 27.28-18.080 58.16-31.38 92.62-39.92 34.44-8.52 69.42-12.8 104.9-12.8 37.52 0 72.82 4.26 105.92 12.8 33.080 8.54 62.080 22.36 87 41.44 24.9 19.1 44.68 43.5 59.36 73.18 14.66 29.68 22 65.68 22 107.98h-152.5z"
           ],
+          "attrs": [{}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-unlocked"
-          ],
+          "tags": ["icon-stale"],
           "colorPermutations": {
-            "12552552551": [
-              {}
-            ]
+            "12552552551": [{}]
           }
         },
         {
           "id": 105,
-          "paths": [
-            "M1024 512l-448 512v-1024z",
-            "M448 0l-448 512 448 512z"
-          ],
+          "paths": ["M1024 512l-448 512v-1024z", "M448 0l-448 512 448 512z"],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-arrows-right-left"
-          ],
+          "tags": ["icon-arrows-right-left"],
           "colorPermutations": {
             "12552552551": []
           }
         },
         {
           "id": 106,
-          "paths": [
-            "M512 0l512 448h-1024z",
-            "M0 576l512 448 512-448z"
-          ],
+          "paths": ["M512 0l512 448h-1024z", "M0 576l512 448 512-448z"],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-arrows-up-down"
-          ],
+          "tags": ["icon-arrows-up-down"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2037,9 +2122,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-bullet"
-          ],
+          "tags": ["icon-bullet"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2051,9 +2134,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-calendar"
-          ],
+          "tags": ["icon-calendar"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2065,9 +2146,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-chain-links"
-          ],
+          "tags": ["icon-chain-links"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2080,9 +2159,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-download"
-          ],
+          "tags": ["icon-download"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2095,9 +2172,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-duplicate"
-          ],
+          "tags": ["icon-duplicate"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2110,9 +2185,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-folder-new-v2.5"
-          ],
+          "tags": ["icon-folder-new-v2.5"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2127,9 +2200,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-fullscreen-collapse"
-          ],
+          "tags": ["icon-fullscreen-collapse"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2144,9 +2215,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-fullscreen-expand"
-          ],
+          "tags": ["icon-fullscreen-expand"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2159,9 +2228,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-layers"
-          ],
+          "tags": ["icon-layers"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2173,9 +2240,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-line-horz"
-          ],
+          "tags": ["icon-line-horz"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2187,9 +2252,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-magnify-v2"
-          ],
+          "tags": ["icon-magnify-v2"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2203,9 +2266,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-magnify-in-v2"
-          ],
+          "tags": ["icon-magnify-in-v2"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2218,9 +2279,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-magnify-out-v2"
-          ],
+          "tags": ["icon-magnify-out-v2"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2234,9 +2293,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-menu-v2.2"
-          ],
+          "tags": ["icon-menu-v2.2"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2249,9 +2306,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-move"
-          ],
+          "tags": ["icon-move"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2264,9 +2319,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-new-window"
-          ],
+          "tags": ["icon-new-window"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2280,9 +2333,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-paint-bucket-v2"
-          ],
+          "tags": ["icon-paint-bucket-v2"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2294,9 +2345,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-pencil"
-          ],
+          "tags": ["icon-pencil"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2310,38 +2359,27 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-pencil-edit-in-place"
-          ],
+          "tags": ["icon-pencil-edit-in-place"],
           "colorPermutations": {
             "12552552551": []
           }
         },
         {
           "id": 90,
-          "paths": [
-            "M1024 512l-1024 512v-1024z"
-          ],
+          "paths": ["M1024 512l-1024 512v-1024z"],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-play"
-          ],
+          "tags": ["icon-play"],
           "colorPermutations": {
             "12552552551": []
           }
         },
         {
           "id": 88,
-          "paths": [
-            "M126-2h256v1024h-256v-1024z",
-            "M638-2h256v1024h-256v-1024z"
-          ],
+          "paths": ["M126-2h256v1024h-256v-1024z", "M638-2h256v1024h-256v-1024z"],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-pause"
-          ],
+          "tags": ["icon-pause"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2354,37 +2392,27 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-plot-resource"
-          ],
+          "tags": ["icon-plot-resource"],
           "colorPermutations": {
             "12552552551": []
           }
         },
         {
           "id": 80,
-          "paths": [
-            "M766 1024l-256-512 256-512h-256l-256 512 256 512z"
-          ],
+          "paths": ["M766 1024l-256-512 256-512h-256l-256 512 256 512z"],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-pointer-left"
-          ],
+          "tags": ["icon-pointer-left"],
           "colorPermutations": {
             "12552552551": []
           }
         },
         {
           "id": 81,
-          "paths": [
-            "M254 0l256 512-256 512h256l256-512-256-512z"
-          ],
+          "paths": ["M254 0l256 512-256 512h256l256-512-256-512z"],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-pointer-right"
-          ],
+          "tags": ["icon-pointer-right"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2396,9 +2424,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-refresh-v1.5"
-          ],
+          "tags": ["icon-refresh-v1.5"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2411,9 +2437,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-save-v2"
-          ],
+          "tags": ["icon-save-v2"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2427,9 +2451,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-save-as"
-          ],
+          "tags": ["icon-save-as"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2441,9 +2463,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-sine"
-          ],
+          "tags": ["icon-sine"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2455,9 +2475,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-font"
-          ],
+          "tags": ["icon-font"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2472,9 +2490,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-thumbs-strip"
-          ],
+          "tags": ["icon-thumbs-strip"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2486,9 +2502,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-two-parts-both"
-          ],
+          "tags": ["icon-two-parts-both"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2500,9 +2514,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-two-parts-one-only"
-          ],
+          "tags": ["icon-two-parts-one-only"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2515,9 +2527,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-resync"
-          ],
+          "tags": ["icon-resync"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2529,9 +2539,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-reset"
-          ],
+          "tags": ["icon-reset"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2543,9 +2551,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-x-in-circle"
-          ],
+          "tags": ["icon-x-in-circle"],
           "isMulticolor": false,
           "isMulticolor2": false,
           "colorPermutations": {
@@ -2567,9 +2573,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-brightness"
-          ],
+          "tags": ["icon-brightness"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2581,9 +2585,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-contrast"
-          ],
+          "tags": ["icon-contrast"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2598,9 +2600,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-expand"
-          ],
+          "tags": ["icon-expand"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2615,9 +2615,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-list-view"
-          ],
+          "tags": ["icon-list-view"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2634,9 +2632,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-grid-snap-to"
-          ],
+          "tags": ["icon-grid-snap-to"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2654,9 +2650,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-grid-snap-no"
-          ],
+          "tags": ["icon-grid-snap-no"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2669,9 +2663,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-frame-show"
-          ],
+          "tags": ["icon-frame-show"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2686,9 +2678,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-frame-hide"
-          ],
+          "tags": ["icon-frame-hide"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2701,9 +2691,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-import"
-          ],
+          "tags": ["icon-import"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2716,9 +2704,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-export"
-          ],
+          "tags": ["icon-export"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -2729,22 +2715,14 @@
             "M1226.4 320h-176l-76.22 203.24 77 205.34 87.22-232.58 90.74 242h-174.44l49.5 132h174.44l57.76 154h154l-264-704z",
             "M384 0l-384 1024h224l84-224h408l84 224h224l-384-1024zM380 608l132-352 132 352z"
           ],
-          "attrs": [
-            {},
-            {}
-          ],
+          "attrs": [{}, {}],
           "grid": 16,
-          "tags": [
-            "icon-font-size-alt1"
-          ],
+          "tags": ["icon-font-size-alt1"],
           "width": 1504,
           "isMulticolor": false,
           "isMulticolor2": false,
           "colorPermutations": {
-            "12552552551": [
-              {},
-              {}
-            ]
+            "12552552551": [{}, {}]
           }
         },
         {
@@ -2753,21 +2731,13 @@
             "M632 312l-120 120-120-120-80 80 120 120-120 120 80 80 120-120 120 120 80-80-120-120 120-120-80-80z",
             "M512 0c-282.76 0-512 86-512 192v640c0 106 229.24 192 512 192s512-86 512-192v-640c0-106-229.24-192-512-192zM512 832c-176.731 0-320-143.269-320-320s143.269-320 320-320c176.731 0 320 143.269 320 320v0c0 176.731-143.269 320-320 320v0z"
           ],
-          "attrs": [
-            {},
-            {}
-          ],
+          "attrs": [{}, {}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-clear-data"
-          ],
+          "tags": ["icon-clear-data"],
           "colorPermutations": {
-            "12552552551": [
-              {},
-              {}
-            ]
+            "12552552551": [{}, {}]
           }
         },
         {
@@ -2776,21 +2746,13 @@
             "M576 64c-247.4 0-448 200.6-448 448h-128l192 192 192-192h-128c0-85.4 33.2-165.8 93.8-226.2 60.4-60.6 140.8-93.8 226.2-93.8s165.8 33.2 226.2 93.8c60.6 60.4 93.8 140.8 93.8 226.2s-33.2 165.8-93.8 226.2c-60.4 60.6-140.8 93.8-226.2 93.8s-165.8-33.2-226.2-93.8l-90.6 90.6c81 81 193 131.2 316.8 131.2 247.4 0 448-200.6 448-448s-200.6-448-448-448z",
             "M576 272c-26.6 0-48 21.4-48 48v211.8l142 142c9.4 9.4 21.6 14 34 14s24.6-4.6 34-14c18.8-18.8 18.8-49.2 0-67.8l-114-114v-172c0-26.6-21.4-48-48-48z"
           ],
-          "attrs": [
-            {},
-            {}
-          ],
+          "attrs": [{}, {}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-history"
-          ],
+          "tags": ["icon-history"],
           "colorPermutations": {
-            "12552552551": [
-              {},
-              {}
-            ]
+            "12552552551": [{}, {}]
           }
         },
         {
@@ -2798,20 +2760,14 @@
           "paths": [
             "M643.427 825.261c-81.955-0.697-148.179-67.065-148.642-149.010l-0-0.044v-395.828l296.871 247.393v-197.914l-395.828-329.857-395.828 328.62v197.502l296.871-246.156v396.241c0 190.905 155.239 346.556 346.144 346.968l412.321 0.825 0.412-197.914z"
           ],
-          "attrs": [
-            {}
-          ],
+          "attrs": [{}],
           "width": 1056,
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-arrow-up-to-parent"
-          ],
+          "tags": ["icon-arrow-up-to-parent"],
           "colorPermutations": {
-            "12552552551": [
-              {}
-            ]
+            "12552552551": [{}]
           }
         },
         {
@@ -2819,19 +2775,13 @@
           "paths": [
             "M512 0c-282.8 0-512 229.2-512 512s229.2 512 512 512 512-229.2 512-512-229.2-512-512-512zM783.6 783.6c-54.634 54.8-125.77 93.12-205.322 106.874l-2.278 0.326v-250.8h-128v250.8c-161.302-28.062-286.738-153.497-314.468-312.5l-0.332-2.3h250.8v-128h-250.8c28.062-161.302 153.497-286.738 312.5-314.468l2.3-0.332v250.8h128v-250.8c161.302 28.062 286.738 153.497 314.468 312.5l0.332 2.3h-250.8v128h250.8c-14.080 81.83-52.4 152.966-107.191 207.591l-0.009 0.009z"
           ],
-          "attrs": [
-            {}
-          ],
+          "attrs": [{}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-crosshair-in-circle"
-          ],
+          "tags": ["icon-crosshair-in-circle"],
           "colorPermutations": {
-            "12552552551": [
-              {}
-            ]
+            "12552552551": [{}]
           }
         },
         {
@@ -2840,21 +2790,13 @@
             "M512 384c70.692 0 128 57.308 128 128s-57.308 128-128 128c-70.692 0-128-57.308-128-128v0c0.114-70.647 57.353-127.886 127.989-128l0.011-0zM512 256c-141.385 0-256 114.615-256 256s114.615 256 256 256c141.385 0 256-114.615 256-256v0c-0.114-141.339-114.661-255.886-255.989-256l-0.011-0z",
             "M512 128c211.87 0.128 383.575 171.912 383.575 383.8 0 211.967-171.833 383.8-383.8 383.8s-383.8-171.833-383.8-383.8c0-105.99 42.963-201.945 112.425-271.4l-0 0c69.21-69.437 164.944-112.401 270.713-112.401 0.312 0 0.624 0 0.936 0.001l-0.048-0zM512 0c-282.8 0-512 229.2-512 512s229.2 512 512 512 512-229.2 512-512-229.2-512-512-512z"
           ],
-          "attrs": [
-            {},
-            {}
-          ],
+          "attrs": [{}, {}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-target"
-          ],
+          "tags": ["icon-target"],
           "colorPermutations": {
-            "12552552551": [
-              {},
-              {}
-            ]
+            "12552552551": [{}, {}]
           }
         },
         {
@@ -2863,21 +2805,13 @@
             "M45.2 658.8h229.6l-274.8 274.6 90.6 90.6 274.6-274.8v229.6h128v-448h-448v128z",
             "M1024 90.6l-90.6-90.6-274.6 274.8v-229.6h-128v448h448v-128h-229.6l274.8-274.6z"
           ],
-          "attrs": [
-            {},
-            {}
-          ],
+          "attrs": [{}, {}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-items-collapse"
-          ],
+          "tags": ["icon-items-collapse"],
           "colorPermutations": {
-            "12552552551": [
-              {},
-              {}
-            ]
+            "12552552551": [{}, {}]
           }
         },
         {
@@ -2886,21 +2820,13 @@
             "M448 896h-229.4l274.6-274.8-90.4-90.4-274.8 274.6v-229.4h-128v448h448v-128z",
             "M530.8 402.8l90.4 90.4 274.8-274.6v229.4h128v-448h-448v128h229.4l-274.6 274.8z"
           ],
-          "attrs": [
-            {},
-            {}
-          ],
+          "attrs": [{}, {}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-items-expand"
-          ],
+          "tags": ["icon-items-expand"],
           "colorPermutations": {
-            "12552552551": [
-              {},
-              {}
-            ]
+            "12552552551": [{}, {}]
           }
         },
         {
@@ -2910,23 +2836,13 @@
             "M640 512c0 70.692-57.308 128-128 128s-128-57.308-128-128c0-70.692 57.308-128 128-128s128 57.308 128 128z",
             "M1024 512c0 70.692-57.308 128-128 128s-128-57.308-128-128c0-70.692 57.308-128 128-128s128 57.308 128 128z"
           ],
-          "attrs": [
-            {},
-            {},
-            {}
-          ],
+          "attrs": [{}, {}, {}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-3-dots"
-          ],
+          "tags": ["icon-3-dots"],
           "colorPermutations": {
-            "12552552551": [
-              {},
-              {},
-              {}
-            ]
+            "12552552551": [{}, {}, {}]
           }
         },
         {
@@ -2934,19 +2850,13 @@
           "paths": [
             "M1024 384v-128h-256v-256h-128v256h-256v-256h-128v256h-256v128h256v256h-256v128h256v256h128v-256h256v256h128v-256h256v-128h-256v-256zM640 640h-256v-256h256z"
           ],
-          "attrs": [
-            {}
-          ],
+          "attrs": [{}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-grid-on"
-          ],
+          "tags": ["icon-grid-on"],
           "colorPermutations": {
-            "12552552551": [
-              {}
-            ]
+            "12552552551": [{}]
           }
         },
         {
@@ -2958,27 +2868,13 @@
             "M840 384h184v-128h-80l-104 128z",
             "M832 0l-832 1024h192l832-1024h-192z"
           ],
-          "attrs": [
-            {},
-            {},
-            {},
-            {},
-            {}
-          ],
+          "attrs": [{}, {}, {}, {}, {}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-grid-off"
-          ],
+          "tags": ["icon-grid-off"],
           "colorPermutations": {
-            "12552552551": [
-              {},
-              {},
-              {},
-              {},
-              {}
-            ]
+            "12552552551": [{}, {}, {}, {}, {}]
           }
         },
         {
@@ -2986,19 +2882,13 @@
           "paths": [
             "M896 256h-128l-128-256h-256l-128 256h-128c-70.601 0.227-127.773 57.399-128 127.978l-0 0.022v512c0.227 70.601 57.399 127.773 127.978 128l0.022 0h768c70.601-0.227 127.773-57.399 128-127.978l0-0.022v-512c-0.227-70.601-57.399-127.773-127.978-128l-0.022-0zM512 864c-141.385 0-256-114.615-256-256s114.615-256 256-256c141.385 0 256 114.615 256 256v0c0 141.385-114.615 256-256 256v0z"
           ],
-          "attrs": [
-            {}
-          ],
+          "attrs": [{}],
           "grid": 16,
-          "tags": [
-            "icon-camera"
-          ],
+          "tags": ["icon-camera"],
           "isMulticolor": false,
           "isMulticolor2": false,
           "colorPermutations": {
-            "12552552551": [
-              {}
-            ]
+            "12552552551": [{}]
           }
         },
         {
@@ -3007,21 +2897,13 @@
             "M896 320v448c-0.215 70.606-57.394 127.785-127.979 128l-0.021 0h-576c0.215 70.606 57.394 127.785 127.979 128l0.021 0h576c70.606-0.215 127.785-57.394 128-127.979l0-0.021v-448c-0.215-70.606-57.394-127.785-127.979-128l-0.021-0z",
             "M832 704v-448c-0.215-70.606-57.394-127.785-127.979-128l-0.021-0h-192l-101.5-82.74c-24.88-24.9-74.040-45.26-109.24-45.26h-237.26c-35.305 0.102-63.898 28.695-64 63.99l-0 0.010v640c0.215 70.606 57.394 127.785 127.979 128l0.021 0h576c70.606-0.215 127.785-57.394 128-127.979l0-0.021zM128 644v-516l256 260z"
           ],
-          "attrs": [
-            {},
-            {}
-          ],
+          "attrs": [{}, {}],
           "grid": 16,
-          "tags": [
-            "icon-folders-collapse"
-          ],
+          "tags": ["icon-folders-collapse"],
           "isMulticolor": false,
           "isMulticolor2": false,
           "colorPermutations": {
-            "12552552551": [
-              {},
-              {}
-            ]
+            "12552552551": [{}, {}]
           }
         },
         {
@@ -3031,9 +2913,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-activity"
-          ],
+          "tags": ["icon-activity"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3045,9 +2925,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-activity-mode"
-          ],
+          "tags": ["icon-activity-mode"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3061,9 +2939,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-autoflow-tabular"
-          ],
+          "tags": ["icon-autoflow-tabular"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3075,9 +2951,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-clock-v1.5"
-          ],
+          "tags": ["icon-clock-v1.5"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3090,9 +2964,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-database"
-          ],
+          "tags": ["icon-database"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3105,9 +2977,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-database-query"
-          ],
+          "tags": ["icon-database-query"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3120,9 +2990,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-dataset"
-          ],
+          "tags": ["icon-dataset"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3135,9 +3003,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-datatable"
-          ],
+          "tags": ["icon-datatable"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3149,9 +3015,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-dictionary"
-          ],
+          "tags": ["icon-dictionary"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3164,9 +3028,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-folder-v2.5"
-          ],
+          "tags": ["icon-folder-v2.5"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3179,9 +3041,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-image"
-          ],
+          "tags": ["icon-image"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3195,9 +3055,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-layout"
-          ],
+          "tags": ["icon-layout"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3209,9 +3067,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-object"
-          ],
+          "tags": ["icon-object"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3219,15 +3075,15 @@
         {
           "id": 76,
           "paths": [
-            "M510-2l-512 320v384l512 320 512-320v-384l-512-320zM585.4 859.2c-21.2 20.8-46 30.8-76 30.8-31.2 0-56.2-9.8-76.2-29.6-20-20-29.6-44.8-29.6-76.2 0-30.4 10.2-55.2 31-76.2s45.2-31.2 74.8-31.2c29.6 0 54.2 10.4 75.6 32s31.8 46.4 31.8 76c-0.2 29-10.8 54-31.4 74.4zM638.2 546.6c-23.6 11.8-37.4 22-43.4 32.4-3.6 6.2-6 14.8-7.4 26.8v41h-161.4v-44.2c0-40.2 4.4-69.8 13-88 8-17.2 22.6-30.2 44.8-40l34.8-15.4c32-14.2 48.2-35.2 48.2-62.8 0-16-6-30.4-17.2-41.8-11.2-11.2-25.6-17.2-41.6-17.2-24 0-54.4 10-62.8 57.4l-2.2 12.2h-147l1.4-16.2c4-44.6 17-82.4 38.8-112.2 19.6-27 45.6-48.6 77-64.6s64.6-24 98.2-24c60.6 0 110.2 19.4 151.4 59.6 41.2 40 61.2 88 61.2 147.2 0 70.8-28.8 121.4-85.8 149.8z"
+            "M511.98 0l-511.98 320v384l512 320 512-320v-384l-512.020-320zM586.22 896h-141.36v-136.64h141.36v136.64zM721.040 497.9c-11.94 17.020-34.9 38.78-68.84 65.24l-33.48 26c-18.24 14.18-30.34 30.74-36.32 49.64-3.78 11.98-5.82 30.58-6.14 55.8h-128.12c1.88-53.26 6.92-90.060 15.080-110.4 8.18-20.34 29.22-43.74 63.16-70.22l34.42-26.94c11.3-8.52 20.42-17.8 27.34-27.9 12.56-17.34 18.86-36.4 18.86-57.2 0-23.94-7-45.78-20.98-65.48-14-19.7-39.54-29.54-76.64-29.54s-62.34 12.14-77.6 36.4c-15.24 24.28-22.88 49.48-22.88 75.64h-136.64c3.78-89.84 35.14-153.5 94.080-191.020 37.18-23.94 82.9-35.94 137.12-35.94 71.22 0 130.42 17.020 177.54 51.060s70.68 84.48 70.68 151.3c0 40.98-10.22 75.5-30.66 103.54z"
           ],
-          "attrs": [],
+          "attrs": [{}],
           "grid": 16,
-          "tags": [
-            "icon-object-unknown"
-          ],
+          "tags": ["icon-object-unknown"],
+          "isMulticolor": false,
+          "isMulticolor2": false,
           "colorPermutations": {
-            "12552552551": []
+            "12552552551": [{}]
           }
         },
         {
@@ -3237,9 +3093,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-packet"
-          ],
+          "tags": ["icon-packet"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3252,9 +3106,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-page"
-          ],
+          "tags": ["icon-page"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3267,9 +3119,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-plot-overlay"
-          ],
+          "tags": ["icon-plot-overlay"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3283,9 +3133,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-plot-stacked"
-          ],
+          "tags": ["icon-plot-stacked"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3300,9 +3148,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-session-v2.5"
-          ],
+          "tags": ["icon-session-v2.5"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3314,9 +3160,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-tabular"
-          ],
+          "tags": ["icon-tabular"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3329,9 +3173,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-tabular-lad"
-          ],
+          "tags": ["icon-tabular-lad"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3345,9 +3187,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-tabular-lad-set"
-          ],
+          "tags": ["icon-tabular-lad-set"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3359,9 +3199,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-tabular-realtime-v2"
-          ],
+          "tags": ["icon-tabular-realtime-v2"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3369,19 +3207,15 @@
         {
           "id": 66,
           "paths": [
-            "M64 0c-35.2 0-64 28.8-64 64v192h448v-256h-384z",
-            "M1024 256v-192c0-35.2-28.8-64-64-64h-384v256h448z",
-            "M0 384v192c0 35.2 28.8 64 64 64h384v-256h-448z",
-            "M960 640c35.2 0 64-28.8 64-64v-192h-448v256h384z",
-            "M512 1024l-256-256h512z"
+            "M896 0h-768c-70.606 0.215-127.785 57.394-128 127.979l-0 0.021v768c0.215 70.606 57.394 127.785 127.979 128l0.021 0h768c70.606-0.215 127.785-57.394 128-127.979l0-0.021v-768c-0.215-70.606-57.394-127.785-127.979-128l-0.021-0zM768 256v192h-192v-192zM576 512h192v192h-192zM512 704h-192v-192h192zM512 256v192h-192v-192zM64 256h192v192h-192zM64 512h192v192h-192zM128 960c-35.255-0.225-63.775-28.745-64-63.978l-0-0.022v-128h192v192zM320 960v-192h192v192zM704 960h-128v-192h192v192zM941.14 941.14c-11.511 11.644-27.483 18.856-45.139 18.86l-64.001 0v-64h128c-0.004 17.657-7.216 33.629-18.854 45.134l-0.006 0.006zM960 768h-128v-512h128z"
           ],
-          "attrs": [],
+          "attrs": [{}],
           "grid": 16,
-          "tags": [
-            "icon-tabular-scrolling"
-          ],
+          "tags": ["icon-tabular-scrolling"],
+          "isMulticolor": false,
+          "isMulticolor2": false,
           "colorPermutations": {
-            "12552552551": []
+            "12552552551": [{}]
           }
         },
         {
@@ -3392,9 +3226,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-telemetry-v2"
-          ],
+          "tags": ["icon-telemetry-v2"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3402,19 +3234,15 @@
         {
           "id": 10,
           "paths": [
-            "M256 256h384v128h-384v-128z",
-            "M384 448h384v128h-384v-128z",
-            "M320 640h384v128h-384v-128z",
-            "M832 0h-128v192h127.6c0.2 0 0.2 0.2 0.4 0.4v639.4c0 0.2-0.2 0.2-0.4 0.4h-127.6v192h128c105.6 0 192-86.4 192-192v-640.2c0-105.6-86.4-192-192-192z",
-            "M192 831.6v-639.2c0-0.2 0.2-0.2 0.4-0.4h127.6v-192h-128c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192h128v-192h-127.6c-0.2 0-0.4-0.2-0.4-0.4z"
+            "M832 0h-640c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192h640c105.6 0 192-86.4 192-192v-640c0-105.6-86.4-192-192-192zM128 320v-128h256v128zM256 448h384v128h-384zM896 832h-448v-128h448zM896 576h-128v-128h128zM896 320h-384v-128h384z"
           ],
-          "attrs": [],
+          "attrs": [{}],
           "grid": 16,
-          "tags": [
-            "icon-timeline"
-          ],
+          "tags": ["icon-timeline"],
+          "isMulticolor": false,
+          "isMulticolor2": false,
           "colorPermutations": {
-            "12552552551": []
+            "12552552551": [{}]
           }
         },
         {
@@ -3424,9 +3252,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-timer-v1.5"
-          ],
+          "tags": ["icon-timer-v1.5"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3441,9 +3267,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-topic-v2.5"
-          ],
+          "tags": ["icon-topic-v2.5"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3463,9 +3287,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-box-with-dashed-lines-v2"
-          ],
+          "tags": ["icon-box-with-dashed-lines-v2"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3477,9 +3299,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-summary-widget"
-          ],
+          "tags": ["icon-summary-widget"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3492,9 +3312,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-notebook"
-          ],
+          "tags": ["icon-notebook"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3505,21 +3323,13 @@
             "M0 896c0.227 70.601 57.399 127.773 127.978 128l0.022 0h768c70.601-0.227 127.773-57.399 128-127.978l0-0.022v-608h-512l-50.2-225.6c-7.6-34.2-42.6-62.4-77.8-62.4h-256c-70.601 0.227-127.773 57.399-128 127.978l-0 0.022zM832 768h-640v-256h640z",
             "M480 0c35.2 0 70.2 28.2 77.8 62.4l36 161.6h430.2v-96c-0.227-70.601-57.399-127.773-127.978-128l-0.022-0z"
           ],
-          "attrs": [
-            {},
-            {}
-          ],
+          "attrs": [{}, {}],
           "grid": 16,
-          "tags": [
-            "icon-tabs-view"
-          ],
+          "tags": ["icon-tabs-view"],
           "isMulticolor": false,
           "isMulticolor2": false,
           "colorPermutations": {
-            "12552552551": [
-              {},
-              {}
-            ]
+            "12552552551": [{}, {}]
           }
         },
         {
@@ -3533,9 +3343,7 @@
           ],
           "attrs": [],
           "grid": 16,
-          "tags": [
-            "icon-flexible-layout"
-          ],
+          "tags": ["icon-flexible-layout"],
           "colorPermutations": {
             "12552552551": []
           }
@@ -3548,25 +3356,13 @@
             "M512 640l135-59c-4.485 0.614-9.689 0.977-14.972 1l-0.028 0c-39.4 0-76-21.8-109.2-65-28-36.4-48.8-81.6-61-113.4-29-73.8-59-105.2-69.8-109.4-10.8 4.2-40.8 35.6-69.8 109.4-16.4 42.2-39.2 88.4-68.8 123.2z",
             "M1024 480l-512 224-512-224v320l512 224 512-224v-320z"
           ],
-          "attrs": [
-            {},
-            {},
-            {},
-            {}
-          ],
+          "attrs": [{}, {}, {}, {}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-generator-sine"
-          ],
+          "tags": ["icon-generator-sine"],
           "colorPermutations": {
-            "12552552551": [
-              {},
-              {},
-              {},
-              {}
-            ]
+            "12552552551": [{}, {}, {}, {}]
           }
         },
         {
@@ -3579,29 +3375,13 @@
             "M658.2 576h-292.4l146.2 64 146.2-64z",
             "M512 704l-512-224v320l512 224 512-224v-320l-512 224z"
           ],
-          "attrs": [
-            {},
-            {},
-            {},
-            {},
-            {},
-            {}
-          ],
+          "attrs": [{}, {}, {}, {}, {}, {}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-generator-event"
-          ],
+          "tags": ["icon-generator-event"],
           "colorPermutations": {
-            "12552552551": [
-              {},
-              {},
-              {},
-              {},
-              {},
-              {}
-            ]
+            "12552552551": [{}, {}, {}, {}, {}, {}]
           }
         },
         {
@@ -3609,19 +3389,13 @@
           "paths": [
             "M512 0c-282.8 0-512 229.2-512 512 0 226.4 147 418.4 350.6 486l257.4-486v503c236.8-45 416-253 416-503 0-282.8-229.2-512-512-512zM754.8 527.8c-58.967-68.597-145.842-111.772-242.8-111.772s-183.833 43.176-242.445 111.35l-0.355 0.422-146-125c8.6-10 17.4-19.6 26.8-28.8 92.628-92.679 220.619-150.006 362-150.006s269.372 57.326 361.997 150.003l0.003 0.003c9.4 9.2 18.2 18.8 26.8 28.8z"
           ],
-          "attrs": [
-            {}
-          ],
+          "attrs": [{}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-gauge-v2"
-          ],
+          "tags": ["icon-gauge-v2"],
           "colorPermutations": {
-            "12552552551": [
-              {}
-            ]
+            "12552552551": [{}]
           }
         },
         {
@@ -3631,23 +3405,13 @@
             "M830 0h-636c-106.6 0-194 87.2-194 194v318l400-60.2 112-195.8 109.8 192h402.2v-254c-0.227-107.052-86.948-193.773-193.978-194l-0.022-0z",
             "M1024 640v-64l-384-64 384 128z"
           ],
-          "attrs": [
-            {},
-            {},
-            {}
-          ],
+          "attrs": [{}, {}, {}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-spectra"
-          ],
+          "tags": ["icon-spectra"],
           "colorPermutations": {
-            "12552552551": [
-              {},
-              {},
-              {}
-            ]
+            "12552552551": [{}, {}, {}]
           }
         },
         {
@@ -3657,23 +3421,13 @@
             "M768 704h-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.2z",
             "M640 512l384 128v-64l-384-64z"
           ],
-          "attrs": [
-            {},
-            {},
-            {}
-          ],
+          "attrs": [{}, {}, {}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-telemetry-spectra"
-          ],
+          "tags": ["icon-telemetry-spectra"],
           "colorPermutations": {
-            "12552552551": [
-              {},
-              {},
-              {}
-            ]
+            "12552552551": [{}, {}, {}]
           }
         },
         {
@@ -3682,21 +3436,13 @@
             "M370.2 459.4c9.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.76l-0-0.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.4z",
             "M885.4 269.6c-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 128c141.2 0 256 100.4 256 224s-114.8 224-256 224-256-100.4-256-224 114.8-224 256-224zM512 832c-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"
           ],
-          "attrs": [
-            {},
-            {}
-          ],
+          "attrs": [{}, {}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-pushbutton"
-          ],
+          "tags": ["icon-pushbutton"],
           "colorPermutations": {
-            "12552552551": [
-              {},
-              {}
-            ]
+            "12552552551": [{}, {}]
           }
         },
         {
@@ -3704,19 +3450,13 @@
           "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": [
-            {}
-          ],
+          "attrs": [{}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-conditional"
-          ],
+          "tags": ["icon-conditional"],
           "colorPermutations": {
-            "12552552551": [
-              {}
-            ]
+            "12552552551": [{}]
           }
         },
         {
@@ -3724,19 +3464,13 @@
           "paths": [
             "M832 0h-640c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192h640c105.6 0 192-86.4 192-192v-640c0-105.6-86.4-192-192-192zM512 768l-384-256 384-256 384 256z"
           ],
-          "attrs": [
-            {}
-          ],
+          "attrs": [{}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-condition-widget"
-          ],
+          "tags": ["icon-condition-widget"],
           "colorPermutations": {
-            "12552552551": [
-              {}
-            ]
+            "12552552551": [{}]
           }
         },
         {
@@ -3745,21 +3479,13 @@
             "M535.6 530.6c-8.4 1.6-17.2 3-26.2 4s-18.2 2.4-27.2 4c-10.196 1.861-18.808 4.010-27.21 6.633l1.61-0.433c-8.609 2.674-16.105 6.348-22.89 10.987l0.29-0.187c-6.693 4.517-12.283 10.107-16.663 16.585l-0.137 0.215c-4.6 6.8-7.4 15.6-8.8 26s-0.4 18.4 2.4 25.2c2.746 6.688 7.224 12.195 12.881 16.122l0.119 0.078c5.967 4.053 13.057 6.94 20.704 8.161l0.296 0.039c7.592 1.527 16.319 2.4 25.25 2.4 0.123 0 0.246-0 0.369-0l-0.019 0c22.2 0 39.6-3.6 52.6-11s23.2-16.2 30.2-26.4c6.273-8.873 11.271-19.191 14.426-30.285l0.174-0.715c1.853-6.809 3.601-15.41 4.855-24.169l0.145-1.231 5.2-41.6c-5.4 4.217-11.723 7.564-18.583 9.689l-0.417 0.111c-6.489 2.241-14.362 4.255-22.444 5.662l-0.956 0.138z",
             "M1024 384v-192h-152l24-192h-192l-24 192h-256l24-192h-192l-24 192h-232v192h208l-32 256h-176v192h152l-24 192h192l24-192h256l-24 192h192l24-192h232v-192h-208l32-256zM702.8 411.8l-26.4 211.8c-2.231 15.809-3.537 34.122-3.6 52.727l-0 0.073c0 16.8 2.2 29.4 6.4 37.8h-113.4c-1.342-5.556-2.338-12.122-2.781-18.84l-0.019-0.36c-0.261-3.524-0.409-7.634-0.409-11.778 0-2.962 0.076-5.907 0.226-8.832l-0.017 0.41c-18.663 17.401-41.395 30.694-66.597 38.289l-1.203 0.311c-22.627 6.956-48.639 10.974-75.586 11l-0.014 0c-0.764 0.011-1.666 0.018-2.569 0.018-18.098 0-35.598-2.563-52.156-7.345l1.325 0.328c-15.991-4.512-29.851-12.090-41.545-22.122l0.145 0.122c-11.233-9.982-19.792-22.733-24.624-37.192l-0.176-0.608c-5.2-15.2-6.4-33.4-3.8-54.4s9.4-42.2 19.4-57.2c9.524-14.399 21.535-26.346 35.532-35.512l0.468-0.288c13.387-8.662 28.922-15.533 45.512-19.765l1.088-0.235c13.436-3.792 30.801-7.554 48.47-10.41l2.93-0.39c17-2.6 33.8-4.6 50.4-6.2 16.628-1.527 31.69-4.070 46.349-7.643l-2.149 0.443c13-3 23.6-7.6 31.6-13.6s12.6-15 13.6-26.4 0.8-21.8-2.4-28.8c-2.849-6.902-7.542-12.56-13.468-16.517l-0.132-0.083c-6.217-4.011-13.604-6.78-21.543-7.774l-0.257-0.026c-7.897-1.277-17-2.007-26.274-2.007-0.537 0-1.073 0.002-1.609 0.007l0.082-0.001c-22 0-40 4.6-53.8 14.2s-23 25.2-28 47.2h-111.8c4.8-26.2 14.2-48 27.8-65.4 13.475-16.978 29.89-30.968 48.574-41.377l0.826-0.423c18.192-10.038 39.297-17.806 61.619-22.175l1.381-0.225c20.488-4.162 44.053-6.563 68.171-6.6l0.029-0c21.8 0.005 43.239 1.532 64.222 4.479l-2.422-0.279c20.641 2.809 39.324 8.783 56.401 17.461l-1.001-0.461c15.909 8.108 28.858 20.031 37.967 34.601l0.233 0.399c9 15 12.2 34.8 9 59.6z"
           ],
-          "attrs": [
-            {},
-            {}
-          ],
+          "attrs": [{}, {}],
           "grid": 16,
-          "tags": [
-            "icon-alphanumeric"
-          ],
+          "tags": ["icon-alphanumeric"],
           "isMulticolor": false,
           "isMulticolor2": false,
           "colorPermutations": {
-            "12552552551": [
-              {},
-              {}
-            ]
+            "12552552551": [{}, {}]
           }
         },
         {
@@ -3768,39 +3494,125 @@
             "M512 0c-282.8 0-512 229.2-512 512s229.2 512 512 512 512-229.2 512-512-229.2-512-512-512zM783.6 783.6c-69.581 69.675-165.757 112.776-272 112.776-212.298 0-384.4-172.102-384.4-384.4s172.102-384.4 384.4-384.4c212.298 0 384.4 172.102 384.4 384.4 0 0.008-0 0.017-0 0.025l0-0.001c0.001 0.264 0.001 0.575 0.001 0.887 0 105.769-42.964 201.503-112.391 270.703l-0.010 0.010z",
             "M704 384l-128 128-192-192-192 192c0 176.731 143.269 320 320 320s320-143.269 320-320v0z"
           ],
-          "attrs": [
-            {},
-            {}
+          "attrs": [{}, {}],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 16,
+          "tags": ["icon-image-telemetry"],
+          "colorPermutations": {
+            "12552552551": [{}, {}]
+          }
+        },
+        {
+          "id": 170,
+          "paths": [
+            "M78 395.44c14-41.44 37.48-100.8 69.2-148.36 38.62-57.78 82.38-87.080 130.14-87.080s91.5 29.3 130 87.080c31.72 47.56 55.14 106.92 69.2 148.36 30.88 90.96 63.12 134.98 78 146.54 14.94-11.56 47.2-55.58 78-146.54 14-41.44 37.48-100.8 69.22-148.36q27.8-41.7 59.12-63.5c-75.7-111.377-201.81-183.58-344.783-183.58-0.034 0-0.068 0-0.103 0l0.006-0c-229.76 0-416 186.24-416 416-0 0.071-0 0.156-0 0.24 0 39.119 5.396 76.977 15.484 112.871l-0.704-2.931c16.78-21.74 40.4-63.34 63.22-130.74z",
+            "M754 436.56c-14 41.44-37.48 100.8-69.2 148.36-38.56 57.78-82.32 87.080-130 87.080s-91.5-29.3-130-87.080c-31.72-47.56-55.14-106.92-69.2-148.36-30.88-90.96-63.14-134.98-78-146.54-14.94 11.56-47.2 55.58-78 146.54-14.38 41.44-37.8 100.8-69.6 148.36q-27.8 41.7-59.12 63.5c75.7 111.378 201.81 183.58 344.783 183.58 0.119 0 0.237-0 0.356-0l-0.019 0c229.76 0 416-186.24 416-416 0-0.071 0-0.156 0-0.24 0-39.119-5.396-76.977-15.484-112.871l0.704 2.931c-16.78 21.74-40.4 63.34-63.22 130.74z",
+            "M921.56 334.62c4.098 24.449 6.44 52.617 6.44 81.332 0 0.017-0 0.034-0 0.051l0-0.003c0 0.095 0 0.208 0 0.32 0 282.593-229.087 511.68-511.68 511.68-0.113 0-0.225-0-0.338-0l0.018 0c-0.014 0-0.031 0-0.048 0-28.716 0-56.884-2.342-84.325-6.845l2.993 0.405c72.483 63.623 168.109 102.44 272.802 102.44 0.203 0 0.406-0 0.61-0l-0.031 0c229.76 0 416-186.24 416-416 0-0.172 0-0.375 0-0.578 0-104.692-38.817-200.319-102.844-273.271l0.404 0.47z"
+          ],
+          "attrs": [{}, {}, {}],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 16,
+          "tags": ["icon-telemetry-aggregate"],
+          "colorPermutations": {
+            "12552552551": [{}, {}, {}]
+          }
+        },
+        {
+          "id": 172,
+          "paths": [
+            "M832 0h-640c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192h640c105.6 0 192-86.4 192-192v-640c0-105.6-86.4-192-192-192zM267.64 896h-139.64v-448h139.64zM477.1 896h-139.64v-768h139.64zM686.54 896h-139.64v-320h139.64zM896 896h-139.64v-640h139.64z"
+          ],
+          "attrs": [{}],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 16,
+          "tags": ["icon-bar-graph"],
+          "colorPermutations": {
+            "12552552551": [{}]
+          }
+        },
+        {
+          "id": 171,
+          "paths": [
+            "M896 65.4l-128 62.6v896l128-62.6c70.4-34.42 128-120.2 128-190.6v-640c0-70.4-57.6-99.82-128-65.4z",
+            "M320 912l387.2 96.8v-896l-387.2-96.8v896z",
+            "M259.2 0.8l-3.2-0.8-128 62.6c-70.4 34.42-128 120.2-128 190.6v640c0 70.4 57.6 99.82 128 65.4l128-62.6 3.2 0.8z"
+          ],
+          "attrs": [{}, {}, {}],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 16,
+          "tags": ["icon-map"],
+          "colorPermutations": {
+            "12552552551": [{}, {}, {}]
+          }
+        },
+        {
+          "id": 174,
+          "paths": [
+            "M256 192v-64c0.215-70.606 57.394-127.785 127.979-128l0.021-0h256c70.606 0.215 127.785 57.394 128 127.979l0 0.021v64z",
+            "M832 128v128h-640v-128c-105.6 0-192 86.4-192 192v512c0 105.6 86.4 192 192 192h640c105.6 0 192-86.4 192-192v-512c0-105.6-86.4-192-192-192zM128 576v-128h256v128zM640 832h-384v-128h384zM896 832h-128v-128h128zM896 576h-384v-128h384z"
+          ],
+          "attrs": [{}, {}],
+          "grid": 16,
+          "tags": ["icon-plan"],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "colorPermutations": {
+            "12552552551": [{}, {}]
+          }
+        },
+        {
+          "id": 175,
+          "paths": [
+            "M896 0h-768c-70.606 0.215-127.785 57.394-128 127.979l-0 0.021v768c0.215 70.606 57.394 127.785 127.979 128l0.021 0h768c70.606-0.215 127.785-57.394 128-127.979l0-0.021v-768c-0.215-70.606-57.394-127.785-127.979-128l-0.021-0zM426.94 533.46c-8.054 15.864-24.249 26.545-42.938 26.545-7.823 0-15.209-1.871-21.734-5.191l0.273 0.126-154.54-77.28v-221.66c0-26.51 21.49-48 48-48s48 21.49 48 48v0 162.34l101.46 50.72c15.864 8.054 26.545 24.249 26.545 42.938 0 7.823-1.871 15.209-5.191 21.734l0.126-0.273zM896 896h-320v-128h320zM896 704h-320v-128h320zM896 512h-320v-128h320zM896 320h-320v-128h320z"
+          ],
+          "attrs": [{}],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 16,
+          "tags": ["icon-timelist"],
+          "colorPermutations": {
+            "12552552551": [{}]
+          }
+        },
+        {
+          "id": 185,
+          "paths": [
+            "M192 0c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192h640c105.6 0 192-86.4 192-192v-640c0-105.6-86.4-192-192-192zM128 352c0-53.019 42.981-96 96-96s96 42.981 96 96c0 53.019-42.981 96-96 96v0c-53.019 0-96-42.981-96-96v0zM288 832c-53.019 0-96-42.981-96-96s42.981-96 96-96c53.019 0 96 42.981 96 96v0c0 53.019-42.981 96-96 96v0zM544 640c-53.019 0-96-42.981-96-96s42.981-96 96-96c53.019 0 96 42.981 96 96v0c0 53.019-42.981 96-96 96v0zM544 320c-53.019 0-96-42.981-96-96s42.981-96 96-96c53.019 0 96 42.981 96 96v0c0 53.019-42.981 96-96 96v0zM800 832c-53.019 0-96-42.981-96-96s42.981-96 96-96c53.019 0 96 42.981 96 96v0c0 53.019-42.981 96-96 96v0z"
           ],
+          "attrs": [{}],
           "isMulticolor": false,
           "isMulticolor2": false,
           "grid": 16,
-          "tags": [
-            "icon-image-telemetry"
+          "tags": ["icon-plot-scatter"],
+          "colorPermutations": {
+            "12552552551": [{}]
+          }
+        },
+        {
+          "id": 184,
+          "paths": [
+            "M896 110.72c0-79.9-55.38-127.32-123.080-105.36l-772.92 250.64h896v-145.28z",
+            "M896 320h-896v576c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v-448c0-70.4-57.6-128-128-128zM256 832h-128v-128h128v128zM256 640h-128v-128h128v128zM896 832h-512v-128h512v128zM896 640h-512v-128h512v128z"
           ],
+          "attrs": [{}, {}],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 16,
+          "tags": ["icon-notebook-restricted"],
           "colorPermutations": {
-            "12552552551": [
-              {},
-              {}
-            ]
+            "12552552551": [{}, {}]
           }
         }
       ],
       "invisible": false,
       "colorThemes": [
         [
-          [
-            0,
-            0,
-            0,
-            1
-          ],
-          [
-            255,
-            255,
-            255,
-            1
-          ]
+          [0, 0, 0, 1],
+          [255, 255, 255, 1]
         ]
       ],
       "colorThemeIdx": 0
@@ -3818,11 +3630,12 @@
         "fontFamily": "Open-MCT-Symbols-16px",
         "majorVersion": 5,
         "minorVersion": 1,
-        "designer": "Charles Hacskaylo"
+        "designer": "Charles Hacskaylo",
+        "description": "Change to 5% baseline height"
       },
       "metrics": {
         "emSize": 1024,
-        "baseline": 20,
+        "baseline": 10,
         "whitespace": 0
       },
       "embed": false,
@@ -3851,4 +3664,4 @@
     }
   },
   "uid": -1
-}
\ No newline at end of file
+}
diff --git a/src/styles/fonts/Open-MCT-Symbols-16px.svg b/src/styles/fonts/Open-MCT-Symbols-16px.svg
index 0ce6df47860..0db59f860eb 100644
--- a/src/styles/fonts/Open-MCT-Symbols-16px.svg
+++ b/src/styles/fonts/Open-MCT-Symbols-16px.svg
@@ -4,156 +4,173 @@
 <metadata>Generated by IcoMoon</metadata>
 <defs>
 <font id="Open-MCT-Symbols-16px" horiz-adv-x="1024">
-<font-face units-per-em="1024" ascent="819.2" descent="-204.8" />
+<font-face units-per-em="1024" ascent="921.6" descent="-102.4" />
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" horiz-adv-x="0" d="" />
-<glyph unicode="&#xe900;" glyph-name="icon-alert-rect-v2" d="M896 832h-768c-70.6-0.2-127.8-57.4-128-128v-768c0.2-70.6 57.4-127.8 128-128h768c70.6 0.2 127.8 57.4 128 128v768c-0.2 70.6-57.4 127.8-128 128zM576-64h-128v128h128v-128zM597.8 320l-37.8-192h-96l-37.8 192v384h171.8v-384z" />
-<glyph unicode="&#xe901;" glyph-name="icon-alert-triangle-v2" d="M998.2-16.8l-422.6 739.6c-35 61.2-92 61.2-127 0l-422.8-739.6c-35-61.2-6-111.2 64.4-111.2h843.4c70.6 0 99.6 50 64.6 111.2zM576-64h-128v128h128v-128zM597.8 320l-37.8-192h-96l-37.8 192v256h171.8v-256z" />
-<glyph unicode="&#xe902;" glyph-name="icon-arrow-up" d="M512 576l-512-512h1024z" />
-<glyph unicode="&#xe903;" glyph-name="icon-arrow-double-up" d="M510 322l512-512h-1024zM510 834l512-512h-1024z" />
-<glyph unicode="&#xe904;" glyph-name="icon-arrow-tall-up" d="M512 832l512-1024h-1024z" />
-<glyph unicode="&#xe905;" glyph-name="icon-arrow-right" d="M768 320l-512 512v-1024z" />
-<glyph unicode="&#xe906;" glyph-name="icon-arrow-right-equilateral" d="M962 320l-896-512v1024z" />
-<glyph unicode="&#xe907;" glyph-name="icon-arrow-down" d="M512 64l512 512h-1024z" />
-<glyph unicode="&#xe908;" glyph-name="icon-arrow-double-down" d="M510 322l-512 512h1024zM510-190l-512 512h1024z" />
-<glyph unicode="&#xe909;" glyph-name="icon-arrow-tall-down" d="M512-192l-512 1024h1024z" />
-<glyph unicode="&#xe90a;" glyph-name="icon-arrow-left" d="M256 320l512-512v1024z" />
-<glyph unicode="&#xe90b;" glyph-name="icon-asterisk" d="M1004.166 491.542l-97.522 168.916-330.534-229.414 33.414 400.956h-195.048l33.414-400.956-330.534 229.414-97.522-168.916 363.944-171.542-363.944-171.542 97.522-168.916 330.534 229.414-33.414-400.956h195.048l-33.414 400.956 330.534-229.414 97.522 168.916-363.944 171.542z" />
-<glyph unicode="&#xe90c;" glyph-name="icon-bell" d="M512-192c106 0 192 86 192 192h-384c0-106 86-192 192-192zM896 384v64c0 212-172 384-384 384s-384-172-384-384v-64c0-70.6-57.4-128-128-128v-128h1024v128c-70.6 0-128 57.4-128 128z" />
-<glyph unicode="&#xe90d;" glyph-name="icon-box-round-corners" d="M1024 0c0-105.6-86.4-192-192-192h-640c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192h640c105.6 0 192-86.4 192-192v-640z" />
-<glyph unicode="&#xe90e;" glyph-name="icon-box-with-arrow-cursor" d="M894 834h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h400c-2.2 3.8-4 7.6-5.8 11.4l-255.2 576.8c-21.4 48.4-10.8 105 26.6 142.4 24.4 24.4 57.2 37.4 90.4 37.4 17.4 0 35.2-3.6 51.8-11l576.6-255.4c4-1.8 7.8-3.8 11.4-5.8v400.2c0.2 70.4-57.4 128-127.8 128zM958.6 194.6l-576.6 255.4 255.4-576.6 64.6 128.6 192-192 128 128-192 192z" />
-<glyph unicode="&#xe90f;" glyph-name="icon-check" d="M1024 832l-640-640-384 384v-384l384-384 640 640z" />
-<glyph unicode="&#xe910;" glyph-name="icon-connectivity" d="M704 256c0-70.4-57.6-128-128-128h-128c-70.4 0-128 57.6-128 128v128c0 70.4 57.6 128 128 128h128c70.4 0 128-57.6 128-128v-128zM1024 320l-192 320v-640zM0 320l192 320v-640z" />
-<glyph unicode="&#xe911;" glyph-name="icon-database-in-brackets" d="M768 480c0-53.019-114.615-96-256-96s-256 42.981-256 96c0 53.019 114.615 96 256 96s256-42.981 256-96zM768 160v256c0-53-114.6-96-256-96s-256 43-256 96v-256c0-53 114.6-96 256-96s256 43 256 96zM832 832h-128v-192h127.6c0.2 0 0.2-0.2 0.4-0.4v-639.4c0-0.2-0.2-0.2-0.4-0.4h-127.6v-192h128c105.6 0 192 86.4 192 192v640.2c0 105.6-86.4 192-192 192zM192 0.4v639.4c0 0.2 0.2 0.2 0.4 0.4h127.6v191.8h-128c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h128v192h-127.6c-0.2 0-0.4 0.2-0.4 0.4z" />
-<glyph unicode="&#xe912;" glyph-name="icon-eye-open" d="M512 715.6c-245.8 0-452.2-168-510.8-395.6 58.6-227.4 265-395.6 510.8-395.6s452.2 168 510.8 395.6c-58.6 227.4-265 395.6-510.8 395.6zM829.2 243.6c-22.6-34.4-50.6-64.8-83-90.4-32.8-25.8-69-45.6-108-59.4-40.4-14.2-82.8-21.4-126-21.4s-85.8 7.2-126 21.4c-39 13.8-75.4 33.8-108 59.4-32.4 25.6-60.4 55.8-83 90.4-15.8 24-28.8 49.6-38.6 76.4 10 26.8 23 52.4 38.6 76.4 22.6 34.4 50.6 64.8 83 90.4 32.8 25.8 69 45.6 108 59.4 40.4 14.2 82.8 21.4 126 21.4s85.8-7.2 126-21.4c39-13.8 75.4-33.8 108-59.4 32.4-25.6 60.4-55.8 83-90.4 15.8-24 28.8-49.6 38.6-76.4-9.8-26.8-22.8-52.4-38.6-76.4zM704 320c0-106.039-85.961-192-192-192s-192 85.961-192 192c0 106.039 85.961 192 192 192s192-85.961 192-192z" />
-<glyph unicode="&#xe913;" glyph-name="icon-gear" d="M1024 256v128l-140.976 35.244c-8.784 32.922-21.818 64.106-38.504 92.918l74.774 124.622-90.51 90.51-124.622-74.774c-28.812 16.686-59.996 29.72-92.918 38.504l-35.244 140.976h-128l-35.244-140.976c-32.922-8.784-64.106-21.818-92.918-38.504l-124.622 74.774-90.51-90.51 74.774-124.622c-16.686-28.812-29.72-59.996-38.504-92.918l-140.976-35.244v-128l140.976-35.244c8.784-32.922 21.818-64.106 38.504-92.918l-74.774-124.622 90.51-90.51 124.622 74.774c28.812-16.686 59.996-29.72 92.918-38.504l35.244-140.976h128l35.244 140.976c32.922 8.784 64.106 21.818 92.918 38.504l124.622-74.774 90.51 90.51-74.774 124.622c16.686 28.812 29.72 59.996 38.504 92.918l140.976 35.244zM704 320c0-106.038-85.962-192-192-192s-192 85.962-192 192 85.962 192 192 192 192-85.962 192-192z" />
-<glyph unicode="&#xe914;" glyph-name="icon-hourglass" d="M1024 832h-1024c0-282.8 229.2-512 512-512s512 229.2 512 512zM512 448c-102.6 0-199 40-271.6 112.4-41.2 41.2-72 90.2-90.8 143.6h724.6c-18.8-53.4-49.6-102.4-90.8-143.6-72.4-72.4-168.8-112.4-271.4-112.4zM512 320c-282.8 0-512-229.2-512-512h1024c0 282.8-229.2 512-512 512z" />
-<glyph unicode="&#xe915;" glyph-name="icon-info" d="M512 832c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM512 704c70.6 0 128-57.4 128-128s-57.4-128-128-128c-70.6 0-128 57.4-128 128s57.4 128 128 128zM704 0h-384v128h64v256h256v-256h64v-128z" />
-<glyph unicode="&#xe916;" glyph-name="icon-link" d="M1024 320l-512 512v-307.2l-512-204.8v-256h512v-256z" />
-<glyph unicode="&#xe917;" glyph-name="icon-lock" horiz-adv-x="768" d="M702 448h-62v128c0 141.385-114.615 256-256 256s-256-114.615-256-256v0-128h-64c-35.301-0.113-63.887-28.699-64-63.989v-512.011c0.113-35.301 28.699-63.887 63.989-64h638.011c35.301 0.113 63.887 28.699 64 63.989v512.011c-0.113 35.301-28.699 63.887-63.989 64h-0.011zM256 448v128c0 70.692 57.308 128 128 128s128-57.308 128-128v0-128z" />
-<glyph unicode="&#xe918;" glyph-name="icon-minus" d="M960 192c35.2 0 64 28.8 64 64v128c0 35.2-28.8 64-64 64h-896c-35.2 0-64-28.8-64-64v-128c0-35.2 28.8-64 64-64h896z" />
-<glyph unicode="&#xe919;" glyph-name="icon-people" d="M704 512h64c70.4 0 128 57.6 128 128v64c0 70.4-57.6 128-128 128h-64c-70.4 0-128-57.6-128-128v-64c0-70.4 57.6-128 128-128zM256 512h64c70.4 0 128 57.6 128 128v64c0 70.4-57.6 128-128 128h-64c-70.4 0-128-57.6-128-128v-64c0-70.4 57.6-128 128-128zM832 448h-192c-34.908 0-67.716-9.448-96-25.904 57.278-33.324 96-95.404 96-166.096v-448h384v448c0 105.6-86.4 192-192 192zM384 448h-192c-105.6 0-192-86.4-192-192v-448h576v448c0 105.6-86.4 192-192 192z" />
-<glyph unicode="&#xe91a;" glyph-name="icon-person" d="M768 576c0-105.6-86.4-192-192-192h-128c-105.6 0-192 86.4-192 192v64c0 105.6 86.4 192 192 192h128c105.6 0 192-86.4 192-192v-64zM64-192v192c0 140.8 115.2 256 256 256h384c140.8 0 256-115.2 256-256v-192z" />
-<glyph unicode="&#xe91b;" glyph-name="icon-plus" d="M960 448h-330v320c0 35.2-28.8 64-64 64h-108c-35.2 0-64-28.8-64-64v-320h-330c-35.2 0-64-28.8-64-64v-128c0-35.2 28.8-64 64-64h330v-320c0-35.2 28.8-64 64-64h108c35.2 0 64 28.8 64 64v320h330c35.2 0 64 28.8 64 64v128c0 35.2-28.8 64-64 64z" />
-<glyph unicode="&#xe91c;" glyph-name="icon-plus-in-rect" d="M830 832h-636c-106.6 0-194-87.2-194-194v-636c0-106.8 87.4-194 194-194h636c106.6 0 194 87.2 194 194v636c0 106.8-87.4 194-194 194zM896 224c0-17.673-14.327-32-32-32v0h-224v-224c0-17.673-14.327-32-32-32v0h-192c-17.673 0-32 14.327-32 32v0 224h-224c-17.673 0-32 14.327-32 32v0 192c0 17.673 14.327 32 32 32v0h224v224c0 17.673 14.327 32 32 32v0h192c17.673 0 32-14.327 32-32v0-224h224c17.673 0 32-14.327 32-32v0z" />
-<glyph unicode="&#xe91d;" glyph-name="icon-trash" d="M832 704h-192.36v64c0 35.2-28.8 64-64 64h-128c-35.2 0-64-28.8-64-64v-64h-191.64c-105.6 0-192-72-192-160s0-160 0-160h64v-384c0-105.6 86.4-192 192-192h512c105.6 0 192 86.4 192 192v384h64c0 0 0 72 0 160s-86.4 160-192 160zM320 0h-128v384h128v-384zM576 0h-128v384h128v-384zM832 0h-128v384h128v-384z" />
-<glyph unicode="&#xe91e;" glyph-name="icon-x-heavy" d="M704 320l301.332-301.332c24.89-24.89 24.89-65.62 0-90.51l-101.49-101.49c-24.89-24.89-65.62-24.89-90.51 0l-301.332 301.332c0 0-301.332-301.332-301.332-301.332-24.89-24.89-65.62-24.89-90.51 0l-101.49 101.49c-24.89 24.89-24.89 65.62 0 90.51l301.332 301.332c0 0-301.332 301.332-301.332 301.332-24.89 24.89-24.89 65.62 0 90.51l101.49 101.49c24.89 24.89 65.62 24.89 90.51 0l301.332-301.332c0 0 301.332 301.332 301.332 301.332 24.89 24.89 65.62 24.89 90.51 0l101.49-101.49c24.89-24.89 24.89-65.62 0-90.51 0 0-301.332-301.332-301.332-301.332z" />
-<glyph unicode="&#xe91f;" glyph-name="icon-brackets" d="M832 832h-192v-192h191.66l0.34-0.34v-639.32l-0.34-0.34h-191.66v-192h192c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM384 0h-191.66l-0.34 0.34v639.32l0.34 0.34h191.66v192h-192c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h192v192z" />
-<glyph unicode="&#xe920;" glyph-name="icon-crosshair" d="M574 834h-128v-320h128v320zM1022 386h-320v-128h320v128zM574 130h-128v-320h128v320zM318 386h-320v-128h320v128z" />
-<glyph unicode="&#xe921;" glyph-name="icon-grippy" d="M365.4 649.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.4 429.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.4 210.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.4-9.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM584.8 758.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM584.8 539.4c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM584.8 320c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM584.8 100.6c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM584.8-118.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM804.2 649.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM804.2 429.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM804.2 210.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM804.2-9.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2z" />
-<glyph unicode="&#xe922;" glyph-name="icon-grid" d="M0 256v-256c0-105.6 86.4-192 192-192h256v448h-448zM448 832h-256c-105.6 0-192-86.4-192-192v-256h448v448zM832 832h-256v-448h448v256c0 105.6-86.4 192-192 192zM576-192h256c105.6 0 192 86.4 192 192v256h-448v-448z" />
-<glyph unicode="&#xe923;" glyph-name="icon-grippy-ew" d="M704 832h128v-1024h-128v1024zM448 832h128v-1024h-128v1024zM192 832h128v-1024h-128v1024z" />
-<glyph unicode="&#xe924;" glyph-name="icon-columns" d="M0 832h256v-1024h-256v1024zM384 832h256v-1024h-256v1024zM768 832h256v-1024h-256v1024z" />
-<glyph unicode="&#xe925;" glyph-name="icon-rows" d="M0 832h1024v-256h-1024v256zM0 448h1024v-256h-1024v256zM0 64h1024v-256h-1024v256z" />
-<glyph unicode="&#xe926;" glyph-name="icon-filter" 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-128h256.022v512l-192 192h640l-192-192v-512h256c70.601 0.227 127.773 57.399 128 127.978v768.022c-0.227 70.601-57.399 127.773-127.978 128h-0.022z" />
-<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="&#xe92b;" glyph-name="icon-eye-disabled" d="M209.46 223.32q-7.46 9.86-14.26 20.28c-14.737 21.984-27.741 47.184-37.759 73.847l-0.841 2.553c11.078 29.259 24.068 54.443 39.51 77.869l-0.91-1.469c23.221 34.963 50.705 64.8 82.207 89.793l0.793 0.607c57.663 45.719 130.179 75.053 209.311 79.947l1.069 0.053 114.48 140.88c-27.366 5.017-58.869 7.898-91.041 7.92h-0.019c-245.8 0-452.2-168-510.8-395.6 21.856-82.93 60.906-154.847 113.325-214.773l-0.525 0.613zM814.76 416.92q7.52-10 14.44-20.52c14.737-21.984 27.741-47.184 37.759-73.847l0.841-2.553c-10.859-29.216-23.863-54.416-39.447-77.748l0.847 1.348c-23.221-34.963-50.705-64.8-82.207-89.793l-0.793-0.607c-57.762-45.834-130.437-75.216-209.743-80.049l-1.057-0.051-114.46-140.86c27.346-4.988 58.817-7.84 90.955-7.84 0.037 0 0.074 0 0.111 0h-0.005c245.8 0 452.2 168 510.8 395.6-21.856 82.93-60.906 154.847-113.325 214.773l0.525-0.613zM832 832l-832-1024h192l832 1024h-192z" />
-<glyph unicode="&#xe92c;" glyph-name="icon-notebook-page" d="M830 770h-830l-4-702c0-106.6 87.4-194 194-194h640c106.6 0 194 87.4 194 194v508c0 106.8-87.4 194-194 194zM832 386l-384-384-192 192v256l192-192 384 384v-256z" />
-<glyph unicode="&#xe92d;" glyph-name="icon-unlocked" d="M768 832c-141.339-0.114-255.886-114.661-256-255.989v-128.011h-448c-35.301-0.113-63.887-28.699-64-63.989v-512.011c0.113-35.301 28.699-63.887 63.989-64h638.011c35.301 0.113 63.887 28.699 64 63.989v512.011c-0.113 35.301-28.699 63.887-63.989 64h-62.011v128c0 70.692 57.308 128 128 128s128-57.308 128-128v0-128h128v128c-0.114 141.339-114.661 255.886-255.989 256h-0.011z" />
-<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" />
-<glyph unicode="&#xea03;" glyph-name="icon-calendar" d="M896 832h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM640 384h-256v192h256v-192zM384 320h256v-192h-256v192zM320 128h-256v192h256v-192zM320 576v-192h-256v192h256zM128-128c-17 0-33 6.6-45.2 18.8s-18.8 28.2-18.8 45.2v128h256v-192h-192zM384-128v192h256v-192h-256zM960-64c0-17-6.6-33-18.8-45.2s-28.2-18.8-45.2-18.8h-192v192h256v-128zM960 128h-256v192h256v-192zM960 384h-256v192h256v-192z" />
-<glyph unicode="&#xea04;" glyph-name="icon-chain-links" d="M958.4 766.4c-43.8 43.8-101 65.6-158.4 65.6s-114.6-21.8-158.4-65.6l-128-128c-74-74-85.4-187-34-273l-12.8-12.8c-35.4 20.8-75 31.4-114.8 31.4-57.4 0-114.6-21.8-158.4-65.6l-128-128c-87.4-87.4-87.4-229.4 0-316.8 43.8-43.8 101-65.6 158.4-65.6s114.6 21.8 158.4 65.6l128 128c74 74 85.4 187 34 273l12.8 12.8c35.2-21 75-31.6 114.6-31.6 57.4 0 114.6 21.8 158.4 65.6l128 128c87.6 87.6 87.6 229.6 0.2 317zM419.8 92.2l-128-128c-18-18.2-42.2-28.2-67.8-28.2s-49.8 10-67.8 28.2c-37.4 37.4-37.4 98.4 0 135.8l128 128c18.2 18.2 42.2 28.2 67.8 28.2 5.6 0 11.2-0.6 16.8-1.4l-55.6-55.6c-10.4-10.4-16.2-24.2-16.2-38.8s5.8-28.6 16.2-38.8c10.4-10.4 24.2-16.2 38.8-16.2s28.6 5.8 38.8 16.2l55.6 55.6c5.4-30.4-3.6-62.2-26.6-85zM867.8 540.2l-128-128c-18-18.2-42.2-28.2-67.8-28.2-5.6 0-11.2 0.6-16.8 1.4l55.6 55.6c10.4 10.4 16.2 24.2 16.2 38.8s-5.8 28.6-16.2 38.8c-10.4 10.4-24.2 16.2-38.8 16.2s-28.6-5.8-38.8-16.2l-55.6-55.6c-5.2 29.8 3.6 61.6 26.6 84.6l128 128c18 18.4 42.2 28.4 67.8 28.4s49.8-10 67.8-28.2c37.6-37.4 37.6-98.2 0-135.6z" />
-<glyph unicode="&#xea05;" glyph-name="icon-download" d="M832 256v-255.66l-0.34-0.34-639.66 0.34v255.66h-192v-256c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v256h-192zM512 192l448 448h-256v192h-384v-192h-256l448-448z" />
-<glyph unicode="&#xea06;" glyph-name="icon-duplicate" d="M640 576v128c0 70.4-57.6 128-128 128h-384c-70.4 0-128-57.6-128-128v-384c0-70.4 57.6-128 128-128h128v139.6c0 134.8 109.6 244.4 244.4 244.4h139.6zM896 448h-384c-70.4 0-128-57.6-128-128v-384c0-70.4 57.6-128 128-128h384c70.4 0 128 57.6 128 128v384c0 70.4-57.6 128-128 128z" />
-<glyph unicode="&#xea07;" glyph-name="icon-folder-new" d="M896 640h-320c-16.4 16.4-96.8 96.8-109.2 109.2l-37.4 37.4c-25 25-74.2 45.4-109.4 45.4h-256c-35.2 0-64-28.8-64-64v-384c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v128c0 70.4-57.6 128-128 128zM896 384h-768c-70.4 0-128-57.6-128-128v-320c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v320c0 70.4-57.6 128-128 128zM704 32h-128v-128h-128v128h-128v128h128v128h128v-128h128v-128z" />
-<glyph unicode="&#xea08;" glyph-name="icon-fullscreen-collapse" d="M191.656 0c0.118-0.1 0.244-0.224 0.344-0.344v-191.656h192v192c0 105.6-86.4 192-192 192h-192v-192h191.656zM192 640.344c-0.1-0.118-0.224-0.244-0.344-0.344h-191.656v-192h192c105.6 0 192 86.4 192 192v192h-192v-191.656zM832 448h192v192h-191.656c-0.118 0.1-0.244 0.226-0.344 0.344v191.656h-192v-192c0-105.6 86.4-192 192-192zM832-0.344c0.1 0.118 0.224 0.244 0.344 0.344h191.656v192h-192c-105.6 0-192-86.4-192-192v-192h192v191.656z" />
-<glyph unicode="&#xea09;" glyph-name="icon-fullscreen-expand" d="M192.344 0c-0.118 0.1-0.244 0.224-0.344 0.344v191.656h-192v-192c0-105.6 86.4-192 192-192h192v192h-191.656zM192 639.656c0.1 0.118 0.224 0.244 0.344 0.344h191.656v192h-192c-105.6 0-192-86.4-192-192v-192h192v191.656zM832 832h-192v-192h191.656c0.118-0.1 0.244-0.226 0.344-0.344v-191.656h192v192c0 105.6-86.4 192-192 192zM832 0.344c-0.1-0.118-0.224-0.244-0.344-0.344h-191.656v-192h192c105.6 0 192 86.4 192 192v192h-192v-191.656z" />
-<glyph unicode="&#xea0a;" glyph-name="icon-layers" d="M1024 448l-512 384-512-384 512-384zM512-64l-426.666 320-85.334-64 512-384 512 384-85.334 64z" />
-<glyph unicode="&#xea0b;" glyph-name="icon-line-horz" d="M64 256c-35.346 0-64 28.654-64 64s28.654 64 64 64h896c35.346 0 64-28.654 64-64s-28.654-64-64-64h-896z" />
-<glyph unicode="&#xea0c;" glyph-name="icon-magnify" d="M1024-64l-256.8 256.8c42.4 66.6 65 144 64.8 223.2 0 229.8-186.2 416-416 416s-416-186.2-416-416 186.2-416 416-416c79-0.2 156.4 22.4 223.2 64.8l256.8-256.8 128 128zM212.4 212.4c-112.4 112.4-112.4 294.8 0 407.2s294.8 112.4 407.2 0 112.4-294.8 0-407.2c-54-54-127.2-84.4-203.6-84.4-76.4-0.2-149.8 30.2-203.6 84.4z" />
-<glyph unicode="&#xea0d;" glyph-name="icon-magnify-in" d="M1024-64l-256.86 256.86c40.681 62.963 64.861 139.898 64.861 222.481 0 0.232 0 0.464-0.001 0.696v-0.036c0 229.76-186.24 416-416 416s-416-186.24-416-416 186.24-416 416-416c0.196 0 0.427-0.001 0.659-0.001 82.583 0 159.518 24.18 224.112 65.846l-1.631-0.985 256.86-256.86zM212.36 212.36c-52.114 52.117-84.346 124.114-84.346 203.64 0 159.058 128.942 288 288 288s288-128.942 288-288c0-159.058-128.942-288-288-288-0.005 0-0.010 0-0.014 0h0.001c-0.242-0.001-0.529-0.001-0.815-0.001-79.271 0-151.010 32.251-202.811 84.348l-0.013 0.014zM224 480h384v-128h-384v128zM352 608h128v-384h-128v384z" />
-<glyph unicode="&#xea0e;" glyph-name="icon-magnify-out-v2" d="M767.2 192.8c42.4 66.6 65 144 64.8 223.2 0 229.8-186.2 416-416 416s-416-186.2-416-416 186.2-416 416-416c79-0.2 156.4 22.4 223.2 64.8l256.8-256.8 128 128-256.8 256.8zM619.6 212.4c-54-54-127.2-84.4-203.6-84.4-76.4-0.2-149.8 30.2-203.6 84.4-112.4 112.4-112.4 294.8 0 407.2s294.8 112.4 407.2 0c112.4-112.4 112.4-294.8 0-407.2zM224 480h384v-128h-384v128z" />
-<glyph unicode="&#xea0f;" glyph-name="icon-menu" d="M0 704h1024v-128h-1024v128zM0 384h1024v-128h-1024v128zM0 64h1024v-128h-1024v128z" />
-<glyph unicode="&#xea10;" glyph-name="icon-move" d="M293.4 320l218.6 218.6 256-256v421.4c0 70.4-57.6 128-128 128h-512c-70.4 0-128-57.6-128-128v-512c0-70.4 57.6-128 128-128h421.4l-256 256zM1024 384h-128v-320l-384 384-128-128 384-384h-320v-128h576z" />
-<glyph unicode="&#xea11;" glyph-name="icon-new-window" d="M448 832v-128h320l-384-384 128-128 384 384v-320h128v576zM576 157.726v-157.382c-0.1-0.118-0.226-0.244-0.344-0.344h-383.312c-0.118 0.1-0.244 0.226-0.344 0.344v383.312c0.1 0.118 0.226 0.244 0.344 0.344h157.382l192 192h-349.726c-105.6 0-192-86.4-192-192v-384c0-105.6 86.4-192 192-192h384c105.6 0 192 86.4 192 192v349.726l-192-192z" />
-<glyph unicode="&#xea12;" glyph-name="icon-paint-bucket-v2" d="M544 608v-224c0-88.4-71.6-160-160-160s-160 71.6-160 160v97.2l-197.4-196.4c-50-50-12.4-215.2 112.4-340s290-162.4 340-112.4l417 423.6-352 352zM896-192c70.6 0 128 57.4 128 128 0 108.6-128 192-128 192s-128-83.4-128-192c0-70.6 57.4-128 128-128zM384 320c-35.4 0-64 28.6-64 64v384c0 35.4 28.6 64 64 64s64-28.6 64-64v-384c0-35.4-28.6-64-64-64z" />
-<glyph unicode="&#xea13;" glyph-name="icon-pencil" d="M922.344 730.32c-38.612 38.596-81.306 69.232-120.304 86.324-68.848 30.25-104.77 9.078-120.194-6.344l-516.228-516.216-3.136-9.152-162.482-476.932 485.998 165.612 6.73 6.806 509.502 509.506c9.882 9.866 21.768 27.77 21.768 56.578 0.002 50.71-38.996 121.148-101.654 183.818zM237.982-23.66l-69.73 69.728 69.25 203.228 18.498 6.704h64v-128h128v-64l-6.846-18.506-203.172-69.154z" />
-<glyph unicode="&#xea14;" glyph-name="icon-pencil-edit-in-place" d="M922.4 730.4c-38.6 38.6-81.4 69.2-120.4 86.2-68.8 30.2-104.8 9-120.2-6.4l-516.2-516.2-3.2-9.2-162.4-476.8 486 165.6 516.2 516.4c9.8 9.8 21.8 27.8 21.8 56.6 0 50.6-39 121-101.6 183.8zM238-23.6l-69.8 69.6 69.2 203.2 18.4 6.8h64v-128h128v-64l-6.8-18.6-203-69zM0 832v-512l128 128v256h256l128 128zM1024-192v512l-128-128v-256h-256l-128-128z" />
-<glyph unicode="&#xea15;" glyph-name="icon-play" d="M1024 320l-1024-512v1024z" />
-<glyph unicode="&#xea16;" glyph-name="icon-pause" d="M126 834h256v-1024h-256v1024zM638 834h256v-1024h-256v1024z" />
-<glyph unicode="&#xea17;" glyph-name="icon-plot-resource" d="M255.8 128c0.2 0 0.2 0 0 0l0.2 128c0 70.6 57.4 128 128 128h255.8c0 0 0 0 0.2 0.2v127.8c0 70.6 57.4 128 128 128h143.6c-93.8 117-238 192-399.6 192-282.8 0-512-229.2-512-512 0-68 13.2-132.8 37.2-192h218.6zM768.2 512c-0.2 0-0.2 0 0 0l-0.2-128c0-70.6-57.4-128-128-128h-255.8c0 0 0 0-0.2-0.2v-127.8c0-70.6-57.4-128-128-128h-143.6c93.8-117 238-192 399.6-192 282.8 0 512 229.2 512 512 0 68-13.2 132.8-37.2 192h-218.6z" />
-<glyph unicode="&#xea18;" glyph-name="icon-pointer-left" d="M766-192l-256 512 256 512h-256l-256-512 256-512z" />
-<glyph unicode="&#xea19;" glyph-name="icon-pointer-right" d="M254 832l256-512-256-512h256l256 512-256 512z" />
-<glyph unicode="&#xea1a;" glyph-name="icon-refresh" d="M1024 371.2v460.8l-175.8-175.8c-85.2 69.6-190.8 107.6-302 107.6-127.6 0-247.6-49.8-338-140s-140-210.4-140-338 49.8-247.6 140-338 210.4-140 338-140 247.6 49.8 338 140c74 74 120.8 167.8 135 269.6h-138.6c-32-155.4-169.8-272.8-334.6-272.8-188.2 0-341.4 153.2-341.4 341.4s153.4 341.2 341.6 341.2c76.8 0 147.6-25.4 204.8-68.2l-187.8-187.8h460.8z" />
-<glyph unicode="&#xea1b;" glyph-name="icon-save" d="M192.2 256c-0.2 0-0.2 0 0 0l-0.2-448h640v447.8c0 0 0 0-0.2 0.2h-639.6zM978.8 621.2l-165.4 165.4c-25 25-74.2 45.4-109.4 45.4h-576c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128v448c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64v-448c70.4 0 128 57.6 128 128v576c0 35.2-20.4 84.4-45.2 109.2zM704 576c0-35.2-28.8-64-64-64h-448c-35.2 0-64 28.8-64 64v192h320v-192h128v192h128v-192z" />
-<glyph unicode="&#xea1c;" glyph-name="icon-save-as" d="M978.8 493.2l-64 64c24.8-24.8 45.2-74 45.2-109.2v-448c0-70.4-57.6-128-128-128h-640c-18.8 0-36.6 4.2-52.6 11.4 20.2-44.4 65-75.4 116.6-75.4h640c70.4 0 128 57.6 128 128v448c0 35.2-20.4 84.4-45.2 109.2zM704-64v319.8c0 0 0 0-0.2 0.2h-511.6l-0.2-320h512zM192 320h512c35.2 0 64-28.8 64-64v-320c70.4 0 128 57.6 128 128v448c0 35.2-20.4 84.4-45.2 109.2l-165.4 165.4c-25 25-74.2 45.4-109.4 45.4h-448c-70.4 0-128-57.6-128-128v-640c0-70.4 57.6-128 128-128v320c0 35.2 28.8 64 64 64zM128 768h192v-192h128v192h128v-192c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v192z" />
-<glyph unicode="&#xea1d;" glyph-name="icon-sine" d="M1024 320c-1.8 7.2-3.4 14.4-5.2 21.8-20.2 86.2-53.4 209.4-98.4 307.2-22.4 49-45.4 86.6-70.2 115.2-48.6 56-98.4 67.8-131.8 67.8-33.2 0-83.2-11.8-131.8-67.8-24.6-28.6-47.6-66.2-70-115.2-44.8-97.8-78.2-221-98.4-307.2-21.8-93-46.6-175.4-72-238.4-16.4-40.6-30.4-66.4-40.8-82.8-10.4 16.2-24.4 42.2-40.8 82.8-23.2 58-46.2 132.4-66.6 216.6h-198c1.8-7.2 3.4-14.4 5.2-21.8 20.2-86.2 53.4-209.4 98.4-307.2 22.4-49 45.4-86.6 70.2-115.2 48.6-56 98.6-67.8 131.8-67.8s83.2 11.8 131.8 67.8c24.8 28.6 47.6 66.2 70.2 115.2 44.8 97.8 78.2 221 98.4 307.2 21.8 93 46.6 175.4 72 238.4 16.4 40.6 30.4 66.4 40.8 82.8 10.4-16.2 24.4-42.2 40.8-82.8 23.4-57.8 46.4-132.4 66.8-216.4h197.6z" />
-<glyph unicode="&#xea1e;" glyph-name="icon-font" d="M800-192h224l-384 1024h-256l-384-1024h224l84 224h408zM380 224l132 352 132-352z" />
-<glyph unicode="&#xea1f;" glyph-name="icon-thumbs-strip" d="M448 450c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM1024 450c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM448-126c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM1024-126c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320z" />
-<glyph unicode="&#xea20;" glyph-name="icon-two-parts-both" d="M896 832h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM128 704h320v-768h-320v768zM896-64h-320v768h320v-768z" />
-<glyph unicode="&#xea21;" glyph-name="icon-two-parts-one-only" d="M896 832h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM896-64h-320v768h320v-768z" />
-<glyph unicode="&#xea22;" glyph-name="icon-resync" d="M795.2 667.2c-79.8 65.2-178.8 100.8-283.2 100.8-119.6 0-232.2-46.6-316.8-131.2-69.4-69.4-113.2-157.4-126.6-252.8h130c29.6 145.8 158.8 256 313.4 256 72 0 138.4-23.8 192-64l-176-176h432v432l-164.8-164.8zM512 0c-72 0-138.4 23.8-192 64l176 176h-432v-432l164.8 164.8c79.8-65.2 178.8-100.8 283.2-100.8 119.6 0 232.2 46.6 316.8 131.2 69.4 69.4 113.2 157.4 126.6 252.8h-130c-29.6-145.8-158.8-256-313.4-256z" />
-<glyph unicode="&#xea23;" glyph-name="icon-reset" d="M460.8 371.2l-187.8 187.8c57.2 42.8 128 68.2 204.8 68.2 188.2 0 341.6-153.2 341.6-341.4s-153.2-341.2-341.4-341.2c-165 0-302.8 117.6-334.6 273h-138.4c14.2-101.8 61-195.6 135-269.6 90.2-90.2 210.4-140 338-140s247.6 49.8 338 140 140 210.4 140 338-49.8 247.6-140 338-210.4 140-338 140c-111.4 0-217-38-302-107.6l-176 175.6v-460.8h460.8z" />
-<glyph unicode="&#xea24;" glyph-name="icon-x-in-circle" d="M512 832c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM832 128l-128-128-192 192-192-192-128 128 192 192-192 192 128 128 192-192 192 192 128-128-192-192 192-192z" />
-<glyph unicode="&#xea25;" glyph-name="icon-brightness" d="M253.414 513.939l-155.172 116.384c-50.233-66.209-85.127-146.713-97.91-234.39l-0.333-2.781 191.919-27.434c8.145 56.552 29.998 106.879 62.068 149.006l-0.573-0.784zM191.98 274.283l-191.919-27.434c13.115-90.459 48.009-170.963 99.174-238.453l-0.931 1.281 155.111 116.384c-31.476 41.347-53.309 91.675-61.231 146.504l-0.204 1.719zM466.283 640.020l-27.434 191.919c-90.459-13.115-170.963-48.009-238.453-99.174l1.281 0.931 116.384-155.111c41.347 31.476 91.675 53.309 146.504 61.231l1.719 0.204zM822.323 733.758c-66.209 50.233-146.713 85.127-234.39 97.91l-2.781 0.333-27.434-191.919c56.552-8.145 106.879-29.998 149.006-62.068l-0.784 0.573zM832.020 365.717l191.919 27.434c-13.115 90.459-48.009 170.963-99.174 238.453l0.931-1.281-155.111-116.384c31.476-41.347 53.309-91.675 61.231-146.504l0.204-1.719zM201.677-93.758c66.209-50.233 146.713-85.127 234.39-97.91l2.781-0.333 27.434 191.919c-56.552 8.145-106.879 29.998-149.006 62.068l0.784-0.573zM770.586 126.061l155.131-116.343c50.233 66.209 85.127 146.713 97.91 234.39l0.333 2.781-191.919 27.434c-8.125-56.564-29.966-106.906-62.028-149.049l0.574 0.786zM557.717-0.020l27.434-191.919c90.459 13.115 170.963 48.009 238.453 99.174l-1.281-0.931-116.384 155.111c-41.347-31.476-91.675-53.309-146.504-61.231l-1.719-0.204zM770.586 320c0-142.813-115.773-258.586-258.586-258.586s-258.586 115.773-258.586 258.586c0 142.813 115.773 258.586 258.586 258.586s258.586-115.773 258.586-258.586z" />
-<glyph unicode="&#xea26;" glyph-name="icon-contrast" d="M512 832c-282.78 0-512-229.24-512-512s229.22-512 512-512 512 229.24 512 512-229.22 512-512 512zM783.52 48.48c-69.111-69.481-164.785-112.481-270.502-112.481-0.358 0-0.716 0-1.074 0.001h0.055v768c212.070-0.010 383.982-171.929 383.982-384 0-106.034-42.977-202.031-112.462-271.52v0z" />
-<glyph unicode="&#xea27;" glyph-name="icon-expand" d="M960 832c0 0 0 0 0 0h-320v-128h165.4l-210.6-210.8c-25-25-25-65.6 0-90.6 12.4-12.4 28.8-18.8 45.2-18.8s32.8 6.2 45.2 18.8l210.8 210.8v-165.4h128v384h-64zM896 26.6l-210.8 210.6c-25 25-65.6 25-90.6 0s-25-65.6 0-90.6l210.8-210.6h-165.4v-128h384v384h-128v-165.4zM218.6 704h165.4v128h-320c0 0 0 0 0 0h-64v-384h128v165.4l210.8-210.8c12.4-12.4 28.8-18.8 45.2-18.8s32.8 6.2 45.2 18.8c25 25 25 65.6 0 90.6l-210.6 210.8zM338.8 237.2l-210.8-210.6v165.4h-128v-384h384v128h-165.4l210.8 210.8c25 25 25 65.6 0 90.6-25.2 24.8-65.6 24.8-90.6-0.2z" />
-<glyph unicode="&#xea28;" glyph-name="icon-list-view" d="M0 768h1024v-128h-1024v128zM0 512h1024v-128h-1024v128zM0 256h1024v-128h-1024v128zM0 0h1024v-128h-1024v128z" />
-<glyph unicode="&#xea29;" glyph-name="icon-grid-snap-to" d="M382 2h448v448h-448v-448zM510 322h192v-192h-192v192zM-2 258h320v-64h-320v64zM894 258h128v-64h-128v64zM574 834h64v-320h-64v320zM574-62h64v-128h-64v128zM574 258h64v-64h-64v64z" />
-<glyph unicode="&#xea2a;" glyph-name="icon-grid-snap-no" d="M768 256h192v-64h-192v64zM256 256h192v-64h-192v64zM0 256h192v-64h-192v64zM640 320h-64v-64h-64v-64h64v-64h64v64h64v64h-64zM576 576h64v-192h-64v192zM576 832h64v-192h-64v192zM576 64h64v-192h-64v192z" />
-<glyph unicode="&#xea2b;" glyph-name="icon-frame-show" d="M0 768v-896h1024v896h-1024zM896 0h-768v640h768v-640zM192 576h384v-128h-384v128z" />
-<glyph unicode="&#xea2c;" glyph-name="icon-frame-hide" d="M128 642h420l104 128h-652v-802.4l128 157.4zM896 2h-420l-104-128h652v802.4l-128-157.4zM832 834l-832-1024h192l832 1024zM392 450l104 128h-304v-128z" />
-<glyph unicode="&#xea2d;" glyph-name="icon-import" d="M832 639.6v-639.4c0-0.2-0.2-0.2-0.4-0.4h-319.6v-192h320c105.6 0 192 86.4 192 192v640.2c0 105.6-86.4 192-192 192h-320v-192h319.6c0.2 0 0.4-0.2 0.4-0.4zM192 128v-192l384 384-384 384v-192h-192v-384z" />
-<glyph unicode="&#xea2e;" glyph-name="icon-export" d="M192 0.34v639.32l0.34 0.34h319.66v192h-320c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h320v192h-319.66zM1024 320l-384 384v-192h-192v-384h192v-192l384 384z" />
-<glyph unicode="&#xea2f;" glyph-name="icon-font-size" horiz-adv-x="1504" d="M1226.4 512h-176l-76.22-203.24 77-205.34 87.22 232.58 90.74-242h-174.44l49.5-132h174.44l57.76-154h154l-264 704zM384 832l-384-1024h224l84 224h408l84-224h224l-384 1024zM380 224l132 352 132-352z" />
-<glyph unicode="&#xea30;" glyph-name="icon-clear-data" d="M632 520l-120-120-120 120-80-80 120-120-120-120 80-80 120 120 120-120 80 80-120 120 120 120-80 80zM512 832c-282.76 0-512-86-512-192v-640c0-106 229.24-192 512-192s512 86 512 192v640c0 106-229.24 192-512 192zM512 0c-176.731 0-320 143.269-320 320s143.269 320 320 320c176.731 0 320-143.269 320-320v0c0-176.731-143.269-320-320-320v0z" />
-<glyph unicode="&#xea31;" glyph-name="icon-history" d="M576 768c-247.4 0-448-200.6-448-448h-128l192-192 192 192h-128c0 85.4 33.2 165.8 93.8 226.2 60.4 60.6 140.8 93.8 226.2 93.8s165.8-33.2 226.2-93.8c60.6-60.4 93.8-140.8 93.8-226.2s-33.2-165.8-93.8-226.2c-60.4-60.6-140.8-93.8-226.2-93.8s-165.8 33.2-226.2 93.8l-90.6-90.6c81-81 193-131.2 316.8-131.2 247.4 0 448 200.6 448 448s-200.6 448-448 448zM576 560c-26.6 0-48-21.4-48-48v-211.8l142-142c9.4-9.4 21.6-14 34-14s24.6 4.6 34 14c18.8 18.8 18.8 49.2 0 67.8l-114 114v172c0 26.6-21.4 48-48 48z" />
-<glyph unicode="&#xea32;" glyph-name="icon-arrow-up-to-parent" horiz-adv-x="1056" d="M643.427 6.739c-81.955 0.697-148.179 67.065-148.642 149.010v395.872l296.871-247.393v197.914l-395.828 329.857-395.828-328.62v-197.502l296.871 246.156v-396.241c0-190.905 155.239-346.556 346.144-346.968l412.321-0.825 0.412 197.914z" />
-<glyph unicode="&#xea33;" glyph-name="icon-crosshair-in-circle" d="M512 832c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM783.6 48.4c-54.634-54.8-125.77-93.12-205.322-106.874l-2.278-0.326v250.8h-128v-250.8c-161.302 28.062-286.738 153.497-314.468 312.5l-0.332 2.3h250.8v128h-250.8c28.062 161.302 153.497 286.738 312.5 314.468l2.3 0.332v-250.8h128v250.8c161.302-28.062 286.738-153.497 314.468-312.5l0.332-2.3h-250.8v-128h250.8c-14.080-81.83-52.4-152.966-107.191-207.591l-0.009-0.009z" />
-<glyph unicode="&#xea34;" glyph-name="icon-target" d="M512 448c70.692 0 128-57.308 128-128s-57.308-128-128-128c-70.692 0-128 57.308-128 128v0c0.114 70.647 57.353 127.886 127.989 128h0.011zM512 576c-141.385 0-256-114.615-256-256s114.615-256 256-256c141.385 0 256 114.615 256 256v0c-0.114 141.339-114.661 255.886-255.989 256h-0.011zM512 704c211.87-0.128 383.575-171.912 383.575-383.8 0-211.967-171.833-383.8-383.8-383.8s-383.8 171.833-383.8 383.8c0 105.99 42.963 201.945 112.425 271.4v0c69.21 69.437 164.944 112.401 270.713 112.401 0.312 0 0.624 0 0.936-0.001h-0.048zM512 832c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512z" />
-<glyph unicode="&#xea35;" glyph-name="icon-items-collapse" d="M45.2 173.2h229.6l-274.8-274.6 90.6-90.6 274.6 274.8v-229.6h128v448h-448v-128zM1024 741.4l-90.6 90.6-274.6-274.8v229.6h-128v-448h448v128h-229.6l274.8 274.6z" />
-<glyph unicode="&#xea36;" glyph-name="icon-items-expand" d="M448-64h-229.4l274.6 274.8-90.4 90.4-274.8-274.6v229.4h-128v-448h448v128zM530.8 429.2l90.4-90.4 274.8 274.6v-229.4h128v448h-448v-128h229.4l-274.6-274.8z" />
-<glyph unicode="&#xea37;" glyph-name="icon-3-dots" d="M256 320c0-70.692-57.308-128-128-128s-128 57.308-128 128c0 70.692 57.308 128 128 128s128-57.308 128-128zM640 320c0-70.692-57.308-128-128-128s-128 57.308-128 128c0 70.692 57.308 128 128 128s128-57.308 128-128zM1024 320c0-70.692-57.308-128-128-128s-128 57.308-128 128c0 70.692 57.308 128 128 128s128-57.308 128-128z" />
-<glyph unicode="&#xea38;" glyph-name="icon-grid-on" d="M1024 448v128h-256v256h-128v-256h-256v256h-128v-256h-256v-128h256v-256h-256v-128h256v-256h128v256h256v-256h128v256h256v128h-256v256zM640 192h-256v256h256z" />
-<glyph unicode="&#xea39;" glyph-name="icon-grid-off" d="M256 280.6l128 157.6v9.8h8l104 128h-112v256h-128v-256h-256v-128h256v-167.4zM184 192h-184v-128h80l104 128zM768 359.4l-128-157.6v-9.8h-8l-104-128h112v-256h128v256h256v128h-256v167.4zM840 448h184v128h-80l-104-128zM832 832l-832-1024h192l832 1024h-192z" />
-<glyph unicode="&#xea3a;" glyph-name="icon-camera" d="M896 576h-128l-128 256h-256l-128-256h-128c-70.601-0.227-127.773-57.399-128-127.978v-512.022c0.227-70.601 57.399-127.773 127.978-128h768.022c70.601 0.227 127.773 57.399 128 127.978v512.022c-0.227 70.601-57.399 127.773-127.978 128h-0.022zM512-32c-141.385 0-256 114.615-256 256s114.615 256 256 256c141.385 0 256-114.615 256-256v0c0-141.385-114.615-256-256-256v0z" />
-<glyph unicode="&#xea3b;" glyph-name="icon-folders-collapse" d="M896 512v-448c-0.215-70.606-57.394-127.785-127.979-128h-576.021c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979v448.021c-0.215 70.606-57.394 127.785-127.979 128h-0.021zM832 128v448c-0.215 70.606-57.394 127.785-127.979 128h-192.021l-101.5 82.74c-24.88 24.9-74.040 45.26-109.24 45.26h-237.26c-35.305-0.102-63.898-28.695-64-63.99v-640.010c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979v0.021zM128 188v516l256-260z" />
-<glyph unicode="&#xeb00;" glyph-name="icon-activity" d="M576 768h-256l320-320h-290.256c-44.264 76.516-126.99 128-221.744 128h-128v-512h128c94.754 0 177.48 51.484 221.744 128h290.256l-320-320h256l448 448-448 448z" />
-<glyph unicode="&#xeb01;" glyph-name="icon-activity-mode" d="M512 832c-214.8 0-398.8-132.4-474.8-320h90.8c56.8 0 108-24.8 143-64h241l-192 192h256l320-320-320-320h-256l192 192h-241c-35-39.2-86.2-64-143-64h-90.8c76-187.6 259.8-320 474.8-320 282.8 0 512 229.2 512 512s-229.2 512-512 512z" />
-<glyph unicode="&#xeb02;" glyph-name="icon-autoflow-tabular" d="M192 832c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h64v1024h-64zM384 832h256v-1024h-256v1024zM832 832h-64v-704h256v512c0 105.6-86.4 192-192 192z" />
-<glyph unicode="&#xeb03;" glyph-name="icon-clock" d="M512 832c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM782 142c-12.8-22.2-36.6-36-62.4-36-12.6 0-25 3.4-36 9.6l-222 128.2c-0.8 0.4-1.6 1-2.4 1.4l-0.8 0.6-1.8 1.2-2.4 2-1.8 1.4-0.6 0.6c-0.8 0.6-1.4 1.2-2.2 1.8v0c-5 4.6-9.4 10-13 15.8-0.2 0.4-0.6 1-0.8 1.4s-0.6 1-0.8 1.4c-3.2 6-5.8 12.4-7.2 19.2v0.2c-0.2 1-0.4 1.8-0.6 2.8 0 0.2 0 0.6-0.2 0.8-0.2 0.6-0.2 1.4-0.2 2.2s-0.2 1-0.2 1.6 0 1-0.2 1.6-0.2 1.6-0.2 2.2c0 0.4 0 0.6 0 1 0 1 0 1.8 0 2.8 0 0 0 0.2 0 0.4v363.8c0 39.8 32.2 72 72 72s72-32.2 72-72v-322.4l185.8-107.2c34.2-20 45.8-64 26-98.4z" />
-<glyph unicode="&#xeb04;" glyph-name="icon-database" d="M1024 640c0-106.039-229.23-192-512-192s-512 85.961-512 192c0 106.039 229.23 192 512 192s512-85.961 512-192zM512 320c-282.77 0-512 85.962-512 192v-512c0-106.038 229.23-192 512-192s512 85.962 512 192v512c0-106.038-229.23-192-512-192z" />
-<glyph unicode="&#xeb05;" glyph-name="icon-database-query" d="M683.52 12.714c-50.782-28.456-109.284-44.714-171.52-44.714-194.094 0-352 157.906-352 352s157.906 352 352 352 352-157.906 352-352c0-62.236-16.258-120.738-44.714-171.52l191.692-191.692c8.516 13.89 13.022 28.354 13.022 43.212v640c0 106.038-229.23 192-512 192s-512-85.962-512-192v-640c0-106.038 229.23-192 512-192 126.11 0 241.548 17.108 330.776 45.46l-159.256 159.254zM352 320c0-88.224 71.776-160 160-160s160 71.776 160 160-71.776 160-160 160-160-71.776-160-160z" />
-<glyph unicode="&#xeb06;" glyph-name="icon-dataset" d="M896 640h-320c-16.4 16.4-96.8 96.8-109.2 109.2l-37.4 37.4c-25 25-74.2 45.4-109.4 45.4h-256c-35.2 0-64-28.8-64-64v-384c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v128c0 70.4-57.6 128-128 128zM896 384h-768c-70.4 0-128-57.6-128-128v-320c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v320c0 70.4-57.6 128-128 128zM320-64h-128v320h128v-320zM576-64h-128v320h128v-320zM832-64h-128v320h128v-320z" />
-<glyph unicode="&#xeb07;" glyph-name="icon-datatable" d="M1024 640c0-106.039-229.23-192-512-192s-512 85.961-512 192c0 106.039 229.23 192 512 192s512-85.961 512-192zM512 320c-282.8 0-512 86-512 192v-512c0-106 229.2-192 512-192s512 86 512 192v512c0-106-229.2-192-512-192zM896 257v-256c-36.6-15.6-79.8-28.8-128-39.4v256c48.2 10.6 91.4 23.8 128 39.4zM256 217.6v-256c-48.2 10.4-91.4 23.8-128 39.4v256c36.6-15.6 79.8-28.8 128-39.4zM384-58v256c41-4 83.8-6 128-6s87 2.2 128 6v-256c-41-4-83.8-6-128-6s-87 2.2-128 6z" />
-<glyph unicode="&#xeb08;" glyph-name="icon-dictionary" d="M832 192c105.6 0 192 86.4 192 192v256c0 105.6-86.4 192-192 192v-320l-128 64-128-64v320h-384c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v192c0-105.6-86.4-192-192-192h-640v192h640z" />
-<glyph unicode="&#xeb09;" glyph-name="icon-folder" d="M896 640h-320c-16.4 16.4-96.8 96.8-109.2 109.2l-37.4 37.4c-25 25-74.2 45.4-109.4 45.4h-256c-35.2 0-64-28.8-64-64v-384c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v128c0 70.4-57.6 128-128 128zM896 384h-768c-70.4 0-128-57.6-128-128v-320c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v320c0 70.4-57.6 128-128 128z" />
-<glyph unicode="&#xeb0a;" glyph-name="icon-image" d="M896 832h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM896-64h-768v768h768v-768zM320 576l-128-128v-448h640v320l-128 128-128-128z" />
-<glyph unicode="&#xeb0b;" glyph-name="icon-layout" d="M448 832h-256c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h256v1024zM832 832h-256v-577.664h448v385.664c0 105.6-86.4 192-192 192zM576-192h256c105.6 0 192 86.4 192 192v129.664h-448v-321.664z" />
-<glyph unicode="&#xeb0c;" glyph-name="icon-object" d="M512-192l512 320v384l-512.020 320-511.98-320v-384l512-320zM512 640l358.4-224-358.4-224-358.4 224 358.4 224z" />
-<glyph unicode="&#xeb0d;" glyph-name="icon-object-unknown" d="M510 834l-512-320v-384l512-320 512 320v384l-512 320zM585.4-27.2c-21.2-20.8-46-30.8-76-30.8-31.2 0-56.2 9.8-76.2 29.6-20 20-29.6 44.8-29.6 76.2 0 30.4 10.2 55.2 31 76.2s45.2 31.2 74.8 31.2c29.6 0 54.2-10.4 75.6-32s31.8-46.4 31.8-76c-0.2-29-10.8-54-31.4-74.4zM638.2 285.4c-23.6-11.8-37.4-22-43.4-32.4-3.6-6.2-6-14.8-7.4-26.8v-41h-161.4v44.2c0 40.2 4.4 69.8 13 88 8 17.2 22.6 30.2 44.8 40l34.8 15.4c32 14.2 48.2 35.2 48.2 62.8 0 16-6 30.4-17.2 41.8-11.2 11.2-25.6 17.2-41.6 17.2-24 0-54.4-10-62.8-57.4l-2.2-12.2h-147l1.4 16.2c4 44.6 17 82.4 38.8 112.2 19.6 27 45.6 48.6 77 64.6s64.6 24 98.2 24c60.6 0 110.2-19.4 151.4-59.6 41.2-40 61.2-88 61.2-147.2 0-70.8-28.8-121.4-85.8-149.8z" />
-<glyph unicode="&#xeb0e;" glyph-name="icon-packet" d="M512 832l-512-320v-512c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v512l-512 320zM512 640l358.4-224-358.4-224-358.4 224 358.4 224z" />
-<glyph unicode="&#xeb0f;" glyph-name="icon-page" d="M704 320c-105.6 0-192 86.4-192 192v320h-320c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v320h-320zM768 448h256l-384 384v-256c0-70.4 57.6-128 128-128z" />
-<glyph unicode="&#xeb10;" glyph-name="icon-plot-overlay" d="M830 832h-636c-106.7 0-194-87.3-194-194v-406.82c14.18-18.64 25.66-28.34 32-30.84 14.28 5.62 54.44 47.54 92.96 146 42.46 108.38 116.32 237.66 227.040 237.66 52.4 0 101.42-29.16 145.7-86.68 37.34-48.5 64.84-108.92 81.34-151.080 38.52-98.38 78.68-140.3 92.96-146 14.28 5.62 54.44 47.54 92.96 146 42.46 108.48 116.32 237.76 227.040 237.76 11.355-0.003 22.389-1.366 32.952-3.936l-0.952 0.196v57.74c0 106.7-87.3 194-194 194zM992 439.66c-14.28-5.62-54.44-47.52-92.96-146-42.46-108.38-116.32-237.66-227.040-237.66-52.4 0-101.42 29.16-145.7 86.68-37.34 48.5-64.84 108.92-81.34 151.080-38.52 98.38-78.68 140.3-92.96 146-14.28-5.62-54.44-47.52-92.96-146-42.46-108.48-116.32-237.76-227.040-237.76-11.355 0.003-22.389 1.367-32.952 3.936l0.952-0.196v-57.74c0-106.7 87.3-194 194-194h636c106.7 0 194 87.3 194 194v406.82c-14.18 18.64-25.66 28.34-32 30.84z" />
-<glyph unicode="&#xeb11;" glyph-name="icon-plot-stacked" d="M89.6 520c24.98 0 48.96 26.52 85.52 70.18 45.42 54.28 102 121.82 196 121.82 44.64 0 86.62-15.46 124.8-46 28.68-22.9 51.16-50.42 72.92-77.060 38.42-46.94 59.16-68.94 83.96-68.94h371.2v118c0 106.7-87.3 194-194 194h-636c-106.7 0-194-87.3-194-194v-118h89.6zM529.5 421.6c-28.24 22.64-50.52 50-72 76.28-35.5 43.48-58.76 70.12-86.3 70.12-25.060 0-49.080-26.54-85.66-70.24-45.4-54.24-102-121.76-196-121.76h-89.54v-112h371.2c44 0 85.54-15.34 123.3-45.6 28.24-22.64 50.52-50 72-76.28 35.5-43.48 58.76-70.12 86.3-70.12 25.060 0 49.080 26.54 85.66 70.24 45.4 54.24 102 121.76 196 121.76h89.54v112h-371.2c-44.060 0-85.54 15.34-123.3 45.6zM934.4 120c-24.98 0-48.96-26.52-85.52-70.18-45.42-54.28-102-121.82-196-121.82-44.64 0-86.62 15.46-124.8 46-28.68 22.9-51.16 50.42-72.92 77.060-38.42 46.94-59.16 68.94-83.96 68.94h-371.2v-118c0-106.7 87.3-194 194-194h636c106.7 0 194 87.3 194 194v118h-89.6z" />
-<glyph unicode="&#xeb12;" glyph-name="icon-session" d="M635.6 307.6c6.6-4.2 13.2-8.6 19.2-13.6l120.4-96.4c29.6-23.8 83.8-23.8 113.4 0l135.2 108c0.2 4.8 0.2 9.4 0.2 14.2 0 52.2-7.8 102.4-22.2 149.8l-154.8-123.6c-58.2-46.6-140.2-59.2-211.4-38.4zM248.6 197.8l120.4 96.4c58 46.4 140 59.2 211.2 38.4-6.6 4.2-13.2 8.6-19.2 13.6l-120.4 96.4c-29.6 23.8-83.8 23.8-113.4 0l-120.2-96.6c-40-32-91.4-48-143-48-21.6 0-43 2.8-63.8 8.4 0-0.6 0-1.2 0-1.6 5-3.4 10-6.8 14.6-10.6l120.4-96.4c29.8-23.8 83.8-23.8 113.4 0zM120.6 453.8l120.4 96.4c80.2 64.2 205.6 64.2 285.8 0l120.4-96.4c29.6-23.8 83.8-23.8 113.4 0l181 144.8c-91.2 140.4-249.6 233.4-429.6 233.4-238.6 0-439.2-163.2-496-384.2 30.8-17.6 77.8-15.6 104.6 6zM689 90l-120.4 96.4c-29.6 23.8-83.8 23.8-113.4 0l-120.2-96.4c-40-32-91.4-48-143-48-47.8 0-95.4 13.8-134.2 41.4 85.6-163.6 256.8-275.4 454.2-275.4s368.6 111.8 454.2 275.4c-80.4-57.4-199.8-55.2-277.2 6.6z" />
-<glyph unicode="&#xeb13;" glyph-name="icon-tabular" d="M896 832h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM640 384h-256v192h256v-192zM384 320h256v-192h-256v192zM320 128h-256v192h256v-192zM320 576v-192h-256v192h256zM128-128c-17 0-33 6.6-45.2 18.8s-18.8 28.2-18.8 45.2v128h256v-192h-192zM384-128v192h256v-192h-256zM960-64c0-17-6.6-33-18.8-45.2s-28.2-18.8-45.2-18.8h-192v192h256v-128zM960 128h-256v192h256v-192zM960 384h-256v192h256v-192z" />
-<glyph unicode="&#xeb14;" glyph-name="icon-tabular-lad" d="M896 832h-768c-70.6-0.2-127.8-57.4-128-128v-768c0.2-70.6 57.4-127.8 128-128h768c70.6 0.2 127.8 57.4 128 128v768c-0.2 70.6-57.4 127.8-128 128zM64 576h256v-192h-256v192zM64 320h256v-192h-256v192zM128-128c-35.2 0.2-63.8 28.8-64 64v128h256v-192h-192zM384-128v192h256v-192h-256zM960-64c-0.2-35.2-28.8-63.8-64-64h-192v192h256v-128zM960 320v-192h-576v192h64v64h-64v192h576v-192h-64v-64h64zM782.4 284.6l-110.4 55.2v172.2c0 17.6-14.4 32-32 32s-32-14.4-32-32v-211.8l145.6-72.8c15.8-8 35-1.6 43 14.4 8 15.6 1.6 35-14.2 42.8v0z" />
-<glyph unicode="&#xeb15;" glyph-name="icon-tabular-lad-set" d="M128 64v576c-70.6-0.2-127.8-57.4-128-128v-576c0.2-70.6 57.4-127.8 128-128h576c70.6 0.2 127.8 57.4 128 128h-576c-70.6 0.2-127.8 57.4-128 128zM896 832h-576c-70.6-0.2-127.8-57.4-128-128v-576c0.2-70.6 57.4-127.8 128-128h576c70.6 0.2 127.8 57.4 128 128v576c-0.2 70.6-57.4 127.8-128 128zM256 640h192v-128h-192v128zM256 448h192v-192h-192v192zM320 64c-35.2 0.2-63.8 28.8-64 64v64h192v-128h-128zM512 64v128h192v-128h-192zM960 128c-0.2-35.2-28.8-63.8-64-64h-128v128h192v-64zM960 256h-448v384h448v-384zM832 352c17.6 0 32 14.4 32 32 0 13.8-8.8 26-21.8 30.4l-74.2 24.6v105c0 17.6-14.4 32-32 32s-32-14.4-32-32v-151l117.8-39.2c3.4-1.2 6.8-1.8 10.2-1.8z" />
-<glyph unicode="&#xeb16;" glyph-name="icon-tabular-realtime" d="M896 832h-768c-70.606-0.215-127.785-57.394-128-127.979v-768.021c0.215-70.606 57.394-127.785 127.979-128h768.021c70.606 0.215 127.785 57.394 128 127.979v768.021c-0.215 70.606-57.394 127.785-127.979 128h-0.021zM448 540l25.060-25.32c7.916-7.922 18.856-12.822 30.94-12.822s23.023 4.9 30.94 12.822v0l75.5 76.3c29.97 30.338 71.571 49.128 117.56 49.128s87.59-18.79 117.544-49.112l0.016-0.016 50.44-50.98v-152.2c-24.111 8.83-44.678 22.255-61.542 39.342l-0.018 0.018-75.5 76.3c-7.916 7.922-18.856 12.822-30.94 12.822s-23.023-4.9-30.94-12.822v0l-75.5-76.3c-29.971-30.343-71.575-49.137-117.568-49.137-20.084 0-39.331 3.584-57.137 10.146l1.145-0.369v152.2zM320-128h-192c-35.26 0.214-63.786 28.74-64 63.98v128.020h256v-192zM320 128h-256v192h256v-192zM320 384h-256v192h256v-192zM640-128h-256v192h256v-192zM448 195.38v174.5c1.88-1.74 3.74-3.5 5.56-5.34l75.5-76.3c7.916-7.922 18.856-12.822 30.94-12.822s23.023 4.9 30.94 12.822v0l75.5 76.3c29.966 30.333 71.56 49.119 117.542 49.119 43.28 0 82.673-16.643 112.128-43.879l-0.11 0.1v-174.5c-1.88 1.74-3.74 3.5-5.56 5.34l-75.5 76.3c-7.916 7.922-18.856 12.822-30.94 12.822s-23.023-4.9-30.94-12.822v0l-75.5-76.3c-29.966-30.333-71.56-49.119-117.542-49.119-43.28 0-82.673 16.643-112.128 43.879l0.11-0.1zM960-64c-0.214-35.26-28.74-63.786-63.98-64h-192.020v192h256v-128z" />
-<glyph unicode="&#xeb17;" glyph-name="icon-tabular-scrolling" d="M64 832c-35.2 0-64-28.8-64-64v-192h448v256h-384zM1024 576v192c0 35.2-28.8 64-64 64h-384v-256h448zM0 448v-192c0-35.2 28.8-64 64-64h384v256h-448zM960 192c35.2 0 64 28.8 64 64v192h-448v-256h384zM512-192l-256 256h512z" />
-<glyph unicode="&#xeb18;" glyph-name="icon-telemetry" d="M32 200.34c14.28 5.62 54.44 47.54 92.96 146 42.46 108.38 116.32 237.66 227.040 237.66 52.4 0 101.42-29.16 145.7-86.68 37.34-48.5 64.84-108.92 81.34-151.080 38.52-98.38 78.68-140.3 92.96-146 14.28 5.62 54.44 47.54 92.96 146 37.4 95.5 99.14 207.14 188.94 232.46-90.462 152.598-254.314 253.3-441.686 253.3-0.075 0-0.15 0-0.225 0h0.011c-282.76 0-512-229.24-512-512 0-0.032 0-0.070 0-0.108 0-35.719 3.641-70.587 10.572-104.254l-0.572 3.323c9.54-10.78 17.22-16.74 22-18.62zM992 439.66c-14.28-5.62-54.44-47.52-92.96-146-42.46-108.38-116.32-237.66-227.040-237.66-52.4 0-101.42 29.16-145.7 86.68-37.34 48.5-64.84 108.92-81.34 151.080-38.52 98.38-78.68 140.3-92.96 146-14.28-5.62-54.44-47.52-92.96-146-37.4-95.5-99.14-207.14-188.94-232.46 90.462-152.598 254.314-253.3 441.686-253.3 0.075 0 0.15 0 0.225 0h-0.011c282.76 0 512 229.24 512 512 0 0.032 0 0.070 0 0.108 0 35.719-3.641 70.587-10.572 104.254l0.572-3.323c-9.54 10.78-17.22 16.74-22 18.62z" />
-<glyph unicode="&#xeb19;" glyph-name="icon-timeline" d="M256 576h384v-128h-384v128zM384 384h384v-128h-384v128zM320 192h384v-128h-384v128zM832 832h-128v-192h127.6c0.2 0 0.2-0.2 0.4-0.4v-639.4c0-0.2-0.2-0.2-0.4-0.4h-127.6v-192h128c105.6 0 192 86.4 192 192v640.2c0 105.6-86.4 192-192 192zM192 0.4v639.2c0 0.2 0.2 0.2 0.4 0.4h127.6v192h-128c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h128v192h-127.6c-0.2 0-0.4 0.2-0.4 0.4z" />
-<glyph unicode="&#xeb1a;" glyph-name="icon-timer" d="M640 685.4v82.58c0 35.346-28.654 64-64 64v0h-128c-35.346 0-64-28.654-64-64v0-82.58c-185.040-55.080-320-226.48-320-429.42 0-247.42 200.58-448 448-448s448 200.58 448 448c0 202.96-135 374.4-320 429.42zM532 235.98l-263.76-211c-57.105 59.935-92.24 141.25-92.24 230.772 0 0.080 0 0.16 0 0.24v-0.012c0 185.28 150.72 336 336 336 6.72 0 13.38-0.22 20-0.62v-355.38z" />
-<glyph unicode="&#xeb1b;" glyph-name="icon-topic" d="M454.36 355.36l86.3 86.3c9.088 8.965 21.577 14.502 35.36 14.502s26.272-5.537 35.366-14.507l86.294-86.294c19.328-19.358 42.832-34.541 69.047-44.082l1.313-0.418v172.14l-57.64 57.64c-34.408 34.33-81.9 55.558-134.35 55.558s-99.943-21.228-134.354-55.562l-86.296-86.296c-9.088-8.965-21.577-14.502-35.36-14.502s-26.272 5.537-35.366 14.507l-28.674 28.654v-172.14c19.045-7.022 41.040-11.084 63.984-11.084 52.463 0 99.966 21.239 134.379 55.587l-0.003-0.003zM505.64 284.64l-86.3-86.3c-9.088-8.965-21.577-14.502-35.36-14.502s-26.272 5.537-35.366 14.507l-86.294 86.294c-2 2-4.2 4-6.36 6v-197.36c33.664-30.721 78.65-49.537 128.031-49.537 52.44 0 99.923 21.22 134.333 55.541l86.296 86.296c9.088 8.965 21.577 14.502 35.36 14.502s26.272-5.537 35.366-14.507l86.294-86.294c2-2 4.2-4 6.36-6v197.36c-33.664 30.721-78.65 49.537-128.031 49.537-52.44 0-99.923-21.22-134.333-55.541l0.004 0.004zM832 832h-128v-192h127.66l0.34-0.34v-639.32l-0.34-0.34h-127.66v-192h128c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM320 0h-127.66l-0.34 0.34v639.32l0.34 0.34h127.66v192h-128c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h128v192z" />
-<glyph unicode="&#xeb1c;" glyph-name="icon-box-with-dashed-lines-v2" d="M0 448h128v-256h-128v256zM128 703.78l0.22 0.22h191.78v128h-192c-70.606-0.215-127.785-57.394-128-127.979v-192.021h128v191.78zM128-63.78v191.78h-128v-192c0.215-70.606 57.394-127.785 127.979-128h192.021v128h-191.78zM384 832h256v-128h-256v128zM896-63.78l-0.22-0.22h-191.78v-128h192c70.606 0.215 127.785 57.394 128 127.979v192.021h-128v-191.78zM896 832h-192v-128h191.78l0.22-0.22v-191.78h128v192c-0.215 70.606-57.394 127.785-127.979 128h-0.021zM896 448h128v-256h-128v256zM384-64h256v-128h-256v128zM256 576h512v-512h-512v512z" />
-<glyph unicode="&#xeb1d;" glyph-name="icon-summary-widget" d="M896 832h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM847.8 221.6l-82.6-143.2-189.6 131.6 19.2-230h-165.4l19.2 230-189.6-131.6-82.6 143.2 208.6 98.4-208.8 98.4 82.6 143.2 189.6-131.6-19.2 230h165.4l-19.2-230 189.6 131.6 82.6-143.2-208.6-98.4 208.8-98.4z" />
-<glyph unicode="&#xeb1e;" glyph-name="icon-notebook" d="M896 721.2c0 79.8-55.4 127.4-123 105.4l-773-250.6h896v145.2zM896 512h-896v-576c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v448c0 70.4-57.6 128-128 128zM832 0h-384v320h384v-320z" />
-<glyph unicode="&#xeb1f;" glyph-name="icon-tabs-view" d="M0-64c0.227-70.601 57.399-127.773 127.978-128h768.022c70.601 0.227 127.773 57.399 128 127.978v608.022h-512l-50.2 225.6c-7.6 34.2-42.6 62.4-77.8 62.4h-256c-70.601-0.227-127.773-57.399-128-127.978v-0.022zM832 64h-640v256h640zM480 832c35.2 0 70.2-28.2 77.8-62.4l36-161.6h430.2v96c-0.227 70.601-57.399 127.773-127.978 128h-0.022z" />
-<glyph unicode="&#xeb20;" glyph-name="icon-flexible-layout" d="M0 0c0-105.6 86.4-192 192-192h64v576h-256zM0 640v-128h256v320h-64c-105.6 0-192-86.4-192-192zM768-192h64c105.6 0 192 86.4 192 192v128h-256zM384 832h256v-1024h-256v1024zM832 832h-64v-576h256v384c0 105.6-86.4 192-192 192z" />
-<glyph unicode="&#xeb21;" glyph-name="icon-generator-sine" d="M152 358.2c10.8 4.2 40.8 35.6 69.8 109.4 31.8 81.4 87.2 178.4 170.2 178.4 39.4 0 76-21.8 109.2-65 28-36.4 48.8-81.6 61-113.4 29-73.8 59-105.2 69.8-109.4 10.8 4.2 40.8 35.6 69.8 109.4s74.2 155.4 141.6 174.4c-67.89 114.467-190.82 190-331.391 190-0.003 0-0.007 0-0.010 0h0.001c-212 0-384-172-384-384 0.017-26.829 2.71-53.018 7.827-78.329l-0.427 2.529c7.2-8 13-12.6 16.6-14zM884.6 355c7.235 27.919 11.392 59.972 11.4 92.995v0.005c-0.017 26.829-2.71 53.018-7.827 78.329l0.427-2.529c-7.2 8-13 12.6-16.6 14-10.8-4.2-40.8-35.6-69.8-109.4-21.8-55.8-54.6-119-100-153.2zM512 192l135 59c-4.485-0.614-9.689-0.977-14.972-1h-0.028c-39.4 0-76 21.8-109.2 65-28 36.4-48.8 81.6-61 113.4-29 73.8-59 105.2-69.8 109.4-10.8-4.2-40.8-35.6-69.8-109.4-16.4-42.2-39.2-88.4-68.8-123.2zM1024 352l-512-224-512 224v-320l512-224 512 224v320z" />
-<glyph unicode="&#xeb22;" glyph-name="icon-generator-event" d="M320 640h384v-64h-384v64zM320 384h384v-64h-384v64zM320 512h320v-64h-320v64zM256 703.8h512v-399.8l128 56v344c-0.227 70.601-57.399 127.773-127.978 128h-512.022c-70.601-0.227-127.773-57.399-128-127.978v-344.022l128-56zM658.2 256h-292.4l146.2-64 146.2 64zM512 128l-512 224v-320l512-224 512 224v320l-512-224z" />
-<glyph unicode="&#xeb23;" glyph-name="icon-gauge-v2" d="M512 832c-282.8 0-512-229.2-512-512 0-226.4 147-418.4 350.6-486l257.4 486v-503c236.8 45 416 253 416 503 0 282.8-229.2 512-512 512zM754.8 304.2c-58.967 68.597-145.842 111.772-242.8 111.772s-183.833-43.176-242.445-111.35l-0.355-0.422-146 125c8.6 10 17.4 19.6 26.8 28.8 92.628 92.679 220.619 150.006 362 150.006s269.372-57.326 361.997-150.003l0.003-0.003c9.4-9.2 18.2-18.8 26.8-28.8z" />
-<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" />
-<glyph unicode="&#xeb28;" glyph-name="icon-condition-widget" d="M832 832h-640c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM512 64l-384 256 384 256 384-256z" />
-<glyph unicode="&#xeb29;" glyph-name="icon-alphanumeric" d="M535.6 301.4c-8.4-1.6-17.2-3-26.2-4s-18.2-2.4-27.2-4c-10.196-1.861-18.808-4.010-27.21-6.633l1.61 0.433c-8.609-2.674-16.105-6.348-22.89-10.987l0.29 0.187c-6.693-4.517-12.283-10.107-16.663-16.585l-0.137-0.215c-4.6-6.8-7.4-15.6-8.8-26s-0.4-18.4 2.4-25.2c2.746-6.688 7.224-12.195 12.881-16.122l0.119-0.078c5.967-4.053 13.057-6.94 20.704-8.161l0.296-0.039c7.592-1.527 16.319-2.4 25.25-2.4 0.123 0 0.246 0 0.369 0h-0.019c22.2 0 39.6 3.6 52.6 11s23.2 16.2 30.2 26.4c6.273 8.873 11.271 19.191 14.426 30.285l0.174 0.715c1.853 6.809 3.601 15.41 4.855 24.169l0.145 1.231 5.2 41.6c-5.4-4.217-11.723-7.564-18.583-9.689l-0.417-0.111c-6.489-2.241-14.362-4.255-22.444-5.662l-0.956-0.138zM1024 448v192h-152l24 192h-192l-24-192h-256l24 192h-192l-24-192h-232v-192h208l-32-256h-176v-192h152l-24-192h192l24 192h256l-24-192h192l24 192h232v192h-208l32 256zM702.8 420.2l-26.4-211.8c-2.231-15.809-3.537-34.122-3.6-52.727v-0.073c0-16.8 2.2-29.4 6.4-37.8h-113.4c-1.342 5.556-2.338 12.122-2.781 18.84l-0.019 0.36c-0.261 3.524-0.409 7.634-0.409 11.778 0 2.962 0.076 5.907 0.226 8.832l-0.017-0.41c-18.663-17.401-41.395-30.694-66.597-38.289l-1.203-0.311c-22.627-6.956-48.639-10.974-75.586-11h-0.014c-0.764-0.011-1.666-0.018-2.569-0.018-18.098 0-35.598 2.563-52.156 7.345l1.325-0.328c-15.991 4.512-29.851 12.090-41.545 22.122l0.145-0.122c-11.233 9.982-19.792 22.733-24.624 37.192l-0.176 0.608c-5.2 15.2-6.4 33.4-3.8 54.4s9.4 42.2 19.4 57.2c9.524 14.399 21.535 26.346 35.532 35.512l0.468 0.288c13.387 8.662 28.922 15.533 45.512 19.765l1.088 0.235c13.436 3.792 30.801 7.554 48.47 10.41l2.93 0.39c17 2.6 33.8 4.6 50.4 6.2 16.628 1.527 31.69 4.070 46.349 7.643l-2.149-0.443c13 3 23.6 7.6 31.6 13.6s12.6 15 13.6 26.4 0.8 21.8-2.4 28.8c-2.849 6.902-7.542 12.56-13.468 16.517l-0.132 0.083c-6.217 4.011-13.604 6.78-21.543 7.774l-0.257 0.026c-7.897 1.277-17 2.007-26.274 2.007-0.537 0-1.073-0.002-1.609-0.007l0.082 0.001c-22 0-40-4.6-53.8-14.2s-23-25.2-28-47.2h-111.8c4.8 26.2 14.2 48 27.8 65.4 13.475 16.978 29.89 30.968 48.574 41.377l0.826 0.423c18.192 10.038 39.297 17.806 61.619 22.175l1.381 0.225c20.488 4.162 44.053 6.563 68.171 6.6h0.029c21.8-0.005 43.239-1.532 64.222-4.479l-2.422 0.279c20.641-2.809 39.324-8.783 56.401-17.461l-1.001 0.461c15.909-8.108 28.858-20.031 37.967-34.601l0.233-0.399c9-15 12.2-34.8 9-59.6z" />
-<glyph unicode="&#xeb2a;" glyph-name="icon-image-telemetry" d="M512 832c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM783.6 48.4c-69.581-69.675-165.757-112.776-272-112.776-212.298 0-384.4 172.102-384.4 384.4s172.102 384.4 384.4 384.4c212.298 0 384.4-172.102 384.4-384.4 0-0.008 0-0.017 0-0.025v0.001c0.001-0.264 0.001-0.575 0.001-0.887 0-105.769-42.964-201.503-112.391-270.703l-0.010-0.010zM704 448l-128-128-192 192-192-192c0-176.731 143.269-320 320-320s320 143.269 320 320v0z" />
+<glyph unicode="&#xe900;" glyph-name="icon-alert-rect-v2" d="M896 896h-768c-70.6-0.2-127.8-57.4-128-128v-768c0.2-70.6 57.4-127.8 128-128h768c70.6 0.2 127.8 57.4 128 128v768c-0.2 70.6-57.4 127.8-128 128zM576 0h-128v128h128v-128zM597.8 384l-37.8-192h-96l-37.8 192v384h171.8v-384z" />
+<glyph unicode="&#xe901;" glyph-name="icon-alert-triangle-v2" d="M998.2 47.2l-422.6 739.6c-35 61.2-92 61.2-127 0l-422.8-739.6c-35-61.2-6-111.2 64.4-111.2h843.4c70.6 0 99.6 50 64.6 111.2zM576 0h-128v128h128v-128zM597.8 384l-37.8-192h-96l-37.8 192v256h171.8v-256z" />
+<glyph unicode="&#xe902;" glyph-name="icon-arrow-up" d="M512 640l-512-512h1024z" />
+<glyph unicode="&#xe903;" glyph-name="icon-arrow-double-up" d="M510 386l512-512h-1024zM510 898l512-512h-1024z" />
+<glyph unicode="&#xe904;" glyph-name="icon-arrow-tall-up" d="M512 896l512-1024h-1024z" />
+<glyph unicode="&#xe905;" glyph-name="icon-arrow-right" d="M768 384l-512 512v-1024z" />
+<glyph unicode="&#xe906;" glyph-name="icon-arrow-right-equilateral" d="M962 384l-896-512v1024z" />
+<glyph unicode="&#xe907;" glyph-name="icon-arrow-down" d="M512 128l512 512h-1024z" />
+<glyph unicode="&#xe908;" glyph-name="icon-arrow-double-down" d="M510 386l-512 512h1024zM510-126l-512 512h1024z" />
+<glyph unicode="&#xe909;" glyph-name="icon-arrow-tall-down" d="M512-128l-512 1024h1024z" />
+<glyph unicode="&#xe90a;" glyph-name="icon-arrow-left" d="M256 384l512-512v1024z" />
+<glyph unicode="&#xe90b;" glyph-name="icon-asterisk" d="M1004.166 555.542l-97.522 168.916-330.534-229.414 33.414 400.956h-195.048l33.414-400.956-330.534 229.414-97.522-168.916 363.944-171.542-363.944-171.542 97.522-168.916 330.534 229.414-33.414-400.956h195.048l-33.414 400.956 330.534-229.414 97.522 168.916-363.944 171.542z" />
+<glyph unicode="&#xe90c;" glyph-name="icon-bell" d="M512-128c106 0 192 86 192 192h-384c0-106 86-192 192-192zM896 448v64c0 212-172 384-384 384s-384-172-384-384v-64c0-70.6-57.4-128-128-128v-128h1024v128c-70.6 0-128 57.4-128 128z" />
+<glyph unicode="&#xe90d;" glyph-name="icon-box-round-corners" d="M1024 64c0-105.6-86.4-192-192-192h-640c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192h640c105.6 0 192-86.4 192-192v-640z" />
+<glyph unicode="&#xe90e;" glyph-name="icon-box-with-arrow-cursor" d="M894 898h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h400c-2.2 3.8-4 7.6-5.8 11.4l-255.2 576.8c-21.4 48.4-10.8 105 26.6 142.4 24.4 24.4 57.2 37.4 90.4 37.4 17.4 0 35.2-3.6 51.8-11l576.6-255.4c4-1.8 7.8-3.8 11.4-5.8v400.2c0.2 70.4-57.4 128-127.8 128zM958.6 258.6l-576.6 255.4 255.4-576.6 64.6 128.6 192-192 128 128-192 192z" />
+<glyph unicode="&#xe90f;" glyph-name="icon-check" d="M1024 896l-640-640-384 384v-384l384-384 640 640z" />
+<glyph unicode="&#xe910;" glyph-name="icon-connectivity" d="M704 320c0-70.4-57.6-128-128-128h-128c-70.4 0-128 57.6-128 128v128c0 70.4 57.6 128 128 128h128c70.4 0 128-57.6 128-128v-128zM1024 384l-192 320v-640zM0 384l192 320v-640z" />
+<glyph unicode="&#xe911;" glyph-name="icon-database-in-brackets" d="M768 544c0-53.019-114.615-96-256-96s-256 42.981-256 96c0 53.019 114.615 96 256 96s256-42.981 256-96zM768 224v256c0-53-114.6-96-256-96s-256 43-256 96v-256c0-53 114.6-96 256-96s256 43 256 96zM832 896h-128v-192h127.6c0.2 0 0.2-0.2 0.4-0.4v-639.4c0-0.2-0.2-0.2-0.4-0.4h-127.6v-192h128c105.6 0 192 86.4 192 192v640.2c0 105.6-86.4 192-192 192zM192 64.4v639.4c0 0.2 0.2 0.2 0.4 0.4h127.6v191.8h-128c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h128v192h-127.6c-0.2 0-0.4 0.2-0.4 0.4z" />
+<glyph unicode="&#xe912;" glyph-name="icon-eye-open" d="M512 779.6c-245.8 0-452.2-168-510.8-395.6 58.6-227.4 265-395.6 510.8-395.6s452.2 168 510.8 395.6c-58.6 227.4-265 395.6-510.8 395.6zM829.2 307.6c-22.6-34.4-50.6-64.8-83-90.4-32.8-25.8-69-45.6-108-59.4-40.4-14.2-82.8-21.4-126-21.4s-85.8 7.2-126 21.4c-39 13.8-75.4 33.8-108 59.4-32.4 25.6-60.4 55.8-83 90.4-15.8 24-28.8 49.6-38.6 76.4 10 26.8 23 52.4 38.6 76.4 22.6 34.4 50.6 64.8 83 90.4 32.8 25.8 69 45.6 108 59.4 40.4 14.2 82.8 21.4 126 21.4s85.8-7.2 126-21.4c39-13.8 75.4-33.8 108-59.4 32.4-25.6 60.4-55.8 83-90.4 15.8-24 28.8-49.6 38.6-76.4-9.8-26.8-22.8-52.4-38.6-76.4zM704 384c0-106.039-85.961-192-192-192s-192 85.961-192 192c0 106.039 85.961 192 192 192s192-85.961 192-192z" />
+<glyph unicode="&#xe913;" glyph-name="icon-gear" d="M1024 320v128l-140.976 35.244c-8.784 32.922-21.818 64.106-38.504 92.918l74.774 124.622-90.51 90.51-124.622-74.774c-28.812 16.686-59.996 29.72-92.918 38.504l-35.244 140.976h-128l-35.244-140.976c-32.922-8.784-64.106-21.818-92.918-38.504l-124.622 74.774-90.51-90.51 74.774-124.622c-16.686-28.812-29.72-59.996-38.504-92.918l-140.976-35.244v-128l140.976-35.244c8.784-32.922 21.818-64.106 38.504-92.918l-74.774-124.622 90.51-90.51 124.622 74.774c28.812-16.686 59.996-29.72 92.918-38.504l35.244-140.976h128l35.244 140.976c32.922 8.784 64.106 21.818 92.918 38.504l124.622-74.774 90.51 90.51-74.774 124.622c16.686 28.812 29.72 59.996 38.504 92.918l140.976 35.244zM704 384c0-106.038-85.962-192-192-192s-192 85.962-192 192 85.962 192 192 192 192-85.962 192-192z" />
+<glyph unicode="&#xe914;" glyph-name="icon-hourglass" d="M1024 896h-1024c0-282.8 229.2-512 512-512s512 229.2 512 512zM512 512c-102.6 0-199 40-271.6 112.4-41.2 41.2-72 90.2-90.8 143.6h724.6c-18.8-53.4-49.6-102.4-90.8-143.6-72.4-72.4-168.8-112.4-271.4-112.4zM512 384c-282.8 0-512-229.2-512-512h1024c0 282.8-229.2 512-512 512z" />
+<glyph unicode="&#xe915;" glyph-name="icon-info" d="M512 896c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM512 768c70.6 0 128-57.4 128-128s-57.4-128-128-128c-70.6 0-128 57.4-128 128s57.4 128 128 128zM704 64h-384v128h64v256h256v-256h64v-128z" />
+<glyph unicode="&#xe916;" glyph-name="icon-link" d="M1024 384l-512 512v-307.2l-512-204.8v-256h512v-256z" />
+<glyph unicode="&#xe917;" glyph-name="icon-lock" horiz-adv-x="768" d="M702 512h-62v128c0 141.385-114.615 256-256 256s-256-114.615-256-256v0-128h-64c-35.301-0.113-63.887-28.699-64-63.989v-512.011c0.113-35.301 28.699-63.887 63.989-64h638.011c35.301 0.113 63.887 28.699 64 63.989v512.011c-0.113 35.301-28.699 63.887-63.989 64h-0.011zM256 512v128c0 70.692 57.308 128 128 128s128-57.308 128-128v0-128z" />
+<glyph unicode="&#xe918;" glyph-name="icon-minus" d="M960 256c35.2 0 64 28.8 64 64v128c0 35.2-28.8 64-64 64h-896c-35.2 0-64-28.8-64-64v-128c0-35.2 28.8-64 64-64h896z" />
+<glyph unicode="&#xe919;" glyph-name="icon-people" d="M704 576h64c70.4 0 128 57.6 128 128v64c0 70.4-57.6 128-128 128h-64c-70.4 0-128-57.6-128-128v-64c0-70.4 57.6-128 128-128zM256 576h64c70.4 0 128 57.6 128 128v64c0 70.4-57.6 128-128 128h-64c-70.4 0-128-57.6-128-128v-64c0-70.4 57.6-128 128-128zM832 512h-192c-34.908 0-67.716-9.448-96-25.904 57.278-33.324 96-95.404 96-166.096v-448h384v448c0 105.6-86.4 192-192 192zM384 512h-192c-105.6 0-192-86.4-192-192v-448h576v448c0 105.6-86.4 192-192 192z" />
+<glyph unicode="&#xe91a;" glyph-name="icon-person" d="M768 640c0-105.6-86.4-192-192-192h-128c-105.6 0-192 86.4-192 192v64c0 105.6 86.4 192 192 192h128c105.6 0 192-86.4 192-192v-64zM64-128v192c0 140.8 115.2 256 256 256h384c140.8 0 256-115.2 256-256v-192z" />
+<glyph unicode="&#xe91b;" glyph-name="icon-plus" d="M960 512h-330v320c0 35.2-28.8 64-64 64h-108c-35.2 0-64-28.8-64-64v-320h-330c-35.2 0-64-28.8-64-64v-128c0-35.2 28.8-64 64-64h330v-320c0-35.2 28.8-64 64-64h108c35.2 0 64 28.8 64 64v320h330c35.2 0 64 28.8 64 64v128c0 35.2-28.8 64-64 64z" />
+<glyph unicode="&#xe91c;" glyph-name="icon-plus-in-rect" d="M830 896h-636c-106.6 0-194-87.2-194-194v-636c0-106.8 87.4-194 194-194h636c106.6 0 194 87.2 194 194v636c0 106.8-87.4 194-194 194zM896 288c0-17.673-14.327-32-32-32v0h-224v-224c0-17.673-14.327-32-32-32v0h-192c-17.673 0-32 14.327-32 32v0 224h-224c-17.673 0-32 14.327-32 32v0 192c0 17.673 14.327 32 32 32v0h224v224c0 17.673 14.327 32 32 32v0h192c17.673 0 32-14.327 32-32v0-224h224c17.673 0 32-14.327 32-32v0z" />
+<glyph unicode="&#xe91d;" glyph-name="icon-trash" d="M832 768h-192.36v64c0 35.2-28.8 64-64 64h-128c-35.2 0-64-28.8-64-64v-64h-191.64c-105.6 0-192-72-192-160s0-160 0-160h64v-384c0-105.6 86.4-192 192-192h512c105.6 0 192 86.4 192 192v384h64c0 0 0 72 0 160s-86.4 160-192 160zM320 64h-128v384h128v-384zM576 64h-128v384h128v-384zM832 64h-128v384h128v-384z" />
+<glyph unicode="&#xe91e;" glyph-name="icon-x-heavy" d="M704 384l301.332-301.332c24.89-24.89 24.89-65.62 0-90.51l-101.49-101.49c-24.89-24.89-65.62-24.89-90.51 0l-301.332 301.332c0 0-301.332-301.332-301.332-301.332-24.89-24.89-65.62-24.89-90.51 0l-101.49 101.49c-24.89 24.89-24.89 65.62 0 90.51l301.332 301.332c0 0-301.332 301.332-301.332 301.332-24.89 24.89-24.89 65.62 0 90.51l101.49 101.49c24.89 24.89 65.62 24.89 90.51 0l301.332-301.332c0 0 301.332 301.332 301.332 301.332 24.89 24.89 65.62 24.89 90.51 0l101.49-101.49c24.89-24.89 24.89-65.62 0-90.51 0 0-301.332-301.332-301.332-301.332z" />
+<glyph unicode="&#xe91f;" glyph-name="icon-brackets" d="M832 896h-192v-192h191.66l0.34-0.34v-639.32l-0.34-0.34h-191.66v-192h192c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM384 64h-191.66l-0.34 0.34v639.32l0.34 0.34h191.66v192h-192c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h192v192z" />
+<glyph unicode="&#xe920;" glyph-name="icon-crosshair" d="M574 898h-128v-320h128v320zM1022 450h-320v-128h320v128zM574 194h-128v-320h128v320zM318 450h-320v-128h320v128z" />
+<glyph unicode="&#xe921;" glyph-name="icon-grippy" d="M365.4 713.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.4 493.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.4 274.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.4 54.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM584.8 822.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM584.8 603.4c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM584.8 384c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM584.8 164.6c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM584.8-54.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM804.2 713.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM804.2 493.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM804.2 274.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM804.2 54.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2z" />
+<glyph unicode="&#xe922;" glyph-name="icon-grid" d="M0 320v-256c0-105.6 86.4-192 192-192h256v448h-448zM448 896h-256c-105.6 0-192-86.4-192-192v-256h448v448zM832 896h-256v-448h448v256c0 105.6-86.4 192-192 192zM576-128h256c105.6 0 192 86.4 192 192v256h-448v-448z" />
+<glyph unicode="&#xe923;" glyph-name="icon-grippy-ew" d="M704 896h128v-1024h-128v1024zM448 896h128v-1024h-128v1024zM192 896h128v-1024h-128v1024z" />
+<glyph unicode="&#xe924;" glyph-name="icon-columns" d="M0 896h256v-1024h-256v1024zM384 896h256v-1024h-256v1024zM768 896h256v-1024h-256v1024z" />
+<glyph unicode="&#xe925;" glyph-name="icon-rows" d="M0 896h1024v-256h-1024v256zM0 512h1024v-256h-1024v256zM0 128h1024v-256h-1024v256z" />
+<glyph unicode="&#xe926;" glyph-name="icon-filter" d="M896 896h-768c-70.601-0.227-127.773-57.399-128-127.978v-768.022c0.227-70.601 57.399-127.773 127.978-128h256.022v512l-192 192h640l-192-192v-512h256c70.601 0.227 127.773 57.399 128 127.978v768.022c-0.227 70.601-57.399 127.773-127.978 128h-0.022z" />
+<glyph unicode="&#xe927;" glyph-name="icon-filter-outline" d="M896 896h-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 0.2h-256v383.8l192 192h-640l192-192v-384h-256v767.8h768z" />
+<glyph unicode="&#xe928;" glyph-name="icon-suitcase" d="M768 768c-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 767.88l0.12 0.12 255.88-0.12v-127.88h-256zM0 576v-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 640h-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 576h-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 640c0 70.692 57.308 128 128 128s128-57.308 128-128v0-64h-256zM533.4 0l-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 256h832l-192 320 192 320h-896c-70.606-0.215-127.785-57.394-128-127.979v-896.021h192z" />
+<glyph unicode="&#xe92b;" glyph-name="icon-eye-disabled" d="M209.46 287.32q-7.46 9.86-14.26 20.28c-14.737 21.984-27.741 47.184-37.759 73.847l-0.841 2.553c11.078 29.259 24.068 54.443 39.51 77.869l-0.91-1.469c23.221 34.963 50.705 64.8 82.207 89.793l0.793 0.607c57.663 45.719 130.179 75.053 209.311 79.947l1.069 0.053 114.48 140.88c-27.366 5.017-58.869 7.898-91.041 7.92h-0.019c-245.8 0-452.2-168-510.8-395.6 21.856-82.93 60.906-154.847 113.325-214.773l-0.525 0.613zM814.76 480.92q7.52-10 14.44-20.52c14.737-21.984 27.741-47.184 37.759-73.847l0.841-2.553c-10.859-29.216-23.863-54.416-39.447-77.748l0.847 1.348c-23.221-34.963-50.705-64.8-82.207-89.793l-0.793-0.607c-57.762-45.834-130.437-75.216-209.743-80.049l-1.057-0.051-114.46-140.86c27.346-4.988 58.817-7.84 90.955-7.84 0.037 0 0.074 0 0.111 0h-0.005c245.8 0 452.2 168 510.8 395.6-21.856 82.93-60.906 154.847-113.325 214.773l0.525-0.613zM832 896l-832-1024h192l832 1024h-192z" />
+<glyph unicode="&#xe92c;" glyph-name="icon-notebook-page" d="M830 834h-830l-4-702c0-106.6 87.4-194 194-194h640c106.6 0 194 87.4 194 194v508c0 106.8-87.4 194-194 194zM832 450l-384-384-192 192v256l192-192 384 384v-256z" />
+<glyph unicode="&#xe92d;" glyph-name="icon-unlocked" d="M768 896c-141.339-0.114-255.886-114.661-256-255.989v-128.011h-448c-35.301-0.113-63.887-28.699-64-63.989v-512.011c0.113-35.301 28.699-63.887 63.989-64h638.011c35.301 0.113 63.887 28.699 64 63.989v512.011c-0.113 35.301-28.699 63.887-63.989 64h-62.011v128c0 70.692 57.308 128 128 128s128-57.308 128-128v0-128h128v128c-0.114 141.339-114.661 255.886-255.989 256h-0.011z" />
+<glyph unicode="&#xe92e;" glyph-name="icon-circle" d="M1024 384c0-282.77-229.23-512-512-512s-512 229.23-512 512c0 282.77 229.23 512 512 512s512-229.23 512-512z" />
+<glyph unicode="&#xe92f;" glyph-name="icon-draft" d="M876.34 260.42l-49.9-49.88-19.26-19.5-26-8.7-423.040-144.2 144.2 423.28 8.84 25.78 150 149.88-85.6 149.78c-34.92 61.12-92 61.12-127 0l-422.78-739.72c-34.94-61.14-5.92-111.14 64.48-111.14h843.44c70.4 0 99.42 50 64.48 111.14zM973.18 653.16c-19.32 19.3-40.66 34.62-60.16 43.16-34.42 15.12-52.38 4.54-60.1-3.16l-258.12-258.12-82.8-243.040 243 82.8 3.36 3.4 254.76 254.76c4.94 4.94 10.88 13.88 10.88 28.3 0 25.34-19.5 60.56-50.82 91.9zM631 276.18l-34.88 34.86 34.64 101.6 9.24 3.36h32v-64h64v-32l-3.42-9.26z" />
+<glyph unicode="&#xe930;" glyph-name="icon-circle-slash" d="M512 896c-282.78 0-512-229.22-512-512s229.22-512 512-512 512 229.22 512 512-229.22 512-512 512zM263.1 632.9c66.48 66.48 154.88 103.1 248.9 103.1 66.74 0 130.64-18.48 185.9-52.96l-484.94-484.94c-34.5 55.24-52.96 119.16-52.96 185.9 0 94.020 36.62 182.42 103.1 248.9zM760.9 135.1c-66.48-66.48-154.88-103.1-248.9-103.1-66.74 0-130.64 18.48-185.9 52.96l484.94 484.94c34.5-55.24 52.96-119.16 52.96-185.9 0-94.020-36.62-182.42-103.1-248.9z" />
+<glyph unicode="&#xe931;" glyph-name="icon-question-mark" horiz-adv-x="697" d="M136.86 843.74c54.080 34.82 120.58 52.26 199.44 52.26 103.6 0 189.7-24.76 258.24-74.28s102.82-122.88 102.82-220.060c0-59.6-14.86-109.8-44.58-150.6-17.38-24.76-50.76-56.4-100.14-94.9l-48.68-37.82c-26.54-20.64-44.14-44.7-52.82-72.2-5.5-17.44-8.46-44.48-8.92-81.14h-186.4c2.74 77.48 10.060 131 21.94 160.58s42.5 63.62 91.88 102.12l50.060 39.2c16.46 12.38 29.72 25.9 39.78 40.58 18.28 25.2 27.42 52.96 27.42 83.22 0 34.84-10.18 66.6-30.52 95.24-20.36 28.64-57.52 42.98-111.48 42.98s-90.68-17.66-112.88-52.96c-22.18-35.32-33.26-71.98-33.26-110.040h-198.76c5.5 130.64 51.12 223.24 136.86 277.82zM251.020 70.76h205.62v-198.74h-205.62v198.74z" />
+<glyph unicode="&#xe932;" glyph-name="icon-status-poll-check" d="M512 896c-282.76 0-512-214.9-512-480 0-92.26 27.8-178.44 75.92-251.6l-75.92-292.4 313.5 101.42c61.040-24.1 128.12-37.42 198.5-37.42 282.76 0 512 214.9 512 480s-229.24 480-512 480zM768 448l-320-320-192 192v192l192-192 320 320v-192z" />
+<glyph unicode="&#xe933;" glyph-name="icon-status-poll-caution" d="M512 896c-282.76 0-512-214.9-512-480 0-92.26 27.8-178.44 75.92-251.6l-75.92-292.4 313.5 101.42c61.040-24.1 128.12-37.42 198.5-37.42 282.76 0 512 214.9 512 480s-229.24 480-512 480zM781.36 192h-538.72c-44.96 0-63.5 31.94-41.2 70.98l270 472.48c22.3 39.040 58.82 39.040 81.12 0l269.98-472.48c22.3-39.040 3.78-70.98-41.2-70.98zM457.14 478.14l24.2-122.64h61.32l24.2 122.64v163.5h-109.72v-163.5zM471.12 314.64h81.76v-81.76h-81.76v81.76z" />
+<glyph unicode="&#xe934;" glyph-name="icon-status-poll-circle-slash" d="M391.18 227.3c35.72-22.98 77.32-35.3 120.82-35.3 59.84 0 116.080 23.3 158.4 65.6 42.3 42.3 65.6 98.56 65.6 158.4 0 43.5-12.32 85.080-35.3 120.82l-309.52-309.52zM512 640c-59.84 0-116.080-23.3-158.4-65.6-42.3-42.3-65.6-98.56-65.6-158.4 0-43.5 12.32-85.080 35.3-120.82l309.52 309.52c-35.72 22.98-77.32 35.3-120.82 35.3zM512 896c-282.76 0-512-214.9-512-480 0-92.26 27.8-178.44 75.92-251.6l-75.92-292.4 313.5 101.42c61.040-24.1 128.12-37.42 198.5-37.42 282.76 0 512 214.9 512 480s-229.24 480-512 480zM512 96c-176.74 0-320 143.26-320 320s143.26 320 320 320 320-143.26 320-320-143.26-320-320-320z" />
+<glyph unicode="&#xe935;" glyph-name="icon-status-poll-question-mark" d="M512 896c-282.76 0-512-214.9-512-480 0-92.26 27.8-178.44 75.92-251.6l-75.92-292.4 313.5 101.42c61.040-24.1 128.12-37.42 198.5-37.42 282.76 0 512 214.9 512 480s-229.24 480-512 480zM579.020 64h-141.36v136.64h141.36v-136.64zM713.84 462.1c-11.94-17.020-34.9-38.78-68.84-65.24l-33.48-26c-18.24-14.18-30.34-30.74-36.32-49.64-3.78-11.98-5.82-30.58-6.14-55.8h-128.12c1.88 53.26 6.92 90.060 15.080 110.4 8.18 20.34 29.22 43.74 63.16 70.22l34.42 26.94c11.3 8.52 20.42 17.8 27.34 27.9 12.56 17.34 18.86 36.4 18.86 57.2 0 23.94-7 45.78-20.98 65.48-14 19.7-39.54 29.54-76.64 29.54s-62.34-12.14-77.6-36.4c-15.24-24.28-22.88-49.48-22.88-75.64h-136.64c3.78 89.84 35.14 153.5 94.080 191.020 37.18 23.94 82.9 35.94 137.12 35.94 71.22 0 130.42-17.020 177.54-51.060s70.68-84.48 70.68-151.3c0-40.98-10.22-75.5-30.66-103.54z" />
+<glyph unicode="&#xe936;" glyph-name="icon-status-poll-edit" d="M1000.080 561.36l-336.6-336.76-20.52-6.88-450.96-153.72 160.68 471.52 332.34 332.34c-54.040 18.2-112.28 28.14-173.020 28.14-282.76 0-512-214.9-512-480 0-92.26 27.8-178.44 75.92-251.6l-75.92-292.4 313.5 101.42c61.040-24.1 128.12-37.42 198.5-37.42 282.76 0 512 214.9 512 480 0 50.68-8.4 99.5-23.92 145.36zM408.42 500.76l-2.16-6.3-111.7-327.9 334.12 113.86 4.62 4.68 350.28 350.28c6.8 6.78 14.96 19.1 14.96 38.9 0 34.86-26.82 83.28-69.88 126.38-26.54 26.54-55.9 47.6-82.7 59.34-47.34 20.8-72.020 6.24-82.64-4.36l-354.9-354.88zM470.56 474.58h44v-88h88v-44l-4.7-12.72-139.68-47.54-47.94 47.94 47.6 139.72 12.72 4.6z" />
+<glyph unicode="&#xe937;" glyph-name="icon-stale" d="M832 896h-640c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM681.38 530.86c0.68 20.46-2.22 37.7-8.7 51.68-6.5 13.98-15.7 25.4-27.64 34.28-11.94 8.86-26.1 15.18-42.48 18.94-16.38 3.74-33.78 5.62-52.2 5.62-15.020 0-30.2-1.54-45.54-4.6s-29.16-8.18-41.44-15.36-22.18-16.56-29.68-28.14c-7.52-11.62-11.26-25.94-11.26-42.98s6.66-32.6 19.96-44.52c13.3-11.94 29.34-21.84 48.1-29.68 18.76-7.86 38.020-14 57.82-18.42 19.78-4.44 35.82-8.020 48.1-10.74 28.66-7.52 54.92-16.22 78.8-26.1 23.88-9.9 44.52-22.68 61.92-38.38s30.86-34.8 40.42-57.32c9.54-22.52 14.32-50.16 14.32-82.9 0-43.68-9.040-80.86-27.12-111.56s-41.28-55.62-69.6-74.7c-28.32-19.1-60.22-32.92-95.7-41.44s-70.62-12.8-105.42-12.8c-102.34 0-178.6 20.8-228.74 62.44-50.16 41.6-75.22 107.1-75.22 196.5h152.5c-1.38-25.94 1.7-47.58 9.22-64.98 7.5-17.4 18.42-31.22 32.74-41.44 14.32-10.24 31.38-17.58 51.18-22 19.78-4.44 41.28-6.66 64.48-6.66 16.38 0 32.74 2.040 49.12 6.14s31.22 10.24 44.52 18.42c13.3 8.18 24.22 18.76 32.76 31.72 8.52 12.94 12.8 28.66 12.8 47.080s-5.46 32.24-16.38 43.5c-10.92 11.26-25.080 20.98-42.48 29.16s-37.2 15.36-59.36 21.5c-22.18 6.14-44.52 12.62-67.040 19.44-23.2 6.82-45.72 15-67.54 24.56-21.84 9.54-41.44 21.82-58.84 36.84-17.4 15-31.38 33.42-41.96 55.26-10.58 21.82-15.86 48.44-15.86 79.82 0 40.94 8.52 75.74 25.58 104.4 17.040 28.66 39.22 52.020 66.52 70.1 27.28 18.080 58.16 31.38 92.62 39.92 34.44 8.52 69.42 12.8 104.9 12.8 37.52 0 72.82-4.26 105.92-12.8 33.080-8.54 62.080-22.36 87-41.44 24.9-19.1 44.68-43.5 59.36-73.18 14.66-29.68 22-65.68 22-107.98h-152.5z" />
+<glyph unicode="&#xea00;" glyph-name="icon-arrows-right-left" d="M1024 384l-448-512v1024zM448 896l-448-512 448-512z" />
+<glyph unicode="&#xea01;" glyph-name="icon-arrows-up-down" d="M512 896l512-448h-1024zM0 320l512-448 512 448z" />
+<glyph unicode="&#xea02;" glyph-name="icon-bullet" d="M832 144c0-44-36-80-80-80h-480c-44 0-80 36-80 80v480c0 44 36 80 80 80h480c44 0 80-36 80-80v-480z" />
+<glyph unicode="&#xea03;" glyph-name="icon-calendar" d="M896 896h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM640 448h-256v192h256v-192zM384 384h256v-192h-256v192zM320 192h-256v192h256v-192zM320 640v-192h-256v192h256zM128-64c-17 0-33 6.6-45.2 18.8s-18.8 28.2-18.8 45.2v128h256v-192h-192zM384-64v192h256v-192h-256zM960 0c0-17-6.6-33-18.8-45.2s-28.2-18.8-45.2-18.8h-192v192h256v-128zM960 192h-256v192h256v-192zM960 448h-256v192h256v-192z" />
+<glyph unicode="&#xea04;" glyph-name="icon-chain-links" d="M958.4 830.4c-43.8 43.8-101 65.6-158.4 65.6s-114.6-21.8-158.4-65.6l-128-128c-74-74-85.4-187-34-273l-12.8-12.8c-35.4 20.8-75 31.4-114.8 31.4-57.4 0-114.6-21.8-158.4-65.6l-128-128c-87.4-87.4-87.4-229.4 0-316.8 43.8-43.8 101-65.6 158.4-65.6s114.6 21.8 158.4 65.6l128 128c74 74 85.4 187 34 273l12.8 12.8c35.2-21 75-31.6 114.6-31.6 57.4 0 114.6 21.8 158.4 65.6l128 128c87.6 87.6 87.6 229.6 0.2 317zM419.8 156.2l-128-128c-18-18.2-42.2-28.2-67.8-28.2s-49.8 10-67.8 28.2c-37.4 37.4-37.4 98.4 0 135.8l128 128c18.2 18.2 42.2 28.2 67.8 28.2 5.6 0 11.2-0.6 16.8-1.4l-55.6-55.6c-10.4-10.4-16.2-24.2-16.2-38.8s5.8-28.6 16.2-38.8c10.4-10.4 24.2-16.2 38.8-16.2s28.6 5.8 38.8 16.2l55.6 55.6c5.4-30.4-3.6-62.2-26.6-85zM867.8 604.2l-128-128c-18-18.2-42.2-28.2-67.8-28.2-5.6 0-11.2 0.6-16.8 1.4l55.6 55.6c10.4 10.4 16.2 24.2 16.2 38.8s-5.8 28.6-16.2 38.8c-10.4 10.4-24.2 16.2-38.8 16.2s-28.6-5.8-38.8-16.2l-55.6-55.6c-5.2 29.8 3.6 61.6 26.6 84.6l128 128c18 18.4 42.2 28.4 67.8 28.4s49.8-10 67.8-28.2c37.6-37.4 37.6-98.2 0-135.6z" />
+<glyph unicode="&#xea05;" glyph-name="icon-download" d="M832 320v-255.66l-0.34-0.34-639.66 0.34v255.66h-192v-256c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v256h-192zM512 256l448 448h-256v192h-384v-192h-256l448-448z" />
+<glyph unicode="&#xea06;" glyph-name="icon-duplicate" d="M640 640v128c0 70.4-57.6 128-128 128h-384c-70.4 0-128-57.6-128-128v-384c0-70.4 57.6-128 128-128h128v139.6c0 134.8 109.6 244.4 244.4 244.4h139.6zM896 512h-384c-70.4 0-128-57.6-128-128v-384c0-70.4 57.6-128 128-128h384c70.4 0 128 57.6 128 128v384c0 70.4-57.6 128-128 128z" />
+<glyph unicode="&#xea07;" glyph-name="icon-folder-new" d="M896 704h-320c-16.4 16.4-96.8 96.8-109.2 109.2l-37.4 37.4c-25 25-74.2 45.4-109.4 45.4h-256c-35.2 0-64-28.8-64-64v-384c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v128c0 70.4-57.6 128-128 128zM896 448h-768c-70.4 0-128-57.6-128-128v-320c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v320c0 70.4-57.6 128-128 128zM704 96h-128v-128h-128v128h-128v128h128v128h128v-128h128v-128z" />
+<glyph unicode="&#xea08;" glyph-name="icon-fullscreen-collapse" d="M191.656 64c0.118-0.1 0.244-0.224 0.344-0.344v-191.656h192v192c0 105.6-86.4 192-192 192h-192v-192h191.656zM192 704.344c-0.1-0.118-0.224-0.244-0.344-0.344h-191.656v-192h192c105.6 0 192 86.4 192 192v192h-192v-191.656zM832 512h192v192h-191.656c-0.118 0.1-0.244 0.226-0.344 0.344v191.656h-192v-192c0-105.6 86.4-192 192-192zM832 63.656c0.1 0.118 0.224 0.244 0.344 0.344h191.656v192h-192c-105.6 0-192-86.4-192-192v-192h192v191.656z" />
+<glyph unicode="&#xea09;" glyph-name="icon-fullscreen-expand" d="M192.344 64c-0.118 0.1-0.244 0.224-0.344 0.344v191.656h-192v-192c0-105.6 86.4-192 192-192h192v192h-191.656zM192 703.656c0.1 0.118 0.224 0.244 0.344 0.344h191.656v192h-192c-105.6 0-192-86.4-192-192v-192h192v191.656zM832 896h-192v-192h191.656c0.118-0.1 0.244-0.226 0.344-0.344v-191.656h192v192c0 105.6-86.4 192-192 192zM832 64.344c-0.1-0.118-0.224-0.244-0.344-0.344h-191.656v-192h192c105.6 0 192 86.4 192 192v192h-192v-191.656z" />
+<glyph unicode="&#xea0a;" glyph-name="icon-layers" d="M1024 512l-512 384-512-384 512-384zM512 0l-426.666 320-85.334-64 512-384 512 384-85.334 64z" />
+<glyph unicode="&#xea0b;" glyph-name="icon-line-horz" d="M64 320c-35.346 0-64 28.654-64 64s28.654 64 64 64h896c35.346 0 64-28.654 64-64s-28.654-64-64-64h-896z" />
+<glyph unicode="&#xea0c;" glyph-name="icon-magnify" d="M1024 0l-256.8 256.8c42.4 66.6 65 144 64.8 223.2 0 229.8-186.2 416-416 416s-416-186.2-416-416 186.2-416 416-416c79-0.2 156.4 22.4 223.2 64.8l256.8-256.8 128 128zM212.4 276.4c-112.4 112.4-112.4 294.8 0 407.2s294.8 112.4 407.2 0 112.4-294.8 0-407.2c-54-54-127.2-84.4-203.6-84.4-76.4-0.2-149.8 30.2-203.6 84.4z" />
+<glyph unicode="&#xea0d;" glyph-name="icon-magnify-in" d="M1024 0l-256.86 256.86c40.681 62.963 64.861 139.898 64.861 222.481 0 0.232 0 0.464-0.001 0.696v-0.036c0 229.76-186.24 416-416 416s-416-186.24-416-416 186.24-416 416-416c0.196 0 0.427-0.001 0.659-0.001 82.583 0 159.518 24.18 224.112 65.846l-1.631-0.985 256.86-256.86zM212.36 276.36c-52.114 52.117-84.346 124.114-84.346 203.64 0 159.058 128.942 288 288 288s288-128.942 288-288c0-159.058-128.942-288-288-288-0.005 0-0.010 0-0.014 0h0.001c-0.242-0.001-0.529-0.001-0.815-0.001-79.271 0-151.010 32.251-202.811 84.348l-0.013 0.014zM224 544h384v-128h-384v128zM352 672h128v-384h-128v384z" />
+<glyph unicode="&#xea0e;" glyph-name="icon-magnify-out-v2" d="M767.2 256.8c42.4 66.6 65 144 64.8 223.2 0 229.8-186.2 416-416 416s-416-186.2-416-416 186.2-416 416-416c79-0.2 156.4 22.4 223.2 64.8l256.8-256.8 128 128-256.8 256.8zM619.6 276.4c-54-54-127.2-84.4-203.6-84.4-76.4-0.2-149.8 30.2-203.6 84.4-112.4 112.4-112.4 294.8 0 407.2s294.8 112.4 407.2 0c112.4-112.4 112.4-294.8 0-407.2zM224 544h384v-128h-384v128z" />
+<glyph unicode="&#xea0f;" glyph-name="icon-menu" d="M0 768h1024v-128h-1024v128zM0 448h1024v-128h-1024v128zM0 128h1024v-128h-1024v128z" />
+<glyph unicode="&#xea10;" glyph-name="icon-move" d="M293.4 384l218.6 218.6 256-256v421.4c0 70.4-57.6 128-128 128h-512c-70.4 0-128-57.6-128-128v-512c0-70.4 57.6-128 128-128h421.4l-256 256zM1024 448h-128v-320l-384 384-128-128 384-384h-320v-128h576z" />
+<glyph unicode="&#xea11;" glyph-name="icon-new-window" d="M448 896v-128h320l-384-384 128-128 384 384v-320h128v576zM576 221.726v-157.382c-0.1-0.118-0.226-0.244-0.344-0.344h-383.312c-0.118 0.1-0.244 0.226-0.344 0.344v383.312c0.1 0.118 0.226 0.244 0.344 0.344h157.382l192 192h-349.726c-105.6 0-192-86.4-192-192v-384c0-105.6 86.4-192 192-192h384c105.6 0 192 86.4 192 192v349.726l-192-192z" />
+<glyph unicode="&#xea12;" glyph-name="icon-paint-bucket-v2" d="M544 672v-224c0-88.4-71.6-160-160-160s-160 71.6-160 160v97.2l-197.4-196.4c-50-50-12.4-215.2 112.4-340s290-162.4 340-112.4l417 423.6-352 352zM896-128c70.6 0 128 57.4 128 128 0 108.6-128 192-128 192s-128-83.4-128-192c0-70.6 57.4-128 128-128zM384 384c-35.4 0-64 28.6-64 64v384c0 35.4 28.6 64 64 64s64-28.6 64-64v-384c0-35.4-28.6-64-64-64z" />
+<glyph unicode="&#xea13;" glyph-name="icon-pencil" d="M922.344 794.32c-38.612 38.596-81.306 69.232-120.304 86.324-68.848 30.25-104.77 9.078-120.194-6.344l-516.228-516.216-3.136-9.152-162.482-476.932 485.998 165.612 6.73 6.806 509.502 509.506c9.882 9.866 21.768 27.77 21.768 56.578 0.002 50.71-38.996 121.148-101.654 183.818zM237.982 40.34l-69.73 69.728 69.25 203.228 18.498 6.704h64v-128h128v-64l-6.846-18.506-203.172-69.154z" />
+<glyph unicode="&#xea14;" glyph-name="icon-pencil-edit-in-place" d="M922.4 794.4c-38.6 38.6-81.4 69.2-120.4 86.2-68.8 30.2-104.8 9-120.2-6.4l-516.2-516.2-3.2-9.2-162.4-476.8 486 165.6 516.2 516.4c9.8 9.8 21.8 27.8 21.8 56.6 0 50.6-39 121-101.6 183.8zM238 40.4l-69.8 69.6 69.2 203.2 18.4 6.8h64v-128h128v-64l-6.8-18.6-203-69zM0 896v-512l128 128v256h256l128 128zM1024-128v512l-128-128v-256h-256l-128-128z" />
+<glyph unicode="&#xea15;" glyph-name="icon-play" d="M1024 384l-1024-512v1024z" />
+<glyph unicode="&#xea16;" glyph-name="icon-pause" d="M126 898h256v-1024h-256v1024zM638 898h256v-1024h-256v1024z" />
+<glyph unicode="&#xea17;" glyph-name="icon-plot-resource" d="M255.8 192c0.2 0 0.2 0 0 0l0.2 128c0 70.6 57.4 128 128 128h255.8c0 0 0 0 0.2 0.2v127.8c0 70.6 57.4 128 128 128h143.6c-93.8 117-238 192-399.6 192-282.8 0-512-229.2-512-512 0-68 13.2-132.8 37.2-192h218.6zM768.2 576c-0.2 0-0.2 0 0 0l-0.2-128c0-70.6-57.4-128-128-128h-255.8c0 0 0 0-0.2-0.2v-127.8c0-70.6-57.4-128-128-128h-143.6c93.8-117 238-192 399.6-192 282.8 0 512 229.2 512 512 0 68-13.2 132.8-37.2 192h-218.6z" />
+<glyph unicode="&#xea18;" glyph-name="icon-pointer-left" d="M766-128l-256 512 256 512h-256l-256-512 256-512z" />
+<glyph unicode="&#xea19;" glyph-name="icon-pointer-right" d="M254 896l256-512-256-512h256l256 512-256 512z" />
+<glyph unicode="&#xea1a;" glyph-name="icon-refresh" d="M1024 435.2v460.8l-175.8-175.8c-85.2 69.6-190.8 107.6-302 107.6-127.6 0-247.6-49.8-338-140s-140-210.4-140-338 49.8-247.6 140-338 210.4-140 338-140 247.6 49.8 338 140c74 74 120.8 167.8 135 269.6h-138.6c-32-155.4-169.8-272.8-334.6-272.8-188.2 0-341.4 153.2-341.4 341.4s153.4 341.2 341.6 341.2c76.8 0 147.6-25.4 204.8-68.2l-187.8-187.8h460.8z" />
+<glyph unicode="&#xea1b;" glyph-name="icon-save" d="M192.2 320c-0.2 0-0.2 0 0 0l-0.2-448h640v447.8c0 0 0 0-0.2 0.2h-639.6zM978.8 685.2l-165.4 165.4c-25 25-74.2 45.4-109.4 45.4h-576c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128v448c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64v-448c70.4 0 128 57.6 128 128v576c0 35.2-20.4 84.4-45.2 109.2zM704 640c0-35.2-28.8-64-64-64h-448c-35.2 0-64 28.8-64 64v192h320v-192h128v192h128v-192z" />
+<glyph unicode="&#xea1c;" glyph-name="icon-save-as" d="M978.8 557.2l-64 64c24.8-24.8 45.2-74 45.2-109.2v-448c0-70.4-57.6-128-128-128h-640c-18.8 0-36.6 4.2-52.6 11.4 20.2-44.4 65-75.4 116.6-75.4h640c70.4 0 128 57.6 128 128v448c0 35.2-20.4 84.4-45.2 109.2zM704 0v319.8c0 0 0 0-0.2 0.2h-511.6l-0.2-320h512zM192 384h512c35.2 0 64-28.8 64-64v-320c70.4 0 128 57.6 128 128v448c0 35.2-20.4 84.4-45.2 109.2l-165.4 165.4c-25 25-74.2 45.4-109.4 45.4h-448c-70.4 0-128-57.6-128-128v-640c0-70.4 57.6-128 128-128v320c0 35.2 28.8 64 64 64zM128 832h192v-192h128v192h128v-192c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v192z" />
+<glyph unicode="&#xea1d;" glyph-name="icon-sine" d="M1024 384c-1.8 7.2-3.4 14.4-5.2 21.8-20.2 86.2-53.4 209.4-98.4 307.2-22.4 49-45.4 86.6-70.2 115.2-48.6 56-98.4 67.8-131.8 67.8-33.2 0-83.2-11.8-131.8-67.8-24.6-28.6-47.6-66.2-70-115.2-44.8-97.8-78.2-221-98.4-307.2-21.8-93-46.6-175.4-72-238.4-16.4-40.6-30.4-66.4-40.8-82.8-10.4 16.2-24.4 42.2-40.8 82.8-23.2 58-46.2 132.4-66.6 216.6h-198c1.8-7.2 3.4-14.4 5.2-21.8 20.2-86.2 53.4-209.4 98.4-307.2 22.4-49 45.4-86.6 70.2-115.2 48.6-56 98.6-67.8 131.8-67.8s83.2 11.8 131.8 67.8c24.8 28.6 47.6 66.2 70.2 115.2 44.8 97.8 78.2 221 98.4 307.2 21.8 93 46.6 175.4 72 238.4 16.4 40.6 30.4 66.4 40.8 82.8 10.4-16.2 24.4-42.2 40.8-82.8 23.4-57.8 46.4-132.4 66.8-216.4h197.6z" />
+<glyph unicode="&#xea1e;" glyph-name="icon-font" d="M800-128h224l-384 1024h-256l-384-1024h224l84 224h408zM380 288l132 352 132-352z" />
+<glyph unicode="&#xea1f;" glyph-name="icon-thumbs-strip" d="M448 514c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM1024 514c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM448-62c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM1024-62c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320z" />
+<glyph unicode="&#xea20;" glyph-name="icon-two-parts-both" d="M896 896h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM128 768h320v-768h-320v768zM896 0h-320v768h320v-768z" />
+<glyph unicode="&#xea21;" glyph-name="icon-two-parts-one-only" d="M896 896h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM896 0h-320v768h320v-768z" />
+<glyph unicode="&#xea22;" glyph-name="icon-resync" d="M795.2 731.2c-79.8 65.2-178.8 100.8-283.2 100.8-119.6 0-232.2-46.6-316.8-131.2-69.4-69.4-113.2-157.4-126.6-252.8h130c29.6 145.8 158.8 256 313.4 256 72 0 138.4-23.8 192-64l-176-176h432v432l-164.8-164.8zM512 64c-72 0-138.4 23.8-192 64l176 176h-432v-432l164.8 164.8c79.8-65.2 178.8-100.8 283.2-100.8 119.6 0 232.2 46.6 316.8 131.2 69.4 69.4 113.2 157.4 126.6 252.8h-130c-29.6-145.8-158.8-256-313.4-256z" />
+<glyph unicode="&#xea23;" glyph-name="icon-reset" d="M460.8 435.2l-187.8 187.8c57.2 42.8 128 68.2 204.8 68.2 188.2 0 341.6-153.2 341.6-341.4s-153.2-341.2-341.4-341.2c-165 0-302.8 117.6-334.6 273h-138.4c14.2-101.8 61-195.6 135-269.6 90.2-90.2 210.4-140 338-140s247.6 49.8 338 140 140 210.4 140 338-49.8 247.6-140 338-210.4 140-338 140c-111.4 0-217-38-302-107.6l-176 175.6v-460.8h460.8z" />
+<glyph unicode="&#xea24;" glyph-name="icon-x-in-circle" d="M512 896c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM832 192l-128-128-192 192-192-192-128 128 192 192-192 192 128 128 192-192 192 192 128-128-192-192 192-192z" />
+<glyph unicode="&#xea25;" glyph-name="icon-brightness" d="M253.414 577.939l-155.172 116.384c-50.233-66.209-85.127-146.713-97.91-234.39l-0.333-2.781 191.919-27.434c8.145 56.552 29.998 106.879 62.068 149.006l-0.573-0.784zM191.98 338.283l-191.919-27.434c13.115-90.459 48.009-170.963 99.174-238.453l-0.931 1.281 155.111 116.384c-31.476 41.347-53.309 91.675-61.231 146.504l-0.204 1.719zM466.283 704.020l-27.434 191.919c-90.459-13.115-170.963-48.009-238.453-99.174l1.281 0.931 116.384-155.111c41.347 31.476 91.675 53.309 146.504 61.231l1.719 0.204zM822.323 797.758c-66.209 50.233-146.713 85.127-234.39 97.91l-2.781 0.333-27.434-191.919c56.552-8.145 106.879-29.998 149.006-62.068l-0.784 0.573zM832.020 429.717l191.919 27.434c-13.115 90.459-48.009 170.963-99.174 238.453l0.931-1.281-155.111-116.384c31.476-41.347 53.309-91.675 61.231-146.504l0.204-1.719zM201.677-29.758c66.209-50.233 146.713-85.127 234.39-97.91l2.781-0.333 27.434 191.919c-56.552 8.145-106.879 29.998-149.006 62.068l0.784-0.573zM770.586 190.061l155.131-116.343c50.233 66.209 85.127 146.713 97.91 234.39l0.333 2.781-191.919 27.434c-8.125-56.564-29.966-106.906-62.028-149.049l0.574 0.786zM557.717 63.98l27.434-191.919c90.459 13.115 170.963 48.009 238.453 99.174l-1.281-0.931-116.384 155.111c-41.347-31.476-91.675-53.309-146.504-61.231l-1.719-0.204zM770.586 384c0-142.813-115.773-258.586-258.586-258.586s-258.586 115.773-258.586 258.586c0 142.813 115.773 258.586 258.586 258.586s258.586-115.773 258.586-258.586z" />
+<glyph unicode="&#xea26;" glyph-name="icon-contrast" d="M512 896c-282.78 0-512-229.24-512-512s229.22-512 512-512 512 229.24 512 512-229.22 512-512 512zM783.52 112.48c-69.111-69.481-164.785-112.481-270.502-112.481-0.358 0-0.716 0-1.074 0.001h0.055v768c212.070-0.010 383.982-171.929 383.982-384 0-106.034-42.977-202.031-112.462-271.52v0z" />
+<glyph unicode="&#xea27;" glyph-name="icon-expand" d="M960 896c0 0 0 0 0 0h-320v-128h165.4l-210.6-210.8c-25-25-25-65.6 0-90.6 12.4-12.4 28.8-18.8 45.2-18.8s32.8 6.2 45.2 18.8l210.8 210.8v-165.4h128v384h-64zM896 90.6l-210.8 210.6c-25 25-65.6 25-90.6 0s-25-65.6 0-90.6l210.8-210.6h-165.4v-128h384v384h-128v-165.4zM218.6 768h165.4v128h-320c0 0 0 0 0 0h-64v-384h128v165.4l210.8-210.8c12.4-12.4 28.8-18.8 45.2-18.8s32.8 6.2 45.2 18.8c25 25 25 65.6 0 90.6l-210.6 210.8zM338.8 301.2l-210.8-210.6v165.4h-128v-384h384v128h-165.4l210.8 210.8c25 25 25 65.6 0 90.6-25.2 24.8-65.6 24.8-90.6-0.2z" />
+<glyph unicode="&#xea28;" glyph-name="icon-list-view" d="M0 832h1024v-128h-1024v128zM0 576h1024v-128h-1024v128zM0 320h1024v-128h-1024v128zM0 64h1024v-128h-1024v128z" />
+<glyph unicode="&#xea29;" glyph-name="icon-grid-snap-to" d="M382 66h448v448h-448v-448zM510 386h192v-192h-192v192zM-2 322h320v-64h-320v64zM894 322h128v-64h-128v64zM574 898h64v-320h-64v320zM574 2h64v-128h-64v128zM574 322h64v-64h-64v64z" />
+<glyph unicode="&#xea2a;" glyph-name="icon-grid-snap-no" d="M768 320h192v-64h-192v64zM256 320h192v-64h-192v64zM0 320h192v-64h-192v64zM640 384h-64v-64h-64v-64h64v-64h64v64h64v64h-64zM576 640h64v-192h-64v192zM576 896h64v-192h-64v192zM576 128h64v-192h-64v192z" />
+<glyph unicode="&#xea2b;" glyph-name="icon-frame-show" d="M0 832v-896h1024v896h-1024zM896 64h-768v640h768v-640zM192 640h384v-128h-384v128z" />
+<glyph unicode="&#xea2c;" glyph-name="icon-frame-hide" d="M128 706h420l104 128h-652v-802.4l128 157.4zM896 66h-420l-104-128h652v802.4l-128-157.4zM832 898l-832-1024h192l832 1024zM392 514l104 128h-304v-128z" />
+<glyph unicode="&#xea2d;" glyph-name="icon-import" d="M832 703.6v-639.4c0-0.2-0.2-0.2-0.4-0.4h-319.6v-192h320c105.6 0 192 86.4 192 192v640.2c0 105.6-86.4 192-192 192h-320v-192h319.6c0.2 0 0.4-0.2 0.4-0.4zM192 192v-192l384 384-384 384v-192h-192v-384z" />
+<glyph unicode="&#xea2e;" glyph-name="icon-export" d="M192 64.34v639.32l0.34 0.34h319.66v192h-320c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h320v192h-319.66zM1024 384l-384 384v-192h-192v-384h192v-192l384 384z" />
+<glyph unicode="&#xea2f;" glyph-name="icon-font-size" horiz-adv-x="1504" d="M1226.4 576h-176l-76.22-203.24 77-205.34 87.22 232.58 90.74-242h-174.44l49.5-132h174.44l57.76-154h154l-264 704zM384 896l-384-1024h224l84 224h408l84-224h224l-384 1024zM380 288l132 352 132-352z" />
+<glyph unicode="&#xea30;" glyph-name="icon-clear-data" d="M632 584l-120-120-120 120-80-80 120-120-120-120 80-80 120 120 120-120 80 80-120 120 120 120-80 80zM512 896c-282.76 0-512-86-512-192v-640c0-106 229.24-192 512-192s512 86 512 192v640c0 106-229.24 192-512 192zM512 64c-176.731 0-320 143.269-320 320s143.269 320 320 320c176.731 0 320-143.269 320-320v0c0-176.731-143.269-320-320-320v0z" />
+<glyph unicode="&#xea31;" glyph-name="icon-history" d="M576 832c-247.4 0-448-200.6-448-448h-128l192-192 192 192h-128c0 85.4 33.2 165.8 93.8 226.2 60.4 60.6 140.8 93.8 226.2 93.8s165.8-33.2 226.2-93.8c60.6-60.4 93.8-140.8 93.8-226.2s-33.2-165.8-93.8-226.2c-60.4-60.6-140.8-93.8-226.2-93.8s-165.8 33.2-226.2 93.8l-90.6-90.6c81-81 193-131.2 316.8-131.2 247.4 0 448 200.6 448 448s-200.6 448-448 448zM576 624c-26.6 0-48-21.4-48-48v-211.8l142-142c9.4-9.4 21.6-14 34-14s24.6 4.6 34 14c18.8 18.8 18.8 49.2 0 67.8l-114 114v172c0 26.6-21.4 48-48 48z" />
+<glyph unicode="&#xea32;" glyph-name="icon-arrow-up-to-parent" horiz-adv-x="1056" d="M643.427 70.739c-81.955 0.697-148.179 67.065-148.642 149.010v395.872l296.871-247.393v197.914l-395.828 329.857-395.828-328.62v-197.502l296.871 246.156v-396.241c0-190.905 155.239-346.556 346.144-346.968l412.321-0.825 0.412 197.914z" />
+<glyph unicode="&#xea33;" glyph-name="icon-crosshair-in-circle" d="M512 896c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM783.6 112.4c-54.634-54.8-125.77-93.12-205.322-106.874l-2.278-0.326v250.8h-128v-250.8c-161.302 28.062-286.738 153.497-314.468 312.5l-0.332 2.3h250.8v128h-250.8c28.062 161.302 153.497 286.738 312.5 314.468l2.3 0.332v-250.8h128v250.8c161.302-28.062 286.738-153.497 314.468-312.5l0.332-2.3h-250.8v-128h250.8c-14.080-81.83-52.4-152.966-107.191-207.591l-0.009-0.009z" />
+<glyph unicode="&#xea34;" glyph-name="icon-target" d="M512 512c70.692 0 128-57.308 128-128s-57.308-128-128-128c-70.692 0-128 57.308-128 128v0c0.114 70.647 57.353 127.886 127.989 128h0.011zM512 640c-141.385 0-256-114.615-256-256s114.615-256 256-256c141.385 0 256 114.615 256 256v0c-0.114 141.339-114.661 255.886-255.989 256h-0.011zM512 768c211.87-0.128 383.575-171.912 383.575-383.8 0-211.967-171.833-383.8-383.8-383.8s-383.8 171.833-383.8 383.8c0 105.99 42.963 201.945 112.425 271.4v0c69.21 69.437 164.944 112.401 270.713 112.401 0.312 0 0.624 0 0.936-0.001h-0.048zM512 896c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512z" />
+<glyph unicode="&#xea35;" glyph-name="icon-items-collapse" d="M45.2 237.2h229.6l-274.8-274.6 90.6-90.6 274.6 274.8v-229.6h128v448h-448v-128zM1024 805.4l-90.6 90.6-274.6-274.8v229.6h-128v-448h448v128h-229.6l274.8 274.6z" />
+<glyph unicode="&#xea36;" glyph-name="icon-items-expand" d="M448 0h-229.4l274.6 274.8-90.4 90.4-274.8-274.6v229.4h-128v-448h448v128zM530.8 493.2l90.4-90.4 274.8 274.6v-229.4h128v448h-448v-128h229.4l-274.6-274.8z" />
+<glyph unicode="&#xea37;" glyph-name="icon-3-dots" d="M256 384c0-70.692-57.308-128-128-128s-128 57.308-128 128c0 70.692 57.308 128 128 128s128-57.308 128-128zM640 384c0-70.692-57.308-128-128-128s-128 57.308-128 128c0 70.692 57.308 128 128 128s128-57.308 128-128zM1024 384c0-70.692-57.308-128-128-128s-128 57.308-128 128c0 70.692 57.308 128 128 128s128-57.308 128-128z" />
+<glyph unicode="&#xea38;" glyph-name="icon-grid-on" d="M1024 512v128h-256v256h-128v-256h-256v256h-128v-256h-256v-128h256v-256h-256v-128h256v-256h128v256h256v-256h128v256h256v128h-256v256zM640 256h-256v256h256z" />
+<glyph unicode="&#xea39;" glyph-name="icon-grid-off" d="M256 344.6l128 157.6v9.8h8l104 128h-112v256h-128v-256h-256v-128h256v-167.4zM184 256h-184v-128h80l104 128zM768 423.4l-128-157.6v-9.8h-8l-104-128h112v-256h128v256h256v128h-256v167.4zM840 512h184v128h-80l-104-128zM832 896l-832-1024h192l832 1024h-192z" />
+<glyph unicode="&#xea3a;" glyph-name="icon-camera" d="M896 640h-128l-128 256h-256l-128-256h-128c-70.601-0.227-127.773-57.399-128-127.978v-512.022c0.227-70.601 57.399-127.773 127.978-128h768.022c70.601 0.227 127.773 57.399 128 127.978v512.022c-0.227 70.601-57.399 127.773-127.978 128h-0.022zM512 32c-141.385 0-256 114.615-256 256s114.615 256 256 256c141.385 0 256-114.615 256-256v0c0-141.385-114.615-256-256-256v0z" />
+<glyph unicode="&#xea3b;" glyph-name="icon-folders-collapse" d="M896 576v-448c-0.215-70.606-57.394-127.785-127.979-128h-576.021c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979v448.021c-0.215 70.606-57.394 127.785-127.979 128h-0.021zM832 192v448c-0.215 70.606-57.394 127.785-127.979 128h-192.021l-101.5 82.74c-24.88 24.9-74.040 45.26-109.24 45.26h-237.26c-35.305-0.102-63.898-28.695-64-63.99v-640.010c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979v0.021zM128 252v516l256-260z" />
+<glyph unicode="&#xeb00;" glyph-name="icon-activity" d="M576 832h-256l320-320h-290.256c-44.264 76.516-126.99 128-221.744 128h-128v-512h128c94.754 0 177.48 51.484 221.744 128h290.256l-320-320h256l448 448-448 448z" />
+<glyph unicode="&#xeb01;" glyph-name="icon-activity-mode" d="M512 896c-214.8 0-398.8-132.4-474.8-320h90.8c56.8 0 108-24.8 143-64h241l-192 192h256l320-320-320-320h-256l192 192h-241c-35-39.2-86.2-64-143-64h-90.8c76-187.6 259.8-320 474.8-320 282.8 0 512 229.2 512 512s-229.2 512-512 512z" />
+<glyph unicode="&#xeb02;" glyph-name="icon-autoflow-tabular" d="M192 896c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h64v1024h-64zM384 896h256v-1024h-256v1024zM832 896h-64v-704h256v512c0 105.6-86.4 192-192 192z" />
+<glyph unicode="&#xeb03;" glyph-name="icon-clock" d="M512 896c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM782 206c-12.8-22.2-36.6-36-62.4-36-12.6 0-25 3.4-36 9.6l-222 128.2c-0.8 0.4-1.6 1-2.4 1.4l-0.8 0.6-1.8 1.2-2.4 2-1.8 1.4-0.6 0.6c-0.8 0.6-1.4 1.2-2.2 1.8v0c-5 4.6-9.4 10-13 15.8-0.2 0.4-0.6 1-0.8 1.4s-0.6 1-0.8 1.4c-3.2 6-5.8 12.4-7.2 19.2v0.2c-0.2 1-0.4 1.8-0.6 2.8 0 0.2 0 0.6-0.2 0.8-0.2 0.6-0.2 1.4-0.2 2.2s-0.2 1-0.2 1.6 0 1-0.2 1.6-0.2 1.6-0.2 2.2c0 0.4 0 0.6 0 1 0 1 0 1.8 0 2.8 0 0 0 0.2 0 0.4v363.8c0 39.8 32.2 72 72 72s72-32.2 72-72v-322.4l185.8-107.2c34.2-20 45.8-64 26-98.4z" />
+<glyph unicode="&#xeb04;" glyph-name="icon-database" d="M1024 704c0-106.039-229.23-192-512-192s-512 85.961-512 192c0 106.039 229.23 192 512 192s512-85.961 512-192zM512 384c-282.77 0-512 85.962-512 192v-512c0-106.038 229.23-192 512-192s512 85.962 512 192v512c0-106.038-229.23-192-512-192z" />
+<glyph unicode="&#xeb05;" glyph-name="icon-database-query" d="M683.52 76.714c-50.782-28.456-109.284-44.714-171.52-44.714-194.094 0-352 157.906-352 352s157.906 352 352 352 352-157.906 352-352c0-62.236-16.258-120.738-44.714-171.52l191.692-191.692c8.516 13.89 13.022 28.354 13.022 43.212v640c0 106.038-229.23 192-512 192s-512-85.962-512-192v-640c0-106.038 229.23-192 512-192 126.11 0 241.548 17.108 330.776 45.46l-159.256 159.254zM352 384c0-88.224 71.776-160 160-160s160 71.776 160 160-71.776 160-160 160-160-71.776-160-160z" />
+<glyph unicode="&#xeb06;" glyph-name="icon-dataset" d="M896 704h-320c-16.4 16.4-96.8 96.8-109.2 109.2l-37.4 37.4c-25 25-74.2 45.4-109.4 45.4h-256c-35.2 0-64-28.8-64-64v-384c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v128c0 70.4-57.6 128-128 128zM896 448h-768c-70.4 0-128-57.6-128-128v-320c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v320c0 70.4-57.6 128-128 128zM320 0h-128v320h128v-320zM576 0h-128v320h128v-320zM832 0h-128v320h128v-320z" />
+<glyph unicode="&#xeb07;" glyph-name="icon-datatable" d="M1024 704c0-106.039-229.23-192-512-192s-512 85.961-512 192c0 106.039 229.23 192 512 192s512-85.961 512-192zM512 384c-282.8 0-512 86-512 192v-512c0-106 229.2-192 512-192s512 86 512 192v512c0-106-229.2-192-512-192zM896 321v-256c-36.6-15.6-79.8-28.8-128-39.4v256c48.2 10.6 91.4 23.8 128 39.4zM256 281.6v-256c-48.2 10.4-91.4 23.8-128 39.4v256c36.6-15.6 79.8-28.8 128-39.4zM384 6v256c41-4 83.8-6 128-6s87 2.2 128 6v-256c-41-4-83.8-6-128-6s-87 2.2-128 6z" />
+<glyph unicode="&#xeb08;" glyph-name="icon-dictionary" d="M832 256c105.6 0 192 86.4 192 192v256c0 105.6-86.4 192-192 192v-320l-128 64-128-64v320h-384c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v192c0-105.6-86.4-192-192-192h-640v192h640z" />
+<glyph unicode="&#xeb09;" glyph-name="icon-folder" d="M896 704h-320c-16.4 16.4-96.8 96.8-109.2 109.2l-37.4 37.4c-25 25-74.2 45.4-109.4 45.4h-256c-35.2 0-64-28.8-64-64v-384c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v128c0 70.4-57.6 128-128 128zM896 448h-768c-70.4 0-128-57.6-128-128v-320c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v320c0 70.4-57.6 128-128 128z" />
+<glyph unicode="&#xeb0a;" glyph-name="icon-image" d="M896 896h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM896 0h-768v768h768v-768zM320 640l-128-128v-448h640v320l-128 128-128-128z" />
+<glyph unicode="&#xeb0b;" glyph-name="icon-layout" d="M448 896h-256c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h256v1024zM832 896h-256v-577.664h448v385.664c0 105.6-86.4 192-192 192zM576-128h256c105.6 0 192 86.4 192 192v129.664h-448v-321.664z" />
+<glyph unicode="&#xeb0c;" glyph-name="icon-object" d="M512-128l512 320v384l-512.020 320-511.98-320v-384l512-320zM512 704l358.4-224-358.4-224-358.4 224 358.4 224z" />
+<glyph unicode="&#xeb0d;" glyph-name="icon-object-unknown" d="M511.98 896l-511.98-320v-384l512-320 512 320v384l-512.020 320zM586.22 0h-141.36v136.64h141.36v-136.64zM721.040 398.1c-11.94-17.020-34.9-38.78-68.84-65.24l-33.48-26c-18.24-14.18-30.34-30.74-36.32-49.64-3.78-11.98-5.82-30.58-6.14-55.8h-128.12c1.88 53.26 6.92 90.060 15.080 110.4 8.18 20.34 29.22 43.74 63.16 70.22l34.42 26.94c11.3 8.52 20.42 17.8 27.34 27.9 12.56 17.34 18.86 36.4 18.86 57.2 0 23.94-7 45.78-20.98 65.48-14 19.7-39.54 29.54-76.64 29.54s-62.34-12.14-77.6-36.4c-15.24-24.28-22.88-49.48-22.88-75.64h-136.64c3.78 89.84 35.14 153.5 94.080 191.020 37.18 23.94 82.9 35.94 137.12 35.94 71.22 0 130.42-17.020 177.54-51.060s70.68-84.48 70.68-151.3c0-40.98-10.22-75.5-30.66-103.54z" />
+<glyph unicode="&#xeb0e;" glyph-name="icon-packet" d="M512 896l-512-320v-512c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v512l-512 320zM512 704l358.4-224-358.4-224-358.4 224 358.4 224z" />
+<glyph unicode="&#xeb0f;" glyph-name="icon-page" d="M704 384c-105.6 0-192 86.4-192 192v320h-320c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v320h-320zM768 512h256l-384 384v-256c0-70.4 57.6-128 128-128z" />
+<glyph unicode="&#xeb10;" glyph-name="icon-plot-overlay" d="M830 896h-636c-106.7 0-194-87.3-194-194v-406.82c14.18-18.64 25.66-28.34 32-30.84 14.28 5.62 54.44 47.54 92.96 146 42.46 108.38 116.32 237.66 227.040 237.66 52.4 0 101.42-29.16 145.7-86.68 37.34-48.5 64.84-108.92 81.34-151.080 38.52-98.38 78.68-140.3 92.96-146 14.28 5.62 54.44 47.54 92.96 146 42.46 108.48 116.32 237.76 227.040 237.76 11.355-0.003 22.389-1.366 32.952-3.936l-0.952 0.196v57.74c0 106.7-87.3 194-194 194zM992 503.66c-14.28-5.62-54.44-47.52-92.96-146-42.46-108.38-116.32-237.66-227.040-237.66-52.4 0-101.42 29.16-145.7 86.68-37.34 48.5-64.84 108.92-81.34 151.080-38.52 98.38-78.68 140.3-92.96 146-14.28-5.62-54.44-47.52-92.96-146-42.46-108.48-116.32-237.76-227.040-237.76-11.355 0.003-22.389 1.367-32.952 3.936l0.952-0.196v-57.74c0-106.7 87.3-194 194-194h636c106.7 0 194 87.3 194 194v406.82c-14.18 18.64-25.66 28.34-32 30.84z" />
+<glyph unicode="&#xeb11;" glyph-name="icon-plot-stacked" d="M89.6 584c24.98 0 48.96 26.52 85.52 70.18 45.42 54.28 102 121.82 196 121.82 44.64 0 86.62-15.46 124.8-46 28.68-22.9 51.16-50.42 72.92-77.060 38.42-46.94 59.16-68.94 83.96-68.94h371.2v118c0 106.7-87.3 194-194 194h-636c-106.7 0-194-87.3-194-194v-118h89.6zM529.5 485.6c-28.24 22.64-50.52 50-72 76.28-35.5 43.48-58.76 70.12-86.3 70.12-25.060 0-49.080-26.54-85.66-70.24-45.4-54.24-102-121.76-196-121.76h-89.54v-112h371.2c44 0 85.54-15.34 123.3-45.6 28.24-22.64 50.52-50 72-76.28 35.5-43.48 58.76-70.12 86.3-70.12 25.060 0 49.080 26.54 85.66 70.24 45.4 54.24 102 121.76 196 121.76h89.54v112h-371.2c-44.060 0-85.54 15.34-123.3 45.6zM934.4 184c-24.98 0-48.96-26.52-85.52-70.18-45.42-54.28-102-121.82-196-121.82-44.64 0-86.62 15.46-124.8 46-28.68 22.9-51.16 50.42-72.92 77.060-38.42 46.94-59.16 68.94-83.96 68.94h-371.2v-118c0-106.7 87.3-194 194-194h636c106.7 0 194 87.3 194 194v118h-89.6z" />
+<glyph unicode="&#xeb12;" glyph-name="icon-session" d="M635.6 371.6c6.6-4.2 13.2-8.6 19.2-13.6l120.4-96.4c29.6-23.8 83.8-23.8 113.4 0l135.2 108c0.2 4.8 0.2 9.4 0.2 14.2 0 52.2-7.8 102.4-22.2 149.8l-154.8-123.6c-58.2-46.6-140.2-59.2-211.4-38.4zM248.6 261.8l120.4 96.4c58 46.4 140 59.2 211.2 38.4-6.6 4.2-13.2 8.6-19.2 13.6l-120.4 96.4c-29.6 23.8-83.8 23.8-113.4 0l-120.2-96.6c-40-32-91.4-48-143-48-21.6 0-43 2.8-63.8 8.4 0-0.6 0-1.2 0-1.6 5-3.4 10-6.8 14.6-10.6l120.4-96.4c29.8-23.8 83.8-23.8 113.4 0zM120.6 517.8l120.4 96.4c80.2 64.2 205.6 64.2 285.8 0l120.4-96.4c29.6-23.8 83.8-23.8 113.4 0l181 144.8c-91.2 140.4-249.6 233.4-429.6 233.4-238.6 0-439.2-163.2-496-384.2 30.8-17.6 77.8-15.6 104.6 6zM689 154l-120.4 96.4c-29.6 23.8-83.8 23.8-113.4 0l-120.2-96.4c-40-32-91.4-48-143-48-47.8 0-95.4 13.8-134.2 41.4 85.6-163.6 256.8-275.4 454.2-275.4s368.6 111.8 454.2 275.4c-80.4-57.4-199.8-55.2-277.2 6.6z" />
+<glyph unicode="&#xeb13;" glyph-name="icon-tabular" d="M896 896h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM640 448h-256v192h256v-192zM384 384h256v-192h-256v192zM320 192h-256v192h256v-192zM320 640v-192h-256v192h256zM128-64c-17 0-33 6.6-45.2 18.8s-18.8 28.2-18.8 45.2v128h256v-192h-192zM384-64v192h256v-192h-256zM960 0c0-17-6.6-33-18.8-45.2s-28.2-18.8-45.2-18.8h-192v192h256v-128zM960 192h-256v192h256v-192zM960 448h-256v192h256v-192z" />
+<glyph unicode="&#xeb14;" glyph-name="icon-tabular-lad" d="M896 896h-768c-70.6-0.2-127.8-57.4-128-128v-768c0.2-70.6 57.4-127.8 128-128h768c70.6 0.2 127.8 57.4 128 128v768c-0.2 70.6-57.4 127.8-128 128zM64 640h256v-192h-256v192zM64 384h256v-192h-256v192zM128-64c-35.2 0.2-63.8 28.8-64 64v128h256v-192h-192zM384-64v192h256v-192h-256zM960 0c-0.2-35.2-28.8-63.8-64-64h-192v192h256v-128zM960 384v-192h-576v192h64v64h-64v192h576v-192h-64v-64h64zM782.4 348.6l-110.4 55.2v172.2c0 17.6-14.4 32-32 32s-32-14.4-32-32v-211.8l145.6-72.8c15.8-8 35-1.6 43 14.4 8 15.6 1.6 35-14.2 42.8v0z" />
+<glyph unicode="&#xeb15;" glyph-name="icon-tabular-lad-set" d="M128 128v576c-70.6-0.2-127.8-57.4-128-128v-576c0.2-70.6 57.4-127.8 128-128h576c70.6 0.2 127.8 57.4 128 128h-576c-70.6 0.2-127.8 57.4-128 128zM896 896h-576c-70.6-0.2-127.8-57.4-128-128v-576c0.2-70.6 57.4-127.8 128-128h576c70.6 0.2 127.8 57.4 128 128v576c-0.2 70.6-57.4 127.8-128 128zM256 704h192v-128h-192v128zM256 512h192v-192h-192v192zM320 128c-35.2 0.2-63.8 28.8-64 64v64h192v-128h-128zM512 128v128h192v-128h-192zM960 192c-0.2-35.2-28.8-63.8-64-64h-128v128h192v-64zM960 320h-448v384h448v-384zM832 416c17.6 0 32 14.4 32 32 0 13.8-8.8 26-21.8 30.4l-74.2 24.6v105c0 17.6-14.4 32-32 32s-32-14.4-32-32v-151l117.8-39.2c3.4-1.2 6.8-1.8 10.2-1.8z" />
+<glyph unicode="&#xeb16;" glyph-name="icon-tabular-realtime" d="M896 896h-768c-70.606-0.215-127.785-57.394-128-127.979v-768.021c0.215-70.606 57.394-127.785 127.979-128h768.021c70.606 0.215 127.785 57.394 128 127.979v768.021c-0.215 70.606-57.394 127.785-127.979 128h-0.021zM448 604l25.060-25.32c7.916-7.922 18.856-12.822 30.94-12.822s23.023 4.9 30.94 12.822v0l75.5 76.3c29.97 30.338 71.571 49.128 117.56 49.128s87.59-18.79 117.544-49.112l0.016-0.016 50.44-50.98v-152.2c-24.111 8.83-44.678 22.255-61.542 39.342l-0.018 0.018-75.5 76.3c-7.916 7.922-18.856 12.822-30.94 12.822s-23.023-4.9-30.94-12.822v0l-75.5-76.3c-29.971-30.343-71.575-49.137-117.568-49.137-20.084 0-39.331 3.584-57.137 10.146l1.145-0.369v152.2zM320-64h-192c-35.26 0.214-63.786 28.74-64 63.98v128.020h256v-192zM320 192h-256v192h256v-192zM320 448h-256v192h256v-192zM640-64h-256v192h256v-192zM448 259.38v174.5c1.88-1.74 3.74-3.5 5.56-5.34l75.5-76.3c7.916-7.922 18.856-12.822 30.94-12.822s23.023 4.9 30.94 12.822v0l75.5 76.3c29.966 30.333 71.56 49.119 117.542 49.119 43.28 0 82.673-16.643 112.128-43.879l-0.11 0.1v-174.5c-1.88 1.74-3.74 3.5-5.56 5.34l-75.5 76.3c-7.916 7.922-18.856 12.822-30.94 12.822s-23.023-4.9-30.94-12.822v0l-75.5-76.3c-29.966-30.333-71.56-49.119-117.542-49.119-43.28 0-82.673 16.643-112.128 43.879l0.11-0.1zM960 0c-0.214-35.26-28.74-63.786-63.98-64h-192.020v192h256v-128z" />
+<glyph unicode="&#xeb17;" glyph-name="icon-tabular-scrolling" d="M896 896h-768c-70.606-0.215-127.785-57.394-128-127.979v-768.021c0.215-70.606 57.394-127.785 127.979-128h768.021c70.606 0.215 127.785 57.394 128 127.979v768.021c-0.215 70.606-57.394 127.785-127.979 128h-0.021zM768 640v-192h-192v192zM576 384h192v-192h-192zM512 192h-192v192h192zM512 640v-192h-192v192zM64 640h192v-192h-192zM64 384h192v-192h-192zM128-64c-35.255 0.225-63.775 28.745-64 63.978v128.022h192v-192zM320-64v192h192v-192zM704-64h-128v192h192v-192zM941.14-45.14c-11.511-11.644-27.483-18.856-45.139-18.86h-64.001v64h128c-0.004-17.657-7.216-33.629-18.854-45.134l-0.006-0.006zM960 128h-128v512h128z" />
+<glyph unicode="&#xeb18;" glyph-name="icon-telemetry" d="M32 264.34c14.28 5.62 54.44 47.54 92.96 146 42.46 108.38 116.32 237.66 227.040 237.66 52.4 0 101.42-29.16 145.7-86.68 37.34-48.5 64.84-108.92 81.34-151.080 38.52-98.38 78.68-140.3 92.96-146 14.28 5.62 54.44 47.54 92.96 146 37.4 95.5 99.14 207.14 188.94 232.46-90.462 152.598-254.314 253.3-441.686 253.3-0.075 0-0.15 0-0.225 0h0.011c-282.76 0-512-229.24-512-512 0-0.032 0-0.070 0-0.108 0-35.719 3.641-70.587 10.572-104.254l-0.572 3.323c9.54-10.78 17.22-16.74 22-18.62zM992 503.66c-14.28-5.62-54.44-47.52-92.96-146-42.46-108.38-116.32-237.66-227.040-237.66-52.4 0-101.42 29.16-145.7 86.68-37.34 48.5-64.84 108.92-81.34 151.080-38.52 98.38-78.68 140.3-92.96 146-14.28-5.62-54.44-47.52-92.96-146-37.4-95.5-99.14-207.14-188.94-232.46 90.462-152.598 254.314-253.3 441.686-253.3 0.075 0 0.15 0 0.225 0h-0.011c282.76 0 512 229.24 512 512 0 0.032 0 0.070 0 0.108 0 35.719-3.641 70.587-10.572 104.254l0.572-3.323c-9.54 10.78-17.22 16.74-22 18.62z" />
+<glyph unicode="&#xeb19;" glyph-name="icon-timeline" d="M832 896h-640c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM128 576v128h256v-128zM256 448h384v-128h-384zM896 64h-448v128h448zM896 320h-128v128h128zM896 576h-384v128h384z" />
+<glyph unicode="&#xeb1a;" glyph-name="icon-timer" d="M640 749.4v82.58c0 35.346-28.654 64-64 64v0h-128c-35.346 0-64-28.654-64-64v0-82.58c-185.040-55.080-320-226.48-320-429.42 0-247.42 200.58-448 448-448s448 200.58 448 448c0 202.96-135 374.4-320 429.42zM532 299.98l-263.76-211c-57.105 59.935-92.24 141.25-92.24 230.772 0 0.080 0 0.16 0 0.24v-0.012c0 185.28 150.72 336 336 336 6.72 0 13.38-0.22 20-0.62v-355.38z" />
+<glyph unicode="&#xeb1b;" glyph-name="icon-topic" d="M454.36 419.36l86.3 86.3c9.088 8.965 21.577 14.502 35.36 14.502s26.272-5.537 35.366-14.507l86.294-86.294c19.328-19.358 42.832-34.541 69.047-44.082l1.313-0.418v172.14l-57.64 57.64c-34.408 34.33-81.9 55.558-134.35 55.558s-99.943-21.228-134.354-55.562l-86.296-86.296c-9.088-8.965-21.577-14.502-35.36-14.502s-26.272 5.537-35.366 14.507l-28.674 28.654v-172.14c19.045-7.022 41.040-11.084 63.984-11.084 52.463 0 99.966 21.239 134.379 55.587l-0.003-0.003zM505.64 348.64l-86.3-86.3c-9.088-8.965-21.577-14.502-35.36-14.502s-26.272 5.537-35.366 14.507l-86.294 86.294c-2 2-4.2 4-6.36 6v-197.36c33.664-30.721 78.65-49.537 128.031-49.537 52.44 0 99.923 21.22 134.333 55.541l86.296 86.296c9.088 8.965 21.577 14.502 35.36 14.502s26.272-5.537 35.366-14.507l86.294-86.294c2-2 4.2-4 6.36-6v197.36c-33.664 30.721-78.65 49.537-128.031 49.537-52.44 0-99.923-21.22-134.333-55.541l0.004 0.004zM832 896h-128v-192h127.66l0.34-0.34v-639.32l-0.34-0.34h-127.66v-192h128c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM320 64h-127.66l-0.34 0.34v639.32l0.34 0.34h127.66v192h-128c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h128v192z" />
+<glyph unicode="&#xeb1c;" glyph-name="icon-box-with-dashed-lines-v2" d="M0 512h128v-256h-128v256zM128 767.78l0.22 0.22h191.78v128h-192c-70.606-0.215-127.785-57.394-128-127.979v-192.021h128v191.78zM128 0.22v191.78h-128v-192c0.215-70.606 57.394-127.785 127.979-128h192.021v128h-191.78zM384 896h256v-128h-256v128zM896 0.22l-0.22-0.22h-191.78v-128h192c70.606 0.215 127.785 57.394 128 127.979v192.021h-128v-191.78zM896 896h-192v-128h191.78l0.22-0.22v-191.78h128v192c-0.215 70.606-57.394 127.785-127.979 128h-0.021zM896 512h128v-256h-128v256zM384 0h256v-128h-256v128zM256 640h512v-512h-512v512z" />
+<glyph unicode="&#xeb1d;" glyph-name="icon-summary-widget" d="M896 896h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM847.8 285.6l-82.6-143.2-189.6 131.6 19.2-230h-165.4l19.2 230-189.6-131.6-82.6 143.2 208.6 98.4-208.8 98.4 82.6 143.2 189.6-131.6-19.2 230h165.4l-19.2-230 189.6 131.6 82.6-143.2-208.6-98.4 208.8-98.4z" />
+<glyph unicode="&#xeb1e;" glyph-name="icon-notebook" d="M896 785.2c0 79.8-55.4 127.4-123 105.4l-773-250.6h896v145.2zM896 576h-896v-576c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v448c0 70.4-57.6 128-128 128zM832 64h-384v320h384v-320z" />
+<glyph unicode="&#xeb1f;" glyph-name="icon-tabs-view" d="M0 0c0.227-70.601 57.399-127.773 127.978-128h768.022c70.601 0.227 127.773 57.399 128 127.978v608.022h-512l-50.2 225.6c-7.6 34.2-42.6 62.4-77.8 62.4h-256c-70.601-0.227-127.773-57.399-128-127.978v-0.022zM832 128h-640v256h640zM480 896c35.2 0 70.2-28.2 77.8-62.4l36-161.6h430.2v96c-0.227 70.601-57.399 127.773-127.978 128h-0.022z" />
+<glyph unicode="&#xeb20;" glyph-name="icon-flexible-layout" d="M0 64c0-105.6 86.4-192 192-192h64v576h-256zM0 704v-128h256v320h-64c-105.6 0-192-86.4-192-192zM768-128h64c105.6 0 192 86.4 192 192v128h-256zM384 896h256v-1024h-256v1024zM832 896h-64v-576h256v384c0 105.6-86.4 192-192 192z" />
+<glyph unicode="&#xeb21;" glyph-name="icon-generator-sine" d="M152 422.2c10.8 4.2 40.8 35.6 69.8 109.4 31.8 81.4 87.2 178.4 170.2 178.4 39.4 0 76-21.8 109.2-65 28-36.4 48.8-81.6 61-113.4 29-73.8 59-105.2 69.8-109.4 10.8 4.2 40.8 35.6 69.8 109.4s74.2 155.4 141.6 174.4c-67.89 114.467-190.82 190-331.391 190-0.003 0-0.007 0-0.010 0h0.001c-212 0-384-172-384-384 0.017-26.829 2.71-53.018 7.827-78.329l-0.427 2.529c7.2-8 13-12.6 16.6-14zM884.6 419c7.235 27.919 11.392 59.972 11.4 92.995v0.005c-0.017 26.829-2.71 53.018-7.827 78.329l0.427-2.529c-7.2 8-13 12.6-16.6 14-10.8-4.2-40.8-35.6-69.8-109.4-21.8-55.8-54.6-119-100-153.2zM512 256l135 59c-4.485-0.614-9.689-0.977-14.972-1h-0.028c-39.4 0-76 21.8-109.2 65-28 36.4-48.8 81.6-61 113.4-29 73.8-59 105.2-69.8 109.4-10.8-4.2-40.8-35.6-69.8-109.4-16.4-42.2-39.2-88.4-68.8-123.2zM1024 416l-512-224-512 224v-320l512-224 512 224v320z" />
+<glyph unicode="&#xeb22;" glyph-name="icon-generator-event" d="M320 704h384v-64h-384v64zM320 448h384v-64h-384v64zM320 576h320v-64h-320v64zM256 767.8h512v-399.8l128 56v344c-0.227 70.601-57.399 127.773-127.978 128h-512.022c-70.601-0.227-127.773-57.399-128-127.978v-344.022l128-56zM658.2 320h-292.4l146.2-64 146.2 64zM512 192l-512 224v-320l512-224 512 224v320l-512-224z" />
+<glyph unicode="&#xeb23;" glyph-name="icon-gauge-v2" d="M512 896c-282.8 0-512-229.2-512-512 0-226.4 147-418.4 350.6-486l257.4 486v-503c236.8 45 416 253 416 503 0 282.8-229.2 512-512 512zM754.8 368.2c-58.967 68.597-145.842 111.772-242.8 111.772s-183.833-43.176-242.445-111.35l-0.355-0.422-146 125c8.6 10 17.4 19.6 26.8 28.8 92.628 92.679 220.619 150.006 362 150.006s269.372-57.326 361.997-150.003l0.003-0.003c9.4-9.2 18.2-18.8 26.8-28.8z" />
+<glyph unicode="&#xeb24;" glyph-name="icon-spectra" d="M768 192h-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 896h-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 256v64l-384 64 384-128z" />
+<glyph unicode="&#xeb25;" glyph-name="icon-telemetry-spectra" d="M512 640l109.8-192h398.2c-31.4 252.6-247 448-508 448-282.8 0-512-229.2-512-512l400 60.2zM768 192h-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 384l384-128v64l-384 64z" />
+<glyph unicode="&#xeb26;" glyph-name="icon-pushbutton" d="M370.2 436.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 626.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 768c141.2 0 256-100.4 256-224s-114.8-224-256-224-256 100.4-256 224 114.8 224 256 224zM512 64c-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 896c-282.76 0-512-229.24-512-512s229.24-512 512-512 512 229.24 512 512-229.24 512-512 512zM512 128l-384 256 384 256 384-256z" />
+<glyph unicode="&#xeb28;" glyph-name="icon-condition-widget" d="M832 896h-640c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM512 128l-384 256 384 256 384-256z" />
+<glyph unicode="&#xeb29;" glyph-name="icon-alphanumeric" d="M535.6 365.4c-8.4-1.6-17.2-3-26.2-4s-18.2-2.4-27.2-4c-10.196-1.861-18.808-4.010-27.21-6.633l1.61 0.433c-8.609-2.674-16.105-6.348-22.89-10.987l0.29 0.187c-6.693-4.517-12.283-10.107-16.663-16.585l-0.137-0.215c-4.6-6.8-7.4-15.6-8.8-26s-0.4-18.4 2.4-25.2c2.746-6.688 7.224-12.195 12.881-16.122l0.119-0.078c5.967-4.053 13.057-6.94 20.704-8.161l0.296-0.039c7.592-1.527 16.319-2.4 25.25-2.4 0.123 0 0.246 0 0.369 0h-0.019c22.2 0 39.6 3.6 52.6 11s23.2 16.2 30.2 26.4c6.273 8.873 11.271 19.191 14.426 30.285l0.174 0.715c1.853 6.809 3.601 15.41 4.855 24.169l0.145 1.231 5.2 41.6c-5.4-4.217-11.723-7.564-18.583-9.689l-0.417-0.111c-6.489-2.241-14.362-4.255-22.444-5.662l-0.956-0.138zM1024 512v192h-152l24 192h-192l-24-192h-256l24 192h-192l-24-192h-232v-192h208l-32-256h-176v-192h152l-24-192h192l24 192h256l-24-192h192l24 192h232v192h-208l32 256zM702.8 484.2l-26.4-211.8c-2.231-15.809-3.537-34.122-3.6-52.727v-0.073c0-16.8 2.2-29.4 6.4-37.8h-113.4c-1.342 5.556-2.338 12.122-2.781 18.84l-0.019 0.36c-0.261 3.524-0.409 7.634-0.409 11.778 0 2.962 0.076 5.907 0.226 8.832l-0.017-0.41c-18.663-17.401-41.395-30.694-66.597-38.289l-1.203-0.311c-22.627-6.956-48.639-10.974-75.586-11h-0.014c-0.764-0.011-1.666-0.018-2.569-0.018-18.098 0-35.598 2.563-52.156 7.345l1.325-0.328c-15.991 4.512-29.851 12.090-41.545 22.122l0.145-0.122c-11.233 9.982-19.792 22.733-24.624 37.192l-0.176 0.608c-5.2 15.2-6.4 33.4-3.8 54.4s9.4 42.2 19.4 57.2c9.524 14.399 21.535 26.346 35.532 35.512l0.468 0.288c13.387 8.662 28.922 15.533 45.512 19.765l1.088 0.235c13.436 3.792 30.801 7.554 48.47 10.41l2.93 0.39c17 2.6 33.8 4.6 50.4 6.2 16.628 1.527 31.69 4.070 46.349 7.643l-2.149-0.443c13 3 23.6 7.6 31.6 13.6s12.6 15 13.6 26.4 0.8 21.8-2.4 28.8c-2.849 6.902-7.542 12.56-13.468 16.517l-0.132 0.083c-6.217 4.011-13.604 6.78-21.543 7.774l-0.257 0.026c-7.897 1.277-17 2.007-26.274 2.007-0.537 0-1.073-0.002-1.609-0.007l0.082 0.001c-22 0-40-4.6-53.8-14.2s-23-25.2-28-47.2h-111.8c4.8 26.2 14.2 48 27.8 65.4 13.475 16.978 29.89 30.968 48.574 41.377l0.826 0.423c18.192 10.038 39.297 17.806 61.619 22.175l1.381 0.225c20.488 4.162 44.053 6.563 68.171 6.6h0.029c21.8-0.005 43.239-1.532 64.222-4.479l-2.422 0.279c20.641-2.809 39.324-8.783 56.401-17.461l-1.001 0.461c15.909-8.108 28.858-20.031 37.967-34.601l0.233-0.399c9-15 12.2-34.8 9-59.6z" />
+<glyph unicode="&#xeb2a;" glyph-name="icon-image-telemetry" d="M512 896c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM783.6 112.4c-69.581-69.675-165.757-112.776-272-112.776-212.298 0-384.4 172.102-384.4 384.4s172.102 384.4 384.4 384.4c212.298 0 384.4-172.102 384.4-384.4 0-0.008 0-0.017 0-0.025v0.001c0.001-0.264 0.001-0.575 0.001-0.887 0-105.769-42.964-201.503-112.391-270.703l-0.010-0.010zM704 512l-128-128-192 192-192-192c0-176.731 143.269-320 320-320s320 143.269 320 320v0z" />
+<glyph unicode="&#xeb2b;" glyph-name="icon-telemetry-aggregate" d="M78 500.56c14 41.44 37.48 100.8 69.2 148.36 38.62 57.78 82.38 87.080 130.14 87.080s91.5-29.3 130-87.080c31.72-47.56 55.14-106.92 69.2-148.36 30.88-90.96 63.12-134.98 78-146.54 14.94 11.56 47.2 55.58 78 146.54 14 41.44 37.48 100.8 69.22 148.36q27.8 41.7 59.12 63.5c-75.7 111.377-201.81 183.58-344.783 183.58-0.034 0-0.068 0-0.103 0h0.006c-229.76 0-416-186.24-416-416 0-0.071 0-0.156 0-0.24 0-39.119 5.396-76.977 15.484-112.871l-0.704 2.931c16.78 21.74 40.4 63.34 63.22 130.74zM754 459.44c-14-41.44-37.48-100.8-69.2-148.36-38.56-57.78-82.32-87.080-130-87.080s-91.5 29.3-130 87.080c-31.72 47.56-55.14 106.92-69.2 148.36-30.88 90.96-63.14 134.98-78 146.54-14.94-11.56-47.2-55.58-78-146.54-14.38-41.44-37.8-100.8-69.6-148.36q-27.8-41.7-59.12-63.5c75.7-111.378 201.81-183.58 344.783-183.58 0.119 0 0.237 0 0.356 0h-0.019c229.76 0 416 186.24 416 416 0 0.071 0 0.156 0 0.24 0 39.119-5.396 76.977-15.484 112.871l0.704-2.931c-16.78-21.74-40.4-63.34-63.22-130.74zM921.56 561.38c4.098-24.449 6.44-52.617 6.44-81.332 0-0.017 0-0.034 0-0.051v0.003c0-0.095 0-0.208 0-0.32 0-282.593-229.087-511.68-511.68-511.68-0.113 0-0.225 0-0.338 0h0.018c-0.014 0-0.031 0-0.048 0-28.716 0-56.884 2.342-84.325 6.845l2.993-0.405c72.483-63.623 168.109-102.44 272.802-102.44 0.203 0 0.406 0 0.61 0h-0.031c229.76 0 416 186.24 416 416 0 0.172 0 0.375 0 0.578 0 104.692-38.817 200.319-102.844 273.271l0.404-0.47z" />
+<glyph unicode="&#xeb2c;" glyph-name="icon-bar-graph" d="M832 896h-640c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM267.64 0h-139.64v448h139.64zM477.1 0h-139.64v768h139.64zM686.54 0h-139.64v320h139.64zM896 0h-139.64v640h139.64z" />
+<glyph unicode="&#xeb2d;" glyph-name="icon-map" d="M896 830.6l-128-62.6v-896l128 62.6c70.4 34.42 128 120.2 128 190.6v640c0 70.4-57.6 99.82-128 65.4zM320-16l387.2-96.8v896l-387.2 96.8v-896zM259.2 895.2l-3.2 0.8-128-62.6c-70.4-34.42-128-120.2-128-190.6v-640c0-70.4 57.6-99.82 128-65.4l128 62.6 3.2-0.8z" />
+<glyph unicode="&#xeb2e;" glyph-name="icon-plan" d="M256 704v64c0.215 70.606 57.394 127.785 127.979 128h256.021c70.606-0.215 127.785-57.394 128-127.979v-64.021zM832 768v-128h-640v128c-105.6 0-192-86.4-192-192v-512c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v512c0 105.6-86.4 192-192 192zM128 320v128h256v-128zM640 64h-384v128h384zM896 64h-128v128h128zM896 320h-384v128h384z" />
+<glyph unicode="&#xeb2f;" glyph-name="icon-timelist" d="M896 896h-768c-70.606-0.215-127.785-57.394-128-127.979v-768.021c0.215-70.606 57.394-127.785 127.979-128h768.021c70.606 0.215 127.785 57.394 128 127.979v768.021c-0.215 70.606-57.394 127.785-127.979 128h-0.021zM426.94 362.54c-8.054-15.864-24.249-26.545-42.938-26.545-7.823 0-15.209 1.871-21.734 5.191l0.273-0.126-154.54 77.28v221.66c0 26.51 21.49 48 48 48s48-21.49 48-48v0-162.34l101.46-50.72c15.864-8.054 26.545-24.249 26.545-42.938 0-7.823-1.871-15.209-5.191-21.734l0.126 0.273zM896 0h-320v128h320zM896 192h-320v128h320zM896 384h-320v128h320zM896 576h-320v128h320z" />
+<glyph unicode="&#xeb30;" glyph-name="icon-plot-scatter" d="M192 896c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM128 544c0 53.019 42.981 96 96 96s96-42.981 96-96c0-53.019-42.981-96-96-96v0c-53.019 0-96 42.981-96 96v0zM288 64c-53.019 0-96 42.981-96 96s42.981 96 96 96c53.019 0 96-42.981 96-96v0c0-53.019-42.981-96-96-96v0zM544 256c-53.019 0-96 42.981-96 96s42.981 96 96 96c53.019 0 96-42.981 96-96v0c0-53.019-42.981-96-96-96v0zM544 576c-53.019 0-96 42.981-96 96s42.981 96 96 96c53.019 0 96-42.981 96-96v0c0-53.019-42.981-96-96-96v0zM800 64c-53.019 0-96 42.981-96 96s42.981 96 96 96c53.019 0 96-42.981 96-96v0c0-53.019-42.981-96-96-96v0z" />
+<glyph unicode="&#xeb31;" glyph-name="icon-notebook-restricted" d="M896 785.28c0 79.9-55.38 127.32-123.080 105.36l-772.92-250.64h896v145.28zM896 576h-896v-576c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v448c0 70.4-57.6 128-128 128zM256 64h-128v128h128v-128zM256 256h-128v128h128v-128zM896 64h-512v128h512v-128zM896 256h-512v128h512v-128z" />
 </font></defs></svg>
\ No newline at end of file
diff --git a/src/styles/fonts/Open-MCT-Symbols-16px.ttf b/src/styles/fonts/Open-MCT-Symbols-16px.ttf
index 162658da323..ace20d91a7c 100644
Binary files a/src/styles/fonts/Open-MCT-Symbols-16px.ttf and b/src/styles/fonts/Open-MCT-Symbols-16px.ttf differ
diff --git a/src/styles/fonts/Open-MCT-Symbols-16px.woff b/src/styles/fonts/Open-MCT-Symbols-16px.woff
index 512d06356d4..8a93d16893b 100644
Binary files a/src/styles/fonts/Open-MCT-Symbols-16px.woff and b/src/styles/fonts/Open-MCT-Symbols-16px.woff differ
diff --git a/src/styles/notebook.scss b/src/styles/notebook.scss
index e335b9037f6..53e9d00d36f 100644
--- a/src/styles/notebook.scss
+++ b/src/styles/notebook.scss
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -45,13 +45,13 @@
 
     &__nav {
         flex: 0 0 auto;
+
         * {
             overflow: hidden;
         }
     }
 
     .c-sidebar {
-        background: $sideBarBg;
         .c-sidebar__pane {
             flex-basis: 50%;
         }
@@ -75,8 +75,10 @@
         flex: 1 1 auto;
         flex-direction: column;
         width: 100%;
+
         > * {
             flex: 0 0 auto;
+
             + * {
                 margin-top: $interiorMargin;
             }
@@ -102,7 +104,7 @@
     }
 
     &__head {
-        [class*="__"] + [class*="__"] {
+        [class*='__'] + [class*='__'] {
             margin-left: $interiorMargin;
         }
     }
@@ -111,27 +113,30 @@
         flex: 1 1 auto;
     }
 
+    &__page-locked-message,
     &__drag-area {
-        // TODO: recast this element to use c-drop-hint element
-        background: rgba($colorKey, 0.1);
-        border: 1px dashed rgba($colorKey, 0.7);
         border-radius: $controlCr;
-        color: rgba($colorBodyFg, 0.7);
         padding: 10px;
-        cursor: pointer;
 
         &:before {
             margin-right: 7px !important;
         }
+    }
 
-        [class*="__label"] {
+    &__drag-area {
+        background: rgba($colorKey, 0.1);
+        border: 1px dashed rgba($colorKey, 0.7);
+        color: $colorKey;
+        cursor: pointer;
+        justify-content: center;
+
+        [class*='__label'] {
             font-style: italic;
             @include ellipsize();
         }
 
         &:hover {
-            background: rgba($colorKey, 0.2);
-            color: $colorBodyFg;
+            background: rgba($colorBodyFg, 0.1);
         }
 
         &.drag-active,
@@ -151,6 +156,7 @@
             display: flex;
             flex-wrap: wrap; // Allows wrapping in mobile portrait and narrow placements
             line-height: 220%;
+
             > * {
                 flex: 0 0 auto;
             }
@@ -162,9 +168,11 @@
             overflow: hidden;
             white-space: nowrap;
             font-size: $headerFontSize;
+
             > * {
                 // Section
                 flex: 0 0 auto;
+
                 + * {
                     // Page
                     display: inline;
@@ -185,9 +193,16 @@
             padding-right: $interiorMarginSm; // Scrollbar kickoff
         }
 
-        [class*="__entry"] + [class*="__entry"] {
+        [class*='__entry'] + [class*='__entry'] {
             margin-top: $interiorMarginSm;
         }
+
+        .commit-button {
+            @include cButton();
+            position: absolute;
+            right: 5px;
+            bottom: 5px;
+        }
     }
 
     /***** SEARCH RESULTS */
@@ -218,6 +233,30 @@
             }
         }
     }
+
+    /***** RESTRICTED NOTEBOOK */
+    &__page-locked-message {
+        background: rgba($colorAlert, 0.2);
+        display: flex;
+        padding: 5px;
+
+        > * + * {
+            margin-left: $interiorMargin;
+        }
+
+        [class*='icon'] {
+            flex: 0 0 auto;
+        }
+
+        [class*='__message'] {
+            flex: 1 1 auto;
+        }
+    }
+
+    &__commit-entries-control {
+        display: flex;
+        justify-content: flex-end;
+    }
 }
 
 .is-notebook-default,
@@ -240,74 +279,187 @@
     // A Notebook entry
     $p: $interiorMarginSm;
     @include discreteItem();
+    cursor: pointer;
     display: flex;
     padding: $interiorMarginSm $interiorMarginSm $interiorMarginSm $interiorMargin;
 
-    &__time,
+    @include hover() {
+        background: $colorDiscreteItemBgHov;
+    }
+
+    &.is-selected {
+        background: rgba($colorKey, 0.2);
+
+        .c-ne__text {
+            .c-notebook--page-unlocked & {
+                cursor: text;
+
+                @include hover() {
+                    &:not(.locked) {
+                        background: $colorInputBgHov;
+                    }
+                }
+            }
+        }
+    }
+
     &__text,
     &__local-controls {
         padding-top: $p;
         padding-bottom: $p;
     }
 
-    &__time,
+    &__creator,
     &__embed__time {
         opacity: 0.7;
     }
 
-    &__time-and-content {
+    &__time-and-creator-and-delete,
+    &__text,
+    &__input {
+        padding: $p;
+    }
+
+    &__time-and-creator-and-delete {
         display: flex;
+        align-items: center;
+
+        > * + * {
+            float: right;
+            margin-left: auto;
+        }
+    }
+
+    &__creator [class*='icon'] {
+        font-size: 0.95em;
+    }
+
+    &__time-and-content {
+        display: block;
         flex: 1 1 auto;
-        flex-wrap: wrap;
+        overflow: visible;
+
+        > * + * {
+            margin-top: $interiorMarginSm;
+        }
     }
 
     &__time {
-        flex: 0 1 auto;
-        min-width: 130px;
-        margin-right: $interiorMarginLg;
-
         * {
             white-space: nowrap;
         }
     }
 
     &__content {
+        flex-direction: column;
         flex: 1 1 auto;
+        margin-right: $interiorMarginSm;
+        margin-top: $interiorMargin;
 
-       > [class*="__"] + [class*="__"] {
+        > [class*='__'] + [class*='__'] {
             margin-top: $interiorMarginSm;
-       }
+        }
+    }
+
+    &__text,
+    &__input {
+        color: $colorBodyFgEm !important;
     }
 
     &__text {
         min-height: 22px; // Needed in Firefox when field is blank
-
-        &:not(.highlight) {
-            white-space: pre-wrap;
-        }
+        white-space: normal;
 
         .search-highlight {
             @include searchHighlight();
         }
-    }
 
-    &__input {
-        // Appended to __text element when Notebook is not in readOnly mode
-        @include inlineInput;
-        padding-left: $inputTextPLeftRight;
-        padding-right: $inputTextPLeftRight;
-
-        @include hover {
-            &:not(:focus) {
-                background: rgba($colorBodyFg, 0.1);
+        // Resets and styling for markdown
+        h1, h2, h3, h4, h5 {
+            margin: unset !important;
+            padding: unset !important;
+        }
+
+        a {
+            text-decoration: underline;
+        }
+
+        em {
+            font-style: italic;
+        }
+
+        > * {
+            &:not(:first-child) {
+                margin-top: $interiorMarginSm;
+            }
+        }
+
+        p, blockquote, pre {
+            margin: 0;
+
+            &:not(:first-child) {
+                margin-top: $interiorMarginLg;
             }
+        ;
+        }
+
+        blockquote {
+            $m: 16px;
+            margin-left: $m;
+            margin-right: $m;
+        }
+
+        ul, ol {
+            padding: 0 0 0 16px;
+        }
+
+        ul {
+            list-style: square;
         }
 
-        &:focus {
-            background: $colorInputBg;
+        ol {
+            list-style: decimal;
         }
 
-        white-space: pre-wrap;
+        li {
+            list-style-type: inherit;
+        }
+
+        table {
+            width: auto;
+        }
+
+        th, td {
+            border: 1px solid rgba($colorBodyFg, 0.7);
+        }
+
+        th {
+            background: rgba($colorBodyFg, 0.2);
+        }
+    }
+
+    &__input {
+        // Textarea
+        //@include inlineInput;
+        @include reactive-input();
+        padding-left: $p;
+        padding-right: $p;
+        overflow: unset;
+        margin-bottom: $interiorMargin;
+        min-height: 5rem;
+        resize: vertical;
+        width: 100%;
+    }
+
+    &__save-button {
+        display: flex;
+        justify-content: flex-end;
+
+        .c-button {
+            $lrP: 15px;
+            padding-left: $lrP;
+            padding-right: $lrP;
+        }
     }
 
     &__section-and-page {
@@ -332,12 +484,16 @@
             opacity: 0.7;
         }
     }
+
+    &__remove {
+        float: right;
+    }
 }
 
 /****************************** EMBEDS */
 @mixin snapThumb() {
     // LEGACY: TODO: refactor when .snap-thumb in New Entry dialog is refactored
-    $d: 30px;
+    $d: 40px;
     border: 1px solid $colorInteriorBorder;
     cursor: pointer;
     width: $d;
@@ -356,19 +512,24 @@
     @include snapThumb();
 }
 
+.c-ne__embeds-wrapper {
+    max-height: 75px;
+    padding-left: $interiorMargin;
+    padding-top: $interiorMargin;
+    display: flex;
+}
+
 .c-ne__embed {
     @include discreteItemInnerElem();
     display: inline-flex;
     flex: 0 0 auto;
     padding: $interiorMargin;
-
-    [class*="__"] + [class*="__"] {
-        margin-left: $interiorMargin;
-    }
+    border: 1px solid $colorInteriorBorder;
 
     &__info {
         display: flex;
         flex-direction: column;
+        margin-left: $interiorMargin;
 
         a {
             color: $colorKey;
@@ -383,9 +544,11 @@
     }
 
     &__link {
+        flex: 1 1 auto;
+
         &:before {
             display: block;
-            font-size: 0.85em;
+            font-size: 1em;
             margin-right: $interiorMarginSm;
         }
     }
@@ -398,7 +561,29 @@
     &__snap-thumb {
         @include snapThumb();
     }
+
+    &__actions {
+        margin: $interiorMarginSm;
+    }
+
+    &__actions-menu {
+        width: 55vh;
+        max-width: 500px;
+        height: 130px;
+        z-index: 70;
+
+        [class*='__icon'] {
+            filter: $colorKeyFilter;
+            margin: 0%;
+            height: 4vh;
+        }
+
+        [class*='__item-description'] {
+            min-width: 200px;
+        }
+    }
 }
+
 /****************************** SNAPSHOTTING */
 // LEGACY: TODO: refactor these names
 .t-contents,
@@ -413,7 +598,10 @@
     color: $colorBodyFg;
     padding: $interiorMarginSm !important; // Prevents items from going right to the edge of the image
 
-    .l-sticky-headers .l-tabular-body { overflow: auto; }
+    .l-sticky-headers .l-tabular-body {
+        overflow: auto;
+    }
+
     .l-browse-bar {
         display: none; // Suppress browse-bar when snapshotting from view-large overlay
         + * {
@@ -453,18 +641,23 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    padding: $interiorMarginLg;
-
-    > * {
-        flex: 1 1 auto;
-        &:first-child {
-            flex: 0 0 auto;
-        }
-    }
+    padding: $interiorMargin $interiorMarginLg;
 
     > * + * {
         margin-top: $interiorMargin;
     }
+
+    .l-browse-bar {
+        flex: 0 0 auto;
+    }
+
+    .c-snapshots-h__title {
+        display: flex;
+    }
+
+    .c-snapshots {
+        flex: 1 1 auto;
+    }
 }
 
 .c-snapshots {
@@ -494,13 +687,19 @@
     display: flex;
     flex-direction: column;
     position: absolute;
-    top: $m; right: 0; bottom: $m; left: 0; // LEGACY, deal with .editor border-radius clipping stuff
+    top: $m;
+    right: 0;
+    bottom: $m;
+    left: 0; // LEGACY, deal with .editor border-radius clipping stuff
 }
 
 #snap-annotation-wrapper,
 #snap-annotation-bar {
     position: relative;
-    top: auto; right: auto; bottom: auto; left: auto;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
 }
 
 #snap-annotation-wrapper {
@@ -528,7 +727,9 @@
     > div {
         display: contents;
 
-        > * + * { margin-left: $interiorMargin !important; }
+        > * + * {
+            margin-left: $interiorMargin !important;
+        }
     }
 
     .ptro-tool-controls {
@@ -600,28 +801,32 @@
     }
 
     .ptro-color-active-control {
-        background: $colorBtnMajorBg  !important;
+        background: $colorBtnMajorBg !important;
         color: $colorBtnMajorFg !important;
     }
 
     .ptro-info,
     .ptro-btn-color-checkers-bar,
-    *[title="Font name"],
-    *[title="Stroke color"],
-    *[title="Stroke width"],
-    *[data-id="fontName"],
-    *[data-id="fontStrokeSize"],
-    *[data-id="stroke"] {
+    *[title='Font name'],
+    *[title='Stroke color'],
+    *[title='Stroke width'],
+    *[data-id='fontName'],
+    *[data-id='fontStrokeSize'],
+    *[data-id='stroke'] {
         display: none;
     }
 }
 
 /****************************** MOBILE */
 body.mobile {
-    .c-notebook__drag-area { display: none; }
+    .c-notebook__drag-area {
+        display: none;
+    }
+
     .c-notebook__entry {
-        [class*="local-controls"] {
+        [class*='local-controls'] {
             display: none;
+            height: fit-content;
         }
     }
 
@@ -631,14 +836,14 @@ body.mobile {
         .c-ne__time-and-content {
             flex-direction: column;
 
-            > [class*="__"] + [class*="__"] {
+            > [class*='__'] + [class*='__'] {
                 margin-left: 0;
                 margin-top: $interiorMargin;
             }
         }
 
         .c-notebook__entry {
-            [class*="text"] {
+            [class*='text'] {
                 min-height: 0;
                 pointer-events: none;
             }
@@ -649,5 +854,41 @@ body.mobile {
 /****************************** INDICATOR */
 .c-indicator.has-new-snapshot {
     $c: $colorOk;
-    @include pulseProp($animName: flashSnapshot, $dur: 500ms, $iter: infinite, $prop: background, $valStart: rgba($c, 0.4), $valEnd: rgba($c, 0));
+    @include pulseProp(
+            $animName: flashSnapshot,
+            $dur: 500ms,
+            $iter: infinite,
+            $prop: background,
+            $valStart: rgba($c, 0.4),
+            $valEnd: rgba($c, 0)
+    );
+}
+
+/****************************** RESTRICTED NOTEBOOK / SHIFT LOG */
+.c-notebook--restricted {
+    .c-notebook__pages {
+        .c-list__item {
+            // Can display lock icon when a page is committed.
+            &:before {
+                $s: 0.8em;
+                color: $colorAlert;
+                display: block;
+                font-size: $s;
+                width: $s;
+                margin-right: $interiorMarginSm;
+            }
+
+            &:not([class*='lock']) {
+                &:before {
+                    content: '';
+                }
+            }
+        }
+    }
+}
+
+.c-list__item {
+    &__name:focus {
+        text-overflow: clip;
+    }
 }
diff --git a/src/styles/plotly.scss b/src/styles/plotly.scss
index 073bb2d40f7..ca61ef39ce6 100644
--- a/src/styles/plotly.scss
+++ b/src/styles/plotly.scss
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -22,37 +22,37 @@
 
 /***************** PLOTLY OVERRIDES */
 .plot-container.plotly {
-    .bglayer .bg {
-        fill: $colorPlotBg !important;
-        fill-opacity: 1 !important;
-        stroke: $colorInteriorBorder;
-        stroke-width: 1 !important;
-    }
+  .bglayer .bg {
+    fill: $colorPlotBg !important;
+    fill-opacity: 1 !important;
+    stroke: $colorInteriorBorder;
+    stroke-width: 1 !important;
+  }
 
-    .cartesianlayer {
-        .gridlayer {
-            .x,
-            .y {
-                path {
-                    opacity: $opacityPlotHash;
-                    stroke: $colorPlotHash !important;
-                }
-            }
+  .cartesianlayer {
+    .gridlayer {
+      .x,
+      .y {
+        path {
+          opacity: $opacityPlotHash;
+          stroke: $colorPlotHash !important;
         }
+      }
+    }
 
-        path.xy2-y {
-            stroke: $colorPlotHash !important; // Using this instead of $colorPlotAreaBorder because that is an rgba
-            opacity: $opacityPlotHash !important;
-        }
+    path.xy2-y {
+      stroke: $colorPlotHash !important; // Using this instead of $colorPlotAreaBorder because that is an rgba
+      opacity: $opacityPlotHash !important;
     }
+  }
 
-    .xtick,
-    .ytick,
-    [class^="g-"] text[class*="title"] {
-        // Matches <g class="g-*"> <text class="*title">
-        text {
-            fill: $colorPlotFg !important;
-            font-size: 12px !important;
-        }
+  .xtick,
+  .ytick,
+  [class^='g-'] text[class*='title'] {
+    // Matches <g class="g-*"> <text class="*title">
+    text {
+      fill: $colorPlotFg !important;
+      font-size: 12px !important;
     }
+  }
 }
diff --git a/src/styles/vendor/normalize-min.scss b/src/styles/vendor/normalize-min.scss
index 002716b92f9..917e3ad54cf 100644
--- a/src/styles/vendor/normalize-min.scss
+++ b/src/styles/vendor/normalize-min.scss
@@ -1 +1,240 @@
-/*! normalize.css v1.1.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
+/*! normalize.css v1.1.2 | MIT License | git.io/normalize */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+  display: block;
+}
+audio,
+canvas,
+video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+}
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+[hidden] {
+  display: none;
+}
+html {
+  font-size: 100%;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+html,
+button,
+input,
+select,
+textarea {
+  font-family: sans-serif;
+}
+body {
+  margin: 0;
+}
+a:focus {
+  outline: thin dotted;
+}
+a:active,
+a:hover {
+  outline: 0;
+}
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+h2 {
+  font-size: 1.5em;
+  margin: 0.83em 0;
+}
+h3 {
+  font-size: 1.17em;
+  margin: 1em 0;
+}
+h4 {
+  font-size: 1em;
+  margin: 1.33em 0;
+}
+h5 {
+  font-size: 0.83em;
+  margin: 1.67em 0;
+}
+h6 {
+  font-size: 0.67em;
+  margin: 2.33em 0;
+}
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+b,
+strong {
+  font-weight: bold;
+}
+blockquote {
+  margin: 1em 40px;
+}
+dfn {
+  font-style: italic;
+}
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+mark {
+  background: #ff0;
+  color: #000;
+}
+p,
+pre {
+  margin: 1em 0;
+}
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, serif;
+  _font-family: 'courier new', monospace;
+  font-size: 1em;
+}
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+q {
+  quotes: none;
+}
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+small {
+  font-size: 80%;
+}
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}
+dl,
+menu,
+ol,
+ul {
+  margin: 1em 0;
+}
+dd {
+  margin: 0 0 0 40px;
+}
+menu,
+ol,
+ul {
+  padding: 0 0 0 40px;
+}
+nav ul,
+nav ol {
+  list-style: none;
+  list-style-image: none;
+}
+img {
+  border: 0;
+  -ms-interpolation-mode: bicubic;
+}
+svg:not(:root) {
+  overflow: hidden;
+}
+figure {
+  margin: 0;
+}
+form {
+  margin: 0;
+}
+fieldset {
+  border: 1px solid silver;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+legend {
+  border: 0;
+  padding: 0;
+  white-space: normal;
+  *margin-left: -7px;
+}
+button,
+input,
+select,
+textarea {
+  font-size: 100%;
+  margin: 0;
+  vertical-align: baseline;
+  *vertical-align: middle;
+}
+button,
+input {
+  line-height: normal;
+}
+button,
+select {
+  text-transform: none;
+}
+button,
+html input[type='button'],
+input[type='reset'],
+input[type='submit'] {
+  -webkit-appearance: button;
+  cursor: pointer;
+  *overflow: visible;
+}
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+input[type='checkbox'],
+input[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+  *height: 13px;
+  *width: 13px;
+}
+input[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+textarea {
+  overflow: auto;
+  vertical-align: top;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
diff --git a/src/styles/vue-styles.scss b/src/styles/vue-styles.scss
index fbd4aa6e996..295b3585b15 100644
--- a/src/styles/vue-styles.scss
+++ b/src/styles/vue-styles.scss
@@ -1,58 +1,66 @@
-@import "../api/overlays/components/dialog-component.scss";
-@import "../api/overlays/components/overlay-component.scss";
-@import "../plugins/condition/components/conditionals.scss";
-@import "../plugins/conditionWidget/components/condition-widget.scss";
-@import "../plugins/condition/components/inspector/conditional-styles.scss";
-@import "../plugins/displayLayout/components/box-and-line-views";
-@import "../plugins/displayLayout/components/display-layout.scss";
-@import "../plugins/displayLayout/components/edit-marquee.scss";
-@import "../plugins/displayLayout/components/image-view.scss";
-@import "../plugins/displayLayout/components/layout-frame.scss";
-@import "../plugins/displayLayout/components/telemetry-view.scss";
-@import "../plugins/displayLayout/components/text-view.scss";
-@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-view.scss";
-@import "../plugins/folderView/components/list-item.scss";
-@import "../plugins/folderView/components/list-view.scss";
-@import "../plugins/imagery/components/imagery-view-layout.scss";
-@import "../plugins/imagery/components/Compass/compass.scss";
-@import "../plugins/telemetryTable/components/table-row.scss";
-@import "../plugins/telemetryTable/components/table-footer-indicator.scss";
-@import "../plugins/tabs/components/tabs.scss";
-@import "../plugins/telemetryTable/components/table.scss";
-@import "../plugins/timeConductor/conductor.scss";
-@import "../plugins/timeConductor/conductor-axis.scss";
-@import "../plugins/timeConductor/conductor-mode.scss";
-@import "../plugins/timeConductor/conductor-mode-icon.scss";
-@import "../plugins/timeConductor/date-picker.scss";
-@import "../plugins/timeline/timeline.scss";
-@import "../plugins/plan/plan";
-@import "../plugins/viewDatumAction/components/metadata-list.scss";
-@import "../ui/components/object-frame.scss";
-@import "../ui/components/object-label.scss";
-@import "../ui/components/progress-bar.scss";
-@import "../ui/components/search.scss";
-@import "../ui/components/swim-lane/swimlane.scss";
-@import "../ui/components/toggle-switch.scss";
-@import "../ui/components/timesystem-axis.scss";
-@import "../ui/inspector/elements.scss";
-@import "../ui/inspector/inspector.scss";
-@import "../ui/inspector/location.scss";
-@import "../ui/layout/app-logo.scss";
-@import "../ui/layout/create-button.scss";
-@import "../ui/layout/layout.scss";
-@import "../ui/layout/mct-tree.scss";
-@import "../ui/layout/mct-search.scss";
-@import "../ui/layout/pane.scss";
-@import "../ui/layout/status-bar/indicators.scss";
-@import "../ui/layout/status-bar/notification-banner.scss";
-@import "../ui/preview/preview.scss";
-@import "../ui/toolbar/components/toolbar-checkbox.scss";
-@import "./notebook.scss";
-@import "../plugins/notebook/components/sidebar.scss";
+@import '../api/overlays/components/dialog-component.scss';
+@import '../api/overlays/components/overlay-component.scss';
+@import '../api/tooltips/components/tooltip-component.scss';
+@import '../plugins/condition/components/conditionals.scss';
+@import '../plugins/conditionWidget/components/condition-widget.scss';
+@import '../plugins/condition/components/inspector/conditional-styles.scss';
+@import '../plugins/displayLayout/components/box-and-line-views';
+@import '../plugins/displayLayout/components/display-layout.scss';
+@import '../plugins/displayLayout/components/edit-marquee.scss';
+@import '../plugins/displayLayout/components/image-view.scss';
+@import '../plugins/displayLayout/components/layout-frame.scss';
+@import '../plugins/displayLayout/components/telemetry-view.scss';
+@import '../plugins/displayLayout/components/text-view.scss';
+@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-view.scss';
+@import '../plugins/folderView/components/list-item.scss';
+@import '../plugins/imagery/components/imagery-view.scss';
+@import '../plugins/imagery/components/Compass/compass.scss';
+@import '../plugins/telemetryTable/components/table-row.scss';
+@import '../plugins/telemetryTable/components/table-footer-indicator.scss';
+@import '../plugins/tabs/components/tabs.scss';
+@import '../plugins/telemetryTable/components/table.scss';
+@import '../plugins/timeConductor/conductor.scss';
+@import '../plugins/timeConductor/conductor-axis.scss';
+@import '../plugins/timeConductor/conductor-mode-icon.scss';
+@import '../plugins/timeConductor/date-picker.scss';
+@import '../plugins/timeline/timeline.scss';
+@import '../plugins/timelist/timelist.scss';
+@import '../plugins/plan/plan';
+@import '../plugins/viewDatumAction/components/metadata-list.scss';
+@import '../ui/components/object-frame.scss';
+@import '../ui/components/object-label.scss';
+@import '../ui/components/progress-bar.scss';
+@import '../ui/components/search.scss';
+@import '../ui/components/swim-lane/swimlane.scss';
+@import '../plugins/inspectorViews/annotations/tags/tags.scss';
+@import '../ui/components/toggle-switch.scss';
+@import '../ui/components/timesystem-axis.scss';
+@import '../ui/components/List/list-view.scss';
+@import '../plugins/inspectorViews/elements/elements.scss';
+@import '../ui/inspector/inspector.scss';
+@import '../plugins/inspectorViews/properties/location.scss';
+@import '../ui/layout/app-logo.scss';
+@import '../ui/layout/create-button.scss';
+@import '../ui/layout/layout.scss';
+@import '../ui/layout/mct-tree.scss';
+@import '../ui/layout/search/search.scss';
+@import '../ui/layout/pane.scss';
+@import '../ui/layout/recent-objects.scss';
+@import '../ui/layout/status-bar/indicators.scss';
+@import '../ui/layout/status-bar/notification-banner.scss';
+@import '../ui/preview/preview.scss';
+@import '../ui/toolbar/components/toolbar-checkbox.scss';
+@import './notebook.scss';
+@import '../plugins/notebook/components/sidebar.scss';
+@import '../plugins/gauge/gauge.scss';
+@import '../plugins/faultManagement/fault-manager.scss';
+@import '../plugins/operatorStatus/operator-status.scss';
+@import '../plugins/userIndicator/user-indicator.scss';
+@import '../plugins/inspectorDataVisualization/inspector-data-visualization.scss';
 
 #splash-screen {
-     display: none;
+  display: none;
 }
diff --git a/src/tools/url.js b/src/tools/url.js
index f0cc6e8ce4e..2d11459c5d8 100644
--- a/src/tools/url.js
+++ b/src/tools/url.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -24,36 +24,55 @@
  * Module defining url handling.
  */
 
-export function paramsToArray(openmct) {
-    // parse urParams from an object to an array.
-    let urlParams = openmct.router.getParams();
-    let newTabParams = [];
-    for (let key in urlParams) {
-        if ({}.hasOwnProperty.call(urlParams, key)) {
-            let param = `${key}=${urlParams[key]}`;
-            newTabParams.push(param);
-        }
+function getUrlParams(openmct, customUrlParams = {}) {
+  let urlParams = openmct.router.getParams();
+  Object.entries(customUrlParams).forEach((urlParam) => {
+    const [key, value] = urlParam;
+    urlParams[key] = value;
+  });
+
+  if (urlParams['tc.mode'] === 'fixed') {
+    delete urlParams['tc.startDelta'];
+    delete urlParams['tc.endDelta'];
+  } else if (urlParams['tc.mode'] === 'local') {
+    delete urlParams['tc.startBound'];
+    delete urlParams['tc.endBound'];
+  }
+
+  return urlParams;
+}
+
+export function paramsToArray(openmct, customUrlParams = {}) {
+  // parse urlParams from an object to an array.
+  let urlParams = getUrlParams(openmct, customUrlParams);
+  let newTabParams = [];
+  for (let key in urlParams) {
+    if ({}.hasOwnProperty.call(urlParams, key)) {
+      let param = `${key}=${urlParams[key]}`;
+      newTabParams.push(param);
     }
+  }
 
-    return newTabParams;
+  return newTabParams;
 }
 
 export function identifierToString(openmct, objectPath) {
-    let identifier = '#/browse/' + objectPath.map(function (o) {
-        return o && openmct.objects.makeKeyString(o.identifier);
-    })
-        .reverse()
-        .join('/');
-
-    return identifier;
+  return '#/browse/' + openmct.objects.getRelativePath(objectPath);
 }
 
-export default function objectPathToUrl(openmct, objectPath) {
-    let url = identifierToString(openmct, objectPath);
-    let urlParams = paramsToArray(openmct);
-    if (urlParams.length) {
-        url += '?' + urlParams.join('&');
-    }
+/**
+ * @param {import('../../openmct').OpenMCT} openmct
+ * @param {Array<import('../api/objects/ObjectAPI').DomainObject>} objectPath
+ * @param {any} customUrlParams
+ * @returns {string} url
+ */
+export default function objectPathToUrl(openmct, objectPath, customUrlParams = {}) {
+  let url = identifierToString(openmct, objectPath);
+
+  let urlParams = paramsToArray(openmct, customUrlParams);
+  if (urlParams.length) {
+    url += '?' + urlParams.join('&');
+  }
 
-    return url;
+  return url;
 }
diff --git a/src/tools/urlSpec.js b/src/tools/urlSpec.js
new file mode 100644
index 00000000000..7323aa828d7
--- /dev/null
+++ b/src/tools/urlSpec.js
@@ -0,0 +1,79 @@
+import { createOpenMct, resetApplicationState } from '../utils/testing.js';
+import { default as objectPathToUrl, identifierToString, paramsToArray } from './url.js';
+
+describe('the url tool', function () {
+  let openmct;
+  let mockObjectPath;
+
+  beforeEach((done) => {
+    mockObjectPath = [
+      {
+        name: 'mock folder',
+        type: 'fake-folder',
+        identifier: {
+          key: 'mock-folder',
+          namespace: ''
+        }
+      },
+      {
+        name: 'mock parent folder',
+        type: 'fake-folder',
+        identifier: {
+          key: 'mock-parent-folder',
+          namespace: ''
+        }
+      }
+    ];
+    openmct = createOpenMct();
+    openmct.on('start', () => {
+      openmct.router.setPath('/browse/mine?testParam1=testValue1');
+      done();
+    });
+    openmct.startHeadless();
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  describe('paramsToArray', () => {
+    it('exists', () => {
+      expect(paramsToArray).toBeDefined();
+    });
+    it('can construct an array properly from query parameters', () => {
+      const arrayOfParams = paramsToArray(openmct);
+      expect(arrayOfParams.length).toBeDefined();
+      expect(arrayOfParams.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('identifierToString', () => {
+    it('exists', () => {
+      expect(identifierToString).toBeDefined();
+    });
+    it('can construct a String properly from a path', () => {
+      const constructedString = identifierToString(openmct, mockObjectPath);
+      expect(constructedString).toEqual('#/browse/mock-parent-folder/mock-folder');
+    });
+  });
+
+  describe('objectPathToUrl', () => {
+    it('exists', () => {
+      expect(objectPathToUrl).toBeDefined();
+    });
+    it('can construct URL properly from a path', () => {
+      const constructedURL = objectPathToUrl(openmct, mockObjectPath);
+      expect(constructedURL).toContain('#/browse/mock-parent-folder/mock-folder');
+    });
+    it('can take params to set a custom url', () => {
+      const customParams = {
+        'tc.startBound': 1669911059,
+        'tc.endBound': 1669911082,
+        'tc.mode': 'fixed'
+      };
+      const constructedURL = objectPathToUrl(openmct, mockObjectPath, customParams);
+      expect(constructedURL).toContain('tc.startBound=1669911059&tc.endBound=1669911082');
+      expect(constructedURL).toContain('tc.mode=fixed');
+    });
+  });
+});
diff --git a/src/ui/color/Color.js b/src/ui/color/Color.js
new file mode 100644
index 00000000000..8905b5d6d85
--- /dev/null
+++ b/src/ui/color/Color.js
@@ -0,0 +1,103 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/**
+ * A representation of a color that allows conversions between different
+ * formats.
+ *
+ * @constructor
+ */
+/**
+ * A representation of a color that allows conversions between different
+ * formats.
+ *
+ * @constructor
+ */
+function Color(integerArray) {
+  this.integerArray = integerArray;
+}
+
+Color.fromHexString = function (hexString) {
+  if (!/#([0-9a-fA-F]{2}){2}/.test(hexString)) {
+    throw new Error(
+      'Invalid input "' + hexString + '". Hex string must be in CSS format e.g. #00FF00'
+    );
+  }
+
+  return new Color([
+    parseInt(hexString.slice(1, 3), 16),
+    parseInt(hexString.slice(3, 5), 16),
+    parseInt(hexString.slice(5, 7), 16)
+  ]);
+};
+
+/**
+ * Return color as a three element array of RGB values, where each value
+ * is a integer in the range of 0-255.
+ *
+ * @return {number[]} the color, as integer RGB values
+ */
+Color.prototype.asIntegerArray = function () {
+  return this.integerArray.map(function (c) {
+    return c;
+  });
+};
+
+/**
+ * Return color as a string using #-prefixed six-digit RGB hex notation
+ * (e.g. #FF0000).  See http://www.w3.org/TR/css3-color/#rgb-color.
+ *
+ * @return {string} the color, as a style-friendly string
+ */
+
+Color.prototype.asHexString = function () {
+  return (
+    '#' +
+    this.integerArray
+      .map(function (c) {
+        return (c < 16 ? '0' : '') + c.toString(16);
+      })
+      .join('')
+  );
+};
+
+/**
+ * Return color as a RGBA float array.
+ *
+ * This format is present specifically to support use with
+ * WebGL, which expects colors of that form.
+ *
+ * @return {number[]} the color, as floating-point RGBA values
+ */
+Color.prototype.asRGBAArray = function () {
+  return this.integerArray
+    .map(function (c) {
+      return c / 255.0;
+    })
+    .concat([1]);
+};
+
+Color.prototype.equalTo = function (otherColor) {
+  return this.asHexString() === otherColor.asHexString();
+};
+
+export default Color;
diff --git a/src/ui/color/ColorHelper.js b/src/ui/color/ColorHelper.js
new file mode 100644
index 00000000000..260b3e0c85c
--- /dev/null
+++ b/src/ui/color/ColorHelper.js
@@ -0,0 +1,62 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+export const COLOR_PALETTE = [
+  [0x43, 0xb0, 0xff],
+  [0xf0, 0x60, 0x00],
+  [0x00, 0x70, 0x40],
+  [0xfb, 0x49, 0x49],
+  [0xc8, 0x00, 0xcf],
+  [0x55, 0x77, 0xf2],
+  [0xff, 0xa6, 0x3d],
+  [0x05, 0xa3, 0x00],
+  [0xf0, 0x00, 0x6c],
+  [0xac, 0x54, 0xae],
+  [0x23, 0xa9, 0xdb],
+  [0xc7, 0xbe, 0x52],
+  [0x5a, 0xbd, 0x56],
+  [0xad, 0x50, 0x72],
+  [0x94, 0x25, 0xea],
+  [0x21, 0x87, 0x82],
+  [0x8f, 0x6e, 0x47],
+  [0xf0, 0x59, 0xcb],
+  [0x34, 0xb6, 0x7d],
+  [0x7f, 0x52, 0xff],
+  [0x46, 0xc7, 0xc0],
+  [0xa1, 0x8c, 0x1c],
+  [0x95, 0xb1, 0x26],
+  [0xff, 0x84, 0x9e],
+  [0xb7, 0x79, 0xe7],
+  [0x8c, 0xc9, 0xfd],
+  [0xdb, 0xaa, 0x6e],
+  [0x93, 0xb5, 0x77],
+  [0xff, 0xbc, 0xda],
+  [0xd3, 0xb6, 0xde]
+];
+
+export function isDefaultColor(color) {
+  const a = color.asIntegerArray();
+
+  return COLOR_PALETTE.some(function (b) {
+    return a[0] === b[0] && a[1] === b[1] && a[2] === b[2];
+  });
+}
diff --git a/src/ui/color/ColorPalette.js b/src/ui/color/ColorPalette.js
new file mode 100644
index 00000000000..4b645d97067
--- /dev/null
+++ b/src/ui/color/ColorPalette.js
@@ -0,0 +1,92 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/**
+ * A color palette stores a set of colors and allows for different
+ * methods of color allocation.
+ *
+ * @constructor
+ */
+import Color from './Color.js';
+import { COLOR_PALETTE, isDefaultColor } from './ColorHelper.js';
+
+/**
+ * A color palette stores a set of colors and allows for different
+ * methods of color allocation.
+ *
+ * @constructor
+ */
+function ColorPalette() {
+  const allColors = (this.allColors = COLOR_PALETTE.map(function (color) {
+    return new Color(color);
+  }));
+  this.colorGroups = [[], [], []];
+  for (let i = 0; i < allColors.length; i++) {
+    this.colorGroups[i % 3].push(allColors[i]);
+  }
+
+  this.reset();
+}
+
+/**
+ *
+ */
+ColorPalette.prototype.groups = function () {
+  return this.colorGroups;
+};
+
+ColorPalette.prototype.reset = function () {
+  this.availableColors = this.allColors.slice();
+};
+
+ColorPalette.prototype.remove = function (color) {
+  this.availableColors = this.availableColors.filter(function (c) {
+    return !c.equalTo(color);
+  });
+};
+
+ColorPalette.prototype.return = function (color) {
+  if (isDefaultColor(color)) {
+    this.availableColors.unshift(color);
+  }
+};
+
+ColorPalette.prototype.getByHexString = function (hexString) {
+  const color = Color.fromHexString(hexString);
+
+  return color;
+};
+
+/**
+ * @returns {Color} the next unused color in the palette.  If all colors
+ * have been allocated, it will wrap around.
+ */
+ColorPalette.prototype.getNextColor = function () {
+  if (!this.availableColors.length) {
+    console.warn('Color Palette empty, reusing colors!');
+    this.reset();
+  }
+
+  return this.availableColors.shift();
+};
+
+export default ColorPalette;
diff --git a/src/ui/color/ColorSwatch.vue b/src/ui/color/ColorSwatch.vue
new file mode 100644
index 00000000000..ae7fe5e6f80
--- /dev/null
+++ b/src/ui/color/ColorSwatch.vue
@@ -0,0 +1,138 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="grid-row grid-row--pad-label-for-button">
+    <template v-if="canEdit">
+      <div class="grid-cell label" :aria-label="editTitle" :title="editTitle">{{ shortLabel }}</div>
+      <div class="grid-cell value">
+        <div class="c-click-swatch c-click-swatch--menu" @click="toggleSwatch()">
+          <span class="c-color-swatch" :style="{ background: currentColor }"> </span>
+        </div>
+        <div class="c-palette c-palette--color">
+          <div v-show="swatchActive" class="c-palette__items">
+            <div v-for="group in colorPaletteGroups" :key="group.id" class="u-contents">
+              <div
+                v-for="color in group"
+                :key="color.id"
+                class="c-palette__item"
+                :class="{ selected: currentColor === color.hexString }"
+                :style="{ background: color.hexString }"
+                @click="setColor(color)"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <div class="grid-cell label" :aria-label="viewTitle" :title="viewTitle">{{ shortLabel }}</div>
+      <div class="grid-cell value">
+        <span
+          class="c-color-swatch"
+          :style="{
+            background: currentColor
+          }"
+        >
+        </span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import ColorPalette from './ColorPalette.js';
+
+export default {
+  inject: ['openmct', 'domainObject'],
+  props: {
+    currentColor: {
+      type: String,
+      default() {
+        return '';
+      }
+    },
+    editTitle: {
+      type: String,
+      default() {
+        return 'Set the color.';
+      }
+    },
+    viewTitle: {
+      type: String,
+      default() {
+        return 'The current color.';
+      }
+    },
+    shortLabel: {
+      type: String,
+      default() {
+        return 'Color';
+      }
+    }
+  },
+  emits: ['color-set'],
+  data() {
+    return {
+      swatchActive: false,
+      colorPaletteGroups: [],
+      isEditing: this.openmct.editor.isEditing()
+    };
+  },
+  computed: {
+    canEdit() {
+      return this.isEditing && !this.domainObject.locked;
+    }
+  },
+  mounted() {
+    this.colorPalette = new ColorPalette();
+    this.openmct.editor.on('isEditing', this.setEditState);
+    this.initialize();
+  },
+  beforeUnmount() {
+    this.openmct.editor.off('isEditing', this.setEditState);
+  },
+  methods: {
+    initialize() {
+      const colorPaletteGroups = this.colorPalette.groups();
+      colorPaletteGroups.forEach((group, index) => {
+        let groupId = [];
+        group.forEach((color) => {
+          color.hexString = color.asHexString();
+          color.id = `${color.hexString}-${index}`;
+          groupId.push(color.id);
+        });
+        group.id = groupId.join('-');
+      });
+      this.colorPaletteGroups = colorPaletteGroups;
+    },
+    setEditState(isEditing) {
+      this.isEditing = isEditing;
+    },
+    setColor(chosenColor) {
+      this.$emit('color-set', chosenColor);
+    },
+    toggleSwatch() {
+      this.swatchActive = !this.swatchActive;
+    }
+  }
+};
+</script>
diff --git a/src/ui/components/ContextMenuDropDown.vue b/src/ui/components/ContextMenuDropDown.vue
new file mode 100644
index 00000000000..9942339d87d
--- /dev/null
+++ b/src/ui/components/ContextMenuDropDown.vue
@@ -0,0 +1,42 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div
+    ref="root"
+    class="c-so-view__context-actions c-disclosure-button"
+    @click="showContextMenu"
+  ></div>
+</template>
+
+<script>
+import contextMenu from '../mixins/context-menu-gesture.js';
+
+export default {
+  mixins: [contextMenu],
+  props: {
+    objectPath: {
+      type: Array,
+      required: true
+    }
+  }
+};
+</script>
diff --git a/src/ui/components/List/ListHeader.vue b/src/ui/components/List/ListHeader.vue
new file mode 100644
index 00000000000..7a419eb377e
--- /dev/null
+++ b/src/ui/components/List/ListHeader.vue
@@ -0,0 +1,77 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <th
+    v-if="isSortable"
+    class="is-sortable"
+    :class="{
+      'is-sorting': currentSort === property,
+      asc: direction,
+      desc: !direction
+    }"
+    @click="sort(property, direction)"
+  >
+    {{ title }}
+  </th>
+  <th v-else>
+    {{ title }}
+  </th>
+</template>
+
+<script>
+export default {
+  inject: ['openmct'],
+  props: {
+    property: {
+      type: String,
+      required: true
+    },
+    currentSort: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    direction: {
+      type: Boolean,
+      required: true
+    },
+    isSortable: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    }
+  },
+  emits: ['sort'],
+  methods: {
+    sort(property, direction) {
+      this.$emit('sort', {
+        property,
+        direction
+      });
+    }
+  }
+};
+</script>
diff --git a/src/ui/components/List/ListItem.vue b/src/ui/components/List/ListItem.vue
new file mode 100644
index 00000000000..55bb69d6ff7
--- /dev/null
+++ b/src/ui/components/List/ListItem.vue
@@ -0,0 +1,72 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <tr class="c-list-item js-list-item" :class="item.cssClass || ''">
+    <td
+      v-for="itemValue in formattedItemValues"
+      :key="itemValue.key"
+      class="c-list-item__value js-list-item__value"
+      :class="['--' + itemValue.key]"
+      :aria-label="itemValue.text"
+      :title="itemValue.text"
+    >
+      {{ itemValue.text }}
+    </td>
+  </tr>
+</template>
+
+<script>
+import _ from 'lodash';
+
+export default {
+  inject: ['openmct'],
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    itemProperties: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    formattedItemValues() {
+      let values = [];
+      this.itemProperties.forEach((property) => {
+        // eslint-disable-next-line you-dont-need-lodash-underscore/get
+        let value = _.get(this.item, property.key);
+        if (property.format) {
+          value = property.format(value, this.item, property.key, this.openmct);
+        }
+
+        values.push({
+          text: value,
+          key: property.key
+        });
+      });
+
+      return values;
+    }
+  }
+};
+</script>
diff --git a/src/ui/components/List/ListView.vue b/src/ui/components/List/ListView.vue
new file mode 100644
index 00000000000..d17d14e1d12
--- /dev/null
+++ b/src/ui/components/List/ListView.vue
@@ -0,0 +1,167 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="c-table c-table--sortable c-list-view c-list-view--sticky-header">
+    <table class="c-table__body js-table__body">
+      <thead class="c-table__header">
+        <tr>
+          <list-header
+            v-for="headerItem in headerItems"
+            :key="headerItem.property"
+            :direction="sortBy === headerItem.property ? ascending : headerItem.defaultDirection"
+            :is-sortable="headerItem.isSortable"
+            :aria-label="headerItem.name"
+            :title="headerItem.name"
+            :property="headerItem.property"
+            :current-sort="sortBy"
+            @sort="sort"
+          />
+        </tr>
+      </thead>
+      <tbody>
+        <list-item
+          v-for="item in sortedItems"
+          :key="item.key"
+          :item="item"
+          :item-properties="itemProperties"
+          @click.stop="itemSelected(item, $event)"
+        />
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+
+import ListHeader from './ListHeader.vue';
+import ListItem from './ListItem.vue';
+
+export default {
+  components: {
+    ListItem,
+    ListHeader
+  },
+  inject: ['domainObject', 'openmct'],
+  props: {
+    headerItems: {
+      type: Array,
+      required: true
+    },
+    items: {
+      type: Array,
+      required: true
+    },
+    defaultSort: {
+      type: Object,
+      default() {
+        return {
+          property: '',
+          defaultDirection: true
+        };
+      }
+    },
+    storageKey: {
+      type: String,
+      default() {
+        return undefined;
+      }
+    }
+  },
+  emits: ['item-selection-changed'],
+  data() {
+    let sortBy = this.defaultSort.property;
+    let ascending = this.defaultSort.defaultDirection;
+    if (this.storageKey) {
+      let persistedSortOrder = window.localStorage.getItem(this.storageKey);
+
+      if (persistedSortOrder) {
+        let parsed = JSON.parse(persistedSortOrder);
+
+        sortBy = parsed.sortBy;
+        ascending = parsed.ascending;
+      }
+    }
+
+    return {
+      sortBy,
+      ascending
+    };
+  },
+  computed: {
+    sortedItems() {
+      let sortedItems = _.sortBy(this.items, this.sortBy);
+      if (!this.ascending) {
+        sortedItems = sortedItems.reverse();
+      }
+
+      return sortedItems;
+    },
+    itemProperties() {
+      return this.headerItems.map((headerItem) => {
+        return {
+          key: headerItem.property,
+          format: headerItem.format
+        };
+      });
+    }
+  },
+  watch: {
+    defaultSort: {
+      handler() {
+        this.setSort();
+      },
+      deep: true
+    }
+  },
+  methods: {
+    setSort() {
+      this.sortBy = this.defaultSort.property;
+      this.ascending = this.defaultSort.defaultDirection;
+    },
+    sort(data) {
+      const property = data.property;
+      const direction = data.direction;
+
+      if (this.sortBy === property) {
+        this.ascending = !this.ascending;
+      } else {
+        this.sortBy = property;
+        this.ascending = direction;
+      }
+
+      if (this.storageKey) {
+        window.localStorage.setItem(
+          this.storageKey,
+          JSON.stringify({
+            sortBy: this.sortBy,
+            ascending: this.ascending
+          })
+        );
+      }
+    },
+    itemSelected(item, event) {
+      this.$emit('item-selection-changed', item, event.currentTarget);
+    }
+  }
+};
+</script>
diff --git a/src/ui/components/List/list-view.scss b/src/ui/components/List/list-view.scss
new file mode 100644
index 00000000000..7d0887aab8b
--- /dev/null
+++ b/src/ui/components/List/list-view.scss
@@ -0,0 +1,37 @@
+/******************************* LIST VIEW */
+.c-list-view {
+  tbody tr {
+    background: $colorListItemBg;
+  }
+
+  td {
+    $p: floor($interiorMargin * 1.5);
+    @include ellipsize();
+    line-height: 120%; // Needed for icon alignment
+    max-width: 0;
+    padding-top: $p;
+    padding-bottom: $p;
+    width: 25%;
+  }
+
+  &--selectable {
+    body.desktop & {
+      tbody tr {
+        cursor: pointer;
+
+        &:hover {
+          background: $colorListItemBgHov;
+        }
+      }
+    }
+  }
+
+  &--sticky-header {
+    thead tr {
+      position: -webkit-sticky;
+      position: sticky;
+      top: 0;
+      z-index: 2;
+    }
+  }
+}
diff --git a/src/ui/components/ObjectFrame.vue b/src/ui/components/ObjectFrame.vue
index c7fda1633a2..3aa03b84457 100644
--- a/src/ui/components/ObjectFrame.vue
+++ b/src/ui/components/ObjectFrame.vue
@@ -1,196 +1,262 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div
-    class="c-so-view"
+  <div
+    ref="soView"
+    class="c-so-view js-notebook-snapshot-item-wrapper"
     :class="[
-        statusClass,
-        'c-so-view--' + domainObject.type,
-        {
-            'c-so-view--no-frame': !hasFrame,
-            'has-complex-content': complexContent
-        }
+      statusClass,
+      widthClass,
+      'c-so-view--' + domainObject.type,
+      {
+        'c-so-view--no-frame': !hasFrame,
+        'has-complex-content': complexContent
+      }
     ]"
->
-    <div
-        class="c-so-view__header"
-    >
-        <div class="c-object-label"
-             :class="[ statusClass ]"
-        >
-            <div class="c-object-label__type-icon"
-                 :class="cssClass"
-            >
-                <span class="is-status__indicator"
-                      :title="`This item is ${status}`"
-                ></span>
-            </div>
-            <div class="c-object-label__name">
-                {{ domainObject && domainObject.name }}
-            </div>
+  >
+    <div class="c-so-view__header">
+      <div class="c-object-label" :class="[statusClass]">
+        <div class="c-object-label__type-icon" :class="cssClass">
+          <span
+            class="is-status__indicator"
+            :aria-label="`This item is ${status}`"
+            :title="`This item is ${status}`"
+          ></span>
         </div>
-
         <div
-            class="c-so-view__frame-controls"
-            :class="{
-                'c-so-view__frame-controls--no-frame': !hasFrame,
-                'has-complex-content': complexContent
-            }"
+          ref="objectName"
+          class="c-object-label__name"
+          @mouseover.ctrl="showToolTip"
+          @mouseleave="hideToolTip"
         >
-            <div v-if="statusBarItems.length > 0"
-                 class="c-so-view__frame-controls__btns"
-            >
-                <button
-                    v-for="(item, index) in statusBarItems"
-                    :key="index"
-                    class="c-icon-button"
-                    :class="item.cssClass"
-                    :title="item.name"
-                    @click="item.onItemClicked"
-                >
-                    <span class="c-icon-button__label">{{ item.name }}</span>
-                </button>
-            </div>
-            <button
-                class="c-icon-button icon-3-dots c-so-view__frame-controls__more"
-                title="View menu items"
-                @click.prevent.stop="showMenuItems($event)"
-            ></button>
+          {{ domainObject && domainObject.name }}
+        </div>
+      </div>
+
+      <div
+        class="c-so-view__frame-controls"
+        :class="{
+          'c-so-view__frame-controls--no-frame': !hasFrame,
+          'has-complex-content': complexContent
+        }"
+      >
+        <div v-if="supportsIndependentTime" class="c-conductor-holder--compact">
+          <independent-time-conductor :domain-object="domainObject" :object-path="objectPath" />
         </div>
+        <NotebookMenuSwitcher
+          v-if="notebookEnabled"
+          :domain-object="domainObject"
+          :object-path="objectPath"
+          class="c-notebook-snapshot-menubutton"
+        />
+        <div v-if="statusBarItems.length > 0" class="c-so-view__frame-controls__btns">
+          <button
+            v-for="(item, index) in statusBarItems"
+            :key="index"
+            class="c-icon-button"
+            :class="item.cssClass"
+            :title="item.name"
+            :aria-label="item.name"
+            @click="item.onItemClicked"
+          >
+            <span class="c-icon-button__label">{{ item.name }}</span>
+          </button>
+        </div>
+        <button
+          class="c-icon-button icon-3-dots c-so-view__frame-controls__more"
+          aria-label="View menu items"
+          title="View menu items"
+          @click.prevent.stop="showMenuItems($event)"
+        ></button>
+      </div>
     </div>
 
     <object-view
-        ref="objectView"
-        class="c-so-view__object-view js-object-view"
-        :show-edit-view="showEditView"
-        :object-path="objectPath"
-        :layout-font-size="layoutFontSize"
-        :layout-font="layoutFont"
-        @change-action-collection="setActionCollection"
+      ref="objectView"
+      class="c-so-view__object-view js-object-view js-notebook-snapshot-item"
+      :show-edit-view="showEditView"
+      :object-path="objectPath"
+      :layout-font-size="layoutFontSize"
+      :layout-font="layoutFont"
+      @change-action-collection="setActionCollection"
     />
-</div>
+  </div>
 </template>
 
 <script>
+import NotebookMenuSwitcher from '@/plugins/notebook/components/NotebookMenuSwitcher.vue';
+import IndependentTimeConductor from '@/plugins/timeConductor/independent/IndependentTimeConductor.vue';
+
+import tooltipHelpers from '../../api/tooltips/tooltipMixins.js';
+import { SupportedViewTypes } from '../../utils/constants.js';
 import ObjectView from './ObjectView.vue';
 
-const SIMPLE_CONTENT_TYPES = [
-    'clock',
-    'timer',
-    'summary-widget',
-    'hyperlink',
-    'conditionWidget'
-];
+const SIMPLE_CONTENT_TYPES = ['clock', 'timer', 'summary-widget', 'hyperlink', 'conditionWidget'];
+const CSS_WIDTH_LESS_STR = '--width-less-than-';
 
 export default {
-    components: {
-        ObjectView
+  components: {
+    ObjectView,
+    NotebookMenuSwitcher,
+    IndependentTimeConductor
+  },
+  mixins: [tooltipHelpers],
+  inject: ['openmct'],
+  props: {
+    domainObject: {
+      type: Object,
+      required: true
     },
-    inject: ['openmct'],
-    props: {
-        domainObject: {
-            type: Object,
-            required: true
-        },
-        objectPath: {
-            type: Array,
-            required: true
-        },
-        hasFrame: Boolean,
-        showEditView: {
-            type: Boolean,
-            default: true
-        },
-        layoutFontSize: {
-            type: String,
-            default: ''
-        },
-        layoutFont: {
-            type: String,
-            default: ''
-        }
+    objectPath: {
+      type: Array,
+      required: true
+    },
+    hasFrame: Boolean,
+    showEditView: {
+      type: Boolean,
+      default: true
     },
-    data() {
-        let objectType = this.openmct.types.get(this.domainObject.type);
+    layoutFontSize: {
+      type: String,
+      default: ''
+    },
+    layoutFont: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    let objectType = this.openmct.types.get(this.domainObject.type);
 
-        let cssClass = objectType && objectType.definition ? objectType.definition.cssClass : 'icon-object-unknown';
+    let cssClass =
+      objectType && objectType.definition ? objectType.definition.cssClass : 'icon-object-unknown';
 
-        let complexContent = !SIMPLE_CONTENT_TYPES.includes(this.domainObject.type);
+    let complexContent = !SIMPLE_CONTENT_TYPES.includes(this.domainObject.type);
 
-        return {
-            cssClass,
-            complexContent,
-            statusBarItems: [],
-            status: ''
-        };
+    return {
+      cssClass,
+      widthClass: '',
+      complexContent,
+      notebookEnabled: this.openmct.types.get('notebook'),
+      statusBarItems: [],
+      status: '',
+      supportsIndependentTime: false
+    };
+  },
+  computed: {
+    statusClass() {
+      return this.status ? `is-status--${this.status}` : '';
+    }
+  },
+  mounted() {
+    this.status = this.openmct.status.get(this.domainObject.identifier);
+    this.removeStatusListener = this.openmct.status.observe(
+      this.domainObject.identifier,
+      this.setStatus
+    );
+    const provider = this.openmct.objectViews.get(this.domainObject, this.objectPath)[0];
+    if (provider) {
+      this.$refs.objectView.show(this.domainObject, provider.key, false, this.objectPath);
+    }
+
+    if (this.$refs.soView) {
+      this.soViewResizeObserver = new ResizeObserver(this.resizeSoView);
+      this.soViewResizeObserver.observe(this.$refs.soView);
+    }
+
+    const viewKey = this.getViewKey();
+    this.supportsIndependentTime = this.domainObject && SupportedViewTypes.includes(viewKey);
+  },
+  beforeUnmount() {
+    this.removeStatusListener();
+
+    if (this.actionCollection) {
+      this.unlistenToActionCollection();
+    }
+
+    if (this.soViewResizeObserver) {
+      this.soViewResizeObserver.disconnect();
+    }
+  },
+  methods: {
+    getSelectionContext() {
+      return this.$refs.objectView.getSelectionContext();
     },
-    computed: {
-        statusClass() {
-            return (this.status) ? `is-status--${this.status}` : '';
-        }
+    setActionCollection(actionCollection) {
+      if (this.actionCollection) {
+        this.unlistenToActionCollection();
+      }
+
+      this.actionCollection = actionCollection;
+      this.actionCollection.on('update', this.updateActionItems);
+      this.updateActionItems();
+    },
+    unlistenToActionCollection() {
+      this.actionCollection.off('update', this.updateActionItems);
+      delete this.actionCollection;
+    },
+    updateActionItems() {
+      const statusBarItems = this.actionCollection.getStatusBarActions();
+      this.statusBarItems = this.openmct.menus.actionsToMenuItems(
+        statusBarItems,
+        this.actionCollection.objectPath,
+        this.actionCollection.view
+      );
+      this.menuActionItems = this.actionCollection.getVisibleActions();
+    },
+    showMenuItems(event) {
+      const sortedActions = this.openmct.actions._groupAndSortActions(this.menuActionItems);
+      if (sortedActions.length) {
+        const menuItems = this.openmct.menus.actionsToMenuItems(
+          sortedActions,
+          this.actionCollection.objectPath,
+          this.actionCollection.view
+        );
+        this.openmct.menus.showMenu(event.x, event.y, menuItems);
+      }
     },
-    mounted() {
-        this.status = this.openmct.status.get(this.domainObject.identifier);
-        this.removeStatusListener = this.openmct.status.observe(this.domainObject.identifier, this.setStatus);
-        const provider = this.openmct.objectViews.get(this.domainObject, this.objectPath)[0];
-        this.$refs.objectView.show(this.domainObject, provider.key, false, this.objectPath);
+    setStatus(status) {
+      this.status = status;
     },
-    beforeDestroy() {
-        this.removeStatusListener();
+    resizeSoView() {
+      let cW = this.$refs.soView.offsetWidth;
+      let widths = [220, 600];
+      let wClass = '';
 
-        if (this.actionCollection) {
-            this.unlistenToActionCollection();
+      for (let width of widths) {
+        if (cW < width) {
+          wClass = wClass.concat(' ', CSS_WIDTH_LESS_STR, width);
         }
+      }
+
+      this.widthClass = wClass.trimStart();
     },
-    methods: {
-        getSelectionContext() {
-            return this.$refs.objectView.getSelectionContext();
-        },
-        setActionCollection(actionCollection) {
-            if (this.actionCollection) {
-                this.unlistenToActionCollection();
-            }
-
-            this.actionCollection = actionCollection;
-            this.actionCollection.on('update', this.updateActionItems);
-            this.updateActionItems(this.actionCollection.applicableActions);
-        },
-        unlistenToActionCollection() {
-            this.actionCollection.off('update', this.updateActionItems);
-            delete this.actionCollection;
-        },
-        updateActionItems(actionItems) {
-            const statusBarItems = this.actionCollection.getStatusBarActions();
-            this.statusBarItems = this.openmct.menus.actionsToMenuItems(statusBarItems, this.actionCollection.objectPath, this.actionCollection.view);
-            this.menuActionItems = this.actionCollection.getVisibleActions();
-        },
-        showMenuItems(event) {
-            const sortedActions = this.openmct.actions._groupAndSortActions(this.menuActionItems);
-            const menuItems = this.openmct.menus.actionsToMenuItems(sortedActions, this.actionCollection.objectPath, this.actionCollection.view);
-            this.openmct.menus.showMenu(event.x, event.y, menuItems);
-        },
-        setStatus(status) {
-            this.status = status;
-        }
+    getViewKey() {
+      return this.$refs.objectView?.viewKey;
+    },
+    async showToolTip() {
+      const { BELOW } = this.openmct.tooltips.TOOLTIP_LOCATIONS;
+      this.buildToolTip(await this.getObjectPath(), BELOW, 'objectName');
     }
+  }
 };
 </script>
diff --git a/src/ui/components/ObjectLabel.vue b/src/ui/components/ObjectLabel.vue
index c721288f602..bac8e10cfe9 100644
--- a/src/ui/components/ObjectLabel.vue
+++ b/src/ui/components/ObjectLabel.vue
@@ -1,110 +1,167 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<a
+  <a
+    ref="root"
     class="c-tree__item__label c-object-label"
     :class="[statusClass]"
     draggable="true"
+    :aria-label="ariaLabel"
     @dragstart="dragStart"
     @click="navigateOrPreview"
->
+  >
+    <div class="c-tree__item__type-icon c-object-label__type-icon" :class="typeClass">
+      <span
+        class="is-status__indicator"
+        :aria-label="`This item is ${status}`"
+        :title="`This item is ${status}`"
+      ></span>
+    </div>
     <div
-        class="c-tree__item__type-icon c-object-label__type-icon"
-        :class="typeClass"
+      ref="objectLabel"
+      class="c-tree__item__name c-object-label__name"
+      @mouseover.ctrl="showToolTip"
+      @mouseleave="hideToolTip"
     >
-        <span class="is-status__indicator"
-              :title="`This item is ${status}`"
-        ></span>
-    </div>
-    <div class="c-tree__item__name c-object-label__name">
-        {{ domainObject.name }}
+      {{ domainObject.name }}
     </div>
-</a>
+  </a>
 </template>
 
 <script>
+import { inject } from 'vue';
 
-import ObjectLink from '../mixins/object-link';
-import ContextMenuGesture from '../mixins/context-menu-gesture';
+import tooltipHelpers from '../../api/tooltips/tooltipMixins.js';
+import { useIsEditing } from '../../ui/composables/edit.js';
+import ContextMenuGesture from '../mixins/context-menu-gesture.js';
+import ObjectLink from '../mixins/object-link.js';
 import PreviewAction from '../preview/PreviewAction.js';
 
 export default {
-    mixins: [ObjectLink, ContextMenuGesture],
-    inject: ['openmct'],
-    props: {
-        domainObject: {
-            type: Object,
-            required: true
-        },
-        objectPath: {
-            type: Array,
-            required: true
-        },
-        navigateToPath: {
-            type: String,
-            default: undefined
-        }
+  mixins: [ObjectLink, ContextMenuGesture, tooltipHelpers],
+  inject: ['openmct'],
+  props: {
+    domainObject: {
+      type: Object,
+      required: true
+    },
+    objectPath: {
+      type: Array,
+      required: true
     },
-    data() {
-        return {
-            status: ''
-        };
+    navigateToPath: {
+      type: String,
+      default: undefined
     },
-    computed: {
-        typeClass() {
-            let type = this.openmct.types.get(this.domainObject.type);
-            if (!type) {
-                return 'icon-object-unknown';
-            }
+    readOnly: {
+      type: Boolean,
+      required: false,
+      default() {
+        return false;
+      }
+    }
+  },
+  setup() {
+    const openmct = inject('openmct');
+    const { isEditing } = useIsEditing(openmct);
+    return {
+      isEditing
+    };
+  },
+  data() {
+    return {
+      status: ''
+    };
+  },
+  computed: {
+    typeClass() {
+      let type = this.openmct.types.get(this.domainObject.type);
+      if (!type) {
+        return 'icon-object-unknown';
+      }
 
-            return type.definition.cssClass;
-        },
-        statusClass() {
-            return (this.status) ? `is-status--${this.status}` : '';
-        }
+      return type.definition.cssClass;
+    },
+    statusClass() {
+      return this.status ? `is-status--${this.status}` : '';
     },
-    mounted() {
-        this.removeStatusListener = this.openmct.status.observe(this.domainObject.identifier, this.setStatus);
-        this.status = this.openmct.status.get(this.domainObject.identifier);
-        this.previewAction = new PreviewAction(this.openmct);
+    ariaLabel() {
+      return `${this.isEditing ? 'Preview' : 'Navigate to'} ${this.domainObject.name} ${this.domainObject.type} Object`;
+    }
+  },
+  mounted() {
+    this.removeStatusListener = this.openmct.status.observe(
+      this.domainObject.identifier,
+      this.setStatus
+    );
+    this.status = this.openmct.status.get(this.domainObject.identifier);
+    this.previewAction = new PreviewAction(this.openmct);
+  },
+  unmounted() {
+    this.removeStatusListener();
+  },
+  methods: {
+    navigateOrPreview(event) {
+      if (this.openmct.editor.isEditing()) {
+        event.preventDefault();
+        this.preview();
+      } else {
+        this.openmct.router.navigate(this.objectLink);
+      }
     },
-    destroyed() {
-        this.removeStatusListener();
+    preview() {
+      if (this.previewAction.appliesTo(this.objectPath)) {
+        this.previewAction.invoke(this.objectPath);
+      }
     },
-    methods: {
-        navigateOrPreview(event) {
-            if (this.openmct.editor.isEditing()) {
-                event.preventDefault();
-                this.preview();
-            } else {
-                this.openmct.router.navigate(this.objectLink);
-            }
-        },
-        preview() {
-            if (this.previewAction.appliesTo(this.objectPath)) {
-                this.previewAction.invoke(this.objectPath);
-            }
-        },
-        dragStart(event) {
-            let navigatedObject = this.openmct.router.path[0];
-            let serializedPath = JSON.stringify(this.objectPath);
-            let keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+    dragStart(event) {
+      let navigatedObject = this.openmct.router.path[0];
+      let serializedPath = JSON.stringify(this.objectPath);
+      let keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
 
-            /*
-             * Cannot inspect data transfer objects on dragover/dragenter so impossible to determine composability at
-             * that point. If dragged object can be composed by navigated object, then indicate with presence of
-             * 'composable-domain-object' in data transfer
-             */
-            if (this.openmct.composition.checkPolicy(navigatedObject, this.domainObject)) {
-                event.dataTransfer.setData("openmct/composable-domain-object", JSON.stringify(this.domainObject));
-            }
+      /*
+       * Cannot inspect data transfer objects on dragover/dragenter so impossible to determine composability at
+       * that point. If dragged object can be composed by navigated object, then indicate with presence of
+       * 'composable-domain-object' in data transfer
+       */
+      if (this.openmct.composition.checkPolicy(navigatedObject, this.domainObject)) {
+        event.dataTransfer.setData(
+          'openmct/composable-domain-object',
+          JSON.stringify(this.domainObject)
+        );
+      }
 
-            // serialize domain object anyway, because some views can drag-and-drop objects without composition
-            // (eg. notabook.)
-            event.dataTransfer.setData("openmct/domain-object-path", serializedPath);
-            event.dataTransfer.setData(`openmct/domain-object/${keyString}`, this.domainObject);
-        },
-        setStatus(status) {
-            this.status = status;
-        }
+      // serialize domain object anyway, because some views can drag-and-drop objects without composition
+      // (eg. notebook.)
+      event.dataTransfer.setData('openmct/domain-object-path', serializedPath);
+      event.dataTransfer.setData(`openmct/domain-object/${keyString}`, this.domainObject);
+    },
+    setStatus(status) {
+      this.status = status;
+    },
+    async showToolTip() {
+      const { BELOW } = this.openmct.tooltips.TOOLTIP_LOCATIONS;
+      this.buildToolTip(await this.getObjectPath(), BELOW, 'objectLabel');
     }
+  }
 };
 </script>
diff --git a/src/ui/components/ObjectPath.vue b/src/ui/components/ObjectPath.vue
new file mode 100644
index 00000000000..89ca255f450
--- /dev/null
+++ b/src/ui/components/ObjectPath.vue
@@ -0,0 +1,178 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <ul
+    v-if="orderedPath.length"
+    class="c-location"
+    :aria-label="`${domainObject.name}`"
+    role="navigation"
+  >
+    <li v-for="pathObject in orderedPath" :key="pathObject.key" class="c-location__item">
+      <object-label
+        :domain-object="pathObject.domainObject"
+        :object-path="pathObject.objectPath"
+        :read-only="readOnly"
+        :navigate-to-path="navigateToPath(pathObject.objectPath)"
+      />
+    </li>
+  </ul>
+</template>
+
+<script>
+import ObjectLabel from './ObjectLabel.vue';
+
+export default {
+  components: {
+    ObjectLabel
+  },
+  inject: ['openmct'],
+  props: {
+    domainObject: {
+      type: Object,
+      required: true
+    },
+    readOnly: {
+      type: Boolean,
+      required: false,
+      default() {
+        return false;
+      }
+    },
+    showObjectItself: {
+      type: Boolean,
+      required: false,
+      default() {
+        return false;
+      }
+    },
+    objectPath: {
+      type: Array,
+      default() {
+        return null;
+      }
+    }
+  },
+  data() {
+    return {
+      orderedPath: []
+    };
+  },
+  async mounted() {
+    this.abortController = new AbortController();
+    this.nameChangeListeners = {};
+    const keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+
+    if (keyString && this.keyString !== keyString) {
+      this.keyString = keyString;
+      this.originalPath = [];
+
+      let rawPath = null;
+      if (this.objectPath === null) {
+        try {
+          rawPath = await this.openmct.objects.getOriginalPath(
+            keyString,
+            [],
+            this.abortController.signal
+          );
+        } catch (error) {
+          // aborting the search is ok, everything else should be thrown
+          if (error.name !== 'AbortError') {
+            throw error;
+          }
+        }
+      } else {
+        rawPath = this.objectPath;
+      }
+
+      const pathWithDomainObject = rawPath.map((domainObject, index, pathArray) => {
+        let key = this.openmct.objects.makeKeyString(domainObject.identifier);
+        const objectPath = pathArray.slice(index);
+
+        return {
+          domainObject,
+          key,
+          objectPath
+        };
+      });
+      if (this.showObjectItself) {
+        // remove ROOT only
+        this.orderedPath = pathWithDomainObject.slice(0, pathWithDomainObject.length - 1).reverse();
+      } else {
+        // remove ROOT and object itself from path
+        this.orderedPath = pathWithDomainObject.slice(1, pathWithDomainObject.length - 1).reverse();
+      }
+      this.orderedPath.forEach((pathObject) => {
+        this.addNameListenerFor(pathObject.domainObject);
+      });
+    }
+  },
+  unmounted() {
+    if (this.abortController) {
+      this.abortController.abort();
+    }
+    Object.values(this.nameChangeListeners).forEach((unlisten) => {
+      unlisten();
+    });
+  },
+  methods: {
+    /**
+     * Generate the hash url for the given object path, removing the '/ROOT' prefix if present.
+     * @param {import('../../api/objects/ObjectAPI').DomainObject[]} objectPath
+     */
+    navigateToPath(objectPath) {
+      /** @type {String} */
+      const path = `/browse/${this.openmct.objects.getRelativePath(objectPath)}`;
+
+      return path.replace('ROOT/', '');
+    },
+    updateObjectPathName(keyString, newName) {
+      this.orderedPath = this.orderedPath.map((pathObject) => {
+        if (this.openmct.objects.makeKeyString(pathObject.domainObject.identifier) === keyString) {
+          return {
+            ...pathObject,
+            domainObject: { ...pathObject.domainObject, name: newName }
+          };
+        }
+        return pathObject;
+      });
+    },
+    removeNameListenerFor(domainObject) {
+      const keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
+      if (this.nameChangeListeners[keyString]) {
+        this.nameChangeListeners[keyString]();
+        delete this.nameChangeListeners[keyString];
+      }
+    },
+    addNameListenerFor(domainObject) {
+      const keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
+      if (!this.nameChangeListeners[keyString]) {
+        this.nameChangeListeners[keyString] = this.openmct.objects.observe(
+          domainObject,
+          'name',
+          this.updateObjectPathName.bind(this, keyString)
+        );
+      }
+    }
+  }
+};
+</script>
diff --git a/src/ui/components/ObjectView.vue b/src/ui/components/ObjectView.vue
index 4c795d442c2..6c5c1c9aa3b 100644
--- a/src/ui/components/ObjectView.vue
+++ b/src/ui/components/ObjectView.vue
@@ -1,395 +1,533 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div></div>
+  <div>
+    <div ref="objectViewWrapper" class="c-object-view" :class="viewClasses"></div>
+  </div>
 </template>
 
 <script>
-import _ from "lodash";
-import StyleRuleManager from "@/plugins/condition/StyleRuleManager";
-import {STYLE_CONSTANTS} from "@/plugins/condition/utils/constants";
+import _ from 'lodash';
+import { toRaw } from 'vue';
+
+import StyleRuleManager from '@/plugins/condition/StyleRuleManager';
+import { STYLE_CONSTANTS } from '@/plugins/condition/utils/constants';
+import stalenessMixin from '@/ui/mixins/staleness-mixin';
+
+import { objectEquals } from '../../api/objects/object-utils.js';
+import VisibilityObserver from '../../utils/visibility/VisibilityObserver.js';
 
 export default {
-    inject: ["openmct"],
-    props: {
-        showEditView: Boolean,
-        defaultObject: {
-            type: Object,
-            default: undefined
-        },
-        objectPath: {
-            type: Array,
-            default: () => {
-                return [];
-            }
-        },
-        layoutFontSize: {
-            type: String,
-            default: ''
-        },
-        layoutFont: {
-            type: String,
-            default: ''
-        },
-        objectViewKey: {
-            type: String,
-            default: ''
-        }
+  mixins: [stalenessMixin],
+  inject: ['openmct'],
+  props: {
+    showEditView: Boolean,
+    defaultObject: {
+      type: Object,
+      default: undefined
     },
-    data() {
-        return {
-            domainObject: this.defaultObject
-        };
-    },
-    computed: {
-        objectFontStyle() {
-            return this.domainObject && this.domainObject.configuration && this.domainObject.configuration.fontStyle;
-        },
-        fontSize() {
-            return this.objectFontStyle ? this.objectFontStyle.fontSize : this.layoutFontSize;
-        },
-        font() {
-            return this.objectFontStyle ? this.objectFontStyle.font : this.layoutFont;
-        }
+    objectPath: {
+      type: Array,
+      default: () => {
+        return [];
+      }
     },
-    destroyed() {
-        this.clear();
-        if (this.releaseEditModeHandler) {
-            this.releaseEditModeHandler();
-        }
-
-        if (this.stopListeningStyles) {
-            this.stopListeningStyles();
-        }
-
-        if (this.stopListeningFontStyles) {
-            this.stopListeningFontStyles();
-        }
-
-        if (this.styleRuleManager) {
-            this.styleRuleManager.destroy();
-            delete this.styleRuleManager;
-        }
-
-        if (this.actionCollection) {
-            this.actionCollection.destroy();
-            delete this.actionCollection;
-        }
+    layoutFontSize: {
+      type: String,
+      default: ''
     },
-    created() {
-        this.debounceUpdateView = _.debounce(this.updateView, 10);
+    layoutFont: {
+      type: String,
+      default: ''
     },
-    mounted() {
-        this.updateView();
-        this.$el.addEventListener('dragover', this.onDragOver, {
-            capture: true
-        });
-        this.$el.addEventListener('drop', this.editIfEditable, {
-            capture: true
-        });
-        this.$el.addEventListener('drop', this.addObjectToParent);
-        if (this.domainObject) {
-            //This is to apply styles to subobjects in a layout
-            this.initObjectStyles();
-        }
+    objectViewKey: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['change-action-collection'],
+  data() {
+    return {
+      domainObject: this.defaultObject
+    };
+  },
+  computed: {
+    path() {
+      return this.domainObject && (this.currentObjectPath || this.objectPath);
     },
-    methods: {
-        clear() {
-            if (this.currentView) {
-                this.currentView.destroy();
-                this.$el.innerHTML = '';
-
-                if (this.releaseEditModeHandler) {
-                    this.releaseEditModeHandler();
-                    delete this.releaseEditModeHandler;
-                }
-            }
+    objectFontStyle() {
+      return this.domainObject?.configuration?.fontStyle;
+    },
+    fontSize() {
+      return this.objectFontStyle ? this.objectFontStyle.fontSize : this.layoutFontSize;
+    },
+    font() {
+      return this.objectFontStyle ? this.objectFontStyle.font : this.layoutFont;
+    },
+    viewClasses() {
+      let classes;
 
-            delete this.viewContainer;
-            delete this.currentView;
+      if (this.domainObject) {
+        classes = `is-object-type-${this.domainObject.type} ${this.isStale ? 'is-stale' : ''}`;
+      }
 
-            if (this.removeSelectable) {
-                this.removeSelectable();
-                delete this.removeSelectable;
-            }
+      return classes;
+    }
+  },
+  beforeUnmount() {
+    this.clear();
+    if (this.releaseEditModeHandler) {
+      this.releaseEditModeHandler();
+    }
 
-            if (this.composition) {
-                this.composition._destroy();
-            }
+    if (this.stopListeningStyles) {
+      this.stopListeningStyles();
+    }
 
-            this.openmct.objectViews.off('clearData', this.clearData);
-        },
-        getStyleReceiver() {
-            let styleReceiver = this.$el.querySelector('.js-style-receiver')
-                || this.$el.querySelector(':first-child');
+    if (this.stopListeningFontStyles) {
+      this.stopListeningFontStyles();
+    }
 
-            if (styleReceiver === null) {
-                styleReceiver = undefined;
-            }
+    if (this.styleRuleManager) {
+      this.styleRuleManager.destroy();
+      delete this.styleRuleManager;
+    }
 
-            return styleReceiver;
-        },
-        invokeEditModeHandler(editMode) {
-            let edit;
+    if (this.actionCollection) {
+      this.actionCollection.destroy();
+      delete this.actionCollection;
+    }
+    if (this.visibilityObserver) {
+      this.visibilityObserver.destroy();
+    }
+    this.$refs.objectViewWrapper.removeEventListener('dragover', this.onDragOver, {
+      capture: true
+    });
+    this.$refs.objectViewWrapper.removeEventListener('drop', this.editIfEditable, {
+      capture: true
+    });
+    this.$refs.objectViewWrapper.removeEventListener('drop', this.addObjectToParent);
+  },
+  created() {
+    this.debounceUpdateView = _.debounce(this.updateView, 10);
+  },
+  mounted() {
+    this.visibilityObserver = new VisibilityObserver(
+      this.$refs.objectViewWrapper,
+      this.openmct.element
+    );
+    this.updateView();
+    this.$refs.objectViewWrapper.addEventListener('dragover', this.onDragOver, {
+      capture: true
+    });
+    this.$refs.objectViewWrapper.addEventListener('drop', this.editIfEditable, {
+      capture: true
+    });
+    this.$refs.objectViewWrapper.addEventListener('drop', this.addObjectToParent);
+    if (this.domainObject) {
+      //This is to apply styles to subobjects in a layout
+      this.initObjectStyles();
+      this.triggerStalenessSubscribe(this.domainObject);
+    }
+    this.setupClockChangedEvent((domainObject) => {
+      this.triggerUnsubscribeFromStaleness(domainObject);
+      this.subscribeToStaleness(domainObject);
+    });
+  },
+  methods: {
+    clear() {
+      if (this.currentView) {
+        this.currentView.destroy();
+
+        if (this.$refs.objectViewWrapper) {
+          this.$refs.objectViewWrapper.innerHTML = '';
+        }
 
-            if (this.domainObject.locked) {
-                edit = false;
-            } else {
-                edit = editMode;
-            }
+        if (this.releaseEditModeHandler) {
+          this.releaseEditModeHandler();
+          delete this.releaseEditModeHandler;
+        }
 
-            this.currentView.onEditModeChange(edit);
-        },
-        toggleEditView(editMode) {
-            this.clear();
-            this.updateView(true);
-        },
-        updateStyle(styleObj) {
-            let elemToStyle = this.getStyleReceiver();
-
-            if (!styleObj || elemToStyle === undefined) {
-                return;
-            }
+        if (this.styleRuleManager) {
+          this.styleRuleManager.destroy();
+          delete this.styleRuleManager;
+        }
+      }
 
-            let keys = Object.keys(styleObj);
-
-            keys.forEach(key => {
-                if (elemToStyle) {
-                    if ((typeof styleObj[key] === 'string') && (styleObj[key].indexOf('__no_value') > -1)) {
-                        if (elemToStyle.style[key]) {
-                            elemToStyle.style[key] = '';
-                        }
-                    } else {
-                        if (!styleObj.isStyleInvisible && elemToStyle.classList.contains(STYLE_CONSTANTS.isStyleInvisible)) {
-                            elemToStyle.classList.remove(STYLE_CONSTANTS.isStyleInvisible);
-                        } else if (styleObj.isStyleInvisible && !elemToStyle.classList.contains(styleObj.isStyleInvisible)) {
-                            elemToStyle.classList.add(styleObj.isStyleInvisible);
-                        }
-
-                        elemToStyle.style[key] = styleObj[key];
-                    }
-                }
-            });
-        },
-        updateView(immediatelySelect) {
-            this.clear();
-            if (!this.domainObject) {
-                return;
-            }
+      delete this.viewContainer;
+      delete this.currentView;
 
-            this.composition = this.openmct.composition.get(this.domainObject);
+      if (this.removeSelectable) {
+        this.removeSelectable();
+        delete this.removeSelectable;
+      }
 
-            if (this.composition) {
-                this.loadComposition();
-            }
+      if (this.composition) {
+        this.composition._destroy();
+      }
 
-            this.viewContainer = document.createElement('div');
-            this.viewContainer.classList.add('l-angular-ov-wrapper');
-            this.$el.append(this.viewContainer);
-            let provider = this.getViewProvider();
-            if (!provider) {
-                return;
-            }
+      this.triggerUnsubscribeFromStaleness(this.domainObject);
 
-            let objectPath = this.currentObjectPath || this.objectPath;
+      this.openmct.objectViews.off('clearData', this.clearData);
+      this.openmct.objectViews.off('reload', this.reload);
+      if (this.contextActionEvent) {
+        this.openmct.objectViews.off(this.contextActionEvent, this.performContextAction);
+      }
+    },
+    getStyleReceiver() {
+      let styleReceiver;
 
-            if (provider.edit && this.showEditView) {
-                if (this.openmct.editor.isEditing()) {
-                    this.currentView = provider.edit(this.domainObject, true, objectPath);
-                } else {
-                    this.currentView = provider.view(this.domainObject, objectPath);
-                }
+      if (this.$refs.objectViewWrapper !== undefined) {
+        styleReceiver =
+          this.$refs.objectViewWrapper.querySelector('.js-style-receiver') ||
+          this.$refs.objectViewWrapper.querySelector(':first-child');
 
-                this.openmct.editor.on('isEditing', this.toggleEditView);
-                this.releaseEditModeHandler = () => this.openmct.editor.off('isEditing', this.toggleEditView);
-            } else {
-                this.currentView = provider.view(this.domainObject, objectPath);
+        if (styleReceiver === null) {
+          styleReceiver = undefined;
+        }
+      }
 
-                if (this.currentView.onEditModeChange) {
-                    this.openmct.editor.on('isEditing', this.invokeEditModeHandler);
-                    this.releaseEditModeHandler = () => this.openmct.editor.off('isEditing', this.invokeEditModeHandler);
-                }
-            }
+      return styleReceiver;
+    },
+    invokeEditModeHandler(editMode) {
+      let edit;
 
-            this.currentView.show(this.viewContainer, this.openmct.editor.isEditing());
+      if (this.domainObject.locked) {
+        edit = false;
+      } else {
+        edit = editMode;
+      }
 
-            if (immediatelySelect) {
-                this.removeSelectable = this.openmct.selection.selectable(
-                    this.$el, this.getSelectionContext(), true);
+      this.currentView.onEditModeChange(edit);
+    },
+    toggleEditView(editMode) {
+      this.clear();
+      this.updateView(true);
+    },
+    reload(domainObjectToReload) {
+      if (objectEquals(domainObjectToReload, this.domainObject)) {
+        this.updateView(true);
+        this.initObjectStyles();
+        this.triggerStalenessSubscribe(this.domainObject);
+      }
+    },
+    triggerStalenessSubscribe(object) {
+      if (this.openmct.telemetry.isTelemetryObject(object)) {
+        this.subscribeToStaleness(object);
+      }
+    },
+    updateStyle(styleObj) {
+      let elemToStyle = this.getStyleReceiver();
+
+      if (!styleObj || elemToStyle === undefined) {
+        return;
+      }
+
+      let keys = Object.keys(styleObj);
+
+      keys.forEach((key) => {
+        if (elemToStyle) {
+          if (typeof styleObj[key] === 'string' && styleObj[key].indexOf('__no_value') > -1) {
+            if (elemToStyle.style[key]) {
+              if (key === 'background-color') {
+                elemToStyle.style[key] = 'transparent';
+              } else {
+                elemToStyle.style[key] = '';
+              }
             }
-
-            this.openmct.objectViews.on('clearData', this.clearData);
-
-            this.$nextTick(() => {
-                this.getActionCollection();
-            });
-        },
-        getActionCollection() {
-            if (this.actionCollection) {
-                this.actionCollection.destroy();
+          } else {
+            if (
+              !styleObj.isStyleInvisible &&
+              elemToStyle.classList.contains(STYLE_CONSTANTS.isStyleInvisible)
+            ) {
+              elemToStyle.classList.remove(STYLE_CONSTANTS.isStyleInvisible);
+            } else if (
+              styleObj.isStyleInvisible &&
+              !elemToStyle.classList.contains(styleObj.isStyleInvisible)
+            ) {
+              elemToStyle.classList.add(styleObj.isStyleInvisible);
             }
 
-            this.actionCollection = this.openmct.actions.getActionsCollection(this.currentObjectPath || this.objectPath, this.currentView);
-            this.$emit('change-action-collection', this.actionCollection);
-        },
-        show(object, viewKey, immediatelySelect, currentObjectPath) {
-            this.updateStyle();
+            elemToStyle.style[key] = styleObj[key];
+          }
+        }
+      });
+    },
+    updateView(immediatelySelect) {
+      this.clear();
+      if (!this.domainObject) {
+        return;
+      }
+
+      this.composition = this.openmct.composition.get(this.domainObject);
+
+      if (this.composition) {
+        this.loadComposition();
+      }
+
+      this.viewContainer = this.$refs.objectViewWrapper;
+      let provider = this.getViewProvider();
+      if (!provider) {
+        return;
+      }
+
+      let objectPath = this.currentObjectPath || this.objectPath;
+
+      if (provider.edit && this.showEditView) {
+        if (this.openmct.editor.isEditing()) {
+          this.currentView = provider.edit(toRaw(this.domainObject), true, objectPath);
+        } else {
+          this.currentView = provider.view(toRaw(this.domainObject), objectPath);
+        }
 
-            if (this.unlisten) {
-                this.unlisten();
-            }
+        this.openmct.editor.on('isEditing', this.toggleEditView);
+        this.releaseEditModeHandler = () =>
+          this.openmct.editor.off('isEditing', this.toggleEditView);
+      } else {
+        this.currentView = provider.view(toRaw(this.domainObject), objectPath);
 
-            if (this.removeSelectable) {
-                this.removeSelectable();
-                delete this.removeSelectable;
-            }
+        if (this.currentView.onEditModeChange) {
+          this.openmct.editor.on('isEditing', this.invokeEditModeHandler);
+          this.releaseEditModeHandler = () =>
+            this.openmct.editor.off('isEditing', this.invokeEditModeHandler);
+        }
+      }
+
+      this.currentView.show(this.viewContainer, this.openmct.editor.isEditing(), {
+        renderWhenVisible: this.visibilityObserver.renderWhenVisible
+      });
+
+      if (immediatelySelect) {
+        this.removeSelectable = this.openmct.selection.selectable(
+          this.$refs.objectViewWrapper,
+          this.getSelectionContext(),
+          true
+        );
+      }
+
+      this.contextActionEvent = `contextAction:${this.openmct.objects.makeKeyString(
+        this.domainObject.identifier
+      )}`;
+      this.openmct.objectViews.on('clearData', this.clearData);
+      this.openmct.objectViews.on('reload', this.reload);
+      this.openmct.objectViews.on(this.contextActionEvent, this.performContextAction);
+
+      this.$nextTick(() => {
+        this.updateStyle(this.styleRuleManager?.currentStyle);
+        this.setFontSize(this.fontSize);
+        this.setFont(this.font);
+        this.getActionCollection();
+      });
+    },
+    getActionCollection() {
+      if (this.actionCollection) {
+        this.actionCollection.destroy();
+      }
+
+      this.actionCollection = this.openmct.actions.getActionsCollection(
+        this.currentObjectPath || this.objectPath,
+        this.currentView
+      );
+      this.$emit('change-action-collection', this.actionCollection);
+    },
+    show(object, viewKey, immediatelySelect, currentObjectPath) {
+      this.updateStyle();
 
-            if (this.composition) {
-                this.composition._destroy();
-            }
+      if (this.removeSelectable) {
+        this.removeSelectable();
+        delete this.removeSelectable;
+      }
 
-            this.domainObject = object;
+      if (this.composition) {
+        this.composition._destroy();
+      }
 
-            if (currentObjectPath) {
-                this.currentObjectPath = currentObjectPath;
-            }
+      this.domainObject = object;
 
-            this.viewKey = viewKey;
+      if (currentObjectPath) {
+        this.currentObjectPath = currentObjectPath;
+      }
 
-            this.updateView(immediatelySelect);
+      this.viewKey = viewKey;
 
-            this.initObjectStyles();
-        },
-        initObjectStyles() {
-            if (!this.styleRuleManager) {
-                this.styleRuleManager = new StyleRuleManager((this.domainObject.configuration && this.domainObject.configuration.objectStyles), this.openmct, this.updateStyle.bind(this), true);
-            } else {
-                this.styleRuleManager.updateObjectStyleConfig(this.domainObject.configuration && this.domainObject.configuration.objectStyles);
-            }
+      this.updateView(immediatelySelect);
 
-            if (this.stopListeningStyles) {
-                this.stopListeningStyles();
-            }
+      this.triggerStalenessSubscribe(this.domainObject);
+      this.initObjectStyles();
+    },
+    initObjectStyles() {
+      if (!this.styleRuleManager) {
+        this.styleRuleManager = new StyleRuleManager(
+          this.domainObject.configuration?.objectStyles,
+          this.openmct,
+          this.updateStyle.bind(this),
+          true
+        );
+      } else {
+        this.styleRuleManager.updateObjectStyleConfig(
+          this.domainObject.configuration?.objectStyles
+        );
+      }
+
+      if (this.stopListeningStyles) {
+        this.stopListeningStyles();
+      }
+
+      this.stopListeningStyles = this.openmct.objects.observe(
+        this.domainObject,
+        'configuration.objectStyles',
+        (newObjectStyle) => {
+          //Updating styles in the inspector view will trigger this so that the changes are reflected immediately
+          this.styleRuleManager.updateObjectStyleConfig(newObjectStyle);
+        }
+      );
+
+      this.stopListeningFontStyles = this.openmct.objects.observe(
+        this.domainObject,
+        'configuration.fontStyle',
+        (newFontStyle) => {
+          this.setFontSize(newFontStyle.fontSize);
+          this.setFont(newFontStyle.font);
+        }
+      );
+    },
+    loadComposition() {
+      return this.composition.load();
+    },
+    getSelectionContext() {
+      if (this.currentView && this.currentView.getSelectionContext) {
+        return this.currentView.getSelectionContext();
+      } else {
+        return { item: this.domainObject };
+      }
+    },
+    onDragOver(event) {
+      if (this.hasComposableDomainObject(event)) {
+        if (this.isEditingAllowed()) {
+          event.preventDefault();
+        } else {
+          event.stopPropagation();
+        }
+      }
+    },
+    addObjectToParent(event) {
+      if (this.hasComposableDomainObject(event) && this.composition) {
+        let composableDomainObject = this.getComposableDomainObject(event);
+        this.loadComposition().then(() => {
+          this.composition.add(composableDomainObject);
+        });
 
-            this.stopListeningStyles = this.openmct.objects.observe(this.domainObject, 'configuration.objectStyles', (newObjectStyle) => {
-                //Updating styles in the inspector view will trigger this so that the changes are reflected immediately
-                this.styleRuleManager.updateObjectStyleConfig(newObjectStyle);
-            });
-
-            this.setFontSize(this.fontSize);
-            this.setFont(this.font);
-
-            this.stopListeningFontStyles = this.openmct.objects.observe(this.domainObject, 'configuration.fontStyle', (newFontStyle) => {
-                this.setFontSize(newFontStyle.fontSize);
-                this.setFont(newFontStyle.font);
-            });
-        },
-        loadComposition() {
-            return this.composition.load();
-        },
-        getSelectionContext() {
-            if (this.currentView && this.currentView.getSelectionContext) {
-                return this.currentView.getSelectionContext();
-            } else {
-                return { item: this.domainObject };
-            }
-        },
-        onDragOver(event) {
-            if (this.hasComposableDomainObject(event)) {
-                if (this.isEditingAllowed()) {
-                    event.preventDefault();
-                } else {
-                    event.stopPropagation();
-                }
-            }
-        },
-        addObjectToParent(event) {
-            if (this.hasComposableDomainObject(event) && this.composition) {
-                let composableDomainObject = this.getComposableDomainObject(event);
-                this.loadComposition().then(() => {
-                    this.composition.add(composableDomainObject);
-                });
-
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        },
-        getViewKey() {
-            let viewKey = this.viewKey;
-            if (this.objectViewKey) {
-                viewKey = this.objectViewKey;
-            }
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    getViewKey() {
+      let viewKey = this.viewKey;
+      if (this.objectViewKey) {
+        viewKey = this.objectViewKey;
+      }
 
-            return viewKey;
-        },
-        getViewProvider() {
-            let provider = this.openmct.objectViews.getByProviderKey(this.getViewKey());
-
-            if (!provider) {
-                let objectPath = this.currentObjectPath || this.objectPath;
-                provider = this.openmct.objectViews.get(this.domainObject, objectPath)[0];
-                if (!provider) {
-                    return;
-                }
-            }
+      return viewKey;
+    },
+    getViewProvider() {
+      let provider = this.openmct.objectViews.getByProviderKey(this.getViewKey());
+
+      if (!provider) {
+        let objectPath = this.currentObjectPath || this.objectPath;
+        provider = this.openmct.objectViews.get(this.domainObject, objectPath)[0];
+        if (!provider) {
+          return;
+        }
+      }
 
-            return provider;
-        },
-        editIfEditable(event) {
-            let objectPath = this.currentObjectPath || this.objectPath;
-            let provider = this.getViewProvider();
-            if (provider
-                && provider.canEdit
-                && provider.canEdit(this.domainObject, objectPath)
-                && this.isEditingAllowed()
-                && !this.openmct.editor.isEditing()) {
-                this.openmct.editor.edit();
-            }
-        },
-        hasComposableDomainObject(event) {
-            return event.dataTransfer.types.includes('openmct/composable-domain-object');
-        },
-        getComposableDomainObject(event) {
-            let serializedDomainObject = event.dataTransfer.getData('openmct/composable-domain-object');
-
-            return JSON.parse(serializedDomainObject);
-        },
-        clearData(domainObject) {
-            if (domainObject) {
-                let clearKeyString = this.openmct.objects.makeKeyString(domainObject.identifier);
-                let currentObjectKeyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-
-                if (clearKeyString === currentObjectKeyString) {
-                    if (this.currentView.onClearData) {
-                        this.currentView.onClearData();
-                    }
-                }
-            } else {
-                if (this.currentView.onClearData) {
-                    this.currentView.onClearData();
-                }
-            }
-        },
-        isEditingAllowed() {
-            let browseObject = this.openmct.layout.$refs.browseObject.domainObject;
-            let objectPath = this.currentObjectPath || this.objectPath;
-            let parentObject = objectPath[1];
-
-            return [browseObject, parentObject, this.domainObject].every(object => object && !object.locked);
-        },
-        setFontSize(newSize) {
-            let elemToStyle = this.getStyleReceiver();
-
-            if (elemToStyle !== undefined) {
-                elemToStyle.dataset.fontSize = newSize;
-            }
-        },
-        setFont(newFont) {
-            let elemToStyle = this.getStyleReceiver();
+      return provider;
+    },
+    editIfEditable(event) {
+      let objectPath = this.currentObjectPath || this.objectPath;
+      let provider = this.getViewProvider();
+      if (
+        provider &&
+        provider.canEdit &&
+        provider.canEdit(toRaw(this.domainObject), objectPath) &&
+        this.isEditingAllowed() &&
+        !this.openmct.editor.isEditing()
+      ) {
+        this.openmct.editor.edit();
+      }
+    },
+    hasComposableDomainObject(event) {
+      return event.dataTransfer.types.includes('openmct/composable-domain-object');
+    },
+    getComposableDomainObject(event) {
+      let serializedDomainObject = event.dataTransfer.getData('openmct/composable-domain-object');
 
-            if (elemToStyle !== undefined) {
-                elemToStyle.dataset.font = newFont;
-            }
+      return JSON.parse(serializedDomainObject);
+    },
+    clearData(domainObject) {
+      if (domainObject) {
+        let clearKeyString = this.openmct.objects.makeKeyString(domainObject.identifier);
+        let currentObjectKeyString = this.openmct.objects.makeKeyString(
+          this.domainObject.identifier
+        );
+
+        if (clearKeyString === currentObjectKeyString) {
+          if (this.currentView.onClearData) {
+            this.currentView.onClearData();
+          }
+        }
+      } else {
+        if (this.currentView.onClearData) {
+          this.currentView.onClearData();
         }
+      }
+    },
+    performContextAction(...args) {
+      if (this?.currentView?.contextAction) {
+        this.currentView.contextAction(...args);
+      }
+    },
+    isEditingAllowed() {
+      let browseObject = this.openmct.layout.$refs.browseObject.domainObject;
+      let objectPath = this.currentObjectPath || this.objectPath;
+      let parentObject = objectPath[1];
+
+      return [browseObject, parentObject, this.domainObject].every(
+        (object) => object && !object.locked
+      );
+    },
+    setFontSize(newSize) {
+      let elemToStyle = this.getStyleReceiver();
+
+      if (elemToStyle !== undefined) {
+        elemToStyle.dataset.fontSize = newSize;
+      }
+    },
+    setFont(newFont) {
+      let elemToStyle = this.getStyleReceiver();
+
+      if (elemToStyle !== undefined) {
+        elemToStyle.dataset.font = newFont;
+      }
     }
+  }
 };
 </script>
-
diff --git a/src/ui/components/ProgressBar.vue b/src/ui/components/ProgressBar.vue
index 547d66f6ca9..00cef7c8a75 100644
--- a/src/ui/components/ProgressBar.vue
+++ b/src/ui/components/ProgressBar.vue
@@ -1,34 +1,58 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div class="c-progress-bar">
-    <div class="c-progress-bar__holder">
-        <div
-            class="c-progress-bar__bar"
-            :class="{'--indeterminate': model.progressPerc === 'unknown'}"
-            :style="styleBarWidth"
-        ></div>
-    </div>
+  <div class="c-progress-bar">
     <div
-        v-if="model.progressText !== undefined"
-        class="c-progress-bar__text"
-    >
-        <span v-if="model.progressPerc > 0">{{ model.progressPerc }}% complete.</span>
-        {{ model.progressText }}
+      class="c-progress-bar__bar"
+      :class="{ '--indeterminate': !progressPerc }"
+      :style="styleBarWidth"
+      role="progressbar"
+      :aria-valuenow="progressPerc"
+      aria-valuemin="0"
+      aria-valuemax="100"
+    ></div>
+    <div v-if="progressText !== ''" class="c-progress-bar__text">
+      <span v-if="progressPerc > 0">{{ progressPerc }}% complete.</span>
+      {{ progressText }}
     </div>
-</div>
+  </div>
 </template>
 
 <script>
 export default {
-    props: {
-        model: {
-            type: Object,
-            required: true
-        }
+  props: {
+    progressPerc: {
+      type: Number,
+      default: 0
     },
-    computed: {
-        styleBarWidth() {
-            return `width: ${this.model.progressPerc}%;`;
-        }
+    progressText: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    styleBarWidth() {
+      return this.progressPerc ? `width: ${this.progressPerc}%;` : '';
     }
+  }
 };
 </script>
diff --git a/src/ui/components/SearchComponent.vue b/src/ui/components/SearchComponent.vue
new file mode 100644
index 00000000000..0dee40984ad
--- /dev/null
+++ b/src/ui/components/SearchComponent.vue
@@ -0,0 +1,67 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="c-search" v-bind="$attrs" :class="{ 'is-active': active }">
+    <input
+      class="c-search__input"
+      aria-label="Search Input"
+      tabindex="0"
+      type="search"
+      :value="value"
+      v-bind="$attrs"
+      @click="() => $emit('click')"
+      @input="($event) => $emit('input', $event.target.value)"
+    />
+    <a v-if="value" class="c-search__clear-input icon-x-in-circle" @click="clearInput"></a>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['input', 'clear', 'click'],
+  data() {
+    return {
+      active: false
+    };
+  },
+  watch: {
+    value(inputValue) {
+      this.active = inputValue.length > 0;
+    }
+  },
+  methods: {
+    clearInput() {
+      // Clear the user's input and set 'active' to false
+      this.$emit('clear', '');
+      this.active = false;
+    }
+  }
+};
+</script>
diff --git a/src/ui/components/TimeSystemAxis.vue b/src/ui/components/TimeSystemAxis.vue
index d8f30e6f136..c72511709fb 100644
--- a/src/ui/components/TimeSystemAxis.vue
+++ b/src/ui/components/TimeSystemAxis.vue
@@ -1,15 +1,35 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div ref="axisHolder"
-     class="c-timesystem-axis"
->
+  <div ref="axisHolder" class="c-timesystem-axis">
     <div class="nowMarker"><span class="icon-arrow-down"></span></div>
-</div>
+  </div>
 </template>
 
 <script>
-import * as d3Selection from 'd3-selection';
-import * as d3Axis from 'd3-axis';
-import * as d3Scale from 'd3-scale';
+import { axisTop } from 'd3-axis';
+import { scaleLinear, scaleUtc } from 'd3-scale';
+import { select } from 'd3-selection';
+
 import utcMultiTimeFormat from '@/plugins/timeConductor/utcMultiTimeFormat';
 
 //TODO: UI direction needed for the following property values
@@ -20,147 +40,140 @@ const PIXELS_PER_TICK_WIDE = 200;
 //This offset needs to be re-considered
 
 export default {
-    inject: ['openmct', 'domainObject'],
-    props: {
-        bounds: {
-            type: Object,
-            default() {
-                return {};
-            }
-        },
-        timeSystem: {
-            type: Object,
-            default() {
-                return {};
-            }
-        },
-        contentHeight: {
-            type: Number,
-            default() {
-                return 0;
-            }
-        },
-        renderingEngine: {
-            type: String,
-            default() {
-                return 'svg';
-            }
-        },
-        offset: {
-            type: Number,
-            default() {
-                return 0;
-            }
-        }
+  inject: ['openmct', 'domainObject'],
+  props: {
+    bounds: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    timeSystem: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    contentHeight: {
+      type: Number,
+      default() {
+        return 0;
+      }
     },
-    watch: {
-        bounds(newBounds) {
-            this.drawAxis(newBounds, this.timeSystem);
-        },
-        timeSystem(newTimeSystem) {
-            this.drawAxis(this.bounds, newTimeSystem);
-        }
+    renderingEngine: {
+      type: String,
+      default() {
+        return 'svg';
+      }
     },
-    mounted() {
-        if (this.renderingEngine === 'svg') {
-            this.useSVG = true;
-        }
-
-        this.container = d3Selection.select(this.$refs.axisHolder);
-        this.svgElement = this.container.append("svg:svg");
-        // draw x axis with labels. CSS is used to position them.
-        this.axisElement = this.svgElement.append("g")
-            .attr("class", "axis")
-            .attr('font-size', '1.3em')
-            .attr("transform", "translate(0,20)");
+    offset: {
+      type: Number,
+      default() {
+        return 0;
+      }
+    }
+  },
+  watch: {
+    bounds(newBounds) {
+      this.drawAxis(newBounds, this.timeSystem);
+    },
+    timeSystem(newTimeSystem) {
+      this.drawAxis(this.bounds, newTimeSystem);
+    },
+    contentHeight() {
+      this.updateNowMarker();
+    }
+  },
+  mounted() {
+    if (this.renderingEngine === 'svg') {
+      this.useSVG = true;
+    }
 
+    this.container = select(this.$refs.axisHolder);
+    this.svgElement = this.container.append('svg:svg');
+    // draw x axis with labels. CSS is used to position them.
+    this.axisElement = this.svgElement
+      .append('g')
+      .attr('class', 'axis')
+      .attr('font-size', '1.3em')
+      .attr('transform', 'translate(0,20)');
+
+    this.setDimensions();
+    this.drawAxis(this.bounds, this.timeSystem);
+    this.resizeTimer = setInterval(this.resize, RESIZE_POLL_INTERVAL);
+  },
+  unmounted() {
+    clearInterval(this.resizeTimer);
+  },
+  methods: {
+    resize() {
+      if (this.$refs.axisHolder.clientWidth !== this.width) {
         this.setDimensions();
         this.drawAxis(this.bounds, this.timeSystem);
-        this.resizeTimer = setInterval(this.resize, RESIZE_POLL_INTERVAL);
+        this.updateNowMarker();
+      }
+    },
+    updateNowMarker() {
+      let nowMarker = this.$el.querySelector('.nowMarker');
+      if (nowMarker) {
+        nowMarker.classList.remove('hidden');
+        nowMarker.style.height = this.contentHeight + 'px';
+        const nowTimeStamp = this.openmct.time.now();
+        const now = this.xScale(nowTimeStamp);
+        nowMarker.style.left = now + this.offset + 'px';
+      }
+    },
+    setDimensions() {
+      const axisHolder = this.$refs.axisHolder;
+      this.width = axisHolder.clientWidth;
+      this.offsetWidth = this.width - this.offset;
+
+      this.height = Math.round(axisHolder.getBoundingClientRect().height);
+
+      if (this.useSVG) {
+        this.svgElement.attr('width', this.width);
+        this.svgElement.attr('height', this.height);
+      } else {
+        this.svgElement.attr('height', 50);
+      }
     },
-    destroyed() {
-        clearInterval(this.resizeTimer);
+    drawAxis(bounds, timeSystem) {
+      let viewBounds = Object.create(bounds);
+
+      this.setScale(viewBounds, timeSystem);
+      this.setAxis(viewBounds);
+      this.axisElement.call(this.xAxis);
+      this.updateNowMarker();
     },
-    methods: {
-        resize() {
-            if (this.$refs.axisHolder.clientWidth !== this.width) {
-                this.setDimensions();
-                this.drawAxis(this.bounds, this.timeSystem);
-                this.updateNowMarker();
-            }
-        },
-        updateNowMarker() {
-            if (this.openmct.time.clock() === undefined) {
-                let nowMarker = document.querySelector('.nowMarker');
-                if (nowMarker) {
-                    nowMarker.parentNode.removeChild(nowMarker);
-                }
-            } else {
-                let nowMarker = document.querySelector('.nowMarker');
-                if (nowMarker) {
-                    const svgEl = d3Selection.select(this.svgElement).node();
-                    let height = svgEl.style('height').replace('px', '');
-                    height = Number(height) + this.contentHeight;
-                    nowMarker.style.height = height + 'px';
-                    const now = this.xScale(Date.now());
-                    nowMarker.style.left = now + this.offset + 'px';
-                }
-            }
-        },
-        setDimensions() {
-            const axisHolder = this.$refs.axisHolder;
-            this.width = axisHolder.clientWidth;
-            this.offsetWidth = this.width - this.offset;
-
-            this.height = Math.round(axisHolder.getBoundingClientRect().height);
-
-            if (this.useSVG) {
-                this.svgElement.attr("width", this.width);
-                this.svgElement.attr("height", this.height);
-            } else {
-                this.svgElement.attr("height", 50);
-            }
-        },
-        drawAxis(bounds, timeSystem) {
-            this.setScale(bounds, timeSystem);
-            this.setAxis(bounds);
-            this.axisElement.call(this.xAxis);
-            this.updateNowMarker();
-
-        },
-        setScale(bounds, timeSystem) {
-            if (!this.width) {
-                return;
-            }
-
-            if (timeSystem === undefined) {
-                timeSystem = this.openmct.time.timeSystem();
-            }
-
-            if (timeSystem.isUTCBased) {
-                this.xScale = d3Scale.scaleUtc();
-                this.xScale.domain(
-                    [new Date(bounds.start), new Date(bounds.end)]
-                );
-            } else {
-                this.xScale = d3Scale.scaleLinear();
-                this.xScale.domain(
-                    [bounds.start, bounds.end]
-                );
-            }
-
-            this.xScale.range([PADDING, this.offsetWidth - PADDING * 2]);
-        },
-        setAxis() {
-            this.xAxis = d3Axis.axisTop(this.xScale);
-            this.xAxis.tickFormat(utcMultiTimeFormat);
-
-            if (this.width > 1800) {
-                this.xAxis.ticks(this.offsetWidth / PIXELS_PER_TICK_WIDE);
-            } else {
-                this.xAxis.ticks(this.offsetWidth / PIXELS_PER_TICK);
-            }
-        }
+    setScale(bounds, timeSystem) {
+      if (!this.width) {
+        return;
+      }
+
+      if (timeSystem === undefined) {
+        timeSystem = this.openmct.time.getTimeSystem();
+      }
+
+      if (timeSystem.isUTCBased) {
+        this.xScale = scaleUtc();
+        this.xScale.domain([new Date(bounds.start), new Date(bounds.end)]);
+      } else {
+        this.xScale = scaleLinear();
+        this.xScale.domain([bounds.start, bounds.end]);
+      }
+
+      this.xScale.range([PADDING, this.offsetWidth - PADDING * 2]);
+    },
+    setAxis() {
+      this.xAxis = axisTop(this.xScale);
+      this.xAxis.tickFormat(utcMultiTimeFormat);
+
+      if (this.width > 1800) {
+        this.xAxis.ticks(this.offsetWidth / PIXELS_PER_TICK_WIDE);
+      } else {
+        this.xAxis.ticks(this.offsetWidth / PIXELS_PER_TICK);
+      }
     }
+  }
 };
 </script>
diff --git a/src/ui/components/ToggleSwitch.vue b/src/ui/components/ToggleSwitch.vue
index 65e476abc8c..39fb501977b 100644
--- a/src/ui/components/ToggleSwitch.vue
+++ b/src/ui/components/ToggleSwitch.vue
@@ -1,44 +1,61 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div class="c-toggle-switch">
+  <div class="c-toggle-switch">
     <label class="c-toggle-switch__control">
-        <input
-            :id="id"
-            type="checkbox"
-            :checked="checked"
-            @change="onUserSelect($event)"
-        >
-        <span class="c-toggle-switch__slider"></span>
+      <input :id="id" type="checkbox" :checked="checked" @change="onUserSelect($event)" />
+      <span class="c-toggle-switch__slider" role="switch" :aria-label="name"></span>
     </label>
-    <div
-        v-if="label && label.length"
-        class="c-toggle-switch__label"
-    >
-        {{ label }}
+    <div v-if="label && label.length" class="c-toggle-switch__label">
+      {{ label }}
     </div>
-</div>
+  </div>
 </template>
 
 <script>
-
 export default {
-    inject: ['openmct'],
-    props: {
-        id: {
-            type: String,
-            required: true
-        },
-        label: {
-            type: String,
-            required: false,
-            default: ''
-        },
-        checked: Boolean
+  inject: ['openmct'],
+  props: {
+    id: {
+      type: String,
+      required: true
     },
-    methods: {
-        onUserSelect(event) {
-            this.$emit('change', event.target.checked);
-        }
+    label: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    name: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    checked: Boolean
+  },
+  emits: ['change'],
+  methods: {
+    onUserSelect(event) {
+      this.$emit('change', event.target.checked);
     }
+  }
 };
-
 </script>
diff --git a/src/ui/components/ViewControl.vue b/src/ui/components/ViewControl.vue
new file mode 100644
index 00000000000..b6799f7b91b
--- /dev/null
+++ b/src/ui/components/ViewControl.vue
@@ -0,0 +1,72 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <span
+    :class="[controlClass, { 'c-disclosure-triangle--expanded': value }, { 'is-enabled': enabled }]"
+    tabindex="0"
+    role="button"
+    :aria-label="ariaLabelValue"
+    :aria-expanded="value ? 'true' : 'false'"
+    @click="handleClick"
+    @keydown.enter="handleClick"
+  ></span>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    enabled: {
+      // Provided to allow the view-control to still occupy space without displaying a control icon.
+      // Used as such in the tree - when a node doesn't have children, set disabled to true.
+      type: Boolean,
+      default: false
+    },
+    controlClass: {
+      type: String,
+      default: 'c-disclosure-triangle'
+    },
+    domainObject: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  emits: ['input'],
+  computed: {
+    ariaLabelValue() {
+      const name = this.domainObject.name ? ` ${this.domainObject.name}` : '';
+      const type = this.domainObject.type ? ` ${this.domainObject.type}` : '';
+
+      return `${this.value ? 'Collapse' : 'Expand'}${name}${type}`;
+    }
+  },
+  methods: {
+    handleClick(event) {
+      event.stopPropagation();
+      this.$emit('input', !this.value);
+    }
+  }
+};
+</script>
diff --git a/src/ui/components/contextMenuDropDown.vue b/src/ui/components/contextMenuDropDown.vue
deleted file mode 100644
index 2546a7e8e33..00000000000
--- a/src/ui/components/contextMenuDropDown.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-<div
-    class="c-so-view__context-actions c-disclosure-button"
-    @click="showContextMenu"
-></div>
-</template>
-
-<script>
-import contextMenu from '../mixins/context-menu-gesture';
-
-export default {
-    mixins: [contextMenu],
-    props: {
-        objectPath: {
-            type: Array,
-            required: true
-        }
-    }
-};
-</script>
-
diff --git a/src/ui/components/object-frame.scss b/src/ui/components/object-frame.scss
index 36b9188ff6e..13a925ff50b 100644
--- a/src/ui/components/object-frame.scss
+++ b/src/ui/components/object-frame.scss
@@ -1,148 +1,162 @@
 .c-so-view {
+  display: flex;
+  flex-direction: column;
+
+  /*************************** HEADER */
+  &__header {
+    flex: 0 0 auto;
     display: flex;
-    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: $interiorMarginSm;
+    overflow: hidden;
+    padding: 3px;
+    @include smallerControlButtons; // Make button in frame headers a bit smaller
 
-    /*************************** HEADER */
-    &__header {
-        flex: 0 0 auto;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: $interiorMarginSm;
-        overflow: hidden;
-        padding: 3px;
-
-        .c-object-label {
-            font-size: 1.05em;
-            &__type-icon {
-                opacity: $objectLabelTypeIconOpacity;
-            }
-
-            &__name {
-                filter: $objectLabelNameFilter;
-            }
-        }
-    }
+    .c-object-label {
+      font-size: 1.05em;
+      min-width: 20%;
 
-    &:not(.c-so-view--no-frame) {
-        border: $browseFrameBorder;
-        padding: 0 $interiorMarginSm;
+      &__type-icon {
+        opacity: $objectLabelTypeIconOpacity;
+      }
 
-        .is-editing & {
-            background: rgba($colorBodyBg, 0.8);
-        }
+      &__name {
+        color: $objectLabelNameColorFg;
+      }
     }
+  }
 
-    /*************************** FRAME CONTROLS */
-    &__frame-controls {
-        display: flex;
-        flex: 0 0 auto;
+  &:not(.c-so-view--no-frame) {
+    border: $browseFrameBorder;
+    padding: 0 $interiorMarginSm;
 
-        &__btns,
-        &__more {
-            flex: 0 0 auto;
-        }
+    .is-editing & {
+      background: rgba($colorBodyBg, 0.8);
+    }
+  }
 
-        .is-in-small-container &,
-        .c-fl-frame & {
-            [class*="__label"] {
-                // button labels
-                display: none;
+  /*************************** FRAME CONTROLS */
+  &__frame-controls {
+    display: flex;
+    flex: 0 1 auto;
+    overflow: hidden;
 
-            }
-        }
+    &__btns,
+    &__more {
+      flex: 0 0 auto;
     }
 
-    /*************************** HIDDEN FRAME */
-    &--no-frame {
-        > .c-so-view__header {
-            visibility: hidden;
-            pointer-events: none;
-            position: absolute;
-            top: 0; right: 0; bottom: auto; left: 0;
-            z-index: 2;
-
-            .c-object-label {
-                visibility: hidden;
-            }
-
-            .c-so-view__frame-controls {
-                background: $frameControlsColorBg;
-                border-radius: $controlCr;
-                box-shadow: $frameControlsShdw;
-                padding: 1px;
-                pointer-events: all;
-
-                .c-icon-button {
-                    color: $frameControlsColorFg;
-
-                    &:hover {
-                        background: rgba($frameControlsColorFg, 0.3);
-                    }
-                }
-
-                &__btns {
-                    display: none;
-                }
-
-                &:hover {
-                    [class*="__btns"] {
-                        display: block;
-                    }
-                }
-
-                [class*="__label"] {
-                    // button labels
-                    display: none;
-
-                }
-            }
+    .--width-less-than-220 &,
+    .--width-less-than-600 & {
+      [class*='__label'] {
+        // button labels
+        display: none !important;
+      }
+    }
+  }
+
+  /*************************** HIDDEN FRAME */
+  &--no-frame {
+    > .c-so-view__header {
+      visibility: hidden;
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: auto;
+      left: 0;
+      z-index: 10;
+
+      .c-object-label {
+        visibility: hidden;
+      }
+
+      .c-so-view__frame-controls {
+        background: $frameControlsColorBg;
+        border-radius: $controlCr;
+        box-shadow: $frameControlsShdw;
+        padding: 1px;
+        pointer-events: all;
+
+        .c-icon-button {
+          color: $frameControlsColorFg;
+
+          &:hover {
+            background: rgba($frameControlsColorFg, 0.3);
+          }
         }
-        &.c-so-view--layout {
-            // For sub-layouts with hidden frames, completely hide the header to avoid overlapping buttons
-            > .c-so-view__header {
-                display: none;
-            }
+
+        &__btns {
+          display: none;
         }
 
-        /* HOVERS */
         &:hover {
-            > .c-so-view__header {
-                visibility: visible;
-            }
+          [class*='__btns'] {
+            display: block;
+          }
         }
 
-        &[class*='is-status'] {
-            border: $borderMissing;
+        [class*='__label'] {
+          // button labels
+          display: none;
         }
+      }
     }
 
-    /*************************** OBJECT VIEW */
-    &__object-view {
-        flex: 1 1 auto;
-        height: 0; // Chrome 73 overflow bug fix
-        overflow: auto;
+    &.c-so-view--flexible-layout,
+    &.c-so-view--layout {
+      // For sub-layouts with hidden frames, completely hide the header to avoid overlapping buttons
+      > .c-so-view__header {
+        display: none;
+      }
+    }
 
-        .u-fills-container {
-            // Expand component types that fill a container
-            @include abs();
-        }
+    /* HOVERS */
+    &:hover {
+      > .c-so-view__header {
+        visibility: visible;
+      }
     }
 
-    @include smallerControlButtons;
+    &[class*='is-status'] {
+      border: $borderMissing;
+    }
+  }
+
+  /*************************** OBJECT VIEW */
+  &__object-view {
+    flex: 1 1 auto;
+    height: 0; // Chrome 73 overflow bug fix
+    overflow: auto;
+    //To accommodate independent time conductor controls
+    display: flex;
+    flex-direction: column;
 
-    &.has-complex-content {
-        > .c-so-view__view-large { display: block; }
+    .u-fills-container {
+      // Expand component types that fill a container
+      @include abs();
     }
+  }
 
-    &.is-status--missing {
-        border: $borderMissing;
+  &.has-complex-content {
+    > .c-so-view__view-large {
+      display: block;
     }
+  }
+
+  &.is-status--missing {
+    border: $borderMissing;
+  }
+
+  // Leave for debugging
+  //&.--width-less-than-600 { background: rgba(orange, 0.2) !important; }
+  //&.--width-less-than-220 { background: rgba(red, 0.2) !important; }
 }
 
 .l-angular-ov-wrapper {
-    // This element is the recipient for object styling; cannot be display: contents
-    overflow: hidden;
-    display: block;
-    height: 100%;
+  // This element is the recipient for object styling; cannot be display: contents
+  overflow: hidden;
+  display: block;
+  height: 100%;
 }
diff --git a/src/ui/components/object-label.scss b/src/ui/components/object-label.scss
index 09acf711f77..15bf1dedf90 100644
--- a/src/ui/components/object-label.scss
+++ b/src/ui/components/object-label.scss
@@ -1,69 +1,94 @@
 .c-object-label {
-    // <a> tag and draggable element that holds type icon and name.
-    // Used mostly in trees and lists
-    display: flex;
-    align-items: baseline; // Provides better vertical alignment than center
-    flex: 0 1 auto;
-    overflow: hidden;
-    white-space: nowrap;
+  // <a> tag and draggable element that holds type icon and name.
+  // Used mostly in trees and lists
+  @include ellipsize();
+  display: flex;
+  align-items: center;
+  flex: 0 1 auto;
 
-    > * + * { margin-left: $interiorMargin; }
+  > * + * {
+    margin-left: $interiorMargin;
+  }
 
-    &__name {
-        @include ellipsize();
-        display: inline;
+  &.is-status--draft {
+    .c-object-label__type-icon {
+      &:after {
+        color: $colorStatusAlert;
+        font-family: symbolsfont;
+        content: $glyph-icon-draft;
+        margin-left: $interiorMarginSm;
+      }
     }
+  }
 
-    &__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: $objectLabelTypeIconOpacity;
-    }
+  &__name {
+    @include ellipsize();
+    color: $objectLabelNameColorFg;
+    display: inline;
+    padding: 1px 0;
+  }
+
+  &__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: $objectLabelTypeIconOpacity;
+  }
+
+  .is-status__indicator {
+    position: absolute;
+    right: -3px;
+    top: -3px;
+    transform: scale(0.5);
+  }
 
-    .is-status__indicator {
-        position: absolute;
-        right: -3px;
-        top: -3px;
-        transform: scale(0.5);
+  &.is-status--missing,
+  &.is-status--suspect {
+    [class*='__type-icon'] {
+      &:before,
+      &:after {
+        opacity: $opacityMissing;
+      }
     }
+  }
 
-    &.is-status--missing,
-    &.is-status--suspect {
-        [class*='__type-icon'] {
-            &:before,
-            &:after {
-                opacity: $opacityMissing;
-            }
-        }
+  &.is-status--notebook-default {
+    &:after {
+      content: $glyph-icon-notebook-page;
+      display: block;
+      margin-left: $interiorMargin;
     }
+  }
 
-    &.is-status--notebook-default {
-        &:after {
-            content: $glyph-icon-notebook-page;
-            display: block;
-            margin-left: $interiorMargin;
-        }
+  &.is-status--current {
+    &:after {
+      content: $glyph-icon-asterisk;
+      display: block;
+      margin-left: $interiorMargin;
+      font-family: symbolsfont;
     }
+  }
 }
 
 .c-tree .c-object-label {
-    border-radius: $controlCr;
-    padding: $interiorMarginSm 1px;
+  border-radius: $controlCr;
+  padding: $interiorMarginSm 1px;
 
-    > * + * { margin-left: $interiorMarginSm; }
+  > * + * {
+    margin-left: $interiorMarginSm;
+  }
 
-    &__name {
-        display: inline;
-        width: 100%;
-    }
+  &__name {
+    display: inline;
+    width: 100%;
+  }
 
-    &__type-icon {
-        color: $colorItemTreeIcon;
-        font-size: 1.25em;
-        margin-right: $interiorMarginSm;
-        opacity: 1;
-        width: $treeTypeIconW;
-    }
+  &__type-icon {
+    color: $colorItemTreeIcon;
+    font-size: 1.25em;
+    margin-right: $interiorMarginSm;
+    opacity: 1;
+    min-width: $treeTypeIconW;
+  }
 }
diff --git a/src/ui/components/progress-bar.scss b/src/ui/components/progress-bar.scss
index ce270bdbd86..4fd1052072e 100644
--- a/src/ui/components/progress-bar.scss
+++ b/src/ui/components/progress-bar.scss
@@ -1,43 +1,35 @@
 /******************************************************** PROGRESS BAR */
-@keyframes progress {
-    100% { background-position: $progressAnimW center; }
-}
-
-@mixin progressAnim($c1, $c2, $size) {
-    $edge: 20%;
-    background-image: linear-gradient(-90deg,
-            $c1 0%, $c2 $edge,
-            $c2 $edge, $c1 100%
-    );
-    background-position: 0 center;
-    background-repeat: repeat-x;
-    background-size: $size 100%;
+@keyframes progressIndeterminate {
+  0% {
+    left: 0;
+    width: 0;
+  }
+  70% {
+    left: 0;
+    width: 100%;
+    opacity: 1;
+  }
+  100% {
+    left: 100%;
+    opacity: 0;
+  }
 }
 
 .c-progress-bar {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-
-    > * + * {
-        margin-top: $interiorMargin;
-    }
-
-    &__holder {
-        background: $colorProgressBarHolder;
-        box-shadow: inset rgba(black, 0.4) 0 0.25px 3px;
-        flex: 1 1 auto;
-        padding: 1px;
-    }
+  background: $colorProgressBarHolder;
+  display: block;
+  min-height: $progressBarMinH;
+  overflow: hidden;
+  width: 100%;
 
-    &__bar {
-        @include progressAnim($colorProgressBar, lighten($colorProgressBar, 10%), $progressAnimW);
-        animation: progress 1000ms linear infinite;
-        min-height: $progressBarMinH;
-        height: 100%;
+  &__bar {
+    background: $colorProgressBar;
+    height: 100%;
+    min-height: $progressBarMinH;
 
-        &.--indeterminate {
-            width: 100% !important;
-        }
+    &.--indeterminate {
+      position: absolute;
+      animation: progressIndeterminate 1.5s ease-in infinite;
     }
+  }
 }
diff --git a/src/ui/components/search.scss b/src/ui/components/search.scss
index fe615c6e8af..34b877ad27f 100644
--- a/src/ui/components/search.scss
+++ b/src/ui/components/search.scss
@@ -1,75 +1,99 @@
 @mixin visibleRegexButton {
-    opacity: 1;
-    padding: 1px 3px;
-    width: 24px;
+  opacity: 1;
+  padding: 1px 3px;
+  min-width: 24px;
 }
 
 .c-search {
-    @include wrappedInput();
-    padding-top: 2px;
-    padding-bottom: 2px;
+  @include wrappedInput();
+  padding-top: 2px;
+  padding-bottom: 2px;
 
-    &:before {
-        // Mag glass icon
-        content: $glyph-icon-magnify;
+  &:before {
+    // Mag glass icon
+    content: $glyph-icon-magnify;
+    body.mobile & { // Make search icon stand out in mobile
+      opacity: 1;
     }
+  }
 
-    &__use-regex {
-        // Button
-        $c: $colorBodyFg;
-        background: rgba($c, 0.2);
-        border: 1px solid rgba($c, 0.3);
-        color: $c;
-        border-radius: $controlCr;
-        font-weight: bold;
-        letter-spacing: 1px;
-        font-size: 0.8em;
-        margin-left: $interiorMarginSm;
-        min-width: 0;
-        opacity: 0;
-        order: 2;
-        overflow: hidden;
-        padding: 1px 0;
-        transform-origin: left;
-        transition: $transOut;
-        width: 0;
+  &__use-regex {
+    // Button
+    $c: $colorBodyFg;
+    background: rgba($c, 0.2);
+    border: 1px solid rgba($c, 0.3);
+    color: $c;
+    border-radius: $controlCr;
+    font-weight: bold;
+    letter-spacing: 1px;
+    font-size: 0.8em;
+    margin-left: $interiorMarginSm;
+    min-width: 0;
+    opacity: 0;
+    order: 2;
+    overflow: hidden;
+    padding: 1px 0;
+    transform-origin: left;
+    @include transition($prop: min-width, $dur: $transOutTime);
+    width: 0;
 
-        &.is-active {
-            $c: $colorBtnActiveBg;
-            @include visibleRegexButton();
-            background: rgba($c, 0.3);
-            border-color: $c;
-            color: $c;
-        }
+    &.is-active {
+      $c: $colorBtnActiveBg;
+      @include visibleRegexButton();
+      background: rgba($c, 0.3);
+      border-color: $c;
+      color: $c;
     }
+  }
 
-    &__clear-input {
-        display: none;
-        order: 99;
-        padding: 1px 0;
+  &__clear-input {
+    display: none;
+    order: 99;
+    padding: 1px 0;
+    body.mobile & {
+      display: block;
     }
 
-    &.is-active {
-        .c-search__use-regex {
-            margin-left: 0;
-        }
+  }
+
+  &.is-active {
+    body.mobile & { // In mobile, persist the expanded search bar instead of collapsing upon clicking away
+      background-color: rgba($colorHeadFg, 0.2) !important; 
+      width: 50vw !important;
+    }
+    .c-search__use-regex {
+      margin-left: 0;
+    }
 
-        .c-search__clear-input {
-            display: block;
-        }
+    &:before {
+      width: 0;
+      body.mobile & {
+        width: auto;
+      }
     }
 
     input[type='text'],
     input[type='search'] {
-        margin-left: $interiorMargin;
-        order: 3;
-        text-align: left;
+      margin-left: 0;
     }
 
-    &:hover {
-        .c-search__use-regex {
-            @include visibleRegexButton();
-            transition: $transIn;
-        }
+    @include hover {
+      .c-search__clear-input {
+        display: block;
+      }
+    }
+  }
+
+  input[type='text'],
+  input[type='search'] {
+    margin-left: $interiorMargin;
+    order: 3;
+    text-align: left;
+  }
+
+  @include hover {
+    .c-search__use-regex {
+      @include visibleRegexButton();
     }
+  }
 }
diff --git a/src/ui/components/search.vue b/src/ui/components/search.vue
deleted file mode 100644
index 46d069bffa8..00000000000
--- a/src/ui/components/search.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-<div
-    class="c-search"
-    :class="{ 'is-active': active === true }"
->
-    <input
-        class="c-search__input"
-        tabindex="10000"
-        type="search"
-        v-bind="$attrs"
-        :value="value"
-        v-on="inputListeners"
-    >
-    <a
-        class="c-search__clear-input icon-x-in-circle"
-        @click="clearInput"
-    ></a>
-    <slot></slot>
-</div>
-</template>
-
-<script>
-/* Emits input and clear events */
-export default {
-    inheritAttrs: false,
-    props: {
-        value: {
-            type: String,
-            default: ''
-        }
-    },
-    data: function () {
-        return {
-            active: false
-        };
-    },
-    computed: {
-        inputListeners: function () {
-            let vm = this;
-
-            return Object.assign({},
-                this.$listeners,
-                {
-                    input: function (event) {
-                        vm.$emit('input', event.target.value);
-                        vm.active = (event.target.value.length > 0);
-                    }
-                }
-            );
-        }
-    },
-    watch: {
-        value(inputValue) {
-            if (!inputValue.length) {
-                this.clearInput();
-            }
-        }
-    },
-    methods: {
-        clearInput() {
-            // Clear the user's input and set 'active' to false
-            this.$emit('clear', '');
-            this.active = false;
-        }
-    }
-};
-</script>
diff --git a/src/ui/components/swim-lane/SwimLane.vue b/src/ui/components/swim-lane/SwimLane.vue
index 37baf0bcbda..1f2f33bb83b 100644
--- a/src/ui/components/swim-lane/SwimLane.vue
+++ b/src/ui/components/swim-lane/SwimLane.vue
@@ -1,75 +1,148 @@
-<template>
-<div class="u-contents"
-     :class="{'c-swimlane': !isNested}"
->
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
 
-    <div class="c-swimlane__lane-label c-object-label"
-         :class="{'c-swimlane__lane-label--span-cols': (!spanRowsCount && !isNested)}"
-         :style="gridRowSpan"
-    >
-        <div v-if="iconClass"
-             class="c-object-label__type-icon"
-             :class="iconClass"
-        >
-        </div>
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
 
-        <div class="c-object-label__name">
-            <slot name="label"></slot>
-        </div>
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div
+    ref="swimLane"
+    class="u-contents"
+    :class="[{ 'c-swimlane': !isNested }, statusClass]"
+    @mouseover.ctrl="showToolTip"
+    @mouseleave="hideToolTip"
+  >
+    <div
+      v-if="hideLabel === false"
+      class="c-swimlane__lane-label c-object-label"
+      :class="[swimlaneClass, statusClass]"
+      :style="gridRowSpan"
+    >
+      <div v-if="iconClass" class="c-object-label__type-icon" :class="iconClass">
+        <span
+          v-if="status"
+          class="is-status__indicator"
+          :aria-label="`This item is ${status}`"
+          :title="`This item is ${status}`"
+        ></span>
+      </div>
 
+      <div class="c-object-label__name">
+        <slot name="label"></slot>
+      </div>
     </div>
-    <div class="c-swimlane__lane-object"
-         :style="{'min-height': minHeight}"
-         :class="{'u-contents': showUcontents}"
+    <div
+      class="c-swimlane__lane-object"
+      :style="{ 'min-height': minHeight }"
+      :class="{ 'u-contents': showUcontents }"
     >
-        <slot name="object"></slot>
+      <slot name="object"></slot>
     </div>
-</div>
-
+  </div>
 </template>
 
 <script>
+import tooltipHelpers from '../../../api/tooltips/tooltipMixins.js';
+
 export default {
-    props: {
-        iconClass: {
-            type: String,
-            default() {
-                return '';
-            }
-        },
-        minHeight: {
-            type: String,
-            default() {
-                return '';
-            }
-        },
-        showUcontents: {
-            type: Boolean,
-            default() {
-                return false;
-            }
-        },
-        isNested: {
-            type: Boolean,
-            default() {
-                return false;
-            }
-        },
-        spanRowsCount: {
-            type: Number,
-            default() {
-                return 0;
-            }
-        }
+  mixins: [tooltipHelpers],
+  inject: ['openmct'],
+  props: {
+    iconClass: {
+      type: String,
+      default() {
+        return '';
+      }
+    },
+    status: {
+      type: String,
+      default() {
+        return '';
+      }
+    },
+    minHeight: {
+      type: String,
+      default() {
+        return '';
+      }
+    },
+    showUcontents: {
+      type: Boolean,
+      default() {
+        return false;
+      }
     },
-    computed: {
-        gridRowSpan() {
-            if (this.spanRowsCount) {
-                return `grid-row: span ${this.spanRowsCount}`;
-            } else {
-                return '';
-            }
-        }
+    isHidden: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    hideLabel: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    isNested: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    spanRowsCount: {
+      type: Number,
+      default() {
+        return 0;
+      }
+    },
+    domainObject: {
+      type: Object,
+      default: undefined
+    }
+  },
+  computed: {
+    gridRowSpan() {
+      if (this.spanRowsCount) {
+        return `grid-row: span ${this.spanRowsCount}`;
+      } else {
+        return '';
+      }
+    },
+
+    swimlaneClass() {
+      if (!this.spanRowsCount && !this.isNested) {
+        return 'c-swimlane__lane-label--span-cols';
+      }
+
+      return '';
+    },
+
+    statusClass() {
+      return this.status ? `is-status--${this.status}` : '';
+    }
+  },
+  methods: {
+    async showToolTip() {
+      const { BELOW } = this.openmct.tooltips.TOOLTIP_LOCATIONS;
+      this.buildToolTip(await this.getObjectPath(), BELOW, 'swimLane');
     }
+  }
 };
 </script>
diff --git a/src/ui/components/swim-lane/swimlane.scss b/src/ui/components/swim-lane/swimlane.scss
index 7349ae5c339..b138cab5bea 100644
--- a/src/ui/components/swim-lane/swimlane.scss
+++ b/src/ui/components/swim-lane/swimlane.scss
@@ -1,28 +1,62 @@
+/*****************************************************************************
+* Open MCT, Copyright (c) 2014-2024, United States Government
+* as represented by the Administrator of the National Aeronautics and Space
+* Administration. All rights reserved.
+*
+* Open MCT is licensed under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+* http://www.apache.org/licenses/LICENSE-2.0.
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+* License for the specific language governing permissions and limitations
+* under the License.
+*
+* Open MCT includes source code licensed under additional open source
+* licenses. See the Open Source Licenses file (LICENSES.md) included with
+* this source code distribution or the Licensing information page available
+* at runtime from the About dialog for additional information.
+*****************************************************************************/
+
 .c-swimlane {
-    display: grid;
-    grid-template-columns: 100px 100px 1fr;
-    grid-column-gap: 1px;
-    grid-row-gap: 1px;
-    margin-bottom: 1px;
-    width: 100%;
-
-    [class*='__lane-label'] {
-        background: rgba($colorBodyFg, 0.2);
-        color: $colorBodyFg;
-        padding: $interiorMarginSm;
-    }
+  display: grid;
+  grid-template-columns: 100px 100px 1fr;
+  grid-column-gap: 1px;
+  grid-row-gap: 1px;
+  margin-bottom: 1px;
+  width: 100%;
 
-    [class*='--span-cols'] {
-        grid-column: span 2;
-    }
+  &.is-status--draft {
+    background: rgba($colorAlert, 0.2);
+  }
 
-    &__lane-object {
-        background: rgba(black, 0.1);
+  [class*='__lane-label'] {
+    background: rgba($colorBodyFg, 0.2);
+    color: $colorBodyFg;
+    padding: $interiorMarginSm;
+  }
 
-        .c-plan {
-            display: contents;
-        }
+  [class*='--span-cols'] {
+    grid-column: span 2;
+  }
 
-        @include smallerControlButtons;
+  &__lane-object {
+    background: rgba(black, 0.1);
+
+    .c-plan {
+      display: contents;
     }
+
+    @include smallerControlButtons;
+  }
+
+  // Yet more brittle special case selecting...
+  .is-object-type-plan {
+    display: contents;
+  }
+  .is-object-type-gantt-chart {
+    display: contents;
+  }
 }
diff --git a/src/ui/components/timesystem-axis.scss b/src/ui/components/timesystem-axis.scss
index 93b2dbe9992..9e0329c59b1 100644
--- a/src/ui/components/timesystem-axis.scss
+++ b/src/ui/components/timesystem-axis.scss
@@ -1,42 +1,46 @@
 .c-timesystem-axis {
-    $h: 30px;
-    height: $h;
+  $h: 30px;
+  height: $h;
 
-    svg {
-        $lineC: rgba($colorBodyFg, 0.3) !important;
-        text-rendering: geometricPrecision;
-        width: 100%;
-        height: 100%;
+  svg {
+    $lineC: rgba($colorBodyFg, 0.3) !important;
+    text-rendering: geometricPrecision;
+    width: 100%;
+    height: 100%;
 
-        .domain {
-            stroke: $lineC;
-        }
+    .domain {
+      stroke: $lineC;
+    }
 
-        .tick {
-            line {
-                stroke: $lineC;
-            }
+    .tick {
+      line {
+        stroke: $lineC;
+      }
 
-            text {
-                // Tick labels
-                fill: $colorBodyFg;
-                paint-order: stroke;
-                font-weight: bold;
-            }
-        }
+      text {
+        // Tick labels
+        fill: $colorBodyFg;
+        paint-order: stroke;
+        font-weight: bold;
+      }
     }
+  }
+
+  .nowMarker {
+    width: 2px;
+    position: absolute;
+    z-index: 10;
+    background: gray;
 
-    .nowMarker {
-        width: 2px;
-        position: absolute;
-        z-index: 10;
-        background: gray;
+    &.hidden {
+      display: none;
+    }
 
-        & .icon-arrow-down {
-            font-size: large;
-            position: absolute;
-            top: -8px;
-            left: -8px;
-        }
+    & .icon-arrow-down {
+      font-size: large;
+      position: absolute;
+      top: -8px;
+      left: -8px;
     }
+  }
 }
diff --git a/src/ui/components/toggle-switch.scss b/src/ui/components/toggle-switch.scss
index 5ec9f0ef349..402af4c0826 100644
--- a/src/ui/components/toggle-switch.scss
+++ b/src/ui/components/toggle-switch.scss
@@ -1,63 +1,82 @@
+@use 'sass:math';
+
+@mixin toggleSwitch($d: 12px, $m: 2px, $bg: $colorBtnBg) {
+  $br: math.div($d, 1.5);
+
+  .c-toggle-switch__slider {
+    background: $bg;
+    border-radius: $br;
+    height: $d + ($m * 2);
+    width: $d * 2 + $m * 2;
+
+    &:before {
+      // Knob
+      border-radius: floor($br * 0.8);
+      box-shadow: rgba(black, 0.4) 0 0 2px;
+      height: $d;
+      width: $d;
+      top: $m;
+      left: $m;
+      right: auto;
+    }
+  }
+}
+
 .c-toggle-switch {
-    $d: 12px;
-    $m: 2px;
-    $br: $d/1.5;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+
+  &__control,
+  &__label {
+    flex: 0 0 auto;
+  }
+
+  &__control {
     cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    vertical-align: middle;
+    overflow: hidden;
+    display: block;
+  }
 
-    &__control,
-    &__label {
-        flex: 0 0 auto;
-    }
+  &__slider {
+    // Sits within __switch
+    display: inline-block;
+    position: relative;
 
-    &__control {
-        cursor: pointer;
-        overflow: hidden;
-        display: block;
+    &:before {
+      // Knob
+      background: $colorBtnFg; // TODO: make discrete theme constants for these colors
+      content: '';
+      display: block;
+      position: absolute;
+      transition: transform 100ms ease-in-out;
     }
+  }
 
-    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%);
-                }
-            }
-        }
-    }
+  &__label {
+    margin-left: $interiorMarginSm;
+    white-space: nowrap;
+  }
 
-    &__slider {
-        // Sits within __switch
-        background: $colorBtnBg; // TODO: make discrete theme constants for these colors
-        border-radius: $br;
-        display: inline-block;
-        height: $d + ($m*2);
-        position: relative;
-        width: $d*2 + $m*2;
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
 
+    &:checked {
+      + .c-toggle-switch__slider {
+        background: $colorKey; // TODO: make discrete theme constants for these colors
         &:before {
-            // Knob
-            background: $colorBtnFg; // TODO: make discrete theme constants for these colors
-            border-radius: floor($br * 0.8);
-            box-shadow: rgba(black, 0.4) 0 0 2px;
-            content: '';
-            display: block;
-            position: absolute;
-            height: $d; width: $d;
-            top: $m; left: $m; right: auto;
-            transition: transform 100ms ease-in-out;
+          transform: translateX(100%);
         }
+      }
     }
+  }
 
-    &__label {
-        margin-left: $interiorMarginSm;
-        white-space: nowrap;
-    }
+  @include toggleSwitch();
+}
+
+.c-toggle-switch--mini {
+  @include toggleSwitch($d: 9px, $m: 0px);
 }
diff --git a/src/ui/components/viewControl.vue b/src/ui/components/viewControl.vue
deleted file mode 100644
index d2af9f4531e..00000000000
--- a/src/ui/components/viewControl.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-<span
-    :class="[
-        controlClass,
-        { 'c-disclosure-triangle--expanded' : value },
-        {'is-enabled' : enabled }
-    ]"
-    @click="handleClick"
-></span>
-</template>
-
-<script>
-export default {
-    props: {
-        value: {
-            type: Boolean,
-            default: false
-        },
-        enabled: {
-            // Provided to allow the view-control to still occupy space without displaying a control icon.
-            // Used as such in the tree - when a node doesn't have children, set disabled to true.
-            type: Boolean,
-            default: false
-        },
-        controlClass: {
-            type: String,
-            default: 'c-disclosure-triangle'
-        }
-    },
-    methods: {
-        handleClick(event) {
-            event.stopPropagation();
-            this.$emit('input', !this.value);
-        }
-    }
-};
-</script>
diff --git a/src/ui/composables/edit.js b/src/ui/composables/edit.js
new file mode 100644
index 00000000000..90dd3a4d4ef
--- /dev/null
+++ b/src/ui/composables/edit.js
@@ -0,0 +1,43 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { ref } from 'vue';
+
+import { useEventEmitter } from './event.js';
+
+/**
+ * Provides a reactive `isEditing` property that reflects the current editing state of the
+ * application.
+ * @param {OpenMCT} openmct the Open MCT API
+ * @returns {{
+ *  isEditing: import('vue').Ref<boolean>
+ * }}
+ */
+export function useIsEditing(openmct) {
+  const isEditing = ref(openmct.editor.isEditing());
+
+  useEventEmitter(openmct.editor, 'isEditing', (_isEditing) => {
+    isEditing.value = _isEditing;
+  });
+
+  return { isEditing };
+}
diff --git a/src/ui/composables/event.js b/src/ui/composables/event.js
new file mode 100644
index 00000000000..f6d6e786c2b
--- /dev/null
+++ b/src/ui/composables/event.js
@@ -0,0 +1,77 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* eslint-disable func-style */
+
+import { isRef, onBeforeMount, onBeforeUnmount, onMounted, watch } from 'vue';
+
+/**
+ * Registers an event listener on the specified target and automatically removes it when the
+ * component is unmounted.
+ * This is a Vue composition API utility function.
+ * @param {EventTarget} target - The target to attach the event listener to.
+ * @param {string} event - The name of the event to listen for.
+ * @param {Function} handler - The callback function to execute when the event is triggered.
+ */
+export function useEventListener(target, event, handler) {
+  const addListener = (el) => {
+    if (el) {
+      el.addEventListener(event, handler);
+    }
+  };
+
+  const removeListener = (el) => {
+    if (el) {
+      el.removeEventListener(event, handler);
+    }
+  };
+
+  // If target is a reactive ref, watch it for changes
+  if (isRef(target)) {
+    watch(
+      target,
+      (newTarget, oldTarget) => {
+        if (newTarget !== oldTarget) {
+          removeListener(oldTarget);
+          addListener(newTarget);
+        }
+      },
+      { immediate: true }
+    );
+  } else {
+    // Otherwise use lifecycle hooks to add/remove listener
+    onMounted(() => addListener(target));
+    onBeforeUnmount(() => removeListener(target));
+  }
+}
+
+/**
+ * Registers an event listener on the specified EventEmitter instance and automatically removes it
+ * when the component is unmounted.
+ * This is a Vue composition API utility function.
+ * @param {import('eventemitter3').EventEmitter} emitter - The EventEmitter instance to attach the event listener to.
+ * @param {string} event - The name of the event to listen for.
+ * @param {Function} callback - The callback function to execute when the event is triggered.
+ */
+export function useEventEmitter(emitter, event, callback) {
+  onBeforeMount(() => emitter.on(event, callback));
+  onBeforeUnmount(() => emitter.off(event, callback));
+}
diff --git a/src/ui/composables/resize.js b/src/ui/composables/resize.js
new file mode 100644
index 00000000000..7a5e3601c39
--- /dev/null
+++ b/src/ui/composables/resize.js
@@ -0,0 +1,80 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* eslint-disable func-style */
+import { onBeforeUnmount, reactive } from 'vue';
+
+import throttle from '../../utils/throttle.js';
+import { useEventListener } from './event.js';
+
+/**
+ * A composable which provides a function to begin observing the size of the passed-in element,
+ * and a reactive object containing the width and height of the observed element. The ResizeObserver
+ * is automatically disconnected before the component is unmounted.
+ * @returns {{size: {width: number, height: number}, startObserving: (element: HTMLElement) => void}}
+ */
+export function useResizeObserver() {
+  const size = reactive({ width: 0, height: 0 });
+  let observer;
+
+  const startObserving = (element) => {
+    if (!element) {
+      return;
+    }
+
+    observer = new ResizeObserver((entries) => {
+      if (entries[0]) {
+        const { width, height } = entries[0].contentRect;
+        size.width = width;
+        size.height = height;
+      }
+    });
+
+    observer.observe(element);
+  };
+
+  onBeforeUnmount(() => {
+    if (observer) {
+      observer.disconnect();
+    }
+  });
+
+  return { size, startObserving };
+}
+
+/**
+ * A composable function which can be used to listen to and handle window resize events.
+ * Throttles the resize event to prevent performance issues.
+ * @param {number} [throttleMs=100] The number of milliseconds to throttle the resize event.
+ * @returns {Ref<{ width: number, height: number }>} windowSize
+ */
+export function useWindowResize(throttleMs = 100) {
+  const windowSize = reactive({ width: window.innerWidth, height: window.innerHeight });
+
+  const handleResize = throttle(() => {
+    windowSize.width = window.innerWidth;
+    windowSize.height = window.innerHeight;
+  }, throttleMs);
+
+  useEventListener(window, 'resize', handleResize);
+
+  return { windowSize };
+}
diff --git a/src/ui/inspector/ElementItem.vue b/src/ui/inspector/ElementItem.vue
deleted file mode 100644
index 7418abc14ff..00000000000
--- a/src/ui/inspector/ElementItem.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-<li
-    draggable="true"
-    @dragstart="emitDragStartEvent"
-    @dragenter="onDragenter"
-    @dragover="onDragover"
-    @dragleave="onDragleave"
-    @drop="emitDropEvent"
->
-    <div
-        class="c-tree__item c-elements-pool__item"
-        :class="{
-            'is-context-clicked': contextClickActive,
-            'hover': hover
-        }"
-    >
-        <span
-            class="c-elements-pool__grippy c-grippy c-grippy--vertical-drag"
-        ></span>
-        <object-label
-            :domain-object="elementObject"
-            :object-path="[elementObject, parentObject]"
-            @context-click-active="setContextClickState"
-        />
-    </div>
-</li>
-</template>
-
-<script>
-import ObjectLabel from '../components/ObjectLabel.vue';
-
-export default {
-    components: {
-        ObjectLabel
-    },
-    props: {
-        index: {
-            type: Number,
-            required: true,
-            default: () => {
-                return 0;
-            }
-        },
-        elementObject: {
-            type: Object,
-            required: true,
-            default: () => {
-                return {};
-            }
-        },
-        parentObject: {
-            type: Object,
-            required: true,
-            default: () => {
-                return {};
-            }
-        },
-        allowDrop: {
-            type: Boolean
-        }
-    },
-    data() {
-        return {
-            contextClickActive: false,
-            hover: false
-        };
-    },
-    methods: {
-        onDragover(event) {
-            event.preventDefault();
-        },
-        emitDropEvent(event) {
-            this.$emit('drop-custom', this.index);
-            this.hover = false;
-        },
-        emitDragStartEvent(event) {
-            this.$emit('dragstart-custom', this.index);
-        },
-        onDragenter(event) {
-            if (this.allowDrop) {
-                this.hover = true;
-                this.dragElement = event.target.parentElement;
-            }
-        },
-        onDragleave(event) {
-            if (event.target.parentElement === this.dragElement) {
-                this.hover = false;
-                delete this.dragElement;
-            }
-        },
-        setContextClickState(state) {
-            this.contextClickActive = state;
-        }
-    }
-};
-</script>
diff --git a/src/ui/inspector/ElementsPool.vue b/src/ui/inspector/ElementsPool.vue
deleted file mode 100644
index 7bce6ce4e72..00000000000
--- a/src/ui/inspector/ElementsPool.vue
+++ /dev/null
@@ -1,152 +0,0 @@
-<template>
-<div class="c-elements-pool">
-    <Search
-        class="c-elements-pool__search"
-        :value="currentSearch"
-        @input="applySearch"
-        @clear="applySearch"
-    />
-    <div
-        class="c-elements-pool__elements"
-    >
-        <ul
-            v-if="elements.length > 0"
-            id="inspector-elements-tree"
-            class="c-tree c-elements-pool__tree"
-        >
-            <element-item
-                v-for="(element, index) in elements"
-                :key="element.identifier.key"
-                :index="index"
-                :element-object="element"
-                :parent-object="parentObject"
-                :allow-drop="allowDrop"
-                @dragstart-custom="moveFrom(index)"
-                @drop-custom="moveTo(index)"
-            />
-            <li
-                class="js-last-place"
-                @drop="moveToIndex(elements.length)"
-            ></li>
-        </ul>
-        <div v-if="elements.length === 0">
-            No contained elements
-        </div>
-    </div>
-</div>
-</template>
-
-<script>
-import _ from 'lodash';
-import Search from '../components/search.vue';
-import ElementItem from './ElementItem.vue';
-
-export default {
-    components: {
-        'Search': Search,
-        'ElementItem': ElementItem
-    },
-    inject: ['openmct'],
-    data() {
-        return {
-            elements: [],
-            isEditing: this.openmct.editor.isEditing(),
-            parentObject: undefined,
-            currentSearch: '',
-            selection: [],
-            contextClickTracker: {},
-            allowDrop: false
-        };
-    },
-    mounted() {
-        let selection = this.openmct.selection.get();
-        if (selection && selection.length > 0) {
-            this.showSelection(selection);
-        }
-
-        this.openmct.selection.on('change', this.showSelection);
-        this.openmct.editor.on('isEditing', this.setEditState);
-    },
-    destroyed() {
-        this.openmct.editor.off('isEditing', this.setEditState);
-        this.openmct.selection.off('change', this.showSelection);
-
-        if (this.compositionUnlistener) {
-            this.compositionUnlistener();
-        }
-    },
-    methods: {
-        setEditState(isEditing) {
-            this.isEditing = isEditing;
-            this.showSelection(this.openmct.selection.get());
-        },
-        showSelection(selection) {
-            if (_.isEqual(this.selection, selection)) {
-                return;
-            }
-
-            this.selection = selection;
-            this.elements = [];
-            this.elementsCache = {};
-            this.listeners = [];
-            this.parentObject = selection && selection[0] && selection[0][0].context.item;
-
-            if (this.compositionUnlistener) {
-                this.compositionUnlistener();
-            }
-
-            if (this.parentObject) {
-                this.composition = this.openmct.composition.get(this.parentObject);
-
-                if (this.composition) {
-                    this.composition.load();
-
-                    this.composition.on('add', this.addElement);
-                    this.composition.on('remove', this.removeElement);
-                    this.composition.on('reorder', this.reorderElements);
-
-                    this.compositionUnlistener = () => {
-                        this.composition.off('add', this.addElement);
-                        this.composition.off('remove', this.removeElement);
-                        this.composition.off('reorder', this.reorderElements);
-                        delete this.compositionUnlistener;
-                    };
-                }
-            }
-        },
-        addElement(element) {
-            let keyString = this.openmct.objects.makeKeyString(element.identifier);
-            this.elementsCache[keyString] =
-                JSON.parse(JSON.stringify(element));
-            this.applySearch(this.currentSearch);
-        },
-        reorderElements() {
-            this.applySearch(this.currentSearch);
-        },
-        removeElement(identifier) {
-            let keyString = this.openmct.objects.makeKeyString(identifier);
-            delete this.elementsCache[keyString];
-            this.applySearch(this.currentSearch);
-        },
-        applySearch(input) {
-            this.currentSearch = input;
-            this.elements = this.parentObject.composition.map((id) =>
-                this.elementsCache[this.openmct.objects.makeKeyString(id)]
-            ).filter((element) => {
-                return element !== undefined
-                    && element.name.toLowerCase().search(this.currentSearch) !== -1;
-            });
-        },
-        moveTo(moveToIndex) {
-            if (this.allowDrop) {
-                this.composition.reorder(this.moveFromIndex, moveToIndex);
-                this.allowDrop = false;
-            }
-        },
-        moveFrom(index) {
-            this.allowDrop = true;
-            this.moveFromIndex = index;
-        }
-    }
-};
-</script>
diff --git a/src/ui/inspector/Inspector.vue b/src/ui/inspector/Inspector.vue
deleted file mode 100644
index 7ec6b021bb4..00000000000
--- a/src/ui/inspector/Inspector.vue
+++ /dev/null
@@ -1,156 +0,0 @@
-<template>
-<div class="c-inspector">
-    <object-name />
-    <div v-if="showStyles"
-         class="c-inspector__tabs c-tabs"
-    >
-        <div v-for="tabbedView in tabbedViews"
-             :key="tabbedView.key"
-             class="c-inspector__tab c-tab"
-             :class="{'is-current': isCurrent(tabbedView)}"
-             @click="updateCurrentTab(tabbedView)"
-        >
-            {{ tabbedView.name }}
-        </div>
-
-    </div>
-    <div class="c-inspector__content">
-        <multipane v-show="currentTabbedView.key === '__properties'"
-                   type="vertical"
-        >
-            <pane class="c-inspector__properties">
-                <properties />
-                <location />
-                <inspector-views />
-            </pane>
-            <pane
-                v-if="isEditing && hasComposition"
-                class="c-inspector__elements"
-                handle="before"
-                label="Elements"
-            >
-                <elements-pool />
-            </pane>
-        </multipane>
-        <multipane
-            v-show="currentTabbedView.key === '__styles'"
-            type="vertical"
-        >
-            <pane class="c-inspector__styles">
-                <StylesInspectorView />
-            </pane>
-            <pane
-                v-if="isEditing"
-                class="c-inspector__saved-styles"
-                handle="before"
-                label="Saved Styles"
-            >
-                <SavedStylesInspectorView :is-editing="isEditing" />
-            </pane>
-        </multipane>
-    </div>
-</div>
-</template>
-
-<script>
-import multipane from '../layout/multipane.vue';
-import pane from '../layout/pane.vue';
-import ElementsPool from './ElementsPool.vue';
-import Location from './Location.vue';
-import Properties from './Properties.vue';
-import ObjectName from './ObjectName.vue';
-import InspectorViews from './InspectorViews.vue';
-import _ from "lodash";
-import stylesManager from '@/ui/inspector/styles/StylesManager';
-import StylesInspectorView from '@/ui/inspector/styles/StylesInspectorView.vue';
-import SavedStylesInspectorView from '@/ui/inspector/styles/SavedStylesInspectorView.vue';
-
-export default {
-    components: {
-        StylesInspectorView,
-        SavedStylesInspectorView,
-        multipane,
-        pane,
-        ElementsPool,
-        Properties,
-        ObjectName,
-        Location,
-        InspectorViews
-    },
-    provide: {
-        stylesManager: stylesManager
-    },
-    inject: ['openmct'],
-    props: {
-        isEditing: {
-            type: Boolean,
-            required: true
-        }
-    },
-    data() {
-        return {
-            hasComposition: false,
-            showStyles: false,
-            tabbedViews: [{
-                key: '__properties',
-                name: 'Properties'
-            }, {
-                key: '__styles',
-                name: 'Styles'
-            }],
-            currentTabbedView: {}
-        };
-    },
-    mounted() {
-        this.excludeObjectTypes = ['folder', 'webPage', 'conditionSet', 'summary-widget', 'hyperlink'];
-        this.openmct.selection.on('change', this.updateInspectorViews);
-    },
-    destroyed() {
-        this.openmct.selection.off('change', this.updateInspectorViews);
-    },
-    methods: {
-        updateInspectorViews(selection) {
-            this.refreshComposition(selection);
-            if (this.openmct.types.get('conditionSet')) {
-                this.refreshTabs(selection);
-            }
-        },
-        refreshComposition(selection) {
-            if (selection.length > 0 && selection[0].length > 0) {
-                let parentObject = selection[0][0].context.item;
-
-                this.hasComposition = Boolean(parentObject && this.openmct.composition.get(parentObject));
-            }
-        },
-        refreshTabs(selection) {
-            if (selection.length > 0 && selection[0].length > 0) {
-                //layout items are not domain objects but should allow conditional styles
-                this.showStyles = selection[0][0].context.layoutItem;
-                let object = selection[0][0].context.item;
-                if (object) {
-                    let type = this.openmct.types.get(object.type);
-                    this.showStyles = this.isLayoutObject(selection[0], object.type) || this.isCreatableObject(object, type);
-                }
-
-                if (!this.currentTabbedView.key || (!this.showStyles && this.currentTabbedView.key === this.tabbedViews[1].key)) {
-                    this.updateCurrentTab(this.tabbedViews[0]);
-                }
-            }
-        },
-        isLayoutObject(selection, objectType) {
-            //we allow conditionSets to be styled if they're part of a layout
-            return selection.length > 1
-                && ((objectType === 'conditionSet') || (this.excludeObjectTypes.indexOf(objectType) < 0));
-        },
-        isCreatableObject(object, type) {
-            return (this.excludeObjectTypes.indexOf(object.type) < 0) && type.definition.creatable;
-        },
-        updateCurrentTab(view) {
-            this.currentTabbedView = view;
-        },
-        isCurrent(view) {
-            return _.isEqual(this.currentTabbedView, view);
-        }
-    }
-};
-</script>
diff --git a/src/ui/inspector/InspectorDetailsSpec.js b/src/ui/inspector/InspectorDetailsSpec.js
new file mode 100644
index 00000000000..25e327b231d
--- /dev/null
+++ b/src/ui/inspector/InspectorDetailsSpec.js
@@ -0,0 +1,154 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+import { nextTick } from 'vue';
+
+const INSPECTOR_SELECTOR_PREFIX = '.c-inspect-properties__';
+
+describe('the inspector', () => {
+  let appHolder;
+  let openmct;
+  let folderItem;
+  let selection;
+
+  beforeEach((done) => {
+    folderItem = {
+      name: 'folder',
+      type: 'folder',
+      createdBy: 'John Q',
+      modifiedBy: 'Public',
+      id: 'mock-folder-key',
+      identifier: {
+        namespace: '',
+        key: 'mock-folder-key'
+      },
+      notes: 'This object should have some notes',
+      created: 1592851063871
+    };
+
+    selection = [
+      {
+        context: {
+          item: folderItem
+        }
+      }
+    ];
+
+    appHolder = document.createElement('div');
+
+    openmct = createOpenMct();
+    openmct.on('start', done);
+    openmct.start(appHolder);
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  it('displays default details for selection', async () => {
+    openmct.selection.select(selection);
+    await nextTick();
+
+    const details = getDetails();
+    const [title, type, createdBy, modifiedBy, notes, timestamp] = details;
+
+    expect(title.name).toEqual('Title');
+    expect(title.value.toLowerCase()).toEqual(folderItem.name);
+
+    expect(type.name).toEqual('Type');
+    expect(type.value.toLowerCase()).toEqual(folderItem.type);
+    expect(createdBy.name).toEqual('Created By');
+    expect(createdBy.value).toEqual(folderItem.createdBy);
+    expect(modifiedBy.name).toEqual('Modified By');
+    expect(modifiedBy.value).toEqual(folderItem.modifiedBy);
+    expect(notes.value).toEqual('This object should have some notes');
+
+    expect(timestamp.name).toEqual('Created');
+    expect(new Date(timestamp.value).toString()).toEqual(new Date(folderItem.created).toString());
+  });
+
+  it('details show modified date', async () => {
+    const modifiedTimestamp = folderItem.created + 1000;
+    folderItem.modified = modifiedTimestamp;
+
+    openmct.selection.select(selection);
+    await nextTick();
+
+    const details = getDetails();
+    const timestamp = details[details.length - 1];
+
+    expect(timestamp.name).toEqual('Modified');
+    expect(new Date(timestamp.value).toString()).toEqual(new Date(folderItem.modified).toString());
+  });
+
+  it('displays custom details if provided through context', async () => {
+    const NAME_PREFIX = 'Custom Name';
+    const VALUE_PREFIX = 'Custom Value';
+    const indexes = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+    const customDetails = indexes.map((index) => {
+      return {
+        name: `${NAME_PREFIX} ${index}`,
+        value: `${VALUE_PREFIX} ${index}`
+      };
+    });
+
+    selection[0].context.details = customDetails;
+
+    openmct.selection.select(selection);
+    await nextTick();
+
+    const details = getDetails();
+
+    expect(details.length).toEqual(customDetails.length);
+
+    details.forEach((detail, index) => {
+      expect(detail.name).toEqual(customDetails[index].name);
+      expect(detail.value).toEqual(customDetails[index].value);
+    });
+  });
+
+  function getDetailsElements() {
+    const inspectorDetailsSection = appHolder.querySelector(`${INSPECTOR_SELECTOR_PREFIX}section`);
+    const details = inspectorDetailsSection.querySelectorAll(`${INSPECTOR_SELECTOR_PREFIX}row`);
+
+    return details;
+  }
+
+  function getDetails() {
+    const detailsElements = getDetailsElements();
+    const details = Array.from(detailsElements).map((element) => {
+      return {
+        name: getText(element, 'label'),
+        value: getText(element, 'value')
+      };
+    });
+
+    return details;
+  }
+
+  function getText(element, selectorSuffix) {
+    return element
+      .querySelector(`${INSPECTOR_SELECTOR_PREFIX}${selectorSuffix}`)
+      .textContent.trim();
+  }
+});
diff --git a/src/ui/inspector/InspectorPanel.vue b/src/ui/inspector/InspectorPanel.vue
new file mode 100644
index 00000000000..be7fe80c564
--- /dev/null
+++ b/src/ui/inspector/InspectorPanel.vue
@@ -0,0 +1,60 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-inspector js-inspector">
+    <object-name />
+    <InspectorTabs :is-editing="isEditing" @select-tab="selectTab" />
+    <InspectorViews :selected-tab="selectedTab" />
+  </div>
+</template>
+
+<script>
+import InspectorTabs from './InspectorTabs.vue';
+import InspectorViews from './InspectorViews.vue';
+import ObjectName from './ObjectName.vue';
+
+export default {
+  components: {
+    ObjectName,
+    InspectorTabs,
+    InspectorViews
+  },
+  inject: ['openmct'],
+  props: {
+    isEditing: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      selectedTab: undefined
+    };
+  },
+  methods: {
+    selectTab(tab) {
+      this.selectedTab = tab;
+    }
+  }
+};
+</script>
diff --git a/src/ui/inspector/InspectorStylesSpec.js b/src/ui/inspector/InspectorStylesSpec.js
index 7339e3f7bc9..3412b2e4dbd 100644
--- a/src/ui/inspector/InspectorStylesSpec.js
+++ b/src/ui/inspector/InspectorStylesSpec.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2020, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,199 +20,193 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import {
-    createOpenMct,
-    resetApplicationState
-} from 'utils/testing';
-import {
-    mockLocalStorage
-} from 'utils/testing/mockLocalStorage';
-import {
-    mockTelemetryTableSelection,
-    mockMultiSelectionSameStyles,
-    mockMultiSelectionMixedStyles,
-    mockMultiSelectionNonSpecificStyles,
-    mockStyle
-} from './InspectorStylesSpecMocks';
-import Vue from 'vue';
+import mount from 'utils/mount';
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+import { mockLocalStorage } from 'utils/testing/mockLocalStorage';
+import { nextTick } from 'vue';
+
 import StylesView from '@/plugins/condition/components/inspector/StylesView.vue';
-import SavedStylesView from '@/ui/inspector/styles/SavedStylesView.vue';
-import stylesManager from '@/ui/inspector/styles/StylesManager';
 
-describe("the inspector", () => {
-    let openmct;
-    let selection;
-    let stylesViewComponent;
-    let savedStylesViewComponent;
+import SavedStylesView from '../../plugins/inspectorViews/styles/SavedStylesView.vue';
+import stylesManager from '../../plugins/inspectorViews/styles/StylesManager.js';
+import {
+  mockMultiSelectionMixedStyles,
+  mockMultiSelectionNonSpecificStyles,
+  mockMultiSelectionSameStyles,
+  mockStyle,
+  mockTelemetryTableSelection
+} from './InspectorStylesSpecMocks.js';
 
-    mockLocalStorage();
+describe('the inspector', () => {
+  let openmct;
+  let selection;
+  let stylesViewComponent;
+  let savedStylesViewComponent;
 
-    beforeEach((done) => {
-        openmct = createOpenMct();
-        openmct.on('start', done);
-        openmct.startHeadless();
-    });
+  mockLocalStorage();
 
-    afterEach(() => {
-        return resetApplicationState(openmct);
-    });
+  beforeEach((done) => {
+    openmct = createOpenMct();
+    spyOn(openmct.objects, 'save').and.returnValue(Promise.resolve(true));
+    openmct.on('start', done);
+    openmct.startHeadless();
+  });
 
-    it("should allow a style to be saved", () => {
-        selection = mockTelemetryTableSelection;
-        stylesViewComponent = createViewComponent(StylesView, selection, openmct);
-        savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
 
-        expect(savedStylesViewComponent.$children[0].savedStyles.length).toBe(0);
+  it('should allow a style to be saved', () => {
+    selection = mockTelemetryTableSelection;
+    stylesViewComponent = createViewComponent(StylesView, selection, openmct);
+    savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
 
-        stylesViewComponent.$children[0].saveStyle(mockStyle);
+    expect(savedStylesViewComponent.$refs.root.savedStyles.length).toBe(0);
 
-        expect(savedStylesViewComponent.$children[0].savedStyles.length).toBe(1);
-    });
+    stylesViewComponent.$refs.root.saveStyle(mockStyle);
 
-    it("should display all saved styles", () => {
-        selection = mockTelemetryTableSelection;
-        stylesViewComponent = createViewComponent(StylesView, selection, openmct);
-        savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
+    expect(savedStylesViewComponent.$refs.root.savedStyles.length).toBe(1);
+  });
 
-        expect(savedStylesViewComponent.$children[0].$children.length).toBe(0);
-        stylesViewComponent.$children[0].saveStyle(mockStyle);
+  it('should display all saved styles', async () => {
+    selection = mockTelemetryTableSelection;
+    stylesViewComponent = createViewComponent(StylesView, selection, openmct);
+    savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
 
-        stylesViewComponent.$nextTick().then(() => {
-            expect(savedStylesViewComponent.$children[0].$children.length).toBe(1);
-        });
-    });
+    expect(savedStylesViewComponent.$refs.root.savedStyles.length).toBe(0);
+    stylesViewComponent.$refs.root.saveStyle(mockStyle);
 
-    it("should allow a saved style to be applied", () => {
-        spyOn(openmct.editor, 'isEditing').and.returnValue(true);
+    await nextTick();
+    expect(savedStylesViewComponent.$refs.root.savedStyles.length).toBe(1);
+  });
 
-        selection = mockTelemetryTableSelection;
-        stylesViewComponent = createViewComponent(StylesView, selection, openmct);
-        savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
+  xit('should allow a saved style to be applied', () => {
+    spyOn(openmct.editor, 'isEditing').and.returnValue(true);
 
-        stylesViewComponent.$children[0].saveStyle(mockStyle);
+    selection = mockTelemetryTableSelection;
+    stylesViewComponent = createViewComponent(StylesView, selection, openmct);
+    savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
 
-        stylesViewComponent.$nextTick().then(() => {
-            const styleSelectorComponent = savedStylesViewComponent.$children[0].$children[0];
+    stylesViewComponent.$refs.root.saveStyle(mockStyle);
 
-            styleSelectorComponent.selectStyle();
+    return stylesViewComponent.$nextTick().then(() => {
+      const styleSelectorComponent = savedStylesViewComponent.$refs.root.$refs.root;
 
-            savedStylesViewComponent.$nextTick().then(() => {
-                const styleEditorComponentIndex = stylesViewComponent.$children[0].$children.length - 1;
-                const styleEditorComponent = stylesViewComponent.$children[0].$children[styleEditorComponentIndex];
-                const styles = styleEditorComponent.$children.filter(component => component.options.value === mockStyle.color);
+      styleSelectorComponent.selectStyle();
 
-                expect(styles.length).toBe(3);
-            });
-        });
+      return savedStylesViewComponent.$nextTick().then(() => {
+        const styleEditorComponent = stylesViewComponent.$refs.root.$refs.styleEditor;
+        const styles = styleEditorComponent.$children.filter(
+          (component) => component.options.value === mockStyle.color
+        );
+
+        expect(styles.length).toBe(3);
+      });
     });
+  });
 
-    it("should allow a saved style to be deleted", () => {
-        selection = mockTelemetryTableSelection;
-        stylesViewComponent = createViewComponent(StylesView, selection, openmct);
-        savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
+  it('should allow a saved style to be deleted', () => {
+    selection = mockTelemetryTableSelection;
+    stylesViewComponent = createViewComponent(StylesView, selection, openmct);
+    savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
 
-        stylesViewComponent.$children[0].saveStyle(mockStyle);
+    stylesViewComponent.$refs.root.saveStyle(mockStyle);
 
-        expect(savedStylesViewComponent.$children[0].savedStyles.length).toBe(1);
+    expect(savedStylesViewComponent.$refs.root.savedStyles.length).toBe(1);
 
-        savedStylesViewComponent.$children[0].deleteStyle(0);
+    savedStylesViewComponent.$refs.root.deleteStyle(0);
 
-        expect(savedStylesViewComponent.$children[0].savedStyles.length).toBe(0);
-    });
+    expect(savedStylesViewComponent.$refs.root.savedStyles.length).toBe(0);
+  });
 
-    it("should prevent a style from being saved when the number of saved styles is at the limit", () => {
-        spyOn(SavedStylesView.methods, 'showLimitReachedDialog').and.callThrough();
+  it('should prevent a style from being saved when the number of saved styles is at the limit', () => {
+    spyOn(SavedStylesView.methods, 'showLimitReachedDialog').and.callThrough();
 
-        selection = mockTelemetryTableSelection;
-        stylesViewComponent = createViewComponent(StylesView, selection, openmct);
-        savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
+    selection = mockTelemetryTableSelection;
+    stylesViewComponent = createViewComponent(StylesView, selection, openmct);
+    savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
 
-        for (let i = 1; i <= 20; i++) {
-            stylesViewComponent.$children[0].saveStyle(mockStyle);
-        }
+    for (let i = 1; i <= 20; i++) {
+      stylesViewComponent.$refs.root.saveStyle(mockStyle);
+    }
 
-        expect(SavedStylesView.methods.showLimitReachedDialog).not.toHaveBeenCalled();
-        expect(savedStylesViewComponent.$children[0].savedStyles.length).toBe(20);
+    expect(SavedStylesView.methods.showLimitReachedDialog).not.toHaveBeenCalled();
+    expect(savedStylesViewComponent.$refs.root.savedStyles.length).toBe(20);
 
-        stylesViewComponent.$children[0].saveStyle(mockStyle);
+    stylesViewComponent.$refs.root.saveStyle(mockStyle);
 
-        expect(SavedStylesView.methods.showLimitReachedDialog).toHaveBeenCalled();
-        expect(savedStylesViewComponent.$children[0].savedStyles.length).toBe(20);
-    });
+    expect(SavedStylesView.methods.showLimitReachedDialog).toHaveBeenCalled();
+    expect(savedStylesViewComponent.$refs.root.savedStyles.length).toBe(20);
+  });
 
-    it("should allow styles from multi-selections to be saved", () => {
-        spyOn(openmct.editor, 'isEditing').and.returnValue(true);
+  it('should allow styles from multi-selections to be saved', async () => {
+    spyOn(openmct.editor, 'isEditing').and.returnValue(true);
 
-        selection = mockMultiSelectionSameStyles;
-        stylesViewComponent = createViewComponent(StylesView, selection, openmct);
-        savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
+    selection = mockMultiSelectionSameStyles;
+    stylesViewComponent = createViewComponent(StylesView, selection, openmct);
+    savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
 
-        stylesViewComponent.$nextTick().then(() => {
-            const styleEditorComponentIndex = stylesViewComponent.$children[0].$children.length - 1;
-            const styleEditorComponent = stylesViewComponent.$children[0].$children[styleEditorComponentIndex];
-            const saveStyleButtonIndex = styleEditorComponent.$children.length - 1;
-            const saveStyleButton = styleEditorComponent.$children[saveStyleButtonIndex];
+    await nextTick();
+    const styleEditorComponent = stylesViewComponent.$refs.root.$refs.styleEditor;
+    const saveStyleButton = styleEditorComponent.$refs.saveStyleButton;
 
-            expect(saveStyleButton.$listeners.click).not.toBe(undefined);
+    expect(saveStyleButton).not.toBe(undefined);
 
-            saveStyleButton.$listeners.click();
+    saveStyleButton.$refs.button.click();
 
-            expect(savedStylesViewComponent.$children[0].savedStyles.length).toBe(1);
-        });
-    });
+    expect(savedStylesViewComponent.$refs.root.$data.savedStyles.length).toBe(1);
+  });
 
-    it("should prevent mixed styles from being saved", () => {
-        spyOn(openmct.editor, 'isEditing').and.returnValue(true);
+  it('should prevent mixed styles from being saved', async () => {
+    spyOn(openmct.editor, 'isEditing').and.returnValue(true);
 
-        selection = mockMultiSelectionMixedStyles;
-        stylesViewComponent = createViewComponent(StylesView, selection, openmct);
-        savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
+    selection = mockMultiSelectionMixedStyles;
+    stylesViewComponent = createViewComponent(StylesView, selection, openmct);
+    savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
 
-        stylesViewComponent.$nextTick().then(() => {
-            const styleEditorComponentIndex = stylesViewComponent.$children[0].$children.length - 1;
-            const styleEditorComponent = stylesViewComponent.$children[0].$children[styleEditorComponentIndex];
-            const saveStyleButtonIndex = styleEditorComponent.$children.length - 1;
-            const saveStyleButton = styleEditorComponent.$children[saveStyleButtonIndex];
+    await nextTick();
+    const styleEditorComponent = stylesViewComponent.$refs.root.$refs.styleEditor;
+    const saveStyleButton = styleEditorComponent.$refs.saveStyleButton;
 
-            expect(saveStyleButton.$listeners.click).toBe(undefined);
-        });
-    });
+    // Saving should not be enabled, thus the button ref should be undefined
+    expect(saveStyleButton).toBe(undefined);
+  });
 
-    it("should prevent non-specific styles from being saved", () => {
-        spyOn(openmct.editor, 'isEditing').and.returnValue(true);
+  it('should prevent non-specific styles from being saved', async () => {
+    spyOn(openmct.editor, 'isEditing').and.returnValue(true);
 
-        selection = mockMultiSelectionNonSpecificStyles;
-        stylesViewComponent = createViewComponent(StylesView, selection, openmct);
-        savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
+    selection = mockMultiSelectionNonSpecificStyles;
+    stylesViewComponent = createViewComponent(StylesView, selection, openmct);
+    savedStylesViewComponent = createViewComponent(SavedStylesView, selection, openmct);
 
-        stylesViewComponent.$nextTick().then(() => {
-            const styleEditorComponentIndex = stylesViewComponent.$children[0].$children.length - 1;
-            const styleEditorComponent = stylesViewComponent.$children[0].$children[styleEditorComponentIndex];
-            const saveStyleButtonIndex = styleEditorComponent.$children.length - 1;
-            const saveStyleButton = styleEditorComponent.$children[saveStyleButtonIndex];
+    await nextTick();
+    const styleEditorComponent = stylesViewComponent.$refs.root.$refs.styleEditor;
+    const saveStyleButton = styleEditorComponent.$refs.saveStyleButton;
 
-            expect(saveStyleButton.$listeners.click).toBe(undefined);
-        });
-    });
+    // Saving should not be enabled, thus the button ref should be undefined
+    expect(saveStyleButton).toBe(undefined);
+  });
 
-    function createViewComponent(component) {
-        const element = document.createElement('div');
-        const child = document.createElement('div');
-        element.appendChild(child);
-
-        const config = {
-            provide: {
-                openmct,
-                selection,
-                stylesManager
-            },
-            el: element,
-            components: {},
-            template: `<${component.name} />`
-        };
-
-        config.components[component.name] = component;
-
-        return new Vue(config).$mount();
-    }
+  function createViewComponent(component) {
+    const element = document.createElement('div');
+    const child = document.createElement('div');
+    element.appendChild(child);
+
+    const config = {
+      provide: {
+        openmct,
+        selection,
+        stylesManager
+      },
+      components: {},
+      template: `<${component.name} ref="root"/>`
+    };
+
+    config.components[component.name] = component;
+
+    const { vNode } = mount(config, {
+      element
+    });
+    return vNode.componentInstance;
+  }
 });
diff --git a/src/ui/inspector/InspectorStylesSpecMocks.js b/src/ui/inspector/InspectorStylesSpecMocks.js
index 1b63892a98a..561619d8a08 100644
--- a/src/ui/inspector/InspectorStylesSpecMocks.js
+++ b/src/ui/inspector/InspectorStylesSpecMocks.js
@@ -1,204 +1,210 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
 export const mockTelemetryTableSelection = [
-    [{
-        context: {
-            item: {
-                configuration: {},
-                type: 'table',
-                identifier: {
-                    key: 'mock-telemetry-table-1',
-                    namespace: ''
-                }
-            }
+  [
+    {
+      context: {
+        item: {
+          configuration: {},
+          type: 'table',
+          identifier: {
+            key: 'mock-telemetry-table-1',
+            namespace: ''
+          }
         }
-    }]
+      }
+    }
+  ]
 ];
 
 export const mockStyle = {
-    backgroundColor: '#ff0000',
-    border: '#ff0000',
-    color: '#ff0000'
+  backgroundColor: '#ff0000',
+  border: '#ff0000',
+  color: '#ff0000'
 };
 
 const mockDisplayLayoutPath = {
-    context: {
-        item: {
-            identifier: {
-                key: "6af3200d-928b-4ff0-8ed0-b94a0e6752d1",
-                namespace: ""
-            },
-            type: "layout",
-            configuration: {
-                items: [
-                    {
-                        id: "dd3202e5-40d0-4112-8951-00f0f1ed6a29",
-                        type: "text-view",
-                        fontSize: "default",
-                        font: "default"
-                    },
-                    {
-                        id: "b522d636-90b2-4f5f-9588-2a0345c30f87",
-                        type: "text-view",
-                        fontSize: "default",
-                        font: "default"
-                    },
-                    {
-                        id: "537b7596-b442-44fe-b464-07f56bdc67c8",
-                        type: "text-view",
-                        fontSize: "default",
-                        font: "default"
-                    },
-                    {
-                        id: "3f17162f-a822-4e39-8332-6aa39b79d022",
-                        type: "text-view",
-                        fontSize: "default",
-                        font: "default"
-                    },
-                    {
-                        id: "c1c5acd8-a14b-450c-8c94-ce0075dd9912",
-                        type: "text-view",
-                        fontSize: "8",
-                        font: "monospace-bold"
-                    }
-                ],
-                objectStyles: {
-                    "dd3202e5-40d0-4112-8951-00f0f1ed6a29": {
-                        staticStyle: {
-                            style: {
-                                backgroundColor: "#0000ff",
-                                border: "1px solid #0000ff"
-                            }
-                        }
-                    },
-                    "b522d636-90b2-4f5f-9588-2a0345c30f87": {
-                        staticStyle: {
-                            style: {
-                                backgroundColor: "#ff0000",
-                                border: "1px solid #ff0000"
-                            }
-                        }
-                    },
-                    "537b7596-b442-44fe-b464-07f56bdc67c8": {
-                        staticStyle: {
-                            style: {
-                                backgroundColor: "#ff0000",
-                                border: "1px solid #ff0000"
-                            }
-                        }
-                    },
-                    "3f17162f-a822-4e39-8332-6aa39b79d022": {
-                        staticStyle: {
-                            style: {
-                                backgroundColor: "#0000ff",
-                                border: "1px solid #0000ff",
-                                color: "#0000ff"
-                            }
-                        }
-                    },
-                    "c1c5acd8-a14b-450c-8c94-ce0075dd9912": {
-                        staticStyle: {
-                            style: {
-                                backgroundColor: "#0000ff",
-                                border: "1px solid #0000ff",
-                                color: "#0000ff"
-                            }
-                        }
-                    }
-                }
+  context: {
+    item: {
+      identifier: {
+        key: '6af3200d-928b-4ff0-8ed0-b94a0e6752d1',
+        namespace: ''
+      },
+      type: 'layout',
+      configuration: {
+        items: [
+          {
+            id: 'dd3202e5-40d0-4112-8951-00f0f1ed6a29',
+            type: 'text-view',
+            fontSize: 'default',
+            font: 'default'
+          },
+          {
+            id: 'b522d636-90b2-4f5f-9588-2a0345c30f87',
+            type: 'text-view',
+            fontSize: 'default',
+            font: 'default'
+          },
+          {
+            id: '537b7596-b442-44fe-b464-07f56bdc67c8',
+            type: 'text-view',
+            fontSize: 'default',
+            font: 'default'
+          },
+          {
+            id: '3f17162f-a822-4e39-8332-6aa39b79d022',
+            type: 'text-view',
+            fontSize: 'default',
+            font: 'default'
+          },
+          {
+            id: 'c1c5acd8-a14b-450c-8c94-ce0075dd9912',
+            type: 'text-view',
+            fontSize: '8',
+            font: 'monospace-bold'
+          }
+        ],
+        objectStyles: {
+          'dd3202e5-40d0-4112-8951-00f0f1ed6a29': {
+            staticStyle: {
+              style: {
+                backgroundColor: '#0000ff',
+                border: '1px solid #0000ff'
+              }
             }
-        },
-        supportsMultiSelect: true
-    }
+          },
+          'b522d636-90b2-4f5f-9588-2a0345c30f87': {
+            staticStyle: {
+              style: {
+                backgroundColor: '#ff0000',
+                border: '1px solid #ff0000'
+              }
+            }
+          },
+          '537b7596-b442-44fe-b464-07f56bdc67c8': {
+            staticStyle: {
+              style: {
+                backgroundColor: '#ff0000',
+                border: '1px solid #ff0000'
+              }
+            }
+          },
+          '3f17162f-a822-4e39-8332-6aa39b79d022': {
+            staticStyle: {
+              style: {
+                backgroundColor: '#0000ff',
+                border: '1px solid #0000ff',
+                color: '#0000ff'
+              }
+            }
+          },
+          'c1c5acd8-a14b-450c-8c94-ce0075dd9912': {
+            staticStyle: {
+              style: {
+                backgroundColor: '#0000ff',
+                border: '1px solid #0000ff',
+                color: '#0000ff'
+              }
+            }
+          }
+        }
+      }
+    },
+    supportsMultiSelect: true
+  }
 };
 
 const mockTextBox1Path = {
-    context: {
-        index: 0,
-        layoutItem: {
-            id: "dd3202e5-40d0-4112-8951-00f0f1ed6a29",
-            type: "text-view",
-            fontSize: "default",
-            font: "default"
-        }
+  context: {
+    index: 0,
+    layoutItem: {
+      id: 'dd3202e5-40d0-4112-8951-00f0f1ed6a29',
+      type: 'text-view',
+      fontSize: 'default',
+      font: 'default'
     }
+  }
 };
 
 const mockTextBox2Path = {
-    context: {
-        index: 1,
-        layoutItem: {
-            id: "b522d636-90b2-4f5f-9588-2a0345c30f87",
-            type: "text-view",
-            fontSize: "default",
-            font: "default"
-        }
+  context: {
+    index: 1,
+    layoutItem: {
+      id: 'b522d636-90b2-4f5f-9588-2a0345c30f87',
+      type: 'text-view',
+      fontSize: 'default',
+      font: 'default'
     }
+  }
 };
 
 const mockTextBox3Path = {
-    context: {
-        index: 2,
-        layoutItem: {
-            id: "537b7596-b442-44fe-b464-07f56bdc67c8",
-            type: "text-view",
-            fontSize: "default",
-            font: "default"
-        }
+  context: {
+    index: 2,
+    layoutItem: {
+      id: '537b7596-b442-44fe-b464-07f56bdc67c8',
+      type: 'text-view',
+      fontSize: 'default',
+      font: 'default'
     }
+  }
 };
 
 const mockTextBox4Path = {
-    context: {
-        index: 3,
-        layoutItem: {
-            id: "3f17162f-a822-4e39-8332-6aa39b79d022",
-            type: "text-view",
-            fontSize: "default",
-            font: "default"
-        }
+  context: {
+    index: 3,
+    layoutItem: {
+      id: '3f17162f-a822-4e39-8332-6aa39b79d022',
+      type: 'text-view',
+      fontSize: 'default',
+      font: 'default'
     }
+  }
 };
 
 const mockTextBox5Path = {
-    context: {
-        index: 4,
-        layoutItem: {
-            id: "c1c5acd8-a14b-450c-8c94-ce0075dd9912",
-            type: "text-view",
-            fontSize: "8",
-            font: "default-bold"
-        }
+  context: {
+    index: 4,
+    layoutItem: {
+      id: 'c1c5acd8-a14b-450c-8c94-ce0075dd9912',
+      type: 'text-view',
+      fontSize: '8',
+      font: 'default-bold'
     }
+  }
 };
 
 export const mockMultiSelectionSameStyles = [
-    [
-        mockTextBox2Path,
-        mockDisplayLayoutPath
-    ],
-    [
-        mockTextBox3Path,
-        mockDisplayLayoutPath
-    ]
+  [mockTextBox2Path, mockDisplayLayoutPath],
+  [mockTextBox3Path, mockDisplayLayoutPath]
 ];
 
 export const mockMultiSelectionMixedStyles = [
-    [
-        mockTextBox1Path,
-        mockDisplayLayoutPath
-    ],
-    [
-        mockTextBox2Path,
-        mockDisplayLayoutPath
-    ]
+  [mockTextBox1Path, mockDisplayLayoutPath],
+  [mockTextBox2Path, mockDisplayLayoutPath]
 ];
 
 export const mockMultiSelectionNonSpecificStyles = [
-    [
-        mockTextBox4Path,
-        mockDisplayLayoutPath
-    ],
-    [
-        mockTextBox5Path,
-        mockDisplayLayoutPath
-    ]
+  [mockTextBox4Path, mockDisplayLayoutPath],
+  [mockTextBox5Path, mockDisplayLayoutPath]
 ];
diff --git a/src/ui/inspector/InspectorTabs.vue b/src/ui/inspector/InspectorTabs.vue
new file mode 100644
index 00000000000..b536d3a46f3
--- /dev/null
+++ b/src/ui/inspector/InspectorTabs.vue
@@ -0,0 +1,106 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-inspector__tabs c-tabs" role="tablist">
+    <div
+      v-for="tab in visibleTabs"
+      :key="tab.key"
+      role="tab"
+      class="c-inspector__tab c-tab"
+      :class="{ 'is-current': isSelected(tab) }"
+      :title="tab.name"
+      @click="selectTab(tab)"
+    >
+      <span class="c-inspector__tab-name c-tab__name">{{ tab.name }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  inject: ['openmct'],
+  props: {
+    isEditing: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: ['select-tab'],
+  data() {
+    return {
+      tabs: [],
+      selectedTab: undefined
+    };
+  },
+  computed: {
+    visibleTabs() {
+      return this.tabs.filter((tab) => {
+        return tab.showTab === undefined || tab.showTab(this.isEditing);
+      });
+    }
+  },
+  watch: {
+    visibleTabs: {
+      handler() {
+        this.selectDefaultTabIfSelectedNotVisible();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.updateSelection();
+    this.openmct.selection.on('change', this.updateSelection);
+  },
+  unmounted() {
+    this.openmct.selection.off('change', this.updateSelection);
+  },
+  methods: {
+    updateSelection() {
+      const inspectorViews = this.openmct.inspectorViews.get(this.openmct.selection.get());
+
+      this.tabs = inspectorViews.map((view) => {
+        return {
+          key: view.key,
+          name: view.name,
+          glyph: view.glyph ?? 'icon-object',
+          showTab: view.showTab
+        };
+      });
+    },
+    isSelected(tab) {
+      return this.selectedTab?.key === tab.key;
+    },
+    selectTab(tab) {
+      this.selectedTab = tab;
+      this.$emit('select-tab', tab);
+    },
+    selectDefaultTabIfSelectedNotVisible() {
+      const selectedTabIsVisible = this.visibleTabs.some((tab) => this.isSelected(tab));
+
+      if (!selectedTabIsVisible) {
+        this.selectTab(this.visibleTabs[0]);
+      }
+    }
+  }
+};
+</script>
diff --git a/src/ui/inspector/InspectorViews.vue b/src/ui/inspector/InspectorViews.vue
index 5e074a93d92..90fcf15c2ae 100644
--- a/src/ui/inspector/InspectorViews.vue
+++ b/src/ui/inspector/InspectorViews.vue
@@ -1,43 +1,79 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
 <template>
-<div></div>
+  <div class="c-inspector__content" role="tabpanel" aria-label="Inspector Views"></div>
 </template>
 
-<style>
-</style>
-
 <script>
 export default {
-    inject: ['openmct'],
-    data() {
-        return {
-            selection: []
-        };
-    },
-    mounted() {
-        this.openmct.selection.on('change', this.updateSelection);
-        this.updateSelection(this.openmct.selection.get());
-    },
-    destroyed() {
-        this.openmct.selection.off('change', this.updateSelection);
+  inject: ['openmct'],
+  props: {
+    selectedTab: {
+      type: Object,
+      default: undefined
+    }
+  },
+  watch: {
+    selectedTab() {
+      this.clearAndShowViewsForTab();
+    }
+  },
+  mounted() {
+    this.updateSelectionViews();
+    this.openmct.selection.on('change', this.updateSelectionViews);
+  },
+  unmounted() {
+    this.openmct.selection.off('change', this.updateSelectionViews);
+  },
+  methods: {
+    updateSelectionViews(selection) {
+      this.clearViews();
+      this.selectedViews = this.openmct.inspectorViews.get(this.openmct.selection.get());
+      this.showViewsForTab();
     },
-    methods: {
-        updateSelection(selection) {
-            this.selection = selection;
+    clearViews() {
+      if (this.visibleViews) {
+        this.visibleViews.forEach((visibleView) => {
+          visibleView.destroy();
+        });
 
-            if (this.selectedViews) {
-                this.selectedViews.forEach(selectedView => {
-                    selectedView.destroy();
-                });
-                this.$el.innerHTML = '';
-            }
+        this.visibleViews = [];
+        this.$el.innerHTML = '';
+      }
+    },
+    showViewsForTab() {
+      this.visibleViews = this.selectedTab
+        ? this.selectedViews.filter((view) => view.key === this.selectedTab.key)
+        : [];
 
-            this.selectedViews = this.openmct.inspectorViews.get(selection);
-            this.selectedViews.forEach(selectedView => {
-                let viewContainer = document.createElement('div');
-                this.$el.append(viewContainer);
-                selectedView.show(viewContainer);
-            });
-        }
+      this.visibleViews.forEach((visibleView) => {
+        visibleView.show(this.$el);
+      });
+    },
+    clearAndShowViewsForTab() {
+      this.clearViews();
+      this.showViewsForTab();
     }
+  }
 };
 </script>
diff --git a/src/ui/inspector/Location.vue b/src/ui/inspector/Location.vue
deleted file mode 100644
index 04cdaa2224f..00000000000
--- a/src/ui/inspector/Location.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-<div class="c-inspect-properties c-inspect-properties--location">
-    <div
-        class="c-inspect-properties__header"
-        title="The location of this linked object."
-    >
-        Original Location
-    </div>
-    <ul
-        v-if="!multiSelect"
-        class="c-inspect-properties__section"
-    >
-        <li
-            v-if="originalPath.length"
-            class="c-inspect-properties__row"
-        >
-            <ul class="c-inspect-properties__value c-location">
-                <li
-                    v-for="pathObject in orderedOriginalPath"
-                    :key="pathObject.key"
-                    class="c-location__item"
-                >
-                    <object-label
-                        :domain-object="pathObject.domainObject"
-                        :object-path="pathObject.objectPath"
-                    />
-                </li>
-            </ul>
-        </li>
-    </ul>
-    <div
-        v-if="multiSelect"
-        class="c-inspect-properties__row--span-all"
-    >
-        No location to display for multiple items
-    </div>
-</div>
-</template>
-
-<script>
-import ObjectLabel from '../components/ObjectLabel.vue';
-
-export default {
-    components: {
-        ObjectLabel
-    },
-    inject: ['openmct'],
-    data() {
-        return {
-            domainObject: {},
-            multiSelect: false,
-            originalPath: [],
-            keyString: ''
-        };
-    },
-    computed: {
-        orderedOriginalPath() {
-            return this.originalPath.slice().reverse();
-        }
-    },
-    mounted() {
-        this.openmct.selection.on('change', this.updateSelection);
-        this.updateSelection(this.openmct.selection.get());
-    },
-    beforeDestroy() {
-        this.openmct.selection.off('change', this.updateSelection);
-    },
-    methods: {
-        setOriginalPath(path, skipSlice) {
-            let originalPath = path;
-
-            if (!skipSlice) {
-                originalPath = path.slice(1, -1);
-            }
-
-            this.originalPath = originalPath.map((domainObject, index, pathArray) => {
-                let key = this.openmct.objects.makeKeyString(domainObject.identifier);
-
-                return {
-                    domainObject,
-                    key,
-                    objectPath: pathArray.slice(index)
-                };
-            });
-        },
-        clearData() {
-            this.domainObject = {};
-            this.originalPath = [];
-            this.keyString = '';
-        },
-        updateSelection(selection) {
-            if (!selection.length || !selection[0].length) {
-                this.clearData();
-
-                return;
-            }
-
-            if (selection.length > 1) {
-                this.multiSelect = true;
-
-                return;
-            } else {
-                this.multiSelect = false;
-            }
-
-            this.domainObject = selection[0][0].context.item;
-            let parentObject = selection[0][1];
-
-            if (!this.domainObject && parentObject && parentObject.context.item) {
-                this.setOriginalPath([parentObject.context.item], true);
-                this.keyString = '';
-
-                return;
-            }
-
-            let keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-
-            if (keyString && this.keyString !== keyString) {
-                this.keyString = keyString;
-                this.originalPath = [];
-
-                this.openmct.objects.getOriginalPath(this.keyString)
-                    .then(this.setOriginalPath);
-            }
-        }
-    }
-};
-</script>
diff --git a/src/ui/inspector/ObjectName.vue b/src/ui/inspector/ObjectName.vue
index b1e67bb38a1..9236a2520ae 100644
--- a/src/ui/inspector/ObjectName.vue
+++ b/src/ui/inspector/ObjectName.vue
@@ -1,120 +1,169 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
 <template>
-<div class="c-inspector__header">
-    <div v-if="!multiSelect"
-         class="c-inspector__selected c-object-label"
-         :class="[statusClass]"
-    >
-        <div class="c-object-label__type-icon"
-             :class="typeCssClass"
-        >
-            <span class="is-status__indicator"
-                  :title="`This item is ${status}`"
-            ></span>
-        </div>
-        <span v-if="!singleSelectNonObject"
-              class="c-inspector__selected c-object-label__name"
-        >{{ item.name }}</span>
-        <div v-if="singleSelectNonObject"
-             class="c-inspector__selected c-inspector__selected--non-domain-object  c-object-label"
-        >
-            <span class="c-object-label__name">Layout Object</span>
-        </div>
+  <div class="c-inspector__header">
+    <div v-if="!multiSelect" class="c-inspector__selected c-object-label" :class="[statusClass]">
+      <div class="c-object-label__type-icon" :class="typeCssClass">
+        <span
+          class="is-status__indicator"
+          :aria-label="`This item is ${status}`"
+          :title="`This item is ${status}`"
+        ></span>
+      </div>
+      <span v-if="!singleSelectNonObject" class="c-inspector__selected c-object-label__name">{{
+        item.name
+      }}</span>
+      <div
+        v-if="singleSelectNonObject"
+        class="c-inspector__selected c-inspector__selected--non-domain-object c-object-label"
+      >
+        <span class="c-object-label__name">{{ heading }}</span>
+      </div>
     </div>
-    <div v-if="multiSelect"
-         class="c-inspector__multiple-selected"
-    >
-        {{ itemsSelected }} items selected
+    <div v-if="multiSelect" class="c-inspector__multiple-selected">
+      {{ itemsSelected }} items selected
     </div>
-</div>
+  </div>
 </template>
 
 <script>
 export default {
-    inject: ['openmct'],
-    data() {
-        return {
-            domainObject: {},
-            activity: undefined,
-            keyString: undefined,
-            multiSelect: false,
-            itemsSelected: 0,
-            status: undefined
-        };
+  inject: ['openmct'],
+  data() {
+    return {
+      domainObject: {},
+      activity: undefined,
+      layoutItem: undefined,
+      keyString: undefined,
+      multiSelect: false,
+      itemsSelected: 0,
+      status: undefined
+    };
+  },
+  computed: {
+    item() {
+      return this.domainObject || {};
     },
-    computed: {
-        item() {
-            return this.domainObject || {};
-        },
-        type() {
-            return this.openmct.types.get(this.item.type);
-        },
-        typeCssClass() {
-            if (this.activity) {
-                return 'icon-activity';
-            }
-
-            if (this.type.definition.cssClass === undefined) {
-                return 'icon-object';
-            }
+    heading() {
+      if (this.activity) {
+        return this.activity.name;
+      }
 
-            return this.type.definition.cssClass;
-        },
-        singleSelectNonObject() {
-            return !this.item.identifier && !this.multiSelect;
-        },
-        statusClass() {
-            return this.status ? `is-status--${this.status}` : '';
-        }
+      return 'Layout Item';
     },
-    mounted() {
-        this.openmct.selection.on('change', this.updateSelection);
-        this.updateSelection(this.openmct.selection.get());
+    type() {
+      return this.openmct.types.get(this.item.type);
     },
-    beforeDestroy() {
-        this.openmct.selection.off('change', this.updateSelection);
+    typeCssClass() {
+      if (this.activity) {
+        return 'icon-activity';
+      }
 
-        if (this.statusUnsubscribe) {
-            this.statusUnsubscribe();
-        }
+      if (!this.domainObject && this.layoutItem) {
+        const layoutItemType = this.openmct.types.get(this.layoutItem.type);
+
+        return layoutItemType.definition.cssClass;
+      }
+
+      if (this.type.definition.cssClass === undefined) {
+        return 'icon-object';
+      }
+
+      return this.type.definition.cssClass;
+    },
+    singleSelectNonObject() {
+      return !this.item.identifier && !this.multiSelect;
     },
-    methods: {
-        updateSelection(selection) {
-            if (this.statusUnsubscribe) {
-                this.statusUnsubscribe();
-                this.statusUnsubscribe = undefined;
-            }
+    statusClass() {
+      return this.status ? `is-status--${this.status}` : '';
+    }
+  },
+  mounted() {
+    this.openmct.selection.on('change', this.updateSelection);
+    this.updateSelection(this.openmct.selection.get());
+  },
+  beforeUnmount() {
+    this.openmct.selection.off('change', this.updateSelection);
 
-            if (selection.length === 0 || selection[0].length === 0) {
-                this.resetDomainObject();
+    if (this.statusUnsubscribe) {
+      this.statusUnsubscribe();
+    }
+    if (this.nameUnsubscribe) {
+      this.nameUnsubscribe();
+    }
+  },
+  methods: {
+    updateSelection(selection) {
+      if (this.statusUnsubscribe) {
+        this.statusUnsubscribe();
+        this.statusUnsubscribe = null;
+      }
+      if (this.nameUnsubscribe) {
+        this.nameUnsubscribe();
+        this.nameUnsubscribe = null;
+      }
 
-                return;
-            }
+      if (selection.length === 0 || selection[0].length === 0) {
+        this.resetDomainObject();
 
-            if (selection.length > 1) {
-                this.multiSelect = true;
-                this.itemsSelected = selection.length;
-                this.resetDomainObject();
+        return;
+      }
 
-                return;
-            } else {
-                this.multiSelect = false;
-                this.domainObject = selection[0][0].context.item;
-                this.activity = selection[0][0].context.activity;
-                if (this.domainObject) {
-                    this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-                    this.status = this.openmct.status.get(this.keyString);
-                    this.statusUnsubscribe = this.openmct.status.observe(this.keyString, this.updateStatus);
-                }
-            }
-        },
-        resetDomainObject() {
-            this.domainObject = {};
-            this.status = undefined;
-            this.keyString = undefined;
-        },
-        updateStatus(status) {
-            this.status = status;
+      if (selection.length > 1) {
+        this.multiSelect = true;
+        this.itemsSelected = selection.length;
+        this.resetDomainObject();
+
+        return;
+      } else {
+        this.multiSelect = false;
+        this.domainObject = selection[0][0].context.item;
+        this.activity = selection[0][0].context.activity;
+        if (this.domainObject) {
+          this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+          this.status = this.openmct.status.get(this.keyString);
+          this.statusUnsubscribe = this.openmct.status.observe(this.keyString, this.updateStatus);
+          this.nameUnsubscribe = this.openmct.objects.observe(
+            this.domainObject,
+            'name',
+            this.updateName
+          );
+        } else if (selection[0][0].context.layoutItem) {
+          this.layoutItem = selection[0][0].context.layoutItem;
         }
+      }
+    },
+    resetDomainObject() {
+      this.domainObject = {};
+      this.status = undefined;
+      this.keyString = undefined;
+    },
+    updateStatus(status) {
+      this.status = status;
+    },
+    updateName(newName) {
+      this.domainObject = { ...this.domainObject, name: newName };
     }
+  }
 };
 </script>
diff --git a/src/ui/inspector/Properties.vue b/src/ui/inspector/Properties.vue
deleted file mode 100644
index 86fb195d8b4..00000000000
--- a/src/ui/inspector/Properties.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<template>
-<div v-if="!activity"
-     class="c-inspector__properties c-inspect-properties"
->
-    <div class="c-inspect-properties__header">
-        Details
-    </div>
-    <ul
-        v-if="!multiSelect && !singleSelectNonObject"
-        class="c-inspect-properties__section"
-    >
-        <li class="c-inspect-properties__row">
-            <div class="c-inspect-properties__label">
-                Title
-            </div>
-            <div class="c-inspect-properties__value">
-                {{ item.name }}
-            </div>
-        </li>
-        <li class="c-inspect-properties__row">
-            <div class="c-inspect-properties__label">
-                Type
-            </div>
-            <div class="c-inspect-properties__value">
-                {{ typeName }}
-            </div>
-        </li>
-        <li
-            v-if="item.created"
-            class="c-inspect-properties__row"
-        >
-            <div class="c-inspect-properties__label">
-                Created
-            </div>
-            <div class="c-inspect-properties__value">
-                {{ formatTime(item.created) }}
-            </div>
-        </li>
-        <li
-            v-if="item.modified"
-            class="c-inspect-properties__row"
-        >
-            <div class="c-inspect-properties__label">
-                Modified
-            </div>
-            <div class="c-inspect-properties__value">
-                {{ formatTime(item.modified) }}
-            </div>
-        </li>
-        <li
-            v-for="prop in typeProperties"
-            :key="prop.name"
-            class="c-inspect-properties__row"
-        >
-            <div class="c-inspect-properties__label">
-                {{ prop.name }}
-            </div>
-            <div class="c-inspect-properties__value">
-                {{ prop.value }}
-            </div>
-        </li>
-    </ul>
-    <div
-        v-if="multiSelect"
-        class="c-inspect-properties__row--span-all"
-    >
-        No properties to display for multiple items
-    </div>
-    <div
-        v-if="singleSelectNonObject"
-        class="c-inspect-properties__row--span-all"
-    >
-        No properties to display for this item
-    </div>
-</div>
-</template>
-
-<script>
-import Moment from "moment";
-
-export default {
-    inject: ['openmct'],
-    data() {
-        return {
-            domainObject: {},
-            activity: undefined,
-            multiSelect: false
-        };
-    },
-    computed: {
-        item() {
-            return this.domainObject || {};
-        },
-        type() {
-            return this.openmct.types.get(this.item.type);
-        },
-        typeName() {
-            if (!this.type) {
-                return `Unknown: ${this.item.type}`;
-            }
-
-            return this.type.definition.name;
-        },
-        typeProperties() {
-            if (!this.type) {
-                return [];
-            }
-
-            let definition = this.type.definition;
-            if (!definition.form || definition.form.length === 0) {
-                return [];
-            }
-
-            return definition.form
-                .map((field) => {
-                    let path = field.property;
-                    if (typeof path === 'string') {
-                        path = [path];
-                    }
-
-                    return {
-                        name: field.name,
-                        path
-                    };
-                })
-                .filter(field => Array.isArray(field.path))
-                .map((field) => {
-                    return {
-                        name: field.name,
-                        value: field.path.reduce((object, key) => {
-                            return object[key];
-                        }, this.item)
-                    };
-                });
-        },
-        singleSelectNonObject() {
-            return !this.item.identifier && !this.multiSelect;
-        }
-    },
-    mounted() {
-        this.openmct.selection.on('change', this.updateSelection);
-        this.updateSelection(this.openmct.selection.get());
-    },
-    beforeDestroy() {
-        this.openmct.selection.off('change', this.updateSelection);
-    },
-    methods: {
-        updateSelection(selection) {
-            if (selection.length === 0 || selection[0].length === 0) {
-                this.domainObject = {};
-
-                return;
-            }
-
-            if (selection.length > 1) {
-                this.multiSelect = true;
-                this.domainObject = {};
-
-                return;
-            } else {
-                this.multiSelect = false;
-                this.domainObject = selection[0][0].context.item;
-                this.activity = selection[0][0].context.activity;
-            }
-        },
-        formatTime(unixTime) {
-            return Moment.utc(unixTime).format('YYYY-MM-DD[\n]HH:mm:ss') + ' UTC';
-        }
-    }
-};
-</script>
diff --git a/src/ui/inspector/elements.scss b/src/ui/inspector/elements.scss
deleted file mode 100644
index a3d4363cae8..00000000000
--- a/src/ui/inspector/elements.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.c-elements-pool {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    flex: 1 1 auto !important;
-
-    > * + * {
-        margin-top: $interiorMargin;
-    }
-
-    &__search {
-        flex: 0 0 auto;
-    }
-
-    &__elements {
-        flex: 1 1 auto;
-        overflow: auto;
-    }
-
-    .c-grippy {
-        $d: 8px;
-        flex: 0 0 auto;
-        margin-right: $interiorMarginSm;
-        transform: translateY(-2px);
-        width: $d; height: $d;
-    }
-
-    &.is-context-clicked {
-        box-shadow: inset $colorItemTreeSelectedBg 0 0 0 1px;
-    }
-
-    .hover {
-        background-color: $colorItemTreeSelectedBg;
-    }
-}
-
-.js-last-place {
-    height: 10px;
-}
\ No newline at end of file
diff --git a/src/ui/inspector/inspector.scss b/src/ui/inspector/inspector.scss
index 0076673a2e7..a42088bf313 100644
--- a/src/ui/inspector/inspector.scss
+++ b/src/ui/inspector/inspector.scss
@@ -1,205 +1,275 @@
 .c-inspector {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-
-    > * {
-        // This is on purpose: want extra margin on top object-name element
-        margin-top: $interiorMargin;
-    }
-
-    &__selected,
-    &__multiple-selected {
-        @include headerFont(1.1em);
-        padding: $interiorMarginSm 0;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+
+  > * {
+    // This is on purpose: want extra margin on top object-name element
+    margin-top: $interiorMargin;
+  }
+
+  &__selected,
+  &__multiple-selected {
+    @include headerFont(1.1em);
+    padding: $interiorMarginSm 0;
+  }
+
+  &__multiple-selected {
+    $p: $interiorMarginLg;
+    background: rgba($colorWarningLo, 0.3);
+    border-radius: $basicCr;
+    display: inline-block;
+    font-style: italic;
+    padding-left: $p;
+    padding-right: $p;
+  }
+
+  &__selected {
+    .c-object-label__type-icon {
+      opacity: $objectLabelTypeIconOpacity;
     }
 
-    &__multiple-selected {
-        $p: $interiorMarginLg;
-        background: rgba($colorWarningLo, 0.3);
-        border-radius: $basicCr;
-        display: inline-block;
-        font-style: italic;
-        padding-left: $p;
-        padding-right: $p;
+    &--non-domain-object .c-object-label__name {
+      font-style: italic;
     }
+  }
 
-    &__selected {
-        .c-object-label__name {
-            filter: $objectLabelNameFilter;
-        }
-
-        .c-object-label__type-icon {
-            opacity: $objectLabelTypeIconOpacity;
-        }
+  &__tabs {
+    flex: 0 0 auto;
+    font-size: 11px;
+    text-transform: uppercase;
 
-        &--non-domain-object .c-object-label__name {
-            font-style: italic;
-        }
+    &.c-tabs {
+      flex-wrap: nowrap;
     }
 
-    &__tabs {
-        flex: 0 0 auto;
-        font-size: 0.8em;
-        text-transform: uppercase;
-    }
-
-    &__content {
-        flex: 1 1 auto;
-        display: flex;
-        flex-direction: column;
-    }
+    .c-tab {
+      background: $colorTabBg;
+      color: $colorTabFg;
+      padding: $interiorMargin;
+
+      &:not(.is-current) {
+        overflow: hidden;
+
+        &:after {
+          background-image: linear-gradient(90deg, transparent 0%, rgba($colorTabBg, 1) 70%);
+          content: '';
+          display: block;
+          position: absolute;
+          right: 0;
+          height: 100%;
+          width: 15px;
+          z-index: 1;
+        }
+      }
 
-    &__elements {
-        height: 200px; // Initial height
+      &.is-current {
+        background: $colorTabCurrentBg;
+        color: $colorTabCurrentFg;
+        padding-right: $interiorMargin + 3;
+      }
 
-        .tree-item {
-            .t-object-label {
-                // Elements pool is a flat list, so don't indent items.
-                left: 0;
-            }
-        }
+      &__name {
+        overflow: hidden;
+      }
     }
+  }
 
-    &__saved-styles {
-        height: 300px;
-    }
+  &__content {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+  }
 
-    .c-color-swatch {
-        $d: 12px;
-        display: block;
-        flex: 0 0 auto;
-        width: $d;
-        height: $d;
-    }
+  &__elements {
+    height: 200px; // Initial height
 
-    .c-tree {
-        // When a tree is in the Inspector, remove scrolling and right pad
-        overflow: visible;
-        padding-right: 0;
+    .tree-item {
+      .t-object-label {
+        // Elements pool is a flat list, so don't indent items.
+        left: 0;
+      }
     }
-
-    /************************************************************** LEGACY */
-    .l-inspector-part {
-        display: contents;
+  }
+
+  &__saved-styles {
+    height: 300px;
+  }
+
+  .c-color-swatch {
+    $d: 12px;
+    display: block;
+    flex: 0 0 auto;
+    width: $d;
+    height: $d;
+  }
+
+  .c-tree {
+    // When a tree is in the Inspector, remove scrolling and right pad
+    overflow: visible;
+    padding-right: 0;
+  }
+
+  textarea {
+    // When a textarea is in the Inspector, only allow vertical resize
+    resize: vertical;
+  }
+
+  /************************************************************** LEGACY */
+  .l-inspector-part {
+    display: contents;
+  }
+
+  h2 {
+    @include propertiesHeader();
+    font-size: 0.65rem;
+    grid-column: 1 / 3;
+    margin: $interiorMargin 0;
+
+    &.--first {
+      margin-top: 0;
     }
+  }
 
-    h2 {
-        @include propertiesHeader();
-        font-size: 0.65rem;
-        grid-column: 1 / 3;
-    }
+  .c-tree .grid-properties {
+    margin-left: $treeItemIndent;
+  }
 
-    .c-tree .grid-properties {
-        margin-left: $treeItemIndent;
+  .l-multipane {
+    .l-pane {
+      min-height: 50px;
     }
+  }
+}
 
-    .l-multipane {
-        .l-pane {
-            min-height: 50px;
-        }
-    }
+.c-inspect-properties,
+.c-inspect-tags {
+  [class*='header'] {
+    @include propertiesHeader();
+    flex: 0 0 auto;
+    //font-size: 0.85em;
+  }
 }
 
 .c-inspect-properties,
 .c-inspect-styles {
-    [class*="header"] {
-        @include propertiesHeader();
-        flex: 0 0 auto;
-        font-size: .85em;
-        text-transform: uppercase;
-
-        &:not(:first-child) {
-            // Allow multiple headers within a component
-            margin-top: $interiorMarginLg;
-        }
+  [class*='header'] {
+    @include propertiesHeader();
+    flex: 0 0 auto;
+    font-size: 11px;
+    text-transform: uppercase;
+
+    &:not(:first-child) {
+      // Allow multiple headers within a component
+      margin-top: $interiorMarginLg;
     }
+  }
 }
 /********************************************* INSPECTOR PROPERTIES TAB */
 .c-inspect-properties {
-    display: grid;
-    grid-row-gap: $interiorMarginSm;
-    grid-template-columns: 1fr 2fr;
-    align-items: start;
-    min-width: 150px;
-
-    [class*="span-all"],
-    [class*="header"] {
-        grid-column: 1 / 3;
+  display: grid;
+  grid-row-gap: $interiorMarginSm;
+  grid-template-columns: 1fr 2fr;
+  align-items: start;
+  min-width: 150px;
+
+  [class*='span-all'],
+  [class*='header'] {
+    grid-column: 1 / 3;
+  }
+
+  + .c-inspect-properties {
+    margin-top: $interiorMarginLg;
+  }
+
+  &__section,
+  &__row {
+    display: contents;
+  }
+
+  &__row + &__row,
+  &__section + &__section {
+    [class*='__label'],
+    [class*='__value'] {
+      // Row borders, effected via border-top on child elements of the row
+      border-top: 1px solid $colorInteriorBorder;
     }
+  }
 
-    + .c-inspect-properties {
-        margin-top: $interiorMarginLg;
-    }
+  &__label,
+  &__value {
+    padding: 3px $interiorMarginLg 3px 0;
+  }
 
-    &__section,
-    &__row {
-        display: contents;
-    }
+  &__label,
+  &__hint {
+    color: $colorInspectorPropName;
 
-    &__row + &__row,
-    &__section + &__section {
-        [class*="__label"],
-        [class*="__value"] {
-            // Row borders, effected via border-top on child elements of the row
-            border-top: 1px solid $colorInspectorSectionHeaderBg;
-        }
+    &[title]:not([title='']) {
+      // When a cell has a title, assume it's helpful text
+      cursor: help;
     }
+  }
 
-    &__label,
-    &__value {
-        padding: 3px $interiorMarginLg 3px 0;
+  &__value {
+    color: $colorInspectorPropVal;
+    &:first-child {
+      // If there is no preceding .label element, make value span columns
+      grid-column: 1 / 3;
     }
+  }
+}
 
+.is-editing {
+  .c-inspect-properties {
+    &__value,
     &__label {
-        color: $colorInspectorPropName;
-
-        &[title]:not([title=""]) {
-            // When a cell has a title, assume it's helpful text
-            cursor: help;
-        }
+      line-height: 160%; // Prevent buttons/selects from overlapping when wrapping
     }
-
-    &__value {
-        color: $colorInspectorPropVal;
-        word-break: break-all;
-        &:first-child {
-            // If there is no preceding .label element, make value span columns
-            grid-column: 1 / 3;
-        }
+  }
+  .grid-row--pad-label-for-button {
+    // Add extra space at the top of the label grid cell because there's a button to the right
+    [class*='label'] {
+      line-height: 1.8em;
     }
+  }
+
+  .c-location {
+    // Always make the location element span columns
+    grid-column: 1 / 3;
+  }
 }
 
 /********************************************* INSPECTOR PROPERTIES TAB */
 .c-saved-style {
-    cursor: default;
+  cursor: default;
 }
 
 /********************************************* LEGACY SUPPORT */
 .c-inspector {
-    // FilterField.vue
-    .u-contents + .u-contents {
-        li.grid-row > * {
-            border-top: 1px solid $colorInspectorSectionHeaderBg;
-        }
+  // FilterField.vue
+  .u-contents + .u-contents {
+    li.grid-row > * {
+      border-top: 1px solid $colorInspectorSectionHeaderBg;
     }
+  }
 
-    li.grid-row + li.grid-row {
-        > * {
-            border-top: 1px solid $colorInspectorSectionHeaderBg;
-        }
-    }
-
-    li.grid-row .label {
-        color: $colorInspectorPropName;
+  .grid-row + .grid-row {
+    > * {
+      border-top: 1px solid $colorInspectorSectionHeaderBg;
     }
-
-    li.grid-row .value {
-        color: $colorInspectorPropVal;
-        word-break: break-all;
-        &:first-child {
-            // If there is no preceding .label element, make value span columns
-            grid-column: 1 / 3;
-        }
+  }
+
+  .grid-row .label {
+    color: $colorInspectorPropName;
+  }
+
+  .grid-row .value {
+    color: $colorInspectorPropVal;
+    word-break: break-all;
+    &:first-child {
+      // If there is no preceding .label element, make value span columns
+      grid-column: 1 / 3;
     }
+  }
 }
diff --git a/src/ui/inspector/location.scss b/src/ui/inspector/location.scss
deleted file mode 100644
index e826fa14874..00000000000
--- a/src/ui/inspector/location.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-.c-path,
-.c-location {
-    // Path is two or more items, not clickable
-    // Location used in Inspector, is clickable
-    display: flex;
-
-    &__item {
-        display: flex;
-        align-items: center;
-        min-width: 0;
-
-        &:not(:last-child) {
-            &:after {
-                color: $colorInspectorPropName;
-                content: $glyph-icon-arrow-right;
-                font-family: symbolsfont;
-                font-size: 0.7em;
-                margin-left: $interiorMarginSm;
-                opacity: 0.8;
-            }
-        }
-    }
-}
-
-.c-location {
-    flex-wrap: wrap;
-
-    &__item {
-        cursor: pointer;
-        margin: 0 $interiorMarginSm $interiorMarginSm 0;
-
-        .c-object-label {
-            padding: 0;
-            transition: $transOut;
-
-            &__type-icon {
-                width: auto;
-                font-size: 1em;
-            }
-
-            &:hover {
-                transition: $transIn;
-                filter: $filterHov;
-            }
-        }
-    }
-}
diff --git a/src/ui/inspector/styles/FontStyleEditor.vue b/src/ui/inspector/styles/FontStyleEditor.vue
deleted file mode 100644
index 0a1e7cc53fb..00000000000
--- a/src/ui/inspector/styles/FontStyleEditor.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-<div class="c-toolbar">
-    <div ref="fontSizeMenu"
-         class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left"
-    >
-        <button
-            class="c-icon-button c-button--menu icon-font-size"
-            @click.prevent.stop="showFontSizeMenu"
-        >
-            <span class="c-button__label">{{ fontSizeLabel }}</span>
-        </button>
-    </div>
-    <div ref="fontMenu"
-         class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left"
-    >
-        <button
-            class="c-icon-button c-button--menu icon-font"
-            @click.prevent.stop="showFontMenu"
-        >
-            <span class="c-button__label">{{ fontTypeLable }}</span>
-        </button>
-    </div>
-</div>
-</template>
-
-<script>
-import {
-    FONT_SIZES,
-    FONTS
-} from '@/ui/inspector/styles/constants';
-
-export default {
-    inject: ['openmct'],
-    props: {
-        fontStyle: {
-            type: Object,
-            required: true,
-            default: () => {
-                return {};
-            }
-        }
-    },
-    computed: {
-        fontTypeLable() {
-            const fontType = FONTS.find(f => f.value === this.fontStyle.font);
-            if (!fontType) {
-                return '??';
-            }
-
-            return fontType.name || fontType.value || FONTS[0].name;
-        },
-        fontSizeLabel() {
-            const fontSize = FONT_SIZES.find(f => f.value === this.fontStyle.fontSize);
-            if (!fontSize) {
-                return '??';
-            }
-
-            return fontSize.name || fontSize.value || FONT_SIZES[0].name;
-        },
-        fontMenu() {
-            return FONTS.map(font => {
-                return {
-                    cssClass: font.cssClass || '',
-                    name: font.name,
-                    description: font.name,
-                    onItemClicked: () => this.setFont(font.value)
-                };
-            });
-        },
-        fontSizeMenu() {
-            return FONT_SIZES.map(fontSize => {
-                return {
-                    cssClass: fontSize.cssClass || '',
-                    name: fontSize.name,
-                    description: fontSize.name,
-                    onItemClicked: () => this.setFontSize(fontSize.value)
-                };
-            });
-        }
-    },
-    methods: {
-        setFont(font) {
-            this.$emit('set-font-property', { font });
-        },
-        setFontSize(fontSize) {
-            this.$emit('set-font-property', { fontSize });
-        },
-        showFontMenu() {
-            const elementBoundingClientRect = this.$refs.fontMenu.getBoundingClientRect();
-            const x = elementBoundingClientRect.x;
-            const y = elementBoundingClientRect.bottom;
-
-            this.openmct.menus.showMenu(x, y, this.fontMenu);
-        },
-        showFontSizeMenu() {
-            const elementBoundingClientRect = this.$refs.fontSizeMenu.getBoundingClientRect();
-            const x = elementBoundingClientRect.x;
-            const y = elementBoundingClientRect.bottom;
-
-            this.openmct.menus.showMenu(x, y, this.fontSizeMenu);
-        }
-    }
-};
-</script>
diff --git a/src/ui/inspector/styles/SavedStyleSelector.vue b/src/ui/inspector/styles/SavedStyleSelector.vue
deleted file mode 100644
index b92630b54f5..00000000000
--- a/src/ui/inspector/styles/SavedStyleSelector.vue
+++ /dev/null
@@ -1,195 +0,0 @@
-/*****************************************************************************
-* Open MCT, Copyright (c) 2014-2021, United States Government
-* as represented by the Administrator of the National Aeronautics and Space
-* Administration. All rights reserved.
-*
-* Open MCT is licensed under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-* http://www.apache.org/licenses/LICENSE-2.0.
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-* License for the specific language governing permissions and limitations
-* under the License.
-*
-* Open MCT includes source code licensed under additional open source
-* licenses. See the Open Source Licenses file (LICENSES.md) included with
-* this source code distribution or the Licensing information page available
-* at runtime from the About dialog for additional information.
-*****************************************************************************/
-
-<template>
-<div>
-    <div class="c-style c-style--saved has-local-controls c-toolbar">
-        <div class="c-style__controls"
-             :title="description"
-             @click="selectStyle()"
-        >
-            <div
-                class="c-style-thumb"
-                :style="thumbStyle"
-            >
-                <span
-                    class="c-style-thumb__text u-style-receiver js-style-receiver"
-                    :class="{ 'hide-nice': !hasProperty(savedStyle.color) }"
-                    :data-font="savedStyle.font"
-                >
-                    {{ thumbLabel }}
-                </span>
-            </div>
-            <div
-                class="c-icon-button c-icon-button--disabled c-icon-button--swatched icon-line-horz"
-                title="Border color"
-            >
-                <div
-                    class="c-swatch"
-                    :style="{
-                        background: borderColor
-                    }"
-                ></div>
-            </div>
-            <div
-                class="c-icon-button c-icon-button--disabled c-icon-button--swatched icon-paint-bucket"
-                title="Background color"
-            >
-                <div
-                    class="c-swatch"
-                    :style="{ background: savedStyle.backgroundColor }"
-                ></div>
-            </div>
-            <div
-                class="c-icon-button c-icon-button--disabled c-icon-button--swatched icon-font"
-                title="Text color"
-            >
-                <div
-                    class="c-swatch"
-                    :style="{ background: savedStyle.color }"
-                ></div>
-            </div>
-        </div>
-
-        <div
-            v-if="canDeleteStyle"
-            class="c-style__button-delete c-local-controls--show-on-hover"
-        >
-            <div
-                class="c-icon-button icon-trash"
-                title="Delete this saved style"
-                @click.stop="deleteStyle()"
-            >
-            </div>
-        </div>
-    </div>
-</div>
-</template>
-
-<script>
-export default {
-    name: 'SavedStyleSelector',
-    inject: [
-        'openmct',
-        'stylesManager'
-    ],
-    props: {
-        isEditing: {
-            type: Boolean,
-            required: true
-        },
-        savedStyle: {
-            type: Object,
-            required: true
-        }
-    },
-    data() {
-        return {
-            expanded: false
-        };
-    },
-    computed: {
-        borderColor() {
-            return this.savedStyle.border.substring(this.savedStyle.border.indexOf('#'));
-        },
-        thumbStyle() {
-            return {
-                border: this.savedStyle.border,
-                backgroundColor: this.savedStyle.backgroundColor,
-                color: this.savedStyle.color
-            };
-        },
-        thumbLabel() {
-            return this.savedStyle.fontSize !== 'default' ? `${this.savedStyle.fontSize}px` : 'ABC';
-        },
-        description() {
-            const fill = `Fill: ${this.savedStyle.backgroundColor || 'none'}`;
-            const border = `Border: ${this.savedStyle.border || 'none'}`;
-            const color = `Text Color: ${this.savedStyle.color || 'default'}`;
-            const fontSize = this.savedStyle.fontSize ? `Font Size: ${this.savedStyle.fontSize}` : '';
-            const font = this.savedStyle.font ? `Font Style: ${this.savedStyle.font}` : '';
-
-            // Note: lack of indention in the return string is deliberate, it affects how the text is rendered
-            return `Click to apply this style:
-${fill}
-${border}
-${color}
-${fontSize}
-${font}`;
-        },
-        canDeleteStyle() {
-            return this.isEditing;
-        }
-    },
-    methods: {
-        selectStyle() {
-            if (this.isEditing) {
-                this.stylesManager.select(this.savedStyle);
-            }
-        },
-        deleteStyle() {
-            this.showDeleteStyleDialog()
-                .then(() => {
-                    this.$emit('delete-style');
-                })
-                .catch(() => {});
-        },
-        showDeleteStyleDialog(style) {
-            const message = `
-                This will delete this saved style.
-                This action will not effect styling that has already been applied.
-                Do you want to continue?
-            `;
-
-            return new Promise((resolve, reject) => {
-                let dialog = this.openmct.overlays.dialog({
-                    title: 'Delete Saved Style',
-                    iconClass: 'alert',
-                    message: message,
-                    buttons: [
-                        {
-                            label: 'OK',
-                            callback: () => {
-                                dialog.dismiss();
-                                resolve();
-                            }
-                        },
-                        {
-                            label: 'Cancel',
-                            callback: () => {
-                                dialog.dismiss();
-                                reject();
-                            }
-                        }
-                    ]
-                });
-            });
-        },
-        hasProperty(property) {
-            return property !== undefined;
-        },
-        toggleExpanded() {
-            this.expanded = !this.expanded;
-        }
-    }
-};
-</script>
diff --git a/src/ui/inspector/styles/SavedStylesInspectorView.vue b/src/ui/inspector/styles/SavedStylesInspectorView.vue
deleted file mode 100644
index 310feebcb09..00000000000
--- a/src/ui/inspector/styles/SavedStylesInspectorView.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-/*****************************************************************************
-* Open MCT, Copyright (c) 2014-2021, United States Government
-* as represented by the Administrator of the National Aeronautics and Space
-* Administration. All rights reserved.
-*
-* Open MCT is licensed under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-* http://www.apache.org/licenses/LICENSE-2.0.
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-* License for the specific language governing permissions and limitations
-* under the License.
-*
-* Open MCT includes source code licensed under additional open source
-* licenses. See the Open Source Licenses file (LICENSES.md) included with
-* this source code distribution or the Licensing information page available
-* at runtime from the About dialog for additional information.
-*****************************************************************************/
-
-<template>
-<div class="u-contents"></div>
-</template>
-
-<script>
-import SavedStylesView from '@/ui/inspector/styles/SavedStylesView.vue';
-import Vue from 'vue';
-
-export default {
-    inject: ['openmct', 'stylesManager'],
-    data() {
-        return {
-            selection: []
-        };
-    },
-    mounted() {
-        this.openmct.selection.on('change', this.updateSelection);
-        this.updateSelection(this.openmct.selection.get());
-    },
-    destroyed() {
-        this.openmct.selection.off('change', this.updateSelection);
-    },
-    methods: {
-        updateSelection(selection) {
-            if (selection.length > 0 && selection[0].length > 0) {
-                if (this.component) {
-                    this.component.$destroy();
-                    this.component = undefined;
-                    this.$el.innerHTML = '';
-                }
-
-                let viewContainer = document.createElement('div');
-                this.$el.append(viewContainer);
-                this.component = new Vue({
-                    el: viewContainer,
-                    components: {
-                        SavedStylesView
-                    },
-                    provide: {
-                        openmct: this.openmct,
-                        selection: selection,
-                        stylesManager: this.stylesManager
-                    },
-                    template: '<saved-styles-view />'
-                });
-            }
-        }
-    }
-};
-</script>
diff --git a/src/ui/inspector/styles/SavedStylesView.vue b/src/ui/inspector/styles/SavedStylesView.vue
deleted file mode 100644
index f5be86fdf3e..00000000000
--- a/src/ui/inspector/styles/SavedStylesView.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-/*****************************************************************************
-* Open MCT, Copyright (c) 2014-2021, United States Government
-* as represented by the Administrator of the National Aeronautics and Space
-* Administration. All rights reserved.
-*
-* Open MCT is licensed under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-* http://www.apache.org/licenses/LICENSE-2.0.
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-* License for the specific language governing permissions and limitations
-* under the License.
-*
-* Open MCT includes source code licensed under additional open source
-* licenses. See the Open Source Licenses file (LICENSES.md) included with
-* this source code distribution or the Licensing information page available
-* at runtime from the About dialog for additional information.
-*****************************************************************************/
-
-<template>
-<div class="c-inspector__saved-styles c-inspect-styles">
-    <div class="c-inspect-styles__content">
-        <div class="c-inspect-styles__saved-styles">
-            <saved-style-selector
-                v-for="(savedStyle, index) in savedStyles"
-                :key="index"
-                class="c-inspect-styles__saved-style"
-                :is-editing="isEditing"
-                :saved-style="savedStyle"
-                @delete-style="deleteStyle(index)"
-            />
-        </div>
-    </div>
-</div>
-</template>
-
-<script>
-import SavedStyleSelector from '@/ui/inspector/styles/SavedStyleSelector.vue';
-
-export default {
-    name: 'SavedStylesView',
-    components: {
-        SavedStyleSelector
-    },
-    inject: [
-        'openmct',
-        'selection',
-        'stylesManager'
-    ],
-    data() {
-        return {
-            isEditing: this.openmct.editor.isEditing(),
-            savedStyles: undefined
-        };
-    },
-    mounted() {
-        this.openmct.editor.on('isEditing', this.setIsEditing);
-        this.stylesManager.on('stylesUpdated', this.setStyles);
-        this.stylesManager.on('limitReached', this.showLimitReachedDialog);
-        this.stylesManager.on('persistError', this.showPersistErrorDialog);
-
-        this.loadStyles();
-    },
-    destroyed() {
-        this.openmct.editor.off('isEditing', this.setIsEditing);
-        this.stylesManager.off('stylesUpdated', this.setStyles);
-        this.stylesManager.off('limitReached', this.showLimitReachedDialog);
-        this.stylesManager.off('persistError', this.showPersistErrorDialog);
-    },
-    methods: {
-        setIsEditing(isEditing) {
-            this.isEditing = isEditing;
-        },
-        loadStyles() {
-            const styles = this.stylesManager.load();
-
-            this.setStyles(styles);
-        },
-        setStyles(styles) {
-            this.savedStyles = styles;
-        },
-        showLimitReachedDialog(limit) {
-            const message = `
-                You have reached the limit on the number of saved styles.
-                Please delete one or more saved styles and try again.
-            `;
-
-            let dialog = this.openmct.overlays.dialog({
-                title: 'Saved Styles Limit',
-                iconClass: 'alert',
-                message: message,
-                buttons: [
-                    {
-                        label: 'OK',
-                        callback: () => {
-                            dialog.dismiss();
-                        }
-                    }
-                ]
-            });
-        },
-        showPersistErrorDialog() {
-            const message = `
-                Problem encountered saving styles.
-                Try again or delete one or more styles before trying again.
-            `;
-            let dialog = this.openmct.overlays.dialog({
-                title: 'Error Saving Style',
-                iconClass: 'error',
-                message: message,
-                buttons: [
-                    {
-                        label: 'OK',
-                        callback: () => {
-                            dialog.dismiss();
-                        }
-                    }
-                ]
-            });
-        },
-        deleteStyle(index) {
-            this.stylesManager.delete(index);
-        }
-    }
-};
-</script>
diff --git a/src/ui/inspector/styles/StylesInspectorView.vue b/src/ui/inspector/styles/StylesInspectorView.vue
deleted file mode 100644
index e54a5713e52..00000000000
--- a/src/ui/inspector/styles/StylesInspectorView.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-/*****************************************************************************
-* Open MCT, Copyright (c) 2014-2021, United States Government
-* as represented by the Administrator of the National Aeronautics and Space
-* Administration. All rights reserved.
-*
-* Open MCT is licensed under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-* http://www.apache.org/licenses/LICENSE-2.0.
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-* License for the specific language governing permissions and limitations
-* under the License.
-*
-* Open MCT includes source code licensed under additional open source
-* licenses. See the Open Source Licenses file (LICENSES.md) included with
-* this source code distribution or the Licensing information page available
-* at runtime from the About dialog for additional information.
-*****************************************************************************/
-
-<template>
-<div class="u-contents"></div>
-</template>
-
-<script>
-import StylesView from '@/plugins/condition/components/inspector/StylesView.vue';
-import Vue from 'vue';
-
-export default {
-    inject: ['openmct', 'stylesManager'],
-    data() {
-        return {
-            selection: []
-        };
-    },
-    mounted() {
-        this.openmct.selection.on('change', this.updateSelection);
-        this.updateSelection(this.openmct.selection.get());
-    },
-    destroyed() {
-        this.openmct.selection.off('change', this.updateSelection);
-    },
-    methods: {
-        updateSelection(selection) {
-            if (selection.length > 0 && selection[0].length > 0) {
-                if (this.component) {
-                    this.component.$destroy();
-                    this.component = undefined;
-                    this.$el.innerHTML = '';
-                }
-
-                let viewContainer = document.createElement('div');
-                this.$el.append(viewContainer);
-                this.component = new Vue({
-                    provide: {
-                        openmct: this.openmct,
-                        selection: selection,
-                        stylesManager: this.stylesManager
-                    },
-                    el: viewContainer,
-                    components: {
-                        StylesView
-                    },
-                    template: '<styles-view/>'
-                });
-            }
-        }
-    }
-};
-</script>
diff --git a/src/ui/inspector/styles/StylesManager.js b/src/ui/inspector/styles/StylesManager.js
deleted file mode 100644
index 425a5b9888d..00000000000
--- a/src/ui/inspector/styles/StylesManager.js
+++ /dev/null
@@ -1,126 +0,0 @@
-import EventEmitter from 'EventEmitter';
-
-const LOCAL_STORAGE_KEY = 'mct-saved-styles';
-const LIMIT = 20;
-
-/**
- * @typedef {Object} Style
- * @property {*} property
- */
-class StylesManager extends EventEmitter {
-    load() {
-        let styles = window.localStorage.getItem(LOCAL_STORAGE_KEY);
-        styles = styles ? JSON.parse(styles) : [];
-
-        return styles;
-    }
-
-    save(style) {
-        const normalizedStyle = this.normalizeStyle(style);
-        const styles = this.load();
-
-        if (!this.isSaveLimitReached(styles)) {
-            styles.unshift(normalizedStyle);
-
-            if (this.persist(styles)) {
-                this.emit('stylesUpdated', styles);
-            }
-        }
-    }
-
-    delete(index) {
-        const styles = this.load();
-        styles.splice(index, 1);
-
-        if (this.persist(styles)) {
-            this.emit('stylesUpdated', styles);
-        }
-    }
-
-    select(style) {
-        this.emit('styleSelected', style);
-    }
-
-    /**
-     * @private
-     */
-    normalizeStyle(style) {
-        const normalizedStyle = this.getBaseStyleObject();
-
-        Object.keys(normalizedStyle).forEach(property => {
-            const value = style[property];
-            if (value !== undefined) {
-                normalizedStyle[property] = value;
-            }
-        });
-
-        return normalizedStyle;
-    }
-
-    /**
-     * @private
-     */
-    getBaseStyleObject() {
-        return {
-            backgroundColor: '',
-            border: '',
-            color: '',
-            fontSize: 'default',
-            font: 'default'
-        };
-    }
-
-    /**
-     * @private
-     */
-    isSaveLimitReached(styles) {
-        if (styles.length >= LIMIT) {
-            this.emit('limitReached');
-
-            return true;
-        }
-
-        return false;
-    }
-
-    /**
-     * @private
-     */
-    isExistingStyle(style, styles) {
-        return styles.some(existingStyle => this.isEqual(style, existingStyle));
-    }
-
-    /**
-     * @private
-     */
-    persist(styles) {
-        try {
-            window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(styles));
-
-            return true;
-        } catch (e) {
-            this.emit('persistError');
-        }
-
-        return false;
-    }
-
-    /**
-     * @private
-     */
-    isEqual(style1, style2) {
-        const keys = Object.keys(Object.assign({}, style1, style2));
-        const different = keys.some(key => (!style1[key] && style2[key])
-            || (style1[key] && !style2[key])
-            || (style1[key] !== style2[key])
-        );
-
-        return !different;
-    }
-}
-
-const stylesManager = new StylesManager();
-// breaks on adding listener later
-// Object.freeze(stylesManager);
-
-export default stylesManager;
diff --git a/src/ui/inspector/styles/constants.js b/src/ui/inspector/styles/constants.js
deleted file mode 100644
index 320ca19662a..00000000000
--- a/src/ui/inspector/styles/constants.js
+++ /dev/null
@@ -1,109 +0,0 @@
-export const FONT_SIZES = [
-    {
-        name: 'Default',
-        value: 'default'
-    },
-    {
-        name: '8px',
-        value: '8'
-    },
-    {
-        name: '9px',
-        value: '9'
-    },
-    {
-        name: '10px',
-        value: '10'
-    },
-    {
-        name: '11px',
-        value: '11'
-    },
-    {
-        name: '12px',
-        value: '12'
-    },
-    {
-        name: '13px',
-        value: '13'
-    },
-    {
-        name: '14px',
-        value: '14'
-    },
-    {
-        name: '16px',
-        value: '16'
-    },
-    {
-        name: '18px',
-        value: '18'
-    },
-    {
-        name: '20px',
-        value: '20'
-    },
-    {
-        name: '24px',
-        value: '24'
-    },
-    {
-        name: '28px',
-        value: '28'
-    },
-    {
-        name: '32px',
-        value: '32'
-    },
-    {
-        name: '36px',
-        value: '36'
-    },
-    {
-        name: '42px',
-        value: '42'
-    },
-    {
-        name: '48px',
-        value: '48'
-    },
-    {
-        name: '72px',
-        value: '72'
-    },
-    {
-        name: '96px',
-        value: '96'
-    },
-    {
-        name: '128px',
-        value: '128'
-    }
-];
-
-export const FONTS = [
-    {
-        name: 'Default',
-        value: 'default'
-    },
-    {
-        name: 'Bold',
-        value: 'default-bold'
-    },
-    {
-        name: 'Narrow',
-        value: 'narrow'
-    },
-    {
-        name: 'Narrow Bold',
-        value: 'narrow-bold'
-    },
-    {
-        name: 'Monospace',
-        value: 'monospace'
-    },
-    {
-        name: 'Monospace Bold',
-        value: 'monospace-bold'
-    }
-];
diff --git a/src/ui/layout/AboutDialog.vue b/src/ui/layout/AboutDialog.vue
index c2fc25f00be..9954500aa7f 100644
--- a/src/ui/layout/AboutDialog.vue
+++ b/src/ui/layout/AboutDialog.vue
@@ -1,52 +1,88 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<!-- eslint-disable vue/no-v-html -->
-<div class="c-about c-about--splash">
-    <div class="c-about__image c-splash-image"></div>
+  <!-- eslint-disable vue/no-v-html -->
+  <div class="c-about c-about--splash">
+    <div class="c-about__image c-splash-image" role="img" alt="Open MCT Splash Logo"></div>
     <div class="c-about__text s-text">
-        <div
-            v-if="branding.aboutHtml"
-            class="c-about__text__element"
-            v-html="branding.aboutHtml"
-        ></div>
-        <div class="c-about__text__element">
-            <h1 class="l-title s-title">
-                Open MCT
-            </h1>
-            <div class="l-description s-description">
-                <p>Open MCT, Copyright &copy; 2014-2021, United States Government as represented by the Administrator of the National Aeronautics and Space Administration. All rights reserved.</p>
-                <p>
-                    Open MCT is licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.  You may obtain a copy of the License at <a
-                        target="_blank"
-                        href="http://www.apache.org/licenses/LICENSE-2.0"
-                    >http://www.apache.org/licenses/LICENSE-2.0</a>.
-                </p>
-                <p>Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.</p>
-                <p>Open MCT includes source code licensed under additional open source licenses. See the Open Source Licenses file included with this distribution or <a @click="showLicenses">click here for third party licensing information</a>.</p>
-            </div>
-            <h2>Version Information</h2>
-            <ul class="t-info l-info s-info">
-                <li>Version: {{ buildInfo.version || 'Unknown' }}</li>
-                <li>Build Date: {{ buildInfo.buildDate || 'Unknown' }}</li>
-                <li>Revision: {{ buildInfo.revision || 'Unknown' }}</li>
-                <li>Branch: {{ buildInfo.branch || 'Unknown' }}</li>
-            </ul>
+      <div
+        v-if="branding.aboutHtml"
+        class="c-about__text__element"
+        v-html="branding.aboutHtml"
+      ></div>
+      <div class="c-about__text__element">
+        <h1 class="l-title s-title">Open MCT</h1>
+        <div class="l-description s-description">
+          <p>
+            Open MCT, Copyright &copy; 2014-2023, United States Government as represented by the
+            Administrator of the National Aeronautics and Space Administration. All rights reserved.
+          </p>
+          <p>
+            Open MCT is licensed under the Apache License, Version 2.0 (the "License"); you may not
+            use this file except in compliance with the License. You may obtain a copy of the
+            License at
+            <a
+              target="_blank"
+              href="http://www.apache.org/licenses/LICENSE-2.0"
+              rel="noopener noreferrer"
+              >http://www.apache.org/licenses/LICENSE-2.0</a
+            >.
+          </p>
+          <p>
+            Unless required by applicable law or agreed to in writing, software distributed under
+            the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+            KIND, either express or implied. See the License for the specific language governing
+            permissions and limitations under the License.
+          </p>
+          <p>
+            Open MCT includes source code licensed under additional open source licenses. See the
+            Open Source Licenses file included with this distribution or
+            <a @click="showLicenses">click here for third party licensing information</a>.
+          </p>
         </div>
+        <h2>Version Information</h2>
+        <ul id="versionInformation" class="t-info l-info s-info">
+          <li aria-label="Version Number">Version: {{ buildInfo.version || 'Unknown' }}</li>
+          <li aria-label="Build Date">Build Date: {{ buildInfo.buildDate || 'Unknown' }}</li>
+          <li aria-label="Revision">Revision: {{ buildInfo.revision || 'Unknown' }}</li>
+          <li aria-label="Branch">Branch: {{ buildInfo.branch || 'Unknown' }}</li>
+        </ul>
+      </div>
     </div>
-</div>
+  </div>
 </template>
 <script>
 export default {
-    inject: ['openmct'],
-    data() {
-        return {
-            branding: JSON.parse(JSON.stringify(this.openmct.branding())),
-            buildInfo: JSON.parse(JSON.stringify(this.openmct.buildInfo))
-        };
-    },
-    methods: {
-        showLicenses() {
-            window.open('#/licenses');
-        }
+  inject: ['openmct'],
+  data() {
+    return {
+      branding: JSON.parse(JSON.stringify(this.openmct.branding())),
+      buildInfo: JSON.parse(JSON.stringify(this.openmct.buildInfo))
+    };
+  },
+  methods: {
+    showLicenses() {
+      window.open('#/licenses');
     }
+  }
 };
 </script>
diff --git a/src/ui/layout/AppLayout.vue b/src/ui/layout/AppLayout.vue
new file mode 100644
index 00000000000..e57cbac5e6b
--- /dev/null
+++ b/src/ui/layout/AppLayout.vue
@@ -0,0 +1,320 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div
+    class="l-shell"
+    :class="{
+      'is-editing': isEditing
+    }"
+  >
+    <div id="splash-screen"></div>
+
+    <div
+      class="l-shell__head"
+      :class="{
+        'l-shell__head--expanded': headExpanded,
+        'l-shell__head--minify-indicators': !headExpanded
+      }"
+    >
+      <CreateButton class="l-shell__create-button" />
+      <GrandSearch ref="grand-search" />
+      <StatusIndicators />
+      <button
+        class="l-shell__head__collapse-button c-icon-button"
+        :class="
+          headExpanded
+            ? 'l-shell__head__collapse-button--collapse'
+            : 'l-shell__head__collapse-button--expand'
+        "
+        :aria-label="`Click to ${headExpanded ? 'collapse' : 'expand'} items`"
+        :title="`Click to ${headExpanded ? 'collapse' : 'expand'} items`"
+        @click="toggleShellHead"
+      ></button>
+      <notification-banner />
+      <div class="l-shell__head-section l-shell__controls">
+        <button
+          class="c-icon-button c-icon-button--major icon-new-window"
+          title="Open in a new browser tab"
+          target="_blank"
+          @click="openInNewTab"
+        ></button>
+        <button
+          :class="[
+            'c-icon-button c-icon-button--major',
+            fullScreen ? 'icon-fullscreen-collapse' : 'icon-fullscreen-expand'
+          ]"
+          :aria-label="`${fullScreen ? 'Exit' : 'Enable'} full screen mode`"
+          :title="`${fullScreen ? 'Exit' : 'Enable'} full screen mode`"
+          @click="fullScreenToggle"
+        ></button>
+      </div>
+      <app-logo />
+    </div>
+
+    <div class="l-shell__drawer c-drawer c-drawer--push c-drawer--align-top"></div>
+
+    <multipane class="l-shell__main" :class="[resizingClass]" type="horizontal">
+      <pane
+        class="l-shell__pane-tree"
+        handle="after"
+        label="Browse"
+        hide-param="hideTree"
+        :persist-position="true"
+        @start-resizing="onStartResizing"
+        @end-resizing="onEndResizing"
+      >
+        <template #controls>
+          <button
+            class="c-icon-button l-shell__reset-tree-button icon-folders-collapse"
+            aria-label="Collapse all tree items"
+            title="Collapse all tree items"
+            @click="handleTreeReset"
+          ></button>
+          <button
+            class="c-icon-button l-shell__sync-tree-button icon-target"
+            aria-label="Show selected item in tree"
+            title="Show selected item in tree"
+            @click="handleSyncTreeNavigation"
+          ></button>
+        </template>
+        <multipane type="vertical">
+          <pane>
+            <mct-tree
+              ref="mctTree"
+              :sync-tree-navigation="triggerSync"
+              :reset-tree-navigation="triggerReset"
+              class="l-shell__tree"
+            />
+          </pane>
+          <pane
+            handle="before"
+            label="Recently Viewed"
+            :persist-position="true"
+            collapse-type="horizontal"
+            hide-param="hideRecents"
+          >
+            <RecentObjectsList
+              ref="recentObjectsList"
+              class="l-shell__tree"
+              @open-and-scroll-to="openAndScrollTo($event)"
+              @set-clear-button-disabled="setClearButtonDisabled"
+            />
+            <template #controls>
+              <button
+                class="c-icon-button icon-clear-data"
+                aria-label="Clear Recently Viewed"
+                title="Clear Recently Viewed"
+                :disabled="disableClearButton"
+                @click="handleClearRecentObjects"
+              ></button>
+            </template>
+          </pane>
+        </multipane>
+      </pane>
+      <pane class="l-shell__pane-main" role="main">
+        <browse-bar
+          ref="browseBar"
+          class="l-shell__main-view-browse-bar"
+          :action-collection="actionCollection"
+          @sync-tree-navigation="handleSyncTreeNavigation"
+        />
+        <toolbar v-if="toolbar" class="l-shell__toolbar" />
+        <object-view
+          ref="browseObject"
+          class="l-shell__main-container js-main-container js-notebook-snapshot-item"
+          data-selectable
+          :show-edit-view="true"
+          @change-action-collection="setActionCollection"
+        />
+        <component :is="conductorComponent" class="l-shell__time-conductor" />
+      </pane>
+      <pane
+        class="l-shell__pane-inspector l-pane--holds-multipane"
+        handle="before"
+        label="Inspect"
+        hide-param="hideInspector"
+        :persist-position="true"
+        @start-resizing="onStartResizing"
+        @end-resizing="onEndResizing"
+      >
+        <Inspector ref="inspector" :is-editing="isEditing" />
+      </pane>
+    </multipane>
+  </div>
+</template>
+
+<script>
+import ObjectView from '../components/ObjectView.vue';
+import Inspector from '../inspector/InspectorPanel.vue';
+import Toolbar from '../toolbar/ToolbarContainer.vue';
+import AppLogo from './AppLogo.vue';
+import BrowseBar from './BrowseBar.vue';
+import CreateButton from './CreateButton.vue';
+import MctTree from './MctTree.vue';
+import Multipane from './MultipaneContainer.vue';
+import Pane from './PaneContainer.vue';
+import RecentObjectsList from './RecentObjectsList.vue';
+import GrandSearch from './search/GrandSearch.vue';
+import NotificationBanner from './status-bar/NotificationBanner.vue';
+import StatusIndicators from './status-bar/StatusIndicators.vue';
+
+export default {
+  components: {
+    Inspector,
+    MctTree,
+    ObjectView,
+    CreateButton,
+    GrandSearch,
+    Multipane,
+    Pane,
+    BrowseBar,
+    Toolbar,
+    AppLogo,
+    StatusIndicators,
+    NotificationBanner,
+    RecentObjectsList
+  },
+  inject: ['openmct'],
+  data: function () {
+    let storedHeadProps = window.localStorage.getItem('openmct-shell-head');
+    let headExpanded = true;
+    if (storedHeadProps) {
+      headExpanded = JSON.parse(storedHeadProps).expanded;
+    }
+
+    return {
+      fullScreen: false,
+      conductorComponent: undefined,
+      isEditing: false,
+      hasToolbar: false,
+      actionCollection: undefined,
+      triggerSync: false,
+      triggerReset: false,
+      headExpanded,
+      isResizing: false,
+      disableClearButton: false
+    };
+  },
+  computed: {
+    toolbar() {
+      return this.hasToolbar && this.isEditing;
+    },
+    resizingClass() {
+      return this.isResizing ? 'l-shell__resizing' : '';
+    }
+  },
+  mounted() {
+    this.openmct.editor.on('isEditing', (isEditing) => {
+      this.isEditing = isEditing;
+    });
+
+    this.openmct.selection.on('change', this.toggleHasToolbar);
+  },
+  methods: {
+    enterFullScreen() {
+      let docElm = document.documentElement;
+
+      if (docElm.requestFullscreen) {
+        docElm.requestFullscreen();
+      } else if (docElm.mozRequestFullScreen) {
+        /* Firefox */
+        docElm.mozRequestFullScreen();
+      } else if (docElm.webkitRequestFullscreen) {
+        /* Chrome, Safari and Opera */
+        docElm.webkitRequestFullscreen();
+      } else if (docElm.msRequestFullscreen) {
+        /* IE/Edge */
+        docElm.msRequestFullscreen();
+      }
+    },
+    exitFullScreen() {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.webkitCancelFullScreen) {
+        document.webkitCancelFullScreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      }
+    },
+    toggleShellHead() {
+      this.headExpanded = !this.headExpanded;
+
+      window.localStorage.setItem(
+        'openmct-shell-head',
+        JSON.stringify({
+          expanded: this.headExpanded
+        })
+      );
+    },
+    fullScreenToggle() {
+      if (this.fullScreen) {
+        this.fullScreen = false;
+        this.exitFullScreen();
+      } else {
+        this.fullScreen = true;
+        this.enterFullScreen();
+      }
+    },
+    openInNewTab(event) {
+      window.open(window.location.href);
+    },
+    toggleHasToolbar(selection) {
+      let structure = undefined;
+
+      if (!selection || !selection[0]) {
+        structure = [];
+      } else {
+        structure = this.openmct.toolbars.get(selection);
+      }
+
+      this.hasToolbar = structure.length > 0;
+    },
+    openAndScrollTo(navigationPath) {
+      this.$refs.mctTree.openAndScrollTo(navigationPath);
+      this.$refs.mctTree.targetedPath = navigationPath;
+    },
+    setActionCollection(actionCollection) {
+      this.actionCollection = actionCollection;
+    },
+    handleSyncTreeNavigation() {
+      this.triggerSync = !this.triggerSync;
+    },
+    handleTreeReset() {
+      this.triggerReset = !this.triggerReset;
+    },
+    handleClearRecentObjects() {
+      this.$refs.recentObjectsList.clearRecentObjects();
+    },
+    onStartResizing() {
+      this.isResizing = true;
+    },
+    onEndResizing() {
+      this.isResizing = false;
+    },
+    setClearButtonDisabled(isDisabled) {
+      this.disableClearButton = isDisabled;
+    }
+  }
+};
+</script>
diff --git a/src/ui/layout/AppLogo.vue b/src/ui/layout/AppLogo.vue
index 27f9431bea3..9632b24cf1c 100644
--- a/src/ui/layout/AppLogo.vue
+++ b/src/ui/layout/AppLogo.vue
@@ -1,59 +1,70 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div
+  <div
     ref="aboutLogo"
     class="l-shell__app-logo"
+    role="button"
+    aria-label="About Modal"
     @click="launchAbout"
-></div>
+  ></div>
 </template>
 
 <script>
+import mount from 'utils/mount';
+
 import AboutDialog from './AboutDialog.vue';
-import Vue from 'vue';
 
 export default {
-    inject: ['openmct'],
-    mounted() {
-        let branding = this.openmct.branding();
-        if (branding.smallLogoImage) {
-            this.$refs.aboutLogo.style.backgroundImage = `url('${branding.smallLogoImage}')`;
-        }
-    },
-    methods: {
-        launchAbout() {
-            let vm = new Vue({
-                provide: {
-                    openmct: this.openmct
-                },
-                components: {AboutDialog},
-                template: '<about-dialog></about-dialog>'
-            }).$mount();
-
-            this.openmct.overlays.overlay({
-                element: vm.$el,
-                size: 'large'
-            });
+  inject: ['openmct'],
+  mounted() {
+    const branding = this.openmct.branding();
+    if (branding.smallLogoImage) {
+      this.$refs.aboutLogo.style.backgroundImage = `url('${branding.smallLogoImage}')`;
+    }
+  },
+  methods: {
+    launchAbout() {
+      const { el, destroy } = mount(
+        {
+          components: { AboutDialog },
+          provide: {
+            openmct: this.openmct
+          },
+          template: '<about-dialog></about-dialog>'
+        },
+        {
+          app: this.openmct.app
         }
+      );
+
+      el.classList.add('u-contents');
+
+      this.openmct.overlays.overlay({
+        element: el,
+        size: 'large',
+        onDestroy: destroy
+      });
     }
+  }
 };
 </script>
diff --git a/src/ui/layout/BrowseBar.vue b/src/ui/layout/BrowseBar.vue
index cd828626ecc..b71e601a43d 100644
--- a/src/ui/layout/BrowseBar.vue
+++ b/src/ui/layout/BrowseBar.vue
@@ -1,361 +1,428 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div class="l-browse-bar">
+  <div class="l-browse-bar">
     <div class="l-browse-bar__start">
-        <button
-            v-if="hasParent"
-            class="l-browse-bar__nav-to-parent-button c-icon-button c-icon-button--major icon-arrow-nav-to-parent"
-            title="Navigate up to parent"
-            @click="goToParent"
-        ></button>
-        <div
-            class="l-browse-bar__object-name--w c-object-label"
-            :class="[statusClass]"
-        >
-            <div class="c-object-label__type-icon"
-                 :class="type.cssClass"
-            >
-                <span class="is-status__indicator"
-                      :title="`This item is ${status}`"
-                ></span>
-            </div>
-            <span
-                class="l-browse-bar__object-name c-object-label__name"
-                :class="{ 'c-input-inline' : type.creatable}"
-                :contenteditable="type.creatable"
-                @blur="updateName"
-                @keydown.enter.prevent
-                @keyup.enter.prevent="updateNameOnEnterKeyPress"
-            >
-                {{ domainObject.name }}
-            </span>
+      <button
+        v-if="hasParent"
+        class="l-browse-bar__nav-to-parent-button c-icon-button c-icon-button--major icon-arrow-nav-to-parent"
+        title="Navigate up to parent"
+        @click="goToParent"
+      ></button>
+      <div class="l-browse-bar__object-name--w c-object-label" :class="[statusClass]">
+        <div class="c-object-label__type-icon" :class="type.cssClass">
+          <span class="is-status__indicator" :title="`This item is ${status}`"></span>
         </div>
+        <span
+          ref="objectName"
+          class="l-browse-bar__object-name c-object-label__name"
+          :class="{ 'c-input-inline': isPersistable }"
+          :contenteditable="isPersistable"
+          @blur="updateName"
+          @keydown.enter.prevent
+          @keyup.enter.prevent="updateNameOnEnterKeyPress"
+          @mouseover.ctrl="showToolTip"
+          @mouseleave="hideToolTip"
+        >
+          {{ domainObject.name }}
+        </span>
+      </div>
     </div>
 
     <div class="l-browse-bar__end">
-        <ViewSwitcher
-            v-if="!isEditing"
-            :current-view="currentView"
-            :views="views"
-        />
-        <!-- Action buttons -->
-        <NotebookMenuSwitcher v-if="notebookEnabled"
-                              :domain-object="domainObject"
-                              :object-path="openmct.router.path"
-                              class="c-notebook-snapshot-menubutton"
+      <div
+        v-if="supportsIndependentTime"
+        class="c-conductor-holder--compact l-shell__main-independent-time-conductor"
+      >
+        <independent-time-conductor
+          :domain-object="domainObject"
+          :object-path="openmct.router.path"
         />
-        <div class="l-browse-bar__actions">
-            <button
-                v-for="(item, index) in statusBarItems"
-                :key="index"
-                class="c-button"
-                :class="item.cssClass"
-                @click="item.onItemClicked"
-            >
-            </button>
-
-            <button
-                v-if="isViewEditable & !isEditing"
-                :title="lockedOrUnlockedTitle"
-                :class="{
-                    'c-button icon-lock': domainObject.locked,
-                    'c-icon-button icon-unlocked': !domainObject.locked
-                }"
-                @click="toggleLock(!domainObject.locked)"
-            ></button>
+      </div>
+      <ViewSwitcher v-if="!isEditing" :current-view="currentView" :views="views" />
+      <!-- Action buttons -->
+      <NotebookMenuSwitcher
+        v-if="notebookEnabled"
+        :domain-object="domainObject"
+        :object-path="openmct.router.path"
+        class="c-notebook-snapshot-menubutton"
+      />
+      <div class="l-browse-bar__actions">
+        <button
+          v-for="(item, index) in statusBarItems"
+          :key="index"
+          class="c-button"
+          :aria-label="item.name"
+          :title="item.name"
+          :class="item.cssClass"
+          @click="item.onItemClicked"
+        ></button>
 
-            <button
-                v-if="isViewEditable && !isEditing && !domainObject.locked"
-                class="l-browse-bar__actions__edit c-button c-button--major icon-pencil"
-                title="Edit"
-                @click="edit()"
-            ></button>
+        <button
+          v-if="isViewEditable & !isEditing"
+          :aria-label="lockedOrUnlockedTitle"
+          :title="lockedOrUnlockedTitle"
+          :class="{
+            'c-button icon-lock': domainObject.locked,
+            'c-icon-button icon-unlocked': !domainObject.locked
+          }"
+          @click="toggleLock(!domainObject.locked)"
+        ></button>
 
-            <div
-                v-if="isEditing"
-                class="l-browse-bar__view-switcher c-ctrl-wrapper c-ctrl-wrapper--menus-left"
-            >
-                <button
-                    class="c-button--menu c-button--major icon-save"
-                    title="Save"
-                    @click.stop="toggleSaveMenu"
-                ></button>
-                <div
-                    v-show="showSaveMenu"
-                    class="c-menu"
-                >
-                    <ul>
-                        <li
-                            class="icon-save"
-                            title="Save and Finish Editing"
-                            @click="saveAndFinishEditing"
-                        >
-                            Save and Finish Editing
-                        </li>
-                        <li
-                            class="icon-save"
-                            title="Save and Continue Editing"
-                            @click="saveAndContinueEditing"
-                        >
-                            Save and Continue Editing
-                        </li>
-                    </ul>
-                </div>
-            </div>
+        <button
+          v-if="isViewEditable && !isEditing && !domainObject.locked"
+          class="l-browse-bar__actions__edit c-button c-button--major icon-pencil"
+          title="Edit Object"
+          aria-label="Edit Object"
+          @click="edit()"
+        ></button>
 
-            <button
-                v-if="isEditing"
-                class="l-browse-bar__actions c-button icon-x"
-                title="Cancel Editing"
-                @click="promptUserandCancelEditing()"
-            ></button>
-            <button
-                class="l-browse-bar__actions c-icon-button icon-3-dots"
-                title="More options"
-                @click.prevent.stop="showMenuItems($event)"
-            ></button>
+        <div
+          v-if="isEditing"
+          class="l-browse-bar__view-switcher c-ctrl-wrapper c-ctrl-wrapper--menus-left"
+        >
+          <button
+            class="c-button--menu c-button--major icon-save"
+            title="Save"
+            aria-label="Save"
+            @click.stop="toggleSaveMenu"
+          ></button>
+          <div v-show="showSaveMenu" class="c-menu">
+            <ul>
+              <li class="icon-save" title="Save and Finish Editing" @click="saveAndFinishEditing">
+                Save and Finish Editing
+              </li>
+              <li
+                class="icon-save"
+                title="Save and Continue Editing"
+                @click="saveAndContinueEditing"
+              >
+                Save and Continue Editing
+              </li>
+            </ul>
+          </div>
         </div>
+
+        <button
+          v-if="isEditing"
+          class="l-browse-bar__actions c-button icon-x"
+          aria-label="Cancel Editing"
+          title="Cancel Editing"
+          @click="promptUserandCancelEditing()"
+        ></button>
+        <button
+          class="l-browse-bar__actions c-icon-button icon-3-dots"
+          title="More actions"
+          aria-label="More actions"
+          @click.prevent.stop="showMenuItems($event)"
+        ></button>
+      </div>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
-import ViewSwitcher from './ViewSwitcher.vue';
+import { toRaw } from 'vue';
+
 import NotebookMenuSwitcher from '@/plugins/notebook/components/NotebookMenuSwitcher.vue';
+import IndependentTimeConductor from '@/plugins/timeConductor/independent/IndependentTimeConductor.vue';
+
+import tooltipHelpers from '../../api/tooltips/tooltipMixins.js';
+import { SupportedViewTypes } from '../../utils/constants.js';
+import ViewSwitcher from './ViewSwitcher.vue';
 
 const PLACEHOLDER_OBJECT = {};
 
 export default {
-    components: {
-        NotebookMenuSwitcher,
-        ViewSwitcher
+  components: {
+    IndependentTimeConductor,
+    NotebookMenuSwitcher,
+    ViewSwitcher
+  },
+  mixins: [tooltipHelpers],
+  inject: ['openmct'],
+  props: {
+    actionCollection: {
+      type: Object,
+      default: () => {
+        return undefined;
+      }
+    }
+  },
+  data: function () {
+    return {
+      notebookTypes: [],
+      showViewMenu: false,
+      showSaveMenu: false,
+      domainObject: PLACEHOLDER_OBJECT,
+      viewKey: undefined,
+      isEditing: this.openmct.editor.isEditing(),
+      notebookEnabled: this.openmct.types.get('notebook'),
+      statusBarItems: [],
+      status: ''
+    };
+  },
+  computed: {
+    statusClass() {
+      return this.status ? `is-status--${this.status}` : '';
     },
-    inject: ['openmct'],
-    props: {
-        actionCollection: {
-            type: Object,
-            default: () => {
-                return {};
-            }
-        }
+    currentView() {
+      return this.views.filter((v) => v.key === this.viewKey)[0] || {};
     },
-    data: function () {
+    views() {
+      if (this.domainObject && this.openmct.router.started !== true) {
+        return [];
+      }
+
+      return this.openmct.objectViews.get(this.domainObject, this.openmct.router.path).map((p) => {
         return {
-            notebookTypes: [],
-            showViewMenu: false,
-            showSaveMenu: false,
-            domainObject: PLACEHOLDER_OBJECT,
-            viewKey: undefined,
-            isEditing: this.openmct.editor.isEditing(),
-            notebookEnabled: this.openmct.types.get('notebook'),
-            statusBarItems: [],
-            status: ''
+          key: p.key,
+          cssClass: p.cssClass,
+          name: p.name,
+          onItemClicked: () => this.setView({ key: p.key })
         };
+      });
     },
-    computed: {
-        statusClass() {
-            return (this.status) ? `is-status--${this.status}` : '';
-        },
-        currentView() {
-            return this.views.filter(v => v.key === this.viewKey)[0] || {};
-        },
-        views() {
-            if (this.domainObject && (this.openmct.router.started !== true)) {
-                return [];
-            }
+    hasParent() {
+      return toRaw(this.domainObject) !== PLACEHOLDER_OBJECT && this.parentUrl !== '/browse';
+    },
+    parentUrl() {
+      const objectKeyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+      const hash = this.openmct.router.getCurrentLocation().path;
 
-            return this
-                .openmct
-                .objectViews
-                .get(this.domainObject, this.openmct.router.path)
-                .map((p) => {
-                    return {
-                        key: p.key,
-                        cssClass: p.cssClass,
-                        name: p.name,
-                        onItemClicked: () => this.setView({key: p.key})
-                    };
-                });
-        },
-        hasParent() {
-            return this.domainObject !== PLACEHOLDER_OBJECT
-                    && this.parentUrl !== '/browse';
-        },
-        parentUrl() {
-            const objectKeyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-            const hash = this.openmct.router.getCurrentLocation().path;
+      return hash.slice(0, hash.lastIndexOf('/' + objectKeyString));
+    },
+    type() {
+      const objectType = this.openmct.types.get(this.domainObject.type);
+      if (!objectType) {
+        return {};
+      }
 
-            return hash.slice(0, hash.lastIndexOf('/' + objectKeyString));
-        },
-        type() {
-            const objectType = this.openmct.types.get(this.domainObject.type);
-            if (!objectType) {
-                return {};
-            }
+      return objectType.definition;
+    },
+    isPersistable() {
+      let persistable =
+        this.domainObject.identifier &&
+        this.openmct.objects.isPersistable(this.domainObject.identifier);
 
-            return objectType.definition;
-        },
-        isViewEditable() {
-            let currentViewKey = this.currentView.key;
-            if (currentViewKey !== undefined) {
-                let currentViewProvider = this.openmct.objectViews.getByProviderKey(currentViewKey);
+      return persistable;
+    },
+    isViewEditable() {
+      let currentViewKey = this.currentView.key;
+      if (currentViewKey !== undefined) {
+        let currentViewProvider = this.openmct.objectViews.getByProviderKey(currentViewKey);
 
-                return currentViewProvider.canEdit && currentViewProvider.canEdit(this.domainObject, this.openmct.router.path);
-            }
+        return (
+          currentViewProvider.canEdit &&
+          currentViewProvider.canEdit(this.domainObject, this.openmct.router.path)
+        );
+      }
 
-            return false;
-        },
-        lockedOrUnlockedTitle() {
-            if (this.domainObject.locked) {
-                return 'Locked for editing - click to unlock.';
-            } else {
-                return 'Unlocked for editing - click to lock.';
-            }
-        }
+      return false;
     },
-    watch: {
-        domainObject() {
-            if (this.removeStatusListener) {
-                this.removeStatusListener();
-            }
+    lockedOrUnlockedTitle() {
+      if (this.domainObject.locked) {
+        return 'Locked for editing - click to unlock.';
+      } else {
+        return 'Unlocked for editing - click to lock.';
+      }
+    },
+    supportsIndependentTime() {
+      const viewKey = this.getViewKey();
 
-            this.status = this.openmct.status.get(this.domainObject.identifier, this.setStatus);
-            this.removeStatusListener = this.openmct.status.observe(this.domainObject.identifier, this.setStatus);
-        },
-        actionCollection(actionCollection) {
-            if (this.actionCollection) {
-                this.unlistenToActionCollection();
-            }
+      return this.domainObject && SupportedViewTypes.includes(viewKey);
+    }
+  },
+  watch: {
+    domainObject() {
+      if (this.removeStatusListener) {
+        this.removeStatusListener();
+      }
 
-            this.actionCollection = actionCollection;
-            this.actionCollection.on('update', this.updateActionItems);
-            this.updateActionItems(this.actionCollection.getActionsObject());
-        }
+      this.status = this.openmct.status.get(this.domainObject.identifier, this.setStatus);
+      this.removeStatusListener = this.openmct.status.observe(
+        this.domainObject.identifier,
+        this.setStatus
+      );
     },
-    mounted: function () {
-        document.addEventListener('click', this.closeViewAndSaveMenu);
-        window.addEventListener('beforeunload', this.promptUserbeforeNavigatingAway);
+    actionCollection(actionCollection) {
+      if (this.actionCollection) {
+        this.unlistenToActionCollection();
+      }
 
-        this.openmct.editor.on('isEditing', (isEditing) => {
-            this.isEditing = isEditing;
-        });
-    },
-    beforeDestroy: function () {
-        if (this.mutationObserver) {
-            this.mutationObserver();
-        }
+      this.actionCollection.on('update', this.updateActionItems);
+      this.updateActionItems(this.actionCollection.getActionsObject());
+    }
+  },
+  mounted: function () {
+    document.addEventListener('click', this.closeViewAndSaveMenu);
+    this.promptUserbeforeNavigatingAway = this.promptUserbeforeNavigatingAway.bind(this);
+    window.addEventListener('beforeunload', this.promptUserbeforeNavigatingAway);
+
+    this.openmct.editor.on('isEditing', (isEditing) => {
+      this.isEditing = isEditing;
+    });
+  },
+  beforeUnmount: function () {
+    if (this.mutationObserver) {
+      this.mutationObserver();
+    }
 
-        if (this.actionCollection) {
-            this.unlistenToActionCollection();
-        }
+    if (this.actionCollection) {
+      this.unlistenToActionCollection();
+    }
 
-        if (this.removeStatusListener) {
-            this.removeStatusListener();
-        }
+    if (this.removeStatusListener) {
+      this.removeStatusListener();
+    }
 
-        document.removeEventListener('click', this.closeViewAndSaveMenu);
-        window.removeEventListener('click', this.promptUserbeforeNavigatingAway);
+    document.removeEventListener('click', this.closeViewAndSaveMenu);
+    window.removeEventListener('beforeunload', this.promptUserbeforeNavigatingAway);
+  },
+  methods: {
+    toggleSaveMenu() {
+      this.showSaveMenu = !this.showSaveMenu;
+    },
+    closeViewAndSaveMenu() {
+      this.showViewMenu = false;
+      this.showSaveMenu = false;
+    },
+    updateName(event) {
+      if (event.target.innerText !== this.domainObject.name && event.target.innerText.match(/\S/)) {
+        this.openmct.objects.mutate(this.domainObject, 'name', event.target.innerText);
+      }
     },
-    methods: {
-        toggleSaveMenu() {
-            this.showSaveMenu = !this.showSaveMenu;
-        },
-        closeViewAndSaveMenu() {
-            this.showViewMenu = false;
-            this.showSaveMenu = false;
-        },
-        updateName(event) {
-            if (event.target.innerText !== this.domainObject.name && event.target.innerText.match(/\S/)) {
-                this.openmct.objects.mutate(this.domainObject, 'name', event.target.innerText);
+    updateNameOnEnterKeyPress(event) {
+      event.target.blur();
+    },
+    setView(view) {
+      this.viewKey = view.key;
+      this.openmct.router.updateParams({
+        view: this.viewKey
+      });
+    },
+    edit() {
+      this.openmct.editor.edit();
+    },
+    getViewKey() {
+      return this.viewKey;
+    },
+    promptUserandCancelEditing() {
+      let dialog = this.openmct.overlays.dialog({
+        iconClass: 'alert',
+        message: 'Any unsaved changes will be lost. Are you sure you want to continue?',
+        buttons: [
+          {
+            label: 'OK',
+            emphasis: true,
+            callback: () => {
+              this.openmct.editor.cancel().then(() => {
+                //refresh object view
+                this.openmct.layout.$refs.browseObject.show(this.domainObject, this.viewKey, true);
+              });
+              dialog.dismiss();
             }
-        },
-        updateNameOnEnterKeyPress(event) {
-            event.target.blur();
-        },
-        setView(view) {
-            this.viewKey = view.key;
-            this.openmct.router.updateParams({
-                view: this.viewKey
-            });
-        },
-        edit() {
-            this.openmct.editor.edit();
-        },
-        promptUserandCancelEditing() {
-            let dialog = this.openmct.overlays.dialog({
-                iconClass: 'alert',
-                message: 'Any unsaved changes will be lost. Are you sure you want to continue?',
-                buttons: [
-                    {
-                        label: 'OK',
-                        emphasis: true,
-                        callback: () => {
-                            this.openmct.editor.cancel().then(() => {
-                                //refresh object view
-                                this.openmct.layout.$refs.browseObject.show(this.domainObject, this.viewKey, true);
-                            });
-                            dialog.dismiss();
-                        }
-                    },
-                    {
-                        label: 'Cancel',
-                        callback: () => {
-                            dialog.dismiss();
-                        }
-                    }
-                ]
-            });
-        },
-        promptUserbeforeNavigatingAway(event) {
-            if (this.openmct.editor.isEditing()) {
-                event.preventDefault();
-                event.returnValue = '';
+          },
+          {
+            label: 'Cancel',
+            callback: () => {
+              dialog.dismiss();
             }
-        },
-        saveAndFinishEditing() {
-            let dialog = this.openmct.overlays.progressDialog({
-                progressPerc: 'unknown',
-                message: 'Do not navigate away from this page or close this browser tab while this message is displayed.',
-                iconClass: 'info',
-                title: 'Saving'
-            });
+          }
+        ]
+      });
+    },
+    promptUserbeforeNavigatingAway(event) {
+      if (this.openmct.editor.isEditing()) {
+        event.preventDefault();
+        event.returnValue = '';
+      }
+    },
+    saveAndFinishEditing() {
+      let dialog = this.openmct.overlays.progressDialog({
+        progressPerc: null,
+        message:
+          'Do not navigate away from this page or close this browser tab while this message is displayed.',
+        iconClass: 'info',
+        title: 'Saving'
+      });
 
-            return this.openmct.editor.save().then(() => {
-                dialog.dismiss();
-                this.openmct.notifications.info('Save successful');
-            }).catch((error) => {
-                dialog.dismiss();
-                this.openmct.notifications.error('Error saving objects');
-                console.error(error);
-            });
-        },
-        saveAndContinueEditing() {
-            this.saveAndFinishEditing().then(() => {
-                this.openmct.editor.edit();
-            });
-        },
-        goToParent() {
-            this.openmct.router.navigate(this.parentUrl);
-        },
-        updateActionItems(actionItems) {
-            const statusBarItems = this.actionCollection.getStatusBarActions();
-            this.statusBarItems = this.openmct.menus.actionsToMenuItems(statusBarItems, this.actionCollection.objectPath, this.actionCollection.view);
-            this.menuActionItems = this.actionCollection.getVisibleActions();
-        },
-        showMenuItems(event) {
-            const sortedActions = this.openmct.actions._groupAndSortActions(this.menuActionItems);
-            const menuItems = this.openmct.menus.actionsToMenuItems(sortedActions, this.actionCollection.objectPath, this.actionCollection.view);
-            this.openmct.menus.showMenu(event.x, event.y, menuItems);
-        },
-        unlistenToActionCollection() {
-            this.actionCollection.off('update', this.updateActionItems);
-            delete this.actionCollection;
-        },
-        toggleLock(flag) {
-            this.openmct.objects.mutate(this.domainObject, 'locked', flag);
-        },
-        setStatus(status) {
-            this.status = status;
-        }
+      const currentSelection = this.openmct.selection.selected[0];
+      const parentObject = currentSelection[currentSelection.length - 1];
+      this.openmct.selection.select(parentObject);
+
+      return this.openmct.editor
+        .save()
+        .then(() => {
+          dialog.dismiss();
+          this.openmct.notifications.info('Save successful');
+        })
+        .catch((error) => {
+          dialog.dismiss();
+          this.openmct.notifications.error('Error saving objects');
+          console.error(error);
+          this.openmct.editor.cancel();
+        });
+    },
+    saveAndContinueEditing() {
+      this.saveAndFinishEditing().then(() => {
+        this.openmct.editor.edit();
+      });
+    },
+    goToParent() {
+      this.openmct.router.navigate(this.parentUrl);
+    },
+    updateActionItems(actionItems) {
+      const statusBarItems = this.actionCollection.getStatusBarActions();
+      this.statusBarItems = this.openmct.menus.actionsToMenuItems(
+        statusBarItems,
+        this.actionCollection.objectPath,
+        this.actionCollection.view
+      );
+      this.menuActionItems = this.actionCollection.getVisibleActions();
+    },
+    showMenuItems(event) {
+      const sortedActions = this.openmct.actions._groupAndSortActions(this.menuActionItems);
+      const menuItems = this.openmct.menus.actionsToMenuItems(
+        sortedActions,
+        this.actionCollection.objectPath,
+        this.actionCollection.view
+      );
+      this.openmct.menus.showMenu(event.x, event.y, menuItems);
+    },
+    unlistenToActionCollection() {
+      this.actionCollection.off('update', this.updateActionItems);
+      delete this.actionCollection;
+    },
+    toggleLock(flag) {
+      this.openmct.objects.mutate(this.domainObject, 'locked', flag);
+    },
+    setStatus(status) {
+      this.status = status;
+    },
+    async showToolTip() {
+      const { BELOW } = this.openmct.tooltips.TOOLTIP_LOCATIONS;
+      this.buildToolTip(await this.getObjectPath(), BELOW, 'objectName');
     }
+  }
 };
 </script>
diff --git a/src/ui/layout/CreateButton.vue b/src/ui/layout/CreateButton.vue
index 72d768bb2f0..45d1d9e059e 100644
--- a/src/ui/layout/CreateButton.vue
+++ b/src/ui/layout/CreateButton.vue
@@ -1,101 +1,110 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div ref="createButton"
-     class="c-create-button--w"
->
+  <div ref="createButton" class="c-create-button--w">
     <button
-        class="c-create-button c-button--menu c-button--major icon-plus"
-        @click.prevent.stop="showCreateMenu"
+      class="c-create-button c-button--menu c-button--major icon-plus"
+      :aria-disabled="isEditing"
+      @click.prevent.stop="showCreateMenu"
     >
-        <span class="c-button__label">Create</span>
+      <span class="c-button__label">Create</span>
     </button>
-</div>
+  </div>
 </template>
 
 <script>
-import CreateAction from '../../../platform/commonUI/edit/src/creation/CreateAction';
-import objectUtils from 'objectUtils';
+import CreateAction from '@/plugins/formActions/CreateAction';
 
 export default {
-    inject: ['openmct'],
-    data: function () {
-        let items = [];
-
-        this.openmct.types.listKeys().forEach(key => {
-            let menuItem = this.openmct.types.get(key).definition;
+  inject: ['openmct'],
+  data: function () {
+    return {
+      menuItems: {},
+      isEditing: this.openmct.editor.isEditing(),
+      selectedMenuItem: {},
+      opened: false
+    };
+  },
+  computed: {
+    sortedItems() {
+      let items = this.getItems();
 
-            if (menuItem.creatable) {
-                let menuItemTemplate = {
-                    cssClass: menuItem.cssClass,
-                    name: menuItem.name,
-                    description: menuItem.description,
-                    onItemClicked: () => this.create(key)
-                };
+      return items.sort((a, b) => {
+        if (a.name < b.name) {
+          return -1;
+        } else if (a.name > b.name) {
+          return 1;
+        } else {
+          return 0;
+        }
+      });
+    }
+  },
+  mounted() {
+    this.openmct.editor.on('isEditing', this.toggleEdit);
+  },
+  unmounted() {
+    this.openmct.editor.off('isEditing', this.toggleEdit);
+  },
+  methods: {
+    getItems() {
+      let keys = this.openmct.types.listKeys();
 
-                items.push(menuItemTemplate);
-            }
-        });
+      keys.forEach((key) => {
+        if (!this.menuItems[key]) {
+          let typeDef = this.openmct.types.get(key).definition;
 
-        return {
-            items: items,
-            selectedMenuItem: {},
-            opened: false
-        };
-    },
-    computed: {
-        sortedItems() {
-            return this.items.slice().sort((a, b) => {
-                if (a.name < b.name) {
-                    return -1;
-                } else if (a.name > b.name) {
-                    return 1;
-                } else {
-                    return 0;
-                }
-            });
+          if (typeDef.creatable) {
+            this.menuItems[key] = {
+              cssClass: typeDef.cssClass,
+              name: typeDef.name,
+              description: typeDef.description,
+              onItemClicked: () => this.create(key)
+            };
+          }
         }
-    },
-    methods: {
-        showCreateMenu() {
-            const elementBoundingClientRect = this.$refs.createButton.getBoundingClientRect();
-            const x = elementBoundingClientRect.x;
-            const y = elementBoundingClientRect.y + elementBoundingClientRect.height;
+      });
 
-            const menuOptions = {
-                menuClass: 'c-create-menu'
-            };
+      return Object.values(this.menuItems);
+    },
+    showCreateMenu() {
+      const elementBoundingClientRect = this.$refs.createButton.getBoundingClientRect();
+      const x = elementBoundingClientRect.x;
+      const y = elementBoundingClientRect.y + elementBoundingClientRect.height;
 
-            this.openmct.menus.showSuperMenu(x, y, this.sortedItems, menuOptions);
-        },
-        create(key) {
-            // Hack for support.  TODO: rewrite create action.
-            // 1. Get contextual object from navigation
-            // 2. Get legacy type from legacy api
-            // 3. Instantiate create action with type, parent, context
-            // 4. perform action.
-            return this.openmct.objects.get(this.openmct.router.path[0].identifier)
-                .then((currentObject) => {
-                    let legacyContextualParent = this.convertToLegacy(currentObject);
-                    let legacyType = this.openmct.$injector.get('typeService').getType(key);
-                    let context = {
-                        key: "create",
-                        domainObject: legacyContextualParent // should be same as parent object.
-                    };
-                    let action = new CreateAction(
-                        legacyType,
-                        legacyContextualParent,
-                        context,
-                        this.openmct
-                    );
+      const menuOptions = {
+        menuClass: 'c-create-menu'
+      };
 
-                    return action.perform();
-                });
-        },
-        convertToLegacy(domainObject) {
-            let keyString = objectUtils.makeKeyString(domainObject.identifier);
-            let oldModel = objectUtils.toOldFormat(domainObject);
+      this.openmct.menus.showSuperMenu(x, y, this.sortedItems, menuOptions);
+    },
+    toggleEdit(isEditing) {
+      this.isEditing = isEditing;
+    },
+    create(key) {
+      const createAction = new CreateAction(this.openmct, key, this.openmct.router.path[0]);
 
-            return this.openmct.$injector.get('instantiate')(oldModel, keyString);
-        }
+      createAction.invoke();
     }
+  }
 };
 </script>
diff --git a/src/ui/layout/Layout.vue b/src/ui/layout/Layout.vue
deleted file mode 100644
index 5be8ce68fb3..00000000000
--- a/src/ui/layout/Layout.vue
+++ /dev/null
@@ -1,261 +0,0 @@
-<template>
-<div
-    class="l-shell"
-    :class="{
-        'is-editing': isEditing
-    }"
->
-
-    <div
-        id="splash-screen"
-    ></div>
-
-    <div
-        class="l-shell__head"
-        :class="{
-            'l-shell__head--expanded': headExpanded,
-            'l-shell__head--minify-indicators': !headExpanded
-        }"
-    >
-        <CreateButton class="l-shell__create-button" />
-        <indicators class="l-shell__head-section l-shell__indicators" />
-        <button
-            class="l-shell__head__collapse-button c-icon-button"
-            :class="headExpanded ? 'l-shell__head__collapse-button--collapse' : 'l-shell__head__collapse-button--expand'"
-            :title="`Click to ${headExpanded ? 'collapse' : 'expand'} items`"
-            @click="toggleShellHead"
-        ></button>
-        <notification-banner />
-        <div class="l-shell__head-section l-shell__controls">
-            <button
-                class="c-icon-button c-icon-button--major icon-new-window"
-                title="Open in a new browser tab"
-                target="_blank"
-                @click="openInNewTab"
-            ></button>
-            <button
-                :class="['c-icon-button c-icon-button--major', fullScreen ? 'icon-fullscreen-collapse' : 'icon-fullscreen-expand']"
-                :title="`${fullScreen ? 'Exit' : 'Enable'} full screen mode`"
-                @click="fullScreenToggle"
-            ></button>
-        </div>
-        <app-logo />
-    </div>
-
-    <div class="l-shell__drawer c-drawer c-drawer--push c-drawer--align-top"></div>
-
-    <multipane
-        class="l-shell__main"
-        :class="[resizingClass]"
-        type="horizontal"
-    >
-        <pane
-            class="l-shell__pane-tree"
-            handle="after"
-            label="Browse"
-            collapsable
-            @start-resizing="onStartResizing"
-            @end-resizing="onEndResizing"
-        >
-            <button
-                slot="controls"
-                class="c-icon-button l-shell__reset-tree-button icon-folders-collapse"
-                title="Collapse all tree items"
-                @click="handleTreeReset"
-            >
-            </button>
-            <button
-                slot="controls"
-                class="c-icon-button l-shell__sync-tree-button icon-target"
-                title="Show selected item in tree"
-                @click="handleSyncTreeNavigation"
-            >
-            </button>
-            <mct-tree
-                :sync-tree-navigation="triggerSync"
-                :reset-tree-navigation="triggerReset"
-                class="l-shell__tree"
-            />
-        </pane>
-        <pane class="l-shell__pane-main">
-            <browse-bar
-                ref="browseBar"
-                class="l-shell__main-view-browse-bar"
-                :action-collection="actionCollection"
-                @sync-tree-navigation="handleSyncTreeNavigation"
-            />
-            <toolbar
-                v-if="toolbar"
-                class="l-shell__toolbar"
-            />
-            <object-view
-                ref="browseObject"
-                class="l-shell__main-container js-main-container"
-                data-selectable
-                :show-edit-view="true"
-                @change-action-collection="setActionCollection"
-            />
-            <component
-                :is="conductorComponent"
-                class="l-shell__time-conductor"
-            />
-        </pane>
-        <pane
-            class="l-shell__pane-inspector l-pane--holds-multipane"
-            handle="before"
-            label="Inspect"
-            collapsable
-            @start-resizing="onStartResizing"
-            @end-resizing="onEndResizing"
-        >
-            <Inspector
-                ref="inspector"
-                :is-editing="isEditing"
-            />
-        </pane>
-    </multipane>
-</div>
-</template>
-
-<script>
-import Inspector from '../inspector/Inspector.vue';
-import MctTree from './mct-tree.vue';
-import ObjectView from '../components/ObjectView.vue';
-import MctTemplate from '../legacy/mct-template.vue';
-import CreateButton from './CreateButton.vue';
-import multipane from './multipane.vue';
-import pane from './pane.vue';
-import BrowseBar from './BrowseBar.vue';
-import Toolbar from '../toolbar/Toolbar.vue';
-import AppLogo from './AppLogo.vue';
-import Indicators from './status-bar/Indicators.vue';
-import NotificationBanner from './status-bar/NotificationBanner.vue';
-
-export default {
-    components: {
-        Inspector,
-        MctTree,
-        ObjectView,
-        'mct-template': MctTemplate,
-        CreateButton,
-        multipane,
-        pane,
-        BrowseBar,
-        Toolbar,
-        AppLogo,
-        Indicators,
-        NotificationBanner
-    },
-    inject: ['openmct'],
-    data: function () {
-        let storedHeadProps = window.localStorage.getItem('openmct-shell-head');
-        let headExpanded = true;
-        if (storedHeadProps) {
-            headExpanded = JSON.parse(storedHeadProps).expanded;
-        }
-
-        return {
-            fullScreen: false,
-            conductorComponent: undefined,
-            isEditing: false,
-            hasToolbar: false,
-            actionCollection: undefined,
-            triggerSync: false,
-            triggerReset: false,
-            headExpanded,
-            isResizing: false
-        };
-    },
-    computed: {
-        toolbar() {
-            return this.hasToolbar && this.isEditing;
-        },
-        resizingClass() {
-            return this.isResizing ? 'l-shell__resizing' : '';
-        }
-    },
-    mounted() {
-        this.openmct.editor.on('isEditing', (isEditing) => {
-            this.isEditing = isEditing;
-        });
-
-        this.openmct.selection.on('change', this.toggleHasToolbar);
-    },
-    methods: {
-        enterFullScreen() {
-            let docElm = document.documentElement;
-
-            if (docElm.requestFullscreen) {
-                docElm.requestFullscreen();
-            } else if (docElm.mozRequestFullScreen) { /* Firefox */
-                docElm.mozRequestFullScreen();
-            } else if (docElm.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
-                docElm.webkitRequestFullscreen();
-            } else if (docElm.msRequestFullscreen) { /* IE/Edge */
-                docElm.msRequestFullscreen();
-            }
-        },
-        exitFullScreen() {
-            if (document.exitFullscreen) {
-                document.exitFullscreen();
-            } else if (document.mozCancelFullScreen) {
-                document.mozCancelFullScreen();
-            } else if (document.webkitCancelFullScreen) {
-                document.webkitCancelFullScreen();
-            } else if (document.msExitFullscreen) {
-                document.msExitFullscreen();
-            }
-        },
-        toggleShellHead() {
-            this.headExpanded = !this.headExpanded;
-
-            window.localStorage.setItem(
-                'openmct-shell-head',
-                JSON.stringify(
-                    {
-                        expanded: this.headExpanded
-                    }
-                )
-            );
-        },
-        fullScreenToggle() {
-            if (this.fullScreen) {
-                this.fullScreen = false;
-                this.exitFullScreen();
-            } else {
-                this.fullScreen = true;
-                this.enterFullScreen();
-            }
-        },
-        openInNewTab(event) {
-            window.open(window.location.href);
-        },
-        toggleHasToolbar(selection) {
-            let structure = undefined;
-
-            if (!selection || !selection[0]) {
-                structure = [];
-            } else {
-                structure = this.openmct.toolbars.get(selection);
-            }
-
-            this.hasToolbar = structure.length > 0;
-        },
-        setActionCollection(actionCollection) {
-            this.actionCollection = actionCollection;
-        },
-        handleSyncTreeNavigation() {
-            this.triggerSync = !this.triggerSync;
-        },
-        handleTreeReset() {
-            this.triggerReset = !this.triggerReset;
-        },
-        onStartResizing() {
-            this.isResizing = true;
-        },
-        onEndResizing() {
-            this.isResizing = false;
-        }
-    }
-};
-</script>
diff --git a/src/ui/layout/LayoutSpec.js b/src/ui/layout/LayoutSpec.js
new file mode 100644
index 00000000000..4735041c147
--- /dev/null
+++ b/src/ui/layout/LayoutSpec.js
@@ -0,0 +1,165 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+import { nextTick } from 'vue';
+
+import Layout from './AppLayout.vue';
+
+describe('Open MCT Layout:', () => {
+  let openmct;
+  let element;
+  let components;
+
+  beforeEach((done) => {
+    openmct = createOpenMct();
+    openmct.on('start', done);
+
+    // to silence error from BrowseBar.vue
+    spyOn(openmct.objectViews, 'get').and.callFake(() => []);
+
+    openmct.startHeadless();
+  });
+
+  afterEach(() => {
+    return resetApplicationState(openmct);
+  });
+
+  describe('the pane:', () => {
+    it('is displayed on layout load', async () => {
+      await createLayout();
+      await nextTick();
+
+      Object.entries(components).forEach(([name, component]) => {
+        expect(component.pane).toBeTruthy();
+
+        expect(isCollapsed(component.pane)).toBeFalse();
+      });
+    });
+
+    it('is collapsed on layout load if specified by a hide param', async () => {
+      setHideParams();
+
+      await createLayout();
+      await nextTick();
+      await nextTick();
+
+      Object.entries(components).forEach(([name, component]) => {
+        expect(isCollapsed(component.pane)).toBeTrue();
+      });
+    });
+
+    it('on toggle collapses if expanded', async () => {
+      await createLayout();
+      await nextTick();
+      toggleCollapseButtons();
+      await nextTick();
+
+      Object.entries(components).forEach(([name, component]) => {
+        expect(openmct.router.getSearchParam(component.param)).toEqual('true');
+
+        expect(isCollapsed(component.pane)).toBeTrue();
+      });
+    });
+
+    it('on toggle expands if collapsed', async () => {
+      setHideParams();
+
+      await createLayout();
+      await nextTick();
+      toggleExpandButtons();
+
+      Object.entries(components).forEach(([name, component]) => {
+        expect(openmct.router.getSearchParam(component.param)).not.toEqual('true');
+
+        expect(isCollapsed(component.pane)).toBeFalse();
+      });
+    });
+  });
+
+  // eslint-disable-next-line require-await
+  async function createLayout() {
+    const el = document.createElement('div');
+    const child = document.createElement('div');
+    el.appendChild(child);
+
+    const { vNode } = mount(
+      {
+        el,
+        components: {
+          Layout
+        },
+        provide: {
+          openmct
+        },
+        template: `<Layout ref="layout"/>`
+      },
+      {
+        element: el
+      }
+    );
+
+    element = vNode.el;
+
+    setComponents();
+  }
+
+  function setComponents() {
+    components = {
+      tree: {
+        param: 'hideTree',
+        pane: element.querySelector('.l-shell__pane-tree'),
+        collapseButton: element.querySelector('.l-shell__pane-tree .l-pane__collapse-button'),
+        expandButton: element.querySelector('.l-shell__pane-tree .l-pane__expand-button')
+      },
+      inspector: {
+        param: 'hideInspector',
+        pane: element.querySelector('.l-shell__pane-inspector'),
+        collapseButton: element.querySelector('.l-shell__pane-inspector .l-pane__collapse-button'),
+        expandButton: element.querySelector('.l-shell__pane-inspector .l-pane__expand-button')
+      }
+    };
+  }
+
+  function isCollapsed(el) {
+    return el.classList.contains('l-pane--collapsed');
+  }
+
+  function setHideParams() {
+    Object.entries(components).forEach(([name, component]) => {
+      openmct.router.setSearchParam(component.param, true);
+    });
+  }
+
+  function toggleCollapseButtons() {
+    Object.entries(components).forEach(([name, component]) => {
+      component.collapseButton.click();
+    });
+  }
+
+  function toggleExpandButtons() {
+    Object.entries(components).forEach(([name, component]) => {
+      component.expandButton.click();
+    });
+  }
+});
diff --git a/src/ui/layout/MCTSearch.vue b/src/ui/layout/MCTSearch.vue
deleted file mode 100644
index 9208f0ca86f..00000000000
--- a/src/ui/layout/MCTSearch.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-<div class="c-search c-search--major">
-    <input
-        type="search"
-        placeholder="Search"
-    >
-</div>
-</template>
-
-<script>
-export default {
-};
-</script>
diff --git a/src/ui/layout/MctTree.vue b/src/ui/layout/MctTree.vue
new file mode 100644
index 00000000000..bfd2cebdb35
--- /dev/null
+++ b/src/ui/layout/MctTree.vue
@@ -0,0 +1,1114 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div
+    ref="treeContainer"
+    class="c-tree-and-search"
+    :class="{
+      'c-selector': isSelectorTree
+    }"
+  >
+    <div ref="search" class="c-tree-and-search__search">
+      <search
+        v-show="isSelectorTree"
+        ref="shell-search"
+        class="c-search"
+        :value="searchValue"
+        @input="searchTree"
+        @clear="searchTree"
+      />
+    </div>
+
+    <!-- search loading -->
+    <div
+      v-if="searchLoading && activeSearch"
+      class="c-tree__item c-tree-and-search__loading loading"
+    >
+      <span class="c-tree__item__label">Searching...</span>
+    </div>
+
+    <!-- no results -->
+    <div v-if="showNoSearchResults" class="c-tree-and-search__no-results">No results found</div>
+
+    <!-- main tree -->
+    <div
+      ref="mainTree"
+      class="c-tree-and-search__tree c-tree"
+      role="tree"
+      :aria-label="getAriaLabel"
+      aria-expanded="true"
+    >
+      <div
+        ref="dummyItem"
+        class="c-tree__item-h"
+        style="left: -1000px; position: absolute; visibility: hidden"
+      >
+        <div class="c-tree__item">
+          <span class="c-tree__item__view-control c-nav__up is-enabled"></span>
+          <a class="c-tree__item__label c-object-label" draggable="true" href="#">
+            <div class="c-tree__item__type-icon c-object-label__type-icon icon-folder">
+              <span title="Open MCT"></span>
+            </div>
+            <div class="c-tree__item__name c-object-label__name">Open MCT</div>
+          </a>
+          <span class="c-tree__item__view-control c-nav__down"></span>
+        </div>
+      </div>
+
+      <div
+        ref="scrollable"
+        class="c-tree__scrollable"
+        :style="scrollableStyles"
+        @scroll="updateVisibleItems()"
+      >
+        <div :style="childrenHeightStyles">
+          <tree-item
+            v-for="(treeItem, index) in visibleItems"
+            :key="`${treeItem.navigationPath}-${index}-${treeItem.object.name}`"
+            :node="treeItem"
+            :is-selector-tree="isSelectorTree"
+            :selected-item="selectedItem"
+            :active-search="activeSearch"
+            :left-offset="!activeSearch ? treeItem.leftOffset : '0px'"
+            :is-new="treeItem.isNew"
+            :item-offset="itemOffset"
+            :item-index="index"
+            :item-height="itemHeight"
+            :open-items="openTreeItems"
+            :loading-items="treeItemLoading"
+            :targeted-path="targetedPath"
+            @tree-item-mounted="scrollToCheck($event)"
+            @tree-item-action="treeItemAction(treeItem, $event)"
+            @tree-item-selection="treeItemSelection(treeItem)"
+            @targeted-path-animation-end="targetedPathAnimationEnd()"
+          />
+          <!-- main loading -->
+          <div v-if="isLoading" class="c-tree__item c-tree-and-search__loading loading">
+            <span class="c-tree__item__label">Loading...</span>
+          </div>
+          <!-- end loading -->
+          <div v-if="showNoItems" class="c-tree__item c-tree__item--empty">No items</div>
+        </div>
+      </div>
+    </div>
+    <!-- end main tree -->
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import { markRaw, reactive } from 'vue';
+
+import Search from '../components/SearchComponent.vue';
+import TreeItem from './TreeItem.vue';
+
+const ITEM_BUFFER = 25;
+const LOCAL_STORAGE_KEY__TREE_EXPANDED = 'mct-tree-expanded';
+const SORT_MY_ITEMS_ALPH_ASC = true;
+const TREE_ITEM_INDENT_PX = 18;
+const LOCATOR_ITEM_COUNT_HEIGHT = 10; // how many tree items to make the locator selection box show
+
+export default {
+  name: 'MctTree',
+  components: {
+    Search,
+    TreeItem
+  },
+  inject: ['openmct'],
+  props: {
+    isSelectorTree: {
+      type: Boolean,
+      required: false,
+      default() {
+        return false;
+      }
+    },
+    initialSelection: {
+      type: Object,
+      required: false,
+      default() {
+        return {};
+      }
+    },
+    syncTreeNavigation: {
+      type: Boolean,
+      required: false
+    },
+    resetTreeNavigation: {
+      type: Boolean,
+      required: false
+    }
+  },
+  emits: ['tree-item-selection'],
+  data() {
+    return {
+      isLoading: false,
+      treeItemLoading: {},
+      mainTreeHeight: undefined,
+      searchLoading: false,
+      searchValue: '',
+      treeItems: [],
+      openTreeItems: [],
+      compositionCollections: {},
+      searchResultItems: [],
+      visibleItems: [],
+      updatingView: false,
+      itemHeight: 27,
+      itemOffset: 0,
+      activeSearch: false,
+      mainTreeTopMargin: undefined,
+      selectedItem: {},
+      targetedPath: ''
+    };
+  },
+  computed: {
+    childrenHeight() {
+      const childrenCount = this.focusedItems.length || 1;
+
+      return this.itemHeight * childrenCount - this.mainTreeTopMargin; // 5px margin
+    },
+    childrenHeightStyles() {
+      return { height: `${this.childrenHeight}px` };
+    },
+    focusedItems() {
+      return this.activeSearch ? this.searchResultItems : this.treeItems;
+    },
+    getAriaLabel() {
+      return this.isSelectorTree ? 'Create Modal Tree' : 'Main Tree';
+    },
+    pageThreshold() {
+      return Math.ceil(this.mainTreeHeight / this.itemHeight) + ITEM_BUFFER;
+    },
+    scrollableStyles() {
+      return { height: `${this.mainTreeHeight}px` };
+    },
+    showNoItems() {
+      return (
+        this.visibleItems.length === 0 &&
+        !this.activeSearch &&
+        this.searchValue === '' &&
+        !this.isLoading
+      );
+    },
+    showNoSearchResults() {
+      return this.searchValue && this.searchResultItems.length === 0 && !this.searchLoading;
+    },
+    treeHeight() {
+      if (!this.isSelectorTree) {
+        return {};
+      } else {
+        return { minHeight: `${this.itemHeight * LOCATOR_ITEM_COUNT_HEIGHT}px` };
+      }
+    }
+  },
+  watch: {
+    syncTreeNavigation() {
+      this.searchValue = '';
+
+      // if there is an abort controller, then a search is in progress and will need to be canceled
+      if (this.abortSearchController) {
+        this.abortSearchController.abort();
+        delete this.abortSearchController;
+      }
+
+      if (!this.openmct.router.path) {
+        return;
+      }
+
+      this.$nextTick(this.showCurrentPathInTree);
+    },
+    resetTreeNavigation() {
+      [...this.openTreeItems].reverse().map(this.closeTreeItemByPath);
+    },
+    searchValue() {
+      if (this.searchValue !== '' && !this.activeSearch) {
+        this.activeSearch = true;
+        this.$refs.scrollable.scrollTop = 0;
+      } else if (this.searchValue === '') {
+        this.activeSearch = false;
+      }
+    },
+    mainTreeHeight() {
+      this.updateVisibleItems();
+    },
+    focusedItems: {
+      handler(val, oldVal) {
+        this.updateVisibleItems();
+      },
+      deep: true
+    },
+    openTreeItems: {
+      handler(val, oldVal) {
+        this.setSavedOpenItems();
+      },
+      deep: true
+    }
+  },
+  async mounted() {
+    this.initialize();
+    await this.loadRoot();
+    this.isLoading = false;
+
+    if (!this.isSelectorTree) {
+      await this.syncTreeOpenItems();
+    } else {
+      if (this.initialSelection.identifier) {
+        const objectPath = await this.openmct.objects.getOriginalPath(
+          this.initialSelection.identifier
+        );
+        const navigationPath = this.buildNavigationPath(objectPath);
+
+        this.openAndScrollTo(navigationPath);
+      }
+    }
+  },
+  created() {
+    this.getSearchResults = _.debounce(this.getSearchResults, 400);
+    this.handleTreeResize = _.debounce(this.handleTreeResize, 300);
+    this.scrollEndEvent = _.debounce(this.scrollEndEvent, 100);
+  },
+  unmounted() {
+    if (this.treeResizeObserver) {
+      this.treeResizeObserver.disconnect();
+    }
+
+    this.destroyObservers();
+    this.destroyMutables();
+  },
+  methods: {
+    initialize() {
+      this.observers = {};
+      this.mutables = {};
+      this.isLoading = true;
+      this.getSavedOpenItems();
+      this.treeResizeObserver = new ResizeObserver(this.handleTreeResize);
+      this.treeResizeObserver.observe(this.$el);
+
+      // need to wait for the first tick to get the height of the tree
+      this.$nextTick().then(this.calculateHeights);
+
+      return;
+    },
+    async loadRoot() {
+      this.treeItems = [];
+      const root = await this.openmct.objects.get('ROOT');
+
+      if (!root.identifier) {
+        return false;
+      }
+
+      // will need to listen for root composition changes as well
+      this.treeItems = await this.loadAndBuildTreeItemsFor(root.identifier, []);
+    },
+    treeItemAction(parentItem, type) {
+      if (type === 'close') {
+        this.closeTreeItem(parentItem);
+      } else {
+        this.openTreeItem(parentItem);
+      }
+    },
+    targetedPathAnimationEnd() {
+      this.targetedPath = null;
+    },
+    treeItemSelection(item) {
+      this.selectedItem = item;
+      this.$emit('tree-item-selection', item);
+    },
+    async openTreeItem(parentItem) {
+      const parentPath = parentItem.navigationPath;
+      const abortSignal = this.startItemLoad(parentPath);
+
+      // pass in abort signal when functional
+      const childrenItems = await this.loadAndBuildTreeItemsFor(
+        parentItem.object.identifier,
+        parentItem.objectPath,
+        abortSignal
+      );
+      const parentIndex = this.treeItems.findIndex((item) => item.navigationPath === parentPath);
+
+      // if it's not loading, it was aborted
+      if (!this.isItemLoading(parentPath) || parentIndex === -1) {
+        return;
+      }
+
+      this.endItemLoad(parentPath);
+
+      const newTreeItems = [...this.treeItems];
+      newTreeItems.splice(parentIndex + 1, 0, ...childrenItems);
+      this.treeItems = [...newTreeItems];
+
+      if (!this.isTreeItemOpen(parentItem)) {
+        this.openTreeItems.push(parentPath);
+      }
+
+      for (let item of childrenItems) {
+        if (this.isTreeItemOpen(item)) {
+          this.openTreeItem(item);
+        }
+      }
+
+      return;
+    },
+    closeTreeItemByPath(path) {
+      // if actively loading, abort
+      if (this.isItemLoading(path)) {
+        this.abortItemLoad(path);
+      }
+
+      const pathIndex = this.openTreeItems.indexOf(path);
+
+      if (pathIndex === -1) {
+        return;
+      }
+
+      const newTreeItems = this.treeItems.filter((item) => {
+        const otherPath = item.navigationPath;
+        if (otherPath !== path && this.isTreeItemAChildOf(otherPath, path)) {
+          this.destroyObserverByPath(otherPath);
+          this.destroyMutableByPath(otherPath);
+
+          return false;
+        }
+
+        return true;
+      });
+      this.treeItems = [...newTreeItems];
+      const newOpenTreeItems = [...this.openTreeItems];
+      newOpenTreeItems.splice(pathIndex, 1);
+      this.openTreeItems = [...newOpenTreeItems];
+      this.removeCompositionListenerFor(path);
+    },
+    closeTreeItem(item) {
+      this.closeTreeItemByPath(item.navigationPath);
+    },
+    // returns an AbortController signal to be passed on to requests
+    startItemLoad(path) {
+      if (this.isItemLoading(path)) {
+        this.abortItemLoad(path);
+      }
+
+      this.treeItemLoading[path] = new AbortController();
+
+      return this.treeItemLoading[path].signal;
+    },
+    endItemLoad(path) {
+      this.treeItemLoading[path] = undefined;
+      delete this.treeItemLoading[path];
+    },
+    abortItemLoad(path) {
+      if (this.treeItemLoading[path]) {
+        this.treeItemLoading[path].abort();
+        this.endItemLoad(path);
+      }
+    },
+    isItemLoading(path) {
+      return this.treeItemLoading[path] instanceof AbortController;
+    },
+    showCurrentPathInTree() {
+      const currentPath = this.buildNavigationPath(this.openmct.router.path);
+
+      if (this.getTreeItemByPath(currentPath)) {
+        this.scrollTo(currentPath);
+      } else {
+        this.openAndScrollTo(currentPath);
+      }
+    },
+    async syncTreeOpenItems() {
+      const items = [...this.treeItems];
+
+      for (let item of items) {
+        if (this.isTreeItemOpen(item)) {
+          await this.openTreeItem(item);
+        }
+      }
+    },
+    openAndScrollTo(navigationPath) {
+      if (navigationPath.includes('/ROOT')) {
+        navigationPath = navigationPath.split('/ROOT').join('');
+      }
+
+      let idArray = navigationPath.split('/');
+      let fullPathArray = [];
+      let pathsToOpen;
+
+      this.scrollToPath = navigationPath;
+
+      // skip root
+      idArray.splice(0, 2);
+      idArray[0] = 'browse/' + idArray[0];
+      idArray.reduce((parentPath, childPath) => {
+        let fullPath = [parentPath, childPath].join('/');
+
+        fullPathArray.push(fullPath);
+
+        return fullPath;
+      }, '');
+
+      pathsToOpen = fullPathArray.filter(
+        (fullPath) => !this.isTreeItemPathOpen(fullPath) && fullPath !== navigationPath
+      );
+
+      pathsToOpen
+        .reduce(async (parentLoaded, childPath) => {
+          await parentLoaded;
+
+          return this.openTreeItem(this.getTreeItemByPath(childPath));
+        }, Promise.resolve())
+        .then(() => {
+          if (this.isSelectorTree) {
+            let item = this.getTreeItemByPath(navigationPath);
+            // If item is missing due to error in object creation,
+            // walk up the navigationPath until we find an item
+            while (!item && navigationPath !== '') {
+              const startIndex = 0;
+              const endIndex = navigationPath.lastIndexOf('/');
+              navigationPath = navigationPath.substring(startIndex, endIndex);
+
+              item = this.getTreeItemByPath(navigationPath);
+            }
+
+            this.treeItemSelection(item);
+          }
+
+          this.scrollToCheck(navigationPath);
+          this.scrollToPath = null;
+        });
+    },
+    scrollToCheck(navigationPath) {
+      if (this.scrollToPath && this.scrollToPath === navigationPath) {
+        this.scrollTo(navigationPath);
+      }
+    },
+    scrollTo(navigationPath) {
+      if (!this.$refs.scrollable || this.isItemInView(navigationPath)) {
+        return;
+      }
+
+      const indexOfScroll = this.treeItems.findIndex(
+        (item) => item.navigationPath === navigationPath
+      );
+
+      if (indexOfScroll !== -1) {
+        const scrollTopAmount = indexOfScroll * this.itemHeight;
+
+        this.$refs.scrollable.scrollTo({
+          top: scrollTopAmount,
+          behavior: 'smooth'
+        });
+      } else if (this.scrollToPath) {
+        this.scrollToPath = null;
+      }
+    },
+    scrollEndEvent() {
+      if (!this.$refs.scrollable) {
+        return;
+      }
+
+      this.$nextTick(() => {
+        if (this.scrollToPath) {
+          if (!this.isItemInView(this.scrollToPath)) {
+            this.scrollTo(this.scrollToPath);
+          } else {
+            this.scrollToPath = null;
+          }
+        }
+      });
+    },
+    setTargetedItem(navigationPath) {
+      this.targetedItem = navigationPath;
+    },
+    isItemInView(navigationPath) {
+      const indexOfScroll = this.treeItems.findIndex(
+        (item) => item.navigationPath === navigationPath
+      );
+      const scrollTopAmount = indexOfScroll * this.itemHeight;
+      const treeStart = this.$refs.scrollable.scrollTop;
+      const treeEnd = treeStart + this.mainTreeHeight;
+
+      return scrollTopAmount >= treeStart && scrollTopAmount < treeEnd;
+    },
+    getLowercaseObjectName(domainObject) {
+      let objectName;
+      if (!domainObject) {
+        return objectName;
+      }
+
+      if (domainObject.name) {
+        objectName = domainObject.name.toLowerCase();
+      }
+
+      if (domainObject.object && domainObject.object.name) {
+        objectName = domainObject.object.name.toLowerCase();
+      }
+
+      return objectName;
+    },
+    sortNameAscending(a, b) {
+      // sorting tree children items
+      let objectAName = this.getLowercaseObjectName(a);
+      let objectBName = this.getLowercaseObjectName(b);
+      if (!objectAName || !objectBName) {
+        return 0;
+      }
+
+      // sorting composition items
+      if (objectAName > objectBName) {
+        return 1;
+      }
+
+      if (objectBName > objectAName) {
+        return -1;
+      }
+
+      return 0;
+    },
+    isSortable(parentObjectPath) {
+      // determine if any part of the parent's path includes a key value of mine; aka My Items
+      return Boolean(parentObjectPath.find((path) => path.identifier.key === 'mine'));
+    },
+    async loadAndBuildTreeItemsFor(identifier, parentObjectPath, abortSignal) {
+      const domainObject = await this.openmct.objects.get(identifier);
+
+      const collection = this.openmct.composition.get(domainObject);
+      let composition = await collection.load(abortSignal);
+
+      if (SORT_MY_ITEMS_ALPH_ASC && this.isSortable(parentObjectPath)) {
+        const sortedComposition = composition.slice().sort(this.sortNameAscending);
+        composition = sortedComposition;
+      }
+
+      if (parentObjectPath.length && !this.isSelectorTree) {
+        let navigationPath = this.buildNavigationPath(parentObjectPath);
+
+        if (this.compositionCollections[navigationPath]) {
+          this.removeCompositionListenerFor(navigationPath);
+        }
+
+        this.compositionCollections[navigationPath] = {};
+        this.compositionCollections[navigationPath].collection = markRaw(collection);
+        this.compositionCollections[navigationPath].addHandler =
+          this.compositionAddHandler(navigationPath);
+        this.compositionCollections[navigationPath].removeHandler =
+          this.compositionRemoveHandler(navigationPath);
+
+        this.compositionCollections[navigationPath].collection.on(
+          'add',
+          this.compositionCollections[navigationPath].addHandler
+        );
+        this.compositionCollections[navigationPath].collection.on(
+          'remove',
+          this.compositionCollections[navigationPath].removeHandler
+        );
+      }
+
+      return composition.map((object) => {
+        // Only add observers and mutables if this is NOT a selector tree
+        if (!this.isSelectorTree) {
+          if (this.openmct.objects.supportsMutation(object.identifier)) {
+            object = this.openmct.objects.toMutable(object);
+            this.addMutable(object, parentObjectPath);
+          }
+
+          this.addTreeItemObserver(object, parentObjectPath);
+        }
+
+        return this.buildTreeItem(object, parentObjectPath);
+      });
+    },
+    buildTreeItem(domainObject, parentObjectPath, isNew = false) {
+      let objectPath = [domainObject].concat(parentObjectPath);
+      let navigationPath = this.buildNavigationPath(objectPath);
+
+      // Ensure that we create reactive objects for the tree
+      return reactive({
+        id: this.openmct.objects.makeKeyString(domainObject.identifier),
+        object: domainObject,
+        leftOffset: (objectPath.length - 1) * TREE_ITEM_INDENT_PX + 'px',
+        isNew,
+        objectPath,
+        navigationPath
+      });
+    },
+    addMutable(mutableDomainObject, parentObjectPath) {
+      const objectPath = [mutableDomainObject].concat(parentObjectPath);
+      const navigationPath = this.buildNavigationPath(objectPath);
+
+      // If the mutable already exists, destroy it.
+      this.destroyMutableByPath(navigationPath);
+
+      this.mutables[navigationPath] = () =>
+        this.openmct.objects.destroyMutable(mutableDomainObject);
+    },
+    addTreeItemObserver(domainObject, parentObjectPath) {
+      const objectPath = [domainObject].concat(parentObjectPath);
+      const navigationPath = this.buildNavigationPath(objectPath);
+
+      if (this.observers[navigationPath]) {
+        this.observers[navigationPath]();
+      }
+
+      this.observers[navigationPath] = this.openmct.objects.observe(
+        domainObject,
+        'name',
+        this.sortTreeItems.bind(this, parentObjectPath)
+      );
+    },
+    sortTreeItems(parentObjectPath) {
+      const navigationPath = this.buildNavigationPath(parentObjectPath);
+      const parentItem = this.getTreeItemByPath(navigationPath);
+
+      // If the parent is not sortable, skip sorting
+      if (!this.isSortable(parentObjectPath)) {
+        return;
+      }
+
+      // Sort the renamed object and its siblings (direct descendants of the parent)
+      const directDescendants = this.getChildrenInTreeFor(parentItem, false);
+      directDescendants.sort(this.sortNameAscending);
+
+      // Take a copy of the sorted descendants array
+      const sortedTreeItems = directDescendants.slice();
+
+      directDescendants.forEach((descendant) => {
+        const parent = this.getTreeItemByPath(descendant.navigationPath);
+
+        // If descendant is not open, skip
+        if (!this.isTreeItemOpen(parent)) {
+          return;
+        }
+
+        // If descendant is open but has no children, skip
+        const children = this.getChildrenInTreeFor(parent, true);
+        if (children.length === 0) {
+          return;
+        }
+
+        // Splice in the children of the descendant
+        const parentIndex = sortedTreeItems
+          .map((item) => item.navigationPath)
+          .indexOf(parent.navigationPath);
+        sortedTreeItems.splice(parentIndex + 1, 0, ...children);
+      });
+
+      // Splice in all of the sorted descendants
+      const newTreeItems = [...this.treeItems];
+      newTreeItems.splice(
+        newTreeItems.indexOf(parentItem) + 1,
+        sortedTreeItems.length,
+        ...sortedTreeItems
+      );
+      this.treeItems = [...newTreeItems];
+    },
+    buildNavigationPath(objectPath) {
+      return (
+        '/browse/' +
+        [...objectPath]
+          .reverse()
+          .map((object) => this.openmct.objects.makeKeyString(object.identifier))
+          .join('/')
+      );
+    },
+    compositionAddHandler(navigationPath) {
+      return (domainObject) => {
+        const parentItem = this.getTreeItemByPath(navigationPath);
+        const newItem = this.buildTreeItem(domainObject, parentItem.objectPath, true);
+        const descendants = this.getChildrenInTreeFor(parentItem, true);
+        const directDescendants = this.getChildrenInTreeFor(parentItem);
+
+        if (domainObject.isMutable) {
+          this.addMutable(domainObject, parentItem.objectPath);
+        }
+
+        this.addTreeItemObserver(domainObject, parentItem.objectPath);
+
+        if (directDescendants.length === 0) {
+          this.addItemToTreeAfter(newItem, parentItem);
+
+          return;
+        }
+
+        if (SORT_MY_ITEMS_ALPH_ASC && this.isSortable(parentItem.objectPath)) {
+          const newItemIndex = directDescendants.findIndex(
+            (descendant) => this.sortNameAscending(descendant, newItem) > 0
+          );
+          const shouldInsertFirst = newItemIndex === 0;
+          const shouldInsertLast = newItemIndex === -1;
+
+          if (shouldInsertFirst) {
+            this.addItemToTreeAfter(newItem, parentItem);
+          } else if (shouldInsertLast) {
+            this.addItemToTreeAfter(newItem, descendants.pop());
+          } else {
+            this.addItemToTreeBefore(newItem, directDescendants[newItemIndex]);
+          }
+
+          return;
+        }
+
+        this.addItemToTreeAfter(newItem, descendants.pop());
+      };
+    },
+    compositionRemoveHandler(navigationPath) {
+      return (identifier) => {
+        const removeKeyString = this.openmct.objects.makeKeyString(identifier);
+        const parentItem = this.getTreeItemByPath(navigationPath);
+        const directDescendants = this.getChildrenInTreeFor(parentItem);
+        const removeItem = directDescendants.find((item) => item.id === removeKeyString);
+
+        // Remove the item from the tree, unobserve it, and clean up any mutables
+        this.removeItemFromTree(removeItem);
+        this.destroyObserverByPath(removeItem.navigationPath);
+        this.destroyMutableByPath(removeItem.navigationPath);
+      };
+    },
+    removeCompositionListenerFor(navigationPath) {
+      if (this.compositionCollections[navigationPath]) {
+        this.compositionCollections[navigationPath].collection.off(
+          'add',
+          this.compositionCollections[navigationPath].addHandler
+        );
+        this.compositionCollections[navigationPath].collection.off(
+          'remove',
+          this.compositionCollections[navigationPath].removeHandler
+        );
+
+        this.compositionCollections[navigationPath] = undefined;
+        delete this.compositionCollections[navigationPath];
+      }
+    },
+    removeItemFromTree(item) {
+      if (this.isTreeItemOpen(item)) {
+        this.closeTreeItem(item);
+      }
+
+      const removeIndex = this.getTreeItemIndex(item.navigationPath);
+      const newTreeItems = [...this.treeItems];
+      newTreeItems.splice(removeIndex, 1);
+      this.treeItems = [...newTreeItems];
+    },
+    addItemToTreeBefore(addItem, beforeItem) {
+      const addIndex = this.getTreeItemIndex(beforeItem.navigationPath);
+
+      this.addItemToTree(addItem, addIndex);
+    },
+    addItemToTreeAfter(addItem, afterItem) {
+      const addIndex = this.getTreeItemIndex(afterItem.navigationPath);
+
+      this.addItemToTree(addItem, addIndex + 1);
+    },
+    addItemToTree(addItem, index) {
+      const newTreeItems = [...this.treeItems];
+      newTreeItems.splice(index, 0, addItem);
+      this.treeItems = [...newTreeItems];
+
+      if (this.isTreeItemOpen(addItem)) {
+        this.openTreeItem(addItem);
+      }
+    },
+    searchTree(value) {
+      // if an abort controller exists, regardless of the value passed in,
+      // there is an active search that should be canceled
+      if (this.abortSearchController) {
+        this.abortSearchController.abort();
+        delete this.abortSearchController;
+      }
+
+      this.searchValue = value;
+      this.searchLoading = true;
+
+      if (this.searchValue !== '') {
+        // clear any previous search results
+        this.searchResultItems = [];
+
+        this.getSearchResults();
+      } else {
+        this.searchLoading = false;
+      }
+    },
+    getSearchResults() {
+      // an abort controller will be passed in that will be used
+      // to cancel an active searches if necessary
+      this.abortSearchController = new AbortController();
+      const abortSignal = this.abortSearchController.signal;
+      const searchPromises = this.openmct.objects.search(this.searchValue, abortSignal);
+
+      searchPromises.map((promise) =>
+        promise.then((results) => {
+          this.aggregateSearchResults(results, abortSignal);
+        })
+      );
+
+      Promise.all(searchPromises)
+        .catch((reason) => {
+          // search aborted
+        })
+        .finally(() => {
+          this.searchLoading = false;
+
+          if (this.abortSearchController) {
+            delete this.abortSearchController;
+          }
+        });
+    },
+    aggregateSearchResults(results, abortSignal) {
+      let resultPromises = [];
+
+      for (const result of results) {
+        if (!abortSignal.aborted) {
+          // Don't show deleted objects in search results
+          if (result.location === null) {
+            continue;
+          }
+
+          resultPromises.push(
+            this.openmct.objects.getOriginalPath(result.identifier).then((objectPath) => {
+              // removing the item itself, as the path we pass to buildTreeItem is a parent path
+              objectPath.shift();
+
+              // if root, remove, we're not using in object path for tree
+              const lastObject = objectPath.length ? objectPath[objectPath.length - 1] : false;
+              if (lastObject && lastObject.type === 'root') {
+                objectPath.pop();
+              }
+
+              this.searchResultItems.push(this.buildTreeItem(result, objectPath));
+            })
+          );
+        }
+      }
+
+      return resultPromises;
+    },
+    updateVisibleItems() {
+      this.scrollEndEvent();
+
+      if (this.updatingView) {
+        return;
+      }
+
+      this.updatingView = true;
+      requestAnimationFrame(() => {
+        let start = 0;
+        let end = this.pageThreshold;
+        let allItemsCount = this.focusedItems.length;
+
+        if (allItemsCount < this.pageThreshold) {
+          end = allItemsCount;
+        } else {
+          let firstVisible = this.calculateFirstVisibleItem();
+          let lastVisible = this.calculateLastVisibleItem();
+          let totalVisible = lastVisible - firstVisible;
+          let numberOffscreen = this.pageThreshold - totalVisible;
+
+          start = firstVisible - Math.floor(numberOffscreen / 2);
+          end = lastVisible + Math.ceil(numberOffscreen / 2);
+
+          if (start < 0) {
+            start = 0;
+            end = Math.min(this.pageThreshold, allItemsCount);
+          } else if (end >= allItemsCount) {
+            end = allItemsCount;
+            start = end - this.pageThreshold + 1;
+          }
+        }
+
+        this.itemOffset = start;
+        this.visibleItems = this.focusedItems.slice(start, end);
+        this.updatingView = false;
+      });
+    },
+    calculateFirstVisibleItem() {
+      if (!this.$refs.scrollable) {
+        return;
+      }
+
+      let scrollTop = this.$refs.scrollable.scrollTop;
+
+      return Math.floor(scrollTop / this.itemHeight);
+    },
+    calculateLastVisibleItem() {
+      if (!this.$refs.scrollable) {
+        return;
+      }
+
+      let scrollBottom = this.$refs.scrollable.scrollTop + this.$refs.scrollable.offsetHeight;
+
+      return Math.ceil(scrollBottom / this.itemHeight);
+    },
+    calculateHeights() {
+      const RECHECK = 100;
+
+      return new Promise((resolve, reject) => {
+        let checkHeights = () => {
+          let treeTopMargin = this.getElementStyleValue(this.$refs.mainTree, 'marginTop');
+          let paddingOffset = 0;
+
+          if (
+            this.$el &&
+            this.$refs.search &&
+            this.$refs.mainTree &&
+            this.$refs.treeContainer &&
+            this.$refs.dummyItem &&
+            this.$el.offsetHeight !== 0 &&
+            treeTopMargin > 0
+          ) {
+            if (this.isSelectorTree) {
+              paddingOffset = this.getElementStyleValue(this.$refs.treeContainer, 'padding');
+            }
+
+            this.mainTreeTopMargin = treeTopMargin;
+            this.mainTreeHeight =
+              this.$el.offsetHeight -
+              this.$refs.search.offsetHeight -
+              this.mainTreeTopMargin -
+              paddingOffset * 2;
+            this.itemHeight = this.getElementStyleValue(this.$refs.dummyItem, 'height');
+
+            resolve();
+          } else {
+            setTimeout(checkHeights, RECHECK);
+          }
+        };
+
+        checkHeights();
+      });
+    },
+    getTreeItemByPath(path) {
+      return this.treeItems.find((item) => item.navigationPath === path);
+    },
+    getTreeItemIndex(indexItem) {
+      let path = typeof indexItem === 'string' ? indexItem : indexItem.navigationPath;
+
+      return this.treeItems.findIndex((item) => item.navigationPath === path);
+    },
+    getChildrenInTreeFor(parent, allDescendants = false) {
+      const parentPath = typeof parent === 'string' ? parent : parent.navigationPath;
+      const parentDepth = parentPath.split('/').length;
+
+      return this.treeItems.filter((childItem) => {
+        const childDepth = childItem.navigationPath.split('/').length;
+        if (!allDescendants && childDepth > parentDepth + 1) {
+          return false;
+        }
+
+        return (
+          childItem.navigationPath !== parentPath && childItem.navigationPath.includes(parentPath)
+        );
+      });
+    },
+    isTreeItemOpen(item) {
+      return this.isTreeItemPathOpen(item.navigationPath);
+    },
+    isTreeItemPathOpen(path) {
+      return this.openTreeItems.includes(path);
+    },
+    isTreeItemAChildOf(childNavigationPath, parentNavigationPath) {
+      const childPathKeys = childNavigationPath.split('/');
+      const parentPathKeys = parentNavigationPath.split('/');
+
+      // If child path is shorter than or same length as
+      // the parent path, then it's not a child.
+      if (childPathKeys.length <= parentPathKeys.length) {
+        return false;
+      }
+
+      for (let i = 0; i < parentPathKeys.length; i++) {
+        if (childPathKeys[i] !== parentPathKeys[i]) {
+          return false;
+        }
+      }
+
+      return true;
+    },
+    getElementStyleValue(el, style) {
+      if (!el) {
+        return;
+      }
+
+      let styleString = window.getComputedStyle(el)[style];
+      let index = styleString.indexOf('px');
+
+      return Number(styleString.slice(0, index));
+    },
+    getSavedOpenItems() {
+      if (this.isSelectorTree) {
+        return;
+      }
+
+      let openItems = localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED);
+      this.openTreeItems = openItems ? JSON.parse(openItems) : [];
+    },
+    setSavedOpenItems() {
+      if (this.isSelectorTree) {
+        return;
+      }
+
+      localStorage.setItem(LOCAL_STORAGE_KEY__TREE_EXPANDED, JSON.stringify(this.openTreeItems));
+    },
+    handleTreeResize() {
+      this.calculateHeights();
+    },
+    /**
+     * Destroy an observer for the given navigationPath.
+     */
+    destroyObserverByPath(navigationPath) {
+      if (this.observers[navigationPath]) {
+        this.observers[navigationPath]();
+        delete this.observers[navigationPath];
+      }
+    },
+    /**
+     * Destroy all observers.
+     */
+    destroyObservers() {
+      Object.entries(this.observers).forEach(([key, unobserve]) => {
+        if (unobserve) {
+          unobserve();
+        }
+
+        delete this.observers[key];
+      });
+    },
+    /**
+     * Destroy a mutable for the given navigationPath.
+     */
+    destroyMutableByPath(navigationPath) {
+      if (this.mutables[navigationPath]) {
+        this.mutables[navigationPath]();
+        delete this.mutables[navigationPath];
+      }
+    },
+    /**
+     * Destroy all mutables.
+     */
+    destroyMutables() {
+      Object.entries(this.mutables).forEach(([key, destroyMutable]) => {
+        if (destroyMutable) {
+          destroyMutable();
+        }
+
+        delete this.mutables[key];
+      });
+    }
+  }
+};
+</script>
diff --git a/src/ui/layout/MultipaneContainer.vue b/src/ui/layout/MultipaneContainer.vue
new file mode 100644
index 00000000000..e8131e77569
--- /dev/null
+++ b/src/ui/layout/MultipaneContainer.vue
@@ -0,0 +1,46 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div
+    class="l-multipane"
+    :class="{
+      'l-multipane--vertical': type === 'vertical',
+      'l-multipane--horizontal': type === 'horizontal'
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      required: true,
+      validator: function (value) {
+        return ['vertical', 'horizontal'].indexOf(value) !== -1;
+      }
+    }
+  }
+};
+</script>
diff --git a/src/ui/layout/PaneContainer.vue b/src/ui/layout/PaneContainer.vue
new file mode 100644
index 00000000000..06960ece923
--- /dev/null
+++ b/src/ui/layout/PaneContainer.vue
@@ -0,0 +1,260 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="l-pane" :class="paneClasses">
+    <div
+      v-if="handle"
+      class="l-pane__handle"
+      :aria-label="handleLabel"
+      :aria-grabbed="resizing"
+      @mousedown.prevent="startResizing"
+    ></div>
+    <div class="l-pane__header">
+      <span v-if="label" class="l-pane__label">{{ label }}</span>
+      <slot name="controls"></slot>
+      <button
+        v-if="isCollapsable"
+        class="l-pane__collapse-button c-icon-button"
+        :name="collapseTitle"
+        :aria-label="collapseTitle"
+        :title="collapseTitle"
+        @click="toggleCollapse"
+      ></button>
+    </div>
+    <button
+      class="l-pane__expand-button"
+      :name="expandTitle"
+      :aria-label="expandTitle"
+      :title="expandTitle"
+      @click="toggleCollapse"
+    >
+      <span class="l-pane__expand-button__label">{{ label }}</span>
+    </button>
+    <div class="l-pane__contents">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+const COLLAPSE_THRESHOLD_PX = 40;
+const LOCAL_STORAGE_KEY__PANE_POSITIONS = 'mct-pane-positions';
+
+export default {
+  inject: ['openmct'],
+  props: {
+    collapseType: {
+      type: String,
+      default: 'vertical'
+    },
+    handle: {
+      type: String,
+      default: '',
+      validator: function (value) {
+        return ['', 'before', 'after'].indexOf(value) !== -1;
+      }
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    hideParam: {
+      type: String,
+      default: ''
+    },
+    persistPosition: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['end-resizing', 'start-resizing'],
+  data() {
+    return {
+      collapsed: false,
+      resizing: false
+    };
+  },
+  computed: {
+    handleLabel() {
+      return `Resize ${this.label} Pane`;
+    },
+    isCollapsable() {
+      return this.hideParam?.length > 0;
+    },
+    collapseTitle() {
+      return `Collapse ${this.label} Pane`;
+    },
+    expandTitle() {
+      return `Expand ${this.label} Pane`;
+    },
+    localStorageKey() {
+      if (!this.label) {
+        return null;
+      }
+
+      return this.label.toLowerCase().replace(/ /g, '-');
+    },
+    paneClasses() {
+      return {
+        'l-pane--horizontal-handle-before': this.type === 'horizontal' && this.handle === 'before',
+        'l-pane--horizontal-handle-after': this.type === 'horizontal' && this.handle === 'after',
+        'l-pane--vertical-handle-before': this.type === 'vertical' && this.handle === 'before',
+        'l-pane--vertical-handle-after': this.type === 'vertical' && this.handle === 'after',
+        'l-pane--collapsed': this.collapsed,
+        'collapse-horizontal': this.collapseType === 'horizontal',
+        'l-pane--reacts': !this.handle,
+        'l-pane--resizing': this.resizing === true
+      };
+    }
+  },
+  beforeMount() {
+    this.type = this.$parent.type;
+    this.styleProp = this.type === 'horizontal' ? 'width' : 'height';
+  },
+  created() {
+    this.handleHideUrl = this.handleHideUrl.bind(this);
+    // Hide tree and/or inspector pane if specified in URL
+    this.openmct.router.on('change:params', this.handleHideUrl);
+  },
+  async mounted() {
+    if (this.persistPosition) {
+      const savedPosition = this.getSavedPosition();
+      if (savedPosition) {
+        this.$el.style[this.styleProp] = savedPosition;
+      }
+    }
+
+    await this.$nextTick();
+    if (this.isCollapsable) {
+      this.handleHideUrl();
+    }
+  },
+  beforeUnmount() {
+    this.openmct.router.off('change:params', this.handleHideUrl);
+  },
+  methods: {
+    addHideParam(target) {
+      this.openmct.router.setSearchParam(target, 'true');
+    },
+    endResizing(_event) {
+      document.body.removeEventListener('mousemove', this.updatePosition);
+      document.body.removeEventListener('mouseup', this.endResizing);
+      this.resizing = false;
+      this.$emit('end-resizing');
+      this.trackSize();
+    },
+    getNewSize(event) {
+      const delta = this.startPosition - this.getPosition(event);
+      if (this.handle === 'before') {
+        return `${this.initial + delta}px`;
+      }
+
+      if (this.handle === 'after') {
+        return `${this.initial - delta}px`;
+      }
+    },
+    getSavedPosition() {
+      if (!this.localStorageKey) {
+        return null;
+      }
+
+      const savedPositionsString = localStorage.getItem(LOCAL_STORAGE_KEY__PANE_POSITIONS);
+      const savedPositions = savedPositionsString ? JSON.parse(savedPositionsString) : {};
+
+      return savedPositions[this.localStorageKey];
+    },
+    getPosition(event) {
+      return this.type === 'horizontal' ? event.pageX : event.pageY;
+    },
+    handleCollapse() {
+      this.currentSize = this.dragCollapse === true ? this.initial : this.$el.style[this.styleProp];
+      this.$el.style[this.styleProp] = '';
+      this.collapsed = true;
+    },
+    handleExpand() {
+      let size = this.currentSize ? this.currentSize : this.getSavedPosition();
+      this.$el.style[this.styleProp] = size;
+
+      delete this.currentSize;
+      delete this.dragCollapse;
+      this.collapsed = false;
+    },
+    handleHideUrl() {
+      const hideParam = this.openmct.router.getSearchParam(this.hideParam);
+
+      if (hideParam === 'true') {
+        this.handleCollapse();
+      }
+    },
+    removeHideParam(target) {
+      this.openmct.router.deleteSearchParam(target);
+    },
+    setSavedPosition(panePosition) {
+      const panePositionsString = localStorage.getItem(LOCAL_STORAGE_KEY__PANE_POSITIONS);
+      const panePositions = panePositionsString ? JSON.parse(panePositionsString) : {};
+      panePositions[this.localStorageKey] = panePosition;
+      localStorage.setItem(LOCAL_STORAGE_KEY__PANE_POSITIONS, JSON.stringify(panePositions));
+    },
+    startResizing(event) {
+      this.startPosition = this.getPosition(event);
+      document.body.addEventListener('mousemove', this.updatePosition);
+      document.body.addEventListener('mouseup', this.endResizing);
+      this.resizing = true;
+      this.$emit('start-resizing');
+      this.trackSize();
+    },
+    toggleCollapse(_event) {
+      if (this.collapsed) {
+        this.handleExpand();
+        this.removeHideParam(this.hideParam);
+      } else {
+        this.handleCollapse();
+        this.addHideParam(this.hideParam);
+      }
+    },
+    trackSize() {
+      if (!this.dragCollapse) {
+        if (this.type === 'vertical') {
+          this.initial = this.$el.offsetHeight;
+        } else if (this.type === 'horizontal') {
+          this.initial = this.$el.offsetWidth;
+        }
+
+        if (this.persistPosition) {
+          this.setSavedPosition(`${this.initial}px`);
+        }
+      }
+    },
+    updatePosition(event) {
+      const size = this.getNewSize(event);
+      const intSize = parseInt(size.substr(0, size.length - 2), 10);
+      if (intSize < COLLAPSE_THRESHOLD_PX && this.isCollapsable === true) {
+        this.dragCollapse = true;
+        this.endResizing();
+        this.toggleCollapse();
+      } else {
+        this.$el.style[this.styleProp] = size;
+      }
+    }
+  }
+};
+</script>
diff --git a/src/ui/layout/RecentObjectsList.vue b/src/ui/layout/RecentObjectsList.vue
new file mode 100644
index 00000000000..a1bc36d51f0
--- /dev/null
+++ b/src/ui/layout/RecentObjectsList.vue
@@ -0,0 +1,297 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="c-tree-and-search l-shell__tree">
+    <ul class="c-tree-and-search__tree c-tree c-tree__scrollable" aria-label="Recent Objects">
+      <recent-objects-list-item
+        v-for="recentObject in recentObjects"
+        :key="recentObject.navigationPath"
+        :object-path="recentObject.objectPath"
+        :navigation-path="recentObject.navigationPath"
+        :domain-object="recentObject.domainObject"
+        @open-and-scroll-to="openAndScrollTo($event)"
+      />
+    </ul>
+  </div>
+</template>
+
+<script>
+const MAX_RECENT_ITEMS = 20;
+const LOCAL_STORAGE_KEY__RECENT_OBJECTS = 'mct-recent-objects';
+import RecentObjectsListItem from './RecentObjectsListItem.vue';
+export default {
+  name: 'RecentObjectsList',
+  components: {
+    RecentObjectsListItem
+  },
+  inject: ['openmct'],
+  props: {},
+  emits: ['open-and-scroll-to', 'set-clear-button-disabled'],
+  data() {
+    return {
+      recents: []
+    };
+  },
+  computed: {
+    recentObjects() {
+      return this.recents.filter((recentObject) => {
+        return recentObject.location !== null;
+      });
+    }
+  },
+  mounted() {
+    this.compositionCollections = {};
+    this.nameChangeListeners = {};
+    this.openmct.router.on('change:path', this.onPathChange);
+    this.getSavedRecentItems();
+  },
+  unmounted() {
+    this.openmct.router.off('change:path', this.onPathChange);
+    Object.values(this.nameChangeListeners).forEach((unlisten) => {
+      unlisten();
+    });
+  },
+  methods: {
+    addNameListenerFor(domainObject) {
+      const keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
+      if (!this.nameChangeListeners[keyString]) {
+        this.nameChangeListeners[keyString] = this.openmct.objects.observe(
+          domainObject,
+          'name',
+          this.updateRecentObjectName.bind(this, keyString)
+        );
+      }
+    },
+    updateRecentObjectName(keyString, newName) {
+      this.recents = this.recents.map((recentObject) => {
+        if (
+          this.openmct.objects.makeKeyString(recentObject.domainObject.identifier) === keyString
+        ) {
+          return {
+            ...recentObject,
+            domainObject: { ...recentObject.domainObject, name: newName }
+          };
+        }
+        return recentObject;
+      });
+    },
+    removeNameListenerFor(domainObject) {
+      const keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
+      if (this.nameChangeListeners[keyString]) {
+        this.nameChangeListeners[keyString]();
+        delete this.nameChangeListeners[keyString];
+      }
+    },
+    /**
+     * Add a composition collection to the map and register its remove handler
+     * @param {string} navigationPath
+     */
+    addCompositionListenerFor(navigationPath) {
+      this.compositionCollections[navigationPath].removeHandler =
+        this.compositionRemoveHandler(navigationPath);
+      this.compositionCollections[navigationPath].collection.on(
+        'remove',
+        this.compositionCollections[navigationPath].removeHandler
+      );
+    },
+    /**
+     * Handler for composition collection remove events.
+     * Removes the object and any of its children from the recents list.
+     * @param {string} navigationPath
+     */
+    compositionRemoveHandler(navigationPath) {
+      /**
+       * @param {import('../../api/objects/ObjectAPI').Identifier | string} identifier
+       */
+      return (identifier) => {
+        // Construct the navigationPath of the removed object itself
+        const removedNavigationPath = `${navigationPath}/${this.openmct.objects.makeKeyString(
+          identifier
+        )}`;
+
+        // Remove the object and any of its children from the recents list
+        this.recents = this.recents.filter((recentObject) => {
+          return !recentObject.navigationPath.includes(removedNavigationPath);
+        });
+
+        this.removeCompositionListenerFor(removedNavigationPath);
+      };
+    },
+    /**
+     * Restores the RecentObjects list from localStorage, retrieves composition collections,
+     * and registers composition listeners for composable objects.
+     */
+    getSavedRecentItems() {
+      const savedRecentsString = localStorage.getItem(LOCAL_STORAGE_KEY__RECENT_OBJECTS);
+      const savedRecents = savedRecentsString ? JSON.parse(savedRecentsString) : [];
+
+      // Get composition collections and add composition listeners for composable objects
+      savedRecents.forEach((recentObject) => {
+        const { domainObject, navigationPath } = recentObject;
+        this.addNameListenerFor(domainObject);
+        if (this.shouldTrackCompositionFor(domainObject)) {
+          this.compositionCollections[navigationPath] = {};
+          this.compositionCollections[navigationPath].collection =
+            this.openmct.composition.get(domainObject);
+          this.addCompositionListenerFor(navigationPath);
+        }
+      });
+
+      this.recents = savedRecents;
+    },
+    /**
+     * Handler for 'change:path' router events.
+     * Adds or moves to the top the object at the given path to the recents list.
+     * Registers compositionCollection listeners for composable objects.
+     * Enforces the MAX_RECENT_ITEMS limit.
+     * @param {string} navigationPath
+     */
+    async onPathChange(navigationPath) {
+      // Short-circuit if the path is not a navigationPath
+      if (!navigationPath.startsWith('/browse/')) {
+        return;
+      }
+
+      const objectPath = await this.openmct.objects.getRelativeObjectPath(navigationPath);
+      if (!objectPath.length) {
+        return;
+      }
+
+      const domainObject = objectPath[0];
+
+      // Get rid of '/ROOT' if it exists in the navigationPath.
+      // Handles for the case of navigating to "My Items" from a RecentObjectsListItem.
+      // Could lead to dupes of "My Items" in the RecentObjectsList if we don't drop the 'ROOT' here.
+      if (navigationPath.includes('/ROOT')) {
+        navigationPath = navigationPath.replace('/ROOT', '');
+      }
+
+      if (this.shouldTrackCompositionFor(domainObject, navigationPath)) {
+        this.compositionCollections[navigationPath] = {};
+        this.compositionCollections[navigationPath].collection =
+          this.openmct.composition.get(domainObject);
+        this.addCompositionListenerFor(navigationPath);
+      }
+
+      // Don't add deleted objects to the recents list
+      if (domainObject?.location === null) {
+        return;
+      }
+
+      this.addNameListenerFor(domainObject);
+
+      // Move the object to the top if its already existing in the recents list
+      const existingIndex = this.recents.findIndex((recentObject) => {
+        return navigationPath === recentObject.navigationPath;
+      });
+      if (existingIndex !== -1) {
+        this.recents.splice(existingIndex, 1);
+      }
+
+      this.recents.unshift({
+        objectPath,
+        navigationPath,
+        domainObject
+      });
+
+      // Enforce a max number of recent items
+      while (this.recents.length > MAX_RECENT_ITEMS) {
+        const poppedRecentItem = this.recents.pop();
+        this.removeCompositionListenerFor(poppedRecentItem.navigationPath);
+        this.removeNameListenerFor(poppedRecentItem.domainObject);
+      }
+
+      this.setSavedRecentItems();
+    },
+    /**
+     * Delete the composition collection and unregister its remove handler
+     * @param {string} navigationPath
+     */
+    removeCompositionListenerFor(navigationPath) {
+      if (this.compositionCollections[navigationPath]) {
+        this.compositionCollections[navigationPath].collection.off(
+          'remove',
+          this.compositionCollections[navigationPath].removeHandler
+        );
+        delete this.compositionCollections[navigationPath];
+      }
+    },
+    openAndScrollTo(navigationPath) {
+      this.$emit('open-and-scroll-to', navigationPath);
+    },
+    /**
+     * Saves the Recent Objects list to localStorage.
+     */
+    setSavedRecentItems() {
+      localStorage.setItem(LOCAL_STORAGE_KEY__RECENT_OBJECTS, JSON.stringify(this.recents));
+      // send event to parent for enabled button
+      if (this.recents.length === 1) {
+        this.$emit('set-clear-button-disabled', false);
+      }
+    },
+    /**
+     * Returns true if the `domainObject` supports composition and we are not already
+     * tracking its composition.
+     * @param {import('../../api/objects/ObjectAPI').DomainObject} domainObject
+     * @param {string} navigationPath
+     */
+    shouldTrackCompositionFor(domainObject, navigationPath) {
+      return (
+        this.compositionCollections[navigationPath] === undefined &&
+        this.openmct.composition.supportsComposition(domainObject)
+      );
+    },
+    /**
+     * Clears the Recent Objects list in localStorage and in the component.
+     * Before clearing, prompts the user to confirm the action with a dialog.
+     */
+    clearRecentObjects() {
+      const dialog = this.openmct.overlays.dialog({
+        title: 'Clear Recently Viewed Objects',
+        iconClass: 'alert',
+        message:
+          'This action will clear the Recently Viewed Objects list. Are you sure you want to continue?',
+        buttons: [
+          {
+            label: 'OK',
+            callback: () => {
+              localStorage.removeItem(LOCAL_STORAGE_KEY__RECENT_OBJECTS);
+              Object.values(this.nameChangeListeners).forEach((unlisten) => {
+                unlisten();
+              });
+              this.recents = [];
+              dialog.dismiss();
+              this.$emit('set-clear-button-disabled', true);
+            }
+          },
+          {
+            label: 'Cancel',
+            callback: () => {
+              dialog.dismiss();
+            }
+          }
+        ]
+      });
+    }
+  }
+};
+</script>
diff --git a/src/ui/layout/RecentObjectsListItem.vue b/src/ui/layout/RecentObjectsListItem.vue
new file mode 100644
index 00000000000..777ac63c904
--- /dev/null
+++ b/src/ui/layout/RecentObjectsListItem.vue
@@ -0,0 +1,147 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <li
+    class="c-recentobjects-listitem c-recentobjects-listitem--object"
+    :class="isAlias"
+    :aria-label="`${domainObject.name}`"
+  >
+    <div
+      class="c-recentobjects-listitem__type-icon recent-object-icon"
+      :class="resultTypeIcon"
+    ></div>
+    <div class="c-recentobjects-listitem__body">
+      <span
+        ref="recentObjectName"
+        class="c-recentobjects-listitem__title"
+        :name="domainObject.name"
+        draggable="true"
+        @dragstart="dragStart"
+        @click.prevent="clickedRecent"
+        @mouseover.ctrl="showToolTip"
+        @mouseleave="hideToolTip"
+      >
+        {{ domainObject.name }}
+      </span>
+
+      <ObjectPath
+        class="c-recentobjects-listitem__object-path"
+        :read-only="false"
+        :domain-object="domainObject"
+        :object-path="objectPath"
+      />
+    </div>
+    <div class="c-recentobjects-listitem__target-button">
+      <button
+        class="c-icon-button icon-target"
+        :aria-label="`Open and scroll to ${domainObject.name}`"
+        @click="openAndScrollTo(navigationPath)"
+      ></button>
+    </div>
+  </li>
+</template>
+
+<script>
+import tooltipHelpers from '../../api/tooltips/tooltipMixins.js';
+import ObjectPath from '../components/ObjectPath.vue';
+import PreviewAction from '../preview/PreviewAction.js';
+
+export default {
+  name: 'RecentObjectsListItem',
+  components: {
+    ObjectPath
+  },
+  mixins: [tooltipHelpers],
+  inject: ['openmct'],
+  props: {
+    domainObject: {
+      type: Object,
+      required: true
+    },
+    navigationPath: {
+      type: String,
+      required: true
+    },
+    objectPath: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: ['open-and-scroll-to', 'preview-changed'],
+  computed: {
+    isAlias() {
+      return this.openmct.objects.isObjectPathToALink(this.domainObject, this.objectPath)
+        ? { 'is-alias': true }
+        : undefined;
+    },
+    resultTypeIcon() {
+      return this.openmct.types.get(this.domainObject.type).definition.cssClass;
+    }
+  },
+  mounted() {
+    this.previewAction = new PreviewAction(this.openmct);
+    this.previewAction.on('isVisible', this.togglePreviewState);
+  },
+  unmounted() {
+    this.previewAction.off('isVisible', this.togglePreviewState);
+  },
+  methods: {
+    clickedRecent(_event) {
+      if (this.openmct.editor.isEditing()) {
+        this.preview();
+      } else {
+        this.openmct.router.navigate(`#${this.navigationPath}`);
+      }
+    },
+    togglePreviewState(previewState) {
+      this.$emit('preview-changed', previewState);
+    },
+    preview() {
+      if (this.previewAction.appliesTo(this.objectPath)) {
+        this.previewAction.invoke(this.objectPath);
+      }
+    },
+    dragStart(event) {
+      const navigatedObject = this.openmct.router.path[0];
+      const serializedPath = JSON.stringify(this.objectPath);
+      const keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+      if (this.openmct.composition.checkPolicy(navigatedObject, this.domainObject)) {
+        event.dataTransfer.setData(
+          'openmct/composable-domain-object',
+          JSON.stringify(this.domainObject)
+        );
+      }
+
+      event.dataTransfer.setData('openmct/domain-object-path', serializedPath);
+      event.dataTransfer.setData(`openmct/domain-object/${keyString}`, this.domainObject);
+    },
+    openAndScrollTo(navigationPath) {
+      this.$emit('open-and-scroll-to', navigationPath);
+    },
+    async showToolTip() {
+      const { BELOW } = this.openmct.tooltips.TOOLTIP_LOCATIONS;
+      this.buildToolTip(await this.getObjectPath(), BELOW, 'recentObjectName');
+    }
+  }
+};
+</script>
diff --git a/src/ui/layout/TreeItem.vue b/src/ui/layout/TreeItem.vue
new file mode 100644
index 00000000000..c33a8154217
--- /dev/null
+++ b/src/ui/layout/TreeItem.vue
@@ -0,0 +1,243 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div
+    class="c-tree__item-h"
+    role="treeitem"
+    :style="treeItemStyles"
+    :aria-expanded="
+      !activeSearch && hasComposition ? (isOpen || isLoading ? 'true' : 'false') : undefined
+    "
+  >
+    <div
+      class="c-tree__item"
+      :class="{
+        'is-alias': isAlias,
+        'is-navigated-object': shouldHighlight,
+        'is-targeted-item': isTargetedItem,
+        'is-context-clicked': contextClickActive,
+        'is-new': isNewItem
+      }"
+      @animationend="targetedPathAnimationEnd($event)"
+      @click.capture="itemClick"
+      @contextmenu.capture="handleContextMenu"
+    >
+      <view-control
+        ref="action"
+        class="c-tree__item__view-control"
+        :domain-object="node.object"
+        :value="isOpen || isLoading"
+        :enabled="!activeSearch && hasComposition"
+        @input="itemAction()"
+      />
+      <object-label
+        ref="objectLabel"
+        :domain-object="node.object"
+        :object-path="node.objectPath"
+        :navigate-to-path="navigationPath"
+        @context-click-active="setContextClickActive"
+      />
+      <span v-if="isLoading" class="loading"></span>
+    </div>
+  </div>
+</template>
+
+<script>
+import ObjectLabel from '../components/ObjectLabel.vue';
+import ViewControl from '../components/ViewControl.vue';
+
+export default {
+  name: 'TreeItem',
+  components: {
+    ViewControl,
+    ObjectLabel
+  },
+  inject: ['openmct'],
+  props: {
+    node: {
+      type: Object,
+      required: true
+    },
+    isSelectorTree: {
+      type: Boolean,
+      required: true
+    },
+    targetedPath: {
+      type: String,
+      default: null
+    },
+    selectedItem: {
+      type: Object,
+      required: true
+    },
+    activeSearch: {
+      type: Boolean,
+      default: false
+    },
+    leftOffset: {
+      type: String,
+      default: '0px'
+    },
+    isNew: {
+      type: Boolean,
+      default: false
+    },
+    itemIndex: {
+      type: Number,
+      required: false,
+      default: undefined
+    },
+    itemOffset: {
+      type: Number,
+      required: false,
+      default: undefined
+    },
+    itemHeight: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    openItems: {
+      type: Array,
+      required: true
+    },
+    loadingItems: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: [
+    'tree-item-mounted',
+    'tree-item-action',
+    'targeted-path-animation-end',
+    'tree-item-selection'
+  ],
+  data() {
+    this.navigationPath = this.node.navigationPath;
+
+    return {
+      hasComposition: false,
+      navigated: this.isNavigated(),
+      contextClickActive: false
+    };
+  },
+  computed: {
+    isAlias() {
+      let parent = this.node.objectPath[1];
+
+      if (!parent) {
+        return false;
+      }
+
+      let parentKeyString = this.openmct.objects.makeKeyString(parent.identifier);
+
+      return parentKeyString !== this.node.object.location;
+    },
+    isSelectedItem() {
+      return this.selectedItem.objectPath === this.node.objectPath;
+    },
+    isTargetedItem() {
+      return this.targetedPath === this.navigationPath;
+    },
+    isNewItem() {
+      return this.isNew;
+    },
+    isLoading() {
+      return Boolean(this.loadingItems[this.navigationPath]);
+    },
+    isOpen() {
+      return this.openItems.includes(this.navigationPath);
+    },
+    shouldHighlight() {
+      if (this.isSelectorTree) {
+        return this.isSelectedItem;
+      } else {
+        return this.navigated;
+      }
+    },
+    treeItemStyles() {
+      let itemTop = (this.itemOffset + this.itemIndex) * this.itemHeight + 'px';
+
+      return {
+        top: itemTop,
+        position: 'absolute',
+        'padding-left': this.leftOffset
+      };
+    }
+  },
+  mounted() {
+    this.domainObject = this.node.object;
+
+    if (this.openmct.composition.get(this.domainObject)) {
+      this.hasComposition = true;
+    }
+
+    this.openmct.router.on('change:path', this.highlightIfNavigated);
+
+    this.$emit('tree-item-mounted', this.navigationPath);
+  },
+  unmounted() {
+    this.openmct.router.off('change:path', this.highlightIfNavigated);
+  },
+  methods: {
+    targetedPathAnimationEnd($event) {
+      $event.target.classList.remove('is-targeted-item');
+      this.$emit('targeted-path-animation-end');
+    },
+    itemAction() {
+      this.$emit('tree-item-action', this.isOpen || this.isLoading ? 'close' : 'open');
+    },
+    itemClick(event) {
+      // skip for navigation, let viewControl handle click
+      if (this.$refs.action.$el === event.target) {
+        return;
+      }
+
+      event.stopPropagation();
+
+      if (!this.isSelectorTree) {
+        this.$refs.objectLabel.navigateOrPreview(event);
+      } else {
+        this.$emit('tree-item-selection', this.node);
+      }
+    },
+    handleContextMenu(event) {
+      event.stopPropagation();
+
+      if (this.isSelectorTree) {
+        return;
+      }
+
+      this.$refs.objectLabel.showContextMenu(event);
+    },
+    isNavigated() {
+      return this.navigationPath === this.openmct.router.currentLocation.path;
+    },
+    highlightIfNavigated() {
+      this.navigated = this.isNavigated();
+    },
+    setContextClickActive(active) {
+      this.contextClickActive = active;
+    }
+  }
+};
+</script>
diff --git a/src/ui/layout/ViewSwitcher.vue b/src/ui/layout/ViewSwitcher.vue
index 3a046ecbd79..6f966887bfb 100644
--- a/src/ui/layout/ViewSwitcher.vue
+++ b/src/ui/layout/ViewSwitcher.vue
@@ -1,45 +1,67 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-<div
+  <div
     v-if="views.length > 1"
     class="l-browse-bar__view-switcher c-ctrl-wrapper c-ctrl-wrapper--menus-left"
->
+  >
     <button
-        class="c-icon-button c-button--menu"
-        :class="currentView.cssClass"
-        title="Change the current view"
-        @click.prevent.stop="showMenu"
+      class="c-icon-button c-button--menu"
+      :class="currentView.cssClass"
+      title="Change the current view"
+      @click.prevent.stop="showMenu"
     >
-        <span class="c-icon-button__label">
-            {{ currentView.name }}
-        </span>
+      <span class="c-icon-button__label">
+        {{ currentView.name }}
+      </span>
     </button>
-</div>
+  </div>
 </template>
 
 <script>
 export default {
-    inject: ['openmct'],
-    props: {
-        currentView: {
-            type: Object,
-            required: true
-        },
-        views: {
-            type: Array,
-            required: true
-        }
+  inject: ['openmct'],
+  props: {
+    currentView: {
+      type: Object,
+      required: true
+    },
+    views: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: ['set-view'],
+  methods: {
+    setView(view) {
+      this.$emit('set-view', view);
     },
-    methods: {
-        setView(view) {
-            this.$emit('setView', view);
-        },
-        showMenu() {
-            const elementBoundingClientRect = this.$el.getBoundingClientRect();
-            const x = elementBoundingClientRect.x;
-            const y = elementBoundingClientRect.y + elementBoundingClientRect.height;
+    showMenu() {
+      const elementBoundingClientRect = this.$el.getBoundingClientRect();
+      const x = elementBoundingClientRect.x;
+      const y = elementBoundingClientRect.y + elementBoundingClientRect.height;
 
-            this.openmct.menus.showMenu(x, y, this.views);
-        }
+      this.openmct.menus.showMenu(x, y, this.views);
     }
+  }
 };
 </script>
diff --git a/src/ui/layout/app-logo.scss b/src/ui/layout/app-logo.scss
index 8677a2b99d5..6493e9c11e7 100644
--- a/src/ui/layout/app-logo.scss
+++ b/src/ui/layout/app-logo.scss
@@ -1,6 +1,6 @@
 .l-shell__app-logo {
-    cursor: pointer;
-    width: 70px;
-    height: 20px;
-    background: url('assets/images/logo-openmct.svg') center no-repeat;
-}
\ No newline at end of file
+  cursor: pointer;
+  width: 70px;
+  height: 20px;
+  background: url('assets/images/logo-openmct.svg') center no-repeat;
+}
diff --git a/src/ui/layout/create-button.scss b/src/ui/layout/create-button.scss
index 0a0bd1e53ff..bd3f9cc12d7 100644
--- a/src/ui/layout/create-button.scss
+++ b/src/ui/layout/create-button.scss
@@ -1,29 +1,25 @@
 .c-create-button,
 .c-create-menu {
-    font-size: 1.1em;
+  font-size: 1.1em;
 }
 
 .c-create-button {
-    .is-editing & {
-        @include disabled();
-    }
-
-    .c-button__label {
-        text-transform: $createBtnTextTransform;
-    }
+  .c-button__label {
+    text-transform: $createBtnTextTransform;
+  }
 }
 
 .c-create-menu {
-    max-height: 80vh;
-    width: 500px;
-    min-height: 250px;
-    z-index: 70;
+  max-height: 80vh;
+  width: 500px;
+  min-height: 250px;
+  z-index: 70;
 
-    [class*="__icon"] {
-        filter: $colorKeyFilter;
-    }
+  [class*='__icon'] {
+    filter: $colorKeyFilter;
+  }
 
-    [class*="__item-description"] {
-        min-width: 200px;
-    }
+  [class*='__item-description'] {
+    min-width: 200px;
+  }
 }
diff --git a/src/ui/layout/layout.scss b/src/ui/layout/layout.scss
index 702bf088665..98eb93fc6e4 100644
--- a/src/ui/layout/layout.scss
+++ b/src/ui/layout/layout.scss
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -21,393 +21,465 @@
  *****************************************************************************/
 /******************************* SHELL */
 .l-shell {
-    position: absolute;
-    top: 0; right: 0; bottom: 0; left: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  overflow: hidden;
+
+  &__drawer {
+    background: $drawerBg;
     display: flex;
-    flex-flow: column nowrap;
+    flex-direction: column;
+    height: 0;
+    min-height: 0;
+    max-height: 15%;
     overflow: hidden;
+    @include transition(min-height);
 
-    &__drawer {
-        background: $drawerBg;
-        display: flex;
-        flex-direction: column;
-        height: 0;
-        min-height: 0;
-        max-height: 15%;
-        overflow: hidden;
-        transition: $transIn;
-
-        &.is-expanded {
-            height: max-content;
-        }
+    &.is-expanded {
+      min-height: 100px;
     }
+  }
 
-    &__pane-tree {
-        width: 40%;
-
-        [class*="collapse-button"] {
-            // For mobile, collapse button becomes menu icon
-            body.mobile & {
-                @include cClickIconButton();
-                color: $colorKey !important;
-                position: absolute;
-                right: -18px;
-                top: $interiorMarginSm;
-                transform: translateX(100%);
-                width: $mobileMenuIconD;
-                z-index: 2;
-
-                &:before {
-                    content: $glyph-icon-menu-hamburger;
-                }
-            }
+  &__pane-tree {
+    width: 40%;
+
+    [class*='collapse-button'] {
+      // For mobile, collapse button becomes menu icon
+      body.mobile & {
+        @include cClickIconButton();
+        color: $colorKey !important;
+        position: absolute;
+        right: -18px;
+        top: $interiorMarginSm;
+        transform: translateX(100%);
+        width: $mobileMenuIconD;
+        z-index: 2;
+
+        &:before {
+          content: $glyph-icon-menu-hamburger;
         }
+      }
     }
+  }
 
-    &__pane-tree,
-    &__pane-inspector,
-    &__pane-main {
-        .l-pane__contents {
-            display: flex;
-            flex-flow: column nowrap;
-            overflow-x: hidden;
-        }
+  &__pane-tree,
+  &__pane-inspector {
+    .l-pane__contents {
+      display: flex;
+      flex-flow: column nowrap;
+      overflow-x: hidden;
     }
+  }
 
-    &__pane-tree,
-    &__pane-main {
-        .l-pane__contents {
-            > * {
-                flex: 0 0 auto;
-
-                + * {
-                    margin-top: $interiorMargin;
-                }
-            }
+  &__pane-tree {
+    .l-pane__contents {
+      > * {
+        flex: 0 0 auto;
+
+        + * {
+          margin-top: $interiorMargin;
         }
+      }
     }
+  }
 
-    &__pane-main {
-        .l-pane__header { display: none; }
+  &__pane-main {
+    .l-pane__header {
+      display: none;
     }
 
-    body.mobile & {
-        &__pane-main,
-        &__pane-tree {
-            padding: $interiorMarginLg;
+    .l-pane__contents {
+      .l-shell__main-.l-shell__main-view-browse-bar {
+        position: relative;
+      }
+      // Using `position: absolute` due to flex having repaint issues with the Time Conductor, #5247
+      .l-shell__time-conductor,
+      .l-shell__main-container {
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: auto;
+        width: auto;
+      }
+
+      .l-shell__main-container {
+        top: $shellMainBrowseBarH + $interiorMarginLg;
+        bottom: $shellTimeConductorH + $interiorMargin;
+      }
+
+      @include phonePortrait() {
+        .l-shell__main-container {
+          bottom: $shellTimeConductorMobileH + $interiorMargin;
         }
+      }
 
-        &__pane-tree {
-            background: linear-gradient(90deg, transparent 70%, rgba(black, 0.2) 99%, rgba(black, 0.3));
-
-            .l-pane__header {
-                // Hide all buttons except the collapse button
-                > :not(.l-pane__collapse-button) {
-                    display: none;
-                }
-            }
-
-            [class*="expand-button"] {
-                display: none;
-            }
-
-            &[class*="--collapsed"] {
-                [class*="collapse-button"] {
-                    right: -8px;
-                }
-            }
-        }
+      .l-shell__time-conductor {
+        bottom: 0;
+      }
     }
+  }
 
-    body.phone.portrait & {
-        &__pane-tree {
-            width: calc(100% - #{$mobileMenuIconD + (2 * nth($shellPanePad, 2))});
+  body.mobile & {
+    &__pane-main,
+    &__pane-tree {
+      padding: $interiorMarginLg;
+    }
 
-            + .l-pane {
-                // Hide pane-main when this pane is expanded
-                opacity: 0;
-                pointer-events: none;
-            }
+    &__pane-tree {
+      background: linear-gradient(90deg, transparent 70%, rgba(black, 0.2) 99%, rgba(black, 0.3));
 
-            &[class*="--collapsed"] + .l-pane {
-                // Show pane-main when tree is collapsed
-                opacity: 1;
-                pointer-events: inherit;
-                transition: opacity 250ms ease 250ms;
-            }
+      .l-pane__header {
+        // Hide all buttons except the collapse button
+        > :not(.l-pane__collapse-button) {
+          display: none;
         }
-    }
+      }
 
-    &__head,
-    &__pane-inspector {
-        body.mobile & {
-            display: none;
+      [class*='expand-button'] {
+        display: none;
+      }
+
+      &[class*='--collapsed'] {
+        [class*='collapse-button'] {
+          right: -8px;
         }
+      }
     }
+  }
 
-    &__head,
-    &__status {
-        flex: 0 0 auto;
-        display: flex;
-    }
+  body.phone.portrait & {
+    &__pane-tree {
+      width: calc(100% - #{$mobileMenuIconD + (2 * nth($shellPanePad, 2))});
 
-    /******************************* HEAD */
-    &__main-view-browse-bar {
-        flex: 0 0 auto;
-        margin-bottom: $interiorMargin; // Needs some additional visual separation
+      + .l-pane {
+        // Hide pane-main when this pane is expanded
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      &[class*='--collapsed'] + .l-pane {
+        // Show pane-main when tree is collapsed
+        opacity: 1;
+        pointer-events: inherit;
+        transition: opacity 250ms ease 250ms;
+      }
     }
+  }
 
-    body.mobile & .l-shell__main-view-browse-bar {
-        margin-left: $mobileMenuIconD; // Make room for the hamburger!
-        .c-button[class*='__actions__edit'] {
-            display: none; // Hide the main view edit button when in mobile context
-        }
+  //&__head,
+  &__pane-inspector {
+    body.mobile & {
+      display: none;
     }
+  }
 
-    &__head {
-        align-items: center;
-        background: $colorHeadBg;
-        justify-content: space-between;
-        padding: $interiorMargin $interiorMargin + 2;
+  &__status {
+    flex: 0 0 auto;
+    display: flex;
+  }
 
-        > [class*="__"] + [class*="__"] {
-            margin-left: $interiorMargin;
-        }
+  /******************************* HEAD */
+  &__main-view-browse-bar {
+    flex: 0 0 auto;
+    margin-bottom: $interiorMargin; // Needs some additional visual separation
+  }
 
-        .l-shell__head__collapse-button {
-            color: $colorBtnMajorBg;
-            flex: 0 0 auto;
-            font-size: 0.9em;
-
-            &--collapse {
-                &:before {
-                    content: $glyph-icon-items-collapse;
-                }
-            }
-
-            &--expand {
-                &:before {
-                    content: $glyph-icon-items-expand;
-                }
-            }
-        }
+  &__head {
+    body.mobile & {
+      .c-create-button,
+      .c-create-menu,
+      .c-indicator,
+      .c-icon-button {
+        // Making status area visible, but hiding some widgets for mobile.
+        display: none;
+      }
+    }
+  }
+
+  body.mobile & .l-shell__main-view-browse-bar {
+    margin-left: $mobileMenuIconD; // Make room for the hamburger!
+    .c-button[class*='__actions__edit'] {
+      display: none; // Hide the main view edit button when in mobile context
+    }
+  }
 
-        &-section {
-            // Subdivides elements across the head
-            display: flex;
-            flex: 0 1 auto;
-            padding: 0 $interiorMargin;
+  &__head {
+    align-items: center;
+    background: $colorHeadBg;
+    display: grid;
+    grid-template-columns: min-content 1fr 3fr repeat(3, min-content);
+    grid-column-gap: $interiorMargin;
+    min-height: 34px;
+    padding: $interiorMargin $interiorMargin + 2;
+
+    .l-shell__head__collapse-button {
+      color: $colorBtnMajorBg;
+      flex: 0 0 auto;
+      font-size: 0.9em;
+
+      &--collapse {
+        &:before {
+          content: $glyph-icon-items-collapse;
         }
+      }
 
-        &--expanded {
-            .c-indicator__label {
-                transition: none !important;
-            }
+      &--expand {
+        &:before {
+          content: $glyph-icon-items-expand;
         }
+      }
     }
 
-    &__controls {
-        $brdr: 1px solid $colorInteriorBorder;
-        border-right: $brdr;
-        border-left: $brdr;
-        align-items: start;
+    &-section {
+      // Subdivides elements across the head
+      display: flex;
     }
 
-    &__create-button,
-    &__app-logo {
-        flex: 0 0 auto;
+    &--expanded {
+      .c-indicator__label {
+        transition: none !important;
+      }
     }
+  }
 
-    &__create-button { margin-right: $interiorMarginLg; }
+  &__controls {
+    $brdr: 1px solid $colorInteriorBorder;
+    border-right: $brdr;
+    border-left: $brdr;
+    align-items: start;
+    $p: $interiorMarginSm;
+    padding-left: $p;
+    padding-right: $p;
+  }
 
-    &__indicators {
-        flex: 1 1 auto;
-        flex-wrap: wrap;
-        justify-content: flex-end;
-        [class*='indicator-clock'] { order: 90; }
+  &__create-button,
+  &__app-logo {
+    flex: 0 0 auto;
+  }
 
-        .c-indicator .label {
-            font-size: 0.9em;
-        }
+  &__create-button {
+    body.mobile & {
+      // Fixes weird gap in mobile status area
+      margin-right: 0px;
     }
+  }
 
-    /******************************* MAIN AREA */
-    &__main-container {
-        // Wrapper for main views
-        //display: flex; NEEDS REGRESSION TESTING!!!
-        flex: 1 1 auto !important;
-        height: 100%; // Chrome 73 overflow bug fix
-        overflow: auto;
-    }
+  &__indicators {
+    flex-wrap: wrap;
+    font-size: 11px;
+    justify-content: flex-end;
 
-    &__tree {
-        // Tree component within __pane-tree
-        flex: 1 1 auto !important;
+    .l-shell__head--expanded & {
+      // Force elements to wrap down when width constrained
+      height: 24px;
+      overflow: hidden;
     }
+  }
 
-    &__time-conductor {
-        border-top: 1px solid $colorInteriorBorder;
-        padding-top: $interiorMargin;
+  /******************************* MAIN AREA */
+  &__main-container {
+    // Wrapper for main views
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto !important;
+    height: 100%; // Chrome 73 overflow bug fix
+    overflow: auto;
+
+    > * + * {
+      margin-top: $interiorMargin;
     }
 
-    &__main {
-        > .l-pane {
-            padding: nth($shellPanePad, 1) 0;
-        }
+    > .c-object-view {
+      flex: 1 1 auto;
+      overflow: auto;
     }
+  }
 
-    body.desktop & {
-        &__main {
-            // Top and bottom padding in container that holds tree, __pane-main and Inspector
-            padding: nth($shellPanePad, 1) 0;
-            min-height: 0;
+  &__tree {
+    // Tree component within __pane-tree
+    flex: 1 1 auto !important;
+  }
 
-            > .l-pane {
-                padding-top: 0;
-                padding-bottom: 0;
-            }
-        }
+  &__main {
+    > .l-pane {
+      padding: nth($shellPanePad, 1) 0;
+    }
+  }
 
-        &__pane-tree,
-        &__pane-inspector {
-            max-width: 70%;
+  body.desktop & {
+    &__main {
+      // Top and bottom padding in container that holds tree, __pane-main and Inspector
+      padding: nth($shellPanePad, 1) 0;
+      min-height: 0;
+
+      > .l-pane {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+
+      .l-pane__expand-button__label {
+        // Add a plus icon before the label
+        &:before {
+          font-family: symbolsfont;
+          content: $glyph-icon-plus;
+          display: inline-block;
         }
+      }
+    }
 
-        &__pane-tree {
-            width: 300px;
-            padding-left: nth($shellPanePad, 2);
-        }
+    &__pane-tree,
+    &__pane-inspector {
+      max-width: 70%;
+    }
 
-        &__pane-inspector {
-            width: 200px;
-            padding-right: nth($shellPanePad, 2);
-        }
+    &__pane-tree {
+      width: 300px;
+      padding-left: nth($shellPanePad, 2);
     }
 
-    &__toolbar {
-        // Toolbar in the main shell, used by Display Layouts
-        $p: $interiorMargin;
-        background: $editUIBaseColor;
-        border-radius: $basicCr;
-        height: $p + 24px; // Need to standardize the height
-        justify-content: space-between;
-        padding: $p;
+    &__pane-inspector {
+      width: 200px;
+      padding-right: nth($shellPanePad, 2);
     }
+  }
 
-    &__resizing {
-        iframe {
-            pointer-events: none;
-        }
+  &__toolbar {
+    // Toolbar in the main shell, used by Display Layouts
+    $p: $interiorMargin;
+    background: $editUIBaseColor;
+    border-radius: $basicCr;
+    height: $p + 24px; // Need to standardize the height
+    justify-content: space-between;
+    padding: $p;
+    z-index: 2;
+  }
+
+  &__resizing {
+    iframe {
+      pointer-events: none;
     }
+  }
+}
+
+.c-object-view {
+  display: block;
+  height: 100%;
+  overflow: auto;
+
+  &.is-stale {
+    @include isStaleHolder();
+  }
 }
 
 .is-editing {
-    .l-shell__main-container {
-        $m: 3px;
-        box-shadow: $colorBodyBg 0 0 0 1px, $editUIAreaShdw;
-        margin-left: $m;
-        margin-right: $m;
-
-        &[s-selected] {
-            // Provide a clearer selection context articulation for the main edit area
-            box-shadow: $colorBodyBg 0 0 0 1px, $editUIAreaShdwSelected;
-        }
-    }
+  .l-shell__main-container {
+    $m: 3px;
+    box-shadow:
+      $colorBodyBg 0 0 0 1px,
+      $editUIAreaShdw;
+    margin-left: $m;
+    margin-right: $m;
+    top: $shellToolBarH + $shellMainBrowseBarH + $interiorMarginLg !important;
+
+    &[s-selected] {
+      // Provide a clearer selection context articulation for the main edit area
+      box-shadow:
+        $colorBodyBg 0 0 0 1px,
+        $editUIAreaShdwSelected;
+    }
+  }
 }
 
 /************************** BROWSE BAR */
 .l-browse-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  > * + * {
+    margin-left: $interiorMarginSm;
+  }
+
+  &__start,
+  &__end,
+  &__actions {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+  }
 
-    [class*="__"] {
-        // Removes extraneous horizontal white space
-        display: inline-flex;
+  &__actions,
+  &__end {
+    .c-button {
+      &[class*='icon-']:before {
+        min-width: 1em;
+        text-align: center;
+      }
     }
 
     > * + * {
-        margin-left: $interiorMarginSm;
-    }
-
-    &__start,
-    &__end,
-    &__actions {
-        display: flex;
-        align-items: center;
+      margin-left: $interiorMarginSm;
     }
+  }
 
-    &__actions,
-    &__end {
-        .c-button {
-            &[class*='icon-']:before {
-                min-width: 1em;
-                text-align: center;
-            }
-        }
+  &__start {
+    flex: 1 1 auto;
+    min-width: 0; // Forces interior to compress when pushed on
 
-        > * + * {
-            margin-left: $interiorMarginSm;
-        }
+    [class*='button'] {
+      flex: 0 0 auto;
     }
+  }
 
-    &__start {
-        flex: 1 1 auto;
-        min-width: 0; // Forces interior to compress when pushed on
+  &__end {
+    flex: 0 0 auto;
+  }
 
-        [class*='button'] {
-            flex: 0 0 auto;
-        }
-    }
+  &__nav-to-parent-button,
+  &__disclosure-button {
+    //flex: 0 0 auto;
+  }
 
-    &__end {
-        flex: 0 0 auto;
-    }
-
-    &__nav-to-parent-button,
-    &__disclosure-button {
-        //flex: 0 0 auto;
-    }
-
-    &__nav-to-parent-button {
-        // This is an icon-button
-        .is-editing & {
-            display: none;
-        }
-    }
+  &__nav-to-parent-button {
+    // This is an icon-button
+    margin-right: $interiorMargin;
 
-    &__object-name--w,
-    &__object-name {
-        flex: 0 1 auto;
+    .is-editing & {
+      display: none;
     }
+  }
 
-    .c-object-label__name {
-        filter: $objectLabelNameFilter;
-    }
+  &__object-name--w,
+  &__object-name {
+    flex: 0 1 auto;
+  }
 
-    .c-object-label__type-icon {
-        opacity: $objectLabelTypeIconOpacity;
-    }
+  .c-object-label__type-icon {
+    opacity: $objectLabelTypeIconOpacity;
+  }
 
-    &__object-name--w {
-        @include headerFont(1.5em);
-        margin-left: $interiorMarginLg;
-        min-width: 0;
+  &__object-name--w {
+    @include headerFont(1.5em);
+    min-width: 0;
 
-        .is-status__indicator {
-            right: -5px !important;
-            top: -4px !important;
-        }
+    .is-status__indicator {
+      right: -5px !important;
+      top: -4px !important;
     }
+  }
 
-    &__object-details {
-        opacity: 0.5;
-    }
+  &__object-details {
+    opacity: 0.5;
+  }
 }
 
 /************************** DRAWER */
 .c-drawer {
-    /* New sliding overlay or push element to contain things
+  /* Sliding overlay or push element to contain things
     * Designed for mobile and compact desktop scenarios
     * Variations:
     * --overlays: position absolute, overlays neighboring elements
@@ -416,56 +488,58 @@
     * &.is-expanded: applied when expanded.
      */
 
-    transition: $transOut;
-    min-height: 0;
-    min-width: 0;
-    overflow: hidden;
+  $transProps: width, min-width, height, min-height;
 
-    &:not(.is-expanded) {
-        // When collapsed, hide internal elements
-        > * {
-            display: none;
-        }
-    }
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
 
-    &.c-drawer--align-left {
-        height: 100%;
+  &:not(.is-expanded) {
+    // When collapsed, hide internal elements
+    > * {
+      display: none;
     }
+  }
 
-    &.c-drawer--align-top {
-        // Need anything here?
-    }
+  &.c-drawer--align-left {
+    @include transition($prop: $transProps, $dur: $transOutTime);
+    height: 100%;
+  }
 
-    &.c-drawer--overlays {
-        position: absolute;
-        z-index: 3;
+  &.c-drawer--align-top {
+    @include transition($prop: $transProps, $dur: $transOutTime);
+  }
 
-        &.is-expanded {
-            // Height and width must be set per usage
-            &.c-drawer--align-left {
-                box-shadow: rgba(black, 0.7) 3px 0 20px;
-            }
+  &.c-drawer--overlays {
+    position: absolute;
+    z-index: 3;
 
-            &.c-drawer--align-top {
-                box-shadow: rgba(black, 0.7) 0 3px 20px;
-            }
-        }
+    &.is-expanded {
+      // Height and width must be set per usage
+      &.c-drawer--align-left {
+        box-shadow: rgba(black, 0.7) 3px 0 20px;
+      }
+
+      &.c-drawer--align-top {
+        box-shadow: rgba(black, 0.7) 0 3px 20px;
+      }
     }
+  }
 
-    &.c-drawer--push {
-        position: relative;
+  &.c-drawer--push {
+    position: relative;
 
-        &.is-expanded {
-            // Height and width must be set per usage
-            &.c-drawer--align-left {
-                box-shadow: rgba(black, 0.2) 3px 0 20px;
-                margin-right: $interiorMarginLg;
-            }
-
-            &.c-drawer--align-top {
-                box-shadow: rgba(black, 0.2) 0 3px 20px;
-                margin-bottom: $interiorMarginLg; // Not sure this is desired here
-            }
-        }
+    &.is-expanded {
+      // Height and width must be set per usage
+      &.c-drawer--align-left {
+        box-shadow: rgba(black, 0.2) 3px 0 20px;
+        margin-right: $interiorMarginLg;
+      }
+
+      &.c-drawer--align-top {
+        box-shadow: rgba(black, 0.2) 0 3px 20px;
+        margin-bottom: $interiorMarginLg; // Not sure this is desired here
+      }
     }
+  }
 }
diff --git a/src/ui/layout/mct-search.scss b/src/ui/layout/mct-search.scss
deleted file mode 100644
index a6b1a8f18cc..00000000000
--- a/src/ui/layout/mct-search.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/******************************* SEARCH */
-.c-search {
-    input[type=search] {
-        width: 100%;
-    }
-
-    &--major {
-        display: flex;
-    }
-}
diff --git a/src/ui/layout/mct-tree.scss b/src/ui/layout/mct-tree.scss
index 9912aebabcc..62b197281dc 100644
--- a/src/ui/layout/mct-tree.scss
+++ b/src/ui/layout/mct-tree.scss
@@ -1,301 +1,298 @@
+@use 'sass:math';
+
 .c-tree-and-search {
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 auto;
-    overflow: auto;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  overflow: auto;
 
-    > * + * { margin-top: $interiorMargin; }
+  > * + * {
+    margin-top: $interiorMargin;
+  }
 
-    &__search {
-        flex: 0 0 auto;
-    }
+  &__search {
+    flex: 0 0 auto;
+  }
 
-    &__no-results {
-        font-style: italic;
-        opacity: 0.6;
+  &__no-results {
+    font-style: italic;
+    opacity: 0.6;
+  }
+
+  &__tree {
+    flex: 1 1 auto;
+    height: 0; // Chrome 73 overflow bug fix
+    padding-right: $interiorMarginSm;
+  }
+
+  .c-tree {
+    flex: 1 1 auto;
+    overflow: hidden;
+    transition: all;
+
+    .c-tree__item-h {
+      width: 100%;
     }
 
-    &__tree {
-        flex: 1 1 auto;
-        height: 0; // Chrome 73 overflow bug fix
-        padding-right: $interiorMarginSm;
+    &__scrollable {
+      overflow: auto;
+      padding-right: $interiorMargin;
     }
 
-    .c-tree {
-        flex: 1 1 auto;
-        overflow: hidden;
-        transition: all;
-
-        .c-tree__item-h {
-            width: 100%;
-        }
-
-        &__scrollable {
-            overflow: auto;
-            padding-right: $interiorMargin;
-        }
-
-        &__item--empty {
-            // Styling for empty tree items
-            // Indent should allow for c-nav view-control width and icon spacing
-            font-style: italic;
-            padding: $interiorMarginSm * 2 1px;
-            opacity: 0.7;
-            pointer-events: none;
-
-            &:before {
-                content: '';
-                display: inline-block;
-                width: $treeNavArrowD + $interiorMarginLg;
-            }
-        }
+    &__item--empty {
+      // Styling for empty tree items
+      // Indent should allow for c-nav view-control width and icon spacing
+      font-style: italic;
+      padding: $interiorMarginSm * 2 1px;
+      opacity: 0.7;
+      pointer-events: none;
+
+      &:before {
+        content: '';
+        display: inline-block;
+        width: $treeNavArrowD + $interiorMarginLg;
+      }
     }
+  }
 }
 
 .c-tree,
 .c-list {
-    @include userSelectNone();
-    overflow-x: hidden;
-    overflow-y: auto;
-    padding-right: $interiorMarginSm;
+  @include userSelectNone();
+  overflow-x: hidden;
+  overflow-y: auto;
 
-    .icon-arrow-nav-to-parent {
-        visibility: hidden;
+  .icon-arrow-nav-to-parent {
+    visibility: hidden;
 
-        &.is-enabled {
-            visibility: visible;
-        }
+    &.is-enabled {
+      visibility: visible;
     }
+  }
 
-    li {
-        position: relative;
-        &[class*="__item-h"] {
-            display: block;
-            width: 100%;
-        }
+  li {
+    position: relative;
 
-        + li {
-            margin-top: 1px;
-        }
+    &[class*='__item-h'] {
+      display: block;
+      width: 100%;
     }
 
-    &__item {
-        border-radius: $controlCr;
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        line-height: 110%;
-        padding: $interiorMarginSm $interiorMargin;
-        transition: background 150ms ease;
-
-        &__type-icon {
-            color: $colorItemTreeIcon;
-        }
-
-        @include hover {
-            background: $colorItemTreeHoverBg;
-            filter: $filterHov;
-        }
-
-        &.is-navigated-object,
-        &.is-selected {
-            background: $colorItemTreeSelectedBg;
-
-            [class*="__name"] {
-                color: $colorItemTreeSelectedFg;
-            }
-        }
-
-        &.is-context-clicked {
-            box-shadow: inset $colorItemTreeSelectedBg 0 0 0 1px;
-        }
-
-        .icon-arrow-nav-to-parent {
-            visibility: hidden;
-
-            &.is-enabled {
-                visibility: visible;
-            }
-        }
+    + li {
+      margin-top: 1px;
     }
-}
+  }
 
-.c-tree {
-    .c-tree {
-        margin-left: 15px;
+  &__item {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    line-height: 110%;
+    padding: $interiorMarginSm $interiorMargin;
+    transition: background 150ms ease;
+
+    &__type-icon {
+      color: $colorItemTreeIcon;
     }
 
-    &__item {
-        [class*="view-control"] {
-            padding: 2px 10px;
-        }
-
-        > * + * {
-            margin-left: ceil($interiorMarginSm / 2);
-        }
-
-        @include hover {
-            background: $colorItemTreeHoverBg;
-        }
-
-        // Object labels in trees
-        &__label {
-            flex: 1 1 auto;
-        }
-
-        &.is-alias {
-            // Object is an alias to an original.
-            [class*='__type-icon'] {
-                @include isAlias();
-            }
-        }
-
-        body.mobile & {
-            @include button($bg: $colorMobilePaneLeftTreeItemBg, $fg: $colorMobilePaneLeftTreeItemFg);
-            height: $mobileTreeItemH;
-            margin-bottom: $interiorMarginSm;
-            [class*="view-control"] {
-                width: ceil($mobileTreeItemH * 0.5);
-            }
-        }
-
-        &.is-navigated-object,
-        &.is-selected {
-            background: $colorItemTreeSelectedBg;
-
-            [class*="__label"],
-            [class*="__name"] {
-                color: $colorItemTreeSelectedFg;
-            }
-
-            [class*="__type-icon"]:before {
-                color: $colorItemTreeSelectedIcon;
-            }
-        }
+    @include hover {
+      background: $colorItemTreeHoverBg;
+      //filter: $filterHov; // FILTER REMOVAL, CONVERT TO THEME CONSTANT
     }
 
-    &__item__label {
-        @include desktop {
-            &:hover {
-                filter: $filterHov;
-            }
-        }
+    &.is-navigated-object,
+    &.is-selected {
+      background: $colorItemTreeSelectedBg;
+
+      [class*='__name'] {
+        color: $colorItemTreeSelectedFg;
+      }
+    }
+    &.is-targeted-item {
+      $c: $colorBodyFg;
+      @include pulseProp(
+        $animName: flashTarget,
+        $dur: 500ms,
+        $iter: 8,
+        $prop: background,
+        $valStart: rgba($c, 0.4),
+        $valEnd: rgba($c, 0)
+      );
     }
-}
 
-.is-editing .is-navigated-object {
-    a[class*="__item__label"] {
-        opacity: 0.4;
+    &.is-new {
+      animation-name: animTemporaryHighlight;
+      animation-timing-function: ease-out;
+      animation-duration: 3s;
+      animation-iteration-count: 1;
+    }
 
-        [class*="__name"] {
-            font-style: italic;
-        }
+    &.is-context-clicked {
+      box-shadow: inset $colorItemTreeSelectedBg 0 0 0 1px;
     }
+
+    .icon-arrow-nav-to-parent {
+      visibility: hidden;
+
+      &.is-enabled {
+        visibility: visible;
+      }
+    }
+  }
 }
 
 .c-tree {
-    &__item {
-       body.mobile & {
-            @include button($bg: $colorMobilePaneLeftTreeItemBg, $fg: $colorMobilePaneLeftTreeItemFg);
-            height: $mobileTreeItemH;
-            margin-bottom: $interiorMarginSm;
-            [class*="view-control"] {
-                width: ceil($mobileTreeItemH * 0.5);
-            }
-        }
+  padding-right: $interiorMarginSm;
+
+  .c-tree {
+    margin-left: 15px;
+  }
+
+  &__item {
+    border-radius: $smallCr;
+
+    [class*='view-control'] {
+      padding: 2px 10px;
     }
 
-    .c-tree {
-        margin-left: $treeItemIndent;
+    > * + * {
+      margin-left: ceil(math.div($interiorMarginSm, 2));
     }
-}
 
-.c-list {
-    padding-right: $interiorMargin;
-
-    &__item {
-        &__name {
-            $p: $interiorMarginSm;
-            @include ellipsize();
-            padding-bottom: $p;
-            padding-top: $p;
-        }
+    @include hover {
+      background: $colorItemTreeHoverBg;
     }
-}
 
-.c-nav {
-    $dimension: $treeNavArrowD;
-
-    &__up, &__down {
-        flex: 0 0 auto;
-        height: $dimension;
-        width: $dimension;
-        visibility: hidden;
-        position: relative;
-        text-align: center;
-
-        &.is-enabled {
-            visibility: visible;
-        }
-
-        &:before {
-            // Nav arrow
-            $dimension: 9px;
-            $width: 3px;
-            border: solid $colorItemTreeVC;
-            border-width: 0 $width $width 0;
-            content: '';
-            display: block;
-            position: absolute;
-            left: 50%; top: 50%;
-            height: $dimension;
-            width: $dimension;
-        }
-
-        @include desktop {
-            &:hover:before {
-                border-color: $colorItemTreeHoverFg;
-            }
-        }
+    // Object labels in trees
+    &__label {
+      flex: 1 1 auto;
     }
 
-    &__up:before {
-        transform: translate(-30%, -50%) rotate(135deg);
+    &.is-alias {
+      // Object is an alias to an original.
+      [class*='__type-icon'] {
+        @include isAlias();
+      }
     }
 
-    &__down:before {
-        transform: translate(-70%, -50%) rotate(-45deg);
+    body.mobile & {
+      @include button($bg: $colorMobilePaneLeftTreeItemBg, $fg: $colorMobilePaneLeftTreeItemFg);
+      height: $mobileTreeItemH;
+      margin-bottom: $interiorMarginSm;
+
+      [class*='view-control'] {
+        width: ceil($mobileTreeItemH * 0.5);
+      }
     }
+
+    &.is-navigated-object,
+    &.is-selected {
+      background: $colorItemTreeSelectedBg;
+
+      [class*='__label'],
+      [class*='__name'] {
+        color: $colorItemTreeSelectedFg;
+      }
+
+      [class*='__type-icon']:before {
+        color: $colorItemTreeSelectedIcon;
+      }
+    }
+  }
 }
 
-.c-selector {
-    .c-tree-and-search__tree.c-tree {
-        border: 1px solid $colorInteriorBorder;
-        border-radius: $controlCr;
-        padding: $interiorMargin;
-        overflow: auto;
+.is-editing .is-navigated-object {
+  a[class*='__item__label'] {
+    [class*='__name'] {
+      font-style: italic;
     }
+  }
 }
 
-// TRANSITIONS
-.children-enter-active {
-    &.down {
-        animation: animSlideLeft 500ms;
+.c-tree {
+  &__item {
+    body.mobile & {
+      @include button($bg: $colorMobilePaneLeftTreeItemBg, $fg: $colorMobilePaneLeftTreeItemFg);
+      height: $mobileTreeItemH;
+      margin-bottom: $interiorMarginSm;
+
+      [class*='view-control'] {
+        width: ceil($mobileTreeItemH * 0.5);
+      }
     }
+  }
 
-    &.up {
-        animation: animSlideRight 500ms;
+  .c-tree {
+    margin-left: $treeItemIndent;
+  }
+}
+
+.c-list {
+  &__item {
+    border-radius: $smallCr;
+
+    &__name {
+      $p: $interiorMarginSm;
+      @include ellipsize();
+      padding-bottom: $p;
+      padding-top: $p;
     }
+  }
 }
 
-@keyframes animSlideLeft {
-    0% {opactiy: 0; transform: translateX(100%);}
-    10% {opacity: 1;}
-    100% {transform: translateX(0);}
+.c-nav {
+  $dimension: $treeNavArrowD;
+
+  &__up,
+  &__down {
+    flex: 0 0 auto;
+    height: $dimension;
+    width: $dimension;
+    visibility: hidden;
+    position: relative;
+    text-align: center;
+
+    &.is-enabled {
+      visibility: visible;
+    }
+
+    &:before {
+      // Nav arrow
+      $dimension: 9px;
+      $width: 3px;
+      border: solid $colorItemTreeVC;
+      border-width: 0 $width $width 0;
+      content: '';
+      display: block;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      height: $dimension;
+      width: $dimension;
+    }
+
+    @include desktop {
+      &:hover:before {
+        border-color: $colorItemTreeHoverFg;
+      }
+    }
+  }
+
+  &__up:before {
+    transform: translate(-30%, -50%) rotate(135deg);
+  }
+
+  &__down:before {
+    transform: translate(-70%, -50%) rotate(-45deg);
+  }
 }
 
-@keyframes animSlideRight {
-    0% {opactiy: 0; transform: translateX(-100%);}
-    10% {opacity: 1;}
-    100% {transform: translateX(0);}
+.c-selector {
+  &.c-tree-and-search {
+    background: rgba($colorFormLines, 0.1);
+    border-radius: $basicCr;
+    padding: 2px;
+    height: 100%;
+    min-height: 150px;
+  }
 }
diff --git a/src/ui/layout/mct-tree.vue b/src/ui/layout/mct-tree.vue
deleted file mode 100644
index 8bedf28bd90..00000000000
--- a/src/ui/layout/mct-tree.vue
+++ /dev/null
@@ -1,718 +0,0 @@
-<template>
-<div class="c-tree-and-search">
-
-    <div
-        ref="search"
-        class="c-tree-and-search__search"
-    >
-        <search
-            ref="shell-search"
-            class="c-search"
-            :value="searchValue"
-            @input="searchTree"
-            @clear="searchTree"
-        />
-    </div>
-
-    <!-- search loading -->
-    <div
-        v-if="searchLoading && activeSearch"
-        class="c-tree__item c-tree-and-search__loading loading"
-    >
-        <span class="c-tree__item__label">Searching...</span>
-    </div>
-
-    <!-- no results -->
-    <div
-        v-if="showNoSearchResults"
-        class="c-tree-and-search__no-results"
-    >
-        No results found
-    </div>
-
-    <!-- main tree -->
-    <div
-        ref="mainTree"
-        class="c-tree-and-search__tree c-tree"
-    >
-        <div>
-
-            <div
-                ref="dummyItem"
-                class="c-tree__item-h"
-                style="left: -1000px; position: absolute; visibility: hidden"
-            >
-                <div class="c-tree__item">
-                    <span class="c-tree__item__view-control c-nav__up is-enabled"></span>
-                    <a
-                        class="c-tree__item__label c-object-label"
-                        draggable="true"
-                        href="#"
-                    >
-                        <div class="c-tree__item__type-icon c-object-label__type-icon icon-folder">
-                            <span title="Open MCT"></span>
-                        </div>
-                        <div class="c-tree__item__name c-object-label__name">
-                            Open MCT
-                        </div>
-                    </a>
-                    <span class="c-tree__item__view-control c-nav__down"></span>
-                </div>
-            </div>
-        </div>
-
-        <div
-            ref="scrollable"
-            class="c-tree__scrollable"
-            :style="scrollableStyles"
-            @scroll="updateVisibleItems()"
-        >
-            <div :style="childrenHeightStyles">
-                <tree-item
-                    v-for="(treeItem, index) in visibleItems"
-                    :key="treeItem.navigationPath"
-                    :node="treeItem"
-                    :active-search="activeSearch"
-                    :left-offset="!activeSearch ? treeItem.leftOffset : '0px'"
-                    :item-offset="itemOffset"
-                    :item-index="index"
-                    :item-height="itemHeight"
-                    :open-items="openTreeItems"
-                    :loading-items="treeItemLoading"
-                    @tree-item-mounted="scrollToCheck($event)"
-                    @tree-item-destroyed="removeCompositionListenerFor($event)"
-                    @navigation-click="treeItemAction(treeItem, $event)"
-                />
-                <!-- main loading -->
-                <div
-                    v-if="isLoading"
-                    class="c-tree__item c-tree-and-search__loading loading"
-                >
-                    <span class="c-tree__item__label">Loading...</span>
-                </div>
-                <!-- end loading -->
-                <div
-                    v-if="showNoItems"
-                    class="c-tree__item c-tree__item--empty"
-                >
-                    No items
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- end main tree -->
-
-</div>
-</template>
-
-<script>
-import _ from 'lodash';
-import treeItem from './tree-item.vue';
-import search from '../components/search.vue';
-
-const ITEM_BUFFER = 25;
-const LOCAL_STORAGE_KEY__TREE_EXPANDED = 'mct-tree-expanded';
-const RETURN_ALL_DESCDNDANTS = true;
-const TREE_ITEM_INDENT_PX = 18;
-
-export default {
-    name: 'MctTree',
-    components: {
-        search,
-        treeItem
-    },
-    inject: ['openmct'],
-    props: {
-        syncTreeNavigation: {
-            type: Boolean,
-            required: true
-        },
-        resetTreeNavigation: {
-            type: Boolean,
-            required: true
-        }
-    },
-    data() {
-        return {
-            isLoading: false,
-            treeItemLoading: {},
-            mainTreeHeight: undefined,
-            searchLoading: false,
-            searchValue: '',
-            treeItems: [],
-            openTreeItems: [],
-            compositionCollections: {},
-            searchResultItems: [],
-            visibleItems: [],
-            updatingView: false,
-            itemHeight: 27,
-            itemOffset: 0,
-            activeSearch: false,
-            mainTreeTopMargin: undefined
-        };
-    },
-    computed: {
-        childrenHeight() {
-            let childrenCount = this.focusedItems.length || 1;
-
-            return (this.itemHeight * childrenCount) - this.mainTreeTopMargin; // 5px margin
-        },
-        childrenHeightStyles() {
-            let height = this.childrenHeight + 'px';
-
-            return { height };
-        },
-        focusedItems() {
-            return this.activeSearch ? this.searchResultItems : this.treeItems;
-        },
-        pageThreshold() {
-            return Math.ceil(this.mainTreeHeight / this.itemHeight) + ITEM_BUFFER;
-        },
-        scrollableStyles() {
-            let height = this.mainTreeHeight + 'px';
-
-            return { height };
-        },
-        showNoItems() {
-            return this.visibleItems.length === 0 && !this.activeSearch && this.searchValue === '' && !this.isLoading;
-        },
-        showNoSearchResults() {
-            return this.searchValue && this.searchResultItems.length === 0 && !this.searchLoading;
-        }
-    },
-    watch: {
-        syncTreeNavigation() {
-            this.searchValue = '';
-
-            // if there is an abort controller, then a search is in progress and will need to be canceled
-            if (this.abortSearchController) {
-                this.abortSearchController.abort();
-                delete this.abortSearchController;
-            }
-
-            if (!this.openmct.router.path) {
-                return;
-            }
-
-            this.$nextTick(this.showCurrentPathInTree);
-        },
-        resetTreeNavigation() {
-            [...this.openTreeItems].reverse().map(this.closeTreeItemByPath);
-        },
-        searchValue() {
-            if (this.searchValue !== '' && !this.activeSearch) {
-                this.activeSearch = true;
-                this.$refs.scrollable.scrollTop = 0;
-            } else if (this.searchValue === '') {
-                this.activeSearch = false;
-            }
-        },
-        mainTreeHeight() {
-            this.updateVisibleItems();
-        },
-        focusedItems() {
-            this.updateVisibleItems();
-        },
-        openTreeItems() {
-            this.setSavedOpenItems();
-        }
-    },
-    async mounted() {
-        await this.initialize();
-        await this.loadRoot();
-        this.isLoading = false;
-
-        await this.syncTreeOpenItems();
-    },
-    created() {
-        this.getSearchResults = _.debounce(this.getSearchResults, 400);
-        this.handleWindowResize = _.debounce(this.handleWindowResize, 500);
-        this.scrollEndEvent = _.debounce(this.scrollEndEvent, 100);
-    },
-    destroyed() {
-        window.removeEventListener('resize', this.handleWindowResize);
-    },
-    methods: {
-        async initialize() {
-            this.isLoading = true;
-            this.openmct.$injector.get('searchService');
-            this.getSavedOpenItems();
-            window.addEventListener('resize', this.handleWindowResize);
-
-            await this.calculateHeights();
-
-            return;
-        },
-        async loadRoot() {
-            this.treeItems = [];
-            const root = await this.openmct.objects.get('ROOT');
-
-            if (!root.identifier) {
-                return false;
-            }
-
-            // will need to listen for root composition changes as well
-
-            this.treeItems = await this.loadAndBuildTreeItemsFor(root, []);
-        },
-        treeItemAction(parentItem, type) {
-            if (type === 'close') {
-                this.closeTreeItem(parentItem);
-            } else {
-                this.openTreeItem(parentItem);
-            }
-        },
-        async openTreeItem(parentItem) {
-            let parentPath = parentItem.navigationPath;
-
-            this.startItemLoad(parentPath);
-            // pass in abort signal when functional
-            let childrenItems = await this.loadAndBuildTreeItemsFor(parentItem.object, parentItem.objectPath);
-            let parentIndex = this.treeItems.indexOf(parentItem);
-
-            // if it's not loading, it was aborted
-            if (!this.isItemLoading(parentPath) || parentIndex === -1) {
-                return;
-            }
-
-            this.endItemLoad(parentPath);
-
-            this.treeItems.splice(parentIndex + 1, 0, ...childrenItems);
-
-            if (!this.isTreeItemOpen(parentItem)) {
-                this.openTreeItems.push(parentPath);
-            }
-
-            for (let item of childrenItems) {
-                if (this.isTreeItemOpen(item)) {
-                    this.openTreeItem(item);
-                }
-            }
-
-            return;
-        },
-        closeTreeItemByPath(path) {
-            // if actively loading, abort
-            if (this.isItemLoading(path)) {
-                this.abortItemLoad(path);
-            }
-
-            let pathIndex = this.openTreeItems.indexOf(path);
-
-            if (pathIndex === -1) {
-                return;
-            }
-
-            this.treeItems = this.treeItems.filter((checkItem) => {
-                return checkItem.navigationPath === path
-                    || !checkItem.navigationPath.includes(path);
-            });
-            this.openTreeItems.splice(pathIndex, 1);
-            this.removeCompositionListenerFor(path);
-        },
-        closeTreeItem(item) {
-            this.closeTreeItemByPath(item.navigationPath);
-        },
-        // returns an AbortController signal to be passed on to requests
-        startItemLoad(path) {
-            if (this.isItemLoading(path)) {
-                this.abortItemLoad(path);
-            }
-
-            this.$set(this.treeItemLoading, path, new AbortController());
-
-            return this.treeItemLoading[path].signal;
-        },
-        endItemLoad(path) {
-            this.$set(this.treeItemLoading, path, undefined);
-            delete this.treeItemLoading[path];
-        },
-        abortItemLoad(path) {
-            if (this.treeItemLoading[path]) {
-                this.treeItemLoading[path].abort();
-                this.endItemLoad(path);
-            }
-        },
-        isItemLoading(path) {
-            return this.treeItemLoading[path] instanceof AbortController;
-        },
-        showCurrentPathInTree() {
-            const currentPath = this.buildNavigationPath(this.openmct.router.path);
-
-            if (this.getTreeItemByPath(currentPath)) {
-                this.scrollTo(currentPath);
-            } else {
-                this.openAndScrollTo(currentPath);
-            }
-        },
-        async syncTreeOpenItems() {
-            const items = [...this.treeItems];
-
-            for (let item of items) {
-                if (this.isTreeItemOpen(item)) {
-                    await this.openTreeItem(item);
-                }
-            }
-        },
-        openAndScrollTo(navigationPath) {
-            let idArray = navigationPath.split('/');
-            let fullPathArray = [];
-            let pathsToOpen;
-
-            this.scrollToPath = navigationPath;
-
-            // skip root
-            idArray.splice(0, 2);
-            idArray[0] = 'browse/' + idArray[0];
-
-            idArray.reduce((parentPath, childPath) => {
-                let fullPath = [parentPath, childPath].join('/');
-
-                fullPathArray.push(fullPath);
-
-                return fullPath;
-            }, '');
-
-            pathsToOpen = fullPathArray.filter(fullPath => !this.isTreeItemPathOpen(fullPath) && fullPath !== navigationPath);
-
-            pathsToOpen.reduce(async (parentLoaded, childPath) => {
-                await parentLoaded;
-
-                return this.openTreeItem(this.getTreeItemByPath(childPath));
-
-            }, Promise.resolve());
-        },
-        scrollToCheck(navigationPath) {
-            if (this.scrollToPath && this.scrollToPath === navigationPath) {
-                this.scrollTo(navigationPath);
-            }
-        },
-        scrollTo(navigationPath) {
-
-            if (this.isItemInView(navigationPath)) {
-                return;
-            }
-
-            const indexOfScroll = this.treeItems.findIndex(item => item.navigationPath === navigationPath);
-
-            if (indexOfScroll !== -1) {
-                const scrollTopAmount = indexOfScroll * this.itemHeight;
-
-                this.$refs.scrollable.scrollTo({
-                    top: scrollTopAmount,
-                    behavior: 'smooth'
-                });
-            } else if (this.scrollToPath) {
-                this.scrollToPath = undefined;
-                delete this.scrollToPath;
-            }
-        },
-        scrollEndEvent() {
-            this.$nextTick(() => {
-                if (this.scrollToPath) {
-                    if (!this.isItemInView(this.scrollToPath)) {
-                        this.scrollTo(this.scrollToPath);
-                    } else {
-                        this.scrollToPath = undefined;
-                        delete this.scrollToPath;
-                    }
-                }
-            });
-        },
-        isItemInView(navigationPath) {
-            const indexOfScroll = this.treeItems.findIndex(item => item.navigationPath === navigationPath);
-            const scrollTopAmount = indexOfScroll * this.itemHeight;
-            const treeStart = this.$refs.scrollable.scrollTop;
-            const treeEnd = treeStart + this.mainTreeHeight;
-
-            return scrollTopAmount >= treeStart && scrollTopAmount < treeEnd;
-        },
-        async loadAndBuildTreeItemsFor(domainObject, parentObjectPath, abortSignal) {
-            let collection = this.openmct.composition.get(domainObject);
-            let composition = await collection.load(abortSignal);
-
-            if (parentObjectPath.length) {
-                let navigationPath = this.buildNavigationPath(parentObjectPath);
-
-                if (this.compositionCollections[navigationPath]) {
-                    this.removeCompositionListenerFor(navigationPath);
-                }
-
-                this.compositionCollections[navigationPath] = {};
-                this.compositionCollections[navigationPath].collection = collection;
-                this.compositionCollections[navigationPath].addHandler = this.compositionAddHandler(navigationPath);
-                this.compositionCollections[navigationPath].removeHandler = this.compositionRemoveHandler(navigationPath);
-
-                this.compositionCollections[navigationPath].collection.on('add',
-                    this.compositionCollections[navigationPath].addHandler);
-                this.compositionCollections[navigationPath].collection.on('remove',
-                    this.compositionCollections[navigationPath].removeHandler);
-            }
-
-            return composition.map((object) => {
-                return this.buildTreeItem(object, parentObjectPath);
-            });
-        },
-        buildTreeItem(domainObject, parentObjectPath) {
-            let objectPath = [domainObject].concat(parentObjectPath);
-            let navigationPath = this.buildNavigationPath(objectPath);
-
-            return {
-                id: this.openmct.objects.makeKeyString(domainObject.identifier),
-                object: domainObject,
-                leftOffset: ((objectPath.length - 1) * TREE_ITEM_INDENT_PX) + 'px',
-                objectPath,
-                navigationPath
-            };
-        },
-        buildNavigationPath(objectPath) {
-            return '/browse/' + [...objectPath].reverse()
-                .map((object) => this.openmct.objects.makeKeyString(object.identifier))
-                .join('/');
-        },
-        compositionAddHandler(navigationPath) {
-            return (domainObject) => {
-                let parentItem = this.getTreeItemByPath(navigationPath);
-                let newItem = this.buildTreeItem(domainObject, parentItem.objectPath);
-                let allDescendants = this.getChildrenInTreeFor(parentItem, RETURN_ALL_DESCDNDANTS);
-                let afterItem = allDescendants.length ? allDescendants.pop() : parentItem;
-
-                this.addItemToTreeAfter(newItem, afterItem);
-            };
-        },
-        compositionRemoveHandler(navigationPath) {
-            return (identifier) => {
-                let removeKeyString = this.openmct.objects.makeKeyString(identifier);
-                let parentItem = this.getTreeItemByPath(navigationPath);
-                let directDescendants = this.getChildrenInTreeFor(parentItem);
-                let removeItem = directDescendants.find(item => item.id === removeKeyString);
-
-                this.removeItemFromTree(removeItem);
-            };
-        },
-        removeCompositionListenerFor(navigationPath) {
-            if (this.compositionCollections[navigationPath]) {
-                this.compositionCollections[navigationPath].collection.off('add',
-                    this.compositionCollections[navigationPath].addHandler);
-                this.compositionCollections[navigationPath].collection.off('remove',
-                    this.compositionCollections[navigationPath].removeHandler);
-
-                this.compositionCollections[navigationPath] = undefined;
-                delete this.compositionCollections[navigationPath];
-            }
-        },
-        removeItemFromTree(item) {
-            if (this.isTreeItemOpen(item)) {
-                this.closeTreeItem(item);
-            }
-
-            const removeIndex = this.getTreeItemIndex(item.navigationPath);
-            this.treeItems.splice(removeIndex, 1);
-        },
-        addItemToTreeAfter(addItem, afterItem) {
-            const addIndex = this.getTreeItemIndex(afterItem.navigationPath);
-            this.treeItems.splice(addIndex + 1, 0, addItem);
-
-            if (this.isTreeItemOpen(addItem)) {
-                this.openTreeItem(addItem);
-            }
-        },
-        searchTree(value) {
-            // if an abort controller exists, regardless of the value passed in,
-            // there is an active search that should be cancled
-            if (this.abortSearchController) {
-                this.abortSearchController.abort();
-                delete this.abortSearchController;
-            }
-
-            this.searchValue = value;
-            this.searchLoading = true;
-
-            if (this.searchValue !== '') {
-                // clear any previous search results
-                this.searchResultItems = [];
-
-                this.getSearchResults();
-            } else {
-                this.searchLoading = false;
-            }
-        },
-        getSearchResults() {
-            // an abort controller will be passed in that will be used
-            // to cancel an active searches if necessary
-            this.abortSearchController = new AbortController();
-            const abortSignal = this.abortSearchController.signal;
-
-            const promises = this.openmct.objects.search(this.searchValue, abortSignal)
-                .map(promise => promise
-                    .then(results => this.aggregateSearchResults(results, abortSignal)));
-
-            Promise.all(promises).catch(reason => {
-                // search aborted
-            }).finally(() => {
-                this.searchLoading = false;
-
-                if (this.abortSearchController) {
-                    delete this.abortSearchController;
-                }
-            });
-        },
-        aggregateSearchResults(results, abortSignal) {
-            let resultPromises = [];
-
-            for (const result of results) {
-                if (!abortSignal.aborted) {
-                    resultPromises.push(this.openmct.objects.getOriginalPath(result.identifier).then((objectPath) => {
-                        // removing the item itself, as the path we pass to buildTreeItem is a parent path
-                        objectPath.shift();
-
-                        // if root, remove, we're not using in object path for tree
-                        let lastObject = objectPath.length ? objectPath[objectPath.length - 1] : false;
-                        if (lastObject && lastObject.type === 'root') {
-                            objectPath.pop();
-                        }
-
-                        this.searchResultItems.push(this.buildTreeItem(result, objectPath));
-                    }));
-                }
-            }
-
-            return resultPromises;
-        },
-        updateVisibleItems() {
-            this.scrollEndEvent();
-
-            if (this.updatingView) {
-                return;
-            }
-
-            this.updatingView = true;
-            requestAnimationFrame(() => {
-                let start = 0;
-                let end = this.pageThreshold;
-                let allItemsCount = this.focusedItems.length;
-
-                if (allItemsCount < this.pageThreshold) {
-                    end = allItemsCount;
-                } else {
-                    let firstVisible = this.calculateFirstVisibleItem();
-                    let lastVisible = this.calculateLastVisibleItem();
-                    let totalVisible = lastVisible - firstVisible;
-                    let numberOffscreen = this.pageThreshold - totalVisible;
-
-                    start = firstVisible - Math.floor(numberOffscreen / 2);
-                    end = lastVisible + Math.ceil(numberOffscreen / 2);
-
-                    if (start < 0) {
-                        start = 0;
-                        end = Math.min(this.pageThreshold, allItemsCount);
-                    } else if (end >= allItemsCount) {
-                        end = allItemsCount;
-                        start = end - this.pageThreshold + 1;
-                    }
-                }
-
-                this.itemOffset = start;
-                this.visibleItems = this.focusedItems.slice(start, end);
-                this.updatingView = false;
-            });
-        },
-        calculateFirstVisibleItem() {
-            if (!this.$refs.scrollable) {
-                return;
-            }
-
-            let scrollTop = this.$refs.scrollable.scrollTop;
-
-            return Math.floor(scrollTop / this.itemHeight);
-        },
-        calculateLastVisibleItem() {
-            if (!this.$refs.scrollable) {
-                return;
-            }
-
-            let scrollBottom = this.$refs.scrollable.scrollTop + this.$refs.scrollable.offsetHeight;
-
-            return Math.ceil(scrollBottom / this.itemHeight);
-        },
-        calculateHeights() {
-            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();
-            });
-        },
-        getTreeItemByPath(path) {
-            return this.treeItems.find(item => item.navigationPath === path);
-        },
-        getTreeItemIndex(indexItem) {
-            let path = typeof indexItem === 'string' ? indexItem : indexItem.navigationPath;
-
-            return this.treeItems.findIndex(item => item.navigationPath === path);
-        },
-        getChildrenInTreeFor(parent, allDescendants = false) {
-            const parentPath = typeof parent === 'string' ? parent : parent.navigationPath;
-            const parentDepth = parentPath.split('/').length;
-
-            return this.treeItems.filter((childItem) => {
-                const childDepth = childItem.navigationPath.split('/').length;
-                if (!allDescendants && childDepth > parentDepth + 1) {
-                    return false;
-                }
-
-                return childItem.navigationPath !== parentPath
-                && childItem.navigationPath.includes(parentPath);
-            });
-        },
-        isTreeItemOpen(item) {
-            return this.isTreeItemPathOpen(item.navigationPath);
-        },
-        isTreeItemPathOpen(path) {
-            return this.openTreeItems.includes(path);
-        },
-        getElementStyleValue(el, style) {
-            if (!el) {
-                return;
-            }
-
-            let styleString = window.getComputedStyle(el)[style];
-            let index = styleString.indexOf('px');
-
-            return Number(styleString.slice(0, index));
-        },
-        getSavedOpenItems() {
-            let openItems = localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED);
-            this.openTreeItems = openItems ? JSON.parse(openItems) : [];
-        },
-        setSavedOpenItems() {
-            localStorage.setItem(LOCAL_STORAGE_KEY__TREE_EXPANDED, JSON.stringify(this.openTreeItems));
-        },
-        handleWindowResize() {
-            this.calculateHeights();
-        }
-    }
-};
-</script>
diff --git a/src/ui/layout/multipane.vue b/src/ui/layout/multipane.vue
deleted file mode 100644
index 06a0f74ebc0..00000000000
--- a/src/ui/layout/multipane.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-<div
-    class="l-multipane"
-    :class="{
-        'l-multipane--vertical': type === 'vertical',
-        'l-multipane--horizontal': type === 'horizontal'
-    }"
->
-    <slot></slot>
-</div>
-</template>
-
-<script>
-export default {
-    props: {
-        type: {
-            type: String,
-            required: true,
-            validator: function (value) {
-                return ['vertical', 'horizontal'].indexOf(value) !== -1;
-            }
-        }
-    }
-};
-</script>
diff --git a/src/ui/layout/pane.scss b/src/ui/layout/pane.scss
index fdcb0913e36..598689d11f4 100644
--- a/src/ui/layout/pane.scss
+++ b/src/ui/layout/pane.scss
@@ -1,320 +1,365 @@
+@use 'sass:math';
+
 /**************************** BASE - MOBILE AND DESKTOP */
 .l-multipane {
-    display: flex;
-    flex: 1 1 auto;
-    overflow: hidden;
-
-    &--horizontal,
-    > .l-pane {
-        flex-flow: row nowrap;
+  display: flex;
+  flex: 1 1 auto;
+  overflow: hidden;
+
+  &--horizontal,
+  > .l-pane {
+    flex-flow: row nowrap;
+  }
+
+  &--vertical,
+  > .l-pane {
+    flex-flow: column nowrap;
+  }
+
+  &--vertical {
+    height: 100%;
+    > .l-pane .l-pane__contents {
+      padding-right: $interiorMarginSm; // Fend off scrollbar
     }
+  }
+}
 
-    &--vertical,
-    > .l-pane  {
-        flex-flow: column nowrap;
+.l-pane {
+  backface-visibility: hidden;
+  display: flex;
+  min-width: 0px;
+  min-height: 0px;
+  opacity: 1;
+  pointer-events: inherit;
+
+  &__handle,
+  &__label {
+    // __handle and __label don't appear in mobile
+    display: none;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    @include desktop() {
+      margin-bottom: $interiorMargin;
+    }
+  }
+
+  &--reacts {
+    // This is the pane that doesn't hold the handle
+    // It reacts to other panes that are able to resize
+    flex: 1 1 0;
+  }
+
+  &--collapsed {
+    flex-basis: 0px !important;
+    transition: all 350ms ease;
+
+    .l-pane__contents {
+      transition: opacity 150ms ease;
+      opacity: 0;
+      pointer-events: none;
+      overflow: hidden; // Prevents toolbar from extending into Inspector
+
+      > * {
+        min-width: 0 !important;
+        min-height: 0 !important;
+      }
+    }
+  }
+
+  &[class*='--horizontal'] {
+    padding-left: $interiorMargin;
+    padding-right: $interiorMargin;
+    &.l-pane--collapsed {
+      padding-left: 0 !important;
+      padding-right: 0 !important;
     }
+  }
 
-    &--vertical {
-        height: 100%;
-        > .l-pane .l-pane__contents {
-            padding-right: $interiorMarginSm; // Fend off scrollbar
-        }
+  &[class*='--vertical'] {
+    padding-top: $interiorMargin;
+    padding-bottom: $interiorMargin;
+    min-height: 30px; // For Recents holder
+
+    &.l-pane--collapsed {
+      padding-top: 0 !important;
+      padding-bottom: 0 !important;
     }
-}
+  }
 
-.l-pane {
-    backface-visibility: hidden;
-    display: flex;
-    min-width: 0px;
-    min-height: 0px;
+  /************************ CONTENTS */
+  &__contents {
+    flex: 1 1 100%;
     opacity: 1;
+    overflow: hidden;
     pointer-events: inherit;
+    transition: opacity 250ms ease 250ms;
 
-    &__handle,
-    &__label {
-        // __handle and __label don't appear in mobile
-        display: none;
+    .l-pane__contents {
+      // Don't pad all nested __contents
+      padding: 0;
+    }
+  }
+
+  /************************************************ DESKTOP STYLES */
+  body.desktop & {
+    &__handle {
+      background-color: $colorSplitterBg;
+      display: block;
+      position: absolute;
+      @include transition(background-color, $transOutTime);
+
+      &:before {
+        // Extended hit area
+        content: '';
+        display: block;
+        position: absolute;
+        z-index: -1;
+      }
+
+      &:hover {
+        background-color: $colorSplitterHover;
+        @include transition(background-color);
+      }
     }
 
     &__header {
-        display: flex;
-        align-items: center;
-        @include desktop() { margin-bottom: $interiorMargin; }
+      font-size: 11px;
+    }
 
-        [class*="button"] {
-            color: $colorBtnMajorBg;
-        }
+    &__label {
+      // Name of the pane
+      @include ellipsize();
+      @include userSelectNone();
+      color: $splitterBtnLabelColorFg;
+      display: block;
+      text-transform: uppercase;
+      flex: 1 1 auto;
     }
 
-    &--reacts {
-        // This is the pane that doesn't hold the handle
-        // It reacts to other panes that are able to resize
-        flex: 1 1 0;
+    [class*='expand-button'] {
+      display: none; // Hidden by default
+      background-color: $splitterCollapsedBtnColorBg;
+      color: $splitterCollapsedBtnColorFg;
+
+      &:before {
+        // '+' icon
+        font-size: 0.8em;
+        margin-bottom: $interiorMarginSm; // margin-bottom is needed for Tree and Inspector
+        margin-right: $interiorMarginSm; // margin-right and margin-left are needed for Recent Objects
+        margin-left: $interiorMarginSm;
+      }
+
+      &:hover {
+        background-color: $splitterCollapsedBtnColorBgHov;
+        color: $splitterCollapsedBtnColorFgHov;
+        @include transition(background-color);
+      }
     }
 
-    &--collapsed {
-        flex-basis: 0px !important;
-        transition: all 350ms ease;
+    &--resizing {
+      // User is dragging the handle and resizing a pane
+      @include userSelectNone();
 
-        .l-pane__contents {
-            transition: opacity 150ms ease;
-            opacity: 0;
-            pointer-events: none;
-            overflow: hidden;
+      + .l-pane {
+        @include userSelectNone();
+      }
 
-            > * {
-                min-width: 0 !important;
-                min-height: 0 !important;
-            }
+      .l-pane {
+        &__handle {
+          background-color: $colorSplitterHover;
         }
+      }
     }
 
-    &[class*="--horizontal"] {
-        padding-left: $interiorMargin;
-        padding-right: $interiorMargin;
-        &.l-pane--collapsed {
-            padding-left: 0 !important;
-            padding-right: 0 !important;
-        }
+    &[class*='--collapsed'] {
+      /********************************* STYLES FOR DESKTOP COLLAPSED PANES, ALL ORIENTATIONS */
+      $d: nth($splitterBtnD, 1);
+      flex-basis: $d;
+      min-width: $d;
+      min-height: $d;
+
+      > .l-pane__handle {
+        display: none;
+      }
+
+      [class*='collapse-button'] {
+        display: none;
+      }
+
+      [class*='expand-button'] {
+        display: block;
+      }
     }
 
-    &[class*="--vertical"] {
-        padding-top: $interiorMargin;
-        padding-bottom: $interiorMargin;
-        &.l-pane--collapsed {
-            padding-top: 0 !important;
-            padding-bottom: 0 !important;
+    &[class*='--collapsed'] { // For Recent Objects Button  
+      &.collapse-horizontal {
+        [class*='expand-button'] {
+          display: block;
+          position: absolute;
+          top: 0;
+          width: 100%;
+          border-top-right-radius: $controlCr;
+          border-top-left-radius: $controlCr;
+        }
+      }
+      [class*='expand-button'] {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        height: auto;
+        width: 100%;
+        padding: $interiorMarginSm 1px;
+        font-size: 11px;
+
+        [class*='label'] {
+          text-orientation: mixed;
+          text-transform: uppercase;
+          writing-mode: horizontal-tb;
         }
+      }
     }
 
-    /************************ CONTENTS */
-    &__contents {
-        flex: 1 1 100%;
-        opacity: 1;
-        pointer-events: inherit;
-        transition: opacity 250ms ease 250ms;
-
-        .l-pane__contents {
-            // Don't pad all nested __contents
-            padding: 0;
+    &[class*='--horizontal'] {
+      > .l-pane__handle {
+        cursor: col-resize;
+        top: 0;
+        bottom: 0;
+        width: $splitterHandleD;
+
+        &:before {
+          // Extended hit area
+          top: 0;
+          right: $splitterHandleHitMargin * -1;
+          bottom: 0;
+          left: $splitterHandleHitMargin * -1;
         }
-    }
+      }
 
-    /************************************************ DESKTOP STYLES */
-    body.desktop & {
-        &__handle {
-            background: $colorSplitterBg;
-            display: block;
-            position: absolute;
-            transition: $transOut;
-
-            &:before {
-                // Extended hit area
-                content: '';
-                display: block;
-                position: absolute;
-                z-index: -1;
-            }
-
-            &:hover {
-                background: $colorSplitterHover;
-                transition: $transIn;
-            }
+      .l-pane__collapse-button {
+        &:before {
+          content: $glyph-icon-line-horz;
         }
+      }
 
-        &__header {
-            font-size: floor(12px * .9);
+      &[class*='--collapsed'] {
+        /************************ COLLAPSED HORIZONTAL SPLITTER, EITHER DIRECTION */
+        [class*='__header'] {
+          display: none;
         }
 
-        &__label {
-            // Name of the pane
-            @include ellipsize();
-            @include userSelectNone();
-            color: $splitterBtnLabelColorFg;
-            display: block;
+        [class*='expand-button'] {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          height: auto;
+          width: 100%;
+          padding: $interiorMargin 1px;
+          font-size: 11px;
+
+          [class*='label'] {
+            text-orientation: mixed;
             text-transform: uppercase;
-            flex: 1 1 auto;
+            writing-mode: vertical-lr;
+          }
         }
+      }
+
+      /************************** Horizontal Splitter Before */
+      // Example: Inspector pane
+      &[class*='-before'] {
+        margin-left: nth($shellPanePad, 2);
+        padding-left: nth($shellPanePad, 2);
 
-        [class*="expand-button"] {
-            display: none; // Hidden by default
-            background: $splitterCollapsedBtnColorBg;
-            color: $splitterCollapsedBtnColorFg;
-            font-size: 0.9em;
-
-            &:hover {
-                background: $splitterCollapsedBtnColorBgHov;
-                color: inherit;
-                transition: $transIn;
-            }
+        > .l-pane__handle {
+          left: 0;
+          transform: translateX(floor(math.div($splitterHandleD, -2))); // Center over the pane edge
         }
 
-        &--resizing {
-            // User is dragging the handle and resizing a pane
-            @include userSelectNone();
+        [class*='expand-button'] {
+          border-top-left-radius: $controlCr;
+          border-bottom-left-radius: $controlCr;
+        }
+      }
 
-            + .l-pane {
-                @include userSelectNone();
-            }
+      /************************** Horizontal Splitter After */
+      // Example: Tree pane and Recent Objects
+      &[class*='-after'] {
+        margin-right: nth($shellPanePad, 2);
+        padding-right: nth($shellPanePad, 2);
 
-            .l-pane {
-                &__handle {
-                    background: $colorSplitterHover;
-                }
-            }
+        > .l-pane__handle {
+          right: 0;
+          transform: translateX(floor(math.div($splitterHandleD, 2)));
         }
 
-        &[class*="--collapsed"] {
-            /********************************* STYLES FOR DESKTOP COLLAPSED PANES, ALL ORIENTATIONS */
-            $d: nth($splitterBtnD, 1);
-            flex-basis: $d;
-            min-width: $d;
-            min-height: $d;
-
-            > .l-pane__handle {
-                display: none;
-            }
+        [class*='expand-button'] {
+          border-top-right-radius: $controlCr;
+          border-bottom-right-radius: $controlCr;
+        }
+      }
+    }
 
-            [class*="collapse-button"] {
-                display: none;
-            }
+    &[class*='--vertical'] {
+      // l-pane--vertical
+
+      > .l-pane__handle {
+        cursor: row-resize;
+        left: 0;
+        right: 0;
+        height: $splitterHandleD;
+
+        &:before {
+          // Extended hit area
+          left: 0;
+          top: $splitterHandleHitMargin * -1;
+          right: 0;
+          bottom: $splitterHandleHitMargin * -1;
+        }
+      }
+
+      /************************** Vertical Splitter Before */
+      // Pane collapses downward. Used by Recent Objects in Tree 
+      &[class*='-before'] {
+        $m: $interiorMarginLg;
+        margin-top: $m;
+        padding-top: $m;
+        > .l-pane__handle {
+          top: 0;
+          transform: translateY(floor(math.div($splitterHandleD, -1)));
+        }
 
-            [class*="expand-button"] {
-                display: block;
-            }
+        .l-pane__collapse-button:before {
+          content: $glyph-icon-line-horz;
         }
 
-        &[class*="--horizontal"] {
-            > .l-pane__handle {
-                cursor: col-resize;
-                top: 0;
-                bottom: 0;
-                width: $splitterHandleD;
-
-                &:before {
-                    // Extended hit area
-                    top: 0;
-                    right: $splitterHandleHitMargin * -1;
-                    bottom: 0;
-                    left: $splitterHandleHitMargin * -1;
-                }
-            }
-
-            .l-pane__collapse-button {
-                &:before {
-                    content: $glyph-icon-line-horz;
-                }
-            }
-
-            &[class*="--collapsed"] {
-                /************************ COLLAPSED HORIZONTAL SPLITTER, EITHER DIRECTION */
-                [class*="__header"] {
-                    display: none;
-                }
-
-                [class*="expand-button"] {
-                    position: absolute;
-                    top: 0; right: 0; bottom: 0; left: 0;
-                    height: auto; width: 100%;
-                    padding: $interiorMargin 2px;
-
-                    [class*="label"] {
-                        text-orientation: mixed;
-                        text-transform: uppercase;
-                        writing-mode: vertical-lr;
-                    }
-                }
-            }
-
-            /************************** Horizontal Splitter Before */
-            // Example: Inspector pane
-            &[class*="-before"] {
-                margin-left: nth($shellPanePad, 2);
-                padding-left: nth($shellPanePad, 2);
-
-                > .l-pane__handle {
-                    left: 0;
-                    transform: translateX(floor($splitterHandleD / -2)); // Center over the pane edge
-                }
-
-                [class*="expand-button"] {
-                    border-top-left-radius: $controlCr;
-                    border-bottom-left-radius: $controlCr;
-                }
-            }
-
-            /************************** Horizontal Splitter After */
-            // Example: Tree pane
-            &[class*="-after"] {
-                margin-right: nth($shellPanePad, 2);
-                padding-right: nth($shellPanePad, 2);
-
-                > .l-pane__handle {
-                    right: 0;
-                    transform: translateX(floor($splitterHandleD / 2));
-                }
-
-                [class*="expand-button"] {
-                    border-top-right-radius: $controlCr;
-                    border-bottom-right-radius: $controlCr;
-                }
-            }
+        &.l-pane--collapsed {
+          > .l-pane__collapse-button {
+            transform: scaleY(-1);
+          }
+        }
+      }
+
+      /************************** Vertical Splitter After */
+      // Pane collapses upward. Not sure we'll ever use this...
+      &[class*='-after'] {
+        > .l-pane__handle {
+          bottom: 0;
+          transform: translateY(floor(math.div($splitterHandleD, 1)));
         }
 
-        &[class*="--vertical"] {
-            // l-pane--vertical
-
-            > .l-pane__handle {
-                cursor: row-resize;
-                left: 0;
-                right: 0;
-                height: $splitterHandleD;
-
-                &:before {
-                    // Extended hit area
-                    left: 0;
-                    top: $splitterHandleHitMargin * -1;
-                    right: 0;
-                    bottom: $splitterHandleHitMargin * -1;
-                }
-            }
-
-            /************************** 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));
-                }
-
-                .l-pane__collapse-button:before {
-                    content: $glyph-icon-arrow-down;
-                }
-
-                &.l-pane--collapsed {
-                    > .l-pane__collapse-button {
-                        transform: scaleY(-1);
-                    }
-                }
-            }
-
-            /************************** Vertical Splitter After */
-            // Pane collapses upward. Not sure we'll ever use this...
-            &[class*="-after"] {
-                > .l-pane__handle {
-                    bottom: 0;
-                    transform: translateY(floor($splitterHandleD / 1));
-                }
-
-                &:not(.l-pane--collapsed) > .l-pane__collapse-button {
-                    &:after {
-                        transform: scaleY(-1);
-                    }
-                }
-            }
+        &:not(.l-pane--collapsed) > .l-pane__collapse-button {
+          &:after {
+            transform: scaleY(-1);
+          }
         }
-    } // Ends .body.desktop
+      }
+    }
+  } // Ends .body.desktop
 } // Ends .l-pane
diff --git a/src/ui/layout/pane.vue b/src/ui/layout/pane.vue
deleted file mode 100644
index 3acd391b613..00000000000
--- a/src/ui/layout/pane.vue
+++ /dev/null
@@ -1,185 +0,0 @@
-<template>
-<div
-    class="l-pane"
-    :class="{
-        'l-pane--horizontal-handle-before': type === 'horizontal' && handle === 'before',
-        'l-pane--horizontal-handle-after': type === 'horizontal' && handle === 'after',
-        'l-pane--vertical-handle-before': type === 'vertical' && handle === 'before',
-        'l-pane--vertical-handle-after': type === 'vertical' && handle === 'after',
-        'l-pane--collapsed': collapsed,
-        'l-pane--reacts': !handle,
-        'l-pane--resizing': resizing === true
-    }"
->
-    <div
-        v-if="handle"
-        class="l-pane__handle"
-        @mousedown="start"
-    ></div>
-    <div class="l-pane__header">
-        <span v-if="label"
-              class="l-pane__label"
-        >{{ label }}</span>
-        <slot name="controls"></slot>
-        <button
-            v-if="collapsable"
-            class="l-pane__collapse-button c-icon-button"
-            @click="toggleCollapse"
-        ></button>
-    </div>
-    <button
-        class="l-pane__expand-button"
-        @click="toggleCollapse"
-    >
-        <span class="l-pane__expand-button__label">{{ label }}</span>
-    </button>
-    <div class="l-pane__contents">
-        <slot></slot>
-    </div>
-</div>
-</template>
-
-<script>
-const COLLAPSE_THRESHOLD_PX = 40;
-const HIDE_TREE_PARAM = 'hideTree';
-const HIDE_INSPECTOR_PARAM = 'hideInspector';
-const PANE_INSPECTOR = 'Inspect';
-const PANE_TREE = 'Browse';
-
-export default {
-    inject: ['openmct'],
-    props: {
-        handle: {
-            type: String,
-            default: '',
-            validator: function (value) {
-                return ['', 'before', 'after'].indexOf(value) !== -1;
-            }
-        },
-        collapsable: {
-            type: Boolean,
-            default: false
-        },
-        label: {
-            type: String,
-            default: ''
-        }
-    },
-    data() {
-        return {
-            collapsed: false,
-            resizing: false
-        };
-    },
-    beforeMount() {
-        this.type = this.$parent.type;
-        this.styleProp = (this.type === 'horizontal') ? 'width' : 'height';
-    },
-    async mounted() {
-        await this.$nextTick();
-        // Hide tree and/or inspector pane if specified in URL
-        this.handleHideUrl();
-        this.openmct.router.on('change:params', this.handleHideUrl);
-    },
-    beforeDestroy() {
-        this.openmct.router.off('change:params', this.handleHideUrl);
-    },
-    methods: {
-        toggleCollapse: function (e) {
-            let target = this.label === PANE_TREE ? HIDE_TREE_PARAM : HIDE_INSPECTOR_PARAM;
-            this.collapsed = !this.collapsed;
-            if (this.collapsed) {
-                this.handleCollapse();
-                this.addHideParam(target);
-            } else {
-                this.handleExpand();
-                this.removeHideParam(target);
-            }
-        },
-        handleHideUrl: function () {
-            if (!this.collapsable) {
-                return;
-            }
-
-            let hideTreeParam = this.openmct.router.getSearchParam(HIDE_TREE_PARAM);
-            let hideInspectorParam = this.openmct.router.getSearchParam(HIDE_INSPECTOR_PARAM);
-            let hideTree = hideTreeParam === 'true' && this.label === PANE_TREE;
-            let hideInspector = hideInspectorParam === 'true' && this.label === PANE_INSPECTOR;
-            if (hideTree || hideInspector) {
-                this.collapsed = true;
-                this.handleCollapse();
-            } else {
-                this.collapsed = false;
-                this.handleExpand();
-            }
-        },
-        addHideParam: function (target) {
-            this.openmct.router.setSearchParam(target, 'true');
-        },
-        removeHideParam: function (target) {
-            this.openmct.router.deleteSearchParam(target);
-        },
-        handleCollapse: function () {
-            this.currentSize = (this.dragCollapse === true) ? this.initial : this.$el.style[this.styleProp];
-            this.$el.style[this.styleProp] = '';
-        },
-        handleExpand: function () {
-            this.$el.style[this.styleProp] = this.currentSize;
-            delete this.currentSize;
-            delete this.dragCollapse;
-        },
-        trackSize: function () {
-            if (!this.dragCollapse === true) {
-                if (this.type === 'vertical') {
-                    this.initial = this.$el.offsetHeight;
-                } else if (this.type === 'horizontal') {
-                    this.initial = this.$el.offsetWidth;
-                }
-            }
-        },
-        getPosition: function (event) {
-            return this.type === 'horizontal'
-                ? event.pageX
-                : event.pageY;
-        },
-        getNewSize: function (event) {
-            let delta = this.startPosition - this.getPosition(event);
-            if (this.handle === "before") {
-                return `${this.initial + delta}px`;
-            }
-
-            if (this.handle === "after") {
-                return `${this.initial - delta}px`;
-            }
-        },
-        updatePosition: function (event) {
-            let size = this.getNewSize(event);
-            let intSize = parseInt(size.substr(0, size.length - 2), 10);
-            if (intSize < COLLAPSE_THRESHOLD_PX && this.collapsable === true) {
-                this.dragCollapse = true;
-                this.end();
-                this.toggleCollapse();
-            } else {
-                this.$el.style[this.styleProp] = size;
-            }
-        },
-        start: function (event) {
-            event.preventDefault(); // stop from firing drag event
-
-            this.startPosition = this.getPosition(event);
-            document.body.addEventListener('mousemove', this.updatePosition);
-            document.body.addEventListener('mouseup', this.end);
-            this.resizing = true;
-            this.$emit('start-resizing');
-            this.trackSize();
-        },
-        end: function (event) {
-            document.body.removeEventListener('mousemove', this.updatePosition);
-            document.body.removeEventListener('mouseup', this.end);
-            this.resizing = false;
-            this.$emit('end-resizing');
-            this.trackSize();
-        }
-    }
-};
-</script>
diff --git a/src/ui/layout/paneSpec.js b/src/ui/layout/paneSpec.js
deleted file mode 100644
index 3962e22c4df..00000000000
--- a/src/ui/layout/paneSpec.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-import {
-    createOpenMct,
-    resetApplicationState
-} from 'utils/testing';
-
-describe("the pane", () => {
-    let openmct;
-    let appHolder;
-    let element;
-    let child;
-    let resolveFunction;
-
-    beforeEach((done) => {
-        openmct = createOpenMct();
-
-        appHolder = document.createElement('div');
-        appHolder.style.width = '640px';
-        appHolder.style.height = '480px';
-
-        openmct = createOpenMct();
-        openmct.install(openmct.plugins.MyItems());
-        openmct.install(openmct.plugins.LocalTimeSystem());
-        openmct.install(openmct.plugins.UTCTimeSystem());
-
-        element = document.createElement('div');
-        child = document.createElement('div');
-        element.appendChild(child);
-
-        openmct.on('start', done);
-        openmct.start(appHolder);
-
-        document.body.append(appHolder);
-
-    });
-
-    afterEach(() => {
-        return resetApplicationState(openmct);
-    });
-    it('toggling tree will toggle tree hide params', (done) => {
-        document.querySelector('.l-shell__pane-tree .l-pane__collapse-button').click();
-        expect(openmct.router.getSearchParam('hideTree')).toBe('true');
-        done();
-    });
-
-    it('tree pane collapses when adding hide tree param in URL', () => {
-        openmct.router.setSearchParam('hideTree', 'true');
-        expect(document.querySelector('.l-shell__pane-tree.l-pane--collapsed')).toBeDefined();
-    });
-
-    it('inspector pane collapses when adding hide inspector param in URL', () => {
-        openmct.router.setSearchParam('hideInspector', 'true');
-        expect(document.querySelector('.l-shell__pane-inspector.l-pane--collapsed')).toBeDefined();
-    });
-
-    it('toggle inspector pane will toggle inspector hide param', (done) => {
-        // There's a short delay on addubg the param.
-        resolveFunction = () => {
-            setTimeout(() => {
-                expect(openmct.router.getSearchParam('hideInspector')).toBe('true');
-                done();
-            }, 500);
-        };
-
-        openmct.router.on('change:params', resolveFunction);
-        document.querySelector('.l-shell__pane-inspector .l-pane__collapse-button').click();
-    });
-
-});
diff --git a/src/ui/layout/recent-objects.scss b/src/ui/layout/recent-objects.scss
new file mode 100644
index 00000000000..a5298e4a60a
--- /dev/null
+++ b/src/ui/layout/recent-objects.scss
@@ -0,0 +1,119 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+.c-recentobjects-listitem {
+  display: flex;
+  padding: $interiorMargin $interiorMarginSm;
+  align-items: flex-start;
+
+  > * + * {
+    margin-left: $interiorMarginSm;
+  }
+
+  + .c-recentobjects-listitem {
+    border-top: 1px solid $colorInteriorBorder;
+  }
+
+  &.is-alias {
+    // Object is an alias to an original.
+    [class~='recent-object-icon'] {
+      @include isAlias();
+      &:after {
+        bottom: 20%;
+      }
+    }
+  }
+
+  &__object-path {
+    padding: 0 $interiorMarginSm;
+  }
+
+  &__target-button {
+    opacity: 0;
+  }
+
+  &__type-icon,
+  &__more-options-button {
+    flex: 0 0 auto;
+  }
+
+  &__type-icon {
+    color: $colorItemTreeIcon;
+    font-size: 1.25em;
+
+    // TEMP: uses object-label component, hide label part
+    .c-object-label__name {
+      display: none;
+    }
+  }
+
+  &__more-options-button {
+    display: none; // TEMP until enabled
+  }
+
+  &__body {
+    flex: 1 1 auto;
+    padding-top: 2px; // Align with type icon
+
+    > * + * {
+      margin-top: $interiorMarginSm;
+    }
+
+    .c-location {
+      font-size: 0.9em;
+      opacity: 0.8;
+
+      &__item {
+        > * + * {
+          background: blue !important;
+        }
+      }
+    }
+  }
+
+  &__tags {
+    display: flex;
+
+    > * + * {
+      margin-left: $interiorMargin;
+    }
+  }
+
+  &__title {
+    border-radius: $basicCr;
+    color: $colorItemTreeFg;
+    cursor: pointer;
+    padding: $interiorMarginSm;
+
+    &:hover {
+      background-color: $colorItemTreeHoverBg;
+    }
+  }
+
+  .c-tag {
+    font-size: 0.9em;
+  }
+}
+
+.c-recentobjects-listitem:hover .c-recentobjects-listitem__target-button {
+  opacity: 100;
+}
diff --git a/src/ui/layout/search/AnnotationSearchResult.vue b/src/ui/layout/search/AnnotationSearchResult.vue
new file mode 100644
index 00000000000..e6716c33c57
--- /dev/null
+++ b/src/ui/layout/search/AnnotationSearchResult.vue
@@ -0,0 +1,217 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div
+    class="c-gsearch-result c-gsearch-result--annotation"
+    aria-label="Annotation Search Result"
+    role="listitem"
+  >
+    <div class="c-gsearch-result__type-icon" :class="resultTypeIcon"></div>
+    <div class="c-gsearch-result__body">
+      <div class="c-gsearch-result__title" @click="clickedResult">
+        {{ getResultName }}
+      </div>
+
+      <ObjectPath :domain-object="domainObject" :read-only="false" :show-object-itself="true" />
+
+      <div class="c-gsearch-result__tags">
+        <div
+          v-for="(tag, index) in result.fullTagModels"
+          :key="index"
+          class="c-tag"
+          :class="{ '--is-not-search-match': !isSearchMatched(tag) }"
+          :style="{ backgroundColor: tag.backgroundColor, color: tag.foregroundColor }"
+        >
+          {{ tag.label }}
+        </div>
+      </div>
+    </div>
+    <div class="c-gsearch-result__more-options-button">
+      <button class="c-icon-button icon-3-dots"></button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Marked } from 'marked';
+import sanitizeHtml from 'sanitize-html';
+
+import { identifierToString } from '../../../../src/tools/url.js';
+import ObjectPath from '../../components/ObjectPath.vue';
+import PreviewAction from '../../preview/PreviewAction.js';
+
+export default {
+  name: 'AnnotationSearchResult',
+  components: {
+    ObjectPath
+  },
+  inject: ['openmct'],
+  props: {
+    result: {
+      type: Object,
+      required: true,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    domainObject() {
+      return this.result.targetModels[0];
+    },
+    getResultName() {
+      if (this.result.annotationType === this.openmct.annotation.ANNOTATION_TYPES.NOTEBOOK) {
+        const previewText = this.getNotebookPreviewText(this.result);
+        return previewText;
+      } else if (
+        this.result.annotationType === this.openmct.annotation.ANNOTATION_TYPES.GEOSPATIAL
+      ) {
+        const previewText = this.getGeospatialPreviewText(this.result);
+        return previewText;
+      } else {
+        return this.result.targetModels[0].name;
+      }
+    },
+    resultTypeIcon() {
+      return this.openmct.types.get(this.result.type).definition.cssClass;
+    },
+    tagBackgroundColor() {
+      return this.result.fullTagModels[0].backgroundColor;
+    },
+    tagForegroundColor() {
+      return this.result.fullTagModels[0].foregroundColor;
+    }
+  },
+  beforeMount() {
+    this.marked = new Marked();
+  },
+  mounted() {
+    this.previewAction = new PreviewAction(this.openmct);
+    this.previewAction.on('isVisible', this.togglePreviewState);
+    this.fireAnnotationSelection = this.fireAnnotationSelection.bind(this);
+  },
+  unmounted() {
+    this.previewAction.off('isVisible', this.togglePreviewState);
+    this.openmct.selection.off('change', this.fireAnnotationSelection);
+  },
+  methods: {
+    getNotebookEntryTextById(entryIdToFind, notebookModel) {
+      const sections = Object.values(notebookModel);
+      for (const section of sections) {
+        const pages = Object.values(section);
+        for (const entries of pages) {
+          for (const entry of entries) {
+            if (entry.id === entryIdToFind) {
+              return entry.text;
+            }
+          }
+        }
+      }
+      return null;
+    },
+    getNotebookPreviewText(result) {
+      const targetID = Object.keys(this.result.targets)[0];
+      const entryIdToFind = this.result.targets[targetID].entryId;
+      const notebookModel = this.result.targetModels[0].configuration.entries;
+
+      const entryText = this.getNotebookEntryTextById(entryIdToFind, notebookModel);
+      if (entryText === null) {
+        return 'Could not find any matching Notebook entries';
+      }
+      const markDownHtml = this.marked.parse(entryText, {
+        breaks: true
+      });
+      // strip everything
+      const cleanedHtml = sanitizeHtml(markDownHtml, { allowedAttributes: [], allowedTags: [] });
+      // strip to 64 characters
+      let truncatedText = cleanedHtml.substring(0, 64);
+      // add ellipsis if necessary
+      if (truncatedText.length < entryText.length) {
+        truncatedText = `${truncatedText}...`;
+      }
+      return truncatedText;
+    },
+    getGeospatialPreviewText(result) {
+      const targetID = Object.keys(this.result.targets)[0];
+      const { layerName, name } = this.result.targets[targetID];
+
+      return layerName ? `${layerName} - ${name}` : name;
+    },
+    clickedResult(event) {
+      const objectPath = this.domainObject.originalPath;
+      if (this.openmct.editor.isEditing()) {
+        event.preventDefault();
+        this.preview(objectPath);
+      } else {
+        const resultUrl = identifierToString(this.openmct, objectPath);
+        if (!this.openmct.router.isNavigatedObject(objectPath)) {
+          // if we're not on the correct page, navigate to the object,
+          // then wait for the selection event to fire before issuing a new selection
+          if (this.result.annotationType) {
+            this.openmct.selection.on('change', this.fireAnnotationSelection);
+          }
+
+          this.openmct.router.navigate(resultUrl);
+        } else {
+          // if this is the navigated object, then we are already on the correct page
+          // and just need to issue the selection event
+          this.fireAnnotationSelection();
+        }
+      }
+    },
+    preview(objectPath) {
+      if (this.previewAction.appliesTo(objectPath)) {
+        this.previewAction.invoke(objectPath);
+      }
+    },
+    fireAnnotationSelection() {
+      this.openmct.selection.off('change', this.fireAnnotationSelection);
+      const selection = [
+        {
+          element: this.$el,
+          context: {
+            item: this.result.targetModels[0],
+            type: 'annotation-search-result',
+            targetDetails: this.result.targets,
+            targetDomainObjects: this.result.targetModels,
+            annotations: [this.result],
+            annotationType: this.result.annotationType,
+            onAnnotationChange: () => {}
+          }
+        }
+      ];
+      this.openmct.selection.select(selection, true);
+    },
+    isSearchMatched(tag) {
+      if (this.result.matchingTagKeys) {
+        return this.result.matchingTagKeys.includes(tag.tagID);
+      }
+
+      return false;
+    }
+  }
+};
+</script>
diff --git a/src/ui/layout/search/GrandSearch.vue b/src/ui/layout/search/GrandSearch.vue
new file mode 100644
index 00000000000..23502a47967
--- /dev/null
+++ b/src/ui/layout/search/GrandSearch.vue
@@ -0,0 +1,216 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div ref="GrandSearch" aria-label="OpenMCT Search" class="c-gsearch" role="search">
+    <SearchResultsDropDown ref="searchResultsDropDown" />
+    <search
+      ref="shell-search"
+      class="c-gsearch__input"
+      :value="searchValue"
+      @input="searchEverything"
+      @clear="searchEverything"
+      @click="showSearchResults"
+    />
+  </div>
+</template>
+
+<script>
+import Search from '../../components/SearchComponent.vue';
+import SearchResultsDropDown from './SearchResultsDropDown.vue';
+
+const SEARCH_DEBOUNCE_TIME = 200;
+
+export default {
+  name: 'GrandSearch',
+  components: {
+    Search,
+    SearchResultsDropDown
+  },
+  inject: ['openmct'],
+  props: {},
+  data() {
+    return {
+      searchValue: '',
+      debouncedSearchTimeoutID: null,
+      searchLoading: false,
+      annotationSearchResults: [],
+      objectSearchResults: []
+    };
+  },
+  mounted() {
+    this.getSearchResults = this.debounceAsyncFunction(this.getSearchResults, SEARCH_DEBOUNCE_TIME);
+  },
+  unmounted() {
+    document.body.removeEventListener('click', this.handleOutsideClick);
+  },
+  methods: {
+    async searchEverything(value) {
+      // if an abort controller exists, regardless of the value passed in,
+      // there is an active search that should be canceled
+      if (this.abortSearchController) {
+        this.abortSearchController.abort();
+        delete this.abortSearchController;
+      }
+
+      this.searchValue = value;
+      // clear any previous search results
+      this.annotationSearchResults = [];
+      this.objectSearchResults = [];
+
+      if (this.searchValue) {
+        await this.getSearchResults();
+      } else {
+        clearTimeout(this.debouncedSearchTimeoutID);
+        const dropdownOptions = {
+          searchLoading: this.searchLoading,
+          searchValue: this.searchValue,
+          annotationSearchResults: this.annotationSearchResults,
+          objectSearchResults: this.objectSearchResults
+        };
+        this.$refs.searchResultsDropDown.showResults(dropdownOptions);
+      }
+    },
+    debounceAsyncFunction(functionToDebounce, debounceTime) {
+      return (...args) => {
+        clearTimeout(this.debouncedSearchTimeoutID);
+
+        return new Promise((resolve, reject) => {
+          this.debouncedSearchTimeoutID = setTimeout(() => {
+            functionToDebounce(...args)
+              .then(resolve)
+              .catch(reject);
+          }, debounceTime);
+        });
+      };
+    },
+    getPathsForObjects(objectsNeedingPaths, abortSignal) {
+      return Promise.all(
+        objectsNeedingPaths.map(async (domainObject) => {
+          if (!domainObject) {
+            // user interrupted search, return back
+            return null;
+          }
+
+          const keyStringForObject = this.openmct.objects.makeKeyString(domainObject.identifier);
+          const originalPathObjects = await this.openmct.objects.getOriginalPath(
+            keyStringForObject,
+            [],
+            abortSignal
+          );
+
+          return {
+            objectPath: originalPathObjects,
+            ...domainObject
+          };
+        })
+      );
+    },
+    async getSearchResults() {
+      // an abort controller will be passed in that will be used
+      // to cancel an active searches if necessary
+      this.searchLoading = true;
+      this.$refs.searchResultsDropDown.showSearchStarted();
+      this.abortSearchController = new AbortController();
+
+      try {
+        const searchObjectsPromise = this.searchObjects(this.abortSearchController.signal);
+        const searchAnnotationsPromise = this.searchAnnotations(this.abortSearchController.signal);
+
+        // Wait for all promises, but they process their results as they complete
+        await Promise.allSettled([searchObjectsPromise, searchAnnotationsPromise]);
+
+        this.searchLoading = false;
+        this.showSearchResults();
+      } catch (error) {
+        this.searchLoading = false;
+
+        // Is this coming from the AbortController?
+        // If so, we can swallow the error. If not, 🤮 it to console
+        if (error.name !== 'AbortError') {
+          console.error(`😞 Error searching`, error);
+        }
+      } finally {
+        if (this.abortSearchController) {
+          delete this.abortSearchController;
+        }
+      }
+    },
+    async searchObjects(abortSignal) {
+      const objectSearchPromises = this.openmct.objects.search(this.searchValue, abortSignal);
+      for await (const objectSearchResult of objectSearchPromises) {
+        const objectsWithPaths = await this.getPathsForObjects(objectSearchResult, abortSignal);
+        this.objectSearchResults.push(
+          ...objectsWithPaths.filter((result) => {
+            // Check if the result is NOT an annotation and has a reachable path
+            return (
+              !this.openmct.annotation.isAnnotation(result) &&
+              this.openmct.objects.isReachable(result?.objectPath)
+            );
+          })
+        );
+        // Display the available results so far for objects
+        this.showSearchResults();
+      }
+    },
+    async searchAnnotations(abortSignal) {
+      const annotationSearchResults = await this.openmct.annotation.searchForTags(
+        this.searchValue,
+        abortSignal
+      );
+      this.annotationSearchResults = annotationSearchResults;
+      // Display the available results so far for annotations
+      this.showSearchResults();
+    },
+    showSearchResults() {
+      const dropdownOptions = {
+        searchLoading: this.searchLoading,
+        searchValue: this.searchValue,
+        annotationSearchResults: this.annotationSearchResults,
+        objectSearchResults: this.objectSearchResults
+      };
+      this.$refs.searchResultsDropDown.showResults(dropdownOptions);
+      document.body.addEventListener('click', this.handleOutsideClick);
+    },
+    handleOutsideClick(event) {
+      // if click event is detected outside the dropdown while the
+      // dropdown is visible, this will collapse the dropdown.
+      if (this.$refs.GrandSearch) {
+        const clickedInsideDropdown = this.$refs.GrandSearch.contains(event.target);
+        const clickedPreviewClose =
+          event.target.parentElement &&
+          event.target.parentElement.querySelector('.js-preview-window');
+        const searchResultsDropDown = this.$refs.searchResultsDropDown._.data;
+        if (
+          !clickedInsideDropdown &&
+          searchResultsDropDown.resultsShown &&
+          !searchResultsDropDown.previewVisible &&
+          !clickedPreviewClose
+        ) {
+          searchResultsDropDown.resultsShown = false;
+          document.body.removeEventListener('click', this.handleOutsideClick);
+        }
+      }
+    }
+  }
+};
+</script>
diff --git a/src/ui/layout/search/GrandSearchSpec.js b/src/ui/layout/search/GrandSearchSpec.js
new file mode 100644
index 00000000000..8048b8ff055
--- /dev/null
+++ b/src/ui/layout/search/GrandSearchSpec.js
@@ -0,0 +1,309 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+import { nextTick } from 'vue';
+
+import ExampleTagsPlugin from '../../../../example/exampleTags/plugin.js';
+import DisplayLayoutPlugin from '../../../plugins/displayLayout/plugin.js';
+import GrandSearch from './GrandSearch.vue';
+
+describe('GrandSearch', () => {
+  let openmct;
+  let grandSearchComponent;
+  let viewContainer;
+  let parent;
+  let sharedWorkerToRestore;
+  let mockDomainObject;
+  let mockAnnotationObject;
+  let mockDisplayLayout;
+  let mockFolderObject;
+  let mockAnotherFolderObject;
+  let mockTopObject;
+  let originalRouterPath;
+  let mockNewObject;
+  let mockObjectProvider;
+  let _destroy;
+
+  beforeEach((done) => {
+    openmct = createOpenMct();
+    originalRouterPath = openmct.router.path;
+    openmct.router.path = [mockDisplayLayout];
+    openmct.editor.edit();
+
+    openmct.install(new ExampleTagsPlugin());
+    openmct.install(new DisplayLayoutPlugin());
+    const availableTags = openmct.annotation.getAvailableTags();
+    mockDomainObject = {
+      type: 'notebook',
+      name: 'fooRabbitNotebook',
+      location: 'fooNameSpace:topObject',
+      identifier: {
+        key: 'some-object',
+        namespace: 'fooNameSpace'
+      },
+      configuration: {
+        entries: {
+          someSection: {
+            somePage: [
+              {
+                id: 'fooBarEntry',
+                text: 'Foo Bar Text'
+              }
+            ]
+          }
+        }
+      }
+    };
+    mockTopObject = {
+      type: 'root',
+      name: 'Top Folder',
+      composition: [],
+      identifier: {
+        key: 'topObject',
+        namespace: 'fooNameSpace'
+      }
+    };
+    mockAnotherFolderObject = {
+      type: 'folder',
+      name: 'Another Test Folder',
+      composition: [],
+      location: 'fooNameSpace:topObject',
+      identifier: {
+        key: 'someParent',
+        namespace: 'fooNameSpace'
+      }
+    };
+    mockFolderObject = {
+      type: 'folder',
+      name: 'Test Folder',
+      composition: [],
+      location: 'fooNameSpace:someParent',
+      identifier: {
+        key: 'someFolder',
+        namespace: 'fooNameSpace'
+      }
+    };
+    mockDisplayLayout = {
+      type: 'layout',
+      name: 'Bar Layout',
+      composition: [],
+      identifier: {
+        key: 'some-layout',
+        namespace: 'fooNameSpace'
+      },
+      configuration: {
+        items: [],
+        layoutGrid: [10, 10]
+      }
+    };
+    mockAnnotationObject = {
+      type: 'annotation',
+      name: 'Some Notebook Annotation',
+      annotationType: openmct.annotation.ANNOTATION_TYPES.NOTEBOOK,
+      tags: [availableTags[0].id, availableTags[1].id],
+      identifier: {
+        key: 'anAnnotationKey',
+        namespace: 'fooNameSpace'
+      },
+      targets: [
+        {
+          keyString: 'fooNameSpace:some-object',
+          entryId: 'fooBarEntry'
+        }
+      ]
+    };
+    mockNewObject = {
+      type: 'folder',
+      name: 'New Apple Test Folder',
+      composition: [],
+      location: 'fooNameSpace:topObject',
+      identifier: {
+        key: 'newApple',
+        namespace: 'fooNameSpace'
+      }
+    };
+
+    openmct.router.isNavigatedObject = jasmine.createSpy().and.returnValue(false);
+    mockObjectProvider = jasmine.createSpyObj('mock object provider', ['create', 'update', 'get']);
+    // eslint-disable-next-line require-await
+    mockObjectProvider.get = async (identifier) => {
+      if (identifier.key === mockDomainObject.identifier.key) {
+        return mockDomainObject;
+      } else if (identifier.key === mockAnnotationObject.identifier.key) {
+        return mockAnnotationObject;
+      } else if (identifier.key === mockDisplayLayout.identifier.key) {
+        return mockDisplayLayout;
+      } else if (identifier.key === mockFolderObject.identifier.key) {
+        return mockFolderObject;
+      } else if (identifier.key === mockAnotherFolderObject.identifier.key) {
+        return mockAnotherFolderObject;
+      } else if (identifier.key === mockTopObject.identifier.key) {
+        return mockTopObject;
+      } else if (identifier.key === mockNewObject.identifier.key) {
+        return mockNewObject;
+      } else {
+        return null;
+      }
+    };
+
+    mockObjectProvider.create.and.returnValue(Promise.resolve(true));
+    mockObjectProvider.update.and.returnValue(Promise.resolve(true));
+
+    openmct.objects.addProvider('fooNameSpace', mockObjectProvider);
+
+    const mockViewProvider = jasmine.createSpyObj('mock view provider', ['key', 'view', 'canView']);
+
+    openmct.objectViews.addProvider(mockViewProvider);
+
+    openmct.on('start', async () => {
+      // use local worker
+      sharedWorkerToRestore = openmct.objects.inMemorySearchProvider.worker;
+      openmct.objects.inMemorySearchProvider.worker = null;
+      await openmct.objects.inMemorySearchProvider.index(mockTopObject);
+      await openmct.objects.inMemorySearchProvider.index(mockDomainObject);
+      await openmct.objects.inMemorySearchProvider.index(mockDisplayLayout);
+      await openmct.objects.inMemorySearchProvider.index(mockFolderObject);
+      await openmct.objects.inMemorySearchProvider.index(mockAnnotationObject);
+      parent = document.createElement('div');
+      document.body.appendChild(parent);
+      viewContainer = document.createElement('div');
+      parent.append(viewContainer);
+      const { vNode, destroy } = mount(
+        {
+          components: {
+            GrandSearch
+          },
+          provide: {
+            openmct
+          },
+          template: '<GrandSearch ref="root"/>'
+        },
+        {
+          element: viewContainer
+        }
+      );
+      grandSearchComponent = vNode.componentInstance;
+      _destroy = destroy;
+      await nextTick();
+      done();
+    });
+    openmct.startHeadless();
+  });
+
+  afterEach(() => {
+    openmct.objects.inMemorySearchProvider.worker = sharedWorkerToRestore;
+    openmct.router.path = originalRouterPath;
+    _destroy();
+
+    return resetApplicationState(openmct);
+  });
+
+  it('should render an object search result', async () => {
+    await grandSearchComponent.$refs.root.searchEverything('foo');
+    await nextTick();
+    const searchResults = document.querySelectorAll(
+      '[aria-label="fooRabbitNotebook notebook result"]'
+    );
+    expect(searchResults.length).toBe(1);
+    expect(searchResults[0].innerText).toContain('Rabbit');
+  });
+
+  it('should render an object search result if new object added', async () => {
+    const composition = openmct.composition.get(mockFolderObject);
+    composition.add(mockNewObject);
+    // after adding, need to wait a beat for the folder to be indexed
+    await nextTick();
+    await grandSearchComponent.$refs.root.searchEverything('apple');
+    await nextTick();
+    const searchResults = document.querySelectorAll(
+      '[aria-label="New Apple Test Folder folder result"]'
+    );
+    expect(searchResults.length).toBe(1);
+    expect(searchResults[0].innerText).toContain('Apple');
+  });
+
+  it('should not use InMemorySearch provider if object provider provides search', async () => {
+    // eslint-disable-next-line require-await
+    mockObjectProvider.search = async (query, abortSignal, searchType) => {
+      if (searchType === openmct.objects.SEARCH_TYPES.OBJECTS) {
+        return [mockNewObject];
+      } else {
+        return [];
+      }
+    };
+
+    mockObjectProvider.supportsSearchType = (someType) => {
+      return true;
+    };
+
+    const composition = openmct.composition.get(mockFolderObject);
+    composition.add(mockNewObject);
+    await grandSearchComponent.$refs.root.searchEverything('apple');
+    await nextTick();
+    const searchResults = document.querySelectorAll(
+      '[aria-label="New Apple Test Folder folder result"]'
+    );
+    // This will be of length 2 (doubles) if we're incorrectly searching with InMemorySearchProvider as well
+    expect(searchResults.length).toBe(1);
+    expect(searchResults[0].innerText).toContain('Apple');
+  });
+
+  it('should render an annotation search result', async () => {
+    await grandSearchComponent.$refs.root.searchEverything('S');
+    await nextTick();
+    const annotationResults = document.querySelectorAll('[aria-label="Annotation Search Result"]');
+    expect(annotationResults.length).toBe(1);
+    expect(annotationResults[0].innerText).toContain('Driving');
+  });
+
+  it('should render no annotation search results if no match', async () => {
+    await grandSearchComponent.$refs.root.searchEverything('Qbert');
+    await nextTick();
+    const annotationResults = document.querySelectorAll('[aria-label="Annotation Search Result"]');
+    expect(annotationResults.length).toBe(0);
+  });
+
+  it('should preview object search results in edit mode if object clicked', async () => {
+    await grandSearchComponent.$refs.root.searchEverything('Folder');
+    grandSearchComponent.$refs.root.openmct.router.path = [mockDisplayLayout];
+    await nextTick();
+    const folderResult = document.querySelector('[name="Test Folder"]');
+    expect(folderResult).not.toBeNull();
+    folderResult.click();
+    const previewWindow = document.querySelector('.js-preview-window');
+    expect(previewWindow.innerText).toContain('Snapshot');
+  });
+
+  it('should preview annotation search results in edit mode if annotation clicked', async () => {
+    await grandSearchComponent.$refs.root.searchEverything('Dri');
+    grandSearchComponent.$refs.root.openmct.router.path = [mockDisplayLayout];
+    await nextTick();
+    const annotationResults = document.querySelectorAll('[aria-label="Annotation Search Result"]');
+    expect(annotationResults.length).toBe(1);
+    expect(annotationResults[0].innerText).toContain('Driving');
+    annotationResults[0].click();
+    const previewWindow = document.querySelector('.js-preview-window');
+    expect(previewWindow.innerText).toContain('Snapshot');
+  });
+});
diff --git a/src/ui/layout/search/ObjectSearchResult.vue b/src/ui/layout/search/ObjectSearchResult.vue
new file mode 100644
index 00000000000..6972122bf89
--- /dev/null
+++ b/src/ui/layout/search/ObjectSearchResult.vue
@@ -0,0 +1,140 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div
+    class="c-gsearch-result c-gsearch-result--object"
+    aria-label="Object Search Result"
+    role="listitem"
+  >
+    <div class="c-gsearch-result__type-icon" :class="resultTypeIcon"></div>
+    <div
+      class="c-gsearch-result__body"
+      role="option"
+      :aria-label="`${resultName} ${resultType} result`"
+    >
+      <div
+        ref="resultName"
+        class="c-gsearch-result__title"
+        :name="resultName"
+        draggable="true"
+        @dragstart="dragStart"
+        @click="clickedResult"
+        @mouseover.ctrl="showToolTip"
+        @mouseleave="hideToolTip"
+      >
+        {{ resultName }}
+      </div>
+
+      <ObjectPath :read-only="false" :domain-object="result" />
+    </div>
+    <div class="c-gsearch-result__more-options-button">
+      <button class="c-icon-button icon-3-dots"></button>
+    </div>
+  </div>
+</template>
+
+<script>
+import tooltipHelpers from '../../../api/tooltips/tooltipMixins.js';
+import identifierToString from '../../../tools/url.js';
+import ObjectPath from '../../components/ObjectPath.vue';
+import PreviewAction from '../../preview/PreviewAction.js';
+
+export default {
+  name: 'ObjectSearchResult',
+  components: {
+    ObjectPath
+  },
+  mixins: [tooltipHelpers],
+  inject: ['openmct'],
+  props: {
+    result: {
+      type: Object,
+      required: true,
+      default() {
+        return {};
+      }
+    }
+  },
+  emits: ['preview-changed'],
+  computed: {
+    resultName() {
+      return this.result.name;
+    },
+    resultTypeIcon() {
+      return this.openmct.types.get(this.result.type).definition.cssClass;
+    },
+    resultType() {
+      return this.result.type;
+    }
+  },
+  mounted() {
+    this.previewAction = new PreviewAction(this.openmct);
+    this.previewAction.on('isVisible', this.togglePreviewState);
+  },
+  unmounted() {
+    this.previewAction.off('isVisible', this.togglePreviewState);
+  },
+  methods: {
+    clickedResult(event) {
+      const { objectPath } = this.result;
+      if (this.openmct.editor.isEditing()) {
+        event.preventDefault();
+        this.preview(objectPath);
+      } else {
+        let resultUrl = identifierToString(this.openmct, objectPath);
+
+        // Remove the vestigial 'ROOT' identifier from url if it exists
+        if (resultUrl.includes('/ROOT')) {
+          resultUrl = resultUrl.split('/ROOT').join('');
+        }
+
+        this.openmct.router.navigate(resultUrl);
+      }
+    },
+    togglePreviewState(previewState) {
+      this.$emit('preview-changed', previewState);
+    },
+    preview(objectPath) {
+      if (this.previewAction.appliesTo(objectPath)) {
+        this.previewAction.invoke(objectPath);
+      }
+    },
+    dragStart(event) {
+      const navigatedObject = this.openmct.router.path[0];
+      const { objectPath } = this.result;
+      const serializedPath = JSON.stringify(objectPath);
+      const keyString = this.openmct.objects.makeKeyString(this.result.identifier);
+      if (this.openmct.composition.checkPolicy(navigatedObject, this.result)) {
+        event.dataTransfer.setData('openmct/composable-domain-object', JSON.stringify(this.result));
+      }
+
+      event.dataTransfer.setData('openmct/domain-object-path', serializedPath);
+      event.dataTransfer.setData(`openmct/domain-object/${keyString}`, this.result);
+    },
+    async showToolTip() {
+      const { BELOW } = this.openmct.tooltips.TOOLTIP_LOCATIONS;
+      this.buildToolTip(await this.getObjectPath(this.result.identifier), BELOW, 'resultName');
+    }
+  }
+};
+</script>
diff --git a/src/ui/layout/search/SearchResultsDropDown.vue b/src/ui/layout/search/SearchResultsDropDown.vue
new file mode 100644
index 00000000000..5ff1b39834a
--- /dev/null
+++ b/src/ui/layout/search/SearchResultsDropDown.vue
@@ -0,0 +1,141 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div
+    v-show="resultsShown"
+    role="dialog"
+    aria-label="Search Results Dropdown"
+    class="c-gsearch__dropdown"
+  >
+    <button
+      aria-label="Close"
+      class="c-gsearch__results-close c-click-icon c-overlay__close-button icon-x"
+      @click="selectedResult"
+    ></button>
+    <div class="c-gsearch__results" :class="{ 'search-finished': !searchLoading }">
+      <div
+        v-if="objectResults?.length"
+        ref="objectResults"
+        class="c-gsearch__results-section"
+        role="list"
+        aria-label="Object Results"
+      >
+        <div class="c-gsearch__results-section-title">Object Results</div>
+        <object-search-result
+          v-for="objectResult in objectResults"
+          :key="openmct.objects.makeKeyString(objectResult.identifier)"
+          :result="objectResult"
+          @preview-changed="previewChanged"
+          @click="selectedResult"
+        />
+      </div>
+      <div
+        v-if="annotationResults?.length"
+        ref="annotationResults"
+        role="list"
+        aria-label="Annotation Results"
+      >
+        <div class="c-gsearch__results-section-title">Annotation Results</div>
+        <annotation-search-result
+          v-for="annotationResult in annotationResults"
+          :key="makeKeyForAnnotationResult(annotationResult)"
+          :result="annotationResult"
+          @click="selectedResult"
+        />
+      </div>
+      <div v-if="searchLoading" class="c-gsearch__result-pane-msg">
+        <div class="hint">Searching...</div>
+        <progress-bar :model="{ progressPerc: null }" />
+      </div>
+      <div
+        v-if="
+          !searchLoading &&
+          (!annotationResults || !annotationResults.length) &&
+          (!objectResults || !objectResults.length)
+        "
+        class="c-gsearch__result-pane-msg"
+      >
+        <div class="hint">No results found</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProgressBar from '@/ui/components/ProgressBar.vue';
+
+import AnnotationSearchResult from './AnnotationSearchResult.vue';
+import ObjectSearchResult from './ObjectSearchResult.vue';
+
+export default {
+  name: 'SearchResultsDropDown',
+  components: {
+    AnnotationSearchResult,
+    ObjectSearchResult,
+    ProgressBar
+  },
+  inject: ['openmct'],
+  data() {
+    return {
+      resultsShown: false,
+      searchLoading: false,
+      annotationResults: [],
+      objectResults: [],
+      previewVisible: false
+    };
+  },
+  methods: {
+    selectedResult() {
+      if (!this.previewVisible) {
+        this.resultsShown = false;
+      }
+    },
+    makeKeyForAnnotationResult(annotationResult) {
+      const annotationKeyString = this.openmct.objects.makeKeyString(annotationResult.identifier);
+      const firstTargetKeyString = Object.keys(annotationResult.targets)[0];
+
+      return `${annotationKeyString}-${firstTargetKeyString}`;
+    },
+    previewChanged(changedPreviewState) {
+      this.previewVisible = changedPreviewState;
+    },
+    showSearchStarted() {
+      this.searchLoading = true;
+      this.resultsShown = true;
+      this.annotationResults = [];
+      this.objectResults = [];
+    },
+    showResults({ searchLoading, searchValue, annotationSearchResults, objectSearchResults }) {
+      this.searchLoading = searchLoading;
+      this.annotationResults = annotationSearchResults;
+      this.objectResults = objectSearchResults;
+      if (searchValue?.length) {
+        this.resultsShown = true;
+      } else {
+        this.resultsShown = false;
+      }
+    }
+  },
+  template: 'Dropdown'
+};
+</script>
diff --git a/src/ui/layout/search/search.scss b/src/ui/layout/search/search.scss
new file mode 100644
index 00000000000..78fd0ee0069
--- /dev/null
+++ b/src/ui/layout/search/search.scss
@@ -0,0 +1,190 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/******************************* EXPANDED SEARCH 2022 */
+.c-gsearch {
+  .l-shell__head & {
+    // Search input in the shell head
+    .c-search {
+      background: rgba($colorHeadFg, 0.2);
+      box-shadow: none;
+      flex: 1 1 auto;
+      body.mobile & {
+        @include phonePortrait() {
+          // This logic of expanding the search input upon click only happens in mobile portrait mode
+          background: $colorHeadBg;
+          width: 15%;
+          &:hover {
+            // When clicked, expand the search bar
+            background-color: rgba($colorHeadFg, 0.2);
+            width: 50vw;
+            transition: width 120ms;
+          }
+        }
+      }
+    }
+  }
+
+  &__dropdown {
+    @include menuOuter();
+    display: flex;
+    flex-direction: column;
+    padding: $interiorMarginLg;
+    min-width: 500px;
+    max-height: 500px;
+    top: $formInputH;
+    z-index: 60;
+    body.mobile & {
+      // Makes search in mobile look less like an overlay, and more fullscreen.
+      position: absolute;
+      top: 25px;
+      left: -12px;
+      height: calc(100vh - 22px);
+      min-width: 100vw;
+      max-height: none;
+      border-radius: 0px;
+      box-shadow: none;
+    }
+  }
+
+  &__results,
+  &__results-section {
+    flex: 1 1 auto;
+  }
+
+  &__results {
+    // Holds n __results-sections
+    padding-right: $interiorMargin; // Fend off scrollbar
+    overflow-y: auto;
+
+    > * + * {
+      margin-top: $interiorMarginLg;
+    }
+    body.mobile & {
+      // Add a margin to results so we have room for the close button
+      width: 93%;
+    }
+  }
+
+  &__results-section {
+    > * + * {
+      margin-top: $interiorMarginSm;
+    }
+  }
+
+  &__results-section-title {
+    @include propertiesHeader();
+    width: 95%;
+  }
+
+  &__result-pane-msg {
+    > * + * {
+      margin-top: $interiorMargin;
+    }
+  }
+
+  &__results-close {
+    // Close button that appears for mobile only
+    display: none;
+    body.mobile & {
+      display: block;
+    }
+  }
+
+  body.mobile & {
+    width: 50vw;
+    @include phonePortrait() {
+      // This logic only appears for a mobile portrait mode
+      width: 100%;
+    }
+  }
+}
+
+.c-gsearch-result {
+  display: flex;
+  padding: $interiorMarginSm 0;
+
+  > * + * {
+    margin-left: $interiorMargin;
+  }
+
+  + .c-gsearch-result {
+    border-top: 1px solid $colorInteriorBorder;
+  }
+
+  &__type-icon,
+  &__more-options-button {
+    flex: 0 0 auto;
+  }
+
+  &__type-icon {
+    color: $colorItemTreeIcon;
+    font-size: 1.5em;
+
+    // TEMP: uses object-label component, hide label part
+    .c-object-label__name {
+      display: none;
+    }
+  }
+
+  &__more-options-button {
+    display: none; // TEMP until enabled
+  }
+
+  &__body {
+    flex: 1 1 auto;
+
+    > * + * {
+      margin-top: $interiorMarginSm;
+    }
+
+    .c-location {
+      color: $colorBodyFg;
+      font-size: 0.9em;
+      opacity: 0.8;
+    }
+  }
+
+  &__tags {
+    display: flex;
+
+    > * + * {
+      margin-left: $interiorMargin;
+    }
+  }
+
+  &__title {
+    border-radius: $basicCr;
+    color: pullForward($colorBodyFg, 30%);
+    cursor: pointer;
+    font-size: 1.15em;
+    padding: 3px $interiorMarginSm;
+
+    &:hover {
+      background-color: $colorItemTreeHoverBg;
+    }
+  }
+
+  .c-tag {
+    font-size: 0.9em;
+  }
+}
diff --git a/src/ui/layout/status-bar/Indicators.vue b/src/ui/layout/status-bar/Indicators.vue
deleted file mode 100644
index c37d7c5e7c1..00000000000
--- a/src/ui/layout/status-bar/Indicators.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2021, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
- Open MCT is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
- Open MCT includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<template>
-<div></div>
-</template>
-
-<script>
-export default {
-    inject: ['openmct'],
-
-    mounted() {
-        this.openmct.indicators.indicatorObjects.forEach((indicator) => {
-            this.$el.appendChild(indicator.element);
-        });
-    }
-};
-</script>
diff --git a/src/ui/layout/status-bar/NotificationBanner.vue b/src/ui/layout/status-bar/NotificationBanner.vue
index a1741fbef1c..654818748f5 100644
--- a/src/ui/layout/status-bar/NotificationBanner.vue
+++ b/src/ui/layout/status-bar/NotificationBanner.vue
@@ -1,5 +1,5 @@
 <!--
- Open MCT, Copyright (c) 2014-2021, United States Government
+ Open MCT, Copyright (c) 2014-2024, United States Government
  as represented by the Administrator of the National Aeronautics and Space
  Administration. All rights reserved.
  Open MCT is licensed under the Apache License, Version 2.0 (the
@@ -17,33 +17,39 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-<div
+  <div
     v-if="activeModel.message"
     class="c-message-banner"
+    role="alert"
+    :aria-live="activeModel.severity === 'error' ? 'assertive' : 'polite'"
     :class="[
-        activeModel.severity,
-        {
-            'minimized': activeModel.minimized,
-            'new': !activeModel.minimized
-        }]"
+      activeModel.severity,
+      {
+        minimized: activeModel.minimized,
+        new: !activeModel.minimized
+      }
+    ]"
     @click="maximize()"
->
+  >
     <span class="c-message-banner__message">{{ activeModel.message }}</span>
-    <span v-if="haslink"
-          class="c-message-banner__message"
-          :class="[haslink ? getLinkProps.cssClass : '']"
-    >{{ getLinkProps.text }}</span>
+    <span
+      v-if="haslink"
+      class="c-message-banner__message"
+      :class="[haslink ? getLinkProps.cssClass : '']"
+      >{{ getLinkProps.text }}</span
+    >
 
     <progress-bar
-        v-if="activeModel.progressPerc !== undefined"
-        class="c-message-banner__progress-bar"
-        :model="activeModel"
+      v-if="activeModel.progressPerc"
+      class="c-message-banner__progress-bar"
+      :model="activeModel"
     />
     <button
-        class="c-message-banner__close-button c-click-icon icon-x-in-circle"
-        @click.stop="dismiss()"
+      class="c-message-banner__close-button c-click-icon icon-x-in-circle"
+      aria-label="Dismiss"
+      @click.stop="dismiss()"
     ></button>
-</div>
+  </div>
 </template>
 
 <script>
@@ -52,141 +58,143 @@ import ProgressBar from '../../components/ProgressBar.vue';
 let activeNotification = undefined;
 let maximizedDialog = undefined;
 let minimizeButton = {
-    label: 'Dismiss',
-    callback: dismissMaximizedDialog
+  label: 'Dismiss',
+  callback: dismissMaximizedDialog
 };
 
 function dismissMaximizedDialog() {
-    if (maximizedDialog) {
-        maximizedDialog.dismiss();
-        maximizedDialog = undefined;
-    }
+  if (maximizedDialog) {
+    maximizedDialog.dismiss();
+    maximizedDialog = undefined;
+  }
 }
 
 function updateMaxProgressBar(progressPerc, progressText) {
-    if (maximizedDialog) {
-        maximizedDialog.updateProgress(progressPerc, progressText);
+  if (maximizedDialog) {
+    maximizedDialog.updateProgress(progressPerc, progressText);
 
-        if (progressPerc >= 100) {
-            dismissMaximizedDialog();
-        }
+    if (progressPerc >= 100) {
+      dismissMaximizedDialog();
     }
+  }
 }
 
 export default {
-    components: {
-        ProgressBar: ProgressBar
+  components: {
+    ProgressBar: ProgressBar
+  },
+  inject: ['openmct'],
+  data() {
+    return {
+      activeModel: {
+        message: undefined,
+        progressPerc: null,
+        progressText: undefined,
+        minimized: undefined,
+        options: undefined
+      }
+    };
+  },
+  computed: {
+    haslink() {
+      const options = this.activeModel.options;
+
+      return options && options.link;
     },
-    inject: ['openmct'],
-    data() {
-        return {
-            activeModel: {
-                message: undefined,
-                progressPerc: undefined,
-                progressText: undefined,
-                minimized: undefined,
-                options: undefined
-            }
-        };
+    getLinkProps() {
+      return this.activeModel.options.link;
     },
-    computed: {
-        haslink() {
-            const options = this.activeModel.options;
-
-            return options && options.link;
-        },
-        getLinkProps() {
-            return this.activeModel.options.link;
-        },
-        progressWidth() {
-            return {
-                width: this.activeModel.progress + '%'
-            };
-        }
+    progressWidth() {
+      return {
+        width: this.activeModel.progress + '%'
+      };
+    }
+  },
+  mounted() {
+    this.openmct.notifications.on('notification', this.showNotification);
+    this.openmct.notifications.on('dismiss-all', this.clearModel);
+    if (this.openmct.notifications.activeNotification) {
+      activeNotification = this.openmct.notifications.activeNotification;
+      this.showNotification(activeNotification);
+    }
+  },
+  methods: {
+    showNotification(notification) {
+      if (activeNotification) {
+        activeNotification.off('progress', this.updateProgress);
+        activeNotification.off('minimized', this.minimized);
+        activeNotification.off('destroy', this.destroyActiveNotification);
+      }
+
+      activeNotification = notification;
+      this.clearModel();
+      this.applyModel(notification.model);
+
+      activeNotification.once('destroy', this.destroyActiveNotification);
+      activeNotification.on('progress', this.updateProgress);
+      activeNotification.on('minimized', this.minimized);
     },
-    mounted() {
-        this.openmct.notifications.on('notification', this.showNotification);
-        this.openmct.notifications.on('dismiss-all', this.clearModel);
+    isEqual(modelA, modelB) {
+      return modelA.message === modelB.message && modelA.timestamp === modelB.timestamp;
     },
-    methods: {
-        showNotification(notification) {
-            if (activeNotification) {
-                activeNotification.off('progress', this.updateProgress);
-                activeNotification.off('minimized', this.minimized);
-                activeNotification.off('destroy', this.destroyActiveNotification);
-            }
-
-            activeNotification = notification;
-            this.clearModel();
-            this.applyModel(notification.model);
-
-            activeNotification.once('destroy', this.destroyActiveNotification);
-            activeNotification.on('progress', this.updateProgress);
-            activeNotification.on('minimized', this.minimized);
-        },
-        isEqual(modelA, modelB) {
-            return modelA.message === modelB.message
-                    && modelA.timestamp === modelB.timestamp;
-        },
-        applyModel(model) {
-            Object.keys(model).forEach((key) => this.activeModel[key] = model[key]);
-        },
-        clearModel() {
-            Object.keys(this.activeModel).forEach((key) => this.activeModel[key] = undefined);
-        },
-        updateProgress(progressPerc, progressText) {
-            this.activeModel.progressPerc = progressPerc;
-            this.activeModel.progressText = progressText;
-        },
-        destroyActiveNotification() {
-            this.clearModel();
-            activeNotification.off('destroy', this.destroyActiveNotification);
-            activeNotification = undefined;
-        },
-        dismiss() {
-            if (activeNotification.model.severity === 'info') {
-                activeNotification.dismiss();
-            } else {
-                this.openmct.notifications._minimize(activeNotification);
-            }
-        },
-        minimized() {
-            this.activeModel.minimized = true;
-            activeNotification.off('progress', this.updateProgress);
-            activeNotification.off('minimized', this.minimized);
-
-            activeNotification.off('progress', updateMaxProgressBar);
-            activeNotification.off('minimized', dismissMaximizedDialog);
-            activeNotification.off('destroy', dismissMaximizedDialog);
-        },
-        maximize() {
-            if (this.haslink) {
-                const linkProps = this.getLinkProps;
-                linkProps.onClick();
-
-                activeNotification.dismiss();
-
-                return;
-            }
-
-            if (this.activeModel.progressPerc !== undefined) {
-                maximizedDialog = this.openmct.overlays.progressDialog({
-                    buttons: [minimizeButton],
-                    ...this.activeModel
-                });
-
-                activeNotification.on('progress', updateMaxProgressBar);
-                activeNotification.on('minimized', dismissMaximizedDialog);
-                activeNotification.on('destroy', dismissMaximizedDialog);
-
-            } else {
-                maximizedDialog = this.openmct.overlays.dialog({
-                    iconClass: this.activeModel.severity,
-                    buttons: [minimizeButton],
-                    ...this.activeModel
-                });
-            }
-        }
+    applyModel(model) {
+      Object.keys(model).forEach((key) => (this.activeModel[key] = model[key]));
+    },
+    clearModel() {
+      Object.keys(this.activeModel).forEach((key) => (this.activeModel[key] = undefined));
+    },
+    updateProgress(progressPerc, progressText) {
+      this.activeModel.progressPerc = progressPerc;
+      this.activeModel.progressText = progressText;
+    },
+    destroyActiveNotification() {
+      this.clearModel();
+      activeNotification.off('destroy', this.destroyActiveNotification);
+      activeNotification = undefined;
+    },
+    dismiss() {
+      if (activeNotification.model.severity === 'info') {
+        activeNotification.dismiss();
+      } else {
+        this.openmct.notifications._minimize(activeNotification);
+      }
+    },
+    minimized() {
+      this.activeModel.minimized = true;
+      activeNotification.off('progress', this.updateProgress);
+      activeNotification.off('minimized', this.minimized);
+
+      activeNotification.off('progress', updateMaxProgressBar);
+      activeNotification.off('minimized', dismissMaximizedDialog);
+      activeNotification.off('destroy', dismissMaximizedDialog);
+    },
+    maximize() {
+      if (this.haslink) {
+        const linkProps = this.getLinkProps;
+        linkProps.onClick();
+
+        activeNotification.dismiss();
+
+        return;
+      }
+
+      if (this.activeModel.progressPerc) {
+        maximizedDialog = this.openmct.overlays.progressDialog({
+          buttons: [minimizeButton],
+          ...this.activeModel
+        });
+
+        activeNotification.on('progress', updateMaxProgressBar);
+        activeNotification.on('minimized', dismissMaximizedDialog);
+        activeNotification.on('destroy', dismissMaximizedDialog);
+      } else {
+        maximizedDialog = this.openmct.overlays.dialog({
+          iconClass: this.activeModel.severity,
+          buttons: [minimizeButton],
+          ...this.activeModel
+        });
+      }
     }
+  }
 };
 </script>
diff --git a/src/ui/layout/status-bar/StatusIndicators.vue b/src/ui/layout/status-bar/StatusIndicators.vue
new file mode 100644
index 00000000000..55f86dcbf60
--- /dev/null
+++ b/src/ui/layout/status-bar/StatusIndicators.vue
@@ -0,0 +1,60 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="l-shell__head-section l-shell__indicators">
+    <component
+      :is="indicator.value.vueComponent"
+      v-for="indicator in sortedIndicators"
+      :key="indicator.value.key"
+      role="status"
+    />
+  </div>
+</template>
+
+<script>
+import { shallowRef } from 'vue';
+export default {
+  inject: ['openmct'],
+  data() {
+    return {
+      indicators: this.openmct.indicators.getIndicatorObjectsByPriority().map(shallowRef)
+    };
+  },
+  computed: {
+    sortedIndicators() {
+      if (this.indicators.length === 0) {
+        return [];
+      }
+
+      return [...this.indicators].sort((a, b) => b.value.priority - a.value.priority);
+    }
+  },
+  beforeUnmount() {
+    this.openmct.indicators.off('addIndicator', this.addIndicator);
+  },
+  created() {
+    this.openmct.indicators.on('addIndicator', this.addIndicator);
+  },
+  methods: {
+    addIndicator(indicator) {
+      this.indicators.push(shallowRef(indicator));
+    }
+  }
+};
+</script>
diff --git a/src/ui/layout/status-bar/indicators.scss b/src/ui/layout/status-bar/indicators.scss
index ce334d3c240..957356f9e96 100644
--- a/src/ui/layout/status-bar/indicators.scss
+++ b/src/ui/layout/status-bar/indicators.scss
@@ -1,132 +1,134 @@
 .c-indicator {
-    @include cControl();
-    @include cClickIconButtonLayout();
-    border-radius: $controlCr;
-    overflow: visible;
-    position: relative;
-    text-transform: uppercase;
+  @include cControl();
+  @include cClickIconButtonLayout();
+  border-radius: $controlCr;
+  overflow: visible;
+  position: relative;
+  text-transform: uppercase;
 
-    button { text-transform: uppercase; }
+  button {
+    text-transform: uppercase;
+  }
 
-    &.no-minify {
-        // For items that cannot be minified
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
+  &.no-minify {
+    // For items that cannot be minified
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
 
-        > *,
-        &:before {
-            flex: 1 1 auto;
-        }
+    > *,
+    &:before {
+      flex: 1 1 auto;
+    }
 
-        &:before {
-            margin-right: $interiorMarginSm;
-        }
+    &:before {
+      margin-right: $interiorMarginSm;
     }
+  }
 
-    &:not(.no-minify) {
-        &:before {
-            margin-right: 0 !important;
-        }
+  &:not(.no-minify) {
+    &:before {
+      margin-right: 0 !important;
     }
+  }
 }
 
 .c-indicator__label {
-    // Label element. Appears as a hover bubble element when Indicators are minified;
-    // Appears as an inline element when not.
-    display: inline-block;
-    transition:none;
-    white-space: nowrap;
+  // Label element. Appears as a hover bubble element when Indicators are minified;
+  // Appears as an inline element when not.
+  display: inline-block;
+  transition: none;
+  white-space: nowrap;
 
-    a,
-    button,
-    .s-button,
-    .c-button {
-        // Make <a> in label look like buttons
-        transition: $transIn;
-        background: transparent;
-        border: 1px solid rgba($colorIndicatorMenuFg, 0.5);
-        border-radius: $controlCr;
-        box-sizing: border-box;
-        color: inherit;
-        font-size: inherit;
-        height: auto;
-        line-height: normal;
-        padding: 0 2px;
-        &:hover {
-            background: rgba($colorIndicatorMenuFg, 0.1);
-            border-color: rgba($colorIndicatorMenuFg, 0.75);
-            color: $colorIndicatorMenuFgHov;
-        }
+  a,
+  button,
+  .s-button,
+  .c-button {
+    // Make <a> in label look like buttons
+    @include transition(background-color);
+    background-color: transparent;
+    border: 1px solid rgba($colorIndicatorMenuFg, 0.5);
+    border-radius: $controlCr;
+    box-sizing: border-box;
+    color: inherit;
+    font-size: inherit;
+    height: auto;
+    line-height: normal;
+    padding: 0 2px;
+    @include hover {
+      background-color: rgba($colorIndicatorMenuFg, 0.1);
+      border-color: rgba($colorIndicatorMenuFg, 0.75);
+      color: $colorIndicatorMenuFgHov;
     }
+  }
 
-    [class*='icon-'] {
-        // If any elements within label include the class 'icon-*' then deal with their :before's
-        &:before {
-            font-size: 0.8em;
-            margin-right: $interiorMarginSm;
-        }
+  [class*='icon-'] {
+    // If any elements within label include the class 'icon-*' then deal with their :before's
+    &:before {
+      font-size: 0.8em;
+      margin-right: $interiorMarginSm;
     }
+  }
 }
 
 .c-indicator__count {
-    display: none; // Only displays when Indicator is minified, see below
+  display: none; // Only displays when Indicator is minified, see below
 }
 
 [class*='minify-indicators'] {
-    // All styles for minified Indicators should go in here
-    .c-indicator:not(.no-minify) {
-        border: 1px solid transparent; // Hack to make minified sizing work in Safari. Have no idea why this works.
-        overflow: visible;
-        transition: transform;
+  // All styles for minified Indicators should go in here
+  .c-indicator:not(.no-minify) {
+    border: 1px solid transparent; // Hack to make minified sizing work in Safari. Have no idea why this works.
+    overflow: visible;
+    transition: transform;
 
-        @include hover() {
-            background: $colorIndicatorBgHov;
-            transition: transform 250ms ease-in 200ms; // Go-away transition
+    @include hover() {
+      background: $colorIndicatorBgHov;
+      transition: transform 250ms ease-in 200ms; // Go-away transition
 
-            .c-indicator__label {
-                box-shadow: $colorIndicatorMenuBgShdw;
-                transform: scale(1.0);
-                overflow: visible;
-                transition: transform 100ms ease-out 100ms; // Appear transition
-            }
-        }
-        .c-indicator__label {
-            transition: transform 250ms ease-in 200ms; // Go-away transition
-            background: $colorIndicatorMenuBg;
-            color: $colorIndicatorMenuFg;
-            border-radius: $controlCr;
-            right: 0;
-            top: 130%;
-            padding: $interiorMargin $interiorMargin;
-            position: absolute;
-            transform-origin: 90% 0;
-            transform: scale(0.0);
-            overflow: hidden;
-            z-index: 50;
+      .c-indicator__label {
+        box-shadow: $colorIndicatorMenuBgShdw;
+        transform: scale(1);
+        overflow: visible;
+        transition: transform 100ms ease-out 100ms; // Appear transition
+      }
+    }
+    .c-indicator__label {
+      transition: transform 250ms ease-in 200ms; // Go-away transition
+      background: $colorIndicatorMenuBg;
+      color: $colorIndicatorMenuFg;
+      border-radius: $controlCr;
+      right: 0;
+      top: 130%;
+      padding: $interiorMargin $interiorMargin;
+      position: absolute;
+      transform-origin: 90% 0;
+      transform: scale(0);
+      overflow: hidden;
+      z-index: 50;
 
-            &:before {
-                // Infobubble-style arrow element
-                content: '';
-                display: block;
-                position: absolute;
-                bottom: 100%;
-                right: 8px;
-                @include triangle('up', $size: 4px, $ratio: 1, $color: $colorIndicatorMenuBg);
-            }
-        }
+      &:before {
+        // Infobubble-style arrow element
+        content: '';
+        display: block;
+        position: absolute;
+        bottom: 100%;
+        right: 8px;
+        @include triangle('up', $size: 4px, $ratio: 1, $color: $colorIndicatorMenuBg);
+      }
+    }
 
-        .c-indicator__count {
-            display: inline-block;
-            margin-left: $interiorMarginSm;
-        }
+    .c-indicator__count {
+      display: inline-block;
+      margin-left: $interiorMarginSm;
     }
+  }
 }
 
 /* Mobile */
 // Hide the clock indicator when we're phone portrait
 body.phone.portrait {
-    .c-indicator.t-indicator-clock {
-        display: none;
-    }
+  .c-indicator.t-indicator-clock {
+    display: none;
+  }
 }
diff --git a/src/ui/layout/status-bar/notification-banner.scss b/src/ui/layout/status-bar/notification-banner.scss
index 1247aa43870..bac7845c2df 100644
--- a/src/ui/layout/status-bar/notification-banner.scss
+++ b/src/ui/layout/status-bar/notification-banner.scss
@@ -1,74 +1,74 @@
 @mixin statusBannerColors($bg, $fg: $colorStatusFg) {
-    $bgPb: 10%;
-    $bgPbD: 10%;
-    background-color: darken($bg, $bgPb);
-    color: $fg;
+  $bgPb: 10%;
+  $bgPbD: 10%;
+  background-color: darken($bg, $bgPb);
+  color: $fg;
+  &:hover {
+    background-color: darken($bg, $bgPb - $bgPbD);
+  }
+  .s-action {
+    background-color: darken($bg, $bgPb + $bgPbD);
     &:hover {
-        background-color: darken($bg, $bgPb - $bgPbD);
-    }
-    .s-action {
-        background-color: darken($bg, $bgPb + $bgPbD);
-        &:hover {
-            background-color: darken($bg, $bgPb);
-        }
+      background-color: darken($bg, $bgPb);
     }
+  }
 }
 
 .c-message-banner {
-    $closeBtnSize: 7px;
+  $closeBtnSize: 7px;
 
-    border-radius: $controlCr;
-    @include statusBannerColors($colorStatusDefault, $colorStatusFg);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    left: 50%;
-    top: 50%;
-    max-width: 50%;
-    max-height: 25px;
-    padding: $interiorMarginSm $interiorMargin $interiorMarginSm $interiorMarginLg;
-    position: absolute;
-    transform: translate(-50%, -50%);
-    z-index: 2;
+  border-radius: $controlCr;
+  @include statusBannerColors($colorStatusDefault, $colorStatusFg);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  left: 50%;
+  top: 50%;
+  max-width: 50%;
+  max-height: 25px;
+  padding: $interiorMarginSm $interiorMargin $interiorMarginSm $interiorMarginLg;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  z-index: 2;
 
-    > * + * {
-        margin-left: $interiorMargin;
-    }
+  > * + * {
+    margin-left: $interiorMargin;
+  }
 
-    &.ok {
-        @include statusBannerColors($colorOk, $colorOkFg);
-    }
+  &.ok {
+    @include statusBannerColors($colorOk, $colorOkFg);
+  }
 
-    &.info {
-        @include statusBannerColors($colorInfo, $colorInfoFg);
-    }
-    &.caution,
-    &.warning,
-    &.alert {
-        @include statusBannerColors($colorWarningLo,$colorWarningLoFg);
-    }
-    &.error {
-        @include statusBannerColors($colorWarningHi, $colorWarningHiFg);
-    }
+  &.info {
+    @include statusBannerColors($colorInfo, $colorInfoFg);
+  }
+  &.caution,
+  &.warning,
+  &.alert {
+    @include statusBannerColors($colorWarningLo, $colorWarningLoFg);
+  }
+  &.error {
+    @include statusBannerColors($colorWarningHi, $colorWarningHiFg);
+  }
 
-    &__message {
-        @include ellipsize();
-        flex: 1 1 auto;
-    }
+  &__message {
+    @include ellipsize();
+    flex: 1 1 auto;
+  }
 
-    &__progress-bar {
-        flex: 0 0 auto;
-        width: 70px;
+  &__progress-bar {
+    height: 7px;
+    width: 70px;
 
-        // Only show the progress bar
-        .c-progress-bar {
-            &__text {
-                display: none;
-            }
-        }
+    // Only show the progress bar
+    .c-progress-bar {
+      &__text {
+        display: none;
+      }
     }
+  }
 
-    &__close-button {
-        font-size: 1.25em;
-    }
+  &__close-button {
+    font-size: 1.25em;
+  }
 }
diff --git a/src/ui/layout/tree-item.vue b/src/ui/layout/tree-item.vue
deleted file mode 100644
index b4a06526bec..00000000000
--- a/src/ui/layout/tree-item.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<template>
-<div
-    :style="treeItemStyles"
-    class="c-tree__item-h"
->
-    <div
-        class="c-tree__item"
-        :class="{
-            'is-alias': isAlias,
-            'is-navigated-object': navigated,
-            'is-context-clicked': contextClickActive
-        }"
-        @click.capture="handleClick"
-        @contextmenu.capture="handleContextMenu"
-    >
-        <view-control
-            ref="navigate"
-            class="c-tree__item__view-control"
-            :value="isOpen || isLoading"
-            :enabled="!activeSearch && hasComposition"
-            @input="navigationClick()"
-        />
-        <object-label
-            ref="objectLabel"
-            :domain-object="node.object"
-            :object-path="node.objectPath"
-            :navigate-to-path="navigationPath"
-            @context-click-active="setContextClickActive"
-        />
-        <span
-            v-if="isLoading"
-            class="loading"
-        ></span>
-    </div>
-</div>
-</template>
-
-<script>
-import viewControl from '../components/viewControl.vue';
-import ObjectLabel from '../components/ObjectLabel.vue';
-
-export default {
-    name: 'TreeItem',
-    components: {
-        viewControl,
-        ObjectLabel
-    },
-    inject: ['openmct'],
-    props: {
-        node: {
-            type: Object,
-            required: true
-        },
-        activeSearch: {
-            type: Boolean,
-            default: false
-        },
-        leftOffset: {
-            type: String,
-            default: '0px'
-        },
-        itemIndex: {
-            type: Number,
-            required: false,
-            default: undefined
-        },
-        itemOffset: {
-            type: Number,
-            required: false,
-            default: undefined
-        },
-        itemHeight: {
-            type: Number,
-            required: false,
-            default: 0
-        },
-        openItems: {
-            type: Array,
-            required: true
-        },
-        loadingItems: {
-            type: Object,
-            required: true
-        }
-    },
-    data() {
-        this.navigationPath = this.node.navigationPath;
-
-        return {
-            hasComposition: false,
-            navigated: this.isNavigated(),
-            contextClickActive: false
-        };
-    },
-    computed: {
-        isAlias() {
-            let parent = this.node.objectPath[1];
-
-            if (!parent) {
-                return false;
-            }
-
-            let parentKeyString = this.openmct.objects.makeKeyString(parent.identifier);
-
-            return parentKeyString !== this.node.object.location;
-        },
-        isLoading() {
-            return Boolean(this.loadingItems[this.navigationPath]);
-        },
-        isOpen() {
-            return this.openItems.includes(this.navigationPath);
-        },
-        treeItemStyles() {
-            let itemTop = (this.itemOffset + this.itemIndex) * this.itemHeight + 'px';
-
-            return {
-                'top': itemTop,
-                'position': 'absolute',
-                'padding-left': this.leftOffset
-            };
-        }
-    },
-    mounted() {
-        this.domainObject = this.node.object;
-
-        if (this.openmct.composition.get(this.domainObject)) {
-            this.hasComposition = true;
-        }
-
-        this.openmct.router.on('change:path', this.highlightIfNavigated);
-
-        this.$emit('tree-item-mounted', this.navigationPath);
-    },
-    destroyed() {
-        this.openmct.router.off('change:path', this.highlightIfNavigated);
-        this.$emit('tree-item-destoyed', this.navigationPath);
-    },
-    methods: {
-        navigationClick() {
-            this.$emit('navigation-click', this.isOpen || this.isLoading ? 'close' : 'open');
-        },
-        handleClick(event) {
-            // skip for navigation, let viewControl handle click
-            if (this.$refs.navigate.$el === event.target) {
-                return;
-            }
-
-            event.stopPropagation();
-            this.$refs.objectLabel.navigateOrPreview(event);
-        },
-        handleContextMenu(event) {
-            event.stopPropagation();
-            this.$refs.objectLabel.showContextMenu(event);
-        },
-        isNavigated() {
-            return this.navigationPath === this.openmct.router.currentLocation.path;
-        },
-        highlightIfNavigated() {
-            this.navigated = this.isNavigated();
-        },
-        setContextClickActive(active) {
-            this.contextClickActive = active;
-        }
-    }
-};
-</script>
diff --git a/src/ui/legacy/mct-template.vue b/src/ui/legacy/mct-template.vue
deleted file mode 100644
index ad77d350efc..00000000000
--- a/src/ui/legacy/mct-template.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-<div></div>
-</template>
-
-<script>
-export default {
-    inject: ['openmct'],
-    props: {
-        templateKey: {
-            type: String,
-            default: undefined
-        }
-    },
-    mounted() {
-        let openmct = this.openmct;
-        let $injector = openmct.$injector;
-        let angular = openmct.$angular;
-
-        let templateLinker = $injector.get('templateLinker');
-
-        let templateMap = {};
-        $injector.get('templates[]').forEach((t) => {
-            templateMap[t.key] = templateMap[t.key] || t;
-        });
-
-        let $rootScope = $injector.get('$rootScope');
-        this.$scope = $rootScope.$new();
-
-        templateLinker.link(
-            this.$scope,
-            angular.element(this.$el),
-            templateMap[this.templateKey]
-        );
-    },
-    destroyed() {
-        this.$scope.$destroy();
-    }
-};
-</script>
diff --git a/src/ui/mixins/context-menu-gesture.js b/src/ui/mixins/context-menu-gesture.js
index 404015f3838..038e500329e 100644
--- a/src/ui/mixins/context-menu-gesture.js
+++ b/src/ui/mixins/context-menu-gesture.js
@@ -1,57 +1,81 @@
+import { toRaw } from 'vue';
+
 export default {
-    inject: ['openmct'],
-    props: {
-        'objectPath': {
-            type: Array,
-            default() {
-                return [];
-            }
-        }
-    },
-    data() {
-        return {
-            contextClickActive: false
-        };
-    },
-    mounted() {
-        //TODO: touch support
-        this.$el.addEventListener('contextmenu', this.showContextMenu);
+  inject: ['openmct'],
+  props: {
+    objectPath: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      contextClickActive: false
+    };
+  },
+  mounted() {
+    this.unobserveObjects = {};
+    //TODO: touch support
+    this.$nextTick(() => {
+      this.$refs.root.addEventListener('contextmenu', this.showContextMenu);
+    });
 
-        function updateObject(oldObject, newObject) {
-            Object.assign(oldObject, newObject);
-        }
+    function updateObject(oldObject, newObject) {
+      const rawNewObject = toRaw(newObject);
+      const rawOldObject = toRaw(oldObject);
+      Object.assign(rawOldObject, rawNewObject);
+    }
 
-        this.objectPath.forEach(object => {
-            if (object) {
-                this.$once('hook:destroyed',
-                    this.openmct.objects.observe(object, '*', updateObject.bind(this, object)));
-            }
-        });
-    },
-    destroyed() {
-        this.$el.removeEventListener('contextMenu', this.showContextMenu);
+    this.objectPath.forEach((object) => {
+      if (object) {
+        const key = this.openmct.objects.makeKeyString(object.identifier);
+        this.unobserveObjects[key] = this.openmct.objects.observe(
+          object,
+          '*',
+          updateObject.bind(this, object)
+        );
+      }
+    });
+  },
+  beforeUnmount() {
+    this.removeListeners();
+    this.$refs.root.removeEventListener('contextMenu', this.showContextMenu);
+  },
+  methods: {
+    removeListeners() {
+      Object.values(this.unobserveObjects).forEach((unobserve) => unobserve());
+      this.unobserveObjects = {};
     },
-    methods: {
-        showContextMenu(event) {
-            event.preventDefault();
-            event.stopPropagation();
+    showContextMenu(event) {
+      if (this.readOnly) {
+        return;
+      }
 
-            let actionsCollection = this.openmct.actions.getActionsCollection(this.objectPath);
-            let actions = actionsCollection.getVisibleActions();
-            let sortedActions = this.openmct.actions._groupAndSortActions(actions);
+      event.preventDefault();
+      event.stopPropagation();
 
-            const menuOptions = {
-                onDestroy: this.onContextMenuDestroyed
-            };
+      let actionsCollection = this.openmct.actions.getActionsCollection(toRaw(this.objectPath));
+      let actions = actionsCollection.getVisibleActions();
+      let sortedActions = this.openmct.actions._groupAndSortActions(actions);
 
-            const menuItems = this.openmct.menus.actionsToMenuItems(sortedActions, actionsCollection.objectPath, actionsCollection.view);
-            this.openmct.menus.showMenu(event.clientX, event.clientY, menuItems, menuOptions);
-            this.contextClickActive = true;
-            this.$emit('context-click-active', true);
-        },
-        onContextMenuDestroyed() {
-            this.contextClickActive = false;
-            this.$emit('context-click-active', false);
-        }
+      const menuOptions = {
+        onDestroy: this.onContextMenuDestroyed
+      };
+
+      const menuItems = this.openmct.menus.actionsToMenuItems(
+        sortedActions,
+        actionsCollection.objectPath,
+        actionsCollection.view
+      );
+      this.openmct.menus.showMenu(event.clientX, event.clientY, menuItems, menuOptions);
+      this.contextClickActive = true;
+      this.$emit('context-click-active', true);
+    },
+    onContextMenuDestroyed() {
+      this.contextClickActive = false;
+      this.$emit('context-click-active', false);
     }
+  }
 };
diff --git a/src/ui/mixins/object-link.js b/src/ui/mixins/object-link.js
index 71e09e5106e..938509d6f52 100644
--- a/src/ui/mixins/object-link.js
+++ b/src/ui/mixins/object-link.js
@@ -1,28 +1,28 @@
-import objectPathToUrl from '/src/tools/url';
+import objectPathToUrl from '../../tools/url.js';
 
 export default {
-    inject: ['openmct'],
-    props: {
-        'objectPath': {
-            type: Array,
-            default() {
-                return [];
-            }
-        }
-    },
-    computed: {
-        objectLink() {
-            if (!this.objectPath.length) {
-                return;
-            }
+  inject: ['openmct'],
+  props: {
+    objectPath: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  computed: {
+    objectLink() {
+      if (!this.objectPath.length) {
+        return;
+      }
 
-            if (this.navigateToPath) {
-                return '#' + this.navigateToPath;
-            }
+      if (this.navigateToPath) {
+        return '#' + this.navigateToPath;
+      }
 
-            let url = objectPathToUrl(this.openmct, this.objectPath);
+      const url = objectPathToUrl(this.openmct, this.objectPath);
 
-            return url;
-        }
+      return url;
     }
+  }
 };
diff --git a/src/ui/mixins/staleness-mixin.js b/src/ui/mixins/staleness-mixin.js
new file mode 100644
index 00000000000..6e8ea291fc5
--- /dev/null
+++ b/src/ui/mixins/staleness-mixin.js
@@ -0,0 +1,213 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { isProxy, toRaw } from 'vue';
+
+import { isIdentifier } from '@/api/objects/object-utils';
+import StalenessUtils from '@/utils/staleness';
+
+export default {
+  data() {
+    return {
+      staleObjects: [],
+      stalenessSubscription: {},
+      compositionObjectMap: new Map(),
+      setupClockChanged: false
+    };
+  },
+  computed: {
+    isStale() {
+      return this.staleObjects.length !== 0;
+    }
+  },
+  methods: {
+    getSubscriptionId(domainObject) {
+      // Only extract the identifier if it is not already an identifier
+      const identifier = isIdentifier(domainObject) ? domainObject : domainObject.identifier;
+      return this.openmct?.objects.makeKeyString(identifier);
+    },
+    setupClockChangedEvent(callback) {
+      this.setupClockChanged = true;
+      this.compositionIteratorCallback = this.compositionIterator(callback);
+      this.openmct.time.on('clockChanged', this.compositionIteratorCallback);
+    },
+    addToCompositionMap(id, domainObject) {
+      if (!this.compositionObjectMap.get(id)) {
+        this.compositionObjectMap.set(id, domainObject);
+      }
+    },
+    compositionIterator(callback) {
+      return () => {
+        this.staleObjects = [];
+        for (const [, object] of this.compositionObjectMap) {
+          let domainObject = object;
+          if (isProxy(domainObject)) {
+            domainObject = toRaw(object);
+          }
+          if (callback && typeof callback === 'function') {
+            callback(domainObject);
+          }
+        }
+      };
+    },
+    subscribeToStaleness(domainObjectList, callback) {
+      if (domainObjectList === null || domainObjectList === undefined) {
+        return;
+      }
+      if (!Array.isArray(domainObjectList)) {
+        domainObjectList = [domainObjectList];
+      }
+
+      domainObjectList.forEach((domainObject) => {
+        if (isProxy(domainObject)) {
+          domainObject = toRaw(domainObject);
+        }
+        const id = this.getSubscriptionId(domainObject);
+        this.addToCompositionMap(id, domainObject);
+        this.setupStalenessUtils(domainObject);
+        this.requestStaleness(domainObject, callback);
+        this.setupStalenessSubscription(domainObject, callback);
+      });
+    },
+    triggerUnsubscribeFromStaleness(domainObjectList, callback) {
+      if (domainObjectList === null || domainObjectList === undefined) {
+        return;
+      }
+      if (!Array.isArray(domainObjectList)) {
+        domainObjectList = [domainObjectList];
+      }
+
+      domainObjectList.forEach((domainObject) => {
+        if (isProxy(domainObject)) {
+          domainObject = toRaw(domainObject);
+        }
+
+        const id = this.getSubscriptionId(domainObject);
+        if (!this.stalenessSubscription[id]) {
+          return;
+        }
+        if (this.staleObjects.length !== 0) {
+          const SKIP_CHECK = true;
+          this.handleStalenessResponse(id, { isStale: false }, SKIP_CHECK);
+        }
+        this.teardownStalenessSubscription(domainObject);
+        this.teardownStalenessUtils(domainObject);
+        delete this.stalenessSubscription[id];
+      });
+
+      if (callback && typeof callback === 'function') {
+        callback();
+      }
+    },
+    setupStalenessUtils(domainObject) {
+      const id = this.getSubscriptionId(domainObject);
+      if (this.stalenessSubscription[id]) {
+        return;
+      }
+      this.stalenessSubscription[id] = {};
+      this.stalenessSubscription[id].stalenessUtils = new StalenessUtils(
+        this.openmct,
+        domainObject
+      );
+    },
+    teardownStalenessUtils(domainObject) {
+      const id = this.getSubscriptionId(domainObject);
+      const { stalenessUtils } = this.stalenessSubscription[id];
+      if (stalenessUtils) {
+        stalenessUtils.destroy();
+        delete this.stalenessSubscription[id].stalenessUtils;
+      }
+    },
+    setupStalenessSubscription(domainObject, callback) {
+      const id = this.getSubscriptionId(domainObject);
+      this.stalenessSubscription[id].unsubscribe = this.openmct.telemetry.subscribeToStaleness(
+        domainObject,
+        (stalenessResponse) => {
+          const SKIP_CHECK = false;
+          this.handleStalenessResponse(id, stalenessResponse, SKIP_CHECK, callback);
+        }
+      );
+    },
+    teardownStalenessSubscription(domainObject) {
+      const id = this.getSubscriptionId(domainObject);
+      const { unsubscribe } = this.stalenessSubscription[id];
+      if (unsubscribe) {
+        unsubscribe();
+        delete this.stalenessSubscription[id].unsubscribe;
+      }
+    },
+    resubscribeToStaleness(domainObject, callback, unsubscribeCallback) {
+      const id = this.getSubscriptionId(domainObject);
+      this.stalenessSubscription[id].resubscribe = () => {
+        this.staleObjects = [];
+        this.triggerUnsubscribeFromStaleness(domainObject, unsubscribeCallback);
+        this.setupStalenessSubscription(domainObject, callback);
+      };
+    },
+    async requestStaleness(domainObject, callback) {
+      const id = this.getSubscriptionId(domainObject);
+      const stalenessResponse = await this.openmct.telemetry.isStale(domainObject);
+      if (stalenessResponse !== undefined) {
+        const SKIP_CHECK = false;
+        this.handleStalenessResponse(id, stalenessResponse, SKIP_CHECK, callback);
+      }
+    },
+    handleStalenessResponse(id, stalenessResponse, skipCheck, callback) {
+      if (!id) {
+        id = Object.keys(this.stalenessSubscription)[0];
+      }
+      const shouldUpdateStaleness =
+        this.stalenessSubscription[id].stalenessUtils.shouldUpdateStaleness(stalenessResponse);
+      if (skipCheck || shouldUpdateStaleness) {
+        if (callback && typeof callback === 'function') {
+          callback(stalenessResponse);
+        } else {
+          this.addOrRemoveStaleObject(id, stalenessResponse);
+        }
+      }
+    },
+    addOrRemoveStaleObject(id, stalenessResponse) {
+      const index = this.staleObjects.indexOf(id);
+      if (stalenessResponse.isStale) {
+        if (index === -1) {
+          this.staleObjects.push(id);
+        }
+      } else {
+        if (index !== -1) {
+          this.staleObjects.splice(index, 1);
+        }
+      }
+    }
+  },
+  unmounted() {
+    let compositionObjects = [];
+    for (const [, object] of this.compositionObjectMap) {
+      compositionObjects.push(object);
+    }
+    this.triggerUnsubscribeFromStaleness(compositionObjects);
+
+    if (this.setupClockChanged) {
+      this.openmct.time.off('clockChanged', this.compositionIteratorCallback);
+      this.setupClockChanged = false;
+    }
+  }
+};
diff --git a/src/ui/mixins/toggle-mixin.js b/src/ui/mixins/toggle-mixin.js
index 72ae339b061..ab8b2a70a75 100644
--- a/src/ui/mixins/toggle-mixin.js
+++ b/src/ui/mixins/toggle-mixin.js
@@ -1,31 +1,31 @@
 export default {
-    data() {
-        return {
-            open: false
-        };
-    },
-    methods: {
-        toggle(event) {
-            if (this.open) {
-                if (this.isOpening) {
-                    // Prevent document event handler from closing immediately
-                    // after opening.  Can't use stopPropagation because that
-                    // would break other menus with similar behavior.
-                    this.isOpening = false;
+  data() {
+    return {
+      open: false
+    };
+  },
+  methods: {
+    toggle(event) {
+      if (this.open) {
+        if (this.isOpening) {
+          // Prevent document event handler from closing immediately
+          // after opening.  Can't use stopPropagation because that
+          // would break other menus with similar behavior.
+          this.isOpening = false;
 
-                    return;
-                }
-
-                document.removeEventListener('click', this.toggle);
-                this.open = false;
-            } else {
-                document.addEventListener('click', this.toggle);
-                this.open = true;
-                this.isOpening = true;
-            }
+          return;
         }
-    },
-    destroyed() {
+
         document.removeEventListener('click', this.toggle);
+        this.open = false;
+      } else {
+        document.addEventListener('click', this.toggle);
+        this.open = true;
+        this.isOpening = true;
+      }
     }
+  },
+  unmounted() {
+    document.removeEventListener('click', this.toggle);
+  }
 };
diff --git a/src/ui/preview/Preview.vue b/src/ui/preview/Preview.vue
deleted file mode 100644
index 39e8d4a3c54..00000000000
--- a/src/ui/preview/Preview.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-<template>
-<div class="l-preview-window js-preview-window">
-    <PreviewHeader
-        :current-view="currentView"
-        :action-collection="actionCollection"
-        :domain-object="domainObject"
-        :views="views"
-    />
-    <div class="l-preview-window__object-view">
-        <div ref="objectView"></div>
-    </div>
-</div>
-</template>
-
-<script>
-import PreviewHeader from './preview-header.vue';
-import {STYLE_CONSTANTS} from "@/plugins/condition/utils/constants";
-import StyleRuleManager from "@/plugins/condition/StyleRuleManager";
-
-export default {
-    components: {
-        PreviewHeader
-    },
-    inject: [
-        'openmct',
-        'objectPath'
-    ],
-    data() {
-        let domainObject = this.objectPath[0];
-
-        return {
-            domainObject: domainObject,
-            viewKey: undefined,
-            views: [],
-            currentView: {},
-            actionCollection: undefined
-        };
-    },
-    mounted() {
-        this.views = this.openmct.objectViews.get(this.domainObject, this.objectPath).map((view) => {
-            view.callBack = () => {
-                return this.setView(view);
-            };
-
-            return view;
-        });
-        this.setView(this.views[0]);
-    },
-    beforeDestroy() {
-        if (this.stopListeningStyles) {
-            this.stopListeningStyles();
-        }
-
-        if (this.styleRuleManager) {
-            this.styleRuleManager.destroy();
-            delete this.styleRuleManager;
-        }
-
-        if (this.actionCollection) {
-            this.actionCollection.destroy();
-        }
-    },
-    destroyed() {
-        this.view.destroy();
-    },
-    methods: {
-        clear() {
-            if (this.view) {
-                this.view.destroy();
-                this.$refs.objectView.innerHTML = '';
-            }
-
-            delete this.view;
-            delete this.viewContainer;
-        },
-        setView(view) {
-            if (this.viewKey === view.key) {
-                return;
-            }
-
-            this.clear();
-            this.viewKey = view.key;
-            this.currentView = view;
-            this.viewContainer = document.createElement('div');
-            this.viewContainer.classList.add('l-angular-ov-wrapper');
-            this.$refs.objectView.append(this.viewContainer);
-            this.view = this.currentView.view(this.domainObject, this.objectPath);
-
-            this.getActionsCollection();
-            this.view.show(this.viewContainer, false);
-            this.initObjectStyles();
-        },
-        getActionsCollection() {
-            if (this.actionCollection) {
-                this.actionCollection.destroy();
-            }
-
-            this.actionCollection = this.openmct.actions.getActionsCollection(this.objectPath, this.view);
-        },
-        initObjectStyles() {
-            if (!this.styleRuleManager) {
-                this.styleRuleManager = new StyleRuleManager((this.domainObject.configuration && this.domainObject.configuration.objectStyles), this.openmct, this.updateStyle.bind(this));
-            } else {
-                this.styleRuleManager.updateObjectStyleConfig(this.domainObject.configuration && this.domainObject.configuration.objectStyles);
-            }
-
-            if (this.stopListeningStyles) {
-                this.stopListeningStyles();
-            }
-
-            this.stopListeningStyles = this.openmct.objects.observe(this.domainObject, 'configuration.objectStyles', (newObjectStyle) => {
-                //Updating styles in the inspector view will trigger this so that the changes are reflected immediately
-                this.styleRuleManager.updateObjectStyleConfig(newObjectStyle);
-            });
-        },
-        updateStyle(styleObj) {
-            if (!styleObj) {
-                return;
-            }
-
-            let keys = Object.keys(styleObj);
-            let firstChild = this.$refs.objectView.querySelector(':first-child');
-
-            keys.forEach(key => {
-                if (firstChild) {
-                    if ((typeof styleObj[key] === 'string') && (styleObj[key].indexOf('__no_value') > -1)) {
-                        if (firstChild.style[key]) {
-                            firstChild.style[key] = '';
-                        }
-                    } else {
-                        if (!styleObj.isStyleInvisible && firstChild.classList.contains(STYLE_CONSTANTS.isStyleInvisible)) {
-                            firstChild.classList.remove(STYLE_CONSTANTS.isStyleInvisible);
-                        } else if (styleObj.isStyleInvisible && !firstChild.classList.contains(styleObj.isStyleInvisible)) {
-                            firstChild.classList.add(styleObj.isStyleInvisible);
-                        }
-
-                        firstChild.style[key] = styleObj[key];
-                    }
-                }
-            });
-        }
-    }
-};
-</script>
diff --git a/src/ui/preview/PreviewAction.js b/src/ui/preview/PreviewAction.js
index 6143527c5c5..35194aa827c 100644
--- a/src/ui/preview/PreviewAction.js
+++ b/src/ui/preview/PreviewAction.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,81 +19,94 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import Preview from './Preview.vue';
-import Vue from 'vue';
+import EventEmitter from 'EventEmitter';
+import mount from 'utils/mount';
 
-export default class PreviewAction {
-    constructor(openmct) {
-        /**
-         * Metadata
-         */
-        this.name = 'View';
-        this.key = 'preview';
-        this.description = 'View in large dialog';
-        this.cssClass = 'icon-items-expand';
-        this.group = 'windowing';
-        this.priority = 1;
+import PreviewContainer from './PreviewContainer.vue';
 
-        /**
-         * Dependencies
-         */
-        this._openmct = openmct;
+export default class PreviewAction extends EventEmitter {
+  constructor(openmct) {
+    super();
+    /**
+     * Metadata
+     */
+    this.name = 'View';
+    this.key = 'preview';
+    this.description = 'View in large dialog';
+    this.cssClass = 'icon-items-expand';
+    this.group = 'windowing';
+    this.priority = 1;
 
-        if (PreviewAction.isVisible === undefined) {
-            PreviewAction.isVisible = false;
-        }
-    }
-
-    invoke(objectPath) {
-        let preview = new Vue({
-            components: {
-                Preview
-            },
-            provide: {
-                openmct: this._openmct,
-                objectPath: objectPath
-            },
-            template: '<Preview></Preview>'
-        });
-        preview.$mount();
+    /**
+     * Dependencies
+     */
+    this._openmct = openmct;
 
-        let overlay = this._openmct.overlays.overlay({
-            element: preview.$el,
-            size: 'large',
-            buttons: [
-                {
-                    label: 'Done',
-                    callback: () => overlay.dismiss()
-                }
-            ],
-            onDestroy: () => {
-                PreviewAction.isVisible = false;
-                preview.$destroy();
-            }
-        });
-
-        PreviewAction.isVisible = true;
+    if (PreviewAction.isVisible === undefined) {
+      PreviewAction.isVisible = false;
     }
+  }
 
-    appliesTo(objectPath, view = {}) {
-        const parentElement = view.parentElement;
-        const isObjectView = parentElement && parentElement.classList.contains('js-object-view');
+  invoke(objectPath, viewOptions) {
+    const { vNode, destroy } = mount(
+      {
+        components: {
+          PreviewContainer
+        },
+        provide: {
+          openmct: this._openmct,
+          objectPath: objectPath
+        },
+        data() {
+          return {
+            viewOptions
+          };
+        },
+        template: '<preview-container :view-options="viewOptions"></preview-container>'
+      },
+      {
+        app: this._openmct.app
+      }
+    );
 
-        return !PreviewAction.isVisible
-            && !this._isNavigatedObject(objectPath)
-            && !isObjectView;
-    }
+    const overlay = this._openmct.overlays.overlay({
+      element: vNode.el,
+      size: 'large',
+      autoHide: false,
+      buttons: [
+        {
+          label: 'Done',
+          callback: () => {
+            overlay.dismiss();
+          }
+        }
+      ],
+      onDestroy: () => {
+        PreviewAction.isVisible = false;
+        destroy();
+        this.emit('isVisible', false);
+        overlay.dismiss();
+      }
+    });
 
-    _isNavigatedObject(objectPath) {
-        let targetObject = objectPath[0];
-        let navigatedObject = this._openmct.router.path[0];
+    PreviewAction.isVisible = true;
+    this.emit('isVisible', true);
+  }
 
-        return this._openmct.objects.areIdsEqual(targetObject.identifier, navigatedObject.identifier);
-    }
+  appliesTo(objectPath, view = {}) {
+    const parentElement = view.parentElement;
+    const isObjectView = parentElement && parentElement.classList.contains('js-object-view');
 
-    _preventPreview(objectPath) {
-        const noPreviewTypes = ['folder'];
+    return (
+      !PreviewAction.isVisible &&
+      !this._openmct.router.isNavigatedObject(objectPath) &&
+      !isObjectView
+    );
+  }
 
-        return noPreviewTypes.includes(objectPath[0].type);
-    }
+  _preventPreview(objectPath) {
+    const noPreviewTypes = ['folder'];
+
+    return noPreviewTypes.includes(objectPath[0].type);
+  }
 }
diff --git a/src/ui/preview/PreviewContainer.vue b/src/ui/preview/PreviewContainer.vue
new file mode 100644
index 00000000000..f37cbe7b148
--- /dev/null
+++ b/src/ui/preview/PreviewContainer.vue
@@ -0,0 +1,239 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div role="dialog" aria-label="Preview Container" class="l-preview-window js-preview-window">
+    <PreviewHeader
+      ref="previewHeader"
+      :current-view="currentViewProvider"
+      :action-collection="actionCollection"
+      :domain-object="domainObject"
+      :views="viewProviders"
+    />
+    <div class="l-preview-window__object-view js-notebook-snapshot-item">
+      <div ref="objectView"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { nextTick } from 'vue';
+
+import StyleRuleManager from '@/plugins/condition/StyleRuleManager';
+import { STYLE_CONSTANTS } from '@/plugins/condition/utils/constants';
+
+import PreviewHeader from './PreviewHeader.vue';
+
+export default {
+  components: {
+    PreviewHeader
+  },
+  inject: ['openmct', 'objectPath'],
+  props: {
+    viewOptions: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    existingView: {
+      type: Object,
+      default() {
+        return undefined;
+      }
+    }
+  },
+  data() {
+    let domainObject = this.objectPath[0];
+
+    return {
+      domainObject: domainObject,
+      viewKey: undefined,
+      viewProviders: [],
+      currentViewProvider: {},
+      actionCollection: undefined,
+      existingViewIndex: 0
+    };
+  },
+  mounted() {
+    this.viewProviders = this.openmct.objectViews.get(this.domainObject, this.objectPath);
+    this.viewProviders.forEach((provider, index) => {
+      provider.onItemClicked = () => {
+        if (this.existingView && provider.key === this.existingView.key) {
+          this.existingViewIndex = index;
+        }
+
+        this.setView(provider);
+      };
+    });
+
+    this.setView(this.viewProviders[0]);
+  },
+  beforeUnmount() {
+    if (this.stopListeningStyles) {
+      this.stopListeningStyles();
+    }
+
+    if (this.styleRuleManager) {
+      this.styleRuleManager.destroy();
+      delete this.styleRuleManager;
+    }
+
+    if (this.actionCollection) {
+      this.actionCollection.destroy();
+    }
+  },
+  unmounted() {
+    if (!this.existingView) {
+      this.view.destroy();
+    } else if (this.existingViewElement) {
+      // if the existing view element is populated, it's the currently viewed view
+      // in preview and we need to add it back to the parent.
+      this.addExistingViewBackToParent();
+    }
+  },
+  methods: {
+    clear() {
+      if (this.view) {
+        if (this.view !== this.existingView) {
+          this.view.destroy();
+        } else {
+          this.addExistingViewBackToParent();
+        }
+
+        this.$refs.objectView.innerHTML = '';
+        delete this.view;
+        delete this.viewContainer;
+      }
+    },
+    setView(viewProvider) {
+      if (this.viewKey === viewProvider.key) {
+        return;
+      }
+
+      const isExistingView = viewProvider.key === this.existingView?.key;
+
+      this.clear();
+
+      this.viewKey = viewProvider.key;
+      this.initializeViewContainer();
+
+      if (isExistingView) {
+        this.view = this.existingView;
+        this.existingViewElement = this.existingView.parentElement.firstElementChild;
+        this.currentViewProvider = this.viewProviders[this.existingViewIndex];
+      } else {
+        this.currentViewProvider = viewProvider;
+        this.view = this.currentViewProvider.view(this.domainObject, this.objectPath);
+      }
+
+      if (isExistingView) {
+        this.viewContainer.appendChild(this.existingViewElement);
+      } else {
+        // in preview mode, we're always visible
+        this.viewOptions.renderWhenVisible = (func) => {
+          window.requestAnimationFrame(func);
+          return true;
+        };
+        this.view.show(this.viewContainer, false, this.viewOptions);
+      }
+
+      this.initObjectStyles();
+
+      nextTick(() => {
+        this.getActionsCollection(this.view);
+      });
+    },
+    addExistingViewBackToParent() {
+      this.existingView.parentElement.appendChild(this.existingViewElement);
+      delete this.existingViewElement;
+    },
+    initializeViewContainer() {
+      this.viewContainer = this.$refs.objectView;
+    },
+    getActionsCollection(view) {
+      if (this.actionCollection) {
+        this.actionCollection.destroy();
+      }
+
+      this.actionCollection = this.openmct.actions.getActionsCollection(this.objectPath, view);
+    },
+    initObjectStyles() {
+      if (!this.styleRuleManager) {
+        this.styleRuleManager = new StyleRuleManager(
+          this.domainObject.configuration && this.domainObject.configuration.objectStyles,
+          this.openmct,
+          this.updateStyle.bind(this)
+        );
+      } else {
+        this.styleRuleManager.updateObjectStyleConfig(
+          this.domainObject.configuration && this.domainObject.configuration.objectStyles
+        );
+      }
+
+      if (this.stopListeningStyles) {
+        this.stopListeningStyles();
+      }
+
+      this.stopListeningStyles = this.openmct.objects.observe(
+        this.domainObject,
+        'configuration.objectStyles',
+        (newObjectStyle) => {
+          //Updating styles in the inspector view will trigger this so that the changes are reflected immediately
+          this.styleRuleManager.updateObjectStyleConfig(newObjectStyle);
+        }
+      );
+    },
+    updateStyle(styleObj) {
+      if (!styleObj) {
+        return;
+      }
+
+      let keys = Object.keys(styleObj);
+      let firstChild = this.$refs.objectView.querySelector(':first-child');
+
+      keys.forEach((key) => {
+        if (firstChild) {
+          if (typeof styleObj[key] === 'string' && styleObj[key].indexOf('__no_value') > -1) {
+            if (firstChild.style[key]) {
+              firstChild.style[key] = '';
+            }
+          } else {
+            if (
+              !styleObj.isStyleInvisible &&
+              firstChild.classList.contains(STYLE_CONSTANTS.isStyleInvisible)
+            ) {
+              firstChild.classList.remove(STYLE_CONSTANTS.isStyleInvisible);
+            } else if (
+              styleObj.isStyleInvisible &&
+              !firstChild.classList.contains(styleObj.isStyleInvisible)
+            ) {
+              firstChild.classList.add(styleObj.isStyleInvisible);
+            }
+
+            firstChild.style[key] = styleObj[key];
+          }
+        }
+      });
+    }
+  }
+};
+</script>
diff --git a/src/ui/preview/PreviewHeader.vue b/src/ui/preview/PreviewHeader.vue
new file mode 100644
index 00000000000..04f1e00c7c0
--- /dev/null
+++ b/src/ui/preview/PreviewHeader.vue
@@ -0,0 +1,178 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="c-preview-header l-browse-bar">
+    <div class="l-browse-bar__start">
+      <div class="l-browse-bar__object-name--w c-object-label">
+        <div v-if="type" class="c-object-label__type-icon" :class="type.definition.cssClass"></div>
+        <span class="l-browse-bar__object-name c-object-label__name">
+          {{ domainObject.name }}
+        </span>
+      </div>
+    </div>
+    <div class="l-browse-bar__end">
+      <view-switcher :v-if="!hideViewSwitcher" :views="views" :current-view="currentView" />
+      <NotebookMenuSwitcher
+        :domain-object="domainObject"
+        :object-path="objectPath"
+        :is-preview="true"
+        :current-view="currentView"
+        class="c-notebook-snapshot-menubutton"
+      />
+      <div class="l-browse-bar__actions">
+        <button
+          v-for="(item, index) in statusBarItems"
+          :key="index"
+          class="c-button"
+          :class="item.cssClass"
+          @click="item.onItemClicked"
+        ></button>
+        <button
+          class="l-browse-bar__actions c-icon-button icon-3-dots"
+          title="More actions"
+          aria-label="More actions"
+          @click.prevent.stop="showMenuItems($event)"
+        ></button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import NotebookMenuSwitcher from '@/plugins/notebook/components/NotebookMenuSwitcher.vue';
+
+import ViewSwitcher from '../layout/ViewSwitcher.vue';
+
+const HIDDEN_ACTIONS = ['remove', 'move', 'preview', 'large.view'];
+
+export default {
+  components: {
+    NotebookMenuSwitcher,
+    ViewSwitcher
+  },
+  inject: ['openmct', 'objectPath'],
+  props: {
+    currentView: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    domainObject: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    hideViewSwitcher: {
+      type: Boolean,
+      default: () => {
+        return false;
+      }
+    },
+    views: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    actionCollection: {
+      type: Object,
+      default: () => {
+        return undefined;
+      }
+    }
+  },
+  emits: ['set-view'],
+  data() {
+    return {
+      type: this.openmct.types.get(this.domainObject.type),
+      statusBarItems: [],
+      menuActionItems: []
+    };
+  },
+  watch: {
+    actionCollection(actionCollection) {
+      if (this.actionCollection) {
+        this.unlistenToActionCollection();
+      }
+
+      this.actionCollection.on('update', this.updateActionItems);
+      this.updateActionItems(this.actionCollection.getActionsObject());
+    }
+  },
+  mounted() {
+    if (this.actionCollection) {
+      this.actionCollection.on('update', this.updateActionItems);
+      this.updateActionItems(this.actionCollection.getActionsObject());
+    }
+  },
+  unmounted() {
+    if (this.actionCollection) {
+      this.actionCollection.off('update', this.updateActionItems);
+    }
+  },
+  methods: {
+    filterHiddenItems(menuItems) {
+      const items = [];
+      menuItems.forEach((menuItem) => {
+        const isGroup = Array.isArray(menuItem);
+        if (isGroup) {
+          items.push(this.filterHiddenItems(menuItem));
+        } else if (!HIDDEN_ACTIONS.includes(menuItem.key)) {
+          items.push(menuItem);
+        }
+      });
+
+      return items;
+    },
+    setView(view) {
+      this.$emit('set-view', view);
+    },
+    unlistenToActionCollection() {
+      this.actionCollection.off('update', this.updateActionItems);
+      delete this.actionCollection;
+    },
+    updateActionItems() {
+      const statusBarItems = this.actionCollection.getStatusBarActions();
+      const menuItems = this.openmct.menus.actionsToMenuItems(
+        statusBarItems,
+        this.actionCollection.objectPath,
+        this.actionCollection.view
+      );
+      this.statusBarItems = this.filterHiddenItems(menuItems);
+      this.menuActionItems = this.actionCollection.getVisibleActions();
+    },
+    showMenuItems(event) {
+      let sortedActions = this.openmct.actions._groupAndSortActions(this.menuActionItems);
+      const menuItems = this.openmct.menus.actionsToMenuItems(
+        sortedActions,
+        this.actionCollection.objectPath,
+        this.actionCollection.view
+      );
+
+      const visibleMenuItems = this.filterHiddenItems(menuItems);
+      this.openmct.menus.showMenu(event.x, event.y, visibleMenuItems);
+    }
+  }
+};
+</script>
diff --git a/src/ui/preview/ViewHistoricalDataAction.js b/src/ui/preview/ViewHistoricalDataAction.js
index e5c207dfc3f..05c4480baf7 100644
--- a/src/ui/preview/ViewHistoricalDataAction.js
+++ b/src/ui/preview/ViewHistoricalDataAction.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,25 +20,24 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import PreviewAction from './PreviewAction';
+import PreviewAction from './PreviewAction.js';
 
 export default class ViewHistoricalDataAction extends PreviewAction {
-    constructor(openmct) {
-        super(openmct);
+  constructor(openmct) {
+    super(openmct);
 
-        this.name = 'View Historical Data';
-        this.key = 'viewHistoricalData';
-        this.description = 'View Historical Data in a Table or Plot';
-        this.cssClass = 'icon-eye-open';
-        this.hideInDefaultMenu = true;
-    }
+    this.name = 'View Historical Data';
+    this.key = 'viewHistoricalData';
+    this.description = 'View Historical Data in a Table or Plot';
+    this.cssClass = 'icon-eye-open';
+    this.hideInDefaultMenu = true;
+  }
 
-    appliesTo(objectPath, view = {}) {
-        let viewContext = view.getViewContext && view.getViewContext();
+  appliesTo(objectPath, view = {}) {
+    let viewContext = view.getViewContext && view.getViewContext();
 
-        return objectPath.length
-            && viewContext
-            && viewContext.row
-            && viewContext.row.viewHistoricalData;
-    }
+    return (
+      objectPath.length && viewContext && viewContext.row && viewContext.row.viewHistoricalData
+    );
+  }
 }
diff --git a/src/ui/preview/plugin.js b/src/ui/preview/plugin.js
index d3f8e388dc1..ae7291ba3fc 100644
--- a/src/ui/preview/plugin.js
+++ b/src/ui/preview/plugin.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,11 +20,11 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 import PreviewAction from './PreviewAction.js';
-import ViewHistoricalDataAction from './ViewHistoricalDataAction';
+import ViewHistoricalDataAction from './ViewHistoricalDataAction.js';
 
 export default function () {
-    return function (openmct) {
-        openmct.actions.register(new PreviewAction(openmct));
-        openmct.actions.register(new ViewHistoricalDataAction(openmct));
-    };
+  return function (openmct) {
+    openmct.actions.register(new PreviewAction(openmct));
+    openmct.actions.register(new ViewHistoricalDataAction(openmct));
+  };
 }
diff --git a/src/ui/preview/preview-header.vue b/src/ui/preview/preview-header.vue
deleted file mode 100644
index 57856f2fd53..00000000000
--- a/src/ui/preview/preview-header.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-<div class="c-preview-header l-browse-bar">
-    <div class="l-browse-bar__start">
-        <div
-            class="l-browse-bar__object-name--w c-object-label"
-        >
-            <div class="c-object-label__type-icon"
-                 :class="type.definition.cssClass"
-            ></div>
-            <span class="l-browse-bar__object-name c-object-label__name">
-                {{ domainObject.name }}
-            </span>
-        </div>
-    </div>
-    <div class="l-browse-bar__end">
-        <view-switcher
-            :v-if="!hideViewSwitcher"
-            :views="views"
-            :current-view="currentView"
-        />
-        <div class="l-browse-bar__actions">
-            <button
-                v-for="(item, index) in statusBarItems"
-                :key="index"
-                class="c-button"
-                :class="item.cssClass"
-                @click="item.onItemClicked"
-            >
-            </button>
-            <button
-                class="l-browse-bar__actions c-icon-button icon-3-dots"
-                title="More options"
-                @click.prevent.stop="showMenuItems($event)"
-            ></button>
-        </div>
-    </div>
-</div>
-</template>
-
-<script>
-import ViewSwitcher from '../../ui/layout/ViewSwitcher.vue';
-const HIDDEN_ACTIONS = [
-    'remove',
-    'move',
-    'preview',
-    'large.view'
-];
-
-export default {
-    components: {
-        ViewSwitcher
-    },
-    inject: [
-        'openmct'
-    ],
-    props: {
-        currentView: {
-            type: Object,
-            default: () => {
-                return {};
-            }
-        },
-        domainObject: {
-            type: Object,
-            default: () => {
-                return {};
-            }
-        },
-        hideViewSwitcher: {
-            type: Boolean,
-            default: () => {
-                return false;
-            }
-        },
-        views: {
-            type: Array,
-            default: () => {
-                return [];
-            }
-        },
-        actionCollection: {
-            type: Object,
-            default: () => {
-                return undefined;
-            }
-        }
-    },
-    data() {
-        return {
-            type: this.openmct.types.get(this.domainObject.type),
-            statusBarItems: [],
-            menuActionItems: []
-        };
-    },
-    watch: {
-        actionCollection(actionCollection) {
-            if (this.actionCollection) {
-                this.unlistenToActionCollection();
-            }
-
-            this.actionCollection.on('update', this.updateActionItems);
-            this.updateActionItems(this.actionCollection.getActionsObject());
-        }
-    },
-    mounted() {
-        if (this.actionCollection) {
-            this.actionCollection.on('update', this.updateActionItems);
-            this.updateActionItems(this.actionCollection.getActionsObject());
-        }
-    },
-    destroyed() {
-        if (this.actionCollection) {
-            this.actionCollection.off('update', this.updateActionItems);
-        }
-    },
-    methods: {
-        filterHiddenItems(menuItems) {
-            const items = [];
-            menuItems.forEach(menuItem => {
-                const isGroup = Array.isArray(menuItem);
-                if (isGroup) {
-                    items.push(this.filterHiddenItems(menuItem));
-                } else if (!HIDDEN_ACTIONS.includes(menuItem.key)) {
-                    items.push(menuItem);
-                }
-            });
-
-            return items;
-        },
-        setView(view) {
-            this.$emit('setView', view);
-        },
-        unlistenToActionCollection() {
-            this.actionCollection.off('update', this.updateActionItems);
-            delete this.actionCollection;
-        },
-        updateActionItems() {
-            const statusBarItems = this.actionCollection.getStatusBarActions();
-            const menuItems = this.openmct.menus.actionsToMenuItems(statusBarItems, this.actionCollection.objectPath, this.actionCollection.view);
-            this.statusBarItems = this.filterHiddenItems(menuItems);
-            this.menuActionItems = this.actionCollection.getVisibleActions();
-        },
-        showMenuItems(event) {
-            let sortedActions = this.openmct.actions._groupAndSortActions(this.menuActionItems);
-            const menuItems = this.openmct.menus.actionsToMenuItems(sortedActions, this.actionCollection.objectPath, this.actionCollection.view);
-            const visibleMenuItems = this.filterHiddenItems(menuItems);
-            this.openmct.menus.showMenu(event.x, event.y, visibleMenuItems);
-        }
-    }
-};
-</script>
diff --git a/src/ui/preview/preview.scss b/src/ui/preview/preview.scss
index 418c19175bb..7d5082f9cd9 100644
--- a/src/ui/preview/preview.scss
+++ b/src/ui/preview/preview.scss
@@ -1,25 +1,28 @@
 .l-preview-window {
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    top: 0; right: 0; bottom: 0; left: 0;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
 
-    > * + * {
-        margin-top: $interiorMargin;
-    }
+  > * + * {
+    margin-top: $interiorMargin;
+  }
 
-    &__object-name {
-        flex: 0 0 auto;
-    }
+  &__object-name {
+    flex: 0 0 auto;
+  }
 
-    &__object-view {
-        flex: 1 1 auto;
-        height: 100%; // Chrome 73
-        overflow: auto;
+  &__object-view {
+    flex: 1 1 auto;
+    height: 100%; // Chrome 73
+    overflow: auto;
 
-        > div:not([class]) {
-            // Target an immediate child div without a class and make it display: contents
-            display: contents;
-        }
+    > div:not([class]) {
+      // Target an immediate child div without a class and make it display: contents
+      display: contents;
     }
+  }
 }
diff --git a/src/ui/registries/InspectorViewRegistry.js b/src/ui/registries/InspectorViewRegistry.js
index 7d53a81d41c..9ca81032ca0 100644
--- a/src/ui/registries/InspectorViewRegistry.js
+++ b/src/ui/registries/InspectorViewRegistry.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,130 +20,143 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([], function () {
-
-    /**
-     * A InspectorViewRegistry maintains the definitions for views
-     * that may occur in the inspector.
-     *
-     * @interface InspectorViewRegistry
-     * @memberof module:openmct
-     */
-    function InspectorViewRegistry() {
-        this.providers = {};
+const DEFAULT_VIEW_PRIORITY = 0;
+
+/**
+ * A InspectorViewRegistry maintains the definitions for views
+ * that may occur in the inspector.
+ *
+ * @interface InspectorViewRegistry
+ * @memberof module:openmct
+ */
+export default class InspectorViewRegistry {
+  constructor() {
+    this.providers = {};
+  }
+
+  /**
+   *
+   * @param {object} selection the object to be viewed
+   * @returns {module:openmct.InspectorViewRegistry[]} any providers
+   *          which can provide views of this object
+   * @private for platform-internal use
+   */
+  get(selection) {
+    function byPriority(providerA, providerB) {
+      const priorityA = providerA.priority?.() ?? DEFAULT_VIEW_PRIORITY;
+      const priorityB = providerB.priority?.() ?? DEFAULT_VIEW_PRIORITY;
+
+      return priorityB - priorityA;
+    }
+
+    return this.#getAllProviders()
+      .filter((provider) => provider.canView(selection))
+      .map((provider) => {
+        const view = provider.view(selection);
+        view.key = provider.key;
+        view.name = provider.name;
+        view.glyph = provider.glyph;
+
+        return view;
+      })
+      .sort(byPriority);
+  }
+
+  /**
+   * Registers a new type of view.
+   *
+   * @param {module:openmct.InspectorViewRegistry} provider the provider for this view
+   * @method addProvider
+   * @memberof module:openmct.InspectorViewRegistry#
+   */
+  addProvider(provider) {
+    const key = provider.key;
+    const name = provider.name;
+
+    if (key === undefined) {
+      throw "View providers must have a unique 'key' property defined";
+    }
+
+    if (name === undefined) {
+      throw "View providers must have a 'name' property defined";
     }
 
-    /**
-     *
-     * @param {object} selection the object to be viewed
-     * @returns {module:openmct.InspectorViewRegistry[]} any providers
-     *          which can provide views of this object
-     * @private for platform-internal use
-     */
-    InspectorViewRegistry.prototype.get = function (selection) {
-        return this.getAllProviders().filter(function (provider) {
-            return provider.canView(selection);
-        }).map(provider => provider.view(selection));
-    };
-
-    /**
-     * @private
-     */
-    InspectorViewRegistry.prototype.getAllProviders = function () {
-        return Object.values(this.providers);
-    };
-
-    /**
-     * Registers a new type of view.
-     *
-     * @param {module:openmct.InspectorViewRegistry} provider the provider for this view
-     * @method addProvider
-     * @memberof module:openmct.InspectorViewRegistry#
-     */
-    InspectorViewRegistry.prototype.addProvider = function (provider) {
-        const key = provider.key;
-
-        if (key === undefined) {
-            throw "View providers must have a unique 'key' property defined";
-        }
-
-        if (this.providers[key] !== undefined) {
-            console.warn("Provider already defined for key '%s'. Provider keys must be unique.", key);
-        }
-
-        this.providers[key] = provider;
-    };
-
-    /**
-     * @private
-     */
-    InspectorViewRegistry.prototype.getByProviderKey = function (key) {
-        return this.providers[key];
-    };
-
-    /**
-     * A View is used to provide displayable content, and to react to
-     * associated life cycle events.
-     *
-     * @name View
-     * @interface
-     * @memberof module:openmct
-     */
-
-    /**
-     * Populate the supplied DOM element with the contents of this view.
-     *
-     * View implementations should use this method to attach any
-     * listeners or acquire other resources that are necessary to keep
-     * the contents of this view up-to-date.
-     *
-     * @param {HTMLElement} container the DOM element to populate
-     * @method show
-     * @memberof module:openmct.View#
-     */
-
-    /**
-     * Release any resources associated with this view.
-     *
-     * View implementations should use this method to detach any
-     * listeners or release other resources that are no longer necessary
-     * once a view is no longer used.
-     *
-     * @method destroy
-     * @memberof module:openmct.View#
-     */
-
-    /**
-     * Exposes types of views in inspector.
-     *
-     * @interface InspectorViewProvider
-     * @property {string} key a unique identifier for this view
-     * @property {string} name the human-readable name of this view
-     * @property {string} [description] a longer-form description (typically
-     *           a single sentence or short paragraph) of this kind of view
-     * @property {string} [cssClass] the CSS class to apply to labels for this
-     *           view (to add icons, for instance)
-     * @memberof module:openmct
-     */
-
-    /**
-     * Checks if this provider can supply views for a selection.
-     *
-     * @method canView
-     * @memberof module:openmct.InspectorViewProvider#
-     * @param {module:openmct.selection} selection
-     * @returns {boolean} 'true' if the view applies to the provided selection,
-     *          otherwise 'false'.
-     */
-
-    /**
-     * Provides a view of the selection object in the inspector.
-     *
-     * @method view
-     * @memberof module:openmct.InspectorViewProvider#
-     * @param {module:openmct.selection} selection the selection object
-     * @returns {module:openmct.View} a view of this selection
-     */
-
-    return InspectorViewRegistry;
-});
+    if (this.providers[key] !== undefined) {
+      console.warn(`Provider already defined for key '${key}'. Provider keys must be unique.`);
+    }
+
+    this.providers[key] = provider;
+  }
+
+  getByProviderKey(key) {
+    return this.providers[key];
+  }
+
+  #getAllProviders() {
+    return Object.values(this.providers);
+  }
+}
+
+/**
+ * A View is used to provide displayable content, and to react to
+ * associated life cycle events.
+ *
+ * @name View
+ * @interface
+ * @memberof module:openmct
+ */
+
+/**
+ * Populate the supplied DOM element with the contents of this view.
+ *
+ * View implementations should use this method to attach any
+ * listeners or acquire other resources that are necessary to keep
+ * the contents of this view up-to-date.
+ *
+ * @param {HTMLElement} container the DOM element to populate
+ * @method show
+ * @memberof module:openmct.View#
+ */
+
+/**
+ * Release any resources associated with this view.
+ *
+ * View implementations should use this method to detach any
+ * listeners or release other resources that are no longer necessary
+ * once a view is no longer used.
+ *
+ * @method destroy
+ * @memberof module:openmct.View#
+ */
+
+/**
+ * Exposes types of views in inspector.
+ *
+ * @interface InspectorViewProvider
+ * @property {string} key a unique identifier for this view
+ * @property {string} name the human-readable name of this view
+ * @property {string} [description] a longer-form description (typically
+ *           a single sentence or short paragraph) of this kind of view
+ * @property {string} [cssClass] the CSS class to apply to labels for this
+ *           view (to add icons, for instance)
+ * @memberof module:openmct
+ */
+
+/**
+ * Checks if this provider can supply views for a selection.
+ *
+ * @method canView
+ * @memberof module:openmct.InspectorViewProvider#
+ * @param {module:openmct.selection} selection
+ * @returns {boolean} 'true' if the view applies to the provided selection,
+ *          otherwise 'false'.
+ */
+
+/**
+ * Provides a view of the selection object in the inspector.
+ *
+ * @method view
+ * @memberof module:openmct.InspectorViewProvider#
+ * @param {module:openmct.selection} selection the selection object
+ * @returns {module:openmct.View} a view of this selection
+ */
diff --git a/src/ui/registries/ToolbarRegistry.js b/src/ui/registries/ToolbarRegistry.js
index b7195f451da..6c47c85ae6c 100644
--- a/src/ui/registries/ToolbarRegistry.js
+++ b/src/ui/registries/ToolbarRegistry.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,103 +20,98 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([], function () {
-
-    /**
-     * A ToolbarRegistry maintains the definitions for toolbars.
-     *
-     * @interface ToolbarRegistry
-     * @memberof module:openmct
-     */
-    function ToolbarRegistry() {
-        this.providers = {};
-    }
-
-    /**
-     * Gets toolbar controls from providers which can provide a toolbar for this selection.
-     *
-     * @param {object} selection the selection object
-     * @returns {Object[]} an array of objects defining controls for the toolbar
-     * @private for platform-internal use
-     */
-    ToolbarRegistry.prototype.get = function (selection) {
-        const providers = this.getAllProviders().filter(function (provider) {
-            return provider.forSelection(selection);
-        });
-
-        const structure = [];
-
-        providers.forEach(provider => {
-            provider.toolbar(selection).forEach(item => structure.push(item));
-        });
-
-        return structure;
-    };
-
-    /**
-     * @private
-     */
-    ToolbarRegistry.prototype.getAllProviders = function () {
-        return Object.values(this.providers);
-    };
-
-    /**
-     * @private
-     */
-    ToolbarRegistry.prototype.getByProviderKey = function (key) {
-        return this.providers[key];
-    };
-
-    /**
-     * Registers a new type of toolbar.
-     *
-     * @param {module:openmct.ToolbarRegistry} provider the provider for this toolbar
-     * @method addProvider
-     * @memberof module:openmct.ToolbarRegistry#
-     */
-    ToolbarRegistry.prototype.addProvider = function (provider) {
-        const key = provider.key;
-
-        if (key === undefined) {
-            throw "Toolbar providers must have a unique 'key' property defined.";
-        }
-
-        if (this.providers[key] !== undefined) {
-            console.warn("Provider already defined for key '%s'. Provider keys must be unique.", key);
-        }
-
-        this.providers[key] = provider;
-    };
-
-    /**
-     * Exposes types of toolbars in Open MCT.
-     *
-     * @interface ToolbarProvider
-     * @property {string} key a unique identifier for this toolbar
-     * @property {string} name the human-readable name of this toolbar
-     * @property {string} [description] a longer-form description (typically
-     *           a single sentence or short paragraph) of this kind of toolbar
-     * @memberof module:openmct
-     */
-
-    /**
-     * Checks if this provider can supply toolbar for a selection.
-     *
-     * @method forSelection
-     * @memberof module:openmct.ToolbarProvider#
-     * @param {module:openmct.selection} selection
-     * @returns {boolean} 'true' if the toolbar applies to the provided selection,
-     *          otherwise 'false'.
-     */
-
-    /**
-     * Provides controls that comprise a toolbar.
-     *
-     * @method toolbar
-     * @memberof module:openmct.ToolbarProvider#
-     * @param {object} selection the selection object
-     * @returns {Object[]} an array of objects defining controls for the toolbar.
-     */
-
-    return ToolbarRegistry;
-});
+/**
+ * A ToolbarRegistry maintains the definitions for toolbars.
+ *
+ * @interface ToolbarRegistry
+ * @memberof module:openmct
+ */
+export default function ToolbarRegistry() {
+  this.providers = {};
+}
+
+/**
+ * Gets toolbar controls from providers which can provide a toolbar for this selection.
+ *
+ * @param {object} selection the selection object
+ * @returns {Object[]} an array of objects defining controls for the toolbar
+ * @private for platform-internal use
+ */
+ToolbarRegistry.prototype.get = function (selection) {
+  const providers = this.getAllProviders().filter(function (provider) {
+    return provider.forSelection(selection);
+  });
+
+  const structure = [];
+
+  providers.forEach((provider) => {
+    provider.toolbar(selection).forEach((item) => structure.push(item));
+  });
+
+  return structure;
+};
+
+/**
+ * @private
+ */
+ToolbarRegistry.prototype.getAllProviders = function () {
+  return Object.values(this.providers);
+};
+
+/**
+ * @private
+ */
+ToolbarRegistry.prototype.getByProviderKey = function (key) {
+  return this.providers[key];
+};
+
+/**
+ * Registers a new type of toolbar.
+ *
+ * @param {module:openmct.ToolbarRegistry} provider the provider for this toolbar
+ * @method addProvider
+ * @memberof module:openmct.ToolbarRegistry#
+ */
+ToolbarRegistry.prototype.addProvider = function (provider) {
+  const key = provider.key;
+
+  if (key === undefined) {
+    throw "Toolbar providers must have a unique 'key' property defined.";
+  }
+
+  if (this.providers[key] !== undefined) {
+    console.warn("Provider already defined for key '%s'. Provider keys must be unique.", key);
+  }
+
+  this.providers[key] = provider;
+};
+
+/**
+ * Exposes types of toolbars in Open MCT.
+ *
+ * @interface ToolbarProvider
+ * @property {string} key a unique identifier for this toolbar
+ * @property {string} name the human-readable name of this toolbar
+ * @property {string} [description] a longer-form description (typically
+ *           a single sentence or short paragraph) of this kind of toolbar
+ * @memberof module:openmct
+ */
+
+/**
+ * Checks if this provider can supply toolbar for a selection.
+ *
+ * @method forSelection
+ * @memberof module:openmct.ToolbarProvider#
+ * @param {module:openmct.selection} selection
+ * @returns {boolean} 'true' if the toolbar applies to the provided selection,
+ *          otherwise 'false'.
+ */
+
+/**
+ * Provides controls that comprise a toolbar.
+ *
+ * @method toolbar
+ * @memberof module:openmct.ToolbarProvider#
+ * @param {object} selection the selection object
+ * @returns {Object[]} an array of objects defining controls for the toolbar.
+ */
diff --git a/src/ui/registries/ViewRegistry.js b/src/ui/registries/ViewRegistry.js
index bf19bca13f0..83179a70dbc 100644
--- a/src/ui/registries/ViewRegistry.js
+++ b/src/ui/registries/ViewRegistry.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,254 +20,253 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(['EventEmitter'], function (EventEmitter) {
-    const DEFAULT_VIEW_PRIORITY = 100;
+import EventEmitter from 'EventEmitter';
 
-    /**
-     * A ViewRegistry maintains the definitions for different kinds of views
-     * that may occur in different places in the user interface.
-     * @interface ViewRegistry
-     * @memberof module:openmct
-     */
-    function ViewRegistry() {
-        EventEmitter.apply(this);
-        this.providers = {};
-    }
+const DEFAULT_VIEW_PRIORITY = 100;
 
-    ViewRegistry.prototype = Object.create(EventEmitter.prototype);
+/**
+ * A ViewRegistry maintains the definitions for different kinds of views
+ * that may occur in different places in the user interface.
+ * @interface ViewRegistry
+ * @memberof module:openmct
+ */
+export default function ViewRegistry() {
+  EventEmitter.apply(this);
+  this.providers = {};
+}
 
-    /**
-     * @private for platform-internal use
-     * @param {*} item the object to be viewed
-     * @param {array} objectPath - The current contextual object path of the view object
-     *                             eg current domainObject is located under MyItems which is under Root
-     * @returns {module:openmct.ViewProvider[]} any providers
-     *          which can provide views of this object
-     */
-    ViewRegistry.prototype.get = function (item, objectPath) {
-        if (objectPath === undefined) {
-            throw "objectPath must be provided to get applicable views for an object";
-        }
+ViewRegistry.prototype = Object.create(EventEmitter.prototype);
 
-        function byPriority(providerA, providerB) {
-            let priorityA = providerA.priority ? providerA.priority(item) : DEFAULT_VIEW_PRIORITY;
-            let priorityB = providerB.priority ? providerB.priority(item) : DEFAULT_VIEW_PRIORITY;
+/**
+ * @private for platform-internal use
+ * @param {*} item the object to be viewed
+ * @param {array} objectPath - The current contextual object path of the view object
+ *                             eg current domainObject is located under MyItems which is under Root
+ * @returns {module:openmct.ViewProvider[]} any providers
+ *          which can provide views of this object
+ */
+ViewRegistry.prototype.get = function (item, objectPath) {
+  if (objectPath === undefined) {
+    throw 'objectPath must be provided to get applicable views for an object';
+  }
 
-            return priorityB - priorityA;
-        }
+  function byPriority(providerA, providerB) {
+    let priorityA = providerA.priority ? providerA.priority(item) : DEFAULT_VIEW_PRIORITY;
+    let priorityB = providerB.priority ? providerB.priority(item) : DEFAULT_VIEW_PRIORITY;
 
-        return this.getAllProviders()
-            .filter(function (provider) {
-                return provider.canView(item, objectPath);
-            }).sort(byPriority);
-    };
-
-    /**
-     * @private
-     */
-    ViewRegistry.prototype.getAllProviders = function () {
-        return Object.values(this.providers);
-    };
+    return priorityB - priorityA;
+  }
 
-    /**
-     * Register a new type of view.
-     *
-     * @param {module:openmct.ViewProvider} provider the provider for this view
-     * @method addProvider
-     * @memberof module:openmct.ViewRegistry#
-     */
-    ViewRegistry.prototype.addProvider = function (provider) {
-        const key = provider.key;
-        if (key === undefined) {
-            throw "View providers must have a unique 'key' property defined";
-        }
+  return this.getAllProviders()
+    .filter(function (provider) {
+      return provider.canView(item, objectPath);
+    })
+    .sort(byPriority);
+};
 
-        if (this.providers[key] !== undefined) {
-            console.warn("Provider already defined for key '%s'. Provider keys must be unique.", key);
-        }
+/**
+ * @private
+ */
+ViewRegistry.prototype.getAllProviders = function () {
+  return Object.values(this.providers);
+};
 
-        const wrappedView = provider.view.bind(provider);
-        provider.view = (domainObject, objectPath) => {
-            const viewObject = wrappedView(domainObject, objectPath);
-            const wrappedShow = viewObject.show.bind(viewObject);
-            viewObject.show = (element, isEditing) => {
-                viewObject.parentElement = element.parentElement;
-                wrappedShow(element, isEditing);
-            };
+/**
+ * Register a new type of view.
+ *
+ * @param {module:openmct.ViewProvider} provider the provider for this view
+ * @method addProvider
+ * @memberof module:openmct.ViewRegistry#
+ */
+ViewRegistry.prototype.addProvider = function (provider) {
+  const key = provider.key;
+  if (key === undefined) {
+    throw "View providers must have a unique 'key' property defined";
+  }
 
-            return viewObject;
-        };
+  if (this.providers[key] !== undefined) {
+    console.warn("Provider already defined for key '%s'. Provider keys must be unique.", key);
+  }
 
-        this.providers[key] = provider;
+  const wrappedView = provider.view.bind(provider);
+  provider.view = (domainObject, objectPath) => {
+    const viewObject = wrappedView(domainObject, objectPath);
+    const wrappedShow = viewObject.show.bind(viewObject);
+    viewObject.key = key; // provide access to provider key on view object
+    viewObject.show = (element, isEditing, viewOptions) => {
+      viewObject.parentElement = element.parentElement;
+      wrappedShow(element, isEditing, viewOptions);
     };
 
-    /**
-     * @private
-     */
-    ViewRegistry.prototype.getByProviderKey = function (key) {
-        return this.providers[key];
-    };
+    return viewObject;
+  };
 
-    /**
-     * Used internally to support seamless usage of new views with old
-     * views.
-     * @private
-     */
-    ViewRegistry.prototype.getByVPID = function (vpid) {
-        return this.providers.filter(function (p) {
-            return p.vpid === vpid;
-        })[0];
-    };
+  this.providers[key] = provider;
+};
 
-    /**
-     * A View is used to provide displayable content, and to react to
-     * associated life cycle events.
-     *
-     * @name View
-     * @interface
-     * @memberof module:openmct
-     */
+/**
+ * @private
+ */
+ViewRegistry.prototype.getByProviderKey = function (key) {
+  return this.providers[key];
+};
 
-    /**
-     * Populate the supplied DOM element with the contents of this view.
-     *
-     * View implementations should use this method to attach any
-     * listeners or acquire other resources that are necessary to keep
-     * the contents of this view up-to-date.
-     *
-     * @param {HTMLElement} container the DOM element to populate
-     * @method show
-     * @memberof module:openmct.View#
-     */
+/**
+ * Used internally to support seamless usage of new views with old
+ * views.
+ * @private
+ */
+ViewRegistry.prototype.getByVPID = function (vpid) {
+  return this.providers.filter(function (p) {
+    return p.vpid === vpid;
+  })[0];
+};
 
-    /**
-     * Indicates whether or not the application is in edit mode. This supports
-     * views that have distinct visual and behavioral elements when the
-     * navigated object is being edited.
-     *
-     * For cases where a completely separate view is desired for editing purposes,
-     * see {@link openmct.ViewProvider#edit}
-     *
-     * @param {boolean} isEditing
-     * @method show
-     * @memberof module:openmct.View#
-     */
+/**
+ * A View is used to provide displayable content, and to react to
+ * associated life cycle events.
+ *
+ * @name View
+ * @interface
+ * @memberof module:openmct
+ */
 
-    /**
-     * Release any resources associated with this view.
-     *
-     * View implementations should use this method to detach any
-     * listeners or release other resources that are no longer necessary
-     * once a view is no longer used.
-     *
-     * @method destroy
-     * @memberof module:openmct.View#
-     */
+/**
+ * Populate the supplied DOM element with the contents of this view.
+ *
+ * View implementations should use this method to attach any
+ * listeners or acquire other resources that are necessary to keep
+ * the contents of this view up-to-date.
+ *
+ * @param {HTMLElement} container the DOM element to populate
+ * @method show
+ * @memberof module:openmct.View#
+ */
 
-    /**
-     * Returns the selection context.
-     *
-     * View implementations should use this method to customize
-     * the selection context.
-     *
-     * @method getSelectionContext
-     * @memberof module:openmct.View#
-     */
+/**
+ * Indicates whether or not the application is in edit mode. This supports
+ * views that have distinct visual and behavioral elements when the
+ * navigated object is being edited.
+ *
+ * For cases where a completely separate view is desired for editing purposes,
+ * see {@link openmct.ViewProvider#edit}
+ *
+ * @param {boolean} isEditing
+ * @method show
+ * @memberof module:openmct.View#
+ */
 
-    /**
-     * Exposes types of views in Open MCT.
-     *
-     * @interface ViewProvider
-     * @property {string} key a unique identifier for this view
-     * @property {string} name the human-readable name of this view
-     * @property {string} [description] a longer-form description (typically
-     *           a single sentence or short paragraph) of this kind of view
-     * @property {string} [cssClass] the CSS class to apply to labels for this
-     *           view (to add icons, for instance)
-     * @memberof module:openmct
-     */
+/**
+ * Release any resources associated with this view.
+ *
+ * View implementations should use this method to detach any
+ * listeners or release other resources that are no longer necessary
+ * once a view is no longer used.
+ *
+ * @method destroy
+ * @memberof module:openmct.View#
+ */
 
-    /**
-     * Check if this provider can supply views for a domain object.
-     *
-     * When called by Open MCT, this may include additional arguments
-     * which are on the path to the object to be viewed; for instance,
-     * when viewing "A Folder" within "My Items", this method will be
-     * invoked with "A Folder" (as a domain object) as the first argument
-     *
-     * @method canView
-     * @memberof module:openmct.ViewProvider#
-     * @param {module:openmct.DomainObject} domainObject the domain object
-     *        to be viewed
-     * @param {array} objectPath - The current contextual object path of the view object
-     *                             eg current domainObject is located under MyItems which is under Root
-     * @returns {boolean} 'true' if the view applies to the provided object,
-     *          otherwise 'false'.
-     */
+/**
+ * Returns the selection context.
+ *
+ * View implementations should use this method to customize
+ * the selection context.
+ *
+ * @method getSelectionContext
+ * @memberof module:openmct.View#
+ */
 
-    /**
-     * An optional function that defines whether or not this view can be used to edit a given object.
-     * If not provided, will default to `false` and the view will not support editing. To support editing,
-     * return true from this function and then -
-     * * Return a {@link openmct.View} from the `view` function, using the `onEditModeChange` callback to
-     * add and remove editing elements from the view
-     * OR
-     * * Return a {@link openmct.View} from the `view` function defining a read-only view.
-     * AND
-     * * Define an {@link openmct.ViewProvider#Edit} function on the view provider that returns an
-     * editing-specific view.
-     *
-     * @method canEdit
-     * @memberof module:openmct.ViewProvider#
-     * @param {module:openmct.DomainObject} domainObject the domain object
-     *        to be edited
-     * @param {array} objectPath - The current contextual object path of the view object
-     *                             eg current domainObject is located under MyItems which is under Root
-     * @returns {boolean} 'true' if the view can be used to edit the provided object,
-     *          otherwise 'false'.
-     */
+/**
+ * Exposes types of views in Open MCT.
+ *
+ * @interface ViewProvider
+ * @property {string} key a unique identifier for this view
+ * @property {string} name the human-readable name of this view
+ * @property {string} [description] a longer-form description (typically
+ *           a single sentence or short paragraph) of this kind of view
+ * @property {string} [cssClass] the CSS class to apply to labels for this
+ *           view (to add icons, for instance)
+ * @memberof module:openmct
+ */
 
-    /**
-     * Optional method determining the priority of a given view. If this
-     * function is not defined on a view provider, then a default priority
-     * of 100 will be applicable for all objects supported by this view.
-     *
-     * @method priority
-     * @memberof module:openmct.ViewProvider#
-     * @param {module:openmct.DomainObject} domainObject the domain object
-     *        to be viewed
-     * @returns {number} The priority of the view. If multiple views could apply
-     *          to an object, the view that returns the lowest number will be
-     *          the default view.
-     */
+/**
+ * Check if this provider can supply views for a domain object.
+ *
+ * When called by Open MCT, this may include additional arguments
+ * which are on the path to the object to be viewed; for instance,
+ * when viewing "A Folder" within "My Items", this method will be
+ * invoked with "A Folder" (as a domain object) as the first argument
+ *
+ * @method canView
+ * @memberof module:openmct.ViewProvider#
+ * @param {module:openmct.DomainObject} domainObject the domain object
+ *        to be viewed
+ * @param {array} objectPath - The current contextual object path of the view object
+ *                             eg current domainObject is located under MyItems which is under Root
+ * @returns {boolean} 'true' if the view applies to the provided object,
+ *          otherwise 'false'.
+ */
 
-    /**
-     * Provide a view of this object.
-     *
-     * When called by Open MCT, the following arguments will be passed to it:
-     * @param {object} domainObject - the domainObject that the view is provided for
-     * @param {array} objectPath - The current contextual object path of the view object
-     *                             eg current domainObject is located under MyItems which is under Root
-     *
-     * @method view
-     * @memberof module:openmct.ViewProvider#
-     * @param {*} object the object to be viewed
-     * @returns {module:openmct.View} a view of this domain object
-     */
+/**
+ * An optional function that defines whether or not this view can be used to edit a given object.
+ * If not provided, will default to `false` and the view will not support editing. To support editing,
+ * return true from this function and then -
+ * * Return a {@link openmct.View} from the `view` function, using the `onEditModeChange` callback to
+ * add and remove editing elements from the view
+ * OR
+ * * Return a {@link openmct.View} from the `view` function defining a read-only view.
+ * AND
+ * * Define an {@link openmct.ViewProvider#Edit} function on the view provider that returns an
+ * editing-specific view.
+ *
+ * @method canEdit
+ * @memberof module:openmct.ViewProvider#
+ * @param {module:openmct.DomainObject} domainObject the domain object
+ *        to be edited
+ * @param {array} objectPath - The current contextual object path of the view object
+ *                             eg current domainObject is located under MyItems which is under Root
+ * @returns {boolean} 'true' if the view can be used to edit the provided object,
+ *          otherwise 'false'.
+ */
 
-    /**
-     * Provide an edit-mode specific view of this object.
-     *
-     * If optionally specified, this function will be called when the application
-     * enters edit mode. This will cause the active non-edit mode view and its
-     * dom element to be destroyed.
-     *
-     * @method edit
-     * @memberof module:openmct.ViewProvider#
-     * @param {*} object the object to be edit
-     * @returns {module:openmct.View} an editable view of this domain object
-     */
+/**
+ * Optional method determining the priority of a given view. If this
+ * function is not defined on a view provider, then a default priority
+ * of 100 will be applicable for all objects supported by this view.
+ *
+ * @method priority
+ * @memberof module:openmct.ViewProvider#
+ * @param {module:openmct.DomainObject} domainObject the domain object
+ *        to be viewed
+ * @returns {number} The priority of the view. If multiple views could apply
+ *          to an object, the view that returns the lowest number will be
+ *          the default view.
+ */
 
-    return ViewRegistry;
+/**
+ * Provide a view of this object.
+ *
+ * When called by Open MCT, the following arguments will be passed to it:
+ * @param {object} domainObject - the domainObject that the view is provided for
+ * @param {array} objectPath - The current contextual object path of the view object
+ *                             eg current domainObject is located under MyItems which is under Root
+ *
+ * @method view
+ * @memberof module:openmct.ViewProvider#
+ * @param {*} object the object to be viewed
+ * @returns {module:openmct.View} a view of this domain object
+ */
 
-});
+/**
+ * Provide an edit-mode specific view of this object.
+ *
+ * If optionally specified, this function will be called when the application
+ * enters edit mode. This will cause the active non-edit mode view and its
+ * dom element to be destroyed.
+ *
+ * @method edit
+ * @memberof module:openmct.ViewProvider#
+ * @param {*} object the object to be edit
+ * @returns {module:openmct.View} an editable view of this domain object
+ */
diff --git a/src/ui/router/ApplicationRouter.js b/src/ui/router/ApplicationRouter.js
index 3a89b78a6c7..8a65f69cf78 100644
--- a/src/ui/router/ApplicationRouter.js
+++ b/src/ui/router/ApplicationRouter.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,14 +19,13 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/*global module*/
 
-const LocationBar = require('location-bar');
-const EventEmitter = require('EventEmitter');
-const _ = require('lodash');
+import EventEmitter from 'EventEmitter';
+import LocationBar from 'location-bar';
+import _ from 'lodash';
 
 class ApplicationRouter extends EventEmitter {
-    /**
+  /**
      * events
      * change:params -> notify listeners w/ new, old, and changed.
      * change:path -> notify listeners w/ new, old paths.
@@ -41,355 +40,378 @@ class ApplicationRouter extends EventEmitter {
      * route(path, handler);
      * start(); Start routing.
      */
-    constructor(openmct) {
-        super();
-
-        this.locationBar = new LocationBar();
-        this.openmct = openmct;
-        this.routes = [];
-        this.started = false;
-
-        this.setHash = _.debounce(this.setHash.bind(this), 300);
-    }
-
-    // Public Methods
-
-    destroy() {
-        this.locationBar.stop();
-    }
-
-    /**
-     * Delete a given query parameter from current url
-     *
-     * @param {string} paramName name of searchParam to delete from current url searchParams
-     */
-    deleteSearchParam(paramName) {
-        let url = this.getHashRelativeURL();
-
-        url.searchParams.delete(paramName);
-        this.setLocationFromUrl();
-    }
-
-    /**
-     * object for accessing all current search parameters
-     *
-     * @returns {URLSearchParams} A {@link https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/entries|URLSearchParams}
-     */
-    getAllSearchParams() {
-        return this.getHashRelativeURL().searchParams;
-    }
-
-    /**
-     * Uniquely identifies a domain object.
-     *
-     * @typedef CurrentLocation
-     * @property {URL} url current url location
-     * @property {string} path current url location pathname
-     * @property {string} getQueryString a function which returns url search query
-     * @property {object} params object representing url searchParams
-     */
-
-    /**
-     * object for accessing current url location and search params
-     *
-     * @returns {CurrentLocation} A {@link CurrentLocation}
-     */
-    getCurrentLocation() {
-        return this.currentLocation;
-    }
-
-    /**
-     * Get current location URL Object
-     *
-     * @returns {URL} current url location
-     */
-    getHashRelativeURL() {
-        return this.getCurrentLocation().url;
-    }
-
-    /**
-     * Get current location URL Object searchParams
-     *
-     * @returns {object} object representing current url searchParams
-     */
-    getParams() {
-        return this.currentLocation.params;
-    }
-
-    /**
-     * Get a value of given param from current url searchParams
-     *
-     * @returns {string} value of paramName from current url searchParams
-     */
-    getSearchParam(paramName) {
-        return this.getAllSearchParams().get(paramName);
-    }
-
-    /**
-     * Navgate to given hash and update current location object and notify listeners about location change
-     *
-     * @param {string} paramName name of searchParam to get from current url searchParams
-     *
-     * @returns {string} value of paramName from current url searchParams
-     */
-    navigate(hash) {
-        this.handleLocationChange(hash.substring(1));
-    }
-
-    /**
-     * Add routes listeners
-     *
-     * @param {string} matcher Regex to match value in url
-     * @param {@function} callback function called when found match in url
-     */
-    route(matcher, callback) {
-        this.routes.push({
-            matcher,
-            callback
-        });
-    }
-
-    /**
-     * Set url hash using path and queryString
-     *
-     * @param {string} path path for url
-     * @param {string} queryString queryString for url
-     */
-    set(path, queryString) {
-        this.setHash(`${path}?${queryString}`);
-    }
-
-    /**
-     * Will replace all current search parameters with the ones defined in urlSearchParams
-     */
-    setAllSearchParams() {
-        this.setLocationFromUrl();
-    }
-
-    /**
-     * To force update url based on value in currentLocation object
-     */
-    setLocationFromUrl() {
-        this.updateTimeSettings();
+  constructor(openmct) {
+    super();
+
+    this.locationBar = new LocationBar();
+    this.openmct = openmct;
+    this.routes = [];
+    this.started = false;
+
+    this.setHash = _.debounce(this.setHash.bind(this), 300);
+
+    openmct.once('destroy', () => {
+      this.destroy();
+    });
+  }
+
+  // Public Methods
+
+  destroy() {
+    this.locationBar.stop();
+  }
+
+  /**
+   * Delete a given query parameter from current url
+   *
+   * @param {string} paramName name of searchParam to delete from current url searchParams
+   */
+  deleteSearchParam(paramName) {
+    let url = this.getHashRelativeURL();
+
+    url.searchParams.delete(paramName);
+    this.setLocationFromUrl();
+  }
+
+  /**
+   * object for accessing all current search parameters
+   *
+   * @returns {URLSearchParams} A {@link https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/entries|URLSearchParams}
+   */
+  getAllSearchParams() {
+    return this.getHashRelativeURL()?.searchParams;
+  }
+
+  /**
+   * Uniquely identifies a domain object.
+   *
+   * @typedef CurrentLocation
+   * @property {URL} url current url location
+   * @property {string} path current url location pathname
+   * @property {string} getQueryString a function which returns url search query
+   * @property {object} params object representing url searchParams
+   */
+
+  /**
+   * object for accessing current url location and search params
+   *
+   * @returns {CurrentLocation} A {@link CurrentLocation}
+   */
+  getCurrentLocation() {
+    return this.currentLocation;
+  }
+
+  /**
+   * Get current location URL Object
+   *
+   * @returns {URL} current url location
+   */
+  getHashRelativeURL() {
+    return this.getCurrentLocation()?.url;
+  }
+
+  /**
+   * Get current location URL Object searchParams
+   *
+   * @returns {object} object representing current url searchParams
+   */
+  getParams() {
+    return this.currentLocation.params;
+  }
+
+  /**
+   * Get a value of given param from current url searchParams
+   *
+   * @returns {string} value of paramName from current url searchParams
+   */
+  getSearchParam(paramName) {
+    return this.getAllSearchParams()?.get(paramName);
+  }
+
+  /**
+   * Navigate to given hash, update current location object, and notify listeners about location change
+   *
+   * @param {string} hash The URL hash to navigate to in the form of "#/browse/mine/{keyString}/{keyString}".
+   * Should not include any params.
+   */
+  navigate(hash) {
+    this.handleLocationChange(hash.substring(1));
+  }
+
+  /**
+   * Check if a given object and current location object are same
+   *
+   * @param {Array<Object>} objectPath Object path of a given Domain Object
+   *
+   * @returns {Boolean}
+   */
+  isNavigatedObject(objectPath) {
+    let targetObject = objectPath[0];
+    let navigatedObject = this.path[0];
+
+    if (!targetObject.identifier) {
+      return false;
     }
 
-    /**
-     * Set url hash using path
-     *
-     * @param {string} path path for url
-     */
-    setPath(path) {
-        this.handleLocationChange(path.substring(1));
+    return this.openmct.objects.areIdsEqual(targetObject.identifier, navigatedObject.identifier);
+  }
+
+  /**
+   * Add routes listeners
+   *
+   * @param {string} matcher Regex to match value in url
+   * @param {@function} callback function called when found match in url
+   */
+  route(matcher, callback) {
+    this.routes.push({
+      matcher,
+      callback
+    });
+  }
+
+  /**
+   * Set url hash using path and queryString
+   *
+   * @param {string} path path for url
+   * @param {string} queryString queryString for url
+   */
+  set(path, queryString) {
+    this.setHash(`${path}?${queryString}`);
+  }
+
+  /**
+   * Will replace all current search parameters with the ones defined in urlSearchParams
+   */
+  setAllSearchParams() {
+    this.setLocationFromUrl();
+  }
+
+  /**
+   * To force update url based on value in currentLocation object
+   */
+  setLocationFromUrl() {
+    this.updateTimeSettings();
+  }
+
+  /**
+   * Set url hash using path
+   *
+   * @param {string} path path for url
+   */
+  setPath(path) {
+    this.handleLocationChange(path.substring(1));
+  }
+
+  /**
+   * Update param value from current url searchParams
+   *
+   * @param {string} paramName param name from current url searchParams
+   * @param {string} paramValue param value from current url searchParams
+   */
+  setSearchParam(paramName, paramValue) {
+    let url = this.getHashRelativeURL();
+
+    url.searchParams.set(paramName, paramValue);
+    this.setLocationFromUrl();
+  }
+
+  /**
+   * start application routing, should be done after handlers are registered.
+   */
+  start() {
+    if (this.started) {
+      throw new Error('Router already started!');
     }
 
-    /**
-     * Update param value from current url searchParams
-     *
-     * @param {string} paramName param name from current url searchParams
-     * @param {string} paramValue param value from current url searchParams
-     */
-    setSearchParam(paramName, paramValue) {
-        let url = this.getHashRelativeURL();
-
-        url.searchParams.set(paramName, paramValue);
-        this.setLocationFromUrl();
+    this.started = true;
+
+    this.locationBar.onChange((p) => this.hashChanged(p));
+    this.locationBar.start({
+      root: location.pathname
+    });
+  }
+
+  /**
+   * Set url hash using path and searchParams object
+   *
+   * @param {string} path path for url
+   * @param {string} params oject representing searchParams key/value
+   */
+  update(path, params) {
+    let searchParams = this.currentLocation.url.searchParams;
+    for (let [key, value] of Object.entries(params)) {
+      if (typeof value === 'undefined') {
+        searchParams.delete(key);
+      } else {
+        searchParams.set(key, value);
+      }
     }
 
-    /**
-     * start application routing, should be done after handlers are registered.
-     */
-    start() {
-        if (this.started) {
-            throw new Error('Router already started!');
-        }
-
-        this.started = true;
-
-        this.locationBar.onChange(p => this.hashChaged(p));
-        this.locationBar.start({
-            root: location.pathname
-        });
+    this.set(path, searchParams.toString());
+  }
+
+  /**
+   * Update route params. Takes an object of updates.  New parameters
+   */
+  updateParams(updateParams) {
+    let searchParams = this.currentLocation.url.searchParams;
+    Object.entries(updateParams).forEach(([key, value]) => {
+      if (typeof value === 'undefined') {
+        searchParams.delete(key);
+      } else {
+        searchParams.set(key, value);
+      }
+    });
+
+    this.setQueryString(searchParams.toString());
+  }
+
+  /**
+   * To force update url based on value in currentLocation object
+   */
+  updateTimeSettings() {
+    const hash = `${this.currentLocation.path}?${this.currentLocation.getQueryString()}`;
+
+    this.setHash(hash);
+  }
+
+  // Private Methods
+
+  /**
+   * @private
+   * Create currentLocation object
+   *
+   * @param {string} pathString USVString representing relative URL.
+   *
+   * @returns {CurrentLocation} A {@link CurrentLocation}
+   */
+  createLocation(pathString) {
+    if (pathString[0] !== '/') {
+      pathString = '/' + pathString;
     }
 
-    /**
-     * Set url hash using path and searchParams object
-     *
-     * @param {string} path path for url
-     * @param {string} params oject representing searchParams key/value
-     */
-    update(path, params) {
-        let searchParams = this.currentLocation.url.searchParams;
-        for (let [key, value] of Object.entries(params)) {
-            if (typeof value === 'undefined') {
-                searchParams.delete(key);
-            } else {
-                searchParams.set(key, value);
-            }
-        }
-
-        this.set(path, searchParams.toString());
+    let url = new URL(pathString, `${location.protocol}//${location.host}${location.pathname}`);
+
+    return {
+      url: url,
+      path: url.pathname,
+      getQueryString: () => url.search.replace(/^\?/, ''),
+      params: paramsToObject(url.searchParams)
+    };
+  }
+
+  /**
+   * @private
+   * Compare new and old path and on change emit event 'change:path'
+   *
+   * @param {string} newPath new path of url
+   * @param {string} oldPath old path of url
+   * @returns {boolean} true if path changed, false otherwise
+   */
+  doPathChange(newPath, oldPath) {
+    if (newPath === oldPath) {
+      return false;
     }
 
-    /**
-     * Update route params. Takes an object of updates.  New parameters
-     */
-    updateParams(updateParams) {
-        let searchParams = this.currentLocation.url.searchParams;
-        Object.entries(updateParams).forEach(([key, value]) => {
-            if (typeof value === 'undefined') {
-                searchParams.delete(key);
-            } else {
-                searchParams.set(key, value);
-            }
-        });
-
-        this.setQueryString(searchParams.toString());
+    let route = this.routes.filter((r) => r.matcher.test(newPath))[0];
+    if (route) {
+      route.callback(newPath, route.matcher.exec(newPath), this.currentLocation.params);
     }
 
-    /**
-     * To force update url based on value in currentLocation object
-     */
-    updateTimeSettings() {
-        const hash = `${this.currentLocation.path}?${this.currentLocation.getQueryString()}`;
+    this.openmct.telemetry.abortAllRequests();
 
-        this.setHash(hash);
-    }
+    this.emit('change:path', newPath, oldPath);
 
-    // Private Methods
+    return true;
+  }
 
-    /**
-     * @private
-     * Create currentLocation object
-     *
-     * @param {string} pathString USVString representing relative URL.
-     *
-     * @returns {CurrentLocation} A {@link CurrentLocation}
-     */
-    createLocation(pathString) {
-        if (pathString[0] !== '/') {
-            pathString = '/' + pathString;
-        }
-
-        let url = new URL(
-            pathString,
-            `${location.protocol}//${location.host}${location.pathname}`
-        );
-
-        return {
-            url: url,
-            path: url.pathname,
-            getQueryString: () => url.search.replace(/^\?/, ''),
-            params: paramsToObject(url.searchParams)
-        };
+  /**
+   * @private
+   * Compare new and old params and on change emit event 'change:params'
+   *
+   * @param {object} newParams new params of url
+   * @param {object} oldParams old params of url
+   * @returns {boolean} true if params changed, false otherwise
+   */
+  doParamsChange(newParams, oldParams) {
+    if (_.isEqual(newParams, oldParams)) {
+      return false;
     }
 
-    /**
-     * @private
-     * Compare new and old path and on change emit event 'change:path'
-     *
-     * @param {string} newPath new path of url
-     * @param {string} oldPath old path of url
-     */
-    doPathChange(newPath, oldPath) {
-        if (newPath === oldPath) {
-            return;
-        }
-
-        let route = this.routes.filter(r => r.matcher.test(newPath))[0];
-        if (route) {
-            route.callback(newPath, route.matcher.exec(newPath), this.currentLocation.params);
-        }
-
-        this.emit('change:path', newPath, oldPath);
-    }
-
-    /**
-     * @private
-     * Compare new and old params and on change emit event 'change:params'
-     *
-     * @param {object} newParams new params of url
-     * @param {object} oldParams old params of url
-     */
-    doParamsChange(newParams, oldParams) {
-        if (_.isEqual(newParams, oldParams)) {
-            return;
-        }
-
-        let changedParams = {};
-        Object.entries(newParams).forEach(([key, value]) => {
-            if (value !== oldParams[key]) {
-                changedParams[key] = value;
-            }
-        });
-        Object.keys(oldParams).forEach(key => {
-            if (!Object.prototype.hasOwnProperty.call(newParams, key)) {
-                changedParams[key] = undefined;
-            }
-        });
-
-        this.emit('change:params', newParams, oldParams, changedParams);
+    let changedParams = {};
+    Object.entries(newParams).forEach(([key, value]) => {
+      if (value !== oldParams[key]) {
+        changedParams[key] = value;
+      }
+    });
+    Object.keys(oldParams).forEach((key) => {
+      if (!Object.prototype.hasOwnProperty.call(newParams, key)) {
+        changedParams[key] = undefined;
+      }
+    });
+
+    this.emit('change:params', newParams, oldParams, changedParams);
+    return true;
+  }
+
+  /**
+   * @private
+   * On location change, update currentLocation object and emit appropriate events
+   *
+   * @param {string} pathString USVString representing relative URL.
+   */
+  handleLocationChange(pathString) {
+    let oldLocation = this.currentLocation;
+    let newLocation = this.createLocation(pathString);
+
+    this.currentLocation = newLocation;
+
+    if (!oldLocation) {
+      this.doPathChange(newLocation.path, null);
+      this.doParamsChange(newLocation.params, {});
+
+      return;
     }
 
-    /**
-     * @private
-     * On location change, update currentLocation object and emit appropriate events
-     *
-     * @param {string} pathString USVString representing relative URL.
-     */
-    handleLocationChange(pathString) {
-        let oldLocation = this.currentLocation;
-        let newLocation = this.createLocation(pathString);
-
-        this.currentLocation = newLocation;
-
-        if (!oldLocation) {
-            this.doPathChange(newLocation.path, null);
-            this.doParamsChange(newLocation.params, {});
+    const pathChanged = this.doPathChange(newLocation.path, oldLocation.path);
 
-            return;
-        }
-
-        this.doPathChange(
-            newLocation.path,
-            oldLocation.path
-        );
-
-        this.doParamsChange(
-            newLocation.params,
-            oldLocation.params
-        );
-    }
-
-    /**
-     * @private
-     * On hash changed, update currentLocation object and emit appropriate events
-     *
-     * @param {string} hash new hash for url
-     */
-    hashChaged(hash) {
-        this.emit('change:hash', hash);
-        this.handleLocationChange(hash);
-    }
-
-    /**
-     * @private
-     * Set new hash for url
-     *
-     * @param {string} hash new hash for url
-     */
-    setHash(hash) {
-        location.hash = '#' + hash.replace(/#/g, '');
-    }
-
-    /**
-     * @private
-     * Set queryString part of current url
-     *
-     * @param {string} queryString queryString part of url
-     */
-    setQueryString(queryString) {
-        this.handleLocationChange(`${this.currentLocation.path}?${queryString}`);
+    const paramsChanged = this.doParamsChange(newLocation.params, oldLocation.params, pathChanged);
+    if (pathChanged || paramsChanged) {
+      // If either path or parameters have changed, we update the URL in the address bar.
+      this.set(newLocation.path, newLocation.getQueryString());
     }
+  }
+
+  /**
+   * @private
+   * On hash changed, update currentLocation object and emit appropriate events
+   *
+   * @param {string} hash new hash for url
+   */
+  hashChanged(hash) {
+    this.emit('change:hash', hash);
+    this.handleLocationChange(hash);
+  }
+
+  /**
+   * @private
+   * Set new hash for url
+   *
+   * @param {string} hash new hash for url
+   */
+  setHash(hash) {
+    location.hash = '#' + hash.replace(/#/g, '');
+  }
+
+  /**
+   * @private
+   * Set queryString part of current url
+   *
+   * @param {string} queryString queryString part of url
+   */
+  setQueryString(queryString) {
+    this.handleLocationChange(`${this.currentLocation.path}?${queryString}`);
+  }
 }
 
 /**
@@ -400,20 +422,20 @@ class ApplicationRouter extends EventEmitter {
  * @returns {Object}
  */
 function paramsToObject(searchParams) {
-    let params = {};
-    for (let [key, value] of searchParams.entries()) {
-        if (params[key]) {
-            if (!Array.isArray(params[key])) {
-                params[key] = [params[key]];
-            }
-
-            params[key].push(value);
-        } else {
-            params[key] = value;
-        }
+  let params = {};
+  for (let [key, value] of searchParams.entries()) {
+    if (params[key]) {
+      if (!Array.isArray(params[key])) {
+        params[key] = [params[key]];
+      }
+
+      params[key].push(value);
+    } else {
+      params[key] = value;
     }
+  }
 
-    return params;
+  return params;
 }
 
-module.exports = ApplicationRouter;
+export default ApplicationRouter;
diff --git a/src/ui/router/ApplicationRouterSpec.js b/src/ui/router/ApplicationRouterSpec.js
index d77eadaae0e..726f231f116 100644
--- a/src/ui/router/ApplicationRouterSpec.js
+++ b/src/ui/router/ApplicationRouterSpec.js
@@ -6,134 +6,85 @@ let child;
 let appHolder;
 let resolveFunction;
 
-let initialHash = '';
-
 xdescribe('Application router utility functions', () => {
-    beforeAll(done => {
-        appHolder = document.createElement('div');
-        appHolder.style.width = '640px';
-        appHolder.style.height = '480px';
-
-        openmct = createOpenMct();
-        openmct.install(openmct.plugins.MyItems());
-        openmct.install(openmct.plugins.LocalTimeSystem());
-        openmct.install(openmct.plugins.UTCTimeSystem());
-
-        element = document.createElement('div');
-        child = document.createElement('div');
-        element.appendChild(child);
-
-        openmct.on('start', done);
-        openmct.start(appHolder);
-
-        document.body.append(appHolder);
-    });
-
-    afterAll(() => {
-        openmct.router.setHash(initialHash);
-        appHolder.remove();
-
-        return resetApplicationState(openmct);
-    });
-
-    it('has initial hash when loaded', (done) => {
-        let success;
-        resolveFunction = () => {
-            openmct.router.setLocationFromUrl();
-            success = window.location.hash !== null;
-            if (success) {
-                initialHash = window.location.hash;
-                expect(success).toBe(true);
-
-                openmct.router.removeListener('change:hash', resolveFunction);
-                done();
-            }
-        };
-
-        openmct.router.on('change:hash', resolveFunction);
+  beforeEach((done) => {
+    appHolder = document.createElement('div');
+    appHolder.style.width = '640px';
+    appHolder.style.height = '480px';
+
+    openmct = createOpenMct();
+    openmct.install(openmct.plugins.MyItems());
+
+    element = document.createElement('div');
+    child = document.createElement('div');
+    element.appendChild(child);
+
+    openmct.on('start', () => {
+      resolveFunction = () => {
+        const success = window.location.hash !== null && window.location.hash !== '';
+        if (success) {
+          done();
+        }
+      };
+
+      openmct.router.on('change:hash', resolveFunction);
+      // We have a debounce set to 300ms on setHash, so if we don't flush,
+      // the above resolve function sometimes doesn't fire due to a race condition.
+      openmct.router.setHash.flush();
+      openmct.router.setLocationFromUrl();
     });
 
-    it('The setSearchParam function sets an individual search parameter in the window location hash', (done) => {
-        let success;
-        openmct.router.setSearchParam('testParam', 'testValue');
-        resolveFunction = () => {
-            success = window.location.hash.includes('testParam=testValue');
-            if (success) {
-                expect(success).toBe(true);
+    openmct.start(appHolder);
 
-                openmct.router.removeListener('change:hash', resolveFunction);
-                done();
-            }
-        };
+    document.body.append(appHolder);
+  });
 
-        openmct.router.on('change:hash', resolveFunction);
-    });
-
-    it('The getSearchParam function returns the value of an individual search paramater in the window location hash', () => {
-        expect(openmct.router.getSearchParam('testParam')).toBe('testValue');
-    });
-
-    it('The deleteSearchParam function deletes an individual search paramater in the window location hash', (done) => {
-        let success;
-        openmct.router.deleteSearchParam('testParam');
-        resolveFunction = () => {
-            success = window.location.hash.includes('testParam=testValue') === false;
-            if (success) {
-                expect(success).toBe(true);
-
-                openmct.router.removeListener('change:hash', resolveFunction);
-                done();
-            }
-        };
+  afterEach(() => {
+    openmct.router.removeListener('change:hash', resolveFunction);
+    appHolder.remove();
 
-        openmct.router.on('change:hash', resolveFunction);
-    });
+    return resetApplicationState(openmct);
+  });
 
-    it('The setSearchParam function sets an individual search parameters in the window location hash', (done) => {
-        let success;
-        openmct.router.setSearchParam('testParam1', 'testValue1');
-        openmct.router.setSearchParam('testParam2', 'testValue2');
+  it('has initial hash when loaded', () => {
+    const success = window.location.hash !== null;
+    expect(success).toBe(true);
+  });
 
-        resolveFunction = () => {
-            const hasTestParam1 = window.location.hash.includes('testParam1=testValue1');
-            const hasTestParam2 = window.location.hash.includes('testParam2=testValue2');
-            success = hasTestParam1 && hasTestParam2;
-            if (success) {
-                expect(success).toBe(true);
+  it('The setSearchParam function sets an individual search parameter in the window location hash', () => {
+    openmct.router.setSearchParam('testParam1', 'testValue1');
 
-                openmct.router.removeListener('change:hash', resolveFunction);
-                done();
-            }
-        };
+    const searchParams = openmct.router.getAllSearchParams();
+    expect(searchParams.get('testParam1')).toBe('testValue1');
+  });
 
-        openmct.router.on('change:hash', resolveFunction);
-    });
+  it('The deleteSearchParam function deletes an individual search parameter in the window location hash', () => {
+    openmct.router.deleteSearchParam('testParam');
+    const searchParams = openmct.router.getAllSearchParams();
+    expect(searchParams.get('testParam')).toBe(null);
+  });
 
-    it('The setAllSearchParams function replaces all search paramaters in the window location hash', (done) => {
-        let success;
+  it('The setSearchParam function sets a multiple individual search parameters in the window location hash', () => {
+    openmct.router.setSearchParam('testParam1', 'testValue1');
+    openmct.router.setSearchParam('testParam2', 'testValue2');
 
-        openmct.router.setSearchParam('testParam2', 'updatedtestValue2');
-        openmct.router.setSearchParam('newTestParam3', 'newTestValue3');
+    const searchParams = openmct.router.getAllSearchParams();
+    expect(searchParams.get('testParam1')).toBe('testValue1');
+    expect(searchParams.get('testParam2')).toBe('testValue2');
+  });
 
-        resolveFunction = () => {
-            const hasupdatedValueForTestParam2 = window.location.hash.includes('testParam2=updatedtestValue2');
-            const hasNewTestParam3 = window.location.hash.includes('newTestParam3=newTestValue3');
-            success = hasupdatedValueForTestParam2 && hasNewTestParam3;
-            if (success) {
-                expect(success).toBe(true);
+  it('The setAllSearchParams function replaces all search parameters in the window location hash', () => {
+    openmct.router.setSearchParam('testParam2', 'updatedtestValue2');
+    openmct.router.setSearchParam('newTestParam3', 'newTestValue3');
 
-                openmct.router.removeListener('change:hash', resolveFunction);
-                done();
-            }
-        };
+    const searchParams = openmct.router.getAllSearchParams();
+    expect(searchParams.get('testParam2')).toBe('updatedtestValue2');
+    expect(searchParams.get('newTestParam3')).toBe('newTestValue3');
+  });
 
-        openmct.router.on('change:hash', resolveFunction);
-    });
-
-    it('The getAllSearchParams function returns the values of all search paramaters in the window location hash', () => {
-        let searchParams = openmct.router.getAllSearchParams();
-        expect(searchParams.get('testParam1')).toBe('testValue1');
-        expect(searchParams.get('testParam2')).toBe('updatedtestValue2');
-        expect(searchParams.get('newTestParam3')).toBe('newTestValue3');
-    });
+  it('The doPathChange function triggers aborting all requests when doing a path change', () => {
+    const abortSpy = spyOn(openmct.telemetry, 'abortAllRequests');
+    openmct.router.doPathChange('newPath', 'oldPath');
+    expect(abortSpy).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/src/ui/router/Browse.js b/src/ui/router/Browse.js
index 43709d06ec8..f64eb7c5748 100644
--- a/src/ui/router/Browse.js
+++ b/src/ui/router/Browse.js
@@ -1,147 +1,167 @@
-define([
-
-], function (
-
-) {
-
-    return function install(openmct) {
-        let navigateCall = 0;
-        let browseObject;
-        let unobserve = undefined;
-        let currentObjectPath;
-        let isRoutingInProgress = false;
-
-        openmct.router.route(/^\/browse\/?$/, navigateToFirstChildOfRoot);
-        openmct.router.route(/^\/browse\/(.*)$/, (path, results, params) => {
-            isRoutingInProgress = true;
-            let navigatePath = results[1];
-            clearMutationListeners();
-
-            navigateToPath(navigatePath, params.view);
-        });
-
-        openmct.router.on('change:params', onParamsChanged);
-
-        function onParamsChanged(newParams, oldParams, changed) {
-            if (isRoutingInProgress) {
-                return;
-            }
-
-            if (changed.view && browseObject) {
-                let provider = openmct
-                    .objectViews
-                    .getByProviderKey(changed.view);
-                viewObject(browseObject, provider);
-            }
-        }
-
-        function viewObject(object, viewProvider) {
-            currentObjectPath = openmct.router.path;
-
-            openmct.layout.$refs.browseObject.show(object, viewProvider.key, true, currentObjectPath);
-            openmct.layout.$refs.browseBar.domainObject = object;
-
-            openmct.layout.$refs.browseBar.viewKey = viewProvider.key;
-        }
-
-        function navigateToPath(path, currentViewKey) {
-            navigateCall++;
-            let currentNavigation = navigateCall;
-
-            if (unobserve) {
-                unobserve();
-                unobserve = undefined;
-            }
-
-            //Split path into object identifiers
-            if (!Array.isArray(path)) {
-                path = path.split('/');
-            }
-
-            return pathToObjects(path).then(objects => {
-                isRoutingInProgress = false;
-
-                if (currentNavigation !== navigateCall) {
-                    return; // Prevent race.
-                }
-
-                objects = objects.reverse();
-
-                openmct.router.path = objects;
-                browseObject = objects[0];
-
-                openmct.layout.$refs.browseBar.domainObject = browseObject;
-
-                if (!browseObject) {
-                    openmct.layout.$refs.browseObject.clear();
-
-                    return;
-                }
-
-                let currentProvider = openmct
-                    .objectViews
-                    .getByProviderKey(currentViewKey);
-
-                document.title = browseObject.name; //change document title to current object in main view
-
-                if (currentProvider && currentProvider.canView(browseObject, openmct.router.path)) {
-                    viewObject(browseObject, currentProvider);
-
-                    return;
-                }
-
-                let defaultProvider = openmct.objectViews.get(browseObject, openmct.router.path)[0];
-                if (defaultProvider) {
-                    openmct.router.updateParams({
-                        view: defaultProvider.key
-                    });
-                } else {
-                    openmct.router.updateParams({
-                        view: undefined
-                    });
-                    openmct.layout.$refs.browseObject.clear();
-                }
-            });
-        }
-
-        function pathToObjects(path) {
-            return Promise.all(path.map((keyString) => {
-                let identifier = openmct.objects.parseKeyString(keyString);
-
-                if (openmct.objects.supportsMutation(identifier)) {
-                    return openmct.objects.getMutable(identifier);
-                } else {
-                    return openmct.objects.get(identifier);
-                }
-            }));
-        }
-
-        function navigateToFirstChildOfRoot() {
-            openmct.objects.get('ROOT')
-                .then(rootObject => {
-                    openmct.composition.get(rootObject).load()
-                        .then(children => {
-                            let lastChild = children[children.length - 1];
-                            if (!lastChild) {
-                                console.error('Unable to navigate to anything. No root objects found.');
-                            } else {
-                                let lastChildId = openmct.objects.makeKeyString(lastChild.identifier);
-                                openmct.router.setPath(`#/browse/${lastChildId}`);
-                            }
-                        })
-                        .catch(e => console.error(e));
-                })
-                .catch(e => console.error(e));
-        }
-
-        function clearMutationListeners() {
-            if (openmct.router.path !== undefined) {
-                openmct.router.path.forEach((pathObject) => {
-                    if (pathObject.isMutable) {
-                        openmct.objects.destroyMutable(pathObject);
-                    }
-                });
-            }
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+export default class Browse {
+  #navigateCall = 0;
+  #browseObject = null;
+  #unobserve = undefined;
+  #currentObjectPath = undefined;
+  #isRoutingInProgress = false;
+  #openmct;
+
+  constructor(openmct) {
+    this.#openmct = openmct;
+    this.#openmct.router.route(/^\/browse\/?$/, this.#navigateToFirstChildOfRoot.bind(this));
+    this.#openmct.router.route(/^\/browse\/(.*)$/, this.#handleBrowseRoute.bind(this));
+    this.#openmct.router.on('change:params', this.#onParamsChanged.bind(this));
+  }
+
+  #onParamsChanged(newParams, oldParams, changed) {
+    if (this.#isRoutingInProgress) {
+      return;
+    }
+
+    if (changed.view && this.#browseObject) {
+      const provider = this.#openmct.objectViews.getByProviderKey(changed.view);
+      this.#viewObject(this.#browseObject, provider);
+    }
+  }
+
+  #viewObject(object, viewProvider) {
+    this.#currentObjectPath = this.#openmct.router.path;
+
+    this.#openmct.layout.$refs.browseObject.show(
+      object,
+      viewProvider.key,
+      true,
+      this.#currentObjectPath
+    );
+    this.#openmct.layout.$refs.browseBar.domainObject = object;
+    this.#openmct.layout.$refs.browseBar.viewKey = viewProvider.key;
+  }
+
+  #updateDocumentTitleOnNameMutation(newName) {
+    if (typeof newName === 'string' && newName !== document.title) {
+      document.title = newName;
+      this.#openmct.layout.$refs.browseBar.domainObject = {
+        ...this.#openmct.layout.$refs.browseBar.domainObject,
+        name: newName
+      };
+    }
+  }
+
+  async #navigateToPath(path, currentViewKey) {
+    this.#navigateCall++;
+    const currentNavigation = this.#navigateCall;
+
+    if (this.#unobserve) {
+      this.#unobserve();
+      this.#unobserve = undefined;
+    }
+
+    if (!Array.isArray(path)) {
+      path = path.split('/');
+    }
+
+    let objects = await this.#pathToObjects(path);
+    if (currentNavigation !== this.#navigateCall) {
+      return; // Prevent race.
+    }
+    this.#isRoutingInProgress = false;
+    objects = objects.reverse();
+    this.#openmct.router.path = objects;
+    this.#browseObject = objects[0];
+    this.#openmct.router.emit('afterNavigation');
+    this.#openmct.layout.$refs.browseBar.domainObject = this.#browseObject;
+    if (!this.#browseObject) {
+      this.#openmct.layout.$refs.browseObject.clear();
+      return;
+    }
+    document.title = this.#browseObject.name; //change document title to current object in main view
+    this.#unobserve = this.#openmct.objects.observe(
+      this.#browseObject,
+      'name',
+      this.#updateDocumentTitleOnNameMutation.bind(this)
+    );
+    const currentProvider = this.#openmct.objectViews.getByProviderKey(currentViewKey);
+    if (currentProvider && currentProvider.canView(this.#browseObject, this.#openmct.router.path)) {
+      this.#viewObject(this.#browseObject, currentProvider);
+      return;
+    }
+    const routerPath = this.#openmct.router.path;
+    const retrievedObjectViews = this.#openmct.objectViews.get(this.#browseObject, routerPath);
+    const defaultProvider = retrievedObjectViews?.[0];
+    if (defaultProvider) {
+      this.#openmct.router.updateParams({ view: defaultProvider.key });
+    } else {
+      this.#openmct.router.updateParams({ view: undefined });
+      this.#openmct.layout.$refs.browseObject.clear();
+    }
+  }
+
+  #pathToObjects(path) {
+    return Promise.all(
+      path.map((keyString) => {
+        const identifier = this.#openmct.objects.parseKeyString(keyString);
+        return this.#openmct.objects.supportsMutation(identifier)
+          ? this.#openmct.objects.getMutable(identifier)
+          : this.#openmct.objects.get(identifier);
+      })
+    );
+  }
+
+  async #navigateToFirstChildOfRoot() {
+    try {
+      const rootObject = await this.#openmct.objects.get('ROOT');
+      const composition = this.#openmct.composition.get(rootObject);
+      if (!composition) {
+        return;
+      }
+
+      const children = await composition.load();
+      const lastChild = children[children.length - 1];
+      if (lastChild) {
+        const lastChildId = this.#openmct.objects.makeKeyString(lastChild.identifier);
+        this.#openmct.router.setPath(`#/browse/${lastChildId}`);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  #clearMutationListeners() {
+    if (this.#openmct.router.path) {
+      this.#openmct.router.path.forEach((pathObject) => {
+        if (pathObject.isMutable) {
+          this.#openmct.objects.destroyMutable(pathObject);
         }
-    };
-});
+      });
+    }
+  }
+
+  #handleBrowseRoute(path, results, params) {
+    this.#isRoutingInProgress = true;
+    const navigatePath = results[1];
+    this.#clearMutationListeners();
+    this.#navigateToPath(navigatePath, params.view);
+  }
+}
diff --git a/src/ui/toolbar/Toolbar.vue b/src/ui/toolbar/Toolbar.vue
deleted file mode 100644
index 64fcbad2f46..00000000000
--- a/src/ui/toolbar/Toolbar.vue
+++ /dev/null
@@ -1,291 +0,0 @@
-<template>
-<div class="c-toolbar">
-    <div class="c-toolbar__element-controls">
-        <component
-            :is="item.control"
-            v-for="(item, index) in primaryStructure"
-            :key="index"
-            :options="item"
-            @change="updateObjectValue"
-            @click="triggerMethod(item, $event)"
-        />
-    </div>
-    <div class="c-toolbar__dimensions-and-controls">
-        <component
-            :is="item.control"
-            v-for="(item, index) in secondaryStructure"
-            :key="index"
-            :options="item"
-            @change="updateObjectValue"
-            @click="triggerMethod(item, $event)"
-        />
-    </div>
-</div>
-</template>
-
-<script>
-import toolbarButton from './components/toolbar-button.vue';
-import toolbarColorPicker from './components/toolbar-color-picker.vue';
-import toolbarCheckbox from './components/toolbar-checkbox.vue';
-import toolbarInput from './components/toolbar-input.vue';
-import toolbarMenu from './components/toolbar-menu.vue';
-import toolbarSelectMenu from './components/toolbar-select-menu.vue';
-import toolbarSeparator from './components/toolbar-separator.vue';
-import toolbarToggleButton from './components/toolbar-toggle-button.vue';
-
-import _ from 'lodash';
-
-export default {
-    components: {
-        toolbarButton,
-        toolbarColorPicker,
-        toolbarCheckbox,
-        toolbarInput,
-        toolbarMenu,
-        toolbarSelectMenu,
-        toolbarSeparator,
-        toolbarToggleButton
-    },
-    inject: ['openmct'],
-    data: function () {
-        return {
-            structure: []
-        };
-    },
-    computed: {
-        primaryStructure() {
-            return this.structure.filter(item => !item.secondary);
-        },
-        secondaryStructure() {
-            return this.structure.filter(item => item.secondary);
-        }
-    },
-    mounted() {
-        this.openmct.selection.on('change', this.handleSelection);
-        this.handleSelection(this.openmct.selection.get());
-
-        // Toolbars may change when edit mode is enabled/disabled, so listen
-        // for edit mode changes and update toolbars if necessary.
-        this.openmct.editor.on('isEditing', this.handleEditing);
-    },
-    methods: {
-        handleSelection(selection) {
-            this.removeListeners();
-            this.domainObjectsById = {};
-
-            if (selection.length === 0 || !selection[0][0]) {
-                this.structure = [];
-
-                return;
-            }
-
-            let structure = this.openmct.toolbars.get(selection) || [];
-            this.structure = structure.map(toolbarItem => {
-                let domainObject = toolbarItem.domainObject;
-                let formKeys = [];
-                toolbarItem.control = "toolbar-" + toolbarItem.control;
-
-                if (toolbarItem.dialog) {
-                    toolbarItem.dialog.sections.forEach(section => {
-                        section.rows.forEach(row => {
-                            formKeys.push(row.key);
-                        });
-                    });
-                    toolbarItem.formKeys = formKeys;
-                }
-
-                if (domainObject) {
-                    toolbarItem.value = this.getValue(domainObject, toolbarItem);
-                    this.registerListener(domainObject);
-                }
-
-                return toolbarItem;
-            });
-        },
-        registerListener(domainObject) {
-            let id = this.openmct.objects.makeKeyString(domainObject.identifier);
-
-            if (!this.domainObjectsById[id]) {
-                this.domainObjectsById[id] = {
-                    domainObject: domainObject
-                };
-                this.observeObject(domainObject, id);
-            }
-        },
-        observeObject(domainObject, id) {
-            let unobserveObject = this.openmct.objects.observe(domainObject, '*', function (newObject) {
-                this.domainObjectsById[id].newObject = JSON.parse(JSON.stringify(newObject));
-                this.updateToolbarAfterMutation();
-            }.bind(this));
-            this.unObserveObjects.push(unobserveObject);
-        },
-        updateToolbarAfterMutation() {
-            this.structure = this.structure.map(toolbarItem => {
-                let domainObject = toolbarItem.domainObject;
-
-                if (domainObject) {
-                    let id = this.openmct.objects.makeKeyString(domainObject.identifier);
-                    let newObject = this.domainObjectsById[id].newObject;
-
-                    if (newObject) {
-                        toolbarItem.domainObject = newObject;
-                        toolbarItem.value = this.getValue(newObject, toolbarItem);
-                    }
-                }
-
-                return toolbarItem;
-            });
-
-            Object.values(this.domainObjectsById).forEach(function (tracker) {
-                if (tracker.newObject) {
-                    tracker.domainObject = tracker.newObject;
-                    delete tracker.newObject;
-                }
-            });
-        },
-        getValue(domainObject, toolbarItem) {
-            let value = undefined;
-            let applicableSelectedItems = toolbarItem.applicableSelectedItems;
-
-            if (!applicableSelectedItems && !toolbarItem.property) {
-                return value;
-            }
-
-            if (toolbarItem.formKeys) {
-                value = this.getFormValue(domainObject, toolbarItem);
-            } else {
-                let values = [];
-                if (applicableSelectedItems) {
-                    applicableSelectedItems.forEach(selectionPath => {
-                        values.push(this.getPropertyValue(domainObject, toolbarItem, selectionPath));
-                    });
-                } else {
-                    values.push(this.getPropertyValue(domainObject, toolbarItem));
-                }
-
-                // If all values are the same, use it, otherwise mark the item as non-specific.
-                if (values.every(val => val === values[0])) {
-                    value = values[0];
-                    toolbarItem.nonSpecific = false;
-                } else {
-                    toolbarItem.nonSpecific = true;
-                }
-            }
-
-            return value;
-        },
-        getPropertyValue(domainObject, toolbarItem, selectionPath, formKey) {
-            let property = this.getItemProperty(toolbarItem, selectionPath);
-
-            if (formKey) {
-                property = property + "." + formKey;
-            }
-
-            return _.get(domainObject, property);
-        },
-        getFormValue(domainObject, toolbarItem) {
-            let value = {};
-            let values = {};
-
-            toolbarItem.formKeys.forEach(key => {
-                values[key] = [];
-
-                if (toolbarItem.applicableSelectedItems) {
-                    toolbarItem.applicableSelectedItems.forEach(selectionPath => {
-                        values[key].push(this.getPropertyValue(domainObject, toolbarItem, selectionPath, key));
-                    });
-                } else {
-                    values[key].push(this.getPropertyValue(domainObject, toolbarItem, undefined, key));
-                }
-            });
-
-            for (let key in values) {
-                if (values[key].every(val => val === values[key][0])) {
-                    value[key] = values[key][0];
-                    toolbarItem.nonSpecific = false;
-                } else {
-                    toolbarItem.nonSpecific = true;
-
-                    return {};
-                }
-            }
-
-            return value;
-        },
-        getItemProperty(item, selectionPath) {
-            return (typeof item.property === "function") ? item.property(selectionPath) : item.property;
-        },
-        removeListeners() {
-            if (this.unObserveObjects) {
-                this.unObserveObjects.forEach((unObserveObject) => {
-                    unObserveObject();
-                });
-            }
-
-            this.unObserveObjects = [];
-        },
-        updateObjectValue(value, item) {
-            let changedItemId = this.openmct.objects.makeKeyString(item.domainObject.identifier);
-            this.structure = this.structure.map(toolbarItem => {
-                if (toolbarItem.domainObject) {
-                    let id = this.openmct.objects.makeKeyString(toolbarItem.domainObject.identifier);
-
-                    if (changedItemId === id && _.isEqual(toolbarItem, item)) {
-                        toolbarItem.value = value;
-                    }
-                }
-
-                return toolbarItem;
-            });
-
-            // If value is an object, iterate the toolbar structure and mutate all keys in form.
-            // Otherwise, mutate the property.
-            if (value === Object(value)) {
-                this.structure.forEach(s => {
-                    if (s.formKeys) {
-                        s.formKeys.forEach(key => {
-                            if (item.applicableSelectedItems) {
-                                item.applicableSelectedItems.forEach(selectionPath => {
-                                    this.mutateObject(item, value[key], selectionPath, key);
-                                });
-                            } else {
-                                this.mutateObject(item, value[key], undefined, key);
-                            }
-                        });
-                    }
-                });
-            } else {
-                if (item.applicableSelectedItems) {
-                    item.applicableSelectedItems.forEach(selectionPath => {
-                        this.mutateObject(item, value, selectionPath);
-                    });
-                } else {
-                    this.mutateObject(item, value);
-                }
-            }
-        },
-        mutateObject(item, value, selectionPath, formKey) {
-            let property = this.getItemProperty(item, selectionPath);
-
-            if (formKey) {
-                property = property + "." + formKey;
-            }
-
-            this.openmct.objects.mutate(item.domainObject, property, value);
-        },
-        triggerMethod(item, event) {
-            if (item.method) {
-                item.method({...event});
-            }
-        },
-        handleEditing(isEditing) {
-            this.handleSelection(this.openmct.selection.get());
-        }
-    },
-    detroyed() {
-        this.openmct.selection.off('change', this.handleSelection);
-        this.openmct.editor.off('isEditing', this.handleEditing);
-        this.removeListeners();
-    }
-};
-</script>
diff --git a/src/ui/toolbar/ToolbarContainer.vue b/src/ui/toolbar/ToolbarContainer.vue
new file mode 100644
index 00000000000..e9a42c0db5c
--- /dev/null
+++ b/src/ui/toolbar/ToolbarContainer.vue
@@ -0,0 +1,316 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div role="menubar" class="c-toolbar">
+    <div class="c-toolbar__element-controls">
+      <component
+        :is="item.control"
+        v-for="(item, index) in primaryStructure"
+        :key="index"
+        :options="item"
+        @change="updateObjectValue"
+        @click="triggerMethod(item, $event)"
+      />
+    </div>
+    <div class="c-toolbar__dimensions-and-controls">
+      <component
+        :is="item.control"
+        v-for="(item, index) in secondaryStructure"
+        :key="index"
+        :options="item"
+        @change="updateObjectValue"
+        @click="triggerMethod(item, $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+
+import ToolbarButton from './components/ToolbarButton.vue';
+import ToolbarCheckbox from './components/ToolbarCheckbox.vue';
+import ToolbarColorPicker from './components/ToolbarColorPicker.vue';
+import ToolbarInput from './components/ToolbarInput.vue';
+import ToolbarMenu from './components/ToolbarMenu.vue';
+import ToolbarSelectMenu from './components/ToolbarSelectMenu.vue';
+import ToolbarSeparator from './components/ToolbarSeparator.vue';
+import ToolbarToggleButton from './components/ToolbarToggleButton.vue';
+
+export default {
+  components: {
+    ToolbarButton,
+    ToolbarColorPicker,
+    ToolbarCheckbox,
+    ToolbarInput,
+    ToolbarMenu,
+    ToolbarSelectMenu,
+    ToolbarSeparator,
+    ToolbarToggleButton
+  },
+  inject: ['openmct'],
+  data: function () {
+    return {
+      structure: []
+    };
+  },
+  computed: {
+    primaryStructure() {
+      return this.structure.filter((item) => !item.secondary);
+    },
+    secondaryStructure() {
+      return this.structure.filter((item) => item.secondary);
+    }
+  },
+  mounted() {
+    this.openmct.selection.on('change', this.handleSelection);
+    this.handleSelection(this.openmct.selection.get());
+
+    // Toolbars may change when edit mode is enabled/disabled, so listen
+    // for edit mode changes and update toolbars if necessary.
+    this.openmct.editor.on('isEditing', this.handleEditing);
+  },
+  beforeUnmount() {
+    this.openmct.selection.off('change', this.handleSelection);
+    this.openmct.editor.off('isEditing', this.handleEditing);
+    this.removeListeners();
+  },
+  methods: {
+    handleSelection(selection) {
+      this.removeListeners();
+      this.domainObjectsById = {};
+
+      if (selection.length === 0 || !selection[0][0]) {
+        this.structure = [];
+
+        return;
+      }
+
+      let structure = this.openmct.toolbars.get(selection) || [];
+      this.structure = structure.map((toolbarItem) => {
+        let domainObject = toolbarItem.domainObject;
+        let formKeys = [];
+        toolbarItem.control = 'toolbar-' + toolbarItem.control;
+
+        if (toolbarItem.dialog) {
+          toolbarItem.dialog.sections.forEach((section) => {
+            section.rows.forEach((row) => {
+              formKeys.push(row.key);
+            });
+          });
+          toolbarItem.formKeys = formKeys;
+        }
+
+        if (domainObject) {
+          toolbarItem.value = this.getValue(domainObject, toolbarItem);
+          this.registerListener(domainObject);
+        }
+
+        return toolbarItem;
+      });
+    },
+    registerListener(domainObject) {
+      let id = this.openmct.objects.makeKeyString(domainObject.identifier);
+
+      if (!this.domainObjectsById[id]) {
+        this.domainObjectsById[id] = {
+          domainObject: domainObject
+        };
+        this.observeObject(domainObject, id);
+      }
+    },
+    observeObject(domainObject, id) {
+      let unobserveObject = this.openmct.objects.observe(
+        domainObject,
+        '*',
+        function (newObject) {
+          this.domainObjectsById[id].newObject = newObject;
+          this.updateToolbarAfterMutation();
+        }.bind(this)
+      );
+      this.unObserveObjects.push(unobserveObject);
+    },
+    updateToolbarAfterMutation() {
+      this.structure = this.structure.map((toolbarItem) => {
+        let domainObject = toolbarItem.domainObject;
+
+        if (domainObject) {
+          let id = this.openmct.objects.makeKeyString(domainObject.identifier);
+          let newObject = this.domainObjectsById[id].newObject;
+
+          if (newObject) {
+            toolbarItem.domainObject = newObject;
+            toolbarItem.value = this.getValue(newObject, toolbarItem);
+          }
+        }
+
+        return toolbarItem;
+      });
+
+      Object.values(this.domainObjectsById).forEach(function (tracker) {
+        if (tracker.newObject) {
+          tracker.domainObject = tracker.newObject;
+          delete tracker.newObject;
+        }
+      });
+    },
+    getValue(domainObject, toolbarItem) {
+      let value = undefined;
+      let applicableSelectedItems = toolbarItem.applicableSelectedItems;
+
+      if (!applicableSelectedItems && !toolbarItem.property) {
+        return value;
+      }
+
+      if (toolbarItem.formKeys) {
+        value = this.getFormValue(domainObject, toolbarItem);
+      } else {
+        let values = [];
+        if (applicableSelectedItems) {
+          applicableSelectedItems.forEach((selectionPath) => {
+            values.push(this.getPropertyValue(domainObject, toolbarItem, selectionPath));
+          });
+        } else {
+          values.push(this.getPropertyValue(domainObject, toolbarItem));
+        }
+
+        // If all values are the same, use it, otherwise mark the item as non-specific.
+        if (values.every((val) => val === values[0])) {
+          value = values[0];
+          toolbarItem.nonSpecific = false;
+        } else {
+          toolbarItem.nonSpecific = true;
+        }
+      }
+
+      return value;
+    },
+    getPropertyValue(domainObject, toolbarItem, selectionPath, formKey) {
+      let property = this.getItemProperty(toolbarItem, selectionPath);
+
+      if (formKey) {
+        property = property + '.' + formKey;
+      }
+
+      return _.get(domainObject, property);
+    },
+    getFormValue(domainObject, toolbarItem) {
+      let value = {};
+      let values = {};
+
+      toolbarItem.formKeys.forEach((key) => {
+        values[key] = [];
+
+        if (toolbarItem.applicableSelectedItems) {
+          toolbarItem.applicableSelectedItems.forEach((selectionPath) => {
+            values[key].push(this.getPropertyValue(domainObject, toolbarItem, selectionPath, key));
+          });
+        } else {
+          values[key].push(this.getPropertyValue(domainObject, toolbarItem, undefined, key));
+        }
+      });
+
+      for (let key in values) {
+        if (values[key].every((val) => val === values[key][0])) {
+          value[key] = values[key][0];
+          toolbarItem.nonSpecific = false;
+        } else {
+          toolbarItem.nonSpecific = true;
+
+          return {};
+        }
+      }
+
+      return value;
+    },
+    getItemProperty(item, selectionPath) {
+      return typeof item.property === 'function' ? item.property(selectionPath) : item.property;
+    },
+    removeListeners() {
+      if (this.unObserveObjects) {
+        this.unObserveObjects.forEach((unObserveObject) => {
+          unObserveObject();
+        });
+      }
+
+      this.unObserveObjects = [];
+    },
+    updateObjectValue(value, item) {
+      let changedItemId = this.openmct.objects.makeKeyString(item.domainObject.identifier);
+      this.structure = this.structure.map((toolbarItem) => {
+        if (toolbarItem.domainObject) {
+          let id = this.openmct.objects.makeKeyString(toolbarItem.domainObject.identifier);
+
+          if (changedItemId === id && _.isEqual(toolbarItem, item)) {
+            toolbarItem.value = value;
+          }
+        }
+
+        return toolbarItem;
+      });
+
+      // If value is an object, iterate the toolbar structure and mutate all keys in form.
+      // Otherwise, mutate the property.
+      if (value === Object(value)) {
+        this.structure.forEach((s) => {
+          if (s.formKeys) {
+            s.formKeys.forEach((key) => {
+              if (item.applicableSelectedItems) {
+                item.applicableSelectedItems.forEach((selectionPath) => {
+                  this.mutateObject(item, value[key], selectionPath, key);
+                });
+              } else {
+                this.mutateObject(item, value[key], undefined, key);
+              }
+            });
+          }
+        });
+      } else {
+        if (item.applicableSelectedItems) {
+          item.applicableSelectedItems.forEach((selectionPath) => {
+            this.mutateObject(item, value, selectionPath);
+          });
+        } else {
+          this.mutateObject(item, value);
+        }
+      }
+    },
+    mutateObject(item, value, selectionPath, formKey) {
+      let property = this.getItemProperty(item, selectionPath);
+
+      if (formKey) {
+        property = property + '.' + formKey;
+      }
+
+      this.openmct.objects.mutate(item.domainObject, property, value);
+    },
+    triggerMethod(item, event) {
+      if (item.method) {
+        item.method({ ...event });
+      }
+    },
+    handleEditing(isEditing) {
+      this.handleSelection(this.openmct.selection.get());
+    }
+  }
+};
+</script>
diff --git a/src/ui/toolbar/components/ToolbarButton.vue b/src/ui/toolbar/components/ToolbarButton.vue
new file mode 100644
index 00000000000..90c2120cc54
--- /dev/null
+++ b/src/ui/toolbar/components/ToolbarButton.vue
@@ -0,0 +1,95 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="c-ctrl-wrapper">
+    <div
+      ref="button"
+      class="c-icon-button"
+      role="menuitem"
+      :aria-label="options.title"
+      :title="options.title"
+      :class="{
+        [options.icon]: true,
+        'c-icon-button--caution': options.modifier === 'caution',
+        'c-icon-button--mixed': nonSpecific
+      }"
+      @click="onClick"
+    >
+      <div v-if="options.label" class="c-icon-button__label">
+        {{ options.label }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  inject: ['openmct'],
+  props: {
+    options: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['change', 'click'],
+  computed: {
+    nonSpecific() {
+      return this.options.nonSpecific === true;
+    }
+  },
+  methods: {
+    onClick(event) {
+      const self = this;
+
+      if ((self.options.isEditing === undefined || self.options.isEditing) && self.options.dialog) {
+        this.updateFormStructure();
+
+        self.openmct.forms
+          .showForm(self.options.dialog)
+          .then((changes) => {
+            self.$emit('change', { ...changes }, self.options);
+          })
+          .catch((e) => {
+            // canceled, do nothing
+          });
+      }
+
+      self.$emit('click', self.options);
+    },
+    updateFormStructure() {
+      if (!this.options.value) {
+        return;
+      }
+
+      Object.entries(this.options.value).forEach(([key, value]) => {
+        this.options.dialog.sections.forEach((section) => {
+          section.rows.forEach((row) => {
+            if (row.key === key) {
+              row.value = value;
+            }
+          });
+        });
+      });
+    }
+  }
+};
+</script>
diff --git a/src/ui/toolbar/components/ToolbarCheckbox.vue b/src/ui/toolbar/components/ToolbarCheckbox.vue
new file mode 100644
index 00000000000..6f3e9d10c51
--- /dev/null
+++ b/src/ui/toolbar/components/ToolbarCheckbox.vue
@@ -0,0 +1,66 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="c-custom-checkbox">
+    <input
+      :id="uid"
+      type="checkbox"
+      :name="options.name"
+      :checked="options.value"
+      :disabled="options.disabled"
+      @change="onChange"
+    />
+
+    <label :for="uid">
+      <div class="c-custom-checkbox__box"></div>
+      <div class="c-custom-checkbox__label-text">
+        {{ options.name }}
+      </div>
+    </label>
+  </div>
+</template>
+
+<script>
+let uniqueId = 100;
+
+export default {
+  props: {
+    options: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['change'],
+  data() {
+    uniqueId++;
+
+    return {
+      uid: `mct-checkbox-id-${uniqueId}`
+    };
+  },
+  methods: {
+    onChange(event) {
+      this.$emit('change', event.target.checked, { ...this.options });
+    }
+  }
+};
+</script>
diff --git a/src/ui/toolbar/components/ToolbarColorPicker.vue b/src/ui/toolbar/components/ToolbarColorPicker.vue
new file mode 100644
index 00000000000..3046024301c
--- /dev/null
+++ b/src/ui/toolbar/components/ToolbarColorPicker.vue
@@ -0,0 +1,181 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="c-ctrl-wrapper">
+    <button
+      class="c-icon-button c-icon-button--swatched"
+      :class="[options.icon, { 'c-icon-button--mixed': nonSpecific }]"
+      :title="options.title"
+      :aria-label="options.title"
+      @click="handleClick"
+    >
+      <div
+        class="c-swatch"
+        :style="{ background: options.value }"
+        role="img"
+        aria-label="None"
+      ></div>
+    </button>
+    <div v-if="open" class="c-menu c-palette c-palette--color">
+      <div
+        v-if="!options.preventNone"
+        class="c-palette__item-none"
+        role="grid"
+        aria-label="No Style"
+        @click="select({ value: 'transparent' })"
+      >
+        <div class="c-palette__item"></div>
+        None
+      </div>
+      <div class="c-palette__items">
+        <div
+          v-for="(color, index) in colorPalette"
+          :key="index"
+          role="gridcell"
+          class="c-palette__item"
+          :style="{ background: color.value }"
+          :title="color.value"
+          :aria-label="color.value"
+          @click="select(color)"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import toggleMixin from '../../mixins/toggle-mixin.js';
+
+export default {
+  mixins: [toggleMixin],
+  props: {
+    options: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['change'],
+  data() {
+    return {
+      colorPalette: [
+        { value: '#000000' },
+        { value: '#434343' },
+        { value: '#666666' },
+        { value: '#999999' },
+        { value: '#b7b7b7' },
+        { value: '#cccccc' },
+        { value: '#d9d9d9' },
+        { value: '#efefef' },
+        { value: '#f3f3f3' },
+        { value: '#ffffff' },
+        { value: '#980000' },
+        { value: '#ff0000' },
+        { value: '#ff9900' },
+        { value: '#ffff00' },
+        { value: '#00ff00' },
+        { value: '#00ffff' },
+        { value: '#4a86e8' },
+        { value: '#0000ff' },
+        { value: '#9900ff' },
+        { value: '#ff00ff' },
+        { value: '#e6b8af' },
+        { value: '#f4cccc' },
+        { value: '#fce5cd' },
+        { value: '#fff2cc' },
+        { value: '#d9ead3' },
+        { value: '#d0e0e3' },
+        { value: '#c9daf8' },
+        { value: '#cfe2f3' },
+        { value: '#d9d2e9' },
+        { value: '#ead1dc' },
+        { value: '#dd7e6b' },
+        { value: '#dd7e6b' },
+        { value: '#f9cb9c' },
+        { value: '#ffe599' },
+        { value: '#b6d7a8' },
+        { value: '#a2c4c9' },
+        { value: '#a4c2f4' },
+        { value: '#9fc5e8' },
+        { value: '#b4a7d6' },
+        { value: '#d5a6bd' },
+        { value: '#cc4125' },
+        { value: '#e06666' },
+        { value: '#f6b26b' },
+        { value: '#ffd966' },
+        { value: '#93c47d' },
+        { value: '#76a5af' },
+        { value: '#6d9eeb' },
+        { value: '#6fa8dc' },
+        { value: '#8e7cc3' },
+        { value: '#c27ba0' },
+        { value: '#a61c00' },
+        { value: '#cc0000' },
+        { value: '#e69138' },
+        { value: '#f1c232' },
+        { value: '#6aa84f' },
+        { value: '#45818e' },
+        { value: '#3c78d8' },
+        { value: '#3d85c6' },
+        { value: '#674ea7' },
+        { value: '#a64d79' },
+        { value: '#85200c' },
+        { value: '#990000' },
+        { value: '#b45f06' },
+        { value: '#bf9000' },
+        { value: '#38761d' },
+        { value: '#134f5c' },
+        { value: '#1155cc' },
+        { value: '#0b5394' },
+        { value: '#351c75' },
+        { value: '#741b47' },
+        { value: '#5b0f00' },
+        { value: '#660000' },
+        { value: '#783f04' },
+        { value: '#7f6000' },
+        { value: '#274e13' },
+        { value: '#0c343d' },
+        { value: '#1c4587' },
+        { value: '#073763' },
+        { value: '#20124d' },
+        { value: '#4c1130' }
+      ]
+    };
+  },
+  computed: {
+    nonSpecific() {
+      return this.options.nonSpecific === true;
+    }
+  },
+  methods: {
+    select(color) {
+      if (color.value !== this.options.value) {
+        this.$emit('change', color.value, this.options);
+      }
+    },
+    handleClick(event) {
+      if (this.options.isEditing === undefined || this.options.isEditing) {
+        this.toggle(event);
+      }
+    }
+  }
+};
+</script>
diff --git a/src/ui/toolbar/components/ToolbarInput.vue b/src/ui/toolbar/components/ToolbarInput.vue
new file mode 100644
index 00000000000..2fdc56fe00d
--- /dev/null
+++ b/src/ui/toolbar/components/ToolbarInput.vue
@@ -0,0 +1,75 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="c-labeled-input" :title="options.title">
+    <label :for="uid">
+      <div class="c-labeled-input__label">{{ options.label }}</div>
+    </label>
+    <input v-bind="options.attrs" :id="uid" :type="options.type" :value="options.value" />
+  </div>
+</template>
+
+<script>
+let inputUniqueId = 100;
+
+export default {
+  props: {
+    options: {
+      type: Object,
+      required: true,
+      validator(value) {
+        return ['number', 'text'].indexOf(value.type) !== -1;
+      }
+    }
+  },
+  emits: ['change'],
+  data() {
+    inputUniqueId++;
+
+    return {
+      uid: `mct-input-id-${inputUniqueId}`
+    };
+  },
+  mounted() {
+    if (this.options.type === 'number') {
+      this.$el.addEventListener('input', this.onInput);
+    } else {
+      this.$el.addEventListener('change', this.onChange);
+    }
+  },
+  beforeUnmount() {
+    if (this.options.type === 'number') {
+      this.$el.removeEventListener('input', this.onInput);
+    } else {
+      this.$el.removeEventListener('change', this.onChange);
+    }
+  },
+  methods: {
+    onChange(event) {
+      this.$emit('change', event.target.value, this.options);
+    },
+    onInput(event) {
+      this.$emit('change', event.target.valueAsNumber, this.options);
+    }
+  }
+};
+</script>
diff --git a/src/ui/toolbar/components/ToolbarMenu.vue b/src/ui/toolbar/components/ToolbarMenu.vue
new file mode 100644
index 00000000000..91ce5332a76
--- /dev/null
+++ b/src/ui/toolbar/components/ToolbarMenu.vue
@@ -0,0 +1,74 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="c-ctrl-wrapper">
+    <div
+      class="c-icon-button c-icon-button--menu"
+      :class="options.icon"
+      :title="options.title"
+      @click="toggle"
+    >
+      <div v-if="options.label" class="c-icon-button__label">
+        {{ options.label }}
+      </div>
+    </div>
+    <div v-if="open" class="c-menu" role="menu">
+      <ul>
+        <li
+          v-for="(option, index) in options.options"
+          :key="index"
+          :class="option.class"
+          role="menuitem"
+          :aria-labelledby="`${option.name}-menuitem-label`"
+          @click="onClick(option)"
+        >
+          <span :id="`${option.name}-menuitem-label`">
+            {{ option.name }}
+          </span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import toggle from '../../mixins/toggle-mixin.js';
+export default {
+  mixins: [toggle],
+  props: {
+    options: {
+      type: Object,
+      required: true,
+      validator(value) {
+        // must pass valid options array.
+        return Array.isArray(value.options) && value.options.every((o) => o.name);
+      }
+    }
+  },
+  emits: ['click'],
+  methods: {
+    onClick(option) {
+      this.$emit('click', option);
+    }
+  }
+};
+</script>
diff --git a/src/ui/toolbar/components/ToolbarSelectMenu.vue b/src/ui/toolbar/components/ToolbarSelectMenu.vue
new file mode 100644
index 00000000000..b6da5f8c04d
--- /dev/null
+++ b/src/ui/toolbar/components/ToolbarSelectMenu.vue
@@ -0,0 +1,84 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="c-ctrl-wrapper">
+    <div
+      class="c-icon-button c-icon-button--menu"
+      :class="[options.icon, { 'c-click-icon--mixed': nonSpecific }]"
+      :title="options.title"
+      @click="toggle"
+    >
+      <div class="c-button__label">
+        {{ selectedName }}
+      </div>
+    </div>
+    <div v-if="open" class="c-menu">
+      <ul>
+        <li v-for="option in options.options" :key="option.value" @click="select(option)">
+          {{ option.name || option.value }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import toggleMixin from '../../mixins/toggle-mixin.js';
+
+export default {
+  mixins: [toggleMixin],
+  props: {
+    options: {
+      type: Object,
+      required: true,
+      validator(value) {
+        // must pass valid options array.
+        return Array.isArray(value.options) && value.options.every((o) => o.value);
+      }
+    }
+  },
+  emits: ['change'],
+  computed: {
+    selectedName() {
+      let selectedOption = this.options.options.filter((o) => o.value === this.options.value)[0];
+      if (selectedOption) {
+        return selectedOption.name || selectedOption.value;
+      }
+
+      // If no selected option, then options are non-specific
+      return '??';
+    },
+    nonSpecific() {
+      return this.options.nonSpecific === true;
+    }
+  },
+  methods: {
+    select(option) {
+      if (this.options.value === option.value) {
+        return;
+      }
+
+      this.$emit('change', option.value, this.options);
+    }
+  }
+};
+</script>
diff --git a/src/ui/toolbar/components/ToolbarSeparator.vue b/src/ui/toolbar/components/ToolbarSeparator.vue
new file mode 100644
index 00000000000..c18faadcc06
--- /dev/null
+++ b/src/ui/toolbar/components/ToolbarSeparator.vue
@@ -0,0 +1,35 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div role="separator" class="c-toolbar__separator"></div>
+</template>
+
+<script>
+export default {
+  props: {
+    options: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
diff --git a/src/ui/toolbar/components/ToolbarToggleButton.vue b/src/ui/toolbar/components/ToolbarToggleButton.vue
new file mode 100644
index 00000000000..728f2cba4a7
--- /dev/null
+++ b/src/ui/toolbar/components/ToolbarToggleButton.vue
@@ -0,0 +1,68 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="c-ctrl-wrapper">
+    <div
+      class="c-icon-button"
+      :title="nextValue.title"
+      :class="[nextValue.icon, { 'c-icon-button--mixed': nonSpecific }]"
+      @click="cycle"
+    >
+      <div v-if="nextValue.label" class="c-icon-button__label">
+        {{ nextValue.label }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    options: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['change'],
+  computed: {
+    nextValue() {
+      let currentValue = this.options.options.filter((v) => this.options.value === v.value)[0];
+      let nextIndex = this.options.options.indexOf(currentValue) + 1;
+      if (nextIndex >= this.options.options.length) {
+        nextIndex = 0;
+      }
+
+      return this.options.options[nextIndex];
+    },
+    nonSpecific() {
+      return this.options.nonSpecific === true;
+    }
+  },
+  methods: {
+    cycle() {
+      if (this.options.isEditing === undefined || this.options.isEditing) {
+        this.$emit('change', this.nextValue.value, this.options);
+      }
+    }
+  }
+};
+</script>
diff --git a/src/ui/toolbar/components/toolbar-button.vue b/src/ui/toolbar/components/toolbar-button.vue
deleted file mode 100644
index a6d857910f0..00000000000
--- a/src/ui/toolbar/components/toolbar-button.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-<div class="c-ctrl-wrapper">
-    <div
-        class="c-icon-button"
-        :title="options.title"
-        :class="{
-            [options.icon]: true,
-            'c-icon-button--caution': options.modifier === 'caution',
-            'c-icon-button--mixed': nonSpecific
-        }"
-        @click="onClick"
-    >
-        <div
-            v-if="options.label"
-            class="c-icon-button__label"
-        >
-            {{ options.label }}
-        </div>
-    </div>
-</div>
-</template>
-
-<script>
-export default {
-    inject: ['openmct'],
-    props: {
-        options: {
-            type: Object,
-            required: true
-        }
-    },
-    computed: {
-        nonSpecific() {
-            return this.options.nonSpecific === true;
-        }
-    },
-    methods: {
-        onClick(event) {
-            if ((this.options.isEditing === undefined || this.options.isEditing) && this.options.dialog) {
-                this.openmct.$injector.get('dialogService')
-                    .getUserInput(this.options.dialog, this.options.value)
-                    .then(value => {
-                        this.$emit('change', {...value}, this.options);
-                    });
-            }
-
-            this.$emit('click', this.options);
-        }
-    }
-};
-</script>
diff --git a/src/ui/toolbar/components/toolbar-checkbox.scss b/src/ui/toolbar/components/toolbar-checkbox.scss
index 1614a970761..6c90987d79c 100644
--- a/src/ui/toolbar/components/toolbar-checkbox.scss
+++ b/src/ui/toolbar/components/toolbar-checkbox.scss
@@ -1,45 +1,45 @@
 .c-custom-checkbox {
-    $d: 14px;
+  $d: 14px;
+  display: flex;
+  align-items: center;
+
+  label {
+    @include userSelectNone();
     display: flex;
     align-items: center;
+  }
 
-    label {
-        @include userSelectNone();
-        display: flex;
-        align-items: center;
-    }
-
-    &__box {
-        @include nice-input();
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        line-height: $d;
-        width: $d;
-        height: $d;
-        margin-right: $interiorMarginSm;
-    }
+  &__box {
+    @include nice-input();
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: $d;
+    width: $d;
+    height: $d;
+    margin-right: $interiorMarginSm;
+  }
 
-    input {
-        opacity: 0;
-        position: absolute;
+  input {
+    opacity: 0;
+    position: absolute;
 
-        &:checked + label > .c-custom-checkbox__box {
-            background: $colorKey;
-            &:before {
-                color: $colorKeyFg;
-                content: $glyph-icon-check;
-                font-family: symbolsfont;
-                font-size: 0.6em;
-            }
-        }
+    &:checked + label > .c-custom-checkbox__box {
+      background: $colorKeyBg;
+      &:before {
+        color: $colorKeyFg;
+        content: $glyph-icon-check;
+        font-family: symbolsfont;
+        font-size: 0.6em;
+      }
+    }
 
-        &:not(:disabled) + label {
-            cursor: pointer;
-        }
+    &:not(:disabled) + label {
+      cursor: pointer;
+    }
 
-        &:disabled + label {
-            opacity: 0.5;
-        }
+    &:disabled + label {
+      opacity: 0.5;
     }
+  }
 }
diff --git a/src/ui/toolbar/components/toolbar-checkbox.vue b/src/ui/toolbar/components/toolbar-checkbox.vue
deleted file mode 100644
index 23b131fb623..00000000000
--- a/src/ui/toolbar/components/toolbar-checkbox.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-<div class="c-custom-checkbox">
-    <input
-        :id="uid"
-        type="checkbox"
-        :name="options.name"
-        :checked="options.value"
-        :disabled="options.disabled"
-        @change="onChange"
-    >
-
-    <label :for="uid">
-        <div class="c-custom-checkbox__box"></div>
-        <div class="c-custom-checkbox__label-text">
-            {{ options.name }}
-        </div>
-    </label>
-</div>
-</template>
-
-<script>
-let uniqueId = 100;
-
-export default {
-    props: {
-        options: {
-            type: Object,
-            required: true
-        }
-    },
-    data() {
-        uniqueId++;
-
-        return {
-            uid: `mct-checkbox-id-${uniqueId}`
-        };
-    },
-    methods: {
-        onChange(event) {
-            this.$emit('change', event.target.checked, {...this.options});
-        }
-    }
-};
-</script>
diff --git a/src/ui/toolbar/components/toolbar-color-picker.vue b/src/ui/toolbar/components/toolbar-color-picker.vue
deleted file mode 100644
index 01fa34c4a61..00000000000
--- a/src/ui/toolbar/components/toolbar-color-picker.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<template>
-<div class="c-ctrl-wrapper">
-    <div
-        class="c-icon-button c-icon-button--swatched"
-        :class="[options.icon, {'c-icon-button--mixed': nonSpecific}]"
-        :title="options.title"
-        @click="handleClick"
-    >
-        <div
-            class="c-swatch"
-            :style="{
-                background: options.value
-            }"
-        ></div>
-    </div>
-    <div
-        v-if="open"
-        class="c-menu c-palette c-palette--color"
-    >
-        <div
-            v-if="!options.preventNone"
-            class="c-palette__item-none"
-            @click="select({value: 'transparent'})"
-        >
-            <div class="c-palette__item"></div>
-            None
-        </div>
-        <div class="c-palette__items">
-            <div
-                v-for="(color, index) in colorPalette"
-                :key="index"
-                class="c-palette__item"
-                :style="{ background: color.value }"
-                @click="select(color)"
-            ></div>
-        </div>
-    </div>
-</div>
-</template>
-
-<script>
-
-import toggleMixin from '../../mixins/toggle-mixin';
-
-export default {
-    mixins: [toggleMixin],
-    props: {
-        options: {
-            type: Object,
-            required: true
-        }
-    },
-    data() {
-        return {
-            colorPalette: [
-                { value: '#000000' },
-                { value: '#434343' },
-                { value: '#666666' },
-                { value: '#999999' },
-                { value: '#b7b7b7' },
-                { value: '#cccccc' },
-                { value: '#d9d9d9' },
-                { value: '#efefef' },
-                { value: '#f3f3f3' },
-                { value: '#ffffff' },
-                { value: '#980000' },
-                { value: '#ff0000' },
-                { value: '#ff9900' },
-                { value: '#ffff00' },
-                { value: '#00ff00' },
-                { value: '#00ffff' },
-                { value: '#4a86e8' },
-                { value: '#0000ff' },
-                { value: '#9900ff' },
-                { value: '#ff00ff' },
-                { value: '#e6b8af' },
-                { value: '#f4cccc' },
-                { value: '#fce5cd' },
-                { value: '#fff2cc' },
-                { value: '#d9ead3' },
-                { value: '#d0e0e3' },
-                { value: '#c9daf8' },
-                { value: '#cfe2f3' },
-                { value: '#d9d2e9' },
-                { value: '#ead1dc' },
-                { value: '#dd7e6b' },
-                { value: '#dd7e6b' },
-                { value: '#f9cb9c' },
-                { value: '#ffe599' },
-                { value: '#b6d7a8' },
-                { value: '#a2c4c9' },
-                { value: '#a4c2f4' },
-                { value: '#9fc5e8' },
-                { value: '#b4a7d6' },
-                { value: '#d5a6bd' },
-                { value: '#cc4125' },
-                { value: '#e06666' },
-                { value: '#f6b26b' },
-                { value: '#ffd966' },
-                { value: '#93c47d' },
-                { value: '#76a5af' },
-                { value: '#6d9eeb' },
-                { value: '#6fa8dc' },
-                { value: '#8e7cc3' },
-                { value: '#c27ba0' },
-                { value: '#a61c00' },
-                { value: '#cc0000' },
-                { value: '#e69138' },
-                { value: '#f1c232' },
-                { value: '#6aa84f' },
-                { value: '#45818e' },
-                { value: '#3c78d8' },
-                { value: '#3d85c6' },
-                { value: '#674ea7' },
-                { value: '#a64d79' },
-                { value: '#85200c' },
-                { value: '#990000' },
-                { value: '#b45f06' },
-                { value: '#bf9000' },
-                { value: '#38761d' },
-                { value: '#134f5c' },
-                { value: '#1155cc' },
-                { value: '#0b5394' },
-                { value: '#351c75' },
-                { value: '#741b47' },
-                { value: '#5b0f00' },
-                { value: '#660000' },
-                { value: '#783f04' },
-                { value: '#7f6000' },
-                { value: '#274e13' },
-                { value: '#0c343d' },
-                { value: '#1c4587' },
-                { value: '#073763' },
-                { value: '#20124d' },
-                { value: '#4c1130' }
-            ]
-        };
-    },
-    computed: {
-        nonSpecific() {
-            return this.options.nonSpecific === true;
-        }
-    },
-    methods: {
-        select(color) {
-            if (color.value !== this.options.value) {
-                this.$emit('change', color.value, this.options);
-            }
-        },
-        handleClick(event) {
-            if ((this.options.isEditing === undefined) || this.options.isEditing) {
-                this.toggle(event);
-            }
-        }
-    }
-};
-</script>
diff --git a/src/ui/toolbar/components/toolbar-input.vue b/src/ui/toolbar/components/toolbar-input.vue
deleted file mode 100644
index 16c99895be0..00000000000
--- a/src/ui/toolbar/components/toolbar-input.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-<div
-    class="c-labeled-input"
-    :title="options.title"
->
-    <label :for="uid">
-        <div class="c-labeled-input__label">{{ options.label }}</div>
-    </label>
-    <input
-        :id="uid"
-        :type="options.type"
-        :value="options.value"
-        v-bind="options.attrs"
-    >
-</div>
-</template>
-
-<script>
-
-let inputUniqueId = 100;
-
-export default {
-    props: {
-        options: {
-            type: Object,
-            required: true,
-            validator(value) {
-                return ['number', 'text'].indexOf(value.type) !== -1;
-            }
-        }
-    },
-    data() {
-        inputUniqueId++;
-
-        return {
-            uid: `mct-input-id-${inputUniqueId}`
-        };
-    },
-    mounted() {
-        if (this.options.type === 'number') {
-            this.$el.addEventListener('input', this.onInput);
-        } else {
-            this.$el.addEventListener('change', this.onChange);
-        }
-    },
-    beforeDestroy() {
-        if (this.options.type === 'number') {
-            this.$el.removeEventListener('input', this.onInput);
-        } else {
-            this.$el.removeEventListener('change', this.onChange);
-        }
-    },
-    methods: {
-        onChange(event) {
-            this.$emit('change', event.target.value, this.options);
-        },
-        onInput(event) {
-            this.$emit('change', event.target.valueAsNumber, this.options);
-        }
-    }
-};
-</script>
diff --git a/src/ui/toolbar/components/toolbar-menu.vue b/src/ui/toolbar/components/toolbar-menu.vue
deleted file mode 100644
index b1efb28ca75..00000000000
--- a/src/ui/toolbar/components/toolbar-menu.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-<div class="c-ctrl-wrapper">
-    <div
-        class="c-icon-button c-icon-button--menu"
-        :class="options.icon"
-        :title="options.title"
-        @click="toggle"
-    >
-        <div
-            v-if="options.label"
-            class="c-icon-button__label"
-        >
-            {{ options.label }}
-        </div>
-    </div>
-    <div
-        v-if="open"
-        class="c-menu"
-    >
-        <ul>
-            <li
-                v-for="(option, index) in options.options"
-                :key="index"
-                :class="option.class"
-                @click="onClick(option)"
-            >
-                {{ option.name }}
-            </li>
-        </ul>
-    </div>
-</div>
-</template>
-
-<script>
-import toggle from '../../mixins/toggle-mixin';
-export default {
-    mixins: [toggle],
-    props: {
-        options: {
-            type: Object,
-            required: true,
-            validator(value) {
-                // must pass valid options array.
-                return Array.isArray(value.options)
-                    && value.options.every((o) => o.name);
-            }
-        }
-    },
-    methods: {
-        onClick(option) {
-            this.$emit('click', option);
-        }
-    }
-};
-</script>
diff --git a/src/ui/toolbar/components/toolbar-select-menu.vue b/src/ui/toolbar/components/toolbar-select-menu.vue
deleted file mode 100644
index 06fbc12f0a2..00000000000
--- a/src/ui/toolbar/components/toolbar-select-menu.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-<div class="c-ctrl-wrapper">
-    <div
-        class="c-icon-button c-icon-button--menu"
-        :class="[options.icon, {'c-click-icon--mixed': nonSpecific}]"
-        :title="options.title"
-        @click="toggle"
-    >
-        <div class="c-button__label">
-            {{ selectedName }}
-        </div>
-    </div>
-    <div
-        v-if="open"
-        class="c-menu"
-    >
-        <ul>
-            <li
-                v-for="option in options.options"
-                :key="option.value"
-                @click="select(option)"
-            >
-                {{ option.name || option.value }}
-            </li>
-        </ul>
-    </div>
-</div>
-</template>
-
-<script>
-import toggleMixin from '../../mixins/toggle-mixin';
-
-export default {
-    mixins: [toggleMixin],
-    props: {
-        options: {
-            type: Object,
-            required: true,
-            validator(value) {
-                // must pass valid options array.
-                return Array.isArray(value.options)
-                    && value.options.every((o) => o.value);
-            }
-        }
-    },
-    computed: {
-        selectedName() {
-            let selectedOption = this.options.options.filter((o) => o.value === this.options.value)[0];
-            if (selectedOption) {
-                return selectedOption.name || selectedOption.value;
-            }
-
-            // If no selected option, then options are non-specific
-            return '??';
-        },
-        nonSpecific() {
-            return this.options.nonSpecific === true;
-        }
-    },
-    methods: {
-        select(option) {
-            if (this.options.value === option.value) {
-                return;
-            }
-
-            this.$emit('change', option.value, this.options);
-        }
-    }
-};
-</script>
diff --git a/src/ui/toolbar/components/toolbar-separator.vue b/src/ui/toolbar/components/toolbar-separator.vue
deleted file mode 100644
index 359b477b4eb..00000000000
--- a/src/ui/toolbar/components/toolbar-separator.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-<div class="c-toolbar__separator"></div>
-</template>
-
-<script>
-export default {
-    props: {
-        options: {
-            type: Object,
-            required: true
-        }
-    }
-};
-</script>
diff --git a/src/ui/toolbar/components/toolbar-toggle-button.vue b/src/ui/toolbar/components/toolbar-toggle-button.vue
deleted file mode 100644
index e3d37c4c5fe..00000000000
--- a/src/ui/toolbar/components/toolbar-toggle-button.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-<div class="c-ctrl-wrapper">
-    <div
-        class="c-icon-button"
-        :title="nextValue.title"
-        :class="[nextValue.icon, {'c-icon-button--mixed': nonSpecific}]"
-        @click="cycle"
-    ></div>
-</div>
-</template>
-
-<script>
-export default {
-    props: {
-        options: {
-            type: Object,
-            required: true
-        }
-    },
-    computed: {
-        nextValue() {
-            let currentValue = this.options.options.filter((v) => this.options.value === v.value)[0];
-            let nextIndex = this.options.options.indexOf(currentValue) + 1;
-            if (nextIndex >= this.options.options.length) {
-                nextIndex = 0;
-            }
-
-            return this.options.options[nextIndex];
-        },
-        nonSpecific() {
-            return this.options.nonSpecific === true;
-        }
-    },
-    methods: {
-        cycle() {
-            if (this.options.isEditing === undefined || this.options.isEditing) {
-                this.$emit('change', this.nextValue.value, this.options);
-            }
-        }
-    }
-};
-</script>
diff --git a/src/utils/agent/Agent.js b/src/utils/agent/Agent.js
new file mode 100644
index 00000000000..9733554fa95
--- /dev/null
+++ b/src/utils/agent/Agent.js
@@ -0,0 +1,139 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/**
+ * The query service handles calls for browser and userAgent
+ * info using a comparison between the userAgent and key
+ * device names
+ * @constructor
+ * @param window the browser object model
+ * @memberof /utils/agent
+ */
+export default class Agent {
+  constructor(window) {
+    const userAgent = window.navigator.userAgent;
+    const matches = userAgent.match(/iPad|iPhone|Android/i) || [];
+
+    this.userAgent = userAgent;
+    this.mobileName = matches[0];
+    this.window = window;
+    this.touchEnabled = window.ontouchstart !== undefined;
+  }
+  /**
+   * Check if the user is on a mobile device.
+   * @returns {boolean} true on mobile
+   */
+  isMobile() {
+    return Boolean(this.mobileName);
+  }
+  /**
+   * Check if the user is on a phone-sized mobile device.
+   * @returns {boolean} true on a phone
+   */
+  isPhone() {
+    if (this.isMobile()) {
+      if (this.isAndroidTablet()) {
+        return false;
+      } else if (this.mobileName === 'iPad') {
+        return false;
+      } else {
+        return true;
+      }
+    } else {
+      return false;
+    }
+  }
+  /**
+   * Check if the user is on a tablet sized android device
+   * @returns {boolean} true on an android tablet
+   */
+  isAndroidTablet() {
+    if (this.mobileName === 'Android') {
+      if (this.isPortrait() && this.window.innerWidth >= 768) {
+        return true;
+      } else if (this.isLandscape() && this.window.innerHeight >= 768) {
+        return true;
+      }
+    } else {
+      return false;
+    }
+  }
+  /**
+   * Check if the user is on a tablet-sized mobile device.
+   * @returns {boolean} true on a tablet
+   */
+  isTablet() {
+    return (
+      (this.isMobile() && !this.isPhone() && this.mobileName !== 'Android') ||
+      (this.isMobile() && this.isAndroidTablet())
+    );
+  }
+  /**
+   * Check if the user's device is in a portrait-style
+   * orientation (display width is narrower than display height.)
+   * @returns {boolean} true in portrait mode
+   */
+  isPortrait() {
+    const { screen } = this.window;
+    const hasScreenOrientation =
+      screen && Object.prototype.hasOwnProperty.call(screen, 'orientation');
+    const hasWindowOrientation = Object.prototype.hasOwnProperty.call(this.window, 'orientation');
+
+    if (hasScreenOrientation) {
+      return screen.orientation.type.includes('portrait');
+    } else if (hasWindowOrientation) {
+      // Use window.orientation API if available (e.g. Safari mobile)
+      // which returns [-90, 0, 90, 180] based on device orientation.
+      const { orientation } = this.window;
+
+      return Math.abs(orientation / 90) % 2 === 0;
+    } else {
+      return this.window.innerWidth < this.window.innerHeight;
+    }
+  }
+  /**
+   * Check if the user's device is in a landscape-style
+   * orientation (display width is greater than display height.)
+   * @returns {boolean} true in landscape mode
+   */
+  isLandscape() {
+    return !this.isPortrait();
+  }
+  /**
+   * Check if the user's device supports a touch interface.
+   * @returns {boolean} true if touch is supported
+   */
+  isTouch() {
+    return this.touchEnabled;
+  }
+  /**
+   * Check if the user agent matches a certain named device,
+   * as indicated by checking for a case-insensitive substring
+   * match.
+   * @param {string} name the name to check for
+   * @returns {boolean} true if the user agent includes that name
+   */
+  isBrowser(name) {
+    name = name.toLowerCase();
+
+    return this.userAgent.toLowerCase().indexOf(name) !== -1;
+  }
+}
diff --git a/src/utils/agent/AgentSpec.js b/src/utils/agent/AgentSpec.js
new file mode 100644
index 00000000000..4dc5b16e690
--- /dev/null
+++ b/src/utils/agent/AgentSpec.js
@@ -0,0 +1,123 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import Agent from './Agent.js';
+
+const TEST_USER_AGENTS = {
+  DESKTOP:
+    'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.89 Safari/537.36',
+  IPAD: 'Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53',
+  IPHONE:
+    'Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53'
+};
+
+describe('The Agent', function () {
+  let testWindow;
+  let agent;
+
+  beforeEach(function () {
+    testWindow = {
+      innerWidth: 640,
+      innerHeight: 480,
+      navigator: {
+        userAgent: TEST_USER_AGENTS.DESKTOP
+      }
+    };
+  });
+
+  it('recognizes desktop devices as non-mobile', function () {
+    testWindow.navigator.userAgent = TEST_USER_AGENTS.DESKTOP;
+    agent = new Agent(testWindow);
+    expect(agent.isMobile()).toBeFalsy();
+    expect(agent.isPhone()).toBeFalsy();
+    expect(agent.isTablet()).toBeFalsy();
+  });
+
+  it('detects iPhones', function () {
+    testWindow.navigator.userAgent = TEST_USER_AGENTS.IPHONE;
+    agent = new Agent(testWindow);
+    expect(agent.isMobile()).toBeTruthy();
+    expect(agent.isPhone()).toBeTruthy();
+    expect(agent.isTablet()).toBeFalsy();
+  });
+
+  it('detects iPads', function () {
+    testWindow.navigator.userAgent = TEST_USER_AGENTS.IPAD;
+    agent = new Agent(testWindow);
+    expect(agent.isMobile()).toBeTruthy();
+    expect(agent.isPhone()).toBeFalsy();
+    expect(agent.isTablet()).toBeTruthy();
+  });
+
+  it('detects display orientation by innerHeight and innerWidth', function () {
+    agent = new Agent(testWindow);
+    testWindow.innerWidth = 1024;
+    testWindow.innerHeight = 400;
+    expect(agent.isPortrait()).toBeFalsy();
+    expect(agent.isLandscape()).toBeTruthy();
+    testWindow.innerWidth = 400;
+    testWindow.innerHeight = 1024;
+    expect(agent.isPortrait()).toBeTruthy();
+    expect(agent.isLandscape()).toBeFalsy();
+  });
+
+  it('detects display orientation by screen.orientation', function () {
+    agent = new Agent(testWindow);
+    testWindow.screen = {
+      orientation: {
+        type: 'landscape-primary'
+      }
+    };
+    expect(agent.isPortrait()).toBeFalsy();
+    expect(agent.isLandscape()).toBeTruthy();
+    testWindow.screen = {
+      orientation: {
+        type: 'portrait-primary'
+      }
+    };
+    expect(agent.isPortrait()).toBeTruthy();
+    expect(agent.isLandscape()).toBeFalsy();
+  });
+
+  it('detects display orientation by window.orientation', function () {
+    agent = new Agent(testWindow);
+    testWindow.orientation = 90;
+    expect(agent.isPortrait()).toBeFalsy();
+    expect(agent.isLandscape()).toBeTruthy();
+    testWindow.orientation = 0;
+    expect(agent.isPortrait()).toBeTruthy();
+    expect(agent.isLandscape()).toBeFalsy();
+  });
+
+  it('detects touch support', function () {
+    testWindow.ontouchstart = null;
+    expect(new Agent(testWindow).isTouch()).toBe(true);
+    delete testWindow.ontouchstart;
+    expect(new Agent(testWindow).isTouch()).toBe(false);
+  });
+
+  it('allows for checking browser type', function () {
+    testWindow.navigator.userAgent = 'Chromezilla Safarifox';
+    agent = new Agent(testWindow);
+    expect(agent.isBrowser('Chrome')).toBe(true);
+    expect(agent.isBrowser('Firefox')).toBe(false);
+  });
+});
diff --git a/src/utils/clipboard.js b/src/utils/clipboard.js
index b4f7645c889..5a35ca58a6e 100644
--- a/src/utils/clipboard.js
+++ b/src/utils/clipboard.js
@@ -1,13 +1,13 @@
 class Clipboard {
-    updateClipboard(newClip) {
-        // return promise
-        return navigator.clipboard.writeText(newClip);
-    }
+  updateClipboard(newClip) {
+    // return promise
+    return navigator.clipboard.writeText(newClip);
+  }
 
-    readClipboard() {
-        // return promise
-        return navigator.clipboard.readText();
-    }
+  readClipboard() {
+    // return promise
+    return navigator.clipboard.readText();
+  }
 }
 
 export default new Clipboard();
diff --git a/src/utils/clock/DefaultClock.js b/src/utils/clock/DefaultClock.js
index 40b6cbbec18..a5097188809 100644
--- a/src/utils/clock/DefaultClock.js
+++ b/src/utils/clock/DefaultClock.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2021, United States Government
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -30,60 +30,59 @@ import EventEmitter from 'EventEmitter';
  */
 
 export default class DefaultClock extends EventEmitter {
-    constructor() {
-        super();
+  constructor() {
+    super();
 
-        this.key = 'clock';
+    this.key = 'clock';
 
-        this.cssClass = 'icon-clock';
-        this.name = 'Clock';
-        this.description = "A default clock for openmct.";
-    }
-
-    tick(tickValue) {
-        this.emit("tick", tickValue);
-        this.lastTick = tickValue;
-    }
+    this.cssClass = 'icon-clock';
+    this.name = 'Clock';
+    this.description = 'A default clock for openmct.';
+  }
 
-    /**
-     * Register a listener for the clock. When it ticks, the
-     * clock will provide the time from the configured endpoint
-     *
-     * @param listener
-     * @returns {function} a function for deregistering the provided listener
-     */
-    on(event) {
-        let result = super.on.apply(this, arguments);
+  tick(tickValue) {
+    this.emit('tick', tickValue);
+    this.lastTick = tickValue;
+  }
 
-        if (this.listeners(event).length === 1) {
-            this.start();
-        }
+  /**
+   * Register a listener for the clock. When it ticks, the
+   * clock will provide the time from the configured endpoint
+   *
+   * @param listener
+   * @returns {function} a function for deregistering the provided listener
+   */
+  on(event) {
+    let result = super.on.apply(this, arguments);
 
-        return result;
+    if (this.listeners(event).length === 1) {
+      this.start();
     }
 
-    /**
-     * Register a listener for the clock. When it ticks, the
-     * clock will provide the current local system time
-     *
-     * @param listener
-     * @returns {function} a function for deregistering the provided listener
-     */
-    off(event) {
-        let result = super.off.apply(this, arguments);
+    return result;
+  }
 
-        if (this.listeners(event).length === 0) {
-            this.stop();
-        }
+  /**
+   * Register a listener for the clock. When it ticks, the
+   * clock will provide the current local system time
+   *
+   * @param listener
+   * @returns {function} a function for deregistering the provided listener
+   */
+  off(event) {
+    let result = super.off.apply(this, arguments);
 
-        return result;
+    if (this.listeners(event).length === 0) {
+      this.stop();
     }
 
-    /**
-     * @returns {number} The last value provided for a clock tick
-     */
-    currentValue() {
-        return this.lastTick;
-    }
+    return result;
+  }
 
+  /**
+   * @returns {number} The last value provided for a clock tick
+   */
+  currentValue() {
+    return this.lastTick;
+  }
 }
diff --git a/src/utils/constants.js b/src/utils/constants.js
new file mode 100644
index 00000000000..98f45617cb9
--- /dev/null
+++ b/src/utils/constants.js
@@ -0,0 +1,8 @@
+export const SupportedViewTypes = [
+  'plot-stacked',
+  'plot-overlay',
+  'bar-graph.view',
+  'time-strip.view',
+  'example.imagery',
+  'timelist.view'
+];
diff --git a/src/utils/debounce.js b/src/utils/debounce.js
new file mode 100644
index 00000000000..552c14c60fe
--- /dev/null
+++ b/src/utils/debounce.js
@@ -0,0 +1,8 @@
+export default function debounce(func, delay) {
+  let debounceTimer;
+
+  return function (...args) {
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => func(...args), delay);
+  };
+}
diff --git a/src/utils/duration.js b/src/utils/duration.js
index e69dd1dfb1b..e9fcf114a14 100644
--- a/src/utils/duration.js
+++ b/src/utils/duration.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,66 +20,76 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const ONE_MINUTE = 60 * 1000;
+const ONE_SECOND = 1000;
+const ONE_MINUTE = 60 * ONE_SECOND;
 const ONE_HOUR = ONE_MINUTE * 60;
 const ONE_DAY = ONE_HOUR * 24;
 
 function normalizeAge(num) {
-    const hundredtized = num * 100;
-    const isWhole = hundredtized % 100 === 0;
+  const hundredtized = num * 100;
+  const isWhole = hundredtized % 100 === 0;
 
-    return isWhole ? hundredtized / 100 : num;
+  return isWhole ? hundredtized / 100 : num;
 }
 
-function toDoubleDigits(num) {
-    if (num >= 10) {
-        return num;
-    } else {
-        return `0${num}`;
-    }
+function padLeadingZeros(num, numOfLeadingZeros) {
+  return num.toString().padStart(numOfLeadingZeros, '0');
 }
 
-export function getDuration(numericDuration) {
-    let result;
-    let age;
-
-    if (numericDuration > ONE_DAY - 1) {
-        age = normalizeAge((numericDuration / ONE_DAY)).toFixed(2);
-        result = `+ ${age} day`;
+function toDoubleDigits(num) {
+  return padLeadingZeros(num, 2);
+}
 
-        if (age !== 1) {
-            result += 's';
-        }
-    } else if (numericDuration > ONE_HOUR - 1) {
-        age = normalizeAge((numericDuration / ONE_HOUR).toFixed(2));
-        result = `+ ${age} hour`;
+function toTripleDigits(num) {
+  return padLeadingZeros(num, 3);
+}
 
-        if (age !== 1) {
-            result += 's';
-        }
-    } else {
-        age = normalizeAge((numericDuration / ONE_MINUTE).toFixed(2));
-        result = `+ ${age} min`;
+function addTimeSuffix(value, suffix) {
+  return typeof value === 'number' && value > 0 ? `${value + suffix}` : '';
+}
 
-        if (age !== 1) {
-            result += 's';
-        }
-    }
+export function millisecondsToDHMS(numericDuration) {
+  const ms = numericDuration || 0;
+  const dhms = [
+    addTimeSuffix(Math.floor(normalizeAge(ms / ONE_DAY)), 'd'),
+    addTimeSuffix(Math.floor(normalizeAge((ms % ONE_DAY) / ONE_HOUR)), 'h'),
+    addTimeSuffix(Math.floor(normalizeAge((ms % ONE_HOUR) / ONE_MINUTE)), 'm'),
+    addTimeSuffix(Math.floor(normalizeAge((ms % ONE_MINUTE) / ONE_SECOND)), 's'),
+    addTimeSuffix(Math.floor(normalizeAge(ms % ONE_SECOND)), 'ms')
+  ]
+    .filter(Boolean)
+    .join(' ');
 
-    return result;
+  return `${dhms ? '+' : ''} ${dhms}`;
 }
 
-export function getPreciseDuration(numericDuration) {
-    let result;
+export function getPreciseDuration(value, { excludeMilliSeconds, useDayFormat } = {}) {
+  let preciseDuration;
+  const ms = value || 0;
 
-    const days = toDoubleDigits(Math.floor((numericDuration) / (24 * 60 * 60 * 1000)));
-    let remaining = (numericDuration) % (24 * 60 * 60 * 1000);
-    const hours = toDoubleDigits(Math.floor((remaining) / (60 * 60 * 1000)));
-    remaining = (remaining) % (60 * 60 * 1000);
-    const minutes = toDoubleDigits(Math.floor((remaining) / (60 * 1000)));
-    remaining = (remaining) % (60 * 1000);
-    const seconds = toDoubleDigits(Math.floor((remaining) / (1000)));
-    result = `${days}:${hours}:${minutes}:${seconds}`;
+  const duration = [
+    Math.floor(normalizeAge(ms / ONE_DAY)),
+    toDoubleDigits(Math.floor(normalizeAge((ms % ONE_DAY) / ONE_HOUR))),
+    toDoubleDigits(Math.floor(normalizeAge((ms % ONE_HOUR) / ONE_MINUTE))),
+    toDoubleDigits(Math.floor(normalizeAge((ms % ONE_MINUTE) / ONE_SECOND)))
+  ];
+  if (!excludeMilliSeconds) {
+    duration.push(toTripleDigits(Math.floor(normalizeAge(ms % ONE_SECOND))));
+  }
+
+  if (useDayFormat) {
+    // Format days as XD
+    const days = duration.shift();
+    if (days > 0) {
+      preciseDuration = `${days}D ${duration.join(':')}`;
+    } else {
+      preciseDuration = duration.join(':');
+    }
+  } else {
+    const days = toDoubleDigits(duration.shift());
+    duration.unshift(days);
+    preciseDuration = duration.join(':');
+  }
 
-    return result;
+  return preciseDuration;
 }
diff --git a/src/utils/mount.js b/src/utils/mount.js
new file mode 100644
index 00000000000..565af579cc6
--- /dev/null
+++ b/src/utils/mount.js
@@ -0,0 +1,25 @@
+import { createApp, defineComponent } from 'vue';
+
+export default function mount(component, { props, children, element } = {}) {
+  let el = element;
+  if (!el) {
+    el = document.createElement('div');
+  }
+  let vueComponent = defineComponent(component);
+  let app = createApp(vueComponent);
+  let mountedComponentInstance = app.mount(el);
+
+  // eslint-disable-next-line func-style
+  const destroy = () => {
+    app.unmount();
+  };
+
+  return {
+    vNode: {
+      componentInstance: mountedComponentInstance,
+      el: mountedComponentInstance.$el
+    },
+    destroy,
+    el
+  };
+}
diff --git a/src/utils/raf.js b/src/utils/raf.js
new file mode 100644
index 00000000000..8d4811a0b33
--- /dev/null
+++ b/src/utils/raf.js
@@ -0,0 +1,14 @@
+export default function raf(callback) {
+  let rendering = false;
+
+  return (...args) => {
+    if (!rendering) {
+      rendering = true;
+
+      requestAnimationFrame(() => {
+        callback(...args);
+        rendering = false;
+      });
+    }
+  };
+}
diff --git a/src/utils/rafSpec.js b/src/utils/rafSpec.js
new file mode 100644
index 00000000000..bbd84f7df25
--- /dev/null
+++ b/src/utils/rafSpec.js
@@ -0,0 +1,65 @@
+import raf from './raf.js';
+
+describe('The raf utility function', () => {
+  it('Throttles function calls that arrive in quick succession using Request Animation Frame', () => {
+    const unthrottledFunction = jasmine.createSpy('unthrottledFunction');
+    const throttledCallback = jasmine.createSpy('throttledCallback');
+    const throttledFunction = raf(throttledCallback);
+
+    for (let i = 0; i < 10; i++) {
+      unthrottledFunction();
+      throttledFunction();
+    }
+
+    return new Promise((resolve) => {
+      requestAnimationFrame(resolve);
+    }).then(() => {
+      expect(unthrottledFunction).toHaveBeenCalledTimes(10);
+      expect(throttledCallback).toHaveBeenCalledTimes(1);
+    });
+  });
+  it('Only invokes callback once per animation frame', () => {
+    const throttledCallback = jasmine.createSpy('throttledCallback');
+    const throttledFunction = raf(throttledCallback);
+
+    for (let i = 0; i < 10; i++) {
+      throttledFunction();
+    }
+
+    return new Promise((resolve) => {
+      requestAnimationFrame(resolve);
+    })
+      .then(() => {
+        return new Promise((resolve) => {
+          requestAnimationFrame(resolve);
+        });
+      })
+      .then(() => {
+        expect(throttledCallback).toHaveBeenCalledTimes(1);
+      });
+  });
+  it('Invokes callback again if called in subsequent animation frame', () => {
+    const throttledCallback = jasmine.createSpy('throttledCallback');
+    const throttledFunction = raf(throttledCallback);
+
+    for (let i = 0; i < 10; i++) {
+      throttledFunction();
+    }
+
+    return new Promise((resolve) => {
+      requestAnimationFrame(resolve);
+    })
+      .then(() => {
+        for (let i = 0; i < 10; i++) {
+          throttledFunction();
+        }
+
+        return new Promise((resolve) => {
+          requestAnimationFrame(resolve);
+        });
+      })
+      .then(() => {
+        expect(throttledCallback).toHaveBeenCalledTimes(2);
+      });
+  });
+});
diff --git a/src/utils/sanitization.js b/src/utils/sanitization.js
new file mode 100644
index 00000000000..d0969baa2e3
--- /dev/null
+++ b/src/utils/sanitization.js
@@ -0,0 +1,29 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+function filter__proto__(key, value) {
+  if (key !== '__proto__') {
+    return value;
+  }
+}
+
+export { filter__proto__ };
diff --git a/src/utils/staleness.js b/src/utils/staleness.js
new file mode 100644
index 00000000000..7527a6b62c7
--- /dev/null
+++ b/src/utils/staleness.js
@@ -0,0 +1,78 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+export default class StalenessUtils {
+  constructor(openmct, domainObject) {
+    this.openmct = openmct;
+    this.domainObject = domainObject;
+    this.metadata = this.openmct.telemetry.getMetadata(domainObject);
+    this.lastStalenessResponseTime = 0;
+
+    this.setTimeSystem(this.openmct.time.getTimeSystem());
+    this.watchTimeSystem();
+  }
+
+  shouldUpdateStaleness(stalenessResponse, id) {
+    const stalenessResponseTime = this.parseTime(stalenessResponse);
+    const { start } = this.openmct.time.bounds();
+    const isStalenessInCurrentClock = stalenessResponseTime > start;
+
+    if (stalenessResponseTime > this.lastStalenessResponseTime && isStalenessInCurrentClock) {
+      this.lastStalenessResponseTime = stalenessResponseTime;
+
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  watchTimeSystem() {
+    this.openmct.time.on('timeSystem', this.setTimeSystem, this);
+  }
+
+  unwatchTimeSystem() {
+    this.openmct.time.off('timeSystem', this.setTimeSystem, this);
+  }
+
+  setTimeSystem(timeSystem) {
+    let metadataValue = { format: timeSystem.key };
+
+    if (this.metadata) {
+      metadataValue = this.metadata.value(timeSystem.key) ?? metadataValue;
+    }
+
+    const valueFormatter = this.openmct.telemetry.getValueFormatter(metadataValue);
+
+    this.parseTime = (stalenessResponse) => {
+      const stalenessDatum = {
+        ...stalenessResponse,
+        source: stalenessResponse[timeSystem.key]
+      };
+
+      return valueFormatter.parse(stalenessDatum);
+    };
+  }
+
+  destroy() {
+    this.unwatchTimeSystem();
+  }
+}
diff --git a/src/utils/template/templateHelpers.js b/src/utils/template/templateHelpers.js
new file mode 100644
index 00000000000..4a33b8858f1
--- /dev/null
+++ b/src/utils/template/templateHelpers.js
@@ -0,0 +1,23 @@
+export function convertTemplateToHTML(templateString) {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(templateString, 'text/html');
+
+  // Create a document fragment to hold the parsed content
+  const fragment = document.createDocumentFragment();
+
+  // Append nodes from the parsed content to the fragment
+  while (doc.body.firstChild) {
+    fragment.appendChild(doc.body.firstChild);
+  }
+
+  // Convert children of the fragment to an array and return
+  return Array.from(fragment.children);
+}
+
+export function toggleClass(element, className) {
+  if (element.classList.contains(className)) {
+    element.classList.remove(className);
+  } else {
+    element.classList.add(className);
+  }
+}
diff --git a/src/utils/template/templateHelpersSpec.js b/src/utils/template/templateHelpersSpec.js
new file mode 100644
index 00000000000..c0f67062add
--- /dev/null
+++ b/src/utils/template/templateHelpersSpec.js
@@ -0,0 +1,115 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import { toggleClass } from '@/utils/template/templateHelpers';
+
+const CLASS_AS_NON_EMPTY_STRING = 'class-to-toggle';
+const CLASS_AS_EMPTY_STRING = '';
+const CLASS_DEFAULT = CLASS_AS_NON_EMPTY_STRING;
+const CLASS_SECONDARY = 'another-class-to-toggle';
+const CLASS_TERTIARY = 'yet-another-class-to-toggle';
+
+const CLASS_TO_TOGGLE = CLASS_DEFAULT;
+
+describe('toggleClass', () => {
+  describe('type checking', () => {
+    const A_DOM_NODE = document.createElement('div');
+    const NOT_A_DOM_NODE = 'not-a-dom-node';
+    describe('errors', () => {
+      it('throws when "className" is an empty string', () => {
+        expect(() => toggleClass(A_DOM_NODE, CLASS_AS_EMPTY_STRING)).toThrow();
+      });
+      it('throws when "element" is not a DOM node', () => {
+        expect(() => toggleClass(NOT_A_DOM_NODE, CLASS_DEFAULT)).toThrow();
+      });
+    });
+    describe('success', () => {
+      it('does not throw when "className" is not an empty string', () => {
+        expect(() => toggleClass(A_DOM_NODE, CLASS_AS_NON_EMPTY_STRING)).not.toThrow();
+      });
+      it('does not throw when "element" is a DOM node', () => {
+        expect(() => toggleClass(A_DOM_NODE, CLASS_DEFAULT)).not.toThrow();
+      });
+    });
+  });
+  describe('adding a class', () => {
+    it('adds specified class to an element without any classes', () => {
+      // test case
+      const ELEMENT_WITHOUT_CLASS = document.createElement('div');
+      toggleClass(ELEMENT_WITHOUT_CLASS, CLASS_TO_TOGGLE);
+      // expected
+      const ELEMENT_WITHOUT_CLASS_EXPECTED = document.createElement('div');
+      ELEMENT_WITHOUT_CLASS_EXPECTED.classList.add(CLASS_TO_TOGGLE);
+      expect(ELEMENT_WITHOUT_CLASS).toEqual(ELEMENT_WITHOUT_CLASS_EXPECTED);
+    });
+    it('adds specified class to an element that already has another class', () => {
+      // test case
+      const ELEMENT_WITH_SINGLE_CLASS = document.createElement('div');
+      ELEMENT_WITH_SINGLE_CLASS.classList.add(CLASS_SECONDARY);
+      toggleClass(ELEMENT_WITH_SINGLE_CLASS, CLASS_TO_TOGGLE);
+      // expected
+      const ELEMENT_WITH_SINGLE_CLASS_EXPECTED = document.createElement('div');
+      ELEMENT_WITH_SINGLE_CLASS_EXPECTED.classList.add(CLASS_SECONDARY, CLASS_TO_TOGGLE);
+      expect(ELEMENT_WITH_SINGLE_CLASS).toEqual(ELEMENT_WITH_SINGLE_CLASS_EXPECTED);
+    });
+    it('adds specified class to an element that already has more than one other classes', () => {
+      // test case
+      const ELEMENT_WITH_MULTIPLE_CLASSES = document.createElement('div');
+      ELEMENT_WITH_MULTIPLE_CLASSES.classList.add(CLASS_TO_TOGGLE, CLASS_SECONDARY);
+      toggleClass(ELEMENT_WITH_MULTIPLE_CLASSES, CLASS_TO_TOGGLE);
+      // expected
+      const ELEMENT_WITH_MULTIPLE_CLASSES_EXPECTED = document.createElement('div');
+      ELEMENT_WITH_MULTIPLE_CLASSES_EXPECTED.classList.add(CLASS_SECONDARY);
+      expect(ELEMENT_WITH_MULTIPLE_CLASSES).toEqual(ELEMENT_WITH_MULTIPLE_CLASSES_EXPECTED);
+    });
+  });
+  describe('removing a class', () => {
+    it('removes specified class from an element that only has the specified class', () => {
+      // test case
+      const ELEMENT_WITH_ONLY_SPECIFIED_CLASS = document.createElement('div');
+      ELEMENT_WITH_ONLY_SPECIFIED_CLASS.classList.add(CLASS_TO_TOGGLE);
+      toggleClass(ELEMENT_WITH_ONLY_SPECIFIED_CLASS, CLASS_TO_TOGGLE);
+      // expected
+      const ELEMENT_WITH_ONLY_SPECIFIED_CLASS_EXPECTED = document.createElement('div');
+      ELEMENT_WITH_ONLY_SPECIFIED_CLASS_EXPECTED.className = '';
+      expect(ELEMENT_WITH_ONLY_SPECIFIED_CLASS).toEqual(ELEMENT_WITH_ONLY_SPECIFIED_CLASS_EXPECTED);
+    });
+    it('removes specified class from an element that has specified class, and others', () => {
+      // test case
+      const ELEMENT_WITH_SPECIFIED_CLASS_AND_OTHERS = document.createElement('div');
+      ELEMENT_WITH_SPECIFIED_CLASS_AND_OTHERS.classList.add(
+        CLASS_TO_TOGGLE,
+        CLASS_SECONDARY,
+        CLASS_TERTIARY
+      );
+      toggleClass(ELEMENT_WITH_SPECIFIED_CLASS_AND_OTHERS, CLASS_TO_TOGGLE);
+      // expected
+      const ELEMENT_WITH_SPECIFIED_CLASS_AND_OTHERS_EXPECTED = document.createElement('div');
+      ELEMENT_WITH_SPECIFIED_CLASS_AND_OTHERS_EXPECTED.classList.add(
+        CLASS_SECONDARY,
+        CLASS_TERTIARY
+      );
+      expect(ELEMENT_WITH_SPECIFIED_CLASS_AND_OTHERS).toEqual(
+        ELEMENT_WITH_SPECIFIED_CLASS_AND_OTHERS_EXPECTED
+      );
+    });
+  });
+});
diff --git a/src/utils/testing.js b/src/utils/testing.js
index 6116e868e87..037e239f543 100644
--- a/src/utils/testing.js
+++ b/src/utils/testing.js
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
+ * Open MCT, Copyright (c) 2014-2024, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -20,114 +20,130 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import MCT from 'MCT';
+import { MCT } from 'MCT';
+import { markRaw } from 'vue';
 
 let nativeFunctions = [];
 let mockObjects = setMockObjects();
 
-export function createOpenMct() {
-    const openmct = new MCT();
-    openmct.install(openmct.plugins.LocalStorage());
-    openmct.install(openmct.plugins.UTCTimeSystem());
-    openmct.time.timeSystem('utc', {
-        start: 0,
-        end: 1
-    });
-
-    return openmct;
+const EXAMPLE_ROLE = 'flight';
+const DEFAULT_TIME_OPTIONS = {
+  timeSystemKey: 'utc',
+  bounds: {
+    start: 0,
+    end: 1
+  }
+};
+
+export function createOpenMct(timeSystemOptions = DEFAULT_TIME_OPTIONS) {
+  const openmct = markRaw(new MCT());
+  openmct.install(openmct.plugins.LocalStorage());
+  openmct.install(openmct.plugins.UTCTimeSystem());
+  openmct.setAssetPath('/base');
+  openmct.user.setActiveRole(EXAMPLE_ROLE);
+
+  const timeSystemKey = timeSystemOptions.timeSystemKey;
+  const start = timeSystemOptions.bounds.start;
+  const end = timeSystemOptions.bounds.end;
+
+  openmct.time.setTimeSystem(timeSystemKey, {
+    start,
+    end
+  });
+
+  return openmct;
 }
 
 export function createMouseEvent(eventName) {
-    return new MouseEvent(eventName, {
-        bubbles: true,
-        cancelable: true,
-        view: window
-    });
+  return new MouseEvent(eventName, {
+    bubbles: true,
+    cancelable: true,
+    view: window
+  });
 }
 
 export function spyOnBuiltins(functionNames, object = window) {
-    functionNames.forEach(functionName => {
-        if (nativeFunctions[functionName]) {
-            throw `Builtin spy function already defined for ${functionName}`;
-        }
+  functionNames.forEach((functionName) => {
+    if (nativeFunctions[functionName]) {
+      throw `Builtin spy function already defined for ${functionName}`;
+    }
 
-        nativeFunctions.push({
-            functionName,
-            object,
-            nativeFunction: object[functionName]
-        });
-        spyOn(object, functionName);
+    nativeFunctions.push({
+      functionName,
+      object,
+      nativeFunction: object[functionName]
     });
+    spyOn(object, functionName);
+  });
 }
 
 export function clearBuiltinSpies() {
-    nativeFunctions.forEach(clearBuiltinSpy);
-    nativeFunctions = [];
+  nativeFunctions.forEach(clearBuiltinSpy);
+  nativeFunctions = [];
 }
 
 export function resetApplicationState(openmct) {
-    let promise;
+  let promise;
 
-    clearBuiltinSpies();
+  clearBuiltinSpies();
 
-    if (openmct !== undefined) {
-        openmct.destroy();
-    }
+  if (openmct !== undefined) {
+    openmct.destroy();
+  }
 
-    if (window.location.hash !== '#' && window.location.hash !== '') {
-        promise = new Promise((resolve, reject) => {
-            window.addEventListener('hashchange', cleanup);
-            window.location.hash = '#';
+  if (window.location.hash !== '#' && window.location.hash !== '') {
+    promise = new Promise((resolve, reject) => {
+      window.addEventListener('hashchange', cleanup);
+      window.location.hash = '#';
 
-            function cleanup() {
-                window.removeEventListener('hashchange', cleanup);
-                resolve();
-            }
-        });
-    } else {
-        promise = Promise.resolve();
-    }
+      function cleanup() {
+        window.removeEventListener('hashchange', cleanup);
+        resolve();
+      }
+    });
+  } else {
+    promise = Promise.resolve();
+  }
 
-    return promise;
+  return promise;
 }
 
 // required: key
 // optional: element, keyCode, type
 export function simulateKeyEvent(opts) {
+  if (!opts.key) {
+    console.warn('simulateKeyEvent needs a key');
 
-    if (!opts.key) {
-        console.warn('simulateKeyEvent needs a key');
+    return;
+  }
 
-        return;
-    }
+  const el = opts.element || document;
+  const key = opts.key;
+  const keyCode = opts.keyCode || key;
+  const type = opts.type || 'keydown';
+  const event = new Event(type);
 
-    const el = opts.element || document;
-    const key = opts.key;
-    const keyCode = opts.keyCode || key;
-    const type = opts.type || 'keydown';
-    const event = new Event(type);
+  event.keyCode = keyCode;
+  event.key = key;
 
-    event.keyCode = keyCode;
-    event.key = key;
-
-    el.dispatchEvent(event);
+  el.dispatchEvent(event);
 }
 
 function clearBuiltinSpy(funcDefinition) {
-    funcDefinition.object[funcDefinition.functionName] = funcDefinition.nativeFunction;
+  funcDefinition.object[funcDefinition.functionName] = funcDefinition.nativeFunction;
 }
 
 export function getLatestTelemetry(telemetry = [], opts = {}) {
-    let latest = [];
-    let timeFormat = opts.timeFormat || 'utc';
+  let latest = [];
+  let timeFormat = opts.timeFormat || 'utc';
 
-    if (telemetry.length) {
-        latest = telemetry.reduce((prev, cur) => {
-            return prev[timeFormat] > cur[timeFormat] ? prev : cur;
-        });
-    }
+  if (telemetry.length) {
+    latest = telemetry.reduce((prev, cur) => {
+      return prev[timeFormat] > cur[timeFormat] ? prev : cur;
+    });
+  }
 
-    return latest;
+  return latest;
 }
 
 // EXAMPLE:
@@ -147,81 +163,80 @@ export function getLatestTelemetry(telemetry = [], opts = {}) {
 //      }
 // })
 export function getMockObjects(opts = {}) {
-    opts.type = opts.type || 'default';
-    if (opts.objectKeyStrings && !Array.isArray(opts.objectKeyStrings)) {
-        throw `"getMockObjects" optional parameter "objectKeyStrings" must be an array of string object keys`;
+  opts.type = opts.type || 'default';
+  if (opts.objectKeyStrings && !Array.isArray(opts.objectKeyStrings)) {
+    throw `"getMockObjects" optional parameter "objectKeyStrings" must be an array of string object keys`;
+  }
+
+  let requestedMocks = {};
+
+  if (!opts.objectKeyStrings) {
+    requestedMocks = copyObj(mockObjects[opts.type]);
+  } else {
+    opts.objectKeyStrings.forEach((objKey) => {
+      if (mockObjects[opts.type] && mockObjects[opts.type][objKey]) {
+        requestedMocks[objKey] = copyObj(mockObjects[opts.type][objKey]);
+      } else {
+        throw `No mock object for object key "${objKey}" of type "${opts.type}"`;
+      }
+    });
+  }
+
+  // build out custom telemetry mappings if necessary
+  if (requestedMocks.telemetry && opts.telemetryConfig) {
+    let keys = opts.telemetryConfig.keys;
+    let format = opts.telemetryConfig.format || 'utc';
+    let hints = opts.telemetryConfig.hints;
+    let values;
+
+    // if utc, keep default
+    if (format === 'utc') {
+      // save for later if new keys
+      if (keys) {
+        format = requestedMocks.telemetry.telemetry.values.find((vals) => vals.key === 'utc');
+      }
+    } else {
+      format = {
+        key: format,
+        name: 'Time',
+        format: format === 'local' ? 'local-format' : format,
+        hints: {
+          domain: 1
+        }
+      };
     }
 
-    let requestedMocks = {};
-
-    if (!opts.objectKeyStrings) {
-        requestedMocks = copyObj(mockObjects[opts.type]);
+    if (keys) {
+      values = keys.map((key) => ({
+        key,
+        name: key + ' attribute'
+      }));
+      values.push(format); // add time format back in
     } else {
-        opts.objectKeyStrings.forEach(objKey => {
-            if (mockObjects[opts.type] && mockObjects[opts.type][objKey]) {
-                requestedMocks[objKey] = copyObj(mockObjects[opts.type][objKey]);
-            } else {
-                throw `No mock object for object key "${objKey}" of type "${opts.type}"`;
-            }
-        });
+      values = requestedMocks.telemetry.telemetry.values;
     }
 
-    // build out custom telemetry mappings if necessary
-    if (requestedMocks.telemetry && opts.telemetryConfig) {
-        let keys = opts.telemetryConfig.keys;
-        let format = opts.telemetryConfig.format || 'utc';
-        let hints = opts.telemetryConfig.hints;
-        let values;
-
-        // if utc, keep default
-        if (format === 'utc') {
-            // save for later if new keys
-            if (keys) {
-                format = requestedMocks.telemetry
-                    .telemetry.values.find((vals) => vals.key === 'utc');
-            }
-        } else {
-            format = {
-                key: format,
-                name: "Time",
-                format: format === 'local' ? 'local-format' : format,
-                hints: {
-                    domain: 1
-                }
-            };
-        }
-
-        if (keys) {
-            values = keys.map((key) => ({
-                key,
-                name: key + ' attribute'
-            }));
-            values.push(format); // add time format back in
-        } else {
-            values = requestedMocks.telemetry.telemetry.values;
-        }
-
-        if (hints) {
-            for (let val of values) {
-                if (hints[val.key]) {
-                    val.hints = hints[val.key];
-                }
-            }
+    if (hints) {
+      for (let val of values) {
+        if (hints[val.key]) {
+          val.hints = hints[val.key];
         }
-
-        requestedMocks.telemetry.telemetry.values = values;
+      }
     }
 
-    // overwrite any field keys
-    if (opts.overwrite) {
-        for (let mock in requestedMocks) {
-            if (opts.overwrite[mock]) {
-                requestedMocks[mock] = Object.assign(requestedMocks[mock], opts.overwrite[mock]);
-            }
-        }
+    requestedMocks.telemetry.telemetry.values = values;
+  }
+
+  // overwrite any field keys
+  if (opts.overwrite) {
+    for (let mock in requestedMocks) {
+      if (opts.overwrite[mock]) {
+        requestedMocks[mock] = Object.assign(requestedMocks[mock], opts.overwrite[mock]);
+      }
     }
+  }
 
-    return requestedMocks;
+  return requestedMocks;
 }
 
 // EXAMPLE:
@@ -232,107 +247,118 @@ export function getMockObjects(opts = {}) {
 //     format: 'local'
 // })
 export function getMockTelemetry(opts = {}) {
-    let count = opts.count || 2;
-    let format = opts.format || 'utc';
-    let name = opts.name || 'Mock Telemetry Datum';
-    let keyCount = 2;
-    let keys = false;
-    let telemetry = [];
-
-    if (opts.keys && Array.isArray(opts.keys)) {
-        keyCount = opts.keys.length;
-        keys = opts.keys;
-    } else if (opts.keyCount) {
-        keyCount = opts.keyCount;
+  let count = opts.count || 2;
+  let format = opts.format || 'utc';
+  let name = opts.name || 'Mock Telemetry Datum';
+  let keyCount = 2;
+  let keys = false;
+  let telemetry = [];
+
+  if (opts.keys && Array.isArray(opts.keys)) {
+    keyCount = opts.keys.length;
+    keys = opts.keys;
+  } else if (opts.keyCount) {
+    keyCount = opts.keyCount;
+  }
+
+  for (let i = 1; i < count + 1; i++) {
+    let datum = {
+      [format]: i,
+      name
+    };
+
+    for (let k = 1; k < keyCount + 1; k++) {
+      let key = keys ? keys[k - 1] : 'some-key-' + k;
+      let value = keys ? keys[k - 1] + ' value ' + i : 'some value ' + i + '-' + k;
+      datum[key] = value;
     }
 
-    for (let i = 1; i < count + 1; i++) {
-        let datum = {
-            [format]: i,
-            name
-        };
+    telemetry.push(datum);
+  }
 
-        for (let k = 1; k < keyCount + 1; k++) {
-            let key = keys ? keys[k - 1] : 'some-key-' + k;
-            let value = keys ? keys[k - 1] + ' value ' + i : 'some value ' + i + '-' + k;
-            datum[key] = value;
-        }
-
-        telemetry.push(datum);
-    }
+  return telemetry;
+}
 
-    return telemetry;
+// used to inject into tests that require a render
+export function renderWhenVisible(func) {
+  func();
+  return true;
 }
 
 // copy objects a bit more easily
 function copyObj(obj) {
-    return JSON.parse(JSON.stringify(obj));
+  return JSON.parse(JSON.stringify(obj));
 }
 
 // add any other necessary types to this mockObjects object
 function setMockObjects() {
-    return {
-        default: {
-            folder: {
-                identifier: {
-                    namespace: "",
-                    key: "folder-object"
-                },
-                name: "Test Folder Object",
-                type: "folder",
-                composition: [],
-                location: "mine"
+  return {
+    default: {
+      folder: {
+        identifier: {
+          namespace: '',
+          key: 'folder-object'
+        },
+        name: 'Test Folder Object',
+        type: 'folder',
+        composition: [],
+        location: 'mine'
+      },
+      ladTable: {
+        identifier: {
+          namespace: '',
+          key: 'lad-object'
+        },
+        type: 'LadTable',
+        composition: []
+      },
+      ladTableSet: {
+        identifier: {
+          namespace: '',
+          key: 'lad-set-object'
+        },
+        type: 'LadTableSet',
+        composition: []
+      },
+      telemetry: {
+        identifier: {
+          namespace: '',
+          key: 'telemetry-object'
+        },
+        type: 'test-telemetry-object',
+        name: 'Test Telemetry Object',
+        telemetry: {
+          values: [
+            {
+              key: 'name',
+              name: 'Name',
+              format: 'string'
             },
-            ladTable: {
-                identifier: {
-                    namespace: "",
-                    key: "lad-object"
-                },
-                type: 'LadTable',
-                composition: []
+            {
+              key: 'utc',
+              name: 'Time',
+              format: 'utc',
+              hints: {
+                domain: 1
+              }
             },
-            ladTableSet: {
-                identifier: {
-                    namespace: "",
-                    key: "lad-set-object"
-                },
-                type: 'LadTableSet',
-                composition: []
+            {
+              name: 'Some attribute 1',
+              key: 'some-key-1',
+              hints: {
+                range: 1
+              }
             },
-            telemetry: {
-                identifier: {
-                    namespace: "",
-                    key: "telemetry-object"
-                },
-                type: "test-telemetry-object",
-                name: "Test Telemetry Object",
-                telemetry: {
-                    values: [{
-                        key: "name",
-                        name: "Name",
-                        format: "string"
-                    }, {
-                        key: "utc",
-                        name: "Time",
-                        format: "utc",
-                        hints: {
-                            domain: 1
-                        }
-                    }, {
-                        name: "Some attribute 1",
-                        key: "some-key-1",
-                        hints: {
-                            range: 1
-                        }
-                    }, {
-                        name: "Some attribute 2",
-                        key: "some-key-2"
-                    }]
-                }
+            {
+              name: 'Some attribute 2',
+              key: 'some-key-2'
             }
-        },
-        otherType: {
-            example: {}
+          ]
         }
-    };
+      }
+    },
+    otherType: {
+      example: {}
+    }
+  };
 }
diff --git a/src/utils/testing/mockLocalStorage.js b/src/utils/testing/mockLocalStorage.js
index baf993e70d2..e55e021e003 100644
--- a/src/utils/testing/mockLocalStorage.js
+++ b/src/utils/testing/mockLocalStorage.js
@@ -1,33 +1,33 @@
 export function mockLocalStorage() {
-    let store;
+  let store;
 
-    beforeEach(() => {
-        spyOn(Storage.prototype, 'getItem').and.callFake(getItem);
-        spyOn(Storage.prototype, 'setItem').and.callFake(setItem);
-        spyOn(Storage.prototype, 'removeItem').and.callFake(removeItem);
-        spyOn(Storage.prototype, 'clear').and.callFake(clear);
+  beforeEach(() => {
+    spyOn(Storage.prototype, 'getItem').and.callFake(getItem);
+    spyOn(Storage.prototype, 'setItem').and.callFake(setItem);
+    spyOn(Storage.prototype, 'removeItem').and.callFake(removeItem);
+    spyOn(Storage.prototype, 'clear').and.callFake(clear);
 
-        store = {};
+    store = {};
 
-        function getItem(key) {
-            return store[key];
-        }
+    function getItem(key) {
+      return store[key] || null;
+    }
 
-        function setItem(key, value) {
-            store[key] = typeof value === 'string' ? value : JSON.stringify(value);
-        }
+    function setItem(key, value) {
+      store[key] = typeof value === 'string' ? value : JSON.stringify(value);
+    }
 
-        function removeItem(key) {
-            store[key] = undefined;
-            delete store[key];
-        }
+    function removeItem(key) {
+      store[key] = undefined;
+      delete store[key];
+    }
 
-        function clear() {
-            store = {};
-        }
-    });
+    function clear() {
+      store = {};
+    }
+  });
 
-    afterEach(() => {
-        store = undefined;
-    });
+  afterEach(() => {
+    store = undefined;
+  });
 }
diff --git a/src/utils/textHighlight/TextHighlight.vue b/src/utils/textHighlight/TextHighlight.vue
index 37ce232dafd..e28d47b6d0c 100644
--- a/src/utils/textHighlight/TextHighlight.vue
+++ b/src/utils/textHighlight/TextHighlight.vue
@@ -1,126 +1,63 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2021, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
-
-<span>
-    <span
-        v-for="segment in segments"
-        :key="segment.id"
-        :style="getStyles(segment)"
-        :class="{ [highlightClass] : segment.type === 'highlight' }"
-    >
-        {{ segment.text }}
-    </span>
-</span>
-
+  <!-- eslint-disable-next-line vue/no-v-html -->
+  <span v-html="highlightedText"></span>
 </template>
 
 <script>
-
-import uuid from 'uuid';
-
 export default {
-    props: {
-        text: {
-            type: String,
-            required: true
-        },
-        highlight: {
-            type: String,
-            default() {
-                return '';
-            }
-        },
-        highlightClass: {
-            type: String,
-            default() {
-                return 'highlight';
-            }
-        }
+  props: {
+    text: {
+      type: String,
+      required: true
     },
-    data() {
-        return {
-            segments: []
-        };
+    highlight: {
+      type: String,
+      default() {
+        return '';
+      }
     },
-    watch: {
-        highlight() {
-            this.highlightText();
-        },
-        text() {
-            this.highlightText();
-        }
-    },
-    mounted() {
-        this.highlightText();
-    },
-    methods: {
-        addHighlightSegment(segment) {
-            this.segments.push({
-                id: uuid(),
-                text: segment,
-                type: 'highlight',
-                spaceBefore: segment.startsWith(' '),
-                spaceAfter: segment.endsWith(' ')
-            });
-        },
-        addTextSegment(segment) {
-            this.segments.push({
-                id: uuid(),
-                text: segment,
-                type: 'text',
-                spaceBefore: segment.startsWith(' '),
-                spaceAfter: segment.endsWith(' ')
-            });
-        },
-        getStyles(segment) {
-            let styles = {
-                display: 'inline-block'
-            };
+    highlightClass: {
+      type: String,
+      default() {
+        return 'highlight';
+      }
+    }
+  },
+  computed: {
+    highlightedText() {
+      const highlight = this.highlight;
+
+      const normalCharsRegex = /^[^A-Za-z0-9]+$/g;
 
-            if (segment.spaceBefore) {
-                styles.paddingLeft = '.33em';
-            }
+      const newHighLight = normalCharsRegex.test(highlight) ? `\\${highlight}` : highlight;
 
-            if (segment.spaceAfter) {
-                styles.paddingRight = '.33em';
-            }
+      const highlightRegex = new RegExp(`(?<!<[^>]*)(${newHighLight})`, 'gi');
 
-            return styles;
-        },
-        highlightText() {
-            this.segments = [];
-            let regex = new RegExp('(' + this.highlight + ')', 'gi');
-            let textSegments = this.text.split(regex);
+      const replacement = `<span class="${this.highlightClass}">${highlight}</span>`;
 
-            for (let i = 0; i < textSegments.length; i++) {
-                if (textSegments[i].toLowerCase() === this.highlight.toLowerCase()) {
-                    this.addHighlightSegment(textSegments[i]);
-                } else {
-                    this.addTextSegment(textSegments[i]);
-                }
-            }
-        }
+      return this.text.replace(highlightRegex, replacement);
     }
+  }
 };
 </script>
diff --git a/src/utils/throttle.js b/src/utils/throttle.js
new file mode 100644
index 00000000000..787152bad20
--- /dev/null
+++ b/src/utils/throttle.js
@@ -0,0 +1,34 @@
+/**
+ * Creates a throttled function that only invokes the provided function at most once every
+ * specified number of milliseconds. Subsequent calls within the waiting period will be ignored.
+ * @param {Function} func The function to throttle.
+ * @param {number} wait The number of milliseconds to wait between successive calls to the function.
+ * @return {Function} Returns the new throttled function.
+ */
+export default function throttle(func, wait) {
+  let timeout;
+  let result;
+  let previous = 0;
+
+  return function (...args) {
+    const now = new Date().getTime();
+    const remaining = wait - (now - previous);
+
+    if (remaining <= 0 || remaining > wait) {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+
+      previous = now;
+      result = func(...args);
+    } else if (!timeout) {
+      timeout = setTimeout(() => {
+        previous = new Date().getTime();
+        timeout = null;
+        result = func(...args);
+      }, remaining);
+    }
+    return result;
+  };
+}
diff --git a/src/utils/useEventBus.js b/src/utils/useEventBus.js
new file mode 100644
index 00000000000..e52367baba0
--- /dev/null
+++ b/src/utils/useEventBus.js
@@ -0,0 +1,19 @@
+import emitter from 'tiny-emitter/instance.js';
+import { ref } from 'vue';
+
+export function useEventBus() {
+  // Create a reactive reference to the emitter
+  const reactiveEmitter = ref(emitter);
+
+  // Expose the emitter's methods
+  const EventBus = {
+    $on: (...args) => reactiveEmitter.value.on(...args),
+    $once: (...args) => reactiveEmitter.value.once(...args),
+    $off: (...args) => reactiveEmitter.value.off(...args),
+    $emit: (...args) => reactiveEmitter.value.emit(...args)
+  };
+
+  return {
+    EventBus
+  };
+}
diff --git a/src/utils/visibility/VisibilityObserver.js b/src/utils/visibility/VisibilityObserver.js
new file mode 100644
index 00000000000..43bf1f5a701
--- /dev/null
+++ b/src/utils/visibility/VisibilityObserver.js
@@ -0,0 +1,104 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/**
+ * Optimizes `requestAnimationFrame` calls to only execute when the element is visible in the viewport.
+ */
+export default class VisibilityObserver {
+  #element;
+  #observer;
+  lastUnfiredFunc;
+
+  /**
+   * Constructs a VisibilityObserver instance to manage visibility-based requestAnimationFrame calls.
+   *
+   * @param {HTMLElement} element - The DOM element to observe for visibility changes.
+   * @param {HTMLElement} rootContainer - The DOM element that is the root of the viewport.
+   * @throws {Error} If element is not provided.
+   */
+  constructor(element, rootContainer) {
+    if (!element || !rootContainer) {
+      throw new Error(`VisibilityObserver must be created with an element and a rootContainer.`);
+    }
+    this.#element = element;
+    this.isIntersecting = true;
+    this.calledOnce = false;
+    const options = {
+      root: rootContainer
+    };
+    this.#observer = new IntersectionObserver(this.#observerCallback, options);
+    this.lastUnfiredFunc = null;
+    this.renderWhenVisible = this.renderWhenVisible.bind(this);
+  }
+
+  #inOverlay() {
+    return this.#element.closest('.js-overlay') !== null;
+  }
+
+  #observerCallback = ([entry]) => {
+    if (entry.target === this.#element) {
+      if (this.#inOverlay() && !entry.isIntersecting) {
+        this.isIntersecting = true;
+      } else {
+        this.isIntersecting = entry.isIntersecting;
+      }
+      if (this.isIntersecting && this.lastUnfiredFunc) {
+        window.requestAnimationFrame(this.lastUnfiredFunc);
+        this.lastUnfiredFunc = null;
+      }
+    }
+  };
+
+  /**
+   * Executes a function within requestAnimationFrame if the observed element is visible.
+   * If the element is not visible, the function is stored and called when the element becomes visible.
+   * Note that if called multiple times while not visible, only the last execution is stored and executed.
+   *
+   * @param {Function} func - The function to execute.
+   * @returns {boolean} True if the function was executed immediately, false otherwise.
+   */
+  renderWhenVisible(func) {
+    if (!this.calledOnce) {
+      this.calledOnce = true;
+      this.#observer.observe(this.#element);
+      window.requestAnimationFrame(func);
+      return true;
+    } else if (this.isIntersecting) {
+      window.requestAnimationFrame(func);
+      return true;
+    } else {
+      this.lastUnfiredFunc = func;
+      return false;
+    }
+  }
+
+  /**
+   * Stops observing the element for visibility changes and cleans up resources to prevent memory leaks.
+   */
+  destroy() {
+    this.#observer.unobserve(this.#element);
+    this.#element = null;
+    this.isIntersecting = null;
+    this.#observer = null;
+    this.lastUnfiredFunc = null;
+  }
+}
diff --git a/src/utils/vueWrapHtmlElement.js b/src/utils/vueWrapHtmlElement.js
new file mode 100644
index 00000000000..332d76cc19c
--- /dev/null
+++ b/src/utils/vueWrapHtmlElement.js
@@ -0,0 +1,25 @@
+import { defineComponent, h, onMounted, ref } from 'vue';
+
+/**
+ * Compatibility wrapper for wrapping an HTMLElement in a Vue component.
+ *
+ * @param {HTMLElement} element
+ * @returns {import('vue').Component}
+ */
+export default function vueWrapHtmlElement(element) {
+  return defineComponent({
+    setup() {
+      const wrapper = ref(null);
+
+      onMounted(() => {
+        if (wrapper.value) {
+          wrapper.value.appendChild(element);
+        }
+      });
+
+      // Render function returning the wrapper div
+      // Use class 'u-contents' to set 'display: contents' of the parent div
+      return () => h('div', { ref: wrapper, class: 'u-contents' });
+    }
+  });
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000000..545e4e4f103
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,27 @@
+/* Note: Open MCT does not intend to support the entire Typescript ecosystem at this time.
+ * This file is intended to add Intellisense for IDEs like VSCode. For more information
+ * about Typescript, please discuss in https://github.com/nasa/openmct/discussions/4693
+ */
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "allowJs": true,
+    "checkJs": false,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "declarationMap": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "noImplicitOverride": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "outDir": "dist",
+    "skipLibCheck": true,
+    "paths": {
+      // matches the alias in webpack config, so that types for those imports are visible.
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/api/**/*.js"],
+  "exclude": ["node_modules", "dist", "**/*Spec.js"]
+}
diff --git a/webpack.config.js b/webpack.config.js
deleted file mode 100644
index 10492759425..00000000000
--- a/webpack.config.js
+++ /dev/null
@@ -1,139 +0,0 @@
-const path = require('path');
-const packageDefinition = require('./package.json');
-
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const webpack = require('webpack');
-
-const devMode = process.env.NODE_ENV !== 'production';
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
-// TODO: Build Constants w/ git-rev-sync
-const gitRevision = require('child_process')
-    .execSync('git rev-parse HEAD')
-    .toString().trim();
-const gitBranch = require('child_process')
-    .execSync('git rev-parse --abbrev-ref HEAD')
-    .toString().trim();
-const vueFile = devMode
-    ? path.join(__dirname, "node_modules/vue/dist/vue.js")
-    : path.join(__dirname, "node_modules/vue/dist/vue.min.js");
-
-const webpackConfig = {
-    mode: devMode ? 'development' : 'production',
-    entry: {
-        openmct: './openmct.js',
-        couchDBChangesFeed: './src/plugins/persistence/couch/CouchChangesFeed.js',
-        espressoTheme: './src/plugins/themes/espresso-theme.scss',
-        snowTheme: './src/plugins/themes/snow-theme.scss',
-        maelstromTheme: './src/plugins/themes/maelstrom-theme.scss'
-    },
-    output: {
-        globalObject: "this",
-        filename: '[name].js',
-        library: '[name]',
-        libraryTarget: 'umd',
-        path: path.resolve(__dirname, 'dist')
-    },
-    resolve: {
-        alias: {
-            "@": path.join(__dirname, "src"),
-            "legacyRegistry": path.join(__dirname, "src/legacyRegistry"),
-            "saveAs": "file-saver",
-            "csv": "comma-separated-values",
-            "EventEmitter": "eventemitter3",
-            "bourbon": "bourbon.scss",
-            "vue": vueFile,
-            "d3-scale": path.join(__dirname, "node_modules/d3-scale/build/d3-scale.min.js"),
-            "printj": path.join(__dirname, "node_modules/printj/dist/printj.min.js"),
-            "styles": path.join(__dirname, "src/styles"),
-            "MCT": path.join(__dirname, "src/MCT"),
-            "testUtils": path.join(__dirname, "src/utils/testUtils.js"),
-            "objectUtils": path.join(__dirname, "src/api/objects/object-utils.js"),
-            "utils": path.join(__dirname, "src/utils")
-        }
-    },
-    devtool: devMode ? 'eval-source-map' : 'source-map',
-    plugins: [
-        new webpack.DefinePlugin({
-            __OPENMCT_VERSION__: `'${packageDefinition.version}'`,
-            __OPENMCT_BUILD_DATE__: `'${new Date()}'`,
-            __OPENMCT_REVISION__: `'${gitRevision}'`,
-            __OPENMCT_BUILD_BRANCH__: `'${gitBranch}'`,
-            __OPENMCT_ROOT_RELATIVE__: `'${devMode ? 'dist/' : ''}'`
-        }),
-        new VueLoaderPlugin(),
-        new MiniCssExtractPlugin({
-            filename: '[name].css',
-            chunkFilename: '[name].css'
-        }),
-        new CopyWebpackPlugin([
-            {
-                from: 'src/images/favicons',
-                to: 'favicons'
-            },
-            {
-                from: './index.html',
-                transform: function (content) {
-                    return content.toString().replace(/dist\//g, '');
-                }
-            }
-        ])
-    ],
-    module: {
-        rules: [
-            {
-                test: /\.(sc|sa|c)ss$/,
-                use: [
-                    MiniCssExtractPlugin.loader,
-                    'css-loader',
-                    'fast-sass-loader'
-                ]
-            },
-            {
-                test: /\.html$/,
-                use: 'html-loader'
-            },
-            {
-                test: /zepto/,
-                use: [
-                    "imports-loader?this=>window",
-                    "exports-loader?Zepto"
-                ]
-            },
-            {
-                test: /\.(jpg|jpeg|png|svg|ico|woff2?|eot|ttf)$/,
-                loader: 'file-loader',
-                options: {
-                    name: '[name].[ext]',
-                    outputPath(url, resourcePath, context) {
-                        if (/\.(jpg|jpeg|png|svg)$/.test(url)) {
-                            return `images/${url}`;
-                        }
-
-                        if (/\.ico$/.test(url)) {
-                            return `icons/${url}`;
-                        }
-
-                        if (/\.(woff2?|eot|ttf)$/.test(url)) {
-                            return `fonts/${url}`;
-                        } else {
-                            return `${url}`;
-                        }
-                    }
-                }
-            },
-            {
-                test: /\.vue$/,
-                use: 'vue-loader'
-            }
-        ]
-    },
-    stats: {
-        modules: false,
-        timings: true,
-        colors: true,
-        warningsFilter: /asset size limit/g
-    }
-};
-
-module.exports = webpackConfig;